:root {
      color-scheme: dark;

      --bg: #080b10;
      --panel: #0f141c;
      --panel-2: #131a24;
      --border: #263142;
      --border-strong: #34445a;

      --text: #f5f7fa;
      --muted: #9ca9b8;
      --soft: #738195;

      --accent: #7fd2ff;
      --success: #7ee2a8;
      --warning: #ffd38a;

      --max: 1180px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background:
        radial-gradient(
          circle at 85% 0%,
          rgba(127, 210, 255, 0.10),
          transparent 28rem
        ),
        var(--bg);
      color: var(--text);
      font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
      line-height: 1.55;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .shell {
      width: min(
        calc(100% - 40px),
        var(--max)
      );
      margin: 0 auto;
    }

    .nav {
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .brand {
      font-size: 18px;
      font-weight: 760;
      letter-spacing: 0.08em;
    }

    .nav-links {
      display: flex;
      gap: 22px;
      align-items: center;
      color: var(--muted);
      font-size: 14px;
    }

    .nav-links a:hover {
      color: var(--text);
    }

    .hero {
      padding: 92px 0 68px;
      display: grid;
      grid-template-columns:
        minmax(0, 1.05fr)
        minmax(360px, 0.95fr);
      gap: 64px;
      align-items: center;
    }

    .eyebrow {
      margin-bottom: 18px;
      color: var(--accent);
      font-size: 13px;
      font-weight: 730;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    h1 {
      max-width: 790px;
      margin: 0;
      font-size: clamp(
        44px,
        6.5vw,
        78px
      );
      line-height: 0.98;
      letter-spacing: -0.052em;
    }

    .hero-copy {
      max-width: 730px;
      margin-top: 28px;
      color: var(--muted);
      font-size: clamp(
        18px,
        2vw,
        22px
      );
    }

    .hero-copy strong {
      color: var(--text);
      font-weight: 650;
    }

    .actions {
      margin-top: 34px;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .button {
      min-height: 46px;
      padding: 0 20px;
      border: 1px solid var(--border-strong);
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
    }

    .button-primary {
      background: var(--text);
      color: #090b0f;
      border-color: var(--text);
    }

    .button-secondary {
      background: rgba(255,255,255,0.025);
      color: var(--text);
    }

    .proof {
      background:
        linear-gradient(
          180deg,
          rgba(255,255,255,0.035),
          rgba(255,255,255,0.012)
        );
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      box-shadow:
        0 24px 80px rgba(0,0,0,0.28);
    }

    .proof-head {
      min-height: 52px;
      padding: 0 18px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--muted);
      font-size: 12px;
      letter-spacing: 0.04em;
    }

    .live {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--success);
      font-weight: 700;
    }

    .live::before {
      content: "";
      width: 7px;
      height: 7px;
      background: var(--success);
      border-radius: 999px;
      box-shadow:
        0 0 0 4px rgba(126,226,168,0.10);
    }

    .proof-body {
      padding: 20px;
    }

    .proof-row {
      min-height: 48px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 20px;
      align-items: center;
      border-bottom: 1px solid rgba(255,255,255,0.055);
      font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;
      font-size: 12px;
    }

    .proof-row:last-child {
      border-bottom: 0;
    }

    .proof-label {
      color: #cbd3dd;
    }

    .pass {
      color: var(--success);
      font-weight: 750;
    }

    .section {
      padding: 78px 0;
      border-top: 1px solid rgba(255,255,255,0.06);
    }

    .section-grid {
      display: grid;
      grid-template-columns:
        minmax(240px, 0.7fr)
        minmax(0, 1.3fr);
      gap: 72px;
    }

    h2 {
      margin: 0;
      font-size: clamp(
        30px,
        4vw,
        46px
      );
      line-height: 1.05;
      letter-spacing: -0.035em;
    }

    .section-intro {
      margin-top: 18px;
      color: var(--muted);
      max-width: 520px;
    }

    .flow {
      display: grid;
      gap: 10px;
    }

    .flow-step {
      min-height: 68px;
      padding: 16px 18px;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 10px;
      display: grid;
      grid-template-columns: 38px 1fr auto;
      align-items: center;
      gap: 14px;
    }

    .flow-number {
      width: 30px;
      height: 30px;
      border: 1px solid var(--border-strong);
      border-radius: 7px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--soft);
      font-family: monospace;
      font-size: 11px;
    }

    .flow-title {
      font-weight: 680;
    }

    .flow-detail {
      color: var(--muted);
      font-size: 13px;
    }

    .flow-state {
      color: var(--success);
      font-size: 11px;
      font-family: monospace;
      font-weight: 750;
    }

    .result-card {
      margin-top: 34px;
      padding: 22px;
      background: var(--panel-2);
      border: 1px solid var(--border);
      border-radius: 12px;
    }

    .result-card pre {
      margin: 0;
      white-space: pre-wrap;
      word-break: break-word;
      color: #dce5ef;
      font-family:
        "SFMono-Regular",
        Consolas,
        monospace;
      font-size: 13px;
      line-height: 1.7;
    }

    .architecture {
      display: grid;
      grid-template-columns:
        repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .card {
      min-height: 188px;
      padding: 22px;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 12px;
    }

    .card-kicker {
      color: var(--soft);
      font-family: monospace;
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .card h3 {
      margin: 16px 0 10px;
      font-size: 19px;
    }

    .card p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .scope {
      display: grid;
      grid-template-columns:
        repeat(4, minmax(0,1fr));
      gap: 12px;
      margin-top: 34px;
    }

    .scope-item {
      padding: 18px;
      background: rgba(255,255,255,0.025);
      border: 1px solid var(--border);
      border-radius: 10px;
    }

    .scope-item strong {
      display: block;
      margin-bottom: 5px;
      font-size: 14px;
    }

    .scope-item span {
      color: var(--muted);
      font-size: 12px;
    }

    .cta {
      padding: 84px 0 94px;
      border-top: 1px solid rgba(255,255,255,0.06);
      text-align: center;
    }

    .cta h2 {
      max-width: 760px;
      margin: 0 auto;
    }

    .cta p {
      max-width: 650px;
      margin: 20px auto 0;
      color: var(--muted);
      font-size: 17px;
    }

    .cta .actions {
      justify-content: center;
    }

    footer {
      padding: 28px 0 44px;
      border-top: 1px solid rgba(255,255,255,0.06);
      color: var(--soft);
      font-size: 12px;
    }

    .footer-inner {
      display: flex;
      justify-content: space-between;
      gap: 30px;
    }

    @media (
      max-width: 900px
    ) {
      .hero {
        grid-template-columns: 1fr;
        gap: 38px;
        padding-top: 68px;
      }

      .section-grid {
        grid-template-columns: 1fr;
        gap: 38px;
      }

      .architecture {
        grid-template-columns: 1fr;
      }

      .scope {
        grid-template-columns:
          repeat(2, minmax(0,1fr));
      }
    }

    @media (
      max-width: 620px
    ) {
      .shell {
        width: min(
          calc(100% - 28px),
          var(--max)
        );
      }

      .nav-links {
        gap: 13px;
        flex-wrap: wrap;
        justify-content: flex-end;
      }

      .nav-links .optional {
        display: none;
      }

      h1 {
        font-size: 45px;
      }

      .scope {
        grid-template-columns: 1fr;
      }

      .flow-step {
        grid-template-columns: 32px 1fr;
      }

      .flow-state {
        grid-column: 2;
      }

      .footer-inner {
        flex-direction: column;
      }
    }