/* ============================================================
 * Vending Brothers — site styles
 * Sections:
 *   0. base
 *   1. hero
 *   2. stats
 *   3. use-cases (.sec)
 *   4. vending-machine showcase (.vm)
 *   5. advertise (.ads)
 *   6. clients marquee (.cl)
 *   7. app banner
 *   8. enquiry form (.fs)
 * ============================================================ */

/* ---------- HEADER / NAVBAR (matches original ElementsKit look) ---------- */
/* Defensively hide ElementsKit's injected header in case the plugin is still active. */
.ekit-template-content-header { display: none !important; }

.vb-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	padding: 14px 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(242,41,91,0) 100%);
	box-shadow: 0px 1px 2px 0px rgba(3, 12, 37, 0.16);
}

/* Pages without a dark hero: give the header a solid navy background so the
 * white nav/logo stays readable instead of floating over white content. */
.vb-header-solid .vb-header {
	background: #043157;
	box-shadow: 0 2px 14px rgba(3, 12, 37, 0.22);
}

.vb-header__inner {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
	align-items: center;
	gap: 24px;
}

/* Logo column — auto width, just enough for the wordmark */
.vb-header__brand {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 0;
	text-decoration: none;
}

.vb-header__logo {
	max-width: 100%;
	max-height: 60px;
	width: auto;
	height: auto;
	display: block;
}

.vb-header__title {
	color: #fff;
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -0.3px;
	white-space: nowrap;
}

/* Nav fills remaining space; list pushed to right with CTA at the very end */
.vb-nav {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0;
	gap: 24px;
	min-width: 0;
}

.vb-nav__list {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	margin: 0 auto 0 0;
	padding: 0;
	list-style: none;
}

.vb-nav__item { position: relative; list-style: none; white-space: nowrap; }

.vb-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 14px;
	color: #FFFFFF;
	font-family: 'Raleway', sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 14px;
	text-transform: capitalize;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.vb-nav__link:hover,
.vb-nav__link:focus,
.vb-nav__item:hover > .vb-nav__link {
	color: #0B5A83;
}

.vb-nav__item.is-active > .vb-nav__link { color: #FA346E; }

.vb-nav__caret { width: 10px; height: 10px; opacity: 0.85; }

/* Pill CTA "Early Access" — sits at the right end of the nav row */
.vb-nav__cta {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 25px 10px;
	background: #17A3B7;
	color: #FFFFFF;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
	text-transform: capitalize;
	text-decoration: none;
	white-space: nowrap;
	border: 2px solid #17A3B7;
	border-radius: 30px;
	transition: background 0.2s ease, color 0.2s ease;
}

.vb-nav__cta:hover {
	background: transparent;
	color: #17A3B7;
}

/* Submenu (depth 1) — clean white dropdown like the original */
.vb-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	margin: 12px 0 0;
	padding: 7px 26px;
	background: #FFFFFF;
	border-radius: 4px;
	box-shadow: 0px 12px 20px 0px rgba(3, 12, 37, 0.16);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.vb-nav__item--has-children:hover > .vb-submenu,
.vb-nav__item--has-children:focus-within > .vb-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.vb-submenu .vb-nav__link {
	display: block;
	padding: 6px 0 7px;
	font-size: 14px;
	font-weight: 500;
	font-family: 'Roboto', sans-serif;
	color: #7D8089;
	text-transform: none;
	line-height: 24px;
}

.vb-submenu .vb-nav__link:hover,
.vb-submenu .vb-nav__item:hover > .vb-nav__link { color: #FA346E; }

/* ----- Megamenu (richer dropdown with title + description) ----- */
.vb-megamenu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -6px);
	margin-top: 12px;
	background: #FFFFFF;
	border-radius: 8px;
	box-shadow: 0 14px 40px rgba(3, 12, 37, 0.18);
	padding: 14px;
	max-width: calc(100vw - 40px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 1000;
	white-space: normal;       /* reset the nowrap inherited from .vb-nav__item */
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.vb-megamenu * { white-space: normal; }

/* Bridge gap so hover doesn't break between link and panel */
.vb-megamenu::before {
	content: "";
	position: absolute;
	top: -12px; left: 0; right: 0;
	height: 12px;
}

.vb-nav__item--has-megamenu:hover > .vb-megamenu,
.vb-nav__item--has-megamenu:focus-within > .vb-megamenu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

/* Edge-aware anchoring so wide panels don't overflow the viewport. */
/* First nav item: anchor megamenu to the LEFT edge (extends right). */
.vb-nav__list > .vb-nav__item--has-megamenu:first-child > .vb-megamenu {
	left: 0;
	transform: translate(0, -6px);
}
.vb-nav__list > .vb-nav__item--has-megamenu:first-child:hover > .vb-megamenu,
.vb-nav__list > .vb-nav__item--has-megamenu:first-child:focus-within > .vb-megamenu {
	transform: translate(0, 0);
}

/* Last two nav items: anchor megamenu to the RIGHT edge (extends left). */
.vb-nav__list > .vb-nav__item--has-megamenu:nth-last-child(-n+2) > .vb-megamenu {
	left: auto;
	right: 0;
	transform: translate(0, -6px);
}
.vb-nav__list > .vb-nav__item--has-megamenu:nth-last-child(-n+2):hover > .vb-megamenu,
.vb-nav__list > .vb-nav__item--has-megamenu:nth-last-child(-n+2):focus-within > .vb-megamenu {
	transform: translate(0, 0);
}

.vb-megamenu__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4px;
	min-width: 260px;
	align-items: stretch;
}

.vb-megamenu--cols-2 .vb-megamenu__grid {
	grid-template-columns: 1fr 1fr;
	gap: 4px 10px;
	min-width: 460px;
	max-width: 520px;
}

.vb-megamenu__item {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	height: 100%;
	padding: 10px 12px;
	border-radius: 8px;
	text-decoration: none;
	transition: background 0.18s ease;
}

.vb-megamenu__item:hover { background: #F3F8FB; }

.vb-megamenu__title {
	color: #0F172A;
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.3;
	margin-bottom: 2px;
	transition: color 0.18s ease;
}

.vb-megamenu__item:hover .vb-megamenu__title { color: #17A3B7; }

.vb-megamenu__desc {
	color: #6B7280;
	font-family: 'Roboto', sans-serif;
	font-size: 12.5px;
	line-height: 1.5;
}

/* Mobile: megamenu collapses inline */
@media (max-width: 1024px) {
	.vb-megamenu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: rgba(0,0,0,0.04);
		padding: 6px;
		margin: 4px 0 0 12px;
	}
	.vb-megamenu::before { display: none; }
	.vb-megamenu__grid,
	.vb-megamenu--cols-2 .vb-megamenu__grid {
		grid-template-columns: 1fr;
		min-width: 0;
	}
	.vb-megamenu__title  { font-size: 14px; color: #0F172A; }
	.vb-megamenu__desc   { font-size: 12px; }
}

/* Mobile hamburger */
.vb-header__toggle {
	display: none;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	padding: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	margin-left: auto;
}

.vb-header__toggle-bar {
	display: block;
	width: 22px;
	height: 2px;
	background: #ffffff;
	border-radius: 99px;
	transition: transform 0.25s ease, opacity 0.2s ease, background 0.2s ease;
}

.vb-header.is-open .vb-header__toggle-bar { background: #ffffff; }
.vb-header.is-open .vb-header__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vb-header.is-open .vb-header__toggle-bar:nth-child(2) { opacity: 0; }
.vb-header.is-open .vb-header__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile / tablet */
@media (max-width: 1024px) {
	.vb-header__inner { padding: 0 20px; }
	.vb-header__brand  { flex: 0 0 auto; padding: 0; }
	.vb-header__logo   { max-width: 160px; max-height: 60px; }

	.vb-header__toggle { display: flex; }

	.vb-nav {
		position: fixed;
		inset: 64px 0 0 0;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		background: #FFFFFF;
		padding: 24px;
		overflow-y: auto;
		/* Reveal via clip-path instead of translating off-screen. A translated
		   off-canvas *fixed* element is NOT clipped by body's overflow-x, so it
		   forces the mobile layout viewport wider — causing horizontal scroll and
		   every page's content to be cut off on the right. Kept at translateX(0)
		   (fully inside the viewport) and hidden with clip-path + visibility. */
		visibility: hidden;
		clip-path: inset(0 0 0 100%);
		transition: clip-path 0.3s ease, visibility 0.3s ease;
		max-width: 350px;
		margin-left: auto;
	}

	.vb-header.is-open .vb-nav { visibility: visible; clip-path: inset(0 0 0 0); }

	.vb-nav__list { flex-direction: column; gap: 4px; }

	.vb-nav__link {
		display: block;
		padding: 10px 15px;
		color: #000000;
		font-size: 16px;
		line-height: 1.4;
	}

	.vb-nav__link:hover,
	.vb-nav__item:hover > .vb-nav__link { color: #0B5A83; }

	.vb-nav__cta {
		margin: 16px 15px 0;
		justify-content: center;
	}
	.vb-nav .vb-nav__cta { margin-left: 15px; }

	.vb-submenu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: rgba(0,0,0,0.04);
		border-radius: 0;
		margin: 4px 0 0 12px;
		padding: 4px 12px;
	}

	.vb-submenu .vb-nav__link {
		padding: 12px 0;
		color: #475569;
	}
}

@media (max-width: 767px) {
	.vb-header__logo { max-width: 120px; max-height: 50px; }
}

/* ---------- 0. BASE ---------- */
:root {
	--vb-color-primary: #17a3b6;
	--vb-color-primary-dark: #0e8ea3;
	--vb-color-accent: #05bed7;
	--vb-color-ink: #0f172a;
	--vb-color-text: #1a202c;
	--vb-color-muted: #64748b;
	--vb-color-mute: #64748b;
	--vb-color-mute-dark: #475569;
	--vb-color-mute-light: #94a3b8;
	--vb-color-bg: #ffffff;
	--vb-font-body: 'Inter', -apple-system, "Segoe UI", Roboto, sans-serif;
	--vb-font-heading: 'Inter', var(--vb-font-body);
	--vb-container: 1200px;
}

.vb-home,
.vb-home * { box-sizing: border-box; }

html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }

.vb-home {
	font-family: var(--vb-font-body);
	color: var(--vb-color-text);
	background: var(--vb-color-bg);
	overflow-x: clip;
	max-width: 100vw;
}

.vb-home img { max-width: 100%; height: auto; }

.vb-home > section { max-width: 100vw; overflow-x: clip; }

/* ---------- 1. HERO ---------- */
.vb-hero {
	position: relative;
	overflow: hidden;
	min-height: 90vh;
	background: #0a1928;
}

.vb-hero__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.vb-hero__video iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 177.78vh;        /* 16:9 cover */
	min-width: 100%;
	height: 56.25vw;
	min-height: 100%;
	transform: translate(-50%, -50%);
	border: 0;
}

.vb-hero__video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.vb-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		rgba(10, 25, 40, 0.82) 0%,
		rgba(10, 25, 40, 0.62) 35%,
		rgba(10, 25, 40, 0.35) 60%,
		rgba(10, 25, 40, 0.12) 80%,
		rgba(10, 25, 40, 0.00) 100%
	);
}

.vb-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(circle at 30% 40%, rgba(0,0,0,0.22), transparent 60%);
}

.hero-overlay {
	position: relative;
	z-index: 2;
	max-width: 1400px;
	margin: 0 auto;
	padding: 120px 40px 40px;
	color: #FFFFFF;
	min-height: 90vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.hero-content { max-width: 650px; }

.hero-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.15);
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 14px;
	margin-bottom: 24px;
}

.hero-dot {
	width: 8px; height: 8px;
	background: var(--vb-color-primary);
	border-radius: 50%;
}

.hero-title {
	font-size: 72px;
	font-weight: 700;
	line-height: 1.1;
	margin-bottom: 24px;
	letter-spacing: -1px;
	text-shadow: 0 4px 20px rgba(0,0,0,0.6);
	color: white;
}

.hero-title span { color: var(--vb-color-accent); }

.hero-desc {
	font-size: 18px;
	color: #D1D5DB;
	line-height: 1.7;
	margin-bottom: 40px;
	max-width: 520px;
}

.hero-btn {
	display: inline-block;
	background: var(--vb-color-primary);
	color: #fff;
	padding: 14px 26px;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none !important;
	transition: all 0.3s ease;
}

.hero-btn:hover {
	transform: translateY(-3px);
	background: #0f577d;
	color: #fff;
}

.hero-features {
	margin-top: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: 100%;
	gap: 20px;
	padding-top: 40px;
}

.hero-feature {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 15px;
	color: #E5E7EB;
	text-align: center;
	padding: 16px 10px;
	border-right: 1px solid rgba(255,255,255,0.1);
	text-shadow: 0 4px 20px rgba(0,0,0,0.6);
}

.hero-feature:last-child { border-right: none; }

.hero-feature-dot {
	width: 8px; height: 8px;
	background: var(--vb-color-primary);
	border-radius: 50%;
}

@media (max-width: 1024px) {
	.hero-title { font-size: 52px; }
}

@media (max-width: 768px) {
	/* Push the hero content toward the bottom so the video shows up top */
	.vb-hero::before {
		background: linear-gradient(
			180deg,
			rgba(10, 25, 40, 0.45) 0%,
			rgba(10, 25, 40, 0.35) 26%,
			rgba(10, 25, 40, 0.88) 70%,
			rgba(10, 25, 40, 0.97) 100%
		);
		backdrop-filter: none;
	}
	.hero-overlay {
		padding: 96px 20px 44px;
		min-height: 100vh;
		justify-content: flex-end;
	}
	.hero-title { font-size: 36px; }
	.hero-desc { max-width: none; }
	.hero-features {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		margin-top: 32px;
		padding-top: 24px;
	}
	.hero-feature {
		justify-content: flex-start;
		border-right: none;
		padding: 10px 4px;
		font-size: 14px;
	}
}

@media (max-width: 480px) {
	.hero-overlay { padding: 90px 18px 40px; }
	.hero-title { font-size: 30px; }
	.hero-desc { font-size: 15.5px; line-height: 1.6; margin-bottom: 30px; }
	.hero-tag { font-size: 12.5px; }
	.hero-btn { display: block; text-align: center; }
	.hero-feature { font-size: 13px; }
}

/* ---------- 2. STATS ---------- */
.stats-sec {
	font-family: sans-serif;
	padding: 64px 32px;
	background: #fff;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	max-width: 1100px;
	margin: 0 auto;
	border: 1px solid #e2e8f0;
	border-radius: 20px;
	overflow: hidden;
}

.stat-item {
	padding: 40px 28px;
	text-align: center;
	position: relative;
	transition: background 0.25s;
	border-right: 1px solid #e2e8f0;
}

.stat-item:last-child { border-right: none; }
.stat-item:hover { background: #f8fafc; }

.stat-item::after {
	content: '';
	position: absolute;
	bottom: 0; left: 50%;
	transform: translateX(-50%);
	width: 0; height: 2px;
	background: var(--vb-color-accent);
	border-radius: 2px 2px 0 0;
	transition: width 0.3s;
}

.stat-item:hover::after { width: 60px; }

.stat-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #94a3b8;
	margin-bottom: 12px;
}

.stat-number {
	font-size: 52px;
	font-weight: 800;
	line-height: 1;
	margin-bottom: 10px;
	letter-spacing: -1.5px;
	color: var(--vb-color-ink);
}

.stat-number .suf { color: var(--vb-color-accent); }
.stat-sub { font-size: 13px; color: #94a3b8; line-height: 1.5; }

@media (max-width: 768px) {
	.stats-grid { grid-template-columns: repeat(2, 1fr); }
	.stat-item:nth-child(2) { border-right: none; }
	.stat-item:nth-child(3) { border-top: 1px solid #e2e8f0; }
	.stat-item:nth-child(4) { border-top: 1px solid #e2e8f0; border-right: none; }
	.stat-number { font-size: 38px; }
}

@media (max-width: 480px) {
	.stats-grid { grid-template-columns: 1fr; }
	.stat-item { border-right: none; border-top: 1px solid #e2e8f0; }
	.stat-item:first-child { border-top: none; }
}

/* ---------- 3. USE CASES (.sec) ---------- */
.sec { padding: 64px 20px; font-family: sans-serif; }
.sec-head { text-align: center; margin-bottom: 48px; }
.sec-head h2 { font-size: 36px; font-weight: 700; color: var(--vb-color-ink); line-height: 1.2; margin-bottom: 14px; }
.sec-head h2 em { font-style: normal; color: var(--vb-color-accent); }
.sec-head p { font-size: 16px; color: var(--vb-color-muted); max-width: 860px; margin: 0 auto; line-height: 1.7; }

.grid-top {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 20px;
	height: 480px;
	margin-bottom: 20px;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
.right-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; }
.grid-bot {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	max-width: 1200px;
	margin: 0 auto;
}

.card { position: relative; display: block; border-radius: 16px; overflow: hidden; cursor: pointer; text-decoration: none; transition: transform 0.35s ease, box-shadow 0.35s ease; }
.card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -22px rgba(2,6,23,0.55); }
.card-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.6s cubic-bezier(0.2,0.7,0.2,1); }
.card:hover .card-img { transform: scale(1.1); }
.card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,6,23,0.10) 0%, rgba(2,6,23,0.30) 45%, rgba(2,6,23,0.88) 100%); transition: background 0.4s ease; }
.card:hover .card-overlay { background: linear-gradient(180deg, rgba(2,6,23,0.10) 0%, rgba(5,190,215,0.30) 45%, rgba(2,6,23,0.92) 100%); }
.card-body { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; }
.card-label { position: relative; display: inline-block; width: fit-content; font-size: 21px; font-weight: 700; color: #fff; letter-spacing: -0.3px; line-height: 1.2; transition: transform 0.35s ease; }
.card-label::after { content: ""; position: absolute; left: 0; bottom: -9px; height: 3px; width: 0; background: var(--vb-color-accent); border-radius: 2px; transition: width 0.4s ease; }
.card:hover .card-label { transform: translateY(-3px); }
.card:hover .card-label::after { width: 42px; }
.card-go { position: absolute; top: 18px; right: 18px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.28); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0; transform: scale(0.6) rotate(-12deg); transition: opacity 0.35s ease, transform 0.35s ease, background 0.25s ease; }
.card:hover .card-go { opacity: 1; transform: scale(1) rotate(0); }
.card-go:hover, .card:hover .card-go { background: var(--vb-color-accent); border-color: var(--vb-color-accent); }
.card-go svg { width: 16px; height: 16px; }
.grid-bot .card { height: 260px; }

@media (max-width: 900px) {
	.grid-top { grid-template-columns: 1fr; height: auto; }
	.grid-top .card.large { height: 320px; }
	.right-stack { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
	.right-stack .card { height: 240px; }
	.grid-bot { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
	.right-stack { grid-template-columns: 1fr; }
	.grid-bot { grid-template-columns: 1fr; }
	.sec-head h2 { font-size: 26px; }
}

/* ---------- 4. VENDING-MACHINE SHOWCASE (.vm) ---------- */
.vm-section {
	background: #fff;
	padding: 60px 0;
	position: relative;
}

.vm-header {
	text-align: center;
	margin: 0 auto 50px;
	padding: 0 24px;
	max-width: 960px;
}

.vm-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	background: #f0f9fb;
	border: 1px solid #b2e4ec;
	border-radius: 999px;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--vb-color-primary-dark);
	margin-bottom: 16px;
}

.vm-label .dot {
	width: 6px; height: 6px;
	background: var(--vb-color-primary);
	border-radius: 50%;
	animation: vb-pulse 2s infinite;
}

@keyframes vb-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.5; transform: scale(1.3); }
}

.vm-heading {
	font-size: 38px;
	font-weight: 700;
	color: var(--vb-color-text);
	line-height: 1.15;
	letter-spacing: -0.5px;
	margin-bottom: 12px;
}

.vm-heading .accent { color: var(--vb-color-primary); }

.vm-subheading {
	color: var(--vb-color-muted);
	font-size: 16px;
	line-height: 1.7;
	max-width: 820px;
	margin: 0 auto;
}

.vm-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 60px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 60px;
}

.vm-image-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	height: 480px;
}

.vm-ring { position: absolute; border-radius: 50%; pointer-events: none; }
.vm-ring.r1 { width: 340px; height: 340px; border: 1px solid rgba(23,163,182,0.15); }
.vm-ring.r2 { width: 260px; height: 260px; border: 1px solid rgba(23,163,182,0.10); }
.vm-ring.r3 { width: 420px; height: 420px; border: 1px dashed rgba(23,163,182,0.08); animation: vb-rotate 40s linear infinite; }

@keyframes vb-rotate { to { transform: rotate(360deg); } }

.vm-platform {
	position: absolute;
	bottom: 40px;
	width: 280px;
	height: 40px;
	background: radial-gradient(ellipse, rgba(23,163,182,0.15) 0%, transparent 70%);
	border-radius: 50%;
}

.vm-machine-img {
	position: relative;
	z-index: 3;
	max-height: 420px;
	max-width: 100%;
	object-fit: contain;
	transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.4,0,0.2,1);
	animation: vb-float 4s ease-in-out infinite;
}

@keyframes vb-float {
	0%, 100% { transform: translateY(0px); }
	50%      { transform: translateY(-12px); }
}

.vm-machine-img.fading {
	opacity: 0;
	transform: translateY(16px) scale(0.96);
	animation: none;
}

.vm-text-side { position: relative; min-height: 300px; }

.vm-tabs {
	display: flex;
	gap: 0;
	margin-bottom: 32px;
	border-bottom: 1px solid #e2e8f0;
}

.vm-tab {
	padding: 10px 20px;
	font-size: 13px;
	color: #406ca9 !important;
	cursor: pointer;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: all 0.25s ease;
	user-select: none;
	letter-spacing: 0.3px;
	background: none;
	font-family: inherit;
}

