/* ============================================================================
   Apex Toolkit 落地页 v4 · 白色主题
   ---------------------------------------------------------------------------
   与暗色版同一套结构、同一批实拍素材，只换表面：
   - 页面是暖白纸，文字近黑，信号色仍是应用本体的红；
   - 截图本身是浅色界面，不能再压在图上，所以面板改成「带框浮窗」，
     左右交替，靠底色深浅（白 / 米）分出节奏；
   - 红色流程带保留；索引带改成浅米；下载区收成一块黑，作为全页唯一的暗场。

   纪律同暗色版：无内联样式、事实不动。唯一的脚本是 /js/live.js（同源取数 + 只改文本），
   页面本身不依赖它渲染——取不到数据时一律退回静态值。
   ========================================================================== */

/* ═══ 0 · 字体 ══════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/archivo-latin-var.woff2?v=5c88d3ca") format("woff2");
}

@font-face {
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/noto-sans-sc-subset.woff2?v=6f3b26ff") format("woff2");
}

/* ═══ 1 · 令牌 ══════════════════════════════════════════════════════════ */

:root {
  --paper:      #fbfaf7;
  --paper-2:    #f4f1e9;
  --paper-3:    #eeeae0;

  --ink:        #121210;
  --ink-2:      #2b2b26;
  --ink-3:      rgba(18, 18, 16, 0.62);
  --ink-4:      rgba(18, 18, 16, 0.42);

  --red:        #d6352a;
  --red-deep:   #b3261d;
  --red-ink:    #a02018;

  --line:       rgba(18, 18, 16, 0.12);
  --line-2:     rgba(18, 18, 16, 0.24);

  --dark:       #0e0e10;
  --dark-text:  #f6f4f0;

  --font-display: "Archivo", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  --font-body:    "Archivo", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  --font-mono:    ui-monospace, "Cascadia Mono", "Consolas", "Noto Sans SC", monospace;

  --t-hero:  clamp(40px, 6.2vw, 92px);
  --t-band:  clamp(30px, 4vw, 58px);
  --t-panel: clamp(28px, 3.2vw, 48px);
  --t-body:  16px;
  --t-sm:    14px;
  --t-mono:  11px;

  --wrap: 1180px;
  --gutter: clamp(20px, 3.6vw, 44px);
  --nav-h: 64px;
  --section: clamp(64px, 8vw, 112px);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 220ms;
}

/* ═══ 2 · 基础 ══════════════════════════════════════════════════════════ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  scrollbar-color: #c9c4b8 var(--paper);
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.75;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
p { margin: 0; text-wrap: pretty; }

::selection { background: var(--red); color: #fff; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.skip {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 999;
  padding: 12px 24px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  transform: translateY(-300%);
}
.skip:focus { transform: none; }

/* ═══ 3 · 按钮 ══════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.7em 1.4em;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.btn:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.btn:active { transform: translateY(1px); }

.btn .arr { transition: transform var(--dur) var(--ease); }
.btn:hover .arr { transform: translateX(5px); }

.btn--red {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}
.btn--red:hover {
  border-color: var(--red-deep);
  background: var(--red-deep);
  color: #fff;
}

.btn--sm { min-height: 36px; padding: 0.35em 0.95em; font-size: var(--t-sm); }
.btn--lg { min-height: 54px; padding: 0.8em 1.7em; font-size: 16px; }
.btn--xl { min-height: 66px; padding: 0.9em 2.1em; font-size: 18px; }

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.link:hover { color: var(--red-ink); border-color: var(--red); }
.link .arr { transition: transform var(--dur) var(--ease); }
.link:hover .arr { transform: translateX(4px); }

/* ═══ 4 · 顶栏 ══════════════════════════════════════════════════════════ */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line);
  background: rgba(251, 250, 247, 0.82);
  backdrop-filter: blur(16px) saturate(140%);
}

