/* ====================================================================
 * VotePulse Design Transformation — "Deep Kenya" / Apple × Tesla
 * Applied as a cascade layer over existing splash CSS.
 * Every rule here is intentional. Remove nothing without reading it.
 * ==================================================================== */


/* ─────────────────────────────────────────────────────────────────────
 * 0. BASE CANVAS
 * ───────────────────────────────────────────────────────────────────── */
body,
#root,
.vp-marketing-page {
  background: #04080F !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * 1. KILL PREMIUM-KILLERS
 * ───────────────────────────────────────────────────────────────────── */
/* Sticky fire banner — gone */
.vp-sticky-fire,
body.vp-has-fire-banner .vp-sticky-fire {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* WhatsApp FAB — gone */
#vp-wa-fab,
a[aria-label*="WhatsApp"].fixed,
a[href*="wa.me"].fixed {
  display: none !important;
}

/* Remove the fire-banner body offset it creates */
body.vp-has-fire-banner #root section[class*="min-h-screen"] {
  padding-top: 0 !important;
}

/* red left-border danger cards — soften */
[style*="border-left: 3px solid #ef4444"],
[style*="border-left:3px solid #ef4444"] {
  border-left: 1px solid rgba(255, 59, 48, 0.25) !important;
}

/* ── HERO: Remove hero-mountains / city background image ── */
.vp-tone-landscape {
  background-image: none !important;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 214, 143, 0.08) 0%, transparent 60%),
    #04080F !important;
}

/* Hide Hercules animated background flag wave (low-opacity kenya-flag-wave.webp) */
#root section[class*="min-h-screen"] img[src*="kenya-flag-wave"],
#root section[class*="min-h-screen"] [data-hercules-id*="Index.tsx:1164"],
#root section[class*="min-h-screen"] [data-hercules-id*="Index.tsx:1169"] {
  display: none !important;
}

/* Hide Nairobi skyline hero photograph */
#root section[class*="min-h-screen"] img[src*="nairobi-skyline-hero"],
#root section[class*="min-h-screen"] [data-hercules-id*="Index.tsx:1159"] {
  display: none !important;
}

/* Hide Hercules-rendered city/skyline images but NOT the medallion */
#root section[class*="min-h-screen"] img[src*="city"],
#root section[class*="min-h-screen"] img[src*="nairobi"],
#root section[class*="min-h-screen"] img[src*="skyline"],
#root section[class*="min-h-screen"] img[src*="mountains"],
#root section[class*="min-h-screen"] img[alt*="city"],
#root section[class*="min-h-screen"] img[alt*="Nairobi"],
/* Wave flag cards only — exact match so medal alt is not caught */
#root section[class*="min-h-screen"] img[alt="Kenya flag"] {
  display: none !important;
}

/* Hide decorative left stripe flag bar */
#root section[class*="min-h-screen"] [data-hercules-id*="Index.tsx:1180"] {
  display: none !important;
}

/* The right-column phone/mockup — already hidden by JS, belt+suspenders */
.vp-hero-right-hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── LOGO + MEDALLION COMPOSITION ──────────────────────────────────────
 * Logo sits above the medal, blended dark-to-transparent.
 * Medallion keeps its float animation.
 * Everything centered in the absolute banner column.
 * ──────────────────────────────────────────────────────────────────── */
#vp-hero-flag-banner {
  /* Sit directly under fixed nav; lift half the gap to hero headline */
  --vp-banner-lift: 2.4rem;
  display: flex !important;
  top: 0.7rem !important;
  transform: translateX(-50%) translateY(calc(-1 * var(--vp-banner-lift))) !important;
  max-height: calc(100svh - 4.25rem) !important;
}

@media (max-width: 768px) {
  #vp-hero-flag-banner {
    --vp-banner-lift: 2rem;
    top: 0.45rem !important;
  }
}

body.vp-has-fire-banner #vp-hero-flag-banner {
  top: 1.2rem !important;
}

@media (max-width: 768px) {
  #vp-hero-flag-banner .vp-banner-logo {
    width: clamp(240px, 46vw, 380px) !important;
  }

  #vp-hero-flag-banner .vp-flag-medal-img {
    width: clamp(58px, 15vw, 88px) !important;
    height: auto !important;
  }
}

.vp-hero-inner {
  /* Headline below stack — padding reduced by same lift as banner */
  --vp-banner-lift: 2.4rem;
  padding-top: clamp(calc(12rem - var(--vp-banner-lift)), 22vh, calc(14rem - var(--vp-banner-lift))) !important;
}

@media (max-width: 768px) {
  .vp-hero-inner,
  #root section[class*="min-h-screen"] .vp-hero-inner {
    --vp-banner-lift: 2rem;
    padding-top: clamp(calc(10rem - var(--vp-banner-lift)), 18vh, calc(12rem - var(--vp-banner-lift))) !important;
  }
}

/* Nav — Kenya KE badge instead of VotePulse icon */
#root nav .vp-nav-ke {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  text-decoration: none !important;
}

#root nav .vp-nav-ke-flag {
  display: flex !important;
  line-height: 0 !important;
}

#root nav .vp-ke-flag-svg {
  width: 2.25rem !important;
  height: 1.5rem !important;
  border-radius: 0.2rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
}

#root nav .vp-nav-ke-label {
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  color: #F5F7FA !important;
}

/* Hide Hercules default VotePulse mark in nav */
#root nav .vp-nav-logo,
#root nav .vp-nav-logo img,
#root nav [data-hercules-id*="Index.tsx:1133"],
#root nav [data-hercules-id*="Index.tsx:1136"] {
  display: none !important;
}

/* Wrapper that stacks logo + medal + countdown vertically */
.vp-flag-banner.vp-flag-medal-banner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.22rem !important;
  transform: scale(min(1, calc((100svh - 3rem) / 24rem)));
  transform-origin: top center;
}

/* Logo above medallion — tight stack */
.vp-banner-logo-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-end !important;
  margin-bottom: 0.23rem !important;
  position: relative !important;
  z-index: 2 !important;
}

.vp-banner-logo {
  display: block !important;
  width: clamp(250px, 42vw, 520px) !important;
  max-width: 92vw !important;
  height: auto !important;
  filter: drop-shadow(0 6px 28px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 42px rgba(0, 214, 143, 0.16)) !important;
}

