@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:wght@300;400;500;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: none !important;
}

:root {
    /* NSE Final Palette (2026) */
    --bg: #070707;
    --surface: #0B0B0B;
    --surface2: #141414;
    --border: #272727;
    --text: #ffffff;
    --text-dim: #5a5a5a;

    /* Base Palette */
    --olo: #01FED7;
    --flux: #B4FF28;
    --sig: #FF3050;
    --null: #2E4FFF;
    --gray: #6B6B6B;
    --orange: #FF6B35;
    --purple: #9B59B6;
    --silver: #95A5A6;

    /* Semantic Mappings */
    --accent: var(--olo);
    --olo-dim: rgba(1, 254, 215, 0.4);
    --glow: rgba(1, 254, 215, 0.15);

    /* Category Colors — NSE Mapping (Unified Highlight Palette) */
    --gen: var(--olo);
    --proc: var(--olo);
    --mod: var(--olo);
    --seq: var(--olo);
    --ctrl: var(--olo);
    --nano: var(--gray);
    --util: var(--null);
    --accent2: var(--olo);

    /* Olo-Family (NSE 2026 Refinement) */
    --olo-light: #6DFFE9;
    --olo-dark: rgba(1, 254, 215, 0.1);
    --olo-glow: rgba(1, 254, 215, 0.25);

    /* Golden Ratio Design System (phi = 1.618) */
    --phi: 1.618;
    --phi-sm: 0.618;
    --phi-xs: 0.382;
    --phi-xxs: 0.236;

    /* Phi-based spacing */
    --space-xs: 0.382rem;
    /* phi^-2 */
    --space-sm: 0.618rem;
    /* phi^-1 */
    --space-md: 1rem;
    /* base */
    --space-lg: 1.618rem;
    /* phi */
    --space-xl: 2.618rem;
    /* phi^2 */

    /* Phi-based transitions */
    --ease-phi: cubic-bezier(0.19, 1, 0.22, 1);
    --t-fast: 0.1618s;
    --t-base: 0.309s;
    --t-slow: 0.618s;
    --t-reveal: 1.618s;

    /* Shadow Scale */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);

    /* Exit Easing */
    --ease-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* Glassmorphism Tokens */
    --glass-bg: rgba(7, 7, 7, 0.75);
    --glass-blur: blur(32px) saturate(160%);
    --glass-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    --glass-glow: 0 8px 32px rgba(0, 0, 0, 0.4);

    /* Typography */
    --font-display: "JetBrains Mono", "SF Mono", "Menlo", monospace;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    text-rendering: optimizeLegibility;
    letter-spacing: 0.012em;
    /* Top Island Layout Base */
    display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 400;
}

/* Grain Texture Overlay — disabled for cleaner look */

/* Micro-Animations Class */
.reveal {
    opacity: 0;
    transform: translateY(20px);
}

.reveal.visible {
    animation: fade-in-up 0.8s var(--ease-phi) forwards;
}

@keyframes fade-in-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

a {
    color: var(--olo-dim);
    text-decoration: none;
    display: inline;
    background-image: linear-gradient(var(--olo), var(--olo));
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 0 0.5px;
    transition: background-size var(--t-base) ease, color var(--t-fast) ease;
}

a:hover {
    color: var(--olo);
    background-size: 100% 0.5px;
    text-shadow: 0 0 10px rgba(1, 254, 215, 0.4);
}

/* ----- LAYOUT ----- */
.page-wrapper {
    display: flex;
    flex-direction: column;
    width: 100vw;
    min-height: 100vh;
    align-items: center;
    background: radial-gradient(circle at 50% -20%, rgba(1, 254, 215, 0.05), transparent 70%);
}

/* ----- SIDEBAR NAVIGATION ----- */
nav {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    height: 48px;
    z-index: 1000;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 12px;
    box-shadow: var(--glass-glow);
    width: max-content;
    max-width: 95vw;
}

/* ----- SYMBIONT brand identity — nav logo ----- */
.nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    white-space: nowrap;
    flex-shrink: 0;
    padding-right: 20px;
    padding-left: 12px;
    margin-right: 12px;
    border-right: 0.5px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: opacity var(--t-fast) var(--ease-phi);
}

.nav-logo:hover {
    opacity: 0.618;
}

/* ----- Left-margin vertical wordmark ----- */
/* Hidden below 1100px where the side margin is too narrow */
.brand-axis {
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: opacity 0.25s ease;
}

.brand-axis:hover {
    opacity: 0.5;
}

.brand-axis .brand-rule {
    width: 0.5px;
    height: 36px;
    background: linear-gradient(to bottom, transparent, rgba(1, 254, 215, 0.25), transparent);
    flex-shrink: 0;
}

.brand-axis .brand-name {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 300;
    letter-spacing: 0.55em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}

.brand-axis .brand-ver {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-display);
    font-size: 0.58rem;
    font-weight: 300;
    letter-spacing: 0.4em;
    color: rgba(1, 254, 215, 0.7);
    white-space: nowrap;
}

/* default state: very faint */
.brand-axis {
    opacity: 0.2;
    mix-blend-mode: exclusion;
}

.mobile-nav-toggle,
.mobile-menu-backdrop {
    display: none;
}

@media(max-width: 1100px) {
    .brand-axis {
        display: none;
    }
}

/* ----- Viewport fade vignette — hides adjacent sections ----- */
/* Fixed overlays sit below the nav (z-index 1000) but above content (z-index 800).
   pointer-events: none ensures clicks/scrolls pass through to the content. */
.fade-top,
.fade-bottom {
    position: fixed;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 800;
}

.fade-top {
    top: 0;
    height: 140px;
    background: linear-gradient(to bottom,
            #070707 0%,
            rgba(7, 7, 7, 0.7) 50%,
            transparent 100%);
}

.fade-bottom {
    bottom: 0;
    height: 180px;
    background: linear-gradient(to top,
            #070707 0%,
            rgba(7, 7, 7, 0.75) 45%,
            transparent 100%);
}

nav ul {
    display: flex;
    flex-direction: row;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    /* must NOT be auto/scroll — creates scroll container that clips dropdown pointer events */
}

nav ul::-webkit-scrollbar {
    display: none;
}

nav li a {
    display: block;
    padding: 4px 10px;
    color: var(--text-dim);
    opacity: 0.5;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: all var(--t-fast) var(--ease-phi);
    border-radius: 0;
    border: 0.5px solid transparent;
    white-space: nowrap;
    background-image: none;
}

nav li a:hover,
nav li a.active {
    color: var(--olo);
    opacity: 1;
    background: rgba(1, 254, 215, 0.08);
    border-color: rgba(1, 254, 215, 0.2);
    text-decoration: none;
    background-image: none;
}

/* ----- MAIN CONTENT ----- */
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100vw;
    padding-bottom: 120px;
    margin-top: 80px;
    /* Offset for floating island nav */
}

