/* ==========================================================================
   BONGOCAT — comic book in 3D space
   Signature motifs: thick ink outlines, hard offset shadows, halftone dots,
   the diagonal split-line lifted from the logo, and pages hinged in perspective.
   ========================================================================== */

:root{
  --ink:      #150F0E;
  --paper:    #FFF3E2;
  --cream:    #FFF9F0;
  --coral:    #FF7A4D;
  --pink:     #E8305B;
  --yellow:   #FFC93C;
  --sky:      #57C7E8;
  --mint:     #8FE3A8;
  --purple:   #6B5BD2;

  --line:     4px;
  --pop:      8px 8px 0 var(--ink);
  --pop-sm:   5px 5px 0 var(--ink);
  --pop-lg:   14px 14px 0 var(--ink);
  --radius:   22px;
}

*{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
  font-weight:600;
}

img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }

::selection{ background:var(--yellow); color:var(--ink); }

/* scrollbar */
::-webkit-scrollbar{ width:12px; }
::-webkit-scrollbar-track{ background:var(--paper); }
::-webkit-scrollbar-thumb{ background:var(--ink); border-radius:20px; border:3px solid var(--paper); }


/* ==========================================================================
   FIXED BACKDROP  (the image lives in the background)
   ========================================================================== */
.stage-bg{
  position:fixed; inset:0; z-index:-2; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 0%,  #FFE3C7 0%, transparent 55%),
    radial-gradient(90% 70% at 100% 100%, #FFD8E2 0%, transparent 60%),
    var(--paper);
}
.stage-bg__img{
  position:absolute; inset:-6%;
  background-image:var(--img);
  background-size:cover;
  background-position:center;
  opacity:.16;
  filter:saturate(1.15) contrast(1.02);
  transform:scale(1.06);
}
.stage-bg__halftone{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(21,15,14,.16) 1.4px, transparent 1.5px);
  background-size:11px 11px;
  opacity:.55;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.35) 45%, rgba(0,0,0,.9));
}
.stage-bg__rays{
  position:absolute; left:50%; top:-30vh; width:180vmax; height:180vmax;
  translate:-50% 0;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(255,122,77,.10) 0deg 6deg, transparent 6deg 14deg);
  animation:spin 160s linear infinite;
  opacity:.7;
}
.stage-bg__vignette{
  position:absolute; inset:0;
  background:radial-gradient(75% 60% at 50% 45%, transparent 40%, rgba(21,15,14,.16) 100%);
}
@keyframes spin{ to{ transform:rotate(360deg); } }


/* drifting sticker cats */
.drifters{ position:fixed; inset:0; z-index:-1; pointer-events:none; }
.drifter{
  position:absolute; width:120px; border-radius:50%;
  border:var(--line) solid var(--ink);
  box-shadow:var(--pop-sm);
  object-fit:cover; aspect-ratio:1/1;
  opacity:.9;
}
.drifter--1{ left:3%;  top:22%; animation:bob 9s ease-in-out infinite; }
.drifter--2{ right:4%; top:52%; width:100px; animation:bob 11s ease-in-out infinite reverse; }
.drifter--3{ left:6%;  top:74%; width:92px;  animation:bob 13s ease-in-out infinite; }
@keyframes bob{
  0%,100%{ transform:translateY(0) rotate(-6deg); }
  50%    { transform:translateY(-26px) rotate(6deg); }
}
@media (max-width:1280px){ .drifters{ display:none; } }


