/* =========================================================================
   Vix Elements — design system
   Extracted from vixmediagroup.com: dark canvas, purple accent, Space
   Grotesk headings, Inter body, 9px base grid, 20px card radius.
   ========================================================================= */

:root {
	--vix-bg: #0f120a;
	--vix-bg-alt: #0b0d08;
	--vix-surface: #1f1a29;
	--vix-surface-2: rgba(31, 26, 41, 0.5);
	--vix-border: rgba(255, 255, 255, 0.08);
	--vix-border-strong: rgba(255, 255, 255, 0.14);
	--vix-text: #d9d9d9;
	--vix-text-dim: #999999;
	--vix-white: #ffffff;
	--vix-accent: #ad83ff;
	--vix-accent-deep: #6c39d0;
	--vix-glow: #ad83ff;
	--vix-off-white: #fdfdfd;
	--vix-surface-soft: rgba(31, 26, 41, 0.2);
	--vix-ink-deep: #12042c;
	--vix-purple-800: #330b7e;
	--vix-purple-700: #4616a3;
	--vix-purple-600: #6c39d0;
	/* Signature reference card fill: transparent top-left fading into the
	   purple-tinted charcoal surface. */
	--vix-glass: linear-gradient(135deg, rgba(229, 227, 234, 0), #1f1a29);
	--vix-grad-purple: linear-gradient(#4616a3, #ad83ff);

	--vix-max: 1318px;
	--vix-gutter: 20px;

	--vix-radius: 20px;
	--vix-radius-sm: 12px;
	--vix-radius-pill: 100px;

	--vix-s1: 9px;
	--vix-s2: 18px;
	--vix-s3: 27px;
	--vix-s4: 36px;
	--vix-s5: 45px;
	--vix-s6: 63px;
	--vix-s7: 90px;
	--vix-s8: 133px;

	--vix-font-head: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
	--vix-font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

	--vix-shadow-card: rgba(0, 0, 0, 0.5) 0 16px 48px 0;
	--vix-shadow-inset: rgba(255, 255, 255, 0.06) 0 1px 0 0 inset, rgba(0, 0, 0, 0.25) 0 4px 24px 0;
	--vix-shadow-deep: rgba(255, 255, 255, 0.22) 0 1.5px 0 0 inset, rgba(0, 0, 0, 0.5) 0 20px 64px 0;

	--vix-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* -------------------------------------------------------------------------
   Section shell
   ---------------------------------------------------------------------- */

.vix-section {
	position: relative;
	width: 100%;
	/* clip, not hidden: hidden would kill position:sticky in descendants. */
	overflow: clip;
	background-color: var(--vix-bg);
	color: var(--vix-text);
	font-family: var(--vix-font-body);
	font-size: 18px;
	line-height: 27px;
	letter-spacing: -0.36px;
	padding: var(--vix-s8) var(--vix-gutter);
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}

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

.vix-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--vix-max);
	margin: 0 auto;
}

/* Purple ambient glow */
.vix-section::before,
.vix-section::after {
	content: "";
	position: absolute;
	left: 50%;
	width: min(1100px, 130%);
	height: 620px;
	transform: translateX(-50%);
	background: radial-gradient(closest-side, var(--vix-glow), transparent 72%);
	opacity: 0;
	pointer-events: none;
	z-index: 1;
	transition: opacity 0.6s var(--vix-ease);
}

.vix-section::before {
	top: -360px;
}

.vix-section::after {
	bottom: -400px;
}

.vix-glow-top .vix-section::before,
.vix-glow-both .vix-section::before {
	opacity: 0.22;
}

.vix-glow-bottom .vix-section::after,
.vix-glow-both .vix-section::after {
	opacity: 0.26;
}

/* -------------------------------------------------------------------------
   Typography primitives
   ---------------------------------------------------------------------- */

/* Kept inside :where() so component classes below win on source order
   instead of losing to this reset's element-selector specificity. */
.vix-section :where(h1, h2, h3, h4) {
	font-family: var(--vix-font-head);
	font-weight: 500;
	color: var(--vix-white);
	margin: 0;
}

.vix-section :where(p, figure) {
	margin: 0;
}

.vix-section :where(ul, ol, blockquote) {
	margin: 0;
	padding: 0;
}

.vix-section :where(a) {
	color: inherit;
	text-decoration: none;
}

.vix-section em {
	font-style: normal;
	color: var(--vix-accent);
}

.vix-eyebrow {
	display: inline-block;
	font-family: var(--vix-font-body);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vix-accent);
	margin-bottom: var(--vix-s3);
}

.vix-head {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.vix-head--center {
	text-align: center;
}

.vix-head--left {
	text-align: left;
}

.vix-head__title strong {
	color: var(--vix-white);
	font-weight: 700;
}

.vix-head__title {
	/* Reference h2: 3.4375rem / 90.9% / -3.3px. The clamp floor is raised so
	   phones keep the reference's 3rem display size instead of collapsing. */
	font-size: clamp(42px, 4.6vw, 55px);
	line-height: 0.94;
	letter-spacing: -0.06em;
}

.vix-head__desc {
	margin: var(--vix-s3) auto 0;
	max-width: 640px;
	font-size: 18px;
	line-height: 27px;
	color: var(--vix-text-dim);
}

/* Left aligned heads hug the container edge instead of centring their block. */
.vix-head--left {
	margin-left: 0;
	margin-right: 0;
	max-width: 780px;
}

.vix-head--left .vix-head__desc {
	margin-left: 0;
	margin-right: 0;
}

/* -------------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------- */

.vix-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vix-s1);
	font-family: var(--vix-font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: -0.01em;
	padding: 16px 32px;
	border-radius: var(--vix-radius-pill);
	border: 1px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: transform 0.25s var(--vix-ease), background-color 0.25s var(--vix-ease),
		border-color 0.25s var(--vix-ease), color 0.25s var(--vix-ease), box-shadow 0.25s var(--vix-ease);
}

.vix-btn:hover {
	transform: translateY(-2px);
}

.vix-btn--solid {
	background: var(--vix-white);
	color: #0f120a;
	border-color: #fdfdfd;
}

.vix-btn--solid:hover {
	background: var(--vix-accent);
	border-color: var(--vix-accent);
	color: #120c22;
	box-shadow: 0 12px 32px rgba(173, 131, 255, 0.32);
}

.vix-btn--outline {
	background: rgba(253, 253, 253, 0.08);
	color: var(--vix-off-white);
	border-color: rgba(253, 253, 253, 0.16);
}

.vix-btn--outline:hover {
	background: rgba(253, 253, 253, 0.14);
	border-color: rgba(253, 253, 253, 0.28);
}

/* Compact pill — reference .button base padding, used inside the nav bar. */
.vix-btn--sm {
	padding: 9px 15px;
}

.vix-btn--ghost {
	background: rgba(255, 255, 255, 0.04);
	color: var(--vix-text);
	border-color: var(--vix-border);
}

.vix-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--vix-white);
}

.vix-btn--sm {
	font-size: 14px;
	padding: 9px 18px;
}

.vix-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vix-s2);
	margin-top: var(--vix-s5);
}

.vix-head--center ~ .vix-actions,
.vix-actions--center {
	justify-content: center;
}

.vix-head--left ~ .vix-actions {
	justify-content: flex-start;
}

.vix-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 500;
	color: var(--vix-accent);
	transition: gap 0.25s var(--vix-ease);
}

.vix-link:hover {
	gap: 14px;
}

.vix-link svg {
	width: 14px;
	height: 14px;
}

/* -------------------------------------------------------------------------
   Card surface
   ---------------------------------------------------------------------- */

.vix-card {
	position: relative;
	/* Colour and sheen are split across two properties on purpose: the
	   Elementor "Card Background" control writes background-color, so the
	   reference's diagonal glass gradient has to live in background-image
	   or the panel control would have no visible effect. */
	background-color: var(--vix-surface);
	background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
	border: 1px solid var(--vix-border);
	border-radius: var(--vix-radius);
	padding: var(--vix-s4);
	box-shadow: var(--vix-shadow-inset);
	overflow: hidden;
	transition: transform 0.35s var(--vix-ease), border-color 0.35s var(--vix-ease),
		box-shadow 0.35s var(--vix-ease);
}

.vix-card:hover {
	transform: translateY(-4px);
	border-color: rgba(173, 131, 255, 0.35);
	box-shadow: var(--vix-shadow-card);
}

.vix-card__title {
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: -0.03em;
}

.vix-card__desc {
	margin-top: var(--vix-s2);
	font-size: 16px;
	line-height: 25px;
	color: var(--vix-text-dim);
}

.vix-grid {
	display: grid;
	gap: var(--vix-s3);
}

.vix-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	font-size: 13px;
	line-height: 1;
	color: var(--vix-text);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--vix-border);
	border-radius: var(--vix-radius-pill);
}

/* -------------------------------------------------------------------------
   1. Hero
   ---------------------------------------------------------------------- */

.vix-hero {
	text-align: center;
	padding-top: 210px;
	isolation: isolate;
}

.vix-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--vix-s1);
	padding: 8px 16px 8px 8px;
	border: 1px solid var(--vix-border);
	border-radius: var(--vix-radius-pill);
	background: rgba(255, 255, 255, 0.04);
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vix-text);
	margin-bottom: var(--vix-s4);
}

.vix-hero__badge img {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	object-fit: cover;
}

.vix-hero__badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--vix-accent);
	box-shadow: 0 0 0 4px rgba(173, 131, 255, 0.18);
}

.vix-hero__title {
	font-size: clamp(44px, 6.4vw, 80px);
	line-height: 0.9;
	letter-spacing: -0.06em;
	color: var(--vix-white);
	max-width: 15ch;
	margin: 0 auto;
}

.vix-hero__sub {
	margin: var(--vix-s3) auto 0;
	max-width: 620px;
	font-size: 18px;
	line-height: 28px;
	color: var(--vix-text-dim);
}

.vix-hero__actions {
	justify-content: center;
}

.vix-hero__media {
	position: relative;
	margin-top: var(--vix-s7);
	border-radius: var(--vix-radius);
	border: 1px solid var(--vix-border);
	background: linear-gradient(180deg, rgba(173, 131, 255, 0.16), rgba(15, 18, 10, 0.2));
	padding: var(--vix-s1);
	box-shadow: var(--vix-shadow-deep);
}

.vix-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: calc(var(--vix-radius) - 6px);
}

.vix-hero__media::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 38%;
	background: linear-gradient(180deg, transparent, var(--vix-bg) 92%);
	pointer-events: none;
	border-radius: 0 0 var(--vix-radius) var(--vix-radius);
}

.vix-hero--no-fade .vix-hero__media::after {
	display: none;
}

/* -------------------------------------------------------------------------
   2. Logo marquee / trust bar
   ---------------------------------------------------------------------- */

.vix-trust {
	text-align: center;
}

/* .star-wrapper on the reference: 10px gap, 8px below, gold SVG stars. */
.vix-stars {
	display: flex;
	gap: 10px;
	justify-content: center;
	align-items: center;
	margin-bottom: 8px;
	color: #ffb22e;
	line-height: 1;
}

.vix-stars svg {
	display: block;
}

/* Their h2.heading-style-h5.font-family-helviteca, not a small caps label. */
.vix-trust__title {
	margin: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 25px;
	letter-spacing: -1.2px;
	text-align: center;
	color: var(--vix-white);
	text-transform: none;
}

/* Kept for the footer badge row, which still uses plain text labels. */
.vix-trust__label {
	display: block;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vix-text-dim);
}

.vix-marquee {
	position: relative;
	height: 80px;
	margin-top: 32px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.vix-marquee__track {
	display: flex;
	align-items: center;
	gap: 60px;
	width: max-content;
	animation: vix-scroll var(--vix-marquee-speed, 34s) linear infinite;
}

.vix-marquee:hover .vix-marquee__track {
	animation-play-state: paused;
}

.vix-marquee__item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 80px;
	height: 80px;
	opacity: 0.8;
}

.vix-marquee__item img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
	transition: opacity 0.3s var(--vix-ease);
}

.vix-marquee__item:hover {
	opacity: 1;
}

/* The edge fade belongs to the scrolling marquee only - on a static row it
   clips the first and last labels. */
.vix-logos--static .vix-marquee,
.vix-marquee.vix-logos--static {
	-webkit-mask-image: none;
	mask-image: none;
}

.vix-logos--static .vix-marquee__track {
	animation: none;
	width: 100%;
	justify-content: space-between;
	flex-wrap: wrap;
	row-gap: var(--vix-s4);
}

@keyframes vix-scroll {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

/* -------------------------------------------------------------------------
   3. Feature columns
   ---------------------------------------------------------------------- */

.vix-cols {
	margin-top: var(--vix-s7);
	display: grid;
	grid-template-columns: repeat(var(--vix-cols, 3), minmax(0, 1fr));
	gap: var(--vix-s5);
}

.vix-col {
	padding-top: var(--vix-s3);
	border-top: 1px solid var(--vix-border-strong);
	transition: border-color 0.35s var(--vix-ease);
}

.vix-col:hover {
	border-top-color: var(--vix-accent);
}

.vix-col__index {
	display: block;
	font-family: var(--vix-font-head);
	font-size: 13px;
	color: var(--vix-accent);
	margin-bottom: var(--vix-s2);
}

.vix-col__title {
	font-size: 20px;
	line-height: 25px;
	letter-spacing: -0.045em;
	color: var(--vix-white);
}

.vix-col__desc {
	margin-top: 12px;
	font-size: 16px;
	line-height: 25px;
	color: var(--vix-text-dim);
}

/* -------------------------------------------------------------------------
   4. Bento grid
   ---------------------------------------------------------------------- */

.vix-bento {
	margin-top: var(--vix-s6);
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--vix-s3);
}

