/* --- COMPILADO MOBILE SYNADEV: LOGO, TEXTO E GRID --- */
@media screen and (max-width: 768px) {
    
    /* 1. RESET DE CABEÇALHO (LOGO E ABAS) */
    nav {
        flex-direction: column !important; /* Logo em cima, abas embaixo */
        padding: 15px 10px !important;
        height: auto !important;
        gap: 10px !important;
    }

    .logo-synadev {
        font-size: 1.4rem !important; /* Diminui o logo para não ocupar a tela toda */
        text-align: center !important;
        margin: 0 auto !important;
        display: block !important;
        width: fit-content !important;
    }

    .nav-links {
        display: flex !important;
        justify-content: center !important;
        gap: 12px !important;
        width: 100% !important;
        flex-wrap: wrap !important; /* Se as abas forem muitas, elas pulam de linha */
    }

    .nav-links a {
        font-size: 0.8rem !important; /* Texto das abas bem discreto */
    }

    /* 2. AJUSTE DE TEXTOS GIGANTES (HERO E TÍTULOS) */
    h1 {
        font-size: 2rem !important; /* Reduz o título principal */
        line-height: 1.2 !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }

    h2, .pricing-title, .faq-title {
        font-size: 1.6rem !important;
        text-align: center !important;
    }

    p {
        font-size: 0.95rem !important;
        text-align: center !important;
        padding: 0 10px !important;
    }

    /* 3. ESFERAS DE LUZ (OTIMIZAÇÃO) */
    .main-glow {
        width: 250px !important; 
        height: 250px !important;
        top: 20% !important;
        left: 50% !important;
        filter: blur(40px) !important;
        opacity: 0.5 !important;
    }

    /* 4. GRIDS E CARDS (EMPILHAMENTO) */
    .services-grid, 
    .pricing-grid, 
    .faq-list {
        display: flex !important;
        flex-direction: column !important; /* Força um embaixo do outro */
        align-items: center !important;
        width: 100% !important;
        padding: 0 15px !important;
        gap: 20px !important;
    }

    .service-card, 
    .price-card, 
    .faq-item {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 15px 0 !important;
        box-sizing: border-box !important;
    }

    /* 5. BOTÕES */
    .btn-talk-expert, .btn-purple-fill, .btn-price-outline {
        width: 100% !important; /* Botões largos facilitam o clique no celular */
        text-align: center !important;
    }
}