/* ============================================================
   CYBERSYS.CO.MZ - PATCH 2 (tema claro)
   Corrige: projectos cards, secção serviços, legibilidade
   ============================================================ */

/* ------------------------------------------------------------
   SERVIÇOS — mesma transparência do menu
   ------------------------------------------------------------ */
#servicos, .servicos-section {
    background:
        linear-gradient(180deg, rgba(255, 107, 26, 0.03) 0%, rgba(255, 255, 255, 0) 100%),
        rgba(255, 255, 255, 0.08) !important;
    -webkit-backdrop-filter: saturate(160%) blur(18px);
            backdrop-filter: saturate(160%) blur(18px);
    position: relative;
}

#servicos .service-card,
.servicos-section .service-card,
.servico-card {
    background: rgba(255, 255, 255, 0.55) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%);
            backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 107, 26, 0.15) !important;
    color: #1a1a2e !important;
    box-shadow: 0 8px 32px rgba(15, 23, 41, 0.06) !important;
}

#servicos .service-card::before,
.servicos-section .service-card::before,
.servico-card::before {
    background: linear-gradient(135deg, rgba(255, 107, 26, 0.45), rgba(255, 255, 255, 0.2) 40%, rgba(255, 107, 26, 0.25)) !important;
    opacity: 0.7 !important;
}

#servicos .service-card:hover,
.servicos-section .service-card:hover,
.servico-card:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(255, 107, 26, 0.4) !important;
    box-shadow: 0 20px 50px rgba(255, 107, 26, 0.12), 0 4px 16px rgba(15, 23, 41, 0.08) !important;
}

/* ------------------------------------------------------------
   PROJECTOS — adaptar para fundo claro
   ------------------------------------------------------------ */
#projetos {
    background:
        radial-gradient(ellipse 70% 50% at 15% 0%, rgba(255, 107, 26, 0.05), transparent 60%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(37, 193, 245, 0.05), transparent 60%),
        #ffffff;
}

.projecto-card {
    background: #ffffff !important;
    color: #1a1a2e !important;
    border: 1px solid rgba(255, 107, 26, 0.15) !important;
    box-shadow: 0 10px 40px rgba(15, 23, 41, 0.07) !important;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
}

.projecto-card::before {
    opacity: 0.35 !important;
}

.projecto-card::after {
    background: linear-gradient(135deg, rgba(255, 107, 26, 0.5), transparent 40%, rgba(255, 107, 26, 0.25)) !important;
}

.projecto-card:hover {
    border-color: rgba(255, 107, 26, 0.5) !important;
    box-shadow: 0 24px 60px rgba(255, 107, 26, 0.15), 0 8px 24px rgba(15, 23, 41, 0.08) !important;
}

.projecto-title {
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: #0f1729 !important;
}

.projecto-card.syswater .projecto-title {
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: #0d6b8a !important;
}

.projecto-desc {
    color: rgba(26, 26, 46, 0.72) !important;
}

.projecto-stack .tag {
    background: rgba(15, 23, 41, 0.04) !important;
    border: 1px solid rgba(15, 23, 41, 0.08) !important;
    color: rgba(26, 26, 46, 0.7) !important;
}

.projecto-badge {
    background: rgba(255, 107, 26, 0.1) !important;
    color: #d9500f !important;
    border-color: rgba(255, 107, 26, 0.3) !important;
}

.projecto-card.syswater .projecto-badge {
    background: rgba(37, 193, 245, 0.1) !important;
    color: #0b7ba3 !important;
    border-color: rgba(37, 193, 245, 0.35) !important;
}

.projecto-cta {
    color: #d9500f !important;
    font-weight: 700 !important;
}

.projecto-card.syswater .projecto-cta {
    color: #0b7ba3 !important;
}

/* ------------------------------------------------------------
   MENU — ajustar para fundo claro (ainda transparente)
   ------------------------------------------------------------ */
#mainNavbar, nav.navbar.fixed-top {
    background: rgba(255, 255, 255, 0.55) !important;
    border-bottom: 1px solid rgba(15, 23, 41, 0.06) !important;
    box-shadow: 0 4px 20px rgba(15, 23, 41, 0.04) !important;
}

#mainNavbar.scrolled, nav.navbar.fixed-top.scrolled {
    background: rgba(255, 255, 255, 0.85) !important;
    border-bottom-color: rgba(255, 107, 26, 0.2) !important;
}

#mainNavbar .nav-link {
    color: #1a1a2e !important;
}

#mainNavbar .nav-link:hover,
#mainNavbar .nav-link.active {
    color: #d9500f !important;
}

/* hamburger mobile — cor escura no fundo claro */
#mainNavbar .navbar-toggler {
    border-color: rgba(15, 23, 41, 0.15);
}

/* Logo no menu: o ficheiro branco não se vê no fundo branco,
   por isso usamos o logo normal (laranja + escuro) no topo */
#mainNavbar .navbar-logo { filter: none !important; }

/* ------------------------------------------------------------
   HEXÁGONOS — ajustar para fundo claro
   ------------------------------------------------------------ */
#inicio, .hero, .hero-section {
    background:
        radial-gradient(ellipse 80% 50% at 20% 0%, rgba(255, 107, 26, 0.08), transparent 60%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(37, 193, 245, 0.06), transparent 60%),
        #ffffff !important;
}

.hex-bg, .hexagons-bg, .hero-hex, .bg-hex { opacity: 0.4; }

/* ------------------------------------------------------------
   Mobile — menu mais sólido para leitura
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {
    #mainNavbar {
        background: rgba(255, 255, 255, 0.92) !important;
    }
    #mainNavbar .navbar-collapse {
        background: rgba(255, 255, 255, 0.98) !important;
        border-color: rgba(15, 23, 41, 0.08) !important;
    }
    #mainNavbar .nav-link {
        border-bottom-color: rgba(15, 23, 41, 0.06) !important;
    }
}