/* =========================================================
   MARU CAT — comic / manga panel theme
   ========================================================= */

:root{
  --ink:      #17110c;
  --ink-2:    #241a12;
  --paper:    #f7e9cf;
  --paper-2:  #fff8ea;
  --orange:   #ff7a18;
  --orange-d: #d95a00;
  --red:      #e0392c;
  --gold:     #ffc233;
  --cream:    #ffe9c2;
  --green:    #5ee08a;
  --line:     4px;
  --r:        18px;
  --shadow:   10px 10px 0 var(--ink);
  --shadow-s: 6px 6px 0 var(--ink);
  --maxw:     1220px;
}

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

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

body{
  margin:0;
  font-family:'Nunito',system-ui,sans-serif;
  color:var(--paper);
  background:#100b07;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

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

.ic{ width:1.15em; height:1.15em; fill:none; stroke:none; flex:none; }
.ic--big{ width:2.2rem; height:2.2rem; }

/* ---------- fixed background stack ---------- */
.bg-stack{ position:fixed; inset:0; z-index:-2; overflow:hidden; background:#100b07; }

.bg-photo{
  position:absolute; inset:-8%;
  background:url('../../logo.png') center/cover no-repeat;
  filter:blur(26px) saturate(.7) brightness(.42);
  opacity:.65;
  transform:scale(1.15);
}
.bg-photo--2{
  background:url('../../5.png') center/cover no-repeat;
  filter:blur(48px) saturate(.6) brightness(.35);
  opacity:.45;
  mix-blend-mode:screen;
}
.bg-halftone{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,196,110,.16) 1.3px, transparent 1.4px);
  background-size:9px 9px;
  opacity:.9;
}
.bg-rays{
  position:absolute; inset:-30%;
  background:repeating-conic-gradient(from 0deg at 50% 45%,
    rgba(255,150,40,.055) 0deg 7deg, transparent 7deg 14deg);
  animation:spin 90s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.bg-vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,140,40,.16), transparent 60%),
    radial-gradient(100% 100% at 50% 50%, transparent 35%, rgba(8,5,3,.92) 100%);
}

/* ---------- shared type ---------- */
.stage{ perspective:1500px; perspective-origin:50% 45%; }

.sec{ position:relative; padding:clamp(70px,9vw,130px) 20px; }

