/* ==========================================================================
   Endraivo – homepage v2 (front page only). Motion lives in assets/js/home.js;
   everything here renders complete without JS or with reduced motion.
   ========================================================================== */

.home .site-main { overflow-x: clip; }
.hx-section { position: relative; padding-block: clamp(4.5rem, 10vw, 8rem); }
.hx-section > .wp-block-group, .hx-section > * { position: relative; }
.hx-head { text-align: center; margin: 0 auto clamp(2.5rem, 5vw, 4rem) !important; max-width: 46rem; }
.hx-head > * + * { margin-top: 1rem !important; }
.hx-head h2 { font-size: clamp(2rem, 4.4vw, 3.25rem); letter-spacing: -0.03em; }
.hx-head .ev-eyebrow { justify-content: center; }
.hx-kicker { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .85rem .35rem .45rem; border-radius: 999px; background: rgba(124, 107, 255, .1); border: 1px solid rgba(124, 107, 255, .3); color: var(--ev-fg); font-size: .8125rem !important; font-weight: 500; margin-inline: auto !important; width: fit-content; }
.hx-kicker b { background: linear-gradient(135deg, #8b7cff, #5a48e0); color: #fff; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: .15rem .5rem; }

/* ---------- Hero ---------- */

.hx-hero { position: relative; margin-top: -84px !important; padding-top: calc(84px + clamp(3rem, 8vw, 6.5rem)); padding-bottom: 0; text-align: center; isolation: isolate; }
.hx-hero > .hx-bg { max-width: none !important; margin: 0 !important; }
.hx-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hx-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
.hx-orb.o1 { width: 560px; height: 560px; left: 50%; top: -120px; margin-left: -520px; background: radial-gradient(circle, #7c6bff, transparent 65%); animation: hxDrift1 18s ease-in-out infinite alternate; }
.hx-orb.o2 { width: 480px; height: 480px; left: 50%; top: 60px; margin-left: 60px; background: radial-gradient(circle, #3ad6ff, transparent 65%); opacity: .35; animation: hxDrift2 22s ease-in-out infinite alternate; }
.hx-orb.o3 { width: 380px; height: 380px; left: 50%; top: 520px; margin-left: -200px; background: radial-gradient(circle, #5a48e0, transparent 65%); opacity: .35; animation: hxDrift1 26s ease-in-out infinite alternate-reverse; }
@keyframes hxDrift1 { to { transform: translate3d(120px, 80px, 0) scale(1.15); } }
@keyframes hxDrift2 { to { transform: translate3d(-140px, 60px, 0) scale(.9); } }
.hx-grid {
	position: absolute; inset: 0;
	background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 20%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 20%, transparent 75%);
}

.hx-hero-copy { max-width: 60rem; margin-inline: auto; }
.hx-hero-copy > * + * { margin-top: 1.5rem !important; }
.hx-title { font-size: clamp(2.75rem, 7.4vw, 5.75rem) !important; line-height: 1 !important; letter-spacing: -0.045em !important; max-width: 16ch; margin-inline: auto !important; }
.hx-title .w { display: inline-block; }
.hx-shine {
	background: linear-gradient(100deg, #9a8dff 0%, #3ad6ff 35%, #8fe9ff 50%, #3ad6ff 65%, #9a8dff 100%);
	background-size: 250% 100%;
	-webkit-background-clip: text; background-clip: text; color: transparent;
	animation: hxShine 7s linear infinite;
}
@keyframes hxShine { to { background-position: -250% 0; } }
.hx-lead { font-size: clamp(1.0625rem, 1.6vw, 1.25rem) !important; color: var(--ev-muted); max-width: 40rem; margin-inline: auto !important; line-height: 1.6; }
.hx-hero .wp-block-buttons { justify-content: center; margin-top: 2.25rem !important; }
.hx-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; padding: 0; color: var(--ev-faint); font-size: .875rem; }
.hx-meta li { display: inline-flex; align-items: center; gap: .45rem; }
.hx-meta li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: color-mix(in srgb, var(--ev-mint) 18%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328e0a8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 60% no-repeat; }

/* Product frame */
.hx-stage { position: relative; margin: clamp(3rem, 6vw, 4.5rem) auto 0; max-width: 1180px; perspective: 1800px; padding-inline: 0; }
.hx-stage::before { content: ""; position: absolute; inset: 8% 6% -6%; background: radial-gradient(closest-side, rgba(124, 107, 255, .55), transparent); filter: blur(40px); z-index: -1; }
.hx-frame {
	position: relative; border-radius: 18px; overflow: hidden;
	background: #0b0e16;
	border: 1px solid rgba(255, 255, 255, .1);
	box-shadow: 0 0 0 1px rgba(124, 107, 255, .2), 0 50px 120px -30px rgba(0, 0, 0, .9), 0 30px 80px -40px rgba(124, 107, 255, .6);
	transform-origin: 50% 0;
	transform: rotateX(16deg) scale(.96);
	will-change: transform;
}
.hx-frame img { display: block; width: 100%; height: auto; }
.hx-bar { display: flex; align-items: center; gap: .45rem; padding: .7rem .9rem; background: #0e121c; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.hx-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2a3247; }
.hx-bar i:nth-child(1) { background: #ff5f57; } .hx-bar i:nth-child(2) { background: #febc2e; } .hx-bar i:nth-child(3) { background: #28c840; }
.hx-bar span { margin: 0 auto; font-size: .75rem; color: var(--ev-faint); background: rgba(255, 255, 255, .04); padding: .2rem 1.25rem; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.hx-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 45%; background: linear-gradient(transparent, var(--ev-base) 92%); pointer-events: none; }

/* Floating chips */
.hx-float {
	position: absolute; z-index: 3; display: flex; align-items: center; gap: .7rem; text-align: left;
	padding: .75rem 1rem; border-radius: 16px;
	background: rgba(22, 27, 39, .78); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, .1);
	box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .8);
	font-size: .8125rem; color: var(--ev-muted); line-height: 1.3;
}
.hx-float b { display: block; color: var(--ev-fg); font-family: var(--wp--preset--font-family--display); font-size: 1.05rem; }
.hx-float .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; font-size: 1.1rem; }
.hx-f1 { left: -3%; top: 18%; }
.hx-f2 { right: -2%; top: 8%; }
.hx-f3 { right: 4%; top: 52%; }
.hx-f4 { left: 2%; top: 58%; padding: .5rem; }
.hx-f4 img { display: block; width: 190px; height: auto; border-radius: 10px; }
.hx-ring { position: relative; width: 46px; height: 46px; flex: none; }
.hx-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hx-ring em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-weight: 700; color: var(--ev-fg); font-size: .875rem; font-family: var(--wp--preset--font-family--display); }
@media (max-width: 900px) {
	.hx-f1, .hx-f4 { display: none; }
	.hx-f2 { right: 3%; top: 18%; }
	.hx-f3 { right: auto; left: 3%; top: 48%; bottom: auto; }
	.hx-frame { transform: none; }
}
@media (max-width: 560px) { .hx-float { font-size: .75rem; padding: .55rem .75rem; } .hx-float .ic { width: 30px; height: 30px; } .hx-bar span { display: none; } }

/* ---------- Marquee ---------- */

.hx-marquee { position: relative; padding-block: 2.25rem; overflow: hidden; border-block: 1px solid var(--ev-line); background: rgba(17, 21, 31, .5); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.hx-track { display: flex; width: max-content; gap: 3rem; animation: hxMarquee 38s linear infinite; }
.hx-track.rev { animation-direction: reverse; animation-duration: 46s; margin-top: 1.25rem; }
.hx-marquee:hover .hx-track { animation-play-state: paused; }
.hx-track span { display: inline-flex; align-items: center; gap: 3rem; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: clamp(1.25rem, 2.4vw, 1.875rem); color: var(--ev-fg); white-space: nowrap; letter-spacing: -.02em; }
.hx-track span::after { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--ev-primary)); transform: rotate(45deg); box-shadow: 0 0 14px var(--c, var(--ev-primary)); }
.hx-track.rev span { color: transparent; -webkit-text-stroke: 1px rgba(238, 241, 248, .35); }
@keyframes hxMarquee { to { transform: translateX(-50%); } }

/* ---------- Bento ---------- */

.hx-bento { display: grid !important; grid-template-columns: repeat(12, 1fr); gap: 1rem !important; }
.hx-bento > * { margin: 0 !important; }
.hx-b1 { grid-column: span 7; } .hx-b2 { grid-column: span 5; }
.hx-b3 { grid-column: span 5; } .hx-b4 { grid-column: span 7; }
.hx-b5 { grid-column: span 6; } .hx-b6 { grid-column: span 6; }
@media (max-width: 960px) { .hx-bento > * { grid-column: 1 / -1 !important; } }

.hx-card {
	--mx: 50%; --my: 0%;
	position: relative; overflow: hidden; border-radius: 22px; padding: clamp(1.5rem, 3vw, 2rem) !important;
	background:
		radial-gradient(420px circle at var(--mx) var(--my), rgba(124, 107, 255, .16), transparent 55%),
		linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)),
		var(--ev-surface);
	border: 1px solid var(--ev-line);
	display: flex; flex-direction: column;
	transition: border-color .3s, transform .3s;
}
.hx-card::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
	background: conic-gradient(from var(--ang, 0deg), transparent 0 70%, #7c6bff 80%, #3ad6ff 90%, transparent 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
	opacity: 0; transition: opacity .4s;
}
.hx-card:hover { border-color: transparent; }
.hx-card:hover::before { opacity: 1; animation: hxSpin 4s linear infinite; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes hxSpin { to { --ang: 360deg; } }
.hx-card > * { position: relative; margin: 0 !important; }
.hx-card h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-top: .9rem !important; letter-spacing: -.02em; }
.hx-card p { color: var(--ev-muted); margin-top: .6rem !important; font-size: .9688rem; max-width: 34rem; }
.hx-card .hx-tag { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c, var(--ev-primary-soft)); display: inline-flex; align-items: center; gap: .5rem; }
.hx-card .hx-tag::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; box-shadow: 0 0 10px currentColor; }
.hx-shot { margin-top: 1.5rem !important; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); transform: translateZ(0); }
.hx-shot img { display: block; width: 100%; height: auto; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.hx-card:hover .hx-shot img { transform: scale(1.03); }
.hx-shot--bleed { margin-right: calc(-1 * clamp(1.5rem, 3vw, 2rem)) !important; margin-bottom: calc(-1 * clamp(1.5rem, 3vw, 2rem)) !important; border-radius: 14px 0 0 0; border-right: 0; border-bottom: 0; margin-top: auto !important; padding-top: 1.5rem; background: transparent; box-shadow: none; }
.hx-shot--bleed img { border-radius: 14px 0 0 0; border: 1px solid rgba(255, 255, 255, .08); border-right: 0; border-bottom: 0; }
.hx-shot--center { margin-inline: auto !important; max-width: 320px; margin-top: auto !important; padding-top: 1.5rem; }
.hx-shot--center img { border-radius: 12px; box-shadow: 0 0 0 1px rgba(124, 107, 255, .35), 0 20px 50px -10px rgba(124, 107, 255, .5); }

/* ---------- Sticky story ---------- */

.hx-story-grid { display: grid !important; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem) !important; align-items: start; }
.hx-story-grid > * { margin: 0 !important; }
.hx-step { min-height: min(72vh, 640px); display: flex; flex-direction: column; justify-content: center; opacity: .28; transition: opacity .5s; }
.hx-step.is-active { opacity: 1; }
.hx-step > * + * { margin-top: .9rem !important; }
.hx-step .hx-num { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: .875rem; color: var(--ev-accent); letter-spacing: .1em; }
.hx-step h3 { font-size: clamp(1.625rem, 3vw, 2.25rem); letter-spacing: -.03em; }
.hx-step p { color: var(--ev-muted); font-size: 1.0625rem; }
.hx-step .ev-checks { margin-top: 1.25rem !important; }
.hx-step-shot { display: none; }
.hx-story-visual { position: sticky; top: clamp(100px, calc(50vh - 17vw), 220px); }
.hx-screens { position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); background: #0b0e16; box-shadow: 0 0 0 1px rgba(124, 107, 255, .2), 0 40px 100px -30px rgba(124, 107, 255, .45); }
.hx-screens img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; z-index: 1; opacity: 0; transform: scale(1.04); transition: opacity 0s linear .75s, transform 1.2s cubic-bezier(.2, .7, .2, 1); }
/* Incoming screen fades in on top; the old one disappears only afterwards (no dark blink). */
.hx-screens img.is-active { z-index: 2; opacity: 1; transform: none; transition: opacity .7s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.hx-dots { display: flex; gap: .5rem; justify-content: center; margin-top: 1.25rem; }
.hx-dots i { width: 28px; height: 4px; border-radius: 4px; background: var(--ev-line); transition: background .4s, width .4s; }
.hx-dots i.is-active { background: linear-gradient(90deg, var(--ev-primary), var(--ev-cyan)); width: 48px; }
@media (max-width: 900px) {
	.hx-story-grid { grid-template-columns: 1fr; }
	.hx-story-visual { display: none; }
	.hx-step { min-height: 0; opacity: 1; padding-block: 1.5rem; }
	.hx-step-shot { display: block; margin-top: 1.5rem !important; }
	.hx-step-shot img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); }
}

