:root{--purple:#6C1FA8;--blue:#0D1B4C;--lav:#CBB2FF;--sky:#5BC0EB;}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--blue);background:#fff}
.container{max-width:1200px;margin:0 auto;padding:0 24px}.section{padding:80px 0}.soft{background:#fff;}
h1{font-size:56px;line-height:1.05;margin:0 0 10px;font-weight:800}h2{font-size:36px;margin:0 0 10px;font-weight:800}
p{color:#42507a}.kicker{color:#6b7aa5;font-size:13px}.small{font-size:14px}
.grid{display:grid;gap:24px}.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 10px 30px rgba(13,27,76,.06)}.card .content{padding:24px}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:16px;padding:14px 20px;font-weight:600;cursor:pointer;transition:transform .05s ease,opacity .2s}
.btn:active{transform:scale(.98)}.btn-primary{color:#fff;background:linear-gradient(90deg,var(--purple),var(--sky))}.btn-secondary{background:#fff;color:var(--blue);border:1px solid #e2e8f0}
.grad{background:linear-gradient(90deg,var(--purple),var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.1) blur(6px);border-bottom:1px solid #e2e8f0;z-index:10}
.nav .row{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.hero{padding:100px 0}.hero-aside{border-radius:24px;box-shadow:0 20px 60px rgba(13,27,76,.08);border:1px solid #eaeefe}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:24px}.chip{border-radius:16px;border:1px solid #e2e8f0;padding:14px}
.stat{font-size:28px;font-weight:800}.underline-grad{position:relative;display:inline-block}
.underline-grad:after{content:"";display:block;height:4px;width:96px;margin-top:8px;border-radius:999px;background:linear-gradient(90deg,var(--purple),var(--sky))}
.footer{border-top:1px solid #e2e8f0;padding:24px 0;color:#67759c;text-align:center}
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}.reveal.in{opacity:1;transform:translateY(0)}
a{color:#6C1FA8;text-decoration:none}
@media(max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}h1{font-size:40px}}



/* Hero contrast overlay */
.hero {
  position: relative;
  z-index: 1;
}
.hero .content {
  background: linear-gradient(135deg, rgba(13,27,76,0.92), rgba(108,31,168,0.88));
  padding: 32px 32px 26px;
  border-radius: 24px;
  box-shadow: 0 20px 46px rgba(0,0,0,0.4);
  color: #FFFFFF;
}
.hero .content h1 {
  color: #FFFFFF;
}
.hero .content p {
  color: #E5EBFF;
}


/* Dark contrast band for selected sections */
.contrast-band{
  background:
    radial-gradient(1200px 600px at 10% 0, rgba(108,31,168,.32), transparent 60%),
    radial-gradient(1200px 800px at 90% 20%, rgba(91,192,235,.28), transparent 60%),
    linear-gradient(180deg,#050c28,#0D1B4C,#050c28);
  color:#f7f8ff;
}
.contrast-card{
  background:#ffffff11;
  backdrop-filter:blur(18px);
  border-radius:24px;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}


/* Improve readability on dark bands */
.contrast-band{
  background:
    radial-gradient(1200px 600px at 10% 0, rgba(108,31,168,.45), transparent 55%),
    radial-gradient(1200px 800px at 95% 10%, rgba(91,192,235,.4), transparent 55%),
    linear-gradient(180deg,#020617,#02041a,#020617);
  color:#f9f9ff;
}
.contrast-band h1,
.contrast-band h2,
.contrast-band h3{
  color:#f9f9ff;
}
.contrast-band .grad{
  background:none !important;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  color:#f9f9ff;
  -webkit-text-fill-color:#f9f9ff;
}
.contrast-band p,
.contrast-band .kicker,
.contrast-band li{
  color:#e4e7ff;
}


/* Force cards inside dark bands to keep white background + dark text */
.contrast-band .card{
  background:#fff;
  color:#0D1B4C;
}
.contrast-band .card h1,
.contrast-band .card h2,
.contrast-band .card h3,
.contrast-band .card h4,
.contrast-band .card h5,
.contrast-band .card p,
.contrast-band .card .kicker,
.contrast-band .card .small,
.contrast-band .card li,
.contrast-band .card label,
.contrast-band .card span{
  color:#0D1B4C;
}

/* Vanguard v5 – improve readability on ROI band and gradient sections */
#roi h2,
#roi p,
#roi .kicker {
  color: var(--blue);
}
#roi .grad {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  color: var(--blue);
}

/* Niche service cards on dark bands */
.industry-services .card,
.niche-grid .card {
  background: rgba(6, 11, 40, 0.96);
  border-color: rgba(148, 163, 199, 0.4);
}
.industry-services .card h3,
.niche-grid .card h3,
.industry-services .card p,
.niche-grid .card p,
.industry-services .card li,
.niche-grid .card li {
  color: #f9fbff;
}

/* --- Hero + compare band readability fix (v5.2) --- */
.container.hero,
.hero-wrap,
.hero-section {
  position: relative;
  isolation: isolate;
}

.container.hero::before,
.hero-wrap::before,
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(0,0,0,0.55), transparent 55%),
              linear-gradient(to bottom, rgba(2,6,23,0.75), rgba(2,6,23,0.95));
  pointer-events: none;
  z-index: -1;
}

.container.hero .hero-card {
  background: rgba(4,7,32,0.92);
  box-shadow: 0 24px 80px rgba(0,0,0,0.75);
  border: 1px solid rgba(255,255,255,0.10);
}

.container.hero .hero-card h1,
.container.hero .hero-card p,
.container.hero .hero-card .kicker,
.container.hero .hero-card .metrics,
.container.hero .hero-card .metric,
.container.hero .hero-card .metric span {
  color: #f9fbff;
  text-shadow: 0 10px 30px rgba(0,0,0,0.9);
  opacity: 1 !important;
}

/* "What's really happening today" band */
.compare-band,
.industry-compare,
.contrast-band-today {
  background: radial-gradient(circle at top left, #1e163f, #020617);
  color: #f9fbff;
}

.compare-band h2,
.industry-compare h2,
.contrast-band-today h2,
.compare-band h3,
.industry-compare h3,
.contrast-band-today h3 {
  color: #ffffff;
}

.compare-band p,
.compare-band li,
.industry-compare p,
.industry-compare li,
.contrast-band-today p,
.contrast-band-today li {
  color: #e5edff;
}

/* Rounded dark cards on niche pages */
.niche-grid .card,
.niche-cards .card,
.industry-cards .card {
  border-radius: 24px;
  background: radial-gradient(circle at top left, rgba(203,178,255,0.16), rgba(10,16,54,0.96));
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 18px 60px rgba(0,0,0,0.6);
}

/* --- HERO MAX READABILITY v5.3 --- */
.container.hero,
.hero-section,
.hero-wrap {
  position: relative;
  background-color: #020617;
}

.hero-overlay-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(15,23,42,0.95), rgba(15,23,42,0.85)),
    linear-gradient(to bottom right, rgba(15,23,42,0.95), rgba(15,23,42,0.92));
  opacity: 0.96;
  pointer-events: none;
  z-index: 1;
}

.hero-media video,
.hero-media img {
  filter: blur(1px) brightness(0.45);
  transform: scale(1.02);
}

.hero-card,
.hero-content,
.hero-inner-card {
  position: relative;
  z-index: 2;
  background: #020617;
  border-radius: 32px;
  padding: 2.5rem 3rem;
  box-shadow: 0 28px 100px rgba(0,0,0,0.9);
  border: 1px solid rgba(148,163,184,0.4);
}

.hero-card h1,
.hero-card h2,
.hero-card p,
.hero-card .kicker,
.hero-card .metric,
.hero-card .metric span,
.hero-card .btn,
.hero-card .btn span {
  color: #f9fafb !important;
  text-shadow: 0 14px 40px rgba(0,0,0,0.95);
}

.hero-metrics .metric-label {
  color: #e5e7eb !important;
}

/* Tighten hero buttons so they pop */
.hero-card .btn-primary {
  background: linear-gradient(90deg, #6C1FA8, #5BC0EB);
  border: none;
  color: #ffffff !important;
}

.hero-card .btn-secondary {
  background: #ffffff;
  color: #0f172a !important;
  border: none;
}

/* --- Niche compare band: rounded cards --- */
.industry-compare-band {
  padding: 3rem 0 4rem;
}

.industry-compare {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 1.75rem;
}

@media (min-width: 900px) {
  .industry-compare {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

.industry-compare-card {
  background: radial-gradient(circle at top left, #1f2937, #020617);
  border-radius: 24px;
  padding: 2.25rem 2.75rem;
  color: #e5e7eb;
  box-shadow: 0 24px 70px rgba(0,0,0,0.7);
  border: 1px solid rgba(148,163,184,0.35);
}

.industry-compare-card h3 {
  color: #f9fafb;
  margin-bottom: 0.75rem;
}

.industry-compare-card ul {
  margin: 0;
  padding-left: 1.25rem;
}

/* --- HERO CARD THEME MATCH v5.4 --- */
.container.hero .content{
  background: linear-gradient(
    135deg,
    rgba(108, 31, 168, 0.80) 0%,
    rgba(13, 27, 76, 0.92) 100%
  );
  color: #ffffff;
  border-radius: 32px;
  padding: 32px 36px 30px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.container.hero .content h1,
.container.hero .content h1 span,
.container.hero .content .grad{
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  background: none;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.container.hero .content p,
.container.hero .content .hero-subtitle,
.container.hero .content .hero-body{
  color: rgba(255, 255, 255, 0.9);
}

.container.hero .content .stat .label,
.container.hero .content .stat .value{
  color: #ffffff;
}

.container.hero .content .btn-primary{
  color: #ffffff;
}

.container.hero .content .btn-secondary{
  background-color: #ffffff;
  color: #0D1B4C;
  border: 2px solid rgba(255, 255, 255, 0.85);
}

/* --- WITH VANGUARD CARD v5.4 --- */
.with-vanguard-card{
  background: linear-gradient(
    135deg,
    rgba(108, 31, 168, 0.80) 0%,
    rgba(13, 27, 76, 0.92) 100%
  );
  border-radius: 24px;
  padding: 28px 32px;
  color:#ffffff;
  box-shadow: 0 24px 60px rgba(0,0,0,0.65);
}
.with-vanguard-card h3,
.with-vanguard-card h4{
  color:#ffffff;
}
.with-vanguard-card p,
.with-vanguard-card li{
  color:rgba(255,255,255,0.92);
}


/* ============================================================
   SITEWIDE MOBILE OPTIMIZATION PACK + VIDEO SAFETY
   BUILD 20260107-224836
   ============================================================ */
@media (max-width: 820px) {
  html, body { overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; }

  /* Containers / sections */
  .container, section, header, main, footer {
    padding-left: 5vw !important;
    padding-right: 5vw !important;
  }

  /* Typography */
  h1 { font-size: clamp(2.0rem, 7.2vw, 3.1rem) !important; line-height: 1.06 !important; letter-spacing: -0.04em; }
  h2 { font-size: clamp(1.65rem, 6vw, 2.4rem) !important; line-height: 1.10 !important; letter-spacing: -0.03em; }
  h3 { font-size: clamp(1.25rem, 4.8vw, 1.65rem) !important; line-height: 1.15 !important; }
  p, li { font-size: 1.02rem !important; line-height: 1.55 !important; }

  /* Grids become single column */
  .grid, .cards, .card-grid, .two-col, .three-col {
    grid-template-columns: 1fr !important;
  }

  /* Buttons / CTAs */
  a.btn, button, .btn {
    width: 100%;
    max-width: 100%;
  }

  /* Media */
  img, video { max-width: 100%; height: auto; }
  video { border-radius: 18px; }

  /* Reduce excessive vertical spacing */
  .section { padding-top: 56px !important; padding-bottom: 56px !important; }
}

@media (max-width: 480px) {
  .section { padding-top: 46px !important; padding-bottom: 46px !important; }
  p, li { font-size: 1rem !important; }
}




/* =========================
   HEADER TITLE FIT TUNING
   BUILD 20260107-225214
   ========================= */

h1 {
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  word-break: break-word;
}

h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.035em;
}

@media (max-width: 820px) {
  h1 {
    font-size: clamp(1.9rem, 7vw, 2.6rem);
  }
  h2 {
    font-size: clamp(1.5rem, 5.8vw, 2.1rem);
  }
}



/* =========================
   MOBILE HEADER NAV BOXES
   BUILD 20260107-225555
   ========================= */

/* Make header nav wrap cleanly on mobile and put links in “pills/boxes” */
@media (max-width: 820px) {

  header nav,
  .site-header nav,
  .navbar nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
    align-items: center !important;
  }

  header nav a,
  .site-header nav a,
  .navbar nav a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(108,31,168,0.22) !important;
    background: rgba(255,255,255,0.72) !important;
    backdrop-filter: blur(10px);
    color: #0D1B4C !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  header nav a:hover,
  .site-header nav a:hover,
  .navbar nav a:hover {
    transform: translateY(-1px);
  }

  /* If there’s a CTA button link in the header, keep it readable */
  header nav a.cta,
  header nav a.button,
  header nav a.nav-cta,
  .site-header nav a.cta,
  .navbar nav a.cta {
    background: rgba(108,31,168,0.92) !important;
    border-color: rgba(108,31,168,0.40) !important;
    color: #FFFFFF !important;
  }
}



/* =========================
   MOBILE NAV FIX (NO OVERFLOW)
   BUILD 20260107-230226
   ========================= */

@media (max-width: 600px) {
  .nav .container.row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .nav .container.row > a {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .nav .container.row > a strong {
    font-size: 1.05rem !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    white-space: normal !important;
  }

  .nav a.nav-cta {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    font-size: 0.98rem !important;
  }

  .nav .nav-links {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: flex-start !important;
  }

  .nav .nav-links a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 9px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(108,31,168,0.22) !important;
    background: rgba(255,255,255,0.75) !important;
    backdrop-filter: blur(10px);
    color: #0D1B4C !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}