:root {
	--bg: #090b0d;
	--bg-soft: #0d1013;
	--surface: #12161a;
	--surface-2: #171c21;
	--raised: #1e242a;
	--line: #252c33;
	--line-bright: #36404a;
	--text: #f5f7f8;
	--muted: #a0a9b2;
	--faint: #68727c;
	--cyan: #20b8f0;
	--cyan-light: #72dbff;
	--cyan-dark: #062a39;
	--green: #4dd17b;
	--display: "Archivo", system-ui, sans-serif;
	--body: "Cabin", system-ui, sans-serif;
	--wrap: 1180px;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: 86px;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

body.menu-open { overflow: hidden; }

button, a { -webkit-tap-highlight-color: transparent; }

a {
	color: var(--cyan);
	text-decoration: none;
}

img { max-width: 100%; }

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

h1, h2, h3 {
	font-family: var(--display);
	letter-spacing: -0.035em;
	line-height: 1.08;
}

button, a, summary { outline-offset: 4px; }

:focus-visible {
	outline: 2px solid var(--cyan-light);
	outline-offset: 4px;
}

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

.skip {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 200;
	transform: translateY(-150%);
	background: var(--cyan);
	color: #03141a;
	font-family: var(--display);
	font-weight: 700;
	padding: 10px 16px;
	border-radius: 8px;
	transition: transform .2s var(--ease);
}

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

.wrap {
	width: min(var(--wrap), calc(100% - 48px));
	margin-inline: auto;
}

.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(9, 11, 13, .72), transparent);
	transition: background .25s ease;
}

.nav.is-stuck {
	background: linear-gradient(180deg, rgba(9, 11, 13, .96), rgba(9, 11, 13, .74) 72%, transparent);
}

.nav-inner {
	position: relative;
	height: 82px;
	display: flex;
	align-items: center;
	gap: 26px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--text);
	font-family: var(--display);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.02em;
	pointer-events: auto;
}

.brand img { border-radius: 8px; }

.brand small {
	color: var(--cyan);
	background: rgba(32, 184, 240, .11);
	border: 1px solid rgba(32, 184, 240, .22);
	border-radius: 999px;
	font-size: 9px;
	letter-spacing: .08em;
	line-height: 1;
	padding: 5px 7px 4px;
	text-transform: uppercase;
}

.nav-links {
	position: absolute;
	left: 50%;
	top: 17px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 3px;
	padding: 4px;
	border: 1px solid rgba(102, 117, 130, .35);
	border-radius: 999px;
	background: rgba(18, 22, 26, .66);
	box-shadow: 0 16px 36px -20px #000, inset 0 1px 0 rgba(255, 255, 255, .04);
	backdrop-filter: blur(18px) saturate(1.15);
	pointer-events: auto;
}

.nav-links a {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 0 16px;
	border-radius: 999px;
	color: var(--muted);
	font-family: var(--display);
	font-size: 12px;
	font-weight: 600;
	transition: color .25s ease;
}

.nav-links a:hover { color: var(--cyan-light); }
.nav-links a.is-active { color: var(--cyan-light); }

.nav-label, .nav-symbol { position: relative; z-index: 2; }
.nav-symbol { display: none; font-size: 18px; line-height: 1; }

.nav-lamp {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	background: rgba(32, 184, 240, .09);
	opacity: 0;
	transform: scale(.86);
	transition: opacity .28s ease, transform .4s var(--ease);
}

.nav-lamp::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -7px;
	width: 31px;
	height: 3px;
	transform: translateX(-50%);
	border-radius: 4px 4px 0 0;
	background: var(--cyan);
	box-shadow: 0 -1px 8px 2px rgba(32, 184, 240, .65), 0 4px 18px 5px rgba(32, 184, 240, .22);
}

.nav-lamp::after {
	content: "";
	position: absolute;
	left: 50%;
	top: -10px;
	width: 48px;
	height: 23px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: rgba(32, 184, 240, .14);
	filter: blur(9px);
}

.nav-links a.is-active .nav-lamp { opacity: 1; transform: scale(1); }
.nav-download { margin-left: auto; pointer-events: auto; }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 44px;
	padding: 11px 20px;
	border: 1px solid var(--cyan);
	border-radius: 10px;
	background: var(--cyan);
	color: #03161e;
	font-family: var(--display);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 0 0 rgba(32, 184, 240, 0);
	transition: transform .2s var(--ease), background .2s ease, box-shadow .25s ease;
}

.btn:hover {
	background: var(--cyan-light);
	border-color: var(--cyan-light);
	transform: translateY(-2px);
	box-shadow: 0 13px 35px -14px rgba(32, 184, 240, .72);
}

.btn:active { transform: translateY(0); }

.btn-sm {
	min-height: 38px;
	padding: 9px 16px;
	font-size: 13px;
}

.btn-lg {
	min-height: 52px;
	padding: 15px 24px;
	font-size: 16px;
}

.btn-ghost {
	background: rgba(255, 255, 255, .02);
	border-color: var(--line-bright);
	color: var(--text);
}

.btn-ghost:hover {
	background: var(--surface-2);
	border-color: #4b5762;
	box-shadow: none;
}

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--text);
	font-family: var(--display);
	font-size: 15px;
	font-weight: 600;
	transition: color .2s ease, gap .2s var(--ease);
}

.text-link span { color: var(--cyan); }
.text-link:hover { color: var(--cyan-light); gap: 14px; }

.hero {
	position: relative;
	min-height: 760px;
	display: grid;
	align-items: center;
	padding: 94px 0 110px;
	overflow: hidden;
}

.hero-glow {
	position: absolute;
	width: 980px;
	height: 720px;
	right: -260px;
	top: -120px;
	background: radial-gradient(ellipse, rgba(32, 184, 240, .14), transparent 64%);
	filter: blur(8px);
	pointer-events: none;
}

.hero-grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .45), transparent 82%);
	pointer-events: none;
}

.hero-inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr);
	align-items: center;
	gap: 74px;
}

.eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	color: var(--cyan);
	font-family: var(--display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
}

.eyebrow > span:first-child {
	width: 26px;
	height: 1px;
	background: currentColor;
}

h1 {
	max-width: 690px;
	margin-bottom: 23px;
	font-size: clamp(44px, 5.3vw, 70px);
	font-weight: 700;
	letter-spacing: -.055em;
}

h1 > span {
	color: var(--cyan);
	background: linear-gradient(100deg, var(--cyan), #8be4ff 54%, var(--cyan));
	background-size: 190% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: title-shine 7s linear infinite;
}

@keyframes title-shine { to { background-position: 190% center; } }

.lede {
	max-width: 51ch;
	margin-bottom: 0;
	color: var(--muted);
	font-size: 19px;
	line-height: 1.55;
}

.cta {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-top: 31px;
	flex-wrap: wrap;
}

.cta.center { justify-content: center; }

.trust-row {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 23px 0 0;
	color: var(--faint);
	font-size: 13px;
}

.trust-row span { color: var(--green); margin-right: 5px; }

.hero-demo {
	position: relative;
	padding-bottom: 50px;
}

.demo-shell {
	position: relative;
	width: 100%;
	min-height: 438px;
	border: 1px solid #2c343c;
	border-radius: 17px;
	background: #0e1215;
	box-shadow: 0 44px 100px -40px rgba(0, 0, 0, .95), 0 0 80px -42px rgba(32, 184, 240, .45);
	overflow: hidden;
}

.demo-shell::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(120deg, rgba(255, 255, 255, .035), transparent 33%);
}

.demo-topbar {
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px 0 18px;
	border-bottom: 1px solid var(--line);
	background: #111519;
}

.demo-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--display);
	font-size: 12px;
	font-weight: 600;
}

.demo-brand img { border-radius: 6px; }

.window-controls { display: flex; gap: 12px; }
.window-controls i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #343b42; }

.demo-body {
	display: grid;
	grid-template-columns: 58px 1fr;
	min-height: 389px;
}

.demo-sidebar {
	padding-top: 26px;
	border-right: 1px solid var(--line);
	background: #101418;
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 20px;
}

.demo-sidebar span {
	position: relative;
	width: 19px;
	height: 3px;
	border-radius: 2px;
	background: #3c454e;
}

.demo-sidebar span::before {
	content: "";
	position: absolute;
	width: 4px;
	height: 4px;
	left: -8px;
	top: 0;
	border-radius: 50%;
	background: inherit;
}

.demo-sidebar .demo-nav-on { background: var(--cyan); }

.demo-content { padding: 28px 32px 30px; }

.demo-heading small {
	display: block;
	margin-bottom: 5px;
	color: var(--faint);
	font-family: var(--display);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .13em;
}

