/* =============================================================================
   Nextsms · 响应式组件样式表
   -----------------------------------------------------------------------------
   数值 1:1 取自 Ardot 设计稿「云通讯官网设计 · Nextsms」(fileId 726071113347523)

   设计稿实测规格（本文件全部按此实现）：
     区块       padding 96 / 120，内部 gap 44
     卡片       圆角 24 / 白底 / 描边 1px #E2E8F0 / 阴影 0 10 15 -3 rgba(15,23,42,.08)
     产品卡      padding 36，高 500，内文 gap 14，按钮 padding 15/0 + 2px 描边 + 圆角 8
     旗舰产品卡  135° 渐变 #2563EB→#1D4ED8 + 品牌色投影 0 20 30 -8 rgba(37,99,235,.30)
     优势卡      padding 32，高 248，内文 gap 16，图标底 56×56 r14
     案例卡      宽 356 / 高 400，封面高 176，内文 padding 26 gap 10
     新闻卡      高 320，封面高 160，内文 padding 24 gap 10
     图标底      56×56 r14（大 72×72 r16）；标记 pill r999 padding 6/14
   ============================================================================= */

/* ============================== 1. 基础重置 ============================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--f-cn);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, p, figure, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }

:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; border-radius: 4px; }

/* data-cn-only 用 hidden 属性控制（英文 / 印地语版隐藏国内短信模块）。
   组件里大量 display:flex / grid，会盖掉浏览器默认的 [hidden]{display:none}，
   所以这里显式兜底 —— 否则英文版下被隐藏的节点依旧会显示出来。 */
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 数字用 Inter（设计稿：指标 / 数值一律 Inter Black / Bold） */
.stat__v, .case-card__metric b, .mini-card__year, .mock__cell b,
.hero__metric b, .num { font-family: var(--f-en); font-variant-numeric: tabular-nums; }

/* ============================== 2. 栅格与容器 ============================== */
/* 设计稿：1440 宽 → gutter 120 → 内容 1200。用 max-width:1440 + padding 实现 */
.wrap {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--sp-gutter-m);
}

.sec {
  display: flex;
  flex-direction: column;
  gap: var(--sp-block);
  padding-block: var(--sp-section-m);
  position: relative;
  /* 裁掉 .sec__glow / .sec__deco 越出区块的部分，避免页面出现横向滚动条 */
  overflow: hidden;
}
.sec--white { background: var(--c-white); }
.sec--soft  { background: var(--c-bg); }
.sec--pale  { background: var(--c-brand-pale); }
.sec--tight { gap: 28px; }
@media (min-width: 768px) {
  .wrap { padding-inline: var(--sp-gutter-t); }
  .sec  { padding-block: var(--sp-section-t); }
}
@media (min-width: 1024px) {
  .wrap { padding-inline: 80px; }
  .sec  { padding-block: var(--sp-section); }
}
@media (min-width: 1280px) {
  .wrap { padding-inline: var(--sp-gutter); }
}

/* 区块标题组：pill + 标题 + 副标，居中（设计稿 5:1061 gap 14 / CENTER） */
.sec__hd { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.sec__hd--left { align-items: flex-start; text-align: left; }
/* 左标题 + 右链接（设计稿 5:1276 / 5:1342，桌面 SPACE_BETWEEN + 底对齐）；
   移动端折成上下堆叠，整块居中（与 sec__hd 默认一致），≥768px 才恢复左标题右链接的行布局 */
.sec__hd--between { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
@media (min-width: 768px) {
  /* 三栏网格：中栏 auto 放标题栈→真正页面居中；右栏 1fr 放箭头/链接，不影响中轴 */
  .sec__hd--between { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; column-gap: 24px; }
  .sec__hd--between > .stack { grid-column: 2; align-items: center; }
  .sec__hd--between > img, .sec__hd--between > .link-more { grid-column: 3; justify-self: end; }
  .sec__hd .lead { max-width: 820px; }
}

/* 胶囊标签（设计稿：padding 7/16，r999，#EFF6FF 底，13 Bold #2563EB） */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: var(--r-pill);
  background: var(--c-brand-pale); color: var(--c-brand);
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
}
.tag--green  { background: var(--c-green-pale);  color: var(--c-green-deep); }
.tag--purple { background: var(--c-purple-wash); color: var(--c-purple-deep); }
.tag--pink   { background: var(--c-pink-pale);   color: var(--c-pink); }
.tag--amber  { background: var(--c-amber-wash);  color: var(--c-amber-text); }
.tag--onDark { background: var(--c-brand-deep);  color: var(--c-white); }
/* 规范：纵向 stack 是 flex 容器，子项默认 stretch 会把胶囊拉成整行色带；标签永远按内容宽，
   对齐跟随区块头：居中区（sec__hd 默认 / --between）居中，--left 区与头外 stack 靠左；stack 行内声明居中时优先 */
.stack > .tag { align-self: flex-start; }
.stack[style*="align-items:center"] > .tag, .stack[style*="align-items: center"] > .tag { align-self: center; }
.sec__hd > .stack > .tag { align-self: center; }
.sec__hd--left > .stack > .tag { align-self: flex-start; }

/* ============================== 3. 排版 ============================== */
.h1, .h2, .h3, .h4 { color: var(--c-ink); font-weight: 800; line-height: var(--lh-tight); letter-spacing: -.01em; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.h4 { font-size: var(--fs-h4); font-weight: 700; }

.lead { font-size: var(--fs-lead); color: var(--c-text); line-height: var(--lh-normal); }

.muted  { color: var(--c-text-2); }
.dim    { color: var(--c-text-3); }
.brand  { color: var(--c-brand); }
.strong { color: var(--c-ink); }
.small  { font-size: var(--fs-small); }
.xs     { font-size: var(--fs-xs); }
.center { text-align: center; }

/* ============================== 4. 按钮 ============================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: var(--r-btn); border: 2px solid transparent;
  font-size: var(--fs-body-s); font-weight: 600; line-height: 1.2; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--c-brand); color: var(--c-white); box-shadow: var(--sh-brand); }
.btn--primary:hover { background: var(--c-brand-deep); }
.btn--ghost { background: var(--c-white); color: var(--c-brand); border-color: var(--c-brand); }
.btn--ghost:hover { background: var(--c-brand-pale); }
.btn--light { background: var(--c-white); color: var(--c-brand); }
.btn--light:hover { background: var(--c-brand-pale); }
.btn--onDark { background: rgba(255,255,255,.18); color: var(--c-white); border-color: var(--c-white); }
.btn--onDark:hover { background: rgba(255,255,255,.3); }
.btn--soft { background: var(--c-brand-pale); color: var(--c-brand); }
.btn--soft:hover { background: var(--c-brand-soft); }
.btn--sm { padding: 10px 18px; font-size: var(--fs-small); }
.btn--block { width: 100%; }
.btn--pill { border-radius: var(--r-pill); }

/* 产品卡内的整宽按钮：padding 15/0，2px 描边，r8（设计稿 5:1079） */
.btn--card { width: 100%; padding: 15px 0; border-radius: var(--r-btn); border-width: 2px;
  font-size: var(--fs-body-s); font-weight: 600; }

.btns { display: flex; flex-direction: column; gap: 14px; }
.btns .btn { width: 100%; }
@media (min-width: 768px) {
  .btns { flex-direction: row; flex-wrap: wrap; gap: 14px; }
  .btns .btn { width: auto; }
}

/* ============================== 5. 图标底板 ============================== */
/* 设计稿：56×56 r14（大卡 72×72 r16），45° 浅色渐变 */
/* 图标底（设计稿 56×56 r14 / 大 72×72 r16 / 小 48×48 r14 / 部分 52×52）。
   设计稿导出的 tile SVG 已自带「渐变底 + 圆角 + 图标」整块像素，
   因此这里不画底、也不强制尺寸，完全由 SVG 的原始尺寸决定 —— 保证 1:1。
   --lg / --sm 仅作语义标记，不改变尺寸。 */
.icon-tile { display: block; flex: none; line-height: 0; }
.icon-tile img { display: block; }
/* --lg / --sm 锁定设计稿尺寸：72（旗舰卡）/ 48（小卡）；默认档由 SVG 原生尺寸决定 */
.icon-tile--lg img { width: 72px; height: 72px; }
.icon-tile--sm img { width: 48px; height: 48px; }

/* 仅在「SVG 只有图标、没有底」时使用的兜底底色变体（当前未用到） */
.icon-tile--flat      { background-image: var(--g-icon-blue); border-radius: var(--r-icon); }
.icon-tile--flat.icon-tile--green  { background-image: var(--g-icon-green); }
.icon-tile--flat.icon-tile--amber  { background-image: var(--g-icon-amber); }
.icon-tile--flat.icon-tile--purple { background-image: var(--g-icon-purple); }
.icon-tile--flat.icon-tile--pink   { background-image: var(--g-icon-pink); }
.icon-tile--flat.icon-tile--cyan   { background-image: var(--g-icon-cyan); }

/* ============================== 6. 卡片体系 ============================== */
.card {
  background: var(--c-white);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card:hover { box-shadow: var(--sh-hover); transform: translateY(-4px); border-color: var(--c-brand-line); }
.card--flat { box-shadow: none; }
.card--flat:hover { box-shadow: var(--sh-card); }
.card--pad { padding: 26px; }
.card__hd { display: flex; align-items: center; justify-content: space-between; }
.card__title { font-size: var(--fs-card-s); font-weight: 700; color: var(--c-ink); line-height: var(--lh-snug); }
.card__desc { font-size: var(--fs-small); color: var(--c-text); line-height: var(--lh-normal); }

/* ——— 产品卡（设计稿 5:1097 / 5:1067）——— */
.pcard {
  display: flex; flex-direction: column;
  padding: 36px;
  background: var(--c-white);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.pcard:hover { box-shadow: var(--sh-hover); transform: translateY(-4px); border-color: var(--c-brand-line); }
.pcard__top { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.pcard__body { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; flex: 1; }
.pcard__title { font-size: var(--fs-card); font-weight: 700; color: var(--c-ink); line-height: var(--lh-snug); }
.pcard__desc { font-size: var(--fs-body-s); color: var(--c-text); line-height: var(--lh-normal); }
.pcard__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pcard__btn { margin-top: auto; padding-top: 8px; }

/* 旗舰卡：135° 品牌渐变 + 品牌色投影（设计稿 5:1067） */
.pcard--hero { background-image: var(--g-brand); border-color: transparent; box-shadow: var(--sh-brand); }
.pcard--hero:hover { box-shadow: 0 28px 40px -10px rgba(37,99,235,.42); border-color: transparent; }
.pcard--hero .pcard__title { color: var(--c-white); }
.pcard--hero .pcard__desc  { color: var(--c-brand-soft); }
/* 旗舰卡图标底：SVG 自带 rgba(255,255,255,.18) 底，无需再叠 */
.pcard--hero .btn--card    { background: rgba(255,255,255,.18); border-color: var(--c-white); color: var(--c-white); }
.pcard--hero .btn--card:hover { background: rgba(255,255,255,.3); }

/* 能力标签（设计稿 5:1078 gap 10 内的小胶囊） */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--c-white); border: 1px solid var(--c-line-2);
  font-size: var(--fs-2xs); color: var(--c-text-2); white-space: nowrap;
}
.pcard--hero .chip { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); color: var(--c-white); }

/* 标记 pill（设计稿 11:72 / 11:74 / 11:76：padding 6/14，r999 + 12×12 圆点） */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
}
/* 标记 pill 配色（设计稿实测：热门 #FDE68A/#D97706 · 高频 #E0F2FE/#0891B2
   · 高转化 #FCE7F3/#DB2777 · 绿 #D1FAE5/#059669） */
.pill img { width: 12px; height: 12px; flex: none; }
.pill--amber  { background: var(--c-amber-soft); color: var(--c-amber-text); }
.pill--blue   { background: var(--c-sky-pale);   color: var(--c-cyan); }
.pill--pink   { background: var(--c-pink-pale);  color: var(--c-pink); }
.pill--green  { background: var(--c-green-wash); color: var(--c-green-deep); }
.pill--purple { background: var(--c-purple-wash); color: var(--c-purple-deep); }
.pill--teal   { background: var(--c-teal-pale);  color: var(--c-teal); }
.pill--onDark { background: rgba(255,255,255,.14); color: var(--c-white); }

/* ——— 优势卡（设计稿 5:1215：padding 32 / 高 248 / 内文 gap 16）——— */
.adv {
  display: flex; flex-direction: column; gap: 16px;
  padding: 32px;
  background: var(--c-white);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.adv:hover { box-shadow: var(--sh-hover); transform: translateY(-4px); border-color: var(--c-brand-line); }
.adv__title { font-size: 21px; font-weight: 700; color: var(--c-ink); line-height: var(--lh-snug); }
.adv__desc  { font-size: var(--fs-body-s); color: var(--c-text); line-height: var(--lh-normal); }

/* ——— 案例卡（设计稿 5:1286：宽 356 / 高 400 / 封面 176 / 内文 padding 26）——— */
.case-card {
  display: flex; flex-direction: column;
  width: 356px; flex: none;
  background: var(--c-white);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.case-card:hover { box-shadow: var(--sh-hover); transform: translateY(-4px); border-color: var(--c-brand-line); }
/* 封面负外边距 1px：抵消卡片边框，保证封面满宽（设计稿 356×176） */
.case-card__cover { aspect-ratio: 4 / 3; margin: -1px -1px 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.case-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.case-card__cover--blue   { background: var(--g-cover-blue); }
.case-card__cover--green  { background: var(--g-cover-green); }
.case-card__cover--amber  { background: var(--g-cover-amber); }
.case-card__cover--purple { background: var(--g-cover-purple); }
.case-card__body { display: flex; flex-direction: column; gap: 10px; padding: 26px; }
.case-card__tag  { font-size: var(--fs-xs); font-weight: 700; }
.case-card__tag--blue  { color: var(--c-brand); }
.case-card__tag--green { color: var(--c-green-deep); }
.case-card__tag--amber { color: var(--c-amber-text); }
.case-card__title { font-size: var(--fs-card-s); font-weight: 700; color: var(--c-ink); }
.case-card__metric { display: flex; align-items: baseline; gap: 8px; }
.case-card__metric b { font-size: var(--fs-stat-s); font-weight: 800; color: var(--c-brand); line-height: 1.1; }
.case-card__metric span { font-size: var(--fs-xs); color: var(--c-text-2); }
.case-card__desc { font-size: var(--fs-small); color: var(--c-text); }

/* ——— 首页新闻卡（纯文字：分类 + 日期 + 标题 + 摘要 + 阅读全文）——— */
.news-card {
  display: flex; flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-card);
  box-shadow: 0 4px 6px -1px rgba(15,23,42,.06);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.news-card:hover { box-shadow: var(--sh-hover); transform: translateY(-4px); border-color: var(--c-brand-line); }
.news-card:hover .news-card__title { color: var(--c-brand); }
.news-card__body { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.news-card__meta { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); color: var(--c-text-2); }
.news-card__cat {
  flex: none; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--c-brand-soft); color: var(--c-brand);
  font-size: 12px; font-weight: 600; line-height: 1.5;
}
.news-card__date { white-space: nowrap; }
.news-card__title {
  font-size: 19px; font-weight: 700; color: var(--c-ink); line-height: var(--lh-snug);
  transition: color var(--dur) var(--ease);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 摘要只按实际行数占位：以前固定 min-height 两行 + 「阅读全文」钉底，
   短摘要的卡会在文字和链接之间裂出一块空白。 */
.news-card__desc {
  font-size: var(--fs-small); color: var(--c-text); line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card__more {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--c-brand);
}
.news-card__more img { display: block; width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.news-card:hover .news-card__more img { transform: translateX(3px); }
/* 三卡各自贴内容高度，不随最高的一张拉伸（栅格默认 stretch 会撑出空洞） */
#index-news-list { align-items: start; }
@media (max-width: 639px) {
  .news-card__body { padding: 20px; }
  .news-card__title { font-size: 17px; }
}

/* 详情页 meta 行的小胶囊（原为头条卡样式，头条撤掉后详情页仍在用） */
.tag--meta { padding: 5px 12px; font-size: 12px; font-weight: 700; }

/* ——— 新闻动态列表（左侧日期牌 + 分类 / 标题 / 摘要，不带封面）———
   注意：这套 .news-row 只用于新闻动态页列表，首页卡是 .news-card。 */
.news-list { display: flex; flex-direction: column; gap: 14px; }

.news-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 16px 14px;
  background: var(--c-white);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-card-s);
  box-shadow: 0 4px 6px -1px rgba(15,23,42,.06);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.news-row:hover { box-shadow: var(--sh-hover); transform: translateY(-2px); border-color: var(--c-brand-line); }
.news-row:hover .news-row__title { color: var(--c-brand); }
.news-row.is-hide { display: none; }

/* 日期牌：大字号「日」+ 小字「年.月」。tabular-nums 让整列数字宽度一致，
   否则「1」和「15」两张牌会一宽一窄，左边线参差。 */
.news-row__badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 8px 0; border-radius: 12px; background: var(--c-soft);
}
.news-row__badge b { font-size: 22px; font-weight: 800; line-height: 1.15; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.news-row__badge span { font-size: 11px; color: var(--c-text-2); font-variant-numeric: tabular-nums; }

.news-row__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.news-row__meta { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--c-text-2); }
.news-row__cat {
  flex: none; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--c-brand-soft); color: var(--c-brand);
  font-size: 12px; font-weight: 600; line-height: 1.5;
}
/* 日期禁止折行：窄屏下 "2026-09-05" 会在连字符处断开，与分类胶囊错行 */
.news-row__date { white-space: nowrap; }
.news-row__title {
  font-size: 16px; font-weight: 700; color: var(--c-ink); line-height: var(--lh-snug);
  transition: color var(--dur) var(--ease);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-row__desc {
  font-size: var(--fs-small); color: var(--c-text); line-height: 1.65;
  /* 摘要不足两行时也占两行高度，保证整列行高一致（1.65 em × 2） */
  min-height: 3.3em;
  /* 裁字交给这里，别在 PHP 里按字数截：clamp 会把每行填满并在右缘补省略号，
     整列末字位置就齐了。前提是 newsgen.php 的 news_desc() 喂进来的文本够填满两行
     （中文两行 ~150 字、拉丁字母 ~300，预算按最费字那档给），
     它要是退回成只给一条短摘要，右缘会重新变参差。 */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

@media (min-width: 640px) {
  .news-row { grid-template-columns: 64px minmax(0, 1fr); gap: 18px; padding: 18px; }
  .news-row__title { font-size: 17px; }
}
@media (min-width: 1024px) {
  .news-row { grid-template-columns: 76px minmax(0, 1fr); gap: 24px; padding: 20px 24px; }
  .news-row__badge { padding: 10px 0; border-radius: 14px; }
  .news-row__badge b { font-size: 26px; }
  .news-row__badge span { font-size: 12px; }
  /* 这里原先钉着 max-width: 860px。卡片内容列实测有 ~1052px（1200 栅格 − 卡内边距 48
     − 日期牌 76 − 间距 24），860 让每行右侧都空出近 200px，整列像一条窄岛浮在宽卡里。
     摘要已改成「给足两行、由 CSS 裁字」（见 newsgen.php 的 news_desc），右缘由 line-clamp
     对齐，不需要再用宽度去挡长行。 */
  .news-row__title { font-size: 18px; }
}

/* ——— 分类配色：同一分类在首页卡 / 列表行 / 详情页头恒定同色 ———
   类名由 PHP news_cat_class() 生成（静态页与列表块）和 news-detail.html 的
   catColorKey() 生成（接口渲染页），两处规则需同步。放在 .tag / .news-*__cat
   之后，靠源码顺序覆盖它们的默认蓝。 */
.cat--product  { background: var(--c-brand-pale);  color: var(--c-brand); }
.cat--release  { background: var(--c-cyan-pale);   color: var(--c-cyan); }
.cat--industry { background: var(--c-purple-wash); color: var(--c-purple-deep); }
.cat--company  { background: var(--c-green-pale);  color: var(--c-green-deep); }
.cat--notice   { background: var(--c-pink-pale);   color: var(--c-pink); }
.cat--default  { background: var(--c-soft);        color: var(--c-text-2); }

/* 分类筛选无结果时的空态 */
.news-empty {
  padding: 56px 24px; text-align: center;
  color: var(--c-text-2); font-size: var(--fs-body-s);
  background: var(--c-white); border: 1px dashed var(--c-line-2);
  border-radius: var(--r-card-s);
}
/* 隐藏统一走 [hidden]（styles.css:46 已有 display:none!important 兜底） */

/* ——— 新闻详情页（设计稿组件复用 + 正文阅读区）——— */
.article-detail {
  display: flex; flex-direction: column; gap: 28px;
  max-width: 880px; margin-inline: auto;
}
.article-detail__hd { display: flex; flex-direction: column; gap: 14px; }
.article-detail__title { font-size: 26px; font-weight: 800; color: var(--c-ink); line-height: var(--lh-snug); }
.article-detail__byline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; color: var(--c-ink-2); font-size: 14px; }
/* 作者与分类、日期同排；日期已 nowrap，作者同样不许折行断开 */
.article-detail__author { font-size: var(--fs-xs); color: var(--c-text-2); white-space: nowrap; }
.article-detail__byline a { color: var(--c-brand); text-decoration: none; }
.article-detail__byline a:hover { text-decoration: underline; }
.article-detail__sep { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--c-ink-3); vertical-align: middle; }
.article-detail__cover {
  display: none; border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--c-line-2); background: var(--c-bg);
}
.article-detail__cover img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
/* 摘要导语：位于封面横幅与正文之间的引导段 */
.article-detail__summary {
  margin: 0; font-size: 17px; line-height: 1.75; color: var(--c-ink-2);
  padding: 14px 18px; border-left: 3px solid var(--c-brand);
  background: var(--c-bg); border-radius: 0 var(--r-card) var(--r-card) 0;
}
/* 内联封面：随文章插入到摘要与正文之间 */
.article-detail__inline-cover {
  margin: 0; border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--c-line-2); background: var(--c-bg);
}
.article-detail__inline-cover img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.article-detail__body {
  font-size: var(--fs-body); color: var(--c-text); line-height: 1.8;
}
.article-detail__body > *:first-child { margin-top: 0; }
.article-detail__body p { margin: 0 0 1em; }
.article-detail__body h2 { font-size: 22px; font-weight: 700; color: var(--c-ink); margin: 1.5em 0 .6em; line-height: var(--lh-snug); }
.article-detail__body h3 { font-size: 18px; font-weight: 700; color: var(--c-ink); margin: 1.2em 0 .5em; }
.article-detail__body ul,
.article-detail__body ol { padding-left: 1.5em; margin: 0 0 1em; }
.article-detail__body ul { list-style: disc; }
.article-detail__body ol { list-style: decimal; }
.article-detail__body li { margin: .4em 0; }
.article-detail__body a { color: var(--c-brand); text-decoration: underline; }
.article-detail__body a:hover { color: var(--c-brand-deep); }
/* 正文插图：按阅读栏宽（.article-detail 上限 880）等比自适应，渲染层已按同一宽度向 OSS 要图 */
.article-detail__body img {
  display: block; max-width: 100%; width: auto; height: auto;
  margin: 1.4em auto; border-radius: var(--r-card);
  border: 1px solid var(--c-line-2); background: var(--c-bg);
}
/* ——— 详情页：返回列表胶囊按钮（文章页首）——— */
.art-back {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  padding: 6px 16px 6px 6px;
  border: 1px solid var(--c-line-2); border-radius: var(--r-pill);
  background: var(--c-white); color: var(--c-ink-3);
  font-size: var(--fs-small); font-weight: 600; line-height: 1.4; text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.art-back__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-bg-soft); color: var(--c-text-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.art-back__ico svg { width: 15px; height: 15px; }
.art-back:hover {
  color: var(--c-brand); border-color: var(--c-brand-line);
  box-shadow: var(--sh-xs); transform: translateX(-2px);
}
.art-back:hover .art-back__ico { background: var(--c-brand-pale); color: var(--c-brand); }
.art-back:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }

/* ——— 详情页：上一篇 / 下一篇 ——— */
.art-nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.art-nav__item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px; border: 1px solid var(--c-line-2); border-radius: var(--r-card-s);
  background: var(--c-white); text-decoration: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
a.art-nav__item:hover { border-color: var(--c-brand-line); box-shadow: var(--sh-xs); }
a.art-nav__item:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
/* 两栏都左对齐：以前「下一篇」整卡右对齐，两篇标题一个贴左一个贴右，
   中间空出一大块，看着像漏渲染。箭头方向本身已足够表达方向。 */
.art-nav__label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--c-text-2);
}
.art-nav__label svg { width: 14px; height: 14px; flex: none; }
.art-nav__title {
  font-size: 15px; font-weight: 700; color: var(--c-ink); line-height: 1.55;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
a.art-nav__item:hover .art-nav__title { color: var(--c-brand); }
/* 已经是第一篇 / 最后一篇：不可点，虚线留白，保持左右两栏等高不跳动 */
.art-nav__item.is-off { background: var(--c-bg); border-style: dashed; }
.art-nav__item.is-off .art-nav__label { color: var(--c-text-3); }
.art-nav__item.is-off .art-nav__title { color: var(--c-text-3); font-weight: 600; }
.art-nav__count {
  display: none; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 700; color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}
.article-empty { display: none; flex-direction: column; align-items: center; gap: 20px; text-align: center; padding: 60px 0; }
.article-empty h2 { font-size: 22px; font-weight: 700; color: var(--c-ink); }
@media (min-width: 768px) {
  .article-detail { gap: 36px; }
  .article-detail__title { font-size: 34px; }
  /* 上下篇并排 + 中间「第 x / N 篇」序号（窄屏叠成两张卡，序号收起） */
  .art-nav { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; }
  .art-nav__item { padding: 18px 20px; }
  .art-nav__count { display: flex; padding-inline: 4px; }
}
@media (min-width: 1024px) {
  .article-detail__title { font-size: 40px; }
}

/* ============================== 7. 栅格工具 ============================== */
.grid { display: grid; gap: var(--sp-card); grid-template-columns: 1fr; }
.grid--gap-s { gap: 20px; }
@media (min-width: 768px) {
  .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stack { display: flex; flex-direction: column; gap: 16px; }
.stack--s { gap: 10px; }
.stack--l { gap: 24px; }
.row { display: flex; align-items: center; gap: 14px; }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.mt-auto { margin-top: auto; }

/* 勾选要点（设计稿：6×6 圆点 / 20×20 对勾，一律 SVG） */
.list { display: flex; flex-direction: column; gap: 12px; }
.list li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-body-s); color: var(--c-text); }
.list img { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.list--dot li { align-items: center; }
.list--dot img { width: 6px; height: 6px; }
.list--onDark li { color: var(--c-brand-soft); }

/* ============================== 8. 导航 ============================== */
/* 页头 = 固定高度的「轨道」+ 里面的卡片（.hd__in）。
   滚动时只收缩卡片（高度/宽度/圆角/底色），轨道高度恒定 → 正文不会被挤得上下跳，
   这是参考站 qwenwork.cn 的做法（它是 position:fixed + 常量阈值 scrollY>56）。 */
.hd {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: flex-start;
  height: 56px; background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-line-2);
  transition: background .26s ease, border-color .26s ease;
}
/* 抽屉锁定态（site.js 给 body 加 mnav-lock）：sticky 在 position:fixed 的 body 内会失效，改 fixed 钉住视口顶 */
body.mnav-lock .hd { position: fixed; top: 0; left: 0; right: 0; }
.hd__in { display: flex; align-items: center; justify-content: space-between; height: 56px; gap: 16px;
  transition: height .32s var(--ease), margin .32s var(--ease), max-width .32s var(--ease),
              padding .32s var(--ease), border-radius .32s var(--ease),
              background .24s ease, box-shadow .32s var(--ease), border-color .24s ease; }
/* 收缩态：轨道变透明，卡片自己发光成一枚悬浮胶囊，四周露出页面内容。
   卡片宽度按「内容列 + 左右内衬」算（--hd-gutter 跟着 .wrap 的留白逐档走），
   所以只有框在动、菜单与标识的横向位置一动不动。写死 max-width 的话，
   1024–1439 这段会越滚越宽：卡片内衬比当时的容器留白还小，内容列反而被撑大。 */
