/* 新媒体运营页面样式 - xmtyy.css */
/* 顶部导航 header / CTA / 页脚 footer 为全站公共样式，统一放在 style.css */

/* ==================== 首屏 ==================== */
/* 高度 / 定位 / 字号 / 按钮等结构样式统一在公共 style.css 的 .hero 系列（内页共用同一套：
   hero 560 高、文字块 @top188、标题 48px、副标题 24px、按钮 145×48 @top356），这里只定义本页背景 */
.hero {
  background: #eef3fb url('../img/xmtyy/61652852.jpg') 50% 50%/cover no-repeat;
}

/* ==================== 行业痛点 ==================== */
.pain {
  padding: 80px 0 5px;
  background: #fff;
}

/* 设计稿标题块顶 80、卡片顶 240 */
.pain .sec-title {
  margin-bottom: 69px;
}

.pain .sec-title h2 {
  line-height: 1.75;
}

.pain .sec-title p {
  margin-top: 0;
  line-height: 1.75;
}

/* 6 张 453×260 卡（3×2、间距 20） */
.pain-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.pain-card {
  position: relative;
  height: 260px;
  background: transparent;
  border: 1px solid #d5e5f7;
  border-radius: 20px;
  padding: 65px 31px 0;
}

/* 左上角「业务痛点N」角标：原为设计稿导出的 120×40 蓝色斜角图片，现改为纯 CSS 色块。
   造型与配色全部实测自原图：alpha 是硬边，轮廓 = 左上 / 右下各一段圆弧、右上 / 左下为直角；
   内部实色：普通卡 #ecf3fe、当前卡 #317af7。圆角半径来自「候选值对拍扫描」的残差最小处（19.3px）。 */
.pain-badge {
  position: absolute;
  left: 0;
  top: 0;
  width: 120px;
  height: 40px;
  background: #ecf3fe;
  border-radius: 19.3px 0 19.3px 0;
}

.pain-label {
  position: absolute;
  left: 21px;
  top: 11px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 14px;
  color: #317af7;
  line-height: 21px;
}

/* ---- 悬停态 = 原「当前项」(.pain-card--active) 的涂装 ----
   悬停时整卡转 #e0ebff → #ffffff 纵向渐变 + 主题蓝描边 + 投影，角标转 #317af7、角标文字转白。
   原先是「某一项永久高亮」（卡 1 常带 .pain-card--active），现改为悬停驱动：默认态 6 张卡一律是普通卡。
   ⚠️ 门控 (hover: hover)：触屏「点一下」会把 :hover 粘住，卡片会一直停在选中态。
   ⚠️ 纯涂装、无任何几何声明 ⇒ 悬停不参与布局（grid 列宽 / 卡高 / 内容坐标逐像素不变）。
   ⚠️ 不加 transition：linear-gradient 在 Chrome 里不可插值，且本页既有三处悬停也都是直切。 */
