/* Hallmark · genre: atmospheric · macrostructure: Marquee Hero · tone: technical, after-dark · anchor hue: 288 (Review violet)
 * theme: Midnight structure + preserved app accent · nav: N5 floating pill · footer: Ft5 statement
 * enrichment: real product screenshot on a violet bloom + cropped UI details in an uneven grid
 * Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html,
body {
	overflow-x: clip;
}
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
body {
	margin: 0;
	background: var(--color-paper);
	color: var(--color-ink-2);
	font: 400 var(--text-md) / 1.6 var(--font-body);
	-webkit-font-smoothing: antialiased;
}
img {
	display: block;
	max-width: 100%;
	height: auto;
}
h1,
h2,
h3 {
	margin: 0;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-style: normal;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.08;
	overflow-wrap: anywhere;
	min-width: 0;
	text-wrap: balance;
}
p {
	margin: 0;
	text-wrap: pretty;
}
a {
	color: inherit;
}
code,
kbd,
pre {
	font-family: var(--font-mono);
}
code {
	font-size: 0.9em;
	color: var(--color-ink);
}
kbd {
	display: inline-block;
	padding: 0.05em 0.4em;
	border: var(--rule-w) solid var(--color-rule-2);
	border-radius: 6px;
	background: var(--color-paper-3);
	font-size: 0.8em;
	letter-spacing: 0;
	vertical-align: 0.12em;
}
:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
}

.skip {
	position: absolute;
	left: var(--space-md);
	top: -100px;
	z-index: 30;
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius-sm);
	background: var(--color-ink);
	color: var(--color-paper);
}
.skip:focus {
	top: var(--space-md);
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 var(--space-lg);
	border: var(--rule-w) solid transparent;
	border-radius: var(--radius-pill);
	font: 500 var(--text-sm) / 1 var(--font-body);
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		transform var(--dur-fast) var(--ease-out);
}
.btn:active {
	transform: translateY(1px);
}
.btn--primary {
	background: var(--color-accent);
	color: var(--color-accent-ink);
}
.btn--primary:hover {
	background: var(--color-accent-hover);
	box-shadow: 0 0 0 6px var(--color-accent-soft);
}
.btn--ghost {
	border-color: var(--color-rule-2);
	color: var(--color-ink);
}
.btn--ghost:hover {
	border-color: var(--color-muted);
	background: var(--color-paper-2);
}
.btn--sm {
	min-height: 34px;
	padding: 0 var(--space-md);
}

/* N5 — floating pill nav */
.pill {
	position: fixed;
	top: var(--space-md);
	left: 50%;
	z-index: 20;
	transform: translateX(-50%);
	width: max-content;
	display: inline-flex;
	align-items: center;
	gap: var(--space-lg);
	padding: 6px 6px 6px var(--space-md);
	border: var(--rule-w) solid var(--color-rule);
	border-radius: var(--radius-pill);
	background: var(--color-nav);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	box-shadow: 0 12px 32px -16px var(--color-shadow);
	font-size: var(--text-sm);
	white-space: nowrap;
}
.pill__brand {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	color: var(--color-ink);
	font-weight: 600;
	text-decoration: none;
}
.pill__link {
	color: var(--color-ink-2);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out);
}
.pill__link:hover {
	color: var(--color-ink);
}

