/* website/assets/css/nova.css — Nova AI by Maxy · sistem desain landing
   ══════════════════════════════════════════════════════════════════════════════
   Palet diambil LANGSUNG dari logo Maxy Academy (assets/img/maxy-logo.jpg):
   putih, kuning #F5A623, navy #2A3164. Tidak ada warna kelima.

   Berdiri sendiri: file ini menggantikan tokens.css + landing.css KHUSUS untuk
   index.html. waitlist.html & panduan.html masih memakai pasangan lama, jadi
   jangan impor apa pun dari sini ke sana dan sebaliknya.

   Gaya: Minimalism & Swiss (rekomendasi ui-ux-pro-max --design-system) — grid
   tegas, ruang putih lebar, kontras tinggi — DITAMBAH lapisan kedalaman 3D dan
   gerak yang dijalankan motion.dev. Ruang putih yang menahan, gerak yang
   menghidupkan; bukan salah satunya saja.
   ══════════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;450;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ══════════════════════════════════════════════════════════════════════════════
   TOKEN
   ══════════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Merek Maxy ── */
  --yellow:       #F5A623;
  --yellow-lt:    #FBB040;
  --yellow-hi:    #FFC85C;
  --yellow-pale:  #FEF4E0;
  --navy:         #2A3164;
  --navy-deep:    #1A2049;
  --navy-mid:     #3D4788;
  --navy-pale:    #EDEFF8;

  /* Kuning murni TIDAK LULUS kontras sebagai teks di atas putih (2.0:1).
     Untuk teks beraksen selalu pakai --gold-ink (5.0:1). Kuning hanya untuk
     bidang isi, garis, dan grafik besar. */
  --gold-ink:     #A16207;

  /* ── Permukaan ── */
  --paper:   #FFFFFF;
  --bg:      #F7F8FB;
  --bg-2:    #EEF1F8;
  --bg-sunk: #FBFCFE;

  /* ── Garis ── */
  --line:   #E3E8F2;
  --line-2: #CBD3E6;

  /* ── Teks (semua ≥4.5:1 di atas putih) ── */
  --ink:   #141A33;
  --ink-2: #4A5478;
  --ink-3: #6B7599;

  /* ── Semantik ── */
  --ok:     #0F8A5F;
  --ok-bg:  #E6F6EF;
  --warn:   var(--gold-ink);
  --warn-bg: var(--yellow-pale);
  --info:   #2854C8;
  --info-bg: #E8EDFC;
  --bad:    #C62828;

  /* ── Tipografi ──
     Catatan: --design-system mengusulkan Roboto (pasangan Material Design 3).
     Itu pasangan untuk aplikasi Android, bukan landing enterprise; dipakai di
     sini akan terbaca seperti dashboard internal. Diganti grotesk geometris
     yang sejalan dengan gaya Swiss yang sama-sama direkomendasikan skill. */
  --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono:         'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;

  /* ── Bentuk ── */
  --r-xs: 6px;  --r-sm: 10px; --r: 14px;
  --r-lg: 18px; --r-xl: 26px; --r-pill: 999px;

  /* ── Ritme spasi 4pt · density 3/10 (spacious) ── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --s9: 112px; --s10: 152px;

  /* ── Gerak: satu kurva untuk seluruh halaman ── */
  --ease:     cubic-bezier(.16, 1, .3, 1);
  --t-fast:   140ms;
  --t:        220ms;
  --t-slow:   380ms;

  /* ── Layout ── */
  --wrap: 1200px;
  --gutter: 24px;
  --nav-h: 68px;

  /* ── Elevasi: bayangan bernuansa navy, bukan abu-abu netral ── */
  --sh-sm: 0 1px 2px rgba(26, 32, 73, .06), 0 0 0 1px rgba(26, 32, 73, .04);
  --sh:    0 4px 16px -4px rgba(26, 32, 73, .10), 0 0 0 1px rgba(26, 32, 73, .05);
  --sh-lg: 0 24px 56px -20px rgba(26, 32, 73, .22), 0 0 0 1px rgba(26, 32, 73, .06);
  --sh-xl: 0 48px 100px -32px rgba(26, 32, 73, .32), 0 0 0 1px rgba(26, 32, 73, .07);
  --sh-gold: 0 10px 30px -10px rgba(245, 166, 35, .55);

  /* ── Aksen futuristik: cyan HANYA sebagai cahaya/glow (bukan bidang isi
     datar), melengkapi amber+navy tanpa menjadi "warna kelima". Dipakai di
     jaring saraf yang berdenyut, tepi holografik orbit, dan konsol. ── */
  --cyan:       #22D3EE;
  --cyan-ink:   #0E7490;
  --cyan-glow:  rgba(34, 211, 238, .30);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── "Mode 90%" ──────────────────────────────────────────────────────────────
   Di layar lebar, seluruh isi diperkecil ke 90% supaya tidak terasa terlalu
   close-up saat zoom browser 100%. Latar (.backdrop) tetap menutupi penuh
   karena position:fixed + inset:0 (0 tetap 0 walau di-zoom). Ponsel & tablet
   (<1024px) tetap 100% karena ukurannya sudah diatur media query.
   Untuk menyetel: ubah angka 0.9 (mis. 0.85 lebih kecil, 0.95 lebih besar). */
@media (min-width: 1024px) {
  body { zoom: 0.9; }
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
::selection { background: var(--yellow); color: var(--navy-deep); }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 3px; }

.mono, .num, .stat > strong { font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════════════════════
   LAPISAN LATAR
   Kanvas konstelasi (JS) + bidang kuning/navy lembut + grid rambut.
   Semuanya dekoratif dan berhenti total saat prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════════════════ */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.backdrop::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(42, 49, 100, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42, 49, 100, .045) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: radial-gradient(1100px 720px at 50% 0%, #000 0%, transparent 76%);
  -webkit-mask-image: radial-gradient(1100px 720px at 50% 0%, #000 0%, transparent 76%);
}

/* Kanvas jaring simpul — digambar nova-motion.js */
#neural {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .95;
}

/* Dua bidang warna merek yang hanyut pelan di belakang segalanya */
.orb { position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform; }
.orb-y {
  width: 620px; height: 520px; top: -180px; right: -80px;
  background: radial-gradient(circle, rgba(245, 166, 35, .30), transparent 68%);
}
.orb-n {
  width: 560px; height: 480px; top: 220px; left: -140px;
  background: radial-gradient(circle, rgba(42, 49, 100, .16), transparent 68%);
}

.announce, .nav, main, .footer { position: relative; z-index: 1; }

/* ── Bar progres baca ── */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 400;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--yellow), var(--navy));
}

