/* ══════════════════════════════════════
   RESPONSIVE — 全站通用断点
══════════════════════════════════════ */
@media(max-width:1200px){
  .footer-grid { grid-template-columns:1.4fr 1fr 1fr; }
}
@media(max-width:980px){
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px; }
  .section-title { font-size:28px; }
  :root { --section-v:72px; }
}
@media(max-width:640px){
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
  .footer-links a { margin-left:0; margin-right:16px; }
  .crumb-bar { margin-top:60px; }
}
/* 汉堡菜单本身的展开断点(768px)定义在 header.css 里，和原始设计保持一致 */

/* ══════════════════════════════════════
   手机紧凑化 — 之前只缩到980px的中间态就停了，
   在手机这种更窄的屏幕上，板块间距、标题字号、卡片内边距
   跟平板几乎没区别，显得偏大、不够紧凑。这里针对≤520px
   再统一收一档，让移动端更贴合手机屏幕比例。
══════════════════════════════════════ */
@media(max-width:520px){
  :root { --section-v:40px; --r:6px; }
  .pad-lg { padding:36px 0; }
  .pad-md { padding:26px 0; }
  .inner { padding:0 5%; }

  .section-title { font-size:20px; margin-bottom:22px; }
  .eyebrow { font-size:9.5px; letter-spacing:1.6px; margin-bottom:8px; }

  /* Hero大标题 / 描述段落 / 按钮 —— 之前只缩了一档还是显得偏大，这里再收紧一档 */
  .hero-title { font-size:27px; margin-bottom:18px; }
  .about-hero-lead { font-size:13.5px; line-height:1.65; margin-bottom:18px; }
  .hero .btn-primary, .btn-primary { padding:12px 22px; font-size:13px; }
  .hero .btn-secondary, .btn-secondary { padding:12px 22px; font-size:13px; }
  .btn-wa { padding:12px 18px; font-size:13px; }
  .p-badge { font-size:10.5px; padding:5px 12px; }
  .hero-cta-row, .cta-btn-row { gap:10px; }

  /* 卡片类组件的内边距普遍是按桌面尺寸写死的，手机上按比例收紧 */
  .cap-card { padding:16px 14px; }
  .cap-icon { width:34px; height:34px; padding:7px; margin-bottom:10px; border-radius:9px; }
  .cap-card h3 { font-size:15px; margin-bottom:6px; }
  .cap-card p { font-size:12.5px; line-height:1.6; }
  .compare-card { padding:22px 18px; }
  .compare-card h3 { font-size:19px; }
  .oem-cap-card { padding-left:16px; }
  .latest-article-card { padding:18px; }

  .process-list-item { padding:14px 16px; gap:12px; }
  .process-list-content h4 { font-size:14px; }
  .process-visual { min-height:280px; }

  .oem-hero-text h1 { font-size:22px; margin-bottom:10px; }
  .oem-hero-text .about-hero-lead { margin-bottom:16px; }

  /* 之前排查漏掉的几个板块大标题/大数字，一并收紧，跟其他板块保持统一手感 */
  .about-hero-solo h1 { font-size:22px; }         /* About页主标题 */
  .legal-hero h1 { font-size:22px; }               /* 隐私政策/服务条款页标题 */
  .p-title { font-size:22px; }                     /* 产品详情页标题 */
  .page-hero-title { font-size:24px; }             /* Resources页标题 */
  .article-title { font-size:22px; }               /* 博客文章标题 */
  .moq-qty { font-size:28px; }                     /* 价格板块大数字 */
  .trust-stat-num { font-size:24px; }              /* 客户评价区信任数据 */
  .process-visual .ph-icon-wrap { width:52px; height:52px; }  /* OEM流程板块圆形图标 */
  .audience-icon { width:32px; height:32px; margin-bottom:10px; } /* 产品页适用人群图标 */
  .hero .photo-slot .ph-icon, .oem-image .photo-slot .ph-icon { width:40px; height:40px; padding:10px; } /* 图片占位图标 */

  /* 文章正文：二级标题上方留白58px在手机上显得偏空，收紧一些 */
  .article-body { padding-top:36px; }
  .article-body h2 { margin:38px 0 14px; font-size:21px; }
  .article-body h3 { margin:24px 0 10px; font-size:16px; }
  .article-body blockquote { font-size:17px; margin:24px 0; padding-left:16px; }
}

/* ══════════════════════════════════════
   真机手机字号加大 — 上面所有 max-width 断点在"锁定1280px桌面布局"
   模式下已经失效（浏览器一直以为自己是1280px宽），这里改用
   max-device-width（判断真实物理屏幕宽度，不受伪装的布局宽度影响），
   专门针对真实手机设备把Hero区文字和按钮适当放大，图片当背景占比不变，
   让文字在"整体缩小显示"的画面里依然读得舒服一些，不用电脑版也跟着变。
══════════════════════════════════════ */
@media (max-device-width: 768px) {
  .hero-tag { font-size:15px; padding:8px 18px; }
  /* 文字容器宽度也要跟着字号一起放大调整，不然大字号挤在原来的窄列里会断行很难看
     （比如标题拆出"brand."单独一行这种孤字现象）。放宽到90%屏宽，给文字足够的呼吸空间。 */
  .hero-text { max-width:90% !important; padding-right:4%; }
  .hero-title { font-size:46px; margin-bottom:28px; line-height:1.25; }
  .hero-desc { font-size:19px; line-height:1.7; margin-bottom:34px; max-width:100% !important; }
  .hero-specs { margin-bottom:34px; }
  .hero-specs li { font-size:18px; }
  .hero-specs li .dot { width:22px; height:22px; }
  .hero .btn-primary, .hero .btn-secondary { padding:18px 36px; font-size:18px; }

  /* Hero下面的板块之前没跟着放大，字号突然变小，跟Hero拼在一起很突兀。
     这里把首页其余板块也统一放大，整体比例保持一致，不再有"一大一小"的割裂感。 */
  .eyebrow { font-size:15px; }
  .section-title { font-size:40px; margin-bottom:20px; }

  /* 数据统计卡片（8+ / 12 / 1,000,000+ 这组）：5张卡片挤一行，字号一放大就断行很挤，
     改成2列，每张卡片能分到更多宽度，文字不容易断成孤字。 */
  .trust-cards-grid { grid-template-columns:repeat(2,1fr) !important; gap:16px; }
  .trust-card { padding:32px 22px; }
  .tc-num { font-size:42px; margin-bottom:12px; }
  .trust-card h3 { font-size:18px; margin-bottom:8px; }
  .trust-card p { font-size:15px; }

  /* 产品展示卡片 */
  .product-card .body { padding:28px; }
  .product-card h2, .product-card .body h2 { font-size:26px; }
  .product-tag { font-size:14px !important; }
  .product-card .desc { font-size:17px; line-height:1.7; }
  .meta-tag.cert { font-size:14px; padding:7px 14px; }
  .b2b-meta { gap:10px; margin-bottom:20px; }
  .product-card .card-footer { padding:20px 28px; }
  .btn-card { font-size:17px; padding:16px 0; }
}