/* Digiform landing page. Menggantikan bootstrap + animate + boxicons + meanmenu.
   Sistem visual mengikuti acuan yang diberikan pemilik produk: latar abu muda,
   satu kartu putih membulat besar sebagai kanvas, nav melayang berbentuk pil,
   tombol pil, bayangan sangat halus, dan cincin orbit berisi chip integrasi.
   Arah lengkap ada di DESIGN.md. */

/* ── Token ─────────────────────────────────────────────────────────────── */
:root {
  --page:        #F1F1F1;
  --card:        #FFFFFF;
  --surface:     #F7F7F8;
  --ink:         #0A0A0A;
  --ink-mid:     #363A40;
  --ink-dim:     #5C6169;
  --line:        #E9E9EB;
  --line-strong: #DCDCE0;
  --blue:        #1F57D6;
  --blue-soft:   #EAF0FE;
  /* Oranye logo, diukur dari piksel berkas logo. */
  --accent:      #F95F04;
  --accent-ink:  #A63F03;
  /* Aksi utama memakai oranye logo persis #F95F04 dengan teks putih. Ini
     keputusan sadar pemilik produk: putih di atasnya 3.15:1, lolos ambang teks
     besar (3:1) tapi gagal ambang teks biasa (4.5:1). Jangan "diperbaiki"
     tanpa persetujuan; lihat catatan di DESIGN.md. */
  --brand:       #F95F04;
  --on-brand:    #FFFFFF;
  --brand-press: #C44B03;
  --on-brand-dim:#FFFFFF;
  --accent-wash: #FFEFE6;
  --ok:          #07704B;

  /* Inter: font antarmuka standar dari Google Fonts. Satu keluarga untuk
     judul dan isi; perbedaannya lewat berat, bukan lewat dua tipografi. */
  --font-head: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --r-card: 28px;
  --r-box:  18px;
  --r-pill: 999px;
  --r-sm:   10px;

  --sh-soft: 0 1px 2px rgba(10,10,10,.04), 0 8px 24px rgba(10,10,10,.06);
  --sh-chip: 0 2px 6px rgba(10,10,10,.06), 0 10px 26px rgba(10,10,10,.08);

  --gut: clamp(18px, 4vw, 56px);
  --measure: 1160px;
  --section-y: clamp(56px, 7vw, 104px);
}

:root[data-theme="dark"] {
  --page:        #0D0D0E;
  --card:        #161618;
  --surface:     #1E1E21;
  --ink:         #F5F5F6;
  --ink-mid:     #C3C4C8;
  --ink-dim:     #93959B;
  --line:        #27272A;
  --line-strong: #34343A;
  --blue:        #7EA6FF;
  --blue-soft:   #1B2436;
  --accent:      #F95F04;
  --accent-ink:  #FB8B3D;
  --brand:       #F95F04;
  --on-brand:    #FFFFFF;
  --brand-press: #C44B03;
  --on-brand-dim:#FFFFFF;
  --accent-wash: #2C1808;
  --ok:          #46B98A;
  --sh-soft: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --sh-chip: 0 2px 6px rgba(0,0,0,.45), 0 10px 26px rgba(0,0,0,.4);
  color-scheme: dark;
}

/* ── Dasar ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--page); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding: clamp(8px, 1.6vw, 26px);
  /* clip, bukan hidden: overflow:hidden menjadikan elemen ini wadah gulir dan
     itu mematahkan position:sticky pada .head di dalamnya. clip mengekang isi
     tanpa membuat wadah gulir. */
  overflow-x: clip;
}

/* Kanvas: satu kartu putih membulat, persis seperti acuan. */
/* overflow:clip supaya sudut membulatnya tetap mengekang isi, tapi kartu ini
   tidak menjadi scrollport terdekat bagi .head yang sticky. */
.card { max-width: 1640px; margin-inline: auto; background: var(--card); border-radius: var(--r-card); overflow: clip; }

h1, h2, h3 { font-family: var(--font-head); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; }
h1 { font-size: clamp(38px, 6.4vw, 76px); }
h2 { font-size: clamp(27px, 3.7vw, 42px); }
h3 { font-size: clamp(17px, 1.7vw, 19px); letter-spacing: -.012em; }
p  { text-wrap: pretty; }

img, svg { max-width: 100%; display: block; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; }

td, th, .fig__n { font-variant-numeric: tabular-nums; }

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

.skip { position: absolute; left: 30px; top: -70px; z-index: 100; background: var(--brand); color: var(--on-brand); padding: 12px 18px; border-radius: var(--r-pill); font-weight: 700; }
.skip:focus { top: 14px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gut); }

/* ── Tombol pil ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px;
  font-family: var(--font-body); font-size: 15.5px; font-weight: 600;
  border: 1px solid transparent; border-radius: var(--r-pill);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn--brand { background: var(--brand); color: var(--on-brand); }
.btn--brand:hover { background: var(--brand-press); }
.btn--white { background: var(--card); color: var(--ink); border-color: var(--line-strong); box-shadow: 0 1px 2px rgba(10,10,10,.04); }
.btn--white:hover { border-color: var(--ink-dim); }
.btn--sm { min-height: 44px; padding: 9px 18px; font-size: 15px; }

.tlink { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-weight: 700; color: var(--ink); text-decoration: none; }
.tlink::after { content: ""; width: 17px; height: 17px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: translate .16s ease; }
.tlink:hover { color: var(--blue); }
.tlink:hover::after { translate: 3px 0; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; }
.hero .actions { margin-top: 30px; }

/* ── Nav pil melayang ──────────────────────────────────────────────────── */
.head { position: sticky; top: 0; z-index: 60; padding: 16px var(--gut) 0; }
.head__in {
  display: flex; align-items: center; gap: 18px;
  max-width: var(--measure); margin-inline: auto;
  padding: 10px 10px 10px 22px;
  background: color-mix(in srgb, var(--card) 86%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: var(--r-box);
  box-shadow: var(--sh-soft);
}
.head__logo { flex: none; display: flex; align-items: center; min-height: 44px; }
.head__logo img { flex: none; }
.head__logo img { height: 26px; width: auto; }
.logo--dark { display: none; }
:root[data-theme="dark"] .logo--light { display: none; }
:root[data-theme="dark"] .logo--dark { display: block; }

.nav { margin-inline: auto; }
.nav > ul { display: flex; align-items: center; gap: 2px; }
.nav a, .nav__top {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 8px 14px;
  font-family: var(--font-body); font-size: 15.5px; font-weight: 600; color: var(--ink);
  text-decoration: none; background: none; border: 0; cursor: pointer; border-radius: var(--r-pill);
}
.nav a:hover, .nav__top:hover { background: var(--surface); }
.nav__top::after { content: ""; width: 6px; height: 6px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; rotate: 45deg; translate: 0 -2px; }
.nav__top[aria-expanded="true"]::after { rotate: -135deg; translate: 0 1px; }
.nav__has { position: relative; }
.nav__menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 10; min-width: 258px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-box); box-shadow: var(--sh-soft); }
/* Satu baris per item submenu: label terlipat dua sulit dipindai. Lebar menu
   mengikuti label terpanjang, jadi label dijaga tetap pendek di HTML. */
