:root {
    --bg: #091227;
    --bg-2: #0b142c;
    --panel: #0e1a36;
    --ink: #e8f1ff;
    --muted: #a8b8dd;
    --brand: #5cc8ff;
    --brand2: #7b61ff;
    --accent: #00e3b2;
    --line: #1e2c58;
    --radius: 18px;
    --shadow: 0 22px 60px rgba(0,0,0,.35)
}

* {
    box-sizing: border-box
}

/* === Enlarge SVG visuals in subslides === */
/* Prefer aspect-ratio or clamp over hard heights */
.subslide .imgph {
    /* keep your current styles AND add: */
    aspect-ratio: 16 / 10; /* ensures consistent box shape */
    height: auto; /* let the ratio decide height */
    max-height: min(58svh, 560px); /* never exceed viewport */
}

/* Small screens: reduce maximum */
@media (max-width: 880px) {
    .subslide .imgph {
        max-height: min(42svh, 360px);
    }
}

/* =========================
   SOLUTION TIMELINE (CSS-only)
   Uses existing classes: .subpager .subslide .kicker .num .copy .media .reverse
   ========================= */

#solution .subpager[data-subpager] {
    position: relative;
    display: flex; /* ensure it behaves like a vertical list */
    flex-direction: column;
    gap: 26px;
    margin-top: 18px;
    padding-left: 64px; /* space for spine + node */
}

    /* The vertical spine */
    #solution .subpager[data-subpager]::before {
        content: "";
        position: absolute;
        left: 32px; /* spine position */
        top: 10px;
        bottom: 10px;
        width: 2px;
        background: linear-gradient( to bottom, rgba(92,200,255,.60), rgba(123,97,255,.18) );
        opacity: .9;
    }

    /* Each step becomes a “node” on the timeline */
    #solution .subpager[data-subpager] > .subslide {
        position: relative;
        background: linear-gradient(180deg,#102043,#0e1a36); /* keep your premium card look */
        border: 1px solid var(--line);
        border-radius: 18px;
        box-shadow: var(--shadow);
        padding: 26px;
        overflow: hidden;
    }

        /* Connector from spine into the card */
        #solution .subpager[data-subpager] > .subslide::before {
            content: "";
            position: absolute;
            left: -64px; /* reaches back to spine */
            top: 44px; /* aligns with the number */
            width: 64px;
            height: 2px;
            background: linear-gradient(to right, rgba(92,200,255,.7), rgba(92,200,255,0));
        }

        /* Turn your existing .num into the timeline node */
        #solution .subpager[data-subpager] > .subslide .kicker {
            position: relative;
        }

            #solution .subpager[data-subpager] > .subslide .kicker .num {
                position: absolute;
                left: -96px; /* sits over the spine */
                top: 6px;
                z-index: 2;
                box-shadow: 0 10px 30px rgba(0,0,0,.35);
            }

                /* Add a small glow behind the node (optional but helps “flow”) */
                #solution .subpager[data-subpager] > .subslide .kicker .num::after {
                    content: "";
                    position: absolute;
                    inset: -10px;
                    border-radius: 999px;
                    background: radial-gradient(circle, rgba(92,200,255,.25), rgba(92,200,255,0) 70%);
                    z-index: -1;
                }



/* Make reverse steps feel like a “zig-zag” journey (subtle) */
@media (min-width: 860px) {
    #solution .subpager[data-subpager] > .subslide.reverse {
        transform: translateX(10px);
    }

    #solution .subpager[data-subpager] > .subslide:not(.reverse) {
        transform: translateX(-10px);
    }
}

/* Timeline spine */
.solution-flow {
    position: relative;
}

    .solution-flow::before {
        content: "";
        position: absolute;
        left: 36px; /* aligns with number badges */
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient( to bottom, rgba(109,193,239,.6), rgba(109,193,239,.15) );
    }

.solution-step {
    position: relative;
    padding-left: 96px; /* space for line + badge */
}

    .solution-step .num {
        position: absolute;
        left: 20px;
        top: 40px;
        z-index: 2;
    }

.solution-step {
    background: none;
    border: none;
    border-radius: 0;
}

/* Anything inside the media container should scale, not stretch */
.subslide .imgph img,
.subslide .imgph object,
.subslide .imgph video {
    width: 100%;
    height: 100%;
    object-fit: contain; /* keep aspect */
}

.section {
    scroll-margin-top: 86px; /* header + a bit of buffer */
}

@media (max-width: 880px), (max-height: 680px) {
    .dots {
        display: none;
    }
}

html, body {
    height: 100%
}

body {
    margin: 0;
    color: var(--ink);
    font: 16px/1.7 system-ui,Segoe UI,Inter,Arial,sans-serif;
    letter-spacing: .2px;
    background: radial-gradient(1100px 800px at 80% -10%,#1a2b59 0%,transparent 60%), radial-gradient(900px 700px at -10% 110%,#112447 0%,transparent 55%), var(--bg);
    overflow: auto
}

a {
    color: var(--brand);
    text-decoration: none
}

    a:hover {
        color: #bfe4ff
    }

/* Top nav */
.top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    backdrop-filter: saturate(120%) blur(10px);
    background: linear-gradient(180deg,#0a1531e6,#0a153100);
    border-bottom: 1px solid #0e2150;
}

.nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
}

    .brand img {
        height: 42px;
        filter: drop-shadow(0 6px 20px rgba(92,200,255,.25));
    }

    .brand strong {
        font-weight: 800;
        letter-spacing: .6px;
    }

