/* ============================================================
   ApexCogn 官网 · 视觉系统
   Editorial / BCI · 2026
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --paper: #f4f5f9;
  --paper-2: #eceef5;
  --paper-3: #e3e7f1;
  --ink: #0e1123;
  --ink-2: #2b3050;
  --muted: #6f7699;
  --muted-2: #9aa0bd;
  --line: rgba(14, 17, 35, 0.13);
  --line-2: rgba(14, 17, 35, 0.07);
  --blue: #1a2aaa;
  --accent: var(--blue);
  --blue-2: #3a55e2;
  --blue-soft: #d9e0f7;
  --deep: #0a0d1a;
  --deep-2: #11142a;
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, Georgia, serif;
  --sans: "HarmonyOS Sans SC", "PingFang SC", "Deng", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pad: clamp(22px, 4vw, 56px);
  --sec: clamp(84px, 10vw, 168px);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.85;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 700px at var(--mx, 78%) var(--my, 8%), rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 62%),
    radial-gradient(900px 620px at 6% 34%, rgba(26, 42, 170, 0.055), rgba(26, 42, 170, 0) 68%),
    radial-gradient(760px 560px at 96% 78%, rgba(26, 42, 170, 0.045), rgba(26, 42, 170, 0) 70%);
  transition: background 1.2s linear, opacity 0.85s var(--ease);
}
body.tone-dark::before { opacity: 0.13; }

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
}

main, .site-foot, .site-head { position: relative; z-index: 1; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

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

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

/* ---------- type ---------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 300;
  margin: 0;
  line-height: 1.1;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.d1 { font-size: clamp(52px, 7.4vw, 118px); line-height: 0.98; letter-spacing: -0.005em; }
.d2 { font-size: clamp(38px, 4.9vw, 76px); line-height: 1.06; }
.d3 { font-size: clamp(28px, 3vw, 46px); line-height: 1.18; }
.d4 { font-size: clamp(21px, 1.7vw, 27px); line-height: 1.35; letter-spacing: 0.02em; }

em, .em {
  font-style: normal;
  color: var(--accent);
}

.serif-i {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
}

p { margin: 0; }
.lead { font-size: clamp(16px, 1.24vw, 18.5px); line-height: 1.85; color: var(--ink-2); }
.body-s { font-size: 14px; line-height: 1.95; color: var(--muted); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.eyebrow--plain::before { display: none; }

.num-tag {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--muted);
}

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.wrap--narrow { max-width: 1080px; }

.sec { padding-top: var(--sec); padding-bottom: var(--sec); }
.sec--tight { padding-top: calc(var(--sec) * 0.55); padding-bottom: calc(var(--sec) * 0.55); }

.hair { height: 1px; background: var(--line); border: 0; margin: 0; }

.grid { display: grid; gap: clamp(28px, 4vw, 64px); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- buttons ---------- */
.btn {
  --bh: 56px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  height: var(--bh);
  padding: 0 10px 0 30px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 13.5px;
  letter-spacing: 0.13em;
  white-space: nowrap;
  overflow: hidden;
  transition: background 0.4s var(--ease), transform 0.4s var(--ease);
}
.btn__orb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.16);
  transition: transform 0.5s var(--ease-out), background 0.4s;
}
.btn svg { width: 15px; height: 15px; }
.btn:hover { background: #14218c; transform: translateY(-1px); }
.btn:hover .btn__orb { transform: translateX(3px); background: rgba(255, 255, 255, 0.26); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  padding-left: 26px;
}
.btn--ghost .btn__orb { background: transparent; border: 1px solid var(--line); }
.btn--ghost:hover { background: rgba(14, 17, 35, 0.04); border-color: rgba(14, 17, 35, 0.25); transform: translateY(-1px); }

.btn--light { background: #fff; color: var(--ink); }
.btn--light .btn__orb { background: var(--blue); color: #fff; }
.btn--light:hover { background: #eef0f8; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  color: var(--ink-2);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  transition: color 0.3s, border-color 0.3s, gap 0.4s var(--ease);
}
.link-arrow svg { width: 14px; height: 14px; transition: transform 0.4s var(--ease); }
.link-arrow:hover { color: var(--accent); border-color: var(--accent); gap: 16px; }

.orb-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-2);
}
.orb-link i {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  transition: background 0.4s var(--ease), color 0.4s, border-color 0.4s;
}
.orb-link i svg { width: 15px; height: 15px; }
.orb-link:hover i { background: var(--blue); border-color: var(--accent); color: #fff; }

/* ============================================================
   Header
   ============================================================ */
.site-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  /* 页头恒定白底：局部把颜色变量重置为浅色版，不随分区色调反转 */
  --paper: #f4f5f9;
  --paper-2: #eceef5;
  --ink: #0e1123;
  --ink-2: #2b3050;
  --muted: #6f7699;
  --muted-2: #9aa0bd;
  --line: rgba(14, 17, 35, 0.13);
  --line-2: rgba(14, 17, 35, 0.07);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  transition: background 0.5s var(--ease), box-shadow 0.5s, padding 0.5s var(--ease),
              transform 0.55s cubic-bezier(.22,.61,.36,1), opacity 0.35s linear;
  padding: 14px 0 0;
}
.site-head.is-hidden{
  transform: translateY(-104%);
  opacity: 0;
  pointer-events: none;
}
.site-head::after {
  content: "";
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 0;
  height: 1px;
  background: var(--line);
  opacity: 0;
  transition: opacity 0.4s;
}
.site-head.is-stuck {
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  padding-top: 6px;
  box-shadow: 0 12px 40px -28px rgba(14, 17, 35, 0.5);
}
.site-head.is-stuck::after { opacity: 1; }

.hd {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.hd__brand { display: block; padding: 4px 0; margin-top: 2px; }
.hd__brand img { width: clamp(146px, 11.4vw, 196px); height: auto; }

.hd__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.hd__util {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.hd__util a { transition: color 0.3s; }
.hd__util a:hover { color: var(--ink); }

.ico {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--ink-2);
  transition: background 0.35s, color 0.35s, border-color 0.35s;
}
.ico svg { width: 16px; height: 16px; }
.ico:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ico--pill {
  width: 58px;
  border-radius: 999px;
  gap: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ico--pill i { display: block; width: 14px; height: 1px; background: currentColor; position: relative; }
.ico--pill i::after {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  width: 10px;
  height: 1px;
  background: currentColor;
  transition: width 0.3s;
}
.ico--pill:hover i::after { width: 14px; }

.hd__nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.1vw, 36px);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-2);
  padding-bottom: 4px;
}
.hd__nav a {
  position: relative;
  padding: 6px 0;
  transition: color 0.3s;
}
.hd__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
  opacity: 0.5;
}
.hd__nav a:hover::after,
.hd__nav a.is-active::after { transform: scaleX(1); }
.hd__nav a.is-active { color: var(--ink); }
.hd__nav a:last-child { margin-right: -0.12em; }

/* 全屏菜单 */
.menu {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--deep);
  color: #fff;
  padding: clamp(28px, 5vw, 64px) var(--pad);
  display: grid;
  grid-template-rows: auto 1fr auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s var(--ease), visibility 0.55s;
}
.menu.is-open { opacity: 1; visibility: visible; }
.menu__top { display: flex; justify-content: space-between; align-items: center; }
.menu__top img { width: 150px; }
.menu__close {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: grid;
  place-items: center;
  transition: background 0.3s, transform 0.4s;
}
.menu__close:hover { background: rgba(255, 255, 255, 0.1); transform: rotate(90deg); }
.menu__body { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-content: center; }
.menu__list { display: flex; flex-direction: column; }
.menu__list a {
  font-family: var(--serif);
  font-size: clamp(34px, 4.4vw, 62px);
  font-weight: 300;
  line-height: 1.42;
  color: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: baseline;
  gap: 18px;
  transition: color 0.3s, transform 0.5s var(--ease);
  transform: translateY(14px);
  opacity: 0;
}
.menu.is-open .menu__list a { transform: none; opacity: 1; }
.menu__list a span { font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.4); }
.menu__list a:hover { color: #fff; }
.menu__list a::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin-left: 12px;
}
.menu__side { border-left: 1px solid rgba(255, 255, 255, 0.14); padding-left: 48px; align-self: center; }
.menu__side h4 { font-family: var(--sans); font-size: 11px; letter-spacing: 0.24em; color: rgba(255, 255, 255, 0.42); margin-bottom: 18px; font-weight: 500; }
.menu__side p { font-size: 14px; line-height: 2; color: rgba(255, 255, 255, 0.72); }
.menu__side a { color: #fff; }
.menu__search { margin-top: 34px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.25); padding-bottom: 10px; }
.menu__search input { background: none; border: 0; color: #fff; width: 100%; outline: none; font-size: 14px; }
.menu__search input::placeholder { color: rgba(255, 255, 255, 0.35); }
.menu__foot { display: flex; justify-content: space-between; font-size: 11.5px; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.4); }

/* ---------- 右侧章节轴 ---------- */
.rail {
  position: fixed;
  right: clamp(10px, 1.6vw, 26px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s;
}
.rail.is-on { opacity: 1; }
.rail__num {
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.rail__bar {
  width: 1px;
  height: 88px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.rail__bar i {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 40%;
  background: var(--ink);
  transform: translateY(0);
  transition: transform 0.2s linear;
}
.rail__label {
  writing-mode: vertical-rl;
  font-size: 10.5px;
  letter-spacing: 0.36em;
  color: var(--muted);
  max-height: 200px;
}

/* 数据条 */
/* ---------- 数据条：滚动缩放入场 ---------- */
.facts__i:nth-child(1) { --i: 0; }
.facts__i:nth-child(2) { --i: 1; }
.facts__i:nth-child(3) { --i: 2; }
.facts__i:nth-child(4) { --i: 3; }

/* 容器与分隔线常驻，只让内容在滚入后播放：
   大屏下未滚动时不会出现整块空白 */
.facts { opacity: 1; }
.facts__i { opacity: 1; }

.facts__i b,
.facts__i span {
  transform-origin: 0 100%;
  will-change: transform, opacity;
  transition:
    transform 1.5s cubic-bezier(0.5, 0.05, 0.18, 1),
    opacity 0.5s var(--ease),
    filter 0.8s var(--ease);
}
.facts__i b { opacity: 0; transform: scale(0.45) translateY(24px); filter: blur(3px); }
.facts__i span { opacity: 0; transform: scale(0.84) translateY(10px); filter: blur(3px); }

.facts.is-in .facts__i b {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition-delay: calc(var(--i) * 0.1s);
}
.facts.is-in .facts__i span {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition-delay: calc(var(--i) * 0.1s + 0.12s);
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  margin-top: clamp(30px, 4vw, 56px);
  /* 三列内容各自居中，整行自然水平居中 */
}
.facts__i {
  padding: 34px 20px 0;
  border-right: 1px solid var(--line);
  text-align: center;
}
.facts__i:last-child { border-right: 0; }
.facts__i b {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1;
  letter-spacing: -0.01em;
}
.facts__i b small { font-size: 0.5em; margin-left: 2px; }
.facts__i span {
  display: block;
  margin-top: 10px;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--muted);
}

/* ============================================================
   通用区块
   ============================================================ */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: clamp(40px, 5vw, 76px); }
.sec-head__l { max-width: 760px; }
.sec-head .eyebrow { margin-bottom: 20px; }
.sec-head p { margin-top: 22px; max-width: 520px; }

/* 图文分栏 */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr);
  gap: clamp(32px, 5vw, 90px);
  align-items: center;
}
.split--rev { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1fr); }
.split--top { align-items: start; }
.split--top > .rv:first-child { padding-top: 4px; }