.nav__menu a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 14px; font-weight: 600; white-space: nowrap; border-radius: var(--r-sm); }
.nav__menu[hidden] { display: none; }

/* Lencana NEW biru, seperti pada acuan. */
.tagnew { padding: 2px 7px; border-radius: var(--r-pill); background: var(--blue-soft); color: var(--blue); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

.head__cta { display: flex; align-items: center; gap: 8px; }
.nav-login { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 16px; font-size: 15px; font-weight: 700; text-decoration: none; border: 1px solid var(--line-strong); border-radius: var(--r-pill); }
.nav-login:hover { background: var(--surface); }
.iconbtn { width: 44px; min-width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 1px solid var(--line-strong); border-radius: var(--r-pill); color: var(--ink); cursor: pointer; }
.iconbtn:hover { background: var(--surface); }
.iconbtn svg { width: 17px; height: 17px; }
.theme__moon { display: none; }
:root[data-theme="dark"] .theme__sun { display: none; }
:root[data-theme="dark"] .theme__moon { display: block; }
.burger { display: none; }
.nav__cta { display: none; }

/* Pilihan bahasa. Dua tautan biasa, bukan tombol berskrip: /?lang=xx disetel
   middleware ke cookie lalu dialihkan kembali, jadi tetap jalan tanpa
   JavaScript. Bahasa aktif diberi isi gelap seperti tombol tema, satu-satunya
   penanda yang dibutuhkan dua pilihan. */
.lang { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-pill); }
.lang__opt { display: grid; place-items: center; min-width: 44px; min-height: 42px; padding: 0 10px; font-size: 13.5px; font-weight: 700; color: var(--ink-dim); text-decoration: none; border-radius: var(--r-pill); }
.lang__opt:hover { color: var(--ink); background: var(--surface); }
.lang__opt[aria-current="true"] { color: var(--card); background: var(--ink); }
.nav__lang { display: none; }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero { position: relative; padding-block: clamp(52px, 7vw, 96px) clamp(40px, 5vw, 72px); text-align: center; overflow: hidden; }
.hero__in { position: relative; z-index: 2; max-width: 940px; margin-inline: auto; padding-inline: var(--gut); }
/* Judul hero dipatok dua baris lewat <br>; ukurannya diturunkan agar baris
   terpanjang, "Catat pekerjaan lapangan", tetap muat dari 320px sampai desktop. */
.hero h1 { margin-top: 20px; font-size: clamp(22px, 7vw, 66px); }
.hero__sub { margin-top: 22px; font-size: clamp(16.5px, 1.6vw, 19px); color: var(--ink-dim); max-width: 46em; margin-inline: auto; }
.hero .actions { justify-content: center; margin-top: 30px; }

/* Baris fakta di atas judul: angka produk yang benar, bukan skor ulasan karangan. */
.facts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 22px; font-size: 15px; color: var(--ink-dim); }
.facts b { color: var(--ink); font-weight: 700; }
.facts li { display: inline-flex; align-items: center; gap: 8px; }
.facts svg { width: 17px; height: 17px; flex: none; color: var(--accent); }  /* oranye logo, 3.15:1 di atas kartu putih */

