:root.halloween { --accent:#ff7a18; --accent-2:#ffd84d; --glow:0 0 24px rgba(255,122,24,.5), 0 0 48px rgba(255,122,24,.25); }
.halloween body{ background: radial-gradient(1200px 600px at 50% 0%, rgba(255,122,24,.05), transparent 60%), #0b1020; }
.halloween .btn, .halloween .btn.primary{ box-shadow: var(--glow); }
.halloween .hero .inner h1, .halloween .t, .halloween .price { text-shadow: 0 2px 12px rgba(255,122,24,.25); }
.halloween .nav .active{ text-shadow: var(--glow); }
#halloween-banner{ display:none; position: sticky; top:0; z-index: 1000; background: linear-gradient(90deg, rgba(255,122,24,.2), rgba(255,216,77,.2)); color:#ffd84d; text-align:center; font: 800 14px/1.2 Inter, system-ui, sans-serif; padding:10px 12px; border-bottom:1px solid rgba(255,216,77,.25); }
.bat{ position:fixed; top:10vh; font-size:28px; opacity:.85; animation: bat-fly linear infinite; pointer-events:none; z-index:900; }
@keyframes bat-fly { 0%{ transform:translateY(0) translateX(0) rotate(0deg);} 50%{ transform:translateY(-12vh) translateX(6vw) rotate(10deg);} 100%{ transform:translateY(0) translateX(0) rotate(0deg);} }
.web{ position: fixed; z-index: 850; pointer-events: none; opacity:.35; filter: drop-shadow(0 0 8px rgba(255,216,77,.1)); }
.web.tl{ top:0; left:0; width:28vmin; aspect-ratio:1; } .web.tr{ top:0; right:0; width:32vmin; aspect-ratio:1; transform:scaleX(-1); } .web.bl{ bottom:0; left:0; width:24vmin; aspect-ratio:1; transform:scaleY(-1); } .web.br{ bottom:0; right:0; width:26vmin; aspect-ratio:1; transform:scale(-1); }
 to{ transform: translateX(2%)} }
@keyframes mist-h { from{ background-position: 0 0, 0 0, 0 0, 0 0;}
                    to{   background-position: 8% 0, -6% 0, 10% 0, -8% 0;} }
@keyframes mist-v {  0%{ transform: translateY(-1.5%);} 
                   50%{ transform: translateY(1.5%);} 
                  100%{ transform: translateY(-1.5%);} }