/* ==========================================================================
   SHARED COMIC PRIMITIVES
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:"Luckiest Guy",cursive; letter-spacing:.06em;
  font-size:1.05rem; padding:.85rem 1.5rem;
  border:var(--line) solid var(--ink);
  border-radius:999px;
  background:var(--cream);
  box-shadow:var(--pop-sm);
  transition:transform .14s cubic-bezier(.2,.8,.3,1.4), box-shadow .14s, background .2s;
  cursor:pointer;
  text-shadow:1px 1px 0 rgba(255,255,255,.35);
}
.btn:hover{ transform:translate(-3px,-3px) rotate(-1.5deg); box-shadow:9px 9px 0 var(--ink); }
.btn:active{ transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); }
.btn--pink  { background:var(--pink);   color:#fff; text-shadow:2px 2px 0 rgba(21,15,14,.35); }
.btn--yellow{ background:var(--yellow); }
.btn--ghost { background:var(--cream); }
.btn--sm{ font-size:.86rem; padding:.6rem 1.05rem; box-shadow:4px 4px 0 var(--ink); }
.btn--lg{ font-size:1.35rem; padding:1.1rem 2.2rem; box-shadow:var(--pop); }

/* halftone-filled sticker */
.sticker{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:"Bangers",cursive; letter-spacing:.08em; font-size:.95rem;
  padding:.35rem .9rem;
  background:var(--yellow);
  border:3px solid var(--ink);
  border-radius:999px;
  box-shadow:4px 4px 0 var(--ink);
  transform:rotate(-3deg);
}
.sticker--sol{ background:var(--mint); }
.sticker--flip{
  position:absolute; right:-14px; bottom:-18px;
  background:var(--sky); transform:rotate(7deg); z-index:4;
}

/* speech bubble */
.speech{
  position:relative;
  background:var(--cream);
  border:var(--line) solid var(--ink);
  border-radius:28px;
  padding:1.25rem 1.5rem;
  box-shadow:var(--pop-sm);
  font-size:1.05rem; line-height:1.5;
}
.speech::after,.speech::before{
  content:""; position:absolute; left:42px; bottom:-26px;
  border:14px solid transparent; border-top-color:var(--ink);
}
.speech::before{ bottom:-26px; }
.speech::after{ bottom:-19px; border-top-color:var(--cream); }

/* comic sound-effect words */
.sfx{
  position:absolute; z-index:6; pointer-events:none;
  font-family:"Luckiest Guy",cursive;
  color:var(--yellow);
  -webkit-text-stroke:4px var(--ink);
  paint-order:stroke fill;
  text-shadow:7px 7px 0 rgba(21,15,14,.55);
}
.sfx--1{ font-size:clamp(2rem,5vw,4rem); left:4%;  bottom:11%; transform:rotate(-13deg); animation:pulse 3.4s ease-in-out infinite; }
.sfx--2{ font-size:clamp(1.6rem,3.6vw,3rem); right:6%; top:16%; color:var(--pink); transform:rotate(11deg); animation:pulse 4.2s ease-in-out infinite .6s; }
@keyframes pulse{ 0%,100%{ scale:1; } 50%{ scale:1.12; } }

/* halftone overlay helper */
.halftone::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background-image:radial-gradient(rgba(21,15,14,.2) 1.3px, transparent 1.4px);
  background-size:9px 9px;
  mix-blend-mode:multiply; opacity:.5;
}


/* ==========================================================================
   NAV
   ========================================================================== */
.nav-wrap{
  position:fixed; top:0; left:0; right:0; z-index:60;
  padding:.9rem clamp(.75rem,3vw,2rem);
  transition:padding .25s ease;
}
.nav-wrap.is-stuck{ padding-top:.45rem; }

.nav{
  max-width:1280px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:var(--cream);
  border:var(--line) solid var(--ink);
  border-radius:999px;
  padding:.5rem .55rem .5rem .7rem;
  box-shadow:var(--pop-sm);
}
.nav__brand{ display:flex; align-items:center; gap:.6rem; }
.nav__logo{
  width:46px; height:46px; border-radius:50%;
  border:3px solid var(--ink); overflow:hidden; flex:none;
  box-shadow:3px 3px 0 var(--ink);
}
.nav__logo img{ width:100%; height:100%; object-fit:cover; }
.nav__name{
  font-family:"Luckiest Guy",cursive; font-size:1.4rem; letter-spacing:.02em;
  color:var(--pink);
}
.nav__name .text-yellow{ color:var(--coral); }

