/* 首页专用样式 - index.css */
/* 顶部导航 header / CTA / 页脚 footer 为全站公共样式，统一放在 style.css */

/* ========== 首屏 Banner ==========
   高度 = 视口高 − 页头高 ⇒ 任何窗口尺寸下都恰好撑满一屏；各断点页头高统一抽成 --hdr 变量，改页头只需改那一行。
   ≥1400 内容沿用设计稿的绝对定位（文字 top:459 / 按钮 top:699）；视口过矮、按原值会溢出首屏时，
   用 clamp 把内容整体上移兜住（内容块 = 文字顶 459 → 按钮底 747 共 288px，底部再留 20px 余量）。 */
:root {
  --hdr: 80px;
}

.banner {
  height: calc(100vh - var(--hdr));
  height: calc(100dvh - var(--hdr));
  /* 移动端动态视口，避免地址栏导致多出一点滚动 */
  background: #fff url('../img/index/61274842.jpg') 50% 50%/cover no-repeat;
  position: relative;
}

.banner-inner {
  position: relative;
  height: 100%;
}

.banner-text {
  position: absolute;
  left: 0;
  width: 926px;
  top: clamp(0px, calc(100vh - var(--hdr) - 308px), 250px);
}

.banner-text h1 {
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 62px;
  font-weight: 700;
  color: #1d2129;
  line-height: 1.75;
}

.banner-text p {
  margin-top: 10px;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 32px;
  color: #1d2129;
  line-height: 1.75;
}

.banner-btns {
  position: absolute;
  left: 0;
  top: clamp(0px, calc(100vh - var(--hdr) - 68px), 490px);
  display: flex;
  gap: 25px;
}

/* ========== 通用区块标题 ========== */
.services {
  padding-top: 80px;
  padding-bottom: 96px;
}

/* ========== 服务图标胶囊 ========== */
.service-tabs {
  display: flex;
  justify-content: space-between;
  max-width: 1080px;
  margin: 26px auto 0;
}

/* 药丸内「图标 + 文字」作为整体相对居中（用户 2026-09-21 指定，不追设计稿的偏左落点） */
.service-tab {
  width: 200px;
  height: 64px;
  border-radius: 200px;
  background: #f5f8fd;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #1d2129;
  font-size: 24px;
  font-weight: 700;
  font-family: Tahoma, Geneva, sans-serif;
  transition: transform .25s, box-shadow .25s;
}

.service-tab:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(49, 122, 247, .35);
}

.service-tab--active {
  background: #317af7 url('../img/index/61238301.jpg') center/cover no-repeat;
  color: #fff;
}

/* 原设计里这些胶囊只负责跳转、从未出现过选中态，故没有对应的视觉稿。
   其余 4 个（SEO / SEM / 口碑营销 / 新媒体）都是蓝色系，落蓝色激活底上几乎看不见 ⇒ 统一「去色 + 提亮」，保留图标自身层次。
   其中 GEO 是浅金色奖章、落蓝底本就正常，所以不能写成无差别的通用规则。 */
.service-tab:not([data-tab="geo"]).service-tab--active img {
  filter: saturate(0) brightness(1.9);
}

.service-tab img {
  width: 42px;
  height: 42px;
  margin-right: 12px;
}

/* 口碑营销 / 新媒体：4 字文案较长，图标-文字间距按原站收窄到 9 */
.service-tab--cjk img {
  margin-right: 9px;
}

/* ========== 服务卡片区（按胶囊切换面板） ========== */
.geo-cards {
  margin: 60px auto 0;
}

/* 每个服务一条面板，只有 is-active 的参与布局（display:none 不影响 flex 计算） */
.geo-panel {
  display: none;
  gap: 20px;
}

.geo-panel.is-active {
  display: flex;
}

.geo-card {
  flex: 1;
  height: 500px;
  border-radius: 20px;
  border: 1px solid #c6e0ff;
  background: #fff url('../img/index/61528826.jpg') 50% 100%/cover no-repeat;
  padding: 61px 48px 48px;
  position: relative;
  overflow: hidden;
}

/* 每个面板的第二张卡统一样式（紫主题）。类名沿用历史命名 --overseas，现已泛化为「第二张卡」，SEM / 口碑营销 / 新媒体面板同样复用。
   边框同为紫调 #dfdbff，只覆盖颜色，宽度与样式沿用 .geo-card 的 1px solid。 */
.geo-card--overseas {
  background-image: url('../img/index/61530057.jpg');
  border-color: #dfdbff;
}

.geo-card h3 {
  font-family: "Source Han Sans", sans-serif;
  font-size: 32px;
  color: #1d2129;
  font-weight: 700;
  line-height: 1.4;
}

/* 角标：原来用 PNG 位图（212×76 @2x），改为纯 CSS 实现。
   形状按原图像素轮廓拟合：左上/右下为直角，右上圆角 20px、左下圆角 18px；
   渐变、文字均在原图上实测取值，故视觉效果与位图版一致。 */
.geo-card .geo-badge {
  position: absolute;
  right: -2px;
  top: -2px;
  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;
}