.hd { --hd-pad: 12px; --hd-gutter: var(--sp-gutter-m); }
@media (min-width: 768px)  { .hd { --hd-gutter: var(--sp-gutter-t); } }
/* .wrap 的 1024 这一档当年写死 80px（没有对应令牌），这里必须跟着写死，别当成漏改 */
@media (min-width: 1024px) { .hd { --hd-gutter: 80px; } }
@media (min-width: 1280px) { .hd { --hd-gutter: var(--sp-gutter); } }
.hd.is-shrunk { background: rgba(255,255,255,0); backdrop-filter: none; border-bottom-color: transparent; }
.hd.is-shrunk .hd__in {
  height: 48px; margin-top: 4px;
  max-width: calc(min(100vw, 1440px) - (var(--hd-gutter) - var(--hd-pad)) * 2);
  padding-inline: var(--hd-pad);
  background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid var(--c-line-2); border-radius: 14px; box-shadow: var(--sh-float);
}
/* 偏好减弱动效时仍给悬浮卡片，只是不做形变动画（状态本身有用，不该一起关掉） */
@media (prefers-reduced-motion: reduce) {
  .hd, .hd__in, .hd__brand img, .hd__brand span, .hd__menu, .hd__act, .hd__cta { transition: none; }
}
/* logo 图是满幅圆形（实测 2048² 方形画布内容顶到四边，无内边距），
   所以这里的 gap 就是眼睛看到的间距 —— 10px 在 40px 图标下偏松，收到 6px。 */
.hd__brand { display: flex; align-items: center; gap: 6px; flex: none; }
.hd__brand img { width: 32px; height: 32px; object-fit: contain;
  transition: width .32s var(--ease), height .32s var(--ease); }
.hd__brand span { font-size: 17px; font-weight: 700; color: var(--c-ink); letter-spacing: -.01em;
  transition: font-size .32s var(--ease); }
.hd__menu { display: none; align-items: center; gap: 30px; position: relative;
  transition: gap .32s var(--ease); }
/* 选中下划线（site.js 注入，滑动跟随选中/悬停项） */
.hd__ul { position: absolute; left: 0; bottom: -8px; width: 0; height: 2px; border-radius: 2px;
  background: var(--c-brand); opacity: 0; pointer-events: none;
  transition: left .3s var(--ease), width .3s var(--ease), opacity .2s linear; }
.hd__menu > a, .hd__sub-btn { font-size: var(--fs-body-s); font-weight: 500; color: var(--c-text);
  display: inline-flex; align-items: center; gap: 5px; transition: color var(--dur) var(--ease); }
.hd__menu > a:hover, .hd__sub-btn:hover { color: var(--c-brand); }
.hd__menu > a.is-on, .hd__sub-btn.is-on { color: var(--c-brand); font-weight: 600; }
.hd__menu img { width: 10px; height: 10px; }
.hd__act { display: none; align-items: center; gap: 13px; flex: none;
  transition: gap .32s var(--ease); }

/* ——— 「产品服务」二级菜单（国内短信 / 国际短信，桌面下拉） ———
   触发按钮只管展开，真正的跳转交给面板里的两条链接。 */
.hd__item { position: relative; display: flex; align-items: center; }
.hd__sub-btn { cursor: pointer; white-space: nowrap; }
.hd__sub-btn img { transition: transform var(--dur) var(--ease); }
.hd__item.is-open .hd__sub-btn img { transform: rotate(180deg); }
.hd__sub {
  position: absolute; top: calc(100% + 22px); left: 50%; transform: translateX(-50%);
  width: 272px; padding: 8px; display: none; z-index: 70;
  background: var(--c-white); border: 1px solid var(--c-line-2);
  border-radius: var(--r-inner); box-shadow: var(--sh-lg);
}
/* 悬停桥：补齐触发器与面板之间的 22px 空隙，鼠标下移时不会先触发关闭 */
.hd__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }
.hd__item.is-open .hd__sub { display: block; }
.hd__sub a { display: flex; flex-direction: column; gap: 3px; padding: 11px 14px;
  border-radius: 10px; transition: background var(--dur) var(--ease); }
.hd__sub a span { font-size: var(--fs-small); font-weight: 600; color: var(--c-ink); }
.hd__sub a em { font-style: normal; font-size: var(--fs-xs); color: var(--c-text-2); line-height: 1.5; }
.hd__sub a:hover { background: var(--c-brand-pale); }
.hd__sub a:hover span { color: var(--c-brand); }

/* 语言切换胶囊（设计稿：100×36 / r999 / #F1F5F9 底 / padding 8 12 8 14 / gap 8） */
.lang-wrap { position: relative; }
.lang { display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px 8px 14px; border-radius: var(--r-pill);
  background: var(--c-soft); font-size: var(--fs-small); color: var(--c-ink-3); }
