@charset "utf-8";

/* ═══════════════════════════════════════════════════════════════════
   玄矩互动 XUANJU INTERACTIVE · 视觉规范 v1.0 落地
   零外链 · 零位图 · 全部图形程序化生成
   动画属性白名单：transform / opacity / clip-path / filter /
                   color / background-color / border-color /
                   text-decoration-color / box-shadow(仅焦点与硬阴影)
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. 设计 Token ────────────────────────────────────────────────── */
:root {
  /* 色彩 · 墨色层级（深空底，非纯黑，色相恒定 H≈255 冷偏） */
  --c-ink-950: #07090D;
  --c-ink-900: #0A0D12;
  --c-ink-850: #0E131A;
  --c-ink-800: #12181F;
  --c-ink-700: #1A222C;

  /* 色彩 · 强调 */
  --c-ember:      #FF6A2B;
  --c-ember-dim:  #C9541F;
  --c-ember-ink:  #0A0D12;
  --c-glacier:    #4FC9BC;

  /* 语义透明层（rgba 为不支持 color-mix 时的等价回退） */
  --c-ember-08: rgba(255, 106, 43, 0.08);
  --c-ember-10: rgba(255, 106, 43, 0.10);
  --c-ember-16: rgba(255, 106, 43, 0.16);
  --c-ember-22: rgba(255, 106, 43, 0.22);
  --c-ember-40: rgba(255, 106, 43, 0.40);

  /* 色彩 · 中立文字（3 级，全部 ≥ WCAG AA） */
  --c-text-1: #E9EDF3;  /* 16.6:1 AAA */
  --c-text-2: #AEB8C6;  /*  9.6:1 AAA */
  --c-text-3: #7C8899;  /*  5.4:1 AA  */

  /* 色彩 · 线（hairline 是本项目的主要分割手段） */
  --c-line:        rgba(233, 237, 243, 0.09);
  --c-line-strong: rgba(233, 237, 243, 0.16);
  --c-line-hover:  rgba(233, 237, 243, 0.28);
  --c-line-accent: var(--c-ember-40);

  /* 色彩 · 功能（极少使用，仅表单与状态） */
  --c-ok:    #5FBF8C;
  --c-warn:  #D9A33B;
  --c-error: #E0574A;

  /* 字体族（系统栈，零外链） */
  --font-display:
    "Bahnschrift Condensed", "Bahnschrift", "DIN Alternate",
    "Avenir Next Condensed", "Helvetica Neue", "Arial Narrow",
    "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans CN",
    "Microsoft YaHei", sans-serif;
  --font-body:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "HarmonyOS Sans SC", "Source Han Sans CN",
    "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --font-mono:
    "JetBrains Mono", "Cascadia Mono", "Cascadia Code", "SF Mono",
    "Menlo", "Consolas", "DejaVu Sans Mono", monospace;

  /* 流体字号阶梯 */
  --fs-display: clamp(2.75rem, 1.5rem + 6.2vw, 6.5rem);
  --fs-h1:      clamp(2.125rem, 1.4rem + 3.4vw, 3.75rem);
  --fs-h2:      clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem);
  --fs-h3:      clamp(1.25rem,  1.1rem + 0.7vw, 1.75rem);
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-caption: 0.8125rem;
  --fs-mono:    0.75rem;
  --fs-micro:   0.6875rem;

  /* 字重 / 字距 / 行高 */
  --fw-display: 700;  --fw-h: 650;  --fw-body: 400;  --fw-mono: 500;
  --ls-display: -0.02em;
  --ls-h:       -0.01em;
  --ls-body:     0.01em;
  --ls-mono:     0.14em;
  --ls-latin:    0.18em;
  --lh-display: 1.05;  --lh-h: 1.25;
  --lh-body-cjk: 1.75;
  --lh-body-lat: 1.55;

  /* 间距（8px 基准） */
  --s-1: 8px;   --s-2: 16px;  --s-3: 24px;  --s-4: 32px;
  --s-5: 48px;  --s-6: 64px;  --s-7: 96px;  --s-8: 128px;
  --space-section: clamp(72px, 4rem + 6vw, 160px);
  --space-block:   clamp(32px, 1.5rem + 2.5vw, 72px);
  --space-stack:   clamp(12px, 0.5rem + 1vw, 24px);
  --space-gutter:  clamp(20px, 1rem + 3vw, 48px);

  /* 圆角（上限 6px；切角用 clip-path） */
  --r-0: 0;  --r-xs: 2px;  --r-sm: 4px;  --r-md: 6px;
  --notch: 10px;

  /* 边框 / 阴影 / 模糊 */
  --bw: 1px;
  --blur-nav: 14px;
  --blur-glow: 120px;
  --shadow-raise: inset 0 1px 0 rgba(233,237,243,0.04);
  --shadow-float: 0 1px 0 rgba(233,237,243,0.05) inset, 0 18px 40px -24px rgba(0,0,0,0.9);
  --shadow-hard: 4px 4px 0 var(--c-ember-dim);

  /* 时长 / 缓动 */
  --t-fast: 120ms;  --t-base: 200ms;
  --t-slow: 420ms;  --t-xslow: 900ms;
  --e-out:   cubic-bezier(0.16, 0.84, 0.44, 1);
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --e-snap:  cubic-bezier(0.20, 0.90, 0.10, 1);
  --e-step:  steps(8, end);

  /* 布局 */
  --w-content: 1280px;
  --w-narrow:  1120px;
  --w-prose-cjk: 32em;
  --w-prose-lat: 64ch;
  --grid-cols: 12;
  --grid-gap: clamp(16px, 0.5rem + 1.5vw, 32px);
  --nav-h: 64px;

  /* 运行时（由 JS 写入） */
  --p: 0;
}