.nav__in {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--nav-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
}
/* 品牌标记：直接用应用内的真实 logo（assets/logo-mark.png，与应用标题栏同源），
   不再用 CSS 画纯色方块——那个方块与工具箱实际图标完全不像，访客认不出是同一个产品。
   尺寸取 26px 与应用标题栏的 26×26 一致；logo 内容在画布中偏细，小尺寸会发虚，
   因此比原来的 10px 方块明显放大，并与品牌名保持 10px 间距。 */
.brand__mark {
  width: 26px;
  height: 26px;
  flex: none;
  display: block;
  object-fit: contain;
}
.brand__name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.brand__ver { font-size: 10px; color: var(--ink-4); }

.nav__links { display: flex; align-items: center; gap: 26px; }
.nav__links a {
  color: var(--ink-3);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.nav__links a:hover { color: var(--ink); }

/* 移动端菜单：≤720px 时 nav__links 整条隐藏，这里给一个不依赖 JS 的替代入口。
   <details> 原生可展开，所以页面即使完全没有脚本也能导航。 */
.nav__menu { display: none; position: relative; }
.nav__menu summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #fff;
  color: var(--ink-2);
  cursor: pointer;
  list-style: none;
}
.nav__menu summary::-webkit-details-marker { display: none; }
.nav__menu summary svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.nav__menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  display: grid;
  gap: 2px;
  min-width: 168px;
  padding: 8px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(18, 18, 16, 0.14);
}
.nav__menu-panel a {
  padding: 9px 10px;
  border-radius: 6px;
  color: var(--ink-2);
  font-size: var(--t-sm);
  text-decoration: none;
}
.nav__menu-panel a:hover { background: var(--paper-2); color: var(--ink); }

/* ═══ 5 · 首屏 ══════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--nav-h));
  padding-top: clamp(40px, 7vh, 84px);
  background:
    radial-gradient(900px 520px at 78% 6%, rgba(214, 53, 42, 0.07), transparent 70%),
    linear-gradient(to bottom, #ffffff, var(--paper) 62%);
}

.hero__in {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero__top { max-width: 1000px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  color: var(--ink-3);
  font-size: 10.5px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--red);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.045em;
  color: var(--ink);
}

.hero__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  margin-top: clamp(24px, 3vh, 40px);
}

.hero__lede {
  max-width: 34em;
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--ink-2);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 26px;
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  margin: clamp(28px, 4vh, 44px) 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: 10.5px;
  color: var(--ink-3);
}
.hero__facts span {
  display: block;
  font-size: 9px;
  color: var(--ink-4);
}

/* 白底上的应用窗口：靠 1px 描边与柔和投影立起来，不用发光 */
.hero__window {
  position: relative;
  z-index: 1;
  width: min(1080px, calc(100% - 2 * var(--gutter)));
  margin: clamp(36px, 5vh, 64px) auto 0;
  border-radius: 12px 12px 0 0;
  border: 1px solid var(--line-2);
  border-bottom: 0;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.7) inset,
    0 30px 80px rgba(18, 18, 16, 0.16),
    0 2px 6px rgba(18, 18, 16, 0.06);
}
/* 仅对地图背景图生效。
   2026-10-20：原先是无条件的 `.hero__window img { width: 100% }`，会把窗口里**所有**
   <img> 拉成满宽：标题栏 logo（新换的 logo-mark.png，宽度变 0 或撑满整行）、
   下一张缩略图 .thumb（原本 3.5em 方块，会被拉成整行）都中招。
   地图背景图自己的 `.mk__map-img` 已是 position:absolute + 100%，本来就不需要这条，
   所以这里只保留一个具名的钩子，避免再用通配 img 选择器。 */
.hero__window .mk__shot {
  width: 100%;
  height: auto;
  display: block;
}

/* ═══ 6 · 功能面板（浮窗，左右交替）════════════════════════════════════ */

.panels { border-top: 1px solid var(--line); }