.sec-head{ max-width:800px; margin:0 auto clamp(38px,5vw,60px); text-align:center; }
.chapter{
  display:inline-block; font-family:'Bangers',cursive; letter-spacing:3px;
  font-size:.95rem; color:var(--ink); background:var(--gold);
  border:3px solid var(--ink); border-radius:999px; padding:4px 18px 2px;
  box-shadow:4px 4px 0 var(--ink); transform:rotate(-2deg); margin-bottom:18px;
}
.chapter--light{ background:var(--orange); color:#fff; box-shadow:4px 4px 0 #000; border-color:#000; }

.sec-title{
  font-family:'Luckiest Guy',cursive; font-weight:400;
  font-size:clamp(2.2rem,6vw,4rem); line-height:1; letter-spacing:1px;
  margin:0 0 16px; color:var(--ink);
  text-shadow:3px 3px 0 var(--gold), 6px 6px 0 rgba(0,0,0,.18);
}
.sec-title em{ font-style:normal; color:var(--red); }
.sec-title--light{ color:#fff; text-shadow:3px 3px 0 var(--orange-d), 7px 7px 0 rgba(0,0,0,.55); }
.sec-title--light em{ color:var(--gold); }

.sec-sub{ font-size:clamp(1rem,1.6vw,1.12rem); line-height:1.65; color:#4a3524; margin:0; font-weight:600; }
.sec-sub--light{ color:#e9d6b8; }

/* paper sheet */
.paper{
  max-width:var(--maxw); margin:0 auto;
  background:
    radial-gradient(rgba(0,0,0,.05) 1px, transparent 1.2px) 0 0/7px 7px,
    linear-gradient(180deg,var(--paper-2),var(--paper));
  border:var(--line) solid var(--ink);
  border-radius:var(--r);
  box-shadow:14px 14px 0 rgba(0,0,0,.55), 0 0 0 8px rgba(255,255,255,.05);
  position:relative;
}
.paper::after{
  content:''; position:absolute; inset:10px; border:2px dashed rgba(23,17,12,.18);
  border-radius:calc(var(--r) - 6px); pointer-events:none;
}
.paper-inner{ padding:clamp(28px,4vw,58px); }
.paper--tilt{ transform:rotate(-.5deg); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Bangers',cursive; letter-spacing:1.6px; font-size:1.15rem;
  padding:13px 26px 10px; border:3px solid var(--ink); border-radius:14px;
  box-shadow:var(--shadow-s); cursor:pointer;
  transition:transform .13s ease, box-shadow .13s ease, filter .2s;
}
.btn:hover{ transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--ink); }
.btn:active{ transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink); }
.btn--pump{ background:linear-gradient(180deg,#7ff0a5,var(--green)); color:var(--ink); }
.btn--ghost{ background:var(--cream); color:var(--ink); }
.btn--ink{ background:var(--ink); color:var(--cream); border-color:#000; box-shadow:6px 6px 0 var(--orange-d); }
.btn--ink:hover{ box-shadow:9px 9px 0 var(--orange-d); }
.btn--lg{ font-size:1.45rem; padding:16px 34px 13px; }

/* =========================================================
   NAV
   ========================================================= */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:12px clamp(14px,3vw,34px);
  background:rgba(19,13,9,.72); backdrop-filter:blur(12px);
  border-bottom:3px solid #000;
  transition:background .3s, padding .3s;
}
.navbar.solid{ background:rgba(19,13,9,.94); box-shadow:0 6px 0 rgba(0,0,0,.35); }

.brand{ display:flex; align-items:center; gap:12px; }
.brand-badge{
  width:48px; height:48px; border-radius:50%; overflow:hidden;
  border:3px solid var(--ink); background:var(--gold);
  box-shadow:3px 3px 0 var(--orange-d); flex:none;
}
.brand-badge img{ width:100%; height:100%; object-fit:cover; }
.brand-badge--lg{ width:66px; height:66px; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-text b{ font-family:'Luckiest Guy',cursive; font-size:1.25rem; letter-spacing:1px; color:#fff; }
.brand-text i{ font-style:normal; font-family:'Bangers',cursive; font-size:.9rem; letter-spacing:2px; color:var(--gold); }

.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{
  font-family:'Bangers',cursive; letter-spacing:1.6px; font-size:1.05rem;
  padding:9px 15px 6px; border-radius:10px; color:#f3e2c6; transition:.18s;
}
.nav-links a:hover{ color:var(--ink); background:var(--gold); transform:rotate(-2deg); }
.nav-cta{
  background:var(--green); color:var(--ink)!important; border:3px solid #000;
  box-shadow:4px 4px 0 #000; display:inline-flex!important; align-items:center; gap:8px;
  margin-left:8px;
}
.nav-cta:hover{ background:#7ff0a5!important; transform:translate(-2px,-2px)!important; box-shadow:6px 6px 0 #000; }

.nav-toggle{
  display:none; background:var(--gold); color:var(--ink); border:3px solid #000;
  border-radius:10px; font-size:1.4rem; line-height:1; padding:6px 11px; cursor:pointer;
  box-shadow:3px 3px 0 #000;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding:120px 20px 70px; }
.hero-burst{
  position:absolute; left:50%; top:46%; width:min(1200px,120vw); aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 10deg at 50% 50%,
    rgba(255,194,51,.09) 0deg 5deg, transparent 5deg 12deg);
  filter:blur(.4px); animation:spin 60s linear infinite reverse; pointer-events:none;
}
.hero-inner{
  position:relative; width:100%; max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,70px); align-items:center;
}

.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Bangers',cursive; letter-spacing:2px; font-size:.95rem;
  background:var(--red); color:#fff; border:3px solid #000; border-radius:999px;
  padding:5px 16px 3px; box-shadow:4px 4px 0 #000; transform:rotate(-2deg); margin-bottom:20px;
}
.kicker .bi{ color:var(--gold); }

.hero-title{ margin:0 0 22px; font-family:'Luckiest Guy',cursive; font-weight:400; line-height:.82; }
.hero-title .line{ display:block; font-size:clamp(3.6rem,11vw,8.2rem); letter-spacing:2px; }
.hero-title .l1{
  color:var(--gold);
  text-shadow:-3px -3px 0 #000,3px -3px 0 #000,-3px 3px 0 #000,3px 3px 0 #000,
              9px 9px 0 var(--orange-d), 14px 14px 0 rgba(0,0,0,.6);
  transform:rotate(-2.5deg);
}
.hero-title .l2{
  color:#fff; margin-left:.14em;
  text-shadow:-3px -3px 0 #000,3px -3px 0 #000,-3px 3px 0 #000,3px 3px 0 #000,
              9px 9px 0 var(--red), 14px 14px 0 rgba(0,0,0,.6);
  transform:rotate(1.5deg);
}

/* speech bubble */
.bubble{
  position:relative; background:var(--paper-2); color:var(--ink);
  border:var(--line) solid var(--ink); border-radius:22px;
  padding:18px 22px; max-width:540px; box-shadow:var(--shadow-s);
  font-weight:700; line-height:1.6;
}
.bubble p{ margin:0; }
.bubble--tail::after{
  content:''; position:absolute; left:44px; bottom:-22px;
  border:12px solid transparent; border-top-color:var(--ink); border-right-width:20px;
}
.bubble--tail::before{
  content:''; position:absolute; left:50px; bottom:-13px; z-index:1;
  border:9px solid transparent; border-top-color:var(--paper-2); border-right-width:15px;
}

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

/* CA strip */
.ca-strip{
  display:inline-flex; align-items:center; gap:12px; max-width:100%;
  background:rgba(255,244,224,.08); border:3px dashed rgba(255,222,170,.5);
  border-radius:14px; padding:9px 14px; cursor:pointer; transition:.2s;
}
.ca-strip:hover{ background:rgba(255,244,224,.16); border-color:var(--gold); }
.ca-label{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Bangers',cursive; letter-spacing:1.5px; color:var(--ink);
  background:var(--gold); border-radius:8px; padding:3px 10px 1px; flex:none;
}
.ca-label .ic{ color:var(--ink); }
.ca-value{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.86rem; color:#ffe4bb;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ca-copy{ color:var(--gold); font-size:1.05rem; flex:none; }

/* 3D panel deck */
.hero-art{ display:flex; justify-content:center; }
.panel-deck{
  position:relative; width:min(430px,88vw); aspect-ratio:1/1.06;
  transform-style:preserve-3d;
  transform:rotateY(-16deg) rotateX(7deg);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.pdeck{
  position:absolute; border:var(--line) solid var(--ink); border-radius:14px;
  overflow:hidden; background:var(--paper-2); box-shadow:14px 18px 34px rgba(0,0,0,.6);
}
.pdeck img{ width:100%; height:100%; object-fit:cover; }
.pdeck--back{ inset:-6% 34% 46% -12%; transform:translateZ(-90px) rotate(-9deg); }
.pdeck--mid{ inset:46% -10% -8% 40%; transform:translateZ(-45px) rotate(7deg); }
.pdeck--front{ inset:6% 6% 6% 6%; transform:translateZ(60px) rotate(-2deg); }
.pdeck-tag{
  position:absolute; left:0; bottom:0; font-family:'Bangers',cursive; letter-spacing:2px;
  background:var(--ink); color:var(--gold); padding:6px 16px 4px; border-top-right-radius:12px;
}

.sfx{
  position:absolute; font-family:'Luckiest Guy',cursive; color:var(--gold);
  -webkit-text-stroke:2.5px #000; font-size:2.1rem; letter-spacing:1px;
  filter:drop-shadow(4px 5px 0 rgba(0,0,0,.7));
}
.sfx--1{ top:-4%; right:2%; transform:translateZ(120px) rotate(11deg); }
.sfx--2{ bottom:2%; left:-6%; color:#fff; font-size:1.6rem; transform:translateZ(100px) rotate(-9deg); }

.scroll-hint{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  color:var(--gold); font-size:1.6rem; animation:bob 1.8s ease-in-out infinite;
}
@keyframes bob{ 50%{ transform:translate(-50%,10px); } }

/* =========================================================
   FILM REEL
   ========================================================= */
.reel{
  position:relative; overflow:hidden; padding:16px 0;
  background:linear-gradient(180deg,#0d0906,#1b120b,#0d0906);
  border-top:4px solid #000; border-bottom:4px solid #000;
  transform:rotate(-1.2deg) scale(1.03); margin:30px 0;
}
.reel::before,.reel::after{
  content:''; position:absolute; left:0; right:0; height:12px;
  background:repeating-linear-gradient(90deg,#000 0 12px,transparent 12px 30px);
  opacity:.85;
}
.reel::before{ top:0; } .reel::after{ bottom:0; }
.reel-track{ display:flex; gap:14px; width:max-content; animation:slide 44s linear infinite; padding:12px 0; }
.reel:hover .reel-track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.reel figure{
  margin:0; width:150px; flex:none; border:3px solid #000; border-radius:10px;
  overflow:hidden; background:var(--paper); box-shadow:5px 5px 0 rgba(0,0,0,.5);
  transform:rotate(var(--rot,0deg));
}
.reel figure:nth-child(even){ --rot:1.6deg; }
.reel figure:nth-child(odd){ --rot:-1.6deg; }
.reel figure img{ width:100%; height:110px; object-fit:cover; }
.reel figcaption{
  font-family:'Bangers',cursive; letter-spacing:1.4px; font-size:.8rem;
  color:var(--ink); text-align:center; padding:4px 2px 2px; background:var(--gold);
}

/* =========================================================
   ABOUT
   ========================================================= */
.strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.6vw,34px);
  margin:clamp(34px,5vw,54px) 0;
}
.cpanel{
  position:relative; background:var(--paper-2); border:var(--line) solid var(--ink);
  border-radius:14px; padding:14px 14px 16px; box-shadow:var(--shadow-s);
  transform-style:preserve-3d;
  transform:rotateY(calc((var(--i) - 1) * 9deg)) rotate(calc((var(--i) - 1) * 1.4deg)) translateZ(0);
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.cpanel:hover{ transform:rotateY(0deg) rotate(0deg) translateZ(46px); box-shadow:16px 20px 0 rgba(0,0,0,.35); }
.cnum{
  position:absolute; top:-16px; left:-16px; width:44px; height:44px; z-index:2;
  display:grid; place-items:center; font-family:'Luckiest Guy',cursive; font-size:1.3rem;
  color:#fff; background:var(--red); border:3px solid var(--ink); border-radius:50%;
  box-shadow:3px 3px 0 var(--ink);
}
.cframe{ border:3px solid var(--ink); border-radius:9px; overflow:hidden; background:#000; }
.cframe img{ width:100%; height:250px; object-fit:cover; transition:transform .5s; }
.cpanel:hover .cframe img{ transform:scale(1.07); }
.ccap{
  margin-top:12px; color:var(--ink); font-size:.94rem; line-height:1.5; font-weight:600;
  background:var(--cream); border:2px solid var(--ink); border-radius:8px; padding:9px 11px;
}
.ccap b{ font-family:'Bangers',cursive; letter-spacing:1.2px; font-size:1.05rem; color:var(--orange-d); }

.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  background:var(--ink); border-radius:14px; padding:18px; border:3px solid #000;
}
.stat{ text-align:center; padding:8px 6px; border-right:2px dashed rgba(255,222,170,.25); }
.stat:last-child{ border-right:0; }
.stat b{ display:block; font-family:'Luckiest Guy',cursive; font-size:clamp(1.5rem,3vw,2.2rem); color:var(--gold); }
.stat span{ font-size:.8rem; letter-spacing:1.4px; text-transform:uppercase; color:#e3cba6; font-weight:700; }

/* =========================================================
   HOW TO BUY
   ========================================================= */
.buy{ overflow:hidden; }
.grid-floor{
  position:absolute; left:-20%; right:-20%; bottom:0; height:60%;
  background-image:
    linear-gradient(rgba(255,180,80,.22) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,180,80,.22) 2px, transparent 2px);
  background-size:70px 70px;
  transform:perspective(520px) rotateX(66deg);
  transform-origin:bottom center;
  mask-image:linear-gradient(transparent, #000 45%, transparent 95%);
  -webkit-mask-image:linear-gradient(transparent, #000 45%, transparent 95%);
  pointer-events:none;
}
.steps{
  position:relative; z-index:2; max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,26px);
}
.step{
  position:relative; background:var(--paper-2); color:var(--ink);
  border:var(--line) solid var(--ink); border-radius:16px; padding:30px 20px 22px;
  box-shadow:var(--shadow-s);
  transform:rotate(calc((var(--i) - 1.5) * 1.6deg)) translateY(calc(var(--i) * 14px));
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.step:hover{ transform:rotate(0deg) translateY(calc(var(--i) * 14px - 12px)) scale(1.03); box-shadow:14px 16px 0 rgba(0,0,0,.45); }
.step-badge{
  position:absolute; top:-22px; left:18px;
  font-family:'Luckiest Guy',cursive; font-size:1.35rem; color:var(--ink);
  background:var(--gold); border:3px solid var(--ink); border-radius:10px;
  padding:5px 14px 3px; box-shadow:4px 4px 0 var(--ink); transform:rotate(-4deg);
}
.step h3{
  display:flex; align-items:center; gap:9px; margin:6px 0 10px;
  font-family:'Bangers',cursive; letter-spacing:1.4px; font-size:1.35rem; color:var(--orange-d);
}
.step h3 .bi{ color:var(--red); }
.step p{ margin:0; font-size:.95rem; line-height:1.6; font-weight:600; color:#41301f; }
.step-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  font-family:'Bangers',cursive; letter-spacing:1.2px; color:var(--ink);
  background:var(--green); border:2px solid var(--ink); border-radius:8px;
  padding:5px 12px 3px; box-shadow:3px 3px 0 var(--ink); transition:.15s;
}
.step-link:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }

.buy-sticker{
  position:absolute; width:clamp(120px,15vw,210px); border:4px solid #000; border-radius:14px;
  box-shadow:10px 12px 0 rgba(0,0,0,.55); opacity:.9; pointer-events:none; z-index:1;
}
.buy-sticker--a{ left:-40px; top:14%; transform:rotate(-9deg); }
.buy-sticker--b{ right:-46px; bottom:16%; transform:rotate(8deg); }

.buy-cta{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:clamp(56px,7vw,86px); position:relative; z-index:3; }

/* =========================================================
   CHART
   ========================================================= */
.tv{
  max-width:1020px; margin:0 auto;
  border:var(--line) solid var(--ink); border-radius:18px; overflow:hidden;
  background:var(--ink); box-shadow:14px 16px 0 rgba(0,0,0,.45);
  transform:rotateX(4deg); transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.tv:hover{ transform:rotateX(0deg); }
.tv-bar{
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  background:linear-gradient(180deg,#2c2016,#1a120c); border-bottom:3px solid #000;
}
.dots{ display:flex; gap:6px; }
.dots i{ width:11px; height:11px; border-radius:50%; background:var(--red); border:2px solid #000; }
.dots i:nth-child(2){ background:var(--gold); }
.dots i:nth-child(3){ background:var(--green); }
.tv-title{
  display:flex; align-items:center; gap:8px;
  font-family:'Bangers',cursive; letter-spacing:2px; color:#ffe4bb; font-size:.95rem;
}
.tv-open{
  margin-left:auto; font-family:'Bangers',cursive; letter-spacing:1.4px; font-size:.9rem;
  background:var(--gold); color:var(--ink); border:2px solid #000; border-radius:8px;
  padding:4px 12px 2px; box-shadow:3px 3px 0 #000; transition:.15s;
}
.tv-open:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 #000; }
.tv-screen{ position:relative; height:min(72vh,640px); background:#0a0f16; }
.tv-screen iframe{ width:100%; height:100%; border:0; display:block; }
.tv-placeholder{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:10px;
  text-align:center; padding:20px; background:#0a0f16;
}
.tv-placeholder img{ width:120px; height:120px; object-fit:cover; border-radius:50%; border:4px solid var(--gold); }
.tv-placeholder b{ font-family:'Luckiest Guy',cursive; font-size:1.4rem; color:var(--gold); letter-spacing:1px; }
.tv-placeholder span{ color:#c9b391; font-size:.9rem; }
.tv-placeholder code{ background:rgba(255,255,255,.09); padding:2px 6px; border-radius:5px; color:var(--green); }

/* =========================================================
   JOIN US
   ========================================================= */
.join{ overflow:hidden; }
.banner-wrap{ position:relative; max-width:960px; margin:0 auto clamp(46px,6vw,70px); }
.banner-frame{
  border:6px solid var(--ink); border-radius:18px; overflow:hidden; background:var(--paper);
  box-shadow:0 0 0 4px var(--gold), 18px 20px 0 rgba(0,0,0,.55);
  transform:rotateX(9deg) rotateY(-5deg) rotate(-1.4deg);
  transform-style:preserve-3d; transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.banner-wrap:hover .banner-frame{ transform:rotateX(0deg) rotateY(0deg) rotate(0deg) scale(1.015); }
.banner-frame img{ width:100%; }
.banner-shadow{
  position:absolute; left:8%; right:8%; bottom:-34px; height:44px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 70%); filter:blur(6px);
}

.socials{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,24px);
}
.soc{
  display:grid; justify-items:center; gap:6px; text-align:center;
  padding:26px 16px 20px; border:var(--line) solid var(--ink); border-radius:16px;
  background:var(--paper-2); color:var(--ink); box-shadow:var(--shadow-s);
  transform:rotate(calc((var(--i) - 1.5) * 2deg));
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .3s, background .3s;
}
.soc:hover{ transform:rotate(0deg) translateY(-8px) scale(1.04); box-shadow:14px 16px 0 rgba(0,0,0,.45); }
.soc .bi{ font-size:2.3rem; }
.soc b{ font-family:'Bangers',cursive; letter-spacing:1.8px; font-size:1.15rem; }
.soc span{ font-size:.82rem; font-weight:700; color:#6b5236; }
.soc--x:hover{ background:#111; color:#fff; }
.soc--x:hover span{ color:#bbb; }
.soc--tg .bi{ color:#229ED9; }
.soc--tg:hover{ background:#229ED9; color:#fff; }
.soc--tg:hover .bi{ color:#fff; }
.soc--tg:hover span{ color:#e0f2fb; }
.soc--pf:hover{ background:var(--green); }
.soc--ds:hover{ background:var(--gold); }

/* =========================================================
   FOOTER
   ========================================================= */
.foot{
  position:relative; background:linear-gradient(180deg,#150e09,#080504);
  border-top:5px solid #000; padding:clamp(40px,5vw,64px) 20px 30px; text-align:center;
}
.foot-top{
  max-width:var(--maxw); margin:0 auto clamp(26px,3vw,38px);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.foot-brand{ display:flex; align-items:center; gap:14px; text-align:left; }
.foot-brand b{ display:block; font-family:'Luckiest Guy',cursive; font-size:1.4rem; color:#fff; letter-spacing:1px; }
.foot-brand span{ font-family:'Bangers',cursive; letter-spacing:2px; color:var(--gold); font-size:.9rem; }

.foot-ca{
  display:flex; align-items:center; gap:10px; max-width:min(460px,90vw); cursor:pointer;
  background:rgba(255,244,224,.07); border:2px dashed rgba(255,222,170,.45);
  border-radius:12px; padding:8px 12px; transition:.2s;
}
.foot-ca:hover{ border-color:var(--gold); background:rgba(255,244,224,.14); }
.foot-ca .ca-label{ font-size:.8rem; }

.foot-soc{ display:flex; gap:10px; }
.foot-soc a{
  width:46px; height:46px; display:grid; place-items:center; font-size:1.3rem;
  color:var(--ink); background:var(--gold); border:3px solid #000; border-radius:12px;
  box-shadow:4px 4px 0 #000; transition:.15s;
}
.foot-soc a:hover{ transform:translate(-2px,-2px) rotate(-4deg); box-shadow:6px 6px 0 #000; background:var(--orange); }

.foot-note{ max-width:760px; margin:0 auto 12px; color:#9a866c; font-size:.83rem; line-height:1.6; }
.foot-copy{ margin:0; color:#6d5b46; font-family:'Bangers',cursive; letter-spacing:1.6px; }

/* toast */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,140%);
  display:flex; align-items:center; gap:9px; z-index:99;
  background:var(--green); color:var(--ink); border:3px solid #000; border-radius:12px;
  padding:11px 20px 9px; box-shadow:6px 6px 0 #000;
  font-family:'Bangers',cursive; letter-spacing:1.5px;
  transition:transform .35s cubic-bezier(.2,1.3,.4,1);
}
.toast.show{ transform:translate(-50%,0); }

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

/* elements that own a resting transform keep it — only fade + lift */
.cpanel.reveal{ opacity:0; transform:rotateY(calc((var(--i) - 1) * 9deg)) rotate(calc((var(--i) - 1) * 1.4deg)) translateY(44px); }
.cpanel.reveal.in{ opacity:1; transform:rotateY(calc((var(--i) - 1) * 9deg)) rotate(calc((var(--i) - 1) * 1.4deg)) translateZ(0); }

.step.reveal{ opacity:0; transform:rotate(calc((var(--i) - 1.5) * 1.6deg)) translateY(calc(var(--i) * 14px + 44px)); }
.step.reveal.in{ opacity:1; transform:rotate(calc((var(--i) - 1.5) * 1.6deg)) translateY(calc(var(--i) * 14px)); }

.soc.reveal{ opacity:0; transform:rotate(calc((var(--i) - 1.5) * 2deg)) translateY(40px); }
.soc.reveal.in{ opacity:1; transform:rotate(calc((var(--i) - 1.5) * 2deg)); }

.hero-art.reveal{ opacity:0; transform:translateY(30px); }
.hero-art.reveal.in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .hero-inner{ grid-template-columns:1fr; text-align:center; }
  .hero-copy{ display:flex; flex-direction:column; align-items:center; }
  .bubble--tail::after,.bubble--tail::before{ display:none; }
  .hero-btns{ justify-content:center; }
  .hero-art{ margin-top:40px; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .step, .step.reveal.in{ transform:rotate(calc((var(--i) - 1.5) * 1.2deg)); }
  .socials{ grid-template-columns:repeat(2,1fr); }
  .buy-sticker{ display:none; }
}

@media (max-width:820px){
  .nav-links{
    position:fixed; top:74px; right:12px; left:12px;
    flex-direction:column; align-items:stretch; gap:8px; padding:16px;
    background:rgba(21,14,9,.98); border:3px solid #000; border-radius:16px;
    box-shadow:8px 8px 0 rgba(0,0,0,.5);
    transform:translateY(-14px) scale(.98); opacity:0; pointer-events:none; transition:.25s;
  }
  .nav-links.open{ transform:none; opacity:1; pointer-events:auto; }
  .nav-links a{ text-align:center; }
  .nav-toggle{ display:block; }
  .strip{ grid-template-columns:1fr; }
  .cpanel, .cpanel.reveal.in{ transform:none; }
  .cpanel.reveal{ transform:translateY(40px); }
  .cframe img{ height:290px; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2n){ border-right:0; }
  .paper--tilt{ transform:none; }
}

@media (max-width:560px){
  .hero{ padding-top:104px; }
  .steps{ grid-template-columns:1fr; }
  .step, .step.reveal.in{ transform:none; }
  .step.reveal{ transform:translateY(40px); }
  .step:hover{ transform:scale(1.02); }
  .socials{ grid-template-columns:1fr; }
  .soc, .soc.reveal.in{ transform:none; }
  .soc.reveal{ transform:translateY(40px); }
  .stats{ grid-template-columns:1fr; }
  .stat{ border-right:0; border-bottom:2px dashed rgba(255,222,170,.25); }
  .stat:last-child{ border-bottom:0; }
  .btn{ font-size:1rem; padding:12px 20px 9px; }
  .btn--lg{ font-size:1.2rem; }
  .foot-top{ flex-direction:column; }
  .reel figure{ width:120px; }
  .reel figure img{ height:90px; }
  .tv-screen{ height:70vh; }
}

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