/* =====================================================
           ROOT VARIABLES
           ===================================================== */

        :root {
            --primary-blue: #0066cc;
            --primary-blue-dark: #0052a3;
            --primary-blue-light: #e6f2ff;

            --medical-green: #10b981;
            --medical-green-dark: #059669;

            --dark-gray: #1f2937;
            --light-gray: #f9fafb;

            --text-dark: #0f172a;
            --text-muted: #64748b;

            --border-light: #e2e8f0;

            --white: #ffffff;

            --header-height: 4rem;

            --safe-bottom: env(safe-area-inset-bottom,
                    0px);
        }


        /* =====================================================
           GLOBAL
           ===================================================== */

        html {
            scroll-behavior: smooth;
            scroll-padding-top: var(--header-height);
        }

        body {
            margin: 0;
            min-width: 320px;
            background: #ffffff;
            color: var(--text-dark);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

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

        /*
         * IMPORTANT :
         * Ne pas mettre de transition globale sur tous les éléments.
         * Cela ralentit la page et provoque des effets indésirables.
         */

        img {
            max-width: 100%;
        }

        button,
        a {
            -webkit-tap-highlight-color: transparent;
        }


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

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }


        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }


        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(30px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }


        @keyframes pulse-glow {

            0%,
            100% {
                box-shadow:
                    0 0 20px rgba(0, 102, 204, 0.25);
            }

            50% {
                box-shadow:
                    0 0 30px rgba(0, 102, 204, 0.45);
            }
        }


        @keyframes float {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-20px);
            }
        }


        @keyframes slide-up {

            from {
                opacity: 0;
                transform: translateY(40px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }


        @keyframes blur-in {

            from {
                opacity: 0;
                filter: blur(10px);
            }

            to {
                opacity: 1;
                filter: blur(0);
            }
        }


        @keyframes scale-in {

            from {
                opacity: 0;
                transform: scale(0.95);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }


        @keyframes glow-pulse {

            0%,
            100% {
                filter:
                    drop-shadow(0 0 8px rgba(0, 102, 204, 0.35));
            }

            50% {
                filter:
                    drop-shadow(0 0 20px rgba(0, 102, 204, 0.7));
            }
        }


        @keyframes text-shimmer {

            0% {
                background-position: 0% center;
            }

            100% {
                background-position: 200% center;
            }
        }


        @keyframes letter-pop {

            0% {
                opacity: 0;
                transform:
                    translateY(40px) scale(0.3);
            }

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


        @keyframes word-fade-in {

            0% {
                opacity: 0;
                filter: blur(8px);
            }

            100% {
                opacity: 1;
                filter: blur(0);
            }
        }


        @keyframes line-draw {

            0% {
                width: 0;
                opacity: 0;
            }

            100% {
                width: 100%;
                opacity: 1;
            }
        }


        @keyframes text-gradient-flow {

            0%,
            100% {
                background-position: 0% center;
            }

            50% {
                background-position: 100% center;
            }
        }


        @keyframes bounce-text {

            0%,
            100% {
                transform: translateY(0);
            }

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


        /* =====================================================
           ANIMATION CLASSES
           ===================================================== */

        .animate-letter-pop {
            animation:
                letter-pop 0.6s ease-out forwards;
        }

        .animate-word-fade {
            animation:
                word-fade-in 0.8s ease-out forwards;
        }

        .animate-line-draw {
            animation:
                line-draw 1s ease-in-out forwards;
        }

        .animate-text-gradient {
            animation:
                text-gradient-flow 3s ease-in-out infinite;

            background-size:
                200% 200%;
        }

        .animate-bounce-text {
            animation:
                bounce-text 2s ease-in-out infinite;
        }

        .animate-fade-in {
            animation:
                fadeIn 0.8s ease-out forwards;
        }

        .animate-slide-in-left {
            animation:
                slideInLeft 0.8s ease-out forwards;
        }

        .animate-slide-in-right {
            animation:
                slideInRight 0.8s ease-out forwards;
        }

        .animate-float {
            animation:
                float 3s ease-in-out infinite;
        }

        .animate-slide-up {
            animation:
                slide-up 0.8s ease-out forwards;
        }

        .animate-blur-in {
            animation:
                blur-in 1s ease-out forwards;
        }

        .animate-scale-in {
            animation:
                scale-in 0.6s ease-out forwards;
        }

        .animate-glow-pulse {
            animation:
                glow-pulse 3s ease-in-out infinite;
        }

        .pulse-glow {
            animation:
                pulse-glow 2s ease-in-out infinite;
        }


        /* =====================================================
           ANIMATION DELAYS
           ===================================================== */

        .delay-1 {
            animation-delay: 0.1s;
        }

        .delay-2 {
            animation-delay: 0.2s;
        }

        .delay-3 {
            animation-delay: 0.3s;
        }

        .delay-4 {
            animation-delay: 0.4s;
        }

        .delay-5 {
            animation-delay: 0.5s;
        }

        .delay-6 {
            animation-delay: 0.6s;
        }


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

        .btn-primary {
            position: relative;
            overflow: hidden;

            padding: 1rem 2rem;

            background:
                linear-gradient(135deg,
                    #0066cc 0%,
                    #0052a3 100%);

            color: #ffffff;

            font-weight: 700;

            border: none;
            border-radius: 14px;

            cursor: pointer;

            transition:
                transform 0.3s ease,
                box-shadow 0.3s ease,
                background 0.3s ease;
        }


        .btn-primary::before {
            content: "";

            position: absolute;

            top: 0;
            left: -100%;

            width: 100%;
            height: 100%;

            background:
                rgba(255, 255, 255, 0.16);

            transition:
                left 0.5s ease;
        }


        .btn-primary:hover::before {
            left: 100%;
        }


        .btn-primary:hover {
            transform:
                translateY(-3px);

            box-shadow:
                0 20px 40px rgba(0, 102, 204, 0.35);
        }


        .btn-secondary {
            padding: 1rem 2rem;

            background: #ffffff;

            color: #0066cc;

            font-weight: 700;

            border:
                1px solid rgba(0, 102, 204, 0.25);

            border-radius: 14px;

            cursor: pointer;

            transition:
                transform 0.3s ease,
                box-shadow 0.3s ease,
                background 0.3s ease;
        }


        .btn-secondary:hover {
            background: #ffffff;

            transform:
                translateY(-3px);

            box-shadow:
                0 12px 30px rgba(0, 0, 0, 0.12);
        }


        /* =====================================================
           GENERAL PAGE SECTIONS
           ===================================================== */

        /*
         * IMPORTANT :
         * Pas de "section { padding: ... }"
         * car cela casserait le Hero et les autres sections.
         */

        .page-section {
            padding: 5rem 0;
        }


        @media (min-width: 1024px) {

            .page-section {
                padding: 7rem 0;
            }
        }


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

        .hero-section {
            position: relative;

            width: 100%;

            min-height:
                calc(100svh - var(--header-height));

            overflow: hidden;

            isolation: isolate;

            display: flex;

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

            background: #0f172a;
        }


        /* -----------------------------------------------------
           HERO BACKGROUND
           ----------------------------------------------------- */

        .hero-background {
            position: absolute;

            inset: 0;

            z-index: 0;

            overflow: hidden;
        }


        .hero-background-image {
            display: block;

            width: 100%;
            height: 100%;

            object-fit: cover;

            object-position:
                center center;

            transform:
                scale(1.02);

            filter:
                saturate(0.92);

            transition:
                transform 8s ease-out,
                filter 1.8s ease-in-out;
        }


        /*
         * Overlay :
         * suffisamment sombre pour le texte,
         * mais sans détruire la photo.
         */

        .hero-overlay {
            position: absolute;

            inset: 0;

            background: linear-gradient(180deg,
                    rgba(15, 23, 42, 0.10) 0%,
                    rgba(15, 23, 42, 0.20) 100%);
            z-index: 1;
        }


        /* -----------------------------------------------------
           HERO CONTAINER
           ----------------------------------------------------- */

        .hero-container {
            position: relative;

            z-index: 10;

            width: 100%;

            padding:
                5.5rem 1.25rem 4.5rem;
        }


        .hero-content {
            width: 100%;

            max-width: 900px;

            margin:
                0 auto;

            display: flex;

            flex-direction: column;

            align-items: center;

            text-align: center;
        }


        /* -----------------------------------------------------
           HERO EYEBROW
           ----------------------------------------------------- */

        .hero-eyebrow {
            display: inline-flex;

            align-items: center;

            gap: 0.55rem;

            margin-bottom: 1.25rem;

            padding:
                0.55rem 1rem;

            color:
                rgba(255, 255, 255, 0.96);

            font-size:
                0.875rem;

            line-height: 1.25;

            font-weight: 600;

            letter-spacing:
                0.02em;

            background:
                rgba(255, 255, 255, 0.12);

            border:
                1px solid rgba(255, 255, 255, 0.20);

            border-radius:
                9999px;

            backdrop-filter:
                blur(10px);

            -webkit-backdrop-filter:
                blur(10px);

            box-shadow:
                0 8px 24px rgba(0, 0, 0, 0.12);
        }


        .hero-eyebrow-dot {
            width: 7px;
            height: 7px;

            flex-shrink: 0;

            border-radius: 50%;

            background:
                #34d399;

            box-shadow:
                0 0 0 4px rgba(52, 211, 153, 0.16);
        }


        /* -----------------------------------------------------
           HERO TITLE
           ----------------------------------------------------- */

        .hero-title {
            width: 100%;

            max-width: 850px;

            margin: 0;

            color: #ffffff;

            /*
             * Clamp = responsive automatique
             */
            font-size:
                clamp(2.25rem,
                    5vw,
                    4.75rem);

            line-height:
                1.06;

            font-weight:
                800;

            letter-spacing:
                -0.035em;

            text-wrap:
                balance;

            text-shadow:
                0 3px 10px rgba(0, 0, 0, 0.38),

                0 10px 30px rgba(0, 0, 0, 0.22);
        }


        /* -----------------------------------------------------
           HERO DESCRIPTION
           ----------------------------------------------------- */

        .hero-description {
            width: 100%;

            max-width: 680px;

            margin:
                1.5rem auto 0;

            color:
                rgba(255, 255, 255, 0.92);

            font-size:
                clamp(1rem,
                    1.8vw,
                    1.2rem);

            line-height:
                1.65;

            font-weight:
                400;

            text-shadow:
                0 2px 8px rgba(0, 0, 0, 0.35);
        }


        /* -----------------------------------------------------
           HERO ACTIONS
           ----------------------------------------------------- */

        .hero-actions {
            width: 100%;

            display: flex;

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

            gap: 0.875rem;

            margin-top:
                2rem;
        }


        .hero-btn {
            min-height: 56px;

            display: inline-flex;

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

            gap: 0.65rem;

            padding:
                0.9rem 1.6rem;

            border-radius:
                14px;

            font-size:
                1rem;

            line-height:
                1.2;

            font-weight:
                700;

            text-decoration:
                none;

            cursor: pointer;

            transition:
                transform 0.25s ease,
                box-shadow 0.25s ease,
                background 0.25s ease,
                border-color 0.25s ease;
        }


        /* -----------------------------------------------------
           HERO PRIMARY BUTTON
           ----------------------------------------------------- */

        .hero-btn-primary {
            color: #ffffff;

            background:
                linear-gradient(135deg,
                    #2563eb 0%,
                    #1d4ed8 100%);

            border:
                1px solid rgba(255, 255, 255, 0.08);

            box-shadow:
                0 12px 28px rgba(29, 78, 216, 0.34);
        }


        .hero-btn-primary:hover {
            color: #ffffff;

            transform:
                translateY(-2px);

            box-shadow:
                0 18px 36px rgba(29, 78, 216, 0.42);
        }


        .hero-btn-primary i {
            font-size:
                0.85rem;

            transition:
                transform 0.25s ease;
        }


        .hero-btn-primary:hover i {
            transform:
                translateX(3px);
        }


        /* -----------------------------------------------------
           HERO SECONDARY BUTTON
           ----------------------------------------------------- */

        .hero-btn-secondary {
            color: #1d4ed8;

            background:
                rgba(255, 255, 255, 0.96);

            border:
                1px solid rgba(255, 255, 255, 0.8);

            box-shadow:
                0 12px 28px rgba(0, 0, 0, 0.16);

            backdrop-filter:
                blur(8px);

            -webkit-backdrop-filter:
                blur(8px);
        }


        .hero-btn-secondary:hover {
            color: #1d4ed8;

            background:
                #ffffff;

            transform:
                translateY(-2px);

            box-shadow:
                0 18px 34px rgba(0, 0, 0, 0.20);
        }


        /* -----------------------------------------------------
           HERO FEATURES
           ----------------------------------------------------- */

        .hero-features {
            width: 100%;

            margin-top:
                1.5rem;

            display: flex;

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

            gap:
                0.6rem;

            flex-wrap: wrap;
        }


        .hero-feature {
            display: inline-flex;

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

            gap: 0.45rem;

            padding:
                0.38rem 0.7rem;

            color:
                rgba(255, 255, 255, 0.97);

            font-size:
                0.72rem;

            line-height:
                1.2;

            font-weight:
                600;

            border-radius:
                9999px;

            background:
                rgba(37, 99, 235, 0.32);

            border:
                1px solid rgba(191, 219, 254, 0.32);

            white-space:
                nowrap;

            text-shadow:
                0 2px 7px rgba(0, 0, 0, 0.4);
        }


        .hero-feature-icon {
            width: 16px;
            height: 16px;

            display: inline-flex;

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

            flex-shrink: 0;

            border-radius: 50%;

            color:
                #ffffff;

            background:
                rgba(255, 255, 255, 0.18);

            border:
                1px solid rgba(255, 255, 255, 0.28);
        }


        .hero-feature-icon i {
            font-size:
                0.55rem;
        }


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

        @media (max-width: 1023px) {

            .hero-container {
                padding:
                    5rem 1.25rem 4rem;
            }


            .hero-content {
                max-width:
                    760px;
            }


            .hero-title {
                max-width:
                    720px;
            }


            .hero-description {
                max-width:
                    620px;
            }


            .hero-features {
                gap:
                    1rem 1.5rem;
            }
        }


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

        @media (max-width: 767px) {

            .hero-section {
                min-height:
                    calc(100svh - var(--header-height));

                align-items:
                    center;
            }

            .hero-content {
                margin-top: 10.5rem !important;
                /* pousse le bloc de texte vers le bas */
            }

            .hero-background-image {
                object-position:
                    center center;

                transform:
                    scale(1.04);
            }


            .hero-overlay {
                background:
                    linear-gradient(180deg,
                        rgba(15, 23, 42, 0.10) 0%,
                        rgba(15, 23, 42, 0.20) 100%);
            }


            .hero-container {
                padding:
                    4.5rem 1rem 3.5rem;
            }


            .hero-content {
                max-width:
                    100%;
            }


            /* Eyebrow */

            .hero-eyebrow {
                margin-bottom:
                    1rem;

                padding:
                    0.5rem 0.8rem;

                font-size:
                    0.75rem;
            }


            /* Title */

            .hero-title {
                max-width:
                    100%;

                font-size:
                    clamp(2rem,
                        9vw,
                        3rem);

                line-height:
                    1.08;

                letter-spacing:
                    -0.025em;
            }


            /* Description */

            .hero-description {
                max-width:
                    520px;

                margin-top:
                    1.15rem;

                font-size:
                    0.98rem;

                line-height:
                    1.55;
            }


            /* Buttons */

            .hero-actions {
                flex-direction:
                    column;

                gap:
                    0.7rem;

                margin-top:
                    1.5rem;
            }


            .hero-btn {
                width:
                    100%;

                max-width:
                    304px;

                min-height:
                    44px;

                padding:
                    0.65rem 1rem;

                font-size:
                    0.875rem;

                border-radius:
                    12px;
            }


            /* Features */

            .hero-features {
                width:
                    auto;

                max-width:
                    100%;

                margin-top:
                    1rem;

                flex-direction:
                    row;

                align-items:
                    stretch;

                justify-content:
                    center;

                gap:
                    0.35rem;
            }


            .hero-feature {
                flex: 1 1 0;
                min-width: 0;

                gap:
                    0.2rem;

                white-space:
                    normal;

                justify-content:
                    center;

                text-align:
                    center;

                font-size:
                    0.6rem;

                padding-left:
                    0.2rem;

                padding-right:
                    0.2rem;
            }


            .hero-feature-icon {
                width:
                    13px;

                height:
                    13px;
            }


            .hero-feature-icon i {
                font-size:
                    0.45rem;
            }
        }

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

        @media (max-width: 380px) {

            .hero-container {
                padding:
                    4rem 0.85rem 3rem;
            }


            .hero-eyebrow {
                font-size:
                    0.7rem;
            }


            .hero-title {
                font-size:
                    1.9rem;
            }


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


            .hero-features {
                max-width:
                    100%;
            }


            .hero-feature {
                font-size:
                    0.58rem;
            }
        }


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

        @media (max-height: 600px) and (max-width: 900px) {

            .hero-section {
                min-height:
                    auto;
            }


            .hero-container {
                padding:
                    4rem 1rem 3rem;
            }

            .hero-eyebrow {
                margin-bottom:
                    0.75rem;
            }

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


            .hero-description {
                margin-top:
                    0.9rem;
            }


            .hero-actions {
                margin-top:
                    1.25rem;
            }


            .hero-features {
                margin-top:
                    1.5rem;
            }
        }


        /* =====================================================
           CARD
           ===================================================== */

        .card-hover {
            transform:
                translateZ(0);

            transition:
                transform 0.3s ease,
                box-shadow 0.3s ease;
        }


        .card-hover:hover {
            transform:
                translateY(-4px);

            box-shadow:
                0 25px 50px rgba(0, 0, 0, 0.15);
        }


        /* =====================================================
           GLASS
           ===================================================== */

        .glass {
            background:
                rgba(255, 255, 255, 0.7);

            backdrop-filter:
                blur(10px);

            -webkit-backdrop-filter:
                blur(10px);

            border:
                1px solid rgba(255, 255, 255, 0.2);
        }


        .glass-dark {
            background:
                rgba(17, 24, 39, 0.7);

            backdrop-filter:
                blur(10px);

            -webkit-backdrop-filter:
                blur(10px);

            border:
                1px solid rgba(255, 255, 255, 0.1);
        }


        /* =====================================================
           PHONE MOCKUP
           ===================================================== */

        .phone-mockup {
            position: relative;

            background:
                linear-gradient(to bottom right,
                    #111827,
                    #000000);

            border-radius:
                2rem;

            padding:
                0.75rem;

            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.8);
        }


        .phone-screen {
            height: 100%;

            display: flex;

            flex-direction: column;

            justify-content:
                space-between;

            overflow: hidden;

            background:
                #ffffff;

            border-radius:
                1.5rem;
        }


        .phone-status-bar {
            display: flex;

            align-items: center;
            justify-content:
                space-between;

            padding:
                0.5rem;

            color:
                #ffffff;

            font-size:
                0.75rem;

            background:
                linear-gradient(to right,
                    #0066cc,
                    #0052a3);
        }


        /* =====================================================
           BADGE
           ===================================================== */

        .badge {
            display: inline-flex;

            align-items: center;

            padding:
                0.25rem 0.75rem;

            border-radius:
                9999px;

            background:
                rgb(220, 253, 244);

            color:
                rgb(12, 74, 110);

            font-size:
                0.875rem;

            font-weight:
                500;
        }


        /* =====================================================
           COOKIE BANNER
           ===================================================== */

        #cookie-banner {
            z-index: 1000;

            background:
                rgba(17, 24, 39, 0.96);

            color:
                #ffffff;

            border:
                1px solid rgba(255, 255, 255, 0.16);

            border-radius:
                16px;

            backdrop-filter:
                blur(8px);

            -webkit-backdrop-filter:
                blur(8px);

            box-shadow:
                0 18px 40px rgba(0, 0, 0, 0.35);
        }


        /* Fixed */

        #cookie-banner.cookie-banner--fixed {
            position:
                fixed;

            left:
                0;

            right:
                0;

            bottom:
                0;

            border-radius:
                0;

            border-left:
                none;

            border-right:
                none;

            border-bottom:
                none;

            padding-bottom:
                var(--safe-bottom);
        }


        /* Inline */

        #cookie-banner.cookie-banner--inline {
            position:
                relative;

            width:
                100%;

            border-radius:
                0;

            border-left:
                none;

            border-right:
                none;

            border-bottom:
                none;

            box-shadow:
                0 -4px 20px rgba(0, 0, 0, 0.25);
        }


        /* Popup */

        #cookie-banner.cookie-banner--popup {
            position:
                fixed;

            top:
                50%;

            left:
                50%;

            transform:
                translate(-50%,
                    -50%);

            width:
                min(90%,
                    680px);

            max-height:
                90vh;

            overflow-y:
                auto;
        }


        /* Cookie overlay */

        .cookie-overlay {
            display:
                none;

            position:
                fixed;

            inset:
                0;

            z-index:
                999;

            background:
                rgba(0, 0, 0, 0.55);

            backdrop-filter:
                blur(3px);
        }


        .cookie-overlay.active {
            display:
                block;
        }


        .cookie-banner__content {
            display:
                flex;

            flex-direction:
                column;

            gap:
                1rem;

            padding:
                1rem;
        }


        .cookie-banner__media {
            position:
                relative;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            flex-shrink:
                0;

            width:
                132px;

            height:
                132px;

            margin:
                0 auto;

            padding:
                8px;

            overflow:
                hidden;

            border-radius:
                58% 42% 46% 54% / 44% 56% 42% 58%;

            background:
                radial-gradient(circle at 25% 20%,
                    #ffffff 0%,
                    #dbeafe 45%,
                    #93c5fd 100%);

            box-shadow:
                0 10px 26px rgba(15, 23, 42, 0.35);
        }


        .cookie-banner__media::after {
            content:
                "";

            position:
                absolute;

            inset:
                3px;

            border-radius:
                61% 39% 49% 51% / 48% 52% 44% 56%;

            border:
                1px solid rgba(255, 255, 255, 0.55);

            pointer-events:
                none;
        }


        .cookie-banner__image {
            display:
                block;

            width:
                100%;

            height:
                100%;

            object-fit:
                cover;

            border-radius:
                57% 43% 52% 48% / 46% 54% 47% 53%;
        }


        .cookie-banner__body {
            width:
                100%;

            display:
                flex;

            flex-direction:
                column;

            justify-content:
                center;

            gap:
                1rem;
        }


        .cookie-banner__text {
            display:
                flex;

            flex-direction:
                column;

            justify-content:
                center;

            text-align:
                left;
        }


        .cookie-banner__text h3 {
            margin:
                0 0 0.35rem;

            font-size:
                1rem;

            font-weight:
                700;
        }


        .cookie-banner__text p {
            margin:
                0;

            color:
                rgba(255, 255, 255, 0.85);

            font-size:
                0.92rem;

            line-height:
                1.45;
        }


        .cookie-banner__link {
            display:
                inline-block;

            margin-top:
                0.75rem;

            color:
                #93c5fd;

            font-size:
                0.92rem;

            font-weight:
                600;

            text-decoration:
                underline;

            text-underline-offset:
                3px;
        }


        .cookie-banner__link:hover {
            color:
                #bfdbfe;
        }


        .cookie-banner__actions {
            display:
                flex;

            align-items:
                center;

            justify-content:
                flex-start;

            flex-wrap:
                wrap;

            gap:
                0.75rem;
        }


        .cookie-btn {
            padding:
                0.65rem 1rem;

            border:
                0;

            border-radius:
                12px;

            font-weight:
                700;

            cursor:
                pointer;
        }


        .cookie-btn--primary {
            color:
                #ffffff;

            background:
                linear-gradient(135deg,
                    #0066cc 0%,
                    #10b981 100%);
        }


        .cookie-btn--secondary {
            color:
                #ffffff;

            background:
                rgba(255, 255, 255, 0.14);

            border:
                1px solid rgba(255, 255, 255, 0.18);
        }


        .cookie-manage {
            position:
                fixed;

            right:
                1rem;

            bottom:
                calc(1rem + var(--safe-bottom));

            z-index:
                99;

            padding:
                0.65rem 1rem;

            border:
                0;

            border-radius:
                9999px;

            color:
                #ffffff;

            background:
                linear-gradient(135deg,
                    #0052a3 0%,
                    #0066cc 100%);

            font-size:
                0.85rem;

            font-weight:
                700;

            box-shadow:
                0 10px 24px rgba(0, 82, 163, 0.38);

            cursor:
                pointer;
        }


        /* =====================================================
           COOKIE — DESKTOP
           ===================================================== */

        @media (min-width: 768px) {

            .cookie-banner__content {
                flex-direction:
                    row;

                align-items:
                    center;

                justify-content:
                    center;

                gap:
                    1.75rem;

                padding:
                    1.25rem 1.5rem;
            }


            .cookie-banner__media {
                width:
                    170px;

                height:
                    170px;

                margin:
                    0;
            }


            .cookie-banner__body {
                max-width:
                    720px;
            }
        }


        /* =====================================================
           COOKIE — MOBILE
           ===================================================== */

        @media (max-width: 767px) {

            #cookie-banner.cookie-banner--popup {
                top:
                    5%;

                transform:
                    translateX(-50%);

                max-height:
                    88vh;
            }


            .cookie-banner__media {
                width:
                    90px;

                height:
                    90px;
            }


            .cookie-banner__actions {
                flex-direction:
                    column;
            }


            .cookie-banner__actions .cookie-btn {
                width:
                    100%;

                text-align:
                    center;
            }


            .cookie-banner__text p {
                font-size:
                    0.85rem;

                line-height:
                    1.4;
            }
        }


        /* =====================================================
           PRIVACY MODAL
           ===================================================== */

        .privacy-modal-overlay {
            display:
                none;

            position:
                fixed;

            inset:
                0;

            z-index:
                2000;

            align-items:
                center;

            justify-content:
                center;

            padding:
                1rem;

            background:
                rgba(0, 0, 0, 0.65);

            backdrop-filter:
                blur(4px);
        }


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


        .privacy-modal {
            width:
                100%;

            max-width:
                640px;

            max-height:
                85vh;

            display:
                flex;

            flex-direction:
                column;

            overflow:
                hidden;

            color:
                #e2e8f0;

            background:
                #1e293b;

            border:
                1px solid rgba(255, 255, 255, 0.12);

            border-radius:
                16px;

            box-shadow:
                0 24px 60px rgba(0, 0, 0, 0.5);
        }


        .privacy-modal__header {
            display:
                flex;

            align-items:
                center;

            justify-content:
                space-between;

            flex-shrink:
                0;

            padding:
                1.25rem 1.5rem;

            border-bottom:
                1px solid rgba(255, 255, 255, 0.1);
        }


        .privacy-modal__header h2 {
            margin:
                0;

            color:
                #ffffff;

            font-size:
                1.1rem;

            font-weight:
                700;
        }


        .privacy-modal__close {
            padding:
                0.25rem;

            color:
                rgba(255, 255, 255, 0.6);

            background:
                none;

            border:
                none;

            border-radius:
                6px;

            font-size:
                1.4rem;

            line-height:
                1;

            cursor:
                pointer;

            transition:
                color 0.2s ease,
                background 0.2s ease;
        }


        .privacy-modal__close:hover {
            color:
                #ffffff;

            background:
                rgba(255, 255, 255, 0.1);
        }


        .privacy-modal__body {
            overflow-y:
                auto;

            padding:
                1.5rem;

            color:
                rgba(255, 255, 255, 0.85);

            font-size:
                0.92rem;

            line-height:
                1.65;
        }


        .privacy-modal__body h3 {
            margin:
                1.25rem 0 0.4rem;

            color:
                #93c5fd;

            font-size:
                1rem;

            font-weight:
                700;
        }


        .privacy-modal__body h3:first-child {
            margin-top:
                0;
        }


        .privacy-modal__body p {
            margin:
                0 0 0.75rem;
        }


        .privacy-modal__body ul {
            margin:
                0 0 0.75rem;

            padding-left:
                1.25rem;
        }


        .privacy-modal__body ul li {
            margin-bottom:
                0.35rem;
        }


        .privacy-modal__footer {
            flex-shrink:
                0;

            padding:
                1rem 1.5rem;

            text-align:
                right;

            border-top:
                1px solid rgba(255, 255, 255, 0.1);
        }


        .privacy-modal__btn-close {
            padding:
                0.6rem 1.4rem;

            color:
                #ffffff;

            background:
                linear-gradient(135deg,
                    #0066cc 0%,
                    #10b981 100%);

            border:
                none;

            border-radius:
                10px;

            font-size:
                0.9rem;

            font-weight:
                700;

            cursor:
                pointer;
        }


        /* =====================================================
           MENU / LANGUAGE ICONS
           ===================================================== */

        #mobile-menu-dropdown i,
        #mobile-menu-dropdown a i,
        #locale-dropdown-menu i,
        #locale-dropdown-menu a i,
        #locale-dropdown-menu-mobile i,
        #locale-dropdown-menu-mobile a i {
            background:
                transparent !important;

            border:
                none !important;

            outline:
                none !important;
        }


        /* =====================================================
           ACCESSIBILITY
           ===================================================== */

        .hero-btn:focus-visible,
        .btn-primary:focus-visible,
        .btn-secondary:focus-visible,
        .cookie-btn:focus-visible,
        .cookie-manage:focus-visible,
        .privacy-modal__close:focus-visible,
        .privacy-modal__btn-close:focus-visible {
            outline:
                3px solid rgba(147, 197, 253, 0.9);

            outline-offset:
                3px;
        }


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

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

            html {
                scroll-behavior:
                    auto;
            }


            *,
            *::before,
            *::after {
                animation-duration:
                    0.01ms !important;

                animation-iteration-count:
                    1 !important;

                transition-duration:
                    0.01ms !important;
            }
        }


        /* =====================================================
           VERY SMALL DEVICES
           ===================================================== */

        @media (max-width: 320px) {

            .hero-container {
                padding-left:
                    0.75rem;

                padding-right:
                    0.75rem;
            }


            .hero-title {
                font-size:
                    1.75rem;
            }


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


            .hero-btn {
                max-width:
                    100%;
            }
        }

        /* =========HERO IMAGE — RESPONSIVE ART DIRECTION=== */

        .hero-section img {
            width: 100%;
            height: 100%;

            object-fit: cover;

            /* Desktop : priorité aux visages */
            object-position: center 24%;

            filter:
                brightness(1.04) saturate(1.02) contrast(1.01);

            transform: scale(1.01);
        }


        /* ====== TABLETTE  */

        @media (min-width: 768px) and (max-width: 1199px) {

            .hero-section img {
                object-position: center 28%;
            }
        }

        @media (max-width: 767px) {

            .hero-section img {
                object-position: center center;

                transform: scale(1);

                filter:
                    brightness(1.02) saturate(1);
            }
        }

        /* =======PATIENT SECTION====== */

        .patient-section {
            padding: 4rem 0;
            background: #ffffff;
        }

        /* Téléphone */
        .patient-phone-wrapper {
            width: 100%;
            max-width: 280px;

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

            margin: 0 auto;
        }

        /* Image du téléphone */
        .patient-phone-image {
            display: block;

            width: 100%;
            max-width: 280px;

            height: auto;

            object-fit: contain;

            margin: 0 auto;
        }


        /* =====DESKTOP===== */

        @media (min-width: 1024px) {

            .patient-section {
                padding-top: 4rem;
                padding-bottom: 5rem;
            }

            .patient-phone-wrapper {
                max-width: 300px;

                /*
         * Permet de centrer verticalement
         * le téléphone avec le contenu
         */
                transform: translateY(0);
            }

            .patient-phone-image {
                max-width: 300px;
            }
        }


        /* =====TABLETTE===== */

        @media (min-width: 768px) and (max-width: 1023px) {

            .patient-section {
                padding-top: 3.5rem;
                padding-bottom: 4rem;
            }

            .patient-phone-wrapper {
                max-width: 270px;
            }

            .patient-phone-image {
                max-width: 270px;
            }
        }


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

        @media (max-width: 767px) {

            .patient-section {
                padding-top: 3rem;
                padding-bottom: 3.5rem;
            }

            .patient-phone-wrapper {
                max-width: 240px;
            }

            .patient-phone-image {
                max-width: 240px;
            }
        }

        .practitioner-waitlist-section {
            padding: 5rem 0;
            background: #f7f9fe;
            font-family: inherit;
        }

        .practitioner-waitlist-layout {
            display: grid;
            grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
            align-items: center;
            gap: clamp(2rem, 5vw, 4.5rem);
            max-width: 1080px;
            margin: 0 auto;
        }

        .practitioner-waitlist-intro {
            text-align: center;
        }

        .practitioner-waitlist-icon {
            position: relative;
            width: 92px;
            height: 92px;
            display: grid;
            place-items: center;
            margin: 0 auto 1.5rem;
            color: #1565c0;
            font-size: 3.5rem;
        }

        .practitioner-waitlist-icon .fa-stethoscope {
            position: absolute;
            right: 4px;
            bottom: 8px;
            font-size: 1.7rem;
            color: #2563eb;
            transform: rotate(-12deg);
        }

        .practitioner-waitlist-title {
            max-width: 390px;
            margin: 0 auto;
            color: #101936;
            font-size: 1.875rem;
            line-height: 1.4;
            font-weight: 800;
        }

        .practitioner-waitlist-title span {
            color: #1267d6;
        }

        .practitioner-waitlist-description {
            max-width: 390px;
            margin: 1.25rem auto 0;
            color: #667085;
            font-size: 1rem;
            line-height: 1.55;
        }

        .practitioner-store-links {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin-top: 2.4rem;
        }

        .practitioner-store-link {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            min-width: 150px;
            padding: 0.55rem 0.8rem;
            color: #111827;
            background: #ffffff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
            text-decoration: none;
        }

        .practitioner-store-link i {
            font-size: 1.65rem;
        }

        .practitioner-store-link small,
        .practitioner-store-link strong {
            display: block;
            line-height: 1.1;
        }

        .practitioner-store-link small {
            font-size: 0.625rem;
            font-weight: 700;
            text-transform: uppercase;
        }

        .practitioner-store-link strong {
            font-size: 1rem;
        }

        .practitioner-waitlist-form {
            padding: clamp(1.5rem, 3vw, 2.5rem);
            background: #ffffff;
            border: 1px solid #e2e5eb;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
        }

        .practitioner-waitlist-alert {
            display: flex;
            align-items: flex-start;
            gap: 0.7rem;
            margin-bottom: 1.25rem;
            padding: 0.9rem 1rem;
            border-radius: 9px;
            font-size: 0.9rem;
            line-height: 1.45;
        }

        .practitioner-waitlist-alert strong {
            display: block;
            margin-bottom: 0.2rem;
        }

        .practitioner-waitlist-alert--success {
            color: #166534;
            background: #f0fdf4;
            border: 1px solid #bbf7d0;
        }

        .practitioner-waitlist-alert--error {
            color: #991b1b;
            background: #fef2f2;
            border: 1px solid #fecaca;
        }

        .practitioner-waitlist-alert ul {
            margin: 0.35rem 0 0;
            padding-left: 1.1rem;
        }

        .practitioner-waitlist-input-wrap input.is-invalid,
        .practitioner-waitlist-input-wrap select.is-invalid {
            border-color: #dc2626;
            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
        }

        .practitioner-country-select {
            position: relative;
        }

        .practitioner-country-native-select {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            overflow: hidden !important;
            clip: rect(0 0 0 0) !important;
            clip-path: inset(50%) !important;
            white-space: nowrap !important;
        }

        .practitioner-country-trigger {
            width: 100%;
            height: 46px;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0 2.75rem 0 3rem;
            color: #6b7280;
            background: #ffffff;
            border: 1px solid #e5e7eb;
            border-radius: 9px;
            font-family: inherit;
            font-size: 0.875rem;
            text-align: left;
            cursor: pointer;
        }

        .practitioner-country-trigger::after {
            content: "";
            position: absolute;
            top: 50%;
            right: 1rem;
            width: 0.5rem;
            height: 0.5rem;
            border-right: 2px solid #6b7280;
            border-bottom: 2px solid #6b7280;
            transform: translateY(-65%) rotate(45deg);
            pointer-events: none;
        }

        .practitioner-country-trigger:focus-visible,
        .practitioner-country-select.is-open .practitioner-country-trigger {
            border-color: #1769e8;
            box-shadow: 0 0 0 3px rgba(23, 105, 232, 0.12);
            outline: none;
        }

        .practitioner-country-select.is-invalid .practitioner-country-trigger {
            border-color: #dc2626;
            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
        }

        .practitioner-country-trigger .fi {
            flex: 0 0 auto;
            width: 1.35rem;
            height: 1rem;
            border-radius: 2px;
        }

        .practitioner-country-menu {
            position: absolute;
            top: calc(100% + 0.4rem);
            right: 0;
            left: 0;
            z-index: 30;
            display: none;
            max-height: 260px;
            overflow-y: auto;
            padding: 0.35rem;
            background: #ffffff;
            border: 1px solid #dbe3ee;
            border-radius: 9px;
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
        }

        .practitioner-country-select.is-open .practitioner-country-menu {
            display: block;
        }

        .practitioner-country-option {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 0.7rem;
            padding: 0.6rem 0.7rem;
            color: #1f2937;
            background: transparent;
            border: 0;
            border-radius: 6px;
            font: inherit;
            text-align: left;
            cursor: pointer;
        }

        .practitioner-country-option:hover,
        .practitioner-country-option.is-selected {
            color: #1769e8;
            background: #eff6ff;
        }

        .practitioner-country-option .fi {
            flex: 0 0 auto;
            width: 1.35rem;
            height: 1rem;
            border-radius: 2px;
        }

        .practitioner-waitlist-field {
            display: grid;
            grid-template-columns: 105px minmax(0, 1fr);
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.2rem;
        }

        .practitioner-waitlist-field label {
            color: #111827;
            font-size: 0.875rem;
            line-height: 1.25;
            font-weight: 700;
        }

        .practitioner-waitlist-input-wrap {
            position: relative;
        }

        .practitioner-waitlist-input-wrap i {
            position: absolute;
            top: 50%;
            left: 1rem;
            color: #6b7280;
            font-size: 1rem;
            transform: translateY(-50%);
            pointer-events: none;
        }

        .practitioner-waitlist-input-wrap input,
        .practitioner-waitlist-input-wrap select {
            width: 100%;
            height: 46px;
            padding: 0 1rem 0 3rem;
            color: #6b7280;
            background: #ffffff;
            border: 1px solid #e5e7eb;
            border-radius: 9px;
            font-family: inherit;
            font-size: 0.875rem;
            outline: none;
        }

        .practitioner-waitlist-submit {
            width: 100%;
            height: 48px;
            margin-top: 0.15rem;
            color: #ffffff;
            background: #1769e8;
            border: 0;
            border-radius: 9px;
            font-family: inherit;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
        }

        .practitioner-waitlist-submit:hover {
            background: #125dcc;
        }

        .practitioner-waitlist-security {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            gap: 0.5rem;
            margin: 1.25rem auto 0;
            color: #7b8493;
            font-size: 0.875rem;
            line-height: 1.45;
            text-align: center;
        }

        @media (max-width: 767px) {
            .practitioner-waitlist-section {
                padding: 3.5rem 0;
            }

            .practitioner-waitlist-layout {
                grid-template-columns: 1fr;
                gap: 2.5rem;
            }

            .practitioner-store-links {
                flex-wrap: wrap;
                gap: 0.75rem;
                margin-top: 1.75rem;
            }

            .practitioner-store-link {
                flex: 1 1 145px;
            }

            .practitioner-waitlist-form {
                padding: 1.25rem;
            }

            .practitioner-waitlist-title {
                font-size: 1.5rem;
            }

            .practitioner-waitlist-field {
                grid-template-columns: 1fr;
                gap: 0.45rem;
                margin-bottom: 1rem;
            }
        }

        /* ==================== BETA PROGRAMME ==================== */

        .beta-section {
            max-width: 1380px;
            margin: 25px auto;
            padding: 34px 35px 42px;
            background: linear-gradient(135deg, #eef5ff, #e8f2ff);
            border-radius: 30px;
            text-align: center;
        }

        .beta-title {
            margin: 0 0 30px;
            color: #0868e8;
            font-size: 40px;
            font-weight: 800;
        }

        .beta-heading {
            max-width: 760px;
            margin: 0 auto 28px;
            font-size: 42px;
            line-height: 1.22;
            font-weight: 800;
        }

        .beta-heading span {
            color: #0868e8;
        }

        .beta-description {
            max-width: 780px;
            margin: 0 auto 42px;
            color: #4d596f;
            font-size: 21px;
            line-height: 1.55;
        }

        .beta-button {
            width: 590px;
            max-width: 100%;
            padding: 20px 30px;
            border: 0;
            border-radius: 17px;
            background: #0868e8;
            color: #fff;
            font-size: 25px;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 8px 20px rgba(8, 104, 232, .2);
        }

        .beta-button:hover,
        .linkedin-button:hover {
            background: #0758c5;
        }

        .beta-limited {
            margin-top: 28px;
            color: #4d596f;
            font-size: 19px;
        }

        .overlay {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 9999;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background: rgba(0, 0, 0, .68);
        }

        .overlay.active {
            display: flex;
        }

        .modal {
            position: relative;
            width: 1050px;
            max-width: 100%;
            max-height: 94vh;
            overflow-y: auto;
            padding: 45px 40px 28px;
            background: #fff;
            border-radius: 28px;
        }

        .close {
            position: absolute;
            top: 10px;
            right: 16px;
            border: 0;
            background: transparent;
            color: #101a32;
            font-size: 34px;
            cursor: pointer;
        }

        .success-header,
        .support,
        .linkedin,
        .thanks {
            display: flex;
            align-items: center;
        }

        .success-header {
            gap: 32px;
            margin-bottom: 32px;
        }

        .success-icon {
            width: 210px;
            height: 210px;
            display: flex;
            flex: none;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: #eef5ff;
        }

        .success-check {
            width: 110px;
            height: 110px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: #38b94b;
            color: white;
            font-size: 65px;
            font-weight: bold;
        }

        .success-text h2 {
            margin: 0 0 12px;
            font-size: 38px;
        }

        .success-text h3 {
            margin: 0 0 20px;
            font-size: 23px;
        }

        .success-text h3 span {
            color: #0868e8;
        }

        .success-text p,
        .support p,
        .step p,
        .linkedin-content p,
        .thanks p {
            color: #46516a;
            line-height: 1.5;
        }

        .success-text p {
            margin: 0;
            color: #303b52;
            font-size: 18px;
        }

        .support {
            align-items: flex-start;
            gap: 20px;
            margin-bottom: 22px;
        }

        .heart,
        .step-icon,
        .linkedin-icon {
            display: flex;
            flex: none;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }

        .heart {
            width: 90px;
            height: 90px;
            background: #f2f5f9;
            font-size: 38px;
        }

        .support h3,
        .step h3 {
            margin: 7px 0;
            font-size: 20px;
        }

        .support p {
            margin: 0;
            font-size: 16px;
        }

        .video-box {
            padding: 22px;
            border: 1px solid #dce2ec;
            border-radius: 18px;
        }

        .step {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 22px;
        }

        .step-icon,
        .linkedin-icon {
            width: 52px;
            height: 52px;
            background: #eef5ff;
            color: #0868e8;
            font-weight: 800;
        }

        .step p,
        .video-card p,
        .linkedin-content p,
        .thanks p {
            margin: 0;
            font-size: 15px;
        }

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

        .video-card {
            padding: 3px;
            border: 2px solid transparent;
            border-radius: 16px;
            cursor: pointer;
        }

        .video-card.selected {
            border-color: #0868e8;
        }

        .thumbnail {
            position: relative;
            aspect-ratio: 16 / 9;
            overflow: hidden;
            border-radius: 14px;
            background: linear-gradient(135deg, #075ed6, #0874ef);
        }

        .thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .play {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 52px;
            height: 52px;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: #fff;
            color: #0868e8;
            font-size: 25px;
        }

        .duration {
            position: absolute;
            right: 8px;
            bottom: 8px;
            padding: 5px 8px;
            border-radius: 7px;
            background: rgba(0, 0, 0, .78);
            color: #fff;
            font-size: 12px;
        }

        .video-card h4 {
            margin: 10px 0 5px;
            font-size: 15px;
            line-height: 1.3;
        }

        .video-card p {
            color: #59647a;
            line-height: 1.4;
        }

        .linkedin {
            gap: 14px;
            padding: 22px 0;
            margin-top: 22px;
            border-top: 1px solid #e2e6ed;
            border-bottom: 1px solid #e2e6ed;
        }

        .linkedin-icon {
            font-size: 23px;
        }

        .linkedin-content {
            flex: 1;
        }

        .linkedin-content h3 {
            margin: 0 0 5px;
            font-size: 20px;
        }

        .linkedin-content p {
            color: #536078;
        }

        .linkedin-button {
            padding: 15px 24px;
            border: 0;
            border-radius: 10px;
            background: #0868e8;
            color: #fff;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
        }

        .thanks {
            gap: 16px;
            margin-top: 18px;
            padding: 17px 20px;
            background: #eef5ff;
            border-radius: 15px;
        }

        .thanks-text {
            flex: 1;
        }

        .thanks h3 {
            margin: 0 0 4px;
            font-size: 17px;
        }

        .thanks p {
            color: #4c5870;
            font-size: 14px;
        }

        .thanks-icon {
            font-size: 28px;
        }

        @media (max-width: 800px) {
            .beta-section {
                margin: 15px;
                padding: 28px 20px 35px;
                border-radius: 22px;
            }

            .beta-title {
                font-size: 26px;
            }

            .beta-heading {
                font-size: 30px;
            }

            .beta-description {
                font-size: 17px;
            }

            .beta-button {
                font-size: 20px;
            }

            .modal {
                padding: 42px 18px 24px;
                border-radius: 20px;
            }

            .success-header {
                flex-direction: column;
                text-align: center;
            }

            .success-icon {
                width: 125px;
                height: 125px;
            }

            .success-check {
                width: 68px;
                height: 68px;
                font-size: 40px;
            }

            .success-text h2 {
                font-size: 28px;
            }

            .success-text h3 {
                font-size: 20px;
            }

            .success-text p {
                font-size: 16px;
            }

            .video-grid {
                grid-template-columns: 1fr;
            }

            .linkedin {
                flex-direction: column;
                text-align: center;
            }

            .linkedin-content {
                width: 100%;
            }

            .linkedin-button {
                width: 100%;
            }
        }

        @media (min-width: 501px) and (max-width: 800px) {
            .video-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* ==================== BETA PREMIUM OVERRIDES ==================== */

        .beta-section {
            position: relative;
            width: calc(100% - 40px);
            max-width: 1180px;
            margin: 30px auto;
            padding: 64px 50px 58px;
            overflow: hidden;
            background:
                radial-gradient(circle at 15% 20%, rgba(8, 104, 232, .10), transparent 30%),
                radial-gradient(circle at 85% 80%, rgba(34, 181, 115, .08), transparent 28%),
                linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
            border: 1px solid rgba(8, 104, 232, .08);
            border-radius: 30px;
            box-shadow: 0 20px 60px rgba(8, 104, 232, .07);
        }

        .beta-section::before,
        .beta-section::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
        }

        .beta-section::before {
            width: 280px;
            height: 280px;
            top: -150px;
            right: -100px;
            background: rgba(8, 104, 232, .06);
        }

        .beta-section::after {
            width: 220px;
            height: 220px;
            bottom: -130px;
            left: -80px;
            background: rgba(34, 181, 115, .05);
        }

        .beta-title {
            position: relative;
            z-index: 1;
            margin-bottom: 18px;
            color: #0868e8;
            font-size: 14px;
            font-weight: 800;
            letter-spacing: .14em;
            text-transform: uppercase;
        }

        .beta-heading {
            position: relative;
            z-index: 1;
            max-width: 760px;
            margin-bottom: 20px;
            color: #172033;
            font-size: clamp(34px, 4vw, 52px);
            line-height: 1.12;
            letter-spacing: -.035em;
        }

        .beta-description {
            position: relative;
            z-index: 1;
            max-width: 720px;
            margin-bottom: 32px;
            color: #59657a;
            font-size: 17px;
            line-height: 1.7;
        }

        .beta-button {
            position: relative;
            z-index: 1;
            width: auto;
            min-width: 250px;
            padding: 15px 28px;
            border-radius: 12px;
            background: linear-gradient(135deg, #0868e8, #0874ef);
            font-size: 16px;
            box-shadow: 0 10px 25px rgba(8, 104, 232, .22);
            transition: transform .2s ease, box-shadow .2s ease;
        }

        .beta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 30px rgba(8, 104, 232, .28);
        }

        .beta-limited {
            position: relative;
            z-index: 1;
            margin-top: 16px;
            color: #7b8799;
            font-size: 13px;
        }

        .overlay {
            z-index: 99999;
            align-items: flex-start;
            padding: 24px;
            overflow-y: auto;
            background: rgba(10, 18, 35, .68);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        .modal {
            width: min(1120px, 100%);
            max-height: calc(100vh - 48px);
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            padding: 0;
            border: 1px solid rgba(255, 255, 255, .7);
            border-radius: 24px;
            box-shadow: 0 30px 90px rgba(15, 23, 42, .25);
        }

        .modal-scroll {
            overflow-y: auto;
            padding: 34px 38px 30px;
            scrollbar-width: thin;
            scrollbar-color: #cbd5e1 transparent;
        }

        .modal-scroll::-webkit-scrollbar {
            width: 7px;
        }

        .modal-scroll::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 20px;
        }

        .close {
            top: 18px;
            right: 18px;
            z-index: 20;
            width: 38px;
            height: 38px;
            border: 1px solid #e5eaf1;
            border-radius: 50%;
            background: rgba(255, 255, 255, .92);
            color: #526078;
            font-size: 24px;
            box-shadow: 0 4px 15px rgba(15, 23, 42, .08);
        }

        .success-header {
            gap: 22px;
            padding-right: 45px;
            margin-bottom: 28px;
        }

        .success-icon {
            width: 78px;
            height: 78px;
            flex: 0 0 78px;
            background: #ecfbf4;
            border: 8px solid #f4fdf8;
        }

        .success-check {
            width: 54px;
            height: 54px;
            background: #22b573;
            font-size: 28px;
            box-shadow: 0 7px 18px rgba(34, 181, 115, .22);
        }

        .success-text h2 {
            margin-bottom: 5px;
            color: #172033;
            font-size: 28px;
        }

        .success-text h3,
        .support h3,
        .step h3,
        .linkedin-content h3,
        .thanks h3 {
            color: #172033;
        }

        .success-text h3 {
            margin-bottom: 8px;
            font-size: 17px;
        }

        .success-text p {
            font-size: 14px;
        }

        .support {
            gap: 15px;
            margin-bottom: 22px;
            padding: 18px 20px;
            border: 1px solid #edf1f5;
            border-radius: 16px;
            background: #fafbfd;
        }

        .heart {
            width: 42px;
            height: 42px;
            flex: 0 0 42px;
            border-radius: 12px;
            background: #eef5ff;
            color: #0868e8;
            font-size: 19px;
        }

        .support h3,
        .step h3 {
            margin: 1px 0 5px;
            font-size: 15px;
        }

        .support p,
        .step p,
        .linkedin-content p,
        .thanks p {
            font-size: 13px;
        }

        .video-box {
            padding: 22px;
            background: #fff;
            box-shadow: 0 5px 20px rgba(15, 23, 42, .025);
        }

        .step {
            gap: 13px;
            margin-bottom: 20px;
        }

        .step-icon,
        .linkedin-icon {
            width: 44px;
            height: 44px;
            flex: 0 0 44px;
            border-radius: 12px;
            background: #eef5ff;
            color: #0868e8;
        }

        .video-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 14px;
        }

        .video-card {
            min-width: 0;
            padding: 5px;
            border: 1.5px solid transparent;
            border-radius: 15px;
            background: #fff;
            transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
        }

        .video-card:hover {
            transform: translateY(-2px);
            border-color: #cfe0fb;
            box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
        }

        .video-card.selected {
            border-color: #0868e8;
            background: #fafdff;
            box-shadow: 0 0 0 2px rgba(8, 104, 232, .08);
        }

        .thumbnail {
            border-radius: 11px;
            background: linear-gradient(135deg, #075ed6, #0878f5);
        }

        .play {
            width: 44px;
            height: 44px;
            font-size: 17px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
        }

        .duration {
            right: 7px;
            bottom: 7px;
            padding: 4px 7px;
            font-size: 10px;
            font-weight: 600;
        }

        .video-card h4 {
            margin: 9px 2px 4px;
            color: #172033;
            font-size: 13px;
            font-weight: 700;
        }

        .video-card p {
            margin: 0 2px 3px;
            color: #59657a;
            font-size: 11.5px;
        }

        .linkedin {
            gap: 14px;
            margin-top: 20px;
            padding: 18px 0;
        }

        .linkedin-icon {
            background: #eaf3ff;
            color: #0a66c2;
            font-size: 20px;
        }

        .linkedin-content {
            min-width: 0;
        }

        .linkedin-content h3 {
            margin-bottom: 4px;
            font-size: 15px;
        }

        .linkedin-content p {
            color: #59657a;
            line-height: 1.45;
        }

        .linkedin-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            flex-shrink: 0;
            padding: 12px 18px;
            border-radius: 10px;
            background: #0a66c2;
            font-size: 13px;
            box-shadow: 0 7px 16px rgba(10, 102, 194, .18);
        }

        .thanks {
            gap: 13px;
            margin-top: 18px;
            padding: 15px 17px;
            border: 1px solid #e7effa;
            border-radius: 14px;
            background: linear-gradient(135deg, #f3f8ff, #f7fbff);
        }

        .thanks-icon {
            width: 34px;
            height: 34px;
            flex: 0 0 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            background: #fff;
            color: #0868e8;
            font-size: 16px;
        }

        .thanks h3 {
            margin-bottom: 3px;
            font-size: 13px;
        }

        .thanks p {
            color: #59657a;
            font-size: 11.5px;
        }

        @media (max-width: 900px) {
            .modal-scroll {
                padding: 30px 25px 25px;
            }

            .video-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 600px) {
            .beta-section {
                width: calc(100% - 24px);
                margin: 15px auto;
                padding: 42px 22px 38px;
                border-radius: 22px;
            }

            .beta-heading {
                font-size: 34px;
            }

            .beta-description {
                font-size: 15px;
            }

            .beta-button {
                width: 100%;
            }

            .overlay {
                padding: 10px;
            }

            .modal {
                max-height: calc(100vh - 20px);
                border-radius: 20px;
            }

            .modal-scroll {
                padding: 28px 16px 20px;
            }

            .success-header {
                align-items: flex-start;
                gap: 15px;
                padding-right: 38px;
                margin-bottom: 20px;
            }

            .success-icon {
                width: 58px;
                height: 58px;
                flex-basis: 58px;
                border-width: 6px;
            }

            .success-check {
                width: 42px;
                height: 42px;
                font-size: 22px;
            }

            .success-text h2 {
                font-size: 22px;
            }

            .success-text h3 {
                font-size: 14px;
            }

            .success-text p {
                font-size: 12px;
            }

            .support,
            .video-box {
                padding: 15px;
            }

            .video-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .video-card {
                display: grid;
                grid-template-columns: 125px 1fr;
                column-gap: 10px;
                padding: 5px;
            }

            .video-card .thumbnail {
                grid-row: span 2;
            }

            .video-card h4 {
                align-self: end;
                margin: 4px 5px 2px;
            }

            .video-card p {
                align-self: start;
                margin: 2px 5px;
            }

            .linkedin {
                flex-wrap: wrap;
            }

            .linkedin-content {
                flex: 1 1 calc(100% - 60px);
            }

            .linkedin-button {
                width: 100%;
            }

            .thanks {
                align-items: flex-start;
            }

            .thanks-icon:last-child {
                display: none;
            }
        }

        @media (max-width: 390px) {
            .modal-scroll {
                padding-right: 12px;
                padding-left: 12px;
            }

            .success-header {
                padding-right: 30px;
            }

            .success-icon {
                width: 50px;
                height: 50px;
                flex-basis: 50px;
            }

            .success-check {
                width: 36px;
                height: 36px;
                font-size: 19px;
            }

            .success-text h2 {
                font-size: 20px;
            }

            .video-card {
                grid-template-columns: 105px 1fr;
            }
        }

        /* ==================== BETA REFERENCE LAYOUT ==================== */

        .modal {
            width: 1050px;
            max-width: 100%;
            max-height: 94vh;
            overflow: hidden;
            padding: 0;
            font-family: Arial, Helvetica, sans-serif;
        }

        .modal-scroll {
            overflow-y: auto;
            padding: 45px 40px 28px;
        }

        .success-header {
            align-items: center;
            gap: 32px;
            padding-right: 0;
            margin-bottom: 32px;
        }

        .success-icon {
            width: 210px;
            height: 210px;
            flex: none;
            border: 0;
            background: #eef5ff;
        }

        .success-check {
            width: 110px;
            height: 110px;
            background: #38b94b;
            font-size: 65px;
            box-shadow: none;
        }

        .success-text h2 {
            margin: 0 0 12px;
            color: #101a32;
            font-size: 38px;
            line-height: normal;
            font-weight: 700;
        }

        .success-text h3 {
            margin: 0 0 20px;
            color: #101a32;
            font-size: 23px;
            line-height: normal;
            font-weight: 700;
        }

        .success-text p {
            margin: 0;
            color: #303b52;
            font-size: 18px;
            line-height: 1.5;
            font-weight: 400;
        }

        .support {
            gap: 20px;
            margin-bottom: 22px;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
        }

        .heart {
            width: 90px;
            height: 90px;
            flex: none;
            border-radius: 50%;
            background: #f2f5f9;
            color: inherit;
            font-size: 38px;
        }

        .support h3 {
            margin: 7px 0;
            color: #101a32;
            font-size: 20px;
            line-height: normal;
            font-weight: 700;
        }

        .support p {
            margin: 0;
            color: #46516a;
            font-size: 16px;
            line-height: 1.5;
            font-weight: 400;
        }

        @media (max-width: 800px) {
            .modal-scroll {
                padding: 42px 18px 24px;
            }

            .success-header {
                flex-direction: column;
                padding-right: 0;
                text-align: center;
            }

            .success-icon {
                width: 125px;
                height: 125px;
            }

            .success-check {
                width: 68px;
                height: 68px;
                font-size: 40px;
            }

            .success-text h2 {
                font-size: 28px;
            }

            .success-text h3 {
                font-size: 20px;
            }

            .success-text p {
                font-size: 16px;
            }
        }