/* ==========================================================================
   GetCloseVia — landing theme
   Tokens switch on html[data-theme="dark"|"light"]. Components use tokens only.
   ========================================================================== */

/* Tokens ----------------------------------------------------------------- */
:root,
html[data-theme="dark"] {
	--bg: #070B14;
	--screen: #070B14;
	--panel: #0A0F1C;
	--panel2: #0D1322;
	--bezel: #1A2234;
	--ink: 255, 255, 255;
	--base: 10, 15, 28;
	--surface: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
	--field: rgba(7, 11, 20, .6);
	--inset: inset 0 1px 0 rgba(255, 255, 255, .07);
	--deep: 0 40px 80px -30px rgba(0, 0, 0, .8);
	--dot: rgba(255, 255, 255, .07);
	--t1: #F2F5FA;
	--t1b: #E3E8F0;
	--t2: #C9D1E0;
	--t3: #A3ADC2;
	--t4: #7A859E;
	--g1: #22D3EE;
	--g2: #8B5CF6;
	--onAccent: #06121A;
	--ctaGlow: rgba(99, 102, 241, .75);
	--live: #22D3EE;
	--cy: #67E8F9;
	--cy2: #A5F3FC;
	--cy3: #CFFAFE;
	--rd: #FCA5A5;
	--gr: #86EFAC;
	--vi: #C4B5FD;
	--vi2: #DDD6FE;
	--in: #A5B4FC;
	--in2: #C7D2FE;
	--leadBubble: rgba(255, 255, 255, .08);
	--aiBubble: rgba(34, 211, 238, .13);
	--aiBorder: rgba(34, 211, 238, .28);

	--sans: 'General Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	--grad: linear-gradient(90deg, var(--g1), var(--g2));
	color-scheme: dark;
}

html[data-theme="light"] {
	--bg: #F7F8FC;
	--screen: #FFFFFF;
	--panel: #FFFFFF;
	--panel2: #FFFFFF;
	--bezel: #E4E8F1;
	--ink: 15, 23, 42;
	--base: 255, 255, 255;
	--surface: #FFFFFF;
	--field: #FFFFFF;
	--inset: 0 1px 2px rgba(15, 23, 60, .05), 0 10px 30px -12px rgba(37, 99, 235, .14);
	--deep: 0 1px 3px rgba(15, 23, 60, .06), 0 30px 60px -28px rgba(37, 56, 140, .30);
	--dot: rgba(100, 116, 170, .20);
	--t1: #0B1220;
	--t1b: #1E293B;
	--t2: #334155;
	--t3: #475569;
	--t4: #64748B;
	--g1: #2563EB;
	--g2: #7C3AED;
	--onAccent: #FFFFFF;
	--ctaGlow: rgba(79, 70, 229, .45);
	--live: #0891B2;
	--cy: #0E7490;
	--cy2: #0E7490;
	--cy3: #155E75;
	--rd: #B91C1C;
	--gr: #15803D;
	--vi: #6D28D9;
	--vi2: #6D28D9;
	--in: #4338CA;
	--in2: #4338CA;
	--leadBubble: #EEF1F7;
	--aiBubble: rgba(37, 99, 235, .08);
	--aiBorder: rgba(37, 99, 235, .25);
	color-scheme: light;
	background: #F7F8FC;
}

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

html {
	background: var(--bg);
	scroll-behavior: smooth;
	scroll-padding-top: 80px;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--sans);
	color: var(--t1);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
p, h1, h2, h3, figure, blockquote { margin: 0; }

.skip-link {
	position: absolute;
	left: 12px;
	top: -60px;
	z-index: 100;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--panel2);
	color: var(--t1);
}
.skip-link:focus { top: 12px; }

:focus-visible {
	outline: 2px solid var(--cy);
	outline-offset: 2px;
}

.page {
	position: relative;
	min-height: 100vh;
	overflow-x: clip;
	color: var(--t1);
	background-color: var(--bg);
	background-image: radial-gradient(var(--dot) 1px, transparent 1px);
	background-size: 24px 24px;
	transition: background-color .3s, color .3s;
}

/* Typography ------------------------------------------------------------- */
.eyebrow {
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--t4);
}

.h1 {
	font-size: clamp(40px, 6vw, 68px);
	line-height: .98;
	letter-spacing: -.045em;
	font-weight: 600;
	text-wrap: balance;
}

.h2 {
	font-size: clamp(34px, 5vw, 52px);
	line-height: 1.04;
	letter-spacing: -.04em;
	font-weight: 600;
	text-wrap: balance;
}
.h2--xl { font-size: clamp(36px, 5.5vw, 60px); line-height: 1.02; letter-spacing: -.045em; }
.h2--final { font-size: clamp(38px, 6vw, 64px); line-height: 1; letter-spacing: -.045em; }

.h3 {
	font-size: 20px;
	line-height: 1.25;
	letter-spacing: -.02em;
	font-weight: 600;
}
.h3--lg { font-size: 22px; line-height: 1.2; }

.body-l {
	font-size: 18px;
	line-height: 1.6;
	color: var(--t2);
	text-wrap: pretty;
}

.body {
	font-size: 15px;
	line-height: 1.6;
	color: var(--t3);
}