.geo-card--overseas .geo-badge {
  background: linear-gradient(90deg, #aea5f7, #b289ef);
}

/* tag 的左右内边距会把文字整体顶开，使其与上方标题、下方描述的左边缘错位。
   用「等量负 margin-left」抵消：胶囊内文字左缘重新与卡片内容左缘对齐，胶囊自身的圆角 / 渐变底 / 尺寸 / 字号一律不变。
   内边距统一由 --tag-pad 驱动，各断点只改一个变量，避免 padding 与 margin 两处不同步。 */
.geo-card {
  --tag-pad: 20px;
}

.geo-card .tag {
  display: inline-block;
  height: 42px;
  line-height: 42px;
  padding: 0 var(--tag-pad, 20px);
  margin: 20px 0 0 calc(var(--tag-pad, 20px) * -1);
  border-radius: 10px;
  background: transparent url('../img/index/61528990.jpg') 50% 50%/cover no-repeat;
  color: #317af7;
  font-size: 18px;
  font-family: "Source Han Sans", sans-serif;
}

.geo-card .desc {
  margin-top: 24px;
  font-size: 18px;
  color: #636e80;
  line-height: 2;
  font-family: "Source Han Sans", sans-serif;
}

.geo-card .features {
  margin: 36px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 0;
}

.geo-card .features li {
  display: flex;
  align-items: center;
  font-size: 22px;
  color: #317af7;
  font-family: "Source Han Sans", sans-serif;
}

.geo-card .features li::before {
  content: "";
  width: 32px;
  height: 32px;
  margin-right: 12px;
  flex-shrink: 0;
  background: url('../img/index/55162480.png') center/contain no-repeat;
}

.geo-card .geo-cta {
  margin-top: 36px;
  width: 182px;
  height: 52px;
  border-radius: 200px;
  font-size: 18px;
}

.geo-card .geo-cta::after {
  /* margin-left 12px：箭头摆到最左（translateX −3px）时，与「立即咨询」文字的视觉间隙仍有 ~9px（原值 8px 时最左只剩 6px，太贴字）。
   .btn 是 inline-flex + justify-content:center、.geo-cta 又是定宽，所以调这个值不会改变按钮外框，只是把整组内容在定宽盒里重新居中。 */
  content: "";
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-left: 12px;
  background: url('../img/index/61279000.png') center/contain no-repeat;
  transition: transform .25s ease;
}

/* 海外 GEO：tag 与按钮为紫色主题 */
.geo-card--overseas .tag {
  background-image: url('../img/index/61530185.jpg');
  color: #8078c4;
}

.geo-card--overseas .geo-cta {
  background-image: url('../img/index/61530531.jpg');
}

.geo-card--overseas .features li::before {
  background-image: url('../img/index/61810736.png');
}

.geo-card--overseas .geo-cta::after {
  background-image: url('../img/index/61530677.png');
}

.geo-card--overseas .features li {
  color: #8078c4;
}


/* 「立即咨询」悬停：箭头图标持续左右小幅往复摆动。
   只用 translateX，不参与布局 ⇒ 零位移、零溢出；关键帧首尾回 0 ⇒ 进入时不跳变。
   ⚠️ 摆幅 ±3px 与 ::after 的 margin-left 是一对：最左位的净间隙 = margin-left − 3px，改任一都要重新确认（见上方注释）。
   用 (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) {
  .geo-card .geo-cta:hover::after {
    animation: geo-cta-arrow-sway 1.2s ease-in-out infinite;
  }
}

/* ========== 核心优势区块 ========== */
.advantages {
  height: 802px;
  background: transparent url('../img/index/61250980.jpg') 50% 100%/100% 100% no-repeat;
  padding-top: 80px;
}

.advantages .sec-title {
  margin-bottom: 90px;
}

.adv-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.adv-card {
  width: 453px;
  height: 200px;
  border-radius: 20px;
  padding: 54px 48px 0;
  position: relative;
  overflow: hidden;
  /* 承载放大的背景图，并按 20px 圆角裁切 */
}

.adv-card--wide {
  width: 690px;
}

/* 背景图改由 ::before 承载 —— 悬停「放大」只需给它 transform: scale()。
   ⚠️ 不能直接过渡 .adv-card 上的 background-size：cover 是关键字、不可插值，浏览器会退化成离散跳变。
   ⚠️ inset:0 的包含块是卡片 padding box，而卡片无边框 ⇒ 伪元素盒子与原先「背景直接画在卡片上」的尺寸、cover 裁切完全一致。
   ⚠️ 不加 will-change：会提前提合成层、产生抗锯齿相位差。 */
.adv-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  /* 缩放的固定点是卡片右下角（默认是中心）：底图以右下角为锚点向左上扩张。
   identity 变换与原点无关 ⇒ 对未悬停的 scale(1) 无任何作用；过渡曲线 / 时长 / 倍率一律不动。 */
  transform-origin: 100% 100%;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

/* ::before 是定位元素、会盖在普通流文字之上 ⇒ 把文字抬一层压回去 */
.adv-card h4,
.adv-card p {
  position: relative;
  z-index: 1;
}

.adv-card h4 {
  font-size: 26px;
  color: #1d2129;
  font-weight: 400;
  margin-bottom: 13px;
  font-family: "Source Han Sans", sans-serif;
  line-height: 1.4;
}

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

.adv-card--bg1::before {
  background-image: url('../img/index/61278112.jpg');
}

.adv-card--bg2::before {
  background-image: url('../img/index/61278341.jpg');
}

.adv-card--bg3::before {
  background-image: url('../img/index/61278385.jpg');
}

.adv-card--bg4::before {
  background-image: url('../img/index/61278913.jpg');
}

.adv-card--bg5::before {
  background-image: url('../img/index/61278972.jpg');
}

/* 悬停放/缩回：1 → 1.08，0.6s 与卡片飞入同一根缓动曲线。
   · (hover: hover) 兜住触屏：避免点一下之后背景一直卡在放大态。
   · prefers-reduced-motion 时整条不生效 ⇒ 系统要求减少动效的用户悬停也不缩放。 */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .adv-card:hover::before {
    transform: scale(1.08);
  }
}

.adv-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 36px 0 10px;
  gap: 40px;
}

.adv-divider .line {
  flex: 1;
  height: 1px;
  background: #c6e0ff;
}

.adv-divider .consult {
  width: 200px;
  height: 58px;
  border-radius: 200px;
  background: #317af7 url('../img/index/61238301.jpg') center/cover no-repeat;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  font-family: Tahoma, Geneva, sans-serif;
  gap: 8px;
  cursor: pointer;
  transition: transform .2s;
}

.adv-divider .consult:hover {
  transform: translateY(-2px);
}

.adv-divider .consult img {
  width: 24px;
  height: 24px;
}

/* 核心优势卡片：滚入视口时自下而上飞入，同一行的卡片依次错开。
   · 待命位挂在 html.js 下 ⇒ 无 JS 时整段不生效；只动 opacity / translateY ⇒ 不参与布局，元素位置与尺寸不受影响。
   · 尊重「减少动态效果」；错开延迟 = 行内 0/.1/.2s + 第二行整体 +.3s。 */
@media (prefers-reduced-motion: no-preference) {
  .js .adv-card {
    opacity: 0;
    transform: translateY(40px);
  }

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

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

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

  .js .adv-row+.adv-row.is-in .adv-card {
    transition-delay: .3s;
  }

  .js .adv-row+.adv-row.is-in .adv-card:nth-child(2) {
    transition-delay: .4s;
  }
}

/* ========== 数据展示区块 ========== */
.stats {
  height: 460px;
  background: #fff url('../img/index/61779750.jpg') 50% 50%/cover no-repeat;
  position: relative;
}

.stats-inner {
  position: relative;
  height: 100%;
}

.stats-title {
  position: absolute;
  left: 32px;
  top: 98px;
}

.stats-title h2 {
  font-size: 28px;
  font-weight: 700;
  color: #1d2129;
  line-height: 1.3;
  font-family: "Source Han Sans", sans-serif;
}

.stats-title p {
  margin-top: 10px;
  font-size: 18px;
  color: #636e80;
  line-height: 1.4;
  font-family: "Source Han Sans", sans-serif;
}

.stats-years {
  position: absolute;
  left: 28px;
  top: 200px;
  width: 221px;
  height: 192px;
}

.stats-years>img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* YEAR 与「十余年行业沉淀」按设计稿坐标定位：YEAR top 210 / 沉淀 top 337（相对 10 年图 200） */
.stats-years .year {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  white-space: nowrap;
}

.stats-years .year b {
  position: absolute;
  left: 252px;
  top: 10px;
  font-size: 18px;
  font-weight: 700;
  color: #50c0fb;
  line-height: 1;
  font-family: "Source Han Sans", sans-serif;
}