.nav-toggle {
    display: none;
    background: transparent;
    color: #e7f0ff;
    border: 1px solid #1b2b59;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 16px;
    gap: 10px;
    align-items: center;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.nav-link {
    color: #c6d6fb;
    background: transparent;
    border: 0;
    padding: 10px 10px;
    border-radius: 12px;
    font: 700 14px ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto;
    cursor: pointer;
}

    .nav-link.single {
        text-decoration: none;
        display: inline-flex;
        align-items: center;
    }

    .nav-link:hover,
    .nav-link:focus-visible {
        color: #fff;
        background: rgba(255,255,255,.04);
        outline: none;
    }

.nav-item {
    position: relative;
}

    .nav-item .caret {
        opacity: .85;
        font-size: 12px;
    }

.nav-sub {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 280px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid #1b2b59;
    background: linear-gradient(180deg, #0e1a36, #0a1531);
    box-shadow: var(--shadow);
    display: grid;
    gap: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    z-index: 2100;
}

    .nav-sub a {
        color: #cfe0ff;
        padding: 10px 10px;
        border-radius: 10px;
        text-decoration: none;
        font-weight: 650;
        font-size: 13px;
    }

        .nav-sub a:hover,
        .nav-sub a:focus-visible {
            background: #0f1b3a;
            color: #fff;
            outline: none;
        }

/* Open state (JS adds .is-open on the .nav-item) */
.nav-item.is-open .nav-sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity .18s ease, transform .18s ease;
}

.nav-sub a.is-active,
.nav-link.is-active {
    color: #fff;
    box-shadow: 0 0 0 2px rgba(92,200,255,.18) inset;
    background: rgba(92,200,255,.10);
}

/* Progress bar */
.nav-progress {
    height: 2px;
    background: rgba(255,255,255,.06);
}

.nav-progress-bar {
    display: block;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, var(--brand), var(--brand2));
}

/* Mobile drawer */
.nav-drawer[hidden] {
    display: none !important;
}

.nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(3, 8, 18, 0.70);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    display: grid;
    place-items: start center;
    padding-top: 70px;
}

.nav-drawer-inner {
    width: min(92vw, 420px);
    border-radius: 18px;
    border: 1px solid rgba(30, 44, 88, 0.6);
    background: linear-gradient(180deg,#0e1a36,#0a1531);
    box-shadow: var(--shadow);
    padding: 14px;
}

.nav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 4px 10px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    margin-bottom: 10px;
}

.nav-close {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(30,44,88,.7);
    background: rgba(255,255,255,.03);
    color: var(--ink);
    font-size: 22px;
    cursor: pointer;
}

.nav-acc {
    display: grid;
    gap: 8px;
    padding-top: 6px;
}

.nav-acc-btn {
    width: 100%;
    text-align: left;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(30,44,88,.7);
    background: rgba(255,255,255,.03);
    color: #e8f1ff;
    font-weight: 800;
    cursor: pointer;
}

.nav-acc-panel {
    border-left: 2px solid rgba(92,200,255,.25);
    margin-left: 8px;
    padding-left: 10px;
    display: grid;
    gap: 6px;
}

    .nav-acc-panel a,
    .nav-drawer-link {
        display: block;
        padding: 10px 10px;
        border-radius: 12px;
        color: #cfe0ff;
        text-decoration: none;
        font-weight: 650;
    }

        .nav-acc-panel a:hover,
        .nav-drawer-link:hover {
            background: rgba(255,255,255,.04);
            color: #fff;
        }

.nav-drawer-cta {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

/* Responsive: collapse to toggle */
@media (max-width: 940px) {
    .nav-toggle {
        display: inline-flex;
    }

    .nav-links {
        display: none;
    }
}

/* Anchor landing offset */
#overview, #solution, #platform, #ops-suite, #resources, #roi, #pricing, #contact {
    scroll-margin-top: 110px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 14px;
    font-weight: 700
}
/* Ensure the HTML `hidden` attribute ALWAYS hides elements (overrides .btn display) */
[hidden] {
    display: none !important;
}

/* (optional) extra-safety just for the agent button */
#agent-video-btn[hidden] {
    display: none !important;
}

    .btn.primary {
        background: linear-gradient(135deg,var(--brand),var(--brand2));
        color: #031025
    }

    .btn.ghost {
        background: #0f1b3a;
        color: #d9e6ff;
        border: 1px solid #1b2b59
    }

/* Major pager */
.pager {
    max-width: none;
    margin: 0 auto;
    padding-top: 70px
}

.section {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    position: relative
}

    .section::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: radial-gradient(1200px 700px at 70% -10%,rgba(123,97,255,.14) 0%,rgba(123,97,255,0) 60%), radial-gradient(1100px 700px at 15% 100%,rgba(92,200,255,.14) 0%,rgba(92,200,255,0) 58%)
    }

.js body {
    overflow: hidden
}

.js .pager {
    position: fixed;
    inset: 0;
    max-width: none;
    padding-top: 70px
}

.js .section {
    position: absolute;
    inset: 70px 0 0 0;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .6s ease,transform .6s ease;
    will-change: opacity,transform;
    pointer-events: none
}

    .js .section.active {
        opacity: 1;
        transform: none;
        pointer-events: auto
    }

html.no-js {
    scroll-snap-type: y mandatory
}

.no-js .section {
    scroll-snap-align: start
}

/* --- Solution badges & headers --- */
.kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
}

