/* Tether — landing page
   Sistem token Material Design 3, skema gelap.
   Dipecah dari index.html; urutan blok dipertahankan apa adanya. */

/* =========================================================
   1. TOKEN — Material Design 3, skema gelap
   Peran warna memakai penamaan MD3 supaya pemetaannya jelas.
   Primary diturunkan dari teal Tether, tertiary dari amber.
   ========================================================= */
:root{
  /* -- primary (teal) -- */
  --md-primary:#8FC2BC;
  --md-on-primary:#0A3B37;
  --md-primary-container:#265F59;
  --md-on-primary-container:#ABDED8;

  /* -- tertiary (amber), untuk status & peringatan -- */
  --md-tertiary:#D9AD73;
  --md-tertiary-container:#513C1D;
  --md-on-tertiary-container:#F6DCB4;

  /* -- permukaan bertingkat; MD3 memakai tonal, bukan bayangan -- */
  --md-surface:#0B1113;
  --md-surface-low:#101718;
  --md-surface-container:#141B1D;
  --md-surface-high:#1E2527;

  --md-on-surface:#DFE4E2;
  --md-on-surface-variant:#BEC9C6;
  --md-outline:#88938F;
  --md-outline-variant:#39423F;

  /* -- lapisan state MD3 -- */
  --md-state-hover:0.08;
  --md-state-focus:0.10;
  --md-state-press:0.10;

  /* -- skala bentuk MD3; bentuk adalah kanal ekspresif utama -- */
  --shape-xs:4px;
  --shape-s:8px;
  --shape-m:12px;
  --shape-l:16px;
  --shape-xl:28px;
  --shape-full:999px;

  /* -- motion. CSS tidak punya spring, jadi kurva emphasized MD3 dipakai
        untuk transisi, dan satu kurva overshoot ringan menggantikan
        spring spasial pada elemen yang berubah bentuk. -- */
  --ease-emphasized:cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate:cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-spring:cubic-bezier(0.32, 1.28, 0.5, 1);
  --dur-short:200ms;
  --dur-medium:350ms;
  --dur-long:550ms;

  /* -- tipografi -- */
  --font-display:'Newsreader', Georgia, serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:'IBM Plex Mono', 'SF Mono', monospace;

  --gutter:clamp(20px, 5vw, 56px);

  /* -- elevasi. Sebelumnya semua kartu cuma border 1px tanpa bayangan,
        jadi lima jenis kartu berbeda (rantai, fase, pilar, tim, panel
        radar) semuanya membaca sebagai kotak gelap yang sama persis.
        Dua tingkat: istirahat dan terangkat saat hover/tekan. -- */
  --elevation-1:
    0 1px 2px rgba(0,0,0,0.28),
    0 3px 10px rgba(0,0,0,0.22);
  --elevation-2:
    0 2px 4px rgba(0,0,0,0.32),
    0 14px 32px -6px rgba(0,0,0,0.4);

  /* -- glow. Satu aksen elektrik dipakai hemat: pusat radar hero, tepi
        tombol saat hover, dan panel yang jadi jangkar visual sebuah
        section (bukan didekorasi ke semua tempat sekaligus). -- */
  --glow-primary:
    0 0 0 1px color-mix(in srgb, var(--md-primary) 30%, transparent),
    0 0 40px -6px color-mix(in srgb, var(--md-primary) 55%, transparent);
  --glow-primary-soft:
    0 0 32px -8px color-mix(in srgb, var(--md-primary) 40%, transparent);
}

/* =========================================================
   2. DASAR
   ========================================================= */
*{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }

html{ background:var(--md-surface); scroll-behavior:smooth; }
body{
  background:var(--md-surface);
  background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center top;
  color:var(--md-on-surface-variant);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{ background:var(--md-primary); color:var(--md-on-primary); }
a{ color:inherit; }
:focus-visible{
  outline:3px solid var(--md-primary);
  outline-offset:2px;
  border-radius:var(--shape-xs);
}

/* =========================================================
   3. SKALA TIPOGRAFI
   Peran MD3, memakai tiga huruf brand Tether.
   ========================================================= */
.display-large{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(34px, 6vw, 61px); line-height:1.1; letter-spacing:-0.015em;
  color:var(--md-on-surface);
}
.headline-large{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(26px, 3.6vw, 38px); line-height:1.2; letter-spacing:-0.01em;
  color:var(--md-on-surface);
}
.title-large{
  font-family:var(--font-display); font-weight:500;
  font-size:22px; line-height:1.3; color:var(--md-on-surface);
}
.body-large{ font-size:16px; line-height:1.65; }
.body-medium{ font-size:14.5px; line-height:1.6; }
/* Label memakai Inter, bukan mono. Mono disisakan untuk tempat yang
   isinya memang keluaran mesin, yaitu log status. */
.label-large{
  display:inline-block;
  font-family:var(--font-body); font-size:12.5px; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--md-primary);
}

/* =========================================================
   4. UTILITAS
   ========================================================= */
