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

body{
font-family:Arial, Helvetica, sans-serif;
background:#050505;
color:#fff;
}

.header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 5%;
border-bottom:1px solid #1a1a1a;
}

.logo{
height:65px;
}

.menu{
display:flex;
gap:25px;
font-size:14px;
}

.menu a{
opacity:0.6;
cursor:pointer;
}

.menu .active{
opacity:1;
border-bottom:2px solid #fff;
padding-bottom:5px;
}

.btn-outline{
border:1px solid #fff;
padding:10px 18px;
border-radius:6px;
font-size:14px;
}

.hero{
display:flex;
justify-content:space-between;
align-items:center;
padding:80px 5%;
gap:40px;
}

.hero-left{
max-width:600px;
}

.subtitle{
font-size:14px;
opacity:0.6;
}

.hero h1{
font-size:72px;
line-height:1;
margin:10px 0;
font-weight:800;
}

.hero h2{
font-size:20px;
margin-bottom:15px;
color:#ddd;
}

.hero p{
opacity:0.75;
margin-bottom:25px;
line-height:1.5;
}

.icons{
display:grid;
grid-template-columns:repeat(4,1fr);
margin:35px 0;
max-width:700px;
}

.icons div{
padding:0 20px;
border-right:1px solid rgba(255,255,255,.2);
text-align:center;
}

.icons div:last-child{
border-right:none;
}

.icons span{
display:block;
font-size:28px;
margin-bottom:10px;
}

.icons strong{
font-size:12px;
line-height:1.2;
font-weight:800;
}

.buttons{
display:flex;
gap:15px;
}

.btn-white,
.btn-dark{
display:flex;
align-items:center;
gap:10px;
height:55px;
padding:0 25px;
border-radius:6px;
font-weight:800;
font-size:14px;
}

.btn-white{
background:#fff;
color:#000;
}

.btn-dark{
border:1px solid #fff;
color:#fff;
}

.hero-right{
display:flex;
justify-content:flex-end;
}

.hero-right img{
width:750px;
max-width:100%;
}

.services{
background:#f4f4f4;
color:#000;
padding:80px 5%;
}

.services-top{
display:flex;
justify-content:space-between;
align-items:flex-end;
margin-bottom:50px;
}

.services-top span{
font-size:13px;
opacity:0.6;
}

.services-top h2{
font-size:32px;
max-width:500px;
margin-top:10px;
}

.btn-services{
background:#000;
color:#fff;
padding:12px 20px;
border-radius:6px;
font-size:14px;
}

.services-grid{
display:flex;
gap:25px;
flex-wrap:wrap;
}

.card{
width:220px;
}

.card img{
width:100%;
height:120px;
object-fit:cover;
border-radius:12px;
margin-bottom:15px;
}

.card h3{
font-size:14px;
margin-bottom:8px;
}

.card p{
font-size:13px;
opacity:0.7;
margin-bottom:10px;
}

.card a{
font-size:12px;
font-weight:bold;
}

.quality{
display:flex;
align-items:center;
justify-content:space-between;
padding:120px 5%;
background:#050505;
color:#fff;
position:relative;
overflow:hidden;
min-height:620px;
}

.quality::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(to right,#050505 0%,#050505 34%,rgba(5,5,5,0.95) 48%,rgba(5,5,5,0.65) 66%,rgba(5,5,5,0.15) 88%);
z-index:2;
}

.quality-left{
position:relative;
z-index:3;
max-width:560px;
}

.quality-left span{
font-size:13px;
opacity:0.6;
letter-spacing:1px;
}

.quality-left h2{
font-size:42px;
line-height:1.15;
margin:15px 0;
font-weight:800;
}

.quality-left p{
opacity:0.75;
margin-bottom:28px;
line-height:1.6;
font-size:16px;
}

.quality-left ul{
list-style:none;
}

.quality-left li{
margin-bottom:16px;
font-size:15px;
display:flex;
align-items:center;
gap:12px;
}

.quality-left li::before{
content:"✔";
width:24px;
height:24px;
border:1px solid #fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
}

.quality-right{
position:absolute;
top:0;
right:0;
width:65%;
height:100%;
z-index:1;
}

.quality-right img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
}

.numbers{
display:flex;
justify-content:space-between;
align-items:center;
background:#111;
padding:45px 5%;
border-top:1px solid rgba(255,255,255,.12);
border-bottom:1px solid rgba(255,255,255,.12);
}

.numbers div{
flex:1;
display:flex;
justify-content:center;
align-items:center;
gap:15px;
position:relative;
}

.numbers div:not(:last-child)::after{
content:"";
position:absolute;
right:0;
height:55px;
width:1px;
background:rgba(255,255,255,.25);
}