.vm-tab:hover { color: #475569; }

.vm-tab.active {
	color: var(--vb-color-primary);
	border-bottom-color: var(--vb-color-primary);
	font-weight: 600;
}

.vm-panel { display: none; }
.vm-panel.active { display: block; animation: vb-fadeUp 0.35s ease; }

@keyframes vb-fadeUp {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

.vm-step-label {
	font-size: 11px;
	letter-spacing: 3px;
	color: var(--vb-color-primary);
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.vm-step-label::before {
	content: "";
	display: inline-block;
	width: 32px;
	height: 1px;
	background: linear-gradient(90deg, var(--vb-color-primary), transparent);
}

.vm-panel h3 {
	font-size: 34px;
	font-weight: 700;
	color: var(--vb-color-text);
	letter-spacing: -0.5px;
	margin-bottom: 8px;
}

.vm-highlight {
	color: var(--vb-color-primary);
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 16px;
}

.vm-panel p {
	color: #4a5568;
	font-size: 16px;
	line-height: 1.65;
	margin-bottom: 24px;
	max-width: 420px;
}

.vm-tags { display: flex; flex-wrap: wrap; gap: 8px; }

.vm-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 13px;
	color: #475569;
	font-weight: 500;
	transition: all 0.25s ease;
}

.vm-tag::before {
	content: "";
	width: 5px; height: 5px;
	background: var(--vb-color-primary);
	border-radius: 50%;
	flex-shrink: 0;
}

.vm-tag:hover {
	background: #f0f9fb;
	border-color: #b2e4ec;
	color: var(--vb-color-primary-dark);
}

.vm-progress-bar {
	height: 3px;
	background: #e2e8f0;
	border-radius: 999px;
	margin-top: 40px;
	overflow: hidden;
}

.vm-progress-fill {
	height: 100%;
	background: var(--vb-color-primary);
	border-radius: 999px;
	transition: width 0.4s ease;
	width: 25%;
}

.vm-nav { display: flex; align-items: center; gap: 12px; margin-top: 24px; }

.vm-nav-btn {
	width: 36px; height: 36px;
	border-radius: 50%;
	border: 1px solid #e2e8f0;
	background: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	color: #475569 !important;
	font-size: 16px;
	font-family: inherit;
}

.vm-nav-btn:hover {
	border-color: var(--vb-color-primary);
	color: var(--vb-color-primary);
	background: #f0f9fb;
}

.vm-nav-count { font-size: 13px; color: #94a3b8; letter-spacing: 1px; }

@media (max-width: 768px) {
	/* minmax(0,1fr) + min-width:0 stop the text column blowing past the
	 * viewport (a plain 1fr track is minmax(auto,1fr) and can overflow). */
	.vm-body { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 0 20px; }
	.vm-text-side, .vm-image-wrap { min-width: 0; max-width: 100%; }
	.vm-text-side { min-height: 0; }
	.vm-image-wrap { height: 300px; }
	.vm-machine-img { max-height: 280px; }
	/* keep the decorative rings inside a phone screen */
	.vm-ring.r1 { width: 260px; height: 260px; }
	.vm-ring.r2 { width: 200px; height: 200px; }
	.vm-ring.r3 { width: 320px; height: 320px; }
	.vm-heading { font-size: 28px; }
	.vm-panel h3 { font-size: 26px; }
	.vm-panel p, .vm-highlight, .vm-step-label { overflow-wrap: anywhere; }
	.vm-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.vm-tabs::-webkit-scrollbar { display: none; }
	.vm-tab { white-space: nowrap; padding: 10px 14px; flex-shrink: 0; }
}

/* ---------- 4b. MANIFESTO (scroll-pinned statements) ---------- */
.vb-manifesto {
	position: relative;
	height: auto;
	background: radial-gradient(ellipse at 50% 28%, #0c1c33 0%, #070f1c 60%, #050b14 100%);
}

.vb-manifesto__sticky {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 92px 24px;
	color: #fff;
}

.vb-manifesto__glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 22% 26%, rgba(23,163,182,0.16), transparent 52%),
		radial-gradient(circle at 80% 76%, rgba(129,140,248,0.13), transparent 52%);
	transition: filter 1.2s ease;   /* smooth per-statement hue shift */
}

/* faint grid that fades out toward the edges */
.vb-manifesto__grid {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse at center, #000 18%, transparent 72%);
	-webkit-mask-image: radial-gradient(ellipse at center, #000 18%, transparent 72%);
}

/* cinematic vignette */
.vb-manifesto__sticky::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse at center, transparent 52%, rgba(3, 8, 16, 0.72) 100%);
}

/* giant ghosted index numeral behind the statement */
.vb-manifesto__num {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	font-family: var(--vb-font-heading);
	font-size: clamp(220px, 42vw, 640px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.05em;
	color: rgba(255, 255, 255, 0.028);
	pointer-events: none;
	user-select: none;
}

.vb-manifesto__eyebrow {
	position: absolute;
	top: 12.5%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--vb-color-accent);
	white-space: nowrap;
}
.vb-manifesto__eyebrow-line {
	width: 34px;
	height: 2px;
	border-radius: 2px;
	background: var(--vb-color-accent);
	opacity: 0.8;
}

.vb-manifesto__stage {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1100px;
	min-height: 42vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vb-manifesto__line {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease, visibility 0.5s;
}
.vb-manifesto__line.is-active { opacity: 1; visibility: visible; }

/* per-statement icon */
.vb-manifesto__icon {
	color: var(--vb-color-accent);
	opacity: 0.9;
	transform: translateY(12px) scale(0.88);
	transition: transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.6s ease;
}
.vb-manifesto__icon svg { width: clamp(38px, 4.4vw, 56px); height: clamp(38px, 4.4vw, 56px); }
.vb-manifesto__line.is-active .vb-manifesto__icon { transform: none; }

/* statement text */
.vb-manifesto__text {
	display: block;
	font-size: clamp(32px, 5.6vw, 72px);
	font-weight: 800;
	letter-spacing: -2px;
	line-height: 1.06;
	color: #ffffff;
	text-shadow: 0 8px 44px rgba(0, 0, 0, 0.4);
}
.vb-manifesto__text em { font-style: normal; color: var(--vb-color-accent); }

/* kinetic word reveal (words wrapped by JS) */
.vb-manifesto__text .w {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.6em);
	filter: blur(8px);
	transition: opacity 0.55s ease,
	            transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
	            filter 0.55s ease;
}
.vb-manifesto__line.is-active .vb-manifesto__text .w {
	opacity: 1;
	transform: none;
	filter: blur(0);
}

/* scroll cue — shown only on the first statement */
.vb-manifesto__cue {
	position: absolute;
	bottom: 10.5%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, 0.6);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease;
}
.vb-manifesto__cue svg { width: 20px; height: 20px; animation: vb-manifesto-bounce 1.8s ease-in-out infinite; }
@keyframes vb-manifesto-bounce {
	0%, 100% { transform: translateY(0); opacity: 0.6; }
	50%      { transform: translateY(6px); opacity: 1; }
}
/* Slider nav arrows */
.vb-manifesto__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.8);
	background: rgba(6, 16, 30, 0.55);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.vb-manifesto__arrow:hover {
	background: var(--vb-color-accent);
	border-color: var(--vb-color-accent);
	box-shadow: 0 10px 30px rgba(23, 163, 182, 0.5);
}
.vb-manifesto__arrow:active { transform: translateY(-50%) scale(0.92); }
.vb-manifesto__arrow svg { width: 28px; height: 28px; min-width: 28px; flex: 0 0 auto; display: block; stroke: #fff; fill: none; }
.vb-manifesto__arrow--prev { left: clamp(16px, 4vw, 64px); }
.vb-manifesto__arrow--next { right: clamp(16px, 4vw, 64px); }

/* counter + progress bar */
.vb-manifesto__foot {
	position: absolute;
	bottom: 11%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	transition: opacity 0.5s ease;
}
.vb-manifesto__counter {
	font-family: var(--vb-font-heading);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.5);
}
.vb-manifesto__cur { color: #fff; }
.vb-manifesto__sep { margin: 0 7px; color: rgba(255, 255, 255, 0.25); }
.vb-manifesto__bar {
	width: 200px;
	height: 2px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.12);
	overflow: hidden;
}
.vb-manifesto__bar-fill {
	height: 100%;
	width: 100%;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--vb-color-primary), var(--vb-color-accent));
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform 0.15s linear;
}

@media (max-width: 768px) {
	.vb-manifesto { height: auto; }
	.vb-manifesto__num { font-size: 46vw; }
	.vb-manifesto__eyebrow { top: 11%; font-size: 11px; letter-spacing: 0.2em; }
	.vb-manifesto__eyebrow-line { width: 24px; }
	.vb-manifesto__line { gap: 18px; padding: 0 8px; }
	.vb-manifesto__text { letter-spacing: -1px; }
	.vb-manifesto__foot, .vb-manifesto__cue { bottom: 9%; }
	.vb-manifesto__bar { width: 150px; }
	.vb-manifesto__arrow {
		/* move down out of the centred statement text */
		top: auto;
		bottom: 20%;
		transform: none;
		/* force a perfect circle regardless of default button padding */
		width: 40px;
		height: 40px;
		min-width: 0;
		padding: 0;
		box-sizing: border-box;
		aspect-ratio: 1 / 1;
		border-width: 1px;
		border-color: rgba(255, 255, 255, 0.45);
		background: rgba(255, 255, 255, 0.06);
		box-shadow: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	.vb-manifesto__arrow:active { transform: scale(0.92); }
	.vb-manifesto__arrow svg { width: 17px; height: 17px; }
	.vb-manifesto__arrow--prev { left: 14px; }
	.vb-manifesto__arrow--next { right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.vb-manifesto__text .w,
	.vb-manifesto__icon {
		transition: opacity 0.3s ease !important;
		transform: none !important;
		filter: none !important;
		transition-delay: 0s !important;
	}
	.vb-manifesto__cue svg { animation: none; }
}

/* ---------- 5. ADVERTISE (.ads) ---------- */
.ads-wrap { padding: 100px 60px 90px; }

.ads-top {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	align-items: center;
	gap: 80px;
	max-width: 1320px;
	margin: 0 auto;
}

.ads-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: #0e7d95;
	font-weight: 600;
	margin-bottom: 20px;
}

.ads-eyebrow-line {
	width: 28px; height: 1.5px;
	background: var(--vb-color-primary);
	border-radius: 2px;
}

.ads-h2 {
	font-size: 54px;
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -1.5px;
	color: #0d1117;
	margin-bottom: 20px;
}

.ads-h2 .line2 { color: var(--vb-color-primary); }

.ads-sub {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--vb-color-primary);
	max-width: 480px;
	margin-bottom: 24px;
}

.ads-lead {
	font-size: 17px;
	line-height: 1.7;
	color: #4a5568;
	max-width: 480px;
	margin-bottom: 48px;
}

.ads-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	max-width: 400px;
}

.ads-stat {
	background: #f8fafc;
	border: 1px solid #e8edf2;
	border-radius: 16px;
	padding: 22px 20px 18px;
	position: relative;
	overflow: hidden;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.ads-stat::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--vb-color-primary);
	border-radius: 16px 16px 0 0;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.ads-stat:hover { border-color: #b2dde6; transform: translateY(-3px); }
.ads-stat:hover::before { opacity: 1; }

.ads-stat-num {
	display: block;
	font-size: 38px;
	font-weight: 800;
	color: #0D5A83;
	line-height: 1;
	letter-spacing: -1px;
	margin-bottom: 6px;
}

.ads-stat-label { font-size: 13px; color: #718096; letter-spacing: 0.2px; }

.ads-image-col { position: relative; }

.ads-img-frame {
	position: relative;
	border-radius: 24px;
	overflow: hidden;
	aspect-ratio: 4/5;
	background: #e8f4f8;
}

.ads-img-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 24px;
}

/* Square (1:1) frame + video when an ACF video is set */
.ads-img-frame--video { aspect-ratio: 1 / 1; }

.ads-img-frame video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 24px;
}

.ads-badge {
	position: absolute;
	bottom: 28px;
	left: -24px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 14px 20px;
	box-shadow: 0 8px 30px rgba(0,0,0,0.1);
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 200px;
}

.ads-badge-icon {
	width: 40px; height: 40px;
	background: #e6f6f9;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ads-badge-icon svg { width: 20px; height: 20px; }

.ads-badge-text strong {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: #0d1117;
	line-height: 1.2;
}

.ads-badge-text span { font-size: 12px; color: #718096; }

.ads-badge2 {
	position: absolute;
	top: 28px;
	right: -20px;
	background: #0D5A83;
	border-radius: 14px;
	padding: 12px 18px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	box-shadow: 0 8px 24px rgba(13,90,131,0.3);
}

.ads-badge2 span {
	display: block;
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
	margin-bottom: 2px;
}

.ads-cta {
	margin: 80px auto 3%;
	background: #444444;
	border-radius: 24px;
	padding: 52px 60px;
	max-width: 1320px;
}

.ads-cta-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
	flex-wrap: wrap;
}

.ads-cta-text h3 {
	font-size: 30px;
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.5px;
	margin-bottom: 8px;
	line-height: 1.2;
}

.ads-cta-text p {
	font-size: 26px;
	font-weight: 700;
	color: #fff;
	letter-spacing: -0.4px;
	line-height: 1.3;
	max-width: 680px;
}

.ads-btns { display: flex; gap: 12px; flex-shrink: 0; }

.ads-content-cta { margin-top: 30px; }

.ads-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 14px 26px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s ease;
	cursor: pointer;
	border: none;
	font-family: inherit;
	letter-spacing: 0.1px;
}

.ads-btn-primary { background: var(--vb-color-primary); color: #fff; }
.ads-btn-primary:hover { background: #138fa0; transform: translateY(-2px); color: #fff; }

.ads-btn-ghost {
	background: rgba(255,255,255,0.07);
	color: #e2e8f0;
	border: 1px solid rgba(255,255,255,0.12);
}

.ads-btn-ghost:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); color: #e2e8f0; }

@media (max-width: 1024px) {
	.ads-h2 { font-size: 42px; }
	.ads-badge { left: 0; }
	.ads-badge2 { right: 0; }
}

@media (max-width: 768px) {
	.ads-wrap { padding: 60px 20px 56px; }
	.ads-top { grid-template-columns: 1fr; gap: 40px; }
	.ads-h2 { font-size: 34px; }
	.ads-sub { font-size: 18px; }
	.ads-lead { max-width: none; }
	.ads-stats { max-width: 100%; }
	.ads-image-col { order: -1; }
	.ads-badge { left: 10px; bottom: 16px; }
	.ads-badge2 { right: 10px; top: 16px; }
	.ads-cta { border-radius: 16px 16px 0 0; padding: 36px 24px; margin-top: 50px; }
	.ads-cta-text p { font-size: 21px; }
	.ads-cta-inner { flex-direction: column; align-items: flex-start; }
	.ads-btns { flex-direction: column; width: 100%; }
	.ads-btn { justify-content: center; }
}

/* ---------- 6. CLIENTS MARQUEE (.cl) ---------- */
.cl-section {
	background: #043157;
	padding: 100px 0 0;
	overflow: hidden;
	position: relative;
}

.cl-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
	background-size: 48px 48px;
	pointer-events: none;
}

.cl-section::after {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 120px;
	background: linear-gradient(180deg, #0d1117 0%, transparent 100%);
	pointer-events: none;
	z-index: 2;
}

.cl-header {
	text-align: center;
	padding: 0 24px 60px;
	position: relative;
	z-index: 3;
}

.cl-title {
	font-size: 42px;
	font-weight: 800;
	color: #fff;
	letter-spacing: -1px;
	line-height: 1.1;
	margin-bottom: 14px;
}

.cl-title span { color: var(--vb-color-primary); }

.cl-rows {
	position: relative;
	padding-bottom: 80px;
}

.cl-rows::before,
.cl-rows::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 160px;
	z-index: 4;
	pointer-events: none;
}

.cl-rows::before { left: 0; background: linear-gradient(90deg, #0d1117 0%, transparent 100%); }
.cl-rows::after  { right: 0; background: linear-gradient(270deg, #0d1117 0%, transparent 100%); }

.cl-row {
	display: flex;
	overflow: hidden;
	/* vertical padding gives the hover lift (translateY(-4px)) room inside the
	 * clip box so the logo isn't cut off at the top */
	padding: 8px 0;
	margin-bottom: 12px;
}

.cl-track {
	display: flex;
	align-items: center;
	will-change: transform;
	animation: vb-marquee-left 160s linear infinite;
}

.cl-row.rev .cl-track { animation: vb-marquee-right 176s linear infinite; }

.cl-row:hover .cl-track { animation-play-state: paused; }

.cl-logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 72px;
	padding: 0 28px;
	background: rgba(255, 255, 255, 0.79);
	border: 1px solid rgb(116 239 251 / 44%);
	border-radius: 14px;
	min-width: 160px;
	/* trailing margin (not track `gap`) so both marquee halves tile identically
	 * — keeps the -50% loop seamless with no sliver at the wrap point */
	margin-right: 16px;
	transition: background 0.7s ease-in-out, border-color 0.3s ease, transform 0.3s ease;
	cursor: default;
}

.cl-logo:hover {
	background: #fff;
	border: 1px solid rgb(116 239 251 / 44%);
	transform: translateY(-4px);
}

.cl-logo img {
	max-height: 36px;
	max-width: 120px;
	width: auto;
	object-fit: contain;
	opacity: 0.85;
	transition: opacity 0.3s ease;
}

.cl-logo:hover img { opacity: 1; }

@keyframes vb-marquee-left {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@keyframes vb-marquee-right {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

@media (max-width: 768px) {
	.cl-title { font-size: 30px; }
	.cl-track { animation-duration: 96s; }
	.cl-logo { min-width: 130px; height: 60px; padding: 0 18px; margin-right: 12px; }
	.cl-logo img { max-height: 28px; max-width: 96px; }
	.cl-rows::before, .cl-rows::after { width: 60px; }
}

/* ---------- 7. APP DOWNLOAD BANNER ---------- */
.vb-app-banner {
	display: flex;
	justify-content: center;
	padding: 56px 0 0;
	background: #fff;
}

.vb-app-banner img {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
}

/* ---------- 8. ENQUIRY FORM (.fs) ---------- */
.fs { padding: 48px 20px; font-family: sans-serif; }

.fc {
	max-width: 1100px;
	margin: auto;
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 56px;
	align-items: center;
}

.fl h2 {
	font-size: 32px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--vb-color-ink);
	margin-bottom: 12px;
}

.fl h2 em { font-style: normal; color: var(--vb-color-accent); }

.fl > p {
	font-size: 14px;
	color: var(--vb-color-muted);
	line-height: 1.7;
	margin-bottom: 32px;
	max-width: 420px;
}

.pts { display: flex; flex-direction: column; gap: 16px; }

.pt { display: flex; align-items: flex-start; gap: 12px; }

.pt-icon {
	width: 34px; height: 34px;
	border-radius: 8px;
	background: #f1f5f9;
	border: 0.5px solid #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.pt-icon svg { width: 16px; height: 16px; stroke: var(--vb-color-accent); fill: none; stroke-width: 2; stroke-linecap: round; }

.pt-body strong {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--vb-color-ink);
	margin-bottom: 2px;
}

.pt-body span { font-size: 12px; color: var(--vb-color-muted); line-height: 1.5; }

.ccard {
	background: #fff;
	border: 0.5px solid #e2e8f0;
	border-radius: 16px;
	padding: 32px;
	box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.prog-wrap { display: flex; gap: 6px; margin-bottom: 28px; }

.prog-seg {
	flex: 1;
	height: 4px;
	border-radius: 99px;
	background: #e2e8f0;
	transition: background 0.3s;
}

.prog-seg.done { background: var(--vb-color-accent); }

.step-label {
	font-size: 11px;
	color: #94a3b8;
	margin-bottom: 4px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.step-title {
	font-size: 20px;
	font-weight: 600;
	color: var(--vb-color-ink);
	margin-bottom: 24px;
}

.fs .step { display: none; }
.fs .step.active { display: block; }

.fg { margin-bottom: 14px; }

.fg label {
	display: block;
	font-size: 12px;
	color: var(--vb-color-muted);
	margin-bottom: 5px;
}

.fg input, .fg select, .fg textarea {
	width: 100%;
	padding: 10px 12px;
	border-radius: 8px;
	border: 0.5px solid #cbd5e1;
	background: #f8fafc;
	color: var(--vb-color-ink);
	font-size: 14px;
	font-family: sans-serif;
	transition: border-color 0.2s;
	appearance: none;
	-webkit-appearance: none;
}

.fg select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-color: #f8fafc;
	padding-right: 32px;
}

.fg input:focus, .fg select:focus, .fg textarea:focus {
	border-color: var(--vb-color-accent);
	outline: none;
	background: #fff;
}

.fg textarea { resize: none; height: 88px; line-height: 1.6; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.fn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 24px;
}

.btn-back {
	background: transparent;
	border: 0.5px solid #cbd5e1;
	color: var(--vb-color-muted);
	padding: 10px 20px;
	border-radius: 8px;
	font-size: 14px;
	font-family: sans-serif;
	cursor: pointer;
	transition: background 0.2s;
}

.btn-back:hover { background: #f1f5f9; }
.btn-back:disabled { opacity: 0.3; cursor: default; }

.btn-next {
	background: #020617;
	color: #fff;
	border: none;
	padding: 10px 24px;
	border-radius: 8px;
	font-size: 14px;
	font-family: sans-serif;
	font-weight: 500;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: opacity 0.2s;
}

.btn-next:hover { opacity: 0.85; }

.btn-submit {
	background: var(--vb-color-accent);
	color: #fff;
	border: none;
	padding: 10px 24px;
	border-radius: 8px;
	font-size: 14px;
	font-family: sans-serif;
	font-weight: 500;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
}

.step-counter { font-size: 12px; color: #94a3b8; }

.success-state {
	display: none;
	text-align: center;
	padding: 24px 0;
}

.success-icon {
	width: 56px; height: 56px;
	background: rgba(5,190,215,0.12);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}

.success-icon svg { width: 24px; height: 24px; stroke: var(--vb-color-accent); fill: none; stroke-width: 2.5; stroke-linecap: round; }

.success-state h3 { font-size: 18px; font-weight: 600; color: var(--vb-color-ink); margin-bottom: 8px; }
.success-state p  { font-size: 14px; color: var(--vb-color-muted); line-height: 1.6; }

@media (max-width: 700px) {
	.fc { grid-template-columns: 1fr; gap: 32px; }
	.fl h2 { font-size: 26px; }
	.row2 { grid-template-columns: 1fr; }
}

/* ============================================================
 * "Where We Operate" — page-specific styles
 * ============================================================ */

/* ============================================================
 * Text-only hero (reusable) — dark gradient + glows, no media.
 * Use on inner pages that only need a heading + subheading.
 * ============================================================ */
.vb-texthero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	/* fixed banner height — identical on every page regardless of content.
	   The floor stops it collapsing on short viewports; top padding clears
	   the absolute header. */
	height: 90vh;
	min-height: 560px;
	padding: 96px 24px 44px;
	text-align: center;
	color: #fff;
	background:
		radial-gradient(circle at 16% 18%, rgba(23, 163, 182, 0.22), transparent 55%),
		radial-gradient(circle at 84% 26%, rgba(129, 140, 248, 0.16), transparent 55%),
		linear-gradient(180deg, #050b14 0%, #0a1628 100%);
}

/* Optional background photo (ACF field hero_bg_image) with a dark scrim so the
   heading stays readable. Brand glows are kept on top of the image. */
.vb-texthero.has-bg {
	background:
		radial-gradient(circle at 16% 18%, rgba(23, 163, 182, 0.18), transparent 55%),
		radial-gradient(circle at 84% 26%, rgba(129, 140, 248, 0.14), transparent 55%),
		linear-gradient(180deg, rgba(5, 11, 20, 0.66) 0%, rgba(10, 22, 40, 0.82) 100%),
		var(--hero-bg) center / cover no-repeat;
}

/* Optional background video (ACF field hero_bg_video). Sits behind the content
   with a dark scrim on top so the heading stays readable. Takes precedence over
   the image, which becomes the poster/fallback frame. */
.vb-texthero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
}
.vb-texthero__scrim {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 16% 18%, rgba(23, 163, 182, 0.18), transparent 55%),
		radial-gradient(circle at 84% 26%, rgba(129, 140, 248, 0.14), transparent 55%),
		linear-gradient(180deg, rgba(5, 11, 20, 0.66) 0%, rgba(10, 22, 40, 0.82) 100%);
}

/* "Bare" hero (About Us): no gradient, no dark scrim, no grid texture and no
   text — just the ACF background image/video. Falls back to a flat dark colour
   when no media is set. Rules come after the base so they win at equal weight. */
.vb-texthero--bare { background: #050b14; }
.vb-texthero--bare.has-bg {
	background: var(--hero-bg) center / cover no-repeat;
}
.vb-texthero--bare::after { display: none; }
.vb-texthero--bare .vb-texthero__scrim { display: none; }

/* faint grid texture, fading out toward the edges */
.vb-texthero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse at center, #000 25%, transparent 80%);
	-webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 80%);
	pointer-events: none;
}

.vb-texthero__inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 0 auto;
}

.vb-texthero__eyebrow {
	display: inline-flex;
	align-items: center;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vb-color-accent);
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(23, 163, 182, 0.12);
	border: 1px solid rgba(23, 163, 182, 0.32);
	margin-bottom: 26px;
}

.vb-texthero__title {
	font-size: 60px;
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -1.6px;
	color: #ffffff;
	margin: 0 0 22px;
}

.vb-texthero__title em {
	font-style: normal;
	background: linear-gradient(90deg, var(--vb-color-primary), var(--vb-color-accent));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.vb-texthero__sub {
	font-size: 19px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.72);
	max-width: 680px;
	margin: 0 auto;
}

@media (max-width: 768px) {
	.vb-texthero { height: auto; min-height: 66vh; padding: 120px 20px 56px; }
	.vb-texthero__title { font-size: 38px; letter-spacing: -1px; }
	.vb-texthero__sub { font-size: 16.5px; }
}

/* ----- Two contexts split section ----- */
.wwp-split {
	padding: 100px 32px;
	background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
}

.wwp-split__head {
	max-width: 900px;
	margin: 0 auto 56px;
	text-align: center;
}

.wwp-split__title {
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -1.2px;
	line-height: 1.12;
	color: var(--vb-color-ink);
	margin: 0;
}
.wwp-split__title em { font-style: normal; color: var(--vb-color-primary); }

.wwp-split__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	max-width: 1160px;
	margin: 0 auto;
	align-items: start;
}

.wwp-split__card {
	background: #ffffff;
	border: 1px solid #e6e9f0;
	border-radius: 22px;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.wwp-split__card:hover {
	transform: translateY(-6px);
	border-color: var(--accent);
	box-shadow: 0 28px 55px -28px rgba(13, 22, 40, 0.28);
}

.wwp-split__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.wwp-split__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.wwp-split__card:hover .wwp-split__media img { transform: scale(1.06); }

.wwp-split__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 38%, rgba(5, 11, 20, 0.82) 100%);
}