/* ---------- Stats ---------- */

.hx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--ev-line); border-radius: 22px; background: rgba(17, 21, 31, .6); overflow: hidden; }
.hx-stat { padding: clamp(1.5rem, 3vw, 2.25rem); text-align: center; position: relative; }
.hx-stat + .hx-stat::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--ev-line); }
.hx-stat b { display: block; font-family: var(--wp--preset--font-family--display); font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1; letter-spacing: -.04em; background: linear-gradient(180deg, #fff, #9aa3b6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx-stat span { display: block; margin-top: .6rem; color: var(--ev-muted); font-size: .9375rem; }
@media (max-width: 760px) { .hx-stats { grid-template-columns: 1fr 1fr; } .hx-stat:nth-child(3)::before { display: none; } .hx-stat:nth-child(n+3) { border-top: 1px solid var(--ev-line); } }

/* ---------- Three steps with drawn line ---------- */

.hx-steps { position: relative; display: grid !important; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2rem) !important; }
.hx-steps > * { margin: 0 !important; }
.hx-line { position: absolute; left: 8%; right: 8%; top: 44px; height: 2px; pointer-events: none; }
.hx-line { background: rgba(255, 255, 255, .06); border-radius: 2px; }
.hx-line i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7c6bff, #3ad6ff 60%, #8fe9ff); box-shadow: 0 0 14px rgba(58, 214, 255, .6); transform-origin: 0 50%; }
.hx-s { position: relative; text-align: center; padding: 0 .5rem; }
.hx-s > * + * { margin-top: .75rem !important; }
.hx-s .hx-bignum, .fx-tl-step .hx-bignum {
	width: 88px; height: 88px; margin: 0 auto 1.5rem !important; border-radius: 50%; display: grid; place-items: center;
	font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.75rem; color: var(--ev-fg);
	background: radial-gradient(circle at 30% 25%, rgba(124, 107, 255, .45), rgba(17, 21, 31, 1) 70%);
	border: 1px solid rgba(124, 107, 255, .45); box-shadow: 0 0 0 8px rgba(11, 14, 22, 1), 0 0 40px -6px rgba(124, 107, 255, .7);
	position: relative; z-index: 1;
}
.hx-s h3 { font-size: 1.375rem; }
.hx-s p { color: var(--ev-muted); max-width: 22rem; margin-inline: auto !important; }
@media (max-width: 760px) { .hx-steps { grid-template-columns: 1fr; gap: 2.5rem !important; } .hx-line { display: none; } }

/* ---------- Integrations fan ---------- */

.hx-split { display: grid !important; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem) !important; align-items: center; }
.hx-split > * { margin: 0 !important; }
.hx-split-text > * + * { margin-top: 1rem !important; }
.hx-split-text h2 { font-size: clamp(2rem, 3.8vw, 3rem); letter-spacing: -.03em; }
@media (max-width: 900px) { .hx-split { grid-template-columns: 1fr; } }

