/* ================= HERO SECTION ================= */
.hero {
    position: relative;
    padding-top: 180px; /* Mais espaço pro header */
    padding-bottom: 100px;
    overflow: hidden; 
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-color: var(--bg-color); /* Garante o fundo preto base */
}

.hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 10; /* Conteúdo fica acima de tudo */
}

/* --- BADGE --- */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(0, 255, 194, 0.05); /* Mais sutil */
    border: 1px solid rgba(0, 255, 194, 0.15);
    border-radius: 100px;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 32px;
    backdrop-filter: blur(5px); /* Vidro no badge */
}

.status-dot {
    width: 6px;
    height: 6px;
    background-color: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--primary);
}

/* --- TIPOGRAFIA --- */
.hero-title {
    font-size: 4.5rem; /* Aumentei um pouco para bater com o print */
    line-height: 1.1;
    font-weight: 700;
    color: #FFF;
    margin-bottom: 24px;
    letter-spacing: -1.5px;
}

.text-gradient {
    background: linear-gradient(90deg, #FFF 10%, var(--primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.hero-subtitle {
    font-size: 1.125rem;
    color: var(--text-muted);
    max-width: 680px;
    line-height: 1.6;
    margin-bottom: 48px;
}

/* --- BOTÕES --- */
.hero-actions {
    display: flex;
    gap: 16px;
    margin-bottom: 100px; /* Afastei mais dos cards */
}

.btn-lg {
    padding: 16px 32px;
    font-size: 1rem;
}

/* --- STATS GRID (Os Cards) --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    width: 100%;
    max-width: 1100px;
}

.stat-card {
    /* Fundo muito escuro, quase preto, levemente azulado */
    background: var(--bg-cards); 
    border: 1px solid rgba(255, 255, 255, 0.08); /* Borda cinza bem fina */
    padding: 30px 24px; /* Mais espaçamento interno */
    border-radius: 12px; /* Radius um pouco menor que antes, conforme print */
    transition: all 0.4s ease;
    backdrop-filter: blur(10px);
    text-align: center;
    position: relative;
    overflow: hidden; /* Para conter o brilho */
}

/* --- ESTADO HOVER (A Mágica) --- */
.stat-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary); /* Borda Verde Neon */
    
    /* A Sombra Verde "Subindo" e o Glow atrás */
    box-shadow: 
        0 15px 40px -10px rgba(0, 255, 194, 0.25), /* Sombra externa difusa */
        inset 0 -20px 30px -10px rgba(0, 255, 194, 0.15); /* Luz interna vindo de baixo */
}

/* O Número (150+) */
.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #FFF; /* Branco por padrão */
    margin-bottom: 8px;
    transition: color 0.3s;
}

/* No hover do card, o número fica Verde Neon */
.stat-card:hover .stat-number {
    color: var(--primary);
    text-shadow: 0 0 20px rgba(0, 255, 194, 0.5); /* Brilho no texto */
}

.stat-label {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
}

/* ================= BACKGROUNDS ESPECIAIS ================= */

/* 1. O Grid Quadriculado (Feito com CSS Gradient) */
.hero-grid-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Cria linhas horizontais e verticais fininhas */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px; /* Tamanho dos quadrados */
    
    /* Um fade out nas bordas para o grid não ficar duro */
    mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
}

/* 2. As Luzes (Orbs) */
.hero-orbs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px); /* O segredo do "Glow" espalhado */
    opacity: 0.5;
    animation: floatOrb 10s ease-in-out infinite alternate;
}

/* Bola Verde (Central/Esquerda) */
.orb-green {
    width: 400px;
    height: 400px;
    background: var(--primary);
    top: 20%;
    left: 20%;
    opacity: 0.15; /* Mais suave */
}

/* Bola Roxa (Central/Direita - O contraste) */
.orb-purple {
    width: 500px;
    height: 500px;
    background: #7c3aed; /* Roxo Neon */
    top: 10%;
    right: 15%;
    opacity: 0.12;
    animation-delay: -5s; /* Começa em tempo diferente pra não ficarem sincronizadas */
}

/* Animação de Flutuar */
@keyframes floatOrb {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40px, -40px) scale(1.1); }
}

/* ================= RESPONSIVIDADE FINAL (Hero & Geral) ================= */


