@import url("fonts.css");

/* ============ dasar — keluarga visual HOODBLIND, versi Mesir malam ============ */
:root{
  --ink:#0b0a08; --ink2:#100e0b; --panel:#15120d; --panel2:#1b1711;
  --line:rgba(201,162,39,.2); --line-hi:rgba(201,162,39,.5);
  --brass:#c9a227; --brass-dim:#8a6f1c; --gold-hi:#f1d98a;
  --bone:#efe7d6; --ash:#9a917f; --ash-dim:#6a6355;
  --paper:#efe6d2; --paper2:#e4d9c0; --ink-on-paper:#1b1712;
  --lapis:#2e4a7d; --faience:#1fa4a0;
  --nav:78px; --tick:38px; --wrap:1280px;
  --f-disp:'Cinzel',Georgia,serif;              /* judul: huruf pahatan kuno */
  --f-sign:'Oswald','Arial Narrow',sans-serif;  /* label, tombol, nav */
  --f-body:'Bitter',Georgia,serif;              /* badan teks */
  --f-mono:'Courier Prime','Courier New',monospace;
  --f-glyph:'Noto Sans Egyptian Hieroglyphs',serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav)}
body{margin:0;background:var(--ink);color:var(--bone);font:400 14.5px/1.72 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
i,em{font-style:normal}
a{color:inherit}
img{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--f-disp);font-weight:700;margin:0;letter-spacing:.04em;text-transform:uppercase;line-height:1.08}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
[hidden]{display:none!important}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 30px}
.mono{font-family:var(--f-mono)}
.glyph{font-family:var(--f-glyph);font-weight:400;line-height:1}
.eyebrow{font-family:var(--f-sign);font-weight:500;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ash-dim);margin:0}
.eyebrow.brass{color:var(--brass)}
.tiny{font-size:11.5px;color:var(--ash-dim);line-height:1.6;margin:12px 0 0}
.lede{font-size:17px;color:var(--ash);max-width:62ch;margin:0;line-height:1.65}
.gold{background:linear-gradient(105deg,#8a6a1c,#d9b74a 28%,#fff1b6 50%,#d9b74a 72%,#8a6a1c);-webkit-background-clip:text;background-clip:text;color:transparent}
.ornament{height:14px;margin:16px 0 0;width:min(300px,70%);background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 14'><path d='M0 7h128M192 7h128' stroke='%23c9a227' stroke-width='1'/><path d='M160 1l6 6-6 6-6-6z' fill='%23c9a227'/><circle cx='140' cy='7' r='2' fill='%23c9a227'/><circle cx='180' cy='7' r='2' fill='%23c9a227'/></svg>") center/contain no-repeat}

/* kanvas lembah = latar tetap; bagian .solid menutupinya */
#world{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;background:#07080c}
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 55% 45%,transparent 28%,rgba(11,10,8,.7) 100%),linear-gradient(90deg,rgba(11,10,8,.72),rgba(11,10,8,0) 52%)}
.grain{position:fixed;inset:-50%;width:200%;height:200%;z-index:99;pointer-events:none;opacity:.05;animation:grain 1.2s steps(3) infinite;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}
main{position:relative;z-index:2}
section{position:relative;padding:110px 0}
section.clear{background:transparent;padding:0}
section.solid{background:var(--ink);border-top:1px solid var(--line)}
section.solid.alt{background:var(--ink2)}
section>.wrap{position:relative;z-index:1}
.art-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:.13;filter:grayscale(.3);pointer-events:none;mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}

