/* =========================================================================
   NosoTrack — Design v2 (Palantir-inspired)
   Branch: designv2

   Organization
   ------------
   1.  Tokens
   2.  Reset & base
   3.  Typographic primitives (.eyebrow, .display, utilities)
   4.  Layout primitives (.container, .section)
   5.  Buttons (.btn)
   6.  Reveal
   7.  Nav
   8.  Hero
   9.  Marquee
   10. Logo strip
   11. About
   12. Platform / pipeline
   13. Research
   14. Team
   15. Roadmap
   16. Contact
   17. Footer
   18. Responsive
   19. Reduced motion
   ========================================================================= */

/* ========== 1. TOKENS ========== */
:root {
    /* Canvas */
    --bg:         #efeeef;
    --bg-alt:     #f3f3f3;
    --bg-tint:    #dbdbdb;
    --bg-ink:     #212326;

    /* Ink (text on light) */
    --ink:        #1e1e2b;
    --text:       #474852;
    --mute:       #767676;
    --faint:      #a4a4a7;

    /* Inverted (text on dark) */
    --inv-hi:     #efeeef;
    --inv:        #c9c9cc;
    --inv-mute:   #8a8a8f;
    --inv-faint:  #5a5c60;

    /* Rules & borders */
    --rule:           rgba(30, 30, 43, .12);
    --rule-strong:    rgba(30, 30, 43, .24);
    --rule-inv:       rgba(239, 238, 239, .14);
    --rule-inv-strong:rgba(239, 238, 239, .28);

    /* Signal — outbreak alert red, reserved for product viz only */
    --alert:      #ff073a;
    --alert-dim:  rgba(255, 7, 58, .12);
    --alert-rgb:  255, 7, 58;

    /* Ward signal colours (desaturated, shared with canvases) */
    --ward-a:     #6b7d8f;
    --ward-b:     #8a7966;
    --ward-c:     #7a8a70;

    /* Typography */
    --display: 'Inter Tight', 'Alliance No. 1', 'Neue Haas Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

    /* Layout */
    --container:  1240px;
    --pad:        clamp(20px, 3vw, 40px);
    --section:    clamp(96px, 12vw, 168px);

    /* 8pt spacing scale */
    --s-1:  8px;
    --s-2:  16px;
    --s-3:  24px;
    --s-4:  32px;
    --s-5:  40px;
    --s-6:  48px;
    --s-8:  64px;
    --s-10: 80px;
    --s-12: 96px;

    /* Motion */
    --t-fast: .16s ease;
    --t:      .32s cubic-bezier(.2, 0, 0, 1);
    --t-slow: .8s  cubic-bezier(.2, 0, 0, 1);
}

/* ========== 2. RESET & BASE ========== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--display);
    background: var(--bg);
    color: var(--text);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.55;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01", "cv11";
}
a { color: inherit; text-decoration: none; }
img, canvas { max-width: 100%; display: block; }
button { font: inherit; }
strong { color: var(--ink); font-weight: 600; }
em { font-style: italic; color: inherit; }
p  { text-wrap: pretty; hyphens: manual; orphans: 2; widows: 2; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--mute); }
html { scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }

/* ========== 3. TYPOGRAPHIC PRIMITIVES ========== */

/* Section eyebrow — uppercase mono label, no leading index */
.section-tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 28px;
}

.on-dark .section-tag { color: var(--inv-hi); }

/* Primary section title — big editorial display */
.section-title {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(2.4rem, 5vw, 3.75rem);
    color: var(--ink);
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin-bottom: var(--s-4);
    max-width: 20ch;
}
.on-dark .section-title { color: var(--inv-hi); }

/* Reusable body copy size for section lead-ins */
.lead {
    color: var(--text);
    font-size: 17px;
    line-height: 1.6;
    letter-spacing: -.005em;
    max-width: 66ch;
}

/* Sub-label (within a section, e.g. research subheads) */
.sub-label {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mute);
}

/* ========== 4. LAYOUT PRIMITIVES ========== */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad);
    width: 100%;
}
.section-padding { padding: var(--section) 0; }

/* ========== 5. BUTTONS ========== */
.btn-primary, .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 14px 22px;
    border: 1px solid;
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn-primary::after, .btn-secondary::after {
    content: '→';
    font-size: 14px;
    transition: transform var(--t-fast);
}
.btn-primary:hover::after, .btn-secondary:hover::after { transform: translateX(3px); }

/* Default on-dark styling (hero, contact, footer) */
.btn-primary   { background: var(--inv-hi);    color: var(--bg-ink); border-color: var(--inv-hi); }
.btn-primary:hover { background: transparent;  color: var(--inv-hi); }
.btn-secondary { background: transparent;      color: var(--inv-hi); border-color: var(--rule-inv-strong); }
.btn-secondary:hover { background: var(--inv-hi); color: var(--bg-ink); border-color: var(--inv-hi); }

/* On-light sections */
.on-light .btn-primary   { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.on-light .btn-primary:hover { background: transparent; color: var(--ink); }
.on-light .btn-secondary { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.on-light .btn-secondary:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ========== 6. REVEAL ========== */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--t-slow), transform var(--t-slow);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ========== 7. NAV ========== */
nav.main-nav {
    position: fixed; top: 0; left: 0; width: 100%;
    z-index: 1000;
    background: rgba(239, 238, 239, 0);
    border-bottom: 1px solid transparent;
    transition: background var(--t), border-color var(--t);
}
nav.main-nav.scrolled {
    background: rgba(239, 238, 239, .92);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    border-bottom-color: var(--rule);
}

.nav-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad);
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav-brand   { display: flex; align-items: center; gap: 10px; }
.virus-canvas { flex-shrink: 0; display: block; }

/* Nav brand mark — inline SVG, inherits color via currentColor. */
.nav-mark {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    color: var(--ink);
    transition: color var(--t-fast);
}
.nav-mark svg { width: 100%; height: 100%; display: block; }

/* Inner network spins on brand hover (nav + footer). Brackets stay fixed
   (the "frame"), the network — nodes, spikes, red core — rotates as a
   single unit around the SVG centre (16, 16 in the 32-unit viewBox).
   Suppressed under prefers-reduced-motion. */
.brand-mark-network {
    transform-origin: 16px 16px;
    transition: transform 1.6s cubic-bezier(.2, 0, 0, 1);
}
.nav-brand:hover    .brand-mark-network,
.footer-brand:hover .brand-mark-network {
    transform: rotate(360deg);
}
@media (prefers-reduced-motion: reduce) {
    .brand-mark-network { transition: none; }
    .nav-brand:hover    .brand-mark-network,
    .footer-brand:hover .brand-mark-network { transform: none; }
}

.nav-logo {
    font-family: var(--display);
    font-weight: 600;
    font-size: 17px;
    color: var(--ink);
    letter-spacing: -.01em;
    transition: color var(--t-fast);
}

