/* ==========================================================================
   东泉顺环保 —— 全站响应式样式
   文件：astra-child/css/responsive.css
   作者：高见远（UX/UI）
   ==========================================================================

   ── 断点体系（移动优先的"降级"写法，与桌面默认样式互补）──────────────
   BP1  @media (max-width: 1200px)   小笔记本 / 平板横屏
   BP2  @media (max-width: 768px)    平板竖屏 / 大屏手机   ← 主战场
   BP3  @media (max-width: 480px)    主流手机（iPhone SE / 安卓小屏）

   ── 加载顺序（必须在 common.css 之后）────────────────────────────────
   在 functions.php 中追加（优先级 20，晚于 common.css 的 10）：

       add_action('wp_enqueue_scripts', 'indeptheco_responsive_styles', 20);
       function indeptheco_responsive_styles() {
           wp_enqueue_style(
               'dqs-responsive',
               get_stylesheet_directory_uri() . '/css/responsive.css',
               array('dqs-common'),
               '1.0.0'
           );
       }

   ── ⚠️ 特异性策略（重要，别删）──────────────────────────────────────
   现状：front-page.php / page-*.php 里有大量**内联 <style> 块**，
   且位置在 wp_head() 之后，因此内联样式在"同特异性"下会**覆盖**本文件。
   对策：本文件所有响应式规则统一加 `body` 前缀（特异性 +0,0,0,1），
   即可稳定压过页面内联样式，避免使用 !important。
   👉 后续维护：新增规则请一律写成 `body .xxx { ... }`。
   👉 若寇豆码日后把内联样式抽到外部文件，本策略依然安全，无需改动。

   ── 品牌约束 ────────────────────────────────────────────────────────
   品牌实体：东泉顺环保
   主色 #00509B  辅色 #27ae60  字体 系统字体栈（PingFang SC / Microsoft YaHei）  基准字号 16px
   视觉基调：明亮通透，禁止大面积深色压暗

   ── 目录 ────────────────────────────────────────────────────────────
   [0] 全局安全规则（全尺寸生效）
   [1] 汉堡菜单（checkbox hack + JS .open 双通道）
   [2] BP1  ≤1200px
   [3] BP2  ≤768px
   [4] BP3  ≤480px
   [5] 触控区 / 无障碍 / 打印

   [7] 组件样式：留资表单 .idt-form
   ========================================================================== */


/* ==========================================================================
   [0] 全局安全规则 —— 不放在断点里，所有屏幕尺寸都生效
   ========================================================================== */

/* 防止任何元素撑破视口产生横向滚动条。
   用 overflow-x: clip 而不是 hidden —— clip 不会创建滚动容器，
   因此不会破坏 .site-header 的 position: sticky。 */
html {
    overflow-x: clip;
}
body {
    overflow-x: clip;
}

/* [P1 ACC-001 2026-10-24] 原 .idt-nav-toggle（checkbox）隐藏规则已删除：
   用 opacity:0 / 0x0 / pointer-events:none 藏 checkbox 会让键盘不可聚焦（WCAG 2.1.1）。
   现统一改用原生 <button id="mobileToggle">，DOM 中已无该节点。 */

/* 图片 / 视频 / iframe 自适应兜底（common.css 已有 img 规则，此处补齐其余） */
body img,
body video,
body iframe,
body embed,
body svg {
    max-width: 100%;
}
body img,
body video {
    height: auto;
}

/* 长串数字/英文/URL 强制换行，防止撑破卡片 */
body p,
body li,
body td,
body th,
body h1, body h2, body h3, body h4, body h5 {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 预格式化内容与代码块允许横向滚动 */
body pre,
body code {
    overflow-x: auto;
    max-width: 100%;
}

/* 遗留 emoji 占位清除
   早期版本在图片容器里放了 emoji 字符做占位（font-size: 80px 等），
   现统一改为 <img> 背景图。这里把容器内字号归零，避免旧 emoji 残留显示。
   如果某处确实用了纯文字内容，删掉对应选择器即可。 */
body .product-img,
body .product-mini-img,
body .case-img,
body .cert-img,
body .advantage-img,
body .intro-img {
    font-size: 0;
}

/* 技术参数表格 —— 推荐结构（需寇豆码在 PHP 里包一层 .idt-table-wrap）：
       <div class="idt-table-wrap"><table class="tech-table">…</table></div>
   包了 wrapper 就用下面这套（横滚 + 表头吸附），最稳。
   没包 wrapper 的页面由 [3.7] 的兜底规则接管。 */
.idt-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 16px 0;
    border-radius: var(--radius, 8px);
    border: 1px solid var(--border);
}
.idt-table-wrap > table {
    width: 100%;
    min-width: 640px;          /* 低于此宽度就横滚，保证列不被挤成竖排文字 */
    border-collapse: collapse;
    margin: 0;
    border: 0;
}
.idt-table-wrap > table th {
    position: sticky;
    top: 0;
    z-index: 2;
}


