/* ============================================================
   Terragor · PBO 编织辐条
   全屏分节（100svh）+ 滚动吸附 · 产品主导 + 科研严谨 · 半扁平
   规则：无阴影 / 无卡片底色，仅用 1px 细线与留白划分
   ============================================================ */

/* ---------- 令牌 ---------- */
:root {
  --bg: #2d4059;
  --bg-alt: #26364c;    /* 交替底色：比基色深一档 */

  /* 文字层级：对比度按 WCAG AA 反推（深底 #2d4059，基准 0.0995） */
  --ink: #f5f8fc;      /* 标题 / 关键数值          9.8:1 */
  --ink-2: #d3dce8;    /* 正文                    7.6:1 */
  --ink-3: #a9b7c9;    /* 次要正文 / 说明行        5.2:1 */
  --ink-4: #9dabbd;    /* 表头 / 图注 / 元信息     4.5:1 */

  /* 线条 */
  --line: rgba(255, 255, 255, 0.10);
  --line-2: rgba(255, 255, 255, 0.22);
  --line-dash: rgba(255, 255, 255, 0.20);

  /* 品牌色 */
  --red: #ea5455;
  --red-ink: #ff8a8b;
  --red-btn: #cf4546;
  --red-btn-dk: #b93c3d;
  --gold: #ffd460;

  --r: 10px;
  --hd: 68px;          /* 顶栏高度 */
  --gap: clamp(1.25rem, 3vh, 2.25rem);

  --sans: "Inter", "Noto Sans SC", "Source Han Sans SC", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, monospace;
  /* 公式字体：与 KaTeX 同源（Computer Modern），保证行内与独立公式一致 */
  --font-math: "KaTeX_Main", "Latin Modern Math", "Cambria Math",
               "Times New Roman", serif;
  --max: 1200px;
}

/* ---------- 基础 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;   /* 整屏吸附 */
}
body {
  font-family: var(--sans);
  font-size: 1rem;
  font-optical-sizing: auto;
  background: var(--bg);
  color: var(--ink-2);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
code { font-family: var(--mono); font-size: 0.92em; color: var(--gold); }

/* 全局：文字可选中复制，但不显示闪烁插入符（与主站一致）；仅输入框豁免 */
body { caret-color: transparent; }
input, textarea, [contenteditable] { caret-color: auto; }

/* 行内公式：与 KaTeX 同一字体；变量用数学斜体 */
.f {
  font-family: var(--font-math);
  font-size: 1.05em;
  font-variant-numeric: normal;
  white-space: nowrap;
}
.f i {
  font-family: "KaTeX_Math", var(--font-math);
  font-style: italic;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

/* ---------- 全屏节 ---------- */
.screen {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--hd) + clamp(1.5rem, 4vh, 3rem)) 0 clamp(1.25rem, 3vh, 2rem);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* 分节靠底色深浅交替区分，不画分割线 */
.screen:nth-of-type(odd) { background: var(--bg); }
.screen:nth-of-type(even) { background: var(--bg-alt); }

/* 主内容居中 + 分块内容压底（与首屏同构） */
.screen--split { justify-content: space-between; }
.screen-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.screen-main > :last-child { margin-bottom: 0; }

/* ---------- 顶栏（固定，不占文档流） ---------- */
.hd {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.hd .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--hd);
}
.brand {
  display: inline-block;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;          /* 去掉行距，保证与顶栏中线精确对齐 */
  letter-spacing: -0.03em;
  color: var(--ink);
}
.brand span { color: var(--red); }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.nav a {
  font-size: 14px;
  color: var(--ink-3);
  transition: color 0.16s;
}
.nav a:hover { color: var(--ink); }
.nav a.btn--solid:hover { color: #fff; }

/* ---------- 按钮：只保留两种形态 ---------- */
/* 主：实心红；次：细描边 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.btn:hover { background: rgba(255, 255, 255, 0.07); }
.btn--solid {
  background: var(--red-btn);
  border-color: var(--red-btn);
  color: #fff;
}
.btn--solid:hover { background: var(--red-btn-dk); border-color: var(--red-btn-dk); }
.nav .btn { height: 38px; padding: 0 16px; font-size: 13px; color: #fff; }
.nav a.btn:hover { color: #fff; }

/* 按钮内图标（返回哇蓝的 wow 标） */
.btn svg { width: 16px; height: 16px; flex: none; fill: currentColor; }

/* 第三档：位置移动（页内定位 / 联系渠道），不套按钮外框 */
.link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.18s;
}
.link span { font-size: 13px; color: var(--ink-4); transition: color 0.18s, transform 0.18s; }
.link:hover { color: var(--ink); }
.link:hover span { color: var(--ink); transform: translateY(1px); }

