/* =======================================================
   STONK ZCAT — comic / perspective theme
   ======================================================= */

:root{
  --ink:#07070c;
  --paper:#f3ead6;
  --blue:#1f7bff;
  --blue-deep:#0a1d4d;
  --blue-glow:#5cc8ff;
  --kraft:#c99a5b;
  --kraft-lt:#e8bd82;
  --green:#25d366;
  --red:#ff4d4d;
  --white:#ffffff;

  --edge:5px;
  --hard: 10px 10px 0 var(--ink);
  --hard-sm: 6px 6px 0 var(--ink);

  --f-comic:"Bangers", Impact, system-ui, sans-serif;
  --f-black:"Archivo Black", Impact, system-ui, sans-serif;
  --f-body:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;

  --wrap:1240px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; scroll-padding-top:96px}

body{
  margin:0;
  font-family:var(--f-body);
  color:var(--white);
  background:#04060f;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

/* =======================================================
   BACKGROUND STACK  (logo.png lives here)
   ======================================================= */
.bg-stack{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}

.bg-photo{
  position:absolute; inset:-6%;
  background:url("../logo.png") center/cover no-repeat;
  filter:blur(3px) saturate(1.35) brightness(.6) contrast(1.1);
  transform:scale(1.08);
  animation:bgdrift 34s ease-in-out infinite alternate;
}
@keyframes bgdrift{
  from{transform:scale(1.08) translate3d(-1.2%, -1%, 0)}
  to  {transform:scale(1.16) translate3d(1.2%, 1.4%, 0)}
}

.bg-ink{
  position:absolute;inset:0;
  background:
    radial-gradient(1200px 700px at 78% 8%,  rgba(92,200,255,.38), transparent 62%),
    radial-gradient(900px 700px at 8% 82%,  rgba(31,123,255,.34), transparent 60%),
    linear-gradient(180deg, rgba(4,8,26,.80) 0%, rgba(3,6,20,.90) 45%, rgba(2,4,14,.95) 100%);
}

/* comic ben-day halftone */
.bg-halftone{
  position:absolute;inset:-50%;
  background-image:radial-gradient(rgba(255,255,255,.16) 1.15px, transparent 1.2px);
  background-size:7px 7px;
  opacity:.42;
  mix-blend-mode:overlay;
  transform:rotate(-12deg);
}

/* perspective grid floor */
.bg-grid{
  position:absolute; left:-25%; right:-25%; bottom:-10%; height:62%;
  background-image:
    linear-gradient(rgba(120,200,255,.20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,200,255,.16) 1px, transparent 1px);
  background-size:64px 64px;
  transform:perspective(520px) rotateX(66deg);
  transform-origin:bottom center;
  mask-image:linear-gradient(to top, #000 8%, transparent 88%);
  -webkit-mask-image:linear-gradient(to top, #000 8%, transparent 88%);
  opacity:.75;
  animation:gridrun 9s linear infinite;
}
@keyframes gridrun{ from{background-position:0 0,0 0} to{background-position:0 64px,64px 0} }

/* ---- SHINE SWEEPS ---- */
.bg-shine{
  position:absolute; top:-60%; bottom:-60%; width:46vw; left:-60vw;
  background:linear-gradient(100deg,
      transparent 0%,
      rgba(255,255,255,.05) 32%,
      rgba(180,230,255,.28) 48%,
      rgba(255,255,255,.55) 52%,
      rgba(180,230,255,.24) 57%,
      rgba(255,255,255,.04) 72%,
      transparent 100%);
  transform:rotate(16deg);
  filter:blur(14px);
  mix-blend-mode:screen;
  animation:sweep 9s cubic-bezier(.5,0,.4,1) infinite;
}
.bg-shine--2{
  width:26vw; filter:blur(30px); opacity:.65;
  animation:sweep 9s cubic-bezier(.5,0,.4,1) infinite 3.4s;
}
@keyframes sweep{
  0%   {left:-60vw; opacity:0}
  10%  {opacity:1}
  70%  {opacity:1}
  100% {left:135vw; opacity:0}
}

.bg-vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.72) 100%);
}

/* =======================================================
   NAV
   ======================================================= */