.wrap{ max-width:1160px; margin:0 auto; padding:0 var(--gutter); }
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* Lapisan state MD3: satu overlay currentColor yang opasitasnya berubah
   menurut interaksi, menggantikan efek hover ad-hoc. */
.state{ position:relative; overflow:hidden; isolation:isolate; }
.state::after{
  content:''; position:absolute; inset:0; z-index:0;
  background:currentColor; opacity:0; border-radius:inherit;
  pointer-events:none;
  transition:opacity var(--dur-short) var(--ease-emphasized);
}
.state:hover::after{ opacity:var(--md-state-hover); }
.state:focus-visible::after{ opacity:var(--md-state-focus); }
.state:active::after{ opacity:var(--md-state-press); }

/* =========================================================
   5. KOMPONEN
   ========================================================= */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px 7px 11px;
  border-radius:var(--shape-full);
  border:1px solid var(--md-tertiary-container);
  background:color-mix(in srgb, var(--md-tertiary-container) 35%, transparent);
  color:var(--md-on-tertiary-container);
  font-size:12px; font-weight:500; letter-spacing:0.03em;
  white-space:nowrap;
}
/* Titik berdenyut ini sempat kehilangan keyframe-nya (dihapus salah
   satu skrip luar) dan diam sama sekali. Dipakai lagi di log status
   untuk baris [AKTIF], jadi satu bahasa visual "sedang hidup". */
.pulse-dot{
  width:6px; height:6px; border-radius:var(--shape-full);
  background:var(--md-tertiary); flex-shrink:0;
}
@media (prefers-reduced-motion: no-preference){
  .pulse-dot{ animation:pulse-dot 2.2s var(--ease-emphasized) infinite; }
}
@keyframes pulse-dot{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }


/* Tombol terisi MD3: pill, primary di atas on-primary. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 24px;
  border:none; border-radius:var(--shape-full);
  background:var(--md-primary); color:var(--md-on-primary);
  font-family:var(--font-body); font-size:15px; font-weight:600; letter-spacing:0.01em;
  cursor:pointer; white-space:nowrap;
  transition:border-radius var(--dur-medium) var(--ease-spring),
             transform var(--dur-short) var(--ease-emphasized),
             opacity var(--dur-short) var(--ease-emphasized);
}
/* MD3 Expressive memakai perubahan bentuk sebagai umpan balik tekan,
   bukan sekadar perubahan warna. */
.btn:active{ border-radius:var(--shape-m); transform:scale(0.97); }
.btn:disabled{ opacity:0.4; cursor:progress; }
.btn:disabled:active{ transform:none; border-radius:var(--shape-full); }
.btn > span{ position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce){
  .btn{ transition:opacity var(--dur-short) linear; }
  .btn:active{ border-radius:var(--shape-full); transform:none; }
}

/* Kolom isian MD3 outlined. */
.field{
  flex:1 1 220px; min-width:0; min-height:48px;
  padding:0 20px;
  border:1px solid rgba(255,255,255,0.15);
  border-radius:var(--shape-full);
  background:transparent;
  color:var(--md-on-surface);
  font-family:var(--font-body); font-size:15px;
  transition:border-color var(--dur-short) var(--ease-emphasized),
             box-shadow var(--dur-short) var(--ease-emphasized);
}
.field::placeholder{ color:rgba(255,255,255,0.3); }
.field:hover{ border-color:var(--md-on-surface-variant); }
.field:focus{
  outline:none;
  border-color:var(--md-primary);
  box-shadow:inset 0 0 0 1px var(--md-primary);
}
.field[aria-invalid="true"]{ border-color:var(--md-tertiary); }
.field[aria-invalid="true"]:focus{ box-shadow:inset 0 0 0 1px var(--md-tertiary); }

.waitlist-form{ display:flex; gap:10px; flex-wrap:wrap; }
.form-note{
  margin-top:18px; min-height:18px;
  font-size:12.5px; color:rgba(255,255,255,0.4);
}
.form-note.is-error{ color:var(--md-tertiary); }
.form-confirm{
  margin-top:28px; padding:18px 22px;
  border-radius:var(--shape-l);
  background:var(--md-primary-container);
  color:var(--md-on-primary-container);
  font-size:14.5px;
}

.card{
  background:var(--md-surface-container);
  border:1px solid var(--md-outline-variant);
  border-radius:var(--shape-l);
  box-shadow:var(--elevation-1);
}

/* =========================================================
   6. TOPBAR
   ========================================================= */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:50;
  background:var(--md-surface);
  border-bottom:1px solid var(--md-outline-variant);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:68px; gap:12px;
}
.wordmark{
  font-family:var(--font-display); font-size:21px; font-weight:600;
  color:var(--md-on-surface); flex-shrink:0;
}
.wordmark span{ color:var(--md-primary); }

