@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');
        
        :root {
            --neon-blue: #00f3ff;
            --neon-yellow: #ffff00;
            --neon-red: #ff0055;
            --neon-pink: #ff00ff;
            --neon-purple: #9d00ff;
            --neon-orange: #ff7700;
        }
        
        body {
            background-color: #000;
            font-family: 'Roboto', sans-serif;
            color: white;
            overflow-x: hidden;
        }
        
        .orbitron {
            font-family: 'Orbitron', sans-serif;
        }
        
        .neon-text-blue {
            color: var(--neon-blue);
            text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue);
        }
        
        .neon-text-yellow {
            color: var(--neon-yellow);
            text-shadow: 0 0 5px var(--neon-yellow), 0 0 10px var(--neon-yellow);
        }
        
        .neon-text-red {
            color: var(--neon-red);
            text-shadow: 0 0 5px var(--neon-red), 0 0 10px var(--neon-red);
        }
        
        .neon-text-pink {
            color: var(--neon-pink);
            text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink);
        }
        
        .neon-text-purple {
            color: var(--neon-purple);
            text-shadow: 0 0 5px var(--neon-purple), 0 0 10px var(--neon-purple);
        }
        
        .neon-text-orange {
            color: var(--neon-orange);
            text-shadow: 0 0 5px var(--neon-orange), 0 0 10px var(--neon-orange);
        }
        
        .neon-border-blue {
            border-color: var(--neon-blue);
            box-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue);
        }
        
        .neon-border-yellow {
            border-color: var(--neon-yellow);
            box-shadow: 0 0 5px var(--neon-yellow), 0 0 10px var(--neon-yellow);
        }
        
        .neon-border-red {
            border-color: var(--neon-red);
            box-shadow: 0 0 5px var(--neon-red), 0 0 10px var(--neon-red);
        }
        
        .neon-border-pink {
            border-color: var(--neon-pink);
            box-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink);
        }
        
        .neon-border-purple {
            border-color: var(--neon-purple);
            box-shadow: 0 0 5px var(--neon-purple), 0 0 10px var(--neon-purple);
        }
        
        .neon-border-orange {
            border-color: var(--neon-orange);
            box-shadow: 0 0 5px var(--neon-orange), 0 0 10px var(--neon-orange);
        }
        
        .neon-btn {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .neon-btn:hover {
            transform: translateY(-3px);
        }
        
        .neon-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: 0.5s;
        }
        
        .neon-btn:hover::before {
            left: 100%;
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, rgba(0, 243, 255, 0.1), rgba(255, 255, 0, 0.1), rgba(255, 0, 85, 0.1), rgba(255, 0, 255, 0.1), rgba(157, 0, 255, 0.1), rgba(255, 119, 0, 0.1));
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
        }
        
        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
        
        .floating {
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-20px);
            }
            100% {
                transform: translateY(0px);
            }
        }
        
        .glow-effect {
            animation: glow 2s ease-in-out infinite alternate;
        }
        
        @keyframes glow {
            from {
                box-shadow: 0 0 5px rgba(0, 243, 255, 0.5), 0 0 10px rgba(255, 255, 0, 0.5);
            }
            to {
                box-shadow: 0 0 20px rgba(255, 0, 85, 0.8), 0 0 30px rgba(255, 0, 255, 0.8);
            }
        }
        
        .grid-bg {
            background-image: 
                linear-gradient(rgba(0, 243, 255, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 243, 255, 0.1) 1px, transparent 1px);
            background-size: 20px 20px;
        }
        
        .feature-card {
            backdrop-filter: blur(10px);
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
        }


    #popup-message {
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #333;
        color: white;
        padding: 15px 25px;
        border-radius: 8px;
        box-shadow: 0 0 15px rgba(0,0,0,0.3);
        z-index: 9999;
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    #popup-message.show {
        opacity: 1;
    }






        
.grid-bg {
    background-image: 
        linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    background-color: #0a0a0a;
}

/* .neon-text-blue {
    color: #60a5fa;
    text-shadow: 
        0 0 5px #3b82f6,
        0 0 10px #3b82f6,
        0 0 15px #3b82f6,
        0 0 20px #3b82f6;
}

.neon-text-pink {
    color: #f472b6;
    text-shadow: 
        0 0 5px #ec4899,
        0 0 10px #ec4899,
        0 0 15px #ec4899,
        0 0 20px #ec4899;
}
 */
.neon-btn {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.neon-btn:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 0 20px rgba(59, 130, 246, 0.5),
        0 10px 30px rgba(0, 0, 0, 0.3);
}

/* .neon-border-blue {
    border-color: #3b82f6;
    box-shadow: 
        0 0 10px rgba(59, 130, 246, 0.3),
        inset 0 0 10px rgba(59, 130, 246, 0.1);
}

.neon-border-yellow {
    border-color: #fbbf24;
    box-shadow: 
        0 0 10px rgba(251, 191, 36, 0.3),
        inset 0 0 10px rgba(251, 191, 36, 0.1);
}

.neon-border-purple {
    border-color: #a855f7;
    box-shadow: 
        0 0 10px rgba(168, 85, 247, 0.3),
        inset 0 0 10px rgba(168, 85, 247, 0.1);
}

.neon-border-pink {
    border-color: #ec4899;
    box-shadow: 
        0 0 10px rgba(236, 72, 153, 0.3),
        inset 0 0 10px rgba(236, 72, 153, 0.1);
} */

