/* =========================================================================
   沃才高科 WOCAI — 官网样式表 v2
   定位：AI 智能硬件品牌官网（青少年心理健康与陪伴）
   风格：Apple Vision Pro 空间感 × XREAL 明亮未来科技感
   底色：大面积白/冰川浅蓝 · 主色：天蓝 · 极光：青→蓝→紫 · 点亮：晨曦暖金
   品牌色来自官方 LOGO 像素采样：#009CE4（93.8%）/ #F0A818（6.2%）
   ========================================================================= */

/* ---------- 1. 设计变量 ---------- */
:root {
  /* 主色阶 —— 天蓝核心 */
  --blue-50:  #F0F8FF;
  --blue-100: #E0F0FE;
  --blue-200: #C2E2FD;
  --blue-300: #93CEFA;
  --blue-400: #55B1F3;
  --blue-500: #009CE4;   /* 品牌主色（仅用于背景/渐变/描边，不承载正文） */
  --blue-600: #0074AC;   /* 文字专用蓝，原 #0084C4（4.12）→ 5.13 */
  --blue-700: #006B9F;

  /* 冰川蓝 / 极光 */
  --ice-100: #EFF7FA;
  --ice-200: #DCEFF4;
  --aurora-cyan:   #4FD3E8;
  --aurora-sky:    #59B8F5;
  --aurora-blue:   #5B8BF0;
  --aurora-violet: #8B7BF2;
  --aurora-plum:   #B27BEE;

  /* 晨曦暖金 —— 只做关键点亮
     ★ dawn-600 是唯一用于「文字」的金色，必须满足浅金底（#FEF4E5）上 ≥4.5，
       原 #DE8A0A 仅 2.49 不合格，加深为 #9C5F08（4.76）。
       dawn-300/400/500 只用于背景、渐变与图标，不承载正文。 */
  --dawn-300: #FFD98A;
  --dawn-400: #FFC65C;
  --dawn-500: #F5A623;
  --dawn-600: #9C5F08;   /* 文字专用金，原 #DE8A0A */

  /* 墨色（文字）—— 浅底上的深蓝灰，不用纯黑
     ★ 对比度约束：浅底（#FFFFFF / #EFF7FE / #EAF4FC）上的正文色一律 ≥4.5，
       即最深只能用到 ink-600 一档；ink-500 已加深至 #55708C 以满足该阈值。 */
  --ink-900: #0B1C2E;
  --ink-800: #16304A;
  --ink-700: #29455F;
  --ink-600: #4A6480;
  --ink-500: #55708C;   /* 原 #6E86A0，对比度 3.76 不合格 → 5.14 */
  --ink-400: #7D91A8;   /* 原 #93A8BE，对比度 2.45 仅可用于占位符 → 3.24 */
  --ink-300: #BCCCDC;
  --ink-200: #DCE7F1;
  --ink-100: #EDF4FA;

  /* 底色层 */
  --paper:   #FFFFFF;
  --mist:    #F7FBFF;
  --mist-2:  #EFF7FE;
  --glacier: #EAF4FC;
  --frost:   #F4FAFF;

  /* 玻璃 */
  --glass:        rgba(255, 255, 255, 0.62);
  --glass-strong: rgba(255, 255, 255, 0.82);
  --glass-soft:   rgba(255, 255, 255, 0.42);
  --glass-line:   rgba(255, 255, 255, 0.78);
  --glass-border: rgba(120, 180, 230, 0.28);
  --glass-blur:   saturate(160%) blur(22px);

  /* 描边 */
  --line:      rgba(22, 60, 100, 0.09);
  --line-2:    rgba(22, 60, 100, 0.15);
  --line-blue: rgba(0, 156, 228, 0.22);

  /* 阴影 —— 轻盈、带蓝调、不用黑 */
  --sh-xs: 0 1px 3px rgba(30, 80, 130, 0.05);
  --sh-sm: 0 4px 14px -2px rgba(30, 80, 130, 0.08), 0 1px 3px rgba(30, 80, 130, 0.04);
  --sh-md: 0 14px 38px -10px rgba(30, 80, 130, 0.14), 0 3px 10px rgba(30, 80, 130, 0.05);
  --sh-lg: 0 34px 76px -18px rgba(30, 80, 130, 0.20), 0 10px 26px -8px rgba(30, 80, 130, 0.08);
  --sh-float: 0 44px 90px -26px rgba(24, 90, 150, 0.28), 0 14px 34px -12px rgba(24, 90, 150, 0.12);
  --glow-blue:   0 20px 56px -14px rgba(0, 156, 228, 0.42);
  --glow-aurora: 0 24px 64px -16px rgba(110, 140, 240, 0.40);
  --glow-dawn:   0 18px 44px -14px rgba(245, 166, 35, 0.42);

  /* 圆角 */
  --r-xs: 8px;  --r-sm: 12px; --r-md: 18px;
  --r-lg: 24px; --r-xl: 32px; --r-2xl: 44px; --r-full: 999px;

  /* 排版与栅格 */
  --shell: 1200px;
  --pad: clamp(20px, 5vw, 64px);
  --nav-h: 74px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable",
    "Segoe UI", Roboto, "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

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

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  max-width: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.78;
  color: var(--ink-700);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 必须用 clip 而非 hidden：hidden 会把 body 变成滚动容器，
     sticky 元素从此只对 body 的滚动口生效，而 body 从不滚动 → 吸附失效。
     clip 同样裁掉横向溢出，但不创建滚动容器。 */
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p, figure, dl, dd { margin: 0; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }

::selection { background: rgba(0, 156, 228, 0.18); color: var(--ink-900); }

:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 3px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- 3. 极光氛围背景 ---------- */
.aurora-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: paint;
  background: radial-gradient(120% 80% at 50% -10%, #FFFFFF 0%, #F7FBFF 42%, #EFF7FE 100%);
}
/* ★ 决定性性能修复：这里原本是 filter: blur(90px)。
   实测 A/B（同一页面、只改这一项）：
     blur(90px) -> 每帧 68ms(约15fps)，滚动时 84ms，掉帧率 100%
     blur(64px) -> 每帧 49ms，滚动时 76ms，掉帧率 100%
     去掉 blur  -> 每帧 16.6ms(60fps)，滚动时 18.1ms，掉帧率 0%
   而「把 veil 整层隐藏」与「只去掉 blur」帧时长完全相同（16.6 vs 16.6），
   说明这层的开销 100% 来自 blur，与动画、层数、尺寸都无关。
   大半径模糊会让合成器每帧重新光栅化整层，是这类全屏氛围背景最典型的性能陷阱。
   柔和度改由更长的 transparent 过渡区间承担 —— radial-gradient 本身就已经是渐隐的。 */
.aurora-bg__veil {
  position: absolute;
  border-radius: 50%;
  opacity: 0.55;
  will-change: transform;
  contain: paint;
}
.aurora-bg__veil--1 {
  width: 58vw; height: 58vw; top: -22vw; left: -10vw;
  background: radial-gradient(circle at 40% 40%,
    rgba(79, 211, 232, 0.58) 0%, rgba(89, 184, 245, 0.32) 34%,
    rgba(89, 184, 245, 0.12) 58%, rgba(89, 184, 245, 0.03) 74%, transparent 86%);
  animation: veilDrift1 26s var(--ease-inout) infinite alternate;
}
.aurora-bg__veil--2 {
  width: 50vw; height: 50vw; top: -14vw; right: -6vw;
  background: radial-gradient(circle at 55% 45%,
    rgba(178, 123, 238, 0.44) 0%, rgba(91, 139, 240, 0.28) 36%,
    rgba(91, 139, 240, 0.11) 60%, rgba(91, 139, 240, 0.03) 76%, transparent 88%);
  animation: veilDrift2 32s var(--ease-inout) infinite alternate;
  transform-origin: 55% 45%;
}
.aurora-bg__veil--3 {
  width: 44vw; height: 44vw; bottom: -20vw; left: 28vw;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 198, 92, 0.32) 0%, rgba(79, 211, 232, 0.20) 38%,
    rgba(79, 211, 232, 0.08) 62%, rgba(79, 211, 232, 0.02) 78%, transparent 90%);
  animation: veilDrift3 38s var(--ease-inout) infinite alternate;
}
/* ★ 关键性能修复：动画里不能带 scale。
   scale 会改变模糊层的光栅化尺寸，逼浏览器每帧重算 64px 模糊（最贵的操作之一）；
   而 translate 只是合成器位移，几乎零成本。位移幅度相应加大以补偿视觉观感。 */
