/* ---------- Reset & tokens ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, p, blockquote, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }

:root {
	--bg: #0d0d0d;
	--bg-alt: #131313;
	--surface: #17171799;
	--border: #ffffff1a;
	--text: #f2f2f2;
	--text-dim: #cccccc;
	--text-muted: #8a8a8a;
	--accent: #ffffff;
	--radius-pill: 50px;
	--radius: 20px;
	--container: 1160px;
}

body {
	background: var(--bg);
	color: var(--text-dim);
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 400;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}
.container--narrow { max-width: 760px; }

.section { padding: 100px 0; }
.section--dark { background: var(--bg-alt); }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 16px;
}
.eyebrow--center { display: flex; justify-content: center; width: 100%; }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; }

.section-title {
	font-size: 36px;
	font-weight: 400;
	color: var(--text-dim);
	max-width: 760px;
	line-height: 1.2;
}
.section-title--center { margin: 0 auto 56px; text-align: center; }

.lead { font-size: 18px; color: var(--text-muted); max-width: 520px; }
.lead--center { margin: 16px auto 40px; text-align: center; max-width: 560px; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 28px;
	border-radius: var(--radius-pill);
	font-weight: 500;
	font-size: 15px;
	border: 1px solid transparent;
	cursor: pointer;
}
/* Original site: standard CTAs carry a permanent halo glow but no extra hover
   micro-interaction — the sparkle button below is the one deliberate hover moment. */
.btn--primary { background: var(--accent); color: #0d0d0d; box-shadow: 0 20px 35px -10px #ffffff26; }
.btn--ghost { background: rgba(23,23,23,.6); color: var(--text); border-color: var(--border); backdrop-filter: blur(8px); padding: 12px 22px; }
.btn--centered { display: flex; width: fit-content; margin: 0 auto; }

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 20px;
	z-index: 100;
	display: flex;
	justify-content: center;
}
.site-header__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	background: rgba(20,20,20,.7);
	backdrop-filter: blur(12px);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	padding: 10px 12px 10px 22px;
	width: min(92%, 900px);
}
.logo { font-weight: 700; font-size: 20px; color: var(--text); margin-right: auto; }
.main-nav { display: flex; align-items: center; gap: 26px; }
.main-nav a { font-size: 14px; color: var(--text-muted); white-space: nowrap; transition: color .3s cubic-bezier(.44,0,.56,1); }
.main-nav a:hover { color: var(--text-dim); }
.header-cta { margin-left: auto; }

.nav-toggle {
	display: none;
	width: 40px; height: 40px;
	border: none; background: transparent;
	flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span { width: 20px; height: 2px; background: var(--text); border-radius: 2px; }

/* ---------- Hero ---------- */
.hero { padding-top: 140px; text-align: center; }
.hero__inner { display: flex; flex-direction: column; align-items: center; }
.hero h1 { font-size: 46px; font-weight: 500; color: var(--text-dim); line-height: 1.2; margin-bottom: 20px; }
.hero .lead { margin: 0 auto 32px; text-align: center; }

.logo-marquee {
	margin-top: 64px;
	overflow: hidden;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	padding: 32px 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.logo-marquee__track {
	display: flex;
	align-items: center;
	width: max-content;
	gap: 72px;
	animation: mb-marquee 32s linear infinite;
}
.logo-marquee__item { height: 26px; width: auto; object-fit: contain; opacity: .85; flex-shrink: 0; }
@keyframes mb-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-33.3333%); }
}

/* ---------- Grids & cards ---------- */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 32px;
}
.card h3 { font-size: 19px; font-weight: 500; color: var(--text); margin-bottom: 10px; }
.card p { font-size: 15px; color: var(--text-muted); }

.benefit-cards { margin-top: 48px; }

.feature-cards { margin-bottom: 40px; }