.nav-links {
    display: flex; align-items: center; gap: 36px;
    list-style: none;
}
.nav-links a {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mute);
    transition: color var(--t-fast);
    position: relative;
}
.nav-links a:not(.nav-cta)::after {
    content: '';
    position: absolute; bottom: -6px; left: 0;
    width: 0; height: 1px; background: currentColor;
    transition: width var(--t);
}
.nav-links a:not(.nav-cta):hover,
.nav-links a:not(.nav-cta).active { color: var(--ink); }
.nav-links a:not(.nav-cta):hover::after,
.nav-links a:not(.nav-cta).active::after { width: 100%; }

/* CTA — fixed specificity bug: uses .nav-links .nav-cta chain to outrank .nav-links a:hover */
.nav-links .nav-cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 16px;
    border: 1px solid var(--rule-strong);
    color: var(--ink);
    background: transparent;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.nav-links .nav-cta::after {
    content: '→';
    font-size: 12px;
    transition: transform var(--t-fast);
}
.nav-links .nav-cta:hover {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}
.nav-links .nav-cta:hover::after { transform: translateX(3px); }

/* Invert nav when body.nav-on-dark is active and nav not yet scrolled */
body.nav-on-dark nav.main-nav:not(.scrolled)                        { color: var(--inv-hi); }
body.nav-on-dark nav.main-nav:not(.scrolled) .nav-logo              { color: var(--inv-hi); }
body.nav-on-dark nav.main-nav:not(.scrolled) .nav-mark              { color: var(--inv-hi); }
body.nav-on-dark nav.main-nav:not(.scrolled) .nav-links a           { color: var(--inv); }
body.nav-on-dark nav.main-nav:not(.scrolled) .nav-links a:hover     { color: var(--inv-hi); }
body.nav-on-dark nav.main-nav:not(.scrolled) .nav-links .nav-cta    { color: var(--inv-hi); border-color: var(--rule-inv-strong); }
body.nav-on-dark nav.main-nav:not(.scrolled) .nav-links .nav-cta:hover {
    background: var(--inv-hi);
    color: var(--bg-ink);
    border-color: var(--inv-hi);
}
body.nav-on-dark nav.main-nav:not(.scrolled) .nav-hamburger span    { background: var(--inv-hi); }

.nav-hamburger {
    display: none; flex-direction: column; gap: 5px;
    cursor: pointer; background: none; border: none; padding: 6px;
}
.nav-hamburger span {
    width: 22px; height: 1px;
    background: var(--ink);
    transition: transform var(--t), opacity var(--t), background var(--t);
}

/* ========== 8. HERO ========== */

/* Dark band — wraps #hero and #demo so the particle canvas paints a
   single continuous field behind both. The hero retains its 100vh height
   for impact; #demo flows immediately after with reduced top padding so
   its headline reads as a subhead of the hero rather than a new section. */
.dark-band {
    position: relative;
    background: var(--bg-ink);
    color: var(--inv);
    overflow: hidden;
    /* Keeps the network canvas (z-index: -1) bounded inside the band so it
       paints between the band's background and its content. */
    isolation: isolate;
}

#hero {
    position: relative;
    color: var(--inv);
    /* Hero is content-sized (no full-viewport min-height) so the demo sits
       right under the brand with minimal space between them. The scroll-hint
       lives at the bottom of the dark band, after the demo + CTA. */
}

/* Network canvas is now pinned to .dark-band, not #hero, so the particle
   field spans hero + demo. Sized in main.js to match the wrapper. */
#network-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    /* -1 paints below normal-flow content but stays above the dark-band's
       own background (because .dark-band is a stacking context). Lets #demo
       be a normal block without needing its own z-index. */
    z-index: -1;
    opacity: .85;
    pointer-events: none;
}
.hero-content {
    position: relative; z-index: 2;
    max-width: var(--container);
    margin: 0 auto;
    /* 140px clears the nav with breathing room; 32px below holds the demo
       close. No clamp/vh needed — fixed values keep the hero predictable
       across screen sizes. */
    padding: 140px var(--pad) var(--s-4);
    width: 100%;
}
.hero-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--inv-hi);
    margin-bottom: var(--s-4);
    display: inline-block;
}

/* Hero headline — all three lines set in JetBrains Mono for a uniform
   instrument/terminal register. "Protect." picks up a subtle cream halo via
   the .accent span — luminescence rather than alert (red is reserved for
   threat signals). */
.hero-title {
    font-family: var(--mono);
    font-weight: 400;
    font-size: clamp(2.6rem, 7vw, 6.4rem);
    line-height: 1.02;
    color: var(--inv-hi);
    letter-spacing: -.025em;
    margin-bottom: var(--s-5);
    max-width: 20ch;
}
.hero-title .accent {
    font-family: inherit;
    font-weight: inherit;
    font-style: normal;
    font-size: inherit;
    letter-spacing: inherit;
    color: inherit;
    /* Very subtle cream aura — sits behind "Protect." as a soft halo of light,
       reinforcing the protective register without bleeding into surrounding
       text. Layered shadows give a soft fall-off. Breathes slowly via
       @keyframes accent-breathe (suppressed under prefers-reduced-motion). */
    text-shadow:
        0 0 22px rgba(239, 238, 239, .32),
        0 0 8px  rgba(239, 238, 239, .22);
    animation: accent-breathe 5.2s ease-in-out infinite;
}

@keyframes accent-breathe {
    0%, 100% {
        text-shadow:
            0 0 22px rgba(239, 238, 239, .28),
            0 0 8px  rgba(239, 238, 239, .18);
    }
    50% {
        text-shadow:
            0 0 32px rgba(239, 238, 239, .48),
            0 0 10px rgba(239, 238, 239, .30);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-title .accent { animation: none; }
}
.hero-subtitle {
    font-size: 17px;
    color: var(--inv);
    max-width: 680px;
    line-height: 1.6;
    letter-spacing: -.005em;
    /* No buttons follow — let the subtitle close the hero block cleanly. */
    margin-bottom: 0;
}
/* Scroll hint — sits at the bottom of the dark band, after hero+demo, and
   bridges into the rest of the page. In-flow flex column (no absolute
   positioning); only the arrow bounces so the label stays readable. */
.scroll-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    /* 40 above the chevron (matches the demo block's tight rhythm), 48 below
       so the chevron has room to breathe before the marquee begins. */
    padding: var(--s-5) 0 var(--s-6);
    color: var(--inv-mute);
    text-decoration: none;
    transition: color var(--t-fast);
    opacity: 0;
    animation: fadeInHint .8s 1.8s forwards;
}
.scroll-hint:hover { color: var(--inv-hi); }
.scroll-hint-arrow {
    animation: bounceHint 3s 2.8s ease-in-out infinite;
}
.scroll-hint-label {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .26em;
    text-transform: uppercase;
    line-height: 1;
}
@keyframes fadeInHint { to { opacity: 1; } }
@keyframes bounceHint {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}