.mono { font-family: var(--mono); }
.mono-sm {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.muted { color: var(--t3); }
.faint { color: var(--t4); }
.red { color: var(--rd); }
.green { color: var(--gr); }
.cyan2 { color: var(--cy2); }
.nowrap { white-space: nowrap; }

.grad-text {
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Layout ----------------------------------------------------------------- */
.section {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 96px 20px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.section--wide { max-width: 1280px; }
.section--narrow { max-width: 880px; }
.section--faq { max-width: 880px; }

.section__head {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 760px;
}
.section__head--wide { max-width: 820px; }
.section__head--center {
	max-width: 860px;
	margin: 0 auto;
	gap: 20px;
	text-align: center;
	align-items: center;
}
.section__head--center .body-l { max-width: 640px; }

.section__cta {
	position: relative;
	display: flex;
	justify-content: center;
}

.grid {
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 600px) {
	.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
	.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Background washes */
.wash {
	position: absolute;
	pointer-events: none;
	background: radial-gradient(closest-side, rgba(34, 211, 238, .10), rgba(139, 92, 246, .06) 55%, transparent);
}
.wash--top { top: -260px; left: 30%; transform: translateX(-50%); width: 900px; height: 620px; }
.wash--phone {
	top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 560px; height: 560px; max-width: 140%;
	background: radial-gradient(closest-side, rgba(34, 211, 238, .18), rgba(139, 92, 246, .12) 50%, transparent);
}
.wash--how {
	top: 40%; left: 50%; transform: translateX(-50%);
	width: 1000px; height: 400px; max-width: 100%;
	background: radial-gradient(closest-side, rgba(99, 102, 241, .10), transparent);
}
.wash--team {
	top: 30%; left: 50%; transform: translateX(-50%);
	width: 1100px; height: 700px; max-width: 120%;
	background: radial-gradient(closest-side, rgba(34, 211, 238, .10), rgba(139, 92, 246, .08) 50%, transparent);
}
.wash--founding {
	top: -200px; left: 50%; transform: translateX(-50%);
	width: 700px; height: 400px;
	background: radial-gradient(closest-side, rgba(34, 211, 238, .2), rgba(139, 92, 246, .12) 50%, transparent);
}
.wash--demo {
	top: 50%; right: 10%; transform: translateY(-50%);
	width: 640px; height: 640px; max-width: 100%;
	background: radial-gradient(closest-side, rgba(34, 211, 238, .14), rgba(139, 92, 246, .10) 50%, transparent);
}

/* Buttons ---------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 0;
	cursor: pointer;
	font-weight: 600;
	color: var(--onAccent);
	background: var(--grad);
	box-shadow: 0 0 0 1px rgba(var(--ink), .14) inset, 0 10px 40px -10px var(--ctaGlow);
	transition: transform .2s, box-shadow .2s, opacity .2s;
	white-space: nowrap;
}
.btn:hover {
	color: var(--onAccent);
	transform: translateY(-1px);
	box-shadow: 0 0 0 1px rgba(var(--ink), .22) inset, 0 14px 48px -8px rgba(99, 102, 241, .95);
}
.btn--lg { height: 56px; padding: 0 28px; border-radius: 14px; font-size: 16px; }
.btn--md {
	height: 40px; padding: 0 18px; border-radius: 10px; font-size: 14px;
	box-shadow: 0 0 0 1px rgba(var(--ink), .12) inset, 0 6px 24px -6px var(--ctaGlow);
}
.btn--md:hover { transform: none; box-shadow: 0 0 0 1px rgba(var(--ink), .2) inset, 0 8px 32px -4px rgba(99, 102, 241, .85); }
.btn--calc { height: 52px; padding: 0 24px; border-radius: 14px; font-size: 16px; }
.btn--bar {
	height: 48px; padding: 0 20px; border-radius: 12px; font-size: 15px;
	box-shadow: 0 6px 24px -6px rgba(99, 102, 241, .6);
}
.btn--block { width: 100%; }
.btn__arrow { font-size: 18px; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 500;
	color: var(--t1);
	border-bottom: 1px solid rgba(var(--ink), .25);
	padding-bottom: 2px;
	transition: color .2s, border-color .2s;
}
.text-link:hover { color: var(--cy); border-color: var(--cy); }

/* Pills, tags, chips ----------------------------------------------------- */
.pulse {
	display: inline-block;
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 99px;
	background: var(--live);
	animation: rlPulse 2s infinite;
}
.pulse--sm { width: 6px; height: 6px; }

.badge-pill {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 10px;
	padding: 8px 14px 8px 12px;
	border-radius: 999px;
	background: rgba(var(--ink), .04);
	border: 1px solid rgba(var(--ink), .09);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--t2);
}

.tag {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: 999px;
	white-space: nowrap;
}
.tag--red {
	color: var(--rd);
	background: rgba(248, 113, 113, .1);
	border: 1px solid rgba(248, 113, 113, .3);
}

.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 5px 9px;
	border-radius: 999px;
	border: 1px solid rgba(var(--ink), .12);
	color: var(--t2);
}
.pill--cyan { padding: 6px 10px; border-color: rgba(34, 211, 238, .3); color: var(--cy3); }
.quote .pill { align-self: flex-start; padding: 5px 10px; letter-spacing: .1em; }
.quote .pill--cyan { color: var(--cy); border-color: rgba(var(--ink), .12); }
.quote .pill--indigo { color: var(--in); }
.quote .pill--violet { color: var(--vi); }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 99px; }
.dot--red { background: #F87171; box-shadow: 0 0 8px rgba(248, 113, 113, .8); }
.dot--cyan { background: #22D3EE; box-shadow: 0 0 8px rgba(34, 211, 238, .8); }

.avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 999px;
	background: rgba(var(--ink), .08);
	font-weight: 600;
	color: var(--t2);
}
.avatar--28 { width: 28px; height: 28px; font-size: 10px; }
.avatar--34 { width: 34px; height: 34px; font-size: 12px; }
.avatar--40 { width: 40px; height: 40px; font-size: 13px; }

.float-chip {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 10px 14px;
	border-radius: 12px;
	background: rgba(var(--base), .85);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(103, 232, 249, .4);
	box-shadow: var(--inset), 0 12px 40px -10px rgba(34, 211, 238, .55);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}
.float-chip__label { color: var(--t3); }
.float-chip .grad-text { font-weight: 500; }
.float-chip--red {
	color: var(--rd);
	border-color: rgba(248, 113, 113, .45);
	box-shadow: var(--inset), 0 12px 40px -10px rgba(248, 113, 113, .55);
}
.float-chip--violet {
	border-color: rgba(167, 139, 250, .45);
	box-shadow: var(--inset), 0 12px 40px -10px rgba(139, 92, 246, .6);
}

/* Cards ------------------------------------------------------------------ */
.card {
	position: relative;
	padding: 24px;
	border-radius: 20px;
	background: var(--surface);
	border: 1px solid rgba(var(--ink), .09);
	box-shadow: var(--inset);
	display: flex;
	flex-direction: column;
	gap: 20px;
	transition: border-color .2s, box-shadow .2s;
}
.hover--red:hover { border-color: rgba(248, 113, 113, .35); box-shadow: var(--inset), 0 20px 60px -24px rgba(248, 113, 113, .35); }
.hover--cyan:hover { border-color: rgba(103, 232, 249, .35); box-shadow: var(--inset), 0 20px 60px -24px rgba(34, 211, 238, .4); }
.hover--indigo:hover { border-color: rgba(129, 140, 248, .4); box-shadow: var(--inset), 0 20px 60px -24px rgba(99, 102, 241, .45); }
.hover--violet:hover { border-color: rgba(167, 139, 250, .4); box-shadow: var(--inset), 0 20px 60px -24px rgba(139, 92, 246, .45); }

.card--problem { justify-content: space-between; }
.card__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card__body { font-size: 17px; line-height: 1.5; color: var(--t1b); text-wrap: pretty; }
.card--compact { padding: 22px; gap: 16px; }
.card__text { font-size: 15px; line-height: 1.55; color: var(--t1b); }

/* Nav -------------------------------------------------------------------- */
.nav-wrap {
	position: sticky;
	top: 0;
	z-index: 20;
	padding: 12px 16px;
}

.nav {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 8px 8px 8px 18px;
	border-radius: 16px;
	background: rgba(var(--base), .6);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border: 1px solid rgba(var(--ink), .08);
	box-shadow: var(--inset);
}

.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--t1); }
.logo:hover { color: var(--t1); }
.logo__mark {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: var(--t1);
	box-shadow: inset -6px -6px 0 0 rgba(34, 211, 238, .9);
}
.logo__name { font-weight: 600; font-size: 17px; letter-spacing: -.02em; }
.logo__img { display: block; height: 28px; width: auto; }

