/* =====================================================
   内页层：页面头、长文排版、时间轴、价值主张、技术分层、
   联系页布局、设备框
   依赖 tokens.css / base.css / components.css / sections.css

   语言：与首页共用「星图 / 精密制图」——直角、hairline、
   共边格架、角标记。任何地方都不再出现圆角卡片与投影。
   ===================================================== */

/* ================= 页面头 ================= */
.page-hero__atlas {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .92;
  /* 四段遮罩取交集：
     1) 垂直线性——顶部淡入，中间的正文段落区压到 .15（连线穿字极其干扰阅读），
        底部再提回来，让星图只在上沿与下沿可见
     2) 水平淡出——右栏是 Lottie 图解，星图若延伸过去会与图解的刻度线打架
     3) 径向——把密度收在左侧 */
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .5) 8%, #000 20%, rgba(0, 0, 0, .15) 34%, rgba(0, 0, 0, .15) 68%, #000 84%, rgba(0, 0, 0, .5) 100%),
    linear-gradient(90deg, #000 0, #000 26%, transparent 56%),
    radial-gradient(ellipse 54% 66% at 22% 40%, #000 18%, transparent 82%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .5) 8%, #000 20%, rgba(0, 0, 0, .15) 34%, rgba(0, 0, 0, .15) 68%, #000 84%, rgba(0, 0, 0, .5) 100%),
    linear-gradient(90deg, #000 0, #000 26%, transparent 56%),
    radial-gradient(ellipse 54% 66% at 22% 40%, #000 18%, transparent 82%);
  mask-composite: intersect;
}
.page-hero__atlas svg { width: 100%; height: 100%; display: block; }
.page-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 48% 58% at 24% 36%, rgba(34, 211, 238, .13), transparent 70%);
}
html[data-theme="light"] .page-hero__veil {
  background: radial-gradient(ellipse 48% 58% at 24% 36%, rgba(18, 166, 245, .09), transparent 70%);
}
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(44px, 7vw, 88px));
  padding-bottom: clamp(40px, 5vw, 64px);
  overflow: hidden;
  isolation: isolate;
}
/* 页头底部收起：一条贯穿的 hairline，像图纸的标题栏分隔 */
.page-hero::after {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--rule-strong) 0 96px, var(--rule) 96px 100%);
}
.page-hero__inner { max-width: 860px; position: relative; z-index: 1; }

/* 双栏页头：左文案 + 右配图
   1000px 即可切两列，但必须同时加宽左列并收敛字号：
   原 1.08fr + 5.2vw 时左列仅 488px 而字号 53px，11 字短句会折行留孤字。 */
.page-hero__grid {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 1000px) {
  .page-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .page-hero__grid .page-hero__inner { max-width: 660px; }
  .page-hero__grid .page-hero__title { font-size: clamp(1.95rem, 4.1vw, 3.1rem); }
}
/* 页头右侧原为照片 / 旧营销图；现统一替换为「图册插图」式 Lottie 图解。
   画布与容器同为 4:3，切片不会裁掉图上的刻度线。
   外圈 outline 是图册的装裱线，::before / ::after 是左上 + 右下的一对角标。 */
.page-hero__visual {
  position: relative;
  border: 1px solid var(--rule);
  background: var(--bg-2);
  overflow: hidden;
  outline: 1px solid var(--rule);
  outline-offset: 10px;
}
.page-hero__visual::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 14px; height: 14px;
  border-top: 1px solid var(--accent);
  border-left: 1px solid var(--accent);
  z-index: 2;
  pointer-events: none;
}
.page-hero__visual::after {
  content: "";
  position: absolute;
  right: -1px; bottom: -1px;
  width: 14px; height: 14px;
  border-bottom: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
  z-index: 2;
  pointer-events: none;
}
.page-hero__visual .lottie-slot {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
}
.page-hero__title {
  font-size: clamp(2.125rem, 5.2vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -.035em;
  font-weight: 800;
  margin-bottom: var(--sp-5);
}
.page-hero__desc {
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.8;
  color: var(--text-2);
  max-width: 58ch;
}
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
}
.page-hero__meta div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--fs-14);
  color: var(--text-3);
}
.page-hero__meta b {
  font-family: var(--font-mono);
  font-size: var(--fs-20);
  font-weight: 500;
  color: var(--text-1);
  letter-spacing: -.02em;
}

/* 面包屑：等宽字 + 斜线分隔，取代箭头图标 */
.crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.crumb a { color: var(--text-3); transition: color .2s; }
.crumb a:hover { color: var(--accent); }
.crumb__sep {
  width: 24px;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 11px;
  color: var(--accent);
  opacity: .55;
}
.crumb span { color: var(--text-1); font-weight: 500; }

