/* ==========================================================
   styles.css  -  all the styling for the site
   Sections:
     1. Variables & base          8. Featured banner
     2. Helpers (tags, shine...)  9. Social hub
     3. Buttons                  10. Total reach
     4. Intro animation          11. YouTube (red theme)
     5. Navigation               12. Picks
     6. Logo bars                13. Contact & footer
     7. Hero                     14. Mobile
   ========================================================== */

/* ---------- 1. Variables & base ---------- */
:root{
  --bg:#e6f6fd; --ink:#0a0f14; --blue:#2fc3f5; --sky:#a9e3fb; --ice:#d4f1fd;
  --paper:#fff; --mute:#35505f;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.2,.8,.2,1);
  --bandA:#0a0f14; --bandB:#2fc3f5;
  --ember:#ff7a1a; --flame:#ff4d1a; --gold:#ffd23f;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:110px;overflow-x:clip}
body{
  background:var(--bg) radial-gradient(rgba(10,15,20,.13) 1.3px,transparent 1.4px) 0 0/22px 22px;
  color:var(--ink);font-family:'Manrope',sans-serif;font-weight:600;
  overflow-x:clip;padding-bottom:env(safe-area-inset-bottom,0px);
}
body.loading{overflow:hidden}
/* background slowly darkens as you scroll (--dim goes 0 -> 1, set by script.js) */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#0e3a52,#0a1118);
  opacity:calc(var(--dim,0) * .22);
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3{font-family:'Anton',Impact,sans-serif;font-weight:400;text-transform:uppercase;line-height:1}
[hidden]{display:none!important}
main{position:relative;max-width:1080px;margin:0 auto;padding:0 20px 40px}

/* Each section can set its own accent color (YouTube overrides these to red) */
section{
  --accent:var(--blue); --accent-soft:var(--sky); --accent-ice:var(--ice); --accent-ink:#0b8fc2;
  position:relative;padding-top:clamp(96px,13vw,150px);
}
/* divider line between sections */
section::before{
  content:"";position:absolute;left:0;right:0;top:clamp(44px,6vw,70px);height:3px;
  background:repeating-linear-gradient(90deg,rgba(10,15,20,.28) 0 12px,transparent 12px 24px);
}
section::after{
  content:"";position:absolute;left:50%;top:calc(clamp(44px,6vw,70px) - 9px);width:21px;height:21px;
  margin-left:-10px;background:var(--accent);border:3px solid var(--ink);border-radius:4px;rotate:45deg;
}

.x3d{color:var(--ink);text-shadow:.055em .055em 0 var(--accent,var(--blue))}

/* ---------- 2. Helpers ---------- */
/* Section tag (the little sticker above each heading): accent fill, black hard shadow */
.tag{
  display:inline-flex;align-items:center;padding:7px 17px;
  background:var(--accent,var(--blue));color:var(--ink);border:3px solid var(--ink);border-radius:999px;
  font-weight:800;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:4px 4px 0 var(--ink);transition:box-shadow .25s,transform .25s var(--spring);
}
.tag:hover{box-shadow:6px 6px 0 var(--ink);transform:translate(-1px,-1px)}

.sec-h{margin-bottom:clamp(24px,4vw,36px)}
.sec-h h2{font-size:clamp(2.6rem,9vw,4.6rem);margin-top:16px}
.sec-h p{color:var(--mute);font-weight:700;margin-top:10px}

/* Letters of animated headings (split by script.js) */
.w{display:inline-block;white-space:nowrap}
.wave-l{display:inline-block;white-space:pre;opacity:0;transition:transform .35s var(--spring)}
.wave-l:hover{transform:translateY(-.1em) rotate(-5deg)}
@keyframes waveIn{
  0%{opacity:0;translate:0 60vh;rotate:14deg}
  55%{opacity:1;translate:0 -.16em;rotate:-6deg}
  78%{translate:0 .05em;rotate:2deg}
  100%{opacity:1;translate:0 0;rotate:0deg}
}
@keyframes waveIn2{
  0%{opacity:0;translate:0 .7em;rotate:8deg}
  60%{opacity:1;translate:0 -.1em;rotate:-4deg}
  100%{opacity:1;translate:0 0;rotate:0deg}
}
body.ready h1 .wave-l{
  animation:waveIn 1.2s cubic-bezier(.2,.9,.25,1.05) calc(var(--d0,0s) + var(--i)*.07s) both;
}
.sec-h.in .wave-l,.contact.in h2 .wave-l{
  animation:waveIn2 .8s var(--ease) calc(.12s + var(--i)*.04s) both;
}
/* hero items that swoop up from the bottom after the intro */
@keyframes swoop{
  from{opacity:0;translate:0 90px}
  to{opacity:1;translate:0 0}
}
.swoop{opacity:0}
body.ready .swoop{animation:swoop 1s var(--ease) var(--d,0s) both}

/* things that fade/slide in as you scroll down (uses `translate` so hover `transform` still works) */
.reveal{
  opacity:0;translate:0 34px;
  transition:opacity .7s ease var(--d,0s),translate .8s var(--ease) var(--d,0s),
             transform .35s var(--spring),box-shadow .2s ease,background-color .25s;
}
.card.reveal{
  transition:opacity .7s ease var(--d,0s),translate .8s var(--ease) var(--d,0s),
             transform .35s var(--spring),box-shadow .2s ease,background-color .25s;
}
.reveal.in{opacity:1;translate:0 0}

/* shine sweep on hover */
.shine,.btn,.vcard{position:relative;overflow:hidden}
.shine::after,.btn::after,.vcard::after{
  content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:38%;pointer-events:none;z-index:3;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);
  transform:translateX(-170%) skewX(-20deg);
}
.shine:hover::after,.btn:hover::after,.vcard:hover::after{animation:shine .85s ease}
@keyframes shine{to{transform:translateX(420%) skewX(-20deg)}}