.hero {
    width: 100%;
    min-height: 100vh;
    padding: 80px 40px 200px;
    border-bottom: 0.5px solid var(--border);
    margin-bottom: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.hero::before {
    content: '';
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(1, 254, 215, 0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.hero > * {
    position: relative;
    z-index: 1;
}

@keyframes hero-reveal {
    from {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
    }

    to {
        clip-path: inset(0 0% 0 0);
        opacity: 1;
    }
}

.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    font-weight: 300;
    letter-spacing: 0.2em;
    margin-bottom: 40px;
    text-transform: uppercase;
    color: var(--accent);
    filter: drop-shadow(0 0 40px rgba(1, 254, 215, 0.2));
    animation: hero-reveal 1.4s var(--ease-phi) 0.2s both;
}

.hero .sub {
    color: var(--text-dim);
    font-size: clamp(0.78rem, 1.5vw, 0.9rem);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    animation: fade-in-up 1s var(--ease-phi) 0.5s both;
    opacity: 0.7;
}

.hero .ver {
    display: inline-block;
    background: rgba(1, 254, 215, 0.1);
    color: var(--text);
    padding: 4px 16px;
    border: 0.5px solid var(--text);
    border-radius: 12px;
    font-size: 0.82rem;
    letter-spacing: 0.2em;
    margin-top: 48px;
    font-family: var(--font-display);
    animation: fade-in-up 1s var(--ease-phi) 0.8s both;
    box-shadow: 0 0 20px rgba(1, 254, 215, 0.1);
}

.tag-deprecated {
    font-size: 0.92rem;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 0.5px solid var(--border);
    color: var(--text-dim);
    border-radius: 4px;
    letter-spacing: 0.1em;
    font-weight: 500;
    margin-left: 8px;
    vertical-align: middle;
}

.container {
    width: 100%;
    max-width: 900px;
    padding: 0;
}

section {
    padding: 160px 40px 160px;
    /* nav: top 24px + height 54px = 78px. scroll-margin adds ~12px breathing room */
    scroll-margin-top: 90px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Introduction section — centered full-height landing */
.section-intro {
    margin-bottom: 80px;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Prose-heavy sections with tighter bottom margin */
.section-prose {
    margin-bottom: 80px;
}

section h2 {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    font-weight: 300;
    margin-bottom: 48px;
    color: var(--text);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    display: flex;
    padding-bottom: 24px;
    position: relative;
    overflow: hidden;
}

section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 48px;
    height: 1.5px;
    background: var(--olo);
    box-shadow: 0 0 12px var(--olo-dim);
}

section h2 span {
    font-size: 0.95rem;
    opacity: 0.5;
}

section h3 {
    font-size: 0.92rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 64px 0 28px;
    color: var(--text);
}

/* Manifesto / profile subsection headings */
section h3.manifesto-heading {
    margin-top: 56px;
    padding-top: 32px;
    border-top: 0.5px solid rgba(255, 255, 255, 0.04);
}

section h3.manifesto-heading:first-of-type {
    border-top: none;
    padding-top: 0;
}

section h4 {
    font-size: 0.92rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 32px 0 16px;
    color: var(--text-dim);
}

/* Timeline sub-headings in profile section */
section h4.timeline-mark {
    margin-top: 44px;
    opacity: 0.45;
    font-weight: 300;
    letter-spacing: 0.12em;
    font-size: 0.82rem;
    color: var(--olo-dim);
    border: none;
}

p.section-desc {
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.0618em;
    margin-bottom: 40px;
    line-height: 1.75;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    opacity: 0.9;
}

.arch-diagram {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 40px;
    margin: 24px 0;
    overflow-x: auto;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.2);
}

.arch-diagram svg {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    display: block
}

.arch-diagram svg text {
    font-family: Inter, system-ui, sans-serif
}

.arch-diagram svg .node-box {
    rx: 8;
    ry: 8;
    stroke-width: 1.5;
    transition: all .3s;
    cursor: pointer
}

.arch-diagram svg .node-box:hover {
    stroke-width: 2;
}

.arch-diagram svg .flow-arrow {
    stroke-width: 2;
    marker-end: url(#arrowhead)
}

.arch-diagram svg .label {
    font-size: 11px;
    fill: var(--text-dim);
    font-weight: 500
}

.arch-diagram svg .title {
    font-size: 13px;
    fill: var(--text);
    font-weight: 700
}

/* === Global Table Styles === */
section table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 16px 0;
    font-size: 0.82rem;
    line-height: 1.6;
}

section th {
    text-align: left;
    color: var(--text-dim);
    font-weight: 500;
    font-size: 0.92rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
}

section td {
    padding: 5px 12px;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.03);
    color: var(--text-dim);
    vertical-align: top;
}

section td:first-child {
    color: var(--text);
    font-family: var(--font-display);
    font-size: 0.82rem;
    white-space: nowrap;
}

section tr:last-child td {
    border-bottom: none;
}

section tr:hover td {
    background: rgba(1, 254, 215, 0.03);
}

.signal-flow {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 20px 0;
    flex-wrap: wrap;
    justify-content: center
}

.sf-node {
    background: rgba(255, 255, 255, 0.02);
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    padding: 1px 6px;
    font-weight: 400;
    font-size: 0.82rem;
    font-family: var(--font-display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: all var(--t-base) var(--ease-phi);
    cursor: default;
    text-align: center;
    min-width: auto;
}

.sf-node.gen,
.sf-node.proc,
.sf-node.mod {
    border-color: var(--olo-dim);
    color: var(--olo-dim);
}

.sf-node.gen:hover,
.sf-node.proc:hover,
.sf-node.gen:hover,
.sf-node.proc:hover,
.sf-node.mod:hover,
.sf-node.seq:hover,
.sf-node.ctrl:hover {
    border-color: var(--olo-light);
    color: var(--olo-light);
    background: var(--olo-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--olo-glow);
}

.sf-node.util {
    border-color: var(--util);
    color: var(--util)
}

.sf-node.util:hover {
    border-color: #5C77FF;
    /* Slightly lighter null blue */
    color: #5C77FF;
    background: rgba(46, 79, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(46, 79, 255, 0.2);
}


.sf-node.nano:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.sf-vertical {
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.sf-row {
    display: flex;
    align-items: center;
    gap: 0;
}

.sf-mod-row {
    display: flex;
    gap: 48px;
    margin-top: 4px;
}

.sf-mod-source {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.sf-cv-label {
    color: var(--mod);
    font-size: 0.82rem;
    font-family: var(--font-display);
}

.sf-cv-labels {
    display: flex;
    gap: 16px;
    color: var(--mod);
    font-size: 0.82rem;
    font-family: var(--font-display);
}

.sf-arrow {
    color: var(--text-dim);
    font-size: 0.92rem;
    padding: 0 6px;
    line-height: 1
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 32px;
    margin: 32px 0 16px;
}

/* Pricing card variant */
.card.card-pricing {
    padding: 28px 24px;
    text-align: center;
}

.card.card-pricing h4 {
    margin-bottom: 8px;
}

.card.card-pricing h4.price {
    font-size: 1.2rem;
    color: var(--accent);
}

/* Card grid variants for manifesto sections */
.card-grid.grid-md {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    margin-top: 24px;
}

.card-grid.grid-sm {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-top: 24px;
}

.card-grid.grid-narrow {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin: 24px 0 40px;
}

/* ----- CARD (Philosophy / QuickStart pattern cards) ----- */
.card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 40px 36px;
    transition: all 0.4s var(--ease-phi);
    cursor: default;
    box-shadow: var(--shadow-sm);
}

.card:hover {
    border-color: var(--olo-dim) !important;
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg), 0 0 40px rgba(1, 254, 215, 0.04);
}

.card .cat {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 500;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.card .cat::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

.card h4 {
    font-size: 0.92rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--text);
    margin: 0 0 20px 0;
}

.card .desc {
    font-size: 0.92rem;
    color: var(--text-dim);
    line-height: 1.9;
    opacity: 0.85;
}

.card .desc strong {
    color: var(--text);
    font-weight: 500;
    opacity: 1;
}

/* ----- Node Layout ----- */
.node-split-container {
    margin-top: 40px;
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    box-sizing: border-box;
}

.node-details {
    width: 100%;
    min-width: 0;
    padding-bottom: 120px;
}

/* ===== Contextual Per-Section Dropdowns =====
   5 independent nav items (Gen/Proc/Mod/Ctrl/Con).
   Each li.nav-section-item uses position:relative → its dropdown
   is positioned directly below it.
   JS hover + 200ms close-delay handles the gap robustly.
   nav ul overflow:visible (above) is critical — auto/scroll creates a
   scroll-container that clips pointer-events on the dropdown. */

.nav-section-item {
    position: relative;
}

.nav-section-item>a {
    display: flex;
    align-items: center;
    gap: 3px;
}

.nav-section-item>a::after {
    content: '▾';
    font-size: 0.58em;
    opacity: 0.35;
    display: inline-block;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.nav-section-item.open>a::after,
.nav-section-item.section-active>a::after {
    transform: rotate(180deg);
    opacity: 0.7;
}

/* Dropdown panel */
.nav-section-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 0.5px solid rgba(255, 255, 255, 0.05);
    border-radius: 0;
    padding: 8px 0;
    min-width: 128px;
    box-shadow: none;
    list-style: none;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-fast) var(--ease-phi), transform var(--t-fast) var(--ease-phi);
    z-index: 1010;
    white-space: nowrap;
}

/* 3-level navigation: Nodes dropdown */
.nav-nodes {
    display: grid;
    grid-template-columns: repeat(7, auto);
    gap: 0;
    min-width: auto;
    padding: 8px 4px;
}

.nav-category {
    position: relative;
    margin: 0;
}

.nav-category>a {
    display: block;
    padding: 4px 10px;
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--text-dim);
    opacity: 0.6;
    text-decoration: none;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 0;
    transition: all var(--t-fast) var(--ease-phi);
    background-image: none;
}

.nav-category>a .count {
    font-size: 0.88rem;
    opacity: 0.5;
    margin-left: 2px;
}

.nav-category>a:hover {
    background: rgba(1, 254, 215, 0.08);
    color: var(--olo);
    opacity: 1;
}

/* Category colors on hover */
.nav-category[data-cat="gen"]>a:hover {
    color: var(--gen);
}

.nav-category[data-cat="proc"]>a:hover {
    color: var(--proc);
}

.nav-category[data-cat="mod"]>a:hover {
    color: var(--mod);
}

.nav-category[data-cat="seq"]>a:hover {
    color: var(--seq);
}

/* Category item styles */
.nav-category a {
    padding: 4px 10px;
}

/* Invisible hover bridge — covers the gap between nav and dropdown */
.nav-section-dropdown::before {
    content: '';
    position: absolute;
    top: -14px;
    left: -12px;
    right: -12px;
    height: 14px;
}

.nav-section-item.open .nav-section-dropdown,
.nav-section-item.section-active .nav-section-dropdown,
.nav-section-item.open .nav-nodes {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Section-active for Nodes */
.nav-section-item[data-cat="nodes"].section-active>a {
    color: var(--accent);
    background: rgba(1, 254, 215, 0.08);
    border-color: rgba(1, 254, 215, 0.2);
}

/* Individual Node Detail Card */
.node-detail-card {
    background: transparent;
    border-top: 0.5px solid rgba(255, 255, 255, 0.04);
    padding: 52px 0;
    scroll-margin-top: 116px;
    /* matches section — nav 78px + 38px breathing */
}

/* First card doesn't need top border */
.node-detail-card:first-child {
    border-top: none;
    padding-top: 0;
}

.node-detail-card .header-area {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
}

.node-detail-card .cat {
    font-size: 0.82rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.node-detail-card .cat::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background: var(--accent);
    border-radius: 50%;
}

/* Category color variants — dot + text color */
.node-detail-card .cat.gen,
.card .cat.gen {
    color: var(--gen);
}

.node-detail-card .cat.gen::before,
.card .cat.gen::before {
    background: var(--gen);
    box-shadow: none;
}

.node-detail-card .cat.proc,
.card .cat.proc {
    color: var(--proc);
}

.node-detail-card .cat.proc::before,
.card .cat.proc::before {
    background: var(--proc);
    box-shadow: none;
}

.node-detail-card .cat.mod,
.card .cat.mod {
    color: var(--mod);
}

.node-detail-card .cat.mod::before,
.card .cat.mod::before {
    background: var(--mod);
    box-shadow: none;
}

.node-detail-card .cat.seq,
.card .cat.seq {
    color: var(--seq);
}

.node-detail-card .cat.seq::before,
.card .cat.seq::before {
    background: var(--seq);
    box-shadow: none;
}

.node-detail-card .cat.ctrl,
.card .cat.ctrl {
    color: var(--ctrl);
}

.node-detail-card .cat.ctrl::before,
.card .cat.ctrl::before {
    background: var(--ctrl);
    box-shadow: none;
}

.node-detail-card .cat.nano,
.card .cat.nano {
    color: var(--nano);
}

.node-detail-card .cat.nano::before,
.card .cat.nano::before {
    background: var(--nano);
    box-shadow: none;
}

.node-detail-card .cat.util,
.card .cat.util {
    color: var(--util);
}

.node-detail-card .cat.util::before,
.card .cat.util::before {
    background: var(--util);
    box-shadow: none;
}

/* Unified node detail card top border tint */
.node-detail-card {
    border-top: 1px solid rgba(1, 254, 215, 0.15);
}

.node-detail-card:has(.cat.nano),
.node-detail-card:has(.cat.util) {
    border-top-color: rgba(90, 90, 90, 0.15);
}

.node-detail-card .desc {
    color: var(--text-dim);
    font-size: 0.88rem;
    letter-spacing: 0.05em;
    margin-bottom: 48px;
    line-height: 1.85;
    max-width: 100%;
}

.node-detail-card .ports {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.node-detail-card .port {
    font-family: var(--font-display);
    font-size: 9.5px;
    padding: 3px 9px;
    border-radius: 3px;
    background: transparent;
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    color: var(--text-dim);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    align-items: center;
    gap: 4px;
}

.node-detail-card .port:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(1, 254, 215, 0.1);
}

.node-detail-card .port.in,
.node-detail-card .port.out,
.node-detail-card .port.cv,
.node-detail-card .port.gate {
    border-color: var(--olo-dim);
    color: var(--olo-dim);
    background: rgba(1, 254, 215, 0.02);
}

.node-detail-card .port.in:hover,
.node-detail-card .port.out:hover,
.node-detail-card .port.cv:hover,
.node-detail-card .port.gate:hover {
    border-color: var(--olo);
    color: var(--olo);
    background: rgba(1, 254, 215, 0.05);
}

.node-detail-card .port.util,
.node-detail-card .port.nano {
    border-color: var(--gray);
    color: var(--gray);
    background: rgba(255, 255, 255, 0.02);
}

.node-detail-card .port.clock,
.node-detail-card .port.sig {
    border-color: var(--olo);
    color: var(--olo);
    background: rgba(1, 254, 215, 0.08);
    box-shadow: 0 0 10px rgba(1, 254, 215, 0.1);
}

/* High-energy parameter highlight — Olo based */
.sig-highlight {
    color: var(--olo) !important;
    font-weight: 600;
}

.sig-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--olo);
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 8px var(--olo);
}

