/* ===========================================================================
   Exilir — Landing Page
   Token warna, tipografi, dan container diangkat dari CSS variable Webflow
   (lihat ANALISA-WEBFLOW-LANDING-PAGE.md §5) supaya tampilannya setara tanpa
   menebak nilai dari screenshot.
   =========================================================================== */

:root{
  /* --- brand --- */
  --c-primary:#bce955;
  /* Hijau tua ini bagian dari palet Webflow tapi di sana tidak pernah
     dirujuk sama sekali. Disimpan sebagai catatan palet saja — jangan
     dipakai untuk elemen antarmuka; warna gelap memakai --c-navy-darker. */
  --c-secondary:#0e3128;

  --c-mint-soft:#7ff2c3;  --c-mint-medium:#52e8ab;  --c-mint-dark:#35c792;
  --c-lime-soft:#d8f47d;  --c-lime-dark:#99c93c;
  --c-navy-light:#243a5a; --c-navy-darker:#19283f;

  --c-n1:#001a10; --c-n2:#334840; --c-n3:#f3f5f4; --c-n4:#26463e;
  --c-n5:#15372e; --c-n6:#e7eae9; --c-n7:#cfd6d4;

  /* Teks di atas latar terang memakai navy, bukan hijau-tua brand.
     Di Webflow tiap heading gelap diberi kelas .text-colour-dark-navy
     (#19283f) dan paragraf .text-colour-soft-navy (#243a5a) — jadi warna
     hijau-tua #0e3128 memang ada di palet Webflow tapi tidak pernah dirujuk.
     Sejak 2026-09-04 tombol, nav, dan pill ikut memakai navy ini juga, jadi
     semua elemen gelap satu warna dengan judul.
     Dijadikan token supaya semua heading & paragraf ikut sekaligus. */
  --c-text:      var(--c-navy-darker);
  --c-text-soft: var(--c-navy-light);
  --c-muted:     #6b7b74;
  --c-white:#fff; --c-grey:#f2f2f2; --c-grey-light:#f8f8f8;

  /* --- tipografi (skala desktop; diturunkan di media query) --- */
  --fs-h1:72px; --fs-h2:52px; --fs-h3:40px; --fs-h4:32px; --fs-h5:24px;
  --lh-h1:1.11em; --lh-h2:1.15em; --lh-h3:1.2em; --lh-h4:1.24em; --lh-h5:1.32em;
  --ls-h1:-.027px; --ls-h2:-.0288em; --ls-h3:-.025em; --ls-h4:-.0156em; --ls-h5:-.0124em;

  --fs-sm:14px; --fs-base:16px; --fs-lg:18px; --fs-xl:20px;

  /* --- ruang & bentuk --- */
  --sp-1:4px; --sp-2:8px; --sp-3:16px; --sp-4:24px; --sp-5:32px;
  --sp-6:48px; --sp-7:64px; --sp-8:96px; --sp-9:128px;
  --container:80rem;
  --nav-h:76px;          /* dipakai .nav__inner dan perhitungan tinggi hero */
  --marquee-h:50px;      /* idem — tinggi pita ditetapkan, bukan hasil padding */
  --radius:16px; --radius-lg:24px; --radius-pill:999px;
  --shadow:0 1px 2px rgba(14,49,40,.04), 0 8px 24px rgba(14,49,40,.06);
  --shadow-lg:0 2px 4px rgba(14,49,40,.05), 0 18px 48px rgba(14,49,40,.10);
}

@media (max-width:991px){
  :root{ --fs-h1:49px; --fs-h2:40px; --fs-h3:32px; --fs-h4:28px; --fs-h5:22px; }
}
@media (max-width:767px){
  :root{ --fs-h1:42px; --fs-h2:32px; --fs-h3:28px; --fs-h4:24px; --fs-h5:20px;
         --marquee-h:42px; }
}

