/* ==========================================================================
   responsive.css — 响应式重排
   设计稿基准宽度 1920px；向下逐级收敛，窄屏改为单列排布
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≤ 1439px —— 画布开始等比收缩，手机模型略缩
   -------------------------------------------------------------------------- */
@media (max-width: 1439px) {
  :root {
    --hero-scale: 0.9;
  }
}

/* --------------------------------------------------------------------------
   ≤ 1279px —— Hero 改为上下结构；优势卡由 4 列变 2 列
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  :root {
    --hero-scale: 0.82;
  }

  .hero__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hero__content {
    align-items: center;
  }

  .hero__badge {
    align-self: center;
  }

  .hero__desc {
    max-width: 720px;
  }

  .hero__actions,
  .hero__stats {
    justify-content: center;
  }

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

/* --------------------------------------------------------------------------
   ≤ 1023px —— 导航折叠为汉堡菜单；双栏板块改单列
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  :root {
    --hero-scale: 0.78;
  }

  /* --- 导航 --- */
  .site-nav {
    position: sticky;
  }

  .nav-toggle {
    display: flex;
  }

  /* 折叠后：品牌靠左，CTA 与汉堡按钮一并靠右 */
  .nav-cta {
    margin-left: auto;
  }

  .nav-links {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px var(--pad-x) 12px;
    background: var(--c-nav-bg);
    border-bottom: 1px solid var(--c-nav-line);
    box-shadow: var(--sh-nav);
  }

  .nav-links__item {
    padding: 14px 0;
    border-bottom: 1px solid rgba(10, 22, 40, 0.08);
  }

  .nav-links__item:last-child {
    border-bottom: 0;
  }

  /* --- 公司简介：单列 --- */
  .about__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .about__grid {
    width: 100%;
    max-width: 640px;
  }

  /* --- Hero：文案居中，视觉在下 --- */
  .hero__content {
    align-items: center;
  }

  .hero__badge {
    align-self: center;
  }

  /* --- 三列卡片：两列 --- */
  .card-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* --- 联系区：单列 --- */
  .contact__card {
    flex-direction: column;
    align-items: stretch;
  }

  .contact__form {
    flex: 1 1 auto;
    width: 100%;
  }

  /* --- 页脚 --- */
  .footer__top {
    flex-wrap: wrap;
  }

  .footer__brand {
    flex: 1 1 100%;
  }

  .footer__col {
    flex: 1 1 180px;
  }
}

/* --------------------------------------------------------------------------
   ≤ 767px —— 三/四列卡片全部单列
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --hero-scale: 0.72;
    --gap-col: 32px;
  }

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

  .case-card__media {
    height: 200px;
  }

  .hero__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .hero__stats {
    gap: 28px;
  }
}

/* --------------------------------------------------------------------------
   ≤ 560px —— 手机模型进一步缩放；页脚单列
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  :root {
    --hero-scale: 0.58; /* 550 视觉区在 375px 屏内完整显示（550×0.58=319 < 375-40） */
    --r-card: 20px;
    --r-lg: 24px;
  }

  /* 窄屏收起品牌文字，仅保留 Logo 标识，为 CTA 与菜单按钮让位 */
  .brand__name {
    display: none;
  }

  .hero__badge {
    padding: 8px 16px;
  }

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

  .contact__card {
    padding: 28px 20px;
  }

  .footer__col {
    flex: 1 1 100%;
  }

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

/* --------------------------------------------------------------------------
   ≤ 420px —— 小屏手机
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  :root {
    --hero-scale: 0.5;
  }
}

/* --------------------------------------------------------------------------
   ≤ 340px —— 极窄屏
   -------------------------------------------------------------------------- */
@media (max-width: 340px) {
  :root {
    --hero-scale: 0.45;
  }
}

/* --------------------------------------------------------------------------
   说明：≥1920px 时内容区由 .section__inner 的 max-width:1600px 自动居中，
   两侧留白对称，无需额外规则。
   -------------------------------------------------------------------------- */