/*
	AAAA Premium Scroll Site
	- No cards
	- High-end typography + whitespace
	- Seamless fixed background (no tiling)
	- Subtle parallax + scroll reveals (no gimmicks)
*/

:root{
	color-scheme: dark;
	--bg:#07090d;
	--bg2:#0b0f18;
	--ink:rgba(245,245,242,.94);
	--muted:rgba(245,245,242,.70);
	--faint:rgba(245,245,242,.48);
	--hair:rgba(245,245,242,.12);
	--hair2:rgba(245,245,242,.07);
	--accent:rgba(206,214,255,.95);
	--accent2:rgba(170,255,230,.88);

	--max:1180px;
	--gutter:clamp(18px, 4vw, 44px);

	--serif:"Instrument Serif", ui-serif, Georgia, "Times New Roman", Times, serif;
	--sans:"Inter Tight", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	--mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

	--r1:14px;
	--r2:22px;

	--shadow:0 18px 60px rgba(0,0,0,.55);
	--ease:cubic-bezier(.2,.85,.2,1);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
	margin:0;
	background:linear-gradient(180deg, var(--bg), var(--bg2));
	color:var(--ink);
	font-family:var(--sans);
	letter-spacing:-0.01em;
	overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
	outline:2px solid rgba(206,214,255,.55);
	outline-offset:3px;
	border-radius:10px;
}

::selection{background:rgba(206,214,255,.22)}
/* Background */
.bg{
	position:fixed;
	inset:0;
	z-index:-2;
	pointer-events:none;
	overflow:hidden;
	background:linear-gradient(180deg, var(--bg), var(--bg2));
}
#bg-canvas{
	position:absolute;
	/* Overscan prevents any edge seams on mobile viewport resizing */
	inset:-14%;
	width:128%;
	height:128%;
	display:block;
	opacity:.92;
}
.bg-noise{
	position:absolute;
	inset:-40%;
	opacity:.06;
	mix-blend-mode:overlay;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}
.bg-vignette{
	position:absolute;
	will-change:transform;
	/* Extra overscan prevents seams */
	inset:-60%;
	transform:translate3d(0,0,0);
	background:
		radial-gradient(900px 520px at 24% 12%, rgba(206,214,255,.10), transparent 60%),
		radial-gradient(860px 680px at 74% 18%, rgba(170,255,230,.06), transparent 62%),
		radial-gradient(1100px 900px at 50% 85%, rgba(255,255,255,.04), transparent 62%),
		radial-gradient(1800px 1100px at 50% 50%, rgba(0,0,0,.70), transparent 55%);
}
.bg-grid{
	position:absolute;
	will-change:transform;
	/* Extra overscan prevents seams */
	inset:-60%;
	transform:translate3d(0,0,0);
	opacity:.22;
	background-position:center;
	background-repeat:repeat;
	background:
		linear-gradient(to right, rgba(245,245,242,.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(245,245,242,.05) 1px, transparent 1px);
	background-size:140px 140px;
	mask-image:radial-gradient(900px 620px at 50% 16%, black 18%, transparent 72%);
}

/* Layout helpers */
.container{
	max-width:var(--max);
	margin:0 auto;
	padding:0 var(--gutter);
}
.section{
	padding:clamp(72px, 10vh, 120px) 0;
}
.eyebrow{
	display:flex;
	align-items:center;
	gap:12px;
	color:var(--muted);
	font-size:12px;
	letter-spacing:0.28em;
	text-transform:uppercase;
}
.eyebrow::before{
	content:"";
	width:46px;
	height:1px;
	background:var(--hair);
}

/* Header */
.header{
	position:fixed;
	top:0; left:0; right:0;
	z-index:50;
	background:rgba(7,9,13,.46);
	backdrop-filter:blur(18px);
	border-bottom:1px solid var(--hair2);
}
.header-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	height:86px;
	padding:0 var(--gutter);
	max-width:calc(var(--max) + var(--gutter) * 2);
	margin:0 auto;
}
.brand{
	display:flex;
	align-items:center;
	gap:12px;
	min-width:0;
	height: 78px; /* controls logo height inside navbar */
	max-width: clamp(200px, 24vw, 380px); /* prevents long logo from colliding with nav */
	overflow:hidden;
	flex:0 1 auto;
}
.brand-mark{
	width:34px;
	height:34px;
	border-radius:999px;
	border:1px solid var(--hair);
	background:
		radial-gradient(circle at 35% 30%, rgba(245,245,242,.95), rgba(206,214,255,.35) 42%, rgba(7,9,13,1) 70%);
	box-shadow:0 10px 30px rgba(0,0,0,.38);
}
.brand-name{
	font-weight:600;
	letter-spacing:-0.02em;
	white-space:nowrap;
}