/* ==========================================================================
   [BP0.9] —— ≤1400px：小笔记本 / 平板横屏档
   页脚快速链接 12 项单行约需 1370px 视口宽度，低于此宽度必须允许换行，
   否则 footer-quick-links-list 会横向溢出被裁切（document scrollWidth 被撑大）。
   ========================================================================== */
@media (max-width: 1400px) {

    body .footer-quick-links-list { flex-wrap: wrap; }
    body .footer-quick-links-list li { margin: 2px 0; }
}


/* ==========================================================================
   [2] BP1 —— ≤1200px：小笔记本 / 平板横屏
   ========================================================================== */
@media (max-width: 1200px) {

    /* 2.1 容器：1600 → 100%，padding 40 → 24 */
    body .container {
        max-width: 100%;
        padding: 0 24px;
    }

    /* 2.2 头部 */
    body .header-inner {
        gap: 28px;                     /* 桌面 60px 太宽 */
        padding: 12px 0;
    }
    /* 导航字号/内边距不再在此写死：common.css 用 clamp(14px,1.2vw,17px) 流式收敛。
       早期这里写死 16px，是因为旧 LOGO 只有 120px 宽；换成 3.2:1 横版 LOGO 后
       容器占位变宽，写死值会在 1025–1200 区间重新溢出，故移交 clamp 统一管理。 */
    body .logo-icon {
        width: 140px;
        height: 50px;
    }

    /* 2.3 顶部信息栏：项目太多，允许换行并收紧间距 */
    body .topbar-contact {
        gap: 16px;
        font-size: 15px;
    }

    /* 2.4 网格降一档 */
    body .cat-grid      { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    body .cases-grid    { grid-template-columns: repeat(2, 1fr); gap: 22px; }
    body .feature-grid  { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    body .app-grid      { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    body .adv-grid      { grid-template-columns: repeat(2, 1fr); }
    body .cert-grid     { grid-template-columns: repeat(3, 1fr); }
    body .footer-grid   { grid-template-columns: repeat(3, 1fr); gap: 32px; }
    body .work-steps    { grid-template-columns: repeat(2, 1fr); gap: 20px; }

    /* 2.5 图文两栏 */
    body .intro-grid,
    body .advantage-grid {
        gap: 36px;
    }
    body .advantage-img { height: 360px; }
    body .intro-img     { min-height: 300px; }

    /* 2.6 Section 间距略收（2026-10-22 统一为 60px） */
    body .section,
    body .product-showcase,
    body .categories-section,
    body .cases-section,
    body .cert-section,
    body .advantage-section {
        padding: 60px 0;
    }
    body .cta-section { padding: 60px 0; }

    /* 2.7 标题阶梯（统一走 CSS 变量） */
    body .page-hero h1      { font-size: var(--h1-fs, 40px); }
    body .section-title,
    body .showcase-header h2,
    body .section-header h2 { font-size: var(--h2-fs, 32px); }
    body .hero h1, body .hero h2   { font-size: var(--h1-fs, 40px); }

    /* 2.8 横向滚动区的左右箭头从 -24px 收回容器内，避免被裁切 */
    body .scroll-nav.prev { left: 0; }
    body .scroll-nav.next { right: 0; }

/* 2.9 Hero 高度略降 */
    body .hero { height: 560px; }
}


/* ==========================================================================
   [2.5] BP1.5 —— ≤1100px：窄桌面 / 平板横屏
   导航项在这个宽度区间已无压缩余量（容器固定 1360px）。
   隐藏下拉指示 ▾ 可一次性释放约 78px 宽度，是性价比最高的做法；
   下拉菜单本身仍可悬停/点击展开，不影响功能。（≤1024px 转抽屉后同样无箭头）
   ========================================================================== */
@media (max-width: 1100px) {

    body .main-nav .has-dropdown::after { content: none; }

}


/* ==========================================================================
   [2.6] BP1.4 —— ≤1024px：抽屉模式下的菜单按钮（2026-09-17 修复）
   --------------------------------------------------------------------------
   769–1024px 走的是「legacy .mobile-toggle + footer.js」通道
   （[P1 ACC-001 2026-10-24] 原 ≤768px 的 CSS-only checkbox 方案已废弃，
     全尺寸统一使用 <button id="mobileToggle"> 这一条通道）。

   问题：.mobile-toggle 原本是个**空按钮**（无文字、无伪元素、宽高 0），
   虽然 display:block 却完全不可见、不可点 →
   **769–1024px 区间没有任何入口能打开抽屉，导航彻底不可达**
   （iPad 横屏 1024、小笔记本常见宽度全中招）。

   修法：用伪元素 + box-shadow 画三横线，不依赖任何字体字形；
   抽屉开启机制（.main-nav.open{right:0}）与 JS 均无需改动。
   ✅ 本按钮现为手机端唯一入口（checkbox 方案已移除），必须始终可见。
   ========================================================================== */
@media (max-width: 1024px) {

    body .mobile-toggle {
        display: block;
        position: relative;
        width: 44px;
        height: 44px;
        padding: 0;
        flex-shrink: 0;
    }
    body .mobile-toggle::before {
        content: "";
        position: absolute;
        left: 10px;
        right: 10px;
        top: 50%;
        height: 2px;
        margin-top: -1px;
        border-radius: 1px;
        background: var(--primary);
        box-shadow: 0 -7px 0 var(--primary),
                    0  7px 0 var(--primary);
    }
    body .mobile-toggle:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
        border-radius: 6px;
    }

}


/* ==========================================================================
   [3] BP2 —— ≤768px：平板竖屏 / 大屏手机（主战场）
   ========================================================================== */
@media (max-width: 768px) {

    /* [LEAD-05] 显示移动端悬浮咨询栏，并给页面底部留出等高空隙，避免末行被遮挡 */
    body .mobile-contact-bar { display: grid; }
    body { padding-bottom: 52px; }

    /* 2026-10-29 返回顶部按钮抬高到咨询栏之上,避免遮挡在线选型 */
    body .back-to-top { bottom: 64px; right: 16px; padding: 10px 18px; font-size: 14px; }

    /* 2026-10-29 手机端案例卡瘦身:降图高/收字/卡宽收窄,整卡不再占一屏 */
    body .cases-section .scroll-item { min-width: 72vw; max-width: 72vw; }
    body .case-img { height: 150px; }
    body .case-body { padding: 14px 16px; }
    body .case-body h4 { font-size: 16px; line-height: 1.45; margin-bottom: 6px; }
    body .case-body p { font-size: 14px; }

    /* ----------------------------------------------------------------
       3.1 容器
       ---------------------------------------------------------------- */
    body .container {
        padding: 0 20px;
    }

    /* ----------------------------------------------------------------
       3.2 顶部信息栏
       手机上只保留核心信息，其余隐藏，避免堆成 5 行
       ---------------------------------------------------------------- */
    body .topbar { padding: 8px 0; font-size: 14px; }
    body .topbar-inner { justify-content: center; }
    body .topbar-contact {
        gap: 0 14px;
        font-size: 14px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start;
    }
    body .topbar-contact::-webkit-scrollbar { display: none; }
    /* 只留第 1 条与最后一条（电话），中间几条让位 */
    body .topbar-contact > span:nth-child(2),
    body .topbar-contact > span:nth-child(3),
    body .topbar-contact > span:nth-child(5) { display: none; }
    body .topbar-contact > span { white-space: nowrap; }

    /* ----------------------------------------------------------------
       3.3 头部 + 汉堡菜单
       ---------------------------------------------------------------- */
    body .site-header,
    body .header {
        position: sticky;
        top: 0;
        z-index: 1000;
    }
    body .header-inner {
        flex-wrap: wrap;
        gap: 0 16px;
        padding: 10px 0;
        justify-content: space-between;   /* logo 左，汉堡右 */
        align-items: center;
    }
    body .logo-icon { width: 120px; height: 50px; }
    body .logo-text { font-size: 22px; }

    /* [P1 ACC-001 2026-10-24] .idt-nav-label 三横线样式已移除，
       统一由 .mobile-toggle（原生 button）承载，见上方 ≤1024px 段。 */

    /* 抽屉本体 —— 双通道共用 */
    body .main-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 86vw;
        max-width: 340px;
        height: 100vh;
        height: 100dvh;                 /* 移动端浏览器地址栏兼容 */
        margin: 0;
        padding: 76px 22px 32px;
        background: var(--bg-soft);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 2px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        box-shadow: -8px 0 40px rgba(13, 34, 64, .18);
        border-radius: 0;
        transform: translateX(105%);
        transition: transform .32s cubic-bezier(.4, 0, .2, 1), visibility .32s;
        z-index: 1200;
        /* [P1 ACC-001 2026-10-24] 抽屉关闭时必须同时隐藏，否则只是"移出屏幕"：
           内部链接仍在 Tab 顺序里，键盘用户会被带进看不见的菜单里（WCAG 2.4.3）。
           visibility:hidden 会让子树退出焦点顺序；配合 transition 让滑出动画仍然可见。 */
        visibility: hidden;
    }
    /* 打开态（唯一通道：button 点击后由 JS 加 .open）：位移复位 + 恢复可见 */
    body .main-nav.open {
        transform: translateX(0);
        visibility: visible;
    }

    /* 抽屉内链接：加大点击区，符合 44px 触控规范 */
    body .main-nav > a,
    body .main-nav > .has-dropdown > a {
        display: block;
        font-size: 16px;
        padding: 12px 14px;
        min-height: 44px;
        line-height: 1.5;
        border-radius: var(--radius, 8px);
        white-space: normal;
        border-bottom: 1px solid var(--border);
    }
    body .main-nav > .has-dropdown > a { border-bottom: none; }
    body .main-nav > a.active { background: var(--accent-light); }

    /* 抽屉内的二级菜单：默认展开为常驻列表（移动端没有 hover） */
    body .main-nav .has-dropdown { width: 100%; }
    body .main-nav .has-dropdown::after { content: none; }   /* 隐藏 ▾ */
    body .main-nav .dropdown-menu {
        position: static;
        opacity: 1;
        /* [P1 ACC-001 2026-10-24] 原为 visibility: visible —— 会把「父级抽屉关闭时
           的 visibility:hidden」从子树上硬顶回来，导致菜单收起后内部链接仍可 Tab 到。
           改为 inherit：父级可见时正常显示，父级隐藏时整棵子树退出焦点顺序。 */
        visibility: inherit;
        transform: none;
        box-shadow: none;
        border: none;
        border-top: none;
        min-width: 0;
        width: 100%;
        padding: 0 0 6px 10px;
        margin: 0 0 6px;
        display: block;
        background: transparent;
    }
    body .main-nav .dropdown-menu a {
        font-size: 15px;
        padding: 10px 14px;
        min-height: 44px;
        display: flex;
        align-items: center;
        color: var(--text-gray);
        border-radius: var(--radius, 8px);
    }
    body .main-nav .dropdown-section {
        padding: 10px 14px 4px;
        font-size: 12px;
    }


    /* 遮罩层 */
    body .nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(13, 34, 64, .45);
        backdrop-filter: blur(2px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility .3s ease;
        z-index: 900;                /* header(1000) 之下：抽屉与关闭按钮仍可交互 */
    }
    body .nav-overlay.open {
        opacity: 1;
        visibility: visible;
    }

    /* 老的 .mobile-toggle 按钮：如果页面还没换成 checkbox，
       继续显示（配合已有 JS 的 .open 通道），并排在汉堡位上 */
    body .mobile-toggle {
        display: block;
        width: 44px;
        height: 44px;
        font-size: 24px;
        line-height: 1;
        color: var(--primary);
    }
    /* [P1 ACC-001] 原「有 checkbox 时隐藏 button」的规则已移除：
       button 现为唯一开关，必须始终显示。 */

    /* 兜底：页面既没有 checkbox 也没有任何汉堡按钮时，
       导航降级为横向滚动条（至少保证移动端可访问，不会彻底消失）。
       不支持 :has() 的老浏览器会忽略此规则，退回抽屉默认态。 */
    body .header-inner:not(:has(.mobile-toggle)) .main-nav {
        position: static;
        transform: none;
        width: auto;
        max-width: 100%;
        height: auto;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 6px 0 0;
        box-shadow: none;
        gap: 4px;
        order: 3;
        width: 100%;
    }
    body .header-inner:not(:has(.mobile-toggle)) .main-nav::-webkit-scrollbar {
        display: none;
    }
    body .header-inner:not(:has(.mobile-toggle)) .main-nav > a {
        white-space: nowrap;
        border-bottom: none;
    }
    body .header-inner:not(:has(.mobile-toggle)) .main-nav .dropdown-menu {
        display: none;
    }

    /* 头部 CTA：手机上缩小，避免和汉堡挤在一起 —— 已移除（.header-cta 全站无使用） */

    /* ----------------------------------------------------------------
       3.4 Hero / 轮播图
       ---------------------------------------------------------------- */
    /* 高度自适应：不再锁死 650px，由内容 + padding 撑开。
       注意不要用 display:flex / align-items，会干扰 .hero-slides 的轨道布局 */
    body .hero {
        height: auto;
        aspect-ratio: auto;          /* 移动端关闭 16:9 定比，防止文字/按钮被 overflow 裁剪 */
        min-height: 460px;
        padding: 48px 0;
    }
    body .hero-slides { height: auto; }
    body .hero-slide  { height: auto; padding: 0 16px; min-height: 460px; }
    body .hero-content {
        padding: 0 8px;
        max-width: 100%;
    }
    body .hero-badge {
        font-size: 13px;
        padding: 6px 14px;
        margin-bottom: 16px;
        letter-spacing: 1px;
    }
    /* 字号阶梯：桌面 52 → 移动 30（480 以下再降一档） */
    body .hero h1,
    body .hero h2 {
        font-size: 30px;
        line-height: 1.35;
        margin-bottom: 16px;
        text-shadow: 0 2px 6px rgba(0, 0, 0, .45);
    }
    body .hero p {
        font-size: 16px;               /* 保持 16px，不缩到 15，可读性优先 */
        line-height: 1.7;
        margin-bottom: 26px;
        text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
    }
    body .hero-buttons {
        flex-direction: column;        /* 双按钮改纵向堆叠，全宽 */
        align-items: stretch;
        gap: 12px;
        padding: 0 12px;
    }
    body .hero-buttons .btn { justify-content: center; }
    body .hero-nav {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    body .hero-nav.prev { left: 8px; }
    body .hero-nav.next { right: 8px; }
    body .hero-dots { bottom: 18px; }

    /* 子页面 page-hero */
    body .page-hero { padding: 56px 0; }
    body .page-hero h1 { font-size: 28px; line-height: 1.4; }
    body .page-hero p  { font-size: 16px; padding: 0 8px; }

    /* ----------------------------------------------------------------
       3.5 数据条 / 统计
       ---------------------------------------------------------------- */
    body .stats-bar  { padding: 36px 0; }
    body .stats-inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
    }
    body .stat-number { font-size: 34px; }
    body .stat-label  { font-size: 14px; }

    /* ----------------------------------------------------------------
       3.6 网格：全部单列堆叠
       ---------------------------------------------------------------- */
    body .product-grid { grid-template-columns: 1fr; gap: 20px; }
    /* [P1 FRONT-004 2026-10-24] .cat-grid 从「单列堆叠」列表移出，
       768 断点下保持 2 列（见本节末尾的单独规则），避免卡片变成 3:1 横幅。 */
    body .cases-grid,
    body .case-grid,
    body .feature-grid,
    body .app-grid,
    body .adv-grid,
    body .cert-grid,
    body .selection-grid,
    body .advantage-grid,
    body .intro-grid,
    body .contact-grid,
    body .form-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    body .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 20px;
    }
    body .work-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    body .stats-inner { grid-template-columns: repeat(2, 1fr); }

    /* [P1 FRONT-004] 768 断点：分类卡片保持 2 列（每列约 350px，比例约 3:2） */
    body .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

    /* [P1 FRONT-004] 600 以下退回单列，避免卡片过窄 */
    @media (max-width: 600px) {
        body .cat-grid { grid-template-columns: 1fr; gap: 16px; }
    }

    /* 图片高度随屏幕收缩，避免手机上大图占满一屏 */
    body .product-img   { height: 220px; }
    body .product-mini-img { height: 180px; }
    body .case-img      { height: 200px; }
    body .cert-img      { height: 150px; }
    body .advantage-img { height: 240px; }
    body .intro-img     { min-height: 220px; }
    body .cat-card      { height: 240px; }

    /* 卡片内边距收紧 */
    body .product-body,
    body .case-body,
    body .advantage-content { padding: 20px; }
    body .product-mini-body { padding: 16px; }
    body .cat-card-content  { padding: 22px; }

    /* ----------------------------------------------------------------
       3.7 参数表格：横滚 + 表头吸附（无 wrapper 时的纯 CSS 兜底）
       display:block 让表格自己成为滚动容器，内部浏览器会自动生成
       匿名表格盒，列宽对齐不会乱
       ---------------------------------------------------------------- */
    body .tech-table {
        display: block;
        width: 100%;
        max-height: 70vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        margin: 16px 0;
        border: 1px solid var(--border);
        border-radius: var(--radius, 8px);
    }
    body .tech-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        white-space: nowrap;
        font-size: 14px;
        padding: 12px 14px;
    }
    body .tech-table td {
        white-space: nowrap;
        font-size: 14px;
        padding: 11px 14px;
    }
    /* 若表格被 .idt-table-wrap 包住，wrapper 已是滚动容器，
       这里要还原表格自身，避免双层滚动 */
    body .idt-table-wrap .tech-table {
        display: table;
        max-height: none;
        overflow: visible;
        border: 0;
        border-radius: 0;
        margin: 0;
    }

    /* ----------------------------------------------------------------
       3.8 横向滚动产品区：卡片改 85vw，保留 scroll-snap 手势滑动
       ---------------------------------------------------------------- */
    body .scroll-track,
    body .cert-scroll {
        gap: 14px;
        scroll-padding-left: 16px;
        padding-bottom: 14px;
        /* 让滚动区出血到屏幕边缘，卡片能"露半张"，暗示可滑动 */
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
    body .scroll-item {
        min-width: 85vw;
        max-width: 85vw;
        flex: 0 0 auto;
        /* 2026-10-23 连续滚动模式：移除 scroll-snap，触摸滑动与自动滚动均不吸附 */
    }
    /* 左右箭头在触屏上隐藏 —— 手势滑动更自然，且箭头会挡卡片 */
    body .scroll-nav { display: none; }

    /* 3.9 标题 / 正文 字号阶梯（正文一律保持 16px，统一走变量） */
    body .section-header h2,
    body .section-title,
    body .showcase-header h2,
    body .advantage-content h2 {
        font-size: var(--h2-fs, 32px);
        line-height: 1.35;
        margin-bottom: 12px;
    }
    body .section-subtitle,
    body .section-header p {
        font-size: 17px;
        margin-bottom: 32px;
    }
    body .cta-section h2 { font-size: var(--h2-fs, 32px); }
    body .cta-section p  { font-size: 16px; margin-bottom: 26px; }
    body .showcase-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 26px;
    }
    body .cat-card h3 { font-size: 20px; }
    body .product-body h3 { font-size: 19px; }
    body .case-body h4 { font-size: 17px; }

    /* ----------------------------------------------------------------
       3.10 间距（统一 60px）
       ---------------------------------------------------------------- */
    body .section,
    body .product-showcase,
    body .categories-section,
    body .cases-section,
    body .cert-section,
    body .advantage-section,
    body .cta-section {
        padding: 60px 0;
    }
    body .faq-section { padding: 60px 0; min-height: 0; }

    /* ----------------------------------------------------------------
       3.11 按钮 / CTA：最小 44px 触控区
       ---------------------------------------------------------------- */
    body .btn,
    body .btn-primary,
    body .btn-outline,
    body .btn-submit {
        min-height: 44px;
        padding: 12px 24px;
        font-size: 16px;
        justify-content: center;
    }
    body .cta-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 0 8px;
    }
    body .cta-buttons .btn { width: 100%; }
    /* .btn-link 是次级胶囊标签（13px），44px 会撑得过高，取 40px */
    body .btn-link {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        padding: 8px 16px;
        font-size: 14px;
    }
    body .product-mini-links { flex-wrap: wrap; gap: 8px; }

    /* ----------------------------------------------------------------
       3.12 FAQ
       ---------------------------------------------------------------- */
    body .faq-question {
        padding: 16px 18px;
        font-size: 16px;
        min-height: 44px;
        gap: 12px;
    }
    body .faq-answer {
        padding: 0 18px 16px;
        font-size: 15px;
    }
    /* 新 FAQ 模块移动端 */
    body .faq-ticker-wrap { padding: 10px 0; margin-bottom: 24px; }
    body .faq-ticker-item { min-width: 220px; max-width: 260px; padding: 4px 12px; }
    body .faq-ticker-title { font-size: 13px; }
    body .faq-ticker-summary { font-size: 11px; }
    body .faq-title { padding: 16px 18px 6px; font-size: 15px; }
    body .faq-summary { padding: 0 18px 8px; font-size: 13px; }
    body .faq-body { padding: 0 18px 16px; font-size: 14px; }

    /* ----------------------------------------------------------------
       3.13 页脚
       ---------------------------------------------------------------- */
    body .site-footer { padding: 26px 0 16px; }
    body .footer h3   { font-size: 16px; }
    body .footer ul li,
    body .footer-contact-item { font-size: 15px; }
    body .footer-bottom { font-size: 13px; padding-top: 12px; }
    /* 四行紧凑布局：窄屏允许换行，标题不强制留白 */
    body .footer-row { gap: 4px 14px; padding: 6px 0; flex-wrap: wrap; }
    body h3.footer-row-title { min-width: auto; }
    body .footer-quick-links-list { flex-wrap: wrap; }

    /* ----------------------------------------------------------------
       3.14 锚点偏移：sticky 头部变矮，偏移量同步调整
       ---------------------------------------------------------------- */
    body .anchor-target { scroll-margin-top: 60px; }
}


