/* Insight Central background helpers (McKinsey-blue inspired) */
:root {
  --ic-navy: #001A66;
  --ic-blue: #0033A0;
  --ic-indigo: #1E3A8A;
  --ic-sky: #93C5FD;
}

.bg-ic-gradient {
  background: linear-gradient(135deg, var(--ic-navy) 0%, var(--ic-blue) 100%);
}

.bg-ic-radial {
  background:
    radial-gradient(35% 35% at 20% 25%, rgba(147,197,253,0.45) 0%, rgba(147,197,253,0) 60%),
    radial-gradient(30% 30% at 80% 25%, rgba(30,58,138,0.35) 0%, rgba(30,58,138,0) 60%),
    radial-gradient(60% 60% at 50% 80%, rgba(0,51,160,0.35) 0%, rgba(0,51,160,0) 70%),
    linear-gradient(135deg, var(--ic-navy) 0%, var(--ic-blue) 100%);
}

.bg-ic-grid {
  background-image:
    radial-gradient(rgba(255,255,255,0.08) 1.5px, rgba(0,0,0,0) 1.5px),
    radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 85%),
    linear-gradient(135deg, var(--ic-navy) 0%, var(--ic-blue) 100%);
  background-size: 24px 24px, cover, cover;
  background-position: 0 0, center, center;
}

/* Tailwind utility examples (use with arbitrary values) */
/* <div class="bg-[url('/assets/insightcentral-bg-waves.svg')] bg-cover bg-no-repeat"> ... </div> */

.hero-overlay {
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  background: rgba(11,16,38,0.25);
}

/* Recommended text colors on these backgrounds */
.text-on-dark { color: #F8FAFC; }
.text-muted-on-dark { color: rgba(248,250,252,0.75); }