/* =========================================================
   FROSTLOCK — "Pixel Frost" design system (landing + app)
   ========================================================= */
:root{
  --bg:#050608;--panel:#0b0d12;--panel2:#10131a;--line:rgba(140,200,255,.08);--line2:rgba(140,200,255,.16);
  --t:#f2f6ff;--mut:#7d8799;--soft:#aab3c4;--ice:#7be3ff;--ice2:#3aa0ff;--ice3:#2a5bd7;--snow:#e9fbff;
  --melt:#ff8a3d;--melt2:#ff4d5e;--lime:#c6ff4f;--vio:#9b87ff;--mint:#5eead4;--px:14px;
  --f-px:Silkscreen,monospace;--f-body:Manrope,system-ui,sans-serif;--f-mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--t);font:500 16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}
img{max-width:100%;display:block}
h1,h2,h3,h4,h5{margin:0}
p{margin:0}
.px{font-family:var(--f-px);font-weight:400;letter-spacing:.14em;text-transform:uppercase}
.mono{font-family:var(--f-mono);font-feature-settings:'tnum'}
.wrap{width:min(1200px,100% - 40px);margin-inline:auto;position:relative}
.mut,.muted{color:var(--mut)}.ice{color:var(--ice)}.melt{color:var(--melt)}
.small{font-size:.9rem}.tiny{font-size:.75rem}.center{text-align:center}.grow{flex:1;min-width:0}.upper{text-transform:uppercase}
.up{color:var(--lime)}.down{color:var(--melt2)}
:focus-visible{outline:2px solid var(--ice);outline-offset:3px}

