/* Premium polish layer — loaded after theme + page CSS.
   Adds the "special" feel: gradient-gold text, forge-glow pulses, film grain,
   glowing dividers, and refined micro-interactions. Purely additive. */

/* Fine gold film-grain over the whole page for depth (very subtle). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.035; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Keep interactive content above the grain.
   NOTE: .modal-overlay is deliberately EXCLUDED — it needs position:fixed
   (from theme.css) to cover the screen, and already sits at z-index:200 above
   the grain. Including it here forced position:relative, which dropped the
   open modal into page flow below the footer (silent "nothing happens"). */
.navbar, .hero-content, main, .footer, .scroll-indicator { position: relative; z-index: 2; }

/* Embers canvas sits over the hero image, under the text. */
.embers { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }

/* ── Gradient-gold display text ─────────────────────────────────── */
/* Targets the hook span, not the whole H1 — the H1 also holds the keyword
   kicker, which keeps its own muted gold and must not take the gradient. */
.hero .h1-hook, .grad-gold {
  background: linear-gradient(180deg, #FBE6B0 0%, #F0C040 34%, #C9A84C 68%, #8B6914 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* Give the hero headline a faint forged shadow behind the gradient. */
.hero .h1-hook { text-shadow: 0 2px 40px rgba(201,168,76,0.15); }

/* Big statement numbers (affiliate 10%, countdown) get a live glow pulse. */
.pulse-glow { animation: pulseGlow 3.2s ease-in-out infinite; }
@keyframes pulseGlow {
  0%,100% { text-shadow: 0 0 18px rgba(201,168,76,0.25); }
  50%     { text-shadow: 0 0 42px rgba(240,192,64,0.55); }
}

/* Section-top hairline that glows gold in the centre — a forge seam.
   Pinned to the section's top edge so the section padding breathes BELOW the
   line (otherwise the heading sits flush under it). */
.section { position: relative; }
.seam { height: 1px; border: 0; margin: 0;
  position: absolute; top: 0; left: 0; right: 0;
  background: linear-gradient(90deg, transparent, var(--gold-dim) 30%, var(--gold-bright) 50%, var(--gold-dim) 70%, transparent);
  opacity: 0.5; }

/* Eyebrow gets a small leading rule for editorial polish. */
.eyebrow::before {
  content: ""; display: inline-block; width: 26px; height: 1px;
  background: var(--gold-dim); vertical-align: middle; margin-right: 12px;
}

/* CTA shimmer sweep on hover. */
.cta-primary { position: relative; overflow: hidden; }
.cta-primary::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(240,192,64,0.28), transparent);
  transform: skewX(-18deg); transition: left .6s ease;
}
.cta-primary:hover::after { left: 140%; }

/* Cards lift + warm on hover across pages. */
.price-card, .early-grid .item, .who-card, .step, .highlight-card {
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.price-card:not(.valkara):hover, .early-grid .item:hover, .who-card:hover,
.step:hover, .highlight-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-dim);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 22px rgba(201,168,76,0.12);
}
.price-card.valkara:hover { transform: translateY(-4px); box-shadow: 0 0 44px rgba(201,168,76,0.35); }

/* Valkara comparison column: gentle breathing glow so the eye lands there. */
th.col-valkara { animation: colBreath 4s ease-in-out infinite; }
@keyframes colBreath {
  0%,100% { box-shadow: 0 0 20px rgba(201,168,76,0.18); }
  50%     { box-shadow: 0 0 34px rgba(201,168,76,0.34); }
}

/* Wordmark hover sheen. */
.wordmark { transition: text-shadow .3s ease; }
.wordmark:hover { text-shadow: 0 0 24px rgba(240,192,64,0.5); }

/* Countdown digits: subtle vertical gradient like heated brass. */
.cd-digit {
  background: linear-gradient(180deg, #FBE6B0, #C9A84C 60%, #8B6914);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Radial forge vignette warms the hero centre. */
.hero-overlay::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 50% 42%, rgba(201,168,76,0.10), transparent 70%);
  mix-blend-mode: screen;
}

@media (prefers-reduced-motion: reduce) {
  .pulse-glow, th.col-valkara, .scroll-indicator { animation: none !important; }
  .cta-primary::after { display: none; }
}