.platform-icons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 20px; width: fit-content; }
.platform-icons img {
	width: 56px; height: 56px;
	border-radius: 50%;
	object-fit: cover;
	background: #fff;
	padding: 12px;
}
/* Framer's mark is white-on-transparent — a white badge would make it vanish. */
.platform-icons img[alt="Framer"] { background: #111; }

.inline-icon { display: inline-block; height: 18px; width: 18px; object-fit: contain; vertical-align: -3px; margin-left: 4px; }

.testimonial__logo { height: 20px; width: auto; object-fit: contain; margin-bottom: 18px; opacity: .9; }

/* ---------- Sparkle button ----------
   Reproduced from the original site's own component (real markup + CSS
   supplied directly by the client), scoped under .sparkle-button so its
   fairly generic class names (.text, .spark, .backdrop…) can't leak onto
   anything else on the page. */
:root {
	--sb-transition: 0.25s;
	--sb-spark: 1.8s;
}
.feature-card--animations { position: relative; overflow: visible; }

.sparkle-button { position: relative; display: inline-block; margin-top: 20px; }
.sparkle-button svg { overflow: visible; }

.sparkle-button-btn {
	--cut: 0.1em;
	--active: 0;
	--sb-bg:
		radial-gradient(40% 50% at center 100%, hsl(270 calc(var(--active) * 97%) 72% / var(--active)), transparent),
		radial-gradient(80% 100% at center 120%, hsl(260 calc(var(--active) * 97%) 70% / var(--active)), transparent),
		hsl(260 calc(var(--active) * 97%) calc((var(--active) * 44%) + 12%));
	background: var(--sb-bg);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	border: 0;
	width: fit-content;
	cursor: pointer;
	padding: 0.75em 1.4em;
	display: flex;
	align-items: center;
	gap: 0.5em;
	white-space: nowrap;
	border-radius: 100px;
	position: relative;
	box-shadow:
		0 0 calc(var(--active) * 6em) calc(var(--active) * 3em) hsl(260 97% 61% / 0.75),
		0 0.05em 0 0 hsl(260 calc(var(--active) * 97%) calc((var(--active) * 50%) + 30%)) inset,
		0 -0.05em 0 0 hsl(260 calc(var(--active) * 97%) calc(var(--active) * 60%)) inset;
	transition: box-shadow var(--sb-transition), scale var(--sb-transition), background var(--sb-transition);
	scale: calc(1 + (var(--active) * 0.1));
}
.sparkle-button-btn:active { scale: 1; }

.sparkle-button-btn:before {
	content: "";
	position: absolute;
	inset: -0.25em;
	z-index: -1;
	border: 0.25em solid hsl(260 97% 50% / 0.5);
	border-radius: 100px;
	opacity: var(--active, 0);
	transition: opacity var(--sb-transition);
}

.sparkle-button .spark {
	position: absolute;
	inset: 0;
	border-radius: 100px;
	rotate: 0deg;
	overflow: hidden;
	mask: linear-gradient(white, transparent 50%);
	animation: mb-sb-flip calc(var(--sb-spark) * 2) infinite steps(2, end);
}
.sparkle-button .spark:before {
	content: "";
	position: absolute;
	width: 200%;
	aspect-ratio: 1;
	top: 0%;
	left: 50%;
	z-index: -1;
	translate: -50% -15%;
	transform: rotate(-90deg);
	opacity: calc((var(--active)) + 0.4);
	background: conic-gradient(from 0deg, transparent 0 340deg, white 360deg);
	transition: opacity var(--sb-transition);
	animation: mb-sb-rotate var(--sb-spark) linear infinite both;
}
.sparkle-button .spark:after { content: ""; position: absolute; inset: var(--cut); border-radius: 100px; }

.sparkle-button .backdrop {
	position: absolute;
	inset: var(--cut);
	background: var(--sb-bg);
	border-radius: 100px;
	transition: background var(--sb-transition);
}

@keyframes mb-sb-flip { to { rotate: 360deg; } }
@keyframes mb-sb-rotate { to { transform: rotate(90deg); } }

.sparkle-button-btn:is(:hover, :focus-visible) { --active: 1; }
.sparkle-button-btn:is(:hover, :focus-visible) ~ :is(.sb-bodydrop, .sparkle-button .particle-pen) { --active: 1; }

.sb-bodydrop {
	background: hsl(260 calc(var(--active) * 97%) 6%);
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.sparkle-button .particle-pen {
	position: absolute;
	width: 200%;
	aspect-ratio: 1;
	top: 50%; left: 50%;
	translate: -50% -50%;
	-webkit-mask: radial-gradient(white, transparent 65%);
	mask: radial-gradient(white, transparent 65%);
	z-index: -1;
	opacity: var(--active, 0);
	transition: opacity var(--sb-transition);
	pointer-events: none;
}

.sparkle-button .sparkle path {
	color: hsl(0 0% calc((var(--active, 0) * 70%) + var(--base)));
	transform-box: fill-box;
	transform-origin: center;
	fill: currentColor;
	stroke: currentColor;
	animation-delay: calc((var(--sb-transition) * 1.5) + (var(--delay) * 1s));
	animation-duration: 0.6s;
	transition: color var(--sb-transition);
}
.sparkle-button-btn:is(:hover, :focus-visible) .sparkle path { animation-name: mb-sb-bounce; }
@keyframes mb-sb-bounce { 35%, 65% { scale: var(--scale); } }
.sparkle-button .sparkle path:nth-of-type(1) { --scale: 0.5; --delay: 0.1; --base: 40%; }
.sparkle-button .sparkle path:nth-of-type(2) { --scale: 1.5; --delay: 0.2; --base: 20%; }
.sparkle-button .sparkle path:nth-of-type(3) { --scale: 2.5; --delay: 0.35; --base: 30%; }

.sparkle-button .text {
	translate: 2% -6%;
	letter-spacing: 0.01ch;
	background: linear-gradient(90deg, hsl(0 0% calc((var(--active) * 100%) + 65%)), hsl(0 0% calc((var(--active) * 100%) + 26%)));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	transition: background var(--sb-transition);
}
.sparkle-button-btn svg.sparkle { inline-size: 1.1em; translate: -15% -2%; }

@media (prefers-reduced-motion: reduce) {
	.sparkle-button .spark, .sparkle-button .spark:before { animation: none; }
}

/* Fake "design-tool comment" bubble pointing at the button, decorative, mirrors the original. */
.hover-hint {
	position: absolute;
	top: 50%; left: 100%;
	margin-left: 16px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}
.hover-hint__cursor {
	width: 20px; height: 20px;
	flex-shrink: 0;
	margin-right: -4px;
	fill: #3b82f6;
	stroke: #0d0d0d;
	stroke-width: 1.5;
	stroke-linejoin: round;
}
.hover-hint__bubble {
	background: #3b82f6;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: 100px 100px 100px 4px;
}

.checklist {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-bottom: 40px;
}
.checklist li {
	font-size: 14px;
	color: var(--text-dim);
	padding-left: 22px;
	position: relative;
}
.checklist li:last-child { grid-column: 1 / -1; }
.checklist li::before {
	content: "";
	position: absolute; left: 0; top: 6px;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: #4ade80;
}

/* ---------- Steps ---------- */
.steps { display: flex; flex-direction: column; gap: 0; max-width: 600px; margin: 0 auto; }
.step {
	display: grid;
	grid-template-columns: 60px 1fr;
	gap: 24px;
	align-items: start;
	padding: 32px 0;
	border-top: 1px solid var(--border);
}
.step:last-child { border-bottom: 1px solid var(--border); }
.step__number { font-size: 22px; font-weight: 600; color: var(--text-muted); }
.step h3 { font-size: 20px; font-weight: 500; color: var(--text); margin-bottom: 10px; }
.step p { font-size: 15px; color: var(--text-muted); max-width: 640px; }

/* ---------- Testimonial spotlight ---------- */
.spotlight-media {
	max-width: 420px;
	margin: 0 auto 40px;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--border);
	aspect-ratio: 1000 / 504;
}
.spotlight-media img { width: 100%; height: 100%; object-fit: cover; }
.spotlight-quote {
	font-size: 28px;
	font-weight: 500;
	color: var(--text-dim);
	text-align: center;
	max-width: 820px;
	margin: 0 auto 24px;
	line-height: 1.4;
}
.spotlight-author { display: flex; align-items: center; justify-content: center; gap: 8px; }
.spotlight-author strong { color: var(--text); font-size: 15px; }
.spotlight-author span { font-size: 13px; color: var(--text-muted); }
.spotlight-author span::before { content: "· "; }

/* ---------- Portfolio ---------- */
.portfolio-grid { margin: 48px 0 56px; }
.portfolio-card {
	display: block;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--surface);
	transition: transform .2s ease;
}
.portfolio-card:hover { transform: translateY(-4px); }
.portfolio-card img { aspect-ratio: 16/9; object-fit: cover; }
.portfolio-card h3 { font-size: 18px; color: var(--text); padding: 20px 24px 6px; }
.portfolio-card p { font-size: 14px; color: var(--text-muted); padding: 0 24px 24px; }