.nav__links{ display:flex; gap:.25rem; }
.nav__links a{
  display:inline-flex; align-items:center; gap:.35rem;
  font-family:"Bangers",cursive; letter-spacing:.06em; font-size:1.05rem;
  padding:.45rem .85rem; border-radius:999px;
  border:3px solid transparent;
  transition:.16s;
}
.nav__links a:hover{ background:var(--yellow); border-color:var(--ink); transform:rotate(-2deg); }
.nav__links i{ font-size:.9rem; }

.nav__cta{ display:flex; align-items:center; gap:.45rem; }
.nav__ico{
  width:40px; height:40px; display:grid; place-items:center;
  border:3px solid var(--ink); border-radius:50%;
  background:var(--cream); box-shadow:3px 3px 0 var(--ink);
  font-size:1rem; transition:.16s;
}
.nav__ico:hover{ background:var(--ink); color:var(--cream); transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }
.nav__ico--yt:hover{ background:#FF0033; color:#fff; }

.nav__burger{
  display:none; width:44px; height:44px; font-size:1.5rem;
  background:var(--yellow); border:3px solid var(--ink); border-radius:14px;
  box-shadow:3px 3px 0 var(--ink); cursor:pointer;
}

.nav__mobile{
  display:none; flex-direction:column; gap:.4rem;
  max-width:1280px; margin:.6rem auto 0;
  background:var(--cream); border:var(--line) solid var(--ink);
  border-radius:22px; padding:.8rem; box-shadow:var(--pop-sm);
}
.nav__mobile.is-open{ display:flex; }
.nav__mobile a{
  font-family:"Bangers",cursive; font-size:1.2rem; letter-spacing:.05em;
  padding:.55rem .9rem; border-radius:14px; border:3px solid var(--ink);
  background:var(--paper);
}
.nav__mobile-buy{ background:var(--pink) !important; color:#fff; }

@media (max-width:1024px){
  .nav__links{ display:none; }
  .nav__burger{ display:grid; place-items:center; }
  .nav__ico{ display:none; }
}


/* ==========================================================================
   PAGE (section) SHELL — every section is a comic page in perspective
   ========================================================================== */
.page{
  position:relative;
  perspective:1600px;
  perspective-origin:50% 42%;
  padding:clamp(5rem,11vh,8rem) clamp(1rem,4vw,3rem);
  max-width:1400px; margin:0 auto;
}
.page-number{
  position:absolute; top:clamp(1.6rem,4vh,3rem); left:50%; translate:-50% 0;
  font-family:"Bangers",cursive; letter-spacing:.35em; font-size:.85rem;
  color:rgba(21,15,14,.45);
  border:3px solid rgba(21,15,14,.25);
  border-radius:999px; padding:.15rem .9rem .05rem;
  background:rgba(255,249,240,.6);
  backdrop-filter:blur(2px);
}

/* diagonal split divider — the logo's signature line */
.page::after{
  content:""; position:absolute; left:-10vw; right:-10vw; bottom:-2px; height:70px;
  background:linear-gradient(178.6deg, transparent 0 49.4%, var(--ink) 49.4% 50.6%, transparent 50.6% 100%);
  pointer-events:none;
  opacity:.85;
}

.page-head{ text-align:center; max-width:820px; margin:0 auto clamp(2.5rem,5vw,4rem); position:relative; z-index:2; }
.page-head__kicker{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:"Bangers",cursive; letter-spacing:.14em; font-size:1rem;
  background:var(--ink); color:var(--yellow);
  padding:.3rem 1rem; border-radius:999px;
  transform:rotate(-2deg);
}
.page-head__title{
  font-family:"Luckiest Guy",cursive;
  font-size:clamp(2.6rem,7.5vw,5.2rem);
  line-height:.98; margin:.7rem 0 .6rem;
  color:var(--cream);
  -webkit-text-stroke:5px var(--ink);
  paint-order:stroke fill;
  text-shadow:9px 9px 0 var(--pink);
  letter-spacing:.01em;
}
.page-head--light .page-head__title{ text-shadow:9px 9px 0 var(--sky); }
.page-head__sub{ font-size:1.12rem; line-height:1.55; margin:0; color:rgba(21,15,14,.82); }


/* ==========================================================================
   3D TILT SYSTEM
   ========================================================================== */
[data-deck]{ transform-style:preserve-3d; }

.tilt{
  transform-style:preserve-3d;
  transform:
    rotateY(calc(var(--ty,0) * 1deg))
    rotateX(calc(var(--tx,0) * 1deg))
    translateZ(calc((var(--tzb,0) + var(--tz,0)) * 1px))
    translateY(var(--rise,0px));
  transition:transform .55s cubic-bezier(.22,1,.36,1), box-shadow .3s;
  will-change:transform;
}
/* enter animation */
.reveal{ opacity:0; --rise:56px; }
.reveal.is-in{ opacity:1; --rise:0px; transition:transform .8s cubic-bezier(.22,1,.36,1), opacity .6s ease; }


/* ==========================================================================
   HERO
   ========================================================================== */
.page--hero{
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:clamp(7rem,15vh,10rem);
}
.deck{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,3.5vw,3.5rem);
  align-items:center;
  transform-style:preserve-3d;
}

.panel{
  position:relative;
  background:var(--cream);
  border:var(--line) solid var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--pop-lg);
  padding:clamp(1.6rem,3vw,2.6rem);
}
.panel__tape{
  position:absolute; width:120px; height:34px;
  background:repeating-linear-gradient(45deg, rgba(255,201,60,.9) 0 8px, rgba(255,240,190,.9) 8px 16px);
  border:2px solid rgba(21,15,14,.55);
}
.panel__tape--tl{ top:-18px; left:-26px; transform:rotate(-24deg); }