/* ================= 长文排版 ================= */
.prose { max-width: 76ch; }
.prose > *:first-child { margin-top: 0; }
.prose h2 {
  position: relative;
  margin: var(--sp-9) 0 var(--sp-4);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--accent);
  font-size: clamp(1.375rem, 2.1vw, 1.625rem);
  letter-spacing: -.02em;
}
.prose h3 {
  margin: var(--sp-6) 0 var(--sp-3);
  font-size: var(--fs-18);
}
.prose p {
  margin-bottom: var(--sp-4);
  color: var(--text-2);
}
.prose strong { color: var(--text-1); font-weight: 600; }
.prose ul { display: grid; gap: 12px; margin: var(--sp-4) 0 var(--sp-5); }
.prose li {
  position: relative;
  padding-left: 24px;
  color: var(--text-2);
}
/* 方块要点：不加圆角，直接一个 5px 实心方 */
.prose li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: .68em;
  width: 5px;
  height: 5px;
  background: var(--accent);
}

/* 两栏：文字 + 侧栏要点 */
.split {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 940px) {
  .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
.split--even { grid-template-columns: 1fr; }
@media (min-width: 940px) {
  .split--even { grid-template-columns: 1fr 1fr; }
}

/* ================= 时间轴 =================
   竖线穿过菱形节点——节点本身盖住线，因此不需要给节点加描边圈 */
.tl {
  position: relative;
  display: grid;
  gap: var(--sp-5);
  max-width: 880px;
}
.tl::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 16px;
  bottom: 12px;
  width: 1px;
  /* 只在顶端做 accent 渐入，末段才淡出：
     原写法 55% 就开始透明，导致最后两条（2023/2026）几乎没有连线，
     视觉上像「断掉的节点」 */
  background: linear-gradient(180deg, var(--accent) 0, var(--rule-strong) 18%, var(--rule-strong) 90%, transparent 100%);
}
.tl__item {
  position: relative;
  display: grid;
  gap: var(--sp-2);
  padding-left: var(--sp-7);
}
.tl__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 9px;
  height: 9px;
  background: var(--accent);
  transform: rotate(45deg);
}
.tl__year {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent);
}
.tl__title { font-size: var(--fs-18); margin-bottom: 6px; letter-spacing: -.01em; }
.tl__text { font-size: .9375rem; color: var(--text-2); line-height: 1.75; max-width: 62ch; }
/* 桌面端：年份独立成列，竖线与节点仍贴在内容外侧 */
@media (min-width: 720px) {
  .tl { gap: var(--sp-6); }
  .tl__item {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: baseline;
  }
  .tl__year { padding-top: 0; font-size: var(--fs-14); }
  .tl__item::before { top: 6px; }
}

/* ================= 价值主张 / 要点网格 =================
   与首页 .bento 同一手法：1px 共边，取消独立边框与间隙 */
.vals {
  display: grid;
  gap: 1px;
  background: var(--rule-strong);
  border: 1px solid var(--rule-strong);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.vals__item {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--cell);
  transition: background-color .3s;
}
.vals__item:hover { background: var(--bg-2); }
.vals__icon {
  flex: 0 0 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-strong);
  background: none;
  color: var(--accent);
  font-size: 13px;
  transition: border-color .3s, color .3s;
}
.vals__item:hover .vals__icon { border-color: var(--accent); }
.vals__title { font-size: var(--fs-16); margin-bottom: 4px; letter-spacing: -.01em; }
.vals__text { font-size: .9375rem; line-height: 1.7; color: var(--text-2); }

/* ================= 技术分层 ================= */
.stack {
  display: grid;
  gap: 1px;
  background: var(--rule-strong);
  border: 1px solid var(--rule-strong);
}
.stack__row {
  display: grid;
  gap: 6px var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--cell);
  transition: background-color .25s, box-shadow .25s;
}
/* 悬停用左侧 2px 实心条，而不是位移或投影 */
.stack__row:hover {
  background: var(--bg-2);
  box-shadow: inset 2px 0 0 var(--accent);
}
@media (min-width: 700px) {
  .stack__row { grid-template-columns: 132px 1fr; align-items: center; }
}
.stack__name {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.stack__name i { font-size: 13px; opacity: .85; }
.stack__desc { font-size: .9375rem; color: var(--text-2); line-height: 1.7; }
.stack__desc b { color: var(--text-1); font-weight: 600; }

/* ================= 图文交替（产品页） ================= */
.showcase-list { display: grid; }
.showcase-list > .product-row + .product-row { border-top: 1px solid var(--rule); }

/* ================= 设备框 =================
   浏览器窗口的「三点」在这里变成三个 hairline 方块，
   地址栏去掉胶囊底色，只留等宽字——像图纸上的标注框 */
.frame {
  position: relative;
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  overflow: hidden;
}
.frame__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
}
.frame__dot {
  width: 5px;
  height: 5px;
  border: 1px solid var(--rule-strong);
  background: transparent;
}
.frame__url {
  flex: 1;
  margin-left: 10px;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--text-3);
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 产品界面截图保留原始比例，不裁切侧边内容 */
.frame img {
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  object-position: top center;
}
html[data-theme="dark"] .frame img { filter: brightness(.94) saturate(1.02); }

