/* ========================================
   HYPE BAM — Brand site
   ======================================== */

:root{
  --ink:#0a0a0a;
  --paper:#fff8e6;
  --yellow:#ffd60a;
  --yellow-2:#ffb800;
  --orange:#ff6a00;
  --orange-2:#ff3d00;
  --red:#e6002e;
  --pink:#ff2e63;
  --green:#3eb500;
  --lime:#caff33;
  --purple:#7a1fff;

  --bg:#10080a;
  --bg-2:#1a0d05;

  --font-display:'Bangers', 'Anton', system-ui, sans-serif;
  --font-marker:'Permanent Marker', cursive;
  --font-body:'Inter', system-ui, sans-serif;

  --max:1320px;
  --r:18px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ width:100%; overflow-x:hidden; }
html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-body);
  color:var(--paper);
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(255,106,0,.35), transparent 60%),
    radial-gradient(900px 700px at -10% 30%, rgba(230,0,46,.25), transparent 60%),
    radial-gradient(800px 600px at 100% 80%, rgba(122,31,255,.18), transparent 60%),
    linear-gradient(180deg, #0a0506 0%, #160a04 30%, #0c0407 100%);
  min-height:100vh;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; background:none; border:none; color:inherit; cursor:pointer; }

/* ---------- 3D canvas ---------- */
#bg-canvas{
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:0; pointer-events:none;
}

/* ---------- Grain + halftone overlay ---------- */
.grain{
  position:fixed; inset:-50%; z-index:1; pointer-events:none;
  opacity:.08; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.9'/></svg>");
}
.halftone{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:radial-gradient(circle at center, rgba(255,255,255,.06) 1px, transparent 1.5px);
  background-size:10px 10px;
  mix-blend-mode:overlay; opacity:.35;
}

/* ---------- Loader ---------- */
#loader{
  position:fixed; inset:0; z-index:9999;
  background:linear-gradient(160deg,#ff3d00 0%, #ff6a00 50%, #ffb800 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:24px; transition:opacity .6s ease, visibility .6s;
}
#loader.done{ opacity:0; visibility:hidden; }
.loader-logo{
  font-family:var(--font-display);
  font-size:clamp(60px, 12vw, 140px);
  color:#0a0a0a; letter-spacing:2px;
  transform:rotate(-4deg) skewX(-6deg);
  text-shadow:6px 6px 0 #fff8e6;
}
.loader-logo span{ color:#fff8e6; text-shadow:6px 6px 0 #0a0a0a; }
.loader-logo i{ font-style:normal; display:inline-block; transform:rotate(8deg); }
.loader-bar{
  width:280px; max-width:60vw; height:6px;
  background:rgba(0,0,0,.25); border-radius:99px; overflow:hidden;
}
.loader-bar span{
  display:block; width:0%; height:100%;
  background:#0a0a0a; animation:load 1.4s ease-out forwards;
}
@keyframes load{ to { width:100%; } }
.loader-tag{
  font-family:var(--font-marker);
  color:#0a0a0a; letter-spacing:6px; font-size:14px;
}

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 36px;
  backdrop-filter:blur(10px);
  background:linear-gradient(180deg, rgba(10,5,6,.6), rgba(10,5,6,0));
  transition:padding .3s ease, background .3s ease;
}
.nav.scrolled{
  padding:12px 36px;
  background:rgba(10,5,6,.85);
  border-bottom:1px solid rgba(255,214,10,.15);
}
.nav-logo img{
  height:46px; width:46px; border-radius:10px;
  border:2px solid var(--yellow);
  transform:rotate(-6deg);
  transition:transform .3s;
}
.nav-logo:hover img{ transform:rotate(6deg) scale(1.05); }
.nav-links{
  display:flex; gap:32px;
  font-family:var(--font-display); letter-spacing:3px;
  font-size:18px;
}
.nav-links a{
  position:relative; padding:6px 0;
  transition:color .25s;
}
.nav-links a:hover{ color:var(--yellow); }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:0; height:3px; background:var(--yellow);
  transition:width .3s ease;
}
.nav-links a:hover::after{ width:100%; }
.nav-cta{
  background:var(--yellow);
  color:#0a0a0a;
  padding:12px 22px; border-radius:99px;
  font-family:var(--font-display); letter-spacing:2px; font-size:16px;
  border:2px solid #0a0a0a;
  box-shadow:4px 4px 0 #0a0a0a;
  transition:transform .2s, box-shadow .2s;
}
.nav-cta:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 #0a0a0a; }
.nav-burger{ display:none; flex-direction:column; gap:5px; }
.nav-burger span{ width:26px; height:3px; background:var(--paper); border-radius:2px; }

