/**
 * Site-wide background system — unified depth, brand glow, geometric texture.
 */

/* ─── Base canvas (every page) ─── */
[data-theme="dark"] {
	--bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 2 L54 28 L28 54 L2 28 Z' fill='none' stroke='%2300D4FF' stroke-width='0.35' opacity='0.14'/%3E%3Cpath d='M28 10 L46 28 L28 46 L10 28 Z' fill='none' stroke='%2300D4FF' stroke-width='0.25' opacity='0.08'/%3E%3C/svg%3E");
	--bg-glow: radial-gradient(ellipse 90% 55% at 50% -8%, rgba(0, 212, 255, 0.07), transparent 62%);
}

[data-theme="light"] {
	--bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 2 L54 28 L28 54 L2 28 Z' fill='none' stroke='%230090B8' stroke-width='0.35' opacity='0.1'/%3E%3Cpath d='M28 10 L46 28 L28 46 L10 28 Z' fill='none' stroke='%230090B8' stroke-width='0.25' opacity='0.06'/%3E%3C/svg%3E");
	--bg-glow: radial-gradient(ellipse 90% 55% at 50% -8%, rgba(0, 212, 255, 0.05), transparent 62%);
}

html {
	background-color: var(--bg);
}

body {
	position: relative;
	background-color: var(--bg);
	background-image: var(--bg-glow), var(--bg-pattern);
	background-size: 100% 480px, 56px 56px;
	background-repeat: no-repeat, repeat;
	background-attachment: scroll, scroll;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: var(--bg);
	opacity: 0;
}

/* ─── Unified page surface — no alternating section bands ─── */
.gwu-page .sec,
.gwu-page #faq,
.gwu-page #hero,
.gwu-page #problem,
.gwu-page #services,
.gwu-page #results,
.gwu-page #process,
.gwu-page #cta,
.gwu-page .halal-sec,
.gwu-page .lead-guide-sec,
.gwu-page .final-cta-sec,
.gwu-page #social-proof,
.gwu-page #resources,
.gwu-page #metrics,
.gwu-page #about,
.gwu-page #growth,
.gwu-page #for-who,
.gwu-page #case-studies,
.gwu-page #gallery,
.gwu-page #recommendations,
.gwu-page #solution,
.gwu-page #delivery,
.gwu-page #flywheel,
.gwu-page #projects {
	background: transparent;
}

.gwu-page footer,
footer {
	background: transparent;
	border-top: 1px solid var(--border);
}

[data-theme="dark"] nav {
	background: rgba(13, 13, 13, 0.86);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

[data-theme="light"] nav {
	background: rgba(247, 244, 237, 0.9);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

/* ─── Subtle section depth (no colour banding) ─── */
.gwu-page .lead-guide-sec,
.gwu-page .final-cta-sec {
	position: relative;
	isolation: isolate;
}

.gwu-page .lead-guide-sec::before,
.gwu-page .final-cta-sec::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(0, 212, 255, 0.05), transparent 72%);
}

[data-theme="light"] .gwu-page .lead-guide-sec::before,
[data-theme="light"] .gwu-page .final-cta-sec::before {
	background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(0, 212, 255, 0.04), transparent 72%);
}

/* ─── Hero — Loveable-inspired depth + geometry ─── */
.hero-sec {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-bottom: 1px solid var(--border);
}

.hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.hero-bg-glow {
	position: absolute;
	width: min(900px, 120vw);
	height: min(700px, 90vh);
	top: -18%;
	right: -12%;
	background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.16) 0%, rgba(0, 212, 255, 0.05) 38%, transparent 72%);
}

.hero-bg-glow-2 {
	position: absolute;
	width: min(520px, 80vw);
	height: min(520px, 70vh);
	bottom: -20%;
	left: -10%;
	background: radial-gradient(ellipse at center, rgba(0, 144, 184, 0.1) 0%, transparent 68%);
}

.hero-bg-pattern {
	position: absolute;
	inset: 0;
	opacity: 0.55;
	background-image: var(--bg-pattern);
	background-size: 56px 56px;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
}

.hero-bg-art {
	position: absolute;
	right: -4%;
	top: 50%;
	width: min(520px, 58vw);
	height: auto;
	transform: translateY(-50%);
	color: #00D4FF;
	opacity: 0.11;
}

[data-theme="light"] .hero-bg-glow {
	background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.1) 0%, rgba(0, 212, 255, 0.03) 40%, transparent 72%);
}

[data-theme="light"] .hero-bg-art {
	opacity: 0.08;
	color: #0090B8;
}

.hero-sec > .wrap {
	position: relative;
	z-index: 1;
}

/* Primary CTA glow (hero + key sections) */
.hero-sec .btn-p,
.lead-guide-sec .btn-p,
.final-cta-sec .btn-p {
	box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.2), 0 8px 28px rgba(0, 212, 255, 0.22);
}

.hero-sec .btn-p:hover,
.lead-guide-sec .btn-p:hover,
.final-cta-sec .btn-p:hover {
	box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.35), 0 12px 36px rgba(0, 212, 255, 0.3);
}

@media (max-width: 768px) {
	.hero-bg-art {
		width: min(360px, 90vw);
		right: -18%;
		opacity: 0.07;
	}

	.hero-bg-glow {
		width: 140vw;
		height: 60vh;
		top: -10%;
		right: -30%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-bg-glow,
	.hero-bg-glow-2 {
		opacity: 0.85;
	}
}