@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;0,900;1,800&family=League+Spartan:wght@800;900&family=Space+Mono:wght@400;700&display=swap");

:root {
  --black: #050505;
  --panel: #0b0c0a;
  --lime: #c8ff00;
  --white: #f3f5eb;
  --muted: #8a8d82;
  --line: #2b2e26;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; background: var(--black); }
body {
  min-width: 320px;
  margin: 0;
  color: var(--white);
  background: var(--black);
  font-family: "Space Mono", monospace;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled, input:disabled { cursor: wait; opacity: .7; }
::selection { color: var(--black); background: var(--lime); }

.site-shell {
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 20%, rgba(200,255,0,.09), transparent 28rem),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    var(--black);
  background-size: auto, 52px 52px, 52px 52px, auto;
}

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

.site-header,
.site-footer,
.hero,
.how-it-works,
.beta-section {
  width: min(100% - 48px, 1440px);
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

.site-header,
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header {
  min-height: 112px;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  color: var(--white);
  text-decoration: none;
  letter-spacing: -.06em;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  transform: skew(-7deg);
}
.wordmark span { color: var(--lime); }

.header-status {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .68rem;
}
.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 rgba(200,255,0,.4);
  animation: pulse 2s infinite;
}

.hero {
  min-height: calc(100svh - 112px);
  padding: 76px 0 112px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, .72fr);
  align-items: center;
  gap: clamp(42px, 8vw, 140px);
}
.hero-copy { position: relative; z-index: 2; }
.eyebrow {
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--lime);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .71rem;
  font-weight: 700;
}
.eyebrow::before { content: ""; width: 38px; height: 3px; background: var(--lime); }
.hero-title {
  max-width: 850px;
  margin: 0;
  display: grid;
  gap: .015em;
  font-family: "League Spartan", sans-serif;
  font-size: clamp(4.55rem, 8.35vw, 8.3rem);
  font-weight: 900;
  line-height: .78;
  letter-spacing: -.055em;
  text-transform: uppercase;
}
.hero-title > span {
  display: block;
  width: max-content;
  max-width: 100%;
  color: var(--white);
  text-shadow: 0 2px 0 #000, 0 0 18px rgba(243,245,235,.06);
}
.hero-title-accent {
  position: relative;
  color: var(--lime) !important;
  letter-spacing: -.04em;
  text-shadow: 0 2px 0 #000, 0 0 22px rgba(200,255,0,.13) !important;
}
.hero-title-accent::after {
  content: "";
  position: absolute;
  left: .03em;
  bottom: -.12em;
  width: 36%;
  height: .045em;
  background: var(--lime);
}
.hero-description {
  max-width: 670px;
  margin: 44px 0 46px;
  color: #c2c5b9;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(1.32rem, 2vw, 1.72rem);
  font-weight: 600;
  line-height: 1.35;
}
.telemetry { display: flex; gap: clamp(24px, 4vw, 58px); }
.telemetry div { display: grid; gap: 6px; }
.telemetry-label,
.panel-index,
.section-index { color: var(--muted); letter-spacing: .13em; font-size: .58rem; }
.telemetry strong { color: var(--white); letter-spacing: .06em; font-size: .68rem; }