@supports (color: color-mix(in oklab, red, blue)) {
  :root {
    --c-ember-08: color-mix(in oklab, var(--c-ember) 8%,  transparent);
    --c-ember-10: color-mix(in oklab, var(--c-ember) 10%, transparent);
    --c-ember-16: color-mix(in oklab, var(--c-ember) 16%, transparent);
    --c-ember-22: color-mix(in oklab, var(--c-ember) 22%, transparent);
    --c-ember-40: color-mix(in oklab, var(--c-ember) 40%, transparent);
  }
}

@media (max-width: 767px) {
  :root { --nav-h: 56px; --grid-cols: 4; }
}

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

html {
  scroll-behavior: smooth;
  background: var(--c-ink-900);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-ink-900);
  color: var(--c-text-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body-cjk);
  letter-spacing: var(--ls-body);
  overflow-x: hidden;                 /* 仅兜底，根因由布局保证 */
  hanging-punctuation: allow-end;
}

h1, h2, h3, p, dl, dd, dt, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* 全局焦点环（全站统一，禁止 outline:none 无替代） */
:focus-visible {
  outline: 2px solid var(--c-ember);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: var(--c-ember); color: var(--c-ember-ink); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: var(--fw-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.lat {
  margin-inline: 0.08em;
  font-family: var(--font-display);
  letter-spacing: var(--ls-latin);
}

/* ── 3. 覆盖层：A2 扫描线 / A3 噪点 ───────────────────────────────── */
.scanlines {
  position: fixed; inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .35;
  background: repeating-linear-gradient(0deg,
    rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
  animation: scan 9s linear infinite;
}
@keyframes scan {
  from { transform: translateY(0); }
  to   { transform: translateY(3px); }
}

.grain {
  position: fixed; inset: 0;
  z-index: 65;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: soft-light;
}

/* ── 4. 程序化资产：A1 透视网格 / A4 辉光 ─────────────────────────── */
.horizon {
  position: absolute; inset: 0;
  overflow: hidden;
  perspective: 520px;
  perspective-origin: 50% 100%;
  opacity: .55;
  pointer-events: none;
}
.horizon-plane {
  position: absolute;
  left: -50%; right: -50%; bottom: -20%;
  height: 160%;
  transform: rotateX(72deg) scale(2.4);
  transform-origin: 50% 100%;
  background-image:
    repeating-linear-gradient(90deg, var(--c-line) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg,  var(--c-line) 0 1px, transparent 1px 80px);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 100%, #000 20%, transparent 72%);
          mask-image: radial-gradient(120% 80% at 50% 100%, #000 20%, transparent 72%);
}
.horizon--fade { opacity: .3; }

.glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background: radial-gradient(38% 42% at 72% 18%,
    var(--c-ember-16), transparent 70%);
}
.glow--a { background: radial-gradient(38% 42% at 72% 18%, var(--c-ember-16), transparent 70%); }
.glow--b { background: radial-gradient(34% 38% at 22% 62%, var(--c-ember-16), transparent 70%); }

/* ── 5. 容器 / 区块骨架 ───────────────────────────────────────────── */
.shell {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}
.shell--narrow { max-width: var(--w-narrow); }

.section {
  position: relative;
  padding-block: var(--space-section);
}
.section--850 { background: var(--c-ink-850); }
.section--900 { background: var(--c-ink-900); }
.section--950 { background: var(--c-ink-950); padding-block: calc(var(--space-section) * 1.1); }
.section--flush > .shell { position: relative; z-index: 1; }

#studio { padding-block: calc(var(--space-section) * 1.2); }

/* 区块头部：刻度分割线 + 拉丁小标在上 + 中文标题 */
.sec-head { margin-bottom: var(--space-block); }

.sec-rule {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.rule-ticks { flex: none; width: 24px; height: 24px; stroke: var(--c-line-strong); stroke-width: 1; }
.rule-line {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--c-line-strong), var(--c-line) 70%, transparent);
}
.rule-no { flex: none; color: var(--c-text-3); }

.sec-title { margin-bottom: var(--space-stack); }
.sec-title .sec-lat {
  display: block;
  margin-bottom: 8px;
  color: var(--c-text-3);
}
.sec-title .sec-cjk {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-h1);
  font-weight: var(--fw-h);
  line-height: var(--lh-h);
  letter-spacing: var(--ls-h);
  color: var(--c-text-1);
  text-wrap: balance;
}
.sec-intro {
  max-width: var(--w-prose-cjk);
  color: var(--c-text-2);
  font-size: var(--fs-body);
}

/* 刻度列表行（业务能力 / 技术要点 / 理念 共用） */
.tick-row { position: relative; padding-left: 0; }

/* ── 6. 顶部导航 ──────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  pointer-events: none;              /* 仅交互子元素接收事件 */
}
.site-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: var(--nav-h);
  padding-inline: var(--space-gutter);
  pointer-events: auto;
  transition: background-color var(--t-base) var(--e-out),
              border-color var(--t-base) var(--e-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled .site-nav {
  background: color-mix(in oklab, var(--c-ink-900) 82%, transparent);
  background: rgba(10, 13, 18, .82);
  border-bottom-color: var(--c-line);
  -webkit-backdrop-filter: blur(var(--blur-nav)) saturate(1.1);
          backdrop-filter: blur(var(--blur-nav)) saturate(1.1);
}

.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand-mark { flex: none; color: var(--c-text-1); }
.brand-text { display: block; line-height: 1.05; }
.brand-cn {
  display: block;
  font-size: 16px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-text-1);
}
.brand-lat {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-mono);
  letter-spacing: var(--ls-latin);
  color: var(--c-text-3);
}

