/* SnapFlow — city landing. Tokens follow the reference palette:
   warm paper #f4f2ed, ink #0b0b09, signal orange #fc5725. */
:root {
	--bg: #f4f2ed;
	--panel: #edece9;
	--tile: #e8e3dc;
	--ink: #0b0b09;
	--ink-2: rgba(11, 11, 9, .64);
	--ink-3: rgba(11, 11, 9, .3);
	--line: rgba(11, 11, 9, .08);
	--orange: #fc5725;
	--orange-2: #ff764d;
	--orange-soft: #f59b7f;
	--dark: #0b0b09;
	--dark-2: #191919;
	--white: #fff;
	--display: "Instrument Sans", "Inter", system-ui, sans-serif;
	--body: "Inter", system-ui, sans-serif;
	--mono: "IBM Plex Mono", ui-monospace, monospace;
	--ease: cubic-bezier(.16, 1, .3, 1);
	--ease-io: cubic-bezier(.44, 0, .56, 1);
	--wrap: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* lenis (smooth scroll) — its stock stylesheet */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 400 16px/26px var(--body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; }
h2 { font-size: 44px; line-height: 52.8px; letter-spacing: -.01em; }
h4 { font-size: 24px; line-height: 28.8px; }
ul { list-style: none; margin: 0; padding: 0; }
svg use { pointer-events: none; }

.wrap { width: min(var(--wrap), calc(100% - 160px)); margin: 0 auto; }
.center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.lead { font-size: 16px; line-height: 26px; color: var(--ink-2); max-width: 690px; }
.muted { color: var(--ink-2); }
.mono { font: 400 12px/16px var(--mono); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- pills & buttons ---------- */
.pill {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 5px 11px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 999px;
	font: 400 12px/16px var(--mono);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ink);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.pill svg { width: 11px; height: 11px; color: var(--orange); }
.pill-dark { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; }
.pill-dark svg { color: #fff; }
.why .pill-dark svg, .cta .pill-dark svg { color: var(--orange); }
.why .pill-dark { color: #fff; }

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: 36px; padding: 0 13px;
	border-radius: 8px;
	font: 400 14px/22px var(--body);
	white-space: nowrap;
	transition: transform .3s var(--ease), background-color .3s, color .3s, box-shadow .3s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-orange { background: var(--orange); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(252, 87, 37, .3); }
.btn-orange:hover { background: #ff6633; }
.btn-dark { background: var(--dark); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn-white { background: #fff; color: var(--ink); }
.btn-lg { height: 36px; padding: 0 27px; }
.btn-sm { height: 40px; padding: 0 14px; font-size: 13px; }
.btn-sm svg { width: 13px; height: 13px; }
.btn-xs { height: 30px; padding: 0 8px; font-size: 13px; border-radius: 4px; }

/* ---------- nav ---------- */
.nav {
	position: fixed; z-index: 50; top: 24px; left: 50%;
	width: min(1240px, calc(100% - 32px));
	height: 56px;
	transform: translateX(-50%);
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
	padding: 0 9px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 12px;
	background: rgba(11, 11, 9, 0);
	transition: width .7s var(--ease), background-color .5s var(--ease), box-shadow .5s, border-color .5s;
	opacity: 0;
	animation: fade .4s var(--ease-io) .1s forwards;
}
.nav.scrolled {
	width: min(760px, calc(100% - 32px));
	background: var(--dark);
	border-color: rgba(255, 255, 255, .1);
	box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .35);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 7px; background: #fff; color: var(--ink); flex: none; }
.mark svg { width: 21px; height: 21px; }
.brand-name { font: 500 21px/28px var(--display); letter-spacing: -.01em; transition: opacity .3s, max-width .6s var(--ease); max-width: 160px; overflow: hidden; white-space: nowrap; }
.nav.scrolled .brand-name { opacity: 0; max-width: 0; }
.nav-links { display: flex; gap: 20px; font-size: 14px; line-height: 22px; color: #fff; }
.nav-links a { position: relative; opacity: .95; transition: opacity .2s; }
.nav-links a:hover { opacity: .65; }
.nav-right { justify-self: end; display: flex; align-items: center; gap: 18px; }
.nav-signin { font-size: 14px; line-height: 22px; color: #fff; opacity: .95; transition: opacity .2s; }
.nav-signin:hover { opacity: .65; }
.nav.scrolled .nav-cta { background: #fff; color: var(--ink); box-shadow: none; }

/* ---------- hero ---------- */
.hero {
	position: relative;
	margin: 8px;
	/* the reference's calm: a tall hero whose upper part is plain night sky. The copy
	   sits there; the city fills the lower part, its busy middle ground (monorail,
	   train) landing below the suggestion list. On wide screens the hero grows with
	   the clip so that stays true. */
	min-height: 1136px;
	border-radius: 16px;
	background: var(--dark);
	overflow: hidden;
	isolation: isolate;
}
.hero-art-clip { position: absolute; inset: 0; z-index: -2; }
/* over the city: a soft shade behind the copy column, so the words sit on calm
   black as in the reference, and a fade at the bottom, so as the parallax
   carries the city down it dissolves into the dark instead of being sliced off.
   (A plain overlay, not a mask: masking the animated scene costs frames.) */
.hero-art-clip::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(transparent calc(100% - 56px), var(--dark)),
		radial-gradient(ellipse 34% 40% at 50% 30%, rgba(11, 11, 9, .9), rgba(11, 11, 9, .5) 55%, transparent 82%);
}
.hero-art {
	position: absolute; inset: 0;
	opacity: 0; transform: scale(1.06); transform-origin: 50% 100%;
	/* --s: the square scene's size. It matches the hero's height, and grows with very
	   wide screens so the towers, pinned to the edges, never drift too far from the
	   centre (the track has to keep reaching them). --lx: how far each side group
	   sits in from (or, negative, out past) the screen edge. */
	--s: max(100cqh, 100cqw / 1.44);
	--lx: 0px;
}
.go .hero-art { animation: art-in 4s var(--ease) .9s forwards; }
/* the hero sizes its scene off this box: cqw/cqh are its width and height */
.hero-art-clip { container-type: size; }
/* shared gradients and shapes; display:none would make browsers drop them */
.cs-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.cs-layer {
	position: absolute; top: calc(100% - var(--s));
	width: var(--s); height: var(--s);
	overflow: visible; will-change: translate;
}
.cs-sky { inset: 0; top: 0; width: 100%; height: 100%; }
.cs-c { left: calc((100cqw - var(--s)) / 2); }
.cs-l { left: var(--lx); }
.cs-r { left: calc(100cqw - var(--s) - var(--lx)); }
/* the sky is cropped from the top on wide heroes; bring the moon down into view */
.cs #moon { translate: 160px 260px; }
.hero-inner { display: flex; flex-direction: column; align-items: center; padding: 172px 24px 0; text-align: center; }
.hero-title {
	margin-top: 22px;
	max-width: 920px;
	font-size: 56px; line-height: 66px; letter-spacing: -.012em;
	color: #fff;
}
.hero-title .w { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(10px); }
.go .hero-title .w { animation: word-in 1.1s var(--ease) forwards; animation-delay: calc(1s + var(--i) * 70ms); }
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
.btn-glass { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.btn-glass:hover { background: rgba(255, 255, 255, .16); }
.hero-sub { margin-top: 32px; max-width: 670px; color: #fff; font-size: 16px; line-height: 26px; }

.intro { opacity: 0; transform: translateY(24px); }
.go .intro { animation: rise .6s var(--ease) forwards; }
.go .i1 { animation-delay: .25s; }
.go .i2 { animation-delay: 1.5s; animation-duration: 1.2s; }
.go .i3 { animation-delay: 1.7s; animation-duration: 1.4s; }
.go .i4 { animation-delay: 2.1s; animation-duration: 2.6s; }

.prompt {
	margin-top: 34px;
	width: min(652px, 100%);
	padding: 5px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 18px;
	background: rgba(11, 11, 9, .6);
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
}
.prompt-in {
	height: 156px;
	display: flex; flex-direction: column; justify-content: space-between;
	padding: 20px 17px 16px 17px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 14px;
	background: #0f0f0e;
	text-align: left;
}
.prompt-text { font-size: 14px; line-height: 17px; letter-spacing: -.3px; color: #fff; padding-left: 4px; min-height: 17px; }
.caret { display: inline-block; width: 1px; height: 16px; margin-left: 3px; vertical-align: -3px; background: #fff; animation: blink 1s steps(1) infinite; }
.prompt-row { display: flex; align-items: center; justify-content: space-between; }
.model {
	display: inline-flex; align-items: center; gap: 6px;
	height: 30px; padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, .08); border-radius: 6px;
	background: rgba(255, 255, 255, .04);
	font-size: 12px; color: #a6a6a6;
}
.model svg { width: 10px; height: 10px; opacity: .6; }
.send {
	position: relative; display: grid; place-items: center;
	width: 52px; height: 38px; border-radius: 9px;
	overflow: hidden; isolation: isolate;
}
.send::before {
	content: ""; position: absolute; inset: -60%; z-index: -1;
	background: conic-gradient(from 0deg, #fabc9b, var(--orange), #fce5cf, var(--orange), #fabc9b);
	animation: spin 2.5s linear infinite;
}
.send > span { display: grid; place-items: center; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 7px; background: #0e0d0c; color: #fff; }
.send svg { width: 14px; height: 14px; }
.send.round { width: 34px; height: 34px; border-radius: 50%; margin-left: auto; flex: none; }
.send.round > span { border-radius: 50%; }

.ticker {
	margin-top: 34px;
	width: 292px; height: 150px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(transparent, #000 30%, #000 62%, transparent);
	mask-image: linear-gradient(transparent, #000 30%, #000 62%, transparent);
}
.ticker ul { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.ticker li {
	display: flex; align-items: center; gap: 10px;
	height: 38px; padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 20px;
	background: rgba(11, 11, 9, .55);
	font-size: 14px; line-height: 22px; color: #fff;
	text-align: left;
}
.ticker b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; background: linear-gradient(135deg, #ff9068, var(--orange)); }
.ticker b svg { width: 10px; height: 10px; color: #fff; opacity: .9; }

/* ---------- trusted marquee ---------- */
.trusted { padding: 60px 0 0; text-align: center; }
.trusted .mono { color: var(--ink); opacity: .8; }
.marquee {
	position: relative; overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.trusted .marquee { width: min(980px, 100%); margin: 22px auto 0; }
.marquee-track { display: flex; width: max-content; animation: marquee var(--dur, 36s) linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee.rev .marquee-track { animation-direction: reverse; }
.logo {
	display: inline-flex; align-items: center; gap: 10px;
	margin-right: 56px; height: 48px;
	font: 600 25px/1 var(--display); letter-spacing: -.02em;
	color: #8f8d88;
	white-space: nowrap;
}
.logo-ico { width: 30px; height: 30px; color: #8f8d88; opacity: .8; }
.logo img { width: 30px; height: 30px; filter: grayscale(1) contrast(.6) brightness(1.05); opacity: .7; }

/* ---------- problem ---------- */
.problem { position: relative; padding: 172px 0 0; overflow-x: clip; }
.dots, .why::before {
	position: absolute; pointer-events: none;
	background-image: radial-gradient(circle, rgba(11, 11, 9, .16) 1.1px, transparent 1.5px);
	background-size: 9px 9px;
}
.dots {
	left: 50%; top: 110px; width: 760px; height: 760px; transform: translateX(-50%);
	-webkit-mask-image: radial-gradient(circle at center, #000 0, rgba(0, 0, 0, .55) 35%, transparent 68%);
	mask-image: radial-gradient(circle at center, #000 0, rgba(0, 0, 0, .55) 35%, transparent 68%);
}
.problem h2 { margin-top: 22px; max-width: 800px; font-size: 44px; line-height: 48.4px; letter-spacing: -.4px; }
.reveal-text .w { color: inherit; opacity: var(--o, .22); transition: opacity .25s linear; }
.problem-list { position: relative; width: min(688px, calc(100% - 48px)); margin: 82px auto 0; }
.prow {
	display: grid; grid-template-columns: 316px 1fr; align-items: center;
	padding: 34px 0;
	border-bottom: 1px solid var(--line);
}
.prow-h { display: flex; align-items: center; gap: 20px; font-size: 16px; font-weight: 500; }
.ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; background: linear-gradient(180deg, #ff8158, var(--orange)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.ico svg { width: 17px; height: 17px; }
.prow p { font-size: 14px; line-height: 22px; color: var(--ink-2); }

/* ---------- features ---------- */
.features { padding: 200px 0 0; }
.head-left { max-width: 640px; }
.head-left h2 { margin-top: 18px; }
.head-left .lead { margin-top: 38px; }
.card {
	padding: 7px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
.card h4 { margin: 24px 16px 0; }
.card > p { margin: 10px 16px 22px; max-width: 440px; font-size: 14px; line-height: 22px; color: var(--ink-2); }
.vis {
	position: relative; height: 333px; overflow: hidden;
	border-radius: 9px;
	background: var(--bg);
	display: grid; place-items: center;
}
.tile-bg { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols), 92px); grid-auto-rows: 92px; gap: 4px; background: #fff; }
.tile-bg i { background: var(--bg); transition: background-color 1.2s; }
.tile-bg i.d { background: var(--tile); }
.tile-bg i.o { background: var(--orange); }
.light .tile-bg i { background: #fafaf7; }
.light .tile-bg i.d { background: #f3f1ec; }
.light .tile-bg i.o { background: var(--orange); }
.vis > :not(.tile-bg) { position: relative; z-index: 1; }

/* ---------- features: the sky page's UI elements on soft grain fields ---------- */
/* fields are painted from the reference's light tokens; grain keeps them from banding */
.field { position: relative; isolation: isolate; overflow: hidden; }
.field::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: url(images/noise.webp) repeat; background-size: 128px; mix-blend-mode: soft-light; opacity: .55; }
.f-blue { background: radial-gradient(75% 55% at 12% 0%, #4d74f0, transparent 72%), radial-gradient(65% 55% at 100% 38%, #80aafd, transparent 75%), radial-gradient(90% 50% at 30% 105%, #f4f2ed, transparent 80%), #b7cbf7; }
.f-peach { background: radial-gradient(75% 55% at 92% 0%, #fc7a4c, transparent 70%), radial-gradient(65% 55% at 0% 48%, #fcac84, transparent 75%), radial-gradient(90% 50% at 60% 105%, #f7e6dd, transparent 80%), #f8c6ab; }
.f-lilac { background: radial-gradient(75% 55% at 8% 0%, #8f9cf5, transparent 72%), radial-gradient(65% 60% at 100% 55%, #f5b39d, transparent 75%), radial-gradient(90% 50% at 40% 105%, #f5e4ef, transparent 80%), #d6d0f1; }
.f-wide { background: radial-gradient(42% 65% at 4% 0%, #4d74f0, transparent 72%), radial-gradient(40% 55% at 52% 6%, #80aafd, transparent 75%), radial-gradient(38% 65% at 100% 35%, #f5d0dc, transparent 75%), radial-gradient(42% 60% at 0% 100%, #fcac84, transparent 75%), radial-gradient(50% 55% at 76% 100%, #dfe9fd, transparent 80%), #bfd0f6; }

.ideas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 62px; }
.idea { height: 460px; border-radius: 16px; }
.idx {
	position: absolute; top: 16px; left: 16px; padding: 2px 9px; border-radius: 999px;
	background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
	font: 400 12px/20px var(--mono);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.idea-ui { position: absolute; top: 72px; left: 24px; right: 24px; display: flex; justify-content: center; transition: transform .6s var(--ease); }
.idea:hover .idea-ui { transform: translateY(-4px); }
.idea-cap { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 18px 20px; border-radius: 12px; background: #fff; }
.idea-cap h3 { font-size: 20px; line-height: 26px; letter-spacing: -.01em; }
.idea-cap p { margin-top: 6px; font-size: 14px; line-height: 22px; color: var(--ink-2); }
/* the card's UI builds itself in once the card is on screen */
.idea .ui > * { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.idea.in .ui > * { opacity: 1; transform: none; }
.idea.in .ui > :nth-child(2) { transition-delay: .35s; }
.idea.in .ui > :nth-child(3) { transition-delay: .5s; }
.idea.in .ui > :nth-child(4) { transition-delay: .65s; }

.ui {
	width: 100%; max-width: 300px; padding: 14px;
	border-radius: 14px; background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -12px rgba(16, 24, 40, .18), inset 0 0 0 1px var(--line);
	font-size: 13px; line-height: 1.45;
}
.ui-chat { display: grid; gap: 10px; }
.bub { max-width: 78%; padding: 9px 13px; border-radius: 14px; }
.ui-chat .bub { max-width: 100%; }
.bub-you { justify-self: end; background: var(--ink); color: #fff; border-bottom-right-radius: 4px; }
.bub-bot { background: #fff; box-shadow: inset 0 0 0 1px var(--line); border-bottom-left-radius: 4px; }
.handoff { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.handoff b { color: var(--ink); font-weight: 500; }
.handoff .typing { padding: 0; margin-left: auto; }
.ava { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; font-size: 12px; font-weight: 600; flex: none; }
.ava svg { width: 16px; height: 16px; }
.ava.sm { width: 22px; height: 22px; border-radius: 7px; font-size: 11px; }
.ava-1 { background: #e6edfe; color: var(--blue, #2a4fd0); }
.ava-2 { background: #e6f6ec; color: #15803d; }
.ava-3 { background: #fdeee5; color: #c2410c; }
.ava-4 { background: #efeafd; color: #6d28d9; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 20px; white-space: nowrap; }
.tag svg { width: 12px; height: 12px; }
.tag i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 2s ease-in-out infinite; }
.tag-run { background: #e6edfe; color: #2a4fd0; }
.tag-ok { background: #ecfdf3; color: #15803d; }
.mini { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; }
.mini-ink { background: var(--ink); color: #fff; }
.mini-soft { background: var(--panel); }
.ring { animation: ring 2.2s var(--ease-io) infinite; }
.ui-approve .k { font-weight: 500; }
.code { font: 400 12px/1.5 var(--mono); color: #3f3f46; }
.ui-approve .code { margin-top: 4px; }
.ui-approve .small { margin-top: 2px; font-size: 12px; color: var(--ink-2); }
.ui-approve .pc-actions { margin-top: 12px; }
.ui-approve .mini { flex: 1; }
.ui-receipt { display: grid; gap: 7px; }
.rc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.pc-row { display: flex; justify-content: space-between; gap: 16px; color: var(--ink-2); }
.pc-row b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.pc-actions { display: flex; gap: 6px; margin-top: 6px; }
.plan-card { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.typing { display: flex; gap: 4px; padding: 10px 2px; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); animation: typing 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }

/* mission control: the sky hero window, on a blurred slice of the city */
.mc { position: relative; isolation: isolate; overflow: hidden; height: 560px; margin-top: 16px; border-radius: 16px; background: #0b1a5e; }
.mc::before { content: ""; position: absolute; inset: -40px; z-index: -1; background: url(images/hero.svg) 0% 88% / 170% auto no-repeat, #0b1a5e; filter: blur(22px) saturate(1.2); }
.mc::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 10, 40, .55), transparent 45%); }
.mc-cap { position: absolute; left: 40px; top: 36px; max-width: 600px; color: #fff; }
.mc-cap h3 { font-size: 32px; line-height: 38.4px; }
.mc-cap p { margin-top: 10px; color: rgba(255, 255, 255, .75); }
.window {
	position: absolute; left: 50%; bottom: 0;
	width: min(880px, calc(100% - 48px)); height: 372px;
	border-radius: 16px 16px 0 0; overflow: hidden;
	background: rgba(255, 255, 255, .93);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), 0 0 0 1px rgba(10, 10, 10, .05), 0 40px 80px -24px rgba(0, 6, 50, .5);
	-webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%);
	font-size: 13px; line-height: 1.45;
	transform: translate(-50%, 80px); opacity: 0;
	transition: transform 1.3s var(--ease) .15s, opacity .9s var(--ease) .15s;
}
.mc.in .window { transform: translate(-50%, 0); opacity: 1; }
.win-bar { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.win-dots { display: flex; gap: 6px; }
.win-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(10, 10, 10, .1); }
.win-title { flex: 1; font-weight: 500; }
.win-body { display: grid; grid-template-columns: 250px 1fr; height: calc(100% - 44px); }
.win-side { display: grid; align-content: start; gap: 4px; padding: 12px; border-right: 1px solid var(--line); }
.win-search { display: flex; align-items: center; gap: 8px; height: 32px; margin-bottom: 6px; padding: 0 10px; border-radius: 10px; background: rgba(16, 16, 0, .04); color: var(--ink-2); }
.win-search svg { width: 14px; height: 14px; }
.m-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; transition: background-color .4s; }
.m-item.on { background: rgba(16, 16, 0, .05); }
.m-t { min-width: 0; }
.m-t b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-t small { display: block; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.win-main { display: grid; align-content: start; gap: 12px; padding: 18px 20px; }
.win-main .s2 { order: 3; }
/* the conversation plays out once the panel is on screen */
.win-main > * { opacity: 0; transform: translateY(8px); }
.mc.in .win-main > * { animation: rise .6s var(--ease) forwards; }
.mc.in .s1 { animation-delay: .9s; }
.mc.in .s3 { animation-delay: 1.9s; }
.mc.in .s2 { animation-delay: 2.6s; }

/* ---------- your cloud. your servers. ---------- */
.surfaces { padding: 16px 0 0; }
.panel { position: relative; height: 600px; border-radius: 16px; }
.surfaces-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; padding: 40px 40px 0; }
.surfaces-top h2 { margin-top: 18px; }
.mute { color: rgba(11, 11, 9, .45); }
.surfaces-top > p { max-width: 340px; margin-top: 44px; color: #27303d; }
.net { position: absolute; left: 50%; top: 54%; width: min(800px, calc(100% - 48px)); aspect-ratio: 800 / 240; translate: -50% -50%; }
.net-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.net-lines path { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 1.25; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; animation: flow 1.4s linear infinite; }
.node {
	position: absolute; translate: -50% -50%;
	display: grid; place-items: center;
	width: 56px; height: 56px; border-radius: 16px; background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -12px rgba(16, 24, 40, .25), inset 0 0 0 1px var(--line);
	animation: bob 5s ease-in-out infinite;
}
.node img { width: 26px; height: 26px; object-fit: contain; }
.node .srv { width: 24px; height: 24px; }
.n-hub { left: 50%; top: 50%; width: 76px; height: 76px; border-radius: 22px; background: var(--ink); color: #fff; animation: hub 2.6s var(--ease-io) infinite; }
.n-hub svg { width: 40px; height: 40px; }
.n1 { left: 10%; top: 16.7%; } .n2 { left: 10%; top: 83.3%; animation-delay: -1.2s; } .n3 { left: 25%; top: 50%; animation-delay: -2.4s; }
.n4 { left: 90%; top: 16.7%; animation-delay: -.6s; } .n5 { left: 90%; top: 83.3%; animation-delay: -1.8s; } .n6 { left: 75%; top: 50%; animation-delay: -3s; }
.chips { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
	display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px; border-radius: 999px;
	background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	font-size: 13.5px; font-weight: 500;
}
.chips svg { width: 16px; height: 16px; }

/* ---------- product stack ---------- */
.product { padding: 200px 0 0; }
.product h2 { margin-top: 18px; }
.product .lead { margin-top: 38px; }
.stack { margin-top: 64px; display: flex; flex-direction: column; gap: 60px; }
.scard {
	position: sticky; top: 112px;
	display: grid; grid-template-columns: 1fr 679px; gap: 32px;
	min-height: 525px; padding: 7px;
	border: 1px solid var(--line); border-radius: 12px;
	background: var(--bg);
	transform-origin: 50% 0;
	will-change: transform;
}
.scard.flip { grid-template-columns: 662px 1fr; }
.scard.flip .scard-text { order: 2; padding-left: 26px; }
.scard-text { display: flex; flex-direction: column; padding: 34px 0 32px 32px; }
.scard-text h3 { font-size: 32px; line-height: 38.4px; }
.scard-text > p { margin-top: 30px; max-width: 450px; color: var(--ink-2); }
.checks { margin-top: auto; display: flex; flex-direction: column; gap: 16px; }
.checks li { display: flex; align-items: center; gap: 16px; font-size: 18px; font-weight: 500; line-height: 28px; }
.checks span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 4px; background: var(--panel); border: 1px solid var(--line); }
.checks svg { width: 18px; height: 18px; }
.scard-art {
	position: relative; overflow: hidden;
	border-radius: 10px;
	background: #0a1b5c;
	perspective: 1800px;
	min-height: 510px;
}
.scard-art::before {
	content: ""; position: absolute; inset: -40px;
	background: url(images/hero.svg) var(--pos, 0 60%) / 360% auto no-repeat, #0b1a5e;
	filter: blur(18px) saturate(1.25);
}
.scard-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 70% 10%, rgba(10, 24, 90, .5), transparent 60%); }
.iso {
	position: absolute; z-index: 1; left: 18%; top: 22%;
	width: 560px; padding: 22px 22px 30px;
	border-radius: 22px;
	background: #fff;
	transform: rotateX(54deg) rotateZ(-33deg) translate3d(40px, 120px, 0);
	opacity: 0;
	box-shadow:
		1px 1px 0 #eceffd, 2px 2px 0 #e3e7fb, 3px 3px 0 #dde2fa, 4px 4px 0 #d6dcf8, 5px 5px 0 #cfd6f6,
		6px 6px 0 #c9d0f4, 7px 7px 0 #c2caf2, 8px 8px 0 #bcc4f0, 9px 9px 0 #b5bfee, 10px 10px 0 #aeb9ec,
		40px 50px 60px rgba(0, 6, 50, .55);
	transition: transform 1.4s var(--ease), opacity .9s var(--ease);
}
.scard.in .iso { opacity: 1; transform: rotateX(54deg) rotateZ(-33deg) translate3d(0, 0, 0); }
.scard.flip .iso { left: 14%; top: 18%; }
.iso-h { display: flex; justify-content: space-between; align-items: center; padding: 6px 6px 18px; font: 600 26px/1 var(--display); letter-spacing: -.01em; }
.iso-h span { padding: 6px 12px; border-radius: 99px; background: var(--bg); font: 500 14px/1 var(--body); color: var(--ink-2); }
.iso-r, .iso-s {
	display: flex; align-items: center; justify-content: space-between;
	height: 54px; margin-top: 10px; padding: 0 18px;
	border-radius: 12px; background: var(--bg);
	font-size: 17px; font-weight: 500;
}
.iso-r em { display: inline-flex; align-items: center; gap: 8px; font-style: normal; font-size: 14px; color: var(--ink-2); }
.iso-r em i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.iso-s { justify-content: flex-start; gap: 14px; background: #ebe7e1; }
.iso-s b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: var(--orange); color: #fff; font-size: 14px; }
.iso-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.iso-tiles div { padding: 14px; border-radius: 12px; background: var(--bg); }
.iso-tiles small { display: block; font-size: 13px; color: var(--ink-2); }
.iso-tiles b { font: 600 22px/1.3 var(--display); }
.iso-chart { margin-top: 12px; height: 130px; padding: 10px; border-radius: 12px; background: var(--bg); }
.iso-chart svg { width: 100%; height: 100%; overflow: visible; }
.iso-chart .line { stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 2s var(--ease) .6s; }
.scard.in .iso-chart .line { stroke-dashoffset: 0; }

/* ---------- use case ---------- */
.usecase { padding: 200px 0 0; }
.uc { display: grid; grid-template-columns: 647px 1fr; gap: 130px; }
.uc-art { position: relative; height: 664px; border-radius: 12px; overflow: hidden; background: #0b1640; }
.uc-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; opacity: 0; transform: scale(1.06); transition: opacity 1s var(--ease), transform 2.4s var(--ease); }
.uc-art img.on { opacity: 1; transform: scale(1); }
.uc-prompt {
	position: absolute; left: 32px; right: 32px; bottom: 30px;
	display: flex; align-items: center; gap: 10px;
	height: 50px; padding: 0 8px 0 18px;
	border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px;
	background: rgba(11, 11, 9, .55);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	color: #fff; font-size: 14px; letter-spacing: -.2px;
	white-space: nowrap; overflow: hidden;
}
.uc-prompt .sp { width: 14px; height: 14px; flex: none; }
.uc-side { display: flex; flex-direction: column; justify-content: space-between; padding: 32px 0 0; }
.uc-list { margin-top: 20px; }
.uc-list button {
	display: block; text-align: left;
	font: 500 32px/40px var(--display); letter-spacing: -.01em;
	color: var(--ink-3);
	transition: color .5s var(--ease), transform .5s var(--ease);
}
.uc-list button:hover { color: rgba(11, 11, 9, .55); }
.uc-list button.on { color: var(--ink); transform: translateX(4px); }
.uc-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.uc-desc { display: grid; }
.uc-desc b { color: var(--ink); font-weight: 500; }
.uc-desc p { grid-area: 1 / 1; max-width: 420px; color: var(--ink-2); opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.uc-desc p.on { opacity: 1; transform: none; }

/* ---------- why (dark) ---------- */
.why {
	position: relative; overflow: hidden;
	margin: 120px 8px 0;
	padding: 120px 0 120px;
	border-radius: 16px;
	background: var(--dark);
	color: #fff;
}
.globe { position: absolute; right: -6%; top: 120px; width: 820px; height: 820px; opacity: .9; pointer-events: none; }
.why .wrap { position: relative; width: min(var(--wrap), calc(100% - 144px)); }
.why h2 { margin-top: 18px; max-width: 690px; font-size: 44px; line-height: 48.4px; letter-spacing: -.4px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 84px; border: 1px solid rgba(255, 255, 255, .08); border-bottom: 0; border-radius: 12px 12px 0 0; background: rgba(11, 11, 9, .6); }
.stats > div { padding: 40px 40px 44px; }
.stats > div + div { border-left: 1px solid rgba(255, 255, 255, .08); }
.stats h4 { font-size: 32px; line-height: 38.4px; color: var(--orange); }
.stats b { display: block; margin-top: 30px; font-weight: 500; }
.stats p { margin-top: 6px; max-width: 280px; font-size: 14px; line-height: 22px; color: rgba(255, 255, 255, .6); }
.secure {
	display: flex; align-items: center; justify-content: space-between; gap: 32px;
	padding: 36px 40px;
	border: 1px solid rgba(255, 255, 255, .08); border-radius: 0 0 12px 12px;
	background: rgba(11, 11, 9, .6);
}
.secure h4 { font-size: 24px; }
.secure p { margin-top: 10px; max-width: 470px; font-size: 14px; line-height: 22px; color: rgba(255, 255, 255, .6); }
.badges { display: flex; gap: 16px; }
.badges span {
	display: grid; place-items: center;
	width: 80px; height: 80px; border-radius: 50%;
	background: radial-gradient(circle at 50% 30%, #ffae8f, var(--orange) 70%);
	box-shadow: 0 0 0 7px #232120, 0 0 0 8px rgba(255, 255, 255, .05), inset 0 -6px 12px rgba(150, 30, 0, .25);
	font-weight: 500; font-size: 14px;
	transition: transform .6s var(--ease);
}
.badges span:hover { transform: translateY(-4px) rotate(-4deg); }

/* ---------- early partners ---------- */
.partners { padding: 160px 0 0; }
.partners-card {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	padding: 72px 40px; border-radius: 16px;
	background: radial-gradient(60% 90% at 50% 0%, #fff, var(--panel));
	border: 1px solid var(--line);
}
.partners-card h2 { margin-top: 18px; max-width: 760px; }
.partners-card .lead { margin-top: 24px; }
.partners-card .btn { margin-top: 32px; }

/* ---------- pricing ---------- */
.pricing { padding: 200px 0 0; }
.pricing h2 { margin-top: 18px; }
.pricing .lead { margin-top: 38px; max-width: 620px; }
.settle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 62px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.settle > div { padding: 30px 28px; }
.settle > div + div { border-left: 1px solid var(--line); }
.settle b { font: 500 20px/26px var(--display); }
.settle p { margin-top: 8px; font-size: 14px; line-height: 22px; color: var(--ink-2); }
.settle .num { margin-bottom: 14px; }
.pricing-cta { display: flex; justify-content: center; margin-top: 32px; }

/* ---------- steps ---------- */
.steps { padding: 200px 0 0; }
.steps h2 { margin-top: 18px; }
.steps .lead { margin-top: 38px; max-width: 560px; }
.steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 62px; }
.steps-grid .vis { height: 300px; }
.steps-grid h4 { display: flex; align-items: center; gap: 8px; margin-top: 22px; }
.num { display: grid; place-items: center; width: 32px; height: 24px; border-radius: 4px; background: linear-gradient(180deg, #ff8158, var(--orange)); color: #fff; font: 500 16px/1 var(--body); }
.steps-grid .card > p { font-size: 16px; line-height: 26px; max-width: 320px; }
.form {
	width: 240px; padding: 16px 15px 15px;
	border: 1px solid #b9e5c8; border-radius: 6px; background: #fff;
	box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .35);
}
.form b { display: block; font-size: 14px; font-weight: 500; }
.form label { display: block; margin-top: 14px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.form .input { margin-top: 8px; height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 4px; font-size: 13px; font-weight: 500; line-height: 32px; }
.form .go { display: grid; place-items: center; height: 31px; margin-top: 12px; border-radius: 3px; background: var(--dark); color: #fff; }
.form .go svg { width: 15px; height: 15px; }
.progress { width: min(260px, 88%); padding: 18px 15px 16px; border: 1px solid var(--line); border-radius: 6px; background: #fff; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .3); }
.progress b { display: block; font-size: 14px; font-weight: 500; }
.progress small { display: block; margin-top: 8px; font-size: 12px; color: var(--ink-2); }
.progress .bar { margin-top: 12px; height: 4px; border-radius: 2px; background: #ebe7e1; overflow: hidden; }
.progress .bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--orange); transition: width 2.2s var(--ease) .3s; }
.in .progress .bar i { width: 60%; }
.chat { width: min(264px, 92%); padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: #fff; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .3); }
.msg { display: flex; gap: 10px; align-items: flex-start; }
.msg > div { padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; line-height: 20px; }
.msg b { display: block; font-size: 12px; font-weight: 600; line-height: 14px; }
.av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none; font-size: 13px; font-weight: 600; }
.av-s { background: var(--dark); color: #fff; }
.av-s svg { width: 18px; height: 18px; }
.av-u { background: linear-gradient(135deg, #f7c59f, #d97b4a); color: #fff; }
.chat .btn { align-self: flex-end; }

/* ---------- integrations ---------- */
.integrations { padding: 180px 0 0; }
.integrations h2 { margin-top: 18px; }
.integrations .lead { margin-top: 38px; max-width: 720px; }
.envs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 62px; }
.env { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 26px 24px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: transform .4s var(--ease), box-shadow .4s; }
.env:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -20px rgba(0, 0, 0, .3); }
.env-ico { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 10px; background: var(--panel); }
.env-ico img, .env-ico svg { width: 28px; height: 28px; }
.env b { font: 500 20px/26px var(--display); }
.env small { font-size: 14px; color: var(--ink-2); }

/* ---------- faq ---------- */
.faq { padding: 180px 0 0; }
.faq-grid { display: grid; grid-template-columns: 455px 1fr; }
.faq-side { position: sticky; top: 120px; align-self: start; display: flex; flex-direction: column; align-items: flex-start; }
.faq-side h3 { margin-top: 18px; font-size: 38px; line-height: 45.6px; max-width: 330px; }
.faq-side .muted { margin-top: 28px; font-weight: 500; }
.faq-side .btn { margin-top: 18px; }
.acc { border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
	display: flex; justify-content: space-between; align-items: center; gap: 24px;
	padding: 24px 22px 24px 23px;
	font-size: 18px; line-height: 28px; font-weight: 500;
	cursor: pointer; list-style: none;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary i { position: relative; width: 16px; height: 16px; flex: none; }
.acc summary i::before, .acc summary i::after { content: ""; position: absolute; left: 0; top: 7.25px; width: 16px; height: 1.5px; background: var(--ink); transition: transform .4s var(--ease); }
.acc summary i::after { transform: rotate(90deg); }
.acc details[open] summary i::after { transform: rotate(0); }
.acc-a { overflow: hidden; padding: 0 22px 0 23px; }
.acc-a p { font-size: 16px; line-height: 26px; }
.acc-a p + p { margin-top: 26px; }
.acc-a p:last-child { padding-bottom: 26px; }

/* ---------- cta + footer ---------- */
.cta {
	position: relative; overflow: hidden; isolation: isolate;
	margin: 120px 8px 8px;
	border-radius: 16px;
	background: #05060a;
	padding: 0 0 50px;
}
/* the launch city at its own wide proportions; the copy sits in its sky, and the
   footer card rides up over its foreground */
/* height follows the scene's 1920:1220 proportions, clamped (not aspect-ratio: with a
   max-height that would also cap the width and cut the city off on wide screens) */
.cta-stage { position: relative; height: clamp(760px, calc((100vw - 16px) * .6354), 1100px); }
/* a soft shade behind the copy, as in the hero, so the words don't fight the rocket */
.cta-stage::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: radial-gradient(ellipse 36% 30% at 50% 17%, rgba(5, 6, 10, .82), rgba(5, 6, 10, .45) 55%, transparent 85%);
}
.cta-art { position: absolute; inset: 0; z-index: -1; }
.cta-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cta-in { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; padding: clamp(80px, 7vw, 120px) 24px 0; }
.cta-in h2, .cta-sub { text-shadow: 0 2px 24px rgba(5, 8, 30, .85); }
.cta h2 { margin-top: 22px; max-width: 680px; }
.cta-sub { margin-top: 18px; max-width: 520px; color: rgba(255, 255, 255, .78); }
.cta-btns { display: flex; gap: 8px; margin-top: 36px; }
.foot {
	display: grid; grid-template-columns: 1fr auto; gap: 40px;
	width: min(1280px, calc(100% - 144px)); margin: -150px auto 0;
	position: relative;
	padding: 60px 60px 60px;
	border-radius: 16px;
	background: var(--dark-2);
	color: #fff;
}
.foot-l { display: flex; flex-direction: column; }
.social { display: flex; gap: 20px; }
.social a { width: 20px; height: 20px; opacity: .95; transition: opacity .2s, transform .3s var(--ease); }
.social a:hover { opacity: .6; transform: translateY(-2px); }
.social svg { width: 100%; height: 100%; }
.foot-l p { margin-top: 16px; max-width: 320px; font-size: 14px; line-height: 22px; color: rgba(255, 255, 255, .9); }
.foot-l small { margin-top: 16px; font-size: 14px; color: rgba(255, 255, 255, .6); }
.foot-brand { margin-top: 62px; }
.foot-brand .mark { width: 36px; height: 36px; }
.foot-cols { display: grid; grid-template-columns: repeat(3, auto); gap: 96px; }
.foot-cols div { display: flex; flex-direction: column; gap: 12px; }
.foot-cols b { font-weight: 500; margin-bottom: 4px; }
.foot-cols a { color: rgba(255, 255, 255, .6); transition: color .2s; }
.foot-cols a:hover { color: #fff; }

/* ---------- reveal on scroll ---------- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform 1s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
.ideas [data-reveal]:nth-child(2), .steps-grid [data-reveal]:nth-child(2), .stats [data-reveal]:nth-child(2) { transition-delay: .1s; }
.ideas [data-reveal]:nth-child(3), .steps-grid [data-reveal]:nth-child(3), .stats [data-reveal]:nth-child(3) { transition-delay: .2s; }

/* ---------- keyframes ---------- */
@keyframes fade { to { opacity: 1; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes word-in { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes art-in { to { opacity: 1; transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes typing { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@keyframes flow { to { stroke-dashoffset: -18; } }
@keyframes bob { 50% { translate: -50% calc(-50% - 7px); } }
@keyframes hub { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7), 0 20px 40px -12px rgba(16, 24, 40, .45); } 100% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0), 0 20px 40px -12px rgba(16, 24, 40, .45); } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(252, 87, 37, .5); } 70%, 100% { box-shadow: 0 0 0 9px rgba(252, 87, 37, 0); } }

/* ---------- responsive ---------- */
@media (max-width: 1199.98px) {
	/* square hero = the whole square frame, towers at the edges, sky in the middle */
	.hero { min-height: max(880px, calc(100vw - 16px)); }
	.hero-art { --lx: -7cqw; }
	.hero-art-clip::after { background: linear-gradient(transparent calc(100% - 56px), var(--dark)), radial-gradient(ellipse 50% 34% at 50% 26%, rgba(11, 11, 9, .9), rgba(11, 11, 9, .5) 55%, transparent 82%); }
	.steps-grid, .envs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.form, .chat { margin-left: 0; }
	.wrap { width: calc(100% - 80px); }
	.ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.window { width: calc(100% - 32px); }
	.win-body { grid-template-columns: 220px 1fr; }
	.scard, .scard.flip { grid-template-columns: 1fr 1fr; }
	.uc { grid-template-columns: 1fr 1fr; gap: 64px; }
	.faq-grid { grid-template-columns: 340px 1fr; }
	.foot { width: calc(100% - 80px); grid-template-columns: 1fr; }
	.why .wrap { width: calc(100% - 64px); }
	.foot-cols { gap: 56px; justify-content: start; }
}
@media (max-width: 809.98px) {
	h2, .problem h2, .why h2 { font-size: 32px; line-height: 38px; letter-spacing: -.3px; }
	.wrap { width: calc(100% - 32px); }
	.nav-links { display: none; }
	.nav { grid-template-columns: 1fr auto; }
	.nav.scrolled { width: calc(100% - 32px); }
	.hero { min-height: 1180px; }
	/* a phone fits only a sliver of each tower: the scene is a bit wider than the
	   screen and the side groups lean out past its edges */
	.hero-art { --s: 150cqw; --lx: -14cqw; }
	.hero-inner { padding-top: 130px; }
	.hero-title { font-size: 38px; line-height: 44px; }
	.hero-sub { margin-top: 22px; }
	.prompt-in { height: 130px; }
	.problem { padding-top: 120px; }
	.prow { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
	.features, .product, .usecase, .steps, .partners { padding-top: 120px; }
	.integrations, .faq { padding-top: 120px; }
	.ideas, .steps-grid, .settle, .envs { grid-template-columns: minmax(0, 1fr); }
	.partners-card { padding: 48px 22px; }
	.nav-signin { display: none; }
	.settle > div + div { border-left: 0; border-top: 1px solid var(--line); }
	.pricing { padding-top: 120px; }
	.idea { height: 420px; }
	.mc { height: 600px; }
	.mc-cap { left: 24px; right: 24px; top: 28px; }
	.mc-cap h3 { font-size: 26px; line-height: 32px; }
	.window { height: 330px; }
	.win-body { grid-template-columns: 1fr; }
	.win-side { display: none; }
	.panel { height: 640px; }
	.surfaces-top { flex-direction: column; gap: 14px; padding: 28px 24px 0; }
	.surfaces-top > p { margin-top: 0; }
	.net { top: 60%; }
	.node { width: 44px; height: 44px; border-radius: 12px; }
	.node img { width: 20px; height: 20px; }
	.n-hub { width: 60px; height: 60px; border-radius: 18px; }
	.n-hub svg { width: 32px; height: 32px; }
	.vis { height: 300px; }
	.scard, .scard.flip { grid-template-columns: 1fr; position: relative; top: 0; }
	.scard.flip .scard-text { order: 0; padding-left: 0; }
	.scard-text { padding: 24px 16px; }
	.checks { margin-top: 28px; }
	.scard-art { min-height: 340px; }
	.iso { width: 420px; left: 4%; top: 10%; transform: rotateX(54deg) rotateZ(-33deg) scale(.8); }
	.scard.in .iso { transform: rotateX(54deg) rotateZ(-33deg) scale(.8); }
	.uc { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.uc-art { height: 480px; }
	.uc-prompt { left: 16px; right: 16px; }
	.uc-list button { font-size: 28px; line-height: 36px; }
	.uc-foot { margin-top: 40px; }
	.why { padding: 80px 0; margin-top: 80px; }
	.why .wrap { width: calc(100% - 32px); }
	/* a phone crops the wide city to the plaza; a shade keeps the copy readable */
	.cta-stage { height: 720px; }
	.cta-stage::after { background: linear-gradient(rgba(5, 6, 10, .75), rgba(5, 6, 10, .35) 40%, transparent 60%); }
	.globe { width: 520px; height: 520px; right: -40%; }
	.stats { grid-template-columns: 1fr; }
	.stats > div + div { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
	.secure { flex-direction: column; align-items: flex-start; padding: 32px 24px; }
	.faq-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.faq-side { position: static; }
	.acc { border-left: 0; }
	.acc summary { padding-left: 0; padding-right: 0; font-size: 17px; }
	.acc-a { padding: 0; }
	.cta-btns { flex-wrap: wrap; justify-content: center; }
	.foot { width: calc(100% - 32px); margin-top: -90px; padding: 36px 24px; }
	.foot-cols { grid-template-columns: repeat(2, auto); gap: 32px 48px; }
	.form, .chat { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.intro, .hero-title .w, .hero-art, [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
	.marquee-track { animation: none !important; }
}