.viz { position: relative; }
.viz__main {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3.05;
  background: var(--paper-2);
}
.viz__main img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.viz:hover .viz__main img { transform: scale(1.03); }
.viz__circle {
  position: absolute;
  right: -7%;
  bottom: -13%;
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 10px solid var(--paper);
  background: var(--paper-2);
  box-shadow: 0 24px 60px -30px rgba(10, 13, 26, 0.45);
}
.viz__circle img { width: 100%; height: 100%; object-fit: cover; }
.viz__cap {
  position: absolute;
  left: -6px;
  top: -34px;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--muted);
}

/* 大数字散排 */
.numbers {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px 0;
  align-items: baseline;
}
.numbers .n { font-family: var(--serif); font-weight: 300; line-height: 0.9; letter-spacing: -0.02em; }
.numbers .n small { font-size: 0.34em; letter-spacing: 0.05em; margin-left: 6px; vertical-align: super; }
.numbers .n em {
  font-size: 11px;
  font-style: normal;
  color: var(--muted);
  font-family: var(--sans);
  letter-spacing: 0.18em;
  display: block;
  margin-top: 20px;
  font-weight: 400;
  line-height: 1.9;
}
.n1 { grid-column: 1 / span 5; font-size: clamp(76px, 11vw, 170px); }
.n2 { grid-column: 8 / span 5; font-size: clamp(52px, 7vw, 104px); }
.n3 { grid-column: 3 / span 4; font-size: clamp(40px, 5vw, 72px); }
.n4 { grid-column: 7 / span 6; font-size: clamp(64px, 9vw, 140px); }

/* 能力列表 */
.caps { border-top: 1px solid var(--line); }
.cap {
  display: grid;
  grid-template-columns: 60px minmax(0, 1.05fr) minmax(0, 1.6fr) 44px;
  gap: 28px;
  align-items: start;
  padding: clamp(24px, 2.6vw, 38px) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: padding 0.5s var(--ease), background 0.4s;
}
.cap::before {
  content: "";
  position: absolute;
  left: calc(var(--pad) * -1);
  right: calc(var(--pad) * -1);
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(26, 42, 170, 0.045), rgba(26, 42, 170, 0));
  opacity: 0;
  transition: opacity 0.45s;
}
.cap:hover::before { opacity: 1; }
.cap:hover { padding-left: 10px; }
.cap__no { font-family: var(--serif); font-size: 12px; letter-spacing: 0.1em; color: var(--muted); padding-top: 8px; }
.cap__t { font-family: var(--serif); font-size: clamp(22px, 2.1vw, 31px); line-height: 1.3; }
.cap__t span { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; color: var(--muted-2); margin-top: 8px; }
.cap__d { font-size: 14px; line-height: 1.95; color: var(--muted); padding-top: 6px; }
.cap__i { justify-self: end; padding-top: 4px; color: var(--muted); transition: transform 0.45s var(--ease), color 0.3s; }
.cap__i svg { width: 18px; height: 18px; }
.cap:hover .cap__i { transform: translate(4px, -4px); color: var(--accent); }

/* ============================================================
   产品卡
   ============================================================ */
.pgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.pcard {
  position: relative;
  padding: 30px 30px 26px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
  transition: background 0.5s var(--ease);
  text-align: left;
  width: 100%;
}
/* 深色区块上的卡片：悬停只做极轻的提亮，避免白色蒙层糊掉文字 */
.pcard:hover { background: rgba(255, 255, 255, 0.045); }
.pcard__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pcard__idx { font-family: var(--serif); font-size: 11.5px; letter-spacing: 0.16em; color: var(--muted-2); }
.pcard__cat {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
}
.pcard__name { font-family: var(--serif); font-size: clamp(26px, 2.2vw, 34px); line-height: 1.2; margin-top: 22px; }
.pcard__en { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-2); margin-top: 8px; }
.pcard__desc { font-size: 13px; line-height: 1.9; color: var(--muted); margin-top: 14px; max-width: 94%; }

.pcard__stage {
  position: relative;
  flex: 1;
  min-height: 168px;
  margin: 6px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pcard__band {
  width: 118%;
  max-width: none;
  transform: rotate(-9deg) translateX(2%);
  filter: drop-shadow(0 18px 22px rgba(10, 13, 26, 0.26));
  transition: transform 0.9s var(--ease-out);
}
.pcard:hover .pcard__band { transform: rotate(-6deg) translateX(2%) scale(1.04); }

/* 包装图：按实物比例摆放，不再旋转、不撑出卡片 */
.pcard--pack .pcard__stage { min-height: 190px; align-items: center; }
.pcard__band--pack {
  width: 100%;
  height: auto;
  max-height: none;
  transform: none;
  object-fit: contain;
  border-radius: 10px;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.22));
  transition: transform 0.9s var(--ease-out);
}
.pcard:hover .pcard__band--pack { transform: translateY(-5px); }
/* 包装图本身已说明产品，隐去浮动 UI 面板避免叠压 */
.pcard--pack .ui { display: none; }

/* 软件浮层 */
.ui {
  position: absolute;
  right: 2px;
  bottom: 6px;
  width: 172px;
  padding: 12px 12px 11px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 36px -22px rgba(10, 13, 26, 0.55);
  transform: translateY(6px);
  opacity: 0.92;
  transition: transform 0.7s var(--ease-out), opacity 0.5s;
  font-family: var(--sans);
}
.pcard:hover .ui { transform: translateY(0); opacity: 1; }
.ui__h { display: flex; justify-content: space-between; align-items: center; font-size: 9px; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 8px; }
.ui__h b { font-weight: 600; color: var(--ink-2); }
.ui__big { font-family: var(--serif); font-size: 25px; line-height: 1; color: var(--ink); }
.ui__big small { font-size: 9px; font-family: var(--sans); letter-spacing: 0.1em; color: var(--muted); margin-left: 3px; }
.ui__row { display: flex; align-items: flex-end; gap: 4px; height: 26px; margin-top: 8px; }
.ui__row i { flex: 1; background: var(--bar, var(--blue)); border-radius: 1px; opacity: 0.85; }
.ui__txt { font-size: 9.5px; line-height: 1.6; color: var(--muted); margin-top: 7px; }
.ui__ring { display: grid; place-items: center; height: 62px; position: relative; }
.ui__ring span {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--bar, var(--blue));
  animation: pulse 3.4s ease-in-out infinite;
}
.ui__ring span:nth-child(2) { animation-delay: 0.6s; }
.ui__ring span:nth-child(3) { animation-delay: 1.2s; }
@keyframes pulse {
  0%, 100% { transform: scale(0.7); opacity: 0.55; }
  50% { transform: scale(1); opacity: 0.2; }
}
.ui__quad { position: relative; height: 62px; margin-top: 4px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ui__quad i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--bar, var(--blue)); transform: translate(-50%, 50%); box-shadow: 0 0 0 4px rgba(26, 42, 170, 0.12); }
.ui__quad u { position: absolute; font-size: 7px; color: var(--muted-2); text-decoration: none; letter-spacing: 0.06em; }
.ui__wave { height: 34px; width: 100%; margin-top: 4px; overflow: visible; }
.ui__wave path { fill: none; stroke: var(--bar, var(--blue)); stroke-width: 1.4; }
.ui__gauge { position: relative; height: 54px; margin-top: 4px; }
.ui__gauge svg { width: 100%; height: 100%; }
.ui__gauge b { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-family: var(--serif); font-size: 17px; font-weight: 400; }

.pcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.pcard__foot i { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: 0.4s var(--ease); }
.pcard__foot i svg { width: 13px; height: 13px; }
.pcard:hover .pcard__foot i { background: var(--blue); color: #fff; border-color: var(--accent); transform: rotate(45deg); }

/* ============================================================
   场景列表
   ============================================================ */
.scenes { border-top: 1px solid var(--line); }
.scene {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.25fr) 120px;
  gap: 24px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.scene::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 0;
  background: var(--blue);
  transition: width 0.6s var(--ease);
}
.scene:hover::after { width: 100%; }
.scene__no { font-family: var(--serif); font-size: 11px; color: var(--muted-2); letter-spacing: 0.1em; }
.scene__t { font-family: var(--serif); font-size: clamp(19px, 1.9vw, 26px); transition: color 0.3s, transform 0.5s var(--ease); }
.scene:hover .scene__t { color: var(--accent); transform: translateX(6px); }
.scene__d { font-size: 13px; color: var(--muted); line-height: 1.8; }
.scene__tag { justify-self: end; font-size: 10.5px; letter-spacing: 0.14em; color: var(--muted-2); }

/* ============================================================
   深色区
   ============================================================ */
