:root {
      --bg: #090b10;
      --ink: #eef2f7;
      --muted: #9aa0a6;
      --blue: #8ab4f8;
      --green: #81c995;
      --yellow: #fdd663;
      --red: #f28b82;
    }

    * { box-sizing: border-box; }

    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 42%, rgba(255,255,255,.055), transparent 34rem),
        linear-gradient(180deg, #0d1118 0%, var(--bg) 52%, #05060a 100%);
      color: var(--ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    #field {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      display: block;
      z-index: 5;
      pointer-events: none;
    }

    .page {
      min-height: 100%;
      position: relative;
      z-index: 10;
      display: grid;
      grid-template-rows: auto 1fr auto;
      background:
        radial-gradient(circle at 50% 36%, rgba(255,255,255,.055), transparent 34rem),
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.08));
    }

    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: clamp(1rem, 2.4vw, 2rem) clamp(1.2rem, 5vw, 4.5rem);
      font-size: .92rem;
      letter-spacing: -.01em;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: .55rem;
      font-weight: 560;
    }

    .mark {
      width: 18px;
      height: 18px;
      display: inline-block;
      position: relative;
    }

    .mark::before,
    .mark::after {
      content: "";
      position: absolute;
      bottom: 2px;
      width: 4px;
      height: 14px;
      border-radius: 999px;
      transform-origin: bottom center;
      filter: saturate(1.05);
    }

    .mark::before {
      left: 5px;
      transform: rotate(25deg);
      background: linear-gradient(180deg, var(--red), var(--yellow), var(--green));
    }

    .mark::after {
      right: 5px;
      transform: rotate(-25deg);
      background: linear-gradient(180deg, var(--yellow), var(--green), var(--blue));
    }

    .links {
      display: flex;
      align-items: center;
      gap: clamp(.8rem, 2vw, 1.9rem);
      color: rgba(255,255,255,.72);
    }

    .links span { opacity: .84; }

    .hero {
      display: grid;
      place-items: center;
      padding: 0 1.25rem 8vh;
      text-align: center;
      pointer-events: none;
    }

    .stack {
      width: min(900px, 100%);
      transform: translateY(-1.5vh);
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .58rem;
      margin-bottom: 1.7rem;
      font-size: clamp(1rem, 1.3vw, 1.15rem);
      font-weight: 520;
      letter-spacing: -.02em;
    }

    h1 {
      margin: 0;
      font-size: clamp(3.2rem, 8.9vw, 8.6rem);
      line-height: .93;
      letter-spacing: -.075em;
      font-weight: 620;
    }

    .subhead {
      margin: .65rem auto 2.35rem;
      max-width: 820px;
      color: rgba(238,242,247,.76);
      font-size: clamp(1.45rem, 4vw, 4.15rem);
      line-height: 1.02;
      letter-spacing: -.06em;
      font-weight: 520;
    }

    .actions {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: .85rem;
      flex-wrap: wrap;
      pointer-events: auto;
    }

    button, a.button {
      border: 0;
      border-radius: 999px;
      padding: .9rem 1.25rem;
      font: inherit;
      text-decoration: none;
      cursor: pointer;
      transition: transform .24s ease, box-shadow .24s ease, background .24s ease;
    }

    .primary {
      background: #eef2f7;
      color: #0c0f14;
      box-shadow: 0 10px 28px rgba(0,0,0,.34);
    }

    .secondary {
      background: rgba(255,255,255,.08);
      color: #eef2f7;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
      backdrop-filter: blur(8px);
    }

    button:hover, a.button:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 24px rgba(0,0,0,.12);
    }

    .hint {
      padding: 1.15rem clamp(1.2rem, 5vw, 4.5rem) 1.45rem;
      color: rgba(238,242,247,.64);
      font-size: .86rem;
      text-align: center;
    }

    @media (max-width: 720px) {
      .links { display: none; }
      .hero { padding-bottom: 5vh; }
      h1 { font-size: clamp(3.6rem, 17vw, 6.8rem); }
      .subhead { font-size: clamp(1.6rem, 8vw, 3rem); }
    }