/* ═══════════════════════════════════════════════════════════════════════════
   Glace design system — "modern SaaS clean"

   Light, airy, generous whitespace, one restrained accent (glacier blue).
   This :root is the SINGLE source of truth: every surface in the product
   (marketing SPA, hub, login/register, all four app shells, admin, 404)
   links styles.css, so changing a token here changes everything.

   Structure:
     1. Primitive scales   — --gray-*, --blue-*  (raw values, never used directly
                             in components; pick a semantic token instead)
     2. Semantic tokens    — --surface-*, --text-*, --border-*, --accent-*
     3. Legacy aliases     — the old Antimetal-era names (--color-mint-pulse,
                             --color-midnight-navy, …) remapped onto the new
                             scales. Kept deliberately: ~126KB of downstream CSS
                             and inline <style> blocks consume them, and aliasing
                             lets all of it inherit the redesign for free.
   ═══════════════════════════════════════════════════════════════════════════ */

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

:root {
  /* ── 1. Primitive scales ────────────────────────────────────────────── */

  /* Neutrals — very slightly cool, so they sit under the blue accent without
     turning muddy. gray-50 is the page canvas, gray-900 is body text. */
  --gray-25:  #FCFCFD;
  --gray-50:  #F8F9FB;
  --gray-100: #F1F3F7;
  --gray-200: #E6E9F0;
  --gray-300: #D3D8E3;
  --gray-400: #9AA3B5;
  --gray-500: #6B7488;
  --gray-600: #4C5568;
  --gray-700: #353D4D;
  --gray-800: #222834;
  --gray-900: #12171F;
  --gray-950: #080B10;

  /* Accent — biru tunggal, satu-satunya warna kromatik di sistem ini; dipakai
     untuk aksi utama, tautan, focus ring, dan keadaan aktif. Sisanya netral,
     dan justru itu yang membuat satu aksen terasa disengaja.

     500 = #0000FF, biru murni. Jenuh penuh dan sengaja: biru pucat kehilangan
     tenaganya begitu dipakai di atas putih seluas ini. Kontras terhadap putih
     8.6:1 — lebih tinggi daripada biru mana pun yang lebih lembut, jadi tombol,
     tautan, dan teks aksen memakai satu warna tanpa pengecualian.

     Catatan pemakaian: biru murni cenderung "berpendar" pada teks kecil di atas
     putih (mata memfokuskan panjang gelombang biru berbeda dari merah/hijau).
     Karena itu ia dipakai untuk isian tombol, ikon, dan tautan — bukan untuk
     paragraf panjang. Teks tetap netral gelap. */
  --blue-25:  #F2F2FF;
  --blue-50:  #E6E6FF;
  --blue-100: #CCCCFF;
  --blue-200: #9999FF;
  --blue-300: #6666FF;
  --blue-400: #3333FF;
  --blue-500: #0000FF;
  --blue-600: #0000CC;
  --blue-700: #000099;
  --blue-800: #000080;
  --blue-900: #00005C;

  /* Status — kept muted so they read as information, not decoration. */
  --success: #047857;
  --success-bg: #ECFDF5;
  --warning: #B45309;
  --warning-bg: #FFFAEB;
  --danger: #B42318;
  --danger-bg: #FEF3F2;

  /* ── 2. Semantic tokens ─────────────────────────────────────────────── */

  --surface:          #FFFFFF;   /* cards, nav, raised things */
  --surface-sunken:   var(--gray-50);   /* page canvas, alternating sections */
  --surface-muted:    var(--gray-100);  /* inset wells, code blocks, tracks */
  --surface-inverse:  var(--gray-950);  /* dark sections, footer, CTA blocks */

  --text-strong:  var(--gray-900);
  --text-default: var(--gray-700);
  --text-muted:   var(--gray-500);
  --text-subtle:  var(--gray-400);
  --text-inverse: #FFFFFF;

  --border:        var(--gray-200);
  --border-strong: var(--gray-300);
  --border-inverse: rgba(255, 255, 255, 0.12);

  --accent:        var(--blue-500);
  --accent-hover:  var(--blue-600);
  --accent-press:  var(--blue-700);
  --accent-soft:   var(--blue-50);   /* icon tiles, chips, subtle fills */
  --accent-line:   var(--blue-100);  /* borders on accent-soft surfaces */
  --accent-on-dark: var(--blue-300); /* accent that stays legible on inverse */
  --focus-ring:    rgba(43, 107, 243, 0.32);

  /* ── 3. Type ────────────────────────────────────────────────────────── */

  /* Single family. The old system paired Instrument Serif display with Inter;
     "clean" reads better with one voice and tighter tracking at large sizes. */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid scale — no !important overrides needed at breakpoints. */
  --text-caption: 13px;
  --text-body: 16px;
  --text-subheading: clamp(17px, 0.55vw + 15.4px, 19px);
  --text-heading-sm: clamp(18px, 0.5vw + 16.4px, 20px);
  --text-heading: clamp(23px, 1.4vw + 18.5px, 30px);
  --text-heading-lg: clamp(27px, 2.2vw + 20px, 38px);
  --text-display: clamp(32px, 3vw + 22px, 48px);
  --text-display-xl: clamp(38px, 4.4vw + 24px, 64px);

  /* ── 4. Spacing / layout ────────────────────────────────────────────── */

  --s-4: 4px;  --s-8: 8px;   --s-12: 12px; --s-16: 16px;
  --s-20: 20px; --s-24: 24px; --s-28: 28px; --s-32: 32px;
  --s-40: 40px; --s-56: 56px; --s-60: 60px; --s-72: 72px;
  --s-96: 96px; --s-120: 120px; --s-160: 160px;

  --page-max-width: 1200px;
  --nav-h: 68px;

  /* Panjang baris untuk teks yang benar-benar dibaca mengalir. Diukur di
     browser: 62ch ≈ 75 karakter pada Inter (satuan ch memakai lebar "0",
     yang lebih sempit dari rata-rata huruf — 68ch meleset ke 82). Pakai ini, bukan
     max-width px, supaya ikut menyesuaikan kalau ukuran font berubah. */
  --measure: 62ch;

  /* Tracking optis: makin besar teks makin rapat, makin kecil makin longgar.
     Nilai em konstan salah di kedua ujung. */
  --track-display: -0.032em;
  --track-heading: -0.02em;
  --track-body: -0.011em;
  --track-small: 0em;

  /* ── 5. Radius — softer and larger than the old 12px ceiling ────────── */

  --radius-card-sm: 8px;
  --radius-card-md: 12px;
  --radius-card: 16px;
  --radius-card-lg: 20px;
  --radius-card-xl: 28px;
  --radius-badge: 8px;
  --radius-input: 10px;
  --radius-pill: 9999px;

  /* ── 6. Elevation — light, tight, neutral-tinted ────────────────────── */

  --shadow-xs: 0 1px 2px rgba(18, 23, 31, 0.05);
  --shadow-sm: 0 1px 3px rgba(18, 23, 31, 0.08), 0 1px 2px -1px rgba(18, 23, 31, 0.06);
  --shadow-md: 0 4px 8px -2px rgba(18, 23, 31, 0.08), 0 2px 4px -2px rgba(18, 23, 31, 0.05);
  --shadow-lg: 0 12px 20px -6px rgba(18, 23, 31, 0.10), 0 4px 8px -4px rgba(18, 23, 31, 0.05);
  --shadow-xl: 0 24px 40px -12px rgba(18, 23, 31, 0.14), 0 8px 16px -8px rgba(18, 23, 31, 0.06);
  --shadow-accent: 0 1px 2px rgba(18, 23, 31, 0.10), 0 6px 16px -6px rgba(43, 107, 243, 0.45);

  --gradient-hero: linear-gradient(180deg, #FFFFFF 0%, var(--gray-50) 100%);
  --gradient-glow-mint: radial-gradient(50% 50%, rgba(43, 107, 243, 0.14) 0%, rgba(43, 107, 243, 0.06) 40%, rgba(43, 107, 243, 0) 75%);
  --gradient-glow-blue: var(--gradient-glow-mint);

  /* ── 7. Legacy aliases ──────────────────────────────────────────────────
     Old names → new scales. Do not use these in new code; they exist so the
     pre-redesign CSS keeps working. Note app.jsx overrides the four accent
     vars at runtime on the marketing SPA (from the tweaks panel) — the values
     it computes are kept in sync with these. */

  --color-midnight-navy: var(--gray-900);   /* primary text */
  --color-deep-cosmos:   var(--gray-950);   /* darkest surface */
  --color-mint-pulse:    var(--accent);     /* primary accent / CTA fill */
  --color-mint-deep:     var(--accent-hover);
  --color-mint-soft:     var(--accent-soft);
  --color-accent-shine:  var(--accent-on-dark);
  --color-ice-veil:      var(--blue-50);
  --color-ghost-canvas:  var(--surface-sunken);
  --color-pure-surface:  var(--surface);
  --color-slate-ink:     var(--text-muted);
  --color-ash-medium:    var(--text-subtle);
  --color-storm-gray:    var(--text-default);
  --color-fog-border:    var(--border-strong);
  --color-paper-light:   #FFFFFF;

  --radius-card-md-legacy: var(--radius-card-md);
  --shadow-card:        var(--shadow-sm);
  --shadow-badge:       var(--shadow-sm);
  --shadow-light-ghost: var(--shadow-xs);
  --shadow-mint-cta:    var(--shadow-accent);
  --shadow-announce:    var(--shadow-md);
  --shadow-dark-ghost:  inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
/* Horizontal-overflow guard on body only — keeping html clear so `position: sticky`
   descendants (nav) anchor properly against the viewport. */
html, body { margin: 0; padding: 0; width: 100%; max-width: 100%; }
body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Prevent iOS Safari auto-zoom on input focus — needs >=16px */
@media (max-width: 1023px) {
  input, select, textarea { font-size: 16px !important; }
}
/* Better touch targets on mobile only */
@media (max-width: 1023px) {
  .btn { height: 44px; padding: 0 20px; }
  .btn-sm { height: 36px; padding: 0 14px; }
}
img { max-width: 100%; height: auto; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.55;
  letter-spacing: var(--track-body);
  /* White page, with .section-alt bands providing the rhythm. Entry pages
     (login, register, 404, hub) and the app shells set their own background. */
  color: var(--text-default);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

/* Type helpers — one family, weight and tracking do the work.
   Tracking tightens as size grows (optical compensation): large text needs
   negative tracking to avoid looking loose, small text needs none. */
.t-display {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: var(--text-display);
  line-height: 1.08;
  letter-spacing: -0.032em;
  color: var(--text-strong);
  text-wrap: balance; /* ratakan baris heading, hindari satu kata yatim di baris terakhir */
}
/* Judul besar dibuat lebih RINGAN, bukan lebih tebal. Pada ukuran sebesar ini
   bobot 600 mulai terbaca sebagai teriakan; 550 dengan tracking lebih rapat
   memberi kesan tegas tanpa berat — dan menyisakan bobot tebal untuk hal yang
   benar-benar perlu ditekankan di dalam kalimatnya. */
.t-display-xl {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: var(--text-display-xl);
  line-height: 1.04;
  letter-spacing: -0.038em;
  color: var(--text-strong);
  text-wrap: balance; /* ratakan baris heading besar, hindari kata yatim */
}
.t-heading-lg {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-heading-lg);
  line-height: 1.15;
  letter-spacing: -0.024em;
  color: var(--text-strong);
  text-wrap: balance;
}
.t-heading {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-heading);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}
.t-heading-sm {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-heading-sm);
  line-height: 1.35;
  letter-spacing: -0.014em;
  color: var(--text-strong);
}
.t-subheading {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-subheading);
  line-height: 1.45;
  letter-spacing: -0.09px;
}
.t-body { font-size: var(--text-body); line-height: 1.55; }
.t-caption {
  font-size: var(--text-caption);
  /* Teks kecil butuh ruang LEBIH, bukan kurang — lh 1 sebelumnya membuat
     baris saling menempel begitu teksnya membungkus. */
  line-height: 1.45;
  letter-spacing: var(--track-small);
  font-weight: 500;
}
.t-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0;
}
.t-mint { color: var(--accent); }
.t-muted { color: var(--text-muted); }
.t-light { color: var(--text-inverse); }
.t-faded { color: rgba(255, 255, 255, 0.62); }

