:root {
	--bg: oklch(17% .008 250);
	--fg: oklch(95% .005 255);
	--surface: oklch(21% .012 255);
	--primary: oklch(79% .14 197);
	--primary-fg: oklch(17% .008 250);
	--muted: oklch(70% .021 257);
	--border: oklch(33% .017 258);
	--danger: oklch(62% .21 25);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.landing {
	margin: 0;
	min-height: 100vh;
	background: var(--bg);
	color: var(--fg);
	font-family: Inter, ui-sans-serif, system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

body.landing img { max-width: 100%; }

body.landing a { color: inherit; text-decoration: none; }

body.landing button,
body.landing input,
body.landing textarea { font: inherit; }

.landing-page { position: relative; z-index: 1; }

.orb {
	position: fixed;
	z-index: 0;
	border-radius: 999px;
	pointer-events: none;
	background: color-mix(in oklab, var(--primary) 10%, transparent);
	filter: blur(100px);
	animation: drift 18s ease-in-out infinite alternate;
}

.orb-a { top: 15%; left: -8rem; width: 20rem; height: 20rem; }
.orb-b { top: 45%; right: -8rem; width: 24rem; height: 24rem; background: color-mix(in oklab, var(--primary) 8%, transparent); filter: blur(110px); animation-delay: -6s; }
.orb-c { bottom: -6rem; left: 30%; width: 18rem; height: 18rem; background: color-mix(in oklab, var(--primary) 7%, transparent); animation-delay: -12s; }

.topbar {
	position: sticky;
	top: 0;
	z-index: 50;
	height: 56px;
	border-bottom: 1px solid var(--border);
	background: color-mix(in oklab, var(--bg) 80%, transparent);
	backdrop-filter: blur(12px);
}

.topbar-inner,
.wrap { width: min(1024px, calc(100% - 40px)); margin: 0 auto; }

.topbar-inner { height: 100%; display: flex; align-items: center; }

.brand { display: flex; align-items: center; gap: 8px; min-width: 0; }

.brand img { width: 22px; height: 22px; border-radius: 4px; object-fit: contain; opacity: .9; }

.brand span,
.display { font-family: "Space Grotesk", Inter, sans-serif; }

.brand span { font-size: 15px; font-weight: 700; letter-spacing: -.025em; }

.hero { position: relative; overflow: hidden; }

.hero-glow,
.shot-glow {
	position: absolute;
	border-radius: 999px;
	pointer-events: none;
	filter: blur(90px);
	background: color-mix(in oklab, var(--primary) 20%, transparent);
}

.hero-glow-a { top: -6rem; right: -6rem; width: 18rem; height: 18rem; }
.hero-glow-b { top: 10rem; left: -5rem; width: 14rem; height: 14rem; background: color-mix(in oklab, var(--primary) 10%, transparent); filter: blur(80px); }

.hero-copy { position: relative; padding: 48px 0 32px; }

.eyebrow {
	margin: 0;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--primary);
}

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

h1 {
	margin-top: 16px;
	font-family: "Space Grotesk", Inter, sans-serif;
	font-size: 44px;
	font-weight: 700;
	line-height: .95;
	letter-spacing: -.025em;
	text-wrap: balance;
}

h1 .accent,
.accent { color: var(--primary); }

.lead {
	margin-top: 20px;
	max-width: 52ch;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.625;
	text-wrap: pretty;
}

.hero-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	background: var(--primary);
	color: var(--primary-fg);
	padding: 14px 24px;
	font-family: "Space Grotesk", Inter, sans-serif;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .2s;
}

.btn:hover { background: color-mix(in oklab, var(--primary) 85%, white); }

.btn:disabled { opacity: .6; cursor: default; }

.btn-block { width: 100%; }

.link-ghost {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 13px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--muted);
	text-align: center;
}

.hero-visual { position: relative; padding-bottom: 40px; }

.glass {
	background: linear-gradient(135deg, color-mix(in oklab, var(--fg) 9%, transparent), color-mix(in oklab, var(--fg) 2%, transparent));
	border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
	backdrop-filter: blur(14px);
}

.hero-card { max-width: 384px; margin: 0 auto; border-radius: 28px; padding: 20px; }

.hero-photo {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 18px;
	background: var(--surface);
}

.hero-photo img { width: 100%; height: 100%; object-fit: cover; }

.ripple {
	position: absolute;
	top: 51%;
	left: 37%;
	width: 64px;
	height: 64px;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.ripple i {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	border: 1px solid color-mix(in oklab, var(--primary) 60%, transparent);
	animation: ripple 2.6s cubic-bezier(.32, .72, 0, 1) infinite;
}

.ripple i + i { border-color: color-mix(in oklab, var(--primary) 40%, transparent); animation-delay: .6s; }

.ripple b {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: color-mix(in oklab, var(--primary) 25%, transparent);
}

.hero-caption {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--muted);
}