/* --------------------------------------------------------------------------
   Dasar
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:var(--fs-base); line-height:1.35em; letter-spacing:-.01875em;
  color:var(--c-text); background:var(--c-white);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4,h5{margin:0;font-weight:800}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
h4{font-size:var(--fs-h4);line-height:var(--lh-h4);letter-spacing:var(--ls-h4)}
h5{font-size:var(--fs-h5);line-height:var(--lh-h5);letter-spacing:var(--ls-h5)}
p{margin:0 0 var(--sp-3)}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-4)}
.section{padding-block:var(--sp-8)}
.section--tight{padding-block:var(--sp-6)}
.section--dark{background:var(--c-navy-darker);color:var(--c-white)}
.section--soft{background:var(--c-grey-light)}
.lead{font-size:var(--fs-lg);line-height:1.55;color:var(--c-text-soft);max-width:56rem}
.center{text-align:center}
.center .lead{margin-inline:auto}

/* lompat ke konten — tidak ada di Webflow, ditambahkan untuk aksesibilitas */
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--sp-3);top:var(--sp-3);z-index:100;background:var(--c-white);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius);box-shadow:var(--shadow)}

/* --------------------------------------------------------------------------
   Tombol
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:14px var(--sp-4);border-radius:var(--radius-pill);
  font-weight:700;font-size:var(--fs-base);line-height:1.24em;letter-spacing:-.01875em;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--c-mint-soft);color:var(--c-navy-darker)}
.btn--primary:hover{background:var(--c-mint-medium)}
.btn--ghost{background:transparent;color:var(--c-navy-darker);border-color:var(--c-navy-darker)}
.btn--ghost:hover{background:var(--c-navy-darker);color:var(--c-white)}
.btn--block{width:100%}
.btn[aria-disabled="true"]{opacity:.55;pointer-events:none}

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--c-n6)}
.nav__inner{display:flex;align-items:center;gap:var(--sp-4);
  min-height:var(--nav-h);width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-4)}
.nav__logo img{height:30px;width:auto}
.nav__links{display:flex;align-items:center;gap:var(--sp-5);margin-left:auto}
.nav__link{text-decoration:none;font-weight:600;color:var(--c-navy-darker);padding:var(--sp-2) 0}
.nav__link:hover{color:var(--c-mint-dark)}
/* Halaman yang sedang dibuka SENGAJA tidak diberi warna berbeda (2026-09-05).
   Sebelumnya .nav__link[aria-current="page"] diwarnai mint, sehingga menu
   "Bootcamp" tampak hijau di /bootcamps.php tapi navy di /index.php — satu-
   satunya hal yang membuat bilah menu terlihat tidak sama antar halaman.

   Penandanya tidak dihapus, hanya warnanya: atribut aria-current="page" tetap
   dipasang di markup, jadi pembaca layar tetap mengumumkan "halaman saat ini".
   Yang hilang cuma isyarat visualnya, dan itu bisa diterima di sini karena
   menu atas tinggal satu butir sejak Mentor disembunyikan — judul halaman
   sudah mengatakan hal yang sama, jauh lebih besar.

   Untuk mengembalikannya, cukup hidupkan lagi baris ini:
   .nav__link[aria-current="page"]{color:var(--c-mint-dark)} */
.nav__cta{margin-left:var(--sp-3)}
/* Teks yang hanya untuk pembaca layar. Kelas ini dipakai di markup tombol menu
   tapi belum pernah didefinisikan, sehingga tulisan "Buka menu" ikut terlihat
   di sebelah ikon hamburger.
   Disembunyikan lewat clip, bukan display:none atau visibility:hidden —
   keduanya membuat teks ikut hilang dari pembaca layar, padahal tombol itu
   isinya cuma SVG ber-aria-hidden dan tanpa teks ini ia jadi tombol tanpa nama. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.nav__toggle{display:none;margin-left:auto;background:none;border:0;padding:var(--sp-2);
  cursor:pointer;color:var(--c-navy-darker)}

@media (max-width:991px){
  .nav__toggle{display:block}
  .nav__links{
    position:absolute;left:0;right:0;top:100%;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--c-white);border-bottom:1px solid var(--c-n6);
    padding:var(--sp-2) var(--sp-4) var(--sp-4);
    box-shadow:var(--shadow);
  }
  .nav__links[hidden]{display:none}
  .nav__link{padding:var(--sp-3) 0;border-bottom:1px solid var(--c-n6)}
  .nav__cta{margin:var(--sp-3) 0 0}
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
/* Hero mengisi sisa layar pertama (tinggi layar dikurangi navbar), isinya
   dipusatkan. Tanpa ini, sejak judul dan gambarnya dikecilkan hero cuma setinggi
   488px sehingga judul section berikutnya sudah nongol di layar pertama.
   Dipakai min-height, bukan height: kalau isinya lebih tinggi dari layar
   (mis. jendela pendek atau ponsel), isinya yang menang dan tidak terpotong.
   svh dipakai supaya di ponsel yang dihitung layar tanpa bilah browser;
   baris vh di atasnya cadangan untuk browser lama. */