.brand-logo{
	height:100%;
	width:auto;
	max-width:100%;
	display:block;
	image-rendering:auto;
	filter:drop-shadow(0 10px 24px rgba(0,0,0,.35));
}
.footer-logo{
	height:78px;
	width:auto;
	max-width:min(420px, 70vw);
	display:block;
	filter:drop-shadow(0 10px 24px rgba(0,0,0,.35));
}
.sr-only{
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0;
}
.nav{
	display:flex;
	align-items:center;
	gap:18px;
}
.nav a{
	font-size:13px;
	color:var(--muted);
	padding:8px 10px;
	border-radius:999px;
	transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.nav a:hover{
	background:rgba(245,245,242,.06);
	color:var(--ink);
}
.header-cta{
	display:flex;
	align-items:center;
	gap:10px;
}
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	padding:11px 14px;
	border-radius:999px;
	border:1px solid var(--hair);
	background:rgba(245,245,242,.06);
	color:var(--ink);
	font-size:13px;
	letter-spacing:-0.01em;
	transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover{transform:translateY(-1px); background:rgba(245,245,242,.09); border-color:rgba(206,214,255,.34)}
.btn.primary{
	border-color:rgba(206,214,255,.42);
	background:linear-gradient(180deg, rgba(206,214,255,.18), rgba(245,245,242,.06));
}
.btn .dot{
	width:7px; height:7px;
	border-radius:999px;
	background:rgba(170,255,230,.88);
	box-shadow:0 0 0 4px rgba(170,255,230,.10);
}

/* Mobile nav */
.nav-toggle{
	display:none;
	width:42px;
	height:42px;
	border-radius:999px;
	border:1px solid var(--hair);
	background:rgba(245,245,242,.06);
	color:var(--ink);
}
.mobile-nav{
	display:none;
	position:fixed;
	top:62px;
	left:var(--gutter);
	right:var(--gutter);
	z-index:49;
	padding:14px;
	border-radius:var(--r2);
	border:1px solid var(--hair2);
	background:rgba(7,9,13,.72);
	backdrop-filter:blur(18px);
	box-shadow:var(--shadow);
}
.mobile-nav.is-open{display:block}
.mobile-nav a{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:12px 12px;
	border-radius:12px;
	color:var(--muted);
}
.mobile-nav a:hover{background:rgba(245,245,242,.06); color:var(--ink)}

/* Hero */
.hero{
	min-height:100vh;
	display:flex;
	align-items:flex-end;
	padding-top:92px; /* header */
}
.hero-grid{
	display:grid;
	grid-template-columns:1.25fr .75fr;
	gap:clamp(18px, 4vw, 50px);
	align-items:end;
	padding-bottom:clamp(40px, 8vh, 82px);
}
.hero h1{
	font-family:var(--serif);
	font-weight:400;
	letter-spacing:-0.03em;
	line-height:0.95;
	font-size:clamp(46px, 7.4vw, 96px);
	margin:12px 0 18px;
}
.hero p{
	max-width:52ch;
	color:var(--muted);
	font-size:clamp(15px, 1.4vw, 18px);
	line-height:1.55;
	margin:0 0 20px;
}
.hero-side{
	border-left:1px solid var(--hair2);
	padding-left:clamp(14px, 2vw, 22px);
}
.kicker{
	font-size:12px;
	letter-spacing:0.26em;
	text-transform:uppercase;
	color:var(--muted);
}
.meta{
	margin-top:18px;
	display:grid;
	gap:12px;
}
.meta-row{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:14px;
	padding:10px 0;
	border-bottom:1px solid var(--hair2);
	color:var(--muted);
	font-size:13px;
}
.meta-row strong{color:var(--ink); font-weight:600}
.scroll-hint{
	display:flex;
	align-items:center;
	gap:10px;
	margin-top:22px;
	color:var(--faint);
	font-size:12px;
	letter-spacing:0.24em;
	text-transform:uppercase;
}
.scroll-hint .line{
	height:1px;
	flex:1;
	background:linear-gradient(90deg, var(--hair2), rgba(245,245,242,0));
}
.scroll-hint .chev{
	width:14px; height:14px;
	border-right:1px solid var(--hair);
	border-bottom:1px solid var(--hair);
	transform:rotate(45deg);
	animation:chev 1.6s var(--ease) infinite;
	opacity:.85;
}
@keyframes chev{
	0%{transform:translateY(0) rotate(45deg); opacity:.85}
	70%{transform:translateY(6px) rotate(45deg); opacity:.25}
	100%{transform:translateY(0) rotate(45deg); opacity:.85}
}

/* Signature divider */
.hr{
	height:1px;
	background:linear-gradient(90deg, rgba(245,245,242,0), var(--hair2), rgba(245,245,242,0));
}

/* Feature scrollytelling */
.feature{
	padding:clamp(82px, 11vh, 128px) 0;
}
.feature-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:clamp(22px, 5vw, 64px);
	align-items:start;
}
.steps{
	display:grid;
	gap:26px;
}
.step{
	padding:18px 0;
	border-bottom:1px solid var(--hair2);
}
.step:last-child{border-bottom:none}
.step-top{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:14px;
}
.step-num{
	font-family:var(--mono);
	font-size:12px;
	letter-spacing:0.18em;
	color:var(--faint);
}
.step h3{
	margin:10px 0 10px;
	font-size:22px;
	letter-spacing:-0.02em;
	line-height:1.1;
	font-weight:600;
}
.step p{
	margin:0;
	color:var(--muted);
	line-height:1.55;
	max-width:56ch;
}
.step.is-active h3{
	color:rgba(206,214,255,.96);
}
.step.is-active .step-num{
	color:rgba(206,214,255,.78);
}
.visual-wrap{
	position:relative;
}
.visual{
	position:sticky;
	top:92px;
	height:clamp(360px, 56vh, 560px);
	overflow:hidden;
	border-radius:0;
	border:none;
	background:transparent;
	mask-image:radial-gradient(70% 62% at 50% 42%, black 58%, transparent 100%);
}
.visual::before{
	content:"";
	position:absolute; inset:-2px;
	background:
		radial-gradient(500px 320px at 30% 25%, rgba(206,214,255,.22), transparent 60%),
		radial-gradient(520px 420px at 75% 40%, rgba(170,255,230,.12), transparent 62%),
		radial-gradient(740px 520px at 50% 80%, rgba(255,255,255,.07), transparent 62%);
	opacity:.9;
}
.visual-layer{
	position:absolute;
	inset:0;
	display:grid;
	place-items:center;
	opacity:0;
	transform:scale(1.02);
	filter:blur(6px);
	transition:opacity .6s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
}
.visual-layer.is-on{
	opacity:1;
	transform:scale(1);
	filter:blur(0);
}
.visual-svg{
	width:min(520px, 84%);
	height:auto;
	opacity:.92;
}