.dark {
  position: relative;
  background: var(--deep);
  color: #f2f3fa;
  overflow: hidden;
  border-radius: 12px;
}
.dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 560px at 78% 0%, rgba(26, 42, 170, 0.55), transparent 66%),
    radial-gradient(700px 500px at 8% 100%, rgba(58, 85, 226, 0.22), transparent 70%);
  pointer-events: none;
}
.dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 104px 104px;
  mask-image: radial-gradient(90% 80% at 50% 40%, #000 0%, transparent 80%);
  opacity: 0.5;
  pointer-events: none;
}
.dark .eyebrow { color: rgba(242, 243, 250, 0.55); }
.dark .lead, .dark .body-s { color: rgba(242, 243, 250, 0.66); }
.dark em { color: #8fa3ff; }
.dark .hair { background: rgba(255, 255, 255, 0.14); }
.dark .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.dark .btn--ghost:hover { background: rgba(255, 255, 255, 0.08); }
.dark .link-arrow { color: rgba(255, 255, 255, 0.8); border-color: rgba(255, 255, 255, 0.2); }
.dark .link-arrow:hover { color: #fff; border-color: #fff; }

/* 展厅横带 */
.gallery-strip {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.gs {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: #1a1e33;
}
.gs img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out), filter 0.6s; filter: saturate(0.92); }
.gs:hover img { transform: scale(1.05); filter: saturate(1.05); }
.gs--a { grid-column: 1 / span 5; aspect-ratio: 4/3; }
.gs--b { grid-column: 6 / span 3; aspect-ratio: 3/4; }
.gs--c { grid-column: 9 / span 4; aspect-ratio: 4/3; }
.gs--d { grid-column: 1 / span 3; aspect-ratio: 3/4; }
.gs--e { grid-column: 4 / span 5; aspect-ratio: 4/3; }
.gs--f { grid-column: 9 / span 4; aspect-ratio: 3/4; }
.gs figcaption {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   CTA
   ============================================================ */
.cta {
  position: relative;
  padding: clamp(64px, 8vw, 120px) clamp(30px, 5vw, 72px);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 48px;
  align-items: end;
}
.cta__t { font-size: clamp(36px, 5vw, 78px); line-height: 1.04; }
.cta__r { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }

/* ============================================================
   Footer
   ============================================================ */
.site-foot {
  background: none;              /* 不再铺深色矩形，直接压在动态背景上 */
  color: rgba(255, 255, 255, 0.78);
  /* 背景纹理较亮，用投影给文字托底（不铺任何色块） */
  text-shadow: 0 0 3px rgba(3,7,24,.95), 0 1px 16px rgba(3,7,24,.95), 0 0 40px rgba(3,7,24,.85);
  margin-top: clamp(60px, 8vw, 120px);
  position: relative;
  overflow: hidden;
}
/* 页脚右上角的蓝色径向光晕已移除，改为纯背景纹理 */
.ft__main {
  padding: clamp(56px, 7vw, 96px) var(--pad) 0;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
}
.ft__claim {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(34px, 4.6vw, 68px);
  line-height: 1.14;
  color: #fff;
  max-width: 900px;
}
.ft__claim em { color: #8fa3ff; }
.ft__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding: clamp(48px, 6vw, 84px) 0 56px;
}
.ft__col h5 {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  color: rgba(255, 255, 255, 0.38);
  margin: 0 0 18px;
  font-weight: 500;
}
.ft__col p, .ft__col a { font-size: 13.5px; line-height: 2.05; display: block; }
.ft__col a { transition: color 0.3s, transform 0.4s var(--ease); }
.ft__col a:hover { color: #fff; transform: translateX(3px); }
/* 段落内的行内链接（如「招聘 hr@…」）不要独占一行 */
.ft__col p a { display: inline; }
.ft__col p a:hover { transform: none; }
.ft__addr { font-size: 13.5px; line-height: 2.05; max-width: 320px; }
.ft__tel { font-family: var(--serif); font-size: 26px; color: #fff; letter-spacing: 0.04em; margin-top: 4px; }
.ft__bottom a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  transition: color 0.3s, border-color 0.3s;
}
.ft__bottom a:hover { color: #fff; border-color: rgba(255, 255, 255, 0.6); }

.ft__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  padding: 22px 0 26px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.4);
}
.ft__logo { width: 152px; margin-bottom: 22px; }

/* ============================================================
   内页 hero / 通用组件
   ============================================================ */
.phero { padding-top: 132px; padding-bottom: clamp(40px, 5vw, 76px); }
.phero__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.phero__crumb { font-size: 11px; letter-spacing: 0.18em; color: var(--muted-2); }
.phero__crumb b { color: var(--ink-2); font-weight: 400; }
.phero__body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 48px;
  align-items: end;
  padding-top: clamp(28px, 4vw, 56px);
}
.phero__t { font-size: clamp(44px, 6.4vw, 104px); line-height: 1.02; }
.phero__d { padding-bottom: 10px; }
.phero__d p { margin-top: 16px; color: var(--muted); font-size: 14.5px; line-height: 2; }

/* 横向参数表 */
.spec { width: 100%; border-collapse: collapse; }
.spec th, .spec td {
  text-align: left;
  padding: 18px 16px 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 400;
  vertical-align: top;
}
.spec th { color: var(--muted); font-size: 11px; letter-spacing: 0.16em; width: 26%; }
.spec td { color: var(--ink-2); }
.spec tr:hover td { color: var(--ink); }

/* 时间轴 */
.tl { position: relative; }
.tl__i {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 32px;
  padding: 30px 0;
  border-top: 1px solid var(--line);
  position: relative;
}
.tl__i:last-child { border-bottom: 1px solid var(--line); }
.tl__y { font-family: var(--serif); font-size: clamp(24px, 2.3vw, 34px); line-height: 1; }
.tl__c h4 { font-size: clamp(17px, 1.5vw, 21px); margin-bottom: 10px; }
.tl__c p { font-size: 13.5px; color: var(--muted); line-height: 1.95; max-width: 620px; }
.tl__i::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 0;
  height: 1px;
  background: var(--blue);
  transition: width 0.8s var(--ease);
}
.tl__i:hover::before { width: 100%; }

/* 价值卡 */
.vcard { padding: 34px 0 0; border-top: 1px solid var(--ink); }
.vcard h4 { font-size: clamp(19px, 1.7vw, 24px); margin: 18px 0 12px; }
.vcard p { font-size: 13.5px; color: var(--muted); line-height: 1.95; }
.vcard span { font-family: var(--serif); font-size: 12px; letter-spacing: 0.16em; color: var(--muted-2); }

/* 联系块 */
.cinfo { border-top: 1px solid var(--line); }
.cinfo__i {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.cinfo__i h5 { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.2em; color: var(--muted); font-weight: 500; margin: 0; }
.cinfo__i p { font-size: 15px; line-height: 1.9; }
.cinfo__i .big { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 32px); letter-spacing: 0.02em; }

/* 表单 */
.form { display: grid; gap: 22px; }
.field { position: relative; }
.field label {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--ink-2);
  margin-bottom: 10px;
  font-weight: 500;
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 12px 2px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(14, 17, 35, 0.24);
  border-radius: 0;
  font-size: 15px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.35s, box-shadow 0.35s;
}
.field textarea { resize: vertical; min-height: 92px; line-height: 1.8; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 1px 0 0 var(--blue); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.field--half { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* 筛选 */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 22px 0 26px;
  border-bottom: 1px solid var(--line);
}
.chip {
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
  transition: 0.35s var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* 详情面板 */
.detail {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  background: var(--paper);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0.45s;
}
.detail.is-open { opacity: 1; visibility: visible; }
.detail__viz {
  position: relative;
  background: linear-gradient(160deg, #eaedf6, #dde2f0);
  display: grid;
  place-items: center;
  padding: 60px;
  overflow: hidden;
}
.detail__viz img { width: 126%; transform: rotate(-8deg); filter: drop-shadow(0 40px 60px rgba(10, 13, 26, 0.3)); }
.detail__body { padding: clamp(40px, 5vw, 72px); overflow-y: auto; position: relative; }
.detail__close {
  position: absolute;
  top: 26px;
  right: 26px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  transition: 0.35s;
  z-index: 3;
}
.detail__close:hover { background: var(--ink); color: var(--paper); }
.detail__kicker { font-size: 11px; letter-spacing: 0.2em; color: var(--muted); }
.detail__body h2 { font-size: clamp(32px, 3.6vw, 52px); margin: 14px 0 10px; }
.detail__body .en { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-2); }
.detail__lead { font-family: var(--serif); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.75; margin: 24px 0; color: var(--ink-2); }
.detail__h { font-size: 10.5px; letter-spacing: 0.22em; color: var(--muted); margin: 34px 0 14px; border-top: 1px solid var(--line); padding-top: 18px; }
.detail ul { margin: 0; padding: 0; list-style: none; }
.detail li { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.95; color: var(--muted); margin-bottom: 8px; }
.detail li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 1px; background: var(--blue); }
.detail li b { color: var(--ink-2); font-weight: 500; }
.detail__figs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.detail__figs span { font-size: 11.5px; letter-spacing: 0.08em; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; color: var(--ink-2); }

/* ============================================================
   动效
   ============================================================ */
.rv { opacity: 0; transform: translateY(26px); transition: opacity 0.95s var(--ease-out), transform 0.95s var(--ease-out); transition-delay: var(--d, 0s); }
.rv.is-in { opacity: 1; transform: none; }
.rv-img {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1s var(--ease-out), transform 1.15s var(--ease-out);
}
.rv-img.is-in { opacity: 1; transform: none; }

/* 加载进度条 */
.loadbar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--blue);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 200;
  pointer-events: none;
  transition: transform 0.12s linear;
}

