:root{--yellow:#f1c40f;--black:#111;--muted:#f4f4f6}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0;color:#222}
html{scroll-behavior:smooth}

header{background:linear-gradient(90deg,var(--black),#222);color:white;padding:18px 20px;position:relative}
.container{max-width:1100px;margin:0 auto;padding:20px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px}
.brand-badge{background:var(--yellow);color:var(--black);font-weight:800;padding:8px 12px;border-radius:6px;font-size:1rem;letter-spacing:0.6px}
nav{display:flex;gap:12px;flex-wrap:wrap}
nav a{color:#fff;text-decoration:none;padding:8px 10px;border-radius:6px;transition: all 0.3s ease;}
nav a:hover{background:var(--yellow);color:var(--black);transform:scale(1.05)}

.hero{
  background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url('../images/hero-taxi.jpg') center/cover no-repeat;
  min-height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  position:relative;
}
.hero::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:10px;
  background: repeating-linear-gradient(
    90deg,
    var(--yellow),
    var(--yellow) 20px,
    var(--black) 20px,
    var(--black) 40px
  );
}
.hero .inner{position:relative; z-index:1;}
.hero h1 {font-size:3rem;font-weight:900;letter-spacing:1px;text-shadow:2px 2px 6px rgba(0,0,0,0.6);margin:0 0 14px 0;line-height:1.2;transition:all 0.3s ease;}
.hero p {font-size:1.2rem;margin:6px 0;color:#fff;text-shadow:1px 1px 4px rgba(0,0,0,0.5);transition:all 0.3s ease;}

.gallery img {
  width: 100%;
  height: auto;
  max-width: 600px;
  border-radius: 12px;
  object-fit: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.gallery img:hover {transform: scale(1.05); box-shadow:0 8px 20px rgba(0,0,0,0.25);}

.cta{display:inline-flex;align-items:center;gap:10px;background:var(--yellow);color:var(--black);padding:12px 20px;border-radius:8px;font-weight:700;text-decoration:none;transition: all 0.3s ease;}
.cta:hover{transform: scale(1.05);box-shadow:0 8px 20px rgba(0,0,0,0.25);background:#e0b90f;}

main{padding:30px 0}
.grid{display:grid;grid-template-columns:1fr 360px;gap:20px}
.card{background:#fff;border-radius:12px;padding:18px;box-shadow:0 6px 20px rgba(18,18,18,0.06)}
.phone-call{font-size:1.2rem;font-weight:700;color:var(--black);text-decoration:none}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
footer{background:#111;color:#ddd;padding:28px 0;margin-top:30px}

.call-fixed{position:fixed;right:18px;bottom:18px;background:var(--yellow);color:var(--black);padding:14px 16px;border-radius:999px;box-shadow:0 8px 30px rgba(0,0,0,0.25);text-decoration:none;font-weight:800;z-index:999;transition: all 0.3s ease;}
.call-fixed:hover{transform: scale(1.1);box-shadow:0 12px 30px rgba(0,0,0,0.35);background:#e0b90f;}

@media (max-width:900px){.grid{grid-template-columns:1fr}.gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.hero h1{font-size:2rem}.cta{padding:10px 14px}}