/* ============================================================
   components.css — 可复用 UI 组件库
   ============================================================ */

/* ---------- 通用区块 ---------- */
.section { margin: var(--s-8) 0; scroll-margin-top: calc(var(--topbar-h) + 16px); }
.section > h2, .section > h3 { scroll-margin-top: calc(var(--topbar-h) + 16px); }
.section__lead { color: var(--txt-2); font-size: 1.05rem; margin-bottom: var(--s-5); }
.h-eyebrow { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.h-eyebrow h2 { font-size: var(--f-h2); }
.h-eyebrow h3 { font-size: var(--f-h3); }

/* 大章节分隔(对应 PPT 的 SECTION 分隔页) */
.divider {
  position: relative;
  scroll-margin-top: calc(var(--topbar-h) + 16px);
  margin: var(--s-9) 0 var(--s-6);
  padding: var(--s-6) var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(77,124,255,.05), transparent),
    var(--panel);
  overflow: hidden;
}
.divider::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--grad-brand);
}
.divider__no {
  font-family: var(--f-num); font-size: clamp(2.4rem, 7vw, 4.2rem); font-weight: 800;
  line-height: 1; color: transparent;
  -webkit-text-stroke: 1.4px color-mix(in srgb, var(--c-teal) 55%, transparent);
  opacity: .9;
}
.divider__kicker { margin: var(--s-2) 0 var(--s-1); }
.divider__title { font-size: var(--f-h2); margin-bottom: var(--s-2); }
.divider__items { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); color: var(--txt-3); font-size: var(--f-sm); }
.divider__items span { position: relative; padding-left: var(--s-4); }
.divider__items span::before { content: "▸"; position: absolute; left: 0; color: var(--c-teal); }

/* ---------- 模块页头 ---------- */
.modhead {
  position: relative; margin-bottom: var(--s-7);
  padding-bottom: var(--s-6); border-bottom: 1px solid var(--line);
}
.modhead__top { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-4); flex-wrap: wrap; }
.modhead__no {
  font-family: var(--f-num); font-weight: 800; font-size: var(--f-sm);
  color: var(--c-teal); border: 1px solid var(--c-teal); border-radius: var(--r-pill);
  padding: 3px 12px; letter-spacing: .05em;
}
.modhead h1 { font-size: var(--f-h1); margin-bottom: var(--s-2); }
.modhead__sub { color: var(--txt-2); font-size: 1.1rem; }
.modhead__base {
  margin-top: var(--s-4); font-size: var(--f-xs); color: var(--txt-3);
  display: inline-flex; gap: var(--s-2); align-items: center;
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r-pill); padding: 5px 14px;
}

