/* <=1024px (планшеты) */
@media (max-width: 1024px) {
  .container { padding: 0 15px; }
}

/* <=768px (мобильные и планшеты) */
@media (max-width: 768px) {
  .menu-toggle { display: flex; }

  /* фиксируем шапку */
  .header { position: sticky; top: 0; z-index: 1000; }

  /* выезжающее меню */
  .nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    height: 100vh;
    background: #fff;
    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-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; }

  /* кнопка “Наверх” поближе и чуть меньше */
  .scroll-top {
    width: 52px;
    height: 52px;
    bottom: 20px;
    right: 20px;
    font-size: 22px;
  }
}

/* <=480px (маленькие телефоны) */
@media (max-width: 480px) {
  .nav { width: 100%; }
  body { font-size: 17px; }
}