body {
            font-family: 'Inter', sans-serif;
        }

        /* Smooth scrolling with padding for fixed nav */
        html,
        body {
            scroll-behavior: smooth;
            scroll-padding-top: 7rem;
            overflow-x: hidden !important;
            max-width: 100vw;
            background-color: #000814;
            /* Prevent white flash during repaint */
            scrollbar-width: none;
            /* Hide scrollbar Firefox */
            -ms-overflow-style: none;
            /* Hide scrollbar IE/Edge */
        }

        /* Hide scrollbar for Chrome, Safari and Opera */
        ::-webkit-scrollbar {
            display: none;
        }

        /* Popup animation */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: scale(0.95);
            }

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

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

        /* Smooth gradient fade for service cards */
        .service-card-gradient {
            background: linear-gradient(to top,
                    rgba(29, 78, 216, 0.6) 0%,
                    rgba(37, 99, 235, 0.55) 20%,
                    rgba(59, 130, 246, 0.45) 40%,
                    rgba(96, 165, 250, 0.3) 60%,
                    rgba(147, 197, 253, 0.15) 80%,
                    transparent 100%);
        }

        /* Glow border (About section content container) */
        @keyframes glowBorderShift {
            0% {
                background-position: 0% 50%;
            }

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

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

        .glow-border {
            position: relative;
            isolation: isolate;
            padding: 2px;
            background: linear-gradient(90deg, #3b82f6, #06b6d4, #2563eb, #3b82f6);
            background-size: 300% 300%;
            animation: glowBorderShift 7s ease infinite;
        }

        .glow-border::before {
            content: "";
            position: absolute;
            inset: -14px;
            z-index: -1;
            border-radius: inherit;
            background: inherit;
            filter: blur(22px);
            opacity: 0.25;
        }

        .glow-border__inner {
            height: 100%;
            width: 100%;
            border-radius: inherit;
        }

        @media (prefers-reduced-motion: reduce) {
            .glow-border {
                animation: none;
            }
        }

        /* Active navigation link styles */
        nav {
            position: relative;
            overflow: visible;
        }

        /* Navigation bar scroll states (no left/translate animations to avoid "arc" movement) */
        #navShell {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 50;
            display: flex;
            justify-content: center;
            padding-top: 0;
            pointer-events: none;
            will-change: padding-top;
            transition: padding-top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }

        #navShell #navigation {
            pointer-events: auto;
            width: 100%;
            max-width: 100%;
            border-radius: 0;
            will-change: width, max-width, border-radius;
            transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                        max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                        border-radius 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }

        #navShell.nav-shell-scrolled {
            padding-top: 1rem;
        }

        #navShell.nav-shell-scrolled #navigation {
            width: 95%;
            max-width: 100rem;
            border-radius: 1rem;
        }

        nav>div {
            position: relative;
        }

        .nav-link {
            position: relative;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            display: inline-block;
            cursor: pointer;
        }

        .nav-link:hover {
            color: white;
            transform: translateY(-2px) scale(1.05);
            text-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
        }

        .nav-link:active {
            transform: translateY(0px) scale(0.98);
            opacity: 0.8;
            transition: all 0.1s ease;
        }

        .nav-link.active {
            color: white;
            transform: translateY(1px);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }

        .nav-link.active:hover {
            transform: translateY(0px) scale(1.02);
        }

        .nav-link.active:active {
            transform: translateY(2px) scale(0.97);
            opacity: 0.8;
            transition: all 0.1s ease;
        }

        .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: white;
            box-shadow: 0 1px 3px rgba(255, 255, 255, 0.5);
            border-radius: 2px;
            transform: translateY(26px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            animation: underlineFadeIn 0.3s ease-out;
        }

        @keyframes underlineFadeIn {
            from {
                opacity: 0;
                transform: translateY(26px) scaleX(0);
            }

            to {
                opacity: 1;
                transform: translateY(26px) scaleX(1);
            }
        }

        /* Contain overflow to prevent scrollbar */
        @media (min-width: 1024px) {
            header {
                overflow-x: hidden !important;
                overflow-y: hidden;
                max-width: 100vw;
            }
        }

        /* Particles Background */
        .particles-bg {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            opacity: 0.6;
        }

        .particles-bg canvas {
            width: 100%;
            height: 100%;
            filter: blur(var(--particles-blur, 2px));
        }

        /* Startup Animation */
        .flicker-animation {
            animation: lightFlicker 1.5s linear;
        }

        @keyframes lightFlicker {
            0% {
                opacity: 1;
            }

            33.33% {
                opacity: 1;
            }

            38.56% {
                opacity: 0.7;
            }

            42.48% {
                opacity: 1;
            }

            47.71% {
                opacity: 0.85;
            }

            55.56% {
                opacity: 0.4;
            }

            59.48% {
                opacity: 1;
            }

            66.01% {
                opacity: 0.6;
            }

            76.47% {
                opacity: 0.2;
            }

            84.31% {
                opacity: 0.1;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes fadeInSmooth {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .flicker-animation {
            animation: lightFlicker 1.5s linear;
        }

        .flicker-animation-in {
            animation: lightFlickerIn 1.0s linear forwards;
        }

        .fade-in {
            animation: fadeIn 1s ease-in forwards;
        }

        .quick-fade-in-desktop {
            transform-origin: left center;
            animation: fadeInScaleDesktop 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
            backface-visibility: hidden;
            perspective: 1000px;
            will-change: transform, opacity;
        }

        .quick-fade-in-mobile {
            transform-origin: left center;
            animation: fadeInScaleMobile 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
            backface-visibility: hidden;
            perspective: 1000px;
            will-change: transform, opacity;
        }

        @keyframes fadeInScaleDesktop {
            from {
                opacity: 0;
                transform: scale(0.9);
            }

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

        @keyframes fadeInScaleMobile {
            from {
                opacity: 0;
                transform: scale(0.9);
            }

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

        @keyframes scaleDesktop {
            from {
                transform: scale(0.85);
            }

            to {
                transform: scale(1);
            }
        }

        @keyframes scaleMobile {
            from {
                transform: scale(0.85);
            }

            to {
                transform: scale(1);
            }
        }

        .maison-lit-anim-desktop {
            transform-origin: left center;
            animation:
                scaleDesktop 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards,
                fadeInSmooth 0.8s ease-in 1.0s forwards;
            backface-visibility: hidden;
            perspective: 1000px;
            will-change: transform, opacity;
        }

        .maison-lit-anim-mobile {
            transform-origin: left center;
            animation:
                scaleMobile 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards,
                fadeInSmooth 0.8s ease-in 1.0s forwards;
            backface-visibility: hidden;
            perspective: 1000px;
            will-change: transform, opacity;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes fadeInMobile {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .fade-in-mobile {
            animation: fadeInMobile 1s ease-in forwards;
        }

        /* Hide line break in hero subtitle on tablet to keep it on one line */
        @media (min-width: 768px) and (max-width: 1023px) {
            #hero-subtitle br {
                display: none;
            }
        }

        .particles-fade-in {
            animation: fadeInParticles 1s ease-in forwards;
        }

        @keyframes fadeInParticles {
            from {
                opacity: 0;
            }

            to {
                opacity: 0.6;
            }
        }

        /* Initially hide waves and particles */
        .startup-hidden {
            opacity: 0;
        }

        #hero-gradient {
            transition: background 1s ease-in;
        }

        .fade-up {
            animation: fadeUp 1s ease-out forwards;
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        /* Robust scroll locking */
        .stop-scrolling {
            overflow: hidden !important;
        }

        /* Mobile Sidebar */
        #mobileSidebar.sidebar-open {
            display: block;
        }

        #sidebarOverlay {
            transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: opacity;
        }

        #mobileSidebar.sidebar-open #sidebarOverlay {
            opacity: 1;
        }

        #sidebarContent {
            transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: transform;
        }

        #mobileSidebar.sidebar-open #sidebarContent {
            transform: translateX(0);
        }

        .nav-link-mobile.active {
            color: white;
        }

        /* Parallax elements */
        [data-parallax-speed] {
            will-change: transform;
            transition: transform 0.1s ease-out;
        }

        .parallax-wrapper {
            will-change: transform;
        }