.panel--title{ --tzb:20; }
.hero__title{
  font-family:"Luckiest Guy",cursive;
  font-size:clamp(3.4rem,10vw,7.4rem);
  line-height:.82; margin:1.1rem 0 .4rem;
  letter-spacing:.005em;
}
.hero__title-line{
  display:block;
  color:var(--cream);
  -webkit-text-stroke:6px var(--ink);
  paint-order:stroke fill;
  text-shadow:10px 10px 0 var(--coral);
}
.hero__title-line--alt{ margin-left:.35em; text-shadow:10px 10px 0 var(--pink); }

.ticker-badge{
  display:inline-block;
  font-family:"Bangers",cursive; letter-spacing:.2em; font-size:1.5rem;
  background:var(--ink); color:var(--yellow);
  padding:.25rem 1.1rem .1rem; border-radius:10px;
  transform:rotate(-2deg) translateZ(18px);
  box-shadow:5px 5px 0 var(--coral);
  margin-bottom:1rem;
}
.hero__bio{ font-size:1.16rem; line-height:1.55; max-width:52ch; margin:0 0 1.6rem; }
.hero__btns{ display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:1.4rem; }

/* CA bar */
.ca-bar{
  display:flex; align-items:center; gap:.6rem;
  background:var(--ink); color:var(--cream);
  border:var(--line) solid var(--ink);
  border-radius:16px; padding:.5rem .5rem .5rem .8rem;
  box-shadow:var(--pop-sm);
  overflow:hidden;
}
.ca-bar__label{
  font-family:"Bangers",cursive; letter-spacing:.14em; font-size:.9rem;
  color:var(--yellow); flex:none;
}
.ca-bar__value{
  font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;
  font-size:.86rem; flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  opacity:.95;
}
.ca-bar__btn{
  flex:none; display:inline-flex; align-items:center; gap:.35rem;
  font-family:"Bangers",cursive; letter-spacing:.08em; font-size:.95rem;
  background:var(--yellow); color:var(--ink);
  border:3px solid var(--ink); border-radius:12px;
  padding:.35rem .8rem; cursor:pointer; transition:.15s;
}
.ca-bar__btn:hover{ background:var(--coral); transform:translateY(-2px); }
.ca-bar--wide{ max-width:640px; width:100%; }