/* ==========================================================================
   [4] BP3 —— ≤480px：主流手机
   ========================================================================== */
@media (max-width: 480px) {

    body .container { padding: 0 16px; }

    /* 4.1 头部 */
    body .logo-icon { width: 100px; height: 44px; }
    body .logo-text { font-size: 20px; }
    body .main-nav {
        width: 100vw;
        max-width: 100vw;
        padding: 70px 18px 28px;
    }

    /* 4.2 Hero 再降一档 */
    body .hero,
    body .hero-slide { min-height: 400px; }
    body .hero { padding: 48px 0; }
    body .hero h1, body .hero h2 { font-size: 25px; margin-bottom: 12px; }
    body .hero p  { font-size: 15px; margin-bottom: 22px; }
    body .hero-badge { font-size: 12px; padding: 5px 12px; margin-bottom: 12px; }
    body .hero-nav { width: 36px; height: 36px; font-size: 16px; }
    body .hero-dots { bottom: 12px; }

    body .page-hero { padding: 44px 0; }
    body .page-hero h1 { font-size: 24px; }

    /* 4.3 统计改单列（数字+标签成对，视觉更稳，避免2列下长数字短语横向溢出） */
    body .stats-bar { padding: 28px 0; }
    body .stats-inner { grid-template-columns: 1fr; gap: 18px; }
    body .stat-number { font-size: 28px; }
    body .stat-label  { font-size: 13px; }

    /* 4.4 卡片图片再矮一点 */
    body .product-img   { height: 190px; }
    body .product-mini-img { height: 160px; }
    body .case-img      { height: 160px; }  /* 2026-10-29 案例卡瘦身 */
    body .cert-img      { height: 130px; }
    body .advantage-img { height: 200px; }
    body .cat-card      { height: auto; min-height: 210px; display: flex; align-items: flex-end; }
    body .cat-card-content { position: relative; bottom: auto; }

    /* 4.5 页脚单列 */
    body .footer-grid { grid-template-columns: 1fr; gap: 24px; }

    /* 4.6 横向滚动卡片：小屏上 85vw 太窄，放大到 88vw */
    body .scroll-item {
        min-width: 72vw;   /* 2026-10-29 案例卡瘦身: 一屏能多看一张 */
        max-width: 72vw;
    }
    body .scroll-track,
    body .cert-scroll {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
        scroll-padding-left: 12px;
    }

    /* 4.7 标题 */
    body .section-header h2,
    body .section-title,
    body .showcase-header h2,
    body .advantage-content h2,
    body .cta-section h2 { font-size: 24px; } /* 2026-10-23 手机端标题 22→24px */
    body .cat-card h3 { font-size: 18px; }
    body .product-body h3 { font-size: 18px; }

    /* 4.8 间距再收 */
    body .section,
    body .product-showcase,
    body .categories-section,
    body .cases-section,
    body .cert-section,
    body .advantage-section,
    body .cta-section { padding: 40px 0; }

    /* 4.9 表格字号 */
    body .tech-table thead th,
    body .tech-table td {
        font-size: 13px;
        padding: 10px 12px;
    }
}