/* ============ tombol ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 24px;font:500 12px/1 var(--f-sign);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:.2s;cursor:pointer}
.gold-btn{color:#17130a;background:linear-gradient(180deg,#f1d98a,#c9a227 55%,#9c7b18);border:1px solid #f1d98a;box-shadow:0 0 28px rgba(201,162,39,.22),inset 0 1px 0 rgba(255,255,255,.4)}
.gold-btn:hover{box-shadow:0 0 40px rgba(241,217,138,.4),inset 0 1px 0 rgba(255,255,255,.5);transform:translateY(-1px)}
.ghost{color:var(--bone);border:1px solid var(--line-hi);background:rgba(11,10,8,.4)}
.ghost:hover{border-color:var(--brass);color:var(--gold-hi)}
.btn.small{height:36px;padding:0 15px;font-size:10.5px}
.btn[aria-disabled="true"]{opacity:.55;cursor:default;filter:saturate(.6)}
.btn svg{width:15px;height:15px}

/* ============ gerbang intro ============ */
.intro{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;transition:opacity .9s,visibility .9s}
.intro-scrim{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 46%,rgba(11,10,8,.35),rgba(11,10,8,.94) 70%)}
.intro-in{position:relative;text-align:center;max-width:640px}
.intro-logo{width:min(250px,46vw);height:auto;margin:0 auto;filter:drop-shadow(0 0 30px rgba(201,162,39,.25))}
.intro-word{margin:14px 0 0;font:900 clamp(40px,7vw,78px)/1 var(--f-disp);letter-spacing:.12em}
.intro-tag{margin:16px auto 0;color:var(--ash);font-size:15.5px;max-width:52ch}
.intro-cd{margin:26px 0 0;font:700 13px/1 var(--f-mono);letter-spacing:.2em;color:var(--gold-hi)}
.intro-acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:26px 0 0}
.intro-foot{margin:22px 0 0;font:500 10.5px/1 var(--f-sign);letter-spacing:.26em;text-transform:uppercase;color:var(--ash-dim)}
.intro-foot b{color:var(--brass);font-weight:500}
.intro-skip{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font:500 10.5px/1 var(--f-sign);letter-spacing:.3em;text-transform:uppercase;color:var(--ash-dim)}
.intro-skip:hover{color:var(--gold-hi)}
html.intro-on main,html.intro-on .topnav,html.intro-on .ticker{opacity:0;pointer-events:none}
html:not(.intro-on) .intro{opacity:0;visibility:hidden;pointer-events:none}
main,.topnav,.ticker{transition:opacity .8s}

/* ============ nav ============ */
.topnav{position:fixed;top:0;left:0;right:0;height:var(--nav);z-index:50;display:flex;align-items:center;gap:22px;padding:0 30px;
  background:linear-gradient(180deg,rgba(11,10,8,.94),rgba(11,10,8,.78));border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand img{width:48px;height:48px;object-fit:contain}
.brand img,.hero-logo,.intro-logo{aspect-ratio:1/1;object-fit:contain}
.brand b{font:700 17px/1 var(--f-disp);letter-spacing:.16em}
.nav-links{display:flex;gap:20px;margin-left:auto}
.nav-links a{font:500 11px/1 var(--f-sign);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--ash);padding:6px 0;border-bottom:1px solid transparent;transition:.2s}
.nav-links a:hover,.nav-links a.on{color:var(--gold-hi);border-color:var(--brass)}
.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav-links + .nav-right{margin-left:0}
.ca-chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 6px 0 12px;border:1px solid var(--line-hi);background:rgba(11,10,8,.6);font:500 10.5px/1 var(--f-sign);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.ca-chip .lbl{color:var(--brass)}
.ca-chip code{font:700 11.5px/1 var(--f-mono);letter-spacing:.04em;color:var(--bone);padding-right:6px;text-transform:none}
.ca-chip .chip-copy{display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--line-hi);color:var(--gold-hi)}
.ca-chip .chip-copy svg{width:13px;height:13px}
.ca-chip .chip-copy.ok{background:var(--brass);color:var(--ink);font-size:0}
.dot{width:7px;height:7px;border-radius:50%;background:var(--brass);flex:none;box-shadow:0 0 8px var(--brass)}
.dot.live{background:#4fd07a;box-shadow:0 0 8px #4fd07a;animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.35}}
.socs{display:flex;gap:6px}
.soc{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line-hi);color:var(--bone);text-decoration:none;transition:.2s}
.soc svg{width:15px;height:15px}
.soc:hover{border-color:var(--brass);color:var(--gold-hi)}
.soc.soon{opacity:.4;cursor:help}

/* ============ hero ============ */
.hero{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:60px;align-items:center;padding:calc(var(--nav) + 40px) 30px calc(var(--tick) + 50px);max-width:var(--wrap);margin:0 auto}
.hero-logo{width:150px;height:auto;filter:drop-shadow(0 0 24px rgba(201,162,39,.25))}
.hero h1{margin:18px 0 0;font:900 clamp(48px,7.2vw,104px)/.95 var(--f-disp);letter-spacing:.08em}
.hero .tagline{margin:20px 0 0;font:500 clamp(18px,1.8vw,23px)/1.4 var(--f-disp);letter-spacing:.03em;text-transform:none;color:var(--bone);max-width:30ch}
.stats{display:flex;gap:34px;margin:30px 0 0;flex-wrap:wrap}
.stat b{display:block;font:700 26px/1 var(--f-mono);color:var(--gold-hi)}
.stat span{display:block;margin-top:8px;font:500 9.5px/1.3 var(--f-sign);letter-spacing:.22em;text-transform:uppercase;color:var(--ash-dim)}
.hero-acts{display:flex;gap:12px;margin:34px 0 0;flex-wrap:wrap}

/* kartu CA */
.ca-card{position:relative;background:linear-gradient(180deg,rgba(21,18,13,.94),rgba(11,10,8,.94));border:1px solid var(--line-hi);padding:24px 24px 22px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.ca-card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--brass),var(--gold-hi),var(--brass),transparent)}
.ca-top{display:flex;justify-content:space-between;align-items:baseline}
.ca-tick{font:900 26px/1 var(--f-disp);letter-spacing:.08em}
.ca-chain{font:500 9.5px/1 var(--f-sign);letter-spacing:.24em;text-transform:uppercase;color:var(--brass)}
.ca-when{margin:16px 0 0;font:700 19px/1.2 var(--f-sign);letter-spacing:.1em;text-transform:uppercase}
.ca-local{margin:4px 0 0;font:400 12px/1.4 var(--f-mono);color:var(--ash-dim)}
.ca-cd{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0 0}
.ca-cd div{border:1px solid var(--line);padding:9px 0 7px;text-align:center}
.ca-cd b{display:block;font:700 22px/1 var(--f-mono);color:var(--gold-hi)}
.ca-cd span{font:500 9px/1 var(--f-sign);letter-spacing:.2em;text-transform:uppercase;color:var(--ash-dim)}
.ca-row{display:flex;align-items:center;gap:10px;margin:18px 0 0;padding:10px 10px 10px 12px;border:1px solid var(--line);background:rgba(0,0,0,.35)}
.ca-row .k{font:500 9.5px/1 var(--f-sign);letter-spacing:.22em;text-transform:uppercase;color:var(--ash-dim)}
.ca-row code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 12.5px/1.2 var(--f-mono);color:var(--bone)}
.ca-row button{font:500 10px/1 var(--f-sign);letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--line-hi);padding:7px 10px;color:var(--gold-hi)}
.ca-row button.ok{background:var(--brass);color:var(--ink)}
.ca-mid{display:flex;justify-content:space-between;align-items:center;margin:14px 0 0}
.ca-mode{display:flex;align-items:center;gap:8px;font:500 10px/1 var(--f-sign);letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.ca-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 0}
.ca-acts .btn{height:42px;padding:0 10px}

/* ============ kepala bagian ============ */
.sec-head{display:grid;grid-template-columns:110px minmax(0,1.05fr) minmax(0,.95fr);gap:34px;align-items:start;padding-bottom:36px;margin-bottom:40px;border-bottom:1px solid var(--line);position:relative}
.sec-head::after{content:"";position:absolute;left:0;bottom:-1px;width:64px;height:1px;background:var(--brass)}
.secno{font:700 64px/.9 var(--f-disp);color:transparent;-webkit-text-stroke:1px var(--brass);letter-spacing:.02em}
.sec-head h2{margin:12px 0 0;font-size:clamp(28px,3.4vw,46px);letter-spacing:.05em}
.sec-head .lede{padding-top:6px}

/* 01 lembah (transparan) */
.valley-stage{min-height:100vh;display:flex;align-items:flex-end;padding:0 0 calc(var(--tick) + 70px)}
.valley-stage .wrap{width:100%}
.valley-card{max-width:520px;padding:30px;background:linear-gradient(180deg,rgba(11,10,8,.2),rgba(11,10,8,.85) 30%);border-left:1px solid var(--brass)}
.valley-card .secno{font-size:56px}
.valley-card h2{margin:10px 0 14px;font-size:clamp(26px,3vw,40px)}
.valley-card .stats{margin-top:22px}

