/* 沃可 · AI 企业落地 —— 站点样式
 * ---------------------------------------------------------------
 * ★ 2026-10-18 晚：老板从三个主题样张里选了 **C · 深空**。
 *   底色近黑、细网线、等宽标签、品牌青 #19d3c5 做唯一信号色。
 *   五条设计规矩（换主题也照旧）：
 *     ① 信号色只有一个 —— 青。其余全靠明度分层。
 *     ② 不用渐变糊；层次靠 1px 线和留白。
 *     ③ 标签一律等宽 + 字距（HUB / 01 / LAYER）。
 *     ④ 正文对比度 ≥4.5:1，用实测不用眼。
 *     ⑤ 数字是主角：大、等宽、旁边必须有出处。
 *   ★ 变量名沿用上一版（--蓝 之类），**只换值不换名** ——
 *     模板里到处是 var(--蓝)，改名等于全站动手术，没有必要。
 */

/* ★★★ 2026-10-18 第三版：**产品白**。
 *   老板把我上一版骂醒了：黑底 + 青字 + 一层看不见的网格，那不叫设计，叫换皮。
 *   这一版的根据是**产品本身** —— 沃可的界面是白的（产品蓝 #2f6bff），
 *   七支片子也是白的，只有「云端」那一段是暗的。
 *   ⇒ 网站跟着产品走：**亮底为主，产品界面当主角；深色只留给「中枢 / 云端」的那几段**。
 *   五条规矩：
 *     ① 一屏里必须有一张**真界面**，不是插图、不是图标。
 *     ② 字要敢大：标题 64–112px，正文 16–17px，中间不许有中间态。
 *     ③ 只用一种蓝（产品里那支）。红只给错误/过期。
 *     ④ 深带最多出现两处，用来切节奏。
 *     ⑤ 留白靠"块与块之间的空"，不靠每块内部灌 padding。
 */
:root {
  /* ★★★ 2026-10-18 第四版：**真星空**。
   *   老板点醒了：我们没有"使用需求"，客户不在网页上干活 ——
   *   所以不需要白底的产品页，**要的是第一眼的氛围**。
   *   ⇒ 深空底 + 星点（canvas 真画，见 assets/星空.js）+ 星云辉光；
   *     产品界面不再当"主体"，改成浮在星空里的**舷窗**。
   */
  --底: #04060b;
  --底白: #0b1119;
  --底2: #070a11;
  --卡: rgba(13, 19, 29, .78);
  --卡亮: rgba(20, 28, 42, .9);
  --线: rgba(140, 175, 225, .14);
  --线2: rgba(140, 175, 225, .26);
  --线亮: #4ea1ff;
  --字: #eef4fb;
  --字2: #b9c6d6;
  --字3: #8f9fb3;
  --字4: #74839a;
  --蓝: #4ea1ff;
  --蓝深: #2b7fe0;
  --蓝淡: rgba(78, 161, 255, .12);
  --蓝线: rgba(78, 161, 255, .38);
  --青: #35d6c4;
  --橙: #f0a060;
  --红: #ff7a6b;
  --暖淡: rgba(240, 160, 96, .12);
  --轨: rgba(140, 175, 225, .16);
  --影: 0 30px 90px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(140, 175, 225, .10);
  --圆: 10px;
  --深: #04060b;
  --黑: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  --宋: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  --等宽: "Consolas", ui-monospace, "SF Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--底);
  color: var(--字2);
  font: 16.5px/1.95 var(--黑);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background-color: #04060b;
  /* 三层星云：不抢星点，只做"深处有东西"的感觉 */
  background-image:
    radial-gradient(900px 620px at 78% -8%, rgba(46, 96, 190, .30), transparent 62%),
    radial-gradient(1100px 700px at 8% 12%, rgba(96, 52, 160, .20), transparent 66%),
    radial-gradient(1200px 900px at 50% 108%, rgba(20, 88, 150, .18), transparent 68%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* 星空层：铺在最底下，不挡点击 */
#星空 {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; display: block;
}
.页 { position: relative; z-index: 1; }

a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--蓝);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── 顶栏 ─────────────────────────────────────── */
.顶栏 {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 30px;
  padding: 16px clamp(20px, 4.5vw, 64px);
  background: rgba(4, 6, 11, .72);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--线);
}
.顶栏.滚过 { background: var(--底); border-bottom-color: var(--线2); }
.标 {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 600; letter-spacing: .02em;
  color: var(--字); text-decoration: none; white-space: nowrap;
}
.标 .徽 { width: 27px; height: 27px; flex: none; display: block; }
.导航 { display: flex; gap: 2px; margin-left: 10px; flex-wrap: wrap; }
.导航 a {
  position: relative; color: var(--字3); text-decoration: none;
  font-size: 13.5px; padding: 8px 10px; transition: color .16s;
  white-space: nowrap;
}
.导航 a:hover { color: var(--字); }

/* 下拉（企业能力 / 解决方案）：鼠标移上、或键盘 Tab 进来就展开 */
.导航 .组 { position: relative; }
.导航 .组 > a { display: inline-flex; align-items: center; gap: 4px; }
.导航 .组 > a i { font-style: normal; font-size: 9px; opacity: .55; transform: translateY(1px); }
.导航 .组 .子 {
  /* ★★ 2026-10-19 老板：「鼠标往下拉去点能力，菜单就没了」。
     真因：原来 top 比组的底沿多出 6px —— 那 6px 是悬空的。
     鼠标从「企业能力」往下走，中途会落进这条缝，.组 的 hover 随之断掉，
     菜单立刻消失；等鼠标走到菜单原来的位置，那儿已经什么都没有了。
     改法：① 顶住组的下沿（top:100%），缝没了；
           ② 离开后再留 160ms（visibility 的延迟），斜着划出去也来得及回来。
     视觉那点距离由链接自带的 8px 内边距保留，看上去跟以前差不多。 */
  position: absolute; top: 100%; left: 0;
  min-width: 210px; padding: 8px; border-radius: 10px;
  background: rgba(10, 15, 23, .97);
  border: 1px solid var(--线2);
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .9);
  display: block; visibility: hidden;
  transition: visibility 0s linear .16s;
  z-index: 60;
}
.导航 .组:hover .子, .导航 .组:focus-within .子 {
  visibility: visible; transition-delay: 0s;
}
.导航 .组 .子 a {
  display: block; padding: 9px 12px; border-radius: 6px;
  font-size: 13.5px; color: var(--字2); white-space: nowrap;
}
.导航 .组 .子 a:hover { background: rgba(78,161,255,.12); color: var(--字); }
@media (max-width: 1000px) {
  /* 手机上没有 hover —— 下拉改成"原地展开"，不浮层遮挡 */
  .导航 .组 .子 {
    position: static; display: none; box-shadow: none; padding: 0 0 4px 10px;
    background: transparent; border: 0;
    /* 桌面那套「贴边 + 160ms 宽限」只给鼠标用；手机上原地展开，别继承那些 */
    visibility: visible; transition: none;
  }
  .导航 .组:focus-within .子 { display: block; visibility: visible; }
}
.导航 a.这 { color: var(--蓝); }
.导航 a.这::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px;
  height: 2px; background: var(--蓝); border-radius: 1px;
}
.顶栏 .右 { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* ── 按钮 ─────────────────────────────────────── */
.钮 {
  display: inline-block; padding: 11px 22px; border-radius: 4px;
  font-size: 14.5px; text-decoration: none; transition: background .18s, border-color .18s, color .18s;
  white-space: nowrap;
}
.钮.实 {
  background: var(--蓝); border-color: var(--蓝); color: #04101f; font-weight: 600;
  box-shadow: 0 12px 34px -12px rgba(78, 161, 255, .75);
}
.钮.实:hover { background: #6cb4ff; border-color: #6cb4ff; color: #04101f; }
.钮.实:hover { background: var(--蓝深); }
.钮.空 { color: var(--字2); border: 1px solid var(--线2); background: transparent; }
.钮.空:hover { color: var(--字); border-color: var(--字3); background: var(--底白); }
.钮.小 { padding: 8px 16px; font-size: 13.5px; }

/* ── 版心 ─────────────────────────────────────── */
.页 { position: relative; z-index: 1; }
/* ★ 相邻两段各自带 137px 上下留白 ⇒ 中间实际空出 274px，首屏底下更到 330px。
   两段一贴，留白是**相加**的。收一档：单段 ~112px，两段之间约 224px。 */
.段 { padding: clamp(56px, 5.4vw, 88px) clamp(20px, 4.5vw, 64px); }
/* ★ 2026-10-18：原来三档宽度（1200 / 1080 / 880）让每一段的**左边缘都在跳**
   ——宽屏上 h1 在 280、下面那排数字在 120，眼睛读起来就是"没对齐"。
   ⇒ 容器统一 1160，**左边缘对齐**；要控制行长，就把 max-width 给**文字本身**
     （`.说` 760 / `.断` 820 早已这么做），而不是收容器。 */
.内, .内.宽, .内.窄 { max-width: 1160px; margin: 0 auto; }

/* ── 首屏 ─────────────────────────────────────── */
.首屏 {
  padding: clamp(64px, 6.4vw, 96px) clamp(20px, 4.5vw, 64px) clamp(40px, 4vw, 64px);
}
.首屏内 {
  max-width: 1200px; margin: 0 auto;
  display: grid; align-items: center; gap: clamp(28px, 4vw, 64px);
  grid-template-columns: 1.04fr .96fr;
}
.首屏文 { position: relative; z-index: 1; }

/* 首屏底图：星云。压两层暗，保证左边标题读得清、右边卡片还亮着 */
.首屏.有影 {
  background-size: cover; background-position: center 40%;
  background-repeat: no-repeat; position: relative;
}
.首屏.有影::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4,6,11,.93) 0%, rgba(4,6,11,.78) 42%, rgba(4,6,11,.42) 100%),
    linear-gradient(180deg, rgba(4,6,11,.55), rgba(4,6,11,.72));
}
.首屏.有影 > .内 { position: relative; z-index: 1; }
#主脑图 { position: relative; height: clamp(400px, 62vh, 620px); }

/* 首屏右手：系统现状仪表（替掉原来那张发光网络图） */
.首屏卡 {
  position: relative; overflow: hidden;
  border: 1px solid var(--线); border-radius: 10px; background: var(--卡);
  padding: 24px 26px 8px;
}
.首屏卡::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px 260px at 72% -10%, rgba(47, 107, 255, .07), transparent 70%);
}

/* ── 真界面：这一版的主角 ───────────────────────── */
/* 一张真界面，撑满版心，带边和影 */
.大图 { margin: clamp(36px, 4.6vw, 60px) 0 0; }
.大图 img {
  display: block; width: 100%; height: auto;
  border-radius: var(--圆); border: 1px solid rgba(140, 175, 225, .22);
  /* 白色界面浮在星空上 —— 给一圈冷光，像一扇舷窗 */
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, .95),
              0 0 90px -20px rgba(78, 161, 255, .35),
              0 0 0 1px rgba(140, 175, 225, .10);
  background: #fff;
}
.大图 figcaption {
  margin-top: 14px; font-family: var(--等宽);
  font-size: 12px; color: var(--字3); letter-spacing: .05em;
}

/* 两张并排 */
.图对 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin-top: clamp(32px, 4vw, 52px);
}
.图对 figure { margin: 0; }
.图对 img {
  display: block; width: 100%; height: auto;
  border-radius: 8px; border: 1px solid var(--线);
  box-shadow: var(--影); background: #fff;
}
.图对 figcaption { margin-top: 12px; font-size: 13.5px; line-height: 1.75; color: var(--字3); }
.图对 figcaption b { display: block; color: var(--字); font-size: 15px; margin-bottom: 4px; }
@media (max-width: 820px) { .图对 { grid-template-columns: 1fr; } }

