/* ===== RESET & BASE ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ===== VARIABLES ===== */
:root {
  --bg-base:    #070310;
  --bg-surface: #090514;
  --bg-card:    #0e081a;

  --blood:       #c40000;
  --blood-light: #ff3b3b;
  --blood-glow:  rgba(196, 0, 0, 0.45);

  --pumpkin:       #ff7a1a;
  --pumpkin-light: #ffa04d;
  --pumpkin-glow:  rgba(255, 122, 26, 0.4);
  --toxic:         #8aff5e;
  --toxic-dim:     rgba(138, 255, 94, 0.5);
  --ghoul:         #b78aff;
  --ruby:          #e4485c;
  --ruby-light:    #ff6b7e;

  --text-primary:   #f3edе2;
  --text-primary:   #f3ede2;
  --text-secondary: #a89bc0;
  --text-muted:     #655a80;

  --hairline:        rgba(183, 138, 255, 0.16);
  --hairline-strong: rgba(183, 138, 255, 0.3);

  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-spooky:  'Creepster', 'Space Grotesk', cursive;

  --radius-btn: 6px;
}

/* ===== TYPOGRAPHY ===== */
h1, h2 {
  font-family: var(--font-spooky);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.12;
}

h3 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

p { line-height: 1.7; }

.section-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pumpkin-light);
  margin-bottom: 1.1rem;
  text-shadow: 0 0 18px var(--pumpkin-glow);
}

/* ===== MARQUEE BANNER ===== */
#spooky-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: 40px;
  overflow: hidden;
  background: linear-gradient(90deg, #1d0202, #4a0505 50%, #1d0202);
  border-bottom: 1px solid rgba(196, 0, 0, 0.7);
  display: flex;
  align-items: center;
}

.banner-track {
  display: flex;
  white-space: nowrap;
  animation: marquee 28s linear infinite;
}

.banner-track span {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--pumpkin-light);
  text-shadow: 0 0 14px var(--pumpkin-glow);
  padding-right: 2rem;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===== NAV ===== */
#nav {
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.2rem 2.5rem;
  transition: background 300ms ease, backdrop-filter 300ms ease, border-color 300ms ease;
  border-bottom: 1px solid transparent;
}

#nav.nav-scrolled {
  background: rgba(12, 7, 22, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}

.nav-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { height: 42px; width: 42px; display: block; filter: drop-shadow(0 0 10px rgba(255, 122, 26, 0.5)); }
.footer-logo img { height: 34px; width: 34px; }

.nav-right { display: flex; align-items: center; gap: 1.5rem; }

.nav-division {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pumpkin-light);
  border-left: 1px solid var(--hairline-strong);
  padding-left: 1.5rem;
}

/* dangling spider */
.spider-line {
  position: absolute;
  top: 100%;
  left: 12%;
  width: 1px;
  height: 90px;
  background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.1));
  animation: spiderBob 4s ease-in-out infinite;
  transform-origin: top center;
  pointer-events: none;
}

.spider {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 22px;
}

@keyframes spiderBob {
  0%, 100% { height: 90px; }
  50% { height: 130px; }
}

/* ===== ATMOSPHERE ===== */
.cobweb {
  position: fixed;
  font-size: 120px;
  opacity: 0.16;
  z-index: 50;
  pointer-events: none;
  filter: grayscale(1);
}
.cw-left  { top: 28px; left: -28px; transform: rotate(-20deg); }
.cw-right { top: 28px; right: -28px; transform: rotate(20deg) scaleX(-1); }

.fog {
  position: fixed;
  bottom: -60px;
  width: 140vw;
  height: 220px;
  z-index: 40;
  pointer-events: none;
  filter: blur(42px);
}
.fog-one {
  left: -20vw;
  background: radial-gradient(ellipse at center, rgba(183, 138, 255, 0.1), transparent 70%);
  animation: fogDrift 26s ease-in-out infinite alternate;
}
.fog-two {
  left: -10vw;
  background: radial-gradient(ellipse at center, rgba(138, 255, 94, 0.06), transparent 70%);
  animation: fogDrift 34s ease-in-out infinite alternate-reverse;
}
@keyframes fogDrift {
  from { transform: translateX(-6vw); }
  to   { transform: translateX(6vw); }
}

