/* ================= ESTILOS E ANIMAÇÕES DA PÁGINA SERVIÇOS ================= */
    body { padding-top: 0; }

    /* --- 1. Animação de Entrada em Cascata --- */
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .animate-block {
        opacity: 0; 
        animation: fadeInUp 0.8s ease-out forwards;
    }

    .delay-1 { animation-delay: 0.2s; }
    .delay-2 { animation-delay: 0.4s; }
    .delay-3 { animation-delay: 0.6s; }
    .delay-4 { animation-delay: 0.8s; }


    /* --- 2. Hover Premium nos Cards de Pilares --- */
    .pillar-card {
        text-align: center; 
        border-top: 4px solid var(--brand);
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        background: #fff;
        cursor: default;
        height: 100%; /* Garante altura igual */
    }
    .pillar-icon { 
        font-size: 40px; color: var(--brand); margin-bottom: 15px; display: block;
        transition: all 0.3s ease;
    }

    .pillar-card:hover { 
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.08);
        border-color: var(--accent-orange);
    }
    .pillar-card:hover .pillar-icon {
        transform: scale(1.1);
        color: var(--accent-orange);
    }


    /* --- 3. Estilo e Animação dos Cards de Funcionalidades --- */
    .service-card {
        text-align: left; /* Alinhamento à esquerda para leitura técnica */
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        border: 1px solid #eee;
        cursor: default;
        padding: 20px;
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .service-card h3 { font-size: 1.1rem; margin: 10px 0; color: #333; }
    
    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 24px rgba(11, 95, 138, 0.1);
        border-color: rgba(11, 95, 138, 0.3);
        z-index: 2; 
    }
    .service-icon { font-size: 28px; margin-bottom: 10px; display: block; width: fit-content; }


    /* --- 4. Timeline e Hover no Roadmap --- */
    .roadmap-item {
        display: flex; gap: 15px; margin-bottom: 15px; align-items: flex-start;
        padding: 15px; background: #f8fbff; border-radius: 8px; 
        border-left: 3px solid var(--accent-orange);
        transition: all 0.2s ease;
    }
    .roadmap-item:hover {
        background: #fff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        transform: translateX(5px);
    }
    .roadmap-icon { color: var(--accent-orange); font-size: 20px; margin-top: 2px; }