/* clickable cards (white boxes with hard shadow) */
.card{
  background:var(--paper);border:3px solid var(--ink);border-radius:16px;box-shadow:5px 5px 0 var(--ink);
  transition:transform .35s var(--spring),box-shadow .2s ease,background-color .25s;
}
a.card:hover{transform:translate(-3px,-4px) rotate(-.6deg);box-shadow:9px 10px 0 var(--ink)}
a.card:active{transform:translate(4px,4px) scale(.98);box-shadow:0 0 0 var(--ink);transition-duration:.08s}
.arrow{
  flex:none;width:36px;height:36px;border:3px solid var(--ink);border-radius:50%;background:var(--paper);
  display:grid;place-items:center;font-weight:800;margin-left:auto;
  transition:transform .4s var(--spring),background-color .2s;
}
a.card:hover .arrow{transform:translate(3px,-3px) rotate(12deg) scale(1.12);background:var(--accent,var(--blue))}

/* ---------- Fire helpers (flame rows, gems, embers) ---------- */
.flames{position:absolute;left:0;right:0;bottom:0;pointer-events:none;line-height:0}
.flames:empty{display:none}
.flames svg{display:block;width:100%;height:100%;overflow:visible}
.flames .fl{transform-box:fill-box;transform-origin:50% 100%;animation:flick var(--t,2s) ease-in-out infinite;animation-delay:calc(var(--k) * -.37s)}
.flames .o{fill:var(--flame)}.flames .m{fill:var(--ember)}.flames .i{fill:var(--gold)}
@keyframes flick{
  0%,100%{transform:scale(1,1) skewX(0deg)}
  30%{transform:scale(.94,1.1) skewX(2.5deg)}
  62%{transform:scale(1.04,.9) skewX(-2.5deg)}
}
/* diamond badge with a flame in it (echoes the diamonds on the section dividers) */
.gem{
  position:relative;flex:none;display:grid;place-items:center;width:44px;height:44px;margin:0 8px;
  background:var(--gold);border:3px solid var(--paper);border-radius:9px;rotate:45deg;box-shadow:3px 3px 0 var(--ember);
}
.gem svg{width:22px;height:22px;color:var(--ink);rotate:-45deg}
.gem.big{width:62px;height:62px;border-radius:12px;box-shadow:4px 4px 0 var(--ember)}
.gem.big svg{width:30px;height:30px}
.gem-txt{rotate:-45deg;text-align:center;font-family:'Anton',sans-serif;color:var(--ink);line-height:.95;text-transform:uppercase;font-size:.8rem}

