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

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

/* ==================== 行业难题 ==================== */
.pain {
  padding: 80px 0 35px;
  background: #f7faff url('../img/seo/61538744.jpg') 50% 50%/cover no-repeat;
}

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

.pain-cards {
  display: flex;
  gap: 40px;
}

.pain-card {
  position: relative;
  flex: 1;
  border-radius: 20px;
  padding: 60px 33px 37px 47px;
  background-position: 50% 50%;
  background-size: cover;
}

.pain-card--in {
  background-image: url('../img/seo/61528826.jpg');
  border: 1px solid #c6e0ff;
}

.pain-card--out {
  background-image: url('../img/seo/61530057.jpg');
  border: 1px solid #dfdbff;
}

/* 角标：原来用 PNG 位图（212×76 @2x，显示 106×38），改为纯 CSS 实现，做法与首页 .geo-badge 一致。
   形状按原图像素轮廓拟合：左上/右下为直角，右上圆角 20px、左下圆角 18px；
   渐变与文字均在原图上实测取值，故视觉效果与位图版一致。 */
.pain-badge {
  position: absolute;
  right: -1px;
  top: -1px;
  width: 106px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 20px 0 18px;
  background: linear-gradient(90deg, #0145ff, #00a9ff);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  font-family: "Source Han Sans", SimHei, sans-serif;
  white-space: nowrap;
}

/* 第二张卡（紫主题）角标换紫色渐变，与卡片描边同色系 */
.pain-card--out .pain-badge {
  background: linear-gradient(90deg, #aea5f7, #b289ef);
}

.pain-card h3 {
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #1d2129;
  margin-bottom: 15px;
}

.pain-tag {
  display: block;
  width: 360px;
  height: 42px;
  line-height: 42px;
  margin: -2px 0 0 -20px;
  padding: 0 19px 0 20px;
  border-radius: 10px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 18px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% 100%;
}

.pain-card--in .pain-tag {
  color: #317af7;
  background-image: url('../img/seo/61528990.jpg');
}

.pain-card--out .pain-tag {
  color: #8078c4;
  background-image: url('../img/seo/61530185.jpg');
}

.pain-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 25px;
  margin-top: 17px;
}

.pain-list h4 {
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.pain-card--in .pain-list h4 {
  color: #317af7;
}

.pain-card--out .pain-list h4 {
  color: #8078c4;
}

.pain-list p {
  margin-top: 8px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 16px;
  color: #636e80;
  line-height: 1.6;
}

.btn-pill-in,
.btn-pill-out {
  margin-top: 40px;
  height: 52px;
  width: 182px;
  border-radius: 200px;
  padding: 0 12px;
  font-size: 18px;
  color: #fff;
}

.btn-pill-in {
  background: #317af7 url('../img/seo/61250273.jpg') 50% 50%/cover no-repeat;
}

.btn-pill-out {
  background: #8078c4 url('../img/seo/61530531.jpg') 50% 50%/cover no-repeat;
}

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

.btn-pill-in:hover,
.btn-pill-out:hover {
  opacity: .92;
}

/* 「立即咨询」悬停：白底圆箭头徽标左右小幅往复摆动（照搬首页 .geo-card .geo-cta —— 同一关键帧、时长 / 缓动 / 幅值，连 animationName 都一致）。
   本页两支按钮（--in / --out）结构同构、素材同族（42×42 白盘 + 箭头，仅箭色蓝 / 紫不同），故一并加上。
   只用 translateX，不参与布局 ⇒ 静止态与动画中都是零位移、零溢出；关键帧首尾回 0 ⇒ 进入时不跳变。
   ⚠️ 原有 .btn-pill-*:hover{opacity:.92} 保留不动（本需求是「添加」效果，不是替换），两者互不干扰。
   ⚠️ 关键帧名与 index.css 同名，但本页只加载 style.css + seo.css ⇒ 不会覆盖。
   ⚠️ 摆幅 ±3px 与 img 的 margin-left（8px）是一对 ⇒ 摆到最左时文字与徽标之间仍有 ~5px 净空。
   用 (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) {

  .btn-pill-in:hover img,
  .btn-pill-out:hover img {
    animation: geo-cta-arrow-sway 1.2s ease-in-out infinite;
  }
}

.pain-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
  padding: 22px 30px;
  background: #fff;
  border: 1px solid #f3f3f3;
  border-radius: 20px;
  box-shadow: 0 5px 10px rgba(224, 235, 255, .4);
}

.pain-summary img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

/* 「核心症结」左侧图标：常驻「呼吸」缩放（1.00 ↔ 1.12，1.8s 往复）。
   · 只动 transform: scale() ⇒ 不参与布局、不改卡片尺寸，也不会产生横向溢出。
   · ⚠️ 幅值是相对图标自身：44px → 49.28px（≤479 档 34px → 38.08px），放大后仍完整落在卡片内边距以内；不要写 transform-origin。
   · ⚠️ 这是常驻动效（非悬停触发），验收口径是「只动 transform ⇒ 几何零变化」，而不是「默认态逐字节相同」。
   · 门控 prefers-reduced-motion: no-preference。 */
@keyframes seo-pain-icon-pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.12);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .pain-summary img {
    animation: seo-pain-icon-pulse 1.8s ease-in-out infinite;
  }
}