@keyframes veilDrift1 { to { transform: translate3d(9vw, 7vw, 0); } }
@keyframes veilDrift2 { to { transform: translate3d(-10vw, 9vw, 0); } }
@keyframes veilDrift3 { to { transform: translate3d(8vw, -8vw, 0); } }

/* 滚动中暂停极光漂移：配合 site.js 的 initScrollPerf，
   滚动停止 160ms 后自动恢复。周期 26~38s 的缓慢漂移，暂停几百毫秒无法察觉。 */
body.is-scrolling .aurora-bg__veil { animation-play-state: paused; }

/* 粒子 canvas 每帧重绘，必须提为独立合成层：
   否则它会连同 3 个 blur veil 一起被迫重新光栅化（实测两者叠加使帧时长飙到 68ms）。 */
.aurora-bg__net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  transform: translateZ(0);
  will-change: transform;
}

.aurora-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(0, 130, 200, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 130, 200, 0.055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 78%);
}

/* 正文层必须显式压在固定极光背景之上：
   仅 3 页用 .page，其余 7 页只有 <main>，此前 main 无任何层级规则，
   导致正文与 .aurora-bg(z-index:0) 同层，GPU 合成层重排时正文会被背景吞掉。 */
.page,
main { position: relative; z-index: 1; }

/* ---------- 4. 布局工具 ---------- */
/* .shell 是整站唯一的内容容器：永远居中，且两侧永远留出至少 --pad 的空白，
   不会因为视口变窄而贴满整屏（min() 保证内容宽 <= 视口 - 2*pad）。 */
.shell {
  width: 100%;
  max-width: min(calc(var(--shell) + var(--pad) * 2), 100%);
  margin: 0 auto;
  padding-inline: var(--pad);
}
.shell--narrow { max-width: min(calc(940px + var(--pad) * 2), 100%); }

.section { padding-block: clamp(60px, 7vw, 118px); }
.section--tight { padding-block: clamp(40px, 5vw, 76px); }
/* 只压底不压顶：末尾区块收尾用。
   比内联 padding-bottom:0 好在两点 —— ① 保留底部留白，
   卡片不会和下一段背景（白/浅蓝交界）贴死；② 可被媒体查询覆盖。 */