/* ---------- Hero ---------- */
.hero { justify-content: space-between; }

.hero-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: clamp(0.5rem, 2vh, 1.5rem);
}
.hero h1 {
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.hero h1 em { font-style: normal; color: var(--red-ink); }
.hero .lede {
  margin-top: clamp(1rem, 2vh, 1.5rem);
  max-width: 32em;          /* 略放宽，避免末行只剩“皮书。” */
  font-size: clamp(0.98rem, 1.35vw, 1.06rem);
  line-height: 1.9;
  color: var(--ink-2);
}
.hero .lede strong { color: var(--ink); font-weight: 600; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: clamp(1.25rem, 2.5vh, 1.9rem); }

/* ---------- 媒体 ---------- */
/* 图片容器：不加描边，靠图片本身界定边界 */
.media {
  border-radius: var(--r);
  overflow: hidden;
}
.media img {
  width: 100%;
  height: auto;
  border-radius: var(--r);   /* 四角一致，图注在其下方独立排布 */
}
.media figcaption {
  padding: 0.7rem 0 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-4);
}
/* 定高媒体：保证整屏内不撑破（图区域弹性伸缩，图注固定高度） */
.media--fit { height: clamp(150px, 27vh, 280px); display: flex; flex-direction: column; }
.media--fit img { flex: 1; min-height: 0; width: 100%; object-fit: cover; }
.media--fit figcaption { flex: none; }
.media--contain img { object-fit: contain; padding: 12px; }
/* 通栏媒体：分子结构这类宽幅示意图 */
.media--wide { height: clamp(180px, 30vh, 300px); }

/* ---------- 数据条 ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 820px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat {
  position: relative;
  padding: 1.35rem 0 1.35rem 1.6rem;
}
/* 列分隔：实线 */
.stat::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--line);
}
.stat:nth-child(odd) { padding-left: 0; }
.stat:nth-child(odd)::after { display: none; }
@media (min-width: 820px) {
  .stat { padding-left: 1.6rem; }
  .stat:nth-child(odd) { padding-left: 1.6rem; }
  .stat:nth-child(odd)::after { display: block; }
  .stat:first-child { padding-left: 0; }
  .stat:first-child::after { display: none; }
}
.stat .v {
  display: block;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.stat .v small {
  margin-left: 0.3em;
  font-size: 0.48em;
  font-weight: 500;
  color: var(--ink-3);
}
.stat .k {
  display: block;
  margin-top: 0.35rem;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--ink-4);
}

/* ---------- 节标题 ---------- */
.sec-head {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: clamp(1rem, 2.5vw, 2rem);
  align-items: baseline;
  margin-bottom: var(--gap);
}
.sec-num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.sec-head h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--ink);
}
.sec-head p {
  grid-column: 2;
  margin-top: 0.8rem;
  max-width: 34em;
  font-size: clamp(0.96rem, 1.3vw, 1.04rem);
  line-height: 1.9;
  color: var(--ink-2);
}
.sec-head p strong { color: var(--ink); font-weight: 600; }

/* ---------- 分栏 ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; } }

/* ---------- 特性 ---------- */
.feats { display: grid; grid-template-columns: 1fr; }
@media (min-width: 760px) { .feats { grid-template-columns: repeat(3, 1fr); } }
.feat {
  position: relative;
  padding: 1.35rem 0;
}
@media (min-width: 760px) {
  .feat { padding: 1.35rem 1.6rem 1.35rem 0; }
  .feat + .feat { padding-left: 1.6rem; }
  .feat + .feat::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--line);
  }
}
.feat .idx {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.feat .big {
  display: block;
  margin: 0.5rem 0 0.45rem;
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.feat .big small {
  margin-left: 0.22em;
  font-size: 0.4em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-3);
}
.feat h3 {
  margin: 0.5rem 0 0.4rem;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}
.feat p { font-size: 0.94rem; line-height: 1.75; color: var(--ink-3); }

/* ---------- 双值 ---------- */
.pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.pair {
  position: relative;
  padding: 1.35rem 0;
}
.pair + .pair { padding-left: 1.6rem; }
.pair + .pair::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--line);
}
.pair .v {
  display: block;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pair:first-child .v { color: var(--gold); }
.pair:last-child .v { color: var(--red-ink); }
.pair .k {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink);
}
.pair p { margin-top: 0.2rem; font-size: 0.92rem; line-height: 1.75; color: var(--ink-3); }

