/* SEM 页面样式 - sem.css */
/* 顶部导航 header / CTA / 页脚 footer 为全站公共样式，统一放在 style.css */

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

/* ==================== 全渠道SEM营销服务 ==================== */
.search {
  padding: 80px 0 46px;
  background: #fff;
}

.search .sec-title {
  margin-bottom: 70px;
}

/* 设计稿：两张卡 926×700 / 453×700，间距 20，卡内左右留白 32、上下 47/42 */
.search-grid {
  display: grid;
  grid-template-columns: 926px 1fr;
  gap: 20px;
  align-items: stretch;
}

.search-card {
  position: relative;
  min-height: 700px;
  border-radius: 20px;
  padding: 49px 32px 0;
  background-position: 50% 50%;
  background-size: cover;
  box-shadow: 0 5px 10px rgba(224, 235, 255, .4);
}

.search-card--in {
  background-image: url('../img/sem/61764205.jpg');
}

.search-card--out {
  background-image: url('../img/sem/61764777.jpg');
}

.search-card h3 {
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #317af7;
  line-height: 1;
}

.search-card--out h3 {
  color: #219aeb;
}

.search-sub {
  margin-top: 11px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 16px;
  color: #317af7;
  line-height: 22px;
}

.search-card--out .search-sub {
  color: #219aeb;
}

.search-divider {
  width: 392px;
  height: 1px;
  background: #cedffd;
  margin-top: 22px;
}

.search-card--out .search-divider {
  background: #a7d5f4;
}

/* 平台：两列 392、列距 66、行距 25 —— 设计稿 3 行标题落在卡内 y160 / 358 / 520 */
.platform-grid {
  display: grid;
  grid-template-columns: 392px 392px;
  column-gap: 66px;
  row-gap: 25px;
  margin-top: 27px;
}

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

.platform p {
  margin-top: 4px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 16px;
  color: #888888;
  line-height: 29px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 5px;
  margin-top: 12px;
}

/* 设计稿胶囊：110×28（「品牌专区(含超品)」为 157×28），16px 字居中 */
.tags span {
  display: block;
  width: 110px;
  height: 28px;
  padding-top: 2px;
  line-height: 24px;
  text-align: center;
  border: 1px solid #cccccc;
  border-radius: 6px;
  background: #fff;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 16px;
  color: #888888;
  cursor: pointer;
}

.tags span.tag--lg {
  width: 157px;
}

/* 悬停：字色 + 边框色同步转主色 #317af7，只改 color 与 border-color，不动 border-width/padding/尺寸 ⇒ 悬停零几何位移。 */
.tags span:hover {
  border-color: #317af7;
  color: #317af7;
}

/* 全域信息流各面板：胶囊悬停色跟随本面板主题色（短视频 #ff9900、社交 #90cb8b），作用域收到 .feed-panel--* 下，搜索区仍走 #317af7。
   同样只改 color / border-color ⇒ 悬停零几何位移。 */
.feed-panel--video .tags span:hover {
  border-color: #ff9900;
  color: #ff9900;
}

.feed-panel--social .tags span:hover {
  border-color: #90cb8b;
  color: #90cb8b;
}

/* 海外卡没有 platform-grid 包裹，单独补上同样的上间距 */
.search-card--out>.platform {
  margin-top: 27px;
}

/* 海外卡底部插图：设计稿 453×287，卡内 (0,411) 满宽 */
.search-pic {
  position: absolute;
  left: 0;
  right: 0;
  top: 411px;
}

.search-pic img {
  display: block;
  width: 100%;
  height: auto;
}

/* 诊断横幅 */
.cta-banner {
  position: relative;
  height: 160px;
  margin-top: 20px;
  border-radius: 20px;
  padding: 49px 32px 0;
  background-position: 50% 50%;
  background-size: cover;
  box-shadow: 0 5px 10px rgba(224, 235, 255, .4);
  color: #fff;
}

.cta-banner--purple {
  background-image: url('../img/sem/61764845.jpg');
}

.cta-banner--red {
  background-image: url('../img/sem/61804001.jpg');
}