.dot { width: 8px; height: 8px; border-radius: 999px; background: var(--primary); flex: none; }

.section { border-top: 1px solid var(--border); }

.section-pad { padding: 48px 0; }

.wrap-narrow { width: min(768px, calc(100% - 40px)); margin: 0 auto; }

.wrap-form { width: min(576px, calc(100% - 40px)); margin: 0 auto; }

h2 {
	margin-top: 8px;
	font-family: "Space Grotesk", Inter, sans-serif;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -.025em;
	line-height: 1.15;
	text-wrap: balance;
}

.prose { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }

.prose p,
.muted { color: var(--muted); font-size: 15px; line-height: 1.625; text-wrap: pretty; }

.shot { position: relative; overflow: hidden; border-radius: 24px; padding: 8px; }

.shot-glow {
	inset: -40px;
	background: color-mix(in oklab, var(--primary) 10%, transparent);
	filter: blur(60px);
	opacity: .6;
	transition: opacity .7s;
}

.shot:hover .shot-glow { opacity: 1; }

.shot-frame { position: relative; overflow: hidden; border-radius: 18px; background: var(--bg); }

.shot img { display: block; width: 100%; height: auto; transition: transform 1.2s ease; }

.shot:hover img { transform: scale(1.03); }

.shot-narrow { max-width: 448px; margin: 0 auto 40px; }

.steps,
.cards { display: grid; gap: 12px; margin-top: 28px; }

.step,
.card { border-radius: 16px; padding: 16px; }

.step { display: flex; align-items: flex-start; gap: 16px; height: 100%; }

.step-no {
	font-family: "Space Grotesk", Inter, sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	color: var(--primary);
}

.step h3,
.card h3 {
	font-family: "Space Grotesk", Inter, sans-serif;
	font-size: 16px;
	font-weight: 600;
}

.step p,
.card p { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.625; }

.card { position: relative; height: 100%; overflow: hidden; padding: 20px; transition: transform .3s, border-color .3s, box-shadow .3s; }

.card .shine {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: var(--primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .5s;
}

.card:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--primary) 50%, transparent); box-shadow: 0 0 30px -10px var(--primary); }

.card:hover .shine { transform: scaleX(1); }

.card:hover h3 { color: var(--primary); }

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

.card-no {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	color: var(--primary);
}

.card p { margin-top: 8px; }

.card-feature { border-color: color-mix(in oklab, var(--primary) 40%, transparent); }

.card-feature:hover { transform: none; box-shadow: 0 0 40px -12px var(--primary); }

.card-feature h3,
.card-feature:hover h3 { color: var(--primary); }

.card-glow {
	position: absolute;
	top: -4rem;
	right: -4rem;
	width: 10rem;
	height: 10rem;
	border-radius: 999px;
	background: color-mix(in oklab, var(--primary) 15%, transparent);
	filter: blur(48px);
	pointer-events: none;
}

.stars { display: flex; align-items: center; gap: 10px; margin-top: 16px; }

.stars svg { width: 24px; height: 24px; fill: var(--primary); }

.note { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.625; }

.panel { border-radius: 16px; padding: 20px; }

.stack { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }

.pills { display: flex; flex-wrap: wrap; gap: 8px; }

.pill {
	position: relative;
	border-radius: 999px;
	border: 1px solid var(--border);
	color: var(--muted);
	background: transparent;
	padding: 6px 12px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color .2s, color .2s, background-color .2s;
}

.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.pill:hover { border-color: color-mix(in oklab, var(--primary) 50%, transparent); color: var(--fg); }

.pill:has(input:checked),
.pill.is-on {
	border-color: var(--primary);
	background: color-mix(in oklab, var(--primary) 15%, transparent);
	color: var(--primary);
}

.field {
	width: 100%;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--fg);
	padding: 14px 16px;
	font-size: 15px;
}

.field::placeholder { color: color-mix(in oklab, var(--muted) 70%, transparent); }

.field:focus { outline: none; border-color: color-mix(in oklab, var(--primary) 60%, transparent); }

textarea.field { resize: none; }

.form-error { margin: 0; color: var(--danger); font-size: 13px; }

.reflecto-slot {
	margin: 16px 0 0;
	padding: 14px 16px;
	border: 1px dashed color-mix(in oklab, var(--primary) 55%, var(--border));
	border-radius: 12px;
	color: var(--muted);
	font-size: 13px;
	background: color-mix(in oklab, var(--primary) 8%, transparent);
}

