:root {
            --mx-navy: #08111f;
            --mx-navy-2: #0d192b;
            --mx-blue: #2563eb;
            --mx-blue-dark: #1d4ed8;
            --mx-cyan: #38bdf8;
            --mx-white: #ffffff;
            --mx-bg: #f7f9fc;
            --mx-text: #111827;
            --mx-muted: #64748b;
            --mx-border: #e4eaf2;
            --mx-shadow: 0 20px 55px rgba(15, 23, 42, .10);
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            color: var(--mx-text);
            background: #fff;
            font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
                         "Segoe UI", sans-serif;
            -webkit-font-smoothing: antialiased;
        }

        main {
            overflow: hidden;
        }

        .container {
            max-width: 1240px;
        }

        #footer-placeholder {
            margin-top: 0;
        }

        .mx-btn {
            min-height: 48px;
            padding: 0 21px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border-radius: 10px;
            text-decoration: none;
            font-size: .94rem;
            font-weight: 750;
            transition: .2s ease;
        }

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

        .mx-btn-light {
            background: #fff;
            color: var(--mx-navy);
            border: 1px solid #fff;
            box-shadow: 0 10px 25px rgba(0, 0, 0, .12);
        }

        .mx-btn-outline {
            color: #fff;
            border: 1px solid rgba(255, 255, 255, .25);
            background: rgba(255, 255, 255, .06);
            backdrop-filter: blur(10px);
        }

        .mx-btn-outline:hover {
            color: #fff;
            background: rgba(255, 255, 255, .12);
        }

        /* HERO */

        .service-hero {
            position: relative;
            overflow: hidden;
            padding: 42px 0 58px;
            color: #fff;
            background:
                radial-gradient(
                    circle at 8% 10%,
                    rgba(56, 189, 248, .18),
                    transparent 28%
                ),
                radial-gradient(
                    circle at 90% 10%,
                    rgba(37, 99, 235, .24),
                    transparent 30%
                ),
                linear-gradient(
                    135deg,
                    #07111f 0%,
                    #0b1728 55%,
                    #0c1d35 100%
                );
        }

        .service-hero::before {
            content: "";
            position: absolute;
            inset: 0;
            opacity: .08;
            background-image:
                linear-gradient(
                    rgba(255,255,255,.08) 1px,
                    transparent 1px
                ),
                linear-gradient(
                    90deg,
                    rgba(255,255,255,.08) 1px,
                    transparent 1px
                );
            background-size: 42px 42px;
        }

        .hero-inner {
            position: relative;
            z-index: 2;
        }

        .hero-row {
            align-items: center;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 12px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,.15);
            background: rgba(255,255,255,.07);
            color: #dbeafe;
            font-size: .79rem;
            font-weight: 750;
        }

        .hero-badge i {
            color: #7dd3fc;
        }

        .hero-title {
            max-width: 660px;
            margin: 15px 0 0;
            font-size: clamp(2.35rem, 4.1vw, 4rem);
            line-height: 1.01;
            font-weight: 850;
            letter-spacing: -.048em;
        }

        .hero-title .highlight {
            background: linear-gradient(90deg, #7dd3fc, #60a5fa);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .hero-description {
            max-width: 610px;
            margin: 16px 0 0;
            color: #cbd5e1;
            font-size: 1rem;
            line-height: 1.65;
        }

        .hero-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 11px;
            margin-top: 21px;
        }

        .hero-trust {
            display: flex;
            flex-wrap: wrap;
            gap: 19px;
            margin-top: 22px;
        }

        .hero-trust-item {
            display: flex;
            align-items: center;
            gap: 7px;
            color: #dbeafe;
            font-size: .84rem;
            font-weight: 600;
        }

        .hero-trust-item i {
            color: #7dd3fc;
        }

        /* HERO CARD */

        .hero-visual {
            max-width: 430px;
            margin-left: auto;
            padding: 25px;
            border: 1px solid rgba(255,255,255,.13);
            border-radius: 22px;
            background: rgba(255,255,255,.06);
            box-shadow: 0 25px 60px rgba(0,0,0,.25);
            backdrop-filter: blur(12px);
        }

        .visual-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .visual-icon {
            width: 55px;
            height: 55px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 15px;
            background: linear-gradient(135deg, #2563eb, #38bdf8);
            font-size: 1.5rem;
        }

        .visual-status {
            padding: 6px 10px;
            border-radius: 999px;
            background: rgba(34,197,94,.13);
            color: #bbf7d0;
            font-size: .72rem;
            font-weight: 800;
        }

        .visual-title {
            font-size: 1.35rem;
            font-weight: 820;
            margin-bottom: 7px;
        }

        .visual-copy {
            color: #cbd5e1;
            font-size: .88rem;
            line-height: 1.55;
        }

        .visual-list {
            display: grid;
            gap: 9px;
            margin-top: 20px;
        }

        .visual-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 11px 12px;
            border-radius: 10px;
            background: rgba(255,255,255,.06);
            color: #e2e8f0;
            font-size: .85rem;
        }

        .visual-item i {
            color: #7dd3fc;
        }

        /* STATS */

        .stats-wrapper {
            position: relative;
            z-index: 5;
            margin-top: -27px;
        }

        .stats-box {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            overflow: hidden;
            background: #fff;
            border: 1px solid var(--mx-border);
            border-radius: 14px;
            box-shadow: 0 12px 35px rgba(15,23,42,.09);
        }

        .stat-item {
            position: relative;
            padding: 18px;
            text-align: center;
        }

        .stat-item:not(:last-child)::after {
            content: "";
            position: absolute;
            right: 0;
            top: 25%;
            width: 1px;
            height: 50%;
            background: var(--mx-border);
        }

        .stat-icon {
            width: 37px;
            height: 37px;
            margin: 0 auto 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 9px;
            background: #eff6ff;
            color: var(--mx-blue);
        }

        .stat-title {
            color: var(--mx-navy);
            font-size: .91rem;
            font-weight: 800;
        }

        .stat-text {
            margin-top: 2px;
            color: var(--mx-muted);
            font-size: .78rem;
        }

        /* SECTIONS */

        .mx-section {
            padding: 72px 0;
        }

        .mx-section-soft {
            background: var(--mx-bg);
        }

        .section-label {
            color: var(--mx-blue);
            text-transform: uppercase;
            font-size: .72rem;
            font-weight: 850;
            letter-spacing: .12em;
        }

        .section-title {
            max-width: 760px;
            margin: 9px auto 0;
            color: var(--mx-navy);
            font-size: clamp(1.9rem, 3.5vw, 3rem);
            font-weight: 850;
            line-height: 1.08;
            letter-spacing: -.04em;
        }

        .section-description {
            max-width: 700px;
            margin: 14px auto 0;
            color: var(--mx-muted);
            font-size: 1rem;
            line-height: 1.7;
        }

        .services-grid {
            margin-top: 38px;
        }

     /* SERVICE CARDS - slightly shorter */
