/* --- Custom CSS for Futurism & Neon Effects --- */

        body {
            background-color: #0a0a1a; /* Very dark background */
            color: #e5e5e5;
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            --f3-neon-blue: #00ffff;
            --f3-neon-purple: #ff00ff;
        }

        /* Glassmorphism effect */
        .glass {
            background: rgba(30, 41, 59, 0.3); /* Slightly transparent dark background */
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 1rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
        }

        /* Neon Text Glow */
        .neon-text {
            text-shadow: 0 0 5px var(--f3-neon-blue), 0 0 10px var(--f3-neon-purple);
        }

        /* Neon Button Glow */
        .neon-btn {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 0 8px var(--f3-neon-blue);
        }
        .neon-btn:hover {
            box-shadow: 0 0 15px var(--f3-neon-blue), 0 0 25px var(--f3-neon-purple);
            transform: translateY(-2px);
        }

        /* Neon Pulse Animation for CTA/Subscribe */
        @keyframes neon-pulse {
            0%, 100% { box-shadow: 0 0 8px var(--f3-neon-blue); }
            50% { box-shadow: 0 0 15px var(--f3-neon-blue), 0 0 25px var(--f3-neon-purple); }
        }
        .pulse-neon {
            animation: neon-pulse 2s infinite alternate;
        }

        /* Glowing Underline for Navbar */
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--f3-neon-blue) 0%, var(--f3-neon-purple) 100%);
            transition: width 0.3s ease, left 0.3s ease;
        }
        .nav-link:hover::after, .nav-link.active::after {
            width: 100%;
            left: 0;
        }

        /* 3D AI Brain Simulation (Cube with Spin) */
        #ai-brain {
            width: 250px;
            height: 250px;
            transform-style: preserve-3d;
            animation: rotate-cube 20s infinite linear;
        }

        .cube-face {
            position: absolute;
            width: 250px;
            height: 250px;
            background: rgba(0, 255, 255, 0.1);
            border: 1px solid rgba(0, 255, 255, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            text-shadow: 0 0 5px var(--f3-neon-blue);
        }

        .cube-face:nth-child(1) { transform: rotateY(0deg) translateZ(125px); }
        .cube-face:nth-child(2) { transform: rotateY(90deg) translateZ(125px); }
        .cube-face:nth-child(3) { transform: rotateY(180deg) translateZ(125px); }
        .cube-face:nth-child(4) { transform: rotateY(-90deg) translateZ(125px); }
        .cube-face:nth-child(5) { transform: rotateX(90deg) translateZ(125px); }
        .cube-face:nth-child(6) { transform: rotateX(-90deg) translateZ(125px); }

        @keyframes rotate-cube {
            from { transform: rotateX(0deg) rotateY(0deg); }
            to { transform: rotateX(360deg) rotateY(360deg); }
        }

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

        /* Scroll Reveal (simple opacity and scale) */
        .scroll-reveal {
            opacity: 0;
            transform: translateY(20px) scale(0.95);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .scroll-reveal.visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        /* Gradient Backgrounds */
        .bg-gradient-futuristic {
            background: radial-gradient(circle at center, rgba(16, 22, 53, 1) 0%, rgba(10, 10, 26, 1) 70%);
        }
        
        /* Large Detail Modal Specific Style */
        #detail-modal .modal-content {
            max-height: 90vh;
            overflow-y: auto;
        }
        /* Style for text inside legal documents */
        #detail-modal .policy-content p {
            margin-bottom: 1rem;
            line-height: 1.6;
            color: #ccc;
        }
        #detail-modal .policy-content h4 {
            font-size: 1.5rem;
            margin-top: 1.5rem;
            margin-bottom: 0.5rem;
            text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
        }