/* =========================================================
   MARVEL — Shared global stylesheet for index.html & booking.html
   ========================================================= */

/* =========================================================
   PALETTE (used exclusively)
   ========================================================= */
:root {
  --primary-blue: #187FB0;
  --light-blue: #1F9ED8;
  --lighter-blue: #4BB5E8;
  --red: #E30613;
  --dark-red: #c40510;
  --dark-text: #222831;
  --light-gray: #777;
  --white: #ffffff;

  --grad: linear-gradient(135deg, #1F9ED8 0%, #4BB5E8 100%);

  --shadow-sm: 0 2px 8px rgba(34, 40, 49, 0.06);
  --shadow-md: 0 8px 24px rgba(34, 40, 49, 0.08);
  --shadow-lg: 0 16px 40px rgba(34, 40, 49, 0.12);
}

/* ---------- Reset & base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--dark-text);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a {
  color: var(--primary-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover { color: var(--light-blue); }
button { font-family: inherit; cursor: pointer; border: none; outline: none; }

button:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 3px solid var(--lighter-blue);
  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Section heading style ---------- */
.section-head {
  text-align: center;
  margin-bottom: 48px;
}
.section-head h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--dark-text);
  margin-bottom: 12px;
}
.section-head p {
  color: var(--light-gray);
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0 auto;
}

/* ===========================================================
   1. NAVIGATION (shared)
   =========================================================== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1;
}

/* -----------------------------------------------------------
   LOGO IMAGE — fits nav bar cleanly, scales on small screens,
   falls back to a styled icon if the file is missing.
   ----------------------------------------------------------- */
.logo-img {
  height: 42px;             /* Comfortable height for the bar */
  width: auto;
  max-width: 60px;          /* Prevents distortion on wide logos */
  object-fit: contain;      /* Preserves aspect ratio */
  display: block;
  flex-shrink: 0;
}

/* Logo word — solid theme red */
.logo span {
  color: var(--red);
}

.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
  align-items: center;
}
.nav-links a {
  color: var(--dark-text);
  font-weight: 500;
  font-size: 0.95rem;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--grad);
  transition: width 0.25s ease;
}
.nav-links a:hover::after { width: 100%; }

/* "Book now" pill button inside the nav (landing page) */
.nav-cta {
  background: var(--red);
  color: var(--white) !important;
  padding: 9px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  transition: background 0.2s ease, transform 0.15s ease;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover {
  background: var(--dark-red);
  transform: translateY(-1px);
}

.nav-toggle {
  display: none;
  background: transparent;
  font-size: 1.4rem;
  color: var(--dark-text);
}

/* ===========================================================
   2. SHARED BUTTONS
   =========================================================== */
.btn-cta {
  background: var(--red);
  color: var(--white);
  padding: 14px 28px;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.btn-cta:hover {
  background: var(--dark-red);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(227, 6, 19, 0.3);
}
.btn-cta:active { transform: translateY(0); }

.btn-primary {
  background: var(--red);
  color: var(--white);
  padding: 15px 28px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.btn-primary:hover {
  background: var(--dark-red);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(227, 6, 19, 0.3);
}
.btn-secondary {
  background: transparent;
  color: var(--primary-blue);
  padding: 15px 24px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 10px;
  border: 1.5px solid rgba(24, 127, 176, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn-secondary:hover {
  background: rgba(24, 127, 176, 0.08);
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

/* ===========================================================
   3. HERO — BOOKING PAGE (index.html)
   =========================================================== */
.hero {
  position: relative;
  padding: 80px 0 60px;
  background:
    linear-gradient(135deg, rgba(31, 158, 216, 0.08) 0%, rgba(75, 181, 232, 0.04) 100%),
    var(--white);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 380px;
  height: 380px;
  background: var(--grad);
  border-radius: 50%;
  opacity: 0.12;
  filter: blur(60px);
  z-index: 0;
}
.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}
.hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin-bottom: 18px;
}
.hero h1 .grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p.lead {
  font-size: 1.15rem;
  color: var(--light-gray);
  margin-bottom: 36px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Booking panel */
.booking-panel {
  background: var(--white);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 28px;
  max-width: 920px;
  margin: 0 auto;
  position: relative;
  border-top: 4px solid transparent;
  background-image:
    linear-gradient(var(--white), var(--white)),
    var(--grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.booking-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 16px;
  align-items: end;
}
.field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--dark-text);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}
.field label i {
  color: var(--primary-blue);
  margin-right: 6px;
}
.field input {
  width: 100%;
  padding: 14px 14px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--dark-text);
  background: var(--white);
  border: 1.5px solid rgba(34, 40, 49, 0.12);
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field input:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(24, 127, 176, 0.15);
}

.helper-text {
  text-align: center;
  color: var(--light-gray);
  font-size: 0.85rem;
  margin-top: 16px;
}
.helper-text i {
  color: var(--primary-blue);
  margin-right: 4px;
}

/* ===========================================================
   4. VEHICLE GRID (index.html)
   =========================================================== */
.vehicles { padding: 80px 0; background: var(--white); }
.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
}
.car-card {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(34, 40, 49, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}
.car-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}
.car-image {
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, rgba(31, 158, 216, 0.1), rgba(75, 181, 232, 0.05));
  object-fit: cover;
}
.car-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.car-type {
  display: inline-block;
  background: var(--grad);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
  align-self: flex-start;
}
.car-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dark-text);
  margin-bottom: 14px;
}
.car-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(34, 40, 49, 0.08);
}
.car-specs div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 0.78rem;
  color: var(--light-gray);
  gap: 4px;
}
.car-specs i {
  color: var(--primary-blue);
  font-size: 0.95rem;
}
.car-pricing { margin-bottom: 16px; }
.car-rate { font-size: 0.85rem; color: var(--light-gray); }
.car-rate strong {
  color: var(--primary-blue);
  font-weight: 700;
  font-size: 1rem;
}
.car-total {
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--dark-text);
  font-weight: 500;
}
.car-total .total-amount {
  color: var(--primary-blue);
  font-size: 1.5rem;
  font-weight: 800;
  display: inline-block;
  margin-left: 4px;
}
.car-total .total-days {
  color: var(--light-gray);
  font-size: 0.8rem;
  display: block;
  margin-top: 2px;
}
.btn-book {
  background: var(--red);
  color: var(--white);
  padding: 12px 18px;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 10px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  margin-top: auto;
}
.btn-book:hover {
  background: var(--dark-red);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(227, 6, 19, 0.3);
}

/* ===========================================================
   5. BENEFITS (index.html)
   =========================================================== */
.benefits {
  padding: 80px 0;
  background: linear-gradient(180deg, rgba(31, 158, 216, 0.04) 0%, var(--white) 100%);
}
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.benefit-card {
  background: var(--white);
  padding: 32px 24px;
  border-radius: 14px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(34, 40, 49, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.benefit-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.benefit-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--grad);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 18px;
}
.benefit-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark-text);
  margin-bottom: 10px;
}
.benefit-card p {
  color: var(--light-gray);
  font-size: 0.92rem;
}

/* ===========================================================
   6. TESTIMONIALS (index.html)
   =========================================================== */
.testimonials { padding: 80px 0; background: var(--white); }
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
  max-width: 960px;
  margin: 0 auto;
}
.testimonial-card {
  background: var(--white);
  padding: 28px;
  border-left: 4px solid var(--primary-blue);
  border-radius: 0 12px 12px 0;
  box-shadow: var(--shadow-sm);
}
.stars {
  color: var(--primary-blue);
  margin-bottom: 12px;
  font-size: 1rem;
}
.testimonial-text {
  color: var(--dark-text);
  font-style: italic;
  margin-bottom: 16px;
  line-height: 1.7;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--grad);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.author-info strong {
  display: block;
  color: var(--dark-text);
  font-size: 0.95rem;
}
.author-info span {
  color: var(--light-gray);
  font-size: 0.82rem;
}

/* ===========================================================
   7. FOOTER (shared)
   =========================================================== */
.footer {
  background: var(--dark-text);
  color: var(--white);
  padding: 40px 0 24px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
.footer .logo span {
  color: var(--red);
}
.footer p,
.footer a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.92rem;
}
.footer a:hover { color: var(--lighter-blue); }
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-contact i {
  color: var(--lighter-blue);
  margin-right: 8px;
}
.footer-bottom {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
}