.panel {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  align-items: center;
  min-height: clamp(480px, 42vw, 620px);
  padding-block: clamp(56px, 7vw, 96px);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.panel--flip { background: var(--paper-2); }

.panel__media {
  position: absolute;
  top: 50%;
  right: 3%;
  z-index: 0;
  width: 50%;
  aspect-ratio: 2200 / 1191;
  transform: translateY(-50%);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 24px 60px rgba(18, 18, 16, 0.14),
    0 2px 6px rgba(18, 18, 16, 0.05);
}
.panel--flip .panel__media { right: auto; left: 3%; }

.panel__media::after { display: none; }
/* 只约束「媒体区自己的大图」。原来是 `.panel__media img`（后代选择器），
   特异性 (0,1,1) 高于 .mk__mark 的 (0,1,0)，把复刻界面标题栏里 15px 的
   应用图标拉成了 694×40 —— 红色方块被撑成横贯标题栏的色带，
   看上去像一道橙红斜带。2026-10-20 实测确认后收窄为直接子元素。 */
.panel__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.panel__in {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  padding-block: 0;
}
.panel--flip .panel__in { justify-content: flex-end; }

.panel__copy { width: min(450px, 100%); }

.panel__num {
  margin-bottom: 16px;
  color: var(--red-ink);
  font-size: 11px;
}

.panel__title {
  font-family: var(--font-display);
  font-size: var(--t-panel);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.panel__body {
  margin-top: 16px;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink-2);
}

.panel__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.panel__tags li {
  padding: 5px 10px;
  border: 1px solid var(--line-2);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

/* ═══ 7 · 红色流程带 ════════════════════════════════════════════════════ */

.flow {
  background: var(--red-deep);
  color: #fff;
  padding-block: var(--section);
}

.band__title {
  font-family: var(--font-display);
  font-size: var(--t-band);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
}

.band__lede {
  margin-top: 14px;
  max-width: 40em;
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.86);
}

.flow__steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  margin: clamp(40px, 6vw, 64px) 0 0;
  padding: 0;
  list-style: none;
}

.flow__steps > li {
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.45);
}

.flow__steps .mono {
  display: block;
  color: rgba(255, 255, 255, 0.74);
  font-size: 10px;
}

.flow__steps h3 {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.flow__steps p {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.80);
}

.flow__pacts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: clamp(44px, 6vw, 72px) 0 0;
  padding: 0;
  list-style: none;
}
.flow__pacts li {
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  font-size: 13.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.84);
}
.flow__pacts strong {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

/* ═══ 8 · 索引带（浅米）════════════════════════════════════════════════ */

.index {
  background: var(--paper-2);
  color: var(--ink);
  padding-block: var(--section);
}

.index__head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 24px 56px;
  align-items: end;
  padding-bottom: clamp(36px, 4.5vw, 56px);
}

.index__title {
  font-family: var(--font-display);
  font-size: var(--t-band);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* 右上说明：把「功能范围」与「页面结构备注」拆成两层，
   避免两种信息挤在同一段里互相稀释。 */
.index__intro {
  justify-self: end;
  display: grid;
  gap: 12px;
  max-width: 30em;
}

.index__lede {
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}

.index__note {
  padding-left: 12px;
  border-left: 1px solid var(--line-2);
  font-size: 12.5px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--ink-4);
}

.index__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-2);
}

.index__list > li {
  padding: 26px 24px 28px 0;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.index__list > li:nth-child(4n) { border-right: 0; padding-right: 0; }

.index__list .mono {
  display: block;
  margin-bottom: 9px;
  color: var(--red-ink);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.13em;
}

.index__list h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.index__list p {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.78;
  letter-spacing: 0.01em;
  color: var(--ink-3);
}

/* ═══ 9 · 问答 ══════════════════════════════════════════════════════════ */

.faq {
  background: var(--paper);
  padding-block: var(--section);
  border-bottom: 1px solid var(--line);
}

.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 32px 72px;
  align-items: start;
}