/* --- 1. AJUSTE DE ESCALA PARA NOTEBOOKS (Max 1366px) --- */
/* Foca em diminuir a altura para caber na tela sem rolagem excessiva */
@media (max-width: 1366px) {
    
    /* 1. Encolher a altura da seção Hero */
    .hero {
        padding-top: 110px; /* Reduzimos de 180px para 110px */
        padding-bottom: 50px; /* Reduzimos de 100px para 50px */
        min-height: auto; /* Remove a obrigação de ocupar a tela toda */
    }

    /* 2. Diminuir o Título Gigante */
    .hero-title {
        font-size: 2.8rem; /* De 4.5rem para 2.8rem */
        margin-bottom: 16px;
    }

    /* 3. Subtítulo mais compacto */
    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 32px;
        max-width: 600px;
    }

    /* 4. Aproximar os Botões */
    .hero-actions {
        margin-bottom: 50px; /* Traz os cards para mais perto (era 100px) */
    }
    
    .btn {
        padding: 10px 24px; /* Botões menores */
        font-size: 0.9rem;
    }

    /* 5. Cards de Estatística Menores */
    .stats-grid {
        max-width: 900px;
        gap: 16px; /* Menos espaço entre eles */
    }

    .stat-card {
        padding: 15px; /* Card mais fino */
    }

    .stat-number {
        font-size: 1.8rem; /* Número menor */
        margin-bottom: 0;
    }

    .stat-label {
        font-size: 0.8rem;
    }
    
    /* 6. Ajustar o Badge (Topo) */
    .hero-badge {
        margin-bottom: 20px;
        padding: 4px 12px;
        font-size: 0.75rem;
    }
}

/* --- 2. TABLETS E NOTEBOOKS MENORES (Max 1024px) --- */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 3.5rem; /* Ajuste intermediário */
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr); /* Grid vira 2x2 aqui */
        max-width: 600px; /* Limita a largura para não ficar esticado */
    }
}

/* --- 3. CELULARES E TABLETS EM PÉ (Max 768px) --- */
/* --- 3. CELULARES E TABLETS EM PÉ (Max 768px) --- */
@media (max-width: 768px) {
    
    /* Ajuste Geral da Seção Hero */
    .hero {
        padding-top: 110px; 
        padding-bottom: 60px;
        min-height: auto; 
    }

    /* Títulos e Textos */
    .hero-title {
        font-size: 2.2rem;
        letter-spacing: -1px;
        margin-bottom: 16px;
    }

    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 32px;
        padding: 0 10px;
    }

    /* Botões Empilhados */
    .hero-actions {
        flex-direction: column;
        width: 100%;
        gap: 12px;
        margin-bottom: 60px;
    }

    .btn {
        width: 100%;
        justify-content: center;
        padding: 14px;
    }

    /* Cards de Estatística */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr); 
        gap: 12px;
        width: 100%;
    }

    .stat-card {
        padding: 20px 10px; 
    }

    .stat-number {
        font-size: 1.8rem; 
    }

    .stat-label {
        font-size: 0.8rem;
    }

    /* --- AJUSTE DAS BOLAS (BACKGROUND) PARA MOBILE --- */
    .hero-orbs {
        opacity: 0.7; /* Aumentei levemente para garantir visibilidade */
    }
    
    /* Reposicionamos as bolas para garantir que fiquem dentro da tela do celular */
    .orb-green {
        width: 280px;
        height: 280px;
        filter: blur(70px);
        /* Posição Mobile: Canto superior esquerdo */
        top: 5%; 
        left: -20%; 
    }

    .orb-purple {
        width: 280px;
        height: 280px;
        filter: blur(70px);
        /* Posição Mobile: Meio/Direita (atrás dos botões/cards) */
        top: 40%;
        right: -20%; 
        animation-delay: -2s;
    }
}




/* ================= SERVICES SECTION ================= */
.services {
    padding: 100px 0;
    background-color: var(--bg-color);
    position: relative;
}

/* --- Cabeçalho da Seção --- */
.section-header {
    margin-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--primary);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #FFF;
    line-height: 1.2;
    margin-bottom: 16px;
}

.section-subtitle {
    color: var(--text-muted);
    font-size: 1rem;
    max-width: 600px;
}

/* --- GRID DE SERVIÇOS --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* --- ESTILO DO CARD --- */
.service-card {
    background: var(--bg-cards);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 40px 30px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

.service-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(13, 13, 20, 0.8);
}