/* ---------- Click effects ---------- */
/* radial flame burst inside buttons */
.flame-ripple{
  position:absolute;z-index:2;pointer-events:none;border-radius:50%;translate:-50% -50%;
  background:radial-gradient(circle,#fff3b0 0 8%,var(--gold) 20%,var(--ember) 42%,var(--flame) 58%,transparent 72%);
  animation:rip .65s ease-out forwards;
}
@keyframes rip{from{scale:.05;opacity:.95}to{scale:1;opacity:0}}
/* a few tiny embers float up from wherever you click */
.spark{
  position:fixed;z-index:1000;pointer-events:none;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  background:var(--c);border:2px solid var(--ink);rotate:45deg;animation:spark var(--dur) ease-out forwards;
}
@keyframes spark{
  0%{opacity:1;translate:0 0;rotate:45deg}
  100%{opacity:0;translate:var(--dx) var(--dy);rotate:200deg;scale:.4}
}

/* ---------- 3. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;
  border:3px solid var(--ink);border-radius:12px;background:var(--sky);color:var(--ink);
  font-weight:800;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:4px 4px 0 var(--ink);white-space:nowrap;
  transition:transform .35s var(--spring),box-shadow .15s ease,background-color .2s;
}
.btn:hover{transform:translate(-3px,-4px) rotate(-2deg) scale(1.04);box-shadow:8px 9px 0 var(--ink)}
.btn:active{transform:translate(4px,4px) scale(.97);box-shadow:0 0 0 var(--ink);transition-duration:.08s}
.btn.alt{background:var(--blue)}
.btn.ghost{background:var(--paper)}
.btn.red{background:#ff3b4a;color:#fff}

/* ---------- 4. Intro animation ---------- */
#intro{
  position:fixed;inset:0;z-index:999;display:grid;place-items:center;overflow:hidden;
  animation:introKill .01s linear 7s forwards;   /* safety net: never block the site */
}
#intro.done{display:none}
.intro-panel{
  position:absolute;top:0;bottom:0;left:-12%;width:124%;
  transform:translateX(0) skewX(-9deg);
  transition:transform .95s cubic-bezier(.77,0,.18,1);
}
.intro-panel.p1{background:var(--ink)}
.intro-panel.p2{background:var(--blue);transition-delay:.14s}
#intro.go .intro-panel{transform:translateX(125%) skewX(-9deg)}
.intro-logo{
  position:relative;z-index:2;width:min(44vw,190px);height:auto;
  filter:drop-shadow(0 0 28px rgba(47,195,245,.75));
  animation:introLogo 1s var(--spring) both;
  transition:transform .6s cubic-bezier(.7,0,.3,1),opacity .45s ease;
}
/* an animation overrides plain transitions, so the exit must be its own animation */
#intro.go .intro-logo{animation:introOut .32s cubic-bezier(.7,0,.3,1) forwards}
@keyframes introOut{
  from{transform:scale(1) rotate(0);opacity:1}
  to{transform:scale(2.4) rotate(8deg);opacity:0}
}
@keyframes introLogo{
  0%{transform:scale(.15) rotate(-28deg);opacity:0}
  70%{opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}
}
.intro-bar{
  position:absolute;z-index:2;left:50%;top:calc(50% + min(30vw,130px));width:min(52vw,220px);height:8px;
  margin-left:calc(min(52vw,220px) / -2);border:2px solid var(--blue);border-radius:99px;overflow:hidden;
  transition:opacity .3s;
}
.intro-bar i{display:block;height:100%;background:var(--blue);transform-origin:left;animation:introFill 1.35s cubic-bezier(.5,0,.2,1) .15s both}
#intro.go .intro-bar{opacity:0}
@keyframes introFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes introKill{to{visibility:hidden;pointer-events:none}}

/* ---------- 5. Navigation ---------- */
.nav{position:sticky;top:0;z-index:50;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 0;pointer-events:none}
.nav-in{
  pointer-events:auto;max-width:1080px;margin:0 auto;padding:8px 10px;display:flex;align-items:center;gap:14px;
  background:rgba(255,255,255,.55);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);
  border:3px solid var(--ink);border-radius:12px;box-shadow:5px 6px 0 var(--blue);
}
.brand{
  display:flex;align-items:center;gap:8px;padding:4px 14px;background:var(--blue);border:3px solid var(--ink);
  border-radius:8px;box-shadow:0 0 0 3px rgba(255,255,255,.7);font-family:'Anton',sans-serif;font-size:1.5rem;
  line-height:1.15;text-transform:uppercase;flex:none;transition:transform .35s var(--spring);
}
.brand:hover{transform:rotate(-3deg) scale(1.05)}
.brand img{width:26px;height:26px;object-fit:contain;transition:transform .5s var(--spring)}
.brand:hover img{transform:rotate(360deg)}
.nav-links{display:flex;gap:10px;margin:0 auto;overflow-x:auto;padding:5px;scrollbar-width:none;min-width:0}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{
  font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;padding:8px 16px;
  border:2px solid var(--ink);border-radius:999px;background:rgba(255,255,255,.4);
  box-shadow:0 0 0 3px rgba(255,255,255,.65);white-space:nowrap;position:relative;overflow:hidden;flex:none;
  transition:background-color .2s,transform .35s var(--spring);
}
.nav-links a:hover{background:var(--blue);transform:translateY(-3px) rotate(-2deg)}
.nav-links .ico{display:none}
.nav-links a.active{background:var(--ink);color:var(--paper)}
.nav .btn{padding:10px 16px;font-size:.75rem;box-shadow:3px 3px 0 var(--ink);flex:none}

