/* ==========================================================================
   Zeus Insights · 主站 v3 样稿 · 合并定版 H3_merged · base.css
   公共底层：变量、区块配色机制、排版、页眉、按钮、入场次序、减少动态效果。
   底本是 H2_free；2026-10-04 合并定版改了页眉（字标放大、导航拉开并加重）与首屏标题的字号。只供桌面版使用。
   字体声明在 assets/fonts/fonts.css（Geist、Source Serif 4、Geist Mono，全部自托管）。
   尺寸一律用 rem：根字号随视口宽度连续变化，整页（字、间距、窗口）跟着一起放大缩小。
   ========================================================================== */

/* 根字号：1024 宽及以下 16px，1440 宽 17px，1920 宽 19px，约 2040 宽起封顶 19.5px。
   两段直线取较大者（1440 以下走缓的一段，以上走陡的一段）。用百分比起算，尊重浏览器的字号设置。 */
html { font-size: clamp(100%, max(calc(100% + (100vw - 1024px) * .002404), calc(106.25% + (100vw - 1440px) * .004167)), 121.875%); }

/* ---------- 1. 原始变量 ---------- */
:root {
  /* 色：品牌三色（石墨、品牌红、白）加一档暖纸色与一档暖黑 */
  --c-paper: #F5F2EB;
  --c-paper-2: #ECE8DF;
  --c-white: #FFFFFF;
  --c-ink: #191817;
  --c-ink-2: #24221F;
  --c-graphite: #3F3F3F;
  --c-red: #E60000;        /* 品牌红：只用于图形、圆点与标识，不承载正文 */
  --c-red-text: #C0362C;   /* 浅底上的红色文字，白底 5.5:1 */
  --c-red-dark: #FF5640;   /* 深底上的红色文字与图形 */

  /* 字 */
  --f-sans: "Geist", "Segoe UI", system-ui, sans-serif;
  --f-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --f-mono: "Geist Mono", ui-monospace, Consolas, monospace;

  /* 字号阶梯（rem；括号内是 1024 宽与 1440 宽时的像素值）。页面上没有比 --t-micro 更小的字。 */
  --t-display: clamp(2.75rem, 1.2rem + 2.45vw, 3.6rem);    /* 首屏标题（第四轮，两行式）：1024 宽 44.3，1280 宽 51.3，1440 宽 55.7，1920 宽 68.4（Twenty 各宽度都是 60） */
  --t-h2: clamp(2.1rem, 3.3vw, 2.9rem);             /* 二级标题：33.8 / 47.5，1760 起 55 */
  --t-h3: 1.5rem;                                   /* 24 / 25.5 */
  --t-lead: 1.25rem;                                /* 20 / 21.25 */
  --t-body: 1.0625rem;                              /* 正文：17 / 18 */
  --t-ui: 1rem;                                     /* 导航、界面正文：16 / 17 */
  --t-small: .9375rem;                              /* 次要说明、按钮：15 / 15.9 */
  --t-label: .875rem;                               /* 标签：14 / 14.9 */
  --t-micro: .8125rem;                              /* 最小的标签与等宽小字：13 / 13.8 */

  /* 间距基数 .25rem */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem;
  --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem; --s-30: 7.5rem;

  --wrap: 87.5rem;
  --gutter: 2.5rem;
  --hdr-h: 4.5rem;                                  /* 页眉高：72 / 76.5 / 85.5（Twenty 各宽度都是 64） */

  /* 圆角：界面件小圆角，按钮与标记用整圆（环形语言的一部分） */
  --r-1: .25rem; --r-2: .5rem; --r-3: .75rem; --r-pill: 62.4375rem;

  /* 动效：四档时长，三条曲线；组件不得手写其他曲线 */
  --d-1: 160ms; --d-2: 260ms; --d-3: 480ms; --d-4: 760ms;
  --e-out: cubic-bezier(.16, .84, .28, 1);
  --e-inout: cubic-bezier(.62, 0, .2, 1);
  --e-spring: cubic-bezier(.3, 1.45, .5, 1);
}