/* =========================================================
   7. HERO

   Jangkar visual halaman. Radar dihidupkan lagi sepenuhnya (sweep
   berputar + tiga blip berdenyut sempat kehilangan isinya dan
   diredupkan ke opacity 0.15 oleh skrip luar, membuat hero terasa
   kosong) dan diberi glow ambient di baliknya. Di mobile, radar
   dipudarkan tepat di tengah lewat mask-image supaya teks tetap
   terbaca tanpa panel kaca menutupinya, sementara tepi radar tetap
   terlihat jelas dan berdenyut di sekeliling teks.
   ========================================================= */
.hero{
  position:relative; min-height:85svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:140px 0 96px;
  border-top:none;
  overflow:hidden;
}
.hero > .wrap{ position:relative; z-index:2; }

/* Cahaya ambient di belakang radar. Elemen terpisah dari .radar-field
   supaya opacity/mask radar tidak ikut memudarkan glow-nya. */
.hero-glow{
  position:absolute; top:50%; left:50%; z-index:0;
  width:min(760px, 150vw); height:min(760px, 150vw);
  transform:translate(-50%, -55%);
  background:radial-gradient(circle,
    color-mix(in srgb, var(--md-primary) 48%, transparent) 0%,
    color-mix(in srgb, var(--md-primary) 18%, transparent) 38%,
    transparent 68%);
  pointer-events:none;
  filter:blur(2px);
  opacity:1;
}

.radar-field{
  position:absolute; top:50%; left:50%;
  width:min(880px, 128vw); height:min(880px, 128vw);
  --px:0px; --py:0px;
  transform:translate(calc(-50% + var(--px)), calc(-50% + var(--py)));
  z-index:0;
  transition:transform var(--dur-long) var(--ease-decelerate);
  will-change:transform;
}
.radar-field{ opacity:0.55; }
.radar-field svg{ width:100%; height:100%; display:block; }
.radar-field svg circle, .radar-field svg line{ stroke:rgba(255,255,255,0.08); }

.sweep{ transform-origin:300px 300px; }
@media (prefers-reduced-motion: no-preference){
  .sweep{ animation:sweep-rotate 11s linear infinite; }
}
@keyframes sweep-rotate{ to{ transform:rotate(360deg); } }

.blip{ transform-origin:center; transform-box:fill-box; }
@media (prefers-reduced-motion: no-preference){
  .blip{ animation:blip-pulse 3.2s var(--ease-emphasized) infinite; }
  .blip.b2{ animation-delay:0.8s; }
  .blip.b3{ animation-delay:1.6s; }
}
@keyframes blip-pulse{
  0%,100%{ opacity:0.55; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.4); }
}

/* Panel kaca dilepas (24 Agustus 2026, atas permintaan) — sebelumnya
   menutupi radar sampai nyaris tak terlihat di baliknya. Sekarang
   cuma wadah layout polos: batas lebar teks + tata letak tengah,
   tanpa latar, blur, atau garis tepi yang menutupi apa pun. */
.hero-panel{
  max-width:720px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center;
}
.hero-panel .label-large{ margin-bottom:16px; }
.hero-headline em{ font-style:italic; color:var(--md-primary); }
/* Sebelumnya cuma headline yang beranimasi masuk; sub-teks dan form
   langsung muncul diam di baliknya. Sekarang ketiganya naik berurutan
   satu bahasa gerak yang sama (rise-in), supaya hero terasa selesai
   dibuka, bukan cuma judulnya saja. */
@media (prefers-reduced-motion: no-preference){
  .hero-headline, .hero-sub, .hero .waitlist{
    opacity:0; transform:translateY(14px);
    animation:rise-in var(--dur-long) var(--ease-decelerate) forwards;
  }
  .hero-headline{ animation-delay:120ms; }
  .hero-sub{ animation-delay:260ms; }
  .hero .waitlist{ animation-delay:380ms; }
}
@keyframes rise-in{ to{ opacity:1; transform:none; } }

.hero-sub{ max-width:520px; margin:28px auto 36px; font-weight:400; color:var(--md-on-surface-variant); }
.hero .waitlist{ max-width:440px; margin:0 auto; width:100%; }
.hero .waitlist-form{ justify-content:center; gap:12px; }
/* Tombol utama hero mendapat glow — satu-satunya CTA yang boleh
   bersinar, supaya glow tetap terasa istimewa dan bukan hiasan umum. */
.hero .btn{ box-shadow:var(--glow-primary); }

.scroll-cue{
  position:absolute; bottom:32px; left:50%; z-index:2;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:11px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--md-outline);
}
.scroll-cue::after{
  content:''; width:1px; height:28px;
  background:linear-gradient(var(--md-outline), transparent);
}

/* =========================================================
   8. SECTION BERSAMA
   ========================================================= */
section{
  position:relative; padding:clamp(72px, 10vw, 128px) 0;
  border-top:1px solid var(--md-outline-variant);
}
/* Kepala section rata tengah, seporos dengan hero. Sebelumnya rata kiri
   dengan lebar 660px di dalam wadah 1160px, sehingga tiap section membentuk
   huruf L: teks menumpuk di kiri sementara kartu di bawahnya selebar penuh. */
