/* ============================================================
 * mobile.css —— 移动端布局层（≤768px）
 * ------------------------------------------------------------
 * 目的：移动端不是把桌面版等比压窄，而是按手机的使用方式重排。
 *   桌面：3 列网格、大留白、鼠标悬停、横向扫视
 *   手机：1~2 列、拇指可达、纵向节奏、触摸目标 ≥44px
 *
 * 约束：本文件所有规则都写在 @media (max-width: 768px) 内，
 * 桌面端（≥769px）零影响。加载顺序在页面自身样式之后，
 * 同优先级选择器直接覆盖。
 *
 * 分六组：
 *   1  基础与触摸目标
 *   2  首屏（一屏内讲完价值主张 + 露出演示）
 *   3  卡片密度（把"每块内容各占一屏"压成正常节奏）
 *   4  产品功能墙（45 项从单列改双列）
 *   5  横向模块（logo 墙、Tab 条）
 *   6  页脚与底部操作条
 * ============================================================ */

@media (max-width: 768px) {

  /* ============================================================
     1. 基础与触摸目标
     ============================================================ */

  html { -webkit-text-size-adjust: 100%; }

  body {
    -webkit-tap-highlight-color: transparent;
  }

  /* 只有真正注入了底部操作条的页面才需要这段留白（见 common.js） */
  body.has-cta-bar {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  /* 小屏上最容易被忽略的：可点区域小于 44px。
     Apple HIG / Material 都建议 ≥44×44。 */

  /* 导航栏：桌面用 90% 白 + 毛玻璃，滚过深色区块时那 10% 会透出灰影，
     手机上既脏又费性能。移动端直接给实底、去掉 blur。 */
  .nav {
    background: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 0.7rem 1.15rem;
  }

  .nav.scrolled {
    box-shadow: 0 1px 0 #ececec;
  }

  .nav-right .btn {
    min-height: 44px;
    padding: 0 1.05rem;
    font-size: 0.82rem;
  }

  .nav-burger {
    width: 44px;
    height: 44px;
    margin-left: 0.4rem;
  }

  .logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .logo-img { height: 30px; }

  /* 联系方式 / 归档入口这类"一行文字当按钮"的地方，补足点按高度 */
  .cc-phone,
  .cc-v,
  .news-archive {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .news-archive { min-height: 44px; padding: 0 0.2rem; }


  /* ============================================================
     2. 首屏
     目标：标题 / 副标题 / 主按钮 / 信任注脚 在一屏内完成，
           聊天演示卡从上沿露出来，形成"往下还有东西"的暗示。
     原状：1396px，首屏只看到标题区，演示要滚近一屏才出现。
     ============================================================ */

  .hero {
    min-height: auto;
    padding: 4rem 1.15rem 2.25rem;
  }

  .hero h1 {
    font-size: 2.05rem;
    line-height: 1.16;
    letter-spacing: -0.035em;
    margin-bottom: 0.95rem;
  }

  .hero h1 .h1-lead { font-size: 1.06em; }

  .hero-desc {
    font-size: 0.97rem;
    line-height: 1.62;
    margin-bottom: 1.4rem;
  }

  .hero-desc-lead {
    display: inline;
    margin-right: 0.15em;
  }

  .hero-actions { margin-bottom: 0; }

  .hero-actions .btn {
    width: 100%;
    height: 52px;
    font-size: 0.95rem;
    justify-content: center;
    border-radius: 999px;
  }

  .hero-note {
    margin-top: 0.65rem;
    font-size: 0.76rem;
    text-align: center;
  }

  .hero-right { margin-top: 1.75rem; }

  /* 关于页主标题是"技术改变世界 / 工会数智化，从 2016 起步"两段长句，
     32px 在 390 宽下会把第二行挤成两行（"起步"单独掉一行），
     缩到 28.5px 刚好收在两行内。 */
  .about-hero h1 {
    font-size: 1.78rem;
    line-height: 1.24;
  }

  .about-hero { padding: 5rem 1.15rem 2.5rem; }

  /* 聊天演示卡：内边距收紧、气泡字号回调，只保留必要的呼吸感 */
  .ai-chat-showcase { border-radius: 14px; }

  .chat-header { padding: 0.7rem 0.85rem; }
  .chat-header .chat-avatar { width: 30px; height: 30px; }
  .chat-title strong { font-size: 0.82rem; }
  .chat-title span { font-size: 0.66rem; }
  .chat-dots { display: none; }

  .chat-body {
    padding: 0.85rem;
    gap: 0.7rem;
    min-height: 0;
  }

  .msg-bubble {
    font-size: 0.82rem;
    line-height: 1.65;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
  }

  .msg-avatar {
    width: 26px;
    height: 26px;
    font-size: 0.66rem;
  }

  .msg-action { font-size: 0.76rem; padding: 0.4rem 0.6rem; }


  /* ============================================================
     3. 卡片密度
     原状：桌面靠三列并排制造节奏，手机变一列后每张卡都"顶天立地"，
           五张卡结构完全一样，滚三屏都在看重复的盒子。
     做法：图标缩小、内边距收紧、清单两列、卡间距压缩。
     ============================================================ */

  /* --- 3.1 深色 AI 三卡 --- */
  .ai-highlight { padding: 3.25rem 1.15rem; }

  .ai-highlight-header { margin-bottom: 1.75rem; }

  .ai-highlight h2 {
    font-size: 1.5rem;
    line-height: 1.3;
    margin-bottom: 0.75rem;
  }

  .ai-highlight-header p {
    font-size: 0.9rem;
    line-height: 1.7;
  }

  .ai-demo-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .ai-demo-card {
    padding: 1.15rem;
    border-radius: 14px;
  }

  .ai-demo-card .demo-icon {
    width: 42px;
    height: 42px;
    font-size: 1.2rem;
    border-radius: 12px;
    margin-bottom: 0.85rem;
  }

  .ai-demo-card h3 {
    font-size: 1rem;
    margin-bottom: 0.4rem;
  }

  .ai-demo-card > p {
    font-size: 0.84rem;
    line-height: 1.65;
    margin-bottom: 0.85rem;
  }

  .demo-chat {
    padding: 0.65rem 0.7rem;
    border-radius: 10px;
    font-size: 0.8rem;
    line-height: 1.6;
    gap: 0.4rem;
  }

  /* --- 3.2 主功能五卡 --- */
  .features { padding: 3.25rem 1.15rem; }

  .features-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .feature-card {
    padding: 1.15rem;
    border-radius: 16px;
  }

  .feature-head {
    gap: 0.75rem;
    margin-bottom: 0.9rem;
  }

  .feature-icon-wrapper {
    width: 42px;
    height: 42px;
    font-size: 1.15rem;
    border-radius: 11px;
    margin-bottom: 0.85rem;
  }

  .feature-head .feature-icon-wrapper { margin-bottom: 0; }

  .feature-card h3 { font-size: 1.02rem; }

  .feature-kicker {
    font-size: 0.8rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .feature-card > p { font-size: 0.84rem; line-height: 1.65; }

  /* 六条子系统：两列，标题与说明分两级，行距收紧 */
  .sys-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem 0.9rem;
  }

  .sys-grid b { font-size: 0.88rem; }
  .sys-grid span { font-size: 0.78rem; line-height: 1.5; }

  /* 清单项：四点清单在手机上改两列，避免每张卡都拖出四行尾巴 */
  .feature-highlights {
    margin-top: 0.75rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.34rem 0.75rem;
  }

  .feature-highlights li {
    font-size: 0.84rem;
    line-height: 1.5;
    align-items: flex-start;
  }

  .featured-badge {
    font-size: 0.74rem;
    padding: 0.2rem 0.5rem;
  }

  /* 合规底座条：从横向长条改为换行两列 */
  .feature-base {
    padding: 0.95rem 1.1rem;
    gap: 0.5rem 1rem;
    align-items: flex-start;
    flex-direction: column;
    margin-top: 0.85rem;
  }

  .fb-label { font-size: 0.88rem; }

  .fb-items {
    gap: 0.35rem 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .fb-items li { font-size: 0.8rem; line-height: 1.5; }

  /* --- 3.3 产品细节（Tab 区） --- */
  .product-deep { padding: 3.25rem 1.15rem; }

  .product-showcase-large { border-radius: 16px; }

  .tab-layout { gap: 1.25rem; }

  .tab-info h3 { font-size: 1.15rem; }

  .tab-features-list li { font-size: 0.82rem; line-height: 1.6; }

  /* --- 3.4 数据条 --- */
  .stats { padding: 2.75rem 1.15rem; }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem 0.75rem;
    margin-top: 1.75rem;
  }

  .stat-item { padding: 1rem 0.5rem; }

  .stat-num { font-size: 1.7rem; }

  /* --- 3.5 结尾表单 --- */
  .cta { padding: 3rem 1.15rem; }

  .cta-box {
    padding: 1.5rem 1.15rem;
    border-radius: 16px;
  }

  .cta-box h2 { font-size: 1.35rem; line-height: 1.3; }

  .cta-box > p { font-size: 0.88rem; line-height: 1.65; }

  .hm-form input,
  .hm-form select {
    height: 48px;
    font-size: 0.92rem;
  }

  .hm-form button[type="submit"] {
    height: 50px;
    font-size: 0.95rem;
  }


  /* ============================================================
     4. 产品功能墙
     原状：≤560px 时 .board-grid 变单列，45 个功能各占一张全宽卡，
           四个板块合计约 8000px —— 全站最大的"没适配"来源。
     做法：回到两列，描述截断到 3 行，卡片统一高度。
     ============================================================ */

  .board-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    margin-top: 1.5rem;
  }

  .fcard {
    padding: 0.85rem 0.9rem;
    border-radius: 14px;
  }

  .fcard-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 0.5rem;
  }

  .fcard h4 {
    font-size: 0.9rem;
    line-height: 1.35;
    margin-bottom: 0.28rem;
  }

  .fcard p {
    font-size: 0.79rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* AI 能力六卡同样回到两列 */
  .ai-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    margin-top: 1.75rem;
  }

  .ai-cap {
    padding: 1rem 0.9rem;
    border-radius: 14px;
  }

  .ai-cap-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 0.6rem;
  }

  .ai-cap h4 { font-size: 0.9rem; }

  .ai-cap p {
    font-size: 0.79rem;
    line-height: 1.55;
  }

  /* 板块标题与说明 */
  .panel { padding: 2.75rem 1.15rem; }

  /* 产品页没有 hero，第一个 panel 就是页面顶部，原本 52px 的上内边距
     小于固定导航的 66px —— 标题被导航压掉半行。这里补足。 */
  .panel:first-of-type,
  .ai-featured {
    padding-top: 5.5rem;
  }

  .section-title { font-size: 1.55rem; line-height: 1.25; }

  .section-subtitle { font-size: 0.88rem; line-height: 1.65; }

  .section-header { margin-bottom: 1.5rem; }


  /* ============================================================
     5. 横向模块
     ============================================================ */

  /* --- 5.1 客户 logo 墙 --- */
  .clients { padding: 2.5rem 0; }

  .clients-header {
    padding: 0 1.15rem;
    margin-bottom: 1.5rem;
  }

  .clients-header h2 { font-size: 1.15rem; }

  .marquee-wrapper::before,
  .marquee-wrapper::after { width: 28px; }

  .marquee-item {
    width: 104px;
    height: 56px;
    margin: 0 0.45rem;
  }

  .marquee-item img { height: 68px; }

  .marquee-row + .marquee-row { margin-top: 0.35rem; }

  /* --- 5.2 产品 Tab 条：允许横滑，触摸目标 44px --- */
  .product-tabs-nav {
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.5rem 0.75rem;
    scroll-snap-type: x proximity;
  }

  .product-tabs-nav::-webkit-scrollbar { display: none; }

  .product-tab-btn {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 1rem;
    font-size: 0.84rem;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  /* --- 5.3 案例页轮播控件：放大到拇指可点 --- */
  .feature-controls {
    top: 12px;
    right: 12px;
    padding: 4px;
  }

  .feature-controls button {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }

  /* --- 5.4 资讯列表：单列时封面压扁一点，一屏能看到一张半 --- */
  .news-grid {
    gap: 16px;
  }

  .news-card .news-cover {
    aspect-ratio: 2 / 1;
  }

  .news-copy {
    padding: 1rem 1.15rem 1.15rem;
  }

  .news-copy h4 {
    font-size: 0.95rem;
    line-height: 1.5;
  }


  /* ============================================================
     6. 页脚
     页脚维持页面原有的移动端排版（品牌整行 + 导航/二维码两列，
     ≤900px 断点已经写好，观感是舒服的）。这里只补两处可读性，
     不动任何布局尺寸：
       · 脚注字号下限 12px（原 11.2 / 11.5，iOS 上发虚）
       · 备案号对比度（白 36% 在深底上基本看不清）
     ============================================================ */

  /* 页面内联用了 !important，这里必须跟随，否则压不住 */
  .qr-item span,
  .footer-bottom,
  .fm-trust,
  .footer-hours { font-size: 12px; }

  .footer-bottom .footer-badge {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.56) !important;
  }

  /* 回到顶部：抬高到常驻操作条之上 */
  .to-top {
    right: 16px;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    width: 44px;
    height: 44px;
  }

  .to-top svg { width: 20px; height: 20px; }

  /* 客服浮标同步抬高，别和操作条叠在一起 */
  a.udesk-client-btn {
    margin-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* ============================================================
   7. 底部常驻操作条（仅在手机出现，桌面由 media query 挡住）
   目的：移动端唯一转化动作是"免费试用"，长页面上它只在首屏
         和页尾出现，中间滚过的 8000px 没有任何入口。
   ============================================================ */

.m-cta-bar {
  display: none;
}

@media (max-width: 768px) {
  .m-cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid #ececec;
    box-shadow: 0 -6px 20px -12px rgba(0, 0, 0, 0.18);
    transform: translateY(110%);
    transition: transform 0.28s ease;
  }

  .m-cta-bar.is-on { transform: none; }

  .m-cta-bar .m-cta-hint {
    flex: 1;
    min-width: 0;
    font-size: 0.74rem;
    line-height: 1.35;
    color: #737373;
  }

  .m-cta-bar .m-cta-hint strong {
    display: block;
    font-size: 0.82rem;
    color: #0a0a0a;
    font-weight: 700;
  }

  .m-cta-bar .m-cta-call,
  .m-cta-bar .m-cta-main {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
  }

  .m-cta-bar .m-cta-call {
    width: 44px;
    border: 1px solid #e5e5e5;
    background: #fff;
    color: #404040;
  }

  .m-cta-bar .m-cta-call svg { width: 19px; height: 19px; }

  .m-cta-bar .m-cta-main {
    padding: 0 1.15rem;
    color: #fff;
    background: linear-gradient(135deg, #2396ea 0%, #0d68bd 100%);
    box-shadow: 0 6px 16px -6px rgba(13, 104, 189, 0.55);
  }
}