/* 页面滚动进度 */
.prog { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 95; background: transparent; }
.prog i { display: block; height: 100%; width: 0; background: var(--blue); opacity: 0.85; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1180px) {
  .rail { display: none; }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  body { font-size: 15px; }
  .hd { align-items: center; }
  .hd__util { display: flex; gap: 10px; }
  .hd__util a, .hd__util .ico:not(.ico--pill) { display: none; }
  .hd__nav { display: none; }
  .hd__right { flex-direction: row; align-items: center; }
  .hd__brand img { width: 150px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .split, .split--rev { grid-template-columns: 1fr; }
  .viz { margin-bottom: 46px; }
  .viz__circle { right: 2%; width: 38%; }
  .numbers { grid-template-columns: repeat(6, 1fr); }
  .n1 { grid-column: 1 / span 6; }
  .n2 { grid-column: 1 / span 4; }
  .n3 { grid-column: 1 / span 3; }
  .n4 { grid-column: 1 / span 5; }
  .numbers .n em { margin-top: 10px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts__i:last-child { grid-column: 1 / -1; }
  .facts__i:nth-child(2n) { border-right: 0; }
  .facts__i { padding-bottom: 24px; }
  .cap { grid-template-columns: 40px 1fr 30px; }
  .cap__d { grid-column: 2 / span 2; padding-top: 0; }
  .scene { grid-template-columns: 30px 1fr; }
  .scene__d, .scene__tag { display: none; }
  .cta { grid-template-columns: 1fr; align-items: start; }
  .phero__body { grid-template-columns: 1fr; align-items: start; gap: 24px; }
  .ft__grid { grid-template-columns: 1fr 1fr; }
  .detail { grid-template-columns: 1fr; overflow-y: auto; }
  .detail__viz { min-height: 300px; padding: 40px; position: sticky; top: 0; z-index: 2; }
  .detail__body { overflow: visible; }
  .menu__body { grid-template-columns: 1fr; }
  .menu__side { border-left: 0; padding-left: 0; }
  .gallery-strip { grid-template-columns: repeat(6, 1fr); }
  .gs--a { grid-column: 1 / span 6; }
  .gs--b { grid-column: 1 / span 3; }
  .gs--c { grid-column: 4 / span 3; }
  .gs--d { grid-column: 1 / span 3; }
  .gs--e { grid-column: 4 / span 3; }
  .gs--f { grid-column: 1 / span 6; aspect-ratio: 16/9; }
  .tl__i { grid-template-columns: 1fr; gap: 10px; }
  .cinfo__i { grid-template-columns: 1fr; gap: 8px; }
  .pcard { min-height: 380px; padding: 24px 20px; }
}

@media (max-width: 640px) {
  .pgrid { grid-template-columns: 1fr; }
  .btn { --bh: 50px; padding-left: 22px; font-size: 12.5px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .phero__top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ft__grid { grid-template-columns: 1fr; gap: 28px; }
  .field--half { grid-template-columns: 1fr; }
  .ui { display: none; }
  .pcard { min-height: 340px; }
  .cap__t span { letter-spacing: 0.12em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .rv, .rv-img { opacity: 1; transform: none; clip-path: none; }
  .hx__ln > span { transform: none !important; }
  .facts, .facts__i, .facts__i b, .facts__i span { opacity: 1 !important; transform: none !important; filter: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   产品详情区块
   ============================================================ */
.prod {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(30px, 5vw, 84px);
  align-items: center;
  padding: clamp(52px, 6vw, 92px) 0;
  border-top: 1px solid var(--line);
}
.prod--rev .prod__viz { order: 2; }
.prod__viz {
  position: relative;
  border-radius: 10px;
  background:
    radial-gradient(120% 100% at 76% 8%, #ffffff, rgba(255, 255, 255, 0) 58%),
    linear-gradient(158deg, #eef1f8, #dfe4f2);
  padding: clamp(22px, 2.4vw, 34px);
  min-height: clamp(330px, 34vw, 470px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.prod__viz::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: repeating-radial-gradient(circle at 62% 38%, transparent 0 76px, rgba(26, 42, 170, 0.075) 76px 77px);
  pointer-events: none;
}
.prod__viz::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(14, 17, 35, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(14, 17, 35, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 70% at 60% 40%, #000, transparent 76%);
}
.prod__vlabel {
  position: absolute;
  top: clamp(16px, 2vw, 24px);
  right: clamp(18px, 2.2vw, 28px);
  z-index: 2;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--muted-2);
  text-align: right;
}
.prod__device {
  position: relative;
  width: 96%;
  margin-left: 4%;
  transform: rotate(-9deg) translateY(-58%);
  filter: drop-shadow(0 26px 34px rgba(10, 13, 26, 0.34));
  transition: transform 1s var(--ease-out);
  z-index: 1;
}
.prod:hover .prod__vlabel {
  position: absolute;
  top: clamp(16px, 2vw, 24px);
  right: clamp(18px, 2.2vw, 28px);
  z-index: 2;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--muted-2);
  text-align: right;
}
.prod__device { transform: rotate(-6deg) translateY(-58%) scale(1.03); }

/* 产品页：包装图区块隐去浮层，避免遮挡盒面信息 */
.prod__viz--pack .ui2 { display: none; }
.prod__viz--pack { min-height: clamp(300px, 28vw, 400px); }

/* 产品页：包装图整幅居中呈现 */
.prod__device.prod__device--pack {
  width: min(100%, 495px);
  height: auto;
  aspect-ratio: 3 / 2;
  max-height: none;
  margin: 0 auto;
  transform: none;
  object-fit: contain;
  border-radius: 12px;
  filter: drop-shadow(0 26px 36px rgba(10, 13, 26, 0.26));
}
.prod__viz:hover .prod__device.prod__device--pack { transform: translateY(-6px); }

/* 软件界面 */
.ui2 {
  position: absolute;
  left: clamp(18px, 3vw, 34px);
  bottom: clamp(18px, 3vw, 30px);
  width: min(330px, 74%);
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 26px 60px -30px rgba(10, 13, 26, 0.6);
  padding: 15px 16px 14px;
  z-index: 2;
}
.ui2__top { display: flex; align-items: center; justify-content: space-between; font-size: 9.5px; letter-spacing: 0.1em; color: var(--muted); }
.ui2__top b { font-weight: 600; color: var(--ink-2); letter-spacing: 0.08em; }
.ui2__dot { width: 5px; height: 5px; border-radius: 50%; background: #37c07a; display: inline-block; margin-right: 5px; }
.ui2__h { font-family: var(--serif); font-size: 15px; margin-top: 10px; color: var(--ink); line-height: 1.3; }
.ui2__metric { font-family: var(--serif); font-size: 38px; line-height: 1; margin-top: 8px; letter-spacing: -0.01em; }
.ui2__metric small { font-family: var(--sans); font-size: 10px; letter-spacing: 0.1em; color: var(--muted); margin-left: 4px; }
.ui2__chart { margin-top: 10px; height: 58px; width: 100%; }
.ui2__chart svg { width: 100%; height: 100%; overflow: visible; }
.ui2__foot { display: flex; gap: 12px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line-2); }
.ui2__foot div { flex: 1; }
.ui2__foot span { display: block; font-size: 7.5px; letter-spacing: 0.12em; color: var(--muted-2); }
.ui2__foot b { font-family: var(--serif); font-size: 14px; font-weight: 400; }
.ui2__tags { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.ui2__tags i { font-size: 8.5px; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 999px; background: rgba(26, 42, 170, 0.07); color: var(--accent); font-style: normal; }

.prod__meta { display: flex; align-items: center; gap: 14px; }
.prod__idx { font-family: var(--serif); font-size: 12px; letter-spacing: 0.14em; color: var(--muted-2); }
.prod__cat { font-size: 10.5px; letter-spacing: 0.16em; color: var(--accent); border: 1px solid rgba(26, 42, 170, 0.26); border-radius: 999px; padding: 4px 12px; }
.prod h2 { font-size: clamp(34px, 3.6vw, 52px); margin-top: 18px; }
.prod__en { font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted-2); margin-top: 10px; }
.prod__lead { font-family: var(--serif); font-size: clamp(16px, 1.35vw, 19px); line-height: 1.85; color: var(--ink-2); margin-top: 18px; max-width: 520px; }
.prod__feats { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.prod__feats li { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 16px; font-size: 13.3px; line-height: 1.9; color: var(--muted); }
.prod__feats b { color: var(--ink); font-weight: 500; font-size: 12.5px; letter-spacing: 0.02em; }
.prod__figs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.prod__figs span { font-family: var(--serif); font-size: 12.5px; letter-spacing: 0.02em; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); }
.prod__tags { margin-top: 18px; font-size: 11.5px; letter-spacing: 0.1em; color: var(--muted-2); }

/* 产品总览矩阵 */
.matrix { width: 100%; border-collapse: collapse; }
.matrix th {
  text-align: left;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--muted);
  padding: 0 14px 14px 0;
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}
.matrix td {
  padding: 20px 14px 20px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.75;
  vertical-align: top;
}
.matrix tr { transition: background 0.35s; }
.matrix tbody tr:hover { background: rgba(26, 42, 170, 0.035); }
.matrix b { font-family: var(--serif); font-weight: 400; font-size: 16px; color: var(--ink); }
.matrix .hl { color: var(--accent); }

/* ============================================================
   技术页
   ============================================================ */
.tech-hero {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--deep);
  color: #fff;
  padding: clamp(48px, 7vw, 96px) clamp(30px, 4.5vw, 72px) clamp(40px, 5vw, 64px);
  isolation: isolate;
  min-height: clamp(400px, 52vh, 540px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.tech-hero .eyebrow { color: rgba(255, 255, 255, 0.5); }
.tech-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(760px 480px at 82% 6%, rgba(26, 42, 170, 0.6), transparent 62%),
    radial-gradient(520px 420px at 10% 96%, rgba(58, 85, 226, 0.24), transparent 70%);
  z-index: -2;
}
#eegCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.55; }
.tech-hero__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.tech-hero__txt h1 { font-size: clamp(44px, 5.4vw, 88px); }
.tech-hero h1 { font-size: clamp(44px, 6.6vw, 104px); line-height: 1.02; }
.tech-hero em { color: #8fa3ff; }
.tech-hero p { color: rgba(255, 255, 255, 0.62); font-size: 14px; line-height: 2; max-width: 380px; }
.tech-hero__meta { display: flex; gap: 30px; margin-top: 30px; font-size: 10.5px; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.44); flex-wrap: wrap; }

/* 流程 */
.pipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.pipe__i { padding: 30px 26px 0 0; position: relative; border-right: 1px solid var(--line-2); }
.pipe__i:last-child { border-right: 0; }
.pipe__i::before {
  content: "";
  position: absolute;
  top: -3.5px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(26, 42, 170, 0.12);
  transition: box-shadow 0.4s;
}
.pipe__i:hover::before { box-shadow: 0 0 0 8px rgba(26, 42, 170, 0.1); }
.pipe__no { font-family: var(--serif); font-size: 11px; letter-spacing: 0.16em; color: var(--muted-2); }
.pipe__t { font-family: var(--serif); font-size: clamp(20px, 1.8vw, 26px); margin-top: 16px; }
.pipe__e { font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-2); margin-top: 8px; }
.pipe__d { font-size: 12.8px; line-height: 1.9; color: var(--muted); margin-top: 12px; }

/* 技术指标 */
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.metrics__i { padding: 34px 24px 0 0; border-right: 1px solid rgba(255, 255, 255, 0.12); }
.metrics__i:last-child { border-right: 0; }
.metrics__i b { font-family: var(--serif); font-weight: 300; font-size: clamp(34px, 3.6vw, 54px); line-height: 1; display: block; color: #fff; }
.metrics__i b small { font-size: 0.45em; color: rgba(255, 255, 255, 0.6); }
.metrics__i span { display: block; margin-top: 12px; font-size: 11px; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.5); }

/* 引文 */
.quote {
  font-family: var(--serif);
  font-size: clamp(24px, 3.1vw, 44px);
  line-height: 1.55;
  font-weight: 300;
  max-width: 1000px;
  letter-spacing: 0.01em;
}
.quote em { color: var(--accent); }

/* 能力双列 */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); }
.duo__i { padding: 34px 40px 34px 0; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line-2); }
.duo__i:nth-child(2n) { border-right: 0; padding-left: 40px; }
.duo__i h4 { font-size: clamp(18px, 1.6vw, 23px); margin-bottom: 10px; }
.duo__i p { font-size: 13.3px; line-height: 1.95; color: var(--muted); }
.duo__i span { font-family: var(--serif); font-size: 11.5px; letter-spacing: 0.16em; color: var(--muted-2); display: block; margin-bottom: 14px; }

/* 大器件展示 */
.stage {
  position: relative;
  padding: clamp(40px, 6vw, 90px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stage img { width: 100%; filter: drop-shadow(0 40px 50px rgba(4, 8, 24, 0.45)); }
.stage__note { display: flex; justify-content: space-between; gap: 20px; margin-top: 26px; font-size: 10.5px; letter-spacing: 0.16em; color: var(--muted-2); }

/* ============================================================
   About 页
   ============================================================ */
.about-hero { position: relative; border-radius: 12px; overflow: hidden; height: clamp(400px, 62vh, 620px); }
.about-hero img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.88) brightness(0.82); }
.about-hero__ov {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 13, 26, 0.4) 0%, rgba(10, 13, 26, 0.2) 30%, rgba(10, 13, 26, 0.92) 78%, rgba(10, 13, 26, 0.97) 100%),
    linear-gradient(90deg, rgba(10, 13, 26, 0.7) 0%, rgba(10, 13, 26, 0.18) 62%, transparent 100%);
  display: flex;
  align-items: flex-end;
  padding: clamp(26px, 4vw, 56px);
}
.about-hero__ov h1 { color: #fff; font-size: clamp(34px, 4.6vw, 68px); }
.about-hero__ov p { color: rgba(255, 255, 255, 0.78); font-size: 12.5px; letter-spacing: 0.14em; margin-top: 14px; }

.kv { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.kv__i { padding: 26px 24px 0 0; border-right: 1px solid var(--line-2); }
.kv__i:nth-child(3n) { border-right: 0; }
.kv__i b { display: block; font-family: var(--serif); font-size: clamp(26px, 2.6vw, 36px); font-weight: 300; line-height: 1.1; }
.kv__i span { display: block; font-size: 11px; letter-spacing: 0.14em; color: var(--muted); margin-top: 10px; }

/* 合作方文字墙 */
.partners { display: flex; flex-wrap: wrap; gap: 10px 28px; font-family: var(--serif); font-size: clamp(15px, 1.5vw, 20px); color: var(--ink-2); }
.partners span { position: relative; padding-right: 28px; color: var(--muted); transition: color 0.3s; }
.partners span:hover { color: var(--ink); }
.partners span::after { content: "/"; position: absolute; right: 6px; color: var(--line); }

/* ============================================================
   Contact
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 100px); align-items: start; }
.map-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(150deg, #e9edf6, #dbe1f0);
  aspect-ratio: 4 / 3.4;
  display: grid;
  place-items: center;
}
.map-card svg { width: 100%; height: 100%; }
.map-card__pin {
  position: absolute;
  left: 52%;
  top: 55.5%;
  transform: translate(-5px, -50%);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.map-card__pin i {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--blue);
  margin: 0;
  box-shadow: 0 0 0 0 rgba(26, 42, 170, 0.4);
  animation: pin 2.6s ease-out infinite;
}
@keyframes pin {
  0% { box-shadow: 0 0 0 0 rgba(26, 42, 170, 0.35); }
  70% { box-shadow: 0 0 0 18px rgba(26, 42, 170, 0); }
  100% { box-shadow: 0 0 0 0 rgba(26, 42, 170, 0); }
}
.map-card__pin span {
  display: none;          /* 门牌信息已画进 SVG，避免白条压住地图 */
  font-size: 9px;
  letter-spacing: 0.08em;
  background: #fff;
  padding: 4px 9px;
  border-radius: 999px;
  box-shadow: 0 10px 30px -16px rgba(10, 13, 26, 0.6);
  white-space: nowrap;
}
.map-legend { display: flex; align-items: center; gap: 18px; margin-top: 16px; font-size: 10.5px; letter-spacing: 0.12em; color: var(--muted-2); flex-wrap: wrap; }
.map-legend span { display: inline-flex; align-items: center; gap: 7px; }
.map-legend .lg { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.map-legend .lg--dest { background: rgba(26,42,170,.14); border: 1px solid rgba(26,42,170,.55); }
.map-legend .lg--route { width: 16px; height: 0; border-radius: 0; border-top: 2px dashed #1a2aaa; }
.map-legend .lg--road { background: #ccd4e6; }
.map-legend__note { margin-left: auto; opacity: .8; }

/* ============================================================
   追加响应式
   ============================================================ */
@media (max-width: 1024px) {
  .prod, .prod--rev { grid-template-columns: 1fr; gap: 28px; }
  .prod--rev .prod__viz { order: 0; }
  .prod__viz { min-height: 300px; }
  .tech-hero__grid { grid-template-columns: 1fr; align-items: start; gap: 26px; }
  .pipe { grid-template-columns: 1fr 1fr; }
  .pipe__i { padding-bottom: 26px; border-bottom: 1px solid var(--line-2); }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metrics__i { padding-bottom: 26px; }
  .contact-grid { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr 1fr; }
  .duo { grid-template-columns: 1fr; }
  .duo__i, .duo__i:nth-child(2n) { padding: 26px 0; border-right: 0; }
  .about-hero { height: 380px; }
}
@media (max-width: 640px) {
  .pipe { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .matrix { display: block; overflow-x: auto; white-space: nowrap; }
  .prod__feats li { grid-template-columns: 1fr; gap: 2px; }
  .prod__viz { min-height: 282px; padding: 16px; }
  .prod__device { width: 94%; margin-left: 3%; transform: rotate(-12deg) translateY(-46%); }
  .prod:hover .prod__device { transform: rotate(-10deg) translateY(-46%) scale(1.02); }
  .ui2__foot { display: none; }
  .prod__vlabel { font-size: 8px; letter-spacing: 0.14em; }
  .ui2 { width: 76%; left: 12px; bottom: 10px; padding: 12px 13px 11px; border-radius: 10px; }
  .ui2__h { font-size: 12px; margin-top: 7px; }
  .ui2__metric { font-size: 27px; }
  .ui2__chart { height: 38px; margin-top: 6px; }
  .ui2__foot { margin-top: 7px; padding-top: 7px; }
  .ui2__tags { display: none; }
}

/* ============================================================
   首页 · 纸面 / 深空 分屏 Hero
   ============================================================ */
.hero2 { padding: 116px clamp(14px, 2.1vw, 30px) 26px; position: relative; }
.hero2 > .hx,
.hero2 > .hx-facts { max-width: 1440px; margin-left: auto; margin-right: auto; }

.hx {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  min-height: clamp(440px, 58vh, 640px);
  background: transparent;
}
.hx__l { --hxpr: clamp(24px, 3.2vw, 56px); position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: clamp(20px, 2.6vw, 48px) var(--hxpr) clamp(20px, 2.6vw, 42px) 0; }
.hx__lpad { max-width: 640px; }

.hx__t { font-size: clamp(64px, 8vw, 120px); line-height: 0.97; letter-spacing: 0.01em; }
.hx__ln { display: block; width: max-content; overflow: hidden; }
.hx__ln > span { display: block; transform: translateY(108%); animation: rise 2.1s cubic-bezier(0.19, 0.62, 0.24, 1) 0.1s forwards; }
@keyframes rise { to { transform: translateY(0); } }
@keyframes slideInLeft { to { transform: translateX(0); } }
/* 第二行改为从右向左滑入 */
.hx__ln:nth-child(2) > span {
  transform: translateX(100%);
  animation-name: slideInLeft;
  animation-delay: 0.3s;
}
/* 第二行缩进一个字宽（含 0.01em 字距），使「即」与「动」上下对齐 */
.hx__ln:nth-child(2) { margin-left: calc(1em + 0.01em); }

.hx__en {
  margin-top: 18px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(13px, 1.15vw, 16px);
  letter-spacing: 0.1em;
  color: var(--muted);
}
.hx__d { margin-top: 24px; max-width: 545px; font-size: 14.5px; line-height: 2; color: var(--ink-2); }
.hx__acts { margin-top: clamp(22px, 2.6vw, 30px); display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.hx__meta {
  width: calc(100% + var(--hxpr, 0px));
  margin-top: clamp(26px, 3.4vw, 44px);
  display: flex;
  align-items: center;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--muted-2);
}
.hx__meta i { flex: 1; height: 1px; background: var(--line); margin: 0 16px; }

.hx__alt {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  color: var(--ink-2);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  transition: color 0.3s, border-color 0.3s, gap 0.4s var(--ease);
}
.hx__alt svg { width: 13px; height: 13px; }
.hx__alt:hover { color: var(--accent); border-color: var(--accent); gap: 14px; }

/* 右侧深空面板 */
.hx__r {
  position: relative;
  background:
    radial-gradient(132% 108% at 14% 2%, rgba(56, 84, 178, 0.62) 0%, rgba(14, 20, 48, 0) 62%),
    radial-gradient(70% 46% at 62% 108%, rgba(40, 62, 150, 0.34) 0%, rgba(10, 14, 34, 0) 70%),
    linear-gradient(158deg, #1b2757 0%, #0d1435 46%, #070a18 100%);
  overflow: visible;
  isolation: isolate;
  border-radius: 14px 14px 14px 104px;
  box-shadow:
    0 55px 90px -70px rgba(10, 13, 26, 0.55),
    0 0 150px -14px rgba(58, 88, 226, 0.5),
    inset 0 1px 0 rgba(160, 185, 255, 0.14);
}
.hx__clip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(620px 470px at 58% 46%, rgba(58, 85, 226, 0.5), transparent 62%),
    radial-gradient(440px 340px at 92% 0%, rgba(26, 42, 170, 0.48), transparent 66%),
    radial-gradient(520px 420px at 2% 100%, rgba(20, 30, 90, 0.66), transparent 70%);
}
.hx__clip::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(72% 72% at 50% 50%, #000 18%, transparent 80%);
  mask-image: radial-gradient(72% 72% at 50% 50%, #000 18%, transparent 80%);
}
#heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.7; }

.hx__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  z-index: 0;
}

.hx__rings { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; }
.hx__rings i { position: absolute; border-radius: 50%; border: 1px solid rgba(140, 170, 255, 0.26); }
.hx__rings i:nth-child(1) { width: 290px; height: 290px; }
.hx__rings i:nth-child(2) { width: 420px; height: 420px; opacity: 0.62; }
.hx__rings i:nth-child(3) { width: 560px; height: 560px; opacity: 0.3; }

.hx__band {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 138%;
  left: 29%;
  z-index: 2;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-18deg);
  filter: brightness(1.1) contrast(1.06)
    drop-shadow(0 0 1.5px rgba(178, 200, 255, 0.75))
    drop-shadow(0 0 6px rgba(120, 150, 255, 0.34))
    drop-shadow(0 22px 38px rgba(0, 0, 0, 0.68))
    drop-shadow(0 0 78px rgba(58, 85, 226, 0.46));
  animation: hxfloat 11s ease-in-out infinite;
}
@keyframes hxfloat {
  0%, 100% { transform: translate(-50%, -50%) rotate(-18deg); }
  50% { transform: translate(-50%, -53%) rotate(-15.5deg); }
}

.hx__hud {
  position: absolute;
  z-index: 3;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.52);
  line-height: 1.9;
}
.hx__hud span { display: block; }
.hx__hud b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.95);
}
.hx__hud--tl { left: clamp(18px, 2.4vw, 34px); top: clamp(18px, 2.4vw, 32px); }
.hx__hud--tr { right: clamp(18px, 2.4vw, 34px); top: clamp(18px, 2.4vw, 32px); text-align: right; }

/* 面板底部数据带：标签共一行，数字共基线 */
.hx__data {
  position: absolute;
  left: clamp(18px, 2.4vw, 34px);
  right: clamp(18px, 2.4vw, 34px);
  bottom: clamp(24px, 3.4vw, 46px);
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 16px;
  row-gap: 9px;
}
.hx__data-k {
  grid-row: 1;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}
.hx__data-k--r { grid-column: 2; justify-self: end; }
.hx__data-v {
  grid-row: 2;
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1;
  text-shadow: 0 2px 18px rgba(2, 4, 12, 0.6);
}
.hx__data-v--sm { grid-column: 1; font-size: clamp(18px, 1.7vw, 24px); color: rgba(255, 255, 255, 0.9); }
.hx__data-v--lg { grid-column: 2; justify-self: end; font-size: clamp(30px, 3.2vw, 46px); letter-spacing: -0.015em; color: #fff; }
.hx__data-v small {
  font-family: var(--sans);
  font-size: 0.34em;
  letter-spacing: 0.12em;
  margin-left: 0.22em;
  color: rgba(255, 255, 255, 0.6);
}
.hx__data-v--lg i {
  font-style: normal;
  font-size: 0.56em;
  margin-right: 0.06em;
  color: rgba(255, 255, 255, 0.78);
}

.hx__scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 140px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(143, 163, 255, 0.13), transparent);
  animation: hxscan 8s linear infinite;
}
@keyframes hxscan { 0% { top: -140px; } 100% { top: 100%; } }

.hx__mark {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  writing-mode: vertical-rl;
  font-size: 8px;
  letter-spacing: 0.42em;
  color: rgba(255, 255, 255, 0.22);
}

.hx-facts { margin-top: clamp(18px, 2.2vw, 32px); }
.hx-facts .facts { margin-top: 0; }

/* ---------- 滚动字带 ---------- */
.ticker {
  margin-top: clamp(28px, 3.6vw, 54px);
  background: var(--deep);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.ticker__t { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.ticker__g { display: flex; align-items: center; flex: none; }
.ticker__g span {
  font-family: var(--serif);
  font-size: clamp(14px, 1.35vw, 20px);
  letter-spacing: 0.12em;
  padding: 17px 0;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.82);
}
.ticker__g b { color: var(--blue-2); font-size: 7px; margin: 0 26px; font-weight: 400; }
@keyframes marquee { to { transform: translateX(-50%); } }
.ticker:hover .ticker__t { animation-play-state: paused; }

/* ============================================================
   四层架构
   ============================================================ */
.stack {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: var(--deep);
  color: #fff;
  padding: clamp(30px, 4vw, 64px);
  isolation: isolate;
}
.stack::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(760px 520px at 84% -8%, rgba(26, 42, 170, 0.6), transparent 64%),
    radial-gradient(560px 460px at -4% 104%, rgba(58, 85, 226, 0.2), transparent 70%);
}
.stack::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 92px 92px;
  -webkit-mask-image: radial-gradient(85% 76% at 50% 40%, #000, transparent 82%);
  mask-image: radial-gradient(85% 76% at 50% 40%, #000, transparent 82%);
}
.stack .eyebrow { color: rgba(255, 255, 255, 0.5); }
.stack em { color: #8fa3ff; }
.stack__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: clamp(26px, 3.4vw, 48px);
}
.stack__note { max-width: 330px; }
.stack__note p { color: rgba(255, 255, 255, 0.6); }
.stack__note .link-arrow { color: #fff; border-color: rgba(255, 255, 255, 0.3); margin-top: 20px; }
.stack__list { border-top: 1px solid rgba(255, 255, 255, 0.16); }

.layer {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(150px, 0.62fr) minmax(0, 1.38fr) 40px;
  gap: 24px;
  align-items: center;
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transition: padding 0.5s var(--ease);
}
.layer::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(clamp(30px, 4vw, 64px) * -1);
  right: calc(clamp(30px, 4vw, 64px) * -1);
  background: linear-gradient(90deg, rgba(58, 85, 226, 0.34), rgba(58, 85, 226, 0));
  opacity: 0;
  transition: opacity 0.45s;
}
.layer:hover::before { opacity: 1; }
.layer:hover { padding-left: 14px; }
.layer__no { font-family: var(--serif); font-size: 11px; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.38); }
.layer__t { font-family: var(--serif); font-size: clamp(22px, 2.1vw, 32px); line-height: 1.2; }
.layer__t small {
  display: block;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 7px;
}
.layer__d { font-size: 12.8px; line-height: 1.9; color: rgba(255, 255, 255, 0.55); }
.layer__i { justify-self: end; color: rgba(255, 255, 255, 0.45); transition: 0.4s var(--ease); }
.layer__i svg { width: 18px; height: 18px; }
.layer:hover .layer__i { color: #fff; transform: translate(4px, -4px); }
.stack__foot {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 22px;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.32);
}

/* ============================================================
   产品卡增强
   ============================================================ */
.pcard::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(58% 58% at 78% 8%, rgba(26, 42, 170, 0.12), transparent 72%);
  opacity: 0;
  transition: opacity 0.55s var(--ease);
}
.pcard:hover::after { opacity: 1; }

