:root {
  --fleet-navy: #081727;
  --fleet-navy-2: #11263c;
  --fleet-copper: #e06a27;
  --fleet-copper-light: #ffb06c;
  --fleet-ivory: #f6f1e7;
  --fleet-ink: #071522;
  --fleet-muted: #697684;
  --fleet-line: rgba(7,21,34,.11);
}

body { overflow-x: hidden; background: #fbfaf7; color: var(--fleet-ink); }
.nav-cta { background: linear-gradient(135deg,var(--fleet-copper-light),var(--fleet-copper)) !important; color: #090909 !important; box-shadow: 0 10px 24px rgba(196,81,25,.22); }

.page-hero { padding: 82px 0 72px; background: linear-gradient(100deg,rgba(4,12,23,.95),rgba(4,12,23,.54)),url('../assets/images/hero/fleet-hero.webp') center 54%/cover; }
.page-hero::before { background: linear-gradient(90deg,rgba(4,12,23,.38),rgba(4,12,23,.06)); }
.page-hero h1 { display: block; width: auto; max-width: 930px; margin: 0 auto 16px; padding: 0; background: transparent; border-radius: 0; box-shadow: none; font: 800 clamp(2.7rem,5.4vw,5.2rem)/.98 Manrope,'Plus Jakarta Sans',sans-serif; letter-spacing: -.055em; }
.page-hero p { display: block; width: auto; max-width: 720px; margin: 0 auto; padding: 0; background: transparent; box-shadow: none; color: rgba(255,255,255,.72); line-height: 1.65; }

.brands-strip { padding: 44px 0 38px; background: #fff; border-color: var(--fleet-line); }
.brands-strip-head { margin-bottom: 26px; }
.brands-eyebrow { color: #ad3f13; }
.brands-eyebrow::before { background: var(--fleet-copper); }
.brands-strip h2 { font: 800 clamp(1.5rem,2.6vw,2.25rem)/1.08 Manrope,sans-serif; letter-spacing: -.035em; }
.brand-mark { width: 78px; height: 48px; }
.brand-mark img { height: 34px; opacity: .52; }

.v11-fleet-catalog { padding: 42px 0 92px !important; background: linear-gradient(180deg,#fbfaf7,#f4efe6); }
.filter-bar { position: sticky; top: 78px; z-index: 20; width: fit-content; max-width: calc(100vw - 32px); margin: 0 auto 34px; padding: 7px; border: 1px solid rgba(7,21,34,.1); border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 14px 36px rgba(7,21,34,.1); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.filter-btn { min-height: 40px; padding: 9px 17px; border: 0; border-radius: 999px; background: transparent; color: #536170; font: 700 .78rem/1 Manrope,sans-serif; letter-spacing: 0; white-space: nowrap; box-shadow: none; }
.filter-btn:hover { border: 0; color: var(--fleet-ink); background: #f2eee8; transform: none; }
.filter-btn.active { border: 0; color: #0a0e12; background: linear-gradient(135deg,var(--fleet-copper-light),var(--fleet-copper)); box-shadow: 0 8px 20px rgba(196,81,25,.22); }

.fleet-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; align-items: stretch; }
.car-card { min-width: 0; border: 1px solid var(--fleet-line); border-radius: 24px; background: rgba(255,255,255,.96); box-shadow: 0 12px 34px rgba(7,21,34,.06); }
.car-card:hover { transform: translateY(-5px); border-color: rgba(224,106,39,.28); box-shadow: 0 25px 60px rgba(7,21,34,.13); }
.car-image { aspect-ratio: 16/10; background: linear-gradient(145deg,#ebe7df,#f9f8f5); }
.car-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.car-image::after { z-index: 1; opacity: 1; background: linear-gradient(180deg,transparent 56%,rgba(7,21,34,.17)); }
.car-card:hover .car-image img { transform: scale(1.035); }
.car-badge { z-index: 4; top: 14px; left: 14px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.45); background: linear-gradient(135deg,var(--fleet-copper-light),var(--fleet-copper)); color: #090d12; box-shadow: 0 8px 22px rgba(7,21,34,.16); }
.brand-badge { top: 14px; right: 14px; z-index: 4; width: 40px; height: 40px; border-color: rgba(7,21,34,.08); box-shadow: 0 8px 22px rgba(7,21,34,.15); }
.brand-badge img { object-fit: contain; transform: none !important; }

.car-body { min-width: 0; padding: 22px 22px 20px; }
.car-class { width: fit-content; color: #a43f15; font: 800 .65rem/1 Manrope,sans-serif; letter-spacing: .14em; }
.car-body h3 { min-height: 2.45em; margin: 7px 0 14px; color: var(--fleet-ink); font: 800 1.22rem/1.2 Manrope,sans-serif; letter-spacing: -.025em; }
.car-specs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-bottom: 14px; }
.car-specs span { min-width: 0; padding: 7px 5px; border: 1px solid rgba(7,21,34,.07); border-radius: 9px; background: #f7f6f2; color: #54616f; font-size: .7rem; line-height: 1.2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.best-for { align-self: flex-start; margin: 0 0 18px; padding: 6px 10px; border-radius: 99px; background: rgba(8,23,39,.06); color: #5b6875; font-size: .7rem; font-weight: 700; }
.car-price { display: flex; align-items: baseline; gap: 3px; margin: auto 0 14px; padding-top: 2px; }
.car-price .amount { color: var(--fleet-ink); font: 800 2rem/1 Manrope,sans-serif; letter-spacing: -.04em; }
.car-price .unit { color: #7b8792; font-size: .76rem; }
.car-actions { grid-template-columns: 1.15fr .85fr; gap: 8px; }
.car-actions .btn { min-width: 0; min-height: 46px; padding: 11px 9px; border-radius: 12px; font: 800 .78rem/1 Manrope,sans-serif; }
.car-actions .btn-dark { border: 0; background: linear-gradient(135deg,var(--fleet-copper-light),var(--fleet-copper)); color: #080c10; box-shadow: 0 10px 24px rgba(196,81,25,.2); }
.car-actions .btn-whatsapp { border: 1px solid rgba(7,21,34,.14); background: #fff; color: #166b41; box-shadow: none; }
.compare-btn { margin-top: 12px; color: #7a8792; font-size: .72rem; }
.compare-btn:hover { color: var(--fleet-ink); }

.compare-table { border: 1px solid var(--fleet-line); border-radius: 20px; box-shadow: 0 18px 50px rgba(7,21,34,.08); }
.compare-table th { background: var(--fleet-navy); }
.bg-pearl { background: #fff; }
.bg-navy { background: var(--fleet-navy); }
.bg-navy .btn-whatsapp { border: 0; background: linear-gradient(135deg,var(--fleet-copper-light),var(--fleet-copper)); color: #090909; box-shadow: 0 14px 32px rgba(196,81,25,.24); }

@media (max-width: 1020px) {
  .fleet-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .filter-bar { justify-content: flex-start; width: auto; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .filter-bar::-webkit-scrollbar { display: none; }
}

@media (max-width: 680px) {
  .page-hero { padding: 54px 0 48px; overflow: hidden; }
  .page-hero .container { width: calc(100% - 36px); padding-inline: 0; }
  .page-hero h1 { width: 100%; max-width: 330px; box-sizing: border-box; font-size: clamp(1.85rem,8.5vw,2.2rem); line-height: 1.04; letter-spacing: -.04em; overflow-wrap: anywhere; }
  .page-hero p { width: 100%; max-width: 330px; box-sizing: border-box; font-size: .86rem; line-height: 1.55; }
  .brands-strip { padding: 34px 0 28px; }
  .brands-strip-head { margin-bottom: 22px; padding-inline: 14px; }
  .brands-strip h2 { max-width: 340px; margin-inline: auto; font-size: 1.45rem; }
  .brands-track { gap: 30px; }
  .brand-mark { width: 64px; height: 42px; }
  .brand-mark img { height: 30px; }
  .v11-fleet-catalog { padding: 24px 0 62px !important; }
  .v11-fleet-catalog,.v11-fleet-catalog > .container,.fleet-grid,.car-card,.car-body { min-width: 0; max-width: 100%; }
  .v11-fleet-catalog > .container { width: calc(100% - 28px); padding-inline: 0; }
  .filter-bar { top: 67px; max-width: 100%; margin-bottom: 22px; border-radius: 15px; }
  .filter-btn { min-height: 38px; padding: 8px 15px; }
  .fleet-grid { grid-template-columns: 1fr; gap: 18px; }
  .car-card { border-radius: 20px; }
  .car-image { aspect-ratio: 16/9; }
  .car-body { padding: 18px 17px 17px; }
  .car-body h3 { min-height: 0; font-size: 1.18rem; }
  .car-specs { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  .car-specs span { padding: 7px 3px; font-size: .68rem; }
  .best-for { margin-bottom: 15px; }
  .car-actions { grid-template-columns: 1fr; }
  .car-actions .btn { width: 100%; min-height: 48px; }
  .compare-table { display: block; width: 100%; overflow-x: auto; white-space: nowrap; border-radius: 16px; }
  .compare-table th,.compare-table td { padding: 13px 14px; font-size: .78rem; }
  .compare-bar { max-width: calc(100vw - 20px); left: 10px; right: 10px; flex-wrap: wrap; }
}