@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Space+Mono:wght@400;700&display=swap');
:root {
            --neon-green: #00ff9d;
            --neon-blue: #00b8ff;
            --neon-purple: #bd00ff;
            --dark-bg: #0a0a0a;
            --darker-bg: #050505;
            --card-bg: #111111;
        }




body {
  font-family: 'Space Mono', monospace;
  background-color: var(--dark-bg);
  color: #e0e0e0;
}



        .hacker-font {
            font-family: 'Share Tech Mono', monospace;
            ;
        }
        
        .neon-text {
            text-shadow: 0 0 5px var(--neon-green), 0 0 10px var(--neon-green);
        }
        
        .neon-box {
            box-shadow: 0 0 15px var(--neon-green), inset 0 0 8px var(--neon-green);
            border: 1px solid var(--neon-green);
        }
        
        .neon-button {
            background: linear-gradient(45deg, var(--neon-green), var(--neon-blue));
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
      
        .neon-button:hover {
            box-shadow: 0 0 15px var(--neon-green), 0 0 15px var(--neon-blue);
            transform: translateY(-3px);
        }

        .neon-button::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: -1;
        }
        
        .neon-button:hover::after {
            opacity: 1;
        }
        
        .blink {
            animation: blink-animation 1s steps(5, start) infinite;
        }




        
        .feature-card {
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            background: var(--card-bg);
            position: relative;
            overflow: hidden;
        }
        
        .feature-card:hover {
            transform: translateY(-10px) scale(1.03);
            box-shadow: 0 15px 30px rgba(0, 255, 157, 0.3);
        }


          /* Animaciones al desplazar */
        .fade-in {
            opacity: 0;
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        
        .fade-in.visible {
            opacity: 1;
        }
        
        .slide-up {
            transform: translateY(50px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
            opacity: 0;
        }
        
        .slide-up.visible {
            transform: translateY(0);
            opacity: 1;
        }

        /* Efecto de partículas */
        .particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }
        
        .particle {
            position: absolute;
            background: var(--neon-green);
            border-radius: 50%;
            opacity: 0.3;
            animation: float 15s infinite linear;
        }
        
        @keyframes float {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 0.3;
            }
            50% {
                opacity: 0.1;
            }
            100% {
                transform: translateY(-100vh) rotate(360deg);
                opacity: 0;
            }
        }

         
        
        /* Espaciado mejorado */
        .section-spacing {
            padding: 8rem 1.5rem;
        }
        
        .element-spacing {
            margin-bottom: 4rem;
        }