@layer reset, base, components, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; }
  button, input { font: inherit; }
  h1, h2, p { margin-top: 0; }
}

@layer base {
  :root {
    --canvas: #d8d6cf;
    --paper: #f1efe8;
    --recess: #dedbd1;
    --ink: #24252a;
    --muted: #62636a;
    --hairline: #b8b5ac;
    --signal: #df5b22;
    --signal-deep: #a63d14;
    --source: #3679a8;
    font-family: "Space Grotesk", sans-serif;
    color: var(--ink);
    background: var(--canvas);
  }
  body { min-width: 320px; min-height: 100vh; }
  a { color: inherit; }
  button, a { touch-action: manipulation; }
  button:focus-visible, a:focus-visible { outline: 3px solid var(--source); outline-offset: 3px; }
}

@layer components {
  .brand-lockup { display: flex; align-items: center; gap: 10px; padding: 24px clamp(18px, 4vw, 64px) 0; font-family: "IBM Plex Mono", monospace; font-size: 14px; font-weight: 600; letter-spacing: .18em; }
  .brand-lockup small { display: block; color: var(--muted); font-size: 8px; letter-spacing: .08em; }
  .open-circuit { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }

  .hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 5vw, 64px); align-items: center; max-width: 1280px; margin: 0 auto; padding: clamp(32px, 6vw, 80px) clamp(18px, 4vw, 64px) clamp(48px, 8vw, 96px); }
  .hero h1 { font-size: clamp(38px, 5.2vw, 68px); line-height: .96; letter-spacing: -.03em; }
  .hero h1 em { color: var(--signal-deep); font-style: normal; }
  .hero p { max-width: 480px; margin: 20px 0 0; color: #4a4b51; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; }
  .hero-shot { width: 100%; max-width: 360px; margin-inline: auto; border-radius: 20px; box-shadow: 0 34px 70px rgb(33 31 27 / 22%); }

  .demo { max-width: 640px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 64px) clamp(48px, 8vw, 80px); text-align: center; }
  .demo h2 { font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -.02em; margin-bottom: 20px; }
  .demo-video { width: 100%; max-width: 360px; aspect-ratio: 9 / 16; border-radius: 20px; box-shadow: 0 34px 70px rgb(33 31 27 / 22%); background: var(--recess); }

  .waitlist { max-width: 640px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 64px) clamp(64px, 8vw, 96px); }
  .waitlist-card { padding: clamp(20px, 3vw, 36px); border: 1px solid var(--hairline); border-radius: 16px; background: var(--paper); }
  .waitlist-card h2 { font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -.02em; }
  .waitlist-card > p { margin: 10px 0 24px; color: var(--muted); font-size: 14px; line-height: 1.5; }
  .waitlist-embed { min-height: 414px; }

  .approval-note { display: flex; gap: 10px; align-items: center; max-width: 640px; margin: 0 auto clamp(48px, 8vw, 80px); padding: 0 clamp(18px, 4vw, 64px); color: var(--muted); font: 500 11px/1.3 "IBM Plex Mono", monospace; letter-spacing: .06em; }
  .approval-note i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); flex: none; }

  footer { padding: clamp(40px, 6vw, 72px) clamp(18px, 4vw, 64px) 40px; text-align: center; border-top: 1px solid var(--hairline); }
  .footer-wordmark { font: 700 clamp(40px, 7vw, 96px)/.9 "IBM Plex Mono", monospace; letter-spacing: .1em; }
  .footer-link { display: inline-block; margin-top: 14px; color: var(--source); font: 500 14px/1.3 "IBM Plex Mono", monospace; letter-spacing: .04em; text-decoration: underline; text-underline-offset: 3px; }
  .footer-meta { margin-top: 20px; color: var(--muted); font: 500 10px/1.3 "IBM Plex Mono", monospace; letter-spacing: .08em; }
  .footer-copyright { margin-top: 8px; color: var(--muted); font: 500 10px/1.3 "IBM Plex Mono", monospace; letter-spacing: .06em; }
}

@layer responsive {
  @media (max-width: 760px) {
    .hero { grid-template-columns: 1fr; text-align: center; }
    .hero p { margin-inline: auto; }
  }
}