body { 
            font-family: 'Inter', sans-serif; 
            overflow-x: hidden; 
            background-color: #f8fafc; 
            color: #2d3748;
        }
        
        /* Single Page App Routing */
        .page-section { 
            display: none; 
            opacity: 0; 
            transition: opacity 0.5s ease-in-out; 
        }
        .page-section.active { 
            display: block; 
            opacity: 1; 
        }
        
        /* Mobile bottom nav spacer */
        .pb-mobile-nav { padding-bottom: 72px; }
        @media (min-width: 768px) { .pb-mobile-nav { padding-bottom: 0; } }
        
        /* Premium CSS-only load animations */
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(40px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-up { animation: fadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        .delay-100 { animation-delay: 100ms; }
        .delay-200 { animation-delay: 200ms; }
        .delay-300 { animation-delay: 300ms; }
        
        @keyframes smoothZoom {
            from { transform: scale(1); }
            to { transform: scale(1.1); }
        }
        .hero-bg-anim { animation: smoothZoom 25s infinite alternate ease-in-out; }

        /* Premium Hover & Interactive Animations */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
            100% { transform: translateY(0px); }
        }
        .animate-float-slow { animation: float 4s ease-in-out infinite; }
        
        @keyframes shine {
            0% { left: -100%; }
            20% { left: 100%; }
            100% { left: 100%; }
        }
        .btn-shine { position: relative; overflow: hidden; }
        .btn-shine::after {
            content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
            transform: skewX(-20deg); animation: shine 5s infinite;
        }

        .hover-lift { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
        .hover-lift:hover { transform: translateY(-8px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }

        @keyframes kenBurns {
            0% { transform: scale(1); }
            100% { transform: scale(1.08); }
        }
        .animate-ken-burns { animation: kenBurns 20s alternate infinite linear; }

        /* Scroll Reveal Animation Classes */
        .reveal-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal-on-scroll.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Lightbox Styles */
        #lightbox {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(0, 0, 0, 0.95); z-index: 9999;
            display: flex; justify-content: center; align-items: center;
            opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
            backdrop-filter: blur(10px);
        }
        #lightbox.active { opacity: 1; pointer-events: auto; }
        #lightbox img {
            max-width: 90%; max-height: 90vh; object-fit: contain;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            transform: scale(0.95); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        #lightbox.active img { transform: scale(1); }
        .cursor-zoom-in { cursor: zoom-in; }
        
        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #a0aec0; }
    

/* Accessibility and usability enhancements */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
:focus-visible{outline:3px solid #d69e2e;outline-offset:3px}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #d69e2e;outline-offset:3px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal-on-scroll{opacity:1!important;transform:none!important}}
@supports (content-visibility:auto){.page-section.active .reveal-on-scroll{content-visibility:auto;contain-intrinsic-size:1px 700px}}