/* ===========================================================
   8. MODAL (index.html — Booking confirmation)
   =========================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(34, 40, 49, 0.65);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}
.modal-overlay.active { display: flex; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--white);
  border-radius: 16px;
  max-width: 480px;
  width: 100%;
  padding: 32px;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.25s ease;
  max-height: 90vh;
  overflow-y: auto;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(34, 40, 49, 0.08);
}
.modal-header .icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--grad);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.modal-header h3 {
  font-size: 1.2rem;
  color: var(--dark-text);
  font-weight: 700;
}
.modal-body { margin-bottom: 24px; }
.modal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(34, 40, 49, 0.08);
  font-size: 0.95rem;
}
.modal-row:last-child { border-bottom: none; }
.modal-row .label {
  color: var(--light-gray);
  font-weight: 500;
}
.modal-row .value {
  color: var(--dark-text);
  font-weight: 600;
  text-align: right;
}
.modal-row.total .value {
  color: var(--primary-blue);
  font-size: 1.25rem;
  font-weight: 800;
}
.modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.btn-cancel {
  background: transparent;
  color: var(--dark-text);
  border: 1.5px solid rgba(34, 40, 49, 0.15);
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.92rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.btn-cancel:hover {
  background: rgba(34, 40, 49, 0.04);
  border-color: rgba(34, 40, 49, 0.3);
}

/* ===========================================================
   9. LANDING HERO (booking.html)
   =========================================================== */
.hero-landing {
  position: relative;
  padding: 90px 0 100px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(31, 158, 216, 0.10) 0%, rgba(75, 181, 232, 0.04) 100%),
    var(--white);
}
.hero-landing::before,
.hero-landing::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: var(--grad);
  opacity: 0.14;
  filter: blur(70px);
  z-index: 0;
}
.hero-landing::before {
  top: -150px;
  right: -100px;
  width: 420px;
  height: 420px;
}
.hero-landing::after {
  bottom: -180px;
  left: -120px;
  width: 380px;
  height: 380px;
  opacity: 0.08;
}

.hero-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(24, 127, 176, 0.08);
  color: var(--primary-blue);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 20px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.hero-eyebrow i { font-size: 0.7rem; }

.hero-landing h1 {
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1.05;
  margin-bottom: 22px;
}
.hero-landing h1 .grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-landing .lead {
  font-size: 1.1rem;
  color: var(--light-gray);
  margin-bottom: 32px;
  max-width: 520px;
}

.hero-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 36px;
}

/* Trust stats row under the CTAs */
.hero-stats {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
}
.hero-stats .stat strong {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
}
.hero-stats .stat span {
  color: var(--light-gray);
  font-size: 0.85rem;
}

/* Hero visual — stacked layered card with a car illustration */
.hero-visual {
  position: relative;
  min-height: 420px;
}
.hero-card {
  position: relative;
  background: var(--white);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border-top: 4px solid transparent;
  border-right: 1px solid transparent;
  border-left: 1px solid transparent;
  background-image:
    linear-gradient(var(--white), var(--white)),
    var(--grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.hero-card img {
  width: 100%;
  height: 360px;
  object-fit: cover;
}
.hero-card-foot {
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hero-card-foot .meta {
  display: flex;
  flex-direction: column;
}
.hero-card-foot .meta strong {
  font-size: 1rem;
  color: var(--dark-text);
  font-weight: 700;
}
.hero-card-foot .meta span {
  font-size: 0.82rem;
  color: var(--light-gray);
}
.hero-card-foot .price {
  color: var(--primary-blue);
  font-weight: 800;
  font-size: 1.1rem;
}
.hero-card-foot .price small {
  color: var(--light-gray);
  font-weight: 500;
  font-size: 0.78rem;
  margin-left: 2px;
}

/* Floating badge over the hero card */
.floating-badge {
  position: absolute;
  bottom: -22px;
  left: -22px;
  background: var(--white);
  padding: 14px 18px;
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
}
.floating-badge .icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--grad);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.floating-badge .text strong {
  display: block;
  font-size: 0.92rem;
  color: var(--dark-text);
}
.floating-badge .text span {
  font-size: 0.78rem;
  color: var(--light-gray);
}

/* ===========================================================
   10. FEATURE STRIP (booking.html)
   =========================================================== */
.feature-strip {
  padding: 60px 0;
  background: var(--white);
}
.feature-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
}
.feature-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.feature-item .icon-box {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(24, 127, 176, 0.08);
  color: var(--primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.feature-item h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark-text);
  margin-bottom: 4px;
}
.feature-item p {
  font-size: 0.9rem;
  color: var(--light-gray);
}

/* ===========================================================
   11. FLEET PREVIEW (booking.html)
   =========================================================== */
.fleet-preview {
  padding: 80px 0;
  background: linear-gradient(180deg, rgba(31, 158, 216, 0.04) 0%, var(--white) 100%);
}
.fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.fleet-card {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(34, 40, 49, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.fleet-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}
.fleet-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: linear-gradient(135deg, rgba(31, 158, 216, 0.1), rgba(75, 181, 232, 0.05));
}
.fleet-card-body {
  padding: 18px 20px 22px;
}
.fleet-card .badge {
  display: inline-block;
  background: var(--grad);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.fleet-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark-text);
  margin-bottom: 4px;
}
.fleet-card .price-line {
  color: var(--primary-blue);
  font-weight: 700;
  font-size: 0.95rem;
}
.fleet-card .price-line span {
  color: var(--light-gray);
  font-weight: 500;
  font-size: 0.82rem;
}

.fleet-cta {
  text-align: center;
  margin-top: 40px;
}

/* ===========================================================
   12. HOW IT WORKS — 3 steps (booking.html)
   =========================================================== */
.how {
  padding: 80px 0;
  background: var(--white);
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  position: relative;
}
.step {
  text-align: center;
  padding: 0 10px;
  position: relative;
}
.step .step-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--grad);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0 auto 18px;
  box-shadow: 0 6px 16px rgba(31, 158, 216, 0.3);
}
.step h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark-text);
  margin-bottom: 8px;
}
.step p {
  color: var(--light-gray);
  font-size: 0.92rem;
}

/* ===========================================================
   13. CTA BANNER (booking.html)
   =========================================================== */
.cta-banner {
  padding: 60px 0;
  background: var(--grad);
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  background: var(--white);
  opacity: 0.08;
  border-radius: 50%;
}
.cta-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: center;
}
.cta-banner h2 {
  color: var(--white);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.8px;
  margin-bottom: 8px;
}
.cta-banner p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  max-width: 540px;
}
.cta-banner .btn-primary {
  box-shadow: 0 10px 24px rgba(34, 40, 49, 0.2);
}

/* ===========================================================
   14. RESPONSIVE — breakpoint ~850px
   =========================================================== */
@media (max-width: 850px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--white);
    padding: 20px 24px;
    gap: 16px;
    box-shadow: var(--shadow-md);
    align-items: stretch;
  }
  .nav-links.open { display: flex; }
  .nav-cta { text-align: center; }
  .nav-toggle { display: block; }

  .logo-img { height: 36px; max-width: 52px; }
  .logo { font-size: 1.3rem; gap: 10px; }

  /* index.html hero */
  .hero { padding: 60px 0 50px; }
  .booking-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .booking-panel { padding: 22px; }
  .vehicles, .benefits, .testimonials { padding: 60px 0; }
  .vehicle-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
  }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .modal { padding: 24px; }
  .modal-actions { grid-template-columns: 1fr; }

  /* booking.html hero */
  .hero-landing { padding: 60px 0 80px; }
  .hero-wrap {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .hero-visual { min-height: auto; }
  .hero-card img { height: 280px; }
  .floating-badge { left: 16px; bottom: -18px; }

  .feature-strip,
  .fleet-preview,
  .how { padding: 60px 0; }

  .steps { grid-template-columns: 1fr; gap: 24px; }

  .cta-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .cta-inner .btn-primary { justify-self: center; }
}

@media (max-width: 480px) {
  .container { padding: 0 18px; }
  .logo-img { height: 32px; max-width: 46px; }
  .logo { font-size: 1.15rem; }
  .car-specs { font-size: 0.72rem; }
  .car-total .total-amount { font-size: 1.3rem; }
  .hero-stats { gap: 24px; }
  .hero-stats .stat strong { font-size: 1.35rem; }
  .floating-badge { padding: 10px 14px; }
  .floating-badge .icon { width: 36px; height: 36px; font-size: 0.9rem; }
}/* =========================================================
   MARVEL — Shared global stylesheet
   Updated: animated hero, themed date picker, payment modals,
            continuous testimonial ribbon, toast, etc.
   ========================================================= */

:root {
  --primary-blue: #187FB0;
  --light-blue: #1F9ED8;
  --lighter-blue: #4BB5E8;
  --red: #E30613;
  --dark-red: #c40510;
  --dark-text: #222831;
  --light-gray: #777;
  --white: #ffffff;

  --grad: linear-gradient(135deg, #1F9ED8 0%, #4BB5E8 100%);

  --shadow-sm: 0 2px 8px rgba(34, 40, 49, 0.06);
  --shadow-md: 0 8px 24px rgba(34, 40, 49, 0.08);
  --shadow-lg: 0 16px 40px rgba(34, 40, 49, 0.12);
}

/* ---------- Reset & base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--dark-text);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--primary-blue); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--light-blue); }
button { font-family: inherit; cursor: pointer; border: none; outline: none; }

button:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 3px solid var(--lighter-blue);
  outline-offset: 2px;
}

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.section-head { text-align: center; margin-bottom: 48px; }
.section-head h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800;
  color: var(--dark-text); margin-bottom: 12px;
}
.section-head p {
  color: var(--light-gray); font-size: 1.05rem;
  max-width: 560px; margin: 0 auto;
}

/* ===========================================================
   1. NAVIGATION
   =========================================================== */
.navbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--white); box-shadow: var(--shadow-sm);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; max-width: 1200px; margin: 0 auto;
}
.logo {
  display: flex; align-items: center; gap: 12px;
  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.5px; line-height: 1;
}
.logo-img {
  height: 42px; width: auto; max-width: 60px;
  object-fit: contain; display: block; flex-shrink: 0;
}
.logo span { color: var(--red); }

