/* =====================================================================
   landing.css — halaman utama ALETHEIA (v3, kelas AEONPAD/NOCTPAD dengan bahasa sendiri):
   dewi di tengah menimpa wordmark berukir, garis baca, pita bacaan asli,
   tur berbab, kotak coba, benang 6 cek, pilar batas, arsip rekam jejak.
   ===================================================================== */

/* ---------- hero ---------- */
/* hero naik ke belakang menu supaya langitnya utuh sampai tepi atas */
.hero { margin-top: -72px; padding-top: 72px; position: relative; min-height: clamp(792px, 100svh, 1032px); display: flex; flex-direction: column; overflow: hidden; isolation: isolate; }
.hero > .wrap { width: 100%; }
.kicker { position: relative; z-index: 4; display: flex; justify-content: space-between; gap: 20px; padding-top: 4px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.kicker i { display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--good); box-shadow: 0 0 10px var(--good); vertical-align: 1px; animation: pulse 2s infinite; }
.kicker b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.edge { position: absolute; z-index: 4; top: 50%; font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--faint); writing-mode: vertical-rl; white-space: nowrap; }
.edge-l { left: 16px; transform: translateY(-50%) rotate(180deg); }
.edge-r { right: 16px; transform: translateY(-50%); }

.hero-wm { position: absolute; z-index: 1; left: 3.2vw; right: 3.2vw; top: 126px; }
/* hero diperbesar: badan bawah terpotong lembut, wajah & cermin di tengah layar */
.hero-figure { position: absolute; z-index: 2; left: 50%; bottom: -34%; height: 130%; aspect-ratio: 3 / 4; transform: translate3d(calc(-49% + var(--px, 0px)), var(--py, 0px), 0); transition: transform 1.4s var(--ease); }
.hero-figure img { width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 42%, #000 56%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 42%, #000 56%, transparent 100%);
  animation: breathe 9s ease-in-out infinite; transform-origin: 50% 85%; }
.hero-figure::before { content: ""; position: absolute; inset: -6% -14% 0; z-index: -1; background: radial-gradient(closest-side, rgba(255,250,238,.95), rgba(241,228,198,.5) 55%, transparent); }
@keyframes breathe { 50% { transform: scale(1.012) translateY(-3px); } }