/* ---------- Chips / 标签 ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  font-size: var(--f-xs); color: var(--txt-2);
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 3px 11px; white-space: nowrap;
}
.chip--accent { color: var(--c-teal); border-color: color-mix(in srgb, var(--c-teal) 40%, transparent); background: color-mix(in srgb, var(--c-teal) 8%, transparent); }
.chip--amber { color: var(--c-amber); border-color: color-mix(in srgb, var(--c-amber) 40%, transparent); }
.chip--violet { color: var(--c-violet); border-color: color-mix(in srgb, var(--c-violet) 45%, transparent); }

/* ---------- ① MetricBig 指标大数字 ---------- */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-4); margin: var(--s-5) 0; }
.metric {
  position: relative; padding: var(--s-5);
  background: var(--grad-panel), var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-md);
  transition: transform var(--t-mid) var(--ease), border-color var(--t-mid);
}
.metric:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c-teal) 40%, transparent); }
.metric__val {
  font-family: var(--f-num); font-weight: 800; line-height: 1;
  font-size: clamp(2rem, 4vw, 2.9rem);
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
  display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
}
.metric__unit { font-size: .9rem; font-weight: 700; -webkit-text-fill-color: var(--c-teal); color: var(--c-teal); }
.metric__label { color: var(--txt-1); font-weight: 600; margin-top: var(--s-3); font-size: var(--f-sm); }
.metric__sub { color: var(--txt-3); font-size: var(--f-xs); margin-top: 2px; }
.metric--amber .metric__val { background: linear-gradient(135deg, var(--c-amber), #ffd07a); -webkit-background-clip: text; background-clip: text; }
.metric--amber .metric__unit { color: var(--c-amber); -webkit-text-fill-color: var(--c-amber); }
.metric--plain .metric__val { background: none; color: var(--txt-1); -webkit-text-fill-color: var(--txt-1); }

/* 数字墙(密集版,用于性能数字) */
.numwall { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin: var(--s-5) 0; }
.numwall__cell { background: var(--panel); padding: var(--s-4) var(--s-5); }
.numwall__cell:hover { background: var(--panel-hover); }
.numwall__val { font-family: var(--f-num); font-weight: 800; font-size: 1.7rem; color: var(--c-teal); line-height: 1.1; }
.numwall__val small { font-size: .85rem; color: var(--txt-2); font-weight: 600; }
.numwall__label { color: var(--txt-2); font-size: var(--f-xs); margin-top: var(--s-2); line-height: 1.45; }

/* ---------- ② CompareTable 对比表 ---------- */
.tablewrap { position: relative; margin: var(--s-5) 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.tablescroll { overflow-x: auto; overscroll-behavior-x: contain; }
.swipe-hint { display: none; font-size: var(--f-2xs); color: var(--txt-4); padding: 4px var(--s-4); border-bottom: 1px solid var(--line-soft); background: var(--panel-2); }
table.ctable { width: 100%; border-collapse: collapse; font-size: var(--f-sm); min-width: 560px; }
.ctable th, .ctable td { padding: var(--s-3) var(--s-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.ctable thead th {
  background: var(--panel-2); color: var(--txt-1); font-weight: 700; font-size: var(--f-xs);
  letter-spacing: .03em; position: sticky; top: 0; white-space: nowrap;
}
.ctable tbody tr:hover { background: var(--panel); }
.ctable tbody td:first-child, .ctable thead th:first-child {
  position: sticky; left: 0; background: var(--panel-2); font-weight: 600; color: var(--txt-1);
  box-shadow: 1px 0 0 var(--line-soft); z-index: 1;
}
.ctable tbody tr:hover td:first-child { background: var(--panel-hover); }
.ctable td:first-child { background: var(--bg-2); }
/* 高亮列(把"介入式"作为主角列突出) */
.ctable .col-hl { background: color-mix(in srgb, var(--c-teal) 9%, transparent); }
.ctable thead .col-hl { background: color-mix(in srgb, var(--c-teal) 18%, var(--panel-2)); color: var(--c-teal-soft); }
.ctable tbody tr:hover .col-hl { background: color-mix(in srgb, var(--c-teal) 14%, transparent); }
.ctable caption { caption-side: top; text-align: left; padding: var(--s-3) var(--s-4); color: var(--txt-2); font-size: var(--f-sm); background: var(--panel); border-bottom: 1px solid var(--line); }
.ctable .num { font-family: var(--f-num); white-space: nowrap; }
.cell-strong { color: var(--txt-1); font-weight: 700; }

/* 评级星 */
.stars { color: var(--c-amber); letter-spacing: 1px; white-space: nowrap; font-size: .9em; }
.stars .off { color: var(--txt-4); }

/* ---------- ③ Timeline 时间线 ---------- */
.timeline { position: relative; margin: var(--s-5) 0; padding-left: var(--s-6); }
.timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--c-teal), var(--c-blue)); opacity: .5; }
.tl-item { position: relative; padding: 0 0 var(--s-5) var(--s-5); }
.tl-item::before {
  content: ""; position: absolute; left: -5px; top: 4px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--bg-1); border: 2.5px solid var(--c-teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-teal) 12%, transparent);
}
.tl-item--done::before { background: var(--c-teal); }
.tl-date { font-family: var(--f-num); font-weight: 700; color: var(--c-teal); font-size: var(--f-sm); }
.tl-title { color: var(--txt-1); font-weight: 600; margin: 2px 0; }
.tl-desc { color: var(--txt-2); font-size: var(--f-sm); }

