/* =============================================================
   PlusBIT Systems — Responsive & mobile behavior
   Layered as max-width overrides. Intermediate widths are tested,
   not only the canonical breakpoints.
   ============================================================= */

/* ---- Large desktop down: ease the bento + 4-up grids ---- */
@media (max-width: 1080px) {
  .specs { grid-template-columns: repeat(2, 1fr); }
  .cats  { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento .tile,
  .bento__feature { grid-column: span 1; }
  .bento__feature { grid-column: span 2; }
  .bento__tall { grid-row: auto; }
}

/* ---- Tablet: stack the big 2-column stories ---- */
@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__content { max-width: 640px; }
  .console { max-width: 460px; }
  .intro__grid,
  .security__grid,
  .wl__grid,
  .about__grid,
  .cta__grid { grid-template-columns: 1fr; }
  .security__grid .creds { order: 2; }
  .journey__track { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

/* ---- Below tablet: switch nav to the mobile sheet ---- */
@media (max-width: 880px) {
  .nav__links,
  .nav__right .btn { display: none; }
  .nav__toggle { display: inline-flex; }
}

/* ---- Phone landscape / small tablet ---- */
@media (max-width: 720px) {
  .feature-split { grid-template-columns: 1fr; }
  .cats { grid-template-columns: 1fr; }
  .creds { grid-template-columns: 1fr; }
  .specs { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .bento__feature { grid-column: span 1; }
  .directory { grid-template-columns: 1fr; }
  .spec { border-right: none; }
  .contact-form__row { grid-template-columns: 1fr; }

  /* architecture pipeline becomes a vertical flow */
  .pipeline__flow { flex-direction: column; align-items: stretch; }
  .pipeline__node { width: 100%; }
  .pipeline__chip { white-space: normal; }
  .pipeline__arrow { transform: rotate(90deg); padding: 0.1rem 0; }
}

/* ---- Phone ---- */
@media (max-width: 560px) {
  .journey__track { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr; }
  .console__stats { grid-template-columns: 1fr 1fr 1fr; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ---- Small phone (down to 320px) ---- */
@media (max-width: 400px) {
  :root { --gutter: 18px; }
  .stats { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .brand__sub { display: none; }
  .console__body { padding: 1rem 1rem 1.1rem; }
}

/* Lock background scroll while the mobile menu is open */
body.nav-open { overflow: hidden; }