* { box-sizing: border-box; }
body {
  margin:0;
  font-family: 'Segoe UI', Arial, sans-serif;
  background:#0e0e0e;
  color:#ffffff;
}
a { text-decoration:none; color:white; }

header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 30px;
  background:#000;
  position:sticky;
  top:0;
  z-index:1000;
}
nav a {
  margin:0 15px;
  font-weight:600;
}
.call {
  background:#c00000;
  padding:10px 16px;
  border-radius:6px;
}

.hero {
  height:80vh;
  background:linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.8)), url('../images/hero.jpg');
  background-size:cover;
  background-position:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.hero h1 {
  font-size:52px;
  margin-bottom:10px;
}
.hero p {
  font-size:20px;
  opacity:.9;
}

.section {
  padding:60px 40px;
}
.section h2 {
  text-align:center;
  font-size:36px;
  margin-bottom:40px;
}

.inventory {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:30px;
}
.car {
  background:#141414;
  border-radius:10px;
  overflow:hidden;
  transition:.3s;
}
.car:hover { transform:translateY(-5px); }
.car img {
  width:100%;
  height:200px;
  object-fit:cover;
}
.car-content {
  padding:20px;
}
.car-content h3 { margin:0 0 10px; }
.car-content p { margin:4px 0; opacity:.85; }
.car-content a {
  display:inline-block;
  margin-top:10px;
  background:#c00000;
  padding:10px 14px;
  border-radius:5px;
}

footer {
  background:#000;
  padding:40px;
  text-align:center;
  font-size:14px;
  opacity:.85;
}