/* ============================================================
   pages.css —— 各屏专属样式（S1 ~ S10）
   约束：本文件不得出现任何字面色值，一律引用 tokens.css 变量。
   ============================================================ */

/* ============================================================
   S1 · Hero（≥100vh 全屏暗场 + 居中悬浮主视觉）
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--nav-h) + clamp(24px, 5vh, 64px));
  padding-bottom: clamp(40px, 7vh, 96px);
  overflow: hidden;
  background-color: var(--bg-deep);
  background-image: var(--grad-body-bg);
}

/* 背景辉光：左上蓝、右下紫（每屏最多 2 处） */
.hero .glow--blue { top: -18%; left: -8%; }
.hero .glow--purple { right: -12%; bottom: -14%; }

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
}

.hero__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-small);
  color: var(--text-3);
  letter-spacing: 0.02em;
  margin-bottom: clamp(20px, 3.4vh, 40px);
}
.hero__brand-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background-image: var(--grad-secondary);
  box-shadow: var(--glow-sm);
}

.hero__title {
  font-size: var(--fs-mega);
  line-height: var(--lh-mega);
  font-weight: var(--fw-black);
  letter-spacing: -0.03em;
  background-image: var(--grad-hero-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin-inline: auto;
  max-width: 15ch;
}

.hero__sub {
  margin: clamp(16px, 2.4vh, 28px) auto 0;
  max-width: 46ch;
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  color: var(--text-3);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: clamp(24px, 3.4vh, 40px);
}

/* 三个信任数据 */
.hero__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) clamp(20px, 4vw, 56px);
  margin-top: clamp(24px, 3.4vh, 44px);
}
.hero__stat { display: flex; align-items: baseline; gap: 8px; }
.hero__stat-num {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--text-1);
  letter-spacing: -0.01em;
}
.hero__stat-label {
  font-size: var(--fs-caption);
  color: var(--text-faint);
}
.hero__stat-div {
  width: 1px;
  align-self: center;
  height: 16px;
  background: var(--border-1);
}

/* 居中悬浮主视觉：略小于屏幕，四周暗场留白，边缘溶入黑场 */
.hero__media {
  position: relative;
  width: min(1160px, 86vw);
  margin: clamp(28px, 5vh, 72px) auto 0;
}
/* 产品背后的柔和辉光（被 mask 裁不到，挂在父级上） */
.hero__media::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 118%;
  height: 128%;
  transform: translate(-50%, -50%);
  background-image: var(--glow-radial);
  filter: blur(var(--glow-blur));
  opacity: 0.9;
  pointer-events: none;
}
.hero__frame {
  position: relative;
  aspect-ratio: 1536 / 904;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-1);
  -webkit-mask-image: var(--mask-soft);
  mask-image: var(--mask-soft);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--scrim-plate);
  pointer-events: none;
}

/* 滚动提示：钉在首个视口底部 */
.hero__cue {
  position: absolute;
  left: 50%;
  top: calc(100vh - 84px);
  top: calc(100svh - 84px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-faint);
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: var(--shadow-text);
  z-index: 3;
}
.hero__cue-arrow { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* ============================================================
   S2 · 品牌宣言屏（纯文字、无图、无按钮 —— 苹果味关键屏）
   ============================================================ */
.manifesto {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(96px, 16vh, 200px);
  background-color: var(--bg-void);
  background-image: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-void) 22%, var(--bg-void-2) 62%, var(--bg-void) 100%);
  overflow: hidden;
}
.manifesto__inner {
  position: relative;
  z-index: 2;
  max-width: min(1100px, 88vw);
  margin-inline: auto;
  text-align: center;
}
.manifesto__text {
  font-size: var(--fs-manifesto);
  line-height: 1.22;
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
  background-image: var(--grad-manifesto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.manifesto__note {
  margin-top: clamp(40px, 8vh, 88px);
  font-size: var(--fs-caption);
  letter-spacing: 0.34em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.manifesto .glow--blue { top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.55; }

/* ============================================================
   S3 · 设备租赁（粘性叙事）—— 文案部分
   ============================================================ */
.scene__copy { max-width: 620px; }
.scene__copy .sec__title {
  font-size: var(--fs-scene);
  letter-spacing: -0.025em;
}
.scene__lead {
  margin-top: var(--sp-3);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  color: var(--text-2);
  max-width: 42ch;
}
.scene__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px var(--sp-3);
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--text-3);
}
.scene__meta b {
  font-size: var(--fs-h3);
  color: var(--text-1);
}
.scene__cta { margin-top: var(--sp-4); }

/* ============================================================
   S4 · 耗材集采
   ============================================================ */
.cat-list { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.cat {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-card);
  background: var(--bg-l2);
  transition: border-color var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out);
}
.cat:hover { border-color: var(--border-hover); background: var(--bg-l3); }
.cat__ico { color: var(--brand-cyan-lt); margin-top: 2px; }
.cat__name { font-size: var(--fs-h4); color: var(--text-1); margin-bottom: 2px; }
.cat__skus { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-3); }