/* ══════════════════════════════════════════════════════════════════════════════
   PRIMITIF
   ══════════════════════════════════════════════════════════════════════════════ */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 820px; }

.section { padding: var(--s9) 0; }
.section--paper { background: var(--paper); border-block: 1px solid var(--line); }

/* ── Label mikro mono ── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tag::before { content: ''; width: 20px; height: 1px; background: var(--line-2); }
.tag--gold { color: var(--gold-ink); }
.tag--gold::before { background: var(--yellow); }

.pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--yellow);
  flex: none;
  animation: pulse 2s var(--ease) infinite;
}
.pulse--ok { background: var(--ok); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245, 166, 35, .5); }
  70%  { box-shadow: 0 0 0 8px rgba(245, 166, 35, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0); }
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.12;
  color: var(--navy-deep);
}

.section-head { max-width: 760px; margin-bottom: var(--s7); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center p { margin-inline: auto; }
.section-head h2 {
  font-size: clamp(34px, 4.6vw, 58px);
  letter-spacing: -.042em;
  line-height: 1.02;
  margin: var(--s4) 0 var(--s3);
}
.section-head p { font-size: 17px; line-height: 1.65; color: var(--ink-2); max-width: 62ch; }

/* Sapuan kuning di belakang frasa kunci — menggantikan gradient-text.
   Digambar dari kiri sekali saat elemennya masuk layar. */
.mark {
  position: relative;
  white-space: nowrap;
  z-index: 0;
}
.mark::before {
  content: '';
  position: absolute;
  left: -.08em; right: -.08em; bottom: .04em;
  height: .34em;
  background: var(--yellow);
  opacity: .55;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--ease) .2s;
}
.mark.in::before { transform: scaleX(1); }

/* ── Tombol ── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 13px 22px;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  font-weight: 550;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  will-change: transform;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.btn i { font-size: 17px; }

.btn-primary {
  background: var(--yellow);
  color: var(--navy-deep);
  font-weight: 650;
  box-shadow: var(--sh-gold);
}
.btn-primary:hover { background: var(--yellow-hi); box-shadow: 0 14px 38px -10px rgba(245, 166, 35, .7); }

.btn-navy { background: var(--navy); color: #fff; font-weight: 600; box-shadow: 0 10px 28px -12px rgba(42, 49, 100, .6); }
.btn-navy:hover { background: var(--navy-deep); }

.btn-ghost { background: var(--paper); border-color: var(--line-2); color: var(--navy-deep); box-shadow: var(--sh-sm); }
.btn-ghost:hover { border-color: var(--navy-mid); box-shadow: var(--sh); }

.btn-quiet { color: var(--ink-2); padding-inline: 12px; }
.btn-quiet:hover { color: var(--navy-deep); background: var(--navy-pale); }

.btn-sm { padding: 9px 15px; min-height: 38px; font-size: 13.5px; }
.btn-lg { padding: 16px 28px; min-height: 54px; font-size: 15.5px; }

/* ══════════════════════════════════════════════════════════════════════════════
   LAPISAN 3D & POINTER
   Tiga perilaku yang dipakai berulang di seluruh halaman. Semuanya dikendalikan
   nova-motion.js lewat custom property, jadi CSS tidak perlu tahu soal event.
   ══════════════════════════════════════════════════════════════════════════════ */

/* (a) TILT — kartu miring mengikuti pointer.
   Wrapper memberi perspective; anak-nya yang benar-benar diputar. */
.tilt { perspective: 1000px; }
.tilt-in {
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform var(--t-slow) var(--ease);
  will-change: transform;
}
.tilt.is-live .tilt-in { transition: none; }   /* saat pointer aktif, ikuti langsung */

/* Elemen yang diangkat keluar dari bidang kartu */
.lift-1 { transform: translateZ(28px); }
.lift-2 { transform: translateZ(52px); }

/* (b) SPOTLIGHT — lingkaran cahaya mengikuti pointer di dalam kartu. */
.spot { position: relative; overflow: hidden; }
.spot::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t) var(--ease);
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
              rgba(245, 166, 35, .16), transparent 62%);
}
.spot:hover::after { opacity: 1; }

/* (c) GLOW BORDER — tepi menyala mengikuti pointer. */
.glow { position: relative; }
.glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t) var(--ease);
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
              var(--yellow), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
.glow:hover::before { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════════════
   BANNER + NAV
   ══════════════════════════════════════════════════════════════════════════════ */
.announce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 10px var(--gutter);
  text-align: center;
  background: var(--navy-deep);
  color: rgba(255, 255, 255, .88);
  font-size: 13px;
  font-weight: 450;
}
.announce b { color: var(--yellow); font-weight: 650; white-space: nowrap; }
.announce:hover b { text-decoration: underline; text-underline-offset: 3px; }

.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--line); box-shadow: 0 6px 28px -18px rgba(26, 32, 73, .5); }

.nav-inner { height: var(--nav-h); display: flex; align-items: center; gap: var(--s3); }

.nav-brand { display: flex; align-items: center; gap: 12px; margin-right: var(--s2); }
.maxy-mark { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.nav-brand .maxy-mark { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 5px 16px -4px rgba(245, 166, 35, .6); }
.nav-brand-text { line-height: 1.05; }
.nav-brand-text > strong {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -.03em;
  color: var(--navy-deep);
  white-space: nowrap;
}
.brand-accent { color: var(--gold-ink); }
.nav-brand-text > span {
  display: block; margin-top: 1px;
  font-family: var(--mono);
  font-size: 9.5px; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-3);
}

.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-links a {
  padding: 8px 13px;
  border-radius: var(--r-xs);
  font-size: 14px; font-weight: 450;
  color: var(--ink-2); white-space: nowrap;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav-links a:hover { color: var(--navy-deep); background: var(--navy-pale); }

.nav-hot { display: inline-flex !important; align-items: center; gap: 7px; color: var(--gold-ink) !important; font-weight: 600 !important; }
.nav-hot:hover { background: var(--yellow-pale) !important; }

.nav-cta { display: flex; align-items: center; gap: var(--s2); margin-left: var(--s3); }

.nav-burger {
  display: none; margin-left: auto;
  width: 42px; height: 42px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line-2);
  background: var(--paper);
  color: var(--navy-deep); font-size: 20px;
  align-items: center; justify-content: center;
}

.nav-mobile { display: none; padding: var(--s2) var(--gutter) var(--s5); border-top: 1px solid var(--line); background: var(--paper); }
.nav-mobile.open { display: block; }
.nav-mobile a { display: block; padding: 13px 2px; font-size: 15px; font-weight: 500; color: var(--navy-deep); border-bottom: 1px solid var(--line); }
.nav-mobile .btn { width: 100%; margin-top: var(--s4); }
.nav-mobile .langdd { margin-top: var(--s3); }

