:root{
	--black:#000000;
	--paper:#0a0a0a;
	--white:#f6f6f3;
	--dim:#9a9a94;
	--line:#2b2b28;
	--line-soft:#1a1a18;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
	margin:0;
	background:var(--black);
	color:var(--white);
	font-family:'Public Sans', sans-serif;
	font-size:17px;
	line-height:1.6;
	background-color: rgb(18, 18, 18);
	-webkit-font-smoothing:antialiased;
}
h1,h2,h3{
	font-family:'Fraunces', serif;
	font-weight:440;
	margin:0;
	letter-spacing:-0.01em;
}
a{color:inherit;}
p{margin:0;}
img,svg{display:block;max-width:100%;}
.wrap{
	max-width:1180px;
	margin:0 auto;
	padding:0 32px;
}
:focus-visible{outline:2px solid var(--white); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
	*{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

/* ---------- nav ---------- */
header{
	position:sticky; top:0; z-index:20;
	background:rgba(18,18,18,1);
	backdrop-filter:blur(6px);
	border-bottom:1px solid var(--line-soft);
}
nav{
	display:flex; align-items:center; justify-content:space-between;
	padding:22px 32px;
	max-width:1180px; margin:0 auto;
}
.wordmark{
	font-family:'Fraunces', serif;
	font-size:22px; font-weight:560;
	letter-spacing:-0.01em;
}
.nav-cta{
	font-size:15px;
	padding:9px 18px;
	border:1px solid var(--white);
	border-radius:2px;
	text-decoration:none;
	transition:background 0.15s ease, color 0.15s ease;
}
.nav-cta:hover{ background:var(--white); color:var(--black); }

/* ---------- hero ---------- */
.hero{
	position:relative;
	overflow:hidden;
	border-bottom:1px solid var(--line-soft);
	background-image: url('./assets/path9.svg');
	background-repeat: no-repeat;
	background-size: cover;
}
.hero-foreground {
	background-color: rgba(18, 18, 18, 0.8);
}
.hero-grid{
	display:grid;
	grid-template-columns:1.05fr 0.95fr;
	align-items:center;
	gap:40px;
}
.hero-copy{
	position:relative; z-index:2;
	padding:96px 0 96px;
}
.hero h1{
	font-size:clamp(40px, 5.4vw, 68px);
	line-height:1.04;
	max-width:11ch;
}
.hero-sub{
	margin-top:26px;
	max-width:42ch;
	font-size:18px;
	color:#d6d6d0;
}
.hero-actions{
	margin-top:38px;
	display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.btn-primary{
	display:inline-block;
	background:var(--white);
	color:var(--black);
	font-size:15px; font-weight:600;
	padding:14px 26px;
	border-radius:2px;
	text-decoration:none;
	border:1px solid var(--white);
	transition:opacity 0.15s ease;
}
.btn-primary:hover{ opacity:0.85; }
.hero-note{
	font-size:14px;
	color:var(--dim);
}
.hero-art{
	position:relative; z-index:1;
	aspect-ratio:1/1;
	width:100%;
}

/* ---------- proof strip ---------- */
.strip{
	border-bottom:1px solid var(--line-soft);
	padding:18px 0;
}
.strip .wrap{
	display:flex; gap:44px; flex-wrap:wrap;
	font-size:14px; color:var(--dim);
}
.strip strong{ color:var(--white); font-weight:600; }

/* ---------- how it works ---------- */
.steps{ padding:110px 0; border-bottom:1px solid var(--line-soft); }
.section-head{ max-width:52ch; margin-bottom:64px; }
.section-head h2{ font-size:clamp(30px, 3.4vw, 42px); line-height:1.12; }
.section-head p{ margin-top:16px; color:var(--dim); font-size:16px; max-width:48ch; }

.step-list{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:10px;
	border-top:1px solid var(--line);
}
.step{
	padding:34px 28px 34px 0;
	border-right:1px solid var(--line);
}
.step:last-child{ border-right:none; padding-right:0; }
.step-num{
	font-family:'Fraunces', serif;
	font-size:15px;
	color:var(--dim);
	margin-bottom:18px;
	display:block;
}
.step h3{ font-size:21px; margin-bottom:10px; }
.step p{ color:#c9c9c3; font-size:15.5px; }

/* ---------- feature rows ---------- */
.features{ padding:110px 0; border-bottom:1px solid var(--line-soft); }
.feature-row{
	display:grid;
	grid-template-columns:0.85fr 1.15fr;
	gap:60px;
	padding:44px 0;
	border-top:1px solid var(--line);
	align-items:baseline;
}
.feature-row:last-child{ border-bottom:1px solid var(--line); }
.feature-row h3{ font-size:24px; }
.feature-row p{ color:#c9c9c3; max-width:46ch; }

/* ---------- cta band ---------- */
.cta-band{
	padding:120px 0;
	text-align:left;
	border-bottom:1px solid var(--line-soft);
}
.cta-band h2{
	font-size:clamp(34px, 4.6vw, 56px);
	max-width:15ch;
	line-height:1.08;
}
.cta-form{
	margin-top:40px;
	display:flex; gap:12px; flex-wrap:wrap;
	max-width:520px;
}
.cta-form input[type=email]{
	flex:1 1 260px;
	background:transparent;
	border:1px solid var(--line);
	color:var(--white);
	padding:14px 16px;
	font-size:15px;
	font-family:'Public Sans', sans-serif;
	border-radius:2px;
}
.cta-form input[type=email]::placeholder{ color:var(--dim); }
.cta-form button{
	background:var(--white);
	color:var(--black);
	border:1px solid var(--white);
	padding:14px 24px;
	font-size:15px; font-weight:600;
	border-radius:2px;
	cursor:pointer;
	font-family:'Public Sans', sans-serif;
	transition:opacity 0.15s ease;
}
.cta-form button:hover{ opacity:0.85; }
.cta-fine{ margin-top:14px; font-size:13.5px; color:var(--dim); }

/* ---------- footer ---------- */
footer{ padding:48px 0; }
.footer-row{
	display:flex; justify-content:space-between; align-items:center;
	flex-wrap:wrap; gap:16px;
	font-size:14px; color:var(--dim);
}
.footer-links{ display:flex; gap:24px; }
.footer-links a{ text-decoration:none; color:var(--dim); }
.footer-links a:hover{ color:var(--white); }

@media (max-width: 860px){
	.hero-grid{ grid-template-columns:1fr; }
	.hero-copy{ padding:56px 0 32px; }
	.hero-art{ max-width:420px; margin:0 auto; }
	.step-list{ grid-template-columns:1fr; }
	.step{ border-right:none; border-bottom:1px solid var(--line); padding:28px 0; }
	.step:last-child{ border-bottom:none; }
	.feature-row{ grid-template-columns:1fr; gap:14px; }
}