.neon-border-cyan {
    border-color: #06b6d4;
    box-shadow: 
        0 0 10px rgba(6, 182, 212, 0.3),
        inset 0 0 10px rgba(6, 182, 212, 0.1);
}

.neon-line-blue {
    background: linear-gradient(90deg, transparent, #3b82f6, transparent);
    box-shadow: 
        0 0 10px #3b82f6,
        0 0 20px #3b82f6,
        0 0 30px #3b82f6;
}

.neon-line-purple {
    background: linear-gradient(180deg, transparent, #a855f7, transparent);
    box-shadow: 
        0 0 10px #a855f7,
        0 0 20px #a855f7,
        0 0 30px #a855f7;
}

.neon-line-pink {
    background: linear-gradient(90deg, transparent, #ec4899, transparent);
    box-shadow: 
        0 0 10px #ec4899,
        0 0 20px #ec4899,
        0 0 30px #ec4899;
}

.neon-line-cyan {
    background: linear-gradient(180deg, transparent, #06b6d4, transparent);
    box-shadow: 
        0 0 10px #06b6d4,
        0 0 20px #06b6d4,
        0 0 30px #06b6d4;
}

.glow-effect {
    box-shadow: 
        0 0 20px rgba(59, 130, 246, 0.2),
        0 0 40px rgba(168, 85, 247, 0.1),
        inset 0 0 20px rgba(0, 0, 0, 0.2);
}

.floating {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

@keyframes pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* TRON-style flowing lines toward center */
.tron-line-blue {
    background: linear-gradient(90deg, transparent, #00bfff, #00bfff, transparent);
    box-shadow: 
        0 0 5px #00bfff,
        0 0 10px #00bfff,
        0 0 15px #00bfff;
}

.tron-line-orange {
    background: linear-gradient(90deg, transparent, #ff6600, #ff6600, transparent);
    box-shadow: 
        0 0 5px #ff6600,
        0 0 10px #ff6600,
        0 0 15px #ff6600;
}

.tron-line-green {
    background: linear-gradient(90deg, transparent, #00ff88, #00ff88, transparent);
    box-shadow: 
        0 0 5px #00ff88,
        0 0 10px #00ff88,
        0 0 15px #00ff88;
}

.tron-line-purple {
    background: linear-gradient(90deg, transparent, #aa00ff, #aa00ff, transparent);
    box-shadow: 
        0 0 5px #aa00ff,
        0 0 10px #aa00ff,
        0 0 15px #aa00ff;
}

.tron-line-yellow {
    background: linear-gradient(90deg, transparent, #ffff00, #ffff00, transparent);
    box-shadow: 
        0 0 5px #ffff00,
        0 0 10px #ffff00,
        0 0 15px #ffff00;
}

.tron-line-red {
    background: linear-gradient(90deg, transparent, #ff0066, #ff0066, transparent);
    box-shadow: 
        0 0 5px #ff0066,
        0 0 10px #ff0066,
        0 0 15px #ff0066;
}

.tron-line-vertical-blue {
    background: linear-gradient(180deg, transparent, #00bfff, #00bfff, transparent);
    box-shadow: 
        0 0 5px #00bfff,
        0 0 10px #00bfff,
        0 0 15px #00bfff;
}

.tron-line-vertical-orange {
    background: linear-gradient(180deg, transparent, #ff6600, #ff6600, transparent);
    box-shadow: 
        0 0 5px #ff6600,
        0 0 10px #ff6600,
        0 0 15px #ff6600;
}

.tron-line-vertical-green {
    background: linear-gradient(180deg, transparent, #00ff88, #00ff88, transparent);
    box-shadow: 
        0 0 5px #00ff88,
        0 0 10px #00ff88,
        0 0 15px #00ff88;
}

.tron-line-vertical-purple {
    background: linear-gradient(180deg, transparent, #aa00ff, #aa00ff, transparent);
    box-shadow: 
        0 0 5px #aa00ff,
        0 0 10px #aa00ff,
        0 0 15px #aa00ff;
}

@keyframes tronFlowFromLeft {
    0% { transform: translateX(-100%); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateX(100vw); opacity: 0; }
}

@keyframes tronFlowFromRight {
    0% { transform: translateX(100%); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateX(-100vw); opacity: 0; }
}

@keyframes tronFlowFromTop {
    0% { transform: translateY(-100%); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(100vh); opacity: 0; }
}

@keyframes tronFlowFromBottom {
    0% { transform: translateY(100%); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100vh); opacity: 0; }
}

.tron-flow-left {
    animation: tronFlowFromLeft 2.5s ease-in-out infinite;
}

.tron-flow-right {
    animation: tronFlowFromRight 2.5s ease-in-out infinite;
}

.tron-flow-top {
    animation: tronFlowFromTop 2.5s ease-in-out infinite;
}

.tron-flow-bottom {
    animation: tronFlowFromBottom 2.5s ease-in-out infinite;
}