@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Montserrat',sans-serif;
background:#fff;
color:#111;
overflow-x:hidden;
}

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

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

.container{
width:92%;
max-width:1320px;
margin:auto;
}

/* HEADER */

.header{
position:fixed;
top:0;
left:0;
width:100%;
z-index:999;
background:#111;
backdrop-filter:blur(12px);
border-bottom:1px solid rgba(255,255,255,.08);
}

.logo{
display:flex;
align-items:center;
}

.logo img{
height:70px;
width:auto;
display:block;
object-fit:contain;
}

nav a{
font-size:13px;
font-weight:900;
color:#fff;
transition:.3s;
}

nav a:hover{
color:#d60000;
}

.header-btn{
background:#d60000;
color:#fff;
padding:15px 26px;
border-radius:10px;
font-size:13px;
font-weight:900;
transition:.3s;
}

.header-btn:hover{
background:#fff;
color:#111;
}

.navbar{
height:120px;
display:flex;
align-items:center;
justify-content:space-between;
}

.logo img{
height:120px;
}

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

nav a{
font-size:13px;
font-weight:900;
transition:.3s;
}

nav a:hover{
color:#d60000;
}

.header-btn{
background:#d60000;
color:#fff;
padding:15px 26px;
border-radius:10px;
font-size:13px;
font-weight:900;
transition:.3s;
}

.header-btn:hover{
background:#111;
}

/* HERO */

.hero{
min-height:100vh;
padding-top:130px;
display:flex;
align-items:center;
background:
radial-gradient(circle at 80% 20%, rgba(214,0,0,.25), transparent 30%),
linear-gradient(135deg,#fff 0%,#f4f4f4 50%,#050505 50%,#000 100%);
}

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

.hero-tag{
display:inline-block;
color:#d60000;
font-size:13px;
font-weight:900;
letter-spacing:4px;
margin-bottom:20px;
}

.hero h1{
font-size:78px;
line-height:.95;
font-weight:900;
letter-spacing:-4px;
margin-bottom:25px;
}

.hero h1 strong{
color:#d60000;
}

.hero p{
font-size:17px;
line-height:1.9;
color:#555;
margin-bottom:35px;
max-width:620px;
}

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

.btn-red,
.btn-dark,
.btn-white{
display:inline-flex;
align-items:center;
justify-content:center;
padding:16px 28px;
border-radius:12px;
font-size:14px;
font-weight:900;
transition:.3s;
}

.btn-red{
background:#d60000;
color:#fff;
}

.btn-dark{
background:#111;
color:#fff;
}

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

.btn-red:hover,
.btn-dark:hover,
.btn-white:hover{
transform:translateY(-4px);
}

.hero-stats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;
}

.hero-stats div{
background:#fff;
padding:24px;
border-radius:18px;
box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.hero-stats h3{
font-size:30px;
color:#d60000;
}

.hero-stats p{
margin:0;
font-size:13px;
font-weight:800;
color:#666;
}

.hero-image{
height:620px;
border-radius:32px;
overflow:hidden;
position:relative;
box-shadow:0 35px 90px rgba(0,0,0,.4);
}

.hero-image img{
width:100%;
height:100%;
object-fit:cover;
}

.hero-image::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to top,rgba(0,0,0,.7),transparent 60%);
}

.hero-badge{
position:absolute;
bottom:30px;
left:30px;
z-index:2;
background:#d60000;
color:#fff;
padding:16px 24px;
border-radius:14px;
font-weight:900;
}

/* SECTION HEAD */

.section-head{
text-align:center;
max-width:800px;
margin:0 auto 60px;
}

.section-head span{
color:#d60000;
font-size:13px;
font-weight:900;
letter-spacing:4px;
}

.section-head h2{
font-size:56px;
font-weight:900;
margin:20px 0;
letter-spacing:-2px;
}

.section-head p{
color:#666;
line-height:1.8;
}

/* SERVICES */

.services{
padding:120px 0;
background:#fff;
}

.service-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
}

.service-card{
background:#fff;
border:1px solid #eee;
padding:35px;
border-radius:22px;
transition:.3s;
box-shadow:0 15px 40px rgba(0,0,0,.05);
}

.service-card:hover{
transform:translateY(-10px);
border-color:#d60000;
}

.service-card b{
color:#d60000;
font-size:15px;
}

.service-card h3{
margin:20px 0 12px;
font-size:22px;
}

.service-card p{
font-size:14px;
line-height:1.8;
color:#666;
}

/* WHY */

.why{
padding:120px 0;
background:#080808;
color:#fff;
}

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

.why-image{
height:520px;
border-radius:30px;
overflow:hidden;
}

.why-image img{
width:100%;
height:100%;
object-fit:cover;
}

.why-content h2{
font-size:54px;
margin:20px 0;
}

.why-content p{
color:#cfcfcf;
line-height:1.9;
margin-bottom:25px;
}

.why-content ul{
list-style:none;
display:grid;
gap:15px;
}

.why-content li{
background:#151515;
padding:18px;
border-radius:14px;
}

/* PROJECTS */

.projects{
padding:120px 0;
background:#fff;
}

.project-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}

.project-card{
height:430px;
position:relative;
border-radius:24px;
overflow:hidden;
}

.project-card img{
width:100%;
height:100%;
object-fit:cover;
}

.project-card::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to top,rgba(0,0,0,.85),transparent 60%);
}

.project-card div{
position:absolute;
left:25px;
bottom:25px;
z-index:2;
color:#fff;
}

.project-card span{
color:#ff3b3b;
font-size:12px;
font-weight:900;
}

.project-card h3{
margin-top:8px;
font-size:24px;
}

/* DEALER */

.dealer{
padding:120px 0;
background:#f5f5f5;
}

.dealer-box{
background:#fff;
padding:60px;
border-radius:30px;
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;
}

.dealer-box h2{
font-size:50px;
margin:20px 0;
}

.dealer-box p{
line-height:1.9;
color:#666;
}

/* CTA */

.cta{
padding:120px 0;
text-align:center;
background:linear-gradient(135deg,#d60000,#8b0000);
color:#fff;
}

.cta h2{
font-size:56px;
margin-bottom:20px;
}

.cta p{
margin-bottom:30px;
}

/* FOOTER */

footer{
background:#050505;
color:#fff;
padding:80px 0;
}

.footer-grid{
display:grid;
grid-template-columns:1.4fr .8fr 1fr;
gap:50px;
}

footer h4{
color:#d60000;
margin-bottom:15px;
}

footer a,
footer p{
display:block;
margin-bottom:10px;
color:#bbb;
}

/* WHATSAPP */

.whatsapp{
position:fixed;
right:20px;
bottom:20px;
background:#25d366;
color:#fff;
padding:15px 22px;
border-radius:50px;
font-weight:900;
z-index:999;
}

/* MOBILE */

@media(max-width:1024px){

nav,
.header-btn{
display:none;
}

.hero-grid,
.why-grid,
.dealer-box,
.footer-grid{
grid-template-columns:1fr;
}

.service-grid,
.project-grid{
grid-template-columns:1fr;
}

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

.hero-image,
.why-image{
height:350px;
}

.hero-stats{
grid-template-columns:1fr;
}
}