/* Hero — centred statement over a single violet bloom, product below */
.hero {
	position: relative;
	isolation: isolate;
	padding: calc(var(--space-4xl) + var(--space-xl)) var(--space-lg) 0;
	text-align: center;
}
.hero::before {
	content: '';
	position: absolute;
	inset: 22% -20% auto;
	height: 70%;
	z-index: -1;
	background:
		radial-gradient(50% 50% at 50% 50%, var(--color-bloom), transparent 70%),
		radial-gradient(35% 40% at 80% 30%, var(--color-bloom-2), transparent 70%);
	filter: blur(40px);
	pointer-events: none;
}
.hero__text {
	display: grid;
	justify-items: center;
	gap: var(--space-lg);
	max-width: 760px;
	margin: 0 auto;
}
.hero h1 {
	font-size: var(--text-display);
	letter-spacing: -0.045em;
	line-height: 1;
}
.lede {
	max-width: 54ch;
	color: var(--color-ink-2);
	font-size: var(--text-lg);
	line-height: 1.5;
}
.cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm);
	margin-top: var(--space-xs);
}
.meta {
	color: var(--color-muted);
	font: 400 var(--text-xs) / 1.5 var(--font-mono);
}
.hero__shot {
	max-width: 1180px;
	margin: var(--space-3xl) auto 0;
	padding: 6px;
	border: var(--rule-w) solid var(--color-rule-2);
	border-radius: var(--radius-lg);
	background: var(--color-paper-2);
	box-shadow:
		0 40px 120px -40px var(--color-bloom),
		0 30px 60px -30px var(--color-shadow);
	-webkit-mask-image: linear-gradient(to bottom, black 70%, transparent);
	mask-image: linear-gradient(to bottom, black 70%, transparent);
}
.hero__shot img {
	border-radius: calc(var(--radius-lg) - 6px);
}

/* Features — uneven grid, each tile shows a real slice of the UI */
.features {
	max-width: 1180px;
	margin: 0 auto;
	padding: var(--space-3xl) var(--space-lg);
}
.features h2 {
	max-width: 18ch;
	margin-bottom: var(--space-2xl);
	font-size: var(--text-2xl);
}
.grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--space-md);
}
.tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	min-width: 0;
	overflow: hidden;
	padding: var(--space-xl) var(--space-xl) 0;
	border: var(--rule-w) solid var(--color-rule);
	border-radius: var(--radius-lg);
	background: linear-gradient(to bottom, var(--color-paper-3), var(--color-paper-2));
	transition: border-color var(--dur-base) var(--ease-out);
}
.tile:hover {
	border-color: var(--color-rule-2);
}
.tile__text {
	display: grid;
	gap: var(--space-xs);
	max-width: 44ch;
}
.tile h3 {
	font-size: var(--text-xl);
	letter-spacing: -0.025em;
}
.tile p {
	color: var(--color-muted);
	font-size: var(--text-sm);
	line-height: 1.55;
}
.tile__img {
	margin-top: auto;
	border: var(--rule-w) solid var(--color-rule-2);
	border-bottom: 0;
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	box-shadow: 0 -20px 40px -24px var(--color-shadow);
}
/* Wide tiles let the capture run off the right edge */
.tile--comment,
.tile--palette,
.tile--compare {
	grid-column: span 4;
}
.tile--comment .tile__img,
.tile--palette .tile__img,
.tile--compare .tile__img {
	width: 118%;
	max-width: none;
	border-right: 0;
	border-top-right-radius: 0;
}
.tile--providers {
	grid-column: span 2;
	grid-row: span 2;
}
.tile--providers .tile__img {
	width: 94%;
	align-self: center;
}
.tile--plain {
	grid-column: span 2;
	justify-content: flex-end;
	gap: var(--space-xs);
	padding-bottom: var(--space-xl);
	background: radial-gradient(120% 90% at 100% 0%, var(--color-accent-soft), transparent 60%), var(--color-paper-2);
}
.tile--compare {
	padding-bottom: 0;
}
.tile--compare .tile__img {
	width: 130%;
}

/* Download */
.download {
	max-width: 1180px;
	margin: 0 auto;
	padding: var(--space-3xl) var(--space-lg);
	scroll-margin-top: var(--space-2xl);
}
.download h2 {
	font-size: var(--text-2xl);
}
.download__sub {
	margin-top: var(--space-xs);
	color: var(--color-muted);
}
.files {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-md);
	margin: var(--space-xl) 0 0;
	padding: 0;
	list-style: none;
}
.files a {
	position: relative;
	display: grid;
	gap: var(--space-2xs);
	height: 100%;
	padding: var(--space-lg);
	border: var(--rule-w) solid var(--color-rule);
	border-radius: var(--radius-md);
	background: var(--color-paper-2);
	text-decoration: none;
	transition:
		border-color var(--dur-base) var(--ease-out),
		background-color var(--dur-base) var(--ease-out);
}
.files a::after {
	content: '↓';
	position: absolute;
	top: var(--space-lg);
	right: var(--space-lg);
	color: var(--color-muted);
	transition: transform var(--dur-base) var(--ease-out);
}
.files a:hover {
	border-color: var(--color-rule-2);
	background: var(--color-paper-3);
}
.files a:hover::after {
	color: var(--color-ink);
	transform: translateY(2px);
}
.files__os {
	color: var(--color-ink);
	font-size: var(--text-lg);
	font-weight: 600;
	letter-spacing: -0.02em;
}
.files__detail {
	color: var(--color-muted);
	font: 400 var(--text-xs) / 1.5 var(--font-mono);
}
.files li.is-yours a {
	border-color: var(--color-accent);
	background: linear-gradient(to bottom, var(--color-accent-soft), var(--color-paper-2));
}
.files li.is-yours .files__detail::after {
	content: 'Your system';
	display: block;
	margin-top: var(--space-2xs);
	color: var(--color-accent);
}