@media (hover: hover) {
  .pain-card:hover {
    background: linear-gradient(180deg, #e0ebff, #ffffff);
    border-color: #317af7;
    box-shadow: 0 5px 10px rgba(186, 215, 251, .4);
  }

  .pain-card:hover .pain-badge {
    background: #317af7;
  }

  .pain-card:hover .pain-label {
    color: #fff;
  }

  .pain-card:hover .pain-link {
    opacity: 1;
  }
}

/* 图标 28×28 定位在卡内 (32,64)，标题左缩进到 70 */
.pain-icon {
  position: absolute;
  left: 31px;
  top: 63px;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.pain-card h3 {
  padding-left: 38px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #1d2129;
  line-height: 1;
}

/* 三条要点：圆点 10×10 @ 卡内 x38，文字 16px @ x70，行距 34 */
.pain-points {
  margin-top: 23px;
}

.pain-points li {
  position: relative;
  padding-left: 38px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 16px;
  color: #888888;
  line-height: 28px;
}

.pain-points li+li {
  margin-top: 6px;
}

.pain-points li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c6e0ff;
}

.pain-link {
  opacity: 0;
  /* transition: opacity 0.3s ease; */
  display: block;
  margin: 10px 0 0 6px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 14px;
  color: #317af7;
  line-height: 24px;
}

.pain-link:hover {
  text-decoration: underline;
}

/* 设计稿宽度 1440：卡固定 453，3×453+2×20=1399，右端留 1px 余量
   （用 1fr 时会因 1400/3 产生 0.33px 亚像素漂移，卡3/卡6 的角标会偏 1px） */
@media (min-width: 1440px) {
  .pain-list {
    grid-template-columns: 453px 453px minmax(0, 1fr);
  }
}

/* ==================== 全链路运营服务 ==================== */
/* 设计稿：白底、上下内边距 80/100，区块总高 1250 */
.service {
  padding: 80px 0 100px;
  background: #fff;
}

.service .sec-title {
  margin-bottom: 69px;
}

.service .sec-title h2 {
  line-height: 1.75;
}

.service .sec-title p {
  margin-top: 0;
  line-height: 1.75;
}

/* 短视频卡 1400×320：左 453 图 + 右 880 内容（设计稿卡顶 240） */
.shot-card {
  position: relative;
  display: flex;
  height: 320px;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 10px rgba(186, 215, 251, .4);
}

.shot-left {
  position: relative;
  flex: 0 0 453px;
  background: url('../img/xmtyy/61657807.jpg') 50% 50% / cover no-repeat;
}

.shot-left h3 {
  position: absolute;
  left: 32px;
  top: 46px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  color: #fff;
}

/* 蓝底白字胶囊按钮，居中于左图（设计稿卡内 155,230，145×48） */
.shot-btn {
  position: absolute;
  left: 155px;
  top: 230px;
  display: block;
  width: 145px;
  height: 48px;
  padding: 0;
  border-radius: 200px;
  background: url('../img/xmtyy/61238301.jpg') 50% 50% / 100% 100% no-repeat;
  color: #fff;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 48px;
  text-align: center;
}

.shot-btn:hover {
  filter: brightness(1.06);
}

.shot-right {
  flex: 1;
  min-width: 0;
  padding: 0 32px 0 35px;
}

/* 标题块高 104，下沿即设计稿 880×1 #ecebed 分隔线（卡内 y103） */
.shot-head {
  position: relative;
  height: 104px;
  border-bottom: 1px solid #ecebed;
}

.shot-right h4 {
  position: absolute;
  left: 0;
  top: 52px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #317af7;
}

.shot-en {
  position: absolute;
  right: 0;
  top: 61px;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 14px;
  color: #317af7;
  line-height: 1.5;
}

.shot-right>p {
  margin: 27px 0 0;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 18px;
  color: #333333;
  line-height: 33px;
}

.shot-right>.shot-li {
  margin-top: 14px;
  font-size: 16px;
  color: #888888;
  line-height: 26px;
}

.shot-right>.shot-li+.shot-li {
  margin-top: 8px;
}

.shot-li strong {
  color: #317af7;
  font-weight: 700;
}

/* 三大平台卡 453×570：头图按 453:168 等比，正文自卡内 y199 起 */
.plat-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.plat-card {
  position: relative;
  height: 570px;
  padding: calc(37.086% + 31px) 37px 0 32px;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 10px rgba(186, 215, 251, .4);
}

.plat-head {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  aspect-ratio: 453 / 168;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.plat-card--douyin .plat-head {
  background-image: url('../img/xmtyy/61660401.jpg');
}

.plat-card--xhs .plat-head {
  background-image: url('../img/xmtyy/61660423.jpg');
}

.plat-card--wx .plat-head {
  background-image: url('../img/xmtyy/61660477.jpg');
}

/* 标题与下划线压在头图上（设计稿卡内 32,59 与 48×8 @32,114） */
.plat-head h3 {
  position: absolute;
  left: 32px;
  top: 33.8%;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.plat-bar {
  position: absolute;
  left: 32px;
  top: 67.857%;
  width: 48px;
  height: 8px;
  border-radius: 200px;
  background: rgba(255, 255, 255, .3);
}

.plat-card>p {
  margin: 0;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 18px;
  color: #333333;
  line-height: 33px;
}

/* 设计稿每条列表是固定容器：li1 恒为卡内 313..404（高 88），li2 起于 401 */
.plat-card>.plat-li {
  margin-top: 15px;
  font-size: 16px;
  color: #888888;
  line-height: 25.5px;
}

.plat-card>p+.plat-li {
  height: 88px;
}

.plat-card>.plat-li+.plat-li {
  margin-top: 0;
}

.plat-li strong {
  color: #2eb2f5;
  font-weight: 700;
}

/* 彩色胶囊按钮，居中于卡内 x155、底距 44（设计稿 145×46） */
.plat-btn {
  position: absolute;
  left: 155px;
  bottom: 44px;
  display: block;
  width: 145px;
  height: 46px;
  padding: 0;
  border-radius: 200px;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 46px;
  text-align: center;
  color: #fff;
}

.plat-btn--blue {
  background: rgb(46, 178, 245);
  box-shadow: 0 5px 10px rgba(46, 178, 245, .2);
}

.plat-btn--red {
  background: rgb(255, 102, 130);
  box-shadow: 0 5px 10px rgba(255, 102, 130, .2);
}

.plat-btn--green {
  background: rgb(90, 194, 169);
  box-shadow: 0 5px 10px rgba(90, 194, 169, .2);
}

.plat-btn:hover {
  opacity: .9;
}

/* 设计稿宽度 1440：卡固定 453（同 pain 区，避免 1400/3 的亚像素漂移） */
@media (min-width: 1440px) {
  .plat-list {
    grid-template-columns: 453px 453px minmax(0, 1fr);
  }
}

/* ---- 进入动效：滚入视口时「依次」自下而上飞入 ----
   1 张 .shot-card + 3 张 .plat-card 按阅读顺序错峰登场（相邻两张间隔 100ms，即 0 / .1s / .2s / .3s）。
   · 待命位挂在 html.js 下 ⇒ 无 JS 时四张卡照常可见；只动 opacity / translateY ⇒ 盒模型零位移，下游区块坐标不受影响。
   · 曲线 / 时长 / 位移与首页 .adv-row、.nm-grid 同一套（40px / .7s / cubic-bezier(.22,.61,.36,1)）。
   · 错峰用 transition-delay 而非给四张卡各写一条 transition：过渡属性集合仍是 opacity, transform。
   · 尊重「减少动态效果」。 */
@media (prefers-reduced-motion: no-preference) {

  .js .shot-card,
  .js .plat-card {
    opacity: 0;
    transform: translateY(40px);
  }

  .js .shot-card.is-in,
  .js .plat-card.is-in {
    opacity: 1;
    transform: none;
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
  }

  /* 错峰：.shot-card 在每条规则之外 ⇒ 保持 0s 起步，排在最前 */
  .js .plat-card.is-in:nth-child(1) {
    transition-delay: .1s;
  }

  .js .plat-card.is-in:nth-child(2) {
    transition-delay: .2s;
  }

  .js .plat-card.is-in:nth-child(3) {
    transition-delay: .3s;
  }
}

/* ==================== 全场景运营解决方案 ==================== */
/* 设计稿：带底图的整区背景，上下内边距 80/100，区块总高 1360 */
.scene {
  padding: 80px 0 100px;
  background: #fff url('../img/xmtyy/61651586.jpg') 50% 50% / cover no-repeat;
}

.scene .sec-title {
  margin-bottom: 69px;
}

.scene .sec-title h2 {
  line-height: 1.75;
}

.scene .sec-title p {
  margin-top: 0;
  line-height: 1.75;
}

/* 三列田字格（bento）：行高 240、间距 20
   ┌────────── 宽卡(跨2列) ──────────┬──── 高卡(跨2行) ────┐
   ├───────┬───────┼─────────────────┘                     │
   ├─高卡──┼─高卡──┼───────┐                               │
   └───────┴───────┴───────┴───────────────────────────────┘ */
.scene-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 240px;
  gap: 20px;
}

.scene-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background-color: #fff;
  padding: 32px 43px 0 32px;
}

.scene-card--wide {
  grid-column: span 2;
}

.scene-card--tall {
  grid-row: span 2;
}

/* 插画卡：插画就是整张卡的背景图（宽卡 926×240、高卡 453×500，图源等比） */
.scene-card--illu {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.scene-card--i1 {
  background-image: url('../img/xmtyy/61645726.jpg');
}

.scene-card--i2 {
  background-image: url('../img/xmtyy/61650518.jpg');
}

.scene-card--i3 {
  background-image: url('../img/xmtyy/61650799.jpg');
}

.scene-card--i4 {
  background-image: url('../img/xmtyy/61651024.jpg');
}

/* 悬停「背景图放大」：底图另由 ::before 复制一层承载，悬停只对它做 transform: scale() ⇒ 卡片盒模型 / 网格轨道 / 整页高度一个像素不动。
   ⚠️ 不能直接过渡卡片上的 background-size：cover 是关键字、不可插值，会退化成离散跳变。
   ⚠️ background: inherit ⇒ 伪元素原样继承卡片在各断点下的整组涂装，不必逐档复写；紧跟 background-color: transparent 把卡片白底剔掉。
   ⚠️ border-radius: inherit 不是装饰：不写时伪元素背景由父级 overflow 圆角裁切，与卡片自身的圆角是两套 AA，弧上会多偏 9/255。
   ⭐⭐ opacity:0 +「悬停瞬时显形 / 缩回延后隐藏」才是本实现的关键，别删：
      叠加层必然要在卡片的 20px 圆角弧上与卡片自身背景做二次 α 合成 ⇒ 只要这层在静息态画了东西，弧上就必然有 3~9/255 残差；
      让整层在静息态 opacity:0（不画）即得逐字节 0。再借 transition-delay 做不对称过渡：
        悬停 —— opacity 0s 瞬时显形（此刻 transform 还是 scale(1)，与卡片自身背景完全重合），transform 用 .6s 放大；
        缩回 —— opacity 0s .6s，让涂装留到 transform 收完再消失。纯 CSS，不需要任何 JS。
   ⚠️ 不加 will-change：会被提为合成层，未悬停就产生抗锯齿相位差。 */
.scene-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: inherit;
  background-color: transparent;
  border-radius: inherit;
  opacity: 0;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1), opacity 0s .6s;
}