.num {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    border-radius: 999px;
    font-weight: 800;
    color: #04132b;
    background: var(--b, #7fc4ff);
    border: 1px solid #9fb0d7;
    box-shadow: var(--shadow);
}

.copy .eyebrow {
    font-size: 13px;
    color: #b9c8ea;
    margin: 2px 0 10px;
}

/* Shared blocks */
.wrap {
    max-width: 90%;
    width: 100%;
    margin: 0 auto
}

.panel {
    background: linear-gradient(180deg,#0e1a36,#0a1531);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow)
}

.small {
    font-size: 13px;
    color: #aab8dd
}

.muted {
    color: #b9c8ea
}

.grid3 {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px
}

.card {
    background: linear-gradient(180deg,#102043,#0e1a36);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px
}

    .card h3 {
        margin: 0 0 6px;
        font-size: 18px
    }

/* Hero */
.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center
}

.title {
    font-size: clamp(28px, 4.5vw + 8px, 56px);
    line-height: 1.06;
    margin: 12px 0 14px;
    background: linear-gradient(90deg,var(--ink),#e4efff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--ink);
}

.h2 {
    font-size: clamp(20px, 1.6vw + 12px, 26px);
}

.title .grad {
    background: linear-gradient(90deg,var(--brand),#b786ff 60%,#86d4ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: inherit;
}

.lede {
    color: #cfe0ffcc;
    margin-bottom: 18px;
    max-width: 56ch;
    font-size: 18px
}

.benefits {
    margin: 14px 0 0;
    padding-left: 18px;
    color: #b9c8ea;
    font-size: 14px;
    line-height: 1.9
}

.mock {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    background: linear-gradient(180deg,#0f1b3b,#0b142c)
}

    .mock img {
        display: block;
        width: 100%;
        height: auto
    }

.h2 {
    font-size: 26px;
    margin: 0 0 14px
}

/* App / video */
.appwrap {
    display: flex;
    justify-content: center
}

.app {
    max-width: 1200px;
    width: 92%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid var(--line)
}

    .app video {
        display: block;
        width: 100%;
        height: auto
    }

/* === ROI highlight === */
#roi .highlight {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: radial-gradient(120% 150% at 50% 0%, rgba(92,200,255,.15), rgba(0,0,0,0) 70%);
    border: 1px solid var(--brand);
    border-radius: 18px;
    padding: 28px 20px 32px;
    margin-bottom: 14px;
    box-shadow: 0 0 30px rgba(92,200,255,.2);
    animation: pulseGlow 4s ease-in-out infinite;
}

    #roi .highlight h3 {
        margin: 0;
        font-size: 1.2rem;
        color: var(--brand);
        letter-spacing: .3px;
    }

    #roi .highlight .roi-num {
        font-size: 48px;
        font-weight: 900;
        line-height: 1.1;
        background: linear-gradient(90deg,var(--brand),var(--brand2));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

@keyframes pulseGlow {
    0%,100% {
        box-shadow: 0 0 30px rgba(92,200,255,.2);
    }

    50% {
        box-shadow: 0 0 50px rgba(0,227,178,.3);
    }
}


#roi .inline-input {
    display: flex;
    gap: 10px;
    align-items: center;
}

    #roi .inline-input select {
        background: #0b1736;
        border: 1px solid var(--line);
        color: #e7f0ff;
        padding: 12px 10px;
        border-radius: 12px;
    }

/* ROI */
.roi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

    .roi-grid label {
        display: block;
        font-size: 13px;
        color: #aab8dd;
        margin-bottom: 6px
    }

    .roi-grid input {
        width: 100%;
        background: #0b1736;
        border: 1px solid var(--line);
        color: #e7f0ff;
        padding: 12px 14px;
        border-radius: 12px;
        outline: none
    }

        .roi-grid input:focus {
            border-color: #2e55ff;
            box-shadow: 0 0 0 2px #2e55ff33
        }

.roi-num {
    font-weight: 800;
    font-size: 28px
}

/* Pricing */
.pricing {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px
}

/* Pricing: single column on phones */
@media (max-width: 880px) {
    .pricing {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
}

.price .head {
    font-weight: 800;
    font-size: 18px;
    margin-bottom: 8px
}

.price .amt {
    font-size: 28px;
    font-weight: 900;
    margin: 4px 0 10px
}

/* Dots */
/* --- Right-side bar nav (replaces dots) --- */
.dots {
    position: fixed;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 25;
}

/* Base "seed" the user sees at rest */
.dot {
    position: relative;
    width: 8px;
    height: 24px;
    border-radius: 999px;
    background: #0a1531;
    border: 1px solid #3a4d8a;
    cursor: pointer;
    outline: none;
}



    /* The label that fades in as the bar expands */
    .dot::before {
        content: attr(aria-label);
        position: absolute;
        right: calc(12px + 8px); /* just left of the seed */
        top: 50%;
        transform: translateY(-50%) translateX(12px);
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 12px;
        letter-spacing: .2px;
        white-space: nowrap;
        color: #0b142c;
        background: linear-gradient(180deg,#e8f1ff,#cfe0ff);
        border: 1px solid #9fb0d7;
        box-shadow: var(--shadow);
        opacity: 0;
        pointer-events: none;
        transition: opacity .35s ease, transform .35s ease;
    }

    /* Hover or keyboard focus previews the bar + label */
    .dot:hover::after,
    .dot:focus-visible::after {
        width: 160px; /* bar length */
    }

    .dot:hover::before,
    .dot:focus-visible::before {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }



/* Reduced motion: just show instantly */
@media (prefers-reduced-motion: reduce) {
    .dot::after,
    .dot::before {
        transition: none;
    }
}

/* Active = solid white */
.dots .dot.active {
    background: #fff;
    border-color: #fff;
}

/* Hide footer by default */
footer {
    display: none;
}

/* Show only when last section (Contact) is active */
body.at-end footer {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 28px 18px;
    color: #94a7d6;
    pointer-events: auto; /* make links clickable */
    background: linear-gradient(180deg, #0e1a36, #0a1531);
    border-top: 1px solid #0e2150;
    z-index: 30;
}

/* Add space so footer never overlaps contact form */
#contact .wrap {
    padding-bottom: 80px;
}

.foot {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

    .foot a {
        pointer-events: auto
    }

/* ===== Alternating subslides WITHOUT inner scrollbar ===== */
.subpager {
    position: relative;
    min-height: clamp(420px,62svh,720px);
    overflow: hidden;
    border-radius: 18px
}

.subslide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .5s ease,transform .5s ease;
    pointer-events: none;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 22px;
    align-items: center;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg,#102043,#0e1a36);
    box-shadow: var(--shadow)
}

    .subslide.on {
        opacity: 1;
        transform: none;
        pointer-events: auto
    }

    .subslide.reverse {
        grid-template-columns: 1fr 1.05fr
    }

    .subslide .copy h3 {
        margin: 0 0 8px;
        font-size: 20px
    }

    .subslide .copy p {
        margin: 0;
        color: #b9c8ea
    }

    .subslide .media {
        width: 100%
    }

.imgph {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: radial-gradient(120% 120% at 20% 15%, #122753 0%, transparent 60%), linear-gradient(180deg,#0f1b3b,#0b142c);
    color: #9fb0d7;
    font-size: 13px;
    letter-spacing: .3px;
    /* pulse */
    --pulse: #6aa7ff44;
    box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 0 var(--pulse);
    animation: pulse 3.4s ease-in-out infinite;
    animation-play-state: paused;
}

    /* media drives height */
    .imgph > .imgph-media,
    .imgph > object,
    .imgph > img {
        position: relative; /* keep in normal flow */
        width: 100%;
        height: auto;
        display: block;
        border: 0;
    }

    /* Shimmer sweep */
    .imgph::before {
        content: "";
        position: absolute;
        inset: -20%;
        background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.08) 50%, transparent 65%);
        transform: translateX(-60%) rotate(8deg);
        animation: shimmer 2.6s ease-in-out infinite;
        animation-play-state: paused;
        pointer-events: none;
    }

    /* Particles */
    .imgph::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(1px 1px at 10% 20%, rgba(140,170,255,.35) 50%, transparent 51%), radial-gradient(1px 1px at 40% 70%, rgba(140,170,255,.25) 50%, transparent 51%), radial-gradient(1px 1px at 75% 35%, rgba(140,170,255,.28) 50%, transparent 51%), radial-gradient(1px 1px at 20% 85%, rgba(140,170,255,.20) 50%, transparent 51%), radial-gradient(1px 1px at 88% 60%, rgba(140,170,255,.22) 50%, transparent 51%);
        background-repeat: no-repeat;
        animation: drift 14s linear infinite;
        animation-play-state: paused;
        opacity: .8;
        pointer-events: none;
    }

/* Only animate when visible */
.subslide.on .imgph::before,
.subslide.on .imgph::after,
.subslide.on .imgph {
    animation-play-state: running;
}

/* Keyframes */
@keyframes shimmer {
    0% {
        transform: translateX(-70%) rotate(8deg);
        opacity: .0;
    }

    10% {
        opacity: .8;
    }

    50% {
        transform: translateX(10%) rotate(8deg);
        opacity: .6;
    }

    90% {
        opacity: .0;
    }

    100% {
        transform: translateX(80%) rotate(8deg);
        opacity: .0;
    }
}

@keyframes drift {
    0% {
        transform: translate3d(0,0,0)
    }

    50% {
        transform: translate3d(-2%, -3%, 0)
    }

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

@keyframes pulse {
    0%,100% {
        box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 0 var(--pulse);
    }

    50% {
        box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 10px transparent;
    }
}


/* Reveals */
.reveal {
}

.js .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .6s ease,transform .6s ease;
    transition-delay: var(--d,0ms)
}

    .js .reveal.from-left {
        transform: translateX(-24px)
    }

    .js .reveal.from-right {
        transform: translateX(24px)
    }

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

/* Responsive */
@media (max-width:980px) {
    .hero-grid {
        grid-template-columns: 1fr
    }

    .subslide, .subslide.reverse {
        grid-template-columns: 1fr
    }
}

@media (max-width: 880px) {
    #overview .mock {
        margin-top: 14px;
    }

        #overview .mock img {
            max-height: 48svh; /* keeps it visible without burying the next section */
            object-fit: cover;
        }
}

