/* =========================================================
   NEON GREEN THEME — pure black + electric neon green + off-white
   ---------------------------------------------------------------
   Swappable theme layer. Loads AFTER homepage.css so it wins the
   cascade. To disable the theme, remove the <link> to this file
   from the HTML head — nothing else needs to change.

   Palette:
     BG      : #050508  (deepest)   / #0d0d12 (elevated) / #14141a (raised)
     NEON    : #39FF14  primary     / #66FF3D hover    / #A6FFA0 soft
     TEXT    : #E8FFE8  strong      / #92C6A5 muted   / #5A8B6C soft
   ========================================================= */

:root {
  /* Redefine the four background/palette tokens the whole site uses */
  --cream:      #050508;
  --sand:       #0d0d12;
  --paper:      #14141a;
  --ink:        #E8FFE8;

  /* Coral scale becomes neon-green scale */
  --coral:      #39FF14;
  --coral-50:   #051a05;
  --coral-100:  #0a3010;
  --coral-200:  #124a1c;
  --coral-400:  #1f7a2d;
  --coral-500:  #39FF14;
  --coral-600:  #52FF3D;
  --coral-700:  #6BFF66;

  /* Ink scale becomes chrome/light-green scale */
  --ink-900:    #E8FFE8;
  --ink-700:    #92C6A5;
  --ink-500:    #5A8B6C;
  --ink-400:    #3E6A50;
  --ink-300:    #92C6A5;
  --ink-200:    #C4E8CE;
  --ink-100:    #DEF5E2;

  /* Semantic slots */
  --bg:           #050508;
  --bg-secondary: #0d0d12;
  --bg-elevated:  #14141a;
  --bg-inverse:   #E8FFE8;
  --fg:           #E8FFE8;
  --fg-muted:     #92C6A5;
  --fg-soft:      #5A8B6C;
  --fg-faint:     #3E6A50;
  --fg-on-dark:   #E8FFE8;
  --fg-on-coral:  #050508;

  /* Rules */
  --rule:         #1a2820;
  --rule-strong:  #2a4033;
  --rule-on-dark: #2a4033;

  /* Accent aliases */
  --accent:       #39FF14;
  --accent-hover: #52FF3D;
  --accent-press: #6BFF66;
  --underline:    #39FF14;
}

