:root{
  --bg:#05060d;--bg2:#080a14;--fg:#c8d0e0;--muted:#7b869c;--dim:#4a5468;
  --pink:#ff5cc8;--cyan:#5cf0ff;--gold:#ffcf4a;--red:#ff3b57;--acid:#7dff9e;
  --violet:#a878ff;--card:#0b0e1a;--line:#1a2133;
  --gp:0 0 16px rgba(255,92,200,.55);--gc:0 0 16px rgba(92,240,255,.5);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:
   radial-gradient(1000px 500px at 85% -5%,rgba(255,92,200,.09),transparent 60%),
   radial-gradient(900px 500px at -10% 105%,rgba(92,240,255,.08),transparent 60%),
   var(--bg);
  color:var(--fg);font:15px/1.65 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:var(--cyan);text-decoration:none}a:hover{color:var(--pink)}
.scan{position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.28;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 2px,transparent 2px 4px);mix-blend-mode:multiply}
.grain{position:fixed;inset:0;pointer-events:none;z-index:199;opacity:.04;
  background-image:radial-gradient(rgba(255,255,255,.6) .5px,transparent .5px);background-size:3px 3px}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}

/* nav */
.nav{position:sticky;top:0;z-index:150;backdrop-filter:blur(10px);
  background:rgba(5,6,13,.72);border-bottom:1px solid var(--line)}