.pain-summary h4 {
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1d2129;
  white-space: nowrap;
}

.pain-summary__line {
  width: 1px;
  height: 26px;
  background: #e4e8f0;
  flex-shrink: 0;
}

.pain-summary p {
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 16px;
  color: #636e80;
  line-height: 1.6;
  position: relative;
  /* 打字机光标的定位基准；不设 top/left ⇒ 零布局影响 */
}

/* 「核心症结」正文：滚入视口时逐字「敲击」显现（打字机）。
   · 原文不动，由 js/seo.js 运行时把每个字符包一层 <span class="tw">；待命位（opacity:0）挂在 html.js 下 ⇒ 无脚本时文字照常可见。
   · ⚠️ 逐字显现只切 span 的 opacity：所有字符从一开始就占好最终位置 ⇒ 段落高度与换行自始至终不变、零重排。
   · 光标 .tw-caret 用绝对定位逐字贴合当前字符 —— 绝不能做成段落的行内 ::after，那会在段尾多占约 5px 行内盒、可能把最后一行挤到下一行。
   · 尊重「减少动态效果」。 */
.pain-summary p .tw-caret {
  position: absolute;
  width: 2px;
  height: 1em;
  border-radius: 1px;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
}

@keyframes tw-caret-blink {

  0%,
  49.99% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .js .pain-summary p .tw {
    opacity: 0;
  }

  .js .pain-summary p .tw.on {
    opacity: 1;
    transition: opacity .12s linear;
  }

  .js .pain-summary p .tw-caret.on {
    opacity: 1;
    animation: tw-caret-blink 1s linear infinite;
  }
}

/* ==================== 四大核心服务优势 ==================== */
.advantage {
  padding: 70px 0 80px;
  background: #f7fbff url('../img/seo/61538760.jpg') 50% 50%/cover no-repeat;
}

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

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

.adv-card {
  border: 1px solid #e4e8f0;
  border-radius: 10px;
  background-position: 50% 100%;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 30px 26px 230px;
}

.adv-card--a {
  background-image: url('../img/seo/61537861.jpg');
}

.adv-card--b {
  background-image: url('../img/seo/61538145.jpg');
}

.adv-card--c {
  background-image: url('../img/seo/61537997.jpg');
}

.adv-card--d {
  background-image: url('../img/seo/61538704.jpg');
}

/* 悬停把背景图放大 —— 与首页 .adv-card 同幅值（1 → 1.08）、同缓动曲线。
   ⚠️ 不能照搬首页做法（把背景搬到 ::after 再 scale）：Chrome 对「元素自身背景」与「后代盒子背景」走两条不同的光栅化路径，
      隔离实验实测静止态就有 27% 像素不同、最大通道差 37/255；给卡补 position:relative + overflow:hidden 本身也会改动光栅化（~79px / 最大 4/255）。
   ⚠️ 也不能把静止态的 cover 换成数学同解的 100% auto：关键字路径与显式尺寸路径不同，卡片水平中轴那一列会出现 ~79 像素、最大 4/255 的差异。
   ⇒ 唯一能保证「静止态逐字节不变」的写法：cover 原样不动，只在悬停时把尺寸重写成同解的 100% auto 并放大到 108% auto；
      背景永远裁在卡片自身 border box 内 ⇒ 不需要 overflow:hidden，也不新增任何盒子。
   ⚠️ 用 @keyframes 而非 transition：cover 不可插值，transition 会退化成「一帧到位」。代价是移开瞬时还原，
      「缩回」的平滑由 js/seo.js 补：进入时先把 background-size 落到 100% auto、再 transition 到 108% auto；离开时过渡回 100% auto、结束后清掉内联值回到 cover。
   ⚠️ 门控：(hover: hover) 兜触屏；prefers-reduced-motion 时整条不生效。 */