/* ── Pemilih bahasa ── */
.langdd { position: relative; }
.langdd-btn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 6px 10px 6px 7px;
  border: 1px solid var(--line-2); border-radius: var(--r-xs);
  background: var(--paper);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.langdd-btn:hover { border-color: var(--navy-mid); box-shadow: var(--sh-sm); }
.langdd-badge {
  display: grid; place-items: center; flex: none;
  width: 25px; height: 23px; border-radius: 5px;
  background: var(--navy); color: #fff;
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .04em;
}
.langdd-chev { font-size: 13px; color: var(--ink-3); transition: transform var(--t-fast) var(--ease); }
.langdd.open .langdd-chev { transform: rotate(180deg); }

.langdd-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 300;
  min-width: 216px; padding: 5px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-lg);
  opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.langdd.open .langdd-menu { opacity: 1; transform: none; pointer-events: auto; }
.langdd-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: var(--r-xs);
  font-size: 13.5px; font-weight: 450; color: var(--ink-2); text-align: left;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.langdd-menu button:hover { background: var(--bg-2); color: var(--navy-deep); }
.langdd-menu button .langdd-badge { background: var(--navy-pale); color: var(--navy); }
.langdd-menu button .ti-check { margin-left: auto; font-size: 15px; color: var(--gold-ink); opacity: 0; }
.langdd-menu button.on { color: var(--navy-deep); font-weight: 600; }
.langdd-menu button.on .langdd-badge { background: var(--navy); color: #fff; }
.langdd-menu button.on .ti-check { opacity: 1; }
.nav-mobile .langdd-menu { right: auto; left: 0; }

/* ══════════════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════════════ */
.hero { padding: var(--s7) 0; }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: var(--s7); align-items: center; }
.hero-copy, .hero-inner > .tilt { min-width: 0; }

.hero h1 {
  font-size: clamp(38px, 4.9vw, 62px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.03;
  margin: var(--s5) 0 0;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; display: block; }

/* Tiap huruf judul jadi elemen sendiri supaya bisa masuk bergantian.
   nova-motion.js yang memecahnya; teks asli tetap tersimpan di aria-label. */
.ch { display: inline-block; will-change: transform, opacity; }
/* Huruf hasil pecahan mulai tak terlihat supaya tidak berkedip sebelum
   animasinya jalan. Kalau motion.dev absen, .reveal-armed dilepas dan aturan
   ini ikut mati — judulnya langsung terbaca utuh. */
.reveal-armed .hero h1 .ch { opacity: 0; }

/* ── Kata bergilir hero ── */
.hero-rot {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 9px;
  margin-top: var(--s5);
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700; letter-spacing: -.02em;
  color: var(--navy-deep);
}
.hero-rot-lead { white-space: nowrap; }
.hero-rot-slot {
  position: relative; display: inline-flex; align-items: center;
  height: 1.75em; overflow: hidden;
  border-radius: var(--r-sm);
}
.hero-rot-word {
  display: inline-flex; align-items: center; gap: .4em;
  padding: 0 .62em; height: 1.75em; line-height: 1;
  border-radius: var(--r-sm);
  color: var(--gold-ink);
  background: linear-gradient(180deg, var(--yellow-pale), #fff);
  box-shadow: inset 0 0 0 1px rgba(245, 166, 35, .42);
  white-space: nowrap; will-change: transform, opacity;
}
.hero-sub { margin-top: var(--s5); max-width: 52ch; font-size: 17.5px; line-height: 1.68; color: var(--ink-2); }
.hero-sub b { color: var(--navy-deep); font-weight: 600; }

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

.hero-meta { display: flex; flex-wrap: wrap; gap: var(--s6); margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); }
.hero-meta > div { display: grid; gap: 3px; }
.hero-meta dt { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.hero-meta dd { font-family: var(--font-display); font-size: 21px; font-weight: 750; letter-spacing: -.03em; color: var(--navy-deep); font-variant-numeric: tabular-nums; }

/* ── Konsol kerja Nova (kartu 3D di kolom kanan) ── */
.console {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-xl);
}
.console-bar {
  display: flex; align-items: center; gap: var(--s2);
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--paper), var(--bg-sunk));
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.console-bar .maxy-mark { width: 23px; height: 23px; border-radius: 6px; box-shadow: 0 2px 7px -2px rgba(245, 166, 35, .55); }
.console-bar .spacer { margin-left: auto; }
.console-bar .mode {
  padding: 4px 9px; border-radius: var(--r-xs);
  background: var(--yellow-pale); color: var(--gold-ink);
  letter-spacing: .09em; font-weight: 600;
}

.console-body { padding: var(--s5); min-height: 128px; }
.console-label { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s3); }
.typed { font-family: var(--mono); font-size: 13.5px; line-height: 1.7; color: var(--ink); }
.typed::before { content: '› '; color: var(--gold-ink); font-weight: 600; }
.caret { display: inline-block; width: 7px; height: 1.05em; vertical-align: -3px; margin-left: 2px; background: var(--yellow); animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.scanline { height: 2px; background: var(--line); position: relative; overflow: hidden; }
.scanline::after {
  content: '';
  position: absolute; inset: 0; width: 34%;
  background: linear-gradient(90deg, transparent, var(--yellow), transparent);
  animation: scan 2.4s var(--ease) infinite;
}
@keyframes scan { 0% { transform: translateX(-110%); } 100% { transform: translateX(400%); } }

.console-steps { padding: var(--s3) var(--s5) var(--s5); display: grid; gap: 1px; }
.cstep {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  font-family: var(--mono); font-size: 11.5px;
  color: var(--ink-3); opacity: .34;
  transition: opacity var(--t-slow) var(--ease), color var(--t-slow) var(--ease);
}
.cstep i { font-size: 14px; }
.cstep .idx { min-width: 20px; opacity: .7; }
.cstep .dur { margin-left: auto; font-size: 10.5px; opacity: .65; }
.cstep.show { opacity: 1; color: var(--ink-2); }
.cstep.show i { color: var(--navy-mid); }
.cstep.done { color: var(--ok); }
.cstep.done i { color: var(--ok); }

/* ══════════════════════════════════════════════════════════════════════════════
   TANGKAPAN LAYAR 3D BERBASIS SCROLL
   Teknik "container scroll": panggung diberi perspective, kartunya masuk
   miring ke belakang lalu diluruskan seiring progres scroll section.
   Progres dihitung nova-motion.js dan ditulis ke --p (0 → 1).
   ══════════════════════════════════════════════════════════════════════════════ */
.stage {
  perspective: 1200px;
  perspective-origin: 50% 0%;
  padding: var(--s7) 0 var(--s8);
}
.stage-card {
  --p: 0;
  transform-style: preserve-3d;
  transform:
    rotateX(calc((1 - var(--p)) * 26deg))
    scale(calc(.9 + var(--p) * .1))
    translateY(calc((1 - var(--p)) * -10px));
  border-radius: var(--r-xl);
  background: var(--paper);
  border: 1px solid var(--line-2);
  padding: 10px;
  box-shadow: var(--sh-xl);
  will-change: transform;
}
.stage-bar {
  display: flex; align-items: center; gap: var(--s2);
  padding: 7px 10px 13px;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.stage-bar .spacer { margin-left: auto; }
.stage-card img { width: 100%; border-radius: var(--r); border: 1px solid var(--line); }

/* ══════════════════════════════════════════════════════════════════════════════
   MARQUEE — pita kemampuan yang bergulir tanpa henti
   ══════════════════════════════════════════════════════════════════════════════ */
.marquee {
  position: relative;
  overflow: hidden;
  padding: var(--s5) 0;
  border-block: 1px solid var(--line);
  background: var(--paper);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; gap: var(--s5); width: max-content; will-change: transform; }
.marquee-item {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  white-space: nowrap;
}
.marquee-item i { font-size: 17px; color: var(--gold-ink); }
.marquee-item::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--line-2); margin-left: var(--s5); }

