:root {
      --bg: #05070a;
      --surface: #0b0f14;
      --surface-2: #111820;
      --fg: #f5f7fa;
      --muted: #8b949e;
      --border: #24303d;
      --accent: #00e676;
      --accent-blue: #6aa8ff;
      --warn: #f6c451;
      --danger: #ff5f57;
      --font-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
      --font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
      --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      min-height: 100vh;
      background: var(--bg);
      color: var(--fg);
      font-family: var(--font-body);
      line-height: 1.5;
    }

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

    .container {
      width: min(1180px, calc(100% - 40px));
      margin: 0 auto;
    }

    .nav {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(5, 7, 10, 0.86);
      border-bottom: 1px solid var(--border);
      backdrop-filter: blur(18px);
    }

    .nav-inner {
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .nav-logo {
      font-weight: 800;
      letter-spacing: -0.02em;
    }

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

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

    .nav-cta,
    .btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 18px;
      border-radius: 8px;
      background: var(--accent);
      color: #071008;
      font-weight: 700;
    }

    .btn-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 18px;
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--fg);
      font-weight: 700;
    }

    .hero {
      padding: 92px 0 84px;
      border-bottom: 1px solid var(--border);
      background:
        radial-gradient(circle at 80% 18%, rgba(0, 230, 118, 0.13), transparent 32%),
        linear-gradient(180deg, rgba(17, 24, 32, 0.84), rgba(5, 7, 10, 0));
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(min(420px, 100%), 1.08fr);
      gap: 56px;
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    h1 {
      margin-top: 22px;
      font-size: clamp(44px, 5.2vw, 80px);
      line-height: 1.03;
      letter-spacing: -0.04em;
    }

    .hero h2 {
      margin-top: 22px;
      color: var(--accent-blue);
      font-size: clamp(22px, 2vw, 32px);
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    .hero p {
      margin-top: 22px;
      max-width: 620px;
      color: var(--muted);
      font-size: 18px;
    }

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

    .console {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: #080c10;
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
    }

    .console::after {
      content: "";
      position: absolute;
      inset: -80px -40px auto -40px;
      height: 150px;
      background: linear-gradient(180deg, rgba(0, 230, 118, 0.11), transparent);
      animation: scan 4.8s linear infinite;
      pointer-events: none;
    }

    @keyframes scan {
      from { transform: translateY(-70px); }
      to { transform: translateY(520px); }
    }

    .console-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 18px;
      border-bottom: 1px solid var(--border);
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--muted);
    }

    .live {
      color: var(--accent);
    }

    .console-body {
      padding: 18px;
      font-family: var(--font-mono);
    }

    .risk-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 18px;
    }

    .risk-card {
      padding: 13px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--surface);
    }

    .risk-card span {
      display: block;
      color: var(--muted);
      font-size: 11px;
    }

    .risk-card strong {
      display: block;
      margin-top: 8px;
      color: var(--fg);
      font-size: 18px;
    }

    .gate-list {
      display: grid;
      gap: 10px;
    }

    .gate-row {
      display: grid;
      grid-template-columns: 118px 1fr 74px;
      gap: 12px;
      align-items: center;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: rgba(17, 24, 32, 0.74);
      font-size: 12px;
    }

    .gate-row strong {
      color: var(--fg);
    }

    .bar {
      height: 6px;
      overflow: hidden;
      border-radius: 999px;
      background: #1e2630;
    }

    .bar span {
      display: block;
      width: var(--w);
      height: 100%;
      border-radius: inherit;
      background: var(--accent);
      animation: grow 1.4s ease both;
    }

    @keyframes grow {
      from { width: 0; }
      to { width: var(--w); }
    }

    .state {
      color: var(--accent);
      text-align: right;
    }

    .state.warn {
      color: var(--warn);
    }

    .section {
      padding: 88px 0;
      border-bottom: 1px solid var(--border);
    }

    .section-label {
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .section-title {
      margin-top: 14px;
      max-width: 820px;
      font-size: clamp(32px, 4vw, 56px);
      line-height: 1.08;
      letter-spacing: -0.04em;
    }

    .section-copy {
      margin-top: 18px;
      max-width: 760px;
      color: var(--muted);
      font-size: 17px;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 38px;
    }

    .card {
      min-height: 210px;
      padding: 24px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--surface);
    }

    .card-kicker {
      color: var(--accent-blue);
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 700;
    }

    .card h3 {
      margin-top: 14px;
      font-size: 22px;
      letter-spacing: -0.02em;
    }

    .card p {
      margin-top: 12px;
      color: var(--muted);
    }

    .flow {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-top: 38px;
    }

    .flow-step {
      padding: 22px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(106, 168, 255, 0.10), rgba(17, 24, 32, 0.82));
    }

    .flow-step span {
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 700;
    }

    .flow-step h3 {
      margin-top: 12px;
      font-size: 20px;
    }

    .flow-step p {
      margin-top: 10px;
      color: var(--muted);
      font-size: 14px;
    }

    .cta {
      padding: 72px 0;
      background: var(--surface);
    }

    .cta-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      padding: 34px;
      border: 1px solid var(--border);
      border-radius: 18px;
      background: var(--surface-2);
    }

    .cta h2 {
      font-size: clamp(28px, 3.2vw, 46px);
      line-height: 1.1;
      letter-spacing: -0.04em;
    }

    .cta p {
      margin-top: 12px;
      color: var(--muted);
    }

    .footer {
      padding: 34px 0;
      color: var(--muted);
    }

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

    .footer-links {
      display: flex;
      gap: 20px;
    }

    @media (max-width: 980px) {
      .hero-grid,
      .cards,
      .flow {
        grid-template-columns: 1fr;
      }

      .hero-grid {
        gap: 36px;
      }

      .nav-links {
        display: none;
      }
    }

    @media (max-width: 640px) {
      .container {
        width: min(100% - 28px, 1180px);
      }

      .hero {
        padding: 58px 0 54px;
      }

      .risk-strip {
        grid-template-columns: repeat(2, 1fr);
      }

      .gate-row {
        grid-template-columns: 1fr;
      }

      .state {
        text-align: left;
      }

      .cta-inner,
      .footer-inner {
        flex-direction: column;
        align-items: flex-start;
      }
    }