.nav-links {
  display: flex; gap: 36px; list-style: none; align-items: center;
}
.nav-links a {
  color: var(--dark-text); font-weight: 500; font-size: 0.95rem; position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -6px; left: 0;
  width: 0; height: 2px; background: var(--grad);
  transition: width 0.25s ease;
}
.nav-links a:hover::after { width: 100%; }

.nav-cta {
  background: var(--red); color: var(--white) !important;
  padding: 9px 20px; border-radius: 8px;
  font-weight: 700; font-size: 0.9rem;
  transition: background 0.2s ease, transform 0.15s ease;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover { background: var(--dark-red); transform: translateY(-1px); }

.nav-toggle {
  display: none; background: transparent;
  font-size: 1.4rem; color: var(--dark-text);
}

/* ===========================================================
   2. SHARED BUTTONS
   =========================================================== */
.btn-cta {
  background: var(--red); color: var(--white);
  padding: 14px 28px; font-size: 0.95rem; font-weight: 700;
  border-radius: 10px; display: inline-flex; align-items: center; gap: 8px;
  justify-content: center;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  white-space: nowrap; position: relative;
}
.btn-cta:hover { background: var(--dark-red); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(227, 6, 19, 0.3); }
.btn-cta:active { transform: translateY(0); }
.btn-cta:disabled { opacity: 0.85; cursor: not-allowed; transform: none !important; }

.btn-primary {
  background: var(--red); color: var(--white);
  padding: 15px 28px; font-size: 1rem; font-weight: 700;
  border-radius: 10px; display: inline-flex; align-items: center; gap: 10px;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.btn-primary:hover { background: var(--dark-red); color: var(--white); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(227, 6, 19, 0.3); }

.btn-secondary {
  background: transparent; color: var(--primary-blue);
  padding: 15px 24px; font-size: 1rem; font-weight: 700; border-radius: 10px;
  border: 1.5px solid rgba(24, 127, 176, 0.3);
  display: inline-flex; align-items: center; gap: 10px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn-secondary:hover { background: rgba(24, 127, 176, 0.08); border-color: var(--primary-blue); color: var(--primary-blue); }

/* ===========================================================
   3. HERO — animated with floating elements
   =========================================================== */
.hero {
  position: relative;
  padding: 70px 0 70px;
  background:
    linear-gradient(135deg, rgba(31, 158, 216, 0.08) 0%, rgba(75, 181, 232, 0.04) 100%),
    var(--white);
  overflow: hidden;
  isolation: isolate;
}

/* Animated background layer (zindex below content) */
.hero-bg-anim {
  position: absolute; inset: 0;
  z-index: -1; overflow: hidden;
}

/* Gradient orbs */
.hero-orb {
  position: absolute; border-radius: 50%;
  filter: blur(60px); pointer-events: none;
}
.hero-orb-a {
  top: -120px; right: -100px;
  width: 380px; height: 380px;
  background: var(--grad); opacity: 0.16;
  animation: floatA 14s ease-in-out infinite;
}
.hero-orb-b {
  bottom: -140px; left: -80px;
  width: 340px; height: 340px;
  background: var(--lighter-blue); opacity: 0.18;
  animation: floatA 16s ease-in-out infinite reverse;
}
.hero-orb-c {
  top: 40%; left: 30%;
  width: 260px; height: 260px;
  background: var(--red); opacity: 0.06;
  animation: floatA 18s ease-in-out infinite;
}
@keyframes floatA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -25px) scale(1.05); }
}

/* Perspective road SVG */
.hero-road-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0.6;
}
.lane-dashes rect {
  animation: laneRush 1.4s linear infinite;
  transform-box: fill-box; transform-origin: center;
}
.lane-dashes rect:nth-child(1) { animation-delay: 0s; }
.lane-dashes rect:nth-child(2) { animation-delay: 0.28s; }
.lane-dashes rect:nth-child(3) { animation-delay: 0.56s; }
.lane-dashes rect:nth-child(4) { animation-delay: 0.84s; }
.lane-dashes rect:nth-child(5) { animation-delay: 1.12s; }
@keyframes laneRush {
  0%   { transform: translateY(-80px); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 0.8; }
  100% { transform: translateY(80px); opacity: 0; }
}

/* Floating car icons drifting across */
.hero-cars { position: absolute; inset: 0; pointer-events: none; }
.hero-car {
  position: absolute;
  color: var(--primary-blue);
  opacity: 0.12;
  font-size: 3rem;
  animation: drift 22s linear infinite;
}
.hc-1 { top: 18%; left: -10%; animation-delay: 0s;  font-size: 2.6rem; }
.hc-2 { top: 58%; left: -15%; animation-delay: 7s;  font-size: 3.2rem; opacity: 0.08; }
.hc-3 { top: 78%; left: -12%; animation-delay: 14s; font-size: 2.8rem; opacity: 0.10; }
@keyframes drift {
  0%   { transform: translateX(0) translateY(0); }
  50%  { transform: translateX(60vw) translateY(-8px); }
  100% { transform: translateX(120vw) translateY(0); }
}

.hero-content {
  position: relative; z-index: 1;
  text-align: center; max-width: 820px; margin: 0 auto;
}

/* Hero eyebrow pill */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(24, 127, 176, 0.08);
  color: var(--primary-blue);
  font-size: 0.78rem; font-weight: 700;
  padding: 7px 14px; border-radius: 20px;
  letter-spacing: 0.6px; text-transform: uppercase;
  margin-bottom: 22px;
  border: 1px solid rgba(24, 127, 176, 0.15);
}
.hero-eyebrow i { color: var(--red); font-size: 0.7rem; }

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900; letter-spacing: -1.5px;
  line-height: 1.1; margin-bottom: 18px;
}
.hero h1 .grad-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p.lead {
  font-size: 1.15rem; color: var(--light-gray);
  margin-bottom: 36px; max-width: 600px;
  margin-left: auto; margin-right: auto;
}

/* ===========================================================
   4. BOOKING PANEL
   =========================================================== */
.booking-panel {
  background: var(--white);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 28px;
  max-width: 920px; margin: 0 auto;
  position: relative;
  border-top: 4px solid transparent;
  background-image: linear-gradient(var(--white), var(--white)), var(--grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  /* Subtle entrance animation */
  animation: panelRise 0.6s 0.2s ease both;
}
@keyframes panelRise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.booking-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 16px; align-items: end;
}
.field label {
  display: block; font-size: 0.78rem; font-weight: 600;
  color: var(--dark-text); text-transform: uppercase;
  letter-spacing: 0.6px; margin-bottom: 8px;
}
.field label i { color: var(--primary-blue); margin-right: 6px; }
.field input {
  width: 100%; padding: 14px 14px;
  font-size: 0.95rem; font-family: inherit;
  color: var(--dark-text); background: var(--white);
  border: 1.5px solid rgba(34, 40, 49, 0.12);
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field input:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(24, 127, 176, 0.15);
}
/* Date inputs (readonly via Flatpickr) need cursor pointer */
.field input[readonly] { cursor: pointer; background: var(--white); }

.helper-text {
  text-align: center; color: var(--light-gray);
  font-size: 0.85rem; margin-top: 16px;
}
.helper-text i { color: var(--primary-blue); margin-right: 4px; }

/* ===========================================================
   5. FLATPICKR THEME OVERRIDES
   =========================================================== */
.flatpickr-calendar {
  background: var(--white);
  border-radius: 14px !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid rgba(34, 40, 49, 0.08) !important;
  font-family: 'Inter', sans-serif;
  padding: 8px;
  margin-top: 6px;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after { border-bottom-color: var(--primary-blue) !important; }

.flatpickr-months {
  padding: 6px 0 10px;
  border-bottom: 1px solid rgba(34, 40, 49, 0.06);
  margin-bottom: 8px;
}
.flatpickr-month {
  background: transparent !important;
  color: var(--dark-text) !important;
  height: 38px;
}
.flatpickr-current-month {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--dark-text) !important;
  padding-top: 4px !important;
}
.flatpickr-current-month .numInputWrapper:hover { background: rgba(24, 127, 176, 0.06); border-radius: 6px; }
.flatpickr-current-month input.cur-year { font-weight: 700; color: var(--dark-text); }
.flatpickr-monthDropdown-months {
  font-weight: 700 !important;
  color: var(--dark-text) !important;
}
.flatpickr-monthDropdown-months option { background: var(--white); color: var(--dark-text); }

