.network-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .network-canvas {
            width: 100%;
            height: 100%;
            display: block;
        }

        .controls {
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 100;
        }

        .control-panel {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 20px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
        }

        .control-btn {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
            padding: 8px 16px;
            margin: 5px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
        }

        .control-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-1px);
        }

        .slider-group {
            margin: 10px 0;
        }

        .slider-group label {
            display: block;
            font-size: 12px;
            margin-bottom: 5px;
        }

        .slider {
            width: 100%;
            height: 4px;
            border-radius: 2px;
            background: rgba(255, 255, 255, 0.3);
            outline: none;
            -webkit-appearance: none;
        }

        .slider::-webkit-slider-thumb {
            appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #fff;
            cursor: pointer;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }

        .title {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            font-size: 2em;
            text-align: center;
            text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
            z-index: 100;
        }

        @media (max-width: 768px) {
            .controls {
                top: 10px;
                left: 10px;
                right: 10px;
            }
            
            .control-panel {
                padding: 15px;
            }
            
            .title {
                font-size: 1.5em;
                bottom: 20px;
            }
        }

        /* Substituir todo o conteúdo do arquivo rede.css por este: */
        
        /* ===== REDE NEURAL PROFISSIONAL COM PONTOS CONECTADOS ===== */
        
        /* Container da rede neural como background */
        .network-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            background:  #1e40af, 
           
        }
        
        /* Canvas da rede neural */
        .network-background-canvas {
            width: 100%;
            height: 100%;
            display: block;
            opacity: 0.9;
            mix-blend-mode: screen;
        }
        
        /* Animação do gradiente de fundo */
        @keyframes gradientFlow {
            0% {
                background-position: 0% 50%;
            }
        }
        
        /* Efeito de partículas flutuantes */
        .network-background::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            
            animation: particleFloat 20s ease-in-out infinite;
            pointer-events: none;
        }
        
        @keyframes particleFloat {
            0%, 100% {
                transform: translateY(0px) rotate(0deg);
                opacity: 1;
            }
            50% {
                transform: translateY(-20px) rotate(180deg);
                opacity: 0.7;
            }
        }
        
        /* Garantir que o conteúdo fique acima da rede neural */
        .parallax-section .parallax-content,
        .parallax-section .mobile-layout,
        .parallax-section .mobile-menu-hamburger,
        .parallax-section .user-diretor,
        .parallax-section .rotating-globe {
            position: relative;
            z-index: 10;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        }
        
        /* Efeito de profundidade para textos */
        .parallax-section h1,
        .parallax-section h2,
        .parallax-section h3 {
            text-shadow: 
                0 1px 0 rgba(255, 255, 255, 0.1),
                0 2px 8px rgba(0, 0, 0, 0.4),
                0 4px 15px rgba(0, 0, 0, 0.3);
            filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.4));
        }
        
        /* ===== RESPONSIVIDADE ===== */
        
        /* Tablets */
        @media (max-width: 1024px) {
            .network-background {
                background-size: 300% 300%;
                animation-duration: 12s;
            }
            
            .network-background-canvas {
                opacity: 0.8;
            }
        }
        
        /* Mobile */
        @media (max-width: 768px) {
            .network-background {
                background: #0544e2;
                background-size: 200% 200%;
                animation-duration: 8s;
            }
            
            .network-background-canvas {
                opacity: 0.95;
                filter: brightness(1.2) contrast(1.1);
            }
        }
        
        /* Mobile pequeno */
        @media (max-width: 480px) {
            .network-background {
                background-size: 150% 150%;
                animation-duration: 6s;
            }
            
            .network-background-canvas {
                opacity: 1.0;
                filter: brightness(1.3) contrast(1.2);
            }
        }
        
        /* Performance otimizada */
        .network-background,
        .network-background::before,
        .network-background-canvas {
            will-change: transform, opacity;
            backface-visibility: hidden;
        }
        
        /* Redução de movimento para acessibilidade */
        @media (prefers-reduced-motion: reduce) {
            .network-background,
            .network-background::before {
                animation: none;
            }
        }
        
        .network-background {
            width: 100%;
            height: 100%;
            display: block;
            opacity: 0.8;
        }
        
        /* Garantir que o conteúdo fique acima da rede neural */
        .parallax-section .parallax-content,
        .parallax-section .mobile-layout,
        .parallax-section .mobile-menu-hamburger,
        .parallax-section .user-diretor,
        .parallax-section .rotating-globe {
            position: relative;
            z-index: 10;
        }
        
        /* Estilos responsivos */
        @media (max-width: 768px) {
            .network-background {
                background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #3b82f6 100%);
            }
            
            .network-background-canvas {
                opacity: 0.6;
            }
        }
        
        @media (max-width: 480px) {
            .network-background-canvas {
                opacity: 0.5;
            }
        }
        
        /* Animações suaves para a rede neural */
        .network-background {
            animation: backgroundPulse 8s ease-in-out infinite;
        }
        
        @keyframes backgroundPulse {
            0%, 100% {
                background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #3b82f6 100%);
            }
            
        }
        
        /* Efeito de brilho sutil */
        .network-background::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1) 0%, transparent 70%);
            animation: shimmer 6s ease-in-out infinite;
        }
        
        @keyframes shimmer {
            0%, 100% {
                opacity: 0.3;
            }
            50% {
                opacity: 0.1;
            }
        }

        /* ===== REDE NEURAL - APENAS AZUL SÓLIDO ===== */
        
        /* Container da rede neural */
        .network-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            background: #1e40af;
            overflow: hidden;
        }
        
        /* Canvas da rede neural */
        .network-background-canvas {
            width: 100%;
            height: 100%;
            display: block;
            opacity: 1;
        }
        
        /* Garantir que o conteúdo fique acima */
        .parallax-section .parallax-content,
        .parallax-section .mobile-layout,
        .parallax-section .mobile-menu-hamburger,
        .parallax-section .user-diretor,
        .parallax-section .rotating-globe {
            position: relative;
            z-index: 10;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        }
        
        /* Textos com sombra */
        .parallax-section h1,
        .parallax-section h2,
        .parallax-section h3 {
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
        }
        
        /* Performance */
        .network-background,
        .network-background-canvas {
            will-change: transform;
            backface-visibility: hidden;
        }
        
        /* Mobile */
        @media (max-width: 768px) {
            .network-background {
                background: #2563eb;
            }
        }