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

body{
font-family:'Manrope',sans-serif;
background:#111;
color:#f5f5f5;
line-height:1.6;
}

img{
max-width:100%;
display:block;
border-radius:12px;
}

a{
text-decoration:none;
color:inherit;
transition:.25s;
}

.container{
width:min(1200px,92%);
margin:auto;
}

.topbar{
background:#1b1b1b;
padding:10px 0;
font-size:14px;
border-bottom:1px solid #2d2d2d;
}

.topbar-inner{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:15px;
}

.top-links{
display:flex;
gap:20px;
}

header{
position:sticky;
top:0;
background:#111;
z-index:100;
border-bottom:1px solid #222;
}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 0;
}

.logo{
font-size:26px;
font-weight:800;
}

.logo span{
color:#c98a2b;
}

nav{
display:flex;
gap:25px;
}

nav a:hover{
color:#c98a2b;
}

.btn,
.btn-outline{
padding:14px 28px;
border-radius:10px;
display:inline-block;
font-weight:700;
}

.btn{
background:#c98a2b;
color:#fff;
}

.btn:hover{
background:#b87a1c;
}

.btn-outline{
border:1px solid #555;
}

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

section{
padding:90px 0;
}

.hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.badge{
display:inline-block;
padding:8px 14px;
background:#222;
border-radius:20px;
margin-bottom:25px;
font-size:14px;
}

h1{
font-size:58px;
line-height:1.1;
margin-bottom:25px;
}

h2{
font-size:40px;
margin-bottom:20px;
}

h3{
margin-bottom:15px;
}

.section-title{
text-align:center;
margin-bottom:60px;
}

.section-title p{
max-width:700px;
margin:auto;
color:#bdbdbd;
}

.hero-content p{
margin-bottom:30px;
color:#cfcfcf;
}

.hero-buttons{
display:flex;
gap:20px;
flex-wrap:wrap;
margin-bottom:40px;
}

.hero-features{
display:flex;
gap:40px;
flex-wrap:wrap;
}

.hero-features strong{
display:block;
font-size:28px;
}

.cards,
.service-grid,
.advantage-grid,
.reviews-grid,
.contacts-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
}

.card,
.service-card,
.advantage-card,
.review-card,
.contact-card,
.faq-item{
background:#1a1a1a;
padding:28px;
border:1px solid #2b2b2b;
border-radius:14px;
transition:.25s;
}

.card:hover,
.service-card:hover,
.advantage-card:hover,
.review-card:hover,
.contact-card:hover{
transform:translateY(-4px);
border-color:#c98a2b;
}

.estimate{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:start;
}

.step{
display:flex;
gap:18px;
margin-bottom:25px;
}

.step span{
width:42px;
height:42px;
background:#c98a2b;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
}

.brands{
overflow:hidden;
}

.brands-track{
display:flex;
gap:60px;
animation:move 30s linear infinite;
font-size:28px;
font-weight:700;
opacity:.35;
white-space:nowrap;
}

@keyframes move{

from{
transform:translateX(0);
}

to{
transform:translateX(-50%);
}

}

.number{
text-align:center;
}

.number strong{
display:block;
font-size:46px;
margin-bottom:10px;
color:#c98a2b;
}

.numbers .container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
}

.cta-box{
background:#1b1b1b;
padding:60px;
border-radius:16px;
text-align:center;
}

.faq-list{
display:grid;
gap:20px;
}

iframe{
width:100%;
height:500px;
border:0;
border-radius:16px;
}

footer{
background:#0b0b0b;
padding:60px 0 30px;
margin-top:70px;
}

.footer-content{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:40px;
}

.footer-content a{
display:block;
margin:10px 0;
color:#cfcfcf;
}

.footer-content a:hover{
color:#fff;
}

.copyright{
margin-top:40px;
text-align:center;
color:#777;
font-size:14px;
}

.floating-whatsapp{
position:fixed;
right:20px;
bottom:20px;
width:58px;
height:58px;
background:#25D366;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:28px;
color:#fff;
box-shadow:0 10px 25px rgba(0,0,0,.35);
}

#toTop{
position:fixed;
left:20px;
bottom:20px;
width:48px;
height:48px;
border:none;
background:#333;
color:#fff;
border-radius:50%;
cursor:pointer;
}

#toTop:hover{
background:#555;
}

@media(max-width:900px){

.hero-grid,
.estimate,
.portfolio-item{
grid-template-columns:1fr;
}

nav{
display:none;
}

h1{
font-size:40px;
}

h2{
font-size:30px;
}

.hero-features{
gap:20px;
}

.cta-box{
padding:35px;
}

}

@media(max-width:600px){

section{
padding:60px 0;
}

.topbar-inner,
.nav,
.hero-buttons{
flex-direction:column;
align-items:flex-start;
}

.portfolio-images{
grid-template-columns:1fr;
}

iframe{
height:320px;
}

}

.hidden{
opacity:0;
transform:translateY(40px);
transition:.6s;
}

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

.active{
color:#c98a2b;
}

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

.service-card h3{
    margin-bottom:12px;
}

.service-card p{
    color:#bdbdbd;
}