.stats-years .year span {
  position: absolute;
  left: 252px;
  top: 137px;
  font-size: 26px;
  color: #1d2129;
  line-height: 1.3;
  font-family: "Source Han Sans", sans-serif;
}

/* 数字 2x2 网格 */
.stats-grid {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.sg {
  position: absolute;
}

.sg-1 {
  left: 760px;
  top: 88px;
}

/* 12 软件著作权 */
.sg-2 {
  left: 1042px;
  top: 88px;
}

/* 1000+ 合作企业 */
.sg-3 {
  left: 760px;
  top: 290px;
}

/* 98% 客户满意率 */
.sg-4 {
  left: 1090px;
  top: 290px;
}

/* 180+ 知名品牌客户 */
.sg .num-wrap {
  position: relative;
  display: inline-block;
  font-family: "Source Han Sans", sans-serif;
  line-height: 1;
}

.sg .num {
  font-size: 78px;
  font-weight: 700;
  color: #317af7;
  line-height: .95;
  font-family: "Source Han Sans", sans-serif;
  white-space: nowrap;
}

.sg .suffix {
  font-style: normal;
  font-size: 22px;
  font-weight: 700;
  color: #317af7;
  line-height: 1;
  margin-left: -4px;
  vertical-align: top;
}

.sg .lbl {
  position: absolute;
  left: 100%;
  top: 0;
  padding-top: 56px;
  margin-left: 0;
  font-size: 18px;
  color: #636e80;
  line-height: 1.3;
  white-space: nowrap;
  font-family: "Source Han Sans", sans-serif;
}

/* ========== SEM 行业方案区块 ========== */
.solutions {
  height: 1280px;
  background: transparent url('../img/index/61252337.png') 50% 50%/cover no-repeat;
  position: relative;
  color: #1d2129;
}

.solutions .sec-title {
  position: absolute;
  left: 0;
  top: 80px;
  width: 100%;
}

.solutions .sec-title h2 {
  color: #1d2129;
}

.solutions-tabs {
  position: absolute;
  left: 0;
  top: 210px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.solutions-tab {
  height: 38px;
  padding: 0 30px;
  border-radius: 200px;
  background: #f5f8fd;
  color: #000;
  font-size: 18px;
  font-weight: 400;
  font-family: Tahoma, sans-serif;
  transition: background .2s, color .2s;
}

.solutions-tab:hover {
  background: #e8edf5;
}

.solutions-tab.active {
  background: #1d2129;
  color: #fff;
  font-weight: 400;
}

/* 每个 Tab 对应一张卡片（= 旧 .solution-card），靠 is-active 切换显隐。
   底图走 CSS 变量而不是写在 [data-panel=x] 里直接改 background-image：属性选择器特异性更高，会在 ≤991 档把 background-image:none 压掉。 */
.solution-card {
  --sol-bg: url('../img/index/al01.jpg');
  /* 生产制造 */
  position: absolute;
  left: 0;
  top: 310px;
  width: 100%;
  height: 460px;
  border-radius: 20px;
  background: #fff var(--sol-bg) 50% 50%/cover no-repeat;
  box-shadow: 0 5px 10px rgba(226, 234, 246, .86);
  padding: 36px 48px;
  display: none;
}

.solution-card.is-active {
  display: block;
}

.solution-card[data-panel="equip"] {
  --sol-bg: url('../img/index/al02.jpg');
}

/* 电子设备 */
.solution-card[data-panel="finance"] {
  --sol-bg: url('../img/index/al03.jpg');
}

/* 金融服务 */
.solution-card[data-panel="tools"] {
  --sol-bg: url('../img/index/al04.jpg');
}

/* 工具服务 */
.solution-card[data-panel="other"] {
  --sol-bg: url('../img/index/al05.jpg');
}

/* 其他行业 */
.solution-tags {
  display: flex;
  gap: 20px;
  margin-top: 14px;
  margin-bottom: 22px;
}

.solution-tag {
  width: 150px;
  height: 38px;
  border-radius: 200px;
  background: #f1faff;
  color: #1d2129;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  gap: 8px;
  font-family: Tahoma, sans-serif;
}

.solution-tag img {
  width: 20px;
  height: 20px;
}

.solution-title {
  font-size: 26px;
  color: #1d2129;
  font-weight: 400;
  line-height: 1.4;
  font-family: "Source Han Sans", sans-serif;
}

.solution-block {
  margin-top: 22px;
}

.solution-block h4 {
  font-size: 22px;
  color: #1d2129;
  font-weight: 400;
  line-height: 1.4;
  font-family: "Source Han Sans", sans-serif;
}

.solution-block p {
  margin-top: 10px;
  max-width: 753px;
  font-size: 16px;
  color: #636e80;
  line-height: 1.5;
  font-family: "Source Han Sans", sans-serif;
}

/* 两个按钮等宽：宽度统一由 --sol-btn-w 给，min() 再兜底「不超过半行」。
   ⚠️ 不能让文本撑出宽度，也不能写死：320px 档卡片内容宽只有 248px，固定宽度会直接把卡片撑破。
   ⚠️ --sol-gap 必须与 gap 同步覆盖，≤767 档有自己的一套值。 */
.solution-btns {
  --sol-btn-w: 170px;
  --sol-gap: 25px;
  display: flex;
  gap: var(--sol-gap);
  margin-top: 32px;
}

.solution-btns .btn {
  width: min(var(--sol-btn-w), calc((100% - var(--sol-gap)) / 2));
  padding: 0;
}

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

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

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

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

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

/* 中排反向（向右）滚动。
   `animation-direction: reverse` 让轨道从「−一份」走到 0，起止两端同样相差整数份，
   接缝照旧严丝合缝；不必另写一套关键帧。 */
.brand-row--reverse {
  animation-direction: reverse;
}

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

/* 三排之间的纵向间距。用 > * + * 而不是 .brand-row + .brand-row：第一 / 第三排外面套了 .brand-band，轨道之间不再是兄弟。
   11px 取自原站三个 slider 的行距节拍 118 − 行高 107。 */
.brand-logos>*+* {
  margin-top: 11px;
}

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

/* ========== 新媒体服务区块（组件样式见公共 style.css 的 .newmedia / .nm-*） ========== */
.newmedia {
  background-image: url('../img/index/61252542.jpg');
}

/* 新媒体服务「四张服务项」进入动效（与「核心优势」.adv-card 同一套机制）：
   待命位挂在 html.js 下、只动 opacity / translateY、尊重「减少动态效果」；4 张依次错开 0/.1/.2/.3s。
   · 写在本页 index.css 而非公共 style.css：.nm-grid 在 fwal / gylf 也在用，本页才要这个效果。 */
@media (prefers-reduced-motion: no-preference) {
  .js .nm-item {
    opacity: 0;
    transform: translateY(40px);
  }

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

  .js .nm-grid.is-in .nm-item:nth-child(2) {
    transition-delay: .1s;
  }

  .js .nm-grid.is-in .nm-item:nth-child(3) {
    transition-delay: .2s;
  }

  .js .nm-grid.is-in .nm-item:nth-child(4) {
    transition-delay: .3s;
  }
}

/* 新媒体服务 992~1399 档：卡片改「左文 + 右图」两栏。
   公共组件在 ≤1399 只把 .nm-img 变成 static 块，插图被压成 320×248 丢在卡片左下角、右侧大片空白。
   做法：padding-right 让出右栏；.nm-img 绝对定位回右栏、上下撑满、contain 居中；四张服务项改自适应列宽。
   ⚠️ 用「区间媒体查询」锁 992~1399，而不是 max-width:1399px + 在 ≤991 逐档还原：.nm-* 是公共组件且本文件在 style.css 之后加载，
      写 max-width 会把 ≤991/≤767/≤479 的公共样式一起压掉。锁成区间后 PC 与 ≤991 天然零影响。
   ⚠️ 图必须 contain 不能 cover：插图两侧有细弧线装饰，cover 会把线裁断。 */
@media (min-width: 992px) and (max-width: 1399px) {
  .nm-card {
    --nm-picw: 30%;
    /* 右栏图宽（占卡片宽） */
    --nm-pic-gap: 24px;
    /* 正文右边界 与 图区左边界 的净间距 */
    position: relative;
    height: auto;
    padding: 48px calc(var(--nm-picw) + var(--nm-pic-gap)) 44px 40px;
  }

  .nm-img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--nm-picw);
    max-width: none;
    height: auto;
    margin: 0;
  }

  .nm-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

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

  .nm-item {
    width: auto;
    height: auto;
    min-height: 200px;
  }
}

