/* ═══════════════════════════════════════════════════════════════════════════
   远骁GEO — 移动端（手机端）专用样式表
   ───────────────────────────────────────────────────────────────────────────
   作用：为全站模板提供手机端布局、触控优化与可读性修复。

   载入顺序（必须最后加载，以便覆盖 style.css / global.css 的桌面规则）：
     <link rel="stylesheet" href="{pboot:sitetplpath}/ziti/css/all.min.css">
     <link rel="stylesheet" href="{pboot:sitetplpath}/style.css">
     <link rel="stylesheet" href="{pboot:sitetplpath}/global.css">
     <link rel="stylesheet" href="{pboot:sitetplpath}/mobile.css">   ← 本文件

   设计原则：
     1. 只做「手机端增强」，桌面端零影响 —— 全部规则包裹在屏幕宽度断点内。
     2. 使用 min-width:0 修复 Grid/Flex 子项被内容撑破导致的横向溢出。
     3. 触控目标最小 44×44px（Apple HIG / Material 建议值）。
     4. 表单控件字号 ≥16px，避免 iOS Safari 聚焦时自动放大页面。
     5. 兼容 iPhone 刘海屏 / 灵动岛（env(safe-area-inset-*)）。
     6. 尊重「减少动态效果」系统偏好。
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   0. 移动端全局基础
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 触控设备专用 ── */
@media (hover: none) and (pointer: coarse) {
  /* iOS 点击高亮（灰块）去除 */
  * { -webkit-tap-highlight-color: transparent; }

  /* 触控设备上取消「悬停才出现」的位移动画，避免点击后元素卡在悬停态 */
  .btn:hover,
  .btn--primary:hover,
  .benefit-card:hover,
  .feature-card:hover,
  .pain-card:hover,
  .loop-step:hover .loop-step__icon,
  .social-proof__logo:hover,
  .back-to-top:hover,
  .case-card:hover,
  .news-card:hover,
  .pricing-card:hover,
  .about-image-badge:hover,
  .skill-card:hover,
  [class*="-card"]:hover,
  [class*="-item"]:hover {
    transform: none;
  }

  /* 可点击元素：确保最小触控尺寸 */
  .nav__link,
  .footer__links a,
  .mobile-menu__links a,
  .pagination a,
  .pagination span,
  .faq-q,
  .faq-question,
  .faq-row,
  [class*="-faq-q"],
  .case-btn,
  .compare-cta .btn,
  .btn,
  .btn--primary,
  .cta__btn,
  .form-group input,
  .form-group select,
  .form-group textarea,
  .btn-submit,
  .contact-form input,
  .contact-form textarea,
  .contact-form button,
  button,
  [role="button"] {
    min-height: 44px;
  }

  /* 行内文字链不强加 44px 高度，只放宽行高保证可点 */
  .footer__links a,
  .nav__link,
  .pagination a,
  .pagination span {
    min-height: 0;
  }
  .footer__links a,
  .pagination a,
  .pagination span {
    display: inline-flex;
    align-items: center;
  }

  /* 横向滚动容器：滚动惯性 + 不抢页面纵向滚动 */
  .compare-scroll,
  .med-table-wrap,
  .b2b-table-wrap,
  .svc-table-wrap,
  .gen-table-wrap,
  .partner-table-wrap,
  .table-wrap,
  [class*="-table-wrap"],
  [class*="-scroll"] {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   1. 平板及以下（≤1024px）—— 单栏化与纵向留白收敛
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── 1.1 全部「主内容 + 侧边栏」两栏布局统一降为单栏 ──
     注意：style.css 中 .news-layout / .detail-layout 在桌面定义为
     grid-template-columns:1fr 300px，若不在断点内显式覆盖，窄屏下正文列会被
     压到极窄甚至溢出。
     必须使用 !important：news.html 在元素上写了内联
     style="display:grid; grid-template-columns:1fr 300px; gap:40px"，内联样式
     优先级高于任何选择器，只有 !important 才能覆盖。 */
  .news-layout,
  .detail-layout,
  .faq-layout,
  .article-layout,
  .content-layout,
  .main-sidebar-layout,
  [class*="-layout"]:has(> aside) {
    grid-template-columns: 1fr !important;
    gap: var(--space-8) !important;
  }

  /* 侧边栏改为普通流式区块，不再固定/吸顶定位
     （news.html 在内联样式里写了 position:sticky; top:80px，同样需要 !important） */
  .detail-sidebar,
  .news-sidebar,
  .faq-sidebar,
  .sidebar-card,
  .sidebar-contact {
    position: static !important;
    top: auto !important;
    width: auto;
    max-width: 100%;
  }

  /* ── 1.2 详情页正文内边距收敛 ── */
  .detail-article {
    padding: var(--space-6) var(--space-5);
  }

  /* ── 1.3 首页 Hero：兜底覆盖（内联样式优先级低于 !important） ──
     正常情况下 index.html 已移除内联宽度，此处 !important 用于兼容
     尚未更新、仍带 style="width:50%" 的旧缓存页面。 */
  .hero__inner {
    flex-direction: column !important;
    gap: var(--space-8) !important;
    padding: var(--space-8) var(--container-padding) !important;
    min-height: auto !important;
    text-align: center;
  }
  .hero__left,
  .hero__visual {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  /* 移动端先看图后看字：产品截图更有说服力 */
  .hero__visual { order: -1; }
  .hero__cta,
  .hero__trust { justify-content: center; }

  /* ── 1.4 对比表容器内边距收敛 ── */
  .compare-wrapper { padding: var(--space-4); }

  /* ── 1.5 页脚 4 列 → 2 列 ── */
  .footer__grid { grid-template-columns: repeat(2, 1fr); }

  /* ── 1.6 行业方案页的「阶段区」两栏 → 单栏 ── */
  .med-stage,
  .b2b-stage,
  .svc-stage,
  .gen-stage,
  .partner-stage,
  .edu-stage,
  .med-stage-reverse,
  .b2b-stage-reverse,
  .svc-stage-reverse,
  .gen-stage-reverse,
  .partner-stage-reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: var(--space-6);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. 手机端（≤768px）—— 主战场
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ══════════════ 2.1 基础与防溢出 ══════════════ */
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Grid / Flex 子项允许收缩 —— 修复长英文、长 URL、长数字撑破布局 */
  .hero__inner > *,
  [class*="-grid"] > *,
  [class*="-layout"] > *,
  [class*="-inner"] > * {
    min-width: 0;
  }

  /* 长文本断行 */
  .detail-body,
  .article__body,
  .med-content,
  .b2b-content,
  .svc-content,
  .gen-content,
  .partner-content,
  .edu-content,
  [class*="-content"] {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* 图片永不溢出容器 */
  img, video, iframe, canvas, svg {
    max-width: 100%;
  }
  img, video { height: auto; }

  /* 内嵌视频保持 16:9 自适应 */
  iframe[src*="youtube"],
  iframe[src*="bilibili"],
  iframe[src*="youku"],
  iframe[src*="v.qq.com"] {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
  }

  /* ══════════════ 2.2 导航栏 ══════════════ */
  .nav__inner {
    height: 56px;
    padding: 0 var(--space-4);
  }
  .nav__brand {
    font-size: var(--text-base);
    gap: var(--space-2);
  }
  .nav__brand-icon {
    width: 28px;
    height: 28px;
  }
  /* 汉堡按钮：44×44 触控区，图标居中 */
  .nav__mobile-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -8px;
    padding: 0;
    font-size: 22px;
    color: var(--gray-900);
  }

  /* ══════════════ 2.3 移动端抽屉菜单 ══════════════ */
  .mobile-menu {
    /* 兼容不支持 backdrop-filter 的浏览器 */
    background: rgba(12, 10, 9, 0.55);
  }
  .mobile-menu__panel {
    /* 屏幕上占约 82%，避免大屏平板出现 280px 过窄的观感 */
    width: min(82vw, 320px);
    padding: var(--space-6) var(--space-6) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-menu__links {
    margin-top: var(--space-8);
    gap: 0;
  }
  .mobile-menu__links a {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--gray-100);
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .mobile-menu__links a:active {
    color: var(--brand-600);
  }
  .mobile-menu__close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ---- 兼容旧版内页导航（.navbar / .logo / .nav-links / .mobile-menu-box）----
     部分内页（如 free-audit.html）使用早期导航结构，这里一并做移动端兜底。 */
  .navbar-inner { height: 56px; }
  .navbar .logo { font-size: var(--text-base); }
  .navbar .logo-icon {
    width: 30px;
    height: 30px;
    font-size: var(--text-base);
  }
  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
  }
  .navbar + .mobile-menu,
  .navbar .mobile-menu {
    display: none;
  }
  .navbar .mobile-menu.open {
    display: block;
    padding: var(--space-3) var(--space-4) var(--space-5);
  }
  .navbar .mobile-menu a {
    padding: var(--space-3) var(--space-2);
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* ══════════════ 2.4 标题与正文字号（可读性 + 防 iOS 缩放）══════════════ */
  .hero__title {
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.3 !important;
    margin: var(--space-4) 0 var(--space-5) !important;
    letter-spacing: -0.01em !important;
  }
  .hero__subtitle {
    font-size: var(--text-base) !important;
    line-height: var(--leading-relaxed) !important;
    margin-bottom: var(--space-6) !important;
    max-width: 100% !important;
  }
  .hero__badge {
    font-size: 11px !important;
    padding: var(--space-1) var(--space-3) !important;
    white-space: normal;
    text-align: left;
    line-height: 1.5;
  }
  .section__title,
  .cta__title,
  .page-hero-title {
    font-size: clamp(21px, 5.6vw, 28px) !important;
    line-height: 1.35 !important;
    letter-spacing: -0.01em !important;
  }
  .section__desc,
  .cta__sub,
  .page-hero-desc {
    font-size: var(--text-base) !important;
    line-height: var(--leading-relaxed) !important;
  }
  .feature-showcase__title { font-size: var(--text-xl) !important; }
  .feature-showcase__desc { font-size: var(--text-base); }

  /* 页面级 h1/h2 兜底（含内联 h2/h3 样式覆盖） */
  .page-hero { padding: 64px 0 40px !important; }
  .page-hero-title { font-size: clamp(22px, 6vw, 30px) !important; }
  .page-hero-desc { font-size: var(--text-base) !important; }

  /* ══════════════ 2.5 通用区块留白收敛 ══════════════ */
  .section,
  .pain-section,
  .why-section,
  .loop-section,
  .pricing-section,
  .testi-section,
  .compare-section,
  .case-section,
  .news-section,
  .about-section,
  .detail-section,
  .faq-section,
  .med-section,
  .b2b-section,
  .svc-section,
  .gen-section,
  .partner-section,
  .edu-section,
  .cta-sec,
  [class*="-section"] {
    padding: var(--space-12) var(--space-4) !important;
  }
  .section__header,
  [class*="section__header"] {
    margin-bottom: var(--space-8);
  }

  /* 容器左右留白统一 16px，给内容更多宽度（360px 屏幕可用 328px） */
  .container,
  .hero__inner,
  .section__inner,
  .footer__inner,
  .section-inner,
  [class*="__inner"] {
    padding-left: var(--space-4) !important;
    padding-right: var(--space-4) !important;
  }

  /* ══════════════ 2.6 首页 Hero 仪表盘截图 ══════════════ */
  /* Hero 区块自身：min-height:100vh 在手机上会把首屏撑得过高，
     并让 CTA 按钮落到折叠线以下；改为内容自适应并收紧导航留白。
     !important 是必需的：13 个内页（solution-*、news、faq、cases、contact 等）
     都在 <section class="hero" style="min-height:auto; padding:100px 0 40px"> 上
     写了内联 padding，只有 !important 能压过内联样式。 */
  .hero {
    min-height: auto !important;
    padding-top: 76px !important;
    padding-bottom: var(--space-10) !important;
  }
  /* 内页 hero 内部包裹层用了内联 max-width，这里放宽并居中 */
  .hero__inner > div {
    max-width: 100% !important;
  }
  .hero__dashboard-body {
    min-height: 200px !important;
  }
  .hero__dashboard-url { font-size: 11px !important; }
  /* 产品截图在手机上不做缩放位移，避免模糊与错位 */
  .hero__visual { transform: none !important; max-width: 100% !important; }

  /* ── Hero 内联样式补位（index.html 已抽离，这里保证最终视觉）── */
  .hero__left .hero__title {
    font-size: clamp(24px, 7vw, 32px) !important;
    margin: var(--space-4) 0 var(--space-5) !important;
  }
  .hero__left .hero__subtitle {
    font-size: var(--text-base) !important;
    margin-bottom: var(--space-6) !important;
  }
  .hero__cta {
    margin-bottom: var(--space-6) !important;
    justify-content: center;
  }
  .hero__cta-btn {
    width: 100% !important;
    max-width: 100% !important;
    padding: var(--space-4) var(--space-5) !important;
    font-size: var(--text-base) !important;
    justify-content: center;
    min-height: 50px;
    /* 手机上投影收敛，避免视觉过重 */
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.28) !important;
  }
  /* 触控设备不保留 hover 位移 */
  .hero__cta-btn:hover { transform: none; }
  .hero__dashboard-dots span { width: 10px; height: 10px; }
  .hero__trust { gap: var(--space-3); }
  .hero__trust-item {
    justify-content: center;
    text-align: center;
    font-size: 11px;
    line-height: 1.6;
  }
  .hero__dashboard-body img { border-radius: 3px; }

  /* ══════════════ 2.7 行业标签跑马灯 ══════════════ */
  .social-proof { padding: var(--space-8) 0; }
  .social-proof__track { animation-duration: 26s; gap: var(--space-6); }
  .social-proof__logo {
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-4);
  }
  .social-proof__header { margin-bottom: var(--space-5); }
  .social-proof__label { font-size: 11px; }

  /* ══════════════ 2.8 痛点卡片 ══════════════ */
  .pain-card {
    padding: var(--space-5) !important;
    border-radius: var(--radius-xl);
  }
  .pain-card__title { font-size: var(--text-lg) !important; }
  .pain-card__desc { font-size: var(--text-sm) !important; }

  /* ══════════════ 2.9 对比表格：横向滚动 + 首列吸附 ══════════════ */
  .compare-wrapper {
    padding: var(--space-2) !important;
    border-radius: var(--radius-lg) !important;
  }
  .compare-scroll {
    overflow-x: auto;
    /* 让用户明确知道可以左右滑 */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .home-compare-table {
    /* 手机端字号保持可读，不再继续缩小 */
    font-size: 12px !important;
    min-width: 560px !important;
  }
  .home-compare-table thead th,
  .home-compare-table tbody td {
    padding: 10px 8px !important;
    font-size: 12px !important;
    line-height: 1.5;
  }
  .home-compare-table thead th:first-child,
  .home-compare-table tbody td:first-child {
    padding-left: 10px !important;
    font-size: 12px !important;
  }
  /* 首列「对比维度」吸附在左侧，横向滚动时不丢失参照 */
  .home-compare-table thead th:first-child,
  .home-compare-table tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--gray-0);
    box-shadow: 2px 0 4px -2px rgba(12, 10, 9, 0.12);
  }
  .home-compare-table thead th:first-child {
    background: var(--brand-700);
  }
  .home-compare-table tbody tr:nth-child(even) td:first-child {
    background: var(--gray-50);
  }

  /* 其它行业表格统一可横向滚动 */
  .med-compare-wrap,
  .b2b-compare-wrap,
  .svc-compare-wrap,
  .gen-compare-wrap,
  .partner-compare-wrap,
  .med-table-wrap,
  .b2b-table-wrap,
  .svc-table-wrap,
  .gen-table-wrap,
  .partner-table-wrap,
  .table-wrap,
  [class*="-table-wrap"],
  [class*="-compare-wrap"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .med-compare-table,
  .b2b-compare-table,
  .svc-compare-table,
  .gen-compare-table,
  .partner-compare-table,
  .med-industry-table,
  .b2b-industry-table,
  .svc-industry-table,
  .gen-industry-table,
  .partner-industry-table,
  /* 以下两类原先遗漏：edu- 前缀的表格在 style.css 中没有 min-width，
     手机上会被压成一列窄字而不出现横向滚动 */
  .edu-compare-table,
  .edu-industry-table {
    min-width: 520px;
  }
  /* 通用兜底：任何位于可滚动容器内的表格都不应挤出屏幕 */
  [class*="-compare-table"],
  [class*="-industry-table"] {
    width: 100%;
  }

  /* ══════════════ 2.10 三大壁垒（图文交替区）══════════════ */
  .feature-showcase,
  .feature-showcase--reverse {
    grid-template-columns: 1fr !important;
    gap: var(--space-6) !important;
    direction: ltr !important;
  }
  .feature-showcase__visual { order: -1; }
  .feature-showcase__frame { border-radius: var(--radius-lg); }
  .feature-showcase__screen,
  .feature-showcase__placeholder {
    min-height: 200px !important;
  }
  .feature-showcase__list li {
    font-size: var(--text-sm);
    line-height: 1.65;
    align-items: flex-start;
  }
  .feature-showcase__badge {
    font-size: 11px;
    line-height: 1.5;
    white-space: normal;
  }

  /* ══════════════ 2.11 五步闭环流程：纵向步骤 + 序号化 ══════════════ */
  .loop-path {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--space-4);
    align-items: stretch;
    /* 用左侧竖线替代横向箭头，形成清晰的时间线 */
    border-left: 2px dashed var(--brand-200);
    padding-left: var(--space-5);
    margin-left: var(--space-2);
  }
  .loop-arrow { display: none !important; }
  .loop-step {
    max-width: 100% !important;
    width: 100%;
    text-align: left;
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: var(--space-3);
    align-items: center;
    background: var(--gray-0);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
  }
  .loop-step__icon {
    width: 44px;
    height: 44px;
    margin: 0;
    font-size: 18px;
    grid-row: span 2;
    border-width: 2px;
  }
  .loop-step__title {
    font-size: var(--text-base);
    margin-bottom: 2px;
    text-align: left;
  }
  .loop-step__desc {
    font-size: var(--text-xs);
    padding: 0;
    text-align: left;
    line-height: 1.6;
  }
  .loop-compare {
    grid-template-columns: 1fr !important;
    gap: var(--space-3);
    margin-top: var(--space-8);
  }
  .loop-compare__item {
    padding: var(--space-4) !important;
    font-size: var(--text-sm) !important;
    align-items: flex-start;
    line-height: 1.65;
  }

  /* ══════════════ 2.12 定价区 ══════════════ */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-5);
  }
  .pricing-card {
    padding: var(--space-5) !important;
    border-radius: var(--radius-xl);
  }
  .pricing-card.featured::before {
    top: 12px;
    right: 12px;
    font-size: 11px;
    padding: 3px 10px;
  }
  .price-card__head h3 { font-size: var(--text-lg) !important; }

  /* 8 大免费权益：2 列更省纵向空间，360px 下仍然可读 */
  .free-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-2) !important;
  }
  .free-item {
    font-size: var(--text-sm) !important;
    line-height: 1.6;
    align-items: flex-start;
  }

  /* 价格对比行：由「一行三列」改为纵向堆叠，避免挤压换行错乱 */
  .price-row {
    display: block;
    padding: var(--space-4) 0;
  }
  .price-row__label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm) !important;
  }
  .price-row__val {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
  }
  .price-our { font-size: var(--text-base) !important; }
  .price-oth { font-size: var(--text-xs); }
  .price-save { font-size: var(--text-xs); }
  .price-foot {
    font-size: var(--text-sm);
    line-height: 1.6;
    padding: var(--space-4);
  }

  /* ══════════════ 2.13 客户证言与数据统计 ══════════════ */
  .testi-grid { grid-template-columns: 1fr !important; gap: var(--space-4); }
  .testi-card { padding: var(--space-5); }
  .testi-card__text { font-size: var(--text-sm) !important; line-height: 1.75; }

  .stats-row {
    grid-template-columns: 1fr !important;
    gap: var(--space-4);
    margin-top: var(--space-8);
  }
  .stat-item {
    padding: var(--space-5) var(--space-4);
    background: var(--gray-0);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
  }
  .stat-num { font-size: var(--text-4xl) !important; }
  .stat-label { font-size: var(--text-sm) !important; line-height: 1.55; }

  /* ══════════════ 2.14 底部 CTA ══════════════ */
  .cta-sec { padding: var(--space-12) var(--space-4) !important; }
  .cta__inner { max-width: 100%; }
  .cta__actions,
  .hero__cta {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: stretch;
  }
  .cta__btn,
  .btn--lg {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center;
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-base);
    min-height: 48px;
  }
  .cta__note {
    font-size: var(--text-xs);
    line-height: 1.7;
    display: block;
  }

  /* ══════════════ 2.15 页脚 ══════════════ */
  .footer { padding: var(--space-10) 0 calc(var(--space-8) + env(safe-area-inset-bottom, 0px)); }
  .footer__grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
  }
  .footer__brand { margin-bottom: var(--space-3); }
  .footer__desc { font-size: var(--text-sm); line-height: 1.7; }
  .footer__title {
    font-size: var(--text-base) !important;
    margin-bottom: var(--space-3);
  }
  .footer__links li { margin-bottom: var(--space-1); }
  .footer__links a {
    font-size: var(--text-sm) !important;
    padding: var(--space-2) 0;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .footer__bottom {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
    padding-top: var(--space-6);
    margin-top: var(--space-6);
  }
  .footer__copy {
    font-size: var(--text-xs) !important;
    line-height: 1.7;
  }

  /* ══════════════ 2.16 案例页与案例弹窗 ══════════════ */
  .case-grid { grid-template-columns: 1fr !important; gap: var(--space-4) !important; }
  .case-card { padding: var(--space-5) !important; }
  .case-card h3 { font-size: var(--text-lg); }

  /* 弹窗全屏化体验：高度自适应、底部按钮不被刘海遮挡 */
  .case-modal,
  .modal {
    padding: var(--space-3);
    align-items: flex-end;
  }
  .case-modal-box,
  .modal-box {
    max-width: 100%;
    width: 100%;
    max-height: 90vh;
    max-height: 90dvh;
    border-radius: var(--radius-xl);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .case-modal-top,
  .modal-top {
    height: 120px;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
  .case-modal-body,
  .modal-body { padding: var(--space-5); }
  .case-modal-body h2,
  .modal-body h2 { font-size: var(--text-lg); }
  .case-modal-close,
  .modal-close {
    width: 44px;
    height: 44px;
    top: 12px;
    right: 12px;
  }

  /* ══════════════ 2.17 新闻 / 资讯列表与侧栏 ══════════════ */
  /* news.html 在 <section> 与内层容器上写了内联 padding（60px 0 80px 等），
     通用 [class*="-section"] 规则依赖 !important 才能生效，这里再显式声明一次。 */
  .news-section { padding: var(--space-12) var(--space-4) !important; }
  .news-section__inner { padding: 0 !important; }
  .news-list { gap: var(--space-3); }
  .news-card { padding: var(--space-5) !important; }
  .news-sidebar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-4) !important;
    position: static !important;
  }
  .sidebar-card { padding: var(--space-5); }
  .sidebar-card__title { font-size: var(--text-base); }
  .sidebar-link a { font-size: var(--text-sm); line-height: 1.6; }
  .sidebar-contact { padding: var(--space-5); }
  /* 侧栏内固定 font-size:11~13px 的元信息，手机端统一提到可读下限 */
  .news-card__meta,
  .news-card__tag,
  .news-card__date { font-size: var(--text-xs) !important; }
  .news-card__title { font-size: var(--text-lg) !important; line-height: 1.45; }
  .news-card__desc { font-size: var(--text-sm) !important; line-height: 1.7; }

  /* ══════════════ 2.18 文章详情正文 ══════════════ */
  .detail-body,
  .article__body,
  .detail-content,
  .article-content {
    font-size: var(--text-base) !important;
    line-height: 1.85 !important;
  }
  .detail-body img,
  .article__body img,
  .detail-content img,
  .article-content img {
    border-radius: var(--radius-md);
    margin: var(--space-4) 0;
  }
  /* 正文中的表格允许横向滚动 */
  .detail-body table,
  .article__body table,
  .detail-content table,
  .article-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* 正文长代码/预格式文本折行 */
  .detail-body pre,
  .article__body pre,
  .detail-content pre,
  .article-content pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 13px;
  }
  .detail-body h2,
  .article__body h2 { font-size: var(--text-xl) !important; margin: var(--space-6) 0 var(--space-3); }
  .detail-body h3,
  .article__body h3 { font-size: var(--text-lg) !important; margin: var(--space-5) 0 var(--space-3); }
  /* 上一篇 / 下一篇改为纵向堆叠，标题不溢出 */
  .detail-nav {
    flex-direction: column;
    gap: var(--space-3);
  }
  .detail-nav__item { width: 100%; }
  .article-meta { font-size: var(--text-xs); gap: var(--space-3); }

  /* ══════════════ 2.19 FAQ 手风琴 ══════════════ */
  .faq-q,
  .faq-question,
  [class*="-faq-q"] {
    font-size: var(--text-base) !important;
    padding: var(--space-4) 0 !important;
    align-items: flex-start;
    line-height: 1.6;
  }
  .faq-a,
  .faq-answer,
  [class*="-faq-a"] {
    font-size: var(--text-sm) !important;
    line-height: 1.8 !important;
  }
  .faq-item { padding: var(--space-4) 0 !important; }
  /* 分类筛选按钮：横向滚动而非换行堆叠 */
  .faq-filter,
  .faq-filter-btn-wrap {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
    scrollbar-width: none;
  }
  .faq-filter::-webkit-scrollbar { display: none; }
  .faq-filter-btn {
    flex: 0 0 auto;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-4);
  }

  /* ══════════════ 2.20 表单（含 iOS 自动放大修复）══════════════ */
  .form-container,
  .contact-form,
  [class*="form-container"] {
    padding: var(--space-5) !important;
    border-radius: var(--radius-xl);
  }
  .form-row {
    flex-direction: column;
    gap: var(--space-4);
  }
  .form-group {
    min-width: 0 !important;
    width: 100%;
  }
  /* 字号必须 ≥16px：iOS Safari 对 <16px 的输入框会自动放大整页 */
  .form-group input,
  .form-group select,
  .form-group textarea,
  .contact-form input,
  .contact-form textarea,
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="search"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important;
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
  }
  textarea { min-height: 120px; }
  .btn-submit,
  .contact-form button,
  button[type="submit"] {
    min-height: 50px;
    font-size: var(--text-base);
    padding: var(--space-4) var(--space-5);
  }

  /* ══════════════ 2.21 关于我们 / 联系我们 ══════════════ */
  .about-intro { grid-template-columns: 1fr !important; gap: var(--space-6) !important; }
  .about-image { order: -1; }
  .about-image img { border-radius: var(--radius-xl); }
  .about-text h2 { font-size: var(--text-2xl) !important; }
  .about-body p { font-size: var(--text-base); line-height: 1.85; }
  .about-tags { flex-wrap: wrap; gap: var(--space-2); }
  .about-tag { font-size: var(--text-xs); }

  /* 联系我们：浅色横幅由横向改为纵向 */
  .light-contact-banner {
    flex-direction: column !important;
    text-align: center;
    padding: var(--space-6) var(--space-5) !important;
    gap: var(--space-5) !important;
    border-radius: var(--radius-xl) !important;
  }
  .light-contact-banner img,
  .light-contact-banner .qr-code,
  .light-contact-banner [class*="qr"] {
    width: 160px !important;
    height: 160px !important;
    margin: 0 auto;
  }
  .contact-info { gap: var(--space-4); }
  .contact-item { align-items: flex-start; }
  .contact-item .ci-ico { width: 40px; height: 40px; }

  /* ══════════════ 2.22 行业方案页（med- / b2b- / svc- / gen- / partner- / edu-）══════════════ */
  /* 三类/四类卡片网格统一单栏 */
  .med-feature-grid,
  .med-pain-grid,
  .med-milestones,
  .med-case-grid,
  .b2b-feature-grid,
  .b2b-pain-grid,
  .b2b-milestones,
  .b2b-case-grid,
  .svc-feature-grid,
  .svc-pain-grid,
  .svc-milestones,
  .svc-case-grid,
  .gen-feature-grid,
  .gen-pain-grid,
  .gen-milestones,
  .gen-case-grid,
  .partner-feature-grid,
  .partner-pain-grid,
  .partner-milestones,
  .partner-case-grid,
  .edu-feature-grid,
  .edu-pain-grid,
  .edu-milestones,
  .edu-case-grid,
  [class*="-feature-grid"],
  [class*="-pain-grid"] {
    grid-template-columns: 1fr !important;
    gap: var(--space-4);
  }

  /* 决策路径箭头旋转为向下 */
  .med-path-arrow,
  .b2b-path-arrow,
  .svc-path-arrow,
  .gen-path-arrow,
  .partner-path-arrow,
  [class*="-path-arrow"] {
    transform: rotate(90deg);
    margin: var(--space-2) auto;
  }
  .med-path-steps,
  .b2b-path-steps,
  .svc-path-steps,
  .gen-path-steps,
  .partner-path-steps,
  [class*="-path-steps"] {
    flex-direction: column;
  }

  /* 卡片内边距收敛 */
  .med-feature-card,
  .med-pain-card,
  .med-case-card,
  .b2b-feature-card,
  .b2b-pain-card,
  .b2b-case-card,
  .svc-feature-card,
  .svc-pain-card,
  .svc-case-card,
  .gen-feature-card,
  .gen-pain-card,
  .gen-case-card,
  .partner-feature-card,
  .partner-pain-card,
  .partner-case-card,
  .edu-feature-card,
  .edu-pain-card,
  [class*="-feature-card"],
  [class*="-case-card"] {
    padding: var(--space-5) !important;
    /* min-width:0 是必需的：.edu-pain-grid / .edu-feature-grid 在
       style.css 末尾被定义为 repeat(auto-fit, minmax(240px,1fr))，
       轨道有 240px 硬下限，360px 屏幕上卡片不收缩就会横向溢出。 */
    min-width: 0 !important;
  }

  /* 方案页演示截图占位高度收敛 */
  .med-stage-image-placeholder,
  .b2b-stage-image-placeholder,
  .svc-stage-image-placeholder,
  .gen-stage-image-placeholder,
  .partner-stage-image-placeholder {
    min-height: 160px;
    padding: var(--space-5) var(--space-4);
  }
  [class*="stage-image-placeholder"] i { font-size: 28px; }
  [class*="stage-image-placeholder"] p { font-size: var(--text-base); }

  /* 方案页内「成果/标签」清单用了内联 font-size:13px + line-height:1.8，
     手机端字号偏小，统一提升到可读下限（!important 用于压过内联样式）。 */
  .edu-case-grid,
  .edu-case-grid li,
  .edu-case-label,
  .edu-case-col,
  .med-case-grid,
  .med-case-grid li,
  .b2b-case-grid,
  .b2b-case-grid li {
    font-size: var(--text-base) !important;
    line-height: 1.7 !important;
  }
  /* 方案页流程时间轴（solution-agency.html 页面级样式，桌面为横向 flex） */
  .edu-timeline-item {
    gap: var(--space-3) !important;
  }
  .edu-timeline-content {
    font-size: var(--text-sm);
    line-height: 1.7;
  }
  .edu-profit-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-3) !important;
  }
  .edu-profit-num { font-size: var(--text-2xl); }
  .edu-profit-label,
  .edu-profit-detail { font-size: var(--text-xs); line-height: 1.6; }
  /* 方案页指挥中心卡片（solution-general.html 页面级样式） */
  .edu-cc-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-3) !important;
  }
  .edu-cc-card { padding: var(--space-4); }
  .edu-cc-task-desc,
  .edu-cc-desc { font-size: var(--text-xs); line-height: 1.6; }

  /* 方案页高亮提示框 */
  .med-highlight-box,
  .b2b-highlight-box,
  .svc-highlight-box,
  .gen-highlight-box,
  .partner-highlight-box,
  .edu-highlight-box {
    padding: var(--space-5) !important;
    font-size: var(--text-sm);
    line-height: 1.75;
  }

  /* 方案页「自检工具」：下拉框与按钮由并排改为上下堆叠，
     否则 360px 屏幕上 select 会被压缩到无法阅读选项文字 */
  .edu-tool-box {
    padding: var(--space-5) var(--space-4) !important;
  }
  .edu-tool-row {
    grid-template-columns: 1fr !important;
    gap: var(--space-3);
  }
  .edu-tool-row select,
  .edu-tool-row button,
  .edu-tool-row .btn {
    width: 100% !important;
    min-height: 48px;
    justify-content: center;
    font-size: 16px !important;
  }

  /* ══════════════ 2.23 帮助手册页（help.html / help.php）══════════════
     说明：帮助手册页不加载本文件（它是独立页面，只加载 help.css），
     且 help.css 自身已含 1024/768/600px 三档响应式规则。
     为避免两套规则互相覆盖，这里不再重复定义 .bdoc-* 样式。 */

  /* ══════════════ 2.24 返回顶部按钮：抬高避让底部安全区 ══════════════ */
  .back-to-top {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    width: 44px;
    height: 44px;
  }

  /* ══════════════ 2.25 通用工具类 ══════════════ */
  .hide-mobile { display: none !important; }
  /* 内联 style="display:flex" 的通用容器在手机上纵向堆叠 */
  .stack-mobile {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .text-center-mobile { text-align: center !important; }

  /* 语义化换行：桌面用 <br class="hide-mobile">，手机端也可显式使用 */
  br.show-mobile { display: inline; }
}
@media (min-width: 769px) {
  br.show-mobile { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. 小屏手机（≤480px，如 iPhone SE / 安卓 360px）—— 进一步压缩
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  .hero__title { font-size: clamp(22px, 7.4vw, 28px) !important; }
  .section__title,
  .cta__title,
  .page-hero-title { font-size: clamp(19px, 6.2vw, 24px) !important; }

  /* 更紧凑的区块留白，减少滚动长度 */
  .section,
  .pain-section,
  .why-section,
  .loop-section,
  .pricing-section,
  .testi-section,
  .compare-section,
  .case-section,
  .news-section,
  .about-section,
  .detail-section,
  .faq-section,
  .cta-sec,
  [class*="-section"] {
    padding: var(--space-10) var(--space-3) !important;
  }
  .container,
  .hero__inner,
  .section__inner,
  .footer__inner,
  [class*="__inner"] {
    padding-left: var(--space-3) !important;
    padding-right: var(--space-3) !important;
  }

  /* 统计数字缩小，避免 48px 在大字重下换行错位 */
  .stat-num { font-size: var(--text-3xl) !important; }

  /* 权益清单字号再降一档 */
  .free-item { font-size: var(--text-xs) !important; }

  /* 对比表首列吸附宽度收紧 */
  .home-compare-table { min-width: 520px !important; font-size: 11px !important; }
  .home-compare-table thead th,
  .home-compare-table tbody td { padding: 8px 6px !important; font-size: 11px !important; }
  .home-compare-table thead th:first-child,
  .home-compare-table tbody td:first-child { font-size: 11px !important; padding-left: 8px !important; }

  /* 移动端抽屉菜单占满更多宽度，便于点击 */
  .mobile-menu__panel { width: min(88vw, 320px); }

  /* 弹窗贴近底部卡片式呈现 */
  .case-modal,
  .modal { padding: var(--space-2); }
  .case-modal-top,
  .modal-top { height: 100px; }

  /* 表单内边距进一步收紧，保证 360px 下输入区足够宽 */
  .form-container,
  .contact-form,
  [class*="form-container"] { padding: var(--space-4) !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. 横屏手机（高度受限）—— 避免导航与首屏内容被裁切
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .nav__inner { height: 52px; }
  .hero { min-height: auto; padding-top: 72px; padding-bottom: var(--space-8); }
  .hero__inner { min-height: auto !important; }
  .hero__dashboard-body { min-height: 150px !important; }
  .mobile-menu__panel { padding-top: var(--space-6); }
  .mobile-menu__links { margin-top: var(--space-5); }
  .mobile-menu__links a { padding: var(--space-3) 0; min-height: 44px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. 无障碍与系统偏好
   ═══════════════════════════════════════════════════════════════════════════ */

/* 减少动态效果：关闭跑马灯与入场动画，元素直接可见 */
@media (prefers-reduced-motion: reduce) {
  .social-proof__track { animation: none !important; }
  .reveal,
  .scroll-fade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .mobile-menu,
  .mobile-menu__panel { transition: none !important; }
}

/* 高对比度模式下强化焦点可见性 */
@media (prefers-contrast: more) {
  .nav,
  .mobile-menu__panel,
  .pricing-card,
  .case-card,
  .news-card {
    border: 1px solid var(--gray-400);
  }
}

/* 键盘焦点可见（移动端外接键盘 / 桌面窄窗口同样适用） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. 移动端专用组件（可选增强）
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 6.1 移动端底部固定转化条 ──
   用法：在页面底部加入以下结构（可放在 footer.html 的 </footer> 之后）
   <div class="mobile-cta-bar">
     <a href="https://www.yxgeo.com/dashboard/login" class="mobile-cta-bar__btn">
       <i class="fas fa-rocket"></i> 免费注册
     </a>
     <a href="tel:400-000-0000" class="mobile-cta-bar__btn mobile-cta-bar__btn--ghost">
       <i class="fas fa-phone"></i> 电话咨询
     </a>
   </div>
   说明：仅在 ≤768px 显示，并为页面预留等高底部内边距，防止遮挡页脚内容。 */
.mobile-cta-bar { display: none; }

@media (max-width: 768px) {
  .mobile-cta-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-sticky);
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    background: rgba(250, 250, 249, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--gray-200);
    box-shadow: 0 -4px 16px rgba(12, 10, 9, 0.07);
  }
  .mobile-cta-bar__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 46px;
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    background: var(--brand-600);
    color: #fff;
    text-align: center;
  }
  .mobile-cta-bar__btn--ghost {
    background: var(--gray-0);
    color: var(--gray-800);
    border: 1px solid var(--gray-200);
  }
  .mobile-cta-bar__btn:active { opacity: 0.85; }

  /* 有固定转化条时，避免返回顶部按钮与其重叠 */
  body.has-mobile-cta-bar .back-to-top {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
  body.has-mobile-cta-bar .footer {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── 6.2 横向滚动区域提示阴影（暗示可滑动）── */
@media (max-width: 768px) {
  .compare-wrapper { position: relative; }
  .compare-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 18px;
    pointer-events: none;
    background: linear-gradient(to left, rgba(12, 10, 9, 0.07), transparent);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  }
}