.cta-banner__text h3 {
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.cta-banner__text p {
  margin-top: 11px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 16px;
  color: #907de1;
  line-height: 22px;
}

/* 设计稿：272×52 实心 #4C2F99 胶囊，右缘距卡右 92，文字左缩进 36，箭头 32×32 距右 29 */
.cta-banner__btn {
  position: absolute;
  right: 92px;
  top: 47px;
  display: block;
  width: 272px;
  height: 52px;
  padding-left: 36px;
  border-radius: 200px;
  background: rgb(76, 47, 153);
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 52px;
  transition: background .2s;
}

.cta-banner__btn:hover {
  background: rgb(96, 62, 182);
}

/* 本页第二块 CTA（深色底图）：副标题纯白、按钮纯黑 */
.cta-banner--red .cta-banner__text p {
  color: #ffffff;
}

.cta-banner--red .cta-banner__btn {
  background: #000000;
}

.cta-banner--red .cta-banner__btn:hover {
  background: #262626;
}

.cta-banner__btn img {
  position: absolute;
  right: 29px;
  top: 11px;
  width: 32px;
  height: 32px;
  transition: transform .25s ease;
}

/* 「申请账户诊断」悬停：按钮右侧箭头图标左右小幅往复摆动（与首页 .geo-cta / geo .btn-primary / seo .btn-pill-* 同一套范式：
   同名关键帧 geo-cta-arrow-sway、同时长 / 缓动 / 幅值）。
   只用 translateX，不参与布局 ⇒ 静止态与动画中都是零位移、零溢出；关键帧首尾回 0 ⇒ 进入时不跳变。
   ⚠️ 摆幅 ±3px 与「箭头 ↔ 文字」的间隙是一对：本页盒级间隙 ≥1400 档 15px、≤1399 档 8px ⇒ 摆到最左仍有 5px 净空。
   ⚠️ 关键帧名与 index.css / geo.css / seo.css 同名，但本页只加载 style.css + sem.css，二者不含 sway 关键帧 ⇒ 不会覆盖。
   ⚠️ 原有 .cta-banner__btn:hover 的背景变更保留不动（本需求是「添加」动效，不是替换）。
   ⚠️ 用 (hover: hover) 兜住触屏。 */
@keyframes geo-cta-arrow-sway {
  0% {
    transform: translateX(0);
  }

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

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

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

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

/* ==================== 全域信息流种草 ==================== */
.feed {
  padding: 80px 0;
  background: #fff;
}

.feed .sec-title {
  margin-bottom: 70px;
}

/* 设计稿：两块 1400×540 面板，圆角 20，块间距 20 */
.feed-panel {
  position: relative;
  min-height: 540px;
  border-radius: 20px;
  padding: 49px 32px 0;
  background-position: 50% 50%;
  background-size: cover;
}

.feed-panel--video {
  background-image: url('../img/sem/61803043.jpg');
  box-shadow: 0 5px 10px rgba(252, 229, 205, .2);
}

.feed-panel--social {
  margin-top: 20px;
  background-image: url('../img/sem/61803075.jpg');
  box-shadow: 0 5px 10px rgba(206, 244, 203, .3);
}

/* 面板标题与副标题同色：短视频 #ff9900、社交 #90cb8b */
.feed-head h3 {
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.feed-head p {
  margin-top: 11px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 16px;
  line-height: 22px;
}

.feed-panel--video .feed-head h3,
.feed-panel--video .feed-head p {
  color: #ff9900;
}

.feed-panel--social .feed-head h3,
.feed-panel--social .feed-head p {
  color: #90cb8b;
}

.feed-divider {
  width: 882px;
  max-width: 100%;
  height: 1px;
  margin-top: 22px;
}

.feed-panel--video .feed-divider {
  background: #fce5cd;
}

.feed-panel--social .feed-divider {
  background: #cdf4ca;
}

/* 平台：设计稿三列起点 32 / 490 / 980（列实体宽 387），行距 52 */
.feed-grid {
  display: grid;
  grid-template-columns: 458px 490px 387px;
  row-gap: 52px;
  margin-top: 27px;
}

.feed-item {
  width: 387px;
}

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

.feed-item p {
  margin-top: 4px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 16px;
  color: #888888;
  line-height: 29px;
}

/* ==================== 标准化闭环服务 ==================== */
.service {
  padding: 80px 0 90px;
  background: #f2f7ff url('../img/sem/61769683.jpg') 50% 50%/cover no-repeat;
}

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

/* 设计稿：4 张 335×470 卡片、间距 20。卡内所有尺寸用 cqw（卡片宽度百分比）表达，
   与 335×470 的蓝头底图严格等比 —— 任何断点下正文都不会压到蓝头上 */
.svc-list {
  display: grid;
  grid-template-columns: repeat(4, 335px);
  gap: 20px;
}

.svc-card {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 335 / 470;
  border: 1px solid #e4e8f0;
  border-radius: 10px;
  background-color: #ffffff;
  background-position: 50% 0;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.svc-card--a {
  background-image: url('../img/sem/61769690.jpg');
}

.svc-card--b {
  background-image: url('../img/sem/61769895.jpg');
}

.svc-card--c {
  background-image: url('../img/sem/61770058.jpg');
}

.svc-card--d {
  background-image: url('../img/sem/61770182.jpg');
}

/* 设计稿卡内坐标：标题顶 52、副标题 87（字 16/行高 22）、条目首行 170（行高 38） */
.svc-card h4 {
  margin: 15.92cqw 9.61cqw 0;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 8.41cqw;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}

.svc-card>p {
  margin: 2.7cqw 9.61cqw 0;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 4.8cqw;
  color: #ffffff;
  line-height: 6.61cqw;
}

.svc-points {
  margin: 17.72cqw 9.61cqw 0;
}

.svc-points li {
  display: flex;
  align-items: center;
  gap: 5.41cqw;
  height: 11.41cqw;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 5.41cqw;
  color: #888888;
}

.svc-points li::before {
  content: "";
  flex: 0 0 6.01cqw;
  width: 6.01cqw;
  height: 6.01cqw;
  background: url('../img/sem/61769794.png') center/contain no-repeat;
}

/* ==================== 深耕SEM投放多年 ==================== */
.advantage {
  padding: 70px 0 80px;
  background: #f5f9ff url('../img/sem/61771699.jpg') 50% 50%/cover no-repeat;
}

.advantage .sec-title {
  margin-bottom: 44px;
}

.adv-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.adv-card {
  grid-column: span 2;
  border-radius: 20px;
  padding: 30px 28px 150px;
  border: 1px solid #f3f3f3;
  box-shadow: 0 5px 20px rgba(134, 210, 253, .2);
  background-position: 50% 100%;
  background-size: cover;
  background-repeat: no-repeat;
}

.adv-card:nth-child(1) {
  background-image: url('../img/sem/61770986.jpg');
}

.adv-card:nth-child(2) {
  background-image: url('../img/sem/61771013.jpg');
}

.adv-card:nth-child(3) {
  background-image: url('../img/sem/61771034.jpg');
}

.adv-card:nth-child(4) {
  background-image: url('../img/sem/61771096.jpg');
}

.adv-card:nth-child(5) {
  background-image: url('../img/sem/61771220.jpg');
}

/* 第 4、5 张卡片各占 3 列（两行 3+2 布局） */
.adv-card:nth-child(4) {
  grid-column: 1 / span 3;
}

.adv-card:nth-child(5) {
  grid-column: 4 / span 3;
}

/* 悬停把卡片背景图放大 —— 与 SEO 页「四大核心服务优势」、首页 .adv-card 同幅值（1 → 1.08）、同缓动曲线。
   ⚠️ 静止态必须保持 cover 原样不动：Chrome 对「元素自身背景」与「后代盒子背景」走两条不同的光栅化路径 ——
      把背景搬到 ::after 再放大，静止态就有 27% 像素不同（最大通道差 37/255）；把 cover 换成数学同解的 100% auto
      也会在卡片水平中轴那一列产生 ~79 像素、最大 4/255 的差异 ⇒ 逐像素回归必失败。
   ⇒ 唯一能保证「静止态逐字节不变」的写法：cover 不动，只在悬停时把尺寸重写成同解的 100% auto 并放大到 108% auto；
      背景永远裁在卡片自身 border box 内 ⇒ 不需要 overflow:hidden，也不新增任何盒子。
   ⚠️ 用 @keyframes 而非 transition：cover 不可插值，transition 会退化成「一帧到位」。代价是移开时瞬时还原，
      「缩回」的平滑由 js/sem.js 的两段式脚本补（挂上 .jsz 后改走 transition）。
   ⚠️ 门控：(hover: hover) 兜触屏；prefers-reduced-motion 时整条不生效。 */
@keyframes sem-adv-bg-zoom {
  from {
    background-size: 100% auto;
  }

  to {
    background-size: 108% auto;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {

  /* 无脚本（或脚本未接管）时的降级：进入平滑放大、移开瞬时还原 */
  .adv-card:not(.jsz):hover {
    animation: sem-adv-bg-zoom .6s cubic-bezier(.22, .61, .36, 1) forwards;
  }

  /* 由 js/sem.js 挂上 .jsz 后改走 transition：进入 / 移开都平滑 */
  .adv-card.jsz {
    transition: background-size .6s cubic-bezier(.22, .61, .36, 1);
  }
}

/* 卡片标签：原为 5 张 PNG 渐变字图（151×30，可见字形 90×22），改由纯文字复刻同一渐变。
   渐变色值实测自原图：水平 90deg，左端 rgb(49,122,247) = #317af7 → 右端 rgb(13,173,255) = #0dadff；垂直取样恒定 ⇒ 纯水平渐变。
   字号 18px/700 使 4 个中文字宽 ≈ 72px，与原图可见字形按 24/30 缩小后的宽度吻合。
   ⚠️ display:block + width:fit-content 是有意为之：style.css 把 img 设成 display:block，写成 inline-block 会凭空多出一个行盒（每张卡高 +5px）；
      块级默认占满整卡宽，必须用 fit-content 把盒宽收到文字宽，否则 background-clip:text 的渐变带会被拉满整卡。 */
.adv-label {
  display: block;
  width: fit-content;
  height: 24px;
  line-height: 24px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  background-image: linear-gradient(90deg, #317af7 0%, #0dadff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 兜底：万一浏览器不支持 background-clip:text，退回纯品牌蓝，别让文字整块消失 */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .adv-label {
    color: #317af7;
    -webkit-text-fill-color: currentColor;
  }
}

.adv-card h4 {
  margin-top: 14px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #1d2129;
}

.adv-card p {
  margin-top: 12px;
  max-width: 520px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 15px;
  color: #636e80;
  line-height: 1.6;
}

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

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

.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/sem/61250273.jpg') 50% 50%/cover no-repeat;
  color: #fff;
}

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

.case-head {
  position: relative;
  display: block;
}

.case-head h3 {
  font-family: "Source Han Sans", Geneva, sans-serif;
  margin-top: 4px;
  font-size: 32px;
  font-weight: 700;
  color: #1d2129;
  line-height: 1;
}

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

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

.btn-pill-blue {
  height: 52px;
  border-radius: 200px;
  padding: 0 32px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  background: #317af7 url('../img/sem/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，复用本页已有的 geo-cta-arrow-sway 关键帧，无需另立一份）。
   只用 translateX，不参与布局 ⇒ 静止态与动画中都是零位移、零溢出；关键帧首尾回 0 ⇒ 进入时不跳变。
   ⚠️ 摆幅 ±3px 与 img 的 margin-left 是一对：本页 6 档实测盒级间隙恒为 8px ⇒ 摆到最左仍留 5px 净空。
   ⚠️ 关键帧名与 index.css / geo.css / seo.css 同名，但本页只加载 style.css + sem.css ⇒ 不会覆盖。
   ⚠️ 用 (hover: hover) 兜住触屏。 */
.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;
  }
}

.case-btn {
  position: absolute;
  right: 0;
  top: -14px;
  margin-top: 0;
  width: 182px;
  justify-content: center;
}

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

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

.case-col {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 30px 24px 0;
  min-height: 320px;
}

.case-col:not(.case-col--after) {
  flex: 0 0 580px;
  background: #f8f8f8 url('../img/sem/61500700.png') 246px 34px no-repeat;
  border: 2px solid #eee;
}

.case-col--after {
  flex: 0 0 620px;
  background: #e7efff url('../img/sem/61512079.png') 246px 34px no-repeat;
  border: 2px solid #c6dbff;
}

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

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

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

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

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

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

.case-arrow {
  flex: 0 0 72px;
  margin: 0 14px;
}

.case-arrow img {
  width: 72px;
  height: 72px;
  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 与动画时长由 sem.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 组的份数（sem.js 按窗口宽度写入） */
  --logo-dur: 40s;
  /* 移动一份所需时间（sem.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;
}

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

/* 设计稿：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;
}

.step-item img {
  width: 150px;
  height: 12px;
  object-fit: fill;
}

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

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

.faq-title {
  margin-top: 72px;
}

.faq-list {
  margin-top: 76px;
  gap: 16px;
}

.faq-item {
  border: 1px solid #f0f4fa;
}

.faq-q {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 26px 32px;
  font-size: 22px;
  /* 「点击闪一下蓝色」的处置已上移到公共 css/style.css 的 html{} 里 ——
     该属性可继承，一处即覆盖全站所有可点元素（本节原先只关这一个按钮）。
     根因与实测记录见 .workbuddy/memory 的 §115。 */
}

.faq-q span {
  flex: 1;
}

.faq-q span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 14px;
  border-radius: 50%;
  background: #317af7;
  vertical-align: middle;
}

.faq-q img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.faq-a p {
  padding: 0 32px 28px 54px;
  max-width: 1180px;
  font-size: 16px;
  line-height: 1.7;
}

/* 展开态：本条设计稿未做负 margin 上提（另几页为 -20~-22px），展开与收起的间距一致；
   height:auto 由公共 css/faq.css 提供 */

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

  .search-grid {
    grid-template-columns: 66.14% 1fr;
  }

  .search-card {
    min-height: 0;
    padding: 34px 28px 32px;
  }

  .search-card h3 {
    font-size: 24px;
  }

  .search-sub {
    font-size: 15px;
  }

  .search-divider {
    width: 100%;
  }

  .platform-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 20px;
    margin-top: 26px;
  }

  .platform h4 {
    font-size: 20px;
    line-height: 1.4;
  }

  .platform p {
    font-size: 14px;
    line-height: 1.6;
  }

  .tags span {
    width: auto;
    padding: 0 12px;
    font-size: 14px;
  }

  .tags span.tag--lg {
    width: auto;
  }

  .search-pic {
    position: static;
    margin-top: 26px;
  }

  .cta-banner {
    height: auto;
    padding: 30px 28px;
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .cta-banner__text {
    flex: 1;
  }

  .cta-banner__text h3 {
    font-size: 24px;
  }

  .cta-banner__text p {
    font-size: 15px;
  }

  .cta-banner__btn {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    height: 48px;
    padding: 0 24px;
    font-size: 17px;
    line-height: 1;
    flex-shrink: 0;
  }

  .cta-banner__btn img {
    position: static;
    width: 26px;
    height: 26px;
  }

  .feed-panel {
    min-height: 0;
    padding: 34px 28px 32px;
  }

  .feed-head h3 {
    font-size: 24px;
  }

  .feed-head p {
    font-size: 15px;
  }

  .feed-divider {
    width: 100%;
  }

  .feed-grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 24px;
    row-gap: 34px;
    margin-top: 26px;
  }

  .feed-item {
    width: auto;
  }

  /* svc-list-4col：≤1399 不再用 auto-fit —— 它的重复次数按 minmax() 的 max（335）算，1399 档只剩 3 列 + 末行 1 张孤卡。
   改成 4 列 1fr：4 张卡等分容器宽、按 aspect-ratio 与卡内 cqw 等比缩小，末行不满的问题自然消失。
   ⚠️ 去掉 justify-content:center：1fr 没有余量，留着无意义且会掩盖「轨道没铺满」这类回归。 */
  .svc-list {
    grid-template-columns: repeat(4, 1fr);
  }

  .case-card {
    padding: 40px 32px 34px;
  }

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

  .case-sub {
    margin-top: 16px;
    font-size: 16px;
    line-height: 26px;
  }

  /* case-body-eq：≤1399 两栏时基础规则 align-items:center 让两张卡各按内容定高，右卡文案更长 ⇒ 两卡底边差 60px。
   改成 align-items:stretch：两卡都撑到较高者。⚠️ 容器高本来就是 max(两卡) ⇒ .case-body 高度不变、docH 完全不变。
   箭头必须单独 align-self:center，否则会被一起拉成整列高、不再垂直居中。 */
  .case-body {
    margin-top: 24px;
    align-items: stretch;
  }

  .case-col:not(.case-col--after),
  .case-col--after {
    flex: 1 1 0;
    min-height: 0;
    padding: 26px 22px 26px;
  }

  .case-col h4 {
    line-height: 1.3;
  }

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

  .case-col li {
    font-size: 16px;
    line-height: 30px;
  }

  .case-arrow {
    flex: 0 0 48px;
    margin: 0;
    align-self: center;
  }

  .case-arrow img {
    width: 48px;
    height: 48px;
  }

  .adv-card {
    padding: 26px 22px 130px;
  }

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

  .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;
  }

  .faq-title {
    font-size: 32px;
    margin-top: 56px;
  }

  .faq-list {
    margin-top: 40px;
  }

  .faq-q {
    font-size: 19px;
    padding: 24px 26px;
  }
}