.section--tight-bottom { padding-bottom: clamp(40px, 5vw, 76px); }
.section--mist { background: linear-gradient(180deg, rgba(247,251,255,0), rgba(239,247,254,.9) 18%, rgba(239,247,254,.9) 82%, rgba(247,251,255,0)); }
.section--glacier { background: linear-gradient(180deg, #F4FAFF, #EAF4FC); }
.section--frost { background: linear-gradient(180deg, #FFFFFF, #F7FBFF); }

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.wrap { flex-wrap: wrap; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.gap-24 { gap: 24px; } .gap-32 { gap: 32px; }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.measure { max-width: 66ch; }
.measure-sm { max-width: 50ch; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }
.mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; } .mb-48 { margin-bottom: 48px; }

.grid { display: grid; gap: clamp(16px, 1.8vw, 26px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 4.4vw, 68px);
  align-items: center;
}
.split--wide { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
/* 长列（时间轴/表单）与短列并排时顶端对齐：center 会把短列垂直居中，
   上下各留出与长列等高差的大片空白 —— 即用户截图中的「大面积空白」 */
.split--top { align-items: start; }
.split--top > .contact-info, .split--top > .about-side {
  position: sticky;
  top: calc(var(--nav-h) + 30px);
}
.split--narrow { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); }

/* 首屏 —— 占满一屏，但不锁滚动 */
.section--hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--nav-h) + clamp(28px, 5vh, 76px));
  padding-bottom: clamp(36px, 6vh, 92px);
}
.section--hero .hero-deck { width: 100%; }
/* 首屏两栏整体不超过一屏视觉高度时，才让它居中占满 */
@media (min-height: 780px) and (min-width: 1025px) {
  .section--hero { min-height: calc(100dvh - var(--nav-h)); }
}

@media (max-width: 900px) {
  .split, .split--wide, .split--narrow { grid-template-columns: 1fr; gap: 32px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 窄窗口（约 ≤1140px）两栏会挤成「左长文 + 右窄卡」的失衡版式，
   指标卡被迫折行、中间留出大片空白 —— 改为单栏堆叠更稳。 */
@media (max-width: 1140px) {
  .split--wide, .split--narrow { grid-template-columns: 1fr; gap: 34px; }
  .split--top > .contact-info, .split--top > .about-side { position: static; }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---------- 5. 排版 ---------- */
.display { font-size: clamp(38px, 5.1vw, 68px); line-height: 1.1; letter-spacing: -0.028em; font-weight: 700; color: var(--ink-900); }
.display--sm { font-size: clamp(32px, 4vw, 50px); }
.h1 { font-size: clamp(32px, 3.9vw, 50px); line-height: 1.16; letter-spacing: -0.024em; font-weight: 700; color: var(--ink-900); }
.h2 { font-size: clamp(27px, 3.1vw, 41px); line-height: 1.2; letter-spacing: -0.021em; font-weight: 700; color: var(--ink-900); }
.h3 { font-size: clamp(21px, 2.2vw, 28px); line-height: 1.32; letter-spacing: -0.016em; font-weight: 650; color: var(--ink-800); }
.h4 { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.42; letter-spacing: -0.01em; font-weight: 650; color: var(--ink-800); }
.h5 { font-size: 15.5px; line-height: 1.5; font-weight: 650; color: var(--ink-800); }

.lead { font-size: clamp(15.5px, 1.35vw, 18.5px); line-height: 1.76; color: var(--ink-600); }
.body { font-size: 15.5px; line-height: 1.8; color: var(--ink-600); }
.small { font-size: 13.5px; line-height: 1.68; color: var(--ink-500); }
.mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em; }

.grad-aurora {
  background: linear-gradient(102deg, var(--aurora-cyan) 0%, var(--aurora-sky) 26%, var(--blue-500) 52%, var(--aurora-violet) 78%, var(--aurora-plum) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.grad-sky {
  background: linear-gradient(100deg, var(--aurora-cyan) 0%, var(--blue-500) 45%, var(--aurora-violet) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.eyebrow::before {
  content: "";
  width: 20px; height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--aurora-cyan), var(--aurora-violet));
}

.head { max-width: 720px; }
.head--center { max-width: 760px; margin-inline: auto; text-align: center; }
.head--center .eyebrow { justify-content: center; }
.head .h2 { margin-top: 14px; }
.head .lead { margin-top: 14px; }

/* ---------- 6. 导航 ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.nav[data-scrolled] {
  background: rgba(255, 255, 255, 0.74);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom-color: var(--glass-border);
  box-shadow: 0 10px 34px -22px rgba(24, 90, 150, 0.34);
}
.nav__inner {
  width: 100%;
  max-width: min(calc(var(--shell) + var(--pad) * 2), 100%);
  margin: 0 auto;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand__mark,
.brand__logo { width: 38px; height: 38px; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__cn,
.brand__name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-900); }
.brand__en { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-500); }

.nav__links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav__link {
  position: relative;
  padding: 9px 11px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-600);
  border-radius: var(--r-full);
  white-space: nowrap;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.nav__link:hover { color: var(--blue-600); background: rgba(0, 156, 228, 0.07); }
.nav__link[aria-current="page"] { color: var(--blue-600); font-weight: 600; }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  bottom: 2px; left: 50%;
  transform: translateX(-50%);
  width: 16px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--aurora-cyan), var(--aurora-violet));
}

.nav__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.nav__toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav__toggle span {
  display: block;
  width: 19px; height: 1.8px;
  border-radius: 2px;
  background: var(--ink-700);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }

@media (max-width: 1360px) {
  .nav__links, .nav__actions { display: none; }
  .nav__toggle { display: flex; margin-left: auto; }
}

.drawer, .mobile-nav {
  position: fixed;
  inset: var(--nav-h) 0 auto 0;
  z-index: 88;
  padding: 14px var(--pad) 26px;
  display: none;
  flex-direction: column;
  gap: 2px;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--sh-lg);
}
.drawer[data-open], .mobile-nav[data-open] { display: flex; animation: drawerIn .32s var(--ease-out); }
@keyframes drawerIn { from { opacity: 0; transform: translateY(-10px); } }
.drawer a, .mobile-nav a { padding: 13px 14px; font-size: 16px; font-weight: 500; color: var(--ink-700); border-radius: var(--r-sm); }
.drawer a:hover, .mobile-nav a:hover { background: rgba(0, 156, 228, 0.07); color: var(--blue-600); }

/* ---------- 7. 按钮 ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: transform .28s var(--ease-spring), box-shadow .3s var(--ease),
              background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn:active { transform: scale(0.975); }
.btn--sm { padding: 9px 19px; font-size: 14px; }
.btn--lg { padding: 16px 33px; font-size: 16px; }
.btn--block { width: 100%; }

.btn--primary {
  color: #fff;
  background: linear-gradient(118deg, var(--aurora-cyan) 0%, var(--blue-500) 48%, var(--aurora-blue) 100%);
  box-shadow: 0 12px 30px -10px rgba(0, 156, 228, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -12px rgba(0, 156, 228, 0.60), inset 0 1px 0 rgba(255, 255, 255, 0.42); }
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.42) 50%, transparent 70%);
  transform: translateX(-140%);
  transition: transform .75s var(--ease-out);
}
.btn--primary:hover::after { transform: translateX(140%); }

.btn--dawn {
  color: #fff;
  background: linear-gradient(118deg, var(--dawn-400) 0%, var(--dawn-500) 55%, var(--dawn-600) 100%);
  box-shadow: var(--glow-dawn), inset 0 1px 0 rgba(255, 255, 255, 0.36);
}
.btn--dawn:hover { transform: translateY(-2px); box-shadow: 0 24px 50px -14px rgba(245, 166, 35, 0.52); }

.btn--glass {
  color: var(--ink-800);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-line);
  box-shadow: var(--sh-sm);
}
.btn--glass:hover {
  transform: translateY(-2px);
  background: var(--glass-strong);
  border-color: rgba(0, 156, 228, 0.36);
  color: var(--blue-600);
  box-shadow: var(--sh-md);
}

.btn--ghost { color: var(--ink-700); border-color: var(--line-2); background: rgba(255, 255, 255, 0.5); }
.btn--ghost:hover { transform: translateY(-2px); border-color: var(--blue-500); color: var(--blue-600); background: #fff; box-shadow: var(--sh-sm); }

.btn--link { padding: 0; border-radius: 0; color: var(--blue-600); font-weight: 600; }
.btn--link:hover { gap: 12px; }

.btn__arrow { transition: transform .3s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ---------- 8. 玻璃卡片体系 ---------- */
.card {
  position: relative;
  display: block;
  padding: clamp(22px, 2.2vw, 30px);
  border-radius: var(--r-lg);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.7) 0%, transparent 42%);
  opacity: 0.85;
  pointer-events: none;
}
.card > * { position: relative; z-index: 1; }
a.card:hover, .card--hover:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 156, 228, 0.34);
  box-shadow: var(--sh-lg), 0 0 0 1px rgba(0, 156, 228, 0.08);
}
.card--halo::after {
  content: "";
  position: absolute;
  width: 220px; height: 220px;
  top: -110px; right: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 156, 228, 0.20), transparent 68%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--ease);
}
a.card:hover::after, .card--hover:hover::after { opacity: 1; }
.card--flat { background: #fff; border-color: var(--line); box-shadow: none; }
.card--flat::before { display: none; }

.card__icon {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 15px;
  color: var(--blue-600);
  background: linear-gradient(140deg, var(--blue-100), var(--frost));
  border: 1px solid rgba(0, 156, 228, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 5px 14px -6px rgba(0, 156, 228, 0.28);
  transition: transform .4s var(--ease-spring);
}
a.card:hover .card__icon, .card--hover:hover .card__icon { transform: translateY(-3px) scale(1.05); }

.card__text { margin-top: 10px; font-size: 14.5px; line-height: 1.76; color: var(--ink-600); }
.card__foot { margin-top: 18px; display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--blue-600); }
.card__more { margin-left: auto; }
.card__tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blue-600);
  background: rgba(0, 156, 228, 0.09);
  border: 1px solid rgba(0, 156, 228, 0.16);
}

/* 悬浮展示位 —— 图片就是物体本身，不加相框 */
.stage { position: relative; display: grid; place-items: center; padding: clamp(18px, 2.4vw, 36px); }
.stage__glow {
  position: absolute;
  width: 76%; height: 76%;
  border-radius: 50%;
  filter: blur(48px);
  background: radial-gradient(circle, rgba(79, 211, 232, 0.34), rgba(91, 139, 240, 0.22) 46%, transparent 72%);
  animation: stagePulse 7s var(--ease-inout) infinite alternate;
}
@keyframes stagePulse { to { transform: scale(1.14); opacity: 0.82; } }
.stage__img {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 560px;
  filter: drop-shadow(0 34px 48px rgba(24, 90, 150, 0.22));
  animation: floatY 8s var(--ease-inout) infinite alternate;
}
@keyframes floatY { to { transform: translateY(-15px); } }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.metric__v {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: clamp(26px, 2.7vw, 36px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink-900);
}
.metric__v .num, .metric__v > span:last-child {
  background: linear-gradient(100deg, var(--blue-500), var(--aurora-violet));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.metric__k { margin-top: 8px; font-size: 13px; color: var(--ink-500); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 12px;
  border-radius: var(--r-full);
  font-size: 13.5px;
  color: var(--ink-700);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--sh-xs);
}
.pill b { color: var(--blue-600); font-weight: 700; }
.dot-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--aurora-cyan);
  box-shadow: 0 0 0 0 rgba(79, 211, 232, 0.7);
  animation: pulseRing 2.4s var(--ease-out) infinite;
}
@keyframes pulseRing {
  70% { box-shadow: 0 0 0 9px rgba(79, 211, 232, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 211, 232, 0); }
}

