:root{
  --bg:#04050d;
  --bg2:#0a0c1f;
  --ink:#e8efff;
  --mute:#8f9ac0;
  --cyan:#5ef1ff;
  --blue:#2f7bff;
  --violet:#9d6bff;
  --gold:#ffcf6b;
  --red:#ff5a6e;
  --line:rgba(120,170,255,.18);
  --disp:'Anton',Impact,'Arial Narrow Bold',sans-serif;
  --mono:'Space Mono',ui-monospace,Consolas,monospace;
  --body:'Inter Tight',system-ui,-apple-system,Segoe UI,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.55;overflow-x:hidden;
}
body.is-loading{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}

/* page-wide starfield + grain */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:url(assets/bg4.jpg) center/cover no-repeat;opacity:.55;
}
body::after{
  content:"";position:fixed;inset:-50%;z-index:100;pointer-events:none;opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(4) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}

/* ================= LOADER ================= */
.ascent{position:fixed;inset:0;z-index:50;background:#000;overflow:hidden;transition:opacity .7s ease, visibility .7s}
.ascent.gone{opacity:0;visibility:hidden;pointer-events:none}
.sky,.layer,.streaks{position:absolute;inset:0}
.layer{
  background:var(--img) center/cover no-repeat;opacity:0;
  will-change:opacity,transform;filter:saturate(.9) contrast(1.05);
}
.l1{opacity:1}
.streaks{width:100%;height:100%;mix-blend-mode:screen}
.climber{
  position:absolute;left:50%;top:50%;width:min(62vh,78vw);aspect-ratio:1;object-fit:cover;
  transform:translate(-50%,40%);mix-blend-mode:screen;will-change:transform;
  -webkit-mask-image:linear-gradient(#000 62%,transparent 96%);mask-image:linear-gradient(#000 62%,transparent 96%);
}
.flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,#fff 0,rgba(180,230,255,.7) 30%,transparent 70%);opacity:0;pointer-events:none}
.hud{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:22px 26px;font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;pointer-events:none;z-index:3}
.hud-top{display:flex;justify-content:space-between;align-items:center}
.hud-tag{color:var(--cyan);text-shadow:0 0 10px rgba(94,241,255,.6)}
.skip{pointer-events:auto;background:rgba(0,0,0,.35);color:var(--ink);border:1px solid rgba(255,255,255,.3);font:inherit;padding:7px 12px;cursor:pointer;text-transform:uppercase;letter-spacing:.08em}
.skip:hover{background:var(--cyan);color:#000;border-color:var(--cyan)}
.alt{position:absolute;left:26px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;border-left:2px solid var(--cyan);padding-left:12px}
.alt-val.inf{font-family:Arial,sans-serif;font-size:clamp(48px,7vw,84px);line-height:.8}
.alt-label{color:var(--mute);font-size:12px}
.alt-val{font-family:var(--disp);font-size:clamp(28px,4.5vw,52px);letter-spacing:.01em;color:#fff;text-shadow:0 2px 0 #000,0 0 18px rgba(94,241,255,.5)}
.hud-bot{display:flex;flex-direction:column;gap:8px;max-width:520px;width:100%;margin:0 auto}
.bar{height:6px;background:rgba(255,255,255,.12);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan),var(--gold));box-shadow:0 0 14px var(--cyan)}
.hud-row{display:flex;justify-content:space-between;color:#cfe6ff;text-shadow:0 1px 2px #000}
.slam{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(2.4);opacity:0;margin:0;z-index:4;
  font-family:var(--disp);font-weight:400;text-transform:uppercase;text-align:center;line-height:.88;
  font-size:clamp(56px,13vw,190px);color:#fff;pointer-events:none;
  text-shadow:0 0 30px rgba(94,241,255,.8),4px 4px 0 #000;
}
.slam span{display:block}
.slam span:last-child{color:var(--cyan)}
.slam.in{animation:slam .5s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes slam{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* ================= NAV ================= */
.nav{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:22px;
  padding:12px clamp(16px,4vw,48px);background:rgba(4,5,13,.72);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-name{font-family:var(--disp);text-transform:uppercase;font-size:22px;letter-spacing:.02em}
.orb{position:relative;width:30px;height:30px;display:inline-block}
.orb::after{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.orb i{position:absolute;inset:0;border:2px solid var(--cyan);border-radius:50%;transform:rotate(var(--r)) scaleY(.36);box-shadow:0 0 6px var(--cyan)}
.orb i:nth-child(1){--r:0deg}.orb i:nth-child(2){--r:60deg;border-color:#fff}.orb i:nth-child(3){--r:-60deg;border-color:var(--violet)}
.links{display:flex;gap:20px;margin-left:auto;font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.links a{text-decoration:none;color:var(--mute)}
.links a:hover{color:var(--cyan)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font-family:var(--mono);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.06em;
  padding:11px 16px;text-decoration:none;border:1px solid var(--line);color:var(--ink);background:transparent;
  transition:transform .12s, background .12s, color .12s;
}
.btn:hover{transform:translate(-2px,-2px)}
.btn-buy{background:var(--cyan);color:#001018;border-color:var(--cyan);box-shadow:4px 4px 0 var(--violet)}
.btn-buy:hover{box-shadow:6px 6px 0 var(--violet)}
.btn.big{font-size:16px;padding:15px 24px}
.ghost:hover{border-color:var(--cyan);color:var(--cyan)}

/* ================= HERO ================= */
.hero{
  display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,5vw,72px);align-items:center;
  padding:clamp(40px,7vw,96px) clamp(16px,4vw,48px) clamp(40px,6vw,80px);max-width:1360px;margin:0 auto;
}
.kicker{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);margin:0 0 14px;display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
.title{
  font-family:var(--disp);font-weight:400;text-transform:uppercase;margin:0;
  font-size:clamp(64px,10vw,150px);line-height:.86;letter-spacing:-.005em;
  text-shadow:5px 5px 0 #000;
}
.title em{font-style:normal;color:var(--cyan);text-shadow:5px 5px 0 #000,0 0 40px rgba(94,241,255,.45)}
.ticker-big{font-family:var(--mono);font-weight:700;font-size:clamp(22px,2.6vw,32px);margin:14px 0 18px;color:var(--gold);letter-spacing:.04em}
.lede{max-width:560px;color:#c6d0ee;margin:0 0 26px}
.ca{
  display:flex;align-items:center;gap:12px;max-width:560px;padding:10px 12px;cursor:pointer;
  border:1px dashed rgba(94,241,255,.45);background:rgba(10,12,31,.7);font-family:var(--mono);font-size:13px;
}
.ca-label{background:var(--violet);color:#fff;padding:2px 7px;font-weight:700}
.ca code{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#dfe8ff}
.ca-copy{color:var(--cyan);text-transform:uppercase}
.ca.copied{border-color:var(--gold)}
.ca.copied .ca-copy{color:var(--gold)}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.cta.center{justify-content:center;margin-top:34px}

.hero-art{position:relative;margin:0;transform:rotate(1.5deg)}
.hero-art img{width:100%;border:3px solid #fff;box-shadow:12px 12px 0 rgba(157,107,255,.55),0 0 80px rgba(94,241,255,.25)}
.sticker{
  position:absolute;font-family:var(--disp);text-transform:uppercase;font-size:clamp(16px,1.8vw,24px);
  padding:6px 12px;background:var(--gold);color:#000;border:2px solid #000;box-shadow:3px 3px 0 #000;
}
.s1{left:-14px;top:12%;transform:rotate(-8deg)}
.s2{right:-12px;bottom:12%;transform:rotate(6deg);background:var(--cyan)}

/* ================= MARQUEE ================= */
.marquee{overflow:hidden;border-block:2px solid #000;background:var(--cyan);color:#001018;transform:rotate(-1deg);margin:10px -20px}
.track{display:flex;gap:26px;width:max-content;padding:10px 0;animation:mq 26s linear infinite;font-family:var(--disp);text-transform:uppercase;font-size:clamp(20px,2.4vw,30px);white-space:nowrap}
.track b{font-weight:400;color:var(--violet)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ================= SECTIONS ================= */
section{scroll-margin-top:70px}
.sec-head{max-width:1360px;margin:0 auto 34px;padding:0 clamp(16px,4vw,48px)}
.sec-head h2{font-family:var(--disp);font-weight:400;text-transform:uppercase;margin:0;font-size:clamp(44px,6.5vw,92px);line-height:.9;text-shadow:4px 4px 0 #000}
.sec-head h2 em{font-style:normal;color:var(--cyan)}
.sec-head p{color:var(--mute);margin:12px 0 0;font-family:var(--mono);font-size:14px}

/* ================= MEMES ================= */
.memes{padding:clamp(70px,9vw,120px) 0 40px}
.wall{
  columns:4 260px;column-gap:18px;max-width:1360px;margin:0 auto;padding:0 clamp(16px,4vw,48px);
}
.meme{
  break-inside:avoid;margin:0 0 18px;cursor:zoom-in;position:relative;background:#000;
  border:2px solid #fff;box-shadow:6px 6px 0 var(--sh,rgba(94,241,255,.45));
  transform:rotate(var(--rot,0deg));transition:transform .18s, box-shadow .18s;
}
.meme:hover{transform:rotate(0) scale(1.03);z-index:2;box-shadow:10px 10px 0 var(--sh,rgba(94,241,255,.6))}
.meme:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.meme-img{position:relative}
.meme-img img{width:100%}
.cap{
  position:absolute;left:4%;right:4%;text-align:center;font-family:var(--disp);text-transform:uppercase;
  color:#fff;line-height:1.02;font-size:clamp(20px,2.1vw,30px);letter-spacing:.01em;
  -webkit-text-stroke:2px #000;paint-order:stroke fill;text-shadow:0 2px 0 #000,0 0 4px #000;
}
.cap.top{top:3%}
.cap.bot{bottom:3%}
.meme .tag{
  position:absolute;right:8px;top:8px;font-family:var(--mono);font-size:11px;background:rgba(0,0,0,.65);color:var(--cyan);padding:2px 6px;
  opacity:0;transition:opacity .15s
}
.meme:hover .tag{opacity:1}

/* ================= LORE ================= */
.lore{padding:clamp(70px,9vw,120px) 0}
.lore-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,56px);max-width:1360px;margin:0 auto;padding:0 clamp(16px,4vw,48px);align-items:start}
.vault{margin:0;position:sticky;top:90px}
.vault img{border:3px solid #fff;box-shadow:12px 12px 0 rgba(255,207,107,.45)}
.vault figcaption{font-family:var(--mono);font-size:13px;color:var(--mute);margin-top:12px}
.chapters{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.chapters li{border:1px solid var(--line);background:rgba(8,10,26,.78);padding:22px 24px;position:relative}
.chapters li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--cyan),var(--violet))}
.ch{font-family:var(--mono);font-size:12px;color:var(--cyan);letter-spacing:.1em}
.chapters h3{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(28px,3vw,40px);margin:4px 0 8px;line-height:1}
.chapters p{margin:0;color:#c6d0ee}
.chapters b{color:var(--gold)}

.statement{
  max-width:760px;margin:clamp(40px,6vw,72px) auto 0;background:#f2eee2;color:#141414;font-family:var(--mono);
  padding:26px 28px;transform:rotate(-1.2deg);box-shadow:10px 10px 0 rgba(94,241,255,.4);
  background-image:repeating-linear-gradient(#f2eee2 0 27px,#e3ddcc 27px 28px);
  width:calc(100% - 32px);
}
.st-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-weight:700;border-bottom:2px dashed #141414;padding-bottom:10px;margin-bottom:12px;font-size:14px}
.statement dl{margin:0}
.statement dl div{display:flex;justify-content:space-between;gap:16px;padding:4px 0;font-size:14px}
.statement dt{color:#555}
.statement dd{margin:0;text-align:right;font-weight:700}
.statement small{font-weight:400;color:#777}
.red{color:#d11b34}
.flip{display:inline-block;min-width:1.4em;color:#1a4dff;font-size:18px}
.fine{font-family:var(--mono);font-size:12px;color:#666;margin:14px 0 0}

/* ================= CHART ================= */
.chart{padding:clamp(60px,8vw,100px) 0}
.chart-frame{max-width:1260px;margin:0 auto;height:min(70vh,640px);border:2px solid #fff;background:rgba(5,6,16,.85);margin-inline:clamp(16px,4vw,48px)}
@media(min-width:1360px){.chart-frame{margin-inline:auto}}
.chart-frame iframe{width:100%;height:100%;border:0}
.chart-empty{height:100%;display:grid;place-content:center;gap:14px;text-align:center;font-family:var(--mono);color:var(--mute)}

/* ================= BUY ================= */
.buy{padding:clamp(60px,8vw,100px) 0 clamp(70px,9vw,120px)}
.steps{list-style:none;margin:0 auto;padding:0 clamp(16px,4vw,48px);max-width:1360px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.steps li{border:2px solid #fff;padding:24px;background:rgba(8,10,26,.85);box-shadow:6px 6px 0 var(--violet)}
.steps li:nth-child(2){box-shadow:6px 6px 0 var(--cyan)}
.steps li:nth-child(3){box-shadow:6px 6px 0 var(--gold)}
.steps b{font-family:var(--disp);font-weight:400;font-size:48px;color:var(--cyan);line-height:1}
.steps h3{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:28px;margin:8px 0 6px}
.steps p{margin:0;color:#c6d0ee}

/* ================= FOOTER ================= */
.foot{border-top:1px solid var(--line);padding:30px clamp(16px,4vw,48px) 40px;background:rgba(4,5,13,.9)}
.foot-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;max-width:1360px;margin:0 auto}
.foot-links{display:flex;gap:18px;font-family:var(--mono);font-size:13px;text-transform:uppercase}
.foot-links a{text-decoration:none;color:var(--mute)}
.foot-links a:hover{color:var(--cyan)}
.foot .fine{max-width:1360px;margin:16px auto 0;color:#6c7598}

/* ================= LIGHTBOX ================= */
.lightbox{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.88);display:grid;place-items:center;padding:16px}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:min(820px,100%)}
.lightbox .meme-img{border:3px solid #fff;max-height:80vh}
.lightbox .meme-img img{max-height:calc(80vh - 6px);width:auto}
.lightbox .cap{font-size:clamp(24px,4vw,46px)}
.lb-close{position:absolute;top:14px;right:18px;background:none;border:0;color:#fff;font-size:44px;line-height:1;cursor:pointer}

/* ================= RESPONSIVE ================= */
@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero-art{max-width:560px;margin:0 auto}
  .lore-grid{grid-template-columns:1fr}
  .vault{position:static}
  .steps{grid-template-columns:1fr}
  .links{display:none}
  .nav .btn-buy{margin-left:auto}
}
@media(max-width:560px){
  body{font-size:16px}
  .brand-name{font-size:18px}
  .nav .btn-buy{padding:9px 11px;font-size:11px}
  .alt{left:16px}
  .hud{padding:16px}
  .statement{padding:20px 16px}
  .statement dl div{flex-direction:column;gap:0}
  .statement dd{text-align:left}
  .s1{left:-6px}.s2{right:-6px}
}
@media (prefers-reduced-motion:reduce){
  body::after,.track,.dot{animation:none}
  html{scroll-behavior:auto}
}