.hero{padding-block:var(--sp-7);
  min-height:calc(100vh - var(--nav-h) - var(--marquee-h) - 1px);
  min-height:calc(100svh - var(--nav-h) - var(--marquee-h) - 1px);
  display:flex;flex-direction:column}
/* Kolomnya yang memanjang mengisi sisa tinggi dan memusatkan isinya, bukan
   .hero yang memakai align-items:center. Dengan begitu pita marquee bisa jadi
   anak terakhir .hero dan duduk persis di tepi bawah, sementara judul+gambar
   tetap di tengah ruang yang tersisa. */
.hero > .container{flex:1;display:flex;align-items:center;width:100%}
/* Teks 50, gambar 50 — dipakai 1fr/1fr, bukan 50%/50%, supaya jarak antar
   kolom (gap) tidak ikut dihitung ke dalam persentase dan bikin barisnya
   melebihi lebar kontainer.
   align-items:center: gambar dipusatkan terhadap SELURUH blok teks (judul +
   deskripsi + tombol), bukan diratakan ke salah satu ujungnya. */
.hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7);align-items:center}

/* Judul hero dikecilkan dari ukuran h1 umum (72px). Kolomnya kini hanya
   setengah kontainer, dan pada ukuran penuh baris "Kelas teori mah banyak!"
   pecah jadi dua sehingga judul yang dirancang tiga baris jadi empat.
   Diturunkan khusus di hero, bukan lewat --fs-h1, supaya judul halaman lain
   yang memang selebar kontainer tidak ikut mengecil.

   Ukurannya ikut lebar layar, bukan angka tetap: kolomnya menyempit seiring
   viewport, jadi satu angka tetap yang pas di 1280px akan pecah lagi di 1100px.
   Batas atas 50px — di atas itu barisnya tidak muat walau layarnya lebar,
   karena kontainer berhenti melebar di 1280px. */
.hero h1{font-size:clamp(36px, 3.85vw, 50px)}
@media (max-width:991px){ .hero h1{font-size:var(--fs-h1)} }
.hero h1 em{font-style:normal;color:var(--c-mint-dark)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-5)}
/* Gambar hero sudah punya bentuknya sendiri (lengkungan mint + chip ikon di
   luar garis lengkung), jadi tidak diberi latar, radius, maupun bayangan:
   ketiganya akan tampak sebagai kotak di belakang karya yang bukan kotak.
   Rasionya pun dibiarkan mengikuti gambar, bukan dipaksa 4/3, supaya tidak ada
   pita kosong di atas-bawah dan tidak ada bagian orang yang terpotong. */
.hero__art{display:block;width:100%;height:auto;max-width:none}

/* --- Pita teks berjalan di tepi bawah hero ---------------------------------
   Dua salinan daftar yang identik digeser sejauh setengah lebar track, jadi
   saat salinan pertama habis, salinan kedua sudah persis di posisi awal —
   pengulangannya mulus tanpa lompatan.
   width:max-content supaya track selebar isinya, bukan selebar layar;
   overflow:hidden di pembungkus supaya halaman tidak jadi bisa digeser ke
   samping. */
/* Tinggi ditetapkan lewat --marquee-h, bukan dibiarkan hasil padding: angka
   yang sama dipakai .hero untuk menghitung sisa layar, jadi kalau tingginya
   berubah keduanya ikut berubah bersamaan dan tidak bisa meleset. */
.marquee{height:var(--marquee-h);display:flex;align-items:center;
  overflow:hidden;background:var(--c-navy-darker);color:var(--c-white)}
