:root{
  --bg:#000;
  --ink:#fff;
  --muted:#8a8a8a;
  --line:#202020;
  --display:"Archivo", system-ui, sans-serif;
  --mono:"Space Mono", ui-monospace, monospace;
  --pad:clamp(18px,5vw,72px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--display);
  font-weight:700;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:#fff;color:#000}

.fx{position:fixed;inset:0;pointer-events:none;z-index:50}
.grain{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.04;
  mix-blend-mode:screen;
}
.scanlines{
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.03) 0 1px,transparent 1px 4px);
}
.vignette{background:radial-gradient(120% 120% at 50% 42%,transparent 58%,rgba(0,0,0,.82) 100%)}

.bcast{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:60;
  display:flex;
  justify-content:center;
  padding:16px var(--pad);
  border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(6px);
}
.bcast nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(12px,3vw,34px);
  flex-wrap:wrap;
}
.bcast a{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.2em;
  text-transform:lowercase;
}
.bcast a:hover{text-decoration:underline}

main{position:relative;z-index:10}
section{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:92px var(--pad);
}

.hero{
  min-height:100svh;
  gap:22px;
  padding-top:104px;
}
.wordmark{
  margin:0;
  line-height:0;
  display:flex;
  justify-content:center;
}
.wordmark img{
  width:min(76vw,650px);
  filter:drop-shadow(0 0 28px rgba(255,255,255,.08));
}
.tagline{
  margin:0;
  max-width:11ch;
  font-size:clamp(42px,8vw,118px);
  line-height:.86;
  letter-spacing:-.055em;
  text-transform:lowercase;
}
.support{
  margin:2px 0 0;
  font-family:var(--mono);
  font-size:clamp(12px,1.35vw,16px);
  line-height:1.7;
  letter-spacing:.12em;
  text-transform:lowercase;
  color:var(--muted);
}
.cta{
  display:flex;
  justify-content:center;
  margin-top:10px;
}
.btn{
  min-width:178px;
  border:1px solid #fff;
  background:#fff;
  color:#000;
  padding:15px 26px;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.14em;
  text-transform:lowercase;
}
.btn:hover{background:#000;color:#fff}

.seg{
  min-height:46svh;
  border-top:1px solid var(--line);
  gap:18px;
}
.label{
  margin:0;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.28em;
  text-transform:lowercase;
  color:var(--muted);
}
.seg h2{
  margin:0;
  max-width:13ch;
  font-size:clamp(38px,7vw,98px);
  line-height:.88;
  letter-spacing:-.05em;
  text-transform:lowercase;
}

.signal{
  min-height:72svh;
  border-top:1px solid var(--line);
  gap:20px;
}
.signal-h{
  margin:0;
  max-width:11ch;
  font-size:clamp(44px,9vw,132px);
  line-height:.84;
  letter-spacing:-.06em;
  text-transform:lowercase;
}
.join{
  width:min(100%,760px);
  margin-top:10px;
}
.join-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 180px 130px;
  border:1px solid #fff;
}
.join input[type=email],
.join select,
.join button{
  min-height:58px;
  border:0;
  border-radius:0;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.08em;
  text-transform:lowercase;
}
.join input[type=email],
.join select{
  min-width:0;
  background:#000;
  color:#fff;
  padding:0 18px;
  text-align:center;
  border-right:1px solid var(--line);
}
.join input::placeholder{color:#606060}
.join select{
  appearance:none;
  cursor:pointer;
}
.join input:focus,
.join select:focus{
  outline:none;
  background:#080808;
}
.join button{
  background:#fff;
  color:#000;
  cursor:pointer;
}
.join button:hover{
  background:#000;
  color:#fff;
  box-shadow:inset 0 0 0 1px #fff;
}
.join button:disabled{opacity:.55;cursor:wait}
#company{position:absolute;left:-9999px;width:1px;height:1px}
.join-msg{
  min-height:18px;
  margin:14px 0 0;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:lowercase;
  color:var(--muted);
}
.join-msg.ok{color:#fff}
.join-msg.err{color:#fff;text-decoration:underline}

.foot{
  position:relative;
  z-index:10;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  padding:54px var(--pad) 70px;
  text-align:center;
  border-top:1px solid var(--line);
}
.foot-mark{width:116px;opacity:.82}
.foot-meta{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:lowercase;
  color:var(--muted);
}
.foot-meta a:hover{color:#fff}

@media (max-width:680px){
  section{padding:78px var(--pad)}
  .hero{padding-top:104px}
  .tagline{max-width:10ch}
  .join-row{grid-template-columns:1fr}
  .join input[type=email],
  .join select{
    border-right:0;
    border-bottom:1px solid var(--line);
  }
}