/* ============================================================
   A MEME CATE ($AMC) — comic-book / newsprint theme
   ============================================================ */

:root{
  --ink:#120a08;
  --red:#c8102e;
  --deep:#8e0a20;
  --paper:#fff6e2;
  --cream:#f7ead2;
  --fur:#e0a133;
  --furlt:#f6cf7c;
  --line:4px;
  --shadow: 10px 10px 0 var(--ink);
  --shadow-sm: 6px 6px 0 var(--ink);
  --deckw: 1240px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:110px; overflow-x:hidden; max-width:100%; }

body{
  margin:0;
  background:#7d0a1c;
  color:var(--ink);
  overflow-x:hidden;
  font-size:17px;
  line-height:1.65;
}

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

::selection{ background:var(--red); color:#fff; }

/* ---------- scrollbar ---------- */
::-webkit-scrollbar{ width:12px; }
::-webkit-scrollbar-track{ background:#5e0715; }
::-webkit-scrollbar-thumb{ background:var(--ink); border:2px solid #5e0715; }

/* ============================================================
   BACKGROUND STAGE  (images live here)
   ============================================================ */
.bg-stage{
  position:fixed; inset:0; z-index:-3; overflow:hidden;
  background:
    radial-gradient(1200px 800px at 18% 12%, #d6193a 0%, transparent 60%),
    radial-gradient(1000px 900px at 84% 78%, #a10e26 0%, transparent 62%),
    linear-gradient(160deg,#b60d29 0%, #8b0a1e 45%, #6d0716 100%);
}

/* the logo artwork, blown up and living in the background */
.bg-photo{
  position:absolute; inset:-12%;
  background-image:url("A-Meme-Cate-AMC-Logo.jpg");
  background-size:52vmax auto;
  background-position:8% 14%;
  background-repeat:no-repeat;
  opacity:.20;
  filter:contrast(1.15) saturate(1.1) blur(1px);
  mix-blend-mode:luminosity;
  animation:bgDrift 34s ease-in-out infinite alternate;
}
.bg-photo--two{
  background-position:104% 88%;
  background-size:40vmax auto;
  opacity:.14;
  transform:scaleX(-1);
  animation:bgDrift2 44s ease-in-out infinite alternate;
}
@keyframes bgDrift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(3%,-3%,0) scale(1.07); }
}
@keyframes bgDrift2{
  0%{ transform:scaleX(-1) translate3d(0,0,0) scale(1.02); }
  100%{ transform:scaleX(-1) translate3d(-4%,3%,0) scale(1.1); }
}

/* halftone dots */
.bg-halftone{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(18,10,8,.42) 1.6px, transparent 1.7px);
  background-size:9px 9px;
  opacity:.55;
  animation:dotPan 24s linear infinite;
}
@keyframes dotPan{ to{ background-position:90px 90px; } }

/* comic speed rays */
.bg-rays{
  position:absolute; top:50%; left:50%;
  width:210vmax; height:210vmax; margin:-105vmax 0 0 -105vmax;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
     rgba(255,246,226,.11) 0deg 5deg,
     rgba(255,246,226,0) 5deg 14deg);
  animation:spin 120s linear infinite;
  opacity:.65;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- SHINE SWEEP ---------- */
.bg-shine{
  position:absolute; inset:-40%;
  background:linear-gradient(115deg,
      rgba(255,255,255,0) 38%,
      rgba(255,255,255,.10) 46%,
      rgba(255,246,226,.34) 50%,
      rgba(255,255,255,.10) 54%,
      rgba(255,255,255,0) 62%);
  transform:translateX(-60%);
  animation:shineSweep 7.5s ease-in-out infinite;
  mix-blend-mode:screen;
  pointer-events:none;
}
@keyframes shineSweep{
  0%   { transform:translateX(-70%) rotate(0.001deg); opacity:0; }
  12%  { opacity:1; }
  55%  { opacity:1; }
  100% { transform:translateX(70%); opacity:0; }
}

.bg-vignette{
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(20,3,8,.62) 100%);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.deck{ width:min(var(--deckw), calc(100% - 40px)); margin-inline:auto; }

.stage{
  position:relative;
  padding:110px 0;
  perspective:1600px;
  perspective-origin:50% 45%;
}

/* every section gets its own paper "spread" with a different geometry */
.stage::before{
  content:"";
  position:absolute; inset:26px 0;
  z-index:-1;
  background:
    linear-gradient(180deg, rgba(255,246,226,.96), rgba(247,234,210,.93));
  border-block:var(--line) solid var(--ink);
  box-shadow:0 24px 0 rgba(18,10,8,.35);
}

.stage--hero::before{
  inset:0 0 60px;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 46px));
}
.stage--about::before{
  inset:36px -3%;
  transform:rotate(-1.1deg);
}
.stage--buy::before{
  inset:36px -3%;
  transform:rotate(.9deg);
  background:
    linear-gradient(180deg, rgba(255,246,226,.96), rgba(255,226,196,.94));
}
.stage--chart::before{
  inset:30px 0;
  background:linear-gradient(180deg,#1a0f0d,#2a1512 60%,#1a0f0d);
  clip-path:polygon(0 34px, 100% 0, 100% calc(100% - 34px), 0 100%);
}
.stage--join::before{
  inset:36px -4%;
  transform:rotate(-.7deg);
  background:linear-gradient(180deg, rgba(255,246,226,.97), rgba(246,207,124,.9));
}

.stage--chart{ color:var(--paper); }

/* ============================================================
   NAV
   ============================================================ */
.nav-wrap{
  position:sticky; top:0; z-index:60;
  padding:14px 0 0;
}
.nav-panel{
  width:min(var(--deckw), calc(100% - 28px));
  margin-inline:auto;
  display:flex; align-items:center; gap:18px;
  padding:10px 14px;
  background:var(--paper);
  border:var(--line) solid var(--ink);
  box-shadow:var(--shadow-sm);
  border-radius:6px;
}
.nav-brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.nav-brand img{
  width:46px; height:46px; object-fit:cover;
  border:3px solid var(--ink); border-radius:50%;
}
.nav-brand span{ display:flex; flex-direction:column; line-height:1; }
.nav-brand b{ font-size:19px; letter-spacing:.5px; color:var(--red);
  -webkit-text-stroke:.6px var(--ink); }
.nav-brand i{ font-style:normal; font-weight:700; font-size:12px; letter-spacing:2px; }

.nav-links{
  display:flex; gap:6px; margin:0 auto; padding:0; list-style:none;
}
.nav-links a{
  display:block; padding:8px 14px;
  font-family:Bangers, cursive; font-size:19px; letter-spacing:1.4px;
  border:3px solid transparent; border-radius:4px;
  transition:.18s ease;
}
.nav-links a:hover{
  background:var(--red); color:#fff;
  border-color:var(--ink);
  transform:translateY(-2px) rotate(-1.5deg);
  box-shadow:3px 3px 0 var(--ink);
}

.nav-actions{ display:flex; align-items:center; gap:8px; }

.ico-btn{
  width:40px; height:40px; display:grid; place-items:center;
  border:3px solid var(--ink); border-radius:6px;
  background:var(--cream); font-size:17px;
  box-shadow:3px 3px 0 var(--ink);
  transition:.16s ease;
}
.ico-btn:hover{ background:var(--ink); color:var(--paper); transform:translate(1px,1px); box-shadow:2px 2px 0 var(--red); }

.burger{
  display:none; margin-left:auto;
  width:44px; height:44px; font-size:24px;
  background:var(--cream); border:3px solid var(--ink); border-radius:6px;
  box-shadow:3px 3px 0 var(--ink); cursor:pointer;
}

.mobile-menu{
  display:none; flex-direction:column; gap:4px;
  width:min(var(--deckw), calc(100% - 28px));
  margin:10px auto 0; padding:12px;
  background:var(--paper); border:var(--line) solid var(--ink);
  box-shadow:var(--shadow-sm); border-radius:6px;
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{
  font-family:Bangers, cursive; font-size:22px; letter-spacing:1.5px;
  padding:8px 10px; border-bottom:2px dashed rgba(18,10,8,.25);
}
.mobile-menu a:last-child{ border-bottom:0; color:var(--red); }

/* ============================================================
   BUTTONS
   ============================================================ */
.pow-btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px;
  font-family:"Luckiest Guy", cursive; letter-spacing:1.1px; font-size:17px;
  color:#fff; background:var(--red);
  border:var(--line) solid var(--ink); border-radius:8px;
  box-shadow:var(--shadow-sm);
  text-shadow:2px 2px 0 rgba(18,10,8,.55);
  transition:transform .14s ease, box-shadow .14s ease, background .18s ease;
  position:relative; overflow:hidden;
}
.pow-btn::after{
  content:""; position:absolute; top:0; left:-120%;
  width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-20deg);
  animation:btnShine 4.5s ease-in-out infinite;
}
@keyframes btnShine{ 0%,60%{ left:-120%; } 85%,100%{ left:150%; } }
.pow-btn:hover{ transform:translate(3px,3px) rotate(-1deg); box-shadow:2px 2px 0 var(--ink); background:#e01536; }
.pow-btn--ghost{ background:var(--paper); color:var(--ink); text-shadow:none; }
.pow-btn--ghost:hover{ background:var(--furlt); }
.pow-btn--ink{ background:var(--ink); }
.pow-btn--ink:hover{ background:#2b1a16; }
.pow-btn--sm{ padding:9px 15px; font-size:14px; box-shadow:4px 4px 0 var(--ink); }

/* ============================================================
   PANELS (comic cells)
   ============================================================ */
.panel{
  position:relative;
  background:var(--paper);
  border:var(--line) solid var(--ink);
  border-radius:8px;
  box-shadow:var(--shadow);
  padding:30px;
  transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.2,.8,.25,1), box-shadow .45s ease;
}
.panel::after{  /* paper grain + corner fold */
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:6px;
  background-image:radial-gradient(rgba(18,10,8,.10) 1px, transparent 1.2px);
  background-size:6px 6px; opacity:.5;
}

.tilt-l{ transform:rotateY(9deg) rotateX(2deg) translateZ(0); }
.tilt-l:hover{ transform:rotateY(0deg) rotateX(0deg) translateZ(30px); }
.tilt-r{ transform:rotateY(-9deg) rotateX(2deg); }
.tilt-r:hover{ transform:rotateY(0) rotateX(0) translateZ(30px); }

/* ============================================================
   HERO
   ============================================================ */
.stage--hero{ padding-top:70px; padding-bottom:0; }

.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:46px; align-items:center;
  padding-bottom:80px;
}

.panel--hero{ padding:38px 36px 32px; }

.panel-tag{
  position:absolute; top:-18px; left:26px;
  background:var(--ink); color:var(--paper);
  font-family:Bangers, cursive; letter-spacing:2px; font-size:15px;
  padding:4px 14px; border-radius:4px; transform:rotate(-2deg);
}

.hero-title{
  margin:8px 0 14px;
  line-height:.86;
  display:flex; flex-direction:column;
  letter-spacing:1px;
}
.hero-title .line-1{
  font-size:clamp(46px, 7.6vw, 96px);
  color:var(--ink);
  text-shadow:5px 5px 0 var(--furlt);
}
.hero-title .line-2{
  font-size:clamp(62px, 11vw, 138px);
  color:var(--red);
  -webkit-text-stroke:4px var(--ink);
  text-shadow:8px 8px 0 rgba(18,10,8,.9);
  animation:titlePop 5s ease-in-out infinite;
  transform-origin:left bottom;
}
@keyframes titlePop{
  0%,100%{ transform:rotate(-1.4deg) scale(1); }
  50%{ transform:rotate(-.4deg) scale(1.02); }
}

.hero-bubble{
  position:relative; display:inline-block;
  background:#fff; border:var(--line) solid var(--ink);
  border-radius:26px; padding:12px 20px; margin:6px 0 18px;
  box-shadow:var(--shadow-sm);
  transform:rotate(-1deg);
}
.hero-bubble p{ margin:0; font-weight:700; font-size:19px; }
.hero-bubble::before{
  content:""; position:absolute; bottom:-20px; left:36px;
  border:12px solid transparent; border-top-color:var(--ink);
}
.hero-bubble::after{
  content:""; position:absolute; bottom:-12px; left:41px;
  border:8px solid transparent; border-top-color:#fff;
}

.hero-sub{ max-width:56ch; font-size:17.5px; margin:0 0 26px; }
.hero-sub b{ color:var(--red); }

.hero-btns{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:24px; }

/* CA strip */
.ca-strip{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--ink); color:var(--paper);
  border:3px solid var(--ink); border-radius:8px;
  padding:8px 8px 8px 14px;
  box-shadow:5px 5px 0 var(--red);
}
.ca-label{
  font-family:Bangers, cursive; letter-spacing:2px; font-size:16px; color:var(--furlt);
}
.ca-strip code{
  flex:1 1 200px; min-width:0;
  font-size:13.5px; font-family:ui-monospace, "Courier New", monospace;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ca-copy{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--red); color:#fff; cursor:pointer;
  border:3px solid var(--paper); border-radius:6px;
  padding:6px 12px; font-family:Bangers, cursive; letter-spacing:1.4px; font-size:15px;
  transition:.15s ease;
}
.ca-copy:hover{ background:var(--paper); color:var(--ink); border-color:var(--red); }