/* Services visual: Step 3 (Finished + Managed)
	Built with HTML/CSS (not an image/SVG) so it always renders.
*/
.v3-ui{
	width:min(520px, 84%);
	aspect-ratio:640 / 420;
	position:relative;
	opacity:.92;
	transform:translateZ(0);
}
.v3-ui *{ box-sizing:border-box; }

.v3-glow{
	position:absolute;
	inset:-14%;
	background:
		radial-gradient(520px 360px at 34% 26%, rgba(206,214,255,.20), transparent 60%),
		radial-gradient(640px 520px at 76% 42%, rgba(170,255,230,.14), transparent 62%),
		radial-gradient(760px 560px at 52% 84%, rgba(255,255,255,.07), transparent 62%);
	opacity:.95;
	pointer-events:none;
}

.v3-frame{
	position:absolute;
	inset:0;
	border-radius:28px;
	background:rgba(7,9,13,.30);
	border:1px solid rgba(245,245,242,.28);
	overflow:hidden;
	box-shadow:
		0 30px 80px rgba(0,0,0,.55),
		0 0 0 1px rgba(255,255,255,.06) inset;
}

.v3-chrome{
	height:34px;
	padding:10px 14px;
	display:flex;
	align-items:center;
	gap:12px;
	background:rgba(245,245,242,.08);
	border-bottom:1px solid rgba(245,245,242,.12);
}
.v3-dots{
	display:flex;
	gap:8px;
}
.v3-dots span{
	width:8px;
	height:8px;
	border-radius:999px;
	background:rgba(245,245,242,.16);
}
.v3-url{
	flex:1;
	height:10px;
	border-radius:999px;
	background:rgba(245,245,242,.12);
}

.v3-page{
	height:calc(100% - 34px);
	padding:16px 18px 18px;
	background:rgba(245,245,242,.04);
}

