:root{
  --void:#050308; --void-2:#0a0712; --surface:#110d1c; --surface-raised:#171028; --border:#241c38; --border-bright:#3c2f5e;
  --ink:#ece8fb; --ink-dim:#968fc2; --ink-faint:#534b7a;
  --violet:#9b6cf7; --violet-bright:#b794ff; --violet-dim:#3a2c66; --amber:#f0a868;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--void); color:var(--ink); font-family:'Space Grotesk',sans-serif;
  overflow-x:hidden; position:relative;
}
.display{font-family:'Big Shoulders Display',sans-serif;font-weight:700;letter-spacing:-0.01em;text-transform:uppercase}
.mono{font-family:'JetBrains Mono',monospace}
a{color:inherit}
::selection{background:var(--violet-dim);color:var(--ink)}

/* ===== PERSISTENT FIELD CANVAS — lives behind everything, every page ===== */
#fieldCanvas{
  position:fixed; inset:0; width:100vw; height:100vh; z-index:0;
  pointer-events:none;
}

/* ===== ENTRY GATE (homepage only) ===== */
#gate{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  cursor:pointer;
}
#gate.collapsing .gate-content{ animation:gateOut .7s cubic-bezier(.6,0,.9,.4) forwards; }
#gate.collapsing{ pointer-events:none; }
#gate.hidden{ display:none; }
@keyframes gateOut{
  0%{ opacity:1; transform:scale(1); filter:brightness(1); }
  60%{ filter:brightness(2.4); }
  100%{ opacity:0; transform:scale(1.5); filter:brightness(4); }
}
.gate-content{ position:relative; z-index:2; text-align:center; opacity:0; animation:gateIn 1.8s ease forwards .3s; }
@keyframes gateIn{ to{ opacity:1; } }
.gate-logo{ width:96px; height:96px; margin:0 auto 36px; display:block; }
.gate-title{ font-family:'Big Shoulders Display'; font-weight:800; font-size:20px; letter-spacing:.12em;
  color:var(--ink); margin-bottom:18px; }
.gate-cta{ font-family:'JetBrains Mono'; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--violet-bright); opacity:.85; }
.gate-cta::after{ content:''; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--violet-bright); margin-left:10px; animation:pulse 1.6s ease-in-out infinite; vertical-align:middle; }
@keyframes pulse{ 0%,100%{opacity:.3} 50%{opacity:1} }

/* ===== SITE ===== */
#site{ position:relative; z-index:1; }
#site.gated{ opacity:0; }
#site.revealed{ animation:siteIn 1s ease forwards .15s; }
@keyframes siteIn{ from{opacity:0} to{opacity:1} }

nav{ display:flex; align-items:center; gap:32px; padding:22px 64px; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:rgba(5,3,8,.78); backdrop-filter:blur(10px); z-index:50; }
nav .logo-mark{ width:30px; height:30px; flex-shrink:0; }
nav .logo{ font-family:'Big Shoulders Display'; font-weight:700; font-size:20px; letter-spacing:.02em;
  display:flex; align-items:center; gap:10px; text-decoration:none; }
nav .navlinks{ display:flex; gap:26px; margin-left:8px; }
nav .navlinks a{ color:var(--ink-dim); text-decoration:none; font-size:14px; transition:color .15s; }
nav .navlinks a:hover, nav .navlinks a.active{ color:var(--ink); }
.btn{ padding:11px 22px; border-radius:3px; font-family:'JetBrains Mono'; font-size:12.5px;
  text-decoration:none; display:inline-block; letter-spacing:.02em; transition:all .15s; border:1px solid transparent; cursor:pointer; }
.btn-primary{ background:var(--violet); color:#0a0712; font-weight:600; }
.btn-primary:hover{ background:var(--violet-bright); }
.btn-ghost{ border:1px solid var(--border-bright); color:var(--ink); background:none; }
.btn-ghost:hover{ border-color:var(--violet); color:var(--violet-bright); }

/* page hero (smaller than homepage hero, used on inner pages) */
.page-hero{ padding:80px 64px 60px; text-align:center; }
.page-hero .eyebrow{ font-family:'JetBrains Mono'; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--violet-bright); margin-bottom:20px; }
.page-hero h1{ font-family:'Big Shoulders Display'; font-weight:700; font-size:56px; text-transform:uppercase;
  letter-spacing:-0.01em; margin-bottom:20px; }
.page-hero p{ color:var(--ink-dim); font-size:16px; max-width:560px; margin:0 auto; line-height:1.7; }

.hero{ position:relative; padding:130px 64px 110px; text-align:center; }
.eyebrow{ font-family:'JetBrains Mono'; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--violet-bright); margin-bottom:26px; }
.eyebrow .dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:#5fe88a;
  margin-right:8px; vertical-align:middle; box-shadow:0 0 8px #5fe88a; }
h1{ font-family:'Big Shoulders Display'; font-weight:700; font-size:92px; line-height:.92; margin-bottom:30px;
  text-transform:uppercase; letter-spacing:-0.01em; }