.nav-list { display: flex; align-items: center; gap: 28px; }
.nav-link { position: relative; display: inline-block; padding: 4px 0; font-size: var(--fs-small); color: var(--c-text-2); }
.nav-link::before {
  content: "";
  position: absolute; left: -10px; top: 50%;
  width: 6px; height: 6px;
  background: transparent;
  transform: translateY(-50%);
  transition: background-color var(--t-base) var(--e-out);
}
.nav-link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--c-text-1);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--e-out);
}
.nav-link:hover { color: var(--c-text-1); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link:active { color: var(--c-text-1); }
.nav-link[aria-current="true"] { color: var(--c-text-1); }
.nav-link[aria-current="true"]::before { background: var(--c-ember); }

.nav-cta {
  display: inline-flex; align-items: center;
  height: 34px; padding: 0 14px;
  border: 1px solid var(--c-ember-40);
  border-radius: var(--r-xs);
  font-size: var(--fs-small);
  color: var(--c-ember);
  transition: background-color var(--t-fast) var(--e-snap),
              border-color var(--t-fast) var(--e-snap),
              color var(--t-fast) var(--e-snap);
}
.nav-cta:hover { background: var(--c-ember-08); border-color: var(--c-ember); color: var(--c-text-1); }
.nav-cta[aria-current="true"] { background: var(--c-ember-08); border-color: var(--c-ember); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  color: var(--c-text-2);
}
.nav-toggle svg { stroke: var(--c-line-strong); stroke-width: 1; }

.nav-progress {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; overflow: hidden;
}
.nav-progress-bar {
  display: block; height: 1px;
  background: var(--c-ember);
  transform: scaleX(var(--p));
  transform-origin: left;
}

/* 移动端下拉条：clip-path 收起（不动画 height 类属性） */
.nav-drawer {
  position: absolute;
  top: 100%; left: 0; right: 0;
  max-height: 60vh;
  overflow-y: auto;
  pointer-events: auto;
  background: rgba(10, 13, 18, .96);
  -webkit-backdrop-filter: blur(var(--blur-nav));
          backdrop-filter: blur(var(--blur-nav));
  border-bottom: 1px solid var(--c-line);
  transition: clip-path var(--t-base) var(--e-out);
}
.js .nav-drawer { clip-path: inset(0 0 100% 0); }
.js .nav-drawer.is-open { clip-path: inset(0 0 0 0); }
.js .nav-drawer:not(.is-open) { pointer-events: none; }

.drawer-link {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: 44px;
  padding-inline: var(--space-gutter);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-small);
  color: var(--c-text-2);
}
.drawer-link .mono { color: var(--c-text-3); }
.drawer-link:active { background: var(--c-ink-800); }

