/* ==========================================================================
   Hilly Report — 官网样式表
   --------------------------------------------------------------------------
   设计约定（承接 binarysee.com 第 44 轮收敛出来的做法）：
   1. 所有字号 / 字重 / 行高 / 字距 / 间距 / 圆角 / 颜色都必须引用令牌，
      规则里不出现裸数字。刻度只有 :root 一处权威定义。
   2. 断点里只「重定义令牌」，不改选择器 —— 否则同一档字号会在两处定义。
   3. 全站只有一套栅格：.wrap(1200) + .grid(--gutter)，纵向节奏统一 --sec-y。
   4. 主色取自产品海报实测：#1e5eff；墨色 #06122e（海报标题的近黑蓝）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 令牌
   -------------------------------------------------------------------------- */
:root {
  /* 色彩：与 binarysee.com 主站同一套（index/hilly/quez 的 [data-theme="light"]）
     ★ 原来这里写的是 #005bf9 —— 和主站 #1e5eff 是两个不同的蓝：
       #005bf9 偏青、更亮，#1e5eff 偏靛。单看都好看，放在同一个导航下面
       就是「两个品牌」。主色只能有一个，这里对齐主站。
     ★ --hr-cyan 原来叫「吉祥物的天蓝」，但主站的品牌渐变是 蓝 → 紫
       (#1e5eff → #5a4df0)，不是蓝 → 天蓝。改叫品牌紫，只用做渐变末端。 */
  --hr-blue: #1e5eff;
  --hr-blue-deep: #1746c9;
  --hr-blue-soft: #3d86fb;
  --hr-purple: #5a4df0;        /* 渐变的另一端（对齐主站 --btn-grad-accent2） */
  --hr-purple-soft: #8f6bff;
  --hr-wash: #eef1ff;          /* 极浅蓝底：标签、图标底 */
  --hr-wash-2: #f8fafc;        /* 区块底（对齐主站 --bg-dark 浅色） */
  --hr-wash-3: #f1f5f9;        /* 分隔带底（对齐主站 --bg-card-hover） */

  --hr-ink: #06122e;
  --hr-ink-2: #33415c;
  /* ★ 这两档都按 4.5:1 的正文门槛取的值（不是「看起来浅一点」随便选的）：
     ink-3 在白底 6.22 / 浅蓝底 5.52，ink-4 在白底 4.92 / #f8fafc 上 4.65。
     原方案 ink-3 是 #6b7a94（4.34）、ink-4 是 #9aa7bd（2.43）—— 12px 的标签
     用 ink-4 只有 2.4:1，等于看不清。 */
  --hr-ink-3: #55617a;
  --hr-ink-4: #64718a;

  --hr-line: rgba(6, 18, 46, .10);
  --hr-line-2: rgba(6, 18, 46, .06);
  --hr-white: #ffffff;
  --hr-warn: #c62a30;
  --hr-ok: #1a8a5a;

  /* 字号：15 档，覆盖全站，无半档 */
  --fs-micro: 12px;
  --fs-meta: 13px;
  --fs-body: 15px;
  --fs-lead: 17px;
  --fs-h4: 18px;
  --fs-h3: clamp(19px, 1.5vw, 22px);
  --fs-h2: clamp(27px, 3.1vw, 40px);
  /* 区块内的二级标题（图文分组的标题）：必须比 --fs-h2 小一档，
     否则同一屏出现两个同尺寸大标题，层级就平了。 */
  --fs-sub: clamp(22px, 2.2vw, 30px);
  --fs-h1: clamp(32px, 4.4vw, 58px);
  --fs-mega: clamp(46px, 6.2vw, 80px);
  /* 卡片里的「首位字」（深 / 准 / 专…）：只做版式锚点，不参与阅读 */
  --fs-glyph: clamp(38px, 3.2vw, 50px);

  /* 字重：5 档 */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  /* ★ 800 这一档是主站 h2 的档位（index/hilly 的 h2 都是 800、h1 是 900）。
     这里原来最高只到 700，同一句标题在主站是「黑体」、在这个站是「粗体」，
     差的正是这一档笔画重量。 */
  --fw-heavy: 800;

  /* 行高：按「读法」分档，不按字号分 */
  --lh-flat: 1;
  --lh-tight: 1.16;
  --lh-h2: 1.3;
  --lh-head: 1.45;
  --lh-snug: 1.55;
  --lh-body: 1.75;

  /* 字距：4 档 */
  --ls-display: -.03em;
  --ls-heading: -.015em;
  --ls-label: .12em;
  --ls-none: 0;

  /* 间距：4px 基准，9 档 */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  /* 圆角：5 档 */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* 容器与节奏 */
  --max: 1200px;
  --pad: clamp(20px, 4vw, 48px);
  --gutter: clamp(20px, 2.6vw, 32px);
  --sec-y: clamp(64px, 7.4vw, 112px);

  /* 动效 */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: .18s var(--ease);
  --t-base: .28s var(--ease);
  --t-slow: .5s var(--ease);

  /* 阴影：只做两层，避免脏灰 */
  --sh-1: 0 1px 2px rgba(6, 18, 46, .05), 0 4px 14px rgba(6, 18, 46, .05);
  --sh-2: 0 2px 6px rgba(6, 18, 46, .06), 0 18px 44px rgba(6, 18, 46, .10);
  /* ★ 主按钮的蓝紫流光，直接抄主站 .hilly-btn-primary 的两层辉光：
     一层偏蓝、一层偏紫 —— 单层蓝是「一块蓝色投影」，两层才是这个站一贯的观感。 */
  --sh-blue: 0 0 16px rgba(30, 94, 255, .45), 0 0 30px rgba(143, 107, 255, .28);
  --sh-blue-strong: 0 0 22px rgba(30, 94, 255, .7), 0 0 38px rgba(143, 107, 255, .42);

  /* 主按钮渐变 = 主站 --btn-grad。左右两端同色，中段紫，
     配 background-size:200% + position 切换做流光。 */
  --grad-btn: linear-gradient(to right, #1e5eff 0%, #8f6bff 51%, #1e5eff 100%);

  --nav-h: 72px;
}

/* --------------------------------------------------------------------------
   2. 基础
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 锚点落点要躲开固定导航，否则目标标题会被压在栏下 */
  scroll-padding-top: calc(var(--nav-h) + var(--s4));
}