.vix-bento .vix-card {
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	gap: var(--vix-s3);
}

.vix-bento .vix-card--half {
	grid-column: span 3;
}

.vix-bento .vix-card--full {
	grid-column: span 6;
}

.vix-bento .vix-card--full .vix-card__body {
	max-width: 46%;
}

.vix-bento .vix-card--full {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--vix-s5);
}

.vix-card__media {
	position: relative;
	border-radius: var(--vix-radius-sm);
	overflow: hidden;
	background: linear-gradient(160deg, rgba(173, 131, 255, 0.12), rgba(23, 22, 26, 0.5));
	border: 1px solid var(--vix-border);
	min-height: 168px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
}

.vix-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Visual sits above the copy on standard cards, beside it on full cards. */
.vix-bento .vix-card__media {
	order: -1;
	flex: 0 0 auto;
}

.vix-bento .vix-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.vix-bento .vix-card--full .vix-card__media {
	order: 2;
	flex: 0 0 48%;
	min-height: 220px;
	align-self: stretch;
}

.vix-card__list {
	margin: var(--vix-s2) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.vix-card__list li {
	position: relative;
	padding-left: 22px;
	font-size: 15px;
	line-height: 24px;
	color: var(--vix-text-dim);
}

.vix-card__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--vix-accent);
}

.vix-card__foot {
	margin-top: auto;
	padding-top: var(--vix-s2);
}

/* -------------------------------------------------------------------------
   5. Services grid
   ---------------------------------------------------------------------- */

.vix-services__grid {
	margin-top: var(--vix-s6);
	display: grid;
	grid-template-columns: repeat(var(--vix-service-cols, 3), minmax(0, 1fr));
	gap: var(--vix-s3);
}

.vix-service {
	display: flex;
	flex-direction: column;
	min-height: 300px;
}

.vix-service__media {
	flex: 1 1 auto;
	border-radius: var(--vix-radius-sm);
	overflow: hidden;
	background: radial-gradient(120% 100% at 50% 0%, rgba(173, 131, 255, 0.14), rgba(19, 18, 21, 0.6));
	border: 1px solid var(--vix-border);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--vix-s3);
	min-height: 150px;
}

.vix-service__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Sits over the generated artwork as a badge rather than colliding with it. */
.vix-service__media {
	position: relative;
}

.vix-service__stat {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	font-family: var(--vix-font-head);
	font-size: 20px;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--vix-white);
	padding: 8px 14px;
	border-radius: var(--vix-radius-pill);
	background: rgba(12, 10, 18, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.12);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.vix-service__stat span {
	color: var(--vix-accent);
}

.vix-service__title {
	font-size: 19px;
	line-height: 1.3;
	letter-spacing: -0.035em;
	color: var(--vix-white);
}

.vix-service__desc {
	margin-top: 8px;
	font-size: 15px;
	line-height: 24px;
	color: var(--vix-text-dim);
}

/* -------------------------------------------------------------------------
   6. Integrations
   ---------------------------------------------------------------------- */

.vix-integrations__visual {
	position: relative;
	margin-top: var(--vix-s6);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 280px;
}

.vix-integrations__visual img {
	max-width: 100%;
	height: auto;
	display: block;
}

.vix-lattice {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 14px;
	width: min(760px, 100%);
	transform: perspective(1200px) rotateX(52deg) rotateZ(-45deg);
	transform-style: preserve-3d;
}

.vix-lattice span {
	aspect-ratio: 1;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.02);
}

.vix-lattice span.is-hot {
	background: linear-gradient(160deg, var(--vix-accent), var(--vix-accent-deep));
	border-color: transparent;
	box-shadow: 0 0 34px rgba(173, 131, 255, 0.55);
}

.vix-integrations__cards {
	margin-top: var(--vix-s6);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vix-s3);
}

/* -------------------------------------------------------------------------
   7. Case studies - sticky intro column beside a stack of cards
   ---------------------------------------------------------------------- */

.vix-cases-split {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: var(--vix-s7);
	align-items: start;
}

.vix-cases__intro--sticky {
	position: sticky;
	top: 130px;
}

.vix-cases__intro .vix-head {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}

.vix-actions--tight {
	margin-top: var(--vix-s3);
}

.vix-cases__list {
	display: grid;
	gap: var(--vix-s4);
}

.vix-case {
	display: block;
	padding: var(--vix-s3);
	background-color: var(--vix-surface);
}

.vix-case__logo {
	display: flex;
	align-items: center;
	min-height: 40px;
	margin-bottom: var(--vix-s3);
}

.vix-case__logo img {
	max-height: 40px;
	width: auto;
}

/* Stand-in for a real client logo until one is uploaded. */
.vix-case__logo span {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 20px;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.82);
}

.vix-case__title {
	font-size: clamp(19px, 1.5vw, 24px);
	line-height: 1.3;
	letter-spacing: -0.02em;
	font-weight: 400;
	color: var(--vix-text);
}

.vix-case__title strong {
	color: var(--vix-white);
	font-weight: 700;
}

.vix-case__media {
	margin: var(--vix-s3) 0;
	border-radius: var(--vix-radius-sm);
	overflow: hidden;
	border: 1px solid var(--vix-border);
	background: rgba(255, 255, 255, 0.03);
	aspect-ratio: 16 / 10;
}

.vix-case__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s var(--vix-ease);
}

.vix-case:hover .vix-case__media img {
	transform: scale(1.04);
}

.vix-case__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: var(--vix-s3);
}

.vix-chip {
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	border-radius: 9px;
	background: #ffffff;
	color: #12101a;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
}

.vix-case__desc {
	font-size: 16px;
	line-height: 26px;
	color: var(--vix-text-dim);
}

.vix-case__desc strong {
	color: var(--vix-white);
	font-weight: 600;
}

.vix-case__checks {
	list-style: none;
	margin: var(--vix-s3) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 11px 16px;
}

.vix-case__checks li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	line-height: 1.3;
	color: var(--vix-text);
}

.vix-case__checks svg {
	flex: 0 0 auto;
	color: var(--vix-accent);
}

.vix-case__foot {
	margin-top: var(--vix-s3);
}

/* -------------------------------------------------------------------------
   8. Testimonials - intro column beside a scroll-snap slider
   ---------------------------------------------------------------------- */

.vix-quotes-split {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: var(--vix-s6);
	align-items: start;
}

.vix-quotes__intro .vix-head {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}

.vix-quotes__controls {
	display: flex;
	gap: 12px;
	margin-top: var(--vix-s4);
}

.vix-quotes__nav {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--vix-purple-600);
	background-image: var(--vix-grad-purple);
	color: var(--vix-white);
	cursor: pointer;
	transition: background-color 0.25s var(--vix-ease), border-color 0.25s var(--vix-ease),
		transform 0.25s var(--vix-ease), opacity 0.25s var(--vix-ease);
}

.vix-quotes__nav[data-vix-slide="prev"] svg {
	transform: none;
}

.vix-quotes__nav:hover {
	background-image: linear-gradient(var(--vix-purple-600), var(--vix-accent));
	color: var(--vix-ink-deep);
	transform: translateY(-2px);
}

.vix-quotes__nav[disabled] {
	opacity: 0.32;
	cursor: default;
	transform: none;
}

.vix-quotes__viewport {
	position: relative;
	min-width: 0;
}

.vix-quotes__track {
	display: flex;
	gap: var(--vix-s3);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 4px;
}

.vix-quotes__track::-webkit-scrollbar {
	display: none;
}

.vix-quotes__track:focus-visible {
	outline: 2px solid var(--vix-accent);
	outline-offset: 6px;
	border-radius: var(--vix-radius);
}

.vix-quotes__slide {
	flex: 0 0 420px;
	max-width: 100%;
	scroll-snap-align: start;
	display: flex;
}

.vix-quote {
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: var(--vix-surface);
}

.vix-quote__media {
	border-radius: var(--vix-radius-sm);
	overflow: hidden;
	margin-bottom: var(--vix-s3);
	aspect-ratio: 4 / 3;
}

.vix-quote__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vix-quote__text {
	font-family: var(--vix-font-head);
	font-size: 18px;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var(--vix-white);
}

.vix-quote__stars {
	color: #ffb648;
	font-size: 14px;
	letter-spacing: 2px;
	margin-bottom: var(--vix-s2);
	display: block;
}

.vix-quote__person {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: auto;
	padding-top: var(--vix-s3);
}

.vix-quote__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.vix-quote__name {
	font-size: 15px;
	font-weight: 500;
	color: var(--vix-white);
	display: block;
}

.vix-quote__role {
	font-size: 13px;
	color: var(--vix-text-dim);
	display: block;
	margin-top: 2px;
}

.vix-quote .vix-link {
	margin-top: var(--vix-s2);
	align-self: flex-start;
}

.vix-quotes__bar {
	position: relative;
	height: 3px;
	margin-top: var(--vix-s4);
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.09);
	overflow: hidden;
}

.vix-quotes__bar i {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 30%;
	border-radius: 100px;
	background: var(--vix-accent);
	transition: transform 0.15s linear, width 0.2s var(--vix-ease);
}

@media (prefers-reduced-motion: reduce) {
	.vix-quotes__track {
		scroll-behavior: auto;
	}
}

@media (max-width: 991px) {
	.vix-quotes-split {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--vix-s4);
	}
}

@media (max-width: 767px) {
	.vix-quotes__slide {
		flex-basis: 84%;
	}
}

/* -------------------------------------------------------------------------
   9. CTA
   ---------------------------------------------------------------------- */

.vix-cta {
	text-align: center;
}

.vix-cta__title {
	font-size: clamp(34px, 5.6vw, 71px);
	line-height: 0.98;
	letter-spacing: -0.055em;
	color: var(--vix-white);
	max-width: 16ch;
	margin: 0 auto;
}

.vix-cta__sub {
	margin: var(--vix-s3) auto 0;
	max-width: 560px;
	color: var(--vix-text-dim);
}

.vix-cta__actions {
	justify-content: center;
}

/* -------------------------------------------------------------------------
   10. Footer
   ---------------------------------------------------------------------- */

.vix-footer {
	padding-bottom: var(--vix-s4);
}

.vix-footer__cols {
	display: grid;
	grid-template-columns: repeat(var(--vix-footer-cols, 5), minmax(0, 1fr));
	gap: var(--vix-s5);
}

.vix-footer__title {
	font-family: var(--vix-font-body);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--vix-white);
	margin-bottom: var(--vix-s2);
	display: block;
}

.vix-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.vix-footer__links a {
	font-size: 14px;
	font-weight: 300;
	color: var(--vix-text-dim);
	transition: color 0.25s var(--vix-ease);
}

.vix-footer__links a:hover {
	color: var(--vix-accent);
}

.vix-footer__logos {
	margin-top: var(--vix-s6);
	padding-top: var(--vix-s4);
	border-top: 1px solid var(--vix-border);
}

.vix-footer__bar {
	margin-top: var(--vix-s5);
	padding-top: var(--vix-s3);
	border-top: 1px solid var(--vix-border);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vix-s3);
}

.vix-footer__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--vix-font-head);
	font-size: 20px;
	letter-spacing: -0.04em;
	color: var(--vix-white);
}

.vix-footer__brand img {
	height: 28px;
	width: auto;
}

.vix-footer__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vix-s2);
	font-size: 14px;
	color: var(--vix-text-dim);
}

.vix-footer__meta a:hover {
	color: var(--vix-accent);
}

.vix-footer__note {
	width: 100%;
	font-size: 13px;
	color: #6a6a6a;
}

/* -------------------------------------------------------------------------
   Reveal on scroll
   ---------------------------------------------------------------------- */

/* Gated on .vix-js so a JS failure can never leave a section invisible. */
.vix-js .vix-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s var(--vix-ease), transform 0.7s var(--vix-ease);
}

.vix-js .vix-reveal.is-in,
.elementor-editor-active .vix-reveal {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.vix-js .vix-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.vix-marquee__track {
		animation: none;
	}
}

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */

@media (max-width: 991px) {
	.vix-section {
		padding: var(--vix-s7) var(--vix-s3);
	}

	.vix-cols,
	.vix-services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vix-bento {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.vix-bento .vix-card,
	.vix-bento .vix-card--half {
		grid-column: span 2;
	}

	.vix-bento .vix-card--full {
		grid-column: span 4;
	}

	.vix-footer__cols {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.vix-section {
		padding: var(--vix-s6) var(--vix-s2);
	}

	.vix-cols,
	.vix-services__grid,
	.vix-integrations__cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.vix-bento,
	.vix-bento .vix-card,
	.vix-bento .vix-card--half,
	.vix-bento .vix-card--full {
		grid-template-columns: minmax(0, 1fr);
		grid-column: auto;
	}

	.vix-bento .vix-card--full {
		flex-direction: column;
		align-items: stretch;
	}

	.vix-bento .vix-card--full .vix-card__body,
	.vix-bento .vix-card--full .vix-card__media {
		max-width: none;
		flex: 1 1 auto;
	}

	.vix-case__checks {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vix-hero__media {
		margin-top: var(--vix-s5);
	}

	.vix-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vix-btn {
		padding: 14px 22px;
		min-height: 44px;
	}

	.vix-marquee__track {
		gap: var(--vix-s5);
	}
}


/* -------------------------------------------------------------------------
   11. Nav bar
   ---------------------------------------------------------------------- */

.vix-nav {
	padding: var(--vix-s2) var(--vix-s3);
	overflow: visible;
}

/* Fixed rather than sticky: the widget's Elementor container is only as tall
   as the nav, so a sticky element would have no room to travel. */
.vix-nav--sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 400;
	background-color: transparent;
}

/* Keep the editor canvas sane - a fixed nav fights the drag handles. */
body.elementor-editor-active .vix-nav--sticky {
	position: relative;
}

.vix-nav__inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--vix-s3);
	width: 100%;
	max-width: var(--vix-max);
	margin: 0 auto;
	padding: 10px 10px 10px 22px;
	background-color: rgba(15, 18, 10, 0.72);
	border: 1px solid var(--vix-border);
	border-radius: var(--vix-radius-pill);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	box-shadow: var(--vix-shadow-inset);
}