/* logo panel */
.panel--logo{
  --tzb:40;
  display:grid; place-items:center; gap:1.2rem;
  background:linear-gradient(160deg, var(--coral), var(--pink));
  overflow:visible;
}
.logo-frame{
  position:relative; width:100%; max-width:380px; aspect-ratio:1/1;
  border:var(--line) solid var(--ink); border-radius:18px;
  overflow:hidden; background:var(--cream);
  box-shadow:var(--pop);
  transform:translateZ(30px) rotate(-2deg);
}
.logo-frame img{ width:100%; height:100%; object-fit:cover; }
.logo-frame__diag{
  position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(21,15,14,.14) 1.2px, transparent 1.3px);
  background-size:8px 8px;
  mix-blend-mode:multiply;
}
.burst{
  position:absolute; inset:-8%; z-index:0;
  background:repeating-conic-gradient(from 12deg at 50% 50%,
    rgba(255,255,255,.55) 0deg 7deg, transparent 7deg 16deg);
  animation:spin 40s linear infinite;
  border-radius:var(--radius);
}
.speech--hero{
  transform:translateZ(46px) rotate(1.5deg);
  font-family:"Bangers",cursive; letter-spacing:.05em; font-size:1.35rem;
  text-align:center; line-height:1.15;
}
.speech--hero b{ font-size:1.7rem; color:var(--coral); }

@media (max-width:960px){
  .deck{ grid-template-columns:1fr; }
  .panel--logo{ order:-1; }
  .sfx--1,.sfx--2{ display:none; }
}


/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee{
  position:relative; z-index:3;
  background:var(--ink); color:var(--yellow);
  border-top:var(--line) solid var(--ink);
  border-bottom:var(--line) solid var(--ink);
  overflow:hidden; padding:.6rem 0;
  transform:rotate(-1.4deg) scale(1.04);
  box-shadow:0 10px 0 rgba(232,48,91,.9);
  margin:2rem 0 3rem;
}
.marquee__track{
  display:flex; align-items:center; gap:2rem;
  width:max-content;
  animation:slide 34s linear infinite;
  font-family:"Luckiest Guy",cursive; letter-spacing:.12em; font-size:1.35rem;
  white-space:nowrap;
}
.marquee__track i{ color:var(--coral); font-size:1rem; }
@keyframes slide{ to{ transform:translateX(-50%); } }


/* ==========================================================================
   ABOUT — comic strip
   ========================================================================== */
.strip{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.4vw,2.2rem);
  align-items:center;
  transform-style:preserve-3d;
  margin-bottom:clamp(2.5rem,6vw,4.5rem);
}
.strip__panel{
  position:relative;
  background:var(--cream);
  border:var(--line) solid var(--ink);
  border-radius:18px;
  box-shadow:var(--pop);
  padding:.7rem .7rem 0;
  --tzb:0;
}
.strip__panel--tall{ --tzb:60; box-shadow:var(--pop-lg); }
.strip__num{
  position:absolute; top:-20px; left:-18px; z-index:3;
  width:52px; height:52px; display:grid; place-items:center;
  font-family:"Luckiest Guy",cursive; font-size:1.6rem;
  background:var(--yellow); color:var(--ink);
  border:var(--line) solid var(--ink); border-radius:50%;
  box-shadow:4px 4px 0 var(--ink);
  transform:translateZ(22px) rotate(-8deg);
}
.strip__img{
  position:relative; overflow:hidden;
  border:3px solid var(--ink); border-radius:12px;
  aspect-ratio:4/3; background:var(--paper);
}
.strip__panel--tall .strip__img{ aspect-ratio:3/4; }
.strip__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.strip__panel:hover .strip__img img{ transform:scale(1.07) rotate(1deg); }
.strip__img::after{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(21,15,14,.16) 1.2px, transparent 1.3px);
  background-size:8px 8px; mix-blend-mode:multiply; opacity:.5;
}
.strip__panel figcaption{
  font-family:"Bangers",cursive; letter-spacing:.04em; font-size:1.12rem; line-height:1.25;
  padding:.75rem .4rem .9rem; text-align:center;
}
.strip__panel figcaption b{ color:var(--pink); }