/* Container */
.container {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--s-24);
}
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--s-24); }
/* Pembatas panjang baris untuk blok bacaan mengalir. */
.prose { max-width: var(--measure); }

/* Shared focus treatment — one visible ring everywhere, keyboard only. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-card-sm);
}

/* === BUTTONS ===
   Rounded-rectangle rather than pill: reads more "product", less "landing page",
   and keeps marketing and in-app buttons visually identical. */
/* Pil, bukan persegi membulat. Di halaman yang isinya kotak semua — kartu,
   tabel, kolom isian — tombol berbentuk pil adalah satu-satunya bentuk yang
   berbeda, dan itu yang membuatnya terbaca sebagai aksi tanpa perlu diperbesar
   atau diberi bayangan. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  height: 48px;
  padding: 0 20px;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.btn:active { transform: translateY(0.5px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* Primary. `btn-mint` is the legacy class name, kept so ~10 call sites and the
   inline <style> pages don't all need rewriting. */
.btn-mint, .btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.btn-mint:hover, .btn-primary:hover { background: var(--accent-hover); }
.btn-mint:active, .btn-primary:active { background: var(--accent-press); }

/* Secondary — the default neutral action on light surfaces. */
.btn-light-ghost, .btn-secondary {
  background: var(--surface);
  color: var(--text-strong);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}
.btn-light-ghost:hover, .btn-secondary:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
}

.btn-dark-solid {
  background: var(--gray-900);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-dark-solid:hover { background: var(--gray-800); }

/* On inverse surfaces (CTA block, footer). */
.btn-dark-ghost {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
}
.btn-dark-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.38);
}

.btn-link-dark {
  color: rgba(255, 255, 255, 0.82);
  height: 42px;
  padding: 0 12px;
  background: transparent;
}
.btn-link-dark:hover { color: #fff; }

/* Quiet text button for light surfaces. */
.btn-ghost {
  background: transparent;
  color: var(--text-default);
}
.btn-ghost:hover { background: var(--gray-100); color: var(--text-strong); }

/* Varian ukuran mewarisi bentuk pil dari .btn — dulu keduanya menimpanya dengan
   radius kotak, jadi tombol kecil dan besar berbeda bentuk dari yang sedang
   tanpa alasan apa pun. */
.btn-sm { height: 36px; padding: 0 18px; font-size: 13.5px; }
/* Bukan lebih tinggi, hanya lebih lapang. Tombol hero yang menjulang
   membuat halaman terasa berteriak; base.org memakai satu tinggi (48px) untuk
   semua CTA dan membedakannya lewat warna, bukan ukuran. */
.btn-lg { padding: 0 26px; }
.btn-block { width: 100%; }

/* === CARDS === */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
}
.card-padded { padding: var(--s-32); }

.card-flat {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-card-md);
  box-shadow: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-default);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-xs);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-card-sm);
  background: var(--gray-100);
  border: 1px solid var(--border);
  color: var(--text-default);
  font-family: var(--font-mono);
  font-size: 11px;
}

.chip-mint {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-press);
}

