*{box-sizing:border-box}

:root{
--bg:#090909;
--fg:#f4f1ea;
--muted:#a6a29a;
--line:rgba(244,241,234,.18)
}

html,body{
margin:0;
min-height:100%;
background:var(--bg);
color:var(--fg);
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}

body{min-height:100vh}

.hero{
min-height:100vh;
min-height:100svh;
display:grid;
place-items:center;
position:relative;
overflow:hidden;
background:
radial-gradient(circle at 50% 38%,rgba(255,255,255,.08),transparent 32%),
var(--bg)
}

.grain{
position:absolute;
inset:-50%;
opacity:.035;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
pointer-events:none
}

.content{
width:min(900px,calc(100% - 40px));
text-align:center;
position:relative;
z-index:1
}

.brand{
font-size:clamp(2.6rem,7vw,5.8rem);
font-weight:800;
letter-spacing:.12em
}

h1{
margin:28px 0 12px;
font-size:clamp(2rem,5vw,4.2rem);
font-weight:400;
letter-spacing:-.035em
}

.tagline{
margin:0;
font-size:clamp(1.05rem,2vw,1.35rem);
color:var(--muted)
}

.launch,.eyebrow{
margin-top:34px;
color:#d0cbc2;
font-size:.75rem;
letter-spacing:.18em;
text-transform:uppercase
}

.cta{
margin-top:34px;
padding:15px 28px;
border:1px solid var(--fg);
border-radius:999px;
background:var(--fg);
color:#090909;
font:inherit;
font-weight:700;
cursor:pointer
}

.cta:disabled{
opacity:.45;
cursor:default
}

.cta.secondary{
margin-left:10px;
background:transparent;
color:var(--fg)
}

.full{width:100%}

.modal{
position:fixed;
inset:0;
display:grid;
place-items:center;
padding:20px;
opacity:0;
pointer-events:none;
transition:opacity .2s;
z-index:10
}

.modal.is-open{
opacity:1;
pointer-events:auto
}

.modal-backdrop{
position:absolute;
inset:0;
background:rgba(0,0,0,.72);
backdrop-filter:blur(10px)
}

.modal-card{
position:relative;
width:min(460px,100%);
padding:38px;
border:1px solid var(--line);
border-radius:24px;
background:#111
}

.close{
position:absolute;
top:14px;
right:17px;
border:0;
background:none;
color:var(--fg);
font-size:30px;
cursor:pointer
}

.modal-card h2{
margin:0 0 10px;
font-size:2rem;
font-weight:500
}

.modal-card>p:not(.eyebrow):not(.fineprint){
color:var(--muted);
line-height:1.6
}

label{
display:block;
margin:26px 0 8px;
font-size:.8rem;
text-transform:uppercase;
letter-spacing:.12em
}

input{
width:100%;
padding:15px 16px;
border:1px solid var(--line);
border-radius:12px;
background:#181818;
color:var(--fg);
font:inherit;
outline:none
}

input:focus{
border-color:rgba(244,241,234,.65)
}

.fineprint,.status{
margin:18px 0 0;
color:#77736d;
font-size:.75rem;
line-height:1.5
}

.success-text{
max-width:540px;
margin:0 auto;
color:var(--muted);
line-height:1.7
}

.text-link{
display:block;
margin-top:24px;
color:var(--fg);
text-decoration:none;
font-size:.9rem
}

.text-link:hover{text-decoration:underline}

@media(max-width:520px){
.modal-card{padding:30px 22px}
.cta.secondary{margin-left:0}
}