@media (max-width:640px) {
    .title {
        font-size: 34px
    }

    .grid3 {
        grid-template-columns: 1fr
    }
}

@media (prefers-reduced-motion:reduce) {
    .js .section {
        transition: none
    }

    .js .reveal {
        transition: none
    }
}

.js .section {
    z-index: 0;
}

    .js .section.active {
        z-index: 3;
    }


/* FLOW MODE: don't hide reveal content (no slide engine to toggle .in) */
.flow .reveal {
    opacity: 1 !important;
    transform: none !important;
}
/* higher than neighbors */
/* =========================
   FLOW MODE: UNBOX SECTIONS
   (sections become part of the page, not individual cards)
   ========================= */

.flow main.pager {
    display: block; /* ensure normal document flow */
    height: auto;
}

.flow .section {
    /* remove “card section” look */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    /* give rhythm instead */
    padding: clamp(56px, 7vw, 96px) 0;
    min-height: auto !important;
}

    .flow .section.active {
        /* active state shouldn't add boxing either */
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Fluid container: grows with screen, stays readable */
    .flow .section > .wrap {
        width: clamp(320px, 92vw, 1400px) !important;
        margin: 0 auto;
        padding: 0;
    }

/* subtle full-bleed section bands (no borders, just atmosphere) */
.flow .section {
    position: relative;
}

    .flow .section::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: .9;
    }

/* tune per section (examples) */
.flow #solution::before {
    background: radial-gradient(900px 380px at 20% 10%, rgba(92,200,255,.10), rgba(0,0,0,0) 70%);
}

.flow #platform::before {
    background: radial-gradient(900px 420px at 80% 15%, rgba(123,97,255,.10), rgba(0,0,0,0) 70%);
}

.flow #resources::before {
    background: radial-gradient(900px 420px at 50% 10%, rgba(92,200,255,.08), rgba(0,0,0,0) 70%);
}
/* === HERO: make the picture huge, sit under the text, and fade L←R === */
#overview .wrap {
    position: relative;
}

/* put the text above the image */
#overview .hero-grid > div:first-child {
    position: relative;
    z-index: 2;
}

/* turn the current .mock into a big, underlaid visual */
#overview .mock {
    position: absolute;
    top: 50%;
    right: -6%;
    transform: translateY(-50%);
    width: min(1100px, 70vw); /* bigger image */
    max-width: 100%;
    border: 0; /* optional: cleaner when under text */
    border-radius: 20px;
    box-shadow: none; /* optional */
    overflow: hidden;
    z-index: 1; /* sits under the text */
    pointer-events: none; /* clicks go to links in the text */
}

    /* fade to transparent as it approaches the text on the left */
    #overview .mock img {
        display: block;
        width: 100%;
        height: auto;
        /* mask = visible (right) → transparent (left) */
        -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 70%);
        mask-image: linear-gradient(to left, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 70%);
    }