.section-head{
  max-width:680px; margin:0 auto clamp(44px, 5vw, 72px);
  text-align:center;
}
.section-head .label-large{ margin-bottom:14px; }
.section-head p{ margin-top:16px; }

/* Muncul saat di-scroll. Keadaan tersembunyi hanya aktif kalau JS hidup,
   jadi tanpa JS seluruh konten tetap terbaca. */

@media (prefers-reduced-motion: no-preference){
  .js 
  .js .reveal.in-view{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){  }

/* =========================================================
   9. LIFECYCLE — rantai terputus vs satu jalur
   ========================================================= */
.chain{
  display:grid; gap:12px;
  grid-template-columns:repeat(5, 1fr);
}
/* Rantai dan jalur 4C sebelumnya berbeda cuma di garis batas: dua
   kotak abu-abu yang sama persis. Sekarang rantai memakai nomor
   urut + aksen amber (menandai "terputus"), dan 4C memakai label
   C1–C4 + aksen teal (menandai "satu jalur tersambung") — perbedaan
   yang menjelaskan sesuatu, bukan sekadar variasi warna. */
.chain{ counter-reset:chain-step; }
.chain-step{
  position:relative;
  padding:22px 16px 18px;
  border-radius:var(--shape-m);
  border:1px dashed var(--md-outline-variant);
  background:var(--md-surface-low);
  box-shadow:var(--elevation-1);
  transition:box-shadow var(--dur-short) var(--ease-emphasized);
}
.chain-step:hover{ box-shadow:var(--elevation-2); }
.chain-step::before{
  counter-increment:chain-step;
  content:counter(chain-step, decimal-leading-zero);
  position:absolute; top:12px; right:14px;
  font-family:var(--font-mono); font-size:11px;
  color:var(--md-tertiary); opacity:0.7;
}
.chain-step b{
  display:block; font-size:14.5px; font-weight:600;
  color:var(--md-on-surface-variant); margin-bottom:4px;
}
.chain-step span{ font-size:12.5px; color:var(--md-outline); }
/* Celah antar langkah, tempat konteks hilang. */
.chain-step:not(:last-child)::after{
  content:''; position:absolute; top:50%; right:-13px; width:14px; height:1px;
  background:repeating-linear-gradient(90deg,
    var(--md-tertiary) 0 3px, transparent 3px 6px);
}
.chain-loss{
  margin-top:16px; font-size:12.5px; color:var(--md-tertiary);
  display:flex; align-items:center; gap:8px;
}
.chain-loss::before{
  content:''; width:20px; height:1px; flex-shrink:0;
  background:repeating-linear-gradient(90deg,
    var(--md-tertiary) 0 3px, transparent 3px 6px);
}

.flow{
  counter-reset:flow-step;
  display:grid; grid-template-columns:repeat(4, 1fr);
  margin-top:44px;
  border-radius:var(--shape-l);
  overflow:hidden;
  border:1px solid var(--md-primary-container);
  background:var(--md-surface-container);
  box-shadow:var(--elevation-1), var(--glow-primary-soft);
}
.flow-step{
  position:relative;
  padding:26px 20px 22px;
  border-right:1px solid var(--md-primary-container);
  transition:background var(--dur-short) var(--ease-emphasized);
}
.flow-step:last-child{ border-right:none; }
.flow-step:hover{ background:var(--md-surface-high); }
.flow-step::before{
  counter-increment:flow-step;
  content:'C' counter(flow-step);
  display:block;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.08em;
  color:var(--md-outline); margin-bottom:10px;
}
.flow-step b{
  display:block; font-family:var(--font-display); font-size:19px; font-weight:500;
  color:var(--md-primary); margin-bottom:4px;
}
.flow-step span{ font-size:13px; }

.chain-caption{ margin-top:18px; font-size:13px; color:var(--md-outline); }


/* =========================================================
   10. TIGA PILAR PRODUK

   Tiga kolom sejajar yang selalu terbaca penuh. Kemunculan
   berurutannya murni dekoratif; tanpa JS atau dengan reduced
   motion, ketiganya langsung tampil.
   ========================================================= */
.pillar-cols{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
  list-style:none;
}
.pillar-col{
  --pillar-accent:var(--md-primary);
  --pillar-accent-container:var(--md-primary-container);
  display:flex; flex-direction:column;
  padding:26px 24px 28px;
  border-radius:var(--shape-l);
  border:1px solid var(--md-outline-variant);
  border-top:3px solid var(--pillar-accent);
  background:var(--md-surface-container);
  box-shadow:var(--elevation-1);
  transition:opacity var(--dur-long) var(--ease-decelerate),
             transform var(--dur-long) var(--ease-decelerate),
             background var(--dur-medium) var(--ease-emphasized),
             border-color var(--dur-medium) var(--ease-emphasized),
             box-shadow var(--dur-short) var(--ease-emphasized),
             border-radius var(--dur-medium) var(--ease-spring);
}
.pillar-col:hover{ box-shadow:var(--elevation-2); }
/* Dua pilar pertama sama-sama soal komposisi tim (siapa masih kurang),
   yang ketiga soal pemantauan kesehatan — perbedaan warna ini nyata,
   bukan hiasan: mengikuti aksen amber yang sudah dipakai v-alert di
   bawah untuk menandai peringatan. */
.pillar-col--health{
  --pillar-accent:var(--md-tertiary);
  --pillar-accent-container:var(--md-tertiary-container);
}
/* Nama fitur, bukan angka hiasan. Gaya label MD3 yang sama dengan
   eyebrow section, supaya terbaca sebagai penanda dan bukan judul. */
.pillar-name{
  font-size:12.5px; font-weight:600; line-height:1.5;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--pillar-accent);
  margin-bottom:10px;
}
.pillar-col h3{ margin-bottom:10px; }
.pillar-col p{ font-size:14.5px; line-height:1.6; }