/* bats */
.bat {
  position: absolute;
  font-size: 26px;
  z-index: 3;
  pointer-events: none;
  animation: batFly 16s linear infinite, batFlap 0.5s ease-in-out infinite alternate;
}
.b1 { top: 16%; animation-delay: 0s, 0s; }
.b2 { top: 24%; font-size: 20px; animation-delay: 3.2s, 0.1s; }
.b3 { top: 11%; font-size: 32px; animation-delay: 6.8s, 0.2s; }
.b4 { top: 31%; font-size: 17px; animation-delay: 10s, 0.05s; }
.b5 { top: 20%; font-size: 23px; animation-delay: 13s, 0.15s; }

@keyframes batFly {
  0%   { left: -6%; transform: translateY(0); }
  25%  { transform: translateY(-34px); }
  50%  { transform: translateY(12px); }
  75%  { transform: translateY(-26px); }
  100% { left: 104%; transform: translateY(0); }
}
@keyframes batFlap {
  from { scale: 1 1; }
  to   { scale: 1.15 0.82; }
}

/* ghosts */
.ghost {
  position: absolute;
  font-size: 42px;
  opacity: 0.5;
  z-index: 3;
  pointer-events: none;
  animation: ghostFloat 7s ease-in-out infinite;
  filter: drop-shadow(0 0 16px rgba(183, 138, 255, 0.5));
}
.g1 { top: 34%; left: 7%;  animation-delay: 0s; }
.g2 { top: 22%; right: 9%; font-size: 54px; animation-delay: 2.3s; }
.g3 { top: 58%; right: 20%; font-size: 30px; animation-delay: 4.1s; }
.g4 { top: 18%; right: 12%; font-size: 44px; animation-delay: 1s; }

@keyframes ghostFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); opacity: 0.35; }
  50%      { transform: translateY(-26px) rotate(5deg); opacity: 0.6; }
}

/* ===== HERO ===== */
#hero {
  position: relative;
  padding: 12rem 2.5rem 9rem;
  overflow: hidden;
}

.moon {
  position: absolute;
  top: 90px;
  right: 10%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff8e0 0%, #f0e3b8 55%, #d8c68e 100%);
  box-shadow:
    0 0 60px rgba(255, 244, 200, 0.5),
    0 0 160px rgba(255, 244, 200, 0.25);
  z-index: 1;
}

.moon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 64% 40%, rgba(173, 155, 110, 0.5) 7%, transparent 8.5%),
    radial-gradient(circle at 36% 62%, rgba(173, 155, 110, 0.45) 5%, transparent 6.5%),
    radial-gradient(circle at 56% 72%, rgba(173, 155, 110, 0.4) 4%, transparent 5.5%);
}

.hero-inner {
  position: relative;
  z-index: 4;
  max-width: 1160px;
  margin: 0 auto;
}

.hero-eyebrow {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--toxic);
  margin-bottom: 1.75rem;
  text-shadow: 0 0 20px var(--toxic-dim);
}

#hero h1 {
  font-family: 'Nosifer', var(--font-spooky);
  font-size: clamp(1.8rem, 4.1vw, 3.4rem);
  line-height: 1.35;
  color: var(--blood-light);
  background: linear-gradient(180deg, #ff5a5a 0%, #d61414 45%, #7a0202 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px var(--blood-glow)) drop-shadow(0 4px 2px rgba(0, 0, 0, 0.8));
  margin-bottom: 1.75rem;
  max-width: 900px;
  animation: flicker 6s linear infinite;
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.75; }
  94% { opacity: 1; }
  96% { opacity: 0.85; }
  97% { opacity: 1; }
}

.hero-sub {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  color: var(--text-secondary);
  max-width: 620px;
  margin-bottom: 4rem;
  line-height: 1.8;
}

.hero-rule {
  height: 1px;
  background: linear-gradient(90deg, var(--pumpkin-glow), var(--hairline), transparent);
  margin-bottom: 3rem;
}

.hero-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}

.pillar-num {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--toxic);
  margin-bottom: 0.9rem;
}

.pillar-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.pillar-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.graveyard {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 150px;
  z-index: 2;
  pointer-events: none;
}

/* ===== TIERS ===== */
#tiers {
  padding: 5rem 2.5rem 4rem;
  max-width: 1160px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