@keyframes seo-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: seo-adv-bg-zoom .6s cubic-bezier(.22, .61, .36, 1) forwards;
  }

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

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

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

/* ==================== 双赛道SEO解决方案 ==================== */
.dual {
  padding: 80px 0 100px;
  background: #f5f9ff url('../img/seo/61543391.jpg') 50% 50%/cover no-repeat;
}

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

.dual-block {
  position: relative;
  border-radius: 20px;
  padding: 54px 35px 68px 36px;
  background-position: 50% 50%;
  background-size: cover;
  box-shadow: 0 5px 10px rgba(224, 235, 255, .4);
  border: 1px solid #fff;
}

.dual-block--in {
  background-image: url('../img/seo/61539583.jpg');
}

.dual-block--out {
  background-image: url('../img/seo/61543280.jpg');
  margin-top: 40px;
}

.dual-head {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
}

.dual-icon {
  width: 68px;
  height: 68px;
  object-fit: contain;
}

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

.dual-btn {
  margin-top: 0;
  margin-left: auto;
  height: 52px;
  width: 182px;
  padding: 0 12px;
  font-size: 18px;
}

.dual-checks {
  display: flex;
  gap: 40px;
  margin-top: 15px;
  flex-wrap: wrap;
}

.dual-checks li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 16px;
  color: #636e80;
}

.dual-checks img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex-shrink: 0;
}

.dual-body {
  margin-top: 34px;
}

.dual-items {
  display: grid;
  grid-template-columns: repeat(2, 410px);
  gap: 21px 14px;
}

/* 每个条目为设计稿的白色胶囊卡（背景图 61539576.png 即 410×130 胶囊） */
.dual-item {
  min-height: 130px;
  padding: 25px 21px 16px 50px;
  border-radius: 200px;
  background: url('../img/seo/61539576.png') 50% 50%/cover no-repeat;
}

/* 条目标题：原为 8 张 200×21 的导出图（61539559/…），改由 CSS 文字 + 渐变实现。
   字号 20.5px / 700 是按源图墨迹反解出来的（源图墨迹高 21、9 字宽 186、6 字宽 124，实测 20.5px 三者全中）。
   ⚠️ width:fit-content 是必需的：渐变按元素盒铺，盒子若被撑到 200/容器宽，色带会被稀释、与源图错位。
   ⚠️ display:block 对齐原 img（style.css 里 img{display:block}），line-height 取 21px 与源图盒高一致
      ⇒ 条目标题盒的 y / 高、后续 p 的偏移与改前逐项相同。 */
