/* ══════════════════════════════════════════════════════════════
   features.css —— 「深入了解」页专用样式
   命名空间：.fd-*（feature deep-dive）。全部规则均带 fd 前缀，
   不改动 style.css 中任何既有类，因此对本站其它页面零影响。
   依赖 style.css 的设计变量（颜色/圆角/阴影/过渡）。
   ══════════════════════════════════════════════════════════════ */

.fd-body {
  background: var(--app-gradient);
  background-attachment: fixed;

  /* ── 本页专属亮金 ──
     全站 --champagne-deep(#A8854B) 偏褐发暗，用作眉标/标签/渐变起点时显得沉闷。
     这里提亮（色相不变、饱和度与亮度上调），只作用于深入了解页；
     若效果满意，可提升为 style.css 的站级令牌以统一全站。 */
  --fd-gold:    220, 187, 126;   /* 中金 #DCBB7E（原 #C9A96E）*/
  --fd-gold-dp: 195, 159, 87;    /* 深金 #C39F57（原 #A8854B）*/
  --fd-gold-lt: 245, 231, 198;   /* 高光金 #F5E7C6（原 #E8D5A3）*/

  /* ── App 产品卡胶囊的配色令牌 ──
     官网 style.css 只有 --green/--green-bg，**没有 --amber/--purple 系列** ——
     缺了会让 var() 解析为空，"驻留类/部位"标签直接掉色（无文字色、无底色）。
     以下值取自 src/frontend/App.css 的亮色主题，与 App 内完全一致。 */
  --amber: #ab6400;
  --amber-bg: #fff7c2;
  --purple: #8e4ec6;
  --purple-bg: #f7edfe;
}

/* ── 通用排版 ── */
.fd-section-eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: 2px;
  color: rgb(var(--fd-gold-dp)); margin-bottom: 12px;
}
.fd-h2 {
  font-size: 40px; line-height: 1.25; font-weight: 700;
  color: var(--text); margin-bottom: 16px; letter-spacing: -0.4px;
}
.fd-lead {
  font-size: 17px; line-height: 1.75; color: var(--text-secondary);
  max-width: 620px;
}
.fd-lead strong { color: var(--text); font-weight: 600; }
.fd-note { font-size: 13px; color: var(--text-muted); margin-top: 14px; }