.pcard--wide { grid-column: span 2; }
/* 该卡片不铺底色，让页面动态线场直接透上来 */
.pcard--all { background: transparent; border: 1px solid rgba(255, 255, 255, 0.26); }
/* 框体高度收到行高的 2/3，留出的空间交给背景 */
@media (min-width: 900px) {
  .pcard--all { align-self: start; height: 75%; min-height: fit-content; }
  .pcard--all .pcard__foot { margin-top: auto; }
}
.pcard--all .pcard__idx { color: rgba(255, 255, 255, 0.4); }
.pcard--all .pcard__cat { color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.22); }
.pcard--all .pcard__name { color: #fff; margin-top: 22px; font-size: clamp(28px, 2.9vw, 42px); }
.pcard--all .pcard__desc {
  color: rgba(255, 255, 255, 0.62);
  font-size: 17px;
  line-height: 1.8;
  max-width: 660px;
}
.pcard--all .pcard__foot { margin-top: auto; border-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.6); }
.pcard--all .pcard__foot i { border-color: rgba(255, 255, 255, 0.3); }
.pcard__names { display: flex; flex-wrap: wrap; margin-top: 20px; }
.pcard__names span { position: relative; font-size: 13.5px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.5); padding-right: 20px; }
.pcard__names span::after { content: "/"; position: absolute; right: 7px; color: rgba(255, 255, 255, 0.22); }
.pcard__names span:last-child::after { display: none; }
.pcard--all::after { background: radial-gradient(60% 70% at 74% 10%, rgba(58, 85, 226, 0.42), transparent 70%); }
.pcard--all:hover { background: rgba(255, 255, 255, 0.03); }
.pcard--all:hover .pcard__band { transform: rotate(-6deg) scale(1.04); }

