/* Webverix — Home Hero widget (v2)
   Layout model: compact center — the content column does NOT flex-grow,
   so every Margin/Spacing control is exact (0 = elements touch).
   "Spread" distribution (opt-in) pins the slider + indicator to the
   bottom edge instead. */
.wvx-hh {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: calc(100svh - var(--wvx-hh-off, 0px));
	padding: 80px 20px 20px;
	overflow: hidden;
	color: #FFFFFF;
	text-align: center;
	--wvx-hh-adur: 700ms;
	--wvx-hh-adist: 24px;
	--wvx-hh-astep: 90ms;
}
.wvx-hh-glow {
	position: absolute;
	left: 50%; top: 10%;
	width: 900px; height: 900px;
	transform: translate(-50%, -50%);
	background: radial-gradient(ellipse at center, rgba(124,92,246,0.16), transparent 65%);
	pointer-events: none;
	z-index: 0;
}

/* Content column — spacing comes ONLY from per-element margins
   (+ the optional extra gap control). Hidden elements vanish cleanly. */
.wvx-hh-main {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	min-height: 0;
}
/* Spread mode: content fills, slider + indicator sit at the bottom. */
.wvx-hh-dist-spread .wvx-hh-main { flex: 1; }

/* Badge */
.wvx-hh-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 18px;
	font-size: 13px; font-weight: 500;
	color: #A9B4F8;
	background: rgba(124,92,246,0.08);
	border: 1px solid rgba(124,92,246,0.35);
	border-radius: 99px;
	padding: 9px 20px;
	line-height: 1;
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.wvx-hh-badge i { font-size: 12px; color: #8B7CF6; }
.wvx-hh-badge svg { width: 12px; height: 12px; fill: #8B7CF6; }

/* Eyebrow */
.wvx-hh-eyebrow {
	margin: 0 0 14px;
	font-size: 12px; font-weight: 600;
	letter-spacing: 0.34em; text-transform: uppercase;
	color: rgba(169,180,248,0.7);
}

/* Heading */
.wvx-hh-title {
	margin: 0 0 18px;
	font-size: clamp(34px, 6.2vw, 72px);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.06;
	color: #FFFFFF;
	text-wrap: balance;
}
.wvx-hh-acc { font-style: normal; color: #8B7CF6; }
.wvx-hh-accgrad-yes .wvx-hh-acc {
	--wvx-ga: #8B5CF6; --wvx-gb: #4D7CFE;
	background: linear-gradient(95deg, var(--wvx-ga), var(--wvx-gb));
	-webkit-background-clip: text; background-clip: text;
	color: transparent;
}

/* Typewriter */
.wvx-hh-type {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.35em;
	margin: 0 0 18px;
	font-size: clamp(20px, 2.8vw, 30px);
	font-weight: 750;
	letter-spacing: -0.02em;
	line-height: 1.2;
	min-height: 1.3em;
}
.wvx-hh-type-pre { color: #FFFFFF; }
.wvx-hh-type-word { color: #6C8CFE; white-space: pre; }
.wvx-hh-cursor { color: #FFFFFF; font-weight: 400; animation: wvx-hh-blink 900ms steps(1) infinite; }
@keyframes wvx-hh-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* Description */
.wvx-hh-desc {
	margin: 0 0 26px;
	max-width: 62ch;
	font-size: clamp(15px, 1.8vw, 17.5px);
	line-height: 1.65;
	color: rgba(255,255,255,0.62);
}

/* Buttons */
.wvx-hh-btns { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; margin: 0; }
.wvx-hh-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
	font-size: 15px; font-weight: 600; line-height: 1;
	padding: 14px 28px;
	border-radius: 10px;
	border: 1px solid transparent;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.wvx-hh-btn:active { transform: translateY(0) scale(0.97); }
.wvx-hh-btn i { font-size: 12px; transition: transform 0.25s ease; }
.wvx-hh-btn svg { width: 12px; height: 12px; fill: currentColor; transition: transform 0.25s ease; }
.wvx-hh-btn:hover i, .wvx-hh-btn:hover svg { transform: translateX(3px); }
.wvx-hh-btn--1 { color: #FFFFFF; background: #6C5CE8; box-shadow: 0 6px 24px rgba(108,92,232,0.35); }
.wvx-hh-btn--1:hover { background: #7C6CF6; box-shadow: 0 10px 34px rgba(108,92,232,0.5); transform: translateY(-2px); color: #FFFFFF; }
.wvx-hh-btn--2 { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); }
.wvx-hh-btn--2:hover { border-color: rgba(124,92,246,0.6); color: #FFFFFF; transform: translateY(-2px); }

/* ── Industry marquee ─────────────────────────
   8 copies of the item set + a 50% translate = the track is always far
   wider than any viewport, so the loop never shows a gap or an "end". */
.wvx-hh-marq {
	position: relative;
	z-index: 1;
	width: 100%;
	margin-top: 36px;
}
.wvx-hh-dist-spread .wvx-hh-marq { margin-top: auto; padding-top: 24px; }
.wvx-hh-bleed-yes .wvx-hh-marq {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.wvx-hh-mhead {
	text-align: center;
	font-size: 13px; font-weight: 600;
	letter-spacing: 0.3em; text-transform: uppercase;
	color: rgba(255,255,255,0.85);
	margin-bottom: 22px;
	padding: 0 20px;
}
.wvx-hh-viewport { overflow: hidden; width: 100%; }
.wvx-hh-track {
	display: flex;
	width: max-content;
	gap: 16px;
	padding-right: 16px;
	animation: wvx-hh-marq 30s linear infinite;
	will-change: transform;
}
.wvx-hh-set { display: flex; gap: inherit; flex: none; }
@keyframes wvx-hh-marq { to { transform: translateX(-50%); } }
.wvx-hh-mpause-yes .wvx-hh-viewport:hover .wvx-hh-track { animation-play-state: paused; }
.wvx-hh-mfade-yes .wvx-hh-viewport {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.wvx-hh-pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	white-space: nowrap;
	flex: none;
	font-size: 14px; font-weight: 600;
	color: #FFFFFF;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 12px;
	padding: 12px 22px;
	line-height: 1;
}
.wvx-hh-pill i { font-size: 13px; }
.wvx-hh-pill svg { width: 13px; height: 13px; fill: currentColor; }

/* ── Scroll indicator ── */
.wvx-hh-si {
	position: relative;
	z-index: 1;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	margin-top: 28px;
	text-decoration: none;
	color: rgba(255,255,255,0.45);
}
.wvx-hh-si span { font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; }
.wvx-hh-si-arr { font-style: normal; line-height: 1; animation: wvx-hh-bounce 1.6s ease-in-out infinite; }
.wvx-hh-si-arr i { font-size: 13px; color: rgba(255,255,255,0.62); }
.wvx-hh-si-arr svg { width: 13px; height: 13px; fill: rgba(255,255,255,0.62); }
@keyframes wvx-hh-bounce {
	0%, 100% { transform: translateY(0); opacity: 0.55; }
	50%      { transform: translateY(7px); opacity: 1; }
}

/* ── Entrance animation (staggered rise on load) ── */
@keyframes wvx-hh-rise {
	from { opacity: 0; transform: translateY(var(--wvx-hh-adist, 24px)); }
	to   { opacity: 1; transform: translateY(0); }
}
.wvx-hh-anim-yes .wvx-hh-a {
	opacity: 0;
	animation: wvx-hh-rise var(--wvx-hh-adur, 700ms) cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
	animation-delay: calc(var(--wvx-hh-astep, 90ms) * var(--n, 0));
}

/* ── Viewport-fit compression on short screens ── */
@media (max-height: 800px) {
	.wvx-hh { padding-top: 70px; }
	.wvx-hh-title { font-size: clamp(30px, 5.4vw, 56px); margin-bottom: 14px; }
	.wvx-hh-badge { margin-bottom: 14px; }
	.wvx-hh-eyebrow { margin-bottom: 10px; }
	.wvx-hh-type { margin-bottom: 14px; font-size: clamp(18px, 2.4vw, 26px); }
	.wvx-hh-desc { margin-bottom: 20px; }
	.wvx-hh-marq { margin-top: 26px; }
	.wvx-hh-mhead { margin-bottom: 14px; }
	.wvx-hh-si { margin-top: 18px; }
}
@media (max-height: 660px) {
	.wvx-hh { padding-top: 62px; }
	.wvx-hh-title { font-size: clamp(26px, 4.8vw, 44px); }
	.wvx-hh-desc { font-size: 13.5px; margin-bottom: 14px; }
	.wvx-hh-btn { padding: 11px 22px; font-size: 14px; }
	.wvx-hh-pill { padding: 9px 16px; font-size: 12.5px; }
	.wvx-hh-marq { margin-top: 16px; }
	.wvx-hh-si { margin-top: 12px; }
}

/* ── Tablet / mobile ── */
@media (max-width: 1024px) {
	.wvx-hh { padding-top: 76px; }
}
@media (max-width: 767px) {
	.wvx-hh { padding: 72px 16px 16px; }
	.wvx-hh-btns { width: 100%; }
	.wvx-hh-btn { flex: 1 1 auto; justify-content: center; }
	.wvx-hh-pill { font-size: 12.5px; padding: 10px 16px; }
	.wvx-hh-mhead { letter-spacing: 0.2em; font-size: 11px; }
	.wvx-hh-type { flex-wrap: wrap; }
	.wvx-hh-title { margin-bottom: 14px; }
	.wvx-hh-desc { margin-bottom: 20px; }
	.wvx-hh-marq { margin-top: 26px; }
}

@media (prefers-reduced-motion: reduce) {
	.wvx-hh-track { animation: none; }
	.wvx-hh-cursor { animation: none; opacity: 1; }
	.wvx-hh-si-arr { animation: none; }
	.wvx-hh-btn { transition: none; }
	.wvx-hh-anim-yes .wvx-hh-a { opacity: 1; animation: none; }
}