/* 1300 是「4 列服务项不折行」的下限 —— 由 item 的内容宽决定，不是列宽：item 左右各 10px padding。
   正文最长一行「从营销诊断到执行优化」10 字 ≈ 160px ⇒ 列宽需 ≥180（1300 档实测列宽 184，刚好不折）。
   ≤1299 改 2×2，顺带把右栏图加宽到 34%。 */
@media (min-width: 992px) and (max-width: 1299px) {
  .nm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 20px;
  }

  .nm-card {
    --nm-picw: 34%;
  }
}

/* 新媒体服务 768~991 档：把「两颗按钮」与「插画」并成一行（按钮靠左、插画靠右、纵向对中）。
   本档卡片仍是整宽，公共样式把 .nm-img 变成贴左缘的定宽块、上方两颗按钮也靠左 ⇒ 整卡「左重右空」。
   做法：.nm-card 变 2 列网格 + .nm-content{display:contents} —— 拆掉这一层盒子，让 .nm-btns 与 .nm-img 自然落到同一行。
   ⚠️ 用 display:contents 而不改 HTML：.nm-* 是 fwal / gylf 共用组件，在 index.html 加包裹 div 会让首页 DOM 与另两页分叉。
   ⚠️ 用「区间媒体查询」锁 768~991：≤767 那档在公共 style.css 里已经很好，本档网格法会覆盖它。
   ⚠️ 两个网格项都要 margin-top:32px（行高由插画的 margin box 撑开），否则按钮会相对插画下偏 16px；
      .nm-img 要 max-width:100% 覆盖公共档的 300px。 */
@media (min-width: 768px) and (max-width: 991px) {
  .nm-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 32%);
    column-gap: 32px;
    align-items: start;
  }

  .nm-content {
    display: contents;
  }

  .nm-title,
  .nm-desc,
  .nm-grid {
    grid-column: 1 / -1;
  }

  .nm-btns {
    grid-column: 1;
    align-self: center;
  }

  .nm-img {
    grid-column: 2;
    align-self: center;
    justify-self: end;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 32px 0 0;
  }
}

/* 六步流程 992~1119：.nm-step 在 ≤1399 是 flex:1 1 0，六颗把整行均分完 ⇒ 胶囊边缘相接、1060 档起直接贴死。
   做法：只在这里加 32px 列间距，.nm-step 自动收窄、胶囊之间留出呼吸位；首颗左缘 / 末颗右缘仍与卡片左右边对齐。
   ⚠️ 必须用「区间媒体查询」锁 992~1119：≤991 的 .nm-step 是 flex-shrink:0，在那里加 gap 会让整行超出容器 40px ⇒ 横向溢出。
   ⚠️ 只写 column-gap，不写 gap 简写（本档不折行，简写会连 row-gap 一起改）。 */
@media (min-width: 992px) and (max-width: 1119px) {
  .nm-steps {
    column-gap: 32px;
  }
}

/* ========== 资讯区块 ========== */
.news {
  padding: 80px 0 0;
  background: #fff;
  height: 900px;
}

.news .sec-title {
  margin-bottom: 60px;
}

.news-list {
  display: flex;
  gap: 20px;
}

.news-card {
  flex: 1;
  max-width: 453px;
  height: 560px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 5px 10px rgba(226, 234, 246, .86);
  padding: 30px;
  display: flex;
  flex-direction: column;
}

.news-card__cover {
  width: 393px;
  height: 262px;
  border-radius: 20px;
  margin: 0 auto;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.news-card h3 {
  margin-top: 40px;
  font-size: 24px;
  color: #1d2129;
  line-height: 1.4;
  font-weight: 700;
  font-family: "Source Han Sans", sans-serif;
}

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

.news-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
}

.news-card__foot .date {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  color: #a5a5a5;
  font-family: "Source Han Sans", sans-serif;
}

.news-card__foot .date img {
  width: 24px;
  height: 24px;
}

.news-card__foot .link {
  font-size: 16px;
  color: #a5a5a5;
  font-family: Tahoma, sans-serif;
  transition: color .2s;
}

.news-card__foot .link:hover {
  color: #317af7;
}

.news-extra {
  padding: 30px;
}

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

.news-extra .extra-title img {
  width: 42px;
  height: 42px;
}

.news-extra-item {
  /* 单条定高：标题 1 行 + 摘要 2 行（-webkit-line-clamp:2）+ 上下 padding 就是设计高度。
     条目改成 CMS 取数后摘要可能为空/偏短，这里兜住高度：否则这一条会矮掉，
     视口高（3 × --ne-item-h）与轨道「一份」不再对齐，循环接缝就会跳。 */
  min-height: var(--ne-item-h);
  padding: 22px 0;
  border-bottom: 1px solid #eef2f7;
}

/* ⚠️ 这里原本有一条 .news-extra-item:last-child{border-bottom:0} —— 它其实是死规则（最后一条后面还有 .more-btn），已删。
   现在循环滚动依赖每一条都带下边框：缺一条就会在接缝处露出一截断线。 */
.news-extra-item h5 {
  font-size: 18px;
  color: #636e80;
  line-height: 1.4;
  font-weight: 400;
  font-family: "Source Han Sans", sans-serif;
}

.news-extra-item p {
  font-size: 16px;
  color: #636e80;
  line-height: 1.5;
  margin-top: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: "Source Han Sans", sans-serif;
}