.vix-nav__brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--vix-font-head);
	font-size: 20px;
	letter-spacing: -0.05em;
	color: var(--vix-white);
	flex: 0 0 auto;
}

.vix-nav__brand img {
	height: 24px;
	width: auto;
	display: block;
}

.vix-nav__menu {
	display: flex;
	align-items: center;
	gap: var(--vix-s1);
	list-style: none;
	margin: 0 auto 0 var(--vix-s3);
	padding: 0;
}

.vix-nav__item {
	position: relative;
}

.vix-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 14px;
	border-radius: var(--vix-radius-pill);
	font-family: var(--vix-font-body);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.01em;
	color: var(--vix-text);
	white-space: nowrap;
	transition: color 0.25s var(--vix-ease), background-color 0.25s var(--vix-ease);
}

.vix-nav__link:hover {
	color: var(--vix-white);
	background: rgba(255, 255, 255, 0.06);
}

.vix-nav__link svg {
	width: 12px;
	height: 12px;
	transition: transform 0.25s var(--vix-ease);
}

.vix-nav__item--has-drop:hover .vix-nav__link svg,
.vix-nav__item--has-drop.is-open .vix-nav__link svg {
	transform: rotate(180deg);
}

.vix-nav__drop {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	transform: translate(-50%, 8px);
	min-width: 460px;
	padding: var(--vix-s2);
	background: var(--vix-surface);
	border: 1px solid var(--vix-border);
	border-radius: var(--vix-radius);
	box-shadow: var(--vix-shadow-card);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s var(--vix-ease), transform 0.25s var(--vix-ease), visibility 0.25s;
}

.vix-nav__item--has-drop:hover .vix-nav__drop,
.vix-nav__item--has-drop:focus-within .vix-nav__drop,
.vix-nav__item--has-drop.is-open .vix-nav__drop {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

.vix-nav__drop ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px 10px;
}

.vix-nav__drop a {
	display: block;
	padding: 9px 12px;
	border-radius: var(--vix-radius-sm);
	font-size: 14px;
	color: var(--vix-text-dim);
	transition: color 0.2s var(--vix-ease), background-color 0.2s var(--vix-ease);
}

.vix-nav__drop a:hover {
	color: var(--vix-white);
	background: rgba(255, 255, 255, 0.05);
}

.vix-nav__actions {
	display: flex;
	align-items: center;
	gap: var(--vix-s1);
	flex: 0 0 auto;
	margin-left: auto;
}

.vix-nav__actions .vix-btn {
	padding: 11px 20px;
	font-size: 14px;
}

.vix-nav__toggle {
	display: none;
	position: relative;
	width: 42px;
	height: 42px;
	margin-left: auto;
	padding: 0;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--vix-border);
	border-radius: 50%;
	cursor: pointer;
}

.vix-nav__toggle-bar,
.vix-nav__toggle-bar::before,
.vix-nav__toggle-bar::after {
	position: absolute;
	left: 50%;
	width: 16px;
	height: 1.5px;
	background: var(--vix-text);
	transform: translateX(-50%);
	transition: transform 0.25s var(--vix-ease), opacity 0.25s var(--vix-ease);
}

.vix-nav__toggle-bar {
	top: 50%;
	margin-top: -0.75px;
}

.vix-nav__toggle-bar::before,
.vix-nav__toggle-bar::after {
	content: "";
	left: 0;
	transform: none;
}

.vix-nav__toggle-bar::before {
	top: -5px;
}

.vix-nav__toggle-bar::after {
	top: 5px;
}

.vix-nav.is-open .vix-nav__toggle-bar {
	background: transparent;
}

.vix-nav.is-open .vix-nav__toggle-bar::before {
	transform: translateY(5px) rotate(45deg);
}

.vix-nav.is-open .vix-nav__toggle-bar::after {
	transform: translateY(-5px) rotate(-45deg);
}

/* -------------------------------------------------------------------------
   Small additions to existing blocks
   ---------------------------------------------------------------------- */

.vix-col__link,
.vix-service__link {
	margin-top: var(--vix-s2);
}

.vix-col__link {
	display: inline-flex;
}

.vix-service__link {
	display: inline-flex;
	font-size: 14px;
}

.vix-case__meta {
	display: block;
	margin: -14px 0 var(--vix-s2);
	font-size: 13px;
	color: var(--vix-text-dim);
}

.vix-footer__note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vix-s1) var(--vix-s3);
}

.vix-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vix-s1) var(--vix-s2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.vix-footer__legal a {
	font-size: 13px;
	color: #6a6a6a;
	transition: color 0.25s var(--vix-ease);
}

.vix-footer__legal a:hover {
	color: var(--vix-accent);
}

/* -------------------------------------------------------------------------
   Nav responsive
   ---------------------------------------------------------------------- */

@media (max-width: 991px) {
	.vix-nav__toggle {
		display: block;
	}

	.vix-nav__inner {
		flex-wrap: wrap;
		border-radius: var(--vix-radius);
		padding: 10px 10px 10px 18px;
	}

	.vix-nav__menu {
		display: none;
		order: 3;
		width: 100%;
		margin: var(--vix-s2) 0 0;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	.vix-nav__actions {
		order: 4;
		width: 100%;
		margin: var(--vix-s2) 0 var(--vix-s1);
		justify-content: flex-start;
		display: none;
	}

	.vix-nav.is-open .vix-nav__menu,
	.vix-nav.is-open .vix-nav__actions {
		display: flex;
	}

	.vix-nav__link {
		justify-content: space-between;
		width: 100%;
	}

	.vix-nav__drop {
		position: static;
		transform: none;
		min-width: 0;
		width: 100%;
		margin-top: 4px;
		box-shadow: none;
		background: rgba(255, 255, 255, 0.03);
		display: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.vix-nav__item--has-drop.is-open .vix-nav__drop {
		display: block;
		transform: none;
	}

	.vix-nav__item--has-drop:hover .vix-nav__drop {
		display: none;
	}

	.vix-nav__item--has-drop.is-open:hover .vix-nav__drop {
		display: block;
	}

	.vix-nav__drop ul {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* -------------------------------------------------------------------------
   12. Hero dashboard mockup
   ---------------------------------------------------------------------- */

.vix-hero__media--dash {
	padding: 0;
	background: linear-gradient(180deg, rgba(173, 131, 255, 0.32), rgba(15, 18, 10, 0.1));
	perspective: 1600px;
}

.vix-hero__media--dash::after {
	display: none;
}

.vix-dash {
	display: flex;
	min-height: 520px;
	border-radius: calc(var(--vix-radius) - 2px);
	overflow: hidden;
	background: #100d17;
	border: 1px solid rgba(255, 255, 255, 0.07);
	font-size: 12px;
	text-align: left;
	transform-style: preserve-3d;
	transition: transform 0.4s var(--vix-ease);
}

.vix-dash__side {
	flex: 0 0 186px;
	padding: 20px 14px;
	border-right: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(255, 255, 255, 0.015);
}

.vix-dash__brand {
	display: block;
	font-family: var(--vix-font-head);
	font-size: 20px;
	letter-spacing: -0.05em;
	color: var(--vix-white);
	padding: 0 10px 20px;
}

.vix-dash__nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 3px;
}

.vix-dash__nav li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 8px;
	color: #8b8698;
	font-size: 12px;
}

.vix-dash__nav li span {
	width: 13px;
	height: 13px;
	border-radius: 4px;
	border: 1px solid currentColor;
	opacity: 0.45;
	flex: 0 0 auto;
}

.vix-dash__nav li.is-active {
	background: rgba(255, 255, 255, 0.07);
	color: var(--vix-white);
}

.vix-dash__nav li.is-active span {
	background: var(--vix-accent);
	border-color: var(--vix-accent);
	opacity: 1;
}

.vix-dash__main {
	flex: 1 1 auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.vix-dash__bar {
	display: flex;
	align-items: center;
	gap: 12px;
}

.vix-dash__search {
	flex: 1 1 auto;
	padding: 9px 14px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.03);
	color: #726d80;
	max-width: 300px;
}

.vix-dash__dots {
	margin-left: auto;
	display: flex;
	gap: 8px;
}

.vix-dash__dots i {
	width: 15px;
	height: 15px;
	border-radius: 4px;
	border: 1px solid rgba(255, 255, 255, 0.16);
}

.vix-dash__avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 10px;
	font-weight: 600;
	color: #1a1024;
	background: linear-gradient(150deg, #d3b9ff, var(--vix-accent));
}

.vix-dash__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.vix-dash__stat {
	position: relative;
	padding: 14px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	background: rgba(255, 255, 255, 0.02);
	min-height: 172px;
	display: flex;
	flex-direction: column;
}

.vix-dash__label {
	font-size: 9px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #7d7789;
}

.vix-dash__value {
	display: block;
	margin-top: 4px;
	font-family: var(--vix-font-head);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.03em;
	color: var(--vix-white);
}

.vix-dash__delta {
	position: absolute;
	top: 14px;
	right: 14px;
	font-size: 10px;
	color: #6ee7a8;
}

.vix-dash__bars {
	margin-top: auto;
	display: flex;
	align-items: flex-end;
	gap: 6px;
	height: 84px;
}

.vix-dash__bars i {
	flex: 1 1 auto;
	height: var(--h, 50%);
	border-radius: 4px;
	background: linear-gradient(180deg, #cbb0ff, var(--vix-accent));
	transform-origin: bottom;
	transform: scaleY(0);
	transition: transform 0.9s var(--vix-ease);
}

.vix-dash__bars--full i {
	background: linear-gradient(180deg, #ffffff 0 22%, var(--vix-accent) 22%);
}

.is-in .vix-dash__bars i,
.elementor-editor-active .vix-dash__bars i {
	transform: scaleY(1);
}

.vix-dash__bars i:nth-child(2) { transition-delay: 40ms; }
.vix-dash__bars i:nth-child(3) { transition-delay: 80ms; }
.vix-dash__bars i:nth-child(4) { transition-delay: 120ms; }
.vix-dash__bars i:nth-child(5) { transition-delay: 160ms; }
.vix-dash__bars i:nth-child(6) { transition-delay: 200ms; }
.vix-dash__bars i:nth-child(7) { transition-delay: 240ms; }
.vix-dash__bars i:nth-child(8) { transition-delay: 280ms; }
.vix-dash__bars i:nth-child(9) { transition-delay: 320ms; }
.vix-dash__bars i:nth-child(10) { transition-delay: 360ms; }

.vix-dash__chart {
	flex: 0 0 auto;
	padding: 14px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	background: rgba(255, 255, 255, 0.02);
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 200px;
}

.vix-dash__chart-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--vix-white);
}

.vix-dash__pill {
	padding: 5px 11px;
	border-radius: 100px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: #8b8698;
	font-size: 10px;
}

.vix-dash__plot {
	position: relative;
	flex: 0 0 auto;
	height: 178px;
	padding: 0 0 18px 34px;
}

.vix-dash__plot svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}

.vix-dash__plot::before {
	content: "";
	position: absolute;
	inset: 0 0 18px 34px;
	background-image: repeating-linear-gradient(
		to top,
		rgba(255, 255, 255, 0.06) 0 1px,
		transparent 1px 20%
	);
	pointer-events: none;
}

.vix-dash__y,
.vix-dash__x {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	font-size: 9px;
	color: #6b6577;
}

.vix-dash__y {
	top: 0;
	bottom: 18px;
	left: 0;
	width: 30px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.vix-dash__x {
	left: 34px;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: space-between;
}

.vix-dash__crosshair {
	stroke: rgba(255, 255, 255, 0.28);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.vix-dash__line {
	stroke-dasharray: 400;
	stroke-dashoffset: 400;
	transition: stroke-dashoffset 2.2s var(--vix-ease);
}

.is-in .vix-dash__line,
.elementor-editor-active .vix-dash__line {
	stroke-dashoffset: 0;
}

.vix-dash__area {
	opacity: 0;
	transition: opacity 1.2s var(--vix-ease) 0.5s;
}

.is-in .vix-dash__area,
.elementor-editor-active .vix-dash__area {
	opacity: 1;
}

@media (max-width: 767px) {
	.vix-dash__side {
		display: none;
	}

	.vix-dash__stats {
		grid-template-columns: minmax(0, 1fr);
	}

	.vix-dash {
		min-height: 0;
	}
}

/* -------------------------------------------------------------------------
   13. Generated card artwork (used when a card has no image)
   ---------------------------------------------------------------------- */

.vix-art {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: inherit;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	gap: 6px;
	padding: 18px;
}

.vix-art::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 90% at 50% 0%, rgba(173, 131, 255, 0.18), transparent 72%);
}

/* 1 - bar chart */
.vix-art[data-art="1"] i {
	position: relative;
	flex: 1 1 auto;
	height: var(--h, 40%);
	border-radius: 4px;
	background: linear-gradient(180deg, #d9c4ff, var(--vix-accent));
	opacity: 0.9;
}

/* 2 - stacked rows */
.vix-art[data-art="2"] {
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 9px;
}

.vix-art[data-art="2"] i {
	position: relative;
	height: 12px;
	border-radius: 100px;
	width: var(--h, 60%);
	background: linear-gradient(90deg, var(--vix-accent), rgba(173, 131, 255, 0.15));
}

/* 3 - browser window */
.vix-art[data-art="3"] {
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 8px;
}

.vix-art[data-art="3"] i {
	position: relative;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.08);
	height: 10px;
	width: var(--h, 100%);
}

.vix-art[data-art="3"] i:first-child {
	height: 22px;
	background: rgba(255, 255, 255, 0.12);
}

/* 4 - orbit rings */
.vix-art[data-art="4"] {
	align-items: center;
	justify-content: center;
}

.vix-art[data-art="4"] i {
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.12);
	width: var(--h);
	height: var(--h);
}

.vix-art[data-art="4"] i:first-child {
	border-color: var(--vix-accent);
	box-shadow: 0 0 40px rgba(173, 131, 255, 0.45);
}

/* 5 - node grid */
.vix-art[data-art="5"] {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	align-content: center;
}

.vix-art[data-art="5"] i {
	position: relative;
	aspect-ratio: 1;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.vix-art[data-art="5"] i:nth-child(3n) {
	background: linear-gradient(150deg, #cbb0ff, var(--vix-accent));
	border-color: transparent;
}

/* -------------------------------------------------------------------------
   14. Interactions
   ---------------------------------------------------------------------- */

/* Nav condenses once the page is scrolled. */
.vix-nav__inner {
	transition: background-color 0.35s var(--vix-ease), border-color 0.35s var(--vix-ease),
		padding 0.35s var(--vix-ease), box-shadow 0.35s var(--vix-ease);
}

.vix-nav.is-scrolled .vix-nav__inner {
	background-color: rgba(12, 10, 18, 0.92);
	border-color: rgba(255, 255, 255, 0.12);
	padding-top: 6px;
	padding-bottom: 6px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}

/* Cursor spotlight on cards. */
.vix-card::after,
.vix-service::after,
.vix-case::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(
		260px circle at var(--vix-mx, 50%) var(--vix-my, 0%),
		rgba(173, 131, 255, 0.16),
		transparent 68%
	);
	opacity: 0;
	transition: opacity 0.35s var(--vix-ease);
	pointer-events: none;
	z-index: 0;
}

.vix-card:hover::after,
.vix-service:hover::after,
.vix-case:hover::after {
	opacity: 1;
}

.vix-card > *,
.vix-service > *,
.vix-case > * {
	position: relative;
	z-index: 1;
}

/* Shine sweep across solid buttons. */
.vix-btn {
	position: relative;
	overflow: hidden;
}

.vix-btn::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 40%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
	transform: skewX(-18deg);
	opacity: 0;
	pointer-events: none;
}

.vix-btn--outline::after,
.vix-btn--ghost::after {
	background: linear-gradient(90deg, transparent, rgba(173, 131, 255, 0.35), transparent);
}

.vix-btn:hover::after {
	opacity: 1;
	animation: vix-shine 0.75s var(--vix-ease);
}

@keyframes vix-shine {
	from { left: -60%; }
	to { left: 120%; }
}

/* Lattice tiles breathe. */
.vix-lattice span.is-hot {
	animation: vix-pulse 3.2s var(--vix-ease) infinite;
}

.vix-lattice span.is-hot:nth-of-type(2n) { animation-delay: 0.5s; }
.vix-lattice span.is-hot:nth-of-type(3n) { animation-delay: 1.1s; }

@keyframes vix-pulse {
	0%, 100% {
		transform: translateZ(0);
		box-shadow: 0 0 26px rgba(173, 131, 255, 0.4);
	}
	50% {
		transform: translateZ(26px);
		box-shadow: 0 0 52px rgba(173, 131, 255, 0.75);
	}
}

.vix-lattice span {
	transition: transform 0.6s var(--vix-ease), background-color 0.6s var(--vix-ease);
}

.vix-lattice:hover span:not(.is-hot) {
	background: rgba(255, 255, 255, 0.05);
}

@media (prefers-reduced-motion: reduce) {
	.vix-lattice span.is-hot,
	.vix-btn:hover::after {
		animation: none;
	}

	.vix-dash__bars i,
	.vix-dash__line,
	.vix-dash__area {
		transition: none;
	}
}


/* -------------------------------------------------------------------------
   15. Hero bloom + grid (the reference's defining light)
   ---------------------------------------------------------------------- */

/* The generic section glow is far too weak to read here. */
.vix-glow-top .vix-hero.vix-section::before {
	opacity: 0;
}

.vix-hero__bloom {
	position: absolute;
	top: -430px;
	left: 50%;
	width: min(1800px, 155%);
	height: 830px;
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(38% 34% at 50% 46%, rgba(246, 182, 255, 1), rgba(244, 178, 255, 0) 66%),
		radial-gradient(56% 46% at 50% 50%, rgba(172, 100, 255, 0.82), rgba(170, 98, 255, 0) 68%),
		radial-gradient(82% 60% at 50% 54%, rgba(96, 42, 192, 0.52), rgba(92, 40, 186, 0) 72%);
	filter: blur(12px);
}

/* A second, wider halo keeps the falloff smooth into the page background. */
.vix-hero__bloom::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(70% 58% at 50% 30%, rgba(173, 131, 255, 0.42), transparent 74%);
}