/* ========== 9. MARQUEE ========== */
.marquee-section {
    background: var(--bg-ink);
    border-top: 1px solid var(--rule-inv);
    border-bottom: 1px solid var(--rule-inv);
    padding: 18px 0;
    overflow: hidden;
    position: relative;
}
.marquee-track {
    display: flex;
    gap: 64px;
    width: max-content;
    animation: marquee 60s linear infinite;
    will-change: transform;
}
.marquee-track span {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--inv-mute);
    white-space: nowrap;
    flex-shrink: 0;
}
.marquee-track span::after {
    content: '·';
    margin-left: 64px;
    color: var(--inv-faint);
}
@keyframes marquee {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

/* ========== 10. LOGO STRIP ========== */
.logo-strip {
    background: var(--bg);
    padding: 32px 0;
    border-bottom: 1px solid var(--rule);
}
.logo-strip-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 56px;
    flex-wrap: wrap;
}
.logo-strip-item {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mute);
    white-space: nowrap;
    transition: color var(--t-fast);
}
.logo-strip-item:hover { color: var(--ink); }

/* ========== 10b. DEMO ==========
   Embedded interactive Foundry walkthrough. Dark surround framing a light
   product UI inside a Palantir-style bezel: thin red top rail + four small
   square brackets at the corners (echoing the brand mark). The demo itself
   lives in foundry-demo/index.html and is loaded as a sandboxed iframe at
   16:9, so the React/Babel runtime never enters the main page bundle. */
#demo {
    /* Background lives on .dark-band; canvas (z-index: -1) sits behind us
       automatically, so #demo doesn't need its own stacking context. Avoiding
       one is important — it would trap the fullscreen overlay (9999) inside
       it and let the hero (z-index: 2) and nav (z-index: 1000) paint over. */
    background: transparent;
    color: var(--inv);
    /* Override .section-padding entirely. 32 top (tight gap to hero's 32
       bottom = 64px) and 32 bottom (tight gap to scroll-hint). */
    padding: var(--s-4) 0;
}

.demo-frame {
    position: relative;
    margin: 0 auto;
    max-width: var(--container);
    padding: 18px;
    background: linear-gradient(180deg, #15171a 0%, #101114 100%);
    border: 1px solid var(--rule-inv);
}

/* Top accent rail — narrow red line, off-center, signature Palantir motif */
.demo-rail {
    position: absolute;
    top: -1px; left: 18px;
    width: 96px; height: 2px;
    background: var(--alert);
    box-shadow: 0 0 12px rgba(var(--alert-rgb), .35);
}

/* Corner brackets — square L-shapes, 14px arms */
.demo-bracket {
    position: absolute;
    width: 14px; height: 14px;
    border: 0 solid var(--rule-inv-strong);
    pointer-events: none;
}
.demo-bracket--tl { top: 6px;    left: 6px;    border-top-width: 1px; border-left-width: 1px; }
.demo-bracket--tr { top: 6px;    right: 6px;   border-top-width: 1px; border-right-width: 1px; }
.demo-bracket--bl { bottom: 6px; left: 6px;    border-bottom-width: 1px; border-left-width: 1px; }
.demo-bracket--br { bottom: 6px; right: 6px;   border-bottom-width: 1px; border-right-width: 1px; }

/* 16:9 stage — iframe absolute-fills the box */
.demo-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #fafafa;
    overflow: hidden;
}
.demo-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #fafafa;
}

/* ── Shared playback bar ─────────────────────────────────────────────────────
   One block for both the demo iframe (#demo) and the engine card (#platform).
   Markup is rendered + wired by playbar.js. Light vs. dark is a single class
   modifier driving CSS custom properties — no duplicated rules.
*/
.playbar {
    /* Light variant tokens (default — used by the engine card) */
    --pb-fg:          var(--text);
    --pb-fg-strong:   var(--ink);
    --pb-mute:        var(--mute);
    --pb-rule:        var(--rule);
    --pb-rule-strong: var(--rule-strong);
    --pb-bg:          var(--bg-alt);
    --pb-hover-bg:    transparent;

    height: 44px;
    background: var(--pb-bg);
    border: 1px solid var(--pb-rule);
    border-top: none;
    display: flex; align-items: center; gap: 12px;
    padding: 0 14px;
}
.playbar--dark {
    /* Dark variant — used by the demo iframe over the dark band */
    --pb-fg:          var(--inv);
    --pb-fg-strong:   var(--inv-hi);
    --pb-mute:        var(--inv-mute);
    --pb-rule:        var(--rule-inv);
    --pb-rule-strong: var(--rule-inv-strong);
    --pb-bg:          rgba(255,255,255,.03);
    --pb-hover-bg:    rgba(255,255,255,.04);
}
.playbar-tl {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--pb-mute);
    letter-spacing: .18em;
    text-transform: uppercase;
    white-space: nowrap;
    user-select: none;
}
.playbar-track {
    flex: 1; height: 2px;
    background: var(--pb-rule);
    position: relative;
    cursor: pointer;
    touch-action: none;  /* let us own the scrub on touch devices */
}
.playbar-fill {
    position: absolute; top: 0; left: 0;
    height: 100%;
    background: var(--pb-fg-strong);
    width: 0;
    pointer-events: none;
}
.playbar-handle {
    position: absolute; top: 50%; left: 0;
    width: 10px; height: 10px;
    background: var(--pb-fg-strong);
    transform: translate(-50%, -50%);
    cursor: grab; z-index: 2;
}
.playbar-handle:active { cursor: grabbing; }
.playbar-time {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--pb-mute);
    letter-spacing: .08em;
    white-space: nowrap;
    min-width: 4ch;
    text-align: right;
    user-select: none;
}
.playbar-pause, .playbar-spd, .playbar-fs {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 5px 10px;
    background: transparent;
    border: 1px solid var(--pb-rule-strong);
    color: var(--pb-fg);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.playbar-pause { width: 26px; height: 26px; padding: 0;
    display: flex; align-items: center; justify-content: center; }
.playbar-pause svg { width: 8px; height: 10px; }
.playbar-fs    { width: 30px; height: 26px; padding: 0;
    display: flex; align-items: center; justify-content: center; }
.playbar-fs svg { width: 12px; height: 12px; }
.playbar-pause:hover, .playbar-spd:hover, .playbar-fs:hover {
    color: var(--pb-fg-strong);
    border-color: var(--pb-fg-strong);
    background: var(--pb-hover-bg);
}

/* ── Post-demo CTA ──────────────────────────────────────────────────────────
   Minimalist right-aligned link. The demo above is the showcase; this is just
   a quiet conversion handle for visitors who want the live product.
*/
.demo-cta-row {
    margin-top: var(--s-4);
    text-align: right;
}
.demo-cta {
    color: var(--inv-hi);
    text-decoration: none;
    font-family: var(--display);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -.005em;
}
.demo-cta-text {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--rule-inv-strong);
    transition: text-decoration-color var(--t-fast);
}
.demo-cta-arrow {
    display: inline-block;
    margin-left: 10px;
    color: var(--alert);
    transition: transform var(--t-fast);
}
.demo-cta:hover .demo-cta-text  { text-decoration-color: var(--inv-hi); }
.demo-cta:hover .demo-cta-arrow { transform: translateX(4px); }

