html, body {
                width: 100% !important;
                min-height: 100vh !important;
                margin: 0 !important;
                padding: 0 !important;
                overflow-x: hidden;
            }

            :root {
                --navy: #0E1826;
                --navy-2: #16273B;
                --paper: #EDF0F2;
                --paper-2: #E2E7EA;
                --ink: #101823;
                --ink-soft: #4B5A68;
                --bronze: #B8823D;
                --bronze-soft: #D9A75C;
                --bronze-bright: #F0B25E;
                --cyan: #3E8FA3;
                --cyan-bright: #5FD1DE;
                --amber: #E8933D;
                --line-dark: rgba(16,21,28,.14);
                --line-light: rgba(237,240,242,.18);
                --line-light-strong: rgba(237,240,242,.32);
                --display: 'Space Grotesk', sans-serif;
                --body: 'Source Serif 4', serif;
            }

            * {
                box-sizing: border-box;
            }

            html {
                scroll-behavior: smooth;
            }

            body {
                margin: 0;
                background: var(--paper);
                color: var(--ink);
                font-family: var(--body);
                font-size: 17px;
                line-height: 1.65;
                -webkit-font-smoothing: antialiased;
                cursor: auto;
                position: relative;
            }

            h1, h2, h3, h4 {
                font-family: var(--display);
                font-weight: 600;
                margin: 0;
                letter-spacing: -0.01em;
                color: inherit;
            }

            p {
                margin: 0;
            }

            a {
                color: inherit;
                text-decoration: none;
            }

            ul {
                margin: 0;
                padding: 0;
                list-style: none;
            }

            img, svg {
                display: block;
                max-width: 100%;
            }

            button {
                font-family: inherit;
                cursor: pointer;
                background: none;
                border: none;
                color: inherit;
            }

            /* film-grain overlay for texture */
            body::after {
                content: "";
                position: fixed;
                inset: 0;
                z-index: 9999;
                pointer-events: none;
                opacity: .025;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
                mix-blend-mode: overlay;
            }

            /* scroll progress bar */
            #scrollbar {
                position: fixed;
                top: 0;
                left: 0;
                height: 2.5px;
                width: 0%;
                background: linear-gradient(90deg, var(--bronze), var(--cyan));
                z-index: 10000;
                transition: width .1s linear;
            }

            /* cursor glow */
            #cursorGlow {
                position: fixed;
                width: 420px;
                height: 420px;
                border-radius: 50%;
                pointer-events: none;
                z-index: 1;
                background: radial-gradient(circle, rgba(184,130,61,.10), transparent 70%);
                transform: translate(-50%,-50%);
                transition: opacity .3s ease;
                opacity: 0;
            }

            .wrap {
                max-width: 1160px;
                margin: 0 auto;
                padding: 0 32px;
                position: relative;
                z-index: 2;
            }

            section {
                position: relative;
            }

            /* corner bracket motif */
            .bracket {
                position: relative;
            }

                .bracket::before, .bracket::after {
                    content: "";
                    position: absolute;
                    width: 14px;
                    height: 14px;
                    border-color: var(--bronze);
                    opacity: .55;
                }

                .bracket::before {
                    top: -1px;
                    left: -1px;
                    border-top: 1.5px solid var(--bronze);
                    border-left: 1.5px solid var(--bronze);
                }

                .bracket::after {
                    bottom: -1px;
                    right: -1px;
                    border-bottom: 1.5px solid var(--bronze);
                    border-right: 1.5px solid var(--bronze);
                }

                .bracket.on-dark::before, .bracket.on-dark::after {
                    border-color: var(--bronze-soft);
                }

            /* ---------- reveal-on-scroll ---------- */
            .reveal {
                opacity: 0;
                transform: translateY(28px);
                filter: blur(4px);
                transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1), filter .8s cubic-bezier(.16,1,.3,1);
                transition-delay: var(--d, 0s);
            }

                .reveal.in-view {
                    opacity: 1;
                    transform: translateY(0);
                    filter: blur(0);
                }

            /* ---------- Nav ---------- */
            header {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                z-index: 100;
                background: rgba(14,24,38,0);
                border-bottom: 1px solid transparent;
                transition: background .4s ease, border-color .4s ease, backdrop-filter .4s ease;
            }

                header.scrolled {
                    background: rgba(14,24,38,.86);
                    backdrop-filter: blur(10px);
                    border-bottom: 1px solid var(--line-light);
                }

            .nav-inner {
                max-width: 1160px;
                margin: 0 auto;
                padding: 18px 32px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: #EDF0F2;
            }

            .brand {
                display: flex;
                align-items: center;
                gap: 10px;
                font-family: var(--display);
                font-weight: 600;
                font-size: 18px;
                letter-spacing: .01em;
            }

                .brand img.logo-mark {
                    width: 60px;
                    height: 60px;
                    object-fit: contain;
                    flex: none;
                }

                .brand img.logo-mark {
                    transition: transform .3s ease, filter .3s ease;
                }

                .brand:hover img.logo-mark {
                    transform: scale(1.05);
                    filter: drop-shadow(0 0 8px rgba(95,209,222,.25));
                }

            @keyframes dotpulse {
                0%, 100% {
                    opacity: .5;
                }

                50% {
                    opacity: 1;
                }
            }

            .brand-word b, .footer-brand .brand-word b {
                font-weight: 700;
            }

            .brand-word {
                font-weight: 500;
            }

            .nav-links {
                display: flex;
                gap: 30px;
                font-family: var(--display);
                font-size: 14.5px;
            }

                .nav-links a {
                    position: relative;
                    opacity: .82;
                    transition: opacity .25s ease;
                    padding: 4px 0;
                }

                    .nav-links a:hover {
                        opacity: 1;
                    }

                    .nav-links a::after {
                        content: "";
                        position: absolute;
                        left: 0;
                        bottom: -2px;
                        width: 0;
                        height: 1.5px;
                        background: var(--bronze-soft);
                        transition: width .3s cubic-bezier(.4,0,.2,1);
                    }

                    .nav-links a:hover::after {
                        width: 100%;
                    }

            .nav-cta {
                font-family: var(--display);
                font-size: 14px;
                font-weight: 600;
                padding: 9px 18px;
                border: 1px solid var(--line-light-strong);
                border-radius: 2px;
                position: relative;
                overflow: hidden;
                transition: border-color .25s ease;
            }

                .nav-cta::before {
                    content: "";
                    position: absolute;
                    inset: 0;
                    background: rgba(237,240,242,.1);
                    transform: translateX(-100%);
                    transition: transform .35s ease;
                }

                .nav-cta:hover::before {
                    transform: translateX(0);
                }

                .nav-cta:hover {
                    border-color: var(--bronze-soft);
                }

            .nav-toggle {
                display: none;
            }

            /* ---------- Hero ---------- */
            .hero {
                background: radial-gradient(ellipse 900px 500px at 78% -10%, rgba(62,143,163,.18), transparent 60%), radial-gradient(ellipse 700px 500px at 10% 90%, rgba(184,130,61,.10), transparent 60%), linear-gradient(180deg, var(--navy) 0%, #0B141F 100%);
                color: #EDF0F2;
                padding: 168px 0 120px;
                overflow: hidden;
                position: relative;
                clip-path: polygon(0 0,100% 0,100% 100%,0 96%);
            }

                .hero::before {
                    content: "";
                    position: absolute;
                    inset: 0;
                    background-image: linear-gradient(rgba(237,240,242,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(237,240,242,.035) 1px, transparent 1px);
                    background-size: 56px 56px;
                    mask-image: linear-gradient(180deg, black, transparent 85%);
                    pointer-events: none;
                    animation: gridshift 22s linear infinite;
                }

            @keyframes gridshift {
                from {
                    background-position: 0 0,0 0;
                }

                to {
                    background-position: 56px 56px, 56px 56px;
                }
            }

            #heroCanvas {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                z-index: 0;
                opacity: .55;
            }

            .hero-inner {
                position: relative;
                z-index: 2;
                display: grid;
                grid-template-columns: 1.05fr .95fr;
                gap: 48px;
                align-items: center;
            }

            .eyebrow {
                display: inline-flex;
                align-items: center;
                gap: 9px;
                font-family: var(--display);
                font-size: 13.5px;
                color: var(--bronze-soft);
                margin-bottom: 22px;
                opacity: 0;
                animation: fadeUp .8s ease forwards;
                animation-delay: .1s;
            }

                .eyebrow .dash {
                    width: 22px;
                    height: 1px;
                    background: var(--bronze-soft);
                    display: inline-block;
                }

            .hero h1 {
                font-size: clamp(34px, 4.6vw, 54px);
                line-height: 1.08;
                max-width: 12ch;
            }

            .word-wrap {
                display: inline-block;
                overflow: hidden;
                vertical-align: top;
            }

            .word {
                display: inline-block;
                transform: translateY(115%);
                animation: wordUp .9s cubic-bezier(.16,1,.3,1) forwards;
            }

            @keyframes wordUp {
                to {
                    transform: translateY(0);
                }
            }

            @keyframes fadeUp {
                from {
                    opacity: 0;
                    transform: translateY(14px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            .hero-sub {
                margin-top: 24px;
                font-size: 18px;
                line-height: 1.7;
                color: #C7D1DA;
                max-width: 46ch;
                opacity: 0;
                animation: fadeUp .8s ease forwards;
                animation-delay: .9s;
            }

            .hero-actions {
                margin-top: 38px;
                display: flex;
                gap: 14px;
                flex-wrap: wrap;
                opacity: 0;
                animation: fadeUp .8s ease forwards;
                animation-delay: 1.05s;
            }

            .btn {
                font-family: var(--display);
                font-size: 14.5px;
                font-weight: 600;
                padding: 13px 24px;
                border-radius: 2px;
                display: inline-block;
                position: relative;
                transition: transform .2s cubic-bezier(.4,0,.2,1), background .25s ease, border-color .25s ease, box-shadow .3s ease;
            }

            .btn-primary {
                background: linear-gradient(100deg, var(--bronze), var(--bronze-bright), var(--cyan-bright), var(--bronze));
                background-size: 300% 100%;
                color: #0E1826;
                animation: btnshift 5s linear infinite;
                box-shadow: 0 0 0 rgba(217,167,92,0);
            }

            @keyframes btnshift {
                from {
                    background-position: 0% 0;
                }

                to {
                    background-position: 300% 0;
                }
            }

            .btn-primary:hover {
                box-shadow: 0 10px 34px -6px rgba(217,167,92,.7);
            }

            .btn-ghost {
                border: 1px solid var(--line-light-strong);
                color: #EDF0F2;
            }

                .btn-ghost:hover {
                    border-color: var(--bronze-soft);
                    box-shadow: 0 0 0 1px var(--bronze-soft), 0 10px 30px -10px rgba(217,167,92,.4);
                }

            .scroll-cue {
                position: absolute;
                bottom: 22px;
                left: 32px;
                display: flex;
                align-items: center;
                gap: 10px;
                font-family: var(--display);
                font-size: 11.5px;
                letter-spacing: .06em;
                color: #7C8B99;
                z-index: 2;
                opacity: 0;
                animation: fadeUp .8s ease forwards;
                animation-delay: 1.3s;
            }

                .scroll-cue .line {
                    width: 1px;
                    height: 28px;
                    background: linear-gradient(#7C8B99, transparent);
                    position: relative;
                    overflow: hidden;
                }

                    .scroll-cue .line::after {
                        content: "";
                        position: absolute;
                        top: -28px;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background: linear-gradient(var(--bronze-soft), transparent);
                        animation: scrolldrip 2s ease-in-out infinite;
                    }

            @keyframes scrolldrip {
                to {
                    top: 28px;
                }
            }

            .hero-model {
                min-width: 0;
                position: relative;
                z-index: 2;
            }

                .hero-model svg {
                    width: 100%;
                    height: auto;
                }

            .draw {
                stroke-dasharray: 800;
                stroke-dashoffset: 800;
                animation: draw 2.1s cubic-bezier(.4,0,.2,1) forwards;
            }

            .draw2 {
                animation-delay: .35s;
            }

            .draw3 {
                animation-delay: .6s;
            }

            @keyframes draw {
                to {
                    stroke-dashoffset: 0;
                }
            }

            .node-pulse {
                animation: pulse 2.6s ease-in-out infinite;
                transform-origin: center;
            }

            @keyframes pulse {
                0%, 100% {
                    opacity: .55;
                    r: 3.2;
                }

                50% {
                    opacity: 1;
                    r: 4.4;
                }
            }

            .flow-dash {
                stroke-dasharray: 6 8;
                animation: flowmove 1.6s linear infinite;
            }

            @keyframes flowmove {
                to {
                    stroke-dashoffset: -56;
                }
            }

            /* ---------- Section shells ---------- */
            .section {
                padding: 104px 0;
            }

            .section-tight {
                padding: 88px 0;
            }

            .on-dark {
                background: var(--navy);
                color: #EDF0F2;
            }

            .kicker {
                display: flex;
                align-items: center;
                gap: 14px;
                margin-bottom: 18px;
            }

                .kicker .num {
                    font-family: var(--display);
                    font-size: 13px;
                    color: var(--bronze);
                    border: 1px solid rgba(184,130,61,.4);
                    padding: 3px 8px;
                    border-radius: 2px;
                    position: relative;
                    overflow: hidden;
                }

                    .kicker .num::after {
                        content: "";
                        position: absolute;
                        left: 0;
                        top: 0;
                        bottom: 0;
                        width: 0;
                        background: rgba(184,130,61,.16);
                        transition: width .6s cubic-bezier(.16,1,.3,1);
                    }

            .reveal.in-view .kicker .num::after {
                width: 100%;
            }

            .on-dark .kicker .num {
                color: var(--bronze-soft);
                border-color: rgba(217,167,92,.4);
            }

            .kicker .rule {
                flex: 1;
                height: 1px;
                background: var(--line-dark);
                position: relative;
                overflow: hidden;
            }

            .on-dark .kicker .rule {
                background: var(--line-light);
            }

            .kicker .rule::after {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                width: 0;
                background: var(--bronze);
                opacity: .6;
                transition: width 1s cubic-bezier(.16,1,.3,1) .2s;
            }

            .reveal.in-view .kicker .rule::after {
                width: 100%;
            }

            h2.h-section {
                font-size: clamp(26px, 3vw, 36px);
                max-width: 16ch;
                margin-bottom: 20px;
            }

            .lede {
                font-size: 18px;
                color: var(--ink-soft);
                max-width: 62ch;
                line-height: 1.7;
            }

            .on-dark .lede {
                color: #B9C4CE;
            }

            /* ---------- tilt cards ---------- */
            [data-tilt] {
                transform-style: preserve-3d;
                will-change: transform;
                transition: transform .15s ease-out, box-shadow .3s ease;
            }

            /* ---------- About ---------- */
            .about-grid {
                display: grid;
                grid-template-columns: 1.2fr .8fr;
                gap: 64px;
                margin-top: 44px;
            }

            .about-copy p + p {
                margin-top: 18px;
            }

            .about-copy {
                font-size: 17px;
                color: var(--ink-soft);
            }

            .approach-flow {
                font-family: var(--display);
                font-size: 14px;
                letter-spacing: .02em;
                display: flex;
                align-items: center;
                gap: 8px;
                color: var(--bronze);
                margin-top: 26px;
                flex-wrap: wrap;
            }

                .approach-flow span.step {
                    color: var(--ink);
                    position: relative;
                }

                .approach-flow span.arrow {
                    color: var(--bronze);
                    opacity: .7;
                    display: inline-block;
                    animation: arrowslide 1.6s ease-in-out infinite;
                }

            @keyframes arrowslide {
                0%, 100% {
                    transform: translateX(0);
                }

                50% {
                    transform: translateX(3px);
                }
            }

            .focus-list {
                border-top: 1px solid var(--line-dark);
                padding-top: 20px;
            }

                .focus-list li {
                    padding: 12px 0;
                    border-bottom: 1px solid var(--line-dark);
                    display: flex;
                    justify-content: space-between;
                    font-family: var(--display);
                    font-size: 14.5px;
                    color: var(--ink-soft);
                    transition: padding-left .3s ease, color .3s ease;
                    position: relative;
                }

                    .focus-list li:hover {
                        padding-left: 10px;
                        color: var(--ink);
                    }

                        .focus-list li:hover span.mk {
                            color: var(--bronze);
                        }

                    .focus-list li span.mk {
                        color: var(--bronze);
                        transition: color .3s ease;
                    }

            /* ---------- Services / accordion ---------- */
            .service-list {
                margin-top: 44px;
                border-top: 1px solid var(--line-dark);
            }

            .service {
                border-bottom: 1px solid var(--line-dark);
            }

            .service-head {
                width: 100%;
                display: flex;
                align-items: center;
                gap: 22px;
                padding: 26px 4px;
                text-align: left;
                background: none;
                position: relative;
            }

                .service-head::before {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 0;
                    bottom: 0;
                    width: 0;
                    background: linear-gradient(90deg, rgba(184,130,61,.08), transparent);
                    transition: width .4s ease;
                }

                .service-head:hover::before {
                    width: 100%;
                }

                .service-head .snum {
                    font-family: var(--display);
                    font-size: 14px;
                    color: var(--bronze);
                    min-width: 28px;
                }

                .service-head h3 {
                    font-size: 20px;
                    flex: 1;
                    transition: transform .3s ease;
                }

                .service-head:hover h3 {
                    transform: translateX(4px);
                }

                .service-head .plus {
                    font-family: var(--display);
                    font-size: 20px;
                    color: var(--bronze);
                    transition: transform .4s cubic-bezier(.4,0,.2,1);
                    min-width: 20px;
                    text-align: center;
                }

            .service.open .plus {
                transform: rotate(135deg);
            }

            .service-body {
                max-height: 0;
                overflow: hidden;
                transition: max-height .5s cubic-bezier(.4,0,.2,1);
            }

            .service-body-inner {
                padding: 0 4px 30px 50px;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 8px 32px;
                color: var(--ink-soft);
                font-size: 15.5px;
            }

                .service-body-inner p.intro {
                    grid-column: 1/-1;
                    margin-bottom: 6px;
                    max-width: 70ch;
                }

                .service-body-inner ul li {
                    padding: 5px 0;
                    position: relative;
                    padding-left: 16px;
                }

                    .service-body-inner ul li::before {
                        content: "";
                        position: absolute;
                        left: 0;
                        top: 14px;
                        width: 5px;
                        height: 1px;
                        background: var(--bronze);
                    }

            /* ---------- RFQ flow ---------- */
            .rfq-flow {
                display: flex;
                align-items: stretch;
                gap: 0;
                margin-top: 46px;
                flex-wrap: wrap;
                position: relative;
            }

            .rfq-step {
                flex: 1;
                min-width: 180px;
                padding: 26px 22px;
                border: 1px solid var(--line-dark);
                position: relative;
                transition: background .3s ease, box-shadow .3s ease;
            }

                .rfq-step:hover {
                    background: rgba(184,130,61,.05);
                    box-shadow: inset 0 0 0 1px var(--bronze);
                }

                .rfq-step + .rfq-step {
                    border-left: none;
                }

                .rfq-step h4 {
                    font-size: 17px;
                    margin-bottom: 8px;
                    color: var(--ink);
                }

                .rfq-step p {
                    font-size: 14.5px;
                    color: var(--ink-soft);
                }

                .rfq-step .rn {
                    font-family: var(--display);
                    font-size: 13px;
                    color: var(--bronze);
                    display: block;
                    margin-bottom: 10px;
                }

            .rfq-chevs {
                position: absolute;
                top: 50%;
                right: -13px;
                transform: translateY(-50%);
                z-index: 2;
                display: flex;
                width: 26px;
                height: 26px;
                align-items: center;
                justify-content: center;
                color: var(--bronze);
                font-family: var(--display);
                font-size: 14px;
            }

                .rfq-chevs span {
                    animation: chevbounce 1.4s ease-in-out infinite;
                }

            @keyframes chevbounce {
                0%, 100% {
                    transform: translateX(0);
                    opacity: .5;
                }

                50% {
                    transform: translateX(4px);
                    opacity: 1;
                }
            }

            .rfq-note {
                margin-top: 28px;
                padding-left: 16px;
                border-left: 2px solid var(--bronze);
                font-size: 15px;
                color: var(--ink-soft);
                max-width: 60ch;
            }

            /* ---------- Retainer chips ---------- */
            .chip-row {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                margin-top: 36px;
            }

            .chip {
                font-family: var(--display);
                font-size: 13.5px;
                padding: 9px 15px;
                border: 1px solid var(--line-dark);
                border-radius: 2px;
                color: var(--ink-soft);
                transition: border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
            }

                .chip:hover {
                    border-color: var(--bronze);
                    color: var(--ink);
                    transform: translateY(-2px);
                    box-shadow: 0 6px 16px -8px rgba(16,21,28,.35);
                }

            /* ---------- Non-exclusive ---------- */
            .duo {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 2px;
                margin-top: 44px;
                background: var(--line-dark);
            }

            .duo-col {
                background: var(--paper);
                padding: 34px 30px;
                transition: background .3s ease;
            }

                .duo-col:hover {
                    background: #F3F5F6;
                }

                .duo-col h4 {
                    font-size: 16px;
                    margin-bottom: 16px;
                    color: var(--bronze);
                    font-family: var(--display);
                }

                .duo-col li {
                    padding: 9px 0;
                    font-size: 15px;
                    color: var(--ink-soft);
                    border-top: 1px solid var(--line-dark);
                }

                    .duo-col li:first-of-type {
                        border-top: none;
                    }

            /* ---------- Approach stepper ---------- */
            .stepper {
                margin-top: 48px;
                display: grid;
                grid-template-columns: 220px 1fr;
                gap: 0;
            }

            .step-nav {
                display: flex;
                flex-direction: column;
                border-left: 1px solid var(--line-dark);
                position: relative;
            }

                .step-nav .step-track {
                    position: absolute;
                    left: -1px;
                    top: 0;
                    width: 2px;
                    background: var(--bronze);
                    transition: top .4s cubic-bezier(.4,0,.2,1), height .4s cubic-bezier(.4,0,.2,1);
                }

                .step-nav button {
                    text-align: left;
                    padding: 14px 20px;
                    font-family: var(--display);
                    font-size: 14px;
                    color: var(--ink-soft);
                    transition: color .25s ease, padding-left .25s ease;
                }

                    .step-nav button.active {
                        color: var(--ink);
                        padding-left: 26px;
                    }

            .step-panels {
                position: relative;
                min-height: 140px;
                padding-left: 36px;
            }

            .step-panel {
                display: none;
            }

                .step-panel.active {
                    display: block;
                    animation: fade .5s cubic-bezier(.16,1,.3,1);
                }

            @keyframes fade {
                from {
                    opacity: 0;
                    transform: translateY(10px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            .step-panel .sn {
                font-family: var(--display);
                font-size: 13px;
                color: var(--bronze);
                display: block;
                margin-bottom: 8px;
            }

            .step-panel h4 {
                font-size: 21px;
                margin-bottom: 10px;
            }

            .step-panel p {
                color: var(--ink-soft);
                font-size: 16px;
                max-width: 56ch;
            }

            /* ---------- Sectors ---------- */
            .sector-cloud {
                margin-top: 44px;
                display: flex;
                flex-wrap: wrap;
                gap: 12px;
            }

                .sector-cloud .chip {
                    font-size: 14.5px;
                    padding: 11px 18px;
                }

            .ecosystem-note {
                margin-top: 30px;
                font-size: 15.5px;
                color: var(--ink-soft);
                max-width: 70ch;
            }

                .ecosystem-note b {
                    color: var(--ink);
                    font-weight: 600;
                }

            /* ---------- Why grid (dark) ---------- */
            .why-grid {
                margin-top: 48px;
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 1px;
                background: var(--line-light);
            }

            .why-card {
                background: var(--navy);
                padding: 30px 26px;
                position: relative;
                overflow: hidden;
            }

                .why-card::before {
                    content: "";
                    position: absolute;
                    inset: 0;
                    opacity: 0;
                    background: radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(184,130,61,.14), transparent 70%);
                    transition: opacity .3s ease;
                }

                .why-card:hover::before {
                    opacity: 1;
                }

                .why-card h4 {
                    font-size: 17px;
                    margin-bottom: 10px;
                    color: #EDF0F2;
                }

                .why-card p {
                    font-size: 14.5px;
                    color: #A9B5C0;
                    line-height: 1.6;
                }

                .why-card .wn {
                    color: var(--bronze-soft);
                    font-family: var(--display);
                    font-size: 12.5px;
                    display: block;
                    margin-bottom: 12px;
                }

            /* ---------- Model diagram ---------- */
            .model-section {
                background: radial-gradient(ellipse 700px 400px at 15% 100%, rgba(184,130,61,.10), transparent 60%), linear-gradient(180deg, #0B141F 0%, var(--navy) 100%);
                overflow: hidden;
            }

            .model-grid {
                margin-top: 56px;
                display: grid;
                grid-template-columns: 1fr auto 1fr;
                gap: 0 26px;
                align-items: center;
                position: relative;
            }

            .model-col {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

                .model-col.center {
                    align-items: center;
                    gap: 16px;
                }

            .model-item {
                font-family: var(--display);
                font-size: 14px;
                padding: 12px 16px;
                border: 1px solid var(--line-light);
                border-radius: 2px;
                color: #C7D1DA;
                transition: border-color .3s ease, color .3s ease, background .3s ease, transform .3s ease;
                cursor: none;
                position: relative;
                z-index: 1;
                background: var(--navy);
            }

                .model-item.dim {
                    opacity: .3;
                }

                .model-item.lit {
                    border-color: var(--bronze-soft);
                    color: #F3E7D3;
                    background: rgba(184,130,61,.1);
                    transform: translateX(4px);
                    box-shadow: 0 0 22px -6px rgba(217,167,92,.5);
                }

            .model-col[data-group="right"] .model-item.lit {
                transform: translateX(-4px);
            }

            .model-hub {
                font-family: var(--display);
                font-weight: 700;
                font-size: 19px;
                color: #0E1826;
                background: var(--bronze-soft);
                padding: 20px 26px;
                border-radius: 2px;
                text-align: center;
                position: relative;
                z-index: 1;
                animation: hubglow 3s ease-in-out infinite;
            }

            @keyframes hubglow {
                0%, 100% {
                    box-shadow: 0 0 0 rgba(217,167,92,0);
                }

                50% {
                    box-shadow: 0 0 34px -4px rgba(217,167,92,.65);
                }
            }

            .model-hub small {
                display: block;
                font-weight: 500;
                font-size: 11.5px;
                letter-spacing: .03em;
                margin-top: 4px;
                opacity: .75;
            }

            .model-label {
                text-align: center;
                font-family: var(--display);
                font-size: 12px;
                letter-spacing: .03em;
                color: #7C8B99;
                margin-bottom: 14px;
            }

            .model-final {
                grid-column: 1/-1;
                margin-top: 34px;
                text-align: center;
                padding-top: 26px;
                border-top: 1px solid var(--line-light);
            }

                .model-final .op {
                    font-family: var(--display);
                    font-size: 15px;
                    color: var(--bronze-soft);
                }

            /* ---------- Disclaimer ---------- */
            .disclaimer {
                border: 1px solid var(--line-dark);
                padding: 34px 36px;
                margin-top: 40px;
            }

                .disclaimer p {
                    font-size: 15px;
                    color: var(--ink-soft);
                    line-height: 1.75;
                }

                    .disclaimer p + p {
                        margin-top: 14px;
                    }

            /* ---------- Vision ---------- */
            .vision {
                background: var(--navy);
                color: #EDF0F2;
                padding: 110px 0;
                text-align: center;
                overflow: hidden;
                position: relative;
            }

                .vision::before {
                    content: "";
                    position: absolute;
                    inset: 0;
                    background: radial-gradient(ellipse 600px 300px at 50% 50%, rgba(62,143,163,.14), transparent 70%);
                    animation: auroradrift 8s ease-in-out infinite alternate;
                }

            @keyframes auroradrift {
                from {
                    transform: translateX(-40px) scale(1);
                }

                to {
                    transform: translateX(40px) scale(1.08);
                }
            }

            .vision blockquote {
                position: relative;
                font-family: var(--display);
                font-size: clamp(24px, 3.4vw, 36px);
                font-weight: 500;
                line-height: 1.35;
                max-width: 20ch;
                margin: 0 auto;
                background: linear-gradient(100deg, #EDF0F2 30%, var(--bronze-soft) 45%, #EDF0F2 60%);
                background-size: 250% 100%;
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent;
                animation: shimmer 5s linear infinite;
            }

            @keyframes shimmer {
                from {
                    background-position: 200% 0;
                }

                to {
                    background-position: -50% 0;
                }
            }

            .vision .lede {
                position: relative;
                margin: 26px auto 0;
                text-align: center;
            }

            .vision-tags {
                position: relative;
                margin-top: 38px;
                display: flex;
                justify-content: center;
                gap: 12px;
                flex-wrap: wrap;
                font-family: var(--display);
                font-size: 13px;
                color: var(--bronze-soft);
            }

                .vision-tags span {
                    border: 1px solid rgba(217,167,92,.35);
                    padding: 8px 14px;
                    border-radius: 2px;
                    transition: transform .3s ease, background .3s ease;
                }

                    .vision-tags span:hover {
                        transform: translateY(-3px);
                        background: rgba(217,167,92,.1);
                    }

            /* ---------- Footer ---------- */
            footer {
                background: #0B141F;
                color: #EDF0F2;
                padding: 64px 0 32px;
            }

            .footer-grid {
                display: grid;
                grid-template-columns: 1.3fr 1fr 1fr 1fr;
                gap: 40px;
            }

            .footer-brand {
                font-family: var(--display);
                font-weight: 600;
                font-size: 19px;
                display: flex;
                align-items: center;
                gap: 10px;
            }

                .footer-brand img.logo-mark {
                    width: 55px;
                    height: 55px;
                    object-fit: contain;
                    flex: none;
                }

            .footer-tag {
                margin-top: 14px;
                color: #8FA1AF;
                font-size: 14.5px;
                max-width: 34ch;
            }

            footer h5 {
                font-family: var(--display);
                font-size: 13.5px;
                color: var(--bronze-soft);
                margin-bottom: 14px;
            }

            footer .fl li {
                padding: 6px 0;
                color: #B9C4CE;
                font-size: 14.5px;
                transition: transform .25s ease, color .25s ease;
            }

                footer .fl li:hover {
                    transform: translateX(4px);
                    color: #EDF0F2;
                }

                footer .fl li a {
                    color: inherit;
                }

                    footer .fl li a:hover {
                        color: var(--bronze-soft);
                    }

            .footer-bottom {
                margin-top: 56px;
                padding-top: 24px;
                border-top: 1px solid var(--line-light);
                display: flex;
                justify-content: space-between;
                font-size: 13px;
                color: #6D7E8C;
                flex-wrap: wrap;
                gap: 10px;
            }

            /* ---------- Responsive ---------- */
            @media (max-width: 880px) {
                .nav-links, .nav-cta {
                    display: none;
                }

                .nav-toggle {
                    display: block;
                    color: #EDF0F2;
                    font-family: var(--display);
                    font-size: 14px;
                    border: 1px solid var(--line-light-strong);
                    padding: 8px 14px;
                    border-radius: 2px;
                }

                .hero-inner {
                    grid-template-columns: 1fr;
                }

                .hero {
                    padding-top: 130px;
                }

                .about-grid {
                    grid-template-columns: 1fr;
                    gap: 36px;
                }

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

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

                .model-grid {
                    grid-template-columns: 1fr;
                    gap: 28px;
                }

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

                .step-nav {
                    flex-direction: row;
                    flex-wrap: wrap;
                    border-left: none;
                    border-top: 1px solid var(--line-dark);
                }

                    .step-nav .step-track {
                        display: none;
                    }

                    .step-nav button {
                        border-left: none;
                        border-top: 2px solid transparent;
                        margin-left: 0;
                        margin-top: -1px;
                    }

                        .step-nav button.active {
                            border-top-color: var(--bronze);
                            padding-left: 20px;
                        }

                .step-panels {
                    padding-left: 0;
                    margin-top: 20px;
                }

                .service-body-inner {
                    grid-template-columns: 1fr;
                }

                .footer-grid {
                    grid-template-columns: 1fr;
                    gap: 32px;
                }

                #cursorGlow {
                    display: none;
                }
            }

            @media (max-width: 560px) {
                .wrap {
                    padding: 0 20px;
                }

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

                .rfq-flow {
                    flex-direction: column;
                }

                .rfq-step + .rfq-step {
                    border-left: 1px solid var(--line-dark);
                    border-top: none;
                }

                .rfq-chevs {
                    top: auto;
                    bottom: -13px;
                    right: 50%;
                    transform: translateX(50%) rotate(90deg);
                }
            }

            @media (prefers-reduced-motion: reduce) {
                html {
                    scroll-behavior: auto;
                }

                .draw, .node-pulse, .flow-dash, .word, .eyebrow, .hero-sub, .hero-actions, .scroll-cue, .hero::before, .model-hub, .vision::before, .vision blockquote {
                    animation: none !important;
                }

                .reveal {
                    opacity: 1;
                    transform: none;
                    filter: none;
                    transition: none;
                }

                .word {
                    transform: translateY(0);
                }

                * {
                    transition-duration: .001ms !important;
                }

                #cursorGlow {
                    display: none;
                }
            }

            ::selection {
                background: var(--bronze);
                color: #0E1826;
            }

            :focus-visible {
                outline: 2px solid var(--bronze);
                outline-offset: 2px;
            }

            /* ---------- Preloader ---------- */
            #preloader {
                position: fixed;
                inset: 0;
                z-index: 20000;
                background: var(--navy);
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                transition: transform .9s cubic-bezier(.76,0,.24,1), opacity .6s ease .3s;
            }

                #preloader.hide {
                    transform: translateY(-100%);
                    opacity: 0;
                    pointer-events: none;
                }

                #preloader img.logo-mark {
                    width: 110px;
                    height: 72px;
                    object-fit: contain;
                }

                #preloader .pl-bar {
                    width: 180px;
                    height: 1px;
                    background: rgba(237,240,242,.15);
                    margin-top: 26px;
                    position: relative;
                    overflow: hidden;
                }

                    #preloader .pl-bar::after {
                        content: "";
                        position: absolute;
                        left: 0;
                        top: 0;
                        bottom: 0;
                        width: 0%;
                        background: linear-gradient(90deg, var(--bronze), var(--cyan-bright));
                        animation: plfill 1.3s cubic-bezier(.4,0,.2,1) forwards .1s;
                    }

            @keyframes plfill {
                to {
                    width: 100%;
                }
            }

            #preloader .pl-label {
                font-family: var(--display);
                font-size: 11px;
                letter-spacing: .14em;
                color: #7C8B99;
                margin-top: 16px;
            }

            body.loading {
                overflow: hidden;
                height: 100vh;
            }

            /* ---------- Custom cursor ---------- */
            #cursorDot, #cursorRing {
                position: fixed;
                top: 0;
                left: 0;
                z-index: 10001;
                pointer-events: none;
                border-radius: 50%;
                transform: translate(-50%,-50%);
            }

            #cursorDot {
                width: 7px;
                height: 7px;
                background: var(--bronze-bright);
                opacity: 0;
                transition: opacity .3s ease;
            }

            #cursorRing {
                width: 36px;
                height: 36px;
                border: 1px solid rgba(217,167,92,.55);
                opacity: 0;
                transition: opacity .3s ease, width .25s ease, height .25s ease, background .25s ease, border-color .25s ease;
            }

                #cursorRing.show, #cursorDot.show {
                    opacity: 1;
                }

                #cursorRing.hovering {
                    width: 58px;
                    height: 58px;
                    background: rgba(217,167,92,.12);
                    border-color: var(--bronze-bright);
                }

            @media (pointer:fine) {
                body {
                    cursor: none;
                }

                a, button {
                    cursor: none;
                }
            }

            @media (pointer:coarse) {
                #cursorDot, #cursorRing {
                    display: none;
                }
            }

            /* ---------- Gradient text ---------- */
            .grad-text {
                background: linear-gradient(100deg, var(--ink) 20%, var(--bronze) 45%, var(--cyan) 60%, var(--ink) 80%);
                background-size: 300% 100%;
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent;
                animation: gtshift 7s linear infinite;
            }

            .on-dark .grad-text, .model-section .grad-text {
                background: linear-gradient(100deg, #EDF0F2 20%, var(--bronze-bright) 45%, var(--cyan-bright) 60%, #EDF0F2 80%);
                background-size: 300% 100%;
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent;
                animation: gtshift 7s linear infinite;
            }

            @keyframes gtshift {
                from {
                    background-position: 0% 0;
                }

                to {
                    background-position: 300% 0;
                }
            }

            .hero h1 .word.grad-text {
                animation: wordUp .9s cubic-bezier(.16,1,.3,1) forwards, gtshift 6s linear infinite 1s;
            }

            /* ---------- Marquee ---------- */
            .marquee-band {
                background: linear-gradient(90deg, #0B141F, var(--navy-2), #0B141F);
                border-top: 1px solid var(--line-light);
                border-bottom: 1px solid var(--line-light);
                padding: 16px 0;
                overflow: hidden;
                white-space: nowrap;
                position: relative;
                z-index: 2;
            }

            .marquee-track {
                display: inline-flex;
                gap: 48px;
                animation: marquee 26s linear infinite;
            }

                .marquee-track span {
                    font-family: var(--display);
                    font-size: 15px;
                    letter-spacing: .05em;
                    color: var(--bronze-soft);
                    display: inline-flex;
                    align-items: center;
                    gap: 14px;
                }

                    .marquee-track span::after {
                        content: "◆";
                        font-size: 8px;
                        color: var(--cyan-bright);
                        margin-left: 14px;
                        opacity: .7;
                    }

            @keyframes marquee {
                from {
                    transform: translateX(0);
                }

                to {
                    transform: translateX(-50%);
                }
            }

            /* ---------- Blobs & floating pills ---------- */
            .blob {
                position: absolute;
                border-radius: 50%;
                filter: blur(70px);
                mix-blend-mode: screen;
                pointer-events: none;
                z-index: 0;
            }

            .blob-1 {
                width: 520px;
                height: 520px;
                background: radial-gradient(circle, var(--bronze) 0%, transparent 70%);
                top: -160px;
                right: -120px;
                opacity: .55;
                animation: blobmove1 16s ease-in-out infinite;
            }

            .blob-2 {
                width: 460px;
                height: 460px;
                background: radial-gradient(circle, var(--cyan-bright) 0%, transparent 70%);
                bottom: -180px;
                left: -100px;
                opacity: .4;
                animation: blobmove2 19s ease-in-out infinite;
            }

            .blob-3 {
                width: 340px;
                height: 340px;
                background: radial-gradient(circle, var(--amber) 0%, transparent 70%);
                top: 30%;
                left: 38%;
                opacity: .3;
                animation: blobmove3 14s ease-in-out infinite;
            }

            @keyframes blobmove1 {
                0%, 100% {
                    transform: translate(0,0) scale(1);
                }

                50% {
                    transform: translate(-60px,50px) scale(1.15);
                }
            }

            @keyframes blobmove2 {
                0%, 100% {
                    transform: translate(0,0) scale(1);
                }

                50% {
                    transform: translate(60px,-40px) scale(1.1);
                }
            }

            @keyframes blobmove3 {
                0%, 100% {
                    transform: translate(0,0) scale(1);
                }

                50% {
                    transform: translate(-40px,-30px) scale(1.2);
                }
            }

            .float-pill {
                position: absolute;
                z-index: 2;
                font-family: var(--display);
                font-size: 12.5px;
                color: #EDF0F2;
                padding: 10px 16px;
                border-radius: 30px;
                background: rgba(237,240,242,.06);
                backdrop-filter: blur(8px);
                border: 1px solid rgba(237,240,242,.18);
                box-shadow: 0 8px 30px -10px rgba(0,0,0,.5);
                animation: pillfloat 5s ease-in-out infinite;
            }

                .float-pill.p1 {
                    top: 14%;
                    right: 6%;
                    animation-delay: 0s;
                }

                .float-pill.p2 {
                    top: 56%;
                    right: 14%;
                    animation-delay: 1.2s;
                }

                .float-pill.p3 {
                    top: 80%;
                    right: 2%;
                    animation-delay: 2.4s;
                }

            @keyframes pillfloat {
                0%, 100% {
                    transform: translateY(0);
                }

                50% {
                    transform: translateY(-12px);
                }
            }

            @media (max-width: 880px) {
                .float-pill {
                    display: none;
                }

                .blob-3 {
                    display: none;
                }
            }

            @media (prefers-reduced-motion: reduce) {
                .blob, .float-pill, .marquee-track, .grad-text {
                    animation: none !important;
                }

                #preloader {
                    display: none;
                }
            }