/* Optional: if you want the transparent area to look like solid page bg on browsers without mask */
@supports not (mask-image: linear-gradient(black, transparent)) {
    #overview .mock::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to left, transparent 60%, var(--bg) 90%);
    }
}

/* keep things tidy on small screens */
@media (max-width: 980px) {
    #overview .mock {
        position: static;
        transform: none;
        width: 100%;
        margin-top: 16px;
        pointer-events: auto;
    }

        #overview .mock img {
            -webkit-mask-image: none;
            mask-image: none;
        }
}

/* Contact layout (pairs nicely with your ROI grid styles) */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 18px;
}

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

/* ROI: stack inputs above results on phones */
@media (max-width: 880px) {
    .roi-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    #roi .panel, #roi .highlight {
        width: 100%;
    }
    /* ensure nothing clips inside the results panel */
    #roi .highlight {
        overflow: visible;
    }
}

/* Form elements – base on your ROI inputs */
#contact input, #contact textarea {
    width: 100%;
    background: #0b1736;
    border: 1px solid var(--line);
    color: #e7f0ff;
    padding: 12px 14px;
    border-radius: 12px;
    outline: none;
    margin-bottom: 10px;
}

    #contact input:focus, #contact textarea:focus {
        border-color: #2e55ff;
        box-shadow: 0 0 0 2px #2e55ff33;
    }

#contact textarea {
    resize: vertical;
    min-height: 120px;
}

/* ===== MOBILE "FLOW" MODE (normal scrolling) ===== */
html.flow, body.flow {
    overflow: auto !important;
    scroll-snap-type: none !important; /* kill snapping */
}

/* ===== FLOW MODE: make subslides stack (no "carousel") ===== */
.flow .subpager[data-subpager] {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
    min-height: auto !important;
}

    /* show every subslide */
    .flow .subpager[data-subpager] > .subslide {
        display: grid !important; /* keeps your media/copy grid layout */
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
    }

        /* kill the "only .on is visible" behaviour (in case you have CSS hiding non-.on) */
        .flow .subpager[data-subpager] > .subslide:not(.on) {
            display: grid !important;
        }

.flow .pager {
    position: static !important;
    padding-top: 70px !important;
}

.flow .section {
    position: static !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    min-height: auto; /* content defines height */
    padding-top: 28px;
    scroll-margin-top: 110px; /* anchors/jumps land below header */
    scroll-snap-align: none !important; /* kill snapping */
}

    .flow .section.active {
        z-index: auto;
    }
/* avoid stacking issues */
.flow .dots {
    display: none !important;
}
/* dot nav not needed in flow mode */

/* Make the very first section start below the header */
.flow .section:first-of-type {
    padding-top: 96px;
}

/* ===== FLOW MODE: make subslides STACK (no deck / no trapped panels) ===== */
.flow .subpager {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
}

.flow .subslide {
    position: static !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    display: grid !important; /* keeps your 2-col layout */
    margin-bottom: 24px;
}

/* Subslides: avoid forcing tall panels on small phones */
@media (max-width: 880px) {
    .subpager {
        min-height: auto;
    }

    .subslide {
        min-height: auto;
    }
}

/* iOS safe areas for fixed header/footer */
.top {
    padding-top: env(safe-area-inset-top);
}

body.at-end footer {
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
}

/* ===== FIXES REQUESTED ===== */

/* ROI: stack inputs above results on phones */
@media (max-width: 880px) {
    .roi-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    #roi .panel, #roi .highlight {
        width: 100%;
    }

    #roi .highlight {
        overflow: visible;
    }
}

/* Pricing: one card per row on phones */
@media (max-width: 880px) {
    .pricing {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
}

@media (max-height: 800px) {
    .subpager {
        min-height: auto;
        height: auto;
        overflow: visible;
    }

    .subslide {
        position: static;
    }
}

@media (max-width:920px) {
    #platform .agents-cards {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width:600px) {
    #platform .agents-cards {
        grid-template-columns: 1fr;
    }
}

/* Card */
#platform .agentcard {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    outline: none;
    display: block;
    height: 100%;
}

#platform .agentcard-inner {
    height: 100%;
    min-height: 220px;
    width: 100%;
    border-radius: 22px;
    border: 1px solid rgba(124,97,255,.25);
    background: radial-gradient(220% 140% at 0% 0%, rgba(124,97,255,.10), transparent 55%), radial-gradient(220% 140% at 100% 100%, rgba(92,200,255,.08), transparent 55%), linear-gradient(180deg, var(--bg-2), var(--panel));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 16px 36px rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 26px 22px;
    text-align: center;
    transform: translateY(0) scale(1);
    transition: transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 220ms ease, border-color 220ms ease;
}

#platform .agentcard:hover .agentcard-inner,
#platform .agentcard:focus-visible .agentcard-inner {
    transform: translateY(-4px) scale(1.04);
    border-color: rgba(0,227,178,.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 48px rgba(0,0,0,.35);
}

/* Icon & text */
#platform .icon-tile {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
    border: 1px solid rgba(124,97,255,.35);
    box-shadow: 0 8px 20px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.03);
    margin-bottom: 16px;
}

    #platform .icon-tile svg {
        width: 36px;
        height: 36px;
    }

#platform .agent-title {
    color: var(--ink);
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: .2px;
    margin: 0 0 6px;
}

#platform .agent-sub {
    color: var(--muted);
    font-size: 1rem;
    margin: 0;
    max-width: 240px;
}

/* ====== Fix the layout of the first subslide (Agents) ====== */
/* Let content grow outside (so details aren't clipped) */
#platform .subpager {
    overflow: visible;
}