.dual-item__title {
  display: block;
  width: fit-content;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 20.5px;
  font-weight: 700;
  line-height: 21px;
  white-space: nowrap;
  background-image: linear-gradient(90deg, #005be3 0%, #0c64eb 20%, #1e71f6 40%, #2e81ff 60%, #42a2ff 80%, #51c0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 海外赛道另一套色带（同一几何、左端换成品红）：
   色标由源图逐列最暗像素的「分箱中位数」抽出，6 挡等距色标对实测剖面的中位色差 ≈0.85 / 2.4（蓝 / 紫）。 */
.dual-block--out .dual-item__title {
  background-image: linear-gradient(90deg, #ea10f6 0%, #b32ef9 20%, #645cfc 40%, #3080ff 60%, #32a6ff 80%, #50bfff 100%);
}

/* 兜底：万一浏览器不支持 background-clip:text，退回纯色，别让文字整块消失 */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .dual-item__title {
    color: #005be3;
    -webkit-text-fill-color: currentColor;
  }

  .dual-block--out .dual-item__title {
    color: #7a4bfb;
  }
}

.dual-item p {
  margin-top: 9px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 16px;
  color: #636e80;
  line-height: 1.6;
}

/* 3D 插图按设计稿定位（块内 x919 / y111 / 440×440） */
.dual-pic {
  position: absolute;
  top: 111px;
  right: 41px;
  width: 440px;
}

.dual-pic img {
  width: 100%;
  display: block;
}

/* 双赛道方案：整块滚入视口时自下而上飞入（两个 .dual-block 各自独立触发）。
   · 待命位挂在 html.js 下 ⇒ 无 JS 时两块照常可见；只动 opacity / translateY ⇒ 位置、尺寸、文档高一律不变。
   · 尊重「减少动态效果」；两块各滚进视口才飞入，不做错开延迟。
   · seo.html 的 <head> 另有 3 秒兜底：脚本没初始化成功就摘掉 js 标记，杜绝内容永久隐身。 */
@media (prefers-reduced-motion: no-preference) {
  .js .dual-block {
    opacity: 0;
    transform: translateY(40px);
  }

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

/* ==================== 实战优化案例 ==================== */
.cases {
  padding: 70px 0 80px;
  background: #fff url('../img/seo/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/seo/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;
}

.case-btn {
  margin-top: 0;
  height: 48px;
  font-size: 18px;
}

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

.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/seo/61500700.png') right 18px top 12px/auto 44% no-repeat;
  border: 2px solid #eee;
}

.case-col--after {
  background: #e7efff url('../img/seo/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: 16px;
  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 与动画时长由 seo.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 组的份数（seo.js 按窗口宽度写入） */
  --logo-dur: 40s;
  /* 移动一份所需时间（seo.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);
}


/* ==================== 专业SEO诊断检测 ==================== */
/* 诊断检测：设计稿为「一条波线 + 7 张 200×220 白卡交错分布 + 波线上圆点」 */
.diagnose {
  position: relative;
  overflow: hidden;
  padding: 80px 0 190px;
  background: #f7faff;
}

.diagnose .sec-title {
  margin-bottom: 130px;
}

/* 卡片按设计稿的 1440 画布对齐（首尾卡会溢出容器边缘，由区块 overflow:hidden 裁掉） */
.diag {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 1440px;
  height: 510px;
}

.diag-line {
  position: absolute;
  left: 20px;
  top: 200px;
  width: 1400px;
  height: 105px;
  pointer-events: none;
}

.diag-list {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.diag-item {
  position: absolute;
  top: 0;
  width: 200px;
  height: 220px;
  padding: 26px 20px 0;
  text-align: center;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(198, 224, 255, .3);
}

/* 波线上的圆点：上排卡片的点落在下方波谷，下排卡片的点落在上方波峰 */
/* 圆点：16×16 蓝芯 + 5px 白色外圈 = 26×26（与设计稿实测一致） */
.diag-item::after {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #08a2ff;
  box-shadow: 0 0 0 5px #fff;
}

.diag-item:nth-child(1) {
  left: -10px;
}

.diag-item:nth-child(1)::after {
  top: 295px;
}

.diag-item:nth-child(2) {
  left: 196px;
  top: 290px;
}

.diag-item:nth-child(2)::after {
  top: -95px;
}

.diag-item:nth-child(3) {
  left: 412px;
}

.diag-item:nth-child(3)::after {
  top: 295px;
}

.diag-item:nth-child(4) {
  left: 832px;
}

.diag-item:nth-child(4)::after {
  top: 295px;
}

.diag-item:nth-child(5) {
  left: 1247px;
}

.diag-item:nth-child(5)::after {
  top: 295px;
}

.diag-item:nth-child(6) {
  left: 619px;
  top: 290px;
}

.diag-item:nth-child(6)::after {
  top: -95px;
}

.diag-item:nth-child(7) {
  left: 1040px;
  top: 290px;
}

.diag-item:nth-child(7)::after {
  top: -95px;
}

.diag-item img {
  display: block;
  width: 61px;
  height: 61px;
  object-fit: contain;
  margin: 0 auto 9px;
}

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

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

/* ==================== 六步闭环服务 ==================== */
.service {
  padding: 80px 0 96px;
  background: #fff;
}

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

/* 设计稿：6 张 233×260 卡片无缝相接（6×233≈1400），卡间夹 24×24 箭头 */
.step-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
}

.step-card {
  position: relative;
  min-height: 260px;
  text-align: center;
}

.step-card>img {
  display: block;
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin: 0 auto;
}

.step-card h4 {
  height: 34px;
  margin-top: 15px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #1d2129;
  line-height: 25px;
}

.step-card p {
  width: 200px;
  margin: 6px auto 0;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 16px;
  color: #636e80;
  line-height: 1.5625;
}

/* 步骤之间：一条 2px #eef5ff 横线贯通（设计稿位于图标圆心高度），
   线从本卡图标右缘一直画到下一张卡的图标左缘；箭头为不透明白底素材，
   叠在线上自然把线断开——与设计稿一致 */
.step-card:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(50% + 50px);
  right: calc(50px - 50%);
  top: 51px;
  height: 2px;
  background: #eef5ff;
  pointer-events: none;
}

/* 步骤之间的箭头：设计稿 24×24，跨在两卡交界处（卡内 x220..244 / y40） */
.step-card:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -11px;
  top: 40px;
  width: 24px;
  height: 24px;
  pointer-events: none;
  background: url('../img/seo/61546098.jpg') 50% 50%/contain no-repeat;
}

.faq-title {
  margin-top: 63px;
  padding-top: 9px;
}

.faq-list {
  margin-top: 67px;
  gap: 20px;
}

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

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  padding: 32px 27px 32px 82px;
  line-height: 1.4;
  font-size: 24px;
}