/* ---------- 9. 首页 —— 单屏 + 左右切换 Deck ---------- */
/* 侧边圆点指示器 */
.deck-nav {
  position: fixed;
  right: clamp(12px, 2vw, 30px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
}
.deck-nav__dot {
  position: relative;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(0, 130, 200, 0.24);
  transition: all .4s var(--ease-spring);
}
.deck-nav__dot { display: block; }
.deck-nav__dot:hover { background: var(--blue-500); transform: scale(1.25); }
.deck-nav__dot[data-active] {
  height: 30px;
  border-radius: var(--r-full);
  background: linear-gradient(180deg, var(--aurora-cyan), var(--aurora-violet));
  box-shadow: 0 4px 12px -3px rgba(0, 156, 228, 0.6);
}
.deck-nav__label {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  padding: 5px 12px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-700);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-line);
  box-shadow: var(--sh-sm);
  transition: all .32s var(--ease);
}
.deck-nav__dot:hover .deck-nav__label,
.deck-nav__dot[data-active] .deck-nav__label { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 1280px) { .deck-nav__label { display: none; } }
@media (max-width: 860px) { .deck-nav { display: none; } }

/* 底部进度条 */
/* 首屏 */
.hero-deck {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(26px, 4vw, 62px);
  align-items: center;
  width: 100%;
}
@media (max-width: 1024px) {
  .hero-deck { grid-template-columns: 1fr; gap: 26px; }
  .hero-deck__visual { display: none; }
}
.hero-deck__copy { max-width: 620px; }
.hero-deck .display { margin-top: 20px; }
.hero-deck .lead { margin-top: 20px; max-width: 56ch; }
.hero-deck__cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 28px; }
.hero-deck__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(22px, 3.4vw, 52px);
  margin-top: clamp(24px, 3.4vh, 42px);
  padding-top: clamp(18px, 2.6vh, 30px);
  border-top: 1px solid var(--line);
}

.hero-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: min(50vh, 400px);
  overflow: hidden;
}
.hero-stage__halo {
  position: absolute;
  width: min(86%, 470px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(38px);
  background:
    radial-gradient(circle at 38% 34%, rgba(79, 211, 232, 0.46), transparent 56%),
    radial-gradient(circle at 68% 62%, rgba(178, 123, 238, 0.40), transparent 58%),
    radial-gradient(circle at 50% 50%, rgba(0, 156, 228, 0.26), transparent 70%);
  animation: stagePulse 9s var(--ease-inout) infinite alternate;
}
.hero-stage__ring { position: absolute; border-radius: 50%; border: 1px solid rgba(0, 156, 228, 0.20); }
.hero-stage__ring--a { width: 76%; aspect-ratio: 1; animation: spin 38s linear infinite; }
.hero-stage__ring--b { width: 60%; aspect-ratio: 1; border-style: dashed; border-color: rgba(139, 123, 242, 0.26); animation: spin 26s linear infinite reverse; }
.hero-stage__ring--c { width: 94%; aspect-ratio: 1; border-color: rgba(0, 156, 228, 0.10); }
@keyframes spin { to { transform: rotate(360deg); } }

.hero-stage__orb { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--aurora-sky); box-shadow: 0 0 12px 2px rgba(89, 184, 245, 0.7); }
.hero-stage__orb--1 { top: 6%; left: 50%; animation: orbA 9s var(--ease-inout) infinite alternate; }
.hero-stage__orb--2 { bottom: 12%; right: 12%; background: var(--dawn-400); box-shadow: 0 0 12px 2px rgba(255, 198, 92, 0.7); animation: orbB 11s var(--ease-inout) infinite alternate; }
.hero-stage__orb--3 { bottom: 20%; left: 8%; background: var(--aurora-plum); box-shadow: 0 0 12px 2px rgba(178, 123, 238, 0.7); animation: orbC 13s var(--ease-inout) infinite alternate; }
@keyframes orbA { to { transform: translate(24px, 16px); } }
@keyframes orbB { to { transform: translate(-20px, -22px); } }
@keyframes orbC { to { transform: translate(18px, -14px); } }

.hero-stage__obj {
  position: relative;
  z-index: 3;
  width: min(76%, 420px);
  filter: drop-shadow(0 40px 54px rgba(24, 90, 150, 0.26));
  animation: floatY 8.5s var(--ease-inout) infinite alternate;
}

/* 首屏快捷入口 —— 点击直达对应分屏 */
.quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: clamp(20px, 3vh, 32px); }
@media (max-width: 900px) { .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.quick__item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 13px 16px;
  text-align: left;
  border-radius: var(--r-md);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--sh-xs);
  cursor: pointer;
  transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.quick__item:hover { transform: translateY(-4px); border-color: rgba(0, 156, 228, 0.36); box-shadow: var(--sh-md); }
.quick__ico {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(140deg, var(--aurora-cyan), var(--blue-500));
}
.quick__item:nth-child(2) .quick__ico { background: linear-gradient(140deg, var(--aurora-sky), var(--aurora-blue)); }
.quick__item:nth-child(3) .quick__ico { background: linear-gradient(140deg, var(--aurora-violet), var(--aurora-plum)); }
.quick__item:nth-child(4) .quick__ico { background: linear-gradient(140deg, var(--dawn-400), var(--dawn-500)); }
.quick__t { font-size: 14px; font-weight: 650; color: var(--ink-800); line-height: 1.3; }
.quick__d { font-size: 11.5px; color: var(--ink-500); line-height: 1.4; }

/* 分屏内容网格 */
.tiles { display: grid; gap: clamp(12px, 1.4vw, 20px); }
.tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1080px) { .tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .tiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .tiles--2, .tiles--3, .tiles--4 { grid-template-columns: 1fr; } }

.tile {
  position: relative;
  padding: clamp(17px, 1.7vw, 24px);
  border-radius: var(--r-md);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--sh-xs);
  overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.6), transparent 46%);
  pointer-events: none;
}
.tile > * { position: relative; z-index: 1; }
a.tile:hover, .tile--hover:hover { transform: translateY(-5px); border-color: rgba(0, 156, 228, 0.32); box-shadow: var(--sh-md); }
.tile__ico {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  margin-bottom: 14px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(140deg, var(--aurora-cyan), var(--blue-500));
  box-shadow: 0 6px 16px -6px rgba(0, 156, 228, 0.5);
}
.tile:nth-child(2) .tile__ico { background: linear-gradient(140deg, var(--aurora-sky), var(--aurora-blue)); }
.tile:nth-child(3) .tile__ico { background: linear-gradient(140deg, var(--aurora-violet), var(--aurora-plum)); }
.tile:nth-child(4) .tile__ico { background: linear-gradient(140deg, var(--dawn-400), var(--dawn-500)); }
.tile__t { font-size: 15.5px; font-weight: 650; color: var(--ink-800); }
.tile__d { margin-top: 8px; font-size: 13.5px; line-height: 1.7; color: var(--ink-600); }
.tile__k { display: inline-block; margin-top: 12px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-600); }

/* 分屏左右结构 */
.pane {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(26px, 3.6vw, 58px);
  align-items: center;
  width: 100%;
}
.pane--rev { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); }
@media (max-width: 980px) {
  .pane, .pane--rev { grid-template-columns: 1fr; gap: 24px; }
  .pane__visual { display: none; }
}

/* 情绪指标带 */
.indicators { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 12px; }
.indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 15px 8px;
  border-radius: var(--r-md);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--sh-xs);
  transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease);
}
.indicator:hover { transform: translateY(-5px) scale(1.03); box-shadow: var(--sh-md); }
.indicator img { width: 40px; height: 40px; object-fit: contain; }
.indicator span { font-size: 12.5px; font-weight: 500; color: var(--ink-600); }

