/* ==========================================================================
   FX Hero
   Layer order is fixed here and never exposed as a control, with one
   exception: the wordmark can move under the effect. That stack is the look.
   All three effect modes render identical DOM, so nothing shifts when the
   widget falls back.
   ========================================================================== */

.fxh {
	--fxh-back: #fafafa;
	--fxh-height: 720px;
	--fxh-marquee-speed: 40s;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-color: var(--fxh-back);
	display: flex;
	flex-direction: column;
}

.fxh *,
.fxh *::before,
.fxh *::after {
	box-sizing: border-box;
}

.fxh--height-min   { min-height: var(--fxh-height); }
.fxh--height-fixed { height: var(--fxh-height); }

/* Layer 0: effect ---------------------------------------------------------- */
.fxh__fx {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	/* Stays none. Buttons have to remain clickable and the trail has to
	   survive the cursor crossing the heading, so fx-hero.js forwards
	   pointer events from .fxh onto the canvas instead. */
	pointer-events: none;
}

.fxh__fx canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* Lite mode: three blurred blobs, ~1.2KB and no GPU context */
.fxh__blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	will-change: transform;
}

.fxh__blob--1 { width: 46%; padding-bottom: 46%; left: 8%;  top: 6%; }
.fxh__blob--2 { width: 38%; padding-bottom: 38%; right: 10%; top: 22%; }
.fxh__blob--3 { width: 30%; padding-bottom: 30%; left: 38%; bottom: 4%; }

@keyframes fxh-drift-a { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(6%, 8%, 0) scale(1.12); } }
@keyframes fxh-drift-b { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); } 50% { transform: translate3d(-8%, 5%, 0) scale(.92); } }
@keyframes fxh-drift-c { 0%, 100% { transform: translate3d(0, 0, 0) scale(.95); } 50% { transform: translate3d(4%, -7%, 0) scale(1.15); } }

.fxh--mode-lite .fxh__blob--1 { animation: fxh-drift-a 18s ease-in-out infinite; }
.fxh--mode-lite .fxh__blob--2 { animation: fxh-drift-b 24s ease-in-out infinite; }
.fxh--mode-lite .fxh__blob--3 { animation: fxh-drift-c 21s ease-in-out infinite; }