/* -------------------------------------------------------------------------
   16. Nav: two separate pills, wordmark, roomier type
   ---------------------------------------------------------------------- */

.vix-nav__inner {
	background-color: transparent !important;
	border: 0;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	padding: 0;
	gap: var(--vix-s2);
	align-items: stretch;
}

.vix-nav__group {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 9px 12px 9px 26px;
	border-radius: var(--vix-radius-pill);
	background: rgba(18, 15, 26, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.09);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0 0 inset;
	transition: background-color 0.35s var(--vix-ease), border-color 0.35s var(--vix-ease);
}

.vix-nav__group--main {
	flex: 0 1 auto;
	min-width: 0;
}

.vix-nav__actions {
	flex: 0 0 auto;
	margin-left: auto;
	padding-right: 8px;
}

.vix-nav.is-scrolled .vix-nav__group {
	background: rgba(12, 10, 18, 0.9);
	border-color: rgba(255, 255, 255, 0.14);
}

.vix-nav__brand {
	margin-right: var(--vix-s4);
	color: var(--vix-white);
}

.vix-nav__mark {
	display: block;
	height: 25px;
	width: auto;
}

.vix-nav__menu {
	margin: 0;
	gap: 2px;
}

.vix-nav__link {
	font-size: 16px;
	font-weight: 400;
	padding: 10px 18px;
	color: var(--vix-white);
}

.vix-nav__link svg {
	width: 11px;
	height: 11px;
	opacity: 0.75;
}

.vix-nav__item--has-drop:hover .vix-nav__link svg,
.vix-nav__item--has-drop.is-open .vix-nav__link svg {
	transform: rotate(90deg);
}

.vix-nav__actions .vix-nav__link {
	padding: 10px 16px;
}

.vix-nav__actions .vix-btn {
	padding: 13px 24px;
	font-size: 15px;
}

/* -------------------------------------------------------------------------
   17. Hero type + text-link CTA
   ---------------------------------------------------------------------- */

.vix-hero__kicker {
	display: block;
	font-family: var(--vix-font-head);
	font-size: clamp(20px, 2.1vw, 32px);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(232, 228, 240, 0.82);
	margin-bottom: var(--vix-s4);
}

.vix-hero__title {
	font-size: clamp(38px, 5.6vw, 92px);
	max-width: 26ch;
	line-height: 1;
}

.vix-hero__sub {
	max-width: 760px;
	font-size: 19px;
}

.vix-hero__sub strong {
	color: var(--vix-white);
	font-weight: 600;
}

.vix-hero__actions {
	gap: var(--vix-s1);
	margin-top: var(--vix-s4);
}

.vix-btn--link {
	background: transparent;
	border-color: transparent;
	color: var(--vix-white);
	padding: 15px 20px;
}

.vix-btn--link:hover {
	background: rgba(255, 255, 255, 0.06);
	transform: none;
}

.vix-btn--link svg {
	opacity: 0.8;
	transition: transform 0.25s var(--vix-ease);
}

.vix-btn--link:hover svg {
	transform: translateX(3px);
}

.vix-hero__media,
.vix-hero__media--dash {
	z-index: 2;
}

@media (max-width: 991px) {
	.vix-nav__group--main {
		flex: 1 1 auto;
		flex-wrap: wrap;
	}

	.vix-nav__actions {
		display: none;
	}

	.vix-nav.is-open .vix-nav__actions {
		display: flex;
		width: 100%;
		margin-left: 0;
	}
}

@media (max-width: 767px) {
	.vix-hero {
		padding-top: 150px;
	}

	.vix-hero__bloom {
		height: 620px;
		top: -220px;
	}
}

.vix-nav__actions .vix-btn--solid > span::after {
	content: "›";
	margin-left: 9px;
	opacity: 0.55;
	font-size: 1.2em;
	vertical-align: -0.06em;
}


@media (max-width: 991px) {
	.vix-cases-split {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: var(--vix-s5);
	}

	.vix-cases__intro--sticky {
		position: static;
	}
}


/* -------------------------------------------------------------------------
   18. Testimonial slide details, measured from the reference
   ---------------------------------------------------------------------- */

/* Stars read white there, not gold. */
.vix-quote__stars {
	color: var(--vix-white);
	font-size: 15px;
	letter-spacing: 3px;
}

.vix-quote__text {
	font-size: 20px;
	line-height: 1.55;
}

.vix-quote__text::before {
	content: open-quote;
}

.vix-quote__text::after {
	content: close-quote;
}

.vix-quote__person {
	align-items: flex-start;
	gap: 16px;
}

/* Rounded square, not a circle. */
.vix-quote__avatar {
	width: 62px;
	height: 62px;
	border-radius: 10px;
}

.vix-quote__name {
	font-size: 17px;
	font-weight: 600;
}

/* Role is accent coloured on the reference. */
.vix-quote__role {
	color: var(--vix-accent);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	margin-top: 4px;
}

.vix-quote__person .vix-quote__stars {
	margin: 8px 0 0;
	font-size: 13px;
}

/* -------------------------------------------------------------------------
   19. Purple arc sweeping between the CTA and the footer
   ---------------------------------------------------------------------- */

.vix-footer {
	position: relative;
	padding-top: 330px;
}

/* A ring, not a disc: only the band near the ellipse edge is painted, so what
   shows above the footer is the sweeping curve itself. */
.vix-footer__arc {
	position: absolute;
	top: 30px;
	left: 50%;
	width: 230%;
	height: 2200px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(
		closest-side,
		rgba(120, 58, 210, 0) 0 82%,
		rgba(146, 74, 235, 0.65) 90%,
		rgba(168, 96, 255, 0.85) 96%,
		rgba(120, 58, 210, 0) 100%
	);
	filter: blur(14px);
	pointer-events: none;
	z-index: 0;
}

.vix-footer .vix-container {
	z-index: 2;
}

/* -------------------------------------------------------------------------
   20. Footer contact row as separate outlined boxes
   ---------------------------------------------------------------------- */

.vix-footer__contact {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--vix-s2);
	margin-top: var(--vix-s5);
}

.vix-footer__box {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 22px;
	border: 1px solid var(--vix-border);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.02);
	color: var(--vix-text);
	font-size: 15px;
	min-height: 74px;
	transition: border-color 0.25s var(--vix-ease), background-color 0.25s var(--vix-ease);
}

.vix-footer__box:hover {
	border-color: rgba(173, 131, 255, 0.45);
	background: rgba(255, 255, 255, 0.04);
}

.vix-footer__box svg {
	flex: 0 0 auto;
	opacity: 0.75;
}

.vix-footer__box-sep {
	width: 1px;
	align-self: stretch;
	background: var(--vix-border);
}

.vix-footer__box--cta {
	justify-content: space-between;
}

.vix-footer__box--cta strong {
	display: block;
	color: var(--vix-white);
	font-size: 16px;
	font-weight: 600;
}

.vix-footer__box--cta span {
	display: block;
	color: var(--vix-text-dim);
	font-size: 14px;
	margin-top: 2px;
}

.vix-footer__box--login {
	justify-content: center;
	font-weight: 600;
	color: var(--vix-white);
}

@media (max-width: 991px) {
	.vix-footer__contact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 479px) {
	.vix-footer__contact {
		grid-template-columns: minmax(0, 1fr);
	}

	.vix-footer {
		padding-top: 140px;
	}
}


/* -------------------------------------------------------------------------
   21. Hero eyebrow rotator and the curve behind the dashboard
   ---------------------------------------------------------------------- */

