/* ============================================================
   移动端瘦身（2026-09-30）
   目标：手机上 10.4 屏 → 6 屏
   手段：
   ① 4 卡竖排 → 2×2 网格（解决什么问题 / 四类员工 / 适用场景 / 核心能力）
   ② 产品界面：小图 2 列（竖排 5 张 → 主图 + 2×2）
   ③ 页脚：4 列 → 2 列
   ④ hero：产品卡压缩高度
   ⑤ 各区块 padding 收紧
   ============================================================ */

/* ===== ≤900px（手机 / 平板）===== */
@media (max-width: 900px) {

  /* ① 4 卡改 2×2 网格（原为 1 列）*/
  .grid4 { grid-template-columns: repeat(2, 1fr) !important; gap: 13px !important; }
  .grid3 { grid-template-columns: repeat(2, 1fr) !important; gap: 13px !important; }
  .grid2 { grid-template-columns: 1fr !important; gap: 13px !important; }

  /* 卡片内边距压缩 */
  .card, .feat, .value-card, .aud-card, .tf-item {
    padding: 17px 15px !important;
  }
  .card h3, .feat h4, .value-card h3, .aud-who, .tf-role { font-size: 14.5px !important; }
  .card p, .feat p, .aud-card p, .tf-job, .value-card p {
    font-size: 12.5px !important; line-height: 1.7 !important;
  }

  /* 图标缩小 */
  .card-ic, .value-ic, .aud-ic, .tf-av {
    width: 40px !important; height: 40px !important;
    border-radius: 11px !important; font-size: 18px !important;
    margin-bottom: 12px !important;
  }
  .feat-n { font-size: 13px !important; padding: 2px 8px !important; margin-bottom: 9px !important; }

  /* 痛点卡（左色条）也改 2×2 */
  .sec-problem .grid2 { grid-template-columns: repeat(2, 1fr) !important; }

  /* ② 四类员工：流程条改 2×2（不竖排长条）*/
  .team-flow {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .tf-item { width: 100% !important; min-width: 0 !important; }
  .sec-employee .tf-arrow { display: none !important; }   /* 网格里隐藏箭头（无方向感）*/

  /* ③ 产品界面：主图 + 小图 2 列 */
  .sec-ui .shot-grid-plus {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 12px !important;
  }
  .sec-ui .shot-grid-plus .shot-item-main {
    grid-column: 1 !important; grid-row: auto !important;
    margin-bottom: 4px;
  }
  /* 小图改成 2 列网格 */
  .sec-ui .shot-grid-plus .shot-item {
    grid-column: auto !important;
    display: block !important;
    padding: 8px !important;
  }
  .sec-ui .shot-grid-plus .shot-item img {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    margin-bottom: 8px;
  }
  .sec-ui .shot-grid-plus .shot-item .shot-cap b { font-size: 12.5px !important; }
  .sec-ui .shot-grid-plus .shot-item .shot-cap span { font-size: 11px !important; -webkit-line-clamp: 2; }
  /* 用 grid 布局容纳 4 个小图（2×2）*/
  .sec-ui .shot-grid-plus {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .sec-ui .shot-grid-plus .shot-item-main {
    grid-column: 1 / -1 !important;      /* 主图横跨整行 */
  }

  /* ④ 页脚：4 列 → 2 列 */
  .ft-in { grid-template-columns: repeat(2, 1fr) !important; gap: 22px !important; }
  .ft-in .ft-col:nth-child(3) { grid-column: 1 / -1; }   /* 联系我们横跨 */
  .ft-qr { width: 88px !important; height: 88px !important; }
  .ft { padding: 38px 0 0 !important; }
  .ft-bar { padding: 15px 0 !important; font-size: 11.5px !important; }

  /* ⑤ hero 压缩 */
  .hero { padding: 44px 0 56px !important; }
  .hero h1 { font-size: 30px !important; letter-spacing: -.8px !important; }
  .hero-sub { font-size: 14.5px !important; margin-bottom: 22px !important; }
  .hero-chips { gap: 8px !important; margin-top: 20px !important; }
  .hero-chips .chip { padding: 6px 12px !important; font-size: 12px !important; }
  .hero-chips .chip b { width: 16px !important; height: 16px !important; font-size: 10px !important; }
  /* 产品卡缩小 */
  .hero-visual > .hv-card { margin-right: 0 !important; transform: none !important; }
  .hv-body { padding: 13px !important; }
  .hv-row { padding: 9px 11px !important; margin-bottom: 7px !important; }
  .hv-txt b { font-size: 12px !important; }
  .hv-txt small { font-size: 10.5px !important; }
  .hv-av { width: 26px !important; height: 26px !important; font-size: 13px !important; }
  .hv-st { font-size: 9.5px !important; padding: 3px 8px !important; }
  .hv-bar { height: 32px !important; }
  .hv-foot { padding: 10px 13px !important; font-size: 10px !important; }
  .hv-prog { margin-top: 10px !important; }

  /* ⑥ 各区块 padding 收紧 */
  .sec { padding: 46px 0 !important; }
  .sec-hd { margin-bottom: 26px !important; }
  .sec-hd h2 { font-size: 22px !important; padding-bottom: 12px !important; }
  .sec-hd h2::after { width: 38px !important; height: 3px !important; }
  .sec-hd p { font-size: 13px !important; line-height: 1.75 !important; }
  .sec-hd .kicker { font-size: 10.5px !important; padding: 4px 11px !important; margin-bottom: 11px !important; }

  /* ⑦ 数据条压缩 */
  .stat-strip { margin: 0 !important; padding: 0 !important; }
  .stat-strip .wrap { padding: 22px 16px !important; gap: 14px !important; }
  .stat-item .n { font-size: 26px !important; margin-bottom: 5px !important; }
  .stat-item .l { font-size: 11px !important; line-height: 1.55 !important; }

  /* ⑧ CTA 压缩 */
  .cta { padding: 48px 0 !important; }
  .cta h2 { font-size: 21px !important; margin-bottom: 10px !important; }
  .cta p { font-size: 13px !important; margin-bottom: 22px !important; }
  .cta .btn { padding: 12px 24px !important; font-size: 14px !important; }

  /* ⑨ 首屏按钮横排（省高度）*/
  .hero-btns { gap: 10px !important; }
  .hero-btns .btn { padding: 12px 22px !important; font-size: 14px !important; width: auto !important; }

  /* ⑩ 引导按钮压缩 */
  .sec .btn-g[href="product.html"], .sec .btn-g[href="download.html"] {
    padding: 11px 20px !important; font-size: 13px !important;
  }
}

/* ===== ≤420px 更紧凑 ===== */
@media (max-width: 420px) {
  .grid4, .grid3, .sec-problem .grid2 { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .card, .feat, .value-card, .aud-card, .tf-item { padding: 14px 12px !important; }
  .card h3, .feat h4, .value-card h3, .aud-who, .tf-role { font-size: 13.5px !important; }
  .card p, .feat p, .aud-card p, .tf-job, .value-card p { font-size: 12px !important; }
  .card-ic, .value-ic, .aud-ic, .tf-av {
    width: 36px !important; height: 36px !important; font-size: 16px !important; margin-bottom: 10px !important;
  }
  .hero h1 { font-size: 26px !important; }
  .hero-sub { font-size: 13.5px !important; }
  .sec-hd h2 { font-size: 20px !important; }
  .stat-item .n { font-size: 23px !important; }
}


/* ===== 追加：产品界面 + 页脚再压（7.5 → 6 屏）===== */
@media (max-width: 900px) {
  /* ① 产品界面：主图更扁 + 小图更小 */
  .sec-ui .shot-item-main > img {
    aspect-ratio: 16 / 8 !important;    /* 更扁（原 16/11）*/
  }
  .sec-ui .shot-item-main::before { height: 26px !important; }
  .sec-ui .shot-item-main .shot-cap { padding: 10px 4px 2px !important; }
  .sec-ui .shot-item-main .shot-cap b { font-size: 13px !important; }
  .sec-ui .shot-item-main .shot-cap span { font-size: 11.5px !important; }
  /* 4 小图：图更小 + 文字一行 */
  .sec-ui .shot-grid-plus { gap: 9px !important; }
  .sec-ui .shot-grid-plus .shot-item { padding: 6px !important; }
  .sec-ui .shot-grid-plus .shot-item img {
    aspect-ratio: 16 / 9 !important;
    margin-bottom: 6px;
  }
  .sec-ui .shot-grid-plus .shot-item .shot-cap b { font-size: 12px !important; }
  .sec-ui .shot-grid-plus .shot-item .shot-cap span {
    font-size: 10.5px !important; -webkit-line-clamp: 1 !important;
  }

  /* ② 页脚：更紧凑 */
  .ft { padding: 30px 0 0 !important; }
  .ft-in { gap: 18px !important; padding-bottom: 26px !important; }
  .ft-logo { font-size: 15px !important; margin-bottom: 8px !important; }
  .ft-desc { font-size: 12px !important; }
  .ft-col h5 { font-size: 12.5px !important; margin-bottom: 11px !important; }
  .ft-col a, .ft-col p { font-size: 12px !important; margin-bottom: 7px !important; line-height: 1.6 !important; }
  .ft-contact { margin-bottom: 7px !important; }
  .ft-contact span { font-size: 12px !important; }
  .ft-qr { width: 76px !important; height: 76px !important; margin-bottom: 7px !important; }
  .ft-qr-cap { font-size: 11px !important; }
  .ft-bar { padding: 13px 0 !important; font-size: 11px !important; }
  /* 页脚导航改横向排列（省高度）*/
  .ft-col:nth-child(2) {
    display: flex; flex-wrap: wrap; gap: 4px 14px; align-content: flex-start;
  }
  .ft-col:nth-child(2) h5 { width: 100%; margin-bottom: 6px !important; }
  .ft-col:nth-child(2) a { margin-bottom: 0 !important; }
}
@media (max-width: 420px) {
  .sec-ui .shot-item-main > img { aspect-ratio: 16 / 7.5 !important; }
  .ft-qr { width: 68px !important; height: 68px !important; }
}


/* ===== 追加：痛点卡再压 + hero 再压（7.0 → 6 屏）===== */
@media (max-width: 900px) {
  /* ① 痛点卡：隐藏"旧方式/新方式"两行，只留标题+一句（手机上文字太多）*/
  .sec-problem .vp-old { display: none !important; }
  .sec-problem .vp-new {
    font-size: 11.5px !important;
    -webkit-line-clamp: 2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  .sec-problem .value-card { padding: 14px 12px !important; gap: 10px !important; }
  .sec-problem .value-card h3 { font-size: 13.5px !important; margin-bottom: 6px !important; }
  .sec-problem .value-ic { width: 34px !important; height: 34px !important; font-size: 15px !important; margin-bottom: 0 !important; }

  /* ② hero：产品卡压缩（手机上产品卡只留 2 行）*/
  .hero-visual .hv-row:nth-child(3) { display: none !important; }   /* 隐藏第 3 行 */
  .hero .badge { font-size: 11.5px !important; padding: 5px 13px !important; margin-bottom: 15px !important; }
  .hero h1 { font-size: 27px !important; margin-bottom: 15px !important; }
  .hero-sub { font-size: 13.5px !important; line-height: 1.75 !important; margin-bottom: 18px !important; }
  .hero { padding: 36px 0 44px !important; }

  /* ③ 四类员工：简介截断 */
  .tf-job { -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; }

  /* ④ 版块副标题在手机上更小 */
  .sec-hd p { font-size: 12.5px !important; }
}
@media (max-width: 420px) {
  .sec-problem .vp-new { -webkit-line-clamp: 1 !important; }
  .hero h1 { font-size: 24px !important; }
}


/* ===== 追加：手机端导航（避免被裁）===== */
@media (max-width: 900px) {
  /* 导航允许横向滚动 + 渐隐提示 */
  .nav {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a {
    flex: none !important;
    white-space: nowrap;
    padding: 7px 13px !important;
    font-size: 13px !important;
  }
  .hd-in { gap: 6px; }
  .logo-img { height: 30px !important; }
}
@media (max-width: 420px) {
  .nav a { padding: 6px 11px !important; font-size: 12.5px !important; }
}


/* ============================================================
   🔴 修横向溢出（移动端能左右滑动的真因）
   根因：.hero-in 的 grid 列宽被产品卡撑破（574px > 容器 360px）
   ============================================================ */

/* ① 全局防溢出（兜底）*/
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

@media (max-width: 900px) {
  /* ② hero-in 强制单列 + 容器不溢出 */
  .hero-in {
    grid-template-columns: minmax(0, 1fr) !important;   /* ⭐ minmax(0,1fr) 防撑破 */
    gap: 28px !important;
    overflow: hidden !important;
  }
  .hero { overflow: hidden !important; }
  .hero-visual { overflow: visible !important; max-width: 100% !important; }
  .hero-visual > .hv-card,
  .hv-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    transform: none !important;
    box-sizing: border-box;
  }

  /* ③ 所有 grid 用 minmax(0,1fr) 防撑破 */
  .grid2, .grid3, .grid4, .team-flow, .shot-grid, .shot-grid-plus, .ft-in {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .ft-in { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* ④ 卡片内部防溢出 */
  .card, .feat, .aud-card, .value-card, .tf-item, .shot-item, .shot-item-main {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .hv-row, .hv-txt { min-width: 0 !important; }
  .hv-txt b, .hv-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ⑤ 图片 / 表格不溢出 */
  img, table { max-width: 100% !important; }
  .prod-table-wrap { overflow-x: auto !important; max-width: 100% !important; }

  /* ⑥ 导航：容器也限制宽度 */
  .hd, .hd-in { overflow-x: hidden !important; max-width: 100% !important; }
  .nav {
    max-width: 100% !important;
    min-width: 0 !important;
  }
}
@media (max-width: 420px) {
  .grid2, .grid3, .grid4, .team-flow, .shot-grid, .shot-grid-plus {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* ===== 导航：手机端换成"可滑动 + 明确提示"（不再让人以为页面能左右滑）===== */
@media (max-width: 900px) {
  /* 导航栏本身限制宽度，内部滚动 */
  .hd-in {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 14px !important;
    overflow: hidden !important;
  }
  .logo { flex: none !important; }
  .nav {
    flex: 1 1 auto !important;
    min-width: 0 !important;           /* ⭐ 关键：允许收缩 */
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    display: flex !important;
    gap: 4px !important;
    padding: 0 0 2px 0 !important;
    /* 右侧渐隐提示"还有更多" */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 16px), transparent 100%) !important;
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 16px), transparent 100%) !important;
  }
  .nav::-webkit-scrollbar { height: 0; display: none; }
  .nav a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 7px 12px !important;
    font-size: 13px !important;
    border-radius: 7px;
  }
  /* 滚到最右时取消渐隐（JS 加 .at-end）*/
  .nav.at-end {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}