.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

.contacts { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }

.contacts .eyebrow { letter-spacing: .15em; color: var(--muted); }

.contacts a { display: block; }

.contacts a.accent { font-weight: 500; color: var(--primary); }

.result { margin-top: 16px; border-radius: 16px; padding: 20px; }

.result-title {
	margin-top: 8px;
	font-family: "Space Grotesk", Inter, sans-serif;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.375;
	text-wrap: balance;
}

.devices { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }

.device { border: 1px solid var(--border); border-radius: 12px; padding: 16px; }

.device-name { font-family: "Space Grotesk", Inter, sans-serif; font-size: 15px; font-weight: 600; }

.device-place {
	margin-top: 4px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--primary);
}

.device-text { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.625; }

.result h3 { margin-top: 20px; font-family: "Space Grotesk", Inter, sans-serif; font-size: 14px; font-weight: 600; }

.flow,
.tips { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.flow li,
.tips li { display: flex; gap: 12px; color: var(--muted); font-size: 13px; line-height: 1.625; }

.flow li span:first-child,
.tips li span:first-child { color: var(--primary); flex: none; }

.flow li span:first-child { font-family: "JetBrains Mono", ui-monospace, monospace; }

.result .next { margin-top: 20px; font-size: 14px; line-height: 1.625; }

.result .btn,
.block-gap .btn { width: 100%; margin-top: 24px; }

.skeleton { margin-top: 16px; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }

.skeleton i {
	display: block;
	height: 12px;
	border-radius: 999px;
	background: var(--surface);
	animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
}

.skeleton i:nth-child(1) { width: 66%; }
.skeleton i:nth-child(3) { width: 80%; }

.site-footer { border-top: 1px solid var(--border); }

.site-footer .wrap {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 32px 0;
}

.site-footer .brand img { width: 18px; height: 18px; border-radius: 3px; opacity: .8; }

.site-footer .brand span { font-size: 14px; }

.tagline {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: color-mix(in oklab, var(--muted) 70%, transparent);
}

.text-btn {
	margin-top: 16px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--primary);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: .15em;
	text-transform: uppercase;
	cursor: pointer;
}

.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.32, .72, 0, 1), transform .7s cubic-bezier(.32, .72, 0, 1); }

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

.d1 { transition-delay: 90ms; }
.d2 { transition-delay: 180ms; }
.d3 { transition-delay: 280ms; }
.d4 { transition-delay: 80ms; }
.d5 { transition-delay: 160ms; }
.d6 { transition-delay: 240ms; }
.d7 { transition-delay: 320ms; }

.rise { animation: rise .7s cubic-bezier(.32, .72, 0, 1) both; }
.rise-1 { animation-delay: 80ms; }
.rise-2 { animation-delay: 160ms; }
.rise-3 { animation-delay: 240ms; }
.rise-4 { animation-delay: 320ms; }

.block-gap { margin-top: 24px; }

@media (min-width: 640px) {
	h1 { font-size: 64px; }
	h2 { font-size: 36px; }
	.lead { font-size: 17px; }
	.hero-actions { flex-direction: row; align-items: center; }
	.hero-actions .btn,
	.result .btn,
	.block-gap .btn { width: auto; }
	.steps { grid-template-columns: repeat(3, 1fr); }
	.cards { grid-template-columns: 1fr 1fr; }
	.card-feature { grid-column: 1 / -1; }
	.shot { padding: 12px; }
	.site-footer .wrap { flex-direction: row; align-items: center; justify-content: space-between; }
	.panel { padding: 20px; }
}

@media (max-width: 800px) {
	.orb,
	.hero-glow,
	.shot-glow,
	.card-glow { display: none; }
	.topbar,
	.glass {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.topbar { background: var(--bg); }
	.glass { background: var(--surface); }
	.ripple i,
	.rise { animation: none; }
	.js .reveal { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.orb, .rise, .ripple i, .skeleton i { animation: none; }
	.js .reveal { opacity: 1; transform: none; }
	.shot img, .card, .card .shine { transition: none; }
}

@keyframes drift {
	0% { transform: translate(0) scale(1); }
	50% { transform: translate(40px, -30px) scale(1.1); }
	100% { transform: translate(-30px, 25px) scale(.95); }
}

@keyframes rise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}

@keyframes ripple {
	0% { opacity: .55; transform: scale(.4); }
	70% { opacity: 0; }
	100% { opacity: 0; transform: scale(2.4); }
}

@keyframes pulse {
	50% { opacity: .5; }
}