/* ── Fullscreen overlay (CSS-pinned) ────────────────────────────────────────
   Native requestFullscreen isn't available on iPhone for non-<video> elements,
   so we toggle .is-fullscreen on the target instead. Works on every device.
*/
.is-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    width: 100vw !important; height: 100vh !important;
    max-width: none !important;
    margin: 0 !important; padding: 0 !important;
    background: #0a0a0c !important;
    display: flex !important;
    flex-direction: column !important;
    border: 0 !important;
}
body.has-playbar-fs { overflow: hidden; }
/* While fullscreen, lift the dark band above the fixed nav (z-index: 1000)
   so the demo overlay paints over the entire viewport including the nav. */
body.has-playbar-fs .dark-band { z-index: 9998; }
/* Demo frame in fullscreen — hide brackets/rail, stretch the stage. */
.demo-frame.is-fullscreen .demo-bracket,
.demo-frame.is-fullscreen .demo-rail   { display: none; }
.demo-frame.is-fullscreen .demo-stage  { flex: 1; aspect-ratio: auto; }
.demo-frame.is-fullscreen .playbar     { border-left: 0; border-right: 0; border-bottom: 0; }
/* Engine viewport in fullscreen — let the canvas fill the available space. */
.eng-viewport.is-fullscreen           { background: #fafafa; }
.eng-viewport.is-fullscreen #engine-canvas { flex: 1; height: auto !important; width: 100% !important; }
.eng-viewport.is-fullscreen .playbar  { border-left: 0; border-right: 0; border-bottom: 0; }

/* ========== 11. ABOUT ========== */
#about { background: var(--bg); }
.about-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-10);
    align-items: start;
}
.about-viz  { position: sticky; top: 96px; }
.about-text p {
    color: var(--text);
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: -.005em;
    margin-bottom: var(--s-3);
    max-width: 62ch;
}
.about-text p:last-child { margin-bottom: 0; }

/* ── BRAND WORDMARK ────────────────────────────────────────────────────────
   Any occurrence of "NosoTrack" is rendered as a two-span wordmark:
     <span class="brand">
       <span class="brand-noso">Noso</span>
       <span class="brand-track">Track</span>
     </span>
   The wordmark uses JetBrains Mono across the site. Red "Track" is scoped to
   the nav and footer logos only (brand chrome), leaving body copy neutral. */
.brand {
    font-family: var(--mono);
    font-weight: 500;
    letter-spacing: -.02em;
    font-size: .94em;   /* mono has a larger x-height; trim slightly to match */
    color: inherit;
    white-space: nowrap;
}
.brand-noso,
.brand-track { color: inherit; }

/* Red "Track" — reserved for brand chrome (logo lockup) */
.nav-logo .brand-track,
.footer-logo .brand-track { color: var(--alert); }

/* Trademark mark — small superscript ™ next to the wordmark in nav/footer */
.brand-tm {
    font-family: var(--mono);
    font-size: .55em;
    font-weight: 500;
    line-height: 0;
    vertical-align: super;
    margin-left: .15em;
    opacity: .7;
    letter-spacing: 0;
}

/* Stats — 3-column slab separated by hairlines (no cards) */
.about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    margin: var(--s-6) 0;
}
.about-stat {
    padding: var(--s-4) var(--s-3) var(--s-4) 0;
    border-right: 1px solid var(--rule);
}
.about-stat:last-child { border-right: none; padding-right: 0; }
.about-stat-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 14px;
}
.about-stat-value {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    color: var(--ink);
    line-height: 1;
    letter-spacing: -.03em;
    margin-bottom: var(--s-1);
}
.about-stat-detail {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute);
}

/* 3D network container */
#three-container {
    width: 100%;
    height: 520px;
    position: relative;
    background: var(--bg);
    overflow: hidden;
}
#three-container canvas { display: block; }
.viz-legend {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    gap: 36px;
    margin-top: 10px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--text);
}
.viz-legend-group  { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.viz-legend-title  {
    font-size: 10px;
    color: var(--mute);
    letter-spacing: .18em;
    text-transform: uppercase;
    padding-right: 6px;
    border-right: 1px solid var(--rule);
}
.viz-legend-item   { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.viz-legend-dot    { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.viz-legend-diamond {
    width: 9px; height: 9px; flex-shrink: 0;
    background: var(--mute);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.viz-legend-sep { display: none; }

.viz-tooltip {
    position: absolute;
    background: var(--bg-ink);
    border: 1px solid var(--rule-inv-strong);
    padding: 8px 12px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--inv-hi);
    pointer-events: none;
    z-index: 20;
    display: none;
    border-radius: 0;
}

/* ========== 12. PLATFORM / PIPELINE ========== */
#platform {
    background: var(--bg-alt);
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
#pipeline-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    opacity: .4;
    pointer-events: none;
}
.pipeline-wrap     { position: relative; z-index: 1; }
.pipeline-subtitle {
    color: var(--text);
    font-size: 16px;
    max-width: 860px;
    margin-bottom: var(--s-10);
    line-height: 1.7;
    letter-spacing: -.005em;
}

.pipeline-flow {
    display: flex; flex-direction: column;
    max-width: 960px;
    margin: 0 auto;
}
.pipeline-step { width: 100%; position: relative; }

.pipeline-step-badge {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: var(--s-3);
}
.pipeline-step-num {
    width: 32px; height: 32px;
    border: 1px solid var(--rule-strong);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pipeline-step-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mute);
}

.pipeline-sources {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--rule);
    background: var(--bg);
}
.pipeline-sources .p-card         { border-right: 1px solid var(--rule); }
.pipeline-sources .p-card:last-child { border-right: none; }
.pipeline-single {
    border: 1px solid var(--rule);
    background: var(--bg);
}

/* Connector */
.pipeline-connector {
    display: flex; align-items: center; justify-content: center;
    height: 64px;
}
.pipeline-connector canvas {
    width: 100%; height: 100%;
    display: block;
    opacity: .6;
}

/* Flat card — sits on --bg-alt section; default --bg reads darker than parent,
   hover to --bg-tint darkens further. Layout unchanged to respect adjacent
   .pipeline-sources right-border grouping. */
.p-card {
    position: relative;
    background: var(--bg);
    padding: 28px;
    overflow: hidden;
    transition: background var(--t-fast);
}
.p-card:hover { background: var(--bg-tint); }
.p-card-glow  { display: none; }

.p-card-canvas {
    width: 100%;
    height: 120px;
    display: block;
    margin-bottom: 20px;
    background: var(--bg);
    border: 1px solid var(--rule);
}

/* Card typography */
.p-card-tag {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: var(--s-1);
}
.p-card-title {
    font-family: var(--display);
    font-weight: 500;
    font-size: 17px;
    color: var(--ink);
    line-height: 1.25;
    letter-spacing: -.01em;
    margin-bottom: 6px;
}
.p-card-desc {
    font-size: 14px;
    color: var(--text);
    line-height: 1.7;
}

