/* ==========================================================================
   NEIROCOIN — comic book / 3D perspective theme
   ========================================================================== */

:root{
  --ink:      #2b1a12;
  --ink-soft: #6b4b39;
  --cream:    #fff6e6;
  --sakura:   #ffb7cd;
  --petal:    #ff87ab;
  --rose:     #ff5c8a;
  --shiba:    #e8913a;
  --honey:    #ffcf5c;
  --white:    #fffdf7;

  --bd: 4px;                                   /* comic border width */
  --line: var(--bd) solid var(--ink);
  --pop: 8px 8px 0 var(--ink);                 /* hard comic shadow */
  --pop-sm: 5px 5px 0 var(--ink);
  --pop-xl: 14px 14px 0 var(--ink);
  --r: 18px;
}

*{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Baloo 2", system-ui, sans-serif;
  font-weight:600;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
code{ font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }

/* ------------------------------------------------------------------ */
/* FIXED PHOTO BACKGROUND                                              */
/* ------------------------------------------------------------------ */
.bg-stage{
  position:fixed; inset:0; z-index:-2; overflow:hidden;
}
.bg-photo{
  position:absolute; inset:-6%;
  background-size:cover; background-position:center;
  filter:blur(6px) saturate(1.15);
  transform:scale(1.08);
  opacity:.55;
  animation:bgDrift 34s ease-in-out infinite alternate;
}
.bg-photo--alt{
  opacity:0;
  animation:bgFade 26s ease-in-out infinite alternate, bgDrift 40s ease-in-out infinite alternate-reverse;
}
@keyframes bgDrift{
  from{ transform:scale(1.08) translate3d(0,0,0); }
  to  { transform:scale(1.16) translate3d(-2.5%, -2%, 0); }
}
@keyframes bgFade{ 0%,35%{opacity:0} 65%,100%{opacity:.5} }

/* warm cream wash so content stays readable */
.bg-wash{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 15% 0%,  rgba(255,183,205,.55) 0%, transparent 55%),
    radial-gradient(120% 90% at 90% 20%, rgba(255,207,92,.45) 0%, transparent 55%),
    linear-gradient(180deg, rgba(255,246,230,.80) 0%, rgba(255,246,230,.90) 40%, rgba(255,238,222,.92) 100%);
}
/* ben-day halftone dots over everything */
.bg-halftone{
  position:absolute; inset:0;
  background-image:radial-gradient(circle, rgba(43,26,18,.16) 1.1px, transparent 1.2px);
  background-size:9px 9px;
  opacity:.5;
}

