:root {

            --blue: #0b2f72;
            --blue-2: #1f5ed6;
            --blue-3: #4d83ef;

            --blue-soft: #eef4ff;

            --dark: #101828;
            --text: #344054;
            --muted: #667085;

            --border: #e4e7ec;

            --light: #f8fafc;
            --white: #ffffff;

            --google-yellow: #fbbc04;

            --radius-xl: 30px;
            --radius-lg: 22px;
            --radius-md: 14px;

            --shadow-sm:
                0 12px 30px rgba(16, 24, 40, 0.06);

            --shadow-lg:
                0 30px 80px rgba(16, 24, 40, 0.14);

            --container: 1380px;

        }


        * {

            box-sizing: border-box;
            margin: 0;
            padding: 0;

        }


        html {

            scroll-behavior: smooth;
            scroll-padding-top: 92px;

        }


        body {

            font-family: "Inter", sans-serif;

            background: #ffffff;

            color: var(--dark);

            line-height: 1.6;

            overflow-x: hidden;

            -webkit-font-smoothing: antialiased;

        }


        body.menu-open {

            overflow: hidden;

        }


        img {

            display: block;
            max-width: 100%;

        }


        a {

            color: inherit;
            text-decoration: none;

        }


        button {

            font: inherit;

        }


        .container {

            width: min(
                calc(100% - 40px),
                var(--container)
            );

            margin-inline: auto;

        }



        /* =========================================
           BUTTONS
        ========================================= */


        .btn {

            position: relative;

            overflow: hidden;

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 10px;

            min-height: 54px;

            padding: 0 24px;

            border: 1px solid transparent;

            border-radius: 13px;

            font-weight: 800;

            font-size: 14px;

            transition:

                transform .25s ease,

                box-shadow .25s ease,

                background-color .25s ease,

                border-color .25s ease;

        }


        .btn::after {

            content: "";

            position: absolute;

            top: -50%;

            left: -70%;

            width: 40%;

            height: 200%;

            background:
                rgba(255,255,255,.22);

            transform:
                rotate(20deg);

            transition:
                left .45s ease;

        }


        .btn:hover::after {

            left: 130%;

        }


        .btn:hover {

            transform:
                translateY(-2px);

        }


        .btn-primary {

            background:
                var(--blue);

            color:
                white;

            box-shadow:
                0 12px 30px
                rgba(11,47,114,.18);

        }


        .btn-primary:hover {

            background:
                #071f50;

            box-shadow:
                0 16px 38px
                rgba(11,47,114,.25);

        }


        .btn-secondary {

            color:
                var(--dark);

            background:
                white;

            border-color:
                #cfd5df;

        }


        .btn-secondary:hover {

            border-color:
                var(--blue);

            color:
                var(--blue);

        }



        /* =========================================
           HEADER
        ========================================= */


        .header {

            position: sticky;

            top: 0;

            z-index: 1000;

            background:
                #ffffff;

            border-bottom:
                1px solid
                rgba(228,231,236,.8);

        }


        .nav {

            min-height: 72px;

            display: flex;

            align-items: center;

            justify-content:
                space-between;

            gap: 30px;

        }


        .logo {

            flex-shrink: 0;

            display: inline-flex;

            transition: transform .3s ease;

        }


        .logo:hover {

            transform: scale(1.05);

        }


        .logo img {

            width: 195px;

            height: auto;

        }


        .nav-links {

            display: flex;

            align-items: center;

            gap: 30px;

        }


        .nav-links a {

            position: relative;

            font-size: 13px;

            font-weight: 800;

            text-transform:
                uppercase;

        }


        .nav-links a::after {

            content: "";

            position: absolute;

            left: 0;

            bottom: -7px;

            width: 0;

            height: 2px;

            background:
                var(--blue-2);

            transition:
                width .25s ease;

        }


        .nav-links a:hover::after {

            width: 100%;

        }


        .nav-links a.is-active {

            color:
                var(--blue-2);

        }


        .nav-links a.is-active::after {

            width: 100%;

        }



        /* =========================================
           MOBILE BUTTON
        ========================================= */


        .menu-btn {

            display: none;

            width: 48px;

            height: 48px;

            border:
                1px solid var(--border);

            border-radius:
                12px;

            background:
                white;

            cursor:
                pointer;

            align-items:
                center;

            justify-content:
                center;

        }


        .burger {

            width:
                22px;

            display:
                grid;

            gap:
                5px;

        }


        .burger span {

            height:
                2px;

            background:
                var(--dark);

            border-radius:
                2px;

            transition:
                .25s ease;

        }


        .menu-btn.active
        .burger span:nth-child(1) {

            transform:
                translateY(7px)
                rotate(45deg);

        }


        .menu-btn.active
        .burger span:nth-child(2) {

            opacity:
                0;

        }


        .menu-btn.active
        .burger span:nth-child(3) {

            transform:
                translateY(-7px)
                rotate(-45deg);

        }



        /* =========================================
           MOBILE MENU
        ========================================= */


        .mobile-menu {

            position:
                fixed;

            inset:
                0;

            z-index:
                999;

            display:
                flex;

            flex-direction:
                column;

            justify-content:
                center;

            background:
                #ffffff;

            padding:
                105px 26px 40px;

            opacity:
                0;

            visibility:
                hidden;

            transform:
                translateY(-10px);

            transition:

                opacity .25s ease,

                visibility .25s ease,

                transform .25s ease;

        }


        .mobile-menu.active {

            opacity:
                1;

            visibility:
                visible;

            transform:
                translateY(0);

        }


        .mobile-menu nav {

            display:
                grid;

            gap:
                4px;

        }


        .mobile-menu nav a {

            font-family:
                "Manrope",
                sans-serif;

            font-size:
                clamp(
                    19px,
                    5vw,
                    26px
                );

            font-weight:
                800;

            padding:
                12px 0;

            border-bottom:
                1px solid
                var(--border);

            display: flex;
            align-items: center;
            gap: 14px;

            opacity: 0;
            transform: translateX(-16px);
            transition: opacity .35s ease, transform .35s ease;

        }


        .mm-num {

            font-family: "Inter", sans-serif;
            font-size: 13px;
            font-weight: 700;
            color: var(--blue-3);
            min-width: 26px;

        }


        .mobile-menu.active nav a {

            opacity: 1;
            transform: translateX(0);

        }


        .mobile-menu.active nav a:nth-child(1) { transition-delay: .05s; }
        .mobile-menu.active nav a:nth-child(2) { transition-delay: .10s; }
        .mobile-menu.active nav a:nth-child(3) { transition-delay: .15s; }
        .mobile-menu.active nav a:nth-child(4) { transition-delay: .20s; }
        .mobile-menu.active nav a:nth-child(5) { transition-delay: .25s; }
        .mobile-menu.active nav a:nth-child(6) { transition-delay: .30s; }
        .mobile-menu.active nav a:nth-child(7) { transition-delay: .35s; }


        .mm-quick-contact {

            display: grid;
            gap: 10px;
            margin-top: 24px;
            padding-top: 20px;
            border-top: 1px solid var(--border);

        }


        .mm-quick-contact a {

            font-family: "Inter", sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: var(--muted);
            display: flex;
            align-items: center;
            gap: 10px;

        }


        .mobile-menu .btn {

            margin-top:
                28px;

            width:
                100%;

        }



        /* =========================================
           HERO
        ========================================= */


        .hero {

            position:
                relative;

            overflow:
                hidden;

            padding:
                75px 0 55px;

        }


        .hero::before {

            content:
                "";

            position:
                absolute;

            width:
                700px;

            height:
                700px;

            right:
                -250px;

            top:
                -320px;

            background:

                radial-gradient(

                    circle,

                    rgba(31,94,214,.13),

                    transparent 68%

                );

            pointer-events:
                none;

        }


        .hero-grid {

            position:
                relative;

            display:
                grid;

            grid-template-columns:
                .9fr 1.1fr;

            gap:
                60px;

            align-items:
                center;

        }


        .eyebrow {

            display:
                inline-flex;

            align-items:
                center;

            gap:
                8px;

            margin-bottom:
                24px;

            padding:
                8px 14px;

            border:
                1px solid
                #d5e3ff;

            border-radius:
                999px;

            background:
                var(--blue-soft);

            color:
                var(--blue-2);

            font-size:
                12px;

            font-weight:
                800;

            text-transform:
                uppercase;

            animation:
                fadeUp
                .7s ease both;

        }


        .eyebrow::before {

            content:
                "";

            width:
                8px;

            height:
                8px;

            border-radius:
                50%;

            background:
                var(--blue-2);

            box-shadow:
                0 0 0 5px
                rgba(31,94,214,.10);

        }


        h1,
        h2,
        h3 {

            font-family:
                "Manrope",
                sans-serif;

        }


        h1 {

            max-width:
                760px;

            font-size:
                clamp(
                    46px,
                    5.2vw,
                    80px
                );

            line-height:
                1.08;

            letter-spacing:
                -3px;

            font-weight:
                800;

            animation:
                fadeUp
                .85s
                .08s
                ease both;

        }


        .highlight {

            color:
                var(--blue-2);

        }


        .hero-text {

            max-width:
                640px;

            margin-top:
                28px;

            font-size:
                19px;

            color:
                var(--text);

            animation:
                fadeUp
                .85s
                .16s
                ease both;

        }


        .hero-actions {

            display:
                flex;

            flex-wrap:
                wrap;

            gap:
                14px;

            margin-top:
                34px;

            animation:
                fadeUp
                .85s
                .24s
                ease both;

        }


        .hero-trust {

            display:
                flex;

            flex-wrap:
                wrap;

            gap:
                18px;

            margin-top:
                28px;

            font-size:
                14px;

            font-weight:
                700;

            color:
                var(--muted);

            animation:
                fadeUp
                .85s
                .30s
                ease both;

        }


        .hero-trust span::before {

            content:
                "✓";

            margin-right:
                7px;

            color:
                var(--blue-2);

            font-weight:
                900;

        }



        /* =========================================
           HERO VISUAL
        ========================================= */


        .hero-visual {

            position:
                relative;

            min-height:
                610px;

            animation:
                heroVisual
                .9s
                .15s
                ease both;

        }


        .browser {

            position:
                relative;

            overflow:
                hidden;

            border-radius:
                28px;

            border:
                1px solid
                rgba(255,255,255,.14);

            background:
                #111;

            box-shadow:
                var(--shadow-lg);

            transform:

                perspective(1200px)

                rotateY(-4deg)

                rotateX(1deg);

            transition:
                transform .4s ease;

        }


        .browser:hover {

            transform:

                perspective(1200px)

                rotateY(-1deg)

                rotateX(0deg)

                translateY(-4px);

        }


        .browser-top {

            height:
                46px;

            display:
                flex;

            align-items:
                center;

            gap:
                7px;

            padding:
                0 18px;

            background:
                #f6f7f8;

        }


        .dot {

            width:
                10px;

            height:
                10px;

            border-radius:
                50%;

            background:
                #d2d6dc;

        }


        .browser-image {

            position:
                relative;

            aspect-ratio:
                16 / 10;

            background:

                linear-gradient(

                    90deg,

                    rgba(0,0,0,.54),

                    rgba(0,0,0,.08)

                ),
                var(--blue-soft);

        }


        .browser-content {

            position:
                absolute;

            left:
                7%;

            top:
                17%;

            width:
                48%;

            color:
                white;

            text-shadow:
                0 2px 12px rgba(0,0,0,.55);

        }


        .browser-content small {

            font-weight:
                700;

            text-transform:
                uppercase;

            opacity:
                .85;

        }


        .browser-content .hero-caption-title {

            margin:
                12px 0;

            font-size:
                clamp(
                    28px,
                    3vw,
                    46px
                );

            line-height:
                1.02;

        }


        .browser-content p {

            margin-bottom:
                20px;

            opacity:
                .9;

        }


        .mini-btn {

            display:
                inline-flex;

            padding:
                11px 16px;

            border-radius:
                8px;

            background:
                white;

            color:
                #111;

            font-size:
                12px;

            font-weight:
                800;

        }


        .phone {

            position:
                absolute;

            right:
                -18px;

            bottom:
                18px;

            width:
                175px;

            padding:
                3px;

            border-radius:
                18px;

            background:
                #0a0a0a;

            box-shadow:
                0 25px 55px
                rgba(0,0,0,.26);

            animation:
                float
                4.5s
                ease-in-out
                infinite;

        }


        .phone-screen {

            display:
                flex;

            flex-direction:
                column;

            justify-content:
                flex-end;

            overflow:
                hidden;

            aspect-ratio:
                9 / 18;

            padding:
                20px 14px;

            border-radius:
                15px;

            text-decoration:
                none;

            background:

                linear-gradient(
                    rgba(6,25,56,.15),
                    rgba(6,25,56,.75)
                ),
                var(--blue-soft);
            color:
                white;

        }


        .phone-screen strong {

            font-family:
                "Manrope",
                sans-serif;

            font-size:
                18px;

            line-height:
                1.05;

            text-shadow:
                0 2px 10px rgba(0,0,0,.6);

        }


        .price-badge {

            position:
                absolute;

            left:
                -28px;

            bottom:
                50px;

            width:
                175px;

            aspect-ratio:
                1;

            display:
                flex;

            flex-direction:
                column;

            justify-content:
                center;

            align-items:
                center;

            border:
                2px solid
                #cddcff;

            border-radius:
                50%;

            background:
                white;

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

            animation:
                floatBadge
                5.5s
                ease-in-out
                infinite;

        }


        .price-badge span {

            font-size:
                11px;

            font-weight:
                800;

            text-transform:
                uppercase;

            color:
                var(--muted);

        }


        .price-badge strong {

            margin:
                4px 0;

            font-size:
                53px;

            line-height:
                1;

            color:
                var(--blue-2);

        }


        .price-badge small {

            font-weight:
                700;

        }



        /* =========================================
           REVEAL ANIMATION
        ========================================= */


        .reveal {

            opacity:
                0;

            transform:
                translateY(35px);

            transition:

                opacity .7s ease,

                transform .7s ease;

        }


        .reveal.active {

            opacity:
                1;

            transform:
                translateY(0);

        }



        /* =========================================
           BENTO
        ========================================= */


        .bento {

            padding:
                25px 0 55px;

        }


        .bento-grid {

            display:
                grid;

            grid-template-columns:
                1fr 1.8fr 1fr 1fr;

            gap:
                16px;

        }


        .card {

            min-height:
                190px;

            padding:
                24px;

            border:
                1px solid
                var(--border);

            border-radius:
                var(--radius-lg);

            background:
                white;

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

            transition:

                transform .3s ease,

                box-shadow .3s ease;

        }


        .card:hover {

            transform:
                translateY(-6px);

            box-shadow:
                var(--shadow-lg);

        }


        .card-dark {

            color:
                white;

            border:
                0;

            background:

                linear-gradient(

                    145deg,

                    #0e2b65,

                    #061730

                );

        }


        .card-soft {

            background:

                linear-gradient(

                    145deg,

                    #f1f5ff,

                    #ffffff

                );

        }


        .icon {

            width:
                56px;

            height:
                56px;

            display:
                grid;

            place-items:
                center;

            border-radius:
                16px;

            background:
                linear-gradient(
                    135deg,
                    var(--blue-soft),
                    #dbe8ff
                );

            color:
                var(--blue-2);

            font-size:
                22px;

            font-weight:
                900;

        }


        .icon img {

            display:
                block;

            transition:
                transform .3s ease;

        }


        .card:hover .icon img,
        .service:hover .icon img {

            transform:
                scale(1.08) translateY(-2px);

        }


        .card-dark .icon {

            background:
                rgba(255,255,255,.10);

            color:
                white;

        }


        .card h3 {

            margin:
                16px 0 12px;

            font-size:
                26px;

            line-height:
                1.08;

        }


        .card p {

            color:
                var(--muted);

        }


        .card-dark p {

            color:
                #ced7e9;

        }


        .card-tags {

            display:
                flex;

            flex-wrap:
                wrap;

            gap:
                8px;

            margin-top:
                18px;

        }


        .card-tags span {

            font-size:
                11.5px;

            font-weight:
                700;

            color:
                var(--blue-2);

            background:
                var(--blue-soft);

            padding:
                5px 12px;

            border-radius:
                999px;

        }


        .projects {

            position:
                relative;

            overflow:
                hidden;

            min-height:
                225px;

            padding:
                30px 30px 22px;

            display:
                flex;

            flex-direction:
                column;

            justify-content:
                space-between;

            background:

                linear-gradient(
                    135deg,
                    var(--blue-soft),
                    #dbe8ff
                );

        }


        .sm-panel {

            display:
                flex;

            flex-direction:
                column;

            justify-content:
                space-between;

            height:
                100%;

        }


        .sm-slides {

            position:
                relative;

            min-height:
                150px;

        }


        .sm-slide {

            position:
                absolute;

            inset:
                0;

            display:
                flex;

            flex-direction:
                column;

            align-items:
                flex-start;

            justify-content:
                center;

            opacity:
                0;

            transform:
                translateY(14px);

            transition:

                opacity .6s ease,

                transform .6s ease;

            pointer-events:
                none;

        }


        .sm-slide.is-active {

            opacity:
                1;

            transform:
                translateY(0);

            pointer-events:
                auto;

        }


        .sm-visual {

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            width:
                42px;

            height:
                42px;

            margin-bottom:
                16px;

        }


        .sm-visual-code {

            border-radius:
                12px;

            background:
                white;

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

            animation:
                smPulse 3s ease-in-out infinite;

        }


        .sm-code-tag {

            font-family:
                "Manrope",
                monospace;

            font-size:
                15px;

            font-weight:
                800;

            color:
                var(--blue-2);

        }


        @keyframes smPulse {

            0%,
            100% {

                transform:
                    scale(1);

            }

            50% {

                transform:
                    scale(1.06);

            }

        }


        .sm-visual-lines {

            width:
                auto;

            height:
                auto;

            flex-direction:
                column;

            align-items:
                flex-start;

            gap:
                6px;

        }


        .sm-line {

            display:
                block;

            height:
                6px;

            border-radius:
                4px;

            background:
                var(--blue-3);

            opacity:
                .55;

        }


        .sm-line-1 {

            width:
                46px;

        }


        .sm-line-2 {

            width:
                68px;

            background:
                var(--blue-2);

            opacity:
                .8;

        }


        .sm-line-3 {

            width:
                34px;

        }


        .sm-cursor {

            display:
                inline-block;

            width:
                6px;

            height:
                6px;

            margin-top:
                2px;

            border-radius:
                2px;

            background:
                var(--blue);

            animation:
                smBlink 1s step-start infinite;

        }


        @keyframes smBlink {

            50% {

                opacity:
                    0;

            }

        }


        .sm-visual-gauge svg {

            display:
                block;

            transform:
                rotate(-90deg);

        }


        .sm-gauge-ring {

            stroke-dasharray:
                151;

            stroke-dashoffset:
                151;

        }


        .sm-slide.is-active .sm-gauge-ring {

            animation:
                smGauge 1.4s ease forwards .1s;

        }


        @keyframes smGauge {

            to {

                stroke-dashoffset:
                    28;

            }

        }


        .sm-visual-unique {

            width:
                auto;

            height:
                42px;

            gap:
                8px;

        }


        .sm-dot {

            display:
                inline-block;

            width:
                12px;

            height:
                12px;

            border-radius:
                50%;

            background:
                var(--blue-2);

            animation:
                smFloat 2.4s ease-in-out infinite;

        }


        .sm-dot-1 {

            background:
                var(--blue-3);

            animation-delay:
                0s;

        }


        .sm-dot-2 {

            width:
                16px;

            height:
                16px;

            background:
                var(--blue-2);

            animation-delay:
                .25s;

        }


        .sm-dot-3 {

            background:
                var(--blue);

            animation-delay:
                .5s;

        }


        @keyframes smFloat {

            0%,
            100% {

                transform:
                    translateY(0);

            }

            50% {

                transform:
                    translateY(-6px);

            }

        }


        .sm-title {

            font-size:
                19px;

            font-weight:
                800;

            color:
                var(--dark);

            margin:
                0 0 6px;

        }


        .sm-text {

            font-size:
                13.5px;

            line-height:
                1.5;

            color:
                var(--muted);

            max-width:
                195px;

        }


        .sm-decor {

            position:
                absolute;

            right:
                -8px;

            bottom:
                -6px;

            width:
                155px;

            pointer-events:
                none;

        }


        .sm-decor svg {

            display:
                block;

            width:
                100%;

            height:
                auto;

        }


        .sm-signature {

            font-size:
                12.5px;

            font-weight:
                800;

            letter-spacing:
                .12em;

            color:
                var(--blue-2);

            opacity:
                .75;

            padding-top:
                16px;

            border-top:
                1px solid
                rgba(31,94,214,.14);

        }


        @media
        (prefers-reduced-motion: reduce) {

            .sm-slide {

                transition:
                    none;

            }

            .sm-visual-code,
            .sm-cursor,
            .sm-dot {

                animation:
                    none;

            }

            .sm-gauge-ring {

                stroke-dashoffset:
                    28;

                animation:
                    none;

            }

        }


        .stats {

            display:
                flex;

            flex-direction:
                column;

            justify-content:
                center;

            gap:
                20px;

        }


        .stat + .stat {

            padding-top:
                18px;

            border-top:
                1px solid
                var(--border);

        }


        .stat strong {

            display:
                block;

            font-family:
                "Manrope",
                sans-serif;

            font-size:
                31px;

            color:
                var(--blue);

        }


        .stat-badge {

            display:
                flex;

            align-items:
                center;

            gap:
                10px;

        }


        .stat-badge-stacked {

            flex-direction:
                column;

            align-items:
                flex-start;

            gap:
                12px;

        }


        .stat-badge-icon {

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            flex-shrink:
                0;

            width:
                34px;

            height:
                34px;

            border-radius:
                50%;

            background:
                var(--blue-soft);

        }


        .stat-badge-icon-square {

            width:
                48px;

            height:
                48px;

            border-radius:
                14px;

            background:

                linear-gradient(
                    135deg,
                    var(--blue-soft),
                    #dbe8ff
                );

        }


        .stat-badge-text {

            font-size:
                19px;

            font-weight:
                800;

        }


        .stat-google-row {

            display:
                flex;

            align-items:
                center;

            gap:
                8px;

        }


        .stat-google-badge {

            display:
                inline-flex;

            align-items:
                center;

            justify-content:
                center;

            width:
                38px;

            height:
                38px;

            border-radius:
                50%;

            background:
                var(--light);

            border:
                1px solid
                var(--border);

        }


        .stat-google-badge img {

            display:
                block;

        }


        .stat-google-max {

            font-size:
                17px;

            font-weight:
                700;

            color:
                var(--muted);

        }


        .stat-stars {

            margin-top:
                4px;

            font-size:
                16px;

            letter-spacing:
                2px;

        }


        .stat-stars .star-full,
        .stat-stars .star-half {

            color:
                var(--google-yellow);

        }


        .stat-stars .star-empty {

            color:
                var(--border);

        }


        .stat span {

            font-size:
                12px;

            font-weight:
                800;

            text-transform:
                uppercase;

            color:
                var(--muted);

        }


        .stat-google-link {

            display:
                inline-block;

            font-size:
                12px;

            font-weight:
                800;

            text-transform:
                uppercase;

            color:
                var(--muted);

            text-decoration:
                none;

            border-bottom:
                1px solid
                transparent;

            transition:

                color .2s ease,

                border-color .2s ease;

        }


        .stat-google-link:hover {

            color:
                var(--blue-2);

            border-color:
                var(--blue-2);

        }



        .stat-stars + span {

            display:
                block;

            margin-top:
                6px;

        }



        /* =========================================
           SECTIONS
        ========================================= */


        .section {

            padding:
                100px 0;

        }


        .section-soft {

            background:
                var(--light);

        }


        #prestations {

            background:

                radial-gradient(
                    circle at 92% 8%,
                    rgba(31,94,214,.07),
                    transparent 28%
                ),
                #f8fafc;

        }


        #apropos {

            background:

                radial-gradient(
                    circle at 15% 50%,
                    rgba(31,94,214,.06),
                    transparent 32%
                ),
                linear-gradient(
                    135deg,
                    #f8fafc,
                    #f2f6fd
                );

        }


        .section-title {

            max-width:
                820px;

            margin-bottom:
                52px;

        }


        .section-title small {

            color:
                var(--blue-2);

            font-size:
                12px;

            font-weight:
                800;

            letter-spacing:
                .08em;

            text-transform:
                uppercase;

        }


        .section-title h2 {

            margin-top:
                10px;

            font-size:
                clamp(
                    38px,
                    4vw,
                    62px
                );

            line-height:
                1.04;

            letter-spacing:
                -2px;

        }


        .section-title p {

            max-width:
                650px;

            margin-top:
                18px;

            font-size:
                18px;

            color:
                var(--muted);

        }



        /* =========================================
           SERVICES
        ========================================= */


        .services-grid {

            display:
                grid;

            grid-template-columns:
                repeat(4,1fr);

            gap:
                18px;

        }


        .service {

            min-height:
                250px;

            display:
                flex;

            flex-direction:
                column;

            padding:
                28px;

            border:
                1px solid
                var(--border);

            border-radius:
                20px;

            background:
                white;

            transition:

                transform .3s ease,

                box-shadow .3s ease,

                border-color .3s ease;

        }


        .service:hover {

            transform:
                translateY(-7px);

            box-shadow:
                var(--shadow-lg);

            border-color:
                #c7d8fa;

        }


        .service h3 {

            margin:
                18px 0 10px;

            font-size:
                21px;

        }


        .service p {

            flex:
                1;

            font-size:
                15px;

            color:
                var(--muted);

        }


        .service-link {

            display:
                inline-flex;

            align-items:
                center;

            gap:
                6px;

            margin-top:
                18px;

            font-size:
                13.5px;

            font-weight:
                700;

            color:
                var(--blue-2);

        }


        .service-link span {

            display:
                inline-block;

            transition:
                transform .25s ease;

        }


        .service:hover .service-link span {

            transform:
                translateX(4px);

        }



        /* =========================================
           PORTFOLIO
        ========================================= */


        .portfolio-hero {

            padding:
                60px 0 20px;

        }


        .portfolio-breadcrumb {

            display:
                flex;

            align-items:
                center;

            gap:
                8px;

            font-size:
                13px;

            color:
                var(--muted);

            margin-bottom:
                24px;

        }


        .portfolio-breadcrumb a {

            color:
                var(--muted);

        }


        .portfolio-breadcrumb a:hover {

            color:
                var(--blue-2);

        }


        .portfolio-filters {

            display:
                flex;

            flex-wrap:
                wrap;

            gap:
                10px;

            margin-bottom:
                40px;

        }


        .portfolio-filter {

            padding:
                10px 20px;

            border-radius:
                999px;

            border:
                1px solid
                var(--border);

            background:
                white;

            color:
                var(--text);

            font-size:
                13.5px;

            font-weight:
                700;

            cursor:
                pointer;

            transition:

                background .2s ease,

                border-color .2s ease,

                color .2s ease;

        }


        .portfolio-filter:hover {

            border-color:
                var(--blue-3);

        }


        .portfolio-filter.is-active {

            background:
                var(--blue-2);

            border-color:
                var(--blue-2);

            color:
                white;

        }


        .portfolio-desc {

            margin-top:
                6px;

            font-size:
                13.5px;

            line-height:
                1.5;

            color:
                var(--muted);

        }


        .portfolio-empty,
        .portfolio-filter-empty {

            text-align:
                center;

            padding:
                40px 0;

            color:
                var(--muted);

        }


        .portfolio-item[hidden] {

            display:
                none;

        }


        .portfolio-grid {

            display:
                grid;

            grid-template-columns:
                repeat(4,1fr);

            gap:
                22px;

        }


        .portfolio-item {

            overflow:
                hidden;

            border:
                1px solid
                var(--border);

            border-radius:
                22px;

            background:
                white;

            transition:

                transform .3s ease,

                box-shadow .3s ease;

        }


        .portfolio-item:hover {

            transform:
                translateY(-8px);

            box-shadow:
                var(--shadow-lg);

        }


        .portfolio-image-wrap {

            overflow:
                hidden;

        }


        .portfolio-img {

            width:
                100%;

            aspect-ratio:
                4 / 3;

            object-fit:
                cover;

            transition:
                transform .55s ease;

        }


        .portfolio-item:hover
        .portfolio-img {

            transform:
                scale(1.045);

        }


        .portfolio-content {

            padding:
                22px;

        }


        .portfolio-content small {

            color:
                var(--blue-2);

            font-weight:
                800;

            text-transform:
                uppercase;

        }


        .portfolio-content h3 {

            margin-top:
                6px;

            font-size:
                23px;

        }


        .portfolio-footer {

            display:
                flex;

            justify-content:
                center;

            margin-top:
                35px;

        }



        /* =========================================
           GOOGLE REVIEWS
        ========================================= */


        .reviews-section {

            padding:
                100px 0;

            background:

                linear-gradient(
                    180deg,
                    #f5f8ff 0%,
                    #f8fafc 55%,
                    #ffffff 100%
                );

        }


        .reviews-header {

            display:
                grid;

            grid-template-columns:
                1fr auto;

            align-items:
                end;

            gap:
                35px;

            margin-bottom:
                38px;

        }


        .reviews-header
        .section-title {

            margin-bottom:
                0;

        }


        .google-summary {

            min-width:
                300px;

            display:
                flex;

            align-items:
                center;

            gap:
                18px;

            padding:
                22px 25px;

            border:
                1px solid
                var(--border);

            border-radius:
                20px;

            background:
                white;

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

        }


        .google-logo {

            width:
                52px;

            height:
                52px;

            display:
                grid;

            place-items:
                center;

            flex-shrink:
                0;

            border-radius:
                50%;

            background:
                #ffffff;

            border:
                1px solid
                var(--border);

        }

        .google-logo img {

            display:
                block;

        }


        .google-summary-score {

            display:
                flex;

            align-items:
                center;

            gap:
                8px;

        }


        .google-summary-score strong {

            font-family:
                "Manrope",
                sans-serif;

            font-size:
                28px;

            line-height:
                1;

        }


        .stars {

            color:
                var(--google-yellow);

            letter-spacing:
                1px;

            white-space:
                nowrap;

        }


        .google-summary small {

            display:
                block;

            margin-top:
                5px;

            color:
                var(--muted);

            font-size:
                12px;

        }



        .reviews-grid {

            display:
                grid;

            grid-template-columns:
                repeat(3,1fr);

            gap:
                20px;

        }


        .review-card {

            position:
                relative;

            min-height:
                315px;

            display:
                flex;

            flex-direction:
                column;

            padding:
                28px;

            overflow:
                hidden;

            border:
                1px solid
                var(--border);

            border-radius:
                22px;

            background:
                white;

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

            transition:

                transform .3s ease,

                box-shadow .3s ease,

                border-color .3s ease;

        }


        .review-card::before {

            content:
                "“";

            position:
                absolute;

            right:
                20px;

            top:
                -10px;

            font-family:
                Georgia,
                serif;

            font-size:
                100px;

            line-height:
                1;

            color:
                rgba(31,94,214,.06);

            pointer-events:
                none;

        }


        .review-card:hover {

            transform:
                translateY(-7px);

            border-color:
                #ccdafa;

            box-shadow:
                var(--shadow-lg);

        }


        .review-top {

            display:
                flex;

            align-items:
                center;

            justify-content:
                space-between;

            gap:
                15px;

            margin-bottom:
                18px;

        }


        .review-stars {

            color:
                var(--google-yellow);

            letter-spacing:
                2px;

            font-size:
                18px;

        }


        .review-google {

            display:
                inline-flex;

            align-items:
                center;

            gap:
                5px;

            font-size:
                12px;

            font-weight:
                700;

            color:
                var(--muted);

        }

        .review-google img {

            display:
                block;

        }


        .review-text {

            position:
                relative;

            z-index:
                2;

            flex:
                1;

            font-size:
                16px;

            line-height:
                1.75;

            color:
                var(--text);

        }


        .review-author {

            display:
                flex;

            align-items:
                center;

            gap:
                12px;

            margin-top:
                24px;

            padding-top:
                18px;

            border-top:
                1px solid
                var(--border);

        }


        .review-avatar {

            width:
                44px;

            height:
                44px;

            display:
                grid;

            place-items:
                center;

            flex-shrink:
                0;

            border-radius:
                50%;

            overflow:
                hidden;

            background:
                var(--blue-soft);

            color:
                var(--blue);

            font-weight:
                800;

        }


        .review-avatar img {

            width:
                100%;

            height:
                100%;

            object-fit:
                cover;

            display:
                block;

        }


        .review-avatar-fallback {

            display:
                grid;

            place-items:
                center;

            width:
                100%;

            height:
                100%;

        }


        .review-author strong {

            display:
                block;

            font-size:
                14px;

        }


        .review-author span {

            display:
                block;

            font-size:
                12px;

            color:
                var(--muted);

        }


        .reviews-footer {

            display:
                flex;

            justify-content:
                center;

            margin-top:
                35px;

        }



        /* =========================================
           OFFER
        ========================================= */


        .offer {

            position:
                relative;

            overflow:
                hidden;

            display:
                grid;

            grid-template-columns:
                1.2fr .8fr;

            gap:
                40px;

            align-items:
                center;

            padding:
                58px;

            border-radius:
                34px;

            background:

                linear-gradient(

                    135deg,

                    #061b44,

                    #0c3279,

                    #1757c2

                );

            color:
                white;

            box-shadow:
                var(--shadow-lg);

        }


        .offer::before {

            content:
                "";

            position:
                absolute;

            width:
                500px;

            height:
                500px;

            right:
                -180px;

            top:
                -260px;

            border-radius:
                50%;

            background:
                rgba(255,255,255,.08);

            filter:
                blur(20px);

            pointer-events:
                none;

        }


        .offer h2 {

            font-size:
                clamp(
                    38px,
                    4vw,
                    60px
                );

            line-height:
                1.04;

        }


        .offer > div > p {

            max-width:
                620px;

            margin-top:
                17px;

            font-size:
                18px;

            color:
                #d7e1f4;

        }


        .offer-list {

            display:
                grid;

            gap:
                10px;

            margin-top:
                28px;

        }


        .offer-list span::before {

            content:
                "✓";

            margin-right:
                9px;

            font-weight:
                900;

        }


        .offer-price {

            padding:
                38px;

            border-radius:
                26px;

            background:
                white;

            color:
                var(--dark);

            text-align:
                center;

        }


        .offer-price small {

            font-weight:
                800;

            color:
                var(--muted);

            text-transform:
                uppercase;

        }


        .offer-price strong {

            display:
                block;

            margin:
                10px 0 2px;

            font-size:
                74px;

            line-height:
                1;

            color:
                var(--blue-2);

        }


        .offer-price p {

            margin-bottom:
                20px;

            color:
                #64748b;

            font-weight:
                600;

        }



        /* =========================================
           PRICING GRID (V3)
        ========================================= */


        .pricing-grid {

            display:
                grid;

            grid-template-columns:
                repeat(3, 1fr);

            gap:
                26px;

            align-items:
                stretch;

            margin-top:
                12px;

        }


        .pricing-card {

            position:
                relative;

            display:
                flex;

            flex-direction:
                column;

            padding:
                38px 32px;

            background:
                white;

            border:
                1px solid
                var(--border);

            border-radius:
                26px;

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

            transition:

                transform .3s ease,

                box-shadow .3s ease;

        }


        .pricing-card:hover {

            transform:
                translateY(-6px);

            box-shadow:
                var(--shadow-lg);

        }


        .pricing-card-featured {

            border-color:
                var(--blue-2);

            box-shadow:
                0 20px 50px
                rgba(31,94,214,.18);

            transform:
                translateY(-10px);

            z-index:
                1;

        }


        .pricing-card-featured:hover {

            transform:
                translateY(-14px);

        }


        .pricing-badge {

            position:
                absolute;

            top:
                -14px;

            left:
                50%;

            transform:
                translateX(-50%);

            background:
                var(--blue-2);

            color:
                white;

            font-size:
                12px;

            font-weight:
                800;

            letter-spacing:
                .04em;

            padding:
                7px 18px;

            border-radius:
                999px;

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

            white-space:
                nowrap;

        }


        .pricing-name {

            font-size:
                22px;

            margin-bottom:
                8px;

        }


        .pricing-tagline {

            color:
                var(--muted);

            font-size:
                14px;

            line-height:
                1.5;

            min-height:
                42px;

        }


        .pricing-price {

            display:
                flex;

            align-items:
                baseline;

            gap:
                6px;

            margin:
                22px 0 24px;

        }


        .pricing-price strong {

            font-family:
                "Manrope",
                sans-serif;

            font-size:
                34px;

            font-weight:
                800;

            color:
                var(--blue);

        }


        .pricing-card-featured .pricing-price strong {

            color:
                var(--blue-2);

        }


        .pricing-price span {

            font-size:
                14px;

            color:
                #64748b;

            font-weight:
                600;

        }


        .pricing-features {

            display:
                grid;

            align-content:
                start;

            gap:
                12px;

            margin:
                0 0 28px;

            padding:
                0;

            list-style:
                none;

            flex:
                1;

        }


        .pricing-features li {

            font-size:
                14px;

            color:
                var(--text);

            padding-left:
                26px;

            position:
                relative;

            line-height:
                1.5;

        }


        .pricing-features li::before {

            content:
                "✓";

            position:
                absolute;

            left:
                0;

            top:
                0;

            color:
                var(--blue-2);

            font-weight:
                900;

        }


        .pricing-note {

            font-size:
                12px;

            line-height:
                1.5;

            color:
                var(--muted);

            margin:
                -14px 0 20px;

        }


        .pricing-cta {

            width:
                100%;

            text-align:
                center;

            justify-content:
                center;

        }


        .pricing-global-note {

            text-align:
                center;

            font-size:
                13px;

            color:
                var(--muted);

            margin-top:
                32px;

        }


        .pricing-price-label {

            font-size:
                13px;

            font-weight:
                600;

            color:
                var(--muted);

        }


        .pricing-scope {

            font-size:
                13px;

            line-height:
                1.6;

            color:
                var(--muted);

            margin:
                0 0 24px;

        }


        .pricing-features-detailed {

            gap:
                16px;

        }


        .pricing-features-detailed li {

            display:
                flex;

            flex-direction:
                column;

            gap:
                2px;

            padding-left:
                26px;

        }


        .pricing-features-detailed li strong {

            color:
                var(--text);

            font-weight:
                700;

        }


        .pricing-features-detailed li small {

            color:
                var(--muted);

            font-size:
                12.5px;

            line-height:
                1.5;

        }



        /* =========================================
           ABOUT
        ========================================= */


        .about-grid {

            display:
                grid;

            grid-template-columns:
                .85fr 1.15fr;

            gap:
                65px;

            align-items:
                center;

        }


        .about-photo {

            min-height:
                520px;

            border-radius:
                30px;

            background:

                url("/assets/img/christophe-marcellin.jpg")

                center top / cover

                no-repeat;

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

        }


        .about-content h2 {

            margin-bottom:
                22px;

            font-size:
                clamp(
                    38px,
                    4vw,
                    60px
                );

            line-height:
                1.05;

        }


        .about-content p {

            margin-bottom:
                16px;

            color:
                var(--muted);

            font-size:
                17px;

        }


        .about-content .btn {

            margin-top:
                12px;

        }



        /* =========================================
           CTA
        ========================================= */


        .cta {

            padding:
                35px 0 85px;

        }


        .cta-inner {

            display:
                flex;

            align-items:
                center;

            justify-content:
                space-between;

            gap:
                30px;

            padding:
                45px;

            border:
                1px solid
                #e0e7f1;

            border-radius:
                28px;

            background:

                radial-gradient(

                    circle at 90% 20%,

                    rgba(31,94,214,.13),

                    transparent 32%

                ),

                linear-gradient(

                    135deg,

                    #edf3fd,

                    #f8fbff

                );

        }


        .cta h2 {

            font-size:
                clamp(
                    28px,
                    3vw,
                    40px
                );

        }


        .cta p {

            margin-top:
                6px;

            color:
                var(--muted);

        }


        .cta-actions {

            display:
                flex;

            flex-wrap:
                wrap;

            gap:
                12px;

        }



        /* =========================================
           FOOTER
        ========================================= */


        footer {

            padding:
                65px 0 34px;

            background:
                #06152e;

            color:
                white;

        }


        .footer-grid {

            display:
                grid;

            grid-template-columns:
                1.6fr 1fr 1fr;

            gap:
                45px;

        }


        .footer-logo {

            width:
                225px;

            margin-bottom:
                18px;

            border-radius:
                12px;

        }


        .footer-social {

            display:
                flex;

            gap:
                10px;

            margin-top:
                20px;

        }


        .footer-social a {

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            width:
                38px;

            height:
                38px;

            border-radius:
                10px;

            background:
                rgba(255,255,255,.06);

            margin-bottom:
                0;

            transition:
                background .2s ease,
                color .2s ease;

        }


        .footer-social a:hover {

            background:
                var(--blue-2);

            color:
                white;

        }


        .footer-legal-extra {

            font-size:
                13px;

            color:
                #8491a7;

            margin-bottom:
                6px;

        }


        footer p,
        footer a {

            color:
                #b7c1d3;

        }


        footer h4 {

            margin-bottom:
                14px;

        }


        footer a {

            display:
                block;

            margin-bottom:
                8px;

            transition:
                color .2s ease;

        }


        footer a:hover {

            color:
                white;

        }


        .copyright {

            margin-top:
                45px;

            padding-top:
                22px;

            border-top:
                1px solid
                rgba(255,255,255,.12);

            font-size:
                13px;

            color:
                #8491a7;

        }



        /* =========================================
           ANIMATIONS
        ========================================= */


        @keyframes fadeUp {

            from {

                opacity:
                    0;

                transform:
                    translateY(24px);

            }

            to {

                opacity:
                    1;

                transform:
                    translateY(0);

            }

        }


        @keyframes heroVisual {

            from {

                opacity:
                    0;

                transform:
                    translateX(35px);

            }

            to {

                opacity:
                    1;

                transform:
                    translateX(0);

            }

        }


        @keyframes float {

            0%,
            100% {

                transform:
                    translateY(0);

            }

            50% {

                transform:
                    translateY(-12px);

            }

        }


        @keyframes floatBadge {

            0%,
            100% {

                transform:
                    translateY(0)
                    rotate(-2deg);

            }

            50% {

                transform:
                    translateY(-8px)
                    rotate(2deg);

            }

        }



        /* =========================================
           TABLET
        ========================================= */


        @media
        (max-width: 1180px) {


            .nav-links,
            .header .nav >
            .btn-primary {

                display:
                    none;

            }


            .menu-btn {

                display:
                    flex;

            }


            .hero-grid {

                grid-template-columns:
                    1fr;

                gap:
                    60px;

            }


            .hero-visual {

                min-height:
                    380px;

                max-width:
                    900px;

            }


            .bento-grid {

                grid-template-columns:
                    repeat(2,1fr);

            }


            .portfolio-grid {

                grid-template-columns:
                    repeat(2,1fr);

            }


            .services-grid {

                grid-template-columns:
                    repeat(2,1fr);

            }


            .reviews-grid {

                grid-template-columns:
                    repeat(2,1fr);

            }


            .about-grid {

                grid-template-columns:
                    1fr 1fr;

            }


            .pricing-grid {

                grid-template-columns:
                    1fr;

                max-width:
                    460px;

                margin-left:
                    auto;

                margin-right:
                    auto;

            }


            .pricing-card-featured {

                transform:
                    none;

            }


            .pricing-card-featured:hover {

                transform:
                    translateY(-6px);

            }

        }



        /* =========================================
           MOBILE
        ========================================= */


        @media
        (max-width: 768px) {


            .container {

                width:
                    min(
                        calc(100% - 28px),
                        var(--container)
                    );

            }


            .nav {

                min-height:
                    76px;

            }


            .logo img {

                width:
                    190px;

            }


            .hero {

                padding:
                    46px 0 40px;

            }


            .hero-grid {

                gap:
                    42px;

            }


            h1 {

                font-size:
                    clamp(
                        42px,
                        11vw,
                        58px
                    );

                line-height:
                    1.08;

                letter-spacing:
                    -2px;

            }


            .hero-text {

                margin-top:
                    22px;

                font-size:
                    17px;

            }


            .hero-actions {

                display:
                    grid;

                grid-template-columns:
                    1fr;

            }


            .hero-actions .btn {

                width:
                    100%;

            }


            .hero-trust {

                display:
                    grid;

                gap:
                    10px;

            }


            .browser {

                transform:
                    none;

                border-radius:
                    20px;

            }


            .browser:hover {

                transform:
                    none;

            }


            .browser-content {

                width:
                    72%;

                left:
                    6%;

                top:
                    14%;

            }


            .browser-content .hero-caption-title {

                font-size:
                    clamp(
                        22px,
                        7vw,
                        34px
                    );

            }


            .browser-content p {

                font-size:
                    13px;

            }


            .mini-btn {

                font-size:
                    10px;

                padding:
                    9px 12px;

            }


            .phone {

                width:
                    105px;

                right:
                    -6px;

                bottom:
                    -10px;

            }


            .phone-screen strong {

                font-size:
                    12px;

            }


            .price-badge {

                position:
                    relative;

                left:
                    auto;

                bottom:
                    auto;

                width:
                    145px;

                margin-top:
                    20px;

            }


            .price-badge strong {

                font-size:
                    44px;

            }


            .bento {

                padding-top:
                    15px;

            }


            .bento-grid,
            .reviews-grid,
            .about-grid,
            .offer {

                grid-template-columns:
                    1fr;

            }


            .portfolio-grid {

                grid-template-columns:
                    1fr;

                gap:
                    16px;

            }


            .portfolio-item {

                border-radius:
                    16px;

            }


            .portfolio-img {

                aspect-ratio:
                    16 / 9;

            }


            .portfolio-content {

                padding:
                    16px 18px;

            }


            .portfolio-content small {

                font-size:
                    11.5px;

            }


            .portfolio-content h3 {

                font-size:
                    19px;

                margin-top:
                    4px;

            }


            .services-grid {

                grid-template-columns:
                    repeat(2,1fr);

                gap:
                    14px;

            }


            .service {

                padding:
                    20px 16px;

            }


            .service h3 {

                font-size:
                    16.5px;

                margin:
                    14px 0 8px;

            }


            .service p {

                font-size:
                    13px;

            }


            .card,
            .service {

                min-height:
                    auto;

            }


            .projects {

                min-height:
                    300px;

            }


            .section,
            .reviews-section {

                padding:
                    72px 0;

            }


            .section-title {

                margin-bottom:
                    36px;

            }


            .section-title h2 {

                font-size:
                    clamp(
                        36px,
                        10vw,
                        50px
                    );

                letter-spacing:
                    -1.5px;

            }


            .section-title p {

                font-size:
                    16px;

            }


            .reviews-header {

                grid-template-columns:
                    1fr;

                align-items:
                    stretch;

                gap:
                    24px;

            }


            .google-summary {

                min-width:
                    0;

                width:
                    100%;

            }


            .review-card {

                min-height:
                    auto;

            }


            .offer {

                padding:
                    34px 22px;

                border-radius:
                    24px;

            }


            .offer-price {

                padding:
                    28px 20px;

            }


            .offer-price strong {

                font-size:
                    62px;

            }


            .about-photo {

                min-height:
                    420px;

            }


            .cta {

                padding-bottom:
                    60px;

            }


            .cta-inner {

                align-items:
                    flex-start;

                flex-direction:
                    column;

                padding:
                    30px 22px;

            }


            .cta-actions {

                width:
                    100%;

            }


            .cta-actions .btn {

                width:
                    100%;

            }


            .footer-grid {

                grid-template-columns:
                    1fr;

                gap:
                    34px;

            }


            .sm-decor {

                right:
                    -4px;

                bottom:
                    -4px;

                width:
                    120px;

            }


            .sm-text {

                max-width:
                    155px;

            }

        }



        /* =========================================
           SMALL MOBILE
        ========================================= */


        @media
        (max-width: 430px) {


            .logo img {

                width:
                    165px;

            }


            .sm-decor {

                display:
                    none;

            }


            .sm-text {

                max-width:
                    none;

            }


            h1 {

                font-size:
                    43px;

            }


            .eyebrow {

                font-size:
                    10px;

            }


            .browser-image {

                aspect-ratio:
                    4 / 3;

            }


            .browser-content {

                width:
                    68%;

            }


            .browser-content p {

                display:
                    none;

            }


            .phone {

                width:
                    88px;

            }


            .card h3 {

                font-size:
                    22px;

            }


            .google-summary {

                padding:
                    18px;

            }


            .google-logo {

                width:
                    45px;

                height:
                    45px;

                font-size:
                    27px;

            }


            .google-summary-score {

                flex-wrap:
                    wrap;

            }

        }



        /* =========================================
           REDUCED MOTION
        ========================================= */


        @media
        (prefers-reduced-motion: reduce) {


            *,
            *::before,
            *::after {

                animation-duration:
                    .01ms !important;

                animation-iteration-count:
                    1 !important;

                scroll-behavior:
                    auto !important;

                transition-duration:
                    .01ms !important;

            }


            .reveal {

                opacity:
                    1;

                transform:
                    none;

            }

        }


        /* =========================================
           MODALES LÉGALES
        ========================================= */

        .legal-modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 2000;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .legal-modal-overlay.active {
            display: flex;
        }

        .legal-modal-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(16,24,40,.6);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }

        .legal-modal-box {
            position: relative;
            background: var(--white);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
            width: 100%;
            max-width: 760px;
            max-height: 82vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transform: scale(.95);
            opacity: 0;
            transition: transform .25s ease, opacity .25s ease;
        }

        .legal-modal-overlay.active .legal-modal-box {
            transform: scale(1);
            opacity: 1;
        }

        .legal-modal-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 20px;
            padding: 26px 30px;
            background: var(--blue);
            color: var(--white);
        }

        .legal-modal-head h2 {
            font-size: 20px;
            font-weight: 800;
            margin: 0;
        }

        .legal-modal-head p {
            font-size: 13px;
            margin: 4px 0 0;
            color: rgba(255,255,255,.7);
        }

        .legal-modal-close {
            flex-shrink: 0;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: none;
            background: rgba(255,255,255,.15);
            color: var(--white);
            font-size: 15px;
            cursor: pointer;
            transition: background .2s ease;
        }

        .legal-modal-close:hover {
            background: rgba(255,255,255,.3);
        }

        .legal-modal-body {
            padding: 30px;
            overflow-y: auto;
            color: var(--text);
            font-size: 14.5px;
            line-height: 1.7;
        }

        .legal-modal-loading {
            text-align: center;
            padding: 40px 0;
            color: var(--muted);
            font-size: 14px;
        }

        .legal-modal-foot {
            padding: 16px 30px;
            border-top: 1px solid var(--border);
            background: var(--light);
            display: flex;
            justify-content: flex-end;
        }

        .legal-modal-close-btn {
            padding: 10px 22px;
            border-radius: 999px;
            border: none;
            background: var(--blue-2);
            color: var(--white);
            font-weight: 700;
            font-size: 13.5px;
            cursor: pointer;
            transition: background .2s ease;
        }

        .legal-modal-close-btn:hover {
            background: var(--blue);
        }

        .legal-modal-body h3 {
            font-size: 16px;
            font-weight: 800;
            color: var(--dark);
            margin: 26px 0 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .legal-modal-body h3:first-child {
            margin-top: 0;
        }

        .legal-modal-body h3 span {
            flex-shrink: 0;
            width: 26px;
            height: 26px;
            border-radius: 8px;
            background: var(--blue-soft);
            color: var(--blue-2);
            font-size: 12.5px;
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .legal-modal-body p {
            margin: 0 0 8px;
            font-size: 14px;
        }

        .legal-modal-body strong {
            color: var(--dark);
        }

        .legal-modal-body a {
            color: var(--blue-2);
            text-decoration: underline;
        }

        .legal-modal-body section {
            margin-bottom: 18px;
        }