/* 悬停放大的锚点：默认 transform-origin 是卡片中心（四向均匀外扩）；--i1（宽卡 926×240）与 --i2（高卡 453×500）改为以右下角为锚点 ⇒ 右 / 下边缘原地不动。
   ⚠️ 必须写在基座、不能写进 :hover：写在 :hover 内的话，移开瞬间 origin 先跳回中心、再收 scale，画面会顿一下瞬跳。
   ⚠️ 也不能塞进 transition：transform-origin 是离散属性、插值无意义，还会破坏「过渡属性集合不变」。
   ℹ️ ::before 是 inset:0（卡片无 border ⇒ 即 border box），故 100% 100% 恰是卡片右下角；放大溢出由卡片圆角裁掉。 */
.scene-card--i1::before,
.scene-card--i2::before {
  transform-origin: 100% 100%;
}

/* ::before 是定位元素、会盖在普通流内容之上 ⇒ 把图标 / 标题 / 正文抬一层压回去
   （实测：单独加这条对静息态像素零影响） */
.scene-card>.scene-icon,
.scene-card>h4,
.scene-card>p {
  position: relative;
  z-index: 1;
}

/* 悬停 1 → 1.06 / 0.6s，缓动与首页 .adv-card 背景放大同一条（首页卡 690 宽放大 1.08、本页宽卡 926 宽取 1.06，净增量同为 55px）。
   · 这里重写 transition 只为把 opacity 的 .6s 延迟清零（瞬时显形）；不写就会继承基座那条，要等 0.6s 才显形、直接失效。
   · (hover: hover) 兜触屏；prefers-reduced-motion 时整条不生效。 */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .scene-card:hover::before {
    opacity: 1;
    transform: scale(1.06);
    transition: transform .6s cubic-bezier(.22, .61, .36, 1), opacity 0s;
  }
}