/* Announcement pill — now lives on a LIGHT hero, so it is a light chip. */
.announcement {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 5px 14px 5px 5px;
  border-radius: var(--radius-pill);
  color: var(--text-default);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  box-shadow: var(--shadow-xs);
  transition: border-color .2s, box-shadow .2s;
}
.announcement:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.announcement .tag {
  background: var(--accent-soft);
  color: var(--accent-press);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Variant for the few places that still sit on a dark background. */
.announcement-dark {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.88);
  box-shadow: none;
  backdrop-filter: blur(8px);
}
.announcement-dark:hover { border-color: rgba(255, 255, 255, 0.32); box-shadow: none; }
.announcement-dark .tag { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* === NAV === */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  transition: background .3s ease, backdrop-filter .3s, border-color .3s;
}
.nav-dark { background: rgba(8, 11, 16, 0.78); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border-inverse); }
.nav-light { background: rgba(255, 255, 255, 0.82); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border); }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--s-24);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-link {
  padding: 8px 12px;
  border-radius: var(--radius-card-sm);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.011em;
  transition: color .16s, background .16s;
}
.nav-dark .nav-link { color: rgba(255, 255, 255, 0.72); }
.nav-light .nav-link { color: var(--text-default); }
.nav-dark .nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nav-light .nav-link:hover { color: var(--text-strong); background: var(--gray-100); }
.nav-link.active {
  background: transparent;
  color: var(--accent);
  font-weight: 600;
}
.nav-light .nav-link.active:hover { background: var(--accent-soft); }
.nav-dark .nav-link.active {
  background: transparent;
  color: #fff;
}
.nav-dark .nav-link.active:hover { background: rgba(255, 255, 255, 0.12); }

.nav-right { display: flex; align-items: center; gap: var(--s-8); }

/* === DROPDOWN PRODUK DI NAV ===
   Sebelumnya seluruh panel ditulis sebagai inline style dengan shadow/radius
   hardcoded dan hover yang dipasang lewat onMouseEnter/onMouseLeave. Dipindah
   ke CSS supaya sebentuk dengan dropdown kustom di form daftar (.gsel-panel)
   dan supaya keadaan hover/aktif tidak lagi saling menimpa lewat JS. */
.nav-prod-wrap { position: relative; }
.nav-prod-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 100;
  min-width: 304px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xl);
}
.nav-prod-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-card-sm);
  text-decoration: none;
  color: var(--text-default);
  transition: background .14s ease, color .14s ease;
}
.nav-prod-item:hover { background: var(--gray-100); color: var(--text-strong); }
.nav-prod-item.active { background: var(--accent-soft); color: var(--accent-press); }
.nav-prod-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-card-sm);
  display: grid;
  place-items: center;
  background: var(--gray-100);
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.nav-prod-item:hover .nav-prod-icon,
.nav-prod-item.active .nav-prod-icon {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}
.nav-prod-text { flex: 1; min-width: 0; }
.nav-prod-title {
  display: block;
  font-size: 13.5px;
  font-weight: 550;
  letter-spacing: var(--track-small);
  color: var(--text-strong);
}
.nav-prod-item.active .nav-prod-title { color: var(--accent-press); }
.nav-prod-desc {
  display: block;
  font-size: 11.5px;
  line-height: 1.45;
  letter-spacing: var(--track-small);
  color: var(--text-muted);
  margin-top: 2px;
}
.nav-prod-badge {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  background: var(--gray-100);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.nav-prod-caret { transition: transform .16s ease; }
.nav-prod-trigger[aria-expanded=true] .nav-prod-caret { transform: rotate(180deg); }

/* Mobile hamburger button */
.nav-burger {
  display: none;
  background: transparent;
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  padding: 0;
  cursor: pointer;
  color: inherit;
  place-items: center;
  margin-left: 4px;
}
.nav-burger:hover { background: rgba(0, 0, 0, 0.04); }
.nav-dark .nav-burger:hover { background: rgba(255, 255, 255, 0.08); }
.burger-icon {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 18px;
  height: 14px;
  position: relative;
}
.burger-icon span {
  display: block;
  width: 100%;
  height: 1.8px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s, opacity .2s;
  transform-origin: center;
}
.burger-icon.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger-icon.open span:nth-child(2) { opacity: 0; }
.burger-icon.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
/* Robust scroll-lock saat drawer open — html + body keduanya di-lock
   supaya iOS Safari & Android Chrome benar-benar berhenti scroll.
   touch-action: none mencegah panning lewat finger. */
html.scroll-locked, body.scroll-locked {
  overflow: hidden !important;
  touch-action: none;
}
body.scroll-locked {
  position: fixed;
  width: 100%;
  /* `top: -Npx` di-set dari JS untuk preserve scrollY */
}
.nav-drawer.open { opacity: 1; pointer-events: auto; }
.nav-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100dvh;
  height: 100vh;
  /* Full-screen drawer di mobile — tidak ada strip overlay di samping. */
  width: 100vw;
  max-width: 100vw;
  background: var(--color-pure-surface);
  display: flex;
  flex-direction: column;
  /* Bottom padding: 24px + safe-area inset untuk system UI bar. */
  padding: 56px 24px calc(24px + env(safe-area-inset-bottom, 16px));
  /* Whole panel scrolls if total content > viewport height. */
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.2,.9,.3,1.05);
  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.12);
}
/* Tablet & up: tidak full-screen — pakai panel sebagian (360px) supaya
   user masih bisa lihat konten halaman di sebelahnya. */
@media (min-width: 768px) {
  .nav-drawer-panel {
    width: 86vw;
    max-width: 360px;
  }
}
.nav-drawer.open .nav-drawer-panel { transform: translateX(0); }
/* Tombol close X di pojok kanan atas drawer panel — sticky supaya tetap kelihatan
   saat drawer items panjang dan user scroll dalam panel. */
.nav-drawer-close {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 16px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(15, 15, 15, 0.04);
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  color: var(--color-midnight-navy);
  z-index: 1;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.nav-drawer-close:hover, .nav-drawer-close:active { background: rgba(15, 15, 15, 0.08); }
.nav-drawer-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* No flex-grow + no own scroll — let drawer panel scroll if content exceeds.
     Prevents scroll-position bug where top items get hidden out of view. */
  flex: 0 0 auto;
  padding-bottom: 8px;
}
.nav-drawer-link {
  display: block;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 450;
  color: var(--color-midnight-navy);
  text-decoration: none;
  border-radius: 10px;
  transition: background .15s, color .15s;
}
.nav-drawer-link:hover { background: rgba(0, 0, 0, 0.04); }
.nav-drawer-link.active {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-mint-pulse);
  font-weight: 500;
}
.nav-drawer-foot {
  /* Tempel di atas, langsung setelah item nav — drawer full-screen tidak perlu push ke bawah. */
  margin-top: 12px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* === AI Powered badge === */
.ai-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: 9999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  box-shadow: none;
  font-family: var(--font-sans);
  line-height: 1;
  overflow: hidden;
  isolation: isolate;
  transition: transform .2s, box-shadow .2s;
}
.ai-badge:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.ai-badge-icon {
  width: 14px;
  height: 14px;
  color: var(--color-mint-pulse);
  animation: ai-spin 8s linear infinite;
  flex-shrink: 0;
}
.ai-badge-label {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.ai-badge-label strong {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.ai-badge-label em {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 12px;
  letter-spacing: -0.01em;
  color: var(--text-muted);
  font-weight: 500;
}
.ai-badge-shimmer {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.7) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: ai-shimmer 4.5s ease-in-out infinite;
  pointer-events: none;
}

/* Dark variant (for dark nav/footer) */
.ai-badge-dark {
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
}
.ai-badge-dark .ai-badge-icon { color: var(--color-accent-shine); }
.ai-badge-dark .ai-badge-label strong { color: var(--color-paper-light); }
.ai-badge-dark .ai-badge-label em { color: rgba(250, 254, 255, 0.65); }
.ai-badge-dark .ai-badge-shimmer {
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%);
}