.faq__title {
  font-family: var(--font-display);
  font-size: var(--t-band);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.faq__lede {
  margin-top: 18px;
  max-width: 26em;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink-3);
}

.faq__list { border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--red-ink); }

.faq summary i {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}
.faq summary i::before,
.faq summary i::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--ink-3);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0deg); }
.faq details[open] summary i::before,
.faq details[open] summary i::after { background: var(--red); }

.faq details p {
  padding: 0 0 22px;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink-3);
}

/* ═══ 10 · 下载（全页唯一的暗场）═══════════════════════════════════════ */

.dl {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--dark);
  color: var(--dark-text);
  padding-block: var(--section) clamp(64px, 8vw, 104px);
}

.dl__glow {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -30%;
  width: 120vw;
  height: 120vw;
  max-width: 1300px;
  max-height: 1300px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(214, 53, 42, 0.30), transparent 68%);
  filter: blur(30px);
  pointer-events: none;
}

.dl__kicker { color: rgba(246, 244, 240, 0.56); font-size: 10.5px; }

.dl__title {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: clamp(44px, 7.4vw, 108px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--dark-text);
}

.dl__meta {
  margin-top: 20px;
  color: rgba(246, 244, 240, 0.56);
  font-size: 10.5px;
}

.dl__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  margin-top: 32px;
}

.dl__count { color: rgba(246, 244, 240, 0.52); font-size: 10px; }

/* 备用下载源分组：与主按钮同处 .dl__cta（flex），但必须看得出主次。
   为什么分组：三个 66px 等重大按钮并排会让用户不知道该点哪个。
   分组后 = 一个主按钮 + 一组小一号的备用入口，视线先落在红按钮上。 */
.dl__alts {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.dl__alts-k {
  color: rgba(246, 244, 240, 0.5);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* 备用按钮：深色下载区里 .btn 的默认 color 是 --ink（深色），直接压在 --dark 上几乎不可见
   （2026-10-26 实测对比度 1.02:1）。主按钮因为 .btn--red 显式设了 color:#fff 才没暴露。
   文字色用 --dark-text 这个既有 token；边框没有对应的深色区分隔线 token，
   跟随本区块其他分隔线（.dl__spec / .dl__steps）的既有写法用 rgba。 */
.dl__alt {
  border-color: rgba(246, 244, 240, 0.34);
  color: var(--dark-text);
  font-size: 14px;
}
.dl__alt:hover {
  border-color: var(--dark-text);
  color: var(--dark-text);
}

/* 按钮里的障碍标记（需登录 / 密码）：继承按钮当前色 + 降透明度。
   透明度不能低于 0.85：低于它时深色底上的对比度会跌到 3:1 以下
   （2026-10-26 实测 0.7 → 2.8:1，低于 WCAG AA 的 4.5）。 */
.dl__alt-note {
  margin-left: 0.15em;
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.86;
  white-space: nowrap;
}

.dl__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 32px 80px;
  margin-top: clamp(48px, 7vw, 88px);
  padding-top: 32px;
  border-top: 1px solid rgba(246, 244, 240, 0.16);
}

.dl__steps { margin: 0; padding: 0; list-style: none; }
.dl__steps li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 12px;
  padding-block: 12px;
  border-bottom: 1px solid rgba(246, 244, 240, 0.12);
}
.dl__steps li:last-child { border-bottom: 0; }
.dl__steps .mono { color: #ff8578; font-size: 10px; padding-top: 0.3em; }
.dl__steps p { font-size: var(--t-sm); line-height: 1.75; color: rgba(246, 244, 240, 0.78); }

.dl__spec { width: 100%; border-collapse: collapse; }
.dl__spec tr { border-bottom: 1px solid rgba(246, 244, 240, 0.12); }
.dl__spec tr:first-child { border-top: 1px solid rgba(246, 244, 240, 0.12); }
.dl__spec th,
.dl__spec td {
  padding: 11px 0;
  text-align: left;
  vertical-align: baseline;
  font-size: var(--t-sm);
}
.dl__spec th {
  width: 30%;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 244, 240, 0.52);
}
.dl__spec td { color: var(--dark-text); }