/* 02 kubu: potret */
.houses{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.hcard{position:relative;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;transition:.25s}
.hcard:hover{border-color:var(--line-hi);transform:translateY(-3px)}
.hcard .portrait{aspect-ratio:3/4;overflow:hidden;position:relative}
.hcard .portrait img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.hcard:hover .portrait img{transform:scale(1.04)}
.hcard .portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(11,10,8,.92))}
.hcard .glyph-tag{position:absolute;left:14px;bottom:12px;z-index:2;font-size:30px;color:var(--hc-l);filter:drop-shadow(0 0 8px rgba(0,0,0,.9))}
.hcard .bd{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1}
.hcard h3{font-size:22px;letter-spacing:.08em}
.hcard .ttl{margin:4px 0 12px;font:500 10px/1.3 var(--f-sign);letter-spacing:.22em;text-transform:uppercase;color:var(--hc-l,var(--brass))}
.hcard p{margin:0 0 14px;font-size:13px;line-height:1.6;color:var(--ash)}
.hcard .kv{margin:auto 0 0;border-top:1px solid var(--line);padding-top:12px;display:grid;grid-template-columns:auto 1fr;gap:6px 10px;font-size:11.5px}
.hcard .kv dt{font:500 9.5px/1.6 var(--f-sign);letter-spacing:.2em;text-transform:uppercase;color:var(--ash-dim)}
.hcard .kv dd{margin:0;text-align:right;font-family:var(--f-mono);color:var(--bone)}
.hbar{height:3px;background:rgba(255,255,255,.07);margin:12px 0 0;position:relative}
.hbar i{position:absolute;inset:0 auto 0 0;background:var(--hc-l);box-shadow:0 0 10px var(--hc-l)}

