/* =========================================================
   BE THE BRAND — SYNTH PALACE
   Vintage synth-panel aesthetic. Plain CSS, no build step.
   Palette and type tokens live in :root below — edit there.
   ========================================================= */

:root{
  --bg:#0a0a0b;
  --panel:#141416;
  --panel-2:#1c1c1f;
  --line:#2a2a2e;
  --ink:#f4f3ef;
  --ink-dim:#9b9a95;
  --ink-faint:#6a6a66;
  --hot:#ff4d1c;          /* burnt orange — the synth LED accent */
  --hot-deep:#c4350f;
  --amber:#ffb000;

  --font-body:'Helvetica Neue',Arial,sans-serif;
  --font-mono:'SF Mono',ui-monospace,'Roboto Mono',Menlo,monospace;

  --maxw:1080px;
  --gutter:24px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--font-mono)}

/* keep anchor jumps clear of the sticky nav */
[id]{scroll-margin-top:84px}

/* accessible focus ring for keyboard users */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--hot);
  outline-offset:3px;
  border-radius:2px;
}

/* ---- eyebrow / technical labels ---- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--hot);font-weight:600;
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--hot)}
.eyebrow-center{justify-content:center}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--hot);color:#fff;border:none;
  font-family:var(--font-mono);
  font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase;
  padding:20px 38px;cursor:pointer;text-decoration:none;
  transition:transform .12s ease, background .2s ease;
  border-radius:2px;
}
.btn:hover{background:var(--hot-deep);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn .price{opacity:.7;font-weight:400}
.btn-ghost{
  background:transparent;color:var(--ink);border:1px solid var(--line);
}
.btn-ghost:hover{background:var(--panel-2);border-color:var(--ink-faint)}

/* ---- sold-out state (toggled from js/main.js) ---- */
.btn.is-soldout{
  background:var(--panel-2);
  color:var(--ink-faint);
  border:1px solid var(--line);
  cursor:not-allowed;
  letter-spacing:.18em;
}
.btn.is-soldout:hover{
  background:var(--panel-2);
  border-color:var(--line);
  color:var(--ink-faint);
  transform:none;
}

/* ---- nav ---- */
nav{position:sticky;top:0;z-index:50;background:rgba(10,10,11,.85);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.logo{font-family:var(--font-mono);font-weight:700;letter-spacing:.12em;font-size:15px;color:var(--ink);text-decoration:none}
.logo span{color:var(--hot)}
.logo img{height:30px;width:auto}
nav .btn{padding:12px 22px;font-size:13px;white-space:nowrap}

/* ---- hero ---- */
.hero{padding:90px 0 70px;position:relative;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
h1{
  font-size:clamp(40px,7vw,76px);line-height:.98;font-weight:800;
  letter-spacing:-.02em;margin:22px 0 0;text-transform:uppercase;
}
h1 em{font-style:normal;color:var(--hot);display:block}
.hero-sub{font-size:19px;color:var(--ink-dim);margin:24px 0 0;max-width:540px;line-height:1.55}
.video-frame{
  background:var(--panel);border:1px solid rgba(255,77,28,.35);border-radius:14px;
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;width:100%;
  box-shadow:0 0 0 1px rgba(255,77,28,.12), 0 0 50px rgba(255,77,28,.22), 0 0 100px rgba(255,77,28,.10);
}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1}
.video-frame::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.15) 3px);
  pointer-events:none;
}
.play{
  width:74px;height:74px;border-radius:50%;background:var(--hot);
  display:flex;align-items:center;justify-content:center;z-index:2;
  box-shadow:0 0 0 0 rgba(255,77,28,.5);animation:pulse 2.4s infinite;
}
.play::after{content:"";border-left:22px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:6px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,77,28,.45)}70%{box-shadow:0 0 0 22px rgba(255,77,28,0)}100%{box-shadow:0 0 0 0 rgba(255,77,28,0)}}
/* click-to-play video facade (poster + play button) */
.video-facade{cursor:pointer}
.video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  width:74px;height:74px;border-radius:50%;background:var(--hot);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 0 rgba(255,77,28,.5);animation:pulse 2.4s infinite}
.video-play::after{content:"";border-left:22px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:6px}
.video-facade:hover .video-play{background:var(--hot-deep)}
.video-label{position:absolute;top:14px;left:16px;z-index:2;font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;color:var(--ink-dim)}
.rec{position:absolute;top:14px;right:16px;z-index:2;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--hot);display:flex;align-items:center;gap:7px}
.rec::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--hot)}
.hero-cta{display:flex;align-items:center;gap:18px;margin-top:34px;flex-wrap:wrap}
.hero-meta{font-family:var(--font-mono);font-size:13px;color:var(--ink-faint)}
.hero-meta b{color:var(--ink);font-weight:600}