.flatpickr-prev-month,
.flatpickr-next-month {
  fill: var(--primary-blue) !important;
  color: var(--primary-blue) !important;
  padding: 8px !important;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  fill: var(--white) !important;
  color: var(--white) !important;
  background: var(--grad) !important;
}

.flatpickr-weekdays { padding: 4px 0; }
.flatpickr-weekday {
  color: var(--light-gray) !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  text-transform: uppercase; letter-spacing: 0.5px;
}

.flatpickr-day {
  border-radius: 8px !important;
  color: var(--dark-text);
  font-weight: 500;
  border: none !important;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
  height: 38px; line-height: 38px;
  max-width: 38px;
}
.flatpickr-day:hover {
  background: rgba(24, 127, 176, 0.1) !important;
  color: var(--primary-blue) !important;
  transform: scale(1.04);
}
.flatpickr-day.today {
  border: 1.5px solid var(--primary-blue) !important;
  color: var(--primary-blue);
  font-weight: 700;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--grad) !important;
  background-image: var(--grad) !important;
  color: var(--white) !important;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(24, 127, 176, 0.3);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: rgba(34, 40, 49, 0.25) !important;
  background: transparent !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* ===========================================================
   6. VEHICLE GRID
   =========================================================== */
.vehicles { padding: 80px 0; background: var(--white); }
.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
}
.car-card {
  background: var(--white); border-radius: 16px;
  overflow: hidden; box-shadow: var(--shadow-sm);
  border: 1px solid rgba(34, 40, 49, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex; flex-direction: column;
}
.car-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.car-image {
  width: 100%; height: 200px;
  background: linear-gradient(135deg, rgba(31, 158, 216, 0.1), rgba(75, 181, 232, 0.05));
  object-fit: cover;
}
.car-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.car-type {
  display: inline-block; background: var(--grad); color: var(--white);
  font-size: 0.72rem; font-weight: 700;
  padding: 4px 10px; border-radius: 20px;
  letter-spacing: 0.5px; text-transform: uppercase;
  margin-bottom: 10px; align-self: flex-start;
}
.car-name {
  font-size: 1.25rem; font-weight: 700;
  color: var(--dark-text); margin-bottom: 14px;
}
.car-specs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid rgba(34, 40, 49, 0.08);
}
.car-specs div {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; font-size: 0.78rem;
  color: var(--light-gray); gap: 4px;
}
.car-specs i { color: var(--primary-blue); font-size: 0.95rem; }
.car-pricing { margin-bottom: 16px; }
.car-rate { font-size: 0.85rem; color: var(--light-gray); }
.car-rate strong { color: var(--primary-blue); font-weight: 700; font-size: 1rem; }
.car-total { margin-top: 8px; font-size: 0.9rem; color: var(--dark-text); font-weight: 500; }
.car-total .total-amount { color: var(--primary-blue); font-size: 1.5rem; font-weight: 800; display: inline-block; margin-left: 4px; }
.car-total .total-days { color: var(--light-gray); font-size: 0.8rem; display: block; margin-top: 2px; }
.btn-book {
  background: var(--red); color: var(--white);
  padding: 12px 18px; font-size: 0.9rem; font-weight: 700;
  border-radius: 10px; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  margin-top: auto;
}
.btn-book:hover { background: var(--dark-red); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(227, 6, 19, 0.3); }

/* ===========================================================
   7. BENEFITS
   =========================================================== */
.benefits {
  padding: 80px 0;
  background: linear-gradient(180deg, rgba(31, 158, 216, 0.04) 0%, var(--white) 100%);
}
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.benefit-card {
  background: var(--white); padding: 32px 24px;
  border-radius: 14px; text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(34, 40, 49, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.benefit-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.benefit-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--grad); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin: 0 auto 18px;
}
.benefit-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--dark-text); margin-bottom: 10px; }
.benefit-card p { color: var(--light-gray); font-size: 0.92rem; }

/* ===========================================================
   8. TESTIMONIALS — continuous infinite ribbon
   =========================================================== */
.testimonials {
  padding: 80px 0;
  background: var(--white);
  overflow: hidden;
}
/* The marquee viewport — full-bleed with fade masks on the sides */
.testimonial-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Fade out edges using mask-image */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  padding: 8px 0;
}

/* The track contains 2x the items (original + clones) and scrolls -50% */
.testimonial-track {
  display: flex;
  gap: 28px;
  width: max-content;
  animation: ribbonScroll 50s linear infinite;
  will-change: transform;
}
.testimonial-marquee:hover .testimonial-track { animation-play-state: paused; }

@keyframes ribbonScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.testimonial-card {
  flex: 0 0 360px;
  background: var(--white);
  padding: 28px;
  border-left: 4px solid var(--primary-blue);
  border-radius: 0 12px 12px 0;
  box-shadow: var(--shadow-sm);
  border-top: 1px solid rgba(34, 40, 49, 0.04);
  border-right: 1px solid rgba(34, 40, 49, 0.04);
  border-bottom: 1px solid rgba(34, 40, 49, 0.04);
  display: flex; flex-direction: column;
  /* Disable user interaction with cloned items to avoid double tab focus */
}
.stars { color: var(--primary-blue); margin-bottom: 12px; font-size: 1rem; }
.testimonial-text {
  color: var(--dark-text); font-style: italic;
  margin-bottom: 16px; line-height: 1.7;
  font-size: 0.95rem;
}
.testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.author-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--grad); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0;
}
.author-info strong { display: block; color: var(--dark-text); font-size: 0.95rem; }
.author-info span { color: var(--light-gray); font-size: 0.82rem; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .testimonial-track { animation: none; }
  .lane-dashes rect, .hero-car, .hero-orb { animation: none; }
}

/* ===========================================================
   9. FOOTER
   =========================================================== */
.footer {
  background: var(--dark-text); color: var(--white);
  padding: 40px 0 24px;
}
.footer-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 32px; align-items: start;
}
.footer .logo span { color: var(--red); }
.footer p,
.footer a { color: rgba(255, 255, 255, 0.75); font-size: 0.92rem; }
.footer a:hover { color: var(--lighter-blue); }
.footer-contact { display: flex; flex-direction: column; gap: 8px; }
.footer-contact i { color: var(--lighter-blue); margin-right: 8px; }
.footer-bottom {
  margin-top: 32px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center; color: rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
}

/* ===========================================================
   10. MODAL (shared shell for booking + payment)
   =========================================================== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 38, 56, 0.65);
  backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center;
  z-index: 1000; padding: 20px;
  animation: fadeIn 0.2s ease;
}
.modal-overlay.active { display: flex; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--white);
  border-radius: 18px;
  max-width: 480px; width: 100%;
  padding: 32px;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.28s ease;
  max-height: 90vh; overflow-y: auto;
  position: relative;
  /* Gradient top border consistent with booking panel */
  border-top: 4px solid transparent;
  background-image: linear-gradient(var(--white), var(--white)), var(--grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(34, 40, 49, 0.06);
  color: var(--dark-text);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.modal-close:hover {
  background: var(--red); color: var(--white);
  transform: scale(1.05);
}

.modal-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px; padding-bottom: 16px; padding-right: 40px;
  border-bottom: 1px solid rgba(34, 40, 49, 0.08);
}
.modal-header .icon-circle {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--grad); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.modal-header h3 { font-size: 1.2rem; color: var(--dark-text); font-weight: 700; }

.modal-body { margin-bottom: 24px; }
.modal-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px dashed rgba(34, 40, 49, 0.08);
  font-size: 0.95rem; gap: 12px;
}
.modal-row:last-child { border-bottom: none; }
.modal-row .label { color: var(--light-gray); font-weight: 500; }
.modal-row .value { color: var(--dark-text); font-weight: 600; text-align: right; }
.modal-row.total .value { color: var(--primary-blue); font-size: 1.25rem; font-weight: 800; }
.modal-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.btn-cancel {
  background: transparent; color: var(--dark-text);
  border: 1.5px solid rgba(34, 40, 49, 0.15);
  padding: 12px 18px; border-radius: 10px;
  font-weight: 600; font-size: 0.92rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.btn-cancel:hover { background: rgba(34, 40, 49, 0.04); border-color: rgba(34, 40, 49, 0.3); }

/* ===========================================================
   11. PAYMENT MODAL
   =========================================================== */
.modal-payment { max-width: 520px; }

/* Booking summary chip */
.payment-summary {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, rgba(31, 158, 216, 0.06), rgba(75, 181, 232, 0.04));
  border: 1px solid rgba(24, 127, 176, 0.18);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 18px;
}
.ps-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.9rem; color: var(--dark-text);
}
.ps-meta i {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--grad); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ps-meta strong { font-weight: 700; }
.ps-total { text-align: right; }
.ps-total span { display: block; font-size: 0.72rem; color: var(--light-gray); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.ps-total strong { color: var(--primary-blue); font-size: 1.2rem; font-weight: 800; }

/* Tabs */
.payment-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  background: rgba(34, 40, 49, 0.04);
  border-radius: 12px;
  padding: 5px;
  margin-bottom: 22px;
}
.pay-tab {
  background: transparent;
  padding: 10px 8px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dark-text);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.pay-tab i { font-size: 0.95rem; color: var(--primary-blue); transition: color 0.2s ease; }