.news-extra .more-btn {
  margin-top: auto;
  width: 100%;
  height: 48px;
  border-radius: 200px;
  border: 1px solid #317af7;
  background: transparent;
  color: #317af7;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}

.news-extra .more-btn:hover {
  background: #317af7;
  color: #fff;
}

/* 三条资讯整合进一个滚动视口做纵向无缝循环：
   结构：.news-extra-scroll（视口，overflow:hidden，高 = 3 条）└ .news-extra-track（纵向 flex，3 条 + 3 条副本）
   视口高 = 3 × 单条自然高 ⇒ 卡片总高与改前一致，且循环接缝正好落在整条边界。
   --ne-item-h = 单条自然高：≥1400 → 128.19 / 768–1399 → 113.19 / ≤767 → 107.39。
   ⚠️ 改 h5/p 字号或条目 padding 时，这三处必须同步重算。 */
.news-extra-scroll {
  --ne-item-h: 128.19px;
  height: calc(3 * var(--ne-item-h));
  overflow: hidden;
}

.news-extra-track {
  display: flex;
  flex-direction: column;
}

@keyframes ne-scroll {
  from {
    transform: translateY(0);
  }

  /* 走一份 = 「条数」× 单条高，和视口高用同一个变量算 ⇒ 接缝处严格对齐（用 -50% 会差 1/12px）。
     条数由 js/index.js 写入 --ne-count（兜底 3，即改前写死的那个条数），
     这样索引区的条数从 3 变成 5 时位移不用再手改。 */
  to {
    transform: translateY(calc(var(--ne-item-h) * var(--ne-count, 3) * -1));
  }
}

@media (prefers-reduced-motion: no-preference) {
  .news-extra-track {
    /* 6s / 条：3 条 = 原 18s，条数变多时滚动速度保持不变 */
    animation: ne-scroll calc(6s * var(--ne-count, 3)) linear infinite;
  }
}

/* 悬停暂停：想看清某条时不必跟滚动抢时间（只在真有 hover 能力的设备上生效） */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .news-extra-scroll:hover .news-extra-track {
    animation-play-state: paused;
  }
}

/* ==================== 响应式适配 ==================== */
/* 断点：1399（笔记本） / 1199（小笔记本） / 991（平板竖屏） / 767（大屏手机） / 479（小屏手机） */

