/* ==========================================================================
   CRETIFY — responsive rules (desktop-down)
   Breakpoints checked: 1440 / 1280 / 1024 / 768 / 430 / 390 / 360
   ========================================================================== */

@media (max-width: 1280px) {
  :root { --section-y: 96px; }
  .nav__list { gap: 22px; }
}

@media (max-width: 1024px) {
  :root { --section-y: 82px; --gutter: 20px; }

  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .hero__visual { order: 2; }

  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-card--feature { grid-column: span 2; grid-template-columns: 1fr; }

  .project-card { grid-template-columns: 1fr; }
  .project-card__media { border-right: 0; border-bottom: 1px solid var(--line); min-height: 240px; }

  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
}

/* Tablet & mobile navigation */
@media (max-width: 900px) {
  .nav__desktop { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (max-width: 768px) {
  :root { --section-y: 68px; }

  h1 { font-size: clamp(2.1rem, 8vw, 2.9rem); }
  h2 { font-size: clamp(1.6rem, 6vw, 2.1rem); }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .service-card--feature { grid-column: auto; }

  .form__row { grid-template-columns: minmax(0, 1fr); }

  .process__item { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; }
  .process__num { font-size: 1.2rem; }

  .mock__badge { right: 8px; bottom: -16px; font-size: 0.66rem; padding: 10px 13px; }

  .hero__meta { gap: 8px 18px; font-size: 0.7rem; }
}

@media (max-width: 560px) {
  .btn { padding: 13px 20px; font-size: 0.88rem; }
  .btn-row { gap: 10px; }
  .btn-row .btn { flex: 1 1 auto; min-width: 0; }

  .card { padding: 24px; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 46px 30px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .mobile-nav__links a { font-size: 1.4rem; }

  .floating-cta span { display: none; }
  .floating-cta { padding: 13px; }

  .popup__dialog { padding: 24px 18px; }
  .contact-item { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .contact-item__icon { width: 40px; height: 40px; }
}

@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .nav__brand img { height: 28px; }
  .mobile-nav__links a { font-size: 1.25rem; }
}

@media (max-width: 900px) {
  .nav__cta { display: none; }
}