/* =====================================================
   首页版式 · 星图 / 精密制图
   原则：
   1. 不用圆角卡片堆叠，改用共边格架 + 刻度线建立秩序
   2. 大字与留白承担视觉重量，装饰只做细线与编号
   3. 同一行内的信息用竖线切分，而不是分割成多个小卡片
   ===================================================== */

/* ================= Hero ================= */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(48px, 8vw, 96px));
  padding-bottom: clamp(40px, 6vw, 72px);
  overflow: hidden;
  isolation: isolate;
}
/* Lottie 星图背景 */
.hero__atlas {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .95;
  mask-image: radial-gradient(ellipse 74% 70% at 70% 42%, #000 30%, transparent 84%);
  -webkit-mask-image: radial-gradient(ellipse 74% 70% at 70% 42%, #000 30%, transparent 84%);
}
.hero__atlas svg { width: 100%; height: 100%; display: block; }

/* 光晕交给 CSS：径向渐变没有阶梯感，也比逐层圆便宜 */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 76% 34%, rgba(34, 211, 238, .16), transparent 70%),
    radial-gradient(ellipse 50% 50% at 18% 74%, rgba(11, 79, 216, .18), transparent 72%);
}
html[data-theme="light"] .hero__veil {
  background:
    radial-gradient(ellipse 60% 55% at 76% 34%, rgba(18, 166, 245, .10), transparent 70%),
    radial-gradient(ellipse 45% 45% at 14% 78%, rgba(11, 79, 216, .07), transparent 72%);
}

.hero__inner {
  display: grid;
  gap: clamp(40px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: .96fr 1.04fr; }
}

/* 左侧竖排铭牌 */
.hero__copy {
  position: relative;
  max-width: 640px;
}
@media (min-width: 1024px) {
  .hero__copy { padding-left: 54px; }
  .hero__copy::before {
    content: "EST. 2017 · SHENZHEN · CHINA";
    position: absolute;
    left: 0;
    top: 4px;
    writing-mode: vertical-rl;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .32em;
    color: var(--text-3);
    opacity: .8;
  }
  .hero__copy::after {
    content: "";
    position: absolute;
    left: 18px;
    top: 0;
    width: 1px;
    height: 96px;
    background: linear-gradient(180deg, var(--accent), transparent);
  }
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--sp-5);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-3);
}
.hero__eyebrow::before {
  content: "";
  width: 34px; height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}
.hero__eyebrow b { color: var(--accent); font-weight: 600; }

.hero__title {
  font-size: clamp(2.35rem, 5.2vw, 4.1rem);
  line-height: 1.06;
  letter-spacing: -.035em;
  font-weight: 800;
  margin-block: 0 var(--sp-5);
  text-wrap: balance;
}
.hero__title em {
  font-style: normal;
  display: inline-block;
  color: var(--accent);
  /* 渐变文字在大字上更容易糊，这里用双色：主体实色 + 尾部渐变 */
}
.hero__title .grad-text {
  display: inline-block;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__desc {
  color: var(--text-2);
  font-size: clamp(.9375rem, 1.05vw, 1.0625rem);
  line-height: 1.85;
  max-width: 52ch;
  margin-bottom: var(--sp-7);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 519px) {
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
}

/* 首屏数据：一行竖线切分，不做卡片 */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(36px, 5vw, 60px);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  max-width: 520px;
}
.hero__stats > div { padding-inline: var(--sp-4); }
.hero__stats > div:first-child { padding-left: 0; }
.hero__stats > div + div { border-left: 1px solid var(--rule); }
.stat__num {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-latin);
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.stat__num span:last-child { font-size: .55em; color: var(--accent); font-weight: 400; }
.stat__label {
  margin-top: 9px;
  font-size: var(--fs-12);
  letter-spacing: .06em;
  color: var(--text-3);
}

/* ================= Hero 视觉：斜切截图 ================= */
.hero__visual {
  position: relative;
  min-height: 300px;
}

