@charset "UTF-8";

/* ============ TABLET (<=1024px) ============ */
@media (max-width: 1024px) {
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .flow-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-grid > div:nth-child(4) { grid-column: 1 / -1; }
}

/* ============ NAV / MOBILE (<=860px) ============ */
@media (max-width: 860px) {
  .main-nav ul { display: none; }
  .main-nav .btn { display: none; }
  .nav-toggle { display: flex; }

  .hero { grid-template-columns: 1fr; gap: 48px; padding: 56px 24px 60px; }
  .note-mock { max-width: 400px; margin: 0 auto; }

  .why-row { grid-template-columns: 1fr; gap: 16px; }
  .why-row__content { grid-template-columns: 1fr; gap: 28px; }

  .usecase-grid { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
  .diff-grid { grid-template-columns: 1fr; }
  .diff-item:nth-last-child(-n+2) { border-bottom: none; }
  .diff-item:last-child { border-bottom: 1px solid rgba(22,32,28,.14); }

  .section { padding: 76px 0; }
  .section--band { padding: 76px 0; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:nth-child(4) { grid-column: auto; }
}

/* ============ SMALL PHONE (<=640px) ============ */
@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .flow-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
  .scope-box { overflow-x: auto; }
  .scope-table { min-width: 460px; }
  .hero-cta, .cta-buttons { flex-direction: column; align-items: stretch; }
  .hero-cta .btn, .cta-buttons .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; padding: 48px 20px 32px; }
  .footer-bottom .wrap { flex-direction: column; align-items: flex-start; padding: 20px; }
}

/* Mobile off-canvas nav */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--ink);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  transform: translateY(-100%);
  transition: transform .35s ease;
}
.mobile-nav.is-open { transform: translateY(0); }
.mobile-nav a { font-size: 19px; color: #fff; font-weight: 500; }
.mobile-nav .btn { margin-top: 8px; }
.mobile-nav-close {
  position: absolute;
  top: 24px; right: 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 26px;
  cursor: pointer;
}