/* ==========================================================================
   [5] 触控区 / 无障碍 / 打印
   ========================================================================== */

/* 5.1 触屏设备上禁用 hover 位移，避免"点一下卡住悬停态" */
@media (hover: none) and (pointer: coarse) {
    body .product-card:hover,
    body .product-mini-card:hover,
    body .case-card:hover,
    body .cat-card:hover,
    body .btn:hover,
    body .btn-primary:hover {
        transform: none;
    }
    /* :active 给即时反馈 */
    body .btn:active,
    body .btn-primary:active,
    body .btn-outline:active {
        transform: scale(.98);
        opacity: .92;
    }
}

/* 5.2 尊重系统的"减少动效"设置 */
@media (prefers-reduced-motion: reduce) {
    body *,
    body *::before,
    body *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 5.3 键盘可见焦点 */
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
body label:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* 5.4 打印：隐藏导航/轮播/CTA，内容单列 */
@media print {
    body .site-header,
    body .header,
    body .topbar,
    body .hero,
    body .cta-section,
    body .site-footer,
    body .scroll-nav,
    body .nav-overlay,
    body .container { max-width: 100%; padding: 0; }
    body .section { padding: 12px 0; }
}

/* 5.5 平板抽屉（769–1024px）：显示抽屉内关闭按钮
   该区间汉堡按钮在抽屉外，抽屉内若无关闭按钮，用户只能再点一次汉堡或遮罩/Esc 关闭；
   恢复 .nav-close 的可见性，补齐关闭路径（≤768px 仍由顶部 × 图标标签负责，不重复显示）。 */
@media (min-width: 769px) and (max-width: 1024px) {
    body .main-nav .nav-close {
        display: inline-flex !important;
        position: absolute;
        top: 18px;
        right: 18px;
        width: 36px;
        height: 36px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: var(--bg-card, var(--bg-soft));
        color: var(--primary);
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
    }
}


/* ==========================================================================
   [7] 组件样式 —— 留资表单 .idt-form
   ==========================================================================
   状态类：
       .idt-field.is-error / .field-error（兼容别名）  校验失败
       .idt-form-msg.is-error                          整表级错误提示
       .form-success / .idt-form-success（兼容别名）   提交成功态（挂在表单容器上）
   隐私提示、提交按钮文案请按实际业务填写，本文件只给样式与占位文案。
   ========================================================================== */

.idt-form {
    --idt-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--idt-radius);
    padding: 40px;
    box-shadow: 0 2px 12px rgba(26, 58, 92, .06);
    font-size: 16px;
}
.idt-form-head { margin-bottom: 26px; }
.idt-form-head h3 {
    font-size: 26px;
    color: var(--primary);
    margin-bottom: 8px;
    line-height: 1.4;
}
.idt-form-head p {
    font-size: 16px;
    color: var(--text-gray);
    line-height: 1.8;
}

/* 7.1 两列布局（桌面） */
.idt-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 20px;
}
.idt-field-full { grid-column: 1 / -1; }

/* 7.2 字段（复用 .idt-label / .idt-input / .idt-select / .idt-textarea） */
.idt-form .idt-field { margin-bottom: 0; }

/* 7.3 验证码行 */
.idt-captcha-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.idt-captcha-row .idt-input { flex: 1; min-width: 0; }
.idt-captcha-img {
    flex: 0 0 118px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-soft);
    overflow: hidden;
}
.idt-captcha-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idt-captcha-refresh {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .25s ease;
    padding: 0;
}
.idt-captcha-refresh:hover { border-color: var(--accent); background: var(--accent-light); }
/* CSS 绘制的"刷新"环形箭头，替代 emoji */
.idt-captcha-refresh::before {
    content: '';
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    border-right-color: transparent;
    transform: rotate(35deg);
}

/* 7.4 错误态（主类 .idt-field.is-error，另给 .field-error 兼容别名） */
.idt-field.is-error .idt-label,
.field-error > .idt-label { color: var(--err); }
.idt-field.is-error .idt-input,
.idt-field.is-error .idt-select,
.idt-field.is-error .idt-textarea,
.idt-field.is-error .idt-input-group,
.field-error .idt-input,
.field-error .idt-select,
.field-error .idt-textarea,
.field-error .idt-input-group {
    border-color: var(--err);
    box-shadow: 0 0 0 3px rgba(231, 76, 60, .12);
}

