@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

  :root{
    --bg:#05070c;
    --bg-raised:#0b0f17;
    --bg-panel:#0f1420;
    --line:rgba(199,208,217,0.12);
    --line-strong:rgba(199,208,217,0.24);
    --steel:#c9d1da;
    --steel-dim:#828d97;
    /* QA fix 2026-10-22: was #4b525a = 2.55:1 on --bg (fails WCAG AA).
       #7d8794 = 5.5:1 on --bg, 5.0:1 on --bg-panel. */
    --steel-faint:#7d8794;
    --ink:#05070c;
    --glow:#33d6ff;
    --glow-soft:#8fecff;
    --glow-dim:rgba(51,214,255,0.30);
    --olyvex:#c9a15a;
    --font-display:'Orbitron', 'Arial Narrow', sans-serif;
    --font-body:'Inter', -apple-system, 'Segoe UI', sans-serif;
    --font-mono:'JetBrains Mono', 'Courier New', monospace;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }

  body{
    margin:0;
    overflow-x:hidden; /* QA 2026-10-22: global horizontal-overflow safeguard */
    background:var(--bg);
    color:var(--steel);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  body::before{
    content:"";
    position:fixed; inset:0;
    pointer-events:none;
    z-index:0;
    background-image:
      radial-gradient(circle at 18% 8%, rgba(51,214,255,0.06), transparent 42%),
      radial-gradient(circle at 84% 62%, rgba(51,214,255,0.045), transparent 38%),
      repeating-linear-gradient(0deg, rgba(199,209,218,0.025) 0px, rgba(199,209,218,0.025) 1px, transparent 1px, transparent 3px);
    background-size:auto, auto, 3px 3px;
  }

  h1,h2,h3{ text-wrap:balance; margin:0; }
  p{ margin:0; }
  a{ color:inherit; }
  button{ font:inherit; color:inherit; }

  .wrap{ max-width:1180px; margin:0 auto; padding:0 32px; position:relative; z-index:1; }
  @media (max-width:640px){ .wrap{ padding:0 20px; } }

  .eyebrow{
    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--glow-soft);
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:7px; height:7px;
    background:var(--glow);
    box-shadow:0 0 8px 1px var(--glow-dim);
    transform:rotate(45deg);
    flex:none;
  }

  /* ---------------- NAV ---------------- */
  nav.top{
    position:sticky; top:0; z-index:50;
    background:rgba(5,7,12,0.82);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav.top .wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:18px; padding-bottom:18px;
  }
  .nav-mark{ display:flex; align-items:center; gap:12px; }
  .nav-mark svg{ width:26px; height:26px; flex:none; }
  .nav-word{
    font-family:var(--font-display);
    font-weight:700;
    font-size:0.92rem;
    letter-spacing:0.16em;
  }
  .nav-word b{ color:var(--glow-soft); font-weight:700; }
  .nav-links{ display:flex; gap:34px; align-items:center; }
  .nav-links a{
    font-family:var(--font-mono);
    font-size:0.74rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--steel-dim);
    text-decoration:none;
    padding:6px 2px;
    border-bottom:1px solid transparent;
    transition:color 0.15s, border-color 0.15s;
  }
  .nav-links a:hover, .nav-links a:focus-visible{ color:var(--glow-soft); border-color:var(--glow-dim); outline:none; }
  @media (max-width:620px){ .nav-links{ gap:18px; } .nav-links a{ font-size:0.66rem; } }

  /* ---------------- HERO ---------------- */
  header.hero{ padding:96px 0 84px; text-align:center; }
  .hero-mark{ width:132px; height:132px; margin:0 auto 30px; }
  .hero-mark svg{ width:100%; height:100%; overflow:visible; }

  .wordmark{
    font-family:var(--font-display);
    font-weight:800;
    font-size:clamp(2.1rem, 6vw, 3.6rem);
    letter-spacing:0.09em;
    margin:0 0 14px;
    color:var(--steel);
  }
  .wordmark b{ font-weight:900; color:var(--glow-soft); text-shadow:0 0 26px var(--glow-dim); }

  .tagline{
    font-family:var(--font-mono);
    font-size:0.78rem;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--steel-dim);
    margin:0 0 52px;
  }

  .hero-claim{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(1.5rem, 3.6vw, 2.5rem);
    line-height:1.28;
    letter-spacing:0.01em;
    max-width:820px;
    margin:0 auto 24px;
  }
  .hero-claim em{
    font-style:normal;
    color:var(--glow-soft);
  }

  .hero-sub{
    max-width:560px;
    margin:0 auto 40px;
    color:var(--steel-dim);
    font-size:1.03rem;
  }

  .hero-cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

  .btn{
    font-family:var(--font-mono);
    font-size:0.78rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    padding:14px 26px;
    border-radius:2px;
    cursor:pointer;
    border:1px solid var(--line-strong);
    background:transparent;
    transition:border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
    text-decoration:none;
    display:inline-block;
  }
  .btn-primary{
    background:var(--glow);
    color:var(--ink);
    border-color:var(--glow);
    font-weight:600;
  }
  .btn-primary:hover, .btn-primary:focus-visible{ background:var(--glow-soft); box-shadow:0 0 24px var(--glow-dim); outline:none; }
  .btn-ghost{ color:var(--steel); }
  .btn-ghost:hover, .btn-ghost:focus-visible{ border-color:var(--glow); color:var(--glow-soft); outline:none; }
  .btn-small{ padding:8px 16px; font-size:0.68rem; }

  /* ---------------- STUDIO ---------------- */
  section.studio{ padding:64px 0 88px; border-top:1px solid var(--line); }
  .studio-grid{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:56px;
    margin-top:28px;
    align-items:start;
  }
  @media (max-width:820px){ .studio-grid{ grid-template-columns:1fr; gap:28px; } }

  .studio-grid h2{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(1.5rem, 3vw, 2.1rem);
    line-height:1.3;
  }
  .studio-copy p{ color:var(--steel-dim); margin-bottom:16px; max-width:60ch; }
  .studio-copy p:last-child{ margin-bottom:0; }
  .studio-copy strong{ color:var(--steel); font-weight:600; }

  .credential-line{
    margin-top:22px;
    padding-top:18px;
    border-top:1px dashed var(--line);
    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.05em;
    color:var(--steel-faint);
  }
  .credential-line a{ color:var(--olyvex); text-decoration:none; border-bottom:1px solid rgba(201,161,90,0.35); }

  /* ---------------- VAULT ---------------- */
  section.vault{ padding:80px 0 96px; border-top:1px solid var(--line); }
  .vault-head{ max-width:680px; margin-bottom:56px; }
  .vault-head h2{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(1.7rem, 3.6vw, 2.5rem);
    margin:16px 0 18px;
  }
  .vault-head p{ color:var(--steel-dim); max-width:56ch; }

  .reveal{ opacity:1; transform:none; }
  @media (prefers-reduced-motion:no-preference){
    .reveal{ opacity:0; transform:translateY(18px); transition:opacity 0.6s ease, transform 0.6s ease; }
    .reveal.visible{ opacity:1; transform:none; }
  }

  .group-label{
    font-family:var(--font-mono);
    font-size:0.68rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--steel-faint);
    margin:0 0 18px;
    display:flex; align-items:center; gap:14px;
  }
  .group-label::after{ content:""; height:1px; flex:1; background:var(--line); }

  .live-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
    margin-bottom:60px;
  }
  @media (max-width:760px){ .live-grid{ grid-template-columns:1fr; } }

  .asset-card{
    position:relative;
    background:var(--bg-raised);
    border:1px solid var(--line-strong);
    padding:30px 28px 26px;
    clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
    transition:border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  }
  .asset-card:hover, .asset-card:focus-within{
    border-color:var(--glow-dim);
    box-shadow:0 0 0 1px var(--glow-dim), 0 18px 42px -18px rgba(51,214,255,0.28);
    transform:translateY(-2px);
  }

  .pill{
    display:inline-flex; align-items:center; gap:7px;
    font-family:var(--font-mono);
    font-size:0.64rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    padding:5px 10px;
    border:1px solid var(--line-strong);
    color:var(--steel-dim);
    margin-bottom:16px;
  }
  .pill.on{ color:var(--glow-soft); border-color:var(--glow-dim); }
  .pill.on::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--glow); box-shadow:0 0 6px 1px var(--glow-dim); }
  .pill.off::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--steel-faint); }

  .asset-index{
    font-family:var(--font-mono);
    font-size:0.7rem;
    color:var(--steel-faint);
    letter-spacing:0.08em;
  }
  .asset-name{
    font-family:var(--font-display);
    font-weight:700;
    font-size:1.5rem;
    margin:8px 0 2px;
    letter-spacing:0.01em;
  }
  .asset-role{
    font-family:var(--font-mono);
    font-size:0.72rem;
    color:var(--steel-dim);
    letter-spacing:0.02em;
    margin-bottom:16px;
    display:block;
  }
  .asset-teaser{ color:var(--steel); font-size:0.96rem; margin-bottom:22px; max-width:46ch; }
  .asset-card .btn{ width:auto; }

  .ledger{
    border-top:1px solid var(--line);
    margin-bottom:0;
  }
  .ledger-row{
    display:grid;
    grid-template-columns:52px 1fr auto;
    gap:22px;
    align-items:center;
    padding:22px 4px;
    border-bottom:1px solid var(--line);
    border-left:2px solid transparent;
    transition:border-left-color 0.15s, background 0.15s, padding-left 0.15s;
  }
  .ledger-row:hover, .ledger-row:focus-within{
    border-left-color:var(--glow);
    background:rgba(51,214,255,0.035);
    padding-left:14px;
  }
  .ledger-num{ font-family:var(--font-mono); color:var(--steel-faint); font-size:0.85rem; }
  .ledger-main .asset-name{ font-size:1.15rem; margin:0 0 4px; }
  .ledger-main .asset-role{ margin-bottom:8px; }
  .ledger-main p{ color:var(--steel-dim); font-size:0.9rem; max-width:60ch; }
  .ledger-cta{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
  @media (max-width:700px){
    .ledger-row{ grid-template-columns:1fr; }
    .ledger-cta{ align-items:flex-start; flex-direction:row; }
    .ledger-num{ display:none; }
  }

  .flagship{
    margin-top:64px;
    padding:56px 44px;
    text-align:center;
    position:relative;
    border:1px solid var(--line-strong);
    background:
      radial-gradient(circle at 50% 0%, rgba(51,214,255,0.10), transparent 60%),
      var(--bg-panel);
  }
  .flagship .pill{ margin-bottom:22px; }
  .flagship .asset-name{ font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:14px; }
  .flagship p.asset-teaser{ margin:0 auto 26px; max-width:44ch; font-size:1.05rem; }

  /* ---------------- TRUST ---------------- */
  section.trust{ padding:70px 0; border-top:1px solid var(--line); text-align:center; }
  .trust blockquote{
    font-family:var(--font-display);
    font-weight:500;
    font-size:clamp(1.15rem, 2.4vw, 1.5rem);
    line-height:1.5;
    max-width:760px;
    margin:22px auto 20px;
    color:var(--steel);
  }
  .trust cite{
    font-style:normal;
    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--steel-dim);
  }

  /* ---------------- CLOSING ---------------- */
  section.closing{ padding:72px 0 90px; border-top:1px solid var(--line); }
  .closing-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:2px;
    background:var(--line);
    border:1px solid var(--line);
  }
  @media (max-width:700px){ .closing-grid{ grid-template-columns:1fr; } }
  .closing-cell{
    background:var(--bg);
    padding:38px 34px;
    display:flex; flex-direction:column; gap:14px; align-items:flex-start;
  }
  .closing-cell h3{ font-family:var(--font-display); font-size:1.2rem; font-weight:700; }
  .closing-cell p{ color:var(--steel-dim); font-size:0.92rem; max-width:38ch; }

  /* ---------------- FOOTER ---------------- */
  footer{
    padding:34px 0 44px;
    border-top:1px solid var(--line);
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
    font-family:var(--font-mono);
    font-size:0.7rem;
    letter-spacing:0.04em;
    color:var(--steel-faint);
  }
  footer a{ text-decoration:none; color:var(--steel-faint); transition:color 0.2s; }
  footer a:hover, footer a:focus-visible{ color:var(--olyvex); outline:none; }

  /* ---------------- MODAL ---------------- */
  .modal-backdrop{
    position:fixed; inset:0; background:rgba(5,7,12,0.78);
    backdrop-filter:blur(3px);
    display:flex; align-items:center; justify-content:center;
    padding:24px; z-index:100;
    opacity:0; pointer-events:none; transition:opacity 0.18s;
  }
  .modal-backdrop.open{ opacity:1; pointer-events:auto; }
  .modal{
    background:var(--bg-panel);
    border:1px solid var(--line-strong);
    max-width:440px; width:100%;
    max-height:calc(100vh - 48px); overflow-y:auto;
    padding:34px 30px 28px;
    position:relative;
  }
  /* QA fix 2026-10-22: 44px hit target (was ~25px with padding:6px). */
  .modal-close{
    position:absolute; top:8px; right:8px;
    width:44px; height:44px; padding:0;
    display:flex; align-items:center; justify-content:center;
    background:none; border:none; color:var(--steel-dim); cursor:pointer;
    font-family:var(--font-mono); font-size:1rem; line-height:1;
  }
  .modal-close:hover, .modal-close:focus-visible{ color:var(--glow-soft); outline:none; }
  .modal h3{ font-family:var(--font-display); font-size:1.25rem; margin-bottom:6px; }
  .modal .modal-asset{ font-family:var(--font-mono); font-size:0.72rem; color:var(--glow-soft); letter-spacing:0.06em; margin-bottom:22px; display:block; }
  .field{ margin-bottom:16px; }
  .field label{
    display:block; font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--steel-dim); margin-bottom:6px;
  }
  .field input, .field select{
    width:100%; background:var(--bg-raised); border:1px solid var(--line-strong);
    color:var(--steel); padding:10px 12px; font-family:var(--font-body); font-size:0.92rem;
  }
  .field input:focus, .field select:focus{ outline:2px solid var(--glow); outline-offset:1px; }
  .modal-note{ font-size:0.74rem; color:var(--steel-faint); margin-top:14px; line-height:1.5; }
  /* QA fix 2026-10-22: inline validation error for the NDA step (replaces the
     easily-missed alert / silent-feeling submit). */
  .modal-error{
    font-size:0.82rem; line-height:1.5; color:#ff9d9d;
    background:rgba(255,90,90,0.08); border:1px solid rgba(255,120,120,0.45);
    padding:10px 12px; margin:0 0 14px;
  }
  .modal-confirm{ display:none; text-align:center; padding:14px 0 4px; }
  .modal-confirm.show{ display:block; }
  .modal-confirm .pill{ margin-bottom:14px; }
  .modal.confirmed form{ display:none; }
  .hp-field{ position:absolute; left:-9999px; top:-9999px; }

  /* ---------------- MULTI-PAGE ADDITIONS ---------------- */
  .page-hero{ padding:84px 0 56px; }
  .page-hero h1{
    font-family:var(--font-display); font-weight:800;
    font-size:clamp(1.9rem, 4.6vw, 3rem);
    letter-spacing:0.02em; margin:18px 0 16px; max-width:22ch; line-height:1.2;
  }
  .page-hero h1 em{ font-style:normal; color:var(--glow-soft); }
  .page-hero .lede{ color:var(--steel-dim); font-size:1.05rem; max-width:62ch; }
  .page-hero .hero-cta{ justify-content:flex-start; margin-top:28px; }
  .detail-grid{
    display:grid; grid-template-columns:1.15fr 0.85fr;
    gap:56px; align-items:start; padding:4px 0 72px;
  }
  @media (max-width:860px){ .detail-grid{ grid-template-columns:1fr; } }
  .detail-main h2{ font-family:var(--font-display); font-size:1.25rem; margin:36px 0 12px; }
  .detail-main h2:first-child{ margin-top:0; }
  .detail-main p{ color:var(--steel-dim); margin-bottom:14px; max-width:62ch; }
  .detail-main p strong{ color:var(--steel); font-weight:600; }
  .side-card{
    background:var(--bg-raised); border:1px solid var(--line-strong);
    padding:28px; position:sticky; top:96px;
    clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  }
  .side-card h3{ font-family:var(--font-display); font-size:1rem; margin:0 0 12px; }
  .side-card p{ color:var(--steel-dim); font-size:0.9rem; margin-bottom:18px; }
  .nda-note{
    margin-top:22px; padding-top:18px; border-top:1px dashed var(--line);
    font-size:0.8rem; color:var(--steel-faint); line-height:1.55;
  }
  .related{
    border-top:1px solid var(--line); padding:40px 0 80px;
    display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  }
  .related a{
    font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.06em;
    color:var(--steel-dim); text-decoration:none;
  }
  .related a:hover{ color:var(--glow-soft); }
  .steps{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; margin:34px 0 8px; }
  @media (max-width:760px){ .steps{ grid-template-columns:1fr; } }
  .step{ background:var(--bg-raised); border:1px solid var(--line); padding:24px; }
  .step .n{ font-family:var(--font-mono); color:var(--glow-soft); font-size:0.72rem; letter-spacing:0.14em; }
  .step h3{ font-family:var(--font-display); font-size:1.02rem; margin:10px 0 8px; }
  .step p{ color:var(--steel-dim); font-size:0.88rem; }
  a.asset-title-link{ color:inherit; text-decoration:none; }
  a.asset-title-link:hover .asset-name{ color:var(--glow-soft); }
  .nav-links a.active{ color:var(--glow-soft); border-color:var(--glow-dim); }
  a.nav-mark:hover .nav-word{ color:var(--glow-soft); }
  .cred-block{
    border:1px solid var(--line-strong); background:var(--bg-panel);
    padding:40px 36px; margin:56px 0 8px;
  }
  .cred-block .olyvex-mark{
    color:var(--olyvex); font-family:var(--font-display);
    letter-spacing:0.08em; font-size:0.95rem;
  }
  .cred-block p{ color:var(--steel-dim); margin-top:12px; max-width:64ch; }
  .section-gap{ padding:20px 0 80px; }
  /* QA fixes 2026-10-22: heading hierarchy — group labels and access-page
     section titles are real h2s now; keep their original visual styling. */
  h2.group-label{ font-weight:500; }
  .closing-cell h2{ font-family:var(--font-display); font-size:1.2rem; font-weight:700; }
  /* ---------------- LOGO + WORDMARK (brand upload 2026-09-30) ---------------- */
  .nav-mark{ display:flex; align-items:center; gap:12px; }
  .nav-logo{ height:56px; width:auto; display:block; }
  .nav-lockup{ display:flex; flex-direction:column; line-height:1.05; }
  .chrome-text{
    font-family:var(--font-display); font-weight:800; letter-spacing:0.12em;
    background:linear-gradient(180deg,#fbfdff 0%,#dfe6ec 30%,#9aa5b1 48%,#f2f5f8 55%,#b9c2cc 72%,#e6ebf0 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 1px 1px rgba(0,0,0,0.55));
  }
  .nav-word.chrome-text{ font-size:0.95rem; }
  .nav-sub{
    font-family:var(--font-mono); font-size:0.55rem; letter-spacing:0.4em;
    color:var(--glow-soft); margin-top:5px; white-space:nowrap;
    text-shadow:0 0 14px var(--glow-dim);
  }
  .hero-logo{ width:min(230px,52vw); height:auto; display:block; }
  /* Fix 2026-10-04: the legacy .hero-mark rule constrained the box to 132px
     while the img is 230px wide, so the logo overflowed its centered box and
     looked off-center. Flex-center the actual image instead. */
  .hero-mark{ width:auto; height:auto; margin:0 auto 30px; display:flex; justify-content:center; }
  /* Fixed background watermark 2026-10-04: logo stays centered in the viewport
     while the page scrolls beneath it. z-index:-1 keeps it behind all content
     but above the body background; pointer-events:none so it never intercepts. */
  .bg-mark{ position:fixed; inset:0; z-index:-1; display:flex; align-items:center;
    justify-content:center; pointer-events:none; }
  .bg-mark img{ width:min(560px,82vw); height:auto; opacity:.20; }
  .wordmark.chrome-text{ font-size:clamp(2.1rem,5.4vw,3.4rem); margin:26px 0 0; }
  .tagline.brand-sub{
    font-family:var(--font-mono); letter-spacing:0.42em; text-indent:0.42em;
    color:var(--glow-soft); font-size:clamp(0.62rem,1.6vw,0.8rem);
    margin-top:14px; text-shadow:0 0 16px var(--glow-dim);
  }