.nav{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:24px;
  padding:14px clamp(16px,4vw,42px);
  background:linear-gradient(180deg, rgba(5,8,22,.92), rgba(5,8,22,.62));
  backdrop-filter:blur(12px);
  border-bottom:3px solid var(--ink);
  box-shadow:0 6px 0 rgba(0,0,0,.55), 0 18px 40px rgba(0,0,0,.5);
}
.nav__brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.nav__mark{
  width:46px;height:46px;border:3px solid var(--ink);border-radius:12px;overflow:hidden;
  box-shadow:4px 4px 0 var(--ink); background:var(--blue-deep); flex:none;
  transform:rotate(-4deg);
}
.nav__mark img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.nav__word{
  font-family:var(--f-comic); font-size:30px; letter-spacing:1.5px; line-height:1;
  color:var(--white);
  text-shadow:2px 2px 0 var(--ink), 4px 4px 0 var(--blue);
}
.nav__word em{font-style:normal;color:var(--kraft-lt)}

.nav__links{display:flex;gap:6px}
.nav__links a{
  font-family:var(--f-black); font-size:12px; letter-spacing:1.4px;
  padding:10px 14px; border-radius:8px; color:#cfe4ff;
  border:2px solid transparent; transition:.18s;
}
.nav__links a:hover{color:#fff;border-color:var(--ink);background:rgba(31,123,255,.35);transform:translateY(-2px)}
.nav__links a.is-active{color:#fff;background:var(--blue);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)}

.nav__cta{display:flex;align-items:center;gap:10px}

/* =======================================================
   BUTTONS / CHIPS
   ======================================================= */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-black); font-size:13px; letter-spacing:1.2px;
  padding:12px 18px; border:3px solid var(--ink); border-radius:10px;
  background:var(--white); color:var(--ink);
  box-shadow:var(--hard-sm);
  transition:transform .14s ease, box-shadow .14s ease, filter .14s;
  position:relative; overflow:hidden;
}
.btn::after{
  content:""; position:absolute; top:-120%; bottom:-120%; width:38%; left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
  transform:rotate(18deg); filter:blur(4px);
  animation:btnshine 4.2s ease-in-out infinite;
}
@keyframes btnshine{0%{left:-60%}55%{left:150%}100%{left:150%}}
.btn:hover{transform:translate(-2px,-3px);box-shadow:9px 11px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}

