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

html{
scroll-behavior:smooth
}

body{
font-family:Arial,Helvetica,sans-serif;
background:#f4f4f1;
color:#111;
overflow-x:hidden
}

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

.header{
position:absolute;
top:0;
left:0;
right:0;
height:90px;
z-index:10;
padding:0 5vw;
display:flex;
align-items:center;
justify-content:space-between;
color:#fff;
border-bottom:1px solid rgba(255,255,255,.2)
}

.logo{
font-size:23px;
font-weight:900;
letter-spacing:-1.5px
}

.logo span,
.footer-logo span{
color:#b9ff3c
}

nav{
display:flex;
gap:34px;
font-size:13px;
font-weight:700
}

nav a{
opacity:.9;
transition:.2s
}

nav a:hover{
color:#b9ff3c
}

.header-button{
border:1px solid rgba(255,255,255,.5);
border-radius:30px;
padding:13px 21px;
font-size:13px;
font-weight:700
}

.hero{
height:100vh;
min-height:720px;
position:relative;
display:flex;
align-items:center;
color:#fff;
overflow:hidden
}

.hero-background{
position:absolute;
inset:0;
background:
linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.30)),
url("assets/hero.jpg");
background-size:cover;
background-position:center
}

.hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(0deg,rgba(0,0,0,.65),transparent 45%)
}

.hero-content{
position:relative;
z-index:2;
margin-left:9vw;
max-width:760px;
padding-top:70px
}

.eyebrow{
font-size:11px;
letter-spacing:2.5px;
font-weight:900;
color:#b9ff3c;
margin-bottom:22px
}

.eyebrow.dark{
color:#777
}

.hero h1{
font-size:clamp(52px,6.5vw,96px);
line-height:.94;
letter-spacing:-5px;
margin-bottom:30px
}

.hero h1 span{
display:block;
color:#b9ff3c
}

.hero p{
max-width:610px;
font-size:18px;
line-height:1.6;
color:#ddd;
margin-bottom:35px
}

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

.primary-button,
.secondary-button{
padding:17px 25px;
border-radius:5px;
font-size:14px;
font-weight:800
}

.primary-button{
background:#b9ff3c;
color:#111
}

.primary-button b{
margin-left:25px;
font-size:18px
}

.secondary-button{
border:1px solid rgba(255,255,255,.4);
background:rgba(255,255,255,.1);
backdrop-filter:blur(8px)
}

.statistics{
display:flex;
gap:50px;
margin-top:60px
}

.statistics strong{
font-size:25px;
display:block
}

.statistics span{
font-size:10px;
text-transform:uppercase;
letter-spacing:1px;
color:#aaa
}

.cars-section,
.process-section{
padding:120px 8vw
}

.section-heading{
display:flex;
justify-content:space-between;
align-items:end;
margin-bottom:55px
}

.section-heading>p{
max-width:410px;
color:#777;
font-size:14px;
line-height:1.7
}

h2{
font-size:clamp(40px,5vw,70px);
line-height:1;
letter-spacing:-4px
}

h2 span{
color:#555
}

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

.car-card{
background:#fff;
border-radius:12px;
overflow:hidden;
transition:.25s;
box-shadow:0 8px 30px rgba(0,0,0,.04)
}

.car-card:hover{
transform:translateY(-6px);
box-shadow:0 18px 45px rgba(0,0,0,.10)
}

.car-photo{
height:220px;
position:relative;
background:#ddd;
overflow:hidden
}

.car-photo img{
width:100%;
height:100%;
display:block;
object-fit:cover;
transition:.4s
}

.car-card:hover img{
transform:scale(1.04)
}

.car-year{
position:absolute;
top:14px;
left:14px;
background:#b9ff3c;
color:#111;
padding:7px 10px;
font-size:11px;
font-weight:900;
border-radius:4px
}

.car-body{
padding:20px
}

.car-meta{
font-size:9px;
letter-spacing:.8px;
text-transform:uppercase;
color:#888;
min-height:25px
}

.car-body h3{
font-size:21px;
margin:7px 0 17px
}

.car-bottom{
display:flex;
justify-content:space-between;
align-items:center
}

.car-bottom strong{
font-size:17px
}

.car-bottom a{
font-size:11px;
font-weight:800
}

.dark-section{
background:#0e100e;
color:#fff;
padding:120px 8vw
}

.light h2 span{
color:#999
}

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

.service{
border-top:1px solid #333;
padding-top:23px
}

.service span{
color:#b9ff3c;
font-size:12px
}

.service h3{
font-size:21px;
margin:28px 0 14px
}

.service p{
font-size:13px;
color:#999;
line-height:1.7
}

.process-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
margin-top:70px
}

.process-grid>div{
border-top:2px solid #111;
padding-top:20px
}

.process-grid b{
font-size:11px;
color:#888
}

.process-grid h3{
font-size:18px;
margin:28px 0 13px
}

.process-grid p{
font-size:13px;
line-height:1.6;
color:#777
}

.contact-section{
background:#b9ff3c;
padding:110px 8vw;
display:grid;
grid-template-columns:1fr 430px;
gap:90px;
align-items:center
}

.contact-section .eyebrow{
color:#111
}

.contact-section h2 span{
color:#111
}

.contact-info>p{
max-width:600px;
line-height:1.7;
margin-top:25px
}

.contact-details{
display:flex;
flex-direction:column;
gap:10px;
margin-top:35px;
font-weight:800;
font-size:16px
}

.contact-details a:hover{
text-decoration:underline
}

.contact-form{
display:flex;
flex-direction:column;
gap:10px
}

.contact-form input,
.contact-form button{
border:0;
border-radius:5px;
padding:18px;
font:inherit
}

.contact-form input{
background:#fff
}

.contact-form button{
background:#10110f;
color:#fff;
font-weight:900;
cursor:pointer
}

footer{
background:#090a09;
color:#fff;
padding:55px 8vw;
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:25px;
align-items:center
}

.footer-logo{
font-size:23px;
font-weight:900
}

footer p,
footer small{
color:#777;
font-size:12px
}

.footer-contacts{
display:flex;
flex-direction:column;
gap:6px;
font-size:12px
}

.footer-contacts a:first-child{
color:#b9ff3c
}

@media(max-width:1100px){

.cars-grid{
grid-template-columns:repeat(3,1fr)
}

.services-grid,
.process-grid{
grid-template-columns:repeat(2,1fr)
}

}

@media(max-width:800px){

nav{
display:none
}

.header-button{
display:none
}

.hero-content{
margin:0 7vw
}

.hero h1{
font-size:52px;
letter-spacing:-3px
}

.statistics{
gap:22px
}

.statistics strong{
font-size:20px
}

.statistics span{
font-size:8px
}

.section-heading{
display:block
}

.section-heading>p{
margin-top:25px
}

.cars-section,
.process-section,
.dark-section{
padding:80px 7vw
}

.cars-grid{
grid-template-columns:1fr
}

.car-photo{
height:260px
}

.services-grid,
.process-grid{
grid-template-columns:1fr
}

.contact-section{
grid-template-columns:1fr;
padding:80px 7vw;
gap:45px
}

footer{
grid-template-columns:1fr
}

}

/* ===== КАТАЛОГ 20 АВТО ===== */

.cars-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
}

.car-card{
    min-width:0;
}

.car-photo{
    background:#e5e5e2;
    aspect-ratio:16/11;
}

.car-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

@media(max-width:1100px){

    .cars-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

}

@media(max-width:750px){

    .cars-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }

    .car-body{
        padding:15px;
    }

    .car-body h3{
        font-size:17px;
    }

}

@media(max-width:520px){

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

}