.stage {
  position: relative;
  isolation: isolate;
}
/* 偏移的细线框，制造「图版晒印」的错位感 */
.stage::before {
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  border: 1px solid var(--border-brand);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
  z-index: -1;
}
.stage__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.stage__bar::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--accent);
  flex-shrink: 0;
}
.stage__url { margin-left: auto; }
.stage__dot { display: none; }

.stage__media {
  position: relative;
  border: 1px solid var(--rule);
  background: var(--bg-2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 38px), calc(100% - 38px) 100%, 0 100%);
  overflow: hidden;
}
.stage__media::before {
  /* 把实拍/录屏统一压进深空色调，避免「旧站视频」破坏整套视觉 */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 10, 20, .34) 0%, rgba(6, 10, 20, .06) 34%, rgba(6, 10, 20, .46) 100%),
    repeating-linear-gradient(0deg, rgba(120, 190, 255, .05) 0 1px, transparent 1px 3px);
  mix-blend-mode: normal;
}
html[data-theme="light"] .stage__media::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 34%, rgba(11, 79, 216, .12) 100%),
    repeating-linear-gradient(0deg, rgba(11, 79, 216, .04) 0 1px, transparent 1px 3px);
}
.stage__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  z-index: 3;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .6;
}
.stage__media video,
.stage__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10.4;
  object-fit: cover;
}

/* 悬浮数据块：直角细框，贴在斜切角上 */
.float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--rule);
  background: var(--bg-0);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text-1);
  z-index: 2;
}
.float-card i { color: var(--accent); font-size: 12px; }
.float-card small { display: block; margin-top: 3px; font-weight: 400; font-size: .75rem; letter-spacing: .04em; color: var(--text-3); }
.float-card--a { left: -18px; top: 26%; }
.float-card--b { right: -12px; bottom: 12%; }
@media (max-width: 1023px) {
  .float-card--a { left: 0; }
  .float-card--b { right: 0; }
}
@media (max-width: 560px) {
  .float-card--b { display: none; }
}

/* ================= 平台能力条 ================= */
.platforms {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: var(--sp-4);
  overflow: hidden;
}
.platforms__row {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
  justify-content: space-between;
}
.platforms__label {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-3);
}
.platforms__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8125rem;
  letter-spacing: .02em;
  color: var(--text-2);
}
.platforms__item i { color: var(--accent); font-size: 13px; opacity: .9; }

/* ================= 通用分区 ================= */
.section {
  position: relative;
  isolation: isolate;
  padding-block: clamp(64px, 8vw, 112px);
}
/* 分区底纹：极淡的图纸网格，让深色区块不再是「一大块纯色」 */
.section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(0deg, var(--grid-line) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(ellipse 90% 100% at 50% 40%, #000 20%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 90% 100% at 50% 40%, #000 20%, transparent 92%);
}
.section--tight { padding-block: clamp(40px, 5vw, 64px); }
.section--alt { background: var(--bg-1); }

/* 分区顶部的刻度线：图纸标尺感，替代卡片阴影做分隔 */
.section--line { border-top: 1px solid var(--rule); }
.section--line::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background-image: repeating-linear-gradient(90deg, var(--rule-strong) 0 1px, transparent 1px 14px);
  opacity: .55;
  pointer-events: none;
}

/* 标题组：编号 + 标题 + 说明
   DOM 顺序是「编号 / 标题 / 说明」三个平级子元素，栅格必须显式指派行列，
   否则两列布局会把标题挤到右列、说明掉到左列第二行。 */
