/* =========================
RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter',sans-serif;
}


html{
    scroll-behavior:smooth;
}


body{

background:

radial-gradient(
circle at top,
#102030 0%,
#05080c 45%,
#020303 100%
);

color:#fff;

}


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


img{
    max-width:100%;
    display:block;
}


.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}



/* =========================
HEADER
========================= */


.header{

    position:fixed;
    top:0;
    width:100%;
    z-index:1000;

   background:rgba(5,15,25,.75);
    backdrop-filter:blur(15px);

    border-bottom:1px solid rgba(0,217,255,.15);

}



.header-content{

    height:90px;

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

}



.logo img{

    width:260px;

}



.menu{

    display:flex;
    gap:35px;

}



.menu a{

    font-size:15px;
    color:#ddd;
    transition:.3s;

}



.menu a:hover{

    color:#00d9ff;

}



.btn-header{

    background:#00d9ff;
    color:#000;

    padding:14px 25px;

    border-radius:30px;

    font-weight:700;

}



.menu-mobile{

    display:none;

    background:none;
    border:0;

    color:#fff;

    font-size:25px;

}





/* =========================
HERO CARROSSEL
========================= */


.hero{

    height:100vh;
    min-height:700px;

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

}




.hero-slider{

    position:absolute;

    inset:0;

    z-index:0;

}




.hero-slide{

    position:absolute;

    inset:0;


    background-size:cover;

    background-position:center right;


    opacity:0;


    transform:scale(1.08);


    transition:

    opacity 1.5s ease,

    transform 8s ease;

}




.hero-slide.active{

    opacity:1;

    transform:scale(1);

}





.hero-overlay{


    position:absolute;

    inset:0;


    background:

    linear-gradient(

    90deg,

    rgba(0,0,0,.92),

    rgba(0,0,0,.55),

    rgba(0,0,0,.30)

    );


    z-index:1;


}





.hero-content{

    position:relative;

    z-index:2;

}




.hero-text{

    max-width:650px;

}




.hero-text span{


    background:rgba(0,217,255,.15);


    border:1px solid #00d9ff;


    padding:10px 20px;


    border-radius:30px;


    color:#00d9ff;


    display:inline-block;


    margin-bottom:25px;


}





.hero h1{

    font-size:55px;

    line-height:1.1;

    font-weight:900;

    margin-bottom:25px;

}




.hero p{

    color:#ccc;

    font-size:18px;

    line-height:1.7;

    margin-bottom:35px;

}




.hero-buttons{

    display:flex;

    gap:20px;

}




.btn-primary{


background:

linear-gradient(
135deg,
#00e5ff,
#0077ff
);


box-shadow:

0 10px 40px rgba(0,217,255,.35);


transition:.3s;


}



.btn-primary:hover{


transform:translateY(-5px);


box-shadow:

0 15px 50px rgba(0,217,255,.6);


}

    color:#000;


    padding:17px 35px;


    border-radius:40px;


    font-weight:800;


}





.btn-outline{


    border:1px solid #fff;


    padding:17px 35px;


    border-radius:40px;


}




/* =========================
SEÇÕES
========================= */


section{

    padding:100px 0;

}



.section-title{

    text-align:center;

    margin-bottom:60px;

}



.section-title h2{

    font-size:38px;

    margin-bottom:15px;

}



.section-title p{

    color:#aaa;

}



/* =========================
BENEFÍCIOS
========================= */


.benefits{

    background:#080808;

}



.benefits-grid{

    display:grid;

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

    gap:25px;

}



.benefit-card{


    background:

linear-gradient(
145deg,
rgba(255,255,255,.08),
rgba(255,255,255,.02)
);


backdrop-filter:blur(15px);


    padding:35px;

    border-radius:20px;

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

    transition:.3s;


}



.benefit-card:hover{


    transform:translateY(-10px);

    border-color:#00d9ff;


}




.benefit-card i{


    font-size:35px;

    color:#00d9ff;

    margin-bottom:25px;


}




.benefit-card h3{


    margin-bottom:15px;


}



.benefit-card p{


    color:#aaa;

    line-height:1.6;


}





/* =========================
OFERTAS BYD
========================= */


.offers{

background:

linear-gradient(
180deg,
#071018,
#050505
);

}



.offers-grid{


    display:grid;

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

    gap:25px;


}