/* ── 7. 按钮 ──────────────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.01em;
  border: 0;
  border-radius: var(--r-xs);
  transition: transform var(--t-fast) var(--e-snap),
              background-color var(--t-fast) var(--e-snap),
              border-color var(--t-fast) var(--e-snap),
              color var(--t-fast) var(--e-snap),
              box-shadow var(--t-fast) var(--e-snap);
}
.btn-text, .btn-face { pointer-events: none; }

.btn--primary { background: transparent; color: var(--c-ember-ink); }
.btn--primary .btn-face {
  position: absolute; inset: 0;
  background: var(--c-ember);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  transition: clip-path var(--t-fast) var(--e-snap), background-color var(--t-fast) var(--e-snap);
}
.btn--primary .btn-face::after {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 4px; height: 4px;
  background: var(--c-ink-900);
}
.btn--primary .btn-text { position: relative; z-index: 1; }
.btn--primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-hard); }
.btn--primary:hover .btn-face { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.btn--primary:active { transform: translateY(0); }
.btn--primary:active .btn-face { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.btn--primary[disabled], .btn--primary.is-busy {
  background: transparent; color: var(--c-text-3); cursor: not-allowed;
}
.btn--primary[disabled] .btn-face,
.btn--primary.is-busy .btn-face { background: var(--c-ink-700); clip-path: none; }
.btn--primary[disabled], .btn--primary.is-busy { box-shadow: none; transform: none; }

.btn--secondary {
  background: transparent;
  border: 1px solid var(--c-line-strong);
  border-radius: 0;
  color: var(--c-text-1);
}
.btn--secondary:hover { border-color: var(--c-ember-40); background: var(--c-ember-08); }
.btn--secondary:active { background: var(--c-ember-16); }

.btn--ghost { background: transparent; color: var(--c-text-2); }
.btn--ghost:hover { color: var(--c-text-1); }

/* 三点加载（非圆形 spinner） */
.btn-dots { display: inline-flex; gap: 3px; width: 8px; height: 4px; align-items: center; }
.btn-dots[hidden] { display: none; }
.btn-dots i { width: 2px; height: 2px; background: currentColor; animation: dotpulse 900ms var(--e-inout) infinite; }
.btn-dots i:nth-child(2) { animation-delay: 120ms; }
.btn-dots i:nth-child(3) { animation-delay: 240ms; }
@keyframes dotpulse {
  0%, 100% { opacity: .25; }
  50%      { opacity: 1; }
}

/* ── 8. 首屏 HERO ─────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--nav-h) + var(--s-6)) var(--s-6);
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-block);
  width: 100%;
}
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.hero-lat { color: var(--c-text-3); margin-bottom: var(--s-3); }
.hero-title {
  font-family: var(--font-body);
  font-size: var(--fs-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--c-text-1);
  text-align: left;
  text-wrap: balance;
  margin-bottom: var(--space-stack);
}
.hero-lead {
  max-width: 28em;
  font-size: var(--fs-body-lg);
  color: var(--c-text-2);
  margin-bottom: var(--space-block);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--space-block); }
.hero-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-1);
  color: var(--c-text-3);
}
.hero-meta .tick { font-style: normal; color: var(--c-ember); margin-inline: 4px; }

.hero-visual {
  position: relative;
  min-height: 240px;
  height: 38svh;
  border: 1px solid var(--c-line);
  background: linear-gradient(180deg, transparent, var(--c-ink-850));
}
.dust { width: 100%; height: 100%; }

@media (min-width: 768px) {
  .hero-visual { height: 34svh; }
}
@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gap);
    align-items: end;
  }
  .hero-copy  { grid-column: 1 / 8; }
  .hero-visual { grid-column: 8 / 13; height: 46svh; min-height: 320px; }
}

/* ── 9. 02 业务能力 ───────────────────────────────────────────────── */
.cap-layout { display: block; }
.cap-index { margin-bottom: var(--space-block); }
.cap-index-head { color: var(--c-text-3); margin-bottom: var(--s-1); }
.cap-index-list {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.cap-index-link {
  scroll-snap-align: start;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 36px;
  padding: 0 8px;
  border-bottom: 2px solid transparent;
  color: var(--c-text-3);
  transition: color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.cap-index-link:hover { color: var(--c-text-2); }
.cap-index-link.is-active { color: var(--c-text-1); border-bottom-color: var(--c-ember); }

.cap-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-block); }

.cap-item, .tech-item, .creed {
  position: relative;
  padding-left: var(--s-3);
}
.cap-item::before, .tech-item::before, .creed::before {
  content: "";
  position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 1px;
  background: var(--c-line);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out);
}
.cap-item:hover::before, .tech-item:hover::before, .creed:hover::before {
  background: var(--c-ember);
  transform: scaleX(2);
}
.cap-no, .tech-no, .creed-no {
  position: absolute; left: 0; top: 0;
  width: 2.5ch;
  text-align: right;
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}
.cap-title, .tech-title, .creed-title {
  margin-left: 3ch;
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: var(--fw-h);
  line-height: var(--lh-h);
  letter-spacing: var(--ls-h);
  color: var(--c-text-1);
}
.cap-title .sec-lat, .tech-title .sec-lat, .creed-title .sec-lat {
  display: block;
  margin-bottom: 6px;
  color: var(--c-text-3);
}
.cap-desc, .tech-desc, .creed-desc {
  margin-left: 3ch;
  margin-top: var(--s-1);
  color: var(--c-text-2);
  font-size: var(--fs-body);
}
.creed-desc { max-width: var(--w-prose-cjk); }
.cap-desc { max-width: 30em; }