.about-grid{
  display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(1.5rem,3vw,3rem);
  align-items:start; transform-style:preserve-3d;
}
.speech--big{ --tzb:20; font-size:1.15rem; }
.speech--big p{ margin:0 0 .9rem; line-height:1.6; }
.speech__sign{ font-family:"Bangers",cursive; letter-spacing:.08em; color:var(--coral); font-size:1.2rem; }

.stats{ display:grid; gap:1rem; transform-style:preserve-3d; }
.stat{
  --tzb:10;
  display:grid; grid-template-columns:auto 1fr; align-items:center;
  column-gap:.9rem; row-gap:.1rem;
  background:var(--coral); color:var(--ink);
  border:var(--line) solid var(--ink); border-radius:18px;
  padding:.9rem 1.1rem;
  box-shadow:var(--pop-sm);
}
.stat i{ grid-row:span 2; font-size:1.8rem; }
.stat b{ font-family:"Luckiest Guy",cursive; font-size:1.25rem; letter-spacing:.03em; }
.stat span{ font-size:.95rem; opacity:.85; }
.stat--yellow{ background:var(--yellow); }
.stat--sky{ background:var(--sky); }

@media (max-width:900px){
  .strip{ grid-template-columns:1fr; }
  .about-grid{ grid-template-columns:1fr; }
}


/* ==========================================================================
   HOW TO BUY — 3D conveyor of steps
   ========================================================================== */
.page--buy{ }
.steps{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(.9rem,2vw,1.6rem);
  transform-style:preserve-3d;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.step{
  position:relative; --tzb:0;
  background:var(--cream);
  border:var(--line) solid var(--ink); border-radius:20px;
  padding:2.2rem 1.2rem 1.4rem;
  box-shadow:var(--pop);
  overflow:hidden;
}
.step::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(21,15,14,.13) 1.2px, transparent 1.3px);
  background-size:10px 10px; opacity:.6;
}
.step--yellow{ background:var(--yellow); }
.step--sky{ background:var(--sky); }
.step--pink{ background:var(--pink); color:var(--cream); }
.step--pink p{ color:rgba(255,249,240,.92); }

.step__n{
  position:absolute; top:-14px; right:-6px;
  font-family:"Luckiest Guy",cursive; font-size:4.2rem; line-height:1;
  color:transparent; -webkit-text-stroke:3px rgba(21,15,14,.35);
  transform:rotate(6deg); pointer-events:none;
}
.step h3{
  font-family:"Luckiest Guy",cursive; font-size:1.5rem; letter-spacing:.02em;
  margin:0 0 .55rem; position:relative;
}
.step p{ margin:0; font-size:1rem; line-height:1.5; position:relative; }
.step__ico{
  display:block; margin-top:1rem; font-size:1.9rem;
  position:relative; opacity:.9;
}
.step__link{
  position:relative; display:inline-flex; align-items:center; gap:.4rem;
  margin-top:.9rem;
  font-family:"Bangers",cursive; letter-spacing:.06em; font-size:1rem;
  background:var(--ink); color:var(--yellow);
  border-radius:999px; padding:.35rem .9rem; transition:.15s;
}
.step__link:hover{ background:var(--cream); color:var(--ink); box-shadow:3px 3px 0 var(--ink); }