/* ---- section scaffolding ---- */
section{padding:84px 0;border-bottom:1px solid var(--line)}
.sec-head{max-width:620px;margin-bottom:44px}
h2{font-size:clamp(30px,4.5vw,46px);line-height:1.04;font-weight:800;letter-spacing:-.015em;margin-top:16px;text-transform:uppercase}
h2 em{font-style:normal;color:var(--hot)}
.lead{font-size:18px;color:var(--ink-dim);margin-top:18px;line-height:1.6}
.lead-wide{max-width:680px}

/* ---- shift / brands ---- */
/* faint white grid behind the section to break up the black */
.shift{position:relative;overflow:hidden}
.shift::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000 30%,transparent 80%);
  mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000 30%,transparent 80%);
}
.shift .wrap{position:relative;z-index:1}
.shift-quote{font-size:clamp(24px,3.4vw,36px);line-height:1.3;font-weight:700;letter-spacing:-.01em;max-width:860px;margin-top:20px}
.shift-quote span{color:var(--hot)}
.brands{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:48px}
.brand{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:22px;transition:border-color .2s}
.brand:hover{border-color:var(--hot)}
.brand-img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;border:1px solid var(--line);box-shadow:0 6px 22px rgba(0,0,0,.4);margin-bottom:16px;display:block}
.brand .who{font-family:var(--font-mono);font-size:12px;color:var(--ink-faint);letter-spacing:.06em}
.brand .what{font-size:19px;font-weight:700;margin-top:6px}
.brand .arrow{color:var(--hot);font-size:13px;margin-top:10px;font-family:var(--font-mono)}

/* ---- story ---- */
.story-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;margin-top:30px}
.photo{background:var(--panel);border:1px solid var(--line);border-radius:4px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;position:relative;width:100%;object-fit:cover}
.photo span{position:absolute;bottom:14px;left:16px}
.story-h2{font-size:clamp(26px,3.6vw,38px)}
.story p{font-size:17px;color:var(--ink-dim);margin-top:16px;line-height:1.65}
.story p b{color:var(--ink);font-weight:600}
.stat-row{display:flex;gap:34px;margin-top:30px;flex-wrap:wrap}
.stat .num{font-size:40px;font-weight:800;color:var(--hot);letter-spacing:-.02em;font-family:var(--font-mono)}
.stat .lbl{font-size:13px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.1em;margin-top:2px}

