:root{
	--container-width: 1240px;
	--page-gutter: clamp(20px, 4vw, 48px);
	--header-height: 78px;
	--section-space-xl: clamp(112px, 10vw, 152px);
	--section-space-lg: clamp(88px, 8vw, 128px);
	--section-space-md: clamp(64px, 6vw, 96px);
	--card-padding: clamp(22px, 2.2vw, 32px);
	--paper: #f7f5ef;
	--paper-deep: #eeeadf;
	--surface: #fbfaf6;
	--surface-2: #f1ede5;
	--ink: #111a24;
	--ink-2: #243244;
	--muted: #536173;
	--line: #c6c2ba;
	--line-dark: #918a80;
	--border-soft: rgba(15,30,45,.10);
	--border-default: rgba(15,30,45,.17);
	--border-strong: rgba(15,30,45,.30);
	--blue: #0067a8;
	--blue-dark: #0a355a;
	--blue-soft: rgba(0,103,168,.085);
	--gold: #8b5f16;
	--green: #0f7a4c;
	--red: #b13c36;
	--shadow: 0 22px 46px rgba(42,50,60,.12);
	--shadow-soft: 0 16px 34px rgba(42,50,60,.10);
	--shadow-panel: 0 28px 68px rgba(22,31,43,.16);
	--motion-fast: 180ms;
	--motion-default: 260ms;
	--motion-reveal: 460ms;
	--ease-premium: cubic-bezier(.22, 1, .36, 1);
	--mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
	--sans: "Segoe UI Variable", "Segoe UI", Tahoma, sans-serif;
}

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

html{
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-height) + 18px);
	max-width: 100%;
	overflow-x: hidden;
}