.sec-head {
  display: grid;
  gap: var(--sp-5);
  margin-bottom: clamp(36px, 5vw, 60px);
}
@media (min-width: 900px) {
  .sec-head {
    /* 两列布局下一列只有 720px 会把 39px 的标题切得很碎，
       宽屏改成铺满内容区（单列/居中式仍保留 720 的可读行宽） */
    max-width: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
    grid-template-rows: auto auto;
    align-items: end;
    row-gap: 14px;
    column-gap: var(--sp-8);
  }
  .sec-head .sec-index { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .sec-head .sec-title { grid-column: 1; grid-row: 2; }
  .sec-head .sec-desc  { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
}
/* 居中式标题组：退回单列，避免两列栅格把内容拆散 */
@media (min-width: 900px) {
  .sec-head--center { max-width: 720px; grid-template-columns: minmax(0, 1fr); }
  .sec-head--center .sec-index { grid-column: 1; grid-row: 1; justify-content: center; }
  .sec-head--center .sec-title { grid-column: 1; grid-row: 2; }
  .sec-head--center .sec-desc  { grid-column: 1; grid-row: 3; justify-self: center; }
}
.sec-index {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-4);
}
.sec-index::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--accent);
}
.sec-title {
  font-size: clamp(1.55rem, 3vw, 2.45rem);
  line-height: 1.2;
  letter-spacing: -.03em;
  font-weight: 700;
  /* 这里用 pretty 而不是 balance：多处标题已用 <br> 手工断行，
     balance 会无视断行继续「均衡」出第三行，反而把短语再切碎 */
  text-wrap: pretty;
}
.sec-desc {
  color: var(--text-2);
  font-size: .9375rem;
  line-height: 1.85;
  max-width: 46ch;
  text-wrap: pretty;
}
.grad-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ================= 能力矩阵：共边格架 ================= */
.bento {
  display: grid;
  gap: 1px;
  background: var(--rule-strong);
  border: 1px solid var(--rule-strong);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(3, 1fr); }
  .bento__cell--wide { grid-column: span 2; }
}

.bento__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  background: var(--bg-0);
  transition: background-color .3s;
}
.section--alt .bento__cell { background: var(--bg-1); }
.bento__cell:hover { background: var(--bg-2); }

/* 编号：右上角极小的等宽字，像图纸上的坐标 */
.bento__no {
  position: absolute;
  top: 16px; right: 18px;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--text-3);
  opacity: .8;
  transition: color .3s, opacity .3s;
}
.bento__cell:hover .bento__no { color: var(--accent); opacity: 1; }

/* hover 时从左向右扫出的一条细线：图纸「压线」的暗示，只走一遍不上色块 */
.bento__cell::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  width: 0;
  background: var(--accent);
  transition: width .5s cubic-bezier(.22,.7,.3,1);
  pointer-events: none;
}
.bento__cell:hover::after { width: 100%; }

/* 图标：56px，与标题左对齐。
   这里刻意不做外框/角标 —— 页头图册已经用了「对角标」语言，
   六格每格再套一个角标会变成节奏噪声；图标自身的持续动画已经足够抓眼。 */
.bento__icon {
  position: relative;
  width: 76px; height: 76px;
  margin-bottom: var(--sp-4);
  color: var(--accent);
  font-size: 15px;
}
.bento__icon .lottie-slot {
  width: 76px; height: 76px;
  display: block;
  transition: transform .4s cubic-bezier(.22,.7,.3,1);
}
.bento__cell:hover .bento__icon .lottie-slot { transform: translateY(-3px); }
.bento__icon svg { width: 100% !important; height: 100% !important; }

.bento__title {
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  font-weight: 700;
}
.bento__text {
  font-size: .875rem;
  color: var(--text-2);
  line-height: 1.8;
  text-wrap: pretty;
}
.bento__meta {
  margin-top: auto;
  padding-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.bento__list {
  display: grid;
  gap: 9px;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}
.bento__list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .8125rem;
  color: var(--text-2);
  line-height: 1.6;
}
.bento__list i { margin-top: 4px; font-size: 9px; color: var(--accent); }

/* ================= 数据带：一行大字 ================= */
.metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (min-width: 900px) { .metrics { grid-template-columns: repeat(4, 1fr); } }
.metric {
  padding: clamp(24px, 3vw, 40px) var(--sp-5);
  background: var(--bg-0);
  text-align: left;
}
.section--alt .metric { background: var(--bg-1); }
.metric__num {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-family: var(--font-latin);
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
}
.metric__num span { color: var(--accent); font-size: .38em; font-weight: 400; letter-spacing: 0; }
.metric__label {
  margin-top: 14px;
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--text-3);
}

