/* =========================================
   1. FUNDAÇÃO (CORES E TIPOGRAFIA GLOBAL)
   ========================================= */
:root {
    --bg-base: #050507;
    --bg-panel: rgba(15, 17, 26, 0.8);
    --neon-ciano: #00f3ff;
    --neon-limao: #39ff14;
    --dourado-premium: #facc15;
    --texto-secundario: #a1a1aa;
}

html { 
    font-size: 17.5px; 
}

/* O CADEADO DE LARGURA: Impede luzes e elementos absolutos de criarem barra de rolagem */
html, body { 
    background-color: var(--bg-base); 
    color: #fff; 
    font-family: 'Montserrat', sans-serif; 
    min-height: 100vh;
    margin: 0;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden !important; 
}

/* Garante que TUDO fique NA FRENTE dos lasers */
.container, .container-fluid, .content-z, .top-navbar {
    position: relative;
    z-index: 10; 
}

/* =========================================
   2. PAINÉIS DE VIDRO E CARDS (COM EFEITO GLOW)
   ========================================= */
.glass-panel { 
    background: var(--bg-panel); 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 243, 255, 0.15); 
    border-radius: 20px; 
    padding: 40px; 
}

.glass-card { 
    background: var(--bg-panel); 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05); 
    border-radius: 20px; 
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* O toque de mestre que você pediu: Luz controlada no contorno ao passar o mouse */
.glass-card:hover { 
    border-color: rgba(0, 243, 255, 0.4); 
    box-shadow: 0 10px 30px rgba(0, 243, 255, 0.15), inset 0 0 15px rgba(0, 243, 255, 0.05); 
    transform: translateY(-5px); 
}

/* =========================================
   3. CAMPOS DE TEXTO COM ALTO CONTRASTE
   ========================================= */
.form-control-neon { 
    background: rgba(0, 0, 0, 0.6) !important; /* Mais escuro para destacar do fundo */
    border: 1px solid rgba(0, 243, 255, 0.3) !important; 
    color: #ffffff !important; 
    padding: 14px 18px; 
    border-radius: 10px; 
    transition: all 0.3s ease;
    font-size: 1rem; 
}

.form-control-neon::placeholder { color: rgba(255, 255, 255, 0.3); }

.form-control-neon:focus { 
    background: rgba(0, 0, 0, 0.8) !important; 
    border-color: var(--neon-ciano) !important; 
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.4) !important; 
}

/* =========================================
           4. BOTÕES PREMIUM & CALL TO ACTION
           ========================================= */
        /* O Novo Botão Gigante do WhatsApp (Hero Section) */
        .btn-hero-wpp {
            background: rgba(15, 17, 26, 0.6);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid var(--neon-limao);
            color: #fff;
            padding: 18px 40px;
            font-size: 1.1rem;
            font-weight: 800;
            border-radius: 50px;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.4s ease;
            box-shadow: 0 0 15px rgba(57, 255, 20, 0.15);
            display: inline-block;
            text-decoration: none;
        }

        .btn-hero-wpp:hover {
            background: var(--neon-limao);
            color: #000;
            box-shadow: 0 0 30px rgba(57, 255, 20, 0.5);
            transform: translateY(-3px);
        }

        .btn-hero-wpp i {
            color: var(--neon-limao);
            transition: 0.4s ease;
        }
        
        .btn-hero-wpp:hover i {
            color: #000;
        }

        /* =========================================
           BOTÃO EAD ANIMADO (MOBILE)
           ========================================= */
        .ead-anim-box {
            position: relative;
            padding: 2px; /* A espessura da linha rodando */
            border-radius: 12px;
            background: transparent;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 243, 255, 0.2);
        }

        /* A fita de LED ciano girando no fundo */
        .ead-anim-box::before {
            content: '';
            position: absolute;
            top: -50%; left: -50%; width: 200%; height: 200%;
            background: conic-gradient(transparent, transparent, transparent, var(--neon-ciano));
            animation: rotateBorder 3s linear infinite;
            z-index: 0;
        }

        /* O miolo de vidro escuro do botão EAD */
        .ead-inner-card {
            background: rgba(10, 12, 18, 0.95); 
            border-radius: 10px;
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: 0.3s;
        }

        .ead-inner-card:active {
            background: rgba(0, 243, 255, 0.1);
        }

/* =========================================
   5. MOTOR DE LASER BACKGROUND (CORRIGIDO)
   ========================================= */
.neon-beams-container {
    position: fixed; /* Fica travado no fundo independentemente da rolagem */
    top: 0; left: 0; width: 100vw; height: 100vh;
    overflow: hidden; 
    z-index: 0; /* Z-INDEX 0 É O SEGREDO! Ele fica entre a parede preta (-1) e os textos (10) */
    pointer-events: none;
}

.beam {
    position: absolute; width: 2px; height: 200%; 
    background: var(--neon-ciano);
    box-shadow: 0 0 20px var(--neon-ciano), 0 0 40px var(--neon-ciano);
    opacity: 0; transform: rotate(35deg);
    animation: beamMove 8s linear infinite;
}

.beam:nth-child(1) { left: -20%; animation-duration: 12s; background: var(--dourado-premium); box-shadow: 0 0 20px var(--dourado-premium), 0 0 40px var(--dourado-premium); }
.beam:nth-child(2) { left: 0%; animation-duration: 16s; }
.beam:nth-child(3) { left: 20%; animation-duration: 10s; background: var(--neon-limao); box-shadow: 0 0 20px var(--neon-limao), 0 0 40px var(--neon-limao); }
.beam:nth-child(4) { left: 40%; animation-duration: 14s; }
.beam:nth-child(5) { left: 60%; animation-duration: 18s; background: var(--dourado-premium); box-shadow: 0 0 20px var(--dourado-premium), 0 0 40px var(--dourado-premium); }
.beam:nth-child(6) { left: 80%; animation-duration: 11s; background: var(--neon-limao); box-shadow: 0 0 20px var(--neon-limao), 0 0 40px var(--neon-limao); }
.beam:nth-child(7) { left: 100%; animation-duration: 15s; }
.beam:nth-child(8) { left: 120%; animation-duration: 13s; background: var(--dourado-premium); box-shadow: 0 0 20px var(--dourado-premium), 0 0 40px var(--dourado-premium); }

@keyframes beamMove {
    0% { transform: translateY(-50%) rotate(35deg); opacity: 0; }
    50% { opacity: 0.35; } 
    100% { transform: translateY(50%) rotate(35deg); opacity: 0; }
}