/* 图标：48×48 浅蓝圆底，内嵌 32×32 图标（卡内 32,32） */
.scene-icon {
  width: 48px;
  height: 48px;
  box-sizing: border-box;
  padding: 8px;
  border-radius: 200px;
  background: #ecf3fe;
  object-fit: contain;
}

.scene-card h4 {
  margin: 33px 0 0;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #1d2129;
  line-height: 24px;
}

.scene-card p {
  margin: 20px 0 0;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 16px;
  color: #888888;
  line-height: 24.5px;
}

/* 设计稿宽度 1440：列固定 453（同 pain / plat 区，避免亚像素漂移） */
@media (min-width: 1440px) {
  .scene-list {
    grid-template-columns: repeat(3, 453px);
    justify-content: start;
  }
}

/* ==================== 实战案例 ==================== */
.cases {
  padding: 70px 0 80px;
  background: #fff url('../img/xmtyy/61545610.jpg') 50% 100%/cover no-repeat;
}

.cases .sec-title {
  margin-bottom: 36px;
}

.industry-tabs {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.industry-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 26px;
  border-radius: 200px;
  background: #fff;
  color: #1d2129;
  cursor: pointer;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 18px;
  font-weight: 700;
  transition: background .2s, color .2s;
}

.industry-tab img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.industry-tab.active {
  background: #317af7 url('../img/xmtyy/61250273.jpg') 50% 50%/cover no-repeat;
  color: #fff;
}

.case-card {
  margin-top: 30px;
  background: #fff;
  border-radius: 20px;
  border: 1px solid #eee;
  box-shadow: 0 5px 10px rgba(224, 235, 255, .4);
  padding: 36px 40px 40px;
}

.case-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.case-head h3 {
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #1d2129;
}

.case-head h3 em {
  font-style: normal;
  color: #317af7;
}

.case-sep {
  color: #c6dbff;
  margin: 0 4px;
}

.btn-pill-blue {
  height: 48px;
  border-radius: 200px;
  padding: 0 26px;
  font-size: 18px;
  color: #fff;
  background: #317af7 url('../img/xmtyy/61238301.jpg') 50% 50%/cover no-repeat;
}

.btn-pill-blue img {
  width: 24px;
  height: 24px;
  margin-left: 8px;
  transition: transform .25s ease;
}

/* 「立即咨询」悬停：按钮自身轻微透出底色（opacity .92）+ 右侧箭头徽标左右小幅往复摆动（照搬 SEO 页 .btn-pill-in）。
   本页此前没有该关键帧，故在本页新增一份；关键帧名 / 幅值 / 时长 / 缓动 / 循环与 index / geo / seo / sem 四页逐字相同。
   只用 translateX，不参与布局 ⇒ 静止态与动画中都是零位移、零溢出；关键帧首尾回 0 ⇒ 进入时不跳变。
   ⚠️ 摆幅 ±3px 与 img 的 margin-left 是一对：本页 6 档实测盒级间隙恒为 8px ⇒ 摆到最左仍留 5px 净空。
   ⚠️ 关键帧名与 index.css / geo.css / seo.css / sem.css 同名，但本页只加载 style.css + xmtyy.css ⇒ 不会覆盖。
   ⚠️ 用 (hover: hover) 兜住触屏。
   ⚠️ .btn 基类自带 transition: all .25s ease ⇒ 悬停 opacity 是平滑 250ms 过渡而非跳变（探针采样必须等它跑完）。 */
.btn-pill-blue:hover {
  opacity: .92;
}

@media (hover: hover) {
  .btn-pill-blue:hover img {
    animation: geo-cta-arrow-sway 1.2s ease-in-out infinite;
  }
}

@keyframes geo-cta-arrow-sway {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(3px);
  }

  75% {
    transform: translateX(-3px);
  }

  100% {
    transform: translateX(0);
  }
}

.case-btn {
  margin-top: 0;
}

.case-sub {
  margin-top: 12px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 15px;
  color: #636e80;
  line-height: 1.7;
}

.case-body {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 26px;
}

.case-col {
  flex: 1;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 28px 30px;
}

.case-col:not(.case-col--after) {
  background: #f8f8f8 url('../img/xmtyy/61500700.png') right 18px top 12px/auto 44% no-repeat;
  border: 2px solid #eee;
}

.case-col--after {
  background: #e7efff url('../img/xmtyy/61512079.png') right 18px top 12px/auto 44% no-repeat;
  border: 2px solid #c6dbff;
}

.case-col h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #1d2129;
}

.case-col h4 img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.case-col ul {
  margin-top: 18px;
}

.case-col li {
  position: relative;
  padding-left: 16px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 15px;
  color: #636e80;
  line-height: 1.8;
}

.case-col li+li {
  margin-top: 8px;
}

.case-col li::before {
  content: "·";
  position: absolute;
  left: 0;
  top: 0;
}

.case-arrow {
  flex: 0 0 40px;
}