.marquee__track{display:flex;width:max-content;
  animation:marquee-jalan 45s linear infinite;will-change:transform}
.marquee__group{display:flex;align-items:center;gap:var(--sp-5);
  margin:0;padding:0 var(--sp-5) 0 0;list-style:none}
.marquee__group li{position:relative;white-space:nowrap;
  font-size:var(--fs-sm);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase}
/* Pemisah dibuat lewat ::after, bukan karakter di markup, supaya tidak ikut
   terbaca sebagai teks dan tidak perlu diurus saat daftarnya berubah. */
.marquee__group li::after{content:"";position:absolute;
  right:calc(var(--sp-5) / -2);top:50%;transform:translate(50%,-50%);
  width:5px;height:5px;border-radius:50%;background:var(--c-mint-medium)}

@keyframes marquee-jalan{ to{ transform:translateX(-50%) } }

/* Berhenti bagi yang meminta gerakan dikurangi. Pitanya tetap tampil, hanya
   diam — isinya informasi, bukan sekadar animasi. */
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
}
@media (max-width:767px){
  .marquee__group{gap:var(--sp-4)}
  .marquee__group li::after{right:calc(var(--sp-4) / -2)}
}

@media (max-width:991px){ .hero__grid{grid-template-columns:1fr;gap:var(--sp-5)} }

/* --------------------------------------------------------------------------
   Kartu kelas
   -------------------------------------------------------------------------- */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-4)}

.card{
  display:flex;flex-direction:column;background:var(--c-white);
  border:1px solid var(--c-n6);border-radius:var(--radius-lg);overflow:hidden;
  text-decoration:none;color:inherit;transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card__media{position:relative;aspect-ratio:16/10;background:var(--c-mint-soft)}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__badges{position:absolute;inset:var(--sp-3) var(--sp-3) auto;display:flex;
  justify-content:space-between;align-items:flex-start;gap:var(--sp-2)}
/* Kelas belum berfoto: rasio 16:10 dilepas supaya pitanya setinggi isinya saja.
   Labelnya ikut jadi aliran normal — tanpa gambar tidak ada yang perlu
   ditumpangi, dan posisi absolut di kotak yang tingginya menyusut justru
   membuat tingginya jadi nol. */
.card__media--kosong{aspect-ratio:auto;padding:var(--sp-3)}
.card__media--kosong .card__badges{position:static;inset:auto}
.card__body{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4);flex:1}
.card__title{font-size:var(--fs-h5);line-height:var(--lh-h5);letter-spacing:var(--ls-h5);font-weight:800}
.card__meta{margin-top:auto;padding-top:var(--sp-3);border-top:1px solid var(--c-n6);
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--sp-2) var(--sp-3)}
.card__mentor{font-size:var(--fs-sm);color:var(--c-muted);min-width:0}
.card__mentor strong{display:block;color:var(--c-text);font-size:var(--fs-base)}

.pill{display:inline-block;padding:6px 12px;border-radius:var(--radius-pill);
  font-size:var(--fs-sm);font-weight:700;background:var(--c-white);color:var(--c-navy-darker)}
.pill--date{background:#ffe3e3;color:#a33}
.pill--soft{background:var(--c-n3);color:var(--c-n2)}
/* Kelas yang pendaftarannya tertutup tetap dipajang (lihat listed_courses()),
   jadi labelnya harus terbaca lebih dulu daripada kategori — ia MENGGANTIKAN
   pil kategori dan pil tanggal, bukan menemaninya. Berdiri sendiri, ia tidak
   bisa terbaca sebagai keterangan pil di sebelahnya. */
.pill--tutup{background:var(--c-navy-darker);color:var(--c-white)}

/* --------------------------------------------------------------------------
   Harga
   -------------------------------------------------------------------------- */
/* Rata kiri, bukan kanan. Kartunya sempit (grid minimum 280px), jadi harga
   selalu turun ke baris sendiri di bawah nama instruktur. Dengan rata kanan
   di dalam blok yang menyusut sesuai isinya, angka terpanjang menempel kiri
   sementara yang lebih pendek menggantung ke kanan — itu yang bikin badge
   diskonnya tampak melenceng sendiri. */
.price{text-align:left;line-height:1.15;flex:none}
.price__was{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);
  margin-bottom:4px}