.v3-top{
	display:grid;
	grid-template-columns:auto 1fr auto;
	align-items:center;
	gap:14px;
}
.v3-logo{
	width:118px;
	height:10px;
	border-radius:999px;
	background:rgba(245,245,242,.22);
}
.v3-nav{
	justify-self:end;
	display:flex;
	gap:10px;
}
.v3-nav span{
	width:44px;
	height:8px;
	border-radius:999px;
	background:rgba(245,245,242,.14);
}
.v3-chip{
	width:34px;
	height:18px;
	border-radius:999px;
	border:1px solid rgba(170,255,230,.34);
	background:rgba(170,255,230,.12);
}

.v3-hero{
	margin-top:18px;
	padding-bottom:10px;
}
.v3-title{
	width:66%;
	height:14px;
	border-radius:999px;
	background:rgba(245,245,242,.26);
}
.v3-line{
	margin-top:10px;
	width:86%;
	height:10px;
	border-radius:999px;
	background:rgba(245,245,242,.16);
}
.v3-line.short{
	width:74%;
	background:rgba(245,245,242,.14);
}
.v3-cta{
	margin-top:14px;
	width:160px;
	height:34px;
	border-radius:999px;
	border:1px solid rgba(170,255,230,.34);
	background:linear-gradient(135deg, rgba(206,214,255,.14), rgba(170,255,230,.12));
}

.v3-cards{
	margin-top:16px;
	display:grid;
	grid-template-columns:1fr 1fr 1.05fr;
	gap:12px;
}
.v3-card{
	height:72px;
	border-radius:18px;
	background:rgba(245,245,242,.06);
	border:1px solid rgba(245,245,242,.12);
	box-shadow:0 10px 22px rgba(0,0,0,.22);
}
.v3-card.tall{
	height:72px;
	background:rgba(245,245,242,.07);
	border-color:rgba(245,245,242,.14);
}

.v3-updates{
	position:absolute;
	right:14px;
	top:72px;
	width:176px;
	display:grid;
	gap:10px;
	pointer-events:none;
}
.v3-update{
	display:flex;
	align-items:center;
	gap:10px;
	padding:10px 12px;
	border-radius:16px;
	background:rgba(7,9,13,.46);
	border:1px solid rgba(245,245,242,.12);
	backdrop-filter:blur(10px);
}
.v3-check{
	width:18px;
	height:18px;
	border-radius:999px;
	border:1px solid rgba(170,255,230,.44);
	background:rgba(170,255,230,.14);
	position:relative;
}
.v3-check::after{
	content:"";
	position:absolute;
	left:5px;
	top:8px;
	width:8px;
	height:4px;
	border-left:2px solid rgba(170,255,230,.85);
	border-bottom:2px solid rgba(170,255,230,.85);
	transform:rotate(-45deg);
}
.v3-update-text{
	flex:1;
	height:8px;
	border-radius:999px;
	background:rgba(245,245,242,.18);
}
.v3-update-text.w2{ width:72%; }
.v3-update-text.w3{ width:58%; }

.v3-scan{
	position:absolute;
	left:10%;
	right:10%;
	top:86px;
	height:2px;
	border-radius:999px;
	background:linear-gradient(90deg, transparent, rgba(206,214,255,.70), rgba(170,255,230,.55), transparent);
	opacity:.55;
	pointer-events:none;
}

@keyframes v3_scan{
	0%{ transform:translateY(0); opacity:.15; }
	22%{ opacity:.55; }
	60%{ opacity:.38; }
	100%{ transform:translateY(210px); opacity:0; }
}

.visual-layer.is-on .v3-scan{ animation:v3_scan 2.8s var(--ease) infinite; }
.visual-layer.is-on .v3-updates{ animation:v_float 7.4s ease-in-out infinite; }

.visual-caption{
	position:absolute;
	left:18px;
	right:18px;
	bottom:16px;
	display:flex;
	justify-content:space-between;
	gap:14px;
	color:var(--muted);
	font-size:12px;
	letter-spacing:0.18em;
	text-transform:uppercase;
}

/* Process timeline */
.timeline{
	margin-top:30px;
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:clamp(18px, 4vw, 44px);
	align-items:start;
}
.tline{
	position:relative;
	padding-left:22px;
}
.tline::before{
	content:"";
	position:absolute;
	left:6px;
	top:0;
	bottom:0;
	width:1px;
	background:linear-gradient(180deg, rgba(206,214,255,.55), var(--hair2));
	opacity:.55;
}
.milestone{
	padding:16px 0 22px;
}
.milestone:last-child{padding-bottom:0}
.milestone h4{
	margin:0 0 6px;
	font-weight:600;
	letter-spacing:-0.01em;
}
.milestone p{
	margin:0;
	color:var(--muted);
	line-height:1.55;
	max-width:54ch;
}
.pulse{
	position:absolute;
	left:-1px;
	width:14px;
	height:14px;
	border-radius:999px;
	background:rgba(170,255,230,.68);
	box-shadow:0 0 0 7px rgba(170,255,230,.10);
	transform:translate(-50%, 8px);
}