.pay-tab:hover { background: rgba(255, 255, 255, 0.6); }
.pay-tab.active {
  background: var(--white);
  color: var(--primary-blue);
  box-shadow: 0 2px 8px rgba(24, 127, 176, 0.15);
}
.pay-tab.active i { color: var(--primary-blue); }

/* Panels */
.pay-panel { display: none; animation: panelFade 0.25s ease; }
.pay-panel.active { display: block; }
@keyframes panelFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pay-blurb {
  font-size: 0.88rem;
  color: var(--light-gray);
  background: rgba(24, 127, 176, 0.05);
  border-left: 3px solid var(--primary-blue);
  padding: 12px 14px;
  border-radius: 0 10px 10px 0;
  margin-bottom: 18px;
  display: flex; align-items: flex-start; gap: 10px;
  line-height: 1.55;
}
.pay-blurb i { color: var(--primary-blue); margin-top: 2px; flex-shrink: 0; }

.pay-field { margin-bottom: 16px; position: relative; }
.pay-field label {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 600;
  color: var(--dark-text); text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 8px;
}
.pay-field label i { color: var(--primary-blue); font-size: 0.85rem; }
.pay-field input {
  width: 100%; padding: 13px 14px;
  font-size: 0.95rem; font-family: inherit;
  color: var(--dark-text); background: var(--white);
  border: 1.5px solid rgba(34, 40, 49, 0.12);
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.pay-field input::placeholder { color: #aab1ba; }
.pay-field input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(24, 127, 176, 0.15);
}
.pay-field input.invalid {
  border-color: var(--red);
  background: rgba(227, 6, 19, 0.02);
}
.pay-field input.invalid:focus { box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.12); }
.pay-error {
  display: block; color: var(--red);
  font-size: 0.78rem; font-weight: 500;
  margin-top: 6px; min-height: 0; line-height: 1.4;
}

.pay-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}

/* M-Pesa phone with prefix */
.phone-input {
  display: flex; align-items: stretch;
  border: 1.5px solid rgba(34, 40, 49, 0.12);
  border-radius: 10px; overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.phone-input:focus-within {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(24, 127, 176, 0.15);
}
.phone-prefix {
  display: flex; align-items: center;
  padding: 0 14px;
  background: rgba(24, 127, 176, 0.08);
  color: var(--primary-blue);
  font-weight: 700; font-size: 0.92rem;
  border-right: 1px solid rgba(34, 40, 49, 0.08);
}
.phone-input input {
  border: none !important; box-shadow: none !important;
  border-radius: 0 !important; flex: 1;
}
.phone-input input:focus { box-shadow: none !important; }
.pay-field input.invalid + .pay-error,
.phone-input + .pay-error { display: block; }

/* M-Pesa info row (amount to pay) */
.pay-info-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px;
  background: rgba(24, 127, 176, 0.05);
  border-radius: 10px;
  margin-bottom: 18px;
}
.pay-info-row span { color: var(--light-gray); font-size: 0.88rem; font-weight: 500; }
.pay-info-row strong { color: var(--primary-blue); font-size: 1.15rem; font-weight: 800; }

/* Submit button with loader */
.pay-submit {
  width: 100%;
  margin-top: 4px;
  padding: 14px 24px;
  min-height: 50px;
}
.pay-submit .btn-loader {
  display: none; align-items: center; gap: 8px;
}
.pay-submit.loading .btn-label { display: none; }
.pay-submit.loading .btn-loader { display: inline-flex; }
.pay-submit .btn-label { display: inline-flex; align-items: center; gap: 8px; }

.pay-fineprint {
  text-align: center;
  color: var(--light-gray);
  font-size: 0.78rem;
  margin-top: 14px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.pay-fineprint i { color: var(--primary-blue); }

/* ===========================================================
   12. CREDIT CARD PREVIEW
   =========================================================== */
.card-preview {
  position: relative;
  background: linear-gradient(135deg, #0a2638 0%, #14516e 60%, #187FB0 100%);
  color: var(--white);
  border-radius: 14px;
  padding: 22px 22px 20px;
  margin-bottom: 22px;
  min-height: 175px;
  box-shadow: 0 12px 28px rgba(10, 38, 56, 0.25);
  overflow: hidden;
}
.card-preview::before {
  content: '';
  position: absolute; top: -50%; right: -30%;
  width: 280px; height: 280px;
  background: var(--red);
  opacity: 0.18;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.card-preview::after {
  content: '';
  position: absolute; bottom: -50%; left: -30%;
  width: 280px; height: 280px;
  background: var(--lighter-blue);
  opacity: 0.25;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.card-preview > * { position: relative; z-index: 1; }

.card-preview-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 26px;
}
.card-brand {
  font-size: 2rem;
  color: var(--white);
  transition: transform 0.3s ease;
}
.card-chip {
  width: 40px; height: 28px;
  background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  position: relative;
}
.card-chip::before {
  content: '';
  position: absolute; inset: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}
.card-chip i {
  position: relative; z-index: 1;
  transform: rotate(90deg);
  font-size: 0.85rem;
}

.card-preview-number {
  font-size: 1.3rem;
  letter-spacing: 2px;
  font-weight: 700;
  font-family: 'Inter', monospace;
  margin-bottom: 22px;
  color: var(--white);
  word-spacing: 4px;
  font-variant-numeric: tabular-nums;
}
.card-preview-foot {
  display: flex; justify-content: space-between; gap: 16px;
  align-items: flex-end;
}
.cp-label {
  display: block;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  margin-bottom: 4px;
}
.card-preview-foot strong {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--white);
}

/* ===========================================================
   13. TOAST
   =========================================================== */
.toast {
  position: fixed;
  bottom: 30px; right: 30px;
  background: var(--white);
  border-left: 4px solid #16a34a;
  color: var(--dark-text);
  padding: 14px 20px;
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 12px;
  font-size: 0.92rem; font-weight: 500;
  z-index: 1100;
  transform: translateY(100px);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
  max-width: 380px;
}
.toast.active { transform: translateY(0); opacity: 1; }
.toast i { color: #16a34a; font-size: 1.3rem; flex-shrink: 0; }

/* ===========================================================
   FOOTER — redesigned
   =========================================================== */
.footer {
  position: relative;
  background: linear-gradient(180deg, #0a2638 0%, #061a28 100%);
  color: var(--white);
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}

/* ---------- Decorative background ---------- */
.footer-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.footer-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}
.footer-orb.fo-1 {
  top: -100px; right: -80px;
  width: 360px; height: 360px;
  background: var(--lighter-blue);
  opacity: 0.15;
}
.footer-orb.fo-2 {
  bottom: -150px; left: -100px;
  width: 380px; height: 380px;
  background: var(--red);
  opacity: 0.08;
}
.footer-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.7;
}

/* ===========================================================
   NEWSLETTER BANNER
   =========================================================== */
.footer-newsletter {
  padding: 50px 0;
  background: linear-gradient(135deg, #14516e 0%, #187FB0 100%);
  position: relative;
  overflow: hidden;
}
.footer-newsletter::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 280px; height: 280px;
  background: var(--red);
  opacity: 0.15;
  border-radius: 50%;
  filter: blur(60px);
}
.footer-newsletter::after {
  content: '';
  position: absolute;
  bottom: -120px; left: -100px;
  width: 320px; height: 320px;
  background: var(--white);
  opacity: 0.06;
  border-radius: 50%;
  filter: blur(70px);
}
.newsletter-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.newsletter-text {}
.newsletter-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
  font-size: 0.78rem; font-weight: 700;
  padding: 7px 14px; border-radius: 20px;
  letter-spacing: 0.6px; text-transform: uppercase;
  margin-bottom: 14px;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.newsletter-tag i { font-size: 0.85rem; }
.newsletter-text h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 1.15;
  color: var(--white);
  margin-bottom: 8px;
}
.newsletter-text p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
  max-width: 460px;
}