.metric-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-1);
}
.metric { min-width: 120px; }
.metric__num {
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
  line-height: 1.1;
  background-image: var(--grad-num);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.metric__label { font-size: var(--fs-caption); color: var(--text-3); margin-top: 4px; }

/* ============================================================
   S5 · 数据服务
   ============================================================ */
.data-bars { margin-top: var(--sp-4); }
.data-facts {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.data-fact {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-small);
  color: var(--text-3);
}
.data-fact__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background-image: var(--grad-secondary);
  flex: none;
}

/* 全息数据面板（纯 CSS 绘制的装饰性可视化）
   作为 .duo__media 的兄弟层浮在图片右下角；≤768px 时回到普通流 */
.viz {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 2;
  width: min(300px, 52%);
  padding: var(--sp-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-accent);
  background: var(--bg-l2-grad);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-card);
}
.viz__title {
  font-size: var(--fs-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-cyan-lt);
  margin-bottom: var(--sp-2);
}
.viz__rows { display: grid; gap: 10px; }
.viz__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-caption);
  color: var(--text-3);
}
.viz__track { height: 4px; border-radius: var(--radius-pill); background: var(--track); margin-top: 6px; }
.viz__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background-image: var(--grad-secondary);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.2s var(--ease-apple) var(--d, 0s);
}
.is-visible .viz__fill { transform: scaleX(var(--w, 1)); }

/* ============================================================
   S6 · 智能供需匹配
   ============================================================ */
/* 视觉横幅：比原图比例更扁，避免占据过高版面 */
.match-visual { aspect-ratio: 1536 / 560; }
.match-grid { margin-top: var(--sp-6); }
.match-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: var(--sp-4);
}
.match-filters__label {
  font-size: var(--fs-caption);
  letter-spacing: 0.12em;
  color: var(--text-faint);
  text-transform: uppercase;
  margin-right: 6px;
}
.match-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px var(--sp-3);
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-accent);
  background: var(--glass-1);
  font-size: var(--fs-small);
  color: var(--text-3);
}
.match-result__tag {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-l3);
  color: var(--brand-blue-lt);
  font-size: var(--fs-caption);
}
.match-note {
  display: flex;
  gap: 12px;
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-card);
  background: var(--bg-l2);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-3);
}
.match-note__ico { color: var(--brand-blue-lt); flex: none; margin-top: 2px; }

/* ============================================================
   S7 · 数字看板（横向巨型数字）
   ============================================================ */
.giant-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.giant {
  position: relative;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-1);
}
.giant__num {
  display: block;
  font-size: var(--fs-giant);
  line-height: 1.02;
  font-weight: var(--fw-black);
  letter-spacing: -0.04em;
  background-image: var(--grad-num);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.giant__unit {
  display: block;
  margin-top: 10px;
  font-size: var(--fs-small);
  color: var(--text-1);
}
.giant__desc {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-faint);
}
.giant-board__note {
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-footer);
  font-size: var(--fs-caption);
  color: var(--text-faint);
}

/* ============================================================
   S8 · 降本对比
   ============================================================ */
.vs-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-1);
  box-shadow: var(--shadow-card);
  background-color: var(--bg-void);
}
.vs-bg {
  position: absolute;
  inset: 0;
}
.vs-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* 压低背景图亮度，保证两侧文字对比度 */
  opacity: 0.5;
  transform-origin: 50% 50%;
}
.vs-veil {
  position: absolute;
  inset: 0;
  background-image: var(--scrim-left);
}
.vs-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding: clamp(24px, 4vw, 64px);
  min-height: clamp(360px, 42vw, 520px);
}
.vs-list { display: grid; gap: var(--sp-4); }
.vs-item { min-width: 0; }
/* 双条对比（人工 / 机器人） */
.vs-pair { display: grid; gap: 8px; }
.vs-pair__row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.vs-pair__tag {
  font-size: var(--fs-caption);
  color: var(--text-3);
  white-space: nowrap;
}
.vs-pair__val {
  font-size: var(--fs-caption);
  color: var(--text-2);
  min-width: 62px;
  text-align: right;
  white-space: nowrap;
}
.vs-item__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: 10px;
}
.vs-item__name { font-size: var(--fs-h4); color: var(--text-1); }
.vs-item__delta {
  font-size: var(--fs-small);
  color: var(--success);
  font-weight: var(--fw-semibold);
}
.vs-item__note {
  margin-top: 8px;
  font-size: var(--fs-caption);
  color: var(--text-faint);
}
.vs-quote {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--text-1);
  max-width: 22ch;
}
.vs-quote .txt-grad { display: block; }
.vs-quote__small {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-3);
  font-weight: var(--fw-normal);
}