/* ── Cincin orbit ──────────────────────────────────────────────────────── */
/* Dekorasi murni: aria-hidden dan tidak pernah menghalangi klik. */
.orbit { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.orbit i { position: absolute; left: 50%; top: 44%; translate: -50% -50%; border: 1px solid var(--line); border-radius: 50%; display: block; }
.orbit i:nth-child(1) { width: 660px;  height: 660px;  }
.orbit i:nth-child(2) { width: 920px;  height: 920px;  border-left-color: #3B6FD4; border-top-color: color-mix(in srgb, #3B6FD4 35%, transparent); }
.orbit i:nth-child(3) { width: 1200px; height: 1200px; border-bottom-color: color-mix(in srgb, #128C4A 42%, transparent); }
.orbit i:nth-child(4) { width: 1500px; height: 1500px; border-right-color: #7C3AED; border-bottom-color: color-mix(in srgb, #7C3AED 30%, transparent); }
.orbit i:nth-child(5) { width: 1820px; height: 1820px; border-top-color: color-mix(in srgb, #D97757 40%, transparent); }

.chips-orbit { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.chip { position: absolute; width: 66px; height: 66px; display: grid; place-items: center; background: var(--card); border-radius: 50%; box-shadow: var(--sh-chip); color: var(--ink); }
.chip svg { width: 27px; height: 27px; stroke-width: 1.9; }
/* Tiap chip memakai warna yang khas untuk kemampuannya. Semua nilai lolos 3:1
   terhadap chip putih supaya tetap terbaca, bukan sekadar meriah. */
.chip:nth-of-type(1)  { color: #1D6F42; }  /* Excel dan CSV    */
.chip:nth-of-type(2)  { color: #D22B24; }  /* PDF              */
.chip:nth-of-type(3)  { color: #3B6FD4; }  /* Email            */
.chip:nth-of-type(4)  { color: #128C4A; }  /* WhatsApp         */
.chip:nth-of-type(5)  { color: #0B7FB8; }  /* Scan QR          */
.chip:nth-of-type(6)  { color: #7C3AED; }  /* REST API         */
.chip:nth-of-type(7)  { color: #BF5B38; }  /* Foto dan kamera  */
.chip:nth-of-type(8)  { color: #0E7490; }  /* GPS              */
.chip:nth-of-type(9)  { color: #4338CA; }  /* Tanda tangan     */
.chip:nth-of-type(10) { color: #8A6410; }  /* Offline          */
.chip:nth-of-type(1)  { left: 19%;  top: 15%; }
.chip:nth-of-type(2)  { left: 11%;  top: 32%; }
.chip:nth-of-type(3)  { left: 21%;  top: 49%; }
.chip:nth-of-type(4)  { left: 6%;   top: 62%; }
.chip:nth-of-type(5)  { left: 22%;  top: 76%; }
.chip:nth-of-type(6)  { right: 19%; top: 15%; }
.chip:nth-of-type(7)  { right: 11%; top: 32%; }
.chip:nth-of-type(8)  { right: 21%; top: 49%; }
.chip:nth-of-type(9)  { right: 6%;  top: 62%; }
.chip:nth-of-type(10) { right: 22%; top: 76%; }
@media (max-width: 1180px) { .chip:nth-of-type(4), .chip:nth-of-type(9) { display: none; } }
@media (max-width: 900px)  { .chips-orbit { display: none; } .orbit i:nth-child(n+4) { display: none; } }

/* ── Ringkasan bertumpuk ───────────────────────────────────────────────── */
.showcase { position: relative; z-index: 2; margin: clamp(38px, 4vw, 58px) auto 0; max-width: 480px; padding-inline: var(--gut); }
.showcase__glow {
  position: absolute; left: 50%; top: 26%; translate: -50% -50%;
  width: 120%; aspect-ratio: 1.5; z-index: -1; border-radius: 50%;
  background:
    radial-gradient(45% 55% at 28% 45%, rgba(37,99,235,.22), transparent 70%),
    radial-gradient(45% 55% at 72% 55%, rgba(139,92,246,.18), transparent 70%),
    radial-gradient(40% 50% at 50% 72%, rgba(34,211,238,.16), transparent 70%);
  filter: blur(36px);
}
.showcase__box { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-box); box-shadow: var(--sh-soft); overflow: hidden; text-align: left; }
.showcase__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; }
.showcase__row + .showcase__row { border-top: 1px solid var(--line); }
.showcase__k { flex: none; font-size: 14.5px; line-height: 1.45; color: var(--ink-dim); white-space: nowrap; }
.showcase__v { font-size: 14.5px; line-height: 1.45; font-weight: 700; text-align: right; }

/* ── Pita integrasi ────────────────────────────────────────────────────── */
/* Padding bawah strip sengaja kecil di layar sempit. Bagian berikutnya
   sudah membawa jaraknya sendiri lewat --section-y, jadi 44px di sini
   menumpuk jadi seratus piksel kosong tepat di bawah chip integrasi. */
.strip { padding-block: clamp(28px, 3.5vw, 44px) clamp(16px, 5vw, 72px); text-align: center; }
.strip__t { font-size: 14.5px; color: var(--ink-dim); }
.strip__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 36px; margin-top: 24px; }
.strip__list li { display: inline-flex; align-items: center; gap: 9px; font-size: 15.5px; font-weight: 700; color: var(--ink-mid); }
.strip__list svg { width: 20px; height: 20px; flex: none; }

/* ── Kepala section ────────────────────────────────────────────────────── */
.clause { display: inline-flex; align-items: center; gap: 9px; padding: 6px 15px 6px 7px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); }
.clause__n { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; background: var(--brand); color: var(--on-brand); border-radius: var(--r-pill); font-family: var(--font-head); font-size: 12.5px; font-weight: 700; }

.clause__t { font-size: 12.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-mid); }

.lead { margin-top: 22px; max-width: 58ch; }
.lead h2 { max-width: 20ch; }
.lead p { margin-top: 14px; color: var(--ink-dim); }
/* Sorotan oranye dalam judul, satu kali saja di halaman (Ringkasan), mengikuti
   materi promosi pemilik produk. Oranye logo persis, atas permintaan pemilik
   produk: 3.15:1 di atas putih, cukup karena hanya dipakai di judul besar
   (ambang teks besar 3:1). Jangan dipakai untuk teks isi. */
.hl { font-style: normal; color: var(--accent); }

/* Nav menempel setinggi sekitar 82px, jadi target anchor diberi jarak supaya
   judulnya tidak mendarat di balik nav saat dilompati dari menu. */
section[id], [id] { scroll-margin-top: 100px; }

section { padding-block: var(--section-y); }
.band + .band { border-top: 1px solid var(--line); }

/* ── Tabel ─────────────────────────────────────────────────────────────── */
.sheet-scroll { overflow-x: auto; margin-top: 32px; border: 1px solid var(--line); border-radius: var(--r-box); }
.sheet { width: 100%; border-collapse: collapse; text-align: left; background: var(--card); }
.sheet th, .sheet td { padding: 16px 20px; vertical-align: top; border-bottom: 1px solid var(--line); }
.sheet tbody tr:last-child td { border-bottom: 0; }
.sheet tfoot td { border-bottom: 0; }
.sheet thead th { background: var(--surface); font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; }
.sheet tbody tr:hover { background: var(--surface); }
.sheet .c-n { width: 58px; color: var(--ink-dim); font-weight: 700; font-size: 14px; }
.sheet .c-tick { width: 58px; text-align: center; }
.sheet h3 { font-size: 16.5px; }
.sheet p { margin-top: 5px; font-size: 14.5px; color: var(--ink-dim); max-width: 64ch; }
.sheet .c-meta { font-size: 14.5px; color: var(--ink-dim); }
.sheet__link { padding-top: 6px; }
.sheet--wide { min-width: 640px; }
.sheet--plans { min-width: 790px; }

.scroll-hint { display: none; margin-top: 26px; font-size: 14px; color: var(--ink-dim); }
@media (max-width: 800px) { .scroll-hint { display: block; } .scroll-hint + .sheet-scroll { margin-top: 10px; } }

.tick { flex: none; display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--accent-wash); color: var(--accent-ink); font-size: 10.5px; font-weight: 900; line-height: 1; }
.tick::before { content: ""; width: 11px; height: 11px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E") center/contain no-repeat; }

/* Lingkaran bernomor memakai bentuk yang sama dengan .tick, hanya isinya
   angka. Dipakai ketika butirnya memang berurutan, bukan daftar setara. */
.no { flex: none; display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--accent-wash); color: var(--accent-ink); font-size: 11px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }

.checks { display: grid; gap: 11px; }
.checks li { display: grid; grid-template-columns: 19px 1fr; gap: 12px; align-items: start; font-size: 15px; color: var(--ink-dim); }
.checks .tick, .checks .no { margin-top: 2px; }

/* ── Peragaan prompt AI ────────────────────────────────────────────────────
   Satu kotak prompt yang isinya berganti sendiri, dan hasil di bawahnya ikut
   berganti mengikuti prompt itu. Digambar dengan HTML dan CSS, bukan tangkapan
   layar, karena layarnya masih dikembangkan. Warnanya memakai token yang sama
   dengan seluruh halaman sehingga ikut tema terang dan gelap. */
.aidemo { margin-top: 32px; }
.aidemo__stage { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-box); padding: 18px; }
@media (min-width: 760px) { .aidemo__stage { padding: 22px 24px; } }

.aidemo__box { padding: 13px 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.aidemo__hint { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-dim); }
.aidemo__type { margin: 8px 0 0; min-height: 3em; font-size: 15px; line-height: 1.5; color: var(--ink); }
.aidemo__caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; background: var(--accent); vertical-align: -2px; }
.aidemo__go { display: inline-block; margin-top: 12px; padding: 8px 16px; background: var(--brand); color: var(--on-brand); border-radius: var(--r-pill); font-size: 13px; font-weight: 700; }
.aidemo__go.is-press { transform: translateY(1px); }

.aidemo__arrow { display: grid; place-items: center; height: 30px; color: var(--ink-dim); }

/* Tinggi dikunci supaya isi halaman di bawahnya tidak melompat tiap kali
   hasilnya berganti. Nilainya muat untuk keluaran terpanjang. */
.aidemo__out { min-height: 232px; opacity: 0; translate: 0 8px; transition: opacity .34s ease, translate .34s ease; }
.aidemo__out.is-in { opacity: 1; translate: 0 0; }

.aidemo__fields { margin: 0; padding: 0; list-style: none; display: grid; }
.aidemo__fields li { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: center; padding: 10px 2px; font-size: 14px; color: var(--ink-mid); border-top: 1px solid var(--line); }
.aidemo__fields li:first-child { border-top: 0; }
.aidemo__fields li span { justify-self: start; padding: 3px 9px; background: var(--accent-wash); color: var(--accent-ink); border-radius: var(--r-pill); font-size: 11px; font-weight: 800; }

.aidemo__grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.aidemo__w { padding: 12px 13px; border: 1px solid var(--line); border-radius: 12px; }
.aidemo__w > span { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-dim); }
.aidemo__w--wide { grid-column: 1 / -1; }
.aidemo__bars { display: flex; align-items: flex-end; gap: 5px; height: 48px; margin-top: 10px; }
.aidemo__bars b { flex: 1; max-width: 30px; background: var(--accent); border-radius: 3px 3px 0 0; opacity: .85; }
.aidemo__bars b:nth-child(even) { opacity: .45; }
.aidemo__line { display: block; width: 100%; height: 48px; margin-top: 10px; }

.aidemo__read { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.aidemo__read span { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-dim); }
.aidemo__read strong { font-family: var(--font-head); font-size: 30px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.aidemo__read em { font-style: normal; font-size: 13.5px; color: var(--ink-dim); }

.aidemo__answer { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.aidemo__answer p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
.aidemo__answer em { font-style: normal; font-size: 13px; color: var(--ink-dim); }

.aidemo__dots { display: flex; justify-content: center; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; }
.aidemo__dots li { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); transition: background-color .25s ease, width .25s ease; }
.aidemo__dots li.is-now { width: 22px; border-radius: var(--r-pill); background: var(--brand); }

.aidemo__note { margin: 14px 0 0; font-size: 13px; color: var(--ink-dim); }

@media (prefers-reduced-motion: no-preference) {
  .aidemo__caret { animation: dgf-caret 1.1s steps(1, end) infinite; }
}
@keyframes dgf-caret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* Tanpa JS, atau bila pembaca meminta gerak minimal, peragaan ini tetap
   menampilkan satu keadaan utuh: caret tidak berkedip dan hasilnya langsung
   terlihat, bukan kotak kosong. */
.aidemo__out:not(.is-in) { opacity: 1; translate: 0 0; }
.js .aidemo__out:not(.is-in) { opacity: 0; translate: 0 8px; }

/* ── Matriks paket ─────────────────────────────────────────────────────── */
.sheet--plans th:first-child, .sheet--plans td:first-child { min-width: 290px; }
.c-plan { width: 182px; text-align: center; vertical-align: middle; }
.sheet--plans thead .c-plan { font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--ink); white-space: normal; }
.sheet--plans thead .c-plan span { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-dim); }
.c-plan--pick { background: var(--blue-soft); }
.sheet tbody tr:hover .c-plan--pick, .sheet--plans thead .c-plan--pick { background: var(--blue-soft); }
.c-no span[aria-hidden] { color: var(--ink-dim); }
.sheet--plans tfoot td { border-top: 1px solid var(--line-strong); }
.sheet--plans tfoot .btn { width: 100%; }
.plan-flag { display: block; margin-bottom: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }

/* ── Register ──────────────────────────────────────────────────────────── */
.register { margin-top: 32px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 218px), 1fr)); }
.register li { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 8px; padding: 13px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 14.5px; }
.register li > span:first-child { color: var(--ink-dim); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.register li:hover { border-color: var(--line-strong); box-shadow: var(--sh-soft); }

/* ── Ringkasan: teks dan gambar sebelum-sesudah ────────────────────────── */
/* Foto checklist kertas dengan ponsel berisi formulir digital menumpang di
   sudut kiri bawahnya. Padding kiri-bawah pada figure memberi ruang bagi
   ponsel yang menjorok keluar foto, jadi tidak ada yang meluber. */
.split { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); } }
.split__fig { position: relative; margin: 0; padding: 0 0 8% 11%; }
.split__phone { position: absolute; left: 0; bottom: 0; width: 27%; }
.split__phone .dev__screen { aspect-ratio: 9 / 19; border-width: clamp(4px, .8vw, 7px); border-radius: clamp(14px, 2.4vw, 26px); }
.split__phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ── Manfaat ───────────────────────────────────────────────────────────── */
/* Foto dan teks berselang-seling kiri-kanan: section ini yang paling banyak
   dibaca pengambil keputusan, jadi iramanya sengaja dibedakan dari section
   tabel di belakang. Foto orang yang bekerja memberi gambaran siapa yang
   memakai aplikasinya. */
.benefits { display: grid; gap: clamp(36px, 5vw, 64px); margin-top: 40px; }
.benefit { display: grid; gap: 22px; align-items: center; }
.benefit__img { margin: 0; }
.photo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-box); background: var(--surface); }
.benefit h3 { font-size: clamp(21px, 2.3vw, 27px); line-height: 1.15; }
.benefit__body > p { margin-top: 12px; color: var(--ink-dim); }
.benefit .checks { margin-top: 18px; }
/* Foto stok orang di depan layar jarang memperlihatkan layarnya. Dasbor asli
   Digiform ditumpangkan di sudut kanan bawah foto, pola yang sama dengan
   ponsel di section Ringkasan, supaya yang dilihat pembaca memang produknya. */
.benefit__img--stack { position: relative; padding: 0 6% 10% 0; }
.stack__screen { position: absolute; right: 0; bottom: 0; width: 54%; }
.stack__screen .dev__screen { border-width: clamp(3px, .6vw, 6px); border-radius: clamp(8px, 1.2vw, 12px); }
.stack__screen img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
@media (min-width: 900px) {
  .benefit { grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 64px); }
  .benefit:nth-child(even) .benefit__img { order: 2; }
}

.gains__t { margin-top: clamp(48px, 6vw, 72px); font-size: clamp(19px, 1.9vw, 22px); }
.gains { display: grid; gap: 12px; margin-top: 18px; }
.gains li { padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-box); font-size: 15px; color: var(--ink-dim); }
.gains b { display: block; margin-bottom: 6px; font-size: 16.5px; color: var(--ink); }
@media (min-width: 700px) { .gains { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .gains { grid-template-columns: repeat(4, 1fr); } }

/* ── Tampilan di tiga perangkat ────────────────────────────────────────── */
/* Satu panggung berproporsi tetap, jadi posisi dalam persen tetap berlaku di
   semua lebar. Laptop di belakang, tablet dan ponsel menumpang di depan: urutan
   tumpuk itulah satu-satunya alasan bayangan dipakai di sini. Bingkainya hitam
   polos tanpa merek, cukup untuk membaca "ini perangkat" tanpa bersaing dengan
   isi layarnya. */
.devices { position: relative; max-width: 1040px; aspect-ratio: 16 / 10.4; margin: 40px auto 0; }
.dev { position: absolute; margin: 0; }
.dev__screen { overflow: hidden; background: #0A0A0A; border: clamp(4px, .9vw, 10px) solid #0A0A0A; box-shadow: var(--sh-chip); }
.dev__screen img { width: 100%; height: auto; }
:root[data-theme="dark"] .dev__screen { outline: 1px solid var(--line-strong); }

.dev--laptop { top: 0; left: 12%; width: 76%; }
.dev--laptop .dev__screen { border-radius: 14px 14px 4px 4px; }
.dev__base { height: clamp(8px, 1.4vw, 16px); margin-inline: -7%; background: linear-gradient(#C9CACE, #A9ABB0); border-radius: 0 0 16px 16px; }
:root[data-theme="dark"] .dev__base { background: linear-gradient(#3A3A40, #26262A); }

.dev--tablet { bottom: 3%; left: 0; width: 38%; z-index: 1; }
.dev--tablet .dev__screen { border-width: clamp(6px, 1.2vw, 13px); border-radius: clamp(12px, 2vw, 22px); }

/* Tangkapan layar ponsel lebih tinggi dari layarnya, jadi bagian bawahnya
   dipotong di bingkai, seperti layar yang belum digulir. */
.dev--phone { right: 4%; bottom: 0; width: 17%; z-index: 2; }
.dev--phone .dev__screen { aspect-ratio: 9 / 19; border-width: clamp(4px, .8vw, 8px); border-radius: clamp(16px, 2.6vw, 30px); }
.dev--phone .dev__screen img { height: 100%; object-fit: cover; object-position: top; }

.devices__cap { display: grid; gap: 10px; max-width: 1040px; margin: 28px auto 0; font-size: 15px; color: var(--ink-dim); }
.devices__cap b { display: block; color: var(--ink); font-weight: 700; }
@media (min-width: 760px) { .devices__cap { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* Di layar sempit, panggung bertumpuk membuat ponsel selebar jempol. Laptop
   tampil penuh di atas, tablet dan ponsel berdampingan di bawahnya. */
@media (max-width: 640px) {
  .devices { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 34%; align-items: end; gap: 22px 14px; }
  .dev { position: static; width: auto; }
  .dev--laptop { grid-column: 1 / -1; padding-inline: 5%; }
}

/* ── Penerapan ─────────────────────────────────────────────────────────── */
.cases { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 900px) { .cases { grid-template-columns: 1fr 1fr; } }
.case { padding: 26px 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-box); }
.case:hover { box-shadow: var(--sh-soft); }
.case__where { display: inline-block; padding: 4px 12px; margin-bottom: 13px; background: var(--surface); border-radius: var(--r-pill); font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mid); }
.case p { margin-top: 11px; font-size: 15px; color: var(--ink-dim); }
.case ul { display: grid; gap: 9px; margin-top: 16px; }
.case li { display: grid; grid-template-columns: 19px 1fr; gap: 10px; align-items: start; font-size: 14.5px; color: var(--ink-dim); }
.case .tick { margin-top: 1px; }
/* Foto sektor menempel ke tepi atas kartu, supaya kartu terbaca sebagai satu
   cerita: siapa, tantangannya, lalu yang berubah. */
.case { overflow: hidden; }
.case__img { display: block; width: calc(100% + 48px); max-width: none; height: auto; aspect-ratio: 16 / 9; margin: -26px -24px 20px; object-fit: cover; background: var(--surface); }
.case .case__k { margin-top: 16px; font-size: 12.5px; font-weight: 800; color: var(--ink-mid); }
.case .case__k + p { margin-top: 4px; }
.case .case__k + ul { margin-top: 8px; }

.note { margin-top: 26px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-box); font-size: 15px; color: var(--ink-dim); }

/* ── Tanya jawab ───────────────────────────────────────────────────────── */
.faq { margin-top: 32px; border: 1px solid var(--line); border-radius: var(--r-box); overflow: hidden; background: var(--card); }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 24px; cursor: pointer; list-style: none; font-family: var(--font-head); font-size: clamp(16.5px, 1.8vw, 18.5px); font-weight: 700; letter-spacing: -.018em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); font-size: 17px; line-height: 1; color: var(--ink-mid); }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 24px 22px; max-width: 78ch; color: var(--ink-dim); }

/* ── Penutup ───────────────────────────────────────────────────────────── */
.close { padding-block: clamp(20px, 3vw, 40px) var(--section-y); }
.close__in { background: var(--brand); color: var(--on-brand); border-radius: var(--r-card); padding: clamp(38px, 5vw, 64px) clamp(26px, 4vw, 56px); }

.close__grid { display: grid; gap: 28px; }
@media (min-width: 860px) { .close__grid { grid-template-columns: 1fr auto; align-items: center; } }
.close h2 { max-width: 15ch; }
.close p { margin-top: 16px; max-width: 48ch; color: var(--on-brand-dim); }

.close .btn--white { background: var(--card); color: var(--ink); border-color: transparent; }
/* Di atas oranye logo, putih transparan berapa pun tidak mencapai 3:1 (maksimum
   2.81:1 pada 90%), jadi batasnya putih penuh: 3.15:1. */
.close .btn--ghost { background: transparent; color: var(--on-brand); border-color: #FFFFFF; }
.close .btn--ghost:hover { background: rgba(255,255,255,.14); }
.close__fine { margin-top: 22px; font-size: 14px; color: var(--on-brand-dim); opacity: 1; }

/* ── Kaki ──────────────────────────────────────────────────────────────── */
.foot { padding-block: clamp(44px, 6vw, 70px) 30px; border-top: 1px solid var(--line); }
.foot__grid { display: grid; gap: 34px; }
@media (min-width: 800px) { .foot__grid { grid-template-columns: 1.7fr repeat(4, 1fr); } }
.foot__about p { margin-top: 16px; max-width: 32ch; font-size: 14.5px; color: var(--ink-dim); }
.foot h3 { font-family: var(--font-body); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }
.foot ul { display: grid; gap: 2px; margin-top: 14px; }
.foot ul a { display: flex; align-items: center; min-height: 44px; font-size: 14.5px; color: var(--ink-mid); text-decoration: none; }
.foot ul a:hover { color: var(--ink); }
@media (min-width: 800px) and (pointer: fine) { .foot ul a { min-height: 0; } .foot ul { gap: 10px; } }
.foot__base { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-dim); }

/* Label nav satu baris saja: "How It Works" yang terlipat dua membuat pil nav
   tidak rata. Ruang untuk itu diambil dari padding, bukan dari huruf. */
@media (min-width: 1260px) {
  .head__in { gap: 12px; }
  .nav a, .nav__top { white-space: nowrap; padding-inline: 11px; }
}

/* ── Ponsel dan layar sedang ───────────────────────────────────────────── */
/* Batasnya 1260px, bukan ukuran ponsel: di bawah itu nav lengkap, pilihan
   bahasa, tombol tema, dan CTA tidak muat sebaris (diukur untuk teks Inggris,
   yang lebih panjang dari versi Indonesia). */
@media (max-width: 1259px) {
  .burger { display: grid; }
  /* display:none saat tertutup, bukan translate keluar layar: elemen fixed yang
     digeser keluar tetap menambah lebar dokumen dan membuat halaman meluber. */
  /* backdrop-filter pada .head__in menjadikannya containing block untuk
     elemen fixed ini, jadi posisi dan lebar panel dihitung dari pil header,
     bukan dari layar. Dengan 100vw, panel meluber keluar tepi kiri ponsel. */
  .nav { display: none; position: fixed; inset: 12px 0 auto auto; z-index: 80; width: min(330px, 100%); max-height: calc(100vh - 24px); margin: 0; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-box); box-shadow: var(--sh-chip); overflow-y: auto; }
  .nav[data-open="true"] { display: block; animation: nav-in .2s ease; }
  @keyframes nav-in { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav > ul > li + li { border-top: 1px solid var(--line); }
  .nav a, .nav__top { width: 100%; justify-content: space-between; min-height: 48px; font-size: 16px; border-radius: var(--r-sm); }
  .nav__has { position: static; }
  .nav__menu { position: static; min-width: 0; margin: 0 0 6px 12px; padding: 0 0 0 10px; border: 0; border-left: 1px solid var(--line); border-radius: 0; box-shadow: none; }
  .nav__close { margin: 0 0 10px auto; }
  .scrim { position: fixed; inset: 0; z-index: 70; background: rgba(10,10,10,.34); border: 0; }
  .scrim[hidden] { display: none; }
  /* Di lebar ponsel, logo + burger + toggle + CTA tidak muat dalam satu pil,
     jadi kedua tombol dipindahkan ke dalam panel menu. */
  /* Urutan di ponsel: logo di kiri, lalu tombol tema dan ikon collapse di ujung
     kanan. Tanpa order, burger duduk tepat di sebelah logo karena urutan DOM. */
  .head__logo { order: 0; }
  .head__cta  { order: 1; margin-left: auto; }
  .burger     { order: 2; }
  .head__in   { gap: 8px; padding-left: 16px; }
  .head__cta .nav-login, .head__cta .btn--brand { display: none; }
  .nav__cta { display: block; border-top: 0 !important; padding-top: 8px; }
  /* Pil bahasa ikut pindah ke panel menu, sama seperti CTA: di header ponsel
     hanya muat logo, tombol tema, dan burger. */
  .head__cta .lang { display: none; }
  .nav__lang { display: block; padding-block: 10px; }
  .nav .nav__lang .lang { display: flex; }
  .nav .nav__lang .lang__opt { flex: 1; justify-content: center; min-height: 44px; font-size: 15px; color: var(--ink-dim); border-radius: var(--r-pill); }
  .nav .nav__lang .lang__opt[aria-current="true"] { color: var(--card); background: var(--ink); }
  /* Spesifisitas .nav a (0,1,1) mengalahkan .btn--brand (0,1,0), jadi latar
     tombol ikut dihapus. Ditegaskan ulang lewat selektor yang lebih kuat. */
  .nav .nav__cta .btn { width: 100%; justify-content: center; padding: 12px 24px; font-size: 15.5px; }
  .nav .nav__cta .btn--brand { background: var(--brand); color: var(--on-brand); border: 1px solid var(--brand); }
  .nav .nav__cta .btn--brand:hover { background: var(--brand-press); border-color: var(--brand-press); }
  /* .nav a menetapkan border:0, jadi ketebalannya harus ditulis ulang,
     bukan hanya warnanya. */
  .nav .nav__cta .btn--white { background: var(--card); color: var(--ink); border: 1px solid var(--line-strong); }
}
@media (min-width: 1260px) { .nav__close, .scrim { display: none; } }

/* ══ Gerak ═══════════════════════════════════════════════════════════════
   Hanya transform dan opacity, supaya tidak memicu layout ulang. Seluruhnya
   dimatikan oleh prefers-reduced-motion pada blok di awal berkas.
   Keadaan awal animasi masuk dipasang di bawah .js: tanpa JavaScript, tidak
   ada yang pernah tersembunyi. */

@keyframes dgf-spin  { to { rotate: 360deg; } }
@keyframes dgf-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -11px; } }
@keyframes dgf-rise  { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: 0 0; } }
@keyframes dgf-glow  { 0%, 100% { opacity: .82; scale: 1; } 50% { opacity: 1; scale: 1.07; } }
@keyframes dgf-sheen { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Cincin berputar pelan: potongan berwarnanya berjalan mengitari hero. */
.orbit i { animation: dgf-spin 150s linear infinite; transform-origin: 50% 50%; }
.orbit i:nth-child(1) { animation-duration: 190s; }
.orbit i:nth-child(2) { animation-duration: 120s; animation-direction: reverse; }
.orbit i:nth-child(3) { animation-duration: 240s; }
.orbit i:nth-child(4) { animation-duration: 160s; animation-direction: reverse; }
.orbit i:nth-child(5) { animation-duration: 300s; }

/* Chip mengambang dengan fase berbeda supaya tidak bergerak serempak. */
.chip { animation: dgf-float 7s ease-in-out infinite; }
.chip:nth-of-type(1)  { animation-duration: 6.4s;  animation-delay: -.2s; }
.chip:nth-of-type(2)  { animation-duration: 7.8s;  animation-delay: -1.1s; }
.chip:nth-of-type(3)  { animation-duration: 6.9s;  animation-delay: -2.4s; }
.chip:nth-of-type(4)  { animation-duration: 8.4s;  animation-delay: -.7s; }
.chip:nth-of-type(5)  { animation-duration: 7.2s;  animation-delay: -3.1s; }
.chip:nth-of-type(6)  { animation-duration: 8.1s;  animation-delay: -1.6s; }
.chip:nth-of-type(7)  { animation-duration: 6.6s;  animation-delay: -2.9s; }
.chip:nth-of-type(8)  { animation-duration: 7.6s;  animation-delay: -.4s; }
.chip:nth-of-type(9)  { animation-duration: 8.8s;  animation-delay: -2.2s; }
.chip:nth-of-type(10) { animation-duration: 7.1s;  animation-delay: -3.6s; }

.showcase__glow { animation: dgf-glow 9s ease-in-out infinite; }

/* Masuknya hero, bertahap dari atas ke bawah. */
.js .hero__in > *, .js .showcase { animation: dgf-rise .72s cubic-bezier(.22,.7,.3,1) both; }
.js .hero__in > .facts     { animation-delay: .04s; }
.js .hero__in > h1         { animation-delay: .12s; }
.js .hero__in > .hero__sub { animation-delay: .20s; }
.js .hero__in > .actions   { animation-delay: .28s; }
.js .showcase              { animation-delay: .36s; }
.js .chip  { opacity: 0; animation: dgf-rise .6s ease both, dgf-float 7s ease-in-out infinite; }
.js .chip:nth-of-type(n)   { animation-delay: .45s, 0s; }

/* Tampil saat tergulir. Kelas is-in dipasang oleh IntersectionObserver. */
.js .reveal { opacity: 0; translate: 0 22px; transition: opacity .62s ease, translate .62s cubic-bezier(.22,.7,.3,1); }
.js .reveal.is-in { opacity: 1; translate: 0 0; }
.js .reveal:nth-child(2) { transition-delay: .06s; }
.js .reveal:nth-child(3) { transition-delay: .12s; }

/* Baris tabel dan butir register muncul berurutan saat wadahnya terlihat. */
.js .stagger > * { opacity: 0; translate: 0 12px; transition: opacity .45s ease, translate .45s ease; }
.js .stagger.is-in > * { opacity: 1; translate: 0 0; }
.js .stagger.is-in > *:nth-child(1) { transition-delay: .02s; }
.js .stagger.is-in > *:nth-child(2) { transition-delay: .06s; }
.js .stagger.is-in > *:nth-child(3) { transition-delay: .10s; }
.js .stagger.is-in > *:nth-child(4) { transition-delay: .14s; }
.js .stagger.is-in > *:nth-child(5) { transition-delay: .18s; }
.js .stagger.is-in > *:nth-child(6) { transition-delay: .22s; }
.js .stagger.is-in > *:nth-child(7) { transition-delay: .26s; }
.js .stagger.is-in > *:nth-child(8) { transition-delay: .30s; }
.js .stagger.is-in > *:nth-child(n+9) { transition-delay: .34s; }

/* Angkat halus saat kursor di atas blok yang bisa dijelajahi. */
.case, .register li, .showcase__box { transition: box-shadow .22s ease, translate .22s ease, border-color .22s ease; }
.case:hover, .register li:hover { translate: 0 -3px; }
.btn, .chip, .iconbtn, .nav-login { transition: background-color .16s ease, border-color .16s ease, color .16s ease, translate .16s ease, box-shadow .16s ease; }
.btn:hover { translate: 0 -1px; }
.clause { transition: background-color .2s ease; }

/* Pita integrasi: sapuan cahaya tipis sekali jalan saat masuk layar. */
.js .strip__list.is-in li { animation: dgf-rise .5s ease both; }
.js .strip__list.is-in li:nth-child(2n) { animation-delay: .05s; }
.js .strip__list.is-in li:nth-child(3n) { animation-delay: .1s; }

/* FAQ membuka dengan halus. */
.faq details > div { animation: dgf-rise .34s ease both; }

/* Saat dicetak, tidak ada yang boleh tersembunyi oleh animasi masuk. */
@media print {
  .js .reveal, .js .stagger > *, .js .hero__in > *, .js .showcase, .js .chip {
    opacity: 1 !important; translate: none !important; animation: none !important;
  }
  .orbit, .chips-orbit, .showcase__glow { display: none !important; }
}

/* ══ Gerak saat menggulir ════════════════════════════════════════════════
   Dua lapis. Lapis dasar memakai kelas is-in dari IntersectionObserver dan
   jalan di semua peramban. Lapis kedua memakai animation-timeline: view(),
   yang menggerakkan elemen terus-menerus mengikuti posisinya di layar, dan
   hanya aktif di peramban yang mendukung. Keduanya mati oleh
   prefers-reduced-motion lewat blok di awal berkas. */

/* Nav merapat dan bayangannya muncul begitu halaman digulir. */
.head__in { transition: padding .22s ease, box-shadow .22s ease, background-color .22s ease; }
.js.is-scrolled .head__in { padding-block: 6px; box-shadow: var(--sh-chip); background: color-mix(in srgb, var(--card) 94%, transparent); }
.js.is-scrolled .head__logo img { height: 24px; transition: height .22s ease; }

/* Reveal dasar, kini dua arah: keluar layar mengembalikan keadaan awal. */
.js .reveal { transition: opacity .55s ease, translate .55s cubic-bezier(.22,.7,.3,1), scale .55s cubic-bezier(.22,.7,.3,1); scale: .985; }
.js .reveal.is-in { scale: 1; }
.js .stagger > * { transition: opacity .42s ease, translate .42s ease; }

/* Kartu penerapan dan butir register naik sedikit saat masuk. */
.js .cases.is-in .case { animation: dgf-rise .55s cubic-bezier(.22,.7,.3,1) both; }
.js .cases.is-in .case:nth-child(2) { animation-delay: .07s; }
.js .cases.is-in .case:nth-child(3) { animation-delay: .14s; }
.js .cases.is-in .case:nth-child(4) { animation-delay: .21s; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Isi hero bergerak lebih lambat dari guliran, memberi kedalaman. */
    .js .hero__in   { animation: dgf-parallax linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .js .showcase   { animation: dgf-parallax-soft linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    /* Cincin orbit ikut menggeser, jadi latarnya terasa hidup saat digulir. */
    .js .orbit      { animation: dgf-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    /* Judul section mengambil fokus saat mendekati tengah layar. */
    .js .lead h2    { animation: dgf-focus linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
    /* Baris tabel muncul berurutan mengikuti posisi gulirnya sendiri. */
    .js .sheet tbody tr { animation: dgf-row linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    .js .register li    { animation: dgf-row linear both; animation-timeline: view(); animation-range: entry 0% entry 85%; }
  }
}

@keyframes dgf-parallax      { from { translate: 0 0; opacity: 1; } to { translate: 0 -70px; opacity: .25; } }
@keyframes dgf-parallax-soft { from { translate: 0 0; opacity: 1; } to { translate: 0 -34px; opacity: .4; } }
@keyframes dgf-drift         { from { translate: 0 60px; } to { translate: 0 -60px; } }
@keyframes dgf-focus         { from { opacity: .45; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes dgf-row           { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }