/* ---------- Design tokens ---------- */
    :root {
        --bg: #ffffff;
        --fg: #182036;
        --muted: #6b7280;
        --border: #e4e8ee;
        --surface: #f6f8fb;
        --surface-2: #eef2f7;
        --card: #ffffff;
        --navy: #1e2a4a;
        --navy-2: #2a375c;
        --navy-fg: #f7f9fc;
        --teal: #1f8fa8;
        --teal-soft: #d6edf2;
        --destructive: #c0392b;
        --radius: .75rem;
        --shadow-card: 0 1px 2px rgba(30, 42, 74, .06), 0 8px 24px -12px rgba(30, 42, 74, .14);
        --shadow-elev: 0 1px 0 rgba(30, 42, 74, .06), 0 20px 40px -20px rgba(30, 42, 74, .25);
        --grad-navy: linear-gradient(135deg, #1e2a4a 0%, #33436b 100%);
        --grad-hero:
            radial-gradient(1200px 600px at 80% -10%, rgba(31, 143, 168, .18), transparent 60%),
            radial-gradient(900px 500px at -10% 20%, rgba(30, 42, 74, .12), transparent 60%),
            linear-gradient(180deg, var(--surface), var(--bg));
        --grad-heading: linear-gradient(90deg, #1e2a4a 0%, #1f8fa8 100%);
    }

    * {
        box-sizing: border-box;
        border-color: var(--border)
    }

    html {
        scroll-behavior: smooth;
        scroll-padding-top: 5rem;
        -webkit-font-smoothing: antialiased;
        font-family: 'Inter', ui-sans-serif, system-ui, sans-serif
    }

    body {
        margin: 0;
        background: var(--bg);
        color: var(--fg);
        line-height: 1.55
    }

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

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

    h1,
    h2,
    h3,
    h4 {
        font-family: 'Inter', sans-serif;
        letter-spacing: -0.02em;
        color: var(--navy);
        margin: 0
    }

    p {
        margin: 0
    }

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

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

    input,
    select,
    textarea {
        font: inherit;
        color: inherit
    }

    .mono {
        font-family: 'JetBrains Mono', ui-monospace, monospace
    }

    .balance {
        text-wrap: balance
    }

    /* ---------- Layout ---------- */
    .container {
        width: 100%;
        max-width: 80rem;
        margin: 0 auto;
        padding: 0 1.25rem
    }

    .section {
        padding: 5rem 0
    }

    @media(min-width:768px) {
        .section {
            padding: 7rem 0
        }
    }

    .section.surface {
        background: var(--surface)
    }

    .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        border: 1px solid var(--border);
        border-radius: 9999px;
        padding: .25rem .75rem;
        font-size: .72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--teal);
        background: var(--bg)
    }

    .eyebrow .dot {
        width: 6px;
        height: 6px;
        border-radius: 9999px;
        background: var(--teal)
    }

    .section-head {
        max-width: 48rem;
        margin-bottom: 4rem
    }

    .section-head h2 {
        font-size: clamp(1.75rem, 3vw, 2.75rem);
        font-weight: 600;
        margin-top: 1rem;
        line-height: 1;
    }

    .section-head p {
        margin-top: 1.25rem;
        color: var(--muted);
        font-size: 1.05rem
    }

    /* ---------- Buttons ---------- */
    .btn {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        border-radius: .5rem;
        padding: .75rem 1.25rem;
        font-size: .875rem;
        font-weight: 500;
        transition: transform .2s, background .2s, color .2s;
        border: 1px solid transparent
    }

    .btn:hover {
        transform: translateY(-2px)
    }

    .btn-primary {
        background: var(--grad-navy);
        color: #fff;
        box-shadow: var(--shadow-elev)
    }

    .btn-ghost {
        border-color: var(--border);
        background: var(--bg);
        color: var(--navy)
    }

    .btn-ghost:hover {
        background: var(--surface)
    }

    .btn-white {
        background: #fff;
        color: var(--navy)
    }

    .btn-outline-white {
        border-color: rgba(255, 255, 255, .25);
        background: rgba(255, 255, 255, .05);
        color: #fff
    }

    .btn-outline-white:hover {
        background: rgba(255, 255, 255, .1)
    }

    /* ---------- Header ---------- */
    .site-header {
        position: sticky;
        top: 0;
        z-index: 50;
        width: 100%;
        background: rgba(255, 255, 255, .65);
        backdrop-filter: blur(8px);
        transition: background .2s, border-color .2s;
        border-bottom: 1px solid transparent
    }

    .site-header.scrolled {
        background: rgba(255, 255, 255, .9);
        border-color: var(--border)
    }

    .header-inner {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        height: 4rem
    }

    .brand {
        display: flex;
        align-items: center;
        gap: .65rem;
        min-width: 0
    }

    .brand-mark {
        display: grid;
        place-items: center;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: .6rem;
        background: var(--grad-navy);
        color: #fff;
        box-shadow: var(--shadow-card)
    }

    .brand-text {
        line-height: 1.15
    }

    .brand-text .name {
        font-size: .9rem;
        font-weight: 600;
        color: var(--navy)
    }

    .brand-text .sub {
        font-size: .625rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--muted)
    }

    .nav {
        margin-left: auto;
        display: none;
        gap: .25rem;
        align-items: center
    }

    .nav a {
        padding: .5rem .75rem;
        border-radius: .4rem;
        font-size: .875rem;
        font-weight: 500;
        color: rgba(24, 32, 54, .75)
    }

    .nav a:hover {
        color: var(--navy);
        background: var(--surface)
    }

    .header-cta {
        margin-left: auto;
        display: none
    }

    .menu-btn {
        margin-left: auto;
        display: grid;
        place-items: center;
        width: 2.5rem;
        height: 2.5rem;
        border: 1px solid var(--border);
        border-radius: .5rem
    }

    @media(min-width:640px) {
        .header-cta {
            display: inline-flex
        }

        .menu-btn {
            margin-left: .5rem
        }
    }

    @media(min-width:1024px) {
        .nav {
            display: flex
        }

        .header-cta {
            margin-left: .5rem
        }

        .menu-btn {
            display: none
        }
    }

    .mobile-nav {
        display: none;
        border-top: 1px solid var(--border);
        background: var(--bg)
    }

    .mobile-nav.open {
        display: block
    }

    .mobile-nav .container {
        padding-top: .75rem;
        padding-bottom: 1rem;
        display: flex;
        flex-direction: column
    }

    .mobile-nav a {
        padding: .65rem 0;
        font-size: .9rem;
        font-weight: 500
    }

    /* ---------- Hero ---------- */
    .hero {
        position: relative;
        overflow: hidden;
        background: var(--grad-hero)
    }

    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle at 1px 1px, rgba(30, 42, 74, .07) 1px, transparent 0);
        background-size: 28px 28px;
        -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .5), transparent 65%);
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, .5), transparent 65%);
        pointer-events: none
    }

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

    .hero .grad-text {
        background-size: 200% auto;
        animation: gradShift 6s ease-in-out infinite
    }

    @keyframes gradShift {

        0%,
        100% {
            background-position: 0% 50%
        }

        50% {
            background-position: 100% 50%
        }
    }

    .hero .container {
        padding-top: 3.5rem;
        padding-bottom: 5rem
    }

    @media(min-width:768px) {
        .hero .container {
            padding-top: 6rem;
            padding-bottom: 7rem
        }
    }

    .hero-grid {
        display: grid;
        gap: 3rem;
        align-items: center
    }

    @media(min-width:1024px) {
        .hero-grid {
            grid-template-columns: 1.05fr 1fr
        }
    }

    .hero h1 {
        margin-top: 1.25rem;
        font-size: clamp(2.25rem, 5vw, 3.75rem);
        font-weight: 500;
        line-height: 1.05
    }

    .hero .grad-text {
        background: var(--grad-heading);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent
    }

    .hero p.lead {
        margin-top: 1.5rem;
        max-width: 36rem;
        font-size: 1rem;
        color: var(--muted)
    }

    .hero-ctas {
        margin-top: 2rem;
        display: flex;
        flex-wrap: wrap;
        gap: .75rem
    }

    .hero-stats {
        margin-top: 2.5rem;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
        border-top: 1px solid var(--border);
        padding-top: 1.5rem
    }

    .hero-stats dt {
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--teal);
        font-weight: 600
    }

    .hero-stats dd {
        margin: .35rem 0 0;
        font-size: 1.05rem;
        color: var(--navy);
        font-weight: 600
    }

    .hero-visual {
        position: relative;
        border: 1px solid var(--border);
        border-radius: 1.5rem;
        background: var(--card);
        padding: 1.5rem;
        box-shadow: var(--shadow-elev)
    }

    .hero-visual-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--border);
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--muted)
    }

    .hero-visual-head .live {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        color: var(--teal)
    }

    .hero-visual-head .live .dot {
        width: 6px;
        height: 6px;
        border-radius: 9999px;
        background: var(--teal);
        animation: pulse 2.2s infinite
    }

    .hero-tiles {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .75rem;
        margin-top: 1rem
    }

    .hero-tile {
        border: 1px solid var(--border);
        border-radius: .75rem;
        padding: .85rem;
        background: var(--surface)
    }

    .hero-tile .ic {
        display: grid;
        place-items: center;
        width: 2rem;
        height: 2rem;
        border-radius: .5rem;
        background: var(--teal-soft);
        color: var(--navy);
        margin-bottom: .5rem
    }

    .hero-tile .lbl {
        font-size: .7rem;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: .05em
    }

    .hero-tile .val {
        font-size: .95rem;
        font-weight: 600;
        color: var(--navy);
        margin-top: .15rem
    }

    @keyframes pulse {

        0%,
        100% {
            opacity: 1
        }

        50% {
            opacity: .35
        }
    }

    /* Hero command overview */
    .hero-window-bar {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding-bottom: .9rem;
        border-bottom: 1px solid var(--border);
        font-size: .78rem;
        color: var(--muted)
    }

    .hero-window-bar .dots-tl {
        display: inline-flex;
        gap: .35rem
    }

    .hero-window-bar .dots-tl i {
        width: .55rem;
        height: .55rem;
        border-radius: 9999px;
        background: #e6ebf2;
        display: inline-block
    }

    .hero-window-bar .dots-tl i:nth-child(1) {
        background: #ff6159
    }

    .hero-window-bar .dots-tl i:nth-child(2) {
        background: #ffbd2e
    }

    .hero-window-bar .dots-tl i:nth-child(3) {
        background: #28c840
    }

    .hero-window-bar .wtitle {
        font-weight: 600;
        color: var(--navy);
        letter-spacing: -.01em
    }

    .hero-window-bar .live {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        background: var(--teal-soft);
        color: var(--navy);
        padding: .2rem .55rem;
        border-radius: 9999px;
        font-size: .7rem;
        font-weight: 600
    }

    .hero-window-bar .live .dot {
        width: 6px;
        height: 6px;
        border-radius: 9999px;
        background: #34d399;
        animation: pulse 2s infinite
    }

    .hero-kpis {
        margin-top: 1rem;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .65rem
    }

    .kpi-card {
        border: 1px solid var(--border);
        border-radius: .7rem;
        padding: .85rem;
        background: linear-gradient(180deg, var(--surface), var(--card))
    }

    .kpi-card .l {
        font-size: .62rem;
        text-transform: uppercase;
        letter-spacing: .1em;
        color: var(--muted);
        font-weight: 600
    }

    .kpi-card .v {
        font-size: 1.5rem;
        font-weight: 700;
        color: #0f766e;
        margin-top: .15rem;
        font-variant-numeric: tabular-nums;
        letter-spacing: -.02em
    }

    .kpi-card .v.alert {
        color: #d97706
    }

    .hero-network {
        position: relative;
        margin-top: 1rem;
        height: 260px;
        border-radius: .9rem;
        background: radial-gradient(circle at 50% 50%, rgba(31, 143, 168, .06), transparent 70%);
        border: 1px solid var(--border);
        overflow: hidden
    }

    .hero-network .net-lines {
        position: absolute;
        inset: 0;
        top: -35px;
        width: 100%;
        height: 120%;
    }

    .hero-network .node {
        position: absolute;
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: 6px 10px;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 9999px;
        font-size: 11px;
        font-weight: 600;
        color: var(--navy);
        box-shadow: var(--shadow-card);
        opacity: 0;
        transform: translateY(6px);
        animation: nodeIn .5s cubic-bezier(.22, 1, .36, 1) forwards
    }

    .hero-network .node .ic {
        width: 14px;
        height: 14px;
        color: var(--teal);
        display: inline-grid;
        place-items: center
    }

    .hero-network .node .ic svg {
        width: 100%;
        height: 100%
    }

    .hero-network .node .ok {
        width: .4rem;
        height: .4rem;
        border-radius: 9999px;
        background: #34d399;
        box-shadow: 0 0 0 0 rgba(52, 211, 153, .6);
        animation: glow 2s infinite
    }

    .hero-network .n-tl {
        top: 14px;
        left: 14px;
        animation-delay: .15s
    }

    .hero-network .n-ml {
        top: 112px;
        left: 14px;
        animation-delay: .35s
    }

    .hero-network .n-bl {
        bottom: 14px;
        left: 14px;
        animation-delay: .55s
    }

    .hero-network .n-tr {
        top: 14px;
        right: 14px;
        animation-delay: .25s
    }

    .hero-network .n-mr {
        top: 112px;
        right: 14px;
        animation-delay: .45s
    }

    .hero-network .n-br {
        bottom: 14px;
        right: 14px;
        animation-delay: .65s
    }

    .hero-network .core {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -58%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .4rem
    }

    .hero-network .core-disc {
        width: 64px;
        height: 64px;
        border-radius: 9999px;
        background: var(--grad-navy);
        color: #fff;
        display: grid;
        place-items: center;
        box-shadow: var(--shadow-elev);
        position: relative;
        z-index: 1
    }

    .hero-network .core-disc svg {
        width: 26px;
        height: 26px
    }

    .hero-network .core-ring {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -4px);
        width: 84px;
        height: 84px;
        border-radius: 9999px;
        border: 1px solid rgba(31, 143, 168, .4);
        animation: coreRing 2.6s ease-out infinite
    }

    .hero-network .core-ring::after {
        content: "";
        position: absolute;
        inset: 6px;
        border-radius: 9999px;
        border: 1px solid rgba(31, 143, 168, .3);
        animation: coreRing 2.6s ease-out .8s infinite
    }

    .hero-network .core-lbl {
        font-size: .72rem;
        color: var(--muted);
        font-weight: 600;
        position: absolute;
        bottom: -25px;
        min-width: 95px;
        left: 50%;
        transform: translateX(-50%);
    }

    .hero-network .pulse-dot {
        opacity: .9;
        animation: dotFade 2.4s ease-in-out infinite
    }

    .hero-network .flow-dot {
        offset-rotate: 0deg;
        opacity: 0;
        animation: flow 2.8s ease-in-out infinite
    }

    @keyframes flow {
        0% {
            offset-distance: 0%;
            opacity: 0
        }

        15% {
            opacity: 1
        }

        85% {
            opacity: 1
        }

        100% {
            offset-distance: 100%;
            opacity: 0
        }
    }

    @keyframes nodeIn {
        to {
            opacity: 1;
            transform: none
        }
    }

    @keyframes coreRing {
        0% {
            transform: translate(-50%, -4px) scale(1);
            opacity: .6
        }

        100% {
            transform: translate(-50%, -4px) scale(1.35);
            opacity: 0
        }
    }

    @keyframes dotFade {

        0%,
        100% {
            opacity: 0
        }

        50% {
            opacity: 1
        }
    }

    @media(max-width:520px) {
        .hero-network {
            height: 280px
        }

        .hero-network .node {
            font-size: .7rem;
            padding: .35rem .55rem
        }

        .hero-network .node span:not(.ic):not(.ok) {
            display: none
        }
    }

    /* ---------- Cards & grids ---------- */
    .card {
        border: 1px solid var(--border);
        background: var(--card);
        border-radius: 1rem;
        padding: 1.5rem
    }

    .card-soft {
        box-shadow: var(--shadow-card)
    }

    .grid {
        display: grid;
        gap: 1.25rem
    }

    .grid-2 {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))
    }

    .grid-3 {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))
    }

    .grid-4 {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
    }

    /* Section: Problem */
    .problem-grid {
        display: grid;
        gap: 2.5rem
    }

    @media(min-width:1024px) {
        .problem-grid {
            grid-template-columns: .9fr 1.1fr
        }
    }

    .problem-side {
        position: sticky;
        top: 6rem;
        background: var(--grad-navy);
        color: #fff;
        border-radius: 1.25rem;
        padding: 2rem;
        box-shadow: var(--shadow-elev);
        align-self: start
    }

    .problem-side .k {
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .14em;
        color: rgba(255, 255, 255, .7)
    }

    .problem-side h3 {
        color: #fff;
        font-size: 1.5rem;
        font-weight: 600;
        margin-top: .75rem;
        line-height: 1.35
    }

    .problem-side p {
        color: rgba(255, 255, 255, .75);
        margin-top: 1rem;
        font-size: .95rem
    }

    .problem-side .grad-text-light {
        color: #7dd3d8;
        font-weight: 600
    }

    .problem-side-stats {
        margin-top: 1.75rem;
        padding-top: 1.25rem;
        border-top: 1px solid rgba(255, 255, 255, .14);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .75rem
    }

    .problem-side-stats dt {
        font-size: .62rem;
        text-transform: uppercase;
        letter-spacing: .1em;
        color: rgba(255, 255, 255, .55)
    }

    .problem-side-stats dd {
        margin: .3rem 0 0;
        font-size: .9rem;
        font-weight: 600;
        color: #fff
    }

    .problem-list {
        border-top: 1px solid var(--border)
    }

    .problem-row {
        display: grid;
        grid-template-columns: 2.5rem 2.5rem 1fr;
        gap: 1rem;
        padding: 1.5rem 0;
        border-bottom: 1px solid var(--border);
        align-items: start
    }

    .problem-row .n {
        font-family: 'JetBrains Mono', monospace;
        font-size: .75rem;
        color: var(--muted);
        padding-top: .2rem
    }

    .problem-row .ic {
        display: grid;
        place-items: center;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: .55rem;
        background: var(--surface);
        border: 1px solid var(--border);
        color: var(--navy)
    }

    .problem-row h4 {
        font-size: 1rem;
        font-weight: 600;
        color: var(--navy)
    }

    .problem-row p {
        color: var(--muted);
        margin-top: .35rem;
        font-size: .9rem
    }

    /* Section: Platform (layered) */
    .stack-grid {
        display: grid;
        gap: 2.5rem;
        align-items: start
    }

    @media(min-width:1024px) {
        .stack-grid {
            grid-template-columns: .85fr 1.15fr
        }

        .stack-intro {
            position: sticky;
            top: 6rem
        }
    }

    .stack-intro h3 {
        font-size: clamp(1.4rem, 2.4vw, 1.9rem);
        font-weight: 600;
        margin-top: .75rem;
        line-height: 1.25
    }

    .stack-intro p {
        color: var(--muted);
        margin-top: 1rem;
        font-size: .875rem
    }

    .stack {
        display: flex;
        flex-direction: column;
        gap: .75rem
    }

    .stack .layer {
        border: 1px solid var(--border);
        border-radius: 1rem;
        padding: 1.5rem 1.5rem;
        background: var(--card);
        display: flex;
        align-items: center;
        gap: 1rem
    }

    .stack .layer.top {
        background: var(--grad-navy);
        color: #fff;
        border-color: transparent;
        box-shadow: var(--shadow-elev)
    }

    .stack .layer .n {
        font-family: 'JetBrains Mono', monospace;
        font-size: .72rem;
        color: var(--muted);
        width: 2rem
    }

    .stack .layer.top .n {
        color: rgba(255, 255, 255, .7)
    }

    .stack .layer .ic {
        display: grid;
        place-items: center;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: .6rem;
        background: var(--teal-soft);
        color: var(--navy)
    }

    .stack .layer.top .ic {
        background: rgba(255, 255, 255, .1);
        color: #fff
    }

    .stack .layer h4 {
        font-size: 1rem;
        font-weight: 600
    }

    .stack .layer.top h4 {
        color: #fff
    }

    .stack .layer .desc {
        font-size: .85rem;
        color: var(--muted)
    }

    .stack .layer.top .desc {
        color: rgba(255, 255, 255, .75)
    }

    .stack .layer .content {
        flex: 1;
        min-width: 0
    }

    /* Section: Solutions */
    .solutions-featured {
        display: grid;
        gap: 1.25rem
    }

    @media(min-width:900px) {
        .solutions-featured {
            grid-template-columns: 1fr 1fr
        }
    }

    .sol-feat {
        border: 1px solid var(--border);
        background: var(--card);
        border-radius: 1.25rem;
        padding: 1.75rem;
        box-shadow: var(--shadow-card)
    }

    .sol-feat .head {
        display: flex;
        gap: 1rem;
        align-items: flex-start
    }

    .sol-feat .ic {
        width: 2.75rem;
        height: 2.75rem;
        border-radius: .75rem;
        background: var(--teal-soft);
        display: grid;
        place-items: center;
        color: var(--navy);
        flex-shrink: 0
    }

    .sol-feat h3 {
        font-size: 1.15rem;
        font-weight: 600
    }

    .sol-feat .desc {
        color: var(--muted);
        font-size: .9rem;
        margin-top: .35rem
    }

    .sol-tags {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        margin-top: 1.25rem
    }

    .sol-tags span {
        font-size: .72rem;
        padding: .25rem .55rem;
        border-radius: .4rem;
        background: var(--surface);
        color: var(--navy);
        border: 1px solid var(--border)
    }

    .solutions-rest {
        margin-top: 1.25rem;
        display: grid;
        gap: 1rem
    }

    @media(min-width:700px) {
        .solutions-rest {
            grid-template-columns: 1fr 1fr
        }
    }

    @media(min-width:1024px) {
        .solutions-rest {
            grid-template-columns: repeat(4, 1fr)
        }
    }

    .sol-row {
        border: 1px solid var(--border);
        background: var(--card);
        border-radius: .9rem;
        padding: 1.25rem
    }

    .sol-row .ic {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: .5rem;
        background: var(--surface);
        color: var(--navy);
        display: grid;
        place-items: center;
        margin-bottom: .75rem
    }

    .sol-row h4 {
        font-size: .95rem;
        font-weight: 600
    }

    .sol-row p {
        color: var(--muted);
        font-size: .8rem;
        margin-top: .3rem
    }

    /* Section: Modules */
    .modules-outer {
        position: relative
    }

    @media(min-width:1024px) {
        .modules-outer {
            min-height: calc(10 * 42vh)
        }

        .modules-outer>.modules-wrap {
            position: sticky;
            top: 6rem
        }
    }

    .modules-wrap {
        display: grid;
        gap: 1.5rem
    }

    @media(min-width:1024px) {
        .modules-wrap {
            grid-template-columns: 320px 1fr
        }
    }

    .module-nav {
        position: relative;
        align-self: start;
        border: 1px solid var(--border);
        background: var(--card);
        border-radius: 1rem;
        padding: .5rem;
        box-shadow: var(--shadow-card);
        max-height: calc(100vh - 8rem);
        overflow: auto
    }

    .module-nav .mn-track {
        position: absolute;
        left: 1.35rem;
        top: 1.2rem;
        bottom: 1.2rem;
        width: 1px;
        background: var(--border);
        pointer-events: none
    }

    .module-nav .mn-progress {
        position: absolute;
        left: 1.35rem;
        top: 1.2rem;
        width: 1px;
        background: linear-gradient(to bottom, var(--teal), var(--navy));
        transition: height .6s cubic-bezier(.22, 1, .36, 1);
        pointer-events: none;
        box-shadow: 0 0 8px rgba(31, 143, 168, .4)
    }

    .module-nav button {
        position: relative;
        display: flex;
        align-items: center;
        gap: .75rem;
        width: 100%;
        padding: .6rem .6rem;
        border-radius: .5rem;
        text-align: left;
        color: rgba(24, 32, 54, .8);
        font-size: .875rem;
        transition: background .2s, color .2s
    }

    .module-nav button span.t {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .module-nav button:hover {
        background: var(--surface)
    }

    .module-nav button.active {
        background: var(--surface);
        color: var(--navy);
        font-weight: 600
    }

    .module-nav button .dot {
        position: relative;
        z-index: 1;
        width: .7rem;
        height: .7rem;
        border-radius: 9999px;
        background: var(--border);
        flex-shrink: 0;
        box-shadow: 0 0 0 4px var(--card);
        transition: background .3s ease, transform .3s ease
    }

    .module-nav button.active .dot {
        background: var(--teal);
        transform: scale(1.15)
    }

    .module-nav button.active .dot::after {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 9999px;
        border: 1px solid rgba(31, 143, 168, .5);
        animation: navRing 1.8s ease-out infinite
    }

    @keyframes navRing {
        0% {
            transform: scale(1);
            opacity: .8
        }

        100% {
            transform: scale(1.9);
            opacity: 0
        }
    }

    .module-nav button.done .dot {
        background: var(--navy)
    }

    .module-nav button .n {
        font-family: 'JetBrains Mono', monospace;
        font-size: .7rem;
        color: var(--muted);
        width: 1.75rem;
        flex-shrink: 0;
        transition: color .3s ease
    }

    .module-nav button.active .n {
        color: var(--navy)
    }

    .module-panel {
        border: 1px solid var(--border);
        background: var(--card);
        border-radius: 1rem;
        box-shadow: var(--shadow-card);
        overflow: hidden
    }

    .module-panel .head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid var(--border);
        gap: 1rem;
        opacity: 0;
        animation: panelIn .5s cubic-bezier(.22, 1, .36, 1) forwards
    }

    .module-panel .head .ic {
        width: 2.75rem;
        height: 2.75rem;
        border-radius: .75rem;
        background: var(--teal-soft);
        color: var(--navy);
        display: grid;
        place-items: center;
        flex-shrink: 0;
        transition: transform .4s cubic-bezier(.34, 1.56, .64, 1)
    }

    .module-panel .head .n {
        font-family: 'JetBrains Mono', monospace;
        font-size: .7rem;
        color: var(--muted)
    }

    .module-panel .head h3 {
        font-size: 1.15rem;
        font-weight: 600;
        margin-top: .15rem
    }

    .module-panel .body {
        display: grid;
        gap: 0
    }

    @media(min-width:700px) {
        .module-panel .body {
            grid-template-columns: 1fr 1.4fr
        }
    }

    .module-panel .body .out {
        padding: 1.5rem;
        border-bottom: 1px solid var(--border);
        opacity: 0;
        animation: panelIn .5s cubic-bezier(.22, 1, .36, 1) forwards;
        animation-delay: .08s
    }

    @media(min-width:700px) {
        .module-panel .body .out {
            border-bottom: 0;
            border-right: 1px solid var(--border)
        }
    }

    .module-panel .body .caps {
        padding: 1.5rem;
        opacity: 0;
        animation: panelIn .5s cubic-bezier(.22, 1, .36, 1) forwards;
        animation-delay: .08s
    }

    .module-panel .k {
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        font-weight: 600;
        color: var(--teal)
    }

    .module-panel .caps .k {
        color: var(--muted)
    }

    .module-panel .out p {
        margin-top: .5rem;
        color: var(--navy);
        font-size: .9rem
    }

    .module-panel .caps ul {
        margin-top: .75rem;
        display: grid;
        gap: .5rem
    }

    @media(min-width:500px) {
        .module-panel .caps ul {
            grid-template-columns: 1fr 1fr
        }
    }

    .module-panel .caps li {
        font-size: .875rem;
        color: rgba(24, 32, 54, .85);
        display: flex;
        gap: .5rem;
        align-items: flex-start;
        opacity: 0;
        transform: translateY(8px);
        animation: itemIn .45s cubic-bezier(.22, 1, .36, 1) forwards
    }

    .module-panel .caps li::before {
        content: "";
        width: .4rem;
        height: .4rem;
        border-radius: 9999px;
        background: var(--teal);
        margin-top: .5rem;
        flex-shrink: 0;
        transition: transform .3s ease, background .3s ease
    }

    .module-panel .caps li:hover::before {
        transform: scale(1.5);
        background: var(--navy)
    }

    .module-panel .caps li:hover {
        transform: translateX(2px)
    }

    @keyframes itemIn {
        from {
            opacity: 0;
            transform: translateY(8px)
        }

        to {
            opacity: 1;
            transform: none
        }
    }

    .module-panel .caps li:nth-child(1) {
        animation-delay: .14s
    }

    .module-panel .caps li:nth-child(2) {
        animation-delay: .19s
    }

    .module-panel .caps li:nth-child(3) {
        animation-delay: .24s
    }

    .module-panel .caps li:nth-child(4) {
        animation-delay: .29s
    }

    .module-panel .caps li:nth-child(5) {
        animation-delay: .34s
    }

    .module-panel .caps li:nth-child(6) {
        animation-delay: .39s
    }

    .module-panel .caps li:nth-child(7) {
        animation-delay: .44s
    }

    .module-panel .caps li:nth-child(8) {
        animation-delay: .49s
    }

    /* Section: Integrations */
    .integ-wrap {
        border: 1px solid var(--border);
        background: var(--card);
        border-radius: 1rem;
        overflow: hidden
    }

    .integ-head {
        display: flex;
        justify-content: space-between;
        padding: .75rem 1.25rem;
        border-bottom: 1px solid var(--border);
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--muted)
    }

    .integ-hub-wrap {
        padding: 2.5rem 1.5rem 1rem
    }

    .integ-hub {
        max-width: 28rem;
        margin: 0 auto;
        background: var(--grad-navy);
        color: #fff;
        border-radius: .9rem;
        padding: 1rem 1.25rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        box-shadow: var(--shadow-elev)
    }

    .integ-hub .ic {
        width: 2.75rem;
        height: 2.75rem;
        border-radius: .6rem;
        background: rgba(255, 255, 255, .1);
        display: grid;
        place-items: center;
        flex-shrink: 0
    }

    .integ-hub .title {
        font-size: .9rem;
        font-weight: 600
    }

    .integ-hub .sub {
        font-size: .7rem;
        color: rgba(255, 255, 255, .6)
    }

    .integ-hub .status {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        background: rgba(255, 255, 255, .1);
        border-radius: 9999px;
        padding: .15rem .55rem;
        font-size: .65rem
    }

    .integ-hub .status .dot {
        width: 6px;
        height: 6px;
        border-radius: 9999px;
        background: #34d399;
        animation: pulse 2s infinite
    }

    .integ-trunk {
        width: 1px;
        height: 2rem;
        margin: 0 auto;
        background: var(--border)
    }

    .integ-domains {
        padding: 1rem 1.5rem 2rem;
        display: grid;
        gap: 1rem
    }

    @media(min-width:700px) {
        .integ-domains {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media(min-width:1024px) {
        .integ-domains {
            grid-template-columns: repeat(3, 1fr)
        }
    }

    .integ-domain {
        border: 1px solid var(--border);
        border-radius: .75rem;
        background: var(--surface);
        padding: 1rem
    }

    .integ-domain .k {
        font-size: .68rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--teal);
        font-weight: 600
    }

    .integ-domain ul {
        margin-top: .65rem;
        display: grid;
        gap: .4rem
    }

    .integ-domain li {
        display: flex;
        gap: .6rem;
        align-items: center;
        font-size: .85rem;
        color: var(--navy)
    }

    .integ-domain li .ic {
        width: 1.75rem;
        height: 1.75rem;
        border-radius: .4rem;
        background: var(--card);
        border: 1px solid var(--border);
        display: grid;
        place-items: center;
        color: var(--navy)
    }

    .integ-foot {
        border-top: 1px solid var(--border);
        padding: .75rem 1.25rem;
        font-size: .7rem;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: .08em;
        display: flex;
        justify-content: space-between
    }

    /* Section: Deployment */
    .dep-wrap {
        border: 1px solid var(--border);
        background: var(--card);
        border-radius: 1.25rem;
        padding: 1.5rem;
        box-shadow: var(--shadow-card)
    }

    .dep-top {
        background: var(--grad-navy);
        color: #fff;
        border-radius: .9rem;
        padding: 1rem 1.25rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: var(--shadow-elev)
    }

    .dep-top .k {
        font-size: .7rem;
        color: var(--teal-soft);
        text-transform: uppercase;
        letter-spacing: .12em;
        font-weight: 600
    }

    .dep-top .t {
        font-size: 1.05rem;
        font-weight: 600;
        margin-top: .25rem
    }

    .dep-top .sub {
        font-family: 'JetBrains Mono', monospace;
        font-size: .7rem;
        color: rgba(255, 255, 255, .6);
        display: none
    }

    @media(min-width:640px) {
        .dep-top .sub {
            display: block
        }
    }

    .dep-connector {
        width: 1px;
        height: 1.5rem;
        background: var(--border);
        margin: 0 auto
    }

    .dep-groups {
        display: grid;
        gap: 1rem
    }

    @media(min-width:1024px) {
        .dep-groups {
            grid-template-columns: 1.2fr .9fr .9fr
        }
    }

    .dep-group {
        border: 1px solid var(--border);
        border-radius: .9rem;
        background: var(--surface)
    }

    .dep-group .gh {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: .75rem 1.25rem;
        border-bottom: 1px solid var(--border)
    }

    .dep-group .k {
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--teal);
        font-weight: 600
    }

    .dep-group .sub {
        font-size: .72rem;
        color: var(--muted)
    }

    .dep-group .count {
        font-family: 'JetBrains Mono', monospace;
        font-size: .65rem;
        color: var(--muted)
    }

    .dep-items {
        padding: .5rem
    }

    .dep-item {
        border-radius: .6rem;
        padding: .85rem 1rem;
        transition: background .2s
    }

    .dep-item:hover {
        background: var(--card)
    }

    .dep-item+.dep-item {
        border-top: 1px solid var(--border)
    }

    .dep-item .head {
        display: flex;
        gap: .75rem;
        align-items: center
    }

    .dep-item .ic {
        width: 2rem;
        height: 2rem;
        border-radius: .45rem;
        background: var(--card);
        border: 1px solid var(--border);
        color: var(--navy);
        display: grid;
        place-items: center;
        flex-shrink: 0
    }

    .dep-item h4 {
        font-size: .9rem;
        font-weight: 600
    }

    .dep-item .best {
        font-size: .78rem;
        color: var(--muted);
        margin-top: .35rem
    }

    .dep-item .values {
        margin-top: .5rem;
        display: flex;
        flex-wrap: wrap;
        gap: .35rem
    }

    .dep-item .values span {
        font-size: .7rem;
        padding: .15rem .5rem;
        border-radius: .35rem;
        background: var(--card);
        border: 1px solid var(--border);
        color: var(--navy)
    }

    .dep-foundation {
        margin-top: 1.5rem;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: .9rem;
        padding: 1.25rem
    }

    .dep-foundation .k {
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--teal);
        font-weight: 600
    }

    .dep-foundation .grid {
        margin-top: 1rem;
        grid-template-columns: repeat(2, 1fr);
        gap: .5rem 1.25rem
    }

    @media(min-width:640px) {
        .dep-foundation .grid {
            grid-template-columns: repeat(3, 1fr)
        }
    }

    @media(min-width:900px) {
        .dep-foundation .grid {
            grid-template-columns: repeat(4, 1fr)
        }
    }

    .dep-foundation .grid>div {
        display: flex;
        gap: .5rem;
        align-items: center;
        font-size: .85rem;
        color: var(--navy)
    }

    .dep-foundation .grid>div::before {
        content: "";
        width: .4rem;
        height: .4rem;
        border-radius: 9999px;
        background: var(--teal)
    }

    /* Section: Executive */
    .exec-grid {
        display: grid;
        gap: 1.25rem
    }

    @media(min-width:1024px) {
        .exec-grid {
            grid-template-columns: 1fr 1fr
        }
    }

    .exec-questions {
        border: 1px solid var(--border);
        background: var(--card);
        border-radius: 1rem;
        padding: 1.75rem;
        box-shadow: var(--shadow-card)
    }

    .exec-questions .k {
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--teal);
        font-weight: 600
    }

    .exec-questions ul {
        margin-top: 1.25rem;
        display: grid;
        gap: .65rem
    }

    .exec-questions li {
        display: flex;
        gap: .75rem;
        align-items: flex-start;
        padding: .75rem 1rem;
        border: 1px solid var(--border);
        background: var(--surface);
        border-radius: .55rem;
        font-size: .875rem;
        color: var(--navy);
        transition: transform .3s cubic-bezier(.22, 1, .36, 1), border-color .3s ease, background .3s ease
    }

    .exec-questions li:hover {
        transform: translateX(4px);
        border-color: color-mix(in oklab, var(--teal) 35%, var(--border));
        background: var(--card)
    }

    .exec-questions li svg {
        color: var(--teal);
        flex-shrink: 0;
        margin-top: .15rem
    }

    .exec-dash {
        border-radius: 1rem;
        padding: 1.75rem;
        background: var(--grad-navy);
        color: #fff;
        box-shadow: var(--shadow-elev)
    }

    .exec-dash .k {
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: rgba(255, 255, 255, .7);
        font-weight: 600
    }

    .dash-views {
        margin-top: 1.25rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .65rem
    }

    .dash-view {
        display: flex;
        gap: .75rem;
        align-items: center;
        padding: .75rem;
        background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: .7rem
    }

    .dash-view .ic {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: .5rem;
        background: rgba(255, 255, 255, .1);
        display: grid;
        place-items: center;
        flex-shrink: 0
    }

    .dash-view span {
        font-size: .82rem;
        font-weight: 500
    }

    .kpi-row {
        margin-top: 1.25rem;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .65rem
    }

    .kpi {
        background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: .7rem;
        padding: .75rem
    }

    .kpi .l {
        font-size: .65rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: rgba(255, 255, 255, .6)
    }

    .kpi .v {
        font-size: 1.1rem;
        font-weight: 600;
        margin-top: .25rem;
        font-variant-numeric: tabular-nums
    }

    .chart {
        margin-top: 1rem;
        background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: .7rem;
        padding: 1rem
    }

    .chart .bars {
        display: flex;
        align-items: flex-end;
        gap: .5rem;
        height: 6rem
    }

    .chart .bar {
        flex: 1;
        background: linear-gradient(to top, rgba(31, 143, 168, .5), var(--teal-soft));
        border-radius: .2rem .2rem 0 0;
        height: 0;
        transition: height 1.1s cubic-bezier(.22, 1, .36, 1), transform .25s ease, filter .25s ease;
        transform-origin: bottom
    }

    .chart .bar:hover {
        transform: scaleY(1.03) scaleX(1.08);
        filter: brightness(1.2)
    }

    .vendor .track {
        transition: box-shadow .3s ease
    }

    .vendor:hover .track {
        box-shadow: 0 0 0 1px color-mix(in oklab, var(--teal) 40%, transparent)
    }

    .vendor:hover .track>span {
        filter: brightness(1.15)
    }

    .chart .labels {
        margin-top: .5rem;
        display: flex;
        justify-content: space-between;
        font-size: .62rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: rgba(255, 255, 255, .6)
    }

    .vendors {
        margin-top: 1rem;
        background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: .7rem;
        padding: 1rem
    }

    .vendors .k {
        margin-bottom: .75rem
    }

    .vendor {
        display: flex;
        gap: .75rem;
        align-items: center;
        font-size: .75rem;
        margin-top: .55rem
    }

    .vendor .n {
        width: 4rem;
        color: rgba(255, 255, 255, .8)
    }

    .vendor .track {
        flex: 1;
        height: 6px;
        background: rgba(255, 255, 255, .1);
        border-radius: 9999px;
        overflow: hidden
    }

    .vendor .track>span {
        display: block;
        height: 100%;
        width: 0;
        background: var(--teal-soft);
        border-radius: 9999px;
        transition: width 1s cubic-bezier(.22, 1, .36, 1)
    }

    .vendor .s {
        width: 2rem;
        text-align: right;
        color: rgba(255, 255, 255, .8);
        font-variant-numeric: tabular-nums
    }

    /* Section: Pilot */
    .pilot-desktop {
        display: none;
        position: relative
    }

    @media(min-width:1024px) {
        .pilot-desktop {
            display: block
        }

        .pilot-mobile {
            display: none
        }
    }

    .pilot-desktop::before {
        content: "";
        position: absolute;
        left: 2rem;
        right: 2rem;
        top: 1.5rem;
        height: 1px;
        background: linear-gradient(to right, var(--border), rgba(31, 143, 168, .4), var(--border))
    }

    .pilot-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        position: relative
    }

    .pilot-phase {
        border: 1px solid var(--border);
        background: var(--card);
        border-radius: 1rem;
        padding: 1.5rem;
        box-shadow: var(--shadow-card);
        position: relative
    }

    .pilot-phase .head {
        display: flex;
        gap: .75rem;
        align-items: center
    }

    .pilot-phase .num {
        width: 3rem;
        height: 3rem;
        border-radius: 9999px;
        background: var(--card);
        border: 1px solid var(--border);
        display: grid;
        place-items: center;
        font-family: 'JetBrains Mono', monospace;
        font-size: .75rem;
        font-weight: 600;
        color: var(--navy);
        z-index: 1
    }

    .pilot-phase .lbl {
        font-family: 'JetBrains Mono', monospace;
        font-size: .65rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--muted)
    }

    .pilot-phase .k {
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .12em;
        color: var(--teal);
        font-weight: 600
    }

    .pilot-phase h3 {
        margin-top: 1rem;
        font-size: 1.05rem;
        font-weight: 600
    }

    .pilot-phase ul {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border);
        display: grid;
        gap: .55rem
    }

    .pilot-phase li {
        display: flex;
        gap: .6rem;
        align-items: flex-start;
        font-size: .85rem;
        color: rgba(24, 32, 54, .85)
    }

    .pilot-phase li::before {
        content: "";
        width: .35rem;
        height: .35rem;
        border-radius: 9999px;
        background: var(--teal);
        margin-top: .55rem;
        flex-shrink: 0
    }

    .pilot-mobile {
        position: relative
    }

    .pilot-mobile::before {
        content: "";
        position: absolute;
        left: 1.5rem;
        top: 1rem;
        bottom: 1rem;
        width: 1px;
        background: var(--border)
    }

    .pilot-mobile li {
        position: relative;
        padding-left: 4rem;
        padding-bottom: 2rem
    }

    .pilot-mobile .num {
        position: absolute;
        left: 0;
        top: 0;
        width: 3rem;
        height: 3rem;
        border-radius: 9999px;
        background: var(--card);
        border: 1px solid var(--border);
        display: grid;
        place-items: center;
        font-family: 'JetBrains Mono', monospace;
        font-size: .75rem;
        font-weight: 600;
        color: var(--navy)
    }

    .pilot-foot {
        margin-top: 3.5rem;
        padding-top: 2rem;
        border-top: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
        justify-content: space-between
    }

    @media(min-width:768px) {
        .pilot-foot {
            flex-direction: row;
            align-items: center
        }
    }

    /* Section: Audience */
    .aud-grid {
        display: grid;
        gap: 1.5rem
    }

    @media(min-width:768px) {
        .aud-grid {
            grid-template-columns: 1fr 1fr
        }
    }

    .aud-card {
        border: 1px solid var(--border);
        background: var(--card);
        border-radius: 1rem;
        padding: 1.5rem
    }

    .aud-card .head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding-bottom: .75rem;
        border-bottom: 1px solid var(--border)
    }

    .aud-card .k {
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .1em;
        color: var(--teal);
        font-weight: 600
    }

    .aud-card .sub {
        font-size: .75rem;
        color: var(--muted);
        margin-top: .1rem
    }

    .aud-card .count {
        font-family: 'JetBrains Mono', monospace;
        font-size: .65rem;
        color: var(--muted)
    }

    .aud-card ul li {
        display: flex;
        gap: 1rem;
        align-items: center;
        padding: 1rem 0;
        border-bottom: 1px solid var(--border)
    }

    .aud-card ul li:last-child {
        border-bottom: 0
    }

    .aud-card .ic {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: .4rem;
        background: var(--surface);
        border: 1px solid var(--border);
        color: var(--navy);
        display: grid;
        place-items: center;
        flex-shrink: 0
    }

    .aud-card li span {
        font-size: .875rem;
        font-weight: 500;
        color: var(--navy)
    }

    /* Section: Why */
    .why-grid {
        display: grid;
        gap: 2.5rem
    }

    @media(min-width:1024px) {
        .why-grid {
            grid-template-columns: .9fr 1.1fr
        }
    }

    .why-side {
        position: sticky;
        top: 80px;
        height: fit-content;
    }

    .why-side .lead {
        color: var(--muted);
        margin-top: 1rem
    }

    .why-meta {
        margin-top: 2rem;
        border-top: 1px solid var(--border);
        padding-top: 1rem;
        display: grid;
        gap: .75rem
    }

    .why-meta div {
        display: flex;
        justify-content: space-between;
        font-size: .8rem
    }

    .why-meta .k {
        font-family: 'JetBrains Mono', monospace;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: .06em
    }

    .why-meta .v {
        color: var(--navy);
        font-weight: 500
    }

    .why-cred {
        display: grid;
        gap: 1rem;
        grid-template-columns: 1fr 1fr
    }

    .why-cred .card {
        padding: 1.25rem
    }

    .why-cred h4 {
        font-size: .9rem;
        font-weight: 600
    }

    .why-cred p {
        margin-top: .5rem;
        color: var(--muted);
        font-size: .82rem
    }

    .why-caps {
        margin-top: 1rem;
        border: 1px solid var(--border);
        border-radius: 1rem;
        background: var(--card);
        overflow: hidden
    }

    .why-caps li {
        display: flex;
        gap: 1rem;
        align-items: center;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--border)
    }

    .why-caps li:last-child {
        border-bottom: 0
    }

    .why-caps .ic {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: .5rem;
        background: var(--teal-soft);
        color: var(--navy);
        display: grid;
        place-items: center;
        flex-shrink: 0
    }

    .why-caps span {
        font-size: .85rem;
        color: var(--navy);
        font-weight: 500
    }

    /* Final CTA */
    .final-cta {
        padding: 5rem 0
    }

    .final-cta .box {
        position: relative;
        overflow: hidden;
        border-radius: 1.5rem;
        background: var(--grad-navy);
        padding: 3rem 2rem;
        text-align: center;
        box-shadow: var(--shadow-elev)
    }

    @media(min-width:768px) {
        .final-cta .box {
            padding: 4rem
        }
    }

    .final-cta .dots {
        position: absolute;
        inset: 0;
        opacity: .2;
        background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);
        background-size: 24px 24px;
        pointer-events: none
    }

    .final-cta h2 {
        position: relative;
        color: #fff;
        font-size: clamp(1.75rem, 3.5vw, 3rem);
        font-weight: 600;
        line-height: 1.1
    }

    .final-cta p {
        position: relative;
        margin: 1.25rem auto 0;
        max-width: 36rem;
        color: rgba(255, 255, 255, .75)
    }

    .final-cta .ctas {
        position: relative;
        margin-top: 2rem;
        display: flex;
        flex-wrap: wrap;
        gap: .75rem;
        justify-content: center
    }

    /* Contact */
    .contact-grid {
        display: grid;
        gap: 2.5rem
    }

    @media(min-width:1024px) {
        .contact-grid {
            grid-template-columns: .9fr 1.1fr
        }
    }

    .contact-meta {
        margin-top: 2rem;
        display: grid;
        gap: 1rem
    }

    .contact-meta dt {
        font-size: .68rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--teal);
        font-weight: 600
    }

    .contact-meta dd {
        margin: .15rem 0 0;
        color: var(--navy);
        font-size: .9rem
    }

    .contact-form {
        border: 1px solid var(--border);
        background: var(--card);
        border-radius: 1rem;
        padding: 1.75rem;
        box-shadow: var(--shadow-card)
    }

    .form-grid {
        display: grid;
        gap: 1rem
    }

    @media(min-width:640px) {
        .form-grid {
            grid-template-columns: 1fr 1fr
        }
    }

    .form-grid .full {
        grid-column: 1/-1
    }

    .field label {
        font-size: .7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--navy);
        margin-bottom: .4rem;
        display: block
    }

    .field .ctrl {
        width: 100%;
        border: 1px solid var(--border);
        background: var(--bg);
        border-radius: .5rem;
        padding: .65rem .85rem;
        font-size: .875rem;
        outline: none;
        transition: border-color .2s, box-shadow .2s
    }

    .field .ctrl:focus {
        border-color: var(--teal);
        box-shadow: 0 0 0 3px rgba(31, 143, 168, .15)
    }

    .field .err  {
        color: var(--destructive);
        font-size: .72rem;
        margin-top: .25rem;
        display: block
    }

