/* =============================================================================
   Mesh Gradient — hero, sections, mobile hero-inverted
   ========================================================================== */

.wt-mesh-gradient,
.wt-hero-mesh {
	background:
		radial-gradient(at 12% 15%,  #c8d0ff 0%, transparent 55%),
		radial-gradient(at 88% 20%,  #a8b8ff 0%, transparent 55%),
		radial-gradient(at 45% 100%, #dde1ff 0%, transparent 60%),
		linear-gradient(180deg, #eef1ff 0%, #f6f4ff 100%);
	position: relative;
}

.wt-mesh-gradient--strong {
	background:
		radial-gradient(at 15% 15%,  #94a5ff 0%, transparent 55%),
		radial-gradient(at 85% 25%,  #b8c4ff 0%, transparent 55%),
		radial-gradient(at 50% 100%, #dde1ff 0%, transparent 60%),
		linear-gradient(180deg, #e6ecff 0%, #f2f0ff 100%);
	position: relative;
}

/* Deep Royal hero (mobile & inverted CTA bands) */
.wt-mesh-gradient--deep {
	background:
		radial-gradient(at 20% 30%,  #1e40af 0%, transparent 60%),
		radial-gradient(at 80% 60%,  #3b82f6 0%, transparent 50%),
		var(--wt-primary);
	color: #ffffff;
	position: relative;
	overflow: hidden;
}

.wt-mesh-gradient--deep::before {
	content: '';
	position: absolute;
	inset: -50%;
	background: radial-gradient(circle at center, rgba(59, 130, 246, 0.2) 0%, transparent 50%);
	animation: wt-mesh-rotate 20s linear infinite;
	pointer-events: none;
}

@keyframes wt-mesh-rotate {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* Amber accent gradient (rare, key CTAs only) */
.wt-mesh-gradient--amber {
	background:
		radial-gradient(at 30% 20%, #ffddb8 0%, transparent 50%),
		radial-gradient(at 70% 80%, #ffb95f 0%, transparent 50%),
		var(--wt-background);
}

/* Applied via Elementor container CSS Class field */
.wt-mesh-gradient > *,
.wt-mesh-gradient--strong > *,
.wt-mesh-gradient--deep > *,
.wt-mesh-gradient--amber > * {
	position: relative;
	z-index: 1;
}