body {
  margin: 0;
  background: var(--hr-white);
  color: var(--hr-ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

::selection { background: rgba(30, 94, 255, .16); }

:focus-visible {
  outline: 2px solid var(--hr-blue);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* 无障碍：跳转到主内容 */
.skip {
  position: absolute;
  left: var(--s4);
  top: -100px;
  z-index: 200;
  padding: var(--s3) var(--s5);
  background: var(--hr-blue);
  color: var(--hr-white);
  border-radius: var(--r-md);
  transition: top var(--t-fast);
}
.skip:focus { top: var(--s4); }

/* --------------------------------------------------------------------------
   3. 版式与容器
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.sec { padding-block: var(--sec-y); position: relative; }
.sec--tight { padding-block: calc(var(--sec-y) * .62); }
.sec--wash { background: var(--hr-wash-2); }
.sec--band { background: var(--hr-wash-3); }
.sec--ink { background: var(--hr-ink); color: var(--hr-white); }

/* 小节之间用发丝线收口，避免「两块白」糊在一起 */
.sec--line { border-top: 1px solid var(--hr-line-2); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
  line-height: var(--lh-flat);
  color: var(--hr-blue);
  text-transform: uppercase;
  margin-bottom: var(--s4);
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: var(--r-pill);
}

/* ★ CJK 默认「任意两字可断」，所以标题常被断在词中间（「要过 / 关的」）。
   auto-phrase 让浏览器按词组切行；不支持的浏览器退回默认行为，只是断点差一点，
   不会影响可读性。配合下方 .h2 的 text-wrap:balance 消除末行孤字。 */
.h1, .h2, .h3, .h4 {
  word-break: auto-phrase;
  text-wrap: balance;
}

.h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
.h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-heading);
  /* 两行时让两行长度接近，别出现「最后一行只剩两个字」 */
  text-wrap: balance;
}
/* 图文分组里的标题降一档，跟区块标题拉开层级 */
.split-body .h2 { font-size: var(--fs-sub); }
.h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-none);
}
.h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  line-height: var(--lh-head);
}
.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--hr-ink-2);
}
.body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--hr-ink-2); }
.meta { font-size: var(--fs-meta); line-height: var(--lh-snug); color: var(--hr-ink-3); }
.micro { font-size: var(--fs-micro); line-height: var(--lh-snug); color: var(--hr-ink-3); }

.blue { color: var(--hr-blue); }
.ink { color: var(--hr-ink); }
.muted { color: var(--hr-ink-3); }
.nowrap { white-space: nowrap; }
.keep { word-break: keep-all; }   /* CJK 默认任意两字可断，短标签要挡一下 */

