:root {
  --ice: #f4f8fa;
  --snow: #ffffff;
  --ink: #04130b;
  --ink-2: #092418;
  --fog: #8d9a9f;
  --muted: #b3c9bb;
  --line: rgba(174,244,137,.25);
  --green: #c3f53c;
  --emerald: #00c805;
  --green-2: #dbff87;
  --panel: rgba(5,31,17,.82);
  --max: 1240px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  color: var(--ice);
  background:
    radial-gradient(circle at 50% 12%, rgba(0,200,5,.28), transparent 28%),
    linear-gradient(#04130b, #082d19 45%, #04130b);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
::selection { background: var(--green); color: #001a0d; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

#webgl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  background: radial-gradient(circle at 50% 65%, #205b33 0%, #071f12 46%, #020b06 100%);
}
.canvas-fallback {
  position: fixed; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at 70% 20%, rgba(0,200,5,.22), transparent 50%), linear-gradient(180deg, #0d3920, #04130b 65%);
  opacity: 0; pointer-events: none;
}
.no-webgl .canvas-fallback { opacity: 1; }

.noise {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events:none; box-shadow: inset 0 0 180px 30px rgba(0,0,0,.72); }

.topbar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 30;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 18px; padding: 18px clamp(18px, 4vw, 54px);
  border-bottom: 1px solid rgba(195,245,60,.24);
  background: linear-gradient(rgba(4,25,13,.94), rgba(4,25,13,.72));
  backdrop-filter: blur(14px);
}
.brand { display:flex; align-items:center; gap:10px; font-weight:850; letter-spacing:-.03em; }
.brand-mark { width:31px; height:31px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.3); }
.brand span { color: var(--green); }
.nav { display:flex; gap: 25px; font-size: 12px; letter-spacing:.13em; text-transform:uppercase; color:#d8dede; }
.nav a { opacity:.76; transition:.25s; }
.nav a:hover { opacity:1; color:var(--green-2); }
.top-actions { justify-self:end; display:flex; gap:8px; align-items:center; }
.pill, .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height: 42px; padding: 0 15px; border:1px solid var(--line); border-radius:999px;
  text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:800;
  background: rgba(5,36,19,.82); color:var(--ice); cursor:pointer;
  transition: transform .25s var(--ease), background .25s, border-color .25s, color .25s;
}
.btn:hover, .pill:hover { transform: translateY(-2px); border-color:rgba(195,245,60,.72); }
.btn-primary { color:#00190c; background:var(--green); border-color:var(--green); }
.btn-primary:hover { background:var(--green-2); }
.btn[aria-disabled="true"] { opacity:.5; cursor:not-allowed; transform:none; }
.menu-btn { display:none; width:42px; height:42px; padding:0; }

.mobile-menu {
  position:fixed; inset:0; z-index:25; display:none; place-items:center;
  background:rgba(4,25,13,.98); backdrop-filter:blur(24px);
}
.mobile-menu.open { display:grid; }
.mobile-menu nav { display:grid; gap:24px; text-align:center; font-size:clamp(30px,8vw,52px); font-weight:900; letter-spacing:-.05em; }
.mobile-menu small { color:var(--muted); font-size:12px; letter-spacing:.15em; text-transform:uppercase; }

main { position:relative; z-index:3; }
.section { min-height: 100svh; position:relative; display:flex; align-items:center; padding: 120px clamp(20px,5vw,72px) 80px; }
.section-inner { width:min(var(--max),100%); margin:0 auto; }

.hero { min-height: 115svh; align-items:flex-end; padding-bottom:9vh; }
.hero-grid { display:grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px,.65fr); gap:clamp(35px,7vw,90px); align-items:end; }
.eyebrow { display:flex; align-items:center; gap:10px; font-size:11px; text-transform:uppercase; letter-spacing:.19em; font-weight:800; color:#d8dfdf; }
.eyebrow::before { content:""; width:34px; height:1px; background:var(--green); }
.hero h1, .chapter h2, .final h2 { margin:18px 0 18px; text-transform:uppercase; font-weight:950; line-height:.86; letter-spacing:-.07em; }
.hero h1 { font-size:clamp(72px,13vw,190px); max-width:9ch; }
.hero h1 .green { color:var(--green); }
.hero-copy { max-width:660px; font-size:clamp(16px,2vw,21px); line-height:1.55; color:#d0d6d6; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.hero-card {
  align-self:end; padding:20px; border:1px solid var(--line); border-radius:22px;
  background:linear-gradient(145deg,rgba(27,79,35,.92),rgba(5,30,17,.82)); backdrop-filter:blur(18px);
  box-shadow: 0 18px 70px rgba(0,0,0,.25);
}
.hero-card img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:15px; display:block; }
.hero-card .meta { display:flex; justify-content:space-between; gap:15px; margin-top:14px; font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
.scroll-cue { position:absolute; right:clamp(20px,5vw,72px); bottom:34px; writing-mode:vertical-rl; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#c2c9c9; }
.scroll-cue::after { content:""; height:60px; width:1px; background:linear-gradient(var(--green),transparent); display:inline-block; margin-top:12px; }

.chapter { min-height:100svh; }
.chapter-grid { display:grid; grid-template-columns: minmax(0,1fr) minmax(280px,.7fr); align-items:center; gap:clamp(40px,10vw,130px); }
.chapter .number { color:var(--green); font-weight:900; letter-spacing:.1em; font-size:12px; }
.chapter h2 { font-size:clamp(52px,8vw,116px); max-width:11ch; }
.chapter p { max-width:650px; color:#c2c9ca; font-size:clamp(16px,1.6vw,20px); line-height:1.7; }
.quote-panel { padding:clamp(24px,4vw,46px); border:1px solid var(--line); border-radius:28px; background:linear-gradient(145deg,rgba(10,53,28,.9),rgba(3,24,13,.86)); backdrop-filter:blur(14px); }
.quote-panel .big { font-size:clamp(28px,4.5vw,58px); line-height:1.02; letter-spacing:-.045em; font-weight:900; text-transform:uppercase; }
.quote-panel .big b { color:var(--green); }

.stats-strip { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:22px; overflow:hidden; margin-top:34px; background:rgba(5,35,19,.90); }
.stat { padding:20px; border-right:1px solid var(--line); }
.stat:last-child { border-right:0; }
.stat small { display:block; text-transform:uppercase; letter-spacing:.13em; color:var(--muted); font-size:9px; }
.stat strong { display:block; margin-top:8px; font-size:clamp(18px,2vw,28px); }

.proof-card { margin-top:25px; padding:20px; border:1px solid rgba(195,245,60,.44); border-radius:18px; background:rgba(0,200,5,.12); }
.proof-row { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.07); }
.proof-row:last-child { border-bottom:0; }
.proof-row span { color:var(--muted); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.proof-row code { font-size:12px; color:var(--green-2); word-break:break-all; text-align:right; }

.memes { min-height:auto; padding-top:150px; padding-bottom:150px; background:linear-gradient(transparent,rgba(3,33,16,.94) 15%,rgba(3,33,16,.94) 85%,transparent); }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:35px; margin-bottom:42px; }
.section-head h2 { margin:8px 0 0; font-size:clamp(48px,7vw,100px); line-height:.9; text-transform:uppercase; letter-spacing:-.06em; }
.section-head p { max-width:430px; color:#aeb7b8; line-height:1.6; }
.meme-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:12px; }
.meme-card { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:#082b17; min-height:300px; }
.meme-card:nth-child(1), .meme-card:nth-child(4), .meme-card:nth-child(7), .meme-card:nth-child(10) { grid-column:span 5; }
.meme-card:nth-child(2), .meme-card:nth-child(3), .meme-card:nth-child(5), .meme-card:nth-child(6), .meme-card:nth-child(8), .meme-card:nth-child(9) { grid-column:span 7; }
.meme-card img { width:100%; height:100%; min-height:300px; object-fit:cover; display:block; transition: transform .7s var(--ease); }
.meme-card:hover img { transform:scale(1.035); }
.meme-card .tag { position:absolute; left:13px; top:13px; padding:8px 10px; background:rgba(5,36,17,.94); color:var(--green); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.15); border-radius:999px; font-size:9px; font-weight:900; letter-spacing:.15em; }

.ecosystem-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:38px; }
.eco-card { min-height:240px; padding:24px; border:1px solid var(--line); border-radius:24px; display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(145deg,rgba(13,63,30,.94),rgba(4,27,14,.94)); backdrop-filter:blur(14px); transition:.35s var(--ease); }
.eco-card:hover { transform:translateY(-6px); border-color:rgba(195,245,60,.7); background:rgba(16,75,34,.94); }
.eco-card .idx { color:var(--green); font-size:11px; font-weight:900; letter-spacing:.14em; }
.eco-card h3 { margin:0; font-size:27px; letter-spacing:-.04em; }
.eco-card p { color:#9fa9aa; line-height:1.55; font-size:14px; }
.eco-card .arrow { font-size:23px; color:var(--green); }

.final { min-height:115svh; text-align:center; align-items:center; }
.final .section-inner { display:grid; place-items:center; }
.final h2 { font-size:clamp(62px,11vw,170px); max-width:9ch; }
.final h2 span { color:var(--green); }
.final p { max-width:690px; color:#c2c9ca; font-size:18px; line-height:1.7; }
.final-actions { margin-top:28px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.social-row { margin-top:22px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }

footer { position:relative; z-index:4; padding:40px clamp(20px,5vw,72px); border-top:1px solid var(--line); background:#041b0d; }
.footer-inner { max-width:var(--max); margin:auto; display:grid; grid-template-columns:1fr auto; gap:25px; align-items:end; }
.footer-logo { display:flex; gap:13px; align-items:center; }
.footer-logo img { width:54px; height:54px; border-radius:50%; object-fit:cover; }
.footer-logo strong { display:block; font-size:20px; }
.footer-logo small { color:var(--muted); }
.footer-links { display:flex; gap:16px; flex-wrap:wrap; justify-content:flex-end; text-transform:uppercase; letter-spacing:.1em; font-size:10px; color:#aeb6b7; }
.disclaimer { grid-column:1/-1; padding-top:22px; border-top:1px solid rgba(255,255,255,.07); font-size:11px; line-height:1.55; color:#6f7879; }

.chapter-indicator { position:fixed; left:20px; top:50%; transform:translateY(-50%); z-index:15; display:grid; gap:8px; }
.chapter-indicator a { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.25); transition:.25s; }
.chapter-indicator a.active { height:24px; border-radius:6px; background:var(--green); }

.reveal { opacity:0; transform:translateY(32px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 980px) {
  .topbar { grid-template-columns:1fr auto; }
  .nav, .top-actions .pill { display:none; }
  .top-actions { grid-column:2; grid-row:1; }
  .menu-btn { display:inline-flex; }
  .hero-grid, .chapter-grid { grid-template-columns:1fr; }
  .hero-card { width:min(430px,86vw); justify-self:end; }
  .chapter-grid { gap:30px; }
  .quote-panel { width:min(620px,100%); justify-self:end; }
  .stats-strip { grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2) { border-right:0; }
  .stat:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .ecosystem-cards { grid-template-columns:repeat(2,1fr); }
  .chapter-indicator { display:none; }
}

@media (max-width: 660px) {
  .topbar { padding:13px 15px; }
  .brand { font-size:14px; }
  .brand-mark { width:28px; height:28px; }
  .section { padding:100px 18px 60px; }
  .hero { padding-bottom:80px; }
  .hero h1 { font-size:clamp(62px,21vw,110px); }
  .hero-grid { gap:25px; }
  .hero-card { width:72vw; }
  .scroll-cue { display:none; }
  .chapter h2 { font-size:clamp(48px,16vw,74px); }
  .stats-strip { grid-template-columns:1fr; }
  .stat, .stat:nth-child(2) { border-right:0; border-bottom:1px solid var(--line); }
  .stat:last-child { border-bottom:0; }
  .section-head { display:block; }
  .meme-grid { grid-template-columns:1fr; }
  .meme-card:nth-child(n) { grid-column:1; min-height:240px; }
  .meme-card img { min-height:240px; }
  .ecosystem-cards { grid-template-columns:1fr; }
  .eco-card { min-height:190px; }
  .footer-inner { grid-template-columns:1fr; }
  .footer-links { justify-content:flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  .meme-card img, .btn, .pill, .eco-card { transition:none; }
}

/* Robinhood-inspired lime / emerald expedition palette. */
.vignette {
  background: radial-gradient(ellipse at 80% 12%, rgba(0,200,5,.20), transparent 56%),
              linear-gradient(90deg, rgba(2,15,7,.72), transparent 74%);
  box-shadow: inset 0 0 160px 20px rgba(0,12,4,.55);
}
.section { scroll-margin-top: 78px; }
.hero-grid > div { container-type: inline-size; min-width: 0; }
.hero h1 { font-size: clamp(48px, 14cqw, 124px); }
.hero h1 .green { display: block; text-shadow: 0 0 55px rgba(195,245,60,.18); }
.hero .eyebrow {
  width: fit-content; padding: 9px 13px; border: 1px solid var(--line);
  border-radius: 999px; color: var(--green); background: rgba(0,200,5,.12);
}
.btn-primary { box-shadow: 0 6px 28px rgba(195,245,60,.18); }
.btn-primary:hover { box-shadow: 0 8px 38px rgba(195,245,60,.30); }
.top-actions #buy-top { background: var(--green); color: #09220e; border-color: var(--green); }
.hero-card { border-color: rgba(195,245,60,.5); box-shadow: 0 18px 70px rgba(0,30,9,.38), 0 0 50px rgba(0,200,5,.12); }
.hero-card .meta { color: #d1e8bb; }
.hero-card .meta span:last-child { color: var(--green); }
.stat strong { color: var(--green); }
.stat small { color: #b7d2bd; }
.quote-panel { border-top: 2px solid var(--green); box-shadow: 0 18px 60px rgba(0,25,9,.18); }
#follow, #ecosystem { background: radial-gradient(ellipse at 80% 55%, rgba(0,200,5,.16), transparent 68%); }
#movement { background: linear-gradient(115deg, rgba(10,46,20,.70), rgba(0,200,5,.10), transparent); }
.final { background: radial-gradient(ellipse at 50% 75%, rgba(0,200,5,.24), transparent 70%); }
.eco-card:nth-child(2) { border-color: var(--green); background: linear-gradient(145deg,rgba(45,85,18,.94),rgba(5,36,16,.95)); }
.eco-card h3 { color: #eaffd6; }
.eco-card p { color: #bfd3c2; }
.meme-card:hover { border-color: var(--green); }
.footer-logo strong { color: var(--green); }
.chapter-indicator a.active { box-shadow: 0 0 15px rgba(195,245,60,.55); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--green); outline-offset: 5px; }
@media (max-width: 1120px) and (min-width: 981px) {
  .topbar { gap: 10px; padding-inline: 22px; }
  .nav { gap: 14px; font-size: 10px; }
  .brand { font-size: 13px; }
  .top-actions .pill { padding-inline: 10px; font-size: 9px; }
}
@media (max-width: 660px) {
  .hero h1 { font-size: clamp(46px, 14cqw, 86px); }
  .vignette { background: linear-gradient(90deg, rgba(2,15,7,.70),rgba(2,15,7,.22)); }
}
.vignette::before {
  content: ""; position: absolute; top: -12%; left: 28%; width: 82%; height: 48%;
  border-radius: 50%; transform: rotate(-18deg);
  background: radial-gradient(ellipse, transparent 25%, rgba(0,200,5,.18) 44%, rgba(195,245,60,.10) 49%, transparent 64%);
  filter: blur(24px); opacity: .9;
}

/* Simple purchase guide, with the direct token route on every buy CTA. */
.buy-guide { min-height: auto; padding-block: 110px; background: linear-gradient(135deg,rgba(5,36,17,.97),rgba(10,59,28,.96)); }
.buy-guide h2 span { color: var(--green); }
.buy-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; list-style: none; padding: 0; margin: 0; }
.buy-step { padding: 26px; border: 1px solid var(--line); border-radius: 22px; background: rgba(2,23,10,.58); }
.step-number { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 50%; color: #0b250c; background: var(--green); font-size: 12px; font-weight: 900; }
.buy-step h3 { margin: 24px 0 12px; font-size: 22px; line-height: 1.15; letter-spacing: -.035em; }
.buy-step p { margin: 0; color: #c7d9cc; font-size: 14px; line-height: 1.7; }
.buy-step p a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.buy-guide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 28px; }
.buy-network { color: #c0d1ba; font-size: 10px; letter-spacing: .15em; }
@media (max-width: 1250px) { .nav { gap: 14px; font-size: 10px; } .topbar { column-gap: 12px; } }
@media (max-width: 980px) { .buy-steps { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 660px) { .buy-steps { grid-template-columns: 1fr; } .buy-step { padding: 24px; } .buy-guide { padding-block: 80px; } }