.wwp-split__tag {
	position: absolute;
	left: 24px;
	bottom: 22px;
	z-index: 2;
	max-width: 82%;
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.3px;
	line-height: 1.2;
	color: #ffffff;
}
.wwp-split__tag::before {
	content: "";
	display: block;
	width: 40px;
	height: 4px;
	border-radius: 2px;
	background: var(--accent);
	margin-bottom: 12px;
}

.wwp-split__body {
	padding: 26px 28px 30px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.wwp-split__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}
.wwp-split__chips li {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--vb-color-ink);
	padding: 7px 14px;
	border-radius: 999px;
	background: #f1f5f9;                                   /* fallback */
	background: color-mix(in srgb, var(--accent) 9%, #fff);
	border: 1px solid #e6e9f0;                             /* fallback */
	border: 1px solid color-mix(in srgb, var(--accent) 30%, #fff);
}

.wwp-split__copy {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--vb-color-muted);
	margin: 0;
}
.wwp-split__copy strong {
	display: block;
	color: var(--vb-color-ink);
	font-weight: 700;
	margin-bottom: 6px;
}

@media (max-width: 860px) {
	.wwp-split { padding: 70px 20px; }
	.wwp-split__title { font-size: 32px; }
	.wwp-split__grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ----- Hero (extends .vb-hero / .hero-overlay from home) ----- */
.wwp-hero { min-height: 88vh; }

.wwp-hero__overlay {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 88vh;
	padding: 140px 40px 80px;
	max-width: 1280px;
}

.wwp-hero__content { max-width: 820px; }

.wwp-hero__title {
	font-size: 64px;
	margin-bottom: 22px;
}

.wwp-hero__desc {
	font-size: 19px;
	color: #D1D5DB;
	max-width: 640px;
	margin-bottom: 36px;
}

/* CTAs */
.wwp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.wwp-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 26px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none !important;
	transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	border: 1px solid transparent;
	cursor: pointer;
	font-family: inherit;
}

.wwp-btn--primary {
	background: var(--vb-color-primary);
	color: #fff;
	border-color: var(--vb-color-primary);
}

.wwp-btn--primary:hover {
	background: #138fa0;
	border-color: #138fa0;
	color: #fff;
	transform: translateY(-2px);
}

.wwp-btn--ghost {
	background: rgba(255,255,255,0.06);
	color: #fff;
	border-color: rgba(255,255,255,0.18);
	backdrop-filter: blur(6px);
}

.wwp-btn--ghost:hover {
	background: rgba(255,255,255,0.12);
	border-color: rgba(255,255,255,0.3);
	color: #fff;
	transform: translateY(-2px);
}

@media (max-width: 1024px) {
	.wwp-hero__overlay { padding: 120px 24px 60px; }
	.wwp-hero__title { font-size: 44px; }
}

@media (max-width: 600px) {
	.wwp-hero__title { font-size: 34px; }
	.wwp-hero__desc  { font-size: 16px; }
}

/* ----- Trust block — stats + bordered features in one section ----- */
.wwp-trust {
	background: #fff;
	padding: 64px 32px 0;
	font-family: sans-serif;
	position: relative;
}

.wwp-trust .stats-grid {
	margin-bottom: 16px;
}

.wwp-features__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1100px;
}

.wwp-features__list li {
	padding: 14px 28px;
	color: #475569;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.01em;
	border-right: 1px solid #e2e8f0;
	white-space: nowrap;
}

.wwp-features__list li:last-child { border-right: 0; }

/* Separator between this section and the next */
.wwp-trust::after {
	content: "";
	display: block;
	width: min(82%, 880px);
	height: 1px;
	margin: 56px auto 0;
	background: linear-gradient(90deg, transparent, #cbd5e1 50%, transparent);
}

@media (max-width: 1024px) {
	.wwp-trust { padding: 48px 20px 0; }
	.wwp-features__list li { padding: 12px 20px; font-size: 13.5px; }
	.wwp-trust::after { margin-top: 40px; }
}

@media (max-width: 720px) {
	.wwp-features__list { flex-direction: column; }
	.wwp-features__list li {
		border-right: 0;
		border-bottom: 1px solid #e2e8f0;
		padding: 12px 0;
		white-space: normal;
		text-align: center;
	}
	.wwp-features__list li:last-child { border-bottom: 0; }
}

/* ----- Verticals intro (small header above the industry sections) ----- */
.wwp-verticals-intro {
	padding: 100px 32px 40px;
	background: #fff;
}

.wwp-verticals__head {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.wwp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--vb-color-primary-dark);
	font-weight: 600;
	margin-bottom: 16px;
}

.wwp-eyebrow__line {
	width: 28px;
	height: 1.5px;
	background: var(--vb-color-primary);
	border-radius: 2px;
}

.wwp-verticals__title {
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -1.2px;
	color: var(--vb-color-ink);
	line-height: 1.1;
	margin-bottom: 16px;
}

.wwp-verticals__title em {
	font-style: normal;
	color: var(--vb-color-primary);
}

.wwp-verticals__sub {
	font-size: 16px;
	line-height: 1.65;
	color: var(--vb-color-muted);
}

/* ----- Single industry section: full-width, alternating image/content ----- */
.wwp-industry {
	padding: 90px 32px;
	scroll-margin-top: 24px;
	position: relative;
	background: #ffffff;
	overflow: hidden;
}

.wwp-industry--shaded {
	background:
		radial-gradient(circle at 12% 30%, rgba(23,163,182,0.05), transparent 45%),
		linear-gradient(180deg, #f6f9fb 0%, #fbfdfe 100%);
}

.wwp-industry::after {
	content: "";
	position: absolute;
	left: 50%; transform: translateX(-50%);
	bottom: 0;
	width: min(80%, 900px);
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(23,163,182,0.18), transparent);
}

.wwp-industry__inner {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
}

/* Reverse image/content order on alternating rows */
.wwp-industry--reverse .wwp-industry__media   { order: 2; }
.wwp-industry--reverse .wwp-industry__content { order: 1; }

/* Media frame */
.wwp-industry__media { position: relative; }

.wwp-media-frame {
	position: relative;
	border-radius: 24px;
	overflow: hidden;
	aspect-ratio: 5 / 4;
	background:
		linear-gradient(135deg, rgba(23,163,182,0.10), rgba(5,190,215,0.04)),
		#eef4f7;
	box-shadow:
		0 24px 60px -20px rgba(13, 90, 131, 0.18),
		0 8px 24px -10px rgba(0,0,0,0.06);
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.wwp-industry:hover .wwp-media-frame {
	transform: translateY(-4px);
	box-shadow:
		0 30px 70px -20px rgba(13, 90, 131, 0.25),
		0 10px 28px -10px rgba(0,0,0,0.08);
}

.wwp-media-frame__img {
	position: absolute;
	inset: 0;
    max-width: max-content !important;
    height: 100% !important;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.wwp-industry:hover .wwp-media-frame__img { transform: scale(1.04); }

/* Big translucent index in the corner of the media frame */
.wwp-media-frame__index {
	position: absolute;
	top: 18px;
	left: 22px;
	z-index: 3;
	font-family: var(--vb-font-heading);
	font-size: 84px;
	font-weight: 800;
	line-height: 1;
	color: rgba(255,255,255,0.18);
	letter-spacing: -3px;
	text-shadow: 0 2px 30px rgba(0,0,0,0.2);
	pointer-events: none;
}

/* Floating teal pill bottom-right of the media frame */
.wwp-media-frame__badge {
	position: absolute;
	right: 18px;
	bottom: 18px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: rgba(255,255,255,0.92);
	backdrop-filter: blur(6px);
	border-radius: 999px;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vb-color-primary-dark);
	font-weight: 700;
	box-shadow: 0 6px 18px rgba(13, 90, 131, 0.18);
}

.wwp-media-frame__badge .dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--vb-color-primary);
	box-shadow: 0 0 0 3px rgba(23,163,182,0.18);
}

/* Image-less placeholder */
.wwp-media-frame__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: rgba(13, 90, 131, 0.45);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
}
.wwp-media-frame__placeholder svg { width: 42px; height: 42px; }

/* Content side */
.wwp-industry__content { max-width: 540px; }

.wwp-industry__title {
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -1px;
	color: var(--vb-color-ink);
	line-height: 1.12;
	margin-bottom: 18px;
}

.wwp-industry__desc {
	font-size: 16.5px;
	line-height: 1.7;
	color: #475569;
	margin-bottom: 24px;
}

.wwp-industry__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 28px;
}

.wwp-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 500;
	color: #475569;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wwp-tag::before {
	content: "";
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--vb-color-primary);
}

.wwp-industry:hover .wwp-tag {
	background: #f0f9fb;
	color: var(--vb-color-primary-dark);
	border-color: #b2dde6;
}

.wwp-industry__quote {
	position: relative;
	padding: 18px 22px 18px 56px;
	background: #fff;
	border: 1px solid #e5e9ef;
	border-left: 3px solid var(--vb-color-primary);
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.6;
	color: #475569;
	font-style: italic;
	box-shadow: 0 4px 18px rgba(13,90,131,0.04);
}

.wwp-industry__quote-icon {
	position: absolute;
	left: 18px;
	top: 16px;
	width: 26px;
	height: 26px;
	color: var(--vb-color-primary);
	opacity: 0.85;
}

@media (max-width: 1024px) {
	.wwp-industry { padding: 70px 24px; }
	.wwp-industry__inner { grid-template-columns: 1fr; gap: 40px; }
	.wwp-industry--reverse .wwp-industry__media   { order: 0; }
	.wwp-industry--reverse .wwp-industry__content { order: 1; }
	.wwp-industry__title  { font-size: 32px; }
	.wwp-verticals__title { font-size: 34px; }
	.wwp-media-frame__index { font-size: 64px; }
}

@media (max-width: 640px) {
	.wwp-verticals-intro { padding: 70px 20px 24px; }
	.wwp-industry { padding: 56px 20px; }
	.wwp-industry__title { font-size: 26px; }
	.wwp-verticals__title { font-size: 26px; }
	.wwp-media-frame__index { font-size: 52px; top: 12px; left: 16px; }
	.wwp-media-frame__badge { font-size: 10px; padding: 6px 12px; right: 12px; bottom: 12px; }
	.wwp-industry__quote { padding: 16px 18px 16px 50px; }
}

/* ----- Timeline — five-step process ----- */
.wwp-timeline {
	padding: 100px 32px;
	/* background:
		radial-gradient(circle at 85% 20%, rgba(5,190,215,0.06), transparent 50%),
		radial-gradient(circle at 10% 80%, rgba(23,163,182,0.06), transparent 50%),
		linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); */
	position: relative;
}

.wwp-timeline__head {
	max-width: 720px;
	margin: 0 auto 72px;
	text-align: center;
}

.wwp-timeline__title {
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -1.2px;
	color: var(--vb-color-ink);
	line-height: 1.1;
	margin-bottom: 16px;
}

.wwp-timeline__title em {
	font-style: normal;
	color: var(--vb-color-primary);
}

.wwp-timeline__sub {
	font-size: 16px;
	line-height: 1.65;
	color: var(--vb-color-muted);
}

.wwp-timeline__steps {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1240px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	position: relative;
}

/* Connector line behind the number circles */
.wwp-timeline__steps::before {
	content: "";
	position: absolute;
	top: 32px;
	left: 10%;
	right: 10%;
	height: 2px;
	background: repeating-linear-gradient(
		90deg,
		var(--vb-color-primary) 0,
		var(--vb-color-primary) 6px,
		transparent 6px,
		transparent 12px
	);
	z-index: 0;
}

.wwp-step {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 0 12px;
}

.wwp-step__num {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #ffffff;
	border: 2px solid var(--vb-color-primary);
	color: var(--vb-color-primary);
	font-family: var(--vb-font-heading);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 0.5px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 28px;
	box-shadow:
		0 8px 24px rgba(23,163,182,0.18),
		0 0 0 6px #ffffff;
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.wwp-step:hover .wwp-step__num {
	background: var(--vb-color-primary);
	color: #fff;
	transform: translateY(-4px);
	box-shadow:
		0 14px 28px rgba(23,163,182,0.32),
		0 0 0 6px #ffffff;
}

.wwp-step__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--vb-color-ink);
	letter-spacing: -0.3px;
	margin-bottom: 10px;
	line-height: 1.25;
}

.wwp-step__desc {
	font-size: 14px;
	line-height: 1.65;
	color: #475569;
	max-width: 240px;
	margin: 0 auto;
}

/* Mobile: vertical timeline (line on the left, content on the right) */
@media (max-width: 900px) {
	.wwp-timeline { padding: 70px 24px; }

	.wwp-timeline__steps {
		grid-template-columns: 1fr;
		gap: 0;
		max-width: 600px;
	}

	.wwp-timeline__steps::before {
		top: 32px;
		bottom: 32px;
		left: 32px;
		right: auto;
		width: 2px;
		height: auto;
		background: repeating-linear-gradient(
			180deg,
			var(--vb-color-primary) 0,
			var(--vb-color-primary) 6px,
			transparent 6px,
			transparent 12px
		);
	}

	.wwp-step {
		text-align: left;
		padding: 0 0 36px 96px;
		position: relative;
	}

	.wwp-step:last-child { padding-bottom: 0; }

	.wwp-step__num {
		position: absolute;
		left: 0;
		top: 0;
		margin: 0;
	}

	.wwp-step__desc { max-width: none; }
}

@media (max-width: 540px) {
	.wwp-timeline__title { font-size: 30px; }
	.wwp-step { padding-left: 84px; }
	.wwp-step__num { width: 56px; height: 56px; font-size: 18px; }
	.wwp-timeline__steps::before { left: 28px; }
}

/* ----- Testimonials — three modern partner-story cards ----- */
.wwp-testimonials {
	position: relative;
	padding: 110px 32px;
	background:
		radial-gradient(circle at 88% 12%, rgba(129, 140, 248, 0.08), transparent 50%),
		radial-gradient(circle at 8% 92%, rgba(23, 163, 182, 0.06), transparent 50%),
		linear-gradient(180deg, #fbfcff 0%, #f5f7fb 100%);
	overflow: hidden;
}

/* subtle dotted pattern in the background */
.wwp-testimonials::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px);
	background-size: 28px 28px;
	background-position: 0 0;
	mask-image: radial-gradient(circle at center, #000 0%, transparent 70%);
	-webkit-mask-image: radial-gradient(circle at center, #000 0%, transparent 70%);
	pointer-events: none;
}

.wwp-testimonials__head {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin: 0 auto 60px;
	text-align: center;
}

.wwp-testimonials__title {
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -1.2px;
	color: var(--vb-color-ink);
	line-height: 1.1;
	margin-bottom: 16px;
}

.wwp-testimonials__title em {
	font-style: normal;
	color: var(--vb-color-primary);
}

.wwp-testimonials__sub {
	font-size: 16px;
	line-height: 1.65;
	color: var(--vb-color-muted);
}

.wwp-testimonials__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 1240px;
	margin: 0 auto;
}

.wwp-testimonial {
	position: relative;
	background: #fff;
	border: 1px solid #e5e9ef;
	border-radius: 22px;
	padding: 44px 36px 36px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 24px rgba(15, 23, 42, 0.04);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
	overflow: hidden;
	min-height: 320px;
}

/* Top accent line that appears on hover */
.wwp-testimonial::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--vb-color-primary), var(--vb-color-mute));
	opacity: 0;
	transition: opacity 0.3s ease;
}

.wwp-testimonial:hover {
	transform: translateY(-6px);
	border-color: #c7d2fe;
	box-shadow: 0 24px 48px -16px rgba(79, 70, 229, 0.18);
}

.wwp-testimonial:hover::before { opacity: 1; }

/* Big decorative quote mark behind the text */
.wwp-testimonial__mark {
	position: absolute;
	top: -8px;
	left: 18px;
	width: 110px;
	height: 110px;
	color: var(--vb-color-primary);
	opacity: 0.16;
	z-index: 0;
	pointer-events: none;
	transition: opacity 0.3s ease, color 0.3s ease;
}

.wwp-testimonial:hover .wwp-testimonial__mark {
	opacity: 0.26;
	color: var(--vb-color-primary);
}

.wwp-testimonial__body {
	position: relative;
	z-index: 1;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.wwp-testimonial__quote {
	margin: 0 0 32px;
	font-size: 17.5px;
	line-height: 1.65;
	color: var(--vb-color-ink);
	font-weight: 500;
	letter-spacing: -0.2px;
	flex-grow: 1;
}

.wwp-testimonial__author {
	margin-top: auto;
}

/* Short gradient divider above the author info */
.wwp-testimonial__divider {
	width: 36px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--vb-color-primary), var(--vb-color-mute));
	margin-bottom: 16px;
}

.wwp-testimonial__role {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vb-color-mute-dark);
	font-weight: 700;
	margin-bottom: 6px;
}

.wwp-testimonial__org-line {
	font-size: 15px;
	font-weight: 700;
	color: var(--vb-color-ink);
	letter-spacing: -0.1px;
	line-height: 1.4;
}

.wwp-testimonial__sep {
	display: inline-block;
	margin: 0 6px;
	color: #cbd5e1;
	font-weight: 400;
}

.wwp-testimonial__place {
	font-weight: 500;
	color: var(--vb-color-muted);
}

@media (max-width: 1024px) {
	.wwp-testimonials { padding: 80px 24px; }
	.wwp-testimonials__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
	.wwp-testimonials__title { font-size: 34px; }
}

@media (max-width: 700px) {
	.wwp-testimonials { padding: 64px 20px; }
	.wwp-testimonials__grid { grid-template-columns: 1fr; }
	.wwp-testimonials__title { font-size: 28px; }
	.wwp-testimonial { padding: 28px 24px 22px; }
	.wwp-testimonial__quote { font-size: 15px; }
}

/* ----- FAQ — accordion of common questions ----- */
.wwp-faq {
	position: relative;
	padding: 110px 32px 120px;
	background:
		radial-gradient(circle at 50% -10%, rgba(129, 140, 248, 0.10), transparent 50%),
		linear-gradient(180deg, #fafbff 0%, #ffffff 60%);
	overflow: hidden;
}

.wwp-faq__head {
	max-width: 700px;
	margin: 0 auto 56px;
	text-align: center;
}

.wwp-faq__title {
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -1.2px;
	color: var(--vb-color-ink);
	line-height: 1.1;
	margin-bottom: 16px;
}

.wwp-faq__title em {
	font-style: normal;
	color: var(--vb-color-primary);
}

.wwp-faq__sub {
	font-size: 16px;
	line-height: 1.65;
	color: var(--vb-color-muted);
}

.wwp-faq__list {
	max-width: 820px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Each item is a native <details> for built-in keyboard + a11y */
.wwp-faq__item {
	background: #fff;
	border: 1px solid #e5e9ef;
	border-radius: 16px;
	overflow: hidden;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.wwp-faq__item:hover { border-color: #c7d2fe; }

.wwp-faq__item[open] {
	border-color: var(--vb-color-primary);
	background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
	box-shadow: 0 12px 28px -14px rgba(79, 70, 229, 0.20);
}

/* Question (summary) — strip the native marker, build our own row */
.wwp-faq__q {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 26px;
	font-family: var(--vb-font-heading);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--vb-color-ink);
	letter-spacing: -0.1px;
	transition: color 0.2s ease;
	-webkit-user-select: none;
	user-select: none;
}

.wwp-faq__q::-webkit-details-marker { display: none; }
.wwp-faq__q::marker { display: none; }

.wwp-faq__item:hover .wwp-faq__q { color: var(--vb-color-primary); }

.wwp-faq__q-text { flex: 1; }

/* Plus icon that rotates into an X when open */
.wwp-faq__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border-radius: 50%;
	background: #f1f5f9;
	color: var(--vb-color-mute-dark);
	transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.wwp-faq__icon svg { width: 14px; height: 14px; }

.wwp-faq__item:hover .wwp-faq__icon {
	background: #eef2ff;
	color: var(--vb-color-mute);
}

.wwp-faq__item[open] .wwp-faq__icon {
	transform: rotate(45deg);
	background: var(--vb-color-primary);
	color: #fff;
}

/* Answer — fades down when the details opens */
.wwp-faq__a {
	padding: 0 26px 24px;
	font-size: 15px;
	line-height: 1.7;
	color: #475569;
}

.wwp-faq__a p { margin: 0; max-width: 70ch; }

.wwp-faq__item[open] .wwp-faq__a {
	animation: vb-faq-reveal 0.3s ease;
}

@keyframes vb-faq-reveal {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Closing CTA below the accordion */
.wwp-faq__cta {
	max-width: 820px;
	margin: 48px auto 0;
	padding: 28px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	background: #fff;
	border: 1px dashed #c7d2fe;
	border-radius: 16px;
}

.wwp-faq__cta-text {
	font-size: 15px;
	color: var(--vb-color-ink);
	font-weight: 500;
}

.wwp-faq__cta-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 22px;
	background: var(--vb-color-primary);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 999px;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	white-space: nowrap;
}

.wwp-faq__cta-link:hover {
	background: var(--vb-color-primary-dark);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px -8px rgba(23, 163, 182, 0.45);
}

@media (max-width: 700px) {
	.wwp-faq { padding: 70px 20px 80px; }
	.wwp-faq__title { font-size: 30px; }
	.wwp-faq__q { padding: 18px 18px; font-size: 15.5px; gap: 14px; }
	.wwp-faq__a { padding: 0 18px 20px; font-size: 14.5px; }
	.wwp-faq__icon { width: 30px; height: 30px; }
	.wwp-faq__cta { flex-direction: column; align-items: stretch; text-align: center; padding: 22px; }
	.wwp-faq__cta-link { justify-content: center; }
}

/* ============================================================
 * Products page — section-specific styles
 * ============================================================ */

/* ----- Horizontal info strip below the hero ----- */
.prod-info-strip {
	padding: 60px 32px;
	background:
		radial-gradient(circle at 50% 0%, rgba(129, 140, 248, 0.06), transparent 50%),
		linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
	border-bottom: 1px solid #e5e9ef;
	scroll-margin-top: 24px;
}

.prod-info-strip__grid {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	border: 1px solid #e5e9ef;
	border-radius: 20px;
	background: #ffffff;
	box-shadow: 0 6px 24px -10px rgba(15, 23, 42, 0.06);
	overflow: hidden;
}

.prod-info-strip__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	text-align: center;
	padding: 28px 18px;
	border-right: 1px solid #eef0f5;
	transition: background 0.25s ease;
	position: relative;
}

.prod-info-strip__item:last-child { border-right: 0; }
.prod-info-strip__item:hover { background: #fafbff; }

.prod-info-strip__icon {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(23, 163, 182, 0.14), rgba(129, 140, 248, 0.10));
	color: var(--vb-color-primary);
	transition: transform 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.prod-info-strip__item:hover .prod-info-strip__icon {
	transform: translateY(-3px);
	color: var(--vb-color-primary-dark);
	box-shadow: 0 8px 20px -8px rgba(23, 163, 182, 0.32);
}

.prod-info-strip__icon svg {
	width: 28px;
	height: 28px;
}

.prod-info-strip__label {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--vb-color-ink);
	letter-spacing: -0.15px;
	line-height: 1.35;
	max-width: 180px;
}

@media (max-width: 1024px) {
	.prod-info-strip { padding: 48px 20px; }
	.prod-info-strip__grid { grid-template-columns: repeat(3, 1fr); }
	.prod-info-strip__item:nth-child(3) { border-right: 0; }
	.prod-info-strip__item:nth-child(4),
	.prod-info-strip__item:nth-child(5) { border-top: 1px solid #eef0f5; }
	.prod-info-strip__item:nth-child(5) { border-right: 0; }
}

@media (max-width: 640px) {
	.prod-info-strip__grid { grid-template-columns: repeat(2, 1fr); }
	.prod-info-strip__item { padding: 22px 14px; }
	.prod-info-strip__item:nth-child(odd) { border-right: 1px solid #eef0f5; }
	.prod-info-strip__item:nth-child(even) { border-right: 0; }
	.prod-info-strip__item:nth-child(n+3) { border-top: 1px solid #eef0f5; }
	.prod-info-strip__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.prod-info-strip__icon { width: 48px; height: 48px; border-radius: 14px; }
	.prod-info-strip__icon svg { width: 24px; height: 24px; }
	.prod-info-strip__label { font-size: 13.5px; }
}

/* ----- Product showcase — sticky image + scrolling specs ----- */
.prod-showcase {
	background:
		radial-gradient(circle at 90% 0%, rgba(129, 140, 248, 0.06), transparent 50%),
		radial-gradient(circle at 0% 100%, rgba(23, 163, 182, 0.05), transparent 50%),
		linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
	padding: 40px 32px 80px;
}

.prod {
	max-width: 1280px;
	margin: 0 auto;
	padding: 80px 0;
	scroll-margin-top: 24px;
}

.prod + .prod {
	border-top: 1px solid #eef0f5;
}

.prod__inner {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	grid-template-areas: "media content";
	gap: 80px;
	align-items: start;
}

/* Alternating layout — image on right, text on left */
.prod--reverse .prod__inner {
	grid-template-columns: 1.1fr 1fr;
	grid-template-areas: "content media";
}

.prod__media-col   { grid-area: media; }
.prod__content-col { grid-area: content; }

/* Media column: sticky image so it follows the user through the specs */
.prod__media-col {
	position: sticky;
	top: 48px;
}

.prod__image-wrap {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.prod__image-glow {
	position: absolute;
	inset: 8%;
	background: radial-gradient(circle at 50% 60%, rgba(23, 163, 182, 0.22) 0%, rgba(129, 140, 248, 0.10) 35%, transparent 70%);
	filter: blur(20px);
	z-index: 0;
}

.prod__image-index {
	position: absolute;
	top: 4%;
	left: 4%;
	font-family: var(--vb-font-heading);
	font-size: clamp(80px, 14vw, 180px);
	font-weight: 900;
	line-height: 0.9;
	letter-spacing: -4px;
	color: transparent;
	-webkit-text-stroke: 1px rgba(15, 23, 42, 0.10);
	z-index: 0;
	pointer-events: none;
	user-select: none;
}

.prod__image {
	position: relative;
	z-index: 1;
	max-width: 80%;
	max-height: 90%;
	object-fit: contain;
	filter: drop-shadow(0 30px 50px rgba(15, 23, 42, 0.18));
	animation: prod-float 6s ease-in-out infinite;
}

@keyframes prod-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-12px); }
}

/* Content column */
.prod__content-col { min-width: 0; }

.prod__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	letter-spacing: 0.18em;
	color: var(--vb-color-mute-dark);
	font-weight: 700;
	margin-bottom: 22px;
	text-transform: uppercase;
}

.prod__num {
	color: var(--vb-color-mute);
	font-weight: 800;
}

.prod__sep {
	color: #cbd5e1;
	font-weight: 400;
}

.prod__title {
	font-size: 46px;
	font-weight: 800;
	letter-spacing: -1.4px;
	color: var(--vb-color-ink);
	line-height: 1.08;
	margin-bottom: 20px;
}

.prod__desc {
	font-size: 17px;
	line-height: 1.65;
	color: var(--vb-color-muted);
	margin-bottom: 30px;
	max-width: 540px;
}

/* Quick-stat pills */
.prod__stats {
	list-style: none;
	margin: 0 0 56px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.prod__stats li {
	position: relative;
	padding: 8px 14px 8px 32px;
	background: #fff;
	border: 1px solid #e5e9ef;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: var(--vb-color-ink);
	letter-spacing: -0.1px;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.prod__stats li::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	border-radius: 50%;
	background: var(--vb-color-primary);
	box-shadow: 0 0 0 3px rgba(23, 163, 182, 0.14);
}

.prod__stats li:hover {
	border-color: #c7d2fe;
	background: #fafbff;
}

/* Spec blocks */
.prod__specs {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.prod__spec-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
}

.prod__spec-icon {
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: linear-gradient(135deg, rgba(23, 163, 182, 0.14), rgba(129, 140, 248, 0.10));
	color: var(--vb-color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.prod__spec-icon svg { width: 20px; height: 20px; }

.prod__spec h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--vb-color-ink);
	margin: 0;
	letter-spacing: -0.2px;
}

.prod__spec-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 24px;
}

.prod__spec-list li {
	position: relative;
	padding-left: 28px;
	font-size: 15px;
	line-height: 1.55;
	color: #475569;
}

/* Tiny check icon — circle + checkmark drawn with borders */
.prod__spec-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: rgba(23, 163, 182, 0.12);
	border: 1.5px solid var(--vb-color-primary);
}

.prod__spec-list li::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 8px;
	width: 6px;
	height: 3px;
	border-left: 1.5px solid var(--vb-color-primary);
	border-bottom: 1.5px solid var(--vb-color-primary);
	transform: rotate(-45deg);
}