.vix-hero__kicker {
	position: relative;
	display: block;
	min-height: 1.15em;
}

.vix-hero__kicker-line {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.55s var(--vix-ease);
	pointer-events: none;
}

.vix-hero__kicker-line.is-active {
	opacity: 1;
}

/* Static fallback: with one line only, keep it in flow. */
.vix-hero__kicker:not([data-vix-rotate]) .vix-hero__kicker-line {
	position: static;
	transform: none;
	white-space: normal;
	opacity: 1;
}

/* The reference wraps its dashboard in a .hero-curve; this is that arc. */
.vix-hero__curve {
	position: absolute;
	left: 50%;
	top: 52%;
	width: 210%;
	height: 1500px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(
		closest-side,
		rgba(120, 58, 210, 0) 0 78%,
		rgba(140, 70, 226, 0.5) 88%,
		rgba(176, 108, 255, 0.72) 95%,
		rgba(120, 58, 210, 0) 100%
	);
	filter: blur(26px);
	pointer-events: none;
	z-index: 1;
}

@media (max-width: 767px) {
	.vix-hero__curve {
		height: 800px;
		top: 56%;
	}

	.vix-hero__kicker-line {
		white-space: normal;
		width: 100%;
	}
}

/* Text badge stand-in until real certification artwork is supplied. */
.vix-marquee__item .vix-trust__label {
	white-space: nowrap;
	padding: 10px 18px;
	border: 1px solid var(--vix-border);
	border-radius: 10px;
	font-size: 11px;
	letter-spacing: 0.09em;
	color: rgba(255, 255, 255, 0.72);
}

/* =========================================================================
   Inner pages — Industries, Solutions, Contact
   Card recipe and hover states transcribed from the reference stylesheet
   (.glass-effect, .grid3, .button:hover, .menu-sublink-2:hover).
   ========================================================================= */

.vix-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
   Reference hover states
   ---------------------------------------------------------------------- */

/* .button:hover — the white pill hollows out rather than changing hue. */
.vix-btn {
	transition: all 0.2s;
}

.vix-btn:hover {
	transform: none;
}

.vix-btn--solid:hover {
	background: transparent;
	color: var(--vix-off-white);
	border-color: var(--vix-off-white);
	box-shadow: none;
}

/* .button.is-secondary:hover */
.vix-btn--outline:hover {
	background: transparent;
	color: var(--vix-white);
	border-color: rgba(253, 253, 253, 0.28);
}

/* .nav-link:hover */
.vix-nav__link:hover {
	color: rgba(255, 255, 255, 0.65);
	background: transparent;
}

/* .footer-link:hover — links brighten to white. */
.vix-footer__links a:hover,
.vix-footer__meta a:hover,
.vix-footer__legal a:hover {
	color: var(--vix-white);
}

/* .menu-sublink-2:hover — deep violet wash plus an arrow that slides in. */
.vix-nav__drop a {
	padding-left: 1.5em;
	padding-right: 2.5em;
	background-repeat: no-repeat;
	background-position: 90%;
	background-size: 0;
	transition: all 0.22s var(--vix-ease);
}

.vix-nav__drop a:hover {
	color: var(--vix-white);
	background-color: rgba(10, 3, 24, 0.8);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.5 2.5 8 6l-3.5 3.5' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: 1em;
	background-position: 91%;
	padding-left: 1.8em;
	padding-right: 2.8em;
}

/* -------------------------------------------------------------------------
   Page hero
   ---------------------------------------------------------------------- */

.vix-phero .vix-container {
	text-align: center;
}

.vix-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--vix-s1);
	margin-bottom: var(--vix-s4);
	font-family: var(--vix-font-body);
	font-size: 14px;
	line-height: 21px;
	color: rgba(255, 255, 255, 0.65);
}

.vix-crumbs__link {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s var(--vix-ease);
}

.vix-crumbs__link:hover {
	color: var(--vix-white);
}

.vix-crumbs__sep {
	opacity: 0.45;
}

.vix-crumbs__here {
	color: var(--vix-white);
}

.vix-phero .vix-head__title {
	font-size: clamp(44px, 5.6vw, 71px);
	line-height: 0.9;
	letter-spacing: -0.06em;
}

.vix-phero .vix-head__desc {
	max-width: 680px;
}

.vix-phero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--vix-s2);
	margin-top: var(--vix-s5);
}

/* -------------------------------------------------------------------------
   Glass card shared by the three inner-page grids
   ---------------------------------------------------------------------- */

.vix-ind,
.vix-sol,
.vix-cmethod {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--vix-s3);
	/* .glass-effect */
	background-color: var(--vix-surface-soft);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--vix-radius);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 24px rgba(0, 0, 0, 0.25);
	overflow: hidden;
	transition: transform 0.35s var(--vix-ease), border-color 0.35s var(--vix-ease),
		background-color 0.35s var(--vix-ease), box-shadow 0.35s var(--vix-ease);
}

.vix-ind:hover,
.vix-sol:hover,
.vix-cmethod:hover {
	transform: translateY(-4px);
	background-color: rgba(31, 26, 41, 0.5);
	border-color: rgba(255, 255, 255, 0.16);
	box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.22), 0 20px 64px rgba(0, 0, 0, 0.5);
}

.vix-inds__grid,
.vix-sols__grid,
.vix-contact__grid {
	display: grid;
	gap: 24px;
	margin-top: var(--vix-s6);
}

/* The overlay turns the whole card into one click target while the visible
   arrow link keeps its own hover. */
.vix-ind__overlay,
.vix-sol__overlay,
.vix-cmethod__overlay {
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
}

/* -------------------------------------------------------------------------
   Industries grid
   ---------------------------------------------------------------------- */

.vix-ind__thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: var(--vix-radius);
	overflow: hidden;
	margin-bottom: var(--vix-s3);
	background: rgba(255, 255, 255, 0.03);
}

.vix-ind__thumb img,
.vix-sol__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s var(--vix-ease);
}

.vix-ind:hover .vix-ind__thumb img,
.vix-sol:hover .vix-sol__thumb img {
	transform: scale(1.04);
}

.vix-ind__title {
	font-family: var(--vix-font-head);
	font-size: 31px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.045em;
	color: var(--vix-white);
}

/* .spacer-small */
.vix-ind__desc {
	margin-top: 20px;
	font-size: 14px;
	font-weight: 300;
	line-height: 21px;
	color: var(--vix-text);
}

/* .button.without-bg — no chrome, and the gap opens up on hover. */
.vix-ind__more,
.vix-sol__more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 500;
	line-height: 16px;
	color: var(--vix-white);
	transition: gap 0.2s, color 0.2s;
}

.vix-ind:hover .vix-ind__more,
.vix-sol:hover .vix-sol__more {
	gap: 15px;
	color: var(--vix-accent);
}

/* Push the arrow row to the bottom so uneven copy still lines up. */
.vix-ind__more {
	margin-top: auto;
	padding-top: var(--vix-s3);
}

/* -------------------------------------------------------------------------
   Solutions grid
   ---------------------------------------------------------------------- */

.vix-sol {
	flex-direction: row;
	gap: var(--vix-s3);
	align-items: flex-start;
}

.vix-sol__thumb {
	flex: 0 0 96px;
	width: 96px;
	height: 96px;
	border-radius: var(--vix-radius-sm);
	overflow: hidden;
	background: rgba(255, 255, 255, 0.03);
}

.vix-sol__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.vix-sol__title {
	font-family: var(--vix-font-head);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.035em;
	color: var(--vix-white);
}

.vix-sol__desc {
	margin-top: 12px;
	font-size: 14px;
	font-weight: 300;
	line-height: 21px;
	color: var(--vix-text);
}

.vix-sol__more {
	margin-top: var(--vix-s2);
}

/* -------------------------------------------------------------------------
   Contact methods
   ---------------------------------------------------------------------- */

.vix-cmethod {
	align-items: flex-start;
	gap: var(--vix-s2);
	padding: var(--vix-s4);
}

.vix-cmethod__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: var(--vix-accent);
	background: rgba(173, 131, 255, 0.12);
	border: 1px solid rgba(173, 131, 255, 0.25);
	transition: background-color 0.3s var(--vix-ease), color 0.3s var(--vix-ease);
}

.vix-cmethod:hover .vix-cmethod__icon {
	background: var(--vix-accent);
	color: var(--vix-ink-deep);
}

.vix-cmethod__title {
	font-family: var(--vix-font-head);
	font-size: 20px;
	font-weight: 500;
	line-height: 25px;
	letter-spacing: -0.04em;
	color: var(--vix-white);
}

.vix-cmethod__value {
	font-size: 16px;
	line-height: 24px;
	color: var(--vix-text);
	word-break: break-word;
}

/* -------------------------------------------------------------------------
   Responsive — reference breakpoints
   ---------------------------------------------------------------------- */

@media (max-width: 991px) {
	.vix-inds__grid,
	.vix-sols__grid,
	.vix-contact__grid {
		gap: var(--vix-s2);
	}

	.vix-ind__title {
		font-size: 28px;
	}
}

@media (max-width: 767px) {
	.vix-sol {
		flex-direction: column;
	}

	.vix-sol__thumb {
		flex: none;
		width: 100%;
		height: 140px;
	}

	.vix-phero__actions {
		gap: var(--vix-s1);
	}
}

/* =========================================================================
   One continuous canvas
   The reference pages are a single flat #0f120a body with transparent
   sections and one soft light at the top right (.nav-right / top-light.svg).
   Per-section radial blobs are what made every slab read differently, so the
   glow defaults are off and the ambient light lives on the page hero only.
   ========================================================================= */

/* Reference .page-hero — far tighter than the homepage hero. */
.vix-phero {
	padding-top: 100px;
	padding-bottom: 60px;
}


/* Reference .section-small — the inner-page card grids sit tighter than a
   full homepage section. */
.vix-section--tight {
	padding-top: 89px;
	padding-bottom: 89px;
}

/* Stacked Solutions pillars should read as one run, not three slabs. */
.elementor-widget-vix-solutions + .elementor-widget-vix-solutions .vix-section--tight {
	padding-top: 0;
}

/* Space the grid off its heading only when the widget actually has one —
   render_header() prints nothing at all when every field is empty. */
.vix-head + .vix-inds__grid,
.vix-head + .vix-sols__grid,
.vix-head + .vix-contact__grid {
	margin-top: var(--vix-s5);
}

.vix-inds__grid,
.vix-sols__grid,
.vix-contact__grid {
	margin-top: 0;
}

@media (max-width: 991px) {
	.vix-phero {
		padding-top: 60px;
		padding-bottom: 40px;
	}

	.vix-section--tight {
		padding-top: 64px;
		padding-bottom: 64px;
	}
}

/* =========================================================================
   Page-top backdrop — dashed grid + purple light beams
   Replaces the centred radial blob. The reference paints its page top with
   two layers: a 100.77px dashed grid faded out by an alpha mask, and three
   overlapping blurred light cones running #4616A3 -> #AD83FF.
   ========================================================================= */

.vix-backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.vix-backdrop__grid {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 836px;
}

/* The hero already clips, so the grid simply runs out at the section edge the
   way the reference's mask fades it. */
.vix-phero {
	padding-top: 100px;
	padding-bottom: 60px;
}

@media (max-width: 991px) {
	.vix-phero {
		padding-top: 84px;
		padding-bottom: 40px;
	}


	.vix-backdrop__grid {
		height: 600px;
	}
}

/* =========================================================================
   Page hero — measured against the reference at a 1191px viewport
   Breadcrumb lands at y=283, H1 at y=330 on two lines, lead copy at y=490,
   buttons at y=583. The nav is fixed, so the hero carries the whole offset.
   ========================================================================= */

.vix-phero {
	padding-top: 283px;
	padding-bottom: 60px;
}

/* The beams are a thin wash at the very top, not a bloom behind the headline.

.vix-backdrop__grid {
	height: 620px;
}

/* Reference h1: 4.44444rem / 90% / -4.2px, rising to 5rem past 1280px.
   The max-width is what breaks "Marketing Solutions" onto its own line. */
.vix-phero .vix-head {
	max-width: 700px;
}

.vix-phero .vix-head__title {
	font-size: 4.44444rem;
	line-height: 0.9;
	letter-spacing: -4.2px;
}

@media (min-width: 1280px) {
	.vix-phero .vix-head__title {
		font-size: 5rem;
		letter-spacing: -4.8px;
	}

	.vix-phero .vix-head {
		max-width: 780px;
	}
}

/* Lead copy: first line bold white, the rest regular. Matches the reference's
   <strong> first line followed by a 15px spacer. */
.vix-phero .vix-head__desc {
	margin-top: 30px;
	max-width: 760px;
	font-size: 18px;
	line-height: 27px;
	color: var(--vix-text);
}

.vix-phero .vix-head__desc strong {
	display: block;
	margin-bottom: 15px;
	color: var(--vix-white);
	font-weight: 600;
}

.vix-phero__actions {
	margin-top: 30px;
	gap: 1.25rem;
}

/* Breadcrumb: white current-trail links, a thin accent bar between them and
   the current page painted in the accent colour. */
.vix-crumbs {
	gap: 14px;
	margin-bottom: 30px;
	font-size: 15px;
	line-height: 21px;
	font-weight: 500;
}

.vix-crumbs__link {
	color: var(--vix-white);
}

.vix-crumbs__link:hover {
	color: rgba(255, 255, 255, 0.65);
}

.vix-crumbs__here {
	color: var(--vix-accent);
}