/* Newsletter form */
.newsletter-form { width: 100%; }
.newsletter-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--white);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 12px 30px rgba(10, 38, 56, 0.3);
}
.newsletter-input-wrap > i {
  position: absolute;
  left: 20px;
  color: var(--primary-blue);
  font-size: 1rem;
  pointer-events: none;
}
.newsletter-input-wrap input {
  flex: 1;
  border: none;
  outline: none;
  padding: 14px 16px 14px 46px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--dark-text);
  background: transparent;
  border-radius: 10px;
  min-width: 0;
}
.newsletter-input-wrap input::placeholder { color: #aab1ba; }
.newsletter-input-wrap button {
  background: var(--red);
  color: var(--white);
  padding: 12px 22px;
  font-size: 0.92rem; font-weight: 700;
  border-radius: 10px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 0.2s ease, transform 0.15s ease, gap 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.newsletter-input-wrap button:hover {
  background: var(--dark-red);
  transform: translateY(-1px);
  gap: 12px;
}
.newsletter-msg {
  margin-top: 12px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.95);
  display: flex; align-items: center; gap: 8px;
  min-height: 20px;
}

/* ===========================================================
   MAIN FOOTER GRID
   =========================================================== */
.footer-main {
  padding: 60px 0 36px;
  display: grid;
  grid-template-columns: 1.4fr 0.85fr 0.85fr 1.1fr;
  gap: 44px;
}
.footer-col {}
.footer-brand-col { display: flex; flex-direction: column; gap: 18px; }

.footer-logo {
  color: var(--white);
  margin-bottom: 4px;
}
.footer-logo span { color: var(--red); }

.footer-tagline {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
  line-height: 1.65;
  margin-bottom: 4px;
}

/* Trust badges */
.trust-badges {
  display: flex; flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.trust-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  width: fit-content;
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.trust-badge:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
.trust-badge i {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--grad);
  color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  flex-shrink: 0;
}

/* Footer socials */
.footer-socials {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 6px;
}
.footer-socials a {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.footer-socials a:hover {
  background: var(--grad);
  border-color: transparent;
  color: var(--white);
  transform: translateY(-3px);
}

/* Footer column headings */
.footer-heading {
  position: relative;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 22px;
  padding-bottom: 12px;
}
.heading-bar {
  position: absolute;
  bottom: 0; left: 0;
  width: 32px; height: 3px;
  background: var(--red);
  border-radius: 2px;
}
.heading-bar::after {
  content: '';
  position: absolute;
  top: 0; left: 38px;
  width: 12px; height: 3px;
  background: var(--lighter-blue);
  border-radius: 2px;
  opacity: 0.6;
}

/* Footer link lists */
.footer-links {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 10px;
}
.footer-links a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color 0.2s ease, gap 0.2s ease;
  text-decoration: none;
}
.footer-links a i {
  font-size: 0.6rem;
  color: var(--primary-blue);
  transition: transform 0.2s ease, color 0.2s ease;
}
.footer-links a:hover {
  color: var(--white);
  gap: 12px;
}
.footer-links a:hover i {
  transform: translateX(2px);
  color: var(--lighter-blue);
}
.link-tag {
  background: var(--red);
  color: var(--white);
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-left: 4px;
}

/* Contact list (right column) */
.footer-contact-list {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 14px;
}
.footer-contact-list li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fc-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--lighter-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.footer-contact-list li:hover .fc-icon {
  background: var(--grad);
  border-color: transparent;
  color: var(--white);
}
.fc-meta { display: flex; flex-direction: column; min-width: 0; }
.fc-meta span {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.fc-meta a {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--white);
  text-decoration: none;
  word-break: break-word;
  transition: color 0.2s ease;
}
.fc-meta a:hover { color: var(--lighter-blue); }

/* ===========================================================
   APP DOWNLOAD + PAYMENT STRIP
   =========================================================== */
.footer-strip {
  display: grid;
  grid-template-columns: auto 1px 1fr;
  align-items: center;
  gap: 36px;
  padding: 26px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.strip-block { display: flex; flex-direction: column; gap: 12px; }
.strip-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.strip-divider {
  width: 1px;
  height: 60px;
  background: rgba(255, 255, 255, 0.1);
  align-self: center;
}

/* App store buttons */
.app-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.app-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  text-decoration: none;
  color: var(--white);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  min-width: 150px;
}
.app-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
}
.app-btn > i { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.app-btn > span { display: flex; flex-direction: column; line-height: 1.2; }
.app-btn small {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
}
.app-btn strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
}

/* Payment row */
.payment-row {
  display: flex; gap: 10px; flex-wrap: wrap;
  align-items: center;
}
.pay-icon {
  width: 44px; height: 30px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.1rem;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  cursor: default;
}
.pay-icon:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  transform: translateY(-2px);
}

/* ===========================================================
   BOTTOM BAR
   =========================================================== */
.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
}
.bottom-left p {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}
.legal-links {
  list-style: none;
  display: flex; gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.legal-links li:not(:last-child)::after {
  content: '·';
  color: rgba(255, 255, 255, 0.3);
  margin-left: 8px;
}
.legal-links a {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}
.legal-links a:hover { color: var(--lighter-blue); }
.bottom-right {
  display: flex; align-items: center; gap: 14px;
  justify-content: flex-end;
}
.made-in {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}
.made-in i {
  color: var(--red);
  font-size: 0.85rem;
  animation: heartBeat 1.8s ease-in-out infinite;
}
@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

/* Back-to-top button */
.back-to-top {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--grad);
  color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.2s ease;
  box-shadow: 0 6px 16px rgba(31, 158, 216, 0.35);
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(31, 158, 216, 0.5);
}

/* ===========================================================
   FOOTER RESPONSIVE
   =========================================================== */
@media (max-width: 1100px) {
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 36px 32px;
    padding: 50px 0 30px;
  }
  .footer-brand-col { grid-column: 1 / -1; }
}

@media (max-width: 850px) {
  .footer-newsletter { padding: 40px 0; }
  .newsletter-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }
  .newsletter-text p { margin-left: auto; margin-right: auto; }
  .newsletter-tag { margin-left: auto; margin-right: auto; }

  .footer-strip {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 0;
  }
  .strip-divider { display: none; }

  .footer-bottom {
    grid-template-columns: 1fr;
    gap: 14px;
    text-align: center;
    padding: 20px 0 24px;
  }
  .bottom-left p { text-align: center; }
  .legal-links { justify-content: center; }
  .bottom-right { justify-content: center; }
}

@media (max-width: 600px) {
  .footer-main {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-brand-col { grid-column: auto; }

  /* Stack input + button vertically on tiny screens */
  .newsletter-input-wrap {
    flex-direction: column;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 10px;
    gap: 8px;
  }
  .newsletter-input-wrap > i {
    top: 24px; left: 22px;
  }
  .newsletter-input-wrap input {
    background: var(--white);
    border-radius: 10px;
    width: 100%;
    padding: 14px 16px 14px 46px;
  }
  .newsletter-input-wrap button {
    width: 100%;
    justify-content: center;
    padding: 14px 22px;
  }

  .app-buttons { flex-direction: column; }
  .app-btn { width: 100%; justify-content: center; min-width: auto; }

  .footer-socials a { width: 36px; height: 36px; font-size: 0.9rem; }
}

@media (max-width: 480px) {
  .footer-newsletter { padding: 32px 0; }
  .footer-main { padding: 40px 0 26px; }
  .trust-badge { font-size: 0.78rem; padding: 7px 12px; }
  .footer-heading { margin-bottom: 18px; font-size: 0.85rem; }
  .pay-icon { width: 40px; height: 28px; font-size: 1rem; }
  .legal-links { gap: 6px; }
  .legal-links a { font-size: 0.78rem; }
}

/* ===========================================================
   14. RESPONSIVE
   =========================================================== */
@media (max-width: 850px) {
  .nav-links {
    display: none; position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    background: var(--white);
    padding: 20px 24px; gap: 16px;
    box-shadow: var(--shadow-md);
    align-items: stretch;
  }
  .nav-links.open { display: flex; }
  .nav-cta { text-align: center; }
  .nav-toggle { display: block; }

  .logo-img { height: 36px; max-width: 52px; }
  .logo { font-size: 1.3rem; gap: 10px; }

  .hero { padding: 50px 0 50px; }
  .booking-grid { grid-template-columns: 1fr; gap: 14px; }
  .booking-panel { padding: 22px; }
  .vehicles, .benefits, .testimonials { padding: 60px 0; }
  .vehicle-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
  }
  .footer-inner { grid-template-columns: 1fr; gap: 24px; }

  .modal { padding: 28px 24px; }
  .modal-actions { grid-template-columns: 1fr; }

  /* Tone down hero animations for performance */
  .hc-2, .hc-3 { display: none; }
  .hero-orb-c { display: none; }

  /* Testimonial cards smaller on tablet */
  .testimonial-card { flex-basis: 320px; padding: 24px; }

  .toast { bottom: 20px; right: 20px; left: 20px; max-width: none; }
}
/* =========================================================
   GLOBAL ADDITIONS for styles.css
   Append these to the END of your existing styles.css file.
   They power the new landing page sections AND can be reused
   on other pages (about, services, contact, etc.)
   ========================================================= */

/* ===========================================================
   1. SECTION TAG — small pill above section headings
   Used in: categories, destinations, showcase, stats, reviews,
   FAQ, CTA banner. Reuse on any page above an <h2>.
   =========================================================== */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  background: rgba(31, 158, 216, 0.1);
  color: var(--primary-blue);
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.section-tag i { font-size: 0.78rem; }