.case-arrow img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* ========== 合作品牌 logo「无缝」循环滚动 ==========
   结构：.logo-wall 可视窗口（两侧硬边收口，不做渐隐）
           ├ .logo-band 第一 / 第三排的内缩窗口（宽 = 整窗 6/7、水平居中）
           │    └ .logo-row 轨道（width:max-content，内放 N 份相同 logo 组）
           ├ .logo-row  第二排轨道（铺满整窗）
           └ .logo-band └ .logo-row
   做法：轨道整体移动恰好一份（-100% / var(--logo-copies)），移满一份后与起点逐像素重合 ⇒ 首尾严丝合缝。
        N 与动画时长由 xmtyy.js 按实测宽度写入；位移是纯 CSS 动画走合成层，无需第三方滚动插件。
   ⚠️ 关键帧的百分比以 .logo-row 自身宽度为基准 ⇒ 不能用 px 写死位移。
   ⚠️ 收窄必须另加一层 .logo-band：轨道一旦被写 width/max-width，-100% 的基准就从轨道总宽缩成限宽后的盒子，位移不再等于一份。
   ⚠️ 有了 band，纵向间距改用 .logo-wall > * + *。 */
.logo-wall {
  margin-top: 40px;
  overflow: hidden;
}

/* 第一 / 第三排的内缩窗口：宽 = 6/7（照设计稿 1200 / 1400），水平居中。
   band 只负责「变窄 + 居中 + 裁切」这一件事，轨道自身仍是 max-content，
   所以上面那套「-100% / N」的无缝位移公式完全不受影响。 */
.logo-band {
  width: calc(100% / 7 * 6);
  margin: 0 auto;
  overflow: hidden;
}

.logo-row {
  --logo-copies: 2;
  /* 轨道里 logo 组的份数（xmtyy.js 按窗口宽度写入） */
  --logo-dur: 40s;
  /* 移动一份所需时间（xmtyy.js 按组宽写入，保证各排速度一致） */
  display: flex;
  align-items: center;
  width: max-content;
  height: 107px;
  animation: logo-marquee var(--logo-dur) linear infinite;
}

@keyframes logo-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(-100% / var(--logo-copies)), 0, 0);
  }
}

/* 中排反向（向右）滚动：从「−一份」走到 0，起止两端同样相差整数份，接缝照旧严丝合缝 */
.logo-row--reverse {
  animation-direction: reverse;
}

/* 尊重「减少动态效果」偏好：停住不动，此时轨道停在起点，与静态排版完全一致 */
@media (prefers-reduced-motion: reduce) {
  .logo-row {
    animation: none;
  }
}

.logo-wall>*+* {
  margin-top: 11px;
}

/* logo 图尺寸取自原站轮播配置：$SlideWidth 190 + $SlideSpacing 10 ⇒ 排列周期 200px。
   ⚠️ 宽高必须成对给：素材 248×134（1.851），只写 width 时 object-fit:contain 会受高度限制；高度 = 宽 / 1.851。
   ⚠️ margin: 0 5px（左右合计 10px）即原站 $SlideSpacing，各断点一致。 */
.logo-row img {
  width: 190px;
  height: 103px;
  object-fit: contain;
  flex-shrink: 0;
  margin: 0 5px;
  filter: grayscale(.1);
}


/* ==================== 简单4步 + 常见问题 ==================== */
.steps {
  padding: 80px 0 88px;
  background: #fff;
  overflow: hidden;
}

/* 设计稿标题块顶 80，步骤行顶 220，FAO 标题顶 392，FAQ 列表顶 522 */
.steps .sec-title {
  margin-bottom: 49px;
}

.steps .sec-title h2 {
  line-height: 1.75;
}

.steps .sec-title p {
  margin-top: 0;
  line-height: 1.75;
}

/* 4 张 365×100 步骤、间距 20（第 4 张右侧溢出容器，由区块 overflow 裁掉） */
.step-list {
  display: grid;
  grid-template-columns: repeat(4, 365px);
  gap: 20px;
}

/* 卡内为「标题 211 + 虚线箭头 150×12」一行，说明换行到下一行 */
.step-item {
  position: relative;
  display: grid;
  grid-template-columns: 211px 150px;
  align-items: center;
  align-content: start;
  min-height: 100px;
}

.step-item h4 {
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #1d2129;
  line-height: 26px;
}

.step-item h4 span {
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: inherit;
  margin-right: 6px;
}

/* 箭头贴行顶 + 6（设计稿卡内 y6），不用 align-items:center（会落到 7） */
.step-item img {
  align-self: start;
  margin-top: 6px;
  width: 150px;
  height: 12px;
  object-fit: fill;
}

.step-item p {
  grid-column: 1 / -1;
  margin-top: 13px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 14px;
  color: #636e80;
  line-height: 22px;
}

.step-item:last-child img {
  display: none;
}