@media (max-width: 1199px) {

  /* search-grid-narrow：两卡塌成单列后卡宽从 453 涨到 ~1135，插图仍 width:100% ⇒ 被放大 2.4 倍，海外卡比国内卡高一倍。
   素材原始尺寸就是 453×287 —— 窄屏回到设计原尺寸、在卡内居中即可（≤480 档卡内框 <453，自然通栏）。
   ⚠️ 只写 max-width 不写 width：定宽会参与 grid 轨道的 min-content 计算，≤479 会把 1fr 轨道顶宽 ⇒ 整页横溢。 */
  .search-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .search-pic {
    max-width: 453px;
    margin-left: auto;
    margin-right: auto;
  }

  .cta-banner {
    padding: 26px 30px;
  }

  .cta-banner__text h3 {
    font-size: 22px;
  }

  .feed-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* adv-list-narrow：这里原本想改成 2 列，但基础规则里就有 .adv-card{grid-column:span 2} —— 在 2 列轨道里 span 2 恰好等于通栏，
   于是 1~3 号卡各占一整行、第 4 张只占半行（右半留空洞），卡宽从 365 暴涨到 1135、背景图被 cover 放大 2.5 倍。
   修法：不要在这里改轨道，直接沿用桌面档的 6 列 3+2（1~3 号 span 2、4~5 号 span 3），1199 档即与 1200 档逐像素连续。
   到 ≤991 才收成「2 列 + 末张居中」（见下）。 */
}

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

  .platform-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* svc-list-2col：4 列压到 992 档卡宽只剩 217px（标题 ~18px、正文 ~10px），
     再往下就不可读 ⇒ ≤991 收成 2 列，卡片宽回到 461→135px。 */
  .svc-list {
    grid-template-columns: repeat(2, 1fr);
  }

  /* adv-list-2row：5 张卡在 6 列轨道里是 3+2，到 992 档卡片只剩 296px ⇒ ≤991 收成 2 列。
   5 张排 2 列会剩一张孤卡 —— 用「列轨道翻倍」把它居中：轨道 2→4、每张 span 2，末张 grid-column:2 / span 2 落到第 2~3 条轨道。
   只改轨道数 ⇒ 列宽 / 行高 / docH 全不受影响。
   ⚠️ ≤767 那份 grid-column:auto 在文件里更靠后，同特异性后写的赢，这里不必重复重置。 */
  .adv-list {
    grid-template-columns: repeat(4, 1fr);
  }

  .adv-card:nth-child(4),
  .adv-card:nth-child(5) {
    grid-column: span 2;
  }

  .adv-card:nth-child(5) {
    grid-column: 2 / span 2;
  }

  .cta-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .feed-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* case-body-eq-grid：≤991 两卡改成上下堆叠后高度各随内容，480/479 差 44.7px（column 方向的 stretch 只拉宽度、拉不动高度）。
   改用 grid 的「1fr auto 1fr」行：容器高不定时两条 1fr 轨道按各自内容的最大值取等 ⇒ 两卡等高，箭头仍占中间的 auto 行。 */
  .case-body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto 1fr;
    align-items: stretch;
    justify-items: stretch;
  }

  /* case-body-eq-w：≤991 堆叠态把两张卡调成一样宽。grid item 在 justify-items:center 下按 fit-content 收缩、宽度各随内容，左右边缘参差。
   改成 stretch 后两个 item 各撑满整条列轨道 = .case-body 内容宽 ⇒ 两卡等宽且与卡片左右边缘对齐。
   高度仍由上面的「1fr auto 1fr」行保证等高，箭头靠自身 justify-self:center 居中。 */
  .case-col:not(.case-col--after),
  .case-col--after {
    flex: 0 0 auto;
  }

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

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

  /* step-badge-2x2：≤991 收成 2 列后每张卡宽 461、标题却仍只有 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) {

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

  .search-card {
    padding: 24px 18px 22px;
  }

  .search-card h3 {
    font-size: 21px;
  }

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

  .platform-grid {
    grid-template-columns: 1fr;
    row-gap: 18px;
    margin-top: 20px;
  }

  .platform h4 {
    font-size: 18px;
  }

  .platform p {
    font-size: 16px;
  }

  .tags span {
    height: 26px;
    line-height: 24px;
    padding: 0 10px;
    font-size: 14px;
  }

  .tags span.tag--lg {
    width: auto;
  }

  .cta-banner {
    padding: 22px 18px;
    border-radius: 16px;
  }

  .cta-banner__text h3 {
    font-size: 19px;
  }

  .cta-banner__text p {
    font-size: 13px;
  }

  .cta-banner__btn {
    height: 44px;
    font-size: 15px;
    padding: 0 20px;
    width: 100%;
    justify-content: center;
  }

  .feed {
    /* padding: 44px 0 52px; */
    padding: 0 0 52px;
  }

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

  .feed-panel {
    padding: 24px 18px 26px;
  }

  .feed-head h3 {
    font-size: 21px;
  }

  .feed-head p {
    font-size: 14px;
  }

  .feed-divider {
    margin-top: 16px;
  }

  .feed-grid {
    grid-template-columns: 1fr;
    row-gap: 22px;
    margin-top: 18px;
  }

  .feed-item {
    width: auto;
  }

  .feed-item h4 {
    font-size: 18px;
  }

  .feed-item p {
    font-size: 16px;
  }

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

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

  /* 手机端单列：卡片高度改由内容决定（原来 4 条的那张也硬撑 470 高，底部空 146px）。
     卡底图 335×470 中蓝带只占顶部 136px、其下全白，缩高不会切到图案 */
  .svc-list {
    gap: 18px;
  }

  .svc-card {
    aspect-ratio: auto;
    padding-bottom: 26px;
    box-shadow: 0 6px 18px rgba(31, 74, 163, .08);
  }

  .svc-card h4 {
    margin-top: 12.6cqw;
  }

  /* 卡底图蓝带固定在卡顶 136px（= 卡宽 335 的 40.6%，随卡宽等比缩放）。
     原来 8cqw 会让首条压进蓝带边缘（列表顶 129 < 136），改为 15cqw
     把首条落到蓝带下方、白区留 ~15px 呼吸位 */
  .svc-points {
    margin-top: 15cqw;
  }

  .svc-points li {
    height: 10.2cqw;
  }

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

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

  .adv-card,
  .adv-card:nth-child(4),
  .adv-card:nth-child(5) {
    grid-column: auto;
    padding: 22px 18px 120px;
  }

  .adv-label {
    font-size: 20px;
  }

  .adv-card h4 {
    font-size: 20px;
  }

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

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

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

  /* tab 收到 ≤94 宽，5 个才排成 3+2 两行（原 110 宽一行只放得下 2 个 → 2+2+1，末行孤一个） */
  .industry-tabs {
    gap: 8px;
  }

  .industry-tab {
    height: 38px;
    padding: 0 9px;
    gap: 6px;
    font-size: 14px;
  }

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

  .case-card {
    margin-top: 28px;
    padding: 22px 16px 24px;
    box-shadow: 0 6px 18px rgba(31, 74, 163, .08);
  }

  /* 卡头改上下排：原按钮是绝对定位（top:-14px;right:0），窄屏会压在标题上（重叠 28px） */
  .case-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  /* 标题分行：行业名一行、投放方式（蓝色 em）整行另起，避免「…精准投 / 放」这种断词 */
  .case-head h3 {
    margin-top: 0;
    font-size: 20px;
    line-height: 1.35;
  }

  .case-head h3 em {
    display: block;
    margin-top: 2px;
  }

  .case-sep {
    display: none;
  }

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

  .case-btn {
    position: static;
    width: auto;
  }

  .case-sub {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.75;
  }

  /* 两卡内距统一（原来 col0 被 ≤1399 的 :not() 规则压成 26/22、col1 却是 20/18） */
  .case-col:not(.case-col--after),
  .case-col--after {
    padding: 20px 16px;
  }

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

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

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

  .case-col li {
    font-size: 14px;
    line-height: 1.72;
    padding-left: 16px;
  }

  /* 卡角水印 Before / After 完整落在右上：原 246px 绝对定位在 303 宽卡上被裁得只剩 57px */
  .case-col:not(.case-col--after) {
    background-position: right 12px top 16px;
    background-size: auto 34px;
  }

  .case-col--after {
    background-position: right 12px top 16px;
    background-size: auto 34px;
  }

  .case-arrow {
    margin: 6px auto;
  }

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

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

  /* 单列后横向虚线箭头「指向右」已无意义 → 改成竖向时间轴：
     左侧蓝色圆形序号 + 序号之间的竖向虚线（呼应桌面端虚线连接语言） */
  .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;
  }

  .faq-title {
    font-size: 22px;
    margin-top: 44px;
  }

  .faq-list {
    margin-top: 24px;
    gap: 12px;
  }

  .faq-q {
    padding: 18px 18px;
    font-size: 16px;
    gap: 10px;
  }

  .faq-q img {
    width: 20px;
    height: 20px;
  }

  .faq-a p {
    padding: 0 18px 18px 18px;
    font-size: 14px;
  }
}

