body {
            overflow-x: hidden;
            cursor: none; /* Hide default cursor */
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        /* Hide scrollbar for all browsers */
        body::-webkit-scrollbar {
            display: none;
        }
        body {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }

        /* Custom Cursor */
        .cursor-dot {
            position: fixed;
            top: 0;
            left: 0;
            width: 8px;
            height: 8px;
            background-color: #2563eb;
            border-radius: 50%;
            z-index: 9999;
            pointer-events: none;
            transform: translate(-50%, -50%);
        }
        
        .cursor-jelly {
            position: fixed;
            top: 0;
            left: 0;
            width: 40px;
            height: 40px;
            border: 1px solid rgba(37, 99, 235, 0.5);
            border-radius: 50%;
            z-index: 9998;
            pointer-events: none;
            transform: translate(-50%, -50%);
        }
        
        /* Dark Mode Cursor Adjustments */
        .dark .cursor-dot {
            background-color: #3b82f6;
        }
        .dark .cursor-jelly {
            border-color: rgba(59, 130, 246, 0.5);
        }
        
        /* Cursor Hover State */
        body.hovering .cursor-jelly {
            background-color: rgba(37, 99, 235, 0.1);
            border-color: transparent;
            width: 60px;
            height: 60px;
        }
        .dark body.hovering .cursor-jelly {
            background-color: rgba(59, 130, 246, 0.1);
        }
        
        /* Shimmer Text Effect */
        .text-shimmer {
            background: linear-gradient(to right, #1e293b 20%, #2563eb 40%, #2563eb 60%, #1e293b 80%);
            background-size: 200% auto;
            color: #2563eb; 
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: shine 5s linear infinite;
        }
        .dark .text-shimmer {
            background: linear-gradient(to right, #f8fafc 20%, #3b82f6 40%, #3b82f6 60%, #f8fafc 80%);
            background-size: 200% auto;
            color: #3b82f6;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        @keyframes shine {
            to { background-position: 200% center; }
        }

        /* 3D Card Tilt Base Styles */
        .service-card {
            transform-style: preserve-3d;
            transform: perspective(1000px);
            opacity: 1; /* Default visibility */
            visibility: visible;
        }
        
        /* Utilities */
        .glass-panel {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        }
        .dark .glass-panel {
            background: rgba(2, 6, 23, 0.85);
            border: 1px solid rgba(30, 41, 59, 0.5);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
        }

        /* FAQ Accordion Transitions */
        .faq-content {
            transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
        }
        .faq-item.active .faq-content {
            max-height: 200px;
            opacity: 1;
        }
        .faq-icon {
            transition: transform 0.3s ease;
        }
        .faq-item.active .faq-icon {
            transform: rotate(180deg);
        }

        /* Loader */
        .loader-overlay {
            position: fixed;
            inset: 0;
            background: #fff;
            z-index: 10000;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: opacity 0.5s ease-out;
            pointer-events: auto;
        }
        .dark .loader-overlay {
            background: #020617;
        }

        /* Liquid Canvas Styles */
        #liquidCanvas {
            position: fixed;
            inset: 0;
            z-index: -1; 
            width: 100%;
            height: 100%;
            /* This filter creates the "gooey/liquid" effect by blurring the circles together */
            filter: blur(80px);
            opacity: 0.6;
            pointer-events: none;
            /* Reduce motion and opacity on mobile to prevent distraction */
            will-change: auto;
        }

        /* Reduce gradient distraction on mobile devices */
        @media (max-width: 768px) {
            #liquidCanvas {
                opacity: 0.3;
                filter: blur(100px);
            }
        }

        /* Scroll Reveal Animation Classes */
        .reveal-up {
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        /* Changed from 'active' to 'revealed' to prevent conflict with FAQ active state */
        .reveal-up.revealed {
            opacity: 1;
            transform: translateY(0);
        }

        /* Click Ripple Effect */
        .click-ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(37, 99, 235, 0.4);
            transform: scale(0);
            animation: ripple-anim 0.6s linear;
            pointer-events: none;
            z-index: 9999;
        }
        .dark .click-ripple {
            background: rgba(59, 130, 246, 0.4);
        }
        @keyframes ripple-anim {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }
        
        /* Button Active State Scale */
        button:active, a:active {
            transform: scale(0.95);
        }

        /* Mobile Menu Items - initial state (prevent flash) */
        @media (max-width: 768px) {
            #mobileMenu .menu-item {
                opacity: 0;
                transform: translateY(-20px) rotate(-6deg);
                will-change: transform, opacity;
            }
        }

        /* Desktop nav 'Premium' animation styles */
        .nav-desktop-item {
            position: relative;
            opacity: 0;
            transform: translateY(-20px);
            animation: navFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        /* Staggered animation delays for each nav item */
        .nav-desktop-item:nth-child(1) { animation-delay: 0.1s; }
        .nav-desktop-item:nth-child(2) { animation-delay: 0.2s; }
        .nav-desktop-item:nth-child(3) { animation-delay: 0.3s; }
        .nav-desktop-item:nth-child(4) { animation-delay: 0.4s; }
        .nav-desktop-item:nth-child(5) { animation-delay: 0.5s; }
        .nav-desktop-item:nth-child(6) { animation-delay: 0.6s; }
        .nav-desktop-item:nth-child(8) { animation-delay: 0.7s; } /* Theme toggle */
        .nav-desktop-item:nth-child(9) { animation-delay: 0.8s; } /* Start Project button */

        @keyframes navFadeIn {
            0% {
                opacity: 0;
                transform: translateY(-20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Keep an accessible focus style */
        .nav-desktop-item:focus-visible {
            outline: 3px solid rgba(37, 99, 235, 0.12);
            outline-offset: 3px;
        }

        /* Fast Horizontal Mouse Movement Spark Effect */
        .spark {
            position: fixed;
            width: 10px;
            height: 10px;
            background: #FF5733; /* Vivago Brand Color? */
            border-radius: 50%;
            pointer-events: none;
            animation: fade-out 0.8s forwards;
            z-index: 9999;
        }

        @keyframes fade-out {
            to {
                transform: scale(0);
                opacity: 0;
            }
        }

         /* Case Study Specific Styles */
        .project-stat-border {
            border-right: 1px solid rgba(148, 163, 184, 0.2);
        }
        .dark .project-stat-border {
            border-right: 1px solid rgba(255, 255, 255, 0.1);
        }
        @media (max-width: 768px) {
            .project-stat-border { border-right: none; border-bottom: 1px solid rgba(148, 163, 184, 0.2); padding-bottom: 1rem; margin-bottom: 1rem; }
            .dark .project-stat-border { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
        }

        .mockup-shadow {
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }
        .dark .mockup-shadow {
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        }