/* Seasonal decor on the nav bar (filled in by script.js from config.js) */
.nav-in{position:relative}
.nav-decor{position:absolute;left:18px;right:18px;z-index:3;display:flex;justify-content:space-between;pointer-events:none}
.nav-decor:empty{display:none}
.nav-decor.top{top:-12px;align-items:flex-end}
.nav-decor span{
  display:block;font-size:22px;line-height:1;filter:drop-shadow(2px 2px 0 rgba(10,15,20,.5));
  animation:decorBob 2.8s ease-in-out infinite;animation-delay:calc(var(--k) * -.45s);
}
@keyframes decorBob{0%,100%{translate:0 0;rotate:-4deg}50%{translate:0 -3px;rotate:4deg}}
.nav-decor.lights{bottom:-15px;height:20px;align-items:flex-start}
.nav-decor.lights i{
  position:relative;display:block;width:10px;height:15px;background:var(--c);
  border-radius:50% 50% 50% 50% / 45% 45% 55% 55%;box-shadow:0 0 10px 2px var(--c);
  animation:bulb 1.6s ease-in-out infinite;animation-delay:calc(var(--k) * -.3s);
}
.nav-decor.lights i:nth-child(odd){margin-top:3px}
.nav-decor.lights i::before{
  content:"";position:absolute;left:50%;top:-4px;width:6px;height:5px;margin-left:-3px;
  background:var(--ink);border-radius:1px;
}
@keyframes bulb{0%,100%{opacity:1}50%{opacity:.4}}

