/* Corrige o posicionamento da âncora por causa do header fixo */
        html {
            scroll-padding-top: 80px; /* Altura aproximada do header */
        }

        /* Definindo as fontes customizadas */
        body {
            font-family: 'Roboto Mono', monospace;
            background-color: #0d0a1b; /* Fundo principal escuro */
            color: #e0e0e0;
        }

        .font-pixel {
            font-family: 'Press Start 2P', cursive;
        }
        
        /* Efeito de brilho neon */
        .text-glow {
            text-shadow: 0 0 5px rgba(192, 132, 252, 0.5), 
                         0 0 10px rgba(192, 132, 252, 0.5), 
                         0 0 20px rgba(192, 132, 252, 0.7),
                         0 0 40px rgba(147, 51, 234, 0.7);
        }

        .btn-glow {
            box-shadow: 0 0 5px rgba(192, 132, 252, 0.6), 
                        0 0 10px rgba(192, 132, 252, 0.4), 
                        inset 0 0 5px rgba(192, 132, 252, 0.5);
        }
        
        /* Estilo para a borda pixelada */
        .pixel-border {
            border: 4px solid;
            border-image-slice: 2;
            border-image-width: 4px;
            border-image-repeat: stretch;
            border-image-source: url('data:image/svg+xml;utf8,<svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H2V2H0V0Z" fill="%239333ea"/><path d="M2 0H4V2H2V0Z" fill="%23c084fc"/><path d="M4 0H6V2H4V0Z" fill="%239333ea"/><path d="M0 2H2V4H0V2Z" fill="%23c084fc"/><path d="M4 2H6V4H4V2Z" fill="%23c084fc"/><path d="M0 4H2V6H0V4Z" fill="%239333ea"/><path d="M2 4H4V6H2V4Z" fill="%23c084fc"/><path d="M4 4H6V6H4V4Z" fill="%239333ea"/></svg>');
            position: relative;
            padding: 1.5rem;
        }

        /* Efeito de máquina de escrever (Typewriter) */
        #hero-title::after {
            content: '|';
            animation: blink 1s step-end infinite;
            margin-left: 0.25rem; /* Espaçamento do cursor */
            color: #c084fc; /* Cor do cursor, combinando com o tema roxo */
            font-weight: bold;
        }

        @keyframes blink {
            from, to {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
        }

        /* Para de piscar quando a digitação termina */
        #hero-title.typing-done::after {
            animation: none;
            content: ''; /* Remove o cursor */
        }

        /* Konami Code Easter Egg Animation */
        .konami-activated {
            animation: konami-spin 4s ease-in-out;
        }

        @keyframes konami-spin {
            0% {
                transform: rotate(0) scale(1);
                filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
            }
            25% {
                transform: rotate(360deg) scale(1.5);
                filter: drop-shadow(0 0 15px rgba(192, 132, 252, 1));
            }
            50% {
                transform: rotate(-360deg) scale(1.5);
                filter: drop-shadow(0 0 15px rgba(244, 114, 182, 1));
            }
            75% {
                transform: rotate(360deg) scale(1.5);
                filter: drop-shadow(0 0 15px rgba(99, 102, 241, 1));
            }
            100% {
                transform: rotate(0) scale(1);
                filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
            }
        }

        /* Custom Volume Slider */
        .volume-slider {
            -webkit-appearance: none;
            appearance: none;
            width: 80px;
            height: 8px;
            background: #372f4b; /* Trilha roxa escura */
            border-radius: 5px;
            outline: none;
            transition: opacity 0.2s;
            cursor: pointer;
        }

        /* Thumb para Webkit (Chrome, Safari) */
        .volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            background: #c084fc; /* Roxo vibrante */
            border-radius: 50%;
            border: 2px solid #0d0a1b; /* Borda combinando com o fundo */
            box-shadow: 0 0 5px rgba(192, 132, 252, 0.8);
            cursor: pointer;
        }

        /* Thumb para Firefox */
        .volume-slider::-moz-range-thumb {
            width: 16px;
            height: 16px;
            background: #c084fc;
            border-radius: 50%;
            border: 2px solid #0d0a1b;
            box-shadow: 0 0 5px rgba(192, 132, 252, 0.8);
            cursor: pointer;
            border: none; /* Firefox adiciona uma borda por padrão */
        }

        /* Glitch Hover Effect for Menu Links */
        .glitch-hover {
            position: relative;
            text-decoration: none;
        }

        .glitch-hover:hover {
            /* O texto original permanece visível, a cor não muda */
        }

        .glitch-hover::before,
        .glitch-hover::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            color: transparent; /* As camadas em si são transparentes, usamos apenas a sombra */
            /* O background foi removido para não cobrir o texto original */
            opacity: 0;
            transition: opacity 0.2s ease-out;
        }

        .glitch-hover:hover::before,
        .glitch-hover:hover::after {
            opacity: 0.8; /* Um pouco de transparência para suavizar */
        }

        .glitch-hover::before {
            left: 1px; /* Deslocamento sutil */
            text-shadow: -1px 0 #ff00c1; /* Magenta */
            animation: glitch-anim-1 2.5s infinite linear alternate-reverse; /* Animação mais lenta e sutil */
        }

        .glitch-hover::after {
            left: -1px; /* Deslocamento sutil */
            text-shadow: 1px 0 #00fff9; /* Cyan, invertido para melhor efeito */
            animation: glitch-anim-2 2.5s infinite linear alternate-reverse; /* Animação mais lenta e sutil */
        }

        @keyframes glitch-anim-1 {
            0% { clip-path: inset(45% 0 50% 0); } 25% { clip-path: inset(10% 0 80% 0); } 50% { clip-path: inset(80% 0 5% 0); } 75% { clip-path: inset(55% 0 40% 0); } 100% { clip-path: inset(20% 0 75% 0); }
        }

        @keyframes glitch-anim-2 {
            0% { clip-path: inset(5% 0 80% 0); } 25% { clip-path: inset(70% 0 15% 0); } 50% { clip-path: inset(45% 0 50% 0); } 75% { clip-path: inset(30% 0 65% 0); } 100% { clip-path: inset(55% 0 40% 0); }
        }