.hero-grid { position: relative; z-index: 3; margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 40px; padding-bottom: 26px; }
.hero-copy { max-width: 480px; }
.hero h1 { font-weight: 300; font-size: clamp(30px, 2.9vw, 44px); letter-spacing: -.04em; line-height: 1.04; }
.hero h1 b { font-weight: 600; }
.hero .lead { font-size: 15px; margin-top: 14px; max-width: 400px; }
.hero .search { margin-top: 20px; }
.hero .search input { font-size: 13px; }
.hero-btns { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
.link-arrow { font-size: 13.5px; color: var(--violet-2); }
.link-arrow:hover { color: var(--ink); }
.hero-side { justify-self: end; width: min(370px, 100%); display: grid; gap: 10px; }
.latest { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 16px; transition: border-color .25s; }
.latest:hover { border-color: rgba(176,138,72,.4); }
.lt-ring { position: relative; width: 46px; height: 46px; display: grid; place-items: center; }
.lt-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.lt-ring circle { fill: none; stroke-width: 3.5; }
.lt-ring .bg { stroke: rgba(60,44,22,0.080); }
.lt-ring .fg { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 1.4s var(--ease); }
.lt-ring b { font-weight: 600; font-size: 15px; }
.lt-txt { display: grid; line-height: 1.25; min-width: 0; }
.lt-txt small { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.lt-txt b { font-weight: 600; font-size: 15px; }
.lt-txt span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-go { color: var(--violet-2); }

.stats { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(246,242,234,.2), rgba(246,242,234,.75)); backdrop-filter: blur(8px); max-width: none; }
.stats > div { padding: 16px 20px 18px; border-right: 1px solid var(--line); }
.stats > div:last-child { border-right: 0; }
.stats b { display: block; font-weight: 600; font-size: 20px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stats small { font-size: 11.5px; color: var(--faint); }

/* ---------- pita bacaan berjalan ---------- */
.reel { position: relative; z-index: 3; overflow: hidden; border-bottom: 1px solid var(--line); background: rgba(246,242,234,.6); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.reel-track { display: flex; gap: 34px; width: max-content; padding: 15px 0; animation: reel 60s linear infinite; }
.reel:hover .reel-track { animation-play-state: paused; }
@keyframes reel { to { transform: translateX(-50%); } }
.reel a { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
.reel a b { font-weight: 600; color: var(--ink); }
.reel a .sc { font: 500 12.5px var(--mono); padding: 3px 8px; border-radius: 6px; background: rgba(60,44,22,0.048); border: 1px solid var(--line-2); }
.reel a .sc.good { color: var(--good); } .reel a .sc.warn { color: var(--warn); } .reel a .sc.bad { color: var(--bad); }
.reel a small { font: 11px var(--mono); color: var(--faint); }
.reel .sep { color: var(--gold); opacity: .6; }

/* ---------- kerangka bagian ---------- */
.sec { position: relative; padding: 150px 0 0; }
.sec-head { display: grid; gap: 18px; max-width: 760px; margin-bottom: 52px; }
.sec-head.narrow { max-width: 640px; }
.sec-head.row { max-width: none; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 48px; }
.num { display: inline-flex; align-items: center; gap: 12px; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.num::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.h-sec { margin-top: 14px; }

/* ---------- I · tur ---------- */
.tour { padding: 12px; }
.tour-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--bg-3) url(/assets/scenes/mirror-read.webp?v=3) center / cover; }
.tour-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tour-empty { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, rgba(246,242,234,.15), rgba(246,242,234,.65)); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.tour.has-video .tour-empty { display: none; }
.tour-rec { position: absolute; left: 16px; top: 14px; font-size: 11px; letter-spacing: .14em; display: flex; gap: 8px; align-items: center; color: var(--ink); padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.82); }
.tour-rec i { width: 7px; height: 7px; border-radius: 50%; background: #ff5b6e; animation: pulse 1.4s infinite; }
.chapters { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 12px; }
.chapters li { position: relative; padding: 14px 12px 6px; font-size: 13px; color: var(--muted); cursor: pointer; border-top: 1px solid var(--line-2); transition: color .25s; }
.chapters li span { display: block; font-size: 11px; color: var(--faint); margin-bottom: 4px; }
.chapters li:hover, .chapters li.on { color: var(--ink); }
.chapters li::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: var(--p, 0%); background: linear-gradient(90deg, var(--gold), var(--violet-2)); }

/* ---------- II · coba ---------- */
.play { display: grid; grid-template-columns: .95fr 1.05fr; min-height: 420px; overflow: hidden; }
.play-in { padding: 26px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; }
.pl-head { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); display: flex; gap: 10px; align-items: center; }
.pl-head i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: pulse 1.6s infinite; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; flex: 1; }
.pl-chips button { display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px 7px 7px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); font-size: 13px; transition: border-color .2s, background .2s; animation: slidein .7s var(--ease) both; }
.pl-chips button:hover, .pl-chips button.on { border-color: var(--gold); background: rgba(176,138,72,.08); }
.pl-chips img, .pl-chips .ph { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, #e9d6ae, #c9d3e3); }
.pl-chips b { font-weight: 600; }
.pl-chips small { font: 11px var(--mono); color: var(--faint); }
.pl-empty { font-size: 12px; color: var(--faint); }
@keyframes slidein { from { opacity: 0; transform: translateY(8px); } }
.play-out { padding: 26px; display: flex; flex-direction: column; justify-content: center; }
.po-idle { display: grid; place-items: center; height: 100%; color: var(--faint); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.po-steps { list-style: none; display: grid; gap: 2px; }
.po-steps li { display: flex; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--faint); }
.po-steps li .ic { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line-2); flex: none; }
.po-steps li.on { color: var(--ink); } .po-steps li.on .ic { border-color: var(--gold); border-top-color: transparent; animation: spin .9s linear infinite; }
.po-steps li.done { color: var(--ink-2); } .po-steps li.done .ic { border-color: var(--good); background: radial-gradient(circle, var(--good) 35%, transparent 40%); }
@keyframes spin { to { transform: rotate(360deg); } }
.po-res { display: grid; gap: 14px; animation: slidein .6s var(--ease) both; }
.po-top { display: flex; gap: 18px; align-items: center; }
.po-ring { position: relative; width: 92px; height: 92px; flex: none; display: grid; place-items: center; }
.po-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.po-ring circle { fill: none; stroke-width: 6; }
.po-ring .bg { stroke: rgba(60,44,22,0.072); }
.po-ring .fg { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 1.6s var(--ease); }
.po-ring b { font-weight: 600; font-size: 32px; letter-spacing: -.03em; }
.po-name b { display: block; font-weight: 600; font-size: 20px; }
.po-name span { font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.po-name span.good { color: var(--good); } .po-name span.warn { color: var(--warn); } .po-name span.bad { color: var(--bad); }
.po-name small { display: block; font: 11.5px var(--mono); color: var(--faint); margin-top: 4px; }
.po-finds { list-style: none; }
.po-finds li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.po-actions { display: flex; gap: 10px; align-items: center; }
.po-err { color: var(--muted); font-size: 14px; line-height: 1.6; }

/* ---------- III · enam benang ---------- */
.checks-grid { position: relative; display: grid; grid-template-columns: .82fr 1.18fr; gap: 64px; align-items: center; }
.veil { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 3 / 4; }
.veil img { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); -webkit-mask-image: radial-gradient(ellipse 70% 72% at 55% 45%, #000 60%, transparent 100%); mask-image: radial-gradient(ellipse 70% 72% at 55% 45%, #000 60%, transparent 100%); }
.threads { display: none; }
.threads-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.threads-layer path { fill: none; stroke: rgba(176,138,72,.55); stroke-width: 1.2; stroke-dasharray: 1600; stroke-dashoffset: 1600; transition: stroke-dashoffset 2.4s var(--ease), stroke .3s, stroke-width .3s; filter: drop-shadow(0 0 4px rgba(176,138,72,.6)); }
.checks.in-view .threads-layer path { stroke-dashoffset: 0; }
.threads-layer path.hot { stroke: var(--gold); stroke-width: 2; }
.check-list { list-style: none; margin-top: 0; display: grid; gap: 8px; position: relative; z-index: 2; }
.check-list li { display: grid; grid-template-columns: 58px 1fr; gap: 16px; align-items: start; padding: 14px 18px; border-radius: 14px; background: rgba(255,255,255,.75); border: 1px solid var(--line); transition: border-color .25s, background .25s, transform .4s var(--ease); }
.check-list li:hover, .check-list li.hot { border-color: rgba(176,138,72,.4); background: rgba(255,255,255,.85); transform: translateX(4px); }
.check-list .w { font-size: 13px; color: var(--gold); padding-top: 2px; }
.check-list b { font-weight: 600; font-size: 15px; }
.check-list p { color: var(--muted); font-size: 13.5px; margin-top: 3px; line-height: 1.55; }

/* ---------- bagian dengan adegan latar ---------- */
.scene-sec { padding-bottom: 40px; isolation: isolate; }
/* adegan tampil penuh & tajam; hanya tepi atas/bawah dan sisi teks yang dilebur */
.scene-bg { position: absolute; inset: 40px 0 0; z-index: -1; background: var(--img) center / cover no-repeat; opacity: 1; -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 10%, #000 86%, transparent); }
.receipts .scene-bg { background-position: 70% 40%; opacity: .6; }
.proof .scene-bg::after, .archive .scene-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, rgba(246,242,234,.92) 26%, rgba(246,242,234,.4) 50%, transparent 68%); }
.archive .scene-bg { opacity: 1; background-position: 60% 50%; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.pin-list { list-style: none; display: grid; gap: 16px; margin-top: 34px; font-size: 14.5px; color: var(--muted); max-width: 520px; }
.pin-list li { padding-left: 22px; position: relative; line-height: 1.6; }
.pin-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; transform: rotate(45deg); background: linear-gradient(135deg, #c9a35a, #c9a86a); }
.pin-list b { color: var(--ink); font-weight: 600; }
.ledger { padding: 22px; background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.8)); }
.lg-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.lg-head b { font-weight: 600; font-size: 18px; }
.ledger ol { list-style: none; }
.ledger li { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.ledger li.flash { animation: flash 1.6s var(--ease); }
@keyframes flash { 0% { background: rgba(176,138,72,.16); } 100% { background: transparent; } }
.lg-foot { display: flex; justify-content: space-between; padding-top: 14px; font-size: 11.5px; color: var(--faint); }

/* ---------- V · pilar batas ---------- */
.pillars { position: relative; border-radius: 26px; overflow: hidden; border: 1px solid var(--line); }
.pillars img { width: 100%; display: block; }
.pl-labels { position: absolute; inset: 0; }
.pl-lab { position: absolute; transform: translate(-50%, calc(-100% - 14px)); width: 12.5%; text-align: center; opacity: 0; transition: opacity .8s var(--ease), transform .8s var(--ease); }
.pillars.in .pl-lab { opacity: 1; transform: translate(-50%, calc(-100% - 22px)); }
.pl-lab b { display: inline-block; font: 600 12.5px var(--mono); color: #6f4f17; letter-spacing: .06em; padding: 3px 8px; border-radius: 999px; background: rgba(255,250,238,.85); border: 1px solid rgba(176,138,72,.4); }
.pl-lab span { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.4; color: var(--ink); margin-top: 5px; text-shadow: 0 1px 8px rgba(255,255,255,.9); }
.pl-list { display: none; }
.bands { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 18px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.bands div { padding: 16px 18px; background: var(--glass); border-right: 1px solid var(--line); position: relative; }
.bands div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); }
.bands b { display: block; font: 500 13px var(--mono); color: var(--ink); }
.bands span { font-size: 13px; color: var(--muted); }

/* ---------- VI · rekam jejak ---------- */
.rec { padding: 8px 22px; background: linear-gradient(160deg, rgba(255,255,255,.7), rgba(255,255,255,.78)); }
.rec-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 16px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.rec-row:last-child { border-bottom: 0; }
.rec-th { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.rec-row .coin { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rec-row .coin img, .rec-row .coin .ph { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; background: linear-gradient(135deg, #e9d6ae, #c9d3e3); }
.rec-row .coin b { font-weight: 600; }
.rec-row .coin small { display: block; font: 11px var(--mono); color: var(--faint); }
.grade-chip { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.grade-chip small { font-weight: 400; color: var(--muted); font-size: 12px; }
.out { font: 500 13px var(--mono); }
.out.up { color: var(--good); } .out.down { color: var(--bad); } .out.wait { color: var(--faint); }
.rec-empty { padding: 34px 0; text-align: center; color: var(--muted); font-size: 14px; }
.rec-empty a, .more { color: var(--gold); }
.more { display: inline-block; margin-top: 18px; font-size: 14px; }

/* ---------- VII · alur ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 1px; background: linear-gradient(90deg, transparent, rgba(176,138,72,.5) 10%, rgba(176,138,72,.5) 90%, transparent); }
.steps li { position: relative; padding-top: 50px; }
.steps .n { position: absolute; top: 0; left: 0; font-size: 11px; padding: 7px 11px; border-radius: 999px; background: var(--bg); border: 1px solid rgba(176,138,72,.45); color: var(--gold); white-space: nowrap; }
.steps .n b { font-weight: 500; color: var(--ink); }
.steps h3 { font-weight: 600; font-size: 18px; letter-spacing: -.01em; }
.steps p { color: var(--muted); font-size: 14px; margin-top: 8px; line-height: 1.6; max-width: 290px; }

/* ---------- VIII · token ---------- */
.token-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: center; }
.token-art { position: relative; max-width: 420px; aspect-ratio: 3 / 4; border-radius: 28px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 50px 100px rgba(0,0,0,.5); }
.token-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.token-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(246,242,234,.9)); }
.token-ca { margin-top: 30px; max-width: 560px; }
.token-read { margin-top: 14px; }

/* ---------- IX · FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; font-size: 16px; font-weight: 400; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 22px var(--font); color: var(--gold); transition: transform .3s; line-height: 1; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--muted); font-size: 14.5px; line-height: 1.7; padding: 0 0 22px; max-width: 640px; }

/* ---------- penutup ---------- */
.finale { position: relative; margin-top: 150px; min-height: clamp(460px, 62vw, 760px); display: flex; align-items: flex-start; justify-content: center; text-align: center; isolation: isolate; }
.finale .scene-bg { inset: 0; opacity: .9; z-index: -1; background-position: 50% 60%; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 80%, transparent); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 80%, transparent); }
.finale-in { padding-top: 40px; display: grid; justify-items: center; gap: 4px; }
.finale .h-sec { font-size: clamp(40px, 5vw, 76px); }
.finale .search { width: min(620px, 100%); margin-top: 26px; }
body.landing footer { margin-top: 0; }

/* ---------- responsif ---------- */
@media (max-width: 1100px) {
  .hero-side { width: 320px; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stats > div:nth-child(n+4) { display: none; }
  .pl-lab span { display: none; }
}
@media (max-width: 900px) {
  .edge { display: none; }
  .hero { min-height: 0; margin-top: -64px; padding-top: 64px; }
  .hero-wm { position: relative; left: auto; right: auto; top: auto; margin: 22px 16px 0; }
  .hero-figure { position: relative; left: auto; bottom: auto; height: auto; width: min(124%, 600px); margin: -16% 0 -22% 50%; transform: translateX(-50%); }
  .hero-grid { grid-template-columns: 1fr; margin-top: -60px; gap: 22px; }
  .hero-copy, .hero-side { max-width: none; width: 100%; justify-self: stretch; }
  .hero h1 { font-size: clamp(30px, 8vw, 40px); }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats > div:nth-child(n+4) { display: none; }
  .stats > div:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .sec { padding-top: 100px; }
  .sec-head.row, .split, .token-grid, .faq-grid, .checks-grid { grid-template-columns: 1fr; gap: 34px; }
  .chapters { grid-template-columns: repeat(3, 1fr); }
  .play { grid-template-columns: 1fr; }
  .play-in { border-right: 0; border-bottom: 1px solid var(--line); }
  .veil { max-width: 360px; }
  .threads-layer { display: none; }
  .pl-labels { display: none; }
  .pl-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; list-style: none; }
  .pl-list li { padding: 12px 14px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line); font-size: 13px; color: var(--muted); }
  .pl-list b { display: block; font: 500 12.5px var(--mono); color: #c9a35a; margin-bottom: 4px; }
  .bands { grid-template-columns: 1fr 1fr; }
  .rec { padding: 4px 14px; }
  .rec-row { grid-template-columns: 1.3fr 1fr 1fr; }
  .rec-row > :nth-child(3), .rec-row > :nth-child(5) { display: none; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .steps::before { display: none; }
  .token-art { max-width: 320px; }
}
@media (max-width: 560px) {
  .kicker .kick-r { display: none; }
  .chapters { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .bands { grid-template-columns: 1fr; }
  .bands div { border-right: 0; border-bottom: 1px solid var(--line); }
  .pl-list { grid-template-columns: 1fr; }
  .hero-btns { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .reel-track { animation: none; }
  .hero-figure img, .mirror { animation: none; }
}

/* ---------- baris kepercayaan di hero ---------- */
.trust-row { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.trust-row li { display: inline-flex; align-items: center; gap: 8px; }
.trust-row li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5 8.2 9 4' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* ---------- I · bukti: berkas kasus ---------- */
.proof .scene-bg { opacity: 1; background-position: 80% 30%; bottom: auto; height: 720px; }
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.case { position: relative; display: flex; flex-direction: column; padding: 26px 26px 22px; border-radius: 20px; background: linear-gradient(180deg, #fffdf9, #fbf7ef); border: 1px solid rgba(60,44,22,.12); box-shadow: 0 1px 0 #fff inset, 0 30px 60px -40px rgba(60,44,22,.45); }
.case::before { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-2), transparent); }
.case header { display: flex; gap: 14px; align-items: center; }
.cs-logo { width: 44px; height: 44px; border-radius: 12px; overflow: hidden; flex: none; background: linear-gradient(135deg, #efe2c4, #d9e0ec); border: 1px solid var(--line); }
.cs-logo img { width: 100%; height: 100%; object-fit: cover; }
.case header b { display: block; font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.case header b span { font-weight: 400; color: var(--muted); font-size: 14px; }
.case header small { font-size: 11px; color: var(--faint); }
.cs-grade { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin: 22px 0 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.cs-score { font-weight: 600; font-size: 54px; letter-spacing: -.05em; line-height: .9; }
.cs-verdict { font: 500 12.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.cs-verdict.good { color: var(--good); } .cs-verdict.warn { color: var(--warn); } .cs-verdict.bad { color: var(--bad); }
.cs-cap { width: 100%; font-size: 11px; color: var(--muted); }
.cs-finds { list-style: none; display: grid; gap: 2px; flex: 1; }
.cs-finds li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px dashed rgba(60,44,22,.12); font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.cs-finds li .lvl { margin-top: 6px; }
.cs-open { margin-top: 16px; font-size: 13.5px; color: var(--gold); }
.cs-open:hover { color: var(--ink); }
.verify { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; border-radius: 20px; overflow: hidden; border: 1px solid rgba(60,44,22,.12); background: rgba(255,253,249,.8); }
.verify > div { padding: 22px 24px; border-right: 1px solid var(--line); }
.verify > div:last-child { border-right: 0; }
.verify span.mono { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.verify p { margin-top: 8px; font-size: 14px; line-height: 1.65; color: var(--muted); }
.verify a { color: var(--ink); border-bottom: 1px solid var(--gold-2); }
.verify .fp { display: inline-block; margin-top: 6px; font-size: 11.5px; color: var(--ink-2); padding: 3px 8px; border-radius: 6px; background: var(--gold-3); }
@media (max-width: 1100px) { .cases { grid-template-columns: 1fr 1fr; } .cases .case:last-child { grid-column: 1 / -1; } }
@media (max-width: 900px) { .cases, .verify { grid-template-columns: 1fr; } .verify > div { border-right: 0; border-bottom: 1px solid var(--line); } .cases .case:last-child { grid-column: auto; } }

/* ---------- langit kayangan hidup di hero ---------- */
.heaven { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 92%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 92%); }
.heaven .clouds { position: absolute; inset: -8% -30% 20% -10%; background: url(/assets/scenes/sky.webp?v=1) 0 0 / auto 100% repeat-x; opacity: .62; animation: drift 90s linear infinite; }
.heaven .clouds.c2 { inset: 10% -30% 0 -40%; opacity: .32; transform: scaleY(-1); filter: blur(3px); animation-duration: 140s; animation-direction: reverse; }
@keyframes drift { from { background-position-x: 0; } to { background-position-x: -1800px; } }
.heaven .rays { position: absolute; left: 50%; top: -30%; width: 160vmax; height: 160vmax; margin-left: -80vmax; background: repeating-conic-gradient(from 180deg at 50% 0%, rgba(255,248,226,.0) 0deg 5deg, rgba(255,246,220,.55) 6deg 7.5deg, rgba(255,248,226,0) 9deg 14deg); -webkit-mask-image: radial-gradient(closest-side at 50% 0%, #000, transparent 70%); mask-image: radial-gradient(closest-side at 50% 0%, #000, transparent 70%); opacity: .55; mix-blend-mode: soft-light; animation: sway 22s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 50% at 52% 30%, rgba(255,250,236,.75), transparent 70%); }
@media (prefers-reduced-motion: reduce) { .heaven .clouds, .heaven .rays { animation: none; } }

/* HP: adegan jadi blok gambar di atas judul (bukan di belakang teks) supaya tulisan selalu terbaca */
@media (max-width: 900px) {
  .scene-sec .scene-bg { inset: 30px 0 auto 0 !important; height: 300px !important; background-position: 70% 35% !important; -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 60%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 60%, transparent); }
  .scene-sec .scene-bg::after { background: none !important; }
  .scene-sec > .wrap { padding-top: 230px; }
}

/* ---------- IV · untuk trader ---------- */
.tr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tr-card { padding: 30px 28px 26px; display: grid; gap: 14px; align-content: start; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; position: relative; overflow: hidden; }
.tr-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 220px at 85% -10%, rgba(207,174,108,.22), transparent 70%); opacity: .7; transition: opacity .4s; pointer-events: none; }
.tr-card:hover { transform: translateY(-4px); border-color: rgba(156,118,51,.35); box-shadow: 0 1px 0 #fff inset, 0 40px 70px -40px rgba(60,44,22,.55); }
.tr-card:hover::before { opacity: 1; }
.tr-ic { width: 46px; height: 46px; color: var(--gold); }
.tr-card .num { color: var(--gold); }
.tr-card h3 { font-weight: 600; font-size: 22px; letter-spacing: -.025em; line-height: 1.2; }
.tr-card p { color: var(--muted); font-size: 14.5px; line-height: 1.7; }
.tr-go { margin-top: 6px; font-weight: 600; font-size: 14px; color: var(--ink); display: inline-flex; gap: 8px; align-items: center; }
.tr-go i { font-style: normal; transition: transform .3s var(--ease); }
.tr-card:hover .tr-go i { transform: translateX(4px); }
@media (max-width: 980px) { .tr-grid { grid-template-columns: 1fr; } }