/* 深带：整屏宽的一条暗带，用来切节奏（全站最多两处） */
.深带 {
  margin: 0 calc(50% - 50vw);
  padding: clamp(52px, 5.4vw, 84px) 0;
  /* 整页已经是深空，这一条不再靠"更黑"区分 —— 改成一层薄雾 + 上下细线 */
  background: linear-gradient(180deg, rgba(78,161,255,.055), rgba(78,161,255,.015) 60%, transparent);
  border-top: 1px solid var(--线); border-bottom: 1px solid var(--线);
  color: #e9edf2;
  position: relative; overflow: hidden;
}
.深带 .内 { padding-left: clamp(20px, 4.5vw, 64px); padding-right: clamp(20px, 4.5vw, 64px); }

/* 带图的深带：图铺满，压两层暗，保证字读得清 */
/* ★ 老板说"处理得不那么明显" —— 背景图不再直接铺，改成**压到 30% 的一层质感**：
   看得见机柜的轮廓，但读不出"这是张照片"。四边再收一圈暗，边界也化掉。 */
.深带.有影 {
  background-size: cover; background-position: center;
  background-repeat: no-repeat;
  border-top: 1px solid var(--线); border-bottom: 1px solid var(--线);
  padding: clamp(88px, 9vw, 148px) 0;
  isolation: isolate;
}
.深带.有影::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background-image: inherit;
  background-size: cover; background-position: center;
  opacity: .30; filter: saturate(.7) contrast(.9);
}
.深带.有影::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(4,6,11,.35) 0%, rgba(4,6,11,.86) 78%, rgba(4,6,11,.98) 100%),
    linear-gradient(180deg, rgba(4,6,11,.65), rgba(4,6,11,.2) 42%, rgba(4,6,11,.7));
}
.深带.有影 .内 { position: relative; z-index: 1; }
.深带 h2 { color: #fff; }
.深带 .说 { color: #aeb8c4; }
.深带 .说 b { color: #fff; }
.深带 .牌子 { color: #6fa4ff; }
.深带 .断句 { color: #fff; border-left-color: rgba(255, 255, 255, .28); }
.深带 .断句 b { color: #fff; }
.深带 .编号排 { border: 0; background: transparent; margin-top: 0; }
.深带 .号格 { background: transparent; border-color: rgba(255, 255, 255, .12); border-radius: 0; }
.深带 .号格 .图 { color: #fff; }
.深带 .号格 .文 { color: #9aa6b4; }
.深带 .号格 .文 b { color: #fff; }
.深带 .号格::before { background: #6fa4ff; }
.深带 .号格:hover { background: #131923; }
.深带 .大图 img { border-color: rgba(255, 255, 255, .10); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .8); }
.深带 .大图 figcaption { color: #7f8b99; }
.首屏卡 .卡头 {
  position: relative; display: flex; align-items: center; gap: 10px; margin: 0 0 4px;
  font-family: var(--等宽); font-size: 11px; letter-spacing: .22em; color: var(--字3);
}
.首屏卡 .卡头 i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--蓝); margin-left: auto;
  box-shadow: 0 0 0 4px rgba(25, 211, 197, .12);
}
.首屏卡 ul { position: relative; list-style: none; margin: 0; padding: 0; }
.首屏卡 li {
  display: flex; gap: 20px; align-items: baseline;
  padding: 17px 0; border-top: 1px solid var(--线);
}
.首屏卡 li:first-child { border-top: 0; }
.首屏卡 li b {
  font-family: var(--等宽); font-size: 30px; line-height: 1;
  color: var(--字); min-width: 74px; letter-spacing: -.03em;
}
.首屏卡 li span { font-size: 12.5px; color: var(--字3); line-height: 1.7; }
.首屏卡 li span em {
  display: block; font-style: normal; font-size: 13.5px; font-weight: 600;
  color: var(--字); margin-bottom: 3px; letter-spacing: .01em;
}

.眉 {
  display: block; margin: 0 0 32px;
  font-family: var(--等宽);
  font-size: 11.5px; color: var(--字3); letter-spacing: .2em;
}
.眉 b { color: var(--蓝); font-weight: 500; }

h1 {
  font-family: var(--宋);
  font-size: clamp(38px, 4.6vw, 72px);
  line-height: 1.14; margin: 0 0 40px;
  font-weight: 700; letter-spacing: -.025em;
  color: var(--字);
}
h1 em { font-style: normal; color: var(--蓝); }

.领 {
  font-size: clamp(16px, 1.12vw, 18px); color: var(--字2);
  margin: 0 0 18px; max-width: 680px; line-height: 2.05;
}
.领:last-of-type { margin-bottom: 0; }
.领 b { color: var(--字); font-weight: 500; }
.首屏钮 { margin-top: 48px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ── 标题区 ───────────────────────────────────── */
.牌子 {
  font-family: var(--等宽);
  font-size: 11.5px; letter-spacing: .22em; color: var(--蓝);
  text-transform: uppercase; margin: 0 0 22px; font-weight: 400;
}
h2 {
  font-family: var(--宋);
  font-size: clamp(27px, 3vw, 42px); line-height: 1.28;
  margin: 0 0 28px; font-weight: 700; letter-spacing: -.015em; color: var(--字);
}
h2 em { font-style: normal; color: var(--蓝); }
h3 { font-size: 19px; margin: 0 0 10px; font-weight: 600; color: var(--字); }
h4 { font-size: 16px; margin: 0 0 8px; font-weight: 600; color: var(--字); }
.说 {
  color: var(--字2); font-size: 16.5px; max-width: 760px;
  margin: 0 0 20px; line-height: 2.05;
}
.说:last-child { margin-bottom: 0; }
.说 b { color: var(--字); font-weight: 600; }

/* ── 数字块 ★ 我们的料 ────────────────────────── */
.数阵 {
  display: grid; gap: 20px; margin-top: 64px;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}
.数卡 {
  border: 1px solid var(--线); border-radius: var(--圆); padding: 32px 28px 28px;
  background: var(--卡); position: relative; overflow: hidden; transition: border-color .2s;
  display: flex; flex-direction: column;
}
.数卡:hover { border-color: var(--线2); }
.数卡 .大 {
  font-size: clamp(40px, 4vw, 58px); font-weight: 700; line-height: 1.05;
  letter-spacing: -.02em; margin-bottom: 16px; display: block;
  color: var(--字); font-variant-numeric: tabular-nums;
}
.数卡.暖 .大 { color: var(--橙); }
.数卡 .讲 { color: var(--字2); font-size: 15px; line-height: 1.85; margin: 0 0 12px; }
.数卡 .注 { color: var(--字3); font-size: 13px; line-height: 1.75; margin: 0; }
.数卡 .源 { margin-top: auto; align-self: flex-start; }
.数卡.大双 { grid-column: span 2; }

/* 出处小签 ★★ 别人抄不了的那一条 */
.源 {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px; padding: 4px 9px; border-radius: 3px;
  border: 1px solid var(--线);
  background: var(--底2);
  font-size: 11.5px; color: var(--字3); letter-spacing: .01em;
  font-family: var(--等宽); line-height: 1.5;
}
.源::before { content: "源"; color: var(--字3); font-size: 10px; }
.源.厂 { border-color: rgba(232, 148, 95, .34); background: var(--暖淡); }
.源.厂::before { content: "厂"; color: var(--橙); }

/* ── 引用块 ───────────────────────────────────── */
.引 {
  margin: 48px 0; padding: 26px 30px;
  border-left: 2px solid var(--蓝); border-radius: 0;
  background: var(--蓝淡);
  font-size: 17px; line-height: 2; color: var(--字);
}
.引 .谁 { display: block; margin-top: 14px; font-size: 13px; color: var(--字3); }
.引.暖 { border-left-color: var(--橙); background: var(--暖淡); }

/* 断句：全站最响的那一句，交给宋体，安静地站着 */
.断句 {
  margin: 64px 0; padding: 0;
  max-width: 820px;
  font-family: var(--宋);
  font-size: clamp(20px, 2.1vw, 26px); line-height: 1.85;
  color: var(--字); font-weight: 500;
}
.断句 b { font-weight: 600; }

/* ── 对比条（画"剪刀差"） ─────────────────────── */
.比 { margin-top: 52px; }
.比行 { margin-bottom: 30px; }
.比行 .顶 { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.比行 .名 { font-size: 14.5px; color: var(--字2); }
.比行 .值 {
  margin-left: auto; font-size: 22px; font-weight: 700;
  color: var(--字); letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.比行 .轨 { height: 6px; border-radius: 3px; background: var(--轨); overflow: hidden; }
.比行 .条 {
  height: 100%; border-radius: 3px; background: var(--蓝);
  width: 0; transition: width 1.15s cubic-bezier(.22, .61, .36, 1);
}
.比行.暗 .条 { background: #3d4a58; }
.比行 .条.暖 { background: var(--橙); }
.比分 {
  display: flex; gap: 18px; justify-content: space-between;
  font-size: 12.5px; color: var(--字3); margin-top: 4px;
}

/* ── 表格 ─────────────────────────────────────── */
.表框 {
  margin-top: 48px; border: 1px solid var(--线); border-radius: var(--圆);
  overflow: hidden; background: var(--底白); overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td {
  padding: 15px 20px; text-align: left;
  border-bottom: 1px solid var(--线); vertical-align: top;
}
th {
  font-size: 12.5px; letter-spacing: .06em; color: var(--字3);
  font-weight: 500; background: var(--底2); white-space: nowrap;
}
tr:last-child td { border-bottom: none; }
td { color: var(--字2); }
td b { color: var(--蓝); font-weight: 600; }
td.数 { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── 漏斗 ─────────────────────────────────────── */
.漏斗 { display: grid; gap: 12px; margin-top: 48px; }
.漏 {
  display: grid; grid-template-columns: 100px 1fr; gap: 22px; align-items: center;
  border: 1px solid var(--线); border-radius: var(--圆);
  padding: 22px 26px; background: var(--底白);
}
.漏 .率 {
  font-size: 26px; font-weight: 700; letter-spacing: -.02em;
  color: var(--蓝); font-variant-numeric: tabular-nums;
}
.漏 .体 { display: grid; gap: 9px; }
.漏 .名 { font-size: 15px; font-weight: 500; color: var(--字); }
.漏 .轨 { height: 5px; border-radius: 3px; background: var(--轨); overflow: hidden; }
.漏 .条 {
  height: 100%; border-radius: 3px; background: var(--蓝);
  width: 0; transition: width 1.1s cubic-bezier(.22, .61, .36, 1);
}

/* ── 卡片格 ───────────────────────────────────── */
.格子 {
  display: grid; gap: 20px; margin-top: 56px;
  grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
}
.格 {
  border: 1px solid var(--线); border-radius: var(--圆); padding: 30px 28px;
  background: var(--卡); transition: border-color .2s; position: relative;
  display: flex; flex-direction: column;
}
.格:hover { border-color: var(--线2); }
.格 h3 { margin: 0 0 10px; font-size: 17.5px; }
.格 h3 a { text-decoration: none; }
.格 h3 a:hover { color: var(--蓝); }
.格 p { margin: 0; color: var(--字2); font-size: 14.5px; line-height: 1.9; }
.格 .脚 { margin-top: auto; padding-top: 20px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.签 {
  display: inline-block; padding: 4px 11px; border-radius: 3px;
  font-size: 12px; border: 1px solid var(--线); color: var(--字3);
}
.签.活 { color: var(--蓝); border-color: var(--蓝线); background: var(--蓝淡); }
.签.号 { font-family: var(--等宽); }

/* ── 双栏 ─────────────────────────────────────── */
.双 { display: grid; gap: 20px; margin-top: 52px; grid-template-columns: 1fr 1fr; }
.代 {
  border: 1px solid var(--线); border-radius: var(--圆);
  padding: 34px 32px; background: var(--底白);
}
.代.新 { border-color: var(--蓝线); box-shadow: inset 3px 0 0 var(--蓝); }
.代 .签2 {
  font-size: 12.5px; letter-spacing: .12em; color: var(--字3);
  margin-bottom: 15px; text-transform: uppercase;
}
.代.新 .签2 { color: var(--蓝); }
.代 h3 { font-size: 20px; margin: 0 0 15px; }
.代 p { margin: 0; color: var(--字2); font-size: 15px; line-height: 1.95; }

/* ── 三层图 ───────────────────────────────────── */
.三层 { margin-top: 56px; display: grid; gap: 14px; }
.层 {
  display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: center;
  border: 1px solid var(--线); border-radius: var(--圆);
  padding: 24px 28px; background: var(--底白); transition: border-color .2s;
}
.层:hover { border-color: var(--线2); }
.层 .标号 {
  font-size: 12.5px; letter-spacing: .1em; color: var(--字3);
  font-family: var(--等宽);
}
.层 h3 { margin: 6px 0 8px; font-size: 18.5px; }
.层 p { margin: 0; color: var(--字2); font-size: 14.8px; line-height: 1.9; }
.层.核 { border-color: var(--蓝线); background: var(--蓝淡); }
.层.核 .标号 { color: var(--蓝); }

/* ── 回路 ─────────────────────────────────────── */
.回路 { display: grid; gap: 20px; margin-top: 56px; grid-template-columns: 1fr 1fr; }
.环 {
  border: 1px solid var(--线); border-radius: var(--圆);
  padding: 30px 28px; background: var(--底白);
}
.环 .顶 { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.环 .点 { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.环.上 .点 { background: var(--蓝); }
.环.下 .点 { background: var(--字4); }
.环 h3 { margin: 0; font-size: 17.5px; }
.环 .箭 {
  font-size: 12.5px; color: var(--字3); margin-left: auto;
  font-family: var(--等宽);
}
.环 p { margin: 0; color: var(--字2); font-size: 14.8px; line-height: 1.95; }
.环 ul { margin: 14px 0 0; padding-left: 18px; color: var(--字2); font-size: 14.2px; line-height: 2; }
.环 li { margin-bottom: 4px; }

/* ── 底线 ─────────────────────────────────────── */
.底线 {
  display: grid; gap: 22px; margin-top: 52px;
  grid-template-columns: repeat(auto-fit, minmax(246px, 1fr));
}
.底 { padding-left: 20px; border-left: 2px solid var(--蓝); }
.底 h4 { margin: 0 0 8px; font-size: 15.5px; }
.底 p { margin: 0; color: var(--字2); font-size: 14.2px; line-height: 1.95; }

/* ── 群岛 ─────────────────────────────────────── */
.群岛 {
  display: grid; gap: 14px; margin-top: 56px;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}
.岛 {
  border: 1px dashed var(--线2); border-radius: var(--圆);
  padding: 20px 18px; background: var(--底白);
}
.岛 .岛名 { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 12px; color: var(--字); }
.岛 .行 { height: 5px; border-radius: 2px; margin: 6px 0; background: var(--轨); }
.岛 .行:nth-child(2) { width: 82%; }
.岛 .行:nth-child(3) { width: 58%; }
.岛 .行:nth-child(4) { width: 70%; }

/* ── 面包屑 ───────────────────────────────────── */
.屑 { padding: 26px clamp(20px, 4.5vw, 64px) 0; font-size: 13.5px; color: var(--字3); }
.屑 .内 { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.屑 a { color: var(--字2); text-decoration: none; }
.屑 a:hover { color: var(--蓝); }
.屑 .分 { color: var(--字3); }

/* ── 下一站 ───────────────────────────────────── */
.下站 {
  display: grid; gap: 20px; margin-top: 52px;
  grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));
}
.下 {
  border: 1px solid var(--线); border-radius: var(--圆);
  padding: 26px 26px; background: var(--底白);
  text-decoration: none; transition: border-color .2s; display: block;
}
.下:hover { border-color: var(--蓝); }
.下 .去 { font-size: 12px; color: var(--字3); letter-spacing: .1em; margin-bottom: 9px; font-family: var(--等宽); }
.下 h4 { margin: 0 0 8px; font-size: 16.5px; }
.下 p { margin: 0; color: var(--字2); font-size: 14px; line-height: 1.85; }

/* ── 收尾 / 页脚 ──────────────────────────────── */
.收 {
  text-align: center;
  padding: clamp(104px, 12vw, 176px) clamp(20px, 4.5vw, 64px);
  border-top: 1px solid var(--线);
  background: var(--底2);
}
.收 h2 { max-width: 800px; margin: 0 auto 24px; }
.收 .说 { margin: 0 auto 42px; }
.收 .首屏钮 { justify-content: center; }

footer.脚 {
  padding: 72px clamp(20px, 4.5vw, 64px) 44px;
  border-top: 1px solid var(--线);
  background: var(--轨);
}
.脚内 { max-width: 1200px; margin: 0 auto; }
.脚格 {
  display: grid; gap: 36px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: 48px;
}
.脚格 .列 h5 {
  font-size: 13px; color: var(--字3); margin: 0 0 14px;
  font-weight: 500; letter-spacing: .04em;
}
.脚格 .列 a {
  display: block; color: var(--字2); text-decoration: none;
  font-size: 14px; padding: 5px 0;
}
.脚格 .列 a:hover { color: var(--蓝); }
.脚权 {
  padding: 22px 0;
  border-top: 1px solid var(--线);
  color: var(--字3); font-size: 12.5px; line-height: 1.9;
}
.脚权 p { margin: 0; }
.脚权 b { color: var(--字2); font-weight: 500; }
.脚权 details { margin-top: 8px; }
.脚权 summary { cursor: pointer; color: var(--字2); font-size: 12.5px; }
.脚权 ul { margin: 12px 0 0; padding: 0; list-style: none; columns: 2; gap: 32px; }
.脚权 li { margin: 0 0 6px; break-inside: avoid; }
.脚权 li span { color: var(--字3); }
.脚权 .照 { margin-top: 10px; font-family: var(--等宽); font-size: 11.5px; }
.脚底 {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  color: var(--字3); font-size: 12.5px; padding-top: 24px;
  border-top: 1px solid var(--线);
}

/* ── 编号排 ★ 一条安静的长卷 ──────────────────────
 * 把一句理念拆成一排带编号的格子。不用卡片，用细线。
 */
/* ★ 深空主题下重做：原来 16px 的小数字在暗底上几乎看不见，
   而这四条恰恰是整页的骨架。改成"大数字压顶 + 标签 + 说明"的仪表格。 */
.编号排 {
  display: grid; gap: 1px; margin-top: 52px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  background: var(--线);
  border: 1px solid var(--线); border-radius: 8px; overflow: hidden;
}
.号格 {
  padding: 28px 26px 32px; background: var(--卡);
  position: relative; transition: background .2s;
}
.号格::before {
  content: ""; position: absolute; left: 26px; top: 0;
  width: 22px; height: 2px; background: var(--蓝);
}
.号格:hover { background: var(--卡亮); }
.号格 .图 {
  display: block;
  font-family: var(--等宽); font-size: clamp(32px, 3.2vw, 44px);
  line-height: 1; letter-spacing: -.03em; color: var(--字);
}
.号格 .文 {
  display: block; margin-top: 16px;
  font-size: 12.5px; line-height: 1.75; color: var(--字3);
}
.号格 .文 b {
  color: var(--字); font-weight: 600; display: block;
  font-size: 14px; margin-bottom: 6px; letter-spacing: .01em;
}

/* ── 126 只手：按组折叠 ───────────────────────── */
.能体 { margin-top: 44px; display: grid; gap: 10px; }
.能组 {
  border: 1px solid var(--线); border-radius: 8px;
  background: var(--卡); overflow: hidden;
}
.能组 summary {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 20px; cursor: pointer; list-style: none;
  transition: background .16s;
}
.能组 summary:hover { background: var(--卡亮); }
.能组 summary::-webkit-details-marker { display: none; }
.能组 summary b { font-size: 14.5px; font-weight: 600; color: var(--字); min-width: 96px; }
.能组 summary code {
  font-family: var(--等宽); font-size: 11.5px; color: var(--字4); letter-spacing: .06em;
}
.能组 summary span {
  margin-left: auto; font-family: var(--等宽); font-size: 11.5px; color: var(--蓝);
}
.能组 summary::after { content: "＋"; color: var(--字3); font-size: 13px; }
.能组[open] summary::after { content: "－"; }
.能组[open] summary { border-bottom: 1px solid var(--线); }
.能表 { width: 100%; border-collapse: collapse; }
.能表 td {
  padding: 11px 20px; border-top: 1px solid var(--线);
  font-size: 13px; color: var(--字2); line-height: 1.7; vertical-align: top;
}
.能表 tr:first-child td { border-top: 0; }
.能表 td:first-child { width: 216px; white-space: nowrap; }
.能表 td code { font-family: var(--等宽); font-size: 12px; color: var(--蓝); }
@media (max-width: 700px) {
  .能表 td:first-child { width: auto; white-space: normal; }
  .能组 summary { gap: 10px; padding: 13px 15px; }
  .能组 summary b { min-width: 0; }
}

/* ── 正稿那套：行业现状 → 沃可做法 → 交付 ──────── */
.小标 {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; letter-spacing: .14em; font-weight: 500;
  color: var(--字3); text-transform: uppercase;
  margin: 56px 0 18px;
}
.小标::before {
  content: ""; width: 18px; height: 1px; border-radius: 0;
  background: var(--线2); flex: none;
}
.小标.现::before { background: var(--橙); }
.小标.做::before { background: var(--蓝); }
.小标.底 { margin-top: 32px; }

.交 {
  margin: 30px 0 0;
  border: 1px solid var(--蓝线);
  background: var(--蓝淡);
  border-radius: 4px; padding: 16px 20px;
  font-size: 15px; line-height: 1.9; color: var(--字2);
}
.交 b {
  color: var(--蓝); font-weight: 600; letter-spacing: .08em;
  font-size: 12px; margin-right: 12px;
}

/* 一条分节线 —— 段落之间别糊成一坨 */
.隔 { height: 1px; background: var(--线); margin: 88px 0 0; }

/* ── 沃可在这里起什么作用 ★★ 全站最重的一块 ────── */
.沃可 {
  position: relative; margin: 48px 0 8px; padding: 34px 36px 32px 38px;
  border: 1px solid var(--蓝线);
  border-radius: var(--圆);
  background: var(--蓝淡);
}
.沃可::before {
  content: ""; position: absolute; left: 0; top: 28px; bottom: 28px;
  width: 3px; border-radius: 0; background: var(--蓝);
}
.沃可 .标 {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; letter-spacing: .14em; color: var(--蓝);
  margin-bottom: 18px; font-weight: 500;
}
.沃可 .标 i { width: 18px; height: 1px; border-radius: 0; background: var(--蓝); flex: none; }
.沃可 p { margin: 0 0 12px; font-size: 16.5px; line-height: 2; color: var(--字2); }
.沃可 p:last-child { margin-bottom: 0; }
.沃可 p b { color: var(--字); font-weight: 600; }
.沃可 .做 {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--蓝线);
  display: flex; flex-wrap: wrap; gap: 8px;
}
.沃可 .做 span {
  font-size: 12.5px; padding: 5px 12px; border-radius: 3px;
  border: 1px solid var(--蓝线); color: var(--蓝); background: var(--底白);
}

/* ── 产业层谱 ★ 用来讲"沃可站在哪一层" ────────── */
.层谱 { display: grid; gap: 12px; margin-top: 48px; }
.谱行 {
  display: grid; grid-template-columns: 118px 1fr auto; gap: 22px; align-items: center;
  border: 1px solid var(--线); border-radius: var(--圆);
  padding: 18px 24px; background: var(--底白); transition: border-color .2s;
}
.谱行:hover { border-color: var(--线2); }
.谱行 .谱名 { font-size: 15px; font-weight: 600; color: var(--字); }
.谱行 .谱讲 { font-size: 14.5px; color: var(--字2); line-height: 1.8; }
.谱行 .谱签 {
  font-size: 12.5px; padding: 5px 12px; border-radius: 3px; white-space: nowrap;
  border: 1px solid var(--线); color: var(--字3);
}
.谱行.这 { border-color: var(--蓝); background: var(--蓝淡); }
.谱行.这 .谱名 { color: var(--蓝); }
.谱行.这 .谱讲 { color: var(--字); }
.谱行.这 .谱签 { border-color: var(--蓝线); color: var(--蓝); background: var(--底白); }

@media (max-width: 780px) {
  .谱行 { grid-template-columns: 1fr; gap: 9px; padding: 17px 20px; }
  .谱行 .谱签 { justify-self: start; }
}

/* ── 沃可有什么 ★ 三样实物 ─────────────────────── */
.物阵 {
  display: grid; gap: 20px; margin-top: 48px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
.物 {
  border: 1px solid var(--线); border-radius: var(--圆);
  padding: 30px 28px; background: var(--底白);
}
.物 h4 { margin: 0 0 12px; font-size: 16.5px; }
.物 p { margin: 0; color: var(--字2); font-size: 14.5px; line-height: 1.9; }
.物 .实物 { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.物 .实物 span {
  font-size: 12.5px; padding: 4px 11px; border-radius: 3px;
  border: 1px solid var(--线); color: var(--字2);
}
.物 .实物 span.活 { color: var(--蓝); border-color: var(--蓝线); background: var(--蓝淡); }

/* ── 影片位 ★ 每一章一块 ─────────────────────────
 * 片子是亮的、克制的。框也安静：细边、小圆角、不再取景器化。
 */
.片对 {
  display: grid; gap: 44px; margin: 72px 0 24px;
  grid-template-columns: 1.42fr 1fr;
  align-items: center;
}
.片对 .片位 { margin: 0; align-self: center; }
.片对 > .数旁 { display: grid; gap: 0; align-content: center; }

.片对.大 { grid-template-columns: 1fr; }
.片对.大 > .数旁 {
  display: grid; grid-auto-flow: column; gap: 36px;
  align-content: stretch; padding-top: 10px;
}

.数旁 .笔 {
  border-left: 1px solid var(--线2);
  padding: 14px 0 14px 20px;
  margin-bottom: 22px;
}
.数旁 .笔:last-child { margin-bottom: 0; }
.数旁 .笔 .值 {
  font-size: clamp(25px, 2.5vw, 34px); font-weight: 700; line-height: 1.15;
  letter-spacing: -.02em; display: block; margin-bottom: 8px;
  color: var(--字); font-variant-numeric: tabular-nums;
}
.数旁 .笔.暖 .值 { color: var(--橙); }
.数旁 .笔 .讲 { font-size: 14.5px; line-height: 1.8; color: var(--字2); margin: 0; }
.数旁 .笔 .源 { margin-top: 10px; }
.片对.大 .数旁 .笔 { border-left-color: var(--线); }

.片对 .放 {
  position: absolute; z-index: 3; top: 14px; right: 52px;
  /* ★ 深色主题下原来是"白字压 92% 白底"，实测 1.07:1 —— 等于看不见。改成深底浅字。 */
  background: rgba(10, 15, 23, .82); color: #e8eef5;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 4px;
  font-size: 12px; padding: 4px 10px; cursor: pointer;
  font-family: var(--等宽); letter-spacing: .02em;
  transition: background .16s, border-color .16s;
}
.片对 .放:hover { background: rgba(10, 15, 23, .96); border-color: var(--蓝线); color: #fff; }
.片对 .片位 .挂.右 { right: 116px; }

@media (max-width: 1000px) {
  .片对 { grid-template-columns: 1fr; }
  .片对 .数旁 { padding-top: 4px; }
  .片对.大 > .数旁 { grid-auto-flow: row; gap: 0; }
}

/* ── 影片位 · 共用外框 ─────────────────────────── */
.片位 {
  position: relative; margin: 48px 0 8px;
  aspect-ratio: 16 / 9;
  border-radius: var(--圆); overflow: hidden;
  border: 1px solid var(--线2);
  background: var(--底2);
  display: grid; place-items: center;
}
.片位 .播 {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--线2);
  background: var(--底白);
  display: grid; place-items: center; margin: 0 auto 18px;
  transition: .2s;
}
.片位 .播::after {
  content: ""; width: 0; height: 0; margin-left: 4px;
  border-left: 12px solid var(--字3);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.片对:hover .播 { border-color: var(--字3); }
.片位 .中 { position: relative; z-index: 2; text-align: center; padding: 0 24px; }
.片位 .序 { font-family: var(--等宽); font-size: 12px; letter-spacing: .18em; color: var(--蓝); margin-bottom: 13px; }
.片位 .名 { font-size: clamp(22px, 2.6vw, 34px); font-weight: 600; letter-spacing: .01em; margin: 0 0 12px; color: var(--字); }
.片位 .时 { font-family: var(--等宽); font-size: 12.5px; color: var(--字3); letter-spacing: .04em; }
.片位 .待 {
  margin-top: 18px; font-size: 12.5px; color: var(--字3); letter-spacing: .03em;
  display: inline-flex; align-items: center; gap: 8px;
}
.片位 .待::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--字3); flex: none;
}

/* 底部那条本地 / 云端 —— 保留信息，撤掉进度条和"跳" */
.片位 .三段 {
  position: absolute; z-index: 2;
  left: 34px; right: 34px; bottom: 26px;
  display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: baseline;
}
.片位 .一段 { display: inline-flex; align-items: baseline; gap: 8px; }
.片位 .一段 .轨, .片位 .跳 { display: none; }
.片位 .一段 .签 {
  font-size: 11.5px; color: var(--字3); letter-spacing: .01em;
  font-family: var(--黑); border: none; padding: 0;
}

/* 角上挂的小签 */
.片位 .挂 {
  position: absolute; z-index: 2; top: 14px; left: 18px;
  font-family: var(--等宽); font-size: 11.5px; color: #fff;
  letter-spacing: .02em; background: rgba(10, 18, 32, .58);
  padding: 3px 8px; border-radius: 3px; pointer-events: none;
}
.片位 .挂.右 { left: auto; right: 18px; }

@media (max-width: 700px) {
  .片位 { aspect-ratio: 16 / 11; }
  .片位 .名 { font-size: 20px; }
  .片位 .三段 { left: 20px; right: 20px; bottom: 18px; gap: 6px 16px; }
}

/* ── 片位 · 挂上真片子 ────────────────────────── */
.片位.有片 { display: block; aspect-ratio: auto; border-color: rgba(16, 29, 51, .18); }
.片位.有片 .画面 { position: relative; }
.片位.有片 .片 { display: block; width: 100%; aspect-ratio: 16 / 9; background: #0b0f17; }
.片位.有片 .三段 {
  position: static; margin: 0; padding: 14px 2px 0;
  display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: baseline;
}
.片位.有片 .一段 .签 { font-size: 12px; }
.片位.有片 { background: var(--底2); }

/* 盖 = 画面上的透明播放键（点一下才播；播了就让位给原生控件） */
.片位 .盖 {
  position: absolute; z-index: 2; top: 0; left: 0; right: 0; bottom: auto;
  aspect-ratio: 16 / 9; border: 0; padding: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.片位 .盖 .播 {
  margin: 0; width: 64px; height: 64px;
  background: rgba(255, 255, 255, .90);
  border: 1px solid rgba(16, 29, 51, .18);
}
.片位 .盖 .播::after { border-left-color: var(--字); }
.片位 .盖:hover .播 { background: #fff; border-color: rgba(16, 29, 51, .42); }
.片位.播了 .盖 { display: none; }

/* ★ 视频右下角的数据出处小签
 * 压画面上、12px、半透明深底、鼠标穿透 —— 不挡播放键。
 * 内容只取本页 片对 旁边已有那几条；窄屏收成一行，全文在 title 里。 */
.签数 {
  /* ★ bottom 12px 会**压在原生播放器那条控件栏上**（挡住音量/全屏和进度条右段）——
     2026-10-18 截图里量出来的。抬到控件栏上方，仍然是画面的右下角。 */
  position: absolute; z-index: 3; right: 12px; bottom: 54px;
  max-width: min(76%, 560px);
  padding: 7px 10px; border-radius: 3px;
  background: rgba(10, 18, 32, .76);
  color: #eef2f8;
  font-size: 12px; line-height: 1.6; text-align: right;
  letter-spacing: .01em; pointer-events: none;
}
.签数 span {
  display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 700px) {
  .签数 { left: 12px; right: 12px; max-width: none; text-align: left; padding: 6px 9px; bottom: 48px; }
  .签数 span:nth-child(n+2) { display: none; }
}

/* Chromium 会把 <video> 提成合成层 —— 非合成的叠加层会被它盖在下面 */
.片位.有片 .盖, .片位.有片 .挂, .片位.有片 .放, .签数 { transform: translateZ(0); }

@media (max-width: 560px) {
  .片对 .片位 .挂.右 { top: 42px; right: 18px; }
}

/* ── 进屏淡入 ─────────────────────────────────── */
.升 { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.升.到 { opacity: 1; transform: none; }

/* ── 小屏 ─────────────────────────────────────── */
@media (max-width: 1000px) {
  /* ★ 导航不许整条藏掉 —— 2026-10-18 量出来：1000px 以下 `.导航` 是 display:none，
     又没有汉堡菜单，手机上打开的人**一条进六章的入口都没有**。
     门户多半是微信里传出去、在手机上看的，这一下等于把整站的路堵死。
     改法：顶栏折成两行，导航单独占一行、横着能划（不引入汉堡、不引入 JS）。 */
  .顶栏 { flex-wrap: wrap; row-gap: 2px; }
  .标 { order: 1; }
  .顶栏 .右 { order: 2; }
  .导航 {
    order: 3; flex: 1 0 100%; margin: 0 -8px;
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .导航::-webkit-scrollbar { display: none; }
  .导航 a { padding: 8px 9px; }
  .首屏内 { grid-template-columns: 1fr; gap: 36px; }
  #主脑图 { height: clamp(340px, 52vh, 440px); order: 2; }
  .领 { max-width: none; }
  .双, .回路 { grid-template-columns: 1fr; }
  .层 { grid-template-columns: 1fr; gap: 12px; padding: 21px 24px; }
  .数卡.大双 { grid-column: span 1; }
  .脚权 ul { columns: 1; }
}

@media (max-width: 700px) {
  /* 两行顶栏本来就高，手机上再收一点，别让它吃掉一屏的 1/5 */
  .顶栏 { gap: 16px; padding: 11px 20px 4px; }
  .导航 { margin: 0 -8px -2px; }
  .导航 a { padding: 7px 9px; font-size: 13px; }
  .标 { font-size: 15px; }
  h1 { font-size: clamp(34px, 9.5vw, 48px); }
  .断句 { margin: 48px 0; }
  .段 { padding: 72px 20px; }
  .首屏 { padding: 64px 20px 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .升 { opacity: 1; transform: none; }
  .比行 .条, .漏 .条 { transition: none; }
}