/* ===========================================
   VIZION PRIME
   PREMIUM LANDING PAGE
===========================================*/

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    background:#040404;
    color:#FFF;
    overflow-x:hidden;
    min-height:100vh;
    position:relative;

}


/*============================
BACKGROUND
=============================*/

.background{

    position:fixed;
    inset:0;
    overflow:hidden;
    z-index:-10;

    background:
    radial-gradient(circle at top,#06172e 0%,#050505 45%,#020202 100%);

}


/* Luz Azul */

.light-blue{

    position:absolute;

    width:700px;
    height:700px;

    background:#0077ff;

    border-radius:50%;

    filter:blur(180px);

    opacity:.23;

    top:-180px;
    left:-120px;

    animation:blueMove 10s ease-in-out infinite alternate;

}


/* Luz Dourada */

.light-gold{

    position:absolute;

    width:600px;
    height:600px;

    background:#ffbb33;

    border-radius:50%;

    filter:blur(180px);

    opacity:.14;

    bottom:-180px;
    right:-120px;

    animation:goldMove 13s ease-in-out infinite alternate;

}


@keyframes blueMove{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(60px);
    }

}

@keyframes goldMove{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(-70px);
    }

}


/*============================
CONTAINER
=============================*/

.container{

    width:100%;
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:40px 20px;

}


/*============================
CARD
=============================*/

.card{

    width:100%;
    max-width:720px;

    background:rgba(20,20,20,.68);

    backdrop-filter:blur(28px);

    border:1px solid rgba(255,255,255,.06);

    border-radius:32px;

    padding:45px;

    box-shadow:

    0 0 60px rgba(0,119,255,.18),

    0 0 160px rgba(0,0,0,.70),

    inset 0 1px 1px rgba(255,255,255,.08);

    position:relative;

    overflow:hidden;

}


/* brilho superior */

.card::before{

    content:"";

    position:absolute;

    top:-140px;
    left:-80px;

    width:260px;
    height:260px;

    border-radius:50%;

    background:rgba(0,153,255,.18);

    filter:blur(90px);

}


/* brilho inferior */

.card::after{

    content:"";

    position:absolute;

    right:-90px;
    bottom:-90px;

    width:240px;
    height:240px;

    border-radius:50%;

    background:rgba(255,179,40,.18);

    filter:blur(100px);

}


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

.logo{

    display:block;

    width:310px;

    margin:auto;

    filter:

    drop-shadow(0 0 25px rgba(0,140,255,.45))

    drop-shadow(0 0 10px rgba(255,170,0,.25));

}


.logo-area{

    text-align:center;
    margin-bottom:25px;

}


/*============================
BADGE
=============================*/

.badge{

    display:inline-block;

    margin-top:20px;

    padding:10px 22px;

    border-radius:40px;

    background:rgba(0,140,255,.12);

    border:1px solid rgba(0,140,255,.35);

    color:#6dc6ff;

    font-size:13px;

    letter-spacing:1px;

}


/*============================
TITULOS
=============================*/

h1{

    text-align:center;

    font-family:'Orbitron',sans-serif;

    font-size:44px;

    margin-top:20px;

    line-height:1.1;

    font-weight:800;

}


h1 span{

    display:block;

    margin-top:10px;

    background:linear-gradient(90deg,#00a2ff,#38b6ff,#ffbe45);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}


.subtitle{

    text-align:center;

    color:#CFCFCF;

    margin:20px auto 35px;

    max-width:550px;

    font-size:15px;

    line-height:28px;

}


/*============================
BENEFICIOS
=============================*/

.benefits{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-bottom:35px;

}


.benefit{

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.05);

    border-radius:18px;

    padding:22px;

    text-align:center;

    transition:.35s;

}


.benefit:hover{

    transform:translateY(-6px);

    border-color:#0ea5ff;

    box-shadow:0 0 30px rgba(0,140,255,.20);

}


.benefit strong{

    display:block;

    margin-top:10px;

    font-size:15px;

}


.benefit small{

    display:block;

    color:#aaa;

    margin-top:8px;

    line-height:20px;

}


/*============================
FORM
=============================*/

label{

    display:block;

    margin-bottom:10px;

    font-weight:500;

}


input,
select{

    width:100%;

    height:58px;

    background:#101010;

    border:1px solid rgba(255,255,255,.07);

    color:#FFF;

    border-radius:16px;

    padding:0 18px;

    margin-bottom:20px;

    outline:none;

    transition:.3s;

}


input:focus,
select:focus{

    border-color:#00a2ff;

    box-shadow:0 0 20px rgba(0,140,255,.20);

}


/*============================
DISPOSITIVOS
=============================*/

.device-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin:25px 0;

}