/* 区块头：左标题 + 右说明，全站唯一一套两栏。
   标题栏比说明栏宽一成：40px 的汉字在 536px 里一行只排 13 个字，
   15 字以上的标题必然断在词中间。 */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: var(--gutter);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 56px);
}
/* ★ 标题的「行宽上限」不能用 ch 估汉字：一个汉字约等于 2ch，
   18ch 只够排 9 个字，于是「从「无从下笔」到「有章可循」」被折成
   「…到「有章 / 可循」」。按汉字算，30ch ≈ 15 字，正好一行。 */
.sec-head .h2 { max-width: 30ch; }
.sec-head .lead { max-width: 46ch; justify-self: end; }
.sec-head--one { grid-template-columns: minmax(0, 1fr); }
.sec-head--one .h2 { max-width: 32ch; }
.sec-head--one .lead { justify-self: start; max-width: 58ch; margin-top: var(--s4); }

/* 通用网格 */
.grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}
.grid--2 { --cols: 2; }
.grid--3 { --cols: 3; }
.grid--4 { --cols: 4; }

/* --------------------------------------------------------------------------
   4. 按钮
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  height: 46px;
  padding-inline: var(--s6);
  border-radius: var(--r-pill);
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  line-height: var(--lh-flat);
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast),
    box-shadow var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}
.btn svg { flex: none; }

/* ★ 主按钮原来是「平涂的 #1e5eff + 一块蓝色投影」。
   主站（index / hilly / quez）的主 CTA 全是「蓝紫渐变胶囊 + 双层辉光 + hover 流光」，
   同一个站里两种主按钮，是最容易看出「不是一套」的地方之一。
   ★ hover 只改 background-position / box-shadow，绝不写 background 简写 ——
     简写会把 background-image 重置成 none，而按钮文字是白的，结果白字白底。 */
.btn--primary {
  color: var(--hr-white);
  border: 1px solid transparent;
  background-color: transparent;
  background-image: var(--grad-btn);
  background-size: 200% auto;
  background-position: left center;
  box-shadow: var(--sh-blue);
}
.btn--primary:hover {
  color: var(--hr-white);
  background-color: transparent;
  background-position: right center;
  box-shadow: var(--sh-blue-strong);
  transform: translateY(-1px);
}
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: var(--hr-white);
  color: var(--hr-ink);
  border: 1px solid var(--hr-line);
}
.btn--ghost:hover { border-color: var(--hr-blue); color: var(--hr-blue); }

/* 深底上的按钮：不用透明度做交互反馈，直接换色 */
.btn--light { background: var(--hr-white); color: var(--hr-blue); }
.btn--light:hover { background: var(--hr-wash); }

.btn--outline-light {
  border: 1px solid rgba(255, 255, 255, .34);
  color: var(--hr-white);
}
.btn--outline-light:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .6); }

.btn--sm { height: 40px; padding-inline: var(--s5); font-size: var(--fs-meta); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* 文字链 */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: var(--fw-semi);
  color: var(--hr-blue);
  font-size: var(--fs-body);
}
.link-arrow svg { transition: transform var(--t-fast); }
.link-arrow:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   5. 导航
   --------------------------------------------------------------------------
   ★ 第 70 轮第二轮：导航整体换成与 index / hilly / quez 同一份标记与样式，
     由 assets/css/nav.css 负责（从主站 styles.css 提取的 68 条规则）。
     本文件不再保留任何 .navbar / .nav-* / .logo-* 的定义，避免两份规则打架。
     品牌位、菜单、CTA、汉堡、移动端抽屉全部见 nav.css。
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   6. 首屏
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(48px, 7vw, 96px));
  padding-bottom: clamp(56px, 6vw, 88px);
  overflow: hidden;
  isolation: isolate;
}
/* 光晕：两个径向渐变，蓝系但极淡，印刷网点用重复线性渐变做，纯 CSS 无图。
   ★ 横向不能写成 -10%：那会让伪元素比 .hero 宽 20%，section 的 scrollWidth
   随之变大（768 下多 77px）。虽然被 overflow:hidden 裁掉了、看不到，
   但任何「量横向溢出」的检查都会被它误导。改为左右都贴 0。 */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% 0 auto 0;
  height: 140%;
  z-index: -2;
  background:
    radial-gradient(52% 44% at 18% 6%, rgba(30, 94, 255, .13), transparent 70%),
    radial-gradient(46% 40% at 86% 0%, rgba(90, 77, 240, .14), transparent 72%),
    linear-gradient(180deg, var(--hr-wash-2), var(--hr-white) 62%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--hr-line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--hr-line-2) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(70% 60% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000 30%, transparent 78%);
  opacity: .8;
}

.hero-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(32px, 4.6vw, 72px);
  align-items: center;
}

