/* ============================================================
   响应式补充样式 — 移动端适配
   ============================================================ */

/* ── 平板 (≤1024px) ── */
@media (max-width: 1024px) {
  :root { --container-max: 900px; }

  .hero__title { font-size: clamp(2rem, 6vw, 3.5rem); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }

  .product-detail,
  .product-detail--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }

  .product-detail__visual {
    order: -1;
  }
}

/* ── 手机 (≤768px) ── */
@media (max-width: 768px) {
  :root {
    --space-24: 4rem;
    --space-16: 3rem;
    --space-12: 2rem;
  }

  .hero { min-height: 100svh; }
  .hero__desc { font-size: var(--text-base); }

  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }

  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }

  .section-title { font-size: var(--text-2xl); }

  /* 产品 mockup 缩放 */
  .product-mockup { max-width: 300px; }

  /* 页脚 */
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }

  /* CTA Banner */
  .cta-banner__actions {
    flex-direction: column;
    align-items: center;
  }

  .cta-banner__actions .btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }

  /* 联系页 */
  .contact-layout { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* ── 小手机 (≤480px) ── */
@media (max-width: 480px) {
  .container { padding-inline: var(--space-4); }

  .hero__title { font-size: 2rem; }

  .stats__grid { grid-template-columns: repeat(2, 1fr); }

  .product-tabs {
    flex-direction: column;
    align-items: center;
  }

  .product-tab { width: 100%; max-width: 240px; text-align: center; }

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

}

/* ── 超大屏 (≥1400px) ── */
@media (min-width: 1400px) {
  :root { --container-max: 1320px; }
}

/* ── 动效：减少动画（无障碍）── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html { scroll-behavior: auto; }
}

/* ── 高对比度模式 ── */
@media (prefers-contrast: high) {
  :root {
    --color-border: rgba(255,255,255,0.3);
    --color-text-sub: #b0b8cc;
  }
}