.node-detail-card .node-extended,
.node-detail-card .params-detail,
.node-detail-card .content-body {
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height var(--t-base) var(--ease-out), opacity var(--t-fast) var(--ease-out), margin var(--t-fast) var(--ease-out);
}

.node-detail-card.open .node-extended,
.node-detail-card.open .params-detail,
.node-detail-card.open .content-body {
    max-height: 5000px;
    opacity: 1;
    margin-top: 32px;
    transition: max-height var(--t-slow) var(--ease-phi), opacity var(--t-base) var(--ease-phi) 0.05s, margin var(--t-base) var(--ease-phi);
}

/* Content Body - for Advanced Features section */
.content-body {
    color: var(--text-dim);
    font-size: 0.92rem;
    line-height: 1.85;
}

.content-body p {
    margin-bottom: 20px;
}

.content-body ul {
    padding-left: 24px;
    margin: 16px 0 24px;
}

.content-body li {
    margin-bottom: 12px;
    line-height: 1.8;
}

.content-body li strong {
    color: var(--text);
}

.content-body code {
    font-family: var(--font-display);
    font-size: 0.78em;
    color: var(--accent);
    background: rgba(1, 254, 215, 0.08);
    padding: 1px 5px;
    border-radius: 2px;
}

/* Feature Block - sub-sections within content-body */
.feature-block {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 0.5px solid var(--border);
}