/* ══════════════════════════════════════════════════════════════════════════════
   STRIP ANGKA
   ══════════════════════════════════════════════════════════════════════════════ */
.stats { padding: var(--s8) 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 0 var(--s5); border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat > strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 750; letter-spacing: -.045em; line-height: 1;
  color: var(--navy-deep);
}
.stat > span { display: block; margin-top: var(--s3); font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.stat > em { display: block; margin-top: var(--s1); font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--ink-3); }

/* ══════════════════════════════════════════════════════════════════════════════
   MASALAH
   ══════════════════════════════════════════════════════════════════════════════ */
.pain-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); margin-top: var(--s7); }
/* Kolom rata (bukan kartu kotak) — selaras daftar "Di balik layar": ikon
   kotak-bulat + judul + teks. Garis atas tegas & nomor mono memberi struktur
   editorial; ikon menyala kuning saat kolom disorot. Semua kolom mulai dari
   garis atas yang sama, jadi tak ada tinggi yang timpang. */
.pain { padding-top: var(--s5); border-top: 2px solid var(--navy); transition: border-color var(--t) var(--ease); }
.pain:hover { border-top-color: var(--yellow); }
.pain-top { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.pain-ico {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: var(--r-sm);
  background: var(--navy-pale); color: var(--navy); font-size: 22px;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.pain:hover .pain-ico { background: var(--yellow); color: var(--navy-deep); }
.pain-no { margin-left: auto; font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--ink-3); }
.pain h3 { font-size: 18.5px; font-weight: 700; letter-spacing: -.028em; margin-bottom: var(--s2); }
.pain p { font-size: 14.5px; line-height: 1.68; color: var(--ink-2); }

/* Penghubung visual: tiga masalah → satu jawaban. */
.turn-link {
  display: grid; place-items: center; width: 46px; height: 46px;
  margin: var(--s6) auto calc(-1 * var(--s3));
  border-radius: var(--r-pill);
  background: var(--paper); border: 1px solid var(--line);
  color: var(--gold-ink); font-size: 21px; box-shadow: var(--sh-sm);
}

.turn {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--s4); align-items: center; text-align: center;
  margin-top: var(--s5); padding: var(--s8) var(--s6);
  border-radius: var(--r-xl);
  background:
    radial-gradient(620px 260px at 50% 0%, rgba(245, 166, 35, .22), transparent 62%),
    linear-gradient(140deg, var(--navy-deep), var(--navy) 62%, var(--navy-mid));
  color: #fff;
  box-shadow: var(--sh-xl), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.turn-ico {
  display: grid; place-items: center; flex: none;
  width: 58px; height: 58px; border-radius: var(--r);
  background: var(--yellow); color: var(--navy-deep); font-size: 27px;
  box-shadow: 0 14px 34px -12px rgba(245, 166, 35, .8), 0 0 0 1px rgba(255, 255, 255, .14);
}
.turn strong { display: block; font-family: var(--font-display); font-size: clamp(22px, 3vw, 27px); font-weight: 750; letter-spacing: -.03em; color: #fff; }
.turn p { margin-top: var(--s2); font-size: 15.5px; line-height: 1.72; color: rgba(255, 255, 255, .82); max-width: 68ch; }

/* ══════════════════════════════════════════════════════════════════════════════
   HASIL
   ══════════════════════════════════════════════════════════════════════════════ */
.out-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s8); align-items: center; }
.out-list { display: grid; margin-top: var(--s5); }
.out-item { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: var(--s4); align-items: start; padding: var(--s5) 0; border-top: 1px solid var(--line); }
.out-item:last-child { border-bottom: 1px solid var(--line); }
.out-item .ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-sm); background: var(--yellow-pale); color: var(--gold-ink); font-size: 20px; }
.out-item strong { display: block; font-family: var(--font-display); font-size: 16.5px; font-weight: 700; letter-spacing: -.022em; color: var(--navy-deep); }
.out-item p { margin-top: var(--s1); font-size: 14px; line-height: 1.6; color: var(--ink-2); }

.file-mock { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); }
.file-mock-head { display: flex; align-items: center; gap: var(--s3); padding: 14px 16px; background: linear-gradient(120deg, var(--navy-deep), var(--navy)); border-bottom: 3px solid var(--yellow); }
.file-mock-head .maxy-mark { width: 24px; height: 24px; border-radius: 7px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 3px 9px -3px rgba(0, 0, 0, .5); }
.file-mock-head strong { font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: rgba(255, 255, 255, .92); }
.file-mock-head > span { margin-left: auto; font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); }

.sheet-tabs { display: flex; padding: 0 var(--s2); border-bottom: 1px solid var(--line); background: var(--bg-sunk); overflow-x: auto; scrollbar-width: none; }
.sheet-tabs::-webkit-scrollbar { display: none; }
.sheet-tabs button {
  position: relative; padding: 12px 13px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .06em;
  color: var(--ink-3); white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.sheet-tabs button:hover { color: var(--ink-2); }
.sheet-tabs button.active { color: var(--gold-ink); }
.sheet-tabs button.active::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--yellow); }