.service-card {
    position: relative;
    height: 100%;
    padding: 17px 20px; /* was 21px 22px */
    overflow: hidden;

    border: 1px solid var(--mx-border);
    border-radius: 16px;
    background: #fff;

    box-shadow: var(--mx-shadow-sm);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

        .service-card::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg,var(--mx-blue),var(--mx-cyan));
            opacity: 0;
            transition: .22s;
        }

        .service-card:hover {
            transform: translateY(-5px);
            border-color: #bfdbfe;
            box-shadow: var(--mx-shadow);
        }

        .service-card:hover::before {
            opacity: 1;
        }

   /* Slightly smaller icon */
.service-icon {
    width: 46px; /* was 50px */
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;
    color: var(--mx-blue);

    background: linear-gradient(
        135deg,
        #dbeafe,
        #ecfeff
    );

    font-size: 1.18rem;
}

        /* Less space above/below heading */
.service-card h3 {
    margin: 14px 0 6px;

    color: var(--mx-navy);

    font-size: 1.12rem;
    font-weight: 820;
}

      /* Slightly tighter paragraph */
.service-card p {
    margin: 0;

    color: var(--mx-muted);

    font-size: .91rem;
    line-height: 1.52;
}

        /* SPLIT */

        .split-row {
            align-items: center;
        }

        .split-title {
            max-width: 590px;
            margin-top: 9px;
            color: var(--mx-navy);
            font-size: clamp(2rem,3.5vw,3rem);
            line-height: 1.08;
            font-weight: 850;
            letter-spacing: -.04em;
        }

        .split-copy {
            max-width: 600px;
            margin-top: 16px;
            color: var(--mx-muted);
            font-size: 1rem;
            line-height: 1.7;
        }

        .benefit-list {
            display: grid;
            gap: 14px;
            margin-top: 24px;
        }

        .benefit-item {
            display: flex;
            gap: 12px;
            align-items: flex-start;
        }

        .benefit-check {
            flex: 0 0 auto;
            width: 35px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 9px;
            color: var(--mx-blue);
            background: #dbeafe;
        }

        .benefit-item h4 {
            margin: 0 0 3px;
            color: var(--mx-navy);
            font-size: .98rem;
            font-weight: 800;
        }

        .benefit-item p {
            margin: 0;
            color: var(--mx-muted);
            font-size: .89rem;
            line-height: 1.5;
        }

        .feature-panel {
            padding: 35px;
            border-radius: 20px;
            color: #fff;
            background:
                radial-gradient(
                    circle at 100% 0%,
                    rgba(56,189,248,.20),
                    transparent 35%
                ),
                linear-gradient(145deg,var(--mx-navy),#111f34);
            box-shadow: 0 22px 50px rgba(15,23,42,.16);
        }

        .feature-panel-label {
            color: #7dd3fc;
            font-size: .72rem;
            font-weight: 850;
            text-transform: uppercase;
            letter-spacing: .12em;
        }

        .feature-panel h2 {
            margin-top: 8px;
            font-size: clamp(1.6rem,2.6vw,2.2rem);
            font-weight: 850;
        }

        .feature-panel p {
            margin-top: 11px;
            color: #cbd5e1;
            font-size: .94rem;
            line-height: 1.65;
        }

        .feature-list {
            padding: 0;
            margin: 20px 0 0;
            list-style: none;
        }

        .feature-list li {
            display: flex;
            gap: 10px;
            padding: 10px 0;
            border-bottom: 1px solid rgba(255,255,255,.08);
            color: #e2e8f0;
            font-size: .91rem;
        }

        .feature-list li:last-child {
            border-bottom: 0;
        }

        .feature-list i {
            color: #7dd3fc;
        }

        /* CTA */

        .cta-section {
            padding: 15px 0 72px;
        }

        .cta-box {
            padding: 50px 35px;
            text-align: center;
            border-radius: 22px;
            color: #fff;
            background:
                radial-gradient(
                    circle at 10% 10%,
                    rgba(255,255,255,.14),
                    transparent 25%
                ),
                linear-gradient(135deg,#1d4ed8,#2563eb 50%,#0ea5e9);
            box-shadow: 0 18px 45px rgba(37,99,235,.20);
        }

        .cta-small {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 11px;
            border-radius: 999px;
            background: rgba(255,255,255,.13);
            border: 1px solid rgba(255,255,255,.17);
            font-size: .77rem;
            font-weight: 750;
        }

        .cta-box h2 {
            max-width: 760px;
            margin: 14px auto 0;
            font-size: clamp(1.9rem,3.5vw,3rem);
            font-weight: 850;
            line-height: 1.08;
            letter-spacing: -.04em;
        }

        .cta-box p {
            max-width: 650px;
            margin: 13px auto 0;
            color: #e0f2fe;
            font-size: .98rem;
            line-height: 1.65;
        }

        .cta-actions {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 11px;
            margin-top: 22px;
        }

        @media (max-width: 991px) {
            .container {
                max-width: 94%;
            }

            .hero-left {
                text-align: center;
            }

            .hero-title,
            .hero-description {
                margin-left: auto;
                margin-right: auto;
            }

            .hero-buttons,
            .hero-trust {
                justify-content: center;
            }

            .hero-visual {
                margin: 30px auto 0;
            }

            .stats-box {
                grid-template-columns: repeat(2,1fr);
            }

            .split-row {
                row-gap: 40px;
            }
        }

        @media (max-width: 767px) {
            .service-hero {
                padding: 31px 0 49px;
            }

            .hero-title {
                font-size: clamp(2rem,9.5vw,2.8rem);
            }

            .hero-description {
                font-size: .93rem;
            }

            .hero-buttons {
                flex-direction: column;
            }

            .hero-buttons .mx-btn {
                width: 100%;
            }

            .hero-trust {
                justify-content: center;
                gap: 9px 16px;
            }

            .hero-visual {
                padding: 20px;
            }

            .stats-box {
                grid-template-columns: repeat(2,1fr);
            }

            .stat-item {
                padding: 15px 10px;
            }

            .mx-section {
                padding: 55px 0;
            }

            .service-card {
                padding: 24px 21px;
            }

            .feature-panel {
                padding: 28px 21px;
            }

            .cta-section {
                padding: 5px 0 55px;
            }

            .cta-box {
                padding: 38px 20px;
            }

            .cta-actions {
                flex-direction: column;
            }

            .cta-actions .mx-btn {
                width: 100%;
            }
        }