/* =============================================================================
   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--between { flex-direction: column; align-items: flex-start; gap: 20px; }
@media (min-width: 768px) {
  .sec__hd--between { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; }
  .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); }

/* ============================== 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 { height: 176px; margin: -1px -1px 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.case-card__cover img { width: 100%; height: 176px; 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); }

/* ——— 新闻卡（设计稿 5:1352：高 320 / 封面 160 / 内文 padding 24）——— */
.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__cover { height: 160px; margin: -1px -1px 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.news-card__cover img { width: 100%; height: 160px; object-fit: cover; }
.news-card__cover--blue   { background: var(--g-cover-blue); }
.news-card__cover--green  { background: var(--g-cover-green); }
.news-card__cover--purple { background: var(--g-cover-purple); }
.news-card__body { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.news-card__meta { font-size: var(--fs-xs); color: var(--c-text-2); }
.news-card__title { font-size: 19px; font-weight: 700; color: var(--c-ink); line-height: var(--lh-snug); }

/* 头条卡（新闻动态页） */
.news-feature { display: flex; flex-direction: column; border-radius: var(--r-card); overflow: hidden;
  background: var(--c-white); border: 1px solid var(--c-line-2); box-shadow: var(--sh-card); }
/* 头条配图（设计稿 5:1955：600 宽 · 蓝→绿 135° 渐变 + 2 装饰圆 + 「头条」胶囊标签） */
.news-feature__art { position: relative; height: 220px; overflow: hidden;
  background: linear-gradient(135deg, #2563EB 0%, #10B981 100%); }
.news-feature__deco { position: absolute; border-radius: 50%; }
.news-feature__deco--1 { width: 300px; height: 300px; left: 380px; top: -60px; background: rgba(255,255,255,.12); }
.news-feature__deco--2 { width: 180px; height: 180px; left: 120px; top: 250px; background: rgba(255,255,255,.14); }
.news-feature__label { position: absolute; left: 32px; top: 32px; padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.22); color: var(--c-white); font-size: 13px; line-height: 1.2; }
.news-feature__body { display: flex; flex-direction: column; gap: 14px; padding: 28px; }
.news-feature__title { font-size: 22px; font-weight: 700; color: var(--c-ink); line-height: var(--lh-snug); }
.news-feature__body p { font-size: 15px; color: var(--c-text); line-height: 1.7; }
/* 头条分类胶囊（设计稿 5:1962：padding 12/5 · 12px · 浅蓝底蓝字） */
.tag--meta { padding: 5px 12px; font-size: 12px; font-weight: 700; }
@media (min-width: 1024px) {
  .news-feature { flex-direction: row; align-items: stretch; }
  .news-feature__art { width: 50%; height: auto; min-height: 360px; }
  .news-feature__body { width: 50%; justify-content: center; padding: 48px; gap: 16px; }
  .news-feature__title { font-size: 28px; }   /* 设计稿 5:1965 */
}

/* ============================== 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 {
  position: sticky; top: 0; z-index: 60;
  height: 56px; background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-line-2);
}
.hd__in { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 16px; }
.hd__brand { display: flex; align-items: center; gap: 10px; flex: none; }
.hd__brand img { width: 32px; height: 32px; }
.hd__brand span { font-size: 17px; font-weight: 700; color: var(--c-ink); letter-spacing: -.01em; }
.hd__menu { display: none; align-items: center; gap: 30px; }
.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; }

/* ——— 「产品服务」二级菜单（国内短信 / 国际短信，桌面下拉） ———
   触发按钮只管展开，真正的跳转交给面板里的两条链接。 */
.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; }
.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; }
.lang-wrap.is-open .lang__list { display: block; }
.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); }
.hd__cta:hover { background: var(--c-brand-deep); }

/* 汉堡按钮 */
.burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; align-items: center; }
.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); }

@media (min-width: 1024px) {
  .hd { 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; }
}

/* 移动抽屉 */
.mnav { position: fixed; inset: 56px 0 0 0; z-index: 55;
  background: var(--c-white); padding: 20px 20px 40px; overflow-y: auto;
  transform: translateX(100%); transition: transform var(--dur) var(--ease); }
.mnav.is-open { transform: translateX(0); }
.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; }
.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; }
.mnav__sub-btn img { 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); }
.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: 1024px) { .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; }
/* 桌面底纹按设计稿 1440×760 铺（区块高 698，底部 62px 由 overflow 裁切） */
@media (min-width: 1024px) { .hero__bg { 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);
  border: 1px solid var(--c-line-2); border-radius: var(--r-pill); box-shadow: var(--sh-xs); }
.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; }

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

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

.spec { display: flex; flex-direction: column; gap: 10px; }
.spec__row { display: flex; gap: 12px; font-size: var(--fs-small); }
.spec__row dt { width: 76px; flex: none; color: var(--c-text-2); }
.spec__row dd { margin: 0; color: var(--c-ink-3); }

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

/* ============================== 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; }
@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); }
.ft__in { display: flex; flex-direction: column; gap: 32px; padding-block: 52px 28px; }
.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; }
.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; }
.ft__social img { width: 134px; height: 38px; }
@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: var(--g-brand);
  box-shadow: var(--sh-float); color: var(--c-white); transition: transform var(--dur) var(--ease); }
.support__btn:hover { transform: translateY(-3px); }
.support__btn svg { width: 26px; height: 26px; }
.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: absolute; right: 0; bottom: 68px; 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; }
.support.is-open .support__panel { display: block; }
.support__hd { display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; background-image: var(--g-brand); 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: var(--c-brand-soft); }
.support__close { color: var(--c-white); font-size: 20px; line-height: 1; opacity: .9; }
.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; }
@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;
  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); }

/* 控制台展示区（设计稿 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 { 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; }
.contact-form { display: flex; flex-direction: column; gap: 14px; }
.contact-form .form { padding-top: 6px; }
.contact-aside {
  display: flex; flex-direction: column; gap: 20px; padding: 26px;
  background: var(--c-white); border: 1px solid var(--c-line-2);
  border-radius: var(--r-card); box-shadow: var(--sh-card);
}
.contact-num { font-family: var(--f-en); font-size: var(--fs-card-s); font-weight: 700; color: var(--c-brand); }
@media (min-width: 1024px) {
  .contact-split { flex-direction: row; align-items: flex-start; gap: 48px; }
  .contact-form { flex: 1.6; }
  .contact-aside { width: 380px; flex: none; }
}

/* 页脚联系方式（设计稿 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 { 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） */
  .pcard { 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 { height: 248px; }
  .adv__title { line-height: 30px; }
  .adv__desc  { line-height: 24px; }
  /* 案例卡 356×400（5:1286）/ 新闻卡 384×320（5:1352） */
  .case-card { height: 400px; }
  .news-card { height: 320px; }

  /* 栅格：栏目间距 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; }

/* 开发者页新增区块的窄屏防溢出：
   长且不可断行的技术串（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 ——— */
.about-art { padding: 0; background: none; border: 0; box-shadow: none; }
@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        { 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                { 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; }

/* 官方接口文档的 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) {
  /* 标题栏换行：圆点 + 语言芯片各占一行，芯片可横滑 */
  .mock__bar--code       { flex-wrap: wrap; padding: 14px 16px; row-gap: 12px; }
  .codeseg               { width: 100%; margin-left: 0; }
  .code                  { padding: 18px; font-size: 12.5px; }
}

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

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