@media (min-width: 768px) {
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .cap-layout {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gap);
  }
  .cap-index { grid-column: 1 / 4; margin-bottom: 0; }
  .cap-index {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
    align-self: start;
  }
  .cap-index-list { display: block; overflow: visible; }
  .cap-index-link {
    display: flex; justify-content: flex-start;
    min-height: 40px; min-width: 0;
    border-bottom: 0;
    border-left: 2px solid transparent;
    padding: 0 0 0 10px;
  }
  .cap-index-link.is-active { border-bottom-color: transparent; border-left-color: var(--c-ember); }
  .cap-index-stem {
    display: block;
    width: 1px; height: 64px;
    margin: var(--s-2) 0 0 10px;
    background: linear-gradient(180deg, var(--c-ember-40), transparent);
  }
  .cap-grid { grid-column: 4 / 13; }
}

/* ── 10. 03 作品刻度墙 ────────────────────────────────────────────── */
.works-bg { position: absolute; inset: 0; overflow: hidden; }

.work-wall {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--c-line);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}

.work {
  position: relative;
  overflow: hidden;
  padding: var(--s-2);
  background: var(--c-ink-900);
  transition: background-color var(--t-base) var(--e-out);
}
.work::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--c-ember);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--t-base) var(--e-out);
}
.work:hover { background: var(--c-ink-800); }
.work:hover::before { transform: scaleY(1); }
.work:active { background: var(--c-ink-700); }
.work:focus-visible { outline: 2px solid var(--c-ember); outline-offset: -2px; }

.cover {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-ink-800);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
}
.work--wide .cover { aspect-ratio: 16 / 9; }
.cover-inner {
  position: absolute; inset: 0;
  transition: transform var(--t-slow) var(--e-out);
}
.work:hover .cover-inner { transform: translate(6px, -4px); }
.cover-art { position: absolute; inset: 0; }
.cover-art::after {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid var(--c-line-strong);
}
.cover::after {                       /* 右上角 1px 十字定位标记 */
  content: "";
  position: absolute; top: 8px; right: 8px;
  width: 16px; height: 16px;
  background:
    linear-gradient(var(--c-line) 0 0) no-repeat 0 8px / 16px 1px,
    linear-gradient(var(--c-line) 0 0) no-repeat 8px 0 / 1px 16px;
}
.cover::before {                      /* 斜向扫光（仅指针设备、≥768px） */
  content: "";
  position: absolute; top: -25%; left: 0;
  width: 40%; height: 150%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  transform: rotate(-20deg) translateX(-160%);
  opacity: 0;
  pointer-events: none;
}
.cover-canvas { width: 100%; height: 100%; }

.work-info { padding-top: var(--s-2); }
.work-row1 {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-2);
  padding-top: 6px;
  border-top: 1px solid var(--c-line);
}
.work-name {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: var(--fw-h);
  line-height: var(--lh-h);
  color: var(--c-text-1);
}
.work-name .lat { font-size: 0.62em; color: var(--c-text-3); }
.work-year { flex: none; color: var(--c-text-3); }
.work-meta { margin-top: 6px; color: var(--c-text-3); overflow-wrap: anywhere; }
.work-desc {
  margin-top: var(--s-1);
  max-width: 30em;
  font-size: var(--fs-small);
  color: var(--c-text-2);
}
.work--wip .cover { filter: grayscale(1) brightness(.6); }
.work--wip .work-name,
.work--wip .work-year,
.work--wip .work-meta,
.work--wip .work-desc { color: var(--c-text-3); }

.tag {
  display: inline-block;
  height: 22px;
  line-height: 20px;
  padding: 0 8px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-text-2);
  white-space: nowrap;
}
.tag--accent { border-color: var(--c-ember-40); color: var(--c-ember); background: var(--c-ember-08); }
.tag--glacier { border-color: color-mix(in oklab, var(--c-glacier) 40%, transparent); color: var(--c-glacier); }
.work-info .tag { margin-top: var(--s-1); }

