:root{
  --gold:#C2A33B;
  --gold-2:#D0B24C;
  --dark:#0a0a0a;
  --mid:#151515;
  --text:#f5f5f5;
  --muted:#bdbdbd;
  --success:#2ecc71;
  --danger:#ff5252;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  background:var(--dark);
  color:var(--text);
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
}

a{color:var(--gold);text-decoration:none}
img{max-width:100%;display:block}

.container{width:min(1200px,92vw);margin:0 auto}
.container-full{width:100%;max-width:1400px;margin:0 auto;padding:0 min(2rem, 4vw)}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border:none;
  cursor:pointer;
  padding:.9rem 1.15rem;
  border-radius:999px;
  font-weight:600;
  transition:.2s ease;
}
.btn.primary{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#111}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{color:var(--text);background:transparent}
.btn.ghost:hover{background:rgba(194,163,59,.1)}
.btn.ghost.active{color:var(--gold);text-decoration:underline}

/* Header */
header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(10,10,10,.8);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.nav .right{display:flex;align-items:center;gap:1rem}
.logo{display:flex;align-items:center;gap:.75rem}
.logo img{height:90px;width:auto;display:block;object-fit:contain}
.logo span{font-weight:700;letter-spacing:.5px}

/* Forms */
.form-row{display:grid;grid-template-columns:1fr;gap:.75rem;margin-bottom:.75rem}
.form-row input, .form-row select{
  width:100%;
  padding:.9rem .95rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:#0f0f0f;
  color:var(--text);
}
.form-row input::placeholder{color:#9f9f9f}

/* Tables */
.specs-table{width:100%;border-collapse:collapse;margin:1rem 0}
.specs-table th,.specs-table td{padding:.8rem;text-align:left;border-bottom:1px solid rgba(255,255,255,.1)}
.specs-table th{color:var(--gold);font-weight:600;font-size:.9rem}
.specs-table td{color:#e0e0e0}

/* Sticky CTA */
.sticky-cta{
  position:sticky;
  bottom:0;
  background:rgba(10,10,10,.95);
  backdrop-filter:blur(8px);
  border-top:1px solid rgba(255,255,255,.08);
  z-index:45;
  box-shadow:0 -4px 20px rgba(0,0,0,.4);
}
.sticky-cta .inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  padding:.8rem 0;
}
.tel{font-weight:700;color:var(--gold)}

/* Footer */
footer{
  padding:2rem 0 0 0;
  color:#c9c9c9;
  margin-top:60px; /* Add space so sticky CTA has room to unstick */
}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem}
@media (max-width: 900px){ footer .cols{grid-template-columns:1fr} }
.micro{font-size:.85rem;color:#aaaaaa}

/* Vehicle Pages Specific */
.vehicle-hero{
  position:relative;
  isolation:isolate;
  padding:2rem 0;
  text-align:center;
}
.vehicle-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:url('https://images.unsplash.com/photo-1545243424-0ce743321e11?q=80&w=1920&auto=format&fit=crop') center/cover no-repeat;
  opacity:.3;
  z-index:-2;
}
.vehicle-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.7),var(--dark) 70%);
  z-index:-1;
}

.breadcrumb{color:var(--muted);font-size:.9rem;margin-bottom:1rem;text-align:left}
.breadcrumb a{color:var(--gold)}

.vehicle-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2rem;
  margin-bottom:1.5rem;
  text-align:center;
}
.vehicle-title h1{font-size:clamp(1.8rem,4vw,2.8rem);margin:0}

.badge-large{
  background:var(--gold);
  color:#111;
  padding:.4rem .8rem;
  border-radius:999px;
  font-weight:600;
  font-size:.9rem;
}

.content-grid{
  display:grid;
  grid-template-columns:1fr 400px;
  gap:3rem;
  margin:3rem auto;
  max-width:1400px;
}
@media (max-width: 1200px){.content-grid{grid-template-columns:2fr 1fr}}
@media (max-width: 900px){.content-grid{grid-template-columns:1fr;gap:2rem}}