/* 7.5 整表级提示条 */
.idt-form-msg {
    display: none;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.7;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 18px;
}
.idt-form-msg::before {
    content: '';
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 3px;
    border-radius: 50%;
}
.idt-form-msg.is-error {
    display: flex;
    background: var(--err-soft);
    border: 1px solid var(--err-border);
    color: var(--err-text);
}
.idt-form-msg.is-error::before {
    border: 2px solid var(--err);
    background:
        linear-gradient(var(--err) 0 0) center/2px 7px no-repeat,
        radial-gradient(circle, var(--err) 0 2px, transparent 2px) center 100%/2px 2px no-repeat;
}

/* 7.6 隐私提示 */
.idt-privacy {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-light);
    background: var(--bg-light);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 20px 0 0;
}
.idt-privacy::before {
    content: '';
    width: 16px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 3px;
    border: 2px solid var(--border);
    border-radius: 3px;
    background:
        linear-gradient(90deg, var(--border) 0 100%) center top/8px 2px no-repeat;
}
.idt-privacy a { color: var(--accent-hover); text-decoration: underline; }

/* 7.7 提交按钮（辅色森林绿） */
.idt-form-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    flex-wrap: wrap;
}
.idt-btn-submit {
    min-height: 50px;
    padding: 0 40px;
    border: 0;
    border-radius: 8px;
    background: var(--ok);
    color: var(--text-on-dark-strong);
    font-size: 16px;
    font-weight: 600;
    font-family: var(--font, inherit);
    letter-spacing: 1px;
    cursor: pointer;
    transition: background-color .25s ease, transform .2s ease, box-shadow .25s ease;
    box-shadow: 0 4px 14px rgba(39, 174, 96, .28);
}
.idt-btn-submit:hover {
    background: var(--ok-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(39, 174, 96, .34);
}
.idt-btn-submit:active { transform: translateY(0); }
.idt-btn-submit:disabled {
    background: var(--ok-disabled);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}
.idt-form-actions .idt-form-tip {
    font-size: 13px;
    color: var(--text-light);
}

/* 7.8 提交成功态（容器加 .form-success / .idt-form-success） */
.form-success .idt-form-head,
.form-success .idt-form-msg,
.form-success .idt-form-body,
.idt-form-success .idt-form-head,
.idt-form-success .idt-form-msg,
.idt-form-success .idt-form-body { display: none; }
.idt-success-panel { display: none; text-align: center; padding: 32px 16px; }
.form-success .idt-success-panel,
.idt-form-success .idt-success-panel { display: block; }
/* CSS 绘制的对勾，替代 emoji */
.idt-success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--accent-light);
    border: 2px solid var(--accent);
    position: relative;
}
.idt-success-icon::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 46%;
    width: 22px;
    height: 12px;
    border-left: 3px solid var(--accent);
    border-bottom: 3px solid var(--accent);
    border-radius: 1px;
    transform: translate(-50%, -50%) rotate(-45deg);
}
.idt-success-panel h3 {
    font-size: 22px;
    color: var(--primary);
    margin-bottom: 12px;
}
.idt-success-panel p {
    font-size: 16px;
    color: var(--text-gray);
    line-height: 1.9;
    max-width: 460px;
    margin: 0 auto;
}
.idt-success-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
}