/* ----- Engine card ----- */
.p-card--engine .p-card-canvas {
    height: 440px;
    margin-bottom: 0;
    border-right: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
    border-top: 1px solid var(--rule);
    border-bottom: none;
}
.p-card--engine .p-card-title { font-size: 22px; margin: 24px 28px 6px; }
.p-card--engine .p-card-tag   { margin: 24px 28px 0; }
.p-card--engine .p-card-desc  { margin: 0 28px 24px; }

.eng-viewport { position: relative; }
/* Engine playbar uses the shared .playbar block above (light variant). */

/* Engine feature strip injected by content-loader */
.engine-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.engine-feat {
    padding: 18px;
    border-right: 1px solid var(--rule);
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text);
    line-height: 1.55;
}
.engine-feat:last-child { border-right: none; }
.engine-feat strong {
    display: block;
    color: var(--ink);
    font-family: var(--display);
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 4px;
}

/* ----- Step 4 — Alerts & Reports ----- */
.p-card--alerts .alerts-viz {
    margin: 20px 28px 28px;
    padding: 22px 20px 20px;
    background: var(--bg-alt);
    border: 1px solid var(--rule);
}
.alerts-viz-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
.alerts-chart-label,
.alerts-side-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 10px;
}
.alerts-chart {
    width: 100%;
    height: 160px;
    display: block;
    background: var(--bg);
    border: 1px solid var(--rule);
}
.alerts-terminal {
    background: var(--bg);
    border: 1px solid var(--rule);
    padding: 10px 12px;
    height: 160px; min-height: 160px; max-height: 160px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink);
    overflow: hidden;
    display: flex; flex-direction: column;
}
.alerts-terminal-line {
    display: flex; align-items: center; gap: 8px;
    padding: 3px 0;
    white-space: nowrap;
}
.alerts-terminal-icon    { width: 10px; height: 10px; flex-shrink: 0; }
.alerts-terminal-badges  { display: flex; gap: 4px; margin-left: auto; flex-shrink: 0; }
.alerts-terminal-badge {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .08em;
    padding: 1px 5px;
    border: 1px solid var(--rule);
    color: var(--text);
    white-space: nowrap;
}
.alerts-terminal-badge--score {
    background: var(--alert-dim);
    color: var(--alert);
    border-color: rgba(var(--alert-rgb), .4);
}
.alerts-terminal-badge--ward  { border-color: var(--rule-strong); color: var(--mute); }
.alerts-terminal-cursor {
    display: inline-block;
    width: 5px; height: 10px;
    background: var(--alert);
    opacity: .8;
    animation: termBlink .8s step-end infinite;
}
@keyframes termBlink { 50% { opacity: 0; } }

/* ----- Step 5 — IPC Co-Pilot ----- */
.p-card--ipc .ipc-pipeline-viz {
    margin: 20px 28px 28px;
    padding: 28px 22px 24px;
    background: var(--bg-alt);
    border: 1px solid var(--rule);
    display: flex; flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.ipc-pipeline-viz::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(30, 30, 43, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 30, 43, .04) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}
.ipc-row {
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    position: relative; z-index: 1;
}
.ipc-section-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 10px;
    text-align: center;
    width: 100%; position: relative; z-index: 1;
}

/* Chat scene */
.ipc-chat-scene { display: flex; align-items: stretch; gap: 0; width: 100%; }
.ipc-avatar {
    display: flex; flex-direction: column; align-items: center;
    flex-shrink: 0; width: 60px; position: relative;
}
.ipc-avatar--expert { padding-top: 4px; }
.ipc-avatar--expert .ipc-avatar-label { position: absolute; top: 52px; }
.ipc-avatar--ai     { justify-content: flex-end; }
.ipc-avatar--ai     .ipc-avatar-label { position: absolute; bottom: -14px; }
.ipc-avatar-ring {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border: none;
    background: transparent;
    transition: border-color var(--t);
}
.ipc-avatar-icon        { width: 28px; height: 28px; stroke: var(--ink); }
.ipc-avatar-icon rect,
.ipc-avatar-icon circle,
.ipc-avatar-icon line,
.ipc-avatar-icon path   { stroke: var(--ink) !important; }
.ipc-avatar-icon [fill='#ff073a']    { fill: var(--ink) !important; }
.ipc-avatar-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute);
    margin-top: 5px;
    text-align: center;
    white-space: nowrap;
}

.ipc-bubble-area {
    flex: 1; height: 94px; min-height: 94px; max-height: 94px;
    padding: 4px 12px;
    display: flex; flex-direction: column; justify-content: space-between;
    overflow: hidden;
    position: relative;
}
.ipc-bubble {
    max-width: 85%;
    padding: 6px 12px;
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .02em;
    display: flex; align-items: center;
    animation: ipcBubbleIn .3s ease forwards;
    opacity: 0;
}
.ipc-bubble.exit {
    position: absolute; pointer-events: none;
    animation: ipcBubbleOut .2s ease forwards;
}
.ipc-bubble--expert { margin-right: auto; background: var(--bg); border: 1px solid var(--rule-strong); color: var(--text); }
.ipc-bubble--ai     { margin-left: auto;  background: var(--ink); border: 1px solid var(--ink); color: var(--bg); }
.ipc-bubble-cursor {
    display: inline-block;
    width: 5px; height: 10px;
    background: currentColor;
    opacity: .7;
    margin-left: 2px; vertical-align: middle;
    animation: termBlink .7s step-end infinite;
}
@keyframes ipcBubbleIn  { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ipcBubbleOut { to   { opacity: 0; } }

/* Vertical connectors between IPC rows */
.ipc-vconnector { display: flex; justify-content: center; padding: 6px 0; }
.ipc-vconnector svg { width: 20px; height: 32px; }
.ipc-vconnector--multi svg { height: 40px; }
.ipc-vconnector svg line    { stroke: var(--rule-strong) !important; stroke-dasharray: none !important; }
.ipc-vconnector svg polygon { fill: var(--ink) !important; opacity: 1 !important; }
.ipc-vconnector svg circle.ipc-vparticle { fill: var(--ink) !important; }
.ipc-vparticle { animation: ipcVParticle 2.4s linear infinite; }
@keyframes ipcVParticle {
    0%   { cy: 2; opacity: 0; }
    15%  { opacity: .8; }
    85%  { opacity: .8; }
    100% { cy: 32; opacity: 0; }
}

/* Scenario cards */
.ipc-scenarios-row { display: flex; gap: 8px; width: 100%; }
.ipc-scenario-card {
    flex: 1; min-width: 0;
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--rule);
    background: var(--bg);
    font-family: var(--mono);
    color: var(--text);
    transition: border-color var(--t), background var(--t);
}
.ipc-scenario-card.active { border-color: var(--ink); }
.ipc-sc-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ipc-sc-num  { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); font-weight: 500; }
.ipc-sc-title {
    font-family: var(--display);
    font-size: 11px; font-weight: 500; letter-spacing: .02em;
    color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 4px;
}
.ipc-sc-details { display: flex; flex-direction: column; gap: 2px; }
.ipc-sc-detail {
    font-size: 10px;
    color: var(--text);
    display: flex; justify-content: space-between; gap: 6px;
}
.ipc-sc-k      { color: var(--mute); text-transform: uppercase; letter-spacing: .1em; flex-shrink: 0; }
.ipc-sc-cursor {
    display: inline-block;
    width: 4px; height: .9em;
    background: var(--alert);
    margin-left: 1px; vertical-align: text-bottom;
    animation: ipcCursorBlink .5s step-end infinite;
}
@keyframes ipcCursorBlink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.ipc-sc-detail.editing { color: var(--alert); }

