/* Zilva landing — palet diambil dari BRAND.colors di frontend aplikasi
   (frontend/src/config/brand.ts): navy #13294B, emas #B8934A, krem #FAF7F0.
   Mobile-first. Nol dependensi eksternal: font sistem, ikon inline SVG. */

:root {
  --navy: #13294B;
  --navy-700: #1B3A66;
  --navy-900: #0C1B33;
  --gold: #B8934A;
  --gold-600: #9E7C38;
  --gold-100: #F3E9D5;
  --cream: #FAF7F0;
  --white: #FFFFFF;
  --ink: #1C2430;
  --ink-muted: #5A6675;
  --line: #E3DED2;
  --line-dark: rgba(255, 255, 255, 0.16);
  --ok: #2E7D5B;
  --err: #B4341F;

  --radius: 12px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(19, 41, 75, 0.06), 0 8px 24px rgba(19, 41, 75, 0.06);
  --wrap: 1120px;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--navy); line-height: 1.2; margin: 0 0 0.5em; letter-spacing: -0.015em; }
h1 { font-size: 2rem; font-weight: 800; }
h2 { font-size: 1.6rem; font-weight: 750; }
h3 { font-size: 1.06rem; font-weight: 700; letter-spacing: -0.005em; }
p { margin: 0 0 1rem; }
a { color: var(--navy); }

/* Header-nya sticky, jadi tanpa ini setiap lompatan anchor mendaratkan judul
   section PERSIS di belakang bilah header dan pembaca melihat paragraf kedua
   sebagai baris pertama. */