.buy-foot{
  display:flex; align-items:center; justify-content:center; gap:clamp(1rem,3vw,2.5rem);
  transform-style:preserve-3d;
}
.buy-foot__cat{
  width:clamp(110px,15vw,190px); aspect-ratio:1/1; object-fit:cover;
  border:var(--line) solid var(--ink); border-radius:20px;
  box-shadow:var(--pop-sm);
}
.buy-foot__cat--l{ transform:rotate(-7deg); }
.buy-foot__cat--r{ transform:rotate(7deg); }

@media (max-width:1100px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){
  .steps{ grid-template-columns:1fr; }
  .buy-foot__cat{ display:none; }
}


/* ==========================================================================
   CHART — comic TV set
   ========================================================================== */
.tv{
  --tzb:0;
  max-width:1180px; margin:0 auto;
  background:var(--ink);
  border:var(--line) solid var(--ink);
  border-radius:26px;
  box-shadow:var(--pop-lg);
  overflow:hidden;
}
.tv__bar{
  display:flex; align-items:center; gap:.5rem;
  padding:.7rem 1rem;
  background:var(--coral);
  border-bottom:var(--line) solid var(--ink);
}
.tv__dot{ width:14px; height:14px; border-radius:50%; border:2.5px solid var(--ink); }
.tv__dot--r{ background:#FF5F57; }
.tv__dot--y{ background:var(--yellow); }
.tv__dot--g{ background:var(--mint); }
.tv__title{
  font-family:"Bangers",cursive; letter-spacing:.1em; font-size:1.05rem;
  margin-left:.6rem;
}
.tv__open{
  margin-left:auto;
  font-family:"Bangers",cursive; letter-spacing:.06em; font-size:.9rem;
  background:var(--ink); color:var(--yellow);
  border-radius:999px; padding:.25rem .8rem; transition:.15s;
}
.tv__open:hover{ background:var(--cream); color:var(--ink); }

.tv__screen{
  position:relative; background:#0B0B10;
  padding:10px;
}
.tv__embed{
  position:relative; width:100%; height:0;
  padding-bottom:62%;
  border-radius:14px; overflow:hidden;
  border:3px solid rgba(255,249,240,.15);
  background:#0B0B10;
}
.tv__embed iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.tv__embed .embed-fallback{
  position:absolute; inset:0; display:grid; place-content:center; gap:.6rem;
  text-align:center; color:var(--cream); padding:2rem;
  font-family:"Bangers",cursive; letter-spacing:.08em; font-size:1.3rem;
}
@media (max-width:768px){ .tv__embed{ padding-bottom:120%; } .tv__title{ font-size:.85rem; } }


/* ==========================================================================
   JOIN US — banner + socials
   ========================================================================== */
.page--join{ padding-bottom:clamp(4rem,8vh,6rem); }
.banner-frame{
  --tzb:30;
  position:relative;
  max-width:1180px; margin:0 auto clamp(2.5rem,5vw,4rem);
  border:6px solid var(--ink);
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--pop-lg);
  background:var(--ink);
}
.banner-frame img{ width:100%; display:block; }
.banner-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(21,15,14,.22) 1.3px, transparent 1.4px);
  background-size:9px 9px; mix-blend-mode:multiply; opacity:.35;
}
.banner-frame__tape{
  position:absolute; z-index:3; width:150px; height:38px;
  background:repeating-linear-gradient(45deg, rgba(255,201,60,.92) 0 9px, rgba(255,245,210,.92) 9px 18px);
  border:2px solid rgba(21,15,14,.5);
}
.banner-frame__tape--l{ top:-14px; left:-40px; transform:rotate(-22deg); }
.banner-frame__tape--r{ bottom:-14px; right:-40px; transform:rotate(-22deg); }

