/* Halloween theme override - loaded after base CSS */
:root {
  --brand: #ff7a1a;            /* pumpkin orange */
  --brand-strong: #ff5a00;     /* deeper orange */
  --accent: #ffb347;           /* warm accent */
  --ring: rgba(255, 122, 26, 0.4);
}

body {
  background:
    radial-gradient(1200px 800px at 70% -10%, rgba(255,122,26,0.06), transparent),
    radial-gradient(1000px 600px at -10% 20%, rgba(255,179,71,0.05), transparent),
    linear-gradient(180deg, #0b0d12, #0a0a0f 60%, #0b0d12);
}

.discord-link { color: #ff7a1a !important; }

/* Buttons */
.button-primary {
  background: linear-gradient(180deg, #ff7a1a, #ff5a00);
  border-color: rgba(255,122,26,0.45);
  box-shadow: 0 6px 22px rgba(255,122,26,0.28);
  color: #130a04;
}
.button-primary:hover { box-shadow: 0 8px 28px rgba(255,122,26,0.4); }

/* Cards and panels: slight orange glow on hover */
.feature:hover,
.plan:hover,
.review-card:hover {
  border-color: rgba(255,122,26,0.45);
  box-shadow: 0 10px 26px rgba(255,122,26,0.14);
}

/* Badges */
.badge,
.badge-accent {
  background: rgba(255,122,26,0.12);
  border-color: rgba(255,122,26,0.35);
  color: #ffb347;
}

/* Section titles with subtle web underline */
.section-title, .hero-title { position: relative; }
.section-title:after, .hero-title:after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 72px; height: 2px;
  background: linear-gradient(90deg, #ff7a1a, transparent);
  opacity: .7;
}

/* Footer rain -> candy corn orange */
.raindrop { background: rgba(255,122,26,0.45) !important; }

/* Decorative: floating bats */
.halloween-bats {
  pointer-events: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}
.bat { position: absolute; width: 18px; height: 8px; background: currentColor; color: #ff7a1a; opacity: .7; transform-origin: center; border-radius: 3px; }
.bat:before, .bat:after { content: ""; position: absolute; top: 0; width: 10px; height: 8px; background: currentColor; border-radius: 50% 50% 0 0; }
.bat:before { left: -9px; transform: rotate(-25deg); }
.bat:after { right: -9px; transform: rotate(25deg); }

@keyframes bat-fly {
  0% { transform: translateY(0) translateX(0) rotate(0deg); }
  50% { transform: translateY(-8px) translateX(20px) rotate(4deg); }
  100% { transform: translateY(0) translateX(40px) rotate(0deg); }
}

.bat.animate {
  animation: bat-fly 3.6s ease-in-out infinite;
}

/* Spider decoration */
.spider { position: fixed; top: -60px; left: 12%; width: 16px; height: 16px; border-radius: 50%; background: #0f0f14; border: 1px solid rgba(255,122,26,0.45); box-shadow: 0 4px 12px rgba(0,0,0,0.5); z-index: 2; }
.spider:before { content: ""; position: absolute; top: -140px; left: 50%; width: 2px; height: 140px; transform: translateX(-50%); background: linear-gradient(180deg, rgba(255,122,26,.35), rgba(255,122,26,.1)); }
.spider:after { content: ""; position: absolute; inset: 3px; border-radius: 50%; box-shadow: inset 0 -2px 0 rgba(255,255,255,0.08); }

@keyframes spider-down { from { transform: translateY(0); } to { transform: translateY(160px); } }
@keyframes spider-swing { 0% { transform: translateY(160px) rotate(-6deg); } 50% { transform: translateY(160px) rotate(6deg); } 100% { transform: translateY(160px) rotate(-6deg); } }

.spider { animation: spider-down 1.2s ease-out forwards, spider-swing 3s ease-in-out 1.2s infinite; transform-origin: top center; }

/* Seasonal pill */
.season-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,122,26,0.35); background: rgba(255,122,26,0.08); color: #ffb347; font-weight: 700; margin: 0 0 8px; box-shadow: 0 0 0 3px rgba(255,122,26,0.08); }

/* Disable animated decorations if present */
.halloween-bats, .spider { display: none !important; }

/* Subtle cobweb corners on hero/pricing containers */
.hero-inner, .pricing .container, .reviews-viewport {
  position: relative;
}
.hero-inner:before, .pricing .container:before, .reviews-viewport:before {
  content: ""; position: absolute; top: -10px; right: -10px; width: 80px; height: 80px; opacity: .08;
  background:
    radial-gradient(circle at 0 0, rgba(255,122,26,.35) 2px, transparent 3px) 0 0/12px 12px,
    radial-gradient(circle at 100% 0, rgba(255,122,26,.25) 2px, transparent 3px) 0 0/12px 12px;
  filter: blur(.2px);
}

/* Halloween toggle for site header backdrop */
.site-header {
  background: linear-gradient(180deg, rgba(10,10,15,0.92), rgba(10,10,15,0.6));
}