/* Theme preview picker (only shown with ?preview in the address) */
.theme-pick{
  position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:900;
  display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100vw - 24px);padding:10px;
  background:var(--paper);border:3px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);
}
.theme-pick b{width:100%;font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.theme-pick button{
  font:inherit;font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
  padding:6px 10px;border:2px solid var(--ink);border-radius:999px;background:var(--ice);color:var(--ink);cursor:pointer;
}
.theme-pick button.on{background:var(--ink);color:var(--paper)}

/* ---------- 6. Logo bars (scrolling logos) ---------- */
.band{
  width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;white-space:nowrap;
  border-block:3px solid var(--ink);padding:10px 0;
}
.band-a{background:var(--bandA)}
.band-b{background:var(--bandB)}
.band span{
  display:inline-flex;align-items:center;gap:40px;padding-right:40px;
  animation:marquee 38s linear infinite;will-change:transform;
}
.band-b span{animation-direction:reverse}
.band img{height:36px;width:auto;flex:none;transition:transform .3s var(--spring)}
.band img:hover{transform:scale(1.25) rotate(-8deg)}
.band i{width:10px;height:10px;flex:none;background:var(--paper);rotate:45deg;border:2px solid var(--ink)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- 7. Hero ---------- */
.hero{position:relative;isolation:isolate;text-align:center;padding:0 0 clamp(36px,6vw,56px)}
/* warm haze behind the logo and a faint glow rising from the bottom bar */
.hero::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;left:50%;top:0;bottom:0;width:100vw;margin-left:-50vw;
  background:
    radial-gradient(ellipse 55% 42% at 50% 36%,rgba(255,122,26,.2),transparent 70%),
    linear-gradient(to top,rgba(255,90,31,.16),transparent 36%);
}
/* rising embers (little diamonds) */
.embers{position:absolute;z-index:-1;pointer-events:none;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;overflow:hidden}
.embers i{
  position:absolute;left:var(--x);bottom:84px;width:var(--s);height:var(--s);background:var(--c);
  border:2px solid var(--ink);opacity:0;rotate:45deg;animation:ember var(--dur) linear var(--del) infinite;
}
@keyframes ember{
  0%{opacity:0;translate:0 0;rotate:45deg}
  12%{opacity:.85}
  70%{opacity:.55}
  100%{opacity:0;translate:var(--dx) calc(var(--rise) * -1);rotate:225deg}
}
/* bottom bar with flames licking up from its top edge */
.hero .base{position:relative;margin-top:clamp(64px,9vw,92px)}
.fire{left:50%;right:auto;width:100vw;margin-left:-50vw;bottom:100%;height:clamp(58px,9vw,94px);opacity:.5;z-index:-1}
/* tall flames up the left/right edges: only on wide screens, where the sides are empty */
.fire.side{
  height:clamp(340px,64vh,620px);opacity:.42;
  -webkit-mask-image:linear-gradient(to top,#000 40%,transparent 98%);mask-image:linear-gradient(to top,#000 40%,transparent 98%);
}
.fire.side.l{width:calc(50vw - 510px);margin-left:-50vw}
.fire.side.r{width:calc(50vw - 510px);margin-left:510px}
@media(max-width:1180px){.fire.side{display:none}}
.hero .band-a{margin-bottom:clamp(28px,5vw,44px)}

.mark-wrap{
  width:124px;height:124px;margin:0 auto;display:grid;place-items:center;cursor:pointer;
  transition:scale .5s var(--spring),filter .4s ease;
}
.mark{width:104px;height:104px;object-fit:contain;display:block;filter:drop-shadow(5px 5px 0 var(--ink));will-change:transform}
.mark-wrap:hover{
  scale:1.12;animation:logoWiggle .8s ease;
  filter:drop-shadow(0 0 14px rgba(47,195,245,.95)) drop-shadow(0 0 38px rgba(47,195,245,.6));
}
@keyframes logoWiggle{0%{rotate:0deg}22%{rotate:-10deg}50%{rotate:7deg}76%{rotate:-3deg}100%{rotate:0deg}}

.hero h1{font-size:clamp(4.6rem,25vw,13rem);line-height:.9;margin-top:10px;letter-spacing:.005em}
.hero p{margin:18px auto 0;max-width:40ch;font-weight:700;font-size:1.05rem;line-height:1.45}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* total reach quick box: dark slab with an ember glow and a row of small flames */
.reach-hero{
  position:relative;z-index:1;overflow:hidden;
  display:flex;align-items:center;gap:26px;width:fit-content;max-width:100%;margin:34px auto 0;
  padding:16px 24px 24px 26px;color:var(--paper);border-radius:20px;text-align:left;
  background:
    radial-gradient(ellipse at 50% 140%,rgba(255,90,31,.34),transparent 62%),
    radial-gradient(rgba(255,138,31,.18) 1.3px,transparent 1.4px) 0 0/22px 22px,
    var(--ink);
  border:3px solid var(--ink);
  box-shadow:6px 6px 0 var(--ember),6px 6px 0 3px var(--ink),inset 0 3px 0 rgba(255,255,255,.1);
}
.reach-hero>*{position:relative;z-index:1}
.reach-hero>.flames{position:absolute;z-index:0;height:50%;opacity:.45}
.rh-num{font-family:'Anton',sans-serif;font-size:clamp(2.6rem,10vw,3.8rem);line-height:1;color:var(--paper);text-shadow:.05em .05em 0 var(--ember);min-width:2.6ch;letter-spacing:.01em}
.rh-txt{display:flex;flex-direction:column;justify-content:center;align-self:stretch;gap:3px;padding-left:24px;border-left:3px dashed rgba(255,255,255,.22)}
.rh-txt b{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.rh-txt span{font-size:.82rem;font-weight:600;color:rgba(255,255,255,.78);line-height:1.35}

/* ---------- 8. Featured banner ---------- */
/* same slab language as the rest of the site (ink border + hard shadow), in ember orange so it stands out */
.spot{
  position:relative;display:block;margin-top:clamp(18px,3vw,34px);border-radius:22px;border:3px solid var(--ink);background:var(--ink);
  box-shadow:8px 8px 0 var(--ember),8px 8px 0 3px var(--ink);
  transition:transform .35s var(--spring),box-shadow .2s ease,opacity .7s ease var(--d,0s),translate .8s var(--ease) var(--d,0s);
}
.spot:hover{transform:translate(-3px,-4px) rotate(-.4deg);box-shadow:12px 13px 0 var(--ember),12px 13px 0 3px var(--ink)}
.spot:active{transform:translate(5px,5px) scale(.99);box-shadow:0 0 0 var(--ink);transition-duration:.08s}
.spot-in{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:clamp(14px,3vw,28px);
  padding:clamp(20px,3.2vw,30px) clamp(18px,3.2vw,32px) clamp(28px,3.8vw,38px);border-radius:19px;color:var(--paper);
  background:
    radial-gradient(ellipse at 8% 125%,rgba(255,90,31,.4),transparent 55%),
    radial-gradient(rgba(255,138,31,.2) 1.3px,transparent 1.4px) 0 0/22px 22px,
    var(--ink);
}
.spot-in>*{position:relative;z-index:1}
.spot-in>.flames{position:absolute;z-index:0;height:44%;opacity:.5}
.spot-txt{flex:1;min-width:0}
.badge{
  display:inline-block;background:var(--gold);color:var(--ink);font-family:'Anton',sans-serif;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;padding:3px 12px;border-radius:6px;margin-bottom:12px;
  rotate:-2deg;box-shadow:3px 3px 0 var(--flame);
}
.spot h3{font-size:clamp(1.8rem,5.5vw,2.6rem);color:var(--paper);text-shadow:.055em .055em 0 var(--ember)}
.spot p{font-weight:600;margin-top:10px;color:rgba(255,255,255,.82);max-width:46ch;line-height:1.4}
.spot-cta{
  flex:none;align-self:center;position:relative;overflow:hidden;font-weight:800;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);background:var(--paper);padding:12px 20px;border-radius:12px;box-shadow:4px 4px 0 var(--flame);
  transition:transform .35s var(--spring),background-color .2s,box-shadow .15s;
}
.spot:hover .spot-cta{transform:translate(-2px,-3px) rotate(-2deg);background:var(--gold);box-shadow:6px 7px 0 var(--flame)}

/* ---------- 9. Social hub ---------- */
.socials{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:18px}
.soc{display:flex;align-items:center;gap:14px;padding:14px}
.soc:nth-child(even){background:var(--ice)}
.soc svg{
  width:46px;height:46px;flex:none;padding:10px;border:3px solid var(--ink);border-radius:12px;
  background:var(--blue);color:var(--ink);transition:transform .5s var(--spring),background-color .2s;
}
.soc b{display:block;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.soc small{color:var(--mute);font-weight:700}
.soc .cnt{
  margin-left:auto;background:var(--ink);color:var(--paper);font-family:'Anton',sans-serif;letter-spacing:.04em;
  padding:3px 11px;border-radius:999px;white-space:nowrap;transition:transform .4s var(--spring);
}
.soc .cnt small{color:rgba(255,255,255,.7);font-family:'Manrope',sans-serif;font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-left:3px}
/* the whole card tilts, the icon spins the other way */
a.soc:hover{transform:translate(-4px,-6px) rotate(-2deg) scale(1.035);box-shadow:10px 12px 0 var(--ink)}
a.soc:nth-child(even):hover{transform:translate(-4px,-6px) rotate(2deg) scale(1.035)}
a.soc:hover svg{transform:rotate(-14deg) scale(1.2);background:var(--paper)}
a.soc:nth-child(even):hover svg{transform:rotate(14deg) scale(1.2)}
a.soc:hover .cnt{transform:scale(1.12) rotate(-3deg)}
a.soc:active{transform:translate(4px,4px) scale(.97);box-shadow:0 0 0 var(--ink)}

/* ---------- 10. Total reach (flat panels - NOT buttons) ---------- */
.reach-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:30px;align-items:stretch}
/* static "slab" boxes: 3D like the cards, but a colored edge instead of ink + no hover lift */
.reach-main{
  position:relative;overflow:hidden;color:var(--paper);border-radius:22px;
  background:
    radial-gradient(ellipse at 50% 135%,rgba(255,90,31,.34),transparent 62%),
    radial-gradient(rgba(255,138,31,.18) 1.3px,transparent 1.4px) 0 0/22px 22px,
    var(--ink);
  border:3px solid var(--ink);
  box-shadow:8px 8px 0 var(--ember),8px 8px 0 3px var(--ink),inset 0 3px 0 rgba(255,255,255,.1);
  padding:clamp(24px,4vw,36px) clamp(24px,4vw,36px) clamp(54px,8vw,76px);display:flex;flex-direction:column;justify-content:center;gap:8px;
}
.reach-main>*{position:relative;z-index:1}
.reach-main>.flames{position:absolute;z-index:0;height:40%;opacity:.45}
.rm-label{font-weight:800;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.rm-num{font-family:'Anton',sans-serif;font-size:clamp(4rem,13vw,6.6rem);line-height:1;color:var(--paper);text-shadow:.045em .045em 0 var(--ember)}
.reach-main p{color:rgba(255,255,255,.75);font-weight:600;max-width:26ch;line-height:1.4}

.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:24px 22px}
.tile{
  grid-column:span 2;position:relative;padding:18px 16px 16px 18px;border-radius:16px;
  background:var(--paper);border:3px solid var(--ink);
  box-shadow:6px 6px 0 var(--tc,var(--blue)),6px 6px 0 3px var(--ink);
}
.tile:nth-child(n+4){grid-column:span 3}
.tile svg{width:22px;height:22px;color:var(--ink);opacity:.55;margin-bottom:10px;display:block}
.tile .num{font-family:'Anton',sans-serif;font-size:clamp(2rem,6vw,3rem);line-height:1}
.tile .lbl{font-weight:800;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);margin-top:6px}

/* ---------- 11. YouTube (red theme) ---------- */
#youtube{--accent:#ff3b4a;--accent-soft:#ffc9ce;--accent-ice:#fff1f2;--accent-ink:#c4001a}
#youtube .btn.red{box-shadow:4px 4px 0 var(--ink)}
.yt-panels{display:grid;gap:clamp(30px,5vw,48px)}
.yt-panel{
  background:var(--paper);border:3px solid var(--ink);border-top:12px solid var(--accent);border-radius:22px;
  padding:clamp(18px,3vw,28px);
}
.ph{
  display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:3px dashed rgba(10,15,20,.25);margin-bottom:24px;
}
.plab{font-weight:800;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.plab svg{width:18px;height:18px}
.ph h3{font-size:clamp(1.7rem,5.5vw,2.8rem);word-break:break-word}
.ph-r{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pill{
  flex:none;background:var(--ink);color:var(--paper);font-weight:800;font-size:.78rem;letter-spacing:.05em;
  text-transform:uppercase;padding:9px 15px;border-radius:999px;box-shadow:0 0 0 3px var(--accent-soft);
}

/* videos: always fill the full row, wide cards */
.vgrid{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:20px}
.vgrid.single{max-width:520px;margin-inline:auto}
.vcard{display:flex;flex-direction:column;background:var(--paper)}
.vthumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink);border-bottom:3px solid var(--ink)}
.vimg{position:absolute;inset:0;background:center/cover no-repeat;transition:transform .6s var(--ease)}
.vcard:hover .vimg{transform:scale(1.09) rotate(.6deg)}
.vplay{
  position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;
  background:var(--accent);border:3px solid var(--ink);display:grid;place-items:center;
  scale:.3;opacity:0;transition:scale .45s var(--spring),opacity .25s;z-index:2;
}
.vplay::before{content:"";margin-left:4px;border-left:16px solid #fff;border-block:10px solid transparent}
.vcard:hover .vplay{scale:1;opacity:1}
.vbody{padding:14px 16px 18px;background:var(--accent-ice);flex:1;display:flex;flex-direction:column}
.vlab{font-weight:800;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.vtitle{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:1.3rem;line-height:1.15;margin:8px 0 14px;overflow-wrap:anywhere}
.vgo{margin-top:auto;font-weight:800;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;transition:letter-spacing .3s,color .2s}
.vcard:hover .vgo{letter-spacing:.12em;color:var(--accent-ink)}
a.vcard:hover{box-shadow:9px 10px 0 var(--accent-ink)}
.vempty{grid-column:1/-1;text-align:center;padding:30px 10px;color:var(--mute);font-weight:700}
/* loading placeholders */
.skel{pointer-events:none}
.skel .vthumb,.skel .sk{background:linear-gradient(100deg,#e7e7e7 30%,#f7f7f7 50%,#e7e7e7 70%) 0 0/300% 100%;animation:shimmer 1.2s linear infinite}
.skel .sk{height:14px;border-radius:6px;margin:10px 0}
@keyframes shimmer{to{background-position:-300% 0}}

/* ---------- 12. Picks ---------- */
.promos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:18px}
.promo{display:flex;align-items:center;gap:14px;padding:16px}
.promo:nth-child(even){background:var(--ice)}
.promo .tg{
  flex:none;width:52px;height:52px;border:3px solid var(--ink);border-radius:12px;background:var(--blue);
  display:grid;place-items:center;font-family:'Anton',sans-serif;letter-spacing:.05em;transition:transform .5s var(--spring);
}
a.promo:hover .tg{transform:rotate(-12deg) scale(1.15)}
.promo b{font-weight:800;font-size:1.05rem}
.promo small{display:block;color:var(--mute);font-weight:700;margin-top:2px}

/* ---------- 13. Contact & footer (flat dark panel) ---------- */
.contact{
  position:relative;overflow:hidden;background:var(--ink);color:var(--paper);border-radius:30px;text-align:center;
  padding:clamp(34px,6vw,56px) clamp(18px,4vw,28px);
}
.contact::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(rgba(47,195,245,.35) 1.2px,transparent 1.5px) 0 0/24px 24px;
  mask-image:radial-gradient(circle at 50% 100%,#000,transparent 70%);-webkit-mask-image:radial-gradient(circle at 50% 100%,#000,transparent 70%);
}
.contact>*{position:relative}
.contact .tag{box-shadow:4px 4px 0 var(--paper)}
.contact h2{font-size:clamp(2.8rem,10vw,5rem);margin:16px 0 10px;color:var(--paper);text-shadow:.055em .055em 0 var(--blue)}
.contact p{max-width:42ch;margin:0 auto 18px;font-weight:700;color:rgba(255,255,255,.8)}
.mail{
  display:block;width:fit-content;max-width:100%;margin:0 auto 24px;
  font-family:'Anton',sans-serif;font-size:clamp(1.2rem,5vw,2.2rem);letter-spacing:.03em;
  word-break:break-all;color:var(--blue);
  background:linear-gradient(var(--blue),var(--blue)) 0 100%/0 3px no-repeat;transition:background-size .4s var(--ease),transform .35s var(--spring);
}
.mail:hover{background-size:100% 3px;transform:scale(1.03)}
.contact .btn{background:var(--paper);box-shadow:4px 4px 0 var(--blue);border-color:var(--paper)}
.contact .btn:hover{box-shadow:8px 9px 0 var(--blue)}
footer{text-align:center;color:var(--mute);font-weight:700;font-size:.8rem;padding:48px 0 24px}

/* ---------- 14. Mobile / small screens ---------- */
@media(max-width:860px){
  .nav .btn{display:none}
  .nav-links{margin:0}
  .reach-grid{grid-template-columns:1fr}
  /* videos: one per row, big thumbnail with the title underneath */
  .vgrid{grid-template-columns:minmax(0,1fr);max-width:560px;margin-inline:auto}
  .vtitle{font-family:'Manrope',sans-serif;font-weight:800;font-size:1.15rem;line-height:1.25;letter-spacing:.005em;margin:8px 0 14px}
}
@media(max-width:640px){
  main{padding-inline:16px}
  .nav{padding-inline:10px}
  .brand{font-size:1.25rem;padding:4px 10px}
  /* phones: icon-only nav so all five buttons fit without scrolling */
  .nav-links{gap:8px;margin-left:auto}
  .nav-links a{display:grid;place-items:center;width:40px;height:40px;padding:0}
  .nav-links .lbl{display:none}
  .nav-links .ico{display:grid}
  .nav-links .ico svg{width:19px;height:19px}
  .band img{height:28px}
  .band span{gap:30px;padding-right:30px}
  .cta .btn{flex:1 1 100%;white-space:normal}
  .reach-hero{flex-wrap:wrap;justify-content:center;text-align:center;outline-offset:5px;gap:10px 14px}
  .rh-txt{max-width:none;align-items:center;padding-left:0;border-left:0}
  .spot-in{flex-direction:column;text-align:center;gap:10px;padding:18px 16px 30px}
  .spot-in .gem{display:none}
  .spot .badge{margin-bottom:8px}
  .spot h3{font-size:1.7rem}
  .spot p{margin-top:8px;font-size:.92rem}
  .spot-cta{padding:10px 16px;margin-top:2px}
  .spot-cta{align-self:stretch;text-align:center}
  .spot p{margin-inline:auto}
  .fire{opacity:.42}
  .tiles{grid-template-columns:repeat(2,1fr);gap:22px 18px}
  .reach-hero{box-shadow:5px 5px 0 var(--ember),5px 5px 0 3px var(--ink),inset 0 3px 0 rgba(255,255,255,.1)}
  .tile,.tile:nth-child(n+4){grid-column:span 1}
  .tile:last-child:nth-child(odd){grid-column:span 2}
  .ph{align-items:flex-start}
  .ph-r{width:100%}
  .ph-r .btn{flex:1}
  .yt-panel{border-radius:18px}
  .promo{padding:14px}
}
@media(max-width:460px){
  .brand-txt{display:none}
  .brand{padding:4px 8px}
}
@media(max-width:380px){
  .vcard{flex-direction:column}
  .vcard .vthumb{width:100%;aspect-ratio:16/9;border-right:0;border-bottom:3px solid var(--ink)}
  .soc .cnt{font-size:.9rem}
}

/* ---------- Respect "reduce motion" settings ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .embers,.spark,.flame-ripple{display:none}
  .swoop,.reveal,.wave-l{opacity:1!important;translate:none!important}
}