body{
	margin: 0;
	padding-top: var(--header-height);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.58;
	background:
		linear-gradient(90deg, rgba(17,26,36,.010) 1px, transparent 1px),
		linear-gradient(rgba(17,26,36,.009) 1px, transparent 1px),
		linear-gradient(135deg, var(--paper), #f6f3eb 48%, var(--paper-deep));
	background-size: 56px 56px, 56px 56px, auto;
	max-width: 100%;
	overflow-x: hidden;
}

body::before{
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(circle at 78% 8%, rgba(0,103,168,.04), transparent 30rem),
		radial-gradient(circle at 8% 58%, rgba(168,118,38,.022), transparent 34rem);
	pointer-events: none;
}

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

a{
	color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible{
	outline: 2px solid rgba(0,103,168,.42);
	outline-offset: 3px;
}

.skip-link{
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 80;
	padding: 10px 14px;
	background: var(--ink);
	color: #fff;
	transform: translateY(-150%);
}

.skip-link:focus{
	transform: translateY(0);
}

.shell{
	width: min(var(--container-width), calc(100% - (var(--page-gutter) * 2)));
	margin: 0 auto;
	min-width: 0;
}

.site-header{
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 60;
	border-bottom: 1px solid var(--border-soft);
	background: rgba(247,245,239,.88);
	backdrop-filter: blur(14px);
	transition: background var(--motion-default) var(--ease-premium), border-color var(--motion-default) var(--ease-premium), box-shadow var(--motion-default) var(--ease-premium), backdrop-filter var(--motion-default) var(--ease-premium);
}

.site-header.is-scrolled{
	border-color: var(--border-default);
	background: rgba(247,245,239,.97);
	backdrop-filter: blur(18px);
	box-shadow: 0 12px 28px rgba(42,50,60,.09);
}

.site-header__inner{
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 28px;
	min-height: 78px;
	transition: min-height var(--motion-default) var(--ease-premium), padding var(--motion-default) var(--ease-premium), gap var(--motion-default) var(--ease-premium);
}

.site-header.is-scrolled .site-header__inner{
	gap: 22px;
	min-height: 62px;
}

.brand{
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.brand picture{
	display: flex;
	align-items: center;
}

.brand img{
	width: 156px;
	transition: width var(--motion-default) var(--ease-premium);
}

.site-header.is-scrolled .brand img{
	width: 132px;
}

.site-nav{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.site-nav a,
.language-switch a,
.language-switch span{
	padding: 8px 11px;
	border: 1px solid transparent;
	color: var(--ink-2);
	font-size: 14px;
	font-weight: 650;
	text-decoration: none;
	transition: padding var(--motion-default) var(--ease-premium), background var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

.site-header.is-scrolled .site-nav a,
.site-header.is-scrolled .language-switch a,
.site-header.is-scrolled .language-switch span{
	padding: 6px 9px;
}

.site-nav a:hover,
.language-switch .is-active{
	border-color: var(--line);
	background: rgba(251,250,246,.7);
}

.language-switch{
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--mono);
	font-size: 13px;
}

.language-switch span{
	color: var(--muted);
}

.nav-toggle{
	display: none;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 13px;
	border: 1px solid var(--line-dark);
	background: rgba(251,250,246,.76);
	color: var(--ink);
	font: inherit;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	cursor: pointer;
	transition: min-height var(--motion-default) var(--ease-premium), padding var(--motion-default) var(--ease-premium), background var(--motion-fast) ease, border-color var(--motion-fast) ease;
}

.site-header.is-scrolled .nav-toggle{
	min-height: 36px;
	padding-left: 11px;
	padding-right: 11px;
}

.nav-toggle::before{
	content: "";
	width: 17px;
	height: 11px;
	margin-right: 8px;
	border-top: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	box-shadow: 0 4.5px 0 currentColor;
}

.hero{
	position: relative;
	padding: clamp(72px, 8vw, 118px) 0 clamp(38px, 4vw, 58px);
	overflow: hidden;
}

.hero::before{
	content: "";
	position: absolute;
	left: 50%;
	top: 22px;
	width: min(100%, var(--container-width));
	height: calc(100% - 22px);
	transform: translateX(-50%);
	background:
		linear-gradient(90deg, rgba(0,103,168,.055) 1px, transparent 1px),
		linear-gradient(rgba(0,103,168,.04) 1px, transparent 1px);
	background-size: 80px 80px;
	mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
	opacity: .45;
	pointer-events: none;
}

.hero__grid{
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.04fr) minmax(410px, .96fr);
	gap: clamp(42px, 5vw, 68px);
	align-items: center;
}

.eyebrow{
	margin: 0 0 14px;
	color: var(--blue-dark);
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

h1,
h2,
h3,
p{
	margin-top: 0;
}

h1{
	max-width: 780px;
	margin-bottom: 24px;
	font-size: clamp(46px, 6.25vw, 82px);
	line-height: .985;
	letter-spacing: -.052em;
}

h2{
	margin-bottom: 16px;
	font-size: clamp(30px, 4vw, 52px);
	line-height: 1.055;
	letter-spacing: -.04em;
}

h3{
	margin-bottom: 10px;
	font-size: 21px;
	line-height: 1.18;
	letter-spacing: -.02em;
}

.hero__lead,
.section-head p,
.download-card p,
.support-grid > div > p{
	max-width: 700px;
	color: var(--muted);
	font-size: 18px;
	line-height: 1.72;
}

.hero__actions,
.hero__badges,
.support-links{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.hero__actions{
	margin-top: 32px;
}

.hero__badges{
	margin-top: 28px;
}

.hero__badges span{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink-2);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
}

.hero__badges span i{
	width: 7px;
	height: 7px;
	background: var(--green);
	box-shadow: 0 0 0 4px rgba(15,122,76,.12);
}

.button{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 20px;
	border: 1px solid var(--ink);
	background: transparent;
	color: var(--ink);
	font-weight: 760;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--motion-fast) var(--ease-premium), background var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.button:hover{
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(22,31,43,.10);
}

.button:active{
	transform: translateY(0);
	box-shadow: none;
}

.button--primary{
	border-color: var(--blue-dark);
	background: var(--blue-dark);
	color: #fff;
}

.button--primary:hover{
	background: #082a48;
	border-color: #082a48;
}

.button--secondary,
.button--ghost{
	border-color: var(--line-dark);
	background: rgba(251,250,246,.55);
}

.button--secondary:hover,
.button--ghost:hover{
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}

.button.is-disabled{
	border-color: var(--line);
	background: var(--surface-2);
	color: var(--muted);
	cursor: default;
	pointer-events: none;
}

.hero__visual{
	position: relative;
	border: 1px solid var(--border-strong);
	background:
		linear-gradient(135deg, rgba(251,250,246,.82), rgba(238,234,223,.66)),
		linear-gradient(90deg, rgba(0,103,168,.09), transparent 36%);
	box-shadow: var(--shadow-panel);
	padding: clamp(16px, 1.8vw, 22px);
}

.hero__visual::before{
	content: "";
	position: absolute;
	inset: 10px;
	border: 1px solid rgba(0,103,168,.12);
	pointer-events: none;
}

.control-panel{
	position: relative;
	border: 1px solid rgba(17,26,36,.22);
	background:
		linear-gradient(180deg, rgba(255,255,255,.035), transparent 34%),
		#172331;
	color: #e8edf1;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.control-panel__top{
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 18px;
	border-bottom: 1px solid rgba(255,255,255,.13);
	font-family: var(--mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.control-panel__top strong{
	color: #8fc9ef;
}

.control-panel__grid{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	border-bottom: 1px solid rgba(255,255,255,.13);
}

.control-panel__grid div{
	min-height: 136px;
	padding: 20px;
	border-right: 1px solid rgba(255,255,255,.12);
	border-bottom: 1px solid rgba(255,255,255,.12);
	transition: background var(--motion-default) ease;
}

.control-panel__grid div:nth-child(2n){
	border-right: 0;
}

.control-panel__grid div:nth-last-child(-n+2){
	border-bottom: 0;
}

.control-panel span{
	display: block;
	margin-bottom: 20px;
	color: #98aabc;
	font-family: var(--mono);
	font-size: 12px;
	text-transform: uppercase;
}

.control-panel strong{
	display: block;
	font-size: clamp(22px, 2vw, 28px);
	line-height: 1.1;
	letter-spacing: -.025em;
}

.control-panel__route{
	display: grid;
	grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 18px;
	font-family: var(--mono);
	font-size: 12px;
	text-transform: uppercase;
}

.control-panel__route i{
	display: block;
	height: 1px;
	background: linear-gradient(90deg, rgba(143,201,239,.35), rgba(143,201,239,.85));
}

.metrics{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	margin-top: clamp(48px, 5vw, 72px);
	border: 1px solid var(--line);
	background: var(--line);
}

.metric{
	padding: clamp(22px, 2.5vw, 32px);
	background: rgba(251,250,246,.70);
}

.metric strong{
	display: block;
	margin-bottom: 8px;
	color: var(--blue-dark);
	font-family: var(--mono);
	font-size: 28px;
	line-height: 1;
}

.metric span{
	color: var(--muted);
}

.section{
	padding: var(--section-space-md) 0;
}

.section-head{
	max-width: 820px;
	margin-bottom: clamp(30px, 4vw, 46px);
}

.section-head--split{
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(300px, .72fr);
	gap: 42px;
	align-items: end;
	max-width: none;
}

.pipeline,
.feature-grid,
.delivery-grid{
	display: grid;
	gap: 1px;
	border: 1px solid var(--line);
	background: var(--line);
	min-width: 0;
}

.pipeline{
	grid-template-columns: repeat(4, 1fr);
	position: relative;
	gap: 0;
	border: 0;
	background: transparent;
}

.pipeline::before{
	content: "";
	position: absolute;
	left: var(--card-padding);
	right: var(--card-padding);
	top: calc(var(--card-padding) + 12px);
	height: 1px;
	background: linear-gradient(90deg, rgba(0,103,168,.16), rgba(0,103,168,.52), rgba(0,103,168,.16));
}

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

.delivery-grid{
	grid-template-columns: repeat(2, 1fr);
}

.pipeline__step,
.feature-card,
.delivery-card,
.requirements-card,
.download-card,
.support-grid,
.changelog article{
	background: rgba(251,250,246,.74);
}

.pipeline__step,
.feature-card,
.delivery-card{
	padding: var(--card-padding);
}

.pipeline__step{
	position: relative;
	min-width: 0;
	border: 1px solid var(--border-default);
	border-left: 0;
	background: rgba(251,250,246,.78);
	transition: border-color var(--motion-default) ease, background var(--motion-default) ease, transform var(--motion-default) var(--ease-premium);
}

.pipeline__step:first-child{
	border-left: 1px solid var(--border-default);
}

.pipeline__step::before{
	content: "";
	position: absolute;
	left: calc(var(--card-padding) + 46px);
	top: calc(var(--card-padding) + 10px);
	z-index: 1;
	width: 7px;
	height: 7px;
	border: 2px solid var(--surface);
	border-radius: 50%;
	background: var(--blue);
	box-shadow: 0 0 0 1px rgba(0,103,168,.42);
}

.pipeline__step:hover{
	border-color: rgba(0,103,168,.34);
	background: rgba(251,250,246,.92);
}

.delivery-card{
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pipeline__number{
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	min-height: 24px;
	margin-bottom: 46px;
	border: 1px solid rgba(139,95,22,.24);
	background: rgba(251,250,246,.92);
	color: var(--gold);
	font-family: var(--mono);
	font-size: 13px;
	font-weight: 800;
}

.pipeline__step p,
.feature-card p,
.delivery-card p,
.showcase__copy p,
.showcase__copy li,
.changelog li,
.faq-list p{
	color: var(--muted);
}

.code-sample{
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 24px 0 0;
	padding: 18px;
	border: 1px solid rgba(17,26,36,.22);
	background:
		linear-gradient(90deg, rgba(143,201,239,.09), transparent 34%),
		#151f2b;
	color: #e8edf1;
	overflow-x: auto;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.code-sample code{
	display: block;
	min-width: max-content;
	font-family: var(--mono);
	font-size: 13px;
	line-height: 1.65;
	white-space: pre;
}

.feature-card{
	min-height: 236px;
	position: relative;
	border: 1px solid transparent;
	transition: background var(--motion-default) ease, border-color var(--motion-default) ease, transform var(--motion-default) var(--ease-premium);
}

.feature-card::before{
	content: "";
	position: absolute;
	left: 26px;
	top: 26px;
	width: 44px;
	height: 2px;
	background: var(--blue);
	transition: width var(--motion-default) var(--ease-premium);
}

.feature-card h3{
	margin-top: 54px;
}

.feature-card:hover{
	z-index: 1;
	border-color: rgba(0,103,168,.28);
	background: rgba(251,250,246,.92);
	transform: translateY(-2px);
}

.feature-card:hover::before{
	width: 72px;
}

.delivery-card span{
	display: inline-flex;
	margin-bottom: 26px;
	padding: 5px 8px;
	border: 1px solid rgba(0,103,168,.28);
	color: var(--blue-dark);
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
}

.delivery-card h3{
	margin-bottom: 14px;
}

.delivery-flow{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	min-width: 0;
	margin-top: auto;
	border: 1px solid rgba(0,103,168,.18);
	background: rgba(0,103,168,.18);
}

.delivery-flow b{
	position: relative;
	display: grid;
	min-height: 72px;
	place-items: center;
	padding: 12px;
	background: rgba(0,103,168,.055);
	color: var(--ink-2);
	font-family: var(--mono);
	font-size: 12px;
	line-height: 1.35;
	text-align: center;
}

.delivery-flow b:not(:last-child)::after{
	content: "";
	position: absolute;
	right: -7px;
	top: 50%;
	z-index: 2;
	width: 13px;
	height: 1px;
	background: var(--blue);
}

.delivery-notes{
	margin: 24px 0 0;
	padding: 18px;
	border: 1px solid rgba(0,103,168,.18);
	background: rgba(0,103,168,.055);
	list-style: none;
}

.delivery-notes li{
	position: relative;
	padding-left: 20px;
	color: var(--ink-2);
	font-size: 14px;
}

.delivery-notes li + li{
	margin-top: 8px;
}

.delivery-notes li::before{
	content: "";
	position: absolute;
	left: 0;
	top: .72em;
	width: 7px;
	height: 7px;
	background: var(--blue);
}

.showcase{
	--showcase-preview-height: clamp(300px, calc(100vh - 320px), 620px);
	min-width: 0;
	border: 1px solid var(--border-strong);
	background:
		linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.16)),
		rgba(251,250,246,.62);
	box-shadow: var(--shadow-panel);
}

.showcase__stage{
	position: relative;
	display: grid;
	padding: 24px;
	overflow: hidden;
}

.showcase__slide[hidden]{
	display: none !important;
}

.showcase__slide{
	display: grid;
	grid-area: 1 / 1;
	grid-template-columns: minmax(0, 1.38fr) minmax(300px, .62fr);
	gap: 22px;
	align-items: start;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(10px);
	transition: opacity var(--motion-default) var(--ease-premium), transform var(--motion-default) var(--ease-premium), visibility var(--motion-default) linear;
}

.showcase__slide.is-active{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

.browser-frame{
	min-width: 0;
	border: 1px solid rgba(15,30,45,.24);
	background: #ddd9d0;
	overflow: hidden;
	box-shadow: 0 18px 34px rgba(42,50,60,.10);
}

.browser-frame__bar{
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 34px;
	padding: 10px 12px;
	border-bottom: 1px solid rgba(255,255,255,.08);
	background: #201c19;
}

.browser-frame__bar span{
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #c9584e;
}

.browser-frame__bar span:nth-child(2){
	background: #c9973a;
}

.browser-frame__bar span:nth-child(3){
	background: #4c986f;
}

.showcase__image-button{
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	padding: 0;
	border: 0;
	background: #ddd9d0;
	cursor: zoom-in;
	overflow: hidden;
}

.showcase__image-button:not(.is-loaded){
	min-height: var(--showcase-preview-height);
}

.showcase__image-button::before{
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 0;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border: 2px solid rgba(17,26,36,.18);
	border-top-color: var(--blue);
	border-radius: 50%;
	animation: veloimgSpin .8s linear infinite;
}

.showcase__image-button.is-loaded::before{
	display: none;
}

.showcase__image-button img{
	display: block;
	position: relative;
	z-index: 1;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: var(--showcase-preview-height);
	background: #ddd9d0;
	opacity: 0;
	transition: opacity var(--motion-default) ease;
}

.showcase__image-button.is-loaded img{
	opacity: 1;
}

.showcase__copy{
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100%;
	padding: clamp(24px, 2.5vw, 34px);
	border-left: 2px solid var(--blue);
	background: rgba(251,250,246,.86);
}

.showcase__copy ul,
.check-list,
.changelog ul{
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.showcase__copy li,
.check-list li,
.changelog li{
	position: relative;
	padding-left: 22px;
}

.showcase__copy li + li,
.check-list li + li,
.changelog li + li{
	margin-top: 8px;
}

.showcase__copy li::before,
.check-list li::before,
.changelog li::before{
	content: "";
	position: absolute;
	left: 0;
	top: .72em;
	width: 8px;
	height: 8px;
	background: var(--blue);
}

.showcase__controls{
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) 48px;
	gap: 12px;
	align-items: stretch;
	padding: 0 24px 24px;
}

.showcase__arrow{
	border: 1px solid var(--border-strong);
	background: rgba(251,250,246,.72);
	color: var(--ink);
	font-size: 19px;
	cursor: pointer;
	transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease, transform var(--motion-fast) var(--ease-premium), color var(--motion-fast) ease;
}

.showcase__arrow:hover:not(:disabled){
	border-color: var(--blue);
	background: rgba(0,103,168,.085);
	transform: translateY(-1px);
}

.showcase__arrow:disabled{
	border-color: var(--line);
	background: rgba(251,250,246,.58);
	color: var(--muted);
	cursor: not-allowed;
}

.showcase__arrow:disabled:hover{
	transform: none;
}

.showcase__thumbs{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1px;
	border: 1px solid var(--line);
	background: var(--line);
}

.showcase__thumbs button{
	min-height: 60px;
	padding: 9px 12px;
	border: 0;
	background: rgba(251,250,246,.8);
	color: var(--muted);
	font-weight: 760;
	cursor: pointer;
	transition: background var(--motion-fast) ease, color var(--motion-fast) ease;
}

.showcase__thumbs button.is-active{
	background: var(--blue-dark);
	color: #fff;
}

.requirements-card,
.download-card,
.support-grid{
	display: grid;
	grid-template-columns: minmax(0, .72fr) minmax(320px, 1fr);
	gap: clamp(32px, 4vw, 52px);
	padding: clamp(28px, 3vw, 42px);
	border: 1px solid var(--border-strong);
}

.download-card{
	align-items: center;
	position: relative;
	overflow: hidden;
}

.download-card::before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, var(--blue), rgba(0,103,168,.18));
}

.download-card__side{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 12px;
	align-items: center;
}

.download-card__side strong{
	padding: 11px 14px;
	border: 1px solid rgba(0,103,168,.28);
	background: rgba(0,103,168,.065);
	color: var(--blue-dark);
	font-family: var(--mono);
	font-size: 13px;
	font-weight: 850;
}

.faq-list{
	display: grid;
	gap: 1px;
	border: 1px solid var(--line);
	background: var(--line);
}

.faq-list details{
	background: rgba(251,250,246,.76);
	transition: background var(--motion-default) ease;
}

.faq-list details[open]{
	background: rgba(251,250,246,.94);
}

.faq-list summary{
	position: relative;
	padding: 20px 58px 20px 22px;
	font-weight: 820;
	cursor: pointer;
	list-style: none;
}

.faq-list summary::-webkit-details-marker{
	display: none;
}

.faq-list summary::after{
	content: "+";
	position: absolute;
	right: 22px;
	top: 50%;
	width: 24px;
	height: 24px;
	margin-top: -12px;
	border: 1px solid var(--border-default);
	color: var(--blue-dark);
	font-family: var(--mono);
	font-size: 16px;
	line-height: 22px;
	text-align: center;
	transition: transform var(--motion-default) var(--ease-premium), background var(--motion-default) ease;
}

.faq-list details[open] summary::after{
	background: rgba(0,103,168,.08);
	transform: rotate(45deg);
}

.faq-list p{
	margin: 0;
	padding: 0 58px 24px 22px;
	line-height: 1.72;
}

.support-grid{
	align-items: start;
}

.support-links{
	margin-top: 26px;
}

.support-form{
	padding: clamp(24px, 2.4vw, 32px);
	border: 1px solid var(--line);
	background: rgba(251,250,246,.82);
}

.support-form.is-thank-you .support-form__fields{
	display: none;
}

.support-thank-you{
	min-height: 320px;
	display: grid;
	align-content: center;
	gap: 12px;
	padding: 28px;
	border: 1px solid rgba(15,122,76,.28);
	background: rgba(15,122,76,.08);
}

.support-thank-you[hidden]{
	display: none;
}

.support-thank-you strong{
	display: block;
	color: var(--green);
	font-size: 26px;
	line-height: 1.15;
	letter-spacing: -.025em;
}

.support-thank-you p{
	margin: 0;
	color: var(--ink-2);
}

.support-form label{
	display: block;
	margin-top: 16px;
}

.support-form__required{
	margin: -2px 0 18px;
	color: var(--muted);
	font-size: 14px;
}

.support-form span,
.field-label{
	display: block;
	margin-bottom: 6px;
	color: var(--ink-2);
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
}

.field-label b{
	color: var(--red);
	font-weight: 900;
}

.field-label small{
	margin-left: 6px;
	color: var(--muted);
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 700;
	text-transform: none;
}

.support-form input,
.support-form textarea{
	width: 100%;
	padding: 13px 14px;
	border: 1px solid var(--border-strong);
	background: var(--surface);
	color: var(--ink);
	font: inherit;
	transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.support-form input:focus-visible,
.support-form textarea:focus-visible{
	border-color: rgba(0,103,168,.58);
	box-shadow: 0 0 0 3px rgba(0,103,168,.10);
}

.support-form label.is-invalid input,
.support-form label.is-invalid textarea,
.support-form input[aria-invalid="true"],
.support-form textarea[aria-invalid="true"]{
	border-color: var(--red);
	background: rgba(177,60,54,.055);
}

.support-form label.is-invalid input:focus,
.support-form label.is-invalid textarea:focus{
	outline-color: rgba(177,60,54,.24);
}

.field-error{
	display: none;
	margin-top: 7px;
	color: var(--red);
	font-style: normal;
	font-size: 13px;
	font-weight: 760;
}

.support-form label.is-invalid .field-error{
	display: block;
}

.support-form textarea{
	resize: vertical;
}

.support-form button{
	margin-top: 20px;
}

.field-trap{
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.support-form__note,
.support-form__status{
	margin: 14px 0 0;
	color: var(--muted);
	font-size: 14px;
}

.support-form__status.is-success{
	color: var(--green);
	font-weight: 800;
}

.support-form__status.is-error{
	color: var(--red);
	font-weight: 800;
}

.changelog{
	position: relative;
	display: grid;
	gap: 0;
	border-left: 1px solid var(--border-default);
	background: transparent;
}

.changelog article{
	position: relative;
	margin-left: 26px;
	padding: 0 0 34px 30px;
	background: transparent;
}

.changelog article::before{
	content: "";
	position: absolute;
	left: -32px;
	top: 4px;
	width: 11px;
	height: 11px;
	border: 2px solid var(--surface);
	background: var(--blue);
	box-shadow: 0 0 0 1px rgba(0,103,168,.34);
}

.changelog span{
	display: inline-flex;
	margin-bottom: 14px;
	color: var(--gold);
	font-family: var(--mono);
	font-size: 13px;
	font-weight: 800;
}

.site-footer{
	padding: 40px 0;
	border-top: 1px solid rgba(17,26,36,.16);
	color: var(--muted);
}

.site-footer__inner{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 14px;
}

.site-footer p{
	margin: 0;
}

.lightbox{
	position: fixed;
	inset: 0;
	z-index: 30;
	display: grid;
	place-items: center;
	padding: 28px;
	background: rgba(12, 17, 24, .86);
}

.lightbox[hidden]{
	display: none;
}

.lightbox img{
	max-width: min(1500px, 96vw);
	max-height: 88vh;
	border: 1px solid rgba(255,255,255,.24);
	box-shadow: 0 28px 80px rgba(0,0,0,.42);
}

.lightbox__close{
	position: fixed;
	top: 18px;
	right: 18px;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(255,255,255,.34);
	background: transparent;
	color: #fff;
	font-size: 30px;
	cursor: pointer;
}

html.is-js .hero__copy,
html.is-js .hero__visual,
html.is-js .metrics{
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--motion-reveal) var(--ease-premium), transform var(--motion-reveal) var(--ease-premium);
}

html.is-js .hero.is-visible .hero__copy,
html.is-js .hero.is-visible .hero__visual,
html.is-js .hero.is-visible .metrics{
	opacity: 1;
	transform: translateY(0);
}

html.is-js .hero.is-visible .hero__visual{
	transition-delay: 90ms;
}

html.is-js .hero.is-visible .metrics{
	transition-delay: 160ms;
}

html.is-js .control-panel__grid div,
html.is-js .metric,
html.is-js .feature-card{
	opacity: 0;
	transform: translateY(10px);
	transition: opacity var(--motion-reveal) var(--ease-premium), transform var(--motion-reveal) var(--ease-premium), background var(--motion-default) ease, border-color var(--motion-default) ease;
}

html.is-js .is-visible .control-panel__grid div,
html.is-js .is-visible .metric,
html.is-js .is-visible .feature-card{
	opacity: 1;
	transform: translateY(0);
}

html.is-js .control-panel__grid div:nth-child(2),
html.is-js .metric:nth-child(2),
html.is-js .feature-card:nth-child(2){
	transition-delay: 70ms;
}

html.is-js .control-panel__grid div:nth-child(3),
html.is-js .metric:nth-child(3),
html.is-js .feature-card:nth-child(3){
	transition-delay: 140ms;
}

html.is-js .control-panel__grid div:nth-child(4),
html.is-js .feature-card:nth-child(4){
	transition-delay: 210ms;
}

html.is-js .feature-card:nth-child(5){
	transition-delay: 280ms;
}

html.is-js .feature-card:nth-child(6){
	transition-delay: 350ms;
}

html.is-js .pipeline__step::before{
	transform: scale(.72);
	transition: transform var(--motion-reveal) var(--ease-premium), box-shadow var(--motion-reveal) ease;
}

html.is-js .pipeline.is-visible .pipeline__step::before{
	transform: scale(1);
	box-shadow: 0 0 0 1px rgba(0,103,168,.42), 0 0 0 8px rgba(0,103,168,.08);
}

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

@media (max-width: 1000px){
	.showcase{
		--showcase-preview-height: clamp(260px, calc(100vh - 280px), 440px);
	}

	.hero__grid,
	.section-head--split,
	.showcase__slide,
	.requirements-card,
	.download-card,
	.support-grid{
		grid-template-columns: 1fr;
	}

	.site-header__inner{
		padding: 16px 0;
		gap: 16px;
	}

	.site-header.is-scrolled .site-header__inner{
		gap: 14px;
		padding: 9px 0;
	}

	.site-nav{
		justify-content: flex-end;
	}

	.pipeline,
	.feature-grid,
	.delivery-grid,
	.metrics{
		grid-template-columns: repeat(2, 1fr);
	}

	.pipeline::before{
		display: none;
	}

	.pipeline__step:nth-child(odd){
		border-left: 1px solid var(--border-default);
	}

	.showcase__thumbs{
		grid-template-columns: repeat(2, 1fr);
	}

	.showcase__stage{
		padding: 16px;
	}

	.download-card__side{
		justify-content: flex-start;
	}
}

@media (max-width: 760px){
	:root{
		--header-height: 70px;
	}

	.site-header__inner{
		grid-template-columns: auto minmax(0, 1fr) auto;
		min-height: 70px;
		padding: 12px 0;
	}

	.site-header.is-scrolled .site-header__inner{
		min-height: 60px;
		padding: 7px 0;
	}

	.brand img{
		width: 138px;
	}

	.site-header.is-scrolled .brand img{
		width: 120px;
	}

	.language-switch{
		justify-self: end;
	}

	.language-switch span{
		display: none;
	}

	.nav-toggle{
		display: inline-flex;
		justify-self: end;
	}

	.site-nav{
		position: absolute;
		left: 0;
		right: 0;
		top: calc(100% + 1px);
		display: grid;
		grid-template-columns: 1fr;
		gap: 1px;
		padding: 8px;
		border: 1px solid var(--line-dark);
		background: rgba(245,244,239,.98);
		box-shadow: 0 18px 38px rgba(42,50,60,.16);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-8px);
		transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
	}

	.site-header.is-nav-open .site-nav{
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}

	.site-nav a{
		padding: 13px 14px;
		border-color: rgba(17,26,36,.1);
		background: rgba(251,250,246,.82);
	}

	.site-header.is-scrolled .site-nav a{
		padding: 12px 14px;
	}
}

@media (max-width: 640px){
	.showcase{
		--showcase-preview-height: clamp(220px, calc(100vh - 240px), 340px);
	}

	.shell{
		width: min(100% - 24px, var(--container-width));
	}

	.hero{
		padding-top: 48px;
	}

	h1{
		font-size: 42px;
	}

	.section{
		padding: 50px 0;
	}

	.requirements-card,
	.download-card,
	.support-grid{
		gap: 24px;
		padding: 22px;
	}

	.support-form,
	.showcase__copy{
		padding: 22px;
	}

	.delivery-card{
		padding: 22px 16px;
	}

	.code-sample{
		padding: 14px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.pipeline,
	.feature-grid,
	.delivery-grid,
	.metrics,
	.control-panel__grid,
	.delivery-flow{
		grid-template-columns: 1fr;
	}

	.pipeline__step{
		border-left: 1px solid var(--border-default);
		border-top: 0;
	}

	.pipeline__step:first-child{
		border-top: 1px solid var(--border-default);
	}

	.control-panel__grid div,
	.control-panel__grid div:nth-child(2n),
	.control-panel__grid div:nth-last-child(-n+2){
		border-right: 0;
		border-bottom: 1px solid rgba(255,255,255,.12);
	}

	.control-panel__grid div:last-child{
		border-bottom: 0;
	}

	.control-panel__route{
		grid-template-columns: 1fr;
	}

	.control-panel__route i{
		display: none;
	}

	.delivery-flow b:not(:last-child)::after{
		right: auto;
		left: 50%;
		top: auto;
		bottom: -7px;
		width: 1px;
		height: 13px;
	}

	.showcase__controls{
		grid-template-columns: 52px minmax(0, 1fr) 52px;
	}

	.showcase__thumbs{
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.showcase__arrow{
		min-height: 44px;
	}

	.hero__actions .button,
	.support-links .button,
	.download-card__side .button{
		width: 100%;
	}
}

@media (max-width: 420px){
	:root{
		--header-height: 66px;
	}

	.shell{
		width: min(100% - 18px, var(--container-width));
	}

	.brand img{
		width: 124px;
	}

	.site-header.is-scrolled .brand img{
		width: 112px;
	}

	.nav-toggle{
		min-height: 38px;
		padding: 0 10px;
	}

	.site-header.is-scrolled .nav-toggle{
		min-height: 36px;
		padding-left: 9px;
		padding-right: 9px;
	}

	h1{
		font-size: 36px;
	}

	h2{
		font-size: 28px;
	}

	.hero{
		padding-top: 34px;
	}

	.control-panel__top,
	.control-panel__route,
	.control-panel__grid div{
		padding-left: 14px;
		padding-right: 14px;
	}
}

@media (prefers-reduced-motion: reduce){
	*,
	*::before,
	*::after{
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}

	html.is-js .hero__copy,
	html.is-js .hero__visual,
	html.is-js .metrics,
	html.is-js .control-panel__grid div,
	html.is-js .metric,
	html.is-js .feature-card{
		opacity: 1;
		transform: none;
	}
}