.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__links a {
	padding: 8px 14px;
	border-radius: 8px;
	font-size: 14px;
	color: var(--t3);
	transition: color .2s, background .2s;
}
.nav__links a:hover { color: var(--t1); background: rgba(var(--ink), .05); }

.nav__actions { display: flex; align-items: center; gap: 8px; }

.theme-switch {
	display: flex;
	padding: 3px;
	gap: 2px;
	border-radius: 11px;
	border: 1px solid rgba(var(--ink), .1);
}
.theme-switch button {
	all: unset;
	cursor: pointer;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--t4);
	transition: color .2s, background .2s;
}
.theme-switch button:focus-visible { outline: 2px solid var(--cy); outline-offset: 1px; }
.theme-switch button[aria-pressed="true"] { color: var(--t1); background: rgba(var(--ink), .1); }

.ico-sun {
	width: 6px; height: 6px; border-radius: 99px;
	background: currentColor;
	outline: 1.5px dashed currentColor;
	outline-offset: 2.5px;
}
.ico-moon {
	width: 13px; height: 13px; border-radius: 99px;
	box-shadow: inset 4px -3px 0 0 currentColor;
	transform: rotate(-20deg);
}
.ico-system {
	width: 14px; height: 10px; border-radius: 2.5px;
	border: 1.5px solid currentColor;
}