.prod__spec-foot {
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px dashed #e2e8f0;
	font-size: 13px;
	color: var(--vb-color-muted);
	font-style: italic;
}

/* CTA */
.prod__cta-row {
	margin-top: 48px;
	padding-top: 36px;
	border-top: 1px solid #eef0f5;
}

.prod__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 32px;
	background: var(--vb-color-ink);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.1px;
	text-decoration: none;
	border-radius: 999px;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.prod__btn:hover {
	background: var(--vb-color-primary);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -10px rgba(23, 163, 182, 0.45);
}

/* Responsive */
@media (max-width: 1024px) {
	.prod-showcase { padding: 24px 24px 60px; }
	.prod { padding: 60px 0; }
	.prod__inner { grid-template-columns: 1fr; gap: 40px; }
	.prod__media-col { position: static; }
	.prod__image-wrap { aspect-ratio: 5 / 4; max-width: 500px; margin: 0 auto; }
	.prod__title { font-size: 36px; }
	.prod__spec-list { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.prod-showcase { padding: 16px 20px 48px; }
	.prod { padding: 48px 0; }
	.prod__title { font-size: 28px; letter-spacing: -1px; }
	.prod__desc { font-size: 15.5px; }
	.prod__stats { margin-bottom: 40px; }
	.prod__specs { gap: 32px; }
	.prod__spec h3 { font-size: 17px; }
	.prod__btn { padding: 14px 26px; }
}

/* ----- Comparison table — find-your-fit spec matrix ----- */
.prod-compare {
	padding: 100px 32px;
	background:
		radial-gradient(circle at 0% 0%, rgba(129, 140, 248, 0.06), transparent 50%),
		radial-gradient(circle at 100% 100%, rgba(23, 163, 182, 0.04), transparent 50%),
		linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
}

.prod-compare__head {
	max-width: 720px;
	margin: 0 auto 56px;
	text-align: center;
}

.prod-compare__title {
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -1.2px;
	color: var(--vb-color-ink);
	line-height: 1.1;
	margin-bottom: 16px;
}

.prod-compare__title em {
	font-style: normal;
	color: var(--vb-color-primary);
}

.prod-compare__sub {
	font-size: 16px;
	color: var(--vb-color-muted);
	line-height: 1.6;
}

/* Wrapper provides the visual frame + horizontal scroll on mobile */
.prod-compare__wrap {
	max-width: 1280px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid #e5e9ef;
	border-radius: 20px;
	box-shadow: 0 14px 40px -18px rgba(15, 23, 42, 0.16);
	overflow-x: auto;
	overflow-y: hidden;
	position: relative;
}

.prod-compare__table {
	width: 100%;
	min-width: 980px;
	border-collapse: collapse;
	font-size: 14px;
	color: var(--vb-color-ink);
}

/* ===== Per-column accent colors (Snacks=teal, Tea=amber, Utility=indigo, Hygiene=rose) ===== */
.prod-compare__table {
	--c1: #17A3B6; --c1-dark: #0E8EA3;
	--c2: #F59E0B; --c2-dark: #B45309;
	--c3: #6366F1; --c3-dark: #4F46E5;
	--c4: #EC4899; --c4-dark: #DB2777;
}

/* ===== Header row ===== */
.prod-compare__table thead th {
	padding: 28px 22px 24px;
	text-align: left;
	border-bottom: 2px solid #e5e9ef;
	font-weight: 700;
	vertical-align: bottom;
}

/* Corner cell — "Spec" — sticky on horizontal scroll */
.prod-compare__corner {
	width: 220px;
	min-width: 220px;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vb-color-mute-dark);
	position: sticky;
	left: 0;
	z-index: 3;
	background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
	box-shadow: 1px 0 0 #eef0f5;
}

/* Each product header gets a coloured top stripe + tinted gradient backdrop */
.prod-compare__col-head { min-width: 210px; position: relative; }

.prod-compare__table thead th:nth-child(2) { border-top: 4px solid var(--c1); background: linear-gradient(180deg, rgba(23,163,182,0.09) 0%, #ffffff 85%); }
.prod-compare__table thead th:nth-child(3) { border-top: 4px solid var(--c2); background: linear-gradient(180deg, rgba(245,158,11,0.09) 0%, #ffffff 85%); }
.prod-compare__table thead th:nth-child(4) { border-top: 4px solid var(--c3); background: linear-gradient(180deg, rgba(99,102,241,0.09) 0%, #ffffff 85%); }
.prod-compare__table thead th:nth-child(5) { border-top: 4px solid var(--c4); background: linear-gradient(180deg, rgba(236,72,153,0.09) 0%, #ffffff 85%); }

.prod-compare__product {
	display: block;
	text-decoration: none;
	transition: transform 0.2s ease;
}

.prod-compare__product:hover { transform: translateY(-2px); }

.prod-compare__product-name {
	display: block;
	font-size: 15.5px;
	font-weight: 800;
	color: var(--vb-color-ink);
	letter-spacing: -0.25px;
	margin-bottom: 10px;
	line-height: 1.25;
	transition: color 0.2s ease;
}

.prod-compare__table thead th:nth-child(2) .prod-compare__product:hover .prod-compare__product-name { color: var(--c1-dark); }
.prod-compare__table thead th:nth-child(3) .prod-compare__product:hover .prod-compare__product-name { color: var(--c2-dark); }
.prod-compare__table thead th:nth-child(4) .prod-compare__product:hover .prod-compare__product-name { color: var(--c3-dark); }
.prod-compare__table thead th:nth-child(5) .prod-compare__product:hover .prod-compare__product-name { color: var(--c4-dark); }

/* Pill tag styled per product */
.prod-compare__product-tag {
	display: inline-block;
	padding: 5px 11px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.prod-compare__table thead th:nth-child(2) .prod-compare__product-tag { background: rgba(23,163,182,0.13);  color: var(--c1-dark); border-color: rgba(23,163,182,0.35); }
.prod-compare__table thead th:nth-child(3) .prod-compare__product-tag { background: rgba(245,158,11,0.13);  color: var(--c2-dark); border-color: rgba(245,158,11,0.35); }
.prod-compare__table thead th:nth-child(4) .prod-compare__product-tag { background: rgba(99,102,241,0.13);  color: var(--c3-dark); border-color: rgba(99,102,241,0.35); }
.prod-compare__table thead th:nth-child(5) .prod-compare__product-tag { background: rgba(236,72,153,0.13);  color: var(--c4-dark); border-color: rgba(236,72,153,0.35); }

/* ===== Body rows ===== */
.prod-compare__table tbody th {
	padding: 18px 22px;
	text-align: left;
	background: #ffffff;
	font-weight: 700;
	font-size: 12.5px;
	color: var(--vb-color-ink);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	vertical-align: middle;
	position: sticky;
	left: 0;
	z-index: 1;
	border-bottom: 1px solid #eef0f5;
	box-shadow: 1px 0 0 #eef0f5;
	white-space: nowrap;
}

/* Icon tile beside each row label */
.prod-compare__row-head {
	display: flex !important;
	align-items: center;
	gap: 12px;
}

.prod-compare__row-icon {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 9px;
	background: linear-gradient(135deg, rgba(23, 163, 182, 0.12), rgba(99, 102, 241, 0.10));
	color: var(--vb-color-primary-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.25s ease;
}

.prod-compare__row-icon svg { width: 16px; height: 16px; }

.prod-compare__table tbody tr:hover .prod-compare__row-icon {
	transform: rotate(-4deg) scale(1.05);
}

.prod-compare__row-label {
	font-weight: 700;
	letter-spacing: 0.04em;
}

.prod-compare__table tbody td {
	padding: 18px 22px;
	border-bottom: 1px solid #eef0f5;
	color: #475569;
	line-height: 1.55;
	vertical-align: middle;
	font-weight: 500;
	transition: background 0.2s ease;
}

.prod-compare__table tbody tr:last-child th,
.prod-compare__table tbody tr:last-child td {
	border-bottom: 0;
}

/* Subtle row striping for scanability */
.prod-compare__table tbody tr:nth-child(even) th,
.prod-compare__table tbody tr:nth-child(even) td {
	background: #fafbff;
}

/* Hover: lift the row visually with the column-color's faint tint */
.prod-compare__table tbody tr:hover th,
.prod-compare__table tbody tr:hover td {
	background: #f5f7ff;
}

.prod-compare__table tbody tr:hover td:nth-child(2) { background: rgba(23,163,182,0.07); }
.prod-compare__table tbody tr:hover td:nth-child(3) { background: rgba(245,158,11,0.07); }
.prod-compare__table tbody tr:hover td:nth-child(4) { background: rgba(99,102,241,0.07); }
.prod-compare__table tbody tr:hover td:nth-child(5) { background: rgba(236,72,153,0.07); }

/* Empty/dash cells — soft and muted */
.prod-compare__empty {
	color: #cbd5e1 !important;
	font-weight: 400;
	text-align: center;
}

.prod-compare__empty span {
	display: inline-block;
	font-size: 20px;
	letter-spacing: 2px;
	opacity: 0.6;
}

/* ===== Differentiator badge cells =====
 * When a row has at least one "—", the columns that DO support it become
 * highlighted with their product's accent colour. The cell turns into a
 * mini-badge with a tinted background, accent text, and a check icon.
 */
.prod-compare__table tbody tr:has(.prod-compare__empty) td:not(.prod-compare__empty) {
	font-weight: 700;
	position: relative;
	padding-left: 44px;
}

.prod-compare__table tbody tr:has(.prod-compare__empty) td:not(.prod-compare__empty)::before {
	content: "";
	position: absolute;
	left: 22px;
	top: 50%;
	margin-top: -8px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.18;
}

.prod-compare__table tbody tr:has(.prod-compare__empty) td:not(.prod-compare__empty)::after {
	content: "";
	position: absolute;
	left: 27px;
	top: 50%;
	margin-top: -3px;
	width: 6px;
	height: 3px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
}

.prod-compare__table tbody tr:has(.prod-compare__empty) td:not(.prod-compare__empty):nth-child(2) { background: rgba(23,163,182,0.12);  color: var(--c1-dark); }
.prod-compare__table tbody tr:has(.prod-compare__empty) td:not(.prod-compare__empty):nth-child(3) { background: rgba(245,158,11,0.12);  color: var(--c2-dark); }
.prod-compare__table tbody tr:has(.prod-compare__empty) td:not(.prod-compare__empty):nth-child(4) { background: rgba(99,102,241,0.12);  color: var(--c3-dark); }
.prod-compare__table tbody tr:has(.prod-compare__empty) td:not(.prod-compare__empty):nth-child(5) { background: rgba(236,72,153,0.12);  color: var(--c4-dark); }

/* Mobile: smaller padding, smaller text */
@media (max-width: 1024px) {
	.prod-compare { padding: 70px 20px; }
	.prod-compare__title { font-size: 34px; }
	.prod-compare__table { min-width: 880px; }
	.prod-compare__table thead th,
	.prod-compare__table tbody th,
	.prod-compare__table tbody td { padding: 16px 18px; }
}

@media (max-width: 700px) {
	.prod-compare { padding: 56px 16px; }
	.prod-compare__title { font-size: 26px; }
	.prod-compare__sub { font-size: 14.5px; }
	.prod-compare__wrap { border-radius: 14px; }
	.prod-compare__table { min-width: 760px; font-size: 13px; }
	.prod-compare__corner,
	.prod-compare__col-head { min-width: 170px; }
	.prod-compare__product-name { font-size: 14px; }
}

/* ----- Partner CTA banner — matches the clients section background ----- */
.prod-partner {
	position: relative;
	color: #ffffff;
	padding: 80px 32px;
	background: #043157;
	overflow: hidden;
}

/* Subtle 48px grid texture — same treatment as .cl-section */
.prod-partner::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
	background-size: 48px 48px;
	pointer-events: none;
}

.prod-partner__inner {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin: 0 auto;
}

/* ===== Heading ===== */
.prod-partner__head {
	text-align: center;
	max-width: 700px;
	margin: 0 auto 44px;
}

.prod-partner__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--vb-color-primary);
	font-weight: 700;
	margin-bottom: 16px;
}

.prod-partner__eyebrow-line {
	width: 24px;
	height: 1.5px;
	background: var(--vb-color-primary);
	border-radius: 2px;
}

.prod-partner__title {
	font-size: 38px;
	font-weight: 800;
	letter-spacing: -1.2px;
	line-height: 1.1;
	color: #ffffff;
	margin-bottom: 16px;
}

.prod-partner__title em {
	font-style: normal;
	background: linear-gradient(90deg, var(--vb-color-primary) 0%, var(--vb-color-mute) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.prod-partner__sub {
	font-size: 15.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.65);
}

/* ===== Card grid ===== */
.prod-partner__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.prod-partner__card {
	--accent: #17A3B6;
	--accent-soft: rgba(23, 163, 182, 0.16);
	--accent-border: rgba(23, 163, 182, 0.40);
	position: relative;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 18px;
	padding: 30px 26px 24px;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.prod-partner__card--buy   { --accent: #17A3B6; --accent-soft: rgba(23, 163, 182, 0.16); --accent-border: rgba(23, 163, 182, 0.40); }
.prod-partner__card--host  { --accent: #6366F1; --accent-soft: rgba(99, 102, 241, 0.16); --accent-border: rgba(99, 102, 241, 0.40); }
.prod-partner__card--stock { --accent: #EC4899; --accent-soft: rgba(236, 72, 153, 0.16); --accent-border: rgba(236, 72, 153, 0.40); }

/* Top accent line that lights up on hover */
.prod-partner__card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60%;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--accent), transparent);
	opacity: 0;
	transition: opacity 0.3s ease, width 0.3s ease;
}

/* Radial accent glow that follows the card colour */
.prod-partner__card::after {
	content: "";
	position: absolute;
	top: -40%;
	right: -40%;
	width: 80%;
	height: 80%;
	background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.prod-partner__card:hover {
	background: rgba(255, 255, 255, 0.07);
	border-color: var(--accent-border);
	transform: translateY(-6px);
	box-shadow: 0 24px 50px -16px var(--accent-soft);
}

.prod-partner__card:hover::before { opacity: 1; width: 80%; }
.prod-partner__card:hover::after  { opacity: 1; }

/* Number eyebrow */
.prod-partner__num {
	position: relative;
	z-index: 1;
	font-family: var(--vb-font-heading);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 18px;
}

/* Icon tile */
.prod-partner__icon {
	position: relative;
	z-index: 1;
	width: 50px;
	height: 50px;
	border-radius: 13px;
	background: var(--accent-soft);
	border: 1px solid var(--accent-border);
	color: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	transition: transform 0.3s ease, background 0.3s ease;
}

.prod-partner__card:hover .prod-partner__icon {
	transform: translateY(-2px) rotate(-3deg);
	background: var(--accent);
	color: #ffffff;
	border-color: var(--accent);
}

.prod-partner__icon svg { width: 24px; height: 24px; }

/* Title */
.prod-partner__name {
	position: relative;
	z-index: 1;
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.4px;
	line-height: 1.2;
	color: #ffffff;
	margin-bottom: 10px;
}

/* Description */
.prod-partner__desc {
	position: relative;
	z-index: 1;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: 24px;
	flex-grow: 1;
}

/* CTA pill */
.prod-partner__btn {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	color: #ffffff;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: -0.1px;
	text-decoration: none;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.prod-partner__card:hover .prod-partner__btn {
	background: var(--accent);
	border-color: var(--accent);
	color: #ffffff;
	transform: translateX(2px);
}

/* Footer text */
.prod-partner__foot {
	margin: 36px 0 0;
	text-align: center;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.55);
	line-height: 1.6;
}

.prod-partner__foot-link {
	color: rgba(255, 255, 255, 0.92);
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.35);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.prod-partner__foot-link:hover {
	color: var(--vb-color-primary);
	border-bottom-color: var(--vb-color-primary);
}

/* Responsive */
@media (max-width: 1024px) {
	.prod-partner { padding: 64px 24px; }
	.prod-partner__title { font-size: 30px; }
	.prod-partner__grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}

@media (max-width: 600px) {
	.prod-partner { padding: 56px 20px; }
	.prod-partner__title { font-size: 26px; letter-spacing: -0.8px; }
	.prod-partner__sub { font-size: 14.5px; }
	.prod-partner__card { padding: 26px 22px 22px; }
	.prod-partner__name { font-size: 19px; }
	.prod-partner__icon { width: 46px; height: 46px; border-radius: 12px; }
	.prod-partner__icon svg { width: 22px; height: 22px; }
}

/* ============================================================
 * Partner With Us page — section-specific styles
 * ============================================================ */

/* ----- Hero (reuses wwp-hero base; extends with stats grid + trust list) ----- */
.pwu-hero__overlay { padding: 120px 40px 70px; max-width: 1320px; }
.pwu-hero__content { max-width: 980px; }
.pwu-hero__title   { font-size: 60px; margin-bottom: 22px; line-height: 1.05; }
.pwu-hero__desc    { font-size: 18px; max-width: 700px; margin-bottom: 32px; color: #D1D5DB; }

.pwu-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin-bottom: 48px;
}

.pwu-hero__trust {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
}

.pwu-hero__trust li {
	position: relative;
	padding-left: 22px;
	font-size: 13.5px;
	color: rgba(255,255,255,0.78);
	font-weight: 500;
}

.pwu-hero__trust li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -7px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--vb-color-primary);
	box-shadow: 0 0 0 3px rgba(23,163,182,0.18);
}

.pwu-hero__trust li::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 50%;
	margin-top: -2px;
	width: 6px;
	height: 3px;
	border-left: 1.5px solid #fff;
	border-bottom: 1.5px solid #fff;
	transform: rotate(-45deg);
}

/* Stats grid inside the hero */
.pwu-hero__stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	padding: 28px 0 0;
	border-top: 1px solid rgba(255,255,255,0.12);
	max-width: 920px;
}

.pwu-hstat {
	padding: 0 22px;
	border-right: 1px solid rgba(255,255,255,0.08);
}
.pwu-hstat:first-child { padding-left: 0; }
.pwu-hstat:last-child  { border-right: 0; padding-right: 0; }

.pwu-hstat__num {
	font-family: var(--vb-font-heading);
	font-size: 36px;
	font-weight: 800;
	color: #fff;
	line-height: 1;
	letter-spacing: -1px;
	margin-bottom: 8px;
}

.pwu-hstat__num .suf { color: var(--vb-color-accent); font-size: 0.75em; }

.pwu-hstat__label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: rgba(255,255,255,0.62);
	line-height: 1.4;
}

@media (max-width: 1024px) {
	.pwu-hero__overlay { padding: 100px 24px 60px; }
	.pwu-hero__title { font-size: 42px; }
	.pwu-hero__stats { grid-template-columns: repeat(2, 1fr); gap: 22px 0; max-width: 100%; }
	.pwu-hstat { padding: 12px 16px; border-right: 1px solid rgba(255,255,255,0.08); }
	.pwu-hstat:nth-child(2) { border-right: 0; padding-right: 0; }
	.pwu-hstat:nth-child(3),
	.pwu-hstat:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.08); }
	.pwu-hstat:nth-child(3) { padding-left: 0; }
}

@media (max-width: 600px) {
	.pwu-hero__title { font-size: 32px; }
	.pwu-hero__desc  { font-size: 15.5px; }
	.pwu-hstat__num  { font-size: 28px; }
}

/* ----- "Why most retail models fail you" — two-column comparison ----- */
.pwu-fail {
	padding: 100px 32px;
	background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
}

.pwu-fail__head {
	max-width: 760px;
	margin: 0 auto 56px;
	text-align: center;
}

.pwu-fail__title {
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -1.2px;
	color: var(--vb-color-ink);
	line-height: 1.1;
	margin-bottom: 18px;
}

.pwu-fail__title em {
	font-style: normal;
	color: var(--vb-color-primary);
}

.pwu-fail__sub {
	font-size: 16px;
	line-height: 1.65;
	color: var(--vb-color-muted);
}

/* Advertise → problem section: icon cards + narrative + accent closer */
.adv-ignore {
	max-width: 900px;
	margin: 0 auto 48px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.adv-ignore__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 26px 16px;
	background: #ffffff;
	border: 1px solid #e9ecf4;
	border-radius: 18px;
	text-align: center;
	box-shadow: 0 6px 22px rgba(13, 22, 40, 0.04);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.adv-ignore__card:hover {
	transform: translateY(-4px);
	border-color: rgba(23, 163, 182, 0.35);
	box-shadow: 0 14px 32px rgba(13, 22, 40, 0.10);
}

.adv-ignore__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(23,163,182,0.12), rgba(5,190,215,0.12));
	color: var(--vb-color-primary);
}

.adv-ignore__icon svg { width: 24px; height: 24px; }

.adv-ignore__label {
	font-size: 15px;
	font-weight: 700;
	color: var(--vb-color-ink);
	letter-spacing: -0.2px;
}

.adv-problem__body {
	max-width: 720px;
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.75;
	color: var(--vb-color-muted);
	text-align: center;
}

.adv-problem__body p { margin: 0 0 20px; }

.adv-problem__result {
	background: #fff5f2;
	border: 1px solid #ffd9cc;
	border-radius: 14px;
	padding: 20px 24px;
	color: #7a3524;
	font-weight: 500;
}

.adv-problem__result-label {
	display: block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #e2562f;
	margin-bottom: 6px;
}

.adv-problem__closer {
	max-width: 820px;
	margin: 48px auto 0;
	padding: 44px 40px;
	border-radius: 24px;
	background: linear-gradient(135deg, #043157 0%, #0a1628 100%);
	text-align: center;
	position: relative;
	overflow: hidden;
}

.adv-problem__closer::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 15% 0%, rgba(5,190,215,0.18), transparent 55%);
	pointer-events: none;
}

.adv-problem__closer-q {
	position: relative;
	font-size: 17px;
	font-weight: 500;
	color: #9fb2c9;
	margin-bottom: 8px;
}

.adv-problem__closer-a {
	position: relative;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: -0.5px;
	color: #ffffff;
}

.adv-problem__closer-a em {
	font-style: normal;
	color: var(--vb-color-accent);
}

@media (max-width: 720px) {
	.adv-ignore { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.adv-problem__closer { padding: 34px 24px; }
	.adv-problem__closer-a { font-size: 21px; }
}

.pwu-fail__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	max-width: 1180px;
	margin: 0 auto;
}

.pwu-fail__col {
	padding: 36px 32px;
	border-radius: 20px;
	background: #fff;
	border: 1px solid #e5e9ef;
	box-shadow: 0 6px 24px -10px rgba(15, 23, 42, 0.06);
}

.pwu-fail__col--new {
	background:
		radial-gradient(circle at 100% 0%, rgba(23,163,182,0.08), transparent 50%),
		linear-gradient(180deg, #ffffff 0%, #f5fbfc 100%);
	border-color: rgba(23,163,182,0.30);
	box-shadow: 0 14px 36px -14px rgba(23, 163, 182, 0.16);
}

.pwu-fail__col-head { margin-bottom: 24px; }

.pwu-fail__col-tag {
	display: inline-block;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.pwu-fail__col-tag--old { background: #fee2e2; color: #b91c1c; }
.pwu-fail__col-tag--new { background: rgba(23,163,182,0.14); color: var(--vb-color-primary-dark); }

.pwu-fail__col-head h3 {
	font-size: 22px;
	font-weight: 800;
	color: var(--vb-color-ink);
	letter-spacing: -0.5px;
	margin: 0;
}

.pwu-fail__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pwu-fail__list li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-size: 15px;
	line-height: 1.55;
	color: #334155;
}

.pwu-fail__mark {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
}

.pwu-fail__mark svg { width: 14px; height: 14px; }

.pwu-fail__mark--x     { background: #fee2e2; color: #dc2626; }
.pwu-fail__mark--check { background: rgba(23,163,182,0.14); color: var(--vb-color-primary-dark); }

@media (max-width: 900px) {
	.pwu-fail { padding: 70px 20px; }
	.pwu-fail__title { font-size: 32px; }
	.pwu-fail__grid { grid-template-columns: 1fr; gap: 16px; }
	.pwu-fail__col { padding: 28px 24px; }
}

/* ----- Partnership models intro + 3 alternating sections ----- */
.pwu-models-intro {
	padding: 90px 32px 40px;
	background: #fff;
	text-align: center;
}

.pwu-models-intro__inner { max-width: 760px; margin: 0 auto; }

.pwu-models-intro__title {
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -1.2px;
	color: var(--vb-color-ink);
	line-height: 1.1;
	margin: 14px 0 16px;
}

.pwu-models-intro__title em {
	font-style: normal;
	color: var(--vb-color-primary);
}

.pwu-models-intro__sub {
	font-size: 16px;
	line-height: 1.65;
	color: var(--vb-color-muted);
}

/* Each model is a full-width alternating section */
.pwu-model {
	padding: 80px 32px;
	background: #fff;
	scroll-margin-top: 24px;
	position: relative;
}

.pwu-model--shaded {
	background:
		radial-gradient(circle at 88% 12%, var(--pwu-glow, rgba(129,140,248,0.08)), transparent 50%),
		linear-gradient(180deg, #f8f9fb 0%, #fdfdff 100%);
}

.pwu-model::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: min(80%, 900px);
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(148,163,184,0.30), transparent);
}

/* Per-model accent colors */
.pwu-model--teal   { --pwu-c: #17A3B6; --pwu-c-dark: #0E8EA3; --pwu-c-soft: rgba(23,163,182,0.12); --pwu-glow: rgba(23,163,182,0.10); }
.pwu-model--indigo { --pwu-c: #6366F1; --pwu-c-dark: #4F46E5; --pwu-c-soft: rgba(99,102,241,0.12); --pwu-glow: rgba(99,102,241,0.10); }
.pwu-model--rose   { --pwu-c: #EC4899; --pwu-c-dark: #DB2777; --pwu-c-soft: rgba(236,72,153,0.12); --pwu-glow: rgba(236,72,153,0.10); }

.pwu-model__inner {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	grid-template-areas: "media content";
	gap: 70px;
	align-items: center;
}

.pwu-model--reverse .pwu-model__inner {
	grid-template-columns: 1.1fr 1fr;
	grid-template-areas: "content media";
}

.pwu-model__media   { grid-area: media; }
.pwu-model__content { grid-area: content; }

/* Image frame */
.pwu-model__frame {
	position: relative;
	border-radius: 24px;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: linear-gradient(135deg, var(--pwu-c-soft), rgba(148,163,184,0.10));
	box-shadow:
		0 24px 60px -22px rgba(15, 23, 42, 0.22),
		0 8px 24px -10px rgba(0,0,0,0.06);
}

.pwu-model__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.pwu-model:hover .pwu-model__img { transform: scale(1.04); }

.pwu-model__index {
	position: absolute;
	top: 18px;
	left: 22px;
	z-index: 2;
	font-family: var(--vb-font-heading);
	font-size: 88px;
	font-weight: 900;
	line-height: 0.9;
	color: rgba(255,255,255,0.22);
	letter-spacing: -3px;
	text-shadow: 0 2px 30px rgba(0,0,0,0.25);
	pointer-events: none;
}

.pwu-model__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px;
	color: var(--pwu-c-dark);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-align: center;
}

/* Content side */
.pwu-model__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	letter-spacing: 0.20em;
	text-transform: uppercase;
	color: var(--pwu-c-dark);
	font-weight: 700;
	margin-bottom: 18px;
}

.pwu-model__num { font-weight: 800; }
.pwu-model__sep { color: #cbd5e1; }

.pwu-model__title {
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -1.2px;
	color: var(--vb-color-ink);
	line-height: 1.08;
	margin-bottom: 22px;
}

.pwu-model__title em {
	font-style: normal;
	color: var(--pwu-c);
}

.pwu-model__desc {
	font-size: 16.5px;
	line-height: 1.65;
	color: #475569;
	margin-bottom: 28px;
	max-width: 540px;
}

.pwu-model__bullets {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 24px;
}

.pwu-model__bullets li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14.5px;
	line-height: 1.5;
	color: #334155;
}

.pwu-model__check {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--pwu-c-soft);
	color: var(--pwu-c-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}

.pwu-model__check svg { width: 12px; height: 12px; }

.pwu-model__best {
	margin: 0 0 28px;
	padding: 16px 18px;
	background: var(--pwu-c-soft);
	border-left: 3px solid var(--pwu-c);
	border-radius: 0 10px 10px 0;
	font-size: 14px;
	line-height: 1.55;
	color: #334155;
}

.pwu-model__best strong { color: var(--pwu-c-dark); font-weight: 700; }

.pwu-model__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 26px;
	background: var(--pwu-c);
	color: #fff;
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 999px;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.pwu-model__cta:hover {
	background: var(--pwu-c-dark);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -10px var(--pwu-c-soft);
}

@media (max-width: 1024px) {
	.pwu-models-intro { padding: 70px 24px 24px; }
	.pwu-models-intro__title { font-size: 32px; }
	.pwu-model { padding: 60px 24px; }
	.pwu-model__inner { grid-template-columns: 1fr; gap: 36px; }
	.pwu-model--reverse .pwu-model__inner { grid-template-areas: "media" "content"; }
	.pwu-model__title { font-size: 30px; }
	.pwu-model__bullets { grid-template-columns: 1fr; }
	.pwu-model__frame { aspect-ratio: 5/4; max-width: 560px; margin: 0 auto; }
	.pwu-model__index { font-size: 60px; }
}

@media (max-width: 600px) {
	.pwu-model { padding: 50px 20px; }
	.pwu-model__title { font-size: 24px; }
	.pwu-model__desc  { font-size: 15.5px; }
}

/* ----- "What every partner gets" — 5 feature cards (bento-ish) ----- */
.pwu-perks {
	padding: 100px 32px;
	background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
}

.pwu-perks__head {
	max-width: 720px;
	margin: 0 auto 56px;
	text-align: center;
}

.pwu-perks__title {
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -1.2px;
	color: var(--vb-color-ink);
	line-height: 1.1;
	margin: 14px 0 16px;
}

.pwu-perks__title em { font-style: normal; color: var(--vb-color-primary); }

.pwu-perks__sub {
	font-size: 16px;
	line-height: 1.65;
	color: var(--vb-color-muted);
}

.pwu-perks__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
	max-width: 1240px;
	margin: 0 auto;
}

.pwu-perk {
	grid-column: span 2;
	padding: 30px 28px;
	background: #ffffff;
	border: 1px solid #e5e9ef;
	border-radius: 18px;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
	position: relative;
	overflow: hidden;
}

.pwu-perk--wide { grid-column: span 6; }
.pwu-perk--wide .pwu-perk__desc { max-width: 700px; }

.pwu-perk::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--vb-color-primary), var(--vb-color-mute));
	opacity: 0;
	transition: opacity 0.25s ease;
}