/* 手机框：同样是制图里的设备轮廓，只保留 3px 微圆角避免视觉割裂 */
.phone {
  position: relative;
  width: min(100%, 210px);
  padding: 7px;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  background: var(--surface-2);
}
.phone img {
  width: 100%;
  border-radius: 2px;
  aspect-ratio: 9 / 19;
  object-fit: cover;
  object-position: top center;
}
html[data-theme="dark"] .phone img { filter: brightness(.94) saturate(1.02); }

/* ================= 联系页 ================= */
.contact-layout {
  display: grid;
  gap: clamp(24px, 3.5vw, 44px);
  align-items: start;
}
@media (min-width: 980px) {
  .contact-layout { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
}

/* 区块：hairline 方框 + 左侧 accent 起笔刻度，标题前一个实心小方。
   三个 panel 视觉权重一致，靠「是否带表单」而非阴影区分。 */
.panel {
  position: relative;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--rule);
  background: var(--cell);
}
.panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 44px;
  height: 2px;
  background: var(--accent);
}
.panel + .panel { margin-top: var(--sp-5); }
.panel__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-18);
  letter-spacing: -.01em;
  margin-bottom: var(--sp-2);
}
.panel__title::before {
  content: "";
  flex: 0 0 6px;
  height: 6px;
  background: var(--accent);
}
.panel__desc {
  margin-bottom: var(--sp-5);
  padding-left: 16px;
  font-size: var(--fs-14);
  color: var(--text-3);
}

.info-list { display: grid; }
.info-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--rule);
}
.info-row:first-child { padding-top: 0; }
.info-row:last-child { border-bottom: none; padding-bottom: 0; }
.info-row__icon {
  flex: 0 0 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-strong);
  background: none;
  color: var(--accent);
  font-size: 13px;
}
.info-row__main { min-width: 0; }
.info-row__label {
  margin-bottom: 3px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.info-row__value {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: var(--fs-16);
  font-weight: 500;
  color: var(--text-1);
  word-break: break-word;
}
.info-row__value a { transition: color .2s; }
.info-row__value a:hover { color: var(--accent); }

/* 小号复制按钮 */
.mini-copy {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 2px 10px;
  border: 1px solid var(--rule-strong);
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  /* 用 --text-2：--text-3 在深色 --surface-2 上仅 4.49，按钮也需更醒目 */
  color: var(--text-2);
  transition: color .2s, border-color .2s, background-color .2s;
}
.mini-copy:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* 表单栅格 */
.field-row { display: grid; gap: 0 var(--sp-4); }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

/* 提交后的回执：整块表单被替换成这个区块 */
.is-hidden { display: none !important; }
.form-success {
  display: grid;
  justify-items: start;
  gap: var(--sp-3);
  padding: var(--sp-2) 0 var(--sp-1);
}
/* 对勾动效放在「深色印章」里：
   动效本身是浅绿细线，直接落在白底上几乎看不见；
   深色底 + 1px accent 边框反而像一枚盖章，和 CTA 卡的处理同一逻辑 */
.form-success__stamp {
  width: 64px;
  height: 64px;
  margin-bottom: var(--sp-2);
  border: 1px solid var(--accent);
  background: var(--surface-invert);
}
.form-success__stamp svg { width: 100%; height: 100%; display: block; }
.form-success__title { font-size: var(--fs-18); letter-spacing: -.01em; }
.form-success__text {
  max-width: 46ch;
  font-size: .9375rem;
  line-height: 1.8;
  color: var(--text-2);
}
.form-success__text b { color: var(--text-1); font-weight: 600; }
.form-success .btn { margin-top: var(--sp-2); }

.form-note {
  margin-top: var(--sp-3);
  font-size: var(--fs-12);
  color: var(--text-3);
  line-height: 1.7;
}

/* 二维码 */
.qr-card {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.qr-card img {
  width: 124px;
  border: 1px solid var(--rule-strong);
  background: #fff;
  padding: 7px;
}
.qr-card__text { flex: 1; min-width: 150px; }
.qr-card__text strong { display: block; font-size: var(--fs-16); margin-bottom: 6px; }
.qr-card__text span { font-size: var(--fs-14); color: var(--text-2); line-height: 1.7; }

/* 地图占位 */
.map-frame {
  position: relative;
  border: 1px solid var(--rule-strong);
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    var(--bg-1);
  background-size: 44px 44px, 44px 44px, auto;
  overflow: hidden;
}
.map-frame__inner {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: clamp(56px, 9vw, 104px) var(--sp-5);
  text-align: center;
}
.map-frame__inner i { font-size: 26px; color: var(--accent); margin-bottom: 4px; }
.map-frame__inner strong { font-size: var(--fs-18); }
.map-frame__inner span { font-size: var(--fs-14); color: var(--text-2); max-width: 44ch; }

/* ================= 承诺条 =================
   不做成一个色块，而是左侧双 hairline 的引文块 */
.assure {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  border-left: 2px solid var(--rule-strong);
}
.assure__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-14);
  color: var(--text-2);
}
.assure__row i { color: var(--green-400); margin-top: 4px; font-size: 12px; }
html[data-theme="light"] .assure__row i { color: var(--green-500); }