/* ---------- 10. 内页通用组件 ---------- */
.page-hero { position: relative; padding-top: calc(var(--nav-h) + clamp(46px, 6vw, 96px)); padding-bottom: clamp(34px, 4.4vw, 62px); }
.page-hero__inner { max-width: 820px; }
.page-hero .display { margin-top: 18px; }
.page-hero .lead { margin-top: 20px; }

.crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-500); }
.crumb a:hover { color: var(--blue-600); }
.crumb__sep { color: var(--ink-300); }

.tabs {
  display: inline-flex;
  gap: 4px;
  max-width: 100%;
  padding: 5px;
  overflow-x: auto;
  border-radius: var(--r-full);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--sh-xs);
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs__btn {
  padding: 10px 20px;
  border-radius: var(--r-full);
  font-size: 14.5px;
  font-weight: 550;
  color: var(--ink-600);
  white-space: nowrap;
  transition: all .32s var(--ease);
}
.tabs__btn:hover { color: var(--blue-600); }
.tabs__btn[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(118deg, var(--aurora-cyan), var(--blue-500) 55%, var(--aurora-blue));
  box-shadow: 0 8px 20px -8px rgba(0, 156, 228, 0.55);
}
.tabs__panel[hidden] { display: none; }

.acc { display: flex; flex-direction: column; gap: 12px; }
.acc__item {
  border-radius: var(--r-md);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--sh-xs);
  overflow: hidden;
  transition: box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.acc__item[data-open] { border-color: rgba(0, 156, 228, 0.32); box-shadow: var(--sh-md); }
.acc__head { width: 100%; display: flex; align-items: center; gap: 16px; padding: 19px 22px; text-align: left; }
.acc__title { flex: 1; font-size: 16px; font-weight: 650; color: var(--ink-800); }
.acc__meta { font-size: 13px; color: var(--ink-500); }
.acc__ico {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--blue-600);
  background: rgba(0, 156, 228, 0.09);
  transition: transform .38s var(--ease), background .38s var(--ease), color .38s var(--ease);
}
.acc__item[data-open] .acc__ico { transform: rotate(135deg); color: #fff; background: linear-gradient(140deg, var(--aurora-cyan), var(--blue-500)); }
.acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s var(--ease-out); }
.acc__item[data-open] .acc__body { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc__content { padding: 0 22px 24px; }

.timeline { position: relative; padding-left: 30px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 5px; top: 8px; bottom: 8px;
  width: 1.5px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--aurora-cyan), var(--blue-400), var(--aurora-violet), transparent);
}
.timeline__item { position: relative; padding-bottom: 30px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: -30px; top: 7px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--blue-500);
  box-shadow: 0 0 0 4px rgba(0, 156, 228, 0.12);
}
.timeline__year { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--blue-600); }
.timeline__t { margin-top: 6px; font-size: 16.5px; font-weight: 650; color: var(--ink-800); }
.timeline__d { margin-top: 7px; font-size: 14.5px; line-height: 1.78; color: var(--ink-600); }

.stat { text-align: center; }
.stat__v {
  font-size: clamp(28px, 3.1vw, 44px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(100deg, var(--blue-500), var(--aurora-violet));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.stat__k { margin-top: 10px; font-size: 13.5px; color: var(--ink-500); }

.steps { display: grid; gap: 16px; }
.step { display: flex; gap: 18px; align-items: flex-start; }
.step__n {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(140deg, var(--aurora-cyan), var(--blue-500));
  box-shadow: 0 6px 16px -6px rgba(0, 156, 228, 0.5);
}
.step:nth-child(even) .step__n { background: linear-gradient(140deg, var(--aurora-violet), var(--aurora-plum)); }
.step__t { font-size: 16px; font-weight: 650; color: var(--ink-800); }
.step__d { margin-top: 6px; font-size: 14.5px; line-height: 1.76; color: var(--ink-600); }

.checks { display: grid; gap: 11px; }
.check { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.72; color: var(--ink-600); }
.check svg { flex: 0 0 auto; margin-top: 4px; color: var(--blue-500); }

.figure {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--glacier);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--sh-md);
}
.figure img { width: 100%; }
.figure--soft { box-shadow: var(--sh-sm); }

.table-wrap {
  overflow: hidden;
  overflow-x: auto;
  border-radius: var(--r-lg);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-sm);
}
.table { min-width: 620px; font-size: 14.5px; }
.table th, .table td { padding: 15px 20px; text-align: left; vertical-align: top; }
.table thead th {
  background: linear-gradient(180deg, #F7FBFF, #EFF7FE);
  font-size: 13px;
  font-weight: 650;
  color: var(--ink-700);
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-bottom: 1px solid var(--line-2);
}
.table tbody tr + tr { border-top: 1px solid var(--line); }
.table tbody tr:hover { background: rgba(0, 156, 228, 0.035); }
.table td:first-child { font-weight: 600; color: var(--ink-800); }

.quote {
  position: relative;
  padding: 26px 28px 26px 34px;
  border-radius: var(--r-lg);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--sh-xs);
}
.quote::before {
  content: "";
  position: absolute;
  left: 0; top: 24px; bottom: 24px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--aurora-cyan), var(--blue-500), var(--aurora-violet));
}
.quote p { font-size: 15.5px; line-height: 1.82; color: var(--ink-700); }
.quote__by { margin-top: 14px; font-size: 13.5px; color: var(--ink-500); }

.cta-band {
  position: relative;
  overflow: hidden;
  padding: clamp(36px, 5vw, 72px);
  border-radius: var(--r-2xl);
  border: 1px solid var(--glass-line);
  box-shadow: var(--sh-lg);
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(79, 211, 232, 0.34), transparent 52%),
    radial-gradient(110% 120% at 92% 100%, rgba(178, 123, 238, 0.30), transparent 54%),
    linear-gradient(140deg, #F4FBFF, #E9F4FE 55%, #F2F0FE);
}
.cta-band__inner { position: relative; z-index: 1; max-width: 640px; }

/* 表单 */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field__label { font-size: 14px; font-weight: 600; color: var(--ink-700); }
.field__label .req { color: var(--dawn-500); }
.field__hint { font-size: 12.5px; color: var(--ink-500); }
.input, .textarea, .select {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.86);
  font-size: 15px;
  color: var(--ink-800);
  transition: border-color .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-400); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--blue-500);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0, 156, 228, 0.12);
}
.textarea { min-height: 130px; resize: vertical; }
.select {
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E86A0' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }

.checkbox { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.65; color: var(--ink-600); }
.checkbox input { flex: 0 0 auto; margin-top: 4px; width: 16px; height: 16px; accent-color: var(--blue-500); }

.form__msg { display: none; padding: 13px 16px; border-radius: var(--r-sm); font-size: 14px; }
.form__msg[data-show] { display: block; }
.form__msg--ok { background: rgba(0, 156, 228, 0.08); color: var(--blue-700); border: 1px solid rgba(0, 156, 228, 0.22); }
.form__msg--err { background: rgba(222, 138, 10, 0.09); color: var(--dawn-600); border: 1px solid rgba(222, 138, 10, 0.24); }

.contact-card {
  display: flex;
  gap: 15px;
  padding: 20px;
  border-radius: var(--r-md);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--sh-xs);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease);
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.contact-card__ico {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(140deg, var(--aurora-cyan), var(--blue-500));
}
.contact-card__k { font-size: 12.5px; color: var(--ink-500); letter-spacing: 0.02em; }
.contact-card__v { margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--ink-800); word-break: break-all; }
.contact-card__v a:hover { color: var(--blue-600); }

