/* ==========================================================================
   Mobile 规格（独立设计，不是"桌面关特效"）
   断点 1200 / 992 / 768 / 480
   ========================================================================== */

/* ---------- <1200px：左侧导航降级为纯数字轨 ---------- */
@media (max-width:1199px){
  .rail__thumb{ display:none; }
  .rail:hover .rail__label{ opacity:0; max-width:0; }
  .rail{ left:14px; }
}

/* ---------- <992px ---------- */
@media (max-width:991px){
  :root{ --sec-y:56px; --gap:18px; }
  .omx__wide{ flex-direction:column; align-items:flex-start; gap:18px; min-height:0; padding:24px; }
  .omx__wide::before{ animation:none; background:var(--blue); }   /* 去流光，省电 */
  .omx__row{ grid-template-columns:repeat(2,minmax(0,1fr)); }   /* 4 个入口 → 2×2，不留单腿 */
  .omx__cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .omx__col{ min-height:210px; }
  .omx__stack{ min-height:0; }
  .layers{ grid-template-columns:1fr; }
  .network{ grid-template-columns:1fr; }
  .network__globe{ order:-1; max-height:56vh; }
  /* --split 那条固定高度的选择器权重比 .fcards 高，这里得显式压回来，
     否则窄屏下容器被钉成定高、卡片溢出去压到下一版块 */
  .fcards, .fcards--split{ height:auto; display:grid; gap:18px; }
  /* 中小屏卡片是满宽的，入场位移必须小于左右留白，否则会把布局视口撑宽 */
  .fcard{ position:static; width:100%; transform:translate3d(18px,34px,0) scale(.96); }
  /* 合并屏：右列的优势卡在窄屏也回到文档流，并按 --i 和流程卡交错排，
     每走完一步流程紧跟着它对应的那条优势 */
  .fcards--split .fcard{ width:100%; }
  .acard{
    position:static; width:100%;
    transform:translate3d(18px,34px,0) scale(.96);
  }
  .fcards--split .fcard{ order:calc(var(--i) * 2); }
  .fcards--split .acard{ order:calc(var(--i) * 2 + 1); }
  .bento__boxes{ grid-template-columns:1fr; }
  .bento__col:last-child{ margin-top:0; }
  /* 单列了就不再错位，卡片各自收一收高度 */
  .bcard--insetL{ margin-left:0; }
  .bcard--insetR{ margin-right:0; }
  .bcard--geo{ min-height:300px; }
  .bcard--hero{ min-height:280px; }
  /* 这张现在也放巨号数字了，跟 --geo 一样高，别一高一矮 */
  .bcard--list{ min-height:300px; }
  .top-cta .btn--ghost{ display:none; }

  /* Spiral 在中屏改为可横滑的胶片条，保证可点 */
  .spiral{ height:auto; overflow-x:auto; overflow-y:hidden; mask-image:none; -webkit-mask-image:none;
           -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; cursor:auto; }
  .spiral__track{ position:static; display:flex; gap:16px; padding:4px 0 18px; }
  .spiral__item{ position:static; width:300px; flex:none; transform:none !important;
                 opacity:1 !important; filter:none !important; scroll-snap-align:center; }
  .solution{ height:170vh; }
}

/* ---------- <768px：移动端主方案 ---------- */
@media (max-width:767px){
  :root{ --sec-y:48px; --pad:20px; --pad-l:20px; --mq-h:28px; }

  .rail{ display:none; }
  .dots{ display:flex; }
  .menu-toggle{ display:block; }
  .top-cta{ display:none; }
  .fabwrap{ display:none; }
  .sticky-bar{ display:flex; }

  .brand{ top:calc(var(--mq-h) + 12px); left:20px; gap:10px; }
  .brand__mark{ width:34px; height:34px; }
  .brand__text b{ font-size:14px; }
  .bgm{ display:none; }                 /* 移入全屏菜单顶部，由 bgm.js 搬家 */
  .menu .bgm{ display:grid; margin:0 0 22px; }
  .bgm::after{ display:none; }

  .section--connect{ padding-top:calc(var(--mq-h) + 108px); }
  .c-hero__title{ font-size:clamp(40px,11vw,56px); }
  .c-hero__cta{ flex-direction:column; align-items:stretch; }
  .c-hero__cta .btn{ width:100%; min-height:52px; }
  .c-hero__needs{ grid-template-columns:1fr 1fr; gap:10px; max-width:none; }
  .c-hero__needs a{ min-height:88px; padding:14px 12px 12px; }
  .c-hero__needs b{ font-size:15px; }

  .omx__row{ grid-template-columns:1fr 1fr; }
  .omx__cols{ grid-template-columns:1fr; }
  .omx__col{ min-height:0; }
  .fcard__in{ min-height:0; padding:20px; }
  .fcard__num{ font-size:44px; }

  /* 客服卡：单列列表化，配图缩成左侧竖缩略图，按钮 ≥44px */
  .spiral{ overflow:visible; scroll-snap-type:none; margin-top:56px; }
  .spiral__track{ flex-direction:column; gap:12px; }
  .spiral__item{ width:100%; aspect-ratio:auto; }
  .svc__card, .spiral__item .svc__card{
    display:grid; grid-template-columns:auto 1fr auto;
    grid-template-areas:'art title btn' 'art desc btn';
    align-items:center; column-gap:14px;
    height:auto; min-height:76px; padding:12px 14px;
  }
  .svc__body{ display:contents; }          /* 让标题/描述/按钮直接落进卡片网格 */
  .svc__art{
    grid-area:art; position:static;
    width:52px; height:auto; aspect-ratio:1536/2752;
    border-radius:8px; filter:none;
  }
  .svc__card::after{ display:none; }        /* 列表态不需要压暗渐隐带 */
  .svc__card h4{ grid-area:title; font-size:17px; margin:0; text-shadow:none; }
  .svc__body p{ grid-area:desc; font-size:12px; margin:2px 0 0; text-shadow:none; }
  .svc__card .btn{ grid-area:btn; width:auto; min-height:44px; padding:0 18px; font-size:14px; }
  .svc__card::before{ display:none; }


  .bcard--hero{ min-height:300px; }
  .bcard--tall{ min-height:280px; }
  .foot__main{ flex-direction:column; align-items:flex-start; gap:24px; }
  .foot__side{ align-items:flex-start; }
  .foot__notice{
    padding:14px 20px 16px;
  }
  .foot__notice p{ font-size:12px; line-height:1.7; }
  .foot__links{ gap:6px 18px; padding-bottom:calc(86px + env(safe-area-inset-bottom)); }
  .mcard__go i{ transform:none; }
}

/* ---------- <480px ---------- */
@media (max-width:479px){
  .menu__item{ font-size:22px; }
  .omx__row{ grid-template-columns:1fr; }
  }

/* ---------- 触屏：不做 tap 假 hover ---------- */
@media (hover:none){
  .omx__col:hover, .svc__card:hover, .c-hero__needs a:hover{ transform:none; }
  .btn--solid:hover::before{ transform:scale(0); }
  .btn:active{ transform:scale(.97); }
}