/* =========================================================
   AWAISIA RENT A CAR — Design Tokens
   Colors:
     --asphalt      #1C2530  (dark navy, hero/footer bg)
     --asphalt-2    #12181F  (near-black, deepest bg)
     --amber        #F2A93B  (highway sign accent / primary CTA)
     --cream        #F7F3EA  (light section bg)
     --signal-green #2E7D5B  (trust / whatsapp)
     --slate        #5B6470  (secondary text)
   Type:
     Display: 'Bebas Neue'   (condensed, road-sign headline feel)
     Body:    'Inter'
     Mono:    'JetBrains Mono' (plate/price numbers)
   Signature element: license-plate style price tag on car cards
   ========================================================= */

:root{
  --asphalt: #1C2530;
  --asphalt-2: #12181F;
  --amber: #F2A93B;
  --amber-dark: #D68F22;
  --cream: #F7F3EA;
  --signal-green: #2E7D5B;
  --slate: #5B6470;
  --white: #ffffff;

  --radius: 10px;
  --shadow: 0 10px 30px rgba(18, 24, 31, 0.12);
  --container: 1160px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: 'Inter', sans-serif;
  color: var(--asphalt-2);
  background: var(--cream);
  line-height: 1.6;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ font-family:'Bebas Neue', sans-serif; letter-spacing:0.5px; margin:0 0 .3em; line-height:1.05; }

.container{
  max-width: var(--container);
  margin:0 auto;
  padding: 0 24px;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight:700;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--amber); color: var(--asphalt-2); }