/* ---------- ④ PipelineSteps 流水线步骤 ---------- */
.pipeline { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--s-2); margin: var(--s-5) 0; }
.pstep {
  flex: 1 1 150px; position: relative; padding: var(--s-4) var(--s-4);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
}
.pstep__n { font-family: var(--f-num); font-weight: 800; color: var(--c-teal); font-size: var(--f-sm); opacity: .9; }
.pstep__t { color: var(--txt-1); font-weight: 700; margin: 2px 0 var(--s-1); font-size: .98rem; }
.pstep__d { color: var(--txt-2); font-size: var(--f-xs); line-height: 1.5; }
.pipeline .parrow { display: flex; align-items: center; color: var(--c-teal); font-size: 1.2rem; flex: 0 0 auto; opacity: .7; }
@media (max-width: 620px) { .pipeline { flex-direction: column; } .pipeline .parrow { transform: rotate(90deg); justify-content: center; padding: 2px 0; } }

/* ---------- ⑤ CardGrid 卡片网格 ---------- */
.cards { display: grid; gap: var(--s-4); margin: var(--s-5) 0; }
.cards--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.cards--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.cards--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) { .cards--3, .cards--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .cards--2, .cards--3, .cards--4 { grid-template-columns: 1fr; } }
.card {
  position: relative; padding: var(--s-5);
  background: var(--grad-panel), var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-md);
  transition: transform var(--t-mid) var(--ease), border-color var(--t-mid), box-shadow var(--t-mid);
}
.card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c-teal) 35%, transparent); box-shadow: var(--sh-2); }
.card__icon { width: 34px; height: 34px; color: var(--c-teal); margin-bottom: var(--s-3); }
.card__tag { font-family: var(--f-num); font-size: var(--f-2xs); letter-spacing: .12em; color: var(--c-teal); text-transform: uppercase; font-weight: 700; }
.card__title { color: var(--txt-1); font-weight: 700; font-size: 1.05rem; margin: var(--s-1) 0 var(--s-2); }
.card__title .lead-n { color: var(--c-teal); font-family: var(--f-num); margin-right: 6px; }
.card__body { color: var(--txt-2); font-size: var(--f-sm); }
.card__body p:last-child { margin-bottom: 0; }
.card--accent { border-color: color-mix(in srgb, var(--c-teal) 45%, transparent); background: var(--grad-brand-soft), var(--panel); }
.card--top { border-top: 3px solid var(--c-teal); }
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }

/* 三列对照小卡(优势/局限/启示 这类) */
.triptych { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: var(--s-4); margin: var(--s-5) 0; }