/* ---------- 2. 区块配色机制 ----------
   三套：paper（暖纸）、light（白）、dark（暖黑）。区块写 data-scheme，
   内部组件只读下面这组语义变量；深色区块里要嵌浅色卡片，在卡片上再写一次 data-scheme。
   --ring 与 --ring-accent 是给画布读的三元组（r,g,b），由 engine.js 取用。 */
[data-scheme="paper"] {
  --surface: var(--c-paper); --surface-2: var(--c-paper-2);
  --ink: var(--c-ink); --ink-muted: #56534E; --ink-subtle: #6A6762;
  --line: rgba(25, 24, 23, .13); --line-strong: rgba(25, 24, 23, .26);
  --accent: var(--c-red); --accent-text: var(--c-red-text);
  --ring: 25, 24, 23; --ring-accent: 230, 0, 0;
}
[data-scheme="light"] {
  --surface: var(--c-white); --surface-2: #F7F5F1;
  --ink: var(--c-ink); --ink-muted: #56534E; --ink-subtle: #6A6762;
  --line: rgba(25, 24, 23, .11); --line-strong: rgba(25, 24, 23, .24);
  --accent: var(--c-red); --accent-text: var(--c-red-text);
  --ring: 25, 24, 23; --ring-accent: 230, 0, 0;
}
[data-scheme="dark"] {
  --surface: var(--c-ink); --surface-2: var(--c-ink-2);
  --ink: #F4F2EE; --ink-muted: #BDB9B2; --ink-subtle: #A19D96;
  --line: rgba(255, 255, 255, .13); --line-strong: rgba(255, 255, 255, .28);
  --accent: var(--c-red-dark); --accent-text: var(--c-red-dark);
  --ring: 255, 255, 255; --ring-accent: 255, 86, 64;
}
[data-scheme] { background: var(--surface); color: var(--ink); }

/* ---------- 3. 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--hdr-h); }
body { margin: 0; font-family: var(--f-sans); font-size: var(--t-body); line-height: 1.6;
  color: var(--c-ink); background: var(--c-paper);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent-text, var(--c-red-text)); outline-offset: .1875rem; border-radius: .1875rem; }

.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -3.75rem; z-index: 100; padding: .625rem 1rem; background: var(--c-ink); color: #fff; border-radius: var(--r-1); text-decoration: none; }
.skip:focus { top: .75rem; }

/* ---------- 4. 区块外壳 ----------
   .sec 管底色与上下节奏；.wrap 管横向留白。区块自己不写横向内边距。
   data-rhythm: hero / standard（默认）/ spacious / flush（滚动场景自管高度） */
.sec { position: relative; padding-block: var(--s-24); }
.sec[data-rhythm="hero"] { padding-block: var(--s-12) var(--s-20); }
.sec[data-rhythm="tight"] { padding-block: var(--s-12); }
.sec[data-rhythm="spacious"] { padding-block: var(--s-30); }
.sec[data-rhythm="flush"] { padding-block: 0; }
/* 相邻同色区块：后一个收紧上边距，避免双倍空白 */
.sec[data-scheme="paper"] + .sec[data-scheme="paper"],
.sec[data-scheme="light"] + .sec[data-scheme="light"],
.sec[data-scheme="dark"] + .sec[data-scheme="dark"] { padding-top: var(--s-6); }
.wrap { position: relative; width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* 装饰画布层：绝对定位铺满区块，不接收指针事件 */
.sec__bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- 5. 排版 ----------
   合并定版第二轮：整页换成第一版的字体写法。标题都用细体，一句话里靠换字体来强调，不用重体、不变色：
   前半句 .v-serif（Source Serif 4，字重 300），后半句 .v-sans（Geist，字重 350）。
   正文 Geist 400；小标签 Geist Mono 400；卡片与条目的小标题 Geist 500。字号阶梯未动。 */
.h-display, .h-2 { font-family: var(--f-serif); font-weight: 300; letter-spacing: -0.02em; text-wrap: balance; }
.h-display { font-size: var(--t-display); line-height: 1.06; }
.h-2 { font-size: var(--t-h2); line-height: 1.1; }
.h-3 { font-size: var(--t-h3); line-height: 1.25; font-weight: 500; letter-spacing: -0.02em; }
.v-serif { font-family: var(--f-serif); font-weight: 300; letter-spacing: -0.02em; }
.v-sans { font-family: var(--f-sans); font-weight: 350; letter-spacing: -0.04em; }

.eyebrow { display: inline-flex; align-items: center; gap: .625rem; font-family: var(--f-mono); font-size: var(--t-ui); line-height: 1.375rem; font-weight: 400; color: var(--ink-muted); letter-spacing: 0; }
.eyebrow::before { content: ""; width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--accent); flex: none; }
.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--ink-muted); text-wrap: pretty; }
.body { font-size: var(--t-body); line-height: 1.6; color: var(--ink-muted); text-wrap: pretty; }
.small { font-size: var(--t-small); line-height: 1.5; color: var(--ink-muted); }
.micro { font-size: var(--t-micro); line-height: 1.45; color: var(--ink-subtle); }
.mono { font-family: var(--f-mono); font-feature-settings: "tnum" 1; letter-spacing: 0; }