/* ---------- 公式 ---------- */
/* 公式区：无外框，直接浮在底色上 */
.eq {
  padding: clamp(0.25rem, 1vh, 0.75rem) 0;
  margin-bottom: var(--gap);
  text-align: center;
}
.eq .formula {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  color: var(--ink);
  overflow-x: auto;
}
.eq .formula .katex { color: var(--ink); }
.eq-vars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(1.1rem, 2.4vh, 1.6rem);
}
.eq-var {
  position: relative;
  padding: 1.35rem 0.8rem 0;
}
.eq-var + .eq-var::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--line);
}
.eq-var .s {
  display: block;
  font-family: "KaTeX_Math", var(--font-math);
  font-size: 1.15rem;
  font-weight: 400;
  font-style: italic;
  color: var(--gold);
}
.eq-var .n { display: block; font-size: 0.88rem; color: var(--ink-3); margin-top: 0.15rem; }
.eq-var .t {
  display: block;
  font-size: 0.84rem;
  color: var(--ink-4);
  margin-top: 0.2rem;
  font-variant-numeric: tabular-nums;
}
.eq-out {
  margin-top: 1.6rem;
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.8;
  color: var(--ink-3);
}
.eq-out b {
  color: var(--red-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-left: 0.4em;
}

/* ---------- 表格 ---------- */
.tbl-wrap { overflow-x: auto; }
.tbl {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  border-top: 1px solid var(--line);
  text-align: left;
}
.tbl th,
.tbl td {
  padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: 1px dashed var(--line-dash);
  vertical-align: baseline;
}
.tbl th:last-child,
.tbl td:last-child { padding-right: 0; }
.tbl thead th {
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line-2);
  font-size: 0.94rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-3);
}
.tbl tbody th {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.7;
  color: var(--ink);
  white-space: nowrap;
}
.tbl td {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.tbl td.strong { color: var(--gold); font-weight: 700; font-size: 1.02rem; }
.tbl th:nth-child(2),
.tbl td:nth-child(2),
.tbl th:nth-child(3),
.tbl td:nth-child(3) {
  text-align: right;
  padding-right: 2.25rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- 规格 / 兼容：同一套栅格与行高，严格对齐 ---------- */
.specs,
.rows {
  display: grid;
  grid-template-columns: 1fr;
  list-style: none;
}
.specs { border-top: 1px solid var(--line); }
.rows { border-top: 1px solid var(--line); }   /* 两组之间的实线 */

.spec,
.rows li {
  display: grid;
  grid-template-columns: 8.5em 1fr;
  align-items: baseline;
  gap: 0 1.5rem;
  min-height: 3.05rem;
  padding: 0.85rem 0;
  border-bottom: 1px dashed var(--line-dash);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* 标签列：统一灰色、统一字重 */
.spec dt,
.rows b {
  font-size: 0.94rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink-3);
}

.spec dd {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.7;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.spec--hl dd { color: var(--gold); }
/* 下标不撑高行盒，保证 9 行等高 */
.spec dd sub,
.spec dd sup { line-height: 0; font-size: 0.72em; }
.rows span { color: var(--ink-2); }
@media (max-width: 640px) {
  .rows li { grid-template-columns: 1fr; }
  .rows span { margin-top: 0.15rem; }
}

/* 禁止项 */
.bans { list-style: none; border-top: 1px solid var(--line); }
.bans li {
  padding: 0.85rem 0 0.85rem 1.1rem;
  border-bottom: 1px dashed var(--line-dash);
  font-size: 0.95rem;
  line-height: 1.7;
}
.bans b { display: block; color: var(--red-ink); font-weight: 600; }
.bans span { display: block; margin-top: 0.2rem; color: var(--ink-3); font-size: 0.93rem; }

/* ---------- 步骤 ---------- */
.steps { list-style: none; border-top: 1px solid var(--line); }
.steps li {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0 clamp(1rem, 2.5vw, 2rem);
  padding: 0.85rem 0;
  border-bottom: 1px dashed var(--line-dash);
}
.steps .n {
  padding-top: 0.28em;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.steps h3 { font-size: 1.04rem; font-weight: 600; line-height: 1.45; color: var(--ink); }
.steps p {
  margin-top: 0.45rem;
  max-width: 42em;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-3);
}
.steps p strong { color: var(--ink-2); font-weight: 600; }

/* ---------- 窄图 ---------- */
.media--narrow { max-width: 480px; margin: var(--gap) auto 0; }

/* ---------- 说明段 ---------- */
.note {
  margin-top: 1.5rem;
  max-width: 42em;
  font-size: 0.94rem;
  line-height: 1.85;
  color: var(--ink-3);
}
.note strong { color: var(--red-ink); font-weight: 600; }

/* ---------- 白皮书 ---------- */
.wp p {
  max-width: 32em;
  font-size: clamp(0.98rem, 1.3vw, 1.06rem);
  line-height: 1.9;
  color: var(--ink-2);
}
.wp p strong { color: var(--gold); font-weight: 600; }
.wp .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: clamp(1.25rem, 2.5vh, 1.9rem); }

/* ---------- 收尾 ---------- */
.screen--last { justify-content: space-between; }
.cta-body { text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.cta-body h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.008em;
  color: var(--ink);
}
.cta-body p {
  margin-top: 0.85rem;
  font-size: 0.98rem;
  line-height: 1.85;
  color: var(--ink-3);
}
.cta-body .actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: clamp(1.5rem, 3vh, 2.2rem);
}

.ft {
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
}
.ft .wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 1rem 1.5rem;
}
/* 21px 文字与 30px 图标的视觉中线对齐 */
.ft .brand { justify-self: start; margin-top: 4px; }
.ft-back {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.ft-back img {
  display: block;
  height: 30px;
  width: auto;
  opacity: 0.85;
  transition: opacity 0.18s;
}
.ft-back span {
  font-size: 12px;
  color: var(--ink-4);
  transition: color 0.18s;
}
.ft-back:hover img { opacity: 1; }
.ft-back:hover span { color: var(--ink-2); }
.ft-copy { grid-column: 1 / -1; font-size: 12px; color: var(--ink-4); }

/* ---------- 动效 ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

.feats > [data-reveal]:nth-child(2),
.stats > [data-reveal]:nth-child(2) { transition-delay: 0.07s; }
.feats > [data-reveal]:nth-child(3),
.stats > [data-reveal]:nth-child(3) { transition-delay: 0.14s; }
.stats > [data-reveal]:nth-child(4) { transition-delay: 0.21s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
  .nav a:not(.btn) { display: none; }
  /* 小屏内容必然超过一屏：改用 proximity，避免卡住 */
  html { scroll-snap-type: y proximity; }
  .screen {
    min-height: auto;
    padding: calc(var(--hd) + 2.5rem) 0 3rem;
  }
  .hero { min-height: 100vh; min-height: 100svh; }
  .media--fit { height: 220px; }
  .ft .wrap { grid-template-columns: 1fr; }
  .ft-back { justify-self: start; align-items: flex-start; }
  .ft .brand { margin-top: 0; }
}
@media (max-width: 480px) {
  .eq-vars { grid-template-columns: 1fr; }
  .eq-var + .eq-var::before { display: none; }
  .eq-var + .eq-var { padding-top: 0.5rem; }
  .pairs { grid-template-columns: 1fr; }
  .pair + .pair { padding-left: 0; }
  .pair + .pair::after { display: none; }
}
/* 矮屏（笔记本 720p 等）：收紧纵向节奏，仍保持整屏 */
@media (max-height: 760px) and (min-width: 861px) {
  :root { --gap: 1.1rem; }
  .sec-head p { display: none; }
  .media--fit { height: 200px; }
  .feat p, .pair p, .steps p { line-height: 1.65; }
}