/* Call Agent page (scoped) – uses your global BalooBhaijaan2 font + brand vars from main.css */
.call-agent-page {
    --bg: var(--color-white, #ffffff);
    --text: var(--color-n-darker, #0f172a);
    --muted: var(--color-n, #64748b);
    --muted2: #94a3b8;
    --card: var(--color-white, #ffffff);
    --line: var(--color-n-light, #e5e7eb);
    --soft: var(--color-n-lighter, #f8fafc);
    --soft2: var(--color-n-lighter, #f3f4f6);
    --dark: #0b1220;
    --orange: var(--color-primary, #ea580c);
    --orange2: var(--color-primary, #f97316);
    --green: var(--color-success, #16a34a);
    --blue: #2563eb;
    --purple: #7c3aed;
    --pink: #db2777;
    --indigo: #4f46e5;
    --shadow: 0 20px 50px -12px rgba(0,0,0,.10);
    --shadow2: 0 30px 60px -15px rgba(254,108,30,.18);
    --radius: 20px;
    font-family: var(--font-primary, "Baloo Bhaijaan 2", sans-serif);
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
}

    .call-agent-page, .call-agent-page *, .call-agent-page *::before, .call-agent-page *::after {
        box-sizing: border-box
    }

        .call-agent-page a {
            color: inherit;
            text-decoration: none;
        }

        .call-agent-page .container {
            max-width: 1120px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .call-agent-page .center {
            text-align: center;
        }

        .call-agent-page .mt-56 {
            margin-top: 56px;
        }

        .call-agent-page .w-100 {
            width: 100%;
        }

        /* ===================== SCROLL PROGRESS ===================== */
        .call-agent-page .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            height: 3px;
            width: 0%;
            background: linear-gradient(90deg,var(--orange),var(--orange2));
            z-index: 9999;
            border-radius: 0 2px 2px 0;
            transition: width .05s linear;
            box-shadow: 0 0 8px rgba(249,115,22,.5);
        }

        /* ===================== CURSOR GLOW ===================== */
        .call-agent-page .cursor-glow {
            position: fixed;
            pointer-events: none;
            z-index: 1;
            width: 320px;
            height: 320px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(249,115,22,.07) 0%, transparent 70%);
            transform: translate(-50%,-50%);
            transition: left .12s ease, top .12s ease;
        }

        /* ===================== BUTTONS ===================== */
        .call-agent-page .btn {
            position: relative;
            overflow: hidden;
            border: 1px solid transparent;
            background: transparent;
            color: var(--text);
            padding: 12px 18px;
            border-radius: 999px;
            font-weight: 700;
            cursor: pointer;
            transition: transform .2s cubic-bezier(0.34,1.56,0.64,1), box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .call-agent-page .btn--lg {
            padding: 14px 22px;
            font-size: 16px
        }

        .call-agent-page .btn--primary {
            background: linear-gradient(90deg,var(--orange),var(--orange2));
            color: #fff;
            box-shadow: var(--shadow2);
        }

            .call-agent-page .btn--primary:hover {
                transform: translateY(-1px) scale(1.02)
            }

        .call-agent-page .btn--outline {
            border-color: rgba(15,23,42,.15);
            background: #fff;
        }

            .call-agent-page .btn--outline:hover {
                border-color: rgba(15,23,42,.25);
                transform: translateY(-1px)
            }

        .call-agent-page .btn--dark {
            background: #0b1220;
            color: #fff;
            box-shadow: 0 18px 40px rgba(0,0,0,.18);
        }

            .call-agent-page .btn--dark:hover {
                transform: translateY(-1px) scale(1.02)
            }

        .call-agent-page .btn--outline-dark {
            border-color: rgba(255,255,255,.25);
            color: #fff;
            background: transparent;
        }

            .call-agent-page .btn--outline-dark:hover {
                border-color: rgba(255,255,255,.45);
                transform: translateY(-1px)
            }

        .call-agent-page .arrow {
            display: inline-block;
            animation: ca-arrowBounce 1.2s infinite
        }

        /* ===================== REVEAL ===================== */
        .call-agent-page .reveal {
            opacity: 0;
            transform: translateY(12px);
            transition: opacity .6s ease, transform .6s ease
        }

            .call-agent-page .reveal.is-visible {
                opacity: 1;
                transform: translateY(0)
            }

        /* ===================== HERO ===================== */
        .call-agent-page .hero {
            position: relative;
            padding: 96px 0 80px;
            overflow: hidden;
        }

        .call-agent-page .hero__bg {
            position: absolute;
            inset: 0;
            background: radial-gradient(900px 420px at 80% 30%, rgba(255,108,30,.16), transparent 60%), radial-gradient(700px 320px at 20% 20%, rgba(255,108,30,.10), transparent 55%), linear-gradient(180deg, rgba(255,246,238,.85), #ffffff 70%);
            animation: ca-heroBgShift 8s ease-in-out infinite;
        }

        .call-agent-page .hero__inner {
            position: relative;
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 40px;
            align-items: center;
            animation: ca-heroIn .65s cubic-bezier(.2,1,.2,1) both;
        }

        .call-agent-page .hero__copy h1 {
            font-size: 56px;
            line-height: 1.05;
            margin: 16px 0 12px;
            font-weight: 900;
            letter-spacing: -.02em;
        }

        .call-agent-page .grad {
            background: linear-gradient(90deg,var(--orange),var(--orange2));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: ca-gradShift 6s ease-in-out infinite;
        }

        .call-agent-page .hero__copy p {
            margin: 0 0 18px;
            color: var(--muted);
            font-size: 16px;
            line-height: 1.75;
            max-width: 520px;
        }

        .call-agent-page .hero__actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin: 20px 0 18px
        }

        .call-agent-page .hero__bullets {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
            margin-top: 10px
        }

        .call-agent-page .bullet {
            display: inline-flex;
            gap: 8px;
            align-items: center;
            color: var(--muted);
            font-weight: 700;
            font-size: 14px
        }

            .call-agent-page .bullet svg {
                width: 18px;
                height: 18px
            }

        .call-agent-page .pill {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 8px 12px;
            border-radius: 999px;
            background: rgba(255,108,30,.10);
            border: 1px solid rgba(255,108,30,.18);
            color: var(--orange);
            font-weight: 800;
            font-size: 12.5px;
            animation: ca-pillPop .7s cubic-bezier(.2,1,.2,1) both;
        }

            .call-agent-page .pill .dot {
                width: 18px;
                height: 18px;
                border-radius: 999px;
                background: rgba(255,108,30,.18);
                display: grid;
                place-items: center;
            }

                .call-agent-page .pill .dot span {
                    width: 7px;
                    height: 7px;
                    border-radius: 50%;
                    background: linear-gradient(90deg,var(--orange),var(--orange2));
                    animation: ca-ping 1.2s infinite;
                }

        .call-agent-page .pill--zap {
            background: rgba(255,108,30,.08);
            border-color: rgba(255,108,30,.15);
            color: var(--orange);
        }

            .call-agent-page .pill--zap svg {
                width: 16px;
                height: 16px
            }

        /* Hero floating cards */
        .call-agent-page .hero__visual {
            position: relative;
            min-height: 420px
        }

        .call-agent-page .float-card {
            position: absolute;
            width: min(360px, 92%);
            background: rgba(255,255,255,.95);
            border: 1px solid rgba(15,23,42,.08);
            border-radius: 18px;
            box-shadow: 0 18px 45px rgba(0,0,0,.12);
            padding: 14px 14px;
            backdrop-filter: blur(8px);
        }

        .call-agent-page .float-card__head {
            display: flex;
            gap: 12px;
            align-items: center;
            margin-bottom: 10px
        }

        .call-agent-page .float-card__title {
            font-weight: 900
        }

        .call-agent-page .float-card__sub {
            font-weight: 800;
            font-size: 12.5px;
            margin-top: 2px
        }

        .call-agent-page .ic {
            width: 40px;
            height: 40px;
            border-radius: 14px;
            display: grid;
            place-items: center;
            background: rgba(15,23,42,.04);
        }

            .call-agent-page .ic svg {
                width: 18px;
                height: 18px
            }

        .call-agent-page .ic--green {
            background: rgba(22,163,74,.12);
            color: var(--green)
        }

        .call-agent-page .ic--orange {
            background: rgba(255,108,30,.12);
            color: var(--orange)
        }

        .call-agent-page .ic--blue {
            background: rgba(37,99,235,.12);
            color: var(--blue)
        }

        .call-agent-page .float-card--a {
            top: 24px;
            right: 10px;
            animation: ca-floatA 5s ease-in-out infinite
        }

        .call-agent-page .float-card--b {
            top: 140px;
            right: -10px;
            animation: ca-floatB 6s ease-in-out infinite
        }

        .call-agent-page .float-card--c {
            top: 300px;
            right: 20px;
            animation: ca-floatC 5.5s ease-in-out infinite
        }

        .call-agent-page .badge {
            position: absolute;
            top: -10px;
            left: 14px;
            background: linear-gradient(90deg,var(--orange),var(--orange2));
            color: #fff;
            border-radius: 999px;
            padding: 6px 10px;
            font-weight: 900;
            font-size: 11px;
            box-shadow: 0 10px 25px rgba(255,108,30,.25);
            animation: ca-badgePulse 1.8s ease-in-out infinite;
        }

        .call-agent-page .quote {
            font-size: 13.5px;
            color: var(--muted);
            line-height: 1.55;
            background: rgba(15,23,42,.03);
            border: 1px dashed rgba(15,23,42,.12);
            border-radius: 14px;
            padding: 10px 12px;
        }

        .call-agent-page .skeleton span,
        .call-agent-page .bars span {
            display: block;
            height: 10px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(15,23,42,.06), rgba(15,23,42,.10), rgba(15,23,42,.06));
            background-size: 200% 100%;
            animation: ca-barsAnim 1.2s linear infinite;
        }

        .call-agent-page .skeleton {
            display: flex;
            flex-direction: column;
            gap: 10px
        }

        .call-agent-page .w-60 {
            width: 60%
        }

        .call-agent-page .w-66 {
            width: 66%
        }

        .call-agent-page .bars {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 10px
        }

        .call-agent-page .total {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 10px;
            border-top: 1px solid rgba(15,23,42,.08);
            font-weight: 800;
        }

            .call-agent-page .total strong {
                color: var(--blue)
            }

        /* ===================== FEATURES ===================== */
        .call-agent-page .features {
            padding: 70px 0;
            background: linear-gradient(180deg,#f8fafc, #ffffff 65%);
            border-top: 1px solid rgba(15,23,42,.06);
        }

        .call-agent-page .section-head {
            max-width: 760px;
            margin: 0 auto 32px;
            text-align: center
        }

            .call-agent-page .section-head h2 {
                font-size: 34px;
                margin: 0 0 10px;
                font-weight: 900
            }

            .call-agent-page .section-head p {
                margin: 0;
                color: var(--muted);
                line-height: 1.7
            }

        .call-agent-page .grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0,1fr));
            gap: 18px;
        }

        .call-agent-page .card {
            background: #fff;
            border: 1px solid rgba(15,23,42,.08);
            border-radius: 18px;
            box-shadow: 0 12px 30px rgba(0,0,0,.08);
            padding: 18px 18px;
        }

            .call-agent-page .card h3 {
                margin: 10px 0 6px;
                font-weight: 900
            }

            .call-agent-page .card p {
                margin: 0;
                color: var(--muted);
                line-height: 1.65;
                font-size: 14px
            }

        .call-agent-page .icbox {
            width: 44px;
            height: 44px;
            border-radius: 16px;
            display: grid;
            place-items: center;
            border: 1px solid rgba(15,23,42,.06);
        }

            .call-agent-page .icbox svg {
                width: 18px;
                height: 18px
            }

        .call-agent-page .icbox--blue {
            background: rgba(37,99,235,.10);
            color: var(--blue)
        }

        .call-agent-page .icbox--green {
            background: rgba(22,163,74,.10);
            color: var(--green)
        }

        .call-agent-page .icbox--purple {
            background: rgba(124,58,237,.10);
            color: var(--purple)
        }

        .call-agent-page .icbox--orange {
            background: rgba(255,108,30,.10);
            color: var(--orange)
        }

        .call-agent-page .icbox--pink {
            background: rgba(219,39,119,.10);
            color: var(--pink)
        }

        .call-agent-page .icbox--indigo {
            background: rgba(79,70,229,.10);
            color: var(--indigo)
        }

        /* ===================== AI BLOCKS ===================== */
        .call-agent-page .aiblocks {
            padding: 80px 0;
            background: #fff
        }

        .call-agent-page .aiblocks__inner {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 38px;
            align-items: center;
        }

        .call-agent-page .aiblocks__copy h2 {
            margin: 14px 0 10px;
            font-size: 34px;
            font-weight: 900;
            line-height: 1.15;
        }

        .call-agent-page .aiblocks__copy p {
            margin: 0 0 18px;
            color: var(--muted);
            line-height: 1.7;
            max-width: 560px
        }

        .call-agent-page .checklist {
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin-top: 18px
        }

        .call-agent-page .checkitem {
            display: flex;
            gap: 12px;
            align-items: flex-start
        }

        .call-agent-page .checkdot {
            width: 28px;
            height: 28px;
            border-radius: 999px;
            background: rgba(255,108,30,.12);
            border: 1px solid rgba(255,108,30,.18);
            display: grid;
            place-items: center;
            color: var(--orange);
            flex: 0 0 auto;
        }

            .call-agent-page .checkdot svg {
                width: 16px;
                height: 16px
            }

        .call-agent-page .checkitem h4 {
            margin: 0;
            font-weight: 900
        }

        .call-agent-page .checkitem p {
            margin: 2px 0 0;
            color: var(--muted);
            font-size: 14px;
            line-height: 1.6
        }

        /* Terminal */
        .call-agent-page .terminal {
            position: relative;
            background: linear-gradient(180deg,#0b1220, #070b14);
            color: #e5e7eb;
            border-radius: 22px;
            border: 1px solid rgba(255,255,255,.08);
            box-shadow: 0 30px 70px rgba(0,0,0,.25);
            padding: 18px 18px 16px;
            overflow: hidden;
        }

        .call-agent-page .terminal__glow {
            position: absolute;
            inset: -40%;
            background: radial-gradient(circle at 30% 30%, rgba(255,108,30,.18), transparent 45%), radial-gradient(circle at 70% 70%, rgba(255,108,30,.12), transparent 45%);
            filter: blur(20px);
            animation: ca-glowPulse 6s ease-in-out infinite;
        }

        .call-agent-page .terminal__row {
            position: relative;
            display: flex;
            gap: 12px;
            align-items: center
        }

        .call-agent-page .terminal__mid {
            position: relative;
            display: grid;
            place-items: center;
            padding: 10px 0;
            color: rgba(255,255,255,.6)
        }

            .call-agent-page .terminal__mid svg {
                width: 18px;
                height: 18px
            }

        .call-agent-page .rotate {
            transform: rotate(90deg)
        }

        .call-agent-page .avatar {
            width: 40px;
            height: 40px;
            border-radius: 16px;
            display: grid;
            place-items: center;
            border: 1px solid rgba(255,255,255,.08);
            background: rgba(255,255,255,.05);
            flex: 0 0 auto;
        }

            .call-agent-page .avatar svg {
                width: 18px;
                height: 18px
            }

        .call-agent-page .avatar--dark {
            color: #cbd5e1
        }

        .call-agent-page .avatar--orange {
            background: rgba(255,108,30,.12);
            color: #fff;
            border-color: rgba(255,108,30,.25)
        }

        .call-agent-page .bubble {
            position: relative;
            flex: 1;
            border-radius: 18px;
            padding: 12px 12px;
            border: 1px solid rgba(255,255,255,.08);
            background: rgba(255,255,255,.04);
        }

        .call-agent-page .bubble__label {
            font-size: 12px;
            font-weight: 900;
            opacity: .85;
            margin-bottom: 8px
        }

        .call-agent-page .bubble--orange {
            border-color: rgba(255,108,30,.25);
            background: linear-gradient(180deg, rgba(255,108,30,.14), rgba(255,108,30,.06));
        }

        .call-agent-page .mono {
            font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-size: 12.5px;
            line-height: 1.65
        }

            .call-agent-page .mono span {
                opacity: .6
            }

        .call-agent-page .t-green {
            color: #22c55e
        }

        .call-agent-page .t-yellow {
            color: #fbbf24
        }

        .call-agent-page .t-blue {
            color: #60a5fa
        }

        .call-agent-page .text-orange {
            color: var(--orange)
        }

        .call-agent-page .text-green {
            color: var(--green)
        }

        .call-agent-page .text-blue {
            color: var(--blue)
        }

        .call-agent-page .wave {
            display: flex;
            gap: 4px;
            align-items: flex-end;
            height: 22px
        }

            .call-agent-page .wave span {
                width: 4px;
                border-radius: 999px;
                background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.25));
                height: 8px;
                animation: ca-wave 1.1s ease-in-out infinite;
            }

                .call-agent-page .wave span:nth-child(2) {
                    animation-delay: .08s
                }

                .call-agent-page .wave span:nth-child(3) {
                    animation-delay: .16s
                }

                .call-agent-page .wave span:nth-child(4) {
                    animation-delay: .24s
                }

                .call-agent-page .wave span:nth-child(5) {
                    animation-delay: .32s
                }

                .call-agent-page .wave span:nth-child(6) {
                    animation-delay: .40s
                }

                .call-agent-page .wave span:nth-child(7) {
                    animation-delay: .48s
                }

                .call-agent-page .wave span:nth-child(8) {
                    animation-delay: .56s
                }

                .call-agent-page .wave span:nth-child(9) {
                    animation-delay: .64s
                }

                .call-agent-page .wave span:nth-child(10) {
                    animation-delay: .72s
                }

                .call-agent-page .wave span:nth-child(11) {
                    animation-delay: .80s
                }

                .call-agent-page .wave span:nth-child(12) {
                    animation-delay: .88s
                }

        .call-agent-page .terminal__foot {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 14px;
            padding-top: 12px;
            border-top: 1px solid rgba(255,255,255,.10);
            font-weight: 900;
        }

        /* ===================== IMPACT ===================== */
        .call-agent-page .impact {
            padding: 86px 0;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            border-top: 1px solid rgba(15,23,42,.06);
        }

        .call-agent-page .impact__inner {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 40px;
            align-items: center
        }

        .call-agent-page .impact__copy h2 {
            margin: 14px 0 10px;
            font-size: 40px;
            font-weight: 950;
            line-height: 1.1
        }

        .call-agent-page .impact__copy p {
            margin: 0 0 18px;
            color: var(--muted);
            line-height: 1.7;
            max-width: 560px
        }

        .call-agent-page .stats {
            display: grid;
            grid-template-columns: repeat(2, minmax(0,1fr));
            gap: 14px;
            margin: 22px 0 22px;
        }

        .call-agent-page .stat {
            background: #fff;
            border: 1px solid rgba(15,23,42,.08);
            border-radius: 18px;
            padding: 14px 14px;
            box-shadow: 0 10px 24px rgba(0,0,0,.08);
        }

        .call-agent-page .stat__v {
            font-weight: 950;
            font-size: 22px;
            line-height: 1;
            margin-bottom: 6px
        }

        .call-agent-page .stat__k {
            font-weight: 900;
            font-size: 13px;
            color: var(--orange);
            text-transform: uppercase;
            letter-spacing: .04em
        }

        .call-agent-page .stat__d {
            margin-top: 6px;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.55
        }

        /* Device mock */
        .call-agent-page .device {
            position: relative;
            border-radius: 28px;
            padding: 10px;
            background: linear-gradient(180deg, rgba(15,23,42,.08), rgba(15,23,42,.02));
            box-shadow: 0 35px 80px rgba(0,0,0,.18);
        }

        .call-agent-page .device__screen {
            border-radius: 22px;
            background: linear-gradient(180deg,#0b1220, #070b14);
            color: #e5e7eb;
            border: 1px solid rgba(255,255,255,.08);
            overflow: hidden;
        }

        .call-agent-page .device__top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 14px;
            border-bottom: 1px solid rgba(255,255,255,.08);
        }

        .call-agent-page .sys {
            display: flex;
            gap: 10px;
            align-items: center;
            font-weight: 900
        }

        .call-agent-page .sys__badge {
            width: 30px;
            height: 30px;
            border-radius: 12px;
            display: grid;
            place-items: center;
            background: rgba(255,108,30,.12);
            border: 1px solid rgba(255,108,30,.25);
            color: #fff;
            animation: ca-badgePulse 2.2s ease-in-out infinite;
        }

            .call-agent-page .sys__badge svg {
                width: 16px;
                height: 16px
            }

        .call-agent-page .live {
            font-size: 11.5px;
            font-weight: 950;
            padding: 8px 10px;
            border-radius: 999px;
            background: rgba(34,197,94,.12);
            border: 1px solid rgba(34,197,94,.22);
            color: #22c55e;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .call-agent-page .pulse {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #22c55e;
            box-shadow: 0 0 0 0 rgba(34,197,94,.35);
            animation: ca-pulse2 1.3s infinite;
        }

        .call-agent-page .meters {
            padding: 14px 14px;
            display: flex;
            flex-direction: column;
            gap: 12px
        }

        .call-agent-page .meter__row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 11.5px;
            font-weight: 900;
            opacity: .9
        }

        .call-agent-page .meter__bar {
            width: 100%;
            height: 10px;
            border-radius: 999px;
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.08);
            overflow: hidden;
            margin-top: 8px;
        }

            .call-agent-page .meter__bar span {
                display: block;
                height: 100%;
                width: 0%;
                background: linear-gradient(90deg,var(--orange),var(--orange2));
                border-radius: 999px;
                transition: width .9s cubic-bezier(.2,1,.2,1);
            }

        .call-agent-page .impactbox {
            margin: 14px;
            border-radius: 18px;
            background: linear-gradient(90deg,var(--orange),var(--orange2));
            color: #fff;
            padding: 16px 16px;
            box-shadow: 0 18px 45px rgba(255,108,30,.25);
        }

        .call-agent-page .impactbox__t {
            font-size: 12px;
            font-weight: 950;
            opacity: .9
        }

        .call-agent-page .impactbox__v {
            font-size: 20px;
            font-weight: 950;
            margin-top: 8px
        }

        .call-agent-page .impactbox__s {
            font-size: 12.5px;
            opacity: .85;
            margin-top: 6px
        }

        /* ===================== HOW IT WORKS ===================== */
        .call-agent-page .how {
            padding: 86px 0;
            background: #fff
        }

        .call-agent-page .how__inner {
            display: grid;
            grid-template-columns: .95fr 1.05fr;
            gap: 38px;
            align-items: flex-start
        }

        .call-agent-page .how__side {
            position: sticky;
            top: 90px
        }

            .call-agent-page .how__side h2 {
                margin: 14px 0 10px;
                font-size: 40px;
                font-weight: 950;
                line-height: 1.1
            }

            .call-agent-page .how__side p {
                margin: 0 0 18px;
                color: var(--muted);
                line-height: 1.7;
                max-width: 520px
            }

        .call-agent-page .how__steps {
            display: flex;
            flex-direction: column;
            gap: 14px
        }

        .call-agent-page .step {
            display: flex;
            gap: 14px;
            padding: 18px 18px;
            border-radius: 20px;
            border: 1px solid rgba(15,23,42,.08);
            background: linear-gradient(180deg,#ffffff, #fafafa);
            box-shadow: 0 12px 28px rgba(0,0,0,.08);
        }

        .call-agent-page .step__n {
            width: 48px;
            height: 48px;
            border-radius: 18px;
            display: grid;
            place-items: center;
            font-weight: 950;
            font-size: 16px;
            color: var(--orange);
            background: rgba(255,108,30,.10);
            border: 1px solid rgba(255,108,30,.18);
            flex: 0 0 auto;
        }

        .call-agent-page .step__c h3 {
            margin: 2px 0 8px;
            font-weight: 950
        }

        .call-agent-page .step__c p {
            margin: 0 0 10px;
            color: var(--muted);
            font-size: 14px;
            line-height: 1.65
        }

        .call-agent-page .line {
            display: inline-block;
            width: 64px;
            height: 3px;
            border-radius: 999px;
            background: linear-gradient(90deg,var(--orange),transparent);
            margin-left: 8px;
            transform: translateY(-3px);
        }

        .call-agent-page .tags {
            display: flex;
            gap: 8px;
            flex-wrap: wrap
        }

            .call-agent-page .tags span {
                font-size: 12px;
                font-weight: 900;
                padding: 7px 10px;
                border-radius: 999px;
                background: rgba(15,23,42,.04);
                border: 1px solid rgba(15,23,42,.08);
                color: var(--muted);
            }

        /* ===================== CTA ===================== */
        .call-agent-page .cta {
            position: relative;
            padding: 86px 0;
            background: #060913;
            color: #fff;
            overflow: hidden;
        }

        .call-agent-page .cta__bg {
            position: absolute;
            inset: 0;
            background: radial-gradient(900px 420px at 50% 30%, rgba(255,108,30,.22), transparent 60%), linear-gradient(180deg,#070b14, #050712);
            opacity: 1;
        }

        .call-agent-page .cta__inner {
            position: relative;
            text-align: center;
            max-width: 820px;
            margin: 0 auto
        }

            .call-agent-page .cta__inner h2 {
                margin: 0 0 10px;
                font-size: 40px;
                font-weight: 950;
                line-height: 1.1
            }

            .call-agent-page .cta__inner p {
                margin: 0 auto 22px;
                max-width: 640px;
                color: rgba(255,255,255,.78);
                line-height: 1.75
            }

        .call-agent-page .cta__actions {
            display: flex;
            gap: 12px;
            justify-content: center;
            flex-wrap: wrap
        }

        /* ===================== MODAL ===================== */
        .call-agent-page .modal {
            position: fixed;
            inset: 0;
            display: none;
            z-index: 99999;
        }

            .call-agent-page .modal.is-open {
                display: block
            }

        .call-agent-page .modal__backdrop {
            position: absolute;
            inset: 0;
            background: rgba(2,6,23,.55);
            backdrop-filter: blur(6px);
            animation: ca-backdropIn .25s ease both;
        }

        .call-agent-page .modal__panel {
            position: relative;
            width: min(560px, 92vw);
            margin: 8vh auto 0;
            background: #fff;
            border-radius: 22px;
            border: 1px solid rgba(15,23,42,.10);
            box-shadow: 0 40px 120px rgba(0,0,0,.30);
            padding: 18px 18px;
            animation: ca-modalIn .25s ease both;
        }

        .call-agent-page .modal__close {
            position: absolute;
            top: 12px;
            right: 14px;
            width: 36px;
            height: 36px;
            border-radius: 14px;
            border: 1px solid rgba(15,23,42,.10);
            background: rgba(15,23,42,.03);
            cursor: pointer;
            font-size: 22px;
            line-height: 1;
        }

        .call-agent-page .modal__title {
            margin: 8px 0 6px;
            font-size: 22px;
            font-weight: 950
        }

        .call-agent-page .modal__sub {
            margin: 0 0 14px;
            color: var(--muted)
        }

        .call-agent-page .form {
            display: flex;
            flex-direction: column;
            gap: 12px
        }

        .call-agent-page .form__row {
            display: flex;
            flex-direction: column;
            gap: 8px
        }

            .call-agent-page .form__row label {
                font-weight: 900;
                color: var(--text);
                font-size: 13px
            }

            .call-agent-page .form__row input,
            .call-agent-page .form__row textarea {
                border: 1px solid rgba(15,23,42,.10);
                border-radius: 14px;
                padding: 12px 12px;
                outline: none;
                background: #fff;
                transition: border-color .2s ease, box-shadow .2s ease;
            }

                .call-agent-page .form__row input:focus,
                .call-agent-page .form__row textarea:focus {
                    border-color: rgba(255,108,30,.45);
                    box-shadow: 0 0 0 4px rgba(255,108,30,.12);
                }

        .call-agent-page .form__note {
            margin-top: 8px;
            font-weight: 900;
            color: var(--green)
        }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 980px) {
    .call-agent-page .hero__inner {
        grid-template-columns: 1fr;
        gap: 26px
    }

    .call-agent-page .hero__visual {
        min-height: 360px
    }

    .call-agent-page .float-card--a, .call-agent-page .float-card--b, .call-agent-page .float-card--c {
        left: 0;
        right: 0;
        margin: 0 auto
    }

    .call-agent-page .float-card--a {
        top: 0
    }

    .call-agent-page .float-card--b {
        top: 120px
    }

    .call-agent-page .float-card--c {
        top: 250px
    }

    .call-agent-page .grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .call-agent-page .aiblocks__inner {
        grid-template-columns: 1fr
    }

    .call-agent-page .impact__inner {
        grid-template-columns: 1fr
    }

    .call-agent-page .how__inner {
        grid-template-columns: 1fr
    }

    .call-agent-page .how__side {
        position: relative;
        top: auto
    }
}

@media (max-width: 640px) {
    .call-agent-page .hero__copy h1 {
        font-size: 42px
    }

    .call-agent-page .section-head h2 {
        font-size: 28px
    }

    .call-agent-page .impact__copy h2,
    .call-agent-page .how__side h2,
    .call-agent-page .cta__inner h2 {
        font-size: 32px
    }

    .call-agent-page .grid {
        grid-template-columns: 1fr
    }

    .call-agent-page .stats {
        grid-template-columns: 1fr
    }
}

/* ===================== KEYFRAMES (scoped names to avoid Tailwind collisions) ===================== */
@keyframes ca-heroBgShift {
    0%,100% {
        filter: hue-rotate(0deg)
    }

    50% {
        filter: hue-rotate(-10deg)
    }
}

@keyframes ca-heroIn {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes ca-gradShift {
    0%,100% {
        filter: saturate(1)
    }

    50% {
        filter: saturate(1.2)
    }
}

@keyframes ca-pillPop {
    0% {
        opacity: 0;
        transform: translateY(6px) scale(.98)
    }

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

@keyframes ca-ping {
    0% {
        transform: scale(1);
        opacity: 1
    }

    70% {
        transform: scale(1.8);
        opacity: .2
    }

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

@keyframes ca-floatA {
    0%,100% {
        transform: translateY(0)
    }

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

@keyframes ca-floatB {
    0%,100% {
        transform: translateY(0)
    }

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

@keyframes ca-floatC {
    0%,100% {
        transform: translateY(0)
    }

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

@keyframes ca-badgePulse {
    0%,100% {
        transform: translateY(0)
    }

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

@keyframes ca-barsAnim {
    0% {
        background-position: 0% 0
    }

    100% {
        background-position: 200% 0
    }
}

@keyframes ca-glowPulse {
    0%,100% {
        opacity: .75
    }

    50% {
        opacity: 1
    }
}

@keyframes ca-arrowBounce {
    0%,100% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(4px)
    }
}

@keyframes ca-wave {
    0%,100% {
        height: 8px;
        opacity: .55
    }

    50% {
        height: 22px;
        opacity: 1
    }
}

@keyframes ca-pulse2 {
    0% {
        box-shadow: 0 0 0 0 rgba(34,197,94,.35)
    }

    70% {
        box-shadow: 0 0 0 10px rgba(34,197,94,0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34,197,94,0)
    }
}

@keyframes ca-backdropIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes ca-modalIn {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(.98)
    }

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

/* 1) Hero fills viewport height */
.call-agent-page .hero {
    min-height: calc(100vh - 90px); /* 90px = your header height (adjust if needed) */
    display: flex;
    align-items: center;
    padding: 110px 0 80px; /* keep your spacing */
}

.call-agent-page .hero__inner {
    width: 100%;
}

/* 2) Move “Order Sent” card lower */
.call-agent-page .float-card--c {
    top: 340px; /* was 300px in the responsive stack; on desktop this will push it down */
}

/* If you want it ONLY on desktop (recommended) */
@media (min-width: 981px) {
    .call-agent-page .float-card--c {
        top: 330px; /* adjust 320-380 until perfect */
    }
}
/* ===== Fix CTA section title visibility ===== */
.call-agent-page .cta h2 {
    color: #ffffff !important;
    text-shadow: 0 8px 30px rgba(0,0,0,.55);
    font-weight: 950;
}

/* Make paragraph brighter too */
.call-agent-page .cta p {
    color: rgba(255,255,255,.90);
}

/* Slightly reduce overlay darkness if needed */
.call-agent-page .cta__bg {
    opacity: .85; /* was probably darker */
}