.offer-card{


    background:#111;

    border-radius:25px;

    overflow:hidden;

    border:1px solid #222;

    transition:.4s;


}



.offer-card:hover{


    transform:translateY(-12px);

    border-color:#00d9ff;


}




.offer-image{


    position:relative;


}



.offer-image img{


    width:100%;

    height:230px;

    object-fit:cover;


}




.badge{


    position:absolute;


    top:18px;

    left:18px;



    background:#00d9ff;


    color:#000;


    padding:8px 16px;


    border-radius:30px;


    font-size:13px;


    font-weight:800;


}




.offer-content{


    padding:25px;


}




.offer-content h3{


    font-size:22px;

    margin-bottom:15px;


}




.tags{


    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-bottom:15px;


}




.tags span{


    background:#181818;

    border:1px solid #333;


    padding:7px 12px;


    border-radius:20px;


    font-size:12px;


    color:#ddd;


}




.price-label{


    color:#888;

    font-size:14px;

    margin-bottom:5px;


}




.offer-content strong{


    font-size:30px;

    color:#00d9ff;

    display:block;

    margin-bottom:15px;


}



.offer-content p{


    color:#aaa;

    line-height:1.5;

    min-height:50px;


}




.offer-content a{


    margin-top:20px;

    display:block;

    text-align:center;


    background:#00d9ff;

    color:#000;


    padding:15px;


    border-radius:30px;


    font-weight:800;


    transition:.3s;


}




.offer-content a:hover{


    background:#fff;

    transform:scale(1.03);


}








/* =========================
MODELOS
========================= */


.vehicle-grid{


    display:grid;

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

    gap:25px;


}



.vehicle-card{


    background:#111;


    border-radius:20px;


    overflow:hidden;


    border:1px solid #222;


    transition:.3s;


}




.vehicle-card:hover{


    transform:translateY(-10px);


}





.vehicle-card img{


    width:100%;

    height:220px;

    object-fit:cover;


}




.vehicle-info{


    padding:25px;


}



.vehicle-info h3{


    margin-bottom:15px;


}



.vehicle-info p{


    color:#aaa;

    line-height:1.6;


}








/* =========================
COMO FUNCIONA
========================= */


.steps{


    background:#080808;


}




.steps-grid{


    display:grid;

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

    gap:30px;


}



.steps-grid div{


    text-align:center;


}



.steps-grid strong{


    font-size:50px;

    color:#00d9ff;


}




.steps-grid p{


    color:#aaa;

    margin-top:10px;


}









/* =========================
CTA
========================= */


.cta{


    text-align:center;


    background:

    linear-gradient(

    135deg,

    #00d9ff,

    #0077ff

    );


}



.cta h2{


    font-size:42px;

    color:#000;


}




.cta p{


    color:#111;

    margin:20px;


}




.cta a{


    background:#000;

    color:#fff;


    padding:18px 40px;


    border-radius:40px;


    display:inline-block;


    font-weight:800;


}







/* =========================
FOOTER
========================= */


.footer{


    background:#000;

    text-align:center;

    padding:50px 0;


}



.footer img{


    width:330px;

    margin:auto;


}



.footer p{


    color:#aaa;

    margin:20px;


}



.footer span{


    color:#555;


}








/* =========================
WHATSAPP
========================= */


.whatsapp{


    position:fixed;


    right:25px;

    bottom:25px;



    width:60px;

    height:60px;



    display:flex;

    align-items:center;

    justify-content:center;



    background:#25d366;


    color:#fff;


    border-radius:50%;


    font-size:30px;


    z-index:999;


}








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


@media(max-width:900px){



.menu{


    display:none;


}



.menu-mobile{


    display:block;


}



.hero h1{


    font-size:38px;


}



.benefits-grid,
.vehicle-grid,
.offers-grid{


    grid-template-columns:1fr 1fr;


}



.steps-grid{


    grid-template-columns:1fr;


}



}




@media(max-width:600px){



.hero{


    height:auto;


    padding:180px 0 100px;


}



.hero h1{


    font-size:32px;


}




.hero-buttons{


    flex-direction:column;


}



.benefits-grid,
.vehicle-grid,
.offers-grid{


    grid-template-columns:1fr;


}




.section-title h2{


    font-size:30px;


}



}

/* =========================
CONTROLES HERO SLIDER
========================= */