@keyframes ai-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes ai-shimmer {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(110%); }
  100% { transform: translateX(110%); }
}

/* === Smart Proc badge (same visual pattern as AI Powered) === */
.sp-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: 9999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  box-shadow: none;
  font-family: var(--font-sans);
  line-height: 1;
  overflow: hidden;
  isolation: isolate;
  transition: transform .2s, box-shadow .2s;
}
.sp-badge:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.sp-badge-icon {
  width: 14px;
  height: 14px;
  color: var(--accent);
  flex-shrink: 0;
  animation: sp-pulse 3s ease-in-out infinite;
}
.sp-badge-label {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.sp-badge-label strong {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.sp-badge-label em {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 12px;
  letter-spacing: -0.01em;
  color: var(--text-muted);
  font-weight: 500;
}
.sp-badge-shimmer {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.7) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: ai-shimmer 4.5s ease-in-out infinite;
  animation-delay: 2.25s;
  pointer-events: none;
}

/* Dark variant */
.sp-badge-dark {
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
}
.sp-badge-dark .sp-badge-icon { color: var(--color-accent-shine); }
.sp-badge-dark .sp-badge-label strong { color: var(--color-paper-light); }
.sp-badge-dark .sp-badge-label em { color: rgba(250, 254, 255, 0.65); }
.sp-badge-dark .sp-badge-shimmer {
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%);
}

@keyframes sp-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.9); opacity: 0.72; }
}

/* Logo wordmark */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.032em;
}
.wordmark-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: none;
}
.wordmark .tld { color: var(--accent); font-style: normal; }

/* === SECTIONS ===
   Fluid vertical rhythm — sections breathe on desktop without leaving huge
   dead space on phones. */
.section { padding: clamp(64px, 7vw, 104px) 0; }
.section-sm { padding: clamp(44px, 4.5vw, 68px) 0; }
.section-lg { padding: clamp(80px, 9vw, 132px) 0; }

/* Alternating band. Applied to a <section> to sit it on the sunken canvas. */
.section-alt { background: var(--surface-sunken); border-block: 1px solid var(--border); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.eyebrow-light { color: var(--accent-on-dark); }
.eyebrow-light::before { background: currentColor; }

/* === HERO ===
   Was: full-bleed dark video with aurora blobs, drifting particles and a scan
   sweep. The redesign is light and quiet — a white-to-canvas wash, a masked
   dot grid for texture, and one soft accent bloom. All the old decoration
   classes below are kept as no-ops so any page still referencing them renders
   clean instead of breaking. */
.hero {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--gray-50) 62%, var(--gray-100) 100%);
  color: var(--text-strong);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--border);
}

/* Texture: fine dot grid, masked so it fades out well before the copy. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--gray-300) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(ellipse 80% 62% at 50% 22%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse 80% 62% at 50% 22%, #000 0%, transparent 72%);
}

/* One accent bloom behind the headline — the only colour in the hero. */
.hero::after {
  content: "";
  position: absolute;
  top: -28%;
  left: 50%;
  width: min(1100px, 120%);
  height: 620px;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(43, 107, 243, 0.10), rgba(43, 107, 243, 0.03) 55%, transparent 78%);
}

/* Ladang batang jadwal, digambar useLatarHero() di pages.jsx.
   z-index 1 menaruhnya DI ATAS kisi titik ::before tapi DI BAWAH .hero-inner
   dan .hero-preview yang keduanya z-index 2, jadi teks tidak pernah tertutup. */
.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Dark variant, for surfaces that still want an inverse hero. */
.hero-inverse {
  background: var(--surface-inverse);
  color: #fff;
  border-bottom: 0;
}
.hero-inverse::before { background-image: radial-gradient(circle, rgba(255, 255, 255, 0.14) 1px, transparent 1px); opacity: 0.5; }
.hero-inverse::after { background: radial-gradient(closest-side, rgba(43, 107, 243, 0.26), transparent 76%); }
.hero-inverse .t-display-xl, .hero-inverse .t-display, .hero-inverse h1 { color: #fff; }
.hero-inverse p.subtitle { color: rgba(255, 255, 255, 0.72); }

/* Legacy decoration hooks — intentionally inert. */
.hero-video,
.hero-video-overlay,
.hero-bg-animate,
.hero-glow,
.hero-particles,
.hero-particle,
.hero-scan { display: none; }

/* Partner logo strip */
.partner-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px 56px;
  max-width: 920px;
  margin: 0 auto;
}
.partner-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  transition: opacity .25s ease, transform .25s ease;
}
/* On the light hero the logos read best as neutral grey, lifting to full
   colour on hover — same treatment the marketing pages use elsewhere. */
.partner-logo img {
  opacity: var(--strip-dim, 0.9);
  filter: grayscale(1);
  transition: opacity .25s ease, filter .25s ease;
}
.partner-logo-dark img { filter: brightness(0) invert(1); opacity: 0.7; }
.partner-logo:hover { transform: translateY(-2px); }
.partner-logo:hover img { opacity: 1 !important; filter: grayscale(0); }
.partner-logo-dark:hover img { filter: brightness(0) invert(1); }

.hero-inner {
  position: relative;
  z-index: 2;
  padding: clamp(56px, 7vw, 96px) 24px clamp(56px, 6vw, 88px);
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
}

/* Judul hero punya ukuran sendiri, lebih kecil daripada --text-display-xl.
   Pada 64px kalimatnya jatuh tiga baris di kolom selebar 812px. 44px adalah
   ukuran terbesar yang masih memuat KEDUA bahasa dalam dua baris; versi Inggris
   mulai patah jadi tiga baris pada 46px. Diukur pada elemen sungguhan, bukan
   kloningnya: kloning yang ditempel di luar .hero tidak mewarisi aturan ini dan
   memberi angka yang menyesatkan.

   text-wrap juga dilepas dari 'balance'. Balance meratakan panjang antar baris,
   ia tidak berusaha memakai baris sesedikit mungkin, jadi ia tetap memilih tiga. */
.hero h1 { margin-bottom: 22px; font-size: clamp(30px, 3.8vw, 44px); text-wrap: pretty; }
.hero p.subtitle {
  font-size: clamp(16.5px, 0.6vw + 15px, 19px);
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 auto 32px;
  line-height: 1.6;
  letter-spacing: -0.005em;
}
.hero-cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* === GRID === */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-32); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-24); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-24); }
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-burger { display: grid; }
  /* Burger on the LEFT of nav, before wordmark */
  .nav-burger-left { margin-right: 8px; margin-left: -4px; }
  /* Hide text-only login on mobile (drawer punya tombol login) */
  .nav-login { display: none; }
}
@media (max-width: 1023px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  /* Type and section padding are clamp()-driven now — they scale on their own,
     so the old `!important` font-size overrides are gone. */
  .nav-inner { padding: 0 16px; }
  .container, .container-narrow { padding: 0 16px; }
  .lang-toggle { display: none; }
  .hero-inner { padding-inline: 16px; }
  .ai-badge-label em { display: none; }
  .ai-badge { padding: 4px 8px 4px 6px; }
  .ai-badge-icon { width: 12px; height: 12px; }
  .ai-badge-label strong { font-size: 10px; }
}
@media (max-width: 480px) {
  .ai-badge { display: none; }
  .wordmark img { height: 40px !important; }
}

/* ====== MOBILE GRID COLLAPSE ======
   Inline `style={{ gridTemplateColumns }}` tidak respond ke media queries,
   jadi paksa semua pattern multi-column ke single column di mobile. */