.pillar-visual{
  margin-bottom:22px; padding:16px;
  border-radius:var(--shape-m);
  background:color-mix(in srgb, var(--pillar-accent-container) 20%, var(--md-surface));
  border:1px solid var(--md-outline-variant);
}
.pillar-visual svg{ display:block; width:100%; height:auto; }


/* Kolom muncul berurutan saat masuk layar. Tidak ada penguncian scroll:
   riset usability (NN/g) konsisten menemukan scroll-jacking menyandera
   makna di balik gerakan, dan pembaca yang harus "mengusahakan" pesan
   sering memilih pergi. Kemunculannya kini sekadar hiasan pada konten
   yang tetap terbaca utuh sejak awal. */
@media (prefers-reduced-motion: no-preference){
  .js .pillar-col.reveal{ opacity:0; transform:translateY(22px); }
  .js .pillar-col.reveal.in-view{
    opacity:1; transform:none;
    border-color:var(--md-primary-container);
  }

  /* Isi tiap gambar ikut hidup saat kolomnya masuk layar. */
  .v-anim{ transform-box:fill-box; transform-origin:center; }
  .js .reveal .v-candidate{
    opacity:0; transform:translateY(22px);
    transition:opacity var(--dur-medium) linear 220ms,
               transform var(--dur-long) var(--ease-spring) 220ms;
  }
  .js .reveal.in-view .v-candidate{ opacity:1; transform:none; }
  .js .reveal .v-fill{
    transform:scale(0.08);
    transition:transform var(--dur-long) var(--ease-spring) 200ms;
  }
  .js .reveal.in-view .v-fill{ transform:scale(1); }
  .js .reveal .v-pulse{
    stroke-dasharray:260; stroke-dashoffset:260;
    transition:stroke-dashoffset 900ms var(--ease-decelerate) 180ms;
  }
  .js .reveal.in-view .v-pulse{ stroke-dashoffset:0; }
  .js .reveal .v-alert{
    opacity:0; transition:opacity var(--dur-medium) linear 950ms;
  }
  .js .reveal.in-view .v-alert{ opacity:1; }
}

/* =========================================================
   11. TEAM RADAR
   ========================================================= */
/* Panel ini jadi pengganti screenshot produk yang belum ada — grafik
   sungguhan, bukan mockup, jadi diberi elevasi dan glow paling kuat di
   antara semua kartu supaya jelas ia adalah jangkar visual sectionnya. */
.radar-panel{
  position:relative;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(24px, 4vw, 56px);
  align-items:center;
  padding:clamp(24px, 4vw, 48px);
  border-radius:var(--shape-xl);
  background:var(--md-surface-container);
  border:1px solid var(--md-primary-container);
  box-shadow:var(--elevation-2), var(--glow-primary-soft);
}
.radar-chart svg{ width:100%; height:auto; display:block; }
.radar-chart svg .radar-fill{
  filter:drop-shadow(0 0 14px color-mix(in srgb, var(--md-primary) 45%, transparent));
}

/* Panel ini satu-satunya yang masuk layar dengan skala, bukan geser —
   ia jangkar visual sectionnya, jadi kemunculannya dibuat terasa
   berbeda dari kartu lain, seperti layar yang menyala. Begitu terlihat,
   garis kebutuhan proyek "digambar", area cakupan tumbuh dari pusat
   (memakai .v-fill yang sama dipakai visual pilar), lalu lima titik
   kandidat muncul menyusul satu-satu. */