.ipc-scenario-dot {
    width: 8px; height: 8px;
    flex-shrink: 0; margin-top: 3px;
}
/* Scenario dot palette — ink + three neutral ward swatches */
.ipc-scenario-dot--blue   { background: var(--ward-a); }
.ipc-scenario-dot--purple { background: var(--ink); }
.ipc-scenario-dot--teal   { background: var(--ward-c); }
.ipc-scenario-dot--amber  { background: var(--ward-b); }

/* Simulation engine */
.ipc-engine-box {
    display: flex; align-items: center; justify-content: center;
    padding: 10px 22px;
    border: 1px solid var(--ink);
    background: var(--bg);
    position: relative;
    overflow: hidden;
    width: 100%; max-width: 380px;
    transition: background var(--t);
}
.ipc-engine-box.processing { background: var(--bg-tint); }
.ipc-engine-glow   { display: none; }
.ipc-engine-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: .2;
    pointer-events: none;
}
.ipc-engine-box.processing .ipc-engine-canvas { opacity: .35; }
.ipc-engine-content { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.ipc-engine-gears   { display: flex; align-items: center; }
.ipc-engine-icon {
    stroke: var(--ink) !important;
    flex-shrink: 0;
    animation: gearSpin 8s linear infinite;
}
.ipc-engine-icon--lg { width: 22px; height: 22px; }
.ipc-engine-icon--sm {
    width: 14px; height: 14px;
    margin-left: -4px;
    animation-direction: reverse;
    animation-duration: 5s;
}
.ipc-engine-box.processing .ipc-engine-icon      { animation-duration: 2s; }
.ipc-engine-box.processing .ipc-engine-icon--sm  { animation-duration: 1.4s; }
@keyframes gearSpin { to { transform: rotate(360deg); } }
.ipc-engine-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 500;
}

/* Spider plot */
.ipc-spider-container { display: flex; flex-direction: column; align-items: center; width: 100%; position: relative; z-index: 1; }
#ipc-spider-canvas     { width: 100%; max-width: 460px; height: 300px; }

/* Optimal callout */
.ipc-optimal {
    padding: 14px 16px 12px;
    border: 1px solid var(--ink);
    background: var(--bg);
    margin-top: 4px;
    position: relative;
    overflow: hidden;
    opacity: 0; transform: translateY(6px);
    animation: ipcOptimalReveal .6s 1.6s ease forwards;
}
.ipc-optimal::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--ink);
}
@keyframes ipcOptimalReveal { to { opacity: 1; transform: translateY(0); } }
.ipc-optimal-header {
    display: flex; align-items: center; gap: 10px;
    margin-left: 24px;
}
.ipc-optimal-icon {
    width: 18px; height: 18px;
    position: absolute; top: 12px; left: 14px;
}
.ipc-optimal-icon path { stroke: var(--ink) !important; fill: transparent !important; }
.ipc-optimal-badge {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--ink);
    padding: 2px 8px;
    font-weight: 500;
    flex-shrink: 0;
}
.ipc-optimal-title {
    font-family: var(--display);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--ink);
}
.ipc-optimal-metrics {
    display: flex;
    border-top: 1px solid var(--rule);
    margin-top: 4px;
}
.ipc-optimal-metric {
    flex: 1;
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 10px 12px;
    border-right: 1px solid var(--rule);
}
.ipc-optimal-metric:last-child { border-right: none; }
.ipc-optimal-metric-val {
    font-family: var(--display);
    font-size: 18px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -.02em;
}
.ipc-optimal-metric-label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute);
}

/* ========== 13. RESEARCH ========== */
#research {
    background: var(--bg);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.research-intro {
    max-width: 860px;
    color: var(--text);
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: -.005em;
    margin-bottom: var(--s-8);
}
.research-sub {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mute);
    font-weight: 400;
    margin-bottom: var(--s-3);
}

/* Timeline header — label + step-nav arrows */
.timeline-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    margin-bottom: var(--s-3);
}
.timeline-header .research-sub { margin-bottom: 0; }
.timeline-nav { display: flex; gap: 6px; flex-shrink: 0; }
.timeline-nav-btn {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg);
    border: 1px solid var(--rule-strong);
    color: var(--ink);
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), opacity var(--t-fast);
    -webkit-appearance: none; appearance: none;
}
.timeline-nav-btn:hover:not(:disabled),
.timeline-nav-btn:focus-visible:not(:disabled) {
    background: var(--ink); color: var(--bg); border-color: var(--ink); outline: none;
}
.timeline-nav-btn:disabled { opacity: .3; cursor: default; }

/* Timeline */
.timeline-wrapper { position: relative; margin-top: var(--s-1); }
.timeline-scroll {
    overflow-x: auto; overflow-y: visible;
    padding-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--rule-strong) transparent;
    -webkit-overflow-scrolling: touch;
}
.timeline-scroll::-webkit-scrollbar         { height: 4px; }
.timeline-scroll::-webkit-scrollbar-thumb   { background: var(--rule-strong); }