.feature-block h4 {
    font-size: 0.88rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 16px;
    color: var(--text);
}

.feature-block p {
    margin-bottom: 16px;
}

.feature-block ul {
    margin-top: 12px;
}

.feature-block li {
    margin-bottom: 10px;
}

.feature-block code {
    background: rgba(1, 254, 215, 0.1);
    padding: 2px 6px;
    border: 0.5px solid rgba(1, 254, 215, 0.2);
}

.node-detail-card .node-section {
    margin-bottom: 40px;
}

.node-detail-card .node-section h5 {
    font-size: 0.82rem;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.node-detail-card .node-section p {
    font-size: 0.88rem;
    color: var(--text-dim);
    line-height: 1.9;
    max-width: 880px;
}

.node-detail-card .node-section p strong {
    color: var(--text);
    font-weight: 500;
}

.node-detail-card table {
    width: 100%;
    max-width: 880px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.92rem;
    margin: 16px 0 32px;
    background: transparent;
    border: 0.5px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    overflow: hidden;
}

.node-detail-card th {
    text-align: left;
    color: var(--text-dim);
    padding: 8px 16px;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.05);
    font-weight: 400;
    font-size: 0.92rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.015);
}

.node-detail-card td {
    padding: 8px 16px;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.03);
    color: var(--text-dim);
    font-size: 0.92rem;
    line-height: 1.8;
}

.node-detail-card tr:last-child td {
    border-bottom: none;
}

.node-detail-card tr:hover td {
    background: rgba(1, 254, 215, 0.04);
}

.tip {
    background: rgba(255, 255, 255, 0.01);
    border-left: 2px solid var(--accent);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 22px 24px;
    margin: 36px 0 8px;
    font-size: 0.92rem;
    line-height: 1.8;
    color: var(--text-dim);
    backdrop-filter: var(--glass-blur);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tip::before {
    content: 'TIP';
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--accent);
    margin-right: 8px;
    padding: 2px 6px;
    border: 1px solid rgba(1, 254, 215, 0.3);
    border-radius: 4px;
    vertical-align: middle;
}

/* Inline code */
:not(pre)>code {
    font-family: var(--font-display);
    font-size: 0.8em;
    color: var(--accent);
    background: rgba(1, 254, 215, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(1, 254, 215, 0.15);
}

/* Reset code inside pre blocks */
pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

.mm-flow {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0
}

.mm-layer {
    display: flex;
    align-items: center;
    gap: 16px;
    background: transparent;
    border: 0.5px solid var(--border);
    border-radius: 0px;
    padding: 12px 16px;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    transition: all 0.2s ease;
}

.mm-layer:hover {
    border-color: rgba(255, 255, 255, 0.08);
    border-left-color: var(--text);
    background: rgba(220, 220, 240, 0.03);
}

.card.expanded {
    grid-column: 1 / -1;
    background: var(--surface2);
    border-color: rgba(255, 255, 255, 0.12);
}

.mm-layer .info h4 {
    font-size: 0.92rem;
    margin-bottom: 2px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--text);
}

.mm-layer .info p {
    font-size: 0.92rem;
    color: var(--text-dim)
}

.mm-layer .thread {
    font-size: 0.88rem;
    padding: 2px 6px;
    border: 0.5px solid;
    border-radius: 0px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.mm-layer .thread.rt {
    background: transparent;
    border-color: #e74c3c;
    color: #e74c3c
}

.mm-layer .thread.ui {
    background: transparent;
    border-color: #3498db;
    color: #3498db
}

/* ----- TERMINAL CODE BLOCKS ----- */
pre {
    background: rgba(7, 7, 7, 0.6);
    border: 0.5px solid var(--border);
    border-radius: 0px;
    padding: 32px 20px 20px;
    overflow-x: auto;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text-dim);
    margin: 16px 0;
    position: relative;
    backdrop-filter: blur(10px);
}

pre::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 14px 0 0 rgba(255, 255, 255, 0.1), 28px 0 0 rgba(255, 255, 255, 0.05);
}

code .kw {
    color: var(--olo);
    opacity: 0.9;
}

code .fn {
    color: var(--text);
    opacity: 0.8;
}

code .str {
    color: #c3e88d
}

code .num {
    color: #f78c6c
}

code .cmt {
    color: #546e7a;
    font-style: italic;
}

.qs-steps {
    counter-reset: qs;
    margin: 32px 0;
}

.qs-step {
    display: flex;
    gap: 24px;
    padding: 28px 0;
    align-items: flex-start;
    border-bottom: 0.5px solid var(--border);
}

.qs-steps>.qs-step:first-child {
    padding-top: 4px;
}

.qs-steps>.qs-step:last-child {
    border-bottom: none;
}

.qs-step::before {
    counter-increment: qs;
    content: counter(qs);
    background: rgba(1, 254, 215, 0.05);
    color: var(--accent);
    border: 1px solid rgba(1, 254, 215, 0.3);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.88rem;
    font-family: var(--font-display);
    flex-shrink: 0;
    margin-top: 2px;
}

.qs-step .content {
    flex: 1
}

.qs-step .content h4 {
    margin-bottom: 10px;
    font-size: 0.88rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text);
}

.qs-step .content p {
    color: var(--text-dim);
    font-size: 0.88rem;
    line-height: 1.85;
}

.qs-step .content p code {
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.92rem;
}

/* UI Layout Panel diagram */
.ui-layout {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 6px;
    margin: 28px 0;
    min-height: 180px;
}

.ui-panel {
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 5px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.018);
}

.ui-panel.full-width {
    grid-column: 1 / -1;
}

.ui-panel-label {
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-dim);
    margin-bottom: 6px;
    opacity: 0.7;
}

.ui-panel-title {
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--text);
    margin-bottom: 6px;
}

.ui-panel-desc {
    font-size: 0.92rem;
    color: var(--text-dim);
    line-height: 1.7;
}

.ui-panel.panel-browser { border-color: rgba(1, 254, 215, 0.15); }
.ui-panel.panel-wireview { border-color: rgba(255, 255, 255, 0.12); }
.ui-panel.panel-inspector { border-color: rgba(159, 122, 234, 0.18); }
.ui-panel.panel-controlbar { border-color: rgba(255, 255, 255, 0.06); }

/* Concept signal types */
.concept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin: 20px 0;
}

.concept-item {
    border: 0.5px solid rgba(255, 255, 255, 0.07);
    border-radius: 5px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.015);
}

