body {
            background-color: #FAFAFA;
            color: #080808;
            overflow-x: hidden;
        }

        h1, h2 { text-wrap: balance; }
        .stat-counter { font-variant-numeric: tabular-nums; }

        .bg-dots {
            background-image: radial-gradient(rgba(8, 8, 8, 0.04) 1px, transparent 1px);
            background-size: 24px 24px;
        }

        .glass-nav {
            background: rgba(250, 250, 250, 0.9);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(8, 8, 8, 0.1);
        }

        /* Animations d'apparition */
        .reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        .reveal-delay-1 {
            transition-delay: 0.1s;
        }

        .reveal-delay-2 {
            transition-delay: 0.2s;
        }

        .reveal-delay-3 {
            transition-delay: 0.3s;
        }

        /* When GSAP is loaded, it handles visibility */
        .gsap-ready .reveal {
            opacity: 1;
            transform: none;
            transition: none;
        }

        /* Liquid Glass Yellow */
        .liquid-glass-yellow {
            background: linear-gradient(135deg, rgba(210, 255, 0, 0.6) 0%, rgba(210, 255, 0, 0.2) 100%);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(210, 255, 0, 0.4);
            border-top: 1px solid rgba(255, 255, 255, 0.9);
            border-left: 1px solid rgba(255, 255, 255, 0.9);
            box-shadow: 0 8px 32px 0 rgba(210, 255, 0, 0.15);
        }

        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #FAFAFA;
            border-left: 1px solid #E5E5E5;
        }

        ::-webkit-scrollbar-thumb {
            background: #080808;
        }

        button:focus {
            outline: none;
        }

        /* Support RTL (Arabe) */
        /* Shimmer effect for liquid-glass-yellow CTA */
        @keyframes shimmer {
            0% {
                background-position: -200% center;
            }

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

        .liquid-glass-yellow-shimmer {
            background: linear-gradient(110deg,
                    rgba(210, 255, 0, 0.6) 0%,
                    rgba(210, 255, 0, 0.2) 40%,
                    rgba(255, 255, 255, 0.5) 50%,
                    rgba(210, 255, 0, 0.2) 60%,
                    rgba(210, 255, 0, 0.6) 100%);
            background-size: 200% 100%;
            animation: shimmer 3s ease-in-out infinite;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(210, 255, 0, 0.4);
            border-top: 1px solid rgba(255, 255, 255, 0.9);
            border-left: 1px solid rgba(255, 255, 255, 0.9);
            box-shadow: 0 8px 32px 0 rgba(210, 255, 0, 0.15);
        }

        html[dir="rtl"] .reveal {
            transform: translateY(20px);
        }

        html[dir="rtl"] .liquid-glass-yellow {
            border-left: none;
            border-right: 1px solid rgba(255, 255, 255, 0.9);
        }

        html[dir="rtl"] .group-hover\:translate-x-1:hover {
            transform: translateX(-0.25rem);
        }

        html[dir="rtl"] .border-l {
            border-left: none;
            border-right-width: 1px;
        }

        html[dir="rtl"] .border-r {
            border-right: none;
            border-left-width: 1px;
        }

        html[dir="rtl"] .ml-4 {
            margin-left: 0;
            margin-right: 1rem;
        }

        html[dir="rtl"] .pl-6 {
            padding-left: 0;
            padding-right: 1.5rem;
        }

        html[dir="rtl"] .lg\:border-l {
            border-left: none;
            border-right-width: 1px;
        }

        html[dir="rtl"] .lg\:pl-8 {
            padding-left: 0;
            padding-right: 2rem;
        }

        html[dir="rtl"] .text-left {
            text-align: right;
        }

        /* Hero video — disable on mobile (data savings + perf) */
        @media (max-width: 768px) {
            .hero-video-el { display: none !important; }
            #hero-overlay { display: none !important; }
        }
        /* Honor user's data-saver preference */
        @media (prefers-reduced-data: reduce) {
            .hero-video-el { display: none !important; }
            #hero-overlay { display: none !important; }
        }

        /* Hero text turns white when video is active (added by JS) */
        #accueil.video-mode .hero-badge { color: rgba(255,255,255,0.7); }
        #accueil.video-mode .hero-badge-line { background: rgba(255,255,255,0.9); }
        #accueil.video-mode h1 {
            color: #FAFAFA;
            text-shadow: 0 2px 24px rgba(0,0,0,0.35);
        }
        #accueil.video-mode .hero-desc {
            color: rgba(255,255,255,0.9);
            text-shadow: 0 1px 12px rgba(0,0,0,0.35);
        }
        /* Dark button stays dark — it has its own contrast */
        /* Light button: invert to glassmorphism on video */
        #accueil.video-mode .hero-btn-light {
            background: rgba(255,255,255,0.12);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-color: rgba(255,255,255,0.4);
            color: #FAFAFA;
        }
        #accueil.video-mode .hero-btn-light:hover {
            background: rgba(255,255,255,0.2);
            border-color: rgba(255,255,255,0.8);
        }