@media (prefers-reduced-motion: no-preference){
  .js .radar-panel.reveal{ opacity:0; transform:scale(0.96); }
  .js .radar-panel.reveal.in-view{ opacity:1; transform:none; }

  /* Bukan draw-in via dashoffset: garis ini garis putus-putus "6 5"
     yang sengaja dibedakan dari cakupan tim yang solid. Dashoffset
     akan menyatukan seluruh keliling jadi satu goresan panjang begitu
     animasinya selesai, menghapus pembeda dashed/solid itu permanen.
     Fade polos menjaga pola dashnya utuh setelah reveal beres. */
  .radar-outline{
    opacity:0;
    transition:opacity 700ms linear 150ms;
  }
  .js .radar-panel.in-view .radar-outline{ opacity:1; }

  .radar-dots circle{
    opacity:0; transform:scale(0); transform-box:fill-box; transform-origin:center;
    transition:opacity var(--dur-short) linear,
               transform var(--dur-medium) var(--ease-spring);
  }
  .js .radar-panel.in-view .radar-dots circle{ opacity:1; transform:scale(1); }
  .radar-dots circle:nth-child(1){ transition-delay:520ms; }
  .radar-dots circle:nth-child(2){ transition-delay:600ms; }
  .radar-dots circle:nth-child(3){ transition-delay:680ms; }
  .radar-dots circle:nth-child(4){ transition-delay:760ms; }
  .radar-dots circle:nth-child(5){ transition-delay:840ms; }
}
.radar-legend{ display:grid; gap:20px; }
.legend-item{ display:flex; gap:14px; align-items:flex-start; }
.legend-key{ flex-shrink:0; width:34px; height:20px; margin-top:2px; }
.legend-item b{ display:block; font-size:14.5px; color:var(--md-on-surface); margin-bottom:2px; }
.legend-item span{ font-size:13.5px; }
.radar-note{
  padding-top:20px;
  border-top:1px solid var(--md-outline-variant);
  font-size:13.5px;
}
@media (max-width:820px){
  .radar-panel{ grid-template-columns:1fr; }
  .radar-chart{ max-width:420px; margin:0 auto; }
}

/* =========================================================
   12. TIM
   ========================================================= */
.team-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.team-card{
  padding:30px 26px;
  box-shadow:var(--elevation-1);
  transition:background var(--dur-short) var(--ease-emphasized),
             border-color var(--dur-short) var(--ease-emphasized),
             border-radius var(--dur-medium) var(--ease-spring),
             box-shadow var(--dur-short) var(--ease-emphasized),
             opacity var(--dur-long) var(--ease-decelerate),
             transform var(--dur-long) var(--ease-decelerate);
}
.team-card:hover,
.team-card:focus-within{
  background:var(--md-surface-high);
  border-color:var(--md-primary-container);
  border-radius:var(--shape-xl);
  box-shadow:var(--elevation-2);
}
/* Warna avatar mengikuti fakultas sungguhan (bukan warna acak),
   jadi tiga kartu identik berhenti terbaca sebagai satu templat
   yang di-copy-paste tiga kali. */
.team-avatar{
  width:56px; height:56px; margin-bottom:18px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--shape-l);
  background:var(--md-primary-container);
  color:var(--md-on-primary-container);
  font-family:var(--font-display); font-size:24px;
  transition:border-radius var(--dur-medium) var(--ease-spring);
}
.team-avatar--tertiary{
  background:var(--md-tertiary-container);
  color:var(--md-on-tertiary-container);
}
.team-card:hover .team-avatar,
.team-card:focus-within .team-avatar{ border-radius:var(--shape-full); }
.team-name{ font-family:var(--font-display); font-size:20px; font-weight:500; color:var(--md-on-surface); }
.team-role{ margin-top:6px; font-size:13.5px; }
.team-faculty{ display:block; color:var(--md-outline); }


/* =========================================================
   13. LOG STATUS
   ========================================================= */
.log-list{ max-width:720px; border-top:1px solid var(--md-outline-variant); }
.log-line{
  display:grid; grid-template-columns:104px 1fr auto; gap:18px; align-items:baseline;
  padding:18px 0; border-bottom:1px solid var(--md-outline-variant);
  font-family:var(--font-mono); font-size:13px;
}
.log-tag{
  font-size:11px; letter-spacing:0.06em;
  display:inline-flex; align-items:center; gap:7px;
}
.log-tag .pulse-dot{ margin-bottom:-1px; }
.log-tag.active{ color:var(--md-primary); }
.log-tag.queued{ color:var(--md-outline); }
.log-desc{ color:var(--md-on-surface-variant); }
.log-note{ color:var(--md-outline); font-size:12px; }
.log-footnote{ margin-top:24px; font-size:13px; color:var(--md-outline); }
@media (max-width:560px){
  .log-line{ grid-template-columns:1fr auto; }
  .log-tag{ grid-column:1 / -1; }
}

/* =========================================================
   14. FOOTER
   ========================================================= */