/* ==================== 响应式适配 ==================== */
@media (max-width: 1399px) {
  .hero {
    background-position: 62% 50%;
  }

  /* pain-card-badge-clear：角标 120×40 绝对定位贴在卡内左上角（top:0），而这里顶距只有 34px
   ⇒ 流内的图标 / 标题比角标底还高 6px，标题行被蓝色角标切掉上半截。
   顶距改为 50：内容顶 = 51、角标底 41 ⇒ 净空 10px / 12px，与 ≤767 手机端那条逐像素一致。
   ⚠️ 绝对定位的角标不受顶距影响，只有流内内容整体下移 16px ⇒ 每行 +16、区块 +16×行数。 */
  .pain-card {
    height: auto;
    padding: 50px 26px 30px;
  }

  .pain-icon {
    position: static;
    float: left;
    margin: 2px 10px 0 0;
    width: 26px;
    height: 26px;
  }

  .pain-card h3 {
    padding-left: 0;
    font-size: 21px;
    line-height: 1.35;
  }

  .pain-points {
    margin-top: 16px;
    clear: both;
  }

  .pain-points li {
    font-size: 15px;
    line-height: 24px;
  }

  .pain-points li+li {
    margin-top: 8px;
  }

  .pain-link {
    margin-top: 14px;
  }

  /* shot-row-keep：全链路在 ≥768 仍保持「左图 + 右文」两栏，只把定尺换成流式：.shot-left 由 0 0 453px 改成设计稿比例 32.357%（= 453/1400）
   ⇒ 两栏比例在任意宽度都与 ≥1400 完全同构。卡高交给右栏内容撑，左图靠 align-items:stretch 跟着长，height 必须回到 auto（定高会顶掉 stretch）。
   ⚠️ ≤767 手机档必须显式复位成纵向堆叠（见那里的 .shot-card / .shot-left）。 */
  .service {
    padding: 60px 0 68px;
  }

  .service .sec-title {
    margin-bottom: 36px;
  }

  .shot-card {
    height: auto;
  }

  .shot-left {
    flex: 0 0 32.357%;
    height: auto;
  }

  .shot-left h3 {
    left: 28px;
    top: 30px;
    font-size: 22px;
  }

  .shot-btn {
    left: 28px;
    top: auto;
    bottom: 30px;
    width: auto;
    padding: 0 26px;
    height: 44px;
    line-height: 44px;
    font-size: 16px;
  }

  .shot-right {
    padding: 26px 28px 30px;
  }

  .shot-head {
    height: auto;
    padding-bottom: 16px;
  }

  .shot-right h4 {
    position: static;
    font-size: 22px;
  }

  .shot-en {
    position: static;
    margin-top: 8px;
    text-align: left;
  }

  .shot-right>p {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.8;
  }

  .shot-right>.shot-li {
    font-size: 15px;
    line-height: 1.7;
  }

  .plat-card {
    height: auto;
    padding: calc(37.086% + 24px) 26px 30px;
  }

  .plat-head h3 {
    left: 28px;
    font-size: 22px;
  }

  .plat-bar {
    left: 28px;
  }

  .plat-card>p {
    font-size: 16px;
    line-height: 1.8;
  }

  .plat-card>p+.plat-li {
    height: auto;
  }

  .plat-card>.plat-li {
    font-size: 15px;
    line-height: 1.7;
  }

  .plat-btn {
    position: static;
    display: inline-block;
    left: auto;
    bottom: auto;
    margin-top: 20px;
    width: auto;
    padding: 0 26px;
    height: 44px;
    line-height: 44px;
    font-size: 16px;
  }

  /* 全场景：解除定尺，卡片按内容撑高 */
  .scene {
    padding: 60px 0 68px;
  }

  .scene .sec-title {
    margin-bottom: 36px;
  }

  .scene-list {
    grid-auto-rows: auto;
  }

  .scene-card {
    min-height: 240px;
    padding: 26px 30px 30px;
  }

  .scene-card--tall {
    min-height: 500px;
  }

  .scene-card h4 {
    font-size: 22px;
  }

  .scene-card p {
    font-size: 15px;
  }

  .step-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .step-item {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    min-height: 0;
  }

  .step-item h4 {
    font-size: 20px;
  }

  .step-item h4 span {
    font-size: 20px;
  }

  .step-item img {
    width: 100%;
    max-width: 150px;
  }

  .step-item p {
    font-size: 13px;
    margin-top: 12px;
  }
}

@media (max-width: 1199px) {
  .pain-list {
    grid-template-columns: repeat(2, 1fr);
  }

  /* plat-row-keep：三大平台卡在 ≤1199 不再掉成一列。原来这里写 1fr，1135 宽的单列把 453:168 的头图按卡宽放大到 421 高，
   三张叠起来把区块从 1056 撑到 2570。改为沿用基础规则的三列，与 ≥1400 的并排布局同构，卡宽随容器自适应。
   ⚠️ 堆叠改到 ≤767（见那里 .plat-list 的复位）。 */
  .scene-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .scene-card--tall {
    grid-row: span 1;
    min-height: 0;
  }

  /* 插画卡：插图按卡宽等比、贴底，用 padding-bottom 预留插图空间（不用 cover，避免放大压字） */
  .scene-card--illu {
    min-height: 0;
    aspect-ratio: auto;
    background-size: 100% auto;
    background-position: 50% 100%;
    padding-bottom: 20%;
  }

  .scene-card--illu.scene-card--wide {
    padding-bottom: 0;
  }
  .scene-card--i2, .scene-card--i3, .scene-card--i4 {
    background-image: none;
  }
}

@media (max-width: 991px) {
  .hero {
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, .9) 34%, rgba(255, 255, 255, .6)),
      url('../img/xmtyy/61652852.jpg');
    background-position: 50% 50%, 68% 50%;
    background-size: cover, cover;
  }

  .case-body {
    flex-direction: column;
  }

  .case-arrow {
    transform: rotate(90deg);
    margin: 0 auto;
  }

  .step-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 20px;
  }

  /* step-badge-2x2：≤991 收成 2 列后每张卡宽 461.5、标题却仍只有 148.25px（auto 轨道按 h4 的 max-content 定），
   虚线箭头被 ≤1399 的 max-width:150px 卡住 ⇒ 悬在半空；第 2 张的箭头还指向容器右缘外侧、等于指空。
   ⇒ 2×2 这一档不再用「横向箭头」这套语言，改用与 ≤767 手机端时间轴同一套「蓝色序号圆点 + 标题 + 缩进说明」，四宫格左右对称。
   ⚠️ 这里的轴向数值与 ≤767 那条逐字相同，且 ≤767 写在文件更靠后 ⇒ 手机端逐像素不变。 */
  .step-item h4 {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    font-size: 17px;
    line-height: 1.4;
  }

  .step-item h4 span {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6d97ff, #376aff);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(55, 106, 255, .28);
    position: relative;
    z-index: 1;
  }

  .step-item img {
    display: none;
  }

  .step-item p {
    margin-top: 9px;
    padding-left: 54px;
  }
}

