:root{

--laranja:#FF7A00;

--laranja-claro:#FFF1E6;

--laranja-destaque:#FF9800;

--texto:#222;

}


body{

font-family:
'Segoe UI',
Arial,
sans-serif;

color:var(--texto);

background:white;

}



.logo{

max-width:180px;

margin:25px auto;

}



.hero{

padding:70px 20px;

background:

linear-gradient(
135deg,
#FFF7ED,
#FFFFFF
);

}



.hero h1{

font-weight:800;

font-size:2.3rem;

}



.hero strong{

font-size:2.5rem;

color:var(--laranja);

}



.btn-axo{

background:var(--laranja);

color:white;

border-radius:50px;

padding:16px 35px;

font-weight:700;

border:none;

}



.btn-axo:hover{

background:var(--laranja-destaque);

color:white;

}



.beneficios{

padding:60px 20px;

}



.card-box{

height:100%;

padding:35px 25px;

border-radius:20px;

background:white;

box-shadow:
0 8px 30px rgba(255,122,0,.12);

text-align:center;

border-top:5px solid var(--laranja);

}



.icon{

font-size:45px;

}



.card-box h3{

margin-top:15px;

font-size:1.3rem;

}




.como{

padding:60px 20px;

background:var(--laranja-claro);

}



.steps{

display:flex;

justify-content:center;

gap:50px;

flex-wrap:wrap;

margin-top:40px;

}



.steps strong{

display:flex;

align-items:center;

justify-content:center;

width:60px;

height:60px;

border-radius:50%;

background:var(--laranja);

color:white;

font-size:25px;

margin:auto;

}




.cta{

padding:70px 20px;

text-align:center;

}



.cta h2{

font-weight:800;

color:var(--laranja);

}



footer{

background:#222;

color:white;

padding:20px;

}



@media(max-width:768px){


.hero h1{

font-size:1.8rem;

}


.hero strong{

font-size:2rem;

}


}