/* 
         * DESIGN SYSTEM TOKENS
         * Change these values to match your website's exact theme!
         * Currently configured for a premium modern Dark Mode.
         */
        :root {
            /* Color Palette */
            --bg-color: #050505; /* Deep background */
            --brand-50: #f5f3ff;
            --brand-500: #8b5cf6; /* Primary Accent (Purple) */
            --brand-600: #7c3aed; /* Primary Hover */
            --brand-900: #4c1d95;
            --brand-glow: rgba(139, 92, 246, 0.5); /* Glow effect color */
            
            --accent-secondary: #3b82f6; /* Secondary Accent (Blue) */
            
            /* Glassmorphism Surfaces */
            --surface: rgba(20, 20, 22, 0.8);
            --surface-glass: rgba(255, 255, 255, 0.03);
            --surface-border: rgba(255, 255, 255, 0.08);
            
            /* Typography base */
            --text-primary: #f8fafc;
            --text-secondary: #94a3b8;
        }

        /* Light Mode Example (Uncomment to use or toggle via JS):
        .light-mode {
            --bg-color: #f8fafc;
            --brand-500: #4f46e5;
            --brand-glow: rgba(79, 70, 229, 0.3);
            --surface: rgba(255, 255, 255, 0.9);
            --surface-glass: rgba(0, 0, 0, 0.02);
            --surface-border: rgba(0, 0, 0, 0.1);
            --text-primary: #0f172a;
            --text-secondary: #475569;
        }
        */

        body {
            background-color: var(--bg-color);
            color: var(--text-primary);
            margin: 0;
        }

        /* Background Animated Gradient Mesh */
        .bg-mesh {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -2;
            background: 
                radial-gradient(circle at 15% 50%, rgba(139, 92, 246, 0.15), transparent 25%),
                radial-gradient(circle at 85% 30%, rgba(59, 130, 246, 0.15), transparent 25%);
            filter: blur(60px);
            animation: mesh-move 10s ease-in-out infinite alternate;
        }

        @keyframes mesh-move {
            0% { transform: scale(1) translate(0, 0); }
            100% { transform: scale(1.1) translate(2%, -2%); }
        }

        /* Particle Canvas */
        #particle-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
        }

        /* Staggered Fade-in Animations */
        .fade-in-up {
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

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

        .delay-100 { animation-delay: 100ms; }
        .delay-200 { animation-delay: 200ms; }
        .delay-300 { animation-delay: 300ms; }
        .delay-400 { animation-delay: 400ms; }
        .delay-500 { animation-delay: 500ms; }

        /* Huge 404 Text Gradient & Styling */
        .text-huge-404 {
            font-size: clamp(8rem, 20vw, 24rem);
            line-height: 0.8;
            font-weight: 700;
            background: linear-gradient(135deg, var(--brand-500) 0%, var(--accent-secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            opacity: 0.15; /* Subtle background presence */
            user-select: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 0;
            white-space: nowrap;
        }

        /* Glassmorphism Input */
        .glass-input {
            background: var(--surface-glass);
            border: 1px solid var(--surface-border);
            color: var(--text-primary);
            transition: all 0.3s ease;
        }
        .glass-input:focus {
            outline: none;
            border-color: var(--brand-500);
            box-shadow: 0 0 15px var(--brand-glow);
            background: rgba(255, 255, 255, 0.05);
        }
        .glass-input::placeholder {
            color: var(--text-secondary);
        }

        /* Premium Buttons */
        .btn-primary {
            background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
            color: white;
            box-shadow: 0 4px 15px var(--brand-glow);
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px var(--brand-glow);
            filter: brightness(1.1);
        }

        .btn-secondary {
            background: var(--surface-glass);
            border: 1px solid var(--surface-border);
            color: var(--text-primary);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }
        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }

        /* Interactive SVG styling */
        .svg-glow {
            filter: drop-shadow(0 0 20px var(--brand-glow));
        }

        /* Layout Z-indexing */
        .content-layer {
            position: relative;
            z-index: 10;
        }