/* ------------------------------------------------------------------ */
/* SAKURA PETALS                                                       */
/* ------------------------------------------------------------------ */
.petals{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.petals span{
  position:absolute; top:-8vh;
  width:14px; height:12px;
  background:var(--sakura);
  border:2px solid rgba(43,26,18,.35);
  border-radius:14px 2px 14px 2px;
  opacity:.85;
  animation:fall linear infinite;
}
@keyframes fall{
  0%{   transform:translate3d(0,-10vh,0) rotate(0deg); }
  100%{ transform:translate3d(14vw,110vh,0) rotate(540deg); }
}
.petals span:nth-child(1) { left:3%;  animation-duration:15s; animation-delay:-2s;  }
.petals span:nth-child(2) { left:11%; animation-duration:19s; animation-delay:-8s;  background:var(--petal); }
.petals span:nth-child(3) { left:19%; animation-duration:13s; animation-delay:-4s;  }
.petals span:nth-child(4) { left:27%; animation-duration:22s; animation-delay:-11s; background:#fff; }
.petals span:nth-child(5) { left:35%; animation-duration:16s; animation-delay:-6s;  }
.petals span:nth-child(6) { left:43%; animation-duration:20s; animation-delay:-14s; background:var(--petal); }
.petals span:nth-child(7) { left:51%; animation-duration:14s; animation-delay:-3s;  }
.petals span:nth-child(8) { left:59%; animation-duration:23s; animation-delay:-9s;  background:#fff; }
.petals span:nth-child(9) { left:67%; animation-duration:17s; animation-delay:-16s; }
.petals span:nth-child(10){ left:75%; animation-duration:21s; animation-delay:-5s;  background:var(--petal); }
.petals span:nth-child(11){ left:82%; animation-duration:15s; animation-delay:-12s; }
.petals span:nth-child(12){ left:89%; animation-duration:24s; animation-delay:-7s;  background:#fff; }
.petals span:nth-child(13){ left:94%; animation-duration:18s; animation-delay:-18s; }
.petals span:nth-child(14){ left:66%; animation-duration:26s; animation-delay:-21s; }

/* ------------------------------------------------------------------ */
/* SHARED                                                              */
/* ------------------------------------------------------------------ */
.stage{ width:min(1200px, 92vw); margin-inline:auto; }

.sec{ position:relative; padding:110px 0; }
.sec-hero{ padding-top:150px; }

/* section headers */
.sec-head{ text-align:center; margin-bottom:56px; }
.kicker{
  display:inline-block;
  font-family:"Bangers", cursive; letter-spacing:2px;
  background:var(--ink); color:var(--honey);
  padding:4px 16px 2px; border-radius:999px;
  transform:rotate(-2deg); margin-bottom:12px; font-size:15px;
}
.sec-title{
  font-family:"Bangers", cursive;
  font-size:clamp(42px, 7vw, 84px);
  letter-spacing:2px; line-height:.95; margin:0;
  color:var(--white);
  -webkit-text-stroke:3px var(--ink);
  paint-order:stroke fill;
  text-shadow:6px 6px 0 var(--rose), 11px 11px 0 var(--ink);
  transform:rotate(-1.4deg);
}

/* ---- comic buttons ---- */
.btn-comic{
  display:inline-flex; align-items:center; gap:9px;
  font-family:"Bangers", cursive; letter-spacing:1.4px; font-size:19px;
  padding:11px 22px 8px;
  border:var(--line); border-radius:14px;
  background:var(--white); color:var(--ink);
  box-shadow:var(--pop-sm);
  transition:transform .12s ease, box-shadow .12s ease;
  white-space:nowrap;
}
.btn-comic:hover{ transform:translate(-2px,-3px); box-shadow:7px 8px 0 var(--ink); }
.btn-comic:active{ transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); }
.btn-comic--pink { background:var(--petal); color:#fff; }
.btn-comic--honey{ background:var(--honey); }
.btn-comic--white{ background:var(--white); }
.btn-lg{ font-size:23px; padding:14px 28px 10px; box-shadow:var(--pop); }

/* ------------------------------------------------------------------ */
/* NAV                                                                 */
/* ------------------------------------------------------------------ */
.nav-wrap{ position:fixed; top:0; left:0; right:0; z-index:60; padding:14px 0 0; }
.nav-bar{
  width:min(1200px, 94vw); margin-inline:auto;
  display:flex; align-items:center; gap:18px;
  padding:9px 14px 9px 9px;
  background:var(--white); border:var(--line); border-radius:999px;
  box-shadow:var(--pop-sm);
  transition:box-shadow .25s ease, transform .25s ease;
}
.nav-wrap.shrunk .nav-bar{ box-shadow:3px 3px 0 var(--ink); }

.nav-brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.nav-logo{
  width:44px; height:44px; border-radius:50%; overflow:hidden;
  border:3px solid var(--ink); box-shadow:3px 3px 0 var(--petal);
  flex:0 0 auto;
}
.nav-logo img{ width:100%; height:100%; object-fit:cover; }
.nav-name{ font-family:"Bangers", cursive; font-size:26px; letter-spacing:1.5px; }
.text-petal{ color:var(--petal); }

.nav-links{ display:flex; gap:6px; list-style:none; margin:0; padding:0; }
.nav-links a{
  display:block; padding:7px 15px; border-radius:999px;
  font-weight:800; font-size:16px; border:3px solid transparent;
  transition:.15s ease;
}
.nav-links a:hover, .nav-links a.active{
  background:var(--sakura); border-color:var(--ink);
  transform:rotate(-2deg);
}

.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-burger{
  display:none; font-size:26px; line-height:1;
  background:var(--honey); border:var(--line); border-radius:12px;
  padding:3px 10px; box-shadow:3px 3px 0 var(--ink); cursor:pointer; color:var(--ink);
}

.nav-drawer{
  width:min(1200px,94vw); margin:8px auto 0;
  background:var(--white); border:var(--line); border-radius:20px;
  box-shadow:var(--pop-sm);
  display:none; flex-direction:column; overflow:hidden;
}
.nav-drawer.open{ display:flex; }
.nav-drawer a{ padding:13px 20px; font-weight:800; border-bottom:3px solid rgba(43,26,18,.12); }
.nav-drawer a:last-child{ border-bottom:0; }
.nav-drawer a:active{ background:var(--sakura); }

/* ------------------------------------------------------------------ */
/* HERO                                                                */
/* ------------------------------------------------------------------ */
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
  perspective:1400px;
}

.hero-copy{ transform-style:preserve-3d; }

.tag-strip{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.tag{
  font-family:"Bangers", cursive; letter-spacing:1.6px; font-size:14px;
  padding:5px 13px 3px; border:3px solid var(--ink); border-radius:999px;
  background:var(--honey); box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-3deg);
}
.tag--alt{ background:var(--petal); color:#fff; transform:rotate(2deg); }

/* big stacked comic title */
.pow-title{ margin:0 0 22px; line-height:.82; }
.pow-line{
  display:block; position:relative;
  font-family:"Bangers", cursive;
  font-size:clamp(56px, 11vw, 132px);
  letter-spacing:3px;
  color:var(--honey);
  -webkit-text-stroke:4px var(--ink);
  paint-order:stroke fill;
  text-shadow:7px 7px 0 var(--rose), 13px 13px 0 var(--ink);
  transform:rotate(-2.5deg);
}
.pow-line--2{ color:var(--petal); margin-left:.28em; transform:rotate(1.5deg); }

/* speech bubble */
.bubble{
  position:relative;
  background:var(--white); border:var(--line); border-radius:26px;
  padding:20px 24px; box-shadow:var(--pop-sm);
  max-width:560px;
}
.bubble p{ margin:0; font-size:17.5px; line-height:1.55; }
.bubble--tail::after,
.bubble--tail::before{
  content:""; position:absolute; left:52px; bottom:-24px;
  width:0; height:0; border-style:solid;
}
.bubble--tail::before{
  border-width:26px 22px 0 0; border-color:var(--ink) transparent transparent transparent;
}
.bubble--tail::after{
  bottom:-17px; left:56px;
  border-width:18px 15px 0 0; border-color:var(--white) transparent transparent transparent;
}

.hero-btns{ display:flex; gap:14px; flex-wrap:wrap; margin:38px 0 22px; }

/* CA bar */
.ca-bar, .buy-ca{
  display:inline-flex; align-items:center; gap:10px; max-width:100%;
  background:var(--ink); color:var(--cream);
  border:var(--line); border-radius:14px;
  padding:8px 8px 8px 12px; box-shadow:5px 5px 0 var(--petal);
}
.ca-label{
  font-family:"Bangers", cursive; letter-spacing:1.5px; font-size:15px;
  color:var(--honey); flex:0 0 auto;
}
.ca-text{
  font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  letter-spacing:.3px;
}
.ca-copy{
  flex:0 0 auto; cursor:pointer;
  background:var(--honey); color:var(--ink);
  border:3px solid var(--cream); border-radius:9px;
  padding:3px 9px; font-size:15px; line-height:1;
  transition:.12s ease;
}
.ca-copy:hover{ background:var(--petal); color:#fff; transform:rotate(-6deg); }

/* hero art stack */
.hero-art{
  position:relative; min-height:520px;
  transform-style:preserve-3d;
}
.burst{
  position:absolute; inset:-14% -10%;
  background:repeating-conic-gradient(from 8deg at 50% 50%,
             rgba(255,207,92,.85) 0deg 9deg, rgba(255,255,255,0) 9deg 20deg);
  border-radius:50%;
  filter:blur(.4px);
  animation:spin 44s linear infinite;
  opacity:.75;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---- comic photo panels ---- */
.panel{
  position:relative; margin:0;
  background:var(--white);
  border:var(--line); border-radius:var(--r);
  box-shadow:var(--pop);
  overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease;
}
.panel img{ width:100%; height:100%; object-fit:cover; }

.panel--hero{ position:absolute; }
.panel-a{
  width:64%; aspect-ratio:1/1; left:6%; top:4%;
  transform:rotate(-5deg) translateZ(40px); z-index:3;
  box-shadow:var(--pop-xl);
}
.panel-b{
  width:44%; aspect-ratio:3/4; right:0; top:28%;
  transform:rotate(6deg) translateZ(70px); z-index:4;
}
.panel-c{
  width:38%; aspect-ratio:1/1; left:2%; bottom:2%;
  transform:rotate(3.5deg) translateZ(20px); z-index:2;
}
.hero-art:hover .panel-a{ transform:rotate(-7deg) translateZ(60px) scale(1.02); }
.hero-art:hover .panel-b{ transform:rotate(9deg)  translateZ(95px) scale(1.03); }
.hero-art:hover .panel-c{ transform:rotate(1deg)  translateZ(35px) scale(1.02); }

/* caption box */
.cap{
  position:absolute; left:10px; bottom:10px;
  background:var(--honey); border:3px solid var(--ink); border-radius:8px;
  padding:4px 11px 2px; font-family:"Bangers", cursive; letter-spacing:1.1px;
  font-size:15px; box-shadow:3px 3px 0 var(--ink);
}
.cap--tl{ top:10px; bottom:auto; }
.cap--br{ left:auto; right:10px; background:var(--sakura); }

/* stickers */
.sticker{
  position:absolute; z-index:6;
  font-family:"Bangers", cursive; letter-spacing:2px;
  border:var(--line); box-shadow:var(--pop-sm);
  padding:8px 16px 5px;
}
.sticker--wow{
  top:-2%; right:6%; font-size:30px;
  background:var(--rose); color:#fff;
  border-radius:50% 50% 50% 8px;
  transform:rotate(12deg);
  animation:bob 3.4s ease-in-out infinite;
}
.sticker--much{
  bottom:8%; right:-2%; font-size:20px;
  background:var(--white); border-radius:999px;
  transform:rotate(-8deg);
  animation:bob 4.2s ease-in-out infinite reverse;
}
@keyframes bob{ 50%{ transform:translateY(-10px) rotate(0deg); } }

/* ------------------------------------------------------------------ */
/* ABOUT — comic page                                                  */
/* ------------------------------------------------------------------ */
.sec-about{ perspective:1600px; }

.comic-page{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  grid-auto-rows:130px;
  gap:20px;
  padding:26px;
  background:var(--white);
  border:5px solid var(--ink);
  border-radius:24px;
  box-shadow:var(--pop-xl);
  transform-style:preserve-3d;
}

.comic-page .panel{ box-shadow:var(--pop-sm); }
.comic-page .panel:hover{ transform:translateZ(30px) rotate(-1deg); box-shadow:var(--pop); }

.p1{ grid-column:1 / 3; grid-row:1 / 3; }
.p2{ grid-column:3 / 5; grid-row:1 / 3; }
.p3{ grid-column:5 / 7; grid-row:1 / 4; }
.p4{ grid-column:1 / 3; grid-row:3 / 6; }
.p5{ grid-column:3 / 5; grid-row:3 / 5; }
.p6{ grid-column:5 / 7; grid-row:4 / 6; }
.p7{ grid-column:3 / 5; grid-row:5 / 6; }

.panel--text{
  display:flex; flex-direction:column; justify-content:center; gap:9px;
  padding:22px;
  background:
    radial-gradient(circle, rgba(43,26,18,.10) 1px, transparent 1.1px) 0 0/8px 8px,
    var(--white);
}
.panel--pink { background:radial-gradient(circle, rgba(43,26,18,.10) 1px, transparent 1.1px) 0 0/8px 8px, var(--sakura); }
.panel--honey{ background:radial-gradient(circle, rgba(43,26,18,.10) 1px, transparent 1.1px) 0 0/8px 8px, var(--honey); }

.panel--text h3{
  margin:0; font-family:"Bangers", cursive; letter-spacing:1.2px;
  font-size:clamp(21px, 2.2vw, 30px); line-height:1.05;
}
.panel--text p{ margin:0; font-size:16px; line-height:1.5; }
.panel--text .lead{ font-size:18px; font-weight:700; text-align:center; }

.pow-badge{
  align-self:flex-start;
  font-family:"Bangers", cursive; letter-spacing:1.6px; font-size:17px;
  background:var(--rose); color:#fff;
  border:3px solid var(--ink); border-radius:50% 50% 50% 6px;
  padding:6px 15px 4px; box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-6deg);
}

/* stats */
.stat-row{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-top:44px;
}
.stat-row .stat.reveal{
  --rot:0deg; --ty:40px;
  background:var(--white); border:var(--line); border-radius:16px;
  box-shadow:var(--pop-sm); padding:18px 12px; text-align:center;
  opacity:0;
  transform:rotate(var(--rot)) translateY(var(--ty));
  transition:transform .3s cubic-bezier(.2,.8,.3,1), opacity .5s ease;
}
.stat-row .stat.reveal.in{ opacity:1; --ty:0px; }
.stat-row .stat:nth-child(odd){ --rot:-1.6deg; }
.stat-row .stat:nth-child(even){ --rot:1.6deg; background:var(--sakura); }
.stat-row .stat.reveal:hover{ --rot:0deg; --ty:-6px; }
.stat-num{
  display:block; font-family:"Bangers", cursive; font-size:38px; letter-spacing:1.5px;
  color:var(--ink);
}
.stat-lab{ display:block; font-size:14.5px; font-weight:800; opacity:.8; }

/* ------------------------------------------------------------------ */
/* HOW TO BUY — 3D coverflow strip                                     */
/* ------------------------------------------------------------------ */
.sec-buy{ perspective:1500px; }

.strip{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:22px;
  transform-style:preserve-3d;
}

.strip .step.reveal{
  --ry:0deg; --tz:0px; --ty:46px;
  position:relative;
  background:var(--white);
  border:var(--line); border-radius:20px;
  box-shadow:var(--pop);
  padding:34px 20px 24px;
  opacity:0;
  transform-style:preserve-3d;
  transform:rotateY(var(--ry)) translateZ(var(--tz)) translateY(var(--ty));
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease, opacity .6s ease;
}
.strip .step.reveal.in{ opacity:1; --ty:0px; }
/* coverflow: outer cards angled inward */
.strip .step:nth-child(1){ --ry:16deg;  --tz:-46px; }
.strip .step:nth-child(2){ --ry:7deg;   --tz:-8px; }
.strip .step:nth-child(3){ --ry:-7deg;  --tz:-8px; }
.strip .step:nth-child(4){ --ry:-16deg; --tz:-46px; }
.strip .step.reveal:hover{ --ry:0deg; --tz:60px; box-shadow:var(--pop-xl); z-index:3; }

.step-no{
  position:absolute; top:-24px; left:-16px;
  width:56px; height:56px; display:grid; place-items:center;
  font-family:"Bangers", cursive; font-size:32px; line-height:1;
  background:var(--honey); color:var(--ink);
  border:var(--line); border-radius:50%;
  box-shadow:var(--pop-sm);
  transform:rotate(-9deg);
}
.step-icon{
  width:64px; height:64px; display:grid; place-items:center;
  font-size:30px; margin-bottom:14px;
  background:var(--sakura); border:var(--line); border-radius:16px;
  box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-4deg);
}
.step h3{
  margin:0 0 8px; font-family:"Bangers", cursive; letter-spacing:1.2px;
  font-size:25px; line-height:1.05;
}
.step p{ margin:0; font-size:15.5px; line-height:1.5; }
.step-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  font-family:"Bangers", cursive; letter-spacing:1.2px; font-size:16px;
  background:var(--petal); color:#fff;
  border:3px solid var(--ink); border-radius:10px;
  padding:6px 13px 4px; box-shadow:3px 3px 0 var(--ink);
  transition:.12s ease;
}
.step-link:hover{ background:var(--rose); transform:translate(-1px,-2px); box-shadow:4px 5px 0 var(--ink); }

.buy-ca{ margin:52px auto 0; display:flex; width:fit-content; max-width:100%; }

/* ------------------------------------------------------------------ */
/* CHART — arcade cabinet                                              */
/* ------------------------------------------------------------------ */
.sec-chart{ perspective:1600px; }

.cabinet{
  background:var(--ink);
  border:5px solid var(--ink); border-radius:26px;
  box-shadow:var(--pop-xl);
  overflow:hidden;
  transform-style:preserve-3d;
}
.cabinet-top{
  display:flex; align-items:center; gap:9px;
  padding:11px 16px;
  background:linear-gradient(180deg, var(--petal), var(--rose));
  border-bottom:5px solid var(--ink);
}
.dot{ width:15px; height:15px; border-radius:50%; border:3px solid var(--ink); }
.dot--r{ background:#ff6b6b; } .dot--y{ background:var(--honey); } .dot--g{ background:var(--leaf, #8fd68a); }
.cabinet-title{
  margin-left:8px; font-family:"Bangers", cursive; letter-spacing:1.8px;
  font-size:18px; color:#fff; text-shadow:2px 2px 0 var(--ink);
}
.cabinet-open{
  margin-left:auto; font-family:"Bangers", cursive; letter-spacing:1.3px; font-size:15px;
  background:var(--honey); border:3px solid var(--ink); border-radius:9px;
  padding:3px 11px 1px; box-shadow:2px 2px 0 var(--ink);
}
.cabinet-open:hover{ background:#fff; }

.cabinet-screen{
  position:relative;
  height:min(72vh, 640px);
  background:
    radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1.1px) 0 0/7px 7px,
    #0f0a07;
}
.cabinet-screen iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; opacity:0;
  transition:opacity .4s ease;
}
.cabinet-screen iframe.live{ opacity:1; }

.chart-placeholder{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:16px;
  text-align:center; color:var(--cream); padding:24px;
}
.chart-placeholder img{
  width:120px; height:120px; object-fit:cover; border-radius:50%;
  border:5px solid var(--honey); box-shadow:var(--pop-sm);
  animation:bob 3s ease-in-out infinite;
}
.chart-placeholder p{ margin:0; font-size:17px; line-height:1.6; }
.chart-placeholder code{
  background:rgba(255,255,255,.14); padding:2px 7px; border-radius:6px; color:var(--honey);
}
.chart-placeholder.hide{ display:none; }

.cabinet-foot{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  padding:18px; background:var(--honey); border-top:5px solid var(--ink);
}

/* ------------------------------------------------------------------ */
/* JOIN US                                                             */
/* ------------------------------------------------------------------ */
.sec-join{ perspective:1500px; }

.banner-frame{
  margin:0 auto;
  border:5px solid var(--ink); border-radius:24px;
  box-shadow:var(--pop-xl);
  overflow:hidden;
  background:var(--white);
  transform:rotate(-1deg);
  transform-style:preserve-3d;
  transition:transform .35s ease;
}
.banner-frame:hover{ transform:rotate(0deg) translateZ(40px) scale(1.01); }
.banner-frame img{ width:100%; }

.join-lead{
  max-width:680px; margin:34px auto 40px; text-align:center;
  font-size:18.5px; line-height:1.6;
  background:var(--white); border:var(--line); border-radius:22px;
  box-shadow:var(--pop-sm); padding:20px 26px;
}

.social-grid{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:18px;
}
.social{
  display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center;
  padding:26px 12px 20px;
  background:var(--white); border:var(--line); border-radius:20px;
  box-shadow:var(--pop);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.social i{ font-size:38px; line-height:1; margin-bottom:6px; }
.social-name{ font-family:"Bangers", cursive; letter-spacing:1.2px; font-size:21px; white-space:nowrap; }
.social-sub{ font-size:13.5px; font-weight:700; opacity:.72; white-space:nowrap; }
.social:hover{ transform:translate(-3px,-7px) rotate(-1.5deg); box-shadow:11px 14px 0 var(--ink); }
.social--x:hover { background:var(--ink); color:var(--cream); }
.social--tg:hover{ background:#2aabee; color:#fff; }
.social--ps:hover{ background:var(--petal); color:#fff; }
.social--ds:hover{ background:var(--honey); }
.social--ig:hover{
  background:linear-gradient(45deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%);
  color:#fff;
}

/* ------------------------------------------------------------------ */
/* FOOTER                                                              */
/* ------------------------------------------------------------------ */
.foot{
  border-top:5px solid var(--ink);
  background:var(--ink); color:var(--cream);
  padding:44px 0 34px; margin-top:40px;
}
.foot-in{ display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.foot-brand{ display:flex; align-items:center; gap:12px; }
.foot-brand img{
  width:54px; height:54px; border-radius:50%; object-fit:cover;
  border:4px solid var(--honey);
}
.foot-brand div{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; }
.foot-brand b{ font-family:"Bangers", cursive; letter-spacing:1.5px; font-size:24px; color:var(--honey); }
.foot-brand span{ font-size:14px; opacity:.8; }

.foot-social{ display:flex; gap:12px; }
.foot-social a{
  width:46px; height:46px; display:grid; place-items:center; font-size:20px;
  background:var(--cream); color:var(--ink);
  border:3px solid var(--honey); border-radius:14px;
  transition:.15s ease;
}
.foot-social a:hover{ background:var(--honey); transform:translateY(-4px) rotate(-6deg); }

.foot-note{ max-width:640px; margin:6px 0 0; font-size:13.5px; line-height:1.6; opacity:.72; }

/* back to top */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:50;
  width:52px; height:52px; display:grid; place-items:center; font-size:22px;
  background:var(--honey); border:var(--line); border-radius:50%;
  box-shadow:var(--pop-sm);
  opacity:0; pointer-events:none; transform:translateY(14px);
  transition:.25s ease;
}
.to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.to-top:hover{ background:var(--petal); color:#fff; }

/* toast */
.toast{
  position:fixed; left:50%; bottom:34px; transform:translate(-50%, 30px);
  background:var(--ink); color:var(--honey);
  font-family:"Bangers", cursive; letter-spacing:1.4px; font-size:19px;
  padding:11px 24px 8px; border:4px solid var(--honey); border-radius:999px;
  box-shadow:var(--pop-sm);
  opacity:0; pointer-events:none; transition:.28s ease; z-index:90;
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }

/* ------------------------------------------------------------------ */
/* REVEAL ON SCROLL                                                    */
/* ------------------------------------------------------------------ */
.reveal{ opacity:0; transform:translateY(46px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1); }
.reveal[data-tilt="left"] { transform:translateY(30px) rotateY(16deg); }
.reveal[data-tilt="right"]{ transform:translateY(30px) rotateY(-16deg); }
.reveal[data-tilt="page"] { transform:translateY(56px) rotateX(14deg) scale(.96); }
.reveal.in{ opacity:1; transform:none; }

/* scroll-driven 3D tilt (JS only sets --rx, so :hover rules still win) */
.comic-page.in,
.cabinet.in{ transform:perspective(1600px) rotateX(var(--rx, 0deg)); }
.banner-frame.in{ transform:perspective(1600px) rotateX(var(--rx, 0deg)) rotate(-1deg); }
.banner-frame.in:hover{ transform:perspective(1600px) rotateX(0deg) rotate(0deg) translateZ(40px) scale(1.01); }


/* ------------------------------------------------------------------ */
/* RESPONSIVE                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 1080px){
  .nav-links{ display:none; }
  .nav-burger{ display:block; }
  .hero-grid{ grid-template-columns:1fr; gap:60px; }
  .hero-art{ min-height:440px; }
  .strip{ grid-template-columns:repeat(2, 1fr); gap:34px 26px; }
  .strip .step:nth-child(1){ --ry:9deg;  --tz:0px; }
  .strip .step:nth-child(2){ --ry:-9deg; --tz:0px; }
  .strip .step:nth-child(3){ --ry:9deg;  --tz:0px; }
  .strip .step:nth-child(4){ --ry:-9deg; --tz:0px; }

  /* keep all five socials on one line — just tighten them up */
  .social-grid{ gap:12px; }
  .social{ padding:20px 8px 16px; }
  .social i{ font-size:30px; margin-bottom:4px; }
  .social-name{ font-size:17px; letter-spacing:.8px; }
  .social-sub{ font-size:12px; }
}

@media (max-width: 820px){
  .sec{ padding:80px 0; }
  .sec-hero{ padding-top:130px; }

  /* comic page collapses to a single readable column */
  .comic-page{
    grid-template-columns:1fr; grid-auto-rows:auto; gap:18px; padding:18px;
  }
  .comic-page .panel{ grid-column:1 / -1 !important; grid-row:auto !important; }
  .comic-page figure.panel{ aspect-ratio:4/3; }

  .stat-row{ grid-template-columns:repeat(2, 1fr); }
  .social-grid{ grid-template-columns:repeat(3, 1fr); gap:16px; }
  .cabinet-screen{ height:520px; }
  .cabinet-title{ font-size:15px; letter-spacing:1px; }
}

@media (max-width: 560px){
  :root{ --bd:3px; --pop:6px 6px 0 var(--ink); --pop-xl:9px 9px 0 var(--ink); }
  .nav-name{ font-size:22px; }
  .nav-cta .btn-comic span{ display:none; }
  .hero-art{ min-height:360px; }
  .panel-a{ width:70%; } .panel-b{ width:48%; } .panel-c{ width:42%; }
  .sticker--wow{ font-size:23px; }
  .sticker--much{ font-size:16px; }
  .strip{ grid-template-columns:1fr; }
  .strip .step:nth-child(n){ --ry:0deg; --tz:0px; }
  .social-grid{ grid-template-columns:repeat(2, 1fr); }
  .social-grid .social:last-child{ grid-column:1 / -1; }
  .ca-text{ font-size:11.5px; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  .stat-row .stat.reveal,
  .strip .step.reveal{ opacity:1; --ty:0px; }
}