/* Body + base */
html, body { background: #050508 !important; color: #E8FFE8; }
::selection { background: #39FF14; color: #050508; }
body::after { display: none !important; } /* kill the paper grain */

/* Selection colors + strong link/hover */
a { color: inherit; }
a:hover { color: #66FF3D; }

/* =========================================================
   CURSOR — neon green spotlight
   ========================================================= */
.hp-cursor-blob {
  background: radial-gradient(circle,
              rgba(57, 255, 20, 0.30) 0%,
              rgba(57, 255, 20, 0.14) 35%,
              transparent 65%) !important;
  mix-blend-mode: screen !important;
  filter: blur(40px) !important;
}
.hp-cursor-dot {
  background: #39FF14 !important;
  box-shadow: 0 0 16px rgba(57, 255, 20, 0.95) !important;
}

/* =========================================================
   TILT card highlight — neon green sweep
   ========================================================= */
.hp-tilt::after {
  background: radial-gradient(circle at var(--glow-x) var(--glow-y),
              rgba(57, 255, 20, 0.22),
              transparent 45%) !important;
  mix-blend-mode: screen !important;
}

/* =========================================================
   NAV — dark blur backdrop when scrolled (override cream blur)
   ========================================================= */
header.hp-nav-root[style*="rgba(244"] {
  background: rgba(5, 5, 8, 0.78) !important;
  border-bottom-color: #1a2820 !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}

/* Brand wordmark colors */
.hp-brand-name { color: #E8FFE8 !important; }
.hp-brand-name > span:first-child { color: #E8FFE8 !important; }
.hp-brand-name > span:last-child  { color: #92C6A5 !important; }

/* Nav links */
.hp-nav-link { color: #92C6A5 !important; }
.hp-nav-link:hover { color: #39FF14 !important; }
.hp-nav-link.is-cta {
  color: #39FF14 !important;
  border-bottom: 1px solid #39FF14 !important;
}

/* SM circle logo — invert to neon green on dark */
.hp-brand svg circle { fill: #39FF14 !important; }
.hp-brand svg text   { fill: #050508 !important; }
.hp-brand svg rect   { fill: #050508 !important; opacity: 0.5; }

/* =========================================================
   HERO — text light on dark, neon accents
   ========================================================= */
.hp-hero-title { color: #E8FFE8; text-shadow: 0 0 60px rgba(57, 255, 20, 0.10); }
.hp-hero-sub   { color: #92C6A5; }
.hp-hero-sub strong { color: #E8FFE8 !important; }
.hp-hero-sub span[style*="var(--coral-700)"],
.hp-hero-sub span[style*="var(--coral)"] { color: #39FF14 !important; }

/* Hero orbs: recolor coral to neon */
.hp-orb--coral {
  background: radial-gradient(circle at center, rgba(57, 255, 20, 0.22), transparent 65%) !important;
}
.hp-orb--warm {
  background: radial-gradient(circle at center, rgba(102, 255, 61, 0.14), transparent 65%) !important;
}
.hp-orb--blue {
  background: radial-gradient(circle at center, rgba(20, 255, 180, 0.10), transparent 65%) !important;
}

/* Grid background lines — faint neon */
.hp-bg-grid {
  background-image:
    linear-gradient(to right, rgba(57, 255, 20, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(57, 255, 20, 0.06) 1px, transparent 1px) !important;
}

/* LIVE badge — neon glow */
.hp-live-badge {
  background: rgba(5, 5, 8, 0.75) !important;
  border-color: #39FF14 !important;
  color: #39FF14 !important;
  box-shadow: 0 0 24px rgba(57, 255, 20, 0.28) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hp-live-dot {
  background: #39FF14 !important;
}
@keyframes hp-live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(57, 255, 20, 0.85); transform: scale(1); }
  50%      { box-shadow: 0 0 0 12px rgba(57, 255, 20, 0);  transform: scale(1.15); }
}

/* Eyebrows */
.eyebrow, .caption, .label { color: #5A8B6C !important; }
.eyebrow[style*="var(--coral)"],
span.eyebrow[style*="borderBottom"] {
  color: #39FF14 !important;
  border-color: #39FF14 !important;
}

/* =========================================================
   BUTTONS — neon
   ========================================================= */
.hp-btn--primary {
  background: #39FF14 !important;
  color: #050508 !important;
  border-color: #39FF14 !important;
  box-shadow: 0 0 24px rgba(57, 255, 20, 0.35) !important;
}
.hp-btn--primary:hover {
  background: #52FF3D !important;
  color: #050508 !important;
  box-shadow: 0 0 44px rgba(57, 255, 20, 0.6) !important;
}
.hp-btn--ghost {
  background: transparent !important;
  color: #E8FFE8 !important;
  border-color: #39FF14 !important;
}
.hp-btn--ghost:hover {
  background: rgba(57, 255, 20, 0.10) !important;
  color: #39FF14 !important;
  box-shadow: 0 0 28px rgba(57, 255, 20, 0.35) !important;
}
.hp-btn--coral {
  background: #39FF14 !important;
  color: #050508 !important;
  border-color: #39FF14 !important;
  box-shadow: 0 0 32px rgba(57, 255, 20, 0.45) !important;
}
.hp-btn--coral:hover { background: #66FF3D !important; }

/* =========================================================
   STATS BAND — dark void with neon count-ups
   ========================================================= */
section[style*="var(--ink)"], /* stats section uses inline var(--ink) as bg */
.hp-stats {
  background: #050508 !important;
  color: #E8FFE8 !important;
}
.hp-stat > div:first-child {
  color: #E8FFE8 !important;
  text-shadow: 0 0 32px rgba(57, 255, 20, 0.25);
}
.hp-stat span[style*="var(--coral)"] {
  color: #39FF14 !important;
  text-shadow: 0 0 24px rgba(57, 255, 20, 0.7) !important;
}

/* =========================================================
   MARQUEE — light text on dark
   ========================================================= */
.hp-marquee-reel {
  color: #E8FFE8 !important;
}
.hp-marquee-reel span > span[style*="borderRadius"] {
  background: #39FF14 !important;
  box-shadow: 0 0 8px rgba(57, 255, 20, 0.8);
}

/* =========================================================
   SERVICE + NICHE CARDS
   ========================================================= */
.hp-service-card {
  background: #0d0d12;
  border: 1px solid #1a2820;
  padding: 24px 22px 26px;
  border-radius: 14px;
  transition: background 320ms var(--ease-out), border-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.hp-service-card:hover {
  background: #14141a !important;
  border-color: #39FF14 !important;
  box-shadow: 0 16px 40px rgba(57, 255, 20, 0.15) !important;
}
.hp-service-card::before {
  background: #39FF14 !important;
}
.hp-service-card > div:nth-child(2) { color: #E8FFE8 !important; } /* title */
.hp-service-card p { color: #92C6A5 !important; }

.hp-niche-card {
  background: #0d0d12 !important;
  border: 1px solid #1a2820 !important;
}
.hp-niche-card:hover {
  border-color: #39FF14 !important;
  box-shadow: 0 18px 40px rgba(57, 255, 20, 0.14) !important;
}
.hp-niche-card::before { background: #39FF14 !important; }
.hp-niche-head { border-bottom-color: #1a2820 !important; }
.hp-niche-head svg { color: #39FF14 !important; }
.hp-niche-label { color: #E8FFE8 !important; }
.hp-niche-list li { color: #92C6A5 !important; }
.hp-niche-list li::before { background: #39FF14 !important; }

/* =========================================================
   CHIPS — dark pill with neon accent
   ========================================================= */
.hp-chip {
  background: #14141a !important;
  color: #92C6A5 !important;
  border: 1px solid #1a2820 !important;
}
.hp-chip::before { background: #39FF14 !important; }
.hp-chip:hover {
  border-color: #39FF14 !important;
  color: #E8FFE8 !important;
  transform: translateY(-2px);
}

/* =========================================================
   WORLD MAP — dark frame, neon active countries
   ========================================================= */
.hp-map-frame {
  background: #050508 !important;
  border: 1px solid #1a2820 !important;
}
.hp-map-svg path.country {
  fill: #14141a !important;
  stroke: #050508 !important;
}
.hp-map-svg path.country.is-active {
  fill: #39FF14 !important;
  filter: drop-shadow(0 0 6px rgba(57, 255, 20, 0.75)) !important;
}
.hp-map-svg path.country.is-active:hover {
  fill: #A6FFA0 !important;
  filter: drop-shadow(0 0 16px rgba(57, 255, 20, 0.95)) !important;
}
@keyframes hp-map-pulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(57, 255, 20, 0.55)); }
  50%      { filter: drop-shadow(0 0 14px rgba(57, 255, 20, 0.95)); }
}
.hp-map-loading { color: #92C6A5 !important; }
.hp-map-legend { color: #92C6A5 !important; }
.hp-legend-dot::before { background: #39FF14 !important; }
.hp-legend-dot.is-base::before { background: #14141a !important; }

/* =========================================================
   PROCESS — light text on dark
   ========================================================= */
.hp-step { border-color: #1a2820 !important; }
.hp-step > div { color: #E8FFE8 !important; }
.hp-step p { color: #92C6A5 !important; }
.hp-step-num { color: #E8FFE8 !important; text-shadow: 0 0 32px rgba(57, 255, 20, 0.15); }

/* =========================================================
   JOURNEY TIMELINE — neon dots + coral tags → neon
   ========================================================= */
.hp-timeline { border-top-color: #2a4033 !important; }
.hp-tl-item { border-bottom-color: #1a2820 !important; }
.hp-tl-item:hover { background: #0d0d12 !important; }
.hp-tl-item:last-child { border-bottom-color: #2a4033 !important; }
.hp-tl-title { color: #E8FFE8 !important; }
.hp-tl-text  { color: #92C6A5 !important; }
.hp-tl-tag {
  color: #39FF14 !important;
  border-color: #39FF14 !important;
  background: transparent !important;
}
.hp-tl-rail::before { background: #2a4033 !important; }
.hp-tl-dot {
  background: #39FF14 !important;
  border-color: #050508 !important;
  box-shadow: 0 0 0 1px #39FF14, 0 0 14px rgba(57, 255, 20, 0.7) !important;
}
.hp-tl-item:hover .hp-tl-dot {
  box-shadow: 0 0 0 1px #39FF14, 0 0 26px rgba(57, 255, 20, 0.95) !important;
}

/* =========================================================
   FOOTER — deeper void, neon links
   ========================================================= */
footer#reach,
footer[style*="var(--ink)"] {
  background: #050508 !important;
  border-top: 1px solid #1a2820;
}
.hp-footer-cta { border-bottom-color: #2a4033 !important; }
.hp-footer-cta h2 { color: #E8FFE8 !important; }
.hp-footer-cta h2 span[style*="background"] {
  background: #39FF14 !important;
  box-shadow: 0 0 12px rgba(57, 255, 20, 0.6);
}
.hp-footer-link { color: #92C6A5 !important; }
.hp-footer-link:hover { color: #39FF14 !important; }
.hp-footer-link::after { background: #39FF14 !important; }
.hp-legal-link {
  color: #92C6A5 !important;
  border-color: #2a4033 !important;
}
.hp-legal-link:hover {
  color: #050508 !important;
  border-color: #39FF14 !important;
  background: #39FF14 !important;
}
.hp-social-link {
  color: #92C6A5 !important;
  border-color: #2a4033 !important;
}
.hp-social-link:hover {
  color: #050508 !important;
  border-color: #39FF14 !important;
  background: #39FF14 !important;
}

/* =========================================================
   SCROLL PROGRESS + BACK-TO-TOP
   ========================================================= */
.hp-scroll-progress {
  background: rgba(255, 255, 255, 0.04) !important;
}
.hp-scroll-progress-bar {
  background: linear-gradient(to right, #39FF14, #66FF3D) !important;
  box-shadow: 0 0 16px rgba(57, 255, 20, 0.8) !important;
}
.hp-scroll-top {
  background: #14141a !important;
  color: #39FF14 !important;
  border: 1px solid #39FF14 !important;
  box-shadow: 0 8px 24px rgba(57, 255, 20, 0.30) !important;
}
.hp-scroll-top:hover {
  background: #39FF14 !important;
  color: #050508 !important;
  box-shadow: 0 0 40px rgba(57, 255, 20, 0.7) !important;
}

/* =========================================================
   Blanket sweeps for inline color: var(--ink) and (--coral)
   Any element with these inline colors flips automatically.
   ========================================================= */
[style*="color: var(--ink)"],
[style*="color:var(--ink)"] { color: #E8FFE8 !important; }
[style*="color: var(--ink-700)"] { color: #92C6A5 !important; }
[style*="color: var(--coral)"],
[style*="color:var(--coral)"] { color: #39FF14 !important; }
[style*="color: var(--coral-700)"] { color: #52FF3D !important; }

/* Anything relying on borderBottom: 1px solid var(--coral) */
[style*="var(--coral)"][style*="borderBottom"] {
  border-color: #39FF14 !important;
}

/* Contact form inputs on dark */
.hp-form input, .hp-form select, .hp-form textarea {
  background: #0d0d12 !important;
  color: #E8FFE8 !important;
  border-color: #1a2820 !important;
}
.hp-form input:focus, .hp-form select:focus, .hp-form textarea:focus {
  border-color: #39FF14 !important;
  box-shadow: 0 0 0 4px rgba(57, 255, 20, 0.18) !important;
}
.hp-form input::placeholder, .hp-form textarea::placeholder {
  color: #3E6A50 !important;
}
.hp-field-label { color: #92C6A5 !important; }

/* Legal pages (Privacy/Terms/Descriptions) body text */
.hp-legal p, .hp-legal li { color: #92C6A5 !important; }
.hp-legal h2 { color: #E8FFE8 !important; }
.hp-legal a { color: #39FF14 !important; }
.hp-legal strong { color: #E8FFE8 !important; }