footer{ padding:clamp(64px, 8vw, 96px) 0 40px; border-top:1px solid var(--md-outline-variant); }
.footer-top{
  display:flex; flex-wrap:wrap; gap:48px;
  justify-content:space-between; align-items:flex-start;
  padding-bottom:48px; border-bottom:1px solid var(--md-outline-variant);
}
.footer-headline{ max-width:420px; }
.footer-top .waitlist{ max-width:380px; width:100%; }
.footer-top .field{ flex-basis:170px; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  padding-top:28px; font-size:13px; color:var(--md-outline);
}
.footer-links{ display:flex; gap:6px; flex-wrap:wrap; }
.footer-links a{
  padding:8px 14px; border-radius:var(--shape-full);
  text-decoration:none; color:var(--md-on-surface-variant); font-size:13px;
  transition:background var(--dur-short) var(--ease-emphasized),
             color var(--dur-short) var(--ease-emphasized);
}
.footer-links a:hover{ background:var(--md-surface-high); color:var(--md-primary); }

/* =========================================================
   14b. LAYAR KECIL — DERET YANG DIGESER

   Empat kelompok kartu di halaman ini kalau ditumpuk semua akan jadi
   satu kolom sepanjang lima belas layar dan terasa monoton. Di bawah
   860px keempatnya berubah jadi deret yang digeser menyamping dengan
   scroll-snap. Untuk rantai dan fase 4C ini bukan cuma soal ruang:
   keduanya memang urutan yang terbaca kiri ke kanan, jadi arah
   horizontal justru mengembalikan maknanya.

   Kartu dibuat 78% lebar layar supaya tepi kartu berikutnya mengintip,
   dan intipan itulah petunjuk bahwa deretnya masih berlanjut.
   ========================================================= */
@media (max-width:860px){
  .chain, .flow, .pillar-cols, .team-grid{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    /* cegah gesekan mendatar memicu tombol kembali peramban */
    overscroll-behavior-x:contain;
    /* deret dibiarkan menyentuh tepi layar, tapi kartu pertama
       tetap sejajar dengan teks di atasnya */
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    scroll-padding-inline:var(--gutter);
    padding-block-end:4px;
    scrollbar-width:none;
  }
  .chain::-webkit-scrollbar, .flow::-webkit-scrollbar,
  .pillar-cols::-webkit-scrollbar, .team-grid::-webkit-scrollbar{ display:none; }

  .chain > *, .flow > *, .pillar-cols > *, .team-grid > *{
    scroll-snap-align:start;
    flex:0 0 auto;
    width:min(78%, 300px);
  }
  .team-grid > *{ width:min(62%, 230px); }

  /* Penyambung putus-putus rantai kembali mendatar seperti di desktop. */
  .chain-step:not(:last-child)::after{ display:block; right:-13px; }

  /* .flow di desktop adalah satu kotak dengan sekat di dalamnya.
     Sebagai deret, tiap fase harus berdiri sendiri sebagai kartu. */
  .flow{
    border:none; background:none; border-radius:0;
    overflow-x:auto; overflow-y:hidden;
  }
  .flow-step{
    border:1px solid var(--md-primary-container);
    border-radius:var(--shape-m);
    background:var(--md-surface-container);
  }

  /* Titik penanda posisi, nol JavaScript. Baru didukung Chrome 135+
     dan Safari 18.2+, jadi dipagari @supports; tanpa dukungan, intipan
     kartu berikutnya tetap jadi petunjuk. */
  @supports selector(::scroll-marker){
    .chain, .flow, .pillar-cols, .team-grid{ scroll-marker-group:after; }
    .chain::scroll-marker-group, .flow::scroll-marker-group,
    .pillar-cols::scroll-marker-group, .team-grid::scroll-marker-group{
      display:flex; justify-content:center; gap:8px; padding-top:18px;
    }
    .chain > *::scroll-marker, .flow > *::scroll-marker,
    .pillar-cols > *::scroll-marker, .team-grid > *::scroll-marker{
      content:''; width:7px; height:7px; border-radius:var(--shape-full);
      background:var(--md-outline-variant);
      transition:background var(--dur-short) var(--ease-emphasized);
    }
    .chain > *::scroll-marker:target-current,
    .flow > *::scroll-marker:target-current,
    .pillar-cols > *::scroll-marker:target-current,
    .team-grid > *::scroll-marker:target-current{ background:var(--md-primary); }
  }
}

/* Petunjuk bahwa deret masih berlanjut, untuk peramban yang belum
   mendukung ::scroll-marker. Tepi kanan dipudarkan sedikit. */
@media (max-width:860px){
  .chain, .flow, .pillar-cols, .team-grid{
    -webkit-mask-image:linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
            mask-image:linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
  }
}

/* Umpan balik sentuh. Di perangkat tanpa hover, satu-satunya cara kartu
   terasa hidup adalah bereaksi saat ditekan. */
@media (hover:none){
  .chain-step, .flow-step, .pillar-col, .team-card{
    transition:transform var(--dur-short) var(--ease-emphasized),
               background var(--dur-short) var(--ease-emphasized),
               box-shadow var(--dur-short) var(--ease-emphasized);
  }
  .chain-step:active, .flow-step:active,
  .pillar-col:active, .team-card:active{
    transform:scale(0.975);
    background:var(--md-surface-high);
    box-shadow:var(--elevation-2);
  }
}

