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

        :root {
            --w: #ffffff;
            --bg: #f7f8fc;
            --s1: #eef1f9;
            --ink: #070c1b;
            --ink2: #3b4562;
            --ink3: #8b93ab;
            --b: #1647e8;
            --bd: #1038c2;
            --bm: #3d6bf5;
            --bl: #d9e4ff;
            --bf: #eef3ff;
            --g1: #10b981;
            --g2: #059669;
            --am: #f59e0b;
            --r1: #ef4444;
            --bord: rgba(7, 12, 27, .07);
            --bord-b: rgba(22, 71, 232, .18);
            --sh-sm: 0 1px 3px rgba(0, 0, 0, .05), 0 4px 16px rgba(0, 0, 0, .04);
            --sh-md: 0 4px 8px rgba(0, 0, 0, .04), 0 16px 48px rgba(0, 0, 0, .08);
            --sh-lg: 0 8px 16px rgba(0, 0, 0, .04), 0 40px 96px rgba(0, 0, 0, .1);
            --sh-b: 0 8px 32px rgba(22, 71, 232, .28);
            --fh: 'Cabinet Grotesk', sans-serif;
            --fb: 'Satoshi', sans-serif;
            --r4: 4px;
            --r8: 8px;
            --r12: 12px;
            --r16: 16px;
            --r24: 24px;
            --r32: 32px;
            --r100: 100px;
        }

        html {
            scroll-behavior: smooth;
            font-size: 16px
        }

        body {
            font-family: var(--fb);
            background: var(--w);
            color: var(--ink);
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased
        }

        /* ── PAGES ── */
        .page {
            display: none
        }

        .page.active {
            display: block
        }

        /* ── NAV ── */
        .nav-shell {
            position: fixed;
            top: 16px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 999;
            width: calc(100% - 40px);
            max-width: 1180px
        }

        nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            background: rgba(255, 255, 255, .95);
            backdrop-filter: blur(24px) saturate(200%);
            border: 1px solid rgba(255, 255, 255, .95);
            border-radius: var(--r100);
            box-shadow: 0 2px 8px rgba(22, 71, 232, .08), 0 24px 64px rgba(7, 12, 27, .07), 0 0 0 1px rgba(22, 71, 232, .06);
            padding: 1rem 1rem 1rem 2.5rem;
        }

        .nl {
            font-family: var(--fh);
            font-size: 1.55rem;
            font-weight: 900;
            letter-spacing: -.05em;
            color: var(--ink);
            cursor: pointer;
            text-decoration: none
        }

        .nl .x {
            color: var(--b)
        }

        .nlinks {
            display: flex;
            gap: .2rem;
            list-style: none;
            align-items: center;
            margin: 0;
            flex-shrink: 0
        }

        .nlinks a {
            font-size: 1rem;
            font-weight: 600;
            color: var(--ink2);
            padding: .7rem 1.2rem;
            border-radius: var(--r100);
            transition: all .18s;
            cursor: pointer;
            text-decoration: none;
            letter-spacing: -.01em;
        }

        .nlinks a:hover,
        .nlinks a.act {
            background: var(--bf);
            color: var(--b)
        }

        .ncta {
            background: var(--b) !important;
            color: #fff !important;
            padding: .78rem 1.9rem !important;
            border-radius: var(--r100);
            font-weight: 700 !important;
            font-size: 1rem !important;
            box-shadow: var(--sh-b);
            transition: all .2s !important;
            letter-spacing: -.01em !important;
        }

        .ncta:hover {
            background: var(--bd) !important;
            transform: translateY(-1px)
        }

        .nhome {
            background: var(--bg) !important;
            color: var(--ink2) !important;
            padding: .7rem 1.2rem !important;
            border-radius: var(--r100);
            font-weight: 600 !important;
            font-size: 1rem !important;
            border: 1.5px solid var(--bord) !important;
            transition: all .18s !important;
        }

        .nhome:hover {
            border-color: var(--b) !important;
            color: var(--b) !important;
        }

        /* ── BTNS ── */
        .btn-p {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            background: var(--b);
            color: #fff;
            padding: .9rem 2.1rem;
            border-radius: var(--r100);
            font-family: var(--fb);
            font-size: .95rem;
            font-weight: 700;
            border: none;
            cursor: pointer;
            box-shadow: var(--sh-b), 0 0 40px rgba(22,71,232,.35);
            transition: all .2s;
            letter-spacing: -.01em;
            text-decoration: none
        }

        .btn-p:hover {
            background: var(--bd);
            transform: translateY(-2px);
            box-shadow: 0 16px 48px rgba(22, 71, 232, .5)
        }

        .btn-g {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            background: transparent;
            color: var(--ink2);
            padding: .85rem 1.75rem;
            border-radius: var(--r100);
            font-family: var(--fb);
            font-size: .92rem;
            font-weight: 500;
            border: 1.5px solid var(--bord);
            cursor: pointer;
            transition: all .2s;
            letter-spacing: -.01em;
            text-decoration: none
        }

        .btn-g:hover {
            border-color: var(--b);
            color: var(--b);
            background: var(--bf)
        }

        /* ════════════ HOME ════════════ */
        #home {
            background: #f0f4ff
        }

        .hero {
            height: calc(100vh - 52px);
            min-height: 680px;
            padding-top: 90px;
            display: grid;
            grid-template-columns: 1fr 1.65fr;
            position: relative;
            overflow: hidden;
            align-items: center;
            background: linear-gradient(145deg, #eef3ff 0%, #f5f8ff 35%, #ffffff 65%);
        }

        .hero::before {
            content: '';
            position: absolute;
            top: -200px;
            right: -100px;
            width: 700px;
            height: 700px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(22,71,232,.09) 0%, transparent 70%);
            pointer-events: none
        }

        .hero::after {
            content: '';
            position: absolute;
            bottom: -150px;
            left: 20%;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(16,185,129,.04) 0%, transparent 70%);
            pointer-events: none
        }

        .hero-grid {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background-image: linear-gradient(rgba(22,71,232,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(22,71,232,.05) 1px, transparent 1px);
            background-size: 60px 60px;
            mask-image: radial-gradient(65% 65% at 70% 40%, black 0%, transparent 100%)
        }

        .hero-l {
            padding: 0 2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            z-index: 2
        }

        .hero-r {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 2rem;
            position: relative;
            z-index: 2;
            height: 100%;
            overflow: visible
        }

        /* Label pill */
        .hlabel {
            display: inline-flex;
            align-items: center;
            gap: .6rem;
            background: rgba(22,71,232,.07);
            border: 1px solid rgba(22,71,232,.18);
            border-radius: var(--r100);
            padding: .38rem 1rem;
            margin-bottom: 1.5rem;
            width: fit-content;
            box-shadow: 0 2px 12px rgba(22,71,232,.1)
        }

        .hlabel-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--g1);
            position: relative
        }

        .hlabel-dot::after {
            content: '';
            position: absolute;
            inset: -3px;
            border-radius: 50%;
            background: rgba(16, 185, 129, .25);
            animation: softpulse 2s ease infinite
        }

        @keyframes softpulse {

            0%,
            100% {
                transform: scale(1);
                opacity: .7
            }

            50% {
                transform: scale(1.5);
                opacity: 0
            }
        }

        .vs-card {
            background: var(--w);
            border: 1.5px solid var(--bord);
            border-radius: var(--r16);
            padding: 3rem;
            margin-top: 3rem;
            max-width: 100%;
            box-shadow: 0 16px 48px rgba(7, 12, 27, 0.06);
        }

        .vs-t {
            font-size: .85rem;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--ink3);
            margin-bottom: 2rem;
            text-align: center;
        }

        .hlabel-text {
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--b)
        }

        .hero-h1 {
            font-family: var(--fh);
            font-size: clamp(2.9rem, 4.3vw, 5rem);
            font-weight: 900;
            line-height: 1;
            letter-spacing: -.05em;
            color: var(--ink);
            margin-bottom: 1.2rem
        }

        .hero-h1 .hl {
            background: linear-gradient(115deg, #7eb8ff 0%, #a78bfa 55%, #60a5fa 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            position: relative;
            display: inline-block
        }

        .hero-h1 .hl::after {
            display: none
        }

        .hero-sub {
            font-size: .98rem;
            color: var(--ink2);
            line-height: 1.75;
            max-width: 420px;
            margin-bottom: 2rem;
            font-weight: 400
        }

        .hero-act {
            display: flex;
            gap: .85rem;
            align-items: center;
            margin-bottom: 2rem
        }

        .hstats {
            display: flex;
            background: var(--w);
            border: 1px solid var(--bord);
            border-radius: var(--r16);
            overflow: hidden;
            box-shadow: 0 2px 16px rgba(22,71,232,.08), var(--sh-sm)
        }

        .hs {
            flex: 1;
            padding: .9rem .7rem;
            text-align: center;
            border-right: 1px solid var(--bord)
        }

        .hs:last-child {
            border-right: none
        }

        .hs-v {
            font-family: var(--fh);
            font-size: 1.3rem;
            font-weight: 900;
            letter-spacing: -.05em;
            color: var(--ink);
            line-height: 1;
            margin-bottom: .2rem
        }

        .hs-v .ac {
            color: var(--b)
        }

        .hs-l {
            font-size: .62rem;
            color: var(--ink3);
            letter-spacing: .02em;
            line-height: 1.3
        }

        /* ── DASHBOARD ── */
        .dash {
            width: 100%;
            background: #ffffff;
            border: 1px solid rgba(22,71,232,.18);
            border-radius: 20px;
            overflow: hidden;
            box-shadow:
                0 0 0 1px rgba(22,71,232,.08),
                0 40px 120px rgba(0,0,0,.55),
                0 0 80px rgba(22,71,232,.1);
        }

        .dash-bar {
            background: linear-gradient(135deg, #09132a 0%, #0f1e40 100%);
            padding: 1rem 1.4rem;
            display: flex;
            align-items: center;
            gap: .45rem;
            border-bottom: 1px solid rgba(22,71,232,.2)
        }

        .dbt {
            width: 10px;
            height: 10px;
            border-radius: 50%
        }

        .dbt-r {
            background: #ff5f57
        }

        .dbt-y {
            background: #febc2e
        }

        .dbt-g {
            background: #28c840
        }

        .db-title {
            font-size: .68rem;
            color: rgba(255, 255, 255, .38);
            letter-spacing: .12em;
            text-transform: uppercase;
            font-weight: 700;
            margin-left: .4rem;
            font-family: var(--fh)
        }

        .db-live {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: .4rem;
            font-size: .67rem;
            color: var(--g1);
            font-weight: 700;
            letter-spacing: .04em
        }

        .db-live-d {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--g1);
            animation: softpulse 1.4s ease infinite
        }

        .dash-body {
            padding: .6rem
        }

        .dkpis {
            display: none
        }

        .dkpi {
            background: linear-gradient(145deg, #f8faff 0%, #eef3ff 100%);
            border: 1px solid rgba(22,71,232,.1);
            border-radius: var(--r8);
            padding: .38rem .28rem;
            text-align: center
        }

        .dkpi-n {
            font-family: var(--fh);
            font-size: .92rem;
            font-weight: 900;
            letter-spacing: -.05em;
            line-height: 1;
            margin-bottom: .06rem
        }

        .dkpi-l {
            font-size: .5rem;
            color: var(--ink3);
            font-weight: 600
        }

        .c-b {
            color: var(--b)
        }

        .c-g {
            color: var(--g1)
        }

        .c-ink {
            color: var(--ink)
        }

        .sec-lbl {
            font-size: .58rem;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--ink3);
            margin-bottom: .3rem
        }

        .agent-row {
            display: flex;
            align-items: center;
            gap: .55rem;
            padding: .4rem .5rem;
            border-radius: var(--r8);
            margin-bottom: .2rem
        }

        .agent-row.a-active {
            background: var(--bf);
            border: 1px solid var(--bord-b)
        }

        .a-av {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .8rem;
            font-weight: 700;
            font-family: var(--fh)
        }

        .av-b {
            background: var(--bl);
            color: var(--b)
        }

        .av-p {
            background: #ede9fe;
            color: #7c3aed
        }

        .av-o {
            background: #ffedd5;
            color: #c2410c
        }

        .a-info {
            flex: 1;
            min-width: 0
        }

        .a-name {
            font-size: .72rem;
            font-weight: 700;
            color: var(--ink);
            letter-spacing: -.01em
        }

        .a-sub {
            font-size: .72rem;
            color: var(--ink3);
            margin-top: 2px
        }

        .spill {
            font-size: .65rem;
            font-weight: 700;
            padding: .3rem .7rem;
            border-radius: var(--r100);
            letter-spacing: .03em;
            white-space: nowrap
        }

        .sp-call {
            background: #dbeafe;
            color: #1d4ed8
        }

        .sp-connected {
            background: #dcfce7;
            color: #15803d
        }

        .sp-scheduled {
            background: #f0fdf4;
            color: #16a34a;
            border: 1px solid #bbf7d0
        }

        /* Live call progress */
        .call-progress {
            margin-top: .32rem;
            background: linear-gradient(145deg, #f8faff 0%, #eef3ff 100%);
            border: 1px solid rgba(22,71,232,.12);
            border-radius: var(--r12);
            padding: .5rem
        }

        .cp-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: .35rem
        }

        .cp-name {
            font-size: .75rem;
            font-weight: 700;
            color: var(--ink)
        }

        .cp-dur {
            font-size: .62rem;
            color: var(--ink3);
            font-family: var(--fh);
            font-weight: 700
        }

        .cp-stages {
            display: flex;
            gap: .3rem;
            margin-bottom: .35rem
        }

        .cp-stage {
            flex: 1;
            height: 3px;
            border-radius: 2px;
            background: var(--s1);
            overflow: hidden
        }

        .cp-stage-fill {
            height: 100%;
            border-radius: 2px
        }

        .cs1 .cp-stage-fill {
            background: var(--b)
        }

        .cs2 .cp-stage-fill {
            background: var(--bm)
        }

        .cs3 .cp-stage-fill {
            background: var(--g1)
        }

        .cp-labels {
            display: flex;
            gap: .3rem
        }

        .cp-lbl {
            flex: 1;
            font-size: .56rem;
            color: var(--ink3);
            font-weight: 600;
            text-align: center
        }

        .cp-lbl.done {
            color: var(--b)
        }

        /* ── SPEEDOMETER ── */
        .speed-box {
            margin-top: .32rem;
            background: linear-gradient(145deg, #f0f5ff 0%, #e8f0ff 100%);
            border: 1px solid rgba(22,71,232,.15);
            border-radius: var(--r12);
            padding: .45rem .5rem
        }

        .sb-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: .25rem
        }

        .sb-lbl {
            font-size: .6rem;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--ink3)
        }

        .sb-score-wrap {
            text-align: right
        }

        .sb-score {
            font-family: var(--fh);
            font-size: 1.25rem;
            font-weight: 900;
            letter-spacing: -.06em;
            line-height: 1;
            transition: color .4s
        }

        .sb-scorelbl {
            font-size: .58rem;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            margin-top: 2px;
            transition: color .4s
        }

        .speedo-svg {
            display: block;
            height: 100px;
            width: auto;
            max-width: 100%;
            margin: 0 auto;
            overflow: visible
        }

        .sb-legend {
            display: flex;
            justify-content: space-between;
            margin-top: .2rem
        }

        .sb-leg-item {
            display: flex;
            align-items: center;
            gap: .3rem;
            font-size: .58rem;
            color: var(--ink3);
            font-weight: 500
        }

        .sb-leg-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%
        }

        /* ── MARQUEE ── */
        .marquee-shell {
            background: linear-gradient(135deg, var(--bd) 0%, var(--b) 50%, var(--bm) 100%);
            padding: .85rem 0;
            overflow: hidden;
            white-space: nowrap
        }

        .marquee-track {
            display: inline-flex;
            animation: mq 28s linear infinite
        }

        @keyframes mq {
            0% {
                transform: translateX(0)
            }

            100% {
                transform: translateX(-50%)
            }
        }

        .mq-item {
            display: inline-flex;
            align-items: center;
            gap: 1.5rem;
            padding: 0 2rem;
            font-family: var(--fh);
            font-size: .7rem;
            font-weight: 800;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .5)
        }

        .mq-sep {
            color: rgba(255, 255, 255, .2);
            font-size: 1rem
        }

        /* ── SECTIONS ── */
        .sw {
            padding: 5rem 2rem
        }

        .si {
            max-width: 1160px;
            margin: 0 auto
        }

        .ey {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            font-size: .68rem;
            font-weight: 800;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--b);
            background: var(--bl);
            padding: .3rem .85rem;
            border-radius: var(--r100);
            margin-bottom: 1.25rem
        }

        .ey-d {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--b)
        }

        .sh2 {
            font-family: var(--fh);
            font-size: clamp(2rem, 3.2vw, 2.6rem);
            font-weight: 900;
            line-height: 1.08;
            letter-spacing: -.05em;
            color: var(--ink);
            margin-bottom: .75rem
        }

        .ssub {
            font-size: .92rem;
            color: var(--ink2);
            line-height: 1.75;
            max-width: 520px;
            margin-bottom: 2.5rem;
            font-weight: 400
        }

        /* ── PROBLEM ── */
        .prob-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.25rem;
            margin-top: 2.5rem
        }

        .pc {
            background: var(--w);
            border: 1.5px solid var(--bord);
            border-radius: var(--r16);
            padding: 1.75rem;
            transition: all .25s;
            cursor: default
        }

        .pc:hover {
            border-color: var(--bord-b);
            transform: translateY(-4px);
            box-shadow: 0 16px 48px rgba(22, 71, 232, .09)
        }

        .pc-icon {
            width: 40px;
            height: 40px;
            border-radius: var(--r8);
            background: var(--bf);
            border: 1px solid var(--bord-b);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.1rem
        }

        .pc-icon svg {
            width: 20px;
            height: 20px;
            stroke: var(--b);
            stroke-width: 1.8;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        .pc-t {
            font-family: var(--fh);
            font-size: 1rem;
            font-weight: 800;
            margin-bottom: .5rem;
            letter-spacing: -.03em
        }

        .pc-d {
            font-size: .83rem;
            color: var(--ink2);
            line-height: 1.7
        }

        .vs-card {
            background: var(--w);
            border: 1.5px solid var(--bord);
            border-radius: var(--r16);
            padding: 3rem;
            margin-top: 3rem;
            max-width: 100%;
            box-shadow: 0 16px 48px rgba(7, 12, 27, 0.06);
        }

        .vs-t {
            font-size: .65rem;
            font-weight: 800;
            letter-spacing: .12em;
            font-size: .85rem;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--ink3);
            margin-bottom: 2rem;
            text-align: center;
        }

        .vs-r {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--bord);
            transition: all 0.2s;
        }

        .vs-r:hover {
            background: var(--bg);
            border-radius: var(--r8);
        }

        .vs-r:last-child {
            border: none;
            padding-bottom: 1.25rem
        }

        .vs-l {
            font-size: 1.05rem;
            color: var(--ink);
            font-weight: 700;
            flex: 1;
        }

        .vs-chips {
            display: flex;
            gap: 1.5rem;
            align-items: center;
            justify-content: flex-end;
            flex: 1.5;
        }

        .vs-sep {
            font-size: .85rem;
            color: var(--ink3);
            font-weight: 700;
        }

        .chip {
            font-size: .85rem;
            font-weight: 700;
            padding: .5rem 1.25rem;
            border-radius: var(--r8);
            min-width: 140px;
            text-align: center;
        }

        .c-bad {
            background: #fee2e2;
            color: #b91c1c
        }

        .c-good {
            background: var(--bl);
            color: var(--b)
        }

        /* ── PACKAGES ── */
        .pkg-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 1.25rem
        }

        .pkg {
            background: var(--w);
            border: 1.5px solid var(--bord);
            border-radius: var(--r24);
            overflow: hidden;
            transition: all .25s;
            cursor: pointer;
            box-shadow: var(--sh-sm)
        }

        .pkg:hover {
            transform: translateY(-5px);
            box-shadow: 0 24px 72px rgba(22, 71, 232, .12)
        }

        /* Product packages get a premium highlight */
        .pkg.product-pkg {
            border-color: rgba(22, 71, 232, .22);
            background: linear-gradient(160deg, #ffffff 0%, #f5f8ff 100%);
            box-shadow: 0 4px 24px rgba(22, 71, 232, .1), 0 1px 4px rgba(22, 71, 232, .08)
        }

        .pkg.product-pkg:hover {
            border-color: var(--b);
            box-shadow: 0 24px 72px rgba(22, 71, 232, .2), 0 0 0 3px rgba(22, 71, 232, .06)
        }

        /* All packages equal by default; highlight on hover only */
        .pkg.service-pkg {
            border-color: var(--bord);
            background: var(--w)
        }

        .pkg.service-pkg:hover {
            border-color: var(--b);
            background: linear-gradient(160deg, #ffffff 0%, #f5f8ff 100%);
            box-shadow: 0 24px 72px rgba(22, 71, 232, .2), 0 0 0 3px rgba(22, 71, 232, .06)
        }

        .pkg-top {
            padding: 1.75rem 2rem;
            border-bottom: 1px solid var(--bord)
        }

        .pkg-tag {
            font-size: .6rem;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
            padding: .22rem .7rem;
            border-radius: var(--r100);
            margin-bottom: 1rem;
            display: inline-block
        }

        .pkg-tag.product {
            background: linear-gradient(135deg, var(--bl), #c7d9ff);
            color: var(--bd)
        }

        .pkg-tag.popular {
            background: linear-gradient(135deg, var(--b), var(--bm));
            color: #fff
        }

        .pkg-tag.service {
            background: var(--s1);
            color: var(--ink3)
        }

        .pkg-tit {
            font-family: var(--fh);
            font-size: 1.25rem;
            font-weight: 900;
            letter-spacing: -.04em;
            margin-bottom: .55rem
        }

        .pkg-desc {
            font-size: .83rem;
            color: var(--ink2);
            line-height: 1.7
        }

        .pkg-feats {
            padding: 1.5rem 2rem
        }

        .feat-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: .55rem;
            margin-bottom: 1.5rem
        }

        .feat-list li {
            font-size: .83rem;
            color: var(--ink2);
            display: flex;
            gap: .55rem;
            align-items: flex-start
        }

        .fchk {
            color: var(--b);
            font-size: .72rem;
            margin-top: 2px;
            flex-shrink: 0;
            font-weight: 800
        }

        .pkg-btn {
            width: 100%;
            padding: .8rem;
            border-radius: var(--r100);
            font-family: var(--fb);
            font-size: .86rem;
            font-weight: 700;
            cursor: pointer;
            transition: all .2s;
            border: none;
            letter-spacing: -.01em
        }

        .pb-p {
            background: var(--b);
            color: #fff;
            box-shadow: var(--sh-b)
        }

        .pb-p:hover {
            background: var(--bd)
        }

        .pb-s {
            background: var(--bg);
            color: var(--ink);
            border: 1.5px solid var(--bord)
        }

        .pb-s:hover {
            border-color: var(--b);
            color: var(--b)
        }

        /* ── CTA BLOCK ── */
        .cta-blk {
            background: linear-gradient(135deg, var(--bd) 0%, var(--b) 55%, var(--bm) 100%);
            padding: 5.5rem 2rem;
            text-align: center;
            position: relative;
            overflow: hidden
        }

        .cta-blk::before {
            content: '';
            position: absolute;
            top: -100px;
            right: -80px;
            width: 360px;
            height: 360px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, .05)
        }

        .cta-blk::after {
            content: '';
            position: absolute;
            bottom: -130px;
            left: -60px;
            width: 440px;
            height: 440px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, .04)
        }

        .cta-in {
            max-width: 560px;
            margin: 0 auto;
            position: relative;
            z-index: 1
        }

        .cta-h {
            font-family: var(--fh);
            font-size: clamp(1.8rem, 3.5vw, 2.8rem);
            font-weight: 900;
            letter-spacing: -.05em;
            color: #fff;
            margin-bottom: .85rem;
            line-height: 1.06
        }

        .cta-s {
            color: rgba(255, 255, 255, .5);
            font-size: .92rem;
            margin-bottom: 2.25rem;
            line-height: 1.75
        }

        .btn-w {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            background: #fff;
            color: var(--b);
            padding: .88rem 2.25rem;
            border-radius: var(--r100);
            font-family: var(--fb);
            font-size: .92rem;
            font-weight: 700;
            transition: all .2s;
            box-shadow: 0 8px 28px rgba(0, 0, 0, .15);
            border: none;
            cursor: pointer;
            letter-spacing: -.01em
        }

        .btn-w:hover {
            background: var(--bg);
            transform: translateY(-2px)
        }

        /* ── FOOTER ── */
        footer {
            background: #070c1b;
            padding: 0 2rem
        }

        .foot-main {
            max-width: 1160px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1.8fr 1fr 1fr 1fr;
            gap: 3.5rem;
            padding: 3.5rem 0 2.5rem;
            border-bottom: 1px solid rgba(255, 255, 255, .06)
        }

        .fl-logo {
            font-family: var(--fh);
            font-size: 1.25rem;
            font-weight: 900;
            letter-spacing: -.05em;
            color: rgba(255, 255, 255, .7);
            margin-bottom: .85rem
        }

        .fl-logo .x {
            color: var(--b)
        }

        .fl-desc {
            font-size: .8rem;
            color: rgba(255, 255, 255, .3);
            line-height: 1.75;
            max-width: 240px;
            margin-bottom: 1.35rem
        }

        .fl-badge {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            background: rgba(22, 71, 232, .12);
            border: 1px solid rgba(22, 71, 232, .2);
            border-radius: var(--r100);
            padding: .3rem .85rem;
            font-size: .62rem;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .35)
        }

        .fc-title {
            font-size: .62rem;
            font-weight: 800;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .22);
            margin-bottom: 1rem
        }

        .fc-links {
            display: flex;
            flex-direction: column;
            gap: .5rem
        }

        .fc-links a {
            color: rgba(255, 255, 255, .32);
            font-size: .8rem;
            text-decoration: none;
            transition: color .2s;
            cursor: pointer;
            font-weight: 400
        }

        .fc-links a:hover {
            color: rgba(255, 255, 255, .72)
        }

        .foot-bottom {
            max-width: 1160px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.35rem 0
        }

        .fc-copy {
            font-size: .7rem;
            color: rgba(255, 255, 255, .14)
        }

        .fc-links-h {
            display: flex;
            gap: 2rem
        }

        .fc-links-h a {
            color: rgba(255, 255, 255, .16);
            font-size: .7rem;
            text-decoration: none;
            cursor: pointer;
            transition: color .2s
        }

        .fc-links-h a:hover {
            color: rgba(255, 255, 255, .5)
        }

        /* ══════════════════════════
   PACKAGE INFO PAGES (not in nav, opened programmatically)
══════════════════════════ */
        .pkg-page {
            display: none
        }

        .pkg-page.active {
            display: block
        }

        .ppage-hero {
            padding: 7rem 2rem 4rem;
            position: relative;
            overflow: hidden
        }

        .ppage-hero.qual {
            background: linear-gradient(160deg, var(--bd) 0%, var(--b) 60%, var(--bm) 100%)
        }

        .ppage-hero.nurture {
            background: linear-gradient(160deg, var(--bd) 0%, var(--b) 60%, var(--bm) 100%) 0%, var(--b) 55%, var(--bm) 100%)
        }

        .ppage-hero.nurture .ppage-eyebrow,
        .ppage-hero.nurture h1,
        .ppage-hero.nurture p {
            color: #fff
        }

        .ppage-hero.nurture .ppage-eyebrow {
            background: rgba(255, 255, 255, .15);
            border-color: rgba(255, 255, 255, .25)
        }

        .ppage-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            font-size: .68rem;
            font-weight: 800;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--b);
            background: var(--bl);
            padding: .3rem .85rem;
            border-radius: var(--r100);
            margin-bottom: 1.25rem;
            border: 1px solid var(--bord-b)
        }

        .ppage-hero h1 {
            font-family: var(--fh);
            font-size: clamp(2.4rem, 4vw, 3.8rem);
            font-weight: 900;
            letter-spacing: -.05em;
            margin-bottom: 1rem;
            line-height: 1.04
        }

        .ppage-hero p {
            font-size: 1rem;
            line-height: 1.75;
            max-width: 560px;
            opacity: .7
        }

        .ppage-hero.qual h1, .ppage-hero.qual p { color: #fff }

        .ppage-hero.qual p { color: rgba(255,255,255,0.7); opacity: 1 }

        .pkg-detail-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
            margin-top: 2.5rem
        }

        .pkg-why-card {
            background: var(--w);
            border: 1.5px solid var(--bord-b);
            border-radius: var(--r16);
            padding: 2rem;
            transition: all .2s
        }

        .pkg-why-card:hover {
            border-color: var(--b);
            box-shadow: 0 12px 40px rgba(22, 71, 232, .1)
        }

        .pkg-why-icon {
            width: 42px;
            height: 42px;
            border-radius: var(--r8);
            background: var(--bf);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem
        }

        .pkg-why-icon svg {
            width: 20px;
            height: 20px;
            stroke: var(--b);
            stroke-width: 1.8;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        .pkg-why-t {
            font-family: var(--fh);
            font-size: 1.05rem;
            font-weight: 800;
            letter-spacing: -.03em;
            margin-bottom: .45rem
        }

        .pkg-why-d {
            font-size: .83rem;
            color: var(--ink2);
            line-height: 1.7
        }

        .pkg-compare-tbl {
            background: var(--w);
            border: 1.5px solid var(--bord);
            border-radius: var(--r16);
            overflow: hidden;
            margin-top: 1.5rem
        }

        .pct-head {
            background: var(--ink);
            padding: 1.1rem 1.5rem;
            display: flex;
            justify-content: space-between
        }

        .pct-h {
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .4)
        }

        .pct-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: .85rem 1.5rem;
            border-bottom: 1px solid var(--bord)
        }

        .pct-row:last-child {
            border: none
        }

        .pct-row:hover {
            background: var(--bg)
        }

        .pct-feat {
            font-size: .83rem;
            color: var(--ink2);
            font-weight: 500
        }

        .pct-val {
            font-size: .83rem;
            font-weight: 700;
            color: var(--g1)
        }

        /* ── SERVICE PAGE ── */
        .service-hero {
            background: linear-gradient(160deg, var(--bd) 0%, var(--b) 60%, var(--bm) 100%);
            padding: 7rem 2rem 4rem;
            position: relative;
            overflow: hidden
        }

        .service-hero h1 {
            font-family: var(--fh);
            font-size: clamp(2.4rem, 4vw, 3.8rem);
            font-weight: 900;
            letter-spacing: -.05em;
            color: #fff;
            margin-bottom: 1rem;
            line-height: 1.04
        }

        .service-hero p {
            font-size: 1rem;
            color: rgba(255, 255, 255, .5);
            max-width: 540px;
            line-height: 1.75
        }

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

        .svc-c {
            background: var(--w);
            border: 1.5px solid var(--bord);
            border-radius: var(--r16);
            padding: 1.75rem;
            transition: all .2s
        }

        .svc-c:hover {
            border-color: var(--bord-b);
            transform: translateY(-3px);
            box-shadow: 0 12px 40px rgba(22, 71, 232, .08)
        }

        .svc-icon {
            width: 40px;
            height: 40px;
            border-radius: var(--r8);
            background: var(--bf);
            border: 1px solid var(--bord-b);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem
        }

        .svc-icon svg {
            width: 20px;
            height: 20px;
            stroke: var(--b);
            stroke-width: 1.8;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        .svc-t {
            font-family: var(--fh);
            font-size: 1.05rem;
            font-weight: 800;
            letter-spacing: -.03em;
            margin-bottom: .45rem
        }

        .svc-d {
            font-size: .83rem;
            color: var(--ink2);
            line-height: 1.7
        }

        .svc-process {
            max-width: 760px;
            margin: 4rem auto 0
        }

        .svc-step {
            display: flex;
            gap: 1.5rem;
            padding: 1.75rem 0;
            border-bottom: 1px solid var(--bord);
            align-items: flex-start
        }

        .svc-step:last-child {
            border: none
        }

        .svc-step-n {
            font-family: var(--fh);
            font-size: 2.8rem;
            font-weight: 900;
            color: rgba(22, 71, 232, .1);
            line-height: 1;
            flex-shrink: 0;
            width: 56px;
            letter-spacing: -.06em
        }

        .svc-step-inner {}

        .svc-step-t {
            font-family: var(--fh);
            font-size: 1.1rem;
            font-weight: 800;
            letter-spacing: -.03em;
            margin-bottom: .4rem
        }

        .svc-step-d {
            font-size: .85rem;
            color: var(--ink2);
            line-height: 1.72
        }

        /* ── HOW IT WORKS ── */
        #how {
            background: var(--bg)
        }

        .how-hero {
            background: linear-gradient(160deg, var(--bd) 0%, var(--b) 60%, var(--bm) 100%) 0%, var(--bg) 100%);
            padding: 7rem 2rem 4rem;
            text-align: center
        }

        .steps-tl {
            max-width: 780px;
            margin: 0 auto
        }

        .si-step {
            display: grid;
            grid-template-columns: 72px 1fr;
            gap: 1.75rem;
            padding: 2rem 0;
            border-bottom: 1px solid var(--bord)
        }

        .si-step:last-child {
            border: none
        }

        .sn {
            font-family: var(--fh);
            font-size: 3rem;
            font-weight: 900;
            color: rgba(22, 71, 232, .08);
            line-height: 1;
            letter-spacing: -.06em
        }

        .si-step:hover .sn {
            color: rgba(22, 71, 232, .18)
        }

        .sbadge {
            font-size: .6rem;
            font-weight: 800;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--b);
            background: var(--bl);
            padding: .18rem .6rem;
            border-radius: var(--r100);
            margin-bottom: .6rem;
            width: fit-content
        }

        .stit {
            font-family: var(--fh);
            font-size: 1.3rem;
            font-weight: 900;
            letter-spacing: -.04em;
            margin-bottom: .55rem;
            color: var(--ink)
        }

        .stxt {
            font-size: .88rem;
            color: var(--ink2);
            line-height: 1.72;
            max-width: 540px
        }

        .cdemo {
            background: var(--w);
            border: 1.5px solid var(--bord);
            border-radius: var(--r24);
            overflow: hidden;
            box-shadow: var(--sh-lg);
            max-width: 500px;
            margin: 3.5rem auto 0
        }

        .cdemo-head {
            background: linear-gradient(135deg, #0d1630, #1a2540);
            padding: .9rem 1.3rem;
            display: flex;
            align-items: center;
            gap: .7rem
        }

        .cdh-av {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: var(--bl);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .72rem;
            font-weight: 800;
            color: var(--b);
            font-family: var(--fh);
            flex-shrink: 0
        }

        .cdh-name {
            font-size: .88rem;
            font-weight: 700;
            color: #fff;
            letter-spacing: -.02em;
            font-family: var(--fh)
        }

        .cdh-co {
            font-size: .65rem;
            color: rgba(255, 255, 255, .38)
        }

        .cdh-tag {
            display: flex;
            align-items: center;
            gap: .35rem;
            font-size: .65rem;
            font-weight: 700;
            color: var(--g1)
        }

        .cdh-tag-d {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--g1);
            animation: softpulse 1.5s ease infinite
        }

        .ctrans {
            padding: 1.1rem;
            display: flex;
            flex-direction: column;
            gap: .65rem;
            max-height: 190px;
            overflow-y: auto
        }

        .msg {
            max-width: 82%
        }

        .mag {
            align-self: flex-start
        }

        .mld {
            align-self: flex-end
        }

        .mb {
            padding: .55rem .85rem;
            border-radius: var(--r12);
            font-size: .78rem;
            line-height: 1.52
        }

        .mb-ag {
            background: var(--bg);
            color: var(--ink2);
            border-bottom-left-radius: 3px
        }

        .mb-ld {
            background: var(--b);
            color: #fff;
            border-bottom-right-radius: 3px
        }

        .mt {
            font-size: .58rem;
            color: var(--ink3);
            margin-top: .2rem
        }

        .mtr {
            text-align: right
        }

        .cintent {
            padding: .9rem 1.1rem;
            border-top: 1px solid var(--bord);
            background: var(--bg)
        }

        .ci-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: .4rem
        }

        .ci-lbl {
            font-size: .65rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .08em;
            color: var(--ink3)
        }

        .ci-val {
            font-family: var(--fh);
            font-size: 1rem;
            font-weight: 900;
            color: var(--g1);
            letter-spacing: -.03em
        }

        .ci-track {
            height: 4px;
            background: var(--s1);
            border-radius: 3px;
            overflow: hidden
        }

        .ci-fill {
            height: 100%;
            border-radius: 3px;
            background: linear-gradient(90deg, var(--g1), var(--g2));
            animation: ifill 1.6s ease
        }

        @keyframes ifill {
            from {
                width: 0
            }

            to {
                width: 92%
            }
        }

        /* ── INDUSTRIES ── */
        .ind-hero {
            background: linear-gradient(160deg, var(--bd) 0%, var(--b) 60%, var(--bm) 100%);
            padding: 7rem 2rem 4rem;
            text-align: center
        }

        .ind-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1px;
            background: var(--bord);
            border: 1.5px solid var(--bord);
            border-radius: var(--r24);
            overflow: hidden;
            margin-top: 2.5rem
        }

        .ic {
            background: var(--w);
            padding: 2rem;
            transition: all .2s;
            cursor: default
        }

        .ic:hover {
            background: var(--bf)
        }

        .ic-icon {
            width: 38px;
            height: 38px;
            border-radius: var(--r8);
            background: var(--bf);
            border: 1px solid var(--bord-b);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem
        }

        .ic-icon svg {
            width: 20px;
            height: 20px;
            stroke: var(--b);
            stroke-width: 1.8;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        .ic-t {
            font-family: var(--fh);
            font-size: 1rem;
            font-weight: 800;
            letter-spacing: -.03em;
            margin-bottom: .45rem
        }

        .ic-d {
            font-size: .8rem;
            color: var(--ink2);
            line-height: 1.65
        }

        /* ── ABOUT ── */
        .ab-hero {
            background: linear-gradient(160deg, var(--bd) 0%, var(--b) 60%, var(--bm) 100%), var(--b));
            padding: 7rem 2rem 4rem;
            text-align: center
        }

        .ab-hero h1 {
            font-family: var(--fh);
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 900;
            color: #fff;
            letter-spacing: -.05em;
            margin-bottom: 1rem
        }

        .ab-hero p {
            font-size: .95rem;
            color: rgba(255, 255, 255, .5);
            max-width: 520px;
            margin: 0 auto;
            line-height: 1.75
        }

        .ab-vals {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.25rem;
            margin-top: 2.5rem
        }

        .av {
            background: var(--w);
            border: 1.5px solid var(--bord);
            border-radius: var(--r16);
            padding: 1.75rem;
            transition: all .2s
        }

        .av:hover {
            border-color: var(--bord-b);
            transform: translateY(-3px);
            box-shadow: 0 12px 36px rgba(22, 71, 232, .09)
        }

        .av-icon {
            width: 44px;
            height: 44px;
            border-radius: var(--r12);
            background: var(--bf);
            border: 1px solid var(--bord-b);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem
        }

        .av-icon svg {
            width: 20px;
            height: 20px;
            stroke: var(--b);
            stroke-width: 1.8;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        .av-t {
            font-family: var(--fh);
            font-size: 1rem;
            font-weight: 800;
            letter-spacing: -.03em;
            margin-bottom: .45rem
        }

        .av-d {
            font-size: .8rem;
            color: var(--ink2);
            line-height: 1.65
        }

        .ab-story {
            max-width: 720px;
            margin: 3.5rem auto 0
        }

        .ab-story h2 {
            font-family: var(--fh);
            font-size: 1.9rem;
            font-weight: 900;
            letter-spacing: -.05em;
            margin-bottom: 1.1rem
        }

        .ab-story p {
            font-size: .9rem;
            color: var(--ink2);
            line-height: 1.82;
            margin-bottom: 1.1rem
        }

        /* ── DEMO ── */
        .demo-shell {
            padding-top: 80px;
            display: flex;
            flex-direction: column
        }

        .demo-main {
            flex: 1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0;
            max-width: 100%;
            min-height: calc(100vh - 80px - 210px)
        }

        .demo-left {
            background: linear-gradient(160deg, var(--bd) 0%, var(--b) 60%, var(--bm) 100%);
            padding: 3.5rem 3.5rem 3rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            overflow: hidden
        }

        .demo-left::before {
            content: '';
            position: absolute;
            top: -60px;
            right: -80px;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, .06)
        }

        .demo-left::after {
            content: '';
            position: absolute;
            bottom: -80px;
            left: -40px;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, .04)
        }

        .demo-left-inner {
            position: relative;
            z-index: 1
        }

        .demo-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            font-size: .68rem;
            font-weight: 800;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .5);
            background: rgba(255, 255, 255, .1);
            border: 1px solid rgba(255, 255, 255, .18);
            padding: .3rem .85rem;
            border-radius: var(--r100);
            margin-bottom: 1.5rem
        }

        .demo-h1 {
            font-family: var(--fh);
            font-size: clamp(2rem, 3vw, 3rem);
            font-weight: 900;
            letter-spacing: -.05em;
            color: #fff;
            margin-bottom: 1.25rem;
            line-height: 1.05
        }

        .demo-sub {
            font-size: .92rem;
            color: rgba(255, 255, 255, .55);
            line-height: 1.75;
            margin-bottom: 2.5rem;
            max-width: 400px
        }

        .demo-expect {
            display: flex;
            flex-direction: column;
            gap: 1.1rem
        }

        .demo-expect-item {
            display: flex;
            align-items: flex-start;
            gap: .9rem
        }

        .dei-icon {
            width: 36px;
            height: 36px;
            border-radius: var(--r8);
            background: rgba(255, 255, 255, .1);
            border: 1px solid rgba(255, 255, 255, .15);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0
        }

        .dei-icon svg {
            width: 17px;
            height: 17px;
            stroke: #fff;
            stroke-width: 1.8;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        .dei-text {}

        .dei-t {
            font-size: .85rem;
            font-weight: 700;
            color: #fff;
            letter-spacing: -.01em;
            margin-bottom: .15rem
        }

        .dei-d {
            font-size: .78rem;
            color: rgba(255, 255, 255, .45);
            line-height: 1.55
        }

        .demo-right {
            background: var(--bg);
            padding: 3rem 3.5rem 2.5rem;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .dm-form {
            width: 100%;
            max-width: 460px;
            background: var(--w);
            border: 1.5px solid var(--bord);
            border-radius: var(--r24);
            padding: 2.25rem;
            box-shadow: var(--sh-md)
        }

        .dm-form-title {
            font-family: var(--fh);
            font-size: 1.35rem;
            font-weight: 900;
            letter-spacing: -.04em;
            margin-bottom: .35rem
        }

        .dm-form-sub {
            font-size: .8rem;
            color: var(--ink3);
            margin-bottom: 1.75rem;
            line-height: 1.55
        }

        .fl {
            margin-bottom: 1rem
        }

        .flb {
            font-size: .75rem;
            font-weight: 700;
            color: var(--ink);
            margin-bottom: .35rem;
            display: block;
            letter-spacing: -.01em
        }

        .fi {
            width: 100%;
            padding: .72rem .95rem;
            border-radius: var(--r8);
            border: 1.5px solid var(--bord);
            background: var(--bg);
            font-family: var(--fb);
            font-size: .85rem;
            color: var(--ink);
            transition: border-color .2s;
            outline: none
        }

        .fi:focus {
            border-color: var(--b);
            background: var(--w)
        }

        .fsel {
            width: 100%;
            padding: .72rem .95rem;
            border-radius: var(--r8);
            border: 1.5px solid var(--bord);
            background: var(--bg);
            font-family: var(--fb);
            font-size: .85rem;
            color: var(--ink);
            outline: none;
            cursor: pointer
        }

        .fsel:focus {
            border-color: var(--b)
        }

        .fi-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: .75rem
        }

        .fsub {
            width: 100%;
            padding: .9rem;
            border-radius: var(--r100);
            background: var(--b);
            color: #fff;
            font-family: var(--fb);
            font-size: .9rem;
            font-weight: 700;
            border: none;
            cursor: pointer;
            transition: all .2s;
            box-shadow: var(--sh-b);
            letter-spacing: -.01em;
            margin-top: .5rem
        }

        .fsub:hover {
            background: var(--bd);
            transform: translateY(-1px)
        }

        .form-note {
            font-size: .7rem;
            color: var(--ink3);
            text-align: center;
            margin-top: .75rem;
            line-height: 1.5
        }

        /* ── ANIMATIONS ── */
        .fu {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity .55s ease, transform .55s ease
        }

        .fu.vis {
            opacity: 1;
            transform: none
        }

        /* ── SOLUTIONS PAGE ── */
        .sol-hero {
            background: linear-gradient(160deg, var(--bd) 0%, var(--b) 55%, var(--bm) 100%);
            padding: 7rem 2rem 4rem;
            text-align: center
        }

        .sol-hero h1 {
            font-family: var(--fh);
            font-size: clamp(2.4rem, 4.5vw, 3.8rem);
            font-weight: 900;
            color: #fff;
            letter-spacing: -.05em;
            margin-bottom: .85rem;
            position: relative
        }

        .sol-hero p {
            font-size: .95rem;
            color: rgba(255, 255, 255, .55);
            max-width: 480px;
            margin: 0 auto;
            line-height: 1.75
        }

        /* ── RESPONSIVE ── */
        @media(max-width:960px) {
            .hero {
                grid-template-columns: 1fr;
                height: auto;
                padding: 5rem 1.5rem 2rem
            }

            .hero-r {
                display: flex
            }

            .prob-grid,
            .pkg-grid,
            .ab-vals,
            .svc-grid,
            .pkg-detail-grid {
                grid-template-columns: 1fr
            }

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

            .foot-main {
                grid-template-columns: 1fr 1fr;
                gap: 2rem
            }

            .sw {
                padding: 3.5rem 1.25rem
            }

            .demo-main {
                grid-template-columns: 1fr
            }

            .demo-left {
                padding: 4rem 2rem 3rem
            }

            .demo-right {
                padding: 3rem 2rem
            }
        }

        /* ══════════════════════════════════════════
           PREMIUM WHITE/BLUE ENHANCEMENTS
        ══════════════════════════════════════════ */

        /* Package cards - premium blue accents */
        .pkg.product-pkg {
            background: linear-gradient(160deg, #ffffff 0%, #f3f7ff 100%);
            border-color: rgba(22,71,232,.2);
            box-shadow: 0 6px 32px rgba(22,71,232,.1), 0 1px 4px rgba(22,71,232,.06);
        }
        /* Equal package cards — elevation on hover only (see .pkg:hover) */

        /* CTA block - deep gradient */
        .cta-blk {
            background: linear-gradient(135deg, #0a1635 0%, #1038c2 45%, #1647e8 70%, #3d6bf5 100%);
        }

        /* Demo left panel */
        .demo-left {
            background: linear-gradient(150deg, #060d25 0%, #0d1f4a 40%, #1647e8 100%);
        }

        /* Section headings bigger */
        .sh2 { font-size: clamp(2.1rem, 3.4vw, 2.9rem) }

        .hero {
            grid-template-columns: 1fr 1fr;
            min-height: 85vh;
            padding: 90px 2rem 2rem 6rem;
            overflow: visible
        }
        .hero-l { padding: 0 4rem 0 0; }
        .hero-r { padding: 0 0 0 4rem; position: relative; overflow: visible; }
        .hero-h1 { font-size: clamp(2.4rem, 3.5vw, 3.8rem); margin-bottom: 1rem; line-height: 1.05; }
        .hero-sub { font-size: .95rem; max-width: 420px; margin-bottom: 1.5rem; line-height: 1.6; }
        .hstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
        .hs { background: var(--w); border: 1px solid var(--bord); border-radius: var(--r12); padding: 0.8rem 0.5rem; text-align: center; box-shadow: 0 2px 10px rgba(22,71,232,.06); }
        .hs-v { font-family: var(--fh); font-size: 1.25rem; font-weight: 900; letter-spacing: -.05em; color: var(--ink); line-height: 1; margin-bottom: .2rem; }
        .hs-l { font-size: .55rem; color: var(--ink3); font-weight: 500; }
        
        .dash {
            max-width: 480px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.98);
            border: 1px solid rgba(22, 71, 232, 0.2);
            border-radius: 20px;
            box-shadow:
                0 0 0 1px rgba(22, 71, 232, 0.08),
                0 24px 80px rgba(7, 12, 27, 0.14),
                0 8px 32px rgba(22, 71, 232, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
        }
        .hero-dash-wrap .dash { position: relative; z-index: 2; }
        .marquee-shell { padding: 0.6rem 0; background: linear-gradient(90deg, #0d1f4a 0%, var(--b) 35%, var(--bm) 65%, #0d1f4a 100%); }

        /* ── MINIMAL SPEEDOMETER ── */
        .speed-box-minimal { width: 100%; max-width: 320px; }
        .speedo-wrap { width: 100%; display: flex; justify-content: center; }
        .speedo-svg2 { width: 100%; height: auto; display: block; overflow: visible; }
        .sb-legend { display: flex; justify-content: space-between; margin-top: 0.5rem; padding: 0 1rem; }
        .sb-leg-item { display: flex; align-items: center; gap: 0.35rem; font-size: 0.65rem; color: var(--ink3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
        .sb-leg-dot { width: 8px; height: 8px; border-radius: 50%; }

/* ── DYNAMIC AGENT POP-OUT ── */
.agent-row { transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important; position: relative; }
.agent-row.a-active { 
    transform: scale(1.05) !important; 
    box-shadow: 0 16px 40px rgba(22,71,232,0.25) !important; 
    border-color: rgba(22,71,232,0.4) !important; 
    z-index: 10 !important; 
}

/* ── FLOATING KPI CHIPS ── */
@keyframes floatUp {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.02); }
}
@keyframes floatDown {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(10px) scale(1.02); }
}

.hero-dash-wrap {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 1.25rem 2.5rem;
}

.float-chip {
    position: absolute;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(22, 71, 232, 0.14);
    box-shadow:
        0 4px 6px rgba(7, 12, 27, 0.04),
        0 12px 40px rgba(7, 12, 27, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.6) inset;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.15rem;
    min-width: 96px;
    z-index: 12;
    pointer-events: none;
    text-align: center;
    will-change: transform;
}

.float-chip::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--fc-accent, var(--b));
}

.float-chip--tl {
    top: 4%;
    left: 0;
    animation: floatUp 4s ease-in-out infinite;
}
.float-chip--bl {
    bottom: 14%;
    left: 0;
    animation: floatDown 5s ease-in-out infinite;
    animation-delay: 0.8s;
}
.float-chip--tr {
    top: 4%;
    right: 0;
    animation: floatDown 6s ease-in-out infinite;
    animation-delay: 0.4s;
}
.float-chip--br {
    bottom: 14%;
    right: 0;
    animation: floatUp 5s ease-in-out infinite;
    animation-delay: 1.2s;
}

.float-chip--tl { --fc-accent: var(--b); }
.float-chip--bl { --fc-accent: var(--g1); }
.float-chip--tr { --fc-accent: #6366f1; }
.float-chip--br { --fc-accent: var(--am); }

.fc-val {
    font-family: var(--fh);
    font-size: 1.65rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
}
.fc-val--b { color: var(--b); }
.fc-val--g { color: var(--g1); }
.fc-val--i { color: var(--ink); }
.fc-val--a { color: var(--am); }

.fc-lbl {
    font-size: 0.58rem;
    color: var(--ink3);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    margin-top: 0.28rem;
    white-space: nowrap;
}

/* Responsive: hide chips on small screens */
@media (max-width: 900px) {
    .float-chip { display: none; }
    .hero-dash-wrap { padding: 0; }
}

.ind-hero h1, .ind-hero p { color: #fff; }

.ppage-hero.qual .ppage-eyebrow { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .25); color: #fff; }

/* ── UNIVERSAL INNER PAGE HERO OVERRIDE ── */
.sol-hero, .ind-hero, .service-hero, .ab-hero, .ppage-hero, .how-hero {
    background: linear-gradient(150deg, #04081a 0%, #0a1635 40%, #1038c2 100%) !important;
    padding: 7rem 2rem 4rem !important;
    min-height: 480px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
}
.sol-hero h1, .sol-hero p, .ind-hero h1, .ind-hero p, .service-hero h1, .service-hero p, .ab-hero h1, .ab-hero p, .how-hero h1, .how-hero p {
    color: #fff !important;
}
.sol-hero p, .ind-hero p, .service-hero p, .ab-hero p, .how-hero p {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ══════════════════════════════════════════
   MOBILE NAV TOGGLE
══════════════════════════════════════════ */
.nav-toggle {
    display: none;
    cursor: pointer;
    width: 44px;
    height: 44px;
    border-radius: var(--r100);
    border: 1.5px solid var(--bord);
    background: var(--bg);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    padding: 0;
    flex-shrink: 0;
    margin-left: auto;
    -webkit-tap-highlight-color: transparent;
}

.nav-toggle-bar {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform .25s ease, opacity .25s ease;
}

nav.nav-open .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

nav.nav-open .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

nav.nav-open .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ══════════════════════════════════════════
   MOBILE PHONE ONLY (≤768px) — desktop unchanged
══════════════════════════════════════════ */
@media (max-width: 768px) {
    html {
        font-size: 15px;
    }

    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .nav-shell {
        top: max(10px, env(safe-area-inset-top));
        width: calc(100% - 24px);
    }

    nav {
        padding: .65rem .85rem .65rem 1.15rem;
        border-radius: var(--r24);
        position: relative;
    }

    .nl {
        font-size: 1.25rem;
    }

    .nav-toggle {
        display: flex;
    }

    nav {
        flex-wrap: wrap;
    }

    .nlinks {
        display: none;
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: .25rem;
        background: rgba(255, 255, 255, .98);
        backdrop-filter: blur(24px) saturate(200%);
        border: 1px solid var(--bord);
        border-radius: var(--r16);
        box-shadow: var(--sh-lg);
        padding: .65rem;
        z-index: 1000;
        max-height: min(70vh, 480px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        margin-left: 0;
    }

    nav.nav-open .nlinks {
        display: flex;
    }

    .nlinks li {
        display: list-item;
        width: 100%;
    }

    .nlinks a {
        display: block;
        width: 100%;
        text-align: center;
        padding: .85rem 1rem !important;
        font-size: .95rem !important;
        min-height: 44px;
        box-sizing: border-box;
    }

    .ncta {
        margin-top: .25rem;
    }

    html,
    body {
        overflow-x: clip;
        max-width: 100vw;
    }

    .hero {
        grid-template-columns: 1fr !important;
        padding: 5.25rem 1rem 2rem !important;
        min-height: auto !important;
        height: auto !important;
    }

    .hero-l {
        padding: 0 !important;
        text-align: center;
        align-items: center;
    }

    .hero-r {
        display: flex !important;
        padding: 0 !important;
        margin-top: 1.25rem;
        width: 100%;
    }

    .hlabel {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-sub {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-act {
        justify-content: center;
    }

    .hstats {
        max-width: 100%;
        margin: 0 auto;
        width: 100%;
    }

    .hero-h1 {
        font-size: clamp(2rem, 8.5vw, 2.75rem) !important;
    }

    .hero-act {
        flex-direction: column;
        width: 100%;
        gap: .65rem;
    }

    .hero-act .btn-p,
    .hero-act .btn-g {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }

    .hstats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: .5rem;
    }

    .hs {
        padding: .75rem .5rem;
    }

    .hs-v {
        font-size: 1.1rem;
    }

    .hero-dash-wrap {
        padding: 0 .25rem;
        max-width: 100%;
    }

    .dash {
        max-width: 100% !important;
        border-radius: var(--r16);
        box-shadow:
            0 0 0 1px rgba(22, 71, 232, 0.08),
            0 12px 40px rgba(7, 12, 27, 0.12),
            0 4px 16px rgba(22, 71, 232, 0.08) !important;
    }

    .dash-body {
        padding: .55rem !important;
    }

    .speed-box-minimal {
        padding: .65rem !important;
        margin-top: .5rem !important;
    }

    .speedo-wrap {
        margin: 0 auto !important;
        max-width: 100% !important;
    }

    .float-chip {
        display: none;
    }

    .agent-row {
        flex-wrap: wrap;
        gap: .4rem;
    }

    .spill {
        font-size: .6rem;
        padding: .25rem .55rem;
    }

    .sw {
        padding: 3rem 1.15rem !important;
    }

    .sh2 {
        font-size: clamp(1.65rem, 6.5vw, 2.1rem) !important;
    }

    .ssub {
        margin-bottom: 1.75rem;
    }

    .prob-grid,
    .pkg-grid,
    .ab-vals,
    .svc-grid,
    .pkg-detail-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    .ind-grid {
        grid-template-columns: 1fr !important;
    }

    .vs-card {
        padding: 1.5rem 1.15rem;
        margin-top: 2rem;
    }

    .vs-r {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
        padding: 1rem 0;
    }

    .vs-chips {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: .5rem;
    }

    .vs-sep {
        display: none;
    }

    .chip {
        min-width: 0;
        width: 100%;
    }

    .vs-l {
        font-size: .95rem;
    }

    .pkg-top,
    .pkg-feats {
        padding-left: 1.35rem;
        padding-right: 1.35rem;
    }

    .cta-blk {
        padding: 3.5rem 1.15rem;
    }

    .cta-h {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
    }

    .btn-w,
    .btn-p {
        min-height: 48px;
    }

    footer {
        padding: 0 1.15rem;
    }

    .foot-main {
        grid-template-columns: 1fr !important;
        gap: 2rem;
        padding: 2.5rem 0 2rem;
    }

    .fl-desc {
        max-width: 100%;
    }

    .foot-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        padding: 1.25rem 0 1.5rem;
    }

    .fc-links-h {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem 1.5rem;
    }

    .sol-hero,
    .ind-hero,
    .service-hero,
    .ab-hero,
    .ppage-hero,
    .how-hero {
        min-height: auto !important;
        padding: 5.5rem 1.15rem 2.5rem !important;
    }

    .sol-hero h1,
    .ind-hero h1,
    .service-hero h1,
    .ab-hero h1,
    .ppage-hero h1,
    .how-hero h1 {
        font-size: clamp(1.85rem, 7vw, 2.5rem) !important;
    }

    .demo-shell {
        padding-top: 72px;
    }

    .demo-main {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    .demo-left {
        padding: 2.5rem 1.25rem 2rem !important;
    }

    .demo-right {
        padding: 1.5rem 1.15rem 2rem !important;
    }

    .demo-h1 {
        font-size: clamp(1.75rem, 6.5vw, 2.25rem) !important;
    }

    .dm-form {
        padding: 1.5rem 1.25rem;
        border-radius: var(--r16);
    }

    .fi-row {
        grid-template-columns: 1fr !important;
        gap: 0;
    }

    .fi,
    .fsel,
    .fsub {
        font-size: 16px;
        min-height: 48px;
    }

    .fsub {
        margin-top: .75rem;
    }

    .si-step {
        grid-template-columns: 48px 1fr;
        gap: 1rem;
        padding: 1.5rem 0;
    }

    .sn {
        font-size: 2.25rem;
    }

    .svc-step {
        flex-direction: column;
        gap: .5rem;
        padding: 1.35rem 0;
    }

    .svc-step-n {
        font-size: 2rem;
        width: auto;
    }

    .pct-row {
        flex-direction: column;
        align-items: flex-start;
        gap: .35rem;
        padding: .85rem 1.15rem;
    }

    .pct-val {
        text-align: left;
    }

    .cdemo {
        margin-top: 2rem;
        max-width: 100%;
    }

    .marquee-shell {
        padding: .55rem 0;
    }

    .mq-item {
        font-size: .62rem;
        padding: 0 1.25rem;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .nav-shell {
        width: calc(100% - 16px);
    }

    nav {
        padding: .55rem .65rem .55rem 1rem;
    }

    .hero {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .hstats {
        grid-template-columns: 1fr 1fr !important;
    }

    .hs-l {
        font-size: .58rem;
    }

    .pc,
    .pkg,
    .ic,
    .av,
    .svc-c {
        padding: 1.35rem;
    }

    .vs-card {
        padding: 1.15rem .85rem;
    }

    .ab-story {
        margin-top: 2rem;
    }

    .ab-story h2 {
        font-size: 1.5rem;
    }
}

@media (min-width: 769px) {
    .nav-toggle {
        display: none !important;
    }

    .nlinks {
        display: flex !important;
        position: static !important;
        flex-direction: row !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        width: auto !important;
    }
}

@media (max-width: 960px) {
    .hero-r {
        display: flex !important;
    }
}

/* ══════════════════════════════════════════
   SMARTPHONE POLISH (all common devices)
   iPhone SE–15 Pro Max, Galaxy, Pixel, etc.
══════════════════════════════════════════ */
@media (max-width: 768px) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        min-height: 100dvh;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .page,
    .si,
    .sw,
    .hero,
    .demo-main,
    .cta-in {
        max-width: 100%;
        min-width: 0;
    }

    .page > div[style*="padding-top"] {
        padding-top: 4.75rem !important;
    }

    img,
    svg,
    video {
        max-width: 100%;
        height: auto;
    }

    .hero {
        padding-left: 1.15rem !important;
        padding-right: 1.15rem !important;
    }

    .hero-h1,
    .sh2,
    .cta-h,
    .demo-h1,
    h1 {
        overflow-wrap: break-word;
        word-wrap: break-word;
        hyphens: auto;
    }

    .hero-l,
    .hero-r,
    .dash,
    .dash-body,
    .agent-row,
    .a-info {
        min-width: 0;
    }

    .agent-row.a-active {
        transform: none !important;
        box-shadow: 0 8px 24px rgba(22, 71, 232, 0.15) !important;
    }

    .a-name {
        font-size: .68rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .a-sub {
        font-size: .62rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dash-bar {
        padding: .75rem 1rem;
        flex-wrap: wrap;
        gap: .35rem;
    }

    .db-title {
        font-size: .6rem;
    }

    .speedo-wrap {
        max-width: 100% !important;
        margin-bottom: 0 !important;
    }

    .speedo-svg2 {
        max-height: 140px;
    }

    #solutions .pkg-grid {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 2rem !important;
    }

    #solutions .si > div:has(table) {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    #solutions .si table {
        min-width: 480px;
        font-size: .8rem !important;
    }

    #solutions .si table th,
    #solutions .si table td {
        padding: .7rem .65rem !important;
        white-space: nowrap;
    }

    #solutions .si table th:first-child,
    #solutions .si table td:first-child {
        white-space: normal;
        min-width: 120px;
    }

    .sol-hero p,
    .ind-hero p,
    .service-hero p,
    .ab-hero p,
    .ppage-hero p,
    .how-hero p {
        max-width: 100% !important;
        padding: 0 .25rem;
    }

    .ppage-hero p,
    .demo-sub {
        max-width: 100% !important;
    }

    .btn-g,
    .btn-w,
    .pkg-btn,
    .nlinks a {
        -webkit-tap-highlight-color: transparent;
    }

    .pkg:hover,
    .pc:hover,
    .ic:hover {
        transform: none;
    }

    .demo-right .dm-form {
        width: 100%;
        max-width: 100%;
    }

    #demo .foot-main[style] {
        grid-template-columns: 1fr !important;
    }
}

/* Compact phones (iPhone SE, small Android) */
@media (max-width: 390px) {
    html {
        font-size: 14px;
    }

    .nav-shell {
        width: calc(100% - 12px);
    }

    .nl {
        font-size: 1.1rem;
    }

    .hero-h1 {
        font-size: clamp(1.75rem, 9vw, 2.15rem) !important;
        letter-spacing: -.04em;
    }

    .hero-sub {
        font-size: .9rem;
    }

    .hstats {
        gap: .4rem;
    }

    .hs-v {
        font-size: 1rem;
    }

    .hs-l {
        font-size: .52rem;
        line-height: 1.25;
    }

    .dash-body {
        padding: .5rem;
    }

    .spill {
        width: 100%;
        text-align: center;
        margin-top: .15rem;
    }

    .agent-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .agent-row .spill {
        align-self: flex-start;
        width: auto;
    }

    .ey {
        font-size: .62rem;
    }

    .cta-blk {
        padding: 2.75rem 1rem;
    }

    .dm-form-title {
        font-size: 1.2rem;
    }
}

/* Very small width (320px legacy devices) */
@media (max-width: 360px) {
    .hero-act .btn-p,
    .hero-act .btn-g {
        font-size: .88rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .mq-item {
        font-size: .55rem;
        letter-spacing: .1em;
    }

    .fc-val {
        font-size: 1.35rem;
    }
}

/* Large phones (Pro Max, Ultra, Plus models) */
@media (min-width: 391px) and (max-width: 768px) {
    .hero-h1 {
        font-size: clamp(2.1rem, 7.5vw, 2.85rem) !important;
    }

    .hstats {
        max-width: 100%;
    }
}

/* Android / phone landscape only */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem;
        align-items: center;
        padding-top: 4.25rem !important;
        padding-bottom: 1.25rem !important;
    }

    .hero-l {
        text-align: left;
        align-items: flex-start;
    }

    .hero-act {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .hero-act .btn-p,
    .hero-act .btn-g {
        width: auto;
        flex: 1;
        min-width: 130px;
    }

    .hstats {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .hero-r {
        margin-top: 0;
    }

    .sol-hero,
    .ind-hero,
    .service-hero,
    .ab-hero,
    .ppage-hero,
    .how-hero {
        padding-top: 4rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* Reduce motion on phones when preferred */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none;
    }

    .float-chip,
    .agent-row,
    .db-live-d,
    .hlabel-dot::after {
        animation: none !important;
    }

    .fu {
        opacity: 1;
        transform: none;
    }
}

/* ── Android & mobile UI polish (phones only, no desktop) ── */
@media (max-width: 768px) {
    * {
        -webkit-tap-highlight-color: transparent;
    }

    body {
        overscroll-behavior-x: none;
        touch-action: manipulation;
    }

    .si {
        padding: 0;
        width: 100%;
    }

    .ssub,
    .hero-sub,
    .cta-s {
        max-width: 100%;
        padding: 0 .15rem;
    }

    .ey {
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .btn-p,
    .btn-g,
    .btn-w,
    .pkg-btn,
    .fsub {
        touch-action: manipulation;
        min-height: 48px;
    }

    .pkg {
        width: 100%;
        max-width: 100%;
    }

    .pkg-btn {
        width: 100%;
    }

    .agent-row {
        padding: .55rem .5rem;
    }

    .agent-row .a-av {
        width: 36px;
        height: 36px;
        font-size: .72rem;
    }

    .a-info {
        flex: 1;
        min-width: 0;
    }

    .spill {
        flex-shrink: 0;
        max-width: 100%;
    }

    .sec-lbl {
        font-size: .56rem;
        margin-bottom: .35rem;
    }

    .marquee-shell {
        width: 100%;
        overflow: hidden;
    }

    .marquee-track {
        animation-duration: 22s;
    }

    .vs-t {
        font-size: .75rem;
        margin-bottom: 1.25rem;
    }

    .cta-in {
        padding: 0 .5rem;
    }

    .demo-left-inner,
    .demo-expect {
        width: 100%;
    }

    .demo-expect-item {
        gap: .75rem;
    }

    .dm-form {
        box-sizing: border-box;
    }

    .fl {
        margin-bottom: .85rem;
    }

    .form-note {
        font-size: .68rem;
        padding: 0 .25rem;
    }

    .foot-brand,
    .foot-col {
        width: 100%;
    }

    .fc-links a {
        padding: .35rem 0;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
    }

    .pkg-compare-tbl,
    .cdemo {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .pct-head {
        flex-direction: column;
        gap: .25rem;
        align-items: flex-start;
    }

    .ab-hero h1,
    .sol-hero h1 {
        line-height: 1.1;
    }

    .how-hero .si,
    .sol-hero .si,
    .ind-hero .si {
        width: 100%;
        padding: 0 .5rem;
        box-sizing: border-box;
    }

    #solutions .si > div:has(table) {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .page > div[style*="padding-top"] {
        padding-top: 5rem !important;
    }
}

/* Small Android screens (Galaxy A series, narrow devices) */
@media (max-width: 400px) {
    .hero-h1 {
        line-height: 1.08 !important;
    }

    .dash-bar .db-title {
        flex: 1 1 100%;
        margin-left: 0;
        margin-top: .15rem;
    }

    .db-live {
        margin-left: 0;
    }
}

/* ── Package CTAs, comparison table, service gallery ── */
.pkg-btn-row {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.pkg-btn-cta {
    background: var(--w) !important;
    color: var(--b) !important;
    border: 1.5px solid var(--b) !important;
}

.pkg-btn-cta:hover {
    background: var(--bl) !important;
}

.pkg-grid--solutions {
    grid-template-columns: repeat(2, 1fr);
    max-width: 1060px;
    margin: 0 auto 2.5rem;
}

.cmp-table-wrap {
    max-width: 1060px;
    margin: 0 auto;
    background: var(--w);
    border: 1px solid var(--bord);
    border-radius: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 4px 20px rgba(22, 71, 232, .05);
}

.cmp-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    text-align: center;
    font-size: .95rem;
}

.cmp-table thead tr {
    background: #f8faff;
    border-bottom: 1px solid var(--bord);
}

.cmp-table th {
    padding: 1.2rem;
    font-weight: 700;
    color: var(--ink);
}

.cmp-table th:not(:first-child) {
    border-left: 1px solid var(--bord);
}

.cmp-table td {
    padding: 1rem 1.2rem;
    color: var(--ink2);
}

.cmp-table td:first-child {
    text-align: left;
}

.cmp-table td:not(:first-child) {
    border-left: 1px solid var(--bord);
}

.cmp-table tbody tr {
    border-bottom: 1px solid var(--bord);
}

.cmp-table tbody tr:nth-child(even) {
    background: #fafbfc;
}

.cmp-yes {
    color: #10b981;
    font-weight: 700;
}

.cmp-no {
    color: #ef4444;
    font-weight: 700;
}

.svc-highlight {
    margin: 2.5rem 0;
    padding: 2rem;
    background: linear-gradient(160deg, #ffffff 0%, #f3f7ff 100%);
    border: 1px solid rgba(22, 71, 232, .15);
    border-radius: var(--r24);
}

.svc-highlight h3 {
    font-family: var(--fh);
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -.04em;
    margin-bottom: .75rem;
}

.svc-highlight p {
    color: var(--ink2);
    line-height: 1.75;
    margin-bottom: 1rem;
    font-size: .95rem;
}

.svc-highlight-list {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
}

.svc-highlight-list li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .9rem;
    color: var(--ink2);
    margin-bottom: .5rem;
}

.svc-gallery {
    margin: 2.5rem 0;
}

.svc-gallery-title {
    font-family: var(--fh);
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -.04em;
    margin-bottom: 1.25rem;
}

.svc-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.svc-gallery-grid img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--r16);
    border: 1px solid var(--bord);
}

.service-hero .btn-p {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

@media (max-width: 960px) {
    .pkg-grid--solutions {
        grid-template-columns: 1fr;
    }

    .svc-gallery-grid {
        grid-template-columns: 1fr;
    }

    .svc-gallery-grid img {
        height: 180px;
    }
}

@media (max-width: 768px) {
    .ind-grid {
        grid-template-columns: 1fr !important;
    }

    .pkg-btn-row .pkg-btn {
        min-height: 44px;
    }

    .vs-card .vs-r {
        flex-wrap: wrap;
        gap: .5rem;
    }

    .vs-chips {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .cmp-table {
        font-size: .85rem;
    }

    .cmp-table th,
    .cmp-table td {
        padding: .75rem .6rem;
    }

    .svc-highlight {
        padding: 1.25rem;
    }
}