.nav .in{max-width:1040px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.brand{font-weight:800;letter-spacing:2px;color:var(--pink);text-shadow:var(--gp);margin-right:auto;font-size:15px}
.brand span{color:var(--cyan);text-shadow:var(--gc)}
.nav a.l{color:var(--muted);padding:6px 11px;border:1px solid transparent;border-radius:6px;
  font-size:12px;letter-spacing:1px;text-transform:uppercase;transition:.15s}
.nav a.l:hover{color:var(--cyan);border-color:#243050}
.nav a.l.on{color:var(--bg);background:var(--pink);border-color:var(--pink);box-shadow:var(--gp)}

/* hero */
.hero{text-align:center;padding:66px 0 30px;position:relative}
.badge{display:inline-block;border:1px solid var(--line);border-radius:100px;padding:5px 15px;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;color:var(--acid);margin-bottom:20px;box-shadow:0 0 12px rgba(125,255,158,.22)}
.flicker{animation:flick 7s infinite}@keyframes flick{0%,96%,100%{opacity:1}97%{opacity:.35}98.5%{opacity:.8}}
.title{font-size:clamp(38px,8vw,76px);line-height:.98;margin:0 0 12px;font-weight:800;letter-spacing:1px;
  background:linear-gradient(90deg,var(--cyan),var(--pink),var(--gold));-webkit-background-clip:text;background-clip:text;
  color:transparent;filter:drop-shadow(0 0 22px rgba(255,92,200,.35))}
.sub{color:var(--cyan);font-size:clamp(14px,2.5vw,19px);text-shadow:var(--gc);margin:0 auto 16px;max-width:680px}
.lead{color:var(--muted);max-width:660px;margin:0 auto}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* sections & cards */
.sec{color:var(--pink);font-size:12px;letter-spacing:3px;text-transform:uppercase;margin:44px 0 14px;
  border-bottom:1px solid var(--line);padding-bottom:9px;text-shadow:0 0 8px rgba(255,92,200,.4)}
.sec b{color:var(--cyan)}
.card{border:1px solid var(--line);border-left:3px solid var(--cyan);border-radius:8px;
  background:linear-gradient(180deg,#0b0e1a,#090c15);padding:18px 20px;margin:14px 0}
.card h3{margin:0 0 8px;color:var(--gold);text-shadow:0 0 10px rgba(255,207,74,.35);font-size:19px}
.card.red{border-left-color:var(--red)}.card.red h3{color:var(--red)}
.card.gold{border-left-color:var(--gold)}
.card.violet{border-left-color:var(--violet)}.card.violet h3{color:var(--violet)}
.card.cyan{border-left-color:var(--cyan)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.pill{display:inline-block;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--acid);
  border:1px solid #24402c;border-radius:100px;padding:3px 11px;margin:0 6px 6px 0}
.btn{cursor:pointer;display:inline-block;border:1px solid var(--pink);background:transparent;color:var(--pink);
  padding:11px 20px;border-radius:6px;font:13px/1 ui-monospace,monospace;letter-spacing:1px;text-transform:uppercase;transition:.15s}
.btn:hover{background:var(--pink);color:var(--bg);box-shadow:var(--gp)}
.btn.cyan{border-color:var(--cyan);color:var(--cyan)}.btn.cyan:hover{background:var(--cyan);color:var(--bg);box-shadow:var(--gc)}
ul.clean{list-style:none;padding-left:0;margin:8px 0}
ul.clean li{padding:6px 0 6px 22px;position:relative;border-bottom:1px dashed #141b2b}
ul.clean li:before{content:"\25B8";position:absolute;left:0;color:var(--pink)}
ul.clean li:last-child{border-bottom:0}

/* vs */
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch;margin:16px 0}
.vs .side{border:1px solid var(--line);border-radius:8px;padding:16px;background:var(--card)}
.vs .side.prod{border-top:3px solid var(--acid)}.vs .side.cons{border-top:3px solid var(--pink)}
.vs .mid{align-self:center;color:var(--red);font-weight:800;font-size:22px;text-shadow:var(--gp)}
.side b{color:var(--cyan)}
@media(max-width:620px){.vs{grid-template-columns:1fr}.vs .mid{justify-self:center}}

/* quotes */
.quote{border:1px solid #2a2038;background:linear-gradient(180deg,#120c1c,#0c0914);border-left:3px solid var(--pink);
  padding:18px 20px;margin:14px 0;border-radius:8px;font-style:italic;color:#ecdfff}
.quote small{display:block;font-style:normal;color:var(--dim);margin-top:8px;letter-spacing:1px}

/* steps */
.steps{counter-reset:s;margin-top:6px}
.step{border:1px solid var(--line);border-radius:8px;padding:16px 18px 16px 56px;margin:12px 0;position:relative;
  background:var(--card);transition:.25s}
.step:before{counter-increment:s;content:counter(s);position:absolute;left:14px;top:16px;width:28px;height:28px;
  border-radius:50%;display:grid;place-items:center;background:var(--pink);color:var(--bg);font-weight:800;font-size:13px;box-shadow:var(--gp)}
.step.dim{opacity:.32}.step h4{margin:0 0 4px;color:var(--gold);font-size:16px}
.step .era{position:absolute;right:14px;top:14px;font-size:10px;letter-spacing:1px;color:var(--dim);text-transform:uppercase}
.simctl{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0}
.small{color:var(--dim);font-size:12px}

/* token sim */
.hen{font-size:70px;line-height:1;display:inline-block;transform-origin:60% 80%}
.hen.lay{animation:lay .5s ease}
@keyframes lay{0%{transform:none}30%{transform:translateY(-9px) rotate(-6deg)}60%{transform:translateY(2px) rotate(3deg)}100%{transform:none}}
.egg{position:absolute;font-size:22px;opacity:0;pointer-events:none}
.egg.go{animation:drop 1.1s ease forwards}
@keyframes drop{0%{opacity:0;transform:translate(0,-4px) scale(.5)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),120px) scale(1) rotate(var(--dr))}}
.readout .n{color:var(--gold);font-size:34px;text-shadow:0 0 12px rgba(255,207,74,.5)}
.bar{height:10px;border-radius:100px;background:#10162a;overflow:hidden;margin:10px 0;border:1px solid var(--line)}
.bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--pink));transition:width .4s}
.log{background:#06080f;border:1px solid var(--line);border-radius:8px;padding:12px;margin-top:12px;height:160px;overflow:auto;font-size:12px;color:var(--acid)}
.log div{padding:2px 0;border-bottom:1px dashed #10182a}.log div span{color:var(--dim)}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.frame{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.frame .ph{aspect-ratio:16/10;display:grid;place-items:center;position:relative;
  background:radial-gradient(circle at 50% 40%,rgba(255,92,200,.15),transparent 55%),
   repeating-linear-gradient(90deg,rgba(92,240,255,.06) 0 1px,transparent 1px 42px),
   repeating-linear-gradient(0deg,rgba(92,240,255,.06) 0 1px,transparent 1px 42px),#070a12}
.frame .ph .art{font-size:clamp(46px,11vw,96px);filter:drop-shadow(0 0 20px rgba(255,92,200,.5))}
.frame img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover}
.frame .cap{padding:12px 15px;color:var(--muted);font-size:12.5px;border-top:1px solid var(--line)}
.frame .cap b{color:var(--cyan)}
.eye{font-size:clamp(56px,15vw,130px);filter:drop-shadow(0 0 30px rgba(255,59,87,.6));animation:pulse 3s infinite}
@keyframes pulse{0%,100%{filter:drop-shadow(0 0 18px rgba(255,59,87,.4))}50%{filter:drop-shadow(0 0 44px rgba(255,59,87,.9))}}

/* meter / four points */
.four{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:8px}
.pt{border:1px solid var(--line);border-radius:10px;padding:16px;background:var(--card);position:relative;overflow:hidden}
.pt .no{font-size:40px;font-weight:800;color:var(--pink);opacity:.25;position:absolute;right:12px;top:2px;line-height:1}
.pt h4{margin:0 0 6px;color:var(--cyan);font-size:15px}
.pt p{margin:0;color:var(--muted);font-size:13px}

.foot{color:var(--dim);margin:48px 0 30px;font-size:12.5px;border-top:1px solid var(--line);padding-top:16px;text-align:center}
.foot a{color:var(--muted)}.foot a:hover{color:var(--cyan)}
.dim{color:var(--dim)} .mut{color:var(--muted)}