.pwu-perk:hover {
	transform: translateY(-4px);
	border-color: #c7d2fe;
	box-shadow: 0 16px 36px -14px rgba(79, 70, 229, 0.16);
}

.pwu-perk:hover::before { opacity: 1; }

.pwu-perk__icon {
	width: 50px;
	height: 50px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(23,163,182,0.14), rgba(99,102,241,0.10));
	color: var(--vb-color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	transition: transform 0.25s ease;
}

.pwu-perk:hover .pwu-perk__icon { transform: rotate(-4deg) scale(1.06); }

.pwu-perk__icon svg { width: 24px; height: 24px; }

.pwu-perk__title {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.3px;
	color: var(--vb-color-ink);
	margin-bottom: 10px;
}

.pwu-perk__desc {
	font-size: 14.5px;
	line-height: 1.65;
	color: #475569;
	margin: 0;
}

@media (max-width: 1024px) {
	.pwu-perks { padding: 70px 24px; }
	.pwu-perks__grid { grid-template-columns: repeat(2, 1fr); }
	.pwu-perk { grid-column: span 1; }
	.pwu-perk--wide { grid-column: span 2; }
}

@media (max-width: 600px) {
	.pwu-perks__title { font-size: 30px; }
	.pwu-perks__grid { grid-template-columns: 1fr; }
	.pwu-perk--wide { grid-column: span 1; }
}

/* ----- Urgency CTA — split layout: copy left, why-act-now right ----- */
.pwu-urgency {
	position: relative;
	padding: 100px 32px;
	background: #050b14;
	color: #fff;
	overflow: hidden;
}

.pwu-urgency::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 12% 30%, rgba(23,163,182,0.22), transparent 50%),
		radial-gradient(circle at 88% 70%, rgba(236,72,153,0.18), transparent 50%);
	pointer-events: none;
}

.pwu-urgency::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%);
	-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%);
	pointer-events: none;
}

.pwu-urgency__inner {
	position: relative;
	z-index: 1;
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 80px;
	align-items: center;
}

.pwu-urgency__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 11.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.7);
	font-weight: 700;
	margin-bottom: 22px;
	padding: 8px 14px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 999px;
}

.pwu-urgency__pulse {
	width: 8px;
	height: 8px;
	background: #ef4444;
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.25);
	animation: pwu-pulse 1.8s ease-in-out infinite;
}

@keyframes pwu-pulse {
	0%, 100% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.25); }
	50%      { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

.pwu-urgency__title {
	font-size: 56px;
	font-weight: 800;
	letter-spacing: -1.6px;
	line-height: 1.05;
	margin-bottom: 22px;
	color: #fff;
}

.pwu-urgency__title em {
	font-style: normal;
	background: linear-gradient(90deg, var(--vb-color-primary) 0%, var(--vb-color-mute) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.pwu-urgency__tail { color: #ef4444; }

.pwu-urgency__sub {
	font-size: 16px;
	line-height: 1.65;
	color: rgba(255,255,255,0.7);
	margin-bottom: 36px;
	max-width: 520px;
}

.pwu-urgency__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.pwu-urgency__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pwu-urgency__btn--primary {
	background: var(--vb-color-primary);
	color: #fff;
	border: 1px solid var(--vb-color-primary);
}

.pwu-urgency__btn--primary:hover {
	background: var(--vb-color-primary-dark);
	transform: translateY(-2px);
	color: #fff;
	box-shadow: 0 14px 28px -8px rgba(23, 163, 182, 0.45);
}

.pwu-urgency__btn--ghost {
	background: rgba(255,255,255,0.06);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.18);
}

.pwu-urgency__btn--ghost:hover {
	background: rgba(255,255,255,0.12);
	border-color: rgba(255,255,255,0.3);
	color: #fff;
	transform: translateY(-2px);
}

/* "Why act now" panel */
.pwu-urgency__why {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.10);
	border-radius: 20px;
	padding: 32px;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.pwu-urgency__why-label {
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--vb-color-primary);
	font-weight: 700;
	margin-bottom: 22px;
}

.pwu-urgency__why-grid {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding-bottom: 22px;
	border-bottom: 1px solid rgba(255,255,255,0.10);
	margin-bottom: 22px;
}

.pwu-urgency__why-item { display: flex; flex-direction: column; gap: 4px; }

.pwu-urgency__why-num {
	font-family: var(--vb-font-heading);
	font-size: 26px;
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.6px;
	line-height: 1;
}

.pwu-urgency__why-num .suf { color: var(--vb-color-accent); }

.pwu-urgency__why-sub {
	font-size: 13.5px;
	color: rgba(255,255,255,0.65);
	line-height: 1.5;
}

.pwu-urgency__cities {}

.pwu-urgency__cities-label {
	display: block;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.55);
	font-weight: 700;
	margin-bottom: 12px;
}

.pwu-urgency__cities-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pwu-urgency__city {
	padding: 6px 12px;
	background: rgba(23, 163, 182, 0.14);
	border: 1px solid rgba(23, 163, 182, 0.30);
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	color: #5fd1e0;
	transition: background 0.2s ease, transform 0.2s ease;
}

.pwu-urgency__city:hover {
	background: rgba(23, 163, 182, 0.22);
	transform: translateY(-1px);
}

@media (max-width: 1024px) {
	.pwu-urgency { padding: 70px 24px; }
	.pwu-urgency__inner { grid-template-columns: 1fr; gap: 40px; }
	.pwu-urgency__title { font-size: 38px; }
}

@media (max-width: 600px) {
	.pwu-urgency__title { font-size: 28px; }
	.pwu-urgency__why-num { font-size: 22px; }
}

/* ============================================================
 * Advertise With Us page — section-specific styles
 * ============================================================ */

/* ----- Hero (reuses wwp-hero base; adds scroll-down indicator) ----- */
.adv-hero__overlay { padding: 130px 40px 100px; max-width: 1280px; position: relative; }
.adv-hero__content { max-width: 880px; }
.adv-hero__title   { font-size: 64px; margin-bottom: 24px; line-height: 1.04; }
.adv-hero__desc    { font-size: 19px; max-width: 660px; margin-bottom: 36px; color: #D1D5DB; }
.adv-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.adv-hero__scroll {
	position: absolute;
	left: 40px;
	bottom: 32px;
	z-index: 3;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	color: rgba(255,255,255,0.7);
	text-decoration: none;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 700;
	transition: color 0.2s ease, transform 0.2s ease;
}

.adv-hero__scroll:hover {
	color: #fff;
	transform: translateY(2px);
}

.adv-hero__scroll-icon {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.25);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	animation: adv-bounce 2s ease-in-out infinite;
}

.adv-hero__scroll-icon svg { width: 14px; height: 14px; }

@keyframes adv-bounce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(6px); }
}

@media (max-width: 1024px) {
	.adv-hero__overlay { padding: 110px 24px 90px; }
	.adv-hero__title { font-size: 44px; }
	.adv-hero__scroll { left: 24px; bottom: 20px; }
}

@media (max-width: 600px) {
	.adv-hero__title { font-size: 32px; }
	.adv-hero__desc  { font-size: 16px; }
}

/* ----- Solution stepper — 4 horizontal cards with arrows between ----- */
.adv-solution {
	padding: 100px 32px;
	background:
		radial-gradient(circle at 80% 0%, rgba(129, 140, 248, 0.08), transparent 50%),
		linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
	scroll-margin-top: 24px;
}

.adv-solution__head {
	max-width: 760px;
	margin: 0 auto 64px;
	text-align: center;
}

.adv-solution__title {
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -1.2px;
	color: var(--vb-color-ink);
	line-height: 1.1;
	margin: 14px 0 16px;
}

.adv-solution__title em { font-style: normal; color: var(--vb-color-primary); }

.adv-solution__sub {
	font-size: 16px;
	line-height: 1.65;
	color: var(--vb-color-muted);
}

.adv-solution__steps {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1240px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	position: relative;
}

.adv-step {
	position: relative;
	background: #ffffff;
	border: 1px solid #e5e9ef;
	border-radius: 18px;
	padding: 30px 28px;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.adv-step:hover {
	transform: translateY(-4px);
	border-color: #c7d2fe;
	box-shadow: 0 14px 32px -14px rgba(79, 70, 229, 0.16);
}

/* Connecting arrow between step cards (desktop only) */
.adv-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -16px;
	margin-top: -8px;
	width: 16px;
	height: 16px;
	background-image: linear-gradient(90deg, transparent, var(--vb-color-mute-light));
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366F1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366F1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
	background: var(--vb-color-mute-light);
	z-index: 1;
}

.adv-step__num {
	font-family: var(--vb-font-heading);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.20em;
	color: var(--vb-color-mute-light);
	margin-bottom: 18px;
}

.adv-step__icon {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(23,163,182,0.14), rgba(99,102,241,0.10));
	color: var(--vb-color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}

.adv-step__icon svg { width: 24px; height: 24px; }

.adv-step__title {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.3px;
	color: var(--vb-color-ink);
	margin-bottom: 8px;
}

.adv-step__desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--vb-color-muted);
	margin: 0;
}

@media (max-width: 900px) {
	.adv-solution { padding: 70px 20px; }
	.adv-solution__title { font-size: 32px; }
	.adv-solution__steps { grid-template-columns: repeat(2, 1fr); }
	.adv-step:nth-child(2)::after { display: none; }
}

@media (max-width: 560px) {
	.adv-solution__steps { grid-template-columns: 1fr; }
	.adv-step::after { display: none !important; }
}

/* ----- Campaign journey (3 steps) + measurable outcomes ----- */
.adv-journey {
	padding: 100px 32px;
	background: #ffffff;
}

.adv-journey__head,
.adv-measure__head {
	max-width: 760px;
	margin: 0 auto 48px;
	text-align: center;
}

.adv-journey__title,
.adv-measure__title {
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -1.2px;
	color: var(--vb-color-ink);
	line-height: 1.1;
	margin: 14px 0 0;
}

.adv-journey__title em,
.adv-measure__title em { font-style: normal; color: var(--vb-color-primary); }

.adv-journey__steps {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1080px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.adv-journey__step {
	background: #fafbff;
	border: 1px solid #e5e9ef;
	border-radius: 18px;
	padding: 32px 28px;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.adv-journey__step:hover {
	transform: translateY(-4px);
	border-color: rgba(23, 163, 182, 0.35);
	box-shadow: 0 16px 34px -18px rgba(13, 22, 40, 0.18);
}

.adv-journey__num {
	font-family: var(--vb-font-heading);
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -1px;
	line-height: 1;
	background: linear-gradient(135deg, var(--vb-color-primary), var(--vb-color-accent));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 16px;
}

.adv-journey__step-title {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.3px;
	color: var(--vb-color-ink);
	margin: 0 0 8px;
}

.adv-journey__step-desc {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--vb-color-muted);
	margin: 0;
}

.adv-measure {
	max-width: 1080px;
	margin: 80px auto 0;
	padding-top: 64px;
	border-top: 1px solid #e6e9f2;
}

.adv-measure__sub {
	font-size: 16px;
	line-height: 1.65;
	color: var(--vb-color-muted);
	margin-top: 14px;
}

.adv-measure__list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 820px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px 32px;
}

.adv-measure__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--vb-color-ink);
	line-height: 1.4;
}

.adv-measure__check {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(23, 163, 182, 0.12);
	color: var(--vb-color-primary);
	margin-top: 1px;
}

.adv-measure__check svg { width: 13px; height: 13px; }

@media (max-width: 900px) {
	.adv-journey { padding: 70px 20px; }
	.adv-journey__title, .adv-measure__title { font-size: 30px; }
	.adv-journey__steps { grid-template-columns: 1fr; }
	.adv-measure { margin-top: 56px; padding-top: 48px; }
}

@media (max-width: 560px) {
	.adv-measure__list { grid-template-columns: 1fr; }
}

/* ----- Offer grid — 2x2 cards with image hero on top ----- */
.adv-offer {
	padding: 100px 32px;
	background: #fff;
}

.adv-offer__head {
	max-width: 760px;
	margin: 0 auto 56px;
	text-align: center;
}

.adv-offer__title {
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -1.2px;
	color: var(--vb-color-ink);
	line-height: 1.1;
	margin: 14px 0 16px;
}

.adv-offer__title em { font-style: normal; color: var(--vb-color-primary); }

.adv-offer__sub {
	font-size: 16px;
	line-height: 1.65;
	color: var(--vb-color-muted);
}

.adv-offer__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	max-width: 1240px;
	margin: 0 auto;
}

.adv-card {
	--accent: #17A3B6;
	--accent-soft: rgba(23, 163, 182, 0.14);
	background: #fff;
	border: 1px solid #e5e9ef;
	border-radius: 22px;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
	display: flex;
	flex-direction: column;
}