/* Pricing */
.pricing{
	display:block;
	margin-top:28px;
}

.pricing-wrap{
	display:grid;
	gap:clamp(18px, 4vw, 36px);
}

.pricing-build{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:clamp(18px, 4vw, 44px);
}

.build-block{
	padding:22px 0;
	border-top:1px solid var(--hair2);
	border-bottom:1px solid var(--hair2);
}

.build-head{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:18px;
}

.build-head h3{
	margin:0;
	font-size:22px;
	font-weight:650;
}

.build-price{
	font-family:var(--serif);
	font-size:34px;
	letter-spacing:-0.02em;
	white-space:nowrap;
}

.build-price small{
	font-family:var(--sans);
	font-size:12px;
	color:var(--muted);
	letter-spacing:0.18em;
	text-transform:uppercase;
	margin-left:8px;
	white-space:nowrap;
}

.pricing-compare{
	display:grid;
	gap:14px;
}

.pricing-note{
	padding:16px 0 0;
	border-top:1px solid var(--hair2);
	color:var(--muted);
	line-height:1.55;
	max-width:78ch;
}

.table-scroll{
	border-top:1px solid var(--hair2);
	border-bottom:1px solid var(--hair2);
	overflow:auto;
	-webkit-overflow-scrolling:touch;
}

.compare-table{
	width:100%;
	min-width:820px;
	border-collapse:separate;
	border-spacing:0;
}

.compare-table thead th{
	text-align:left;
	padding:14px 14px;
	font-size:12px;
	letter-spacing:0.22em;
	text-transform:uppercase;
	color:var(--faint);
	border-bottom:1px solid var(--hair2);
	background:rgba(7,9,13,.35);
	backdrop-filter:blur(10px);
	position:sticky;
	top:0;
	z-index:4;
}

.compare-table thead th.row-head{
	left:0;
	z-index:6;
}

.compare-table th[scope="row"]{
	text-align:left;
	padding:14px 14px;
	color:var(--muted);
	font-weight:600;
	letter-spacing:-0.01em;
	border-bottom:1px solid var(--hair2);
	background:rgba(7,9,13,.40);
	position:sticky;
	left:0;
	z-index:3;
	min-width:260px;
}

.compare-table td{
	padding:14px 14px;
	border-bottom:1px solid var(--hair2);
	color:var(--ink);
	vertical-align:top;
}

.compare-table tbody tr:last-child td,
.compare-table tbody tr:last-child th[scope="row"]{
	border-bottom:none;
}

.compare-table .row-price td,
.compare-table .row-price th[scope="row"]{
	padding-top:18px;
	padding-bottom:18px;
}

.compare-table td.is-featured,
.compare-table th.is-featured{
	background:linear-gradient(180deg, rgba(206,214,255,.07), rgba(170,255,230,.03));
}

.pill{
	display:inline-flex;
	align-items:center;
	gap:8px;
	margin-left:10px;
	padding:4px 10px;
	border-radius:999px;
	border:1px solid rgba(206,214,255,.28);
	background:rgba(206,214,255,.08);
	color:var(--ink);
	font-size:11px;
	letter-spacing:0.12em;
	text-transform:uppercase;
}

.yes{
	font-weight:600;
}

.yes::before{
	content:"✓ ";
	opacity:.9;
}

.no{
	color:var(--faint);
	font-weight:600;
}

.pricing-foot{
	display:grid;
	gap:8px;
}

.pricing-actions{
	display:flex;
	gap:12px;
	flex-wrap:wrap;
	margin-top:6px;
}

/* Lists (used in pricing + elsewhere) */
.ul{
	margin:14px 0 0;
	padding:0;
	list-style:none;
	display:grid;
	gap:8px;
	color:var(--muted);
}

.ul li{
	display:flex;
	align-items:flex-start;
	gap:10px;
	line-height:1.5;
}

.ul li::before{
	content:"";
	width:6px; height:6px;
	border-radius:999px;
	background:rgba(206,214,255,.55);
	margin-top:7px;
	flex:0 0 auto;
}