/* ---------- ⑥ RiskRegister 风险登记表 ---------- */
.risk { width: 100%; border-collapse: collapse; font-size: var(--f-sm); margin: var(--s-5) 0; }
.risk th, .risk td { padding: var(--s-3) var(--s-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.risk thead th { background: var(--panel-2); color: var(--txt-1); font-size: var(--f-xs); font-weight: 700; }
.risk tbody tr:hover { background: var(--panel); }
.risk .r-name { color: var(--txt-1); font-weight: 600; white-space: nowrap; }
.badge { display: inline-block; font-size: var(--f-2xs); font-weight: 700; padding: 2px 10px; border-radius: var(--r-pill); white-space: nowrap; letter-spacing: .04em; }
.badge--hi { background: color-mix(in srgb, var(--c-danger) 18%, transparent); color: var(--c-danger); border: 1px solid color-mix(in srgb, var(--c-danger) 45%, transparent); }
.badge--mid { background: color-mix(in srgb, var(--c-warn) 16%, transparent); color: var(--c-warn); border: 1px solid color-mix(in srgb, var(--c-warn) 45%, transparent); }
.badge--low { background: color-mix(in srgb, var(--c-ok) 16%, transparent); color: var(--c-ok); border: 1px solid color-mix(in srgb, var(--c-ok) 45%, transparent); }
.badge--info { background: color-mix(in srgb, var(--c-info) 16%, transparent); color: var(--c-blue-soft); border: 1px solid color-mix(in srgb, var(--c-info) 45%, transparent); }

/* ---------- ⑦ Callout 强调框 ---------- */
.callout {
  position: relative; margin: var(--s-5) 0; padding: var(--s-5) var(--s-5) var(--s-5) var(--s-7);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--panel); color: var(--txt-2); font-size: var(--f-sm); line-height: 1.7;
}
.callout::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--r-md) 0 0 var(--r-md); }
.callout__label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--f-xs); letter-spacing: .04em; margin-bottom: var(--s-2); text-transform: none; }
.callout__label svg { width: 15px; height: 15px; }
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--txt-1); }
/* 洞察 / 心法 */
.callout--insight { background: var(--grad-brand-soft), var(--panel); }
.callout--insight::before { background: var(--grad-brand); }
.callout--insight .callout__label { color: var(--c-teal); }
/* 诚实声明 */
.callout--honest { background: color-mix(in srgb, var(--txt-3) 6%, var(--panel)); }
.callout--honest::before { background: var(--txt-3); }
.callout--honest .callout__label { color: var(--txt-2); }
.callout--honest { font-size: var(--f-xs); color: var(--txt-3); }
/* 推演 / 假设(扩展内容标记) */
.callout--hypothesis { background: color-mix(in srgb, var(--c-violet) 9%, var(--panel)); border-color: color-mix(in srgb, var(--c-violet) 35%, transparent); }
.callout--hypothesis::before { background: var(--c-violet); }
.callout--hypothesis .callout__label { color: var(--c-violet); }
/* 面试金句 / 一句话(amber) */
.callout--quote { background: color-mix(in srgb, var(--c-amber) 9%, var(--panel)); border-color: color-mix(in srgb, var(--c-amber) 30%, transparent); font-size: 1.05rem; color: var(--txt-1); }
.callout--quote::before { background: var(--c-amber); }
.callout--quote .callout__label { color: var(--c-amber); }

/* 扩展章节整体标识:左侧紫色细条 + 角标 */
.section--ext { position: relative; }
.ext-tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--f-2xs); font-weight: 700;
  color: var(--c-violet); background: color-mix(in srgb, var(--c-violet) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-violet) 40%, transparent);
  border-radius: var(--r-pill); padding: 2px 10px; letter-spacing: .04em; vertical-align: middle;
}

/* ---------- ⑧ SourceCite 来源标注 ---------- */
.source { font-size: var(--f-2xs); color: var(--txt-4); margin-top: var(--s-3); line-height: 1.6; display: flex; gap: 6px; }
.source::before { content: "来源"; flex: none; color: var(--txt-3); border: 1px solid var(--line); border-radius: var(--r-xs); padding: 0 5px; font-weight: 600; height: fit-content; }
.source--inline { margin-top: var(--s-2); }

/* ---------- SummaryStrip 模块小结 ---------- */
.summary {
  scroll-margin-top: calc(var(--topbar-h) + 16px);
  margin: var(--s-8) 0 0; padding: var(--s-6);
  border: 1px solid color-mix(in srgb, var(--c-teal) 30%, transparent); border-radius: var(--r-lg);
  background: var(--grad-brand-soft), var(--panel);
}
.summary__title { display: flex; align-items: center; gap: var(--s-3); font-size: var(--f-h3); margin-bottom: var(--s-4); }
.summary__title .kicker { font-size: var(--f-xs); }
.summary__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.summary__list li { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--txt-1); }
.summary__list .n { font-family: var(--f-num); font-weight: 800; color: var(--c-teal); flex: none; font-size: 1.1rem; line-height: 1.5; }