.adv-card--teal   { --accent: #17A3B6; --accent-soft: rgba(23, 163, 182, 0.14); }
.adv-card--amber  { --accent: #F59E0B; --accent-soft: rgba(245, 158, 11, 0.14); }
.adv-card--indigo { --accent: #6366F1; --accent-soft: rgba(99, 102, 241, 0.14); }
.adv-card--rose   { --accent: #EC4899; --accent-soft: rgba(236, 72, 153, 0.14); }

.adv-card:hover {
	transform: translateY(-6px);
	border-color: var(--accent);
	box-shadow: 0 22px 48px -18px var(--accent-soft);
}

.adv-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--accent-soft);
}

.adv-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.adv-card:hover .adv-card__media img { transform: scale(1.05); }

.adv-card__badge {
	position: absolute;
	top: 18px;
	left: 18px;
	padding: 7px 14px;
	background: rgba(255,255,255,0.94);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
	box-shadow: 0 4px 14px rgba(15,23,42,0.10);
}

.adv-card__body {
	padding: 30px 30px 32px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.adv-card__num {
	font-family: var(--vb-font-heading);
	font-size: 11.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent);
	font-weight: 700;
	margin-bottom: 14px;
}

.adv-card__title {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.5px;
	color: var(--vb-color-ink);
	margin-bottom: 12px;
	line-height: 1.2;
}

.adv-card__desc {
	font-size: 15px;
	line-height: 1.65;
	color: #475569;
	margin: 0;
}

@media (max-width: 900px) {
	.adv-offer { padding: 70px 20px; }
	.adv-offer__title { font-size: 32px; }
	.adv-offer__grid { grid-template-columns: 1fr; gap: 18px; }
	.adv-card__title { font-size: 21px; }
	.adv-card__body { padding: 24px 26px 28px; }
}

/* ----- Network section ----- */
.adv-network {
	padding: 100px 32px;
	background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
}

.adv-network__head {
	max-width: 760px;
	margin: 0 auto 56px;
	text-align: center;
}

.adv-network__title {
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -1.2px;
	color: var(--vb-color-ink);
	line-height: 1.1;
	margin: 14px 0 16px;
}

.adv-network__title em { font-style: normal; color: var(--vb-color-primary); }

.adv-network__sub {
	font-size: 16px;
	line-height: 1.65;
	color: var(--vb-color-muted);
}

.adv-network__grid {
	max-width: 1100px;
	margin: 0 auto;
}

@media (max-width: 900px) {
	.adv-network { padding: 70px 20px; }
	.adv-network__title { font-size: 32px; }
}

/* ----- Social proof — campaign stats + testimonials ----- */
.adv-proof {
	padding: 100px 32px;
	background:
		radial-gradient(circle at 0% 0%, rgba(23, 163, 182, 0.05), transparent 50%),
		radial-gradient(circle at 100% 100%, rgba(99, 102, 241, 0.05), transparent 50%),
		linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
}

.adv-proof__head {
	max-width: 720px;
	margin: 0 auto 48px;
	text-align: center;
}

.adv-proof__title {
	font-size: 42px;
	font-weight: 800;
	letter-spacing: -1.2px;
	color: var(--vb-color-ink);
	line-height: 1.1;
	margin: 14px 0 0;
}

.adv-proof__title em { font-style: normal; color: var(--vb-color-primary); }

.adv-proof__stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	max-width: 1100px;
	margin: 0 auto 80px;
	border: 1px solid #e5e9ef;
	border-radius: 20px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 6px 24px -10px rgba(15, 23, 42, 0.06);
}

.adv-proof__stat {
	padding: 36px 28px;
	border-right: 1px solid #eef0f5;
	text-align: center;
	transition: background 0.25s ease;
}

.adv-proof__stat:last-child { border-right: 0; }
.adv-proof__stat:hover      { background: #fafbff; }

.adv-proof__num {
	font-family: var(--vb-font-heading);
	font-size: 44px;
	font-weight: 800;
	color: var(--vb-color-ink);
	line-height: 1;
	letter-spacing: -1.4px;
	margin-bottom: 10px;
}

.adv-proof__num .suf { color: var(--vb-color-accent); font-size: 0.7em; }

.adv-proof__label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--vb-color-ink);
	margin-bottom: 4px;
}

.adv-proof__sub {
	font-size: 12.5px;
	color: var(--vb-color-muted);
	line-height: 1.45;
}

.adv-proof__voices { max-width: 1240px; margin: 0 auto; }

@media (max-width: 1024px) {
	.adv-proof { padding: 70px 24px; }
	.adv-proof__title { font-size: 32px; }
	.adv-proof__stats { grid-template-columns: repeat(2, 1fr); }
	.adv-proof__stat:nth-child(2) { border-right: 0; }
	.adv-proof__stat:nth-child(3),
	.adv-proof__stat:nth-child(4) { border-top: 1px solid #eef0f5; }
	.adv-proof__num { font-size: 36px; }
}

@media (max-width: 540px) {
	.adv-proof__stats { grid-template-columns: 1fr; }
	.adv-proof__stat { border-right: 0; border-top: 1px solid #eef0f5; }
	.adv-proof__stat:first-child { border-top: 0; }
}

/* ----- Lead section header — title, sub, stats above the wizard ----- */
.adv-lead {
	position: relative;
	overflow: hidden;
	padding: 100px 32px 120px;
	background: #050b14;
	color: #fff;
	scroll-margin-top: 24px;
}

/* Dark "urgency" feel: soft teal + pink glows and a faint grid texture */
.adv-lead::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 12% 30%, rgba(23,163,182,0.22), transparent 50%),
		radial-gradient(circle at 88% 70%, rgba(236,72,153,0.18), transparent 50%);
	pointer-events: none;
}

.adv-lead::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%);
	-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%);
	pointer-events: none;
}

.adv-lead__inner { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; }

.adv-lead__head { text-align: center; margin-bottom: 48px; }

.adv-lead__title {
	font-size: 48px;
	font-weight: 800;
	letter-spacing: -1.4px;
	color: #ffffff;
	line-height: 1.05;
	margin: 0 0 18px;
}

.adv-lead__title em { font-style: normal; color: var(--vb-color-accent); }

.adv-lead__sub {
	font-size: 16.5px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.72);
	max-width: 720px;
	margin: 0 auto 36px;
}

.adv-lead__stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	max-width: 820px;
	margin: 0 auto;
	padding: 24px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.adv-lead__stat {
	text-align: center;
	padding: 0 16px;
	border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.adv-lead__stat:last-child { border-right: 0; }

.adv-lead__stat-num {
	font-family: var(--vb-font-heading);
	font-size: 32px;
	font-weight: 800;
	color: #ffffff;
	line-height: 1;
	letter-spacing: -0.8px;
	margin-bottom: 8px;
}

.adv-lead__stat-num .suf { color: var(--vb-color-accent); font-size: 0.7em; }

.adv-lead__stat-label {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.6);
	letter-spacing: 0.03em;
	line-height: 1.35;
}

@media (max-width: 700px) {
	.adv-lead { padding: 70px 20px 90px; }
	.adv-lead__title { font-size: 30px; }
	.adv-lead__stats { grid-template-columns: repeat(2, 1fr); gap: 16px 0; }
	.adv-lead__stat:nth-child(2) { border-right: 0; }
	.adv-lead__stat:nth-child(3),
	.adv-lead__stat:nth-child(4) { border-top: 1px solid #eef0f5; padding-top: 16px; }
	.adv-lead__stat-num { font-size: 26px; }
}

/* ----- Multi-step brief wizard ----- */
.adv-brief {
	background: #ffffff;
	border: 1px solid #e5e9ef;
	border-radius: 24px;
	padding: 36px 40px 32px;
	box-shadow: 0 24px 60px -28px rgba(15, 23, 42, 0.18);
}

/* Top bar: progress + counter */
.adv-brief__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
}

.adv-brief__progress {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	flex: 1;
}

.adv-brief__seg {
	height: 6px;
	border-radius: 99px;
	background: #e2e8f0;
	transition: background 0.3s ease;
}

.adv-brief__seg.is-done {
	background: linear-gradient(90deg, var(--vb-color-primary), var(--vb-color-mute));
}

.adv-brief__counter {
	font-family: var(--vb-font-heading);
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--vb-color-mute-dark);
	font-weight: 700;
	white-space: nowrap;
}

.adv-brief__current { color: var(--vb-color-ink); font-size: 16px; }
.adv-brief__counter-sep { margin: 0 4px; color: #cbd5e1; }
.adv-brief__total { color: var(--vb-color-muted); }

/* Each step container — only the active one is visible */
.adv-brief__step { display: none; }
.adv-brief__step.is-active {
	display: block;
	animation: adv-brief-in 0.3s ease;
}

@keyframes adv-brief-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.adv-brief__step-head { margin-bottom: 24px; }

.adv-brief__step-tag {
	display: inline-block;
	padding: 4px 11px;
	background: rgba(23, 163, 182, 0.12);
	border: 1px solid rgba(23, 163, 182, 0.30);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vb-color-primary-dark);
	margin-bottom: 14px;
}

.adv-brief__step-title {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.5px;
	color: var(--vb-color-ink);
	line-height: 1.2;
	margin: 0 0 8px;
}

.adv-brief__step-desc {
	font-size: 15px;
	line-height: 1.6;
	color: var(--vb-color-muted);
	margin: 0;
	max-width: 620px;
}

/* Fields grid (text/email/tel inputs) */
.adv-brief__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.adv-brief__field { display: flex; flex-direction: column; }

.adv-brief__field--full { grid-column: 1 / -1; }

.adv-brief__field label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vb-color-mute-dark);
	margin-bottom: 8px;
}

.adv-brief input,
.adv-brief textarea {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	background: #fafbff;
	font-size: 15px;
	font-family: inherit;
	color: var(--vb-color-ink);
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.adv-brief input::placeholder,
.adv-brief textarea::placeholder { color: #94a3b8; }

.adv-brief input:focus,
.adv-brief textarea:focus {
	outline: none;
	border-color: var(--vb-color-primary);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(23, 163, 182, 0.12);
}

.adv-brief textarea { resize: vertical; min-height: 90px; line-height: 1.55; }

/* Group label above a checkbox cluster */
.adv-brief__group { margin-bottom: 28px; }
.adv-brief__group:last-child { margin-bottom: 0; }

.adv-brief__group-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vb-color-mute-dark);
	margin-bottom: 12px;
}

/* Checkbox / radio cards */
.adv-brief__checks {
	display: grid;
	gap: 10px;
	margin-bottom: 22px;
}

.adv-brief__checks--3 { grid-template-columns: repeat(3, 1fr); }
.adv-brief__checks--4 { grid-template-columns: repeat(4, 1fr); }

.adv-brief__step:not(:has(.adv-brief__fields)) .adv-brief__checks:last-child { margin-bottom: 0; }

.adv-brief__check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	background: #fff;
	border: 1.5px solid #e2e8f0;
	border-radius: 14px;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
	user-select: none;
}

.adv-brief__check input { position: absolute; opacity: 0; pointer-events: none; }

.adv-brief__check--compact {
	align-items: center;
	padding: 12px 14px;
}

/* Custom check box */
.adv-brief__check-box {
	width: 22px;
	height: 22px;
	border: 1.5px solid #cbd5e1;
	border-radius: 6px;
	background: #fff;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.adv-brief__check-box svg { width: 12px; height: 12px; opacity: 0; transition: opacity 0.15s ease; }

/* Radio variant — circle instead of square */
.adv-brief__check--radio .adv-brief__check-box {
	border-radius: 50%;
	position: relative;
}

.adv-brief__check--radio .adv-brief__check-box::after {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #fff;
	opacity: 0;
	transition: opacity 0.15s ease;
}

/* Body wrapper for title + hint */
.adv-brief__check-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.adv-brief__check-label {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--vb-color-ink);
	letter-spacing: -0.1px;
	line-height: 1.3;
}

.adv-brief__check-hint {
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--vb-color-muted);
}

/* Hover */
.adv-brief__check:hover {
	border-color: #c7d2fe;
	background: #fbfcff;
}

/* Checked state */
.adv-brief__check:has(input:checked) {
	border-color: var(--vb-color-primary);
	background: rgba(23, 163, 182, 0.05);
	box-shadow: 0 0 0 3px rgba(23, 163, 182, 0.10);
}

.adv-brief__check:has(input:checked) .adv-brief__check-box {
	border-color: var(--vb-color-primary);
	background: var(--vb-color-primary);
}

.adv-brief__check:has(input:checked) .adv-brief__check-box svg { opacity: 1; }
.adv-brief__check--radio:has(input:checked) .adv-brief__check-box::after { opacity: 1; }

/* Focus-visible for keyboard users */
.adv-brief__check:has(input:focus-visible) {
	outline: 2px solid var(--vb-color-primary);
	outline-offset: 2px;
}

/* Nav row */
.adv-brief__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid #eef0f5;
}

.adv-brief__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	border: 1px solid transparent;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.adv-brief__btn--back {
	background: transparent;
	color: var(--vb-color-muted);
	border-color: #e2e8f0;
}

.adv-brief__btn--back:hover:not(:disabled) {
	color: var(--vb-color-ink);
	border-color: #cbd5e1;
	background: #fafbff;
}

.adv-brief__btn--back:disabled { opacity: 0.4; cursor: not-allowed; }

.adv-brief__btn--next {
	background: var(--vb-color-ink);
	color: #fff;
	border-color: var(--vb-color-ink);
}

.adv-brief__btn--next:hover {
	background: var(--vb-color-primary);
	border-color: var(--vb-color-primary);
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -10px rgba(23, 163, 182, 0.45);
}

/* Success state */
.adv-brief__success {
	display: none;
	text-align: center;
	padding: 40px 20px;
}

.adv-brief__success.is-visible { display: block; animation: adv-brief-in 0.35s ease; }

.adv-brief__success-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--vb-color-primary), var(--vb-color-mute));
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
	box-shadow: 0 14px 32px -12px rgba(23, 163, 182, 0.45);
}

.adv-brief__success-icon svg { width: 28px; height: 28px; }

.adv-brief__success h3 {
	font-size: 24px;
	font-weight: 800;
	color: var(--vb-color-ink);
	letter-spacing: -0.4px;
	margin: 0 0 10px;
}

.adv-brief__success p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--vb-color-muted);
	max-width: 480px;
	margin: 0 auto;
}

@media (max-width: 900px) {
	.adv-brief__checks--3,
	.adv-brief__checks--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
	.adv-brief { padding: 26px 22px 22px; border-radius: 18px; }
	.adv-brief__top { flex-direction: column; align-items: stretch; gap: 12px; }
	.adv-brief__counter { text-align: right; }
	.adv-brief__step-title { font-size: 22px; }
	.adv-brief__fields { grid-template-columns: 1fr; gap: 14px; }
	.adv-brief__checks--3,
	.adv-brief__checks--4 { grid-template-columns: 1fr; }
	.adv-brief__btn { padding: 12px 18px; font-size: 13.5px; }
}

/* ============================================================
 * Our Story page — editorial, letter-style
 * ============================================================ */

/* ----- Hero (reuses wwp-hero base, editorial title, scroll-down link) ----- */
.os-hero__overlay {
	padding: 130px 40px 100px;
	max-width: 1200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 90vh;
}

.os-hero__content {
	max-width: 900px;
	position: relative;
}

.os-hero__title {
	font-size: 62px;
	font-weight: 800;
	letter-spacing: -1.5px;
	line-height: 1.1;
	color: #fff;
	margin-bottom: 40px;
}

.os-hero__title span {
	color: var(--vb-color-accent);
}

.os-hero__scroll {
	position: absolute;
	left: 0;
	bottom: -80px;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: rgba(255,255,255,0.72);
	text-decoration: none;
	font-size: 11.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 700;
	transition: color 0.2s ease, transform 0.2s ease;
}

.os-hero__scroll:hover {
	color: #fff;
	transform: translateY(2px);
}

.os-hero__scroll-icon {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.25);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	animation: adv-bounce 2s ease-in-out infinite;
}

.os-hero__scroll-icon svg { width: 14px; height: 14px; }

@media (max-width: 1024px) {
	.os-hero__overlay { padding: 110px 24px 90px; }
	.os-hero__title { font-size: 40px; margin-bottom: 30px; }
	.os-hero__scroll { bottom: -60px; }
}

@media (max-width: 600px) {
	.os-hero__title { font-size: 30px; }
}

/* ----- Story body — editorial single-column ----- */
.os-story {
	padding: 120px 32px;
	background: #ffffff;
	scroll-margin-top: 24px;
}

.os-story__inner {
	max-width: 780px;
	margin: 0 auto;
}

.os-story__eyebrow { margin-bottom: 32px; }

.os-story__lead {
	font-size: 24px;
	line-height: 1.55;
	font-weight: 500;
	color: var(--vb-color-ink);
	letter-spacing: -0.4px;
	margin: 0 0 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid #e5e9ef;
}

.os-story__body p {
	font-size: 18px;
	line-height: 1.8;
	color: #334155;
	margin: 0 0 24px;
	font-weight: 400;
}

.os-story__body p:last-child { margin-bottom: 0; }

.os-story__body strong {
	color: var(--vb-color-ink);
	font-weight: 700;
}

@media (max-width: 1024px) {
	.os-story { padding: 80px 24px; }
	.os-story__lead { font-size: 20px; margin-bottom: 32px; padding-bottom: 32px; }
	.os-story__body p { font-size: 17px; }
}

@media (max-width: 600px) {
	.os-story__lead { font-size: 18px; letter-spacing: -0.2px; }
	.os-story__body p { font-size: 16px; line-height: 1.75; }
}

/* ----- Founders' Note — warm-tinted personal letter ----- */
.os-founders {
	position: relative;
	padding: 120px 32px;
	background:
		radial-gradient(circle at 15% 20%, rgba(23,163,182,0.06), transparent 55%),
		radial-gradient(circle at 85% 80%, rgba(129,140,248,0.06), transparent 55%),
		linear-gradient(180deg, #fafbf7 0%, #f7f5ef 100%);
	overflow: hidden;
}

/* Subtle grid texture */
.os-founders__bg {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(15, 23, 42, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15, 23, 42, 0.025) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
	-webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
	pointer-events: none;
}

.os-founders__inner {
	position: relative;
	z-index: 1;
	max-width: 800px;
	margin: 0 auto;
	background: #ffffff;
	border: 1px solid #eef0f5;
	border-radius: 24px;
	padding: 64px 60px 52px;
	box-shadow: 0 30px 80px -30px rgba(15, 23, 42, 0.18);
	position: relative;
}

.os-founders__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 36px;
}

.os-founders__eyebrow { margin-bottom: 0; }

.os-founders__mark {
	width: 56px;
	height: 56px;
	color: var(--vb-color-mute-light);
	opacity: 0.35;
	flex-shrink: 0;
}

.os-founders__body {}

.os-founders__opener {
	font-size: 22px;
	line-height: 1.55;
	font-weight: 500;
	color: var(--vb-color-ink);
	letter-spacing: -0.35px;
	margin: 0 0 28px;
	padding-bottom: 24px;
	border-bottom: 1px dashed #e5e9ef;
}

.os-founders__opener em {
	font-style: italic;
	color: var(--vb-color-muted);
	font-weight: 400;
}

.os-founders__opener strong {
	color: var(--vb-color-primary-dark);
	font-weight: 700;
}

.os-founders__body p {
	font-size: 17px;
	line-height: 1.8;
	color: #334155;
	margin: 0 0 22px;
	font-weight: 400;
}

.os-founders__body p em { font-style: italic; color: var(--vb-color-mute-dark); }
.os-founders__body p strong { color: var(--vb-color-ink); font-weight: 700; }

.os-founders__closer {
	font-size: 19px !important;
	line-height: 1.6 !important;
	font-weight: 500 !important;
	color: var(--vb-color-ink) !important;
	letter-spacing: -0.2px;
	margin-top: 8px !important;
	margin-bottom: 0 !important;
}

.os-founders__closer em {
	background: linear-gradient(90deg, var(--vb-color-primary), var(--vb-color-mute));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	font-weight: 700;
	font-style: normal !important;
}

/* Signature block */
.os-founders__signature {
	margin-top: 44px;
	padding-top: 32px;
	border-top: 1px solid #eef0f5;
}

.os-founders__signature-line {
	width: 40px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--vb-color-primary), var(--vb-color-mute));
	margin-bottom: 14px;
}

.os-founders__names {
	font-family: var(--vb-font-heading);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.3px;
	color: var(--vb-color-ink);
	margin-bottom: 6px;
}

.os-founders__role {
	font-size: 12.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vb-color-mute-dark);
	font-weight: 700;
}

@media (max-width: 900px) {
	.os-founders { padding: 90px 20px; }
	.os-founders__inner { padding: 44px 32px 40px; border-radius: 18px; }
	.os-founders__head { margin-bottom: 28px; }
	.os-founders__mark { width: 44px; height: 44px; }
	.os-founders__opener { font-size: 19px; padding-bottom: 20px; margin-bottom: 22px; }
	.os-founders__body p { font-size: 16px; }
	.os-founders__closer { font-size: 18px !important; }
	.os-founders__names { font-size: 18px; }
}

@media (max-width: 500px) {
	.os-founders__inner { padding: 32px 22px 28px; }
	.os-founders__opener { font-size: 17px; }
	.os-founders__body p { font-size: 15.5px; line-height: 1.75; }
}

/* ============================================================
 * Footer — dark, on-brand, real sitemap
 * ============================================================ */

/* ============================================================
 * Legal / basic page (page-legal.php)
 * ============================================================ */
.vb-legal {
	background: #ffffff;
	padding: 140px 24px 100px;
}

.vb-legal__inner {
	max-width: 820px;
	margin: 0 auto;
}

.vb-legal__head {
	padding-bottom: 28px;
	margin-bottom: 40px;
	border-bottom: 1px solid #e6e9ee;
}

.vb-legal__title {
	font-size: 46px;
	font-weight: 800;
	letter-spacing: -1.2px;
	line-height: 1.1;
	color: #0d1117;
	margin: 0 0 12px;
}

.vb-legal__updated {
	font-size: 14px;
	color: #7a8699;
	margin: 0;
}

.vb-legal__body {
	font-size: 17px;
	line-height: 1.75;
	color: #3a4453;
}

.vb-legal__body h2 {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.4px;
	color: #0d1117;
	margin: 44px 0 14px;
}

.vb-legal__body h3 {
	font-size: 20px;
	font-weight: 700;
	color: #0d1117;
	margin: 32px 0 10px;
}

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

.vb-legal__body ul,
.vb-legal__body ol {
	margin: 0 0 18px;
	padding-left: 22px;
}

.vb-legal__body li { margin-bottom: 8px; }