/* Ícone */
.icon-box {
    width: 50px;
    height: 50px;
    background: rgba(0, 255, 194, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 24px;
    margin-bottom: 24px;
}

/* Textos do Card */
.service-card h3 {
    font-size: 1.25rem;
    color: #FFF;
    margin-bottom: 12px;
}

.service-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1; /* Empurra o botão pro final */
}

/* Lista de Features */
.service-features {
    margin-bottom: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 20px;
}

.service-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #D1D1D6;
    font-size: 0.85rem;
    margin-bottom: 10px;
}

.service-features li .dot {
    width: 6px;
    height: 6px;
    background-color: var(--primary);
    border-radius: 50%;
}

/* --- CARD DESTAQUE (Featured) --- */
.service-card.featured {
    border: 1px solid var(--primary); /* Borda Verde */
    background: rgba(0, 255, 194, 0.02); /* Fundo levemente verde */
    box-shadow: 0 0 30px rgba(0, 255, 194, 0.05);
}

.featured-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: #05050A;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
}

/* --- BOTÕES DO CARD --- */
/* Botão Outline (Normal) */
.btn-card-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #FFF;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s;
    background: transparent;
    gap: 8px;
}

.btn-card-outline:hover {
    border-color: #FFF;
    background: rgba(255, 255, 255, 0.05);
}

/* Botão Cheio (Featured) - Reutiliza estilos mas ajusta width */
.btn-full {
    width: 100%;
    justify-content: center;
    border-radius: 8px; /* Radius menor que o do header */
}

/* ================= AJUSTES FINAIS: SERVIÇOS ================= */

/* 1. ÍCONE DO CARD DESTAQUE (Igual ao print: Fundo Sólido + Ícone Preto) */
.service-card.featured .icon-box {
    background-color: var(--primary); /* Fundo Verde Neon Sólido */
    color: #05050A; /* Ícone Preto */
    box-shadow: 0 0 20px rgba(0, 255, 194, 0.4); /* Glow em volta do ícone */
    border: none;
}

/* 2. COMPACTAÇÃO PARA NOTEBOOKS (Max 1366px) */
/* Deixa a seção de serviços bem mais baixa para caber na tela */
@media (max-width: 1366px) {
    
    .services {
        padding: 60px 0; /* Reduz de 100px para 60px */
    }

    .section-header {
        margin-bottom: 40px; /* Aproxima o título dos cards */
    }

    .section-title {
        font-size: 2rem; /* Título menor */
    }

    .section-subtitle {
        font-size: 0.9rem;
    }

    /* Cards mais compactos */
    .service-card {
        padding: 25px 20px; /* Menos "gordura" interna */
    }

    .icon-box {
        width: 42px; /* Ícone menor */
        height: 42px;
        font-size: 20px;
        margin-bottom: 16px;
    }

    .service-card h3 {
        font-size: 1.1rem;
        margin-bottom: 8px;
    }

    .service-desc {
        font-size: 0.85rem;
        margin-bottom: 16px;
        line-height: 1.5;
    }

    .service-features {
        margin-bottom: 20px;
        padding-top: 15px;
    }
    
    .service-features li {
        margin-bottom: 6px; /* Itens da lista mais juntos */
    }

    .btn-card-outline, .btn-full {
        padding: 10px; /* Botão mais fino */
        font-size: 0.85rem;
    }
}

/* ================= RESPONSIVIDADE SERVICES ================= */

@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 Colunas */
    }
    /* O ultimo card fica sozinho na linha de baixo e estica */
    .service-card:last-child {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    
    /* --- ALINHAMENTO DO HEADER DA SEÇÃO --- */
    .section-header {
        text-align: center; /* Garante que o texto fique no meio */
        display: flex;
        flex-direction: column;
        align-items: center; /* O pulo do gato: centraliza o badge e blocos */
        margin-bottom: 40px; /* Espaço seguro em baixo */
    }

    /* Ajuste para o subtítulo não ficar largo demais nem torto */
    .section-subtitle {
        font-size: 0.95rem;
        max-width: 100%; /* Garante que cabe na tela */
        margin-left: auto;  /* Margem auto ajuda a centralizar blocos */
        margin-right: auto;
    }
    
    .section-title {
        font-size: 2rem;
        line-height: 1.2;
    }

    /* --- GRID (Que você já tinha) --- */
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .service-card:last-child {
        grid-column: span 1;
    }
}


