
        body {
            background-color: #050816;
            color: #dfe1f6;
            overflow-x: hidden;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(0, 240, 255, 0.15);
        }
        .tech-grid {
            background-image: 
                linear-gradient(to right, rgba(0, 240, 255, 0.05) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(0, 240, 255, 0.05) 1px, transparent 1px);
            background-size: 40px 40px;
        }
        .glow-text {
            text-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
        }
        .neon-border-hover:hover {
            border-color: #00F0FF;
            box-shadow: 0 0 15px rgba(0, 240, 255, 0.1);
        }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
        }

        /* Story 06.7 — a fonte de ícones (Material Symbols) carrega de forma
           NÃO-bloqueante (media=print/onload no <head>). Enquanto o CSS da fonte
           não chega, o <span> renderia o texto da ligadura ("rocket_launch",
           "speed"...) numa fonte de sistema. Escondemos por visibility até a
           classe .fonts-ready ser setada no <html> (no onload do <link> da fonte,
           com rede de segurança no window load de language.js). visibility (e não
           display:none) preserva a caixa → sem layout shift. Fallback no-JS:
           <noscript> reexibe (ver <head> dos templates). */
        .material-symbols-outlined { visibility: hidden; }
        .fonts-ready .material-symbols-outlined { visibility: visible; }

        /* Acessibilidade: respeitar quem pediu menos animação (Epic 10.5). */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }

        /* Alvos de toque >= 44px no mobile (Epic 10.4). */
        @media (max-width: 767px) {
            header #langToggle,
            header .js-open-contact,
            footer a,
            #mobileNavPanel a,
            #contactModalClose,
            #contactForm button[type="submit"] {
                min-height: 44px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

            /* Nomes longos (ex.: "TypeScript") não vazam dos cards 2-col no mobile. */
            .glass-card .text-h2 {
                font-size: 1.1rem;
                line-height: 1.25;
                overflow-wrap: anywhere;
            }
        }