.numbers div:nth-child(1)::before{content:"👥";font-size:38px;}
.numbers div:nth-child(2)::before{content:"✔";font-size:38px;}
.numbers div:nth-child(3)::before{content:"📅";font-size:38px;}
.numbers div:nth-child(4)::before{content:"⭐";font-size:38px;}

.numbers strong{
font-size:32px;
display:block;
}

.numbers span{
font-size:13px;
opacity:.7;
text-transform:uppercase;
}

.contact{
display:flex;
justify-content:space-between;
gap:40px;
padding:70px 5%;
background:#070707;
border-bottom:1px solid rgba(255,255,255,.12);
}

.contact > div{
flex:1;
position:relative;
padding-right:40px;
}

.contact > div:not(:last-child)::after{
content:"";
position:absolute;
right:0;
top:0;
height:100%;
width:1px;
background:rgba(255,255,255,.18);
}

.contact span{
font-size:12px;
opacity:.6;
letter-spacing:1px;
}

.contact h2{
font-size:28px;
margin:10px 0;
}

.contact p{
opacity:.75;
line-height:1.5;
margin-bottom:20px;
}

.contact .btn-dark,
.contact .btn-white{
display:inline-flex;
align-items:center;
justify-content:center;
height:50px;
padding:0 25px;
border-radius:6px;
font-size:14px;
font-weight:800;
}

.contact .btn-dark{
border:1px solid #fff;
color:#fff;
}

.contact .btn-white{
background:#fff;
color:#000;
}

@media(max-width:1000px){
.header{
flex-direction:column;
gap:20px;
}

.menu{
flex-wrap:wrap;
justify-content:center;
}

.hero{
flex-direction:column;
text-align:center;
}

.hero h1{
font-size:50px;
}

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

.services-top{
flex-direction:column;
align-items:flex-start;
gap:20px;
}

.quality{
padding:80px 5%;
flex-direction:column;
min-height:auto;
overflow:hidden;
}

.quality::before{
display:none;
}

.quality-left{
position:relative;
z-index:2;
}

.quality-right{
position:relative;
width:100%;
height:350px;
margin-top:35px;
z-index:1;
display:block;
}

.quality-right img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
border-radius:12px;
}

.numbers{
flex-direction:column;
gap:30px;
}

.numbers div::after{
display:none;
}

.contact{
flex-direction:column;
}

.contact > div::after{
display:none;
}
}
/* ================= ANIMAÇÕES ================= */

.reveal{
opacity:0;
transform:translateY(35px);
transition:opacity .7s ease, transform .7s ease;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}

.card.reveal:nth-child(1){transition-delay:.1s;}
.card.reveal:nth-child(2){transition-delay:.2s;}
.card.reveal:nth-child(3){transition-delay:.3s;}
.card.reveal:nth-child(4){transition-delay:.4s;}
.card.reveal:nth-child(5){transition-delay:.5s;}

.icons .reveal:nth-child(1){transition-delay:.1s;}
.icons .reveal:nth-child(2){transition-delay:.2s;}
.icons .reveal:nth-child(3){transition-delay:.3s;}
.icons .reveal:nth-child(4){transition-delay:.4s;}


/* ================= HOVER PROFISSIONAL ================= */

a,
button{
cursor:pointer;
text-decoration:none;
}

.btn-white,
.btn-dark,
.btn-outline,
.btn-services{
transition:all .3s ease;
}

.btn-white:hover,
.btn-dark:hover,
.btn-outline:hover,
.btn-services:hover{
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(255,255,255,.18);
}

.card{
transition:transform .3s ease;
}

.card:hover{
transform:translateY(-8px);
}

.card img{
transition:transform .4s ease, filter .4s ease;
}

.card:hover img{
transform:scale(1.04);
filter:brightness(1.08);
}

.menu a{
transition:opacity .3s ease;
}

.menu a:hover{
opacity:1;
}

.logo{
transition:transform .3s ease;
}

.logo:hover{
transform:scale(1.04);
}


/* ================= ACESSIBILIDADE ================= */

@media (prefers-reduced-motion: reduce){
.reveal,
.card,
.card img,
.logo,
.btn-white,
.btn-dark,
.btn-outline,
.btn-services{
transition:none;
animation:none;
transform:none;
opacity:1;
}
}
.btn-outline{
  border:1px solid #fff;
  padding:10px 18px;
  border-radius:6px;
  font-size:14px;
  color:#fff;
  transition: all .3s ease;
}

.btn-outline:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(255,255,255,.18);
  background:#fff;
  color:#000;
}
html{
scroll-behavior:smooth;
}
.menu a,
.btn-outline,
.btn-white,
.btn-dark,
.btn-services,
.card a{
text-decoration:none;
}

.menu a{
color:#fff;
}

.btn-outline{
color:#fff;
}

.btn-white{
color:#000;
}

.btn-dark{
color:#fff;
}

.btn-services{
color:#fff;
}

.card a{
color:#000;
}