:root{
  --bg:#050b14;
  --bg2:#08111f;
  --panel:#0b1626;
  --line:rgba(120,190,255,.14);
  --text:#eaf3ff;
  --muted:#8ea6c4;
  --green:#19ff6a;
  --green-dim:#0c8f3d;
  --blue:#0a84ff;
  --red:#ff4d5e;
  --gold:#e2b23c;
  --font:"Space Grotesk",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --display:"Bebas Neue",var(--font);
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.5;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1200px 600px at 50% -10%,rgba(10,132,255,.12),transparent 60%),
    radial-gradient(900px 500px at 100% 40%,rgba(25,255,106,.06),transparent 60%);
}
a{color:inherit;text-decoration:none}
h1,h2{font-family:var(--display);font-weight:400;letter-spacing:.01em;line-height:.95;margin:0}
h1{font-size:clamp(3rem,7.5vw,6.5rem)}
h2{font-size:clamp(2.6rem,5.5vw,4.6rem)}
h1 em{font-style:normal;color:var(--green);text-shadow:0 0 24px rgba(25,255,106,.45)}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;color:var(--green);margin:0 0 .9rem}
.center{text-align:center}
section{position:relative;z-index:1}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem 1.5rem;border-radius:999px;
  font-family:var(--mono);font-weight:600;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:.6rem 1.1rem;font-size:.72rem}