.vix-crumbs__sep {
	width: 1px;
	height: 14px;
	background: var(--vix-accent);
	opacity: 1;
	font-size: 0;
	line-height: 0;
}

/* The nav pill sits over the beams, so it needs a near-opaque ground or the
   light washes straight through it the way it did in the first pass. */
.vix-nav {
	padding: 42px 20px 10px;
}

.vix-nav__inner {
	max-width: none;
	background-color: rgba(18, 16, 24, 0.94);
}

/* -------------------------------------------------------------------------
   Inner-page cards — the reference cards are far darker than a lit surface
   ---------------------------------------------------------------------- */

.vix-ind,
.vix-sol,
.vix-cmethod {
	background-color: rgba(24, 22, 31, 0.72);
	background-image: none;
}

.vix-ind:hover,
.vix-sol:hover,
.vix-cmethod:hover {
	background-color: rgba(31, 26, 41, 0.9);
}

@media (max-width: 991px) {
	.vix-phero {
		padding-top: 200px;
		padding-bottom: 40px;
	}

	.vix-phero .vix-head__title {
		font-size: 4rem;
		letter-spacing: -3.8px;
	}

}

@media (max-width: 767px) {
	.vix-phero {
		padding-top: 150px;
	}

	.vix-phero .vix-head__title {
		font-size: 2.75rem;
		letter-spacing: -2px;
	}
}

/* Beams measured against the reference: a thin wash confined to the top edge,
   gone well before the breadcrumb. The first pass was twice this tall and

/* Near-opaque so the light behind it cannot wash the pill out. */
.vix-nav__inner {
	background-color: rgba(18, 16, 24, 0.97);
}

/* nl2br() adds a <br> after the bold lead line, which doubled up with the
   block display. The block alone carries the break. */
.vix-phero .vix-head__desc strong + br {
	display: none;
}

/* Measured against the reference at 1191px: the whole hero block sat 10px low. */
.vix-phero {
	padding-top: 273px;
}

/* =========================================================================
   Top light — the reference artwork, placed the way the reference places it:
   .nav-top pinned to the top edge at its natural 1266x198, .nav-right pinned
   to the top right at 725x198. They overlap in the middle, which is what
   gives the centre its brighter magenta core.
   ========================================================================= */

.vix-backdrop__light {
	position: absolute;
	top: 0;
	z-index: 0;
	display: block;
	max-width: none;
	pointer-events: none;
}

.vix-backdrop__light--top {
	left: 0;
}

.vix-backdrop__light--right {
	right: 0;
}

@media (max-width: 991px) {
	.vix-backdrop__light--top {
		left: -40px;
		max-width: 310px;
	}

	.vix-backdrop__light--right {
		max-width: 420px;
	}
}

/* The nav sits in the same 1318px container as the page content — the two
   pills are pushed apart inside it, not spread across the full viewport. */
.vix-nav__inner {
	max-width: var(--vix-max);
}

/* The industries CTA is a real pill in the reference, so it inherits .vix-btn
   and only needs its own placement plus the card-driven hover. */
.vix-ind__more {
	align-self: flex-start;
	margin-top: auto;
	padding: 9px 15px;
	font-size: 14px;
	line-height: 16px;
	gap: 10px;
	color: var(--vix-ink-deep);
}

.vix-ind:hover .vix-ind__more {
	gap: 15px;
	background: transparent;
	color: var(--vix-off-white);
	border-color: var(--vix-off-white);
}

/* Give the arrow row breathing space above it now that it is a button. */
.vix-ind__desc {
	margin-bottom: var(--vix-s3);
}

/* =========================================================================
   Contact page — transcribed from the reference markup
   .sub-tag glass pill, h1 at .highlighted size, .new-column contact columns
   and the CTA boxed in .get-project.glass-effect.
   ========================================================================= */

/* .sub-tag.larger2.glass-effect — the eyebrow as a pill, not bare text. */
.vix-eyebrow--badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 20px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--vix-white);
	background-color: rgba(31, 26, 41, 0.5);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--vix-radius-pill);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 24px rgba(0, 0, 0, 0.25);
}

/* h1.heading-style-h2.highlighted — 4rem, below the Industries display size. */
.vix-h1-compact .vix-head {
	max-width: none;
}

.vix-h1-compact .vix-head__title {
	font-size: 4rem;
	letter-spacing: -0.055em;
}

@media (min-width: 1280px) {
	.vix-h1-compact .vix-head__title {
		font-size: 4rem;
		letter-spacing: -0.055em;
	}

	.vix-h1-compact .vix-head {
		max-width: none;
	}
}

@media (max-width: 991px) {
	.vix-h1-compact .vix-head__title {
		font-size: 3rem;
		letter-spacing: -0.05em;
	}
}

/* -------------------------------------------------------------------------
   Contact columns — .new-column.glass-effect
   ---------------------------------------------------------------------- */

.vix-contact__grid {
	gap: 40px;
}

.vix-cmethod {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	/* Reference .new-column: a deep top well above the content. */
	padding: 60px 20px 20px;
	text-decoration: none;
}

.vix-cmethod__icon {
	display: block;
	width: 60px;
	height: 60px;
	margin-bottom: var(--vix-s3);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--vix-accent);
	transition: color 0.3s var(--vix-ease), transform 0.3s var(--vix-ease);
}

.vix-cmethod:hover .vix-cmethod__icon {
	background: none;
	color: var(--vix-white);
	transform: translateY(-2px);
}

.vix-cmethod__body {
	display: block;
}

.vix-cmethod__title {
	display: block;
	font-family: var(--vix-font-head);
	font-size: 20px;
	font-weight: 500;
	line-height: 25px;
	letter-spacing: -0.04em;
	color: var(--vix-white);
}

/* .spacer-small */
.vix-cmethod__value {
	display: block;
	margin-top: 20px;
	font-size: 14px;
	font-weight: 300;
	line-height: 21px;
	color: var(--vix-text);
	word-break: break-word;
}

/* -------------------------------------------------------------------------
   CTA — .get-project.glass-effect
   ---------------------------------------------------------------------- */

.vix-cta--boxed .vix-cta__box {
	padding: 60px;
	text-align: center;
	background-color: var(--vix-surface-soft);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--vix-radius);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 24px rgba(0, 0, 0, 0.25);
}

.vix-cta--boxed .vix-cta__title {
	font-size: 4.4rem;
	line-height: 0.95;
	letter-spacing: -0.06em;
}

/* .spacer-30 either side of the lead copy. */
.vix-cta--boxed .vix-cta__sub {
	margin: 30px auto;
	max-width: 780px;
}

.vix-cta--boxed .vix-cta__sub strong {
	color: var(--vix-white);
	font-weight: 600;
}

@media (min-width: 1280px) {
	.vix-cta--boxed .vix-cta__box {
		padding: 80px;
	}
}

@media (max-width: 991px) {
	.vix-contact__grid {
		gap: var(--vix-s3);
	}

	.vix-cta--boxed .vix-cta__box {
		padding: 40px;
	}

	.vix-cta--boxed .vix-cta__title {
		font-size: 3rem;
	}
}

@media (max-width: 767px) {
	.vix-cta--boxed .vix-cta__box {
		padding: 40px 20px;
	}
}

/* -------------------------------------------------------------------------
   Contact page corrections, measured against the reference render
   ---------------------------------------------------------------------- */

/* Reference glyphs are white; only the clock's hands carry the accent. */
.vix-cmethod__icon {
	color: var(--vix-white);
}

.vix-cmethod:hover .vix-cmethod__icon {
	color: var(--vix-accent);
}

/* .new-column content is centred, not flush left. */
.vix-cmethod {
	align-items: center;
	text-align: center;
}

/* The .sub-tag pill sits on its own purple bloom (reference .image-6). */
.vix-eyebrow--badge {
	position: relative;
	isolation: isolate;
}

.vix-eyebrow--badge::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 50%;
	width: 320px;
	height: 150px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(173, 131, 255, 0.5), transparent 72%);
	filter: blur(18px);
	pointer-events: none;
}