.tiers-header { margin-bottom: 3.5rem; max-width: 640px; }

.tiers-header h2 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  color: var(--pumpkin);
  text-shadow: 0 0 24px var(--pumpkin-glow);
  margin-bottom: 0.9rem;
}

.tiers-header p { color: var(--text-secondary); font-size: 1rem; }

.tiers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}

.tier-card {
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 250ms ease, transform 250ms ease, box-shadow 250ms ease;
}

.tier-card:hover {
  border-color: var(--hairline-strong);
  transform: translateY(-5px);
  box-shadow: 0 24px 60px rgba(183, 138, 255, 0.12);
}

.card-web {
  position: absolute;
  top: -6px;
  right: 2px;
  font-size: 44px;
  opacity: 0.22;
  pointer-events: none;
  filter: grayscale(1);
}

.tier-card-gold {
  border-color: rgba(255, 122, 26, 0.55);
  background: linear-gradient(180deg, rgba(255, 122, 26, 0.09) 0%, transparent 42%), var(--bg-card);
  box-shadow: 0 0 44px rgba(255, 122, 26, 0.18);
}

.tier-card-gold:hover {
  border-color: var(--pumpkin);
  box-shadow: 0 0 70px rgba(255, 122, 26, 0.3);
}

.tier-card-ruby {
  border-color: rgba(228, 72, 92, 0.45);
  background: linear-gradient(180deg, rgba(228, 72, 92, 0.07) 0%, transparent 40%), var(--bg-card);
}

.tier-card-ruby:hover {
  border-color: var(--ruby);
  box-shadow: 0 0 60px rgba(228, 72, 92, 0.2);
}

.tier-flag {
  position: absolute;
  top: 0;
  right: 2rem;
  transform: translateY(-50%);
  background: linear-gradient(120deg, #3d1703, #2a0f04);
  border: 1px solid rgba(255, 122, 26, 0.65);
  color: var(--pumpkin-light);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.36rem 1rem;
  border-radius: 100px;
  box-shadow: 0 0 20px rgba(255, 122, 26, 0.35);
  animation: flagGlow 2.2s ease-in-out infinite alternate;
}

@keyframes flagGlow {
  from { box-shadow: 0 0 12px rgba(255, 122, 26, 0.25); }
  to   { box-shadow: 0 0 30px rgba(255, 122, 26, 0.55); }
}

.discount-tag {
  position: absolute;
  top: -16px;
  left: 1.6rem;
  background: var(--toxic);
  color: #0c2404;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  transform: rotate(-6deg);
  box-shadow: 0 0 26px var(--toxic-dim);
  animation: tagWiggle 3.4s ease-in-out infinite;
}

@keyframes tagWiggle {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(-1deg) scale(1.05); }
}

.tier-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.tier-label-gold { color: var(--pumpkin-light); }
.tier-label-ruby { color: var(--ruby-light); }

.tier-price-block { margin-bottom: 1rem; }

.price-was {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}
.price-was s { color: var(--ruby-light); text-decoration-thickness: 2px; }

.tier-price {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  line-height: 1;
}

.price-currency {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-primary);
  padding-top: 0.45rem;
}

.price-amount {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.2rem);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.tier-card-gold .price-amount,
.tier-card-gold .price-currency {
  color: var(--pumpkin-light);
  text-shadow: 0 0 26px var(--pumpkin-glow);
}