/* ---------- 名词解释 ---------- */
.glossary { margin: var(--s-5) 0; padding: var(--s-4) var(--s-5); border: 1px dashed var(--line); border-radius: var(--r-md); background: color-mix(in srgb, var(--bg-2) 60%, transparent); }
.glossary__title { font-size: var(--f-xs); color: var(--txt-3); font-weight: 700; letter-spacing: .06em; margin-bottom: var(--s-2); }
.glossary dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-4); margin: 0; font-size: var(--f-xs); }
.glossary dt { color: var(--c-teal); font-weight: 700; }
.glossary dd { margin: 0; color: var(--txt-2); }
@media (max-width: 560px){ .glossary dl { grid-template-columns: 1fr; gap: 2px var(--s-3); } .glossary dd { margin-bottom: var(--s-2); } }

/* ---------- 两栏 / 三栏并列文本块 ---------- */
.split { display: grid; gap: var(--s-4); margin: var(--s-5) 0; }
.split--2 { grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }
.split--3 { grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.block { padding: var(--s-4) var(--s-5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); }
.block__h { display: flex; align-items: center; gap: var(--s-2); color: var(--txt-1); font-weight: 700; margin-bottom: var(--s-2); font-size: .98rem; }
.block__h .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-teal); flex: none; }
.block ul { margin: 0; padding-left: 1.1em; font-size: var(--f-sm); color: var(--txt-2); }
.block--ok .block__h .dot { background: var(--c-ok); }
.block--warn .block__h .dot { background: var(--c-warn); }
.block--danger .block__h .dot { background: var(--c-danger); }

/* 定义清单(已知/假设/边界 等) */
.deflist { display: grid; gap: var(--s-2); margin: var(--s-3) 0 0; }
.deflist__row { display: flex; gap: var(--s-3); font-size: var(--f-sm); }
.deflist__row .k { color: var(--c-teal); font-weight: 600; flex: none; min-width: 5em; }

/* 强调列表(带勾/箭头) */
.tlist { list-style: none; margin: var(--s-3) 0; padding: 0; display: grid; gap: var(--s-2); }
.tlist li { position: relative; padding-left: 1.6em; color: var(--txt-2); font-size: var(--f-sm); }
.tlist li::before { content: "▸"; position: absolute; left: 0; color: var(--c-teal); font-weight: 700; }
.tlist--check li::before { content: "✓"; color: var(--c-ok); }
.tlist--cross li::before { content: "✕"; color: var(--c-danger); }

/* 交叉引用(模块间跳转提示) */
.crossref { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-4) 0; font-size: var(--f-xs); color: var(--txt-3); }
.crossref__lbl { color: var(--txt-4); font-weight: 600; }
.xref {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--txt-2);
  background: var(--panel); transition: border-color var(--t-fast), color var(--t-fast);
}
.xref:hover { border-color: var(--c-teal); color: var(--c-teal); }
.xref .n { font-family: var(--f-num); font-weight: 700; color: var(--c-teal); }

/* ============================================================
   落地页专属
   ============================================================ */
.home { max-width: 1180px; margin: 0 auto; padding: 0 clamp(var(--s-4), 4vw, var(--s-7)); }