/* ---------- 11. 页脚 ---------- */
.footer {
  position: relative;
  z-index: 1;
  padding-top: clamp(46px, 5vw, 78px);
  padding-bottom: 30px;
  color: var(--ink-600);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #EFF7FE 42%, #E8F3FC);
  border-top: 1px solid var(--glass-border);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3.4vw, 56px);
}
@media (max-width: 940px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__about p { margin-top: 16px; max-width: 42ch; font-size: 13.8px; line-height: 1.82; color: var(--ink-600); }
.footer__slogan { margin-top: 18px; }
.footer__slogan b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-800); }
.footer__slogan span { font-size: 13px; color: var(--ink-500); }
.footer__logo { width: 36px; height: 36px; object-fit: contain; }

.footer__col h4 { margin-bottom: 15px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-800); }
.footer__col ul { display: grid; gap: 10px; }
.footer__col a { font-size: 13.5px; color: var(--ink-600); transition: color .25s var(--ease); }
.footer__col a:hover { color: var(--blue-600); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  margin-top: clamp(32px, 4vw, 54px);
  padding-top: 22px;
  border-top: 1px solid var(--line-2);
  font-size: 12.5px;
  color: var(--ink-500);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.footer__legal a { color: var(--ink-500); }
.footer__legal a:hover { color: var(--blue-600); }

/* ---------- 12. 动效 ----------
   ★ 核心原则（渐进增强，不可颠倒）：默认必须是「可见」。
     所有隐藏都只在 html.js-anim（由 JS 在确认能力可用后立刻打上）下生效。
     这样无论 JS 报错、被阻断、观察器失效、还是浏览器跑的是旧缓存脚本，
     最差结果只是「没有进场动画」，永远不会出现内容不可见。 */
/* ★ 绝不要给 .reveal 加 will-change。
   它的动画只跑一次、0.7 秒即结束，而 will-change: transform 会**永久**保留合成层
   （规范明确：will-change 的代价是长期占用内存与合成资源，不能当性能开关随手加）。
   一旦某个 .reveal 内部还套着 position:absolute 的子元素，
   浏览器就得为这个常在的合成层维护一张放大的「背景图层」，
   在层的边缘渲染出白色/浅色细边 —— 情绪体验页左卡片左上角、左下角那两处白边即源于此。
   一次性动画让它自然结束即可，不需要预留。 */
.reveal { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--d, 0s); }
[data-stagger] > * { transition: opacity .62s var(--ease-out), transform .62s var(--ease-out); }

/* 仅在 JS 就绪且能力可用时，才把待进场元素藏起来交给观察器点亮 */
html.js-anim .reveal { opacity: 0; transform: translateY(22px); }
html.js-anim [data-stagger] > * { opacity: 0; transform: translateY(20px); }

/* 已被观察器标记进场 */
html.js-anim .reveal.is-in { opacity: 1; transform: none; }
html.js-anim [data-stagger].is-in > * { opacity: 1; transform: none; }

/* 双重保险：以下任一情况下强制立即显示，且不保留过渡（避免"闪一下"）
   · html.no-js            —— 脚本未运行 / 运行出错
   · html.reveal-fallback  —— 观察器超时未回调
   · prefers-reduced-motion —— 用户要求减少动效 */
html.no-js .reveal,
html.no-js [data-stagger] > *,
html.reveal-fallback .reveal,
html.reveal-fallback [data-stagger] > * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
[data-stagger].is-in > *:nth-child(1) { transition-delay: .04s; }
[data-stagger].is-in > *:nth-child(2) { transition-delay: .10s; }
[data-stagger].is-in > *:nth-child(3) { transition-delay: .16s; }
[data-stagger].is-in > *:nth-child(4) { transition-delay: .22s; }
[data-stagger].is-in > *:nth-child(5) { transition-delay: .28s; }
[data-stagger].is-in > *:nth-child(6) { transition-delay: .34s; }
[data-stagger].is-in > *:nth-child(7) { transition-delay: .40s; }
[data-stagger].is-in > *:nth-child(8) { transition-delay: .46s; }

/* 减少动效偏好：一律直接可见、无过渡 */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  font-weight: 600;
  color: var(--blue-600);
  background: #fff;
  border-radius: 0 0 var(--r-sm) 0;
  box-shadow: var(--sh-md);
}
.skip-link:focus { left: 0; }

/* =========================================================================
   12. 内页兼容层
   ------------------------------------------------------------------------
   背景：内页 HTML 使用了一套早期词表（subhero / sec-head / cta-panel /
   tag / flow / check-list / spec / tab / cam-* / acc__btn…），而设计系统 v2
   只实现了首页词表（section / head / pane / tile / acc__head…）。
   结果：9 个内页几乎全部失去样式，表现为「整页纯白、内容贴边、布局错乱」。

   以下为这些历史类补齐样式，取值全部对齐 v2 设计系统（玻璃、圆角、阴影、
   天蓝/极光/暖金色阶），保证内页与首页视觉一致。
   ========================================================================= */

/* ---------- 12.1 内页首屏 ---------- */
.subhero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(46px, 6.4vw, 104px));
  padding-bottom: clamp(38px, 5vw, 78px);
}
.subhero__inner { max-width: 860px; }

.sec-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 780px;
  margin-bottom: clamp(26px, 3.4vw, 46px);
}
.sec-head--center {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

/* ---------- 12.2 渐变文字 ---------- */
.gradient-text {
  background: linear-gradient(100deg, var(--aurora-cyan), var(--blue-500) 40%, var(--aurora-violet) 72%, var(--dawn-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- 12.3 标签 ---------- */
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: var(--r-full);
  font-size: 12.5px;
  font-weight: 560;
  line-height: 1.6;
  color: var(--ink-600);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line);
}
.tag--brand {
  color: var(--blue-700);
  background: rgba(0, 156, 228, 0.10);
  border-color: rgba(0, 156, 228, 0.24);
}
.tag--gold {
  color: var(--dawn-600);
  background: rgba(245, 166, 35, 0.12);
  border-color: rgba(245, 166, 35, 0.28);
}

/* ---------- 12.4 勾选清单 ---------- */
.check-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.check-list li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-600);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(0, 156, 228, 0.13);
}
.check-list li::after {
  content: "";
  position: absolute;
  left: 4.4px;
  top: 12.4px;
  width: 5px;
  height: 2.4px;
  border-left: 1.9px solid var(--blue-600);
  border-bottom: 1.9px solid var(--blue-600);
  transform: rotate(-45deg);
}

/* ---------- 12.5 流程步骤 ---------- */
.flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(12px, 1.5vw, 20px);
  margin-top: 18px;
}
.flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: clamp(16px, 1.7vw, 22px);
  border-radius: var(--r-md);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--sh-xs);
}
.flow__n {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--blue-600);
}
.flow__step b { font-size: 15px; font-weight: 650; color: var(--ink-800); }
.flow__step span { font-size: 13.5px; line-height: 1.7; color: var(--ink-500); }

/* ---------- 12.6 CTA 面板 ---------- */
.cta-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(32px, 4.4vw, 62px);
  border-radius: var(--r-2xl);
  border: 1px solid var(--glass-line);
  box-shadow: var(--sh-lg);
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(79, 211, 232, 0.32), transparent 52%),
    radial-gradient(110% 120% at 92% 100%, rgba(178, 123, 238, 0.28), transparent 54%),
    linear-gradient(140deg, #FFFFFF, #F2F9FF 58%, #EAF4FC);
  text-align: center;
}
.cta-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
}