/* Gulungan mendatar tidak dianimasikan untuk yang meminta gerak minimal. */
@media (prefers-reduced-motion: reduce){
  .chain, .flow, .pillar-cols, .team-grid{ scroll-behavior:auto; }
}

/* =========================================================
   14c. BILAH AJAKAN MELEKAT (hanya layar kecil)

   Di ponsel halaman ini lebih dari lima ribu piksel, dan formnya
   hanya ada di ujung paling atas dan paling bawah. Bilah ini muncul
   setelah hero terlewat dan menyingkir lagi saat form footer terlihat,
   supaya tidak ada dua ajakan bersamaan di layar.
   ========================================================= */
.cta-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:none;
  align-items:center; gap:14px;
  padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background:var(--md-surface-high); box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
  border-top:1px solid var(--md-outline-variant);
  transform:translateY(100%);
  transition:transform var(--dur-medium) var(--ease-emphasized);
}
.cta-bar.is-up{ transform:none; }
.cta-bar span{ flex:1 1 auto; font-size:13.5px; line-height:1.35; }
.cta-bar .btn{ flex:0 0 auto; min-height:44px; padding:0 20px; font-size:14px; }
@media (max-width:860px){ .js .cta-bar{ display:flex; } }
@media (prefers-reduced-motion: reduce){
  .cta-bar{ transition:none; }
}

/* =========================================================
   15. LAYAR KECIL

   Bukan sekadar mengecilkan tata letak desktop. Dua hal yang
   berubah sifatnya: panel kaca hero dilepas sama sekali, dan
   form berhenti berbagi baris.
   ========================================================= */

/* -- tablet & ponsel besar -- */
@media (max-width:720px){
  .hero{ padding:140px 0 80px; min-height: auto; justify-content: flex-start; }

  /* Ritme tegak diseragamkan. Sebelumnya jarak di dalam satu section
     berloncatan 56 / 14 / 64 / 16px, dan tiap sambungan antar section
     menyisakan 144px ruang kosong. */
  section{ padding:60px 0; }
  .section-head{ margin-bottom:32px; }
  .flow{ margin-top:36px; }
  .chain-loss{ margin-top:14px; }
  .chain-caption{ margin-top:14px; }
  footer{ padding:60px 0 32px; }

  /* Panel kaca sudah dilepas universal (lihat bagian 7. HERO), jadi
     tidak ada lagi yang perlu ditambal khusus mobile di sini. Titik
     blip tetap dimatikan hanya di layar sempit: tiga titik itu
     diposisikan mengikuti bearing section Inti Produk untuk layar
     lebar, dan di layar sempit posisinya kebetulan jatuh di atas teks. */
  .blip{ display:none; }

  .section-head{ margin-bottom:36px; }
  .radar-panel{ padding:24px 20px; border-radius:var(--shape-l); }
  .pillar-col{ padding:24px 20px; }
}

/* -- ponsel -- */
@media (max-width:560px){
  /* 34px terlalu besar untuk lebar 350px: judulnya pecah jadi
     lima baris dan kehilangan bentuknya. */
  .display-large{ font-size:30px; letter-spacing:-0.01em; }
  .headline-large{ font-size:25px; }
  .title-large{ font-size:20px; }
  .body-large{ font-size:15px; }

  /* Field dan tombol berhenti berbagi baris. Sebelumnya keduanya
     membungkus, dan tombol yang selebar isinya berdiri sendirian
     di baris kedua sehingga terlihat seperti kesalahan. */
  .waitlist-form{ flex-direction:column; gap:12px; }
  /* Dibatasi ke dalam form: kalau ditulis sebagai .field,.btn saja,
     tombol di bilah ajakan melekat ikut jadi selebar layar. */
  .waitlist-form .field, .waitlist-form .btn{ width:100%; flex:none; }
  .hero .waitlist{ margin-top:0; }
  .footer-top .field{ flex-basis:auto; }

  /* Panah scroll tidak berguna di layar yang jelas-jelas digulung,
     dan pada layar pendek ia bertabrakan dengan form. */
  .scroll-cue{ display:none; }

  .form-confirm{ padding:16px 18px; }
  .log-line{ font-size:12px; gap:12px; }
  .radar-legend{ gap:16px; }
  .footer-top{ gap:32px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:20px; }
  .footer-links{ margin-left:-14px; }
}

/* -- ponsel sempit -- */
@media (max-width:420px){
  .topbar-inner{ height:60px; }
  .wordmark{ font-size:18px; }
  /* "Dalam pengembangan" bersaing ruang dengan wordmark di sini. */
  .chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px 4px 10px;
  border-radius:var(--shape-full);
  border:1px solid rgba(217, 173, 115, 0.2);
  background:transparent;
  color:var(--md-on-surface-variant);
  font-size:11.5px; font-weight:500; letter-spacing:0.03em;
  white-space:nowrap;
}
  .display-large{ font-size:28px; }
}