/* ---------- background ---------- */
.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:var(--px) var(--px);mask-image:radial-gradient(ellipse 120% 90% at 50% 30%,#000 40%,rgba(0,0,0,.35));-webkit-mask-image:radial-gradient(ellipse 120% 90% at 50% 30%,#000 40%,rgba(0,0,0,.35))}
#fx{position:fixed;inset:0;z-index:0;pointer-events:none;width:100%;height:100%}
main,header,footer,.demo-banner{position:relative;z-index:2}

/* ---------- pixel marks ---------- */
.mark{display:grid;grid-template-columns:repeat(7,4px);grid-auto-rows:4px}
.mark i{display:block}
.brand{display:inline-flex;align-items:center;gap:12px;font:400 .82rem var(--f-px);letter-spacing:.2em}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.solid,.nav.scrolled,.app .nav{background:rgba(5,6,8,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:var(--line2)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.nav .links{display:flex;gap:30px;font-size:.88rem;font-weight:600;color:#c7cfdc}
.nav .links a:hover{color:#fff}.nav .links a.on{color:var(--ice)}
.tabs{display:flex;gap:4px;padding:4px;box-shadow:inset 0 0 0 1px var(--line2);background:var(--panel)}
.tab{padding:8px 16px;font:400 .66rem var(--f-px);letter-spacing:.14em;color:var(--mut);text-transform:uppercase}
.tab:hover{color:#fff}.tab.is-on{background:var(--ice);color:#03121a}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;font:400 .72rem var(--f-px);letter-spacing:.14em;text-transform:uppercase;border:0;position:relative;white-space:nowrap;transition:transform .15s,box-shadow .2s,background .2s,color .2s}
.btn-ice{background:var(--ice);color:#03121a;box-shadow:0 0 0 1px var(--ice),0 8px 24px -8px rgba(123,227,255,.6)}
.btn-ice:hover{background:#fff;transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ice2),0 0 0 1px #fff}
.btn-line,.btn-ghost{background:transparent;color:var(--t);box-shadow:inset 0 0 0 1px var(--line2)}
.btn-line:hover,.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--ice);color:var(--ice)}
.btn-melt{background:var(--melt);color:#1b0800}.btn-melt:hover{background:#ffb27a;transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--melt2)}
.btn-lg{padding:16px 22px;font-size:.78rem}.btn-sm{padding:8px 12px;font-size:.62rem}.btn-block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- headings ---------- */
section.s{padding:140px 0 0}
.eyebrow{font:400 .68rem var(--f-px);letter-spacing:.18em;color:var(--ice);text-transform:uppercase;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:'';width:8px;height:8px;background:var(--ice);box-shadow:0 0 10px var(--ice)}
.h2,.section-head h2{font:700 clamp(1.7rem,4vw,3rem)/1.1 var(--f-px);letter-spacing:.06em;text-transform:uppercase;margin:16px 0 0}
.section-head{margin-bottom:34px;display:grid;gap:4px}
.section-head.row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.section-head p{color:var(--soft);margin-top:10px}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

/* =========================================================
   LANDING
   ========================================================= */
.hero{min-height:100vh;display:grid;place-items:center;text-align:center;padding:120px 0 80px;position:relative;overflow:hidden}
.wordmark{display:flex;gap:calc(var(--wp) * 2);justify-content:center;align-items:flex-end;--wp:min(clamp(6px,1.25vw,15px),calc((100vw - 48px) / 63));margin:0 auto}
.glyph{display:grid;grid-template-columns:repeat(var(--w),var(--wp));grid-auto-rows:var(--wp)}
.glyph i{display:block;opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4);animation:land .9s cubic-bezier(.2,.9,.25,1.15) forwards;animation-delay:var(--d)}
@keyframes land{to{opacity:1;transform:none}}
.glyph i.on{background:var(--t);box-shadow:0 0 18px rgba(233,251,255,.18)}
.glyph.icon i.c1{background:var(--snow)}.glyph.icon i.c2{background:var(--ice)}.glyph.icon i.c3{background:var(--ice2)}.glyph.icon i.c4{background:var(--ice3)}
.glyph.icon{filter:drop-shadow(0 0 22px rgba(123,227,255,.55));animation:pulse 3.2s ease-in-out 1.4s infinite}
@keyframes pulse{50%{filter:drop-shadow(0 0 36px rgba(123,227,255,.85))}}
.tagline{font-size:clamp(1.3rem,2.6vw,2rem);font-weight:700;letter-spacing:-.02em;margin:34px 0 14px;opacity:0;animation:fade .8s 1.1s forwards}
.hero .sub{max-width:560px;margin:0 auto 34px;color:var(--soft);opacity:0;animation:fade .8s 1.25s forwards}
.hero .ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;opacity:0;animation:fade .8s 1.4s forwards}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.chain-chips{display:flex;gap:10px;justify-content:center;margin-top:34px;flex-wrap:wrap;opacity:0;animation:fade .8s 1.55s forwards}
.chain-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;font-size:.8rem;font-weight:600;color:#c7cfdc;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--line2)}
.chain-chip i{width:8px;height:8px;background:var(--c);box-shadow:0 0 10px var(--c)}
.chain-chip em{font:400 .55rem var(--f-px);letter-spacing:.14em;text-transform:uppercase;font-style:normal;padding:3px 6px;background:var(--c);color:#050608}
.chain-chip.later{color:var(--mut)}
.chain-chip.later i{background:transparent;box-shadow:inset 0 0 0 2px var(--c)}
.chain-chip.later em{background:transparent;color:var(--mut);box-shadow:inset 0 0 0 1px var(--line2)}
.ca-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px;font-size:.78rem;opacity:0;animation:fade .8s 1.7s forwards}
.ca-row:empty{display:none}
.ca-row .px{font-size:.58rem;color:var(--ice)}
.ca-row code{padding:5px 10px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line2);color:var(--t)}
.ca-btn{border:0;background:transparent;box-shadow:inset 0 0 0 1px var(--ice);color:var(--ice);font:400 .58rem var(--f-px);letter-spacing:.12em;text-transform:uppercase;padding:6px 10px}
.ca-btn:hover{background:var(--ice);color:#03121a}
.ca-btn:disabled{box-shadow:inset 0 0 0 1px var(--line2);color:#5b6475;background:transparent;cursor:not-allowed}
.ca-row code.ca-soon{color:var(--melt);letter-spacing:.06em;min-width:150px;text-align:center;box-shadow:inset 0 0 0 1px rgba(255,138,61,.35)}
.ca-row code.ca-soon::before{content:'';display:inline-block;width:6px;height:6px;background:var(--melt);margin-right:8px;vertical-align:middle;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.nav-cta{display:flex;align-items:center;gap:8px}
.social{display:flex;gap:6px}
.social a{width:36px;height:36px;display:grid;place-items:center;color:#c7cfdc;box-shadow:inset 0 0 0 1px var(--line2);transition:.2s}
.social a:hover{color:var(--ice);box-shadow:inset 0 0 0 1px var(--ice)}
.social span.is-soon{width:36px;height:36px;display:grid;place-items:center;color:#5b6475;box-shadow:inset 0 0 0 1px var(--line);position:relative;cursor:default}
.social span.is-soon::after{content:attr(data-tip);position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:4px 7px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line2);font:400 .5rem var(--f-px);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s}
.social span.is-soon:hover::after{opacity:1}
.fb-social .soon{margin-left:14px;font-size:.78rem}
.fb-social a{margin-left:14px;color:#c7cfdc}.fb-social a:hover{color:var(--ice)}
.affil{font-size:.72rem;color:var(--mut);opacity:.8;margin-top:14px}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:grid;justify-items:center;gap:8px;font-size:.62rem;color:var(--mut);opacity:0;animation:fade .8s 2s forwards}
.scroll-hint .arrow{display:grid;grid-template-columns:repeat(5,4px);grid-auto-rows:4px;animation:bob 1.6s ease-in-out infinite}
.scroll-hint .arrow i{display:block}.scroll-hint .arrow i.on{background:var(--ice)}
@keyframes bob{50%{transform:translateY(5px)}}

/* how it works (pinned) */
.how{height:330vh;position:relative}
.how-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center}
.how-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center;padding-left:40px}
.how-left{position:relative;min-height:380px}
.step-txt{position:absolute;inset:auto 0 0 0;opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s;pointer-events:none}
.step-txt.on{opacity:1;transform:none;pointer-events:auto}
.step-txt .n{font:400 .7rem var(--f-px);color:var(--melt);letter-spacing:.18em}
.step-txt h3{font:700 clamp(2rem,4.4vw,3.4rem)/1 var(--f-px);letter-spacing:.08em;margin:12px 0 16px;text-transform:uppercase}
.step-txt p{color:var(--soft);max-width:400px}
.sprite{position:absolute;top:0;left:0;display:grid;grid-template-columns:repeat(10,16px);grid-auto-rows:16px;gap:2px}
.sprite i{display:block;transition:background .45s,opacity .45s}
.progress{position:absolute;left:-34px;top:50%;transform:translateY(-50%);display:grid;gap:10px}
.progress i{width:8px;height:22px;background:var(--line2);transition:background .3s,height .3s}
.progress i.on{background:var(--ice);height:40px;box-shadow:0 0 12px var(--ice)}
.stage{position:relative;height:440px}
.vis{position:absolute;inset:0;opacity:0;transform:scale(.97);transition:opacity .5s,transform .5s;pointer-events:none}
.vis.on{opacity:1;transform:none;pointer-events:auto}
.frame{background:var(--panel);box-shadow:inset 0 0 0 1px var(--line2);padding:22px;height:100%}
.frame-h{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--mut);margin-bottom:12px;gap:12px}
#chart{width:100%;height:330px;display:block}
#chart .gl{stroke:rgba(140,200,255,.07)}
#chart text{fill:var(--mut);font:500 10px var(--f-body)}
.callout{position:absolute;top:56px;left:46%;padding:10px 14px;background:rgba(5,6,8,.9);box-shadow:inset 0 0 0 1px var(--melt);font-size:.75rem}
.callout b{display:block;font-size:1.25rem;color:var(--melt)}
.range-row{display:flex;align-items:center;gap:14px;font-size:.8rem;color:var(--mut);margin-top:8px}
.grids{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center}
.pgrid{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;padding:12px;background:var(--panel2);box-shadow:inset 0 0 0 1px var(--line2)}
.pgrid i{aspect-ratio:1;display:block;background:rgba(255,255,255,.05);transition:background .35s,transform .35s,box-shadow .35s}
.pgrid i.g{background:#4a5160}.pgrid i.l1{background:var(--snow)}.pgrid i.l2{background:var(--ice)}.pgrid i.l3{background:var(--ice2)}.pgrid i.l4{background:var(--ice3)}
.pgrid i.hot{background:var(--melt);box-shadow:0 0 10px var(--melt)}
.pgrid i.gone{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,138,61,.25);transform:scale(.7)}
.pgrid-label{display:flex;justify-content:space-between;font-size:.78rem;margin-top:8px}
.arrow-r{color:var(--ice);font:400 1.2rem var(--f-px)}
.lockbar{margin-top:18px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;box-shadow:inset 0 0 0 1px var(--ice);background:rgba(123,227,255,.05)}
.lockbar .px{font-size:.66rem;color:var(--ice)}
.lockbar b{font-size:1.15rem}
.lock-opts{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.lock-opts button{padding:6px 10px;font:400 .62rem var(--f-px);letter-spacing:.1em;background:transparent;box-shadow:inset 0 0 0 1px var(--line2);border:0;color:var(--mut)}
.lock-opts button.on{box-shadow:inset 0 0 0 1px var(--ice);color:var(--ice);background:rgba(123,227,255,.08)}
.meltwrap{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.mstats{display:grid;gap:10px}
.mstat{padding:14px 16px;background:var(--panel2);box-shadow:inset 0 0 0 1px var(--line2)}
.mstat small{display:block;color:var(--mut);font-size:.72rem}
.mstat b{font-size:1.35rem}

/* statement */
.statement{text-align:center;padding:160px 0 40px;position:relative}
.statement p{font-size:clamp(1.6rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.03em;line-height:1.2;max-width:980px;margin:0 auto}
.statement .rh{color:var(--lime)}.statement .sol{color:var(--vio)}.statement .ely{color:var(--mint)}.statement .fz{color:var(--ice)}
.floaty{position:absolute;display:grid;grid-template-columns:repeat(5,7px);grid-auto-rows:7px;will-change:transform}
.floaty i{display:block}

/* skin */
.skin{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
.card{background:var(--panel);box-shadow:inset 0 0 0 1px var(--line2);padding:34px;position:relative;transition:box-shadow .25s,transform .25s}
.card:hover{box-shadow:inset 0 0 0 1px var(--ice);transform:translateY(-3px)}
.card .tag{font:400 .64rem var(--f-px);letter-spacing:.16em}
.card h3{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;margin:12px 0 20px}
.card ul{list-style:none;padding:0;margin:0;display:grid;gap:14px;color:#b8c1d1}
.card li{padding-left:24px;position:relative}
.card li::before{content:'';position:absolute;left:0;top:8px;width:8px;height:8px;background:var(--c,var(--ice))}
.card li b{color:#fff}

/* landing simulator */
.sim{margin-top:44px;padding:16px;background:var(--ice);box-shadow:0 0 80px -20px rgba(123,227,255,.45)}
.sim-head{display:flex;justify-content:space-between;align-items:flex-end;padding:6px 6px 16px;color:#03121a;gap:12px;flex-wrap:wrap}
.sim-head .px{font-size:.66rem}
.sim-head h2{font:700 clamp(1.3rem,3vw,2.2rem) var(--f-px);letter-spacing:.08em;margin:6px 0 0;text-transform:uppercase}
.sim-body{display:grid;grid-template-columns:1fr 1.05fr;gap:12px}
.pane{background:var(--bg);padding:24px;min-width:0}
.lbl{font:400 .62rem var(--f-px);letter-spacing:.14em;color:var(--mut);margin:0 0 10px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;text-transform:uppercase}
.lbl b{font:700 1rem var(--f-mono);color:#fff;letter-spacing:0;text-transform:none}
.grp{margin-bottom:22px}
.net3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.net3 button{padding:10px;background:var(--panel2);border:0;box-shadow:inset 0 0 0 1px var(--line2);text-align:left;display:grid;gap:2px;transition:.2s}
.net3 button b{font-size:.84rem}.net3 button small{font-size:.7rem;color:var(--mut)}
.net3 button.on{box-shadow:inset 0 0 0 1px var(--ice);background:rgba(123,227,255,.08)}
.net3 button i{display:inline-block;width:8px;height:8px;background:var(--c);margin-right:6px}
.pairs{display:flex;gap:6px}
.pairs button{padding:8px 14px;background:var(--panel2);border:0;box-shadow:inset 0 0 0 1px var(--line2);font-weight:700;font-size:.82rem}
.pairs button.on{box-shadow:inset 0 0 0 1px var(--ice);color:var(--ice)}
.lockrow{display:flex;gap:4px;flex-wrap:wrap}
.lockrow button{flex:1;min-width:38px;padding:8px 0;background:var(--panel2);border:0;box-shadow:inset 0 0 0 1px var(--line2);font:400 .6rem var(--f-px);color:var(--mut)}
.lockrow button.on{box-shadow:inset 0 0 0 1px var(--ice);color:var(--ice);background:rgba(123,227,255,.08)}
.recv{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding-bottom:20px;border-bottom:1px solid var(--line2)}
.recv .big{font:800 clamp(2.4rem,5vw,3.6rem)/1 var(--f-body);letter-spacing:-.04em}
.recv small{display:block;color:var(--mut);font-size:.78rem;margin-top:6px}
.recv .side{text-align:right}.recv .side b{font:700 1.4rem var(--f-mono)}
.stackbar{display:flex;height:16px;margin:22px 0 10px;background:#1c212b}
.stackbar span{transition:width .5s cubic-bezier(.2,.8,.2,1)}
.sb{background:repeating-linear-gradient(90deg,var(--melt) 0 10px,#e0702a 10px 12px)}
.sk{background:repeating-linear-gradient(90deg,var(--ice) 0 10px,#57c6ea 10px 12px)}
.so{background:repeating-linear-gradient(90deg,#3a4150 0 10px,#2f3542 10px 12px)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.78rem;color:var(--mut)}
.legend i{display:inline-block;width:9px;height:9px;margin-right:6px}
.legend b{color:#fff;margin-left:4px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line2);margin-top:22px}
.kpis div{background:var(--bg);padding:16px}
.kpis small{display:block;font:400 .58rem var(--f-px);letter-spacing:.12em;color:var(--mut);margin-bottom:6px;text-transform:uppercase}
.kpis b{font:700 1.3rem var(--f-mono)}
.fine{font-size:.72rem;color:var(--mut);margin-top:14px}

/* tokenomics */
.tok{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;margin-top:10px}
.tok p{color:var(--soft);margin-top:18px}
.pixbar{display:grid;grid-template-columns:repeat(20,1fr);gap:4px;margin:26px 0 18px}
.pixbar i{aspect-ratio:1;display:block;background:var(--ice);opacity:0;transform:translateY(-12px);transition:opacity .4s,transform .4s}
.pixbar.in i{opacity:1;transform:none}
.pixbar i.b{background:var(--melt);box-shadow:0 0 10px var(--melt)}.pixbar i.o{background:var(--vio)}
.split-rows{display:grid;gap:10px}
.split-rows div{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line2)}
.split-rows i{width:10px;height:10px;background:var(--c)}
.split-rows b{margin-left:auto;font:700 1.1rem var(--f-mono)}

/* faq */
.faq{max-width:860px;margin:44px auto 0}
.faq details{box-shadow:inset 0 -1px 0 var(--line2)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-weight:700;font-size:1.08rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:4px;top:50%;transform:translateY(-50%);font:400 1.2rem var(--f-px);color:var(--ice);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq p{margin:0 0 22px;color:var(--soft);max-width:720px}

/* cta + footer */
.cta{margin-top:150px;text-align:center;padding:90px 20px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line2);position:relative;overflow:hidden}
.cta h2{font:700 clamp(1.6rem,4vw,3rem) var(--f-px);letter-spacing:.06em;text-transform:uppercase;margin:0 0 14px}
.cta p{color:var(--soft);margin:0 0 30px}
.cta::before{content:'';position:absolute;inset:auto -10% -60% -10%;height:120%;background:radial-gradient(closest-side,rgba(123,227,255,.18),transparent)}
.cta>*{position:relative}
footer{margin-top:100px;border-top:1px solid var(--line2);padding:50px 0 30px;background:rgba(5,6,8,.85)}
footer.slim{margin-top:80px;padding:26px 0}
.fg{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
.fg h5{font:400 .64rem var(--f-px);letter-spacing:.16em;color:var(--mut);margin:0 0 14px;text-transform:uppercase}
.fg a{display:block;color:#c7cfdc;font-size:.92rem;margin-bottom:8px}.fg a:hover{color:var(--ice)}
.fb{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:40px;font-size:.78rem;color:var(--mut)}
footer.slim .fb{margin-top:0}

/* =========================================================
   APP (explore + launch)
   ========================================================= */
.app main{padding-top:20px}
.demo-banner{margin-top:84px;padding:10px 16px;font-size:.84rem;color:#ffd7b3;background:rgba(255,138,61,.07);box-shadow:inset 0 0 0 1px rgba(255,138,61,.35);display:flex;align-items:center;gap:12px}
.dot{width:8px;height:8px;background:var(--melt);box-shadow:0 0 10px var(--melt);display:inline-block;flex:none;animation:blink 1.4s steps(2) infinite}
@keyframes blink{50%{opacity:.3}}
.view{padding-top:40px;animation:fade .45s ease both}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line2);box-shadow:0 0 0 1px var(--line2);margin-bottom:18px}
.stat{background:var(--panel);padding:18px 20px;display:grid;gap:4px}
.stat small{font:400 .58rem var(--f-px);letter-spacing:.12em;color:var(--mut);text-transform:uppercase}
.stat b{font:700 1.5rem var(--f-mono)}
.stat .sub{font-size:.75rem;color:var(--mut)}

/* toolbar */
.toolbar{display:flex;gap:10px;padding:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line2)}
.search{flex:1;min-width:200px;display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line2);color:var(--mut)}
.search:focus-within{box-shadow:inset 0 0 0 1px var(--ice)}
.search input{border:0!important;background:transparent!important;padding:10px 0!important;box-shadow:none!important;color:var(--t)}
.seg{display:flex;gap:4px;flex-wrap:wrap}
.seg button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;border:0;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line2);color:var(--mut);font-weight:700;font-size:.82rem;transition:.2s;flex:1;white-space:nowrap}
.seg button small{font-weight:500;opacity:.7;font-size:.74rem}
.seg button:hover{color:#fff}
.seg button.is-on{box-shadow:inset 0 0 0 1px var(--ice);color:var(--ice);background:rgba(123,227,255,.08)}
.seg button i{width:8px;height:8px;background:var(--c);display:inline-block}
.seg-sm button{flex:none;padding:8px 11px;font-size:.78rem}
.field{display:grid;gap:8px}
.field>span:first-child,.field-top{font:400 .62rem var(--f-px);letter-spacing:.14em;color:var(--mut);text-transform:uppercase}
.field-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.field-top b{font:700 .95rem var(--f-mono);color:#fff;letter-spacing:0;text-transform:none}
.field small.muted,.field-top small{font-family:var(--f-body);letter-spacing:0;text-transform:none;font-size:.74rem}
.field-inline{display:flex;align-items:center;gap:10px}
.field-inline select{width:auto}
input:not([type=range]):not([type=checkbox]):not([type=file]),select,textarea{
  width:100%;padding:12px 14px;border:0;border-radius:0;background:var(--bg);color:var(--t);font:500 .95rem var(--f-body);box-shadow:inset 0 0 0 1px var(--line2);transition:box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:inset 0 0 0 1px var(--ice),0 0 0 3px rgba(123,227,255,.12)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h2v2h2v2h2V2h2V0h2v2H8v2H6v2H4V4H2V2H0z' fill='%237be3ff'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:10px;padding-right:34px!important}
select option{background:var(--panel)}
textarea{resize:vertical}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:linear-gradient(90deg,var(--ice) var(--p,50%),#1c212b var(--p,50%));outline:none;margin:6px 0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:20px;background:#fff;box-shadow:0 0 0 2px var(--ice);cursor:pointer}
input[type=range]::-moz-range-thumb{width:12px;height:18px;background:#fff;border:2px solid var(--ice);border-radius:0}
input[type=range]:disabled{opacity:.35}
.hint{font-size:.76rem;color:var(--mut);display:block;margin-top:4px}.hint.ok{color:var(--lime)}.hint.warn{color:var(--melt)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;margin-bottom:18px}
.lcard{background:var(--panel);box-shadow:inset 0 0 0 1px var(--line2);padding:20px;display:grid;gap:14px;cursor:pointer;text-align:left;width:100%;border:0;color:inherit;transition:box-shadow .2s,transform .2s}
.lcard:hover{box-shadow:inset 0 0 0 1px var(--ice);transform:translateY(-3px)}
.lc-head{display:flex;gap:12px;align-items:center}
.lc-head>div:nth-child(2){flex:1;min-width:0;display:grid;line-height:1.3}
.lc-head strong{font-size:1.05rem;font-weight:800}
.lc-head .muted{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.net-tag{display:inline-flex;align-items:center;gap:6px;font:400 .58rem var(--f-px);padding:4px 7px;box-shadow:inset 0 0 0 1px var(--line2);color:var(--mut)}
.net-tag i{width:7px;height:7px;background:var(--c)}
.lc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lc-grid div{display:grid;gap:2px}
.lc-grid small{color:var(--mut);font-size:.68rem}
.lc-grid b{font:700 .88rem var(--f-mono)}
.spark{width:100%;height:42px;display:block}
.spark path.l{fill:none;stroke-width:1.6}.spark path.a{opacity:.18}
.supply{display:flex;height:8px;gap:2px;background:transparent}
.supply span{display:block}
.supply span:nth-child(1){background:var(--melt)}.supply span:nth-child(2){background:var(--ice)}.supply span:nth-child(3){background:#3a4150}.supply span:nth-child(4){background:var(--vio)}.supply span:nth-child(5){background:var(--mint)}
.lc-foot{display:flex;justify-content:space-between;align-items:center;font-size:.76rem;color:var(--mut)}
.curve-chip{font:400 .6rem var(--f-px);letter-spacing:.1em}
.empty{padding:60px 0}

/* pixel avatars */
.avatar{width:40px;height:40px;flex:none;display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;background:var(--panel2)}
.avatar i{display:block}
.avatar img{width:100%;height:100%;object-fit:cover;grid-column:1/-1;grid-row:1/-1;image-rendering:auto}
.avatar.letter{display:grid;place-items:center;grid-template-columns:1fr;font:400 1rem var(--f-px);color:#03121a;background:var(--ice)}
.avatar-lg{width:56px;height:56px}

/* launch form */
.launch-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:16px;align-items:start}
.launch-form{background:var(--panel);box-shadow:inset 0 0 0 1px var(--line2);padding:28px;display:grid;gap:26px}
.form-step{display:grid;gap:14px;padding-bottom:26px;border-bottom:1px solid var(--line2)}
.form-step h4{display:flex;align-items:center;gap:10px;font:400 .8rem var(--f-px);letter-spacing:.14em;text-transform:uppercase}
.form-step h4 span{width:24px;height:24px;display:grid;place-items:center;font-size:.7rem;background:var(--ice);color:#03121a}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row-img{display:flex;gap:16px;align-items:stretch}
.row-img .grow{display:grid;gap:12px}
.upload{width:120px;flex:none;display:grid;place-items:center;cursor:pointer;position:relative;overflow:hidden;color:var(--mut);font:400 1.6rem var(--f-px);box-shadow:inset 0 0 0 1px var(--line2);background:repeating-linear-gradient(45deg,transparent 0 6px,rgba(140,200,255,.04) 6px 12px);transition:box-shadow .2s,color .2s}
.upload:hover{box-shadow:inset 0 0 0 1px var(--ice);color:var(--ice)}
.upload input{position:absolute;opacity:0;inset:0;cursor:pointer}
.upload img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.upload span{display:grid;text-align:center;line-height:1}
.upload small{font-size:.6rem;margin-top:8px;letter-spacing:.14em}
.input-unit{display:flex;align-items:center;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line2)}
.input-unit:focus-within{box-shadow:inset 0 0 0 1px var(--ice)}
.input-unit input{box-shadow:none!important;background:transparent!important;font:700 1.2rem var(--f-mono)!important}
.input-unit span{padding:0 16px;font:400 .7rem var(--f-px);color:var(--ice);letter-spacing:.1em}
.quick,.lock-chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:7px 10px;border:0;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line2);font:400 .6rem var(--f-px);letter-spacing:.08em;color:var(--mut);transition:.2s;text-transform:uppercase}
.chip:hover{color:#fff;box-shadow:inset 0 0 0 1px var(--ice)}
.chip.is-on{box-shadow:inset 0 0 0 1px var(--ice);color:var(--ice);background:rgba(123,227,255,.08)}
.check{display:flex;gap:12px;font-size:.88rem;color:#c7cfdc;align-items:flex-start;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--ice);margin-top:2px;flex:none}
.form-error{color:var(--melt2);font-size:.88rem;min-height:1em;margin:-10px 0}
.summary{background:var(--panel);box-shadow:inset 0 0 0 1px var(--ice);padding:24px;position:sticky;top:92px}
.summary::before{content:'Live preview';position:absolute;top:-1px;right:-1px;background:var(--ice);color:#03121a;font:400 .55rem var(--f-px);letter-spacing:.14em;padding:5px 8px;text-transform:uppercase}
.sum-head{display:flex;gap:14px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line2)}
.sum-head>div:last-child{display:grid;min-width:0}
.sum-head strong{font-size:1.3rem;font-weight:800;word-break:break-all}
.sum-rows{display:grid;padding-top:8px}
.sum-rows div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:.88rem;border-bottom:1px dashed var(--line2)}
.sum-rows span{color:var(--mut)}
.sum-rows b{font-weight:700;text-align:right}
.freeze-bar{display:flex;height:12px;margin:18px 0 12px;background:#1c212b}
.fb-locked{background:repeating-linear-gradient(90deg,var(--ice) 0 10px,#57c6ea 10px 12px);transition:width .5s}
.fb-trade{flex:1}

/* modal + toast */
.modal{border:0;padding:0;background:transparent;color:var(--t);max-width:min(560px,100% - 30px);width:100%}
.modal::backdrop{background:rgba(2,4,8,.75);backdrop-filter:blur(4px)}
.modal[open]{animation:pop .25s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{opacity:0;transform:scale(.95)}}
.modal-body{background:var(--panel);box-shadow:inset 0 0 0 1px var(--ice),0 30px 80px rgba(0,0,0,.6);padding:26px;display:grid;gap:16px}
.modal-head{display:flex;gap:14px;align-items:center}
.modal-head>div:nth-child(2){flex:1;display:grid;min-width:0}
.modal-head>div:first-child:not(.avatar){flex:1;display:grid}
.modal-head strong{font-size:1.35rem;font-weight:800}
.modal-head .muted{font-size:.85rem}
.x{width:34px;height:34px;border:0;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line2);font:400 .9rem var(--f-px);flex:none}
.x:hover{box-shadow:inset 0 0 0 1px var(--ice);color:var(--ice)}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line2)}
.kv div{background:var(--bg);padding:12px 14px;display:grid;gap:2px}
.kv small{color:var(--mut);font-size:.72rem}
.kv b{font-weight:700}
.countdown{text-align:center;padding:18px;background:rgba(123,227,255,.06);box-shadow:inset 0 0 0 1px rgba(123,227,255,.3)}
.countdown b{font:700 1.8rem var(--f-mono);display:block;color:var(--ice)}
.countdown small{color:var(--mut)}
.legend-list{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;font-size:.82rem}
.legend-list span{display:flex;align-items:center;gap:8px}
.legend-list i{width:9px;height:9px}
.legend-list b{margin-left:auto}
.addr{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line2);font-size:.82rem}
.addr code{font-family:var(--f-mono);color:var(--ice);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.addr button{border:0;background:var(--ice);color:#03121a;padding:5px 10px;font:400 .55rem var(--f-px);letter-spacing:.1em}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:10px;color:#c7cfdc}
.ticks li{padding-left:22px;position:relative}
.ticks li::before{content:'';position:absolute;left:0;top:8px;width:8px;height:8px;background:var(--ice)}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,30px);opacity:0;z-index:100;padding:12px 18px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--ice),0 20px 40px rgba(0,0,0,.5);font-size:.9rem;transition:all .3s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

.fg .soon{display:block;color:var(--mut);font-size:.85rem;margin-bottom:8px}

/* =========================================================
   INVESTOR PAGE
   ========================================================= */
.inv-hero{padding:170px 0 40px}
.inv-h1{font:700 clamp(2.2rem,6vw,4.6rem)/1.05 var(--f-px);letter-spacing:.04em;text-transform:uppercase;margin:22px 0 22px}
.inv-lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--soft);max-width:720px;margin-bottom:30px}
.inv-hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.inv-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:60px;background:var(--line2);box-shadow:0 0 0 1px var(--line2)}
.inv-facts div{background:var(--panel);padding:18px 20px;display:grid;gap:6px}
.inv-facts small{font:400 .58rem var(--f-px);letter-spacing:.12em;color:var(--mut);text-transform:uppercase}
.inv-facts b{font-weight:800;font-size:1rem}
.inv-p{color:var(--soft);max-width:760px;margin-top:16px}
.inv-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.inv-3 .card p{color:#b8c1d1}
.inv-3 .card h3{font-size:1.3rem;margin:12px 0 12px}
.inv-sol{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center;margin-top:80px;padding:40px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--ice)}
.inv-steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:18px}
.inv-steps li{counter-increment:s;position:relative;padding-left:52px;color:#c7cfdc}
.inv-steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:0;width:34px;height:34px;display:grid;place-items:center;font:400 .7rem var(--f-px);background:var(--ice);color:#03121a}
.inv-steps li:last-child::before{background:var(--melt)}
.inv-steps b{color:#fff}
.inv-calc{margin-top:40px}
.road{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;position:relative}
.road::before{content:'';position:absolute;left:0;right:0;top:-14px;height:4px;background:repeating-linear-gradient(90deg,var(--line2) 0 8px,transparent 8px 12px)}
.road li{background:var(--panel);box-shadow:inset 0 0 0 1px var(--line2);padding:20px;display:grid;gap:6px;align-content:start;position:relative}
.road li::before{content:'';position:absolute;top:-18px;left:20px;width:12px;height:12px;background:var(--panel2);box-shadow:0 0 0 2px var(--line2)}
.road li.done{box-shadow:inset 0 0 0 1px var(--ice)}
.road li.done::before{background:var(--ice);box-shadow:0 0 12px var(--ice)}
.road li:nth-child(2)::before{background:var(--melt);box-shadow:0 0 12px var(--melt)}
.road span{font-size:.6rem;color:var(--mut)}
.road b{font-size:1.1rem;font-weight:800}
.road p{font-size:.86rem;color:var(--soft)}
.road i{font:400 .55rem var(--f-px);letter-spacing:.14em;text-transform:uppercase;color:var(--ice);font-style:normal;margin-top:6px}
.road li:nth-child(2) i{color:var(--melt)}
.inv-raise{margin-top:18px;color:var(--soft)}.inv-raise b{color:#fff;font-size:1.1rem}
#fundbar i{opacity:0}#fundbar.in i{opacity:1}
.inv #contact .cta{margin-top:120px}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:1020px){.stats{grid-template-columns:1fr 1fr}.launch-grid{grid-template-columns:1fr}.summary{position:static}}
@media(max-width:940px){
  .how{height:auto}.how-pin{position:static;height:auto;display:block}
  .how-grid{grid-template-columns:1fr;gap:0;padding-left:0}
  .how-left{display:none}
  .stage{height:auto;display:grid;gap:60px}
  .vis{position:static;opacity:1;transform:none;pointer-events:auto;display:flex;flex-direction:column}
  .vis::before{content:attr(data-title);display:block;font:700 1.6rem var(--f-px);letter-spacing:.08em;margin-bottom:6px;order:-2}
  .vis::after{content:attr(data-text);display:block;color:var(--soft);margin:0 0 16px;order:-1}
  .frame{height:auto}
  .callout{position:static;margin-bottom:10px;display:inline-block}
  #chart{height:240px}
  .sim-body,.skin,.tok{grid-template-columns:1fr}
  .nav .links{display:none}.fg{grid-template-columns:1fr 1fr}
  .inv-3,.inv-sol{grid-template-columns:1fr}.inv-facts{grid-template-columns:1fr 1fr}
  .road{grid-template-columns:1fr 1fr}.road::before,.road li::before{display:none}
  .inv-sol{padding:26px}.inv-hero{padding-top:130px}
}
@media(max-width:600px){
  .net3,.kpis,.grids,.meltwrap,.row2{grid-template-columns:1fr}
  .arrow-r{transform:rotate(90deg);justify-self:center}
  .recv{flex-direction:column}.recv .side{text-align:left}
  .cards{grid-template-columns:1fr}
  .row-img{flex-direction:column}.upload{width:100%;height:110px}
  .seg button small{display:none}
  .brand span:not(.mark){display:none}
  .nav .btn{padding:10px 12px;font-size:.6rem}
  .tab{padding:8px 10px}
  .road,.inv-facts{grid-template-columns:1fr}
  .app .social{display:none}.social a,.social span.is-soon{width:32px;height:32px}
  .nav .wrap{gap:10px}.app .tab{padding:8px 8px;font-size:.58rem;letter-spacing:.1em}
  .app .nav .btn{padding:10px 9px;font-size:.54rem;letter-spacing:.08em}
  .sim{padding:10px}.pane{padding:18px}
  .ca-row .mut{flex-basis:100%;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .glyph i,.tagline,.hero .sub,.hero .ctas,.chain-chips,.ca-row,.scroll-hint,.rv,.pixbar i{opacity:1;transform:none}
}