/* Планшет (1024px и меньше) */
@media (max-width: 1024px) {
  .container { padding: 0 15px; }
  .header__inner { padding: 15px 0; }
  .nav__list { gap: 20px; }
  .header__cta { display: none; /* Скрываем CTA на планшетах */ }
}

/* Планшет и мобильные - 768px и меньше */
@media (max-width: 768px) {
  .menu-toggle { display: flex; /* Показываем гамбургер */ }

  /* Основная навигация (скрыта по умолчанию) */
  .nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    height: 100vh;
    background: white;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    padding: 80px 30px 30px;
    transition: right 0.4s ease;
    z-index: 1000;
    overflow-y: auto;
  }

  .nav.active { right: 0; }

  .nav__list { flex-direction: column; gap: 0; }

  .nav__item { width: 100%; }

  .nav__link { display: block; 
    width: 100%; 
    padding: 15px 0; 
    font-size: 18px; /* Увеличиваем для мобильных */ 
    border-bottom: 1px solid #eee; }

  .nav__link:hover, .nav__link.active {
    background: transparent;
    color: var(--primary-color);
    padding-left: 10px;
  }

  /* Затемнение фона при открытом меню */
  .nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
  }

  .nav-overlay.active { display: block; }

  /* Увеличиваем touch-зоны */
  .btn { min-width: 120px; }

  /* Фиксация меню */
  .header { position: sticky; }
}

/* Мобильные (480px и меньше) */
@media (max-width: 480px) {
  .nav { width: 100%; }
  .logo img { width: 100px; height: auto; }
  body { font-size: 17px; /* рекомендация из купертино */ }
}