:root {
            --foreground: #f0f0f4;
            --background: #020202;
            --grid-line: rgba(255, 255, 255, 0.055);
        }
        
        body {
            background-color: var(--background);
            color: var(--foreground);
            overflow-x: hidden;
            background-image: 
                radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.035) 0%, transparent 60%),
                url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.03"/%3E%3C/svg%3E');
        }

        /* Architectural Grid Background */
        .tech-grid {
            background-size: 64px 64px;
            background-image: 
                linear-gradient(to right, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 5px; }
        ::-webkit-scrollbar-track { background: #020202; }
        ::-webkit-scrollbar-thumb { background: #232329; border-radius: 2px; }
        ::-webkit-scrollbar-thumb:hover { background: #4a4a56; }

        /* Spotlight Card Effect */
        .spotlight-card {
            position: relative;
            background: rgba(10, 10, 13, 0.72);
            border: 1px solid rgba(255, 255, 255, 0.07);
            overflow: hidden;
            transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .spotlight-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(600px circle at var(--mouse-x, -500px) var(--mouse-y, -500px), rgba(255, 255, 255, 0.075), transparent 40%);
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
            z-index: 1;
        }
        .spotlight-card:hover::before {
            opacity: 1;
        }
        .spotlight-card:hover {
            border-color: rgba(255, 255, 255, 0.22);
        }

        /* Hero Text Shadow & Glow */
        .hero-headline {
            text-shadow: 0 4px 40px rgba(0, 0, 0, 0.9), 0 0 80px rgba(255, 255, 255, 0.18);
        }

        /* Crosshair Corner Markers */
        .crosshair-tl::after, .crosshair-br::after {
            content: '+';
            position: absolute;
            font-family: 'JetBrains Mono', monospace;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.25);
            line-height: 1;
            pointer-events: none;
        }
        .crosshair-tl::after { top: -6px; left: -5px; }
        .crosshair-br::after { bottom: -6px; right: -5px; }

        /* Reveal Animations */
        .fade-up {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .fade-up.visible {
            opacity: 1;
            transform: translateY(0);
        }
        .delay-100 { transition-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; }

        #canvas-container {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
        }
        #canvas-container canvas {
            pointer-events: none;
        }

        /* SVG Animation Helpers */
        @keyframes pulse-dash {
            to { stroke-dashoffset: -40; }
        }
        .animate-dash {
            stroke-dasharray: 4 6;
            animation: pulse-dash 3s linear infinite;
        }
        @keyframes slow-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .spin-slow {
            transform-origin: center;
            animation: slow-spin 40s linear infinite;
        }
        .spin-reverse {
            transform-origin: center;
            animation: slow-spin 30s linear infinite reverse;
        }

        /* Top-Tier Logo Glow & Micro-Mechanics */
        .siera-emblem-box {
            background: radial-gradient(circle at 50% 50%, rgba(212, 197, 169, 0.14) 0%, rgba(10, 10, 14, 0.92) 75%);
            box-shadow: 0 0 24px rgba(212, 197, 169, 0.08), inset 0 0 12px rgba(255, 255, 255, 0.05);
        }
        .siera-emblem-box:hover {
            box-shadow: 0 0 30px rgba(212, 197, 169, 0.22), inset 0 0 14px rgba(255, 255, 255, 0.1);
        }
        /* SIERA Logo Rotation */
        .siera-logo-spin {
            animation: siera-spin 12s linear infinite;
            transform-box: fill-box;
            transform-origin: center;
        }
        @keyframes siera-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

/* Deployment filter tabs — functional category filtering */
#deployments .filter-tab.active {
    background: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
    font-weight: 500;
}