@media (min-width: 1500px) {
  :root { --container: min(1320px, calc(100% - 64px)); }
  .hero { min-height: 900px; }
}

@media (max-width: 1100px) {
  .feature-grid, .steps, .values-grid, .team-grid, .gallery-grid, .ride-list { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .hero-grid, .split, .split.reverse, .contact-grid { grid-template-columns: 1fr; }
  .hero-panel { max-width: 620px; margin: 0 auto; width: 100%; }
  .phone-shell { margin: 0 auto; }
  .blog-layout { grid-template-columns: 1fr; }
  .blog-sidebar { position: static; }
}

@media (max-width: 860px) {
  :root { --container: min(100% - 28px, 1160px); }
  .section { padding: 72px 0; }
  .nav { min-height: 74px; }
  .nav-toggle { display: block; }
  .nav-menu {
    position: fixed;
    left: 14px;
    right: 14px;
    top: 82px;
    display: grid;
    gap: 8px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    transform: translateY(-16px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  }
  .nav-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-link, .nav-menu .btn { width: 100%; justify-content: flex-start; }
  .theme-toggle { border-radius: var(--radius); width: 100%; }
  .hero { min-height: auto; padding: 112px 0 60px; }
  .hero-grid { gap: 34px; }
  .hero-panel { min-height: 470px; }
  .phone-shell { height: 470px; border-radius: 30px; }
  .metric-one { top: 46px; }
  .metric-two { bottom: 44px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .newsletter-box, .newsletter-form { flex-direction: column; align-items: stretch; }
}

@media (max-width: 640px) {
  h1 { font-size: clamp(2.55rem, 16vw, 4rem); }
  h2 { font-size: clamp(1.85rem, 10vw, 2.65rem); }
  .feature-grid, .steps, .values-grid, .team-grid, .stats-grid, .article-grid, .footer-grid, .gallery-grid, .ride-list, .search-grid, .safety-grid { grid-template-columns: 1fr; }
  .hero-actions, .trust-strip { align-items: stretch; flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .hero-panel { min-height: 420px; }
  .phone-shell { width: 100%; height: 420px; padding: 12px; }
  .metric-card { padding: 14px 16px; }
  .metric-card strong { font-size: 1.55rem; }
  .metric-one { left: 0; top: 22px; }
  .metric-two { right: 0; bottom: 22px; }
  .testimonial { padding: 30px 20px; }
  .page-hero { min-height: 390px; padding-top: 120px; }
  .contact-form { padding: 22px; }
  .map-placeholder { min-height: 280px; }
  .pagination { flex-wrap: wrap; }
}