.hero-copy .h1 { margin-bottom: var(--s5); }
.hero-copy .h1 em {
  font-style: normal;
  color: var(--hr-blue);
  position: relative;
  white-space: nowrap;
}
/* 关键词下划：用背景渐变画而不是 border，随字号缩放不会变粗。
   ★ bottom 必须落在基线以下：写 .04em 时线条正好压在字的下缘，
   看着像把字切了一刀。 */
.hero-copy .h1 em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.10em;
  height: .1em;
  background: linear-gradient(90deg, rgba(30, 94, 255, .28), rgba(90, 77, 240, .12));
  border-radius: var(--r-pill);
}

.hero-sub {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--hr-ink-2);
  max-width: 34ch;
  margin-bottom: var(--s6);
}
.hero-sub b { color: var(--hr-ink); font-weight: var(--fw-semi); }

.hero-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5) var(--s6);
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--hr-line-2);
}
.hero-foot div { display: flex; flex-direction: column; gap: 2px; }
.hero-foot b {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-flat);
}
.hero-foot span { font-size: var(--fs-meta); color: var(--hr-ink-3); }

/* 产品窗口框 */
.win {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--hr-white);
  border: 1px solid var(--hr-line);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.win-bar {
  display: flex;
  align-items: center;
  gap: var(--s2);
  height: 34px;
  padding-inline: var(--s4);
  background: var(--hr-wash-2);
  border-bottom: 1px solid var(--hr-line-2);
}
.win-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hr-line);
  flex: none;
}
.win-bar i:nth-child(1) { background: #ff5f57; }
.win-bar i:nth-child(2) { background: #febc2e; }
.win-bar i:nth-child(3) { background: #28c840; }
.win-bar span {
  margin-left: var(--s3);
  font-size: var(--fs-micro);
  color: var(--hr-ink-4);
  letter-spacing: var(--ls-none);
}
.win img { width: 100%; }

/* ★ .hero-figure 必须自己定位：不加 position 时，它的绝对定位子元素
   （右下那张「来源可溯」浮动卡）会往上找到 .hero 当基准，
   结果卡片掉到首屏底部、压在客户条上。 */
.hero-figure { position: relative; }

/* 悬浮小卡：贴在窗口右下，说明「来源可溯」 */
.win-float {
  position: absolute;
  right: 0;
  bottom: calc(var(--s6) * -1);
  width: 246px;
  padding: var(--s4);
  border-radius: var(--r-lg);
  background: var(--hr-white);
  border: 1px solid var(--hr-line-2);
  box-shadow: var(--sh-2);
}
.win-float .row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semi);
  color: var(--hr-ink);
}
.win-float .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hr-ok);
  flex: none;
}
.win-float p { font-size: var(--fs-micro); color: var(--hr-ink-3); line-height: var(--lh-snug); margin-top: var(--s3); }
.win-float .bar {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--hr-wash-3);
  margin-top: var(--s3);
  overflow: hidden;
}
.win-float .bar u {
  display: block;
  height: 100%;
  width: 82%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--hr-blue), var(--hr-purple));
}

/* 客户条 */
.logos {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: var(--s6);
  border-top: 1px solid var(--hr-line-2);
}
.logos p { font-size: var(--fs-micro); letter-spacing: var(--ls-label); color: var(--hr-ink-4); text-transform: uppercase; }
.logos ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s5) clamp(24px, 4vw, 56px);
  margin-top: var(--s4);
}
.logos li {
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  color: var(--hr-ink-3);
  letter-spacing: var(--ls-none);
}

/* --------------------------------------------------------------------------
   7. 六字能力（深准专全多懂）
   -------------------------------------------------------------------------- */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}
.cap {
  position: relative;
  padding: clamp(24px, 2.6vw, 32px);
  background: var(--hr-white);
  border: 1px solid var(--hr-line-2);
  border-radius: var(--r-lg);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
  overflow: hidden;
}
.cap:hover {
  border-color: rgba(30, 94, 255, .28);
  box-shadow: var(--sh-1);
  transform: translateY(-2px);
}
/* 大字：装饰性，只做视觉锚点，读屏时由 aria-hidden 隐藏。
   ★ 走正常文档流，不做绝对定位。一开始做成绝对定位飘在右上角，
   结果 80px 的字正好和标题压在同一片区域，字叠字看着很脏；
   放进流里当「首位字」反而更像版式语言。 */
