/* ==========================================================
   响应式：断点 1100 / 900 / 640
   ========================================================== */

@media (max-width: 1100px) {
  :root { --gutter: 20px; }
  .systems__grid { grid-template-columns: repeat(4, 1fr); }
  .sys { grid-column: span 2; }
  .sys--wide { grid-column: span 4; }
  .features__grid { grid-template-columns: repeat(2, 1fr); }
  .ft--2 { grid-column: span 2; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 900px) {
  .section { padding-block: 76px; }

  /* 导航折叠为抽屉 */
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin: 0;
    padding: 14px 18px 20px;
    background: var(--glass);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility var(--dur-2);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__link { padding: 12px 14px; border-radius: var(--r-sm); font-size: 15px; }
  .nav__link.is-active::after { display: none; }
  .nav__link.is-active { background: var(--surface-2); }

  .nav-toggle { display: grid; }
  .header__actions .btn--sm { display: none; }

  .contact__grid { grid-template-columns: 1fr; }

  .hero { padding-top: calc(var(--header-h) + 48px); padding-bottom: 72px; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; }
  .mock { transform: none; }
  .mock__row { grid-template-columns: 1fr auto; }
  .mock__target { display: none; }

  .section-head { margin-bottom: 40px; }
}

@media (max-width: 640px) {
  .section { padding-block: 60px; }
  .display { font-size: clamp(32px, 9vw, 42px); }

  .systems__grid { grid-template-columns: 1fr; }
  .sys, .sys--wide { grid-column: span 1; }
  .features__grid { grid-template-columns: 1fr; }
  .ft, .ft--2 { grid-column: span 1; }

  .hero__actions .btn,
  .cta__actions > * { width: 100%; }
  .cta { padding: 44px 22px; border-radius: var(--r-xl); }
  .arch { padding: 26px 18px; border-radius: var(--r-lg); }
  .arch__link { width: 56px; }

  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}