/* Medallion — hero centerpiece, subtle float */
.vp-flag-medal-img,
.vp-flag-ribbon-img,
#vp-hero-flag-banner img[src*="kenya-flag-medal"] {
  display: block !important;
}

.vp-flag-medal-img {
  width: clamp(72px, 11vw, 124px) !important;
  max-width: 124px !important;
  height: auto !important;
  aspect-ratio: 772 / 1023 !important;
  object-fit: contain !important;
  animation: vp-medal-float 6s ease-in-out infinite !important;
}

/* Countdown in banner — compact, no extra margin pushing it below fold */
#vp-hero-flag-banner .vp-flag-cd {
  margin: 0 !important;
  padding: 0 !important;
}

#vp-hero-flag-banner .vp-hero-clock {
  margin: 0 !important;
  gap: 0.18rem !important;
}

#vp-hero-flag-banner .vp-hc-digits {
  font-size: clamp(1.05rem, 2.3vw, 1.45rem) !important;
  gap: 0.28rem !important;
}

#vp-hero-flag-banner .vp-hc-label {
  font-size: 0.7rem !important;
}

#vp-hero-flag-banner .vp-hc-title {
  margin-top: 0 !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.18em !important;
}

@keyframes vp-medal-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

/* Logo lives on the banner only — hide duplicate in hero copy column */
.vp-has-flag-banner #vp-hero-logo-wrap {
  display: none !important;
}

.vp-flag-ribbon-wrap {
  display: flex !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 1 !important;
}


/* ─────────────────────────────────────────────────────────────────────
 * 2. HERO — CINEMATIC BACKGROUND
 *    Three-layer aurora: emerald crown + deep green floor + subtle red
 *    SVG noise at 3% — kills "flat screen" feel without flash
 * ───────────────────────────────────────────────────────────────────── */
#root section[class*="min-h-screen"] {
  background:
    radial-gradient(ellipse 130% 55% at 50% -8%,  rgba(0, 214, 143, 0.11) 0%, transparent 58%),
    radial-gradient(ellipse 50%  60% at 10% 90%,  rgba(0, 102, 51,  0.07) 0%, transparent 65%),
    radial-gradient(ellipse 45%  45% at 92% 72%,  rgba(187, 0,  0,  0.05) 0%, transparent 65%),
    #04080F !important;
  position: relative !important;
  overflow: visible !important;
}

/* Noise texture overlay — depth without busyness */
#root section[class*="min-h-screen"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}

/* Horizon hairline */
#root section[class*="min-h-screen"]::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 214, 143, 0.18) 25%,
    rgba(0, 214, 143, 0.35) 50%,
    rgba(0, 214, 143, 0.18) 75%,
    transparent 100%);
  pointer-events: none;
  z-index: 5;
}

/* ── Hero sections above the noise ── */
#root section[class*="min-h-screen"] > * {
  position: relative;
  z-index: 1;
}


/* ─────────────────────────────────────────────────────────────────────
 * 3. HERO TYPOGRAPHY — CINEMATIC SCALE
 *    "The Campaign / Operating System."
 *    Apple-grade: huge, tight, left-dominant weight
 * ───────────────────────────────────────────────────────────────────── */
.vp-hero-h1 {
  font-size: clamp(3rem, 7.5vw, 6.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.038em !important;
  line-height: 0.92 !important;
  text-align: center !important;
  color: #F5F7FA !important;
}

.vp-hero-h1 br { display: block !important; }

/* "Operating System." — single emerald accent, felt not screamed */
.vp-hero-h1 em {
  font-style: normal !important;
  background: linear-gradient(135deg, #F5F7FA 20%, rgba(0, 214, 143, 0.9) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  display: block !important;
}

/* Tagline: "Built for modern elections." — tiny, airy */
.vp-hero-tagline {
  font-size: clamp(0.95rem, 2vw, 1.2rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  color: rgba(245, 247, 250, 0.45) !important;
  text-align: center !important;
  margin: 1rem 0 0.5rem !important;
}

/* Lead: the two-line emotional statement */
#vp-hero-cos-lead,
.vp-hero-lead {
  font-size: clamp(1rem, 1.8vw, 1.2rem) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: rgba(245, 247, 250, 0.5) !important;
  text-align: center !important;
  max-width: 38ch !important;
  margin: 0 auto 2rem !important;
}

/* Section eyebrow labels */
[class*="vp-eyebrow"],
[class*="vp-wf-badge"],
[class*="vp-section-eyebrow"],
.vp-ai-wf-badge {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #00D68F !important;
}

/* Body copy breathing room */
.vp-marketing-page p,
#root .vp-marketing-page [class*="text-sm"],
#root .vp-marketing-page [class*="text-base"] {
  font-size: 1.05rem;
  line-height: 1.72;
  color: rgba(245, 247, 250, 0.55);
}

/* Section headlines */
#root h2 {
  font-size: clamp(2rem, 4.5vw, 3.25rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.1 !important;
}


/* ─────────────────────────────────────────────────────────────────────
 * 4. HERO KICKER BADGE — STEALTH STYLE
 * ───────────────────────────────────────────────────────────────────── */
.vp-campaign-badge,
[class*="vp-campaign-badge"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 0.55rem !important;
  animation: none !important;
  border-bottom: 1px solid rgba(0, 214, 143, 0.3) !important;
  padding-bottom: 0.45rem !important;
  margin-top: -9.5rem !important;
}

@media (max-width: 768px) {
  .vp-campaign-badge,
  [class*="vp-campaign-badge"] {
    margin-top: -6.5rem !important;
  }
}

.vp-campaign-badge *,
[class*="vp-campaign-badge"] * {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(245, 247, 250, 0.65) !important;
}

/* Pulsing dot in badge */
.vp-flag-cd-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #00D68F !important;
  flex-shrink: 0 !important;
  animation: vp-dot-pulse 3s ease-in-out infinite !important;
  box-shadow: 0 0 6px rgba(0, 214, 143, 0.6) !important;
}

@keyframes vp-dot-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.75); }
}


/* ─────────────────────────────────────────────────────────────────────
 * 5. CTA BUTTONS — PREMIUM PILL SYSTEM
 * ───────────────────────────────────────────────────────────────────── */

