/*
 * Arquivo: style.css
 * Descrição: Estilos principais para NiixLabs.
*/

/* --- 1. Variáveis Globais e Estilos do Body --- */
:root {
    /* Cores Principais */
    --niix-blue: #5865F2; /* Cor principal, inspirada no Discord */
    --niix-dark-bg: #121419; /* Fundo escuro principal */
    --niix-dark-card: #0d0e12; /* Fundo dos cards e elementos */
    --niix-dark-border: #3c3c3c; /* Cor da borda */
    
    /* Cores de Texto */
    --niix-text-light: #ffffff; /* Texto principal no tema escuro */
    --niix-text-muted: #959393; /* Texto secundário, mais suave */
    
    /* Cores de Botão */
    --niix-btn-text: #ffffff;
}

body {
    font-family: 'Urbanist', sans-serif;
    background-color: var(--niix-dark-bg);
    color: var(--niix-text-light);
    font-weight: 400;
}

/* --- 2. Classes Utilitárias de Cor --- */
.main-text-color {
    color: var(--niix-blue);
}

.text-color {
    color: var(--niix-text-light);
}

.card-color-2 {
    color: var(--niix-text-muted);
}


/* --- 3. Header (Navbar) --- */
.navbar {
    background-color: var(--niix-dark-bg);
    border-bottom: 1px solid var(--niix-dark-border);
    padding: 0.8rem 1rem;
}

.navbar-brand img {
    height: 45px; /* Ajuste a altura do seu logo */
    transition: transform 0.3s ease;
}

.navbar-brand img:hover {
    transform: scale(1.05);
}

.nav-link {
    color: var(--niix-text-muted);
    font-weight: 500;
    margin: 0 0.5rem;
    transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--niix-text-light);
}

/* --- 4. Botões --- */
.btn {
    border-radius: 8px;
    font-weight: 600;
    padding: 10px 22px;
    transition: all 0.3s ease;
}

.btn-main {
    background-color: var(--niix-blue);
    color: var(--niix-btn-text);
    border: 1px solid var(--niix-blue);
}

.btn-main:hover {
    background-color: #4a54c4; /* Um tom mais escuro do azul */
    border-color: #4a54c4;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(88, 101, 242, 0.3);
}

.btn-outline-secondary {
    color: var(--niix-text-light);
    border-color: var(--niix-dark-border);
}

.btn-outline-secondary:hover {
    background-color: var(--niix-dark-border);
    color: var(--niix-text-light);
}

/* --- 5. Seções e Cards --- */
section {
    padding: 60px 0;
}

.card {
    background-color: var(--niix-dark-card);
    border: 1px solid var(--niix-dark-border);
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Cards de Produto */
.product-card {
    overflow: hidden; /* Garante que a imagem não vaze do border-radius */
}

.product-card .card-img-top {
    border-radius: 12px 12px 0 0;
    aspect-ratio: 16 / 9; /* Proporção para a imagem */
    object-fit: cover;
}

.product-card .card-body {
    padding: 1.5rem;
}

/* --- 6. Acordeão (FAQ) --- */
.accordion-item {
    background-color: var(--niix-dark-card);
    border: 1px solid var(--niix-dark-border);
    border-radius: 8px !important; /* Sobrescreve o Bootstrap */
}

.accordion-button {
    color: var(--niix-text-light);
    background-color: transparent;
    font-weight: 600;
}

.accordion-button:not(.collapsed) {
    color: var(--niix-blue);
    background-color: rgba(88, 101, 242, 0.1);
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(88, 101, 242, 0.25); /* Anel de foco na cor do tema */
}

.accordion-body {
    color: var(--niix-text-muted);
}

/* --- 7. Swiper (Depoimentos) --- */
.swiper-pagination-bullet {
    background-color: var(--niix-dark-border);
    opacity: 0.7;
}

.swiper-pagination-bullet-active {
    background-color: var(--niix-blue);
    opacity: 1;
}

/* --- 8. Footer --- */
.footer {
    background-color: var(--niix-dark-card);
    border-top: 1px solid var(--niix-dark-border);
    color: var(--niix-text-muted);
}

.footer h4 {
    color: var(--niix-text-light);
    margin-bottom: 1.5rem;
}

.footer .list-unstyled a {
    text-decoration: none;
    color: var(--niix-text-muted);
    transition: color 0.3s ease;
}

.footer .list-unstyled a:hover {
    color: var(--niix-blue);
}

.footer .fab, .footer .fas { /* Ícones de redes sociais e contato */
    color: var(--niix-text-muted);
    transition: color 0.3s ease;
}

.footer a:hover .fab, .footer a:hover .fas {
    color: var(--niix-blue);
}