/* ================= 产品线 ================= */
.product-row {
  display: grid;
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
  padding-block: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--rule);
}
.product-row:first-of-type { border-top: 0; padding-top: 0; }
.product-row:last-of-type { padding-bottom: 0; }
@media (min-width: 900px) {
  .product-row { grid-template-columns: 1.05fr .95fr; }
  .product-row:nth-child(even) .product-row__media { order: 2; }
}

.product-row__media {
  position: relative;
  border: 1px solid var(--rule);
  background: var(--bg-2);
  overflow: hidden;
}
.product-row__media::after {
  /* 右上角的编号角标，替代「卡片」的悬浮感 */
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 44px; height: 44px;
  background:
    linear-gradient(225deg, var(--bg-0) 0 22px, transparent 22px),
    linear-gradient(225deg, var(--rule) 0 23px, transparent 23px);
}
.product-row__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10.5;
  object-fit: cover;
  object-position: top center;
  transition: transform .8s var(--ease-out);
}
.product-row:hover .product-row__media img { transform: scale(1.02); }
html[data-theme="dark"] .product-row__media img,
html[data-theme="dark"] .case__img img,
html[data-theme="dark"] .stage__media img,
html[data-theme="dark"] .stage__media video { filter: brightness(.94) saturate(1.02); }

.product-row__tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-3);
}
.product-row__title {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.3;
  letter-spacing: -.025em;
  margin-bottom: var(--sp-3);
  text-wrap: balance;
}
.product-row__desc { color: var(--text-2); font-size: .9375rem; line-height: 1.8; margin-bottom: var(--sp-5); text-wrap: pretty; }

.feature-list {
  display: grid;
  gap: 0;
  margin-bottom: var(--sp-6);
  border-top: 1px solid var(--rule);
}
@media (min-width: 560px) { .feature-list { grid-template-columns: 1fr 1fr; column-gap: var(--sp-5); } }
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  font-size: .875rem;
  color: var(--text-2);
}
.feature-list i { margin-top: 5px; font-size: 9px; color: var(--accent); }

/* ================= 交付流程：横向时间轴 ================= */
.process {
  position: relative;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--rule-strong);
}
@media (min-width: 640px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .process { grid-template-columns: repeat(6, 1fr); } }

.step {
  position: relative;
  padding: var(--sp-5) var(--sp-4) var(--sp-5) 0;
  border-bottom: 1px solid var(--rule);
  transition: background-color .3s;
}
@media (min-width: 980px) {
  .step { border-bottom: 0; padding-right: var(--sp-4); }
  .step + .step { border-left: 1px solid var(--rule); padding-left: var(--sp-4); }
}
/* 时间轴节点：顶部一个小方块，落在刻度线上 */
.step::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px; height: 7px;
  background: var(--bg-0);
  border: 1px solid var(--accent);
  transition: background-color .3s;
}
.section--alt .step::before { background: var(--bg-1); }
.step:hover::before { background: var(--accent); }
@media (min-width: 980px) {
  .step + .step::before { left: -4px; }
}
.step__no {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .18em;
  color: var(--accent);
  margin-bottom: 12px;
}
.step__title { font-size: .9375rem; letter-spacing: -.01em; margin-bottom: 8px; }
.step__text { font-size: .8125rem; color: var(--text-2); line-height: 1.7; text-wrap: pretty; }

