/* Dhisetu — shared design system (game-engine flavored, phosphor-green accent) */
:root{
  --bg:#000000; --surface:#0a0a0a; --surface-2:#141414; --border:#2a2a2a; --border-active:#ffffff;
  --text:#e8e8e8; --muted:#6a6a6a; --text-bright:#ffffff;
  --accent:#4ade80; --accent-dim:#2ea866; --accent-glow:rgba(74,222,128,0.18);
  --red:#f87171; --yellow:#fbbf24;
  --font-display:'Orbitron', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --maxw:1200px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--text); font-family:var(--font-mono); font-size:14px; line-height:1.65;
  min-height:100vh; overflow-x:hidden;
  background-image:linear-gradient(rgba(255,255,255,0.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.022) 1px,transparent 1px);
  background-size:40px 40px;
}
a{color:inherit; text-decoration:none;}
::selection{background:var(--accent); color:#000;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
h1,h2,h3{font-family:var(--font-display); font-weight:800; color:var(--text-bright); letter-spacing:-0.015em; line-height:1.02;}
.eyebrow{font-family:var(--font-mono); font-size:12px; letter-spacing:0.18em; color:var(--muted); text-transform:uppercase;}
.eyebrow .n{color:var(--accent);}
.accent{color:var(--accent);}
.note{font-size:12px; color:var(--muted);}

/* top accent line + HUD */
.topline{position:fixed; top:0; left:0; height:2px; width:100%; background:linear-gradient(90deg,var(--accent),transparent); transform:scaleX(var(--sp,0)); transform-origin:left; z-index:120; opacity:.9;}
.hud{position:fixed; bottom:14px; left:0; right:0; display:flex; justify-content:space-between; padding:0 18px; font-size:11px; letter-spacing:0.12em; color:var(--muted); pointer-events:none; z-index:110; text-transform:uppercase;}
.hud .dot{color:var(--accent);}
.hud .r{color:var(--text);}

/* nav */
header{position:fixed; top:0; left:0; right:0; z-index:100; backdrop-filter:blur(8px); background:rgba(0,0,0,0.55); border-bottom:1px solid transparent; transition:border-color .3s;}
header.scrolled{border-bottom-color:var(--border);}
nav{display:flex; align-items:center; justify-content:space-between; height:64px; max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; letter-spacing:0.06em; font-size:15px; color:var(--text-bright);}
.brand svg,.brand img{width:26px; height:26px; border-radius:6px; object-fit:cover;}
.navlinks{display:flex; align-items:center; gap:26px;}
.navlinks a{font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); transition:color .2s;}
.navlinks a:hover, .navlinks a.active{color:var(--text-bright);}
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-weight:600; font-size:13px; padding:9px 16px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--text); cursor:pointer; transition:all .18s;}
.btn:hover{border-color:var(--accent); color:var(--text-bright);}
.btn-accent{background:var(--accent); color:#000; border-color:var(--accent);}
.btn-accent:hover{box-shadow:0 0 24px var(--accent-glow); color:#000;}
.navlinks .btn{padding:8px 14px;}

/* boot loader */
#boot{position:fixed; inset:0; z-index:1000; background:#000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; font-family:var(--font-mono); transition:opacity .5s ease, visibility .5s;}
#boot.done{opacity:0; visibility:hidden;}
#boot .log{width:min(520px,86vw); font-size:13px; color:var(--muted); min-height:104px;}
#boot .log .line{white-space:pre; opacity:0;}
#boot .log .line.on{opacity:1;}
#boot .log .ok{color:var(--accent);}
#boot .pct{font-family:var(--font-display); font-weight:900; font-size:84px; color:var(--text-bright); letter-spacing:0.04em; line-height:1; text-shadow:0 0 30px var(--accent-glow);}
#boot .cursor{display:inline-block; width:9px; height:15px; background:var(--accent); margin-left:4px; animation:blink 1s steps(1) infinite; vertical-align:-2px;}
#boot .skip{font-size:11px; letter-spacing:0.18em; color:var(--muted); text-transform:uppercase;}
@keyframes blink{50%{opacity:0;}}

/* layout */
main{position:relative; z-index:1;}
section{padding:120px 0; border-bottom:1px solid var(--border);}
.page-top{padding-top:140px;}
.bignum{font-family:var(--font-display); font-weight:900; font-size:clamp(56px,12vw,150px); color:transparent; -webkit-text-stroke:1.5px var(--border); line-height:.8; letter-spacing:.02em;}
.shead{margin-bottom:48px;}
.shead h2{font-size:clamp(30px,4.6vw,52px); margin-top:14px; max-width:16em;}
.pcopy{max-width:34em; color:var(--text);}
.pcopy p+p{margin-top:16px;}
.lead{font-size:16px; color:var(--text); max-width:34em;}

/* buttons row */
.cta{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:30px;}
.ghostlink{font-size:13px; color:var(--muted); letter-spacing:.04em;}
.ghostlink:hover{color:var(--accent);}

/* cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.card{border:1px solid var(--border); border-radius:12px; background:var(--surface); padding:22px; display:flex; flex-direction:column;}
.card .ci{width:34px; height:34px; border:1px solid var(--accent); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--accent); font-family:var(--font-display); font-weight:800; margin-bottom:16px;}
.card h3{font-size:18px; margin-bottom:10px; letter-spacing:.01em;}
.card p{font-size:13px; color:var(--muted); margin-bottom:16px;}

/* founder cards */
.founders{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:14px;}
.fcard{border:1px solid var(--border); border-radius:12px; background:var(--surface); padding:26px;}
.fcard .role{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:8px;}
.fcard h3{font-family:var(--font-display); font-size:24px; margin-bottom:14px;}
.fcard p{font-size:13.5px; color:var(--text); margin-bottom:12px;}
.fcard .meta{font-size:12px; color:var(--muted);}

/* table */
.ptable{width:100%; border-collapse:collapse; font-size:13px;}
.ptable th,.ptable td{border:1px solid var(--border); padding:14px 16px; text-align:center;}
.ptable th{font-family:var(--font-mono); font-weight:600; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
.ptable td:first-child,.ptable th:first-child{text-align:left; color:var(--text-bright); font-weight:600;}
.ptable tr.us td{background:rgba(74,222,128,.05);}
.ptable tr.us td:first-child{color:var(--accent);}
.yes{color:var(--accent); font-weight:700;} .no{color:var(--muted);} .mid{color:var(--yellow);}

/* footer */
footer{background:#000; padding:70px 0 40px;}
.fcols{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:30px; margin-bottom:30px;}
.fcols h4{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; font-family:var(--font-mono); font-weight:600;}
.fcols a{display:block; font-size:13px; color:var(--text); margin-bottom:10px; transition:color .2s;}
.fcols a:hover{color:var(--accent);}
.fbrand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; letter-spacing:.06em; color:var(--text-bright); margin-bottom:14px;}
.fbrand svg,.fbrand img{width:24px;height:24px; border-radius:6px; object-fit:cover;}
.fbottom{display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--border); padding-top:22px; font-size:12px; color:var(--muted); flex-wrap:wrap; gap:10px;}
.ticker{overflow:hidden; white-space:nowrap; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:12px 0; margin:30px 0 0; color:var(--muted); font-size:12px; letter-spacing:.2em;}
.ticker span{display:inline-block; padding-left:100%; animation:scrollx 22s linear infinite;}
@keyframes scrollx{to{transform:translateX(-100%);}}

/* reveal-on-scroll (JS-gated; no-JS and reduced-motion show everything) */
.js [data-reveal]{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.js [data-reveal].in{opacity:1; transform:none;}
.js [data-stagger]>*{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease;}
.js [data-stagger].in>*{opacity:1; transform:none;}
.js [data-stagger].in>*:nth-child(2){transition-delay:.1s;}
.js [data-stagger].in>*:nth-child(3){transition-delay:.2s;}
.manifesto .w{color:var(--muted); transition:color .4s ease;}
.manifesto .w.lit{color:var(--text-bright);}

/* prose (whitepaper / legal) */
.prose{max-width:46em;}
.prose h2{font-size:clamp(22px,3vw,32px); margin:40px 0 14px;}
.prose h3{font-family:var(--font-display); font-size:18px; color:var(--text-bright); margin:26px 0 10px;}
.prose p{margin-bottom:14px; color:var(--text);}
.prose ul{margin:0 0 14px 20px; color:var(--text);} .prose li{margin-bottom:8px;}
.prose .todo{display:inline-block; background:rgba(251,191,36,.12); color:var(--yellow); border:1px solid rgba(251,191,36,.4); padding:1px 8px; border-radius:5px; font-size:12px;}

/* responsive */
@media(max-width:900px){
  .cards{grid-template-columns:1fr;}
  .founders{grid-template-columns:1fr;}
  .fcols{grid-template-columns:1fr 1fr;}
  .navlinks{display:none;}
  .navlinks.mobile-on{display:flex; position:fixed; top:64px; left:0; right:0; flex-direction:column; background:#000; border-bottom:1px solid var(--border); padding:18px 24px; gap:16px;}
  .menu-btn{display:inline-flex;}
}
@media(min-width:901px){.menu-btn{display:none;}}
@media(max-width:480px){
  section{padding:80px 0;}
  .hud{font-size:9px; letter-spacing:.08em;}
  .ptable{font-size:11px;} .ptable th,.ptable td{padding:9px 6px;}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important;}
  .ticker span{animation:none; padding-left:0;}
}