.portfolio-card--noimage { padding: 28px 24px; }
.portfolio-card--noimage h3 { padding: 0 0 8px; }
.portfolio-card--noimage p { padding: 0 0 14px; }
.portfolio-card--noimage .portfolio-card__result { padding-bottom: 0; color: var(--text-dim); }
.portfolio-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.portfolio-card__tags span {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--text-dim);
	background: #ffffff12;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	padding: 5px 12px;
}

.testimonials { margin-bottom: 56px; }
.testimonial { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.testimonial p { font-size: 14px; color: var(--text-dim); margin-bottom: 20px; }
.testimonial footer strong { display: block; color: var(--text); font-size: 14px; }
.testimonial footer span { font-size: 12px; color: var(--text-muted); }

.stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 48px 56px; text-align: center; }
.stat strong { display: block; font-size: 36px; font-weight: 600; color: var(--text); }
.stat span { font-size: 13px; color: var(--text-muted); }

/* ---------- FAQ ----------
   Original: a 2-variant Framer component toggled on click (not hover), all
   properties (panel height, card background, border-radius, icon rotation)
   sharing one fast near-critical spring (~220ms). Each item is independent —
   opening one does NOT close the others. */
.accordion__item {
	border-radius: 0;
	background: transparent;
	transition: background-color .22s cubic-bezier(.16,1,.3,1), border-radius .22s cubic-bezier(.16,1,.3,1);
}
.accordion__item + .accordion__item { margin-top: 1px; }
.accordion__item.is-open { background: rgb(22,22,22); border-radius: 24px; }