/* ================= 技术栈：标签网格 ================= */
.tech-groups {
  display: grid;
  border-top: 1px solid var(--rule);
}
.tech-group {
  display: grid;
  gap: var(--sp-3);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 760px) {
  .tech-group {
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-6);
  }
}
.tech-group__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.tech-group__head i { color: var(--accent); font-size: 12px; }
.tech-group__items { display: flex; flex-wrap: wrap; gap: 8px; }
.tech-item {
  padding: 7px 11px;
  border: 1px solid var(--rule);
  font-family: var(--font-latin);
  font-size: .8125rem;
  color: var(--text-2);
  transition: color .2s, border-color .2s, background-color .2s;
}
.tech-item:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* ================= 案例：无框图 + 细线标题 ================= */
.case-grid {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
}
@media (min-width: 768px) { .case-grid { grid-template-columns: repeat(3, 1fr); } }

.case {
  position: relative;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-4);
  transition: border-color .3s;
}
.case:hover { border-top-color: var(--accent); }
.case__no {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .16em;
  color: var(--text-3);
  margin-bottom: 10px;
}
.case__img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--rule);
}
.case__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.case:hover .case__img img { transform: scale(1.03); }
.case__body { padding-top: var(--sp-4); display: flex; flex-direction: column; gap: 9px; flex: 1; }
.case__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.case__tag {
  padding: 2px 7px;
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--text-3);
}
.case__title { font-size: 1.0625rem; letter-spacing: -.015em; }
.case__text { font-size: .875rem; color: var(--text-2); line-height: 1.75; flex: 1; text-wrap: pretty; }
.case__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--accent);
}
.case__link i { font-size: 12px; transition: transform .25s; }
.case__link:hover i { transform: translateX(4px); }

/* ================= CTA：通栏深色 + Lottie ================= */
/* 这里原本是 1.02fr / .98fr 两列栅格，但 5 个页面都只放了一张 .cta-card，
   于是卡片被挤在左半边、右半边留白。改成单列通栏。 */
.cta-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* 浅色主题这里曾经硬写 background:#0A1120，理由是「CTA 要跳出来」。
   结果是白天模式正中间一块 1080×330 的纯黑，比任何内容都抢眼；
   深色主题下 --bg-1 本来就是 #0A1120，那行覆盖等于只对浅色生效的 bug。
   现在两个主题共用 --bg-1，靠描边 + accent 角标 + 光带区分层级。 */
.cta-card {
  position: relative;
  isolation: isolate;
  padding: clamp(32px, 4.5vw, 60px);
  background: var(--bg-1);
  border: 1px solid var(--rule);
  overflow: hidden;
}
/* 浅色下 --bg-1 是 #F5F7FB，和白底只差一点，整块像没画完的留白。
   给它一档更实的蓝灰渐变：仍属浅色系，但能让浅色光带的细线有依托。 */