/* FAQ */
.faq{
	margin-top:28px;
	border-top:1px solid var(--hair2);
}
.qa{
	border-bottom:1px solid var(--hair2);
	padding:18px 0;
}
.qa button{
	all:unset;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:16px;
	width:100%;
	cursor:pointer;
	color:var(--ink);
	font-weight:600;
	letter-spacing:-0.01em;
}
.qa .icon{
	width:14px; height:14px;
	position:relative;
	opacity:.8;
}
.qa .icon::before, .qa .icon::after{
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	width:14px;
	height:1px;
	background:var(--hair);
	transform:translate(-50%, -50%);
}
.qa .icon::after{
	transform:translate(-50%, -50%) rotate(90deg);
	transition:transform .25s var(--ease), opacity .25s var(--ease);
}
.qa .a{
	max-height:0;
	overflow:hidden;
	transition:max-height .35s var(--ease);
	color:var(--muted);
	line-height:1.6;
	padding-right:26px;
}
.qa.is-open .a{
	max-height:240px;
}
.qa.is-open .icon::after{
	transform:translate(-50%, -50%) rotate(0deg);
	opacity:.35;
}
.qa .a p{margin:12px 0 0; max-width:70ch}


.li-stack{
	display:flex;
	flex-direction:column;
	gap:4px;
}
.li-stack .fine{
	color:var(--faint);
	font-size:12px;
	line-height:1.35;
}

/* CTA */
.cta{
	display:grid;
	grid-template-columns:1.2fr .8fr;
	gap:clamp(18px, 4vw, 44px);
	align-items:end;
}
.cta h2{
	font-family:var(--serif);
	font-weight:400;
	font-size:clamp(34px, 4.5vw, 56px);
	margin:12px 0 0;
	letter-spacing:-0.03em;
	line-height:1.05;
}
.cta p{
	color:var(--muted);
	margin:14px 0 0;
	line-height:1.55;
	max-width:56ch;
}
.cta-aside{
	border-left:1px solid var(--hair2);
	padding-left:clamp(14px, 2vw, 22px);
	color:var(--muted);
}
.cta-aside .stack{
	display:grid;
	gap:10px;
	margin-top:18px;
}
.mini{
	font-size:12px;
	letter-spacing:0.22em;
	text-transform:uppercase;
	color:var(--faint);
}

/* Footer */
.footer{
	padding:46px 0 56px;
	border-top:1px solid var(--hair2);
}
.footer-grid{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	gap:20px;
	flex-wrap:wrap;
	color:var(--muted);
}
.footer a{color:var(--muted)}
.footer a:hover{color:var(--ink)}
.small{font-size:12px; color:var(--faint)}

/* Forms (Quote page) */
.form{
	margin-top:28px;
	display:grid;
	gap:16px;
}
.field{
	display:grid;
	gap:8px;
	padding:14px 0;
	border-bottom:1px solid var(--hair2);
}
.label{
	font-size:12px;
	letter-spacing:0.22em;
	text-transform:uppercase;
	color:var(--faint);
}
.input, .select, .textarea{
	width:100%;
	border:none;
	background:transparent;
	color:var(--ink);
	font-size:16px;
	padding:6px 0 10px;
	outline:none;
}
.textarea{min-height:120px; resize:vertical; font-family:var(--sans); line-height:1.55}
.select{appearance:none; color-scheme: dark; background-color: transparent}

.select option{
	background:#0a0c10;
	color:var(--ink);
}
.select optgroup{
	background:#0a0c10;
	color:var(--ink);
}
.form-row{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:clamp(14px, 3vw, 22px);
}
.hint{
	color:var(--faint);
	font-size:12px;
	line-height:1.45;
	max-width:72ch;
}
.pricing-disclaimer{
	margin-top:16px;
}

.form-actions{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:14px;
	margin-top:10px;
}
.ghost{
	background:transparent;
	border:1px solid var(--hair2);
}
.badge{
	font-family:var(--mono);
	font-size:11px;
	letter-spacing:0.18em;
	color:var(--faint);
}

/* Reveal on scroll (progressive enhancement)
	Default: content is visible even if JS fails.
	When JS is enabled, we animate elements into view.
*/
[data-reveal]{
	opacity:1;
	transform:none;
	filter:none;
}
.js [data-reveal]{
	opacity:0;
	transform:translateY(18px);
	filter:blur(10px);
	transition:opacity .8s var(--ease), transform .9s var(--ease), filter 1.0s var(--ease);
}
.js [data-reveal].is-in{
	opacity:1;
	transform:translateY(0);
	filter:blur(0);
}