.price-period {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

.tier-desc {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.tier-divider {
  border: none;
  border-top: 1px dashed var(--hairline-strong);
  margin: 0 0 1.5rem;
}

.tier-list {
  list-style: none;
  margin: 0 0 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex-grow: 1;
}

.tier-list li {
  font-size: 0.9rem;
  color: var(--text-secondary);
  padding-left: 1.7rem;
  position: relative;
  line-height: 1.6;
}

.tier-list li strong { color: var(--text-primary); font-weight: 600; }

.tier-list li::before {
  content: "🦴";
  position: absolute;
  left: 0;
  font-size: 0.78rem;
  top: 2px;
}

.tier-list .tier-list-lead {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-style: italic;
  padding-left: 0;
  margin-bottom: 0.15rem;
}
.tier-list .tier-list-lead::before { display: none; }

.tier-note {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.74rem;
  color: var(--text-muted);
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-btn);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 200ms ease;
  white-space: nowrap;
}

.btn-pumpkin {
  background: linear-gradient(120deg, var(--pumpkin), #e05d00);
  color: #1d0c00;
  border-color: var(--pumpkin);
  box-shadow: 0 0 26px var(--pumpkin-glow);
}
.btn-pumpkin:hover {
  background: linear-gradient(120deg, var(--pumpkin-light), var(--pumpkin));
  box-shadow: 0 0 46px var(--pumpkin-glow);
  transform: translateY(-2px);
}

.btn-ruby {
  background: linear-gradient(120deg, var(--ruby), #b32a3e);
  color: #ffffff;
  border-color: var(--ruby);
  box-shadow: 0 0 22px rgba(228, 72, 92, 0.35);
}
.btn-ruby:hover {
  background: linear-gradient(120deg, var(--ruby-light), var(--ruby));
  box-shadow: 0 0 40px rgba(228, 72, 92, 0.5);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--hairline-strong);
}
.btn-outline:hover {
  border-color: var(--toxic);
  color: var(--toxic);
  box-shadow: 0 0 24px rgba(138, 255, 94, 0.2);
}

.btn-lg { padding: 1rem 2.25rem; font-size: 0.88rem; }
.btn-full { width: 100%; }

/* ===== ADD-ON ===== */
#addon {
  padding: 1rem 2.5rem 5rem;
  position: relative;
  z-index: 5;
}

#addon .section-inner { max-width: 1160px; margin: 0 auto; }

.addon-card {
  border: 1px solid var(--hairline-strong);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(183, 138, 255, 0.07) 0%, transparent 50%), var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  padding: 2.75rem;
  position: relative;
  overflow: hidden;
}

.addon-ghost {
  position: absolute;
  right: 36%;
  top: 12%;
  font-size: 60px;
  opacity: 0.14;
  pointer-events: none;
  animation: ghostFloat 9s ease-in-out infinite;
}

.addon-body { max-width: 620px; }

.addon-body h3 {
  font-family: var(--font-spooky);
  font-weight: 400;
  font-size: 2rem;
  color: var(--ghoul);
  text-shadow: 0 0 22px rgba(183, 138, 255, 0.4);
  margin-bottom: 0.75rem;
}

.addon-body p {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 1.25rem;
}

.addon-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.addon-list li {
  font-size: 0.9rem;
  color: var(--text-primary);
  font-weight: 500;
  padding-left: 1.7rem;
  position: relative;
}

.addon-list li::before {
  content: "🧪";
  position: absolute;
  left: 0;
  font-size: 0.82rem;
  top: 2px;
}

.addon-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  flex-shrink: 0;
  text-align: right;
}

.addon-side .price-period { margin-top: -0.5rem; }
.addon-note { font-size: 0.74rem; color: var(--text-muted); }

/* ===== BREAKDOWN ===== */
#breakdown {
  padding: 5.5rem 2.5rem 6rem;
  background: var(--bg-surface);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  position: relative;
  z-index: 5;
}

.section-inner { max-width: 1160px; margin: 0 auto; }

.section-title {
  font-size: clamp(2rem, 3.6vw, 3rem);
  color: var(--pumpkin);
  text-shadow: 0 0 24px var(--pumpkin-glow);
  margin-bottom: 0.9rem;
}

.section-sub {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: 3.5rem;
  max-width: 600px;
}

.breakdown-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}

.bd-item {
  display: flex;
  gap: 1.5rem;
  padding: 2.25rem 2.25rem 2.25rem 2rem;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  transition: background 250ms ease;
}

.bd-item:hover { background: rgba(255, 122, 26, 0.045); }

.bd-index {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--toxic);
  padding-top: 0.2rem;
  flex-shrink: 0;
}

.bd-content { flex: 1; }

.bd-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

.bd-head h3 { font-size: 1rem; color: var(--text-primary); }

.bd-term {
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pumpkin-light);
  border: 1px solid rgba(255, 122, 26, 0.4);
  border-radius: 100px;
  padding: 0.24rem 0.75rem;
}

.bd-item p {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.75;
}