/* 问题前的蓝色圆点（设计稿 10×10 #317af7，left 48） */
.faq-q::before {
  content: "";
  position: absolute;
  left: 48px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 200px;
  background: #317af7;
}

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

.faq-a p {
  padding: 0 82px 26px;
  font-size: 18px;
  line-height: 1.5625;
}

/* 展开时答案上移，使问答间距与设计稿一致（条目 100 → 160）。
   注意：≤1399 覆盖为 -18px、≤1199 覆盖为 -14px ⇒ JS 不写死该值，改用探针读计算值 */
.faq-item.open .faq-a {
  margin-top: -22px;
}

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

  .pain-card {
    padding: 34px 30px 32px;
  }

  .pain-card h3 {
    font-size: 27px;
  }

  .pain-tag {
    margin-left: -15px;
    padding: 0 15px;
  }

  .pain-list {
    gap: 20px 18px;
  }

  .pain-list h4 {
    font-size: 18px;
  }

  .pain-list p {
    font-size: 15px;
  }

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

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

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

  .dual-block {
    padding: 34px 32px 36px;
  }

  .dual-head h3 {
    font-size: 28px;
  }

  .dual-icon {
    width: 56px;
    height: 56px;
  }

  .dual-head {
    min-height: 56px;
  }

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

  .dual-pic {
    position: static;
    width: 340px;
    max-width: 100%;
    margin: 26px auto 0;
  }

  /* 诊断区：窄屏回归常规网格，取消绝对定位、波线与圆点 */
  .diagnose {
    padding: 70px 0 80px;
  }

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

  .diag {
    position: static;
    left: auto;
    transform: none;
    width: auto;
    height: auto;
  }

  .diag-line {
    display: none;
  }

  .diag-list {
    position: static;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  .diag-item,
  .diag-item:nth-child(n) {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    min-height: 220px;
    padding: 26px 18px;
  }

  .diag-item::after {
    display: none;
  }

  .diag-item img {
    width: 56px;
    height: 56px;
  }

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

  .diag-item p {
    font-size: 14px;
  }

  .step-list {
    gap: 0;
  }

  .step-card {
    min-height: 0;
  }

  .step-card>img {
    width: 78px;
    height: 78px;
  }

  .step-card h4 {
    height: auto;
    font-size: 20px;
    line-height: 1.4;
    margin-top: 12px;
  }

  .step-card p {
    width: auto;
    padding: 0 6px;
    font-size: 14px;
    line-height: 1.6;
  }

  /* 卡片变窄后取消设计稿的硬换行，交给浏览器折行 */
  .step-card p br {
    display: none;
  }

  .step-card:not(:last-child)::before {
    left: calc(50% + 39px);
    right: calc(39px - 50%);
    top: 39px;
  }

  .step-card:not(:last-child)::after {
    right: -9px;
    top: 30px;
    width: 20px;
    height: 20px;
  }

  .faq-title {
    font-size: 32px;
    margin-top: 52px;
    padding-top: 8px;
  }

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

  .faq-q {
    font-size: 21px;
    padding: 26px 22px 26px 64px;
  }

  .faq-q::before {
    left: 36px;
  }

  .faq-a p {
    font-size: 17px;
    padding: 0 64px 22px;
  }

  .faq-item.open .faq-a {
    margin-top: -18px;
  }
}