/* ---- modules (auto-scrolling carousel) ---- */
.mods-carousel{overflow-x:auto;position:relative;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.mods-carousel::-webkit-scrollbar{display:none}
.mods-carousel.is-scrolling{overflow:hidden}            /* JS-enhanced: hide scrollbar, animate */
.mods-track{display:flex;width:max-content}
.mods-carousel.is-scrolling .mods-track{animation:modScroll 52s linear infinite}
.mods-carousel.is-scrolling:hover .mods-track{animation-play-state:paused}
@keyframes modScroll{to{transform:translateX(-50%)}}
.mod{flex:0 0 300px;margin-right:16px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:30px 28px;position:relative;transition:transform .15s,border-color .2s;text-align:center}
.mod:hover{transform:translateY(-3px);border-color:var(--hot)}
.mod .mn{font-family:var(--font-mono);font-size:34px;font-weight:800;color:var(--line);line-height:1}
.mod-ic{position:relative;width:78px;height:78px;margin:18px auto 16px;display:flex;align-items:center;justify-content:center}
.mod-ic::before{content:"";position:absolute;width:78px;height:78px;border-radius:50%;background:radial-gradient(circle,rgba(255,77,28,.45),rgba(255,77,28,.10) 45%,transparent 70%);filter:blur(5px)}
.mod-ic svg{position:relative;width:48px;height:48px;color:var(--hot);filter:drop-shadow(0 0 7px rgba(255,77,28,.55))}
.mod h4{font-size:20px;font-weight:800;margin:0 0 10px;text-transform:uppercase;line-height:1.15}
.mod p{color:var(--ink-dim);font-size:14.5px;line-height:1.5}
.mods-note{margin-top:24px;font-family:var(--font-mono);font-size:13px;color:var(--ink-faint);letter-spacing:.06em}
.mods-note b{color:var(--hot)}

/* ---- curriculum (25 episodes) ---- */
/* Explicit column counts so the summary panel always fills the empty
   cells beside Episode 25 (25 leaves exactly 1 card on the last row at
   2/3/4 columns). Summary spans (columns − 1) at each breakpoint.
   Mobile is 2-up with compact cards so the list isn't endless. */
.eps{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-items:stretch}
@media(min-width:760px){.eps{grid-template-columns:repeat(3,1fr);gap:18px}}
@media(min-width:1000px){.eps{grid-template-columns:repeat(4,1fr)}}
.ep{background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,transform .15s}
.ep:hover{border-color:var(--hot);transform:translateY(-3px)}
.ep-thumb-wrap{position:relative;display:block}
.ep-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--panel-2);border-bottom:1px solid var(--line)}
.ep-time{position:absolute;right:8px;bottom:8px;background:rgba(10,10,11,.82);color:var(--ink);font-size:12px;letter-spacing:.04em;padding:3px 8px;border-radius:3px;border:1px solid var(--line);line-height:1.2}
.ep-no{font-size:11px;letter-spacing:.14em;color:var(--hot);padding:16px 18px 0}
.ep-title{font-size:16px;font-weight:700;margin:6px 18px 0;line-height:1.2}
.ep-desc{font-size:13.5px;color:var(--ink-dim);margin:8px 18px 20px;line-height:1.5}

/* Episode 25 + summary share the last row; keep them natural height
   (top-aligned) so the tall summary doesn't stretch the Ep25 card. */
.ep--tail{align-self:start}
/* summary panel — spans the leftover cells next to Episode 25 */
.ep-summary{align-self:start;grid-column:1 / -1;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:6px;padding:30px 30px;display:flex;flex-direction:column;justify-content:center}
@media(min-width:760px){.ep-summary{grid-column:span 2}}
@media(min-width:1000px){.ep-summary{grid-column:span 3}}

/* compact episode cards on mobile (2-up) */
@media(max-width:759px){
  .ep-no{font-size:10px;letter-spacing:.12em;padding:11px 12px 0}
  .ep-title{font-size:13.5px;margin:5px 12px 0;line-height:1.2}
  .ep-desc{font-size:11.5px;margin:6px 12px 14px;line-height:1.45}
  .ep-time{font-size:10px;padding:2px 6px;right:6px;bottom:6px}
  .ep-summary{padding:24px 22px}
}
.ep-runtime{font-size:clamp(44px,5vw,60px);font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--ink);margin-top:14px}
.ep-runtime-lbl{font-size:12px;letter-spacing:.12em;color:var(--ink-faint);margin-top:10px}
.stages{list-style:none;margin-top:22px}
.stages li{display:flex;align-items:baseline;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.stages li:first-child{border-top:none}
.st-n{color:var(--hot);font-size:12px;letter-spacing:.06em;flex:none;width:20px}
.st-name{font-weight:700;font-size:15px;flex:1;min-width:0}
.st-eps{margin-left:auto;color:var(--ink-faint);font-size:12px;letter-spacing:.04em;white-space:nowrap}

/* ---- course logo (Be The Brand mark) ---- */
.course-logo{width:auto;height:60px;display:block;margin-bottom:18px}
.course-logo--final{height:90px;margin:0 auto 22px}

/* ---- practical proof banner ---- */
.proof{background:linear-gradient(180deg,var(--panel) 0%,var(--bg) 100%);border:1px solid var(--line);border-radius:4px;padding:54px 44px;text-align:center}
.proof h3{font-size:clamp(24px,3.6vw,38px);font-weight:800;letter-spacing:-.01em;max-width:740px;margin:14px auto 0;line-height:1.15;text-transform:uppercase}
.proof h3 em{font-style:normal;color:var(--hot)}
.proof p{color:var(--ink-dim);font-size:17px;max-width:560px;margin:18px auto 0}
/* 4-up brand proof tiles (logo · product · website · hero) */
.proof-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:40px}
@media(min-width:740px){.proof-grid{grid-template-columns:repeat(4,1fr)}}
.proof-tile{margin:0}
.proof-tile img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;border:1px solid var(--line);border-radius:6px;background:var(--bg)}
.proof-tile--logo img{object-fit:contain;padding:20px}
.proof-tile figcaption{margin-top:12px;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}