/* 7.9 表单响应式 */
@media (max-width: 768px) {
    .idt-form { padding: 26px 20px; }
    .idt-form-head h3 { font-size: 22px; }
    .idt-form-grid { grid-template-columns: 1fr; gap: 16px; }   /* 移动端强制单列 */
    .idt-form-actions { flex-direction: column; align-items: stretch; }
    .idt-btn-submit { width: 100%; padding: 0 20px; }
    .idt-form-actions .idt-form-tip { text-align: center; }
}
@media (max-width: 480px) {
    .idt-form { padding: 22px 16px; border-radius: 10px; }
    .idt-form-head h3 { font-size: 20px; }
    .idt-captcha-row { flex-wrap: nowrap; }
    .idt-captcha-img { flex: 0 0 92px; }
}

/* ==========================================================================
   附：给寇豆码的 3 段集成脚本（不要直接粘进 CSS，放到 js/ 里）
   --------------------------------------------------------------------------
   ① 参数表自动包 wrapper（让横滚 + sticky 表头生效，无需改 20 个 PHP）

      document.querySelectorAll('.tech-table').forEach(function (t) {
        if (t.parentElement.classList.contains('idt-table-wrap')) return;
        var w = document.createElement('div');
        w.className = 'idt-table-wrap';
        t.parentNode.insertBefore(w, t);
        w.appendChild(t);
      });

   ② 汉堡菜单（若保留现有 JS 方案，补上点击遮罩/链接后自动关闭）

      document.addEventListener('click', function (e) {
        var nav = document.getElementById('mainNav');
        var ov  = document.getElementById('navOverlay');
        if (!nav) return;
        if (e.target.closest('#mobileToggle') || e.target.closest('.idt-nav-label')) return;
        if (e.target.closest('a') && nav.contains(e.target)) {
          nav.classList.remove('open'); if (ov) ov.classList.remove('open');
        }
      });

   ③ [已废弃] 原 checkbox 方案点击链接收起 —— 现已并入 footer.php 的抽屉脚本，
      无需单独实现（DOM 中不再有 #idt-nav-toggle）。
   ========================================================================== */