/* 封面配方 C1–C8 */
.c1 .cover-art { transform: rotate(-12deg) scaleY(.88); }
.ring {
  position: absolute; top: 50%; left: 50%;
  border: 1px solid var(--c-line-strong);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.ring1 { width: 20%;  height: 20%; }
.ring2 { width: 40%;  height: 40%; }
.ring3 { width: 60%;  height: 60%; }
.ring4 { width: 80%;  height: 80%; }
.ring5 { width: 100%; height: 100%; }
.ring6 { width: 120%; height: 120%; }
.c1-scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg,
    rgba(255,255,255,.05) 0 1px, transparent 1px 6px);
}

.c2 .cover-art {
  background-image: repeating-linear-gradient(115deg,
    var(--c-ink-800) 0 6px, var(--c-ink-900) 6px 14px);
}
.c2-beam {
  position: absolute; top: -10%; left: 0;
  width: 100%; height: 120%;
  background: linear-gradient(115deg, transparent calc(50% - .5px), var(--c-ember) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px));
}
.c2-glow {
  position: absolute; right: 0; bottom: 0;
  width: 42%; height: 42%;
  background: radial-gradient(circle at 100% 100%, var(--c-ember-16), transparent 70%);
}

.c3-svg { width: 100%; height: 100%; }

.c4-svg { width: 100%; height: 100%; }

.c5 .cover-art {
  background-image:
    linear-gradient(var(--c-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-line) 1px, transparent 1px);
  background-size: 24px 24px;
}
.c5-block {
  position: absolute; top: 22%; left: 18%;
  width: 40%; height: 40%;
  background: var(--c-ember-22);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

.c6 .cover-art {
  background: repeating-conic-gradient(from 210deg at 50% 50%,
    var(--c-ember-16) 0 6deg, transparent 6deg 18deg);
}
.c6-core {
  position: absolute; top: 50%; left: 50%;
  width: 8%; padding-bottom: 8%;
  border-radius: 50%;
  background: var(--c-ember);
  transform: translate(-50%, -50%);
}

.c8-svg { width: 100%; height: 100%; }

@media (min-width: 768px) {
  .work-wall { grid-template-columns: repeat(8, 1fr); }
  .work { grid-column: span 4; }
  .work:nth-child(even) { margin-top: var(--s-4); }
  .work--wide { grid-column: span 8; }
}
@media (min-width: 1024px) {
  .work-wall { grid-template-columns: repeat(12, 1fr); }
  .work:nth-child(1), .work:nth-child(2) { grid-column: span 6; }
  .work:nth-child(3), .work:nth-child(4), .work:nth-child(5) { grid-column: span 4; }
  .work:nth-child(6) { grid-column: span 7; }
  .work:nth-child(7) { grid-column: span 5; }
  .work:nth-child(8) { grid-column: span 12; }
  .work:nth-child(even) { margin-top: var(--s-6); }
}

@media (hover: hover) and (min-width: 768px) {
  .work:hover .cover::before { animation: sheen 600ms var(--e-out) 1; }
}
@keyframes sheen {
  0%   { transform: rotate(-20deg) translateX(-160%); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: rotate(-20deg) translateX(320%); opacity: 0; }
}

/* ── 11. 04 技术 / 引擎 ───────────────────────────────────────────── */
.engine-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-block); }
.engine-list { display: grid; grid-template-columns: 1fr; gap: var(--space-block); }
.engine-visual {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--c-line);
  background: linear-gradient(180deg, var(--c-ink-900), var(--c-ink-950));
}
.cube { width: 100%; height: auto; }
.cube .edge {
  stroke: var(--c-glacier);
  stroke-width: 1;
  fill: none;
}
.cube .edge.dashed { stroke-dasharray: 3 5; opacity: .55; }
/* 描边 draw-in 只在有 JS 时启用；无 JS 时线框直接完整可见 */
.js .cube .edge:not(.dashed) { stroke-dasharray: 400; stroke-dashoffset: 400; }
.js .cube.is-in .edge:not(.dashed) {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--t-xslow) var(--e-out);
  transition-delay: calc(var(--i) * 40ms);
}
.readouts { display: flex; flex-wrap: wrap; gap: var(--s-1); }

@media (min-width: 1024px) {
  .engine-layout { grid-template-columns: repeat(12, 1fr); gap: var(--grid-gap); }
  .engine-list { grid-column: 1 / 9; }
  .engine-visual { grid-column: 9 / 13; }
}

/* ── 12. 05 团队 / 指标 ───────────────────────────────────────────── */
.creed-list { display: grid; grid-template-columns: 1fr; gap: var(--space-block); }
.metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--space-block);
  border-top: 1px solid var(--c-line);
}
.metrics .metric {
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  border-top: 1px solid transparent;
}
.metric-label { color: var(--c-text-3); }
.metric-value {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--c-text-1);
  white-space: nowrap;
}
.metric-value .unit {
  font-size: 0.5em;
  color: var(--c-text-3);
  vertical-align: 0.35em;
  margin-left: .2em;
}
@media (min-width: 1024px) {
  .metrics {
    grid-template-columns: repeat(4, 1fr);
    border-top: 0;
    padding-top: var(--s-3);
    background-image: linear-gradient(90deg, var(--c-ember) 0 32px, var(--c-line) 32px 100%);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 0;
  }
  .metrics .metric { border-top: 0; padding: var(--s-2) var(--s-3) 0 0; }
  .metrics .metric + .metric { border-left: 1px solid var(--c-line); padding-left: var(--s-3); }
}

