:root{
  --ink:#08090B;
  --paper:#F1ECDD;
  --graphite:#3A3F45;
  --robots:#FF4D2E;
  --chips:#7B5CFF;
  --watts:#19E0A4;
  --atoms:#FFD23F;

  --sans:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --serif:'Newsreader',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --rule: rgba(241,236,221,.10);
  --muted: rgba(241,236,221,.55);
  --muted-2: rgba(241,236,221,.36);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--ink);color:var(--paper);font-family:var(--sans);-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

.screen-1{
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 28px;
}

.top-marker{
  font-family:var(--mono);
  font-size: 11px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.hero{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding: 24px 8px 40px;
}
.wordmark{
  max-width: min(960px, 88vw);
  width:100%;
  height:auto;
  display:block;
  margin: 0 auto;
  opacity:0;
  transform: translateY(12px);
  animation: rise .9s cubic-bezier(.22,1,.36,1) .15s forwards;
}
.tagline{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.55;
  color: rgba(241,236,221,.78);
  max-width: 620px;
  margin: 28px auto 0;
  opacity:0;
  animation: fade .8s ease .5s forwards;
}

@keyframes rise{to{opacity:1;transform:translateY(0);}}
@keyframes fade{to{opacity:1;}}

.countdown{
  margin-top: 44px;
  display:flex;
  gap: clamp(18px, 4vw, 56px);
  justify-content:center;
  align-items:flex-end;
  opacity:0;
  animation: fade .8s ease .7s forwards;
}
.cd-unit{display:flex; flex-direction:column; align-items:center; gap:8px;}
.cd-n{
  font-family: var(--sans); font-weight:700;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
  letter-spacing: -.02em;
}
.cd-l{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.cta-row{
  margin-top: 44px;
  display:flex;
  gap: 14px;
  justify-content:center;
  flex-wrap:wrap;
  opacity:0;
  animation: fade .8s ease .9s forwards;
}
.substack-embed{
  width: 480px;
  max-width: 100%;
  height: 150px;
  border: 0;
  background: transparent;
}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 22px;
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  border-radius:2px; border:1px solid var(--paper);
  transition: background .2s, color .2s;
}
.btn:hover{background:var(--paper); color:var(--ink);}
.btn.primary{background:var(--paper); color:var(--ink);}
.btn.primary:hover{background:var(--robots); border-color:var(--robots); color:var(--paper);}

.s1-footer{
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--muted-2);
  padding-top: 16px;
}

.pg-footer{
  padding: 56px 28px;
  border-top: 1px solid var(--rule);
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-align: center;
  line-height: 1.8;
}
.pg-footer .legal{max-width: 720px; margin: 8px auto 0; line-height: 1.7; text-transform: none; letter-spacing: .02em; color: var(--muted-2);}

@media (max-width: 640px){
  .screen-1{padding: 22px;}
  .s1-footer{flex-direction: column; gap: 10px; text-align:center;}
}