@media (max-width: 767px) {

  .pain {
    padding: 44px 0 40px;
  }

  .pain .sec-title {
    margin-bottom: 28px;
  }

  .pain-list {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* 顶距 44 = 角标底(35) + 11，让标题行整体落到角标之下，不再互相咬合 */
  .pain-card {
    padding: 44px 18px 24px;
  }

  /* 角标同步缩到 104×34：原先是同一张 120×40 图被浏览器双线性缩放，圆弧也跟着非等比缩小 ⇒
   半径沿用桌面档实测值按两轴缩放（19.3×104/120 = 16.73、19.3×34/40 = 16.40），再按对拍残差微调到 16.9 / 16.6。 */
  .pain-badge {
    width: 104px;
    height: 34px;
    border-radius: 16.9px 0 16.9px 0 / 16.6px 0 16.6px 0;
  }

  .pain-label {
    left: 17px;
    top: 8px;
    font-size: 13px;
    line-height: 20px;
  }

  /* 图标改回绝对定位（与桌面档同款做法）：标题文字列 = padding-left 30，
     与要点文字列(30)对齐；标题折行时第二行也落在文字列上，不会跑到图标底下 */
  .pain-icon {
    position: absolute;
    left: 18px;
    top: 46px;
    width: 22px;
    height: 22px;
    margin: 0;
  }

  .pain-card h3 {
    padding-left: 30px;
    font-size: 18px;
  }

  .pain-points {
    margin-top: 16px;
  }

  .pain-points li {
    font-size: 14px;
    line-height: 24px;
    padding-left: 30px;
  }

  .pain-points li+li {
    margin-top: 10px;
  }

  /* 圆点放大到 10（同桌面），左缘与图标同列，(24−10)/2 = 7 竖向居中 */
  .pain-points li::before {
    left: 0;
    top: 7px;
    width: 10px;
    height: 10px;
  }

  .pain-link {
    margin: 18px 0 0 0;
  }

  .service {
    padding: 0 0 52px;
  }

  .service .sec-title {
    margin-bottom: 26px;
  }

  /* shot-row-keep：手机档复位回纵向堆叠。⚠️ ≤1399 的 `flex: 0 0 32.357%` 一旦留在
     column 方向，flex-basis 会作用在**高度**上（分母还是 auto 高）⇒ 必须 `flex:none`
     显式复位，否则左图会塌掉。 */
  .shot-card {
    flex-direction: column;
  }

  /* shot-left-fluid：左图从固定 220 改成随宽度缩放 —— 素材是 453×320（1.416:1），固定高在 767 档会把横幅拉成 735×220 的细条，
   cover 只剩中间 42% 的画面。改 clamp 后：≤525 档仍是 220，之后随 42vw 长高，767 档顶到 300。 */
  .shot-left {
    flex: none;
    height: clamp(180px, 42vw, 300px);
  }

  /* 左图文字/按钮左缘由 20 改为 18，与右栏 `padding: 20px 18px 24px` 的 18px 内距对齐 */
  .shot-left h3 {
    left: 18px;
    top: 22px;
    font-size: 20px;
  }

  .shot-btn {
    left: 18px;
    bottom: 22px;
    padding: 0 22px;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
  }

  .shot-right {
    padding: 20px 18px 24px;
  }

  .shot-right h4 {
    font-size: 20px;
  }

  .shot-en {
    font-size: 11px;
  }

  .shot-right>p {
    font-size: 14px;
  }

  .shot-right>.shot-li {
    font-size: 14px;
  }

  /* plat-row-keep：手机档复位回单列。⚠️ ≤1199 那条已不再改列数，三列会一路
     渗到手机档 —— 320 档三列每张只有 ~90px，正文挤成竖条，必须在这里显式复位。 */
  .plat-list {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 16px;
  }

  /* plat-head-cap：头图按 453:168（2.696:1）等比，单列后卡宽一路涨到 735 ⇒ 767 档头图高达 272.6（占整卡 57%），整张卡「头重脚轻」。
   手机档把头图封顶在 230（≥625 档起生效），同时卡顶距改用同一个 min() 同步封顶，保证头图底与正文之间恒为 18px。
   ⚠️ 两者必须同源，只改一个会让正文压到头图上。 */
  .plat-head {
    max-height: 230px;
  }

  .plat-card {
    padding: min(calc(37.086% + 18px), 248px) 18px 24px;
  }

  .plat-head h3 {
    left: 18px;
    font-size: 20px;
  }

  .plat-bar {
    left: 18px;
    width: 38px;
    height: 6px;
  }

  .plat-card>p {
    font-size: 14px;
  }

  .plat-card>.plat-li {
    font-size: 14px;
    margin-top: 10px;
  }

  /* 基础规则里 `.plat-li + .plat-li { margin-top: 0 }` 是配合桌面端「li1 恒为 88px 定高容器」
     的设计；手机档高度已 auto，两条要点在多行折行时会**贴死**（同页 .pain-points li + li
     在手机档也有 10px 间距），这里补回同一节奏。 */
  .plat-card>.plat-li+.plat-li {
    margin-top: 10px;
  }

  /* 桌面档该按钮是「卡内水平居中」（left:155 + w145，卡宽 453）；≤1399 改 static 后掉成
     左对齐。手机档恢复居中（仍是同一枚胶囊，只改对齐），与 ≥1400 的设计意图一致。 */
  .plat-btn {
    display: block;
    width: fit-content;
    margin: 16px auto 0;
    padding: 0 22px;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
  }

  .scene {
    padding: 44px 0 52px;
  }

  .scene .sec-title {
    margin-bottom: 26px;
  }

  .scene-list {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .scene-card--wide {
    grid-column: auto;
  }

  /* 手机端：图标 + 小标题同一行（flex 换行，要点强制整行占满）；窄屏前两者各占一行 */
  .scene-card {
    min-height: 0;
    padding: 22px 20px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
  }

  .scene-card--tall {
    min-height: 0;
  }

  /* .scene-card--illu {
    padding-bottom: 78%;
  }

  .scene-card--illu.scene-card--wide {
    padding-bottom: 38%;
  } */
  .scene-card--illu.scene-card--wide {
    padding-bottom: 24px;
  }

  .scene-card--i1,
  .scene-card--i2,
  .scene-card--i3,
  .scene-card--i4 {
    background-image: none;
  }

  .scene-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 7px;
  }

  .scene-card h4 {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
    font-size: 20px;
  }

  .scene-card p {
    flex: 0 0 100%;
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.7;
  }

  .cases {
    padding: 44px 0 52px;
  }

  .industry-tabs {
    gap: 10px;
  }

  .industry-tab {
    height: 42px;
    padding: 0 16px;
    font-size: 15px;
  }

  .industry-tab img {
    width: 20px;
    height: 20px;
  }

  .case-card {
    padding: 24px 18px 26px;
  }

  .case-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .case-head h3 {
    font-size: 20px;
  }

  .btn-pill-blue {
    height: 42px;
    font-size: 16px;
  }

  .case-sub {
    font-size: 14px;
  }

  .case-col {
    padding: 20px 18px;
    background: #e7efff url(../img/xmtyy/61512079.png) right 18px top 12px/auto 15% no-repeat;
  }

  .case-col:not(.case-col--after) {
    background: #f8f8f8 url(../img/xmtyy/61500700.png) right 18px top 12px/auto 15% no-repeat;
  }

  .case-col h4 {
    font-size: 18px;
  }

  .case-col h4 img {
    width: 26px;
    height: 26px;
  }

  .case-col li {
    font-size: 14px;
  }

  .steps {
    padding: 44px 0 56px;
  }

  /* 标题底 → 步骤列表：原 49px 是桌面档唯一定义，窄屏未覆盖 → 收到 28px */
  .steps .sec-title {
    margin-bottom: 28px;
  }

  /* 单列后横向虚线箭头「指向右」已无意义 → 改成竖向时间轴：
     左侧蓝色圆形序号 + 序号之间的竖向虚线（呼应桌面端虚线连接语言），与 SEM / 品牌营销页一致 */
  .step-list {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .step-item {
    display: block;
    padding-bottom: 22px;
  }

  .step-item:last-child {
    padding-bottom: 0;
  }

  .step-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 46px;
    bottom: 0;
    width: 2px;
    background: repeating-linear-gradient(180deg, rgba(55, 106, 255, .32) 0 5px, rgba(55, 106, 255, 0) 5px 11px);
  }

  .step-item h4 {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    font-size: 18px;
    line-height: 1.4;
  }

  .step-item h4 span {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6d97ff, #376aff);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(55, 106, 255, .28);
    position: relative;
    z-index: 1;
  }

  .step-item img {
    display: none;
  }

  .step-item p {
    margin-top: 9px;
    padding-left: 54px;
    font-size: 16px;
    line-height: 22px;
  }
}

@media (max-width: 479px) {
  .pain .sec-title {
    margin-bottom: 22px;
  }

  .steps .sec-title {
    margin-bottom: 22px;
  }

  .pain-list {
    grid-template-columns: 1fr;
  }

  .industry-tab {
    padding: 0 12px;
    font-size: 14px;
  }
}

/* logo-row-narrow */
/* 「合作品牌」logo 三档尺寸（≥992 / ≤991 / ≤479）：原站 $SlideWidth 190 起的等比阶梯 190 / 154 / 124，行高紧跟图高 107 / 84 / 68。
   ⚠️ 本块必须放在文件末尾：同优先级下靠后的媒体查询才能压过前面区块里的旧声明。 */
@media (max-width: 991px) {
  .logo-row {
    height: 84px;
  }

  .logo-wall>*+* {
    margin-top: 8px;
  }

  .logo-row img {
    width: 154px;
    height: 83px;
  }

  .pain-link {
    opacity: 1;
  }
}

@media (max-width: 479px) {
  .logo-row {
    height: 68px;
  }

  .logo-wall>*+* {
    margin-top: 6px;
  }

  .logo-row img {
    width: 124px;
    height: 67px;
  }
}