/* ============================================================
   QCN PRODUCTION — Responsive refinements
   Базовые breakpoints уже заданы в components.css рядом
   с соответствующими блоками. Здесь — сквозные правки.
   ============================================================ */

/* Крупные десктопы */
@media (min-width: 1440px) {
  .container { max-width: 1320px; }
}

/* Планшеты */
@media (max-width: 1024px) {
  .hero { padding-top: var(--space-8); }
}

/* Небольшие планшеты / крупные телефоны */
@media (max-width: 768px) {
  .navbar { height: 64px; }
  .mobile-menu { inset: 64px 0 0 0; }
  .hero-stats { gap: var(--space-5); }
  .project-hero-media { aspect-ratio: 16 / 10; }
}

/* Телефоны */
@media (max-width: 480px) {
  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.7rem; }
  .btn { width: 100%; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .package-card .package-tag { right: var(--space-4); }
}

/* Гарантия отсутствия горизонтального скролла */
html, body { max-width: 100%; overflow-x: hidden; }