/* When used inside a centred .section-head, this aligns it nicely */
.section-tag.center {
  display: inline-flex;
  margin-left: auto;
  margin-right: auto;
}

/* Light variant — for use on dark/gradient backgrounds */
.section-tag.light {
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

/* ===========================================================
   2. GRADIENT TEXT — light variant for dark backgrounds
   .grad-text already exists in your styles.css.
   This is the light-on-dark counterpart used in newsletter
   banner, CTA banner, and stats band.
   =========================================================== */
.grad-text-light {
  background: linear-gradient(135deg, #4BB5E8 0%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

/* ===========================================================
   3. LOADER LOGO — image sizing across screen aspect ratios
   Drop this if you also want the loader styles globally.
   The .loader-logo container uses min(vw, px) so it scales
   on phones AND caps on huge desktop monitors.
   =========================================================== */
.loader-logo {
  position: relative;
  text-align: center;
  width: min(60vw, 240px);   /* 60% of viewport width, max 240px */
  max-width: 100%;
}
.loader-word {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.loader-logo-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 220px;          /* desktop cap */
  max-height: 120px;
  object-fit: contain;        /* never stretches the logo */
  user-select: none;
  -webkit-user-drag: none;
}

/* Tablet — slightly smaller */
@media (max-width: 850px) {
  .loader-logo { width: min(55vw, 200px); }
  .loader-logo-img { max-width: 180px; max-height: 100px; }
}

/* Phone */
@media (max-width: 600px) {
  .loader-logo { width: min(50vw, 180px); }
  .loader-logo-img { max-width: 160px; max-height: 88px; }
}

/* Very small phones */
@media (max-width: 480px) {
  .loader-logo { width: min(45vw, 140px); }
  .loader-logo-img { max-width: 130px; max-height: 70px; }
}

/* ===========================================================
   4. NAVBAR LOGO IMAGE — keep it tidy at every breakpoint
   If your .logo-img class already exists in styles.css and
   sizes the navbar logo, you can SKIP this block.
   Otherwise paste it to lock the size globally.
   =========================================================== */
.logo .logo-img {
  height: 32px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  display: block;
}
@media (max-width: 850px) {
  .logo .logo-img { height: 28px; max-width: 120px; }
}
@media (max-width: 480px) {
  .logo .logo-img { height: 26px; max-width: 100px; }
}

/* Footer logo — slightly larger */
.footer-logo .logo-img {
  height: 38px;
  max-width: 160px;
}
@media (max-width: 850px) {
  .footer-logo .logo-img { height: 34px; max-width: 140px; }
}

/* ===========================================================
   5. SECTION HEAD — centre alignment helper
   Used everywhere — gives every section a consistent rhythm.
   =========================================================== */
.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 44px;
}
.section-head h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.15;
  color: var(--dark-text);
  margin: 0 0 12px;
}
.section-head > p {
  color: var(--light-gray);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 850px) {
  .section-head { margin-bottom: 32px; }
}

/* ===========================================================
   6. UTILITIES — small helpers you may want globally
   =========================================================== */

/* Universal smooth scroll */
html { scroll-behavior: smooth; }

/* Image sane defaults — prevents layout shifts */
img { max-width: 100%; height: auto; }

/* Selection colour — matches brand */
::selection {
  background: rgba(31, 158, 216, 0.25);
  color: var(--dark-text);
}

/* Disabled state for buttons */
button:disabled,
.btn-cta:disabled,
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Focus-visible ring for keyboard navigation (accessibility) */
:focus-visible {
  outline: 2px solid var(--light-blue);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn-cta:focus-visible,
.btn-primary:focus-visible,
.nav-cta:focus-visible {
  outline-offset: 4px;
}
/* =========================================================
   MARVEL — Global Navbar  (v3 — fixed)
   Paste into css/styles.css.

   ROOT ISSUES FIXED vs previous version
   ──────────────────────────────────────
   A) background-image/background-clip gradient border trick
      fought with background:var(--white) → sheet background
      was transparent / invisible on some browsers.
      FIX: gradient top strip is now a dedicated ::before
      pseudo (absolutely positioned, above the sheet).

   B) Drag-handle pill was also a ::before → collided with A.
      FIX: drag pill removed; the gradient strip itself acts
      as the visual "handle" cue at the top of the sheet.

   C) .nav-links a::after { display:none } blocked the
      is-active left-bar on mobile because the same ::after
      was being reused.
      FIX: mobile active indicator uses ::before with
      order:−1 so it sits left without fighting the
      right-side chevron which also used ::before.
      Properly scoped so desktop/mobile never interfere.

   D) Both the nav-link AND the "Book now" CTA could both
      match is-active on booking.html.
      FIX: setActiveNav() in booking.html already uses
      data-nav; the CTA uses data-nav="booking-cta" so
      it never receives is-active from the page-matcher.

   E) .nav-links li opacity:0 caused a flash on desktop
      because the stagger rule had no guard.
      FIX: stagger opacity only inside @media (max-width:900px).
   ========================================================= */

/* ---------------------------------------------------------
   1. NAVBAR SHELL
   --------------------------------------------------------- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
          backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(10, 38, 56, 0.07);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.navbar.scrolled {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 4px 24px rgba(10, 38, 56, 0.09);
}

.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ---------------------------------------------------------
   2. LOGO
   --------------------------------------------------------- */
.navbar .logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 1px;
  color: var(--dark-text);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.navbar .logo:hover { transform: translateY(-1px); }
.navbar .logo .logo-img { width: 32px; height: 32px; object-fit: contain; }

/* ---------------------------------------------------------
   3. DESKTOP NAV LINKS
   --------------------------------------------------------- */
.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
}
.nav-links li { margin: 0; }

.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 9px 15px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--dark-text);
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap;
  outline: none;
  transition: color 0.22s ease, background 0.22s ease;
}

/* Desktop underline: grows from centre */
.nav-links a::after {
  content: '';
  position: absolute;
  left: 15px; right: 15px; bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--primary-blue);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  transform: scaleX(1);
}

/* Active page — desktop */
.nav-links a.is-active { color: var(--primary-blue); }
.nav-links a.is-active::after { transform: scaleX(1); }

/* "Book now" CTA pill */
.nav-links a.nav-cta {
  margin-left: 10px;
  padding: 9px 20px;
  background: var(--grad);
  color: var(--white) !important;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(31, 158, 216, 0.3);
  transition: transform 0.2s ease, box-shadow 0.22s ease, filter 0.22s ease;
}
/* CTA never shows the underline or gets coloured by is-active */
.nav-links a.nav-cta::after { display: none !important; }
.nav-links a.nav-cta.is-active { color: var(--white) !important; }
.nav-links a.nav-cta:hover,
.nav-links a.nav-cta:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: 0 8px 20px rgba(31, 158, 216, 0.42);
  color: var(--white) !important;
}

/* ---------------------------------------------------------
   4. HAMBURGER TOGGLE
   --------------------------------------------------------- */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: transparent;
  border: 1.5px solid rgba(10, 38, 56, 0.12);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.nav-toggle:hover {
  background: rgba(31, 158, 216, 0.08);
  border-color: var(--light-blue);
}
.nav-toggle:active { transform: scale(0.93); }

.nav-toggle-bars {
  position: relative;
  width: 20px; height: 14px;
  display: block;
  pointer-events: none;
}
.nav-toggle-bars span {
  position: absolute;
  left: 0; width: 100%;
  height: 2px;
  background: var(--dark-text);
  border-radius: 2px;
  transition:
    top      0.32s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    opacity  0.18s ease,
    background 0.22s ease;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 6px; }
.nav-toggle-bars span:nth-child(3) { top: 12px; }

.nav-toggle.open .nav-toggle-bars span:nth-child(1) {
  top: 6px; transform: rotate(45deg); background: var(--primary-blue);
}
.nav-toggle.open .nav-toggle-bars span:nth-child(2) {
  opacity: 0; transform: scaleX(0);
}
.nav-toggle.open .nav-toggle-bars span:nth-child(3) {
  top: 6px; transform: rotate(-45deg); background: var(--primary-blue);
}

/* ---------------------------------------------------------
   5. BACKDROP
   --------------------------------------------------------- */
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 38, 56, 0.5);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.28s ease;
  cursor: pointer;
}
.nav-backdrop.active { opacity: 1; }
body.nav-open { overflow: hidden; }

/* ---------------------------------------------------------
   6. MOBILE SHEET — bottom-anchored
   The sheet is a <ul> with position:fixed.
   Pseudos used:
     ::before → drag-pill / gradient top strip (position:absolute)
   Each <a> uses:
     ::before → left active-bar  (only on .is-active, mobile only)
     ::after  → right chevron    (only on non-CTA links, mobile only)
   --------------------------------------------------------- */
