/* ==========================================================================
   Home — Business vs Agency. Built on the supplied 1981px-wide mockup;
   sizes are mockup pixels (u) scaled to the container width.
   ========================================================================== */

@property --hvb-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.hvb {
	--hvb-accent: #00def5;
	--hvb-btn: #02ddff;
	--hvb-bg: #01090d;
	--u: min(calc(100cqi / 1981), 1px);
	position: relative;
	overflow: hidden;
	container-type: inline-size;
	background: radial-gradient(60% 55% at 50% 60%, rgba(0, 120, 150, .10), transparent 70%), var(--hvb-bg);
	color: #fff;
	font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
}
.hvb *, .hvb *::before, .hvb *::after { box-sizing: border-box; }
.hvb h2, .hvb h3, .hvb p, .hvb ul { margin: 0; padding: 0; }
.hvb ul { list-style: none; }
.hvb img { border: 0; box-shadow: none; max-width: none; }

.hvb .hvb__in { position: relative; width: calc(1981 * var(--u)); margin: 0 auto; padding: calc(28 * var(--u)) calc(61 * var(--u)) calc(30 * var(--u)); }

/* ---------------------------------------------------------------- heading */
.hvb .hvb__head { text-align: center; }
.hvb .hvb__kicker { font-size: calc(13 * var(--u)); font-weight: 600; line-height: 1; letter-spacing: .36em; text-transform: uppercase; color: #e3ecef; }
.hvb .hvb__h2 { margin-top: calc(22 * var(--u)); font-size: calc(50 * var(--u)); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; color: #fff; }
.hvb .hvb__h2 span { color: var(--hvb-accent); }
.hvb .hvb__sub { margin-top: calc(14 * var(--u)); font-size: calc(17.5 * var(--u)); line-height: calc(26 * var(--u)); color: #cfd8dc; }

/* ---------------------------------------------------------------- grid + cards */
.hvb .hvb__grid { display: grid; grid-template-columns: calc(886 * var(--u)) 1fr calc(886 * var(--u)); margin-top: calc(31 * var(--u)); }

.hvb .hvb__card {
	position: relative; isolation: isolate;
	height: calc(556 * var(--u));
	padding: calc(51 * var(--u)) 0 calc(37 * var(--u)) calc(42 * var(--u));
	border: 1px solid rgba(70, 215, 245, .55);
	border-radius: calc(22 * var(--u));
	background:
		radial-gradient(calc(420 * var(--u)) calc(300 * var(--u)) at 72% 45%, rgba(0, 150, 190, .16), transparent 70%),
		linear-gradient(160deg, rgba(4, 30, 40, .92), rgba(1, 12, 17, .96) 55%);
	box-shadow: 0 0 calc(40 * var(--u)) rgba(0, 190, 230, .12), inset 0 0 calc(30 * var(--u)) rgba(0, 190, 230, .06), inset 0 1px 0 rgba(170, 245, 255, .08);
}
.hvb .hvb__card--r { padding-left: calc(46 * var(--u)); }

/* orbiting light on the card border */
.hvb .hvb__ring {
	position: absolute; inset: -1px; z-index: 3; pointer-events: none;
	border-radius: inherit; padding: calc(2 * var(--u) + 1px);
	background: conic-gradient(from var(--hvb-a), transparent 0deg 240deg, rgba(0, 222, 245, .15) 270deg, #8ff6ff 312deg, rgba(0, 222, 245, .2) 330deg, transparent 345deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	filter: drop-shadow(0 0 calc(6 * var(--u)) rgba(0, 222, 245, .9));
	opacity: .85;
}

.hvb .hvb__art {
	position: absolute; z-index: 0; pointer-events: none;
	top: calc((7 + 271 * (1 - var(--hvb-biz-s, 1)) + var(--hvb-biz-y, 0)) * var(--u));
	left: calc((350 + 264 * (1 - var(--hvb-biz-s, 1)) + var(--hvb-biz-x, 0)) * var(--u));
	width: calc(529 * var(--hvb-biz-s, 1) * var(--u));
	height: auto;
}
.hvb .hvb__card--r .hvb__art {
	top: calc((7 + 271 * (1 - var(--hvb-agy-s, 1)) + var(--hvb-agy-y, 0)) * var(--u));
	left: calc((392 + 243 * (1 - var(--hvb-agy-s, 1)) + var(--hvb-agy-x, 0)) * var(--u));
	width: calc(487 * var(--hvb-agy-s, 1) * var(--u));
}

.hvb .hvb__copy { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; }
.hvb .hvb__eyebrow { font-size: calc(14 * var(--u)); font-weight: 700; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: #35d3e6; }
.hvb .hvb__h3 { margin-top: calc(10 * var(--u)); font-size: calc(31 * var(--u)); font-weight: 700; line-height: calc(37 * var(--u)); letter-spacing: -.025em; color: #fff; }
.hvb .hvb__text { margin-top: calc(9 * var(--u)); font-size: calc(16.4 * var(--u)); line-height: calc(23 * var(--u)); color: #c9d3d8; }
.hvb .hvb__list { margin-top: calc(8.5 * var(--u)); }
.hvb .hvb__list li { display: flex; align-items: center; gap: calc(24 * var(--u)); height: calc(34 * var(--u)); padding-left: calc(4 * var(--u)); font-size: calc(18 * var(--u)); color: #eef3f5; }
.hvb .hvb__card--r .hvb__list { margin-top: calc(15.5 * var(--u)); }
.hvb .hvb__card--r .hvb__list li { height: calc(38 * var(--u)); padding-left: calc(6 * var(--u)); gap: calc(25 * var(--u)); }
.hvb .hvb__i { width: calc(23 * var(--u)); height: calc(23 * var(--u)); flex: none; fill: none; stroke: var(--hvb-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 calc(5 * var(--u)) rgba(0, 222, 245, .5)); }
.hvb .hvb__i--f { fill: var(--hvb-accent); stroke: none; }

.hvb .hvb__btn {
	display: inline-flex; align-items: center; gap: calc(26 * var(--u)); align-self: flex-start;
	height: calc(58 * var(--u)); margin-top: auto; padding: 0 calc(46 * var(--u));
	border-radius: calc(13 * var(--u));
	background: var(--hvb-btn); color: #03181e;
	font-size: calc(16.4 * var(--u)); font-weight: 700; text-decoration: none; white-space: nowrap;
	box-shadow: 0 0 calc(26 * var(--u)) rgba(2, 221, 255, .38);
	transition: transform .25s ease, box-shadow .25s ease;
}
.hvb .hvb__btn:hover { color: #03181e; transform: translateY(-2px); box-shadow: 0 0 calc(40 * var(--u)) rgba(2, 221, 255, .65); }
.hvb .hvb__btn svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.hvb .hvb__btn:hover svg { transform: translateX(4px); }

/* ---------------------------------------------------------------- the chain */
.hvb .hvb__chain { position: relative; z-index: 4; }
.hvb .hvb__beam {
	position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px;
	background: linear-gradient(180deg, transparent 0, rgba(0, 222, 245, .35) 12%, #6ff3ff 42%, #6ff3ff 42%, transparent 42.2%, transparent 42.6%, #6ff3ff 42.6%, rgba(0, 222, 245, .35) 88%, transparent 100%);
	box-shadow: 0 0 calc(10 * var(--u)) rgba(0, 222, 245, .75);
	transform-origin: 50% 42%;
}
.hvb .hvb__pulse { position: absolute; left: 50%; width: calc(6 * var(--u)); height: calc(70 * var(--u)); margin-left: calc(-3 * var(--u)); border-radius: 99px; background: linear-gradient(180deg, transparent, #d8fdff, transparent); filter: blur(1px) drop-shadow(0 0 calc(8 * var(--u)) #2ee4ff); opacity: 0; }
.hvb .hvb__arcs { position: absolute; left: 50%; top: calc(174 * var(--u)); width: calc(150 * var(--u)); height: calc(180 * var(--u)); margin-left: calc(-75 * var(--u)); overflow: visible; }
.hvb .hvb__arcs path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hvb .hvb__arc path { stroke: rgba(80, 230, 255, .55); stroke-width: 1.4; filter: drop-shadow(0 0 3px rgba(0, 222, 245, .9)); }
.hvb .hvb__flow path { stroke: #e6feff; stroke-width: 2; stroke-dasharray: .06 .94; opacity: 0; filter: drop-shadow(0 0 4px #2ee4ff); }
.hvb .hvb__node {
	position: absolute; left: 50%; top: calc(234 * var(--u)); width: calc(62 * var(--u)); height: calc(62 * var(--u)); margin: calc(-31 * var(--u)) 0 0 calc(-31 * var(--u));
	display: grid; place-items: center; border-radius: 50%;
	border: 2px solid #3fe9ff;
	background: radial-gradient(circle, rgba(0, 70, 90, .95), rgba(1, 16, 22, .98) 70%);
	box-shadow: 0 0 calc(22 * var(--u)) rgba(0, 222, 245, .75), 0 0 calc(60 * var(--u)) rgba(0, 222, 245, .35), inset 0 0 calc(14 * var(--u)) rgba(0, 222, 245, .45);
}
.hvb .hvb__link { width: 56%; height: 56%; overflow: visible; fill: none; stroke: #5ff0ff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(0, 222, 245, .9)); }
.hvb .hvb__burst { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #9ff8ff; opacity: 0; pointer-events: none; }

/* ==========================================================================
   Power-up sequence (runs when the section scrolls into view)
   ========================================================================== */
@keyframes hvb-orbit { to { --hvb-a: 360deg; } }
@keyframes hvb-breathe { 0%, 100% { box-shadow: 0 0 calc(22 * var(--u)) rgba(0, 222, 245, .7), 0 0 calc(60 * var(--u)) rgba(0, 222, 245, .3), inset 0 0 calc(14 * var(--u)) rgba(0, 222, 245, .4); } 50% { box-shadow: 0 0 calc(34 * var(--u)) rgba(0, 222, 245, 1), 0 0 calc(110 * var(--u)) rgba(0, 222, 245, .55), inset 0 0 calc(20 * var(--u)) rgba(0, 222, 245, .7); } }
@keyframes hvb-burst { 0% { opacity: .95; transform: scale(1); border-width: 3px; } 100% { opacity: 0; transform: scale(3.4); border-width: 1px; } }
@keyframes hvb-flash { 0% { box-shadow: 0 0 0 rgba(0, 222, 245, 0), inset 0 0 0 rgba(0, 222, 245, 0); border-color: rgba(70, 210, 240, .15); } 35% { box-shadow: 0 0 calc(90 * var(--u)) rgba(0, 222, 245, .55), inset 0 0 calc(60 * var(--u)) rgba(0, 222, 245, .25); border-color: #8ff6ff; } 100% { box-shadow: 0 0 calc(40 * var(--u)) rgba(0, 190, 230, .12), inset 0 0 calc(30 * var(--u)) rgba(0, 190, 230, .06); border-color: rgba(70, 215, 245, .55); } }
@keyframes hvb-down { 0% { top: 42%; opacity: 0; } 15% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes hvb-up { 0% { top: 38%; opacity: 0; } 15% { opacity: 1; } 100% { top: -10%; opacity: 0; } }
@keyframes hvb-flow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hvb-btn { 0%, 100% { box-shadow: 0 0 calc(26 * var(--u)) rgba(2, 221, 255, .38); } 50% { box-shadow: 0 0 calc(44 * var(--u)) rgba(2, 221, 255, .7); } }
@keyframes hvb-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(-8 * var(--u)); } }

/* idle loops (also shown without JS) */
.hvb--motion .hvb__ring { animation: hvb-orbit 7s linear infinite; }
.hvb--motion .hvb__card--r .hvb__ring { animation-delay: -3.5s; }
.hvb--motion .hvb__node { animation: hvb-breathe 2.6s ease-in-out infinite; }
.hvb--motion .hvb__pulse--down { animation: hvb-down 2.4s cubic-bezier(.4, 0, .6, 1) infinite 2.2s; }
.hvb--motion .hvb__pulse--up { animation: hvb-up 2.4s cubic-bezier(.4, 0, .6, 1) infinite 3.4s; }
.hvb--motion .hvb__flow path { opacity: 1; animation: hvb-flow 1.8s linear infinite; }
.hvb--motion .hvb__flow path:nth-child(3n+2) { animation-duration: 2.3s; animation-delay: -.7s; }
.hvb--motion .hvb__flow path:nth-child(3n) { animation-duration: 2.9s; animation-delay: -1.4s; }
.hvb--motion .hvb__art { animation: hvb-float 7s ease-in-out infinite; }
.hvb--motion .hvb__card--r .hvb__art { animation-delay: -3.5s; }
.hvb--motion .hvb__btn { animation: hvb-btn 3s ease-in-out infinite; }

/* initial (powered-down) state — only once the script has taken over */
.hvb--motion.hvb--js .hvb__head > * { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.hvb--motion.hvb--js .hvb__head > :nth-child(2) { transition-delay: .12s; }
.hvb--motion.hvb--js .hvb__head > :nth-child(3) { transition-delay: .24s; }
.hvb--motion.hvb--js .hvb__beam { transform: scaleY(0); opacity: .2; transition: transform 1s cubic-bezier(.7, 0, .2, 1) .35s, opacity .4s ease .35s; }
.hvb--motion.hvb--js .hvb__node { opacity: 0; transform: scale(.3); transition: opacity .35s ease .95s, transform .7s cubic-bezier(.3, 1.8, .5, 1) .95s; }
.hvb--motion.hvb--js .hvb__link-a { transform: translate(3.5px, -3.5px); transition: transform .45s cubic-bezier(.6, 0, .3, 1.6) 1.25s; }
.hvb--motion.hvb--js .hvb__link-b { transform: translate(-3.5px, 3.5px); transition: transform .45s cubic-bezier(.6, 0, .3, 1.6) 1.25s; }
.hvb--motion.hvb--js .hvb__arc path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(.6, 0, .2, 1) 1.55s; }
.hvb--motion.hvb--js .hvb__flow { opacity: 0; transition: opacity .6s ease 2.4s; }
.hvb--motion.hvb--js .hvb__card { opacity: .35; filter: saturate(.2) brightness(.55); transition: opacity .8s ease 1.9s, filter .8s ease 1.9s; }
.hvb--motion.hvb--js .hvb__ring { opacity: 0; transition: opacity .8s ease 2.2s; }
.hvb--motion.hvb--js .hvb__art { opacity: 0; transform: translate3d(0, 40px, 0) scale(.95); transition: opacity 1s ease 2s, transform 1.2s cubic-bezier(.2, .7, .2, 1) 2s; }
.hvb--motion.hvb--js .hvb__eyebrow, .hvb--motion.hvb--js .hvb__h3, .hvb--motion.hvb--js .hvb__text { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.hvb--motion.hvb--js .hvb__eyebrow { transition-delay: 2s; }
.hvb--motion.hvb--js .hvb__h3 { transition-delay: 2.1s; }
.hvb--motion.hvb--js .hvb__text { transition-delay: 2.2s; }
.hvb--motion.hvb--js .hvb__list li { opacity: 0; transform: translate3d(calc(-16 * var(--u)), 0, 0); transition: opacity .5s ease calc(2.35s + var(--i) * .09s), transform .5s cubic-bezier(.2, .7, .2, 1) calc(2.35s + var(--i) * .09s); }
.hvb--motion.hvb--js .hvb__btn { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .6s ease 2.9s, transform .6s ease 2.9s, box-shadow .25s ease; }

/* powered up */
.hvb--motion.hvb--js.is-on .hvb__head > * { opacity: 1; transform: none; }
.hvb--motion.hvb--js.is-on .hvb__beam { transform: scaleY(1); opacity: 1; }
.hvb--motion.hvb--js.is-on .hvb__node { opacity: 1; transform: scale(1); }
.hvb--motion.hvb--js.is-on .hvb__link-a, .hvb--motion.hvb--js.is-on .hvb__link-b { transform: none; }
.hvb--motion.hvb--js.is-on .hvb__burst { animation: hvb-burst 1s cubic-bezier(.2, .7, .3, 1) 1.65s both; }
.hvb--motion.hvb--js.is-on .hvb__arc path { stroke-dashoffset: 0; }
.hvb--motion.hvb--js.is-on .hvb__flow { opacity: 1; }
.hvb--motion.hvb--js.is-on .hvb__card { opacity: 1; filter: none; animation: hvb-flash 1.4s ease-out 1.9s both; }
.hvb--motion.hvb--js.is-on .hvb__ring { opacity: .85; }
.hvb--motion.hvb--js.is-on .hvb__art { opacity: 1; transform: none; }
.hvb--motion.hvb--js.is-on .hvb__eyebrow, .hvb--motion.hvb--js.is-on .hvb__h3, .hvb--motion.hvb--js.is-on .hvb__text, .hvb--motion.hvb--js.is-on .hvb__list li { opacity: 1; transform: none; }
.hvb--motion.hvb--js.is-on .hvb__btn { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.hvb--motion *, .hvb--motion *::before { animation: none !important; transition: none !important; }
	.hvb--motion.hvb--js * { opacity: 1 !important; transform: none !important; filter: none; }
	.hvb--motion .hvb__arc path { stroke-dashoffset: 0 !important; }
	.hvb--motion .hvb__pulse { display: none; }
}

/* ==========================================================================
   Tablets and phones: cards stack, the chain joins them vertically.
   ========================================================================== */
@container (max-width: 900px) {
	.hvb > * { --u: 1px; }
	.hvb .hvb__in { width: auto; padding: 48px 16px 40px; }
	.hvb .hvb__kicker { font-size: 12px; letter-spacing: .3em; }
	.hvb .hvb__h2 { margin-top: 16px; font-size: clamp(28px, 7.4cqi, 42px); }
	.hvb .hvb__sub { font-size: 15.5px; line-height: 1.6; }
	.hvb .hvb__sub br, .hvb .hvb__text br, .hvb .hvb__h3 br { display: none; }
	.hvb .hvb__grid { grid-template-columns: 1fr; margin-top: 28px; }
	.hvb .hvb__card, .hvb .hvb__card--r { height: auto; padding: 30px 22px 28px; border-radius: 20px; }
	.hvb .hvb__copy { height: auto; }
	.hvb .hvb__art, .hvb .hvb__card--r .hvb__art { position: relative; left: auto; top: auto; display: block; width: calc((100% + 22px) * var(--hvb-biz-s, 1)); margin: 22px -11px 0; translate: calc(var(--hvb-biz-x, 0) * 1px) calc(var(--hvb-biz-y, 0) * 1px); }
	.hvb .hvb__card--r .hvb__art { width: calc((100% + 22px) * var(--hvb-agy-s, 1)); translate: calc(var(--hvb-agy-x, 0) * 1px) calc(var(--hvb-agy-y, 0) * 1px); }
	.hvb .hvb__card { display: flex; flex-direction: column-reverse; }
	.hvb .hvb__eyebrow { font-size: 12.5px; }
	.hvb .hvb__h3 { margin-top: 12px; font-size: clamp(24px, 6.6cqi, 32px); line-height: 1.2; }
	.hvb .hvb__text { margin-top: 12px; font-size: 15.5px; line-height: 1.6; }
	.hvb .hvb__list, .hvb .hvb__card--r .hvb__list { margin-top: 18px; }
	.hvb .hvb__list li, .hvb .hvb__card--r .hvb__list li { height: 40px; gap: 16px; padding-left: 2px; font-size: 16px; }
	.hvb .hvb__i { width: 22px; height: 22px; }
	.hvb .hvb__btn { margin-top: 22px; height: 54px; padding: 0 26px; gap: 14px; font-size: 15.5px; border-radius: 12px; align-self: stretch; justify-content: center; }
	.hvb .hvb__btn svg { width: 18px; height: 18px; }
	.hvb .hvb__chain { height: 96px; }
	.hvb .hvb__arcs { display: none; }
	.hvb .hvb__node { top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; }
	.hvb .hvb__beam { transform-origin: 50% 50%; background: linear-gradient(180deg, rgba(0, 222, 245, .3), #6ff3ff 35%, #6ff3ff 65%, rgba(0, 222, 245, .3)); }
	.hvb .hvb__pulse { height: 40px; }
}