.cap-glyph {
  display: block;
  font-size: var(--fs-glyph);
  font-weight: var(--fw-bold);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-display);
  color: #c2dbff;
  margin-bottom: var(--s4);
  user-select: none;
  transition: color var(--t-base);
}
.cap:hover .cap-glyph { color: #a8caff; }
.cap > * { position: relative; z-index: 1; }
.cap h3 { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
/* 圆角方块里的序号/缩写。★ 不能写死 width:24px —— 「DOC」「HTML」
   这类型号缩写会超出方块（实测量到 5px / 14px 溢出）。改成 min-width
   + 左右内边距，一位数字仍是 24 见方，两三位自动变胶囊。 */
.cap h3 i {
  font-style: normal;
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  color: var(--hr-blue);
  background: var(--hr-wash);
  min-width: 24px;
  height: 24px;
  padding-inline: 6px;
  border-radius: var(--r-sm);
  display: inline-grid;
  place-items: center;
  flex: none;
  line-height: var(--lh-flat);
}
.cap p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--hr-ink-2); }
.cap-key {
  display: block;
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px dashed var(--hr-line);
  font-size: var(--fs-meta);
  color: var(--hr-ink-3);
}
.cap-key b { color: var(--hr-blue); font-weight: var(--fw-semi); }

/* --------------------------------------------------------------------------
   8. 痛点对照
   -------------------------------------------------------------------------- */
.pain-list { display: grid; gap: var(--s3); }
.pain {
  display: grid;
  grid-template-columns: 44px minmax(0, 1.06fr) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
  padding: clamp(20px, 2.2vw, 26px) clamp(20px, 2.4vw, 30px);
  border-radius: var(--r-lg);
  background: var(--hr-white);
  border: 1px solid var(--hr-line-2);
  transition: border-color var(--t-base), background var(--t-base);
}
.pain:hover { border-color: rgba(30, 94, 255, .24); }
.pain-tag {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--hr-wash);
  color: var(--hr-blue);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-flat);
  flex: none;
}
.pain-q { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--hr-ink-3); }
.pain-q strong { display: block; color: var(--hr-ink); font-weight: var(--fw-semi); font-size: var(--fs-h4); margin-bottom: var(--s2); line-height: var(--lh-head); }
.pain-q q { quotes: "「" "」"; }
.pain-a { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--hr-ink-2); }
.pain-a::before {
  content: "Hilly Report";
  display: block;
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  color: var(--hr-blue);
  text-transform: uppercase;
  margin-bottom: var(--s2);
}

/* --------------------------------------------------------------------------
   9. 图文分组（特性详解）
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4.4vw, 72px);
  align-items: center;
}
.split + .split { margin-top: clamp(56px, 7vw, 96px); }
.split--flip .split-media { order: 2; }
.split-body .h2 { margin-bottom: var(--s4); }
.split-body .lead { max-width: 44ch; }
.split-body .body { max-width: 48ch; }

.split-media { position: relative; }
.split-media .win { box-shadow: var(--sh-2); }

/* 要点清单 */
.ticks { display: grid; gap: var(--s3); margin-top: var(--s5); }
.ticks li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--s3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--hr-ink-2);
}
.ticks li svg { margin-top: .42em; color: var(--hr-blue); }
.ticks b { color: var(--hr-ink); font-weight: var(--fw-semi); }

/* 小号数字徽标，用于「流程」 */
.step-num {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  background: var(--hr-blue);
  color: var(--hr-white);
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  line-height: var(--lh-flat);
  flex: none;
}

/* --------------------------------------------------------------------------
   10. 流程
   -------------------------------------------------------------------------- */
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); counter-reset: step; }
.flow-step {
  position: relative;
  padding-top: var(--s5);
  /* 原来是 2px 的 --hr-wash-3，而这节的底色正是 --hr-wash-3 —— 线等于没画。
     改用发丝线色，压 1px 就够。 */
  border-top: 1px solid var(--hr-line);
  transition: border-color var(--t-base);
}
.flow-step::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block;
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  color: var(--hr-ink-4);
  margin-bottom: var(--s3);
  line-height: var(--lh-flat);
  transition: color var(--t-base);
}
.flow-step:hover { border-top-color: var(--hr-blue); }
.flow-step:hover::before { color: var(--hr-blue); }
.flow-step h4 { margin-bottom: var(--s2); }
.flow-step p { font-size: var(--fs-body); line-height: var(--lh-snug); color: var(--hr-ink-3); }

/* --------------------------------------------------------------------------
   11. 行业场景卡
   -------------------------------------------------------------------------- */