@media (max-width: 1023px) {
  /* 2-col patterns → 1-col */
  *[style*="grid-template-columns: 2fr 1fr"],
  *[style*="grid-template-columns:2fr 1fr"],
  *[style*="grid-template-columns: 1fr 2fr"],
  *[style*="grid-template-columns:1fr 2fr"],
  *[style*="grid-template-columns: 1.2fr 1fr"],
  *[style*="grid-template-columns:1.2fr 1fr"],
  *[style*="grid-template-columns: 1fr 1.2fr"],
  *[style*="grid-template-columns:1fr 1.2fr"],
  *[style*="grid-template-columns: 1.6fr 1fr"],
  *[style*="grid-template-columns:1.6fr 1fr"],
  *[style*="grid-template-columns: 1fr 1fr"],
  *[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* 3-col patterns → 1-col */
  *[style*="grid-template-columns: repeat(3"],
  *[style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  /* 4-col patterns → 2-col */
  *[style*="grid-template-columns: repeat(4"],
  *[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Hero CTA row & generic flex rows with gap */
  .hero-cta-row { flex-direction: column; align-items: stretch; }
  .hero-cta-row .btn { width: 100%; justify-content: center; }
  /* Stat numbers gap inside case study card — case study studio panel */
  .suite-half div[style*="display: flex"][style*="gap: 20"] { flex-wrap: wrap; gap: 16px !important; }
}
@media (max-width: 480px) {
  /* 3-col patterns at very small → also collapse */
  *[style*="grid-template-columns: repeat(4"],
  *[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr !important;
  }
}

/* ====== MOBILE PADDING & OVERFLOW SAFETY ====== */
@media (max-width: 1023px) {
  /* Cards/sections dengan inline padding besar → kurangi */
  .suite-management > div { padding: 24px !important; }
  .suite-half { padding: 28px !important; }
  div[style*="padding: 40"] { padding: 24px !important; }
  div[style*="padding: 48"] { padding: 28px !important; }
  div[style*="padding: 56"] { padding: 32px !important; }
  div[style*="padding: '72px 48px'"],
  div[style*="padding: \"72px 48px\""] { padding: 40px 24px !important; }
  /* Section dark CTA card with big padding */
  section[style*="margin: '0 24px 96px'"],
  section[style*='margin: "0 24px 96px"'] { margin: 0 12px 64px !important; }
  /* Display gap between stat numbers in case study */
  div[style*="display: 'flex'"][style*="gap: 20"] { gap: 14px !important; }
  /* Prevent any element overflowing horizontally on mobile.
     Apply to html too — some mobile browsers ignore body-only clip.
     `clip` (vs `hidden`) preserves sticky positioning; fallback to `hidden`
     where clip isn't supported. */
  html, body { overflow-x: hidden; overflow-x: clip; }
  /* Long words / SKUs / emails — allow break */
  td, .app-product-name, .app-table td { word-break: break-word; }
}
@media (max-width: 480px) {
  div[style*="padding: 40"] { padding: 20px !important; }
  div[style*="padding: 48"] { padding: 24px !important; }
  .suite-management > div { padding: 20px !important; }
  .suite-half { padding: 24px !important; }
  /* 36px tetap dipakai ketika judulnya masih slogan pendek. Judul sekarang satu
     kalimat penuh, dan pada 36px ia jatuh EMPAT baris di layar 390px. Angka
     tetap juga tidak bisa benar untuk semua ponsel sekaligus: tiga baris muat
     sampai 29,5px di 390px tapi hanya sampai 27px di 360px.

     Jadi ukurannya ikut lebar layar. Tiga baris butuh kira-kira lebar
     kolom / 12,1 — rasio itu terukur konsisten dari 320px sampai 480px — dan
     kolomnya sendiri selebar layar dikurangi padding 32px. min() menahannya di
     36px supaya tidak melampaui ukuran lama di batas atas breakpoint. */
  .hero h1 { font-size: min(calc(8vw - 2.5px), 36px) !important; }
  .t-display { font-size: 30px !important; }
  .t-display-xl { font-size: 36px !important; }
}

.flow-col { display: flex; flex-direction: column; }
.gap-8 { gap: var(--s-8); }
.gap-12 { gap: var(--s-12); }
.gap-16 { gap: var(--s-16); }
.gap-20 { gap: var(--s-20); }
.gap-24 { gap: var(--s-24); }
.gap-32 { gap: var(--s-32); }
.gap-40 { gap: var(--s-40); }

/* Product Suite Tabs */
.suite-tabs {
  display: inline-flex;
  padding: 4px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  gap: 4px;
}
.suite-tab {
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: rgba(250,254,255,0.75);
  font-weight: 450;
  letter-spacing: -0.01em;
  transition: all .2s;
  cursor: pointer;
}
.suite-tab.active {
  background: var(--color-accent-shine);
  color: var(--color-midnight-navy);
  font-weight: 500;
}
.suite-tab:not(.active):hover { color: var(--color-paper-light); }

/* Product cards on dark */
.product-card-dark {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-card);
  padding: var(--s-32);
  color: var(--color-paper-light);
  transition: transform .3s ease, border-color .25s, background .25s;
  position: relative;
  overflow: hidden;
}
.product-card-dark:hover {
  transform: translateY(-4px);
  border-color: rgba(214, 218, 224, 0.35);
  background: rgba(255,255,255,0.06);
}
.product-card-dark .pc-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(214, 218, 224, 0.12);
  border: 1px solid rgba(214, 218, 224, 0.25);
  display: grid; place-items: center;
  margin-bottom: 20px;
  color: var(--color-accent-shine);
}
.product-card-dark h3 { margin-bottom: 8px; }

/* Feature cards on light */
.feature-card {
  background: var(--surface);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  padding: var(--s-28);
  box-shadow: var(--shadow-xs);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
/* Lift is subtle now — 2px and a soft shadow, not a 4px jump. */
.feature-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}
.feature-card .fc-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-card-md);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  display: grid; place-items: center;
  margin-bottom: 16px;
  color: var(--accent);
}

/* Logo strip */
.logo-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-40);
  flex-wrap: wrap;
  opacity: 0.65;
}
.logo-strip .logo-item {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--text-muted);
  letter-spacing: -0.025em;
}

/* Stats */
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.2vw + 22px, 48px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.032em;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

/* Pricing card — featured plan is now marked with the accent border and a
   ring rather than by inverting to a black card, which kept the row even. */
.price-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-card-lg);
  border: 1px solid var(--border);
  padding: 30px;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.price-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.price-card.featured {
  border-color: var(--accent);
  box-shadow: var(--shadow-lg), 0 0 0 3px var(--accent-soft);
}
.price-card.featured:hover { box-shadow: var(--shadow-xl), 0 0 0 3px var(--accent-soft); }
.price-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.price-card .price-amount {
  font-family: var(--font-display);
  font-size: clamp(34px, 2.6vw + 24px, 44px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.032em;
  font-variant-numeric: tabular-nums;
}
.price-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.price-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
}
.price-list li svg { flex-shrink: 0; margin-top: 2px; color: var(--color-mint-pulse); }
.price-list li svg { color: var(--accent); }

/* Footer
   Was a full-black slab. Now light: the page ends on the same canvas it lives
   on, and the dark CTA card directly above stays the one inverse moment on the
   page instead of merging into a single dark mass. */