/* Primary — dark text on electric green */
.vp-hero-btn-primary,
.vp-hero-btn-accent,
[data-vp-cta="primary"],
.vp-cta-primary {
  background: #00D68F !important;
  color: #04080F !important;
  border: none !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.01em !important;
  padding: 0.9rem 2.25rem !important;
  box-shadow:
    0 0 0 1px rgba(0, 214, 143, 0.3),
    0 8px 32px rgba(0, 214, 143, 0.25),
    0 2px 8px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.2s ease !important;
}

.vp-hero-btn-primary:hover,
.vp-hero-btn-accent:hover,
[data-vp-cta="primary"]:hover,
.vp-cta-primary:hover {
  background: #00D68F !important;
  color: #04080F !important;
  transform: scale(1.025) translateY(-1px) !important;
  box-shadow:
    0 0 0 1px rgba(0, 214, 143, 0.45),
    0 12px 40px rgba(0, 214, 143, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

.vp-hero-btn-primary:active,
.vp-hero-btn-accent:active {
  transform: scale(0.98) !important;
}

/* Ghost button — "Watch 90 Seconds →" */
.vp-hero-btn-ghost {
  background: transparent !important;
  border: none !important;
  color: rgba(245, 247, 250, 0.65) !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  padding: 0.9rem 1rem !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  transition: color 0.2s ease !important;
}

.vp-hero-btn-ghost:hover {
  color: rgba(245, 247, 250, 0.95) !important;
}

.vp-hero-btn-ghost .vp-btn-arrow {
  display: inline-block !important;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.vp-hero-btn-ghost:hover .vp-btn-arrow {
  transform: translateX(5px) !important;
}

/* CTA row: horizontal, centered, good gap */
.vp-hero-cta-row,
#vp-hero-cta-mount {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
  margin: 1.75rem auto 0 !important;
}

/* Outline variant */
.vp-hero-btn-outline {
  background: rgba(0, 214, 143, 0.06) !important;
  color: #00D68F !important;
  border: 1px solid rgba(0, 214, 143, 0.3) !important;
  border-radius: 9999px !important;
}
.vp-hero-btn-outline:hover {
  background: rgba(0, 214, 143, 0.12) !important;
  border-color: rgba(0, 214, 143, 0.5) !important;
}


/* ─────────────────────────────────────────────────────────────────────
 * 6. NAVIGATION — SMART BLUR BAR
 * ───────────────────────────────────────────────────────────────────── */
#root nav {
  background: rgba(4, 8, 15, 0.72) !important;
  backdrop-filter: blur(28px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.4) !important;
  border-bottom: 1px solid rgba(245, 247, 250, 0.05) !important;
  box-shadow: none !important;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Smart hide/show handled by JS — class hooks */
#root nav.vp-nav-hidden {
  transform: translateY(-100%) !important;
}
#root nav.vp-nav-visible {
  transform: translateY(0) !important;
}


/* ─────────────────────────────────────────────────────────────────────
 * 7. SCROLL REVEAL — APPLE BLUR RESOLVE SYSTEM
 * ───────────────────────────────────────────────────────────────────── */
@keyframes vp-reveal {
  from {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.vp-reveal {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(4px);
  will-change: opacity, transform, filter;
}

.vp-reveal.vp-revealed {
  animation: vp-reveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.vp-reveal.vp-revealed:nth-child(2)  { animation-delay: 0.08s; }
.vp-reveal.vp-revealed:nth-child(3)  { animation-delay: 0.16s; }
.vp-reveal.vp-revealed:nth-child(4)  { animation-delay: 0.24s; }
.vp-reveal.vp-revealed:nth-child(5)  { animation-delay: 0.32s; }
.vp-reveal.vp-revealed:nth-child(6)  { animation-delay: 0.40s; }


/* ─────────────────────────────────────────────────────────────────────
 * 8. GLASS CARD SYSTEM — LEVEL 1 / 2 / 3
 * ───────────────────────────────────────────────────────────────────── */

/* Level 1 — all generic cards */
.vp-why-card,
.vp-analytics-card,
.vp-pricing-card,
.vp-feature-card,
[class*="vp-card"],
.vp-ai-wf-step {
  background: rgba(12, 21, 37, 0.55) !important;
  backdrop-filter: blur(20px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
  border: 1px solid rgba(245, 247, 250, 0.07) !important;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(245, 247, 250, 0.06) !important;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.2s ease !important;
}

.vp-why-card:hover,
.vp-analytics-card:hover,
.vp-feature-card:hover,
[class*="vp-card"]:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(0, 214, 143, 0.3) !important;
}

/* Active step — vivid */
.vp-ai-wf-step.vp-active {
  background: rgba(0, 214, 143, 0.06) !important;
  border-color: rgba(0, 214, 143, 0.35) !important;
}

/* Level 2 — modals */
.vp-modal {
  background: rgba(8, 14, 24, 0.92) !important;
  backdrop-filter: blur(40px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.5) !important;
  border: 1px solid rgba(245, 247, 250, 0.10) !important;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(245, 247, 250, 0.08) !important;
}

/* Level 3 — floating tooltips */
.vp-float-panel,
.vp-county-tooltip,
[class*="vp-tooltip"] {
  background: rgba(4, 8, 15, 0.90) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(0, 214, 143, 0.20) !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 214, 143, 0.08) !important;
}


/* ─────────────────────────────────────────────────────────────────────
 * 9. HERO COUNTDOWN CLOCK — SIGNATURE ELEMENT
 * ───────────────────────────────────────────────────────────────────── */
.vp-hero-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: 0 auto;
  user-select: none;
}

.vp-hc-digits {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-family: 'Fira Code', ui-monospace, monospace;
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 300;
  letter-spacing: 0.05em;
  color: rgba(245, 247, 250, 0.9);
}

.vp-hc-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.vp-hc-num {
  display: block;
  min-width: 2.5ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.vp-hc-num.vp-tick {
  animation: vp-digit-tick 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes vp-digit-tick {
  0%   { transform: scaleY(1.15); }
  100% { transform: scaleY(1); }
}

.vp-hc-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  color: rgba(245, 247, 250, 0.3);
  text-transform: uppercase;
}

.vp-hc-sep {
  color: #00D68F;
  opacity: 0.6;
  margin-top: -0.1em;
  animation: vp-sep-pulse 1s ease-in-out infinite;
  align-self: flex-start;
  padding-top: 0.2em;
}

@keyframes vp-sep-pulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 0.2; }
}