.ind-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}
.ind {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: clamp(22px, 2.4vw, 28px);
  background: var(--hr-white);
  border: 1px solid var(--hr-line-2);
  border-radius: var(--r-lg);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.ind:hover { border-color: rgba(30, 94, 255, .26); box-shadow: var(--sh-1); transform: translateY(-2px); }
.ind-ico {
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--hr-wash);
  color: var(--hr-blue);
  flex: none;
}
.ind h4 { font-size: var(--fs-h4); line-height: var(--lh-head); }
.ind .role { font-size: var(--fs-micro); color: var(--hr-ink-4); letter-spacing: var(--ls-label); text-transform: uppercase; }
.ind p { font-size: var(--fs-meta); line-height: var(--lh-snug); color: var(--hr-ink-3); }
.ind .out {
  margin-top: auto;
  padding-top: var(--s3);
  border-top: 1px dashed var(--hr-line);
  font-size: var(--fs-meta);
  line-height: var(--lh-snug);
  color: var(--hr-ink-2);
}
.ind .out b { color: var(--hr-blue); font-weight: var(--fw-semi); }

/* --------------------------------------------------------------------------
   12. 模板库
   -------------------------------------------------------------------------- */
.tpl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.tpl {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s5);
  min-height: 148px;
  background: var(--hr-white);
  border: 1px solid var(--hr-line-2);
  border-radius: var(--r-lg);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.tpl:hover { border-color: rgba(30, 94, 255, .3); box-shadow: var(--sh-1); transform: translateY(-3px); }
.tpl-ico { color: var(--hr-blue); margin-bottom: var(--s2); }
.tpl h4 { font-size: var(--fs-h4); line-height: var(--lh-head); }
.tpl p { font-size: var(--fs-micro); line-height: var(--lh-snug); color: var(--hr-ink-3); }
.tpl .pages {
  margin-top: auto;
  font-size: var(--fs-micro);
  color: var(--hr-ink-4);
}
.tpl--more {
  align-items: center;
  justify-content: center;
  text-align: center;
  border-style: dashed;
  background: var(--hr-wash-2);
}
.tpl--more .h4 { color: var(--hr-blue); }
.tpl--more p { max-width: 20ch; }

/* 报告形态标签 */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding-inline: var(--s3);
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  line-height: var(--lh-flat);
  background: var(--hr-wash);
  color: var(--hr-blue);
}
.chip--ghost { background: var(--hr-white); border: 1px solid var(--hr-line); color: var(--hr-ink-3); }
.chip--ok { background: rgba(26, 138, 90, .1); color: var(--hr-ok); }
.chip--warn { background: rgba(198, 42, 48, .08); color: var(--hr-warn); }

/* 报告结构示意（不是截图，是排版能力本身） */
.doc-demo {
  background: var(--hr-white);
  border: 1px solid var(--hr-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.doc-demo .win-bar { height: 32px; }
.doc-body { padding: clamp(22px, 3vw, 38px); }
.doc-body .toc {
  display: grid;
  gap: var(--s2);
  padding-bottom: var(--s4);
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--hr-line-2);
}
.doc-body .toc span {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  font-size: var(--fs-meta);
  color: var(--hr-ink-3);
  padding: 3px 0;
}
.doc-body .toc span b { color: var(--hr-ink); font-weight: var(--fw-medium); }
.doc-body .toc span i { font-style: normal; color: var(--hr-ink-4); font-variant-numeric: tabular-nums; }
.doc-body .toc span.lv2 { padding-left: var(--s5); }
.doc-h { font-size: var(--fs-body); font-weight: var(--fw-bold); margin: var(--s5) 0 var(--s3); }
.doc-h:first-child { margin-top: 0; }
.doc-p { font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--hr-ink-2); }
/* 正文里的标记：事实 / 判断 / 待核实 */
.mk {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  padding: 0 5px;
  border-radius: 4px;
  margin-inline: 2px;
  white-space: nowrap;
}
.mk--fact { background: rgba(26, 138, 90, .12); color: var(--hr-ok); }
.mk--judge { background: rgba(30, 94, 255, .1); color: var(--hr-blue); }
.mk--todo { background: rgba(198, 42, 48, .09); color: var(--hr-warn); }
.fn {
  font-size: var(--fs-micro);
  color: var(--hr-blue);
  vertical-align: super;
  line-height: var(--lh-flat);
  margin-left: 1px;
}
.doc-foot {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px dashed var(--hr-line);
  font-size: var(--fs-micro);
  color: var(--hr-ink-4);
  line-height: var(--lh-snug);
}

/* --------------------------------------------------------------------------
   13. 手风琴（FAQ）
   -------------------------------------------------------------------------- */