/* ================= PRODUCTS HIGHLIGHT (NOVO LAYOUT) ================= */
.products-highlight {
    padding: 100px 0;
    background-color: #080810;
    position: relative;
    overflow: hidden; /* Para o glow não vazar */
}

/* Fundo Glow atrás do card principal */
.products-highlight::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    background: var(--primary);
    filter: blur(180px);
    opacity: 0.08;
    z-index: 0;
    pointer-events: none;
}

.highlight-card {
    position: relative;
    z-index: 1;
    background: rgba(15, 15, 25, 0.6); /* Fundo escuro */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 60px;
    
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50% Texto / 50% Visual */
    gap: 60px;
    align-items: center;
    margin-bottom: 30px;
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5);
}

/* --- LADO ESQUERDO (Conteúdo) --- */
.highlight-content h3 {
    font-size: 2.5rem;
    color: #FFF;
    margin-bottom: 8px;
    margin-top: 24px;
}

.text-neon { color: var(--primary); }

.highlight-subtitle {
    color: var(--primary);
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 24px;
}

.highlight-desc {
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 450px;
}

.status-green {
    background: rgba(0, 255, 194, 0.15);
    color: var(--primary);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dot-pulse {
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--primary);
}

/* Grid de Features (Ícones) */
.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
}

.feat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #E1E1E6;
    font-weight: 500;
    font-size: 0.95rem;
}

.feat-item i {
    color: var(--primary);
    font-size: 1.2rem;
}

/* --- LADO DIREITO (Visual Mockup CSS) --- */
.highlight-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* A Janela do Browser/Dashboard */
.browser-window {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 16/10;
    background: #12121A;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    position: relative;
}

.window-header {
    height: 36px;
    background: #1A1A24;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 8px;
}