.btn--buy{background:linear-gradient(180deg,#3ef07a,#12b455);color:#04230f}
.btn--ghost{background:linear-gradient(180deg,#3aa0ff,#1153c9);color:#fff}
.btn--big{font-size:15px;padding:16px 24px;border-radius:12px}

.ico-btn{
  width:44px;height:44px;display:grid;place-items:center;
  border:3px solid var(--ink);border-radius:10px;
  background:#0d1430;color:#fff;font-size:18px;
  box-shadow:4px 4px 0 var(--ink); transition:.15s;
}
.ico-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 7px 0 var(--ink);background:var(--blue)}
.ico-btn--dex{background:#101a3d}
.ico-svg{width:22px;height:22px;display:block}

.chip{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-black);font-size:12px;letter-spacing:1.2px;
  padding:12px 18px;border:3px solid var(--ink);border-radius:999px;
  background:rgba(9,15,38,.9);color:#dcecff;box-shadow:5px 5px 0 var(--ink);
  transition:.15s;
}
.chip:hover{transform:translate(-2px,-3px);box-shadow:8px 9px 0 var(--ink);background:var(--blue);color:#fff}

/* =======================================================
   HERO — perspective stage
   ======================================================= */
.hero{position:relative; padding:clamp(40px,7vw,90px) clamp(16px,4vw,42px) 0}
.hero__stage{
  position:relative; max-width:var(--wrap); margin:0 auto;
  perspective:1400px; perspective-origin:50% 40%;
}
.hero__floor{
  position:absolute; left:-8%; right:-8%; bottom:-40px; height:340px;
  background:
    repeating-linear-gradient(90deg, rgba(92,200,255,.22) 0 2px, transparent 2px 58px),
    repeating-linear-gradient(0deg, rgba(92,200,255,.16) 0 2px, transparent 2px 58px);
  transform:rotateX(72deg);
  transform-origin:bottom center;
  mask-image:linear-gradient(to top,#000,transparent);
  -webkit-mask-image:linear-gradient(to top,#000,transparent);
  pointer-events:none;
}

.hero__panelset{
  position:relative;
  display:grid; grid-template-columns:minmax(280px,.85fr) 1.15fr;
  gap:clamp(24px,4vw,54px); align-items:center;
  transform-style:preserve-3d;
}

/* portrait card, tipped into the scene */
.hero__card{
  margin:0; position:relative;
  transform:rotateY(15deg) rotateZ(-3deg) translateZ(30px);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.hero__card:hover{transform:rotateY(6deg) rotateZ(-1deg) translateZ(60px) scale(1.02)}
.hero__card-inner{
  border:5px solid var(--ink); border-radius:14px; overflow:hidden;
  background:var(--paper);
  box-shadow:18px 22px 0 rgba(0,0,0,.75), 0 0 0 4px rgba(92,200,255,.5), 0 30px 70px rgba(0,0,0,.7);
}
.hero__card-inner img{width:100%;aspect-ratio:1/1;object-fit:cover}
.hero__card-inner figcaption{
  font-family:var(--f-black); font-size:11px; letter-spacing:2px;
  padding:11px 14px; background:var(--ink); color:var(--kraft-lt);
}
.sticker--tape{
  position:absolute; top:-18px; left:50%; width:130px; height:34px;
  transform:translateX(-50%) rotate(-6deg);
  background:repeating-linear-gradient(45deg, rgba(255,240,190,.85) 0 8px, rgba(240,220,160,.85) 8px 16px);
  border:2px solid rgba(0,0,0,.35);
  box-shadow:0 4px 12px rgba(0,0,0,.5);
}

.hero__copy{transform:rotateY(-6deg) translateZ(10px)}

.kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-black); font-size:11px; letter-spacing:2.6px;
  padding:8px 14px;border:3px solid var(--ink);border-radius:999px;
  background:var(--red); color:#fff; box-shadow:4px 4px 0 var(--ink);
}
.kicker i{font-size:9px;animation:blink 1.4s steps(2,end) infinite}
@keyframes blink{50%{opacity:.15}}

.hero__title{
  font-family:var(--f-comic);
  font-size:clamp(66px,12vw,164px);
  line-height:.82; margin:18px 0 6px; letter-spacing:2px;
}
.hero__title .line{display:block}
.hero__title .line--1{
  color:#fff;
  text-shadow:
    3px 3px 0 var(--ink), 6px 6px 0 var(--blue),
    9px 9px 0 var(--ink), 0 0 46px rgba(92,200,255,.7);
  transform:skewX(-6deg);
}
.hero__title .line--2{
  color:var(--kraft-lt);
  margin-left:.09em;
  text-shadow:
    3px 3px 0 var(--ink), 6px 6px 0 #8a5f2c,
    9px 9px 0 var(--ink), 0 0 46px rgba(233,189,130,.5);
  transform:skewX(-6deg);
}

/* speech bubbles */
.bubble{
  position:relative; display:inline-block;
  background:var(--paper); color:var(--ink);
  font-family:var(--f-black); font-size:14px; line-height:1.5;
  padding:14px 18px; border:4px solid var(--ink); border-radius:16px;
  box-shadow:var(--hard-sm); margin:14px 0;
}
.bubble--speech::after{
  content:""; position:absolute; left:32px; bottom:-20px;
  border:10px solid transparent; border-top-color:var(--ink);
}
.bubble--speech::before{
  content:""; position:absolute; left:36px; bottom:-11px; z-index:1;
  border:8px solid transparent; border-top-color:var(--paper);
}
.bubble--think{background:#dff0ff}

.hero__lead{
  max-width:56ch; font-size:clamp(15px,1.5vw,18px); line-height:1.65;
  color:#cfe0f7; margin:22px 0 26px;
}
.hero__lead b{color:#fff}

.hero__btns{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}

.ca-bar{
  display:flex;align-items:center;gap:12px;
  max-width:640px; padding:10px 12px;
  border:3px solid var(--ink); border-radius:12px;
  background:rgba(6,11,30,.9); box-shadow:var(--hard-sm);
}
.ca-bar__label{
  font-family:var(--f-black);font-size:11px;letter-spacing:2px;
  background:var(--blue);color:#fff;padding:6px 10px;border-radius:6px;border:2px solid var(--ink);
}
.ca-bar__val{
  flex:1; min-width:0; font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:13px; color:var(--blue-glow);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ca-bar__copy{
  border:2px solid var(--ink); background:var(--kraft-lt); color:var(--ink);
  border-radius:8px; padding:7px 11px; cursor:pointer; font-size:15px;
  box-shadow:3px 3px 0 var(--ink); transition:.14s;
}
.ca-bar__copy:hover{transform:translate(-1px,-2px);box-shadow:5px 6px 0 var(--ink)}

/* comic action words */
.pow{
  position:absolute; font-family:var(--f-comic); pointer-events:none;
  color:#ffd93b; -webkit-text-stroke:3px var(--ink);
  text-shadow:0 0 26px rgba(255,217,59,.7);
  animation:popthrob 2.6s ease-in-out infinite;
}
.pow--1{--r:12deg; top:2%; right:2%; font-size:clamp(34px,5vw,64px); transform:rotate(12deg)}
.pow--2{--r:-9deg; bottom:6%; left:36%; font-size:clamp(26px,3.6vw,46px); color:#5cffa1; transform:rotate(-9deg); animation-delay:.9s}
@keyframes popthrob{0%,100%{transform:scale(1) rotate(var(--r,10deg))}50%{transform:scale(1.13) rotate(var(--r,10deg))}}

/* ticker */
.ticker{
  margin-top:clamp(44px,6vw,80px);
  border-top:4px solid var(--ink); border-bottom:4px solid var(--ink);
  background:linear-gradient(90deg,#ffd93b,#ffb400);
  overflow:hidden; transform:rotate(-1.1deg) scaleX(1.05);
  box-shadow:0 12px 0 rgba(0,0,0,.45);
}
.ticker__track{
  display:flex; gap:44px; padding:12px 0; width:max-content;
  animation:tick 26s linear infinite;
}
.ticker__track span{
  font-family:var(--f-black); font-size:14px; letter-spacing:2.4px; color:var(--ink);
  white-space:nowrap;
}
.ticker__track span::before{content:"◆ ";opacity:.5}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =======================================================
   SECTION SHELL
   ======================================================= */
.sec{
  position:relative; max-width:var(--wrap); margin:0 auto;
  padding:clamp(70px,9vw,130px) clamp(16px,4vw,42px);
}
.sec__head{margin-bottom:clamp(32px,5vw,58px); position:relative}
.sec__head--right{text-align:right}
.sec__head--center{text-align:center}
.sec__num{
  display:inline-block; font-family:var(--f-comic); font-size:16px; letter-spacing:3px;
  padding:5px 14px; border:3px solid var(--ink); border-radius:999px;
  background:var(--kraft-lt); color:var(--ink); box-shadow:4px 4px 0 var(--ink);
}
.sec__title{
  font-family:var(--f-comic);
  font-size:clamp(44px,7.5vw,104px); line-height:.9; margin:16px 0 8px;
  letter-spacing:2px; color:#fff; transform:skewX(-5deg);
  text-shadow:3px 3px 0 var(--ink), 6px 6px 0 var(--blue), 0 0 40px rgba(92,200,255,.55);
}
.sec__sub{
  font-family:var(--f-black); font-size:13px; letter-spacing:2px;
  color:var(--kraft-lt); margin:0;
}

/* =======================================================
   ABOUT — staggered comic panel grid
   ======================================================= */
.comic-grid{
  display:grid; gap:clamp(18px,2.6vw,30px);
  grid-template-columns:repeat(12,1fr);
  perspective:1600px;
}
.panel{
  position:relative; overflow:hidden;
  padding:clamp(22px,2.6vw,34px);
  border:5px solid var(--ink); border-radius:16px;
  background:linear-gradient(155deg, rgba(15,26,62,.94), rgba(6,11,30,.94));
  box-shadow:var(--hard), 0 26px 60px rgba(0,0,0,.6);
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s;
  transform-style:preserve-3d;
}
.panel::before{ /* halftone corner */
  content:""; position:absolute; right:-40px; top:-40px; width:190px; height:190px;
  background-image:radial-gradient(rgba(92,200,255,.55) 1.6px, transparent 1.7px);
  background-size:9px 9px; opacity:.55; pointer-events:none;
}
.panel__tag{
  display:inline-block; font-family:var(--f-black); font-size:10px; letter-spacing:2.4px;
  padding:6px 11px; border:2px solid var(--ink); border-radius:6px;
  background:var(--blue); color:#fff; box-shadow:3px 3px 0 var(--ink);
}
.panel h3{
  font-family:var(--f-comic); font-size:clamp(26px,3vw,40px); line-height:1;
  margin:16px 0 12px; color:#fff; letter-spacing:1px;
  text-shadow:2px 2px 0 var(--ink), 4px 4px 0 rgba(31,123,255,.85);
}
.panel p{margin:0;color:#c3d6f2;line-height:1.68;font-size:15px}
.panel__glare{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16) 47%,rgba(255,255,255,.42) 50%,transparent 66%);
  transform:translateX(-120%);
  transition:transform .8s ease;
}
.panel:hover .panel__glare{transform:translateX(120%)}

.panel--a{grid-column:1/span 7; transform:rotateY(7deg) rotateZ(-1.2deg)}
.panel--b{grid-column:8/span 5; transform:rotateY(-8deg) rotateZ(1.4deg) translateY(26px)}
.panel--c{grid-column:1/span 5; transform:rotateY(7deg) rotateZ(1deg)}
.panel--d{grid-column:6/span 7; transform:rotateY(-6deg) rotateZ(-1.4deg) translateY(-14px)}
.panel:hover{transform:rotateY(0) rotateZ(0) translateY(-8px) scale(1.015); box-shadow:14px 16px 0 var(--ink), 0 34px 80px rgba(0,0,0,.7)}

.panel--solana{background:linear-gradient(155deg, rgba(24,52,110,.95), rgba(8,16,44,.95))}

.statwall{
  grid-column:1/-1; margin-top:14px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,2vw,22px);
}
.stat{
  text-align:center; padding:22px 12px;
  border:4px solid var(--ink); border-radius:14px;
  background:var(--paper); color:var(--ink);
  box-shadow:var(--hard-sm);
  transform:rotate(var(--rot,-1.5deg));
  transition:transform .3s;
}
.stat:nth-child(2){--rot:1.6deg}
.stat:nth-child(3){--rot:-1deg}
.stat:nth-child(4){--rot:2deg}
.stat:hover{transform:rotate(0) translateY(-6px) scale(1.04)}
.stat b{display:block;font-family:var(--f-comic);font-size:clamp(30px,4vw,46px);line-height:1}
.stat span{font-family:var(--f-black);font-size:10px;letter-spacing:2.2px;opacity:.65}

/* =======================================================
   HOW TO BUY — 3D staircase
   ======================================================= */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,2vw,24px);
  perspective:1500px; perspective-origin:50% 30%;
}
.step{transform-style:preserve-3d}
.step__face{
  position:relative; height:100%;
  padding:clamp(24px,2.6vw,34px) clamp(20px,2.2vw,28px);
  border:5px solid var(--ink); border-radius:18px;
  background:linear-gradient(180deg, rgba(233,189,130,.97), rgba(190,140,80,.97));
  color:#1a1206;
  box-shadow:var(--hard), 0 24px 50px rgba(0,0,0,.6);
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s;
  overflow:hidden;
}
.step__face::after{ /* cardboard flute texture */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.22;
  background:repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 1px, transparent 1px 9px);
}
.step:nth-child(1) .step__face{transform:rotateY(16deg) translateZ(-40px) translateY(28px)}
.step:nth-child(2) .step__face{transform:rotateY(7deg)  translateZ(-10px) translateY(10px)}
.step:nth-child(3) .step__face{transform:rotateY(-7deg) translateZ(-10px) translateY(10px)}
.step:nth-child(4) .step__face{transform:rotateY(-16deg) translateZ(-40px) translateY(28px)}
.step__face:hover{transform:rotateY(0) translateZ(50px) translateY(0); box-shadow:14px 18px 0 var(--ink), 0 40px 80px rgba(0,0,0,.7)}

.step__n{
  display:grid;place-items:center; width:54px;height:54px;
  font-family:var(--f-comic); font-size:32px; line-height:1;
  border:4px solid var(--ink); border-radius:50%;
  background:var(--ink); color:#ffd93b;
  box-shadow:4px 4px 0 rgba(0,0,0,.35);
}
.step h3{
  font-family:var(--f-comic); font-size:clamp(22px,2.4vw,30px); letter-spacing:1px;
  margin:16px 0 10px; color:#12100a;
}
.step p{margin:0;font-size:14.5px;line-height:1.6;color:#2a2114;position:relative;z-index:1}

.buybar{
  margin-top:clamp(34px,5vw,54px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
  padding:clamp(18px,2.4vw,26px);
  border:5px solid var(--ink); border-radius:18px;
  background:linear-gradient(120deg, rgba(9,16,42,.95), rgba(16,34,86,.95));
  box-shadow:var(--hard), 0 24px 60px rgba(0,0,0,.6);
  transform:rotate(-.6deg);
}
.buybar__ca{display:flex;align-items:center;gap:12px;flex:1;min-width:280px;flex-wrap:wrap}
.buybar__ca > span{
  font-family:var(--f-black);font-size:10px;letter-spacing:2.2px;
  padding:6px 10px;border:2px solid var(--ink);border-radius:6px;background:var(--kraft-lt);color:var(--ink)
}
.buybar__ca code{
  font-family:ui-monospace,Consolas,monospace; font-size:13px; color:var(--blue-glow);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(48vw,420px)
}
.buybar__ca button{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-family:var(--f-black);font-size:11px;letter-spacing:1.4px;
  padding:9px 13px;border:3px solid var(--ink);border-radius:9px;
  background:#fff;color:var(--ink);box-shadow:4px 4px 0 var(--ink);transition:.14s
}
.buybar__ca button:hover{transform:translate(-2px,-2px);box-shadow:6px 7px 0 var(--ink)}

/* =======================================================
   CHART — tilted monitor
   ======================================================= */
.scope{position:relative; perspective:1600px}
.scope__bezel{
  position:relative; z-index:2;
  border:6px solid var(--ink); border-radius:20px; overflow:hidden;
  background:#05070f;
  box-shadow:16px 18px 0 var(--ink), 0 40px 90px rgba(0,0,0,.75), 0 0 0 4px rgba(92,200,255,.35);
  transform:rotateX(8deg) rotateY(-4deg);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.scope__bezel:hover{transform:rotateX(0) rotateY(0)}
.scope__bar{
  display:flex; align-items:center; gap:9px;
  padding:12px 16px; background:linear-gradient(180deg,#141d3f,#0a1027);
  border-bottom:4px solid var(--ink);
}
.dot{width:12px;height:12px;border-radius:50%;border:2px solid rgba(0,0,0,.6)}
.dot--r{background:#ff5f57}.dot--y{background:#ffbd2e}.dot--g{background:#28c840}
.scope__label{
  margin-left:10px;font-family:var(--f-black);font-size:10.5px;letter-spacing:2.4px;color:#8fb8ee
}
.scope__open{
  margin-left:auto;font-family:var(--f-black);font-size:10.5px;letter-spacing:1.6px;
  color:#0a0f22;background:var(--blue-glow);padding:7px 12px;border-radius:7px;
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transition:.14s
}
.scope__open:hover{transform:translate(-1px,-2px);box-shadow:5px 6px 0 var(--ink)}
.scope__screen{position:relative; background:#0b1120}
.scope__screen iframe{
  display:block;width:100%;height:min(72vh,660px);border:0;background:#0b1120
}
.scope__scan{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px);
  mix-blend-mode:overlay;
}
.scope__shadow{
  position:absolute; left:6%; right:6%; bottom:-52px; height:70px;
  background:radial-gradient(ellipse at center, rgba(31,123,255,.6), transparent 70%);
  filter:blur(22px);
}
.chart-links{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:64px}

/* =======================================================
   JOIN US — banner.png lives ONLY here
   ======================================================= */
.join{
  display:grid; gap:clamp(24px,3.4vw,40px);
  perspective:1500px;
}
.join__banner{
  position:relative; overflow:hidden;
  border:6px solid var(--ink); border-radius:20px;
  box-shadow:16px 18px 0 var(--ink), 0 40px 90px rgba(0,0,0,.7), 0 0 0 5px rgba(255,217,59,.5);
  transform:rotateX(7deg) rotateZ(-1deg);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.join__banner:hover{transform:rotateX(0) rotateZ(0) scale(1.01)}
.join__banner img{width:100%;display:block}
.join__banner-gloss{
  position:absolute; top:-50%; bottom:-50%; width:34%; left:-50%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
  transform:rotate(18deg); filter:blur(10px); mix-blend-mode:screen;
  animation:sweep 6.5s ease-in-out infinite;
}

.join__body{
  display:grid; gap:22px;
  padding:clamp(24px,3vw,38px);
  border:5px solid var(--ink); border-radius:20px;
  background:linear-gradient(150deg, rgba(9,16,42,.94), rgba(6,11,30,.94));
  box-shadow:var(--hard), 0 26px 60px rgba(0,0,0,.6);
  transform:rotate(.6deg);
}
.join__lead{margin:0;font-size:clamp(15px,1.6vw,18px);line-height:1.7;color:#cfe0f7;max-width:70ch}
.join__links{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.social{
  display:flex;align-items:center;gap:14px;
  padding:18px 20px;border:4px solid var(--ink);border-radius:14px;
  background:linear-gradient(180deg,#1a1a1f,#0b0b10); color:#fff;
  box-shadow:var(--hard-sm); transition:.18s;
}
.social i{font-size:26px}
.social .ico-svg{width:28px;height:28px;flex:none}
.social span{display:grid;line-height:1.25}
.social b{font-family:var(--f-black);font-size:13px;letter-spacing:1.4px}
.social small{font-size:11.5px;opacity:.7;letter-spacing:.4px}
.social:hover{transform:translate(-3px,-4px);box-shadow:10px 12px 0 var(--ink)}
.social--dex{background:linear-gradient(180deg,#123a6e,#08182f)}
.social--pump{background:linear-gradient(180deg,#12b455,#066b31);color:#eafff1}

.closing{
  margin:clamp(40px,6vw,70px) auto 0; max-width:800px; text-align:center;
  font-family:var(--f-comic); font-size:clamp(22px,3vw,38px); line-height:1.25;
  letter-spacing:1.4px; color:#fff;
  text-shadow:2px 2px 0 var(--ink), 4px 4px 0 var(--blue);
}
.closing b{color:var(--kraft-lt)}

/* =======================================================
   FOOTER
   ======================================================= */
.foot{
  border-top:5px solid var(--ink);
  background:linear-gradient(180deg, rgba(4,7,20,.9), rgba(2,4,12,.98));
  padding:clamp(40px,5vw,64px) clamp(16px,4vw,42px);
  text-align:center;
}
.foot__mark{
  width:78px;height:78px;object-fit:cover;object-position:50% 22%;
  margin:0 auto 20px; border:4px solid var(--ink); border-radius:16px;
  box-shadow:6px 6px 0 var(--ink); transform:rotate(-3deg);
}
.foot__disc{max-width:760px;margin:0 auto 14px;font-size:12.5px;line-height:1.7;color:#7f93b5}
.foot__copy{font-family:var(--f-black);font-size:11px;letter-spacing:2px;color:#5f7396;margin:0}

/* =======================================================
   TOAST
   ======================================================= */
.toast{
  position:fixed; left:50%; bottom:34px; z-index:200;
  transform:translate(-50%,140%) rotate(-2deg);
  font-family:var(--f-comic); font-size:22px; letter-spacing:2px;
  padding:12px 26px; border:4px solid var(--ink); border-radius:12px;
  background:#ffd93b; color:var(--ink); box-shadow:var(--hard-sm);
  transition:transform .3s cubic-bezier(.2,1.4,.4,1);
}
.toast.is-on{transform:translate(-50%,0) rotate(-2deg)}

/* =======================================================
   REVEAL
   ======================================================= */
.reveal{opacity:0; transform:translateY(38px)}
.reveal.is-in{opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1)}

/* =======================================================
   RESPONSIVE
   ======================================================= */
@media (max-width:1080px){
  .nav__links{display:none}
  .hero__panelset{grid-template-columns:1fr; text-align:left}
  .hero__card{max-width:420px; transform:rotateZ(-2deg)}
  .hero__copy{transform:none}
  .panel--a,.panel--b,.panel--c,.panel--d{grid-column:1/-1;transform:rotateZ(-.6deg)}
  .panel--b,.panel--d{transform:rotateZ(.8deg)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step .step__face{transform:none !important}
  .join__links{grid-template-columns:1fr}
}
@media (max-width:640px){
  .nav__word{font-size:22px}
  .nav__cta .btn--buy span{display:none}
  .statwall{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .pow--2{display:none}
  .scope__bezel{transform:none}
  .join__banner{transform:none}
  .hero__btns .btn{flex:1 1 100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .reveal{opacity:1;transform:none}
}