/* Promura — shared "viral" bold hero (light editorial).
 * Linked only by the public marketing pages that use the bold headline
 * treatment (index, magazine, pillow-talk, store, movement, about, faq).
 * Uses the marketing.css design tokens. */

.viral-hero {
  position: relative;
  background: linear-gradient(180deg, var(--white) 0%, var(--cream) 100%);
  color: var(--ink);
  padding: 120px 0 100px;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--rule);
}
.viral-hero::before {
  content: '';
  position: absolute; z-index: -1;
  top: -260px; right: -180px;
  width: 680px; height: 680px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,61,170,0.16) 0%, transparent 65%);
  filter: blur(30px);
  animation: vhGlow 16s ease-in-out infinite alternate;
}
.viral-hero::after {
  content: '';
  position: absolute; z-index: -1;
  bottom: -260px; left: -160px;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,61,170,0.10) 0%, transparent 65%);
  filter: blur(40px);
  animation: vhGlow 20s ease-in-out infinite alternate-reverse;
}
@keyframes vhGlow {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-30px,26px) scale(1.12); }
}
.viral-hero-inner { text-align: center; max-width: 1000px; margin: 0 auto; }
.vh-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 28px;
}
.vh-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--pink);
  box-shadow: 0 0 0 4px rgba(255,61,170,0.18);
}
.vh-title {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(52px, 10vw, 156px);
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 24px;
}
.vh-title .pink { color: var(--pink); }
.vh-sub {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 2.6vw, 34px);
  line-height: 1.25;
  color: var(--text);
  max-width: 760px;
  margin: 0 auto 38px;
  letter-spacing: -0.01em;
}
.vh-cta { justify-content: center; margin-bottom: 8px; }
.vh-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  max-width: 880px; margin: 48px auto 0;
  border-top: 1px solid var(--rule-strong); padding-top: 36px;
}
.vh-stat .vh-num {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1;
  color: var(--pink); letter-spacing: -0.02em;
}
.vh-stat .vh-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted); margin-top: 12px;
}
@media (max-width: 720px) {
  .viral-hero { padding: 76px 0 60px; }
  .vh-stats { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .viral-hero::before, .viral-hero::after { animation: none; }
}