/* ==========================================================================
   TWO HOOVES ($HOOVES) — comic-book / 3D perspective theme
   ========================================================================== */

:root{
  --ink:#04070a;
  --ink-2:#0a1014;
  --paper:#f3ead4;
  --paper-2:#e5d8b8;
  --toxic:#2ff36c;
  --toxic-hot:#7bff9f;
  --toxic-deep:#0a4d25;
  --red:#e0392b;
  --line:#000;
  --shadow-hard:10px 10px 0 #000;
  --shadow-hard-sm:6px 6px 0 #000;
  --glow:0 0 26px rgba(47,243,108,.45);
  --nav-h:74px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 18px)}
body{
  margin:0;
  background:#04070a;
  color:var(--paper);
  font-family:Barlow, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{text-decoration:none; color:inherit}
::selection{background:var(--toxic); color:#04070a}

/* thin neon scrollbar */
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:#05080b}
::-webkit-scrollbar-thumb{background:linear-gradient(#2ff36c,#0a4d25); border:2px solid #05080b; border-radius:20px}

.container-x{width:min(1240px, 92vw); margin-inline:auto}

/* ==========================================================================
   1. FIXED BACKGROUND  (photo + halftone + shine)
   ========================================================================== */
.bg-stack{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}

.bg-photo{
  position:absolute; inset:-4% -2%;
  background:url("../../01-two-hooves-cinematic-hero.webp") center 42%/cover no-repeat;
  filter:saturate(1.15) contrast(1.08) brightness(.62);
  opacity:.85;
  animation:bgDrift 34s ease-in-out infinite alternate;
}
.bg-photo--alt{
  background:url("../../05-two-hooves-futuristic-medallion.webp") center 60%/cover no-repeat;
  mix-blend-mode:screen;
  opacity:.24;
  filter:blur(1px) saturate(1.3) brightness(.8);
  animation-duration:52s; animation-direction:alternate-reverse;
}
@keyframes bgDrift{
  from{transform:scale(1.04) translate3d(-1.2%,0,0)}
  to{transform:scale(1.12) translate3d(1.6%,-1.4%,0)}
}

.bg-vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 85% at 50% 12%, rgba(4,7,10,.15) 0%, rgba(4,7,10,.72) 52%, #04070a 88%),
    linear-gradient(180deg, rgba(4,7,10,.92) 0%, rgba(4,7,10,.55) 22%, rgba(4,7,10,.72) 62%, #04070a 100%);
}

/* comic halftone dots */
.bg-halftone{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(47,243,108,.16) 1.15px, transparent 1.2px);
  background-size:7px 7px;
  opacity:.55;
  mask-image:radial-gradient(90% 70% at 50% 40%, #000 25%, transparent 85%);
  -webkit-mask-image:radial-gradient(90% 70% at 50% 40%, #000 25%, transparent 85%);
}

/* faint perspective floor grid */
.bg-grid{
  position:absolute; left:-30%; right:-30%; bottom:-12%; height:62vh;
  background-image:
    linear-gradient(rgba(47,243,108,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,243,108,.16) 1px, transparent 1px);
  background-size:70px 70px;
  transform:perspective(520px) rotateX(72deg);
  transform-origin:bottom center;
  opacity:.34;
  mask-image:linear-gradient(transparent, #000 45%, transparent);
  -webkit-mask-image:linear-gradient(transparent, #000 45%, transparent);
  animation:gridRun 9s linear infinite;
}
@keyframes gridRun{to{background-position:0 70px, 0 0}}

/* ---- SHINE: diagonal light streaks sweeping the page ---- */
.bg-shine{position:absolute; inset:-25%; transform:rotate(18deg)}
.bg-shine i{
  position:absolute; top:0; bottom:0; width:16vw;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(123,255,159,.05) 30%,
    rgba(200,255,220,.20) 50%,
    rgba(123,255,159,.05) 70%,
    transparent 100%);
  filter:blur(8px);
  animation:shineSweep 9s cubic-bezier(.6,.05,.35,1) infinite;
}
.bg-shine i:nth-child(1){left:-30%; animation-delay:0s}
.bg-shine i:nth-child(2){left:-30%; width:5vw; opacity:.75; animation-delay:1.1s; animation-duration:9s}
.bg-shine i:nth-child(3){left:-30%; width:26vw; opacity:.4; animation-delay:4.6s; animation-duration:13s}
@keyframes shineSweep{
  0%{transform:translate3d(-40vw,0,0)}
  60%,100%{transform:translate3d(170vw,0,0)}
}

/* floating dust motes */
.bg-dust span{
  position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%;
  background:var(--toxic-hot);
  box-shadow:0 0 10px 2px rgba(47,243,108,.7);
  opacity:0;
  animation:dustRise linear infinite;
}
.bg-dust span:nth-child(1){left:6%;  animation-duration:17s; animation-delay:0s}
.bg-dust span:nth-child(2){left:16%; animation-duration:23s; animation-delay:2s}
.bg-dust span:nth-child(3){left:27%; animation-duration:19s; animation-delay:5s}
.bg-dust span:nth-child(4){left:38%; animation-duration:26s; animation-delay:1s}
.bg-dust span:nth-child(5){left:49%; animation-duration:21s; animation-delay:7s}
.bg-dust span:nth-child(6){left:59%; animation-duration:24s; animation-delay:3s}
.bg-dust span:nth-child(7){left:69%; animation-duration:18s; animation-delay:9s}
.bg-dust span:nth-child(8){left:79%; animation-duration:27s; animation-delay:4s}
.bg-dust span:nth-child(9){left:88%; animation-duration:20s; animation-delay:11s}
.bg-dust span:nth-child(10){left:95%; animation-duration:25s; animation-delay:6s}
@keyframes dustRise{
  0%{transform:translateY(0) scale(.6); opacity:0}
  12%{opacity:.9}
  85%{opacity:.5}
  100%{transform:translateY(-105vh) scale(1.15); opacity:0}
}

/* ==========================================================================
   2. TYPE + SHARED COMIC PARTS
   ========================================================================== */
.sec{position:relative; z-index:1; padding:clamp(72px,9vw,140px) 0}
.stage{perspective:1600px; perspective-origin:50% 42%}

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:"Barlow Condensed",sans-serif; font-weight:800; letter-spacing:.22em;
  font-size:clamp(11px,1.1vw,13px); text-transform:uppercase;
  color:var(--toxic);
  background:rgba(4,7,10,.7);
  border:2px solid var(--toxic);
  border-radius:999px; padding:.42rem 1rem;
  box-shadow:4px 4px 0 #000, 0 0 22px rgba(47,243,108,.28);
}
.eyebrow .bi{font-size:8px; animation:blink 1.6s steps(1) infinite}
@keyframes blink{50%{opacity:.15}}

.chip{
  display:inline-block; font-family:Bangers,cursive; letter-spacing:.08em;
  font-size:clamp(15px,1.6vw,19px); padding:.22rem 1rem .3rem;
  border:3px solid #000; box-shadow:var(--shadow-hard-sm);
  transform:rotate(-2.2deg);
}
.chip-red{background:var(--red); color:#fff3e2; text-shadow:2px 2px 0 rgba(0,0,0,.45)}
.chip-green{background:var(--toxic); color:#04140a}

.sec-head{max-width:940px; margin-bottom:clamp(38px,5vw,64px)}
.sec-title{
  font-family:Anton,Impact,sans-serif; text-transform:uppercase;
  font-size:clamp(34px,6.4vw,78px); line-height:.92; letter-spacing:.005em;
  margin:.5rem 0 .9rem; color:#fff;
  text-shadow:
    3px 3px 0 #000, 6px 6px 0 rgba(47,243,108,.55), 0 0 42px rgba(47,243,108,.22);
}
.sec-title .hl{
  color:var(--toxic);
  text-shadow:3px 3px 0 #000, 6px 6px 0 rgba(0,0,0,.75), 0 0 34px rgba(47,243,108,.55);
}
.h3-green{color:var(--toxic)}
.sec-lead{
  font-size:clamp(15px,1.6vw,18.5px); line-height:1.62; color:rgba(243,234,212,.78);
  max-width:66ch;
}

/* ---------- buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:"Barlow Condensed",sans-serif; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; white-space:nowrap;
  border:3px solid #000; cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.8,.3,1.4), box-shadow .16s, background .2s, color .2s;
  transform-style:preserve-3d;
}
.btn-sm{font-size:13px; padding:.55rem .95rem; box-shadow:4px 4px 0 #000}
.btn-lg{font-size:clamp(15px,1.5vw,17px); padding:.95rem 1.5rem; box-shadow:7px 7px 0 #000}
.btn-block{display:flex; width:100%; margin-top:.9rem; font-size:14px; padding:.75rem 1rem; box-shadow:5px 5px 0 #000}
.btn:hover{transform:translate3d(-3px,-3px,14px)}
.btn-sm:hover{box-shadow:7px 7px 0 #000}
.btn-lg:hover{box-shadow:11px 11px 0 #000}
.btn:active{transform:translate3d(3px,3px,0)}
.btn-sm:active,.btn-lg:active{box-shadow:1px 1px 0 #000}

.btn-toxic{
  background:linear-gradient(160deg,var(--toxic-hot),var(--toxic) 45%,#12a94a);
  color:#04140a;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.btn-toxic::after{
  content:""; position:absolute; inset:0; overflow:hidden;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.85) 50%, transparent 62%);
  background-size:250% 100%; background-position:200% 0;
  animation:btnShine 3.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes btnShine{0%,55%{background-position:200% 0} 100%{background-position:-60% 0}}
.btn-ghost{background:#0b1218; color:var(--paper)}
.btn-ghost:hover{background:#121d24}
.btn-line{background:transparent; color:var(--toxic); border-color:var(--toxic); box-shadow:5px 5px 0 rgba(47,243,108,.32)}
.btn-line:hover{background:rgba(47,243,108,.12)}
.btn-sub{
  position:absolute; right:-8px; top:-13px;
  font-family:Bangers,cursive; font-style:normal; font-size:11px; letter-spacing:.08em;
  background:#000; color:var(--toxic); border:2px solid var(--toxic);
  padding:1px 7px; transform:rotate(6deg);
}

/* ==========================================================================
   3. NAV
   ========================================================================== */
.nav-wrap{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:linear-gradient(180deg, rgba(4,7,10,.92), rgba(4,7,10,.55) 70%, transparent);
  backdrop-filter:blur(9px);
  border-bottom:2px solid rgba(47,243,108,.16);
  transition:background .3s, border-color .3s;
}
.nav-wrap.is-stuck{
  background:rgba(4,7,10,.94);
  border-bottom:3px solid #000;
  box-shadow:0 6px 0 rgba(47,243,108,.25), 0 14px 34px rgba(0,0,0,.7);
}
.nav-inner{
  width:min(1240px,92vw); margin-inline:auto; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.nav-brand{display:flex; align-items:center; gap:.7rem}
.nav-logo{
  width:44px; height:44px; display:grid; place-items:center; flex:none;
  border:2.5px solid var(--toxic); border-radius:50%;
  box-shadow:0 0 18px rgba(47,243,108,.45), inset 0 0 14px rgba(47,243,108,.25);
  overflow:hidden; background:#000;
}
.nav-logo img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.nav-brand:hover .nav-logo img{transform:scale(1.12) rotate(-6deg)}
.nav-name{
  display:block; font-family:Anton,sans-serif; font-size:19px; letter-spacing:.04em;
  color:#fff; text-shadow:2px 2px 0 #000, 3px 3px 0 rgba(47,243,108,.6);
}
.nav-tick{
  display:block; font-family:"Barlow Condensed",sans-serif; font-weight:700;
  font-size:10.5px; letter-spacing:.28em; color:var(--toxic); margin-top:2px;
}
.nav-links{display:flex; gap:.35rem; list-style:none; margin:0; padding:0}
.nav-links a{
  display:block; padding:.5rem .85rem;
  font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:14px;
  letter-spacing:.14em; color:rgba(243,234,212,.72);
  border:2px solid transparent; transition:.2s;
}
.nav-links a:hover, .nav-links a.active{
  color:#04140a; background:var(--toxic); border-color:#000; box-shadow:3px 3px 0 #000;
  transform:translateY(-1px);
}
.nav-right{display:flex; align-items:center; gap:.5rem}
.nav-icon{
  width:38px; height:38px; display:grid; place-items:center; font-size:15px;
  border:2px solid rgba(47,243,108,.45); color:var(--toxic);
  background:rgba(4,7,10,.6); transition:.2s;
}
.nav-icon:hover{background:var(--toxic); color:#04140a; border-color:#000; box-shadow:3px 3px 0 #000}
.nav-burger{
  display:none; width:40px; height:38px; font-size:20px; color:var(--toxic);
  background:transparent; border:2px solid rgba(47,243,108,.45); cursor:pointer;
}
.nav-drawer{
  display:none; flex-direction:column; gap:.25rem; padding:0 4vw 1rem;
  background:rgba(4,7,10,.97); border-bottom:3px solid #000;
}
.nav-drawer a{
  padding:.75rem .25rem; font-family:"Barlow Condensed",sans-serif; font-weight:800;
  letter-spacing:.16em; border-bottom:1px solid rgba(47,243,108,.14);
}
.drawer-buy{color:var(--toxic)}
.nav-drawer.open{display:flex}

/* ==========================================================================
   4. HERO
   ========================================================================== */
.sec-hero{
  min-height:100svh; display:flex; align-items:center;
  padding-top:calc(var(--nav-h) + 40px); padding-bottom:90px;
}
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:center;
  transform-style:preserve-3d;
}
.hero-copy{transform-style:preserve-3d}
.hero-title{
  font-family:Anton,Impact,sans-serif; text-transform:uppercase;
  font-size:clamp(42px,7.4vw,92px); line-height:.88; margin:1rem 0 1.1rem;
  letter-spacing:-.01em;
}
.hero-title .ln{display:block; color:#fff; text-shadow:4px 4px 0 #000, 8px 8px 0 rgba(0,0,0,.55)}
.hero-title .ln:nth-child(2){padding-left:.06em}
.hero-title .ln-green{
  color:var(--toxic);
  text-shadow:4px 4px 0 #000, 9px 9px 0 rgba(4,7,10,.85), 0 0 46px rgba(47,243,108,.6);
  animation:heroPulse 3.4s ease-in-out infinite;
}
@keyframes heroPulse{50%{text-shadow:4px 4px 0 #000, 9px 9px 0 rgba(4,7,10,.85), 0 0 70px rgba(47,243,108,.9)}}
.hero-sub{max-width:56ch; font-size:clamp(15px,1.55vw,18px); line-height:1.62; color:rgba(243,234,212,.8)}
.hero-cta{display:flex; flex-wrap:wrap; gap:.9rem; margin:1.6rem 0 1.4rem; transform-style:preserve-3d}

.hero-facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; list-style:none; margin:1.4rem 0 0; padding:0;
}
.hero-facts li{
  background:rgba(6,11,14,.72); border:2px solid rgba(47,243,108,.3);
  padding:.6rem .7rem; text-align:center;
  box-shadow:4px 4px 0 rgba(0,0,0,.75);
  transition:.25s;
}
.hero-facts li:hover{border-color:var(--toxic); transform:translate(-2px,-2px); box-shadow:6px 6px 0 rgba(0,0,0,.9)}
.hero-facts b{display:block; font-family:Anton,sans-serif; font-size:clamp(14px,1.5vw,18px); color:var(--toxic)}
.hero-facts span{
  display:block; font-family:"Barlow Condensed",sans-serif; font-size:10px;
  letter-spacing:.2em; color:rgba(243,234,212,.5); margin-top:2px;
}

/* ---- contract strip ---- */
.ca-strip{
  display:flex; align-items:center; gap:.65rem; flex-wrap:wrap;
  background:rgba(4,7,10,.8); border:3px solid #000;
  outline:2px solid rgba(47,243,108,.35); outline-offset:-6px;
  padding:.55rem .6rem .55rem .75rem; box-shadow:var(--shadow-hard-sm);
  max-width:640px;
}
.ca-label{
  font-family:Bangers,cursive; letter-spacing:.1em; font-size:15px;
  color:#04140a; background:var(--toxic); padding:.05rem .55rem; border:2px solid #000;
}
.ca-value{
  flex:1; min-width:180px; font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:clamp(10.5px,1.15vw,13px); color:var(--paper); word-break:break-all; letter-spacing:.02em;
}
.ca-copy{
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  font-family:"Barlow Condensed",sans-serif; font-weight:800; letter-spacing:.12em; font-size:12px;
  background:var(--toxic); color:#04140a; border:2px solid #000; padding:.4rem .7rem;
  box-shadow:3px 3px 0 #000; transition:.16s;
}
.ca-copy:hover{transform:translate(-2px,-2px); box-shadow:5px 5px 0 #000}
.ca-strip--foot{margin:1.6rem auto; max-width:760px}

/* ---- hero 3D art ---- */
.hero-art{
  position:relative; aspect-ratio:1/1; transform-style:preserve-3d;
  display:grid; place-items:center;
}
.art-layer{position:absolute; inset:0; display:grid; place-items:center; transform-style:preserve-3d; will-change:transform}
.art-back img{
  width:74%; border:4px solid #000; box-shadow:14px 14px 0 rgba(0,0,0,.85), 0 0 60px rgba(47,243,108,.22);
  transform:rotate(-7deg) translateZ(-60px);
  filter:saturate(1.1);
}
.ring-glow{
  width:82%; aspect-ratio:1/1; border-radius:50%;
  border:2px dashed rgba(47,243,108,.45);
  box-shadow:0 0 60px rgba(47,243,108,.35), inset 0 0 90px rgba(47,243,108,.18);
  animation:spinSlow 26s linear infinite;
}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.hero-emblem{
  width:86%;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.85)) drop-shadow(0 0 42px rgba(47,243,108,.4));
  animation:floaty 7s ease-in-out infinite;
}
@keyframes floaty{50%{transform:translateY(-16px)}}

.burst-wrap{position:absolute; z-index:6; will-change:transform}
.burst-wrap-a{top:2%; right:-2%; width:clamp(104px,15vw,158px)}
.burst-wrap-b{bottom:6%; left:-3%; width:clamp(88px,12vw,128px)}

.burst{
  position:relative; display:grid; place-items:center; text-align:center;
  font-family:Bangers,cursive; color:#04140a;
  background:var(--toxic);
  border:3px solid #000;
  filter:drop-shadow(6px 6px 0 #000);
  clip-path:polygon(50% 0%,61% 16%,79% 8%,80% 28%,98% 32%,86% 47%,100% 62%,82% 68%,86% 88%,66% 82%,58% 100%,45% 84%,26% 92%,25% 72%,5% 68%,17% 52%,2% 37%,20% 30%,17% 10%,37% 17%);
  animation:burstPop 3.2s ease-in-out infinite;
}
.burst span{line-height:.98; letter-spacing:.04em}
.burst-a{
  width:100%; aspect-ratio:1/1;
  font-size:clamp(17px,2.4vw,27px);
}
.burst-b{
  width:100%; aspect-ratio:1/1;
  background:var(--red); color:#fff2e0; font-size:clamp(15px,2vw,23px);
  animation-delay:.9s;
}
@keyframes burstPop{0%,100%{transform:scale(1) rotate(-6deg)} 50%{transform:scale(1.08) rotate(-2deg)}}

.speed-lines{
  position:absolute; inset:-8%; z-index:-1; border-radius:50%;
  background:repeating-conic-gradient(from 0deg,
    rgba(47,243,108,.16) 0deg 1.1deg, transparent 1.1deg 7deg);
  mask-image:radial-gradient(circle, transparent 40%, #000 58%, transparent 78%);
  -webkit-mask-image:radial-gradient(circle, transparent 40%, #000 58%, transparent 78%);
  animation:spinSlow 60s linear infinite reverse;
  opacity:.85;
}

.scroll-cue{
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%);
  width:42px; height:42px; display:grid; place-items:center; color:var(--toxic);
  border:2px solid rgba(47,243,108,.45); border-radius:50%;
  animation:cue 2.1s ease-in-out infinite;
}
@keyframes cue{50%{transform:translate(-50%,9px); box-shadow:0 0 24px rgba(47,243,108,.4)}}

/* ==========================================================================
   5. TICKER
   ========================================================================== */
.ticker{
  position:relative; z-index:2; overflow:hidden;
  background:var(--toxic);
  border-block:4px solid #000;
  transform:rotate(-1.15deg) scale(1.035);
  box-shadow:0 10px 0 rgba(0,0,0,.65);
  padding:.5rem 0;
}
.ticker-track{
  display:flex; align-items:center; gap:1.6rem; width:max-content;
  animation:tickerRun 26s linear infinite;
}
.ticker span{
  font-family:Anton,sans-serif; font-size:clamp(17px,2.2vw,26px); letter-spacing:.06em;
  color:#04140a; text-transform:uppercase;
}
.ticker i{font-style:normal; font-size:15px; opacity:.65}
@keyframes tickerRun{to{transform:translateX(-50%)}}

/* ==========================================================================
   6. COMIC PANELS (ABOUT)
   ========================================================================== */
.comic-page{display:grid; gap:clamp(30px,4.4vw,64px); transform-style:preserve-3d}

.panel{
  position:relative; display:grid; grid-template-columns:.95fr 1.05fr;
  border:5px solid #000;
  box-shadow:var(--shadow-hard), 0 30px 60px rgba(0,0,0,.6);
  transform-style:preserve-3d; overflow:hidden;
  transition:transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
}
.p-lean-l{--ry:11deg;  --rx:1.5deg; transform-origin:left center}
.p-lean-r{--ry:-11deg; --rx:1.5deg; transform-origin:right center}
.p-flat{--ry:0deg; --rx:2.5deg}
.panel:hover{box-shadow:16px 16px 0 #000, 0 40px 70px rgba(0,0,0,.7)}
.comic-page:hover .panel:not(:hover){opacity:.94}

.panel-paper{background:var(--paper); color:#0b0f12}
.panel-paper::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(0,0,0,.22) 1px, transparent 1.1px);
  background-size:5px 5px; opacity:.35; mix-blend-mode:multiply;
}
.panel-ink{background:linear-gradient(150deg,#0a1014,#050a0d 60%); color:var(--paper)}
.panel-ink::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(47,243,108,.2) 1px, transparent 1.1px);
  background-size:6px 6px; opacity:.5;
}

.panel-media{position:relative; overflow:hidden; min-height:260px; background:#000}
.panel-media img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.panel:hover .panel-media img{transform:scale(1.06)}
.panel-media::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  background-size:250% 100%; background-position:200% 0;
  transition:background-position .9s ease;
}
.panel:hover .panel-media::before{background-position:-40% 0}
.panel-tag{
  position:absolute; top:12px; left:12px; z-index:3;
  font-family:Bangers,cursive; font-size:14px; letter-spacing:.1em;
  background:#000; color:var(--paper); padding:.15rem .6rem; border:2px solid var(--paper);
}
.panel-tag--green{border-color:var(--toxic); color:var(--toxic)}

.panel-body{position:relative; z-index:3; padding:clamp(22px,3vw,44px); display:flex; flex-direction:column; justify-content:center; gap:.9rem}
.panel-body h3{
  font-family:Anton,sans-serif; text-transform:uppercase; margin:0;
  font-size:clamp(23px,3vw,38px); line-height:1.02; letter-spacing:.01em;
}
.panel-paper .panel-body h3{text-shadow:3px 3px 0 rgba(47,243,108,.85)}
.panel-body h3 em{font-style:normal; color:var(--red)}
.panel-body p{margin:0; font-size:clamp(14.5px,1.5vw,17px); line-height:1.6}
.panel-paper .panel-body p{color:#1b2226}
.panel-ink .panel-body p{color:rgba(243,234,212,.78)}
.panel-kicker{
  font-family:"Barlow Condensed",sans-serif; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; font-size:clamp(14px,1.5vw,17px) !important;
  border-left:5px solid var(--toxic); padding-left:.8rem;
}
.panel-kicker--dim{color:rgba(243,234,212,.6) !important}

/* wide panel */
.panel-wide{grid-template-columns:1fr; background:linear-gradient(160deg,#07120d,#04070a 70%); border-color:#000}
.wide-inner{display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(18px,3vw,40px)}
.wide-copy{padding:clamp(24px,3.2vw,48px); display:flex; flex-direction:column; gap:1rem; z-index:3}
.wide-copy h3{
  font-family:Anton,sans-serif; text-transform:uppercase; margin:0;
  font-size:clamp(22px,2.9vw,36px); line-height:1.04; color:#fff;
  text-shadow:3px 3px 0 #000, 5px 5px 0 rgba(47,243,108,.5);
}
.wide-copy p{margin:0; color:rgba(243,234,212,.76); line-height:1.62; font-size:clamp(14.5px,1.5vw,17px)}
.tick-list{list-style:none; margin:.2rem 0 0; padding:0; display:grid; gap:.45rem}
.tick-list li{
  display:flex; align-items:center; gap:.6rem;
  font-family:"Barlow Condensed",sans-serif; font-weight:700; letter-spacing:.06em;
  font-size:clamp(14px,1.5vw,16.5px); color:rgba(243,234,212,.9);
}
.tick-list .bi{
  flex:none; width:22px; height:22px; display:grid; place-items:center; font-size:13px;
  background:var(--toxic); color:#04140a; border:2px solid #000;
}
.wide-art{position:relative; align-self:stretch; min-height:280px; overflow:hidden; border-left:4px solid #000}
.wide-art img{width:100%; height:100%; object-fit:cover}
.wide-art-shine{
  position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 42%, rgba(123,255,159,.28) 50%, transparent 58%);
  background-size:280% 100%;
  animation:artShine 5.5s ease-in-out infinite;
}
@keyframes artShine{0%,60%{background-position:210% 0} 100%{background-position:-60% 0}}

/* speech bubble */
.bubble{
  position:relative; margin:0 auto; max-width:860px;
  background:var(--paper); color:#0b0f12;
  border:5px solid #000; border-radius:26px;
  padding:clamp(22px,3vw,40px);
  box-shadow:var(--shadow-hard), 0 30px 60px rgba(0,0,0,.55);
  text-align:center;
  transform-style:preserve-3d;
}
.bubble::after,.bubble::before{
  content:""; position:absolute; bottom:-34px; left:14%;
  border:18px solid transparent; border-top-color:#000; border-right-width:26px;
}
.bubble::before{bottom:-25px; left:calc(14% + 5px); border-top-color:var(--paper); z-index:2; border-width:14px; border-right-width:20px}
.bubble p{margin:0 0 .9rem; font-size:clamp(15px,1.7vw,19px); line-height:1.55; font-weight:500}
.bubble b{
  display:block; font-family:Bangers,cursive; letter-spacing:.06em;
  font-size:clamp(20px,2.8vw,34px); color:var(--red);
  text-shadow:2px 2px 0 rgba(47,243,108,.9);
}

/* ==========================================================================
   7. HOW TO BUY — receding 3D track
   ========================================================================== */
.track{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.8vw,26px); transform-style:preserve-3d}
.track-rail{
  position:absolute; left:0; right:0; top:52%; height:6px; z-index:0;
  background:repeating-linear-gradient(90deg, var(--toxic) 0 26px, transparent 26px 46px);
  opacity:.35; transform:translateZ(-90px);
}
.step{position:relative; transform-style:preserve-3d}
.step .step-card{
  position:relative; height:100%; background:linear-gradient(165deg,#0b1318,#050a0d);
  border:4px solid #000; outline:2px solid rgba(47,243,108,.25); outline-offset:-9px;
  padding:clamp(20px,2.4vw,30px) clamp(16px,2vw,26px) clamp(22px,2.4vw,30px);
  box-shadow:var(--shadow-hard-sm), 0 24px 44px rgba(0,0,0,.55);
  transform:rotateY(calc(var(--i) * -3.4deg + 5deg)) rotateX(3deg) translateZ(calc(var(--i) * -14px));
  transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
  transform-origin:center;
}
.step .step-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(47,243,108,.14) 1px, transparent 1.1px);
  background-size:6px 6px;
}
.step:hover .step-card{
  transform:rotateY(0deg) rotateX(0deg) translateZ(40px);
  box-shadow:12px 12px 0 #000, 0 34px 60px rgba(0,0,0,.7);
  border-color:#000; outline-color:var(--toxic);
}
.step-num{
  position:absolute; top:-24px; left:-10px; z-index:4;
  font-family:Anton,sans-serif; font-size:clamp(42px,5.4vw,68px); line-height:1;
  color:transparent; -webkit-text-stroke:3px var(--toxic);
  text-shadow:4px 4px 0 rgba(0,0,0,.9);
  transform:translateZ(60px) rotate(-6deg);
  pointer-events:none;
}
.step-ico{
  display:grid; place-items:center; width:52px; height:52px; margin-bottom:1rem;
  font-size:23px; color:#04140a; background:var(--toxic); border:3px solid #000;
  box-shadow:4px 4px 0 rgba(0,0,0,.85);
}
.step-card--hot{background:linear-gradient(165deg,#0d2a19,#04140a); outline-color:rgba(47,243,108,.5)}
.step h3{
  font-family:Anton,sans-serif; text-transform:uppercase; margin:0 0 .55rem;
  font-size:clamp(17px,1.9vw,22px); color:#fff; line-height:1.06;
  text-shadow:2px 2px 0 #000;
}
.step p{margin:0; font-size:14.5px; line-height:1.55; color:rgba(243,234,212,.72)}
.mini-copy{
  margin-top:.9rem; width:100%; cursor:pointer;
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  background:rgba(4,7,10,.8); border:2px dashed rgba(47,243,108,.55); color:var(--toxic);
  font-family:ui-monospace,Consolas,monospace; font-size:11px; padding:.5rem .6rem;
  word-break:break-all; transition:.2s;
}
.mini-copy:hover{background:rgba(47,243,108,.12)}

.warn{
  display:flex; gap:1rem; align-items:flex-start; margin-top:clamp(34px,4vw,56px);
  background:rgba(224,57,43,.1); border:3px solid var(--red);
  box-shadow:6px 6px 0 rgba(0,0,0,.8);
  padding:1rem 1.2rem;
}
.warn .bi{color:var(--red); font-size:22px; flex:none; margin-top:2px}
.warn p{margin:0; font-size:14.5px; line-height:1.6; color:rgba(243,234,212,.82)}
.warn b{color:var(--red); font-family:"Barlow Condensed",sans-serif; letter-spacing:.08em}

/* ==========================================================================
   8. CHART SCREEN
   ========================================================================== */
.screen{
  --ry:0deg;
  background:linear-gradient(170deg,#0a1116,#04070a);
  border:5px solid #000;
  outline:2px solid rgba(47,243,108,.3); outline-offset:-11px;
  box-shadow:var(--shadow-hard), 0 40px 80px rgba(0,0,0,.65), 0 0 90px rgba(47,243,108,.12);
  overflow:hidden; transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.screen-bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.6rem .9rem; background:#000; border-bottom:3px solid rgba(47,243,108,.3);
}
.dots{display:flex; gap:6px}
.dots i{width:11px; height:11px; border-radius:50%; background:#233; display:block}
.dots i:nth-child(1){background:var(--red)}
.dots i:nth-child(2){background:#e0b52b}
.dots i:nth-child(3){background:var(--toxic)}
.screen-title{
  font-family:"Barlow Condensed",sans-serif; font-weight:800; letter-spacing:.16em;
  font-size:clamp(10px,1.2vw,13px); color:rgba(243,234,212,.75); text-align:center;
}
.screen-title .bi{color:var(--toxic); margin-right:.35rem}
.screen-live{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:11px; letter-spacing:.2em;
  color:var(--toxic);
}
.screen-live i{width:8px; height:8px; border-radius:50%; background:var(--toxic); box-shadow:0 0 10px var(--toxic); animation:blink 1.3s steps(1) infinite}
.screen-body{position:relative; height:clamp(420px,62vh,640px); background:#04070a}
.screen-body iframe{width:100%; height:100%; border:0; display:block}
.chart-placeholder{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:.7rem;
  text-align:center; padding:2rem;
  background:
    repeating-linear-gradient(90deg, rgba(47,243,108,.05) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(rgba(47,243,108,.05) 0 1px, transparent 1px 54px),
    radial-gradient(60% 60% at 50% 45%, rgba(47,243,108,.1), transparent 70%);
}
.chart-placeholder img{width:110px; opacity:.85; filter:drop-shadow(0 0 24px rgba(47,243,108,.5)); animation:floaty 6s ease-in-out infinite}
.chart-placeholder b{font-family:Anton,sans-serif; letter-spacing:.06em; font-size:clamp(18px,2.4vw,26px); color:var(--toxic); text-shadow:2px 2px 0 #000}
.chart-placeholder span{font-size:13.5px; color:rgba(243,234,212,.6); max-width:44ch; line-height:1.6}
.chart-placeholder code{color:var(--toxic); background:rgba(47,243,108,.1); padding:0 .3rem; border:1px solid rgba(47,243,108,.3)}
.screen-foot{
  display:flex; flex-wrap:wrap; gap:.7rem; padding:.9rem; background:#000;
  border-top:3px solid rgba(47,243,108,.3);
}

/* ==========================================================================
   9. JOIN US (banner lives here)
   ========================================================================== */
.sec-join{padding-bottom:clamp(80px,10vw,150px)}
.banner-frame{position:relative; margin-bottom:clamp(44px,6vw,80px)}
.banner-tilt{
  position:relative; overflow:hidden;
  border:5px solid #000;
  outline:3px solid var(--toxic); outline-offset:-14px;
  box-shadow:16px 16px 0 #000, 0 44px 80px rgba(0,0,0,.7), 0 0 110px rgba(47,243,108,.16);
  transform:rotateX(6deg) rotateY(-3deg);
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}
.banner-frame:hover .banner-tilt{transform:rotateX(0deg) rotateY(0deg) scale(1.012)}
.banner-tilt img{width:100%; display:block}
.banner-shine{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  background-size:260% 100%; background-position:210% 0;
  animation:artShine 6.5s ease-in-out infinite;
}
.banner-stamp{
  position:absolute; top:-26px; right:-14px; z-index:5;
  display:grid; place-items:center; text-align:center; line-height:.92;
  width:clamp(92px,11vw,132px); aspect-ratio:1/1;
  font-family:Bangers,cursive; font-size:clamp(15px,1.9vw,22px); letter-spacing:.06em;
  color:#fff2e0; background:var(--red); border:4px solid #000; border-radius:50%;
  box-shadow:6px 6px 0 #000, 0 0 40px rgba(224,57,43,.45);
  transform:rotate(-13deg);
  animation:stampBeat 3s ease-in-out infinite;
}
@keyframes stampBeat{50%{transform:rotate(-8deg) scale(1.07)}}

.join-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px); align-items:center}
.join-kick{
  margin-top:1.1rem; font-family:Bangers,cursive; letter-spacing:.05em;
  font-size:clamp(20px,2.6vw,32px); color:var(--toxic);
  text-shadow:3px 3px 0 #000;
}
.join-actions{display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,20px); perspective:1000px}
.social-card{
  position:relative; display:block; padding:clamp(18px,2.2vw,26px);
  background:linear-gradient(165deg,#0b1318,#04070a);
  border:4px solid #000; outline:2px solid rgba(47,243,108,.22); outline-offset:-9px;
  box-shadow:var(--shadow-hard-sm), 0 20px 40px rgba(0,0,0,.5);
  transform:rotateY(var(--sry,0deg)) rotateX(var(--srx,0deg));
  transition:transform .3s cubic-bezier(.2,.8,.3,1.2), box-shadow .3s, background .3s, outline-color .3s;
  overflow:hidden;
}
.social-card:nth-child(1){--sry:7deg}
.social-card:nth-child(2){--sry:-7deg}
.social-card:nth-child(3){--sry:7deg}
.social-card:nth-child(4){--sry:-7deg}
.social-card::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 44%, rgba(123,255,159,.22) 50%, transparent 56%);
  background-size:260% 100%; background-position:210% 0;
  transition:background-position .8s ease;
}
.social-card:hover{
  transform:rotateY(0deg) rotateX(0deg) translate(-3px,-5px);
  box-shadow:12px 14px 0 #000, 0 28px 50px rgba(0,0,0,.65);
  outline-color:var(--toxic);
}
.social-card:hover::before{background-position:-50% 0}
.social-card .bi:first-child{
  display:grid; place-items:center; width:48px; height:48px; margin-bottom:.9rem;
  font-size:21px; border:3px solid #000; box-shadow:4px 4px 0 rgba(0,0,0,.8);
  background:var(--paper); color:#04070a;
}
.social-card b{
  display:block; font-family:Anton,sans-serif; text-transform:uppercase;
  font-size:clamp(16px,1.9vw,21px); color:#fff; letter-spacing:.02em; text-shadow:2px 2px 0 #000;
}
.social-card span{
  display:block; margin-top:.25rem; font-size:13px; color:rgba(243,234,212,.6);
  font-family:"Barlow Condensed",sans-serif; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.social-card em{
  position:absolute; top:16px; right:16px; font-size:18px; color:var(--toxic);
  transition:transform .3s;
}
.social-card:hover em{transform:translate(4px,-4px)}
.social-x .bi:first-child{background:#fff; color:#000}
.social-tg .bi:first-child{background:#2aa3e0; color:#fff}
.social-pump .bi:first-child{background:var(--toxic); color:#04140a}
.social-dex .bi:first-child{background:#0b1f16; color:var(--toxic); border-color:var(--toxic)}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.foot{
  position:relative; z-index:1; border-top:4px solid #000;
  background:linear-gradient(180deg, rgba(4,7,10,.7), rgba(2,4,6,.96));
  padding:clamp(44px,5vw,72px) 0 34px;
  box-shadow:0 -6px 0 rgba(47,243,108,.25);
}
.foot-top{display:flex; flex-wrap:wrap; gap:1.4rem; align-items:center; justify-content:space-between}
.foot-brand{display:flex; align-items:center; gap:.9rem}
.foot-brand img{
  width:58px; height:58px; object-fit:cover; border-radius:50%;
  border:3px solid var(--toxic); box-shadow:0 0 26px rgba(47,243,108,.4);
}
.foot-brand b{display:block; font-family:Anton,sans-serif; font-size:22px; letter-spacing:.03em; color:#fff; text-shadow:2px 2px 0 #000}
.foot-brand span{display:block; font-size:13px; color:var(--toxic); font-family:"Barlow Condensed",sans-serif; font-weight:700; letter-spacing:.12em}
.foot-links{display:flex; flex-wrap:wrap; gap:.4rem 1.3rem}
.foot-links a{
  font-family:"Barlow Condensed",sans-serif; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; font-size:13.5px; color:rgba(243,234,212,.65); transition:.2s;
}
.foot-links a:hover{color:var(--toxic)}
.disclaimer{
  max-width:900px; margin:1.6rem auto 0; text-align:center;
  font-size:12px; line-height:1.7; color:rgba(243,234,212,.42);
}
.copy{
  margin:1.2rem 0 0; text-align:center; font-family:"Barlow Condensed",sans-serif;
  letter-spacing:.18em; font-size:12px; color:rgba(243,234,212,.35); text-transform:uppercase;
}

/* ==========================================================================
   11. TOAST
   ========================================================================== */
.toast{
  position:fixed; left:50%; bottom:26px; z-index:90;
  transform:translate(-50%,150%);
  display:flex; align-items:center; gap:.6rem;
  background:var(--toxic); color:#04140a; border:3px solid #000;
  box-shadow:6px 6px 0 #000;
  padding:.7rem 1.2rem;
  font-family:"Barlow Condensed",sans-serif; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  transition:transform .4s cubic-bezier(.2,.8,.3,1.4);
}
.toast.show{transform:translate(-50%,0)}

/* ==========================================================================
   12. REVEAL ANIMATION (composes with the 3D lean vars)
   ========================================================================== */
[data-reveal]{
  opacity:0;
  transform:
    translate3d(var(--tx,0), var(--ty,0), 0)
    rotateY(calc(var(--ry,0deg) + var(--ryx,0deg)))
    rotateX(calc(var(--rx,0deg) + var(--rxx,0deg)));
  transition:opacity .75s ease, transform 1s cubic-bezier(.16,.84,.28,1);
}
[data-reveal="left"]{--tx:-70px; --ryx:-16deg}
[data-reveal="right"]{--tx:70px; --ryx:16deg}
[data-reveal="up"]{--ty:60px; --rxx:-10deg}
[data-reveal].is-in{opacity:1; --tx:0px; --ty:0px; --ryx:0deg; --rxx:0deg}

/* ==========================================================================
   13. RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .nav-links{display:none}
  .nav-burger{display:grid; place-items:center}
  .hero-grid{grid-template-columns:1fr; gap:40px}
  .hero-art{max-width:520px; margin-inline:auto; order:-1}
  .sec-hero{padding-top:calc(var(--nav-h) + 24px)}
  .track{grid-template-columns:repeat(2,1fr)}
  .step .step-card{transform:none}
  .track-rail{display:none}
  .join-grid{grid-template-columns:1fr}
  .wide-inner{grid-template-columns:1fr}
  .wide-art{min-height:240px; border-left:0; border-top:4px solid #000}
  .p-lean-l,.p-lean-r,.p-flat{--ry:0deg; --rx:0deg}
}
@media (max-width:760px){
  :root{--nav-h:66px}
  .nav-buy span{display:none}
  .nav-tick{display:none}
  .panel{grid-template-columns:1fr}
  .panel-ink .panel-body{order:2}
  .panel-media{min-height:220px}
  .hero-facts{grid-template-columns:repeat(2,1fr)}
  .hero-cta .btn{flex:1 1 100%}
  .track{grid-template-columns:1fr}
  .join-actions{grid-template-columns:1fr}
  .social-card{--sry:0deg}
  .banner-stamp{top:-18px; right:-6px}
  .ticker{transform:rotate(-1.6deg) scale(1.06)}
  .screen-title{display:none}
  .screen-body{height:460px}
  .foot-top{justify-content:center; text-align:center}
  .foot-brand{flex-direction:column; text-align:center}
}
@media (max-width:420px){
  .burst-wrap-a{width:96px}
  .burst-wrap-b{width:80px}
  .burst-a{font-size:15px}
  .burst-b{font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  [data-reveal]{opacity:1; transform:none}
}