.vp-hc-title {
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  color: rgba(245, 247, 250, 0.25);
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
  margin-top: 0.25rem;
}

/* ─────────────────────────────────────────────────────────────────────
 * 9a. CLOCK CONTAINER HARD RESET — kill any green rectangle artifact
 *     All wrapper divs around the clock must be transparent glass only.
 * ───────────────────────────────────────────────────────────────────── */
#vp-hero-flag-banner,
.vp-flag-banner,
.vp-flag-medal-banner,
.vp-flag-cd {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  outline: none !important;
}

.vp-hero-clock,
.vp-hc-digits,
.vp-hc-unit {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Colons are text, not blocks */
.vp-hc-sep {
  display: inline !important;
  background: none !important;
  border: none !important;
}

/* Hide original Hercules built-in countdown if JS didn't catch it */
.vp-hide-hero-countdown,
[class*="vp-mega-countdown"],
#root section[class*="min-h-screen"] .vp-hero-countdown-bar {
  display: none !important;
}

/* Hide any remaining green countdown pill from Hercules bundle */
#root section[class*="min-h-screen"] > * > [class*="rounded-full"][class*="green"],
#root section[class*="min-h-screen"] > * > [class*="rounded-full"][class*="emerald"],
#root section[class*="min-h-screen"] [class*="bg-emerald"][class*="countdown"],
#root section[class*="min-h-screen"] [class*="border-emerald"][class*="countdown"] {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * 9b. EXISTING COUNTDOWN INLINE BAR — upgrade to new palette
 * ───────────────────────────────────────────────────────────────────── */
.vp-flag-cd-eyebrow-inline {
  color: rgba(245, 247, 250, 0.5) !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

.vp-flag-cd-num,
.vp-flag-cd-time {
  color: #F5F7FA !important;
  font-family: 'Fira Code', ui-monospace, monospace !important;
  font-weight: 300 !important;
}

.vp-flag-cd-unit {
  color: rgba(245, 247, 250, 0.35) !important;
  font-size: 0.55rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

.vp-flag-cd-colon,
.vp-flag-cd-sep {
  color: #00D68F !important;
  opacity: 0.6 !important;
}


/* ─────────────────────────────────────────────────────────────────────
 * 10. "TWO WORLDS" WHY SECTION
 * ───────────────────────────────────────────────────────────────────── */
.vp-two-worlds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 64rem;
  margin: 2.5rem auto 0;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(245, 247, 250, 0.07);
}

@media (max-width: 700px) {
  .vp-two-worlds { grid-template-columns: 1fr; }
}

.vp-world-without {
  background: rgba(6, 8, 12, 0.8);
  padding: 2rem 1.75rem;
  filter: saturate(0.4);
  opacity: 0.65;
}

.vp-world-with {
  background: rgba(0, 50, 30, 0.2);
  padding: 2rem 1.75rem;
  border-left: 1px solid rgba(0, 214, 143, 0.15);
  position: relative;
}

.vp-world-with::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 1px;
  background: linear-gradient(180deg, #FF3B30 0%, #00D68F 100%);
  opacity: 0.4;
}

.vp-world-heading {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.vp-world-without .vp-world-heading { color: rgba(255, 59, 48, 0.7); }
.vp-world-with .vp-world-heading    { color: #00D68F; }

.vp-world-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(245, 247, 250, 0.05);
  font-size: 0.92rem;
  color: rgba(245, 247, 250, 0.7);
}

.vp-world-row:last-child { border-bottom: none; }

.vp-world-without .vp-world-row::before {
  content: '✕';
  color: rgba(255, 59, 48, 0.5);
  font-size: 0.7rem;
  flex-shrink: 0;
  width: 1rem;
  text-align: center;
}

.vp-world-with .vp-world-row::before {
  content: '✓';
  color: #00D68F;
  font-size: 0.7rem;
  flex-shrink: 0;
  width: 1rem;
  text-align: center;
}


/* ─────────────────────────────────────────────────────────────────────
 * 11. TRUST STRIP — MONOSPACE DATA MARQUEE
 * ───────────────────────────────────────────────────────────────────── */
.vp-trust-strip {
  overflow: hidden;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(245, 247, 250, 0.06);
  border-bottom: 1px solid rgba(245, 247, 250, 0.06);
  background: rgba(4, 8, 15, 0.6);
  mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
}

.vp-trust-strip-inner {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  animation: vp-strip-scroll 60s linear infinite;
  width: max-content;
}

.vp-trust-strip-inner:hover { animation-play-state: paused; }

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

.vp-trust-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  color: rgba(245, 247, 250, 0.35);
  font-size: 0.85rem;
}

.vp-trust-item-num {
  font-family: 'Fira Code', ui-monospace, monospace;
  color: rgba(245, 247, 250, 0.65);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.vp-trust-sep {
  color: rgba(245, 247, 250, 0.18);
  padding: 0 0.5rem;
}


/* ─────────────────────────────────────────────────────────────────────
 * 12. AI TERMINAL — ANIMATED GRADIENT BORDER
 *     NOTE: only target the specific AI console wrappers.
 *     Do NOT use [class*="vp-terminal"] — too broad, matches clock area.
 * ───────────────────────────────────────────────────────────────────── */
.vp-ai-wf-console,
.vp-ai-console-wrap {
  border: 1px solid transparent !important;
  background:
    linear-gradient(rgba(4, 8, 15, 1), rgba(4, 8, 15, 1)) padding-box,
    linear-gradient(135deg, #00D68F, rgba(0, 214, 143, 0.1), #FFB800, rgba(0, 214, 143, 0.1), #00D68F) border-box !important;
  background-size: 200% 200% !important;
  animation: vp-border-flow 4s linear infinite !important;
}

@keyframes vp-border-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Neural dot pattern behind AI section */
.vp-ai-workflow-banner {
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 214, 143, 0.08) 0%, transparent 65%),
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0, 214, 143, 0.10) 0%, transparent 60%),
    #04080F !important;
}


