/* === Reset === */
            *,
            *::before,
            *::after {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            /* === Design Tokens === */
            :root {
                --bg: #050507;
                --surface: #0d0d12;
                --elevated: #16161d;
                --border: #1e1e2a;
                --text: #e8e8ec;
                --text-sec: #8e8e9a;
                --text-dim: #6b6b76;
                --accent: #3b82f6;
                --accent-hover: #2563eb;
                --accent-glow: rgba(59, 130, 246, 0.15);
                --accent-glow-strong: rgba(59, 130, 246, 0.35);
                --green: #22c55e;
                --purple: #a855f7;
                --amber: #f59e0b;
                --cyan: #06b6d4;
                --pink: #ec4899;
                --emerald: #10b981;
                --orange: #f97316;
                --red: #ef4444;
                --font-sans:
                    "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
                --font-body:
                    "Instrument Sans", -apple-system, BlinkMacSystemFont,
                    sans-serif;
                --font-mono:
                    "JetBrains Mono", "SF Mono", SFMono-Regular, ui-monospace,
                    monospace;
            }

            html {
                font-size: 16px;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                -webkit-text-size-adjust: 100%;
                text-size-adjust: 100%;
                scroll-behavior: smooth;
                scroll-padding-top: 80px;
                color-scheme: dark;
            }
            section[id] {
                scroll-margin-top: 80px;
            }
            body {
                background: var(--bg);
                color: var(--text);
                font-family: var(--font-body);
                overflow-x: hidden;
            }

            /* === Typography === */
            h1,
            h2,
            h3 {
                font-family: var(--font-sans);
                font-weight: 700;
                letter-spacing: -0.03em;
                line-height: 1.1;
            }
            a {
                color: var(--accent);
                text-decoration: none;
            }
            a:hover {
                color: var(--accent-hover);
            }

            /* === Navigation === */
            .nav {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                z-index: 100;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 1rem 2rem;
                background: transparent;
                transition:
                    background 0.3s,
                    border-color 0.3s,
                    backdrop-filter 0.3s;
                border-bottom: 1px solid transparent;
            }
            .nav.scrolled {
                background: rgba(5, 5, 7, 0.85);
                backdrop-filter: blur(16px);
                -webkit-backdrop-filter: blur(16px);
                border-bottom-color: var(--border);
            }
            .nav-logo {
                display: flex;
                align-items: center;
                gap: 10px;
                text-decoration: none;
                color: var(--text);
            }
            .nav-logo svg {
                width: 32px;
                height: 32px;
            }
            .nav-logo span {
                font-family: var(--font-sans);
                font-size: 1.15rem;
                font-weight: 700;
                letter-spacing: -0.02em;
            }
            .nav-logo .xp {
                color: var(--accent);
            }
            .nav-links {
                display: flex;
                gap: 2rem;
            }
            .nav-links a {
                color: var(--text-sec);
                font-family: var(--font-sans);
                font-size: 0.85rem;
                font-weight: 400;
                letter-spacing: 0.02em;
                text-decoration: none;
                transition: color 0.2s;
            }
            .nav-links a:hover {
                color: var(--text);
            }
            .nav-cta {
                padding: 8px 20px;
                background: var(--accent);
                color: #fff;
                border-radius: 8px;
                font-family: var(--font-sans);
                font-size: 0.85rem;
                font-weight: 600;
                text-decoration: none;
                transition:
                    background 0.2s,
                    box-shadow 0.2s;
            }
            .nav-cta:hover {
                background: var(--accent-hover);
                box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
                color: #fff;
            }

            /* === Scroll Animations === */
            .sr {
                opacity: 0;
                transform: translateY(30px);
                transition:
                    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
            }
            .sr.visible {
                opacity: 1;
                transform: translateY(0);
            }
            .sr-d1 {
                transition-delay: 0.1s;
            }
            .sr-d2 {
                transition-delay: 0.2s;
            }
            .sr-d3 {
                transition-delay: 0.3s;
            }
            .sr-d4 {
                transition-delay: 0.4s;
            }

            /* === Ambient Background === */
            .ambient {
                position: fixed;
                inset: 0;
                pointer-events: none;
                z-index: 0;
                overflow: hidden;
            }
            .ambient-glow {
                position: absolute;
                width: 900px;
                height: 900px;
                top: -350px;
                left: 50%;
                transform: translateX(-50%);
                background: radial-gradient(
                    circle,
                    var(--accent-glow) 0%,
                    transparent 70%
                );
                animation: glow-pulse 8s ease-in-out infinite alternate;
            }
            @keyframes glow-pulse {
                0% {
                    opacity: 0.4;
                    transform: translateX(-50%) scale(1);
                }
                100% {
                    opacity: 0.7;
                    transform: translateX(-50%) scale(1.15);
                }
            }
            .ambient-grid {
                position: absolute;
                inset: 0;
                background-image:
                    linear-gradient(
                        rgba(59, 130, 246, 0.03) 1px,
                        transparent 1px
                    ),
                    linear-gradient(
                        90deg,
                        rgba(59, 130, 246, 0.03) 1px,
                        transparent 1px
                    );
                background-size: 60px 60px;
                mask-image: radial-gradient(
                    ellipse 60% 50% at 50% 0%,
                    black 0%,
                    transparent 100%
                );
                -webkit-mask-image: radial-gradient(
                    ellipse 60% 50% at 50% 0%,
                    black 0%,
                    transparent 100%
                );
            }

            /* === Section Common === */
            .section {
                position: relative;
                z-index: 1;
                padding: 8rem 2rem;
                max-width: 1200px;
                margin: 0 auto;
            }
            .section-narrow {
                max-width: 800px;
            }
            .section-label {
                font-family: var(--font-mono);
                font-size: 0.75rem;
                color: var(--accent);
                text-transform: uppercase;
                letter-spacing: 0.15em;
                margin-bottom: 1rem;
            }
            .section-heading {
                font-size: clamp(2rem, 5vw, 3.2rem);
                margin-bottom: 1rem;
                color: var(--text);
                text-wrap: balance;
            }
            .section-sub {
                font-size: clamp(1rem, 2.5vw, 1.15rem);
                color: var(--text-sec);
                line-height: 1.7;
                max-width: 640px;
            }

            /* === Hero === */
            .hero {
                position: relative;
                z-index: 1;
                min-height: 100vh;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                padding: 8rem 2rem 6rem;
            }
            .hero-badge {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 6px 16px;
                border: 1px solid var(--border);
                border-radius: 999px;
                font-family: var(--font-mono);
                font-size: 0.75rem;
                color: var(--text-sec);
                margin-bottom: 2rem;
                background: rgba(13, 13, 18, 0.6);
                backdrop-filter: blur(8px);
            }
            .hero-badge .dot {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: var(--green);
                animation: dot-blink 2s ease-in-out infinite;
            }
            @keyframes dot-blink {
                0%,
                100% {
                    opacity: 1;
                }
                50% {
                    opacity: 0.3;
                }
            }
            .hero-logo {
                width: clamp(56px, 12vw, 80px);
                height: auto;
                margin-bottom: 1.5rem;
                transition: transform 0.4s ease;
            }
            .hero-logo:hover {
                transform: scale(1.08) rotate(3deg);
            }
            .hero h1 {
                font-size: clamp(3rem, 8vw, 5.5rem);
                font-weight: 700;
                letter-spacing: -0.04em;
                line-height: 1;
                margin-bottom: 0.3em;
            }
            .hero h1 .light {
                font-weight: 300;
            }
            .hero h1 .xp {
                color: var(--accent);
            }
            .hero-tagline {
                font-family: var(--font-sans);
                font-size: clamp(1.1rem, 3vw, 1.5rem);
                color: #fff;
                font-weight: 200;
                letter-spacing: 0.12em;
                text-transform: uppercase;
                margin-bottom: 1.5rem;
                min-height: 1.6em;
                transition: opacity 0.8s ease;
            }
            .hero-sub {
                font-size: clamp(1rem, 2.5vw, 1.15rem);
                color: var(--text-sec);
                line-height: 1.7;
                max-width: 600px;
                margin: 0 auto 2.5rem;
            }
            .hero-ctas {
                display: flex;
                gap: 1rem;
                flex-wrap: wrap;
                justify-content: center;
            }
            .btn {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 14px 28px;
                border-radius: 10px;
                font-family: var(--font-sans);
                font-size: 0.95rem;
                font-weight: 600;
                text-decoration: none;
                transition: all 0.25s;
                cursor: pointer;
            }
            .btn-primary {
                background: var(--accent);
                color: #fff;
                border: 1px solid var(--accent);
            }
            .btn-primary:hover {
                background: var(--accent-hover);
                box-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
                color: #fff;
            }
            .btn-ghost {
                background: transparent;
                color: var(--text);
                border: 1px solid var(--border);
            }
            .btn-ghost:hover {
                border-color: rgba(59, 130, 246, 0.4);
                color: var(--text);
            }
            .hero-scroll {
                position: absolute;
                bottom: 2rem;
                left: 50%;
                transform: translateX(-50%);
                color: var(--text-dim);
                font-size: 0.75rem;
                font-family: var(--font-mono);
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 8px;
                animation: float 3s ease-in-out infinite;
            }
            @keyframes float {
                0%,
                100% {
                    transform: translateX(-50%) translateY(0);
                }
                50% {
                    transform: translateX(-50%) translateY(6px);
                }
            }

            /* === XDL Section === */
            .xdl-section {
                padding-top: 6rem;
                padding-bottom: 6rem;
            }
            .xdl-split {
                display: grid;
                grid-template-columns: 1fr 1.4fr;
                gap: 3rem;
                margin-top: 3rem;
                align-items: start;
            }
            .xdl-features {
                display: flex;
                flex-direction: column;
                gap: 1.5rem;
            }
            .xdl-feature {
                display: flex;
                gap: 12px;
                align-items: flex-start;
                padding: 1rem 1.25rem;
                border-radius: 10px;
                border: 1px solid transparent;
                transition:
                    border-color 0.3s,
                    background 0.3s;
            }
            .xdl-feature:hover {
                border-color: var(--border);
                background: rgba(13, 13, 18, 0.5);
            }
            .xdl-feature-icon {
                width: 36px;
                height: 36px;
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 8px;
                font-size: 1.1rem;
            }
            .xdl-feature h3 {
                font-size: 1.4rem;
                font-weight: 600;
                margin-bottom: 6px;
                line-height: 1.2;
                text-wrap: balance;
            }
            .xdl-feature p {
                font-size: 1rem;
                color: var(--text-sec);
                line-height: 1.55;
            }
            .xdl-feature.breathing {
                animation: breathe 4s ease-in-out infinite;
            }
            .xdl-feature.breathing .xdl-feature-icon {
                animation: breathe-glow 4s ease-in-out infinite;
            }
            @keyframes breathe {
                0%, 100% { transform: scale(1); }
                50%      { transform: scale(1.015); }
            }
            @keyframes breathe-glow {
                0%, 100% {
                    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
                }
                50% {
                    box-shadow:
                        0 0 16px rgba(249, 115, 22, 0.15),
                        0 0 40px rgba(249, 115, 22, 0.06);
                }
            }

            /* XDL Code Block */
            .xdl-code {
                background: var(--surface);
                border: 1px solid var(--border);
                border-radius: 12px;
                overflow: hidden;
                box-shadow:
                    0 4px 40px rgba(0, 0, 0, 0.4),
                    0 0 80px var(--accent-glow);
                transition:
                    box-shadow 0.4s,
                    border-color 0.4s,
                    transform 0.4s;
            }
            .xdl-code:hover {
                transform: translateY(-2px);
                border-color: rgba(59, 130, 246, 0.25);
                box-shadow:
                    0 8px 60px rgba(0, 0, 0, 0.5),
                    0 0 120px var(--accent-glow-strong);
            }
            .xdl-code-bar {
                display: flex;
                align-items: center;
                gap: 6px;
                padding: 12px 16px;
                border-bottom: 1px solid var(--border);
            }
            .xdl-code-dot {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: #2a2a2e;
            }
            .xdl-code-dot:nth-child(1) {
                background: #ff5f57;
            }
            .xdl-code-dot:nth-child(2) {
                background: #febc2e;
            }
            .xdl-code-dot:nth-child(3) {
                background: var(--accent);
            }
            .xdl-code-filename {
                margin-left: auto;
                font-family: var(--font-mono);
                font-size: 0.7rem;
                color: var(--text-dim);
            }
            .xdl-code-body {
                padding: 20px 24px;
                font-family: var(--font-mono);
                font-size: 0.82rem;
                line-height: 1.8;
                overflow-x: auto;
                counter-reset: line;
            }
            .xdl-code-body .line {
                display: flex;
                gap: 0;
                transition: opacity 0.25s ease, background 0.25s ease;
                border-left: 2px solid transparent;
                padding-left: 4px;
                margin-left: -6px;
            }
            .xdl-code-body.dimming .line {
                opacity: 0.25;
            }
            .xdl-code-body .line.highlight {
                opacity: 1;
                background: rgba(59, 130, 246, 0.08);
                border-left-color: var(--accent);
            }
            .perception-xdl {
                transition: opacity 0.25s ease, transform 0.25s ease;
            }
            .perception-xdl.flipping {
                opacity: 0;
                transform: translateY(4px);
            }
            .xdl-code-body .ln {
                display: none;
            }
            .xdl-code-body .code {
                white-space: pre;
            }
            /* XDL syntax colors */
            .xk {
                color: var(--accent);
            } /* keyword */
            .xs {
                color: #34d399;
            } /* string */
            .xc {
                color: var(--text-dim);
                opacity: 0.6;
            } /* comment */
            .xp {
                color: var(--amber);
            } /* property */
            .xn {
                color: var(--cyan);
            } /* number */
            .xt-s {
                color: var(--green);
            } /* sensor type */
            .xt-o {
                color: var(--purple);
            } /* output type */
            .xt-p {
                color: var(--orange);
            } /* perception type */
            .xt-a {
                color: var(--pink);
            } /* agent type */
            .xd {
                color: var(--text-sec);
            } /* default/punctuation */

            /* === Statement / Interstitial === */
            .statement {
                position: relative;
                z-index: 1;
                text-align: center;
                padding: 6rem 2rem;
                max-width: 800px;
                margin: 0 auto;
            }
            .statement-text {
                font-family: var(--font-sans);
                font-size: clamp(1.3rem, 3.5vw, 2rem);
                font-weight: 300;
                font-style: italic;
                color: var(--text);
                line-height: 1.5;
                opacity: 0.7;
            }
            .statement-text em {
                font-style: normal;
                color: var(--orange);
                font-weight: 400;
            }

            /* === Perception Section === */
            .perception-section {
                padding-top: 6rem;
                padding-bottom: 6rem;
                position: relative;
                overflow: hidden;
            }
            /* Slow drifting colour field — the section 'breathes' */
            .perception-section::before {
                content: "";
                position: absolute;
                inset: 0;
                pointer-events: none;
                z-index: 0;
                background:
                    radial-gradient(600px 400px at 20% 20%, rgba(249, 115, 22, 0.08), transparent 70%),
                    radial-gradient(500px 400px at 80% 30%, rgba(236, 72, 153, 0.06), transparent 70%),
                    radial-gradient(500px 400px at 50% 80%, rgba(124, 58, 237, 0.06), transparent 70%);
                animation: perception-drift 18s ease-in-out infinite alternate;
            }
            @keyframes perception-drift {
                0%   { transform: translate3d(0, 0, 0)    scale(1); opacity: 0.7; }
                50%  { transform: translate3d(-20px, 10px, 0) scale(1.05); opacity: 1; }
                100% { transform: translate3d(15px, -15px, 0) scale(1.08); opacity: 0.8; }
            }
            .perception-section > * { position: relative; z-index: 1; }

            /* Heading gets a gentle gradient shimmer */
            .perception-section .section-heading {
                background: linear-gradient(
                    90deg,
                    #fbbf24 0%,
                    var(--orange) 30%,
                    #ec4899 60%,
                    #a855f7 100%
                );
                background-size: 200% 100%;
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                color: transparent;
                animation: perception-shimmer 8s ease-in-out infinite alternate;
            }
            @keyframes perception-shimmer {
                0%   { background-position:   0% 50%; }
                100% { background-position: 100% 50%; }
            }

            .perception-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 1.5rem;
                margin-top: 3rem;
            }
            .perception-card {
                padding: 2rem;
                border-radius: 12px;
                border: 1px solid var(--p-border, rgba(249, 115, 22, 0.15));
                background: var(--p-bg, rgba(249, 115, 22, 0.03));
                transition: all 0.4s ease;
                position: relative;
                overflow: hidden;
            }
            .perception-card::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 3px;
                background: var(--p-color, var(--orange));
                opacity: 0.6;
                transition: opacity 0.3s, box-shadow 0.4s;
            }
            .perception-card:hover {
                border-color: var(--p-border-hover, rgba(249, 115, 22, 0.35));
                background: var(--p-bg-hover, rgba(249, 115, 22, 0.07));
                transform: translateY(-3px);
            }
            .perception-card:hover::before {
                opacity: 1;
                box-shadow: 0 0 16px var(--p-color, var(--orange));
            }

            /* Per-perception colour tokens */
            .perception-card[data-perception="warmth"] {
                --p-color: #fbbf24;
                --p-border: rgba(251, 191, 36, 0.15);
                --p-border-hover: rgba(251, 191, 36, 0.35);
                --p-bg: rgba(251, 191, 36, 0.03);
                --p-bg-hover: rgba(251, 191, 36, 0.07);
            }
            .perception-card[data-perception="energy"] {
                --p-color: #f97316;
                --p-border: rgba(249, 115, 22, 0.15);
                --p-border-hover: rgba(249, 115, 22, 0.35);
                --p-bg: rgba(249, 115, 22, 0.03);
                --p-bg-hover: rgba(249, 115, 22, 0.07);
            }
            .perception-card[data-perception="tension"] {
                --p-color: #ef4444;
                --p-border: rgba(239, 68, 68, 0.15);
                --p-border-hover: rgba(239, 68, 68, 0.35);
                --p-bg: rgba(239, 68, 68, 0.03);
                --p-bg-hover: rgba(239, 68, 68, 0.07);
            }
            .perception-card[data-perception="calm"] {
                --p-color: #7c3aed;
                --p-border: rgba(124, 58, 237, 0.15);
                --p-border-hover: rgba(124, 58, 237, 0.35);
                --p-bg: rgba(124, 58, 237, 0.03);
                --p-bg-hover: rgba(124, 58, 237, 0.07);
            }
            .perception-card[data-perception="wonder"] {
                --p-color: #ec4899;
                --p-border: rgba(236, 72, 153, 0.15);
                --p-border-hover: rgba(236, 72, 153, 0.4);
                --p-bg: rgba(236, 72, 153, 0.03);
                --p-bg-hover: rgba(236, 72, 153, 0.07);
            }
            .perception-card[data-perception="presence"] {
                --p-color: #10b981;
                --p-border: rgba(16, 185, 129, 0.15);
                --p-border-hover: rgba(16, 185, 129, 0.35);
                --p-bg: rgba(16, 185, 129, 0.03);
                --p-bg-hover: rgba(16, 185, 129, 0.07);
            }

            .perception-card-orb {
                width: 44px;
                height: 44px;
                border-radius: 50%;
                background: radial-gradient(
                    circle,
                    var(--p-color, var(--orange)) 0%,
                    transparent 75%
                );
                border: 1px solid var(--p-color, var(--orange));
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 1rem;
                color: var(--p-color, var(--orange));
                font-size: 1.2rem;
                animation: orb-breathe 5s ease-in-out infinite;
                animation-delay: var(--p-delay, 0s);
            }
            @keyframes orb-breathe {
                0%, 100% {
                    box-shadow: 0 0 8px 0 var(--p-color, var(--orange));
                    transform: scale(1);
                }
                50% {
                    box-shadow: 0 0 28px 4px var(--p-color, var(--orange));
                    transform: scale(1.08);
                }
            }
            /* Each perception has its own breathing rhythm */
            .perception-card[data-perception="warmth"]  .perception-card-orb { animation-duration: 6s;   --p-delay: 0s;   }
            .perception-card[data-perception="energy"]  .perception-card-orb { animation-duration: 2.4s; --p-delay: 0.3s; }
            .perception-card[data-perception="tension"] .perception-card-orb { animation-duration: 3.2s; --p-delay: 1.1s; }
            .perception-card[data-perception="calm"]    .perception-card-orb { animation-duration: 7.5s; --p-delay: 2s;   }
            .perception-card[data-perception="wonder"]  .perception-card-orb { animation-duration: 4s;   --p-delay: 0.8s; }
            .perception-card[data-perception="presence"] .perception-card-orb { animation-duration: 5.5s; --p-delay: 1.5s; }

            .perception-card h3 {
                font-size: 1.1rem;
                font-weight: 600;
                margin-bottom: 0.5rem;
                color: var(--p-color, var(--orange));
            }
            .perception-card p {
                font-size: 0.88rem;
                color: var(--text-sec);
                line-height: 1.6;
            }
            .perception-xdl {
                margin-top: 3rem;
                padding: 1.5rem 2rem;
                background: var(--surface);
                border: 1px solid var(--border);
                border-radius: 10px;
                font-family: var(--font-mono);
                font-size: 0.82rem;
                line-height: 1.8;
                color: var(--text-dim);
                overflow-x: auto;
            }

            /* === Stack Section === */
            .stack-section {
                padding-top: 6rem;
                padding-bottom: 6rem;
            }
            .stack-layers {
                display: flex;
                flex-direction: column;
                gap: 0;
                margin-top: 3rem;
            }
            .stack-layer {
                display: grid;
                grid-template-columns: 60px 1fr 2fr;
                gap: 1.5rem;
                align-items: center;
                padding: 1.5rem 2rem;
                border: 1px solid var(--border);
                background: var(--surface);
                transition: all 0.3s;
            }
            .stack-layer:first-child {
                border-radius: 12px 12px 0 0;
            }
            .stack-layer:last-child {
                border-radius: 0 0 12px 12px;
            }
            .stack-layer:not(:last-child) {
                border-bottom: none;
            }
            .stack-layer:hover {
                background: var(--elevated);
                z-index: 1;
                transform: scale(1.01);
            }
            .stack-layer-num {
                font-family: var(--font-mono);
                font-size: 0.75rem;
                color: var(--text-dim);
                text-align: center;
            }
            .stack-layer-num span {
                display: block;
                font-size: 1.5rem;
                font-weight: 700;
                font-family: var(--font-sans);
                line-height: 1;
                margin-bottom: 2px;
            }
            .stack-layer-name {
                font-family: var(--font-sans);
                font-weight: 600;
                font-size: 1.5rem;
                line-height: 1.2;
            }
            .stack-layer-name small {
                display: block;
                font-family: var(--font-mono);
                font-size: 0.7rem;
                color: var(--text-dim);
                font-weight: 400;
                margin-top: 2px;
            }
            .stack-layer-desc {
                font-size: 0.88rem;
                color: var(--text-sec);
                line-height: 1.5;
            }

            /* === Use Cases Section === */
            .usecases-section {
                padding-top: 6rem;
                padding-bottom: 6rem;
            }
            .usecase-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 1.25rem;
                margin-top: 3rem;
            }
            .usecase-card {
                padding: 1.6rem 1.5rem;
                border-radius: 12px;
                border: 1px solid var(--border);
                background: var(--surface);
                transition:
                    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                    border-color 0.3s,
                    background 0.3s,
                    box-shadow 0.4s;
                position: relative;
                overflow: hidden;
            }
            .usecase-card::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 3px;
                opacity: 0.6;
                transition: opacity 0.4s, box-shadow 0.4s;
            }
            /* Ambient colour wash that glows on hover */
            .usecase-card::after {
                content: "";
                position: absolute;
                inset: 0;
                background: radial-gradient(
                    circle at 30% 0%,
                    var(--uc-color, var(--accent)),
                    transparent 60%
                );
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.4s;
                z-index: 0;
            }
            .usecase-card > * {
                position: relative;
                z-index: 1;
            }
            .usecase-card:hover {
                background: var(--elevated);
                transform: translateY(-4px);
                border-color: color-mix(in srgb, var(--uc-color) 50%, var(--border));
                box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
            }
            .usecase-card:hover::before {
                opacity: 1;
                box-shadow: 0 0 18px var(--uc-color, var(--accent));
            }
            .usecase-card:hover::after {
                opacity: 0.08;
            }
            .usecase-card h3 {
                transition: color 0.3s;
            }
            .usecase-card:hover h3 {
                color: var(--uc-color, var(--text));
            }
            .usecase-card h3 {
                font-size: 0.95rem;
                font-weight: 600;
                margin-bottom: 0.4rem;
            }
            .usecase-card p {
                font-size: 0.8rem;
                color: var(--text-dim);
                line-height: 1.5;
                margin-bottom: 0.75rem;
            }
            .usecase-tags {
                display: flex;
                flex-wrap: wrap;
                gap: 4px;
            }
            .usecase-tag {
                font-family: var(--font-mono);
                font-size: 0.6rem;
                padding: 2px 8px;
                border-radius: 4px;
                letter-spacing: 0.02em;
            }

            /* === Protocols Section === */
            .protocols-section {
                padding: 6rem 0;
                overflow: hidden;
                position: relative;
                z-index: 1;
            }
            .protocols-inner {
                max-width: 1200px;
                margin: 0 auto;
                padding: 0 2rem;
            }
            .protocol-stream-permanent {
                margin-top: 3rem;
                overflow: hidden;
                position: relative;
                padding: 2rem 0;
            }
            .protocol-stream-permanent::before,
            .protocol-stream-permanent::after {
                content: "";
                position: absolute;
                top: 0;
                bottom: 0;
                width: 120px;
                z-index: 2;
            }
            .protocol-stream-permanent::before {
                left: 0;
                background: linear-gradient(90deg, var(--bg), transparent);
            }
            .protocol-stream-permanent::after {
                right: 0;
                background: linear-gradient(270deg, var(--bg), transparent);
            }
            .protocol-row {
                display: flex;
                gap: 3rem;
                white-space: nowrap;
                animation: scroll-protocols linear infinite;
            }
            .protocol-row span {
                font-family: var(--font-mono);
                font-size: clamp(0.9rem, 2vw, 1.1rem);
                color: var(--text-dim);
                opacity: 0.5;
                transition:
                    opacity 0.3s,
                    color 0.3s;
            }
            .protocol-row span:hover {
                opacity: 1;
                color: var(--accent);
            }
            @keyframes scroll-protocols {
                from {
                    transform: translateX(0);
                }
                to {
                    transform: translateX(-50%);
                }
            }
            .protocol-stats {
                display: flex;
                justify-content: center;
                gap: 4rem;
                margin-top: 3rem;
                flex-wrap: wrap;
            }
            .protocol-stat {
                text-align: center;
            }
            .protocol-stat .num {
                font-family: var(--font-sans);
                font-size: 2.5rem;
                font-weight: 700;
                color: var(--text);
                display: block;
                line-height: 1;
            }
            .protocol-stat .label {
                font-family: var(--font-mono);
                font-size: 0.7rem;
                color: var(--text-dim);
                text-transform: uppercase;
                letter-spacing: 0.1em;
                margin-top: 6px;
                display: block;
            }

            /* Protocol spread — visual breadth card grid */
            .protocol-spread {
                display: grid;
                grid-template-columns: repeat(4, minmax(0, 220px));
                justify-content: center;
                gap: 1.25rem;
                margin-top: 3rem;
            }
            .protocol-card {
                padding: 1.25rem 1.25rem 1.1rem;
                border-radius: 12px;
                border: 1px solid var(--border);
                background: rgba(13, 13, 18, 0.5);
                position: relative;
                overflow: hidden;
                transition: border-color 0.3s, background 0.3s;
            }
            .protocol-card::before {
                content: "";
                position: absolute;
                top: 0; left: 0; right: 0;
                height: 2px;
                background: var(--pc, var(--accent));
                opacity: 0.6;
            }
            .protocol-card:hover {
                border-color: var(--pc, var(--accent));
                background: rgba(13, 13, 18, 0.75);
            }
            .protocol-card-label {
                font-family: var(--font-sans);
                font-size: 0.68rem;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.14em;
                color: var(--pc, var(--accent));
                margin-bottom: 0.9rem;
            }
            .protocol-card-chips {
                display: flex;
                flex-wrap: wrap;
                gap: 5px;
            }
            .protocol-card-chips span {
                padding: 4px 9px;
                border-radius: 999px;
                background: rgba(255, 255, 255, 0.04);
                border: 1px solid var(--border);
                color: var(--text);
                font-family: var(--font-body);
                font-size: 0.72rem;
                transition: border-color 0.3s, background 0.3s;
            }
            .protocol-card:hover .protocol-card-chips span {
                border-color: color-mix(in srgb, var(--pc) 40%, var(--border));
            }
            @media (max-width: 900px) {
                .protocol-spread { grid-template-columns: repeat(2, 1fr); }
            }
            @media (max-width: 600px) {
                .protocol-spread {
                    grid-template-columns: 1fr;
                    max-width: 360px;
                    margin-left: auto;
                    margin-right: auto;
                }
            }

            /* === Install Section === */
            .install-section {
                padding-top: 8rem;
                padding-bottom: 6rem;
                text-align: center;
                position: relative;
                z-index: 1;
            }
            .install-section::before {
                content: "";
                position: absolute;
                inset: 0;
                z-index: -1;
                pointer-events: none;
                background-image:
                    linear-gradient(
                        rgba(59, 130, 246, 0.06) 1px,
                        transparent 1px
                    ),
                    linear-gradient(
                        90deg,
                        rgba(59, 130, 246, 0.06) 1px,
                        transparent 1px
                    );
                background-size: 48px 48px;
                -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 20%, transparent 70%);
                mask-image: radial-gradient(ellipse at 50% 50%, #000 20%, transparent 70%);
                opacity: 0;
                transition: opacity 1s ease;
            }
            .install-section::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 600px;
                height: 600px;
                z-index: -1;
                pointer-events: none;
                background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 60%);
                opacity: 0;
                transition: opacity 0.6s ease, transform 0.6s ease;
            }
            .install-section.visible::before {
                opacity: 1;
            }
            .install-section:has(.signup:hover)::before {
                background-image:
                    linear-gradient(
                        rgba(59, 130, 246, 0.15) 1px,
                        transparent 1px
                    ),
                    linear-gradient(
                        90deg,
                        rgba(59, 130, 246, 0.15) 1px,
                        transparent 1px
                    );
                animation: electric-grid 0.8s ease-in-out infinite alternate;
            }
            .install-section:has(.signup:hover)::after {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1.3);
                animation: electric-pulse 1.2s ease-in-out infinite;
            }
            @keyframes electric-grid {
                0% { opacity: 0.7; }
                100% { opacity: 1; }
            }
            @keyframes electric-pulse {
                0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.2); }
                50% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); }
            }
            .install-section:has(.signup:hover) .signup input[type="email"] {
                border-color: var(--accent);
                box-shadow: 0 0 20px rgba(59, 130, 246, 0.25), 0 0 60px rgba(59, 130, 246, 0.1);
            }
            .install-section:has(.signup:hover) .signup button {
                box-shadow: 0 0 30px rgba(59, 130, 246, 0.4), 0 0 80px rgba(59, 130, 246, 0.15);
            }
            .electric-canvas {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                z-index: -1;
                pointer-events: none;
                opacity: 0;
                transition: opacity 0.5s ease;
            }
            .electric-canvas.active {
                opacity: 1;
            }
            .terminal {
                width: 100%;
                max-width: 640px;
                margin: 2rem auto 2rem;
                background: var(--surface);
                border: 1px solid var(--border);
                border-radius: 12px;
                overflow: hidden;
                text-align: left;
                box-shadow:
                    0 4px 40px rgba(0, 0, 0, 0.4),
                    0 0 80px var(--accent-glow);
                transition:
                    box-shadow 0.4s,
                    transform 0.4s,
                    border-color 0.4s;
            }
            .terminal:hover {
                transform: translateY(-2px);
                border-color: rgba(59, 130, 246, 0.25);
                box-shadow:
                    0 8px 50px rgba(0, 0, 0, 0.5),
                    0 0 120px var(--accent-glow-strong);
            }
            .terminal-bar {
                display: flex;
                align-items: center;
                gap: 6px;
                padding: 12px 16px;
                border-bottom: 1px solid var(--border);
            }
            .terminal-dot {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: #2a2a2e;
            }
            .terminal-dot:nth-child(1) {
                background: #ff5f57;
            }
            .terminal-dot:nth-child(2) {
                background: #febc2e;
            }
            .terminal-dot:nth-child(3) {
                background: var(--accent);
            }
            .terminal-tabs {
                display: flex;
                align-items: center;
                gap: 6px;
                padding: 8px 16px;
                border-bottom: 1px solid var(--border);
            }
            .terminal-tab {
                background: transparent;
                border: 1px solid var(--border);
                border-radius: 999px;
                padding: 4px 12px;
                color: var(--text-dim);
                font-family: var(--font-mono);
                font-size: 0.75rem;
                cursor: pointer;
                transition:
                    color 0.2s,
                    border-color 0.2s,
                    background 0.2s;
                line-height: 1.4;
            }
            .terminal-tab:hover {
                color: var(--text);
                border-color: rgba(59, 130, 246, 0.3);
            }
            .terminal-tab.active {
                background: rgba(59, 130, 246, 0.12);
                border-color: var(--accent);
                color: var(--text);
            }
            .terminal-tab-sep {
                width: 1px;
                height: 14px;
                background: var(--border);
                margin: 0 2px;
                flex-shrink: 0;
            }
            .terminal-platform {
                margin-left: auto;
                cursor: pointer;
                color: var(--text-dim);
                font-family: var(--font-mono);
                font-size: 0.75rem;
                background: none;
                border: none;
                transition: color 0.2s;
                padding: 4px 0;
            }
            .terminal-platform:hover {
                color: var(--text);
            }
            .terminal-body {
                padding: 20px;
                font-family: var(--font-mono);
                font-size: clamp(0.82rem, 2.5vw, 0.95rem);
                line-height: 1.7;
                color: var(--text-dim);
            }
            .terminal-comment-row {
                display: flex;
                align-items: center;
                margin-bottom: 4px;
            }
            .terminal-comment {
                color: var(--text-dim);
                opacity: 0.5;
            }
            .terminal-beta {
                margin-left: auto;
                color: var(--accent);
                font-family: var(--font-mono);
                font-size: 0.7rem;
                letter-spacing: 0.08em;
            }
            .terminal-cmds-row {
                display: flex;
                align-items: center;
                gap: 12px;
            }
            .terminal-cmds {
                flex: 1;
                min-width: 0;
            }
            .terminal-prompt {
                color: var(--accent);
            }
            .terminal-cmd {
                color: var(--text);
            }
            .cursor {
                display: inline-block;
                width: 8px;
                height: 1.15em;
                background: var(--accent);
                vertical-align: text-bottom;
                margin-left: 2px;
                animation: blink 1s step-end infinite;
            }
            @keyframes blink {
                50% {
                    opacity: 0;
                }
            }
            .copy-btn {
                background: transparent;
                border: 1px solid var(--border);
                border-radius: 6px;
                padding: 6px;
                cursor: pointer;
                color: var(--text-dim);
                transition:
                    color 0.2s,
                    border-color 0.2s,
                    background 0.2s;
                line-height: 0;
                flex-shrink: 0;
            }
            .copy-btn:hover {
                color: var(--text);
                border-color: var(--accent);
                background: rgba(59, 130, 246, 0.08);
            }
            .copy-btn.copied {
                color: #34d399;
                border-color: #34d399;
            }

            /* === Signup === */
            .signup {
                width: 100%;
                max-width: 440px;
                display: flex;
                gap: 0;
                margin: 0 auto 1rem;
            }
            .signup input[type="email"] {
                flex: 1;
                min-width: 0;
                padding: 14px 16px;
                background: var(--surface);
                border: 1px solid var(--border);
                border-right: none;
                border-radius: 10px 0 0 10px;
                color: var(--text);
                font-family: var(--font-sans);
                font-size: 0.95rem;
                outline: none;
                transition:
                    border-color 0.2s,
                    box-shadow 0.2s;
            }
            .signup input[type="email"]::placeholder {
                color: var(--text-dim);
                opacity: 0.6;
            }
            .signup input[type="email"]:focus {
                border-color: var(--accent);
                box-shadow: 0 0 0 3px var(--accent-glow);
            }
            .signup button {
                padding: 14px 24px;
                background: var(--accent);
                color: #fff;
                border: 1px solid var(--accent);
                border-radius: 0 10px 10px 0;
                font-family: var(--font-sans);
                font-size: 0.95rem;
                font-weight: 600;
                cursor: pointer;
                white-space: nowrap;
                transition:
                    background 0.25s,
                    transform 0.15s;
            }
            .signup button:hover {
                background: var(--accent-hover);
                box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
            }
            .signup button:active {
                transform: scale(0.97);
            }
            .signup button:disabled {
                opacity: 0.6;
                cursor: not-allowed;
            }
            .signup-hint {
                font-size: 0.78rem;
                color: var(--text-dim);
                opacity: 0.5;
                text-align: center;
                margin: 0.5rem 0;
            }
            .signup-msg {
                font-size: 0.85rem;
                text-align: center;
                min-height: 1.2em;
            }
            .signup-msg.success {
                color: #34d399;
            }
            .signup-msg.error {
                color: #f87171;
            }

            /* === Featured project === */
            .featured-project {
                position: relative;
                text-align: center;
                padding: 10rem 2rem;
                max-width: 900px;
                margin: 0 auto;
                isolation: isolate;
            }
            .featured-project::before {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) scale(1.02);
                width: min(720px, 85%);
                aspect-ratio: 1 / 1;
                background: url("/assets/projects/rhyme-refuge-portrait.png") center / contain no-repeat;
                opacity: 0;
                z-index: -1;
                pointer-events: none;
                transition:
                    opacity 0.9s ease,
                    transform 1.2s ease;
                -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
                mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
            }
            .featured-project:hover::before,
            .featured-project.mobile-hover::before {
                opacity: 0.55;
                transform: translate(-50%, -50%) scale(1);
            }
            /* Mobile: portrait is lower-opacity so body copy stays readable */
            @media (max-width: 700px) {
                .featured-project.mobile-hover::before {
                    opacity: 0.22;
                }
                .featured-project .section-sub {
                    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
                }
            }
            @media (prefers-reduced-motion: reduce) {
                .featured-project::before {
                    transition: opacity 0.2s ease;
                }
                .featured-project:hover::before {
                    transform: translate(-50%, -50%) scale(1.02);
                }
            }
            .featured-project-title-img {
                display: block;
                max-width: min(1040px, 98%);
                height: auto;
                margin: 0.5rem auto 0;
                user-select: none;
                position: relative;
                z-index: 1;
                filter: brightness(1.35) saturate(0.92);
            }
            .featured-project-link {
                display: inline-flex;
                align-items: center;
                gap: 0.5rem;
                font-family: var(--font-sans);
                font-weight: 500;
                font-size: 1rem;
                color: var(--accent);
                padding: 0.75rem 1.5rem;
                border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
                border-radius: 999px;
                transition: background 0.2s, border-color 0.2s, transform 0.2s;
            }
            .featured-project-link:hover {
                background: rgba(59, 130, 246, 0.08);
                border-color: var(--accent);
                transform: translateY(-1px);
                color: var(--accent);
            }
            .featured-project-link span {
                transition: transform 0.2s;
            }
            .featured-project-link:hover span {
                transform: translateX(3px);
            }

            /* === Partners === */
            .partners-section {
                position: relative;
                z-index: 1;
                padding: 3rem 2rem 4rem;
                text-align: center;
                max-width: 1200px;
                margin: 0 auto;
            }
            .partners-heading {
                font-family: var(--font-sans);
                font-size: 0.75rem;
                color: var(--text-dim);
                text-transform: uppercase;
                letter-spacing: 0.2em;
                font-weight: 400;
                margin-bottom: 2rem;
            }
            .partners-logos {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 1.25rem;
                flex-wrap: wrap;
                row-gap: 1.5rem;
            }
            .partners-logos a {
                display: flex;
                align-items: center;
                justify-content: center;
                text-decoration: none;
                padding: 0.5rem;
                transition: transform 0.3s;
            }
            .partners-logos a:hover {
                transform: translateY(-2px);
            }
            .partners-logos img {
                width: auto;
                object-fit: contain;
                filter: grayscale(1) brightness(0) invert(0.4);
                opacity: 1;
                transition:
                    filter 0.3s,
                    opacity 0.3s;
            }
            .partners-logos a:hover img {
                filter: grayscale(0) brightness(1) invert(0);
                opacity: 1;
            }
            .partners-logos a:hover img[src*="james-chase"],
            .partners-logos a:hover img[src*="holland-house"] {
                filter: brightness(0) invert(1);
            }
            .partners-logos .allpoints-link svg {
                filter: grayscale(1) brightness(0) invert(0.4);
                transition: filter 0.3s;
            }
            .partners-logos .allpoints-link:hover svg {
                filter: none;
            }
            .allpoints-link .ap-grey {
                stroke: #1a1b30;
                transition: stroke 0.3s;
            }
            .allpoints-link .ap-grey-fill {
                fill: #1a1b30;
                transition: fill 0.3s;
            }
            .allpoints-link:hover .ap-grey {
                stroke: #ffffff;
            }
            .allpoints-link:hover .ap-grey-fill {
                fill: #ffffff;
            }

            /* === Footer === */
            footer {
                position: relative;
                z-index: 1;
                padding: 3rem 2rem;
                text-align: center;
                font-size: 0.82rem;
                color: var(--text-dim);
                border-top: 1px solid var(--border);
                max-width: 1200px;
                margin: 0 auto;
            }
            footer a {
                color: var(--text-dim);
                text-decoration: none;
                transition: color 0.2s;
            }
            footer a:hover {
                color: var(--text);
            }
            .footer-inner {
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: wrap;
                gap: 1rem;
            }
            .footer-links {
                display: flex;
                gap: 1.5rem;
            }

            /* === Open Standard Section === */
            .open-section {
                padding-top: 6rem;
                padding-bottom: 6rem;
                text-align: center;
            }
            /* Deterministic formula visual */
            .open-formula {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 16px;
                margin: 2.5rem auto 1.5rem;
                flex-wrap: wrap;
                font-family: var(--font-mono);
            }
            .open-chip {
                padding: 14px 24px;
                border-radius: 12px;
                background: var(--elevated);
                border: 2px solid var(--border);
                color: var(--text);
                font-size: 1rem;
                font-weight: 500;
                letter-spacing: 0.04em;
                text-transform: uppercase;
                position: relative;
                animation: open-chip-glow 2.4s ease-in-out infinite;
            }
            .open-chip[data-open="state"]      { border-color: var(--accent);  color: var(--accent);  animation-delay: 0s; }
            .open-chip[data-open="event"]      { border-color: var(--orange);  color: #fdba74;        animation-delay: 0.4s; }
            .open-chip[data-open="transition"] { border-color: #34d399;         color: #34d399;        animation-delay: 0.8s; }
            @keyframes open-chip-glow {
                0%, 100% { box-shadow: 0 0 0 0 currentColor; }
                50%      { box-shadow: 0 0 18px -2px currentColor; }
            }
            .open-op {
                font-family: var(--font-sans);
                font-size: 1.6rem;
                font-weight: 300;
                color: var(--text-dim);
            }
            .open-equals {
                color: var(--accent);
            }
            @media (max-width: 560px) {
                .open-formula {
                    flex-direction: column;
                    gap: 10px;
                    margin: 2rem auto 1.25rem;
                }
                .open-chip { padding: 10px 22px; font-size: 0.95rem; }
                .open-op { font-size: 1.25rem; line-height: 1; }
            }
            .open-axiom {
                text-align: center;
                font-family: var(--font-sans);
                font-size: 1.35rem;
                font-weight: 500;
                color: var(--text);
                margin: 0.5rem auto 0.75rem;
                max-width: 640px;
            }
            .open-axiom strong {
                color: var(--accent);
                font-weight: 700;
            }
            .open-sub {
                text-align: center;
                max-width: 560px;
                margin: 0 auto 2rem;
                color: var(--text-sec);
                font-size: 0.95rem;
                line-height: 1.55;
            }

            /* Open-card mini visualisations */
            .open-viz {
                margin-bottom: 1rem;
                padding: 12px 14px;
                border-radius: 10px;
                background: rgba(5, 5, 7, 0.6);
                border: 1px solid var(--border);
                display: flex;
                align-items: center;
                gap: 8px;
                flex-wrap: wrap;
                font-family: var(--font-mono);
                font-size: 0.72rem;
                min-height: 60px;
            }
            .open-viz-chip {
                padding: 4px 10px;
                border-radius: 999px;
                border: 1px solid var(--border);
                background: var(--elevated);
                color: var(--text);
            }
            .open-viz-chip.agent     { border-color: rgba(236,72,153,.4); color: #f472b6; }
            .open-viz-chip.policy    { border-color: rgba(34,197,94,.4);  color: #4ade80; }
            .open-viz-chip.decision  { border-color: rgba(59,130,246,.5); color: var(--accent); background: rgba(59,130,246,.1); }
            .open-viz-chip.journey   { border-color: rgba(124,58,237,.4); color: #a78bfa; }
            .open-viz-chip.keepsake  { border-color: rgba(251,191,36,.4); color: #fbbf24; }
            .open-viz-chip.xdl       { border-color: rgba(59,130,246,.5); color: var(--accent); }
            .open-viz-chip.chat      { border-color: rgba(59,130,246,.4); color: var(--accent); }
            .open-viz-chip.canvas    { border-color: rgba(168,85,247,.4); color: var(--purple); }
            .open-viz-arrow {
                color: var(--text-dim);
                font-size: 1rem;
            }

            /* Graceful degradation bars */
            .open-viz-bars {
                flex-direction: column;
                align-items: stretch;
                gap: 6px;
            }
            .open-bar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                font-size: 0.62rem;
                color: var(--text-dim);
            }
            .open-bar span { flex: 1; }
            .open-bar div { display: flex; gap: 3px; }
            .open-bar i {
                width: 16px; height: 8px; border-radius: 2px;
                background: var(--green); display: block;
            }
            .open-bar i.off { background: var(--border); }
            .open-bar i.sim {
                background: transparent;
                border: 1px dashed rgba(148, 163, 184, 0.5);
            }
            .open-bar.full span    { color: #4ade80; }
            .open-bar.partial span { color: #fbbf24; }
            .open-bar.sim span     { color: var(--text-dim); }

            /* Privacy */
            .open-viz-privacy {
                flex-direction: column;
                align-items: stretch;
                gap: 6px;
            }
            .open-privacy-row {
                display: flex;
                align-items: center;
                gap: 10px;
                font-size: 0.68rem;
            }
            .open-privacy-mode {
                padding: 3px 9px;
                border-radius: 4px;
                font-family: var(--font-mono);
                min-width: 80px;
                text-align: center;
            }
            .open-privacy-mode.ephemeral { background: rgba(168,85,247,.15); color: var(--purple); border: 1px solid rgba(168,85,247,.3); }
            .open-privacy-mode.scoped    { background: rgba(59,130,246,.15); color: var(--accent); border: 1px solid rgba(59,130,246,.3); }
            .open-privacy-mode.retained  { background: rgba(245,158,11,.12); color: #fbbf24; border: 1px solid rgba(245,158,11,.3); }
            .open-privacy-life { color: var(--text-dim); }

            /* Souvenir */
            .open-souvenir {
                color: #fbbf24;
                font-size: 1.3rem;
                animation: breathe-glow 3s ease-in-out infinite;
            }

            /* Fanout */
            .open-viz-fanout {
                flex-direction: column;
                align-items: center;
                gap: 10px;
            }
            .open-fanout-arms {
                display: flex;
                gap: 6px;
                flex-wrap: wrap;
                justify-content: center;
            }
            .open-venue {
                padding: 3px 10px;
                border-radius: 999px;
                border: 1px solid var(--border);
                font-size: 0.66rem;
                color: var(--text);
                background: rgba(13,13,18,.6);
            }

            /* Creative-first merge */
            .open-viz-merge {
                justify-content: space-between;
            }
            .open-merge-left {
                display: flex;
                flex-direction: column;
                gap: 4px;
            }
            .open-merge-arrow {
                color: var(--text-dim);
                font-size: 1.3rem;
            }

            .open-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 1.5rem;
                margin-top: 3rem;
                text-align: left;
            }
            .open-card {
                padding: 2rem;
                border-radius: 12px;
                border: 1px solid var(--border);
                background: var(--surface);
                transition: all 0.3s;
            }
            .open-card:hover {
                background: var(--elevated);
                transform: translateY(-2px);
            }
            .open-card h3 {
                font-size: 1rem;
                font-weight: 600;
                margin-bottom: 0.5rem;
                color: var(--text);
            }
            .open-card p {
                font-size: 0.88rem;
                color: var(--text-sec);
                line-height: 1.6;
            }

            /* === Skip Link === */
            .skip {
                position: absolute;
                left: -9999px;
                top: auto;
                width: 1px;
                height: 1px;
                overflow: hidden;
            }
            .skip:focus {
                position: fixed;
                top: 8px;
                left: 8px;
                z-index: 200;
                width: auto;
                height: auto;
                padding: 12px 20px;
                background: var(--accent);
                color: #fff;
                border-radius: 8px;
                font-size: 0.9rem;
                text-decoration: none;
            }

            /* === Responsive === */
            @media (max-width: 900px) {
                .xdl-split {
                    grid-template-columns: 1fr;
                }
                .perception-grid {
                    grid-template-columns: repeat(2, 1fr);
                }
                .usecase-grid {
                    grid-template-columns: repeat(2, 1fr);
                }
                .stack-layer {
                    grid-template-columns: 48px 1fr;
                    gap: 1rem;
                }
                .stack-layer-desc {
                    grid-column: 1/-1;
                }
                .open-grid {
                    grid-template-columns: 1fr;
                }
                .nav-links {
                    gap: 1.2rem;
                }
            }
            @media (max-width: 640px) {
                .nav-links {
                    display: none;
                }
                /* Scroll-snap sections on mobile.
                   `proximity` nudges to section boundaries without trapping
                   the user inside sections taller than the viewport. */
                html {
                    scroll-snap-type: y proximity;
                    scroll-padding-top: 64px;
                }
                section[id] {
                    scroll-snap-align: start;
                }
                /* Pause CSS animations in sections scrolled off-screen.
                   JS-driven demos listen for the `xp:pause` / `xp:resume`
                   events dispatched alongside this class (see app.js). */
                section.section-offscreen,
                section.section-offscreen *,
                section.section-offscreen *::before,
                section.section-offscreen *::after {
                    animation-play-state: paused !important;
                }
            }
            @media (max-width: 600px) {
                .section {
                    padding: 5rem 1.25rem;
                }
                .hero {
                    padding: 6rem 1.25rem 4rem;
                }
                .perception-grid {
                    grid-template-columns: 1fr;
                }
                .usecase-grid {
                    grid-template-columns: 1fr;
                }
                .signup {
                    flex-direction: column;
                    gap: 10px;
                    max-width: 100%;
                }
                .signup input[type="email"] {
                    border-right: 1px solid var(--border);
                    border-radius: 10px;
                }
                .signup button {
                    border-radius: 10px;
                    width: 100%;
                }
                .hero-ctas {
                    flex-direction: column;
                    width: 100%;
                    max-width: 320px;
                }
                .hero-ctas .btn {
                    width: 100%;
                    justify-content: center;
                }
                .protocol-stats {
                    gap: 2rem;
                }
                .footer-inner {
                    flex-direction: column;
                    text-align: center;
                    gap: 0.5rem;
                }
                .footer-links {
                    justify-content: center;
                }
                /* XDL code block — scroll instead of clip */
                .code-block {
                    font-size: 0.72rem;
                    overflow-x: auto;
                    -webkit-overflow-scrolling: touch;
                }
                .bridge-io {
                    font-size: 0.72rem;
                    padding: 8px 12px;
                }
                .bridge-chip {
                    font-size: 0.65rem;
                    padding: 3px 6px;
                }
                .bridge-log {
                    font-size: 0.68rem;
                    max-height: 100px;
                    padding: 6px 10px;
                }
                /* Partners — wrap on mobile */
                .partners-logos {
                    flex-wrap: wrap;
                    gap: 1rem;
                }
                /* Featured project — reduce vertical padding */
                .featured-project {
                    padding: 5rem 1.25rem 6rem;
                }
                .featured-project-title-img {
                    max-width: 85%;
                }
                /* Install section — less padding */
                .install-section {
                    padding-top: 6rem;
                    padding-bottom: 8rem;
                }
                /* Electric canvas — hidden on mobile until signup is focused */
                .electric-canvas {
                    display: none;
                }
                .electric-canvas.active {
                    display: block;
                }
                .install-section::before,
                .install-section::after {
                    display: none;
                }
                /* Demo stage pills smaller */
                .demo-stage-pill {
                    font-size: 0.7rem;
                    padding: 6px 10px;
                }
                /* Brief: hide sidebar, full-width chat */
                .demo-brief {
                    grid-template-columns: 1fr !important;
                }
                .demo-sidebar {
                    display: none !important;
                }
                /* Journey: vertical stack — let stages flow naturally, no clipping */
                .demo-journey {
                    flex-direction: column !important;
                    height: auto !important;
                    overflow-x: hidden !important;
                    overflow-y: visible !important;
                    gap: 10px !important;
                }
                .demo-stage-col {
                    width: 100% !important;
                    min-width: 0 !important;
                    flex: 0 0 auto !important;
                }
                /* Generate: smaller XDL text */
                .demo-generate {
                    grid-template-columns: 1fr !important;
                }
                .demo-gen-line {
                    font-size: 0.68rem !important;
                }
                /* Visualise: extend viewport, simpler fidelity */
                .demo-vis {
                    min-height: auto !important;
                }
                .demo-vis-fidelity {
                    flex-wrap: nowrap;
                    gap: 4px;
                    overflow: hidden;
                }
                .demo-vis-fid {
                    font-size: 0.6rem;
                    padding: 3px 7px;
                    display: none;
                }
                .demo-vis-fid.active,
                .demo-vis-fid.done {
                    display: inline-block;
                }
                .demo-vis-fid-label {
                    display: none;
                }
                .demo-vis-cost {
                    display: none;
                }
                .demo-vis-tabs-hint {
                    display: none !important;
                }
                /* Screenplay: smaller text */
                .demo-vis-beat {
                    font-size: 0.68rem;
                    line-height: 1.6;
                }
                .demo-vis-beat-desc {
                    display: none;
                }
                /* Storyboard: 3 cols to keep the viewport short */
                .demo-vis-grid {
                    grid-template-columns: repeat(3, 1fr) !important;
                }
                .demo-vis-body {
                    grid-template-columns: 1fr !important;
                    max-height: none !important;
                    overflow: visible !important;
                }
                /* Walkthrough: 1 col × 3 rows stacked inline (not overlay) on mobile */
                .demo-vis-walkthrough {
                    position: relative !important;
                    inset: auto !important;
                    padding: 0 !important;
                    background: transparent !important;
                }
                .demo-vis-walkthrough.active {
                    grid-template-columns: 1fr !important;
                    grid-auto-rows: auto;
                    align-content: start !important;
                    padding: 0 !important;
                    background: transparent !important;
                }
                /* Slides — single column */
                .demo-slides {
                    grid-template-columns: 1fr !important;
                }
                /* Demo section / frame — tighten padding so scenes get more width */
                .demo-section {
                    padding: 4rem 0.75rem 6rem !important;
                }
                .demo-frame {
                    min-height: 600px;
                    max-height: none;
                    height: auto;
                }
                .demo-viewport {
                    padding: 10px !important;
                    min-height: auto !important;
                }
                .demo-scene {
                    position: relative !important;
                    inset: auto !important;
                    padding: 6px !important;
                    display: none;
                }
                .demo-scene.active {
                    display: block;
                }
                .demo-generate-output {
                    padding: 12px 14px !important;
                }
                /* Bridge mobile — remove blank space */
                .bridge-viewport {
                    min-height: auto !important;
                }
                .bridge-agents {
                    position: relative !important;
                    top: auto !important;
                    right: auto !important;
                    width: 100% !important;
                    margin-top: 8px;
                    display: none;
                }
                .bridge-agents.visible {
                    display: block;
                }
                .bridge-canvas {
                    min-height: 280px;
                }
                /* Bridge mobile — modes: shrink pills so all three fit at 375px */
                .bridge-modes {
                    gap: 6px !important;
                    padding: 10px 10px !important;
                    flex-wrap: nowrap !important;
                    justify-content: flex-start !important;
                }
                .bridge-mode-pill {
                    padding: 5px 9px !important;
                    font-size: 0.68rem !important;
                    flex: 0 0 auto !important;
                }
                .bridge-mode-pill.done::before {
                    margin-right: 1px;
                }
                .bridge-titlebar {
                    padding: 10px 12px !important;
                    gap: 8px !important;
                }
                .bridge-titlebar-label {
                    font-size: 0.7rem !important;
                }
            }

            /* === Reduced Motion === */
            @media (prefers-reduced-motion: reduce) {
                .sr {
                    transition: none;
                    opacity: 1;
                    transform: none;
                }
                .ambient-glow {
                    animation: none;
                    opacity: 0.5;
                }
                .cursor {
                    animation: none;
                    opacity: 1;
                }
                .protocol-row {
                    animation: none;
                }
                .perception-card-orb {
                    animation: none;
                }
                .hero-scroll {
                    animation: none;
                }
                html {
                    scroll-behavior: auto;
                }
            }

            /* === Pipeline demo === */
            .demo-section {
                padding: 4rem 1.5rem 6rem;
                max-width: 1200px;
                margin: 0 auto;
                position: relative;
                z-index: 1;
            }
            .demo-frame {
                margin-top: 3rem;
                min-height: 715px;
                background: var(--surface);
                border: 1px solid var(--border);
                border-radius: 16px;
                overflow: hidden;
                box-shadow:
                    0 8px 60px rgba(0, 0, 0, 0.4),
                    0 0 120px rgba(59, 130, 246, 0.08);
            }
            .demo-titlebar {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 14px 20px;
                border-bottom: 1px solid var(--border);
                background: rgba(0, 0, 0, 0.2);
            }
            .demo-titlebar-dot {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: #2a2a2e;
            }
            .demo-titlebar-dot:nth-child(1) { background: #ff5f57; }
            .demo-titlebar-dot:nth-child(2) { background: #febc2e; }
            .demo-titlebar-dot:nth-child(3) { background: var(--accent); }
            .demo-titlebar-label {
                margin-left: 12px;
                font-family: var(--font-mono);
                font-size: 0.72rem;
                color: var(--text-dim);
            }
            .demo-titlebar-clock {
                margin-left: auto;
                font-family: var(--font-mono);
                font-size: 0.72rem;
                color: var(--text-dim);
            }

            .demo-stages {
                display: flex;
                padding: 16px 20px;
                gap: 8px;
                border-bottom: 1px solid var(--border);
                background: rgba(0, 0, 0, 0.15);
            }
            .demo-stage-pill {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                padding: 10px 14px;
                border-radius: 999px;
                font-family: var(--font-sans);
                font-size: 0.8rem;
                font-weight: 500;
                color: var(--text-dim);
                border: 1px solid var(--border);
                cursor: pointer;
                user-select: none;
                transition:
                    color 0.3s,
                    background 0.3s,
                    border-color 0.3s,
                    box-shadow 0.3s;
            }
            .demo-stage-pill:hover {
                color: var(--text);
                border-color: rgba(59, 130, 246, 0.35);
            }
            .demo-stage-pill:focus-visible {
                outline: none;
                box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
            }
            .demo-stage-pill.done {
                color: var(--text);
                border-color: rgba(52, 211, 153, 0.4);
            }
            .demo-stage-pill.active {
                color: var(--text);
                background: rgba(59, 130, 246, 0.12);
                border-color: rgba(59, 130, 246, 0.5);
            }
            .demo-stage-num {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background: var(--border);
                font-family: var(--font-mono);
                font-size: 0.68rem;
                color: var(--text-dim);
                transition: background 0.3s, color 0.3s;
            }
            .demo-stage-pill.done .demo-stage-num {
                background: #34d399;
                color: #05130c;
            }
            .demo-stage-pill.active .demo-stage-num {
                background: var(--accent);
                color: white;
            }

            .demo-viewport {
                position: relative;
                min-height: 560px;
                padding: 28px;
            }
            .demo-caption {
                padding: 14px 20px;
                border-top: 1px solid var(--border);
                font-family: var(--font-body);
                font-size: 0.86rem;
                color: var(--text-dim);
                background: rgba(0, 0, 0, 0.15);
                min-height: 46px;
            }
            .demo-caption strong {
                color: var(--text);
                font-weight: 500;
            }

            .demo-scene {
                position: absolute;
                inset: 28px;
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.5s ease;
            }
            .demo-scene.active {
                opacity: 1;
                visibility: visible;
            }

            /* Scene: Brief */
            .demo-brief {
                display: grid;
                grid-template-columns: 1.6fr 1fr;
                gap: 20px;
                height: 100%;
            }
            .demo-chat {
                display: flex;
                flex-direction: column;
                gap: 12px;
                font-family: var(--font-body);
                font-size: 0.88rem;
                line-height: 1.55;
                overflow-y: auto;
                overflow-x: hidden;
            }
            .demo-chat-msg {
                padding: 12px 16px;
                border-radius: 12px;
                max-width: 90%;
                opacity: 0;
                transform: translateY(8px);
                transition:
                    opacity 0.5s ease,
                    transform 0.5s ease;
            }
            .demo-chat-msg.visible {
                opacity: 1;
                transform: translateY(0);
            }
            .demo-chat-msg.user {
                align-self: flex-end;
                background: rgba(59, 130, 246, 0.12);
                border: 1px solid rgba(59, 130, 246, 0.3);
            }
            .demo-chat-msg.assistant {
                align-self: flex-start;
                background: var(--bg);
                border: 1px solid var(--border);
            }
            /* Brief: fast-forward blurred placeholder bubbles —
               rapid-fire alternating bars that suggest a longer
               conversation happened. Visible enough to read as
               "chat happened here" but blurred so you don't try
               to read the text. */
            .demo-chat-ff {
                border-radius: 10px;
                min-height: 22px;
                width: 72%;
                opacity: 0;
                transform: translateY(4px) scaleY(0.9);
                transition:
                    opacity 0.18s ease,
                    transform 0.18s ease;
                filter: blur(3px);
            }
            .demo-chat-ff.visible {
                opacity: 0.65;
                transform: translateY(0) scaleY(1);
            }
            .demo-chat-ff.user-ff {
                align-self: flex-end;
                background: rgba(59, 130, 246, 0.18);
                border: 1px solid rgba(59, 130, 246, 0.25);
            }
            .demo-chat-ff.asst-ff {
                align-self: flex-start;
                background: rgba(30, 30, 42, 0.9);
                border: 1px solid var(--border);
            }
            .demo-chat-ff:nth-child(odd) {
                width: 55%;
                min-height: 32px;
            }
            .demo-chat-ff:nth-child(3n) {
                min-height: 42px;
            }
            /* Brief: uploaded-document card that seeds the conversation */
            .demo-chat-upload {
                align-self: flex-start;
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 10px 14px;
                background: rgba(59, 130, 246, 0.06);
                border: 1px solid rgba(59, 130, 246, 0.25);
                border-radius: 10px;
                max-width: 92%;
                opacity: 0;
                transform: translateY(8px);
                transition:
                    opacity 0.5s ease,
                    transform 0.5s ease;
            }
            .demo-chat-upload.visible {
                opacity: 1;
                transform: translateY(0);
            }
            .demo-chat-upload-icon {
                width: 28px;
                height: 28px;
                border-radius: 6px;
                background: rgba(59, 130, 246, 0.15);
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--accent);
                flex-shrink: 0;
            }
            .demo-chat-upload-meta {
                display: flex;
                flex-direction: column;
                gap: 1px;
                min-width: 0;
            }
            .demo-chat-upload-name {
                font-family: var(--font-mono);
                font-size: 0.78rem;
                color: var(--text);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .demo-chat-upload-info {
                font-family: var(--font-body);
                font-size: 0.68rem;
                color: var(--text-dim);
                display: flex;
                align-items: center;
                gap: 6px;
            }
            .demo-chat-upload-info .demo-upload-dot {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: var(--accent);
                animation: demo-status-pulse 1.6s ease-out infinite;
            }
            .demo-chat-upload.ready .demo-chat-upload-info .demo-upload-dot {
                background: #34d399;
                animation: none;
            }
            .demo-chat-msg .cursor {
                /* Use the install terminal's .cursor, sized for chat body
                   and tinted white to contrast with the bubble backgrounds. */
                background: #ffffff;
                width: 7px;
                height: 1em;
                vertical-align: -2px;
                margin-left: 1px;
            }
            .demo-typing {
                display: inline-flex;
                gap: 4px;
                padding: 4px 0;
            }
            .demo-typing span {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: var(--text-dim);
                animation: demo-bounce 1.2s ease infinite;
            }
            .demo-typing span:nth-child(2) { animation-delay: 0.15s; }
            .demo-typing span:nth-child(3) { animation-delay: 0.3s; }
            @keyframes demo-bounce {
                0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
                30% { transform: translateY(-3px); opacity: 1; }
            }

            .demo-sidebar {
                display: flex;
                flex-direction: column;
                gap: 14px;
                border-left: 1px solid var(--border);
                padding-left: 20px;
                overflow-y: auto;
                overflow-x: hidden;
                scroll-behavior: smooth;
            }
            .demo-sidebar-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                padding-bottom: 12px;
                border-bottom: 1px solid var(--border);
                margin-bottom: 2px;
            }
            .demo-sidebar-title {
                display: flex;
                align-items: center;
                gap: 8px;
                font-family: var(--font-sans);
                font-size: 0.66rem;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.14em;
                color: #b8a898; /* warm-text from xpstudio */
            }
            .demo-sidebar-status {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: var(--accent);
                box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.6);
                animation: demo-status-pulse 1.8s ease-out infinite;
            }
            @keyframes demo-status-pulse {
                0%   { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
                70%  { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
                100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
            }
            .demo-sidebar-collapse {
                color: var(--text-dim);
                display: flex;
                opacity: 0.6;
            }
            .demo-sidebar-meta {
                display: flex;
                flex-direction: column;
                gap: 8px;
                padding-bottom: 12px;
                border-bottom: 1px solid var(--border);
            }
            .demo-meta-item {
                display: flex;
                flex-direction: column;
                gap: 1px;
                opacity: 0;
                transform: translateY(4px);
                transition: opacity 0.35s ease, transform 0.35s ease;
            }
            .demo-meta-item.visible {
                opacity: 1;
                transform: translateY(0);
            }
            .demo-meta-label {
                font-family: var(--font-sans);
                font-size: 0.58rem;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.12em;
                color: #b8a898;
            }
            .demo-meta-value {
                font-family: var(--font-body);
                font-size: 0.76rem;
                color: var(--text);
                line-height: 1.35;
            }
            .demo-meta-value.bold {
                font-family: var(--font-sans);
                font-weight: 600;
                font-size: 0.82rem;
            }
            .demo-meta-pills {
                display: flex;
                flex-wrap: wrap;
                gap: 4px;
                opacity: 0;
                transform: translateY(4px);
                transition: opacity 0.35s ease, transform 0.35s ease;
            }
            .demo-meta-pills.visible {
                opacity: 1;
                transform: translateY(0);
            }
            .demo-meta-pill {
                font-family: var(--font-mono);
                font-size: 0.58rem;
                padding: 2px 7px;
                border-radius: 999px;
                border: 1px solid rgba(184, 168, 152, 0.25);
                color: #b8a898;
                background: rgba(184, 168, 152, 0.06);
            }
            .demo-meta-pill.perception {
                border-color: rgba(249, 115, 22, 0.3);
                color: #fdba74;
                background: rgba(249, 115, 22, 0.08);
            }
            .demo-meta-pill.accent {
                border-color: rgba(59, 130, 246, 0.3);
                color: var(--accent);
                background: rgba(59, 130, 246, 0.08);
            }
            .demo-sidebar-group {
                display: flex;
                flex-direction: column;
                gap: 6px;
            }
            .demo-sidebar-label {
                font-family: var(--font-sans);
                font-size: 0.7rem;
                font-weight: 600;
                color: var(--text-dim);
                text-transform: uppercase;
                letter-spacing: 0.1em;
            }
            .demo-lens-item {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 6px 10px;
                background: var(--bg);
                border: 1px solid var(--border);
                border-radius: 6px;
                font-family: var(--font-body);
                font-size: 0.78rem;
                color: var(--text);
                opacity: 0;
                transform: translateX(12px);
                transition:
                    opacity 0.35s ease,
                    transform 0.35s ease;
            }
            .demo-lens-item.visible {
                opacity: 1;
                transform: translateX(0);
            }
            .demo-lens-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                flex-shrink: 0;
            }

            /* Scene: Journey — mirrors xpstudio's JourneyTimeline layout */
            .demo-journey {
                display: flex;
                gap: 10px;
                height: 100%;
                overflow-x: auto;
                overflow-y: hidden;
                padding-bottom: 4px;
            }
            .demo-stage-col {
                flex: 1 0 0;
                min-width: 175px;
                display: flex;
                flex-direction: column;
                background: rgba(13, 13, 18, 0.4);
                border: 1px solid var(--border);
                border-radius: 10px;
                overflow: hidden;
            }
            .demo-stage-col-bar {
                height: 2px;
                background: var(--stage-color, var(--accent));
            }
            .demo-stage-col-head {
                padding: 10px 12px 8px;
                border-bottom: 1px solid var(--border);
                background: rgba(0, 0, 0, 0.2);
                opacity: 0;
                transform: translateY(6px);
                transition: opacity 0.35s ease, transform 0.35s ease;
            }
            .demo-stage-col-head.visible {
                opacity: 1;
                transform: translateY(0);
            }
            .demo-stage-col-title {
                font-family: var(--font-sans);
                font-size: 1.4rem;
                font-weight: 600;
                color: var(--text);
                line-height: 1.15;
                display: flex;
                align-items: baseline;
                justify-content: space-between;
                gap: 6px;
            }
            .demo-stage-col-count {
                font-family: var(--font-mono);
                font-size: 0.62rem;
                font-weight: 400;
                color: var(--text-dim);
            }
            .demo-stage-col-meta {
                margin-top: 6px;
                display: flex;
                flex-wrap: wrap;
                gap: 4px;
            }
            .demo-perception-tag {
                font-family: var(--font-mono);
                font-size: 0.6rem;
                padding: 2px 7px;
                border-radius: 999px;
                background: rgba(247, 115, 22, 0.08);
                color: #fdba74;
                border: 1px solid rgba(247, 115, 22, 0.25);
            }
            .demo-stage-col-moments {
                display: flex;
                flex-direction: column;
                gap: 6px;
                padding: 10px;
                flex: 1;
            }
            .demo-moment {
                position: relative;
                display: flex;
                flex-direction: column;
                gap: 3px;
                padding: 9px 10px;
                background: var(--bg);
                border: 1px solid var(--border);
                border-radius: 8px;
                opacity: 0;
                transform: translateY(8px) scale(0.98);
                transition:
                    opacity 0.35s ease,
                    transform 0.35s ease;
            }
            .demo-moment.visible {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
            .demo-moment.is-key {
                border-color: rgba(245, 158, 11, 0.35);
                box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.12);
            }
            .demo-moment-title {
                font-family: var(--font-sans);
                font-size: 0.78rem;
                font-weight: 500;
                color: var(--text);
                line-height: 1.25;
                padding-right: 12px;
            }
            .demo-moment-desc {
                font-family: var(--font-body);
                font-size: 0.7rem;
                color: var(--text-dim);
                font-style: italic;
                line-height: 1.35;
            }
            .demo-moment-type {
                display: inline-block;
                margin-top: 2px;
                align-self: flex-start;
                padding: 1px 6px;
                border-radius: 999px;
                background: rgba(59, 130, 246, 0.1);
                color: var(--accent);
                font-family: var(--font-mono);
                font-size: 0.58rem;
                text-transform: uppercase;
                letter-spacing: 0.06em;
            }
            .demo-moment-type.peak,
            .demo-moment-type.capture {
                background: rgba(236, 72, 153, 0.1);
                color: #f472b6;
            }
            .demo-moment-type.trigger,
            .demo-moment-type.generation {
                background: rgba(168, 85, 247, 0.1);
                color: #c084fc;
            }
            .demo-moment-type.arrival,
            .demo-moment-type.transition {
                background: rgba(34, 197, 94, 0.1);
                color: #4ade80;
            }
            .demo-moment-type.delivery,
            .demo-moment-type.departure {
                background: rgba(245, 158, 11, 0.1);
                color: #fbbf24;
            }
            .demo-moment-star {
                position: absolute;
                top: 6px;
                right: 8px;
                font-size: 0.72rem;
                color: #f59e0b;
                line-height: 1;
            }

            /* Scene: Generate — real-time XDL stream, full width */
            .demo-generate-output {
                height: 100%;
                background: var(--bg);
                border: 1px solid var(--border);
                border-radius: 10px;
                padding: 14px 18px;
                font-family: var(--font-mono);
                font-size: 0.78rem;
                line-height: 1.65;
                overflow-y: auto;
                overflow-x: hidden;
                white-space: pre;
                scroll-behavior: smooth;
            }
            .demo-generate-output::-webkit-scrollbar {
                width: 6px;
            }
            .demo-generate-output::-webkit-scrollbar-thumb {
                background: rgba(255, 255, 255, 0.08);
                border-radius: 3px;
            }
            .demo-gen-line {
                opacity: 0;
                transform: translateY(2px);
                transition:
                    opacity 0.2s,
                    transform 0.2s;
            }
            .demo-gen-line.visible {
                opacity: 1;
                transform: translateY(0);
            }

            /* Scene: Visualise — mirrors xpstudio's render/FidelitySelector +
               Storyboard tab + DetailSidebar layout */
            .demo-vis {
                display: flex;
                flex-direction: column;
                gap: 10px;
                height: 100%;
            }
            .demo-vis-top {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
            }
            .demo-vis-fidelity {
                display: flex;
                align-items: center;
                gap: 6px;
                font-family: var(--font-mono);
                font-size: 0.7rem;
                color: var(--text-dim);
                flex-wrap: wrap;
            }
            .demo-vis-fid-label {
                font-weight: 600;
                letter-spacing: 0.08em;
            }
            .demo-vis-fid {
                padding: 4px 10px;
                border: 1px solid var(--border);
                border-radius: 999px;
                background: rgba(0, 0, 0, 0.2);
                color: var(--text-dim);
                transition: all 0.3s ease;
            }
            .demo-vis-fid.active {
                border-color: rgba(124, 58, 237, 0.5);
                color: var(--text);
                background: rgba(124, 58, 237, 0.1);
                box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12);
            }
            .demo-vis-fid.done {
                color: var(--text);
                border-color: rgba(52, 211, 153, 0.35);
                opacity: 0.85;
            }
            .demo-vis-fid.done::before {
                content: "✓ ";
                color: #34d399;
                font-weight: 600;
            }
            .demo-vis-cost {
                margin-left: 4px;
                font-style: italic;
                color: var(--text-dim);
                opacity: 0.7;
            }
            .demo-vis-run {
                padding: 6px 14px;
                border-radius: 8px;
                background: rgba(124, 58, 237, 0.15);
                border: 1px solid rgba(124, 58, 237, 0.4);
                color: var(--text);
                font-family: var(--font-sans);
                font-size: 0.78rem;
                font-weight: 500;
                white-space: nowrap;
            }
            .demo-vis-tabs {
                display: flex;
                align-items: center;
                gap: 18px;
                padding-bottom: 8px;
                border-bottom: 1px solid var(--border);
                font-family: var(--font-sans);
                font-size: 0.78rem;
                color: var(--text-dim);
            }
            .demo-vis-tab {
                padding-bottom: 4px;
                border-bottom: 2px solid transparent;
                transition: color 0.3s, border-color 0.3s;
            }
            .demo-vis-tab.active {
                color: var(--text);
                border-bottom-color: var(--accent);
            }
            .demo-vis-tabs-hint {
                margin-left: auto;
                font-family: var(--font-mono);
                font-size: 0.68rem;
                color: var(--text-dim);
            }
            .demo-vis-body {
                position: relative;
                display: grid;
                grid-template-columns: 1fr 300px;
                gap: 16px;
                flex: 1;
                min-height: 0;
            }
            .demo-vis-screenplay {
                display: none;
                position: absolute;
                inset: 0;
                z-index: 2;
                background: var(--surface);
                border: 1px solid var(--border);
                border-radius: 8px;
                padding: 1.25rem 1.5rem;
                font-family: var(--font-mono);
                font-size: 0.78rem;
                line-height: 1.85;
                color: var(--text-sec);
                overflow-y: auto;
                opacity: 0;
                transition: opacity 0.5s ease;
            }
            .demo-vis-screenplay.active {
                display: block;
                opacity: 1;
            }
            .demo-vis-screenplay.fade-out {
                opacity: 0;
            }
            .demo-vis-beat {
                opacity: 0;
                transform: translateY(4px);
                transition: opacity 0.35s ease, transform 0.35s ease;
                padding: 2px 0;
            }
            .demo-vis-beat.visible {
                opacity: 1;
                transform: translateY(0);
            }
            .demo-vis-beat-stage {
                display: block;
                font-size: 0.65rem;
                padding: 2px 8px;
                border-radius: 3px;
                width: fit-content;
                margin-bottom: 0.5rem;
                margin-top: 0.75rem;
            }
            .demo-vis-beat:first-child .demo-vis-beat-stage {
                margin-top: 0;
                background: rgba(59, 130, 246, 0.1);
                color: var(--accent);
                letter-spacing: 0.04em;
                text-transform: uppercase;
            }
            .demo-vis-beat-title {
                color: #f0f0f4;
                font-weight: 500;
            }
            .demo-vis-beat-desc {
                color: var(--text-sec);
                font-style: italic;
                margin-left: 0.25rem;
            }
            .demo-vis-walkthrough {
                display: none;
                position: absolute;
                inset: 0;
                z-index: 2;
                border-radius: 8px;
                overflow: hidden;
                opacity: 0;
                transition: opacity 0.5s ease;
            }
            .demo-vis-walkthrough.active {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-auto-rows: min-content;
                align-content: center;
                gap: 8px;
                padding: 16px;
                background: var(--surface);
                opacity: 1;
            }
            /* When walkthrough overlay is active, hide storyboard + detail behind it */
            .demo-vis-body:has(.demo-vis-walkthrough.active) .demo-vis-grid,
            .demo-vis-body:has(.demo-vis-walkthrough.active) .demo-vis-detail {
                visibility: hidden;
            }
            .demo-vis-walkthrough.fade-out {
                opacity: 0;
            }
            .demo-vis-walkthrough video {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }
            .demo-vis-walkthrough .wt-label {
                position: absolute;
                bottom: 6px;
                left: 8px;
                font-family: var(--font-mono);
                font-size: 0.65rem;
                color: rgba(255,255,255,0.75);
                text-shadow: 0 1px 4px rgba(0,0,0,0.8);
                pointer-events: none;
            }
            .demo-vis-walkthrough .wt-cell {
                position: relative;
                aspect-ratio: 16 / 9;
                border-radius: 6px;
                border: 1px solid var(--border);
                overflow: hidden;
                background: #000;
            }
            .demo-vis-grid {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                grid-auto-rows: 1fr;
                gap: 8px;
                overflow: hidden;
            }
            .demo-vis-frame {
                position: relative;
                aspect-ratio: 16 / 9;
                border-radius: 6px;
                overflow: hidden;
                background:
                    linear-gradient(
                        180deg,
                        transparent 50%,
                        rgba(5, 5, 7, 0.85) 100%
                    ),
                    linear-gradient(
                        135deg,
                        var(--fv-from, var(--accent)),
                        var(--fv-to, var(--moment))
                    );
                background-size: cover;
                background-position: center;
                border: 1px solid var(--border);
                opacity: 0;
                transform: translateY(8px) scale(0.97);
                transition:
                    opacity 0.35s,
                    transform 0.35s,
                    box-shadow 0.4s,
                    border-color 0.4s;
            }
            .demo-vis-frame.visible {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
            .demo-vis-frame.selected {
                border-color: rgba(59, 130, 246, 0.6);
                box-shadow:
                    0 0 0 1px rgba(59, 130, 246, 0.4),
                    0 0 12px rgba(59, 130, 246, 0.35);
            }
            .demo-vis-frame::after {
                content: "";
                position: absolute;
                inset: 0;
                background: radial-gradient(
                    circle at 25% 25%,
                    rgba(255, 255, 255, 0.22) 0%,
                    transparent 55%
                );
                pointer-events: none;
            }
            .demo-vis-frame-num {
                position: absolute;
                top: 4px;
                left: 6px;
                font-family: var(--font-mono);
                font-size: 0.58rem;
                color: rgba(255, 255, 255, 0.85);
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
            }
            .demo-vis-frame-label {
                position: absolute;
                left: 6px;
                right: 6px;
                bottom: 4px;
                font-family: var(--font-sans);
                font-size: 0.62rem;
                color: rgba(255, 255, 255, 0.92);
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .demo-vis-frame-star {
                position: absolute;
                top: 4px;
                right: 6px;
                font-size: 0.72rem;
                color: #fbbf24;
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
            }
            .demo-vis-frame-status {
                position: absolute;
                bottom: 4px;
                right: 6px;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: #34d399;
                box-shadow: 0 0 6px rgba(52, 211, 153, 0.6);
            }
            .demo-vis-detail {
                display: flex;
                flex-direction: column;
                gap: 10px;
                padding: 14px;
                background: rgba(13, 13, 18, 0.4);
                border: 1px solid var(--border);
                border-radius: 10px;
                overflow: hidden;
                min-height: 0;
            }
            .demo-vis-detail-beat {
                font-family: var(--font-mono);
                font-size: 0.62rem;
                color: var(--text-dim);
                text-transform: uppercase;
                letter-spacing: 0.14em;
                opacity: 0;
                transform: translateY(4px);
                transition: opacity 0.4s, transform 0.4s;
            }
            .demo-vis-detail-beat.visible {
                opacity: 1;
                transform: translateY(0);
            }
            .demo-vis-detail-title {
                font-family: var(--font-sans);
                font-size: 0.95rem;
                font-weight: 600;
                color: var(--text);
                line-height: 1.25;
                opacity: 0;
                transform: translateY(4px);
                transition: opacity 0.4s, transform 0.4s;
            }
            .demo-vis-detail-title.visible {
                opacity: 1;
                transform: translateY(0);
            }
            .demo-vis-detail-card {
                display: flex;
                flex-direction: column;
                gap: 4px;
                padding-top: 8px;
                border-top: 1px solid var(--border);
                opacity: 0;
                transform: translateY(6px);
                transition: opacity 0.4s, transform 0.4s;
            }
            .demo-vis-detail-card.visible {
                opacity: 1;
                transform: translateY(0);
            }
            .demo-vis-detail-label {
                font-family: var(--font-sans);
                font-size: 0.62rem;
                font-weight: 600;
                color: var(--text-dim);
                text-transform: uppercase;
                letter-spacing: 0.1em;
            }
            .demo-vis-detail-body {
                font-family: var(--font-body);
                font-size: 0.76rem;
                color: var(--text);
                line-height: 1.5;
            }
            .demo-vis-detail-body.italic {
                font-style: italic;
                color: var(--text-dim);
            }
            .demo-vis-swatches {
                display: flex;
                gap: 4px;
                margin-top: 4px;
            }
            .demo-vis-swatch {
                width: 22px;
                height: 22px;
                border-radius: 4px;
                border: 1px solid rgba(255, 255, 255, 0.1);
            }

            /* Scene: Pitch */
            .demo-pitch {
                display: grid;
                grid-template-columns: 1fr 1.5fr;
                gap: 20px;
                height: 100%;
            }
            .demo-deck-meta {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
            .demo-deck-title {
                font-family: var(--font-sans);
                font-size: 1.05rem;
                font-weight: 600;
                color: var(--text);
                line-height: 1.25;
            }
            .demo-deck-desc {
                font-family: var(--font-body);
                font-size: 0.82rem;
                color: var(--text-dim);
                line-height: 1.55;
            }
            .demo-deck-cta {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 10px 16px;
                border-radius: 8px;
                background: var(--accent);
                color: white;
                font-family: var(--font-sans);
                font-size: 0.84rem;
                font-weight: 500;
                align-self: flex-start;
                margin-top: 8px;
                opacity: 0;
                transform: translateY(4px);
                transition:
                    opacity 0.5s,
                    transform 0.5s;
            }
            .demo-deck-cta.visible {
                opacity: 1;
                transform: translateY(0);
            }
            .demo-slides {
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-template-rows: 1fr 1fr;
                gap: 12px;
            }
            .demo-slide {
                aspect-ratio: 16 / 9;
                background: var(--bg);
                border: 1px solid var(--border);
                border-radius: 8px;
                padding: 14px;
                font-family: var(--font-sans);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                opacity: 0;
                transform: scale(0.96);
                transition:
                    opacity 0.4s,
                    transform 0.4s;
                position: relative;
                overflow: hidden;
            }
            .demo-slide.visible {
                opacity: 1;
                transform: scale(1);
            }
            .demo-slide-band {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 3px;
                background: var(--sl-accent, var(--accent));
            }
            .demo-slide-label {
                font-family: var(--font-mono);
                font-size: 0.62rem;
                color: var(--text-dim);
                text-transform: uppercase;
                letter-spacing: 0.1em;
            }
            .demo-slide-h {
                font-size: 0.9rem;
                font-weight: 600;
                color: var(--text);
                line-height: 1.3;
            }
            .demo-slide-sub {
                font-size: 0.7rem;
                color: #e8e8ec;
                line-height: 1.5;
            }
            .demo-slide-overlay {
                position: relative;
                z-index: 1;
                background: rgba(5, 5, 7, 0.65);
                backdrop-filter: blur(4px);
                -webkit-backdrop-filter: blur(4px);
                border-radius: 4px;
                padding: 8px 10px;
                margin: 6px;
            }
            .demo-slide-overlay .demo-slide-label {
                color: rgba(255, 255, 255, 0.6);
            }
            .demo-slide-overlay .demo-slide-h {
                color: #fff;
            }
            .demo-slide-overlay .demo-slide-sub {
                color: rgba(255, 255, 255, 0.8);
            }

            /* End state */
            .demo-end {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 18px;
                text-align: center;
                height: 100%;
            }
            .demo-end-headline {
                font-family: var(--font-sans);
                font-size: 1.35rem;
                font-weight: 500;
                color: var(--text);
            }
            .demo-end-sub {
                font-family: var(--font-body);
                font-size: 0.9rem;
                color: var(--text-dim);
                max-width: 420px;
            }
            @media (max-width: 900px) {
                .demo-brief,
                .demo-generate,
                .demo-pitch {
                    grid-template-columns: 1fr;
                }
                .demo-sidebar {
                    border-left: none;
                    padding-left: 0;
                    border-top: 1px solid var(--border);
                    padding-top: 16px;
                }
                .demo-journey { flex-direction: column; }
                .demo-vis-body {
                    grid-template-columns: 1fr;
                }
                .demo-vis-grid {
                    grid-template-columns: repeat(3, 1fr);
                }
                .demo-slides { grid-template-rows: auto; }
                .demo-stages { flex-wrap: wrap; }
                .demo-stage-pill { flex: 1 1 40%; }
            }
            @media (prefers-reduced-motion: reduce) {
                .demo-scene,
                .demo-chat-msg,
                .demo-lens-item,
                .demo-moment,
                .demo-gen-line,
                .demo-vis-frame,
                .demo-vis-detail-beat,
                .demo-vis-detail-title,
                .demo-vis-detail-card,
                .demo-slide,
                .demo-deck-cta {
                    transition: opacity 0.2s ease !important;
                    transform: none !important;
                }
                .demo-chat-msg .cursor,
                .demo-typing span {
                    animation: none !important;
                }
            }

            /* ============================================
               XPBRIDGE DEMO
               ============================================ */
            .bridge-section {
                padding: 4rem 1.5rem 6rem;
                max-width: 1200px;
                margin: 0 auto;
                position: relative;
                z-index: 1;
            }
            .bridge-frame {
                margin-top: 3rem;
                background: var(--surface);
                border: 1px solid var(--border);
                border-radius: 16px;
                overflow: hidden;
                box-shadow:
                    0 8px 60px rgba(0, 0, 0, 0.4),
                    0 0 120px rgba(59, 130, 246, 0.08);
            }
            .bridge-titlebar {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 14px 20px;
                border-bottom: 1px solid var(--border);
                background: rgba(0, 0, 0, 0.2);
            }
            .bridge-titlebar-dot {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: #2a2a2e;
            }
            .bridge-titlebar-dot:nth-child(1) { background: #ff5f57; }
            .bridge-titlebar-dot:nth-child(2) { background: #febc2e; }
            .bridge-titlebar-dot:nth-child(3) { background: var(--accent); }
            .bridge-titlebar-label {
                margin-left: 12px;
                font-family: var(--font-mono);
                font-size: 0.72rem;
                color: var(--text-dim);
            }

            .bridge-modes {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 12px 20px;
                border-bottom: 1px solid var(--border);
                background: rgba(0, 0, 0, 0.15);
            }
            .bridge-mode-pill {
                padding: 8px 18px;
                border-radius: 999px;
                font-family: var(--font-sans);
                font-size: 0.8rem;
                font-weight: 500;
                color: var(--text-dim);
                border: 1px solid var(--border);
                cursor: pointer;
                user-select: none;
                transition: color 0.3s, background 0.3s, border-color 0.3s, box-shadow 0.3s;
            }
            .bridge-mode-pill:hover {
                color: var(--text);
                border-color: rgba(59, 130, 246, 0.35);
            }
            .bridge-mode-pill:focus-visible {
                outline: none;
                box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
            }
            .bridge-mode-pill.active {
                color: var(--text);
                background: rgba(59, 130, 246, 0.12);
                border-color: rgba(59, 130, 246, 0.5);
            }
            .bridge-mode-pill.done {
                color: var(--text);
                border-color: rgba(52, 211, 153, 0.35);
            }
            .bridge-mode-pill.done::before {
                content: "\2713 ";
                color: #34d399;
                font-weight: 600;
            }

            .bridge-viewport {
                position: relative;
                min-height: 420px;
                background:
                    radial-gradient(circle at 20px 20px, rgba(255,255,255,0.04) 1px, transparent 1px);
                background-size: 24px 24px;
            }
            .bridge-canvas {
                position: relative;
                width: 100%;
                height: 380px;
                overflow: hidden;
            }
            .bridge-stage-label {
                position: absolute;
                font-family: var(--font-sans);
                font-size: 0.66rem;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.16em;
                opacity: 0;
                transform: translateY(-3px);
                transition: opacity 0.4s ease, transform 0.4s ease;
                width: 80px;
                text-align: center;
            }
            .bridge-stage-label.visible {
                opacity: 0.85;
                transform: translateY(0);
            }
            .bridge-edges {
                position: absolute;
                inset: 0;
                pointer-events: none;
            }

            /* State nodes — sized to match xpbridge's React Flow state node */
            .bridge-node {
                position: absolute;
                padding: 8px 12px;
                background: var(--elevated);
                border: 2px solid var(--accent);
                border-radius: 8px;
                text-align: center;
                opacity: 0;
                transform: scale(0.92);
                transition: opacity 0.35s ease, transform 0.35s ease,
                            box-shadow 0.5s ease, border-color 0.3s;
                z-index: 2;
                box-sizing: border-box;
            }
            .bridge-node.visible {
                opacity: 1;
                transform: scale(1);
            }
            .bridge-node.active {
                box-shadow:
                    0 0 0 4px rgba(59, 130, 246, 0.2),
                    0 0 24px rgba(59, 130, 246, 0.35);
                animation: bridge-pulse 1.5s ease infinite;
            }
            @keyframes bridge-pulse {
                0%, 100% { box-shadow: 0 0 0 4px rgba(59,130,246,0.2), 0 0 24px rgba(59,130,246,0.35); }
                50%      { box-shadow: 0 0 0 8px rgba(59,130,246,0.1), 0 0 36px rgba(59,130,246,0.2); }
            }
            .bridge-node.key {
                border-style: solid;
            }
            .bridge-node-label {
                font-family: var(--font-sans);
                font-size: 0.76rem;
                font-weight: 600;
                color: var(--text);
                line-height: 1.2;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .bridge-node-stage {
                font-family: var(--font-mono);
                font-size: 0.62rem;
                color: var(--text-dim);
                margin-top: 3px;
                text-transform: uppercase;
                letter-spacing: 0.08em;
            }
            .bridge-node-initial {
                position: absolute;
                top: 50%;
                right: calc(100% + 10px);
                transform: translateY(-50%);
                font-family: var(--font-mono);
                font-size: 0.56rem;
                padding: 2px 7px;
                border-radius: 4px;
                background: rgba(59, 130, 246, 0.2);
                color: var(--accent);
                text-transform: uppercase;
                letter-spacing: 0.06em;
                white-space: nowrap;
            }
            .bridge-node-key {
                position: absolute;
                top: -8px;
                right: 8px;
                font-size: 0.75rem;
                color: #fbbf24;
                text-shadow: 0 0 6px rgba(251, 191, 36, 0.5);
                line-height: 1;
            }
            .bridge-handle {
                position: absolute;
                top: 50%;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                transform: translateY(-50%);
                border: 1.5px solid var(--bg);
                box-sizing: border-box;
            }
            .bridge-handle-l { left: -5px; }
            .bridge-handle-r { right: -5px; }

            /* I/O chip bar — ambient hardware activity that fades in/out
               during simulation so the canvas breathes without clutter */
            .bridge-io {
                position: relative;
                padding: 10px 20px;
                background: rgba(5, 5, 7, 0.9);
                border-top: 1px solid var(--border);
                display: flex;
                flex-direction: column;
                gap: 6px;
                z-index: 3;
                pointer-events: none;
            }
            .bridge-io-row {
                display: flex;
                align-items: center;
                gap: 8px;
                flex-wrap: wrap;
            }
            .bridge-io-label {
                font-family: var(--font-sans);
                font-size: 0.58rem;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.14em;
                color: var(--text-dim);
                min-width: 56px;
            }
            .bridge-chip {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                padding: 3px 9px;
                border-radius: 999px;
                border: 1px solid var(--border);
                background: rgba(13, 13, 18, 0.6);
                font-family: var(--font-mono);
                font-size: 0.64rem;
                color: var(--text-dim);
                opacity: 0.35;
                transition: opacity 0.6s ease, color 0.3s, border-color 0.3s, background 0.3s;
            }
            .bridge-chip.pulse {
                opacity: 1;
                color: var(--text);
            }
            .bridge-chip-dot {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: var(--text-dim);
                transition: background 0.3s, box-shadow 0.3s;
            }
            /* Category colours */
            .bridge-chip[data-cat="sensor"] .bridge-chip-dot     { background: var(--green); }
            .bridge-chip[data-cat="output"] .bridge-chip-dot     { background: var(--purple); }
            .bridge-chip[data-cat="perception"] .bridge-chip-dot { background: var(--orange); }
            .bridge-chip[data-cat="agent"] .bridge-chip-dot      { background: var(--pink); }
            .bridge-chip[data-cat="performer"] .bridge-chip-dot  { background: var(--emerald); }

            .bridge-chip.pulse[data-cat="sensor"]     { border-color: rgba(34, 197, 94, 0.5); background: rgba(34, 197, 94, 0.08); }
            .bridge-chip.pulse[data-cat="output"]     { border-color: rgba(168, 85, 247, 0.5); background: rgba(168, 85, 247, 0.08); }
            .bridge-chip.pulse[data-cat="perception"] { border-color: rgba(249, 115, 22, 0.5); background: rgba(249, 115, 22, 0.08); }
            .bridge-chip.pulse[data-cat="agent"]      { border-color: rgba(236, 72, 153, 0.5); background: rgba(236, 72, 153, 0.08); }
            .bridge-chip.pulse[data-cat="performer"]  { border-color: rgba(16, 185, 129, 0.5); background: rgba(16, 185, 129, 0.08); }

            .bridge-chip.pulse .bridge-chip-dot {
                box-shadow: 0 0 8px currentColor;
            }

            /* Operate mode: live agent monitor panel */
            .bridge-agents {
                position: absolute;
                top: 16px;
                right: 16px;
                width: 240px;
                padding: 10px 12px 12px;
                background: rgba(5, 5, 7, 0.85);
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
                border: 1px solid var(--border);
                border-radius: 10px;
                opacity: 0;
                transform: translateX(10px);
                transition: opacity 0.4s ease, transform 0.4s ease;
                z-index: 5;
                pointer-events: none;
            }
            .bridge-agents.visible {
                opacity: 1;
                transform: translateX(0);
            }
            .bridge-agents-title {
                font-family: var(--font-sans);
                font-size: 0.62rem;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.14em;
                color: var(--text-dim);
                padding-bottom: 8px;
                margin-bottom: 8px;
                border-bottom: 1px solid var(--border);
            }
            .bridge-agent {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 7px 8px;
                border-radius: 8px;
                border: 1px solid var(--border);
                margin-bottom: 6px;
                opacity: 0;
                transform: translateY(4px);
                transition: opacity 0.3s ease, transform 0.3s ease,
                            border-color 0.3s, background 0.3s;
            }
            .bridge-agent:last-child { margin-bottom: 0; }
            .bridge-agent.visible {
                opacity: 1;
                transform: translateY(0);
            }
            .bridge-agent.firing {
                border-color: rgba(245, 158, 11, 0.4);
                background: rgba(245, 158, 11, 0.05);
            }
            .bridge-agent.fired {
                border-color: rgba(52, 211, 153, 0.3);
            }
            .bridge-agent-tier {
                flex-shrink: 0;
                width: 22px;
                height: 22px;
                border-radius: 6px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: var(--font-mono);
                font-size: 0.68rem;
                font-weight: 700;
            }
            .bridge-agent-tier.reactive {
                background: rgba(100, 116, 139, 0.2);
                color: #94a3b8;
            }
            .bridge-agent-tier.deliberative {
                background: rgba(59, 130, 246, 0.2);
                color: var(--accent);
            }
            .bridge-agent-tier.compositional {
                background: rgba(168, 85, 247, 0.2);
                color: var(--purple);
            }
            .bridge-agent-body {
                flex: 1;
                min-width: 0;
            }
            .bridge-agent-name {
                font-family: var(--font-mono);
                font-size: 0.72rem;
                color: var(--text);
                line-height: 1.2;
            }
            .bridge-agent-meta {
                font-family: var(--font-mono);
                font-size: 0.58rem;
                color: var(--text-dim);
                line-height: 1.3;
                margin-top: 1px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .bridge-agent-dot {
                flex-shrink: 0;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: var(--text-dim);
                opacity: 0.5;
            }
            .bridge-agent.firing .bridge-agent-dot {
                background: #f59e0b;
                opacity: 1;
                animation: bridge-agent-pulse 0.9s ease-in-out infinite;
            }
            .bridge-agent.fired .bridge-agent-dot {
                background: #34d399;
                opacity: 1;
                box-shadow: 0 0 6px rgba(52, 211, 153, 0.5);
            }
            @keyframes bridge-agent-pulse {
                0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6); }
                50%      { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0); }
            }

            /* Edges */
            .bridge-edge {
                fill: none;
                stroke: var(--accent);
                stroke-width: 2;
                opacity: 0;
                transition: opacity 0.5s ease;
            }
            .bridge-edge.visible {
                opacity: 0.6;
            }
            .bridge-edge.firing {
                opacity: 1;
                stroke: #f59e0b;
                stroke-width: 3;
            }

            /* Event log */
            .bridge-log {
                height: 140px;
                padding: 12px 20px;
                border-top: 1px solid var(--border);
                background: rgba(0, 0, 0, 0.2);
                overflow-y: auto;
                scroll-behavior: smooth;
                font-family: var(--font-mono);
                font-size: 0.72rem;
                line-height: 1.7;
            }
            .bridge-log-row {
                display: flex;
                gap: 14px;
                opacity: 0;
                transform: translateY(4px);
                transition: opacity 0.3s ease, transform 0.3s ease;
            }
            .bridge-log-row.visible {
                opacity: 1;
                transform: translateY(0);
            }
            .bridge-log-time {
                color: var(--text-dim);
                flex-shrink: 0;
            }
            .bridge-log-text {
                color: var(--text);
            }

            /* Status indicator */
            .bridge-status {
                margin-left: auto;
                font-family: var(--font-mono);
                font-size: 0.7rem;
                color: var(--text-dim);
                display: flex;
                align-items: center;
                gap: 6px;
            }
            .bridge-status::before {
                content: "";
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: var(--text-dim);
            }
            .bridge-status.connected {
                color: #34d399;
            }
            .bridge-status.connected::before {
                background: #34d399;
                box-shadow: 0 0 8px rgba(52, 211, 153, 0.5);
            }

            @media (prefers-reduced-motion: reduce) {
                .bridge-node,
                .bridge-edge,
                .bridge-log-row {
                    transition: opacity 0.2s ease !important;
                    transform: none !important;
                }
                .bridge-node.active {
                    animation: none !important;
                }
            }

            /* ===== Four Rings architecture section ===== */
            .rings-section {
                padding-top: 6rem;
                padding-bottom: 6rem;
            }
            .rings {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 1.5rem;
                max-width: 1100px;
                margin: 3rem auto 0;
            }
            .ring {
                position: relative;
                background: var(--surface, #0D0D12);
                border: 1px solid var(--border, #1E1E2A);
                border-radius: 14px;
                padding: 1.75rem 1.75rem 1.5rem;
                display: flex;
                flex-direction: column;
                gap: 0.9rem;
                transition: border-color 0.3s ease, transform 0.3s ease;
            }
            .ring:hover {
                border-color: var(--accent, #3b82f6);
                transform: translateY(-2px);
            }
            .ring-header {
                display: flex;
                align-items: flex-start;
                gap: 0.75rem;
                flex-wrap: wrap;
            }
            .ring-num {
                font-family: var(--font-mono, 'JetBrains Mono', monospace);
                font-size: 0.7rem;
                letter-spacing: 0.1em;
                color: var(--text-dim, #8E8E9A);
                padding: 0.25rem 0.55rem;
                border: 1px solid var(--border, #1E1E2A);
                border-radius: 4px;
                align-self: center;
            }
            .ring-name {
                font-family: var(--font-sans, 'Outfit', sans-serif);
                font-size: 1.2rem;
                font-weight: 600;
                color: var(--text-primary, #E8E8EC);
                margin: 0;
                flex: 1 1 auto;
                min-width: 0;
            }
            .ring-licence {
                font-family: var(--font-mono, 'JetBrains Mono', monospace);
                font-size: 0.68rem;
                padding: 0.25rem 0.6rem;
                border-radius: 999px;
                letter-spacing: 0.02em;
                white-space: nowrap;
            }
            .licence-cc {
                background: rgba(34, 197, 94, 0.12);
                color: #4ade80;
                border: 1px solid rgba(34, 197, 94, 0.25);
            }
            .licence-apache {
                background: rgba(59, 130, 246, 0.12);
                color: #60a5fa;
                border: 1px solid rgba(59, 130, 246, 0.25);
            }
            .licence-eula {
                background: rgba(245, 158, 11, 0.12);
                color: #fbbf24;
                border: 1px solid rgba(245, 158, 11, 0.25);
            }
            .licence-commercial {
                background: rgba(168, 85, 247, 0.12);
                color: #c084fc;
                border: 1px solid rgba(168, 85, 247, 0.25);
            }
            .ring-lead {
                color: var(--text-secondary, #B8B8C4);
                font-size: 0.95rem;
                line-height: 1.55;
                margin: 0;
            }
            .ring-chips {
                list-style: none;
                padding: 0;
                margin: 0;
                display: flex;
                flex-direction: column;
                gap: 0.4rem;
            }
            .ring-chips li {
                font-size: 0.88rem;
                color: var(--text-primary, #E8E8EC);
                padding: 0.4rem 0.7rem;
                background: rgba(255, 255, 255, 0.025);
                border-radius: 6px;
                border-left: 2px solid var(--border, #1E1E2A);
                transition: border-color 0.25s ease;
            }
            .ring:hover .ring-chips li {
                border-left-color: var(--accent, #3b82f6);
            }
            .ring-chips code {
                font-family: var(--font-mono, 'JetBrains Mono', monospace);
                font-size: 0.82rem;
                color: var(--accent, #3b82f6);
                background: rgba(59, 130, 246, 0.08);
                padding: 0.05rem 0.35rem;
                border-radius: 3px;
            }
            .ring-chips strong {
                font-weight: 600;
                color: var(--text-primary, #E8E8EC);
            }
            .ring-cta {
                margin-top: auto;
                display: inline-block;
                font-family: var(--font-mono, 'JetBrains Mono', monospace);
                font-size: 0.85rem;
                color: var(--accent, #3b82f6);
                text-decoration: none;
                padding-top: 0.5rem;
                border-top: 1px dashed var(--border, #1E1E2A);
                transition: color 0.25s ease;
            }
            .ring-cta:hover {
                color: #60a5fa;
            }
            /* Per-ring accent tints on the left edge */
            .ring-standard { border-top: 3px solid rgba(34, 197, 94, 0.5); }
            .ring-impl     { border-top: 3px solid rgba(59, 130, 246, 0.5); }
            .ring-tools    { border-top: 3px solid rgba(245, 158, 11, 0.5); }
            .ring-cloud    { border-top: 3px solid rgba(168, 85, 247, 0.5); }

            /* Mobile: single column */
            @media (max-width: 720px) {
                .rings {
                    grid-template-columns: 1fr;
                    gap: 1rem;
                }
                .ring {
                    padding: 1.5rem 1.25rem 1.25rem;
                }
                .ring-licence {
                    font-size: 0.62rem;
                }
            }

            /* ===== Footer licence row ===== */
            .footer-licences {
                display: flex;
                flex-wrap: wrap;
                gap: 0.5rem 0.75rem;
                justify-content: center;
                align-items: center;
                padding: 1rem 1.5rem 1.5rem;
                font-family: var(--font-mono, 'JetBrains Mono', monospace);
                font-size: 0.72rem;
                color: var(--text-dim, #8E8E9A);
                border-top: 1px solid var(--border, #1E1E2A);
                margin-top: 0.5rem;
            }
            .footer-licence-item strong {
                color: var(--text-secondary, #B8B8C4);
                font-weight: 600;
            }
            .footer-licence-sep {
                color: var(--border, #1E1E2A);
                user-select: none;
            }
            @media (max-width: 640px) {
                .footer-licences {
                    flex-direction: column;
                    gap: 0.35rem;
                    font-size: 0.68rem;
                }
                .footer-licence-sep {
                    display: none;
                }
            }