.window-header .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.dot.red { background: #FF5F56; }
.dot.yellow { background: #FFBD2E; }
.dot.green { background: #27C93F; }

.window-body {
    flex: 1;
    display: flex;
    padding: 16px;
    gap: 16px;
    position: relative;
}

.sidebar {
    width: 20%;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    height: 100%;
}

.main-content {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
}

.widget {
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    width: 100%;
    height: 100%;
}

.widget.w-1 { grid-column: span 2; height: 50px; background: rgba(255,255,255,0.08); } /* Top bar */

/* O "Badge" flutuante do mockup */
.float-btn {
    position: absolute;
    bottom: 20px;
    right: 10px;
    background: #1A1A24;
    color: #FFF;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 10px 20px rgba(0,0,0,0.4);
    animation: floatBadge 4s ease-in-out infinite;
}

@keyframes floatBadge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* --- CARD BANNER (Faixa Inferior) --- */
.banner-card {
    background: rgba(13, 13, 20, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05); /* Borda pontilhada fake com dashed se quiser, mas solid fica mais clean */
    border-radius: 16px; /* Um pouco menos arredondado que o grandão */
    padding: 24px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.banner-info .mini-label {
    font-size: 0.7rem;
    letter-spacing: 1px;
    color: #A8A8B3;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}

.banner-info h4 {
    font-size: 1.25rem;
    color: #FFF;
    margin: 0;
}
.banner-info p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

/* ================= RESPONSIVIDADE (Novos Layouts) ================= */

@media (max-width: 1024px) {
    .highlight-card {
        grid-template-columns: 1fr; /* Vira coluna única */
        padding: 40px;
        gap: 40px;
        text-align: center;
    }

    .highlight-desc, .features-grid {
        margin-left: auto;
        margin-right: auto;
    }
    
    .features-grid {
        max-width: 400px;
        text-align: left; /* Ícones alinhados */
    }

    .highlight-visual {
        order: -1; /* Joga a imagem para cima no tablet/mobile */
    }

    .banner-card {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        padding: 30px;
    }
}



@media (max-width: 1366px) {
    /* Ajuste Notebook */
    .highlight-card { padding: 40px; gap: 40px; }
    .highlight-content h3 { font-size: 2rem; margin-top: 10px; }
    .highlight-desc { margin-bottom: 24px; font-size: 0.9rem; }
    .features-grid { margin-bottom: 24px; }
    .browser-window { max-width: 400px; }
}

/* ================= REFINAMENTO MOBILE: PRODUTOS (768px) - V3 FINAL ================= */
@media (max-width: 768px) {

    /* --- NOVO: Ajuste do Glow (Bola Verde) no Mobile --- */
    /* No desktop usávamos %, aqui forçamos px para manter a forma de bola */
    .products-highlight::before {
        width: 350px;  /* Tamanho fixo para garantir que seja uma bola */
        height: 350px;
        filter: blur(150px); /* Blur um pouco menor que desktop para definir mais */
        opacity: 0.15; /* Um pouco mais forte para aparecer bem na tela pequena */
        top: 30%; /* Posiciona mais para cima, atrás do card principal */
    }

    /* 1. Ajuste Geral da Seção */
    .products-highlight {
        padding: 50px 0; /* Mais compacto verticalmente */
    }

    /* 2. O Card Gigante (Highlight) */
    .highlight-card {
        grid-template-columns: 1fr;
        padding: 30px 20px; /* Padding lateral menor para o texto ter mais espaço */
        gap: 30px;
        border-radius: 20px;
        display: flex;
        flex-direction: column; /* Garante a ordem vertical */
        /* Fundo um pouco mais opaco no mobile para contraste com o glow */
        background: rgba(15, 15, 25, 0.8); 
    }

    /* 3. Conteúdo (Texto) */
    .highlight-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    /* Ajuste de Fontes para Mobile */
    .highlight-content h3 {
        font-size: 1.6rem; /* Reduzido de 2.5rem para caber melhor */
        line-height: 1.2;
        margin-top: 20px;
        text-align: center;
    }

    .highlight-subtitle {
        font-size: 0.95rem;
        margin-bottom: 16px;
        text-align: center;
    }

    .highlight-desc {
        font-size: 0.9rem;
        margin-bottom: 24px;
        text-align: center;
        color: var(--text-muted);
        line-height: 1.5;
    }

    /* 4. Grid de Features (Ícones) - Estilo "Botões" */
    .features-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2 Colunas lado a lado */
        gap: 10px; /* Gap menor para ficar compacto */
        width: 100%;
        margin-bottom: 24px;
    }

    .feat-item {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        padding: 12px;
        font-size: 0.8rem; /* Fonte menor */
        justify-content: flex-start; /* Alinha ícone e texto */
        gap: 10px;
        text-align: left;
    }

    /* 5. Visual (Mockup) */
    .highlight-visual {
        width: 100%;
        margin-bottom: 20px; /* Espaço para o botão */
        order: 2; /* Garante a posição */
    }

    .browser-window {
        width: 100%;
        height: 180px; /* Altura controlada */
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }

    /* Ocultar detalhes muito pequenos do mockup no mobile */
    .float-btn {
        display: none; 
    }

    /* 6. Botão de Ação */
    .highlight-content .btn {
        width: 100%;
        padding: 14px;
        font-size: 1rem;
        order: 3; /* Fica por último */
    }

    /* 7. Card CRM (Faixa de baixo) */
    .banner-card {
        flex-direction: column;
        padding: 24px;
        gap: 16px;
        text-align: center;
        border-radius: 16px;
        background: rgba(15, 15, 25, 0.8); /* Fundo mais opaco também */
    }

    .banner-info h4 {
        font-size: 1.2rem;
        margin-bottom: 4px;
    }
    
    .banner-action {
        width: 100%;
    }

    .banner-action .btn {
        width: 100%;
    }
}



/* ================= INFRASTRUCTURE SECTION (ATUALIZADA) ================= */
.infra {
    padding: 140px 0; /* Mais altura para respirar */
    position: relative;
    background-color: var(--bg-color);
    overflow: hidden;
}

/* 1. Background Grid (Quadriculado Sutil) */
.infra-bg-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: 0;
    mask-image: radial-gradient(circle at center, black 40%, transparent 90%);
    -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 90%);
    pointer-events: none;
}

/* 2. Luzes de Fundo (Orbs) */
.infra-orbs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
/* Reutilizando as cores e animações da Hero, mas posicionando diferente */
.infra-orbs .orb-green {
    top: 60%; left: -10%; width: 500px; height: 500px; opacity: 0.12;
}
.infra-orbs .orb-purple {
    top: -20%; right: -10%; width: 600px; height: 600px; opacity: 0.08;
}

/* --- CONTAINER LARGO (Para afastar o conteúdo) --- */
.infra-container {
    position: relative;
    z-index: 2;
    display: grid;
    /* Colunas 40% / 60% mas com gap gigante para afastar */
    grid-template-columns: 0.8fr 1.2fr; 
    gap: 100px; /* Gap aumentou de 60px para 100px */
    align-items: center;
    max-width: 1400px !important; /* Força ser mais largo que o padrão */
    width: 95%; /* Garante margem segura nas bordas */
}

/* --- COLUNA ESQUERDA --- */
.badge-dark {
    background: rgba(255, 255, 255, 0.08);
    color: var(--primary);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 24px;
    border: 1px solid rgba(255,255,255,0.05);
}

.infra-content .section-subtitle {
    max-width: 450px; /* Limita texto para não ficar comprido demais */
    margin-bottom: 60px;
}

/* --- NOVO VISUAL: TECH CLUSTER (O "Sol" de Tecnologia) --- */
.tech-cluster {
    position: relative;
    width: 280px;
    height: 280px;
    /* Centraliza visualmente na coluna se quiser, ou alinhe a esquerda */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Núcleo Central */
.core-circle {
    width: 100px;
    height: 100px;
    background: rgba(13, 13, 25, 1);
    border: 1px solid var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 40px;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 30px rgba(0, 255, 194, 0.2);
}

/* Onda pulsante */
.core-pulse {
    position: absolute;
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 1px solid var(--primary);
    opacity: 0;
    animation: pulseCore 2s infinite;
}

/* Satélites (Itens flutuando em volta) */
.satellite {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-cards);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 8px 16px 8px 8px;
    border-radius: 50px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    animation: floatSat 4s ease-in-out infinite;
}

.sat-icon {
    width: 32px; height: 32px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
}

.sat-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #E1E1E6;
}

/* Posições dos Satélites */
.sat-1 { top: 0; right: 0; animation-delay: 0s; }
.sat-2 { bottom: 20px; right: -20px; animation-delay: 1.5s; }
.sat-3 { bottom: 60px; left: -40px; animation-delay: 2.5s; }


/* --- COLUNA DIREITA (GRID DE CARDS) --- */
.infra-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.infra-card {
    background: var(--bg-cards);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: all 0.3s ease;
}

.infra-card:hover {
     transform: translateY(-10px);
    border-color: var(--primary); /* Borda Verde Neon */
    
    /* A Sombra Verde "Subindo" e o Glow atrás */
    box-shadow: 
        0 15px 40px -10px rgba(0, 255, 194, 0.25), /* Sombra externa difusa */
        inset 0 -20px 30px -10px rgba(0, 255, 194, 0.15); 
}

.infra-icon {
    width: 48px;
    height: 48px;
    background: rgba(0, 255, 194, 0.05); /* Fundo verde bem leve */
    border: 1px solid rgba(0, 255, 194, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 24px;
    flex-shrink: 0;
}

.card-txt h4 {
    font-size: 1.1rem;
    color: #FFF;
    margin-bottom: 4px;
}

.card-txt p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ================= ANIMAÇÕES ================= */
@keyframes pulseCore {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.6); opacity: 0; }
}