.concept-item .concept-type {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: 6px;
    font-weight: 500;
}

.concept-item p {
    font-size: 0.82rem;
    color: var(--text-dim);
    line-height: 1.65;
    margin: 0;
}

/* Keyboard Shortcut grid */
.shortcut-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 6px;
    margin: 20px 0;
}

.shortcut-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border: 0.5px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.shortcut-item kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    min-width: 28px;
    background: rgba(255, 255, 255, 0.06);
    border: 0.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    font-size: 0.88rem;
    font-family: var(--font-display);
    color: var(--text);
    white-space: nowrap;
    flex-shrink: 0;
}

.shortcut-item .shortcut-desc {
    font-size: 0.82rem;
    color: var(--text-dim);
    line-height: 1.45;
}

/* Specs grid */
.specs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    margin: 28px 0;
}

.spec {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 14px 16px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.spec::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.spec:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

.spec .val {
    font-size: 1.3rem;
    font-weight: 200;
    color: var(--accent);
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 4px;
}

.spec .lbl {
    font-size: 0.88rem;
    color: var(--text-dim);
    margin-top: 6px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.6;
    overflow-wrap: break-word;
    word-break: break-all;
}

/* Port type cards — 3-column grid */
.port-types {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 24px 0 52px;
}

/* Tables inside #specs section (RT-Safety, Tuning) */
#specs table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.88rem;
    margin: 24px 0 52px;
    background: rgba(9, 9, 11, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
}

#specs th {
    text-align: left;
    color: var(--text);
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-weight: 500;
    font-size: 0.88rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.02);
}

#specs td {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    color: var(--text-dim);
    line-height: 1.75;
    vertical-align: top;
}

#specs tr:last-child td {
    border-bottom: none;
}

#specs td:first-child {
    color: var(--text);
    white-space: nowrap;
    font-weight: 400;
    letter-spacing: 0.04em;
    width: 28%;
}

.algo-list {
    margin: 6px 0;
    font-size: 0.82rem;
    color: var(--text-dim);
    font-family: var(--font-display);
}

/* Enum Grid */
.enum-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 24px 0 48px;
}

@media(max-width: 880px) {
    .enum-grid {
        grid-template-columns: 1fr;
    }
}

.enum-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 14px 18px;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.2s ease;
    color: var(--text-dim);
}

.enum-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text);
}

.enum-item code {
    background: rgba(0, 206, 201, 0.1);
    color: var(--accent);
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 0.92rem;
    font-family: var(--font-display);
    border: 1px solid rgba(0, 206, 201, 0.2);
}

.algo-list li {
    margin: 3px 0;
    break-inside: avoid
}

.algo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin: 8px 0;
}

.algo-category {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

.algo-category h6 {
    margin: 0 0 5px;
    font-size: 0.92rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-dim);
    opacity: 0.6;
}

.algo-items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.algo-tag {
    display: inline-block;
    padding: 1px 6px;
    background: transparent;
    border-radius: 3px;
    font-size: 0.82rem;
    font-family: var(--font-display);
    color: var(--text-dim);
    border: 0.5px solid rgba(255,255,255,0.1);
}

.algo-tag.simd {
    background: transparent;
    border: 1px solid rgba(1, 254, 215, 0.3);
    color: var(--accent);
    font-weight: 400;
}

.algo-tag:hover {
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--text);
}

.algo-tag.simd:hover {
    border-color: var(--olo);
    background: rgba(1, 254, 215, 0.05);
}

.attractor-grid {
    margin-top: 12px;
}

.arch-diagram {
    margin: 16px 0;
}

.arch-layer {
    display: flex;
    align-items: stretch;
    gap: 16px;
    flex-wrap: wrap;
}

.arch-box {
    flex: 1;
    min-width: 200px;
    padding: 16px;
    border-radius: 8px;
}

.arch-box.ui {
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 2px solid var(--mod);
}

.arch-box.rt {
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 2px solid var(--gen);
}

.arch-box:hover {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.arch-box h4 {
    margin: 0 0 8px;
    font-size: 0.92rem;
}

.arch-box ul {
    margin: 0;
    padding-left: 16px;
    font-size: 0.92rem;
    color: var(--text-dim);
}

.arch-arrow {
    display: flex;
    align-items: center;
    color: var(--accent);
    font-size: 0.88rem;
    font-weight: 600;
}

.simd-stats {
    margin: 16px 0;
}

.progress-bar {
    background: rgba(255, 255, 255, 0.05);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}

.feature-card strong {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.feature-card p {
    margin: 0;
    line-height: 1.4;
}

footer {
    width: 100%;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px 40px 160px;
    color: var(--text-dim);
    font-size: 0.88rem;
    border-top: 0.5px solid var(--border);
    margin-top: 120px;
}

footer::before {
    content: '';
    display: block;
    width: 200px;
    height: 0.5px;
    background: var(--border);
    margin: 0 auto var(--space-xl);
}

footer .credits-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 64px;
}

footer .credits-orgs {
    display: flex;
    gap: 80px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 72px;
}

footer .credits-org {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

footer .credits-org .org-name {
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text);
}

footer .credits-org .org-desc {
    font-size: 0.88rem;
    color: var(--text-dim);
    letter-spacing: 0.05em;
}

footer .credits-meta {
    font-size: 0.82rem;
    color: var(--text-dim);
    letter-spacing: 0.08em;
    line-height: 1.8;
    opacity: 0.7;
    margin-top: 40px;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px
}

::-webkit-scrollbar-track {
    background: var(--bg)
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px
}

/* (Duplicate section h2 removed — defined at L454) */

/* === Utility Classes (Inline Style Removal) === */

/* Text utilities */
.accent {
    color: var(--accent);
}

.muted {
    color: var(--text-dim);
}

.gen {
    color: var(--gen);
}

.proc {
    color: var(--proc);
}

.mod {
    color: var(--mod);
}

.sig {
    color: var(--olo);
}

.gen-text {
    color: var(--olo);
}

.mod-text {
    color: var(--olo);
}

.sig-text {
    color: var(--olo);
}

/* Section marker (⬡) */
.marker {
    color: var(--olo-dim);
    transition: color var(--t-base) ease;
}

section:hover .marker,
.marker:hover {
    color: var(--olo);
}

/* Description text */
.desc {
    font-size: 0.9rem;
    margin: 8px 0 0;
    color: var(--text-dim);
    line-height: 1.6;
}

/* Grid utilities */
.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.grid-auto-sm {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.flex-1 {
    flex: 1;
}

/* Feature card */
.feature-simple {
    padding: 16px 0;
    border-top: 0.5px solid var(--border);
}

/* Attractor card */
.attractor-simple {
    padding: 8px 0;
    border-top: 0.5px solid var(--border);
}

.attractor-desc {
    font-size: 0.92rem;
    color: var(--text-dim);
}

.chaos-attractors {
    margin-top: 24px;
}

/* Progress bar thin */
.progress-thin {
    background: var(--border);
    height: 2px;
    overflow: hidden;
}

.progress-thin .fill {
    background: var(--accent);
    height: 100%;
}

/* RT rules box */
.rt-rules {
    margin: 16px 0;
}

.rt-rules h4 {
    margin: 0 0 12px;
    color: var(--text);
}

.rt-rules h4+h4 {
    margin: 16px 0 12px;
}

.rt-rules ul {
    columns: 2;
    column-gap: 32px;
    margin: 0;
    padding-left: 20px;
    font-size: 0.88rem;
    color: var(--text-dim);
}

/* SIMD progress section */
.simd-section {
    margin: 16px 0;
}

.simd-section .progress-wrap {
    margin-bottom: 16px;
}

.simd-section .spec .val {
    color: var(--text);
}

/* Algo category */
.algo-category h6 {
    margin: 0 0 8px;
    font-size: 0.88rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.algo-category .gen-text {
    color: var(--gen);
}

.algo-category .mod-text {
    color: var(--mod);
}

.algo-category .muted {
    color: var(--text-dim);
}

.algo-note {
    font-size: 0.92rem;
    margin-top: 8px;
}

.algo-tag-inline {
    display: inline;
    padding: 2px 6px;
    margin-right: 8px;
}

/* (Duplicate section h2 accent removed — consolidated into main rule) */

/* === Phase 2: SVG Symbol System === */
.sym {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    flex-shrink: 0;
}

.sym-sm {
    width: 22px;
    height: 22px;
    vertical-align: -3px;
    margin-right: 6px;
}

.sym-lg {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.sym-xl {
    width: 28px;
    height: 28px;
    vertical-align: middle;
}

/* mm-layer icon — flex center for SVG */
.mm-layer .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
}

section h2 .sym {
    width: 1.2em;
    height: 1.2em;
    color: var(--text-dim);
    vertical-align: -0.15em;
}

.section-gen h2 .sym,
#gen>h2 .sym {
    color: var(--gen);
}

.section-proc h2 .sym,
#proc>h2 .sym {
    color: var(--proc);
}

.section-mod h2 .sym,
#modul>h2 .sym {
    color: var(--mod);
}