.acc { border-top: 1px solid var(--hr-line-2); }
.acc-item { border-bottom: 1px solid var(--hr-line-2); }
.acc-btn {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s5);
  padding: var(--s5) 0;
  text-align: left;
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  line-height: var(--lh-head);
  color: var(--hr-ink);
  transition: color var(--t-fast);
}
.acc-btn:hover { color: var(--hr-blue); }
.acc-btn .ico {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--hr-line);
  color: var(--hr-ink-3);
  transition: transform var(--t-base), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  margin-top: 1px;
}
.acc-btn[aria-expanded="true"] .ico {
  transform: rotate(45deg);
  background: var(--hr-blue);
  border-color: var(--hr-blue);
  color: var(--hr-white);
}
.acc-panel {
  overflow: hidden;
  height: 0;
  transition: height var(--t-base);
}
.acc-panel > div { padding-bottom: var(--s5); max-width: 72ch; }
.acc-panel p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--hr-ink-2); }
.acc-panel p + p { margin-top: var(--s3); }

/* --------------------------------------------------------------------------
   14. 数据条
   -------------------------------------------------------------------------- */
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.metric { padding-top: var(--s5); border-top: 1px solid var(--hr-line-2); }
.metric b {
  display: block;
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-flat);
  color: var(--hr-ink);
  font-variant-numeric: tabular-nums;
}
.metric b small { font-size: .42em; font-weight: var(--fw-semi); color: var(--hr-blue); margin-left: 2px; }
.metric span { display: block; margin-top: var(--s3); font-size: var(--fs-meta); color: var(--hr-ink-3); }
.sec--ink .metric { border-top-color: rgba(255, 255, 255, .16); }
.sec--ink .metric b { color: var(--hr-white); }
.sec--ink .metric span { color: rgba(255, 255, 255, .62); }

/* --------------------------------------------------------------------------
   15. CTA
   -------------------------------------------------------------------------- */
/* ★ 第 70 轮：结尾 CTA 从满饱和蓝渐变卡改成浅色卡。
   原来的问题是「白页 → 一整块最重的蓝 → 深藏青页脚」，全站最重的一块颜色
   出现在最后一段，和前文轻语言脱节，也和紧挨着的深色页脚撞在一起。
   改成浅底 + 细边 + 蓝紫两团淡光斑，文字用墨色，按钮沿用全站渐变主按钮 ——
   深色留给页脚一处，页面收尾是「浅 → 浅 → 深」的正常节奏。 */
.cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(40px, 5.4vw, 72px);
  border: 1px solid var(--hr-line-2);
  /* 两团光斑直接画成背景层，不用伪元素。★ 伪元素一旦用负 inset 或
     translate 出界，就会把 .cta 的 scrollWidth 撑大（实测 707px 宽时多 72px），
     「横向溢出」检查会一直误报；画在背景里既不撑宽也不会被裁。 */
  background:
    radial-gradient(52% 130% at 100% 0%, rgba(30, 94, 255, .10), transparent 72%),
    radial-gradient(46% 100% at 0% 100%, rgba(90, 77, 240, .07), transparent 74%),
    linear-gradient(180deg, #ffffff 0%, #f0f5ff 100%);
  color: var(--hr-ink);
  isolation: isolate;
}
/* ★ 两团光斑用 translate 定位而不是负 inset：负 inset 会把 .cta 的
   scrollWidth 撑大（707px 宽时多出 84px），横向溢出检查会误报。 */
.cta .h2 { color: var(--hr-ink); max-width: 22ch; }
.cta p { color: var(--hr-ink-2); max-width: 52ch; margin-top: var(--s4); }
.cta .btn-row { margin-top: var(--s6); }
.cta .micro { color: var(--hr-ink-3); margin-top: var(--s5); }

/* --------------------------------------------------------------------------
   16. 页脚
   -------------------------------------------------------------------------- */
.footer { background: var(--hr-ink); color: rgba(255, 255, 255, .72); padding-block: clamp(48px, 5.6vw, 80px) var(--s6); }
.footer a { transition: color var(--t-fast); }
.footer a:hover { color: var(--hr-white); }
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 48px);
  padding-bottom: var(--s8);
}
/* 页脚品牌位（导航已改用 nav.css 的 .logo-group，这两个类现在只服务页脚） */
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand-logo { display: block; width: auto; height: 54px; object-fit: contain; }
.footer .brand-name b { color: var(--hr-white); }
.footer .brand-name span { color: rgba(255, 255, 255, .5); }
.footer-about { font-size: var(--fs-meta); line-height: var(--lh-body); max-width: 34ch; margin-top: var(--s5); color: rgba(255, 255, 255, .56); }
.footer-col h4 {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .44);
  margin-bottom: var(--s4);
}
.footer-col li + li { margin-top: var(--s3); }
.footer-col a, .footer-col span { font-size: var(--fs-meta); line-height: var(--lh-snug); }
/* 页脚链接的可点高度补到 24px（WCAG 2.5.8 的最小目标尺寸），
   视觉上看不出差别，但手指按得准。 */