/* ---------- 6. 按钮 ----------
   整圆外形。主按钮带一枚红点（字标里 i 的那一点），悬停时红点放出一圈环。 */
.btn { --btn-h: 3rem; display: inline-flex; align-items: center; gap: .625rem; height: var(--btn-h); padding: 0 1.5rem; border-radius: var(--r-pill);
  font-size: var(--t-ui); font-weight: 500; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--d-2) var(--e-out), color var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out), transform var(--d-1) var(--e-out); }
.btn:active { transform: scale(.98); }
.btn--sm { --btn-h: 2.75rem; padding: 0 1.375rem; font-size: var(--t-ui); font-weight: 600; }
.btn--primary { background: var(--ink); color: var(--surface); padding-left: 1.125rem; }
.btn--primary:hover { background: color-mix(in srgb, var(--ink) 86%, var(--surface)); }
.btn--ghost { border: 1px solid var(--line-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }
.btn__dot { position: relative; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c-red); flex: none; }
[data-scheme="dark"] .btn__dot { background: var(--c-red); }
.btn__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--c-red); opacity: 0; }
.btn:hover .btn__dot::after, .btn:focus-visible .btn__dot::after { animation: zi-ring 1.1s var(--e-out) infinite; }
@keyframes zi-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.4); opacity: 0; } }

.link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; transition: border-color var(--d-2) var(--e-out); }
.link:hover { border-color: var(--ink); }

/* ---------- 7. 页眉 ----------
   粘在顶部。配色由 engine.js 按页眉底边所在的区块写入 data-scheme。
   底边一条发丝线；离开页顶后加一层很浅的投影，与页面分界。
   合并定版：字标放大（只定高度，原件不变形）；导航四项拉开，字重 600、字号 17 上下；
   右侧「中文」与 Contact 同样的字重与字号。悬停时项下出一道发丝线，不再用胶囊底。 */
.hdr { position: sticky; top: 0; z-index: 60; height: var(--hdr-h); border-bottom: 1px solid var(--line);
  transition: background-color var(--d-2) var(--e-out), color var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out); }
.hdr.is-scrolled { box-shadow: 0 1px 0 rgba(0, 0, 0, .02), 0 .625rem 1.875rem -1.125rem rgba(25, 24, 23, .35); }
.hdr__in { display: flex; align-items: center; height: 100%; gap: var(--s-12); }
.hdr__logo { display: block; flex: none; line-height: 0; }
.hdr__logo img { height: 2.25rem; width: auto; }   /* 字标原件，只定高度：36 / 38.3 / 42.8，宽 215 / 228 / 255 */
.hdr__logo .on-dark { display: none; }
.hdr[data-scheme="dark"] .hdr__logo .on-light { display: none; }
.hdr[data-scheme="dark"] .hdr__logo .on-dark { display: block; }
/* 导航（第二轮，照 Twenty 的排法）：四个页签各占同样的固定宽度 --tab-w，文字在格内居中；
   相邻两格之间一道短竖线（发丝线，高约等于字高）。--tab-w 按最长的词（Company、Solutions）加留白来定，
   并随视口略放宽：1024 宽 108 像素，1280 宽 112，1440 宽 121，1920 宽 142.5；相邻两词之间的净距平均约 64 至 90 像素
  （Twenty 是 65）。悬停时字下出一枚红点。 */