/* ─────────────────────────────────────────────────────────────────────
 * 13. KENYA MAP — CINEMATIC GLOW
 * ───────────────────────────────────────────────────────────────────── */
.vp-kenya-map-wrap,
#vp-kenya-coverage,
[id*="kenya-map"] {
  filter: drop-shadow(0 0 60px rgba(0, 214, 143, 0.12)) !important;
}

/* County paths */
.vp-county-path,
#vp-kenya-map svg path {
  transition: fill 0.3s ease, filter 0.3s ease !important;
}

.vp-county-path:hover,
#vp-kenya-map svg path:hover {
  fill: rgba(0, 214, 143, 0.35) !important;
  filter: drop-shadow(0 0 8px rgba(0, 214, 143, 0.45)) !important;
}

/* Breathing pulse on active county */
@keyframes vp-county-breathe {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1.0; }
}

.vp-county-active {
  animation: vp-county-breathe 2.5s ease-in-out infinite !important;
}


/* ─────────────────────────────────────────────────────────────────────
 * 13b. CAPABILITY SHOWCASE SECTIONS — one feature, full presence
 * ───────────────────────────────────────────────────────────────────── */
.vp-showcase {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  max-width: 72rem;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .vp-showcase.vp-showcase-split {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
  }
  .vp-showcase.vp-showcase-split.vp-flip > :first-child { order: 2; }
  .vp-showcase.vp-showcase-split.vp-flip > :last-child  { order: 1; }
}

.vp-showcase-copy {
  max-width: 38ch;
}

.vp-showcase-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #00D68F;
  margin-bottom: 1rem;
}

.vp-showcase-headline {
  font-size: clamp(1.85rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: #F5F7FA;
  margin: 0 0 1rem;
}

.vp-showcase-lead {
  font-size: 1.05rem;
  line-height: 1.72;
  color: rgba(245, 247, 250, 0.55);
  margin: 0 0 1.75rem;
}

.vp-showcase-stats {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.vp-stat-block {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.vp-stat-num {
  font-family: 'Fira Code', ui-monospace, monospace;
  font-size: 1.6rem;
  font-weight: 300;
  color: #F5F7FA;
  letter-spacing: -0.02em;
  line-height: 1;
}

.vp-stat-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 247, 250, 0.3);
}

/* Visual panel — the "product shot" */
.vp-showcase-visual {
  position: relative;
}

.vp-showcase-visual img {
  width: 100%;
  max-width: 600px;
  border-radius: 16px;
  transform: perspective(1200px) rotateX(4deg) rotateY(-2deg);
  box-shadow:
    0 60px 120px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.vp-showcase-visual:hover img {
  transform: perspective(1200px) rotateX(0deg) rotateY(0deg);
}

/* Capability icon block */
.vp-capability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  border: 1px solid rgba(245, 247, 250, 0.06);
  border-radius: 1.25rem;
  overflow: hidden;
  background: rgba(245, 247, 250, 0.06);
}

.vp-capability-cell {
  background: rgba(6, 12, 21, 0.8);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: background 0.2s ease;
}

.vp-capability-cell:hover {
  background: rgba(0, 214, 143, 0.06);
}

.vp-capability-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.vp-capability-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: #F5F7FA;
}

.vp-capability-desc {
  font-size: 0.75rem;
  color: rgba(245, 247, 250, 0.4);
  line-height: 1.5;
}

/* Section title typography upgrade */
.vp-campaign-title {
  font-size: clamp(1.85rem, 4vw, 3rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.0 !important;
  color: #F5F7FA !important;
  margin-bottom: 0.75rem !important;
}

.vp-campaign-eyebrow {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #00D68F !important;
  margin-bottom: 0.75rem !important;
}

.vp-campaign-lead {
  font-size: 1.05rem !important;
  line-height: 1.72 !important;
  color: rgba(245, 247, 250, 0.55) !important;
  max-width: 54ch !important;
}


/* ─────────────────────────────────────────────────────────────────────
 * 14. BOTTOM CTA — THE "INEVITABLE" MOMENT
 * ───────────────────────────────────────────────────────────────────── */
.vp-cta-final,
[class*="vp-cta-final"],
#vp-cta-final {
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%,
      rgba(0, 214, 143, 0.12) 0%,
      rgba(255, 184, 0, 0.06) 35%,
      transparent 65%),
    radial-gradient(ellipse 60% 40% at 85% 60%,
      rgba(0, 102, 51, 0.08) 0%,
      transparent 70%),
    radial-gradient(ellipse 40% 40% at 15% 70%,
      rgba(187, 0, 0, 0.05) 0%,
      transparent 70%),
    #04080F !important;
}

.vp-cta-final-headline {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.95;
  text-align: center;
  color: #F5F7FA;
  margin-bottom: 0.5rem;
}

.vp-cta-final-sub {
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: rgba(245, 247, 250, 0.5);
  text-align: center;
  margin-bottom: 2.5rem;
}

.vp-cta-final-note {
  font-size: 0.75rem;
  color: rgba(245, 247, 250, 0.3);
  text-align: center;
  margin-top: 0.85rem;
  letter-spacing: 0.05em;
}


/* ─────────────────────────────────────────────────────────────────────
 * 15. SECTION TONES — DEEP KENYA
 * ───────────────────────────────────────────────────────────────────── */
.vp-tone-black   { background: #04080F !important; }
.vp-tone-green   {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 214, 143, 0.10) 0%, transparent 55%),
    #04080F !important;
}
.vp-tone-grid    {
  background:
    linear-gradient(rgba(0, 214, 143, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 214, 143, 0.03) 1px, transparent 1px),
    #04080F !important;
  background-size: 48px 48px !important;
}
.vp-tone-gradient {
  background: linear-gradient(180deg, #020804 0%, #000d08 40%, #04080F 100%) !important;
}

/* Story section divider line — new green */
.vp-section-divider {
  background: linear-gradient(90deg, transparent, rgba(0, 214, 143, 0.3), transparent) !important;
}

.vp-title-accent { color: #00D68F !important; }


/* ─────────────────────────────────────────────────────────────────────
 * 16. PRICING — CAMPAIGN TIERS
 * ───────────────────────────────────────────────────────────────────── */
.vp-pricing-card:hover,
[class*="vp-price"]:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(0, 214, 143, 0.3) !important;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 214, 143, 0.2) !important;
}