/* ═══ 11 · 页脚（与下载区连成一块暗场）═════════════════════════════════ */

.foot {
  background: var(--dark);
  border-top: 1px solid rgba(246, 244, 240, 0.12);
  padding-block: 48px 64px;
  color: rgba(246, 244, 240, 0.66);
}
.foot__grid { max-width: 84ch; }
.foot__brand {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--dark-text);
}
.foot__brand .mono { margin-left: 8px; font-size: 9.5px; color: rgba(246, 244, 240, 0.52); }

.foot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 20px;
}
.foot__nav a {
  color: rgba(246, 244, 240, 0.82);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.foot__nav a:hover { color: #ff8578; }

.foot p {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.85;
  color: rgba(246, 244, 240, 0.56);
}
.foot .foot__meta {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(246, 244, 240, 0.12);
  font-size: 10px;
  line-height: 1.9;
  color: rgba(246, 244, 240, 0.42);
}

/* ═══ 12 · 动效 ═════════════════════════════════════════════════════════
   一个编排好的焦点：首屏复刻窗口的「装配」。
   标题逐字上推 → 窗口框落位 → 侧栏导航逐项点亮 → 四张地图卡依次落位。
   其余全站只保留支撑性反馈（见 app-mock.css 的卡片倾斜与时间线呼吸）。

   纪律：所有元素**默认可见**，隐藏与位移只写在 no-preference 里；
   prefers-reduced-motion: reduce 时这些规则整体不生效，页面就是静态版。 */

/* 首屏光斑：随滚动缓慢下移，形成纵深（--drift 由 motion.js 写入） */
.hero__glow {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: -18vh;
  width: min(1280px, 110vw);
  height: min(1280px, 110vw);
  pointer-events: none;
  transform: translate3d(-50%, var(--drift, 0px), 0);
  background: radial-gradient(
    closest-side,
    rgba(214, 53, 42, 0.13),
    rgba(214, 53, 42, 0.05) 46%,
    transparent 72%
  );
}

@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* 窗口落位：位移 + 极轻的缩放，读起来像「框落定」而不是「淡入」 */
@keyframes seat {
  from { opacity: 0; transform: translateY(30px) scale(0.988); }
  to   { opacity: 1; transform: none; }
}

/* 逐字上推：内层从遮罩下方整块推上来 */
@keyframes lift {
  from { transform: translateY(112%); }
  to   { transform: none; }
}

/* 侧栏导航点亮：从左侧探入，像应用启动时逐项挂载 */
@keyframes nav-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: none; }
}

/* 地图卡落位 */
@keyframes card-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* 标题逐字所需的遮罩结构。默认状态不隐藏任何东西——
   位移只写在下面 no-preference 块里，所以 reduce 时就是普通静态标题。 */
/* 逐字遮罩的结构**写在 HTML 里**（index.html 的 .hero__title 内），
   不由 JS 拆分。原因：JS 拆分发生在 DOMContentLoaded，那时标题已经画过一帧，
   用户会看到「完整标题 → 消失 → 再升起」。预置结构后动画随 CSS 一起生效，
   没有那一帧，而且脚本失败也不影响（动画照常跑完停在可见态）。

   遮罩必须贴合字形：标题行高 0.96 比字形矮，直接用会裁掉 p/g/y 的下伸部；
   padding 给太多又会让遮罩远高于字形，上推中间态变成「碎片」。
   1.02 的行盒 + 极小上下余量，高度 ≈ 1.1 倍字号，正好容下全字形。 */
