/* ===================================================================
 * MarketSage brand overrides — light theme + brand colors + Public Sans.
 * Loaded LAST so it wins over the template's dark theme. Atom/particle
 * background is retained (recolored to brand in js/polygons.js).
 * Brand: primary #5F6FFF, blue #2B8FEF, teal #35C0C9, ink #1a2233.
 * ------------------------------------------------------------------- */

:root {
  --ms-primary: #5F6FFF;
  --ms-blue: #2B8FEF;
  --ms-teal: #35C0C9;
  --ms-ink: #1a2233;
  --ms-muted: #697a8d;
}

/* ---- Light canvas ---- */
html, body { background: #f6f8fc !important; }

.s-home,
.s-home--particles {
  background: #f6f8fc !important;
}

/* kill the template's dark dimming overlays */
.s-home--particles::before {
  opacity: 0 !important;
  background: transparent !important;
}
.s-home .overlay { opacity: 0 !important; background: transparent !important; }

/* soft brand-tinted glow instead of the dark radial overlay */
.s-home .gradient-overlay {
  opacity: 1 !important;
  background:
    radial-gradient(1100px 560px at 50% -14%, rgba(95,111,255,.14), transparent 60%),
    radial-gradient(820px 480px at 90% 116%, rgba(53,192,201,.14), transparent 60%),
    radial-gradient(680px 440px at 8% 110%, rgba(245,130,31,.08), transparent 60%) !important;
}

/* preloader on light */
#preloader { background: #f6f8fc !important; }

/* ---- Typography → Public Sans + dark ink ---- */
.home-content,
.home-content h1,
.home-content h3,
.home-content__text p,
.home-content__counter .time,
.home-content__counter .days,
.home-content__counter .days span,
#mc-form input,
#mc-form label,
.home-social,
.home-copyright,
.home-copyright span {
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.home-content h3 { color: var(--ms-primary) !important; font-weight: 700 !important; }
.home-content h3::before { background-color: var(--ms-primary) !important; }

.home-content h1 {
  color: var(--ms-ink) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}

.home-content__text p { color: var(--ms-muted) !important; }

/* ---- Countdown ---- */
.home-content__counter .time { color: var(--ms-ink) !important; font-weight: 300 !important; }
.home-content__counter .time span { color: var(--ms-muted) !important; }
.home-content__counter .days { font-weight: 200 !important; color: var(--ms-ink) !important; }
.home-content__counter .days span {
  background: linear-gradient(135deg, var(--ms-primary), var(--ms-blue)) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.home-content__line {
  background: linear-gradient(to bottom, var(--ms-primary), var(--ms-teal)) !important;
}

/* ---- Email capture ---- */
#mc-form input[type="email"] {
  background: #ffffff !important;
  color: var(--ms-ink) !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
}
#mc-form input[type="email"]::placeholder { color: #94a3b8 !important; }
#mc-form input[type="email"].placeholder { color: #94a3b8 !important; }
#mc-form input[type="submit"] {
  background: linear-gradient(135deg, var(--ms-primary), var(--ms-blue)) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}
#mc-form input[type="submit"]:hover { filter: brightness(1.05); }
#mc-form label { color: var(--ms-muted) !important; }

/* ---- Logo / social / footer ---- */
/* template hard-codes width:100px height:25px (distorted) — override it */
.home-logo img { width: 190px !important; height: auto !important; max-width: none !important; }
.home-social a { color: var(--ms-muted) !important; }
.home-social a:hover { color: var(--ms-primary) !important; }
.home-copyright,
.home-copyright span { color: var(--ms-muted) !important; }
.home-copyright a { color: var(--ms-primary) !important; }

/* preloader dots → brand */
.line-scale-pulse-out > div { background-color: var(--ms-primary) !important; }

/* Pace.js top loading bar → brand (was pink #ec008c) */
.pace .pace-progress {
  background: linear-gradient(90deg, var(--ms-primary), var(--ms-blue), var(--ms-teal)) !important;
}