/* Hero(与 bci-research-site 一致的动态神经网络背景) */
.hero { position: relative; z-index: 0; padding: clamp(var(--s-8), 11vw, calc(var(--s-9) + var(--s-6))) 0 var(--s-8); text-align: center; }
.hero__canvas { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; z-index: 0; opacity: .92; pointer-events: none; }
.hero__fade { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 68% 62% at 50% 44%, transparent 26%, var(--bg-1) 92%); }
.hero__inner { position: relative; z-index: 2; }
.hero__glow { position: absolute; left: 50%; top: -10%; width: 760px; height: 520px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(52,215,200,.22), transparent 70%); pointer-events: none; z-index: 0; }
.hero__badge { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--f-xs); color: var(--txt-2); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 16px; margin-bottom: var(--s-5); }
.hero__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-teal) 18%, transparent); }
.hero h1 { font-size: var(--f-display); letter-spacing: -.02em; margin-bottom: var(--s-4); }
.hero h1 .grad { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__sub { color: var(--txt-2); font-size: clamp(1.05rem, 1.8vw, 1.3rem); max-width: 64ch; margin: 0 auto var(--s-5); }
.hero__note { color: var(--txt-3); font-size: var(--f-sm); max-width: 60ch; margin: 0 auto var(--s-6); }
.hero__cta { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--s-7); }
.btn { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-5); border-radius: var(--r-pill); font-weight: 700; font-size: var(--f-sm); border: 1px solid transparent; cursor: pointer; transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); }
.btn--primary { background: var(--grad-brand); color: var(--txt-on-accent); }
.btn--primary:hover { color: var(--txt-on-accent); transform: translateY(-2px); box-shadow: var(--glow-teal); }
.btn--ghost { border-color: var(--line); color: var(--txt-1); background: var(--panel); }
.btn--ghost:hover { border-color: var(--c-teal); color: var(--c-teal); transform: translateY(-2px); }

/* 信号波形分隔 */
.wave { display: block; width: 100%; height: 40px; color: var(--c-teal); opacity: .5; margin: var(--s-6) 0; }

/* 落地页区块 */
.home-sec { padding: var(--s-8) 0; border-top: 1px solid var(--line-soft); }
.home-sec__head { text-align: center; max-width: min(48rem, 94vw); margin: 0 auto var(--s-7); }
.home-sec__head h2 { font-size: var(--f-h1); margin-bottom: var(--s-3); }
.home-sec__head p { color: var(--txt-2); max-width: 40rem; margin-left: auto; margin-right: auto; }

/* JD 映射 */
.jdmap { display: grid; gap: var(--s-3); }
.jdrow {
  display: grid; grid-template-columns: 48px 1.1fr auto; gap: var(--s-4); align-items: center;
  padding: var(--s-4) var(--s-5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.jdrow:hover { border-color: color-mix(in srgb, var(--c-teal) 40%, transparent); transform: translateX(3px); }
.jdrow__n { font-family: var(--f-num); font-weight: 800; font-size: 1.3rem; color: var(--c-teal); text-align: center; }
.jdrow__duty { color: var(--txt-1); font-weight: 600; font-size: var(--f-sm); }
.jdrow__duty small { display: block; color: var(--txt-3); font-weight: 400; font-size: var(--f-xs); margin-top: 2px; }
.jdrow__mods { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.modpill { font-family: var(--f-num); font-size: var(--f-2xs); font-weight: 700; color: var(--c-teal); border: 1px solid color-mix(in srgb, var(--c-teal) 40%, transparent); border-radius: var(--r-xs); padding: 2px 7px; background: color-mix(in srgb, var(--c-teal) 8%, transparent); white-space: nowrap; }
.modpill:hover { background: color-mix(in srgb, var(--c-teal) 18%, transparent); color: var(--c-teal); }
@media (max-width: 680px){ .jdrow { grid-template-columns: 36px 1fr; } .jdrow__mods { grid-column: 1 / -1; justify-content: flex-start; } }

/* 8 模块入口宫格 */
.modgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: var(--s-4); }
.modcard {
  position: relative; display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-5); background: var(--grad-panel), var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  transition: transform var(--t-mid) var(--ease), border-color var(--t-mid), box-shadow var(--t-mid);
}
.modcard::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-brand); transform: scaleX(0); transform-origin: left; transition: transform var(--t-mid); }
.modcard:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c-teal) 40%, transparent); box-shadow: var(--sh-3); }
.modcard:hover::after { transform: scaleX(1); }
.modcard__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.modcard__no { font-family: var(--f-num); font-weight: 800; font-size: 2.2rem; color: transparent; -webkit-text-stroke: 1.3px color-mix(in srgb, var(--c-teal) 55%, transparent); line-height: 1; }
.modcard__pages { font-size: var(--f-2xs); color: var(--txt-3); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px 9px; }
.modcard__kicker { font-family: var(--f-num); font-size: var(--f-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--c-teal); font-weight: 600; }
.modcard__title { color: var(--txt-1); font-weight: 700; font-size: 1.2rem; line-height: 1.3; }
.modcard__desc { color: var(--txt-2); font-size: var(--f-sm); flex: 1; }
.modcard__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.modcard__go { display: inline-flex; align-items: center; gap: 6px; color: var(--c-teal); font-size: var(--f-sm); font-weight: 600; margin-top: var(--s-1); }
.modcard__go svg { width: 16px; height: 16px; transition: transform var(--t-fast); }
.modcard:hover .modcard__go svg { transform: translateX(4px); }
.modcard--ext { border-style: dashed; }
.modcard--ext .modcard__no { -webkit-text-stroke-color: color-mix(in srgb, var(--c-violet) 55%, transparent); }
.modcard--ext .modcard__kicker, .modcard--ext .modcard__go { color: var(--c-violet); }
.modcard--ext::after { background: linear-gradient(135deg, var(--c-violet), var(--c-blue)); }