.hero__title .tw {
  display: inline-block;
  overflow: hidden;
  line-height: 1.02;
  padding-block: 0.04em;
  margin-block: -0.04em;
  vertical-align: bottom;
}
.hero__title .tw__i { display: inline-block; line-height: 1.02; }

@media (prefers-reduced-motion: no-preference) {
  /* 标题：逐字上推，22ms 一步、620ms 一段，11 块总长约 840ms。
     序号用 :nth-child 而不是自定义属性——CSP 是 style-src 'self'，
     HTML 里写不了 style="--i:0"，而 CSSOM 只能给已存在元素赋值。 */
  .hero__title .tw__i {
    transform: translateY(100%);
    animation: lift 620ms var(--ease) both;
  }
  /* 用 :nth-of-type 而不是 :nth-child —— h1 里有一个 <br>（换行），
     nth-child 会把 <br> 也算进去，导致第 6 项之后整体错位：
     实测「口」匹配不到任何规则 → delay 为 0 → 它反而第一个升起，
     而「收」拿了本该给「进」的延迟。nth-of-type 只数同类型的 span，正好。 */
  .hero__title .tw:nth-of-type(1)  .tw__i { animation-delay: 0ms; }
  .hero__title .tw:nth-of-type(2)  .tw__i { animation-delay: 22ms; }
  .hero__title .tw:nth-of-type(3)  .tw__i { animation-delay: 44ms; }
  .hero__title .tw:nth-of-type(4)  .tw__i { animation-delay: 66ms; }
  .hero__title .tw:nth-of-type(5)  .tw__i { animation-delay: 88ms; }
  .hero__title .tw:nth-of-type(6)  .tw__i { animation-delay: 110ms; }
  .hero__title .tw:nth-of-type(7)  .tw__i { animation-delay: 132ms; }
  .hero__title .tw:nth-of-type(8)  .tw__i { animation-delay: 154ms; }
  .hero__title .tw:nth-of-type(9)  .tw__i { animation-delay: 176ms; }
  .hero__title .tw:nth-of-type(10) .tw__i { animation-delay: 198ms; }
  .hero__title .tw:nth-of-type(11) .tw__i { animation-delay: 220ms; }

  .eyebrow,
  .hero__lede { animation: rise 700ms var(--ease) both; }
  .eyebrow { animation-delay: 90ms; }
  .hero__lede { animation-delay: 150ms; }

  .hero__cta { animation: rise 700ms var(--ease) both; animation-delay: 240ms; }
  .hero__facts { animation: rise 700ms var(--ease) both; animation-delay: 320ms; }

  /* 复刻窗口：在标题推到一半时落位，接住视线 */
  .hero__window { animation: seat 900ms var(--ease) both; animation-delay: 380ms; }

  /* 侧栏逐项点亮。--n 由 motion.js 按全局顺序写入（三个 ul 连排计数） */
  .mk__nav li {
    animation: nav-in 520ms var(--ease) both;
    animation-delay: calc(560ms + var(--n, 0) * 26ms);
  }

  /* 四张地图卡依次落位，90ms 一张 */
  .mk__maps .mk__map {
    animation: card-in 620ms var(--ease) both;
  }
  .mk__maps .mk__map:nth-child(1) { animation-delay: 660ms; }
  .mk__maps .mk__map:nth-child(2) { animation-delay: 750ms; }
  .mk__maps .mk__map:nth-child(3) { animation-delay: 840ms; }
  .mk__maps .mk__map:nth-child(4) { animation-delay: 930ms; }

  /* 时间线最后浮现，作为「装配完成」的收尾 */
  .hero__window .mk__tl { animation: rise 620ms var(--ease) both; animation-delay: 1020ms; }
}