.demo-heading strong {
	display: block;
	font-family: var(--display);
	font-size: 27px;
	letter-spacing: -.04em;
	transition: opacity .2s ease, transform .3s var(--ease);
}

.monitor-stage {
	position: relative;
	height: 154px;
	margin: 24px 0 22px;
	border-radius: 10px;
	background: radial-gradient(circle at center, rgba(32, 184, 240, .08), transparent 61%);
}

.monitor {
	position: absolute;
	top: 50%;
	left: 50%;
	border: 1px solid #48535e;
	border-radius: 5px;
	background: linear-gradient(145deg, #1a2025, #111519);
	box-shadow: 0 18px 26px -17px #000;
	transition: width .7s var(--ease), height .7s var(--ease), transform .7s var(--ease), opacity .45s ease, border-color .5s ease;
}

.monitor::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -11px;
	width: 27%;
	height: 10px;
	transform: translateX(-50%);
	border-bottom: 2px solid #3e4851;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
}

.monitor span {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 28% 22%, rgba(32, 184, 240, .16), transparent 62%);
}

.hero-demo[data-mode="desk"] .monitor-a { width: 31%; height: 79px; transform: translate(-108%, -46%) perspective(300px) rotateY(8deg); }
.hero-demo[data-mode="desk"] .monitor-b { width: 40%; height: 105px; transform: translate(-50%, -50%); border-color: var(--cyan); z-index: 2; }
.hero-demo[data-mode="desk"] .monitor-c { width: 25%; height: 70px; transform: translate(60%, -44%) perspective(300px) rotateY(-8deg); opacity: .35; }
.hero-demo[data-mode="sim"] .monitor-a,
.hero-demo[data-mode="sim"] .monitor-c { width: 18%; height: 60px; transform: translate(-50%, -40%) scale(.65); opacity: 0; }
.hero-demo[data-mode="sim"] .monitor-b { width: 73%; height: 126px; transform: translate(-50%, -50%); border-color: var(--cyan); }

.demo-details {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.demo-details > div {
	position: relative;
	display: grid;
	grid-template-columns: 8px 1fr;
	grid-template-rows: auto auto;
	column-gap: 8px;
	padding: 11px 10px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #151a1e;
}

.detail-dot {
	grid-row: 1 / 3;
	align-self: center;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cyan);
	box-shadow: 0 0 9px rgba(32, 184, 240, .55);
}

.demo-details span { color: var(--faint); font-size: 9px; line-height: 1.2; }
.demo-details strong { margin-top: 2px; color: #d9dfe3; font-family: var(--display); font-size: 10px; line-height: 1.2; font-weight: 600; }

.demo-complete {
	position: absolute;
	right: 20px;
	top: 67px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 13px;
	border: 1px solid rgba(77, 209, 123, .25);
	border-radius: 9px;
	background: rgba(15, 36, 25, .92);
	box-shadow: 0 15px 35px -20px #000;
	transform: translateY(0);
	opacity: 1;
	transition: opacity .2s ease, transform .35s var(--ease);
}

.demo-complete > span:first-child {
	display: grid;
	place-items: center;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: var(--green);
	color: #07180d;
	font-size: 11px;
	font-weight: 700;
}

.demo-complete > span:last-child { display: flex; flex-direction: column; }
.demo-complete strong { font-family: var(--display); font-size: 10px; }
.demo-complete small { margin-top: 1px; color: #83a88f; font-size: 8px; }
.hero-demo.is-switching .demo-complete { opacity: 0; transform: translateY(8px); }

.mode-switch {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	display: flex;
	gap: 4px;
	padding: 5px;
	border: 1px solid #303941;
	border-radius: 13px;
	background: rgba(18, 22, 26, .96);
	box-shadow: 0 18px 42px -20px #000;
}

.mode-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 128px;
	height: 42px;
	padding: 0 16px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--muted);
	font-family: var(--display);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background .3s ease, color .2s ease;
}

.mode-button.is-on { background: rgba(32, 184, 240, .13); color: var(--cyan-light); }
.mode-button:hover { color: var(--text); }

.mode-icon { position: relative; display: block; width: 17px; height: 14px; color: currentColor; }
.desk-icon { border: 1.5px solid currentColor; border-radius: 2px; }
.desk-icon::before { content: ""; position: absolute; width: 5px; height: 3px; border-bottom: 1.5px solid currentColor; left: 4px; bottom: -5px; }
.wheel-icon { width: 16px; height: 16px; border: 1.5px solid currentColor; border-radius: 50%; }
.wheel-icon::before { content: ""; position: absolute; width: 4px; height: 4px; border: 1.5px solid currentColor; border-radius: 50%; left: 4.5px; top: 4.5px; }

.section {
	position: relative;
	padding: 100px 0;
	border-bottom: 1px solid var(--line);
}

.section-heading { max-width: 730px; margin-bottom: 44px; }
.section-heading h2, .moves-intro h2, .safety-copy h2, .faq-intro h2, .final h2 {
	margin-bottom: 18px;
	font-size: clamp(32px, 4.1vw, 52px);
	font-weight: 700;
}

.section-heading > p:last-child,
.moves-intro > p,
.safety-copy > p,
.final-inner > p {
	max-width: 62ch;
	margin-bottom: 0;
	color: var(--muted);
	font-size: 18px;
}

.how { background: var(--bg); }

.steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: step;
}

.steps::before {
	content: "";
	position: absolute;
	left: 10%;
	right: 10%;
	top: 32px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(32, 184, 240, .35), transparent);
}