/* ── 13. 06 招聘 ──────────────────────────────────────────────────── */
.role-list { border-top: 1px solid var(--c-line); }
.role { border-bottom: 1px solid var(--c-line); padding-block: var(--s-3); }
.role-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.role-name {
  flex: 1 1 100%;
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: var(--fw-h);
  line-height: var(--lh-h);
  color: var(--c-text-1);
}
.role-sub { color: var(--c-text-3); }
.role-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px;
  color: var(--c-text-2);
  font-size: var(--fs-small);
  transition: color var(--t-fast) var(--e-out);
}
.role-toggle .chev { font-family: var(--font-mono); transition: transform var(--t-fast) var(--e-out); }
.role-toggle:hover { color: var(--c-text-1); }
.role-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.role-toggle[aria-expanded="true"] { color: var(--c-ember); }
.role-req { padding-top: var(--s-2); }
.req-list { display: grid; gap: 6px; }
.req-list li {
  position: relative;
  padding-left: var(--s-2);
  font-size: var(--fs-small);
  color: var(--c-text-2);
}
.req-list li::before {
  content: "";
  position: absolute; left: 0; top: .65em;
  width: 6px; height: 1px;
  background: var(--c-line-strong);
}
.role-fallback { margin-top: var(--space-block); color: var(--c-text-3); overflow-wrap: anywhere; }

@media (min-width: 768px) {
  .role-main { flex-wrap: nowrap; align-items: baseline; }
  .role-name { flex: 1 1 auto; }
  .role-sub { flex: none; order: 2; }
  .role-toggle { flex: none; order: 3; margin-left: auto; }
}

/* ── 14. 07 联系 / 表单 ───────────────────────────────────────────── */
.contact-bg { position: absolute; inset: 0; overflow: hidden; }
.contact-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-block); }
.cform { max-width: 720px; }
.form-static {
  margin-bottom: var(--s-3);
  padding: var(--s-2);
  border-left: 2px solid var(--c-line-strong);
  color: var(--c-text-3);
  text-transform: none;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
}
.form-msg {
  margin-bottom: var(--s-3);
  padding: var(--s-2);
  border-left: 2px solid;
  font-size: var(--fs-small);
  line-height: 1.7;
  text-transform: none;
  letter-spacing: 0.01em;
}
.form-msg[hidden] { display: none; }
.form-msg--ok  { border-left-color: var(--c-ok);    color: var(--c-ok);    background: var(--c-ink-800); }
.form-msg--err { border-left-color: var(--c-error); color: var(--c-error); background: var(--c-ink-800); }
.form-msg a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.field { position: relative; margin-bottom: var(--space-stack); }
.field-label {
  display: block;
  margin-bottom: 8px;
  color: var(--c-text-3);
}
.field-input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 12px;
  background: var(--c-ink-800);
  border: 0;
  border-bottom: 1px solid var(--c-line-strong);
  border-radius: 0;
  color: var(--c-text-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  transition: border-color var(--t-fast) var(--e-out),
              box-shadow var(--t-fast) var(--e-out),
              background-color var(--t-fast) var(--e-out);
}
.field-input:hover { border-bottom-color: var(--c-line-hover); }
.field-input:focus { outline: none; box-shadow: inset 0 -2px 0 var(--c-ember); }
.field-input:focus-visible { outline: 2px solid var(--c-ember); outline-offset: 3px; box-shadow: inset 0 -2px 0 var(--c-ember); }
.field::after {
  content: "";
  position: absolute; right: 0; bottom: 1px;
  width: 4px; height: 4px;
  background: var(--c-ember);
  transform: scale(0);
  transform-origin: right bottom;
  transition: transform var(--t-fast) var(--e-out);
}
.field:focus-within::after { transform: scale(1); }
.field-input[aria-invalid="true"] { box-shadow: inset 0 -2px 0 var(--c-error); }
.field-input[readonly] { background: transparent; }
.field-textarea { min-height: 120px; padding: 12px; line-height: 1.7; resize: vertical; }
.field-err {
  margin-top: 6px;
  color: var(--c-error);
  font-size: var(--fs-mono);
  text-transform: none;
  letter-spacing: 0.06em;
}
.field-err[hidden] { display: none; }
.field-foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); margin-top: 6px; }
.counter { color: var(--c-text-3); }
.select-wrap { position: relative; }
.select-wrap::after {
  content: "";
  position: absolute; right: 12px; top: 50%;
  width: 8px; height: 8px;
  background: var(--c-text-3);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: translateY(-50%);
  pointer-events: none;
}
.field-input option { background: var(--c-ink-800); color: var(--c-text-1); }
.form-actions { margin-top: var(--s-3); }