@media (max-width: 1199px) {
  .pain-cards {
    gap: 16px;
  }

  .pain-card {
    padding: 28px 24px 26px;
  }

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

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

  .pain-summary {
    padding: 18px 22px;
  }

  .pain-summary h4 {
    font-size: 19px;
  }

  .pain-summary p {
    font-size: 15px;
  }

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

  .dual-items {
    gap: 18px;
  }

  .dual-pic {
    width: 300px;
  }

  .case-col::after {
    font-size: 48px;
  }

}

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

  .pain-cards {
    flex-direction: column;
  }

  .pain-tag {
    width: max-content;
  }

  .pain-summary {
    flex-wrap: wrap;
  }

  .pain-summary p {
    flex: 1 1 100%;
  }

  .dual-items {
    grid-template-columns: 1fr;
  }

  .dual-pic {
    width: 280px;
    margin: 20px auto 0;
  }

  .dual-head {
    flex-wrap: wrap;
  }

  .dual-btn {
    margin-left: 0;
  }

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

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

  .step-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .step-card:not(:last-child)::before,
  .step-card:not(:last-child)::after {
    display: none;
  }

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

  .diag-item,
  .diag-item:nth-child(n) {
    min-height: 0;
    padding: 24px 18px;
  }

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

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

@media (max-width: 767px) {

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

  .pain-card {
    padding: 24px 18px;
  }

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

  .pain-badge {
    width: 86px;
    height: 31px;
    border-radius: 0 16px 0 15px;
    font-size: 12px;
  }

  .pain-tag {
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 34px;
    line-height: 1.4;
    font-size: 15px;
    padding: 8px 10px;
    margin: 0;
    margin-left: -10px;
  }

  .pain-list {
    margin-top: 18px;
    gap: 14px;
  }

  .pain-list h4 {
    font-size: 16px;
  }

  .pain-list p {
    font-size: 13px;
    margin-top: 6px;
  }

  .btn-pill-in,
  .btn-pill-out {
    margin-top: 24px;
    height: 44px;
    font-size: 16px;
  }

  /* 摘要卡：窄屏第一行只剩「图标 + 核心症结」，原竖向分隔线没有分隔对象 →
     改画成标题右侧的渐隐延伸线，填满头部行；正文独占一行，靠间距与头部拉开层次 */
  .pain-summary {
    align-items: center;
    gap: 10px 12px;
    padding: 16px 18px 18px;
  }

  .pain-summary__line {
    flex: 1 1 0;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, #e2e9f5, rgba(226, 233, 245, 0));
  }

  .pain-summary img {
    width: 34px;
    height: 34px;
  }

  .pain-summary h4 {
    font-size: 17px;
  }

  .pain-summary p {
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.7;
  }

  .advantage {
    /* padding: 34px 0 44px; */
    padding: 0px 0 44px;
  }

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

  .adv-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* 手机端单列：插画 cover 铺满卡片会压住正文 → 上半部叠一层白色渐变遮罩隔出文字区，
     下半部渐隐露出完整插画；文字提到遮罩之上。4 张卡内文行数不同，给 p 兜底行高使卡片等高 */
  .adv-card {
    position: relative;
    overflow: hidden;
    padding: 22px 18px 160px;
    box-shadow: 0 6px 16px rgba(31, 74, 163, .07);
  }

  /* .adv-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #fff 0%, #fff 45%, rgba(255, 255, 255, .9) 58%, rgba(255, 255, 255, 0) 78%);
  } */

  .adv-card h4,
  .adv-card p {
    position: relative;
    z-index: 1;
  }

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

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

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

  /* 手机端标题块与下方内容：桌面档 70px 是唯一定义，窄屏从未覆盖 → 标题像被孤立悬空。
     收到 28px 与页内其余区块（.advantage 26 / .diagnose 32）同量级；副标题同步收紧，使
     h2 + 副标题读成一个整体 */
  .dual .sec-title {
    margin-bottom: 28px;
  }

  .dual .sec-title p {
    margin-top: 10px;
  }

  .dual-block {
    padding: 24px 18px 26px;
  }

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

  .dual-icon {
    width: 30px;
    height: 30px;
  }

  .dual-btn {
    height: 42px;
    font-size: 15px;
  }

  .dual-checks {
    gap: 12px;
    margin-top: 14px;
  }

  .dual-checks li {
    font-size: 13px;
  }

  .dual-checks img {
    width: 18px;
    height: 18px;
  }

  .dual-items {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dual-item p {
    font-size: 13px;
  }

  .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: 19px;
  }

  .case-btn {
    height: 42px;
    font-size: 15px;
  }

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

  .case-col {
    padding: 20px 18px;
  }

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

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

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

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

  .diagnose .sec-title {
    margin-bottom: 32px;
  }

  .diag-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 12px;
  }

  .diag-item,
  .diag-item:nth-child(n) {
    padding: 20px 14px;
  }

  .diag-item img {
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
  }

  .diag-item h4 {
    font-size: 17px;
  }

  .diag-item p {
    font-size: 13px;
  }

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

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

  .step-card>img {
    width: 54px;
    height: 54px;
  }

  .step-card h4 {
    font-size: 16px;
    margin-top: 10px;
  }

  .step-card p {
    width: auto;
    padding: 0;
    font-size: 12px;
    margin-top: 6px;
    line-height: 1.6;
  }

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

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

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

  .faq-q::before {
    left: 22px;
    width: 8px;
    height: 8px;
  }

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

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

  .faq-item.open .faq-a {
    margin-top: -14px;
  }
}