/* ---- stack ---- */
.stack-grid{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.stack-item{display:flex;gap:20px;align-items:flex-start;padding:24px 28px;background:var(--panel);border-bottom:1px solid var(--line)}
.stack-item:last-child{border-bottom:none}
.stack-item .ic{width:44px;height:44px;flex:none;border-radius:3px;background:var(--panel-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--hot);font-family:var(--font-mono);font-weight:700;font-size:13px}
.stack-item .ic svg{width:22px;height:22px}
.stack-item h4{font-size:17px;font-weight:700}
.stack-item p{color:var(--ink-dim);font-size:15px;margin-top:3px}
.stack-item .val{margin-left:auto;font-family:var(--font-mono);font-size:13px;color:var(--ink-faint);white-space:nowrap;padding-left:14px}

/* ---- offer ---- */
/* small course logo centered above the checkout card */
.offer-logo-sm{display:block;width:64px;height:auto;margin:0 auto 22px}
.offer{background:var(--panel);border:2px solid var(--hot);border-radius:6px;padding:0;overflow:hidden;max-width:620px;margin:0 auto}
.offer-top{background:var(--hot);color:#fff;padding:14px 30px;font-family:var(--font-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;font-weight:700}
.offer-body{padding:40px 38px 38px}
.offer .pr{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.offer .pr .big{font-size:64px;font-weight:800;letter-spacing:-.03em;font-family:var(--font-mono)}
.offer .pr .cur{font-size:30px;color:var(--ink-dim);font-weight:700}
.offer .pr .note{margin-left:auto;font-size:13px;color:var(--ink-faint);font-family:var(--font-mono);text-align:right;line-height:1.4}
.offer .scarce{margin:22px 0 26px;padding:16px 18px;background:var(--panel-2);border-left:3px solid var(--hot);border-radius:0 3px 3px 0;font-size:15px;color:var(--ink-dim)}
.offer .scarce b{color:var(--ink)}
.scarce-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px}
.scarce-taken{font-size:12px;letter-spacing:.06em;color:var(--ink-faint)}
.progress{height:9px;background:var(--bg);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--hot),var(--amber));border-radius:99px;transition:width .8s ease}
/* countdown timer above the buy button */
.countdown{text-align:center;margin:0 0 18px}
.countdown-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.countdown-clock{display:flex;align-items:flex-start;justify-content:center;gap:6px;color:var(--ink)}
.cd-unit{display:flex;flex-direction:column;align-items:center;background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:8px 0;min-width:58px}
.cd-unit b{font-size:26px;font-weight:800;line-height:1;letter-spacing:.02em}
.cd-unit i{font-style:normal;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-top:5px}
.cd-sep{font-size:24px;font-weight:700;color:var(--hot);line-height:1.4}
.offer .btn{width:100%;font-size:17px;padding:22px}
.seats{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:16px;font-family:var(--font-mono);font-size:13px;color:var(--ink-faint)}
.seats .dot{width:8px;height:8px;border-radius:50%;background:var(--hot);animation:pulse 2.4s infinite}