.sheet { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sheet th {
  padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line);
  background: var(--navy-pale);
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--navy);
  white-space: nowrap;
}
.sheet td { padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--ink-2); line-height: 1.45; }
.sheet tr:last-child td { border-bottom: 0; }
.sheet .num { font-family: var(--mono); font-size: 11.5px; color: var(--navy); font-weight: 500; }

.file-mock-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding: 12px 15px; border-top: 1px solid var(--line); background: var(--bg-sunk); }
.made-with-maxy { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.made-with-maxy img { width: 15px; height: 15px; border-radius: 4px; }
.made-with-maxy b { color: var(--navy); font-weight: 600; }
.file-mock-note { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* ══════════════════════════════════════════════════════════════════════════════
   BENTO — pembeda label bukti
   ══════════════════════════════════════════════════════════════════════════════ */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s4); }
.card {
  position: relative;
  padding: var(--s6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.card:hover { box-shadow: var(--sh-lg); border-color: var(--line-2); }

.card-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--s4); border-radius: var(--r-sm); font-size: 21px; background: var(--bg-2); color: var(--navy); }
.card-icon--gold { background: var(--yellow-pale); color: var(--gold-ink); }
.card-icon--info { background: var(--info-bg); color: var(--info); }
.card-icon--ok { background: var(--ok-bg); color: var(--ok); }

.card h3 { font-size: 18.5px; font-weight: 700; letter-spacing: -.028em; margin-bottom: var(--s2); }
.card p { font-size: 14.5px; line-height: 1.66; color: var(--ink-2); }

.card--third { grid-column: span 2; }
.card--hero {
  grid-column: span 6;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--s7); align-items: center; padding: var(--s7);
  background:
    radial-gradient(760px 340px at 100% 0%, var(--yellow-pale), transparent 62%),
    var(--paper);
}
.card--hero h3 { font-size: 27px; letter-spacing: -.034em; margin-bottom: var(--s3); }
.card--hero p { font-size: 15.5px; }

.evidence-list { display: grid; gap: var(--s2); }
.evidence-row {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: 13px 15px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
  font-size: 13.5px; line-height: 1.55; color: var(--ink-2);
}
.tagx {
  flex: none; margin-top: 1px; padding: 3px 8px; border-radius: 5px;
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.tagx.measured   { color: var(--ok);   background: var(--ok-bg); }
.tagx.estimate   { color: var(--info); background: var(--info-bg); }
.tagx.assumption { color: var(--warn); background: var(--warn-bg); }

/* ══════════════════════════════════════════════════════════════════════════════
   MODUL
   ══════════════════════════════════════════════════════════════════════════════ */
.mod-switch { display: inline-flex; border-bottom: 1px solid var(--line); margin-bottom: var(--s6); }
.mod-switch button {
  position: relative; display: inline-flex; align-items: center; gap: var(--s2);
  padding: 13px 20px; min-height: 46px;
  font-size: 14.5px; font-weight: 500; color: var(--ink-3);
  transition: color var(--t) var(--ease);
}
.mod-switch button i { font-size: 18px; }
.mod-switch button:hover { color: var(--ink-2); }
.mod-switch button.active { color: var(--navy-deep); font-weight: 600; }
.mod-switch button.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--yellow); }

.mod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.mod-grid[hidden] { display: none; }