@media (max-width: 479px) {
  .adv-card {
    padding: 22px 18px 250px;
    ;
  }

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

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

  .dual-btn {
    width: 100%;
    justify-content: center;
  }

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

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

  .step-card {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
  }

  .step-card>img {
    width: 46px;
    height: 46px;
    margin: 0;
    flex-shrink: 0;
  }

  .step-card h4 {
    margin-top: 0;
  }

  .step-card p {
    width: auto;
    padding: 0;
    font-size: 14px;
  }

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

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

  .dual-checks li {
    font-size: 16px;
  }

  .dual-item p {
    font-size: 14px;
  }

  .dual-icon {
    width: 42px;
    height: 42px;
  }

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

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

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

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

/* diag-center-narrow */
/* —— 「专业SEO诊断检测」7 张卡在 ≤1399 变 4 列后：第二行只剩 3 张且紧贴左边，右侧空出「一整列 + 一个列距」⇒ 缺一角的观感。
   修法：4 列改成 8 列、每张卡 span 2 ——
     ① 首行 4 张仍占满 1–8 列，卡宽 = (W−3g)/4，与 repeat(4,1fr) 完全相等 ⇒ 首行逐像素不变；
     ② 第二行 3 张从第 2 列起排，左右各留「1 列 + 1 列距」⇒ 整行横向居中。
   ⚠️ 必须限定 min-width: 992px：≤991 是 repeat(2,1fr)，此时 span 2 会让每张卡横跨整行。
   ⚠️ 只改列轨道，不动 gap / 行高 / min-height ⇒ docH 不变、下游零位移。 */
@media (min-width: 992px) and (max-width: 1399px) {
  .diag-list {
    grid-template-columns: repeat(8, 1fr);
  }

  .diag-item,
  .diag-item:nth-child(n) {
    grid-column: span 2;
  }

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

/* diag-lastrow-center */
/* —— 接上一段：768~991 / 480~767 两档的 .diag-list 是 repeat(2,1fr)，7 张卡排 4 行 ⇒ 末行只有 1 张孤卡、紧贴左边，右侧空出「一整列 + 一个列距」。
   修法与上一段同源（列轨道翻倍）：2 列 → 4 列、每张卡 span 2，再给 :nth-child(7) 一个列起点 2 ⇒ 它占第 2–3 轨，左右余量恒等。
   ⚠️ 卡宽 = (W−g)/2，与 repeat(2,1fr) 完全相等 ⇒ 前三行逐像素不变，只有第 7 张横移 (W+g)/4。
   ⚠️ 必须限定 min-width: 480px：≤479 已回落单列，span 2 会让每张卡横跨整行，:nth-child(7) 的 grid-column:2 更会横向溢出。
   ⚠️ 只改列轨道 ⇒ 行高与行距均不变、docH 不变。 */
@media (min-width: 480px) and (max-width: 991px) {
  .diag-list {
    grid-template-columns: repeat(4, 1fr);
  }

  .diag-item,
  .diag-item:nth-child(n) {
    grid-column: span 2;
  }

  .diag-item:nth-child(7) {
    grid-column: 2 / span 2;
  }
}

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

/* diag-carousel */
/* —— 「专业SEO诊断检测」≤767 改「一屏两张 + 自动左滑」的横向轮播。
   结构零改动：由 js/seo.js 给 .diag-list 加 .diag-list--carousel（转 flex 横向轨道，
   每张卡占「(轨道宽 − 列距) / 2」），并在轨道末尾克隆前两张；滑到克隆位时那画面与
   起点逐像素一致，于是可无声跳回 0 ⇒ 无缝循环。
   ⚠️ 全部规则都以 .diag-list--carousel 为前缀 ⇒ **无 JS / 不支持 matchMedia /
      prefers-reduced-motion: reduce 时不命中**，自动回落成原来的 2 列静态网格
      （7 张卡全在，信息一点不少 —— 这是刻意的降级，不是隐藏）。
   ⚠️ 滑动用原生横向滚动（overflow-x:auto + scrollTo({behavior:'smooth'})），
      不用 transform：transform 会把整条轨道提升为合成层，Chrome 随之改用
      灰度抗锯齿渲染该子树，17px 中文标题会变糊（§110 的 sticky 踩过同一个坑）。
   ⚠️ 滚动容器的裁剪边定在 padding 边 ⇒ 轨道必须留 30px padding-bottom，否则卡片自带的
      `0 10px 20px` 下投影会被齐根裁掉、卡片看着「贴」在区块底上。
      这 30px 会顶高区块，故用 :has() 在**轮播启用时**把 .diagnose 的 padding-bottom 减掉等量：
      没轮播（无 JS / reduce）时 :has() 不命中，padding 原样 52px，与改前一致。
      ⚠️ 别指望负 margin：父元素 height:auto 不会因末位子元素的负 margin-bottom 而变矮
      （CSS 2.1 §10.6.3），实测 .diag 仍是 175 = 145 + 30，docH 分毫不动。 */
@media (max-width: 767px) {
  .diagnose:has(.diag-list--carousel) {
    padding-bottom: 22px;
  }

  .diag-list--carousel {
    --dg-gap: 12px;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--dg-gap);
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 30px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

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

  .diag-list--carousel>.diag-item,
  .diag-list--carousel>.diag-item:nth-child(n) {
    flex: 0 0 calc((100% - var(--dg-gap)) / 2);
    width: auto;
    min-width: 0;
  }

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

.diag-item--clone {
  display: none;
}

/* ≤479：一屏两张后单卡只剩「(视口 − 32 − 12) / 2」，320px 时内容宽仅 118px ——
   原样沿用 17px 标题会断成「全站技术诊断修 / 复」。故按窄屏阶梯同步收紧。 */
@media (max-width: 479px) {
  .diag-list--carousel>.diag-item,
  .diag-list--carousel>.diag-item:nth-child(n) {
    padding: 16px 10px;
  }

  .diag-list--carousel>.diag-item img {
    width: 44px;
    height: 44px;
    margin-bottom: 6px;
  }

  .diag-list--carousel>.diag-item h4 {
    font-size: 15px;
  }

  .diag-list--carousel>.diag-item p {
    font-size: 12px;
  }
}