/* Static mode: a flat gradient, zero animation, zero JS */
.fxh__static {
	position: absolute;
	inset: 0;
	background: radial-gradient(60% 70% at 30% 30%, var(--fxh-splat, #d9008c) 0%, transparent 62%),
	            radial-gradient(50% 60% at 75% 55%, var(--fxh-splat, #d9008c) 0%, transparent 58%);
	opacity: .45;
}

/* Gradient lights ----------------------------------------------------------
   Four drifting radial glows over a dark base. Every colour stop is built from
   a custom property with color-mix, so the editor controls actually drive the
   gradient. A variable that does not reach a stop is not a control.

   Rotation is published per layer as --fxh-g-rot and read once by the script,
   instead of the script reading back a computed matrix that already contains
   its own previous animation.
   -------------------------------------------------------------------------- */
.fxh--mode-gradient {
	--fxh-g-blue: #2874fe;
	--fxh-g-blue-deep: #1049af;
	--fxh-g-pink: #ef73cf;
	--fxh-g-gold: #fab315;
	--fxh-g-gold-deep: #bf8608;
	--fxh-g-white: #ffffff;
	--fxh-g-blue-a: 1;
	--fxh-g-pink-a: 1;
	--fxh-g-gold-a: 1;
	--fxh-g-white-a: 1;
	--fxh-g-blur: 22px;
	--fxh-g-shade: 1;
}

.fxh--mode-gradient .hero-brand-lights {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.fxh--mode-gradient .hero-brand-lights > span {
	position: absolute;
	display: block;
	border-radius: 50%;
	pointer-events: none;
	/* Blur stays fixed. Animating a filter is expensive and this already runs
	   on four large layers. */
	filter: blur(var(--fxh-g-blur));
	will-change: transform, opacity;
}

.fxh--mode-gradient .brand-light-blue {
	--fxh-g-rot: -24;
	width: 66%; height: 120%; right: -17%; top: -6%;
	transform: rotate(-24deg);
	background: radial-gradient(ellipse,
		color-mix(in srgb, var(--fxh-g-blue) calc(94% * var(--fxh-g-blue-a)), transparent) 0%,
		color-mix(in srgb, var(--fxh-g-blue-deep) calc(65% * var(--fxh-g-blue-a)), transparent) 32%,
		color-mix(in srgb, var(--fxh-g-blue) calc(27% * var(--fxh-g-blue-a)), transparent) 50%,
		transparent 72%);
}

.fxh--mode-gradient .brand-light-pink {
	--fxh-g-rot: 24;
	width: 58%; height: 92%; left: -23%; top: -15%;
	transform: rotate(24deg);
	background: radial-gradient(ellipse,
		color-mix(in srgb, var(--fxh-g-pink) calc(76% * var(--fxh-g-pink-a)), transparent) 0%,
		color-mix(in srgb, var(--fxh-g-pink) calc(46% * var(--fxh-g-pink-a)), transparent) 32%,
		transparent 70%);
}

.fxh--mode-gradient .brand-light-gold {
	--fxh-g-rot: -17;
	width: 62%; height: 92%; left: -9%; bottom: -52%;
	transform: rotate(-17deg);
	background: radial-gradient(ellipse,
		color-mix(in srgb, var(--fxh-g-gold) calc(93% * var(--fxh-g-gold-a)), transparent) 0%,
		color-mix(in srgb, var(--fxh-g-gold-deep) calc(72% * var(--fxh-g-gold-a)), transparent) 28%,
		color-mix(in srgb, var(--fxh-g-gold) calc(22% * var(--fxh-g-gold-a)), transparent) 51%,
		transparent 72%);
}

.fxh--mode-gradient .brand-light-white {
	--fxh-g-rot: 0;
	width: 65%; height: 42%; left: 20%; top: -32%;
	filter: blur(calc(var(--fxh-g-blur) * 0.64));
	background: radial-gradient(ellipse,
		color-mix(in srgb, var(--fxh-g-white) calc(65% * var(--fxh-g-white-a)), transparent) 0%,
		color-mix(in srgb, #e8dcff calc(34% * var(--fxh-g-white-a)), transparent) 38%,
		transparent 73%);
}

/* Keeps the centre readable, so the brighter moving areas stay at the edges. */
.fxh--mode-gradient .fxh__shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: var(--fxh-g-shade);
	background: radial-gradient(ellipse at 50% 41%,
		rgba(40, 17, 83, .44) 0%, rgba(48, 16, 99, .22) 36%, transparent 69%);
}

/* A real control, so it sits above the effect layer and takes pointer events. */
.fxh--mode-gradient .brand-motion-toggle {
	position: absolute;
	right: 20px;
	bottom: 10px;
	z-index: 30;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 5px;
	background: rgba(41, 16, 82, .6);
	color: #fff;
	font: 400 12px/1.5 inherit;
	cursor: pointer;
}

.fxh--mode-gradient .brand-motion-toggle[hidden] { display: none; }

.fxh--mode-gradient .brand-motion-toggle:focus-visible {
	outline: 2px solid var(--fxh-g-gold, #fab315);
	outline-offset: 3px;
}

@media (max-width: 760px) {
	.fxh--mode-gradient .brand-light-blue { width: 100%; right: -44%; top: 1%; }
	.fxh--mode-gradient .brand-light-pink { width: 90%; left: -48%; top: -19%; }
	.fxh--mode-gradient .brand-light-gold { width: 90%; left: -30%; bottom: -53%; }
	.fxh--mode-gradient .brand-motion-toggle { right: 15px; bottom: 9px; }
}

/* Static, usable hero. The script also cancels its animations for these. */
@media (prefers-reduced-motion: reduce) {
	.fxh--mode-gradient .hero-brand-lights > span { will-change: auto; }
}

@media (forced-colors: active) {
	.fxh--mode-gradient .hero-brand-lights,
	.fxh--mode-gradient .fxh__shade { display: none; }
}

/* Layer 1: wordmark -------------------------------------------------------- */
.fxh__wordmark {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	opacity: .35;
	overflow: hidden;
}

.fxh__wordmark--under {
	z-index: -1;
}

.fxh__wordmark span {
	display: block;
	font-size: 18vw;
	font-weight: 800;
	line-height: .9;
	letter-spacing: -.02em;
	color: #fff;
	transform: translate(var(--fxh-x, 0), var(--fxh-y, 0));
}

/* Layer 20: content -------------------------------------------------------- */
.fxh__inner {
	position: relative;
	z-index: 20;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 80px 24px;
	width: 100%;
}

.fxh__content {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 720px;
}

.fxh__eyebrow,
.fxh__heading,
.fxh__body,
.fxh__actions,
.fxh__content .fxh__logos {
	transform: translate(var(--fxh-x, 0), var(--fxh-y, 0));
}

.fxh__eyebrow {
	display: inline-block;
	margin: 0 0 16px;
	align-self: center;
	order: 1;
}

.fxh__heading {
	margin: 0 0 20px;
	order: 2;
}

.fxh__body {
	margin: 0 0 28px;
	order: 3;
}

.fxh__body > *:last-child {
	margin-bottom: 0;
}

.fxh__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	order: 4;
}

/* Buttons ------------------------------------------------------------------
   Selectors are written as `.fxh a.fxh__btn` (0,2,1) rather than `.fxh__btn`
   (0,1,0) on purpose. The Elementor kit styles links by tag as
   `.elementor-kit-NNNN a` (0,2,0), which beats a single class and would take
   over `color`, leaving every button at the kit's global link colour and the
   --fxh-btn-color custom property unread. Anything here that sets a property
   the kit also sets on `a` has to clear that bar. No !important.
   -------------------------------------------------------------------------- */
.fxh a.fxh__btn {
	--fxh-btn-bg: transparent;
	--fxh-btn-color: #0b1e3f;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 30px;
	border: none;
	border-radius: 999px;
	background-color: var(--fxh-btn-bg);
	color: var(--fxh-btn-color);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition-property: background-color, color, border-color, transform, box-shadow;
	transition-duration: .25s;
	transition-timing-function: ease;
}

.fxh a.fxh__btn svg {
	fill: currentColor;
	width: 1em;
	height: 1em;
}

.fxh a.fxh__btn--sm { font-size: .875em; padding: 12px 22px; }
.fxh a.fxh__btn--lg { font-size: 1.125em; padding: 20px 38px; }

.fxh a.fxh__btn--link {
	padding-left: 0;
	padding-right: 0;
	border-radius: 0;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Focus must be visible against a moving background, so it is defined here
   rather than left to the theme. */
.fxh a.fxh__btn:focus-visible,
.fxh .fxh__logo a:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

/* Logos -------------------------------------------------------------------- */
.fxh__logos {
	position: relative;
	z-index: 20;
	width: 100%;
	padding: 0 24px 32px;
	transform: translate(var(--fxh-x, 0), var(--fxh-y, 0));
}

.fxh--logos-top {
	padding: 32px 24px 0;
}

.fxh__content .fxh__logos {
	padding: 0;
	order: 5;
}

/* Title + strip. flex-direction is set by the Title position control, which
   is why the title is always first in the DOM: row-reverse and column-reverse
   move it visually without disturbing reading or tab order. */
.fxh__logos-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
}

.fxh__logos-title {
	flex: none;
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #41506b;
}

.fxh__logos-viewport {
	display: flex;
	overflow: hidden;
	/* min-width: 0 lets the strip shrink when the title sits beside it;
	   without it a nowrap marquee track would force the row wider. */
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
}

.fxh__logos-track {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 48px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fxh__logo {
	display: flex;
	align-items: center;
	gap: 10px;
	transition: background-color .25s ease, box-shadow .25s ease;
}

/* Opacity lives on the contents, not the item, so a glass card behind them
   stays at full strength while the logo itself can sit back. */
.fxh__logo img,
.fxh__logo .fxh__logo-label {
	opacity: .7;
	transition: opacity .25s ease;
}

.fxh__logo:hover img,
.fxh__logo:hover .fxh__logo-label {
	opacity: 1;
}

.fxh .fxh__logo a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	text-decoration: none;
}

.fxh__logo img {
	display: block;
	width: auto;
	height: auto;
	max-height: 36px;
	max-width: 100%;
}

.fxh__logo-label {
	font-size: 13px;
	line-height: 1.3;
	color: #41506b;
	white-space: nowrap;
}

.fxh--logos-divider .fxh__logo + .fxh__logo {
	border-left: 1px solid rgba(11, 30, 63, .15);
	padding-left: 48px;
}

/* Marquee: CSS keyframe on a duplicated track, no JS */
.fxh--logos-marquee .fxh__logos-track {
	flex-wrap: nowrap;
	flex: none;
	min-width: 100%;
	justify-content: space-around;
	padding-right: 48px;
	animation: fxh-marquee var(--fxh-marquee-speed) linear infinite;
}

.fxh--marquee-right .fxh__logos-track {
	animation-direction: reverse;
}

.fxh--marquee-pause:hover .fxh__logos-track {
	animation-play-state: paused;
}

@keyframes fxh-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

/* Marquee edge fade -------------------------------------------------------- */
.fxh--marquee-fade .fxh__logos-viewport {
	--fxh-fade: 80px;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fxh-fade), #000 calc(100% - var(--fxh-fade)), transparent 100%);
	        mask-image: linear-gradient(to right, transparent 0, #000 var(--fxh-fade), #000 calc(100% - var(--fxh-fade)), transparent 100%);
}

/* Glassmorphism card behind each logo --------------------------------------
   backdrop-filter is the whole effect, so the tint is deliberately kept
   translucent. Browsers without support get the tint alone, which still reads
   as a card rather than disappearing.
   -------------------------------------------------------------------------- */
.fxh--logos-glass {
	--fxh-glass-blur: 12px;
	--fxh-glass-sat: 1.6;
	--fxh-glass-bg: rgba(255, 255, 255, .18);
	--fxh-glass-border: rgba(255, 255, 255, .45);
	--fxh-glass-border-w: 1px;
}

.fxh--logos-glass .fxh__logo {
	padding: 12px 18px;
	border: var(--fxh-glass-border-w) solid var(--fxh-glass-border);
	border-radius: 16px;
	background-color: var(--fxh-glass-bg);
	box-shadow: 0 8px 32px -8px rgba(11, 30, 63, .18);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.fxh--logos-glass .fxh__logo {
		-webkit-backdrop-filter: blur(var(--fxh-glass-blur)) saturate(var(--fxh-glass-sat));
		        backdrop-filter: blur(var(--fxh-glass-blur)) saturate(var(--fxh-glass-sat));
	}
}

/* The divider is redundant once each logo is its own card */
.fxh--logos-glass.fxh--logos-divider .fxh__logo + .fxh__logo {
	border-left-width: var(--fxh-glass-border-w);
	padding-left: 18px;
}

/* Inline logos sit under the buttons, so they need breathing room above */
.fxh__content .fxh--logos-glass .fxh__logos-track,
.fxh__content .fxh__logos-track {
	padding-top: 4px;
}

/* Editor badge ------------------------------------------------------------- */
.fxh__editor-badge {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 30;
	padding: 6px 12px;
	border-radius: 6px;
	background: rgba(11, 30, 63, .8);
	color: #fff;
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: .01em;
	pointer-events: none;
}

/* Reduced motion: freeze the effect, the marquee and every transition -------- */
@media (prefers-reduced-motion: reduce) {
	.fxh__blob,
	.fxh--logos-marquee .fxh__logos-track {
		animation: none !important;
	}
	.fxh a.fxh__btn {
		transition: none !important;
	}
	.fxh--logos-marquee .fxh__logos-track {
		flex-wrap: wrap;
		justify-content: center;
	}
	.fxh--logos-marquee .fxh__logos-track[aria-hidden="true"] {
		display: none;
	}
	.fxh--marquee-fade .fxh__logos-viewport {
		-webkit-mask-image: none;
		        mask-image: none;
	}
}

/* Small screens ------------------------------------------------------------- */
@media (max-width: 767px) {
	.fxh__wordmark span {
		font-size: 26vw;
	}
	.fxh__logos-track {
		gap: 24px;
	}
	.fxh--logos-divider .fxh__logo + .fxh__logo {
		padding-left: 24px;
	}
}