@keyframes floatSat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}


/* ================= RESPONSIVIDADE COMPLETA: INFRAESTRUTURA ================= */

/* --- 1. NOTEBOOKS (1025px até 1440px) --- */
/* Mantém 2 colunas, mas aperta o layout para caber na tela */
/* ================= AJUSTE ESTRITO PARA NOTEBOOKS (1025px até 1440px) ================= */
@media (min-width: 1025px) and (max-width: 1440px) {
    
    /* 1. Mais respiro vertical */
    .infra {
        padding: 100px 0; /* Aumentei de 80px para 100px */
    }

    /* 2. Redistribuir colunas (50% / 50%) */
    .infra-container {
        grid-template-columns: 1fr 1fr; /* Espaço igual para os dois lados */
        gap: 60px; /* Um pouco mais de espaço entre eles */
        padding: 0 40px;
        align-items: center; /* Centraliza verticalmente */
    }

    
    /* 3. Coluna da Esquerda (Texto + Visual) */
    .infra-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-right: 20px;
        /* A CORREÇÃO MÁGICA: */
        align-items: flex-start; /* Impede que o botão estique a largura toda */
    }

    .infra-content .section-title {
        font-size: 2.2rem; /* Título um pouco maior para preencher */
        line-height: 1.2;
    }

    .infra-content .section-subtitle {
        font-size: 0.95rem;
        max-width: 90%; /* Deixa o texto ocupar mais largura */
        margin-bottom: 40px;
    }

    /* 4. Visual (Tech Cluster) - Centralizado na coluna da esquerda */
    .tech-cluster {
        transform: scale(0.9); /* Um pouco maior que antes (era 0.8) */
        transform-origin: center center;
        margin: 0 auto; /* Centraliza horizontalmente na coluna da esquerda */
        display: flex;
    }

    /* 5. Coluna da Direita (Grid de Cards) - Mais preenchido */
    .infra-grid {
        gap: 16px;
        /* Com a coluna mais estreita (1fr), os cards vão preencher melhor o espaço */
    }

    .infra-card {
        padding: 20px; /* Cards um pouco mais gordinhos para preencher */
        gap: 12px;
    }

    .infra-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .card-txt h4 { font-size: 1rem; }
    .card-txt p { font-size: 0.85rem; }
}