/* Recommended tier — animated border */
.vp-pricing-card.vp-recommended,
[class*="vp-price"][class*="recommend"],
.vp-plan-recommended {
  border: 1px solid transparent !important;
  background:
    linear-gradient(rgba(6, 12, 21, 0.9), rgba(6, 12, 21, 0.9)) padding-box,
    linear-gradient(135deg, #00D68F, rgba(0, 214, 143, 0.1), #FFB800, rgba(0, 214, 143, 0.1), #00D68F) border-box !important;
  background-size: 200% 200% !important;
  animation: vp-border-flow 4s linear infinite !important;
}


/* ─────────────────────────────────────────────────────────────────────
 * 17. FAQ — CONFIDENCE ACCORDION
 * ───────────────────────────────────────────────────────────────────── */
[class*="vp-faq-item"],
[class*="vp-accordion-item"] {
  transition: border-color 0.2s ease !important;
}

[class*="vp-faq-item"][open],
[class*="vp-faq-item"].vp-open,
[class*="vp-accordion-item"].vp-open {
  border-color: rgba(0, 214, 143, 0.3) !important;
}

/* FAQ toggle icon spring */
[class*="vp-faq"] [class*="icon"],
[class*="vp-accordion"] [class*="chevron"],
[class*="vp-faq"] [class*="plus"] {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}


/* ─────────────────────────────────────────────────────────────────────
 * 18. AUTH MODAL LEFT PANEL — BRAND MOMENT
 * ───────────────────────────────────────────────────────────────────── */
.vp-auth-aside,
[class*="vp-auth-aside"],
[class*="auth-aside"] {
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%,
      rgba(0, 214, 143, 0.18) 0%,
      rgba(255, 184, 0, 0.08) 40%,
      transparent 65%),
    radial-gradient(ellipse 60% 80% at 0% 100%,
      rgba(0, 102, 51, 0.12) 0%,
      transparent 60%),
    #04080F !important;
  border-right: 1px solid rgba(245, 247, 250, 0.07) !important;
}

/* Auth aside brand assertions */
.vp-auth-aside-assertions li,
[class*="vp-auth-aside"] li {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  line-height: 1.9 !important;
  color: rgba(245, 247, 250, 0.8) !important;
}

/* Auth input fields */
.vp-auth-input,
[class*="vp-input"] {
  background: rgba(4, 8, 15, 0.6) !important;
  border: 1px solid rgba(245, 247, 250, 0.1) !important;
  border-radius: 12px !important;
  color: #F5F7FA !important;
}

[class*="vp-input"]:focus {
  border-color: #00D68F !important;
  box-shadow: 0 0 0 3px rgba(0, 214, 143, 0.15) !important;
  outline: none !important;
}

/* Auth submit button — same as primary CTA */
[class*="vp-auth"] button[type="submit"],
[class*="vp-signup"] button[type="submit"],
[class*="vp-login"] button[type="submit"] {
  background: #00D68F !important;
  color: #04080F !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(0, 214, 143, 0.25) !important;
}


/* ─────────────────────────────────────────────────────────────────────
 * 19. ACCENT COLOR SWEEP — old green (#10b981 / #34d399) → new green
 * ───────────────────────────────────────────────────────────────────── */
/* Text */
[class*="text-emerald"],
[class*="text-green"],
.vp-title-accent,
.vp-accent-text {
  color: #00D68F !important;
}

/* Backgrounds / fills */
[class*="bg-emerald-500"],
[class*="bg-green-500"],
.vp-primary-bg {
  background-color: #00D68F !important;
}

/* Borders */
[class*="border-emerald"],
.vp-primary-border {
  border-color: rgba(0, 214, 143, 0.4) !important;
}

/* Gradient text that used the old green */
.vp-hero-h1 em,
[class*="gradient-text"] {
  background: linear-gradient(135deg, #F5F7FA 0%, rgba(0, 214, 143, 0.88) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Old amber/yellow → Deep Kenya gold */
[class*="text-amber"],
[class*="text-yellow"],
.vp-secondary-text {
  color: #FFB800 !important;
}

/* Old fire/danger banners that remain → Apple red */
.vp-problem-card {
  background: rgba(255, 59, 48, 0.05) !important;
  border: 1px solid rgba(255, 59, 48, 0.18) !important;
}


/* ─────────────────────────────────────────────────────────────────────
 * 20. SECTION BACKGROUNDS (Hercules-rendered sections)
 * ───────────────────────────────────────────────────────────────────── */

/* Each major section fades from void to absolute midnight */
#root > div > main > section,
#root section:not([class*="min-h-screen"]) {
  background: #04080F;
}

/* Large background blobs on "why" sections */
[id*="vp-why"],
[id*="why-2027"] {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(0, 214, 143, 0.07) 0%, transparent 55%),
    #04080F !important;
}


/* ─────────────────────────────────────────────────────────────────────
 * 21. LOGO BOOST — subtle drop glow
 * ───────────────────────────────────────────────────────────────────── */
.vp-nav-logo img,
.vp-footer-logo img,
#vp-nav-logo-premium {
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5)) !important;
}


/* ─────────────────────────────────────────────────────────────────────
 * 22. BUTTON HOVER LIFT (all .vp-btn variants)
 * ───────────────────────────────────────────────────────────────────── */
.vp-hero-btn {
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.2s ease !important;
}
.vp-hero-btn:hover {
  transform: scale(1.025) translateY(-1px) !important;
}
.vp-hero-btn:active {
  transform: scale(0.98) translateY(0) !important;
}


/* ─────────────────────────────────────────────────────────────────────
 * 23. WATERMARK COUNTDOWN (hero bottom-right felt-not-seen)
 * ───────────────────────────────────────────────────────────────────── */
#vp-hero-watermark-days {
  position: absolute;
  bottom: 4rem;
  right: 4vw;
  font-family: 'Fira Code', ui-monospace, monospace;
  font-size: clamp(3rem, 10vw, 7rem);
  font-weight: 800;
  color: rgba(0, 214, 143, 0.04);
  letter-spacing: -0.04em;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
  user-select: none;
}

#vp-hero-watermark-days span {
  display: block;
  font-size: 0.5em;
  font-weight: 300;
  letter-spacing: 0.18em;
  color: rgba(0, 214, 143, 0.03);
  text-transform: uppercase;
}