.ca-strip--big{
  margin-top:40px; padding:14px 14px 14px 20px;
  box-shadow:8px 8px 0 var(--red);
}
.ca-strip--big code{ font-size:15px; }

/* hero art */
.hero-art{ position:relative; transform-style:preserve-3d; }
.art-frame{
  position:relative; overflow:hidden;
  border:6px solid var(--ink); border-radius:14px;
  box-shadow:16px 16px 0 var(--ink), 0 0 0 12px rgba(255,246,226,.55);
  background:var(--red);
  animation:float 6s ease-in-out infinite;
}
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
}
.art-frame img{ width:100%; }
.art-shine{
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  transform:translateX(-100%);
  animation:artShine 5s ease-in-out infinite;
}
@keyframes artShine{ 0%,55%{ transform:translateX(-100%);} 90%,100%{ transform:translateX(100%);} }

.pow-sticker{
  position:absolute;
  font-family:"Luckiest Guy", cursive; font-size:20px; letter-spacing:1px;
  padding:12px 18px; color:var(--ink); background:var(--furlt);
  border:var(--line) solid var(--ink); border-radius:50% 50% 48% 52%;
  box-shadow:var(--shadow-sm);
  transform:translateZ(60px) rotate(-8deg);
  animation:wiggle 3.4s ease-in-out infinite;
}
.pow-sticker--1{ top:-26px; left:-30px; background:#fff; }
.pow-sticker--2{ bottom:34px; left:-52px; background:var(--furlt); animation-delay:.5s; transform:translateZ(60px) rotate(7deg); }
.pow-sticker--3{ top:52%; right:-40px; background:var(--red); color:#fff; animation-delay:1s; }
@keyframes wiggle{
  0%,100%{ rotate:-6deg; }
  50%{ rotate:5deg; }
}

/* ticker */
.ticker{
  position:relative; z-index:2;
  background:var(--ink); color:var(--paper);
  border-block:var(--line) solid var(--red);
  overflow:hidden; padding:10px 0;
  transform:rotate(-1.2deg) scale(1.04);
  margin-bottom:-30px;
}
.ticker-row{ display:flex; gap:40px; width:max-content; animation:slide 28s linear infinite; }
.ticker-row span{
  font-family:Bangers, cursive; font-size:24px; letter-spacing:2.5px; white-space:nowrap;
}
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ============================================================
   SECTION HEADS
   ============================================================ */
.sec-head{ text-align:center; max-width:820px; margin:0 auto 56px; }
.sec-kicker{
  display:inline-block;
  background:var(--ink); color:var(--furlt);
  font-family:Bangers, cursive; letter-spacing:3px; font-size:15px;
  padding:4px 16px; border-radius:4px; transform:rotate(-1.5deg);
}
.sec-title{
  margin:14px 0 12px;
  font-size:clamp(38px, 6vw, 74px); line-height:.95; letter-spacing:1px;
  color:var(--ink);
  text-shadow:5px 5px 0 var(--furlt);
}
.sec-title em{
  font-style:normal; color:var(--red);
  -webkit-text-stroke:3px var(--ink);
  text-shadow:5px 5px 0 rgba(18,10,8,.85);
}
.stage--chart .sec-title{ color:var(--paper); text-shadow:5px 5px 0 var(--red); }
.stage--chart .sec-lead{ color:#e8d6bb; }
.stage--chart .sec-kicker{ background:var(--red); color:#fff; }
.sec-lead{ font-size:19px; font-weight:700; margin:0; }

/* ============================================================
   ABOUT — comic strip
   ============================================================ */
.strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:30px;
  transform-style:preserve-3d;
}
.comic-cell{ padding:30px 28px 28px; overflow:hidden; }
.comic-cell h3{
  margin:6px 60px 10px 0; font-size:34px; letter-spacing:1.6px; color:var(--red);
  -webkit-text-stroke:1px var(--ink);
}
.comic-cell p{ margin:0; position:relative; z-index:2; }
.cell-no{
  position:absolute; top:16px; right:18px; z-index:3;
  width:46px; height:46px; display:grid; place-items:center;
  background:var(--red); color:#fff;
  font-family:"Luckiest Guy", cursive; font-size:20px;
  border:var(--line) solid var(--ink); border-radius:50%;
  box-shadow:4px 4px 0 var(--ink);
}
.cell-halftone{
  position:absolute; right:-40px; bottom:-40px; width:180px; height:180px;
  background-image:radial-gradient(var(--red) 2px, transparent 2.3px);
  background-size:10px 10px; opacity:.35; z-index:1;
}
.cell--a{ transform:rotate(-2deg) rotateY(6deg); }
.cell--b{ transform:rotate(1deg) translateY(-18px); }
.cell--c{ transform:rotate(2deg) rotateY(-6deg); }
.cell--a:hover,.cell--b:hover,.cell--c:hover{
  transform:rotate(0) translateY(-26px) translateZ(40px);
  box-shadow:16px 18px 0 var(--ink);
}

/* facts board */
.facts{
  margin-top:56px;
  display:grid; grid-template-columns:repeat(6,1fr); gap:0;
  background:var(--ink);
  border:var(--line) solid var(--ink); border-radius:10px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.fact{
  padding:18px 14px; text-align:center; background:var(--paper);
  border-right:3px solid var(--ink);
  transition:.2s ease;
}
.fact:last-child{ border-right:0; }
.fact span{
  display:block; font-family:Bangers, cursive; letter-spacing:2px;
  font-size:13px; color:var(--red);
}
.fact b{ font-size:16px; }
.fact:hover{ background:var(--furlt); transform:translateY(-3px); }

/* ============================================================
   HOW TO BUY
   ============================================================ */
.steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:26px;
  transform-style:preserve-3d;
}
.step{ padding:44px 24px 26px; text-align:left; }
.step:nth-child(odd){ transform:rotateX(4deg) rotate(-1.4deg); }
.step:nth-child(even){ transform:rotateX(4deg) rotate(1.4deg) translateY(22px); }
.step:hover{ transform:rotateX(0) rotate(0) translateY(-10px) translateZ(30px); box-shadow:14px 16px 0 var(--ink); }
.step-badge{
  position:absolute; top:-26px; left:22px;
  width:56px; height:56px; display:grid; place-items:center;
  font-size:24px; color:#fff; background:var(--red);
  border:var(--line) solid var(--ink); border-radius:14px;
  box-shadow:5px 5px 0 var(--ink);
  transform:rotate(-6deg);
}
.step-no{ font-family:Bangers, cursive; letter-spacing:2px; font-size:14px; color:var(--red); }
.step h3{ margin:4px 0 10px; font-size:29px; letter-spacing:1.4px; }
.step p{ margin:0 0 14px; font-size:16px; }

.warn{
  margin-top:66px;
  display:flex; gap:16px; align-items:flex-start;
  background:var(--ink); color:var(--paper);
  border:var(--line) solid var(--red); border-radius:10px;
  padding:20px 24px;
  box-shadow:10px 10px 0 rgba(200,16,46,.55);
  transform:rotate(-.5deg);
}
.warn i{ font-size:28px; color:var(--furlt); }
.warn p{ margin:0; }
.warn b{ color:var(--furlt); }

/* ============================================================
   CHART
   ============================================================ */
.chart-panel{
  background:#160d0b; border-color:var(--red);
  box-shadow:14px 14px 0 rgba(200,16,46,.75);
  padding:0; overflow:hidden;
  transform:rotateX(3deg);
}
.chart-panel:hover{ transform:rotateX(0) translateZ(20px); }
.chart-panel::after{ display:none; }

.chart-bar{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:12px 16px;
  background:var(--red); color:#fff;
  border-bottom:var(--line) solid var(--ink);
}
.chart-bar b{ font-size:21px; letter-spacing:1.6px; margin-left:8px; }
.dot{ width:13px; height:13px; border-radius:50%; border:2px solid rgba(18,10,8,.7); }
.dot--r{ background:#ff5f57; } .dot--y{ background:#ffbd2e; } .dot--g{ background:#28c840; }
.chart-open{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  font-family:Bangers, cursive; letter-spacing:1.4px; font-size:16px;
  background:var(--ink); color:var(--paper);
  padding:6px 13px; border-radius:6px; border:2px solid var(--paper);
  transition:.16s ease;
}
.chart-open:hover{ background:var(--paper); color:var(--ink); }

.chart-frame{ padding:14px; background:#160d0b; }
.chart-embed{
  position:relative; width:100%; height:640px;
  border:3px solid rgba(255,246,226,.25); border-radius:6px; overflow:hidden;
  background:#0b0605;
}
.chart-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.chart-fallback{
  position:absolute; inset:0; display:grid; place-content:center; gap:12px;
  text-align:center; color:#e8d6bb; padding:30px;
}
.chart-fallback b{ font-family:Bangers, cursive; font-size:28px; letter-spacing:2px; color:var(--furlt); }

.chart-links{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:38px; }

/* ============================================================
   JOIN US
   ============================================================ */
.banner-panel{
  position:relative; overflow:hidden;
  border:6px solid var(--ink); border-radius:14px;
  box-shadow:16px 16px 0 var(--ink);
  transform:rotate(-1deg) rotateX(4deg);
  transition:transform .45s cubic-bezier(.2,.8,.25,1);
}
.banner-panel:hover{ transform:rotate(0) rotateX(0) translateZ(30px) scale(1.01); }
.banner-panel img{ width:100%; }
.banner-shine{
  position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
  transform:translateX(-100%);
  animation:artShine 6s ease-in-out infinite 1s;
  pointer-events:none;
}

.join-grid{
  margin-top:52px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
  transform-style:preserve-3d;
}
.join-card{
  position:relative; display:block; padding:30px 26px;
  background:var(--paper);
  border:var(--line) solid var(--ink); border-radius:10px;
  box-shadow:var(--shadow);
  transform:rotateY(0) translateZ(0);
  transition:transform .4s cubic-bezier(.2,.8,.25,1), box-shadow .3s ease, background .3s ease;
  overflow:hidden;
}
.join-card:nth-child(1){ transform:rotate(-1.6deg) rotateY(7deg); }
.join-card:nth-child(2){ transform:rotate(.6deg) translateY(-14px); }
.join-card:nth-child(3){ transform:rotate(1.8deg) rotateY(-7deg); }
.join-card:hover{
  transform:rotate(0) rotateY(0) translateY(-14px) translateZ(40px);
  background:var(--furlt);
  box-shadow:16px 18px 0 var(--ink);
}
.join-card > i{
  display:grid; place-items:center;
  width:60px; height:60px; margin-bottom:14px;
  font-size:26px; color:#fff; background:var(--ink);
  border:3px solid var(--ink); border-radius:14px;
  box-shadow:5px 5px 0 var(--red);
  transform:rotate(-5deg);
}
.join-card h3{ margin:0 0 8px; font-size:30px; letter-spacing:1.5px; color:var(--red); -webkit-text-stroke:1px var(--ink); }
.join-card p{ margin:0 0 16px; font-size:16px; }
.join-go{
  display:inline-flex; align-items:center; gap:8px;
  font-family:Bangers, cursive; letter-spacing:1.6px; font-size:17px;
  background:var(--ink); color:var(--paper);
  padding:7px 14px; border-radius:6px;
}
.join-card:hover .join-go{ background:var(--red); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  position:relative; z-index:2;
  background:var(--ink); color:var(--cream);
  border-top:6px solid var(--red);
  padding:56px 0 40px; margin-top:40px;
  text-align:center;
}
.foot-inner{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.foot-brand{ display:flex; align-items:center; gap:14px; }
.foot-brand img{ width:64px; height:64px; border-radius:50%; border:4px solid var(--red); object-fit:cover; }
.foot-brand div{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.2; }
.foot-brand b{ font-size:26px; color:var(--furlt); letter-spacing:1px; }
.foot-brand span{ font-size:13px; letter-spacing:2px; }
.foot-links{ display:flex; gap:12px; }
.foot-links a{
  width:46px; height:46px; display:grid; place-items:center; font-size:19px;
  background:var(--cream); color:var(--ink);
  border:3px solid var(--red); border-radius:10px;
  transition:.16s ease;
}
.foot-links a:hover{ background:var(--red); color:#fff; transform:translateY(-4px) rotate(-6deg); }
.foot-note{ max-width:760px; font-size:14px; color:#cbb69a; margin:8px 0 0; }
.foot-copy{ font-size:13px; color:#9c8871; margin:0; }

/* ============================================================
   TOAST
   ============================================================ */
.toast{
  position:fixed; left:50%; bottom:34px; z-index:99;
  transform:translate(-50%, 140%) rotate(-2deg);
  background:var(--red); color:#fff;
  font-family:"Luckiest Guy", cursive; letter-spacing:1.4px; font-size:18px;
  padding:13px 26px;
  border:var(--line) solid var(--ink); border-radius:10px;
  box-shadow:var(--shadow-sm);
  transition:transform .35s cubic-bezier(.2,1.2,.4,1);
}
.toast.show{ transform:translate(-50%,0) rotate(-2deg); }

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal{ opacity:0; translate:0 34px; transition:opacity .7s ease var(--d,0s), translate .7s cubic-bezier(.2,.8,.25,1) var(--d,0s); }
.reveal.in{ opacity:1; translate:0 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ---------- tablets / small laptops ---------- */
@media (max-width:1080px){
  :root{ --shadow:8px 8px 0 var(--ink); --shadow-sm:5px 5px 0 var(--ink); }
  .deck{ width:calc(100% - 34px); }
  .nav-links{ display:none; }
  .burger{ display:grid; place-items:center; margin-left:4px; }
  .nav-actions{ margin-left:auto; }

  .strip{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr 1fr; }
  .join-grid{ grid-template-columns:1fr; }
  .join-card:nth-child(1),
  .join-card:nth-child(2),
  .join-card:nth-child(3){ transform:rotate(0) translateY(0); }

  .facts{ grid-template-columns:repeat(3,1fr); }
  .fact:nth-child(3n){ border-right:0; }
  .fact:nth-child(-n+3){ border-bottom:3px solid var(--ink); }

  .hero-grid{ grid-template-columns:1fr; gap:64px; padding-bottom:70px; }
  .tilt-l,.tilt-r{ transform:none; }
  .hero-art{ max-width:520px; margin-inline:auto; }

  .pow-sticker{ font-size:17px; padding:10px 14px; }
  .pow-sticker--1{ top:-20px; left:-6px; }
  .pow-sticker--2{ bottom:26px; left:-10px; }
  .pow-sticker--3{ top:52%; right:-8px; }
}

/* ---------- phones ---------- */
@media (max-width:720px){
  :root{ --line:3px; --shadow:6px 6px 0 var(--ink); --shadow-sm:4px 4px 0 var(--ink); }
  body{ font-size:16px; }
  html{ scroll-padding-top:92px; }

  .stage{ padding:64px 0; perspective:none; }
  .stage--about::before,
  .stage--buy::before,
  .stage--join::before{ inset:24px -6%; }
  .stage--hero::before{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 26px)); }

  /* nav */
  .nav-wrap{ padding-top:10px; }
  .nav-panel{ gap:10px; padding:8px 10px; }
  .nav-brand img{ width:38px; height:38px; }
  .nav-brand b{ font-size:15px; }
  .nav-brand i{ font-size:10px; letter-spacing:1.4px; }
  .nav-actions{ gap:6px; }
  .nav-actions .pow-btn{ display:none; }
  .ico-btn{ width:36px; height:36px; font-size:15px; box-shadow:2px 2px 0 var(--ink); }
  .burger{ width:38px; height:38px; font-size:20px; box-shadow:2px 2px 0 var(--ink); }

  /* hero */
  .stage--hero{ padding-top:44px; }
  .panel--hero{ padding:30px 20px 24px; }
  .panel-tag{ font-size:13px; padding:3px 11px; left:16px; top:-15px; }
  .hero-title .line-2{ -webkit-text-stroke:3px var(--ink); text-shadow:5px 5px 0 rgba(18,10,8,.9); }
  .hero-bubble p{ font-size:17px; }
  .hero-sub{ font-size:16px; }
  .hero-btns{ gap:10px; }
  .pow-btn{ padding:11px 16px; font-size:15px; }
  .hero-art{ max-width:none; }
  .art-frame{ border-width:4px; box-shadow:9px 9px 0 var(--ink), 0 0 0 7px rgba(255,246,226,.55); }
  .pow-sticker{ font-size:14px; padding:8px 12px; border-width:3px; }
  .pow-sticker--1{ top:-16px; left:-4px; }
  .pow-sticker--2{ bottom:14px; left:-6px; }
  .pow-sticker--3{ top:56%; right:-4px; }

  /* sections */
  .sec-head{ margin-bottom:40px; }
  .sec-title{ text-shadow:4px 4px 0 var(--furlt); }
  .sec-title em{ -webkit-text-stroke:2px var(--ink); text-shadow:4px 4px 0 rgba(18,10,8,.85); }
  .sec-lead{ font-size:17px; }

  .strip, .steps{ grid-template-columns:1fr; gap:34px; }
  .cell--a,.cell--b,.cell--c,
  .step:nth-child(odd),.step:nth-child(even){ transform:rotate(0) translateY(0); }
  .comic-cell h3{ font-size:29px; }
  .step{ padding:38px 20px 24px; }
  .step-badge{ width:48px; height:48px; font-size:20px; top:-24px; left:16px; }

  .facts{ grid-template-columns:1fr 1fr; margin-top:42px; }
  .fact{ border-right:3px solid var(--ink); border-bottom:3px solid var(--ink); }
  .fact:nth-child(2n){ border-right:0; }
  .fact:nth-child(n+5){ border-bottom:0; }

  .warn{ margin-top:44px; padding:16px 16px; gap:12px; box-shadow:6px 6px 0 rgba(200,16,46,.55); }

  /* chart */
  .chart-panel{ transform:none; box-shadow:8px 8px 0 rgba(200,16,46,.75); }
  .chart-bar{ padding:10px 12px; }
  .chart-bar b{ font-size:16px; margin-left:4px; width:100%; order:3; }
  .chart-open{ font-size:13px; padding:5px 10px; }
  .chart-frame{ padding:9px; }
  .chart-embed{ height:440px; }
  .chart-links{ margin-top:28px; }

  /* join */
  .banner-panel{ transform:none; border-width:4px; box-shadow:8px 8px 0 var(--ink); }
  .join-grid{ margin-top:34px; gap:22px; }
  .join-card{ padding:24px 20px; }
  .join-card > i{ width:52px; height:52px; font-size:22px; }
  .join-card h3{ font-size:26px; }

  .panel{ padding:24px 20px; }
  .ca-strip{ padding:8px; }
  .ca-strip code{ font-size:12px; flex-basis:100%; order:3; }
  .ca-strip--big{ margin-top:30px; padding:10px; }
  .ca-strip--big code{ font-size:12.5px; }
  .ticker-row span{ font-size:19px; }
  .ticker{ transform:rotate(-1.2deg) scale(1.06); }

  .foot{ padding:44px 0 34px; }
  .foot-brand b{ font-size:22px; }
  .toast{ font-size:15px; padding:11px 18px; width:max-content; max-width:88vw; }
}

/* ---------- small phones ---------- */
@media (max-width:400px){
  .deck{ width:calc(100% - 24px); }
  .nav-panel{ gap:8px; }
  .nav-brand b{ font-size:14px; }
  .ico-btn[data-link="dexscreener"]{ display:none; }
  .hero-btns .pow-btn{ width:100%; justify-content:center; }
  .pow-sticker--3{ display:none; }
  .facts{ grid-template-columns:1fr; }
  .fact{ border-right:0; }
  .fact:nth-child(n+5){ border-bottom:3px solid var(--ink); }
  .fact:last-child{ border-bottom:0; }
  .chart-embed{ height:380px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; translate:none; }
}