.hero-prev,
.hero-next{


position:absolute;


top:50%;


transform:translateY(-50%);



width:50px;

height:50px;



border-radius:50%;


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


background:rgba(0,0,0,.4);


color:#fff;


font-size:18px;


cursor:pointer;


z-index:5;


transition:.3s;



}




.hero-prev:hover,
.hero-next:hover{


background:#00d9ff;


color:#000;


}



.hero-prev{


left:30px;


}



.hero-next{


right:30px;


}






.hero-dots{


position:absolute;


bottom:40px;


left:50%;


transform:translateX(-50%);



display:flex;


gap:12px;



z-index:5;


}




.dot{


width:12px;

height:12px;


border-radius:50%;


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


cursor:pointer;


transition:.3s;


}



.dot.active{


background:#00d9ff;


width:35px;


border-radius:20px;


}







@media(max-width:600px){


.hero-prev,
.hero-next{


display:none;


}


}

/* =========================
SIMULADOR
========================= */


.simulator{

background:

linear-gradient(
135deg,
#07151f,
#050505
);

}



.simulator-box{


display:grid;

grid-template-columns:1fr 1fr;

gap:40px;


background:

linear-gradient(

145deg,

#111,

#050505

);


padding:50px;


border-radius:30px;


border:1px solid #222;


}




.simulator-form label{


display:block;


margin:15px 0 8px;


color:#aaa;


}




.simulator-form select,
.simulator-form input{


width:100%;


padding:16px;


border-radius:15px;


border:1px solid #333;


background:#000;


color:#fff;


font-size:16px;


}




.simulator-form button{


margin-top:25px;


width:100%;


padding:17px;


border:0;


border-radius:40px;


background:#00d9ff;


font-weight:800;


cursor:pointer;


font-size:16px;


}





.simulator-result{


display:flex;


align-items:center;


justify-content:center;


flex-direction:column;


text-align:center;


background:#000;


border-radius:25px;


padding:40px;


}



.simulator-result span{


color:#aaa;


}



.simulator-result h3{


font-size:45px;


color:#00d9ff;


margin:20px 0;


}



.simulator-result a{


background:#25d366;


color:#fff;


padding:16px 35px;


border-radius:40px;


font-weight:800;


margin-top:20px;


}





@media(max-width:900px){


.simulator-box{


grid-template-columns:1fr;


}


}

/* =========================
SLIDER ENTRADA
========================= */


.range-area{

margin-top:20px;

}



.range-header{

display:flex;

justify-content:space-between;

align-items:center;

}



.range-header strong{

color:#00d9ff;

font-size:18px;

}



input[type="range"]{


width:100%;


height:8px;


margin:25px 0;


appearance:none;


background:#222;


border-radius:20px;


cursor:pointer;


}




input[type="range"]::-webkit-slider-thumb{


appearance:none;


width:25px;


height:25px;


border-radius:50%;


background:#00d9ff;


border:4px solid #fff;


}




.range-values{


display:flex;


justify-content:space-between;


font-size:12px;


color:#777;


}
section{

position:relative;

}



section::before{


content:"";


position:absolute;


width:400px;

height:400px;


background:#00d9ff;


filter:blur(180px);


opacity:.08;


top:20%;


left:-150px;


pointer-events:none;


}
.benefit-card,
.offer-card,
.vehicle-card,
.simulator-box{


animation:fadeUp .8s ease both;


}



@keyframes fadeUp{


from{

opacity:0;

transform:translateY(40px);

}


to{

opacity:1;

transform:translateY(0);

}


}

/* =========================
DESTAQUES HERO
========================= */

.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 22px;

margin-bottom:25px;

background:linear-gradient(135deg,#00d9ff,#0077ff);

color:#fff;

font-weight:800;

font-size:15px;

border-radius:40px;

box-shadow:0 15px 40px rgba(0,217,255,.35);

animation:pulseBadge 2.5s infinite;

}

.hero-highlights{

display:flex;

flex-wrap:wrap;

gap:18px;

margin-top:30px;

}

.hero-highlights div{

display:flex;

align-items:center;

gap:8px;

padding:12px 18px;

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

backdrop-filter:blur(10px);

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

border-radius:30px;

font-size:14px;

font-weight:600;

}

.hero-highlights i{

color:#00d9ff;

font-size:16px;

}

@keyframes pulseBadge{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

}