/* ================= 对照卡（SaaS vs 定制） =================
   两栏共边，中缝 1px；高亮侧不用投影，用底色 + 顶部 accent 刻度 */
.compare {
  display: grid;
  gap: 1px;
  background: var(--rule-strong);
  border: 1px solid var(--rule-strong);
}
@media (min-width: 820px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare__col {
  position: relative;
  padding: clamp(22px, 3vw, 30px);
  background: var(--cell);
}
.compare__col--hi { background: var(--bg-2); }
.compare__col--hi::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  background: var(--accent);
}
.compare__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.compare__col--hi .compare__label { color: var(--accent); }
.compare__list { display: grid; gap: 12px; }
.compare__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .9375rem;
  color: var(--text-2);
  line-height: 1.65;
}
.compare__list i { margin-top: 4px; font-size: 11px; }
.compare__col:not(.compare__col--hi) .compare__list i { color: var(--text-3); }
.compare__col--hi .compare__list i { color: var(--green-400); }
html[data-theme="light"] .compare__col--hi .compare__list i { color: var(--green-500); }

/* ================= 页内锚点导航 =================
   从胶囊浮动条改为「图纸标签条」：贴左、直角、底部 2px 指示线 */
.pnav-scope { display: grid; gap: var(--sp-5); }
.page-nav {
  position: sticky;
  top: calc(var(--header-h) + 12px);
  z-index: 5;
  justify-self: start;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  border: 1px solid var(--rule-strong);
  background: var(--surface-glass-solid);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  max-width: 100%;
}
.page-nav a {
  position: relative;
  padding: 11px 16px;
  border-left: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: .06em;
  color: var(--text-2);
  transition: color .2s, background-color .2s;
  white-space: nowrap;
}
.page-nav a:first-child { border-left: 0; }
.page-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .3s var(--ease-out);
}
.page-nav a:hover { color: var(--text-1); background: var(--accent-soft); }
.page-nav a:hover::after,
.page-nav a.is-active::after { transform: scaleX(1); }
.page-nav a.is-active { color: var(--accent); }

/* 移动端：不换行，改为单行横向滚动，避免变成挡住半屏的大方块 */
@media (max-width: 767px) {
  .page-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .page-nav::-webkit-scrollbar { display: none; }
  .page-nav a { flex: 0 0 auto; padding: 10px 13px; }
}

/* ================= 移动端修正 ================= */
@media (max-width: 639px) {
  .page-hero { padding-top: calc(var(--header-h) + 36px); }
  .page-hero__meta { gap: var(--sp-3) var(--sp-5); }
  .page-hero__meta b { font-size: var(--fs-18); }
  .tl__item { padding-left: var(--sp-6); }
  .tl::before { left: 4px; }
  .vals__item { padding: var(--sp-4); }
  .panel { padding: var(--sp-5) var(--sp-4); }
}

/* ================= 锚点跳转偏移 =================
   固定页头 + 吸顶锚点导航会盖住跳转目标，预留其高度并留一点呼吸空间 */
.product-row,
.section[id] {
  scroll-margin-top: calc(var(--header-h) + 74px);
}

/* 320px 极窄屏：9 字长句（如「按业务长出来的系统」）在 34px 下需 306px，
   超出内容宽 280px 会额外折行，统一收一档字号 */
@media (max-width: 359px) {
  .page-hero__title { font-size: 1.9rem; line-height: 1.15; }
  .page-hero__desc { font-size: .9375rem; }
  /* 11 字长句在同字号下会折成 10+1，末行仅剩「板」；
     独立成块并均衡换行，避免孤字 */
  .page-hero__title .grad-text {
    display: inline-block;
    text-wrap: balance;
  }
}