.nav__burger {
	display: none;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	border: 1px solid rgba(var(--ink), .1);
	background: transparent;
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 0;
}
.nav__burger span {
	width: 16px;
	height: 1.5px;
	background: var(--t1);
	transition: transform .2s;
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.mobile-menu {
	max-width: 1200px;
	margin: 8px auto 0;
	padding: 8px;
	border-radius: 16px;
	background: rgba(var(--base), .92);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border: 1px solid rgba(var(--ink), .08);
	box-shadow: var(--inset), var(--deep);
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a:not(.btn) {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 14px;
	border-radius: 10px;
	font-size: 16px;
	color: var(--t2);
}
.mobile-menu a:not(.btn):hover { background: rgba(var(--ink), .05); color: var(--t1); }
.mobile-menu .btn { margin-top: 6px; }

@media (max-width: 819px) {
	.nav__links,
	.nav__cta { display: none; }
	.nav__burger { display: flex; }
}
@media (min-width: 820px) {
	.mobile-menu { display: none !important; }
}

/* Hero ------------------------------------------------------------------- */
.hero {
	padding: 40px 20px 96px;
	flex-direction: row;
	flex-wrap: wrap-reverse;
	align-items: center;
	gap: 56px 48px;
}
.hero__text {
	flex: 1 1 480px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.hero__sub { max-width: 560px; }
.hero__ctas {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
	padding-top: 4px;
}
.hero__visual {
	flex: 1 1 360px;
	min-width: 0;
	display: flex;
	justify-content: center;
	position: relative;
}

.phone-wrap { position: relative; width: min(100%, 340px); }
.phone {
	position: relative;
	height: 640px;
	border-radius: 48px;
	padding: 10px;
	background: linear-gradient(180deg, var(--bezel), var(--panel2));
	border: 1px solid rgba(var(--ink), .12);
	box-shadow: var(--inset), var(--deep), 0 0 60px -20px rgba(99, 102, 241, .4);
}
.phone__screen {
	height: 100%;
	border-radius: 39px;
	overflow: hidden;
	background: var(--screen);
	display: flex;
	flex-direction: column;
}
.phone__status {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 26px 6px;
	font-size: 13px;
	font-weight: 600;
}
.phone__island { width: 90px; height: 26px; border-radius: 999px; background: #000; }
.phone__net { font-size: 11px; color: var(--t3); font-weight: 400; }
.phone__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 10px 16px 12px;
	border-bottom: 1px solid rgba(var(--ink), .07);
}
.phone__contact { display: flex; align-items: center; gap: 10px; min-width: 0; }
.phone__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.phone__name { font-size: 14px; font-weight: 600; }
.phone__meta { letter-spacing: .06em; color: var(--t4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone__ai { display: flex; align-items: center; gap: 6px; color: var(--cy); flex-shrink: 0; }

.phone__thread {
	flex: 1;
	min-height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 8px;
	padding: 12px 12px 14px;
}
.phone__day { align-self: center; letter-spacing: .08em; color: var(--t4); padding-bottom: 4px; }

.bubble {
	max-width: 82%;
	padding: 9px 13px;
	font-size: 13.5px;
	line-height: 1.4;
	animation: rlIn .35s ease-out both;
}
.bubble--lead {
	align-self: flex-start;
	border-radius: 16px 16px 16px 4px;
	background: var(--leadBubble);
}
.bubble--ai {
	align-self: flex-end;
	max-width: 84%;
	border-radius: 16px 16px 4px 16px;
	background: var(--aiBubble);
	border: 1px solid var(--aiBorder);
}
.bubble--typing { display: flex; align-items: center; padding: 11px 14px; height: 36px; }
.bubble--typing i {
	width: 6px;
	height: 6px;
	margin: 0 2px;
	border-radius: 99px;
	background: var(--cy2);
	animation: rlType 1.2s infinite ease-in-out;
}
.bubble--typing i:nth-child(2) { animation-delay: .15s; }
.bubble--typing i:nth-child(3) { animation-delay: .3s; }

.booked-card {
	align-self: stretch;
	margin-top: 2px;
	padding: 10px 12px;
	border-radius: 14px;
	background: rgba(74, 222, 128, .07);
	border: 1px solid rgba(74, 222, 128, .28);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	animation: rlIn .35s ease-out both;
}
.booked-card__main { display: flex; flex-direction: column; gap: 2px; }
.booked-card__label { color: var(--gr); }
.booked-card__time { font-size: 13px; font-weight: 500; }
.booked-card__with { letter-spacing: .06em; color: var(--t3); }

.phone__input { padding: 8px 12px 18px; display: flex; }
.phone__input span {
	flex: 1;
	height: 36px;
	border-radius: 999px;
	border: 1px solid rgba(var(--ink), .1);
	display: flex;
	align-items: center;
	padding: 0 14px;
	font-size: 13px;
	color: var(--t4);
}

.float-chip--hero {
	position: absolute;
	top: -18px;
	right: 18px;
	z-index: 2;
	padding: 9px 14px;
	background: rgba(var(--base), .8);
	border-color: rgba(103, 232, 249, .35);
	box-shadow: var(--inset), 0 12px 40px -10px rgba(34, 211, 238, .5);
	opacity: 0;
	visibility: hidden;
}
.float-chip--hero.is-visible { opacity: 1; visibility: visible; animation: rlChip .4s ease-out both; }

@media (max-width: 819px) {
	.phone { height: 540px; }
}

/* Problem / leakage flow ------------------------------------------------- */
.problem { gap: 48px; }

.flow {
	position: relative;
	overflow: hidden;
	padding: clamp(20px, 4vw, 40px);
	border-radius: 24px;
	background: var(--surface);
	border: 1px solid rgba(var(--ink), .09);
	box-shadow: var(--inset);
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.flow__wash { position: absolute; pointer-events: none; }
.flow__wash--red { right: -120px; top: -120px; width: 360px; height: 360px; background: radial-gradient(closest-side, rgba(248, 113, 113, .14), transparent); }
.flow__wash--cyan { left: 20%; bottom: -180px; width: 520px; height: 360px; background: radial-gradient(closest-side, rgba(34, 211, 238, .16), transparent); }
.flow__head {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.flow__legend { display: flex; gap: 16px; flex-wrap: wrap; }
.flow__legend span { display: flex; align-items: center; gap: 6px; }

.flow__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 12px 20px;
}
.flow__funnel { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.flow__bar {
	height: 52px;
	min-width: 80px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--t2);
	white-space: nowrap;
	overflow: hidden;
}
.flow__bar--0 { background: rgba(var(--ink), .07); border: 1px solid rgba(var(--ink), .12); color: var(--t1b); }
.flow__bar--1 { background: rgba(var(--ink), .055); border: 1px solid rgba(var(--ink), .1); }
.flow__bar--2 { background: rgba(var(--ink), .04); border: 1px solid rgba(var(--ink), .09); }
.flow__bar--3 { background: var(--surface); border: 1px solid rgba(var(--ink), .08); }

.flow__leaks {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-left: 22px;
}
.flow__line {
	position: absolute;
	left: 6px;
	top: 26px;
	bottom: -12px;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(180deg, rgba(248, 113, 113, .15), rgba(248, 113, 113, .5) 60%, rgba(34, 211, 238, .8));
}
.flow__line i {
	position: absolute;
	left: -3px;
	width: 8px;
	height: 8px;
	border-radius: 99px;
	opacity: 0;
	animation: rlFall 3.2s linear infinite;
}
.flow__line i:nth-child(2) { animation-delay: .8s; }
.flow__line i:nth-child(3) { animation-delay: 1.6s; }
.flow__line i:nth-child(4) { animation-delay: 2.4s; }

.flow__leak { height: 52px; display: flex; align-items: center; }
.leak-tag {
	padding: 8px 12px;
	border-radius: 10px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .08em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--rd);
	background: rgba(248, 113, 113, .1);
	border: 1px solid rgba(248, 113, 113, .4);
	box-shadow: 0 0 24px -6px rgba(248, 113, 113, .6);
}

.flow__catch {
	grid-column: 1 / -1;
	padding: 18px 20px;
	border-radius: 16px;
	background: rgba(34, 211, 238, .08);
	border: 1px solid rgba(34, 211, 238, .4);
	box-shadow: var(--inset), 0 0 48px -12px rgba(34, 211, 238, .55);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.flow__catch-label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cy2);
}
.flow__pills { display: flex; gap: 8px; flex-wrap: wrap; }

/* How it works ----------------------------------------------------------- */
.how { padding-bottom: 128px; gap: 56px; }

.steps { position: relative; }
.steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}
.steps__line {
	position: absolute;
	border-radius: 2px;
	opacity: .85;
	box-shadow: 0 0 16px rgba(99, 102, 241, .7);
	top: 24px;
	bottom: 24px;
	left: 23px;
	width: 2px;
	background: linear-gradient(180deg, var(--g1), var(--g2));
}
.steps__line i { display: none; }

.step { position: relative; display: flex; flex-direction: row; gap: 20px; }
.step__num {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--panel2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mono);
	font-size: 13px;
	position: relative;
	z-index: 1;
}
.step__num--cyan { border: 1px solid rgba(103, 232, 249, .5); box-shadow: 0 0 20px -2px rgba(34, 211, 238, .55), var(--inset); color: var(--cy2); }
.step__num--violet { border: 1px solid rgba(167, 139, 250, .5); box-shadow: 0 0 20px -2px rgba(139, 92, 246, .55), var(--inset); color: var(--vi2); }
.step__card { flex: 1; min-width: 0; padding: 22px; gap: 12px; }
.step__card .body { line-height: 1.55; }
.step__meta { color: var(--t3); }
.step__meta.is-accent { color: var(--cy); }

@media (min-width: 820px) {
	.steps__list { grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); }
	.step { flex-direction: column; }
	.steps__line {
		top: 24px;
		bottom: auto;
		left: 24px;
		right: 24px;
		width: auto;
		height: 2px;
		background: var(--grad);
	}
	.steps__line i {
		display: block;
		position: absolute;
		top: -3px;
		width: 40px;
		height: 8px;
		margin-left: -20px;
		border-radius: 99px;
		background: radial-gradient(closest-side, #fff, rgba(165, 243, 252, .6), transparent);
		animation: rlTravelX 4s linear infinite;
	}
}

/* Pillars ---------------------------------------------------------------- */
.pillars { padding-top: 32px; gap: 32px; }
.pillar { padding: 28px; gap: 18px; }

.icon-tile {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.icon-tile::before { content: ""; display: flex; }
.icon-tile i { position: absolute; }
.icon-tile { position: relative; }

.icon-tile--circle { background: rgba(34, 211, 238, .08); border: 1px solid rgba(34, 211, 238, .35); box-shadow: 0 0 28px -6px rgba(34, 211, 238, .6); }
.icon-tile--circle::before { width: 20px; height: 20px; border-radius: 99px; border: 2px solid var(--cy); box-sizing: border-box; }
.icon-tile--circle i { width: 6px; height: 6px; border-radius: 99px; background: var(--cy2); box-shadow: 0 0 8px #22D3EE; }

.icon-tile--square { background: rgba(99, 102, 241, .08); border: 1px solid rgba(129, 140, 248, .4); box-shadow: 0 0 28px -6px rgba(99, 102, 241, .65); }
.icon-tile--square::before { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--in); box-sizing: border-box; }
.icon-tile--square i { width: 6px; height: 6px; border-radius: 2px; background: var(--in2); box-shadow: 0 0 8px #818CF8; }

.icon-tile--diamond { background: rgba(139, 92, 246, .08); border: 1px solid rgba(167, 139, 250, .4); box-shadow: 0 0 28px -6px rgba(139, 92, 246, .65); }
.icon-tile--diamond::before { width: 14px; height: 14px; transform: rotate(45deg); border: 2px solid var(--vi); box-sizing: border-box; }
.icon-tile--diamond i { width: 4px; height: 4px; transform: rotate(45deg); background: var(--vi2); box-shadow: 0 0 8px #A78BFA; }

/* Team view / dashboard -------------------------------------------------- */
.team { padding-bottom: 128px; gap: 56px; }

.dash-chips { position: relative; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.dash-chips--row .float-chip {
	padding: 8px 12px;
	border-radius: 10px;
	letter-spacing: .08em;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	color: var(--t2);
	gap: 4px;
}
.dash-chips--row .float-chip__label { color: var(--t2); }
.dash-chips--row .float-chip--a { border-color: rgba(103, 232, 249, .35); }
.dash-chips--row .float-chip--a .grad-text { background: none; color: var(--cy); }
.dash-chips--row .float-chip--b { border-color: rgba(248, 113, 113, .4); color: var(--rd); }
.dash-chips--row .float-chip--c { border-color: rgba(167, 139, 250, .4); }
.dash-chips--row .float-chip--c .grad-text { background: none; color: var(--vi); }
.dash-chips--float { display: none; }

@media (min-width: 1100px) {
	.dash-chips--row { display: none; }
	.dash-chips--float { display: block; position: static; }
	.dash-chips--float .float-chip { position: absolute; }
	.dash-chips--float .float-chip--a { top: -20px; left: 6%; background: rgba(var(--base), .8); }
	.dash-chips--float .float-chip--b { top: -20px; right: 6%; }
	.dash-chips--float .float-chip--c { bottom: -20px; left: 30%; }
}

.dash-wrap { position: relative; }
.dash {
	border-radius: 22px;
	padding: 1px;
	background: linear-gradient(180deg, rgba(var(--ink), .16), rgba(var(--ink), .04));
	box-shadow: var(--deep), 0 0 80px -30px rgba(99, 102, 241, .5);
}
.dash__inner { border-radius: 21px; background: var(--panel); overflow: hidden; }
.dash__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 14px 18px;
	border-bottom: 1px solid rgba(var(--ink), .07);
}
.dash__title { display: flex; align-items: center; gap: 14px; min-width: 0; flex-wrap: wrap; }
.dash__dots { display: flex; gap: 6px; }
.dash__dots i { width: 10px; height: 10px; border-radius: 99px; background: rgba(var(--ink), .12); }
.dash__name { font-size: 14px; font-weight: 600; }

.segmented {
	display: flex;
	padding: 3px;
	border-radius: 10px;
	background: rgba(var(--ink), .04);
	border: 1px solid rgba(var(--ink), .08);
}
.segmented button {
	all: unset;
	cursor: pointer;
	padding: 6px 12px;
	border-radius: 7px;
	font-size: 12px;
	font-weight: 500;
	color: var(--t4);
	transition: color .2s, background .2s;
}
.segmented button:focus-visible { outline: 2px solid var(--cy); }
.segmented button[aria-selected="true"] { color: var(--t1); background: rgba(var(--ink), .1); }

.dash__kpis {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-bottom: 1px solid rgba(var(--ink), .07);
}
.kpi {
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	border-right: 1px solid rgba(var(--ink), .06);
}
.kpi__value { font-size: 28px; font-weight: 600; letter-spacing: -.03em; align-self: flex-start; line-height: 1.2; }
.kpi__value--gradient { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi__value--alert { color: var(--rd); }

@media (max-width: 819px) {
	.kpi:nth-child(2n) { border-right: 0; }
	.kpi:nth-child(-n+2) { border-bottom: 1px solid rgba(var(--ink), .06); }
}
@media (min-width: 820px) {
	.dash__kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.kpi:last-child { border-right: 0; }
}

.dash__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1px;
	background: rgba(var(--ink), .06);
}
@media (min-width: 820px) {
	.dash__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

.panel {
	background: var(--panel);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}
.panel__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel__title { font-size: 14px; font-weight: 600; }

.heat-legend { display: flex; align-items: center; gap: 6px; letter-spacing: .08em; text-transform: none; }
.heat-legend i { width: 12px; height: 12px; border-radius: 3px; }
.heat-1 { background: rgba(34, 211, 238, .85); box-shadow: 0 0 10px -2px rgba(34, 211, 238, .7); }
.heat-2 { background: rgba(34, 211, 238, .45); }
.heat-3 { background: rgba(34, 211, 238, .18); }
.heat-4 { background: rgba(248, 113, 113, .55); box-shadow: 0 0 10px -2px rgba(248, 113, 113, .6); }
.heat-legend .heat-1,
.heat-legend .heat-4 { box-shadow: none; }

.heatmap { display: flex; flex-direction: column; gap: 4px; }
.heatmap__row,
.heatmap__axis {
	display: grid;
	grid-template-columns: 28px repeat(12, minmax(0, 1fr));
	gap: 4px;
	align-items: center;
}
.heatmap__row .mono-sm { letter-spacing: 0; }
.heatmap__row i { height: 22px; border-radius: 4px; }
.heatmap__axis { grid-template-columns: 28px repeat(4, minmax(0, 1fr)); padding-top: 4px; letter-spacing: 0; }

.leaderboard { display: flex; flex-direction: column; gap: 10px; }
.leader {
	display: grid;
	grid-template-columns: 16px 28px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
}
.leader__main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.leader__name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar { display: block; height: 4px; border-radius: 99px; background: rgba(var(--ink), .06); }
.bar i { display: block; height: 4px; border-radius: 99px; background: rgba(34, 211, 238, .55); }
.leader--top .bar i { background: var(--grad); }
.leader--slow .bar i { background: rgba(248, 113, 113, .6); }
.leader__stats { display: flex; gap: 10px; letter-spacing: 0; text-transform: none; }
.leader__rt { color: var(--t3); }
.leader--slow .leader__rt { color: var(--rd); }
.leader__booked { color: var(--t1); min-width: 18px; text-align: right; }

.ignored { display: flex; flex-direction: column; gap: 8px; }
.ignored__item {
	padding: 12px;
	border-radius: 12px;
	background: var(--surface);
	border: 1px solid rgba(var(--ink), .08);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ignored__item.is-hot {
	background: rgba(248, 113, 113, .06);
	border-color: rgba(248, 113, 113, .3);
	box-shadow: 0 0 24px -10px rgba(248, 113, 113, .6);
}
.ignored__row { display: flex; justify-content: space-between; gap: 8px; }
.ignored__row .mono-sm { letter-spacing: 0; }
.ignored__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ignored__name { font-size: 13px; font-weight: 500; }
.ignored__detail { font-size: 11px; color: var(--t3); }
.ignored__reassign {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-top: 8px;
	border-top: 1px solid rgba(var(--ink), .06);
}
.ignored__reassign .mono-sm:first-child { display: flex; align-items: center; gap: 6px; letter-spacing: .08em; }
.countdown { color: var(--t1); letter-spacing: 0; }

.src-legend { display: flex; gap: 12px; letter-spacing: .08em; }
.src-legend span { display: flex; align-items: center; gap: 5px; }
.sq { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.sq--leads { background: rgba(var(--ink), .18); }
.sq--closings { background: #8B5CF6; }

.sources { display: flex; flex-direction: column; gap: 12px; }
.source {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) 92px;
	gap: 12px;
	align-items: center;
}
.source__name { display: flex; flex-direction: column; gap: 2px; font-size: 12px; font-weight: 500; }
.source__name .mono-sm { letter-spacing: 0; font-weight: 400; }
.source__bars { display: flex; flex-direction: column; gap: 3px; }
.source__bars i { display: block; height: 6px; border-radius: 99px; }
.source__leads { background: rgba(var(--ink), .14); }
.source__closings { background: rgba(139, 92, 246, .7); }
.source.is-top .source__closings { background: var(--grad); box-shadow: 0 0 12px rgba(99, 102, 241, .7); }
.source__stats { display: flex; justify-content: flex-end; gap: 8px; letter-spacing: 0; text-transform: none; color: var(--t1); }

/* Testimonials ----------------------------------------------------------- */
.quote { padding: 28px; gap: 28px; justify-content: space-between; }
.quote__top { display: flex; flex-direction: column; gap: 18px; }
.quote blockquote {
	font-size: 18px;
	line-height: 1.55;
	letter-spacing: -.01em;
	color: var(--t1);
	text-wrap: pretty;
}
.quote figcaption {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 18px;
	border-top: 1px solid rgba(var(--ink), .08);
}
.quote__who { display: flex; flex-direction: column; gap: 2px; }
.quote__name { font-size: 14px; font-weight: 600; }
.quote__who .mono-sm { letter-spacing: .06em; }

/* Back office ------------------------------------------------------------ */
.datatable {
	padding: 12px;
	border-radius: 12px;
	background: var(--surface);
	border: 1px solid rgba(var(--ink), .07);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.datatable--alert { background: rgba(248, 113, 113, .05); border-color: rgba(248, 113, 113, .25); }
.datatable__row {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.datatable__row span:first-child { color: var(--t4); }
.datatable__row span:last-child { color: var(--t2); text-align: right; }
.datatable__row.is-highlight span { color: var(--cy); }
.datatable__row.is-success span { color: var(--gr); }
.datatable__row.is-alert span:first-child { color: var(--rd); }
.datatable__row.is-alert span:last-child { color: var(--t3); }

/* Founding --------------------------------------------------------------- */
.founding { padding-top: 64px; padding-bottom: 64px; }
.founding__box {
	position: relative;
	overflow: hidden;
	padding: clamp(32px, 6vw, 72px) clamp(24px, 5vw, 64px);
	border-radius: 28px;
	background: var(--surface);
	border: 1px solid rgba(var(--ink), .1);
	box-shadow: var(--inset), 0 0 80px -30px rgba(99, 102, 241, .5);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 22px;
}
.founding__box > * { position: relative; }
.founding__box > .wash { position: absolute; }
.founding__box .badge-pill { align-self: center; padding: 7px 14px 7px 12px; letter-spacing: .1em; }
.founding__box .h2 { max-width: 760px; }
.founding__box .body-l { max-width: 520px; }
.founding__box .btn { margin-top: 8px; }

/* Calculator ------------------------------------------------------------- */
.calc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) {
	.calc { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
.calc__inputs,
.calc__result {
	position: relative;
	padding: clamp(20px, 3vw, 32px);
	border-radius: 22px;
	background: var(--surface);
	border: 1px solid rgba(var(--ink), .09);
	box-shadow: var(--inset);
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.calc__field { display: flex; flex-direction: column; gap: 14px; }
.calc__label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	font-size: 15px;
	font-weight: 500;
}
.calc__value { font-family: var(--mono); font-size: 16px; font-weight: 400; color: var(--t1); }

.range { width: 100%; height: 28px; margin: 0; cursor: pointer; }
.range--cyan { accent-color: #22D3EE; }
.range--violet { accent-color: #8B5CF6; }

.toggles { display: flex; gap: 8px; flex-wrap: wrap; }
.toggles button {
	all: unset;
	cursor: pointer;
	min-height: 44px;
	padding: 0 14px;
	display: flex;
	align-items: center;
	border-radius: 10px;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--t3);
	background: rgba(var(--ink), .03);
	border: 1px solid rgba(var(--ink), .1);
	transition: color .2s, background .2s, border-color .2s;
}
.toggles button:focus-visible { outline: 2px solid var(--cy); outline-offset: 2px; }
.toggles button[aria-checked="true"] {
	color: var(--t1);
	background: rgba(34, 211, 238, .12);
	border-color: rgba(34, 211, 238, .5);
}

.calc__result {
	overflow: hidden;
	justify-content: space-between;
	gap: 28px;
	border-color: rgba(103, 232, 249, .25);
	box-shadow: var(--inset), 0 0 60px -24px rgba(34, 211, 238, .45);
}
.calc__result > * { position: relative; }
.calc__result > .calc__wash {
	position: absolute;
	right: -100px;
	top: -100px;
	width: 300px;
	height: 300px;
	background: radial-gradient(closest-side, rgba(139, 92, 246, .22), transparent);
	pointer-events: none;
}
.calc__total { display: flex; flex-direction: column; gap: 10px; }
.calc__total-label { font-size: 17px; color: var(--t2); }
.calc__total-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.calc__big { font-size: clamp(48px, 7vw, 72px); line-height: 1; letter-spacing: -.045em; font-weight: 600; }
.calc__suffix { font-size: 22px; color: var(--t2); letter-spacing: -.02em; }
.calc__rows { display: flex; flex-direction: column; }
.calc__rows > div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid rgba(var(--ink), .08);
	font-size: 14px;
}
.calc__rows > div > span:first-child { color: var(--t3); }
.calc__rows .mono:not(.red) { color: var(--t1); }
.calc__foot { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.calc__note { letter-spacing: .06em; line-height: 1.6; }

/* FAQ -------------------------------------------------------------------- */
.accordion { display: flex; flex-direction: column; gap: 10px; }
.accordion__item {
	border-radius: 16px;
	background: rgba(var(--ink), .025);
	border: 1px solid rgba(var(--ink), .08);
	box-shadow: var(--inset);
	transition: border-color .3s, background .3s;
}
.accordion__item.is-open { background: rgba(var(--ink), .05); border-color: rgba(103, 232, 249, .3); }
.accordion__h { margin: 0; font: inherit; }
.accordion__h button {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	width: 100%;
	min-height: 64px;
	padding: 18px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -.01em;
	border-radius: 16px;
}
.accordion__h button:focus-visible { outline: 2px solid var(--cy); outline-offset: -2px; }
.accordion__icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	border: 1px solid rgba(var(--ink), .12);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mono);
	font-size: 14px;
	color: var(--t3);
}
.is-open .accordion__icon { color: var(--cy); }
.accordion__panel p {
	padding: 0 20px 20px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--t3);
	max-width: 680px;
}

/* Demo / form ------------------------------------------------------------ */
.demo {
	padding-bottom: 128px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}
@media (min-width: 900px) {
	.demo { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
.demo__text { position: relative; display: flex; flex-direction: column; gap: 20px; }
.demo__text .body-l { max-width: 460px; }

.demo__card {
	position: relative;
	padding: clamp(20px, 3vw, 32px);
	border-radius: 24px;
	background: var(--surface);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(var(--ink), .11);
	box-shadow: var(--inset), var(--deep), 0 0 60px -24px rgba(99, 102, 241, .45);
}
.demo-form { display: flex; flex-direction: column; gap: 16px; }
.demo-form .btn { margin-top: 8px; }
.demo-form.is-loading .btn { opacity: .6; pointer-events: none; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field__label {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--t3);
}
.field input,
.field select {
	height: 48px;
	padding: 0 14px;
	border-radius: 12px;
	background: var(--field);
	border: 1px solid rgba(var(--ink), .12);
	color: var(--t1);
	font-family: var(--sans);
	font-size: 15px;
	outline: none;
	transition: border-color .2s, box-shadow .2s;
	width: 100%;
}
.field select { padding: 0 12px; background: var(--panel); cursor: pointer; }
.field input::placeholder { color: var(--t4); }
.field input:focus,
.field select:focus { border-color: rgba(103, 232, 249, .6); box-shadow: 0 0 0 3px rgba(34, 211, 238, .15); }
.field.is-invalid input,
.field.is-invalid select { border-color: rgba(248, 113, 113, .6); }
.form-error { letter-spacing: .06em; }
.form-error[hidden] { display: none; }

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

.demo-cal { display: flex; flex-direction: column; gap: 18px; }
.demo-cal[hidden],
.demo-done[hidden],
.demo-form[hidden] { display: none; }
.demo-cal__head { display: flex; flex-direction: column; gap: 6px; }
.demo-cal__title { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.demo-cal__embed iframe { display: block; width: 100%; min-height: 640px; border: 0; border-radius: 16px; background: var(--panel); }
.demo-cal__embed[hidden],
.picker[hidden] { display: none; }

.picker { display: flex; flex-direction: column; gap: 14px; }
.picker__days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.picker__slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.picker__days button,
.picker__slots button {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	border-radius: 10px;
	background: rgba(var(--base), .5);
	border: 1px solid rgba(var(--ink), .08);
	transition: background .2s, border-color .2s;
}
.picker__days button:focus-visible,
.picker__slots button:focus-visible { outline: 2px solid var(--cy); }
.picker__days button {
	padding: 10px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}
.picker__days .dow { font-family: var(--mono); font-size: 11px; color: var(--t3); }
.picker__days .num { font-size: 17px; font-weight: 600; }
.picker__slots button {
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mono);
	font-size: 13px;
	color: var(--t2);
}
.picker [aria-pressed="true"] {
	background: rgba(34, 211, 238, .12);
	border-color: rgba(34, 211, 238, .5);
	color: var(--t1);
}
.btn--confirm { height: 52px; border-radius: 14px; font-size: 15px; }

.demo-done { display: flex; flex-direction: column; gap: 14px; padding: 12px 0; }
.demo-done__title { font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2; }

/* Footer + mobile bar ---------------------------------------------------- */
.footer {
	position: relative;
	border-top: 1px solid rgba(var(--ink), .07);
	padding: 40px 20px;
}
.footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}
.footer__links { display: flex; gap: 4px 20px; flex-wrap: wrap; font-size: 14px; }
.footer__links a { color: var(--t3); transition: color .2s; }
.footer__links a:hover { color: var(--t1); }
.footer__copy {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--t4);
}

.mobile-bar { display: none; }
@media (max-width: 819px) {
	.footer { padding-bottom: 120px; }
	.mobile-bar {
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: 12px;
		z-index: 30;
		padding: 10px;
		border-radius: 18px;
		background: rgba(var(--base), .85);
		-webkit-backdrop-filter: blur(16px);
		backdrop-filter: blur(16px);
		border: 1px solid rgba(var(--ink), .08);
		display: flex;
		align-items: center;
		gap: 12px;
	}
	.mobile-bar__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; padding-left: 6px; }
	.mobile-bar__title { font-size: 13px; font-weight: 500; }
	.mobile-bar__meta { font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--t4); }
}

/* Inner pages ------------------------------------------------------------ */
.prose-page { gap: 32px; padding-top: 64px; }
.prose { font-size: 17px; line-height: 1.7; color: var(--t2); }
.prose > * + * { margin-top: 1em; }
.prose h2, .prose h3 { color: var(--t1); letter-spacing: -.02em; line-height: 1.25; margin-top: 1.6em; }
.prose a { color: var(--cy); border-bottom: 1px solid currentColor; }
.prose-item + .prose-item { padding-top: 32px; border-top: 1px solid rgba(var(--ink), .08); }

/* Motion ----------------------------------------------------------------- */
@keyframes rlPulse {
	0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, .55); }
	70% { box-shadow: 0 0 0 10px rgba(34, 211, 238, 0); }
	100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
}
@keyframes rlType {
	0%, 60%, 100% { opacity: .25; transform: translateY(0); }
	30% { opacity: 1; transform: translateY(-3px); }
}
@keyframes rlIn {
	from { opacity: 0; transform: translateY(8px) scale(.98); }
	to { opacity: 1; transform: none; }
}
@keyframes rlChip {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}
@keyframes rlFall {
	0% { top: 0; opacity: 0; background: #F87171; box-shadow: 0 0 10px 2px rgba(248, 113, 113, .7); }
	10% { opacity: 1; }
	65% { background: #F87171; box-shadow: 0 0 10px 2px rgba(248, 113, 113, .7); }
	90% { opacity: 1; background: #22D3EE; box-shadow: 0 0 12px 3px rgba(34, 211, 238, .8); }
	100% { top: 100%; opacity: 0; background: #22D3EE; }
}
@keyframes rlTravelX {
	0% { left: 0; opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; }
	100% { left: 100%; opacity: 0; }
}

/* Ambient animations are desktop only */
@media (max-width: 819px) {
	.flow__line i,
	.steps__line i { display: none; }
}

/* Paused while off-screen (toggled by IntersectionObserver) */
.is-offscreen *,
.is-offscreen *::before,
.is-offscreen *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
	.flow__line i,
	.steps__line i { display: none; }
}