.section-seq h2 .sym,
#ctrl>h2 .sym {
    color: var(--seq);
}

.section-util h2 .sym,
#console>h2 .sym {
    color: var(--util);
}


/* === Collapsible Node Sections === */
.node-section[data-collapsed="true"]>*:not(h5) {
    display: none;
}

.node-section h5 {
    cursor: pointer;
    user-select: none;
}

.toggle {
    background: none;
    border: 0.5px solid var(--border);
    color: var(--text-dim);
    width: 18px;
    height: 18px;
    font-size: 0.88rem;
    cursor: pointer;
    border-radius: 2px;
    margin-left: 8px;
    transition: all 0.2s ease;
    vertical-align: middle;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.toggle:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* === Scroll-to-Top Button === */
#scroll-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 24px;
    height: 24px;
    background: var(--surface2);
    border: 0.5px solid var(--border);
    color: var(--text-dim);
    cursor: pointer;
    opacity: 0;
    transition: all var(--t-base) ease;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    pointer-events: none;
}

#scroll-top.visible {
    opacity: 1;
    pointer-events: auto;
}

#scroll-top:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* === Scroll Progress Bar === */
#progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: var(--accent);
    z-index: 9999;
    transition: width 0.1s linear;
    opacity: 0.6;
    width: 0%;
    box-shadow: 0 0 8px var(--glow);
}

/* === Custom Cursor (shared DNA: ASL + JEMAPUR) === */
.cursor-dot {
    position: fixed;
    width: 5px;
    height: 5px;
    background: var(--accent);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 10000;
    left: 50%;
    top: 50%;
    transition: opacity var(--t-base);
}

.cursor-ring {
    position: fixed;
    width: 16px;
    height: 16px;
    border: 0.5px solid rgba(255, 255, 255, 0.618);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 10001;
    left: 50%;
    top: 50%;
    transition: opacity var(--t-base), width var(--t-fast), height var(--t-fast);
}

@media (hover: none),
(max-width: 768px) {

    .cursor-dot,
    .cursor-ring {
        display: none;
    }

    * {
        cursor: auto !important;
    }
}

/* === Section Backgrounds — disabled for cleaner look === */