/* Make the *first* subslide inside the platform a single column */
#platform [data-subpager] > .subslide:first-of-type {
    grid-template-columns: 1fr;
    align-items: start;
}

/* Ensure the 3-card row and the details panel span the full slide width */
#platform .agents-cards,
#platform .agent-details {
    grid-column: 1 / -1;
}

/* ===== DETAILS PANEL — overlay same width as subsection ===== */
#platform .subslide:first-of-type {
    position: relative; /* anchor for absolute overlay */
}

/* Ensure overlay can extend over content below */
#platform .subpager {
    overflow: visible;
}

/* Optional: subtle depth separation behind overlay */
#platform .subslide:first-of-type::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

#platform .subslide:first-of-type.overlaying::before {
    opacity: 1;
}


#platform .pillrow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/* --- FIX: stop ancestors from clipping the overlay --- */
#platform,
#platform .wrap,
#platform .subpager,
#platform [data-subpager] > .subslide {
    overflow: visible !important;
}

#primary-menu,
#primary-menu ul,
#primary-menu li,
#primary-menu a {
    white-space: normal !important; /* allow wrapping */
    overflow: visible !important; /* stop clipping */
}

#primary-menu {
    max-width: 100vw;
}

@media (max-width: 820px) {
    #primary-menu {
        width: min(90vw, 360px); /* responsive width but not too wide */
        overflow-x: visible;
        overflow-y: auto; /* scroll if needed */
    }

        #primary-menu a {
            white-space: normal;
            line-height: 1.3;
        }
}

/* make sure the overlay is above everything in this section */
#platform .agent-details {
    /* keep your absolute layout but ensure full-width and top inset */
    inset: var(--agent-top, 0) 0 auto 0; /* top | right | bottom | left */
    z-index: 200; /* was 5 */
    box-sizing: border-box;
}

/* the dim/backdrop pseudo-element must stay below the overlay */
#platform .subslide:first-of-type::before {
    z-index: 0;
}

/* belt-and-braces: the host slide must be a positioning context */
#platform .subslide:first-of-type {
    position: relative;
}

/* Only for the agents slide inside #platform */
#platform .wrap,
#platform .subpager,
#platform [data-subpager] > .subslide:first-of-type {
    overflow: visible !important; /* prevents clipping at the right edge */
}

#platform .agent-details {
    z-index: 200;
}
/* sits above the next subslide */

/* Scoped CSS for Resources + Popup */
/* === RESOURCES SECTION === */
#resources .subpager {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 24px;
}

#resources .subslide {
    background: linear-gradient(180deg, #102043, #0e1a36);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

    #resources .subslide h3 {
        font-size: 1.3rem;
        margin-bottom: 8px;
    }

    #resources .subslide p.muted {
        margin-bottom: 12px;
    }

/* Image preview */
#resources .preview {
    width: 100%;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: radial-gradient(circle at 50% 50%, #14264f, #0d1936);
}

#resources .preview-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

    #resources .preview-img:hover {
        transform: scale(1.02);
    }

/* Watch button */
#resources .btn.ghost.open-demo {
    margin-top: 4px;
    padding: 10px 18px;
    font-weight: 700;
    border-radius: 12px;
    transition: all 0.25s ease;
}

    #resources .btn.ghost.open-demo:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(0, 227, 178, 0.3);
    }

/* Popup overlay */
.video-overlay[hidden] {
    display: none;
}

.video-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    display: grid;
    place-items: center;
    z-index: 20000;
    backdrop-filter: blur(6px);
    animation: fadeIn .2s ease-out;
}

.video-popup {
    position: relative;
    width: min(92vw, 1000px);
    background: #0b142c;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .6);
    padding: 14px;
    animation: popIn .2s ease-out;
}

    /* ensure video is BELOW the close button */
    .video-popup video {
        position: relative; /* NEW */
        z-index: 1; /* NEW */
        width: 100%;
        height: auto;
        border-radius: 12px;
    }

.close-popup {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 5; /* NEW — above video */
    pointer-events: auto; /* NEW — guarantee clickability */

    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 22px;
    background: rgba(0,0,0,.45); /* optional polish */
    color: var(--ink);
    border: 1px solid var(--line);
    cursor: pointer;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes popIn {
    from {
        transform: translateY(8px) scale(.97);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

/* =========================================================
   FLOW MODE: UNBOX subslides (Solution/Platform/Resources)
   Keep the timeline spine, remove the “big card” panels
   ========================================================= */

/* Remove the subslide card look */
.flow #solution .subpager[data-subpager] > .subslide,
.flow #platform .subpager[data-subpager] > .subslide,
.flow #resources .subpager[data-subpager] > .subslide {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 18px 0 !important; /* use spacing, not boxes */
    overflow: visible !important;
}

    /* Add a subtle divider between steps (optional, helps rhythm) */
    .flow #solution .subpager[data-subpager] > .subslide:not(:last-child) {
        border-bottom: 1px solid rgba(255,255,255,.06) !important;
        padding-bottom: 28px !important;
        margin-bottom: 6px !important;
    }

    /* Let the timeline “spine connector” fade gently (it was designed for boxed cards) */
    .flow #solution .subpager[data-subpager] > .subslide::before {
        opacity: .45 !important;
    }

/* Keep your media frame (imgph) as the “card” instead — looks premium */
.flow #solution .subslide .imgph,
.flow #platform .subslide .imgph,
.flow #resources .subslide .preview {
    border-radius: 16px;
}

/* ===== Fix floating timeline numbers: anchor node to the step, not the kicker ===== */