/* ═══ 13 · 响应式 ═══════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
  .hero { min-height: 0; padding-bottom: 0; }
  /* 与面板图保持同一套「框」的语言 */
  .hero__window {
    width: calc(100% - 2 * var(--gutter));
    margin: 36px auto 8px;
    border-radius: 10px;
    border-bottom: 1px solid var(--line-2);
    box-shadow: 0 14px 34px rgba(18, 18, 16, 0.12);
  }

  /* 窄屏：浮窗回到文档流，图在上文在下 */
  .panel,
  .panel--flip { display: block; padding-block: 0; }

  /* 浅色下截图与纸面同色，必须给它独立的框，否则两块图会糊成一片 */
  .panel__media,
  .panel--flip .panel__media {
    position: relative;
    inset: auto;
    top: auto;
    width: auto;
    margin: 24px var(--gutter) 0;
    aspect-ratio: auto;
    transform: none;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    box-shadow: 0 12px 34px rgba(18, 18, 16, 0.12);
    overflow: hidden;
  }
  .panel__media img { object-position: center; }

  .panel__in,
  .panel--flip .panel__in {
    justify-content: flex-start;
    padding-block: 26px 44px;
  }
  .panel__copy { width: 100%; }

  .flow__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow__pacts { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  .index__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .index__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .index__list > li:nth-child(4n) { border-right: 1px solid var(--line); padding-right: 22px; }
  .index__list > li:nth-child(2n) { border-right: 0; padding-right: 0; }

  .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .dl__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

@media (max-width: 720px) {
  :root { --nav-h: 58px; }

  .nav__links { display: none; }
  .nav__menu { display: block; margin-left: 2px; }
  .hero__cta .btn { width: 100%; }
  .hero__facts { gap: 8px 22px; }

  .panel__in,
  .panel--flip .panel__in { padding-block: 22px 38px; }
  .panel__body { font-size: 15px; }

  .flow__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .index__list { grid-template-columns: minmax(0, 1fr); }
  .index__list > li,
  .index__list > li:nth-child(4n),
  .index__list > li:nth-child(2n) {
    padding-inline: 0;
    border-right: 0;
  }

  .dl__spec th { width: 34%; }
  .dl__spec th,
  .dl__spec td { font-size: 13px; }
}

@media (max-width: 460px) {
  .brand__ver { display: none; }
  .hero__title { letter-spacing: -0.035em; }
  .hero__cta { gap: 10px; }
  .hero__cta .link { justify-content: center; width: 100%; }
  .flow__steps { grid-template-columns: minmax(0, 1fr); }
}

/* ═══ 14 · 降低动效 ═════════════════════════════════════════════════════

   刻意**不用**以前那种一刀切：

     *, *::before, *::after { animation-duration: 0.01ms !important;
                              transition-duration: 0.01ms !important; }

   它会把颜色、透明度、边框这些「确认状态」的过渡一起杀掉，而减少动效的用户
   同样需要知道「我点了、它变了」。现在的做法是分层：

   1. 所有**位移**类动画（标题上推、窗口落位、卡片落位、导航探入、光斑漂移、
      卡片倾斜）只写在 `prefers-reduced-motion: no-preference` 里 ——
      reduce 时这些规则根本不存在，不是被压成 0.01ms。
   2. **常驻循环**（时间线呼吸）在 reduce 下显式关闭。
   3. **颜色 / 透明度 / 阴影**过渡保留原速（--dur: 220ms），因为它们是反馈。
   4. 数字滚动在 JS 侧直接跳到终值（motion.js 的 reduced 分支），
      不留一个「数字在滚但看不出在滚」的中间态。 */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* 常驻循环一律不跑：不动的页面才叫「减少动效」 */
  .mk__tl.is-live-view .mk__tl-seg.is-now { animation: none; }

  /* 卡片倾斜的复位写在 css/app-mock.css（规则的所有者旁边）：
     这里写 .mk__map { transform: none } 会被后加载的同特异性规则盖掉——
     2026-10-20 实测残留 perspective 的 Z 分量，就是这个原因。 */
}