.accordion__question {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 22px 24px;
	background: none;
	border: none;
	border-top: 1px solid var(--border);
	cursor: pointer;
	text-align: left;
	font-size: 17px;
	font-weight: 500;
	color: var(--text);
}
.accordion__item:first-child .accordion__question { border-top: 1px solid var(--border); }
.accordion__item.is-open .accordion__question { border-top-color: transparent; }
.accordion__item:last-child { border-bottom: 1px solid var(--border); }
.accordion__item:last-child.is-open { border-bottom-color: transparent; }

.accordion__icon {
	position: relative;
	width: 16px; height: 16px;
	flex-shrink: 0;
	transform: rotate(0deg);
	transition: transform .22s cubic-bezier(.16,1,.3,1);
}
.accordion__item.is-open .accordion__icon { transform: rotate(45deg); }
.accordion__icon span {
	position: absolute; top: 50%; left: 50%;
	background: rgb(122,122,122);
	border-radius: 10px;
	transition: background-color .22s cubic-bezier(.16,1,.3,1);
}
.accordion__icon span:first-child { width: 16px; height: 2px; transform: translate(-50%, -50%); }
.accordion__icon span:last-child { width: 2px; height: 16px; transform: translate(-50%, -50%); }
.accordion__item.is-open .accordion__icon span { background: rgb(204,204,204); }

.accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .22s cubic-bezier(.16,1,.3,1);
}
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel-inner {
	min-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: opacity .18s ease;
}
.accordion__item.is-open .accordion__panel-inner { opacity: 1; transition-delay: .05s; }

