:root { --neon: #00ff88; --dark: #050505; --card: #141414; --glass: rgba(20, 20, 20, 0.6); }
body { background-color: var(--dark); color: #e5e5e5; font-family: 'Inter', sans-serif; -webkit-tap-highlight-color: transparent; overflow-x: hidden; }

/* --- Utilitários --- */
.text-neon { color: var(--neon); }
.bg-neon { background-color: var(--neon); }
.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }

/* --- Efeitos Visuais (Backgrounds) --- */
.cyber-grid { position: fixed; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 50px 50px; }
.spotlight { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; background: radial-gradient(600px circle at var(--x) var(--y), rgba(0, 255, 136, 0.15), transparent 40%); }
.shield-glow { filter: drop-shadow(0 0 20px rgba(0, 255, 136, 0.4)); }

/* --- Componentes UI --- */
/* Glassmorphism */
.glass-card { background: var(--glass); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); transform-style: preserve-3d; transform: perspective(1000px); transition: all 0.3s ease; }
.glass-panel { background: #141414; border: 1px solid #222; border-radius: 16px; transition: border-color 0.3s; }
.glass-panel:hover { border-color: #333; }
.glass-input { background: #0a0a0a; border: 1px solid #333; color: white; transition: all 0.2s; }
.glass-input:focus { border-color: var(--neon); outline: none; }

/* Botões */
.btn-neon-ghost { border: 1px solid var(--neon); color: var(--neon); background: transparent; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.btn-neon-ghost:hover { background: var(--neon); color: #000; box-shadow: 0 0 20px rgba(0, 255, 136, 0.4); }

/* --- Animações --- */
.fade-in-up { animation: fadeInUp 0.5s ease-out forwards; opacity: 0; transform: translateY(20px); }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

/* Typing Effect */
.typing-cursor::after { content: '|'; animation: blink 1s step-start infinite; color: var(--neon); }
@keyframes blink { 50% { opacity: 0; } }

/* Glitch 404 */
.glitch { position: relative; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.glitch::before { left: 2px; text-shadow: -1px 0 red; clip: rect(24px, 550px, 90px, 0); animation: glitch-anim-2 3s infinite linear alternate-reverse; }
.glitch::after { left: -2px; text-shadow: -1px 0 blue; clip: rect(85px, 550px, 140px, 0); animation: glitch-anim 2.5s infinite linear alternate-reverse; }
@keyframes glitch-anim { 0% { clip: rect(14px, 9999px, 122px, 0); } 100% { clip: rect(69px, 9999px, 88px, 0); } }
@keyframes glitch-anim-2 { 0% { clip: rect(109px, 9999px, 47px, 0); } 100% { clip: rect(12px, 9999px, 53px, 0); } }