/* Responsive */
@media (max-width: 940px){
	.nav{display:none}
	.nav-toggle{display:inline-flex; align-items:center; justify-content:center}
	.header-inner{height: 80px}
	.brand{height: 60px; max-width:286px}
	.footer-logo{height:60px; max-width:min(400px, 78vw)}
	.header-cta{gap:8px}
	.header-cta a.btn:not(.primary){display:none}
	.header-cta .btn{padding:10px 12px; font-size:12px}
	.mobile-nav{display:none}
	.hero-grid{grid-template-columns:1fr}
	.hero-side{border-left:none; padding-left:0; border-top:1px solid var(--hair2); padding-top:18px}
	.feature-grid{grid-template-columns:1fr}
	#services .visual-wrap{display:none}
	.visual{top:76px}
	.timeline{grid-template-columns:1fr}
	.pricing{grid-template-columns:1fr}
	.pricing-build{grid-template-columns:1fr}
	.compare-table{min-width:720px}
	.cta{grid-template-columns:1fr}
	.cta-aside{border-left:none; padding-left:0; border-top:1px solid var(--hair2); padding-top:18px}
	.form-row{grid-template-columns:1fr}
	.compare-table th[scope="row"]{
		position:static;
		left:auto;
		z-index:auto;
	}
	.compare-table thead th.row-head{
		left:auto;
	}

}



@media (max-width: 420px){
	.header-inner{height: 74px}
	.brand{height: 54px; max-width:256px}
	.footer-logo{height:54px; max-width:min(360px, 84vw)}
	.header-cta .btn{padding:9px 10px; font-size:12px}
	.header-cta .btn .dot{display:none}
}

/* Select background fix */
.select{
	background-color: transparent;
}
.select option, .select optgroup{
	background-color:#0a0c10;
	color:var(--ink);
}



/* Services visual animation (brand-aligned) */
.visual-svg .v-dash,
.visual-svg .v-dash2{
	stroke-dasharray:560;
	stroke-dashoffset:560;
}
.visual-layer.is-on .v-dash{
	animation:v_draw 2.35s var(--ease) forwards;
}
.visual-layer.is-on .v-dash2{
	animation:v_draw 1.65s var(--ease) forwards;
}
@keyframes v_draw{
	to{ stroke-dashoffset:0; }
}
/* Extra polish for the Services visual */
.visual-svg .v-outline,
.visual-svg .v-corners,
.visual-svg .v-ruler{
	stroke-dasharray:720;
	stroke-dashoffset:720;
}
.visual-layer.is-on .v-outline{ animation:v_draw 1.85s var(--ease) forwards; }
.visual-layer.is-on .v-corners{ animation:v_draw 1.35s var(--ease) forwards .06s; }
.visual-layer.is-on .v-ruler{ animation:v_draw 1.15s var(--ease) forwards .14s; }

.visual-svg .v-wire{
	opacity:0;
	transform-box:fill-box;
	transform-origin:center;
	transform:translateY(6px);
}
.visual-layer.is-on .v-wire{
	animation:v_wire .9s var(--ease) forwards .08s;
}
@keyframes v_wire{
	to{ opacity:1; transform:translateY(0); }
}

/* Sequential “build-in” pops for the polish + managed states */
.visual-svg .v-pop1,
.visual-svg .v-pop2,
.visual-svg .v-pop3,
.visual-svg .v-pop4,
.visual-svg .v-pop5{
	opacity:0;
	transform-box:fill-box;
	transform-origin:center;
	transform:translateY(10px) scale(.985);
}
.visual-layer.is-on .v-pop1{ animation:v_pop .85s var(--ease) forwards .05s; }
.visual-layer.is-on .v-pop2{ animation:v_pop .85s var(--ease) forwards .18s; }
.visual-layer.is-on .v-pop3{ animation:v_pop .85s var(--ease) forwards .30s; }
.visual-layer.is-on .v-pop4{ animation:v_pop .95s var(--ease) forwards .44s; }
.visual-layer.is-on .v-pop5{ animation:v_pop .80s var(--ease) forwards .52s; }

@keyframes v_pop{
	to{ opacity:1; transform:translateY(0) scale(1); }
}

/* Subtle build sweep */
.visual-svg .v-build{
	opacity:0;
	transform-box:fill-box;
	transform-origin:center;
}
.visual-layer.is-on .v-build{
	animation:v_build 2.8s var(--ease) infinite .35s;
}
@keyframes v_build{
	0%{ opacity:0; transform:translateY(-44px); }
	12%{ opacity:.50; }
	54%{ opacity:0; transform:translateY(292px); }
	100%{ opacity:0; transform:translateY(292px); }
}