.footer {
  background: var(--surface-sunken);
  border-top: 1px solid var(--border);
  color: var(--text-default);
  padding: clamp(56px, 6vw, 80px) 0 24px;
}
.footer-grid {
  display: grid;
  /* 1 brand col + 3 link cols (Produk, Perusahaan, Sumber Daya) — ramping, tidak sesak */
  grid-template-columns: 1.8fr repeat(3, 1fr);
  gap: 40px 32px;
  margin-bottom: 48px;
}
.footer-brand { max-width: 340px; }
.footer-tagline {
  margin-top: 16px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 320px;
}
.footer-status {
  margin-top: 18px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.footer-status .pulse-dot {
  margin-top: 5px;
}
.footer-socials {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}
.footer-socials a {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-card-sm);
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.footer-socials a:hover {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
  transform: translateY(-2px);
}

.footer h4 {
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-subtle);
  font-family: var(--font-mono);
  margin: 0 0 16px;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.footer ul a {
  font-size: 14px;
  color: var(--text-default);
  transition: color .15s;
  display: inline-block;
}
.footer ul a:hover {
  color: var(--accent);
}

/* Contact strip */
.footer-contact {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.footer-contact-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer-contact-item .label {
  font-size: 11px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-subtle);
}
.footer-contact-item a, .footer-contact-item span:not(.label) {
  font-size: 14px;
  color: var(--text-default);
  transition: color .15s;
}
.footer-contact-item a:hover { color: var(--accent); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 8px;
  font-size: 12.5px;
  color: var(--text-subtle);
  flex-wrap: wrap;
}
.footer-bottom-links {
  display: flex;
  gap: 24px;
}
.footer-bottom-links a {
  color: var(--text-muted);
  transition: color .15s;
}
.footer-bottom-links a:hover { color: var(--accent); }

@media (max-width: 1200px) {
  /* 7-col grid butuh wide viewport; fallback ke 3-col di laptop standar */
  .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
  .footer-brand { grid-column: 1 / -1; max-width: none; }
  .footer-brand .footer-tagline { max-width: 480px; }
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-contact { grid-template-columns: 1fr 1fr; gap: 20px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-bottom-links { gap: 16px; flex-wrap: wrap; }
}


/* Light section heading */
.section-head {
  max-width: 680px;
  margin: 0 auto clamp(36px, 4vw, 56px);
  text-align: center;
}
.section-head .eyebrow { margin-bottom: 14px; justify-content: center; }
.section-head h2 { margin-bottom: 14px; }
.section-head p { color: var(--text-muted); font-size: var(--text-subheading); line-height: 1.6; }

/* Left-aligned variant, for sections that pair a heading with content beside it. */
.section-head-left { max-width: 560px; margin-inline: 0; text-align: left; }
.section-head-left .eyebrow { justify-content: flex-start; }

/* Input — proper boxed fields. The old underline-only style read as a
   "designer" form; boxed inputs match the app shells and are easier to hit. */
.input {
  border-radius: var(--radius-input);
  border: 1px solid var(--border-strong);
  padding: 11px 13px;
  background: var(--surface);
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--text-strong);
  width: 100%;
  outline: none;
  font-family: inherit;
  box-shadow: var(--shadow-xs);
  transition: border-color .16s, box-shadow .16s;
}
.input:hover { border-color: var(--gray-400); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.input::placeholder { color: var(--text-subtle); }
.input:disabled { background: var(--gray-100); color: var(--text-subtle); cursor: not-allowed; }

select.input { appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7488' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

textarea.input {
  resize: vertical;
  min-height: 108px;
  padding: 12px 13px;
  line-height: 1.55;
}

/* Field label — pairs with .input in the contact and auth forms. */
.field-label {
  display: block;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--text-default);
  margin-bottom: 6px;
}

/* Splitter — no longer needed now that the hero is light and separated by a
   1px border. Kept as a no-op so existing markup does not shift. */
.section-light-top {
  background: transparent;
}

/* Animations */
@keyframes float-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Status dot halo. Green, matching the dot itself — the silver it used to be
   was tuned for the old dark footer and is invisible on the light one. */
@keyframes pulse-mint {
  0%, 100% { box-shadow: 0 0 0 0 rgba(4, 120, 87, 0.45); }
  50% { box-shadow: 0 0 0 12px rgba(4, 120, 87, 0); }
}
.fade-in { animation: float-in .8s cubic-bezier(.2,.9,.3,1.05) both; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }

.pulse-dot {
  width: 8px; height: 8px;
  min-width: 8px; min-height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--success);
  animation: pulse-mint 2s infinite;
}

/* Page transition */
.page-enter { animation: float-in .5s ease-out; }

/* Suite triple — 3-column product cards (Marketplace / Solutions / Management) */
.suite-triple {
  display: grid;
  /* Responsive auto-fit — handles 3 cards (comingSoon section) atau 4 cards
     (suite section setelah Healthcare ditambahkan). minmax(280px) memastikan
     card tidak terlalu sempit di layar laptop standar. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.suite-card {
  position: relative;
  background: var(--color-pure-surface);
  border-radius: var(--radius-card);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease;
}
.suite-card:hover {
  transform: translateY(-4px);
  box-shadow: rgba(0, 0, 0, 0.04) 0px 12px 32px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.suite-card.suite-card-dark {
  background: var(--color-deep-cosmos);
  color: var(--color-paper-light);
}
.suite-card.suite-card-dark h3 { color: var(--color-paper-light); }
.suite-card.suite-card-dark .suite-card-body { color: rgba(250, 254, 255, 0.72); }
.suite-card.suite-card-dark .suite-feature-list li { color: rgba(250, 254, 255, 0.82); }
.suite-card.suite-card-dark .suite-feature-list .dot { background: var(--color-accent-shine); }

.suite-card h3 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.6px;
  margin: 0 0 12px;
  line-height: 1.1;
}
.suite-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.suite-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 9999px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.suite-badge.amber { background: rgba(15, 15, 15, 0.06); color: var(--color-midnight-navy); }
.suite-card.suite-card-dark .suite-badge.amber { background: rgba(255, 255, 255, 0.12); color: rgba(250, 254, 255, 0.92); }

.suite-card-body {
  font-size: 15px;
  color: var(--color-slate-ink);
  line-height: 1.55;
  margin: 0 0 24px;
}
.suite-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.suite-feature-list li {
  font-size: 13px;
  color: var(--color-storm-gray);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.suite-feature-list .dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-mint-pulse);
  margin-top: 6px;
}
.suite-feature-list .dot.green { background: var(--color-midnight-navy); }
.suite-feature-list strong { color: var(--color-midnight-navy); font-weight: 500; }
.suite-card.suite-card-dark .suite-feature-list strong { color: var(--color-paper-light); }

.suite-card-cta {
  margin-top: auto;
  display: flex;
}
.suite-card-cta .btn { width: 100%; justify-content: center; }

@media (max-width: 1100px) {
  .suite-triple { grid-template-columns: 1fr; gap: 16px; }
  .suite-card { padding: 28px 24px; }
}

/* Legacy 2-col split (kept for safety, no longer used in home) */
.suite-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-pure-surface);
  box-shadow: var(--shadow-card);
}
.suite-half { padding: 40px; }
.suite-half.platform {
  background: var(--color-pure-surface);
  border-right: 1px solid rgba(0,0,0,0.06);
}
.suite-half.studio {
  background: var(--color-deep-cosmos);
  color: var(--color-paper-light);
}
.suite-half h3 {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: -0.8px;
  margin-bottom: 12px;
  font-weight: 400;
  font-feature-settings: "ss04", "ss06", "ss09", "ss10", "ss11";
}
@media (max-width: 1023px) {
  .suite-split { grid-template-columns: 1fr; }
  .suite-half.platform { border-right: none; border-bottom: 1px solid rgba(0,0,0,0.06); }
  .suite-management { grid-template-columns: 1fr !important; }
  .suite-management > div:nth-child(2) { border-left: none !important; border-top: 1px solid rgba(0,0,0,0.06); }
}

/* Mockup dashboard frame */
.mockup {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
}
.mockup-bar {
  display: flex; align-items: center;
  padding: 12px 16px;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-sunken);
}
.mockup-bar .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-fog-border);
}
.mockup-bar .url-chip {
  margin-left: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-slate-ink);
  background: rgba(255,255,255,0.7);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.mockup-body { padding: 20px; }