/* ---------- HERO ---------- */
.hero{
  position:relative; z-index:2;
  min-height:100vh;
  padding:120px 36px 60px;
  display:flex; flex-direction:column; justify-content:center;
}
.hero-bg-text{
  position:absolute; inset:0; z-index:-1;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden; pointer-events:none;
}
.marquee{
  font-family:var(--font-display);
  font-size:clamp(80px,18vw,260px);
  color:transparent;
  -webkit-text-stroke:2px rgba(255,214,10,.12);
  white-space:nowrap;
  display:flex;
  animation:marqueeMove 40s linear infinite;
}
.marquee span{ padding:0 30px; }
@keyframes marqueeMove{
  to{ transform:translateX(-50%); }
}
.hero-grid{
  max-width:var(--max); margin:0 auto; width:100%;
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:40px; align-items:center;
}
.eyebrow{
  font-family:var(--font-marker);
  color:var(--yellow);
  letter-spacing:4px;
  font-size:14px;
  margin-bottom:16px;
}
.hero-title{
  font-family:var(--font-display);
  font-size:clamp(70px, 11vw, 180px);
  line-height:.85;
  letter-spacing:1px;
  text-transform:uppercase;
}
.hero-title .line{ display:block; transform-origin:left; }
.hero-title .line:nth-child(1){
  color:var(--yellow);
  text-shadow:8px 8px 0 var(--red), 16px 16px 0 #0a0a0a;
  transform:rotate(-2deg) skewX(-4deg);
}
.hero-title .line.outline{
  color:transparent;
  -webkit-text-stroke:3px var(--paper);
  transform:rotate(1deg);
  margin-left:8%;
}
.hero-title .line.stamp{
  color:var(--paper);
  background:linear-gradient(135deg, var(--orange), var(--red));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
  transform:rotate(-3deg) skewX(-6deg);
}
.hero-sub{
  max-width:520px;
  margin-top:24px; font-size:18px;
  color:#f2e6c8; opacity:.95;
}
.hero-sub em{ color:var(--yellow); font-style:normal; }
.hero-sub strong{
  display:inline-block; margin-top:6px;
  font-family:var(--font-marker); font-weight:normal;
  color:var(--yellow); letter-spacing:2px;
}
.hero-cta{
  display:flex; gap:16px; margin-top:32px; flex-wrap:wrap;
}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 28px; border-radius:99px;
  font-family:var(--font-display); letter-spacing:3px; font-size:18px;
  border:2px solid #0a0a0a;
  transition:transform .2s, box-shadow .2s, background .2s;
}
.btn i{ font-style:normal; transition:transform .25s; }
.btn:hover i{ transform:translateX(6px); }
.btn-primary{
  background:var(--yellow); color:#0a0a0a;
  box-shadow:5px 5px 0 #0a0a0a;
}
.btn-primary:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 #0a0a0a; }
.btn-ghost{
  background:transparent; color:var(--paper);
  border:2px solid var(--paper);
  box-shadow:none;
}
.btn-ghost:hover{ background:var(--paper); color:#0a0a0a; }
.btn.big{ padding:22px 40px; font-size:24px; }

.hero-stats{
  display:flex; gap:32px; margin-top:48px;
  flex-wrap:wrap;
}
.hero-stats > div{
  display:flex; flex-direction:column; gap:2px;
}
.hero-stats b{
  font-family:var(--font-display);
  font-size:42px; color:var(--yellow);
  line-height:1;
}
.hero-stats b i{ font-style:normal; font-size:22px; opacity:.7; }
.hero-stats small{
  font-family:var(--font-marker);
  letter-spacing:3px; font-size:11px; opacity:.7;
}

/* Hero can */
.hero-right{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:600px;
}
.can-3d{
  position:relative; z-index:3;
  width:min(420px, 90%);
  transform-style:preserve-3d;
  animation:floatCan 5s ease-in-out infinite;
  filter:drop-shadow(0 30px 50px rgba(255,90,30,.4)) drop-shadow(0 0 80px rgba(255,214,10,.3));
}
.can-3d .can-img{
  width:100%; height:auto;
  transform:rotate(-8deg);
  transition:transform .8s ease;
  border-radius:24px;
}
.can-3d:hover .can-img{ transform:rotate(6deg) scale(1.05); }
.can-glow{
  position:absolute; inset:-20%;
  background:radial-gradient(circle at center, rgba(255,214,10,.3), transparent 60%);
  filter:blur(40px); z-index:-1;
  animation:pulse 3s ease-in-out infinite;
}
.can-shadow{
  position:absolute; left:10%; right:10%; bottom:-30px;
  height:30px;
  background:radial-gradient(ellipse, rgba(0,0,0,.7), transparent 70%);
  filter:blur(8px); z-index:-2;
  animation:shadowPulse 5s ease-in-out infinite;
}
@keyframes floatCan{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-20px) rotate(2deg); }
}
@keyframes pulse{
  0%,100%{ opacity:.7; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.1); }
}
@keyframes shadowPulse{
  0%,100%{ transform:scaleX(1); opacity:.7; }
  50%{ transform:scaleX(.85); opacity:.5; }
}
.hero-splash{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.hero-splash svg{
  width:90%; height:auto;
  animation:spin 28s linear infinite;
  opacity:.7;
}
.hero-splash path{
  fill:none;
  stroke:var(--yellow);
  stroke-width:3;
  stroke-dasharray:6 12;
}
@keyframes spin{
  to{ transform:rotate(360deg); }
}

.scroll-indicator{
  position:absolute; bottom:24px; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--font-marker); letter-spacing:4px; font-size:11px;
  opacity:.7;
}
.scroll-line{
  width:2px; height:40px; background:var(--paper);
  position:relative; overflow:hidden;
}
.scroll-line::after{
  content:""; position:absolute; left:0; right:0; top:-100%; height:50%;
  background:var(--yellow);
  animation:scrollDown 1.6s ease-in-out infinite;
}
@keyframes scrollDown{
  to{ top:120%; }
}