/* ---------- 12.7 卡片补充 ---------- */
.card--mist {
  background: linear-gradient(180deg, #FFFFFF, var(--mist-2));
  border-color: rgba(120, 180, 230, 0.22);
}
.card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: var(--r-full);
  font-size: 11.5px;
  font-weight: 620;
  letter-spacing: 0.04em;
  color: var(--blue-700);
  background: rgba(0, 156, 228, 0.11);
  border: 1px solid rgba(0, 156, 228, 0.22);
}
.card__badge--gold {
  color: var(--dawn-600);
  background: rgba(245, 166, 35, 0.13);
  border-color: rgba(245, 166, 35, 0.28);
}
.card__icon--gold {
  color: var(--dawn-600);
  background: rgba(245, 166, 35, 0.13);
}

/* ---------- 12.8 指标 ---------- */
.metrics {
  display: grid;
  /* 默认锁死 2×2 —— 由下面的 @container 统一接管。
     auto-fit 会随容器宽度排出「3+1」或单行 4 个，正是用户指出的问题。 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 22px);
}
/* ★ 4 个指标一律 2×2，不要 auto-fit 排出「3+1」或一行 4 个。
   这里必须用 **容器查询** 而不是媒体查询 —— 踩过一次的坑：
   媒体查询判断的是**视口宽**，但真正的约束是**容器宽**。
   1440px 视口下 .shell 内容宽只有 1200px，4 列各 284px 单行塞得下，
   而 about 页里 .metrics 只分到父级 2 列网格的右列（500px），auto-fit 就排出「3+1」。
   两种容器宽度都得各自成 2×2，只有容器查询能同时表达。
   （Chromium 105+ / Safari 16+ / Firefox 110+ 均支持，已全站可用；
   更旧的浏览器会忽略这段规则、退回 auto-fit 的单行 4 列，属可接受的降级。） */
@container (max-width: 1000px) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@container (max-width: 420px) {
  .metrics { grid-template-columns: minmax(0, 1fr) !important; }
}
.metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: clamp(16px, 1.7vw, 22px);
  border-radius: var(--r-md);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--sh-xs);
}
.metric__v {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-size: clamp(25px, 2.7vw, 35px);
  font-weight: 720;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--ink-900);
}
.metric__v span:not(.num) { font-size: 0.56em; font-weight: 620; color: var(--blue-600); }
.metric__k { font-size: 13px; line-height: 1.6; color: var(--ink-500); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(12px, 1.5vw, 20px); }
.kpi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: clamp(16px, 1.7vw, 22px);
  border-radius: var(--r-md);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--sh-xs);
}
.kpi b { font-size: clamp(22px, 2.4vw, 30px); font-weight: 720; letter-spacing: -0.02em; color: var(--ink-900); }
.kpi span { font-size: 13px; color: var(--ink-500); }

/* ---------- 12.9 内容块（手风琴内部） ---------- */
.block { display: flex; flex-direction: column; gap: 9px; }
.block + .block { margin-top: 22px; }
.block-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--blue-600);
}

/* ---------- 12.10 手风琴（历史词表 acc__btn/label/chev/pad） ---------- */
/* cases.html 结构：[data-acc] 本身即一块（btn + body），需要卡片外观与间距 */
.acc[data-acc] {
  border-radius: var(--r-md);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--sh-xs);
  overflow: hidden;
  transition: box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.acc[data-acc] + .acc[data-acc] { margin-top: 12px; }
.acc[data-acc][data-open] { border-color: rgba(0, 156, 228, 0.32); box-shadow: var(--sh-md); }

.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px 22px;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 0;
  color: inherit;
}
.acc__btn .acc__ico { flex: 0 0 auto; }
.acc__label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.acc__label b { font-size: 15.5px; font-weight: 650; color: var(--ink-800); }
.acc__label span { font-size: 13px; line-height: 1.6; color: var(--ink-500); }
.acc__chev {
  flex: 0 0 auto;
  color: var(--ink-500);
  transition: transform .38s var(--ease), color .38s var(--ease);
}
.acc__btn[aria-expanded="true"] .acc__chev { transform: rotate(180deg); color: var(--blue-600); }
.acc__pad { padding: 0 22px 24px; }

/* 手风琴折叠：默认收起（历史 HTML 无 grid-template-rows 结构，用 max-height 兜底） */
.acc > .acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s var(--ease-out); }
.acc[data-open] > .acc__body { grid-template-rows: 1fr; }
.acc__body > .acc__inner { overflow: hidden; }

/* ---------- 12.11 标签页（历史词表 tab / tab-panel） ---------- */
.tab {
  padding: 8px 17px;
  border-radius: var(--r-full);
  font-size: 13.5px;
  font-weight: 580;
  color: var(--ink-600);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color .3s var(--ease), background .3s var(--ease);
}
.tab[aria-selected="true"] { color: #fff; background: linear-gradient(135deg, var(--blue-600), var(--blue-500) 60%, #35B2EF); }
.tab-panel[hidden], .tab-panel:not(.is-active) { display: none; }

/* ---------- 12.12 规格行（contact / product） ---------- */
.spec { display: grid; gap: 0; }
.spec-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}
.spec-row:last-child { border-bottom: 0; }
.spec-row > :first-child { color: var(--ink-500); }
.spec-row > :last-child { color: var(--ink-800); font-weight: 560; }

/* ---------- 12.13 参数格（technology） ---------- */
.params { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.param {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 15px 17px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
}
.param b { font-size: 17px; font-weight: 700; color: var(--ink-900); }
.param span { font-size: 12.5px; color: var(--ink-500); }

/* ---------- 12.14 信号条可视化（technology） ---------- */
.signal-visual { position: relative; display: grid; place-items: center; min-height: 180px; }
.signal-bars { display: flex; align-items: flex-end; gap: clamp(5px, 0.9vw, 11px); height: 140px; }
.signal-bar {
  width: clamp(9px, 1.3vw, 17px);
  border-radius: var(--r-full);
  background: linear-gradient(180deg, var(--aurora-cyan), var(--blue-500) 55%, var(--aurora-violet));
  animation: signalPulse 2.6s var(--ease-inout) infinite alternate;
}
.signal-bar:nth-child(2n) { animation-delay: .3s; }
.signal-bar:nth-child(3n) { animation-delay: .6s; }
.signal-bar:nth-child(5n) { animation-delay: .9s; }
@keyframes signalPulse { from { transform: scaleY(0.62); opacity: .78; } to { transform: scaleY(1); opacity: 1; } }
.signal-label { margin-top: 14px; font-size: 12.5px; color: var(--ink-600); }

/* ---------- 12.15 时间线（about） ---------- */
.tl-item {
  position: relative;
  padding: 14px 0 22px 30px;
  border-left: 2px solid rgba(0, 156, 228, 0.20);
}
.tl-item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 22px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--aurora-cyan), var(--blue-500));
  box-shadow: 0 0 0 4px rgba(79, 211, 232, 0.18);
}
.tl-item__y {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--blue-600);
}
.tl-item b { display: block; font-size: 15.5px; font-weight: 650; color: var(--ink-800); margin-bottom: 4px; }
.tl-item p { font-size: 14px; line-height: 1.75; color: var(--ink-600); }