/* ===== FAQ ===== */
#faq { padding: 5.5rem 2.5rem; position: relative; z-index: 5; }
#faq .section-inner { max-width: 760px; }
#faq .section-title { margin-bottom: 2.5rem; }

.faq-list { border-top: 1px solid var(--hairline); }
.faq-item { border-bottom: 1px solid var(--hairline); }

.faq-item summary {
  cursor: pointer;
  padding: 1.4rem 0;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--text-primary);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  gap: 1rem;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '🎃';
  font-size: 1rem;
  flex-shrink: 0;
  transition: transform 250ms ease;
  filter: grayscale(0.7);
}

.faq-item[open] summary::after {
  transform: rotate(20deg) scale(1.25);
  filter: none;
}

.faq-body {
  padding-bottom: 1.6rem;
  color: var(--text-secondary);
  line-height: 1.85;
  font-size: 0.95rem;
  max-width: 660px;
}

.faq-body a {
  color: var(--pumpkin-light);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 122, 26, 0.4);
}
.faq-body a:hover { border-bottom-color: var(--pumpkin); }

/* ===== BOTTOM CTA ===== */
#cta-bottom {
  padding: 6.5rem 2.5rem;
  background: var(--bg-surface);
  border-top: 1px solid var(--hairline);
  position: relative;
  overflow: hidden;
  z-index: 5;
}

.cta-pumpkin {
  position: absolute;
  font-size: 90px;
  opacity: 0.16;
  pointer-events: none;
  animation: pumpkinBob 5s ease-in-out infinite;
  filter: drop-shadow(0 0 30px var(--pumpkin-glow));
}
.p1 { bottom: 6%; left: 4%; }
.p2 { top: 14%; right: 5%; font-size: 64px; animation-delay: 1.8s; }

@keyframes pumpkinBob {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50%      { transform: translateY(-16px) rotate(6deg); }
}

.cta-inner { max-width: 1160px; margin: 0 auto; position: relative; z-index: 1; }

#cta-bottom h2 {
  font-family: 'Nosifer', var(--font-spooky);
  font-size: clamp(1.5rem, 3.1vw, 2.6rem);
  line-height: 1.4;
  background: linear-gradient(180deg, #ff5a5a 0%, #d61414 45%, #7a0202 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px var(--blood-glow));
  margin-bottom: 1.25rem;
  max-width: 700px;
  animation: flicker 7s linear infinite;
}

#cta-bottom p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  margin-bottom: 2.75rem;
  max-width: 560px;
}

.cta-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ===== FOOTER ===== */
#footer {
  padding: 2.5rem;
  border-top: 1px solid var(--hairline);
  position: relative;
  z-index: 5;
}

.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-links { display: flex; gap: 1.75rem; list-style: none; }

.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 150ms ease;
}
.footer-links a:hover { color: var(--pumpkin-light); }

.footer-copy { color: var(--text-muted); font-size: 0.78rem; }