/* ---------- MARQUEE BAND ---------- */
.marquee-band{
  position:relative; z-index:2;
  background:var(--yellow);
  color:#0a0a0a;
  padding:18px 0;
  border-top:3px solid #0a0a0a;
  border-bottom:3px solid #0a0a0a;
  overflow:hidden;
  transform:rotate(-1.5deg);
  margin:40px 0;
}
.marquee-track{
  display:flex; gap:60px;
  font-family:var(--font-display);
  font-size:32px; letter-spacing:3px;
  white-space:nowrap;
  animation:marqueeMove 28s linear infinite;
}
.marquee-track span{ flex-shrink:0; }

/* ---------- STORY ---------- */
.story{
  position:relative; z-index:2;
  padding:80px 36px;
  max-width:var(--max); margin:0 auto;
}
.story-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:60px; align-items:center;
}
.section-title{
  font-family:var(--font-display);
  font-size:clamp(48px, 7vw, 100px);
  line-height:.95;
  letter-spacing:1px;
  text-transform:uppercase;
}
.section-title.big{ font-size:clamp(60px, 9vw, 140px); }
.hl{
  color:var(--yellow);
  text-shadow:5px 5px 0 var(--red);
  display:inline-block;
  transform:rotate(-2deg) skewX(-4deg);
}
.hl.alt{
  color:var(--orange);
  text-shadow:5px 5px 0 var(--yellow);
}
.outline2{
  color:transparent;
  -webkit-text-stroke:3px var(--yellow);
}
.story-body{
  margin-top:20px; font-size:17px;
  color:#f2e6c8; max-width:520px;
}
.story-body strong{ color:var(--yellow); }
.badge-row{
  display:flex; gap:16px; margin-top:32px; flex-wrap:wrap;
}
.badge{
  background:var(--yellow); color:#0a0a0a;
  padding:14px 20px; border-radius:14px;
  border:2px solid #0a0a0a;
  box-shadow:4px 4px 0 #0a0a0a;
  transform:rotate(-2deg);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:90px;
}
.badge b{ font-family:var(--font-display); font-size:24px; letter-spacing:2px; }
.badge span{ font-size:10px; letter-spacing:2px; }
.badge.alt{ background:var(--orange); color:var(--paper); transform:rotate(3deg); }
.badge.alt2{ background:var(--red); color:var(--paper); transform:rotate(-1deg); }