.mod {
  display: flex; flex-direction: column;
  padding: var(--s5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--t) var(--ease);
}
.mod:hover { box-shadow: var(--sh-lg); }
.mod-top { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.mod-ico {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: var(--r-xs);
  background: var(--navy-pale); color: var(--navy); font-size: 19px;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.mod:hover .mod-ico { background: var(--yellow); color: var(--navy-deep); }
.mod-top strong { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; letter-spacing: -.024em; line-height: 1.25; color: var(--navy-deep); }
.mod p { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); flex: 1; }
.mod-out { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }
.mod-out span { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.mod-out span + span::before { content: '· '; opacity: .55; }

/* ══════════════════════════════════════════════════════════════════════════════
   CINCIN ORBIT 3D — "jalankan semuanya sekaligus"
   Enam simpul mengelilingi tanda Maxy pada bidang 3D nyata (preserve-3d).
   Cincin berputar; tiap simpul memutar balik dengan besaran sama supaya
   ikonnya selalu menghadap pembaca.
   ══════════════════════════════════════════════════════════════════════════════ */
.fullrun {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--s7); align-items: center;
  margin-top: var(--s6); padding: var(--s7);
  border-radius: var(--r-xl);
  background: linear-gradient(125deg, var(--navy-deep), var(--navy) 58%, var(--navy-mid));
  color: #fff;
  box-shadow: var(--sh-xl);
  overflow: hidden;
}
.fullrun .tag { color: rgba(255, 255, 255, .62); }
.fullrun .tag::before { background: rgba(255, 255, 255, .3); }
.fullrun h3 { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 30px); font-weight: 750; letter-spacing: -.032em; color: #fff; margin: var(--s3) 0 var(--s3); }
.fullrun p { font-size: 15px; line-height: 1.68; color: rgba(255, 255, 255, .78); max-width: 56ch; }
.fullrun p b { color: var(--yellow); font-weight: 600; }
.fullrun .btn { margin-top: var(--s5); }

.orbit { position: relative; display: grid; place-items: center; height: 300px; perspective: 950px; }
.orbit-ring {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  transform-style: preserve-3d;
  animation: orbit-spin 26s linear infinite;
}
.orbit-node {
  position: absolute;
  transform: rotateY(var(--a)) translateZ(126px);
  transform-style: preserve-3d;
}
.orbit-face {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff; font-size: 23px;
  /* memutar balik sudut simpul + putaran cincin → selalu menghadap depan */
  transform: rotateY(calc(-1 * var(--a)));
  animation: orbit-face 26s linear infinite;
}
@keyframes orbit-spin { to { transform: rotateY(360deg); } }
@keyframes orbit-face { to { transform: rotateY(calc(-1 * var(--a) - 360deg)); } }

.orbit-core {
  position: relative; z-index: 2;
  display: grid; place-items: center;
  width: 84px; height: 84px; border-radius: 24px;
  background: var(--yellow);
  box-shadow:
    0 0 0 10px rgba(245, 166, 35, .16),
    0 20px 50px -14px rgba(245, 166, 35, .8),
    0 0 44px -6px var(--cyan-glow);       /* aura cyan futuristik di sekitar inti */
}
/* Cincin holografik cyan yang berputar pelan mengelilingi inti Maxy. */
.orbit-core::after {
  content: "";
  position: absolute; inset: -14px;
  border-radius: 30px;
  border: 1px solid rgba(34, 211, 238, .35);
  -webkit-mask: linear-gradient(#000, transparent 70%);
  mask: linear-gradient(#000, transparent 70%);
  animation: orbit-halo 9s linear infinite;
  pointer-events: none;
}
@keyframes orbit-halo { to { transform: rotate(360deg); } }
.orbit-core img { width: 52px; height: 52px; border-radius: 14px; }

/* ══════════════════════════════════════════════════════════════════════════════
   PETA ORBIT INTERAKTIF · port vanilla "radial-orbital-timeline"
   ══════════════════════════════════════════════════════════════════════════════ */
.fullrun--solo { grid-template-columns: 1fr; }
.fullrun--solo > div { text-align: center; max-width: 720px; margin-inline: auto; }
.fullrun--solo p { margin-inline: auto; }

.orbitmap-section {
  background: radial-gradient(125% 120% at 50% -10%, var(--navy) 0%, var(--navy-deep) 58%, #0d1138 100%);
  border-block: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden;
}
.section-head--invert h2 { color: #fff; }
.section-head--invert p { color: rgba(255, 255, 255, .74); }
.section-head--invert .tag { color: rgba(255, 255, 255, .7); }
.section-head--invert .tag::before { background: rgba(255, 255, 255, .35); }

/* Judul di kiri, orbit di kanan — memakai ruang yang tadinya kosong. */
.orbitmap-layout {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: var(--s7); align-items: center;
}
.orbitmap-copy .om-hint { text-align: left; margin-top: var(--s5); }

.orbitmap {
  position: relative; height: 560px; margin-top: 0;
  display: grid; place-items: center; touch-action: manipulation;
}
.orbitmap::before, .orbitmap::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.orbitmap::before { width: 400px; height: 400px; border: 1px solid rgba(255, 255, 255, .10); }
.orbitmap::after  { width: 560px; height: 560px; border: 1px dashed rgba(255, 255, 255, .06); }

.om-core {
  position: absolute; z-index: 5;
  width: 76px; height: 76px; border-radius: 22px;
  display: grid; place-items: center; background: transparent;
  box-shadow: 0 0 0 10px rgba(245, 166, 35, .14), 0 0 60px -6px var(--cyan-glow), 0 18px 44px -12px rgba(245, 166, 35, .7);
  animation: om-corepulse 3.4s var(--ease) infinite;
}
.om-core img { width: 100%; height: 100%; border-radius: 22px; }   /* mark asli = inti orbit */
@keyframes om-corepulse {
  0%, 100% { box-shadow: 0 0 0 10px rgba(245, 166, 35, .14), 0 0 60px -6px var(--cyan-glow), 0 18px 44px -12px rgba(245, 166, 35, .7); }
  50%      { box-shadow: 0 0 0 16px rgba(245, 166, 35, .05), 0 0 84px 2px var(--cyan-glow), 0 18px 44px -12px rgba(245, 166, 35, .9); }
}

.om-node { position: absolute; left: 50%; top: 50%; width: 0; height: 0; will-change: transform, opacity; }
.om-dot {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(10, 14, 45, .85); color: #fff; border: 2px solid rgba(255, 255, 255, .35);
  font-size: 18px; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: transform .3s var(--ease), background .3s, border-color .3s, box-shadow .3s;
}
.om-dot:hover { border-color: var(--yellow); }
.om-node.is-related .om-dot { background: rgba(245, 166, 35, .92); color: var(--navy-deep); border-color: #fff; animation: om-relpulse 1.4s ease infinite; }
.om-node.is-active .om-dot {
  background: #fff; color: var(--navy-deep); border-color: var(--yellow);
  transform: translate(-50%, -50%) scale(1.35);
  box-shadow: 0 0 0 6px rgba(245, 166, 35, .25), 0 0 40px 0 var(--cyan-glow);
}
@keyframes om-relpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, .5); } 50% { box-shadow: 0 0 0 9px rgba(245, 166, 35, 0); } }

.om-label {
  position: absolute; left: 0; top: 30px; transform: translateX(-50%);
  white-space: nowrap; font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(255, 255, 255, .66); pointer-events: none;
  transition: color .3s, transform .3s, top .3s;
}
.om-node.is-active .om-label { color: #fff; transform: translateX(-50%) scale(1.08); top: 42px; }

.om-card {
  position: absolute; left: 0; top: 58px; transform: translateX(-50%);
  width: 258px; z-index: 30; text-align: left; padding: 14px;
  background: rgba(9, 13, 42, .93); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--r);
  box-shadow: var(--sh-xl), 0 0 44px -10px var(--cyan-glow);
  opacity: 0; visibility: hidden; translate: 0 -6px;
  transition: opacity .28s, translate .28s, visibility .28s;
}
.om-node.is-active .om-card { opacity: 1; visibility: visible; translate: 0 0; }
.om-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.om-badge { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .07em; padding: 3px 7px; border-radius: 999px; border: 1px solid; }
.om-badge.completed { color: var(--navy-deep); background: #fff; border-color: #fff; }
.om-badge.in-progress { color: #fff; background: rgba(245, 166, 35, .9); border-color: var(--yellow); }
.om-badge.pending { color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .3); }
.om-card-date { font-family: var(--mono); font-size: 10px; color: rgba(255, 255, 255, .5); }
.om-card-title { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: #fff; margin: 8px 0; letter-spacing: -.02em; }
.om-card-body { font-size: 12px; line-height: 1.55; color: rgba(255, 255, 255, .8); }
.om-energy, .om-links { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .12); }
.om-energy-row { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: rgba(255, 255, 255, .7); margin-bottom: 5px; }
.om-energy-bar { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.om-energy-fill { height: 100%; background: linear-gradient(90deg, var(--yellow), var(--cyan)); }
.om-links-h { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: 7px; display: flex; align-items: center; gap: 5px; }
.om-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: rgba(255, 255, 255, .85);
  background: transparent; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
  padding: 3px 9px; margin: 0 5px 5px 0; cursor: pointer; transition: background .2s, border-color .2s;
}
.om-chip:hover { background: rgba(245, 166, 35, .2); border-color: var(--yellow); }
.om-hint { text-align: center; margin-top: var(--s5); font-family: var(--mono); font-size: 11px; letter-spacing: .07em; color: rgba(255, 255, 255, .5); }

@media (max-width: 720px) {
  .orbitmap { height: 470px; }
  .orbitmap::before { width: 288px; height: 288px; }
  .orbitmap::after  { width: 400px; height: 400px; }
  .om-card { width: 220px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PERBANDINGAN
   ══════════════════════════════════════════════════════════════════════════════ */
.cmp-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--sh); }
.cmp { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 780px; }
.cmp th, .cmp td { padding: 16px 18px; text-align: center; border-bottom: 1px solid var(--line); }
.cmp thead th { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); background: var(--bg-sunk); white-space: nowrap; }
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp td { color: var(--ink-2); }
.cmp td:first-child, .cmp th:first-child { text-align: left; min-width: 250px; color: var(--navy-deep); font-weight: 500; }

.cmp .is-us { background: var(--yellow-pale); }
.cmp thead .is-us { position: relative; color: var(--gold-ink); font-size: 11.5px; }
.cmp thead .is-us::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--yellow); }
.cmp tbody .is-us { color: var(--navy-deep); }
.cmp .is-us b { font-weight: 700; }

.cmp i.y { color: var(--ok); font-size: 20px; }
.cmp i.n { color: var(--line-2); font-size: 19px; }
.cmp i.m { color: var(--warn); font-size: 19px; }

.cmp-hint { display: none; align-items: center; gap: var(--s2); margin-bottom: var(--s3); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

/* ══════════════════════════════════════════════════════════════════════════════
   UNTUK SIAPA
   ══════════════════════════════════════════════════════════════════════════════ */
/* Asimetris — sengaja bukan tiga kartu sama besar. Kartu pertama besar di kiri
   (memanjang dua baris), dua sisanya menumpuk di kanan. Memecah "rule of three"
   yang jadi ciri paling cepat terbaca sebagai template. */
.who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.who { display: flex; flex-direction: column; padding: var(--s6); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); transition: box-shadow var(--t) var(--ease); }
.who:hover { box-shadow: var(--sh-lg); }
/* Ketiga kartu seragam — tanpa satu kartu "unggulan" yang kuning sendiri. */
.who-ico { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--s4); border-radius: var(--r-sm); background: var(--navy-pale); color: var(--navy); font-size: 25px; }
.who h3 { font-size: 19px; font-weight: 700; letter-spacing: -.028em; margin-bottom: var(--s2); }
.who p { font-size: 14.5px; line-height: 1.68; color: var(--ink-2); }
.who ul { list-style: none; margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--line); display: grid; gap: var(--s2); }
.who li { position: relative; padding-left: 22px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.who li::before { content: ''; position: absolute; left: 0; top: .5em; width: 12px; height: 2px; border-radius: 1px; background: var(--yellow); }

/* ══════════════════════════════════════════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════════════════════════════════════════ */
.faq { max-width: 880px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-q {
  display: flex; align-items: center; gap: var(--s4);
  width: 100%; padding: var(--s5) 0; min-height: 46px; text-align: left;
  font-family: var(--font-display); font-size: 17.5px; font-weight: 650;
  letter-spacing: -.024em; color: var(--navy-deep);
  transition: color var(--t-fast) var(--ease);
}
.faq-q:hover { color: var(--gold-ink); }
.faq-q i { margin-left: auto; flex: none; font-size: 19px; color: var(--ink-3); transition: transform var(--t) var(--ease), color var(--t) var(--ease); }
.faq-item.open .faq-q i { transform: rotate(180deg); color: var(--gold-ink); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height var(--t-slow) var(--ease); }
.faq-a p { padding: 0 var(--s8) var(--s5) 0; font-size: 15px; line-height: 1.72; color: var(--ink-2); }
.faq-a b { color: var(--navy-deep); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════════
   CTA + FOOTER
   ══════════════════════════════════════════════════════════════════════════════ */
.cta-band { padding: var(--s9) 0; }
.cta-card {
  position: relative; overflow: hidden;
  padding: var(--s9) var(--s7); text-align: center;
  border-radius: var(--r-xl);
  background:
    radial-gradient(760px 340px at 50% 0%, rgba(245, 166, 35, .3), transparent 60%),
    linear-gradient(140deg, var(--navy-deep), var(--navy) 65%, var(--navy-mid));
  color: #fff;
  box-shadow: var(--sh-xl), inset 0 1px 0 rgba(255, 255, 255, .09);
}
.cta-card .maxy-mark { width: 58px; height: 58px; border-radius: 16px; margin: 0 auto; box-shadow: 0 16px 40px -12px rgba(245, 166, 35, .8), 0 0 0 1px rgba(255, 255, 255, .14); }
.cta-card h2 { font-size: clamp(30px, 4.2vw, 50px); font-weight: 750; letter-spacing: -.042em; line-height: 1.05; margin-top: var(--s5); color: #fff; }
.cta-card > p { max-width: 56ch; margin: var(--s4) auto 0; font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, .8); }
.cta-actions { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; margin-top: var(--s6); }
.cta-card .btn-ghost { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); color: #fff; box-shadow: none; }
.cta-card .btn-ghost:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .45); }
.cta-wl { margin-top: var(--s4); font-family: var(--mono); font-size: 11.5px; color: rgba(255, 255, 255, .6); }
.cta-wl a { color: rgba(255, 255, 255, .85); text-decoration: underline; text-underline-offset: 3px; }
.cta-wl a:hover { color: var(--yellow); }

.footer { background: var(--navy-deep); color: rgba(255, 255, 255, .68); padding: var(--s8) 0 var(--s6); font-size: 13.5px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s6); }
.footer-brand .lockup { display: inline-block; margin-bottom: var(--s4); padding: 11px 15px; border-radius: var(--r-sm); background: #fff; }
.footer-brand .lockup img { height: 32px; width: auto; }
.footer-brand p { line-height: 1.7; max-width: 34ch; }
.footer-brand p b { color: #fff; }
.footer h5 { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); margin-bottom: var(--s4); }
.footer ul { list-style: none; display: grid; gap: 10px; }
.footer ul a { transition: color var(--t-fast) var(--ease); }
.footer ul a:hover { color: var(--yellow); }
.footer-bottom {
  display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: rgba(255, 255, 255, .5);
}

/* ══════════════════════════════════════════════════════════════════════════════
   SIGNATURE: "CARA NOVA BEKERJA" — pita gelap penuh
   Satu momen dramatis di tengah halaman terang. Di sinilah agennya benar-benar
   terlihat berpikir: transkrip streaming (reasoning → panggil tool → angka),
   di sisi empat tahap makro yang menyala berurutan. Ini fokus tunggal section
   ini — tidak ada grid kartu yang bersaing dengannya.
   ══════════════════════════════════════════════════════════════════════════════ */
.section--dark {
  position: relative;
  overflow: hidden;
  background: var(--navy-deep);
  color: #fff;
  padding: var(--s9) 0;
}
/* Cahaya emas lembut + grid rambut terang, khusus di atas navy */
.section--dark::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(720px 420px at 82% -8%, rgba(245, 166, 35, .22), transparent 60%),
    radial-gradient(680px 520px at 6% 108%, rgba(61, 71, 136, .55), transparent 62%);
  pointer-events: none;
}
.section--dark::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(900px 560px at 70% 20%, #000, transparent 76%);
  -webkit-mask-image: radial-gradient(900px 560px at 70% 20%, #000, transparent 76%);
  pointer-events: none;
}
.section--dark > .wrap { position: relative; z-index: 1; }
.section--dark .tag { color: rgba(255, 255, 255, .6); }
.section--dark .tag::before { background: rgba(255, 255, 255, .28); }
.section--dark .tag--gold { color: var(--yellow); }
.section--dark .tag--gold::before { background: var(--yellow); }

.agent-inner { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: var(--s8); align-items: center; }
.section-head--invert h2 .mark::before { opacity: .85; }

/* Empat tahap makro — rel vertikal yang menyala mengikuti transkrip */
.agent-stages { display: grid; gap: 2px; margin-top: var(--s6); }
.astage {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s3);
  align-items: start; padding: var(--s3) 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  opacity: .4; transition: opacity var(--t-slow) var(--ease);
}
.astage:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.astage.on { opacity: 1; }
.astage-ico {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--r-xs);
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .7); font-size: 19px;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.astage.on .astage-ico { background: var(--yellow); color: var(--navy-deep); border-color: var(--yellow); }
.astage strong { display: block; font-family: var(--font-display); font-size: 15.5px; font-weight: 650; letter-spacing: -.022em; color: #fff; }
.astage strong + span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .6); }

