:root{
  --bg: #000000;        /* black */
  --gold: #FDB100;      /* primary gold */
  --orange: #EA5E01;    /* secondary */
  --teal: #1E98AB;      /* accent */
  --beige: #ECDBCD;     /* light contrast */
  --muted: #bfbfbf;
}

/* base */
*{box-sizing:border-box}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background:var(--bg);
  color:var(--beige);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* header */
.site-header{padding:18px 20px;border-bottom:1px solid rgba(255,255,255,0.03)}
.brand{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:14px}
.logo{width:90px;height:auto;display:block}
.brand-text h1{margin:0;color:var(--gold);font-size:1.4rem}
.brand-text .tagline{margin:0;color:var(--muted);font-size:0.95rem}

/* logo shine */
.shine{position:relative;overflow:hidden}
.shine::after{
  content:"";position:absolute;left:-120%;top:0;height:100%;width:45%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  transform:skewX(-20deg);
  animation:logoShine 2.6s linear infinite;
}
@keyframes logoShine{0%{left:-120%}50%{left:120%}100%{left:120%}}

/* hero + sliding car */
.hero{max-width:1100px;margin:20px auto;padding:8px 20px;text-align:center}
.car-wrap{height:140px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.car-slide{width:320px;max-width:80%;animation:carSlide 6s linear infinite; filter: drop-shadow(0 14px 24px rgba(0,0,0,0.6))}
@keyframes carSlide{0%{transform:translateX(-140%)}50%{transform:translateX(8%)}100%{transform:translateX(140%)}}
.hero-copy h2{margin:6px 0 6px;color:var(--gold);font-size:1.6rem}
.hero-copy p{margin:0;color:var(--muted)}

/* sections */
.section{max-width:1100px;margin:18px auto;padding:18px}
.section h2{margin:0 0 12px;color:var(--gold);font-size:1.25rem}

/* services */
.service-list{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.service-card{
  width:250px;padding:16px;border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
  box-shadow:0 6px 18px rgba(0,0,0,0.6); color:var(--beige);
}
.service-card h3{margin:0 0 8px;color:var(--teal)}
.service-card p{margin:6px 0;color:var(--muted)}

/* booking */
.booking-section{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.03)); border-radius:12px; padding:18px}
form{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:12px}
.row input, .row select{flex:1}
input, select, textarea{
  background:#0f0f0f;border:1px solid rgba(255,255,255,0.04);color:var(--beige);
  padding:12px;border-radius:8px;font-size:0.98rem;
}
textarea{min-height:90px;resize:vertical}
.price-box{align-self:flex-start;color:var(--gold);font-weight:700;padding:12px 8px}

/* button */
.btn-primary{
  background: linear-gradient(90deg,var(--orange),var(--gold));
  color:var(--bg);
  border:none;padding:12px;border-radius:10px;cursor:pointer;font-weight:800;
}
.btn-primary:hover{filter:brightness(1.05)}

/* form message */
.form-message{margin-top:8px;color:var(--muted);font-size:0.95rem}

/* footer */
.site-footer{text-align:center;padding:18px;color:var(--muted);font-size:0.9rem}

/* responsive */
@media (max-width:720px){
  .row{flex-direction:column}
  .service-card{width:100%}
  .car-slide{width:220px}
}