/* ============================================================
   Animations + Responsive
   ============================================================ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.reveal     { animation: fadeUp .8s var(--ease-out) both; }
.reveal.d1  { animation-delay: .05s; }
.reveal.d2  { animation-delay: .12s; }
.reveal.d3  { animation-delay: .2s; }
.reveal.d4  { animation-delay: .28s; }
.reveal.d5  { animation-delay: .36s; }

/* ---------- Tablet (≤ 1100px) ---------- */
@media (max-width: 1100px) {
  .shell { padding: 24px 24px 60px; }

  .nav-center        { gap: 4px; }
  .nav-center a      { padding: 10px 12px; font-size: 13px; }

  .hero-card         { padding: 32px 32px; min-height: 540px; }
  .hero-head         { padding-left: 70px; }
  .hero-stage        { width: 78%; right: -30px; bottom: -30px; }
  .info-card         { right: 32px; bottom: 32px; width: 280px; }

  .fleet             { grid-template-columns: repeat(2, 1fr); }
  .experience        { grid-template-columns: 1fr; }

  .booking           { padding: 36px; gap: 32px; }
  .quote-block       { padding: 44px 36px; }

  .footer-top        { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-top > div:last-child {
    grid-column: span 3;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
}

/* ---------- Mobile (≤ 720px) ---------- */
@media (max-width: 720px) {
  .shell { padding: 16px 14px 48px; }

  .nav                 { grid-template-columns: 1fr auto; gap: 12px; margin-bottom: 28px; }
  .nav-center          { display: none; }
  .nav-right .pill     { display: none; }
  .nav-menu-btn        { display: inline-flex; }
  .mobile-menu.open    { display: flex; }

  .brand-mark          { width: 36px; height: 36px; font-size: 16px; border-radius: 12px; }
  .brand-text .name    { font-size: 17px; }
  .brand-text .sub     { font-size: 9.5px; }

  .hero-card           { padding: 22px 20px; min-height: auto; border-radius: 24px; }
  .hero-head           { padding-left: 0; }
  .hero-eyebrow        { font-size: 10px; }
  .hero-title          { font-size: clamp(38px, 11vw, 56px); }
  .hero-sub            { font-size: 14px; margin-top: 16px; }
  .hero-actions        { margin-top: 22px; gap: 8px; }
  .hero-actions .pill  { padding: 12px 16px; font-size: 13px; }
  .btn-primary         { padding: 12px 18px; font-size: 13px; }

  .rail.left           { position: static; flex-direction: row; flex-wrap: wrap; margin-bottom: 18px; gap: 8px; }
  .rail.left .icon-btn { margin-top: 0 !important; }
  .rail.right          { position: static; flex-direction: row; margin-top: 22px; gap: 8px; flex-wrap: wrap; }
  .rail.right .pill    { padding: 10px 14px; font-size: 12.5px; }

  .hero-stage          { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 24px; }
  .info-card           { position: static; width: 100%; margin-top: 18px; }
  .info-card-head h3   { font-size: 16px; }

  .section-head        { margin-bottom: 22px; }
  .section-title       { font-size: clamp(30px, 8vw, 42px); }
  .section-head p      { font-size: 13.5px; }

  .filters             { padding: 8px; gap: 4px; border-radius: 16px; }
  .filter-chip         { padding: 8px 12px; font-size: 12.5px; }

  .fleet               { grid-template-columns: 1fr; gap: 14px; margin-bottom: 56px; }
  .car-card            { padding: 18px; border-radius: 24px; }
  .car-card h3         { font-size: 20px; }
  .car-card .price     { font-size: 20px; }

  .stats-card          { padding: 28px 22px; min-height: auto; }
  .stats-card h3       { font-size: 22px; }
  .stats-grid          { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; padding-top: 22px; }
  .stat .num           { font-size: 36px; }
  .stat .num span      { font-size: 16px; }
  .stat .lbl           { font-size: 9px; letter-spacing: 0.12em; }

  .perks               { grid-template-columns: 1fr; gap: 12px; }
  .perk                { padding: 20px; }
  .perk h4             { font-size: 17px; }

  .booking             { grid-template-columns: 1fr; padding: 24px 20px; gap: 24px; border-radius: 24px; }
  .booking-form        { padding: 18px; }
  .form-row            { grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
  .form-total          { flex-direction: column; align-items: flex-start; gap: 14px; }
  .form-total .btn-reserve { width: 100%; justify-content: center; }

  .quote-block         { padding: 28px 22px; border-radius: 24px; }
  .quote-mark          { font-size: 120px; top: 12px; right: 18px; }
  .quote-text          { font-size: 19px; }

  footer               { padding: 32px 22px 22px; border-radius: 24px; }
  .footer-brand        { font-size: 32px; }
  .footer-top          { grid-template-columns: 1fr 1fr; gap: 24px; padding-bottom: 24px; }
  .footer-top > div:first-child { grid-column: span 2; }
  .footer-top > div:last-child  { grid-column: span 2; border-top: 0; padding-top: 0; }
  .footer-bottom       { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 18px; font-size: 11px; }
}