.story-visual{
  position:relative;
  perspective:1200px;
}
.poster{
  position:relative;
  border-radius:24px; overflow:hidden;
  transform:rotate(2deg);
  box-shadow:0 30px 60px rgba(0,0,0,.5), 0 0 0 6px var(--yellow), 0 0 0 9px #0a0a0a;
  transition:transform .6s ease;
}
.poster:hover{ transform:rotate(-2deg) scale(1.02); }
.poster img{ width:100%; }

/* ---------- FLAVORS ---------- */
.flavors{
  position:relative; z-index:2;
  padding:80px 36px 120px;
  max-width:var(--max); margin:0 auto;
}
.flavors-head{ text-align:center; margin-bottom:48px; }
.flavors-sub{
  font-family:var(--font-marker);
  color:#f2e6c8; opacity:.7;
  letter-spacing:3px; margin-top:18px;
  font-size:14px;
}
.flavor-tabs{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px; margin-bottom:48px;
}
.tab{
  padding:12px 22px;
  font-family:var(--font-display); letter-spacing:2px; font-size:16px;
  background:transparent; color:var(--paper);
  border:2px solid rgba(255,248,230,.3);
  border-radius:99px;
  transition:all .25s;
}
.tab:hover{ border-color:var(--yellow); color:var(--yellow); }
.tab.active{
  background:var(--yellow);
  color:#0a0a0a;
  border-color:#0a0a0a;
  box-shadow:3px 3px 0 #0a0a0a;
}

/* Stage wrap with arrow buttons */
.flavor-stage-wrap{
  position:relative;
}
.flavor-nav{
  position:absolute;
  top:50%; transform:translateY(-50%);
  z-index:20;
  width:58px; height:58px;
  display:flex; align-items:center; justify-content:center;
  background:var(--yellow);
  color:#0a0a0a;
  border:2px solid #0a0a0a;
  border-radius:50%;
  box-shadow:5px 5px 0 #0a0a0a;
  transition:transform .2s, box-shadow .2s, background .2s;
}
.flavor-nav:hover{
  background:var(--paper);
  transform:translateY(-50%) scale(1.08);
  box-shadow:7px 7px 0 #0a0a0a;
}
.flavor-nav:active{
  transform:translateY(-50%) translate(2px,2px);
  box-shadow:3px 3px 0 #0a0a0a;
}
.flavor-nav.prev{ left:-12px; }
.flavor-nav.next{ right:-12px; }

/* Dot indicators */
.flavor-dots{
  display:flex; justify-content:center; gap:14px;
  margin-top:32px;
}
.dot{
  width:14px; height:14px;
  border-radius:50%;
  background:rgba(255,248,230,.2);
  border:2px solid rgba(255,214,10,.4);
  cursor:pointer;
  transition:all .3s ease;
  padding:0;
}
.dot:hover{
  background:rgba(255,214,10,.5);
  transform:scale(1.2);
}
.dot.active{
  background:var(--yellow);
  border-color:#0a0a0a;
  box-shadow:0 0 0 4px rgba(255,214,10,.25);
  width:40px;
  border-radius:99px;
}

.flavor-hint{
  text-align:center;
  font-family:var(--font-marker);
  letter-spacing:3px; font-size:11px;
  color:#f2e6c8; opacity:.5;
  margin-top:18px;
}

