@font-face{ font-family:'Space Grotesk'; src:url('fonts/SpaceGrotesk-Regular.ttf'); font-weight:400; }
@font-face{ font-family:'Space Grotesk'; src:url('fonts/SpaceGrotesk-Medium.ttf'); font-weight:500; }
@font-face{ font-family:'Space Grotesk'; src:url('fonts/SpaceGrotesk-Bold.ttf'); font-weight:700; }
@font-face{ font-family:'Atkinson Hyperlegible'; src:url('fonts/AtkinsonHyperlegible-Regular.ttf'); font-weight:400; }
@font-face{ font-family:'Atkinson Hyperlegible'; src:url('fonts/AtkinsonHyperlegible-Bold.ttf'); font-weight:700; }
@font-face{ font-family:'IBM Plex Mono'; src:url('fonts/IBMPlexMono-Regular.ttf'); font-weight:400; }
@font-face{ font-family:'IBM Plex Mono'; src:url('fonts/IBMPlexMono-Medium.ttf'); font-weight:500; }
@font-face{ font-family:'IBM Plex Mono'; src:url('fonts/IBMPlexMono-Bold.ttf'); font-weight:700; }

:root{
  --ink:#16232E; --ink-soft:#3E4C57;
  --teal:#0E6E7C; --teal-dark:#0A525C; --teal-tint:#EAF4F5;
  --amber:#E0A729; --amber-dark:#A9791A;
  --green:#4C8C6B; --rust:#B33F3F;
  --paper:#FBFAF8; --line:#DADFE1;
}
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; font-family:'Atkinson Hyperlegible',sans-serif; color:var(--ink);
  background:var(--ink); line-height:1.6;
}
.wrap{ max-width:640px; margin:0 auto; padding:0 24px; }
h1,h2{ font-family:'Space Grotesk',sans-serif; font-weight:700; margin:0; }
p{ margin:0; }

.ribbon-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:13px; letter-spacing:2px;
  text-transform:uppercase; color:#fff; background:var(--rust);
  padding:8px 16px; border-radius:20px; margin-bottom:28px;
}
.ribbon-badge .dot{ width:7px; height:7px; border-radius:50%; background:#fff; animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.3;} }

.hero{ padding:72px 0 40px; text-align:center; }
.eyebrow{ font-family:'IBM Plex Mono',monospace; font-weight:700; letter-spacing:3px; text-transform:uppercase; font-size:12px; color:var(--amber); margin-bottom:14px; }
.hero h1{ font-size:clamp(32px,7vw,48px); color:#fff; line-height:1.1; margin-bottom:16px; }
.hero .lede{ color:#CBD5D9; font-size:17px; max-width:44ch; margin:0 auto 36px; }

.cover{ width:200px; margin:0 auto 40px; border-radius:8px; overflow:hidden; box-shadow:0 30px 60px -20px rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.08); }
.cover img{ width:100%; display:block; }

.signup{ background:#fff; border-radius:12px; padding:28px 24px; margin:0 auto 48px; max-width:440px; }
.signup .label{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--teal-dark); margin-bottom:6px; display:block; }
.signup .sub{ color:var(--ink-soft); font-size:14px; margin-bottom:18px; display:block; }
.signup form{ display:flex; gap:10px; flex-wrap:wrap; }
.signup input[type=email]{
  flex:1; min-width:180px; padding:14px 16px; border-radius:6px; border:1.5px solid var(--line);
  font-family:'Atkinson Hyperlegible',sans-serif; font-size:15px; color:var(--ink);
}
.signup input[type=email]:focus{ outline:2px solid var(--teal); border-color:var(--teal); }
.signup button{
  font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:14px; letter-spacing:0.5px;
  background:var(--amber); color:var(--ink); border:none; border-radius:6px; padding:14px 22px; cursor:pointer;
}
.signup button:hover{ background:var(--amber-dark); color:#fff; }
.signup .fine{ font-size:12px; color:#8a97a0; margin-top:12px; display:block; }

.roadmap-section{ padding:0 0 60px; }
.roadmap-track-wrap{ overflow-x:auto; padding-bottom:8px; }
.roadmap-track{ min-width:600px; }
.stage-strip{ display:flex; justify-content:space-between; min-width:600px; margin-top:10px; }
.stage-strip .s{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:#9FB0B7; text-align:center; width:44px; }

.author-line{ text-align:center; padding-bottom:64px; color:#9FB0B7; font-size:14px; }
.author-line strong{ color:#fff; }

footer{ border-top:1px solid rgba(255,255,255,0.12); padding:28px 0; text-align:center; }
footer p{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:#6B7A82; letter-spacing:0.5px; }