.first-open {
	margin-top: var(--space-xl);
	color: var(--color-muted);
	font-size: var(--text-sm);
}
.first-open summary {
	width: fit-content;
	color: var(--color-ink-2);
	cursor: pointer;
}
.first-open p {
	margin-top: var(--space-sm);
}
.first-open ul {
	display: grid;
	gap: var(--space-2xs);
	margin: var(--space-xs) 0 0;
	padding-left: var(--space-lg);
}
.first-open strong {
	color: var(--color-ink-2);
	font-weight: 500;
}

.source {
	display: grid;
	gap: var(--space-sm);
	margin-top: var(--space-2xl);
	padding-top: var(--space-xl);
	border-top: var(--rule-w) solid var(--color-rule);
	color: var(--color-muted);
	font-size: var(--text-sm);
}
.source pre {
	margin: 0;
	padding: var(--space-md) var(--space-lg);
	overflow-x: auto;
	border: var(--rule-w) solid var(--color-rule);
	border-radius: var(--radius-md);
	background: var(--color-paper-2);
	color: var(--color-ink);
	font-size: var(--text-sm);
	line-height: 1.8;
}

/* Ft5 — statement footer */
.footer {
	max-width: 1180px;
	margin: 0 auto;
	padding: var(--space-4xl) var(--space-lg) var(--space-xl);
}
.footer__line {
	max-width: 16ch;
	color: var(--color-ink);
	font: 600 var(--text-display) / 1 var(--font-display);
	letter-spacing: -0.045em;
}
.footer__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-lg);
	margin-top: var(--space-2xl);
	padding-top: var(--space-lg);
	border-top: var(--rule-w) solid var(--color-rule);
	color: var(--color-muted);
	font-size: var(--text-sm);
}
.footer__meta a {
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--dur-fast) var(--ease-out);
}
.footer__meta a:hover {
	color: var(--color-ink);
}

/* Tablet */
@media (max-width: 960px) {
	.tile--comment,
	.tile--palette,
	.tile--compare {
		grid-column: span 6;
	}
	.tile--providers {
		grid-column: span 3;
		grid-row: span 1;
	}
	.tile--plain {
		grid-column: span 3;
	}
	.files {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Phone */
@media (max-width: 600px) {
	.hero {
		padding: calc(var(--space-3xl) + var(--space-xl)) var(--space-md) 0;
	}
	.hero__shot {
		margin-top: var(--space-2xl);
		padding: 4px;
		border-radius: var(--radius-md);
	}
	.cta .btn {
		width: 100%;
	}
	.cta {
		width: 100%;
	}
	.features,
	.download,
	.footer {
		padding-inline: var(--space-md);
	}
	.tile--providers,
	.tile--plain {
		grid-column: span 6;
	}
	.tile {
		padding: var(--space-lg) var(--space-lg) 0;
	}
	.tile--plain {
		padding-bottom: var(--space-lg);
	}
	.tile--providers .tile__img {
		width: 70%;
	}
	.files {
		grid-template-columns: minmax(0, 1fr);
	}
	.pill {
		gap: var(--space-md);
	}
}

/* Works-with strip */
.marquee {
	display: grid;
	justify-items: center;
	gap: var(--space-md);
	padding: var(--space-3xl) 0 var(--space-xl);
}
.marquee__label {
	color: var(--color-muted);
	font: 400 var(--text-xs) / 1 var(--font-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.marquee__viewport {
	width: 100%;
	max-width: 1180px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
	mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}
.marquee__track {
	display: flex;
	width: max-content;
}
.marquee ul {
	display: flex;
	gap: var(--space-2xl);
	margin: 0;
	padding: 0 var(--space-2xl) 0 0;
	list-style: none;
}
.marquee li {
	color: var(--color-ink-2);
	font-size: var(--text-lg);
	font-weight: 500;
	letter-spacing: -0.02em;
	white-space: nowrap;
}
.marquee li::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: var(--space-sm);
	border-radius: 50%;
	background: var(--color-accent);
	vertical-align: 0.2em;
}

/* 3D stage for the hero capture — tilt is driven by scroll (main.js sets --tilt and --lift) */
.stage {
	perspective: 1400px;
	perspective-origin: 50% 0%;
}
.hero__shot {
	transform: rotateX(var(--tilt, 0deg)) scale(var(--lift, 1));
	transform-origin: 50% 0%;
	will-change: transform;
}

/* Spotlight that follows the cursor across the feature tiles */
.tile::before,
.tile::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--dur-base) var(--ease-out);
}
.tile::before {
	z-index: 2;
	padding: 1px;
	background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), var(--color-accent), transparent 70%);
	-webkit-mask:
		linear-gradient(black 0 0) content-box,
		linear-gradient(black 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}