.footer-disclaimer {
  max-width: 1160px;
  margin: 1.75rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.7;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1080px) {
  .tiers-grid {
    grid-template-columns: 1fr;
    max-width: 620px;
    gap: 1.75rem;
  }

  .addon-card { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .addon-side { align-items: flex-start; text-align: left; }
}

@media (max-width: 900px) {
  #tiers { padding: 4rem 1.5rem 3rem; }
  .breakdown-list { grid-template-columns: 1fr; }
  .hero-pillars { grid-template-columns: 1fr; gap: 2.25rem; }
  .nav-division { display: none; }
  .moon { width: 100px; height: 100px; right: 6%; top: 70px; }
  .cobweb { font-size: 80px; }
}

@media (max-width: 640px) {
  #hero { padding: 9.5rem 1.25rem 7rem; }
  #nav { padding: 1rem 1.25rem; }
  .nav-cta { display: none; }
  .spider-line { left: 8%; }

  #addon, #breakdown, #faq, #cta-bottom {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .addon-card { padding: 2rem 1.5rem; }
  .bd-item { padding: 1.75rem 1.5rem; }
  .bd-head { flex-direction: column; gap: 0.5rem; }

  .footer-inner { flex-direction: column; align-items: center; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 1rem; }
  .cta-buttons { flex-direction: column; }
  .btn-lg { width: 100%; max-width: 360px; }
  .footer-disclaimer { text-align: center; }
  .banner-track span { font-size: 0.68rem; }
}

/* ═══════════ MAXIMUM HORROR LAYER ═══════════ */

::selection { background: #8a0303; color: #fff; }

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #070310; }
::-webkit-scrollbar-thumb { background: #4a0505; border-radius: 6px; border: 2px solid #070310; }
::-webkit-scrollbar-thumb:hover { background: #c40000; }

/* enter gate */
#dare-gate {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: gateOut 3.4s ease forwards;
}

#dare-gate span {
  font-family: 'Nosifer', cursive;
  font-size: clamp(1.1rem, 3.4vw, 2.4rem);
  letter-spacing: 0.28em;
  color: #c40000;
  text-shadow: 0 0 30px rgba(196, 0, 0, 0.8);
  animation: gateText 3.4s ease forwards;
}

@keyframes gateOut {
  0%, 62% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes gateText {
  0% { opacity: 0; transform: scale(0.92); letter-spacing: 0.5em; }
  18% { opacity: 1; }
  30% { opacity: 0.55; }
  34% { opacity: 1; }
  62% { opacity: 1; transform: scale(1); letter-spacing: 0.28em; }
  100% { opacity: 0; transform: scale(1.06); }
}

/* lightning storm */
.lightning {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background: radial-gradient(ellipse at 30% 0%, rgba(214, 226, 255, 0.95), rgba(170, 160, 255, 0.5) 45%, transparent 75%);
  opacity: 0;
  mix-blend-mode: screen;
  animation: lightningFlash 13s linear infinite;
}

@keyframes lightningFlash {
  0%, 36.9% { opacity: 0; }
  37% { opacity: 0.5; }
  37.4% { opacity: 0.05; }
  37.8% { opacity: 0.65; }
  38.3% { opacity: 0; }
  39% { opacity: 0.25; }
  39.5%, 77.9% { opacity: 0; }
  78% { opacity: 0.4; }
  78.5% { opacity: 0; }
  79% { opacity: 0.55; }
  79.6%, 100% { opacity: 0; }
}

/* rain */
.rain {
  position: fixed;
  inset: -10% -5%;
  z-index: 45;
  pointer-events: none;
  opacity: 0.22;
  background-image:
    repeating-linear-gradient(78deg, transparent 0 13px, rgba(168, 190, 230, 0.2) 13px 14px),
    repeating-linear-gradient(78deg, transparent 0 29px, rgba(168, 190, 230, 0.13) 29px 30px);
  animation: rainFall 0.7s linear infinite;
}

@keyframes rainFall {
  from { background-position: 0 0, 0 0; }
  to   { background-position: -42px 200px, -30px 144px; }
}

/* vignette of dread */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, 0.58) 100%);
}

/* blood drips under the banner */
.blood-drips {
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
  height: 0;
  z-index: 199;
  pointer-events: none;
}

.drip {
  position: absolute;
  top: 0;
  width: 7px;
  height: 20px;
  background: linear-gradient(180deg, #8a0303, #c40000 70%, #e01515);
  border-radius: 0 0 7px 7px;
  animation: dripGrow 5s ease-in infinite;
}

.drip::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c40000;
}

@keyframes dripGrow {
  0% { height: 12px; }
  70% { height: var(--h, 46px); }
  100% { height: 12px; }
}

/* glowing eyes in the dark */
.eyes {
  position: absolute;
  display: flex;
  gap: 8px;
  z-index: 3;
  pointer-events: none;
  animation: eyesFloat 8s ease-in-out infinite;
}

.eyes span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff1a1a;
  box-shadow: 0 0 10px #ff0000, 0 0 26px rgba(255, 0, 0, 0.65);
  animation: eyesBlink 5s infinite;
}

@keyframes eyesBlink {
  0%, 7%, 100% { opacity: 1; transform: scaleY(1); }
  4% { opacity: 0.1; transform: scaleY(0.1); }
  52% { opacity: 1; }
  55% { opacity: 0.1; transform: scaleY(0.1); }
  58% { opacity: 1; transform: scaleY(1); }
}

@keyframes eyesFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* zombie rising from the graveyard */
.zombie {
  position: absolute;
  bottom: 24px;
  left: 52%;
  font-size: 42px;
  z-index: 1;
  pointer-events: none;
  animation: zombieRise 11s ease-in-out infinite;
}