.btn-green{background:var(--green);color:#03110a;box-shadow:0 0 0 0 rgba(25,255,106,.5),0 8px 30px rgba(25,255,106,.25)}
.btn-green:hover{box-shadow:0 0 0 4px rgba(25,255,106,.18),0 12px 40px rgba(25,255,106,.35)}
.btn-ghost{background:rgba(255,255,255,.04);border-color:var(--line);color:var(--text)}
.btn-ghost:hover{border-color:rgba(120,190,255,.4);background:rgba(255,255,255,.08)}

/* ---------- topbar ---------- */
.topbar{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem clamp(1rem,3vw,2.5rem);gap:1rem;
  background:linear-gradient(to bottom,rgba(3,8,16,.8),rgba(3,8,16,0))}
.brand{display:flex;align-items:center;gap:.55rem;color:#fff}
.brand-mark{width:30px;height:30px;color:var(--blue);filter:drop-shadow(0 0 10px rgba(10,132,255,.7))}
.brand-word{font-family:var(--font);font-weight:700;font-size:1.45rem;letter-spacing:-.02em}
.nav{display:flex;gap:1.6rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#d5e6ff}
.nav a{opacity:.85;transition:opacity .2s,color .2s}
.nav a:hover{opacity:1;color:var(--green)}

/* ---------- hero ---------- */
.hero{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#02060c;z-index:1}
.hero-pic,.hero-pic img{display:block;width:100%;height:100%}
.hero-pic img{object-fit:cover;object-position:center;animation:heroIn 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes heroIn{from{transform:scale(1.06);filter:brightness(.4)}to{transform:scale(1);filter:brightness(1)}}
.hero-scan{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,transparent 70%,rgba(5,11,20,.9)),
    repeating-linear-gradient(to bottom,rgba(255,255,255,0) 0 3px,rgba(0,0,0,.05) 3px 4px);
}
.hero-scroll{position:absolute;left:50%;bottom:1.2rem;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.4rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.3em;color:var(--green);opacity:.9}
.hero-scroll i{width:1px;height:34px;background:linear-gradient(var(--green),transparent);animation:drop 1.6s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- ticker tape ---------- */
.tape{position:relative;z-index:2;background:#020508;border-top:1px solid rgba(25,255,106,.25);border-bottom:1px solid rgba(25,255,106,.25);overflow:hidden;
  font-family:var(--mono);font-size:.8rem;font-weight:600;letter-spacing:.06em;padding:.55rem 0;
  box-shadow:0 0 30px rgba(25,255,106,.12) inset}
.tape-track{display:flex;width:max-content;animation:tape 60s linear infinite}
.tape:hover .tape-track{animation-play-state:paused}
@keyframes tape{to{transform:translateX(-50%)}}
.tk{display:inline-flex;align-items:center;gap:.5rem;padding:0 1.4rem;border-right:1px solid rgba(255,255,255,.08);white-space:nowrap}
.tk-s{color:#fff}
.tk-p{color:#cfe0ff}
.tk-c{color:var(--green)}
.tk-c.dn{color:var(--red)}
.tk-c::before{content:"▲ "}
.tk-c.dn::before{content:"▼ "}
.tk.hot .tk-s{color:var(--green);text-shadow:0 0 12px rgba(25,255,106,.6)}

/* ---------- CA bar ---------- */
.cabar{background:var(--bg2);border-bottom:1px solid var(--line)}
.cabar-inner{max-width:var(--max);margin:0 auto;padding:1.1rem clamp(1rem,3vw,2.5rem);display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.cabar-label{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.35}}
.ca{flex:1 1 520px;display:flex;align-items:center;gap:.8rem;min-width:0;padding:.7rem .9rem;border-radius:12px;
  background:#03070e;border:1px solid var(--line);color:var(--text);font-family:var(--mono);cursor:pointer;text-align:left;transition:border-color .2s}
.ca:hover{border-color:rgba(25,255,106,.5)}
.ca-key{font-size:.68rem;letter-spacing:.2em;color:var(--green);flex:none}
.ca-val{flex:1;font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-copy{flex:none;font-size:.62rem;letter-spacing:.2em;padding:.35rem .6rem;border-radius:6px;background:rgba(25,255,106,.12);color:var(--green)}
.ca.copied .ca-copy{background:var(--green);color:#03110a}
.cabar-actions{display:flex;gap:.6rem;flex-wrap:wrap}

/* ---------- headline ---------- */
.headline{max-width:var(--max);margin:0 auto;padding:clamp(4rem,9vw,8rem) clamp(1rem,3vw,2.5rem) clamp(3rem,6vw,5rem)}
.headline h1{max-width:16ch}
.lede{max-width:64ch;font-size:clamp(1.05rem,1.4vw,1.25rem);color:#c9d9ee;margin:1.6rem 0 2.4rem}
.lede strong{color:#fff}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.stat{background:var(--panel);padding:1.1rem 1.3rem;display:flex;flex-direction:column;gap:.3rem}
.stat-k{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;color:var(--muted)}
.stat-v{font-family:var(--mono);font-size:1.05rem;font-weight:600;color:#fff}
.stat-v.up{color:var(--green)}

/* ---------- bell ---------- */
.bell{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--bg) 0%,#03130a 50%,var(--bg) 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bell-inner{max-width:var(--max);margin:0 auto;padding:clamp(4rem,8vw,7rem) clamp(1rem,3vw,2.5rem);display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:3rem;position:relative;z-index:2}
.bell-copy p:not(.eyebrow){max-width:44ch;color:#c9d9ee;font-size:1.1rem;margin:1.4rem 0}
.bell-count{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--muted)}
.bell-count span{color:var(--gold);font-size:1.4rem;margin-right:.3rem}
.bell-btn{position:relative;justify-self:center;width:min(340px,70vw);aspect-ratio:1;border-radius:50%;border:1px solid rgba(226,178,60,.3);
  background:radial-gradient(circle at 50% 40%,rgba(226,178,60,.18),rgba(226,178,60,.02) 60%,transparent 70%);cursor:pointer;padding:0;
  transition:transform .15s;display:grid;place-items:center}
.bell-btn:hover{transform:scale(1.03)}
.bell-btn:active{transform:scale(.97)}
.bell-btn svg{width:62%;filter:drop-shadow(0 20px 40px rgba(226,178,60,.35));transform-origin:60px 10px}
.bell-btn.ringing svg{animation:swing .9s cubic-bezier(.36,.07,.19,.97)}
.bell-btn.ringing .bell-clapper{animation:clap .9s cubic-bezier(.36,.07,.19,.97)}
@keyframes swing{0%{transform:rotate(0)}15%{transform:rotate(-16deg)}30%{transform:rotate(14deg)}45%{transform:rotate(-10deg)}60%{transform:rotate(7deg)}75%{transform:rotate(-3deg)}100%{transform:rotate(0)}}
@keyframes clap{0%{transform:translateX(0)}15%{transform:translateX(12px)}30%{transform:translateX(-11px)}45%{transform:translateX(8px)}60%{transform:translateX(-5px)}100%{transform:translateX(0)}}
.bell-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--gold);opacity:0;pointer-events:none}
.bell-btn.ringing .bell-ring{animation:ring 1.1s ease-out}
.bell-btn.ringing .bell-ring-2{animation:ring 1.1s ease-out .18s}
@keyframes ring{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.9);opacity:0}}
.bell-flash{position:absolute;inset:0;background:radial-gradient(circle at 70% 50%,rgba(25,255,106,.35),transparent 55%);opacity:0;pointer-events:none;z-index:1}
.bell-flash.on{animation:flash .9s ease-out}
@keyframes flash{0%{opacity:1}100%{opacity:0}}
.candle{position:absolute;bottom:-40px;width:10px;border-radius:2px;background:var(--green);box-shadow:0 0 14px var(--green);z-index:1;pointer-events:none;
  animation:rise var(--d,2.2s) cubic-bezier(.2,.7,.3,1) forwards}
.candle::before,.candle::after{content:"";position:absolute;left:50%;width:2px;background:var(--green);transform:translateX(-50%)}
.candle::before{top:-14px;height:14px}.candle::after{bottom:-10px;height:10px}
@keyframes rise{0%{transform:translateY(0) scaleY(.6);opacity:0}15%{opacity:1}100%{transform:translateY(calc(-1 * var(--h,600px))) scaleY(1);opacity:0}}

/* ---------- press release ---------- */
.lore{max-width:var(--max);margin:0 auto;padding:clamp(4rem,8vw,7rem) clamp(1rem,3vw,2.5rem)}
.press{max-width:820px;margin:0 auto;background:#f6f1e4;color:#1a1710;border-radius:6px;padding:clamp(1.6rem,4vw,3.4rem);
  box-shadow:0 40px 80px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);position:relative;transform:rotate(-.4deg)}
.press::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--blue)}
.press-head{display:flex;justify-content:space-between;gap:1rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.6rem;color:#5a5647}
.press-tag{color:#b5131f;font-weight:600}
.press h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.15;letter-spacing:0;margin-bottom:1.4rem;color:#111}
.press p{font-family:Georgia,"Times New Roman",serif;font-size:1.08rem;line-height:1.65;margin:0 0 1.1rem}
.press-foot{margin-top:1.8rem;padding-top:1rem;border-top:1px dashed #b7b09a;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:#6b665a}

/* ---------- board ---------- */
.board{max-width:var(--max);margin:0 auto;padding:clamp(3rem,6vw,5rem) clamp(1rem,3vw,2.5rem) clamp(4rem,8vw,7rem)}
.board-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:2.8rem}
.member{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.member:hover{transform:translateY(-6px);border-color:rgba(25,255,106,.45);box-shadow:0 20px 50px rgba(25,255,106,.12)}
.member-pic{aspect-ratio:4/5;background-image:url("/assets/hero-desktop.jpg");background-repeat:no-repeat;background-size:auto var(--zz,var(--z,300%));background-position:var(--x,50%) var(--y,50%);
  position:relative;filter:saturate(1.1)}
.member-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--panel) 0%,transparent 45%)}
.member-meta{padding:0 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.3rem;margin-top:-.4rem;position:relative}
.member-role{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;color:var(--green)}
.member-name{font-family:var(--display);font-size:1.9rem;line-height:1;color:#fff}
.member-bio{font-size:.86rem;color:var(--muted);line-height:1.45}
.member-gnome{border-color:rgba(25,255,106,.35);box-shadow:0 0 0 1px rgba(25,255,106,.15) inset}

/* ---------- listing ---------- */
.listing{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.listing-inner{max-width:var(--max);margin:0 auto;padding:clamp(4rem,8vw,7rem) clamp(1rem,3vw,2.5rem);display:grid;grid-template-columns:1fr 1.1fr;gap:4rem;align-items:start}
.listing-copy p:not(.eyebrow){color:#c9d9ee;font-size:1.08rem;max-width:44ch;margin:1.4rem 0 2rem}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.8rem}
.steps li{display:flex;gap:1.2rem;align-items:flex-start;padding:1.2rem 1.4rem;background:var(--panel);border:1px solid var(--line);border-radius:14px;color:#c9d9ee;line-height:1.5}
.steps strong{color:#fff}
.step-n{font-family:var(--display);font-size:2rem;line-height:1;color:var(--green);flex:none;width:2.4rem}

/* ---------- footer ---------- */
.foot{position:relative;z-index:1;padding:3rem clamp(1rem,3vw,2.5rem) 4rem}
.foot-inner{max-width:var(--max);margin:0 auto;display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.foot-brand{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.3rem}
.foot-brand .brand-mark{width:24px;height:24px}
.foot-ca{font-family:var(--mono);font-size:.78rem;color:var(--muted);margin:0;word-break:break-all}
.foot-disc{max-width:70ch;font-size:.82rem;color:#6f86a3;margin:0}
.foot-links{display:flex;gap:1.4rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.foot-links a:hover{color:var(--green)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:1.6rem;transform:translate(-50%,20px);background:var(--green);color:#03110a;font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;
  padding:.7rem 1.2rem;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:50}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- responsive ---------- */
@media (max-width:1099px){
  .hero-scroll{display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  .board-grid{grid-template-columns:repeat(3,1fr)}
  .bell-inner,.listing-inner{grid-template-columns:1fr;gap:2.5rem}
  .bell-btn{justify-self:start}
}
@media (max-width:767px){
  .nav{display:none}
  .brand-word{font-size:1.2rem}
  .topbar .btn-sm{padding:.5rem .8rem;font-size:.62rem}
  .hero{aspect-ratio:auto;height:min(100svh,720px);min-height:480px}
  .hero-pic img{object-position:50% 50%}
  .board-grid{grid-template-columns:repeat(2,1fr);gap:.7rem}
  .member-gnome{grid-column:span 2}
  .member-gnome .member-pic{aspect-ratio:16/10;--zz:190%}
  .stats{grid-template-columns:1fr}
  .member-name{font-size:1.5rem}
  .cabar-actions{width:100%}
  .cabar-actions .btn{flex:1}
  .press{transform:none}
  .steps li{flex-direction:column;gap:.5rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