.timeline-track {
    display: flex; align-items: flex-end;
    position: relative;
    min-width: max-content;
    padding: 24px 40px 52px;
}
.timeline-track::before {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 58px;
    height: 1px;
    background: var(--rule);
}
.tl-milestone { display: flex; flex-direction: column; align-items: center; margin: 0 18px; position: relative; }
.tl-card {
    display: block;
    width: 196px;
    padding: 14px;
    background: var(--bg);
    border: 1px solid var(--rule);
    cursor: pointer;
    text-decoration: none; color: inherit;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.tl-milestone:hover .tl-card,
.tl-milestone:focus-within .tl-card {
    border-color: var(--ink);
    background: var(--bg-alt);
}
.tl-milestone:hover .tl-card--application,
.tl-milestone:focus-within .tl-card--application { border-color: var(--ward-a); }

.tl-card-top      { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
.tl-year-badge    {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    color: var(--ink);
}
.tl-type-badge {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 2px 6px;
    border: 1px solid var(--rule-strong);
    color: var(--mute);
    background: transparent;
}
.tl-type-method       { color: var(--ink);    border-color: var(--ink); }
.tl-type-application  { color: var(--ward-a); border-color: var(--ward-a); }

.tl-method {
    font-family: var(--display);
    font-weight: 500;
    font-size: 13px;
    color: var(--ink);
    line-height: 1.3;
    letter-spacing: -.01em;
    margin-bottom: 4px;
}
.tl-authors  { font-family: var(--mono); font-size: 10px; color: var(--mute); letter-spacing: .04em; margin-bottom: 10px; }
.tl-pathogens { display: flex; flex-wrap: wrap; gap: 4px; }
.tl-pathogen {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--mono);
    font-size: 10px;
    padding: 3px 7px;
    border: 1px solid var(--rule);
    color: var(--mute);
    line-height: 1.35;
    letter-spacing: .04em;
    max-width: 100%;
}
.tl-pathogen > span { min-width: 0; white-space: normal; word-break: break-word; }

.tl-connector { width: 1px; height: 18px; background: var(--rule); flex-shrink: 0; }
.tl-node {
    width: 11px; height: 11px;
    background: var(--bg);
    border: 1px solid var(--rule-strong);
    flex-shrink: 0; position: relative; z-index: 1;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.tl-milestone:hover .tl-node,
.tl-milestone:focus-within .tl-node { border-color: var(--ink);    background: var(--ink); }
.tl-milestone:hover .tl-node--application,
.tl-milestone:focus-within .tl-node--application { border-color: var(--ward-a); background: var(--ward-a); }

.timeline-detail {
    min-height: 120px;
    padding: 20px 24px;
    background: var(--bg-alt);
    border: 1px solid var(--rule);
    margin-top: 16px;
    display: flex; align-items: center;
    transition: border-color var(--t-fast);
}
.timeline-detail.active {
    border-color: var(--rule-strong);
    align-items: flex-start;
    flex-direction: column;
}
.tl-detail-hint {
    color: var(--mute);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .1em;
}
.tl-detail-header {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px;
    margin-bottom: 10px;
}
.tl-detail-method {
    font-family: var(--display);
    font-weight: 500;
    font-size: 18px;
    letter-spacing: -.01em;
    color: var(--ink);
}
.tl-detail-meta {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--mute);
}
.tl-detail-desc {
    color: var(--text);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 14px;
}
.tl-detail-pathogens { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-detail-pathogen {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px;
    border: 1px solid var(--rule);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--mute);
}

/* ========== 14. TEAM ========== */
#team {
    background: var(--bg-alt);
    border-bottom: 1px solid var(--rule);
}
.team-grid {
    display: grid;
    grid-template-columns: 1fr auto 2fr;
    gap: 0;
    margin-top: var(--s-6);
    align-items: start;
}
.team-group-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 20px;
}
.team-divider {
    width: 1px;
    background: var(--rule);
    align-self: stretch;
    margin: 0 var(--s-6);
}
.team-advisors-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
}
.team-card     { background: transparent; }
.team-photo {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.02);
    transition: filter var(--t);
}
.team-card:hover .team-photo { filter: grayscale(40%) contrast(1.02); }
.team-info { padding: 16px 0 0; }
.team-name {
    font-family: var(--display);
    font-weight: 500;
    font-size: 16px;
    color: var(--ink);
    letter-spacing: -.015em;
    margin-bottom: 4px;
}
.team-role {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 12px;
}
.team-bio {
    color: var(--text);
    font-size: 14px;
    line-height: 1.7;
}
.team-bio a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
.team-bio a:hover { color: var(--text); }

/* ========== 15. ROADMAP ========== */
#roadmap { background: var(--bg); }
.roadmap-intro {
    max-width: 860px;
    color: var(--text);
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: -.005em;
    margin-bottom: var(--s-8);
}
.roadmap-timeline {
    position: relative;
    display: flex; flex-direction: column;
    padding-left: 40px;
}
.roadmap-timeline::before {
    content: '';
    position: absolute; top: 0; bottom: 0; left: 16px;
    width: 1px;
    background: var(--rule-strong);
}
.roadmap-phase {
    position: relative;
    display: flex; align-items: flex-start;
    padding-bottom: var(--s-6);
}
.roadmap-phase:last-child                { padding-bottom: 0; }
.roadmap-phase:last-child .roadmap-line  { display: none; }
.roadmap-node {
    position: absolute; left: -36px; top: 6px;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
    background: var(--bg);
}
.roadmap-node-ring {
    width: 10px; height: 10px;
    background: var(--ink);
}
.roadmap-node-pulse, .roadmap-line { display: none; }

.roadmap-card {
    width: 100%;
    padding: 28px 32px;
    background: var(--bg-alt);
    border: 1px solid var(--rule);
    position: relative;
    overflow: hidden;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.roadmap-card:hover { border-color: var(--ink); }
.roadmap-phase-badge {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 14px;
}
.roadmap-card-title {
    font-family: var(--display);
    font-weight: 500;
    font-size: 22px;
    color: var(--ink);
    line-height: 1.25;
    letter-spacing: -.02em;
    margin-bottom: 12px;
}
.roadmap-card-desc {
    color: var(--text);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 20px;
}
.roadmap-card-tags {
    display: flex; flex-wrap: wrap;
    border-top: 1px solid var(--rule);
    padding-top: 16px;
}
.roadmap-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 12px 3px 0;
    margin-right: 12px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--mute);
}
.roadmap-tag:not(:last-child) { border-right: 1px solid var(--rule); }

/* ========== 16. CONTACT ========== */
#contact {
    background: var(--bg-ink);
    color: var(--inv);
}
#contact .section-tag { color: var(--inv-hi); }
#contact .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-12);
    align-items: start;
}
.contact-heading {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(2.4rem, 4.5vw, 3.5rem);
    color: var(--inv-hi);
    line-height: 1.04;
    letter-spacing: -.035em;
    margin-bottom: var(--s-3);
    max-width: 16ch;
}
.contact-sub {
    color: var(--inv);
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: -.005em;
    margin-bottom: var(--s-5);
    max-width: 640px;
}

.contact-form label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--inv-mute);
    display: block;
    margin-bottom: 8px;
}
.contact-form input,
.contact-form textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rule-inv-strong);
    padding: 12px 0;
    color: var(--inv-hi);
    font-family: var(--display);
    font-size: 16px;
    margin-bottom: var(--s-4);
    outline: none;
    transition: border-color var(--t-fast);
}
.contact-form input:focus,
.contact-form textarea:focus { border-bottom-color: var(--inv-hi); }
.contact-form textarea     { resize: vertical; min-height: 110px; }
.form-buttons               { display: flex; gap: 12px; margin-top: 12px; }

.contact-social {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 20px;
    margin-top: var(--s-1);
}
.contact-social-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--inv-mute);
    transition: color var(--t-fast);
}
.contact-social-link:hover { color: var(--inv-hi); }

/* ========== 17. FOOTER ========== */
footer {
    background: var(--bg-ink);
    color: var(--inv-mute);
    border-top: 1px solid var(--rule-inv);
    padding: 40px 0 32px;
}
.footer-inner {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 20px;
}
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-mark {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    color: var(--inv-hi);
}
.footer-mark svg { width: 100%; height: 100%; display: block; }