.footer-col a { display: inline-block; padding-block: 2px; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3) var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: var(--fs-micro);
  color: rgba(255, 255, 255, .44);
}
.footer-bottom .links { display: flex; flex-wrap: wrap; gap: var(--s4); }
.footer-bottom .links a { display: inline-block; padding-block: 2px; }

/* --------------------------------------------------------------------------
   17. 返回顶部
   -------------------------------------------------------------------------- */
.totop {
  position: fixed;
  right: clamp(16px, 2.4vw, 32px);
  bottom: clamp(16px, 2.4vw, 32px);
  z-index: 90;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--hr-white);
  color: var(--hr-ink-2);
  border: 1px solid var(--hr-line);
  box-shadow: var(--sh-1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base), color var(--t-fast), border-color var(--t-fast);
}
.totop.is-show { opacity: 1; visibility: visible; transform: translateY(0); }
.totop:hover { color: var(--hr-blue); border-color: var(--hr-blue); }

/* --------------------------------------------------------------------------
   18. 入场动画
   --------------------------------------------------------------------------
   ★ 默认状态必须是「完全可见」。隐藏只写在 html.js-reveal 下面 —— 也就是说
   只有脚本确实接管了才隐藏。理由：IntersectionObserver 只在渲染帧上计算交集，
   快速甩动（一帧内进又出）会整个跳过某个元素，它就会永久停在 opacity:0。
   内容不可见是「看不见的破坏」，代价远大于少一段动画。
   -------------------------------------------------------------------------- */
.js-reveal .reveal { opacity: 0; transform: translateY(14px); }
.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}

/* --------------------------------------------------------------------------
   19. 响应式：只重定义令牌与布局，不改字号选择器
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  :root {
    --fs-mega: clamp(40px, 8vw, 64px);
    --sec-y: clamp(56px, 8vw, 84px);
  }
  .sec-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .sec-head .lead { justify-self: start; max-width: 56ch; margin-top: var(--s4); }
  .hero-top { grid-template-columns: minmax(0, 1fr); }
  .hero-sub { max-width: 46ch; }
  .hero-figure { margin-top: var(--s7); }
  .win-float { right: var(--s4); bottom: calc(var(--s5) * -1); }
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
  .split--flip .split-media { order: 0; }
  .cap-grid, .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* ★ 不带修饰符的 .grid 也要跟着收：默认 3 列，漏掉它就会在窄屏
     把卡片压成 34px 宽（实测「关于我们」的三张卡被压到 h3 溢出 14px）。 */
  .grid, .tpl-grid, .flow, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pain { grid-template-columns: 44px minmax(0, 1fr); }
  .pain-a { grid-column: 2; }
}

@media (max-width: 900px) {
  /* 导航的手机端形态由 nav.css 的 .mobile-menu / .mobile-toggle 接管，
     这里不再做抽屉 —— 之前那套 .navbar.is-open + .nav-menu 已随导航一起移除。 */
}

@media (max-width: 720px) {
  :root {
    --fs-h1: clamp(28px, 8vw, 40px);
    --fs-h2: clamp(23px, 6.4vw, 30px);
    --fs-mega: clamp(34px, 11vw, 50px);
    --fs-lead: 16px;
    /* --nav-h 不再在窄屏降到 60：主站手机端同样是 72，两边一起走才不跳 */
  }
  .cap-grid, .ind-grid, .tpl-grid, .flow, .grid, .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--gutter); }
  .metric b { font-size: var(--fs-h2); }
  .footer-top { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .pain { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .pain-tag { width: 34px; height: 34px; font-size: var(--fs-body); border-radius: var(--r-sm); }
  .pain-a { grid-column: auto; }
  .hero-foot { gap: var(--s4) var(--s5); }
  .btn { height: 44px; padding-inline: var(--s5); }
  .win-float { position: static; width: auto; margin-top: var(--s4); }
  .cta { border-radius: var(--r-lg); }
  .sec--tight { padding-block: calc(var(--sec-y) * .72); }
}

@media (max-width: 420px) {
  :root {
    --fs-h1: clamp(26px, 8.6vw, 32px);
    --fs-body: 14px;
    --pad: 18px;
  }
  .hero-copy .h1 em { white-space: normal; }
  .metrics { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   20. 降级：用户要求减少动态时，去掉位移与过渡
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .js-reveal .reveal { opacity: 1; transform: none; }
}