.flow #solution .subpager[data-subpager] {
    padding-left: 72px !important; /* space for spine + node */
}

    .flow #solution .subpager[data-subpager]::before {
        left: 34px !important; /* spine position */
    }

    /* Make each step the positioning context */
    .flow #solution .subpager[data-subpager] > .subslide {
        position: relative !important;
    }

        /* Put the number node on the spine at a consistent vertical position */
        .flow #solution .subpager[data-subpager] > .subslide .num {
            position: absolute !important;
            left: -72px !important; /* sits over the spine */
            top: 28px !important; /* consistent node height */
            transform: none !important;
            z-index: 5;
        }

        /* Remove the kicker-based positioning if you added it earlier */
        .flow #solution .subpager[data-subpager] > .subslide .kicker {
            position: static !important;
        }

        /* Optional: connector line from spine to content (aligned to node) */
        .flow #solution .subpager[data-subpager] > .subslide::before {
            content: "";
            position: absolute;
            left: -34px;
            top: 44px; /* aligns to node center-ish */
            width: 34px;
            height: 2px;
            background: linear-gradient(to right, rgba(92,200,255,.55), rgba(92,200,255,0));
            opacity: .6;
        }

/* === Agent details: TRUE MODAL (single global backdrop + fixed panel) =====
   Fixes: popout getting blurred / backdrop sitting above it
   - Remove any per-subslide ::before backdrops (they cause stacking fights)
   - Use ONE body-level blur layer
   - Make the panel position:fixed + highest z-index
========================================================================== */

/* Keep predictable stacking for the platform slide */
#platform .subslide {
    position: relative;
}

/* When open, stop background interaction (optional but nice) */
body.agent-popout-open main {
    pointer-events: none;
}

body.agent-popout-open #agent-detail-panel,
body.agent-popout-open #agent-detail-panel * {
    pointer-events: auto;
}

/* ONE global dim+blur layer (behind the popout, below header/panel) */
body.agent-popout-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgba(3, 8, 18, 0.70);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
}

/* Keep the header above the blur layer and clickable */
body.agent-popout-open .top {
    position: fixed;
    z-index: 9995;
    filter: none;
    opacity: 1;
    pointer-events: auto;
}

/* The popout panel: fixed overlay ABOVE everything */
#agent-detail-panel.agent-details {
    /* your animation base */
    opacity: 0;
    transform: translateX(-50%) translateY(10px) scale(.985);
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease;
    /* premium surface */
    border-radius: 18px;
    border: 1px solid rgba(120, 160, 255, 0.18);
    background: radial-gradient(1200px 600px at 20% 0%, rgba(70,120,255,.16) 0%, rgba(10,18,40,0) 60%), linear-gradient(180deg, rgba(10,18,40,.92) 0%, rgba(7,12,28,.92) 100%);
    box-shadow: 0 30px 80px rgba(0,0,0,.50), 0 0 0 1px rgba(90,140,255,.10) inset;
}

    /* open state (panel is moved to <body>, so DON’T scope to #platform) */
    #agent-detail-panel.agent-details.open {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
        pointer-events: auto;
    }

#agent-detail-panel {
    position: fixed;
    z-index: 10000;
    left: 50%;
    top: calc(70px + 16px);
    width: min(1100px, 92vw);
    max-height: calc(100svh - 70px - 32px);
    overflow: auto;
    box-sizing: border-box;
    /* keep it hidden by default */
    opacity: 0;
    transform: translateX(-50%) translateY(10px) scale(.985);
    pointer-events: none;
    visibility: hidden;
    transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
}

    /* Open state */
    #agent-detail-panel.open {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
        pointer-events: auto;
        visibility: visible;
        transition: opacity 220ms ease, transform 220ms ease, visibility 0s;
    }

/* pill row refinement */
#platform .pill {
    background: rgba(255,255,255,.03);
    border-color: rgba(159,176,215,.35);
}

/* ====== PLATFORM → Agents: 3 cards per row, centered ====== */
#platform .agents-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 24px;
    max-width: 1080px;
    margin: 24px auto 0;
    align-items: stretch;
}

/* Mobile: panel uses almost full screen */
@media (max-width: 700px) {
    body.agent-popout-open #agent-detail-panel {
        top: calc(70px + 10px);
        width: 94vw;
        max-height: calc(100svh - 70px - 20px);
    }
}

/* IMPORTANT: remove any older duplicates like:
   - #platform .subslide.overlaying::before (local blur layer)
   - duplicate body.agent-popout-open::before blocks
   - any filter: blur(...) applied to #platform/.section/main
*/

#agent-detail-panel .details-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(140,180,255,.12);
}

#agent-detail-panel .title-left {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

/* icon tile like screenshot */
#agent-detail-panel .hero-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: radial-gradient(120px 120px at 30% 20%, rgba(110,160,255,.22), rgba(0,0,0,0) 70%), rgba(255,255,255,.03);
    border: 1px solid rgba(140,180,255,.22);
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

#agent-detail-panel .badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(140,180,255,.22);
    background: rgba(255,255,255,.03);
    color: rgba(220,235,255,.95);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .2px;
    width: fit-content;
}

#agent-detail-panel #agent-title {
    margin: 6px 0 6px;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 800;
    color: rgba(235,245,255,.98);
}

#agent-detail-panel #agent-subtitle {
    margin: 0;
    color: rgba(190,210,245,.82);
    font-size: 14px;
    line-height: 1.5;
    max-width: 58ch;
}

/* top-right buttons */
#agent-detail-panel .btn.ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(140,180,255,.18);
    background: rgba(255,255,255,.03);
    color: rgba(220,235,255,.95);
    text-decoration: none;
    font-weight: 650;
}

#agent-detail-panel .close-detail {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(140,180,255,.18);
    background: rgba(255,255,255,.03);
    color: rgba(220,235,255,.95);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

    #agent-detail-panel .btn.ghost:hover,
    #agent-detail-panel .close-detail:hover {
        background: rgba(255,255,255,.05);
        border-color: rgba(160,200,255,.26);
    }

#agent-detail-panel .details-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 26px;
}

#agent-detail-panel h5 {
    margin: 0 0 12px;
    font-size: 14px;
    letter-spacing: .2px;
    color: rgba(220,235,255,.92);
    font-weight: 750;
}

