/* ==========================================================================
   MLZ 移动端设计系统 v1 · 2026-11-04
   --------------------------------------------------------------------------
   目标：把桌面端「缩窄版」升级为真正的移动端原生体验。
   原则：
   1. 单一视觉语言 —— 统一收敛到编辑式（直角、克制、层级靠字重与留白）
   2. 尊重内容形态 —— 图片按自身比例呈现，不做强行裁切
   3. 触控优先 —— 可点元素 ≥44px，正文 ≥16px，触控热区留白充足
   4. 零横向滚动 —— 任何视口宽度下不产生横向滚动条
   加载位置：所有页面 </head> 前，作为最后一层覆盖
   ========================================================================== */

/* ---------- 1. 移动端令牌 ---------- */
@media (max-width: 860px) {
  :root {
    /* 圆角全站收敛：卡片式 14px → 3px，与编辑式统一 */
    --radius: 3px;
    --shadow: 0 2px 12px rgba(14, 58, 93, .06);
    --shadow-lg: 0 8px 28px rgba(14, 58, 93, .10);

    /* 触控友好的间距节奏 */
    --gap-section: 56px;
    --gap-block: 32px;
    --gap-item: 20px;

    /* 正文放大到 16px+，提升移动端可读性 */
    --fs-body: 1.0625rem;   /* 17px */
    --fs-lead: 1.125rem;    /* 18px */
    --fs-h1: 2rem;          /* 32px */
    --fs-h2: 1.625rem;      /* 26px */
    --fs-h3: 1.25rem;       /* 20px */
    --fs-sm: .875rem;       /* 14px */
    --fs-xs: .8125rem;      /* 13px */

    /* 统一容器边距 */
    --pad-x: 20px;
  }

  html { font-size: 100%; -webkit-tap-highlight-color: rgba(20, 168, 149, .12); }

  body {
    font-size: var(--fs-body);
    line-height: 1.72;
    overflow-x: hidden;          /* 兜底：杜绝横向滚动 */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  .container { padding: 0 var(--pad-x); max-width: 100%; }

  /* 所有可点元素去掉 hover 残留，移动端用 active 反馈 */
  a, button, summary, .btn, .more, .pcard, .ncard { -webkit-tap-highlight-color: rgba(20,168,149,.14); }
  .pcard:hover, .ncard:hover { transform: none; box-shadow: var(--shadow); }

  img { max-width: 100%; height: auto; }

  /* ---------- 2. 导航：移动端独立形态 ---------- */
  header, .site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    box-shadow: 0 1px 0 rgba(14, 58, 93, .07);
  }

  .nav { height: 60px; }
  .nav img, .nav .logo img { height: 38px; width: auto; }

  /* 汉堡按钮：扩到 44×44 触控热区 */
  .menu-btn {
    display: flex !important;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    margin-right: -10px;
    font-size: 1.75rem;
    color: var(--navy, #0e3a5d);
    cursor: pointer;
    border-radius: 3px;
  }
  .menu-btn:active { background: rgba(20, 168, 149, .08); }

  /* 抽屉式菜单：全屏铺开，带底部 CTA */
  .nav ul {
    display: none;
    position: fixed;
    inset: 60px 0 0 0;
    z-index: 99;
    background: #fff;
    flex-direction: column;
    padding: 12px var(--pad-x) calc(24px + env(safe-area-inset-bottom));
    box-shadow: 0 12px 40px rgba(14, 58, 93, .16);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav ul.open { display: flex; }
  .nav ul > li { margin: 0 !important; border-bottom: 1px solid rgba(14, 58, 93, .07); }
  .nav ul > li:last-child { border-bottom: 0; }
  .nav ul a, .nav ul .cta {
    display: flex; align-items: center;
    min-height: 52px;
    padding: 0 2px;
    font-size: 1.0625rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    color: var(--ink, #0b2239) !important;
  }
  .nav ul .cta {
    margin-top: 18px;
    justify-content: center;
    background: var(--teal, #14a895) !important;
    color: #fff !important;
    border-radius: 3px;
    font-weight: 700 !important;
    min-height: 50px;
  }
  .nav ul .cta:hover { background: var(--teal-dark, #0e8a7b) !important; }

  /* ---------- 3. Hero：重排而非缩放 ---------- */
  /* 结构：.hero-media 承载图片层，.hero-inner 承载文字层。
     移动端改为「图片在上、深色文字块在下」，避免文字压在图片上不可读，
     也避免文字掉到白底变成浅色看不见。 */
  .hero {
    min-height: 0 !important;
    padding: 0 !important;
    background: var(--navy-deep, #0a2a45) !important;
    display: block !important;
    /* 图片层与文字层之间不留空带 */
    margin: 0 !important;
  }
  .hero::before { display: none !important; }

  .hero-media {
    position: relative;
    height: 42vh;
    min-height: 220px;
    max-height: 340px;
    overflow: hidden;
  }
  .hero .hero-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    transform: none !important;
    animation: none !important;
    background-size: cover;
    background-position: center 45%;
    transition: opacity .5s ease !important;
  }
  .hero .hero-bg.active { opacity: 1 !important; }

  .hero-veil {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(170deg, rgba(7, 26, 44, .50) 0%, rgba(10, 42, 69, .30) 60%, rgba(10, 42, 69, .62) 100%) !important;
  }

  .hero-inner {
    position: relative !important;
    z-index: 2;
    padding: 0 0 40px !important;
    width: 100%;
  }
  .hero-copy { margin: 0 !important; padding: 28px 0 0 !important; }

  .hero .kicker {
    font-size: .6875rem !important;
    letter-spacing: .14em !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
    line-height: 1.5;
    color: #3fd6c2 !important;
  }
  .hero .kicker::before { width: 20px !important; flex: 0 0 20px; }

  .hero h1 {
    font-size: var(--fs-h1) !important;
    line-height: 1.18 !important;
    letter-spacing: -.022em !important;
    margin-bottom: 16px !important;
    color: #fff !important;
    text-wrap: balance;
  }
  .hero .lede {
    font-size: 1rem !important;
    line-height: 1.62 !important;
    margin-bottom: 24px !important;
    color: #b9cddc !important;
  }

  /* CTA：主次按钮纵向堆叠，各占满宽——移动端横向并排会挤压文案换行 */
  .hero-cta {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }
  .hero-cta .btn {
    width: 100%;
    min-width: 0;
    padding: 15px 16px !important;
    font-size: .9375rem !important;
    text-align: center;
    line-height: 1.3;
    border-radius: 3px;
  }
  /* 次按钮在深色底上用描边，强化层次 */
  .hero-cta .btn-ghost {
    border-color: rgba(255, 255, 255, .34) !important;
    color: #fff !important;
    background: rgba(255, 255, 255, .04) !important;
  }
  .hero-cta .btn-ghost:hover { background: rgba(255, 255, 255, .12) !important; }

  /* Hero 统计：2×2 卡片化，数字与标签严格分离，不再错行 */
  .hero-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 1px !important;
    margin-top: 30px !important;
    margin-bottom: 0 !important;
    border-top: 0 !important;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 3px;
    overflow: hidden;
  }
  .hero-stats .stat {
    padding: 15px 13px 16px !important;
    border: 0 !important;
    border-top: 0 !important;
    background: rgba(255, 255, 255, .05);
  }
  .hero-stats .stat b {
    display: block !important;
    font-size: 1.5rem !important;
    line-height: 1.1 !important;
    margin-bottom: 5px !important;
    white-space: nowrap;
    letter-spacing: -.01em;
  }
  .hero-stats .stat span {
    display: block !important;
    font-size: .6875rem !important;
    line-height: 1.4 !important;
    letter-spacing: .03em !important;
    text-transform: none !important;
    color: #9fb9cc !important;
  }

  /* 切换指示器：贴在图片层右下，而不是整个 hero 底部 */
  .hero-dots {
    position: absolute !important;
    right: var(--pad-x) !important;
    bottom: 14px !important;
    top: auto !important;
    z-index: 5;
  }
  .hero-dots button { width: 24px !important; height: 3px; }

  /* ---------- 4. 通用区块节奏 ---------- */
  .section { padding: var(--gap-section) 0 !important; }

  .ed-head, .section-head { margin-bottom: 32px !important; max-width: 100%; }
  .kicker, .eyebrow {
    font-size: .6875rem !important;
    letter-spacing: .16em !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }
  .kicker::before { width: 20px !important; flex: 0 0 20px; }
  .ed-head h2, .split h2, .section-head h2, .quote-banner h2, .faq h2, h2 {
    font-size: var(--fs-h2) !important;
    line-height: 1.24 !important;
    letter-spacing: -.02em !important;
    margin-bottom: 14px !important;
    text-wrap: balance;
  }
  .ed-head p, .section-head p, .split .s-txt p, .pl-txt p {
    font-size: var(--fs-body) !important;
    line-height: 1.72 !important;
  }

  /* ---------- 5. 图片：按自身比例呈现，杜绝裁切 ---------- */
  /* 产品线图文块：移动端统一「图上文下」，反转行也归位 */
  .pline,
  .pline.rev {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 36px 0 !important;
    align-items: start;
  }
  .pline .pl-img,
  .pline.rev .pl-img { order: 1 !important; }
  .pline .pl-txt,
  .pline.rev .pl-txt { order: 2 !important; }
  .pl-tag { font-size: .6875rem !important; letter-spacing: .18em !important; margin-bottom: 10px !important; }
  .pl-txt h3 { font-size: 1.375rem !important; line-height: 1.28 !important; margin-bottom: 12px !important; }
  .pl-txt p { font-size: var(--fs-body) !important; max-width: none !important; margin-bottom: 16px !important; }
  .pl-txt .more { min-height: 44px; }

  /* 产品线图文块：图片按自身比例呈现，不裁切也不留灰带
     做法：容器不设固定比例，用 padding-top 技巧按图原始宽高比撑高 */
  .pl-img {
    aspect-ratio: auto !important;
    height: auto !important;
    border-radius: 3px;
    background: #f4f7f9;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .pl-img img {
    width: 100% !important;
    height: auto !important;
    max-height: 62vh;
    object-fit: contain !important;
    object-position: center !important;
    transition: none !important;
    /* 内边距给在图片上，容器不留灰带 */
    box-sizing: content-box;
    padding: 14px 0;
  }

  /* 产品卡片：75% 硬裁切改为按图比例呈现，产品完整可见 */
  .pcard .ph {
    padding-top: 0 !important;
    height: auto !important;
    aspect-ratio: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f7f9 !important;
    padding: 0;
  }
  .pcard .ph-img,
  .pcard > img.ph-img {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: 56vh;
    object-fit: contain !important;
    object-position: center !important;
    transition: none !important;
    box-sizing: content-box;
    padding: 12px 0;
  }
  .pcard { border-radius: 3px !important; }
  .pcard .pb { padding: 20px 18px 22px !important; }
  .pcard h3 { font-size: 1.125rem !important; line-height: 1.38 !important; margin-bottom: 9px !important; }
  .pcard h3 a { color: var(--ink, #0b2239) !important; }
  .pcard p { font-size: .9375rem !important; line-height: 1.68 !important; }
  .pcard .more {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 14px !important;
    min-height: 44px;
    font-size: .9375rem !important;
    font-weight: 700;
  }
  .pcard .more span { transition: none !important; }

  /* 新闻卡片：图片比例同样放开 */
  .ncard .nph { padding-top: 0 !important; height: auto !important; aspect-ratio: 16 / 10 !important; }
  .ncard .nph img { object-fit: cover !important; object-position: center 35% !important; }
  .ncard { border-radius: 3px !important; }
  .ncard .nb { padding: 18px 18px 20px !important; }
  .ncard h3 { font-size: 1.0625rem !important; }
  .ncard p { font-size: .9375rem !important; }

  /* 关于区要点列表：编号与文字收紧，视觉更像「清单」而非段落 */
  .s-points { margin: 4px 0 24px !important; }
  .s-points li {
    grid-template-columns: 32px 1fr !important;
    gap: 10px !important;
    padding: 13px 0 !important;
    font-size: .9375rem !important;
    line-height: 1.62;
    align-items: start !important;
  }
  .s-points li i {
    font-size: .8125rem !important;
    line-height: 1.62;
    letter-spacing: .02em;
  }

  /* 关于区主图：桌面 sticky 120%，移动端放开 */
  .s-media { position: static !important; height: auto !important; }
  .s-media .m-main {
    height: auto !important;
    border-radius: 3px;
    aspect-ratio: 4 / 3;
  }
  .s-media .m-main::before { padding-top: 0 !important; }
  .s-media .m-main img {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center 42%;
  }
  .s-media .m-cap {
    padding: 44px 16px 16px !important;
    font-size: .8125rem !important;
    line-height: 1.55;
  }
  .s-media .m-cap b { font-size: .9375rem !important; }
  .s-cap {
    font-size: .625rem !important;
    letter-spacing: .12em !important;
    padding: 8px 13px !important;
  }

  /* 画廊网格：移动端 2 列保留「浏览型」并列关系，不塌成 1 列长列表 */
  .ggrid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .gitem { border-radius: 3px !important; }
  .gitem::before { padding-top: 100% !important; }
  .gitem figcaption {
    opacity: 1 !important;                 /* 移动端无 hover，常显 */
    font-size: .6875rem !important;
    padding: 26px 10px 9px !important;
    background: linear-gradient(transparent, rgba(7, 26, 44, .9)) !important;
  }

  /* ---------- 6. Logo 跑马灯：消除横向溢出 ---------- */
  .trust { padding: 26px 0 28px !important; }
  .trust-head {
    font-size: .6875rem !important;
    letter-spacing: .14em !important;
    line-height: 1.55;
    margin-bottom: 18px !important;
    padding: 0 8px;
  }
  .logo-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent) !important;
    mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent) !important;
  }
  .logo-track { animation-duration: 24s !important; }
  /* 固定宽度只属于跑马灯（.logo-track 内的卡片）；
     logo 墙（.logos-grid）用栅格自适应宽度，之前的固定 width 把通栏压成 112px */
  .logo-track .logo-card {
    width: 112px !important;
    height: 58px !important;
    margin-right: 10px !important;
    border-radius: 3px !important;
  }
  .logo-track .logo-card img { height: 34px !important; max-width: 78% !important; }

  /* ---------- 7. 能力网格：单列卡片化 ---------- */
  .wgrid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .wrow {
    padding: 22px 0 !important;
    border-top: 1px solid rgba(14, 58, 93, .10) !important;
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 14px;
    align-items: start;
  }
  .wrow .no {
    grid-row: span 3;
    font-size: 1.25rem !important;
    margin-bottom: 0 !important;
    line-height: 1.1;
  }
  .wrow h3 { font-size: 1.0625rem !important; margin-bottom: 5px !important; }
  .wrow p { font-size: .9375rem !important; line-height: 1.62; }

  /* ---------- 8. 流程步骤 ---------- */
  .pgrid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .pstep {
    padding: 22px 0 22px 46px !important;
    border-top: 1px solid rgba(255, 255, 255, .16) !important;
    position: relative;
  }
  .pstep .no {
    position: absolute; left: 0; top: 20px;
    font-size: 1.5rem !important;
    margin-bottom: 0 !important;
  }
  .pstep h3 { font-size: 1.0625rem !important; margin-bottom: 6px !important; }
  .pstep p { font-size: .9375rem !important; line-height: 1.62; }

  /* ---------- 9. 按钮与链接 ---------- */
  .btn, .btn-white, .btn-outline {
    border-radius: 3px !important;
    font-size: .9375rem !important;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px !important;
    line-height: 1.35;
  }
  .more { font-size: .9375rem !important; min-height: 44px; }

  .center-cta { margin-top: 32px !important; }
  .center-cta .btn-outline {
    width: 100%;
    /* 长文案按钮在移动端允许两行，但首行不孤字 */
    text-align: center;
  }

  /* ---------- 10. 报价横幅 ---------- */
  .quote-banner {
    padding: 40px 22px !important;
    border-radius: 3px !important;
    text-align: left;
  }
  .quote-banner h2 { font-size: 1.375rem !important; margin-bottom: 12px !important; }
  .quote-banner p { font-size: .9375rem !important; margin-bottom: 22px !important; }
  .quote-banner .btn-white { width: 100%; }

  /* ---------- 11. FAQ ---------- */
  .faq-grid, .faq-cols { grid-template-columns: 1fr !important; gap: 0 !important; }
  .faq summary, .no-details details > summary {
    font-size: 1rem !important;
    line-height: 1.55 !important;
    padding: 16px 34px 8px 0 !important;
  }
  .faq details > p, .no-details details.open > p {
    font-size: .9375rem !important;
    line-height: 1.7 !important;
  }

  /* ---------- 12. 联系区与页脚 ---------- */
  .contact-grid, .grid-2 { grid-template-columns: 1fr !important; gap: 20px !important; }
  /* 并列卡片分两类，不能一刀切：
     · 短文卡（≤120 字符，图/图标为主）→ 2 列，奇数末张通栏
     · 长文卡（正文 130–320 字符）→ 2 列会让行宽缩到 3–4 词，不可读
       改为单列 + 图标左置的紧凑横卡，信息密度反而更高。
     本站所有 .grid-3 实测均属长文卡，故统一单列横卡。 */
  .grid-3 { grid-template-columns: 1fr !important; gap: 12px !important; }
  .grid-3 .card {
    display: grid !important;
    grid-template-columns: 40px 1fr !important;
    grid-template-areas: "icon title" ". body";
    align-items: start;
    column-gap: 14px;
    row-gap: 6px;
    padding: 20px !important;
  }
  .grid-3 .card .icon { grid-area: icon !important; }
  .grid-3 .card h3 { grid-area: title !important; align-self: center; }
  .grid-3 .card p,
  .grid-3 .card ul { grid-area: body !important; }
  .grid-3 .card .icon {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 1.15rem !important;
    margin-bottom: 0 !important;
    border-radius: 3px;
  }
  .grid-3 .card h3 { font-size: 1rem !important; margin-bottom: 6px !important; }
  .grid-3 .card p { font-size: .875rem !important; line-height: 1.6 !important; }
  .grid-3 .card ul { margin-top: 8px !important; }
  .grid-3 .card ul li { font-size: .875rem !important; line-height: 1.55 !important; }
  .steps { grid-template-columns: 1fr !important; gap: 14px !important; }
  /* 新闻：长标题 + 长摘要 → 窄列必然折成 7 行，不可读。
     改用移动端标准横卡：图左 116px、文本右，其余信息压缩。 */
  .news-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .news-grid .ncard {
    flex-direction: row !important;
    align-items: stretch;
    gap: 0;
  }
  .news-grid .nph {
    flex: 0 0 116px !important;
    width: 116px !important;
    padding-top: 0 !important;
    height: auto !important;
    aspect-ratio: auto !important;
    align-self: stretch;
    overflow: hidden;
  }
  .news-grid .nph img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 38% !important;
  }
  .news-grid .nb {
    flex: 1 1 auto !important;
    min-width: 0;
    padding: 13px 14px 14px !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
  }
  .news-grid .ncard .meta { margin-bottom: 7px !important; }
  .news-grid .ncard h3 {
    font-size: .9375rem !important;
    line-height: 1.36 !important;
    margin-bottom: 6px !important;
  }
  .news-grid .ncard p {
    font-size: .8125rem !important;
    line-height: 1.55 !important;
    margin-bottom: 8px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .news-grid .ncard .more { margin-top: auto !important; font-size: .8125rem !important; }
  /* logo 墙：2 列保留并列感，奇数时末张通栏（7 项时不留半格空位） */
  .logos-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .logos-grid > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cbox { padding: 22px !important; border-radius: 3px !important; }
  .cbox h3 { font-size: 1rem !important; margin-bottom: 14px !important; }

  /* style.css 共享层：hero 内边距与 stats 塌陷修正
     注意：首页 .hero 由 §3 处理（图片在上/文字在下），此处只针对
     使用 style.css 布局的其它页面（products/contact/news 等） */
  .hero:not(.hero--split) {
    padding: 40px 0 36px !important;
  }
  .hero h1 { font-size: var(--fs-h1) !important; line-height: 1.18 !important; margin-bottom: 14px !important; }
  .hero p { font-size: var(--fs-body) !important; line-height: 1.68 !important; margin-bottom: 24px !important; }
  .hero .btn { min-height: 46px; }

  .hero-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-top: 30px !important;
  }
  .hero-stats .stat {
    border-radius: 3px !important;
    padding: 16px 14px !important;
    text-align: left !important;
  }
  .hero-stats .stat b { font-size: 1.5rem !important; line-height: 1.1 !important; }
  .hero-stats .stat span { font-size: .75rem !important; line-height: 1.4 !important; }

  /* 通用卡片：圆角收敛 + 内距优化 */
  .card, .pcard, .ncard, .step { border-radius: 3px !important; }
  .card { padding: 22px 20px !important; }
  .card h3 { font-size: 1.0625rem !important; }
  .card p { font-size: .9375rem !important; line-height: 1.68 !important; }
  .card .icon { width: 44px !important; height: 44px !important; font-size: 1.25rem !important; margin-bottom: 14px !important; }
  .step { padding: 22px !important; }
  .step h3 { font-size: 1rem !important; }
  .step p { font-size: .9375rem !important; }

  /* 通用 section 标题居中类 */
  .section-head { text-align: left !important; margin-bottom: 28px !important; }

  .logo-track .logo-card { height: 76px !important; padding: 10px !important; }
  .logos-grid .logo-card { height: 76px !important; padding: 10px !important; width: auto !important; }
  .logos-grid .logo-card img { height: 36px !important; max-width: 80% !important; }

  .note { font-size: .8125rem !important; line-height: 1.6; margin-top: 28px !important; }

  /* 旧版单行页尾（保留兼容）；新版四段式页尾见 footer.css */
  footer:not(.site-footer) { padding: 26px 0 !important; font-size: .8125rem !important; }
  footer:not(.site-footer) .container { flex-direction: column; gap: 14px !important; }
  footer:not(.site-footer) .container > * { margin: 0; }

  /* ---------- 13. 表单与弹窗 ---------- */
  input, textarea, select {
    font-size: 1rem !important;   /* 16px 以下 iOS 会自动放大页面 */
    min-height: 48px;
    padding: 12px 14px !important;
  }
  #lightbox { padding: 16px !important; }
  #lightbox img { max-width: 100% !important; max-height: 76vh !important; }
  #lightbox .close {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    top: 8px; right: 8px;
    font-size: 2rem !important;
    line-height: 1;
  }

  /* ---------- 14. 滚动 reveal：移动端不做入场动画 ---------- */
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

  /* ---------- 14b. 自定义组件：why-mlz / process / gallery ---------- */
  /* why-mlz 图文混排 */
  .ab-split,
  .ab-split.rev,
  .ab-split.fit {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-bottom: 32px !important;
  }
  .ab-media {
    border-radius: 3px !important;
    box-shadow: none !important;
  }
  .ab-split.fit .ab-media { height: auto !important; }
  .ab-split.fit .ab-media img {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    aspect-ratio: 4 / 3;
  }
  .ab-split.fit .ab-media::before { padding-top: 0 !important; }
  .ab-media img,
  .ab-trio img { object-position: center 35% !important; }
  .ab-media .ab-cap,
  .ab-media figcaption {
    font-size: .8125rem !important;
    padding: 30px 14px 12px !important;
  }
  .ab-banner { border-radius: 3px !important; }
  .ab-banner img { object-position: center 40% !important; }

  .ab-trio { gap: 14px !important; }
  .ab-trio > * { border-radius: 3px !important; }

  /* stats 卡片 */
  .stats { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .stats .card { border-radius: 3px !important; padding: 20px 16px !important; }
  .stats .stat b { font-size: 1.5rem !important; }

  /* process 时间轴 */
  .pband-inner,
  .pband-inner.rev { grid-template-columns: 1fr !important; gap: 22px !important; }
  .pimg { border-radius: 3px !important; }
  .pnum { font-size: 2.25rem !important; }
  .ptl-track { display: none !important; }
  .ptl-item { padding-left: 0 !important; }

  /* gallery logo 查看器 */
  #logo-viewer img { max-height: 68vh !important; object-fit: contain !important; }

  /* ---------- 15. 打印与减弱动效 ---------- */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
  }
}

/* ---------- 16. 小屏 iPhone (≤390px) 微调 ---------- */
@media (max-width: 390px) {
  :root { --pad-x: 18px; --fs-h1: 1.875rem; --fs-h2: 1.5rem; }
  .hero-stats .stat b { font-size: 1.375rem !important; }
  .hero-stats .stat span { font-size: .625rem !important; }
}

/* ---------- 17. 超窄屏兜底（≤340px） ---------- */
@media (max-width: 340px) {
  :root { --pad-x: 14px; --fs-h1: 1.75rem; }
  .hero-stats { grid-template-columns: 1fr !important; }
  .hero-stats .stat b { font-size: 1.5rem !important; }
  .logo-track .logo-card { width: 100px !important; }
}

/* ---------- 18. 平板竖屏微调 (768–860px) ---------- */
@media (min-width: 768px) and (max-width: 860px) {
  .ggrid { grid-template-columns: repeat(2, 1fr) !important; }
  .wgrid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ======================================================================
   15. 移动端体验改版 v2（2026-11-05 修正版）
   v1 问题：375/360px 机型仍单列；页脚栏目间距过大、行高过松
   修正：取消 380px 单列回退（改用更紧凑的卡片），页脚收紧间距
   ====================================================================== */
@media (max-width: 860px) {

  /* ---------- 15.1 Banner：文字上叠 + 充裕留白 ---------- */
  .hero {
    position: relative !important;
    min-height: 80vh !important;
    display: flex !important;
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .hero-media {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .hero-veil {
    background: linear-gradient(180deg,
      rgba(7, 26, 44, .42) 0%,
      rgba(7, 26, 44, .50) 30%,
      rgba(8, 30, 50, .80) 62%,
      rgba(10, 42, 69, .96) 100%) !important;
  }
  .hero-inner {
    position: relative !important;
    z-index: 2;
    max-width: 720px !important;
    padding: 0 22px 40px !important;   /* 左右留白，不再触边 */
  }
  .hero-copy { padding: 0 !important; }
  .hero .kicker {
    display: inline-block !important;
    font-size: .72rem !important;
    letter-spacing: .14em !important;
    line-height: 1.5 !important;
    margin: 0 0 18px !important;
    text-shadow: 0 1px 6px rgba(5, 18, 30, .8);
  }
  .hero h1 {
    font-size: 1.9rem !important;
    line-height: 1.2 !important;
    margin: 0 0 18px !important;
    text-shadow: 0 2px 16px rgba(5, 18, 30, .85), 0 1px 4px rgba(5, 18, 30, .6);
  }
  .hero .lede {
    font-size: .95rem !important;
    line-height: 1.65 !important;
    margin: 0 0 26px !important;
    color: rgba(226, 236, 244, .92) !important;
    max-width: 100% !important;
    text-shadow: 0 1px 8px rgba(5, 18, 30, .7);
  }
  /* 按钮：竖向堆叠，留足间距，绝不截断 */
  .hero-cta {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin: 0 0 30px !important;
  }
  .hero-cta .btn {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 !important;
    padding: 15px 22px !important;
    font-size: .9375rem !important;
    text-align: center !important;
    white-space: normal !important;
    letter-spacing: 0 !important;
  }
  /* 统计条：与文案拉开距离，紧凑玻璃卡片 */
  .hero-stats {
    margin-top: 0 !important;
    gap: 10px !important;
    background: rgba(10, 30, 50, .42) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 14px !important;
    border-radius: 14px !important;
  }
  .hero-stats .stat {
    background: rgba(255, 255, 255, .07) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    padding: 12px 10px !important;
    border-radius: 10px !important;
  }
  .hero-stats .stat b { font-size: 1.4rem !important; }
  .hero-stats .stat span { font-size: .72rem !important; line-height: 1.35 !important; }
  .hero-dots { top: 18px !important; bottom: auto !important; }

  /* ---------- 15.2 Why 编号列表：一行两列（全宽度生效） ---------- */
  .wgrid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  /* 每条改成独立卡片，窄屏也不挤 */
  .wrow {
    display: block !important;
    padding: 14px 13px 15px !important;
    border-top: 0 !important;
    background: #fff !important;
    border: 1px solid #e6eef4 !important;
    border-radius: 4px !important;
    min-width: 0;
  }
  .wrow .no {
    display: block !important;
    font-size: .875rem !important;
    margin: 0 0 7px !important;
    line-height: 1 !important;
    font-weight: 700;
  }
  .wrow h3 {
    font-size: .875rem !important;
    line-height: 1.32 !important;
    margin-bottom: 6px !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .wrow p {
    font-size: .75rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  /* 末条（05）通栏，避免单格落单留白 */
  .wgrid > .wrow:last-child { grid-column: 1 / -1; }

  /* ---------- 15.3 页尾栏目导航：两列 + 收紧间距 ---------- */
  /* 导航区：品牌区通栏，三个栏目 2 列网格铺开，行距收紧 */
  /* 用 footer.site-footer 提高特异性，压过 footer.css 的 (max-width:380px) 单列回退 */
  footer.site-footer .foot-nav,
  .foot-nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px 22px !important;
    padding-top: 26px !important;
    padding-bottom: 22px !important;
  }
  footer.site-footer .foot-brand,
  .foot-brand { grid-column: 1 / -1 !important; max-width: none !important; }
  .foot-brand p { margin: 10px 0 12px !important; line-height: 1.6 !important; }
  .foot-contact { margin: 0 !important; }

  /* 栏目本身是 <nav>，内部 h3 + ul 用紧凑行距 */
  .foot-col { min-width: 0; }
  .foot-col h3 {
    font-size: .6875rem !important;
    line-height: 1.2 !important;
    margin: 0 0 8px !important;
    padding-bottom: 6px !important;
    letter-spacing: .1em !important;
    text-transform: uppercase;
    color: #3fd6c2 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
  }
  .foot-col ul { margin: 0 !important; padding: 0 !important; }
  .foot-col li {
    margin: 0 0 1px !important;
    line-height: 1.35 !important;
  }
  .foot-col a {
    display: block !important;
    padding: 6px 0 !important;
    min-height: 32px !important;
    font-size: .8125rem !important;
    line-height: 1.4 !important;
    color: #dce8f2 !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .foot-col a:hover { color: #3fd6c2 !important; }

  /* 第三个栏目（Resources）通栏，内部两列排，节省纵向空间 */
  footer.site-footer .foot-col:last-of-type,
  .foot-col:last-of-type { grid-column: 1 / -1 !important; }
  footer.site-footer .foot-col:last-of-type ul,
  .foot-col:last-of-type ul {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 18px !important;
  }

  .foot-contact a { min-height: 34px !important; display: inline-flex; align-items: center; }
}

/* 超窄屏（≤340px）：只缩字号，仍保持两列 */
@media (max-width: 340px) {
  .wgrid { gap: 8px !important; }
  .wrow { padding: 12px 10px 13px !important; }
  .wrow h3 { font-size: .8125rem !important; }
  .wrow p { font-size: .6875rem !important; }
  .foot-nav { gap: 16px 14px !important; }
}

/* ======================================================================
   16. 手机端区块微调 v2（2026-11-06）
   v2 修复：
   - 内页 hero（.hero--inner）被 15.1 的 flex 规则压成「图左文右」，
     恢复 block，让 hero.css 的上图下文版式生效（全部内页受益）
   - 联系页 .grid-3 卡片有两个 <p>，共用 grid-area: body 导致文字重叠，
     联系页卡片改回块级居中排版
   ====================================================================== */
@media (max-width: 860px) {

  /* ---------- 16.1 内页 hero：文字叠加在图片上（覆盖式 banner） ----------
     用更高特异性（.hero.hero--inner）压过 hero.css 的「上图下文」：
     图片铺满整块（cover）+ brightness 压暗 + 暗色渐变叠层，文字居中浮于其上 */
  .hero.hero--inner {
    position: relative !important;
    min-height: 52vh !important;
    max-height: 60vh !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #0a2a45 !important;
    background-image: none !important;
  }
  .hero.hero--inner::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    background-color: transparent !important;
    background-image: var(--hero-img) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    filter: brightness(0.55) saturate(1.06) !important;
    z-index: 0 !important;
  }
  .hero.hero--inner::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(7, 26, 44, .46) 0%, rgba(7, 26, 44, .72) 100%) !important;
    z-index: 1 !important;
  }
  .hero.hero--inner > .container {
    position: relative !important;
    z-index: 2 !important;
    text-align: center !important;
    padding: 64px 24px !important;
  }
  .hero.hero--inner > .container > p:first-child {  /* 面包屑 */
    color: #9fd8cf !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .5) !important;
  }
  .hero.hero--inner h1 {
    color: #ffffff !important;
    font-size: 1.7rem !important;
    line-height: 1.25 !important;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .5) !important;
    margin-bottom: 12px !important;
  }
  .hero.hero--inner > .container > p:last-child {  /* 副标题 */
    color: #d6e6f0 !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .5), 0 0 2px rgba(0, 0, 0, .55) !important;
  }

  /* ---------- 16.2 产品页：单列 + 更矮图片，凸显「一列多行」 ---------- */
  .pline,
  .pline.rev {
    display: block !important;
    padding: 26px 0 !important;
  }
  .pl-img img {
    max-height: 42vh !important;
    padding: 10px 0 !important;
  }
  .pl-txt p { margin-bottom: 12px !important; }

  /* ---------- 16.3 How We Work：2×2 多列网格 ---------- */
  #process .pgrid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  #process .pstep {
    position: static !important;
    padding: 14px 13px 15px !important;
    border-top: 0 !important;
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 4px !important;
    min-width: 0;
  }
  #process .pstep .no {
    position: static !important;
    display: block !important;
    font-size: .875rem !important;
    line-height: 1 !important;
    margin: 0 0 7px !important;
    color: #3fd6c2 !important;
    font-weight: 700;
  }
  #process .pstep h3 {
    font-size: .875rem !important;
    line-height: 1.32 !important;
    margin-bottom: 6px !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  #process .pstep p {
    font-size: .75rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* ---------- 16.4 FAQ：进一步收紧，更简洁 ---------- */
  .faq details {
    padding: 11px 14px !important;
    margin: 0 0 6px 0 !important;
    box-shadow: 0 1px 2px rgba(14, 58, 93, .06) !important;
  }
  .faq summary {
    font-size: .90625rem !important;
    line-height: 1.4 !important;
    padding-left: 16px !important;
  }
  .faq details > p {
    margin: 6px 0 0 0 !important;
    font-size: .90625rem !important;
    line-height: 1.55 !important;
  }
  #faq .center-cta { margin-top: 20px !important; }

  /* ---------- 16.5 Contact 页：卡片改块级居中，消除文字重叠 ---------- */
  body.page-contact section:not(.hero) { padding: 34px 0 !important; }
  body.page-contact .card { padding: 20px !important; }
  body.page-contact .grid-3 { gap: 12px !important; }
  /* 两个 <p>（联系方式 + 说明）在 grid-areas 里挤同一格会重叠，恢复块级流 */
  body.page-contact .grid-3 .card {
    display: block !important;
    text-align: center;
  }
  body.page-contact .grid-3 .card .icon { margin: 0 auto 12px !important; }
  body.page-contact .grid-3 .card h3 { margin-bottom: 8px !important; }
  body.page-contact .grid-3 .card p { margin: 0 0 6px !important; }
  body.page-contact .grid-3 .card p:last-child { margin-bottom: 0 !important; }
  body.page-contact .grid-2 { gap: 16px !important; align-items: start !important; }
  body.page-contact .card[style] { margin-top: 14px !important; }
  body.page-contact .section-head { margin: 0 0 16px !important; }
  body.page-contact input,
  body.page-contact textarea { padding: 9px 10px !important; }
  body.page-contact .note { margin-top: 12px !important; }

  /* ---------- 16.6 首页分栏 hero 手机端：修复眉标贴顶 + 轮播点错位 ----------
     更窄屏的既有规则把 .hero-copy padding 清零（眉标贴 header）、
     又把 .hero-dots 甩到 top:18px（右上角两条悬空线）。
     用 .hero.hero--split 提高特异性覆盖回去。 */
  .hero.hero--split .hero-copy {
    padding-top: 26px !important;
  }
  .hero.hero--split .hero-dots {
    top: auto !important;
    bottom: 14px !important;
    right: var(--pad-x, 20px) !important;
  }
}

/* 超窄屏（≤340px）：流程仍保持 2 列，仅缩字号 */
@media (max-width: 340px) {
  #process .pstep { padding: 12px 10px 13px !important; }
  #process .pstep h3 { font-size: .8125rem !important; }
  #process .pstep p { font-size: .6875rem !important; }
}