/* ====================================================
   ARQUIVO: home.css
   DESCRIÇÃO: Estilização da página inicial da Nodo
   AUTOR: Desenvolvimento Nodo
   DATA: 2024
   ==================================================== */

/* ====================================================
   IMPORTAÇÕES E CONFIGURAÇÕES GLOBAIS
   ==================================================== */

/* Reset CSS - Remove margens e paddings padrão */
* {
    margin: 0;
    /* Remove margens padrão de todos os elementos */
    padding: 0;
    /* Remove paddings padrão de todos os elementos */
    box-sizing: border-box;
    /* Inclui bordas e paddings no cálculo da largura/altura */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Define fonte padrão (fallback seguro) */
}

/* ====================================================
   ESTILOS DO BODY (FUNDO PRINCIPAL)
   ==================================================== */

body {
    background: linear-gradient(135deg, #0a1929 0%, #1a3a5f 50%, #0a4b7a 100%);
    /* Gradiente diagonal em tons de azul escuro (modo noturno padrão) */
    min-height: 100vh;
    /* Altura mínima de 100% da viewport */
    position: relative;
    /* Posição relativa para elementos absolutos filhos */
    overflow-x: hidden;
    /* Esconde rolagem horizontal */
    color: #fff;
    /* Cor do texto padrão: branco */
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Transição suave para mudanças de tema */
}

    /* ====================================================
   MODO CLARO (LIGHT MODE)
   ==================================================== */

    /* Classe adicionada ao body via JavaScript para ativar o modo claro */
    body.light-mode {
        background: linear-gradient(135deg, #e0f2fe 0%, #b8e1ff 50%, #a0d0ff 100%);
        /* Gradiente em tons de azul claro */
        color: #1e293b;
        /* Cor do texto: azul escuro para contraste */
    }

/* ====================================================
   ELEMENTOS DE FUNDO (DECORAÇÃO TECNOLÓGICA)
   ==================================================== */

/* Animação de rotação infinita */
@keyframes rotate {
    from {
        transform: rotate(0deg);
        /* Começa em 0 graus */
    }

    to {
        transform: rotate(360deg);
        /* Termina em 360 graus (volta completa) */
    }
}

/* Animação de movimento do grid */
@keyframes move {
    from {
        transform: translate(0, 0);
        /* Começa na posição original */
    }

    to {
        transform: translate(-50%, -50%);
        /* Move para cima e esquerda */
    }
}

/* Animação de brilho na logo */
@keyframes shine {
    0% {
        transform: translateX(-100%) rotate(45deg);
        /* Começa fora da tela à esquerda */
    }

    20%, 100% {
        transform: translateX(100%) rotate(45deg);
        /* Termina fora da tela à direita */
    }
}

/* Animação de pulsação */
@keyframes pulse {

    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        /* Tamanho normal */
        opacity: 0.3;
        /* Opacidade baixa */
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        /* Aumenta 20% */
        opacity: 0.5;
        /* Opacidade média */
    }
}

/* Efeito de brilho radial no fundo */
body::before {
    content: '';
    /* Elemento vazio */
    position: fixed;
    /* Fixo na tela (não rola) */
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 255, 255, 0.1) 0%, transparent 50%);
    /* Gradiente radial */
    animation: rotate 20s linear infinite;
    /* Rotação infinita */
    z-index: 0;
    /* Fica atrás de todo conteúdo */
    pointer-events: none;
    /* Não bloqueia cliques */
    transition: background 0.3s ease;
    /* Transição suave */
}

/* Ajuste do brilho no modo claro */
body.light-mode::before {
    background: radial-gradient(circle, rgba(37, 99, 235, 0.1) 0%, transparent 50%);
    /* Azul no modo claro */
}

/* Grid de fundo (linhas de circuito) */
body::after {
    content: '';
    /* Elemento vazio */
    position: fixed;
    /* Fixo na tela */
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1"><path d="M10 10 L 90 10 L 90 90 L 10 90 Z" fill="none" stroke="%2300ffff" stroke-width="0.5"/><circle cx="50" cy="50" r="5" fill="%2300ffff"/><line x1="50" y1="50" x2="10" y2="10" stroke="%2300ffff" stroke-width="0.3"/><line x1="50" y1="50" x2="90" y2="10" stroke="%2300ffff" stroke-width="0.3"/><line x1="50" y1="50" x2="90" y2="90" stroke="%2300ffff" stroke-width="0.3"/><line x1="50" y1="50" x2="10" y2="90" stroke="%2300ffff" stroke-width="0.3"/></svg>') repeat;
    /* SVG com linhas de circuito */
    animation: move 60s linear infinite;
    /* Animação infinita */
    z-index: 0;
    /* Fica atrás */
    pointer-events: none;
    /* Não bloqueia cliques */
    transition: background 0.3s ease;
    /* Transição suave */
}