.price__strike{font-size:var(--fs-sm);color:var(--c-muted);
  text-decoration:line-through;white-space:nowrap}
/* Harga tidak boleh patah jadi dua baris — "Rp 990.000" harus utuh. */
.price__now,.price__soon{display:block;white-space:nowrap;
  font-size:var(--fs-h5);font-weight:800;color:var(--c-mint-dark)}
.badge-disc{display:inline-block;padding:4px 10px;border-radius:var(--radius-pill);
  background:#ffe3e3;color:#c0392b;font-size:12px;font-weight:800}
/* Kartu tertutup: harganya tetap ditampilkan karena itu memang harga kelasnya
   dan berguna bagi orang yang menunggu angkatan berikutnya — tapi ia tidak
   boleh lagi memakai warna aksen yang dipakai tombol dan harga aktif, karena
   warna itulah yang membaca sebagai "bisa dibeli". */
.price--tutup .price__now{color:var(--c-muted)}

/* --------------------------------------------------------------------------
   Halaman detail kelas
   -------------------------------------------------------------------------- */
.detail{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.9fr);
  gap:var(--sp-6);align-items:start}
@media (max-width:991px){ .detail{grid-template-columns:1fr} }

.backlink{display:inline-block;margin-bottom:var(--sp-4);text-decoration:none;
  font-weight:600;color:var(--c-muted)}
.backlink:hover{color:var(--c-navy-darker)}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--sp-3);margin:var(--sp-5) 0}
.fact{border:1px solid var(--c-n6);border-radius:var(--radius);padding:var(--sp-3)}
.fact__k{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted);font-weight:700}
.fact__v{font-weight:700;margin-top:var(--sp-1)}

.mentorbar{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  background:var(--c-navy-darker);color:var(--c-white);
  border-radius:var(--radius-lg);padding:var(--sp-4)}
.mentorbar__name{font-size:var(--fs-h5);font-weight:800;color:var(--c-mint-soft)}
.mentorbar__role{color:var(--c-n7);font-size:var(--fs-sm)}
.mentorbar .btn{margin-left:auto}

.prose{max-width:none}
.prose p{margin:0 0 var(--sp-3);line-height:1.65}
.prose ul{padding-left:1.2em;margin:0 0 var(--sp-3)}
.prose li{margin-bottom:var(--sp-2);line-height:1.6}
.prose strong{font-weight:700}

.curriculum{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-4)}
.lesson{border:1px solid var(--c-n6);border-radius:var(--radius);overflow:hidden}
.lesson__q{display:flex;align-items:center;gap:var(--sp-3);width:100%;
  padding:var(--sp-3) var(--sp-4);background:var(--c-white);border:0;cursor:pointer;
  font:inherit;font-weight:700;text-align:left;color:inherit}
.lesson__n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--c-n3);
  color:var(--c-n2);display:grid;place-items:center;font-size:13px}
.lesson__q::after{content:'+';margin-left:auto;font-size:20px;color:var(--c-muted)}
.lesson__q[aria-expanded="true"]::after{content:'\2212'}
.lesson__a{padding:0 var(--sp-4) var(--sp-4) calc(var(--sp-4) + 28px + var(--sp-3))}
.lesson__a[hidden]{display:none}

.stacks{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}

/* kartu harga sticky */
.buy{position:sticky;top:100px;background:var(--c-navy-darker);color:var(--c-white);
  border-radius:var(--radius-lg);padding:var(--sp-5);box-shadow:var(--shadow-lg)}
.buy__label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--c-n7);font-weight:700}
.buy__row{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2)}
.buy__strike{text-decoration:line-through;color:var(--c-n7)}
.buy__now{font-size:var(--fs-h3);line-height:1.1;font-weight:800;color:var(--c-mint-soft);
  margin-top:var(--sp-2)}
.buy__batch{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-4)}
.buy__batch .pill{background:var(--c-mint-soft);color:var(--c-navy-darker)}
.buy__list{list-style:none;margin:var(--sp-4) 0 0;padding:var(--sp-4);
  background:rgba(255,255,255,.06);border-radius:var(--radius)}
