/* Glass utility — apply via Elementor "Advanced > CSS Classes" */

.rx-glass {
	background:
		linear-gradient(
			160deg,
			rgba(255, 255, 255, 0.10) 0%,
			rgba(255, 255, 255, 0.04) 50%,
			rgba(255, 255, 255, 0.02) 100%
		);
	backdrop-filter: blur(18px) saturate(150%);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	border: 1px solid var(--rx-stroke-light);
	border-radius: var(--rx-r-lg);
	box-shadow:
		inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
		var(--rx-shadow-md),
		0 2px 8px -4px rgba(0, 0, 0, 0.35);
}

.rx-glass--strong {
	background: var(--rx-surface-light-strong);
	backdrop-filter: blur(28px) saturate(160%);
	-webkit-backdrop-filter: blur(28px) saturate(160%);
}

.rx-glass--subtle {
	background: rgba(255, 255, 255, 0.03);
	backdrop-filter: blur(10px) saturate(120%);
	-webkit-backdrop-filter: blur(10px) saturate(120%);
	border-color: rgba(255, 255, 255, 0.08);
}

.rx-glass--dark {
	background: var(--rx-surface-dark);
	backdrop-filter: blur(20px) saturate(140%);
	-webkit-backdrop-filter: blur(20px) saturate(140%);
	border-color: var(--rx-line);
}

.rx-glass--gradient-border {
	position: relative;
}

.rx-glass--gradient-border::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.4) 0%,
		rgba(255, 255, 255, 0.05) 40%,
		rgba(220, 79, 44, 0.35) 100%
	);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/* ─── Dark techy section background ───────────────────────────────────────
   Apply via Elementor Advanced → CSS Classes: rx-bg-dark
   No extra HTML needed — glows are CSS radial gradients, grid is ::before.
   ─────────────────────────────────────────────────────────────────────── */

.rx-bg-dark {
	position: relative;
	isolation: isolate; /* keeps ::before z-index scoped to this element */
	background:
		/* orange glow orb — top right */
		radial-gradient(circle 360px at calc(100% + 80px) -80px, rgba(220, 79, 44, 0.45) 0%, transparent 65%),
		/* blue glow orb — bottom left */
		radial-gradient(circle 280px at -60px calc(100% + 60px), rgba(42, 108, 255, 0.28) 0%, transparent 65%),
		/* warm orange wash — centre right */
		radial-gradient(ellipse 110% 70% at 70% 25%, rgba(220, 79, 44, 0.14) 0%, transparent 55%),
		/* dark navy base */
		linear-gradient(175deg, #0B1023 0%, #070A18 100%);
}

/* Dot grid — fades at the edges via CSS mask */
.rx-bg-dark::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(to right,  rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 80px 80px;
	mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, black 25%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, black 25%, transparent 75%);
}

/* Variant — no grid, just the gradient + glows */
.rx-bg-dark--no-grid::before { display: none; }

/* Variant — glow centred at top (good for narrow/tall sections) */
.rx-bg-dark--center {
	background:
		radial-gradient(circle 420px at 50% -60px, rgba(220, 79, 44, 0.4) 0%, transparent 65%),
		radial-gradient(ellipse 100% 60% at 50% 20%, rgba(220, 79, 44, 0.12) 0%, transparent 55%),
		linear-gradient(175deg, #0B1023 0%, #070A18 100%);
}

@supports not (backdrop-filter: blur(1px)) {
	.rx-glass,
	.rx-glass--strong,
	.rx-glass--subtle,
	.rx-glass--dark {
		background: rgba(20, 26, 51, 0.85);
	}
}