/* ============================================================
   全幅影像带
   ============================================================ */

/* ---------- 首页增强 · 响应式 ---------- */
@media (max-width: 1180px) {
  .pcard--wide { grid-column: span 2; }
}
@media (max-width: 1024px) {
  .hx { grid-template-columns: 1fr; min-height: auto; }
  .hx__meta { position: static; margin-top: 34px; }
  .hx__l { padding-right: 0; }
  .hx__r { min-height: 340px; }
  .hx__band { width: 118%; left: 44%; }
  .hx__lpad { max-width: none; }
  .hx__mark { display: none; }
  .stack__head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .layer { position: relative; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; }
  .layer__d { grid-column: 2; margin-top: 4px; padding-right: 26px; }
  .layer__i { position: absolute; right: 0; top: clamp(20px, 2.4vw, 30px); }
}
@media (max-width: 640px) {
  .hero2 { padding-top: 86px; }
  .hx__l { padding: 32px 22px 28px; }
  .hx__t { font-size: clamp(46px, 13.5vw, 58px); }
  .hx__meta { gap: 9px; letter-spacing: 0.14em; font-size: 8.5px; }
  .hx__r { min-height: 296px; }
  .hx__band { width: 112%; left: 43%; top: 46%; }
  .hx__hud { font-size: 7.5px; letter-spacing: 0.14em; }
  .hx__hud b { font-size: 11px; }
  .layer { grid-template-columns: 30px minmax(0, 1fr); }
  .layer__d { font-size: 12px; }
  .pcard--wide { grid-column: span 1; }
  .pcard--all .pcard__name { font-size: 28px; }
}

/* ============================================================
   神经元背景（Canvas 2D 丝状网络）
   ============================================================ */
#neuralBg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  opacity: 0.32;
  /* 浅色区：视频的白底被 multiply 吃掉，只留金/蓝线条 */
  mix-blend-mode: multiply;
  transition: opacity 0.9s var(--ease), filter 0.9s var(--ease);
}
/* 深色区：反相成"深底亮线"，与站点深色面板同一气质 */
body.tone-dark #neuralBg {
  filter: invert(1) hue-rotate(185deg) saturate(0.85) brightness(1.05);
  mix-blend-mode: screen;
  opacity: 0.24;
}
.hx__lpad { position: relative; z-index: 1; }

@media (max-height: 780px) and (min-width: 1025px) {
  .hero2 { padding-top: 112px; }
  .hx { min-height: clamp(360px, 54vh, 500px); }
  .hx__l { padding: clamp(22px, 2.6vw, 40px) clamp(26px, 3.4vw, 56px); }
  .hx__t { font-size: clamp(46px, 6.2vw, 84px); }
  .hx__d { margin-top: 16px; }
  .hx__acts { margin-top: 20px; }
  .hx__meta { margin-top: 18px; }
  .hx-facts { margin-top: 16px; }
}

/* 中等宽度：收窄说明文字并回收头环，保证与文案之间留出呼吸 */
@media (max-width: 1240px) and (min-width: 1025px) {
  .hx__d { max-width: 440px; }
  .hx__band { width: 130%; left: 37%; }
}

@media (max-width: 640px) {
  .hx__r { border-radius: 12px 12px 12px 64px; }
}

/* ============================================================
   全局色调：同一张背景在明暗之间过渡
   用 @property 让色板变量本身可动画，全站颜色连续渐变
   ============================================================ */