.footer-logo {
    font-family: var(--display);
    font-weight: 600;
    font-size: 16px;
    color: var(--inv-hi);
    letter-spacing: -.01em;
}
.footer-links {
    display: flex; gap: var(--s-3);
    list-style: none;
}
.footer-links a {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--inv-mute);
    transition: color var(--t-fast);
}
.footer-links a:hover { color: var(--inv-hi); }
.footer-copy {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--inv-mute);
}
.footer-credit {
    width: 100%;
    text-align: left;
    padding-top: var(--s-3);
    margin-top: var(--s-3);
    border-top: 1px solid var(--rule-inv);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .14em;
    line-height: 1.6;
    text-transform: uppercase;
    color: var(--inv-faint);
}

/* ========== 18. RESPONSIVE ========== */
@media (max-width: 1024px) {
    #contact .contact-grid { grid-template-columns: 1fr; gap: var(--s-6); }
    .about-layout          { grid-template-columns: 1fr; gap: var(--s-8); }
    .about-viz             { position: static; }
    #three-container       { height: 440px; }
    .team-grid             { grid-template-columns: 1fr; gap: 0; }
    .team-divider          { width: auto; height: 1px; margin: var(--s-5) 0; }
}
@media (max-width: 900px) {
    .pipeline-sources                 { grid-template-columns: 1fr; }
    .pipeline-sources .p-card         { border-right: none; border-bottom: 1px solid var(--rule); }
    .pipeline-sources .p-card:last-child { border-bottom: none; }
    .team-advisors-row                { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .nav-links { display: none; }
    .nav-links.open {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 72px; left: 0;
        width: 100%;
        background: var(--bg);
        padding: var(--s-4) var(--pad);
        gap: var(--s-3);
        border-bottom: 1px solid var(--rule);
    }
    body.nav-on-dark .nav-links.open {
        background: var(--bg-ink);
        border-bottom-color: var(--rule-inv);
    }
    .nav-hamburger                         { display: flex; }
    .about-stats                           { grid-template-columns: 1fr; border: 1px solid var(--rule); }
    .about-stat                            { border-right: none; border-bottom: 1px solid var(--rule); padding: var(--s-3) 20px; }
    .about-stat:last-child                 { border-bottom: none; }
    .alerts-viz-inner                      { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .p-card--alerts                        { padding: 20px 14px; }
    .p-card--alerts .alerts-viz            { margin: 16px 0 0; padding: 14px 12px 12px; }
    .alerts-chart                          { height: 140px; }
    .alerts-terminal                       { height: 170px; min-height: 170px; max-height: 170px; padding: 8px 10px; }
    .alerts-terminal-line                  { gap: 6px; padding: 2px 0; min-width: 0; }
    .alerts-terminal-text                  { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 9.5px; }
    .alerts-terminal-badges                { gap: 3px; }
    .alerts-terminal-badge                 { font-size: 8px; padding: 1px 4px; letter-spacing: .04em; }
    .tl-card                               { width: 176px; }
    .tl-milestone                          { margin: 0 10px; }
    .timeline-nav                          { display: none; }
    .team-advisors-row                     { grid-template-columns: 1fr; gap: var(--s-5); }
    .hero-title                            { font-size: clamp(2.4rem, 10vw, 4rem); }
    .section-padding                       { padding: var(--s-10) 0; }
    .demo-frame                            { padding: 10px; }
    .demo-rail                             { left: 10px; width: 64px; }
    .demo-bracket                          { width: 10px; height: 10px; }
    .demo-cta-row                          { margin-top: var(--s-3); }
    .demo-cta                              { font-size: 15px; }
    .playbar                               { padding: 0 8px; gap: 8px; }
    .playbar-tl                            { display: none; }
    .playbar-time                          { display: none; }
    .playbar-spd                           { padding: 5px 6px; }
    #three-container                       { height: 340px; }
    .engine-features                       { grid-template-columns: 1fr; border-top: 1px solid var(--rule); }
    .engine-feat                           { border-right: none; border-bottom: 1px solid var(--rule); }
    .engine-feat:last-child                { border-bottom: none; }
    .p-card--ipc                           { padding: 20px 14px; }
    .p-card--ipc .ipc-pipeline-viz         { margin: 16px 0 0; padding: 22px 12px 20px; }
    .ipc-scenarios-row                     { flex-wrap: wrap; gap: 6px; }
    .ipc-scenarios-row .ipc-scenario-card  { flex: 1 1 calc(50% - 3px); min-width: calc(50% - 3px); padding: 8px; gap: 6px; }
    .ipc-sc-title                          { font-size: 10px; white-space: normal; line-height: 1.2; }
    .ipc-sc-num                            { font-size: 8.5px; }
    .ipc-sc-details                        { display: none; }
    #ipc-spider-canvas                     { height: 260px; }
    .ipc-optimal                           { padding: 12px 12px; }
    .ipc-optimal-icon                      { width: 14px; height: 14px; top: 12px; left: 12px; }
    .ipc-optimal-header                    { margin-left: 22px; gap: 8px; flex-wrap: wrap; }
    .ipc-optimal-badge                     { font-size: 9px; letter-spacing: .1em; padding: 2px 6px; }
    .ipc-optimal-title                     { font-size: 12px; }
    .ipc-optimal-metrics                   { flex-wrap: wrap; border-top: 1px solid var(--rule); }
    .ipc-optimal-metric                    { flex: 1 1 50%; border-bottom: 1px solid var(--rule); padding: 10px; }
    .ipc-optimal-metric:nth-child(2n)      { border-right: none; }
    .ipc-optimal-metric:nth-last-child(-n+2) { border-bottom: none; }
    .ipc-optimal-metric-val                { font-size: 16px; }
    .ipc-optimal-metric-label              { font-size: 8.5px; letter-spacing: .1em; }
    .ipc-engine-box                        { max-width: 100%; padding: 10px 14px; }
    .ipc-engine-label                      { font-size: 10px; letter-spacing: .14em; }
    .ipc-avatar                            { width: 40px; }
    .ipc-avatar-ring                       { width: 36px; height: 36px; }
    .ipc-avatar-icon                       { width: 22px; height: 22px; }
    .ipc-avatar-label                      { font-size: 8px; letter-spacing: .04em; white-space: normal; line-height: 1.15; width: max-content; max-width: 64px; left: 50%; transform: translateX(-50%); }
    .ipc-avatar--expert .ipc-avatar-label  { top: 40px; }
    .ipc-avatar--ai .ipc-avatar-label      { bottom: -22px; }
    .ipc-bubble-area                       { padding: 4px 6px; }
    .ipc-bubble                            { max-width: 96%; font-size: 10px; padding: 5px 8px; letter-spacing: 0; line-height: 1.4; }
    .ipc-section-label                     { font-size: 9px; letter-spacing: .14em; }
    .p-card-canvas                         { height: 100px; }
    .p-card--engine .p-card-canvas         { height: 300px; }
}
@media (max-width: 480px) {
    .footer-inner  { flex-direction: column; align-items: flex-start; gap: 16px; }
    .footer-links  { flex-wrap: wrap; gap: 16px; }
}

/* ========== 19. REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}