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

html{
scroll-behavior:smooth;
}

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

/* NAVBAR */

.header{
position:fixed;
top:0;
width:100%;
height:84px;
background:#050505;
z-index:9999;
border-bottom:1px solid rgba(255,255,255,0.04);
}

.nav-container{
width:95%;
margin:auto;
height:100%;
display:flex;
align-items:center;
justify-content:space-between;
}

.logo{
font-size:34px;
font-weight:900;
color:#fff;
line-height:0.9;
letter-spacing:-1px;
}

.logo span{
display:block;
font-size:10px;
letter-spacing:4px;
margin-top:10px;
font-weight:500;
}

.nav{
display:flex;
align-items:center;
gap:36px;
margin-left:40px;
}

.nav a{
color:#fff;
text-decoration:none;
font-size:14px;
font-weight:700;
position:relative;
}

.nav a.active{
color:#d4a64a;
}

.nav a.active::after{
content:'';
position:absolute;
bottom:-12px;
left:0;
width:100%;
height:2px;
background:#d4a64a;
}

.right-nav{
display:flex;
align-items:center;
gap:30px;
}

.phone{
color:#fff;
font-size:15px;
font-weight:700;
}

.quote-btn{
background:#d4a64a;
color:#000;
padding:18px 32px;
text-decoration:none;
font-size:13px;
font-weight:800;
border-radius:2px;
transition:0.3s;
}

.quote-btn:hover{
background:#e6bb63;
}

/* HERO */

.hero{
height:760px;
background:url('images/hero.jpg') center center/cover no-repeat;
margin-top:84px;
position:relative;
display:flex;
align-items:center;
}

.overlay{
position:absolute;
inset:0;
background:linear-gradient(
90deg,
rgba(0,0,0,0.82) 0%,
rgba(0,0,0,0.58) 35%,
rgba(0,0,0,0.18) 70%
);
}

.hero-content{
position:relative;
z-index:5;
width:95%;
margin:auto;
max-width:760px;
}

.mini-title{
color:#d4a64a;
font-size:17px;
font-weight:700;
margin-bottom:24px;
letter-spacing:0.5px;
}

.hero h1{
font-size:74px;
line-height:0.96;
font-weight:900;
color:#fff;
letter-spacing:-3px;
margin-bottom:34px;
}

.hero h1 span{
color:#d4a64a;
display:block;
margin-top:10px;
}

.hero-text{
font-size:18px;
line-height:1.8;
color:#fff;
max-width:620px;
margin-bottom:40px;
font-weight:400;
}

.hero-buttons{
display:flex;
gap:18px;
}

.gold-btn{
background:#d4a64a;
color:#000;
text-decoration:none;
padding:22px 38px;
font-size:13px;
font-weight:800;
display:inline-flex;
align-items:center;
justify-content:center;
transition:0.3s;
}

.gold-btn:hover{
background:#e6bb63;
}

.outline-btn{
border:1px solid rgba(255,255,255,0.8);
color:#fff;
text-decoration:none;
padding:21px 38px;
font-size:13px;
font-weight:700;
display:inline-flex;
align-items:center;
justify-content:center;
}

/* FEATURES */

.features{
background:#050505;
display:grid;
grid-template-columns:repeat(4,1fr);
padding:34px 5%;
gap:25px;
}

.feature-box{
display:flex;
align-items:flex-start;
gap:18px;
padding-right:20px;
border-right:1px solid rgba(255,255,255,0.08);
}

.feature-box:last-child{
border-right:none;
}

.icon{
font-size:42px;
color:#d4a64a;
margin-top:3px;
}

.feature-box h3{
color:#fff;
font-size:16px;
font-weight:800;
margin-bottom:8px;
}

.feature-box p{
color:#d7d7d7;
font-size:15px;
line-height:1.5;
}

/* GARAGE SECTION */

.garage-section{
background:#f5f5f5;
padding:70px 4%;
}

.section-header{
text-align:center;
margin-bottom:40px;
}

.section-header p{
color:#d4a64a;
font-size:16px;
font-weight:700;
margin-bottom:10px;
}

.section-header h2{
font-size:58px;
font-weight:900;
letter-spacing:-2px;
color:#111;
}

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

.garage-card{
background:#fff;
border:1px solid #e5e5e5;
transition:0.3s;
}

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

.garage-card img{
width:100%;
height:235px;
object-fit:cover;
display:block;
}

.garage-content{
padding:22px;
}

.garage-content h3{
font-size:18px;
font-weight:800;
margin-bottom:10px;
color:#111;
}

.garage-content p{
font-size:15px;
color:#666;
line-height:1.5;
margin-bottom:18px;
}

.garage-content a{
color:#d4a64a;
text-decoration:none;
font-size:14px;
font-weight:800;
}

/* CTA */

.bottom-cta{
background:#f5f5f5;
display:grid;
grid-template-columns:1fr 1fr 1fr 1.3fr;
gap:20px;
padding:18px 4% 80px;
}

.small-box{
background:#fff;
border:1px solid #e5e5e5;
padding:36px;
}

.small-box h3{
font-size:17px;
font-weight:800;
margin-bottom:10px;
color:#111;
}

.small-box p{
font-size:15px;
color:#666;
line-height:1.5;
}

.quote-card{
background:#0c0c0c;
padding:42px;
color:#fff;
display:flex;
flex-direction:column;
justify-content:center;
}

.quote-card h2{
font-size:38px;
font-weight:900;
margin-bottom:16px;
}

.quote-card p{
font-size:17px;
line-height:1.6;
margin-bottom:28px;
color:#ddd;
}

/* RESPONSIVE */

@media(max-width:1300px){

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

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

.bottom-cta{
grid-template-columns:1fr;
}

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

}

@media(max-width:768px){

.nav{
display:none;
}

.right-nav{
display:none;
}

.hero{
height:680px;
}

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

.hero-text{
font-size:17px;
}

.hero-buttons{
flex-direction:column;
}

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

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

.section-header h2{
font-size:36px;
}

}