/* ==========================================================================
   Page banner
   The coloured banner at the top of every inner page (title + breadcrumbs). HTML: template-parts/shared/page-banner.php
   ========================================================================== */

.page-hero {
	position: relative;
	padding: calc(var(--header-h) + clamp(60px, 9vw, 110px)) 0 clamp(56px, 7vw, 90px);
	overflow: hidden;
	isolation: isolate;
	text-align: center;
	border-bottom: 1px solid var(--border);
}
.page-hero__bg { position: absolute; inset: 0; z-index: -1; }
.page-hero__bg .orb--1 { width: 420px; height: 420px; top: -200px; right: 10%; }
.page-hero__bg .orb--2 { width: 360px; height: 360px; bottom: -220px; left: 5%; }
.page-hero__bg .orb--3 { top: -60px; left: 30%; }
.page-hero__inner { display: flex; flex-direction: column; align-items: center; }
.page-hero__title { font-size: clamp(2.2rem, 5.5vw, 4rem); font-weight: 800; max-width: 920px; }
.page-hero__subtitle { color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.18rem); max-width: 720px; margin: 0; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 22px; padding: 6px 16px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid var(--border); font-size: .84rem; }
.breadcrumbs li { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.breadcrumbs li + li::before { content: "/"; opacity: .45; }
.breadcrumbs a { color: #d8d3f0; }
.breadcrumbs a:hover { color: var(--c-glow); }
.breadcrumbs [aria-current] { color: #fff; }
.page-hero--split {
	padding: calc(var(--header-h) + clamp(28px, 4vw, 52px)) 0 clamp(30px, 4vw, 52px);
	text-align: left;
	border-bottom: 0;
}
.page-hero--split::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, #a78bfa 20%, #22d3ee 50%, #f472b6 80%, transparent); box-shadow: 0 0 16px rgba(167, 139, 250, .7); }
.page-hero__beam { position: absolute; top: -40%; left: 35%; width: 38%; height: 180%; background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .16), rgba(34, 211, 238, .1), transparent); transform: rotate(22deg); filter: blur(10px); animation: beam 9s ease-in-out infinite alternate; }
.page-hero--split .orb--1 { top: -220px; right: 4%; }
.page-hero--split .orb--2 { bottom: -260px; left: -6%; }
.page-hero__split { display: grid; grid-template-columns: 1fr auto; gap: clamp(28px, 5vw, 72px); align-items: center; }
.page-hero__main { display: flex; flex-direction: column; align-items: flex-start; }
.page-hero--split .breadcrumbs ol { justify-content: flex-start; margin-bottom: 16px; }
.page-hero--split .eyebrow { margin-bottom: 10px; }
.page-hero--split .page-hero__title { font-size: clamp(2rem, 4.4vw, 3.4rem); max-width: 820px; margin-bottom: 12px; }
.page-hero--split .page-hero__subtitle { max-width: 640px; font-size: clamp(.98rem, 1.3vw, 1.1rem); }
.page-hero--split .page-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.page-hero--split .page-hero__actions .btn { min-height: 46px; padding: 0 20px; font-size: .9rem; }
.page-hero__card {
	position: relative;
	width: 290px;
	padding: 22px;
	border-radius: 24px;
	background: linear-gradient(160deg, rgba(36, 22, 84, .85), rgba(12, 7, 34, .9));
	border: 1px solid rgba(167, 139, 250, .3);
	box-shadow: 0 30px 60px -30px rgba(124, 58, 237, .9);
	backdrop-filter: blur(10px);
}
.page-hero__card::before { content: ""; position: absolute; inset: 0 18% auto; height: 1px; background: linear-gradient(90deg, transparent, #a78bfa, #22d3ee, transparent); }
.page-hero__card-icon { position: absolute; top: -26px; right: 22px; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; background: var(--grad-btn); color: #fff; box-shadow: 0 0 0 6px var(--bg), 0 14px 30px -10px rgba(147, 51, 234, .9); transform: rotate(-8deg); }
.page-hero__stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.page-hero__stats li { --c: #a78bfa; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--c) 9%, transparent); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); }
.page-hero__stats .std-icon { flex-shrink: 0; width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: var(--c); color: #0b0620; }
.page-hero__stats strong { display: block; font-family: var(--font-display); font-size: 1.15rem; color: #fff; line-height: 1.1; }
.page-hero__stats small { color: var(--muted); font-size: .78rem; }

@media (max-width: 900px) {
	.page-hero__split { grid-template-columns: 1fr; }
	.page-hero__card { display: none; }
}

@media (max-width: 600px) {
	.page-hero--split .page-hero__actions { width: 100%; }
	.page-hero--split .page-hero__actions .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
	.page-hero__beam { animation: none; }
}

/* Background videos */
.page-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .7; }
.page-hero__video + .page-hero__beam { opacity: .6; }
.page-hero--split .page-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 4, 26, .82) 0%, rgba(7, 4, 26, .45) 55%, rgba(7, 4, 26, .25) 100%); pointer-events: none; }