/* ============================================================
   S9 · 三角色分流
   ============================================================ */
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); }
.role {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-card);
  background: var(--bg-l2);
  overflow: hidden;
  transition:
    transform var(--dur-hover) var(--ease-out),
    box-shadow var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out);
}
.role:hover {
  transform: translateY(-8px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-card-hover);
}
.role--feature {
  background: var(--bg-l2-grad);
  border-color: var(--border-accent);
}
.role__beam {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background-image: var(--grad-primary);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.45s var(--ease-apple);
}
.role:hover .role__beam { transform: scaleX(1); }
.role__tag {
  font-size: var(--fs-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-blue-lt);
}
.role__title { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.role__desc { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-3); }
.role__list { display: grid; gap: 10px; margin-top: 2px; }
.role__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-2);
}
.role__list .ico { color: var(--success); margin-top: 3px; }

.role__commission {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  margin-top: 2px;
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
}
.role__commission-item { display: flex; align-items: baseline; gap: 4px; }
.role__commission-num {
  font-size: var(--fs-commission);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: -0.03em;
  background-image: var(--grad-num);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.role__commission-cap { font-size: var(--fs-caption); color: var(--text-faint); }
.role__cta { margin-top: auto; padding-top: var(--sp-2); }
.role__cta .btn { width: 100%; }

/* ============================================================
   S10 · 结尾 CTA + 页脚
   ============================================================ */
.endcta {
  position: relative;
  padding-block: clamp(80px, 12vh, 160px);
  background-color: var(--bg-void);
  overflow: hidden;
}
.endcta__frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-1);
  box-shadow: var(--shadow-plate);
  aspect-ratio: 1536 / 904;
  -webkit-mask-image: var(--mask-plate);
  mask-image: var(--mask-plate);
}
.endcta__frame img { width: 100%; height: 100%; object-fit: cover; }
.endcta__veil {
  position: absolute;
  inset: 0;
  background-image: var(--scrim-bottom);
}
.endcta__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: clamp(24px, 5vw, 64px);
  text-align: center;
}
.endcta__title {
  font-size: var(--fs-endcta);
  line-height: 1.12;
  font-weight: var(--fw-black);
  letter-spacing: -0.03em;
  background-image: var(--grad-hero-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  max-width: 18ch;
}
.endcta__sub {
  font-size: var(--fs-body-l);
  color: var(--text-2);
  max-width: 40ch;
}
.endcta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
}
.endcta .glow--cyan { bottom: -20%; left: 50%; transform: translateX(-50%); }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1200px) {
  .giant-board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
  .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .vs-grid { grid-template-columns: minmax(0, 1fr); }
  .vs-veil { background-image: var(--scrim-plate); }
  .hero__title { max-width: 18ch; }
}

@media (max-width: 900px) {
  .hero { padding-top: calc(var(--nav-h) + 40px); }
  .hero__cue { display: none; }
  .hero__media { width: min(100%, 860px); }
}

@media (max-width: 768px) {
  .roles { grid-template-columns: minmax(0, 1fr); }
  .viz { position: static; width: 100%; margin-top: var(--sp-3); }
  .match-visual { aspect-ratio: 1536 / 900; }
  .giant-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__frame {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .endcta__frame {
    aspect-ratio: 1536 / 1100;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .role__commission { flex-wrap: wrap; gap: 10px var(--sp-2); }
}

@media (max-width: 480px) {
  .giant-board { grid-template-columns: minmax(0, 1fr); }
  .hero__actions .btn { width: 100%; }
  .metric-row { gap: var(--sp-2); }
  .metric { min-width: 96px; }
  .match-result { padding: var(--sp-2); }
}