.btn-primary:hover{ background: var(--amber-dark); box-shadow: var(--shadow); }
.btn-outline{ border-color: rgba(255,255,255,0.35); color:#fff; }
.btn-outline:hover{ border-color:#fff; }
.btn-whatsapp{ background: var(--signal-green); color:#fff; }
.btn-whatsapp:hover{ background:#256549; box-shadow: var(--shadow); }
.btn-book{ background: var(--asphalt); color:#fff; padding:10px 18px; font-size:0.85rem; }
.btn-book:hover{ background: var(--asphalt-2); }
.btn-lg{ padding:16px 30px; font-size:1.05rem; margin-top: 20px; }

/* ===== Header ===== */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(28,37,48,0.96);
  backdrop-filter: blur(6px);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 24px;
  gap: 20px;
}
.logo{ display:flex; flex-direction:column; line-height:1.1; }
.logo-main{
  font-family:'Bebas Neue', sans-serif;
  font-size: 1.7rem; letter-spacing:2px; color:#fff;
}
.logo-sub{
  font-size: 0.62rem; letter-spacing:1.5px; text-transform:uppercase;
  color: var(--amber); font-weight:600;
}
.nav{ display:flex; gap: 28px; }
.nav a{ color:#fff; font-weight:600; font-size:0.95rem; opacity:0.85; }
.nav a:hover{ opacity:1; color: var(--amber); }
.header-cta{ display:flex; gap:10px; }
.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px;
}
.nav-toggle span{ width:26px; height:3px; background:#fff; border-radius:2px; }

/* ===== Lane line (signature road motif) ===== */
.lane-line{
  height: 4px; width:100%;
  background-image: repeating-linear-gradient(90deg, var(--amber) 0 26px, transparent 26px 46px);
  background-size: 200% 100%;
  animation: lane-move 3s linear infinite;
  opacity: 0.9;
}
.lane-line-light{ opacity:0.35; }
@keyframes lane-move{
  from{ background-position: 0 0; }
  to{ background-position: -92px 0; }
}
@media (prefers-reduced-motion: reduce){
  .lane-line{ animation: none; }
}

/* ===== Hero ===== */
.hero{
  background: radial-gradient(circle at 15% 20%, #263243 0%, var(--asphalt) 45%, var(--asphalt-2) 100%);
  color:#fff;
  padding: 90px 0 70px;
  position: relative;
}
.hero-inner{ max-width: 720px; }
.eyebrow{
  color: var(--amber); font-weight:700; letter-spacing: 2px;
  text-transform: uppercase; font-size: 0.8rem; margin-bottom: 10px;
}
.hero-banner{
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.1rem, 3vw, 1.9rem);
  letter-spacing: 1px;
  color: #fff;
  background: rgba(242,169,59,0.14);
  border: 1px solid rgba(242,169,59,0.4);
  display: inline-block;
  max-width: 100%;
  padding: 8px 18px;
  border-radius: 999px;
  margin: 0 0 18px;
}
.hero h1{
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  color:#fff;
}
.hero h1 span{ color: var(--amber); }
.hero-text{
  font-size: 1.05rem; color: rgba(255,255,255,0.8);
  max-width: 560px; margin-bottom: 30px;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom: 50px; }
.hero-stats{ display:flex; gap: 40px; flex-wrap:wrap; }
.stat{ display:flex; flex-direction:column; }
.stat-num{ font-family:'JetBrains Mono', monospace; font-weight:700; font-size:1.6rem; color: var(--amber); }
.stat-label{ font-size:0.78rem; color: rgba(255,255,255,0.65); text-transform:uppercase; letter-spacing:1px; }

/* ===== Section headings ===== */
.section-eyebrow{
  color: var(--signal-green); font-weight:700; letter-spacing:2px;
  text-transform:uppercase; font-size:0.78rem; margin-bottom:8px;
}
.section-title{ font-size: clamp(2rem, 4vw, 2.8rem); color: var(--asphalt-2); }
.section-sub{ color: var(--slate); max-width: 560px; margin-bottom: 40px; }

/* ===== Fleet ===== */
.fleet{ padding: 80px 0; }
.fleet-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
}
.fleet-group-title{
  grid-column: 1 / -1;
  font-family:'Bebas Neue', sans-serif;
  font-size: 1.3rem; letter-spacing:1.5px; text-transform:uppercase;
  color: var(--signal-green);
  margin: 18px 0 -6px;
  padding-bottom: 8px;
  border-bottom: 2px dashed rgba(46,125,91,0.25);
}
.fleet-group-title:first-child{ margin-top:0; }
.car-card{
  background:#fff; border-radius: var(--radius); overflow:hidden;
  box-shadow: 0 4px 14px rgba(18,24,31,0.08);
  border: 1px solid rgba(28,37,48,0.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.car-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow); }
.car-media{
  position:relative; aspect-ratio: 4/3; background: linear-gradient(135deg,#e7e1d2,#d9d2bd);
  display:flex; align-items:center; justify-content:center;
}
.car-media img{ width:100%; height:100%; object-fit:cover; }
.car-tag{
  position:absolute; top:10px; left:10px;
  background: var(--asphalt); color:#fff;
  font-size:0.72rem; font-weight:700; letter-spacing:0.5px;
  padding: 5px 12px; border-radius: 999px;
}
.car-body{ padding: 18px 18px 20px; }
.car-name{ font-size:1.5rem; margin-bottom:14px; color: var(--asphalt-2); }

.price-row{ display:flex; gap:10px; margin-bottom:16px; }

/* Signature: license-plate style price tag */
.plate-price{
  flex: 1;
  background: var(--asphalt-2);
  color: #fff;
  border: 2px solid #fff;
  outline: 2px solid var(--asphalt-2);
  border-radius: 4px;
  padding: 8px 8px;
  font-family: 'JetBrains Mono', monospace;
  text-align:center;
}
.plate-price > small{
  display:block; font-family:'Inter',sans-serif; text-transform:uppercase;
  font-weight:700; letter-spacing:0.5px; font-size:0.62rem; opacity:0.75; margin-bottom:4px;
}
.plate-price > div{ font-weight:700; font-size:1rem; letter-spacing:0.5px; }
.plate-price span{ color: var(--amber); margin-right:3px; font-size:0.75rem; }
.plate-price small small{ font-weight:500; opacity:0.7; font-size:0.65rem; margin-left:3px; }

.price-row-single .plate-price{ flex: none; width: 100%; }

.car-actions{ display:flex; gap:8px; }
.car-actions .btn{ flex:1; justify-content:center; padding:10px 12px; font-size:0.85rem; }
.btn-call{ background: var(--asphalt); color:#fff; }
.btn-call:hover{ background: var(--asphalt-2); }

.btn-book-full{ width:100%; justify-content:center; }

.car-media.no-img{
  display:flex; align-items:center; justify-content:center;
}
.car-media.no-img::after{
  content:"🚘"; font-size: 3rem; opacity:0.45;
}

/* ===== Premium Showcase ===== */
.showcase{
  background: linear-gradient(160deg, var(--asphalt-2) 0%, var(--asphalt) 100%);
  color:#fff;
  padding: 70px 0;
}
.showcase-inner{
  display:grid; grid-template-columns: 1fr 0.85fr; gap:48px; align-items:center;
}
.showcase-title{ color:#fff; }
.showcase-copy{ color: rgba(255,255,255,0.75); margin-bottom: 26px; max-width: 480px; }
.showcase-media{ display:flex; justify-content:center; }
.showcase-video{
  width: 100%; max-width: 300px;
  border-radius: var(--radius);
  border: 3px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow);
  aspect-ratio: 9/16;
  object-fit: cover;
  background: #000;
}

/* ===== Why Us ===== */
.why-us{ background: var(--asphalt); color:#fff; padding: 70px 0 80px; }
.why-us .section-title{ color:#fff; }
.why-us .section-sub{ color: rgba(255,255,255,0.65); }
.why-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: 22px; margin-top: 20px;
}
.why-card{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 24px;
}
.why-icon{ font-size:1.8rem; margin-bottom:10px; }
.why-card h3{ font-family:'Inter',sans-serif; font-size:1.05rem; font-weight:700; margin-bottom:6px; }
.why-card p{ color: rgba(255,255,255,0.65); font-size:0.9rem; margin:0; }

/* ===== Contact ===== */
.contact{ padding: 80px 0; }
.contact-inner{
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items:start;
}
.contact-details{ margin: 24px 0 10px; display:flex; flex-direction:column; gap: 14px; }
.contact-item{
  display:flex; align-items:center; gap:14px;
  background:#fff; border-radius: var(--radius);
  padding: 14px 16px; border:1px solid rgba(28,37,48,0.08);
  transition: border-color .15s ease, transform .15s ease;
}
.contact-item:hover{ border-color: var(--amber); transform: translateX(4px); }
.contact-icon{ font-size:1.4rem; }
.contact-item strong{ display:block; font-size:0.95rem; }
.contact-item span{ font-size:0.85rem; color: var(--slate); }

.map-card{
  display:flex; flex-direction:column; gap:6px;
  background: var(--asphalt); color:#fff;
  border-radius: var(--radius); padding: 30px 24px;
  height:100%; justify-content:center;
  border: 1px solid rgba(255,255,255,0.08);
}
.map-card-icon{ font-size:2rem; margin-bottom:6px; }
.map-card strong{ font-size:1.2rem; }
.map-card span{ color: rgba(255,255,255,0.7); font-size:0.9rem; }
.map-card-link{ color: var(--amber) !important; font-weight:700; margin-top:10px; }

/* ===== Footer ===== */
.site-footer{ background: var(--asphalt-2); color: rgba(255,255,255,0.7); padding: 40px 0; text-align:center; }
.footer-inner{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.footer-logo{ align-items:center; }
.footer-copy{ font-size:0.78rem; opacity:0.6; margin:0; }

/* ===== Floating WhatsApp ===== */
.float-whatsapp{
  position:fixed; bottom:22px; right:22px; z-index:200;
  background: var(--signal-green); color:#fff;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  transition: transform .15s ease;
}
.float-whatsapp:hover{ transform: scale(1.08); }

/* ===== Scroll reveal ===== */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px){
  .contact-inner{ grid-template-columns: 1fr; }
  .showcase-inner{ grid-template-columns: 1fr; text-align:center; }
  .showcase-copy{ margin-left:auto; margin-right:auto; }
  .showcase-video{ max-width: 240px; }
}

@media (max-width: 780px){
  .nav{
    position:absolute; top:100%; left:0; right:0;
    background: var(--asphalt); flex-direction:column;
    padding: 10px 24px 24px; gap: 14px;
    display:none;
  }
  .nav.open{ display:flex; }
  .nav-toggle{ display:flex; }
  .header-cta{ display:none; }
  .header-cta.open{ display:flex; flex-direction:column; width:100%; padding: 0 24px 20px; }
  .hero{ padding: 60px 0 50px; text-align:left; }
  .hero-stats{ gap: 24px; }
}

@media (max-width: 480px){
  .hero h1{ font-size: 2.2rem; }
  .btn-lg{ width:100%; justify-content:center; }
  .float-whatsapp{ width:50px; height:50px; font-size:1.3rem; bottom:16px; right:16px; }
  .car-actions .btn{ font-size:0.8rem; padding:10px 6px; }
}