.step {
	position: relative;
	min-height: 238px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 25px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: linear-gradient(150deg, #14191d, #0f1215);
	overflow: hidden;
	transition: transform .3s var(--ease), border-color .3s ease;
}

.step:hover { transform: translateY(-4px); border-color: #3a4650; }

.step-number {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(32, 184, 240, .25);
	border-radius: 50%;
	background: #101d23;
	color: var(--cyan);
	font-family: var(--display);
	font-size: 11px;
	font-weight: 700;
}

.step h3 { margin-bottom: 10px; font-size: 21px; }
.step p { margin-bottom: 0; color: var(--muted); font-size: 15.5px; }

.moves { background: var(--bg-soft); }
.moves .section-heading { margin-bottom: 52px; }

.bento-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-auto-rows: 215px;
	gap: 16px;
}

.bento-card {
	position: relative;
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 26px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: linear-gradient(145deg, #15191d, #101316);
	overflow: hidden;
	transition: transform .35s var(--ease), border-color .3s ease, background .3s ease, box-shadow .35s ease;
}

.bento-card::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(135deg, rgba(255, 255, 255, .035), transparent 34%);
}

.bento-card:hover {
	transform: translateY(-4px) scale(1.008);
	border-color: #394550;
	background: linear-gradient(145deg, #191e23, #111519);
	box-shadow: 0 28px 55px -38px #000;
}

.bento-tall { grid-row: span 2; }
.bento-wide { grid-column: span 3; }
.bento-visual { position: relative; z-index: 1; flex: 1; min-height: 74px; }
.bento-copy { position: relative; z-index: 2; margin-top: 16px; }

.bento-copy > small {
	display: block;
	margin-bottom: 7px;
	color: var(--cyan);
	font-family: var(--display);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.bento-copy h3 { margin-bottom: 8px; font-size: 21px; }
.bento-copy p { margin-bottom: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }

.display-visual {
	min-height: 245px;
	background: radial-gradient(circle at center, rgba(32, 184, 240, .1), transparent 62%);
}

.bento-screen {
	position: absolute;
	top: 48%;
	left: 50%;
	height: 91px;
	border: 1px solid #45525d;
	border-radius: 6px;
	background: linear-gradient(145deg, #20272d, #111519);
	box-shadow: 0 18px 28px -20px #000;
}

.bento-screen::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -10px;
	width: 26px;
	height: 9px;
	transform: translateX(-50%);
	border-bottom: 2px solid #414c55;
}

.bento-screen span {
	position: absolute;
	right: 7px;
	top: 6px;
	color: #5d6a75;
	font-family: var(--display);
	font-size: 8px;
}

.bento-screen-a { width: 88px; transform: translate(-115%, -50%) perspective(300px) rotateY(8deg); animation: side-display-left 6s var(--ease) infinite; }
.bento-screen-b { z-index: 2; width: 112px; transform: translate(-50%, -54%); border-color: var(--cyan); animation: main-display 6s var(--ease) infinite; }
.bento-screen-c { width: 88px; transform: translate(15%, -50%) perspective(300px) rotateY(-8deg); animation: side-display-right 6s var(--ease) infinite; }

@keyframes side-display-left {
	0%, 42%, 100% { opacity: 1; transform: translate(-115%, -50%) perspective(300px) rotateY(8deg); }
	55%, 82% { opacity: 0; transform: translate(-50%, -50%) scale(.65); }
}

@keyframes side-display-right {
	0%, 42%, 100% { opacity: 1; transform: translate(15%, -50%) perspective(300px) rotateY(-8deg); }
	55%, 82% { opacity: 0; transform: translate(-50%, -50%) scale(.65); }
}

@keyframes main-display {
	0%, 42%, 100% { width: 112px; transform: translate(-50%, -54%); }
	55%, 82% { width: 210px; transform: translate(-50%, -54%); }
}

.display-mode {
	position: absolute;
	left: 50%;
	bottom: 5px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 128px;
	padding: 4px;
	transform: translateX(-50%);
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #101418;
}

.display-mode span { position: relative; z-index: 2; color: var(--faint); font-size: 9px; text-align: center; }
.display-mode i { position: absolute; z-index: 1; left: 4px; top: 4px; width: calc(50% - 4px); height: calc(100% - 8px); border-radius: 999px; background: rgba(32, 184, 240, .16); animation: mode-slide 6s var(--ease) infinite; }

@keyframes mode-slide { 0%, 42%, 100% { transform: translateX(0); } 55%, 82% { transform: translateX(100%); } }

.audio-visual { display: flex; align-items: center; justify-content: center; gap: 11px; }
.audio-device { display: flex; align-items: center; gap: 7px; color: var(--muted); font-family: var(--display); font-size: 10px; }
.audio-device > i { width: 26px; height: 26px; border: 1px solid #3c4852; border-radius: 8px; background: #171c20; }
.audio-route { position: relative; width: 62px; height: 2px; border-radius: 2px; background: #303941; }
.audio-route::before, .audio-route::after { content: ""; position: absolute; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: #49555f; }
.audio-route::before { left: 0; }
.audio-route::after { right: 0; }
.audio-route i { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px rgba(32, 184, 240, .65); animation: audio-switch 4s var(--ease) infinite alternate; }
@keyframes audio-switch { to { transform: translateX(52px); } }

.window-visual { min-height: 245px; }
.window-tile { position: absolute; width: 106px; height: 76px; padding: 12px 9px 8px; border: 1px solid #39444e; border-radius: 7px; background: rgba(26, 32, 37, .92); box-shadow: 0 17px 30px -22px #000; }
.window-tile i { position: absolute; left: 0; right: 0; top: 0; height: 9px; border-bottom: 1px solid #313a42; background: #1d2328; }
.window-tile span { display: block; height: 5px; margin-top: 8px; border-radius: 3px; background: #343e47; }
.window-tile span:last-child { width: 62%; }
.window-one { left: 9%; top: 19%; animation: window-one 6s var(--ease) infinite; }
.window-two { right: 8%; top: 25%; animation: window-two 6s var(--ease) infinite; }
.window-three { left: 35%; bottom: 9%; border-color: rgba(32, 184, 240, .55); animation: window-three 6s var(--ease) infinite; }
@keyframes window-one { 0%, 42%, 100% { transform: translate(0, 0); } 55%, 82% { transform: translate(122px, 42px) scale(.92); } }
@keyframes window-two { 0%, 42%, 100% { transform: translate(0, 0); } 55%, 82% { transform: translate(-92px, -16px) scale(1.06); } }
@keyframes window-three { 0%, 42%, 100% { transform: translate(0, 0); } 55%, 82% { transform: translate(-74px, -95px) scale(.88); } }

.apps-visual { display: grid; gap: 6px; align-content: center; }
.apps-visual > div { display: grid; grid-template-columns: 7px 1fr auto; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: #151a1e; }
.apps-visual i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(77, 209, 123, .5); animation: app-ready 2.4s ease infinite; }
.apps-visual > div:nth-child(2) i { animation-delay: .35s; }
.apps-visual > div:nth-child(3) i { animation-delay: .7s; }
.apps-visual span { color: #bdc5cb; font-size: 10px; }
.apps-visual small { color: var(--faint); font-size: 8px; }
@keyframes app-ready { 0%, 100% { opacity: .45; } 45% { opacity: 1; } }

.game-visual { display: flex; align-items: center; justify-content: center; }
.game-track { display: grid; grid-template-columns: auto minmax(50px, 1fr) auto minmax(50px, 1fr) auto; align-items: center; width: min(100%, 430px); }
.game-node { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--faint); }
.game-node > i { width: 14px; height: 14px; border: 2px solid #4a5660; border-radius: 50%; background: #14191d; animation: game-node 5s ease infinite; }
.game-node:nth-of-type(3) > i { animation-delay: 1.6s; }
.game-node:nth-of-type(5) > i { animation-delay: 3.2s; }
.game-node small { font-size: 9px; }
.game-line { position: relative; height: 2px; margin-bottom: 17px; background: #313a42; overflow: hidden; }
.game-line i { display: block; width: 100%; height: 100%; background: var(--cyan); transform-origin: left; animation: game-progress 5s var(--ease) infinite; }
.game-line:nth-of-type(4) i { animation-delay: 1.6s; }
@keyframes game-progress { 0%, 8% { transform: scaleX(0); } 35%, 100% { transform: scaleX(1); } }
@keyframes game-node { 0%, 100% { border-color: #4a5660; box-shadow: none; } 18%, 35% { border-color: var(--cyan); background: var(--cyan-dark); box-shadow: 0 0 12px rgba(32, 184, 240, .5); } }

.checks-visual { display: flex; align-items: center; justify-content: center; gap: 9px; }
.checks-visual > div { width: 76px; height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255, 255, 255, .025); animation: check-stage 3.6s ease infinite; }
.checks-visual > div:nth-child(2) { animation-delay: 1.2s; }
.checks-visual > div:nth-child(3) { animation-delay: 2.4s; }
.checks-visual small { color: var(--faint); font-size: 8px; }
.mini-lock { position: relative; width: 15px; height: 13px; border: 1.5px solid currentColor; border-radius: 3px; color: #64717c; }
.mini-lock::before { content: ""; position: absolute; left: 3px; top: -8px; width: 7px; height: 8px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 7px 7px 0 0; }
@keyframes check-stage { 0%, 25%, 100% { border-color: var(--line); background: rgba(255, 255, 255, .025); transform: scale(1); } 35%, 55% { border-color: rgba(32, 184, 240, .45); background: rgba(32, 184, 240, .09); transform: scale(1.05); } }

.checks-visual > div { color: #64717c; }
.checks-visual > div:nth-child(1) .mini-lock,
.checks-visual > div:nth-child(2) .mini-lock,
.checks-visual > div:nth-child(3) .mini-lock { animation: lock-color 3.6s ease infinite; }
.checks-visual > div:nth-child(2) .mini-lock { animation-delay: 1.2s; }
.checks-visual > div:nth-child(3) .mini-lock { animation-delay: 2.4s; }
@keyframes lock-color { 0%, 25%, 100% { color: #64717c; } 35%, 55% { color: var(--cyan); } }

.control { overflow: hidden; }
.control::before { content: ""; position: absolute; width: 680px; height: 680px; left: -380px; top: 70px; background: radial-gradient(circle, rgba(32, 184, 240, .08), transparent 67%); pointer-events: none; }

.control-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.control-card {
	min-height: 210px;
	padding: 26px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--surface);
	box-shadow: 0 18px 45px -38px rgba(0, 0, 0, .85);
	transition: border-color .3s ease, box-shadow .3s ease, transform .3s var(--ease);
}

.control-card:hover {
	border-color: #46545e;
	box-shadow: 0 28px 52px -32px rgba(0, 0, 0, .95), 0 12px 28px -24px rgba(32, 184, 240, .48);
	transform: translateY(-5px) scale(1.004);
}
.control-card h3 { margin-bottom: 11px; font-size: 21px; }
.control-card > p:last-child, .control-copy > p:last-child { margin-bottom: 0; color: var(--muted); font-size: 15.5px; }
.card-label { margin-bottom: 25px; color: var(--cyan); font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.control-compact { min-height: 174px; padding: 22px 24px; }
.control-compact .card-label { margin-bottom: 17px; }
.control-compact h3 { margin-bottom: 8px; font-size: 19px; }
.control-compact > p:last-child { font-size: 14.5px; }

.control-primary {
	grid-column: 1 / -1;
	min-height: 325px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 60px;
	padding: 42px 48px;
	background: linear-gradient(130deg, #12191e, #0f1215 70%);
	overflow: hidden;
}

.control-primary h3 { max-width: 520px; font-size: clamp(28px, 3.3vw, 42px); }
.control-copy { position: relative; z-index: 2; }

.deck-visual {
	position: relative;
	justify-self: center;
	display: grid;
	grid-template-columns: repeat(2, 116px);
	gap: 13px;
	padding: 22px;
	border: 1px solid #353f48;
	border-radius: 24px;
	background: #080a0c;
	box-shadow: 0 40px 60px -40px #000, 0 0 75px -30px rgba(32, 184, 240, .4);
	transform: perspective(700px) rotateY(-7deg) rotateX(5deg);
}

.deck-visual::after {
	content: "";
	position: absolute;
	inset: -120px;
	z-index: -1;
	background: radial-gradient(circle, rgba(32, 184, 240, .12), transparent 60%);
}

.deck-key {
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 11px;
	border: 1px solid #27313a;
	border-radius: 15px;
	background: linear-gradient(145deg, #151a1f, #0d1013);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 25px -18px #000;
}

.deck-key small { color: #dfe7eb; font-family: var(--display); font-size: 11px; font-weight: 600; }
.key-monitor { position: relative; width: 46px; height: 32px; border: 4px solid #fff; border-radius: 7px; }
.key-monitor::before { content: ""; position: absolute; width: 23px; height: 8px; left: 7px; bottom: -13px; border-bottom: 4px solid var(--cyan); border-radius: 3px; }
.key-wheel { position: relative; width: 46px; height: 46px; border: 5px solid #fff; border-radius: 50%; }
.key-wheel::before { content: ""; position: absolute; inset: 11px; border: 5px solid var(--cyan); border-radius: 50%; }
.key-wheel::after { content: ""; position: absolute; width: 5px; height: 17px; left: 15px; top: 20px; border-left: 5px solid var(--cyan); transform: rotate(-36deg); transform-origin: top; box-shadow: 13px -8px 0 -1px transparent; }

.pricing {
	min-height: 760px;
	display: grid;
	align-items: center;
	background: #090b0d;
	overflow: hidden;
}

.pricing-dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, .09) .8px, transparent .8px);
	background-size: 14px 14px;
	mask-image: radial-gradient(circle at 72% 18%, #000, rgba(0, 0, 0, .2) 40%, transparent 72%);
	pointer-events: none;
}

.pricing-spotlight {
	position: absolute;
	top: -58%;
	right: -10%;
	width: 950px;
	height: 950px;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(32, 184, 240, .11), rgba(255, 255, 255, .025) 30%, transparent 58%);
	filter: blur(28px);
	pointer-events: none;
}

.pricing-layout {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(350px, 430px);
	align-items: center;
	gap: 110px;
}

.pricing-copy h2 {
	max-width: 680px;
	margin-bottom: 18px;
	font-size: clamp(34px, 4.2vw, 54px);
}

.pricing-copy > p:not(.eyebrow) {
	max-width: 55ch;
	margin-bottom: 0;
	color: var(--muted);
	font-size: 18px;
}

.pricing-status {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	max-width: 520px;
	margin-top: 32px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
}

.pricing-status > span {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-top: 6px;
	border-radius: 50%;
	background: var(--cyan);
	box-shadow: 0 0 12px rgba(32, 184, 240, .6);
}

.pricing-status div { display: flex; flex-direction: column; gap: 3px; }
.pricing-status strong { font-family: var(--display); font-size: 14px; font-weight: 600; }
.pricing-status small { color: var(--faint); font-size: 13px; }

.pricing-card {
	position: relative;
	width: 100%;
	max-width: 430px;
	justify-self: end;
	padding: 6px;
	border: 1px solid rgba(113, 129, 143, .38);
	border-radius: 18px;
	background: rgba(15, 18, 21, .67);
	box-shadow: 0 35px 90px -38px #000, 0 0 70px -42px rgba(32, 184, 240, .55);
	backdrop-filter: blur(20px);
}

.pricing-card::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: -1;
	border-radius: inherit;
	background: linear-gradient(135deg, rgba(255, 255, 255, .12), transparent 28%, transparent 72%, rgba(32, 184, 240, .14));
}

.pricing-card-header {
	position: relative;
	margin-bottom: 4px;
	padding: 23px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: rgba(29, 34, 39, .73);
	overflow: hidden;
}

.pricing-glass {
	position: absolute;
	inset: 0 0 auto;
	height: 190px;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025) 40%, transparent);
	pointer-events: none;
}

.pricing-plan {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	margin-bottom: 9px;
}

.pricing-plan-name {
	display: flex;
	align-items: center;
	gap: 9px;
	color: #c5ccd2;
	font-family: var(--display);
	font-size: 13px;
	font-weight: 600;
}

.pricing-user-icon {
	position: relative;
	width: 17px;
	height: 17px;
	border: 1.5px solid var(--cyan);
	border-radius: 50%;
}

.pricing-user-icon::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 3px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cyan);
}

.pricing-user-icon::after {
	content: "";
	position: absolute;
	left: 3px;
	bottom: 2px;
	width: 9px;
	height: 4px;
	border-radius: 6px 6px 3px 3px;
	background: var(--cyan);
}

.pricing-badge {
	padding: 4px 9px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px;
	color: #cbd1d6;
	font-size: 10px;
	line-height: 1.2;
}

.pricing-description {
	position: relative;
	margin-bottom: 24px;
	color: var(--faint);
	font-size: 12px;
}

.pricing-price {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: 8px;
	margin-bottom: 18px;
}

.pricing-price strong {
	font-family: var(--display);
	font-size: 45px;
	font-weight: 700;
	line-height: .95;
	letter-spacing: -.06em;
}

.pricing-price span {
	padding-bottom: 4px;
	color: var(--muted);
	font-size: 13px;
}

.pricing-button {
	position: relative;
	width: 100%;
	min-height: 45px;
	background: linear-gradient(180deg, #4acbfa, var(--cyan));
	box-shadow: 0 12px 30px -14px rgba(32, 184, 240, .8);
}

.pricing-card-body {
	padding: 21px 19px 19px;
}

.pricing-list {
	display: grid;
	gap: 13px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.pricing-list li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	color: var(--muted);
	font-size: 13.5px;
}

.pricing-check {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin-top: 1px;
	border-radius: 50%;
	background: rgba(77, 209, 123, .13);
	color: var(--green);
	font-size: 10px;
	font-weight: 700;
}

.pricing-separator {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 21px 0;
}

.pricing-separator span { flex: 1; height: 1px; background: rgba(160, 169, 178, .25); }
.pricing-separator small { flex: 0 0 auto; color: var(--faint); font-size: 11px; }
.pricing-list-secondary { grid-template-columns: repeat(3, 1fr); gap: 7px; }
.pricing-list-secondary li { align-items: center; gap: 7px; color: var(--faint); font-size: 10.5px; }

.pricing-local {
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--cyan);
}

.comparison {
	position: relative;
	background: #0b0e11;
	overflow: hidden;
}

.comparison-inner {
	position: relative;
	z-index: 1;
}

.comparison-card {
	position: relative;
	padding: 7px;
	border: 1px solid rgba(113, 129, 143, .38);
	border-radius: 20px;
	background: rgba(15, 18, 21, .72);
	box-shadow: 0 35px 90px -45px #000, 0 0 80px -52px rgba(32, 184, 240, .6);
	backdrop-filter: blur(20px);
}

.comparison-card::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: -1;
	border-radius: inherit;
	background: linear-gradient(135deg, rgba(255, 255, 255, .12), transparent 24%, transparent 75%, rgba(32, 184, 240, .14));
}

.comparison-plans {
	display: grid;
	grid-template-columns: repeat(3, minmax(205px, 1fr));
	gap: 8px;
	padding: 7px;
	overflow-x: auto;
}

.comparison-plan {
	min-height: 112px;
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: rgba(29, 34, 39, .6);
	color: var(--text);
	text-align: left;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.comparison-plan:hover { transform: translateY(-2px); border-color: rgba(32, 184, 240, .38); }
.comparison-plan:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.comparison-plan.is-selected {
	border-color: rgba(32, 184, 240, .72);
	background: linear-gradient(155deg, rgba(32, 184, 240, .15), rgba(29, 34, 39, .82));
	box-shadow: 0 0 0 1px rgba(32, 184, 240, .2), 0 18px 42px -30px rgba(32, 184, 240, .85);
}

.comparison-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.comparison-plan strong { font: 600 15px var(--display); }
.comparison-plan em {
	padding: 3px 7px;
	border: 1px solid rgba(32, 184, 240, .35);
	border-radius: 999px;
	color: var(--cyan-light);
	font: 600 10px var(--display);
	font-style: normal;
}
.comparison-plan small { display: block; margin-top: 12px; color: var(--faint); font-size: 12px; }

.comparison-table-wrap {
	margin: 7px;
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow-x: auto;
}

.comparison-table {
	width: 100%;
	min-width: 920px;
	border-collapse: collapse;
	font-size: 13px;
}

.comparison-table th,
.comparison-table td {
	padding: 17px 15px;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	vertical-align: top;
	transition: background .2s ease, color .2s ease;
}

.comparison-table tr:last-child > * { border-bottom: 0; }
.comparison-table tr > *:last-child { border-right: 0; }
.comparison-table thead th {
	background: rgba(255, 255, 255, .025);
	color: #d9e0e4;
	font: 600 12px var(--display);
	text-align: center;
}
.comparison-table thead th:first-child { width: 42%; text-align: left; }
.comparison-table tbody th { color: #c8d0d5; font-weight: 500; text-align: left; }
.comparison-table td { width: 19.3%; color: var(--faint); text-align: center; }
.comparison-table .is-strong { color: var(--green); font-weight: 600; }
.comparison-table [data-compare-column].is-focused { background: rgba(32, 184, 240, .075); }

.comparison-note {
	display: grid;
	gap: 10px;
	padding: 20px 22px 22px;
}
.comparison-note p { max-width: 102ch; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.comparison-note small { max-width: 105ch; color: var(--faint); font-size: 11.5px; line-height: 1.55; }

.screenshots { background: var(--bg-soft); overflow: hidden; }
.app-showcase { position: relative; }
.showcase-note {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 14px;
	color: var(--faint);
	font-size: 12px;
}
.showcase-note > span { display: inline-flex; align-items: center; gap: 8px; color: var(--cyan-light); font-family: var(--display); font-weight: 600; }
.showcase-note i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(77, 209, 123, .75); }

.preview-window {
	position: relative;
	height: 760px;
	border: 1px solid #333a36;
	border-radius: 14px;
	background: #101310;
	box-shadow: 0 55px 110px -60px #000;
	overflow: hidden;
}
.preview-titlebar {
	height: 41px;
	display: flex;
	align-items: center;
	padding: 0 15px;
	border-bottom: 1px solid #2b302d;
	background: #141715;
	color: #7e8781;
	font: 600 9px var(--display);
	letter-spacing: .05em;
}
.preview-titlebar > div { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.preview-titlebar i { position: relative; display: block; width: 10px; height: 10px; }
.preview-titlebar i:first-child::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: #8a969f; }
.preview-titlebar i:nth-child(2) { border: 1px solid #8a969f; }
.preview-titlebar i:last-child::before, .preview-titlebar i:last-child::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: #8a969f; transform: rotate(45deg); }
.preview-titlebar i:last-child::after { transform: rotate(-45deg); }

.preview-layout { display: grid; grid-template-columns: 216px 1fr; height: calc(100% - 41px); }
.preview-sidebar {
	display: flex;
	flex-direction: column;
	border-right: 1px solid #2c312e;
	background: #151815;
}
.preview-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 27px 18px 25px; }
.preview-brand img { border-radius: 11px; box-shadow: 0 13px 28px -18px #000; }
.preview-brand > span { display: flex; align-items: center; gap: 7px; }
.preview-brand strong { color: #f5f7f5; font: 700 14px var(--display); }
.preview-brand small { padding: 2px 5px; border-radius: 4px; background: #075a78; color: #79ddff; font: 700 7px var(--display); text-transform: uppercase; }
.preview-sidebar nav { display: grid; gap: 3px; }
.preview-nav {
	position: relative;
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	min-height: 42px;
	padding: 0 20px;
	border: 0;
	background: transparent;
	color: #929b95;
	font: 500 13px var(--display);
	text-align: left;
	cursor: pointer;
	transition: color .2s ease, background .2s ease;
}
.preview-nav-icon { position: relative; display: inline-block; flex: 0 0 16px; width: 16px; height: 16px; color: currentColor; }
.preview-icon-displays::before { content: ""; position: absolute; inset: 2px 1px 4px; border: 1.5px solid currentColor; border-radius: 2px; }
.preview-icon-displays::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 0; height: 1.5px; background: currentColor; box-shadow: 0 -2px currentColor; }
.preview-icon-game::before { content: ""; position: absolute; inset: 5px 0 1px; border: 1.5px solid currentColor; border-radius: 6px 6px 4px 4px; transform: skewX(-7deg); }
.preview-icon-game::after { content: "+"; position: absolute; left: 3px; top: 3px; font: 700 10px/1 var(--display); }
.preview-icon-link::before, .preview-icon-link::after { content: ""; position: absolute; width: 9px; height: 6px; border: 1.5px solid currentColor; border-radius: 5px; transform: rotate(-38deg); }
.preview-icon-link::before { left: 0; top: 7px; }
.preview-icon-link::after { right: 0; top: 2px; }
.preview-icon-settings { border: 1.5px solid currentColor; border-radius: 50%; transform: scale(.78); box-shadow: 0 -7px 0 -5px currentColor, 0 7px 0 -5px currentColor, 7px 0 0 -5px currentColor, -7px 0 0 -5px currentColor; }
.preview-icon-settings::after { content: ""; position: absolute; inset: 4px; border: 1.5px solid currentColor; border-radius: 50%; }
.preview-nav:hover { color: #e8ecef; }
.preview-nav.is-on { color: var(--cyan-light); background: #222724; }
.preview-nav.is-on::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: var(--cyan); }
.preview-status { margin: auto 18px 24px; text-align: center; }
.preview-status > span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; background: #242925; color: #eef2ef; font: 600 11px var(--display); }
.preview-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px rgba(32, 184, 240, .65); }
.preview-status small { display: block; margin-top: 7px; color: #6f7a83; font-size: 9px; }

.preview-main { position: relative; min-width: 0; overflow: auto; background: #101310; scrollbar-color: #535d56 transparent; scrollbar-width: thin; }
.preview-view { min-height: 100%; padding: 29px 33px 36px; animation: preview-in .34s var(--ease) both; }
.preview-view[hidden], .detail-panel[hidden] { display: none; }
@keyframes preview-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.preview-page-head, .detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 25px; margin-bottom: 25px; }
.preview-page-head h3, .detail-head h3 { margin: 0 0 6px; color: #f5f7f8; font-size: clamp(25px, 3vw, 36px); line-height: 1; }
.preview-page-head h3 span { color: var(--cyan); }
.preview-page-head p, .detail-head p { margin: 0; color: #919a94; font-size: 11px; }
.preview-view h4 { margin: 0 0 12px; color: #f3f6f8; font-size: 15px; }
.preview-primary, .preview-secondary, .preview-save, .setup-apply {
	min-height: 37px;
	padding: 0 15px;
	border: 0;
	border-radius: 6px;
	background: var(--cyan);
	color: #061116;
	font: 700 11px var(--display);
	cursor: pointer;
	transition: filter .2s ease, transform .2s ease;
}
.preview-primary:hover, .preview-save:hover, .setup-apply:hover { filter: brightness(1.13); transform: translateY(-1px); }
.preview-secondary { border: 1px solid #3a423c; background: #252a26; color: #eff2ef; }

.preview-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 23px; }
.preview-metrics > div { position: relative; overflow: hidden; min-height: 78px; padding: 13px 15px; border: 1px solid #2c332e; border-radius: 7px; background: #1c201d; }
.preview-metrics strong { display: block; color: #f4f7f8; font: 600 20px var(--display); }
.preview-metrics span { color: #81909a; font-size: 8px; text-transform: uppercase; }
.preview-metrics i { position: absolute; left: 15px; right: 15px; bottom: 12px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--cyan) 65%, #2a302c 65%); }
.preview-metrics > div:nth-child(2) i { background: linear-gradient(90deg, #a57bff 67%, #2a302c 67%); }
.preview-metrics > div:nth-child(3) i { background: linear-gradient(90deg, #e4ad5d 50%, #2a302c 50%); }
.preview-subhead { display: flex; align-items: center; justify-content: space-between; }
.preview-subhead span { color: #8da0ad; font-size: 10px; }

.preview-setup { position: relative; display: grid; grid-template-columns: 1fr 112px; align-items: stretch; gap: 0; min-height: 157px; margin-bottom: 11px; border: 1px solid #303732; border-radius: 9px; background: #1a1e1b; transition: border-color .25s ease, background .25s ease; overflow: hidden; }
.preview-setup.is-active { border-color: #1689b4; background: #112f3d; box-shadow: inset 0 0 0 1px rgba(32, 184, 240, .1); }
.setup-open { display: grid; grid-template-columns: 194px 1fr; gap: 21px; align-items: center; min-width: 0; padding: 15px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.setup-open:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; border-radius: 9px; }
.setup-displays { position: relative; display: block; height: 125px; border: 1px solid #2b332e; border-radius: 6px; background: #111512; overflow: hidden; }
.setup-displays::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 27px; background: #222723; }
.setup-displays > small { position: absolute; z-index: 2; left: 10px; bottom: 8px; color: #7b857e; font: 700 7px var(--display); letter-spacing: .08em; }
.setup-displays i { position: absolute; z-index: 1; display: grid; place-items: center; border: 1px solid #404b53; border-radius: 3px; background: #22282d; color: #97a2a9; font: 600 8px var(--display); font-style: normal; }
.desk-displays i:first-child { width: 70px; height: 43px; left: 17px; top: 37px; }
.desk-displays i:nth-child(2) { width: 88px; height: 55px; right: 17px; top: 31px; border-color: var(--cyan); background: #0e3d53; color: var(--cyan-light); }
.sim-displays i { width: 139px; height: 62px; left: 50%; top: 24px; transform: translateX(-50%); border-color: #9a75ff; background: #261d4e; color: #d3c6ff; }
.setup-copy { display: block; min-width: 0; }
.setup-title { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; }
.setup-title strong { margin-right: auto; color: #eef2f4; font: 600 16px var(--display); }
.setup-title em, .setup-title b { padding: 3px 7px; border-radius: 5px; color: #aeb9c1; background: #252d33; font: 600 8px var(--display); font-style: normal; }
.setup-title b { color: #a7b1b8; }
.preview-setup.is-active .setup-title b { color: var(--cyan-light); background: rgba(32, 184, 240, .15); }
.setup-facts { display: grid; gap: 8px; }
.setup-facts small { display: flex; align-items: center; gap: 7px; overflow: hidden; color: #a8b2ac; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.fact-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #a980f7; }
.fact-windows { background: #e3ad60; }
.fact-display { background: var(--cyan); }
.setup-action { display: flex; flex-direction: column; align-items: stretch; justify-content: center; padding: 15px; border-left: 1px solid rgba(75, 87, 79, .38); text-align: center; }
.setup-action > small { color: #6f7b73; font: 700 7px var(--display); letter-spacing: .09em; }
.setup-action > strong { margin: 5px 0 14px; color: #aab4ad; font: 600 10px var(--display); }
.preview-setup.is-active .setup-action > strong { color: var(--cyan-light); }
.setup-apply { width: 100%; min-width: 82px; margin: 0; background: #282e29; color: #eef2ef; }
.preview-setup:not(.is-active) .setup-apply { background: var(--cyan); color: #061116; }

.preview-panel { margin-bottom: 20px; padding: 18px; border: 1px solid #303732; border-radius: 9px; background: #1a1e1b; }
.preview-panel p, .preview-section-heading p, .game-card p, .integration-cards p { margin: 4px 0 0; color: #919b94; font-size: 10px; line-height: 1.5; }
.detection-panel, .panel-title, .preview-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.preview-section-heading { margin: 0 0 13px; }
.preview-section-heading h4 { margin-bottom: 0; }
.preview-section-heading .preview-secondary { min-height: 34px; }
.game-list { display: grid; gap: 10px; }
.game-card { display: grid; grid-template-columns: 46px 1fr auto; gap: 15px; align-items: center; min-height: 90px; padding: 15px 16px; border: 1px solid #303732; border-radius: 9px; background: #1a1e1b; }
.game-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 9px; background: linear-gradient(145deg, #133b4c, #0d647f); color: #c8f3ff; font: 700 11px var(--display); }
.game-mark-alt { background: linear-gradient(145deg, #322451, #7961b8); color: #f0eaff; }
.game-card h4 { margin: 0; font-size: 12px; }
.game-card > div > span { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--cyan-light); font-size: 9px; }
.game-card > div > span i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }
.game-card > button { min-height: 31px; padding: 0 11px; border: 1px solid #3a423c; border-radius: 6px; background: #252a26; color: #dce2de; font: 600 9px var(--display); cursor: pointer; }

.integration-head > label { width: 225px; }
.integration-head label > span, .integration-fields label > span, .setup-identity label > span { display: block; margin-bottom: 6px; color: #7e8981; font: 700 7px var(--display); letter-spacing: .08em; }
.integration-head select, .integration-fields select, .integration-fields input, .setup-identity select, .setup-identity input { width: 100%; height: 34px; padding: 0 10px; border: 1px solid #384139; border-radius: 6px; background: #111512; color: #dce3de; font: 500 10px var(--display); }
.discord-panel { padding: 18px 18px 16px; }
.integration-fields { display: grid; grid-template-columns: 1fr 1fr 78px; gap: 12px; margin-top: 17px; }
.discord-panel > small { display: block; margin: 10px 0 13px; color: #78847c; font-size: 8px; }
.discord-panel > .preview-primary { float: right; min-height: 33px; }
.discord-panel::after { content: ""; display: block; clear: both; }
.integration-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.integration-cards article { min-height: 174px; padding: 17px; border: 1px solid #303732; border-radius: 9px; background: #1a1e1b; }
.integration-cards article > div { display: flex; align-items: flex-start; justify-content: space-between; }
.integration-cards article > div > b { padding: 3px 6px; border-radius: 4px; background: rgba(32, 184, 240, .12); color: var(--cyan-light); font: 700 7px var(--display); }
.integration-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: rgba(32, 184, 240, .12); color: var(--cyan-light); font: 700 9px var(--display); }
.integration-icon-mobile { background: rgba(148, 116, 246, .14); color: #d7cbff; }
.integration-cards h4 { margin: 14px 0 0; font-size: 13px; }
.integration-cards .preview-primary { min-height: 32px; margin-top: 14px; }

.preview-back { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; padding: 0; border: 0; background: transparent; color: #cbd4d9; font: 600 11px var(--display); cursor: pointer; }
.preview-back:hover { color: var(--cyan-light); }
.detail-head { align-items: center; margin-bottom: 8px; }
.detail-actions { display: flex; gap: 8px; }
.detail-head > div > span { display: flex; align-items: center; gap: 9px; }
.detail-head b { padding: 4px 7px; border-radius: 5px; background: rgba(32, 184, 240, .14); color: var(--cyan-light); font: 600 8px var(--display); }
.detail-tabs { display: flex; gap: 6px; margin-bottom: 24px; }
.detail-tabs button { min-height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: #20262b; color: #88949d; font: 600 10px var(--display); cursor: pointer; }
.detail-tabs button.is-on { background: var(--cyan); color: #061116; }
.setup-identity { display: grid; grid-template-columns: 1fr 155px 130px; gap: 13px; align-items: end; margin-bottom: 22px; padding: 16px; border: 1px solid #303732; border-radius: 8px; background: #1a1e1b; }
.setup-identity p { margin: 3px 0 0; color: #8e9991; font-size: 9px; }
.detail-section-head { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.detail-section-head h4 { margin-bottom: 3px; }
.detail-section-head p { margin: 0; color: #8b99a3; font-size: 10px; }
.detail-section-head > span { color: #96a6b0; font-size: 10px; }
.detail-monitor-stage { display: flex; align-items: flex-end; justify-content: center; min-height: 130px; margin-bottom: 16px; padding: 22px; border-radius: 8px; background: #101518; }
.detail-monitor { display: flex; flex-direction: column; justify-content: flex-end; width: 145px; height: 73px; padding: 9px; border: 1px solid #3a454d; border-radius: 5px; background: #151b1f; color: #dce2e5; }
.detail-monitor.primary { width: 178px; height: 94px; border-color: var(--cyan); background: #0e3a4f; }
.detail-monitor b { font: 600 9px var(--display); }
.detail-monitor small { color: #9cabb4; font-size: 7px; }
.detail-monitor-stage[data-detail-monitors="sim"] .secondary { display: none; }
.detail-monitor-stage[data-detail-monitors="sim"] .primary { width: 235px; border-color: #9b78ff; background: #281f50; }
.detail-devices { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; border-top: 1px solid #293138; }
.detail-devices li { display: grid; grid-template-columns: 8px 1fr auto; gap: 9px; align-items: center; min-height: 36px; border-bottom: 1px solid #242c31; font-size: 10px; }
.detail-devices i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }
.detail-devices strong { color: #e1e6e9; font-weight: 500; }
.detail-devices span { color: #9eacb5; }
.detail-devices .detail-audio i { background: #a77cff; }
.automation-card { display: grid; grid-template-columns: 38px 1fr auto; gap: 13px; align-items: center; min-height: 84px; margin-bottom: 10px; padding: 15px; border: 1px solid #2c353c; border-radius: 9px; background: #171d21; }
.automation-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: rgba(32, 184, 240, .12); color: var(--cyan-light); }
.automation-card h4 { margin-bottom: 4px; font-size: 13px; }
.automation-card p { margin: 0; color: #8f9ca5; font-size: 10px; }
.automation-card > b { color: var(--cyan-light); font: 600 8px var(--display); }
.automation-card kbd { font-size: 8px; }

.settings-group { margin-bottom: 26px; }
.settings-group > h4 { margin-bottom: 8px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 58px; border-bottom: 1px solid #293138; }
.setting-row > div { display: grid; gap: 3px; }
.setting-row strong { color: #e7ecef; font: 600 11px var(--display); }
.setting-row span { color: #93a1aa; font-size: 10px; }
.preview-toggle { position: relative; flex: 0 0 auto; width: 37px; height: 21px; padding: 0; border: 0; border-radius: 999px; background: #343d45; cursor: pointer; transition: background .22s ease; }
.preview-toggle i { position: absolute; width: 15px; height: 15px; left: 3px; top: 3px; border-radius: 50%; background: #8e9aa3; transition: transform .22s var(--ease), background .22s ease; }
.preview-toggle.is-on { background: var(--cyan); }
.preview-toggle.is-on i { background: #07151b; transform: translateX(16px); }
.preview-save { width: 100%; min-height: 40px; }

.preview-switching {
	position: absolute;
	inset: 41px 0 0;
	z-index: 8;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(7, 10, 12, .83);
	backdrop-filter: blur(8px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
}
.preview-window.is-switching .preview-switching { opacity: 1; visibility: visible; }
.preview-switching > span { width: 38px; height: 38px; margin-bottom: 15px; border: 3px solid rgba(32, 184, 240, .2); border-top-color: var(--cyan); border-radius: 50%; animation: preview-spin .75s linear infinite; }
.preview-switching strong { margin-bottom: 5px; color: #f1f5f7; font: 600 15px var(--display); }
.preview-switching small { color: #7f8d96; font-size: 10px; }
@keyframes preview-spin { to { transform: rotate(360deg); } }
.preview-toast { position: absolute; right: 18px; bottom: 17px; z-index: 10; max-width: 330px; padding: 10px 13px; border: 1px solid #315365; border-radius: 8px; background: #122733; color: #ccefff; font-size: 11px; box-shadow: 0 15px 35px -18px #000; opacity: 0; transform: translateY(9px); pointer-events: none; transition: opacity .22s ease, transform .22s var(--ease); }
.preview-toast.is-on { opacity: 1; transform: none; }

.safety {
	background: #0a0e10;
	overflow: hidden;
}

.safety::after {
	content: "";
	position: absolute;
	width: 780px;
	height: 780px;
	right: -350px;
	top: -200px;
	background: radial-gradient(circle, rgba(32, 184, 240, .09), transparent 66%);
	pointer-events: none;
}

.safety-layout {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: 90px;
	align-items: center;
}

.safety-stack { border-top: 1px solid var(--line); }

.safety-item {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 18px;
	padding: 28px 0;
	border-bottom: 1px solid var(--line);
}

.safety-item > span { padding-top: 4px; color: var(--cyan); font-family: var(--display); font-size: 10px; font-weight: 700; }
.safety-item h3 { margin-bottom: 8px; font-size: 21px; }
.safety-item p { margin-bottom: 0; color: var(--muted); font-size: 15.5px; }

kbd {
	display: inline-block;
	padding: 2px 6px;
	border: 1px solid #3b454e;
	border-bottom-width: 2px;
	border-radius: 5px;
	background: #181d21;
	color: #e7ecef;
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: 11px;
}

.faq { background: var(--bg); overflow: hidden; }
.faq-glow {
	position: absolute;
	width: 620px;
	height: 360px;
	top: -245px;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 50%;
	background: rgba(32, 184, 240, .13);
	filter: blur(95px);
	pointer-events: none;
}
.faq-inner { position: relative; max-width: 900px; }
.faq-intro { max-width: 690px; margin: 0 auto 30px; text-align: center; }
.faq-intro .eyebrow { justify-content: center; }
.faq-intro h2 { margin-bottom: 13px; }
.faq-intro > p:last-child { margin: 0; color: var(--muted); font-size: 17px; }
.faq-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 35px;
}
.faq-tab {
	position: relative;
	overflow: hidden;
	padding: 9px 14px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: transparent;
	color: var(--muted);
	font: 600 13px var(--display);
	cursor: pointer;
	transition: color .28s ease, border-color .28s ease;
}
.faq-tab::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, var(--cyan), #69d7ff);
	transform: translateY(105%);
	transition: transform .38s var(--ease);
}
.faq-tab span { position: relative; z-index: 1; }
.faq-tab:hover { color: var(--text); border-color: #45515a; }
.faq-tab.is-on { color: #031017; border-color: var(--cyan); }
.faq-tab.is-on::before { transform: translateY(0); }
.faq-tab:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(32, 184, 240, .22); }
.faq-panels { max-width: 760px; margin: 0 auto; }
.faq-panel { animation: faq-panel-in .35s var(--ease) both; }
.faq-panel[hidden] { display: none; }
@keyframes faq-panel-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.faq-panel details {
	margin-bottom: 12px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--surface);
	transition: border-color .25s ease, background .25s ease;
}
.faq-panel details[open] { border-color: #36444e; background: #13191d; }
.faq-panel summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	list-style: none;
	padding: 18px 19px;
	color: var(--muted);
	font-family: var(--display);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	outline: none;
	transition: color .2s ease;
}
.faq-panel summary::-webkit-details-marker { display: none; }
.faq-panel summary:hover, .faq-panel details[open] summary { color: var(--text); }
.faq-panel summary:focus-visible { border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(32, 184, 240, .55); }
.faq-plus {
	position: relative;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	color: currentColor;
	transition: transform .22s var(--ease);
}
.faq-plus::before, .faq-plus::after {
	content: "";
	position: absolute;
	left: 2px;
	top: 8px;
	width: 14px;
	height: 1.5px;
	border-radius: 2px;
	background: currentColor;
}
.faq-plus::after { transform: rotate(90deg); }
.faq-panel details[open] .faq-plus { transform: rotate(45deg); }
.accordion-panel {
	display: grid;
	grid-template-rows: 0fr;
	color: var(--muted);
	transition: grid-template-rows .28s var(--ease);
}
.faq-panel details[open] .accordion-panel { grid-template-rows: 1fr; }
.accordion-panel > div { overflow: hidden; }
.accordion-panel p { max-width: 65ch; margin: -1px 52px 18px 19px; color: var(--muted); font-size: 15px; }

.final {
	min-height: 600px;
	display: grid;
	place-items: center;
	text-align: center;
	overflow: hidden;
}

.final-glow {
	position: absolute;
	width: 960px;
	height: 650px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: radial-gradient(ellipse, rgba(32, 184, 240, .13), transparent 64%);
	pointer-events: none;
}

.final-inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.final-inner > img { margin-bottom: 25px; border-radius: 16px; box-shadow: 0 20px 45px -20px #000; }
.final .eyebrow { margin-bottom: 18px; }
.final h2 { max-width: 850px; font-size: clamp(38px, 5vw, 62px); }
.final-inner > p { max-width: 53ch; }
.install-note { margin-top: 23px !important; color: var(--faint) !important; font-size: 13px !important; }

.foot {
	padding: 34px 0;
	background: #080a0b;
	color: var(--faint);
}

.foot-inner {
	display: flex;
	align-items: center;
	gap: 28px;
}

.foot-brand { font-size: 14px; }
.foot-inner > p { margin: 0 auto 0 0; font-size: 13px; }
.foot nav { display: flex; gap: 20px; }
.foot nav a { color: var(--muted); font-size: 13px; }
.foot nav a:hover { color: var(--text); }

.js .reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.js .reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 1050px) {
	.hero { min-height: auto; padding: 76px 0 95px; }
	.hero-inner { grid-template-columns: 1fr; gap: 65px; }
	.hero-copy { max-width: 760px; }
	.hero-demo { width: min(680px, 100%); margin-inline: auto; }
	.moves-layout, .safety-layout, .faq-layout { gap: 55px; }
}

@media (max-width: 860px) {
	body { padding-bottom: 82px; }
	.nav { background: linear-gradient(180deg, rgba(9, 11, 13, .95), transparent); }
	.nav-inner { height: 66px; gap: 16px; }
	.nav-links {
		position: fixed;
		left: 50%;
		right: auto;
		top: auto;
		bottom: 16px;
		display: flex;
		align-items: center;
		flex-direction: row;
		gap: 3px;
		margin: 0;
		padding: 5px;
		border: 1px solid rgba(102, 117, 130, .42);
		border-radius: 999px;
		background: rgba(14, 17, 20, .9);
		box-shadow: 0 18px 45px -16px #000, inset 0 1px 0 rgba(255, 255, 255, .05);
		transform: translateX(-50%);
		opacity: 1;
		pointer-events: auto;
	}

	.nav-links a { width: 49px; min-height: 43px; padding: 0; border: 0; color: var(--muted); }
	.nav-label { display: none; }
	.nav-symbol { display: inline-block; }
	.nav-links a.is-active { color: var(--cyan-light); }
	.nav-lamp::before { top: -8px; }
	.nav-download { display: none; }
	.hero { padding-top: 122px; }
	.steps { grid-template-columns: 1fr; }
	.steps::before { display: none; }
	.step { min-height: 190px; }
	.bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 230px; }
	.bento-card { grid-column: span 1; }
	.bento-tall { grid-row: span 2; }
	.bento-wide { grid-column: span 2; }
	.moves-layout, .safety-layout, .faq-layout { grid-template-columns: 1fr; gap: 50px; }
	.moves-intro, .faq-intro { position: static; }
	.control-grid { grid-template-columns: 1fr 1fr; }
	.control-primary { grid-template-columns: 1fr; grid-column: 1 / -1; gap: 45px; }
	.control-card:last-child { grid-column: 1 / -1; }
	.pricing-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: 55px; }
	.preview-window { height: 790px; }
	.preview-layout { grid-template-columns: 168px 1fr; }
	.preview-brand { padding-inline: 13px; }
	.preview-brand strong { font-size: 12px; }
	.preview-nav { padding-inline: 14px; }
	.preview-status { margin-inline: 10px; }
	.preview-view { padding: 27px 24px 30px; }
	.preview-setup { grid-template-columns: 1fr 95px; }
	.setup-open { grid-template-columns: 145px 1fr; gap: 14px; }
	.integration-fields { grid-template-columns: 1fr 1fr; }
	.integration-fields label:last-child { grid-column: 1 / -1; width: 90px; }
	.setup-identity { grid-template-columns: 1fr 1fr; }
	.setup-identity > div { grid-column: 1 / -1; }
	.section { padding: 90px 0; }
}

@media (max-width: 620px) {
	.wrap { width: min(100% - 32px, var(--wrap)); }
	.nav-inner { height: 64px; }
	.nav-links { bottom: 12px; }
	.nav-links a { width: 48px; }
	.brand small { display: none; }
	.hero { padding: 112px 0 92px; }
	.hero-inner { gap: 52px; }
	h1 { font-size: clamp(39px, 12vw, 54px); }
	.lede { font-size: 17px; }
	.cta { align-items: stretch; flex-direction: column; gap: 17px; }
	.cta .btn { width: 100%; }
	.cta .text-link { justify-content: center; padding: 6px; }
	.trust-row { flex-direction: column; gap: 7px; }
	.demo-shell { min-height: 375px; }
	.demo-topbar { height: 43px; }
	.demo-body { grid-template-columns: 42px 1fr; min-height: 332px; }
	.demo-sidebar { gap: 17px; }
	.demo-content { padding: 24px 17px; }
	.demo-heading strong { font-size: 23px; }
	.monitor-stage { height: 130px; margin: 18px 0; }
	.demo-details { grid-template-columns: 1fr; gap: 5px; }
	.demo-details > div { grid-template-columns: 8px 1fr auto; grid-template-rows: 1fr; align-items: center; padding: 8px 9px; }
	.detail-dot { grid-row: auto; }
	.demo-details span, .demo-details strong { margin: 0; }
	.demo-complete { display: none; }
	.mode-switch { width: calc(100% - 24px); }
	.mode-button { flex: 1; min-width: 0; padding-inline: 8px; }
	.section { padding: 76px 0; }
	.section-heading { margin-bottom: 39px; }
	.section-heading h2, .moves-intro h2, .safety-copy h2, .faq-intro h2, .final h2 { font-size: clamp(31px, 9vw, 42px); }
	.section-heading > p:last-child, .moves-intro > p, .safety-copy > p, .final-inner > p { font-size: 16.5px; }
	.step { min-height: 175px; }
	.bento-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
	.bento-card, .bento-wide { grid-column: span 1; min-height: 260px; padding: 23px; }
	.bento-tall { grid-row: span 1; min-height: 390px; }
	.display-visual, .window-visual { min-height: 225px; }
	.control-grid { grid-template-columns: 1fr; }
	.control-primary, .control-card:last-child { grid-column: auto; }
	.control-primary { padding: 30px 24px; }
	.control-card { min-height: auto; }
	.deck-visual { grid-template-columns: repeat(2, minmax(0, 100px)); padding: 17px; transform: none; }
	.pricing { min-height: auto; }
	.pricing-layout { grid-template-columns: 1fr; gap: 48px; }
	.pricing-card { justify-self: start; }
	.comparison-plans { grid-template-columns: 1fr; overflow: visible; }
	.comparison-plan { min-height: 86px; }
	.showcase-note { align-items: flex-start; flex-direction: column; gap: 5px; }
	.preview-window { height: 780px; border-radius: 11px; }
	.preview-layout { grid-template-columns: 1fr; grid-template-rows: 66px 1fr; }
	.preview-sidebar { display: grid; grid-template-columns: auto 1fr; align-items: center; border-right: 0; border-bottom: 1px solid #2b333a; }
	.preview-brand { padding: 0 13px; }
	.preview-brand img { width: 28px; height: 28px; }
	.preview-brand strong, .preview-brand small, .preview-status { display: none; }
	.preview-sidebar nav { display: flex; justify-content: flex-end; padding-right: 8px; }
	.preview-nav { justify-content: center; width: 40px; min-height: 40px; padding: 0; border-radius: 7px; font-size: 0; }
	.preview-nav-icon { margin: 0; }
	.preview-nav.is-on::after { left: 9px; right: 9px; top: auto; bottom: -13px; width: auto; height: 2px; }
	.preview-view { padding: 21px 17px 25px; }
	.preview-page-head { margin-bottom: 20px; }
	.preview-page-head h3, .detail-head h3 { font-size: 25px; }
	.preview-page-head p, .detail-head p { font-size: 10px; }
	.preview-create { width: 36px; padding: 0; overflow: hidden; white-space: nowrap; color: transparent; }
	.preview-create span { color: #061116; font-size: 17px; }
	.preview-metrics { gap: 6px; }
	.preview-metrics > div { min-height: 74px; padding-inline: 10px; }
	.preview-metrics i { left: 10px; right: 10px; }
	.setup-open { grid-template-columns: 1fr; padding: 15px 12px; }
	.setup-displays { display: none; }
	.setup-title { flex-wrap: wrap; }
	.setup-title strong { flex-basis: calc(100% - 72px); }
	.setup-title em { display: none; }
	.preview-setup { grid-template-columns: 1fr 82px; min-height: 127px; }
	.setup-apply { min-width: 0; padding-inline: 9px; }
	.setup-action { padding: 10px; }
	.setup-action > strong { margin-bottom: 10px; }
	.detail-head { align-items: flex-start; }
	.detail-head .preview-primary { max-width: 92px; padding-inline: 10px; }
	.detail-monitor-stage { min-height: 120px; padding-inline: 10px; }
	.detail-monitor { width: 105px; }
	.detail-monitor.primary { width: 130px; }
	.detail-monitor-stage[data-detail-monitors="sim"] .primary { width: 190px; }
	.detail-devices li { grid-template-columns: 8px 1fr; padding: 7px 0; }
	.detail-devices span { grid-column: 2; }
	.automation-card { grid-template-columns: 32px 1fr; }
	.automation-card > b, .automation-card > kbd { grid-column: 2; justify-self: start; }
	.integration-head { display: grid; }
	.integration-head > label { width: 100%; }
	.integration-fields, .integration-cards { grid-template-columns: 1fr; }
	.integration-fields label:last-child { grid-column: auto; }
	.integration-cards article { min-height: 155px; }
	.game-card { grid-template-columns: 39px 1fr; }
	.game-mark { width: 38px; height: 38px; }
	.game-card > button { grid-column: 2; justify-self: start; }
	.setup-identity { grid-template-columns: 1fr; }
	.setup-identity > div { grid-column: auto; }
	.setting-row { align-items: flex-start; padding: 12px 0; }
	.setting-row > div { max-width: 70%; }
	.setting-row kbd, .setting-row .preview-secondary { align-self: center; font-size: 8px; }
	.safety-item { grid-template-columns: 32px 1fr; gap: 10px; }
	.foot-inner { align-items: flex-start; flex-direction: column; }
	.foot-inner > p { margin: 0; }
	.foot nav { flex-wrap: wrap; }
	.final { min-height: 560px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: .001ms !important;
	}
	.js .reveal { opacity: 1; transform: none; }
}