section[id], main[id] { scroll-margin-top: 76px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap.narrow { max-width: 720px; }
.center { text-align: center; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: #fff; padding: 10px 16px; z-index: 100;
  border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

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

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 62px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.brand-word { font-size: 1.22rem; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; }

/* Logo header: ikon + kata "Zilva", BUKAN lockup penuh.
   Lockup membawa dua baris tagline setinggi 20px dan 17px di dalam viewBox
   760x200. Pada tinggi header 44px keduanya mengecil jadi ~4.4px dan ~3.7px —
   dirender, hasilnya bukan teks kecil melainkan noda abu-abu, di SEMUA lebar,
   bukan hanya di ponsel. Karena itu fallback "ikon + Zilva" dipakai pada
   seluruh lebar, bukan hanya di bawah 480px.
   Lockup utuh tetap dipakai di tempat yang punya ruang: footer dan kartu OG. */
.brand-lockup { display: none; }
.brand-icon { display: block; width: 30px; height: 30px; }

@media (min-width: 480px) {
  .brand-icon { width: 34px; height: 34px; }
  .brand-word { font-size: 1.34rem; }
}
.header-nav { display: flex; align-items: center; gap: 8px; }
.header-nav > a:not(.btn) { display: none; }

@media (min-width: 860px) {
  .header-nav { gap: 26px; }
  .header-nav > a:not(.btn) {
    display: inline; text-decoration: none; color: var(--ink-muted);
    font-size: 0.94rem; font-weight: 600;
  }
  .header-nav > a:not(.btn):hover { color: var(--navy); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; border-radius: 999px; border: 1.5px solid transparent;
  font-size: 0.98rem; font-weight: 700; text-decoration: none; cursor: pointer;
  font-family: inherit; transition: background-color .15s, color .15s, border-color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 8px 16px; font-size: 0.9rem; }
.btn-block { width: 100%; }

.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-700); }

.btn-accent { background: var(--gold); color: #201603; }
.btn-accent:hover { background: var(--gold-600); color: #fff; }

.btn-outline { background: transparent; color: var(--navy); border-color: rgba(19, 41, 75, 0.28); }
.btn-outline:hover { border-color: var(--navy); background: rgba(19, 41, 75, 0.04); }

.btn-ghost { background: var(--navy); color: #fff; }
.btn-ghost:hover { background: var(--navy-700); }

/* ---------- Hero ---------- */
.hero {
  /* Warna akhir setiap radial ditulis sebagai versi alpha-0 dari warnanya
     sendiri, bukan `transparent`. `transparent` adalah rgba(0,0,0,0), dan
     interpolasi menujunya melewati abu-abu — pada gradasi selebar ini itu
     terlihat sebagai bayangan kotor di tepinya. */
  background:
    radial-gradient(1000px 420px at 12% -10%, rgba(184, 147, 74, 0.16) 0%, rgba(184, 147, 74, 0) 62%),
    radial-gradient(900px 460px at 92% 0%, rgba(19, 41, 75, 0.09) 0%, rgba(19, 41, 75, 0) 60%),
    var(--cream);
  border-bottom: 1px solid var(--line);
  padding: 52px 0 56px;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white); border: 1px solid var(--line);
  color: var(--navy); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px; margin: 0 0 20px;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); display: inline-block; }
.hero h1 { max-width: 17ch; margin-bottom: 18px; }
.hero h1 em { font-style: normal; color: var(--gold-600); }
.lede { font-size: 1.08rem; color: var(--ink-muted); max-width: 56ch; margin-bottom: 18px; }
.lede strong { color: var(--navy); }
.claim {
  font-size: 1.02rem; font-weight: 650; color: var(--navy);
  max-width: 52ch; border-left: 3px solid var(--gold);
  padding: 4px 0 4px 16px; margin-bottom: 28px;
}
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.cta-row .btn { flex: 1 1 auto; min-width: 180px; }
.micro { font-size: 0.9rem; color: var(--ink-muted); margin: 0; }

@media (min-width: 780px) {
  .hero { padding: 92px 0 96px; }
  h1 { font-size: 3.15rem; }
  .lede { font-size: 1.22rem; }
  .claim { font-size: 1.12rem; }
  .cta-row .btn { flex: 0 0 auto; }
}

/* ---------- Sections ---------- */
.section { padding: 56px 0; }
.section-alt { background: var(--cream); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kicker {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--gold-600); margin: 0 0 10px;
}
.kicker-light { color: var(--gold); }
.section-lede { color: var(--ink-muted); max-width: 62ch; font-size: 1.02rem; }
.center .section-lede { margin-left: auto; margin-right: auto; }

@media (min-width: 780px) {
  .section { padding: 88px 0; }
  h2 { font-size: 2.15rem; }
}

/* ---------- Grid & cards ---------- */
.grid { display: grid; gap: 16px; margin-top: 32px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }

@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 780px) { .grid-2 { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow);
}
.card p { margin: 0; color: var(--ink-muted); font-size: 0.96rem; }
.card h3 { margin-bottom: 8px; }
.card-ai { border-top: 3px solid var(--gold); }
.num {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em;
  color: var(--gold-600); margin-bottom: 10px;
}
.tag {
  display: inline-block; vertical-align: middle;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--gold-100); color: var(--gold-600);
  padding: 2px 8px; border-radius: 999px; margin-left: 6px;
}
.tag-warn { background: rgba(184, 147, 74, 0.2); color: var(--gold-600); }

