/* ==========================================================================
   AI Sadhana — Section Backgrounds (Soft Gradient Mesh)
   --------------------------------------------------------------------------
   Drop-in addendum to main.css. NO PHP / template changes required.
   Uses .section::before for decorative layers — every section already has
   position: relative in main.css. All content stays above via z-index.

   Palette: brand blue + cyan + indigo, all heavily desaturated.
   Performance: static (no animation), opacity + transform only, no filters
   except a single 0.5px blur on the hero mesh to smooth banding on mobile.
   ========================================================================== */

/* ---- Tokens ---- */
:root {
	--mesh-blue:    99, 132, 255;     /* indigo-blue   */
	--mesh-cyan:    56, 189, 248;     /* sky-cyan      */
	--mesh-violet:  165, 180, 252;    /* soft-violet   */
	--mesh-tint:    rgba(239, 246, 255, 0.9);

	--mesh-wash-1:  #FFFFFF;
	--mesh-wash-2:  #F8FAFF;
	--mesh-wash-3:  #FCFCFE;
	--mesh-wash-4:  #F4F7FC;
}

/* ---- Stacking context for every section ---- */
.section { isolation: isolate; }
.section > .container { position: relative; z-index: 2; }

/* Decorative layer for non-hero sections (pure CSS, no DOM changes) */
.section:not(.section--hero):not(.section--final-cta)::before {
	content: '';
	position: absolute; inset: 0;
	pointer-events: none;
	z-index: 0;
}

/* ==========================================================================
   HERO — large blurred mesh in brand blue / cyan / violet
   The hero already has .hero__bg + .hero__halo + .hero__pattern in the DOM.
   We hide the original dot pattern, repurpose the halo as one of the orbs,
   and layer the rest via .hero__bg's existing position.
   ========================================================================== */
.section--hero { background: #FCFCFE; overflow: hidden; }
.section--hero .hero__pattern { display: none; }
.section--hero .hero__halo {
	width: 1300px; height: 1300px;
	top: -20%;
	background: radial-gradient(circle, rgba(var(--mesh-blue), 0.18) 0%, transparent 60%);
	opacity: 1;
	filter: blur(8px);
}
.section--hero .hero__bg::after {
	content: '';
	position: absolute; inset: 0;
	background:
		radial-gradient(38% 48% at 16% 30%, rgba(var(--mesh-blue),   0.22) 0%, transparent 70%),
		radial-gradient(34% 44% at 84% 24%, rgba(var(--mesh-cyan),   0.18) 0%, transparent 70%),
		radial-gradient(52% 56% at 50% 96%, rgba(var(--mesh-violet), 0.22) 0%, transparent 70%),
		radial-gradient(80% 60% at 50% 0%,  var(--mesh-tint)               0%, transparent 60%);
	filter: blur(0.5px);
	pointer-events: none;
}

/* ==========================================================================
   FLOWING WASHES between content sections
   Each section gets a soft vertical gradient that hands off to the next.
   ========================================================================== */
.section--why      { background: linear-gradient(180deg, var(--mesh-wash-1) 0%, var(--mesh-wash-2) 100%); }
.section--about    { background: linear-gradient(180deg, var(--mesh-wash-2) 0%, var(--mesh-wash-1) 100%); }
.section--program  { background: linear-gradient(180deg, var(--mesh-wash-1) 0%, var(--mesh-wash-3) 50%, var(--mesh-wash-4) 100%); }
.section--who      { background: linear-gradient(180deg, var(--mesh-wash-4) 0%, var(--mesh-wash-1) 100%); }
.section--features { background: linear-gradient(180deg, var(--mesh-wash-1) 0%, var(--mesh-wash-2) 100%); }
.section--faq      { background: linear-gradient(180deg, var(--mesh-wash-1) 0%, var(--mesh-wash-2) 100%); }

/* ==========================================================================
   ACCENT ORBS on the storyline sections — Program & Vision
   These are the two sections that earn an extra visual moment.
   ========================================================================== */
.section--program::before {
	background:
		radial-gradient(25% 35% at 88% 12%, rgba(var(--mesh-blue),   0.12) 0%, transparent 70%),
		radial-gradient(22% 32% at  8% 88%, rgba(var(--mesh-cyan),   0.10) 0%, transparent 70%);
}

.section--vision { background: #FAFCFF; overflow: hidden; }
.section--vision::before {
	background:
		radial-gradient(52% 72% at 50% 50%, rgba(var(--mesh-blue),   0.10) 0%, transparent 65%),
		radial-gradient(30% 42% at 12% 28%, rgba(var(--mesh-cyan),   0.12) 0%, transparent 70%),
		radial-gradient(30% 42% at 88% 74%, rgba(var(--mesh-violet), 0.16) 0%, transparent 70%);
}

/* ==========================================================================
   FINAL CTA — the closer. Stronger mesh, still subtle.
   Override the existing ::before defined in main.css.
   ========================================================================== */
.section--final-cta { background: linear-gradient(180deg, #EEF4FF 0%, #DCE7FB 100%); overflow: hidden; }
.section--final-cta::before {
	content: '';
	position: absolute; inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(38% 58% at 18% 26%, rgba(var(--mesh-blue),   0.30) 0%, transparent 70%),
		radial-gradient(38% 58% at 82% 78%, rgba(var(--mesh-cyan),   0.24) 0%, transparent 70%),
		radial-gradient(52% 52% at 50% 50%, rgba(var(--mesh-violet), 0.18) 0%, transparent 70%);
}

/* ==========================================================================
   .section--alt — neutralize main.css's flat alt background so the
   washes above can take over. (about + who use this class.)
   ========================================================================== */
.section--alt { background: transparent; }
.section--about { background: linear-gradient(180deg, var(--mesh-wash-2) 0%, var(--mesh-wash-1) 100%); }
.section--who   { background: linear-gradient(180deg, var(--mesh-wash-4) 0%, var(--mesh-wash-1) 100%); }

/* ==========================================================================
   Cards on washed surfaces stay crisp solid white — preserves contrast.
   ========================================================================== */
.card, .module, .features-grid__item, .tag {
	background: #FFFFFF;
}

/* ==========================================================================
   Reduced motion — these are static already, but be explicit.
   No filter on hero mesh for users who prefer reduced motion (cheaper paint).
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.section--hero .hero__halo,
	.section--hero .hero__bg::after { filter: none; }
}