html[data-theme="light"] .cta-card {
  background:
    linear-gradient(115deg, #EDF2FB 0%, #DCE7F7 52%, #CFDDF2 100%);
  border-color: rgba(11, 79, 216, .2);
}
/* 左上角标：与页头图册同一套直角装裱语言，给浅色块一个「这是强调区」的锚点 */
.cta-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 46px; height: 3px;
  background: var(--accent);
  pointer-events: none;
}
.cta-card__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 1;
  pointer-events: none;
  /* 用遮罩把「文字区」整块让出来，而不是在上面压半透明色块：
     压色块时流线仍会从字缝里穿出来（一条亮线横穿标题），遮罩才是干净的做法。
     100deg 大致跟随文字的排布方向，左下 → 右上渐显。 */
  -webkit-mask-image: linear-gradient(100deg, transparent 0 18%, rgba(0, 0, 0, .3) 36%, #000 58%);
  mask-image: linear-gradient(100deg, transparent 0 18%, rgba(0, 0, 0, .3) 36%, #000 58%);
}
.cta-card__bg svg { width: 100%; height: 100%; display: block; }
/* band-flow-light 的描边是 #9FB6DA 一带的淡蓝，落在浅底上几乎看不见；
   不动生成脚本，只在渲染侧提一档对比度 + 饱和度。 */
html[data-theme="light"] .cta-card__bg { filter: contrast(1.08) saturate(1.15); }
/* 窄屏下这张动图没法用：遮罩按百分比算，18%/36%/58% 会直接压在正文上；
   而且 preserveAspectRatio:slice 遇上「窄而高」的容器会把线条放大到 2.8px，
   压到 16% 不透明度仍能看出横线穿过段落。
   移动端换成 CSS 静态斜纹 —— 同样的图纸质感，零阅读干扰，也省一个 100KB 请求。 */
/* 断点取 1199 而不是 767：卡片宽 880 以下时「窄而高」的容器会把线条放大到
   3px 以上，且遮罩的比例位置会滑到按钮附近；768px 竖屏最糟——线条正好压在
   「复制微信号」按钮上。1200 以上留足右半区，动画才是加分项。 */
@media (max-width: 1199px) {
  .cta-card__bg { display: none; }
  html[data-theme="light"] .cta-card {
    background:
      repeating-linear-gradient(110deg, rgba(11, 79, 216, .05) 0 1px, transparent 1px 24px),
      linear-gradient(115deg, #EDF2FB 0%, #DCE7F7 52%, #CFDDF2 100%);
  }
  html[data-theme="dark"] .cta-card {
    background:
      repeating-linear-gradient(110deg, rgba(148, 178, 220, .06) 0 1px, transparent 1px 24px),
      var(--bg-1);
  }
}
.cta-card h2 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.22;
  letter-spacing: -.03em;
  margin-bottom: var(--sp-4);
  color: var(--text-1);
}
.cta-card p {
  color: var(--text-2);
  font-size: .9375rem;
  line-height: 1.85;
  margin-bottom: var(--sp-6);
  max-width: 44ch;
}
.cta-card__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: var(--sp-6); }
.cta-card__note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--text-3);
}
.cta-card__note i { color: var(--accent); }

/* FAQ：细线列表 */
.faq { display: grid; border-top: 1px solid var(--rule); }
.faq__item {
  border-bottom: 1px solid var(--rule);
  transition: border-color .25s;
}
.faq__item[open] { border-bottom-color: var(--accent); }
.faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text-1);
  list-style: none;
  transition: color .2s;
}
.faq__q:hover { color: var(--accent); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q i { color: var(--accent); font-size: 12px; transition: transform .25s; flex-shrink: 0; }
.faq__item[open] .faq__q i { transform: rotate(45deg); }
.faq__a { padding: 0 0 20px; font-size: .875rem; color: var(--text-2); line-height: 1.85; max-width: 62ch; text-wrap: pretty; }

/* ================= Lottie 占位 ================= */
.lottie-slot { width: 100%; height: 100%; }

/* 兜底：万一路径不对或动画脚本没跑起来，容器也不能是一块纯白。
   html[data-no-lottie] 由 app.js 在检测不到播放器时挂上；
   [data-lottie-failed] 由单点挂载失败时挂上。
   这里只画一张极淡的「图纸网格 + 对角标」，不冒充内容。 */
html[data-no-lottie] [data-lottie]:not([data-mounted="1"]),
[data-lottie][data-lottie-failed] {
  position: relative;
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center;
  opacity: .5;
}
html[data-no-lottie] [data-lottie]:not([data-mounted="1"])::after,
[data-lottie][data-lottie-failed]::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-top: 1px solid var(--rule-strong);
  border-left: 1px solid var(--rule-strong);
  clip-path: polygon(0 0, 22% 0, 22% 1px, 1px 1px, 1px 22%, 0 22%);
}

/* ---------------- 移动端底部留白 ---------------- */
@media (max-width: 767px) {
  body { padding-bottom: var(--mobilebar-h); }
  .hero { padding-top: calc(var(--header-h) + 32px); }
  .footer-top { padding-block: var(--sp-8) var(--sp-6); }
}

/* 320px 极窄屏 */
@media (max-width: 359px) {
  .hero__title { font-size: 1.75rem; line-height: 1.18; }
  .hero__stats > div { padding-inline: 10px; }
  .metric { padding-inline: 12px; }
}