/* ---- faq ---- */
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;background:none;border:none;color:var(--ink);font-size:18px;font-weight:600;padding:24px 40px 24px 0;cursor:pointer;position:relative;font-family:inherit}
.faq-q::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);color:var(--hot);font-size:24px;font-weight:400;transition:transform .2s}
.faq-q.open::after{transform:translateY(-50%) rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--ink-dim);font-size:16px;line-height:1.65}
.faq-a div{padding:0 0 26px}

/* ---- final cta ---- */
.final{text-align:center;background:var(--panel);border:none}
.final h2{max-width:760px;margin:0 auto}
.final .lead{margin:20px auto 36px;max-width:520px}
.final-lead{margin:20px auto 36px;max-width:520px}

footer{padding:40px 0;text-align:center;color:var(--ink-faint);font-family:var(--font-mono);font-size:12px;letter-spacing:.1em}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* desktop two-column layouts */
@media(min-width:860px){
  /* hero stays single-column: text on top, big video below */
  .story-grid{grid-template-columns:.9fr 1.1fr}
  h1{margin-top:26px}
}

/* tablet / small laptop */
@media(max-width:720px){
  section{padding:64px 0}
  .hero{padding:64px 0 56px}
  .proof{padding:40px 26px}
  .offer-body{padding:32px 26px 30px}
}

/* phones */
@media(max-width:560px){
  :root{--gutter:18px}
  section{padding:54px 0}
  .hero{padding:48px 0 48px}
  .sec-head{margin-bottom:32px}
  .hero-cta{gap:14px}
  /* full-width CTAs read better on a narrow screen */
  .hero-cta .btn,.final .btn{width:100%}
  .hero-meta{width:100%}
  .stat-row{gap:24px}
  .stat .num{font-size:34px}
  .offer .pr .note{margin-left:0;text-align:left;width:100%;margin-top:6px}
  .offer .big{font-size:54px}
  .stack-item{padding:20px}
  .stack-item .val{padding-left:0}
}

/* very small phones — keep the nav from crowding */
@media(max-width:380px){
  nav .btn{padding:10px 16px;font-size:12px}
  .btn{padding:18px 24px}
}

/* =========================================================
   INTERACTION — custom cursor, hover glow, scroll reveal
   ========================================================= */

/* ---- custom cursor (ring + dot) ---- */
.cursor-ring,.cursor-dot{position:fixed;left:0;top:0;border-radius:50%;pointer-events:none;z-index:9999;opacity:0;will-change:transform}
.cursor-dot{width:7px;height:7px;background:var(--hot);margin:-3.5px 0 0 -3.5px}
.cursor-ring{width:34px;height:34px;border:1.5px solid rgba(244,243,239,.4);margin:-17px 0 0 -17px;
  transition:width .18s ease,height .18s ease,margin .18s ease,border-color .2s ease,background .2s ease,opacity .3s ease}
.cursor-ring.is-hover{width:54px;height:54px;margin:-27px 0 0 -27px;border-color:var(--hot);background:rgba(255,77,28,.08)}
body.cursor-on{cursor:none}
body.cursor-on a,body.cursor-on button,body.cursor-on [role="button"],body.cursor-on input,body.cursor-on .faq-q{cursor:none}
body.cursor-on .cursor-ring,body.cursor-on .cursor-dot{opacity:1}
/* paused (e.g. while the Payhip checkout popup is open) → native cursor back */
body.cursor-paused{cursor:auto}
body.cursor-paused .cursor-ring,body.cursor-paused .cursor-dot{opacity:0}

/* ---- hover glow that follows the cursor (cards) ---- */
.brand,.ep,.mod,.stack-item{position:relative;isolation:isolate}
.brand::after,.ep::after,.mod::after,.stack-item::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),rgba(255,77,28,.18),transparent 60%);
}
.brand:hover::after,.ep:hover::after,.mod:hover::after,.stack-item:hover::after{opacity:1}

/* ---- scroll reveal (classes added by JS only) ---- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

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