.device-card{

    background:#101010;

    border-radius:22px;

    padding:26px;

    text-align:center;

    cursor:pointer;

    border:1px solid rgba(255,255,255,.05);

    transition:.35s;

    font-size:36px;

}


.device-card span{

    display:block;

    margin-top:12px;

    font-size:14px;

    font-weight:600;

}


.device-card:hover{

    transform:translateY(-6px);

    border-color:#18a8ff;

    box-shadow:0 0 35px rgba(0,140,255,.28);

}


.device-card.active{

    background:linear-gradient(180deg,#0b2345,#07131d);

    border-color:#38b6ff;

    box-shadow:

    0 0 40px rgba(0,140,255,.30),

    inset 0 0 18px rgba(255,255,255,.05);

}


/*============================
ALERTA
=============================*/

.alert-box{

    margin:30px 0;

    padding:18px;

    border-radius:16px;

    text-align:center;

    background:rgba(255,170,0,.08);

    border:1px solid rgba(255,170,0,.18);

    color:#ffc96d;

}


/*============================
BOTAO
=============================*/

.btn{

    width:100%;

    height:65px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    color:#FFF;

    font-size:18px;

    font-weight:700;

    letter-spacing:.5px;

    background:

    linear-gradient(90deg,

    #006eff,

    #00a2ff,

    #ffb524);

    background-size:250%;

    transition:.4s;

    box-shadow:

    0 0 45px rgba(0,140,255,.35);

}


.btn:hover{

    transform:translateY(-4px);

    background-position:right;

}


/*============================
SOCIAL
=============================*/

.social-proof{

    margin-top:35px;

    text-align:center;

    color:#DDD;

}


.stars{

    color:#ffd24d;

    font-size:24px;

    margin-bottom:10px;

}


/*============================
RODAPE
=============================*/

.security{

    margin-top:30px;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    color:#9f9f9f;

    font-size:13px;

}


/*============================
RESPONSIVO
=============================*/

@media(max-width:768px){

.card{

padding:28px;

}

.logo{

width:220px;

}

h1{

font-size:32px;

}

.subtitle{

font-size:14px;

line-height:24px;

}

.benefits,
.device-grid{

grid-template-columns:1fr;

}

}
/*
==================================================
CAMPOS CONDICIONAIS
==================================================
*/

[hidden]{
    display:none !important;
}

.conditional-field{
    width:100%;
    animation:fieldAppear .28s ease forwards;
}

@keyframes fieldAppear{
    from{
        opacity:0;
        transform:translateY(-8px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}


/*
==================================================
AJUSTE DOS BOTÕES DE DISPOSITIVOS
==================================================
*/

.device-card{
    width:100%;
    appearance:none;
    -webkit-appearance:none;
    color:#ffffff;
    font-family:'Poppins',sans-serif;
    outline:none;
}

.device-card:focus-visible{
    border-color:#38b6ff;
    box-shadow:
        0 0 0 3px rgba(56,182,255,.15),
        0 0 35px rgba(0,140,255,.28);
}

.device-icon{
    display:block;
    font-size:36px;
    line-height:1;
}

.device-name{
    display:block;
    margin-top:12px;
    font-size:14px;
    font-weight:600;
}

.device-title{
    margin-top:8px;
    font-size:18px;
    color:#ffffff;
}


/*
==================================================
ESTADO DO BOTÃO
==================================================
*/

.btn:disabled{
    cursor:not-allowed;
    opacity:.72;
    transform:none;
}


/*
==================================================
RESPONSIVO
==================================================
*/

@media(max-width:768px){

    .device-grid{
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }

    .device-card{
        min-height:130px;
        padding:20px 12px;
    }

}

@media(max-width:420px){

    .device-grid{
        grid-template-columns:1fr 1fr;
    }

    .device-icon{
        font-size:31px;
    }

    .device-name{
        font-size:13px;
    }

}