.lang img:first-child { width: 16px; height: 16px; }
.lang img:last-child  { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
/* 箭头跟着面板开合翻转：与「产品服务」二级菜单同一套口径（is-open 由 site.js 切，
   点空白处收起也走同一个类，所以折叠时箭头会自己转回去）。 */
.lang-wrap.is-open .lang img:last-child { transform: rotate(180deg); }
.lang__list { position: absolute; top: calc(100% + 8px); right: 0; min-width: 148px;
  background: var(--c-white); border: 1px solid var(--c-line-2); border-radius: var(--r-inner);
  box-shadow: var(--sh-lg); padding: 6px; display: none; z-index: 70; }
/* 悬停桥：胶囊与面板之间那 8px 缝。改成「鼠标轻触即展开」后，指针从胶囊下移进面板必然
   穿过这条缝，没有桥的话经过的瞬间 mouseleave 就把它收掉了（以前点击展开走不到这条路）。
   与 .hd__sub::before 同一做法，多出的 2px 压进胶囊底边，两头不断。 */
.lang__list::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.lang-wrap.is-open .lang__list { display: block; animation: langIn var(--dur) var(--ease); }
/* 面板与箭头同时动，点击才有「展开」的整体感。只动 opacity/transform，不碰布局属性。
   display 从 none→block 会重放 animation，所以每次点开都有、不用 JS 配合。 */
@keyframes langIn { from { opacity: 0; transform: translateY(-4px); } }
/* 减弱动效偏好：箭头不再转动、面板不再淡入，但展开状态本身照旧（transform 由 is-open
   类算出，去掉的只是过渡与动画，不是功能）。与页头收缩卡同一口径。 */
@media (prefers-reduced-motion: reduce) {
  .lang img:last-child { transition: none; }
  .lang-wrap.is-open .lang__list { animation: none; }
}
.lang__list a { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: 10px; font-size: var(--fs-small); color: var(--c-ink-3); }
.lang__list a:hover { background: var(--c-bg); }
.lang__list a.is-on { background: var(--c-brand-pale); color: var(--c-brand); font-weight: 600; }
.lang__list img { width: 14px; height: 14px; }
.lang__list img { display: none; }          /* 勾选图标：仅当前语言显示（设计稿 11:61） */
.lang__list a.is-on img { display: block; }

.hd__link { font-size: var(--fs-body-s); font-weight: 500; color: var(--c-text); }
.hd__link:hover { color: var(--c-brand); }
.hd__cta { padding: 10px 20px; border-radius: var(--r-btn); background: var(--c-brand);
  color: var(--c-white); font-size: var(--fs-small); font-weight: 600; box-shadow: var(--sh-brand);
  transition: padding .32s var(--ease), background var(--dur) var(--ease); }
.hd__cta:hover { background: var(--c-brand-deep); }

/* 汉堡按钮 —— 触摸目标 44×44（iOS HIG 最小可点区），touch-action 消掉双击缩放等待 */
.burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; align-items: center;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--c-ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.burger.is-on span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-on span:nth-child(2) { opacity: 0; }
.burger.is-on span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 导航由汉堡切换为完整横向菜单的临界点。
   原来设在 1024：5 个菜单项时刚好放得下；加入第 6 项「关于我们」后，
   1024–1100 之间会挤到菜单项折行（实测富余 0–6px），故上移到 1120。
   1120 以下走汉堡抽屉（.mnav），页头也是 56px 的紧凑态。 */
@media (min-width: 1120px) {
  .hd { height: 80px; }
  .hd__in { height: 80px; }
  .hd__brand img { width: 40px; height: 40px; }
  .hd__brand span { font-size: 20px; }
  .hd__menu { display: flex; }
  .hd__act { display: flex; }
  .burger { display: none; }
  /* 收缩态桌面：卡片 64 高、上下各留 8px 缝，菜单与标识同步收紧，
     才是他要的「下拉自动缩短」而不是只换个底色。
     宽度不写死：只把内衬升到 18，卡片宽度仍由 --hd-gutter 公式从内容列推出来。
     （以前这里硬写 max-width: min(1236px, 100vw - 32px)，在 1024–1439 那段会让
       卡片内容列比静止时宽最多 140px —— 一滚动菜单反而散开。） */
  .hd { --hd-pad: 18px; }
  .hd.is-shrunk .hd__in {
    height: 64px; margin-top: 8px;
    border-radius: 16px;
  }
  .hd.is-shrunk .hd__brand img { width: 34px; height: 34px; }
  .hd.is-shrunk .hd__brand span { font-size: 18px; }
  .hd.is-shrunk .hd__menu { gap: 24px; }
  .hd.is-shrunk .hd__act { gap: 10px; }
  .hd.is-shrunk .hd__cta { padding: 8px 16px; }
}

/* 移动抽屉 —— 真机「点不动」的三条铁律（都踩过，别回退）
   1) 定位展开写 top/right/bottom/left，**不要用 inset 简写**：inset 是 2021 年才普及的语法
      （Safari 14.1+ / Chromium 87+）。老 Android WebView、老版本微信 X5 内核会整条声明作废，
      抽屉退化成「静态位置 + shrink-to-fit 宽度」，会在屏幕右侧残留几十像素；它 z-index:90
      高于页头（60），正好压住汉堡按钮 → 表现就是「点什么都没反应」。
      同时补 width:100%，避免任何定位异常时宽度被收缩。
   2) 收起态必须同时带 visibility:hidden + pointer-events:none。只靠 translateX(100%) 移出屏外，
      元素仍参与命中测试，iOS 上会吞掉落在它身上的点击（幽灵遮挡），也会进 Tab 焦点顺序。
   3) 触摸目标加 touch-action:manipulation，消掉 iOS 的双击缩放等待。 */
.mnav { position: fixed; top: 56px; right: 0; bottom: 0; left: 0; width: 100%; z-index: 90;
  background: var(--c-white); padding: 16px 20px 40px; overflow-y: auto;
  /* 全覆盖：dvh 跟随手机地址栏伸缩的动态视口，抽屉永远铺到屏幕底；
     contain 阻断抽屉自身滑到边界时带滚背后页面 */
  height: calc(100dvh - 56px); overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: transparent;
  visibility: hidden; pointer-events: none;
  transform: translateX(100%); -webkit-transform: translateX(100%);
  transition: transform var(--dur) var(--ease), -webkit-transform var(--dur) var(--ease),
              visibility 0s linear var(--dur); }
.mnav.is-open { transform: translateX(0); -webkit-transform: translateX(0);
  visibility: visible; pointer-events: auto;
  transition: transform var(--dur) var(--ease), -webkit-transform var(--dur) var(--ease),
              visibility 0s; }
.mnav__list { display: flex; flex-direction: column; }
.mnav__list > a, .mnav__sub-btn { display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 16px 4px; font-size: var(--fs-lead); font-weight: 500; color: var(--c-ink);
  border-bottom: 1px solid var(--c-line-2); text-align: left;
  cursor: pointer; touch-action: manipulation; -webkit-touch-callout: none; }
.mnav__list > a.is-on { color: var(--c-brand); font-weight: 600; }
.mnav__list img { width: 10px; height: 10px; }
.mnav__foot { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; }

/* 移动抽屉 · 「产品服务」手风琴（国内短信 / 国际短信） */
.mnav__item { display: flex; flex-direction: column; }
.mnav__sub-btn { cursor: pointer; }
/* 移动抽屉二级菜单箭头：真机反馈 10px 太小，放大为 30px 圆形触达区（内含 14px 图标） */
.mnav__sub-btn img { width: 30px; height: 30px; padding: 8px; box-sizing: border-box;
  border-radius: 50%; background: var(--c-soft); transition: transform var(--dur) var(--ease); }
.mnav__item.is-open .mnav__sub-btn img { transform: rotate(180deg); }
.mnav__item.is-open .mnav__sub-btn { color: var(--c-brand); font-weight: 600; }
.mnav__sub { display: none; flex-direction: column; padding: 4px 0 12px 14px;
  border-bottom: 1px solid var(--c-line-2); }
.mnav__item.is-open .mnav__sub { display: flex; }
.mnav__sub a { display: flex; align-items: center; min-height: 44px; padding: 10px 4px 10px 12px;
  font-size: var(--fs-body-s); font-weight: 500; color: var(--c-text-2);
  cursor: pointer; touch-action: manipulation; -webkit-touch-callout: none; }
.mnav__sub a.is-on { color: var(--c-brand); font-weight: 600; }
.mnav__sub a:hover { color: var(--c-brand); }

/* 移动抽屉 · 语言切换（设计稿移动画板未覆盖导航栏，按桌面「语言 → 登录 → 免费注册」同组补在抽屉内） */
.mnav__lang { display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px;
  border-bottom: 1px solid var(--c-line-2); }
.mnav__lang-hd { display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-xs); color: var(--c-text-2); }
.langchips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.langchip { display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 40px; border-radius: var(--r-pill); background: var(--c-soft);
  font-size: var(--fs-small); font-weight: 500; color: var(--c-ink-3);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.langchip:hover { background: var(--c-line-2); }
.langchip.is-on { background: var(--c-brand-pale); color: var(--c-brand); font-weight: 600; }
.langchip img { display: none; width: 12px; height: 12px; }
.langchip.is-on img { display: block; }
@media (min-width: 1120px) { .mnav { display: none; } }

/* ============================== 9. Hero / 页头 / 指标带 ============================== */
.hero { position: relative; overflow: hidden; background: var(--c-brand-pale); padding-block: 40px; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* 移动端背景块增高 20px：下沿多出渐变区，缓解小屏标题贴底 */
@media (max-width: 1023.98px) { .hero__bg { height: calc(100% + 20px); } }
/* 桌面底纹按设计稿 1440×760 铺，但**只能当下限不能钉死**：
   中文首屏高 698，760 的底纹多出 62px 由 overflow 裁掉，看着一切正常；
   英文/印地语同一句副标题要多换两三行，hero 被撑到 800+，钉死的底纹就在指标带上方
   露出一条 .hero 自己的底色（--c-brand-pale #EFF6FF，几乎白），就是那条白色空带。
   height:100% 让底纹跟着内容长，min-height 保住中文下的既有取景（两者取大＝原样）。 */
@media (min-width: 1024px) { .hero__bg { height: 100%; min-height: 760px; } }
.hero__in { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 36px; align-items: center; }
.hero__copy { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.hero__title { font-size: 32px; font-weight: 800; line-height: 1.18; color: var(--c-ink); letter-spacing: -.02em; }
.hero__title em { font-style: normal; color: var(--c-brand); }
.hero__sub { font-size: var(--fs-lead); color: var(--c-text); }
.hero__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hero__metric b { display: block; font-size: 18px; font-weight: 700; color: var(--c-brand); line-height: 1.2; }
.hero__metric > span { font-size: 11px; color: var(--c-text-2); }
/* Hero 视觉舞台（设计稿 5:1001 · 540×476，--hs 为等比缩放系数） */
.hero__art { position: relative; flex: none; --hs: .48;
  width: calc(540px * var(--hs)); height: calc(476px * var(--hs)); }
.hero__stage { position: absolute; left: 0; top: 0; width: 540px; height: 476px;
  transform: scale(var(--hs)); transform-origin: top left; }

/* 移动端 Hero（设计稿 97:16）：无地球配图；徽标蓝点 + 12.5 蓝字；按钮 46 高 r10 */
@media (max-width: 767px) {
  .hero__art { display: none; }
  .hero__badge { padding: 7px 14px; font-size: 12.5px; color: var(--c-brand); }
  .hero__dot { width: 7px; height: 7px; background: var(--c-brand); }
  .btns { gap: 10px; }
  .btns .btn { height: 46px; padding: 0 22px; border-radius: 10px; font-size: 15px; }
}
@media (min-width: 768px) {
  .hero { padding-block: 80px 84px; }
  .hero__title { font-size: 42px; }
  .hero__art { --hs: .63; }
}
@media (min-width: 1024px) {
  .hero { padding-block: 118px 96px; }
  .hero__in { flex-direction: row; align-items: center; gap: 64px; }
  .hero__copy { width: 596px; gap: 26px; flex: none; }
  .hero__title { font-size: var(--fs-hero); }
  .hero__art { --hs: 1; }
}

/* 内页页头（原设计稿 #EFF6FF 平涂 / 390 高）
   背景升级为：品牌蓝浅渐层 + 极淡格子底纹 + 顶部柔光。
   图层顺序全部显式声明 —— ::before(柔光, z0) < ::after(格子, z1) < .phead__in(内容, z2)。
   两个伪元素都 pointer-events:none 且不参与布局，页头高度与间距不变；
   文字仍是深色（--c-ink / --c-text），可读性不受影响。 */
.phead {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #F7FBFF 0%, #E9F2FE 54%, #DFECFD 100%);
  padding-block: 52px 48px;
}
/* 顶部柔光：把标题从底纹里「抬」起来 */
.phead::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(118% 84% at 50% -8%, rgba(59,130,246,.17) 0%, rgba(59,130,246,0) 62%);
}
/* 格子底纹：26px 方格、蓝 4% 透明度（刻意压淡，只作肌理不作表格），
   底部渐隐以免与下方区块形成硬边 */
.phead::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(37,99,235,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(37,99,235,.04) 1px, transparent 1px);
  background-size: 26px 26px;
  background-position: center top;
  -webkit-mask-image: linear-gradient(180deg,#000 0%,#000 42%,rgba(0,0,0,.26) 74%,transparent 100%);
          mask-image: linear-gradient(180deg,#000 0%,#000 42%,rgba(0,0,0,.26) 74%,transparent 100%);
}
.phead__in { position: relative; z-index: 2; display: flex; flex-direction: column;
  gap: 16px; text-align: center; align-items: center; }
.phead__title { font-size: 30px; font-weight: 800; color: var(--c-ink); line-height: var(--lh-tight); }
@media (min-width: 1024px) {
  .phead { padding-block: 76px 68px; }
  .phead::after { background-size: 44px 44px; }   /* 桌面格子放大，视觉密度与移动端一致 */
  .phead__title { font-size: var(--fs-h1); }
  .phead__in { gap: 20px; }
}

/* 指标带（设计稿 5:1043：padding 18/120，gap 40，135° 三段蓝） */
.band { position: relative; overflow: hidden; background-image: var(--g-band); }
.band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.band__in { position: relative; z-index: 1; display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; padding-block: 18px; }
@media (min-width: 768px) { .band__in { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 40px; } }
/* 数值与标签在各自栅格列内居中——与 solutions 页 .results .stat 的写法保持一致；
   此前只有 .results 带了居中，首页 .band 漏了，看上去 4 组数据都贴左。 */
.stat { display: flex; flex-direction: column; gap: 4px; text-align: center; align-items: center; }
.stat__v { font-size: 26px; font-weight: 900; color: var(--c-white); line-height: 1.1; }
.stat__l { font-size: var(--fs-2xs); font-weight: 500; color: var(--c-brand-soft); }
@media (min-width: 1024px) { .stat__v { font-size: var(--fs-stat); } .stat__l { font-size: var(--fs-small); } }

/* ============================== 10. 横滑轨道 ============================== */
/* 横滑轨道：直接挂在 .sec 下（不在 .wrap 内），因此自己复刻 .wrap 的
   居中 + gutter 规则，保证第一张卡与上方内容左对齐，右侧自然出血。 */
.track { display: flex; gap: var(--sp-card); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  width: 100%; max-width: 1440px; margin-inline: auto;
  padding-inline: var(--sp-gutter-m);
  scrollbar-width: none; }
.track::-webkit-scrollbar { display: none; }
.track > * { scroll-snap-align: start; }
@media (min-width: 768px) { .track { padding-inline: var(--sp-gutter-t); } }
@media (min-width: 1024px) { .track { padding-inline: 80px; } }
@media (min-width: 1280px) { .track { padding-inline: var(--sp-gutter); } }

/* ============================== 11. 分段控件 / 分页 ============================== */
/* 英文/印地语标签更长时允许横向滚动，而不是撑破容器（滚动条隐藏，观感不变） */
.seg { display: inline-flex; gap: 6px; padding: 5px; background: var(--c-white);
  max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--c-line-2); border-radius: var(--r-pill); box-shadow: var(--sh-xs); }
.seg::-webkit-scrollbar { display: none; }
.seg button { padding: 9px 20px; border-radius: var(--r-pill); font-size: var(--fs-small);
  font-weight: 500; color: var(--c-text); transition: all var(--dur) var(--ease); white-space: nowrap; }
.seg button:hover { color: var(--c-brand); }
.seg button.is-on { background: var(--c-brand); color: var(--c-white); font-weight: 600; }
.seg--underline { gap: 24px; padding: 0; background: none; border: 0; box-shadow: none;
  border-radius: 0; border-bottom: 1px solid var(--c-line-2); }
.seg--underline button { border-radius: 0; padding: 0 0 14px; font-size: var(--fs-body-s); }
.seg--underline button.is-on { background: none; color: var(--c-brand); box-shadow: inset 0 -2px 0 var(--c-brand); }
.seg--scroll { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg--scroll::-webkit-scrollbar { display: none; }
/* 页头分类选项卡（新闻动态页）：窄屏横向滚动，按钮不压缩 —— 中文 5 个标签在 390px 就放不下，
   英/印地语标签更长，压字号会挤成两行；滚动兜底是既有行为，加栏目时不必回来改这里。 */
.phead .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.phead .seg::-webkit-scrollbar { display: none; }
.phead .seg button { flex: none; white-space: nowrap; }
/* 小屏把标签收紧，让中文 5 个分类尽量少滚（放不下仍走上面的横向滚动兜底） */
@media (max-width: 480px) {
  .phead .seg button { padding: 8px 13px; font-size: 13px; }
}

.pager { display: flex; align-items: center; justify-content: center; gap: 8px; }
.pager button { min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--r-btn);
  border: 1px solid var(--c-line-2); background: var(--c-white); font-size: var(--fs-small);
  color: var(--c-text); display: inline-flex; align-items: center; justify-content: center; }
.pager button:hover { border-color: var(--c-brand-line); color: var(--c-brand); }
.pager button.is-on { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-white); font-weight: 600; }
.pager img { width: 16px; height: 16px; }
/* 功能性分页（新闻页 .pager[data-pager-target]）：左侧条数统计 + 右侧页码条。
   页码条最多 7 个槽位，页数多时用 .pager__gap 折叠（1 … 4 5 6 … 20）。 */
.pager[data-pager-target] { justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.pager__info { margin: 0; font-size: var(--fs-small); color: var(--c-text-2); }
.pager__info:empty { display: none; }
.pager__pages { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pager__gap { min-width: 24px; text-align: center; color: var(--c-text-3); user-select: none; }
.pager button[disabled] { opacity: .45; cursor: not-allowed; }
.pager button[disabled]:hover { border-color: var(--c-line-2); color: var(--c-text); }
/* hidden 属性必须能压住上面的 display:flex，否则无脚本时会出现两个空箭头按钮 */
.pager[hidden], .pager__pages[hidden] { display: none !important; }
@media (max-width: 640px) {
  .pager[data-pager-target] { justify-content: center; }
  .pager__info { width: 100%; text-align: center; }
}

/* ============================== 12. 控制台窗口 / 代码块 ============================== */
.mock { border-radius: var(--r-block); overflow: hidden; background: var(--c-white);
  border: 1px solid var(--c-line-2); box-shadow: var(--sh-lg); }
/* 窗口标题栏（设计稿 33:1473：46 高 / #F8FAFC / padding 0-18 / gap 10
   = 3 个 10×10 红黄绿圆点 + 白底地址栏（圆角 8 / padding 7-14 / gap 8：12×12 锁 + 12px 地址） */
.mock__bar { display: flex; align-items: center; gap: 10px; padding: 0 18px; height: 46px;
  background: #F8FAFC; border-bottom: 1px solid var(--c-line-2); }
.mock__dots { display: flex; gap: 10px; flex: none; }
.mock__dots i { width: 10px; height: 10px; border-radius: 50%; }
.mock__dots i:nth-child(1) { background: #FCA5A5; }
.mock__dots i:nth-child(2) { background: #FCD34D; }
.mock__dots i:nth-child(3) { background: #6EE8B7; }
.mock__url { flex: 1; display: flex; align-items: center; gap: 8px;
  font-family: var(--f-en); font-size: 12px; color: #94A3B8;
  background: var(--c-white); border-radius: 8px; padding: 7px 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock__url img { width: 12px; height: 12px; flex: none; }
.mock__body { padding: 0; }
.mock__body img { width: 100%; height: auto; display: block; }
.mock__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; padding: 18px; }
.mock__cell { padding: 16px; border-radius: var(--r-chip); background: var(--c-bg); }
.mock__cell b { display: block; font-size: 22px; font-weight: 800; color: var(--c-brand); }
.mock__cell span { font-size: var(--fs-2xs); color: var(--c-text-2); }

/* 代码卡（设计稿 5:2655：深色卡 #0F172A 圆角 20；代码栏 #141E31 padding 18-24） */
.mock--code { background: var(--c-ink); border: 0; }
.mock__bar--code { background: #141E31; border-bottom: 0; padding: 18px 24px; }
.mock__bar--code .mock__dots { gap: 8px; }
.mock__bar--code .mock__dots i:nth-child(1) { background: #EF4444; }
.mock__bar--code .mock__dots i:nth-child(2) { background: #F59E0B; }
.mock__bar--code .mock__dots i:nth-child(3) { background: #10B981; }
.mock__lang { padding: 5px 12px; border-radius: 999px; background: #1E293B;
  font-family: var(--f-en); font-size: 12px; font-weight: 600; color: #94A3B8; line-height: 1.2; }

.code { background: var(--c-ink); border-radius: var(--r-inner); padding: 24px 28px 28px;
  overflow-x: auto; font-family: var(--f-code); font-size: 14px;
  line-height: 1.7; color: #E2E8F0; }
.code pre { margin: 0; white-space: pre; }
.code .k { color: #93C5FD; }
.code .s { color: #6EE7B7; }
.code .c { color: #64748B; }

/* ============================== 13. 表格 / 规格表 ============================== */
/* 设计稿 33:738「解决方案 · 行业落地表」：外层 r20、**无描边无投影**；
   表头底 #F1F5F9、数据行 白 ↔ #F8FAFC 交替、行间无分隔线；
   第 3 列表头为品牌蓝高亮、其单元格 #334155。
   桌面精确几何（表头 64 / 数据行 76 / 左右 36）见第 26 节校准层。 */
.table-wrap { overflow-x: auto; border-radius: 20px; }
.table { width: 100%; min-width: 720px; font-size: var(--fs-body-s); border-collapse: collapse; }
.table th, .table td { padding: 16px 20px; text-align: left; vertical-align: middle; }
.table th { background: var(--c-bg-soft); font-size: var(--fs-small); font-weight: 500;
  color: var(--c-text); white-space: nowrap; }
.table th:first-child, .table td:first-child { width: 200px; }
.table th:nth-child(3) { color: var(--c-brand); }
.table td { color: var(--c-text); }
.table td:nth-child(3) { color: var(--c-ink-3); }
.table tbody tr:nth-child(even) td { background: var(--c-bg); }
.table b { color: var(--c-ink); font-weight: 600; }
.table code { font-family: var(--f-code); font-size: 13px; color: var(--c-ink-3); white-space: nowrap; }

/* 开发者页 · 错误码两表并排：紧凑变体
   覆盖 .table 为「解决方案 · 行业落地表」调好的 720 最小宽与 200px 首列，
   否则放进 grid--2 会横向溢出。 */
/* 左内距 16px 不是排版偏好，是必须的：.table-wrap 带 20px 圆角 + overflow:auto，
   caption 若与容器左上角齐平，首字会被圆角斜切掉一角（像素级 A/B 可验证）。
   16px 同时也让标题与 .table--compact 的首列文字对齐。 */
.table caption { padding: 0 0 12px 16px; text-align: left;
  font-size: var(--fs-body-s); font-weight: 700; color: var(--c-ink); }
.table--compact { min-width: 0; }
.table--compact th, .table--compact td { padding: 11px 16px; }
.table--compact th:first-child, .table--compact td:first-child { width: 104px; }
.table--compact td:first-child code { color: var(--c-brand); font-weight: 600; }
.table--compact td:nth-child(2) { font-size: var(--fs-2xs); line-height: 1.55; white-space: normal; }
.table--compact th:nth-child(3), .table--compact td:nth-child(3) { color: inherit; }

/* 鉴权卡内的小代码块：复用 .code 深色底，去掉大留白与滚动 */
.code--slim { padding: 14px 16px; font-size: 13px; max-height: none;
  border-radius: var(--r-chip); overflow-x: auto; }
.sec__note { font-size: var(--fs-small); color: var(--c-text-2); line-height: var(--lh-normal); }

/* ============================== 14. 表单 ============================== */
.form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: var(--fs-small); font-weight: 500; color: var(--c-ink-3); }
.field label i { font-style: normal; color: var(--c-danger); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 16px; border: 1px solid var(--c-line);
  border-radius: var(--r-btn); background: var(--c-white); font-size: var(--fs-small);
  color: var(--c-ink); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.field input::placeholder, .field textarea::placeholder { color: var(--c-text-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.field textarea { min-height: 120px; resize: vertical; }
.form__tip { font-size: var(--fs-xs); color: var(--c-text-2); }
.form__tip--ok { color: var(--c-green-deep); }
.form__tip--err { color: var(--c-danger); }

/* ============================== 15. FAQ ============================== */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq details { background: var(--c-white); border: 1px solid var(--c-line-2);
  border-radius: var(--r-inner); box-shadow: var(--sh-xs); overflow: hidden; }
.faq details[open] { border-color: var(--c-brand-line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; font-size: var(--fs-body-s); font-weight: 600; color: var(--c-ink);
  cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 10px; height: 10px; flex: none;
  border-right: 2px solid var(--c-text-2); border-bottom: 2px solid var(--c-text-2);
  transform: rotate(45deg); transition: transform var(--dur) var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq p { padding: 0 22px 22px; font-size: var(--fs-small); color: var(--c-text); }

/* ============================== 16. 关于我们 / 小卡 ============================== */
.about-art { padding: 20px; background: var(--c-white); border: 1px solid var(--c-line-2);
  border-radius: var(--r-card); box-shadow: var(--sh-card); }
.about-art img { width: 100%; height: auto; }
@media (min-width: 1024px) { .about-art { padding: 32px; } }

.about-split { display: flex; flex-direction: column; gap: 36px; }
.about-split__copy { display: flex; flex-direction: column; gap: 20px; }
/* 左栏正文是 flex 列，默认 stretch 会把胶囊标签拉成整行色带；标签按内容宽靠左 */
.about-split__copy > .tag { align-self: flex-start; }
@media (min-width: 1024px) {
  .about-split { flex-direction: row; align-items: center; gap: 80px; }
  .about-split__copy { width: 600px; flex: none; }
  .about-split .about-art { width: 520px; flex: none; }
}

.mini-card { display: flex; flex-direction: column; gap: 12px; padding: 26px;
  background: var(--c-white); border: 1px solid var(--c-line-2); border-radius: var(--r-card);
  box-shadow: var(--sh-card); transition: box-shadow var(--dur) var(--ease),
  transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.mini-card:hover { box-shadow: var(--sh-hover); transform: translateY(-4px); border-color: var(--c-brand-line); }
.mini-card__year { font-size: var(--fs-h4); font-weight: 800; color: var(--c-brand); }
.mini-card__title { font-size: var(--fs-card-s); font-weight: 700; color: var(--c-ink); }
.mini-card__desc { font-size: var(--fs-small); color: var(--c-text); }

/* ============================== 17. CTA ============================== */
/* 设计稿 5:1509：135° #2563EB→#1D4ED8，padding 88/120，gap 22，居中对齐 */
.cta { position: relative; overflow: hidden; background-image: var(--g-brand); }
.cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cta__in { position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: center; gap: 20px; text-align: center; padding-block: 44px; }
.cta__title { font-size: 26px; font-weight: 800; color: var(--c-white); line-height: var(--lh-tight); }
.cta__sub { font-size: var(--fs-body-s); color: var(--c-brand-soft); max-width: 720px; }
.cta__note { font-size: var(--fs-xs); color: var(--c-brand-line); }
.cta .btns { width: 100%; }
@media (min-width: 768px) { .cta .btns { width: auto; } }
@media (min-width: 1024px) {
  .cta__in { padding-block: 44px; gap: 22px; }
  .cta__title { font-size: var(--fs-h1); }
  .cta__sub { font-size: var(--fs-lead); }
}

/* ============================== 18. 页脚 ============================== */
/* 设计稿 5:1527：#0F172A 底，padding 72/120/36，gap 36 */
.ft { background: var(--c-ink); color: var(--c-on-dark-3); position: relative; overflow: hidden; }
/* 页脚水印字标：一个超大半透明 NEXTSMS 压在内容之下。
   overflow:hidden 是防一手：字体回落成更宽的字面时，nowrap 的大字会横向溢出，
   页脚不该为此给整页添一条横向滚动条。
   opacity 只给 .08——再亮就压过 #94A3B8 的链接文字，页脚会读起来发脏。

   字号按「NEXTSMS 整词宽 = 4.82 × font-size」换算（2026-10-17 从他截图量的：
   17vw 时墨迹宽 2408/2940 = 81.9%，字高反推 cap/em = 0.726，与 SF Pro / Inter 的 0.714~0.727 吻合，
   两组独立测量同指一个系数）。页脚实测 1470×478 CSS px，要「铺满」即整词顶到左右两边：
   1470 ÷ 4.82 = 305px = 20.75vw，所以给 21vw —— 多出的一成让字距边缘真正贴住，
   溢出部分由 .ft 的 overflow:hidden 裁掉，不出横向滚动条。
   上限 400px 要到 1905px 宽视口才接管，常见笔记本档位拿到的都是 vw 缩放值。
   注意：这是「不切字母」的上限。再往上就是拿 NEXTSMS 的头尾字母换高度，
   想连页脚高度一起铺满得 658px（=478÷0.726），那时整词会宽到 3172px，两头各少约一个字。 */
.ft__mark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--f-en); font-weight: 800; font-size: min(21vw, 400px);
  line-height: 1; letter-spacing: -.02em; white-space: nowrap;
  color: var(--c-white); opacity: .08;
  z-index: 0; pointer-events: none; user-select: none;
}
.ft__in { display: flex; flex-direction: column; gap: 32px; padding-block: 52px 28px;
  position: relative; z-index: 1; }
.ft__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px 24px; }
.ft__brand { display: flex; flex-direction: column; gap: 16px; grid-column: 1 / -1; }
.ft__logo { display: flex; align-items: center; gap: 10px; }
.ft__logo img { width: 40px; height: 40px; object-fit: contain; }
.ft__logo b { font-size: 19px; font-weight: 700; color: var(--c-white); }
.ft__desc { font-size: var(--fs-small); color: var(--c-on-dark-4); line-height: var(--lh-normal); max-width: 330px; }
.ft__col h4 { font-size: var(--fs-body-s); font-weight: 600; color: var(--c-white); margin-bottom: 16px; }
.ft__col ul { display: flex; flex-direction: column; gap: 12px; }
.ft__col a { font-size: var(--fs-small); color: var(--c-on-dark-3); transition: color var(--dur) var(--ease); }
.ft__col a:hover { color: var(--c-white); }
.ft__rule { height: 1px; background: var(--c-ink-2); }
.ft__bar { display: flex; flex-direction: column; gap: 14px; font-size: var(--fs-2xs); color: var(--c-on-dark-4); }
/* 备案号链到工信部备案系统，与页脚其它链接同色，hover 才变白并加下划线 */
.ft__bar a { color: var(--c-on-dark-3); transition: color var(--dur) var(--ease); }
.ft__bar a:hover { color: var(--c-white); text-decoration: underline; }
/* 第三方统计页脚条：CNZZ/爱站图标由各自代码占位在站内渲染（site.js 从 api/stats.php 注入） */
.ft__stats { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: var(--fs-2xs); opacity: .8; }
.ft__stats a { color: var(--c-on-dark-3); text-decoration: none; }
.ft__stats a:hover { color: var(--c-white); text-decoration: underline; }
.ft__stats img, .ft__stats span { vertical-align: middle; }
/* 备案号整串不拆行（"闽ICP备17008973号-43" 在窄屏会被断成两行） */
.ft__beian { white-space: nowrap; }
/* 友情链接：内容由后台写进 <!--LINKS-MANAGED-*--> 两个标记之间（同 SEO 托管块套路），
   所以这里只负责排版：一行放不下就换行，字色与底栏同档，别比备案号更抢眼。 */
.ft__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  margin-bottom: 20px; font-size: var(--fs-2xs); color: var(--c-on-dark-4); }
.ft__links__label { color: var(--c-on-dark-4); }
.ft__links a { color: var(--c-on-dark-3); text-decoration: none; transition: color var(--dur) var(--ease); }
.ft__links a:hover { color: var(--c-white); text-decoration: underline; }
@media (min-width: 768px) { .ft__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 60px; } }
@media (min-width: 1024px) {
  .ft__in { gap: 36px; padding-block: 72px 36px; }
  .ft__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; }
  .ft__bar { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; }
}

/* ============================== 19. 客服浮窗 ============================== */
.support { position: fixed; right: 20px; bottom: 20px; z-index: 80; }
.support__btn { position: relative; display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; background-image: linear-gradient(135deg, #E60012, #C7000B);
  /* 立体双层外影：接触影（紧贴底部、深而小）+ 环境影（华为红大范围柔影） */
  box-shadow: 0 5px 10px -4px rgba(90,0,5,.55), 0 18px 36px -8px rgba(199,0,11,.42);
  color: var(--c-white); transition: transform var(--dur) var(--ease);
  perspective: 340px; /* 头像 3D 摆动的景深源 */ }
.support__btn:hover { transform: translateY(-3px); }
/* 弹开面板时收起悬浮按钮（按钮与面板不共存），收起后面板回到右下角 */
.support.is-open .support__btn { display: none; }
.support__btn svg { width: 26px; height: 26px; }
/* AI 女客服头像：球面立体感（左上内高光 + 右下内投影 + 白边描圈）+ 缓慢 3D 摆动动效 */
.support__ava { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%; border: 2px solid rgba(255,255,255,.92); box-sizing: border-box;
  box-shadow: 0 0 0 3px rgba(255,255,255,.16),
    inset 0 -9px 15px rgba(0,0,0,.26), inset 0 7px 12px rgba(255,255,255,.3);
  transform-style: preserve-3d; animation: supportAvaSway 5.5s ease-in-out infinite; }
@keyframes supportAvaSway {
  0%, 100% { transform: rotateY(10deg) rotateX(3deg) scale(1); }
  50% { transform: rotateY(-10deg) rotateX(3deg) scale(1.04); } }
/* 光圈第一层（::before）：旋转彗尾——锥形渐变拖尾被径向 mask 薄薄削成圆环，随 drop-shadow 发红光 */
.support__btn::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; z-index: 0;
  pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 52%, rgba(199,0,11,.06) 58%, rgba(230,0,18,.9) 84%, #ff5c5c 93%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  filter: drop-shadow(0 0 6px rgba(230,0,18,.55));
  animation: supportComet 2.6s linear infinite; }
@keyframes supportComet { to { transform: rotate(360deg); } }
/* 光圈第二层（::after）：呼吸脉冲环——红描边圆环从头像边缘向外扩张消散 */
.support__btn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 0;
  pointer-events: none; border: 2px solid rgba(199,0,11,.55);
  animation: supportPulse 2.4s ease-out infinite; }
@keyframes supportPulse { 0% { transform: scale(1); opacity: .95; } 70% { opacity: 0; } 100% { transform: scale(1.85); opacity: 0; } }
/* 玻璃球高光：覆盖在头像上的固定光源（独立层，把两个伪元素让给光圈），不拦截点击 */
.support__glare { position: absolute; inset: 0; border-radius: 50%; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.42), rgba(255,255,255,.08) 40%, transparent 58%); }
@media (prefers-reduced-motion: reduce) { .support__btn::before, .support__btn::after { animation: none; display: none; } .support__ava { animation: none; } }
.support__badge { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px;
  padding: 0 5px; border-radius: var(--r-pill); background: var(--c-danger); color: var(--c-white);
  font-family: var(--f-en); font-size: 11px; font-weight: 700; display: flex;
  align-items: center; justify-content: center; border: 2px solid var(--c-white); }
.support__panel { position: fixed; right: 20px; top: 50%; bottom: auto; transform: translateY(-50%);
  width: 320px; max-width: calc(100vw - 40px);
  background: var(--c-white); border: 1px solid var(--c-line-2); border-radius: var(--r-card);
  box-shadow: var(--sh-lg); overflow: hidden; display: none; }
@media (min-width: 768px) { .support__panel { right: 32px; } }
/* 移动端：面板水平居中（桌面仍靠右） */
@media (max-width: 767.98px) {
  .support__panel { right: auto; left: 50%; transform: translate(-50%, -50%); }
}
.support.is-open .support__panel { display: block; }
.support__hd { display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; background-image: linear-gradient(135deg, #E60012, #C7000B); color: var(--c-white); }
.support__hd b { font-size: var(--fs-body-s); font-weight: 600; }
.support__hd small { display: block; margin-top: 3px; font-size: 11px; color: rgba(255,255,255,.78); }
.support__close { display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin: -8px; border-radius: 10px; font-size: 24px; line-height: 1;
  color: var(--c-white); opacity: .95; background: rgba(255,255,255,.16); transition: background .15s; }
.support__close:hover { background: rgba(255,255,255,.3); }
.support__close svg { width: 18px; height: 18px; }
.support__body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.support__qr { border: 1px solid var(--c-line-2); border-radius: var(--r-chip);
  background: var(--c-bg); padding: 12px; text-align: center; }
.support__qr svg { width: 100px; height: 100px; margin: 0 auto 8px; }
.support__qr p { font-size: var(--fs-2xs); color: var(--c-text-2); }
.support__chs { display: flex; flex-direction: column; gap: 10px; }
.support__ch { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--c-line-2); border-radius: var(--r-chip);
  font-size: var(--fs-small); color: var(--c-ink-3); }
.support__ch:hover { border-color: var(--c-brand-line); background: var(--c-brand-pale); }
.support__ch svg { width: 18px; height: 18px; flex: none; color: var(--c-brand); }
@media (min-width: 768px) { .support { right: 32px; bottom: 32px; } }

/* ============================== 20. 背景装饰系统 ============================== */
/* 区块背景装饰 =「点阵 + 柔光环」，均为绝对定位、不参与布局。
   注意：设计稿里只有首页、解决方案页、以及两个短信页的「控制台展示区」带装饰，
   新闻 / 关于 / 联系 / 开发者四页的区块没有任何装饰 —— 不要随手补。
   位置与尺寸全部走自定义属性：点阵 --dw/--dx/--dy，柔光 --gw/--ga/--gx/--gt。 */
.sec > *:not(.sec__deco):not(.sec__glow) { position: relative; z-index: 1; }

.sec__deco {
  position: absolute; z-index: 0; pointer-events: none;
  /* 设计稿点阵：106 或 82 见方、5×5 圆点（5px / 间距 24），内缩 1.5 */
  width: var(--dw, 106px); height: var(--dw, 106px);
}
.sec__deco--bl { left: var(--dx, 36px); bottom: var(--dyb, 0); }    /* 左下 */
.sec__deco--br { right: var(--dx, 42px); bottom: var(--dyb, 0); }   /* 右下 */
.sec__deco--tl { left: var(--dx, 36px); top: var(--dy, 74px); }   /* 左上 */
.sec__deco--tr { right: var(--dx, 42px); top: var(--dy, 34px); }  /* 右上 */

.sec__glow {
  position: absolute; z-index: 0; pointer-events: none;
  width: var(--gw, 700px); height: var(--gw, 700px);
  top: var(--gt, -300px);
  border-radius: 50%;
  /* 设计稿的柔光斑（装饰-柔光XX斑）是「中心 alpha 最大、到圆形边缘恰好衰减为 0」的径向渐变，
     渐变半径 = 斑半径（760 的斑 = 380）。这里必须写 closest-side：
     默认的 farthest-corner 半径是 760/2×√2≈537，元素边缘会残留 alpha≈.06，
     再被 border-radius:50% 一刀切出可见的弧形硬边（表现为「柔光像贴了个圆片」而非自然晕开）。 */
  background: radial-gradient(circle closest-side,
              rgba(var(--gc, 37,99,235), var(--ga, .2)) 0%,
              rgba(var(--gc, 37,99,235), 0) 100%);
}
.sec__glow--right  { right: var(--gx, -200px); }
.sec__glow--left   { left: var(--gx, -230px); }
/* 配色 = 设计稿 gradientStops[0].color 原值（--gc 为 r,g,b；--ga 由行内给 alpha） */
.sec__glow--blue       { --gc: 37, 99, 235; }    /* #2563EB */
.sec__glow--green      { --gc: 16, 185, 129; }   /* #10B981 */
.sec__glow--purple     { --gc: 139, 92, 246; }   /* #8B5CF6 */
.sec__glow--azure      { --gc: 59, 130, 246; }   /* #3B82F6 · 方案成效区（深底） */
.sec__glow--soft-blue  { --gc: 191, 219, 254; }  /* #BFDBFE · 国内短信页控制台区 */
.sec__glow--soft-green { --gc: 110, 231, 183; }  /* #6EE7B7 · 国际短信页控制台区 */

/* 设计稿移动画板（97:xx）的区块不做背景装饰，与「移动端 Hero 无地球配图」一致 */
@media (max-width: 767px) {
  .sec__deco, .sec__glow { display: none; }
}

/* Hero 顶部徽标（设计稿 5:980：白底胶囊 + 8×8 绿点 + 14 Medium） */
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 8px 16px; border-radius: var(--r-pill); background: var(--c-white);
  box-shadow: var(--sh-xs); font-size: var(--fs-small); font-weight: 500; color: var(--c-ink-3);
}
.hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-green); flex: none; }

/* Hero 指标卡（设计稿 5:993：白底卡，22 Bold 蓝 + 13 灰） */
.hero__metric { display: flex; flex-direction: column; gap: 2px; }
/* 移动端 <768：三项是等宽 3 列栅格（还没变成白底 chip），
   文字必须在本列内居中——否则「99.99% / 到达率」等一律贴列左缘，
   实测偏移 -20 / -38 / -32px，整组看上去偏左。
   ≥768 起是内容撑宽的白底 chip，chip 内左右各 20px 内边距，
   贴左才是设计观感，所以居中只加在移动端。 */
@media (max-width: 767px) { .hero__metrics { display: none; } .hero__metric { align-items: center; text-align: center; } }
@media (min-width: 768px) {
  .hero__metrics { display: flex; flex-wrap: wrap; gap: 12px; }
  .hero__metric { padding: 12px 20px; border-radius: var(--r-chip); background: var(--c-white); }
  .hero__metric b { font-size: 22px; }
  .hero__metric > span { font-size: 13px; }
}

/* Hero 地球（设计稿 5:1002 · 360×360，舞台内 x:90 / y:58） */
.hero__globe { position: absolute; left: 90px; top: 58px; width: 360px; height: 360px; display: block; }

/* Hero 浮动信息卡（设计稿 5:1018 / 5:1036 / 5:1026）
   白底 · 圆角 16 · padding 16/14 · gap 12 · 投影 0 20 25 -5 rgba(15,23,42,.10) */
.hero-float {
  position: absolute; display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 16px; background: var(--c-white);
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, .10);
}
.hero-float--sent  { left: 0;     top: 64px;  width: 246px; }
.hero-float--speed { left: 332px; top: 118px; width: 208px; }
.hero-float--up    { left: 326px; top: 302px; width: 214px; }
.hero-float__ico { width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: flex; align-items: center; justify-content: center; }
.hero-float__ico img { width: 20px; height: 20px; display: block; }
.hero-float__ico--green { background: #DCFCE7; }
.hero-float__ico--blue  { background: #DBEAFE; }
.hero-float__ico--amber { background: #FEF3C7; }
.hero-float__tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero-float__tx b { font-size: 13px; font-weight: 600; color: #0F172A; line-height: 1.2; white-space: nowrap; }
.hero-float__tx i { font-style: normal; font-size: 12px; color: #64748B; line-height: 1.2; white-space: nowrap; }
.hero-float__tx i.is-blue { font-family: var(--f-en); font-weight: 700; color: var(--c-brand); }

/* 区块标题右侧的「查看全部」链接（设计稿 5:1346） */
.link-more { display: inline-flex; align-items: center; gap: 8px; flex: none;
  font-size: var(--fs-body-s); font-weight: 600; color: var(--c-brand); white-space: nowrap; }
.link-more:hover { color: var(--c-brand-deep); }
.link-more img { width: 16px; height: 16px; }

/* 信赖客户行（设计稿 5:1262：padding 64/120，gap 28，居中） */
.trust__title { font-size: var(--fs-body-s); font-weight: 500; color: var(--c-text-2); }
.trust__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; width: 100%; }
.trust__logo {
  flex: 1 1 120px; display: flex; align-items: center; justify-content: center;
  padding: 18px 0; border-radius: var(--r-sm); background: var(--c-bg);
  font-family: var(--f-en); font-size: 17px; font-weight: 700;
  color: var(--c-text-3); letter-spacing: .02em;
}

/* ============================== 21. 内页组件 ============================== */
/* 面包屑（设计稿：13–14px，当前项加深） */
.crumb { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--c-text-2); }
.crumb a { color: var(--c-text-2); }
.crumb a:hover { color: var(--c-brand); }
.crumb span { color: var(--c-line); }
.crumb__cur { color: var(--c-ink-3); font-weight: 500; }

/* 页头锚点导航（设计稿 5:1619：胶囊组，锚定页内区块） */
.anchors { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.segment-anchor {
  display: inline-flex; align-items: center; padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--c-white); border: 1px solid var(--c-brand-line);
  font-size: var(--fs-small); font-weight: 500; color: var(--c-brand);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.segment-anchor:hover { background: var(--c-brand); color: var(--c-white); }

/* ——— 站点地图页（sitemap.html）———
   页头那条锚点行居中，正文里的分组链接行要靠左，所以给 .anchors 一个左对齐变体；
   一行 = 页面名 + 这一页的页内小节，名字给个最小宽度让各行胶囊起线对齐。 */
.anchors--left { justify-content: flex-start; }
.smap__grp { display: flex; flex-direction: column; gap: 14px; }
.smap__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.smap__page { min-width: 92px; font-size: var(--fs-body-s); font-weight: 700; color: var(--c-ink); }
.smap__page:hover { color: var(--c-brand); }

/* 控制台展示区（设计稿 33:1448 / 33:1516：纵向三段 · gap 44
   = 居中标题 → 全宽控制台窗口（46 标题栏 + 662 界面）→ 4 个要点卡（高 100） */
.console-stack { display: flex; flex-direction: column; gap: 32px; }
.console-points { display: grid; grid-template-columns: 1fr; gap: 16px; }
.console-point { display: flex; align-items: flex-start; gap: 10px; padding: 14px;
  border-radius: 14px; background: #F8FAFC; font-size: 14px; color: #334155; }
.console-point img { width: 20px; height: 20px; flex: none; }
@media (min-width: 768px) {
  .console-stack { gap: 38px; }
  .console-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .console-stack { gap: 44px; }
  .console-points { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .console-point { min-height: 100px; }
}

/* 四步接入卡（设计稿 5:1813） */
.step {
  display: flex; flex-direction: column; gap: 14px; padding: 26px;
  background: var(--c-white); border: 1px solid var(--c-line-2);
  border-radius: var(--r-card); box-shadow: var(--sh-card);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.step:hover { box-shadow: var(--sh-hover); transform: translateY(-4px); border-color: var(--c-brand-line); }
.step__no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-icon);
  background-image: var(--g-brand); color: var(--c-white);
  font-family: var(--f-en); font-size: var(--fs-body-s); font-weight: 800;
}
.step__title { font-size: var(--fs-card-s); font-weight: 700; color: var(--c-ink); }
.step__desc { font-size: var(--fs-small); color: var(--c-text); line-height: var(--lh-normal); }

/* 方案成效区（设计稿 33:769 · #0F172A / 367） */
.results { background: var(--c-ink); }
.results__title { color: var(--c-white); }
.results__lead { color: var(--c-text-3); }
.results .stat__l { color: var(--c-text-3); }
.results .stat { text-align: center; align-items: center; }

/* 关于我们：4 指标卡（设计稿 5:2227） */
.statcard {
  display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center;
  padding: 26px 20px; background: var(--c-white); border: 1px solid var(--c-line-2);
  border-radius: var(--r-card); box-shadow: var(--sh-card);
}
.statcard b { font-family: var(--f-en); font-size: var(--fs-stat-s); font-weight: 800; color: var(--c-brand); line-height: 1.1; }
.statcard > span { font-size: var(--fs-small); color: var(--c-text-2); }

/* 要点横排（关于我们 3 条） */
.list--row { gap: 14px; }
@media (min-width: 1024px) {
  .list--row { flex-direction: row; gap: 40px; }
  .list--row li { flex: 1; }
}

/* 订阅条（设计稿 5:2079） */
.subscribe {
  display: flex; flex-direction: column; gap: 20px; padding: 28px;
  background: var(--c-brand-pale); border: 1px solid var(--c-brand-line);
  border-radius: var(--r-card);
}
.subscribe__copy { display: flex; flex-direction: column; gap: 8px; }
.subscribe__form { display: flex; flex-wrap: wrap; gap: 12px; }
.subscribe__form input {
  flex: 1 1 220px; padding: 13px 16px; border: 1px solid var(--c-line);
  border-radius: var(--r-btn); background: var(--c-white); font-size: var(--fs-small); color: var(--c-ink);
}
.subscribe__form input::placeholder { color: var(--c-text-3); }
.subscribe__form input:focus { outline: 0; border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.subscribe__form .form__tip { flex: 1 1 100%; margin: 0; }
@media (min-width: 1024px) {
  .subscribe { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; padding: 32px 36px; }
  .subscribe__copy { width: 520px; flex: none; }
  .subscribe__form { flex: 1; }
}

/* 联系我们：表单 + 侧栏（设计稿 5:2444 / 5:2466） */
.contact-split { display: flex; flex-direction: column; gap: 28px; }
/* 右侧「其他联系方式」卡 2026-10-17 按要求摘除；表单独占整行后给它一个可读宽度，
   否则 .wrap 的 1440px 会把输入框拉成一条横杠 */
.contact-form { display: flex; flex-direction: column; gap: 14px; max-width: 860px; margin-inline: auto; }
.contact-form .form { padding-top: 6px; }
.contact-num { font-family: var(--f-en); font-size: var(--fs-card-s); font-weight: 700; color: var(--c-brand); }

/* 页脚联系方式（设计稿 5:1862） */
.ft__contact { display: flex; flex-direction: column; gap: 8px; }
.ft__contact a { font-family: var(--f-en); font-size: var(--fs-small); color: var(--c-on-dark-2); }
.ft__contact a:hover { color: var(--c-white); }

/* 开发者中心：HTTP 开放接口旗舰卡（设计稿 33:1001 · 深青绿渐变） */
.dev-hero {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 20px;
  padding: 32px 28px; border-radius: var(--r-card);
  background-image: linear-gradient(135deg, #0F766E 0%, #115E59 100%);
  box-shadow: 0 20px 30px -8px rgba(15,118,110,.32);
}
.dev-hero__dots { position: absolute; right: 0; bottom: 0; width: 82px; height: 82px; opacity: .9; }
.dev-hero__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; }
.dev-hero__title { font-size: var(--fs-card); font-weight: 700; color: var(--c-white); line-height: var(--lh-snug); }
.dev-hero__desc { font-size: var(--fs-body-s); color: #CCFBF1; line-height: var(--lh-normal); }
.dev-hero__pills { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }
.dev-hero .pill--onDark { background: rgba(255,255,255,.14); color: var(--c-white); }
@media (min-width: 1024px) {
  .dev-hero { flex-direction: row; align-items: center; gap: 48px; padding: 44px 48px; }
  .dev-hero__body { flex: 1; }
  .dev-hero__pills { width: 320px; flex: none; flex-direction: column; align-items: flex-start; }
}
.pill--cyan { background: var(--c-cyan-pale); color: var(--c-cyan); }

/* ============================== 21b. 解决方案页专用组件 ============================== */

/* 行业小卡（设计稿 33:650：224×248 / padding 24 / gap 16 / r22 / 描边 #E2E8F0 /
   投影 0 6px 18px rgba(15,23,42,.05) / 图标底 48-r14 / 标题 19 · 说明 14 · 末行 13 蓝）
   ⚠️ 248 是实测值：设计稿「行业卡行」框架上标着 height:100，但 5 个子卡实际都是 248
      （630 = 96 + 146 + 44 + 248 + 96 才对得上），不要按框架上的 100 去改。 */
.icard {
  display: flex; flex-direction: column; gap: 16px;
  padding: 24px; background: var(--c-white);
  border: 1px solid var(--c-line-2); border-radius: 22px;
  box-shadow: 0 6px 18px rgba(15,23,42,.05);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.icard:hover { box-shadow: 0 14px 26px rgba(15,23,42,.10); transform: translateY(-4px);
  border-color: var(--c-brand-line); }
.icard__title { font-size: var(--fs-news-t); font-weight: 700; color: var(--c-ink); }
.icard__desc  { font-size: var(--fs-small); color: var(--c-text); }
.icard__meta  { font-size: var(--fs-xs); color: var(--c-brand); }

/* 组合卡工具行（设计稿 33:710：13px 蓝字，**不是**胶囊）*/
.pcard__kits { font-size: var(--fs-xs); color: var(--c-brand); }

/* ============================== 22. 动效降级 ============================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .card:hover, .pcard:hover, .adv:hover, .case-card:hover,
  .news-card:hover, .mini-card:hover, .news-row:hover,
  .art-back:hover, .art-nav__item:hover { transform: none; }
}

/* ============================================================================
   26. 设计稿几何校准层（1:1 还原）
   ----------------------------------------------------------------------------
   以下每个数值都取自设计稿节点的实测 bounds / padding / gap / lineHeight，
   目标是把区块高度精确对齐到设计稿（首页 1440 宽 = 7024 总高）。
   刻意放在文件末尾：需要覆盖前面的断点默认值与通用间距。
   对账公式（桌面 1440）：
     Hero    698 = 118 + 484 + 96
     指标带   115 = 18 + 79 + 18
     内容区   885 = 96 + 149 + 44 + 500 + 96     （国内 / 国际）
     优势区  1217 = 96 + 149 + 44 + 248+44+248+44+248 + 96
     信赖区   238 = 64 + 22 + 28 + 60 + 64
     案例区   736 = 96 + 100 + 44 + 400 + 96
     新闻区   656 = 96 + 100 + 44 + 320 + 96
     关于区   653 = 96 + 461 + 96
     CTA    468 = 88 + 33+22+64+22+28+22+59+22+20 + 88
     页脚    392 = 72 + 167 + 36 + 1 + 36 + 44 + 36
   ========================================================================= */

/* ——— 区块标题组（设计稿 5:1061 / 5:1209：149 = 标签 33 + 14 + 标题 58 + 14 + 副标 30）
       ⚠️ 本节的固定行高 / 固定高度只对桌面成立，必须锁在 ≥1024，
          否则会泄漏到移动端（曾导致移动端区块标题 40px + 58px 行高、卡片 500 高）。 ——— */
@media (min-width: 1024px) {
  .sec__hd .h2   { line-height: 58px; }
  .sec__hd .lead { line-height: 30px; }
  .tag           { line-height: 19px; }
}

/* ——— 左标题 + 右操作（设计稿 5:1276 案例 / 5:1342 新闻：100 = 标题 48 + 24 + 副标 28）— */
@media (min-width: 1024px) {
  .sec__hd--between { gap: 24px; }
  .sec__hd--between .h2   { font-size: var(--fs-h3); line-height: 48px; }
  .sec__hd--between .lead { line-height: 28px; }

  /* 产品卡 384×500 / padding 36 / 内文 gap 16 / 标题 26 / 说明 15-lh26（设计稿 5:1067）
     说明：卡片高度一律用 min-height，不用固定 height。
     中文文案短，min-height 与 height 渲染完全一致；英文/印地语文案更长时卡片可自动长高，
     避免文字被 overflow 裁掉（原先英文版「国际短信」产品卡正文会被切掉一行）。 */
  .pcard { min-height: 500px; }
  .pcard__body  { gap: 16px; }
  .pcard__title { line-height: 38px; }
  .pcard__desc  { font-size: var(--fs-body-s); line-height: 26px; }

  /* 优势卡 386.67×248 / padding 32 / gap 16（设计稿 5:1215） */
  .adv { min-height: 248px; }
  .adv__title { line-height: 30px; }
  .adv__desc  { line-height: 24px; }
  /* 案例卡 356×400（5:1286）。新闻卡已改成纯文字，不能再套设计稿的 384×320 固定高，
     否则短内容卡在「阅读全文」下方裂出一块空白。 */
  .case-card { min-height: 400px; }

  /* 栅格：栏目间距 20 / 行间距 44；内容区卡片 24 */
  .grid        { gap: 24px; }
  .grid--gap-s { column-gap: 20px; row-gap: 44px; }
}

/* 文案长度不等的卡片（开发者页「对接前必读」「鉴权」）不能套 .adv 的桌面固定高 248px：
   固定高下多出来的文字会让 flex 去压缩兄弟项，首个可收缩项（44px 的序号块 / 图标块）
   会被压成 24px，肉眼看到的是「几个卡片的序号块大小不一」。这里放开高度并禁止收缩。 */
.adv--fluid { height: auto; }
.adv--fluid > * { flex: none; }

/* 开发者页「开放能力」三张卡只有 图标+标题+两句说明+一个链接，实测内容高约 315px，
   而 .pcard 在 ≥1024px 被钉了 min-height:500px（那条是给首页带 chip 行的产品卡对齐用的），
   结果说明和链接之间裂出近 190px 空白。跟 .adv--fluid 同一口径：放开固定高，让卡片随内容走。 */
.pcard--fluid { min-height: 0; }

/* 开发者页新增区块的窄屏防溢出：
   长且不可断行的技术串（POST&%2F&a=1&b=2、base64(HmacSHA1(...))）会把 grid 轨道顶宽，
   而 .sec 带 overflow:hidden，结果不是出现滚动条而是内容被直接裁掉。
   所以卡片要 min-width:0（grid 轨道才肯收缩），说明文字要允许任意位置断行。 */
#prereq .adv, #auth .adv, #auth .step, #endpoints .table-wrap, #errors .table-wrap, #errors .grid { min-width: 0; }
#prereq .adv__desc, #auth .adv__desc, #auth .step__desc { overflow-wrap: anywhere; }

/* ——— Hero（设计稿 5:962：698 = 118 + 484 + 96；文案 596×484 / gap 64 / 视觉 540×476 含 360 地球）— */
@media (min-width: 1024px) {
  .hero       { padding-block: 118px 96px; }
  .hero__in   { gap: 64px; min-height: 484px; }
  .hero__copy { width: 596px; min-height: 484px; }
  .hero__art  { --hs: 1; }   /* 540×476 原尺寸；缩放由 .hero__stage 等比处理 */
}

/* ——— 指标带（设计稿 5:1043：115 = 18 + 79 + 18；4 列 × 270 / gap 40）
       79 = 第 4 项高度（值 55 + 名 20 + gap 4），用 min-height 让四项统一列高，
       并把 70 高的普通项垂直居中（复现设计稿 y 偏移 22.5）。 ——— */
@media (min-width: 1024px) { .band__in { padding-block: 18px; min-height: 115px; align-items: center; } }
@media (min-width: 768px)  { .band__in { gap: 40px; } }
@media (min-width: 1024px) {
  .stat__v { font-size: var(--fs-stat); line-height: 46px; }
  .stat__l { font-size: var(--fs-small); line-height: 20px; }
}

/* ——— 信赖客户区（设计稿 5:1262：238 = 64 + 22 + 28 + 60 + 64；logo 224×60 / gap 20）— */
.trust__title { font-size: var(--fs-body-s); }
@media (min-width: 1024px) {
  .sec--tight   { gap: 28px; padding-block: 64px; }
  .trust__title { line-height: 22px; }
  .trust__logo  { flex: 1 1 0; height: 60px; padding: 0; }
}

/* ——— 关于我们区（设计稿 5:1392：653 = 96 + 461 + 96）
       插画卡 520×412（导出 SVG 已含白底 + 描边 + 投影，容器不再画）；
       文案栏 600 宽 / 461 高，gap 80；插画在左、文案在右。
       461 = 标签 33 + 20 + 标题 48 + 20 + 段 60 + 20 + 段 60 + 20 + 要点组 180 ——— */
/* 插画位已改由后台上传 OSS 图（方角 PNG），容器圆角 --r-card 仍在 §16 声明，
   但没有 overflow 就裁不住图片 → 必须补上，才和 .article-detail__cover 一致 */
.about-art { padding: 0; background: none; border: 0; box-shadow: none; overflow: hidden; }
@media (min-width: 1024px) {
  .about-split                  { gap: 80px; }
  .about-split .about-art       { order: -1; width: 520px; }
  .about-split__copy            { width: 600px; gap: 20px; min-height: 461px; }
  .about-split__copy p          { line-height: 30px; }
  .about-split__copy .list      { gap: 24px; }
  .about-split__copy .list li   { min-height: 44px; }
}

/* ——— CTA（设计稿 5:1509：原 468 = 88 + 33+22+64+22+28+22+59+22+20 + 88；
     2026-09 按用户要求把纵向留白减半 → 44，区高由 468 收至 380）— */
@media (min-width: 1024px) {
  .cta__in    { padding-block: 44px; gap: 22px; }
  .cta__title { font-size: var(--fs-h1); line-height: 64px; }
  .cta__sub   { font-size: var(--fs-lead); line-height: 28px; }
  .cta__note  { line-height: 20px; }
  .cta .btns  { align-items: center; }
  .cta .btn   { min-height: 59px; }
}

/* ——— 页脚（设计稿 5:1527：392 = 72 + 167 + 36 + 1 + 36 + 44 + 36；
       品牌栏 340 + 栏目组 860，两者之间无间距）— */
@media (min-width: 1024px) {
  .ft__in    { padding-block: 72px 36px; gap: 36px; }
  .ft__grid  { grid-template-columns: 340px repeat(4, minmax(0, 1fr)); gap: 0;
               min-height: 167px; }
  .ft__brand { grid-column: auto; gap: 12px; }
  .ft__desc  { line-height: 22px; }
  .ft__bar   { flex-direction: row; align-items: center; justify-content: space-between;
               height: 44px; gap: 24px; }
}

/* ——— 内页页头（设计稿 5:1612：padding 上 68 / 下 76，gap 20，底 #EFF6FF）— */
@media (min-width: 1024px) { .phead__in { gap: 20px; } }
@media (min-width: 1024px) { .phead { padding-block: 68px 76px; } }

/* ——— 解决方案页三处区块（设计稿 33:643 / 33:696 / 33:732，本轮按设计稿回到 1:1）———
   高度对账：
     行业场景区 630 = 96 + 146 + 44 + 248 + 96     （一行 5 张 224×248）
     触达组合区 682 = 96 + 146 + 44 + 300 + 96     （384×300，不是首页产品卡的 500）
     行业落地区 822 = 96 + 146 + 44 + 444 + 92     （表头 64 + 5×76）                    */
@media (min-width: 1024px) {
  /* 行业小卡行：1200 = 5×224 + 4×20 */
  .grid--5      { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
  .icard        { min-height: 248px; }
  .icard__title { line-height: 26px; }
  .icard__desc  { line-height: 21px; }
  .icard__meta  { line-height: 18px; }

  /* 组合卡 384×300 / padding 32 / gap 16 / r24 / 图标底 52-r15（设计稿 33:703） */
  .pcard--combo                { min-height: 300px; padding: 32px; border-radius: 24px;
                                 box-shadow: 0 6px 18px rgba(15,23,42,.05); }
  .pcard--combo:hover          { box-shadow: 0 14px 26px rgba(15,23,42,.10); }
  .pcard--combo .pcard__top    { height: 52px; }
  .pcard--combo .pcard__body   { padding-top: 16px; gap: 16px; }
  .pcard--combo .pcard__title  { font-size: var(--fs-h5); line-height: 28px; }
  .pcard--combo .pcard__desc   { font-size: var(--fs-body-s); line-height: 22px; }
  .pcard--combo .pcard__kits   { line-height: 19px; }

  /* 行业落地表：表头 64 / 数据行 76 / 左右 36（设计稿 33:739 / 33:744） */
  .table th, .table td { padding: 0 36px; }
  .table th { height: 64px; }
  .table td { height: 76px; }
}

/* ============================================================================
   27. 产品卡能力行（设计稿 5:1078 / 11:100 / 11:110 / 5:1153 / 11:120 / 11:130）
   ----------------------------------------------------------------------------
   结构：vertical gap 10，每行 = 6×6 圆点 + 14px 文案（gap 10）。
   圆点颜色由断点决定（--dot）：旗舰卡浅色、次卡彩色。
   ========================================================================= */
.pcard__feats { display: flex; flex-direction: column; gap: 10px; }
.feat {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-small); line-height: 20px; color: var(--c-ink-3);
}
.feat__dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--dot, #3B82F6);
}
/* 次卡圆点（设计稿实测：#3B82F6 国内通知 / #DB2777 国内营销 / #10B981 国际通知 / #F59E0B 国际营销） */
.feat--blue  { --dot: #3B82F6; }
.feat--pink  { --dot: #DB2777; }
.feat--green { --dot: #10B981; }
.feat--amber { --dot: #F59E0B; }
/* 旗舰卡圆点 + 文案（深底） */
.feat--onDark      { --dot: var(--c-brand-line); color: var(--c-brand-pale); }
.feat--onDarkGreen { --dot: var(--c-online);     color: var(--c-green-pale); }

/* 信息胶囊（设计稿 5:1109 / 5:1111：#F1F5F9 底、无描边、13 SemiBold #334155）*/
.chip {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--c-bg-soft); border: 0;
  font-size: var(--fs-xs); font-weight: 600; color: var(--c-ink-3); white-space: nowrap;
}

/* 国际短信旗舰卡：绿渐变 + 绿色投影（设计稿 5:1141） */
.pcard--hero--green {
  background-image: linear-gradient(225deg,#10B981 0%,#059669 100%);
  box-shadow: 0 20px 30px -8px rgba(16,185,129,.30);
}
.pcard--hero--green:hover { box-shadow: 0 28px 40px -10px rgba(16,185,129,.42); }
.pcard--hero--green .pcard__desc { color: var(--c-green-soft); }
.pcard--hero--green .btn--card   { background: rgba(255,255,255,.20); }
.pcard--hero--green .btn--card:hover { background: rgba(255,255,255,.32); }

/* 国际短信次卡按钮：绿色描边（设计稿 5:1188 / 5:1207 文字 #059669） */
.btn--ghost--green { color: var(--c-green-deep); border-color: var(--c-green-deep); }
.btn--ghost--green:hover { background: var(--c-green-pale); }


/* ============================================================================
   28. 移动端 / 平板组件几何（设计稿 97:xx 系列实测）
   ----------------------------------------------------------------------------
   产品卡 = padding 22 / gap 16 / 圆角 20 / 图标底 56-r16 / 按钮 h42-r10；
   优势卡、案例卡、新闻卡在移动端一律 hug 高度（设计稿为纵向单列自撑高）。
   ========================================================================= */
@media (max-width: 767px) {
  /* ——— 区块标题组 ——— */
  .sec__hd          { gap: 10px; }
  .sec__hd .h2      { line-height: 34px; }
  .sec__hd .lead    { line-height: 22px; }
  .sec__hd--between { gap: 16px; }
  .sec__hd--between .h2   { line-height: 30px; }
  .sec__hd--between .lead { line-height: 22px; }
  .tag              { line-height: 18px; }

  /* ——— 栅格 ——— */
  .grid        { gap: 16px; }
  .grid--gap-s { column-gap: 16px; row-gap: 16px; }

  /* ——— 「为什么选择我们」：移动端固定 2 列（9 张优势卡） ———
     两列只有 160 左右宽，内距与字号同步收窄，长文案仍按 hug 高度自撑。 */
  .grid--gap-s { grid-template-columns: repeat(2, minmax(0, 1fr));
                 column-gap: 12px; row-gap: 12px; }
  .grid--gap-s .adv { padding: 16px; gap: 12px; border-radius: 16px; }
  .grid--gap-s .adv .icon-tile img { width: 40px; height: 40px; }
  .grid--gap-s .adv__title { font-size: 16px; line-height: 22px; }
  .grid--gap-s .adv__desc  { font-size: 13px; line-height: 20px; }

  /* ——— 产品卡（设计稿 97:738：padding 22 / gap 16 / r20 / hug） ——— */
  .pcard        { height: auto; padding: 22px; border-radius: 20px; }
  .pcard__top   { height: auto; }
  .pcard__body  { gap: 14px; padding-top: 14px; }
  .pcard__title { line-height: 1.3; }
  .pcard__desc  { line-height: 24px; }
  .pcard__feats { gap: 8px; }
  .feat         { gap: 8px; line-height: 20px; }
  .btn--card    { height: 42px; padding: 0; border-radius: 10px; }

  /* 图标底：移动端 56×56 r16（设计稿 97:760） */
  .icon-tile img, .icon-tile--lg img, .icon-tile--sm img { width: 56px; height: 56px; }

  /* ——— 行业小卡：单列 hug（设计稿移动画板没有 224 宽的卡，按同族卡片收窄） ——— */
  .icard        { height: auto; padding: 20px; border-radius: 20px; }
  .icard__title { line-height: 26px; }
  .icard__desc  { line-height: 21px; }
  .icard__meta  { line-height: 20px; }

  /* ——— 优势卡 / 案例卡 / 新闻卡：单列 hug ——— */
  .adv        { height: auto; padding: 24px; }
  .adv__title { line-height: 26px; }
  .adv__desc  { line-height: 22px; }
  .case-card  { height: auto; }
  .news-card  { height: auto; }

  /* ——— 指标带 / 信赖区 / 页头 ——— */
  .band__in      { padding-block: 26px; min-height: 0; gap: 18px; }
  .sec--tight    { gap: 20px; }
  .trust__title  { line-height: 20px; }
  /* 「被全球 5,000+ 企业信赖」：移动端 2 列。
     ⚠️ 基值必须写 calc(50% - 10px)，与 .trust__row 的 gap:20px 对齐：
     写成 -8px 时两条目「假设主尺寸 + 间隙」= 100% + 4px > 容器宽，
     flex-wrap 会在收缩之前就换行，结果变成每行 1 个。 */
  .trust__logo   { flex: 1 1 calc(50% - 10px); height: 52px; padding: 0; }
  .phead__in     { gap: 16px; }
}

/* ——— 控制台展示区（移动端）：浏览器条 + 后台界面截图 + 4 个要点，
       三段拼成同一张白卡（用「去掉中缝圆角/描边」实现，不留接缝）。
       移动端同样展示后台示例图 —— 截图按容器宽度等比缩放，不裁切。 ——— */
@media (max-width: 767px) {
  .console-stack            { gap: 0; }
  .console-stack > .sec__hd { margin-bottom: 22px; }
  .mock                     { border-radius: 20px 20px 0 0; border-bottom: 0; box-shadow: var(--sh-card); }
  .mock__bar                { height: auto; padding: 12px 14px; gap: 8px; }
  .mock__body               { display: block; }
  .mock__body img           { width: 100%; height: auto; }
  .console-points           { padding: 16px; gap: 14px;
                              background: var(--c-white); border: 1px solid var(--c-line-2);
                              border-top: 1px solid var(--c-line-2); border-radius: 0 0 20px 20px;
                              box-shadow: var(--sh-card); }
  .console-point            { padding: 0; border-radius: 0; background: none; align-items: center; }
  .console-point span       { font-size: 13px; }
}

/* ============================================================================
   29. Quickstart 代码示例 · 7 种语言切换（开发者中心）
   ----------------------------------------------------------------------------
   语言芯片放在代码卡标题栏右侧；移动端标题栏换行，芯片独占一行并横向滚动。
   每个语言一个 .codepanel，只有 .is-on 的那个显示 —— 切换由 site.js 完成。
   ========================================================================= */
.codeseg {
  display: flex; align-items: center; gap: 6px; margin-left: auto;
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.codeseg::-webkit-scrollbar { display: none; }
.codeseg button {
  flex: none; padding: 5px 12px; border-radius: 999px; background: #1E293B;
  font-family: var(--f-en); font-size: 12px; font-weight: 600; color: #94A3B8;
  line-height: 1.2; white-space: nowrap; scroll-snap-align: start;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.codeseg button:hover { color: #E2E8F0; }
.codeseg button.is-on { background: var(--c-brand); color: var(--c-white); }

.codepanel { display: none; }
.codepanel.is-on { display: block; }

/* 一键复制：与语言芯片同一视觉族（深底 #1E293B / 圆角胶囊），
   但它是个动作按钮，所以描边 + hover 提亮，避免被当成又一个语言页签。 */
.codecopy {
  flex: none; margin-left: 10px; padding: 5px 12px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #334155; border-radius: 999px; background: #1E293B;
  font-family: var(--f-en); font-size: 12px; font-weight: 600; line-height: 1.2;
  color: #94A3B8; white-space: nowrap; cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.codecopy:hover { color: #E2E8F0; border-color: #475569; }
.codecopy:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
/* 复制图标用内联 SVG（currentColor），成功态换成对勾并转绿，
   只靠 class 切换，不往 DOM 里塞新节点，免得被 i18n 引擎的 innerHTML 还原冲掉。 */
.codecopy__ico { width: 13px; height: 13px; flex: none; }
.codecopy__ico .ok { display: none; }
.codecopy.is-done { color: #34D399; border-color: #059669; }
.codecopy.is-done .codecopy__ico .cp { display: none; }
.codecopy.is-done .codecopy__ico .ok { display: block; }

/* 官方接口文档的 7 语言示例较长（PHP 75 行 / Java 93 行 / Go 105 行），
   在面板内部滚动，避免切换语言时页面高度剧烈跳动。
   深色底上必须换浅色滑块，否则系统默认滚动条几乎看不见。 */
.code { max-height: 460px; overflow-y: auto; scrollbar-width: thin;
  scrollbar-color: #475569 transparent; }
.code::-webkit-scrollbar { width: 10px; height: 10px; }
.code::-webkit-scrollbar-track { background: transparent; }
.code::-webkit-scrollbar-thumb { background: #475569; border-radius: 999px; }
.code::-webkit-scrollbar-thumb:hover { background: #64748B; }
@media (max-width: 767px) { .code { max-height: 380px; } }

/* 代码窗口下方的说明行 */
.mock__note { margin-top: 14px; font-size: var(--fs-small); color: var(--c-text-2);
  line-height: var(--lh-normal); }
.mock__note code { font-family: var(--f-code); font-size: 13px; color: var(--c-ink-3);
  background: var(--c-bg-soft); padding: 2px 6px; border-radius: 6px; overflow-wrap: anywhere; }

@media (max-width: 767px) {
  /* 标题栏换行：圆点 + 复制按钮占第一行（按钮靠右），语言芯片独占第二行并可横滑。
     复制按钮在 DOM 里排在芯片之后，故用 order 提上来，避免它掉到第三行。 */
  .mock__bar--code       { flex-wrap: wrap; padding: 14px 16px; row-gap: 12px; }
  .codeseg               { width: 100%; margin-left: 0; order: 2; }
  .codecopy              { margin-left: auto; order: 1; }
  .code                  { padding: 18px; font-size: 12.5px; }
}

/* ============================== 23. 锚点定位 · i18n 载体防护 ============================== */

/* 顶栏是 sticky（桌面 80px / 移动 56px）。点页内锚点（如开发者页顶部那三个，
   或页脚链接）时，浏览器会把目标区块顶到视口最上沿，标题就被顶栏盖掉一截。
   scroll-margin-top 让目标停在顶栏下方，额外留 12px 呼吸。 */
[id] { scroll-margin-top: 68px; }
@media (min-width: 1120px) { [id] { scroll-margin-top: 92px; } }

/* 中文原文统一包在 <span data-i18n="tXXX"> 里，它只是「文字载体」，
   所有排版都应继承父元素。但如果 CSS 用后代选择器写标签样式
   （例：.hero__metric span），这个 span 同样会被命中，
   把 <b>/<em> 上的字号与颜色顶掉 —— 症状是「某个数值突然变小变灰」。
   下面这组规则给行内强调元素里的载体上保险；
   以后新增此类样式请写 .x > span 而不是 .x span。 */
b > [data-i18n], strong > [data-i18n],
em > [data-i18n], i > [data-i18n] {
  font-size: inherit; font-weight: inherit; line-height: inherit;
  color: inherit; font-family: inherit; letter-spacing: inherit;
}

/* ============================== 20. 图片防另存（访客侧全站） ==============================
   只堵「右键另存 / 拖到桌面 / iOS 长按存储」这三条顺手路径。
   写在这里而不是逐张加 class：新闻封面、正文图、后台以后上传的图都走同一个 img 标签，
   新页面漏挂 class 就等于漏防。
   不用 pointer-events:none —— 全站卡片是 <a> 包 <img>，那样会把命中测试整块改掉。
   拦不住 DevTools 与 OSS 直链（真要收口在对象存储侧配 Referer 白名单）。 */
img { -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; }

/* ============================== 24. 404 页 ==============================
   nginx error_page 在任意缺失路径下直出 /404.html，所有引用必须站点根绝对路径，
   否则在 /news/xxx.html 这类深层路径下相对写法会先让样式自己 404。 */
.nf404-body {
  min-height: 100vh;
  display: flex; flex-direction: column;
  background: var(--c-brand-pale);
}
.nf404__top { padding-block: 20px; border-bottom: 1px solid var(--c-line); background: var(--c-white); }
.nf404__top .wrap { display: flex; align-items: center; }
.nf404__brand { display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-en); font-size: var(--fs-body-s); font-weight: 800; color: var(--c-ink); letter-spacing: -.01em; }
.nf404__brand img { width: 30px; height: 30px; object-fit: contain; }

.nf404 { flex: 1; display: flex; align-items: center; padding-block: var(--sp-section-m); }
.nf404__in { text-align: center; }
.nf404__code {
  font-family: var(--f-en); font-size: 92px; font-weight: 900; line-height: 1;
  color: var(--c-brand); opacity: .14; letter-spacing: .04em;
}
.nf404__ttl { margin-top: -22px; font-size: var(--fs-h1); font-weight: 800; color: var(--c-ink); line-height: var(--lh-snug); }
.nf404__desc { margin: 14px auto 0; max-width: 560px; font-size: var(--fs-lead); color: var(--c-text-2); line-height: var(--lh-relaxed); }
.nf404__btns { margin-top: 30px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.nf404__links { margin-top: 34px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
  font-size: var(--fs-small); color: var(--c-text-2); }
.nf404__links a { padding: 4px 2px; transition: color var(--dur) var(--ease); }
.nf404__links a:hover { color: var(--c-brand); }
.nf404__links i { color: var(--c-line); font-style: normal; }
/* 国内短信只在中文下出现：链接和它后面那个「/」包在一个 span 里一起收，
   否则会剩一个没有归属的斜杠。display:contents 让包壳不干扰 flex 排布，
   而 [hidden]{display:none!important}（见第 1 节）依旧能整组隐藏。 */
.nf404__links > span { display: contents; }
.nf404__contact { margin-top: 22px; display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--c-text-3); }
.nf404__contact a { color: var(--c-ink-3); font-family: var(--f-en); }
.nf404__contact a:hover { color: var(--c-brand); }

@media (min-width: 768px) {
  .nf404__code { font-size: 132px; }
  .nf404__ttl { margin-top: -34px; }
}
@media (max-width: 479px) {
  .nf404__btns .btn { width: 100%; }
}


/* ——— PWA 安装提示条（元素由 site.js 第 10 节注入，词典文案在 site.js 里，与在线客服同一套做法）
   固定左下角：右下角是在线客服浮窗的地盘，两个浮层不能抢位置；
   z-index 70 压在 .support 的 80 之下 —— 客服面板展开时盖住它，聊天优先。 */
.pwa-bar { position: fixed; left: 24px; bottom: 24px; z-index: 70;
  display: flex; align-items: center; gap: 12px; width: min(360px, calc(100vw - 48px));
  padding: 12px 14px; border: 1px solid var(--c-line-2); border-radius: var(--r-inner);
  background: var(--c-white); box-shadow: var(--sh-lg); animation: pwaBarIn .32s var(--ease); }
.pwa-bar__ic { flex: none; width: 40px; height: 40px; border-radius: 9px; }
.pwa-bar__tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pwa-bar__t { font-size: var(--fs-small); font-weight: 700; color: var(--c-ink); }
.pwa-bar__d { font-size: var(--fs-xs); line-height: 1.5; color: var(--c-text-2); }
.pwa-bar__go { flex: none; padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--c-brand); color: var(--c-white); font-size: var(--fs-small); font-weight: 600;
  transition: background var(--dur) var(--ease); }
.pwa-bar__go:hover { background: var(--c-brand-deep); }
.pwa-bar__x { flex: none; width: 24px; height: 24px; border-radius: 50%;
  color: var(--c-text-2); font-size: 16px; line-height: 1; transition: background var(--dur) var(--ease); }
.pwa-bar__x:hover { background: var(--c-bg); color: var(--c-ink); }
@keyframes pwaBarIn { from { opacity: 0; transform: translateY(8px); } }
/* 移动端让开右下角客服按钮（20 底距 + 56 按钮 ≈ 76），整条往上抬 */
@media (max-width: 767px) { .pwa-bar { left: 12px; right: 12px; bottom: 88px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .pwa-bar { animation: none; } }