/* Panel transkrip agen */
.agent-panel {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-lg);
  background: rgba(6, 8, 20, .6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7);
}
.agent-bar {
  display: flex; align-items: center; gap: var(--s2);
  padding: 12px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .03);
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55);
}
.agent-bar .maxy-mark { width: 22px; height: 22px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 0 14px -3px rgba(245, 166, 35, .6); }
.agent-bar .spacer { margin-left: auto; }
.agent-bar .live { display: inline-flex; align-items: center; gap: 6px; color: var(--yellow); }

.agent-log {
  padding: var(--s5);
  min-height: 296px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  display: grid;
  gap: 7px;
  align-content: start;
}
.aline { display: flex; gap: 9px; align-items: baseline; }
.aline .gutter { color: rgba(255, 255, 255, .28); flex: none; }
.aline--think { color: rgba(255, 255, 255, .58); }
.aline--think .gutter::before { content: '·'; }
.aline--tool .body {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 9px; border-radius: 6px;
  background: rgba(245, 166, 35, .12);
  border: 1px solid rgba(245, 166, 35, .3);
  color: var(--yellow-hi);
}
.aline--tool .gutter { color: var(--yellow); }
.aline--tool .gutter::before { content: '→'; }
.aline--result { color: #fff; }
.aline--result .gutter { color: var(--ok); }
.aline--result .gutter::before { content: '✓'; }
.aline--result b { color: var(--yellow-hi); font-weight: 600; }
.aline .tagx { margin-left: 6px; }
.aline-caret { display: inline-block; width: 7px; height: 1.05em; vertical-align: -2px; background: var(--yellow); animation: blink 1.1s steps(2) infinite; }

/* ══════════════════════════════════════════════════════════════════════════════
   REVEAL
   ══════════════════════════════════════════════════════════════════════════════ */
.reveal-armed .reveal { opacity: 0; }

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIF — 1440 / 1080 / 900 / 720 / 400
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; margin-left: 8px; }
  .nav-cta { margin-left: auto; }
  .hero-inner { grid-template-columns: 1fr; gap: var(--s7); }
  .hero h1 { font-size: clamp(40px, 7.6vw, 62px); }
  .hero-sub { max-width: 62ch; }
  .fullrun { grid-template-columns: 1fr; }
  .orbit { height: 260px; }
  .agent-inner { grid-template-columns: 1fr; gap: var(--s7); }
}