.socials{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(.9rem,2vw,1.6rem);
  transform-style:preserve-3d;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.social{
  --tzb:0;
  position:relative; display:flex; flex-direction:column; gap:.25rem;
  background:var(--cream);
  border:var(--line) solid var(--ink); border-radius:20px;
  padding:1.4rem 1.2rem;
  box-shadow:var(--pop);
  overflow:hidden;
}
.social::before{
  content:""; position:absolute; right:-30px; top:-30px;
  width:130px; height:130px; border-radius:50%;
  background:currentColor; opacity:.14;
}
.social__ico{
  width:58px; height:58px; display:grid; place-items:center;
  border:var(--line) solid var(--ink); border-radius:16px;
  font-size:1.7rem; margin-bottom:.6rem;
  box-shadow:4px 4px 0 var(--ink);
  background:var(--cream);
}
.social__ico svg{ width:32px; height:32px; }
.social b{ font-family:"Luckiest Guy",cursive; font-size:1.35rem; letter-spacing:.02em; }
.social__sub{ font-size:.98rem; opacity:.78; }
.social__go{
  margin-top:.9rem;
  font-family:"Bangers",cursive; letter-spacing:.08em; font-size:1.05rem;
  display:inline-flex; align-items:center; gap:.4rem;
}
.social:hover .social__go i{ transform:translateX(6px); transition:.2s; }

.social--x    { color:#0f0f0f; }
.social--x    .social__ico{ background:#111; color:#fff; }
.social--yt   { color:#FF0033; }
.social--yt   .social__ico{ background:#FF0033; color:#fff; }
.social--pump { color:#2ECC71; }
.social--pump .social__ico{ background:#2ECC71; color:#EAFBF1; }
.social--dex  { color:#6B5BD2; }
.social--dex  .social__ico{ background:#6B5BD2; color:#fff; }

.join-cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }

@media (max-width:1024px){ .socials{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .socials{ grid-template-columns:1fr; } }


/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{
  position:relative; z-index:2;
  background:var(--ink); color:var(--cream);
  border-top:var(--line) solid var(--ink);
  padding-top:3rem;
}
.foot__inner{
  max-width:1180px; margin:0 auto; padding:0 clamp(1rem,4vw,2rem) 2rem;
  display:grid; grid-template-columns:auto 1fr auto; gap:2rem; align-items:center;
}
.foot__brand{ display:flex; align-items:center; gap:.8rem; }
.foot__brand img{
  width:62px; height:62px; border-radius:50%;
  border:3px solid var(--cream); object-fit:cover;
}
.foot__brand b{ display:block; font-family:"Luckiest Guy",cursive; font-size:1.4rem; color:var(--yellow); }
.foot__brand span{ font-size:.95rem; opacity:.75; }
.foot__note{ margin:0; font-size:.95rem; line-height:1.55; opacity:.78; max-width:60ch; }
.foot__links{ display:flex; gap:.6rem; }
.foot__links a{
  width:46px; height:46px; display:grid; place-items:center;
  border:3px solid var(--cream); border-radius:50%; font-size:1.1rem;
  transition:.16s;
}
.foot__links a:hover{ background:var(--yellow); color:var(--ink); border-color:var(--yellow); transform:translateY(-3px); }
.foot__bar{
  border-top:2px solid rgba(255,249,240,.18);
  padding:1rem; text-align:center;
  font-family:"Bangers",cursive; letter-spacing:.12em; font-size:.95rem;
  color:rgba(255,249,240,.6);
}
@media (max-width:900px){
  .foot__inner{ grid-template-columns:1fr; text-align:center; justify-items:center; }
}


/* ==========================================================================
   TOAST
   ========================================================================== */
.toast{
  position:fixed; left:50%; bottom:34px; translate:-50% 0; z-index:90;
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--mint); color:var(--ink);
  border:var(--line) solid var(--ink); border-radius:999px;
  padding:.7rem 1.4rem;
  font-family:"Bangers",cursive; letter-spacing:.08em; font-size:1.1rem;
  box-shadow:var(--pop-sm);
  opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s;
  transform:translateY(20px);
}
.toast.is-on{ opacity:1; transform:translateY(0); }


/* ==========================================================================
   MOTION PREFERENCES
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}