/* ======================================================================
   Halloween neon theme — loaded after styles.css.
   Swaps the brand teal/cyan for a multi-neon spooky palette and adds
   decorations (moon, bats, cobweb, fog). To turn it off after the
   season, remove the halloween.css <link> and the .spooky markup.
   ====================================================================== */
:root{
  --pumpkin:#FF7A00;  --pumpkin-rgb:255,122,0;
  --slime:#39FF14;    --slime-rgb:57,255,20;
  --hex:#B026FF;      --hex-rgb:176,38,255;
  --ghoul:#FF2BD6;    --ghoul-rgb:255,43,214;
  --spirit:#00F0FF;   --spirit-rgb:0,240,255;

  /* the whole site keys off these two */
  --teal:var(--pumpkin); --teal-rgb:var(--pumpkin-rgb); --teal-2:#FFA640;
  --cyan:var(--slime);   --cyan-rgb:var(--slime-rgb);

  --black:#07040c;
  --near-black:#0e0915;
  --panel:#140d1d;
  --line:#2a1f38;
}
::selection{background:var(--hex); color:#fff;}
:focus-visible{outline-color:var(--ghoul);}

/* ---------- Neon type ---------- */
.kicker{color:var(--pumpkin); text-shadow:0 0 10px rgba(var(--pumpkin-rgb),0.6);}
.kicker::before{background:var(--pumpkin); box-shadow:0 0 8px var(--pumpkin);}
h2{text-shadow:0 0 22px rgba(var(--hex-rgb),0.35);}
.hero h1{text-shadow:0 0 30px rgba(var(--hex-rgb),0.45), 0 0 2px rgba(255,255,255,0.4);}
.hero h1 .accent{
  background:linear-gradient(90deg, var(--pumpkin), var(--ghoul), var(--hex), var(--slime), var(--pumpkin));
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text;
  text-shadow:none;
  filter:drop-shadow(0 0 14px rgba(var(--ghoul-rgb),0.55));
  animation:accent-shine 7s ease-in-out infinite, neon-flicker 6s 2s infinite;
}
@keyframes neon-flicker{
  0%,19%,21%,23%,54%,56%,100%{opacity:1;}
  20%,22%,55%{opacity:.55;}
}

/* ---------- Buttons ---------- */
.btn-teal{color:#120700; box-shadow:0 0 18px rgba(var(--pumpkin-rgb),0.45);}
.btn-teal:hover{box-shadow:0 0 28px rgba(var(--pumpkin-rgb),0.7), 0 0 0 1px var(--ghoul);}
.btn-outline{border-color:rgba(var(--hex-rgb),0.6); box-shadow:inset 0 0 10px rgba(var(--hex-rgb),0.15);}
.btn-outline:hover{border-color:var(--slime); color:var(--slime); box-shadow:0 0 18px rgba(var(--slime-rgb),0.35), inset 0 0 14px rgba(var(--slime-rgb),0.15);}

/* ---------- Nav & promo ---------- */
.site-nav{background:rgba(7,4,12,0.85);}
.site-nav.scrolled{background:rgba(7,4,12,0.95);}
.site-nav::after{background:linear-gradient(90deg, var(--pumpkin), var(--ghoul), var(--hex), var(--slime));}
.nav-links a:hover{color:var(--slime); text-shadow:0 0 10px rgba(var(--slime-rgb),0.6);}
.promo-bar{
  background:linear-gradient(90deg, #3b0a5c, var(--hex), var(--ghoul), var(--pumpkin), var(--hex), #3b0a5c);
  background-size:300% 100%;
}
.promo-bar::before{content:"\1F383"; margin-right:2px;}
.promo-pill{color:var(--pumpkin);}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(ellipse 60% 70% at 85% 20%, rgba(var(--hex-rgb),0.28), transparent 70%),
    radial-gradient(ellipse 45% 45% at 10% 100%, rgba(var(--slime-rgb),0.12), transparent 70%),
    var(--black);
}
.hero::before{
  background-image:
    linear-gradient(rgba(var(--hex-rgb),0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--hex-rgb),0.07) 1px, transparent 1px);
}
.hero-glow span:nth-child(1){background:radial-gradient(circle, rgba(var(--hex-rgb),0.6), transparent 65%);}
.hero-glow span:nth-child(2){background:radial-gradient(circle, rgba(var(--slime-rgb),0.35), transparent 65%);}
.curve-power{stroke:var(--pumpkin); filter:drop-shadow(0 0 8px rgba(var(--pumpkin-rgb),0.9));}
.curve-torque{stroke:var(--slime); filter:drop-shadow(0 0 6px rgba(var(--slime-rgb),0.7));}
.tracer{filter:drop-shadow(0 0 6px var(--ghoul)) drop-shadow(0 0 14px var(--hex));}
.trust-row li:nth-child(4n+1)::before{background-color:rgba(var(--pumpkin-rgb),0.2); box-shadow:0 0 0 1px var(--pumpkin), 0 0 10px rgba(var(--pumpkin-rgb),0.6);}
.trust-row li:nth-child(4n+2)::before{background-color:rgba(var(--slime-rgb),0.2); box-shadow:0 0 0 1px var(--slime), 0 0 10px rgba(var(--slime-rgb),0.6);}
.trust-row li:nth-child(4n+3)::before{background-color:rgba(var(--ghoul-rgb),0.2); box-shadow:0 0 0 1px var(--ghoul), 0 0 10px rgba(var(--ghoul-rgb),0.6);}
.trust-row li:nth-child(4n)::before{background-color:rgba(var(--hex-rgb),0.2); box-shadow:0 0 0 1px var(--hex), 0 0 10px rgba(var(--hex-rgb),0.6);}

/* decorations */
.spooky{position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden;}
.spooky-moon{
  position:absolute; top:110px; right:9%; width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff6d8, #ffd27a 55%, #ff9a2e);
  box-shadow:0 0 40px rgba(var(--pumpkin-rgb),0.7), 0 0 120px rgba(var(--pumpkin-rgb),0.35);
  opacity:.9; font-size:21px;
  display:flex; align-items:center; justify-content:center;
  animation:moon-glow 4s ease-in-out infinite alternate;
}
@keyframes moon-glow{to{box-shadow:0 0 60px rgba(var(--pumpkin-rgb),0.9), 0 0 160px rgba(var(--ghoul-rgb),0.35);}}
.moon-tune{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; line-height:.95; font-weight:900; letter-spacing:.06em; transform:rotate(-8deg);}
.mt-line{display:flex;}
.moon-tune span span{
  display:inline-block; color:#1a0826;
  text-shadow:0 0 6px var(--ghoul), 0 0 14px var(--hex);
  animation:mt-wave 2.4s calc(var(--i) * .12s) ease-in-out infinite, mt-neon 6s calc(var(--i) * .3s) linear infinite;
}
@keyframes mt-wave{0%,60%,100%{transform:translateY(0) scale(1);} 30%{transform:translateY(-5px) scale(1.15);}}
@keyframes mt-neon{
  0%,100%{text-shadow:0 0 6px var(--ghoul), 0 0 14px var(--ghoul);}
  25%{text-shadow:0 0 6px var(--hex), 0 0 14px var(--hex);}
  50%{text-shadow:0 0 6px var(--slime), 0 0 14px var(--slime);}
  75%{text-shadow:0 0 6px var(--spirit), 0 0 14px var(--spirit);}
  90%{text-shadow:none;} 92%{text-shadow:0 0 6px var(--ghoul), 0 0 14px var(--ghoul);}
}
.spooky-moon::after{ /* craters */
  content:""; position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 62% 30%, rgba(160,80,0,0.25) 0 9%, transparent 10%),
    radial-gradient(circle at 40% 66%, rgba(160,80,0,0.2) 0 12%, transparent 13%),
    radial-gradient(circle at 72% 62%, rgba(160,80,0,0.18) 0 6%, transparent 7%);
}
.bat{position:absolute; width:88px; fill:#05020a; filter:drop-shadow(0 0 6px var(--c, var(--hex)));}
.bat svg{position:relative; z-index:1; width:100%; height:auto; overflow:visible;}
.bat .wing{transform-origin:50% 60%; animation:flap .28s ease-in-out infinite alternate;}
.bat-1{top:130px; right:22%; --c:var(--hex); animation:bat-fly-a 13s ease-in-out infinite;}
.bat-2{top:220px; right:6%; width:64px; --c:var(--slime); animation:bat-fly-b 16s ease-in-out infinite;}
.bat-3{top:90px; left:46%; width:52px; --c:var(--ghoul); animation:bat-fly-a 19s 2s ease-in-out infinite reverse;}
@keyframes flap{to{transform:scaleY(0.45);}}
@keyframes bat-fly-a{
  0%,100%{transform:translate(0,0) rotate(-4deg);}
  33%{transform:translate(-90px,40px) rotate(6deg);}
  66%{transform:translate(50px,-30px) rotate(-8deg);}
}
@keyframes bat-fly-b{
  0%,100%{transform:translate(0,0) rotate(5deg);}
  50%{transform:translate(-120px,-50px) rotate(-6deg);}
}
/* Launch-control flame map: twin exhaust pops out of each bat's tail,
   like a VQ on a 2-step — a burst of bangs, a pause, then another burst. */
.exhaust{position:absolute; left:50%; top:46%; width:34%; height:190%; transform:translateX(-50%); display:flex; justify-content:center; gap:4%; pointer-events:none;}
.exhaust i{
  display:block; width:46%; height:100%; transform-origin:50% 0; opacity:0; transform:scaleY(0);
  filter:drop-shadow(0 0 3px #ff8a00) drop-shadow(0 0 9px rgba(255,50,0,0.85));
  animation:lc-pop var(--lc, 3.2s) var(--lc-delay, 0s) linear infinite;
}
.exhaust svg{width:100%; height:100%; overflow:visible;}
.exhaust use{transform-origin:50% 0; animation:fl-lick .16s ease-in-out infinite alternate;}
.exhaust i:nth-child(1){rotate:14deg;}
.exhaust i:nth-child(2){rotate:-14deg; animation-delay:calc(var(--lc-delay, 0s) + 0.05s);}
.exhaust i:nth-child(2) use{animation-duration:.13s; animation-direction:alternate-reverse;}
@keyframes fl-lick{
  0%{transform:scale(1,1) skewX(0deg);}
  35%{transform:scale(.88,1.12) skewX(5deg);}
  70%{transform:scale(1.08,.92) skewX(-4deg);}
  100%{transform:scale(.94,1.06) skewX(3deg);}
}
.exhaust::after{ /* muzzle flash at the tips on each bang */
  content:""; position:absolute; left:50%; top:-6%; width:90%; aspect-ratio:1; border-radius:50%;
  transform:translateX(-50%) scale(0); opacity:0;
  background:radial-gradient(circle, #fff 0 15%, rgba(255,210,60,0.9) 35%, rgba(255,90,0,0.5) 60%, transparent 72%);
  animation:lc-flash var(--lc, 3.2s) var(--lc-delay, 0s) linear infinite;
}
.bat-1{--lc:3.4s; --lc-delay:.4s;}
.bat-2{--lc:4.1s; --lc-delay:1.6s;}
.bat-3{--lc:2.9s; --lc-delay:2.3s;}
@keyframes lc-pop{
  0%,54%{opacity:0; transform:scaleY(0);}
  56%{opacity:1; transform:scaleY(1.15) scaleX(1.1);}
  59%{opacity:.9; transform:scaleY(.55);}
  61%{opacity:0; transform:scaleY(.2);}
  64%{opacity:1; transform:scaleY(1.35) scaleX(1.15);}
  67%{opacity:.8; transform:scaleY(.7);}
  69%{opacity:0; transform:scaleY(.2);}
  71%{opacity:1; transform:scaleY(.95);}
  73%{opacity:.6; transform:scaleY(.5);}
  76%{opacity:1; transform:scaleY(1.5) scaleX(1.2);}
  81%{opacity:.5; transform:scaleY(.8);}
  85%,100%{opacity:0; transform:scaleY(0);}
}
@keyframes lc-flash{
  0%,55%,60%,63%,68%,70%,75%,80%,100%{opacity:0; transform:translateX(-50%) scale(0);}
  56%,64%,71%,76%{opacity:1; transform:translateX(-50%) scale(1);}
}
.cobweb{position:absolute; top:68px; left:0; width:180px; opacity:.4; stroke:rgba(var(--spirit-rgb),0.8); filter:drop-shadow(0 0 4px rgba(var(--spirit-rgb),0.6));}
.fog{
  position:absolute; left:-10%; right:-10%; bottom:-30px; height:160px;
  background:
    radial-gradient(ellipse 30% 60% at 20% 70%, rgba(var(--hex-rgb),0.22), transparent 70%),
    radial-gradient(ellipse 30% 60% at 55% 80%, rgba(var(--slime-rgb),0.14), transparent 70%),
    radial-gradient(ellipse 30% 60% at 85% 70%, rgba(var(--ghoul-rgb),0.18), transparent 70%);
  filter:blur(18px); animation:fog-drift 18s ease-in-out infinite alternate;
}
@keyframes fog-drift{to{transform:translateX(6%);}}
@media (max-width: 820px){
  .spooky-moon{width:84px; height:84px; top:150px; right:6%; opacity:.75; font-size:14px;}
  /* dyno curves + WHP/TQ labels tucked right under the moon */
  .dyno{top:244px; bottom:auto; right:6%; width:min(340px, 64%);}
  .bat-3, .cobweb{display:none;}
  .bat-1{right:30%; top:150px; width:64px;}
  .bat-2{width:48px;}
}

/* ---------- Ticker ---------- */
.ticker{background:linear-gradient(90deg, rgba(var(--hex-rgb),0.14), rgba(var(--pumpkin-rgb),0.06), rgba(var(--hex-rgb),0.14));}
.ticker span:nth-child(4n+1){color:var(--pumpkin); text-shadow:0 0 10px rgba(var(--pumpkin-rgb),0.6);}
.ticker span:nth-child(4n+2){color:var(--slime); text-shadow:0 0 10px rgba(var(--slime-rgb),0.6);}
.ticker span:nth-child(4n+3){color:var(--ghoul); text-shadow:0 0 10px rgba(var(--ghoul-rgb),0.6);}
.ticker span:nth-child(4n){color:var(--spirit); text-shadow:0 0 10px rgba(var(--spirit-rgb),0.6);}
.ticker span::after{background:var(--hex); box-shadow:0 0 8px var(--hex);}

/* ---------- One neon per item ---------- */
.stat:nth-child(1){--n:var(--pumpkin); --n-rgb:var(--pumpkin-rgb);}
.stat:nth-child(2){--n:var(--slime);   --n-rgb:var(--slime-rgb);}
.stat:nth-child(3){--n:var(--ghoul);   --n-rgb:var(--ghoul-rgb);}
.stat:nth-child(4){--n:var(--hex);     --n-rgb:var(--hex-rgb);}
.stat-num{background:none; -webkit-text-fill-color:var(--n); color:var(--n); filter:none; text-shadow:0 0 16px rgba(var(--n-rgb),0.7);}
.stat::before{background:linear-gradient(90deg, transparent, var(--n), transparent);}
.stat:hover{background:rgba(var(--n-rgb),0.06);}

.tiers .tier:nth-child(3n+1){--n:var(--slime); --n-rgb:var(--slime-rgb);}
.tiers .tier:nth-child(3n+2){--n:var(--pumpkin); --n-rgb:var(--pumpkin-rgb);}
.tiers .tier:nth-child(3n){--n:var(--hex); --n-rgb:var(--hex-rgb);}
.track-card{--n:var(--ghoul); --n-rgb:var(--ghoul-rgb);}
.tiers .tier .stage, .track-card .stage{color:var(--n); text-shadow:0 0 10px rgba(var(--n-rgb),0.6);}
.tiers .tier:hover, .track-card:hover{border-color:var(--n); box-shadow:0 0 0 1px var(--n), 0 0 40px rgba(var(--n-rgb),0.3);}
.tiers .tier li::before, .track-card li::before{border-color:var(--n);}
.tier.featured{background:linear-gradient(180deg, rgba(var(--n-rgb, var(--pumpkin-rgb)),0.12), var(--panel) 45%);}
.tier-badge{box-shadow:0 0 16px rgba(var(--pumpkin-rgb),0.7);}
.tier-badge::before{content:"\1F383\00a0";}

.caps > .cap:nth-child(4n+1), .why-grid > .cap:nth-child(4n+1){--n:var(--pumpkin); --n-rgb:var(--pumpkin-rgb);}
.caps > .cap:nth-child(4n+2), .why-grid > .cap:nth-child(4n+2){--n:var(--slime); --n-rgb:var(--slime-rgb);}
.caps > .cap:nth-child(4n+3), .why-grid > .cap:nth-child(4n+3){--n:var(--ghoul); --n-rgb:var(--ghoul-rgb);}
.caps > .cap:nth-child(4n), .why-grid > .cap:nth-child(4n){--n:var(--hex); --n-rgb:var(--hex-rgb);}
.cap{--n:var(--pumpkin); --n-rgb:var(--pumpkin-rgb);}
.cap::after{background:var(--n); box-shadow:0 0 10px var(--n);}
.cap:hover{border-color:var(--n); box-shadow:0 0 32px rgba(var(--n-rgb),0.25);}
.cap .why-icon{color:var(--n); background:rgba(var(--n-rgb),0.1); border-color:rgba(var(--n-rgb),0.45); box-shadow:0 0 22px rgba(var(--n-rgb),0.25);}
.cap .why-tag{color:var(--n);}

/* ---------- Sections ---------- */
.section-alt{background:radial-gradient(ellipse 60% 50% at 50% 0%, rgba(var(--hex-rgb),0.08), transparent 70%), var(--near-black);}
.faq-list details[open]{border-color:rgba(var(--ghoul-rgb),0.55); box-shadow:0 0 24px rgba(var(--ghoul-rgb),0.12);}
.faq-list summary:hover{color:var(--ghoul);}
.cta-band::after{ /* low-hanging spider */
  content:""; position:absolute; top:0; right:12%; width:1px; height:90px;
  background:linear-gradient(rgba(var(--spirit-rgb),0.7), rgba(var(--spirit-rgb),0.2));
  animation:spider-drop 5s ease-in-out infinite alternate;
}
.cta-band{position:relative;}
@keyframes spider-drop{to{height:150px;}}
.cta-mono{filter:drop-shadow(0 0 18px rgba(var(--pumpkin-rgb),0.6)) drop-shadow(0 0 40px rgba(var(--hex-rgb),0.4));}
.site-footer::before{background:linear-gradient(90deg, transparent, var(--pumpkin), var(--ghoul), var(--hex), var(--slime), transparent);}
.socials a:hover{border-color:var(--ghoul); color:var(--ghoul); box-shadow:0 0 16px rgba(var(--ghoul-rgb),0.5);}