:root {
      --bg: #14130a;
      /* black raspberry */
      --bg-2: #0d0c06;
      --forest: #2f3d20;
      /* forestry */
      --moss: #758956;
      /* moss gardens */
      --moss-bright: #a3b87e;
      --ink: #ece9dd;
      --muted: #a49f8a;
      --line: rgba(236, 233, 221, 0.08);
      --line-strong: rgba(236, 233, 221, 0.15);
      --ok: #a3b87e;
      --warn: #cfa960;
      --jam: #c9713d;
      --bad: #d24e33;
      --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
      --sans: "Archivo", -apple-system, "Segoe UI", sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: var(--sans);
      font-size: 16px;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* ambient glass-wall glow, like light through green glass */
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      background:
        radial-gradient(900px 620px at 88% -12%, rgba(117, 137, 86, 0.17), transparent 62%),
        radial-gradient(760px 560px at -12% 42%, rgba(66, 74, 68, 0.16), transparent 60%),
        radial-gradient(1100px 720px at 50% 112%, rgba(47, 61, 32, 0.20), transparent 66%);
    }

    /* film grain */
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 90;
      pointer-events: none;
      opacity: 0.05;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    a {
      color: inherit;
    }

    .wrap {
      max-width: 1140px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .eyebrow {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--moss-bright);
    }

    /* ---------- glowing cards ---------- */
    .glow {
      position: relative;
      border-radius: 12px;
      border: 1px solid var(--line-strong);
      background:
        linear-gradient(180deg, rgba(47, 61, 32, 0.32), rgba(47, 61, 32, 0) 58%),
        #1a1910;
      box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
      transition: transform 0.35s ease, border-color 0.35s ease;
    }

    .glow:hover {
      transform: translateY(-3px);
      border-color: rgba(236, 233, 221, 0.26);
    }

    .glow::before {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: inherit;
      padding: 1.5px;
      background: radial-gradient(220px 220px at var(--mx, 50%) var(--my, 50%),
          rgba(163, 184, 126, 0.95),
          rgba(207, 169, 96, 0.5) 38%,
          rgba(198, 90, 58, 0.28) 62%,
          transparent 80%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask-composite: exclude;
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
    }

    .glow::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: radial-gradient(320px 320px at var(--mx, 50%) var(--my, 50%),
          rgba(163, 184, 126, 0.06),
          transparent 65%);
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
    }

    .glow:hover::before,
    .glow:hover::after {
      opacity: 1;
    }

    @media (hover: none) {
      .glow::before {
        opacity: 0.45;
        --mx: 50%;
        --my: 0%;
      }
    }

    .chip {
      width: 46px;
      height: 46px;
      border-radius: 8px;
      border: 1px solid var(--line-strong);
      background: rgba(236, 233, 221, 0.04);
      display: grid;
      place-items: center;
      color: var(--muted);
      transition: color 0.35s ease, border-color 0.35s ease;
    }

    .glow:hover .chip {
      color: var(--moss-bright);
      border-color: rgba(163, 184, 126, 0.35);
    }

    /* ---------- nav ---------- */
    nav {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(16, 15, 8, 0.72);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--line);
    }

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

    .wordmark {
      display: flex;
      align-items: center;
      text-decoration: none;
    }

    .wordmark img {
      display: block;
      height: 30px;
      width: auto;
    }

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

    .nav-links a:not(.btn) {
      font-size: 13px;
      font-weight: 500;
      color: var(--ink);
      text-decoration: none;
      padding: 8px 16px;
      border-radius: 999px;
      border: 1px solid var(--line-strong);
      background: rgba(236, 233, 221, 0.04);
      transition: color 0.2s, border-color 0.2s, background 0.2s;
    }

    .nav-links a:not(.btn):hover {
      color: var(--moss-bright);
      border-color: rgba(163, 184, 126, 0.45);
      background: rgba(163, 184, 126, 0.08);
    }

    .btn {
      display: inline-block;
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: 12px 24px;
      border-radius: 999px;
      text-decoration: none;
      border: 1px solid transparent;
      transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
    }

    .btn:hover {
      transform: translateY(-1px);
    }

    .btn-primary {
      background: linear-gradient(180deg, #8fab68, var(--moss));
      border-color: rgba(163, 184, 126, 0.55);
      color: #10100a;
      box-shadow: 0 10px 26px rgba(117, 137, 86, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    .btn-primary:hover {
      background: linear-gradient(180deg, #9ab578, #87a163);
      box-shadow: 0 12px 30px rgba(117, 137, 86, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    }

    .btn-primary:disabled {
      background: var(--moss-bright);
      cursor: default;
      transform: none;
    }

    .btn-ghost {
      border-color: rgba(236, 233, 221, 0.24);
      background: rgba(236, 233, 221, 0.05);
      color: var(--ink);
    }

    .btn-ghost:hover {
      border-color: rgba(236, 233, 221, 0.42);
      background: rgba(236, 233, 221, 0.09);
    }

    nav .btn {
      padding: 9px 18px;
      font-size: 13px;
    }

    /* ---------- hero ---------- */
    .hero {
      position: relative;
      overflow: hidden;
      padding: 128px 0 96px;
      min-height: min(760px, 86vh);
      display: flex;
      align-items: flex-start;
    }

    .hero-media {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      transform-origin: 50% 42%;
      will-change: transform, opacity;
    }

    .hero-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 42%;
      filter: grayscale(0.12) brightness(0.86) contrast(1.03) saturate(1.05);
      display: block;
      transform-origin: 50% 42%;
      animation: heroKenBurns 26s ease-in-out infinite alternate;
    }

    @keyframes heroKenBurns {
      0% {
        transform: scale(1) translate(0, 0);
      }

      100% {
        transform: scale(1.08) translate(-1.5%, 1%);
      }
    }

    .hero-tint {
      position: absolute;
      inset: 0;
      background: var(--forest);
      mix-blend-mode: color;
      opacity: 0.22;
    }

    .hero-scrim {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(100deg, rgba(10, 9, 5, 0.62) 0%, rgba(10, 9, 5, 0.22) 45%, rgba(10, 9, 5, 0.3) 100%),
        linear-gradient(180deg, rgba(10, 9, 5, 0.35) 0%, rgba(10, 9, 5, 0) 40%);
    }

    .hero-target-field {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
    }

    .hero-target {
      position: absolute;
      color: var(--moss-bright);
      opacity: 0.32;
      transform-origin: center;
      transition: opacity 0.6s ease, transform 0.6s ease;
      will-change: opacity, transform;
    }

    .hero-blend {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 70%;
      z-index: 4;
      background: linear-gradient(to bottom, transparent, var(--bg-2) 92%);
      opacity: 0;
      pointer-events: none;
    }

    .hero-grid {
      position: relative;
      z-index: 3;
      width: 100%;
      max-width: 600px;
    }

    h1 {
      font-family: var(--mono);
      font-weight: 700;
      font-size: clamp(28px, 4vw, 46px);
      line-height: 1.15;
      letter-spacing: -0.01em;
      margin: 22px 0 12px;
    }

    h1 em {
      font-style: normal;
      color: var(--moss-bright);
    }

    .hero-sub {
      font-family: var(--mono);
      font-style: normal;
      font-weight: 500;
      font-size: clamp(13px, 1.3vw, 15px);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--moss-bright);
      margin: 0 0 24px;
      line-height: 1.5;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .hero-sub::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--moss-bright);
      box-shadow: 0 0 10px 2px rgba(163, 184, 126, 0.6);
      flex: none;
      animation: heroSubBeep 1.8s ease-in-out infinite;
    }

    @keyframes heroSubBeep {

      0%,
      100% {
        opacity: 1;
        box-shadow: 0 0 10px 2px rgba(163, 184, 126, 0.6);
      }

      50% {
        opacity: 0.35;
        box-shadow: 0 0 4px 0 rgba(163, 184, 126, 0.25);
      }
    }

    .type-cursor {
      display: inline-block;
      color: var(--moss-bright);
      animation: typeCursorBlink 0.9s steps(1) infinite;
    }

    @keyframes typeCursorBlink {

      0%,
      49% {
        opacity: 1;
      }

      50%,
      100% {
        opacity: 0;
      }
    }

    .hero p.lede {
      color: var(--muted);
      max-width: 47ch;
      margin: 0 0 34px;
    }

    .hero p.lede strong {
      color: var(--ink);
      font-weight: 600;
    }

    .cta-row {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
    }

    /* ---------- instrument ---------- */
    .instrument {
      padding: 20px 20px 16px;
      background:
        linear-gradient(180deg, rgba(47, 61, 32, 0.4), rgba(13, 12, 6, 0.62)),
        rgba(21, 20, 11, 0.58);
      backdrop-filter: blur(16px) saturate(1.1);
      -webkit-backdrop-filter: blur(16px) saturate(1.1);
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    }

    .inst-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      gap: 12px;
    }

    .inst-title {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.12em;
      color: var(--muted);
    }

    .state-chip {
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.1em;
      padding: 4px 12px;
      border-radius: 999px;
      background: rgba(163, 184, 126, 0.14);
      color: var(--ok);
      transition: background 0.25s, color 0.25s;
    }

    .state-chip.degraded {
      background: rgba(207, 169, 96, 0.14);
      color: var(--warn);
    }

    .state-chip.jammed {
      background: rgba(201, 113, 61, 0.14);
      color: var(--jam);
    }

    .state-chip.spoofed {
      background: rgba(210, 78, 51, 0.16);
      color: var(--bad);
    }

    #trust-canvas {
      width: 100%;
      height: 190px;
      display: block;
    }

    .readouts {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--line);
      margin-top: 10px;
      padding-top: 12px;
      font-family: var(--mono);
    }

    .readouts .k {
      font-size: 10px;
      letter-spacing: 0.12em;
      color: var(--muted);
    }

    .readouts .v {
      font-size: 15px;
      margin-top: 2px;
    }

    .inst-caption {
      font-size: 13px;
      color: var(--muted);
      margin: 16px 4px 0;
    }

    .inst-caption em {
      color: var(--ink);
      font-style: normal;
    }

    /* ---------- ops console / monitor wall ---------- */
    .ops {
      position: relative;
      padding: 96px 0 108px;
      overflow: hidden;
      background: var(--bg-2);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .ops-floor {
      position: absolute;
      inset: 0;
      z-index: 0;
      background-image:
        linear-gradient(rgba(236, 233, 221, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(236, 233, 221, 0.05) 1px, transparent 1px);
      background-size: 46px 46px;
      mask-image: radial-gradient(1100px 520px at 50% 28%, #000 0%, transparent 78%);
      -webkit-mask-image: radial-gradient(1100px 520px at 50% 28%, #000 0%, transparent 78%);
    }

    .ops .wrap {
      position: relative;
      z-index: 1;
    }

    .ops .intro {
      color: var(--muted);
      max-width: 60ch;
      margin: 0 0 48px;
    }

    .ops .intro strong {
      color: var(--ink);
    }

    .monitor-wall {
      display: grid;
      grid-template-columns: 1.7fr 1fr;
      gap: 22px;
    }

    .monitor {
      position: relative;
    }

    .monitor-main {
      grid-row: span 2;
    }

    .monitor-wide {
      grid-column: 1 / -1;
    }

    .monitor-bezel {
      border-radius: 12px;
      border: 1px solid var(--line-strong);
      background: linear-gradient(180deg, #201f13, #131209);
      padding: 14px;
      height: 100%;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .monitor-bezel .instrument {
      border-radius: 10px;
      padding: 16px 16px 12px;
      height: 100%;
    }

    .monitor-led {
      position: absolute;
      right: 22px;
      bottom: -9px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--ok);
      box-shadow: 0 0 6px 1px rgba(163, 184, 126, 0.7);
    }

    .mini-panel {
      border-radius: 10px;
      background: #100f08;
      border: 1px solid var(--line);
      padding: 18px 18px 16px;
      height: 100%;
      min-height: 168px;
    }

    .mini-title {
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: 0.14em;
      color: var(--muted);
      margin-bottom: 14px;
    }

    .fleet-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 11px;
      font-family: var(--mono);
      font-size: 12.5px;
      color: var(--ink);
    }

    .fleet-list li {
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .bar-chart {
      display: flex;
      align-items: flex-end;
      gap: 8px;
      height: 108px;
    }

    .bar-chart span {
      flex: 1;
      border-radius: 3px 3px 0 0;
      background: linear-gradient(180deg, var(--moss-bright), rgba(163, 184, 126, 0.25));
    }

    .log-feed {
      font-family: var(--mono);
      font-size: 12px;
      line-height: 1.9;
      color: var(--moss-bright);
      height: 94px;
      overflow: hidden;
    }

    .log-feed div {
      opacity: 0.65;
    }

    .log-feed div:last-child {
      opacity: 1;
    }

    /* ---------- verdict cards ---------- */
    .states {
      padding: 8px 0 40px;
    }

    .states .eyebrow {
      display: block;
      text-align: center;
      margin-bottom: 30px;
    }

    .states-inner {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .state-cell {
      padding: 26px 24px;
    }

    .state-cell .chip {
      margin-bottom: 20px;
    }

    .dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      display: block;
    }

    .state-name {
      font-family: var(--mono);
      font-size: 13px;
      letter-spacing: 0.14em;
      font-weight: 500;
    }

    .state-cell p {
      font-size: 13.5px;
      color: var(--muted);
      margin: 8px 0 0;
      line-height: 1.55;
    }

    /* ---------- sections ---------- */
    section.block {
      padding: 96px 0;
    }

    h2 {
      font-family: var(--mono);
      font-weight: 700;
      font-size: clamp(24px, 3vw, 36px);
      line-height: 1.15;
      letter-spacing: -0.01em;
      margin: 16px 0 18px;
      max-width: 24ch;
    }

    .block>.wrap>p.intro {
      color: var(--muted);
      max-width: 60ch;
      margin: 0 0 48px;
    }

    .block p.intro strong {
      color: var(--ink);
    }

    /* fusion diagram */
    .fusion {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 0;
      align-items: stretch;
    }

    .checks {
      display: grid;
      gap: 14px;
    }

    .decision-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 40px;
    }

    .check {
      padding: 22px 24px;
    }

    .check .chip {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      margin-bottom: 16px;
    }

    .check h3 {
      font-family: var(--mono);
      font-size: 16px;
      font-weight: 700;
      margin: 0 0 5px;
      letter-spacing: -0.01em;
    }

    .check p {
      font-size: 13.5px;
      color: var(--muted);
      margin: 0;
      line-height: 1.55;
    }

    .check .tag {
      position: absolute;
      top: 22px;
      right: 22px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.1em;
      color: var(--muted);
      opacity: 0.75;
    }

    .fuse-link {
      display: flex;
      align-items: center;
      padding: 0 10px;
    }

    .fuse-link svg {
      display: block;
    }

    .fuse-path {
      stroke-dasharray: 100;
      stroke-dashoffset: 100;
      transition: stroke-dashoffset 1s ease;
    }

    .fusion.in-view .fuse-path:nth-of-type(1) {
      stroke-dashoffset: 0;
      transition-delay: 0s;
    }

    .fusion.in-view .fuse-path:nth-of-type(2) {
      stroke-dashoffset: 0;
      transition-delay: 0.12s;
    }

    .fusion.in-view .fuse-path:nth-of-type(3) {
      stroke-dashoffset: 0;
      transition-delay: 0.24s;
    }

    .fusion.in-view .fuse-path:nth-of-type(4) {
      stroke-dashoffset: 0;
      transition-delay: 0.36s;
    }

    .fuse-particle {
      opacity: 0;
    }

    .fusion.in-view .fuse-particle {
      animation: fuseFlow 2.6s linear infinite;
    }

    @keyframes fuseFlow {
      0% {
        offset-distance: 0%;
        opacity: 0;
      }

      8% {
        opacity: 1;
      }

      90% {
        opacity: 1;
      }

      100% {
        offset-distance: 100%;
        opacity: 0;
      }
    }

    .fusion.in-view .fuse-dest {
      animation: fuseDestPulse 2.6s ease-in-out infinite;
    }

    @keyframes fuseDestPulse {

      0%,
      100% {
        r: 3.5;
        opacity: 0.9;
      }

      50% {
        r: 5.5;
        opacity: 1;
      }
    }

    .score-card {
      align-self: center;
      padding: 36px 32px;
      text-align: center;
    }

    .score-card .big {
      font-family: var(--mono);
      font-size: 48px;
      line-height: 1;
      color: var(--moss-bright);
    }

    .fusion.in-view .score-card .big {
      animation: scorePulse 2.6s ease-in-out infinite;
    }

    @keyframes scorePulse {

      0%,
      100% {
        text-shadow: 0 0 0 rgba(163, 184, 126, 0);
      }

      50% {
        text-shadow: 0 0 20px rgba(163, 184, 126, 0.7);
      }
    }

    .score-card .k {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.16em;
      color: var(--muted);
      margin-top: 12px;
    }

    .score-card p {
      font-size: 13.5px;
      color: var(--muted);
      margin: 16px 0 0;
      line-height: 1.55;
    }

    .score-card p em {
      color: var(--ink);
      font-style: normal;
    }

    /* results / stat row */
    .stat-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 40px;
    }

    .stat {
      padding: 32px 28px;
      text-align: center;
    }

    .stat-big {
      font-family: var(--mono);
      font-weight: 700;
      font-size: 40px;
      line-height: 1;
      color: var(--moss-bright);
    }

    .stat-unit {
      font-size: 20px;
      margin-left: 2px;
      color: var(--muted);
    }

    .stat-label {
      margin-top: 14px;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.5;
    }

    /* integrate */
    .integrate-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 52px;
      align-items: start;
    }

    pre {
      background: var(--bg-2);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 24px 26px;
      overflow-x: auto;
      margin: 0;
      font-family: var(--mono);
      font-size: 13.5px;
      line-height: 1.75;
      color: #d6d2c0;
    }

    pre .c {
      color: #6f6a55;
    }

    pre .g {
      color: var(--ok);
    }

    pre .y {
      color: var(--warn);
    }

    .integrate-copy p {
      color: var(--muted);
      margin: 0 0 18px;
      max-width: 46ch;
    }

    .integrate-copy p strong {
      color: var(--ink);
    }

    .plist {
      list-style: none;
      padding: 0;
      margin: 24px 0 0;
      display: grid;
      gap: 12px;
    }

    .plist li {
      font-size: 14px;
      color: var(--muted);
      padding-left: 24px;
      position: relative;
    }

    .plist li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 7px;
      width: 10px;
      height: 10px;
      border-radius: 3px;
      background: rgba(163, 184, 126, 0.16);
      border: 1px solid var(--moss-bright);
    }

    .plist li strong {
      color: var(--ink);
      font-weight: 600;
    }

    /* final cta */
    .final {
      border-top: 1px solid var(--line);
      padding: 116px 0;
      text-align: center;
      background: radial-gradient(720px 380px at 50% 0%, rgba(117, 137, 86, 0.09), transparent 70%);
    }

    .final h2 {
      margin: 16px auto 16px;
      max-width: 22ch;
      font-size: clamp(28px, 3.6vw, 46px);
    }

    .final p {
      color: var(--muted);
      max-width: 52ch;
      margin: 0 auto 36px;
    }

    /* ---------- subpage hero (demo, etc.) ---------- */
    .subpage-hero {
      padding: 156px 0 64px;
      border-bottom: 1px solid var(--line);
      background: radial-gradient(720px 380px at 50% 0%, rgba(117, 137, 86, 0.09), transparent 70%);
    }

    .subpage-hero .eyebrow {
      margin-bottom: 14px;
    }

    .subpage-hero h1 {
      font-size: clamp(26px, 3.6vw, 40px);
      max-width: 18ch;
    }

    .subpage-hero p {
      color: var(--muted);
      max-width: 52ch;
      margin: 0;
    }

    .demo-section {
      padding: 64px 0 120px;
    }

    .demo-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: start;
    }

    .demo-aside h2 {
      font-size: clamp(24px, 2.6vw, 30px);
      max-width: none;
    }

    .demo-aside p {
      color: var(--muted);
      max-width: 42ch;
      margin: 0 0 18px;
    }

    .demo-form {
      display: grid;
      gap: 20px;
    }

    .form-field {
      display: grid;
      gap: 8px;
    }

    .form-field label {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .form-field input,
    .form-field textarea {
      width: 100%;
      background: rgba(236, 233, 221, 0.03);
      border: 1px solid var(--line-strong);
      border-radius: 8px;
      padding: 14px 18px;
      color: var(--ink);
      font: 400 15px var(--sans);
    }

    .form-field textarea {
      min-height: 140px;
      border-radius: 10px;
      resize: vertical;
    }

    .form-field input::placeholder,
    .form-field textarea::placeholder {
      color: var(--muted);
    }

    .form-field input:focus,
    .form-field textarea:focus {
      outline: none;
      border-color: rgba(163, 184, 126, 0.55);
      background: rgba(163, 184, 126, 0.05);
    }

    .demo-form .btn {
      justify-self: start;
    }

    .demo-msg {
      font-family: var(--mono);
      font-size: 13px;
      min-height: 1.2em;
      color: var(--muted);
    }

    .demo-msg.error {
      color: var(--bad);
    }

    .demo-msg.ok {
      color: var(--moss-bright);
    }

    /* ---------- footer ---------- */
    footer {
      border-top: 1px solid var(--line);
      background:
        radial-gradient(640px 300px at 50% 0%, rgba(117, 137, 86, 0.07), transparent 70%),
        var(--bg-2);
      padding: 100px 24px 48px;
      text-align: center;
    }

    .f-logo {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      background: #1c1b10;
      border: 1px solid var(--line);
      display: grid;
      place-items: center;
      margin: 0 auto 46px;
    }

    .f-logo svg {
      color: var(--ink);
    }

    .f-nav {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: clamp(22px, 4vw, 42px);
      margin-bottom: 46px;
    }

    .f-nav a {
      color: var(--ink);
      font-size: 16px;
      text-decoration: none;
      opacity: 0.92;
      transition: color 0.2s;
    }

    .f-nav a:hover {
      color: var(--moss-bright);
    }

    .f-sub {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .f-sub input {
      width: min(380px, 100%);
      background: transparent;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      padding: 15px 24px;
      color: var(--ink);
      font: 400 15px var(--sans);
    }

    .f-sub input::placeholder {
      color: var(--muted);
    }

    .f-sub button {
      border: 0;
      border-radius: 999px;
      padding: 16px 32px;
      background: var(--ink);
      color: #12110a;
      font: 700 13px var(--mono);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      cursor: pointer;
      transition: background 0.2s, transform 0.2s;
    }

    .f-sub button:hover {
      background: #ffffff;
      transform: translateY(-1px);
    }

    .f-sub button:disabled {
      background: var(--moss-bright);
      cursor: default;
      transform: none;
    }

    .f-sub-msg {
      width: 100%;
      margin-top: 14px;
      font-family: var(--mono);
      font-size: 13px;
      color: var(--muted);
      min-height: 1em;
    }

    .f-sub-msg.error {
      color: var(--bad);
    }

    .f-sub-msg.ok {
      color: var(--moss-bright);
    }

    .f-note {
      margin-top: 60px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--moss);
    }

    .f-copy {
      margin-top: 14px;
      color: var(--muted);
      font-size: 14px;
    }

    /* ---------- demo nudge (inactivity prompt) ---------- */
    .demo-nudge {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 60;
      max-width: 300px;
      padding: 22px 22px 20px;
      border-radius: 12px;
      border: 1px solid var(--line-strong);
      background:
        linear-gradient(180deg, rgba(47, 61, 32, 0.4), rgba(13, 12, 6, 0.9)),
        #17160d;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
      opacity: 0;
      transform: translateY(16px) scale(0.98);
      pointer-events: none;
      transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .demo-nudge.show {
      opacity: 1;
      transform: none;
      pointer-events: auto;
    }

    .demo-nudge-close {
      position: absolute;
      top: 10px;
      right: 12px;
      border: 0;
      background: none;
      color: var(--muted);
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      padding: 4px;
    }

    .demo-nudge-close:hover {
      color: var(--ink);
    }

    .demo-nudge-text {
      margin: 0 0 16px;
      padding-right: 16px;
      color: var(--ink);
      font-size: 14.5px;
      line-height: 1.5;
    }

    .demo-nudge .btn {
      width: 100%;
      text-align: center;
      padding: 12px 20px;
      font-size: 13.5px;
    }

    @media (max-width: 560px) {
      .demo-nudge {
        left: 16px;
        right: 16px;
        bottom: 16px;
        max-width: none;
      }
    }

    /* ---------- signal-loss glitch, fires once as the console arrives ---------- */
    .glitch-overlay {
      position: fixed;
      inset: 0;
      z-index: 200;
      pointer-events: none;
      opacity: 0;
      background: var(--bg);
      overflow: hidden;
    }

    .glitch-overlay.run {
      animation: glitchBg 0.9s steps(1, end) 1;
    }

    @keyframes glitchBg {

      0%,
      100% {
        opacity: 0;
      }

      6% {
        opacity: 0.88;
      }

      16% {
        opacity: 0;
      }

      40% {
        opacity: 0.7;
      }

      52% {
        opacity: 0;
      }
    }

    .glitch-slice {
      position: absolute;
      left: -5%;
      right: -5%;
      height: 10%;
      background: var(--bg-2);
      mix-blend-mode: difference;
      opacity: 0;
    }

    .glitch-slice-1 {
      top: 22%;
    }

    .glitch-slice-2 {
      top: 58%;
    }

    .glitch-slice-3 {
      top: 78%;
    }

    .glitch-overlay.run .glitch-slice-1 {
      animation: glitchSlice 0.9s steps(3, end) 1;
      animation-delay: 0.02s;
    }

    .glitch-overlay.run .glitch-slice-2 {
      animation: glitchSlice 0.9s steps(4, end) 1;
      animation-delay: 0.1s;
    }

    .glitch-overlay.run .glitch-slice-3 {
      animation: glitchSlice 0.9s steps(3, end) 1;
      animation-delay: 0.18s;
    }

    @keyframes glitchSlice {

      0%,
      100% {
        transform: translateX(0);
        opacity: 0;
      }

      20% {
        transform: translateX(-4%);
        opacity: 0.55;
      }

      45% {
        transform: translateX(3%);
        opacity: 0;
      }

      60% {
        transform: translateX(-2%);
        opacity: 0.4;
      }
    }

    .glitch-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--mono);
      font-weight: 700;
      font-size: clamp(18px, 3.4vw, 32px);
      letter-spacing: 0.24em;
      color: var(--bad);
      opacity: 0;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .glitch-overlay.run .glitch-text {
      animation: glitchTextFlash 0.9s steps(1, end) 1;
    }

    @keyframes glitchTextFlash {

      0%,
      100% {
        opacity: 0;
      }

      8% {
        opacity: 1;
      }

      16% {
        opacity: 0;
      }

      42% {
        opacity: 0.9;
      }

      50% {
        opacity: 0;
      }
    }

    /* reveal on scroll */
    [data-reveal] {
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }

    [data-reveal].in {
      opacity: 1;
      transform: none;
    }

    :focus-visible {
      outline: 2px solid var(--moss-bright);
      outline-offset: 2px;
      border-radius: 6px;
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
      }

      .glow,
      .glow:hover,
      .btn,
      .btn:hover {
        transition: none;
        transform: none;
      }

      .hero-bg img {
        animation: none;
      }

      .hero-sub::before {
        animation: none;
      }

      .type-cursor {
        animation: none;
      }

      .fusion .fuse-path,
      .fusion.in-view .fuse-path {
        stroke-dashoffset: 0;
        transition: none;
      }

      .fuse-particle,
      .fusion.in-view .fuse-particle {
        animation: none;
        opacity: 0;
      }

      .fuse-dest,
      .fusion.in-view .fuse-dest,
      .score-card .big,
      .fusion.in-view .score-card .big {
        animation: none;
      }
    }

    @media (max-width: 900px) {
      .hero {
        padding: 64px 0 56px;
        min-height: min(560px, 92vh);
      }

      .hero-scrim {
        background: rgba(10, 9, 5, 0.4);
      }

      .hero-target-field {
        display: none;
      }

      .monitor-wall {
        grid-template-columns: 1fr;
      }

      .monitor-main {
        grid-row: auto;
      }

      .states-inner {
        grid-template-columns: 1fr 1fr;
      }

      .stat-row,
      .decision-grid {
        grid-template-columns: 1fr;
      }

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

      .fuse-link {
        display: none;
      }

      .score-card {
        margin-top: 18px;
      }

      .integrate-grid {
        grid-template-columns: 1fr;
        gap: 30px;
      }

      .nav-links a:not(.btn) {
        display: none;
      }

      .demo-layout {
        grid-template-columns: 1fr;
        gap: 36px;
      }
    }

    @media (max-width: 560px) {
      .states-inner {
        grid-template-columns: 1fr;
      }
    }