@media (max-width: 900px) {

  .nav-toggle  { display: inline-flex; }
  .nav-backdrop { display: block; }

  /* ── THE SHEET ── */
  .nav-links {
    position: fixed;
    left: 12px; right: 12px;
    bottom: 12px; top: auto;

    flex-direction: column;
    align-items: stretch;
    gap: 2px;

    /* Solid white background — no background-image tricks */
    background: var(--white);
    border-radius: 22px;
    border: 1.5px solid rgba(10, 38, 56, 0.08);
    box-shadow:
      0 28px 60px rgba(10, 38, 56, 0.30),
      0  8px 20px rgba(10, 38, 56, 0.14);

    /* Padding: 26px top leaves room for the ::before gradient strip */
    padding: 26px 10px 14px;

    /* Start off-screen */
    transform: translateY(calc(100% + 28px));
    opacity: 0;
    pointer-events: none;
    transition:
      transform 0.42s cubic-bezier(0.34, 1.46, 0.64, 1),
      opacity   0.25s ease;
    z-index: 999;

    max-height: 82dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    /* ::before needs a positioning context */
    /* NOTE: overflow must NOT be hidden here or ::before clips */
  }
  .nav-links::-webkit-scrollbar { display: none; }

  /* Gradient top strip + drag-pill in one pseudo */
  .nav-links::before {
    content: '';
    position: absolute;
    /* Gradient strip: full-width, 3px tall, right on the top edge */
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--grad);
    border-radius: 22px 22px 0 0;
    pointer-events: none;
    /* We layer a drag-pill on top via box-shadow — no extra element needed */
    box-shadow: 0 10px 0 0 rgba(10, 38, 56, 0.0); /* transparent spacer */
  }
  /* Drag handle pill — sits below the gradient strip */
  .nav-links::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%; transform: translateX(-50%);
    width: 36px; height: 4px;
    background: rgba(10, 38, 56, 0.15);
    border-radius: 2px;
    pointer-events: none;
  }

  /* Open state */
  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* ── LIST ITEMS — staggered (ONLY inside mobile breakpoint) ── */
  .nav-links li {
    width: 100%;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.26s ease, transform 0.26s ease;
  }
  .nav-links.open li              { opacity: 1; transform: translateY(0); }
  .nav-links.open li:nth-child(1) { transition-delay: 0.05s; }
  .nav-links.open li:nth-child(2) { transition-delay: 0.09s; }
  .nav-links.open li:nth-child(3) { transition-delay: 0.13s; }
  .nav-links.open li:nth-child(4) { transition-delay: 0.17s; }
  .nav-links.open li:nth-child(5) { transition-delay: 0.21s; }
  .nav-links.open li:nth-child(6) { transition-delay: 0.25s; }
  .nav-links.open li:nth-child(7) { transition-delay: 0.29s; }
  .nav-links.open li:nth-child(8) { transition-delay: 0.33s; }

  /* ── MOBILE LINK ROWS ── */
  .nav-links a {
    display: flex;
    align-items: center;
    position: relative;           /* for the ::before active bar */
    width: 100%;
    padding: 15px 16px 15px 22px; /* 22px left — room for the active bar */
    font-size: 0.97rem;
    font-weight: 600;
    color: var(--dark-text);
    border-radius: 12px;
    background: transparent;
    transition: background 0.18s ease, color 0.18s ease;
  }

  /* Kill the desktop underline */
  .nav-links a::after {
    display: none;
  }

  /* Right-side chevron — reuse ::after since desktop ::after is hidden */
  .nav-links a:not(.nav-cta)::after {
    display: block;
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.68rem;
    color: rgba(10, 38, 56, 0.22);
    margin-left: auto;
    padding-left: 8px;
    position: static;    /* override the desktop absolute positioning */
    width: auto; height: auto;
    background: none;
    border-radius: 0;
    transform: none;
    transition: transform 0.18s ease, color 0.18s ease;
  }

  .nav-links a:hover,
  .nav-links a:active {
    background: rgba(31, 158, 216, 0.07);
    color: var(--primary-blue);
  }
  .nav-links a:hover:not(.nav-cta)::after,
  .nav-links a:active:not(.nav-cta)::after {
    transform: translateX(3px);
    color: var(--primary-blue);
  }

  /* ── ACTIVE PAGE — mobile ── */
  .nav-links a.is-active {
    background: linear-gradient(to right,
      rgba(31, 158, 216, 0.12) 0%,
      rgba(31, 158, 216, 0.03) 100%
    );
    color: var(--primary-blue);
  }

  /* Left-side accent bar via ::before */
  .nav-links a.is-active::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%; transform: translateY(-50%);
    width: 3px; height: 20px;
    background: var(--grad);
    border-radius: 2px;
    pointer-events: none;
    /* Override any desktop ::before (there is none on non-CTA links) */
  }
  /* Chevron inherits blue on active */
  .nav-links a.is-active:not(.nav-cta)::after {
    color: var(--primary-blue);
  }

  /* ── CTA in the sheet ── */
  .nav-links a.nav-cta {
    margin: 8px 0 0;
    padding: 15px 20px;
    justify-content: center;
    border-radius: 12px;
    font-size: 0.97rem;
    box-shadow: 0 5px 16px rgba(31, 158, 216, 0.28);
  }
  /* CTA: no chevron, no active bar, ever */
  .nav-links a.nav-cta::before { display: none !important; }
  .nav-links a.nav-cta::after  { display: none !important; }
  .nav-links a.nav-cta.is-active {
    background: var(--grad);
    color: var(--white) !important;
  }
  .nav-links a.nav-cta:hover,
  .nav-links a.nav-cta:active {
    filter: brightness(1.06);
    color: var(--white) !important;
    transform: none;
    box-shadow: 0 8px 22px rgba(31, 158, 216, 0.42);
  }

  /* Thin rule above the CTA row */
  .nav-links li:last-child {
    border-top: 1px solid rgba(10, 38, 56, 0.06);
    padding-top: 6px;
    margin-top: 4px;
  }
}

/* ---------------------------------------------------------
   7. ULTRA-SMALL SCREENS (≤ 380 px)
   --------------------------------------------------------- */
@media (max-width: 380px) {
  .nav-inner { padding: 12px 16px; }
  .navbar .logo { font-size: 1.1rem; }
  .navbar .logo .logo-img { width: 28px; height: 28px; }
  .nav-links {
    left: 8px; right: 8px; bottom: 8px;
    padding: 26px 8px 12px;
    border-radius: 18px;
  }
  .nav-links a { padding: 14px 14px 14px 20px; font-size: 0.93rem; }
}

/* ---------------------------------------------------------
   8. REDUCED MOTION
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nav-links,
  .nav-links li,
  .nav-links a,
  .nav-links a::after,
  .nav-backdrop,
  .nav-toggle-bars span {
    transition: none !important;
    animation: none !important;
  }
  /* Ensure open state still works without animation */
  .nav-links.open {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .nav-links.open li {
    opacity: 1 !important;
    transform: none !important;
  }
}/* ---------------------------------------------------------
   7. ULTRA-SMALL SCREENS — tighten spacing
   --------------------------------------------------------- */
@media (max-width: 380px) {
  .nav-inner { padding: 12px 16px; }
  .navbar .logo { font-size: 1.1rem; }
  .navbar .logo .logo-img { width: 28px; height: 28px; }
  .nav-links {
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 12px 12px 16px;
  }
  .nav-links a {
    padding: 14px 16px;
    font-size: 0.95rem;
  }
}

/* ---------------------------------------------------------
   8. REDUCED MOTION
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nav-links,
  .nav-links a,
  .nav-links a::after,
  .nav-links li,
  .nav-toggle-bars span,
  .nav-backdrop {
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: 600px) {
  .pay-row { grid-template-columns: 1fr; }
  .payment-summary { flex-direction: column; align-items: stretch; gap: 10px; }
  .ps-total { text-align: left; display: flex; justify-content: space-between; align-items: center; }
  .ps-total span { display: inline; }
}

@media (max-width: 480px) {
  .container { padding: 0 18px; }
  .logo-img { height: 32px; max-width: 46px; }
  .logo { font-size: 1.15rem; }
  .car-specs { font-size: 0.72rem; }
  .car-total .total-amount { font-size: 1.3rem; }

  /* Testimonials — make cards narrower */
  .testimonial-card { flex-basis: 280px; padding: 22px; }
  .testimonial-text { font-size: 0.9rem; }

  /* Smaller hero icons */
  .hero-car { font-size: 2rem !important; }

  /* Smaller pay tabs */
  .payment-tabs { gap: 4px; padding: 4px; }
  .pay-tab { font-size: 0.78rem; padding: 9px 6px; flex-direction: column; gap: 4px; }
  .pay-tab i { font-size: 1rem; }

  .modal { padding: 24px 20px; border-radius: 14px; }
  .modal-header h3 { font-size: 1.05rem; }
  .modal-header .icon-circle { width: 38px; height: 38px; font-size: 1rem; }

  .card-preview { padding: 18px; min-height: 155px; }
  .card-preview-number { font-size: 1.1rem; letter-spacing: 1.5px; }
  .card-brand { font-size: 1.6rem; }
}