:root {
            --primary: #00d4ff;
            --secondary: #7c3aed;
            --dark: #0a0e27;
        }

        /* Preloader Container */
        #loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--dark);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }

        #loader.hidden {
            opacity: 0;
            visibility: hidden;
        }

        /* Orbiting Hexagon Loader */
        .loader-spinner {
            position: relative;
            width: 150px;
            height: 150px;
        }

        /* Center Hexagon */
        .center-hex {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            animation: pulse 2s ease-in-out infinite;
            box-shadow: 0 0 30px rgba(0, 212, 255, 0.6);
        }

        /* Orbiting Particles */
        .orbit-particle {
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform-origin: 0 0;
        }

        .orbit-particle:nth-child(1) {
            background: var(--primary);
            box-shadow: 0 0 20px var(--primary);
            animation: orbit 3s linear infinite;
        }

        .orbit-particle:nth-child(2) {
            background: var(--secondary);
            box-shadow: 0 0 20px var(--secondary);
            animation: orbit 3s linear infinite;
            animation-delay: -1s;
        }

        .orbit-particle:nth-child(3) {
            background: #f59e0b;
            box-shadow: 0 0 20px #f59e0b;
            animation: orbit 3s linear infinite;
            animation-delay: -2s;
        }

        /* Rotating Ring */
        .ring {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 130px;
            height: 130px;
            border: 3px solid transparent;
            border-top-color: var(--primary);
            border-right-color: var(--primary);
            border-radius: 50%;
            animation: rotate 2s linear infinite;
            opacity: 0.4;
        }

        .ring:nth-child(6) {
            width: 110px;
            height: 110px;
            border-top-color: var(--secondary);
            border-right-color: var(--secondary);
            animation-duration: 1.5s;
            animation-direction: reverse;
        }

        /* Data Stream Effect */
        .data-stream {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 180px;
            height: 180px;
            border-radius: 50%;
            border: 1px dashed rgba(0, 212, 255, 0.3);
            animation: dash 4s linear infinite;
        }

        /* Loading Text */
        .loading-text {
            position: absolute;
            bottom: -60px;
            left: 50%;
            transform: translateX(-50%);
            font-family: 'Courier New', monospace;
            font-size: 14px;
            color: var(--primary);
            letter-spacing: 2px;
            white-space: nowrap;
        }

        .loading-text::after {
            content: '';
            animation: dots 1.5s steps(4, end) infinite;
        }

        /* Percentage Counter */
        .percentage {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: 'Arial', sans-serif;
            font-size: 20px;
            font-weight: 700;
            color: #fff;
            z-index: 10;
            text-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
        }

        /* Animations */
        @keyframes pulse {
            0%, 100% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            }
            50% {
                transform: translate(-50%, -50%) scale(1.1);
                opacity: 0.8;
            }
        }

        @keyframes orbit {
            0% {
                transform: rotate(0deg) translateX(70px) rotate(0deg);
            }
            100% {
                transform: rotate(360deg) translateX(70px) rotate(-360deg);
            }
        }

        @keyframes rotate {
            0% {
                transform: translate(-50%, -50%) rotate(0deg);
            }
            100% {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

        @keyframes dash {
            0% {
                transform: translate(-50%, -50%) rotate(0deg);
                opacity: 0.3;
            }
            50% {
                opacity: 0.6;
            }
            100% {
                transform: translate(-50%, -50%) rotate(360deg);
                opacity: 0.3;
            }
        }

        @keyframes dots {
            0%, 20% { content: ''; }
            40% { content: '.'; }
            60% { content: '..'; }
            80%, 100% { content: '...'; }
        }