/* h1.highlighted — the headline fades from white into the accent. */
.vix-h1-compact .vix-head__title {
	background-image: linear-gradient(100deg, #ffffff 30%, #c9a6ff 62%, #ad83ff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* .hero-curve — the wide purple arc sweeping behind the contact columns. */
.vix-contact {
	position: relative;
}

.vix-contact__curve {
	/* Reference .hero-curve (big-circle.avif): a dome roughly 190% of the
	   viewport wide, apex at the top of the section, bright at the rim and
	   fading inward. Radius solved from the reference render: the arc drops
	   270px over 950px of run, which puts R at ~0.95x the viewport width. */
	position: absolute;
	left: 50%;
	top: 0;
	width: 190%;
	aspect-ratio: 1 / 1;
	transform: translateX(-50%);
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
	background: radial-gradient(
		closest-side,
		transparent 87%,
		rgba(69, 26, 138, 0.30) 92%,
		rgba(103, 45, 205, 0.72) 95.5%,
		rgba(139, 92, 246, 0.95) 98%,
		rgba(186, 158, 255, 0.85) 99.4%,
		transparent 100%
	);
	filter: blur(1.5px);
}


/* Reference contact lead wraps to two lines rather than running full width. */
.vix-h1-compact .vix-head__desc {
	max-width: 560px;
}

/* =========================================================================
   Legal pages — .page-hero + .terms_content + .w-richtext
   A single long-form column: display heading, then body copy at the site's
   18px/27px reading size with generous room between sections.
   ========================================================================= */

.vix-legal {
	padding-top: 180px;
	padding-bottom: 60px;
}

.vix-legal__content {
	/* Measured: .terms_content carries no padding of its own; the 281px sits
	   on the section. */
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.vix-legal__title {
	font-family: var(--vix-font-head);
	font-size: 4rem;
	font-weight: 500;
	line-height: 0.95;
	letter-spacing: -0.055em;
	color: var(--vix-white);
}

.vix-legal__body {
	max-width: 900px;
	font-size: 18px;
	line-height: 27px;
	letter-spacing: -0.36px;
	color: var(--vix-text);
}

.vix-legal__body :where(h2, h3, h4) {
	font-family: var(--vix-font-head);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: var(--vix-white);
	margin: 45px 0 12px;
}

.vix-legal__body h2 {
	font-size: 31px;
}

.vix-legal__body h3 {
	font-size: 24px;
}

.vix-legal__body h4 {
	font-size: 20px;
}

.vix-legal__body :where(h2, h3, h4):first-child {
	margin-top: 0;
}

.vix-legal__body p {
	margin: 0 0 18px;
}

.vix-legal__body :where(ul, ol) {
	margin: 0 0 18px;
	padding-left: 22px;
}

.vix-legal__body li {
	margin-bottom: 9px;
}

.vix-legal__body strong {
	color: var(--vix-white);
	font-weight: 600;
}

.vix-legal__body em {
	/* The global rule paints <em> in the accent; in body copy it should just
	   be an aside, so restore normal italics here. */
	font-style: italic;
	color: var(--vix-text-dim);
}

.vix-legal__body a {
	color: var(--vix-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s var(--vix-ease);
}

.vix-legal__body a:hover {
	color: var(--vix-white);
}

.vix-legal__body :where(table) {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 18px;
	font-size: 15px;
}

.vix-legal__body :where(th, td) {
	padding: 10px 12px;
	border: 1px solid var(--vix-border);
	text-align: left;
	vertical-align: top;
}

.vix-legal__body th {
	color: var(--vix-white);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   Terms link row — .footer_terms-links-wrapper
   ---------------------------------------------------------------------- */

.vix-terms-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem;
}

.vix-terms-links a {
	font-size: 14px;
	line-height: 21px;
	color: var(--vix-text-dim);
	text-decoration: none;
	transition: color 0.2s var(--vix-ease);
}

.vix-terms-links a:hover {
	color: var(--vix-white);
}

@media (max-width: 991px) {
	.vix-legal {
		padding-top: 140px;
	}

	.vix-legal__content {
		padding-top: 30px;
	}

	.vix-legal__title {
		font-size: 3rem;
	}

	.vix-terms-links {
		gap: 10px;
	}
}

@media (max-width: 767px) {
	.vix-legal {
		padding-top: 120px;
	}

	.vix-legal__title {
		font-size: 2.5rem;
	}
}

/* Reference terms layout: a 995px column centred in the container, a
   left-aligned breadcrumb above the title, and the title in the same
   white-to-accent gradient the contact hero uses. */
.vix-legal__content {
	max-width: 995px;
	margin-left: auto;
	margin-right: auto;
}

.vix-crumbs--left {
	justify-content: flex-start;
	margin-bottom: 0;
}

.vix-legal__title {
	background-image: linear-gradient(100deg, #ffffff 30%, #c9a6ff 62%, #ad83ff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* =========================================================================
   Legal pages — corrected against measured computed styles
   Taken from the reference render at a 1440 viewport rather than read off the
   minified CSS, so these are the values the browser actually resolves.
   ========================================================================= */

.vix-legal {
	/* .page-hero on a terms page */
	padding-top: 281px;
	padding-bottom: 100px;
}

.vix-legal__content {
	/* .terms_content: 990px, centred in the 1318px container, 30px rhythm */
	max-width: 990px;
	gap: 30px;
	align-items: flex-start;
	justify-content: center;
}

.vix-legal__title {
	/* h1.heading-style-h2.highlighted */
	font-size: 55px;
	font-weight: 500;
	line-height: 49.5px;
	letter-spacing: -3.3px;
	padding-bottom: 10px;
	background-image: linear-gradient(#ffffff, #ad83ff);
}

/* .breadcurm — 12px labels with a 2px accent pill between them */
.vix-legal .vix-crumbs {
	gap: 20px;
	margin-bottom: 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 12px;
	letter-spacing: -0.36px;
}

.vix-legal .vix-crumbs__link {
	color: var(--vix-white);
}

.vix-legal .vix-crumbs__sep {
	width: 2px;
	height: 10px;
	border-radius: 15px;
	background: var(--vix-accent);
}

.vix-legal__body {
	max-width: 990px;
}

/* Reference paragraphs butt straight up against each other at 27px leading;
   the spacing between clauses comes from the copy, not from margins. */
.vix-legal__body p {
	margin: 0;
}

.vix-legal__body strong {
	font-weight: 700;
	color: inherit;
}

/* .cta_heading */
.vix-cta--boxed .vix-cta__title {
	font-size: 70.4px;
	line-height: 63.36px;
	letter-spacing: -4.8px;
}

/* .get-project.glass-effect */
.vix-cta--boxed .vix-cta__box {
	padding: 60px 75px;
	background-color: rgba(31, 26, 41, 0.5);
}

/* .footer_terms-links-wrapper */
.vix-terms-links {
	gap: 20px;
}

.vix-terms-links a {
	font-size: 18px;
	line-height: 27px;
	letter-spacing: -0.36px;
}

@media (max-width: 991px) {
	.vix-legal {
		padding-top: 200px;
		padding-bottom: 60px;
	}

	.vix-legal__title {
		font-size: 48px;
		line-height: 43px;
		letter-spacing: -2.8px;
	}

	.vix-cta--boxed .vix-cta__box {
		padding: 40px;
	}

	.vix-cta--boxed .vix-cta__title {
		font-size: 48px;
		line-height: 44px;
		letter-spacing: -3px;
	}
}

/* =========================================================================
   Industries page — matched to measured values from the reference render
   Every number below came out of getComputedStyle at a 1440 viewport, not
   from reading the minified stylesheet.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Nav — .navbar / .nav-row / .nav-buttons
   ---------------------------------------------------------------------- */

.vix-nav {
	padding: 42px 20px 10px;
}

.vix-nav__inner {
	/* Measured: two separate glass pills pushed apart, radius 32 not 100. */
	max-width: var(--vix-max);
	background-color: rgba(30, 30, 30, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 32px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 24px rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	padding: 16px 32px 14px;
}

.vix-nav__link {
	font-size: 14px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: -0.36px;
	color: var(--vix-white);
}

/* -------------------------------------------------------------------------
   Page hero — .page-hero / .hero-content-center / .pagehero-content
   ---------------------------------------------------------------------- */

.vix-phero {
	padding-top: 281px;
	padding-bottom: 100px;
}

.vix-phero .vix-head {
	/* .pagehero-content */
	max-width: 691px;
}

.vix-phero .vix-head__title {
	/* Measured 71.111px at 1440 — the 5rem step is a wider breakpoint. */
	font-size: 4.44444rem;
	font-weight: 500;
	line-height: 64px;
	letter-spacing: -4.2px;
}

@media (min-width: 1920px) {
	.vix-phero .vix-head__title {
		font-size: 5rem;
		letter-spacing: -4.8px;
	}
}

.vix-phero .vix-head__desc {
	max-width: 691px;
	font-size: 18px;
	line-height: 27px;
	letter-spacing: -0.36px;
	color: var(--vix-text);
}

.vix-phero .vix-head__desc strong {
	/* Measured: the bold lead line stays #d9d9d9, it does not go white. */
	font-weight: 700;
	color: var(--vix-text);
}

.vix-phero .vix-crumbs {
	gap: 20px;
	font-size: 12px;
	font-weight: 500;
	line-height: 12px;
	letter-spacing: -0.36px;
}

.vix-phero .vix-crumbs__link {
	color: var(--vix-white);
}

.vix-phero .vix-crumbs__sep {
	width: 2px;
	height: 10px;
	border-radius: 15px;
	background: var(--vix-accent);
}

.vix-phero__actions {
	gap: 20px;
}

/* -------------------------------------------------------------------------
   Buttons — .button (measured 36px tall)
   ---------------------------------------------------------------------- */

.vix-btn {
	padding: 9px 15px;
	gap: 10px;
	font-size: 14px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: -0.36px;
	border-radius: 100px;
}

.vix-btn--link {
	padding: 9px 0;
	gap: 10px;
}

/* -------------------------------------------------------------------------
   Card grid — .section-small / .grid3 / .cms-item-full-h
   ---------------------------------------------------------------------- */

.vix-section--tight {
	padding-top: 88.889px;
	padding-bottom: 88.889px;
}

.vix-inds__grid {
	gap: 44px;
	margin-top: 0;
}

.vix-head + .vix-inds__grid {
	margin-top: var(--vix-s5);
}

.vix-ind {
	/* 410x514 at 1440: padding 40, 30px between children, glass at .5 alpha */
	padding: 40px;
	gap: 30px;
	background-color: rgba(31, 26, 41, 0.5);
	background-image: none;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 20px;
	box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.22), 0 24px 64px rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	align-items: flex-start;
	justify-content: flex-start;
}

.vix-ind:hover {
	background-color: rgba(31, 26, 41, 0.72);
	border-color: rgba(255, 255, 255, 0.16);
}

.vix-ind__thumb {
	/* .thumbnail-wrapper: 3:2, radius 20 */
	aspect-ratio: 3 / 2;
	border-radius: 20px;
	margin-bottom: 0;
}

.vix-ind__title {
	/* .resouces_blog-card-heading */
	font-size: 30px;
	font-weight: 400;
	line-height: 34.8px;
	letter-spacing: -2px;
	color: var(--vix-white);
}

/* .spacer-small sits between the heading and the copy */
.vix-ind__desc {
	margin-top: 20px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 300;
	line-height: 21px;
	letter-spacing: -0.36px;
	color: var(--vix-text);
}

/* The card gap already spaces the button; it should not also push down. */
.vix-ind__more {
	margin-top: auto;
	padding-top: 0;
	align-self: flex-start;
}

/* The heading + copy travel together, the button sits under them. */
.vix-ind__body {
	display: contents;
}

@media (max-width: 991px) {
	.vix-nav {
		padding: 30px 20px 10px;
	}

	.vix-phero {
		padding-top: 200px;
		padding-bottom: 60px;
	}

	.vix-inds__grid {
		gap: 24px;
	}

	.vix-ind {
		padding: 24px;
		gap: 20px;
	}

	.vix-ind__title {
		font-size: 26px;
		line-height: 30px;
		letter-spacing: -1.4px;
	}
}

/* =========================================================================
   Structural corrections from the measured diff
   ========================================================================= */

/* -------------------------------------------------------------------------
   Nav: the reference is two separate glass pills inside a transparent
   1318px row, not one wide pill. Measured .nav-row 713x63, .nav-buttons
   259x62, pushed apart with space-between.
   ---------------------------------------------------------------------- */

.vix-nav__inner {
	max-width: var(--vix-max);
	padding: 0;
	gap: 20px;
	justify-content: space-between;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	color: var(--vix-white);
}

.vix-nav__group--main,
.vix-nav__actions {
	background-color: rgba(30, 30, 30, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 32px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 24px rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.vix-nav__group--main {
	padding: 16px 32px 14px;
	gap: 175px;
}

.vix-nav__actions {
	padding: 12px 14px 12px 25px;
	gap: 15px;
}

.vix-nav__menu {
	gap: 30px;
}

/* .nav-link is plain text, not a pill. Measured 59x16 with no padding. */
.vix-nav__link {
	padding: 0;
	gap: 6px;
	border-radius: 0;
	background: transparent;
	font-size: 14px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: -0.36px;
	color: var(--vix-white);
}

.vix-nav__link:hover {
	background: transparent;
	color: rgba(255, 255, 255, 0.65);
}

/* -------------------------------------------------------------------------
   Hero: the breadcrumb and the button row belong inside the 691px content
   block, not spread across the full container.
   ---------------------------------------------------------------------- */

.vix-phero .vix-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.vix-phero .vix-crumbs,
.vix-phero .vix-head,
.vix-phero__actions {
	width: 100%;
	max-width: 691px;
}

.vix-phero .vix-crumbs {
	justify-content: center;
}

/* -------------------------------------------------------------------------
   Cards: children stretch to the card width, and the CTA is a full 36px pill
   in the reference ink colour.
   ---------------------------------------------------------------------- */

.vix-ind > * {
	width: 100%;
}

.vix-ind__overlay {
	width: auto;
}

.vix-ind__more {
	width: auto;
	padding: 9px 15px;
	line-height: 16px;
	color: #0f120a;
}

.vix-ind:hover .vix-ind__more {
	color: var(--vix-off-white);
}

/* The thumbnail placeholder should not read as a lighter panel when no
   image has been set. */
.vix-ind__thumb {
	background: rgba(255, 255, 255, 0.02);
}

/* Measured fixes: card children group as thumb / text / button so the 30px
   card gap lands in two places, matching the reference's 514px card. */
.vix-ind__body {
	display: block;
}

/* .button.without-bg carries no padding in the reference — 16px tall. */
.vix-btn--link {
	padding: 0;
	border-radius: 0;
}

/* The block <strong> treatment belongs to the contact lead only; elsewhere a
   bold lead line stays inline the way the reference has it. */
.vix-phero .vix-head__desc strong {
	display: inline;
	margin-bottom: 0;
}

.vix-h1-compact .vix-head__desc strong {
	display: block;
	margin-bottom: 15px;
}

/* Keep the nav pill at the reference's 63px: the brand mark sets the height. */
.vix-nav__brand img,
.vix-nav__mark {
	max-height: 33px;
	width: auto;
}

/* .spacer-tiny between lead lines; strong stays inline inside its own block. */
.vix-head__desc p {
	margin: 0;
}

.vix-head__desc p + p {
	margin-top: 15px;
}

.vix-phero .vix-head__desc strong,
.vix-h1-compact .vix-head__desc strong {
	display: inline;
	margin-bottom: 0;
}

/* .button.without-bg has no border either — measured 16px tall. */
.vix-btn--link {
	border: 0;
}

/* An earlier .vix-nav__actions .vix-btn rule outranks the global button size,
   which was making the nav CTA 44px instead of the reference's 36px. */
.vix-nav__actions .vix-btn {
	padding: 9px 15px;
	font-size: 14px;
	line-height: 16px;
}

/* The menu list inherits 27px leading; reference nav links sit on 16px. */
.vix-nav__menu,
.vix-nav__item {
	line-height: 16px;
}

/* Pill heights are set by the reference chrome, not by whatever logo is
   uploaded: .nav-row 63px, .nav-buttons 62px. */
.vix-nav__group--main {
	min-height: 63px;
}

.vix-nav__actions {
	min-height: 62px;
}

/* =========================================================================
   Contact page — matched to measured values from the reference render
   ========================================================================= */

/* .hero-content.contact-page: 200px lead-in, 30px between blocks */
.vix-h1-compact .vix-phero {
	padding-top: 200px;
	padding-bottom: 100px;
}

.vix-h1-compact .vix-container {
	gap: 30px;
}

.vix-h1-compact .vix-crumbs,
.vix-h1-compact .vix-phero__actions {
	margin: 0;
}

.vix-h1-compact .vix-head {
	max-width: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
}

/* .sub-tag.larger2 — 224x57 pill, radius 100, same glass as the nav */
.vix-h1-compact .vix-eyebrow--badge {
	height: 57px;
	padding: 15px 40px;
	border-radius: 100px;
	background-color: rgba(30, 30, 30, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 24px rgba(0, 0, 0, 0.25);
	font-size: 18px;
	font-weight: 400;
	line-height: 27px;
	letter-spacing: -0.36px;
	text-transform: uppercase;
	color: var(--vix-white);
}

/* h1.heading-style-h2.highlighted */
.vix-h1-compact .vix-head__title {
	font-size: 55px;
	font-weight: 500;
	line-height: 49.5px;
	letter-spacing: -3.3px;
	padding-bottom: 10px;
	max-width: none;
}

@media (min-width: 1280px) {
	.vix-h1-compact .vix-head__title {
		font-size: 55px;
		letter-spacing: -3.3px;
	}
}

/* .paragraph-width2 */
.vix-h1-compact .vix-head__desc {
	max-width: 528px;
	margin-top: 0;
}

/* -------------------------------------------------------------------------
   Reach out directly — .center-block2 / .grid3-contact / .new-column
   ---------------------------------------------------------------------- */

.vix-contact .vix-head {
	max-width: 984px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
}

/* .text-style-allcaps.text-weight-semibold.text-color-alternate */
.vix-contact .vix-eyebrow {
	margin-bottom: 0;
	font-family: var(--vix-font-body);
	font-size: 18px;
	font-weight: 600;
	line-height: 27px;
	letter-spacing: -0.36px;
	text-transform: uppercase;
	color: var(--vix-accent);
}

/* h2.text-weight-normal */
.vix-contact .vix-head__title {
	font-size: 55px;
	font-weight: 400;
	line-height: 49.5px;
	letter-spacing: -3.3px;
}

/* .spacer-xxlarge between the heading block and the columns */
.vix-contact .vix-contact__grid,
.vix-head + .vix-contact__grid {
	margin-top: 80px;
	gap: 40px;
}

/* .new-column: 413x235, 30px padding, radius 10, centred stack, 10px gap */
.vix-cmethod {
	padding: 30px;
	gap: 10px;
	align-items: center;
	text-align: center;
	background-color: rgba(31, 26, 41, 0.5);
	background-image: none;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.22), 0 24px 64px rgba(0, 0, 0, 0.5);
}

.vix-cmethod:hover {
	background-color: rgba(31, 26, 41, 0.72);
	border-color: rgba(255, 255, 255, 0.16);
}

/* .contact_strategy-icon — 80x80, square, white */
.vix-cmethod__icon {
	width: 80px;
	height: 80px;
	aspect-ratio: 1 / 1;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--vix-white);
}

/* .about_strategy-card-heading */
.vix-cmethod__title {
	font-size: 32px;
	font-weight: 500;
	line-height: 32px;
	letter-spacing: -1.28px;
	color: var(--vix-white);
}

.vix-cmethod__value {
	margin-top: 20px;
	font-size: 14px;
	font-weight: 300;
	line-height: 21px;
	letter-spacing: -0.36px;
	color: var(--vix-text);
}

@media (max-width: 991px) {
	.vix-h1-compact .vix-phero {
		padding-top: 150px;
		padding-bottom: 60px;
	}

	.vix-h1-compact .vix-head__title,
	.vix-contact .vix-head__title {
		font-size: 40px;
		line-height: 38px;
		letter-spacing: -2.2px;
	}

	.vix-contact .vix-contact__grid,
	.vix-head + .vix-contact__grid {
		margin-top: 60px;
		gap: 24px;
	}
}

/* The base eyebrow carries a 27px bottom margin; inside the contact hero the
   flex gap already spaces the pill from the heading. */
.vix-h1-compact .vix-eyebrow--badge {
	margin-bottom: 0;
}

/* Reference keeps "Reach out directly" inside the hero section, so there is
   no section boundary between the two: 73px from the buttons to the eyebrow. */
.vix-h1-compact .vix-phero {
	padding-bottom: 0;
}

.vix-contact {
	padding-top: 30px;
}

/* Final trim against the measured reference: the pill clears the heading by
   38px, and the columns block sits 72px below the hero buttons. */
.vix-h1-compact .vix-eyebrow--badge {
	margin-bottom: 8px;
}

.vix-contact {
	padding-top: 72px;
}

/* =========================================================================
   Footer — matched to measured values from the reference render
   .footer / .footer-flex / .footer-column / .footer-bottom /
   .footer-link-block / .footer_bottom-wrapper
   ========================================================================= */

.vix-footer {
	padding-top: 150px;
	padding-bottom: 50px;
}

/* .footer-flex — five columns pushed apart, 100px apart, tops aligned */
.vix-footer__cols {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 100px;
	grid-template-columns: none;
}

.vix-footer__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	width: auto;
	flex: 0 1 auto;
}

/* .footer-head */
.vix-footer__title {
	font-family: var(--vix-font-body);
	font-size: 19px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: -0.36px;
	text-transform: none;
	color: var(--vix-white);
	margin-bottom: 38px;
}

/* .footer-link */
.vix-footer__links a {
	font-size: 14px;
	font-weight: 300;
	line-height: 21px;
	letter-spacing: -0.36px;
	color: rgba(255, 255, 255, 0.5);
}

.vix-footer__links a:hover {
	color: var(--vix-white);
}

/* -------------------------------------------------------------------------
   .footer-bottom — four glass link blocks, 78px tall
   ---------------------------------------------------------------------- */

.vix-footer__contact {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}

.vix-footer__box {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	min-height: 78px;
	padding: 17.5px 40px;
	border-radius: 12px;
	background-color: rgba(30, 30, 30, 0.4);
	backdrop-filter: blur(15px) saturate(1.5);
	-webkit-backdrop-filter: blur(15px) saturate(1.5);
	border: 0;
	font-size: 19px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: -0.36px;
	color: var(--vix-white);
	overflow: hidden;
}

/* .navbar-glass-tint + .navbar-glass-shine sit under the content and give the
   block its lit top edge. */
.vix-footer__box::before,
.vix-footer__box::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
	pointer-events: none;
}

.vix-footer__box::before {
	background-color: rgba(15, 18, 10, 0.4);
}

.vix-footer__box::after {
	inset: 1px 0;
	box-shadow: rgba(255, 255, 255, 0.3) 0 2px 1px 0, rgba(255, 255, 255, 0.3) -0.2px -1px 1px 1px;
}

.vix-footer__box > * {
	position: relative;
	z-index: 1;
}

/* .border-line */
.vix-footer__box-sep {
	width: 1px;
	height: 24px;
	margin: 9.5px 0;
	background: rgba(255, 255, 255, 0.5);
	border: 0;
}

/* -------------------------------------------------------------------------
   .footer_bottom-wrapper — copyright left, legal links right
   ---------------------------------------------------------------------- */

.vix-footer__note {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin-top: 50px;
	font-size: 14px;
	font-weight: 300;
	line-height: 21px;
	letter-spacing: -0.36px;
	color: rgba(255, 255, 255, 0.5);
}

.vix-footer__note > span {
	order: -1;
}

.vix-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vix-footer__legal a {
	font-size: 14px;
	font-weight: 300;
	line-height: 21px;
	letter-spacing: -0.36px;
	color: rgba(255, 255, 255, 0.5);
}

.vix-footer__legal a:hover {
	color: var(--vix-white);
}

/* -------------------------------------------------------------------------
   .footer_circle-image — the dome behind the footer: full width, 761 tall,
   starting 411px above the footer's top edge.
   ---------------------------------------------------------------------- */

.vix-footer__arc {
	position: absolute;
	left: 50%;
	top: -411px;
	width: 190%;
	height: auto;
	aspect-ratio: 1 / 1;
	transform: translateX(-50%);
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
	background: radial-gradient(
		closest-side,
		transparent 87%,
		rgba(69, 26, 138, 0.28) 92%,
		rgba(103, 45, 205, 0.68) 95.5%,
		rgba(139, 92, 246, 0.92) 98%,
		rgba(186, 158, 255, 0.8) 99.4%,
		transparent 100%
	);
	filter: blur(1.5px);
}

@media (max-width: 991px) {
	.vix-footer {
		padding-top: 100px;
		padding-bottom: 40px;
	}

	.vix-footer__cols {
		gap: 40px;
	}

	.vix-footer__box {
		padding: 17.5px 24px;
		font-size: 17px;
	}
}

/* Measured trim: footer links are 21px blocks with 12px between them, the
   bottom row inherits 18/27 and only its links drop to 14/21, and the dome
   is a wide 761px ellipse rather than a full circle. */
.vix-footer__links {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vix-footer__links a {
	display: block;
}

.vix-footer__note {
	font-size: 18px;
	font-weight: 400;
	line-height: 27px;
	color: var(--vix-text);
}

.vix-footer__note > span {
	font-size: 14px;
	font-weight: 300;
	line-height: 21px;
	color: rgba(255, 255, 255, 0.5);
}

.vix-footer__legal {
	font-size: 18px;
	line-height: 27px;
}

.vix-footer__box {
	font-size: 18px;
}

.vix-footer__box .vix-footer__box-value,
.vix-footer__box strong {
	font-size: 19px;
	font-weight: 400;
	line-height: 20px;
}

.vix-footer__arc {
	top: -411px;
	height: 761px;
	aspect-ratio: auto;
	background: radial-gradient(
		ellipse closest-side,
		transparent 87%,
		rgba(69, 26, 138, 0.28) 92%,
		rgba(103, 45, 205, 0.68) 95.5%,
		rgba(139, 92, 246, 0.92) 98%,
		rgba(186, 158, 255, 0.8) 99.4%,
		transparent 100%
	);
}

/* Measured: 100px between the link columns and the glass contact row. */
.vix-footer__contact {
	margin-top: 100px;
}

/* The reference dome starts 411px above the footer and sits behind the CTA
   box. .vix-section clips by default, which was cutting it off at the footer
   edge and dropping the rim into the link columns. */
.vix-footer {
	overflow: visible;
}

.vix-footer > .vix-container {
	position: relative;
	z-index: 1;
}

/* The reference art is the top cap of a very large circle, not a full
   ellipse — so keep the circle's curvature but show only its first 761px,
   otherwise the lower rim cuts back through the link columns. */
.vix-footer__arc {
	width: 190%;
	height: auto;
	aspect-ratio: 1 / 1;
	background: radial-gradient(
		closest-side,
		transparent 87%,
		rgba(69, 26, 138, 0.28) 92%,
		rgba(103, 45, 205, 0.68) 95.5%,
		rgba(139, 92, 246, 0.92) 98%,
		rgba(186, 158, 255, 0.8) 99.4%,
		transparent 100%
	);
	clip-path: inset(0 0 calc(100% - 761px) 0);
}

/* The dome needs a circle's curvature but must not be a circle-sized box:
   at 190% width that is ~2666px tall, which pushed 1295px of empty scroll
   area below the footer. Keep the element at the reference's 761px and let
   it clip an oversized pseudo-element instead. */
.vix-footer__arc {
	width: 190%;
	height: 761px;
	aspect-ratio: auto;
	overflow: hidden;
	background: none;
	filter: none;
	clip-path: none;
	border-radius: 0;
}

.vix-footer__arc::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: radial-gradient(
		closest-side,
		transparent 87%,
		rgba(69, 26, 138, 0.28) 92%,
		rgba(103, 45, 205, 0.68) 95.5%,
		rgba(139, 92, 246, 0.92) 98%,
		rgba(186, 158, 255, 0.8) 99.4%,
		transparent 100%
	);
	filter: blur(1.5px);
}

/* .vix-section::after hangs 400px below its section for the bottom glow.
   Every other section clips it away; the footer now runs overflow:visible so
   the dome can reach up, which let that 400px become empty scroll area at the
   end of the page. The footer never uses the glow, so drop the pseudos. */
.vix-footer::before,
.vix-footer::after {
	display: none;
}

/* Belt and braces: the page ground should never be able to show through as
   white if anything else ever overflows. */
html,
body {
	background-color: var(--vix-bg, #0f120a);
}

/* =========================================================================
   Ambient edge light
   The reference never leaves a section as flat black — soft purple bleeds in
   from the side, which is what stops a long page reading as dead space.
   Painted as background-image so the Elementor "Background" colour control
   still works underneath it.
   ========================================================================= */

.vix-section {
	--vix-amb: 1;
	background-repeat: no-repeat;
	background-position: center;
}

.vix-amb-left .vix-section {
	background-image:
		radial-gradient(58% 46% at -8% 34%, rgba(139, 92, 246, calc(0.22 * var(--vix-amb))), transparent 72%),
		radial-gradient(38% 30% at 2% 78%, rgba(103, 45, 205, calc(0.16 * var(--vix-amb))), transparent 70%);
}

.vix-amb-right .vix-section {
	background-image:
		radial-gradient(58% 46% at 108% 34%, rgba(139, 92, 246, calc(0.22 * var(--vix-amb))), transparent 72%),
		radial-gradient(38% 30% at 98% 78%, rgba(103, 45, 205, calc(0.16 * var(--vix-amb))), transparent 70%);
}

.vix-amb-both .vix-section {
	background-image:
		radial-gradient(52% 44% at -8% 28%, rgba(139, 92, 246, calc(0.20 * var(--vix-amb))), transparent 72%),
		radial-gradient(52% 44% at 108% 72%, rgba(103, 45, 205, calc(0.18 * var(--vix-amb))), transparent 72%);
}

/* The card grids already carry their own glass; keep the bleed behind them
   rather than washing the cards out. */
.vix-amb-left .vix-section--tight,
.vix-amb-right .vix-section--tight,
.vix-amb-both .vix-section--tight {
	background-size: cover;
}

@media (max-width: 767px) {
	.vix-section {
		--vix-amb: 0.6;
	}
}

/* Percentage-sized radials stretch across a 2000px+ section and go faint.
   Pin the blobs to a fixed size so they read the same on a short hero and a
   long card grid, and repeat them down tall sections. */
.vix-amb-left .vix-section,
.vix-amb-right .vix-section,
.vix-amb-both .vix-section {
	background-size: 1100px 900px;
	background-repeat: repeat-y;
}

.vix-amb-left .vix-section {
	background-image:
		radial-gradient(closest-side, rgba(139, 92, 246, calc(0.26 * var(--vix-amb))), transparent 78%),
		radial-gradient(closest-side, rgba(103, 45, 205, calc(0.18 * var(--vix-amb))), transparent 76%);
	background-position: -420px 120px, -300px 780px;
}

.vix-amb-right .vix-section {
	background-image:
		radial-gradient(closest-side, rgba(139, 92, 246, calc(0.26 * var(--vix-amb))), transparent 78%),
		radial-gradient(closest-side, rgba(103, 45, 205, calc(0.18 * var(--vix-amb))), transparent 76%);
	background-position: calc(100% - 680px) 120px, calc(100% - 800px) 780px;
}

.vix-amb-both .vix-section {
	background-image:
		radial-gradient(closest-side, rgba(139, 92, 246, calc(0.24 * var(--vix-amb))), transparent 78%),
		radial-gradient(closest-side, rgba(103, 45, 205, calc(0.18 * var(--vix-amb))), transparent 76%);
	background-position: -420px 120px, calc(100% - 720px) 700px;
}