/* === LANG TOGGLE === */
.lang-toggle {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--radius-pill);
  gap: 2px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.nav-light .lang-toggle { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
.lang-toggle button {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: inherit;
  opacity: 0.6;
  transition: all .2s;
}
.lang-toggle button.on { background: rgba(255,255,255,0.16); color: #fff; opacity: 1; }
.nav-light .lang-toggle button.on { background: var(--surface); color: var(--text-strong); opacity: 1; box-shadow: var(--shadow-xs); }

/* === Form states === */
.form-card { display: flex; flex-direction: column; gap: 24px; }
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row label { font-size: 13.5px; font-weight: 550; color: var(--text-default); }

.contact-success {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-card);
  padding: 32px;
  text-align: center;
}

/* Misc */
.divider-thin { height: 1px; background: var(--border); margin: 32px 0; }
.dot-sep { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; margin: 0 8px; opacity: 0.5; vertical-align: middle; }
.kbd {
  display: inline-block; font-family: var(--font-mono);
  font-size: 11px; padding: 2px 6px;
  background: var(--gray-100);
  border: 1px solid var(--border);
  border-radius: 5px;
}

/* ============================================================
   MARKETING POLISH — premium micro-interactions & motion
   ============================================================ */

/* --- Scroll reveal: section content fades & rises into view.
       Driven by app.jsx (IntersectionObserver adds .sec-in). --- */
.sec-reveal > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
}
.sec-reveal > *:nth-child(2) { transition-delay: .1s; }
.sec-reveal > *:nth-child(3) { transition-delay: .18s; }
.sec-reveal > *:nth-child(4) { transition-delay: .26s; }
.sec-reveal > *:nth-child(n+5) { transition-delay: .34s; }
.sec-reveal.sec-in > * { opacity: 1; transform: none; }

/* --- Partner logo marquee (hero): infinite scroll, masked edges,
       pause on hover. Track holds two copies of the row. --- */
.partner-marquee {
  overflow: hidden;
  max-width: 980px;
  margin: 0 auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.partner-marquee-track {
  display: flex;
  width: max-content;
  animation: partner-scroll 38s linear infinite;
}
.partner-marquee:hover .partner-marquee-track { animation-play-state: paused; }
.partner-marquee-row {
  display: flex;
  align-items: center;
  gap: 56px;
  padding-right: 56px;
}
@keyframes partner-scroll { to { transform: translateX(-50%); } }

/* --- Buttons: arrow nudges forward on hover --- */
.btn svg { transition: transform .25s cubic-bezier(.2, .9, .3, 1.2); }
.btn:hover svg { transform: translateX(3px); }

/* --- Text selection matches the monochrome brand --- */
::selection { background: var(--color-mint-pulse); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .sec-reveal > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .partner-marquee-track { animation: none; flex-wrap: wrap; }
  .btn svg { transition: none; }
}

/* --- Legal pages (Privacy / Terms / Security) --- */
/* Teks legal adalah satu-satunya bacaan panjang di situs ini: 16px minimum,
   lebar dikunci ke --measure. Sebelumnya 15px dengan ~95–102 karakter/baris. */
.legal-body p { color: var(--text-default); font-size: 16px; line-height: 1.7; margin-bottom: 14px; max-width: var(--measure); }
.legal-body ul { margin: 0 0 14px; padding-left: 22px; color: var(--text-default); font-size: 16px; line-height: 1.7; max-width: var(--measure); }
.legal-body li { margin-bottom: 8px; }
.legal-body strong { color: var(--text-strong); font-weight: 600; }
.legal-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* --- Procurement flow: connected visual stepper (Smart Proc "Alur Procurement") --- */
.proc-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  position: relative;
}
/* Dashed connector line behind the node row; node rings (below) mask it at each
   step. Dashes "march" left→right to reinforce the procurement direction. */
.proc-flow::before {
  content: '';
  position: absolute;
  top: 27px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background-image: repeating-linear-gradient(90deg, rgba(15,15,15,0.22) 0 7px, transparent 7px 14px);
  background-size: 14px 100%;
  z-index: 0;
  animation: proc-flow-march 900ms linear infinite;
}
@keyframes proc-flow-march { to { background-position: 14px 0; } }
.proc-flow-step { position: relative; z-index: 1; text-align: center; }
.proc-flow-node {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-mint-pulse);
  color: var(--color-paper-light);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  margin: 0 auto 22px;
  /* ring in the section bg colour cuts a clean gap in the dashed line */
  box-shadow: 0 0 0 8px var(--color-pure-surface), var(--shadow-mint-cta);
  transition: transform .28s cubic-bezier(.2, .9, .3, 1.25), box-shadow .28s ease;
}
.proc-flow-step:hover .proc-flow-node {
  transform: scale(1.1);
  box-shadow: 0 0 0 8px var(--color-pure-surface), 0 14px 30px -8px rgba(15, 15, 15, 0.45);
}
.proc-flow-step h3 { margin-bottom: 10px; }
.proc-flow-step p { color: var(--color-slate-ink); font-size: 14px; line-height: 1.55; }

@media (max-width: 860px) {
  /* Stack vertically with a left rail connector on mobile. */
  .proc-flow { grid-template-columns: 1fr; gap: 0; }
  .proc-flow::before { display: none; }
  .proc-flow-step {
    text-align: left;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    padding-bottom: 28px;
  }
  .proc-flow-step:not(:last-child) { position: relative; }
  .proc-flow-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 27px;
    top: 56px;
    bottom: 0;
    width: 2px;
    background-image: repeating-linear-gradient(180deg, rgba(15,15,15,0.22) 0 7px, transparent 7px 14px);
    background-size: 100% 14px;
    animation: proc-flow-march-y 900ms linear infinite;
  }
  .proc-flow-node { margin: 0; box-shadow: var(--shadow-mint-cta); }
}
@keyframes proc-flow-march-y { to { background-position: 0 14px; } }

/* Terminal cursor blink for the API code preview */
.term-cursor {
  display: inline-block;
  width: 8px;
  height: 15px;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--color-accent-shine);
  animation: term-blink 1.1s step-end infinite;
}
@keyframes term-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .proc-flow::before, .proc-flow-step:not(:last-child)::after, .proc-flow-node, .term-cursor { animation: none; transition: none; }
}

/* Tombol Daftar di nav — pil hitam kecil di samping Masuk. */
.nav-register {
  display: inline-flex; align-items: center;
  padding: 9px 16px; border-radius: var(--radius-input);
  background: var(--accent); color: #fff !important;
  font-size: 14px; font-weight: 550; text-decoration: none;
  box-shadow: var(--shadow-accent);
  transition: background .16s;
}
.nav-register:hover { background: var(--accent-hover); }

/* ============================================================
   Honest-status affordances: "segera hadir" chips, CTA notes,
   contact form error. Used wherever we name a product that has
   not shipped, so marketing never outruns the app.
   ============================================================ */
.status-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--gray-100); color: var(--text-muted);
  border: 1px solid var(--border);
}
.status-chip-sm { font-size: 9.5px; padding: 3px 8px; letter-spacing: 0.06em; }

.cta-note {
  margin-top: 14px; font-size: 13px; line-height: 1.5;
  color: var(--text-muted); text-align: center;
}
.cta-note-dark { color: rgba(255, 255, 255, 0.6); }

.price-soon span { color: var(--color-slate-ink); }
.price-soon svg { opacity: 0.4; }
.price-soon-tag {
  font-style: normal; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.04em; opacity: 0.75; white-space: nowrap;
}

.form-error {
  font-size: 13px; line-height: 1.45; color: #b4232f;
  background: #fdecef; border: 1px solid rgba(180, 35, 47, 0.22);
  border-radius: 10px; padding: 10px 13px;
}

