/* MATIS LABS — AI Engineering presentation system, 2026 */

.ai-engineering-main {
    --ai-ink: #080d1c;
    --ai-ink-soft: #12192b;
    --ai-paper: #f7f8fa;
    --ai-sand: #f2eee5;
    --ai-line: #d9dee8;
    --ai-copy: #536078;
    --ai-gold: #c6a45d;
    --ai-gold-deep: #967328;
    background: var(--ai-paper);
}

.ai-engineering-main > .section-ai-dark,
.ai-engineering-main .ai-legacy-section {
    display: none !important;
}

.ai-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: center;
}

.ai-hero-copy {
    color: #cbd5e8;
    font-size: clamp(1rem, 1.25vw, 1.12rem);
    line-height: 1.75;
    margin: 0 0 2.2rem;
    max-width: 610px;
}

.ai-hero-copy strong { color: #fff; }

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

.ai-hero-stat {
    padding-right: 1.2rem;
    min-width: 0;
}

.ai-hero-stat + .ai-hero-stat {
    border-left: 1px solid rgba(255, 255, 255, .1);
    padding-left: 1.2rem;
}

.ai-hero-stat strong {
    display: block;
    color: #e0c582 !important;
    font: 800 .78rem/1.2 var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ai-hero-stat span {
    display: block;
    color: #aebbd7;
    font-size: .74rem;
    line-height: 1.4;
    margin-top: .38rem;
}

.reference-proof-media { position: relative; }

.ai-photo-caption {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    max-width: calc(100% - 2rem);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 8px;
    background: rgba(7, 11, 21, .82);
    backdrop-filter: blur(10px);
    color: #e7d5a6;
    font: 700 .58rem/1.35 var(--font-mono);
    letter-spacing: .06em;
    padding: .62rem .78rem;
    text-transform: uppercase;
}

.ai-chapter {
    position: relative;
    overflow: hidden;
    padding: clamp(6rem, 10vw, 10rem) 0;
}

.ai-chapter::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ai-chapter--paper {
    background: #fff;
    color: var(--ai-ink);
}

.ai-chapter--paper::before {
    background:
        linear-gradient(rgba(8, 13, 28, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(8, 13, 28, .025) 1px, transparent 1px),
        radial-gradient(circle at 78% 15%, rgba(198, 164, 93, .11), transparent 28%);
    background-size: 56px 56px, 56px 56px, auto;
}

.ai-chapter--ink {
    background:
        radial-gradient(circle at 88% 18%, rgba(198, 164, 93, .13), transparent 24%),
        linear-gradient(150deg, #050814, #0b1020 56%, #070b16);
    color: #f7f8fb;
}

.ai-chapter--sand {
    background:
        radial-gradient(circle at 12% 5%, rgba(198, 164, 93, .15), transparent 23%),
        var(--ai-sand);
    color: var(--ai-ink);
}

.ai-story-head {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(290px, .75fr);
    gap: clamp(2rem, 7vw, 7rem);
    align-items: end;
    margin-bottom: clamp(3rem, 6vw, 5.5rem);
    position: relative;
    z-index: 2;
}

.ai-story-kicker {
    display: flex;
    align-items: center;
    gap: .9rem;
    color: var(--ai-gold-deep);
    font: 800 .68rem/1 var(--font-mono);
    letter-spacing: .11em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}

.ai-story-kicker::before {
    content: "";
    width: 30px;
    height: 1px;
    background: currentColor;
}

.ai-chapter--ink .ai-story-kicker { color: #d8bd7d; }

.ai-story-head h2 {
    font-size: clamp(2.8rem, 6.1vw, 6.5rem);
    line-height: .93;
    letter-spacing: -.065em;
    max-width: 980px;
    margin: 0;
}

.ai-story-head h2 em {
    color: var(--ai-gold-deep);
    font-style: normal;
}

.ai-chapter--ink .ai-story-head h2 { color: #fff; }
.ai-chapter--ink .ai-story-head h2 em { color: #d8bd7d; }

.ai-story-intro {
    color: var(--ai-copy);
    font-size: clamp(1rem, 1.35vw, 1.18rem);
    line-height: 1.75;
    max-width: 540px;
    margin: 0 0 .35rem;
}

.ai-chapter--ink .ai-story-intro { color: #c3ccdf; }

.ai-story-number {
    position: absolute;
    right: 0;
    top: -.35em;
    color: rgba(8, 13, 28, .035);
    font: 800 clamp(7rem, 18vw, 18rem)/1 var(--font-mono);
    letter-spacing: -.08em;
    pointer-events: none;
}

.ai-chapter--ink .ai-story-number { color: rgba(255,255,255,.035); }

.ai-stage-grid {
    display: grid;
    grid-template-columns: minmax(270px, .7fr) minmax(0, 1.3fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    position: relative;
    z-index: 2;
}

.ai-stage-grid--reverse {
    grid-template-columns: minmax(0, 1.3fr) minmax(270px, .7fr);
}

.ai-stage-copy h3 {
    font-size: clamp(1.7rem, 3vw, 2.8rem);
    line-height: 1.03;
    letter-spacing: -.045em;
    margin: 0 0 1.15rem;
}

.ai-chapter--ink .ai-stage-copy h3 { color: #fff; }

.ai-stage-copy p {
    color: var(--ai-copy);
    font-size: 1rem;
    line-height: 1.75;
    margin: 0 0 1.4rem;
}

.ai-chapter--ink .ai-stage-copy p { color: #b9c4d9; }

.ai-facts {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    border-top: 1px solid rgba(83, 96, 120, .24);
}

.ai-facts li {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: .85rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(83, 96, 120, .24);
    color: var(--ai-copy);
    font-size: .9rem;
    line-height: 1.55;
}

.ai-chapter--ink .ai-facts { border-color: rgba(255,255,255,.12); }
.ai-chapter--ink .ai-facts li { border-color: rgba(255,255,255,.12); color: #c3ccdf; }

.ai-facts b {
    color: var(--ai-gold-deep);
    font: 800 .68rem/1.6 var(--font-mono);
}

.ai-chapter--ink .ai-facts b { color: #d8bd7d; }

.ai-console {
    position: relative;
    border: 1px solid rgba(135, 146, 170, .34);
    border-radius: 26px;
    background: #0a0e19;
    box-shadow: 0 34px 80px rgba(9, 16, 32, .2);
    overflow: hidden;
    min-width: 0;
}

.ai-console-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 48px;
    padding: .8rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.035);
    color: #9ca9c2;
    font: 700 .62rem/1 var(--font-mono);
    letter-spacing: .07em;
    text-transform: uppercase;
}

.ai-console-dots { display: flex; gap: 6px; }
.ai-console-dots i { width: 7px; height: 7px; border-radius: 50%; background: #50586b; }
.ai-console-dots i:first-child { background: var(--ai-gold); }

.ai-console-status {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #d8bd7d;
}

.ai-console-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #75d49e;
    box-shadow: 0 0 0 5px rgba(117, 212, 158, .09);
}

/* 01 — Local AI Workbench */
.local-workbench { padding: clamp(1rem, 2.5vw, 2rem); }

.local-flow {
    display: grid;
    grid-template-columns: minmax(145px, .8fr) 52px minmax(175px, 1fr) 52px minmax(145px, .8fr);
    align-items: stretch;
    gap: 0;
}

.local-column {
    display: grid;
    gap: .7rem;
    align-content: center;
}

.local-column-title {
    color: #77839c;
    font: 800 .57rem/1 var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .2rem;
}

.local-node {
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 11px;
    background: rgba(255,255,255,.045);
    padding: .8rem .85rem;
    color: #e8edf7;
    font-size: .72rem;
    line-height: 1.25;
}

.local-node span {
    display: block;
    color: #7f8da8;
    font: 600 .54rem/1.3 var(--font-mono);
    margin-top: .28rem;
}

.local-connector {
    position: relative;
    align-self: center;
    height: 1px;
    background: rgba(198,164,93,.35);
    overflow: visible;
}

.local-connector::after {
    content: "";
    position: absolute;
    top: -3px;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e2c782;
    box-shadow: 0 0 14px rgba(226,199,130,.75);
    animation: ai-packet 2.8s linear infinite;
}

.local-core {
    min-height: 246px;
    border: 1px solid rgba(198,164,93,.46);
    border-radius: 20px;
    background:
        radial-gradient(circle at 50% 42%, rgba(198,164,93,.22), transparent 35%),
        linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
    display: grid;
    place-items: center;
    padding: 1.2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.local-core::before,
.local-core::after {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(198,164,93,.18);
    border-radius: 50%;
    animation: ai-orbit 12s linear infinite;
}

.local-core::after {
    width: 132px;
    height: 132px;
    border-style: dashed;
    animation-direction: reverse;
    animation-duration: 9s;
}

.local-core-content { position: relative; z-index: 2; }
.local-core-mark { color: #d8bd7d; font: 800 .58rem/1 var(--font-mono); letter-spacing: .1em; }
.local-core strong { display: block; color: #fff; font-size: clamp(1.2rem, 2vw, 1.8rem); line-height: 1.05; margin: .7rem 0; }
.local-core small { display: block; color: #93a0ba; font-size: .67rem; line-height: 1.45; }

.training-rail {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .65rem;
    margin-top: 1.4rem;
}

.training-step {
    min-height: 82px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    background: rgba(255,255,255,.035);
    padding: .75rem;
}

.training-step b { color: #d8bd7d; font: 800 .56rem/1 var(--font-mono); }
.training-step strong { display: block; color: #f6f8fc; font-size: .74rem; margin-top: .45rem; }
.training-step span { display: block; color: #77839c; font-size: .61rem; margin-top: .3rem; line-height: 1.4; }

/* DGX Spark as a local agent node */
.spark-agent-deployment {
    position: relative;
    z-index: 2;
    margin-top: clamp(5rem, 9vw, 8rem);
    padding-top: clamp(3rem, 5vw, 4.5rem);
    border-top: 1px solid #d4dae4;
}

.spark-agent-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: end;
    margin-bottom: 2.2rem;
}

.spark-agent-intro h3 {
    color: var(--ai-ink);
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: .98;
    letter-spacing: -.055em;
    margin: 0;
    max-width: 760px;
}

.spark-agent-intro p {
    color: var(--ai-copy);
    font-size: .98rem;
    line-height: 1.75;
    margin: 0;
}

.spark-agent-board {
    overflow: hidden;
    border: 1px solid #293247;
    border-radius: 24px;
    background:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
        #080d18;
    background-size: 34px 34px, 34px 34px, auto;
    box-shadow: 0 30px 70px rgba(8, 13, 28, .18);
}

.spark-board-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 50px;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.035);
    color: #aab5ca;
    font: 700 .6rem/1.2 var(--font-mono);
    letter-spacing: .08em;
}

.spark-board-state {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: #9de1b7;
}

.spark-board-state::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #75d49e;
    box-shadow: 0 0 0 5px rgba(117,212,158,.09);
}

.spark-agent-flow {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 48px minmax(240px, 1.12fr) 48px minmax(180px, 1fr);
    align-items: stretch;
    padding: clamp(1.2rem, 3.5vw, 2.7rem);
}

.spark-flow-column {
    display: grid;
    gap: .75rem;
    align-content: center;
}

.spark-flow-label {
    color: #a4b0c7;
    font: 800 .58rem/1 var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .15rem;
}

.spark-flow-node {
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 12px;
    background: rgba(255,255,255,.052);
    padding: .9rem;
}

.spark-flow-node strong {
    display: block;
    color: #f4f7fb;
    font-size: .78rem;
}

.spark-flow-node span {
    display: block;
    color: #9aa7bf;
    font-size: .62rem;
    line-height: 1.45;
    margin-top: .35rem;
}

.spark-flow-link {
    position: relative;
    align-self: center;
    height: 1px;
    background: rgba(216,189,125,.45);
}

.spark-flow-link::after {
    content: "";
    position: absolute;
    top: -3px;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e1c681;
    box-shadow: 0 0 13px rgba(225,198,129,.72);
    animation: ai-packet 2.8s linear infinite;
}

.spark-core-node {
    position: relative;
    display: grid;
    align-content: center;
    text-align: center;
    min-height: 285px;
    padding: 1.5rem;
    border: 1px solid rgba(216,189,125,.62);
    border-radius: 20px;
    background:
        radial-gradient(circle at 50% 42%, rgba(198,164,93,.23), transparent 38%),
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
}

.spark-core-node > span {
    color: #e1c681;
    font: 800 .62rem/1 var(--font-mono);
    letter-spacing: .12em;
}

.spark-core-node > strong {
    color: #fff;
    font-size: clamp(1.35rem, 2.4vw, 2.15rem);
    line-height: 1.02;
    margin: .8rem 0 1rem;
}

.spark-core-node > small {
    color: #a4b0c7;
    font-size: .66rem;
    line-height: 1.5;
    margin-top: .9rem;
}

.spark-runtime-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .38rem;
}

.spark-runtime-chips i {
    border: 1px solid rgba(216,189,125,.3);
    border-radius: 100px;
    background: rgba(216,189,125,.08);
    color: #d7c18a;
    font: 700 .5rem/1 var(--font-mono);
    font-style: normal;
    padding: .42rem .5rem;
}

.spark-agent-proof {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.025);
}

.spark-agent-proof > div {
    min-height: 138px;
    padding: 1.25rem 1.35rem;
}

.spark-agent-proof > div + div { border-left: 1px solid rgba(255,255,255,.1); }
.spark-agent-proof b { color: #d8bd7d; font: 800 .58rem/1 var(--font-mono); }
.spark-agent-proof strong { display: block; color: #f4f7fb; font-size: .85rem; margin-top: 1.2rem; }
.spark-agent-proof span { display: block; color: #9ca8be; font-size: .7rem; line-height: 1.5; margin-top: .4rem; }

/* 02 — Agent operating model */
.agent-console { padding: clamp(1rem, 2.5vw, 1.8rem); }

.agent-map {
    display: grid;
    grid-template-columns: 1fr minmax(150px, .82fr) 1fr;
    gap: 1rem;
    align-items: center;
}

.agent-role-stack,
.agent-control-stack { display: grid; gap: .75rem; }

.agent-role,
.agent-control {
    position: relative;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 13px;
    background: rgba(255,255,255,.045);
    padding: .9rem;
}

.agent-role b,
.agent-control b { display: block; color: #f5f7fb; font-size: .76rem; }
.agent-role span,
.agent-control span { display: block; color: #8491aa; font-size: .61rem; line-height: 1.45; margin-top: .3rem; }

.agent-role::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1.05rem;
    width: 1.05rem;
    height: 1px;
    background: rgba(198,164,93,.4);
}

.agent-control::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -1.05rem;
    width: 1.05rem;
    height: 1px;
    background: rgba(198,164,93,.4);
}

.agent-orchestrator {
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(198,164,93,.55);
    background: radial-gradient(circle, rgba(198,164,93,.19), rgba(198,164,93,.04) 55%, transparent 56%);
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1rem;
    position: relative;
}

.agent-orchestrator::before {
    content: "";
    position: absolute;
    inset: 12%;
    border: 1px dashed rgba(198,164,93,.35);
    border-radius: 50%;
    animation: ai-orbit 12s linear infinite;
}

.agent-orchestrator div { position: relative; z-index: 2; }
.agent-orchestrator small { color: #d8bd7d; font: 800 .52rem/1.2 var(--font-mono); letter-spacing: .09em; }
.agent-orchestrator strong { display: block; color: #fff; font-size: clamp(.88rem, 1.4vw, 1.15rem); line-height: 1.05; margin-top: .45rem; }

.human-gate {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    margin-top: 1rem;
    border: 1px solid rgba(198,164,93,.42);
    border-radius: 14px;
    background: rgba(198,164,93,.09);
    padding: .9rem 1rem;
}

.human-gate-index { color: #d8bd7d; font: 800 .62rem/1 var(--font-mono); }
.human-gate strong { display: block; color: #fff; font-size: .78rem; }
.human-gate span { display: block; color: #aeb9ce; font-size: .64rem; margin-top: .25rem; }
.human-gate-state { border: 1px solid rgba(117,212,158,.35); border-radius: 100px; color: #97e5b8; font: 700 .53rem/1 var(--font-mono); padding: .5rem .65rem; }

.employee-integration {
    position: relative;
    z-index: 2;
    margin-top: clamp(5rem, 9vw, 8rem);
    padding-top: clamp(3rem, 5vw, 4.5rem);
    border-top: 1px solid rgba(255,255,255,.14);
}

.employee-integration-head {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: end;
    margin-bottom: 2.4rem;
}

.employee-integration-head h3 {
    color: #fff;
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: .98;
    letter-spacing: -.055em;
    margin: 0;
    max-width: 780px;
}

.employee-integration-head p {
    color: #c3ccdf;
    font-size: .98rem;
    line-height: 1.75;
    margin: 0;
}

.employee-journey {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 20px;
    background: rgba(255,255,255,.035);
    overflow: hidden;
}

.employee-journey article {
    position: relative;
    min-height: 195px;
    padding: 1.25rem 1.1rem;
}

.employee-journey article + article { border-left: 1px solid rgba(255,255,255,.12); }
.employee-journey article::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 50%;
    right: -5px;
    width: 9px;
    height: 9px;
    border-top: 1px solid #d8bd7d;
    border-right: 1px solid #d8bd7d;
    background: #090e1b;
    transform: translateY(-50%) rotate(45deg);
}

.employee-journey article:last-child::after { display: none; }
.employee-journey b { color: #d8bd7d; font: 800 .58rem/1 var(--font-mono); }
.employee-journey article > span { display: block; color: #8e9bb3; font: 700 .55rem/1 var(--font-mono); letter-spacing: .08em; margin-top: 2.3rem; text-transform: uppercase; }
.employee-journey strong { display: block; color: #fff; font-size: .9rem; line-height: 1.3; margin-top: .65rem; }
.employee-journey small { display: block; color: #a7b2c7; font-size: .64rem; line-height: 1.5; margin-top: .65rem; }
.employee-journey--human { background: rgba(198,164,93,.105); }
.employee-journey--human strong { color: #eedaa5; }

.employee-department-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .8rem;
    margin-top: .9rem;
}

.employee-department-grid article {
    min-height: 180px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 15px;
    background: rgba(255,255,255,.035);
    padding: 1.15rem;
}

.employee-department-grid span { color: #d8bd7d; font: 800 .56rem/1 var(--font-mono); letter-spacing: .09em; }
.employee-department-grid strong { display: block; color: #f5f7fb; font-size: .82rem; line-height: 1.4; margin-top: 2rem; }
.employee-department-grid small { display: block; color: #9ca8be; font-size: .66rem; line-height: 1.55; margin-top: .65rem; }

/* 03 — Model deployment locations */
.deployment-spectrum {
    position: relative;
    z-index: 2;
    overflow: hidden;
    margin: -1rem 0 clamp(4rem, 7vw, 6.5rem);
    border: 1px solid #ccd3df;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 58px rgba(8, 13, 28, .09);
}

.deployment-spectrum-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 52px;
    padding: .9rem 1.15rem;
    border-bottom: 1px solid #d8dde6;
    background: #0a0f1d;
    color: #aeb9ce;
    font: 700 .58rem/1.3 var(--font-mono);
    letter-spacing: .08em;
}

.deployment-spectrum-bar strong {
    color: #e4cc91;
    font: inherit;
}

.deployment-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.deployment-option {
    display: flex;
    flex-direction: column;
    min-height: 285px;
    padding: 1.4rem;
    background: linear-gradient(145deg, #fff, #f7f8fa);
}

.deployment-option + .deployment-option { border-left: 1px solid #d8dde6; }
.deployment-option--local { background: linear-gradient(145deg, #f7f0df, #fff); }
.deployment-option b { color: var(--ai-gold-deep); font: 800 .6rem/1 var(--font-mono); letter-spacing: .08em; }
.deployment-option h3 { color: var(--ai-ink); font-size: 1.15rem; line-height: 1.16; letter-spacing: -.025em; margin: 2.6rem 0 .85rem; }
.deployment-option p { color: var(--ai-copy); font-size: .78rem; line-height: 1.6; margin: 0; }
.deployment-option > span { color: #68758b; font: 700 .52rem/1.35 var(--font-mono); letter-spacing: .07em; margin-top: auto; padding-top: 1.2rem; }

.cloud-provider-rail {
    display: grid;
    grid-template-columns: .8fr 1.8fr;
    gap: 1.5rem;
    align-items: center;
    padding: 1.35rem 1.5rem;
    border-top: 1px solid #d8dde6;
    background: #f7f8fa;
}

.cloud-provider-rail > div span,
.data-routing-copy > span {
    display: block;
    color: #9a752d;
    font: 800 .56rem/1.3 var(--font-mono);
    letter-spacing: .09em;
}

.cloud-provider-rail > div strong {
    display: block;
    margin-top: .35rem;
    color: var(--ai-ink);
    font-size: .92rem;
}

.cloud-provider-rail ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cloud-provider-rail li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 54px;
    padding: .65rem .8rem;
    border: 1px solid #d8dde6;
    border-radius: 10px;
    background: #fff;
    color: var(--ai-ink);
    font-size: .78rem;
    font-weight: 800;
}

.cloud-provider-rail small {
    margin-top: .2rem;
    color: #7c8799;
    font: 700 .5rem/1.2 var(--font-mono);
    letter-spacing: .08em;
}

.data-routing-guide {
    display: grid;
    grid-template-columns: .82fr 1.68fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    padding: clamp(1.7rem, 3vw, 2.5rem);
    border-top: 1px solid #d8dde6;
    background: #fff;
}

.data-routing-copy h3 {
    margin: .7rem 0 1rem;
    color: var(--ai-ink);
    font-size: clamp(1.5rem, 2.3vw, 2.25rem);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.data-routing-copy p {
    margin: 0;
    color: var(--ai-copy);
    font-size: .85rem;
    line-height: 1.65;
}

.data-routing-levels {
    overflow: hidden;
    border: 1px solid #d5dbe5;
    border-radius: 14px;
}

.data-routing-levels article {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    gap: .85rem;
    align-items: center;
    min-height: 76px;
    padding: .85rem 1rem;
    background: #fafbfc;
}

.data-routing-levels article + article { border-top: 1px solid #d8dde6; }
.data-routing-levels article > b { color: #a17c34; font: 800 .62rem/1 var(--font-mono); }
.data-routing-levels article strong { display: block; color: var(--ai-ink); font-size: .82rem; }
.data-routing-levels article span { display: block; margin-top: .2rem; color: #69758a; font-size: .69rem; line-height: 1.45; }
.data-routing-levels article em { color: #65728a; font: 800 .52rem/1.3 var(--font-mono); letter-spacing: .07em; text-align: right; }
.data-routing-levels .data-routing-level--critical { background: #111827; }
.data-routing-levels .data-routing-level--critical strong { color: #f5f7fb; }
.data-routing-levels .data-routing-level--critical span { color: #b8c2d4; }
.data-routing-levels .data-routing-level--critical em { color: #e2c77f; }

.deployment-note {
    border-top: 1px solid #d8dde6;
    background: #f3f5f8;
    color: #566278;
    font-size: .76rem;
    line-height: 1.6;
    margin: 0;
    padding: 1rem 1.2rem;
}

.deployment-note strong { color: var(--ai-ink); }

/* 03 — Resilience router */
.resilience-board { padding: clamp(1rem, 2.5vw, 2rem); }

.router-policy {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .6rem;
    margin-bottom: 1.25rem;
}

.router-policy span {
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    background: rgba(255,255,255,.035);
    color: #a5b0c5;
    font: 700 .56rem/1.3 var(--font-mono);
    padding: .65rem;
    text-align: center;
    text-transform: uppercase;
}

.router-flow {
    display: grid;
    grid-template-columns: minmax(110px, .62fr) 38px minmax(150px, .85fr) 38px minmax(180px, 1.25fr);
    gap: 0;
    align-items: center;
}

.router-request,
.router-gateway,
.model-route {
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    background: rgba(255,255,255,.045);
    padding: 1rem;
}

.router-request small,
.router-gateway small,
.model-route small { color: #75829b; font: 700 .52rem/1 var(--font-mono); letter-spacing: .08em; }
.router-request strong,
.router-gateway strong,
.model-route strong { display: block; color: #f7f8fc; font-size: .78rem; line-height: 1.3; margin-top: .45rem; }

.router-gateway {
    border-color: rgba(198,164,93,.45);
    background: rgba(198,164,93,.09);
}

.router-link {
    height: 1px;
    background: rgba(198,164,93,.4);
    position: relative;
}

.router-link::after {
    content: "";
    position: absolute;
    right: -1px;
    top: -3px;
    border-left: 6px solid #c6a45d;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
}

.model-routes { display: grid; gap: .65rem; }
.model-route { display: grid; grid-template-columns: 1fr auto; gap: .8rem; align-items: center; padding: .8rem .9rem; }
.model-route--primary { border-color: rgba(117,212,158,.35); background: rgba(117,212,158,.07); }
.route-state { color: #8f9bb2; font: 700 .5rem/1 var(--font-mono); text-transform: uppercase; }
.model-route--primary .route-state { color: #8fe1b1; }

.resilience-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .65rem;
    margin-top: 1.25rem;
}

.resilience-metric {
    border-top: 1px solid rgba(255,255,255,.12);
    padding-top: .8rem;
}

.resilience-metric strong { display: block; color: #eef2f8; font-size: .68rem; }
.resilience-metric span { display: block; color: #74819a; font-size: .57rem; margin-top: .28rem; }

/* Business outcomes and delivery */
.ai-outcomes {
    background: #fff;
    padding: clamp(5rem, 9vw, 9rem) 0;
}

.ai-outcomes-head {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 3rem;
    align-items: end;
    margin-bottom: 3.5rem;
}

.ai-outcomes h2,
.ai-delivery h2 {
    color: var(--ai-ink);
    font-size: clamp(2.5rem, 5.2vw, 5rem);
    line-height: .96;
    letter-spacing: -.06em;
    margin: 0;
}

.ai-outcomes-head p { color: var(--ai-copy); line-height: 1.75; margin: 0; }

.ai-outcome-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--ai-line);
    border-radius: 22px;
    overflow: hidden;
}

.ai-outcome {
    display: flex;
    flex-direction: column;
    min-height: 360px;
    padding: 2rem;
    position: relative;
    background: linear-gradient(145deg, #fff, #f7f8fa);
}

.ai-outcome + .ai-outcome { border-left: 1px solid var(--ai-line); }
.ai-outcome-index { color: var(--ai-gold-deep); font: 800 .65rem/1 var(--font-mono); letter-spacing: .08em; }
.ai-outcome h3 { color: var(--ai-ink); font-size: clamp(1.45rem, 2.3vw, 2rem); line-height: 1.05; margin: 3.7rem 0 1rem; }
.ai-outcome p { color: var(--ai-copy); font-size: .93rem; line-height: 1.65; margin: 0; }
.ai-outcome-status { position: static; color: #65728a; font: 700 .55rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; margin-top: auto; padding-top: 1.4rem; }

.ai-delivery {
    background: #f2f4f7;
    padding: clamp(5rem, 9vw, 9rem) 0;
}

.ai-delivery-head { max-width: 900px; margin-bottom: 3.5rem; }
.ai-delivery-head p { color: var(--ai-copy); max-width: 650px; line-height: 1.75; margin-top: 1.5rem; }

.ai-delivery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #cfd5df;
}

.ai-delivery-step { padding: 1.6rem 1.5rem 0 0; }
.ai-delivery-step + .ai-delivery-step { padding-left: 1.5rem; border-left: 1px solid #cfd5df; }
.ai-delivery-step b { color: var(--ai-gold-deep); font: 800 .65rem/1 var(--font-mono); }
.ai-delivery-step h3 { color: var(--ai-ink); font-size: 1.18rem; margin: 1.25rem 0 .7rem; }
.ai-delivery-step p { color: var(--ai-copy); font-size: .85rem; line-height: 1.6; }

.ai-research-note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.4rem;
    align-items: start;
    margin-top: 4rem;
    border: 1px solid #cfd5df;
    border-radius: 16px;
    background: #fff;
    padding: 1.4rem;
}

.ai-research-note strong { color: var(--ai-ink); font-size: .82rem; }
.ai-research-note p { color: var(--ai-copy); font-size: .78rem; line-height: 1.6; margin: .25rem 0 0; }
.ai-research-links { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .75rem; }
.ai-research-links a { color: #3f4b63; border-bottom: 1px solid #aeb8c8; font-size: .72rem; }

.ai-final-cta {
    background: #070b15;
    padding: clamp(5rem, 9vw, 8rem) 0;
    text-align: center;
}

.ai-final-cta h2 {
    color: #fff;
    font-size: clamp(2.6rem, 5.7vw, 5.8rem);
    line-height: .94;
    letter-spacing: -.065em;
    max-width: 930px;
    margin: 0 auto 1.5rem;
}

.ai-final-cta h2 span { color: #d8bd7d; }
.ai-final-cta p { color: #aeb9ce; max-width: 650px; margin: 0 auto 2.2rem; line-height: 1.7; }
.ai-final-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem; }

@keyframes ai-packet {
    from { transform: translateX(0); opacity: 0; }
    15%, 85% { opacity: 1; }
    to { transform: translateX(45px); opacity: 0; }
}

@keyframes ai-orbit { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
    .ai-hero-layout,
    .ai-story-head,
    .ai-stage-grid,
    .ai-stage-grid--reverse,
    .ai-outcomes-head,
    .spark-agent-intro,
    .employee-integration-head { grid-template-columns: 1fr; }
    .ai-hero-layout { gap: 3rem; }
    .ai-stage-copy { max-width: 700px; }
    .ai-stage-grid--reverse .ai-stage-copy { order: -1; }
    .spark-agent-flow { grid-template-columns: minmax(160px, 1fr) 34px minmax(220px, 1.1fr) 34px minmax(160px, 1fr); }
    .employee-department-grid { grid-template-columns: 1fr 1fr; }
    .deployment-options { grid-template-columns: 1fr 1fr; }
    .cloud-provider-rail,
    .data-routing-guide { grid-template-columns: 1fr; }
    .cloud-provider-rail ul { grid-template-columns: 1fr 1fr; }
    .deployment-option:nth-child(3) { border-left: 0; border-top: 1px solid #d8dde6; }
    .deployment-option:nth-child(4) { border-top: 1px solid #d8dde6; }
    .ai-delivery-grid { grid-template-columns: 1fr 1fr; gap: 2rem 0; }
    .ai-delivery-step:nth-child(3) { border-left: 0; padding-left: 0; }
}

@media (max-width: 720px) {
    .ai-hero { min-height: auto; padding: 108px 0 64px; }
    .ai-hero-stats { grid-template-columns: 1fr; }
    .ai-hero-stat { padding: .8rem 0; }
    .ai-hero-stat + .ai-hero-stat { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); padding-left: 0; }
    #dcCanvas { height: 310px; }
    .ai-story-head h2 { font-size: clamp(2.35rem, 11.2vw, 4.4rem); }
    .ai-story-number { top: -.15em; }
    .local-flow { grid-template-columns: 1fr; gap: .8rem; }
    .local-connector { width: 1px; height: 28px; justify-self: center; }
    .local-connector::after { animation: none; }
    .training-rail { grid-template-columns: 1fr 1fr; }
    .spark-board-bar { align-items: flex-start; flex-direction: column; }
    .spark-agent-flow { grid-template-columns: 1fr; gap: .8rem; }
    .spark-flow-link { width: 1px; height: 28px; justify-self: center; }
    .spark-flow-link::after { animation: none; }
    .spark-core-node { min-height: 240px; }
    .spark-agent-proof { grid-template-columns: 1fr; }
    .spark-agent-proof > div { min-height: 0; }
    .spark-agent-proof > div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); }
    .agent-map { grid-template-columns: 1fr; }
    .agent-role::after,
    .agent-control::before { display: none; }
    .agent-orchestrator { width: 180px; justify-self: center; }
    .human-gate { grid-template-columns: auto 1fr; }
    .human-gate-state { grid-column: 2; justify-self: start; }
    .employee-journey { grid-template-columns: 1fr; }
    .employee-journey article { min-height: 0; }
    .employee-journey article + article { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
    .employee-journey article::after { display: none; }
    .employee-journey article > span { margin-top: 1.1rem; }
    .employee-department-grid { grid-template-columns: 1fr; }
    .employee-department-grid article { min-height: 0; }
    .deployment-spectrum-bar { align-items: flex-start; flex-direction: column; }
    .deployment-options { grid-template-columns: 1fr; }
    .deployment-option { min-height: 0; }
    .deployment-option + .deployment-option { border-left: 0; border-top: 1px solid #d8dde6; }
    .deployment-option h3 { margin-top: 1.5rem; }
    .cloud-provider-rail ul { grid-template-columns: 1fr; }
    .data-routing-levels article { grid-template-columns: 28px 1fr; }
    .data-routing-levels article em { grid-column: 2; text-align: left; }
    .router-policy { grid-template-columns: 1fr 1fr; }
    .router-flow { grid-template-columns: 1fr; gap: .7rem; }
    .router-link { width: 1px; height: 24px; justify-self: center; }
    .router-link::after { top: auto; bottom: -1px; right: -3px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #c6a45d; border-bottom: 0; }
    .resilience-metrics { grid-template-columns: 1fr 1fr; }
    .ai-outcome-grid { grid-template-columns: 1fr; }
    .ai-outcome + .ai-outcome { border-left: 0; border-top: 1px solid var(--ai-line); }
    .ai-outcome { min-height: 300px; }
    .ai-delivery-grid { grid-template-columns: 1fr; }
    .ai-delivery-step + .ai-delivery-step { border-left: 0; border-top: 1px solid #cfd5df; padding: 1.6rem 0 0; }
    .ai-research-note { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .local-connector::after,
    .local-core::before,
    .local-core::after,
    .spark-flow-link::after,
    .agent-orchestrator::before { animation: none !important; }
}