.signup-panel {
  position: relative;
  z-index: 3;
  min-height: 480px;
  padding: clamp(28px, 4vw, 54px);
  border: 1px solid #34382e;
  background: rgba(11,12,10,.94);
  box-shadow: 18px 18px rgba(200,255,0,.08);
  backdrop-filter: blur(18px);
}
.signup-panel::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 64px;
  height: 7px;
  background: var(--lime);
}
.panel-index { margin-bottom: 42px; }
.form-heading { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.form-heading svg { flex: 0 0 auto; margin-top: 4px; color: var(--lime); }
.form-heading p,
.success-kicker {
  margin: 0 0 3px;
  color: var(--lime);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .61rem;
  font-weight: 700;
}
.form-heading h2,
.success-state h2 {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.panel-copy {
  margin: 0 0 26px;
  color: #aeb2a5;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.08rem;
  line-height: 1.42;
}
.platform-fieldset {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 26px;
  padding: 0;
  border: 0;
}
.platform-option {
  min-height: 72px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1px 10px;
  color: var(--white);
  text-align: left;
  border: 1px solid var(--line);
  background: #0e100d;
  transition: transform .18s, border-color .18s, background .18s;
}
.platform-option:hover { transform: translateY(-2px); border-color: #68734a; }
.platform-option.selected { color: var(--black); border-color: var(--lime); background: var(--lime); }
.option-marker {
  grid-row: 1 / span 2;
  width: 12px;
  height: 12px;
  border: 1px solid #777c6e;
}
.platform-option.selected .option-marker { border-color: var(--black); background: var(--black); }
.platform-option > span:not(.option-marker) {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  text-transform: uppercase;
}
.platform-option small { color: var(--muted); letter-spacing: .12em; font-size: .48rem; }
.platform-option.selected small { color: rgba(5,5,5,.65); }
.email-label { display: block; margin-bottom: 8px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; font-size: .57rem; }
.email-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.email-row input {
  min-width: 0;
  min-height: 58px;
  padding: 0 17px;
  color: var(--white);
  border: 1px solid #3a3d34;
  border-right: 0;
  outline: 0;
  background: #080907;
}
.email-row input:focus { border-color: var(--lime); box-shadow: inset 0 0 0 1px var(--lime); }
.email-row input::placeholder { color: #5c6057; }
.submit-button,
.share-button {
  min-height: 58px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--black);
  border: 1px solid var(--lime);
  background: var(--lime);
  text-transform: uppercase;
  font-size: .64rem;
  font-weight: 700;
  transition: transform .18s, filter .18s;
}
.submit-button:hover,
.share-button:hover { transform: translateY(-2px); filter: brightness(1.05); }
.submit-button svg,
.share-button svg,
.text-button svg,
.inline-cta svg { transition: transform .18s; }
.submit-button:hover svg,
.share-button:hover svg,
.text-button:hover svg,
.inline-cta:hover svg { transform: translate(3px, -3px); }
.form-message { margin: 14px 0 0; color: #ff8b70; font-size: .66rem; line-height: 1.5; }
.privacy-note { margin: 16px 0 0; color: #696d63; font-size: .55rem; line-height: 1.5; }

.success-state {
  min-height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.success-icon {
  width: 62px;
  height: 62px;
  margin-bottom: 27px;
  display: grid;
  place-items: center;
  color: var(--black);
  background: var(--lime);
  transform: rotate(-5deg);
}
.success-state h2 { max-width: 390px; font-size: clamp(3.2rem, 5vw, 4.6rem); }
.success-state > p:not(.success-kicker) {
  max-width: 390px;
  color: #aeb2a5;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.15rem;
  line-height: 1.4;
}
.share-button { width: 100%; margin-top: 22px; }
.text-button {
  margin-top: 16px;
  padding: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--lime);
  border: 0;
  border-bottom: 1px solid var(--lime);
  background: transparent;
  text-transform: uppercase;
  font-size: .64rem;
  font-weight: 700;
}

.track-art {
  position: absolute;
  right: -19vw;
  bottom: -14vw;
  z-index: 1;
  width: 65vw;
  min-width: 720px;
  height: 33vw;
  min-height: 360px;
  opacity: .24;
  transform: rotate(-12deg);
}
.track-line { position: absolute; inset: auto 0; height: 28%; border: 1px solid var(--lime); border-radius: 50%; }
.track-line-one { bottom: 0; }
.track-line-two { bottom: 10%; transform: scale(.84); }
.track-line-three { bottom: 20%; transform: scale(.68); }
.speed-mark { position: absolute; right: 12%; bottom: 31%; color: var(--lime); letter-spacing: .2em; font-size: .7rem; }

.how-it-works,
.beta-section { border-top: 1px solid var(--line); }
.how-it-works { padding: 110px 0 120px; }
.section-heading {
  display: grid;
  grid-template-columns: minmax(180px, .42fr) 1fr;
  align-items: start;
  gap: 40px;
  margin-bottom: 64px;
}
.section-heading h2,
.beta-section h2 {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(3.4rem, 7vw, 7rem);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.055em;
  text-transform: uppercase;
}
.section-heading h2 span,
.beta-section h2 span { color: transparent; -webkit-text-stroke: 1.5px var(--lime); }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step-card {
  min-height: 270px;
  padding: 28px;
  border: 1px solid var(--line);
  background: rgba(11,12,10,.72);
}
.step-number { color: var(--lime); letter-spacing: .14em; font-size: .62rem; }
.step-card h3 {
  margin: 78px 0 10px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2.45rem;
  line-height: 1;
  text-transform: uppercase;
}
.step-card p {
  max-width: 340px;
  margin: 0;
  color: #9da195;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.12rem;
  line-height: 1.45;
}

.beta-section {
  padding: 110px 0 120px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .75fr);
  align-items: start;
  gap: clamp(48px, 9vw, 150px);
}
.beta-section .section-index { display: block; margin-bottom: 32px; }
.beta-copy { padding-top: 40px; }
.beta-copy p {
  margin: 0 0 24px;
  color: #b9bdb1;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.35rem;
  line-height: 1.45;
}
.beta-copy .planned-note { color: #898d82; font-size: 1rem; }
.planned-note strong { color: var(--white); }
.inline-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-bottom: 7px;
  color: var(--lime);
  border-bottom: 1px solid var(--lime);
  text-decoration: none;
  text-transform: uppercase;
  font-size: .68rem;
  font-weight: 700;
}

.site-footer {
  min-height: 76px;
  color: #5f6359;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-top: 1px solid var(--line);
  font-size: .56rem;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.reveal { opacity: 0; animation: reveal .7s cubic-bezier(.2,.75,.25,1) forwards; }
.reveal-1 { animation-delay: 80ms; }
.reveal-2 { animation-delay: 160ms; }
.reveal-3 { animation-delay: 280ms; }
.reveal-4 { animation-delay: 400ms; }
@keyframes reveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 50% { opacity: .5; box-shadow: 0 0 0 8px rgba(200,255,0,0); } }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; align-items: start; gap: 64px; padding-top: 80px; }
  .signup-panel { width: min(100%, 650px); justify-self: end; }
  .track-art { right: -40vw; bottom: 6vw; }
  .section-heading { grid-template-columns: 1fr; gap: 26px; }
  .beta-section { grid-template-columns: 1fr; gap: 20px; }
  .beta-copy { width: min(100%, 700px); justify-self: end; padding-top: 0; }
}

@media (max-width: 720px) {
  .steps-grid { grid-template-columns: 1fr; }
  .step-card { min-height: 220px; }
  .step-card h3 { margin-top: 50px; }
}

@media (max-width: 620px) {
  .site-header,
  .site-footer,
  .hero,
  .how-it-works,
  .beta-section { width: min(100% - 30px, 1440px); }
  .site-header { min-height: 86px; }
  .header-status { max-width: 145px; font-size: .5rem; line-height: 1.4; }
  .hero { min-height: auto; padding: 64px 0 80px; }
  .hero-title { font-size: clamp(3.45rem, 16.5vw, 5.15rem); line-height: .8; letter-spacing: -.045em; }
  .hero-description { margin: 34px 0; }
  .telemetry { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
  .signup-panel { min-height: 0; padding: 28px 20px 32px; box-shadow: 9px 9px rgba(200,255,0,.08); }
  .panel-index { margin-bottom: 34px; }
  .platform-fieldset,
  .email-row { grid-template-columns: 1fr; }
  .email-row input { border-right: 1px solid #3a3d34; }
  .submit-button { min-height: 56px; }
  .how-it-works,
  .beta-section { padding: 80px 0 88px; }
  .section-heading h2,
  .beta-section h2 { font-size: clamp(3rem, 16vw, 5rem); }
  .site-footer { gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}