:root {
    --ground: #050a18;
    --band: #0b1329;
    --paper: #ffffff;
    --ink: #f3f5fa;
    --ink-dim: #b9c1d6;
    --navy: #0b1329;
    --navy-dim: #4a5470;
    --accent: #8fbcff;
    --accent-deep: #1e40af;
    --veil: 5 10 24;
    --gutter: clamp(20px, 6vw, 104px);
    --ease-out: cubic-bezier(.16, .8, .2, 1);
    color-scheme: dark;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
  }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  a { color: inherit; }
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .wrap { max-width: 1120px; margin: 0 auto; }
  .band { padding: clamp(56px, 9vw, 120px) var(--gutter); }
  .band-dark { background: var(--band); color: var(--ink); }
  .band-light { background: var(--paper); color: var(--navy); }
  .band + .band-dark { border-top: 1px solid rgb(255 255 255 / .06); }
  .eyebrow {
    margin: 0 0 14px;
    font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--accent);
  }
  .band-light .eyebrow { color: var(--accent-deep); }
  h2 {
    margin: 0 0 18px;
    max-width: 18em;
    font-size: clamp(1.75rem, 2.4vw + .7rem, 3rem);
    font-weight: 700; font-stretch: 105%;
    line-height: 1.06; letter-spacing: -.025em;
    text-wrap: balance;
  }
  .lede { margin: 0; max-width: 40em; font-size: clamp(1.05rem, .4vw + .95rem, 1.3rem); color: var(--ink-dim); }
  .band-light .lede { color: var(--navy-dim); }
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 54px; padding: 0 26px;
    border: 0; border-radius: 8px;
    background: var(--accent); color: var(--ground);
    font: inherit; font-size: clamp(15px, .2vw + 14px, 17px); font-weight: 700; letter-spacing: -.004em; line-height: 1.1;
    text-decoration: none; cursor: pointer;
    box-shadow: 0 14px 34px rgb(var(--veil) / .45);
    transition: background-color .2s var(--ease-out), transform .15s var(--ease-out);
  }
  .btn:hover { background: #e9edf5; }
  .btn:active { transform: translateY(1px); }
  .btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
  .band-light .btn:focus-visible { outline-color: var(--navy); }
  .btn-ghost {
    background: transparent; color: inherit; box-shadow: none;
    border: 1.5px solid currentColor;
  }
  .btn-ghost:hover { background: rgb(255 255 255 / .08); }
  .band-light .btn-ghost:hover { background: rgb(11 19 41 / .06); }
  footer {
    padding: 36px var(--gutter) calc(36px + env(safe-area-inset-bottom, 0px));
    background: var(--ground); color: var(--ink-dim);
    font-size: 15px;
  }
  footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; }
  footer strong { color: var(--ink); font-weight: 700; }
  footer a { text-decoration: none; }
  footer a:hover, footer a:focus-visible { text-decoration: underline; }
  footer a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  .page { min-height: 100svh; display: flex; flex-direction: column; }
  .page main { flex: 1; padding: clamp(40px, 8vh, 96px) var(--gutter); }
  .brand { display: inline-flex; align-items: center; gap: .5em; font-size: clamp(19px, 1.1vw + 11px, 26px); font-weight: 800; letter-spacing: -.012em; text-decoration: none; margin-bottom: clamp(40px, 8vh, 80px); }
  .brand img { width: 1.6em; height: auto; filter: invert(1); }
  h1 { margin: 0 0 18px; max-width: 16em; font-size: clamp(2rem, 3vw + 1rem, 4rem); font-weight: 680; font-stretch: 106%; line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
  .lede { max-width: 36em; }
  .stack { display: grid; gap: 22px; max-width: 40em; }
  .stack h2 { font-size: 1.35rem; margin: 18px 0 0; }
  .stack p { margin: 0; color: var(--ink-dim); }
  .stack p strong { color: var(--ink); }
  .stack a { color: var(--accent); }
  .actions { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 30px; }
  .actions a.plain { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
  .actions a.plain:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }