@font-face { font-family:'Archivo Black'; src:url('/fonts/ArchivoBlack-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('/fonts/JetBrainsMono-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('/fonts/JetBrainsMono-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('/fonts/JetBrainsMono-800.woff2') format('woff2'); font-weight:800; font-display:swap; }

:root{
  --bg:#0F1115; --surface:#191C22; --border:#3A3F47; --text:#F3EFE6;
  --muted:#9AA0AA; --faint:#5C616B; --orange:#E04A0F;
  --mono:'JetBrains Mono','SF Mono','Courier New',monospace;
  --archivo:'Archivo Black',var(--mono);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--text); font-family:var(--mono);
  background-image:linear-gradient(rgba(58,63,71,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(58,63,71,.4) 1px,transparent 1px);
  background-size:68px 68px; background-position:center;
}
.page{ min-height:100vh; display:flex; flex-direction:column; position:relative; z-index:1;
  background:radial-gradient(1100px 700px at 74% 42%, rgba(15,17,21,.12), var(--bg) 80%); }

.hdr{ display:flex; align-items:center; justify-content:space-between; padding:20px 30px; }
.brand{ display:flex; align-items:center; gap:13px; text-decoration:none; }
.brand .mark{ width:50px; height:auto; }
.brand .mark use{ fill:var(--orange); }
.wordmark{ font-family:var(--archivo); font-size:22px; letter-spacing:.10em; color:var(--text); }
.social{ display:flex; gap:18px; }
.social a{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); text-decoration:none; }
.social a:hover{ color:var(--text); }

.ticker{ overflow:hidden; background:var(--orange); color:#0F1115; white-space:nowrap; border-top:1px solid #0000002e; border-bottom:1px solid #0000002e; }
.ticker-track{ display:inline-block; padding:9px 0; font-weight:800; font-size:12.5px; letter-spacing:.16em; animation:scroll 24s linear infinite; }
.ticker-track span{ padding:0 26px; }
@keyframes scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; } }

.hero{ flex:1; padding:64px 48px 40px; display:flex; flex-direction:column; justify-content:center; }
.kicker{ font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--muted); margin-bottom:22px; }
.kicker b{ color:var(--orange); }
.headline{ font-size:80px; font-weight:800; line-height:.94; letter-spacing:-.01em; text-transform:uppercase; }
.headline .o{ color:var(--orange); }
.sub{ margin-top:26px; color:var(--muted); font-size:15px; line-height:1.7; max-width:500px; }

.field{ display:flex; max-width:450px; margin-top:32px; }
.field input[type=email]{ flex:1; background:rgba(255,255,255,.04); border:1px solid var(--border); border-right:none; color:var(--text); padding:15px 16px; font-family:var(--mono); font-size:14px; border-radius:4px 0 0 4px; outline:none; }
.field input[type=email]::placeholder{ color:var(--faint); }
.field input[type=email]:focus{ border-color:var(--orange); }
.field button{ background:var(--orange); color:#0F1115; border:none; font-family:var(--mono); font-weight:800; letter-spacing:.12em; padding:15px 24px; font-size:13px; cursor:pointer; border-radius:0 4px 4px 0; white-space:nowrap; }
.field button:disabled{ opacity:.6; cursor:default; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.status{ margin-top:14px; font-size:13px; letter-spacing:.04em; min-height:1.2em; }
.status[data-kind=ok]{ color:var(--orange); }
.status[data-kind=err]{ color:#ff6b6b; }

.foot{ display:flex; justify-content:space-between; align-items:center; padding:18px 30px; border-top:1px solid var(--border); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }

@media (max-width:640px){
  .hdr{ padding:16px 18px; }
  .social{ gap:12px; }
  .social a{ font-size:10px; letter-spacing:.12em; }
  .hero{ padding:40px 20px 28px; }
  .headline{ font-size:46px; }
  .field{ flex-direction:column; max-width:none; }
  .field input[type=email]{ border-right:1px solid var(--border); border-radius:4px; }
  .field button{ border-radius:4px; margin-top:10px; padding:14px; }
  .foot{ padding:14px 18px; font-size:10px; }
}