/* ---------- Panels (pajak) ---------- */
.panel {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow);
}
.panel-progress { background: linear-gradient(180deg, #FFFDF8, var(--white)); border-style: dashed; }
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  position: relative; padding-left: 30px; margin-bottom: 12px;
  color: var(--ink-muted); font-size: 0.96rem;
}
.ticks li strong { color: var(--navy); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 16px; height: 9px; border-left: 2.4px solid var(--ok); border-bottom: 2.4px solid var(--ok);
  transform: rotate(-45deg); border-radius: 1px;
}
.ticks-progress li::before {
  content: ""; width: 13px; height: 13px; top: 0.34em;
  border: 2.4px dashed var(--gold-600); border-radius: 50%; transform: none;
}
.note {
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 0.9rem; color: var(--ink-muted);
}

/* ---------- Section gelap / waitlist ---------- */
.section-dark { background: var(--navy); color: rgba(255, 255, 255, 0.82); }
.section-dark h2 { color: #fff; }
.section-dark .section-lede { color: rgba(255, 255, 255, 0.76); }

.form { margin-top: 30px; }
.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 0.88rem; font-weight: 700;
  color: rgba(255, 255, 255, 0.9); margin-bottom: 6px;
}
.field input {
  width: 100%; padding: 13px 15px; font-size: 1rem; font-family: inherit;
  color: var(--ink); background: #fff;
  border: 1.5px solid transparent; border-radius: var(--radius);
}
.field input::placeholder { color: #9AA4B0; }
.field input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184, 147, 74, 0.35); }
.field input[aria-invalid="true"] { border-color: #FF9B8A; }

/* Honeypot: disembunyikan tanpa display:none supaya bot tetap mengisinya. */
.hp {
  position: absolute !important; left: -9999px !important; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.form-note { font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); margin: 14px 0 0; }

/* ---------- Halaman sukses ----------
   Netlify mengarahkan ke sukses.html sesudah POST diterima. */
.sukses { min-height: 76vh; display: flex; align-items: center; }
.sukses-ikon {
  width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 24px;
  background: var(--gold-100); display: flex; align-items: center; justify-content: center;
}
.sukses-ikon svg { width: 30px; height: 30px; display: block; }

/* Nama badan hukum tidak boleh patah di tengah. "PT Lawi Konsultan" di satu
   baris dan "Indonesia" sendirian di baris berikutnya terbaca seperti dua
   entitas berbeda. Barisnya boleh pecah SEBELUM nama PT — itu yang terjadi
   di lebar sempit, karena span ini utuh dan didorong ke baris berikutnya. */
.nowrap { white-space: nowrap; }

/* ---------- Pemilih bahasa ---------- */
.lang { display: inline-flex; align-items: center; gap: 2px; }
.lang a {
  display: inline-block; padding: 5px 9px; border-radius: 7px;
  font-size: 0.84rem; font-weight: 700; text-decoration: none;
  color: var(--ink-muted); line-height: 1;
}
.lang a:hover { color: var(--navy); background: rgba(19, 41, 75, 0.06); }
.lang .lang-aktif { color: var(--navy); background: rgba(19, 41, 75, 0.09); }

/* ---------- Kredensial pelatih (hero) ---------- */
.kredensial {
  font-size: 0.95rem; color: var(--ink-muted); max-width: 58ch;
  margin: 0 0 26px; padding-left: 16px; border-left: 3px solid var(--line);
}
.kredensial em { font-style: italic; color: var(--navy); }

/* ---------- Pita milestone ---------- */
.milestone { background: var(--cream); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 30px 0; }
.milestone-inner {
  display: flex; flex-direction: column; gap: 6px;
  border-left: 4px solid var(--gold); padding-left: 18px;
}
.milestone-label {
  margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--gold-600);
}
.milestone-tanggal { margin: 0; font-size: 1.32rem; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; }
.milestone-teks { margin: 0; color: var(--ink-muted); font-size: 1rem; }
.milestone-teks strong { color: var(--navy); }

@media (min-width: 780px) {
  .milestone { padding: 34px 0; }
  .milestone-inner { flex-direction: row; align-items: baseline; gap: 20px; }
  .milestone-tanggal { font-size: 1.5rem; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: rgba(255, 255, 255, 0.62); padding: 44px 0 30px; font-size: 0.93rem; }
.footer-inner { display: flex; flex-direction: column; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--line-dark); }
/* 92px, bukan 58px: pada 58px baris tagline turun ke ~5.8px dan ikut jadi
   noda. 92px membuatnya ~9.2px — kecil, tapi terbaca. Footer punya ruang
   vertikal untuk itu; header tidak. */
.footer-lockup { display: block; height: 92px; width: auto; margin: 0 0 14px; max-width: 100%; }
.footer-legal { margin: 0; max-width: 44ch; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.footer-links a:hover { color: var(--gold); text-decoration: underline; }
.copyright { margin: 20px 0 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.45); }

@media (min-width: 780px) {
  .footer-inner { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .footer-links { align-items: flex-end; }
}