/* --- 2. TABLETS (Max 1024px) --- */
/* Vira coluna única centralizada */
@media (max-width: 1024px) {
    .infra-container {
        grid-template-columns: 1fr;
        gap: 60px;
        text-align: center;
    }
    
    .infra-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .infra-content .section-subtitle { margin-bottom: 40px; }

    .tech-cluster { margin: 0 auto; } /* Centraliza o visual */
}

/* --- 3. CELULARES (Max 768px) --- */
/* Visual ajustado e Cards Slim */
@media (max-width: 768px) {

    .infra {
        padding: 60px 0;
    }

    .infra-container {
        gap: 20px; /* Reduz o espaço entre o topo e a lista */
    }

    .infra-content {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 0; /* Cola no visual abaixo */
    }
    
    .section-subtitle {
        margin-bottom: 10px; /* Cola no topo do visual */
    }

    /* --- AJUSTE FINO DO VISUAL (TECH CLUSTER) --- */
    .tech-cluster {
        display: flex;
        /* Margens enxutas para remover espaços vazios */
        margin: 0 auto 15px auto; 

        /* Escala ajustada (Maior que antes, mas cabe na tela) */
        transform: scale(0.85);
        transform-origin: top center; 
        
        /* Altura recalculada para compensar a escala */
        height: 240px; 
    }

    /* --- LISTA DE CARDS COMPACTOS (SLIM) --- */
    .infra-grid {
        grid-template-columns: 1fr;
        gap: 10px; /* Cards coladinhos */
    }

    .infra-card {
        display: flex;
        align-items: center; /* Ícone e texto alinhados no meio */
        text-align: left;
        gap: 14px;
        padding: 12px 16px; /* Bem baixinho */
        min-height: auto;
        background: rgba(13, 13, 20, 0.6);
        border-radius: 12px;
    }

    .infra-icon {
        width: 36px;
        height: 36px;
        font-size: 18px;
        flex-shrink: 0;
        margin-bottom: 0; /* Remove margem do desktop */
        border-radius: 8px;
    }

    .card-txt h4 {
        font-size: 0.95rem;
        margin-bottom: 2px;
    }

    .card-txt p {
        font-size: 0.8rem;
        line-height: 1.3;
        color: #A8A8B3;
        margin: 0;
    }
}


/* ================= PERFORMANCE SECTION (SAFE & FINAL) ================= */
.performance {
    padding: 120px 0;
    background-color: #05050A;
    position: relative;
    overflow: hidden; /* Garante que luzes/glows não criem barra de rolagem */
    
    background-image: 
        radial-gradient(circle at 0% 50%, rgba(0, 255, 194, 0.08), transparent 40%),
        radial-gradient(circle at 90% 20%, rgba(0, 255, 194, 0.06), transparent 45%);
}

.perf-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: center;
}

/* --- TEXTOS E LISTA --- */
.badge-blue {
    background: rgba(0, 255, 194, 0.08);
    color: var(--primary);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(0, 255, 194, 0.15);
    display: inline-block;
    margin-bottom: 24px;
}

.perf-features {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
    padding: 0;
    list-style: none;
}

.perf-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #E1E1E6;
    font-weight: 500;
    font-size: 0.95rem;
}

.check-icon {
    width: 24px;
    height: 24px;
    background: rgba(0, 255, 194, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 14px;
    flex-shrink: 0;
}

/* --- STATS (DESKTOP) --- */
.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
}

.perf-stat-card {
    background: var(--bg-cards);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px 16px;
    text-align: center;
    transition: transform 0.3s;
}