/* ════════════════════════════════════════════════════════════════════════
   HOME SECTIONS
   Redesigned for the light system. The previous version leaned on set-pieces
   — an animated 640px orbit, comet trails, drifting particles. Those are gone:
   the page now carries its weight with grid, type and one accent colour, and
   shows the actual product instead of a diagram of it.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Hero partner strip ───────────────────────────────────────────────────
   The hero used to carry a mocked-up Co Engineer window here; it was removed.
   The wrapper stays as the band that holds the partner logos under the copy. */
.hero-preview {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px clamp(48px, 5vw, 72px);
}

/* ── Positioning: three layers, one engine ──────────────────────────────── */
.pos-grid {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: clamp(36px, 5vw, 72px); align-items: center;
}
.pos-lead h2 { margin: 14px 0 16px; }
.pos-lead p { color: var(--text-muted); font-size: 17px; line-height: 1.65; max-width: 460px; }

.pos-stack { position: relative; }
.pos-stack::before {
  content: ""; position: absolute; left: 39px; top: 40px; bottom: 46px; width: 1px;
  background: var(--border-strong);
}
.pos-layer {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 18px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 18px 20px;
  transition: transform .2s ease, box-shadow .2s, border-color .2s;
}
.pos-layer + .pos-layer { margin-top: 12px; }
.pos-layer:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.pos-num {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  background: var(--surface-sunken); color: var(--text-muted);
  border: 1px solid var(--border);
  transition: background .2s, color .2s, border-color .2s;
}
.pos-layer:hover .pos-num { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.pos-layer-text { flex: 1; min-width: 0; }
.pos-layer-text h3 { font-size: 16px; font-weight: 600; margin: 0 0 3px; letter-spacing: -0.014em; }
.pos-layer-text p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.pos-layer-icon { flex-shrink: 0; color: var(--text-subtle); transition: color .2s; }
.pos-layer:hover .pos-layer-icon { color: var(--accent); }

.pos-converge { display: flex; flex-direction: column; align-items: center; margin-top: 4px; }
.pos-converge-arrow { color: var(--text-subtle); padding: 8px 0 6px; }
.pos-converge-pill {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em;
  padding: 10px 18px; border-radius: var(--radius-pill);
  background: var(--accent); color: #fff;
}

@media (max-width: 900px) {
  .pos-grid { grid-template-columns: 1fr; }
  .pos-lead p { max-width: none; }
}

/* ── Intelligence Engine ─────────────────────────────────────────────────
   Was a rotating orbit on black. Now a light panel: the engine is stated
   once, and its seven capabilities are a plain, scannable grid. */
.engine-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card-xl);
  padding: clamp(32px, 4vw, 56px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.engine-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, var(--blue-25), transparent 70%);
}
.engine-head { position: relative; z-index: 1; text-align: center; max-width: 660px; margin: 0 auto; }
.engine-head .eyebrow { justify-content: center; margin-bottom: 14px; }
.engine-head h2 { margin-bottom: 12px; }
.engine-head p { color: var(--text-muted); font-size: var(--text-subheading); line-height: 1.6; margin: 0; }

.engine-caps {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-top: clamp(28px, 3.5vw, 44px);
}
/* Seven items in a four-column grid leaves an odd tail, so the first item
   spans two columns and anchors the row. */
.engine-caps > :first-child { grid-column: span 2; }
.engine-cap {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-card-md);
  padding: 14px 16px;
  transition: background .2s, border-color .2s;
}
.engine-cap:hover { background: var(--surface); border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.engine-cap-icon {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius-card-sm);
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--accent);
}
.engine-cap-icon svg { width: 16px; height: 16px; }
.engine-cap-label { font-size: 13.5px; font-weight: 550; letter-spacing: -0.008em; color: var(--text-strong); }
@media (max-width: 900px) { .engine-caps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .engine-caps { grid-template-columns: 1fr; }
  .engine-caps > :first-child { grid-column: auto; }
}

/* ── Product cards ──────────────────────────────────────────────────────── */
.prod-card {
  position: relative; text-decoration: none; color: inherit;
  padding: 26px; display: flex; flex-direction: column; gap: 12px;
}
.prod-head { display: flex; flex-direction: column; gap: 12px; }
.prod-tag {
  font-size: 11px; font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-subtle);
}
/* .prod-wide membentang seluruh lebar grid, jadi tanpa batas ini barisnya
   mencapai ~144 karakter sementara kartu sempit lain aman. */
.prod-body { color: var(--text-muted); font-size: 14.5px; line-height: 1.6; margin: 0; max-width: var(--measure); }
.prod-items { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 7px; }
.prod-items li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-default); letter-spacing: var(--track-small); }
.prod-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.prod-arrow {
  position: absolute; top: 22px; right: 22px;
  width: 28px; height: 28px; border-radius: var(--radius-card-sm);
  display: grid; place-items: center;
  color: var(--text-subtle); background: transparent;
  transition: color .2s, background .2s;
}
.prod-card:hover .prod-arrow { background: var(--accent-soft); color: var(--accent); }
.prod-card:hover .fc-icon { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Enterprise menutup grid sebagai kartu lebar: konten mengalir horizontal. */
.prod-wide { grid-column: 1 / -1; }
.prod-wide .prod-items { flex-direction: row; flex-wrap: wrap; gap: 8px 22px; }
/* Stagger masuk menumpang reveal container (aman: tanpa kelas = tampil). */
.sec-reveal .prod-card, .sec-reveal .ind-chip, .sec-reveal .val-card { opacity: 0; }
.sec-in .prod-card, .sec-in .ind-chip, .sec-in .val-card {
  opacity: 1; transition: opacity .5s ease calc(var(--i, 0) * 55ms);
}

/* ── Industry chips ─────────────────────────────────────────────────────── */
.ind-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 820px; margin: 0 auto; }
.ind-chip {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 500; padding: 10px 18px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-default);
  transition: transform .2s ease, box-shadow .2s, border-color .2s, color .2s;
}
.ind-chip:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
  color: var(--text-strong);
}
.ind-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* ── Core values ────────────────────────────────────────────────────────── */
.val-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.val-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 20px;
  transition: transform .2s ease, box-shadow .2s, border-color .2s;
}
.val-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.val-icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-card-sm);
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
  display: grid; place-items: center;
  transition: background .2s, color .2s, border-color .2s;
}
.val-card:hover .val-icon { background: var(--accent); border-color: var(--accent); color: #fff; }
.val-card h3 { font-size: 15.5px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.014em; }
.val-card p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-muted); letter-spacing: var(--track-small); }
@media (max-width: 900px) { .val-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .val-grid { grid-template-columns: 1fr; } }

/* ── Closing CTA — the one inverse block on the page ────────────────────── */
.cta-card {
  position: relative; overflow: hidden; text-align: center;
  background: var(--surface-inverse); color: #fff;
  border-radius: var(--radius-card-xl); padding: clamp(48px, 6vw, 76px) clamp(24px, 4vw, 48px);
}
.cta-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 25%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 40%, #000 25%, transparent 78%);
}
.cta-card .t-display { color: #fff; }
.cta-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(43, 107, 243, 0.30), transparent 70%);
}
.cta-brandline {
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.5); margin: 0 0 18px;
}
.cta-brandline em { font-style: normal; color: var(--accent-on-dark); }

@media (prefers-reduced-motion: reduce) {
  .sec-in .prod-card, .sec-in .ind-chip, .sec-in .val-card { transition: none; }
  .prod-card:hover, .ind-chip:hover, .val-card:hover { transform: none; }
  .pos-layer, .pos-layer-icon, .pos-num { transition: none; }
  .pos-layer:hover { transform: none; }
  .feature-card:hover, .price-card:hover { transform: none; }
}