@keyframes zombieRise {
  0%, 18% { transform: translateY(95px); }
  38%, 62% { transform: translateY(6px) rotate(-4deg); }
  70% { transform: translateY(10px) rotate(3deg); }
  88%, 100% { transform: translateY(95px); }
}

/* raven on a tombstone */
.raven {
  position: absolute;
  bottom: 86px;
  left: 8.2%;
  font-size: 26px;
  z-index: 3;
  pointer-events: none;
  animation: ravenTwitch 6s ease-in-out infinite;
}

@keyframes ravenTwitch {
  0%, 84%, 100% { transform: rotate(0) scaleX(1); }
  86% { transform: rotate(-8deg) scaleX(1); }
  90% { transform: rotate(0) scaleX(-1); }
  96% { transform: rotate(0) scaleX(1); }
}

/* huge ghost drifting across the whole screen */
.mega-ghost {
  position: fixed;
  top: 26%;
  left: 0;
  font-size: 230px;
  opacity: 0;
  z-index: 44;
  pointer-events: none;
  filter: blur(2px) drop-shadow(0 0 60px rgba(183, 138, 255, 0.4));
  animation: megaDrift 46s linear infinite;
}

@keyframes megaDrift {
  0% { transform: translateX(-30vw) translateY(0) rotate(-6deg); opacity: 0; }
  6% { opacity: 0.055; }
  48% { transform: translateX(60vw) translateY(-50px) rotate(4deg); opacity: 0.05; }
  94% { opacity: 0.055; }
  100% { transform: translateX(135vw) translateY(10px) rotate(-5deg); opacity: 0; }
}

/* spider crawling along the bottom */
.crawler {
  position: fixed;
  bottom: 8px;
  left: 0;
  font-size: 24px;
  z-index: 61;
  pointer-events: none;
  animation: crawlAcross 41s linear infinite, crawlWiggle 0.45s ease-in-out infinite alternate;
}

@keyframes crawlAcross {
  0% { transform: translateX(-8vw); }
  100% { transform: translateX(112vw); }
}

@keyframes crawlWiggle {
  from { rotate: -9deg; }
  to   { rotate: 9deg; }
}

/* scarier accents on existing pieces */
.tiers-header h2,
.section-title {
  text-shadow: 0 0 24px var(--pumpkin-glow), 0 6px 30px rgba(196, 0, 0, 0.35);
}

.tier-card:hover { transform: translateY(-5px) rotate(-0.5deg); }
.tier-card-gold:hover { transform: translateY(-6px) rotate(0.5deg); }

.btn-pumpkin { animation: heartbeat 1.7s ease-in-out infinite; }

@keyframes heartbeat {
  0%, 100% { box-shadow: 0 0 22px var(--pumpkin-glow); }
  12% { box-shadow: 0 0 40px var(--pumpkin-glow), 0 0 70px rgba(255, 122, 26, 0.3); }
  24% { box-shadow: 0 0 26px var(--pumpkin-glow); }
  36% { box-shadow: 0 0 44px var(--pumpkin-glow), 0 0 80px rgba(255, 122, 26, 0.35); }
  50% { box-shadow: 0 0 22px var(--pumpkin-glow); }
}

.discount-tag {
  background: linear-gradient(180deg, #ff3b3b, #8a0303);
  color: #fff;
  box-shadow: 0 0 28px rgba(196, 0, 0, 0.6);
}

.price-was s { color: var(--blood-light); }

.moon {
  background: radial-gradient(circle at 38% 34%, #ffeede 0%, #f5d9b8 55%, #d8b88e 100%);
  box-shadow:
    0 0 60px rgba(255, 214, 180, 0.45),
    0 0 180px rgba(255, 120, 80, 0.3);
}

@media (max-width: 640px) {
  .mega-ghost { font-size: 140px; }
  #dare-gate span { letter-spacing: 0.16em; }
  .rain { opacity: 0.16; }
}

/* ═══════════ SCARE ENGINE ═══════════ */

/* jumpscare */
#jumpscare {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
}

#jumpscare::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(140, 0, 0, 0.55), transparent 70%);
}

#jumpscare.active { opacity: 1; }