h1 .accent{ color:var(--violet-bright); }
.sub{ font-size:18px; color:var(--ink-dim); max-width:580px; margin:0 auto 46px; line-height:1.65; }
.cta-row{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

.specs{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.specs div{ background:rgba(5,3,8,.7); backdrop-filter:blur(2px); padding:34px 24px; text-align:center; }
.specs .num{ font-family:'JetBrains Mono'; font-size:30px; font-weight:600; color:var(--violet-bright); }
.specs .lbl{ font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.1em; color:var(--ink-faint);
  text-transform:uppercase; margin-top:8px; }

.section{ padding:100px 64px; max-width:1140px; margin:0 auto; }
.section-eyebrow{ font-family:'JetBrains Mono'; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--amber); margin-bottom:18px; }
.section h2{ font-family:'Big Shoulders Display'; font-weight:700; font-size:46px; text-transform:uppercase;
  margin-bottom:18px; max-width:640px; }
.section p.lead{ color:var(--ink-dim); font-size:16px; max-width:620px; line-height:1.75; margin-bottom:60px; }

.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
.grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
.card{ background:rgba(17,13,28,.88); backdrop-filter:blur(3px); padding:36px 30px; transition:background .2s; }
.card:hover{ background:rgba(23,16,40,.92); }
.card .tag{ font-family:'JetBrains Mono'; font-size:11px; color:var(--amber); letter-spacing:.1em; }
.card h3{ font-size:20px; margin:16px 0 12px; font-weight:500; }
.card p{ color:var(--ink-dim); font-size:14.5px; line-height:1.65; margin:0 0 14px; }
.card:last-child p{ margin-bottom:0; }

.stripe{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:rgba(17,13,28,.85); backdrop-filter:blur(3px); }
.stripe-inner{ max-width:1140px; margin:0 auto; padding:70px 64px; display:flex; align-items:center; gap:48px; flex-wrap:wrap; }
.stripe-inner .copy{ flex:1; min-width:280px; }
.stripe-inner .copy h3{ font-family:'Big Shoulders Display'; text-transform:uppercase; font-size:30px; margin-bottom:14px; }
.stripe-inner .copy p{ color:var(--ink-dim); font-size:15px; line-height:1.7; max-width:480px; }
.addr-chip{ font-family:'JetBrains Mono'; font-size:12.5px; background:var(--surface-raised);
  border:1px solid var(--border-bright); border-radius:3px; padding:8px 14px; display:inline-block; margin-top:18px; color:var(--violet-bright); word-break:break-all; }

/* code block for mining instructions */
.codeblock{ background:var(--surface-raised); border:1px solid var(--border-bright); border-radius:6px;
  padding:20px 24px; font-family:'JetBrains Mono'; font-size:13.5px; line-height:1.9; color:var(--ink-dim);
  overflow-x:auto; }
.codeblock .k{ color:var(--violet-bright); }
.codeblock .c{ color:var(--ink-faint); }

/* pool cards */
.pool-card{ background:rgba(17,13,28,.88); border:1px solid var(--border); border-radius:10px; padding:32px;
  display:flex; flex-direction:column; gap:16px; }
.pool-card .pname{ font-family:'Big Shoulders Display'; font-size:24px; text-transform:uppercase; }
.pool-card .purl{ font-family:'JetBrains Mono'; font-size:13px; color:var(--violet-bright); word-break:break-all; }

/* roadmap timeline */
.roadmap{ display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); }
.rm-phase{ background:rgba(17,13,28,.88); padding:34px 36px; display:grid; grid-template-columns:160px 1fr; gap:28px; }
.rm-phase.done .rm-status{ color:#5fe88a; }
.rm-phase.active .rm-status{ color:var(--amber); }
.rm-phase.future .rm-status{ color:var(--ink-faint); }
.rm-num{ font-family:'JetBrains Mono'; font-size:12px; letter-spacing:.1em; color:var(--ink-faint); margin-bottom:8px; }
.rm-status{ font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.rm-phase h3{ font-family:'Big Shoulders Display'; font-size:26px; text-transform:uppercase; margin-bottom:14px; }
.rm-phase ul{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.rm-phase li{ color:var(--ink-dim); font-size:14.5px; line-height:1.5; padding-left:20px; position:relative; }
.rm-phase li::before{ content:'—'; position:absolute; left:0; color:var(--ink-faint); }
.rm-phase.done li::before{ content:'✓'; color:#5fe88a; }

/* download cards */
.dl-card{ background:rgba(17,13,28,.88); border:1px solid var(--border); border-radius:10px; padding:30px;
  display:flex; flex-direction:column; gap:14px; }
.dl-card .platform{ font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.1em; color:var(--amber); }
.dl-card h3{ font-size:19px; font-weight:500; }
.dl-card p{ color:var(--ink-dim); font-size:14px; line-height:1.6; flex:1; }

footer{ padding:50px 64px; border-top:1px solid var(--border); display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:20px; color:var(--ink-faint); font-size:13px; position:relative; }
footer .flinks{ display:flex; gap:24px; }
footer a{ text-decoration:none; color:var(--ink-dim); }
footer a:hover{ color:var(--violet-bright); }

@media (max-width:860px){
  nav{padding:18px 24px} nav .navlinks{display:none}
  .hero{padding:90px 24px 70px} h1{font-size:52px}
  .page-hero{padding:60px 24px 40px} .page-hero h1{font-size:38px}
  .specs{grid-template-columns:repeat(2,1fr)}
  .section{padding:70px 24px}
  .grid3,.grid2{grid-template-columns:1fr}
  .stripe-inner{flex-direction:column; padding:50px 24px}
  .rm-phase{grid-template-columns:1fr; gap:10px}
}