.hx-fan { position: relative; height: 420px; }
.hx-fc {
	--r: 0deg; --x: 0px; --y: 0px;
	position: absolute; left: 50%; top: 50%; width: 210px; height: 270px; margin: -135px 0 0 -105px;
	border-radius: 20px; padding: 1.25rem; display: flex; flex-direction: column; justify-content: space-between;
	color: var(--ev-ink); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .5);
	transform: translate(var(--x), var(--y)) rotate(var(--r));
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.hx-ready .hx-fan:not(.is-done) .hx-fc { transition: none; }
.hx-fc b { font-family: var(--wp--preset--font-family--display); font-size: 1.375rem; letter-spacing: -.02em; }
.hx-fc small { font-size: .8125rem; line-height: 1.4; opacity: .82; }
.hx-fc .st { align-self: flex-start; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px; background: rgba(7, 9, 15, .85); color: #28e0a8; }
.hx-fc .st.soon { color: #ffb33e; }
.hx-fc.c1 { background: linear-gradient(160deg, #6fe2ff, #0fb6ea); --r: -18deg; --x: -190px; --y: 30px; z-index: 1; }
.hx-fc.c2 { background: linear-gradient(160deg, #ff8a5c, #fc4c02); --r: -9deg; --x: -95px; --y: 6px; z-index: 2; }
.hx-fc.c3 { background: linear-gradient(160deg, #ffffff, #cfd6e6); --r: 0deg; --x: 0px; --y: 0px; z-index: 3; }
.hx-fc.c4 { background: linear-gradient(160deg, #b9b0ff, #7c6bff); --r: 9deg; --x: 95px; --y: 6px; z-index: 2; color: #fff; }
.hx-fc.c5 { background: linear-gradient(160deg, #3a4460, #1d2333); --r: 18deg; --x: 190px; --y: 30px; z-index: 1; color: var(--ev-fg); }
.hx-fc.c4 .st, .hx-fc.c5 .st { background: rgba(7, 9, 15, .6); }
.hx-fan:hover .hx-fc { transform: translate(calc(var(--x) * 1.12), calc(var(--y) - 10px)) rotate(calc(var(--r) * 1.15)); }
.hx-fc:hover { z-index: 5 !important; }
@media (max-width: 560px) { .hx-fan { height: 340px; transform: scale(.72); transform-origin: 50% 50%; } }

/* ---------- Final CTA ---------- */

.hx-cta { position: relative; border-radius: 28px; padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem) !important; text-align: center; overflow: hidden; isolation: isolate; background: var(--ev-surface); }
.hx-cta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--ang, 0deg), #7c6bff, #3ad6ff, #9a8dff, #7c6bff); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: hxSpin 8s linear infinite; z-index: 1; pointer-events: none; }
.hx-cta::after { content: ""; position: absolute; inset: -40%; background: radial-gradient(circle at 30% 20%, rgba(124, 107, 255, .35), transparent 40%), radial-gradient(circle at 75% 80%, rgba(58, 214, 255, .2), transparent 40%); z-index: -1; animation: hxDrift1 16s ease-in-out infinite alternate; }
.hx-cta > * { position: relative; }
.hx-cta > * + * { margin-top: 1.25rem !important; }
.hx-cta h2 { font-size: clamp(2.25rem, 5vw, 3.75rem); letter-spacing: -.04em; max-width: 18ch; margin-inline: auto !important; }
.hx-cta p { color: var(--ev-muted); font-size: 1.125rem; max-width: 36rem; margin-inline: auto !important; }
.hx-cta .wp-block-buttons { justify-content: center; margin-top: 2rem !important; }

/* ---------- Motion defaults (JS adds .hx-ready once GSAP runs) ---------- */

@media (prefers-reduced-motion: reduce) {
	.hx-orb, .hx-shine, .hx-track, .hx-card:hover::before, .hx-cta::before, .hx-cta::after { animation: none !important; }
	.hx-frame { transform: none !important; }
	.hx-step { opacity: 1; }
}

/* ==========================================================================
   Photo hero (runner) + start-line race band
   ========================================================================== */

.hx-photo, .hx-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hx-photo img { object-fit: cover; object-position: 36% 35%; filter: saturate(.8) contrast(1.05); }
/* Violet colour grade so the photo sits inside the brand palette */
.hx-tint { position: absolute; inset: 0; background: linear-gradient(135deg, #5a48e0, #1a2a6c 60%, #0b0e16); mix-blend-mode: color; opacity: .55; }
.hx-shade {
	position: absolute; inset: 0;
	background:
		radial-gradient(70% 55% at 50% 38%, rgba(11, 14, 22, .55), transparent 75%),
		linear-gradient(180deg, rgba(11, 14, 22, .75) 0%, rgba(11, 14, 22, .35) 22%, rgba(11, 14, 22, .45) 45%, rgba(11, 14, 22, .92) 66%, #0b0e16 80%);
}
.hx-hero .hx-orb.o1 { opacity: .32; }
.hx-hero .hx-orb.o2 { opacity: .2; }
.hx-hero .hx-title, .hx-hero .hx-lead { text-shadow: 0 2px 30px rgba(7, 9, 15, .55); }
.hx-hero .hx-lead { color: #c9cfdc; }
.hx-hero .hx-meta { color: #aeb6c7; }
@media (max-width: 700px) {
	.hx-photo img { object-position: 50% 30%; }
	.hx-shade { background: linear-gradient(180deg, rgba(11, 14, 22, .8) 0%, rgba(11, 14, 22, .55) 30%, rgba(11, 14, 22, .7) 52%, rgba(11, 14, 22, .96) 70%, #0b0e16 82%); }
}

.hx-race { overflow: hidden; isolation: isolate; }
.hx-race > .hx-band-bg { max-width: none !important; margin: 0 !important; }
.hx-band-bg { position: absolute; inset: 0; z-index: -1; }
.hx-band-bg img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; object-position: 50% 70%; filter: grayscale(.35) saturate(.8); }
.hx-band-bg span {
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, #0b0e16 0%, rgba(11, 14, 22, .2) 22%, rgba(11, 14, 22, .2) 78%, #0b0e16 100%),
		linear-gradient(90deg, rgba(11, 14, 22, .95) 0%, rgba(11, 14, 22, .82) 42%, rgba(26, 20, 70, .55) 100%);
}
.hx-race .hx-split-text .ev-checks { margin-top: 1.5rem !important; }

.hx-race-card {
	padding: 1rem; border-radius: 22px;
	background: rgba(17, 21, 31, .72); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, .1);
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(124, 107, 255, .18);
}
.hx-race-card .hx-shot { margin: 0 !important; }
.hx-phases { display: flex; gap: 6px; margin-top: 1.1rem; }
.hx-ph { flex: var(--w) 1 0; min-width: 0; }
.hx-ph i { display: block; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .1); }
.hx-ph.is-now i, .hx-ph:first-child i { background: linear-gradient(90deg, #7c6bff, #3ad6ff); }
.hx-ph.is-now i { box-shadow: 0 0 14px rgba(58, 214, 255, .6); }
.hx-ph b { display: block; margin-top: .6rem; font-size: .8125rem; color: var(--ev-fg); font-family: var(--wp--preset--font-family--display); }
.hx-ph span { display: block; font-size: .75rem; color: var(--ev-faint); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; }
.hx-ph.is-now b { color: #8fe9ff; }
@media (max-width: 560px) { .hx-ph span { display: none; } }

/* ==========================================================================
   Inner motion pages (Funktionen …): page hero, section nav, framed screens
   ========================================================================== */

.hx-hero--page { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.hx-hero--page .hx-shade { background: linear-gradient(180deg, rgba(11, 14, 22, .78) 0%, rgba(11, 14, 22, .5) 30%, rgba(11, 14, 22, .7) 60%, #0b0e16 86%); }
.hx-hero--page .hx-title { font-size: clamp(2.5rem, 6.2vw, 4.75rem) !important; max-width: 17ch; }

/* Sticky section nav (glass pill), scroll-spy highlights the current section */
.hx-hero > .fx-nav { max-width: none !important; }
.fx-nav { position: relative; z-index: 4; margin-top: clamp(2.5rem, 5vw, 3.5rem) !important; }
.fx-nav ul {
	list-style: none; margin: 0 auto; padding: .4rem; display: flex; gap: .25rem; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none;
	border-radius: 999px; background: rgba(17, 21, 31, .7); border: 1px solid rgba(255, 255, 255, .09);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.fx-nav ul::-webkit-scrollbar { display: none; }
.fx-nav a { display: block; white-space: nowrap; padding: .45rem .95rem; border-radius: 999px; color: var(--ev-muted); font-size: .875rem; font-weight: 500; text-decoration: none; transition: color .2s, background .2s; }
.fx-nav a:hover { color: var(--ev-fg); background: rgba(255, 255, 255, .05); }
.fx-nav a.is-active { color: #fff; background: linear-gradient(135deg, #8b7cff, #5a48e0); box-shadow: 0 6px 20px -8px rgba(124, 107, 255, .8); }
.fx-nav.is-docked { position: fixed; top: 72px; left: 0; right: 0; margin: 0 !important; padding-inline: 1rem; animation: fxDock .35s ease; }
body.admin-bar .fx-nav.is-docked { top: 104px; }
@keyframes fxDock { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 599px) { .fx-nav.is-docked { top: 64px; } .fx-nav ul { justify-content: flex-start; } }

/* Feature sections */
.fx-feature { padding-block: clamp(4rem, 9vw, 7rem); }
.fx-feature + .fx-feature { padding-top: clamp(1rem, 3vw, 2rem); }
.fx-split { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) !important; }
.fx-split--rev { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) !important; }
.fx-split--rev > :first-child { order: 2; }
@media (max-width: 900px) { .fx-split, .fx-split--rev { grid-template-columns: 1fr !important; } .fx-split--rev > :first-child { order: 0; } }
.fx-feature .hx-split-text .ev-checks { margin-top: 1.5rem !important; }
.fx-feature .wp-block-details { margin-top: 1.5rem !important; }
.fx-feature .wp-block-details .ev-table { font-size: .875rem; }

/* Browser-framed screenshot */
.fx-stage { position: relative; perspective: 1600px; }
.fx-stage::before { content: ""; position: absolute; inset: 10% 8% -4%; background: radial-gradient(closest-side, rgba(124, 107, 255, .45), transparent); filter: blur(40px); z-index: -1; }
.fx-frame {
	position: relative; border-radius: 16px; overflow: hidden; background: #0b0e16;
	border: 1px solid rgba(255, 255, 255, .1);
	box-shadow: 0 0 0 1px rgba(124, 107, 255, .18), 0 40px 90px -30px rgba(0, 0, 0, .9), 0 24px 60px -30px rgba(124, 107, 255, .55);
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.fx-frame img { display: block; width: 100%; height: auto; }
.fx-stage:hover .fx-frame { transform: translateY(-4px); }

/* Two stacked screens */
.fx-stack { padding: 0 0 12% 10%; }
.fx-stack .fx-back { opacity: .55; transform: scale(.94); transform-origin: 0 0; }
.fx-stack .fx-front { position: absolute; left: 0; right: 10%; bottom: 0; }
.fx-stack:hover .fx-back { opacity: .7; }

/* Chips on frames */
.fx-chip { position: absolute; z-index: 3; }
.fx-chip.c-tl { left: -4%; top: 14%; }
.fx-chip.c-tr { right: -3%; top: -6%; }
.fx-chip.c-br { right: -3%; bottom: 10%; }
.fx-chip--img { padding: .45rem; }
.fx-chip--img img { display: block; width: 180px; height: auto; border-radius: 10px; }
@media (max-width: 900px) { .fx-chip.c-tl { left: 2%; } .fx-chip.c-tr, .fx-chip.c-br { right: 2%; } }
@media (max-width: 560px) { .fx-chip--img img { width: 130px; } .fx-stack { padding: 0 0 18% 6%; } }

/* Anchor jumps clear the header + docked section nav */
html:has(.fx-nav) { scroll-padding-top: 150px; }

/* ==========================================================================
   Standard sub-page kit
   ========================================================================== */

.hx-hero--sub { padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.hx-hero--sub .hx-title { font-size: clamp(2.4rem, 5.6vw, 4.25rem) !important; max-width: 18ch; }
.hx-hero--sub .hx-orb.o1 { opacity: .45; }
.hx-hero--sub .hx-orb.o2 { opacity: .25; }
.hx-hero--sub::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(124, 107, 255, .35), rgba(58, 214, 255, .35), transparent); }

.hx-section--alt { background: linear-gradient(180deg, transparent, rgba(17, 21, 31, .7) 15%, rgba(17, 21, 31, .7) 85%, transparent); }
.fx-tight-top { padding-top: clamp(2.5rem, 5vw, 4rem); }
.fx-narrow { max-width: 760px; margin-inline: auto !important; }

/* Card grids */
.hx-grid-cards { display: grid !important; gap: 1rem !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hx-grid-cards > * { margin: 0 !important; }
.hx-grid-cards.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hx-grid-cards.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .hx-grid-cards.cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .hx-grid-cards, .hx-grid-cards.cols-2, .hx-grid-cards.cols-5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .hx-grid-cards, .hx-grid-cards.cols-2, .hx-grid-cards.cols-5 { grid-template-columns: 1fr; } }
.hx-card--icon h3 { margin-top: 1.1rem !important; font-size: 1.1875rem; }
.hx-card--icon .ev-brand { margin: 0 !important; }
.hx-card--icon .ev-checks { margin-top: 1.1rem !important; gap: .55rem; }
.hx-card--icon .ev-checks li { font-size: .9375rem; }
.hx-card--soon { background: rgba(17, 21, 31, .55); }
.hx-card--soon h3 { margin-top: .9rem !important; }

/* Pricing */
.fx-pricing { max-width: 940px; margin-inline: auto !important; }
.hx-price h3 { font-size: 1.625rem; margin-top: .5rem !important; }
.hx-price .ev-checks { margin-top: 1.4rem !important; flex: 1; }
.hx-price .wp-block-buttons { margin-top: 1.75rem !important; }
.hx-card.is-featured { border-color: transparent; box-shadow: 0 30px 80px -30px rgba(124, 107, 255, .6); }
.hx-card.is-featured::before { opacity: 1; background: conic-gradient(from var(--ang, 0deg), #7c6bff, #3ad6ff, #9a8dff, #7c6bff); animation: hxSpin 6s linear infinite; }

/* Glossary cards */
.fx-gloss h2 { font-size: 1.375rem; margin-top: 1rem !important; }
.fx-gloss .ev-gloss { margin: .5rem 0 0; }
.fx-gloss .ev-gloss dt { margin-top: 1.1rem; }
.fx-gloss .ev-gloss dd { font-size: .9375rem; line-height: 1.6; }

/* FAQ */
.fx-narrow-sec .ev-faq-group:first-child h3 { margin-top: 0; }

/* Timeline */
.fx-timeline { position: relative; max-width: 880px; margin-inline: auto; }
.fx-tl-line { position: absolute; left: 43px; top: 44px; bottom: 44px; width: 2px; background: rgba(255, 255, 255, .06); border-radius: 2px; }
.fx-tl-line i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(180deg, #7c6bff, #3ad6ff); box-shadow: 0 0 12px rgba(58, 214, 255, .5); transform-origin: 50% 0; }
.fx-tl-step { display: grid !important; grid-template-columns: 88px minmax(0, 1fr); gap: clamp(1rem, 3vw, 2rem) !important; position: relative; }
.fx-tl-step + .fx-tl-step { margin-top: clamp(2rem, 4vw, 3rem) !important; }
.fx-tl-step > * { margin: 0 !important; }
.fx-tl-step .hx-bignum { margin: 0 !important; }
.fx-tl-body { padding-top: 1.35rem; }
.fx-tl-body > * + * { margin-top: 1rem !important; }
.fx-tl-body h3 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); letter-spacing: -.02em; }
.fx-tl-body p { color: var(--ev-muted); }
.fx-tl-body .wp-block-details { margin-top: 1.25rem !important; }
.fx-shot { border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 0 0 1px rgba(124, 107, 255, .18), 0 30px 70px -30px rgba(124, 107, 255, .55); }
.fx-shot img { display: block; width: 100%; height: auto; }
/* compact timeline inside split columns (Für Coaches) */
.hx-split-text .fx-timeline { margin-top: 1.75rem !important; }
.hx-split-text .fx-tl-step { grid-template-columns: 56px minmax(0, 1fr); }
.hx-split-text .fx-tl-step + .fx-tl-step { margin-top: 1.25rem !important; }
.hx-split-text .hx-bignum { width: 56px; height: 56px; font-size: 1.125rem; box-shadow: 0 0 0 6px rgba(11, 14, 22, 1), 0 0 30px -6px rgba(124, 107, 255, .7); }
.hx-split-text .fx-tl-line { left: 27px; top: 28px; bottom: 28px; }
.hx-split-text .fx-tl-body { padding-top: .75rem; }
.hx-split-text .fx-tl-body h3 { font-size: 1.125rem; }
@media (max-width: 600px) {
	.fx-tl-step { grid-template-columns: 56px minmax(0, 1fr); }
	.fx-timeline > .fx-tl-step .hx-bignum { width: 56px; height: 56px; font-size: 1.125rem; }
	.fx-tl-line { left: 27px; top: 28px; bottom: 28px; }
	.fx-tl-body { padding-top: .75rem; }
}

/* Plan types, start weeks, build steps */
.fx-plans { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.fx-plans li { padding: .75rem .9rem; border-radius: 12px; background: rgba(22, 27, 39, .8); border: 1px solid var(--ev-line); }
.fx-plans b { display: block; color: var(--ev-fg); font-size: .9375rem; }
.fx-plans span { font-size: .8125rem; color: var(--ev-faint); }
.fx-plans li:first-child { border-color: rgba(124, 107, 255, .55); background: rgba(124, 107, 255, .12); }
.fx-weeks { display: flex; flex-wrap: wrap; gap: .5rem; }
.fx-weeks span { padding: .55rem .9rem; border-radius: 999px; border: 1px solid var(--ev-line); background: rgba(22, 27, 39, .8); color: var(--ev-muted); font-size: .875rem; }
.fx-weeks span.on { color: #fff; border-color: transparent; background: linear-gradient(135deg, #8b7cff, #5a48e0); box-shadow: 0 8px 24px -10px rgba(124, 107, 255, .8); }
.fx-weeks em { font-style: normal; font-size: .6875rem; opacity: .8; margin-left: .3rem; text-transform: uppercase; letter-spacing: .05em; }
.fx-build { list-style: none; padding: 0; display: grid; gap: .5rem; }
.fx-build li { position: relative; padding: .6rem .9rem .6rem 2.4rem; border-radius: 12px; background: rgba(22, 27, 39, .8); border: 1px solid var(--ev-line); color: var(--ev-muted); font-size: .9375rem; }
.fx-build li::before { content: ""; position: absolute; left: .9rem; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; border: 2px solid var(--ev-accent); }
.fx-build li.done { color: var(--ev-fg); border-color: rgba(40, 224, 168, .45); }
.fx-build li.done::before { border-color: #28e0a8; background: #28e0a8; box-shadow: 0 0 12px rgba(40, 224, 168, .7); }

/* HTML mock inside a stage */
.fx-mock .ev-mock { max-width: 560px; margin-left: auto; }

/* ==========================================================================
   Mobile polish (motion pages)
   ========================================================================== */

@media (max-width: 700px) {
	/* Tighter vertical rhythm – desktop spacing left ~145px gaps on phones */
	.hx-section, .fx-feature { padding-block: 3.25rem; }
	.fx-feature + .fx-feature { padding-top: 1rem; }
	.fx-tight-top { padding-top: 2rem; }
	.hx-hero--sub { padding-bottom: 2.25rem; }
	.hx-head { margin-bottom: 1.75rem !important; }
	.hx-head h2, .hx-split-text h2 { font-size: clamp(1.7rem, 7.4vw, 2.1rem); }
	.hx-kicker { font-size: .75rem !important; }
	.hx-step { padding-block: 1rem; }
	.hx-story .hx-head { margin-bottom: .5rem !important; }

	/* CTA box: long words must fit */
	.hx-cta { padding: 2.5rem 1.25rem !important; border-radius: 22px; }
	.hx-cta h2 { font-size: clamp(1.6rem, 7vw, 2rem); }

	/* Integration fan: smaller cards, tighter spread, fully on screen */
	.hx-fan { height: 300px; transform: none; }
	.hx-fc { width: 132px; height: 176px; margin: -88px 0 0 -66px; padding: .8rem; border-radius: 16px; }
	.hx-fc b { font-size: 1rem; }
	.hx-fc small { font-size: .6875rem; }
	.hx-fc.c1 { --x: -104px; --y: 20px; --r: -14deg; }
	.hx-fc.c2 { --x: -52px; --y: 5px; --r: -7deg; }
	.hx-fc.c4 { --x: 52px; --y: 5px; --r: 7deg; }
	.hx-fc.c5 { --x: 104px; --y: 20px; --r: 14deg; }
	.hx-fc.c5 b { font-size: .8125rem; }

	/* Section nav: hint that it scrolls sideways */
	.fx-nav ul { mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 2rem; }

	/* Plan types two per row */
	.fx-plans { grid-template-columns: 1fr 1fr; }
	.fx-plans li { padding: .6rem .75rem; }

	/* Timeline steps a little tighter */
	.fx-tl-step + .fx-tl-step { margin-top: 1.75rem !important; }
	.fx-tl-body > * + * { margin-top: .75rem !important; }

	/* Stats band */
	.hx-stat { padding: 1.25rem .75rem; }
	.hx-stat span { font-size: .8125rem; }
}

/* Tablets: keep 3-up card rows (avoids a lone card on the last row) */
@media (min-width: 700px) and (max-width: 900px) { .hx-grid-cards:not(.cols-2):not(.cols-5) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hx-grid-cards .hx-card { padding: 1.1rem !important; } }

/* ==========================================================================
   One spacing scale for all motion pages (replaces the per-section values above).
   Adjacent sections don't stack two full paddings; the footer adds the last gap.
   ========================================================================== */
:root { --ev-sec: clamp(3.5rem, 6vw, 5.5rem); }
@media (max-width: 700px) { :root { --ev-sec: 3rem; } }
.hx-section, .fx-feature { padding-block: var(--ev-sec); }
.hx-section + .hx-section, .fx-feature + .fx-feature, .hx-hero + .hx-section { padding-top: calc(var(--ev-sec) * .4); }
/* sections with their own background keep full top spacing */
.hx-section + .hx-race, .hx-section + .hx-section--alt, .hx-race + .hx-section, .hx-section--alt + .hx-section { padding-top: var(--ev-sec); }
.wp-block-post-content > .hx-section:last-child { padding-bottom: 0; }
.hx-stats-wrap { margin-block: 0 !important; }
.hx-marquee-wrap + .hx-section { padding-top: var(--ev-sec); }
/* spacing scale, part 2: no extra WP block gap between sections; tinted sections use the normal rhythm */
.wp-block-post-content > .hx-section, .wp-block-post-content > .hx-hero, .wp-block-post-content > .fx-feature,
.wp-block-post-content > .hx-marquee-wrap, .wp-block-post-content > .hx-stats-wrap { margin-block-start: 0 !important; }
.hx-section + .hx-section--alt, .hx-section--alt + .hx-section { padding-top: calc(var(--ev-sec) * .4); }
.hx-hero--sub, .hx-hero--page { padding-bottom: calc(var(--ev-sec) * .8); }
.hx-stats-wrap + .hx-race { padding-top: calc(var(--ev-sec) * .7); }
.hx-race + .hx-section { padding-top: calc(var(--ev-sec) * .7); }

/* Docked section nav = full-width bar directly under the (scrolled) header – nothing shows around it */
.fx-nav.is-docked {
	top: 65px; padding: .45rem 1rem;
	background: rgba(11, 14, 22, .9);
	border-bottom: 1px solid rgba(124, 107, 255, .2);
	box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .8);
	backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
}
.fx-nav.is-docked ul { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding-block: 0; }
body.admin-bar .fx-nav.is-docked { top: 97px; }
@media (max-width: 782px) { body.admin-bar .fx-nav.is-docked { top: 111px; } }
@media (max-width: 599px) { .fx-nav.is-docked { top: 57px; } body.admin-bar .fx-nav.is-docked { top: 103px; } }
/* the header's own bottom line would double up with the bar */
body:has(.fx-nav.is-docked) .site-header::before { border-bottom-color: transparent; box-shadow: none; }
/* The hero isolates its stacking context; while its nav is docked, lift the whole hero above later sections */
.hx-hero:has(.fx-nav.is-docked) { z-index: 45; }
.fx-nav.is-docked { z-index: 46; }

/* "Du coachst Ausdauerathleten?" band (Funktionen, Preise, FAQ) */
.hx-coach-strip {
	display: flex; align-items: center; gap: 1.25rem;
	padding: 1.25rem 1.5rem; border-radius: 20px;
	background: linear-gradient(120deg, rgba(124, 107, 255, .16), rgba(58, 214, 255, .06) 70%), var(--ev-surface);
	border: 1px solid rgba(124, 107, 255, .3);
}
.hx-coach-strip__ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(124, 107, 255, .18); color: var(--ev-primary-soft); }
.hx-coach-strip__ic svg { width: 24px; height: 24px; }
.hx-coach-strip__txt { flex: 1; min-width: 0; }
.hx-coach-strip__txt b { display: block; font-size: 1.125rem; color: var(--ev-fg); }
.hx-coach-strip__txt span { display: block; margin-top: .2rem; color: var(--ev-muted); font-size: .9375rem; }
.hx-coach-strip__btns { flex: none; display: flex; align-items: center; gap: 1.25rem; }
.hx-coach-strip .hx-link { color: var(--ev-primary-soft); font-weight: 600; font-size: .9375rem; text-decoration: none; white-space: nowrap; }
.hx-coach-strip .hx-link:hover { color: var(--ev-fg); }
@media (max-width: 760px) {
	.hx-coach-strip { flex-direction: column; align-items: flex-start; }
	.hx-coach-strip__btns { flex-direction: row-reverse; justify-content: flex-end; flex-wrap: wrap; }
}
.wp-block-post-content > .hx-section.cx-strip-sec { padding-top: 0; }

/* Coach page: "So wirst du Coach" steps + homepage coach visual */
@media (min-width: 901px) { .hx-split:has(> .hx-coach-visual) { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) !important; } }
.hx-coach-visual .fx-chip.c-br { bottom: -7%; }
.cx-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; counter-reset: cx; }
.cx-step { position: relative; padding: 1.75rem 1.5rem 1.5rem; border-radius: 20px; background: var(--ev-surface); border: 1px solid var(--ev-line); }
.cx-step b { display: block; font-size: 1.125rem; margin-top: .9rem; color: var(--ev-fg); }
.cx-step p { margin: .4rem 0 0; color: var(--ev-muted); font-size: .9375rem; }
.cx-step .cx-n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #8b7cff, #5a48e0); box-shadow: 0 8px 22px -10px rgba(124, 107, 255, .9); }
.cx-step:not(:last-child)::after { content: ""; position: absolute; top: 2.75rem; right: -1.25rem; width: 1.25rem; height: 2px; background: linear-gradient(90deg, rgba(124, 107, 255, .7), rgba(58, 214, 255, .3)); }
@media (max-width: 800px) { .cx-steps { grid-template-columns: 1fr; } .cx-step:not(:last-child)::after { display: none; } }
.fx-chip--img.fx-chip--picker img { width: 170px; }
@media (max-width: 560px) { .fx-chip--img.fx-chip--picker img { width: 110px; } }

/* Für Coaches: photo hero (swim start) + photo band (swim pack) behind the application steps */
.cx-hero .hx-photo img { object-position: 50% 62%; filter: saturate(.85) contrast(1.06); }
.cx-hero .hx-shade {
	background:
		radial-gradient(60% 50% at 50% 40%, rgba(11, 14, 22, .55), transparent 75%),
		linear-gradient(180deg, rgba(11, 14, 22, .7) 0%, rgba(11, 14, 22, .4) 30%, rgba(11, 14, 22, .55) 60%, rgba(11, 14, 22, .9) 82%, #0b0e16 100%);
}
.cx-hero .hx-meta { justify-content: center; }
@media (max-width: 700px) {
	.cx-hero .hx-photo img { object-position: 50% 60%; }
	.cx-hero .hx-shade { background: linear-gradient(180deg, rgba(11, 14, 22, .78) 0%, rgba(11, 14, 22, .62) 35%, rgba(11, 14, 22, .74) 60%, rgba(11, 14, 22, .95) 80%, #0b0e16 92%); }
}
.cx-band .hx-band-bg img { object-position: 50% 45%; filter: grayscale(.15) saturate(.9) brightness(1.08); }
.cx-band .hx-band-bg span {
	background:
		linear-gradient(180deg, #0b0e16 0%, rgba(11, 14, 22, .38) 22%, rgba(11, 14, 22, .45) 78%, #0b0e16 100%),
		linear-gradient(135deg, rgba(90, 72, 224, .35), rgba(11, 14, 22, .4) 60%);
}
.cx-band .cx-step { background: rgba(17, 21, 31, .78); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-color: rgba(255, 255, 255, .1); }
.cx-band .hx-head .ev-lead { color: #c9cfdc; }

/* Homepage hero: the photo covers only the first screen. Stretched over the whole hero (copy + app frame,
   ~1650px) it was cropped to a narrow slice and upscaled ~2x, which made it blurry. */
.hx-hero:not(.hx-hero--sub):not(.hx-hero--page) > .hx-bg { bottom: auto; height: min(100svh, 980px); }
.hx-hero:not(.hx-hero--sub):not(.hx-hero--page) .hx-shade {
	background:
		radial-gradient(70% 55% at 50% 42%, rgba(11, 14, 22, .5), transparent 75%),
		linear-gradient(180deg, rgba(11, 14, 22, .72) 0%, rgba(11, 14, 22, .3) 25%, rgba(11, 14, 22, .42) 55%, rgba(11, 14, 22, .85) 82%, #0b0e16 100%);
}
@media (max-width: 700px) {
	.hx-hero:not(.hx-hero--sub):not(.hx-hero--page) > .hx-bg { height: min(100svh, 860px); }
	.hx-hero:not(.hx-hero--sub):not(.hx-hero--page) .hx-shade { background: linear-gradient(180deg, rgba(11, 14, 22, .8) 0%, rgba(11, 14, 22, .55) 35%, rgba(11, 14, 22, .7) 62%, rgba(11, 14, 22, .95) 85%, #0b0e16 100%); }
}

/* ==========================================================================
   Closing CTA v2 (hx_cta_split): copy left, app peeking out of the card right
   ========================================================================== */
.hx-cta--split {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(2rem, 4vw, 3.5rem);
	text-align: left; padding: clamp(2.5rem, 5vw, 4.25rem) 0 clamp(2.5rem, 5vw, 4.25rem) clamp(2rem, 5vw, 4.25rem) !important;
	background: radial-gradient(120% 90% at 0% 0%, rgba(124, 107, 255, .16), transparent 55%), linear-gradient(180deg, #121726, #0d111b);
	border: 1px solid rgba(124, 107, 255, .22);
	box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.hx-cta--split::before, .hx-cta--split::after { display: none; }
.hx-cta--split > * + * { margin-top: 0 !important; }
.hx-cta-bg { position: absolute !important; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.hx-cta-bg .hx-grid { mask-image: radial-gradient(ellipse 80% 90% at 75% 50%, #000 10%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 80% 90% at 75% 50%, #000 10%, transparent 70%); }
.hx-cta-glow { position: absolute; width: 520px; height: 520px; right: -120px; top: 50%; margin-top: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(124, 107, 255, .45), rgba(58, 214, 255, .12) 45%, transparent 70%); filter: blur(30px); }
/* thin brand line along the top edge instead of the spinning border */
.hx-cta--split .hx-cta-bg::after { content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(154, 141, 255, .8), rgba(58, 214, 255, .8), transparent); }

.hx-cta-copy { position: relative; z-index: 2; }
.hx-cta-copy > * + * { margin-top: 1.1rem !important; }
.hx-cta--split h2 { font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -.035em; line-height: 1.08; max-width: 14ch; margin: 0 !important; }
.hx-cta--split .hx-cta-copy > p:not(.ev-eyebrow) { color: var(--ev-muted); font-size: 1.0625rem; max-width: 30rem; margin-inline: 0 !important; }
.hx-cta--split .wp-block-buttons { justify-content: flex-start; margin-top: 1.75rem !important; }
.hx-cta--split .hx-meta { justify-content: flex-start; margin-top: 1.5rem !important; }

/* the app frame bleeds out of the card's right/bottom edge */
.hx-cta-visual { position: relative; z-index: 1; align-self: stretch; min-height: 340px; margin: calc(-1 * clamp(2.5rem, 5vw, 4.25rem)) 0; perspective: 1600px; }
.hx-cta-frame {
	position: absolute; left: 4%; top: 14%; width: 118%;
	border-radius: 16px; overflow: hidden; background: #0b0e16;
	border: 1px solid rgba(255, 255, 255, .1);
	box-shadow: 0 0 0 1px rgba(124, 107, 255, .22), 0 40px 90px -30px rgba(0, 0, 0, .95), 0 30px 80px -40px rgba(124, 107, 255, .6);
	transform: rotateY(-14deg) rotateX(6deg); transform-origin: 0 50%;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.hx-cta-frame img { display: block; width: 100%; height: auto; }
.hx-cta--split:hover .hx-cta-frame { transform: rotateY(-8deg) rotateX(3deg) translateY(-4px); }
.hx-cta-visual .hx-float { font-size: .78rem; }
.hx-cta-visual .cta-c1 { left: -6%; top: 22%; }
.hx-cta-visual .cta-c2 { left: auto; right: 6%; bottom: 7%; }

@media (max-width: 900px) {
	.hx-cta--split { grid-template-columns: 1fr; padding: 2.5rem 1.5rem 0 !important; }
	.hx-cta--split h2 { max-width: none; }
	.hx-cta-visual { margin: 0 -1.5rem; min-height: 0; height: clamp(200px, 52vw, 340px); }
	.hx-cta-frame { left: 8%; top: 0; width: 100%; transform: rotateX(8deg); transform-origin: 50% 0; }
	.hx-cta--split:hover .hx-cta-frame { transform: rotateX(8deg); }
	.hx-cta-visual .cta-c1 { left: 3%; top: 22%; }
	.hx-cta-visual .cta-c2 { left: auto; right: 3%; bottom: auto; top: 50%; }
	.hx-cta-glow { right: -200px; top: auto; bottom: -260px; margin-top: 0; }
}
@media (max-width: 560px) {
	.hx-cta--split { padding: 2.25rem 1.25rem 0 !important; border-radius: 22px; }
	.hx-cta--split h2 { font-size: clamp(1.75rem, 8vw, 2.1rem); }
	.hx-cta-visual { margin: 0 -1.25rem; }
	.hx-cta--split .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.hx-cta--split .wp-block-button__link { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .hx-cta-frame { transition: none; } }

/* Closing CTA v2, text-only variant (homepage): same card language, centred, no app visual */
.hx-cta--split h2 { hyphens: manual; -webkit-hyphens: manual; }
.hx-cta--text { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: clamp(3rem, 6vw, 4.75rem) clamp(1.5rem, 5vw, 4rem) !important; }
.hx-cta--text .hx-cta-copy { max-width: 46rem; }
.hx-cta--text h2 { max-width: 20ch; margin-inline: auto !important; }
.hx-cta--text .hx-cta-copy > p:not(.ev-eyebrow) { margin-inline: auto !important; }
.hx-cta--text .wp-block-buttons, .hx-cta--text .hx-meta { justify-content: center; }
.hx-cta--text .hx-cta-bg .hx-grid { mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 10%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 10%, transparent 70%); }
.hx-cta--text .hx-cta-glow { right: auto; left: 50%; margin-left: -260px; top: auto; bottom: -330px; margin-top: 0; }
.hx-cta--text { background: radial-gradient(90% 80% at 50% 0%, rgba(124, 107, 255, .14), transparent 60%), linear-gradient(180deg, #121726, #0d111b); }
@media (max-width: 900px) { .hx-cta--text { padding: 2.5rem 1.5rem !important; } }
@media (max-width: 560px) { .hx-cta--text { padding: 2.25rem 1.25rem !important; } }
.hx-cta--text .hx-cta-copy > p:not(.ev-eyebrow) { max-width: 38rem; }
.hx-cta--text .ev-eyebrow + h2 { margin-top: .9rem !important; }

/* ---------- Mobile app screenshots (owner uploads, grey #323232 boards) ---------- */
.hx-board { margin: 0 !important; border-radius: 20px; overflow: hidden; background: #323232; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 0 0 1px rgba(124, 107, 255, .12), 0 40px 80px -40px rgba(0, 0, 0, .9), 0 0 120px -40px rgba(124, 107, 255, .35); }
.hx-board img { display: block; width: 100%; height: auto; }
.hx-board--wide { max-width: 64rem; margin-inline: auto !important; }
.hx-board--square { max-width: 36rem; margin-inline: auto !important; }
.hx-board--phone { max-width: 300px; margin-inline: auto !important; border-radius: 32px; border: 8px solid #1b2030; background: #0a0f15; }
.hx-board--phone img { border-radius: 24px; }
.hx-stores { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; position: relative; }
.hx-store { display: inline-flex; align-items: center; gap: .65rem; padding: .6rem 1.1rem .6rem .85rem; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: var(--ev-fg); text-align: left; line-height: 1.15; }
.hx-store svg { width: 24px; height: 24px; color: #9a8dff; flex: none; }
.hx-store small { display: block; font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ev-muted, #9aa3b5); }
.hx-store b { display: block; font-size: 1rem; }
@media (max-width: 600px) { .hx-board { border-radius: 14px; } }