/* ---------- 1399：解除固定定位，改为流式布局 ---------- */
@media (max-width: 1399px) {

  /* 页头高 80 → 76（见 style.css），banner 高度同步 */
  :root {
    --hdr: 76px;
  }

  /* 首屏：撑满一屏（min-height = 视口高 − 页头高），内容纵向居中；
     横向位置沿用设计稿（内容盒左缘），不做居中。
     不再用固定 padding 撑高，否则内容会浮在顶部、下方留一大片空白。 */
  .banner {
    height: auto;
    min-height: calc(100vh - var(--hdr));
    min-height: calc(100dvh - var(--hdr));
    padding: 60px 0;
    display: flex;
    align-items: center;
    background-position: 66% 50%;
  }

  .banner-inner {
    height: auto;
  }

  .banner-text {
    position: static;
    width: auto;
    max-width: 680px;
  }

  .banner-text h1 {
    font-size: clamp(34px, 4.4vw, 62px);
    line-height: 1.4;
  }

  .banner-text p {
    margin-top: 16px;
    font-size: clamp(17px, 2.1vw, 32px);
    line-height: 1.6;
  }

  .banner-btns {
    position: static;
    margin-top: 44px;
  }

  /* 服务 */
  .services {
    padding-top: 60px;
    padding-bottom: 72px;
  }

  .service-tabs {
    max-width: 100%;
    margin-top: 30px;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .service-tab {
    width: auto;
    min-width: 170px;
    height: 58px;
    padding: 0 20px;
    font-size: 20px;
    justify-content: center;
  }

  .service-tab img {
    width: 38px;
    height: 38px;
    margin-right: 9px;
    margin-top: 0;
  }

  .geo-cards {
    margin-top: 44px;
  }

  .geo-card {
    height: auto;
    min-height: 470px;
    padding: 48px 36px 40px;
    --tag-pad: 16px;
  }

  .geo-card h3 {
    font-size: 28px;
  }

  .geo-card .tag {
    height: 38px;
    line-height: 38px;
    padding: 0 var(--tag-pad);
    font-size: 16px;
  }

  .geo-card .desc {
    font-size: 16px;
    line-height: 1.9;
  }

  .geo-card .features {
    margin-top: 28px;
  }

  .geo-card .features li {
    font-size: 18px;
  }

  .geo-card .features li::before {
    width: 26px;
    height: 26px;
    margin-right: 10px;
  }

  .geo-card .geo-cta {
    margin-top: 30px;
  }

  /* 核心优势 */
  .advantages {
    height: auto;
    padding: 60px 0 76px;
    background-size: cover;
  }

  .advantages .sec-title {
    margin-bottom: 48px;
  }

  .adv-row {
    flex-wrap: wrap;
  }

  .adv-card {
    width: auto;
    flex: 1 1 300px;
    height: auto;
    min-height: 180px;
    padding: 42px 36px;
  }

  .adv-card--wide {
    width: auto;
    flex: 1 1 420px;
  }

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

  .adv-divider {
    margin-top: 32px;
  }

  .adv-divider .consult {
    width: 186px;
    height: 54px;
    font-size: 21px;
  }

  /* 数据展示：标题独占一行；下面「10 年图示」与「2×2 数字」并排。
   ⚠️ 图示块改成真 flex（[img 180×156] + [文字列]），块宽自然 = 内容宽，不再依赖给绝对定位的 .year b/span 预留空间的魔法 margin。
   ⚠️ .year 由绝对定位容器降级成 flex 列并在竖直方向 space-between：文字列与图示等高，YEAR 贴顶、副标题贴底。
   ⚠️ align-items 由 flex-start 改 center（数字块 162 高、图示块 156 高）。 */
  .stats {
    height: auto;
    padding: 64px 0 72px;
    background-size: cover;
  }

  .stats-inner {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 48px 60px;
  }

  .stats-title {
    position: static;
    width: 100%;
  }

  .stats-title h2 {
    font-size: 24px;
  }

  .stats-title p {
    font-size: 16px;
  }

  .stats-years {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: 156px;
    flex: 0 0 auto;
    margin-right: 0;
    display: flex;
    align-items: stretch;
    gap: 22px;
  }

  .stats-years>img {
    width: 180px;
    height: 156px;
    object-fit: contain;
  }

  .stats-years .year {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .stats-years .year b {
    position: static;
    left: auto;
    top: auto;
    font-size: 16px;
  }

  .stats-years .year span {
    position: static;
    left: auto;
    top: auto;
    font-size: 22px;
  }

  /* ⚠️ 2×2 用 1fr 1fr 让两列各占一半、把剩余宽度吃满。原来 auto auto + justify-content:start 时列宽只按内容算，
      1399 档数字只占到 x 462~964，右侧空出 403px，整块偏左。
   ⚠️ 1fr = minmax(auto,1fr)：列的最小尺寸是内容宽，所以 992 档不会溢出；再窄就该走 ≤991 的 flex:1 1 100% 独占整行。 */
  .stats-grid {
    position: static;
    width: auto;
    height: auto;
    flex: 1 1 420px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 72px;
    row-gap: 40px;
  }

  .sg {
    position: static;
    display: flex;
    align-items: flex-end;
  }

  .sg .num {
    font-size: 64px;
  }

  .sg .suffix {
    font-size: 18px;
  }

  .sg .lbl {
    position: static;
    padding: 0 0 12px 14px;
    font-size: 18px;
  }

  /* SEM 行业方案 */
  .solutions {
    height: auto;
    padding: 60px 0 72px;
    background-size: cover;
  }

  .solutions .sec-title {
    position: static;
  }

  .solutions-tabs {
    position: static;
    margin-top: 32px;
    flex-wrap: wrap;
    gap: 14px;
  }

  /* ≤1399：SEM 方案卡片改为「左文 + 右图」两栏，右图纵向占满卡片（贴满上 / 下 / 右三边）。
   底图从卡片背景搬到 ::after；卡片 overflow:hidden 把图按 20px 圆角裁齐。
   旧写法 background-size:44% auto + 右侧 padding 的问题：图只有 ~190px 高死贴右下角；且 992~1199 漏覆盖 background-size/position，文字压在图上。
   ⚠️ --sol-picw 用百分比：padding 与 ::after width 的百分比基数在「卡片块级铺满父宽」时相等。
   ⚠️ 必须 top:auto; left:auto：本档要用 relative 当 ::after 的定位上下文，而基座是 absolute + top:310px，只写 relative 会把整卡向下推 310px。
   ⚠️ 图右对齐（100% 50%）：底图是「左半白底文字区 + 右半插画」的合成图，取右半才不带左侧留白。
   ⚠️ 纵向占满后可见的原图变窄 ⇒ 左缘必须做渐隐过渡（见下），让被裁掉的左侧融进卡片白底。 */
  .solution-card {
    --sol-picw: 46%;
    /* 右栏图宽（占卡片宽） */
    --sol-pic-gap: 20px;
    /* 正文右边界 与 图区左边界 的净间距 */
    --sol-pic-fade: .22;
    /* 图左缘渐隐带宽度（占图宽，无单位 → 供 calc 复算） */
    position: relative;
    top: auto;
    left: auto;
    height: auto;
    margin-top: 32px;
    padding: 36px calc(var(--sol-picw) + var(--sol-pic-gap)) 40px 40px;
    background-color: #fff;
    background-image: none;
    overflow: hidden;
    /* 让 ::after 被卡片 20px 圆角裁齐（图三边贴齐卡片） */
  }

  .solution-card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--sol-picw);
    background: var(--sol-bg) 100% 50% / cover no-repeat;
    /* 靠文字的那一边（左缘）横向渐隐：硬切边会像「贴在卡片上的色块」，渐隐后与白底融合，也顺带避免「图压到文字」的观感。
   ⚠️ --sol-pic-fade 必须是无单位数：calc(.22 * 50%) 合法，calc(1 - 22%) 不合法，所以 padding 侧只用加法。 */
    -webkit-mask-image: linear-gradient(90deg,
        transparent 0, rgba(0, 0, 0, .4) calc(var(--sol-pic-fade) * 50%), #000 calc(var(--sol-pic-fade) * 100%));
    mask-image: linear-gradient(90deg,
        transparent 0, rgba(0, 0, 0, .4) calc(var(--sol-pic-fade) * 50%), #000 calc(var(--sol-pic-fade) * 100%));
  }

  .solution-tags {
    flex-wrap: wrap;
  }

  .solution-tag {
    width: auto;
    height: 36px;
    padding: 0 20px;
    font-size: 16px;
  }

  .solution-title {
    font-size: 23px;
  }

  .solution-block h4 {
    font-size: 20px;
  }

  .solution-block p {
    max-width: 100%;
    font-size: 15px;
  }

  .solution-btns {
    margin-top: 28px;
  }

  .brand-logos {
    position: static;
    margin-top: 40px;
  }

  .brand-row {
    height: 84px;
  }

  .brand-logos>*+* {
    margin-top: 8px;
  }

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

  /* 新媒体 */
  /* 6 个步骤改为等分自适应，避免固定 232px 撑破容器；箭头空间不足故隐藏 */

  /* 资讯 */
  .news {
    height: auto;
    padding: 60px 0 72px;
  }

  .news .sec-title {
    margin-bottom: 40px;
  }

  .news-card {
    height: auto;
    min-height: 520px;
    padding: 24px;
  }

  .news-card__cover {
    width: 100%;
    height: auto;
    aspect-ratio: 393 / 262;
  }

  .news-card h3 {
    margin-top: 26px;
    font-size: 21px;
  }

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

  .news-extra {
    min-height: 0;
  }

  .news-extra-item {
    padding: 16px 0;
  }

  .news-extra-scroll {
    --ne-item-h: 113.19px;
  }
}

/* ---------- 992~1399：数据展示「整体居中」的两栏构图 ----------
   上一版内容左边界被钉在容器内边距、右边界只到 ~1178 ⇒ 右侧空 190px，整块重心明显偏左。
   现改两栏并整体居中：列 1 = 「标题 + 10 年图示」上下叠放（与 PC 的绝对定位构图同构），列 2 = 2×2 数字；两组轨道用 justify-content:center 一起居中。
   ⚠️ 必须写「区间」媒体查询：≤991/≤767 两档仍走 ≤1399 档给的 flex 布局。
   ⚠️ 数字块用 auto auto（内容宽）而不是 1fr 1fr：1fr 会让列宽大于内容宽，格子内部重新出现死白。 */
@media (min-width: 992px) and (max-width: 1399px) {
  .stats-inner {
    display: grid;
    grid-template-columns: max-content max-content;
    justify-content: center;
    align-items: center;
    column-gap: 120px;
    row-gap: 16px;
  }

  .stats-title {
    grid-column: 1;
    grid-row: 1;
    width: auto;
  }

  .stats-years {
    grid-column: 1;
    grid-row: 2;
  }

  .stats-grid {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    column-gap: 96px;
    row-gap: 34px;
  }
}

/* 992~1199：两列内容宽合计 778px，沿用 120+96 间距总宽 994 会超过 992 档的容器内容宽 928，
   而 justify-content:center 在溢出时会两侧对称外溢。这里把两个列间距一起收窄到 48，总宽 874 ≤ 928。
   ⚠️ 判据：可用宽 − 两列内容宽 = 两个间距之和的上限（928 − 778 = 150）。 */
@media (min-width: 992px) and (max-width: 1199px) {
  .stats-inner {
    column-gap: 48px;
  }

  .stats-grid {
    column-gap: 48px;
  }
}

/* ---------- 1199：平板横屏 ---------- */
@media (max-width: 1199px) {
  :root {
    --hdr: 70px;
  }

  /* ⚠️ 这里只改「间距变量 + padding」，绝不能只写 padding:32px 四边 —— 那会让 padding-right 退回到 32px、右栏图直接压住正文。
   图三边贴齐卡片，没有 in/out 可变，所以本档只需重算 padding。 */
  .solution-card {
    --sol-pic-gap: 16px;
    padding: 32px calc(var(--sol-picw) + var(--sol-pic-gap)) 36px 32px;
  }

  .news-card {
    min-height: 480px;
  }

  .news-extra .extra-title {
    font-size: 21px;
  }
}

/* ---------- 991：平板竖屏，双列转单列 ---------- */
@media (max-width: 991px) {
  :root {
    --hdr: 64px;
  }

  /* 首屏：≤991 取消「撑满一屏」，高度交给内容决定；底图换成 600×400 的
     20261011095821_247_323.jpg（左侧 58% 是浅蓝留白，右下 x62.5%~99.8% / y35%~92.5% 是蓝色圆球）。
     取景 right center + 文字列收到 58%：cover 缩放下圆球左缘恒落在底块宽的 62.5%，
     天然与文字错开，浅色留白稳稳垫在字下方 —— 仍不加任何蒙版/白化层。
     h1 用 word-break:keep-all，断行只发生在空格处（→「专业营销赋能 / 让获客更简单」），
     免得窄屏断成「…让获客 / 更简单」这种失衡的两行。 */
  .banner {
    height: auto;
    min-height: 0;
    padding: 56px 0;
    background: #e7f2ff url('../img/index/20261011095821_247_323.jpg') right center / cover no-repeat;
  }

  .banner-text {
    max-width: 58%;
  }

  .banner-text h1 {
    font-size: 30px;
    word-break: keep-all;
  }

  .banner-text p {
    font-size: 16px;
  }

  .banner-btns {
    max-width: 58%;
    margin-top: 30px;
    gap: 16px;
  }

  .banner-btns .btn {
    min-width: 0;
  }

  /* 服务 */
  .service-tab {
    min-width: 150px;
  }

  .geo-panel {
    flex-direction: column;
  }

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

  /* 数据展示：标题与「10 年图示」同行（改前图示独占一行、右侧空出 ~570px 白）；
     数字 2×2 独占下一行，用 1fr 1fr 铺满整行宽度。 */
  .stats-inner {
    gap: 40px;
  }

  .stats-title {
    width: auto;
    flex: 1 1 300px;
  }

  .stats-grid {
    flex: 1 1 100%;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
  }

  /* SEM 行业方案：平板以下卡片改为纯白单栏，隐藏右栏图（避免背景图压住正文）。
   ⚠️ overflow 显式还原成 visible：≤1399 档为裁 ::after 圆角加过 hidden，本档 ::after 已 display:none。 */
  .solution-card {
    padding: 32px 32px 36px;
    background-image: none;
    background-color: #fff;
    overflow: visible;
  }

  .solution-card::after {
    display: none;
  }

  /* 新媒体 */

  /* 资讯：前两张 .news-card 并排，第三张（.news-extra 行业资讯）独占一行。
   ⚠️ 用 grid 而不是 flex-wrap：需要第三张「横跨两列」，flex 做不到跨列。
   ⚠️ 列宽写 minmax(0, 1fr) 而不是 1fr：裸 1fr 的最小尺寸是 min-content，窄档会被长串中文与定宽封面顶宽、撑出横向溢出。 */
  .news-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .news-card {
    max-width: 100%;
    min-height: 0;
  }

  .news-extra {
    grid-column: 1 / -1;
  }

  .news-card__cover {
    max-width: 420px;
    margin: 0 auto;
  }
}

/* ---------- 519：并排的下界 ----------
   判据是卡片脚部：「日期」与「查看详情 >」两者 nowrap 自然宽 94 + 71 = 165px，再留一点挤缝 ⇒ 卡片内容盒至少 ~190px，
   519 以下并排时两者会各自折行。这里退回单栏堆叠（1 列 grid 与改前的 flex-direction:column 视觉等价）。 */
@media (max-width: 519px) {
  .news-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- 767：大屏手机 ---------- */
@media (max-width: 767px) {

  /* 首屏：仍是「文字靠左 58% + 圆球靠右」的横向排布（实测到 480px 都还没压字），只收字号与按钮尺寸 */
  .banner {
    padding: 48px 0;
  }

  .banner-text h1 {
    font-size: 26px;
  }

  .banner-text p {
    font-size: 15px;
  }

  .banner-btns .btn {
    height: 46px;
    padding: 0 18px;
    font-size: 16px;
  }

  /* 服务 */
  .services {
    padding-top: 44px;
    padding-bottom: 52px;
  }

  .service-tabs {
    gap: 10px;
  }

  .service-tab {
    flex: 1 1 130px;
    min-width: 0;
    justify-content: center;
    height: 52px;
    padding: 0 12px;
    font-size: 17px;
  }

  .service-tab img {
    width: 30px;
    height: 30px;
    margin-right: 8px;
  }

  .geo-cards {
    margin-top: 32px;
  }

  .geo-panel {
    gap: 16px;
  }

  .geo-card {
    padding: 36px 24px 32px;
    --tag-pad: 12px;
  }

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

  .geo-card .geo-badge {
    width: 92px;
    height: 33px;
    border-radius: 0 17.5px 0 15.5px;
    font-size: 13px;
  }

  .geo-card .tag {
    font-size: 14px;
    height: 34px;
    line-height: 34px;
    padding: 0 var(--tag-pad);
  }

  .geo-card .desc {
    font-size: 15px;
    line-height: 1.8;
  }

  .geo-card .features {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 24px;
  }

  .geo-card .features li {
    font-size: 16px;
  }

  .geo-card .features li::before {
    width: 22px;
    height: 22px;
    margin-right: 8px;
  }

  .geo-card .geo-cta {
    width: 160px;
    height: 48px;
    margin-top: 26px;
    font-size: 16px;
  }

  .geo-card .geo-cta::after {
    width: 24px;
    height: 24px;
  }

  /* 核心优势：手机端收紧纵向间距（仅 ≤767，PC 不受影响） */
  .advantages {
    padding: 30px 0 34px;
  }

  .advantages .sec-title {
    margin-bottom: 20px;
  }

  .adv-row {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
  }

  .adv-card,
  .adv-card--wide {
    flex: 1 1 auto;
    width: 100%;
    min-height: 150px;
    padding: 30px 24px;
  }

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

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

  .adv-divider {
    gap: 18px;
    margin: 18px 0 0;
  }

  .adv-divider .consult {
    width: 168px;
    height: 50px;
    font-size: 19px;
  }

  /* 数据展示：手机端标题与数字整体居中，纵向间距收紧 */
  .stats {
    padding: 30px 0 34px;
  }

  .stats-inner {
    justify-content: center;
    gap: 16px;
  }

  /* ⚠️ 手机端标题回到「独占一行」：宽度不够时与图示同行会把正文挤成两行 */
  .stats-title {
    width: 100%;
    flex: 0 0 100%;
    text-align: center;
  }

  .stats-title h2 {
    font-size: 20px;
  }

  .stats-title p {
    font-size: 14px;
  }

  /* 10 年图与 YEAR 文案并排、整体居中；文字列相对 114px 高的图垂直居中。
     ⚠️ .year 现在是 ≤1399 给的 flex 列（见该档注释）——b/span 各自成行，
        不再像改前那样退化为行内元素、粘成「YEAR十余年行业沉淀」一行。 */
  .stats-years {
    position: static;
    display: flex;
    align-items: center;
    gap: 12px;
    width: auto;
    height: auto;
    margin: 0 auto;
  }

  .stats-years>img {
    width: 132px;
    height: 114px;
  }

  .stats-years .year {
    position: static;
    width: auto;
    height: auto;
  }

  .stats-years .year b {
    position: static;
    left: auto;
    top: auto;
    font-size: 14px;
  }

  .stats-years .year span {
    position: static;
    left: auto;
    top: auto;
    margin-top: 6px;
    font-size: 17px;
  }

  /* ⚠️ 列宽回到「按内容算 + 整体居中」：≤991 的 1fr 1fr 会把两列拉到屏幕两端 */
  .stats-grid {
    justify-content: center;
    grid-template-columns: auto auto;
    column-gap: 36px;
    row-gap: 20px;
  }

  .sg .num {
    font-size: 46px;
  }

  .sg .suffix {
    font-size: 14px;
  }

  .sg .lbl {
    padding: 0 0 8px 10px;
    font-size: 14px;
  }

  /* SEM 行业方案 */
  .solutions {
    padding: 44px 0 56px;
  }

  .solutions-tabs {
    gap: 10px;
    margin-top: 24px;
  }

  .solutions-tab {
    height: 34px;
    padding: 0 18px;
    font-size: 15px;
  }

  .solution-card {
    margin-top: 24px;
    padding: 26px 20px 30px;
  }

  .solution-tags {
    gap: 10px;
    margin: 12px 0 18px;
  }

  .solution-tag {
    height: 32px;
    padding: 0 14px;
    font-size: 14px;
    gap: 6px;
  }

  .solution-tag img {
    width: 16px;
    height: 16px;
  }

  .solution-title {
    font-size: 20px;
  }

  .solution-block {
    margin-top: 18px;
  }

  .solution-block h4 {
    font-size: 17px;
  }

  .solution-block p {
    font-size: 14px;
  }

  .solution-btns {
    --sol-btn-w: 138px;
    --sol-gap: 14px;
    gap: var(--sol-gap);
    margin-top: 24px;
  }

  .solution-btns .btn {
    height: 44px;
    padding: 0;
    font-size: 15px;
  }

  .brand-logos {
    margin-top: 30px;
  }

  .brand-row {
    height: 68px;
  }

  .brand-logos>*+* {
    margin-top: 6px;
  }

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

  /* 新媒体 —— 陪伴式服务卡片底部插画：窄屏在公共 style.css 里被改成贴内容盒左缘的定宽块，观感明显偏左。
   本页要求与「关于我们」页一致，居中显示：margin-left/right:auto 让定宽块在卡片内容盒里水平居中。
   ⚠️ 只改水平位置：width / max-width / height / margin-top 全部沿用公共档 ⇒ 图片尺寸、纵向位置、卡片与区块总高都不变。 */
  .nm-img {
    margin-left: auto;
    margin-right: auto;
  }

  /* 资讯 */
  .news {
    padding: 44px 0 56px;
  }

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

  .news-card {
    padding: 20px;
  }

  .news-card h3 {
    margin-top: 20px;
    font-size: 19px;
  }

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

  .news-card__foot .date,
  .news-card__foot .link {
    font-size: 14px;
  }

  .news-extra .extra-title {
    font-size: 19px;
  }

  .news-extra .extra-title img {
    width: 32px;
    height: 32px;
  }

  .news-extra-item h5 {
    font-size: 16px;
  }

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

  .news-extra-scroll {
    --ne-item-h: 107.39px;
  }
}

/* ---------- 479：小屏手机 ---------- */
@media (max-width: 479px) {

  /* 首屏：≤479 底块宽 < 1.5×高，cover 取景会把圆球左缘压到 55% 以内、必然压字，
     故换成「文字满宽在上 + 底图贴底满宽在下」的堆叠式：底图 100% auto（高 = 2/3 宽）满宽铺开
     ⇒ 左右零接缝、也无需靠兜底色去碰色；再整体下沉 40px 让圆球底部出血，块高更紧凑。
     圆球顶边 = 块高 + 下沉量 − 0.6475×图高，令 padding-bottom = 43.2vw − 16px，
     则「文字底 → 圆球顶」的留白恒为 24px，与文字折几行完全无关。 */
  .banner {
    padding: 40px 0 calc(43.2vw - 16px);
    background-size: 100% auto;
    background-position: center calc(100% + 40px);
  }

  .banner-text {
    max-width: 100%;
  }

  .banner-btns {
    max-width: 100%;
  }

  .banner-text h1 {
    font-size: 23px;
  }

  .banner-text p {
    font-size: 14px;
  }

  .banner-btns .btn {
    flex: 1 1 0;
  }

  .service-tab {
    flex: 1 1 100px;
    height: 48px;
    font-size: 15px;
  }

  .service-tab img {
    width: 26px;
    height: 26px;
  }

  /* tag 文案在超小屏放不下会折行，原来的 34px 定高会把第二行挤到胶囊底色外面。
     先把「定高」换成「最小高度」（行高/内边距/display 不动 ⇒ 单行时像素级不变），
     真正的折行由下面 359 档收字号解决；两条一起构成兜底，将来换更长的文案也不会漏底。 */
  .geo-card .tag {
    height: auto;
    min-height: 34px;
  }

  .stats-years>img {
    width: 112px;
    height: 96px;
  }

  .stats-years .year span {
    font-size: 15px;
  }

  /* 超小屏：数字与标签上下排列并居中，避免两列总宽超出屏幕 */
  .stats-grid {
    column-gap: 28px;
    row-gap: 14px;
  }

  .sg {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .sg .num {
    font-size: 38px;
  }

  .sg .suffix {
    font-size: 12px;
  }

  .sg .lbl {
    padding: 6px 0 0;
    font-size: 13px;
  }

  /* 新媒体按钮在小屏竖排，避免长文案撑破容器 */

}

/* ---------- 359：极窄屏（320/340 档）----------
   tag 文案最长一条（海外 GEO）单行需 269px，而 320 视口只有 240px 可用 ⇒ 必然折行。
   这里把 tag 字号收到 12px（仍大于 11px 的可读下限），实测四条文案都能单行放下，
   胶囊维持 34px 原高。360px 及以上完全不受影响（已在 360/375/414/480 做过像素级零差异校验）。 */
@media (max-width: 359px) {
  .geo-card .tag {
    font-size: 12px;
  }
}