/* ─────────────────────────────────────────────────────────────────────
 * 24. PLATFORM MOCKUP — 3D TILT
 * ───────────────────────────────────────────────────────────────────── */
.vp-platform-mockup,
[class*="vp-cc-dashboard"],
[class*="vp-mockup"] {
  transform: perspective(1200px) rotateX(6deg) rotateY(-1deg) !important;
  box-shadow:
    0 80px 160px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.vp-platform-mockup.vp-untilted,
[class*="vp-cc-dashboard"].vp-untilted {
  transform: perspective(1200px) rotateX(0deg) rotateY(0deg) !important;
}


/* ─────────────────────────────────────────────────────────────────────
 * 25. PROBLEM-CARD RED LEFT BORDERS — REMOVE
 * ───────────────────────────────────────────────────────────────────── */
.vp-win-list li,
[class*="vp-win-list"] li {
  border-left: none !important;
  padding-left: 1rem !important;
}

[class*="vp-win-list"] li::before {
  content: '→';
  color: #00D68F;
  margin-right: 0.5rem;
  font-weight: 700;
}


/* ═══════════════════════════════════════════════════════════════════════
 * GENESIS REDESIGN — applied last, highest specificity
 * Transforms the page from "dark SaaS" → "command infrastructure"
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── PAGE BACKGROUND ── */
body,
#root,
#root > div {
  background: #04080F !important;
}

/* ── SECTION BASE — kill enormous min-height, add real breathing room ── */
.vp-story-section,
.vp-campaign-section.vp-story-section {
  min-height: auto !important;
  padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 5vw, 3rem) !important;
  background: #04080F !important;
  border-top: none !important;
  position: relative !important;
  /* no overflow:hidden — it clips Kenya map, flag banner, and floating panels */
}

/* ── SECTION INNER — wider, more breathing ── */
.vp-campaign-inner {
  max-width: 75rem !important;
  margin: 0 auto !important;
  padding: 0 !important;
  width: 100% !important;
}

/* ── REMOVE OLD SECTION DIVIDER ── */
.vp-section-divider {
  display: none !important;
}

/* ── TYPOGRAPHY REFINEMENTS ── */
.vp-campaign-title {
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.0 !important;
  color: #F5F7FA !important;
  margin: 0 0 1rem !important;
}
.vp-campaign-eyebrow {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  color: #00D68F !important;
  text-transform: uppercase !important;
  margin-bottom: 0.85rem !important;
}
.vp-campaign-lead {
  font-size: 1.05rem !important;
  line-height: 1.72 !important;
  color: rgba(245,247,250,0.55) !important;
  max-width: 54ch !important;
  margin: 0 0 2.5rem !important;
}

/* ── SECTION AURORA BACKGROUNDS — unique per section ── */
#vp-why-2027 {
  background:
    radial-gradient(ellipse 70% 40% at 100% 100%, rgba(187,0,0,0.05) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 0% 0%, rgba(255,184,0,0.04) 0%, transparent 60%),
    #04080F !important;
}
#vp-command-center {
  background:
    radial-gradient(ellipse 80% 60% at 50% -5%, rgba(0,214,143,0.10) 0%, transparent 55%),
    #04080F !important;
}
#vp-ai-strategist {
  background:
    radial-gradient(ellipse 60% 70% at 15% 50%, rgba(0,214,143,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 85% 20%, rgba(255,184,0,0.05) 0%, transparent 55%),
    #020508 !important;
}
#vp-groundforce {
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(0,102,51,0.09) 0%, transparent 60%),
    #04080F !important;
}
#vp-county-intelligence {
  background:
    radial-gradient(ellipse 120% 40% at 50% 50%, rgba(0,214,143,0.07) 0%, transparent 65%),
    #030a07 !important;
}
#vp-communications {
  background:
    radial-gradient(ellipse 60% 60% at 0% 50%, rgba(0,214,143,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 100% 50%, rgba(255,184,0,0.04) 0%, transparent 55%),
    #04080F !important;
}
#vp-social-proof {
  background:
    radial-gradient(ellipse 90% 50% at 50% 50%, rgba(0,214,143,0.09) 0%, transparent 60%),
    #030a07 !important;
}
#vp-pricing {
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(255,184,0,0.06) 0%, transparent 55%),
    #04080F !important;
}
#vp-faq-section {
  background: #04080F !important;
}
#vp-final-cta {
  background:
    radial-gradient(ellipse 140% 60% at 50% -5%, rgba(0,214,143,0.16) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 15% 80%, rgba(0,102,51,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 90% 70%, rgba(187,0,0,0.06) 0%, transparent 65%),
    #030a07 !important;
}

/* ── TOP SEPARATOR LINE between sections ── */
.vp-story-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(72rem, 90%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,247,250,0.06), transparent);
  pointer-events: none;
}

/* ── HERO SECTION — deeper immersion ── */
#root section[class*="min-h-screen"] {
  min-height: 100svh !important;
  padding-top: 4rem !important;
}

/* ── NAV LOGO — transparent PNG, no blend needed ── */
.vp-nav-logo img,
.vp-footer-logo img {
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.5)) !important;
}

/* ── HERO LOGO LOCKUP ── */
#vp-hero-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 1.5rem;
}
#vp-hero-logo-wrap img {
  height: clamp(32px, 6vw, 52px);
  width: auto;
  mix-blend-mode: normal;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.5));
}

/* ── SOCIAL PROOF — Tesla-style stat display ──
 *  3-col fixed grid. Numbers can never collide.
 *  No min-width auto-fit trickery — explicit columns.
 * ─── */
.vp-cos-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1px !important;
  max-width: 72rem !important;
  margin: 0 auto !important;
  border: 1px solid rgba(245,247,250,0.06) !important;
  border-radius: 1.5rem !important;
  overflow: hidden !important;
  background: rgba(245,247,250,0.06) !important;
}

@media (max-width: 640px) {
  .vp-cos-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.vp-cos-stat {
  background: rgba(4, 8, 15, 0.95) !important;
  padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 2vw, 1.5rem) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 0.6rem !important;
  transition: background 0.2s ease !important;
}

.vp-cos-stat:hover {
  background: rgba(0, 214, 143, 0.04) !important;
}