@media (max-width: 900px) {
  .section { padding: var(--s8) 0; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s5) 0; }
  .pain-list { grid-template-columns: 1fr; gap: var(--s4); }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .out-grid { grid-template-columns: 1fr; gap: var(--s7); }
  .orbitmap-layout { grid-template-columns: 1fr; gap: var(--s6); }
  .orbitmap-copy .om-hint { text-align: center; }
  .bento { grid-template-columns: repeat(4, 1fr); }
  .card--hero { grid-column: span 4; grid-template-columns: 1fr; gap: var(--s5); padding: var(--s6); }
  .card--third { grid-column: span 2; }
  .mod-grid { grid-template-columns: repeat(2, 1fr); }
  .who-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .who--lead { grid-row: auto; grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cmp-hint { display: flex; }
  /* Tilt dimatikan pada layar sentuh: tidak ada pointer melayang untuk
     mengendalikannya, dan sudut yang tersisa hanya membuat teks miring. */
  .tilt-in { transform: none !important; }
}

@media (max-width: 720px) {
  :root { --gutter: 18px; }
  .nav-cta .btn-quiet { display: none; }
  .hero { padding-top: var(--s7); }
  .hero-meta { gap: var(--s5); }
  .pain { padding-top: var(--s5); }
  .pain-ico { width: 44px; height: 44px; font-size: 21px; }
  .turn { padding: var(--s6) var(--s5); }
  .bento, .mod-grid, .who-grid, .footer-grid { grid-template-columns: 1fr; }
  .who--lead { grid-column: auto; }
  .agent-log { min-height: 240px; padding: var(--s4); }
  .card--hero, .card--third { grid-column: span 1; }
  .card, .card--hero, .fullrun { padding: var(--s5); }
  .cta-card { padding: var(--s8) var(--s5); }
  .fullrun .btn { width: 100%; }
  .faq-a p { padding-right: 0; }
  .typed { font-size: 12.5px; }
  .stage { padding: var(--s6) 0 var(--s7); }
  .orbit { height: 230px; }
  .orbit-node { transform: rotateY(var(--a)) translateZ(96px); }
  .orbit-face { width: 44px; height: 44px; font-size: 20px; }
  .orbit-core { width: 70px; height: 70px; }
  .orbit-core img { width: 44px; height: 44px; }
}

@media (max-width: 400px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat { border-left: 0; padding-left: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   Semua gerak dekoratif berhenti; tidak ada konten yang hilang.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .scanline::after, #neural, .progress { display: none; }
  .reveal-armed .reveal { opacity: 1 !important; }
  .cstep { opacity: 1; color: var(--ink-2); }
  .mark::before { transform: scaleX(1); }
  .tilt-in { transform: none !important; }
  .stage-card { transform: none !important; }
  .orbit-ring { animation: none; }
  .orbit-face { animation: none; }
}