.gallery{margin-bottom:2rem}
.main-image{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:16px;cursor:pointer;transition:opacity .3s ease}
.gallery-display{
  width:100%;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:16px;
  margin-bottom:1rem;
}
.gallery-display img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity .3s ease;
}
.gallery-thumbnails{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:.75rem;
}
.gallery-thumbnail{
  aspect-ratio:16/10;
  border-radius:8px;
  overflow:hidden;
  cursor:pointer;
  border:2px solid transparent;
  transition:all .3s ease;
}
.gallery-thumbnail:hover{
  border-color:rgba(194,163,59,.5);
  transform:translateY(-2px);
}
.gallery-thumbnail.active{
  border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold);
}
.gallery-thumbnail img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.features-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1rem;
  margin:2rem 0;
}
.feature-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:1rem;
}
.feature-card h4{
  margin:0 0 .5rem;
  color:var(--gold);
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.feature-card p{margin:0;font-size:.95rem;color:#e0e0e0}

.services-section{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:1.5rem;
  margin:2rem 0;
}
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:.8rem;
  margin-top:1rem;
}
.service-tag{
  background:rgba(194,163,59,.15);
  border:1px solid rgba(194,163,59,.3);
  color:var(--gold);
  padding:.5rem .8rem;
  border-radius:999px;
  text-align:center;
  font-size:.85rem;
  font-weight:500;
}

.booking-card{
  background:linear-gradient(135deg,rgba(194,163,59,.1),rgba(208,178,76,.05));
  border:1px solid rgba(194,163,59,.2);
  border-radius:16px;
  padding:1.5rem;
  position:sticky;
  top:100px;
}
.price-display{font-size:1.8rem;font-weight:700;color:var(--gold);margin-bottom:.5rem}
.price-note{font-size:.85rem;color:var(--muted);margin-bottom:1.5rem}

/* Page Hero */
.page-hero{position:relative;isolation:isolate;padding:4rem 0 2rem;text-align:center}
.page-hero::before{content:"";position:absolute;inset:0;background:url('../images/hero/hero-bg.jpg') center/cover no-repeat;z-index:-2}
.page-hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,0.5);z-index:-1}
.page-hero h1{font-size:clamp(2rem,5vw,3.25rem);margin:0 0 1rem;line-height:1.1}
.page-hero p{font-size:1.1rem;color:#e9e9e9;max-width:70ch;margin:0 auto}

/* Grids */
section{padding:3.5rem 0}
.grid{display:grid;gap:1.5rem}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.grid.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width: 1000px){ .grid.g3{grid-template-columns:repeat(2,1fr)} .grid.g4{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 600px){ .grid.g3,.grid.g4{grid-template-columns:1fr} }

/* Cards */
.card{
  background:linear-gradient(180deg,#121212,#0b0b0b);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  overflow:hidden;
  transition:transform .3s ease;
}
.card:hover{transform:translateY(-5px)}
.card .imgwrap{position:relative;aspect-ratio:16/10;overflow:hidden}
.card .imgwrap img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform .4s ease}
.card:hover .imgwrap img{transform:scale(1.08)}
.badge{
  position:absolute;
  top:12px;
  left:12px;
  background:rgba(0,0,0,.6);
  color:#fff;
  border:1px solid rgba(255,255,255,.2);
  padding:.25rem .6rem;
  border-radius:999px;
  font-size:.78rem;
}
.card .body{padding:1.5rem}
.card h3{margin:.1rem 0 .5rem;font-size:1.1rem}
.card p{margin:0 0 1rem;color:#cfcfcf;font-size:.95rem;line-height:1.5}
.card .price{margin-bottom:1rem}

/* Service Cards */
.service-card{
  background:linear-gradient(180deg,#121212,#0b0b0b);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  overflow:hidden;
  transition:transform .3s ease;
}
.service-card:hover{transform:translateY(-5px)}
.service-card .imgwrap{position:relative;aspect-ratio:16/10;overflow:hidden}
.service-card .imgwrap img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform .4s ease}
.service-card:hover .imgwrap img{transform:scale(1.08)}
.service-card .body{padding:1.5rem}
.service-card h3{margin:.1rem 0 .5rem;font-size:1.1rem;color:var(--gold)}
.service-card p{margin:0 0 1rem;color:#cfcfcf;font-size:.95rem;line-height:1.5}
.service-card .features{list-style:none;padding:0;margin:1rem 0}
.service-card .features li{padding:.25rem 0;font-size:.9rem;color:#d0d0d0}
.service-card .features li:before{content:"✓";color:var(--gold);margin-right:.5rem}

/* CTA Section */
.cta-section{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:2rem;
  text-align:center;
  margin:3rem 0;
}
.cta-section h3{margin:0 0 1rem;font-size:1.4rem}
.cta-section p{margin:0 0 1.5rem;color:#d0d0d0;max-width:50ch;margin-left:auto;margin-right:auto}

/* Compact Footer */
footer .container {
  width: min(1200px, 92vw);
  margin: 0 auto;
}

.footer-compact {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 2rem;
  padding: 2rem 0 1.5rem;
  border-top: 1px solid rgba(255,255,255,.08);
  align-items: start;
}

.footer-brand .footer-tagline {
  color: #c0c0c0;
  margin: 0 0 1rem;
  font-size: 0.9rem;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.85rem;
}

.footer-contact a {
  color: var(--gold);
  text-decoration: none;
}

.footer-contact a:hover {
  text-decoration: underline;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.link-group h4 {
  color: var(--gold);
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.links-compact {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.links-compact a {
  color: #c0c0c0;
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.links-compact a:hover {
  color: var(--gold);
}

.footer-cta {
  text-align: center;
}

.cta-content {
  margin-bottom: 1rem;
}

.cta-content strong {
  color: var(--text);
  font-size: 1rem;
  display: block;
  margin-bottom: 0.25rem;
}

.cta-content p {
  color: #a0a0a0;
  font-size: 0.8rem;
  margin: 0;
}

.cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.btn-compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-compact.primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #111;
}

.btn-compact.primary:hover {
  filter: brightness(1.1);
}

.btn-compact.ghost {
  color: var(--text);
  border: 1px solid rgba(255,255,255,.2);
}

.btn-compact.ghost:hover {
  background: rgba(194,163,59,.1);
  border-color: var(--gold);
}

.footer-bottom-compact {
  background: rgba(0,0,0,0.4);
  border-top: 1px solid rgba(255,255,255,.05);
  padding: 1rem 0;
}

.footer-bottom-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: #a0a0a0;
}

.footer-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background: #25D366;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  z-index: 1000;
  transition: all 0.3s ease;
  text-decoration: none;
}

.whatsapp-float:hover {
  background: #128C7E;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
  color: white;
}

.whatsapp-float svg {
  width: 28px;
  height: 28px;
}

/* Responsive */
@media (max-width: 768px) {
  .vehicle-title{flex-direction:column;gap:1rem}
  .container-full{padding:0 1rem}
  
  .footer-compact {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem 0 1rem;
    text-align: center;
  }
  
  .footer-links {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .links-compact {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
  }
  
  .footer-contact {
    align-items: center;
  }
  
  .footer-bottom-flex {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
  
  .whatsapp-float {
    bottom: 15px;
    right: 15px;
    width: 50px;
    height: 50px;
  }
  
  .whatsapp-float svg {
    width: 24px;
    height: 24px;
  }
}