/* === Typography Tweaks === */
.node-detail-card h3 {
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    font-weight: 350;
    letter-spacing: 0.05em;
    color: var(--text);
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.node-detail-card h3::after {
    content: '+';
    margin-left: 12px;
    font-size: 0.88rem;
    font-weight: 300;
    color: var(--text-dim);
    opacity: 0.5;
    transition: color var(--t-fast) ease, opacity var(--t-fast) ease;
    display: inline-block;
}

.node-detail-card:hover h3 {
    color: var(--olo-light);
}

.node-detail-card:hover h3::after {
    color: var(--olo-dim);
    opacity: 0.8;
}

.node-detail-card.open h3::after {
    content: '\2212';
    color: var(--accent);
    opacity: 1;
}

p.section-desc {
    line-height: 1.9;
}

.node-detail-card td {
    line-height: 1.6;
}

@media (max-width: 768px) {
    .port-types {
        grid-template-columns: 1fr;
    }

    .container {
        padding: 0 20px;
    }

    .node-detail-card .desc {
        font-size: 0.92rem;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 1.3rem;
        letter-spacing: 0.1em;
    }

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

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

@media(max-width: 900px) {

    /* ═══════════════════════════════════════════════════════════════
       MOBILE OPTIMIZATION — iPhone First
       ═══════════════════════════════════════════════════════════════ */

    /* ----- Safe Area Support (iPhone X+) ----- */
    body {
        padding-top: env(safe-area-inset-top, 0);
        padding-bottom: env(safe-area-inset-bottom, 0);
        padding-left: env(safe-area-inset-left, 0);
        padding-right: env(safe-area-inset-right, 0);
    }

    /* ----- Global Mobile Typography ----- */
    body {
        font-size: 15px;
        line-height: 1.7;
        letter-spacing: 0.01em;
    }

    /* ----- Hero Section ----- */
    .hero {
        min-height: 100vh;
        padding: calc(100px + env(safe-area-inset-top, 0)) 24px 80px;
        margin-bottom: 0;
    }

    .hero h1 {
        font-size: 1.2rem;
        letter-spacing: 0.15em;
        margin-bottom: 24px;
    }

    .hero .sub {
        font-size: 0.82rem;
        letter-spacing: 0.25em;
    }

    .hero .ver {
        font-size: 0.92rem;
        padding: 6px 14px;
        margin-top: 32px;
    }

    /* ----- Container & Sections ----- */
    .container {
        padding: 0 28px;
    }

    /* Force container visible on mobile — IntersectionObserver reveal
       is unreliable for this large wrapper on touch devices */
    .container.reveal {
        opacity: 1;
        transform: none;
        animation: none;
    }

    main {
        margin-top: 0;
        padding-bottom: 80px;
    }

    section {
        padding: 100px 0;
        scroll-margin-top: 24px;
    }

    section h2 {
        font-size: 1rem;
        margin-bottom: 36px;
        padding-bottom: 14px;
        letter-spacing: 0.12em;
    }

    section h3 {
        font-size: 0.88rem;
        margin: 44px 0 20px;
        letter-spacing: 0.08em;
    }

    p.section-desc {
        font-size: 0.88rem;
        line-height: 1.9;
        margin-bottom: 36px;
        text-align: left;
    }

    /* ----- Cards ----- */
    .card {
        padding: 32px 28px;
        border-radius: 4px;
    }

    .card h4 {
        font-size: 0.92rem;
        margin-bottom: 16px;
    }

    .card .desc {
        font-size: 0.82rem;
        line-height: 1.9;
    }

    .card-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 28px;
    }

    /* ----- Node Detail Cards ----- */
    .node-detail-card {
        padding: 48px 0;
        scroll-margin-top: 24px;
        border-top: 0.5px solid rgba(255, 255, 255, 0.06);
    }

    .node-detail-card:first-child {
        border-top: none;
        padding-top: 0;
    }

    .node-detail-card .cat {
        font-size: 0.82rem;
        letter-spacing: 0.2em;
        margin-bottom: 10px;
    }

    .node-detail-card h3 {
        font-size: 0.95rem;
        letter-spacing: 0.04em;
    }

    .node-detail-card .desc {
        font-size: 0.88rem;
        line-height: 1.9;
        margin-bottom: 36px;
    }

    .node-detail-card .ports {
        gap: 8px;
        margin-bottom: 36px;
        flex-wrap: wrap;
    }

    .node-detail-card .port {
        font-size: 0.82rem;
        padding: 4px 10px;
    }

    /* Node section (expandable content) */
    .node-detail-card .node-section {
        margin-bottom: 48px;
    }

    .node-detail-card .node-section h5 {
        font-size: 0.82rem;
        margin-bottom: 18px;
        letter-spacing: 0.1em;
    }

    .node-detail-card .node-section p {
        font-size: 0.88rem;
        line-height: 1.85;
    }

    .node-detail-card table {
        font-size: 0.82rem;
        margin: 24px 0 36px;
    }

    .node-detail-card th,
    .node-detail-card td {
        padding: 14px 18px;
    }

    /* ----- Advanced Features Section ----- */
    #advanced .node-detail-card {
        padding-top: 36px;
    }

    #advanced .node-detail-card .content-body {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        margin-top: 0;
        transition: max-height 0.4s var(--ease-phi), opacity 0.3s ease, margin 0.3s ease;
    }

    #advanced .node-detail-card.open .content-body {
        max-height: 5000px;
        opacity: 1;
        margin-top: 20px;
    }

    .content-body {
        font-size: 0.88rem;
        line-height: 1.85;
        color: var(--text-dim);
    }

    .content-body p {
        margin-bottom: 18px;
    }

    .content-body ul {
        padding-left: 22px;
        margin: 14px 0 22px;
    }

    .content-body li {
        margin-bottom: 12px;
        line-height: 1.8;
    }

    .content-body strong {
        color: var(--text);
        font-weight: 500;
    }

    .content-body code {
        font-size: 0.82rem;
        padding: 2px 5px;
    }

    .feature-block {
        margin-top: 28px;
        padding-top: 24px;
        border-top: 0.5px solid var(--border);
    }

    .feature-block h4 {
        font-size: 0.82rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        margin-bottom: 14px;
        color: var(--text);
    }

    .feature-block p {
        margin-bottom: 14px;
    }

    .feature-block ul {
        margin-top: 10px;
    }

    .feature-block code {
        font-size: 0.88rem;
        padding: 2px 6px;
        background: rgba(1, 254, 215, 0.1);
        border: 0.5px solid rgba(1, 254, 215, 0.2);
    }

    .feature-block code {
        background: rgba(1, 254, 215, 0.08);
        padding: 1px 5px;
        border-radius: 2px;
        font-family: var(--font-display);
        font-size: 0.88rem;
        color: var(--accent);
    }

    .node-detail-card .cat {
        font-size: 0.92rem;
        letter-spacing: 0.2em;
    }

    .node-detail-card h3 {
        font-size: 1rem;
        letter-spacing: 0.04em;
    }

    .node-detail-card .desc {
        font-size: 0.82rem;
        line-height: 1.85;
        margin-bottom: 40px;
    }

    .node-detail-card .ports {
        gap: 8px;
        margin-bottom: 40px;
    }

    .node-detail-card .port {
        font-size: 0.92rem;
        padding: 5px 10px;
    }

    .node-detail-card .node-section h5 {
        font-size: 0.92rem;
        margin-bottom: 20px;
    }

    .node-detail-card .node-section p {
        font-size: 0.88rem;
        line-height: 1.85;
    }

    .node-detail-card table {
        font-size: 0.82rem;
        margin: 24px 0 40px;
    }

    .node-detail-card th,
    .node-detail-card td {
        padding: 14px 16px;
    }

    /* ----- Specs Grid ----- */
    .specs {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin: 24px 0;
    }

    .spec {
        padding: 10px 12px;
    }

    .spec .val {
        font-size: 1.3em;
    }

    .spec .lbl {
        font-size: 0.65rem;
        margin-top: 5px;
    }

    /* ----- MM Flow ----- */
    .mm-layer {
        padding: 14px 16px;
        gap: 12px;
    }

    .mm-layer .info h4 {
        font-size: 0.88rem;
    }

    .mm-layer .info p {
        font-size: 0.82rem;
    }

    /* ----- Code Blocks ----- */
    pre {
        padding: 24px 16px 16px;
        font-size: 0.92rem;
        line-height: 1.6;
        margin: 12px 0;
        border-radius: 8px;
    }

    /* ----- Tips ----- */
    .tip {
        padding: 18px 20px;
        font-size: 0.82rem;
        margin: 24px 0;
    }

    /* ----- Quick Start Steps ----- */
    .qs-step {
        padding: 20px 0;
        gap: 16px;
    }

    .qs-step::before {
        width: 28px;
        height: 28px;
        font-size: 0.82rem;
    }

    .qs-step .content h4 {
        font-size: 0.82rem;
        margin-bottom: 8px;
    }

    .qs-step .content p {
        font-size: 0.92rem;
    }

    /* ----- Footer ----- */
    footer {
        padding: 80px 24px calc(60px + env(safe-area-inset-bottom, 0));
        min-height: auto;
    }

    footer .credits-title {
        font-size: 1.1rem;
        margin-bottom: 40px;
    }

    footer .credits-orgs {
        gap: 40px;
        margin-bottom: 48px;
    }

    footer .credits-org .org-name {
        font-size: 0.88rem;
    }

    footer .credits-org .org-desc {
        font-size: 0.82rem;
    }

    footer .credits-meta {
        font-size: 0.92rem;
    }

    /* ----- Architecture Diagram ----- */
    .arch-diagram {
        padding: 20px 12px;
        margin: 16px 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .arch-diagram svg {
        min-width: 600px;
    }

    /* ----- Signal Flow ----- */
    .signal-flow {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
        margin: 16px 0;
        padding: 0 8px;
    }

    .sf-node {
        min-width: 50px;
        max-width: 80px;
        padding: 6px 8px;
        font-size: 0.82rem;
        flex: 0 0 auto;
    }

    .sf-node .sym-sm {
        width: 16px;
        height: 16px;
        margin-right: 4px;
    }

    .sf-arrow {
        font-size: 0.9rem;
        padding: 0 2px;
    }

    /* ----- Scroll Top Button ----- */
    #scroll-top {
        bottom: calc(24px + env(safe-area-inset-bottom, 0));
        right: 20px;
        width: 24px;
        height: 24px;
        font-size: 0.6rem;
    }

    /* ----- Progress Bar ----- */
    #progress {
        height: 2px;
    }

    /* ----- Fade Edges ----- */
    .fade-top {
        height: 100px;
    }

    .fade-bottom {
        height: 120px;
    }

    /* ═══════════════════════════════════════════════════════════════
       MOBILE NAVIGATION
       ═══════════════════════════════════════════════════════════════ */

    /* ----- Mobile Toggle (Hamburger) ----- */
    .mobile-nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 3px;
        position: fixed;
        top: calc(16px + env(safe-area-inset-top, 0));
        right: 16px;
        width: 24px;
        height: 24px;
        background: rgba(7, 7, 7, 0.85);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 0.5px solid rgba(1, 254, 215, 0.3);
        border-radius: 0;
        z-index: 2000;
        cursor: pointer;
        transition: all 0.3s var(--ease-phi);
    }

    .mobile-nav-toggle .bar {
        width: 12px;
        height: 1px;
        background-color: var(--accent);
        border-radius: 1px;
        transition: all 0.3s var(--ease-phi);
    }

    .mobile-nav-toggle.active {
        background: var(--accent);
        border-color: var(--accent);
    }

    .mobile-nav-toggle.active .bar {
        background-color: var(--bg);
    }

    .mobile-nav-toggle.active .bar:nth-child(1) {
        transform: translateY(4px) rotate(45deg);
    }

    .mobile-nav-toggle.active .bar:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .mobile-nav-toggle.active .bar:nth-child(3) {
        transform: translateY(-4px) rotate(-45deg);
    }

    /* ----- Mobile Menu Backdrop ----- */
    .mobile-menu-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        z-index: 1400;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--t-base) var(--ease-phi);
    }

    .mobile-menu-backdrop.active {
        opacity: 1;
        pointer-events: auto;
    }

    .nav-logo {
        position: static;
        font-size: 1rem;
        letter-spacing: 0.25em;
        opacity: 0.9;
        margin-bottom: 56px;
        padding: 0;
        border: none;
        margin-right: 0;
        display: block;
        text-align: center;
    }

    /* ----- Sidebar Nav (Slide from Left) ----- */
    nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        width: 100dvw;
        height: 100vh;
        height: 100dvh;
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border-right: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: calc(40px + env(safe-area-inset-top, 0)) 0 calc(40px + env(safe-area-inset-bottom, 0));
        z-index: 1500;
        transform: translateX(-100%);
        transition: transform var(--t-slow) var(--ease-phi);
        border-radius: 0;
        box-shadow: none;
    }

    nav.active {
        transform: translateX(0);
    }

    nav ul {
        flex-direction: column;
        gap: 0;
        padding: 0;
        width: 100%;
        max-width: 320px;
        max-height: 70vh;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    nav li {
        width: 100%;
    }

    nav li a {
        padding: 18px 28px;
        font-size: 0.82rem;
        letter-spacing: 0.1em;
        border-radius: 0;
        border: none;
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.04);
        opacity: 0.7;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        transition: all var(--t-base) var(--ease-phi);
    }

    nav li a.active,
    nav li a:active {
        opacity: 1;
        background: rgba(1, 254, 215, 0.1);
        color: var(--olo);
    }


    /* ----- Accordion Logic ----- */
    .nav-section-item>a::after {
        display: inline-block !important;
        transition: transform var(--t-base) var(--ease-phi);
    }

    .nav-section-item.open>a::after {
        transform: rotate(180deg);
    }

    .nav-section-item.open>a {
        opacity: 1;
        color: var(--accent);
    }

    /* Dropdowns as accordions */
    .nav-section-dropdown,
    .nav-nodes {
        position: static !important;
        display: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        width: 100% !important;
        background: rgba(255, 255, 255, 0.02) !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .nav-section-item.open>.nav-section-dropdown {
        display: block !important;
    }

    .nav-nodes {
        display: none !important;
        grid-template-columns: 1fr !important;
    }

    .nav-section-item.open>.nav-nodes {
        display: block !important;
    }

    .nav-category {
        width: 100%;
    }

    .nav-category>a {
        padding: 14px 28px 14px 40px;
        font-size: 0.82rem;
        letter-spacing: 0.08em;
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.02);
    }

    .nav-category-dropdown {
        position: static !important;
        display: none !important;
    }

    /* ----- Algorithm List Mobile Fix ----- */
    .algo-list {
        columns: 1 !important;
        column-gap: 0 !important;
    }

    .algo-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .node-details {
        padding-bottom: 40px;
    }

    /* ----- Tables ----- */
    .node-detail-card table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #specs table {
        font-size: 0.82rem;
    }

    #specs th,
    #specs td {
        padding: 12px 14px;
    }

    /* ----- Inline Code ----- */
    :not(pre)>code {
        font-size: 0.78em;
        padding: 2px 5px;
    }

    /* ----- Hide Desktop-only Elements ----- */
    .brand-axis {
        display: none;
    }
}