/* 阅读路径 */
.readpath { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; justify-content: center; }
.readpath__step { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-pill); font-size: var(--f-sm); color: var(--txt-2); }
.readpath__step .n { font-family: var(--f-num); font-weight: 700; color: var(--c-teal); }
.readpath__step:hover { border-color: var(--c-teal); color: var(--txt-1); }
.readpath__arr { color: var(--c-teal); opacity: .6; }

/* 跨域叙事条 */
.journey { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: stretch; justify-content: center; margin: var(--s-5) 0; }
.jnode { flex: 1 1 150px; max-width: 220px; text-align: center; padding: var(--s-4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); position: relative; }
.jnode__n { font-family: var(--f-num); font-weight: 800; color: var(--c-teal); }
.jnode__t { color: var(--txt-1); font-weight: 700; font-size: var(--f-sm); margin: 2px 0; }
.jnode__d { color: var(--txt-3); font-size: var(--f-xs); }
.jnode--now { border-color: var(--c-teal); background: var(--grad-brand-soft), var(--panel); }
.jnode--now .jnode__t { color: var(--c-teal); }

/* 页脚 */
.site-footer { border-top: 1px solid var(--line); margin-top: var(--s-8); padding: var(--s-7) 0 var(--s-8); background: var(--bg-0); }
.site-footer__inner { max-width: 1180px; margin: 0 auto; padding: 0 clamp(var(--s-4), 4vw, var(--s-7)); display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-6); }
.site-footer h4 { color: var(--txt-1); font-size: var(--f-sm); margin-bottom: var(--s-3); }
.site-footer p, .site-footer li { color: var(--txt-3); font-size: var(--f-xs); line-height: 1.7; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer a { color: var(--txt-2); }
.footer-author { color: var(--txt-2); }
.footer-author .ph { color: var(--c-teal); border-bottom: 1px dashed color-mix(in srgb, var(--c-teal) 50%, transparent); }
.footer-disclaimer { font-size: var(--f-2xs); color: var(--txt-4); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line-soft); }
@media (max-width: 680px){ .site-footer__inner { grid-template-columns: 1fr; } }

/* 平铺式页脚:单列、导航横向铺开 */
.site-footer__inner--flat { display: block; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); }
.footer-links a { color: var(--txt-2); font-size: var(--f-sm); white-space: nowrap; transition: color var(--t-fast); }
.footer-links a:hover { color: var(--c-teal); }