:root {
      color-scheme: dark;

      --bg: #080b10;
      --panel: #0f141c;
      --panel-2: #131a24;

      --line: #263142;
      --line-strong: #34445a;

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

      --accent: #7fd2ff;
      --good: #7ee2a8;
      --deny: #ff9d9d;

      --max: 1180px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      background: var(--bg);
      scroll-behavior: smooth;
    }

    body {
      margin: 0;

      background:
        radial-gradient(
          circle at 88% -8%,
          rgba(127,210,255,.10),
          transparent 34rem
        ),
        var(--bg);

      color: var(--text);

      font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

      line-height: 1.6;
    }

    a {
      color: inherit;
    }

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

    header {
      position: sticky;
      top: 0;
      z-index: 50;

      background: rgba(8,11,16,.90);

      border-bottom:
        1px solid rgba(255,255,255,.065);

      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .nav {
      min-height: 72px;

      display: flex;
      align-items: center;
      justify-content: space-between;

      gap: 28px;
    }

    .brand {
      color: var(--text);

      font-size: 18px;
      font-weight: 800;
      letter-spacing: .08em;

      text-decoration: none;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 22px;

      color: var(--muted);

      font-size: 14px;
    }

    .nav-links a {
      text-decoration: none;
    }

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

    .hero {
      padding:
        clamp(78px,10vw,132px)
        0
        82px;
    }

    .eyebrow,
    .section-label {
      margin: 0 0 14px;

      color: var(--accent);

      font-size: 12px;
      font-weight: 800;

      letter-spacing: .11em;

      text-transform: uppercase;
    }

    h1,
    h2,
    h3 {
      margin-top: 0;
    }

    h1 {
      max-width: 940px;

      margin-bottom: 24px;

      font-size:
        clamp(44px,7vw,80px);

      line-height: .99;
      letter-spacing: -.055em;
    }

    .hero-copy {
      max-width: 820px;

      margin: 0;

      color: var(--muted);

      font-size:
        clamp(18px,2.3vw,22px);

      line-height: 1.62;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;

      gap: 12px;

      margin-top: 34px;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;

      min-height: 48px;

      padding: 0 20px;

      border:
        1px solid var(--line-strong);

      border-radius: 8px;

      font-size: 14px;
      font-weight: 750;

      text-decoration: none;
    }

    .button-primary {
      background: var(--text);
      color: var(--bg);

      border-color: var(--text);
    }

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

    .statement {
      margin-top: 60px;

      padding:
        clamp(28px,5vw,48px);

      border:
        1px solid rgba(127,210,255,.30);

      border-radius: 16px;

      background:
        linear-gradient(
          135deg,
          rgba(127,210,255,.075),
          rgba(255,255,255,.015)
        );
    }

    .statement p {
      max-width: 920px;

      margin: 0;

      font-size:
        clamp(22px,3vw,30px);

      line-height: 1.45;
    }

    .section {
      padding: 86px 0;

      border-top:
        1px solid rgba(255,255,255,.055);
    }

    .section-muted {
      background: rgba(255,255,255,.014);
    }

    .section h2 {
      max-width: 850px;

      margin-bottom: 18px;

      font-size:
        clamp(32px,4.5vw,52px);

      line-height: 1.04;
      letter-spacing: -.04em;
    }

    .section-intro {
      max-width: 820px;

      margin: 0 0 38px;

      color: var(--muted);

      font-size: 18px;
    }

    .three-grid {
      display: grid;

      grid-template-columns:
        repeat(3,minmax(0,1fr));

      gap: 18px;
    }

    .card {
      padding: 26px;

      border:
        1px solid var(--line);

      border-radius: 12px;

      background: var(--panel);
    }

    .card-kicker {
      margin-bottom: 12px;

      color: var(--accent);

      font-size: 12px;
      font-weight: 800;

      letter-spacing: .08em;

      text-transform: uppercase;
    }

    .card h3 {
      margin-bottom: 12px;

      font-size: 21px;
    }

    .card p {
      margin: 0;

      color: var(--muted);
    }

    .flow {
      display: grid;

      grid-template-columns:
        repeat(7,minmax(80px,1fr));

      gap: 10px;

      align-items: stretch;
    }

    .flow-step,
    .flow-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .flow-step {
      min-height: 110px;

      padding: 14px;

      border:
        1px solid var(--line);

      border-radius: 10px;

      background: var(--panel);

      text-align: center;

      font-size: 14px;
      font-weight: 700;
    }

    .flow-step.policy {
      color: var(--accent);

      border-color:
        rgba(127,210,255,.50);

      background:
        rgba(127,210,255,.07);
    }

    .flow-arrow {
      color: var(--soft);
      font-size: 22px;
    }

    .decision-grid {
      display: grid;

      grid-template-columns:
        repeat(2,minmax(0,1fr));

      gap: 20px;
    }

    .decision-card {
      padding: 30px;

      border:
        1px solid var(--line);

      border-radius: 14px;

      background: var(--panel);
    }

    .decision-card.allow {
      border-color:
        rgba(126,226,168,.35);
    }

    .decision-card.deny {
      border-color:
        rgba(255,157,157,.28);
    }

    .decision-state {
      margin-bottom: 18px;

      font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

      font-size: 13px;
      font-weight: 850;

      letter-spacing: .08em;
    }

    .allow .decision-state {
      color: var(--good);
    }

    .deny .decision-state {
      color: var(--deny);
    }

    .decision-card h3 {
      font-size: 24px;
    }

    .decision-card p {
      color: var(--muted);
    }

    .decision-list {
      margin: 20px 0 0;
      padding: 0;

      list-style: none;
    }

    .decision-list li {
      padding: 11px 0;

      border-top:
        1px solid rgba(255,255,255,.06);

      color: var(--muted);
    }

    .compare {
      display: grid;

      grid-template-columns:
        repeat(2,minmax(0,1fr));

      gap: 18px;
    }

    .compare-card {
      padding: 28px;

      border:
        1px solid var(--line);

      border-radius: 12px;

      background: var(--panel);
    }

    .compare-card.enforced {
      border-color:
        rgba(126,226,168,.35);
    }

    .compare-card.enforced h3 {
      color: var(--good);
    }

    .compare-list {
      margin: 0;
      padding: 0;

      list-style: none;
    }

    .compare-list li {
      padding: 11px 0;

      border-top:
        1px solid rgba(255,255,255,.06);

      color: var(--muted);
    }

    .compare-list li:first-child {
      border-top: 0;
    }

    .proof {
      display: grid;

      grid-template-columns:
        minmax(0,1.1fr)
        minmax(320px,.9fr);

      gap: 42px;

      padding:
        clamp(28px,5vw,50px);

      border:
        1px solid rgba(126,226,168,.28);

      border-radius: 16px;

      background:
        linear-gradient(
          135deg,
          rgba(126,226,168,.055),
          rgba(127,210,255,.045)
        );
    }

    .proof-status {
      overflow: hidden;

      border:
        1px solid var(--line);

      border-radius: 12px;

      background: #0b1017;
    }

    .proof-status-head {
      padding: 15px 18px;

      border-bottom:
        1px solid var(--line);

      color: var(--good);

      font-size: 12px;
      font-weight: 800;

      letter-spacing: .08em;
    }

    .proof-row {
      display: flex;
      justify-content: space-between;

      gap: 20px;

      padding: 13px 18px;

      border-bottom:
        1px solid rgba(255,255,255,.055);

      font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

      font-size: 13px;
    }

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

    .proof-key {
      color: var(--muted);
    }

    .proof-pass {
      color: var(--good);
      font-weight: 800;
    }

    .faq {
      max-width: 920px;
    }

    .faq-item {
      padding: 26px 0;

      border-top:
        1px solid var(--line);
    }

    .faq-item:first-child {
      border-top: 0;
    }

    .faq-item h3 {
      margin-bottom: 10px;

      font-size: 21px;
    }

    .faq-item p {
      margin: 0;

      color: var(--muted);
    }

    .cta {
      padding:
        90px
        0
        110px;

      text-align: center;
    }

    .cta-card {
      padding:
        clamp(40px,6vw,70px);

      border:
        1px solid var(--line);

      border-radius: 16px;

      background: var(--panel);
    }

    .cta h2 {
      max-width: 780px;

      margin:
        0
        auto
        18px;

      font-size:
        clamp(34px,5vw,56px);

      line-height: 1.03;
      letter-spacing: -.045em;
    }

    .cta p {
      max-width: 700px;

      margin:
        0
        auto
        30px;

      color: var(--muted);

      font-size: 18px;
    }

    footer {
      border-top:
        1px solid rgba(255,255,255,.06);
    }

    .footer-inner {
      min-height: 100px;

      display: flex;
      align-items: center;
      justify-content: space-between;

      gap: 30px;

      color: var(--soft);

      font-size: 13px;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;

      gap: 18px;
    }

    .footer-links a {
      text-decoration: none;
    }

    @media (max-width: 900px) {
      .three-grid,
      .decision-grid,
      .compare,
      .proof {
        grid-template-columns: 1fr;
      }

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

      .flow-arrow {
        transform: rotate(90deg);
      }
    }

    @media (max-width: 680px) {
      .nav-links .optional {
        display: none;
      }

      .hero {
        padding-top: 58px;
      }

      .footer-inner {
        padding: 30px 0;

        align-items: flex-start;
        flex-direction: column;
      }
    }