/* ---------- 12.16 联系方式（contact） ---------- */
.contact-info { display: grid; gap: 14px; }
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 15px 17px;
  border-radius: var(--r-md);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--sh-xs);
}
.contact-item__ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  color: var(--blue-600);
  background: rgba(0, 156, 228, 0.10);
}
.contact-item b { display: block; font-size: 14.5px; font-weight: 620; color: var(--ink-800); }
.contact-item a, .contact-item span { font-size: 14px; color: var(--ink-600); }
.frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--glass-line);
  box-shadow: var(--sh-sm);
  background: var(--glass-strong);
}
/* 位置地图（2026-09-15 六次修订：高德截图裁切 + 外链跳转）
   不用 iframe 嵌在线地图 —— 跨域 iframe 一旦被拦，页面 JS 无法区分
   「加载成功」与「被拦」（两种情况 contentDocument 都是 null、读 href 都抛错、
   load 都会触发），写不出可靠的降级，只会剩一个空白框。
   现在用业主在高德直接搜到的结果页截图（_tools/crop_user_shot.py 裁切），
   配合下方「在高德地图中打开」。 */
.map-embed-wrap {
  position: relative;
  background: #EAF4FC;   /* 图片加载前的占位底色，避免白闪 */
}
.map-embed__img {
  display: block;
  width: 100%;
  height: clamp(300px, 34vw, 420px);
  object-fit: cover;
}
.map-embed__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-top: 1px solid var(--glass-line);
  font-size: 13px;
  color: var(--ink-600);
}
/* 地图版权署名：截图裁切后原图底部版权条可能不完整，这里用文字补齐（合规） */
.map-embed__credit {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 11.5px;
  color: var(--ink-400);
}

.consent { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--ink-500); }

/* 表单提示（历史词表 form-msg） */
.form-msg {
  display: none;
  margin-top: 14px;
  padding: 11px 15px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  line-height: 1.65;
}
.form-msg[data-show] { display: block; }
.form-msg--ok { color: #0d6b45; background: rgba(28, 176, 118, 0.12); border: 1px solid rgba(28, 176, 118, 0.26); }
.form-msg--err { color: #a8560a; background: rgba(245, 166, 35, 0.13); border: 1px solid rgba(245, 166, 35, 0.30); }

/* ---------- 12.17 情绪体验页（recognition 专用词表） ---------- */
.recog-page { position: relative; z-index: 1; }
.cam-wrap {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--glass-line);
  box-shadow: var(--sh-md);
  background: linear-gradient(160deg, #FFFFFF, #EFF7FE);
}
.cam-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(90% 90% at 50% 42%, rgba(79, 211, 232, 0.16), transparent 66%);
}
.cam-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  color: var(--ink-500);
  font-size: 14px;
}
.cam-guide {
  position: absolute;
  inset: 14% 26%;
  border: 2px dashed rgba(0, 156, 228, 0.34);
  border-radius: 46% 46% 42% 42%;
  pointer-events: none;
}
.cam-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--aurora-cyan), transparent);
  animation: camScan 3.2s var(--ease-inout) infinite;
  pointer-events: none;
}
@keyframes camScan { 0% { top: 16%; opacity: 0; } 22% { opacity: 1; } 78% { opacity: 1; } 100% { top: 84%; opacity: 0; } }
.cam-hint { padding: 13px 17px; font-size: 13px; line-height: 1.7; color: var(--ink-500); border-top: 1px solid var(--line); }

.rec-side { display: flex; flex-direction: column; gap: 18px; }
.notice {
  padding: 14px 17px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--dawn-600);
  background: rgba(245, 166, 35, 0.10);
  border: 1px solid rgba(245, 166, 35, 0.26);
}
.result-card {
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: var(--r-lg);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--sh-md);
}
.bar-row { display: grid; grid-template-columns: minmax(74px, 0.28fr) minmax(0, 1fr) 52px; gap: 13px; align-items: center; margin-bottom: 11px; }
.bar-row > :first-child { font-size: 13.5px; color: var(--ink-600); }
.bar-track { height: 8px; border-radius: var(--r-full); background: rgba(0, 130, 200, 0.11); overflow: hidden; }
.bar-fill {
  height: 100%;
  width: 0;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--aurora-cyan), var(--blue-500) 58%, var(--aurora-violet));
  transition: width .9s var(--ease-out);
}
.bar-val { font-family: var(--font-mono); font-size: 12.5px; font-weight: 620; color: var(--ink-700); text-align: right; }

/* ---------- 12.18 截图/媒体位 ---------- */
.shot {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--glass-line);
  box-shadow: var(--sh-md);
  background: var(--glass-strong);
}
.shot img { display: block; width: 100%; height: auto; }

/* ---------- 12.19 product 详情页专用 ---------- */
.hero { position: relative; padding-top: calc(var(--nav-h) + clamp(40px, 5.6vw, 92px)); padding-bottom: clamp(34px, 4.6vw, 70px); }
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 15px;
  border-radius: var(--r-full);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blue-700);
  background: rgba(0, 156, 228, 0.10);
  border: 1px solid rgba(0, 156, 228, 0.22);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.pd-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(26px, 3.6vw, 56px);
  align-items: center;
}
.pd-media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--glass-line);
  box-shadow: var(--sh-float);
  background: linear-gradient(160deg, #FFFFFF, #EFF7FE);
}
.pd-media img { display: block; width: 100%; height: auto; }

/* ---------- 12.20 按钮补充变体 ---------- */
.btn--outline {
  color: var(--blue-700);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 156, 228, 0.34);
}
.btn--outline:hover { background: rgba(0, 156, 228, 0.08); border-color: rgba(0, 156, 228, 0.54); }

.btn--ghost-dark {
  color: var(--ink-700);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--line-2);
}
.btn--ghost-dark:hover { background: #fff; color: var(--blue-700); border-color: rgba(0, 156, 228, 0.40); }

.btn--gold {
  color: #4A3208;
  background: linear-gradient(135deg, var(--dawn-300), var(--dawn-400) 58%, var(--dawn-500));
  border: 1px solid rgba(245, 166, 35, 0.42);
  box-shadow: 0 14px 34px -12px rgba(245, 166, 35, 0.46);
}
.btn--gold:hover { filter: brightness(1.04); }

/* ---------- 12.21 杂项 ---------- */
.xsmall { font-size: 12.5px; line-height: 1.7; color: var(--ink-500); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-500); flex: 0 0 auto; }
.engine-card {
  position: relative;
  padding: clamp(24px, 2.8vw, 40px);
  border-radius: var(--r-xl);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--sh-md);
  overflow: hidden;
}
.notfound { display: grid; place-items: center; min-height: 56vh; text-align: center; }

/* ---------- 12.22 移动端导航条（历史类，桌面隐藏） ---------- */
.mobile-nav { display: none; }

/* ---------- 12.23 内页响应式 ---------- */
@media (max-width: 1024px) {
  .pane, .pd-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .tl-item { padding: 12px 0 18px 24px; }
  .subhero, .hero { padding-top: calc(var(--nav-h) + clamp(32px, 6vw, 60px)); }
}
@media (max-width: 720px) {
  .spec-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .bar-row { grid-template-columns: 62px minmax(0, 1fr) 44px; gap: 9px; }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .kpis, .params { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
  /* 注意：.metrics 不在这里——它的 2×2 规则定义在 12.8 节，
     同特异性且此处更靠后，会把 2 列覆盖成 auto-fit，重新排出「3+1」。 */
  .signal-bars { height: 108px; }
  .cta-panel, .engine-card { border-radius: var(--r-lg); }
}

/* 打印 */
@media print {
  .nav, .drawer, .mobile-nav, .deck-nav, .aurora-bg { display: none !important; }
  html, body { overflow: visible; height: auto; }
}