.accordion__content, .accordion__panel-inner {
	padding: 0 24px 22px;
	font-size: 15px;
	color: var(--text-muted);
}
.accordion__panel-inner p + p { margin-top: 12px; }
.accordion__panel-inner ul { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.accordion__panel-inner li { padding-left: 18px; position: relative; }
.accordion__panel-inner li::before { content: "–"; position: absolute; left: 0; }

.faq-more { text-align: center; margin-top: 32px; font-size: 14px; color: var(--text-muted); }
.faq-more a { color: var(--text); text-decoration: underline; }

.cta { text-align: center; }

/* ---------- Footer ---------- */
.site-footer { padding: 56px 0; border-top: 1px solid var(--border); }
.site-footer__inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.site-footer__copy { font-size: 13px; color: var(--text-muted); }
.site-footer__legal { display: flex; gap: 20px; }
.site-footer__legal a { font-size: 13px; color: var(--text-muted); }
.site-footer__legal a:hover { color: var(--text-dim); }

/* ---------- Legal pages ---------- */
.legal-page .section-title { margin-bottom: 40px; }
.legal-page__content { color: var(--text-muted); font-size: 15px; line-height: 1.7; }
.legal-page__content h2 { color: var(--text); font-size: 20px; font-weight: 500; margin: 40px 0 14px; }
.legal-page__content h2:first-child { margin-top: 0; }
.legal-page__content p { margin-bottom: 14px; }
.legal-page__content ul { margin: 0 0 14px; padding-left: 20px; list-style: disc; }
.legal-page__content li { margin-bottom: 6px; }
.legal-page__content a { color: var(--text-dim); text-decoration: underline; }
.legal-page__content strong { color: var(--text-dim); }

/* ---------- Scroll reveal ----------
   Timings measured on the original Framer site: most sections use a fast,
   near-critically-damped spring (~300-350ms, no visible bounce) on
   scroll-into-view; the two card grids (benefits, features) use a slightly
   looser spring that DOES overshoot a touch; the hero uses a slower one-shot
   entrance on load instead of scroll. Process steps deliberately have NO
   artificial stagger between them — each one just plays on its own the
   moment it individually crosses into view. */
.reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Hero: one-shot entrance on load, not scroll-triggered. */
.hero .reveal { transform: translateY(30px); }
.reveal-1 { transition: opacity .6s cubic-bezier(.12,.23,.23,.98), transform .6s cubic-bezier(.12,.23,.23,.98); transition-delay: .3s; }
.reveal-2 { transition: opacity .6s cubic-bezier(.12,.23,.23,.98), transform .6s cubic-bezier(.12,.23,.23,.98); transition-delay: .5s; }
.reveal-3 { transition: opacity 1.2s cubic-bezier(.44,0,.56,1), transform 1.2s cubic-bezier(.44,0,.56,1); transition-delay: .7s; }
.reveal-4 { transition: opacity .6s cubic-bezier(.12,.23,.23,.98), transform .6s cubic-bezier(.12,.23,.23,.98); transition-delay: 1.4s; }

/* Card grids: looser spring with a light overshoot. */
.benefit-cards .reveal, .feature-cards .reveal, .portfolio-grid .reveal {
	transform: translateY(10px);
	transition: opacity .4s cubic-bezier(.34,1.56,.64,1), transform .4s cubic-bezier(.34,1.56,.64,1);
}
.benefit-cards .reveal:nth-child(2) { transition-delay: .2s; }
.benefit-cards .reveal:nth-child(3) { transition-delay: .4s; }

.feature-cards .reveal:nth-child(2) { transition-delay: .1s; }
.feature-cards .reveal:nth-child(3) { transition-delay: .2s; }
.feature-cards .reveal:nth-child(4) { transition-delay: .3s; }
.feature-cards .reveal:nth-child(5) { transition-delay: .4s; }

.portfolio-grid .reveal:nth-child(2) { transition-delay: .1s; }
.portfolio-grid .reveal:nth-child(3) { transition-delay: .2s; }
.portfolio-grid .reveal:nth-child(4) { transition-delay: .3s; }
.portfolio-grid .reveal:nth-child(5) { transition-delay: .4s; }
.portfolio-grid .reveal:nth-child(6) { transition-delay: .5s; }

/* Testimonial spotlight: quote fades in slightly after the section itself. */
.spotlight-quote.reveal { transition-delay: .5s; }

/* Reviews + stats reuse the same 3-step stagger twice. */
.testimonials .reveal:nth-child(2) { transition-delay: .2s; }
.testimonials .reveal:nth-child(3) { transition-delay: .4s; }
.stats .reveal:nth-child(2) { transition-delay: .2s; }
.stats .reveal:nth-child(3) { transition-delay: .4s; }
.stats .reveal:nth-child(4) { transition-delay: .6s; }

@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.grid--3 { grid-template-columns: 1fr; }
	.grid--2 { grid-template-columns: 1fr; }
	.checklist { grid-template-columns: repeat(2, 1fr); }
	.stats { gap: 36px; }
	.hero h1 { font-size: 38px; }
	.spotlight-quote { font-size: 22px; }
}

@media (max-width: 720px) {
	.main-nav, .header-cta { display: none; }
	.nav-toggle { display: flex; }
	.site-header__inner.is-open .main-nav {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: calc(100% + 12px);
		left: 0; right: 0;
		background: rgba(20,20,20,.95);
		border: 1px solid var(--border);
		border-radius: 20px;
		padding: 20px;
		gap: 16px;
	}
	.site-header__inner.is-open .header-cta {
		display: flex;
		position: absolute;
		top: calc(100% + 200px);
		left: 20px; right: 20px;
		justify-content: center;
	}
	.section { padding: 64px 0; }
	.step { grid-template-columns: 1fr; }
	.checklist { grid-template-columns: 1fr; }
	.checklist li:last-child { grid-column: auto; }
	.hover-hint { position: static; margin-left: 0; margin-top: 12px; transform: none; }
}