.hdr__nav { --tab-w: clamp(6.75rem, 8.4vw, 7.5rem); display: flex; align-items: center; margin-left: calc(var(--s-2) * -1); }
.hdr__nav a { position: relative; display: grid; place-items: center; flex: none; width: var(--tab-w); height: 2.5rem; font-size: 1.0625rem; line-height: 1.5rem; font-weight: 550; letter-spacing: -0.012em; text-align: center; text-decoration: none; color: var(--ink); white-space: nowrap; }
.hdr__nav a + a::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: .9375rem; margin-top: -.4688rem; background: var(--line-strong); }
.hdr__nav a::after { content: ""; position: absolute; left: 50%; bottom: .0625rem; width: .3125rem; height: .3125rem; margin-left: -.1563rem; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform var(--d-3) var(--e-spring); }
.hdr__nav a:hover::after, .hdr__nav a:focus-visible::after { transform: scale(1); }
.hdr__end { margin-left: auto; display: flex; align-items: center; gap: var(--s-8); }
.hdr__lang { position: relative; display: block; padding: .5rem 0; font-size: 1.0625rem; line-height: 1.5rem; font-weight: 550; text-decoration: none; color: var(--ink); white-space: nowrap; font-family: "Noto Sans SC", "Microsoft YaHei", var(--f-sans); letter-spacing: .02em; }
.hdr__lang::after { content: ""; position: absolute; left: 0; right: 0; bottom: .25rem; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--d-2) var(--e-out); }
.hdr__lang:hover::after { transform: scaleX(1); }

/* ---------- 8. 入场次序 ----------
   html 带 .js 时，[data-reveal] 先隐去，进入视口后由 engine.js 加 .is-in。
   同一组内的先后用 --d（毫秒数）错开；data-reveal-group 的直接子项自动递增。
   没有脚本时内容照常显示。 */
.js [data-reveal] { opacity: 0; transform: translateY(1.125rem); transition: opacity var(--d-4) var(--e-out), transform var(--d-4) var(--e-out); transition-delay: calc(var(--d, 0) * 1ms); will-change: opacity, transform; }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="rise-lg"] { transform: translateY(2.75rem); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* 标题按行升起：每行一个 .ln，内层 span 自下而上滑入 */
.ln { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.js [data-reveal="lines"] { opacity: 1; transform: none; }
.js [data-reveal="lines"] .ln > span { display: block; transform: translateY(108%); transition: transform 900ms var(--e-out); transition-delay: calc((var(--d, 0) + var(--i, 0) * 90) * 1ms); }
.js [data-reveal="lines"].is-in .ln > span { transform: none; }

/* ---------- 9. 减少动态效果 ----------
   三层：全局把过渡与关键帧压到接近零；循环动画单独停掉；画布与滚动场景由 engine.js 处理
  （画布只画一帧，粘性场景改成普通纵向排列）。html.rm 由 engine.js 在系统偏好开启时写入，
   也可用地址栏 ?motion=reduce 强制，供核对用。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
}
html.rm *, html.rm *::before, html.rm *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
html.rm [data-reveal], html.rm [data-reveal="lines"] .ln > span { opacity: 1 !important; transform: none !important; }
html.rm .btn:hover .btn__dot::after { animation: none; }
/* 粘性与漂移类区块：减少动态效果下一律改为普通纵向排列（下一阶段的区块 5、7 用） */
html.rm [data-pin] { height: auto !important; }
html.rm [data-pin] [data-pin-stage] { position: static !important; height: auto !important; transform: none !important; }