:root {
      /* ── BRAND ───────────────────────────────────────────────────────────
         Hellstorm Systems — "Ember & Graphite". Swapping the six values below
         re-themes the entire site; nothing else hardcodes a brand colour.     */
      --brand-a: #FF6B2C;          /* ember — primary: CTAs, mark, accents    */
      --brand-a-rgb: 255,107,44;
      --brand-b: #FFC24A;          /* gold  — gradient partner, highlights    */
      --brand-b-rgb: 255,194,74;
      --volt: #3FD8FF;             /* storm — LIVE/STATUS ONLY, never decor   */
      --volt-rgb: 63,216,255;
      --grad: linear-gradient(135deg, var(--brand-a), var(--brand-b));

      /* ── GROUND ─────────────────────────────────────────────────────────── */
      --bg: #070A0F;
      --bg-2: #0C1118;
      --bg-3: #121926;
      --on-brand: #0B0E14;         /* ink on ember fills — 6.8:1, white fails */

      /* ── INK ────────────────────────────────────────────────────────────── */
      --text: #F2F5F9;             /* 18.1:1 on --bg */
      --muted: #A8B6C8;            /*  9.6:1 on --bg */
      --quiet: #6B7C93;
      --text-dim: #CBD5E1;

      /* ── SURFACES & BORDERS ─────────────────────────────────────────────── */
      --surface-1: rgba(255,255,255,.045);
      --surface-2: rgba(255,255,255,.065);
      --surface-3: rgba(255,255,255,.095);
      --panel: var(--surface-2);
      --panel-2: rgba(255,255,255,.092);
      --border-1: rgba(255,255,255,.075);
      --border-2: rgba(255,255,255,.115);
      --border-3: rgba(255,255,255,.155);
      --line-rgb: 168,182,200;
      --line: rgba(var(--line-rgb), .16);
      --line-2: rgba(var(--line-rgb), .26);

      /* ── SEMANTIC ───────────────────────────────────────────────────────── */
      --amber: #FFC24A;
      --red: #FF5F6D;
      --green: #3FD98A;

      /* ── LAYOUT & TYPE ──────────────────────────────────────────────────── */
      --max: 1180px;
      --nav-h: 74px;
      --radius: 24px;
      --shadow: 0 32px 100px rgba(0,0,0,.55);
      --font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      --display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
      --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: var(--font);
      color: var(--text);
      background:
        radial-gradient(circle at 76% -10%, rgba(var(--brand-a-rgb),.16), transparent 34rem),
        radial-gradient(circle at 6% 22%, rgba(var(--line-rgb),.07), transparent 30rem),
        radial-gradient(circle at 54% 58%, rgba(var(--brand-b-rgb),.035), transparent 38rem),
        linear-gradient(180deg, var(--bg) 0%, #0A0F17 44%, var(--bg) 100%);
      /* The background shorthand above resets background-color to transparent,
         which leaves the page effectively white for anything that cannot
         resolve gradients (contrast tooling, forced-colors, a failed paint).
         Declare the solid ground explicitly. */
      background-color: var(--bg);
      overflow-x: hidden;
    }
    html { background-color: var(--bg); }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(150,168,192,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(150,168,192,.05) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.1));
      z-index: -3;
    }
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, transparent 0 68%, rgba(0,0,0,.28) 100%);
      background-size: 100% 100%, 100% 100%;
      opacity: .55;
      z-index: -2;
    }

    a { color: inherit; text-decoration: none; }
    .wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
    .nav {
      position: sticky; top: 0; z-index: 100;
      background: rgba(4, 9, 18, .78);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(255,255,255,.075);
    }
    .nav-inner {
      height: 74px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .brand {
      display: flex; align-items: center; gap: 11px;
    }
    .mark {
      width: 38px; height: 38px; flex: 0 0 auto;
      filter: drop-shadow(0 6px 18px rgba(var(--brand-a-rgb), .34));
    }
    .wordmark { display: flex; flex-direction: column; line-height: 1; gap: 3px; }
    .wordmark-name {
      font-family: var(--display);
      font-weight: 700;
      font-size: 19px;
      letter-spacing: -.005em;
      color: var(--text);
    }
    .wordmark-sub {
      font-family: var(--mono);
      font-weight: 600;
      font-size: 9.5px;
      letter-spacing: .285em;
      color: var(--quiet);
    }
    .cta {
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      min-height: 45px; padding: 0 19px; border-radius: 999px;
      font-weight: 850; letter-spacing: -.01em;
      background: linear-gradient(135deg, var(--brand-a), var(--brand-b));
      color: var(--on-brand);
      box-shadow: 0 20px 50px rgba(var(--brand-b-rgb),.22);
      border: 1px solid rgba(255,255,255,.16);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .cta:hover { transform: translateY(-1px); box-shadow: 0 26px 70px rgba(var(--brand-b-rgb),.30); }
    .cta.secondary {
      background: rgba(255,255,255,.055);
      color: var(--text);
      box-shadow: none;
      border: 1px solid rgba(255,255,255,.13);
    }
    .cta.secondary:hover { border-color: rgba(var(--brand-a-rgb),.42); }

    .hero {
      min-height: calc(100vh - 74px);
      display: grid;
      align-items: center;
      padding: 78px 0 66px;
      position: relative;
    }
    .hero::before {
      content:"";
      position:absolute;
      inset: 0 0 auto 0;
      height: 520px;
      background:
        linear-gradient(180deg, rgba(var(--brand-b-rgb),.09), transparent 70%),
        radial-gradient(circle at 52% 10%, rgba(var(--brand-a-rgb),.08), transparent 38rem);
      pointer-events:none;
    }
    .hero-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1.06fr) minmax(380px, .94fr);
      gap: 50px;
      align-items: center;
    }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(var(--brand-a-rgb),.075);
      border: 1px solid rgba(var(--brand-a-rgb),.22);
      color: var(--brand-a);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .17em;
      text-transform: uppercase;
    }
    .pulse {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--brand-a);
      box-shadow: 0 0 0 8px rgba(var(--brand-a-rgb),.11);
    }
    h1 {
      margin: 22px 0 24px;
      max-width: 850px;
      font-size: clamp(46px, 7.2vw, 92px);
      line-height: .9;
      letter-spacing: -.075em;
    }
    .grad {
      background: linear-gradient(95deg, #fff, #E4E9F0 48%, var(--brand-a));
      color: transparent;
      -webkit-background-clip: text;
      background-clip: text;
    }
    .lead {
      max-width: 790px;
      margin: 0;
      color: var(--text-dim);
      font-size: clamp(18px, 2.1vw, 23px);
      line-height: 1.48;
    }
    .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
    .signal-strip {
      display: flex; gap: 10px; flex-wrap: wrap;
      margin-top: 28px;
      color: var(--text-dim);
    }
    .signal-strip span {
      display: inline-flex; align-items:center; gap: 8px;
      padding: 9px 12px;
      background: rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.105);
      border-radius: 999px;
      font-size: 13px;
    }
    .signal-strip i {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--brand-a);
      box-shadow: 0 0 22px rgba(var(--brand-a-rgb),.75);
    }
    .hero-proof {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-top: 36px;
    }
    .proof-card {
      min-height: 98px;
      padding: 16px;
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
      border: 1px solid rgba(255,255,255,.10);
    }
    .proof-card b { display: block; font-size: 23px; letter-spacing: -.04em; }
    .proof-card span { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.35; }

    .ops-card {
      position: relative;
      padding: 16px;
      border-radius: 30px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.042)),
        radial-gradient(circle at 30% 0%, rgba(var(--brand-a-rgb),.12), transparent 20rem);
      border: 1px solid rgba(255,255,255,.13);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .ops-card::before {
      content:"";
      position:absolute; inset:-1px;
      background: linear-gradient(135deg, rgba(var(--brand-a-rgb),.22), transparent 24%, transparent 64%, rgba(var(--brand-b-rgb),.18));
      pointer-events:none;
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      padding: 1px;
      -webkit-mask-composite: xor;
      mask-composite: exclude;
    }
    .screen {
      position: relative;
      border-radius: 22px;
      overflow: hidden;
      background: var(--bg-2);
      border: 1px solid rgba(var(--line-rgb),.18);
    }
    .screen-top {
      height: 43px;
      display:flex; align-items:center; justify-content:space-between;
      padding: 0 14px;
      border-bottom: 1px solid rgba(var(--line-rgb),.12);
      background: rgba(5, 12, 24, .92);
      color: var(--muted);
      font-size: 12px;
      font-family: var(--mono);
    }

    section { padding: 82px 0; }
    .section-head { max-width: 860px; margin-bottom: 32px; }
    .kicker {
      color: var(--brand-b);
      font-size: 12px;
      font-weight: 950;
      letter-spacing: .17em;
      text-transform: uppercase;
      margin-bottom: 13px;
    }
    h2 {
      margin: 0 0 16px;
      font-size: clamp(34px, 4.8vw, 60px);
      line-height: 1;
      letter-spacing: -.055em;
    }
    .section-head p, .split-copy p, .band p {
      color: var(--muted);
      font-size: 18px;
      line-height: 1.58;
      margin: 0;
    }
    .icon {
      width: 44px; height:44px; border-radius: 15px;
      display:grid; place-items:center;
      background: rgba(var(--brand-b-rgb),.105);
      border: 1px solid rgba(var(--brand-b-rgb),.22);
      color: var(--brand-a);
      font-weight: 900;
      margin-bottom: 16px;
    }

    .split {
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 36px;
      align-items:center;
    }
    .architecture {
      display: grid;
      gap: 12px;
    }
    .layer {
      padding: 18px 18px 18px 20px;
      border-radius: 20px;
      background: rgba(255,255,255,.058);
      border: 1px solid rgba(255,255,255,.10);
      display:grid;
      grid-template-columns: auto 1fr;
      gap: 14px;
      align-items: start;
    }
    .layer-num {
      width: 36px; height:36px;
      border-radius: 12px;
      display:grid; place-items:center;
      background: rgba(var(--brand-a-rgb),.11);
      border: 1px solid rgba(var(--brand-a-rgb),.23);
      color: var(--brand-a);
      font-weight: 950;
    }
    .layer b { display:block; margin-bottom: 4px; font-size: 17px; }
    .layer span { color: var(--muted); line-height: 1.45; font-size: 14px; }
    .visual-frame {
      padding: 12px;
      border-radius: 28px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.13);
      box-shadow: var(--shadow);
    }
    .visual-frame img {
      display:block;
      width:100%;
      height:auto;
      border-radius: 20px;
    }
    .caption {
      margin: 12px 4px 2px;
      color: var(--quiet);
      font-size: 12px;
      line-height: 1.45;
    }

    .band {
      padding: 34px;
      border-radius: 34px;
      background:
        radial-gradient(circle at 85% 0%, rgba(var(--brand-a-rgb),.14), transparent 24rem),
        linear-gradient(180deg, rgba(255,255,255,.077), rgba(255,255,255,.034));
      border: 1px solid rgba(255,255,255,.125);
      box-shadow: var(--shadow);
    }

    .usecases {
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 16px;
    }
    .usecase {
      padding: 26px;
      border-radius: 26px;
      background: rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.10);
    }
    .usecase h3 { margin:0 0 16px; font-size: 24px; letter-spacing:-.035em; }
    .usecase ul {
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap: 10px;
      color: var(--muted);
    }
    .usecase li { display:flex; gap: 10px; line-height:1.42; }
    .usecase li::before { content:""; width:7px; height:7px; border-radius:50%; background: var(--brand-a); margin-top: 8px; flex: 0 0 auto; }

    .cta-panel {
      text-align:center;
      padding: 54px 34px;
      border-radius: 36px;
      background:
        linear-gradient(135deg, rgba(var(--brand-a-rgb),.13), rgba(var(--brand-b-rgb),.13)),
        rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: var(--shadow);
    }
    .cta-panel h2 { max-width: 900px; margin: 0 auto 16px; }
    .cta-panel p { max-width: 770px; margin: 0 auto 28px; color: var(--muted); font-size: 18px; line-height: 1.58; }

    footer {
      border-top: 1px solid rgba(255,255,255,.08);
      padding: 34px 0;
      color: var(--quiet);
      font-size: 13px;
    }
    .footer-inner {
      display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
    }
    .fineprint {
      color: rgba(170,184,202,.7);
      max-width: 720px;
      line-height:1.45;
    }

    .reveal {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .65s ease, transform .65s ease;
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width: 1080px) {
      .hero-grid, .split, .demo-grid { grid-template-columns: 1fr; }
      .hero { min-height: auto; }
    }
    @media (max-width: 820px) {
      /* .nav-links display is handled by the mobile menu rules below */
      .hero-proof, .capability-grid, .trust-grid, .usecases { grid-template-columns: 1fr; }
    }
    @media (max-width: 620px) {
      .wrap { padding: 0 16px; }
      .nav-inner { height: 66px; }
      .wordmark-sub { display:none; }
      .hero { padding: 56px 0 40px; }
      h1 { font-size: clamp(42px, 14vw, 66px); }
      section { padding: 58px 0; }
      .manifesto, .band, .cta-panel { padding: 28px 18px; border-radius: 26px; }
      .ops-card { padding: 10px; }
    }
  
    /* Updated hero screenshot */
    .hero-shot {
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    }
    .hero-shot img {
      display: block;
      width: 100%;
      height: auto;
      background: var(--bg-2);
    }



    /* PDF-aligned original vision */
    .hero h1 {
      max-width: 960px;
      font-size: clamp(48px, 7.1vw, 94px);
    }

    .hero-grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 42px;
    }

    .hero-copy {
      max-width: 1040px;
    }

    .hero .ops-card {
      width: 100%;
    }

    .vision-note {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-top: 20px;
      color: var(--muted);
      font-size: 13px;
      font-family: var(--mono);
    }

    .vision-note::before {
      content: "";
      width: 30px;
      height: 1px;
      background: linear-gradient(90deg, var(--brand-a), transparent);
    }

    .problem-grid,
    .solution-grid,
    .node-grid,
    .market-grid,
    .business-grid,
    .requirement-grid,
    .security-grid {
      display: grid;
      gap: 14px;
    }

    .problem-grid,
    .solution-grid,
    .requirement-grid,
    .security-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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

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

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

    .number-card,
    .pillar-card,
    .node-card,
    .market-card,
    .business-card,
    .requirement-card,
    .security-card {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.105);
      background:
        linear-gradient(180deg, rgba(255,255,255,.082), rgba(255,255,255,.035));
      box-shadow: 0 20px 70px rgba(0,0,0,.18);
    }

    .number-card,
    .pillar-card,
    .node-card,
    .market-card,
    .requirement-card,
    .security-card {
      min-height: 210px;
      padding: 23px;
      border-radius: 24px;
    }

    .business-card {
      min-height: 220px;
      padding: 21px;
      border-radius: 22px;
    }

    .number-card::before,
    .pillar-card::before,
    .node-card::before,
    .market-card::before,
    .business-card::before,
    .requirement-card::before,
    .security-card::before {
      content: "";
      position: absolute;
      inset: 0 auto auto 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, var(--brand-a), rgba(var(--brand-b-rgb),.45), transparent);
      opacity: .55;
    }

    .card-index {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      margin-bottom: 35px;
      background: #131A25;
      border: 1px solid rgba(var(--brand-a-rgb),.28);
      color: var(--brand-a);
      font: 900 13px var(--mono);
    }

    .number-card h3,
    .pillar-card h3,
    .node-card h3,
    .market-card h3,
    .business-card h3,
    .requirement-card h3,
    .security-card h3 {
      margin: 0 0 10px;
      letter-spacing: -.03em;
    }

    .number-card h3,
    .pillar-card h3,
    .node-card h3,
    .market-card h3,
    .requirement-card h3,
    .security-card h3 {
      font-size: 19px;
    }

    .business-card h3 {
      font-size: 17px;
    }

    .number-card p,
    .pillar-card p,
    .node-card p,
    .market-card p,
    .business-card p,
    .requirement-card p,
    .security-card p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.55;
    }

    .pillar-label,
    .node-label,
    .market-label {
      display: inline-flex;
      padding: 6px 9px;
      margin-bottom: 19px;
      border-radius: 999px;
      color: var(--brand-b);
      background: rgba(var(--brand-b-rgb),.095);
      border: 1px solid rgba(var(--brand-b-rgb),.19);
      font: 900 10px var(--mono);
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .insight-panel {
      padding: 50px;
      border-radius: 34px;
      background:
        radial-gradient(circle at 88% 4%, rgba(var(--brand-a-rgb),.12), transparent 24rem),
        linear-gradient(140deg, #141B26, #0A0F17 62%);
      border: 1px solid rgba(255,255,255,.13);
      box-shadow: var(--shadow);
    }

    .insight-panel h2 {
      max-width: 1050px;
      margin-bottom: 22px;
      font-size: clamp(38px, 5.3vw, 72px);
    }

    .insight-panel p {
      max-width: 970px;
      margin: 0;
      color: var(--text-dim);
      font-size: 19px;
      line-height: 1.55;
    }

    .unsolved {
      margin-top: 28px;
      padding: 22px 24px;
      border: 1px solid rgba(var(--line-rgb),.44);
      border-radius: 18px;
      color: var(--text);
      font-size: clamp(20px, 2.2vw, 30px);
      font-weight: 850;
      letter-spacing: -.025em;
    }

    .unsolved strong {
      color: var(--brand-a);
    }

    .command-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 20px;
    }

    .command-card {
      min-height: 280px;
      padding: 30px;
      border-radius: 28px;
      background:
        radial-gradient(circle at 90% 0%, rgba(var(--brand-b-rgb),.12), transparent 18rem),
        rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.11);
    }

    .command-card .icon {
      margin-bottom: 24px;
    }

    .command-card h3 {
      margin: 0 0 13px;
      font-size: 27px;
      letter-spacing: -.04em;
    }

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

    .edge-flow {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 20px;
    }

    .edge-step {
      position: relative;
      min-height: 178px;
      padding: 24px;
      border-radius: 22px;
      background: rgba(3,12,25,.68);
      border: 1px solid rgba(255,255,255,.11);
    }

    .edge-step:not(:last-child)::after {
      content: "→";
      position: absolute;
      top: 50%;
      right: -19px;
      z-index: 2;
      transform: translateY(-50%);
      color: var(--brand-a);
      font-size: 28px;
      font-weight: 900;
    }

    .edge-step small {
      display: block;
      margin-bottom: 21px;
      color: var(--brand-a);
      font: 900 12px var(--mono);
      letter-spacing: .1em;
    }

    .edge-step b {
      display: block;
      margin-bottom: 9px;
      font-size: 23px;
      letter-spacing: -.035em;
    }

    .edge-step span {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.48;
    }

    .figure-wide {
      margin: 28px 0 0;
    }

    .figure-wide img {
      width: 100%;
      display: block;
      border-radius: 22px;
    }

    .capability-loop {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 14px;
      margin-top: 26px;
    }

    .loop-card {
      min-height: 195px;
      padding: 25px;
      border-radius: 24px;
      background: rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.105);
    }

    .loop-card .step-number {
      color: var(--brand-a);
      font: 950 12px var(--mono);
      letter-spacing: .08em;
    }

    .loop-card h3 {
      margin: 28px 0 10px;
      font-size: 23px;
      letter-spacing: -.035em;
    }

    .loop-card p {
      margin: 0;
      color: var(--muted);
      line-height: 1.55;
    }

    .interoperability-band {
      margin-top: 18px;
      padding: 27px;
      border-radius: 26px;
      background:
        linear-gradient(135deg, rgba(var(--brand-a-rgb),.095), rgba(var(--brand-b-rgb),.07)),
        rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.11);
    }

    .interoperability-band strong {
      display: block;
      margin-bottom: 8px;
      font-size: 21px;
      letter-spacing: -.03em;
    }

    .interoperability-band p {
      margin: 0;
      color: var(--muted);
      line-height: 1.55;
    }

    .ask-line {
      margin-top: 18px;
      color: var(--text-dim);
      font-family: var(--mono);
      font-size: 13px;
    }

    @media (max-width: 1080px) {
      .problem-grid,
      .solution-grid,
      .requirement-grid,
      .security-grid,
      .business-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .node-grid,
      .market-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 820px) {
      .command-grid,
      .edge-flow,
      .capability-loop {
        grid-template-columns: 1fr;
      }
      .edge-step:not(:last-child)::after {
        content: "↓";
        top: auto;
        right: 50%;
        bottom: -25px;
        transform: translateX(50%);
      }
      .insight-panel {
        padding: 34px 24px;
      }
    }

    @media (max-width: 620px) {
      
      .problem-grid,
      .solution-grid,
      .node-grid,
      .market-grid,
      .business-grid,
      .requirement-grid,
      .security-grid,
      .roadmap-grid {
        grid-template-columns: 1fr;
      }
      .number-card,
      .pillar-card,
      .node-card,
      .market-card,
      .business-card,
      .requirement-card,
      .security-card {
        min-height: auto;
      }
      .card-index {
        margin-bottom: 24px;
      }
    }


    /* About us */
    .about-panel {
      position: relative;
      overflow: hidden;
      padding: 48px;
      border-radius: 34px;
      background:
        radial-gradient(circle at 94% 6%, rgba(var(--brand-a-rgb),.13), transparent 25rem),
        linear-gradient(145deg, rgba(13,32,59,.96), rgba(7,17,31,.98) 64%);
      border: 1px solid rgba(255,255,255,.13);
      box-shadow: var(--shadow);
    }

    .about-panel::after {
      content: "";
      position: absolute;
      width: 420px;
      height: 420px;
      right: -250px;
      bottom: -280px;
      border-radius: 50%;
      border: 1px solid rgba(var(--brand-b-rgb),.14);
      box-shadow:
        0 0 0 52px rgba(var(--brand-b-rgb),.025),
        0 0 0 104px rgba(var(--brand-a-rgb),.018);
      pointer-events: none;
    }

    .about-intro {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
      gap: 42px;
      align-items: end;
    }

    .about-intro h2 {
      margin-bottom: 0;
    }

    .about-lead {
      margin: 0;
      color: var(--text-dim);
      font-size: clamp(18px, 2vw, 21px);
      line-height: 1.62;
    }

    .about-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 34px;
    }

    .about-card {
      min-height: 220px;
      padding: 24px;
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
      border: 1px solid rgba(255,255,255,.105);
    }

    .about-card span {
      display: block;
      margin-bottom: 28px;
      color: var(--brand-a);
      font: 900 11px var(--mono);
      letter-spacing: .11em;
      text-transform: uppercase;
    }

    .about-card h3 {
      margin: 0 0 11px;
      font-size: 22px;
      letter-spacing: -.035em;
    }

    .about-card p {
      margin: 0;
      color: var(--muted);
      font-size: 14.5px;
      line-height: 1.58;
    }

    .about-statement {
      position: relative;
      z-index: 1;
      margin: 16px 0 0;
      padding: 24px 26px;
      border-radius: 22px;
      background: linear-gradient(135deg, rgba(var(--brand-a-rgb),.09), rgba(var(--brand-b-rgb),.065));
      border: 1px solid rgba(var(--line-rgb),.19);
      color: var(--text);
      font-size: clamp(18px, 2.1vw, 24px);
      line-height: 1.48;
      letter-spacing: -.018em;
    }

    @media (max-width: 820px) {
      .about-intro,
      .about-grid {
        grid-template-columns: 1fr;
      }

      .about-intro {
        gap: 20px;
      }
    }

    @media (max-width: 620px) {
      .about-panel {
        padding: 28px 18px;
        border-radius: 26px;
      }

      .about-card {
        min-height: auto;
      }
    }

    /* ── Typography: display face on headings and the wordmark ───────────── */
    h1, h2, h3, .brand, .band-title { font-family: var(--display); }
    .kicker, .eyebrow, .vision-note, .step-number, .card-index,
    .pillar-label, .node-label, .market-label, .badge, .ask-line,
    .screen-top, .layer-num { font-family: var(--mono); }

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

    /* ═══ Accessibility utilities ═══════════════════════════════════════════ */
    .sr-only {
      position: absolute; width: 1px; height: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
    }
    .skip-link {
      position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
      z-index: 200; padding: 12px 22px; border-radius: 0 0 14px 14px;
      background: var(--brand-a); color: var(--on-brand);
      font-family: var(--mono); font-size: 13px; font-weight: 600;
      transition: transform .16s ease;
    }
    .skip-link:focus { transform: translate(-50%, 0); }

    /* Visible keyboard focus — the site previously had none at all */
    :focus-visible {
      outline: 2px solid var(--brand-a);
      outline-offset: 3px;
      border-radius: 4px;
    }
    .cta:focus-visible, .nav-toggle:focus-visible, .video-play:focus-visible { outline-offset: 4px; }

    /* Anchors must clear the sticky nav */
    html { scroll-padding-top: calc(var(--nav-h) + 18px); }
    section[id], main[id] { scroll-margin-top: calc(var(--nav-h) + 18px); }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

    /* ═══ Navigation ════════════════════════════════════════════════════════ */
    .nav-inner { height: var(--nav-h); }
    .nav-links {
      display: flex; align-items: center; gap: 22px;
      list-style: none; margin: 0; padding: 0;
      color: var(--muted); font-size: 13px;
    }
    .nav-links a { transition: color .18s ease; }
    .nav-links a:hover { color: #fff; }
    .nav-links a[aria-current] { color: var(--text); }
    .nav-links a[aria-current]::after {
      content: ""; display: block; height: 2px; margin-top: 5px;
      border-radius: 2px; background: var(--grad);
    }
    .nav-actions { display: flex; align-items: center; gap: 12px; }
    .nav-toggle {
      display: none; align-items: center; justify-content: center;
      width: 42px; height: 42px; padding: 0;
      border-radius: 12px; cursor: pointer;
      background: var(--surface-2); border: 1px solid var(--border-2);
      color: var(--text);
    }
    .nav-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
    .nav-toggle .i-close { display: none; }
    .nav--open .nav-toggle .i-burger { display: none; }
    .nav--open .nav-toggle .i-close { display: block; }

    @media (max-width: 820px) {
      .nav-toggle { display: inline-flex; }
      .nav-links {
        /* NOT position:fixed — .nav uses backdrop-filter, which makes it the
           containing block for fixed descendants, so the panel would size
           against the 74px bar instead of the viewport. Absolute against the
           sticky .nav gives the same result and keeps the bar's blur. */
        position: absolute; top: 100%; left: 0; right: 0;
        height: calc(100vh - var(--nav-h));
        height: calc(100dvh - var(--nav-h));
        display: block; overflow-y: auto;
        margin: 0; padding: 14px 24px 40px;
        background: var(--bg);
        border-top: 1px solid var(--border-1);
        font-size: 17px;
        opacity: 0; visibility: hidden; transform: translateY(-8px);
      }
      .nav--open .nav-links { opacity: 1; visibility: visible; transform: none; }
      @media (prefers-reduced-motion: no-preference) {
        .nav-links { transition: opacity .18s ease, transform .18s ease, visibility .18s; }
      }
      .nav-links li { border-bottom: 1px solid var(--border-1); }
      .nav-links a { display: block; padding: 15px 2px; color: var(--text); }
      .nav-links a[aria-current]::after { display: none; }
      .nav-links a[aria-current] { color: var(--brand-a); }
      .menu-open, .menu-open body { overflow: hidden; }
    }
    @media (max-width: 620px) {
      :root { --nav-h: 66px; }
      .nav-actions .cta { padding: 0 14px; font-size: 13px; }
    }

    /* ═══ Investor brief ════════════════════════════════════════════════════ */
    .video-block { display: grid; gap: 18px; justify-items: center; }
    .video-switch {
      display: inline-flex; gap: 6px; padding: 5px;
      border-radius: 999px;
      background: var(--surface-1); border: 1px solid var(--border-1);
    }
    .switch-chip {
      padding: 8px 18px; border-radius: 999px; cursor: pointer;
      border: 0; background: transparent; color: var(--muted);
      font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .04em;
      transition: color .18s ease, background .18s ease;
    }
    .switch-chip[aria-pressed="true"] { background: var(--grad); color: var(--on-brand); }
    .video-stage { width: 100%; display: grid; justify-items: center; }
    .video-facade {
      position: relative; width: 100%; overflow: hidden;
      border-radius: 22px;
      background: var(--bg-2);
      border: 1px solid var(--border-2);
      box-shadow: var(--shadow);
    }
    .video-facade[hidden] { display: none; }
    .f-landscape { max-width: 960px; aspect-ratio: 16 / 9; }
    .f-portrait { max-width: 360px; aspect-ratio: 9 / 16; border-radius: 34px; }
    .video-play {
      display: block; width: 100%; height: 100%; padding: 0;
      border: 0; background: transparent; cursor: pointer; position: relative;
    }
    .video-poster { width: 100%; height: 100%; object-fit: cover; display: block; }
    .play-btn {
      position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
      width: 78px; height: 78px; border-radius: 50%;
      display: grid; place-items: center;
      background: var(--grad);
      box-shadow: 0 18px 46px rgba(var(--brand-a-rgb), .42);
      transition: transform .18s ease;
    }
    .play-btn svg { width: 34px; height: 34px; fill: var(--on-brand); margin-left: 3px; }
    .video-play:hover .play-btn { transform: translate(-50%, -50%) scale(1.06); }
    @media (prefers-reduced-motion: reduce) { .play-btn { transition: none; } }
    .video-label {
      position: absolute; left: 16px; bottom: 14px;
      padding: 6px 12px; border-radius: 999px;
      background: rgba(7, 10, 15, .72); backdrop-filter: blur(8px);
      color: var(--text); font-family: var(--mono); font-size: 11px;
      letter-spacing: .12em; text-transform: uppercase;
    }
    .video-frame { width: 100%; height: 100%; border: 0; display: block; }
    .cta-icon { width: 15px; height: 15px; fill: currentColor; }

    /* The hidden attribute must beat component display rules (.cta is inline-flex,
       .video-facade is block) or JS-gated elements leak onto the page. */
    [hidden] { display: none !important; }

    /* Hero headline has to fit small screens: at 390px the clamped 48px minimum
       overflowed its box because "operating" cannot break. */
    @media (max-width: 700px) {
      .hero h1 { font-size: clamp(30px, 8.4vw, 48px); }
    }
    @media (max-width: 380px) {
      .hero h1 { font-size: 29px; }
    }

    /* The briefing CTA lives in the bar on desktop and inside the panel on
       mobile, where the bar has no room for it alongside the hamburger. */
    .nav-menu-cta { display: none; }
    @media (max-width: 820px) {
      .nav-actions .cta { display: none; }
      .nav-menu-cta { display: block; border-bottom: 0; margin-top: 18px; }
      .nav-menu-cta .cta { display: flex; width: 100%; min-height: 52px; color: var(--on-brand); }
    }

    /* Sub-headings inside a band: an h3 so the outline stays H1 > H2 > H3,
       sized like the h2 it replaced so nothing shifts visually. */
    .band-title {
      margin: 0 0 14px;
      font-size: clamp(32px, 4vw, 50px);
      letter-spacing: -.035em;
      line-height: 1.04;
    }
    .band .section-head { margin-bottom: 0; }
    .band .architecture { margin-top: 22px; }
    .hero-actions.center { justify-content: center; }

    /* .icon used to contain the bare letters "AI" and "M", which screen readers
       announced as stray characters. Now decorative inline SVG. */
    .icon svg {
      width: 26px; height: 26px;
      fill: none; stroke: currentColor;
      stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
    }
    .icon svg circle { fill: currentColor; stroke: none; }

    /* ═══ Contact form ══════════════════════════════════════════════════════ */
    .contact-form { max-width: 660px; margin: 30px auto 6px; text-align: left; }
    .hp { position: absolute; left: -9999px; }   /* honeypot */
    .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .field { margin: 0 0 14px; display: grid; gap: 7px; }
    .field label {
      font-family: var(--mono); font-size: 11px; font-weight: 600;
      letter-spacing: .12em; text-transform: uppercase; color: var(--quiet);
    }
    .contact-form input, .contact-form select, .contact-form textarea {
      width: 100%; padding: 12px 14px; border-radius: 12px;
      background: rgba(255,255,255,.05);
      border: 1px solid var(--border-2);
      color: var(--text); font: inherit; font-size: 15px;
    }
    .contact-form textarea { resize: vertical; min-height: 96px; }
    .contact-form input:focus-visible,
    .contact-form select:focus-visible,
    .contact-form textarea:focus-visible { border-color: var(--brand-a); }
    .contact-form button { width: 100%; margin-top: 4px; min-height: 50px; }
    .form-status { margin: 12px 0 0; font-size: 14px; color: var(--muted); min-height: 1.2em; }
    .form-status[data-state="error"] { color: var(--red); }
    .form-status[data-state="ok"] { color: var(--green); }
    @media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

    /* ═══ Investor brief — refinements ══════════════════════════════════════ */
    .section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
    .section-head.center p { margin-left: auto; margin-right: auto; }

    .chip-ratio { opacity: .62; font-size: .92em; margin-left: 2px; }
    .switch-chip { display: inline-flex; align-items: center; gap: 5px; }

    /* Play control: a ring plus a solid core reads as a button at any size and
       stays visible over a bright or busy poster frame. */
    .play-btn {
      width: 84px; height: 84px;
      box-shadow: 0 18px 46px rgba(var(--brand-a-rgb), .45),
                  0 0 0 10px rgba(var(--brand-a-rgb), .13);
    }
    .video-play:hover .play-btn { transform: translate(-50%, -50%) scale(1.07); }
    .video-play:focus-visible { outline: 2px solid var(--brand-a); outline-offset: 4px; }
    .video-facade { transition: border-color .2s ease, box-shadow .2s ease; }
    .video-play:hover ~ *, .video-facade:hover { border-color: rgba(var(--brand-a-rgb), .38); }

    /* A poster is a photograph; darken its base so the label and ring keep
       contrast without depending on what the frame happens to show. */
    .video-play::after {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(180deg, rgba(7,10,15,.18) 0%, transparent 34%,
                                          transparent 62%, rgba(7,10,15,.62) 100%);
    }
    .video-label { z-index: 1; }

    /* Keep the vertical cut from towering on a desktop display. */
    .f-portrait { max-height: min(78vh, 660px); max-width: calc(min(78vh, 660px) * 9 / 16); }

    @media (max-width: 620px) {
      .play-btn { width: 66px; height: 66px; box-shadow: 0 12px 30px rgba(var(--brand-a-rgb), .42); }
      .play-btn svg { width: 28px; height: 28px; }
      .f-portrait { max-height: none; max-width: 100%; border-radius: 26px; }
      .video-switch { width: 100%; justify-content: center; }
    }

    /* Shown once a player is opened, so a blocked embed is never a dead end. */
    .video-bail {
      display: block; margin-top: 14px; text-align: center;
      font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
      color: var(--quiet); text-decoration: underline;
      text-underline-offset: 3px;
    }
    .video-bail:hover { color: var(--brand-a); }