@property --paper   { syntax: "<color>"; inherits: true; initial-value: #f4f5f9; }
@property --paper-2 { syntax: "<color>"; inherits: true; initial-value: #eceef5; }
@property --paper-3 { syntax: "<color>"; inherits: true; initial-value: #e3e7f1; }
@property --ink     { syntax: "<color>"; inherits: true; initial-value: #0e1123; }
@property --ink-2   { syntax: "<color>"; inherits: true; initial-value: #2b3050; }
@property --muted   { syntax: "<color>"; inherits: true; initial-value: #6f7699; }
@property --muted-2 { syntax: "<color>"; inherits: true; initial-value: #9aa0bd; }
@property --line    { syntax: "<color>"; inherits: true; initial-value: rgba(14,17,35,.13); }
@property --line-2  { syntax: "<color>"; inherits: true; initial-value: rgba(14,17,35,.07); }

body {
  background: var(--paper);
  transition:
    --paper 0.85s var(--ease), --paper-2 0.85s var(--ease), --paper-3 0.85s var(--ease),
    --ink 0.85s var(--ease), --ink-2 0.85s var(--ease),
    --muted 0.85s var(--ease), --muted-2 0.85s var(--ease),
    --line 0.85s var(--ease), --line-2 0.85s var(--ease);
}

/* 深色调分档：白字不必配纯黑，按区块指定深度与色相 */
body.tone-dark[data-tone="ink"] {
  --paper: #080b16;
  --paper-2: #0b0f1f;
  --paper-3: #101530;
}
body.tone-dark[data-tone="deep"] {
  --paper: #0a1440;
  --paper-2: #0d1a52;
  --paper-3: #122061;
  --line: rgba(255, 255, 255, 0.17);
  --line-2: rgba(255, 255, 255, 0.09);
}
body.tone-dark[data-tone="brand"] {
  --paper: #16239e;
  --paper-2: #1b2aae;
  --paper-3: #2233bd;
  --muted: rgba(226, 232, 255, 0.72);
  --line: rgba(255, 255, 255, 0.26);
  --line-2: rgba(255, 255, 255, 0.14);
  --accent: #b9c6ff;
}

body.tone-dark {
  --paper: #080b16;
  --paper-2: #0b0f1f;
  --paper-3: #101530;
  --ink: #f5f7ff;
  --ink-2: rgba(237, 241, 255, 0.82);
  --muted: rgba(198, 208, 238, 0.60);
  --muted-2: rgba(172, 184, 216, 0.40);
  --line: rgba(255, 255, 255, 0.14);
  --line-2: rgba(255, 255, 255, 0.07);
  --accent: #7f96ff;
}

/* 神经元底图跟着变亮，避免在深底上消失 */
#neuralBg { transition: filter 0.85s var(--ease), opacity 0.85s var(--ease); }
/* 视频背景的深色处理见上一条 body.tone-dark #neuralBg */

/* 深色态内的 .dark 卡片：跟随当前色调取更深一档，不能在品牌蓝上留一块纯黑 */
body.tone-dark .dark { background: color-mix(in srgb, var(--paper) 78%, #000); }
/* 品牌蓝区块让内容直接坐在蓝底上，不再套一层卡片 */
body.tone-dark[data-tone="brand"] .dark { background: transparent; }

/* 卡片内的玻璃面板：深色底上换成深玻璃，内部文字由变量自动反色 */
body.tone-dark .ui {
  background: color-mix(in srgb, var(--paper-2) 82%, transparent);
  border-color: rgba(255, 255, 255, 0.16);
}
body.tone-dark .ui__row i { background: var(--bar, var(--accent)); }

/* 深色底上的浅色按钮：文字不能被 --ink 带走 */
body.tone-dark .btn--light { background: rgba(255, 255, 255, 0.92); color: #0e1123; }

/* 页头：logo 与吸顶底随色调反转 */
.hd__brand { position: relative; }
.lg { transition: opacity 0.5s var(--ease); }
.hd__brand .lg--white { position: absolute; inset: 0; opacity: 0; }
body.tone-dark .hd__brand .lg--blue { opacity: 1; }
body.tone-dark .hd__brand .lg--white { opacity: 0; }
body.tone-dark .site-head.is-stuck {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 40px -28px rgba(14, 17, 35, 0.35);
}
body.tone-dark .site-head::after { background: var(--line); }

/* ============================================================
   首屏·沉浸版：整张图铺底，文字压在图片之上
   ============================================================ */
.hero2--c {
  position: relative;
  /* 半透明白：底色读作白，线场保留为隐约的纹理 */
  background: rgba(255, 255, 255, 0.58);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(112px, 11vw, 140px) clamp(14px, 2.1vw, 30px) clamp(44px, 5vw, 72px);
}

/* 图片作为一张居中卡片，四周露出动态背景 */
.hx__stage {
  position: relative;
  width: min(96vw, 1400px);
  aspect-ratio: 2.28 / 1;
  min-height: min(560px, 68vw);   /* 窄屏时保证文字装得下 */
  margin: 0 auto;
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 50px 110px -70px rgba(0, 0, 0, 0.75);
}

/* 背景层 */
.hx__bg { position: absolute; inset: 0; z-index: 0; }
.hx__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 34%;
  transform: scale(1.02);
}
/* 压暗遮罩：保证白字可读，同时保留画面 */
.hx__scrim {
  position: absolute;
  inset: 0;
  /* 白色渐变蒙版：左侧承载深色文字，靠近人物一侧渐隐 */
  background:
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.97) 0%,
      rgba(255, 255, 255, 0.94) 24%,
      rgba(255, 255, 255, 0.74) 40%,
      rgba(255, 255, 255, 0.26) 58%,
      rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0.34) 100%);
}

.hero2--c .hx{ min-height:0; height:100%; }
.hero2--c > .hx,
.hero2--c > .hx-facts { position: relative; z-index: 1; }
/* 首屏是 flex 列容器，margin:auto 会取消横向拉伸导致整体居中，这里强制撑满 */
.hero2--c > .hx { width: 100%; margin-left: 0; margin-right: 0; }

.hero2--c .hx--c {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(34px, 4vw, 58px) clamp(22px, 2.4vw, 36px) clamp(24px, 2.6vw, 34px);
  text-align: left;
}
.hero2--c .hx__l--c { display: flex; flex-direction: column; height: 100%; padding: 0; }
.hero2--c .hx__lpad {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: clamp(300px, 30vw, 440px);
  margin: 0;
}
.hero2--c .hx__t { font-size: clamp(42px, 5.4vw, 78px); letter-spacing: 0.02em; font-weight: 700; line-height: 1.04; }
.hero2--c .hx__ln { width: auto; overflow: hidden; }
.hero2--c .hx__ln:nth-child(2) { margin-left: 0; }
.hero2--c .hx__d { max-width: 380px; margin-left: 0; margin-top: 16px; font-size: 14px; line-height: 1.8; text-wrap: pretty; }
.hero2--c .hx__acts {
  order: 2;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 14px;
  margin-top: auto;
}
.hero2--c .hx__meta {
  order: 1;
  width: max-content;
  max-width: none;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  margin-top: clamp(16px, 2vw, 26px);
  font-size: 11px;
  letter-spacing: 0.12em;
}
.hero2--c .hx__meta i { flex: 0 0 clamp(16px, 1.8vw, 28px); margin: 0; background: rgba(16, 25, 47, 0.22); }
/* 第二行整体换行 */
.hero2--c .hx__m2 {
  flex: 0 0 100%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.hero2--c .hx__m2 i {
  flex: 0 0 clamp(16px, 1.8vw, 28px);
  height: 1px;
  background: rgba(16, 25, 47, 0.22);
}

/* 白色蒙版之上，文字为深墨 */
.hero2--c .hx__t { color: #10192f; }
.hero2--c .hx__t em { color: #3f55d6; }
.hero2--c .hx__d { color: #3d465c; font-size: 14px; }
.hero2--c .hx__en { color: #76809a; font-size: clamp(14px, 1.25vw, 17px); white-space: nowrap; }
.hero2--c .hx__meta { color: #8b93a8; }
.hero2--c .hx__meta i { background: rgba(16, 25, 47, 0.22); }
.hero2--c .hx__alt { color: #10192f; border-bottom-color: rgba(16, 25, 47, 0.25); }

/* 数据条压在图片下缘 */
/* 数据条：首屏之后的独立一段 */
.facts-band { max-width: 1440px; margin: 0 auto; padding: clamp(40px, 5vw, 68px) var(--pad) 0; }

@media (max-width: 640px) {
  /* 竖屏：卡片改为纵向占满，文字放在下半部 */
  .hx__stage { width: 100%; aspect-ratio: auto; min-height: 560px; }
  .hero2--c .hx--c { justify-content: flex-end; padding: 26px 24px 32px; }
  .hero2--c .hx__lpad { max-width: none; }
  .hero2--c .hx__t { font-size: clamp(30px, 8.4vw, 42px); }
  .hero2--c .hx__d { max-width: none; font-size: 12.5px; }
  .hero2--c .hx__meta { width: auto; max-width: 100%; font-size: 9px; letter-spacing: 0.1em; flex-wrap: wrap; }
  .hero2--c .hx__meta i { flex: 0 0 16px; }
  .hero2--c .hx__acts { flex-direction: column; align-items: flex-start; gap: 14px; }
  /* 竖屏下把焦点移到人物面部，避免中间只露出躯干 */
  .hero2--c .hx__bg img { object-position: 58% 26%; }
  .hero2--c .hx__scrim {
    /* 竖屏文字上下都有，白色蒙版两端加重 */
    background:
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.90) 0%,
        rgba(255, 255, 255, 0.80) 30%,
        rgba(255, 255, 255, 0.56) 56%,
        rgba(255, 255, 255, 0.90) 100%);
  }
}

/* ============================================================
   展厅（左文右图）
   ============================================================ */
.gal{
  position:relative;
  max-width:1440px;
  margin:0 auto;
  padding:clamp(64px, 8.5vw, 132px) calc(var(--pad) + clamp(0px, 2vw, 34px)) clamp(64px, 8.5vw, 132px) var(--pad);
}
/* 该区块铺纸白，遮掉动态线网，保证图文的干净留白 */
.gal{
  background:var(--paper);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
}
.gal__grid{ position:relative; z-index:1; }
.gal__grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.06fr);
  gap:clamp(32px, 5vw, 88px);
  align-items:center;
}
.gal__eb{
  display:inline-flex; align-items:center; gap:14px;
  color:var(--muted);
}
.gal__eb::before{
  content:""; width:30px; height:1px;
  background:linear-gradient(90deg, transparent, var(--line-2, rgba(14,17,35,.28)));
}
.gal__eb i{
  font-style:normal;
  font-family:var(--serif);
  letter-spacing:.06em;
  font-size:13px;
  color:var(--muted-2);
}
.gal__t{
  margin-top:clamp(18px, 2.2vw, 28px);
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(32px, 4.4vw, 62px);
  line-height:1.2;
  letter-spacing:.01em;
  color:var(--ink);
}
.gal__t em{ font-style:normal; color:var(--accent); }
.gal__d{
  margin-top:clamp(20px, 2.4vw, 30px);
  max-width:430px;
  font-size:14px; line-height:2;
  color:var(--ink-2);
}
.gal__acts{
  display:flex; align-items:center;
  gap:clamp(16px, 2vw, 26px);
  margin-top:clamp(26px, 3vw, 38px);
  flex-wrap:wrap;
}
.gal__alt{
  font-size:12.5px; letter-spacing:.06em;
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.gal__alt:hover{ color:var(--ink); border-color:var(--ink); }

.gal__fig{ margin:0; }
.gal__frame{
  background:#fff;
  padding:clamp(8px, 1.1vw, 16px);
  box-shadow:0 34px 80px -56px rgba(14,17,35,.5), 0 2px 10px -6px rgba(14,17,35,.18);
}
.gal__frame img{ display:block; width:100%; height:auto; }
.gal__fig figcaption{
  margin-top:clamp(12px, 1.4vw, 18px);
  font-size:9.5px; letter-spacing:.24em;
  color:var(--muted-2);
}

@media (max-width:640px){
  /* 窄屏放不下整行，拆成两行排 */
  .gal__eb{ display:block; letter-spacing:.2em; font-size:10px; }
  .gal__eb::before{ display:none; }
  .gal__eb i{ display:block; margin-top:8px; font-size:12.5px; letter-spacing:.04em; }
}

@media (max-width:900px){
  .gal__grid{ grid-template-columns:1fr; gap:clamp(26px,5vw,40px); }
  .gal__d{ max-width:none; }
  .gal__t{ font-size:clamp(30px, 8.2vw, 46px); }
}


/* ============================================================
   脑机技术页 · 首屏：全幅动态背景 + 圆形白场扩散
   ============================================================ */
.tech2{
  position:relative;
  min-height:170vh;
}
.tech2__stick{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
}

.tech2__in{
  --p:0; --q:0; --r:0px; --cx:50%; --cy:50%;
  position:relative;
  width:100%;
  height:100%;
}

/* 两层内容完全同构 */
.tsc{ position:absolute; inset:0; }
.tsc--dark{ z-index:1; }
.tsc--light{ z-index:3; }
.tsc__in{
  position:absolute; inset:0;
  max-width:1440px;
  margin:0 auto;
  padding:clamp(90px, 11vh, 118px) var(--pad) clamp(28px, 4vh, 48px);
  display:grid;
  grid-template-columns:minmax(0, .94fr) minmax(0, 1.06fr);
  gap:clamp(20px, 3vw, 52px);
  align-items:center;
  /* 视差只作用在内容上，白场和遮罩保持满屏 */
  transform:translateY(calc(var(--p) * 96px));
  will-change:transform;
}

/* 白场：保留动态底图的微光，不是死白 */
.tsc__veil{
  position:absolute; inset:0;
  z-index:2;
  pointer-events:none;
  background:rgba(246, 249, 255, 0.90);
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--cx) var(--cy),
      #000 0, #000 max(0px, calc(100% - 90px)), transparent 100%);
          mask-image:radial-gradient(circle var(--r) at var(--cx) var(--cy),
      #000 0, #000 max(0px, calc(100% - 90px)), transparent 100%);
  will-change:mask-image;
}
.tsc--light{
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--cx) var(--cy),
      #000 0, #000 max(0px, calc(100% - 90px)), transparent 100%);
          mask-image:radial-gradient(circle var(--r) at var(--cx) var(--cy),
      #000 0, #000 max(0px, calc(100% - 90px)), transparent 100%);
  will-change:mask-image;
}

/* —— 文案：暗场 —— */
.tech2__txt{ max-width:580px; margin-left:clamp(0px, 2.8vw, 44px); }
.tech2__txt .eyebrow{ color:rgba(255,255,255,.5); }
.tech2__h{
  margin:20px 0 0;
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(44px, 6vw, 96px);
  line-height:1.06;
  letter-spacing:.01em;
  color:#fff;
}
.tech2__h em{ font-style:normal; color:#8fa3ff; }
.tech2__p{
  margin:clamp(22px, 3vh, 34px) 0 0;
  max-width:430px;
  font-size:14px;
  line-height:2;
  color:rgba(255,255,255,.62);
}
.tech2__meta{
  display:flex; flex-wrap:wrap;
  gap:12px 26px;
  margin-top:clamp(22px, 3vh, 32px);
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.14);
  max-width:430px;
  font-size:10px; letter-spacing:.2em;
  color:rgba(255,255,255,.44);
}

/* —— 文案：白场（跟随反转） —— */
.tsc--light .tech2__txt .eyebrow{ color:#8a8272; }
.tsc--light .tech2__h{ color:#10192f; }
.tsc--light .tech2__h em{ color:#2f45c8; }
.tsc--light .tech2__p{ color:#4a5163; }
.tsc--light .tech2__meta{
  border-top-color:rgba(16,25,47,.14);
  color:#7d8496;
}

/* —— 产品舞台 —— */
.sense{
  position:relative;
  height:min(76vh, 660px);
  /* 两张图作为整体：上移 + 缩到 2/3，缩到位后不再变化 */
  transform:translateY(calc((1 - var(--q, 0)) * 76px)) scale(calc(1 - var(--q, 0) * 0.3333));
  transform-origin:50% 60%;
  will-change:transform;
}
.sense__disc{
  position:absolute;
  right:26%; top:-11%;
  width:clamp(136px, 13.6vw, 202px);
  aspect-ratio:1;
  border-radius:50%;
  z-index:2;
}
.sense__disc img{
  display:block; width:100%; height:100%;
  border-radius:50%;
  filter:drop-shadow(0 18px 42px rgba(0,0,0,.45));
}
.sense__ring{
  position:absolute; inset:-15%;
  border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,214,160,.26) 0%, rgba(255,214,160,.07) 46%, transparent 72%);
  filter:blur(7px);
  animation:techRing 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes techRing{
  0%,100%{ transform:scale(1); opacity:.72 }
  50%{ transform:scale(1.13); opacity:1 }
}

.sense__diag{
  position:absolute;
  right:20%; bottom:0;
  height:80%; width:auto; max-width:none;
  pointer-events:none; user-select:none;
}
.tsc--dark .sense__diag{
  opacity:.13;
  filter:grayscale(.7) brightness(.7);
}

.tech2__hint{
  position:absolute;
  right:var(--pad); bottom:clamp(16px, 2.6vh, 28px);
  z-index:4;
  font-size:9.5px; letter-spacing:.24em;
  color:rgba(255,255,255,.42);
  transition:opacity .35s var(--ease);
  pointer-events:none;
}

@media (max-width:900px){
  .tech2{ min-height:auto; }
  .tech2__stick{ position:static; height:auto; padding:clamp(96px,14vw,120px) 0 clamp(40px,8vw,64px); }
  .tech2__in{ transform:none; }
  .tsc{ position:relative; }
  .tsc--light{ position:absolute; inset:0; }
  .tsc__in{
    position:relative; inset:auto;
    display:block;
    padding:0 var(--pad);
    transform:none;              /* 窄屏不位移，否则白层与暗层错位 */
  }
  .tech2__h{ font-size:clamp(34px, 9.6vw, 52px); }
  .tech2__p, .tech2__meta{ max-width:none; }
  .sense{ height:auto; margin-top:30px; transform:none; }   /* 窄屏不缩放 */
  .sense__disc{ right:auto; left:-2%; top:0; width:clamp(70px, 19vw, 96px); }
  .sense__diag{ position:relative; right:auto; bottom:auto; height:auto; width:100%; max-width:100%; transform:none; }
  .tech2__hint{ display:none; }
}

/* ============================================================
   产品页 · 左右交叉入场（滚动驱动，脚本逐帧写入 transform）
   ============================================================ */
.prod-anim{
  overflow-x:clip;
  transform-origin:50% 100%;      /* 以底边为轴翻起 */
  will-change:transform, opacity;
  backface-visibility:hidden;
}
.prod-anim .prod__viz,
.prod-anim .prod__body{
  opacity:1;
  transform:none;
  transition:none;               /* 覆盖 .rv / .rv-img */
}
/* reduced-motion 由脚本收敛幅度处理，这里不再强制关闭（否则整页没有出场） */
/* 出场动画统一由 products.html 的内联脚本驱动（避免 CSS 与 JS 同时存在时的兼容性歧义） */

/* ============================================================
   关于我们 · 首屏时间墙（滚动驱动，节点自下而上点亮）
   ============================================================ */
.hist{
  position:relative;
  min-height:270vh;              /* 滚动跑道：走完才进入下一块 */
  background:none;               /* 不再铺整块遮罩，文字直接压在动态背景上 */
}
.hist__stick{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hist__in{
  width:100%;
  max-width:1560px;
  margin:0 auto;
  padding:clamp(86px, 9.5vh, 108px) clamp(18px, 2.2vw, 34px) clamp(26px, 4vh, 46px) var(--pad);
  display:grid;
  grid-template-columns:minmax(0, .98fr) minmax(0, 1.02fr);
  gap:clamp(20px, 3vw, 48px);
  align-items:center;
}
.hist__txt{ position:relative; z-index:1; margin-left:clamp(0px, 3.6vw, 64px); }
.hist__h{ white-space:nowrap; }
.hist__txt::before{
  content:"";
  position:absolute;
  inset:-90px -140px -90px -90px;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(58% 52% at 34% 46%,
    rgba(4,10,32,.66) 0%,
    rgba(4,10,32,.42) 42%,
    rgba(4,10,32,.16) 66%,
    rgba(4,10,32,0) 100%);
}

/* —— 左侧文案 —— */
.hist__h{
  margin:20px 0 0;
  text-shadow:0 2px 30px rgba(3,8,26,.6), 0 0 70px rgba(3,8,26,.45);
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(44px, 5.8vw, 94px);
  line-height:1.08;
  color:#fff;
}
.hist__h em{ font-style:normal; color:#8fa3ff; }
.hist__sub{
  margin:20px 0 0;
  font-size:13.5px;
  letter-spacing:.06em;
  color:rgba(255,255,255,.55);
}
.hist__now{
  display:flex;
  align-items:baseline;
  gap:16px;
  margin-top:clamp(26px, 5vh, 54px);
}
.hist__now-yr{
  font-family:var(--serif);
  font-size:clamp(30px, 3vw, 44px);
  color:#e8c25a;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.hist__now-lb{
  font-size:11px;
  letter-spacing:.22em;
  color:rgba(255,255,255,.42);
}

/* —— 右侧时间轴 —— */
.hist__tl{
  position:relative;
  padding-left:46px;
  max-width:660px;
  justify-self:end;            /* 贴住右栏外缘，整体更靠右 */
  width:100%;
}
/* 压暗背景视频，保证时间轴文字可读 */
.hist__tl::before{
  content:"";
  position:absolute;
  inset:-70px -90px -70px -70px;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(58% 54% at 56% 50%,
    rgba(4,10,32,.72) 0%,
    rgba(4,10,32,.5) 46%,
    rgba(4,10,32,.2) 70%,
    rgba(4,10,32,0) 100%);
}
.hist__tl > *{ position:relative; z-index:1; }
.hist__rail{
  position:absolute;
  left:11px; top:8px; bottom:8px;
  width:1px;
  background:rgba(255,255,255,.13);
}
.hist__fill{
  position:absolute;
  left:0; bottom:0;
  width:100%;
  height:0;
  background:linear-gradient(180deg, #8fa3ff 0%, #e8c25a 100%);
  box-shadow:0 0 12px rgba(143,163,255,.45);
  will-change:height;
}
.hist__list{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap:clamp(14px, 2.1vh, 22px);
}
.hist__era{
  position:relative;
  opacity:.55;
  transform:translateY(6px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.hist__dot{
  position:absolute;
  left:-40px; top:7px;
  width:9px; height:9px;
  border-radius:50%;
  background:rgba(255,255,255,.28);
  box-shadow:0 0 0 0 rgba(232,194,90,0);
  transition:transform .5s var(--ease), background .5s, box-shadow .5s;
}
.hist__era.is-on{ opacity:1; transform:none; }
.hist__era.is-on .hist__dot{
  background:#f0cf72;
  transform:scale(1.75);
  box-shadow:0 0 0 6px rgba(232,194,90,.12), 0 0 20px rgba(232,194,90,.55);
}
.hist__yr{
  margin:0;
  text-shadow:0 1px 18px rgba(3,8,26,.55);
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(19px, 1.7vw, 24px);
  color:rgba(255,255,255,.5);
  letter-spacing:.02em;
  transition:color .5s var(--ease);
}
.hist__era.is-on .hist__yr{ color:#fff; }
.hist__yr sup{
  font-size:.42em;
  margin-left:3px;
  letter-spacing:.12em;
  color:rgba(255,255,255,.35);
  vertical-align:super;
}
.hist__era.is-on .hist__yr sup{ color:#e8c25a; }
.hist__ev{
  margin:8px 0 0;
  text-shadow:0 1px 14px rgba(3,8,26,.6);
  font-size:13px;
  line-height:1.78;
  color:rgba(255,255,255,.4);
  transition:color .5s var(--ease);
}
.hist__era.is-on .hist__ev{ color:rgba(255,255,255,.72); }
.hist__ev b{
  font-weight:500;
  color:rgba(255,255,255,.62);
  margin-right:8px;
}
.hist__era.is-on .hist__ev b{ color:#fff; }

@media (max-width:900px){
  .hist{ min-height:auto; }
  .hist__stick{ position:static; height:auto; padding:clamp(92px,13vw,120px) 0 clamp(40px,8vw,64px); }
  .hist__in{ display:block; padding:0 var(--pad); }
  .hist__h{ font-size:clamp(34px, 9.4vw, 50px); }
  .hist__now{ margin-top:24px; flex-direction:column; align-items:flex-start; gap:6px; }
  .hist__now-yr{ font-size:clamp(26px, 7.4vw, 34px); white-space:nowrap; }
  .hist__now-lb{ font-size:9.5px; letter-spacing:.18em; }
  .hist__tl{ margin-top:30px; padding-left:34px; max-width:none; }
  .hist__rail{ left:6px; }
  .hist__dot{ left:-30px; }
  .hist__era{ opacity:1; transform:none; }
}

/* ============================================================
   整页白色蒙版（沿用首屏卡片的渐变逻辑，铺满整屏，深色分区自动淡出）
   ============================================================ */
/* 内容层压在蒙版之上，蒙版只影响背景视频 */
main, .site-foot{ position:relative; z-index:1; overflow-x:clip; }
.page-veil{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.74) 0%,
      rgba(255,255,255,.44) 12%,
      rgba(255,255,255,.36) 50%,
      rgba(255,255,255,.44) 88%,
      rgba(255,255,255,.76) 100%),
    linear-gradient(90deg,
      rgba(255,255,255,.52) 0%,
      rgba(255,255,255,.22) 8%,
      rgba(255,255,255,.16) 50%,
      rgba(255,255,255,.22) 92%,
      rgba(255,255,255,.52) 100%);
  transition:opacity .8s var(--ease);
}
/* 深色分区时整层淡出，避免把深底洗白 */
body.tone-dark .page-veil{ opacity:0; }

/* 地图：窄屏精简标注，避免文字缩到看不清 */
@media (max-width: 760px){
  .map-card .m-poi,
  .map-card .m-p,
  .map-card .m-hs,
  .map-card .m-road{ display:none; }
  /* 窄屏只保留一行园区名，避免两行在放大的字号下相互挤压 */
  .map-card .m-park1{ display:none; }
  .map-card .m-park2{ font-size:15px; letter-spacing:.4px; transform:translateY(-7px); }
  .map-card .m-addr{ font-size:11px; }
  .map-card .m-station{ font-size:12.5px; }
  .map-card .m-scale{ font-size:10px; }
}

/* 产品价格标注 */
.prod__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 16px 0 0;
}
.prod__price span {
  font-size: 12px;
  letter-spacing: 0;
  color: var(--muted);
}
.prod__price b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(21px, 1.8vw, 26px);
  letter-spacing: 0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.prod__price b i {
  font-style: normal;
  font-size: 0.66em;
  margin-right: 1px;
  color: var(--muted);
}