/* Tiny glint near the CTA */
.visual-svg .v-glint{
	transform-box:fill-box;
	transform-origin:center;
}
.visual-layer.is-on .v-glint{
	animation:v_glint 3.9s ease-in-out infinite 1.2s;
}
@keyframes v_glint{
	0%{ opacity:0; transform:scale(.85); fill:rgba(245,245,242,.00); }
	10%{ opacity:.70; transform:scale(1.06); fill:rgba(245,245,242,.26); }
	22%{ opacity:0; transform:scale(.95); fill:rgba(245,245,242,.00); }
	100%{ opacity:0; transform:scale(.95); fill:rgba(245,245,242,.00); }
}

.visual-svg .v-dot{
	filter:drop-shadow(0 0 16px rgba(206,214,255,.18));
}
.visual-layer.is-on .v-pulse{ animation:v_pulse 2.6s ease-in-out infinite; }
.visual-layer.is-on .v-pulse2{ animation:v_pulse 2.6s ease-in-out infinite .28s; }
.visual-layer.is-on .v-pulse3{ animation:v_pulse 2.6s ease-in-out infinite .52s; }
@keyframes v_pulse{
	0%, 100%{ transform:translateZ(0) scale(1); opacity:.95; }
	50%{ transform:translateZ(0) scale(1.22); opacity:.72; }
}

/* Shine sweep for the “polish” state */
.visual-svg .v-shine,
.visual-svg .v-shine2{
	transform-box:fill-box;
	transform-origin:center;
}
.visual-layer.is-on .v-shine{
	animation:v_shine 5.2s var(--ease) infinite;
}
.visual-layer.is-on .v-shine2{
	animation:v_shine2 6.4s var(--ease) infinite;
}
@keyframes v_shine{
	0%{ opacity:0; transform:translate(-90px, 28px); }
	14%{ opacity:.14; }
	48%{ opacity:0; transform:translate(220px, -92px); }
	100%{ opacity:0; transform:translate(220px, -92px); }
}
@keyframes v_shine2{
	0%{ opacity:0; transform:translate(120px, 72px); }
	18%{ opacity:.10; }
	54%{ opacity:0; transform:translate(-220px, -120px); }
	100%{ opacity:0; transform:translate(-220px, -120px); }
}

/* Managed monthly: calm motion */
.visual-layer.is-on .v-float{ animation:v_float 6.8s ease-in-out infinite; }
.visual-layer.is-on .v-float2{ animation:v_float 7.6s ease-in-out infinite .35s; }
.visual-layer.is-on .v-float3{ animation:v_float 8.2s ease-in-out infinite .65s; }

@keyframes v_float{
	0%, 100%{ transform:translateY(0); opacity:1; }
	50%{ transform:translateY(-6px); opacity:.95; }
}

.visual-svg .v-ring-anim{
	transform-origin:center;
	transform-box:fill-box;
}
.visual-layer.is-on .v-ring-anim{
	animation:v_ring 3.6s linear infinite;
}
@keyframes v_ring{
	to{ stroke-dashoffset:-170; }
}

.visual-svg .v-scan{
	stroke-dasharray:44 280;
	stroke-dashoffset:340;
	opacity:.0;
	filter:drop-shadow(0 0 14px rgba(206,214,255,.12));
}
.visual-layer.is-on .v-scan{
	animation:v_scan 3.9s var(--ease) infinite .25s;
}
@keyframes v_scan{
	0%{ opacity:0; stroke-dashoffset:340; }
	12%{ opacity:.75; }
	52%{ opacity:0; stroke-dashoffset:-220; }
	100%{ opacity:0; stroke-dashoffset:-220; }
}

@media (prefers-reduced-motion: reduce){
	.visual-layer.is-on .v-dash,
	.visual-layer.is-on .v-dash2,
	.visual-layer.is-on .v-pulse,
	.visual-layer.is-on .v-pulse2,
	.visual-layer.is-on .v-pulse3,
	.visual-layer.is-on .v-shine,
	.visual-layer.is-on .v-shine2,
	.visual-layer.is-on .v-float,
	.visual-layer.is-on .v-float2,
	.visual-layer.is-on .v-float3,
	.visual-layer.is-on .v-ring-anim,
	.visual-layer.is-on .v-scan{
		animation:none !important;
	}
}