.tile::after {
	z-index: 0;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), var(--color-glow), transparent 70%);
}
.grid:hover .tile::before,
.grid:hover .tile::after {
	opacity: 1;
}
.tile > * {
	position: relative;
	z-index: 1;
}
.tile__img {
	transition: transform var(--dur-slow) var(--ease-out);
}
.tile:hover .tile__img {
	transform: translateY(-6px);
}

/* Primary button sheen */
.btn--primary {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.btn--primary::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(100deg, transparent 30%, var(--color-sheen) 50%, transparent 70%);
	transform: translateX(-120%);
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.hero__text > :not(h1) {
		animation: rise var(--dur-slow) var(--ease-out) both;
		animation-delay: 450ms;
	}
	.split .w {
		display: inline-block;
		animation: word 900ms var(--ease-out) both;
		animation-delay: calc(var(--i) * 80ms);
	}
	.stage {
		animation: rise 1000ms var(--ease-out) 600ms both;
	}
	.hero::before {
		animation: drift 14s var(--ease-in-out) infinite alternate;
	}
	.marquee__track {
		animation: scroll 42s linear infinite;
	}
	.marquee:hover .marquee__track {
		animation-play-state: paused;
	}
	.btn--primary::after {
		animation: sheen 5s var(--ease-in-out) 1.6s infinite;
	}
	html.motion .reveal {
		opacity: 0;
		transform: translateY(28px);
		transition:
			opacity 800ms var(--ease-out),
			transform 800ms var(--ease-out),
			border-color var(--dur-base) var(--ease-out);
		transition-delay: var(--d, 0ms);
	}
	html.motion .reveal.is-in {
		opacity: 1;
		transform: none;
	}
	html.motion .tile--palette.is-in kbd {
		animation: press 700ms var(--ease-out) 700ms both;
	}
}
@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
}
@keyframes word {
	from {
		opacity: 0;
		transform: translateY(0.35em);
		filter: blur(10px);
	}
}
@keyframes drift {
	to {
		transform: translate3d(4%, -3%, 0) scale(1.08);
	}
}
@keyframes scroll {
	to {
		transform: translateX(-50%);
	}
}
@keyframes sheen {
	0% {
		transform: translateX(-120%);
	}
	30%,
	100% {
		transform: translateX(120%);
	}
}
@keyframes press {
	0%,
	100% {
		transform: none;
	}
	40% {
		transform: translateY(2px);
		border-bottom-width: 1px;
		background: var(--color-accent-soft);
		color: var(--color-accent);
	}
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
	}
	.hero__shot {
		transform: none;
	}
	.marquee ul[aria-hidden='true'] {
		display: none;
	}
	.marquee ul {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: var(--space-sm);
		padding: 0 var(--space-md);
	}
	.marquee__viewport {
		-webkit-mask-image: none;
		mask-image: none;
	}
}