/* ── 入场动效：由 JS 加 .is-in；无 JS 时也要能看到内容 ── */
.fd-reveal {
  opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.fd-reveal.is-in { opacity: 1; transform: none; }
.fd-reveal[data-delay="1"] { transition-delay: 0.07s; }
.fd-reveal[data-delay="2"] { transition-delay: 0.14s; }
.fd-reveal[data-delay="3"] { transition-delay: 0.21s; }
.fd-reveal[data-delay="4"] { transition-delay: 0.28s; }

/* ══════════════ 1. 首屏 ══════════════ */
.fd-hero {
  position: relative; overflow: hidden;
  min-height: calc(100vh - 60px);
  display: flex; align-items: center;
  padding: 60px 0 80px;
}
/* 视差光晕：唯一的大面积视差层，只做 translate，不触发重排 */
.fd-hero-glow {
  position: absolute; left: 50%; top: -18%;
  width: 1180px; height: 1180px; margin-left: -590px;
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--fd-gold), 0.28) 0%, rgba(var(--fd-gold), 0.11) 38%, rgba(var(--fd-gold), 0) 68%);
  pointer-events: none; will-change: transform;
}
.fd-hero-inner { position: relative; text-align: center; }
.fd-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 3px;
  color: rgb(var(--fd-gold-dp)); margin-bottom: 26px;
  padding: 5px 18px; border-radius: 999px;
  background: rgba(var(--fd-gold), 0.12);
  border: 1px solid rgba(var(--fd-gold), 0.35);
}
.fd-hero-title {
  font-size: 62px; line-height: 1.24; font-weight: 700;
  letter-spacing: -1.2px; color: var(--text); margin-bottom: 26px;
}
.fd-hero-title em {
  font-style: normal;
  background: linear-gradient(120deg, rgb(var(--fd-gold-dp)) 0%, rgb(var(--fd-gold)) 50%, rgb(var(--fd-gold-lt)) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.fd-hero-sub {
  font-size: 19px; line-height: 1.75; color: var(--text-secondary);
  max-width: 640px; margin: 0 auto 54px;
}
.fd-scroll-cue {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 12px; letter-spacing: 1.5px; color: var(--text-muted);
}
.fd-scroll-cue svg { animation: fd-bob 1.9s ease-in-out infinite; }
@keyframes fd-bob {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* ══════════════ 2. 大数字 ══════════════ */
.fd-numbers { padding: 110px 0 100px; }
.fd-numbers .fd-h2, .fd-numbers .fd-lead { text-align: center; }
.fd-numbers .fd-lead { margin: 0 auto; }
.fd-numbers .fd-section-eyebrow { text-align: center; }
.fd-stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 22px; margin-top: 62px;
}
.fd-stat {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 34px 26px 30px;
}
.fd-stat-num {
  font-size: 46px; font-weight: 700; line-height: 1.05;
  letter-spacing: -1.5px; color: var(--text);
  font-variant-numeric: tabular-nums;
  /* 数字用等宽数字宽度，避免滚动时宽度跳动 */
}
.fd-stat-label {
  font-size: 14px; font-weight: 700; color: rgb(var(--fd-gold-dp));
  margin: 8px 0 12px;
}
.fd-stat p { font-size: 13px; line-height: 1.7; color: var(--text-secondary); }

/* ══════════════ 3. 上下文对比 ══════════════ */
.fd-context { padding: 40px 0 120px; }
.fd-context-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
}
.fd-context-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 30px 30px 26px;
  margin: 0;
}
.fd-context-card figcaption {
  font-size: 16px; font-weight: 700; color: var(--text);
  padding-bottom: 18px; margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.fd-bar-row {
  display: grid; grid-template-columns: 108px 1fr 68px;
  align-items: center; gap: 14px; margin-bottom: 16px;
}
.fd-bar-name { font-size: 13px; color: var(--text-secondary); }
.fd-bar-val {
  font-size: 14px; font-weight: 700; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.fd-bar {
  height: 26px; border-radius: 6px;
  background: rgba(var(--fd-gold), 0.10);
  overflow: hidden;
}
.fd-bar i {
  display: block; height: 100%; width: var(--w);
  border-radius: 6px;
  background: linear-gradient(90deg, rgb(var(--fd-gold-dp)), rgb(var(--fd-gold)));
  transform-origin: left center;
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.fd-context-src {
  font-size: 12px; color: var(--text-muted);
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border);
}

/* ══════════════ 4. 八步向导（吸顶） ══════════════ */
/* 高度给足，滚动过程中内部吸顶；JS 按滚动进度切换当前步 */
.fd-wizard { height: 300vh; position: relative; }
.fd-wizard-sticky {
  position: sticky; top: 60px; height: calc(100vh - 60px);
  display: flex; align-items: center;
  background: linear-gradient(180deg, rgba(243, 240, 234, 0.96) 0%, rgba(247, 244, 239, 0.96) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.fd-wizard-sticky .fd-h2, .fd-wizard-sticky .fd-lead { text-align: center; }
.fd-wizard-sticky .fd-lead { margin: 0 auto; }
.fd-wizard-sticky .fd-section-eyebrow { text-align: center; }
.fd-wizard-body { margin-top: 46px; }
.fd-wizard-visual { text-align: center; margin-bottom: 34px; }
.fd-wizard-num {
  font-size: 72px; font-weight: 700; line-height: 1;
  color: var(--text); letter-spacing: -3px;
  font-variant-numeric: tabular-nums;
}
.fd-wizard-num small { font-size: 22px; font-weight: 600; color: var(--text-muted); letter-spacing: 0; margin-left: 6px; }
.fd-wizard-detail {
  font-size: 16px; color: var(--text-secondary);
  min-height: 26px; margin: 10px 0 22px;
  transition: opacity var(--transition);
}
.fd-wizard-track {
  height: 4px; width: min(560px, 82%); margin: 0 auto;
  background: var(--border); border-radius: 999px; overflow: hidden;
}
.fd-wizard-track i {
  display: block; height: 100%; width: var(--p, 12.5%);
  background: linear-gradient(90deg, rgb(var(--fd-gold-dp)), rgb(var(--fd-gold)));
  border-radius: 999px;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.fd-wizard-steps {
  list-style: none; margin: 0 auto; padding: 0;
  width: min(720px, 100%);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 8px;
}
.fd-wstep {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
  padding: 11px 13px;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.fd-wstep b { display: block; font-size: 14px; font-weight: 700; color: var(--text-secondary); }
.fd-wstep span { display: block; font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.fd-wstep.is-done { border-color: rgba(var(--fd-gold), 0.5); background: rgba(var(--fd-gold), 0.07); }
.fd-wstep.is-done b { color: rgb(var(--fd-gold-dp)); }
.fd-wstep.is-active {
  border-color: rgb(var(--fd-gold));
  box-shadow: 0 6px 20px rgba(var(--fd-gold), 0.22);
  transform: translateY(-2px);
}
.fd-wstep.is-active b { color: var(--text); }
.fd-wstep.is-active span { color: var(--text-secondary); }

/* ══════════════ 5. 四库隔离 ══════════════ */
.fd-dbs { padding: 120px 0 100px; }
.fd-dbs .fd-h2, .fd-dbs .fd-lead, .fd-dbs .fd-section-eyebrow { text-align: center; }
.fd-dbs .fd-lead { margin: 0 auto; }
.fd-db-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 20px; margin-top: 56px;
}
.fd-db {
  position: relative;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 26px;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.fd-db:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-hover); }
.fd-db--ro { border-color: rgba(var(--fd-gold), 0.55); }
.fd-db--enc { border-color: rgba(var(--fd-gold), 0.75); background: linear-gradient(160deg, #fff 0%, rgba(var(--fd-gold), 0.06) 100%); }
.fd-db-tag {
  position: absolute; top: 20px; right: 20px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  padding: 3px 10px; border-radius: 999px;
  color: var(--text-muted); background: var(--bg); border: 1px solid var(--border);
}
.fd-db--ro .fd-db-tag { color: rgb(var(--fd-gold-dp)); background: rgba(var(--fd-gold), 0.12); border-color: rgba(var(--fd-gold), 0.4); }
.fd-db--enc .fd-db-tag { color: var(--on-primary); background: var(--primary); border-color: var(--primary); }
.fd-db h3 {
  font-size: 17px; font-weight: 700; color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  margin-bottom: 10px;
}
.fd-db p { font-size: 14px; line-height: 1.72; color: var(--text-secondary); }
.fd-db ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fd-db ul li {
  font-size: 12px; color: rgb(var(--fd-gold-dp)); font-weight: 600;
  background: rgba(var(--fd-gold), 0.12);
  border-radius: 999px; padding: 3px 12px;
}

/* ══════════════ 6. 项目加密 ══════════════ */
.fd-crypto { position: relative; padding: 110px 0; overflow: hidden; }
.fd-crypto-glow {
  position: absolute; right: -14%; top: 8%;
  width: 760px; height: 760px;
  background: radial-gradient(circle at 50% 50%, rgba(var(--fd-gold), 0.20) 0%, rgba(var(--fd-gold), 0) 66%);
  pointer-events: none; will-change: transform;
}
.fd-crypto .container { position: relative; }
.fd-crypto .fd-lead { max-width: 660px; }

/* 加密前后对比：左边「软件里打开」正常可读，右边「磁盘上的文件」一片乱码。
   刻意不出现任何实现细节（算法模式、文件头、字节长度等），只讲用户能感知的结果。 */
.fd-lock {
  display: grid; grid-template-columns: 1fr 64px 1fr;
  align-items: center; margin-top: 48px;
}
.fd-lock-pane {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px 24px 18px;
  box-shadow: var(--shadow-md);
}
.fd-lock-head {
  font-size: 12px; font-weight: 700; letter-spacing: 0.6px;
  color: var(--text-muted); margin-bottom: 12px;
}
.fd-lock-body p {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  font-size: 14px; color: var(--text); padding: 8px 0;
  border-bottom: 1px dashed var(--border);
}
.fd-lock-body p:last-child { border-bottom: none; }
.fd-lock-body b {
  font-weight: 600; color: var(--text-secondary);
  font-variant-numeric: tabular-nums; flex: none;
}
.fd-lock-foot {
  font-size: 12px; color: var(--text-muted);
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}
/* 乱码侧：等宽块字符 + 浅底，一眼看出「读不了」 */
.fd-lock-mask { background: var(--bg); border-radius: var(--radius); padding: 2px 14px; }
.fd-lock-mask p {
  display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; letter-spacing: 2px; color: #b0b0b0; border-bottom-color: transparent;
}
.fd-lock-mid { display: flex; justify-content: center; color: rgb(var(--fd-gold-dp)); }

/* 算法标识：主文案不谈判算法（目标客户看不懂），只在下方留一行小字作为可信度背书 */
.fd-crypto-tech {
  margin-top: 26px; font-size: 12px; letter-spacing: 0.8px;
  color: var(--text-muted); display: inline-flex; align-items: center; gap: 7px;
}
.fd-crypto-tech::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--fd-gold, rgb(var(--fd-gold)));
}

.fd-crypto-list { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 16px; }
.fd-crypto-list li {
  font-size: 15px; line-height: 1.7; color: var(--text-secondary);
  padding-left: 22px; position: relative; max-width: 740px;
}
.fd-crypto-list li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgb(var(--fd-gold));
}
.fd-crypto-list b { color: var(--text); font-weight: 700; margin-right: 8px; }

/* ══════════════ 7. 主页 ══════════════ */
.fd-home { padding: 110px 0; }
.fd-home .fd-h2, .fd-home .fd-section-eyebrow { text-align: center; }

/* 迷你项目列表 */

/* 迷你查询 */

/* ── 仿 App 界面面板（产品列表 / 原料查询）──
   刻意照真机 HomePage 的结构复刻：两个页签 + 卡片列表 / 节点图。
   颜色也取真机令牌：淋洗类=green、驻留类=amber、部位=purple、节点边框=金色 35%。 */
.fd-app-block { margin-top: 64px; }
.fd-app-intro { max-width: 640px; margin-bottom: 22px; }
.fd-app-intro h3 { font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.fd-app-intro p { font-size: 15px; line-height: 1.72; color: var(--text-secondary); }

.fd-app {
  /* 用浅灰底而不是白底：里面的产品卡是纯白，白底会让卡片"陷进去"看不出层次 */
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 22px 24px 26px;
}
/* 页签：复刻 .home-tab / .home-tab--active */

/* 产品卡片：复刻 .product-card */
.fd-app-body { display: grid; gap: 12px; }
/* 数值全部对准 App（.product-card / .product-card-name）：
   内边距 18×20、圆角 --radius、标题 20px/650/1.35、行距 gap 12px。
   唯一有意保留的差异：底色用不透明白 + --border，而非 App 的半透明玻璃 ——
   本面板底是浅灰，照搬玻璃会让卡片与面板糊在一起（App 里卡片是浮在渐变背景上的）。 */
.fd-pcard {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.fd-pcard:hover { border-color: rgba(var(--fd-gold), 0.5); box-shadow: var(--shadow-md); }
.fd-pcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fd-pcard-name { font-size: 20px; font-weight: 650; line-height: 1.35; color: var(--text); }
.fd-pcard-acts { display: flex; gap: 6px; flex: none; }
.fd-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  color: var(--text-muted); background: var(--bg); border: 1px solid var(--border);
}
.fd-iconbtn--danger { color: var(--red); }
.fd-pcard-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* 与 App 的 .product-card-chip 逐项对齐：
   注意 App 用的是**圆角矩形（--radius-sm = 8px）而不是胶囊**，
   字号是 13.8px（App 根字号 14px × 0.9857rem），并带 currentColor 22% 的细边框。 */
.fd-chip {
  display: inline-flex; align-items: center;
  font-size: 13.8px; font-weight: 650; letter-spacing: 0.01em; line-height: 1.3;
  padding: 4px 12px; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.fd-chip--rinse { color: var(--green); background: var(--green-bg); }
.fd-chip--leave { color: var(--amber); background: var(--amber-bg); }
.fd-chip--site  { color: var(--purple); background: var(--purple-bg); }
.fd-pcard-meta {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  margin-top: 10px; font-size: 12px; color: var(--text-muted);
}
.fd-pcard--create {
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: rgb(var(--fd-gold-dp));
  border-style: dashed; border-color: rgba(var(--fd-gold), 0.55);
  background: rgba(var(--fd-gold), 0.06); padding: 14px;
}

/* ── 静态树状图（查询 → 结果 → 详情）──
   刻意只做展示：不接检索、不内嵌法规数据。
   坐标写死为 940×390 的画布，节点用 left/top 绝对定位，
   与上方 SVG 的 path 坐标一一对应，因此连线永远对准节点。
   容器宽度不足 1000px 时整体切换为纵向布局（见下方媒体查询）。 */
.fd-tree {
  position: relative;
  width: 940px; height: 390px;
  margin: 6px auto 0;
  color: rgba(var(--fd-gold), 0.85);   /* 连线颜色继承给 SVG */
}
.fd-tree-wire { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 连线"生长"：pathLength=1 把长度归一化，故所有 path 可用同一组 dash 值 */
.fd-wire {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.75s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s);
}
.fd-tree.is-in .fd-wire { stroke-dashoffset: 0; }

.fd-tnode {
  position: absolute; left: var(--x); top: var(--y); width: var(--w);
  background: var(--surface);
  border: 1px solid rgba(var(--fd-gold), 0.42);
  border-radius: var(--radius);
  padding: 12px 14px;
  opacity: 0; transform: translateX(-16px) scale(0.97);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s),
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s);
}
.fd-tree.is-in .fd-tnode { opacity: 1; transform: none; }

/* 容器本身不做淡入（动画交给子节点与连线），但仍借用 .fd-reveal 的滚动触发 */
.fd-tree.fd-reveal { opacity: 1; transform: none; transition: none; }

.fd-tnode--query { padding: 0; border: none; background: none; }
.fd-tquery {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px;
  border: 1px solid rgba(var(--fd-gold), 0.62); border-radius: var(--radius-sm);
  background: #fff; font-size: 13.5px; color: var(--text);
  box-shadow: 0 0 0 3px rgba(var(--fd-gold), 0.15);
}
.fd-tquery svg { color: var(--text-muted); flex: none; }
.fd-tsearch {
  margin-left: auto; font-size: 11.5px; font-weight: 650;
  color: var(--on-primary); background: var(--primary);
  border-radius: 6px; padding: 3px 10px;
}
.fd-tnode--result { padding: 9px 13px; }
.fd-tnode--result b { display: block; font-size: 13.5px; font-weight: 700; color: var(--text); }
.fd-tnode--result em { display: block; font-style: normal; font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.fd-tnode--result.is-sel {
  border-color: rgba(var(--fd-gold), 0.9);
  box-shadow: 0 4px 14px rgba(var(--fd-gold), 0.22);
}
.fd-tnode--detail { padding: 15px 17px; }
.fd-tname { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.fd-trow { display: flex; align-items: baseline; gap: 12px; font-size: 12.5px; padding: 3px 0; }
.fd-trow span { color: var(--text-muted); min-width: 4.6em; flex: none; }
.fd-trow b { color: var(--text); font-weight: 600; }
.fd-trow .fd-tok { color: var(--green); }
.fd-tsrc {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: rgb(var(--fd-gold-dp));
}
.fd-tree-hint { text-align: right; margin-top: 12px; font-size: 11.5px; color: var(--text-muted); }

/* ══════════════ 8. 报告 ══════════════ */
.fd-report { padding: 110px 0; }
.fd-report-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 68px; align-items: center; }
.fd-report-list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 12px; }
.fd-report-list li {
  font-size: 14.5px; line-height: 1.7; color: var(--text-secondary);
  padding-left: 24px; position: relative;
}
.fd-report-list li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 6px; height: 11px; border-right: 2px solid rgb(var(--fd-gold));
  border-bottom: 2px solid rgb(var(--fd-gold)); transform: rotate(42deg);
}
.fd-doc { margin: 0; text-align: center; }
.fd-doc-page {
  background: #fff; border: 1px solid var(--border);
  border-radius: 6px; box-shadow: var(--shadow-lg);
  width: min(340px, 100%); margin: 0 auto;
  padding: 30px 28px 34px; text-align: left;
  transform: rotate(-1.4deg);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.fd-doc:hover .fd-doc-page { transform: rotate(0deg) translateY(-6px); }
.fd-doc-line {
  display: block; height: 7px; width: var(--w, 100%);
  background: #ececec; border-radius: 999px; margin-bottom: 11px;
}
.fd-doc-title { height: 13px; width: 58%; background: #d8d8d8; margin-bottom: 22px; }
.fd-doc-table {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 5px; margin: 20px 0 22px; padding: 14px 0;
  border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
}
.fd-doc-table i {
  display: block; height: 12px; border-radius: 3px;
  background: rgba(var(--fd-gold), 0.30);
}
.fd-doc-table i:nth-child(-n+6) { background: rgba(var(--fd-gold), 0.62); }
.fd-doc figcaption { font-size: 12px; color: var(--text-muted); margin-top: 20px; }

/* ══════════════ 9. 离线与隐私 ══════════════ */
.fd-privacy { padding: 40px 0 120px; }
.fd-privacy .fd-h2, .fd-privacy .fd-lead, .fd-privacy .fd-section-eyebrow { text-align: center; }
.fd-privacy .fd-lead { margin: 0 auto; }
.fd-privacy-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 22px; margin-top: 54px;
}
.fd-privacy-item {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg); padding: 26px 24px;
  box-shadow: var(--shadow);
}
.fd-privacy-item h3 { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 9px; }
.fd-privacy-item p { font-size: 13px; line-height: 1.72; color: var(--text-secondary); }

/* ══════════════ 10. 收尾 ══════════════ */
.fd-cta { padding: 20px 0 120px; text-align: center; }
.fd-cta h2 { font-size: 44px; font-weight: 700; letter-spacing: -0.8px; color: var(--text); margin-bottom: 16px; }
.fd-cta p { font-size: 17px; color: var(--text-secondary); margin-bottom: 34px; }
.fd-cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ══════════════ 响应式 ══════════════ */
@media (max-width: 1000px) {
  .fd-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .fd-privacy-grid { grid-template-columns: repeat(2, 1fr); }
  /* 窄屏：上下文对比与报告两栏改单列
     （注意：原是多选择器一行 .fd-context-grid, .fd-home-grid, .fd-report-grid；
      删除废弃的 .fd-home-grid 时不能用"整行匹配"的批量正则，否则会连带删掉另两个 ） */
  .fd-context-grid, .fd-report-grid { grid-template-columns: 1fr; gap: 40px; }
  .fd-report-grid { gap: 48px; }
  .fd-doc { order: -1; }
  /* 手机上不做吸顶长滚动（手指滚动体验差），改为常规纵向排布；
     同时隐藏大数字/进度条 —— 不吸顶时它们无法随滚动推进，会一直停在「1 / 8」像卡住，
     而下面 8 张卡片本身已把每一步讲清楚。 */
  .fd-wizard { height: auto; }
  .fd-wizard-sticky {
    position: static; height: auto; padding: 72px 0;
    align-items: flex-start; display: block;
  }
  .fd-wizard-visual { display: none; }
  .fd-wizard-steps { grid-template-columns: repeat(2, 1fr); }
  /* 手机上不区分「已完成/当前」，八步是并列清单 */
  .fd-wstep.is-done, .fd-wstep.is-active { border-color: var(--border); background: var(--surface); box-shadow: none; transform: none; }
  .fd-wstep.is-done b, .fd-wstep.is-active b { color: var(--text); }
  .fd-wstep.is-done span, .fd-wstep.is-active span { color: var(--text-muted); }
}
@media (max-width: 800px) {
  .fd-hero { min-height: auto; padding: 76px 0 64px; }
  .fd-hero-title { font-size: 34px; letter-spacing: -0.6px; }
  .fd-hero-sub { font-size: 16px; margin-bottom: 40px; }
  .fd-hero-glow { width: 620px; height: 620px; margin-left: -310px; top: -10%; }
  .fd-h2 { font-size: 27px; }
  .fd-lead { font-size: 15.5px; }
  .fd-numbers { padding: 72px 0 64px; }
  .fd-stat-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .fd-stat { padding: 24px 22px; }
  .fd-stat-num { font-size: 38px; }
  .fd-context { padding: 20px 0 76px; }
  .fd-context-card { padding: 22px 20px; }
  .fd-bar-row { grid-template-columns: 90px 1fr 62px; gap: 10px; }
  .fd-dbs, .fd-home, .fd-report, .fd-crypto { padding: 76px 0; }
  .fd-privacy { padding: 20px 0 76px; }
  .fd-db-grid, .fd-privacy-grid { grid-template-columns: 1fr; gap: 16px; }
  /* 加密对比在窄屏改为纵向，锁图标转 90° */
  .fd-lock { grid-template-columns: 1fr; gap: 14px; }
  .fd-lock-mid { transform: rotate(90deg); }
  .fd-lock-pane { padding: 18px 20px 16px; }
  .fd-lock-mask p { font-size: 12px; letter-spacing: 1px; }
  /* 仿 App 面板在窄屏：节点图改纵向，连线转 90°；卡片元信息换行 */
  .fd-app { padding: 18px 18px 22px; }
  .fd-app-block { margin-top: 44px; }
  /* 树状图改纵向：画布与绝对坐标失效，改为左轨 + 分支短线的树形缩进 */
  .fd-tree { width: auto; height: auto; margin: 0; padding-left: 16px; display: grid; gap: 10px; }
  .fd-tree-wire { display: none; }
  .fd-tnode { position: relative; left: auto; top: auto; width: auto; }
  .fd-tree::before {
    content: ""; position: absolute; left: 5px; top: 26px; bottom: 26px;
    width: 1px; background: rgba(var(--fd-gold), 0.5);
  }
  .fd-tnode--result::before, .fd-tnode--detail::before {
    content: ""; position: absolute; left: -11px; top: 50%;
    width: 11px; height: 1px; background: rgba(var(--fd-gold), 0.5);
  }
  .fd-tnode--query::before { display: none; }
  .fd-app-intro h3 { font-size: 19px; }
  .fd-env-cell { padding: 11px 13px; font-size: 13px; }
  .fd-wizard-num { font-size: 54px; }
  .fd-wizard-detail { font-size: 14px; min-height: 40px; }
  .fd-cta h2 { font-size: 30px; }
  .fd-cta { padding: 10px 0 80px; }
}

/* ══════════════ 无障碍：尊重减弱动效偏好 ══════════════ */
/* JS 在命中该偏好时会直接置终态，这里同时兜住「JS 未执行」的情况 */
@media (prefers-reduced-motion: reduce) {
  .fd-reveal { opacity: 1; transform: none; transition: none; }
  .fd-hero-glow, .fd-crypto-glow { display: none; }
  .fd-scroll-cue svg { animation: none; }
  .fd-bar i { transition: none; }
  .fd-wizard-track i { transition: none; }
  .fd-wstep { transition: none; }
}