@media (max-width: 479px) {
  .platform-grid {
    grid-template-columns: 1fr;
  }

  .feed-grid {
    grid-template-columns: 1fr;
  }

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

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

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

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

  .svc-list {
    grid-template-columns: repeat(1, 1fr);
  }


}

/* search-pic-narrow：1200~1399 仍是两栏，grid 的 align-items:stretch 会把右卡撑到与左卡等高（635px），
   插图留在文档流里紧跟 Google 块下方 ⇒ 卡底空出 135~160px 纯白。改为与桌面档同款：通栏 + 贴卡底。
   ⚠️ 必须限定 min-width：≤1199 右卡塌成单列、高度由内容决定，插图一旦脱离文档流，卡片就不再为它留高，会与 Google 块重叠。 */
@media (min-width: 1200px) and (max-width: 1399px) {
  .search-pic {
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    margin-top: 0;
  }
}

/* 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;
  }
}

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

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

  .logo-row img {
    width: 124px;
    height: 67px;
  }
}
/* adv-carousel */
/* —— 「深耕SEM投放多年」≤767 改「一屏一张 + 自动左滑」的横向轮播。
   结构零改动：由 js/sem.js 给 .adv-list 加 .adv-list--carousel（转 flex 横向轨道，
   每张卡占满轨道宽），并在轨道末尾克隆第 1 张；滑到克隆位时那画面与起点逐像素一致，
   于是可无声跳回 0 ⇒ 无缝循环。
   ⚠️ 全部规则都以 .adv-list--carousel 为前缀 ⇒ **无 JS / 不支持 matchMedia /
      prefers-reduced-motion: reduce 时不命中**，自动回落成原来的单列纵向堆叠
      （5 张卡全在、逐卡尺寸与改前逐字节相同 —— 这是刻意的降级，不是隐藏）。
   ⚠️ 滑动用原生横向滚动（overflow-x:auto + scrollTo({behavior:'smooth'})），
      不用 transform：transform 会把整条轨道提升为合成层，Chrome 随之改用
      灰度抗锯齿渲染该子树，卡内 20px 中文标题会变糊（§110 的 sticky 踩过同一个坑）；
      横向滚动还自带惯性、可手动拖，移动端语义也更对。
   ⚠️ 列距取 40px 而非沿用 ≤767 的 14px，是被几何逼出来的：
      滚动容器的裁剪边在 padding 边（本档 = 视口边），卡片左右各留 16px 内衬后，
      右侧邻卡左缘落在「视口 − 32 + 列距 + 16」处，它的投影又向左多铺 20px。
      要让「邻卡本身 + 邻卡投影」都落在视口之外，须 列距 ≥ 36px（= 内衬 16 + 投影 20）。
      40 是留了 4px 余量的取值。静止态看不到列距（一屏一张），只在滑动途中一闪而过。
   ⚠️ align-items 不能沿用默认的 stretch：5 张卡内容行数不同（实测 268.78 / 246.39 两种高度），
      拉伸会把矮卡顶到最高卡的高度 ⇒ 逐卡渲染改变。用 flex-start 保持各自自然高。
   ⚠️ 滚动容器的裁剪边定在 padding 边 ⇒ 轨道必须留 30px padding-bottom，否则卡片自带的
      `0 5px 20px` 下投影会被齐根裁掉、卡片看着「贴」在区块底上。
      这 30px 会顶高区块，故用 :has() 在**轮播启用时**把 .advantage 的 padding-bottom 减掉等量：
      没轮播（无 JS / reduce）时 :has() 不命中，padding 原样 52px，与改前一致。
      ⚠️ 别指望负 margin：父元素 height:auto 不会因末位子元素的负 margin-bottom 而变矮
      （CSS 2.1 §10.6.3）。
   ⚠️ 横向那 16px 内衬 + 等量负 margin 是为了把「裁剪边」推到视口边：
      卡宽仍是「视口 − 32」，与改前逐像素同位；多出的 16px 只是给卡片左右投影留出可见余地
      （不留就被 padding 边齐根切掉，卡片下缘看着像被裁过）。
      数值 16 = style.css 在 ≤767 给 .section-inner 的 padding，两边正好抵消 ⇒ 页面零横向溢出；
      将来若动了那个 padding，这里必须同步改。 */
.adv-card--clone {
  display: none;
}

@media (max-width: 767px) {
  .advantage:has(.adv-list--carousel) {
    padding-bottom: 22px;
  }

  .adv-list--carousel {
    --adv-gap: 40px;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--adv-gap);
    margin: 0 -16px;
    padding: 0 16px 30px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  /* 隐藏滚动条（轮播不需要它；移动端 overlay 滚动条滑动时仍会闪一下） */
  .adv-list--carousel::-webkit-scrollbar {
    display: none;
  }

  .adv-list--carousel>.adv-card,
  .adv-list--carousel>.adv-card:nth-child(n) {
    flex: 0 0 100%;
    width: auto;
    min-width: 0;
  }

  /* 克隆卡只在轮播态出现（默认 display:none，防 resize 到 ≥768 时残留污染网格） */
  .adv-list--carousel>.adv-card--clone {
    display: block;
  }
}