/* ----- Small Screen Adjustments (< 375px) ----- */
@media(max-width: 374px) {
    .hero h1 {
        font-size: 1.1rem;
    }

    section h2 {
        font-size: 0.92rem;
    }

    nav li a {
        padding: 16px 20px;
        font-size: 0.88rem;
    }

    .sf-node {
        min-width: 45px;
        max-width: 70px;
        font-size: 0.88rem;
        padding: 5px 6px;
    }

    .sf-arrow {
        font-size: 0.88rem;
    }

    .content-body {
        font-size: 0.92rem;
    }

    .feature-block h4 {
        font-size: 0.92rem;
    }
}

/* ----- ACCESSIBILITY ----- */
:focus-visible {
    outline: 1.5px solid var(--olo-dim);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ── Profile Overlay ── */
.profile-trigger-wrap {
    text-align: center;
    padding: 32px 0 80px;
}

.profile-trigger {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    color: var(--text-dim);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.4s, border-color 0.4s;
    font-family: inherit;
    padding: 10px 28px;
}

.profile-trigger:hover {
    opacity: 0.85;
    border-color: rgba(255, 255, 255, 0.15);
}

/* Fullscreen overlay with vignette focus */
.profile-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(8, 8, 10, 0.97);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s;
    -webkit-overflow-scrolling: touch;
}

.profile-overlay::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(
        ellipse 50% 45% at 50% 50%,
        transparent 0%,
        rgba(5, 5, 7, 0.35) 60%,
        rgba(5, 5, 7, 0.75) 100%
    );
}

.profile-overlay.active {
    opacity: 1;
    visibility: visible;
}

.profile-close {
    position: fixed;
    top: 20px;
    right: 28px;
    z-index: 10002;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0.2;
    transition: opacity 0.4s;
    font-family: inherit;
    line-height: 1;
}

.profile-close:hover {
    opacity: 0.45;
}

.profile-overlay-inner {
    position: relative;
    z-index: 2;
    max-width: 680px;
    margin: 0 auto;
    padding: 100px 32px 120px;
}

/* Minimal but readable text */
.profile-overlay-inner .section-desc {
    font-size: 0.7rem;
    line-height: 2.1;
    letter-spacing: 0.04em;
    color: rgba(190, 190, 195, 0.38);
    margin-bottom: 2em;
    font-weight: 300;
}

.profile-overlay-inner .timeline-mark {
    font-size: 0.62rem;
    letter-spacing: 0.25em;
    color: rgba(190, 190, 195, 0.28);
    text-transform: uppercase;
    margin: 3.5em 0 1.5em;
    font-weight: 400;
}

/* Reveal animation per paragraph */
.profile-overlay.active .section-desc,
.profile-overlay.active .timeline-mark {
    animation: profileFadeIn 1.6s ease-out both;
}

.profile-overlay.active .section-desc:nth-child(1) { animation-delay: 0.2s; }
.profile-overlay.active .section-desc:nth-child(2) { animation-delay: 0.35s; }
.profile-overlay.active .section-desc:nth-child(3) { animation-delay: 0.5s; }
.profile-overlay.active .timeline-mark:nth-of-type(1) { animation-delay: 0.6s; }
.profile-overlay.active .section-desc:nth-child(5) { animation-delay: 0.7s; }
.profile-overlay.active .section-desc:nth-child(6) { animation-delay: 0.85s; }

@keyframes profileFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}