:root {
    /* Colors */
    --primary-color: #6366f1;
    --primary-light: #818cf8;
    --primary-dark: #4f46e5;
    --secondary-color: #ec4899;
    --accent-color: #06b6d4;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    
    /* Background Colors */
    --bg-primary: #0f0f23;
    --bg-secondary: #1a1d29;
    --bg-tertiary: #242938;
    --bg-card: rgba(255, 255, 255, 0.05);
    --bg-glass: rgba(255, 255, 255, 0.1);
    --bg-overlay: rgba(0, 0, 0, 0.8);
    
    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --text-accent: var(--primary-color);
    
    /* Border Colors */
    --border-primary: rgba(255, 255, 255, 0.1);
    --border-secondary: rgba(255, 255, 255, 0.05);
    --border-accent: var(--primary-color);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    
    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Z-index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;
}

        /* Professional Grid */
        .grid-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(99, 179, 237, 0.08) 1px, transparent 1px),
                linear-gradient(90deg, rgba(99, 179, 237, 0.08) 1px, transparent 1px);
            background-size: 40px 40px;
            animation: gridShift 25s linear infinite;
        }

        @keyframes gridShift {
            0% { transform: translate(0, 0); }
            100% { transform: translate(40px, 40px); }
        }

        /* Data Points */
        .data-point {
            position: absolute;
            width: 3px;
            height: 3px;
            background: #63b3ed;
            border-radius: 50%;
            opacity: 0.6;
            animation: dataFloat 12s ease-in-out infinite;
        }

        .data-point:nth-child(2n) {
            background: #4fd1c7;
            animation-delay: -3s;
        }

        .data-point:nth-child(3n) {
            background: #f6ad55;
            animation-delay: -6s;
        }

        .data-point:nth-child(4n) {
            background: #fc8181;
            animation-delay: -9s;
        }

        @keyframes dataFloat {
            0%, 100% { 
                transform: translateY(0px) translateX(0px); 
                opacity: 0.6; 
            }
            50% { 
                transform: translateY(-80px) translateX(40px); 
                opacity: 1; 
            }
        }

        /* Professional Chart Lines */
        .chart-line {
            position: absolute;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(99, 179, 237, 0.4), transparent);
            border-radius: 1px;
            animation: chartAnalytics 8s ease-in-out infinite;
        }

        .chart-line:nth-child(2) {
            background: linear-gradient(90deg, transparent, rgba(79, 209, 199, 0.4), transparent);
            animation-delay: -2s;
        }

        .chart-line:nth-child(3) {
            background: linear-gradient(90deg, transparent, rgba(246, 173, 85, 0.4), transparent);
            animation-delay: -4s;
        }

        .chart-line:nth-child(4) {
            background: linear-gradient(90deg, transparent, rgba(252, 129, 129, 0.4), transparent);
            animation-delay: -6s;
        }

        @keyframes chartAnalytics {
            0%, 100% { opacity: 0.2; width: 0%; }
            50% { opacity: 0.8; width: 100%; }
        }

        /* Subtle Metrics */
        .metric-indicator {
            position: absolute;
            font-size: 12px;
            color: rgba(99, 179, 237, 0.3);
            font-weight: 500;
            font-family: 'Courier New', monospace;
            animation: metricFade 15s linear infinite;
        }

        .metric-indicator:nth-child(2n) {
            color: rgba(79, 209, 199, 0.3);
            animation-duration: 18s;
        }

        .metric-indicator:nth-child(3n) {
            color: rgba(246, 173, 85, 0.3);
            animation-duration: 21s;
        }

        @keyframes metricFade {
            0% {
                transform: translateY(100vh);
                opacity: 0;
            }
            10%, 90% {
                opacity: 1;
            }
            100% {
                transform: translateY(-50px);
                opacity: 0;
            }
        }

        /* Professional Glow Effects */
        .glow-accent {
            position: absolute;
            border-radius: 50%;
            filter: blur(2px);
            animation: glowPulse 8s ease-in-out infinite;
        }

        .glow-accent:nth-child(odd) {
            background: radial-gradient(circle, rgba(99, 179, 237, 0.1) 0%, transparent 70%);
        }

        .glow-accent:nth-child(even) {
            background: radial-gradient(circle, rgba(79, 209, 199, 0.1) 0%, transparent 70%);
            animation-direction: reverse;
        }

        @keyframes glowPulse {
            0%, 100% { 
                transform: scale(1); 
                opacity: 0.3; 
            }
            50% { 
                transform: scale(1.5); 
                opacity: 0.6; 
            }
        }

        /* Vertical Data Streams */
        .data-stream {
            position: absolute;
            width: 1px;
            background: linear-gradient(to bottom, transparent, rgba(99, 179, 237, 0.6), transparent);
            animation: streamFlow 6s linear infinite;
        }

        .data-stream:nth-child(2n) {
            background: linear-gradient(to bottom, transparent, rgba(79, 209, 199, 0.6), transparent);
            animation-delay: -1.5s;
        }

        .data-stream:nth-child(3n) {
            background: linear-gradient(to bottom, transparent, rgba(246, 173, 85, 0.6), transparent);
            animation-delay: -3s;
        }

        @keyframes streamFlow {
            0% {
                height: 0%;
                top: 0%;
                opacity: 1;
            }
            50% {
                height: 100%;
                top: 0%;
                opacity: 0.8;
            }
            100% {
                height: 0%;
                top: 100%;
                opacity: 0;
            }
        }

        /* Professional Content Area */
        .content-area {
            position: relative;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            color: #ffffff;
            text-align: center;
        }

        .content-card {
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            padding: 48px;
            max-width: 600px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        }

        .content-card h1 {
            font-size: 2.2rem;
            margin-bottom: 24px;
            background: linear-gradient(135deg, #63b3ed, #4fd1c7);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 600;
        }

        .content-card p {
            font-size: 1rem;
            opacity: 0.85;
            line-height: 1.6;
            color: #e2e8f0;
        }

        /* Professional Stats */
        .stats-display {
            position: absolute;
            top: 30px;
            right: 30px;
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            padding: 16px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            color: #63b3ed;
            z-index: 10;
        }

        .stats-display .stat-item {
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
            min-width: 120px;
        }

        .stats-display .stat-value {
            color: #4fd1c7;
            font-weight: bold;
        }