.flavor-stage{
  position:relative;
  min-height:600px;
  perspective:1500px;
}
.flavor{
  position:absolute; inset:0;
  display:grid; grid-template-columns:1fr 1fr;
  gap:60px; align-items:center;
  padding:40px;
  border-radius:var(--r);
  background:linear-gradient(135deg, color-mix(in srgb, var(--c1) 18%, transparent), color-mix(in srgb, var(--c2) 12%, transparent));
  border:2px solid color-mix(in srgb, var(--c1) 45%, transparent);
  opacity:0; pointer-events:none;
  transform:scale(.95) translateY(20px);
  transition:opacity .6s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
.flavor.active{
  opacity:1; pointer-events:auto;
  transform:scale(1) translateY(0);
}
.flavor-info h3{
  font-family:var(--font-display);
  font-size:clamp(54px, 7vw, 90px);
  line-height:.9; letter-spacing:1px;
  color:var(--c1);
  text-shadow:6px 6px 0 #0a0a0a;
  transform:rotate(-3deg) skewX(-4deg);
  margin-bottom:24px;
}
.flavor-desc{
  font-size:18px; color:#f2e6c8;
  max-width:440px; margin-bottom:28px;
}
.flavor-specs{
  list-style:none; display:grid; grid-template-columns:1fr 1fr;
  gap:14px 24px; max-width:440px;
}
.flavor-specs li{
  font-family:var(--font-display);
  letter-spacing:2px; font-size:18px;
  padding:10px 14px;
  border:2px solid color-mix(in srgb, var(--c1) 60%, transparent);
  border-radius:10px;
  background:rgba(0,0,0,.25);
}
.flavor-specs b{ color:var(--c1); margin-right:6px; }

.flavor-can{
  position:relative;
  display:flex; justify-content:center; align-items:center;
  min-height:500px;
  transform-style:preserve-3d;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.5));
}
.flavor-can img{
  width:min(420px, 100%);
  border-radius:24px;
  transform:rotate(-6deg);
  transition:transform .4s ease;
  position:relative; z-index:2;
}
.flavor-can::before{
  content:""; position:absolute; inset:-10%;
  background:radial-gradient(circle, color-mix(in srgb, var(--c1) 35%, transparent), transparent 60%);
  filter:blur(40px); z-index:1;
  animation:pulse 3s ease-in-out infinite;
}