.perf-stat-card:hover {
     transform: translateY(-10px);
    border-color: var(--primary); /* Borda Verde Neon */
    
    /* A Sombra Verde "Subindo" e o Glow atrás */
    box-shadow: 
        0 15px 40px -10px rgba(0, 255, 194, 0.25), /* Sombra externa difusa */
        inset 0 -20px 30px -10px rgba(0, 255, 194, 0.15); 
}

.perf-stat-card h3 {
    font-size: 1.5rem;
    color: var(--primary);
    font-weight: 700;
    margin: 12px 0 4px 0;
}

.perf-stat-card p {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.3;
    margin: 0;
}

.icon-stat { font-size: 1.5rem; color: var(--primary); }

/* --- GRÁFICO --- */
.chart-card {
    background: var(--bg-cards);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 30px 40px;
    margin-top: 24px;
}

.bar-chart {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 220px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0 10px;
}

.bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    flex: 1; /* Ocupa espaço igual */
}

.bar {
    width: 45px; /* Desktop: Barra Gordinha */
    background: var(--primary);
    border-radius: 8px 8px 0 0;
    opacity: 0.9;
    transition: height 1s ease;
}

.bar:hover { opacity: 1; box-shadow: 0 0 15px rgba(0,255,194,0.3); }

.label { font-size: 0.75rem; color: var(--text-muted); margin-top: 8px; }
.chart-caption { text-align: center; font-size: 0.9rem; color: var(--text-muted); margin: 0; }

/* Esconde indicadores no Desktop */
.carousel-indicators { display: none; }


/* ================= MEDIA QUERIES (RESPONSIVIDADE) ================= */

/* NOTEBOOK (1025px - 1440px) */
@media (min-width: 1025px) and (max-width: 1440px) {
    .performance { padding: 80px 0; }
    .perf-container { gap: 40px; padding: 0 30px; }
    .bar { width: 30px; } /* Ajuste barra */
    .chart-card { padding: 20px; }
}

/* TABLET (Max 992px) */
@media (max-width: 992px) {
    .perf-container {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }

    .perf-text-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .perf-features { align-items: flex-start; display: inline-flex; text-align: left; }
}
/* ================= AJUSTE MOBILE PERFORMANCE (CARROSSEL FIX) ================= */
/* ================= AJUSTE MOBILE PERFORMANCE (FINAL V4) ================= */
@media (max-width: 768px) {
    
    .performance {
        padding: 50px 0;
        width: 100%;
        overflow: hidden; 
    }

    .perf-container {
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 0 20px;
        width: 100%;
        box-sizing: border-box;
    }

    .perf-content { width: 100%; text-align: center; }
    .section-title { font-size: 1.8rem; word-wrap: break-word; }
    .perf-features { display: inline-flex; align-items: flex-start; text-align: left; margin: 0 auto 30px auto; }
    .btn-mobile-full { width: 100%; justify-content: center; }

    /* --- CARROSSEL --- */
    .stats-scroll-wrapper {
        width: 100vw;
        margin-left: -20px;
        padding: 10px 0; /* Espaço para o card flutuar */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; 
        -ms-overflow-style: none;
    }
    
    .stats-scroll-wrapper::-webkit-scrollbar { display: none; }

    .stats-row {
        display: flex;
        gap: 16px;
        padding: 0 20px; /* Padding interno para alinhar o primeiro item */
        width: max-content;
        scroll-snap-type: x mandatory;
    }

    .perf-stat-card {
        min-width: 240px; /* Card largo para destaque */
        scroll-snap-align: center;
        background: rgba(13, 13, 20, 0.9);
        box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* Sombra para destacar */
    }

    /* --- NOVAS BOLINHAS (INDICADORES) --- */
    .carousel-indicators {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: -10px; /* Puxa pra perto do carrossel */
        margin-bottom: 30px;
    }

    .dot {
        width: 8px;
        height: 8px;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        transition: all 0.3s ease;
    }

    .dot.active {
        background-color: var(--primary); /* Verde Neon */
        width: 20px; /* Estica quando ativo */
        border-radius: 10px;
    }

    /* --- GRÁFICO (Espaçamento Lateral) --- */
    .chart-card {
        /* Margem lateral para não grudar na borda */
        margin: 0 5px; 
        width: auto; /* Deixa a margem agir */
        padding: 20px 15px;
        box-sizing: border-box;
    }

    .bar-chart {
        height: 180px;
        gap: 8px;
    }

    .bar {
        width: 100%;
        min-width: 10px;
        border-radius: 4px 4px 0 0;
    }
    
    .label { font-size: 0.6rem; }
}