/* 03 piramida (register) */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:28px;overflow-x:auto;scrollbar-width:none}
.tabs button{padding:14px 18px;font:500 11px/1 var(--f-sign);letter-spacing:.2em;text-transform:uppercase;color:var(--ash);border-bottom:2px solid transparent;white-space:nowrap}
.tabs button:hover{color:var(--bone)}
.tabs button.on{color:var(--gold-hi);border-color:var(--brass)}
.tabs .glyph{font-size:15px;margin-right:6px;color:var(--hc-l)}
.reg{display:grid;grid-template-columns:minmax(0,1.15fr) 230px 320px;gap:26px;align-items:stretch}
.reg .art{position:relative;aspect-ratio:1/1;border:1px solid var(--line);overflow:hidden;margin:0}
.reg .art img{width:100%;height:100%;object-fit:cover}
.reg .art figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 14px;background:linear-gradient(180deg,transparent,rgba(11,10,8,.92));font:500 10px/1 var(--f-sign);letter-spacing:.24em;text-transform:uppercase;color:var(--ash)}
.courses{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:18px 14px;border:1px solid var(--line);background:var(--panel)}
.courses .row{height:7px;margin:0 auto;background:rgba(239,231,214,.11);transition:background .4s}
.courses .row.on{background:linear-gradient(90deg,#8a6f1c,#d9b74a,#8a6f1c)}
.courses .row.part{background:linear-gradient(90deg,#8a6f1c 0,#d9b74a var(--p),rgba(239,231,214,.11) var(--p))}
.courses .capm{width:0;height:0;margin:0 auto 4px;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:12px solid rgba(255,255,255,.08)}
.courses .capm.on{border-bottom-color:var(--gold-hi);filter:drop-shadow(0 0 8px var(--brass))}
.courses .lab{margin-top:12px;text-align:center;font:500 9.5px/1.4 var(--f-sign);letter-spacing:.2em;text-transform:uppercase;color:var(--ash-dim)}
.courses .lab b{display:block;font:700 22px/1 var(--f-mono);color:var(--gold-hi);letter-spacing:0;margin-bottom:6px}
.deed{background:var(--paper);color:var(--ink-on-paper);padding:22px 22px 20px;position:relative;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.deed::before{content:"";position:absolute;inset:7px;border:1px solid rgba(27,23,18,.25);pointer-events:none}
.deed .no{font:700 10.5px/1 var(--f-mono);letter-spacing:.14em;color:#6b5a3c}
.deed h3{margin:10px 0 4px;font-size:21px;color:var(--ink-on-paper)}
.deed .mean{margin:0 0 14px;font-size:13px;color:#5b4d36}
.deed dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 12px;font-size:12px;border-top:1px solid rgba(27,23,18,.2);padding-top:12px}
.deed dt{font:500 9.5px/1.6 var(--f-sign);letter-spacing:.2em;text-transform:uppercase;color:#7a6a4c}
.deed dd{margin:0;text-align:right;font-family:var(--f-mono);font-weight:700}
.deed .seal{position:absolute;right:16px;top:16px;width:34px;height:34px;border-radius:50%;background:var(--hc);box-shadow:inset 0 0 0 3px rgba(255,255,255,.25),0 2px 6px rgba(0,0,0,.3);display:grid;place-items:center;color:#fff;font-size:16px}
.deed .act{margin:16px 0 0;width:100%;position:relative}

/* 04 sight */
.sight-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:30px}
.step-lab{margin:0 0 12px;font:500 10.5px/1 var(--f-sign);letter-spacing:.24em;text-transform:uppercase;color:var(--ash-dim)}
.pick{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:26px}
.pick button{padding:14px 6px 12px;border:1px solid var(--line);background:var(--panel);font:500 11px/1 var(--f-sign);letter-spacing:.18em;text-transform:uppercase;color:var(--ash);transition:.2s}
.pick button .glyph{display:block;font-size:22px;margin-bottom:8px;color:var(--hc-l)}
.pick button:hover{border-color:var(--line-hi);color:var(--bone)}
.pick button.on{background:linear-gradient(180deg,rgba(201,162,39,.22),rgba(201,162,39,.06));border-color:var(--brass);color:var(--gold-hi)}
.sight-box{border:1px solid var(--line-hi);background:var(--panel);touch-action:none;user-select:none;-webkit-user-select:none}
.sight-stage{padding:14px 14px 0;cursor:pointer}
.sight-svg{width:100%;height:auto;display:block}
.sight-foot{padding:14px}
.sight-foot .btn{width:100%}
.sight-res{min-height:48px;padding:13px 16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ash)}
.sight-res b{font:500 11px/1 var(--f-sign);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi);margin-right:6px}
.hold-btn{position:relative;overflow:hidden}
.hold-btn::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.25);transform:scaleX(0);transform-origin:left}
.sight-hold .hold-btn::after,.hold-btn.pressed::after{transform:scaleX(1);transition:transform 1.4s linear}
.ledger{border:1px solid var(--line);background:var(--panel);padding:22px 22px 20px}
.ledger .row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px}
.ledger .row span{font:500 10px/1.6 var(--f-sign);letter-spacing:.2em;text-transform:uppercase;color:var(--ash-dim)}
.ledger .row b{font:700 13px/1.6 var(--f-mono);color:var(--bone);text-align:right}
.ledger .big{margin:22px 0 6px;padding:20px;text-align:center;border:1px solid var(--line-hi)}
.ledger .big b{display:block;font:700 48px/1 var(--f-mono);color:var(--gold-hi)}
.ledger .big span{display:block;margin-top:10px;font:500 9.5px/1 var(--f-sign);letter-spacing:.24em;text-transform:uppercase;color:var(--ash-dim)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.duo figure{margin:0;position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line)}
.duo img{width:100%;height:100%;object-fit:cover}
.duo figcaption{position:absolute;left:12px;bottom:10px;font:500 9.5px/1 var(--f-sign);letter-spacing:.24em;text-transform:uppercase;color:var(--bone);text-shadow:0 1px 6px #000}

/* 05 lapis (tingkatan) */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.tier{padding:28px 24px 26px;border-right:1px solid var(--line);position:relative}
.tier:last-child{border-right:0}
.tier::before{content:"";position:absolute;left:0;top:-1px;width:0;height:2px;background:var(--brass);transition:width .6s}
.tier:hover::before{width:100%}
.tier b{display:block;font:700 54px/1 var(--f-disp);color:var(--gold-hi)}
.tier b small{font:500 12px/1 var(--f-sign);letter-spacing:.2em;color:var(--brass);margin-left:6px}
.tier h4{margin:14px 0 8px;font:500 12px/1.3 var(--f-sign);letter-spacing:.2em;color:var(--bone)}
.tier p{margin:0;font-size:13px;color:var(--ash)}

/* 06 banjir */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.step{padding:26px 22px;border-right:1px solid var(--line)}
.step:last-child{border-right:0}
.step b{font:700 26px/1 var(--f-disp);color:var(--brass)}
.step h4{margin:12px 0 8px;font:500 12px/1.3 var(--f-sign);letter-spacing:.2em}
.step p{margin:0;font-size:13px;color:var(--ash)}
.tag{display:inline-block;margin-top:12px;padding:4px 8px;border:1px solid var(--line-hi);font:500 9px/1.2 var(--f-sign);letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.tag.plan{border-color:rgba(181,69,43,.6);color:#e08a6e}
.note{margin:24px 0 0;padding:16px 18px;border-left:2px solid var(--brass);background:rgba(201,162,39,.05);font-size:13px;color:var(--ash);max-width:880px}

/* 07 token */
.tok{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:start}
.tok-word{font:900 clamp(38px,4.4vw,66px)/.95 var(--f-disp);letter-spacing:.02em}
.tok-sub{margin:12px 0 0;font:500 10.5px/1 var(--f-sign);letter-spacing:.24em;text-transform:uppercase;color:var(--ash-dim)}
.tok-chip{display:inline-block;margin-top:16px;padding:6px 10px;border:1px solid var(--line-hi);font:500 10px/1 var(--f-sign);letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.facts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.fact{padding:18px 20px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.fact:nth-child(2n){border-right:0}
.fact span{display:block;font:500 9.5px/1 var(--f-sign);letter-spacing:.24em;text-transform:uppercase;color:var(--ash-dim)}
.fact b{display:block;margin-top:10px;font:700 17px/1.2 var(--f-mono);color:var(--bone)}
.uses{margin:30px 0 0}
.use{display:grid;grid-template-columns:150px 1fr auto;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.use b{font:700 13px/1.2 var(--f-sign);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-hi)}
.use p{margin:0;font-size:13px;color:var(--ash)}

/* 08 catatan */
.rec{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.check{list-style:none;margin:0;padding:0}
.check li{display:flex;gap:12px;align-items:center;padding:9px 0;font-size:13.5px;color:var(--ash)}
.check li::before{content:"";width:12px;height:12px;border:1px solid var(--line-hi);flex:none}
.check li.done{color:var(--bone)}
.check li.done::before{background:var(--brass);box-shadow:inset 0 0 0 2px var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:14px;padding:16px 0;font:500 13px/1.3 var(--f-sign);letter-spacing:.14em;text-transform:uppercase}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brass);font-size:16px}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 16px;color:var(--ash);font-size:13.5px}
.ledger-list .row{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.ledger-list .row b{font:700 12px/1.5 var(--f-mono);color:var(--brass)}
.ledger-list .row span{font-size:13.5px}
.ledger-list .row small{display:block;font:400 11.5px/1.4 var(--f-mono);color:var(--ash-dim)}

/* footer + pita */
footer{position:relative;z-index:2;background:#080706;border-top:1px solid var(--line);padding:52px 0 calc(var(--tick) + 40px)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.official{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font:500 10px/1 var(--f-sign);letter-spacing:.2em;text-transform:uppercase;color:var(--ash-dim)}
.official code{font:700 11.5px/1 var(--f-mono);letter-spacing:0;text-transform:none;color:var(--bone);padding:7px 9px;border:1px solid var(--line)}
footer small{display:block;margin:28px 0 0;color:var(--ash-dim);font-size:12px;line-height:1.6;max-width:900px}
.ticker{position:fixed;left:0;right:0;bottom:0;height:var(--tick);z-index:45;background:#080706;border-top:1px solid var(--line);overflow:hidden;display:flex;align-items:center}
.ticker .run{display:flex;gap:44px;white-space:nowrap;animation:run 60s linear infinite;padding-left:44px}
.ticker span{font:500 10.5px/1 var(--f-sign);letter-spacing:.22em;text-transform:uppercase;color:var(--ash-dim)}
.ticker span b{color:var(--brass);font-weight:500}
@keyframes run{to{transform:translateX(-50%)}}

.pop{position:fixed;z-index:90;left:50%;bottom:calc(var(--tick) + 20px);transform:translate(-50%,16px);opacity:0;pointer-events:none;max-width:min(92vw,460px);padding:14px 18px;border:1px solid var(--line-hi);background:var(--panel);font-size:13.5px;transition:.25s;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.pop.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}

/* muncul saat digulir */
.rv{opacity:0;transform:translateY(18px);transition:opacity .9s,transform .9s;animation:rvSafe .8s 3s forwards}
@keyframes rvSafe{to{opacity:1;transform:none}}      /* pengaman: tak ada elemen yang tersangkut tak terlihat */
.rv.in{opacity:1;transform:none}

/* ============ responsif ============ */
@media (max-width:1240px){.nav-links{display:none}.reg{grid-template-columns:minmax(0,1fr) 200px}.reg .deed{grid-column:1/-1}}
@media (max-width:1100px){.houses{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:34px}
  .sec-head{grid-template-columns:1fr;gap:12px}
  .sight-grid,.tok,.rec{grid-template-columns:1fr}
  .tiers,.steps{grid-template-columns:1fr 1fr}
  .tier:nth-child(2),.step:nth-child(2){border-right:0}
}
@media (max-width:640px){
  :root{--nav:64px}
  .wrap{padding:0 18px}
  .topnav{padding:0 16px;gap:10px}
  .brand img{width:38px;height:38px}
  .brand b{display:none}
  .nav-right .socs,#walletBtn{display:none}
  .hero{padding:calc(var(--nav) + 26px) 18px calc(var(--tick) + 40px)}
  .hero-logo,.hero .stats{display:none}
  .hero h1{margin-top:0;font-size:52px}
  .hero .tagline{font-size:16px;margin-top:12px}
  .hero-acts{margin-top:20px}
  .hero-acts .btn{height:42px;padding:0 16px}
  .intro-logo{width:min(170px,44vw)}
  .stats{gap:20px}
  .houses{grid-template-columns:1fr 1fr}
  .reg{grid-template-columns:1fr}
  .pick button{padding:10px 2px;font-size:9px;letter-spacing:.08em}
  .tiers,.steps{grid-template-columns:1fr}
  .tier,.step{border-right:0;border-bottom:1px solid var(--line)}
  .facts{grid-template-columns:1fr}
  .fact{border-right:0}
  .use{grid-template-columns:1fr}
  section{padding:80px 0}
  .secno{font-size:48px}
  .valley-card{padding:22px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* 04 rantai kerja */
.chain{display:grid;grid-template-columns:1fr 40px 1fr 40px 1fr;align-items:stretch;gap:0}
.chain .link{border:1px solid var(--line);background:rgba(21,18,13,.92);padding:24px 22px}
.chain .link .glyph{display:block;font-size:34px;color:var(--gold-hi);margin-bottom:14px}
.chain .link b{font:500 10.5px/1 var(--f-sign);letter-spacing:.24em;text-transform:uppercase;color:var(--brass)}
.chain .link h4{margin:10px 0 8px;font-size:22px;letter-spacing:.06em}
.chain .link p{margin:0;font-size:13.5px;color:var(--ash)}
.chain .arrow{display:grid;place-items:center;color:var(--brass);font:400 22px/1 var(--f-sign)}
.rules{display:grid;grid-template-columns:repeat(3,1fr);margin-top:26px;border-top:1px solid var(--line)}
.rule{padding:20px 20px 4px 0;margin-right:20px}
.rule b{display:block;font:500 12px/1.2 var(--f-sign);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi)}
.rule p{margin:8px 0 0;font-size:13px;color:var(--ash)}
#works .hero-acts{margin-top:34px}
@media (max-width:980px){.chain{grid-template-columns:1fr}.chain .arrow{transform:rotate(90deg);height:34px}.rules{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.rules{grid-template-columns:1fr}}