/* bullet list like screenshot */
#agent-detail-panel .checklist {
    margin: 0;
    padding-left: 18px;
    color: rgba(210,228,255,.90);
}

    #agent-detail-panel .checklist li {
        margin: 10px 0;
        line-height: 1.55;
    }

/* numbered flow */
#agent-detail-panel .steps {
    margin: 0;
    padding-left: 18px;
    color: rgba(210,228,255,.90);
}

    #agent-detail-panel .steps li {
        margin: 10px 0;
        line-height: 1.55;
    }

/* KPI cards row */
#agent-detail-panel .kpis {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
}

    #agent-detail-panel .kpis > div {
        position: relative;
        padding: 14px 14px 12px 18px;
        border-radius: 14px;
        border: 1px solid rgba(140,180,255,.14);
        background: rgba(255,255,255,.03);
        box-shadow: 0 18px 50px rgba(0,0,0,.25);
        min-height: 66px;
    }

        /* little teal indicator on left of each kpi card */
        #agent-detail-panel .kpis > div::before {
            content: "";
            position: absolute;
            left: 10px;
            top: 18px;
            width: 4px;
            height: 12px;
            border-radius: 999px;
            background: rgba(0, 255, 210, .85);
        }

    #agent-detail-panel .kpis strong {
        display: block;
        font-size: 14px;
        font-weight: 850;
        color: rgba(235,245,255,.98);
        margin-bottom: 6px;
    }

    #agent-detail-panel .kpis .muted {
        color: rgba(190,210,245,.78);
        font-size: 12px;
    }

#agent-detail-panel .pillrow {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

#agent-detail-panel .pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(140,180,255,.16);
    background: rgba(255,255,255,.03);
    color: rgba(220,235,255,.92);
    font-size: 12.5px;
}

#agent-detail-panel .agent-inner {
    padding: 26px 28px 24px; /* ← THIS is the magic */
}

@media (max-width: 900px) {
    #agent-detail-panel .details-grid {
        grid-template-columns: 1fr;
    }

    #agent-detail-panel .kpis {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   OPERATIONS SUITE – FULL-WIDTH TABS + 2-COLUMN CONTENT
   (Standalone section – NOT inside .wrap)
   ========================================================= */

/* SECTION */
.ops-tabs-section {
    width: 100%;
    padding: 56px 0;
    position: relative;
}

/* INNER SHELL (controls max readable width) */
.ops-tabs-shell {
    width: min(1600px, 100%);
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* =========================================================
   TABS BAR – SPREAD ACROSS FULL WIDTH
   ========================================================= */
.ops-tabsbar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    padding: 14px;
    margin-bottom: 28px;
    background: rgba(10, 18, 40, 0.35);
    border: 1px solid rgba(30, 44, 88, 0.45);
    border-radius: 18px;
}

/* TAB BUTTONS */
.ops-tab {
    appearance: none;
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(30, 44, 88, 0.65);
    background: rgba(10, 18, 40, 0.45);
    color: #b9c7ea;
    font: 700 12px ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

    .ops-tab:hover {
        background: rgba(20, 30, 60, 0.55);
    }

    .ops-tab.is-active {
        background: rgba(92, 200, 255, 0.12);
        border-color: rgba(92, 200, 255, 0.6);
        color: #e8f1ff;
        box-shadow: 0 0 0 2px rgba(92, 200, 255, 0.2) inset;
    }

/* =========================================================
   PANELS
   ========================================================= */
.ops-panels {
    width: 100%;
}

.ops-panel {
    display: none;
}

    .ops-panel.is-active {
        display: block;
    }

/* =========================================================
   CONTENT GRID (IMAGE LEFT, TEXT RIGHT)
   ========================================================= */
.ops-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: 48px;
    align-items: center;
}

    /* IMAGE PLACEHOLDER */
    .ops-grid .imgph {
        width: 100%;
        border-radius: 18px;
        border: 1px solid rgba(30, 44, 88, 0.5);
        overflow: hidden;
    }

    /* TEXT COLUMN */
    .ops-grid .copy {
        max-width: 520px;
    }

/* BULLETS */
.ops-bullets {
    margin: 14px 0 0;
    padding-left: 18px;
    color: #b9c7ea;
}

    .ops-bullets li {
        margin: 8px 0;
    }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
    .ops-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

        .ops-grid .copy {
            max-width: none;
        }
}

@media (max-width: 900px) {
    .ops-tabsbar {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 520px) {
    .ops-tabsbar {
        grid-template-columns: 1fr;
    }
}

/* === FLOW MODE MUST OVERRIDE DECK ENGINE (.js rules) === */
html.flow body {
    overflow: auto !important;
}

html.flow .pager {
    position: static !important;
    inset: auto !important;
    height: auto !important;
    overflow: visible !important;
}

html.flow .section {
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}








/* Ensure sections participate in normal scrolling */
.section {
    display: block;
    position: relative;
    opacity: 1;
    pointer-events: auto;
}

/* Ensure JS-driven subslides actually hide */
[data-subpager] .subslide[hidden] {
    display: none !important;
}

/* Allow subslides to be anchor-scrolled under fixed header */
.flow .subslide {
    scroll-margin-top: 110px;
}

/* Desktop hover dropdowns */
@media (hover: hover) and (pointer: fine) {
    /* make sure submenu is positioned relative to the nav item */
    .nav-item.has-sub {
        position: relative;
    }

        /* show dropdown when the WHOLE nav item is hovered (button OR submenu)
     NOTE: removed :focus-within to prevent “sticky” menus after clicking */
        .nav-item.has-sub:hover .nav-sub,
        .nav-item.has-sub.is-open .nav-sub {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
            visibility: visible;
        }

        .nav-item.has-sub .nav-sub {
            margin-top: 8px; /* your existing spacing */
        }

            /* invisible hover bridge between button and dropdown */
            .nav-item.has-sub .nav-sub::before {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                top: -20px;
                height: 20px;
            }
}

/* Mobile / click-open (and also used as “locked open” state on desktop) */
.nav-item.has-sub.is-open > .nav-sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}