:root {
    --cor-preta: #000000;
    --cor-preta-suave: #0a0a0a;
    --cor-vermelha: #ff0000;
    --cor-azul: #005eff;
    --cor-branca: #ffffff;
    --borda-branca: 1px solid rgba(255, 255, 255, 0.18);
    --borda-vermelha: 1px solid rgba(255, 0, 0, 0.35);
    --borda-azul: 1px solid rgba(0, 94, 255, 0.35);
    --sombra-vermelha: 0 0 25px rgba(255, 0, 0, 0.35);
    --sombra-azul: 0 0 25px rgba(0, 94, 255, 0.35);
    --sombra-card: 0 18px 45px rgba(0, 0, 0, 0.55);
    --raio-pequeno: 12px;
    --raio-medio: 18px;
    --raio-grande: 28px;
    --transicao: 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: var(--cor-preta);
    color: var(--cor-branca);
    overflow-x: hidden;
    position: relative;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

button {
    cursor: pointer;
    border: none;
    outline: none;
}

input,
select,
textarea {
    outline: none;
}

.fundo-grade {
    position: fixed;
    inset: 0;
    background: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 32px 32px;
    z-index: 0;
    pointer-events: none;
}

.glow {
    position: fixed;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.22;
    z-index: 0;
    pointer-events: none;
}

.glow-vermelho {
    width: 360px;
    height: 360px;
    background: var(--cor-vermelha);
    top: -100px;
    left: -100px;
}

.glow-azul {
    width: 360px;
    height: 360px;
    background: var(--cor-azul);
    right: -100px;
    bottom: -100px;
}

.logo-conectvagas {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.logo-icone {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--cor-vermelha), var(--cor-azul));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cor-branca);
    font-weight: bold;
    font-size: 1.35rem;
    box-shadow: var(--sombra-vermelha);
}

.logo-texto {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--cor-branca);
}

.texto-vermelho {
    color: var(--cor-vermelha);
}

.texto-azul {
    color: var(--cor-azul);
}

.btn-base {
    min-height: 52px;
    border-radius: var(--raio-pequeno);
    padding: 0 22px;
    font-weight: 700;
    transition: var(--transicao);
}

.btn-gradiente {
    background: linear-gradient(135deg, var(--cor-vermelha), var(--cor-azul));
    color: var(--cor-branca);
    box-shadow: 0 12px 30px rgba(0, 94, 255, 0.28);
}

    .btn-gradiente:hover {
        transform: translateY(-2px);
        filter: brightness(1.05);
    }

.btn-outline {
    background: var(--cor-preta);
    border: 1px solid var(--cor-branca);
    color: var(--cor-branca);
}

    .btn-outline:hover {
        background: #111111;
    }

.card-padrao {
    background: rgba(0, 0, 0, 0.88);
    border: var(--borda-branca);
    border-radius: var(--raio-grande);
    box-shadow: var(--sombra-card);
    backdrop-filter: blur(12px);
}

.input-padrao {
    width: 100%;
    height: 54px;
    padding: 0 16px;
    border-radius: var(--raio-pequeno);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #050505;
    color: var(--cor-branca);
    transition: var(--transicao);
}

    .input-padrao::placeholder {
        color: rgba(255, 255, 255, 0.58);
    }

    .input-padrao:focus {
        border-color: var(--cor-azul);
        box-shadow: 0 0 0 4px rgba(0, 94, 255, 0.12);
    }

.container-pagina {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    .logo-icone {
        width: 42px;
        height: 42px;
        font-size: 1.15rem;
    }

    .logo-texto {
        font-size: 1.2rem;
    }
}