#recaptcha_token-error{
    color: var(--destructive);
        font-size: .72rem;
        margin-top: .25rem;
        display: block
}

    /* .field.error .ctrl {
        border-color: var(--destructive)
    } */

    .success {
        margin-bottom: 1.25rem;
        display: flex;
        gap: .75rem;
        padding: 1rem;
        border: 1px solid rgba(31, 143, 168, .4);
        background: rgba(214, 237, 242, .6);
        border-radius: .75rem;
        color: var(--navy);
        font-size: .875rem
    }

    /* Footer */
    .site-footer {
        border-top: 1px solid var(--border);
        background: var(--bg)
    }

    .footer-grid {
        padding: 3.5rem 0;
        display: grid;
        gap: 2.5rem
    }

    @media(min-width:1024px) {
        .footer-grid {
            grid-template-columns: 1.2fr 2fr
        }
    }

    .footer-groups {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem
    }

    @media(min-width:640px) {
        .footer-groups {
            grid-template-columns: repeat(4, 1fr)
        }
    }

    .footer-groups .k {
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        font-weight: 600;
        color: var(--navy)
    }

    .footer-groups ul {
        margin-top: .75rem;
        display: grid;
        gap: .5rem
    }

    .footer-groups a {
        font-size: .85rem;
        color: var(--muted)
    }

    .footer-groups a:hover {
        color: var(--navy)
    }

    .footer-brand p {
        margin-top: 1rem;
        max-width: 24rem;
        color: var(--muted);
        font-size: .875rem
    }

    .footer-bottom {
        border-top: 1px solid var(--border);
        padding: 1.25rem 0;
        display: flex;
        flex-direction: column;
        gap: .5rem;
        font-size: .75rem;
        color: var(--muted)
    }

    @media(min-width:640px) {
        .footer-bottom {
            flex-direction: row;
            justify-content: space-between;
            align-items: center
        }
    }

    /* Reveal animation */
    .reveal {
        opacity: 0;
        transform: translateY(22px) scale(.985);
        transition: opacity .75s cubic-bezier(.22, 1, .36, 1), transform .75s cubic-bezier(.22, 1, .36, 1);
        will-change: opacity, transform
    }

    .reveal.in {
        opacity: 1;
        transform: none
    }

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

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

        .reveal {
            opacity: 1;
            transform: none
        }

        html {
            scroll-behavior: auto
        }
    }

    /* ---------- Enhancement layer ---------- */
    /* Lucide icons default sizing inside wrappers */
    .ic>svg,
    .brand-mark>svg {
        width: 60%;
        height: 60%;
    }

    .hero-tile .ic>svg {
        width: 55%;
        height: 55%;
    }

    .integ-hub .ic>svg,
    .exec-questions li>span:first-child svg {
        width: 55%;
        height: 55%;
        color: currentColor;
    }

    .exec-questions li>span:first-child {
        display: inline-grid;
        place-items: center;
        width: 1.15rem;
        height: 1.15rem;
        color: var(--teal);
        flex-shrink: 0;
    }

    .dash-view .ic>svg {
        width: 55%;
        height: 55%;
    }

    .aud-card .ic>svg,
    .why-caps .ic>svg,
    .integ-domain li .ic>svg,
    .problem-row .ic>svg,
    .dep-item .ic>svg,
    .sol-row .ic>svg,
    .sol-feat .ic>svg,
    .stack .layer .ic>svg,
    .module-nav svg,
    .module-panel .head .ic>svg {
        width: 55%;
        height: 55%;
    }

    .btn svg {
        width: 1rem;
        height: 1rem;
    }

    .brand-mark>svg {
        color: #fff;
    }

    .success>span svg {
        width: 1.1rem;
        height: 1.1rem;
        color: var(--teal);
        flex-shrink: 0;
    }

    /* Softer easing & scroll reveal with stagger */
    [data-stagger]>* {
        opacity: 0;
        transform: translateY(16px) scale(.98);
        transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1);
    }

    [data-stagger].in>* {
        opacity: 1;
        transform: none;
        will-change: auto;
    }

    [data-stagger].in>*:nth-child(1) {
        transition-delay: .02s
    }

    [data-stagger].in>*:nth-child(2) {
        transition-delay: .08s
    }

    [data-stagger].in>*:nth-child(3) {
        transition-delay: .14s
    }

    [data-stagger].in>*:nth-child(4) {
        transition-delay: .20s
    }

    [data-stagger].in>*:nth-child(5) {
        transition-delay: .26s
    }

    [data-stagger].in>*:nth-child(6) {
        transition-delay: .32s
    }

    [data-stagger].in>*:nth-child(7) {
        transition-delay: .38s
    }

    [data-stagger].in>*:nth-child(8) {
        transition-delay: .44s
    }

    [data-stagger].in>*:nth-child(9) {
        transition-delay: .50s
    }

    [data-stagger].in>*:nth-child(10) {
        transition-delay: .56s
    }

    /* Hover lift & transitions */
    .hero-tile {
        transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    }

    .hero-tile:hover {
        transform: translateY(-3px);
        border-color: color-mix(in oklab, var(--teal) 35%, var(--border));
        box-shadow: var(--shadow-card);
    }

    .sol-feat,
    .sol-row,
    .aud-card,
    .why-cred .card,
    .pilot-phase,
    .dep-item,
    .integ-domain,
    .stack .layer,
    .kpi-card,
    .dash-view,
    .module-nav button,
    .card {
        transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, border-color .35s ease, background-color .35s ease;
    }

    .sol-feat:hover,
    .sol-row:hover,
    .aud-card:hover,
    .why-cred .card:hover,
    .pilot-phase:hover {
        transform: translateY(-4px) scale(1.01);
        box-shadow: var(--shadow-elev);
        border-color: color-mix(in oklab, var(--teal) 30%, var(--border));
    }

    .sol-feat:hover .ic,
    .sol-row:hover .ic {
        background: var(--teal);
        color: #fff;
        transform: scale(1.08);
    }

    .sol-feat .ic,
    .sol-row .ic {
        transition: background-color .3s ease, color .3s ease, transform .3s ease;
    }

    .stack .layer:not(.top):hover {
        border-color: color-mix(in oklab, var(--teal) 40%, var(--border));
        transform: translateX(4px);
        box-shadow: var(--shadow-card);
    }

    .integ-domain:hover {
        background: var(--card);
        border-color: color-mix(in oklab, var(--teal) 30%, var(--border));
        transform: translateX(2px);
    }

    .dep-item:hover .ic {
        border-color: var(--teal);
        color: var(--teal);
    }

    .dep-item:hover {
        transform: translateY(-2px);
    }

    .kpi-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-card);
        border-color: color-mix(in oklab, var(--teal) 30%, var(--border));
    }

    .dash-view:hover {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, .09);
    }

    .problem-row {
        transition: background-color .25s ease, transform .25s ease;
    }

    .problem-row:hover {
        background: var(--surface);
        transform: translateX(2px);
    }

    .footer-groups a {
        transition: color .2s ease;
    }

    .nav a {
        position: relative;
    }

    .nav a::after {
        content: "";
        position: absolute;
        left: .75rem;
        right: .75rem;
        bottom: .35rem;
        height: 2px;
        background: var(--teal);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform .3s ease;
        border-radius: 2px;
    }

    .nav a:hover::after {
        transform: scaleX(1);
        transform-origin: left;
    }

    /* Buttons */
    .btn {
        position: relative;
        overflow: hidden;
    }

    .btn-primary {
        transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
    }

    .btn-primary:hover {
        box-shadow: var(--shadow-elev), 0 10px 30px -12px rgba(31, 143, 168, .35);
        filter: brightness(1.05);
    }

    .btn-ghost:hover {
        border-color: color-mix(in oklab, var(--teal) 40%, var(--border));
    }

    .btn::after {
        content: "";
        position: absolute;
        top: 0;
        left: -60%;
        width: 40%;
        height: 100%;
        background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .35), transparent);
        transform: skewX(-20deg);
        transition: left .65s ease
    }

    .btn:hover::after {
        left: 130%
    }

    .btn span[data-lucide="arrow-right"] {
        transition: transform .3s ease
    }

    .btn:hover span[data-lucide="arrow-right"] {
        transform: translateX(4px)
    }

    /* Pulse ring on integration hub icon */
    .integ-hub .ic {
        position: relative;
    }

    .integ-hub .ic::before,
    .integ-hub .ic::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: .6rem;
        border: 1px solid rgba(214, 237, 242, .55);
        animation: ring 2.6s ease-out infinite;
    }

    .integ-hub .ic::after {
        animation-delay: 1.3s;
    }

    @keyframes ring {
        0% {
            transform: scale(1);
            opacity: .7
        }

        100% {
            transform: scale(1.55);
            opacity: 0
        }
    }

    /* Live dot glow */
    .hero-visual-head .live .dot,
    .integ-hub .status .dot {
        box-shadow: 0 0 0 0 currentColor;
        animation: pulse 2.2s infinite, glow 2.2s infinite;
    }

    @keyframes glow {

        0%,
        100% {
            box-shadow: 0 0 0 0 rgba(52, 211, 153, .55)
        }

        50% {
            box-shadow: 0 0 0 6px rgba(52, 211, 153, 0)
        }
    }

    /* Module nav active indicator slide */
    .module-nav button {
        position: relative;
    }

    .module-nav button::before {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        bottom: 8px;
        width: 2px;
        background: var(--teal);
        transform: scaleY(0);
        transform-origin: center;
        transition: transform .3s ease;
        border-radius: 2px;
    }

    .module-nav button.active::before {
        transform: scaleY(1);
    }

    .module-panel .head .ic {
        animation: iconPop .5s cubic-bezier(.34, 1.56, .64, 1)
    }

    @keyframes iconPop {
        from {
            opacity: 0;
            transform: scale(.6) rotate(-8deg)
        }

        to {
            opacity: 1;
            transform: none
        }
    }

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

        to {
            opacity: 1;
            transform: none
        }
    }

    /* Pilot phase number ring */
    .pilot-phase .num {
        transition: background .3s ease, color .3s ease, border-color .3s ease;
    }

    .pilot-phase:hover .num {
        background: var(--navy);
        color: #fff;
        border-color: var(--navy);
    }

    /* Chart bar gradient shimmer on reveal */
    .chart .bar {
        transform-origin: bottom;
    }

    /* Hero visual subtle float */
    @media (prefers-reduced-motion: no-preference) {
        .hero-visual {
            animation: floaty 9s ease-in-out infinite;
        }
    }

    @keyframes floaty {

        0%,
        100% {
            transform: translateY(0)
        }

        50% {
            transform: translateY(-6px)
        }
    }

    /* Reduced motion respects */
    @media (prefers-reduced-motion: reduce) {

        .hero-visual,
        .integ-hub .ic::before,
        .integ-hub .ic::after,
        .hero-visual-head .live .dot,
        .integ-hub .status .dot {
            animation: none !important;
        }
    }