.vb-legal__body a {
	color: var(--vb-color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.vb-legal__body a:hover { color: var(--vb-color-primary-dark); }

@media (max-width: 768px) {
	.vb-legal { padding: 110px 20px 70px; }
	.vb-legal__title { font-size: 34px; }
	.vb-legal__body { font-size: 16px; }
}

/* ============================================================
 * Careers page (page-careers.php)
 * ============================================================ */
.vb-careers {
	background: #ffffff;
	padding: 140px 24px 100px;
}

.vb-careers__inner {
	max-width: 1040px;
	margin: 0 auto;
}

.vb-careers__hero {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 48px;
	align-items: center;
	margin-bottom: 64px;
}

.vb-careers__eyebrow {
	color: var(--vb-color-primary);
	margin-bottom: 18px;
}
.vb-careers__eyebrow .wwp-eyebrow__line { background: var(--vb-color-primary); }

.vb-careers__title {
	font-size: 48px;
	font-weight: 800;
	letter-spacing: -1.4px;
	line-height: 1.08;
	color: #0d1117;
	margin: 0 0 18px;
}

.vb-careers__sub {
	font-size: 18px;
	line-height: 1.7;
	color: #4a5568;
	margin: 0;
	max-width: 520px;
}

.vb-careers__hero-img img {
	width: 100%;
	height: 100%;
	max-height: 380px;
	object-fit: cover;
	border-radius: 20px;
	display: block;
}

.vb-careers__body {
	font-size: 17px;
	line-height: 1.75;
	color: #3a4453;
	max-width: 760px;
}

.vb-careers__body h2 {
	font-size: 26px; font-weight: 700; color: #0d1117; margin: 40px 0 14px;
}
.vb-careers__body h3 {
	font-size: 20px; font-weight: 700; color: #0d1117; margin: 30px 0 10px;
}
.vb-careers__body p  { margin: 0 0 18px; }
.vb-careers__body ul,
.vb-careers__body ol { margin: 0 0 18px; padding-left: 22px; }
.vb-careers__body li { margin-bottom: 8px; }

.vb-careers__cta {
	margin-top: 72px;
	text-align: center;
	background: linear-gradient(135deg, #043157 0%, #0a1628 100%);
	border-radius: 24px;
	padding: 56px 40px;
	color: #fff;
}

.vb-careers__cta-title {
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -0.6px;
	margin: 0 0 12px;
	color: #fff;
}

.vb-careers__cta-text {
	font-size: 17px;
	line-height: 1.7;
	color: #b7c3d4;
	max-width: 560px;
	margin: 0 auto 28px;
}

.vb-careers__cta-btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	background: var(--vb-color-primary);
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	padding: 16px 34px;
	border-radius: 14px;
	text-decoration: none;
	transition: background 0.25s ease, transform 0.25s ease;
}

.vb-careers__cta-btn:hover {
	background: var(--vb-color-primary-dark);
	transform: translateY(-2px);
}

.vb-careers__cta-email {
	font-size: 13px;
	font-weight: 500;
	opacity: 0.85;
}

@media (max-width: 860px) {
	.vb-careers__hero {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.vb-careers__hero-img { order: -1; }
}

@media (max-width: 768px) {
	.vb-careers { padding: 110px 20px 70px; }
	.vb-careers__title { font-size: 34px; }
	.vb-careers__cta { padding: 40px 24px; }
	.vb-careers__cta-title { font-size: 26px; }
}

/* ============================================================
 * What Sets Us Apart (page-what-sets-us-apart.php)
 * ============================================================ */
.wsa-pillars { padding: 100px 24px; background: #ffffff; }
.wsa-pillars__inner { max-width: 1160px; margin: 0 auto; }

.wsa-pillars__head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.wsa-pillars__head .wwp-eyebrow { color: var(--vb-color-primary); justify-content: center; display: inline-flex; margin-bottom: 16px; }
.wsa-pillars__head .wwp-eyebrow__line { background: var(--vb-color-primary); }
.wsa-pillars__title {
	font-size: 38px;
	font-weight: 800;
	letter-spacing: -1px;
	line-height: 1.15;
	color: var(--vb-color-ink);
	margin: 0;
}

.wsa-pillars__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

/* Shared card — 4:3 photo on top, text below */
.wsa-card {
	display: flex;
	flex-direction: column;
	background: #fafbff;
	border: 1px solid #e6e9f0;
	border-radius: 20px;
	overflow: hidden;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.wsa-card:hover {
	transform: translateY(-5px);
	border-color: rgba(23, 163, 182, 0.4);
	box-shadow: 0 20px 40px -22px rgba(13, 22, 40, 0.22);
}
.wsa-card__media {
	position: relative;
	aspect-ratio: 4 / 3;          /* 1448 × 1086 */
	overflow: hidden;
	background: #eef2f7;
}
.wsa-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}
.wsa-card:hover .wsa-card__media img { transform: scale(1.05); }
/* icon placeholder shown until a photo is uploaded */
.wsa-card__media.is-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(23,163,182,0.14), rgba(5,190,215,0.10));
}
.wsa-card__ph { color: var(--vb-color-primary); opacity: 0.55; }
.wsa-card__ph svg { width: 46px; height: 46px; }
.wsa-card__body { padding: 22px 24px 26px; }
.wsa-card__title {
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.3px;
	line-height: 1.25;
	color: var(--vb-color-ink);
	margin: 0 0 8px;
}
.wsa-card__desc {
	font-size: 15px;
	line-height: 1.65;
	color: var(--vb-color-muted);
	margin: 0;
}

/* Section 2 — dark */
.wsa-how {
	padding: 100px 24px;
	position: relative;
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient(circle at 15% 12%, rgba(23,163,182,0.20), transparent 55%),
		radial-gradient(circle at 85% 20%, rgba(129,140,248,0.16), transparent 55%),
		linear-gradient(180deg, #0a1628 0%, #050b14 100%);
}
.wsa-how__inner { position: relative; z-index: 1; max-width: 1160px; margin: 0 auto; }
.wsa-how__head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.wsa-how__eyebrow { color: var(--vb-color-accent); justify-content: center; display: inline-flex; margin-bottom: 16px; }
.wsa-how__eyebrow .wwp-eyebrow__line { background: var(--vb-color-accent); }
.wsa-how__title {
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -1.2px;
	line-height: 1.12;
	color: #fff;
	margin: 0 0 16px;
}
.wsa-how__title em { font-style: normal; color: var(--vb-color-accent); }
.wsa-how__sub {
	font-size: 17px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
}

.wsa-how__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-bottom: 28px;
}
.wsa-card--dark {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.10);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.wsa-card--dark:hover {
	border-color: rgba(23, 163, 182, 0.45);
	box-shadow: 0 24px 46px -26px rgba(0, 0, 0, 0.6);
}
.wsa-card--dark .wsa-card__media { background: #0e1c30; }
.wsa-card--dark .wsa-card__media.is-empty {
	background: linear-gradient(135deg, rgba(23,163,182,0.22), rgba(5,190,215,0.10));
}
.wsa-card--dark .wsa-card__ph { color: var(--vb-color-accent); opacity: 0.7; }
.wsa-card--dark .wsa-card__title { color: #fff; }
.wsa-card--dark .wsa-card__desc { color: rgba(255, 255, 255, 0.68); }

/* Sustainability band */
.wsa-eco {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 36px;
	flex-wrap: wrap;
	padding: 36px 40px;
	border-radius: 22px;
	background: linear-gradient(135deg, rgba(23,163,182,0.9), rgba(5,190,215,0.75));
	color: #04252b;
}
.wsa-eco__text { display: flex; align-items: center; gap: 18px; max-width: 640px; }
.wsa-eco__leaf {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.35);
	color: #04252b;
}
.wsa-eco__leaf svg { width: 26px; height: 26px; }
.wsa-eco__title {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.4px;
	line-height: 1.25;
	margin: 0;
	color: #04252b;
}
.wsa-eco__stat { text-align: right; flex-shrink: 0; }
.wsa-eco__num {
	display: block;
	font-family: var(--vb-font-heading);
	font-size: 64px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -2px;
	color: #ffffff;
}
.wsa-eco__pct { font-size: 0.55em; }
.wsa-eco__label { font-size: 14px; font-weight: 600; color: #04353d; }

@media (max-width: 900px) {
	.wsa-pillars, .wsa-how { padding: 70px 20px; }
	.wsa-pillars__title { font-size: 30px; }
	.wsa-how__title { font-size: 30px; }
	.wsa-pillars__grid { grid-template-columns: 1fr 1fr; }
	.wsa-how__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
	.wsa-pillars__grid, .wsa-how__grid { grid-template-columns: 1fr; }
	.wsa-eco { padding: 28px 24px; text-align: left; }
	.wsa-eco__stat { text-align: left; }
	.wsa-eco__num { font-size: 52px; }
}

/* ============================================================
 * Place a Machine (page-partner-with-us.php)
 * ============================================================ */
.pm-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 26px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none !important;
	border: 1px solid transparent;
	cursor: pointer;
	font-family: inherit;
	transition: transform 0.2s ease, background 0.2s ease;
}
.pm-btn--primary { background: var(--vb-color-primary); color: #fff; }
.pm-btn--primary:hover { background: var(--vb-color-primary-dark); color: #fff; transform: translateY(-2px); }

.pm-eyebrow { color: var(--vb-color-primary); display: inline-flex; margin-bottom: 14px; }
.pm-eyebrow .wwp-eyebrow__line { background: var(--vb-color-primary); }

/* How it works */
.pm-how { padding: 100px 24px; background: #ffffff; }
.pm-how__inner { max-width: 1160px; margin: 0 auto; }
.pm-how__head { margin-bottom: 44px; }
.pm-how__title { font-size: 38px; font-weight: 800; letter-spacing: -1px; line-height: 1.15; color: var(--vb-color-ink); margin: 0; }
.pm-how__title em { font-style: normal; color: var(--vb-color-primary); }

.pm-how__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.pm-how__steps { display: flex; flex-direction: column; gap: 26px; }
.pm-step { display: flex; gap: 18px; }
.pm-step__num {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--vb-font-heading);
	font-size: 15px;
	font-weight: 800;
	color: #fff;
	background: linear-gradient(135deg, var(--vb-color-primary), var(--vb-color-accent));
}
.pm-step__title { font-size: 19px; font-weight: 800; letter-spacing: -0.3px; color: var(--vb-color-ink); margin: 0 0 6px; }
.pm-step__desc { font-size: 15px; line-height: 1.65; color: var(--vb-color-muted); margin: 0; }
.pm-how__steps .pm-btn { align-self: flex-start; margin-top: 10px; }

.pm-how__media {
	border-radius: 22px;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	box-shadow: 0 30px 60px -30px rgba(13, 22, 40, 0.3);
}
.pm-how__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Models */
.pm-models { padding: 100px 24px; background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%); }
.pm-models__head { max-width: 1160px; margin: 0 auto 48px; }
.pm-models__title { font-size: 38px; font-weight: 800; letter-spacing: -1px; line-height: 1.15; color: var(--vb-color-ink); margin: 0; }
.pm-models__list { max-width: 1160px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }

.pm-model {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	background: #fff;
	border: 1px solid #e6e9f0;
	border-radius: 24px;
	overflow: hidden;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.pm-model:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(13, 22, 40, 0.25); }
.pm-model__media { position: relative; overflow: hidden; min-height: 300px; }
.pm-model--reverse .pm-model__media { order: 2; }
.pm-model__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.pm-model:hover .pm-model__media img { transform: scale(1.05); }
.pm-model__badge {
	position: absolute;
	top: 18px;
	left: 18px;
	z-index: 2;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	background: var(--accent);
	padding: 7px 13px;
	border-radius: 999px;
}
.pm-model__body { padding: 38px 42px; align-self: center; }
.pm-model--reverse .pm-model__body { order: 1; }
.pm-model__name { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.pm-model__tagline { font-size: 27px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.15; color: var(--vb-color-ink); margin: 0 0 14px; }
.pm-model__desc { font-size: 15.5px; line-height: 1.7; color: var(--vb-color-muted); margin: 0; }
.pm-model__email { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; font-weight: 700; color: var(--accent); text-decoration: none; }
.pm-model__email:hover { text-decoration: underline; }

/* Contact / form */
.pm-contact {
	position: relative;
	overflow: hidden;
	padding: 100px 24px;
	color: #fff;
	background:
		radial-gradient(circle at 12% 20%, rgba(23,163,182,0.20), transparent 55%),
		radial-gradient(circle at 88% 80%, rgba(129,140,248,0.16), transparent 55%),
		linear-gradient(180deg, #0a1628 0%, #050b14 100%);
}
.pm-contact__inner {
	position: relative;
	z-index: 1;
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 56px;
	align-items: center;
}
.pm-contact__eyebrow { color: var(--vb-color-accent); display: inline-flex; margin-bottom: 14px; }
.pm-contact__eyebrow .wwp-eyebrow__line { background: var(--vb-color-accent); }
.pm-contact__title { font-size: 40px; font-weight: 800; letter-spacing: -1.2px; line-height: 1.1; margin: 0 0 14px; color: #fff; }
.pm-contact__sub { font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.72); margin: 0 0 24px; max-width: 420px; }
.pm-contact__mail {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	padding: 12px 18px;
	border-radius: 12px;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.16);
}
.pm-contact__mail:hover { background: rgba(255,255,255,0.14); color: #fff; }
.pm-contact__mail svg { color: var(--vb-color-accent); }

.pm-form { background: #fff; border-radius: 22px; padding: 32px; box-shadow: 0 40px 80px -40px rgba(0,0,0,0.6); }
.pm-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pm-form__field { display: flex; flex-direction: column; margin-bottom: 16px; }
.pm-form__field label { font-size: 12.5px; font-weight: 700; color: var(--vb-color-ink); margin-bottom: 7px; }
.pm-form__field input,
.pm-form__field select,
.pm-form__field textarea {
	font-family: inherit;
	font-size: 15px;
	color: var(--vb-color-ink);
	padding: 12px 14px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	background: #fafbff;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.pm-form__field input:focus,
.pm-form__field select:focus,
.pm-form__field textarea:focus {
	outline: none;
	border-color: var(--vb-color-primary);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(23,163,182,0.12);
}
.pm-form__field textarea { resize: vertical; }
.pm-form__submit { width: 100%; justify-content: center; margin-top: 6px; }

@media (max-width: 900px) {
	.pm-how, .pm-models, .pm-contact { padding: 70px 20px; }
	.pm-how__title, .pm-models__title, .pm-contact__title { font-size: 30px; }
	.pm-how__grid { grid-template-columns: 1fr; gap: 34px; }
	.pm-how__media { aspect-ratio: 16 / 10; max-height: 360px; }
	.pm-model { grid-template-columns: 1fr; }
	.pm-model__media { min-height: 0; aspect-ratio: 16 / 10; order: 1 !important; }
	.pm-model__body { order: 2 !important; padding: 28px 24px; }
	.pm-contact__inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) {
	.pm-form__row { grid-template-columns: 1fr; gap: 0; }
	.pm-form { padding: 24px; }
}

/* ============================================================
 * Blog — listing (page-blog.php) + single post (single.php)
 * ============================================================ */
.vb-blog__head {
	background: linear-gradient(180deg, #0a1628 0%, #0b1a30 100%);
	color: #fff;
	padding: 150px 24px 60px;
	text-align: center;
}
.vb-blog__head-inner { max-width: 760px; margin: 0 auto; }
.vb-blog__eyebrow { color: var(--vb-color-accent); justify-content: center; display: inline-flex; margin-bottom: 16px; }
.vb-blog__eyebrow .wwp-eyebrow__line { background: var(--vb-color-accent); }
.vb-blog__title { font-size: 46px; font-weight: 800; letter-spacing: -1.4px; line-height: 1.1; margin: 0 0 14px; color: #fff; }
.vb-blog__sub { font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.72); margin: 0 auto; max-width: 600px; }

.vb-blog { padding: 72px 24px 100px; background: #ffffff; }
.vb-blog__grid {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.vb-post-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e6e9f0;
	border-radius: 18px;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.vb-post-card:hover {
	transform: translateY(-5px);
	border-color: rgba(23,163,182,0.4);
	box-shadow: 0 24px 46px -26px rgba(13,22,40,0.24);
}
.vb-post-card__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #eef2f7; }
.vb-post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.vb-post-card:hover .vb-post-card__media img { transform: scale(1.06); }
.vb-post-card__media.is-empty { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(23,163,182,0.14), rgba(5,190,215,0.10)); }
.vb-post-card__ph { color: var(--vb-color-primary); opacity: 0.5; }
.vb-post-card__ph svg { width: 42px; height: 42px; }

.vb-post-card__body { display: flex; flex-direction: column; flex-grow: 1; padding: 22px 24px 26px; }
.vb-post-card__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 12px; }
.vb-post-card__cat { font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vb-color-primary); }
.vb-post-card__date { color: var(--vb-color-muted); }
.vb-post-card__title { font-size: 20px; font-weight: 800; letter-spacing: -0.4px; line-height: 1.25; margin: 0 0 10px; }
.vb-post-card__title a { color: var(--vb-color-ink); text-decoration: none; }
.vb-post-card__title a:hover { color: var(--vb-color-primary); }
.vb-post-card__excerpt { font-size: 14.5px; line-height: 1.65; color: var(--vb-color-muted); margin: 0 0 18px; }
.vb-post-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--vb-color-primary); text-decoration: none; }
.vb-post-card__more:hover { gap: 11px; }

.vb-blog__pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 56px auto 0; }
.vb-blog__pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 12px;
	border: 1px solid #e2e8f0; border-radius: 10px;
	font-size: 15px; font-weight: 700; color: var(--vb-color-ink); text-decoration: none;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.vb-blog__pagination .page-numbers:hover { border-color: var(--vb-color-primary); color: var(--vb-color-primary); }
.vb-blog__pagination .page-numbers.current { background: var(--vb-color-primary); border-color: var(--vb-color-primary); color: #fff; }

.vb-blog__empty { max-width: 520px; margin: 0 auto; text-align: center; padding: 60px 20px; }
.vb-blog__empty h2 { font-size: 26px; font-weight: 800; color: var(--vb-color-ink); margin: 0 0 10px; }
.vb-blog__empty p { font-size: 16px; color: var(--vb-color-muted); margin: 0; }

/* ----- Single post ----- */
.vb-post-page { background: #ffffff; }
.vb-post { max-width: 760px; margin: 0 auto; padding: 140px 24px 90px; }
.vb-post__head { margin-bottom: 30px; }
.vb-post__back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--vb-color-primary); text-decoration: none; margin-bottom: 24px; }
.vb-post__back:hover { color: var(--vb-color-primary-dark); }
.vb-post__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--vb-color-muted); margin-bottom: 16px; }
.vb-post__cat { font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vb-color-primary); }
.vb-post__dot { color: #cbd5e1; }
.vb-post__title { font-size: 44px; font-weight: 800; letter-spacing: -1.4px; line-height: 1.12; color: var(--vb-color-ink); margin: 0 0 14px; }
.vb-post__byline { font-size: 14px; color: var(--vb-color-muted); }

.vb-post__hero { margin: 6px 0 36px; border-radius: 20px; overflow: hidden; }
.vb-post__hero img { width: 100%; height: auto; display: block; }

.vb-post__body { font-size: 17.5px; line-height: 1.8; color: #333c48; }
.vb-post__body > * + * { margin-top: 22px; }
.vb-post__body h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.6px; color: var(--vb-color-ink); margin-top: 44px; line-height: 1.2; }
.vb-post__body h3 { font-size: 23px; font-weight: 700; color: var(--vb-color-ink); margin-top: 34px; }
.vb-post__body a { color: var(--vb-color-primary); text-decoration: underline; text-underline-offset: 2px; }
.vb-post__body ul, .vb-post__body ol { padding-left: 24px; }
.vb-post__body li { margin-bottom: 8px; }
.vb-post__body img { max-width: 100%; height: auto; border-radius: 14px; }
.vb-post__body blockquote {
	margin: 28px 0; padding: 6px 0 6px 24px;
	border-left: 4px solid var(--vb-color-primary);
	font-size: 20px; font-style: italic; color: var(--vb-color-ink);
}
.vb-post__body figure { margin: 28px 0; }
.vb-post__body pre { background: #0e1c30; color: #e6edf3; padding: 18px 20px; border-radius: 12px; overflow-x: auto; font-size: 14px; }

.vb-post__footer { margin-top: 48px; padding-top: 28px; border-top: 1px solid #e6e9f2; }

@media (max-width: 900px) {
	.vb-blog__grid { grid-template-columns: 1fr 1fr; }
	.vb-blog__title { font-size: 36px; }
}
@media (max-width: 620px) {
	.vb-blog__head { padding: 120px 20px 48px; }
	.vb-blog { padding: 48px 20px 72px; }
	.vb-blog__grid { grid-template-columns: 1fr; }
	.vb-post { padding: 120px 20px 70px; }
	.vb-post__title { font-size: 32px; }
	.vb-post__body { font-size: 16.5px; }
}

/* ============================================================
 * Form-plugin styling (Forminator) — brand-matched inputs/buttons.
 * Applies wherever a plugin form is embedded via vb_render_form().
 * Some props use !important to win over Forminator's bundled CSS.
 * ============================================================ */
.forminator-ui.forminator-custom-form { font-family: var(--vb-font-body) !important; }
.forminator-ui .forminator-label,
.forminator-ui .forminator-label--main {
	font-size: 12.5px !important;
	font-weight: 700 !important;
	color: var(--vb-color-ink) !important;
	margin-bottom: 7px !important;
}
.forminator-ui .forminator-input,
.forminator-ui .forminator-textarea,
.forminator-ui select.forminator-select,
.forminator-ui .forminator-select .select2-selection {
	font-family: inherit !important;
	font-size: 15px !important;
	color: var(--vb-color-ink) !important;
	padding: 12px 14px !important;
	height: auto !important;
	min-height: 48px !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 10px !important;
	background: #fafbff !important;
	box-shadow: none !important;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.forminator-ui .forminator-input:focus,
.forminator-ui .forminator-textarea:focus,
.forminator-ui select.forminator-select:focus {
	border-color: var(--vb-color-primary) !important;
	background: #fff !important;
	box-shadow: 0 0 0 3px rgba(23, 163, 182, 0.12) !important;
}

/* Submit + step nav buttons.
   NOTE: do NOT set `display` here — Forminator toggles display:none to hide the
   Previous button on page 1 and the inactive submit. Forcing display would make
   those show (duplicate submit / stray Previous). Style appearance only. */
.forminator-ui button.forminator-button,
.forminator-ui .forminator-button-submit,
.forminator-ui .forminator-button-next,
.forminator-ui .forminator-button-back {
	background: var(--vb-color-primary) !important;
	color: #fff !important;
	font-family: inherit !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	padding: 14px 28px !important;
	border: none !important;
	border-radius: 12px !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
.forminator-ui button.forminator-button:hover,
.forminator-ui .forminator-button-submit:hover,
.forminator-ui .forminator-button-next:hover {
	background: var(--vb-color-primary-dark) !important;
	transform: translateY(-2px);
}
.forminator-ui .forminator-button-back {
	background: #eef2f7 !important;
	color: var(--vb-color-ink) !important;
}
.forminator-ui .forminator-button-back:hover { background: #e2e8f0 !important; transform: none; }

/* Multi-step indicator — recolor Forminator's default blue to brand teal.
   The stepper is JS-rendered, so these use tolerant attribute selectors and
   !important to win over any inline styles Forminator applies. */
.forminator-ui [class*="pagination-step"].forminator-active,
.forminator-ui [class*="pagination-step"][aria-selected="true"],
.forminator-ui [class*="progress-step"].active,
.forminator-ui [class*="progress-step"].forminator-active,
.forminator-ui [class*="pagination-steps"] [aria-selected="true"] {
	color: var(--vb-color-primary) !important;
}
/* the numbered / dot markers */
.forminator-ui [class*="pagination-step"].forminator-active [class*="number"],
.forminator-ui [class*="pagination-step"].forminator-complete [class*="number"],
.forminator-ui [class*="pagination-step"].forminator-active::before,
.forminator-ui [class*="pagination-step"].forminator-complete::before,
.forminator-ui [class*="progress-step"].active [class*="number"],
.forminator-ui [class*="progress-step"].completed [class*="number"] {
	background-color: var(--vb-color-primary) !important;
	border-color: var(--vb-color-primary) !important;
	color: #fff !important;
}
/* the connecting line / progress fill */
.forminator-ui [class*="progress"][class*="filled"],
.forminator-ui [class*="progress"][class*="bar"] > span,
.forminator-ui [class*="pagination-steps"] [class*="line"],
.forminator-ui [class*="pagination-steps"] [class*="progress"] {
	background-color: var(--vb-color-primary) !important;
}
/* space the Prev / Next / Submit buttons out */
.forminator-ui .forminator-button + .forminator-button { margin-left: 12px !important; }

/* Radios / checkboxes accent */
.forminator-ui .forminator-checkbox input:checked + .forminator-checkbox-box,
.forminator-ui .forminator-radio input:checked + .forminator-radio-box {
	border-color: var(--vb-color-primary) !important;
}
.forminator-ui .forminator-checkbox input:checked + .forminator-checkbox-box::before,
.forminator-ui .forminator-radio input:checked + .forminator-radio-box::before {
	background: var(--vb-color-primary) !important;
}

/* Validation + success */
.forminator-ui .forminator-error-message { color: #e2562f !important; font-size: 12.5px !important; }
.forminator-ui .forminator-has_error .forminator-input,
.forminator-ui .forminator-has_error .forminator-textarea { border-color: #e2562f !important; }
.forminator-ui .forminator-response-message.forminator-success {
	background: rgba(23,163,182,0.10) !important;
	border: 1px solid rgba(23,163,182,0.3) !important;
	color: var(--vb-color-ink) !important;
	border-radius: 12px !important;
}

/* Forms on dark sections (Advertise .adv-lead, Careers .vb-careers__cta) — make
   the Forminator label / helper / option / heading text white. Inputs keep their
   light background + dark text (readable), so they are deliberately untouched. */
.adv-lead .forminator-ui,
.adv-lead .forminator-ui .forminator-label,
.adv-lead .forminator-ui .forminator-label--main,
.adv-lead .forminator-ui .forminator-description,
.adv-lead .forminator-ui .forminator-radio,
.adv-lead .forminator-ui .forminator-checkbox,
.adv-lead .forminator-ui legend,
.adv-lead .forminator-ui p,
.adv-lead .forminator-ui h1,
.adv-lead .forminator-ui h2,
.adv-lead .forminator-ui h3,
.adv-lead .forminator-ui h4,
.vb-careers__cta .forminator-ui,
.vb-careers__cta .forminator-ui .forminator-label,
.vb-careers__cta .forminator-ui .forminator-label--main,
.vb-careers__cta .forminator-ui .forminator-description,
.vb-careers__cta .forminator-ui .forminator-radio,
.vb-careers__cta .forminator-ui .forminator-checkbox,
.vb-careers__cta .forminator-ui legend,
.vb-careers__cta .forminator-ui p,
.vb-careers__cta .forminator-ui h1,
.vb-careers__cta .forminator-ui h2,
.vb-careers__cta .forminator-ui h3,
.vb-careers__cta .forminator-ui h4,
.pm-contact .forminator-ui,
.pm-contact .forminator-ui .forminator-label,
.pm-contact .forminator-ui .forminator-label--main,
.pm-contact .forminator-ui .forminator-description,
.pm-contact .forminator-ui .forminator-radio,
.pm-contact .forminator-ui .forminator-checkbox,
.pm-contact .forminator-ui legend,
.pm-contact .forminator-ui p,
.pm-contact .forminator-ui h1,
.pm-contact .forminator-ui h2,
.pm-contact .forminator-ui h3,
.pm-contact .forminator-ui h4 {
	color: #ffffff !important;
}
/* Keep field text dark on the light input backgrounds (re-assert after the
   white container rule above so inputs stay readable). */
.adv-lead .forminator-ui .forminator-input,
.adv-lead .forminator-ui .forminator-textarea,
.adv-lead .forminator-ui select.forminator-select,
.adv-lead .forminator-ui .forminator-select .select2-selection,
.adv-lead .forminator-ui .select2-selection__rendered,
.vb-careers__cta .forminator-ui .forminator-input,
.vb-careers__cta .forminator-ui .forminator-textarea,
.vb-careers__cta .forminator-ui select.forminator-select,
.vb-careers__cta .forminator-ui .forminator-select .select2-selection,
.vb-careers__cta .forminator-ui .select2-selection__rendered,
.pm-contact .forminator-ui .forminator-input,
.pm-contact .forminator-ui .forminator-textarea,
.pm-contact .forminator-ui select.forminator-select,
.pm-contact .forminator-ui .forminator-select .select2-selection,
.pm-contact .forminator-ui .select2-selection__rendered {
	color: var(--vb-color-ink) !important;
}

/* Hide any leftover Astra footer if it ever sneaks through */
.site-footer:not(.vb-footer),
.ast-footer-widgets,
.ast-small-footer { display: none !important; }

.vb-footer {
	position: relative;
	background: #050b14;
	color: rgba(255, 255, 255, 0.7);
	padding: 90px 32px 32px;
	overflow: hidden;
	font-family: var(--vb-font-body);
}

/* Radial accent glows */
.vb-footer__glow {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 15% 20%, rgba(23, 163, 182, 0.16), transparent 55%),
		radial-gradient(circle at 85% 80%, rgba(129, 140, 248, 0.14), transparent 55%);
	pointer-events: none;
}

.vb-footer__inner {
	position: relative;
	z-index: 1;
	max-width: 1320px;
	margin: 0 auto;
}

/* ===== Top area — brand + 4 sitemap columns ===== */
.vb-footer__main {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
	gap: 48px 40px;
	padding-bottom: 56px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.vb-footer__brand { padding-right: 24px; }

.vb-footer__logo-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	margin-bottom: 22px;
}

.vb-footer__logo {
	height: 46px;
	width: auto;
	display: block;
	filter: brightness(1) contrast(1.05);
}

.vb-footer__wordmark {
	color: #ffffff;
	font-family: 'Raleway', var(--vb-font-heading);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.4px;
}

.vb-footer__tagline {
	color: rgba(255, 255, 255, 0.62);
	font-size: 14.5px;
	line-height: 1.7;
	max-width: 340px;
	margin: 0 0 24px;
}

/* Social row */
.vb-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.vb-footer__social a {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.10);
	color: rgba(255, 255, 255, 0.72);
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.vb-footer__social a:hover {
	background: rgba(23, 163, 182, 0.16);
	border-color: rgba(23, 163, 182, 0.45);
	color: var(--vb-color-accent);
	transform: translateY(-2px);
}

.vb-footer__social a svg { width: 16px; height: 16px; }

/* Google Play app badge — sits in the 5th footer column, right of "Company" */
.vb-footer__app-cell .vb-footer__app { margin-top: 2px; }
.vb-footer__app {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 9px 18px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.04);
	color: #fff;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.vb-footer__app:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.5);
	transform: translateY(-2px);
	color: #fff;
}
.vb-footer__app-icon { display: inline-flex; flex: 0 0 auto; }
.vb-footer__app-text { display: flex; flex-direction: column; line-height: 1.15; }
.vb-footer__app-text small {
	font-size: 9.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}
.vb-footer__app-text strong {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.2px;
}

/* Sitemap columns */
.vb-footer__col-title {
	color: #ffffff;
	font-family: 'Raleway', var(--vb-font-heading);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.20em;
	text-transform: uppercase;
	margin-bottom: 22px;
}

.vb-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vb-footer__col a {
	color: rgba(255, 255, 255, 0.58);
	font-size: 14px;
	text-decoration: none;
	transition: color 0.2s ease, transform 0.2s ease;
	display: inline-block;
	line-height: 1.4;
}

.vb-footer__col a:hover {
	color: #ffffff;
	transform: translateX(3px);
}

.vb-footer__more {
	color: var(--vb-color-accent) !important;
	font-weight: 600;
	font-size: 13px !important;
	letter-spacing: 0.02em;
	margin-top: 6px;
}

.vb-footer__more:hover { color: #ffffff !important; }

/* ===== Bottom bar ===== */
.vb-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-top: 28px;
	flex-wrap: wrap;
}

.vb-footer__copy {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.48);
	letter-spacing: 0.01em;
}

.vb-footer__legal {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.vb-footer__legal a {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
	transition: color 0.2s ease;
}

.vb-footer__legal a:hover { color: #ffffff; }

.vb-footer__legal-dot {
	color: rgba(255, 255, 255, 0.25);
	font-size: 13px;
}

.vb-footer__totop {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.72);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.vb-footer__totop:hover {
	background: rgba(23, 163, 182, 0.15);
	border-color: rgba(23, 163, 182, 0.40);
	color: var(--vb-color-accent);
	transform: translateY(-2px);
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
	.vb-footer { padding: 70px 24px 28px; }
	.vb-footer__main {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 40px 32px;
	}
	.vb-footer__brand { grid-column: 1 / -1; padding-right: 0; }
}

@media (max-width: 640px) {
	.vb-footer { padding: 60px 20px 24px; }
	.vb-footer__main {
		grid-template-columns: 1fr 1fr;
		gap: 32px 24px;
		padding-bottom: 40px;
	}
	.vb-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.vb-footer__totop { align-self: flex-end; }
}

@media (max-width: 420px) {
	.vb-footer__main {
		grid-template-columns: 1fr;
		gap: 32px 0;
	}
}

/* ============================================================
 * Demo page — scroll-driven 3D showcase
 * ============================================================ */

/* ----- Intro (small hero above the sticky 3D section) ----- */
.demo-intro {
	position: relative;
	padding: 140px 32px 90px;
	background:
		radial-gradient(circle at 20% 20%, rgba(23, 163, 182, 0.18), transparent 55%),
		radial-gradient(circle at 80% 80%, rgba(129, 140, 248, 0.14), transparent 55%),
		linear-gradient(180deg, #050b14 0%, #0a1628 100%);
	color: #fff;
	overflow: hidden;
	text-align: center;
}

.demo-intro__inner {
	max-width: 780px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.demo-intro__eyebrow { color: var(--vb-color-accent); justify-content: center; display: inline-flex; margin-bottom: 22px; }
.demo-intro__eyebrow .wwp-eyebrow__line { background: var(--vb-color-accent); }

.demo-intro__title {
	font-size: 76px;
	font-weight: 800;
	letter-spacing: -2px;
	line-height: 1;
	color: #ffffff;
	margin: 0 0 22px;
}

.demo-intro__title em {
	font-style: normal;
	background: linear-gradient(90deg, var(--vb-color-primary), var(--vb-color-mute));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.demo-intro__sub {
	font-size: 17px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.68);
	margin: 0 auto 40px;
	max-width: 620px;
}

.demo-intro__cue {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	color: #ffffff;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.demo-intro__cue:hover {
	background: rgba(23, 163, 182, 0.15);
	border-color: rgba(23, 163, 182, 0.4);
	transform: translateY(-2px);
	color: #fff;
}

.demo-intro__cue svg { animation: adv-bounce 2s ease-in-out infinite; }

@media (max-width: 700px) {
	.demo-intro { padding: 100px 20px 70px; }
	.demo-intro__title { font-size: 44px; letter-spacing: -1.2px; }
	.demo-intro__sub { font-size: 15.5px; }
}

/* ----- 3D scroll section ----- */
.demo-3d {
	position: relative;
	background:
		radial-gradient(circle at 50% 0%, rgba(23, 163, 182, 0.12), transparent 50%),
		radial-gradient(circle at 20% 80%, rgba(129, 140, 248, 0.10), transparent 55%),
		linear-gradient(180deg, #0a1628 0%, #050b14 100%);
	color: #ffffff;
	height: auto;
}

.demo-3d__sticky {
	position: relative;
	height: 100vh;
	overflow: hidden;
}

.demo-3d__stage {
	position: relative;
	height: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 60px 40px;
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 40px;
	align-items: center;
}

/* Canvas wrap */
.demo-3d__canvas-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	max-height: 720px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.demo-3d__canvas {
	width: 100%;
	height: 100%;
	display: block;
	touch-action: none;
}

.demo-3d__hint {
	position: absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
	font-weight: 700;
	pointer-events: none;
	animation: demo-hint 2.4s ease-in-out infinite;
}

@keyframes demo-hint {
	0%, 100% { opacity: 0.4; transform: translate(-50%, 0); }
	50%      { opacity: 0.9; transform: translate(-50%, 6px); }
}

/* Side content */
.demo-3d__side {
	display: flex;
	flex-direction: column;
	max-height: 100%;
	padding: 20px 0;
}

.demo-3d__side-head { margin-bottom: 36px; }

.demo-3d__eyebrow { color: var(--vb-color-accent); }
.demo-3d__eyebrow .wwp-eyebrow__line { background: var(--vb-color-accent); }

.demo-3d__title {
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -1.2px;
	line-height: 1.08;
	color: #ffffff;
	margin: 12px 0 0;
}

.demo-3d__title em {
	font-style: normal;
	background: linear-gradient(90deg, var(--vb-color-primary), var(--vb-color-mute));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Callouts — stack of cards, only the active one is prominent */
.demo-3d__callouts {
	position: relative;
	flex-grow: 1;
	min-height: 320px;
}

.demo-3d__callout {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background:
		linear-gradient(160deg, rgba(23, 163, 182, 0.10), transparent 55%),
		linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 22px;
	padding: 40px 38px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px);
	transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
}

/* Big faint watermark number for depth */
.demo-3d__callout::before {
	content: attr(data-num);
	position: absolute;
	top: -18px;
	right: 10px;
	font-family: var(--vb-font-heading);
	font-size: 150px;
	font-weight: 800;
	line-height: 1;
	color: rgba(255, 255, 255, 0.05);
	pointer-events: none;
}

.demo-3d__callout.is-active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	border-color: rgba(23, 163, 182, 0.4);
	box-shadow: 0 30px 60px -30px rgba(23, 163, 182, 0.45);
}

.demo-3d__callout-num {
	position: relative;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	font-family: var(--vb-font-heading);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.16em;
	color: var(--vb-color-accent);
	padding: 6px 13px;
	border-radius: 999px;
	background: rgba(23, 163, 182, 0.14);
	border: 1px solid rgba(23, 163, 182, 0.34);
}

.demo-3d__callout-title {
	position: relative;
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -0.6px;
	line-height: 1.15;
	color: #ffffff;
	margin: 0;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.demo-3d__callout-desc {
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
}

.demo-3d__callout-stats {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.demo-3d__callout-stats li {
	padding: 8px 15px;
	background: rgba(23, 163, 182, 0.14);
	border: 1px solid rgba(23, 163, 182, 0.32);
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--vb-color-accent);
	letter-spacing: 0.03em;
}

.demo-3d__progress {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 28px;
}

/* Slider nav row (arrows + progress) */
.demo-3d__nav {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 28px;
}
.demo-3d__nav .demo-3d__progress { flex: 1; margin-top: 0; }
.demo-3d__arrow {
	flex: 0 0 auto;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.8);
	background: rgba(6, 16, 30, 0.55);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
	transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.demo-3d__arrow:hover {
	background: var(--vb-color-accent);
	border-color: var(--vb-color-accent);
	box-shadow: 0 8px 24px rgba(23, 163, 182, 0.5);
}
.demo-3d__arrow:active { transform: scale(0.92); }
.demo-3d__arrow svg { width: 28px; height: 28px; min-width: 28px; flex: 0 0 auto; display: block; stroke: #fff; fill: none; }

.demo-3d__progress-nums {
	font-family: var(--vb-font-heading);
	font-size: 15px;
	color: rgba(255, 255, 255, 0.55);
	font-weight: 700;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.demo-3d__progress-current { color: #ffffff; font-size: 20px; }
.demo-3d__progress-sep { margin: 0 6px; color: rgba(255, 255, 255, 0.25); }

.demo-3d__progress-bar {
	flex: 1;
	height: 3px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 99px;
	overflow: hidden;
}

.demo-3d__progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--vb-color-primary), var(--vb-color-mute));
	border-radius: 99px;
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform 0.15s linear;
}

@media (max-width: 1024px) {
	.demo-3d { height: auto; }
	.demo-3d__stage {
		grid-template-columns: 1fr;
		grid-template-rows: 0.95fr 1.05fr;
		padding: 32px 24px;
		gap: 16px;
	}
	.demo-3d__side { padding: 0; min-height: 0; }
	.demo-3d__side-head { margin-bottom: 18px; }
	.demo-3d__title { font-size: 30px; }
	.demo-3d__callout { padding: 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
	.demo-3d__callout-title { font-size: 22px; }
	.demo-3d__callouts { min-height: 0; }
	.demo-3d__progress { margin-top: 16px; }
}

@media (max-width: 640px) {
	.demo-3d__stage { padding: 20px 16px 16px; gap: 10px; }
	.demo-3d__title { font-size: 23px; }
	.demo-3d__side-head { margin-bottom: 12px; }
	.demo-3d__callout { padding: 22px; border-radius: 16px; gap: 16px; }
	.demo-3d__callout::before { font-size: 96px; top: -10px; }
	.demo-3d__callout-title { font-size: 21px; padding-bottom: 16px; }
	.demo-3d__callout-stats li { font-size: 11.5px; padding: 6px 12px; }
	.demo-3d__canvas-wrap { max-height: none; }
}

/* Phones: keep the desktop-style slider (one callout at a time + prev/next
 * arrows), just stacked vertically — machine on top, then the title, the active
 * callout, and the controls below. No scroll-hijack; advance via arrows/auto. */
@media (max-width: 768px) {
	.demo-3d { height: auto; }
	.demo-3d__sticky {
		position: static;
		height: auto;
		overflow: hidden;
	}
	.demo-3d__stage {
		display: block;
		height: auto;
		max-width: 620px;
		padding: 44px 20px 56px;
	}
	.demo-3d__canvas-wrap {
		height: 320px;
		max-height: none;
		margin-bottom: 24px;
	}
	.demo-3d__hint { display: none; }
	.demo-3d__side { display: block; padding: 0; }
	.demo-3d__side-head { margin-bottom: 22px; }
	.demo-3d__title { font-size: 26px; }

	/* Single-callout slider (absolute layers, only the active one shown) */
	.demo-3d__callouts {
		position: relative;
		min-height: 300px;
	}
	.demo-3d__callout { padding: 24px; }
	.demo-3d__nav { display: flex; margin-top: 20px; gap: 14px; }
	.demo-3d__arrow {
		width: 40px;
		height: 40px;
		min-width: 0;
		padding: 0;
		box-sizing: border-box;
		aspect-ratio: 1 / 1;
		border-width: 1px;
		border-color: rgba(255, 255, 255, 0.45);
		background: rgba(255, 255, 255, 0.06);
		box-shadow: none;
	}
	.demo-3d__arrow svg { width: 17px; height: 17px; min-width: 17px; }
}

/* ----- Bottom CTA ----- */
.demo-cta {
	padding: 90px 32px 110px;
	background: #ffffff;
	text-align: center;
}

.demo-cta__inner { max-width: 640px; margin: 0 auto; }

.demo-cta__title {
	font-size: 36px;
	font-weight: 800;
	letter-spacing: -0.8px;
	color: var(--vb-color-ink);
	line-height: 1.15;
	margin: 0 0 14px;
}

.demo-cta__sub {
	font-size: 16px;
	line-height: 1.65;
	color: var(--vb-color-muted);
	margin: 0 0 30px;
}

.demo-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.demo-cta .wwp-btn--ghost {
	color: var(--vb-color-ink);
	background: #ffffff;
	border: 1px solid #e5e9ef;
}

.demo-cta .wwp-btn--ghost:hover {
	background: #fafbff;
	border-color: #c7d2fe;
	color: var(--vb-color-ink);
	transform: translateY(-2px);
}

@media (max-width: 640px) {
	.demo-cta { padding: 70px 20px 80px; }
	.demo-cta__title { font-size: 26px; }
}

/* ============================================================
 * Our Story — network map section
 * ============================================================ */
.os-network {
	position: relative;
	padding: 110px 32px;
	background:
		radial-gradient(circle at 20% 20%, rgba(23, 163, 182, 0.16), transparent 55%),
		radial-gradient(circle at 80% 80%, rgba(129, 140, 248, 0.14), transparent 55%),
		linear-gradient(180deg, #0a1628 0%, #050b14 100%);
	color: #ffffff;
	overflow: hidden;
}

.os-network__glow {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 50% 50%, rgba(23, 163, 182, 0.06), transparent 60%);
	pointer-events: none;
}

.os-network__inner {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin: 0 auto;
}

.os-network__head {
	max-width: 720px;
	margin: 0 auto 56px;
	text-align: center;
}

.os-network__eyebrow { color: var(--vb-color-accent); justify-content: center; display: inline-flex; }
.os-network__eyebrow .wwp-eyebrow__line { background: var(--vb-color-accent); }

.os-network__title {
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -1.3px;
	line-height: 1.08;
	color: #ffffff;
	margin: 14px 0 16px;
}

.os-network__title em {
	font-style: normal;
	background: linear-gradient(90deg, var(--vb-color-primary), var(--vb-color-mute));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.os-network__sub {
	font-size: 16px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.65);
	margin: 0;
}

/* Body: map on left, stats + ticker on right */
.os-network__body {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 60px;
	align-items: center;
}

/* ===== Map ===== */
.os-network__map-wrap {
	position: relative;
	aspect-ratio: 4 / 5;
	max-width: 520px;
	margin: 0 auto;
}

.os-network__map {
	width: 100%;
	height: 100%;
	display: block;
}

/* Connecting lines — draw effect via strokeDasharray + dashoffset */
.os-network__link {
	stroke: rgba(23, 163, 182, 0.42);
	stroke-width: 0.6;
	stroke-dasharray: 200;
	stroke-dashoffset: 200;
	opacity: 0;
}

.os-network.is-active .os-network__link {
	animation: osLinkDraw 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes osLinkDraw {
	0%   { opacity: 0; stroke-dashoffset: 200; }
	20%  { opacity: 1; }
	100% { opacity: 1; stroke-dashoffset: 0; }
}

/* Dots — scale in on activation */
.os-network__dot {
	opacity: 0;
	transform: scale(0.2);
	transform-box: fill-box;
	transform-origin: center;
}

.os-network.is-active .os-network__dot {
	animation: osDotIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes osDotIn {
	0%   { opacity: 0; transform: scale(0.2); }
	100% { opacity: 1; transform: scale(1); }
}

/* Pulse ring on each dot */
.os-network__pulse {
	transform-origin: center;
	opacity: 0;
}

.os-network.is-active .os-network__pulse {
	animation: osPulse 2.4s ease-out infinite;
}

.os-network__dot--hub .os-network__pulse {
	animation-duration: 1.8s !important;
}

@keyframes osPulse {
	0%   { transform: scale(0.4); opacity: 0.8; }
	80%  { transform: scale(1.6); opacity: 0; }
	100% { transform: scale(1.6); opacity: 0; }
}

/* Ring — subtle steady stroke on hubs */
.os-network__ring {
	transform-origin: center;
	opacity: 0.55;
}

.os-network__dot--hub .os-network__ring {
	animation: osRingSpin 8s linear infinite;
	stroke-dasharray: 6 4;
}

@keyframes osRingSpin { to { transform: rotate(360deg); } }

/* Map legend */
.os-network__legend {
	position: absolute;
	bottom: 12px;
	left: 12px;
	display: flex;
	gap: 16px;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	font-weight: 700;
}

.os-network__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.os-network__legend-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--vb-color-primary);
	box-shadow: 0 0 0 3px rgba(23, 163, 182, 0.16);
}

.os-network__legend-dot--hub {
	background: var(--vb-color-accent);
	width: 10px;
	height: 10px;
	box-shadow: 0 0 0 4px rgba(5, 190, 215, 0.18);
}

/* ===== Right column: stats + ticker ===== */
.os-network__side {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.os-network__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.03);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	overflow: hidden;
}

.os-network__stat {
	padding: 24px 20px;
	text-align: center;
	border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.os-network__stat:last-child { border-right: 0; }

.os-network__stat-num {
	font-family: var(--vb-font-heading);
	font-size: 34px;
	font-weight: 800;
	color: #ffffff;
	line-height: 1;
	letter-spacing: -0.8px;
	margin-bottom: 8px;
}

.os-network__stat-num .suf { color: var(--vb-color-accent); font-size: 0.65em; }

.os-network__stat-label {
	font-size: 11.5px;
	color: rgba(255, 255, 255, 0.55);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 700;
}

/* Live ticker */
.os-network__ticker {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	padding: 24px 26px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.os-network__ticker-head {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	font-weight: 700;
	margin-bottom: 20px;
}

.os-network__ticker-dot {
	width: 8px;
	height: 8px;
	background: #22c55e;
	border-radius: 50%;
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.24);
	animation: osLivePulse 1.6s ease-in-out infinite;
}

@keyframes osLivePulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.24); }
	50%      { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
}

.os-network__ticker-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 130px;
}

.os-network__ticker-item {
	display: flex;
	gap: 14px;
	font-size: 13.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.72);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.os-network__ticker-item.is-entering {
	animation: osTickIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.os-network__ticker-item.is-leaving {
	opacity: 0;
	transform: translateY(6px);
}

@keyframes osTickIn {
	0%   { opacity: 0; transform: translateY(-10px); }
	100% { opacity: 1; transform: translateY(0); }
}

.os-network__ticker-when {
	flex-shrink: 0;
	width: 58px;
	color: var(--vb-color-accent);
	font-family: 'Roboto', var(--vb-font-heading);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding-top: 2px;
}

.os-network__ticker-body { flex: 1; min-width: 0; }

.os-network__ticker-sku {
	color: #ffffff;
	font-weight: 700;
}

.os-network__ticker-city {
	color: rgba(255, 255, 255, 0.55);
	font-weight: 500;
}

/* Responsive */
@media (max-width: 1024px) {
	.os-network { padding: 80px 24px; }
	.os-network__title { font-size: 34px; }
	.os-network__body {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.os-network__map-wrap { max-width: 440px; }
}

@media (max-width: 600px) {
	.os-network { padding: 64px 20px; }
	.os-network__title { font-size: 26px; letter-spacing: -0.8px; }
	.os-network__stats { grid-template-columns: 1fr; }
	.os-network__stat { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
	.os-network__stat:last-child { border-bottom: 0; }
	.os-network__stat-num { font-size: 28px; }
	.os-network__ticker { padding: 20px; }
	.os-network__ticker-when { width: 52px; }
	.os-network__ticker-item { font-size: 13px; }
	.os-network__legend { position: static; margin-top: 10px; justify-content: center; }
}