/* ---------- POWER ---------- */
.power{
  position:relative; z-index:2;
  padding:80px 36px;
  max-width:var(--max); margin:0 auto;
}
.power-head{ text-align:center; margin-bottom:56px; }
.power-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.power-card{
  padding:32px;
  border-radius:var(--r);
  background:linear-gradient(135deg, rgba(255,214,10,.08), rgba(255,61,0,.04));
  border:2px solid rgba(255,214,10,.2);
  transition:transform .35s ease, border-color .35s, background .35s;
  position:relative;
  overflow:hidden;
}
.power-card::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, var(--yellow), var(--orange));
  opacity:0; transition:opacity .35s;
  z-index:-1;
}
.power-card:hover{
  transform:translateY(-6px) rotate(-1deg);
  border-color:var(--yellow);
  background:linear-gradient(135deg, rgba(255,214,10,.18), rgba(255,61,0,.12));
}
.power-icon{
  font-size:42px; line-height:1;
  margin-bottom:18px;
  display:inline-flex;
  width:64px; height:64px;
  align-items:center; justify-content:center;
  background:var(--yellow);
  border-radius:16px;
  border:2px solid #0a0a0a;
  box-shadow:4px 4px 0 #0a0a0a;
  transform:rotate(-3deg);
}
.power-card h4{
  font-family:var(--font-display);
  font-size:24px; letter-spacing:2px;
  margin-bottom:10px;
  color:var(--yellow);
}
.power-card p{ color:#f2e6c8; opacity:.85; font-size:15px; }

/* ---------- HYPE GALLERY ---------- */
.hype{
  position:relative; z-index:2;
  padding:80px 36px;
  max-width:var(--max); margin:0 auto;
}
.hype-head{ text-align:center; margin-bottom:32px; }
.hype-sub{
  font-family:var(--font-marker);
  color:#f2e6c8; opacity:.7;
  letter-spacing:3px; margin-top:16px;
  font-size:14px;
}
.hype-sub strong{ color:var(--yellow); }

/* Hashtag ticker - scrolling marquee */
.hype-ticker{
  position:relative;
  overflow:hidden;
  margin:0 -36px 48px;
  padding:14px 0;
  background:#0a0a0a;
  border-top:3px solid var(--yellow);
  border-bottom:3px solid var(--yellow);
  transform:rotate(-1deg);
}
.hype-ticker::before,
.hype-ticker::after{
  content:""; position:absolute; top:0; bottom:0; width:80px; z-index:3;
  pointer-events:none;
}
.hype-ticker::before{
  left:0; background:linear-gradient(90deg, #0a0a0a, transparent);
}
.hype-ticker::after{
  right:0; background:linear-gradient(-90deg, #0a0a0a, transparent);
}
.hype-ticker-track{
  display:flex; align-items:center;
  gap:18px;
  white-space:nowrap;
  width:max-content;
  animation:tickerMove 32s linear infinite;
}
.hype-ticker:hover .hype-ticker-track{ animation-play-state:paused; }
.hype-ticker-track span{
  font-family:var(--font-display);
  letter-spacing:3px; font-size:26px;
  color:var(--yellow);
  flex-shrink:0;
  transition:color .2s;
}
.hype-ticker-track span:hover{ color:var(--paper); }
.hype-ticker-track i{
  font-style:normal;
  color:var(--orange);
  font-size:20px;
  flex-shrink:0;
}
@keyframes tickerMove{
  to{ transform:translateX(-50%); }
}

/* Wall of hype - infinite scrolling rows */
.hype-wall{
  position:relative;
  margin:0 -36px;
  padding:20px 0;
  overflow:hidden;
}
.hype-wall::before,
.hype-wall::after{
  content:""; position:absolute; top:0; bottom:0; width:140px; z-index:5;
  pointer-events:none;
}
.hype-wall::before{
  left:0; background:linear-gradient(90deg, #0a0506, transparent);
}
.hype-wall::after{
  right:0; background:linear-gradient(-90deg, #0a0506, transparent);
}

.hype-row{
  display:flex;
  overflow:hidden;
  padding:16px 0;
}
.hype-row + .hype-row{ margin-top:8px; }

.hype-row-track{
  display:flex; flex-shrink:0;
  gap:20px;
  width:max-content;
}
.hype-row-left .hype-row-track{
  animation:wallScrollLeft 50s linear infinite;
}
.hype-row-right .hype-row-track{
  animation:wallScrollRight 60s linear infinite;
}
.hype-row:hover .hype-row-track{
  animation-play-state:paused;
}
@keyframes wallScrollLeft{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}
@keyframes wallScrollRight{
  from{ transform:translateX(-50%); }
  to  { transform:translateX(0); }
}

.hype-card{
  flex-shrink:0;
  width:300px; height:300px;
  border-radius:var(--r);
  border:2px solid #0a0a0a;
  box-shadow:6px 6px 0 #0a0a0a;
  overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease;
}
.hype-card:nth-child(2n){ transform:rotate(-2deg); }
.hype-card:nth-child(3n){ transform:rotate(1.5deg); }
.hype-card:nth-child(5n){ transform:rotate(-1deg); }
.hype-card:hover{
  transform:translate(-4px,-4px) rotate(0deg) scale(1.04);
  box-shadow:10px 10px 0 var(--yellow);
  z-index:4;
}
.hype-card img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s ease, filter .4s;
}
.hype-card:hover img{ transform:scale(1.06); filter:saturate(1.2); }

/* Spinning sticker badge in the middle */
.hype-sticker{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%, -50%);
  z-index:6;
  width:220px; height:220px;
  pointer-events:none;
}
.sticker-ring{
  position:absolute; inset:0;
  width:100%; height:100%;
  animation:stickerSpin 18s linear infinite;
}
.sticker-ring text{
  font-family:var(--font-display);
  font-size:14px;
  letter-spacing:3px;
  fill:var(--yellow);
}
@keyframes stickerSpin{
  to{ transform:rotate(360deg); }
}
.sticker-btn{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:140px; height:140px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #ffe566, var(--yellow) 50%, var(--orange) 100%);
  border:3px solid #0a0a0a;
  box-shadow:6px 6px 0 #0a0a0a, inset 0 -8px 16px rgba(0,0,0,.2);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:2px;
  color:#0a0a0a;
  pointer-events:auto;
  transition:transform .25s ease, box-shadow .25s ease;
}
.sticker-btn:hover{
  transform:translate(-50%, -50%) scale(1.08) rotate(-6deg);
  box-shadow:10px 10px 0 #0a0a0a, inset 0 -8px 16px rgba(0,0,0,.2);
}
.sticker-icon{
  font-family:var(--font-display);
  font-size:54px; line-height:.85;
  font-weight:bold;
}
.sticker-tag{
  font-family:var(--font-display);
  font-size:18px; letter-spacing:2px;
}

/* ---------- CTA BAND ---------- */
.cta-band{
  position:relative; z-index:2;
  margin:60px 36px;
  padding:80px 36px;
  border-radius:32px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,214,10,.3), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(230,0,46,.3), transparent 50%),
    linear-gradient(135deg, var(--orange-2), var(--yellow));
  text-align:center;
  border:3px solid #0a0a0a;
  box-shadow:10px 10px 0 #0a0a0a;
  overflow:hidden;
}
.cta-title{
  font-family:var(--font-display);
  font-size:clamp(48px, 8vw, 120px);
  line-height:.9; letter-spacing:2px;
  color:#0a0a0a;
  margin-bottom:32px;
}
.cta-title span{ display:inline-block; padding:0 10px; }
.cta-fuel{
  color:var(--paper);
  text-shadow:6px 6px 0 #0a0a0a;
  transform:rotate(-4deg) skewX(-6deg);
  font-size:1.2em;
}
.cta-sub{
  font-family:var(--font-marker);
  letter-spacing:4px; font-size:14px;
  color:#0a0a0a; opacity:.75;
  margin-bottom:32px;
}

/* Social row */
.social-row{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:14px;
  max-width:760px; margin:0 auto;
}
.social-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px;
  border-radius:99px;
  background:#0a0a0a;
  color:var(--paper);
  border:2px solid #0a0a0a;
  box-shadow:5px 5px 0 var(--paper);
  font-family:var(--font-display);
  letter-spacing:3px; font-size:16px;
  transition:transform .2s, box-shadow .2s, background .3s;
}
.social-btn svg{ flex-shrink:0; }
.social-btn:hover{
  transform:translate(-3px,-3px);
  box-shadow:8px 8px 0 var(--paper);
}
.social-btn.fb:hover{ background:#1877f2; border-color:#1877f2; }
.social-btn.ig:hover{
  background:linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  border-color:#dc2743;
}
.social-btn.yt:hover{ background:#ff0033; border-color:#ff0033; }
.social-btn.tt:hover{
  background:#000;
  box-shadow:5px 5px 0 #25f4ee, 8px 8px 0 #fe2c55;
}
.social-btn.tt:hover:hover{
  box-shadow:8px 8px 0 #25f4ee, 11px 11px 0 #fe2c55;
}

/* ---------- FOOTER ---------- */
.footer{
  position:relative; z-index:2;
  padding:60px 36px 30px;
  background:#0a0506;
  border-top:3px solid var(--yellow);
}
.footer-top{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:1.2fr 2fr;
  gap:40px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,214,10,.15);
}
.footer-brand img{
  width:80px; height:80px; border-radius:14px;
  border:2px solid var(--yellow);
  transform:rotate(-4deg);
  margin-bottom:16px;
}
.footer-brand p{
  font-family:var(--font-marker);
  letter-spacing:2px; color:#f2e6c8; opacity:.75;
  max-width:300px;
}
.footer-cols{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
}
.footer-cols h5{
  font-family:var(--font-display);
  letter-spacing:3px; font-size:18px;
  color:var(--yellow);
  margin-bottom:14px;
}
.footer-cols a{
  display:block; padding:5px 0;
  color:#f2e6c8; opacity:.75;
  font-size:14px;
  transition:color .2s, transform .2s;
}
.footer-cols a:hover{ color:var(--yellow); transform:translateX(4px); }

.footer-bottom{
  max-width:var(--max); margin:30px auto 0;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
}
.footer-mark{
  font-family:var(--font-display);
  font-size:48px; letter-spacing:2px;
  color:var(--yellow);
  transform:rotate(-3deg) skewX(-4deg);
  text-shadow:4px 4px 0 var(--red);
}
.footer-mark span{ color:var(--paper); text-shadow:4px 4px 0 #0a0a0a; }
.footer-bottom small{
  font-family:var(--font-marker);
  letter-spacing:2px; color:#f2e6c8; opacity:.5; font-size:12px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
  .hero-grid, .story-grid{ grid-template-columns:1fr; gap:30px; }
  .hero-right{ min-height:420px; }
  .power-grid{ grid-template-columns:repeat(2, 1fr); }
  .footer-top{ grid-template-columns:1fr; }

  /* Flavor carousel: switch from absolute stacking to flow on mobile */
  .flavor-stage{
    min-height:0;
    perspective:none;
  }
  .flavor{
    position:relative;
    inset:auto;
    display:none;
    opacity:1;
    transform:none;
    grid-template-columns:1fr;
    gap:24px;
    padding:24px;
    text-align:center;
  }
  .flavor.active{
    display:grid;
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  .flavor-info h3{ font-size:54px; }
  .flavor-specs{ margin:0 auto; max-width:420px; }
  .flavor-can{ min-height:320px; order:-1; }
  .flavor-can img{ width:min(260px, 70%); }

  /* Arrows on the can, not the middle of the whole stage */
  .flavor-nav{
    width:44px; height:44px;
    top:170px;
    transform:none;
    box-shadow:3px 3px 0 #0a0a0a;
  }
  .flavor-nav:hover{ transform:scale(1.05); }
  .flavor-nav:active{ transform:translate(2px,2px) scale(.95); }
  .flavor-nav.prev{ left:8px; }
  .flavor-nav.next{ right:8px; }

  .hype-card{ width:220px; height:220px; }
  .hype-sticker{ width:180px; height:180px; }
  .sticker-btn{ width:115px; height:115px; }
  .sticker-icon{ font-size:42px; }
  .sticker-tag{ font-size:14px; }
}
@media (max-width:600px){
  .hype-card{ width:170px; height:170px; }
  .hype-sticker{ width:150px; height:150px; }
  .sticker-btn{ width:95px; height:95px; }
  .sticker-icon{ font-size:34px; }
  .sticker-tag{ font-size:12px; }
  .sticker-ring text{ font-size:11px; letter-spacing:2px; }
  .hype-wall::before, .hype-wall::after{ width:60px; }
}
@media (max-width:600px){
  .nav{ padding:14px 18px; }
  .nav-logo img{ height:40px; width:40px; }
  .nav-cta{ padding:10px 16px; font-size:14px; }
  .hero{ padding:100px 18px 40px; }
  .hero-title{ font-size:clamp(56px, 14vw, 100px); }
  .hero-title .line.outline{ margin-left:0; -webkit-text-stroke-width:2px; }
  .hero-sub{ font-size:16px; }
  .hero-right{ min-height:360px; }
  .story, .flavors, .power, .hype{ padding-left:18px; padding-right:18px; }
  .power-grid{ grid-template-columns:1fr; }
  .hero-stats{ gap:18px; }
  .hero-stats b{ font-size:32px; }
  .hero-stats b i{ font-size:18px; }
  .section-title{ font-size:clamp(40px, 11vw, 64px); }
  .section-title.big{ font-size:clamp(48px, 13vw, 80px); }
  .marquee-track{ font-size:22px; gap:36px; }
  .flavor-tabs{ gap:8px; }
  .tab{ padding:10px 14px; font-size:13px; letter-spacing:1.5px; }
  .flavor-info h3{ font-size:44px; }
  .flavor-desc{ font-size:16px; }
  .flavor-specs{ grid-template-columns:1fr 1fr; gap:10px; }
  .flavor-specs li{ font-size:14px; padding:8px 10px; }
  .flavor-nav{ top:140px; width:40px; height:40px; }
  .flavor-can{ min-height:280px; }
  .flavor-can img{ width:min(220px, 65%); }
  .hype-card{ width:170px; height:170px; }
  .hype-sticker{ width:150px; height:150px; }
  .sticker-btn{ width:95px; height:95px; }
  .sticker-icon{ font-size:34px; }
  .sticker-tag{ font-size:12px; }
  .sticker-ring text{ font-size:11px; letter-spacing:2px; }
  .hype-wall::before, .hype-wall::after{ width:60px; }
  .cta-band{ margin:40px 18px; padding:48px 22px; }
  .cta-title{ font-size:clamp(40px, 12vw, 64px); }
  .footer-cols{ grid-template-columns:1fr 1fr; }
  .social-btn{ padding:12px 18px; font-size:14px; letter-spacing:2px; }
  .social-btn svg{ width:22px; height:22px; }
  .footer-mark{ font-size:36px; }
}