.vp-cos-stat-num {
  font-family: 'Fira Code', ui-monospace, monospace !important;
  font-size: clamp(2rem, 3.5vw, 3rem) !important;
  font-weight: 300 !important;
  color: #F5F7FA !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  display: block !important;
  /* Critical: never let this overflow or wrap */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.vp-cos-stat-label {
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(245,247,250,0.3) !important;
  line-height: 1.5 !important;
}

/* Keep the old vp-stat-box/vp-stat-val for any legacy sections */
.vp-stat-val {
  font-family: 'Fira Code', ui-monospace, monospace !important;
  font-size: clamp(1.4rem, 2vw, 2rem) !important;
  font-weight: 300 !important;
  color: #F5F7FA !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
.vp-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.25rem !important;
  max-width: 64rem !important;
  margin: 2rem auto !important;
}
.vp-stat-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 0.4rem !important;
  padding: 1.5rem 0.75rem !important;
  background: rgba(12,21,37,0.55) !important;
  border: 1px solid rgba(245,247,250,0.07) !important;
  border-radius: 1rem !important;
  overflow: hidden !important;
}
.vp-stat-lbl {
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: rgba(245,247,250,0.3) !important;
  white-space: nowrap !important;
}

/* ── PRICING OVERHAUL — Tesla Campaign Tiers ── */
.vp-pricing-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 1.5rem !important;
  margin-top: 2.5rem !important;
}
.vp-pricing-card,
[class*="vp-plan-card"] {
  background: rgba(12,21,37,0.6) !important;
  border: 1px solid rgba(245,247,250,0.08) !important;
  border-radius: 1.25rem !important;
  padding: 2rem 1.75rem !important;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), border-color 0.2s ease, box-shadow 0.3s ease !important;
  backdrop-filter: blur(16px) !important;
}
.vp-pricing-card:hover,
[class*="vp-plan-card"]:hover {
  transform: translateY(-10px) !important;
  border-color: rgba(0,214,143,0.35) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,214,143,0.15) !important;
}
.vp-pricing-tier-name,
[class*="vp-plan-name"] {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #00D68F !important;
  margin-bottom: 0.5rem !important;
}
.vp-pricing-price,
[class*="vp-plan-price"] {
  font-family: 'Fira Code', ui-monospace, monospace !important;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  font-weight: 300 !important;
  color: #F5F7FA !important;
}

/* ── COMMS CARDS ── */
.vp-comms-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 1.25rem !important;
  margin-top: 1rem !important;
}
.vp-comms-card {
  background: rgba(12,21,37,0.55) !important;
  border: 1px solid rgba(245,247,250,0.07) !important;
  border-radius: 1.25rem !important;
  padding: 1.75rem !important;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), border-color 0.2s ease !important;
  cursor: pointer !important;
}
.vp-comms-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(0,214,143,0.25) !important;
}
.vp-comms-icon {
  font-size: 2rem !important;
  margin-bottom: 0.75rem !important;
  display: block !important;
}
.vp-comms-card h3 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #F5F7FA !important;
  margin: 0 0 0.5rem !important;
}
.vp-comms-card p {
  font-size: 0.85rem !important;
  line-height: 1.55 !important;
  color: rgba(245,247,250,0.45) !important;
  margin: 0 !important;
}

/* ── PROBLEM GRID — hide the ✕-card list, keep Two Worlds ── */
#vp-campaign-sections-v5 .vp-problem-grid {
  display: none !important;
}
#vp-campaign-sections-v5 .vp-story-bridge {
  display: none !important;
}

/* ── TRUST STRIP MARQUEE ── */
#vp-trust-strip {
  overflow: hidden !important;
  border-top: 1px solid rgba(245,247,250,0.05) !important;
  border-bottom: 1px solid rgba(245,247,250,0.05) !important;
  padding: 1.25rem 0 !important;
  background: rgba(4,8,15,0.7) !important;
}
.vp-trust-track {
  display: flex !important;
  gap: 3rem !important;
  animation: vp-marquee 55s linear infinite !important;
  width: max-content !important;
  white-space: nowrap !important;
}
@keyframes vp-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.vp-trust-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  font-size: 0.8rem !important;
  color: rgba(245,247,250,0.38) !important;
  letter-spacing: 0.04em !important;
}
.vp-trust-item-num {
  font-family: 'Fira Code', ui-monospace, monospace !important;
  color: rgba(245,247,250,0.75) !important;
  font-weight: 400 !important;
}
.vp-trust-sep {
  color: rgba(0,214,143,0.3) !important;
}

/* ── FAQ UPGRADE ── */
.vp-faq-item,
[class*="vp-faq-item"] {
  border: 1px solid rgba(245,247,250,0.07) !important;
  border-radius: 0.75rem !important;
  margin-bottom: 0.75rem !important;
  padding: 1.25rem 1.5rem !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
  background: rgba(12,21,37,0.4) !important;
}
.vp-faq-item:hover,
[class*="vp-faq-item"]:hover {
  border-color: rgba(0,214,143,0.18) !important;
  background: rgba(12,21,37,0.65) !important;
}
.vp-faq-q,
[class*="vp-faq-q"] {
  font-weight: 600 !important;
  font-size: 1rem !important;
  color: #F5F7FA !important;
}
.vp-faq-a,
[class*="vp-faq-a"] {
  font-size: 0.9rem !important;
  line-height: 1.65 !important;
  color: rgba(245,247,250,0.5) !important;
  margin-top: 0.75rem !important;
}

/* ── SCROLL REVEAL ── */
.vp-reveal {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(5px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.65s ease;
}
.vp-reveal.vp-revealed {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}
/* Stagger children of revealed parent */
.vp-reveal.vp-revealed > * { opacity: 1; filter: none; }
.vp-reveal.vp-revealed > *:nth-child(1) { transition-delay: 0ms; }
.vp-reveal.vp-revealed > *:nth-child(2) { transition-delay: 80ms; }
.vp-reveal.vp-revealed > *:nth-child(3) { transition-delay: 160ms; }
.vp-reveal.vp-revealed > *:nth-child(4) { transition-delay: 240ms; }

/* Always reveal below the fold if JS doesn't fire */
@media (prefers-reduced-motion: reduce) {
  .vp-reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}