/* Cyberpunk skin tokens, mirrored from packages/theme/src/skins/cyberpunk.ts */
@font-face{font-family:"Barlow";font-weight:400;font-display:swap;src:url(/fonts/Barlow_400Regular.ttf) format("truetype")}
@font-face{font-family:"Barlow";font-weight:600;font-display:swap;src:url(/fonts/Barlow_600SemiBold.ttf) format("truetype")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(/fonts/BarlowCondensed_600SemiBold.ttf) format("truetype")}

:root{
  --base:#05070D;--surface:#0E1424;--elevated:#161D33;
  --glass:rgba(20,28,52,.55);--border:rgba(255,255,255,.14);
  --cyan:#00E5FF;--pink:#FF2FB0;--green:#4CFF6B;
  --text:#F4F7FF;--muted:#93A0C4;--on-accent:#04060B;
  --grad:linear-gradient(135deg,#00E5FF 0%,#FF2FB0 100%);
  --sans:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --cond:"Barlow Condensed","Barlow",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--base)}
body{margin:0;color:var(--text);font:400 17px/1.6 var(--sans);
  background:
    radial-gradient(900px 500px at 85% -10%,rgba(255,47,176,.16),transparent 60%),
    radial-gradient(900px 600px at 5% 0%,rgba(0,229,255,.14),transparent 60%),
    var(--base);
  -webkit-font-smoothing:antialiased}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}

/* header */
header.site{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
.brand{display:flex;align-items:center;gap:12px;color:var(--text);font:600 22px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase}
.brand:hover{text-decoration:none}
.brand img{width:38px;height:38px;border-radius:9px;box-shadow:0 0 0 1px var(--border)}
nav.site a{color:var(--muted);font:600 16px var(--cond);letter-spacing:.12em;text-transform:uppercase;margin-left:22px}
nav.site a:hover{color:var(--text);text-decoration:none}

/* hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding:56px 0 72px}
.eyebrow{font:600 16px var(--cond);letter-spacing:.3em;text-transform:uppercase;color:var(--cyan);margin:0 0 14px}
h1{font:600 clamp(40px,7vw,68px)/1.02 var(--sans);letter-spacing:-.01em;margin:0 0 20px}
h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:20px;color:var(--muted);max-width:34em;margin:0 0 30px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn{display:inline-block;padding:15px 28px;border-radius:999px;font:600 18px var(--cond);letter-spacing:.14em;text-transform:uppercase}
.btn.primary{background:var(--grad);color:var(--on-accent)}
.btn.soon{border:1px solid var(--border);background:var(--glass);color:var(--text);cursor:default}
.fine{font-size:14px;color:var(--muted);margin:14px 0 0}

/* effort ring */
.ring-card{justify-self:center;width:min(100%,340px);aspect-ratio:1;border-radius:32px;background:var(--glass);border:1px solid var(--border);
  display:grid;place-items:center;box-shadow:0 0 60px rgba(0,229,255,.12),0 0 100px rgba(255,47,176,.10);position:relative}
.ring-card svg{width:78%;height:78%}
.ring-card .num{position:absolute;text-align:center}
.ring-card .num b{display:block;font:600 64px/1 var(--cond)}
.ring-card .num span{font:600 15px var(--cond);letter-spacing:.24em;color:var(--muted);text-transform:uppercase}

/* features */
h2{font:600 14px var(--cond);letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin:0 0 20px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.card{background:var(--glass);border:1px solid var(--border);border-radius:20px;padding:24px 26px}
.card h3{font:600 26px/1.15 var(--cond);letter-spacing:.04em;text-transform:uppercase;margin:0 0 8px}
.card h3 i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--grad);margin-right:10px;vertical-align:middle}
.card p{margin:0;color:var(--muted)}

.band{margin:64px 0;padding:34px 30px;border-radius:24px;border:1px solid var(--border);
  background:linear-gradient(135deg,rgba(0,229,255,.10),rgba(255,47,176,.10))}
.band p{margin:0;font:600 26px/1.3 var(--sans);max-width:28em}
.band small{display:block;margin-top:10px;font-size:16px;color:var(--muted);font-weight:400}

/* footer */
footer.site{border-top:1px solid var(--border);margin-top:72px;padding:30px 0 56px;color:var(--muted);font-size:14px}
footer.site .links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:14px}
footer.site .links a{color:var(--text);font:600 15px var(--cond);letter-spacing:.12em;text-transform:uppercase}

/* support / prose pages */
.prose{max-width:720px;padding:28px 0 8px}
.prose h1{font-size:clamp(34px,6vw,48px);margin:0 0 10px}
.prose h2{font-size:15px;color:var(--cyan);margin:40px 0 12px}
.prose p,.prose li{color:var(--text);margin:10px 0}
.prose ul{padding-left:22px}
.prose .card{margin:24px 0}
.prose strong{font-weight:600}

@media(max-width:780px){
  .hero{grid-template-columns:1fr;padding:32px 0 48px}
  .ring-card{order:-1;width:min(74%,280px)}
  .grid{grid-template-columns:1fr}
  nav.site a{margin-left:16px}
  nav.site a.hide-sm{display:none}
}
@media(prefers-reduced-motion:no-preference){
  .ring-arc{stroke-dasharray:0 100;animation:fill 1.6s .2s ease-out forwards}
  @keyframes fill{to{stroke-dasharray:100 100}}
}