/* Ajuste da cor do grid no modo claro */
body.light-mode::after {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1"><path d="M10 10 L 90 10 L 90 90 L 10 90 Z" fill="none" stroke="%232563eb" stroke-width="0.5"/><circle cx="50" cy="50" r="5" fill="%232563eb"/><line x1="50" y1="50" x2="10" y2="10" stroke="%232563eb" stroke-width="0.3"/><line x1="50" y1="50" x2="90" y2="10" stroke="%232563eb" stroke-width="0.3"/><line x1="50" y1="50" x2="90" y2="90" stroke="%232563eb" stroke-width="0.3"/><line x1="50" y1="50" x2="10" y2="90" stroke="%232563eb" stroke-width="0.3"/></svg>') repeat;
    /* Troca a cor ciano por azul (#2563eb) */
}

/* Bolhas de brilho (glow effects) */
.glow-effect {
    position: fixed;
    /* Fixo na tela (não rola com a página) */
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 255, 255, 0.15) 0%, transparent 70%);
    /* Gradiente radial com transparência */
    border-radius: 50%;
    /* Forma circular */
    z-index: 0;
    /* Fica atrás de todo conteúdo */
    pointer-events: none;
    /* Não bloqueia cliques nos elementos */
    transition: background 0.3s ease;
    /* Transição suave */
}

/* Ajuste do glow no modo claro */
body.light-mode .glow-effect {
    background: radial-gradient(circle, rgba(37, 99, 235, 0.15) 0%, transparent 70%);
    /* Azul no modo claro */
}

/* ====================================================
   CABEÇALHO (HEADER)
   ==================================================== */

header {
    position: relative;
    /* Posição relativa */
    z-index: 10;
    /* Fica acima dos elementos de fundo */
    background: rgba(10, 25, 41, 0.8);
    /* Fundo semi-transparente */
    backdrop-filter: blur(10px);
    /* Efeito de vidro fosco */
    border-bottom: 1px solid rgba(0, 255, 255, 0.2);
    /* Borda inferior tecnológica */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    /* Sombra */
    transition: background 0.3s ease, border-color 0.3s ease;
    /* Transição suave */
}

/* Header no modo claro */
body.light-mode header {
    background: rgba(255, 255, 255, 0.8);
    /* Fundo branco semi-transparente */
    border-bottom: 1px solid rgba(37, 99, 235, 0.2);
    /* Borda azul */
}

.header-container {
    max-width: 1200px;
    /* Largura máxima */
    margin: 0 auto;
    /* Centraliza horizontalmente */
    padding: 20px 40px;
    /* Espaçamento interno: 20px top/bottom, 40px left/right */
    display: flex;
    /* Flexbox para alinhamento */
    justify-content: space-between;
    /* Espaço entre elementos */
    align-items: center;
    /* Alinha verticalmente ao centro */
}

/* ====================================================
   LOGO
   ==================================================== */

.logo-container {
    display: flex;
    /* Flexbox */
    align-items: center;
    /* Alinha verticalmente */
    gap: 15px;
    /* Espaço entre ícone e texto */
}

/* Ícone da logo (círculo com N) */
.logo-n {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #0066ff, #00ccff);
    /* Gradiente azul */
    border-radius: 12px;
    /* Bordas arredondadas */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(0, 102, 255, 0.5);
    /* Brilho */
    position: relative;
    overflow: hidden;
    /* Esconde o excesso do efeito shine */
}

    /* Efeito shine (linha brilhante) */
    .logo-n::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transform: rotate(45deg);
        animation: shine 3s infinite;
        /* Animação infinita */
    }

/* Ajuste da logo no modo claro */
body.light-mode .logo-n {
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    /* Mantém tons de azul mas mais vibrantes */
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.3);
    /* Sombra em azul */
}