.contact-aside { align-self: start; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--s-2); }
.kv dt { color: var(--c-text-3); }
.kv dd { color: var(--c-text-2); overflow-wrap: anywhere; }
.kv dd.mail { color: var(--c-text-1); }

@media (min-width: 1024px) {
  .contact-layout { grid-template-columns: repeat(12, 1fr); gap: var(--grid-gap); }
  .cform { grid-column: 1 / 9; }
  .contact-aside { grid-column: 9 / 13; padding-top: var(--s-1); }
}
@media (max-width: 480px) {
  .field-textarea { min-height: 140px; }
}

/* ── 15. 08 页脚 ──────────────────────────────────────────────────── */
.site-footer { background: var(--c-ink-950); border-top: 1px solid var(--c-line-strong); }
.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  padding-block: 64px;
}
.footer-brand .brand-mark { color: var(--c-text-1); }
.footer-name { margin-top: var(--s-2); line-height: 1.1; }
.footer-cn { display: block; font-size: 16px; font-weight: 700; letter-spacing: 0.04em; color: var(--c-text-1); }
.footer-lat {
  display: block; margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-latin);
  color: var(--c-text-3);
}
.footer-slogan {
  margin-top: var(--s-2);
  max-width: 24em;
  font-size: var(--fs-small);
  color: var(--c-text-3);
}
.footer-nav-title { color: var(--c-text-3); margin-bottom: var(--s-1); }
.footer-nav ul { display: grid; gap: 2px; }
.footer-nav a {
  display: inline-block;
  font-size: var(--fs-small);
  line-height: 2.0;
  color: var(--c-text-2);
  transition: color var(--t-fast) var(--e-out);
}
.footer-nav a:hover { color: var(--c-text-1); }
.footer-contact .mono { color: var(--c-text-3); line-height: 2.0; }
.footer-contact .mail { color: var(--c-text-2); }

.footer-bottom { border-top: 1px solid var(--c-line); padding-block: 20px; }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font: var(--fw-mono) var(--fs-caption)/1.6 var(--font-mono);
  color: var(--c-text-3);
}
.footer-sep {
  display: inline-block;
  width: 1px; height: 24px;
  background: var(--c-line-strong);
}
.footer-legal a.beian {
  color: var(--c-text-3);
  text-decoration: underline;
  text-decoration-color: var(--c-line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--e-out),
              text-decoration-color var(--t-fast) var(--e-out);
}
.footer-legal a.beian:hover  { color: var(--c-text-2); text-decoration-color: var(--c-text-2); }
.footer-legal a.beian:active { color: var(--c-text-1); }
.footer-legal a.beian:focus-visible { outline: 2px solid var(--c-ember); outline-offset: 3px; border-radius: var(--r-xs); }

@media (min-width: 768px) {
  .footer-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .footer-inner { grid-template-columns: 5fr 3fr 3fr 3fr; gap: var(--grid-gap); }
}

/* ── 16. 入场动效（渐进增强：无 JS 时完全可见） ───────────────────── */
.js .reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-slow) var(--e-out),
              transform var(--t-slow) var(--e-out);
  transition-delay: var(--d, 0ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

.skip-link {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--c-ember);
  color: var(--c-ember-ink);
  font-size: var(--fs-small);
  font-weight: 600;
  clip-path: inset(50%);
}
.skip-link:focus-visible { clip-path: none; outline: 2px solid var(--c-ember); outline-offset: 3px; }

/* ── 17. 响应式：导航降级 ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .nav-list { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .hero-cta { flex-direction: column; align-items: flex-start; }
  .hero-cta .btn { width: min(100%, 260px); }
  .form-actions .btn { width: min(100%, 260px); }
}
@media (min-width: 768px) {
  .nav-drawer { display: none; }
}

/* ── 18. 动效降级（全局兜底 + 精确覆盖） ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto !important; }
  .scanlines { display: none; }
  .js .reveal { opacity: 1; transform: none; }
  .js .cube .edge:not(.dashed) { stroke-dashoffset: 0; transition: none; animation: none; }
  .work:hover .cover-inner { transform: none; }
  .work:hover .cover::before { animation: none; }
  .btn--primary:hover, .btn--primary:active { transform: none; box-shadow: none; }
  .btn--primary:hover .btn-face,
  .btn--primary:active .btn-face { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
  .role-toggle[aria-expanded="true"] .chev { transform: none; }
  .btn-dots i { animation: none; opacity: .6; }
  .nav-drawer { transition: none; }
}