.buy__list li{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-2);font-size:var(--fs-sm)}
.buy__list li:last-child{margin-bottom:0}
.buy .btn{margin-top:var(--sp-4)}
.buy__note{margin:var(--sp-3) 0 0;font-size:13px;color:var(--c-n7);text-align:center}

/* --------------------------------------------------------------------------
   Langkah & nilai
   -------------------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-4);
  margin-top:var(--sp-6)}
.step__n{font-size:var(--fs-h3);font-weight:800;color:var(--c-mint-soft);line-height:1}
.step h4{margin:var(--sp-2) 0}
.step p{color:var(--c-n7)}

.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-4);
  margin-top:var(--sp-6)}
.value{border:1px solid var(--c-n6);border-radius:var(--radius-lg);padding:var(--sp-4)}
.value h4{font-size:var(--fs-h5);margin-bottom:var(--sp-2)}
.value p{color:var(--c-text-soft);margin:0}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-5)}
.faq__item{border:1px solid var(--c-n6);border-radius:var(--radius);background:var(--c-white)}
.faq__q{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-4);
  background:none;border:0;cursor:pointer;font:inherit;font-weight:700;text-align:left;color:inherit}
.faq__q::after{content:'+';margin-left:auto;font-size:22px;color:var(--c-muted)}
.faq__q[aria-expanded="true"]::after{content:'\2212'}
.faq__a{padding:0 var(--sp-4) var(--sp-4)}
.faq__a[hidden]{display:none}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer{background:var(--c-navy-darker);color:var(--c-white);padding-block:var(--sp-7) var(--sp-5);margin-top:var(--sp-8)}
.footer__logo{height:32px;width:auto}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--sp-6)}
@media (max-width:767px){ .footer__grid{grid-template-columns:1fr;gap:var(--sp-5)} }
.footer h5{color:var(--c-mint-soft);font-size:var(--fs-base);margin-bottom:var(--sp-3)}
.footer a{color:var(--c-n7);text-decoration:none;display:block;padding:var(--sp-1) 0}
.footer a:hover{color:var(--c-white)}
.footer__tag{color:var(--c-n7);max-width:34ch}
/* Daftar kontak & sosial di footer memakai satu pola: baris menurun, tiap
   baris lingkaran ikon lalu teks. Dipakai bersama dua kolom, jadi ditulis
   sekali — kalau disalin per kolom, cepat atau lambat keduanya berbeda tipis.
   Warnanya mengikuti footer yang sudah ada (--c-n7 di atas navy, mint saat
   disentuh), bukan warna baru.
   Kotak ikon 40px: di bawah itu susah dikenai jempol di ponsel, padahal
   gambarnya sendiri cuma 20px. */
.footer__list{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-2)}
/* Ditulis `.footer .footer__item`, bukan kelasnya saja: aturan `.footer a` di
   atas bernilai spesifisitas lebih tinggi (kelas + elemen) dan akan menang
   menetapkan display:block, sehingga ikon dan teksnya tidak sejajar vertikal. */
.footer .footer__item{display:flex;align-items:center;gap:var(--sp-3);
  color:var(--c-n7);text-decoration:none;padding:var(--sp-1) 0}
/* Hover hanya untuk yang benar-benar bisa diklik — alamat bukan tautan. */
.footer a.footer__item:hover{color:var(--c-white)}
.footer__ikon{display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.08);
  transition:background .15s ease,color .15s ease}
.footer a.footer__item:hover .footer__ikon{
  color:var(--c-navy-darker);background:var(--c-mint-soft)}
.footer a.footer__item:focus-visible{outline:2px solid var(--c-mint-soft);
  outline-offset:2px;border-radius:24px}
.footer__bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:var(--sp-6);
  padding-top:var(--sp-4);color:var(--c-n7);font-size:var(--fs-sm)}

/* --------------------------------------------------------------------------
   Reveal saat scroll — pengganti Webflow IX2, tanpa jQuery.
   Kalau JS mati atau pengguna minta gerakan dikurangi, isi tetap terlihat.
   -------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(16px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .5s ease, transform .5s ease}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.is-in{opacity:1;transform:none;transition:none}
  .btn:hover,.card:hover{transform:none}
}