.logo-n span {
    color: white;
    font-size: 32px;
    font-weight: 800;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    position: relative;
    z-index: 1;
    /* Fica acima do efeito shine */
}

/* Texto da logo */
.logo-text {
    display: flex;
    flex-direction: column;
    /* Texto em coluna */
}

    .logo-text .nodo {
        font-size: 28px;
        font-weight: 800;
        background: linear-gradient(135deg, #00ffff, #4d9fff);
        /* Gradiente ciano/azul */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        letter-spacing: 1px;
        line-height: 1;
    }

/* Ajuste do texto NODO no modo claro */
body.light-mode .logo-text .nodo {
    background: linear-gradient(135deg, #2563eb, #0891b2);
    /* Gradiente para o texto NODO */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-text .tagline {
    font-size: 10px;
    color: #4d9fff;
    letter-spacing: 2px;
    text-transform: uppercase;
    /* Maiúsculas */
}

/* Ajuste do slogan no modo claro */
body.light-mode .logo-text .tagline {
    color: #2563eb;
    /* Cor do slogan em azul */
}

/* ====================================================
   NAVEGAÇÃO
   ==================================================== */

nav {
    display: flex;
    gap: 40px;
    /* Espaço entre itens */
    align-items: center;
    /* Alinha verticalmente */
}

    nav a {
        color: #b0e0ff;
        /* Azul claro */
        text-decoration: none;
        /* Remove sublinhado */
        font-weight: 500;
        font-size: 16px;
        transition: all 0.3s ease;
        /* Transição suave */
        position: relative;
        padding: 5px 0;
        /* Espaçamento interno vertical */
    }

/* Links no modo claro */
body.light-mode nav a {
    color: #1e293b;
    /* Links em azul escuro para contraste */
}

/* Linha decorativa abaixo dos links (efeito hover) */
nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    /* Começa com largura 0 */
    height: 2px;
    background: linear-gradient(90deg, #00ffff, #0066ff);
    /* Gradiente */
    transition: width 0.3s ease;
    /* Transição suave */
}

nav a:hover {
    color: #00ffff;
    /* Muda para ciano no hover */
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
    /* Brilho */
}

/* Hover no modo claro */
body.light-mode nav a:hover {
    color: #2563eb;
    /* Hover em azul */
}

nav a:hover::after {
    width: 100%;
    /* Linha se expande até 100% */
}

/* ====================================================
   BOTÃO DE TEMA (MODO CLARO/ESCURO)
   ==================================================== */

.theme-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    /* Mãozinha ao passar o mouse */
    padding: 8px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    /* Fundo semi-transparente */
    transition: all 0.3s ease;
    /* Transição suave */
}

    .theme-toggle:hover {
        background: rgba(255, 255, 255, 0.2);
        /* Escurece no hover */
        transform: scale(1.05);
        /* Aumenta levemente */
    }

.theme-icon {
    font-size: 18px;
    /* Tamanho do ícone */
}

.theme-text {
    font-size: 14px;
    font-weight: 500;
    color: #b0e0ff;
    /* Cor do texto */
}

/* Ajuste do botão de tema no modo claro */
body.light-mode .theme-toggle {
    background: rgba(37, 99, 235, 0.1);
    /* Fundo azul suave */
}

body.light-mode .theme-text {
    color: #1e293b;
    /* Texto escuro */
}

/* ====================================================
   BOTÃO DO HEADER (ENTRAR)
   ==================================================== */

.btn-header {
    background: linear-gradient(135deg, #0066ff, #00ccff);
    /* Gradiente */
    color: white;
    border: none;
    padding: 10px 30px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(0, 102, 255, 0.3);
    /* Brilho */
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    /* Esconde efeito shine */
}

    /* Efeito shine no botão */
    .btn-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s ease;
    }

    .btn-header:hover::before {
        left: 100%;
        /* Move o brilho da esquerda para direita */
    }

    .btn-header:hover {
        transform: translateY(-2px);
        /* Sobe levemente */
        box-shadow: 0 10px 25px rgba(0, 102, 255, 0.5);
        /* Brilho mais forte */
    }

/* ====================================================
   CONTEÚDO PRINCIPAL
   ==================================================== */

main {
    position: relative;
    z-index: 5;
    /* Acima do fundo */
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 40px;
}

/* ====================================================
   SEÇÃO HERO
   ==================================================== */

.hero-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Duas colunas iguais */
    gap: 60px;
    /* Espaço entre colunas */
    margin-bottom: 80px;
    /* Margem inferior */
    align-items: center;
    /* Alinha verticalmente */
}

.hero-content h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
    background: linear-gradient(135deg, #fff, #b0e0ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Ajuste do título no modo claro */
body.light-mode .hero-content h1 {
    background: linear-gradient(135deg, #0a1929, #2563eb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-content .slogan {
    font-size: 24px;
    color: #00ffff;
    margin-bottom: 25px;
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
    font-weight: 600;
}

/* Ajuste do slogan no modo claro */
body.light-mode .hero-content .slogan {
    color: #2563eb;
    text-shadow: 0 0 15px rgba(37, 99, 235, 0.3);
}

.hero-content p {
    color: #b0e0ff;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Ajuste do parágrafo no modo claro */
body.light-mode .hero-content p {
    color: #334155;
}

/* Estatísticas */
.hero-stats {
    display: flex;
    gap: 40px;
    margin-top: 40px;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 36px;
    font-weight: 800;
    color: #00ffff;
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}

/* Ajuste dos números no modo claro */
body.light-mode .stat-number {
    color: #2563eb;
    text-shadow: 0 0 20px rgba(37, 99, 235, 0.5);
}

.stat-label {
    color: #b0e0ff;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Ajuste dos labels no modo claro */
body.light-mode .stat-label {
    color: #334155;
}

/* Visual da hero */
.hero-visual {
    position: relative;
}

    .hero-visual::before {
        content: '';
        position: absolute;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(0, 255, 255, 0.2) 0%, transparent 70%);
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: pulse 4s ease-in-out infinite;
    }

/* Ajuste do brilho no modo claro */
body.light-mode .hero-visual::before {
    background: radial-gradient(circle, rgba(37, 99, 235, 0.2) 0%, transparent 70%);
}

/* Grid de conexões */
.connection-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 colunas */
    gap: 20px;
    position: relative;
    z-index: 2;
}

.connection-node {
    background: rgba(10, 25, 41, 0.7);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Ajuste dos cards no modo claro */
body.light-mode .connection-node {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(37, 99, 235, 0.3);
}

.connection-node:hover {
    transform: translateY(-5px);
    border-color: #00ffff;
    box-shadow: 0 10px 30px rgba(0, 255, 255, 0.2);
}

body.light-mode .connection-node:hover {
    border-color: #2563eb;
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.2);
}

.node-icon {
    font-size: 40px;
    margin-bottom: 10px;
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.5));
}

body.light-mode .node-icon {
    filter: drop-shadow(0 0 10px rgba(37, 99, 235, 0.5));
}

.node-title {
    color: #00ffff;
    font-weight: 600;
    margin-bottom: 5px;
}

body.light-mode .node-title {
    color: #2563eb;
}

.node-desc {
    color: #b0e0ff;
    font-size: 12px;
}

body.light-mode .node-desc {
    color: #334155;
}

/* ====================================================
   SEÇÃO SOBRE
   ==================================================== */

.about-section {
    background: rgba(10, 25, 41, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 20px;
    padding: 60px;
    margin-bottom: 60px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Ajuste da seção sobre no modo claro */
body.light-mode .about-section {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.about-section h2 {
    font-size: 36px;
    margin-bottom: 30px;
    background: linear-gradient(135deg, #00ffff, #4d9fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
}

body.light-mode .about-section h2 {
    background: linear-gradient(135deg, #2563eb, #0891b2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
    color: #b0e0ff;
    font-size: 18px;
    line-height: 1.8;
    text-align: center;
}

body.light-mode .about-content {
    color: #334155;
}

.about-content p {
    margin-bottom: 20px;
}

/* ====================================================
   SEÇÃO DE FUNCIONALIDADES
   ==================================================== */

.features-section {
    margin-bottom: 60px;
}

    .features-section h3 {
        font-size: 28px;
        color: #00ffff;
        margin-bottom: 40px;
        text-align: center;
        text-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
    }

body.light-mode .features-section h3 {
    color: #2563eb;
    text-shadow: 0 0 15px rgba(37, 99, 235, 0.3);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 colunas */
    gap: 25px;
}

.feature-card {
    background: rgba(10, 25, 41, 0.6);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 15px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s ease;
}

body.light-mode .feature-card {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: #00ffff;
    box-shadow: 0 10px 30px rgba(0, 255, 255, 0.15);
}

body.light-mode .feature-card:hover {
    border-color: #2563eb;
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.15);
}

.feature-icon {
    font-size: 48px;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.5));
}

body.light-mode .feature-icon {
    filter: drop-shadow(0 0 15px rgba(37, 99, 235, 0.5));
}

.feature-card h4 {
    color: #00ffff;
    font-size: 20px;
    margin-bottom: 15px;
}

body.light-mode .feature-card h4 {
    color: #2563eb;
}

.feature-card p {
    color: #b0e0ff;
    font-size: 14px;
    line-height: 1.6;
}

body.light-mode .feature-card p {
    color: #334155;
}

/* ====================================================
   SEÇÃO CTA (CHAMADA PARA AÇÃO)
   ==================================================== */

.cta-section {
    text-align: center;
    background: rgba(10, 25, 41, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 20px;
    padding: 60px;
}

body.light-mode .cta-section {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.cta-section h3 {
    font-size: 32px;
    color: #fff;
    margin-bottom: 20px;
}

body.light-mode .cta-section h3 {
    color: #0a1929;
}

.cta-section p {
    color: #b0e0ff;
    font-size: 18px;
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

body.light-mode .cta-section p {
    color: #334155;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

/* ====================================================
   BOTÕES PRINCIPAIS
   ==================================================== */

.btn-primary {
    background: linear-gradient(135deg, #0066ff, #00ccff);
    color: white;
    border: none;
    padding: 15px 40px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(0, 102, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

    /* Efeito shine no botão primário */
    .btn-primary::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s ease;
    }

    .btn-primary:hover::before {
        left: 100%;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 15px 35px rgba(0, 102, 255, 0.5);
    }

.btn-secondary {
    background: transparent;
    color: #00ffff;
    border: 2px solid #00ffff;
    padding: 15px 40px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Ajuste do botão secundário no modo claro */
body.light-mode .btn-secondary {
    color: #2563eb;
    border: 2px solid #2563eb;
}

.btn-secondary:hover {
    background: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
    transform: translateY(-2px);
}

body.light-mode .btn-secondary:hover {
    background: rgba(37, 99, 235, 0.1);
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.3);
}

/* ====================================================
   RODAPÉ (FOOTER)
   ==================================================== */

footer {
    position: relative;
    z-index: 10;
    background: rgba(10, 25, 41, 0.9);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 255, 255, 0.2);
    padding: 30px 0;
    margin-top: 60px;
    transition: background 0.3s ease;
}

/* Rodapé no modo claro */
body.light-mode footer {
    background: rgba(255, 255, 255, 0.9);
    border-top: 1px solid rgba(37, 99, 235, 0.2);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #b0e0ff;
}

/* Texto do rodapé no modo claro */
body.light-mode .footer-container {
    color: #334155;
}

.footer-links {
    display: flex;
    gap: 30px;
}

    .footer-links a {
        color: #b0e0ff;
        text-decoration: none;
        transition: all 0.3s ease;
    }

/* Links do rodapé no modo claro */
body.light-mode .footer-links a {
    color: #334155;
}

.footer-links a:hover {
    color: #00ffff;
}

body.light-mode .footer-links a:hover {
    color: #2563eb;
}

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

/* Para telas médias (tablets) */
@media (max-width: 968px) {
    .hero-section {
        grid-template-columns: 1fr;
        /* Uma coluna */
        gap: 40px;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 colunas */
    }

    .header-container {
        flex-direction: column;
        /* Empilha elementos */
        gap: 20px;
    }
}

/* Para telas pequenas (celulares) */
@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr;
        /* Uma coluna */
    }

    .cta-buttons {
        flex-direction: column;
        /* Botões empilhados */
    }

    .footer-container {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    nav {
        flex-wrap: wrap;
        /* Permite quebra */
        justify-content: center;
        gap: 20px;
    }

    .hero-content h1 {
        font-size: 36px;
        /* Reduz tamanho */
    }

    .hero-stats {
        gap: 20px;
        /* Reduz espaçamento */
    }

    .stat-number {
        font-size: 28px;
        /* Reduz tamanho */
    }
}