body {
margin:0;
font-family: Arial, Helvetica, sans-serif;
background:#fff;
color:#222;
line-height:1.6;
}

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

.container {
max-width:1100px;
margin:auto;
padding:0 20px;
}

/* HEADER */
header {
background:#000;
color:#fff;
padding:15px 0;
}
header .container {
display:flex;
justify-content:space-between;
align-items:center;
}
.logo {
font-size:22px;
font-weight:bold;
}
.logo img {
  height: 72px;
  width: auto;
}
.phone {
background:#f4c400;
color:#000;
padding:10px 18px;
border-radius:30px;
font-weight:bold;
}

/* HERO */
.hero {
background:
  linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
  image-set(
    url("img/taxi-ustron-hero-768.webp") 1x,
    url("img/taxi-ustron-hero-1536.webp") 2x
  )
  center/cover no-repeat;
color:#fff;
text-align:center;
padding:120px 20px;
}
.hero h1 {
font-size:42px;
}
.hero p {
font-size:18px;
margin:20px 0 35px;
}
.btn {
background:#f4c400;
color:#000;
padding:15px 32px;
border-radius:40px;
font-weight:bold;
}

/* SECTIONS */
section {
padding:70px 0;
}
h2 {
text-align:center;
margin-bottom:40px;
font-size:30px;
}

/* DARK */
.dark {
background:#111;
color:#eee;
}
.dark h2 {
color:#f4c400;
}

.grid {
display:grid;
grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
gap:30px;
}
.box {
background:#fff;
padding:30px;
border-radius:15px;
text-align:center;
}
.dark .box {
background:#1b1b1b;
}

/* GALLERY */
.gallery {
display:grid;
grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
gap:20px;
}
.gallery img {
width:100%;
height:230px;
object-fit:cover;
border-radius:15px;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.gallery img:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 40px rgba(0,0,0,0.35);
}

/* REVIEWS */
.reviews {
display:grid;
grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
gap:25px;
}
.review {
background:#1b1b1b;
padding:25px;
border-radius:15px;
}
.review strong {
color:#f4c400;
display:block;
margin-top:12px;
}

/* CTA */
.cta {
background:#f4c400;
text-align:center;
padding:60px 20px;
}
.cta .btn {
background:#000;
color:#fff;
}

/* FOOTER */
footer {
background:#000;
color:#aaa;
padding:40px 0;
text-align:center;
font-size:14px;
}

@media(max-width:768px){
.hero h1 { font-size:32px; }
  header .container {
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
  }

  .logo img {
    height: 72px;
  }

  .phone {
    padding: 10px 16px;
    font-size: 15px;
  }
}

@media (max-width:480px) {
  .hero {
    padding: 90px 15px;
  }
  h2 {
    font-size: 26px;
  }
}
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:16px;
  top:16px;
  width:auto;
  height:auto;
  padding:10px 14px;
  z-index:9999;
  background:#fff;
  color:#000;
  border-radius:8px;
}
.text-center {
  text-align: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}