#jumpscare .js-face {
  position: relative;
  font-size: 44vmin;
  line-height: 1;
  filter: drop-shadow(0 0 60px rgba(255, 0, 0, 0.9)) saturate(1.3) contrast(1.2);
}

#jumpscare.active .js-face {
  animation: faceLunge 0.8s cubic-bezier(0.1, 1.5, 0.3, 1) both;
}

@keyframes faceLunge {
  0%   { transform: scale(0.15) rotate(-10deg); }
  45%  { transform: scale(1.55) rotate(4deg); }
  60%  { transform: scale(1.38) rotate(-3deg); }
  100% { transform: scale(1.45) rotate(2deg); }
}

#jumpscare .js-text {
  position: relative;
  font-family: 'Nosifer', cursive;
  font-size: clamp(1rem, 4vw, 2.2rem);
  letter-spacing: 0.22em;
  color: #ff1f1f;
  text-shadow: 0 0 34px rgba(255, 0, 0, 0.9);
  margin-top: 3vh;
}

#jumpscare.active .js-text { animation: textJitter 0.09s steps(2) infinite; }

@keyframes textJitter {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(3px, -2px); }
  100% { transform: translate(-3px, 2px); }
}

/* body shake */
body.shake { animation: bodyShake 0.6s linear both; }

@keyframes bodyShake {
  0%   { transform: translate(0, 0) rotate(0); }
  12%  { transform: translate(-14px, 8px) rotate(-0.7deg); }
  24%  { transform: translate(12px, -10px) rotate(0.6deg); }
  36%  { transform: translate(-10px, 6px) rotate(-0.5deg); }
  48%  { transform: translate(10px, 8px) rotate(0.5deg); }
  60%  { transform: translate(-8px, -6px) rotate(-0.4deg); }
  72%  { transform: translate(6px, 4px) rotate(0.3deg); }
  86%  { transform: translate(-4px, 2px) rotate(-0.2deg); }
  100% { transform: translate(0, 0) rotate(0); }
}

/* lights out */
#lightsout {
  position: fixed;
  inset: 0;
  z-index: 9950;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.07s ease;
}

#lightsout.active { opacity: 0.985; }

.lo-eyes {
  position: absolute;
  display: flex;
  gap: 9px;
  animation: eyesFloat 6s ease-in-out infinite;
}

.lo-eyes span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff1a1a;
  box-shadow: 0 0 12px #ff0000, 0 0 30px rgba(255, 0, 0, 0.7);
  animation: eyesBlink 4s infinite;
}

.lo-text {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Nosifer', cursive;
  font-size: clamp(0.8rem, 2vw, 1.2rem);
  letter-spacing: 0.4em;
  color: rgba(196, 0, 0, 0.85);
  text-shadow: 0 0 22px rgba(196, 0, 0, 0.7);
}

/* static glitch */
#staticnoise {
  position: fixed;
  inset: 0;
  z-index: 9940;
  pointer-events: none;
  opacity: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 2px);
  mix-blend-mode: screen;
}

#staticnoise.active {
  opacity: 0.4;
  animation: staticShift 0.1s steps(3) infinite;
}

@keyframes staticShift {
  0%   { background-position: 0 0, 0 0; }
  50%  { background-position: 2px -3px, -2px 1px; }
  100% { background-position: -2px 2px, 1px -2px; }
}

body.glitching { animation: glitchSkew 0.34s steps(3) both; }

@keyframes glitchSkew {
  0%   { transform: none; filter: none; }
  33%  { transform: translateX(-7px) skewX(1.4deg); filter: hue-rotate(50deg) saturate(2); }
  66%  { transform: translateX(6px) skewX(-1deg); filter: hue-rotate(-40deg); }
  100% { transform: none; filter: none; }
}

/* whispering headline */
#hero h1.whispering {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #ff1414;
  filter: drop-shadow(0 0 30px rgba(255, 0, 0, 0.9));
}

/* sound toggle */
#sound-toggle {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 10001;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(196, 0, 0, 0.6);
  background: rgba(7, 3, 16, 0.9);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(196, 0, 0, 0.35);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

#sound-toggle:hover {
  box-shadow: 0 0 34px rgba(196, 0, 0, 0.6);
  transform: scale(1.08);
}