/* =====================================================================
   XPlanner 官网 · site.css（v3 蓝色系统）
   - 全站共用：首页、4 个产品页、行业方案页（枢纽 + 12 篇）、OntoCore 页
   - 组件用法见 COMPONENTS 文档；页面 HTML 不写大段内联样式
   - 断点：<1100 / <860 / ≤560（写作 max-width: 1099.98px / 859.98px / 560px；site.js 菜单的 matchMedia 与之一致）
   - 约定：.js = <head> 内联脚本已加（JS 可用）；.xpl-ready = site.js 已运行
   ===================================================================== */

/* ---------- 0. 设计变量 ---------- */
:root {
  /* 蓝色系 */
  --c-primary: #1a66ff;        /* 主蓝：主按钮、强调线 */
  --c-link: #1a56db;           /* 链接 / kicker */
  --c-ink-blue: #164bc0;       /* 深蓝字、选中态 */
  --c-navy: #0f2a5e;           /* 深底区块 / 页脚 */
  --c-navy-2: #0b3d91;         /* 渐变起点 */
  --c-blue-400: #3b8bff;
  --c-blue-350: #5b87ff;
  --c-blue-300: #6f9bff;
  --c-blue-200: #9dbcff;
  --c-blue-150: #c9dbff;
  --c-blue-100: #dbe6ff;
  --c-blue-50: #eaf1ff;
  /* 中性 */
  --c-text: #1f2d3d;
  --c-text-2: #5a6b80;
  --c-text-3: #7a8699;
  --c-border: #e3e9f2;
  --c-border-soft: #eef2f8;
  --c-bg-soft: #f5f8fc;
  --c-white: #ffffff;
  /* 强调（只用于动画/标记） */
  --c-green: #9cdf63;
  --c-orange: #ffa64d;
  /* 深底上的线与字（v3 混色预先算成 rgba） */
  --c-line-dark: rgba(255, 255, 255, 0.25);
  --c-line-dark-soft: rgba(255, 255, 255, 0.18);
  --c-line-row: rgba(31, 45, 61, 0.08);
  --c-header-bg: rgba(255, 255, 255, 0.92);

  --c-hero-deep: #0b3d91;
  --g-hero: linear-gradient(120deg, #0b3d91 0%, #1a66ff 70%, #3b8bff 100%);
  --g-figure: linear-gradient(135deg, #eaf1ff, #f5f8fc);

  --shadow-card: 0 8px 28px rgba(22, 75, 192, 0.10);
  --shadow-card-hi: 0 12px 32px rgba(22, 75, 192, 0.14);
  --shadow-panel: 0 16px 32px rgba(15, 42, 94, 0.12);

  --radius: 8px;
  --radius-sm: 6px;
  --radius-btn: 4px;

  --font: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, Menlo, monospace;

  --container: 1240px;
  --gutter: 24px;
  --header-h: 64px;
  --sec-y: 72px;
  --fs-h2: clamp(30px, 3.6vw, 44px);
  --fs-h2-sm: clamp(28px, 3.2vw, 40px);
}

/* ---------- 1. 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; }
ul, ol { margin: 0; padding: 0; }
img, svg, video { max-width: 100%; }
img { height: auto; }
a { color: var(--c-link); text-decoration: none; }
a:hover { color: var(--c-primary); }
button { font: inherit; color: inherit; }
b, strong { font-weight: 600; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 80px; }
::selection { background: var(--c-blue-150); color: var(--c-text); }

:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: 2px; }
.on-dark :focus-visible, .hero :focus-visible, .section--dark :focus-visible, .core-sec :focus-visible, .oc-hero :focus-visible,
.site-footer :focus-visible, .banner :focus-visible { outline-color: var(--c-white); }

/* 自定义元素占位（脚本加载中保留空间，避免布局跳动） */
xp-gantt { display: block; width: 100%; aspect-ratio: 640 / 440; }
xp-brain { display: block; width: 100%; min-width: 820px; aspect-ratio: 1200 / 640; }
/* 动画组件不可用（无 JS；或 site.js 已运行而 xplanner-anim.js 未能定义组件）时，组件与外框都不占位 */
html:not(.js) xp-gantt, html:not(.js) xp-brain,
.xpl-ready xp-gantt:not(:defined), .xpl-ready xp-brain:not(:defined) { display: none; }
html:not(.js) .brain-frame { display: none; }
html:not(.js) .figure-card:has(xp-gantt, xp-brain),
.xpl-ready :is(.brain-frame, .figure-card):has(xp-gantt:not(:defined), xp-brain:not(:defined)) { display: none; }

/* ---------- 2. 工具类 ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--c-ink-blue); color: var(--c-white); padding: 8px 14px; border-radius: var(--radius-btn);
  font-size: 14px; font-weight: 500; transition: top .2s;
}
.skip-link:focus, .skip-link:focus-visible { top: 8px; color: var(--c-white); }
.mono { font-family: var(--mono); }
.text-muted { color: var(--c-text-2); }
.nowrap { white-space: nowrap; }

/* ---------- 3. 区块骨架 ---------- */
.section { padding: var(--sec-y) 0; }
.section--tight { padding: 56px 0; }
.section--loose { padding: 88px 0; }
.section--flush-top { padding-top: 0; }
.section--soft { background: var(--c-bg-soft); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.section--lined { border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.section--rule { border-top: 1px solid var(--c-border); }   /* 两个白底区块相邻时的分隔线 */
.section--dark, .on-dark { background: var(--c-navy); color: var(--c-white); }
.section--dark a:not(.btn), .on-dark a:not(.btn) { color: var(--c-blue-150); }
.section--dark a:not(.btn):hover, .on-dark a:not(.btn):hover { color: var(--c-white); }

/* 区块头：kicker + h2（可带右侧描述） */
.sec-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 36px; }
.sec-head--split { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.sec-head--split > .sec-head__main { display: flex; flex-direction: column; gap: 10px; }
.sec-head--flat { margin-bottom: 0; }
.kicker {
  display: block; font-weight: 600; font-size: 13px; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-link); padding-bottom: 10px; border-bottom: 1px solid var(--c-border);
}
.kicker--plain { padding-bottom: 0; border-bottom: 0; }
.section--dark .kicker, .on-dark .kicker { color: var(--c-blue-200); border-bottom-color: var(--c-line-dark); }
.sec-title { font-weight: 600; font-size: var(--fs-h2); line-height: 1.1; margin: 0; text-wrap: pretty; }
.sec-title--sm { font-size: var(--fs-h2-sm); }
.sec-title em { font-style: normal; color: var(--c-primary); }
.section--dark .sec-title em { color: var(--c-blue-200); }
.sec-desc { max-width: 440px; font-size: 15px; line-height: 1.6; color: var(--c-text-2); text-wrap: pretty; }
.lede { font-size: 15px; line-height: 1.65; color: var(--c-text-2); max-width: 760px; text-wrap: pretty; }
.section--dark .lede, .on-dark .lede { color: var(--c-blue-150); }
/* 区块内小标题（如「四大痛点 · Four Pain Points」） */
.subhead {
  display: flex; align-items: center; gap: 12px; margin: 48px 0 20px;
  font-weight: 600; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-blue);
}
.subhead::before { content: ""; width: 24px; height: 2px; background: var(--c-primary); flex-shrink: 0; }
.subhead:first-child { margin-top: 0; }

/* 两栏 */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; }
.split--center { align-items: center; }
.split--narrow-gap { gap: 40px; }
.stack { display: flex; flex-direction: column; gap: 14px; }

/* 网格 */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--gap-sm { gap: 16px; }

/* ---------- 4. 按钮 / 链接 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--radius-btn);
  font-weight: 500; font-size: 15px; line-height: 1.4; padding: 12px 22px;
  cursor: pointer; white-space: nowrap; text-align: center;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn--sm { font-size: 14px; padding: 8px 18px; }
.btn--primary { background: var(--c-primary); color: var(--c-white); }
.btn--primary:hover { background: var(--c-link); color: var(--c-white); }
.btn--outline { background: var(--c-white); color: var(--c-link); border-color: var(--c-primary); }
.btn--outline:hover { background: var(--c-blue-50); color: var(--c-ink-blue); }
.btn--light { background: var(--c-white); color: var(--c-link); }
.btn--light:hover { background: var(--c-blue-50); color: var(--c-ink-blue); }
.btn--ghost-light { background: transparent; color: var(--c-white); border-color: rgba(255, 255, 255, 0.7); }
.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.12); color: var(--c-white); border-color: var(--c-white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row--center { justify-content: center; }
.link-arrow { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: var(--c-link); }
.link-arrow:hover { color: var(--c-primary); }
.link-arrow--lg { font-size: 16px; font-weight: 600; }

/* ---------- 5. 页头 / 导航 / 语言切换 / 汉堡 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-header-bg);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-border);
}
.site-header__inner { position: relative; height: var(--header-h); display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.site-header__inner > .brand { flex-shrink: 1; }      /* 极窄时整组按比例收缩，绝不溢出 */

/* 品牌锁定组合：企业 logo | XPLANNER.ai（页头、页脚共用）
   以高度定尺寸（--brand-*-h），宽度按素材比例换算；两图可按比例同步收缩（min-width:0），
   所以容器不够宽时整组等比缩小而不是溢出。 */
.brand {
  --brand-org-h: 44px; --brand-sep-h: 28px; --brand-gap: 14px; --brand-product-h: 30px;
  --brand-sep-c: var(--c-border);
  display: flex; align-items: center; min-width: 0; max-width: 100%; color: inherit;
}
.brand__org, .brand__product { display: block; flex: 0 1 auto; min-width: 0; max-width: none; height: auto; }
.brand__org { width: calc(var(--brand-org-h) * 360 / 132); }             /* hxyl-logo.png 360×132 */
.brand__product { width: calc(var(--brand-product-h) * 878 / 224); }     /* xplanner-wordmark-*.svg viewBox 878×224 */
.brand__sep { flex: none; width: 1px; height: var(--brand-sep-h); margin: 0 var(--brand-gap); background: var(--brand-sep-c); }
/* 深底反白变体（页脚） */
.brand--inverse {
  --brand-org-h: 40px; --brand-sep-h: 26px; --brand-gap: 14px; --brand-product-h: 28px;
  --brand-sep-c: rgba(255, 255, 255, .25);
}
.brand--inverse .brand__org { filter: brightness(0) invert(1); }
.site-nav { display: flex; align-items: center; gap: clamp(12px, 1.5vw, 22px); margin-left: auto; font-size: 15px; font-weight: 500; }
.site-nav a { color: var(--c-text); padding: 6px 0; }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--c-primary); }
.site-nav .lang-switch { display: none; }               /* 面板内语言切换：仅窄屏面板显示 */
/* 二级栏目：一级文字照常可点；鼠标悬停、键盘聚焦（:focus-visible）或点旁边的小箭头（.subnav-toggle，site.js 切 .is-open）时展开下拉 */
.nav-item { position: relative; display: flex; align-items: center; gap: 1px; }
.subnav-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 28px; padding: 0;
  border: 0; background: none; cursor: pointer; color: var(--c-text-3); border-radius: var(--radius-btn);
}
.subnav-toggle::before { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.subnav-toggle:hover, .nav-item:hover > .subnav-toggle, .nav-item.is-open > .subnav-toggle { color: var(--c-primary); }
.nav-item.is-open > .subnav-toggle::before { transform: translateY(2px) rotate(-135deg); }
html:not(.js) .subnav-toggle { display: none; }
.subnav {
  list-style: none; position: absolute; top: 100%; left: -14px; z-index: 60; min-width: 190px; margin-top: 12px; padding: 8px;
  background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-panel);
  visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.subnav::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }   /* 一级文字与下拉之间的悬停桥 */
.nav-item:hover > .subnav, .nav-item.is-open > .subnav { visibility: visible; opacity: 1; transform: none; transition: opacity .18s ease, transform .18s ease; }
.nav-item:has(:focus-visible) > .subnav { visibility: visible; opacity: 1; transform: none; transition: opacity .18s ease, transform .18s ease; }
.site-nav .subnav a { display: block; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--c-text); white-space: nowrap; }
.site-nav .subnav a:hover, .site-nav .subnav a[aria-current] { background: var(--c-blue-50); color: var(--c-ink-blue); }
.subnav--grid { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 4px; }   /* 两列按内容定宽，英文长名不挤压 */
.subnav__all { grid-column: 1 / -1; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--c-border); }
.site-nav .subnav__all a { color: var(--c-link); }
.subnav__all a::after { content: " →"; }
.nav-item--end > .subnav { left: auto; right: -14px; }   /* 最右的「关于我们」靠右对齐 */
.header-cta { flex-shrink: 0; }
/* 右上角服务热线（同 opt-xplanner.com）：≥1280 图标 + 号码；<1280 页头放不下（品牌组会被挤小）不显示，<860 收进汉堡面板（.nav-tel） */
.tel-icon { width: 18px; height: 18px; flex-shrink: 0; fill: currentColor; }
.header-tel { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-weight: 600; font-size: 15px; line-height: 1; color: var(--c-ink-blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.header-tel:hover { color: var(--c-primary); }
.site-nav .nav-tel { display: none; }

.lang-switch {
  display: inline-flex; flex-shrink: 0; border: 1px solid var(--c-border); border-radius: var(--radius-btn);
  overflow: hidden; font-weight: 500; font-size: 13px;
}
.lang-switch button {
  border: 0; margin: 0; cursor: pointer; padding: 6px 10px; font: inherit; line-height: 1.4;
  background: transparent; color: var(--c-text);
}
.lang-switch button + button { border-left: 1px solid var(--c-border); }
.lang-switch button:hover { background: var(--c-blue-50); }
.lang-switch button.on, .lang-switch button[aria-pressed="true"] { background: var(--c-ink-blue); color: var(--c-white); }
html:not(.js) .lang-switch { display: none; }            /* 无 JS 时语言切换不可用，不显示 */

.nav-toggle {
  display: none; flex-shrink: 0; width: 40px; height: 40px; margin-right: -8px;
  border: 0; background: transparent; cursor: pointer; border-radius: var(--radius-btn);
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-toggle__bar { display: block; width: 20px; height: 2px; background: var(--c-text); border-radius: 1px; transition: transform .2s, opacity .2s; }
.nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 6. Hero（首页：4 屏照片背景轮播；左栏文字，右栏半透明甘特动画叠在照片上） ----------
   照片层 .hero__bg-item 与文字屏一一对应（site.js 轮播用 data-carousel-sync 同步 .is-active）。
   第 1 张直接写在 CSS（无 JS 也有）；第 2–4 张由 site.js 在 load 后预取，加 .is-loaded 才挂照片，之前是渐变底色兜底。
   切换：新图叠在上层 0.8s 淡入，旧图等淡入完再隐藏（不透出底色）；reduced-motion 下过渡被全局关掉，直接切换。 */
.hero { position: relative; isolation: isolate; overflow: hidden; background-color: var(--c-hero-deep); background-image: var(--g-hero); color: var(--c-white); }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__bg-item {
  position: absolute; inset: 0; z-index: 0; opacity: 0;
  background-image: var(--g-hero); background-repeat: no-repeat; background-size: cover;
  background-position: var(--hero-pos, 72% 50%);
  transition: opacity 0s linear .8s;
}
.hero__bg-item.is-active { z-index: 1; opacity: 1; transition: opacity .8s ease; }
.hero__bg-item--1 { background-image: url(hero-1.jpg); --hero-pos: 75% 50%; }
.hero__bg-item--2 { --hero-pos: 80% 60%; }
.hero__bg-item--3 { --hero-pos: 80% 50%; }
.hero__bg-item--4 { --hero-pos: 0% 50%; }
.hero__bg-item--2.is-loaded { background-image: url(hero-2.jpg); }
.hero__bg-item--3.is-loaded { background-image: url(hero-3.jpg); }
.hero__bg-item--4.is-loaded { background-image: url(hero-4.jpg); }
/* 压暗层：左侧文字区深（白字对比度 ≥ 4.5:1），右侧照片主体透出 */
.hero__bg::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: var(--hero-shade);
}
.hero { --hero-shade: linear-gradient(90deg, rgba(8, 28, 80, 0.92) 0%, rgba(11, 61, 145, 0.80) 40%, rgba(26, 102, 255, 0.12) 70%, rgba(26, 102, 255, 0) 100%); }
.hero__inner {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 48px;
  align-items: center; min-height: 720px; padding-top: 72px; padding-bottom: 72px;
}
.hero__copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; width: 100%; max-width: 640px; }
/* 甘特窗口叠在照片上：窗口底色调透 + 背景模糊（毛玻璃），照片透出、条块与刻度仍清楚。
   圆角与 SVG 窗口一致（viewBox 640×440 里 rx=12，按百分比换算）。透明度经 xp-gantt 读取的 CSS 变量控制 */
.hero__figure {
  margin: 0; min-width: 0; border-radius: 1.875% / 2.727%;
  --xpg-window: rgba(8, 30, 80, 0.22); --xpg-bar-opacity: 0.9;
  background: rgba(8, 30, 80, 0.08);
  -webkit-backdrop-filter: blur(6px) saturate(1.12); backdrop-filter: blur(6px) saturate(1.12);
  box-shadow: 0 24px 56px rgba(4, 18, 56, 0.40);
}
/* 甘特不可用（无 JS / 组件未定义）时隐藏，文字栏独占 */
html:not(.js) .hero__figure, .xpl-ready .hero__figure:has(xp-gantt:not(:defined)) { display: none; }
.hero-slides { display: flex; flex-direction: column; gap: 40px; }
.hero-slide { display: flex; flex-direction: column; gap: 22px; }
.hero__kicker {
  display: flex; gap: 12px; align-items: center; font-weight: 600; font-size: 12px; line-height: 1.5;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-blue-150);
}
.hero__kicker::before { content: ""; width: 28px; height: 2px; background: var(--c-white); flex-shrink: 0; }
.hero__title { font-weight: 600; font-size: clamp(34px, 4.2vw, 54px); line-height: 1.22; margin: 0; text-wrap: balance; text-shadow: 0 1px 2px rgba(5, 20, 60, 0.35); }
/* 英文标语更长：字号收一档，桌面各宽都保持两行（最长一行 "into industry-leading products." 在 42px 下 < 640px 栏宽） */
html[lang="en"] .hero__title { font-size: clamp(30px, 3.4vw, 42px); }
/* ≥1100 文字栏与甘特并排、栏宽约 530–600px：英文标题再收一档，最长一行 "into industry-leading products." 不折行 */
@media (min-width: 1100px) { html[lang="en"] .hero__title { font-size: clamp(28px, 2.7vw, 38px); } }
/* 英文字典把标题每行包成 .hero__line：窄屏某行放不下时只在该行内均衡折行，不会剩一个孤词 */
.hero__line { display: block; text-wrap: balance; }
.hero__desc { font-size: 17px; line-height: 1.7; max-width: 560px; color: var(--c-blue-100); text-wrap: pretty; text-shadow: 0 1px 2px rgba(5, 20, 60, 0.35); }
/* 有 JS：各屏叠放在同一格，高度取最高一屏，非当前屏淡出 */
.js .hero-slides { display: grid; gap: 0; }
.js .hero-slide { grid-area: 1 / 1; }
.js .hero-slide:not(.is-active) { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s; }
.js .hero-slide.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease .3s, transform .35s ease .3s, visibility 0s linear .3s; }
/* 圆点：仅在 site.js 运行后出现 */
.hero-dots { display: none; gap: 4px; align-items: center; margin: -6px 0 -6px -5px; }
.xpl-ready .hero-dots { display: flex; }
.hero-dot { border: 0; background: transparent; padding: 8px 5px; cursor: pointer; line-height: 0; }
.hero-dot::before {
  content: ""; display: block; height: 4px; width: 14px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.4); transition: width .4s, background-color .4s;
}
.hero-dot:hover::before { background: rgba(255, 255, 255, 0.7); }
.hero-dot[aria-current="true"]::before { width: 36px; background: var(--c-white); }
/* 暂停 / 继续自动轮播（WCAG 2.2.2）：aria-pressed="true" = 已暂停，图标换成播放三角；reduced-motion 下不自动轮播，site.js 隐藏它 */
.hero-pause {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 8px;
  border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; background: transparent; color: var(--c-white);
  cursor: pointer; padding: 0; transition: border-color .2s, background-color .2s;
}
.hero-pause:hover { border-color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.08); }
.hero-pause[hidden] { display: none; }
.hero-pause::before { content: ""; width: 8px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.hero-pause[aria-pressed="true"]::before { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent currentColor; margin-left: 2px; }
.hero .btn-row { margin-top: 6px; }
.hero-stats {
  list-style: none; display: flex; flex-wrap: wrap; gap: 16px 32px; margin-top: 18px; padding-top: 22px;
  border-top: 1px solid var(--c-line-dark);
}
.hero-stats li { display: flex; flex-direction: column; gap: 2px; }
.hero-stats__v { font-weight: 600; font-size: 30px; line-height: 1.1; color: var(--c-white); }
.hero-stats__k { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-blue-150); }
html:not(.js) .product-hero .split:has(xp-gantt, xp-brain) { grid-template-columns: minmax(0, 1fr); }
.xpl-ready .product-hero .split:has(xp-gantt:not(:defined), xp-brain:not(:defined)) { grid-template-columns: minmax(0, 1fr); }

/* ---------- 6b. 首页「四个平台」：核心决策大脑（构图参考 opt-xplanner.com 旧站，矢量重画） ----------
   ≥1100：.core-stage 按 1200×760 设计坐标定比例，SVG .core-art 用同一 viewBox 铺满；平台圆 / 标签 / 数据输入
   按同一坐标系用百分比绝对定位，字号用容器宽度单位 cqw 随舞台缩放。光流、光环全是 CSS 动画（无 JS 也会动），
   site.js 在区块滚出视口时加 .is-offscreen 暂停。<1100：隐藏 SVG，平台圆两列（≤560 一列），光核改 CSS 球体，
   标签与数据输入换行排布。当前平台（site.js 切 .is-active）对应的光核连线经 :has() 点亮 */
.core-sec { background: linear-gradient(180deg, #040d2b 0%, #0a2577 52%, #1f4fe0 100%); color: var(--c-white); overflow: hidden; }
.core-sec .kicker { color: var(--c-blue-200); }
.sec-head--center { align-items: center; text-align: center; }
.sec-head--center .kicker { padding-bottom: 0; border-bottom: 0; }
.core-stage { position: relative; container-type: inline-size; aspect-ratio: 1200 / 760; }
.core-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.core-orbs, .core-hub { position: absolute; inset: 0; pointer-events: none; }
.core-chips, .core-inputs { list-style: none; margin: 0; padding: 0; }

/* 平台圆：静态细圈 + 旋转亮弧（conic-gradient 经环形遮罩） */
.core-orb {
  position: absolute; width: 23.334%; aspect-ratio: 1; border-radius: 50%; pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 3.2cqw;
  background: radial-gradient(closest-side, rgba(40, 100, 255, 0.18), rgba(40, 100, 255, 0.05) 72%, transparent 100%);
  transition: transform .4s ease;
}
.core-orb--1 { left: 2.917%; top: 26.974%; }
.core-orb--2 { left: 26.25%; top: 8.553%; }
.core-orb--3 { left: 50.417%; top: 8.553%; }
.core-orb--4 { left: 73.75%; top: 26.974%; }
.core-orb::before, .core-orb::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.core-orb::before { inset: 0; border-radius: inherit; border: 1px solid rgba(127, 186, 255, 0.28); box-shadow: inset 0 0 30px rgba(59, 139, 255, 0.18); transition: border-color .4s, box-shadow .4s; }
.core-orb::after {
  inset: -3px; opacity: .7; transition: opacity .4s;
  background: conic-gradient(from 0deg, transparent 0 8%, rgba(170, 215, 255, 0.95) 18%, transparent 30%, transparent 52%, rgba(120, 180, 255, 0.75) 64%, transparent 76%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: core-spin 9s linear infinite;
}
.core-orb--2::after, .core-orb--4::after { animation-direction: reverse; animation-duration: 11s; }
.core-orb.is-active { transform: translateY(-6px); }
.core-orb.is-active::before { border-color: rgba(170, 215, 255, 0.6); box-shadow: inset 0 0 40px rgba(59, 139, 255, 0.35), 0 0 36px rgba(59, 139, 255, 0.35); }
.core-orb.is-active::after { opacity: 1; }
.core-orb__title { margin: 0 0 0.9cqw; font-weight: 600; font-size: clamp(16px, 1.7cqw, 21px); line-height: 1.3; }
.core-orb__btn { font: inherit; color: inherit; background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.7); padding: 0 2px 6px; cursor: pointer; }
.core-orb__desc { margin: 0; font-size: clamp(12px, 1.17cqw, 14px); line-height: 1.6; color: rgba(255, 255, 255, 0.74); text-wrap: pretty; }
html[lang="en"] .core-orb__desc { font-size: clamp(11px, 1.05cqw, 12.5px); line-height: 1.5; }

/* 光核上方的目标与约束、下方的扰动回流标签 */
.core-chip {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  font-size: clamp(13px, 1.3cqw, 16px); font-weight: 500; line-height: 1.5; padding: 0.22em 1.05em; border-radius: 999px;
  background: linear-gradient(111deg, #1d43ff 9%, rgba(0, 19, 114, 0.3) 36%, rgba(0, 19, 114, 0.08) 65%, #1d43ff 94%);
  box-shadow: 0 0 0 1px rgba(127, 186, 255, 0.25), 0 6px 18px rgba(4, 18, 70, 0.35);
}
.core-chip::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 0.5em; border-radius: 50%; vertical-align: 0.12em; background: #9fd0ff; box-shadow: 0 0 8px #9fd0ff; }
.core-chips--events .core-chip::before { background: #ffb066; box-shadow: 0 0 8px #ffb066; }
/* 上方 4 个按靠中线的一边定位（左侧两个右对齐、右侧两个左对齐），英文变长也只向外长、不会互相压住 */
.core-chip--g1, .core-chip--g3 { left: auto; transform: translateY(-50%); }
.core-chip--g2, .core-chip--g4 { transform: translateY(-50%); }
.core-chip--g1 { right: 50.8%; top: 55.263%; }
.core-chip--g2 { left: 50.8%; top: 55.263%; }
.core-chip--g3 { right: 59%; top: 61.842%; }
.core-chip--g4 { left: 59%; top: 61.842%; }
/* 下方 3 个扰动标签居中成一排 */
.core-chips--events { position: absolute; left: 50%; top: 87.105%; transform: translate(-50%, -50%); display: flex; gap: 1.1cqw; white-space: nowrap; }
.core-chips--events .core-chip { position: static; transform: none; }
.core-engine {
  position: absolute; left: 50%; top: 72.105%; transform: translate(-50%, -50%); margin: 0; max-width: 12cqw;
  font-weight: 700; font-size: clamp(18px, 2.1cqw, 26px); line-height: 1.15; letter-spacing: 0.08em; text-align: center;
  text-shadow: 0 0 18px rgba(120, 180, 255, 0.9), 0 2px 6px rgba(4, 18, 70, 0.6);
}
html[lang="en"] .core-engine { font-size: clamp(14px, 1.5cqw, 18px); letter-spacing: 0.02em; }

/* 底部数据输入：11 等分，与 SVG 光流起点（x = 60 + 108i）对齐 */
.core-inputs {
  position: absolute; left: 0.5%; right: 0.5%; top: 94.2%; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr));
  text-align: center; font-size: clamp(11px, 1.08cqw, 13px); line-height: 1.25; color: rgba(255, 255, 255, 0.86);
}
.core-inputs li { padding: 0 2px; }
.core-inputs li::before { content: ""; display: block; width: 6px; height: 6px; margin: 0 auto 6px; border-radius: 50%; background: #9fd0ff; box-shadow: 0 0 8px #9fd0ff; }

/* SVG 动画：光流沿曲线上行（pathLength=100 归一化），当前平台的连线点亮 */
.core-flows path { stroke-dasharray: 2.5 97.5; stroke-dashoffset: 100; animation: core-flow 3.6s linear infinite; }
.core-flows path:nth-child(3n+1) { animation-delay: -1.2s; }
.core-flows path:nth-child(3n+2) { animation-delay: -2.4s; }
.core-flows path:nth-child(4n) { animation-duration: 4.4s; }
.core-beam { stroke: #7fbaff; stroke-width: 1.4; stroke-dasharray: 3 6; opacity: .35; transition: opacity .4s, stroke .4s; }
.core-beam-flow { stroke: #e6f3ff; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 5 95; stroke-dashoffset: 100; opacity: 0; transition: opacity .4s; animation: core-flow 2.2s linear infinite; }
.core-stage:has(.core-orb--1.is-active) .core-beam--1, .core-stage:has(.core-orb--2.is-active) .core-beam--2,
.core-stage:has(.core-orb--3.is-active) .core-beam--3, .core-stage:has(.core-orb--4.is-active) .core-beam--4 { opacity: .95; stroke: #b8dcff; }
.core-stage:has(.core-orb--1.is-active) .core-beam-flow--1, .core-stage:has(.core-orb--2.is-active) .core-beam-flow--2,
.core-stage:has(.core-orb--3.is-active) .core-beam-flow--3, .core-stage:has(.core-orb--4.is-active) .core-beam-flow--4 { opacity: 1; }
.core-ring-spin, .core-swirl, .core-crescent { transform-box: view-box; transform-origin: 600px 548px; }
.core-ring-spin { animation: core-spin 40s linear infinite; }
.core-swirl { animation: core-spin 14s linear infinite reverse; }
.core-crescent { animation: core-spin 18s linear infinite; }
.core-orbit-flow { stroke-dasharray: 9 91; stroke-dashoffset: 100; opacity: .9; animation: core-flow 3.2s ease-in-out infinite; }
@keyframes core-flow { to { stroke-dashoffset: 0; } }
@keyframes core-spin { to { transform: rotate(360deg); } }
.is-offscreen .core-stage *, .is-offscreen .core-stage *::before, .is-offscreen .core-stage *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .core-flows, .core-beam-flow, .core-orbit-flow { display: none; } }

@media (max-width: 1099.98px) {
  .core-stage { aspect-ratio: auto; container-type: normal; display: flex; flex-direction: column; align-items: center; gap: 36px; }
  .core-art { display: none; }
  .core-orbs, .core-hub { position: static; pointer-events: auto; }
  .core-orbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; width: 100%; max-width: 760px; }
  .core-orb { position: relative; left: auto; top: auto; width: 100%; max-width: 340px; justify-self: center; padding: 0 12%; }
  .core-orb__title { font-size: 19px; margin-bottom: 10px; }
  .core-orb__desc, html[lang="en"] .core-orb__desc { font-size: 13px; line-height: 1.55; }
  .core-hub { display: flex; flex-direction: column; align-items: center; gap: 18px; }
  .core-chips, .core-chips--events { position: static; transform: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; white-space: normal; }
  .core-chip { position: static; transform: none; font-size: 14px; }
  .core-engine, html[lang="en"] .core-engine {
    position: relative; left: auto; top: auto; transform: none; max-width: none; width: 150px; height: 150px; padding: 0 14px;
    display: grid; place-items: center; border-radius: 50%; font-size: 20px;
    background: radial-gradient(circle at 38% 32%, #a6cdff 0, #3f7dff 34%, #153bbd 70%, #071c68 100%);
    box-shadow: 0 0 0 2px #9fd0ff, 0 0 40px rgba(59, 139, 255, 0.65);
  }
  html[lang="en"] .core-engine { font-size: 16px; }
  .core-inputs { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; font-size: 13px; }
  .core-inputs li { padding: 4px 12px; border: 1px solid rgba(127, 186, 255, 0.3); border-radius: 999px; }
  .core-inputs li::before { display: inline-block; margin: 0 6px 0 0; vertical-align: 0.12em; }
}
@media (max-width: 560px) {
  /* 一列时整圆太高（每个 ~340px）：改圆角卡片、高度随内容；旋转亮弧在矩形上不成环，只留细边与光晕 */
  .core-orbs { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .core-orb { aspect-ratio: auto; max-width: none; border-radius: 18px; padding: 22px 20px; background: rgba(40, 100, 255, 0.12); }
  .core-orb::after { display: none; }
  .core-orb.is-active { transform: none; }
}

/* ---------- 7. 卡片 ---------- */
.card {
  background: var(--c-white); border: 1px solid var(--c-border-soft); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 24px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.card--tall { min-height: 200px; }
.card--flat { box-shadow: none; border-color: var(--c-border); }
.card__meta {
  display: flex; justify-content: space-between; gap: 12px; font-weight: 600; font-size: 12px; line-height: 1.5;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-primary);
}
.card__n { font-weight: 600; font-size: 13px; letter-spacing: 0.1em; color: var(--c-primary); }
.card__title { font-weight: 600; font-size: 22px; line-height: 1.2; margin: 0; }
.card__title--lg { font-size: 24px; }
.card__sub { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; color: var(--c-text-2); }
.card__text { font-size: 14px; line-height: 1.6; color: var(--c-text-2); text-wrap: pretty; }
.card__text em { font-style: normal; color: var(--c-ink-blue); font-weight: 500; }
.card__grow { flex: 1; }
/* 卡片底部注解块（如「AI 解法」） */
.card__note { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--c-border); display: flex; flex-direction: column; gap: 4px; }
.card__note-k { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-primary); }
.card__note-v { font-size: 14px; line-height: 1.6; color: var(--c-text); text-wrap: pretty; }
/* 卡片内键值行（如角色卡「解决什么 / 典型形态」） */
.kv { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 4px 12px; padding-top: 10px; border-top: 1px solid var(--c-border); font-size: 14px; line-height: 1.6; }
.kv__k { color: var(--c-text-2); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; padding-top: 2px; }
.kv__v { color: var(--c-text-2); text-wrap: pretty; }
.kv__v em { font-style: normal; color: var(--c-ink-blue); font-weight: 500; }
.badge {
  display: inline-block; vertical-align: middle; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.6;
  color: #8a4a0c; background: #fff4e8; border: 1px solid var(--c-orange);
}

/* 平台卡（点击联动 xp-brain） */
.brain-frame {
  background: var(--c-white); border: 1px solid var(--c-border); border-radius: 10px;
  padding: 20px 16px; margin-bottom: 24px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
}
.platform-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.platform-card {
  position: relative; background: var(--c-white); border-radius: var(--radius); padding: 26px 24px 28px;
  display: flex; flex-direction: column; gap: 14px; min-height: 220px;
  border: 1px solid var(--c-border); border-top: 3px solid var(--c-border);
  transition: box-shadow .35s, border-color .35s;
}
.platform-card:hover { border-top-color: var(--c-blue-200); }
.platform-card.is-active { border-top-color: var(--c-primary); box-shadow: var(--shadow-card-hi); }
.platform-card__n { font-weight: 600; font-size: 13px; letter-spacing: 0.1em; color: var(--c-primary); }
.platform-card__title { font-weight: 600; font-size: 24px; line-height: 1.15; margin: 0; }
.platform-card__btn {
  all: unset; cursor: pointer; font: inherit; color: inherit; display: inline;
}
.platform-card__btn::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.platform-card__btn:focus-visible { outline: none; }
.platform-card__btn:focus-visible::after { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.platform-card__desc { font-size: 14px; line-height: 1.6; color: var(--c-text-2); text-wrap: pretty; }

/* 产品卡 */
.product-card { padding: 24px; gap: 14px; }
.product-card__name { font-weight: 600; font-size: 28px; line-height: 1.1; margin: 0; }
.product-card__sub { font-size: 13px; color: var(--c-ink-blue); font-weight: 500; }
.product-card__desc { font-size: 14px; line-height: 1.6; color: var(--c-text-2); flex: 1; text-wrap: pretty; }
.spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; padding-top: 14px; border-top: 1px solid var(--c-border); margin: 0; }
.spec-grid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.spec-grid dt { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-2); }
.spec-grid dd { margin: 0; font-weight: 600; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
html[lang="en"] .spec-grid dd, html[lang="en"] .spec-bar__v { -webkit-hyphens: auto; hyphens: auto; }

/* ---------- 7b. 产品截图：软件窗口外框 / 首页展台 / 产品页「产品界面」画廊（截图取自 opt-xplanner.com 旧站） ----------
   .shot-frame：截图套一个带标题栏的窗口外框，截图固定比例 900:554 裁切（object-fit: cover）。
   首页展台 .showcase：5 个产品截图叠放（XPlanner 四档 + OntoCore 供应链本体平台），site.js 按当前产品给每张设 data-pos（center 居中 / next 右侧 / prev 左侧 / back 藏在中间后面）；
   无 JS 时只显示 data-pos="center"（HTML 里写死为 APS）。产品页画廊复用 .tabs（无 JS 时全部展开） */
.shot-frame { border-radius: 10px; overflow: hidden; background: var(--c-white); border: 1px solid var(--c-border-soft); box-shadow: 0 24px 60px rgba(22, 75, 192, 0.18); }
.shot-frame__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #eef2f8; border-bottom: 1px solid var(--c-border); font-size: 12px; color: var(--c-text-2); }
.shot-frame__bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff6b6b; }
.shot-frame__bar i:nth-child(2) { background: #ffb347; }
.shot-frame__bar i:nth-child(3) { background: #7bd16b; }
.shot-frame__bar span { margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shot-frame img { display: block; width: 100%; aspect-ratio: 900 / 554; height: auto; object-fit: cover; object-position: top center; background: var(--c-bg-soft); }

.showcase { position: relative; margin-top: 56px; aspect-ratio: 1200 / 560; }
.showcase__shot { position: absolute; left: 50%; top: 0; width: 64%; margin: 0; transform: translateX(-50%) scale(.6); opacity: 0; z-index: 1; transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .7s; pointer-events: none; }
.showcase__shot[data-pos="center"] { transform: translateX(-50%); opacity: 1; z-index: 3; pointer-events: auto; }
.showcase__shot[data-pos="next"] { transform: translateX(-14%) translateY(8%) scale(.8); opacity: .45; z-index: 2; }
.showcase__shot[data-pos="prev"] { transform: translateX(-86%) translateY(8%) scale(.8); opacity: .45; z-index: 2; }
.showcase__shot figcaption { margin-top: 14px; text-align: center; font-size: 14px; color: var(--c-text-2); opacity: 0; transition: opacity .4s; }
.showcase__shot[data-pos="center"] figcaption { opacity: 1; }
/* 当前产品卡高亮（与展台联动）。整张卡都可点：卡名按钮的 ::after 铺满卡片（键盘焦点框也画在整张卡上），
   「了解详情」链接抬到上层，点它仍是跳产品页 */
.product-card { position: relative; transition: border-color .3s, box-shadow .3s, transform .3s; }
.product-card:hover { border-color: var(--c-blue-150); }
.product-card.is-active { border-color: var(--c-primary); box-shadow: 0 14px 36px rgba(22, 75, 192, 0.16); transform: translateY(-4px); }
.product-card__btn { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.product-card__btn::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.product-card__btn:hover { color: var(--c-link); }
.product-card__btn:focus-visible { outline: none; }
.product-card__btn:focus-visible::after { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.product-card .link-arrow { position: relative; z-index: 1; }
/* 第 5 张：OntoCore 供应链本体平台（与 XPlanner 同源的另一条产品线）通栏横排：左名称、中描述、右规格 */
.product-card--wide {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr) minmax(0, 1.1fr);
  grid-template-rows: auto auto auto 1fr; column-gap: 40px; row-gap: 10px; align-items: start;
  background: linear-gradient(110deg, var(--c-blue-50) 0%, var(--c-white) 55%);
}
.product-card--wide > .card__meta, .product-card--wide > .product-card__name, .product-card--wide > .product-card__sub { grid-column: 1; }
.product-card--wide > .link-arrow { grid-column: 1; grid-row: 4; align-self: end; }
.product-card--wide > .product-card__desc { grid-column: 2; grid-row: 1 / -1; align-self: center; }
.product-card--wide > .spec-grid { grid-column: 3; grid-row: 1 / -1; align-self: center; padding: 0 0 0 24px; border-top: 0; border-left: 1px solid var(--c-border); }

.shots__panel { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.shots__text { display: flex; flex-direction: column; gap: 12px; }
.shots__title { margin: 0; font-weight: 600; font-size: 24px; line-height: 1.25; }
.shots__desc { margin: 0; font-size: 15px; line-height: 1.75; color: var(--c-text-2); }
.shots__panel .shot-frame img { aspect-ratio: auto; object-fit: contain; }
@media (max-width: 859.98px) {
  .showcase { aspect-ratio: auto; margin-top: 36px; }
  .showcase__shot { position: relative; left: auto; width: 100%; transform: none; display: none; }
  .showcase__shot[data-pos="center"] { display: block; transform: none; }
  .shots__panel { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .product-card--wide { display: flex; align-items: stretch; }
  .product-card--wide > .link-arrow, .product-card--wide > .product-card__desc, .product-card--wide > .spec-grid { align-self: auto; }
  .product-card--wide > .spec-grid { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--c-border); }
}

/* ---------- 8. 横幅（信条句 / 典型价值） ---------- */
.banner {
  margin-top: 40px; padding: 28px; border-radius: var(--radius);
  background: var(--c-navy); color: var(--c-blue-50);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start;
}
.banner__label { font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-blue-200); padding-top: 5px; white-space: nowrap; }
.banner__text { margin: 0; font-size: 18px; line-height: 1.7; text-wrap: pretty; }
.banner__text b { color: var(--c-white); }
.banner__text .hl { color: var(--c-green); font-weight: 600; }
.banner--soft { background: var(--c-blue-50); color: var(--c-text); border: 1px solid var(--c-blue-150); }
.banner--soft .banner__label { color: var(--c-link); }
.banner--soft .banner__text b { color: var(--c-ink-blue); }
.banner--soft .banner__text .hl { color: var(--c-primary); }

/* 落地节奏条 */
.rollout {
  margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 14px 20px; border: 1px dashed var(--c-blue-200); border-radius: var(--radius);
  font-size: 14px; color: var(--c-text-2); background: var(--c-white);
}
.rollout > span:first-child { font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-link); margin-right: 6px; }
.rollout b { font-weight: 400; }
.rollout .a1, .rollout .a2, .rollout .a3 { font-weight: 600; padding: 2px 10px; border-radius: 999px; }
.rollout .a1 { background: var(--c-blue-50); color: var(--c-ink-blue); }
.rollout .a2 { background: var(--c-blue-100); color: var(--c-ink-blue); }
.rollout .a3 { background: var(--c-primary); color: var(--c-white); }

/* ---------- 9. 表格（价值映射） ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--c-border-soft); border-radius: var(--radius); box-shadow: var(--shadow-card); background: var(--c-white); }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.data-table caption { caption-side: top; text-align: left; padding: 12px 20px; font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-link); border-bottom: 1px solid var(--c-border); }
.data-table th, .data-table td { text-align: left; padding: 12px 20px; vertical-align: top; border-bottom: 1px solid var(--c-line-row); }
.data-table thead th { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-2); background: var(--c-bg-soft); border-bottom-color: var(--c-border); }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--c-bg-soft); }
.data-table .cap, .data-table tbody th { font-weight: 600; color: var(--c-text); }
.data-table .who { color: var(--c-text-2); }
.data-table .gain { color: var(--c-ink-blue); font-weight: 500; }
.up, .down { display: inline-block; font-weight: 700; margin: 0 2px; }
.up { color: #2f8a12; }
.down { color: var(--c-primary); }

/* ---------- 10. 标签页（能力地图；无 JS 时全部展开） ---------- */
.tabs__list { display: none; gap: 0; border-bottom: 1px solid var(--c-border); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; margin-bottom: 24px; }
.xpl-ready .tabs__list { display: flex; scrollbar-width: none; }
.xpl-ready .tabs__list::-webkit-scrollbar { display: none; }   /* 放不下时靠两侧渐隐提示（20b）与选中项自动滚入，不显示滚动条 */
html[lang="en"] .shots .tabs__tab { padding: 12px 14px; }      /* 英文标签更长：产品界面画廊收窄内边距，桌面宽度一行放下 */
.tabs__tab {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; cursor: pointer;
  padding: 12px 18px; font: inherit; text-align: left; color: var(--c-text-2); white-space: nowrap;
}
.tabs__tab:hover { color: var(--c-ink-blue); }
.tabs__tab[aria-selected="true"] { color: var(--c-ink-blue); border-bottom-color: var(--c-ink-blue); }
.tabs__tab-n { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--c-primary); }
.tabs__tab-name { font-size: 16px; font-weight: 600; }
.tabs__panel + .tabs__panel { margin-top: 32px; }
.xpl-ready .tabs__panel + .tabs__panel { margin-top: 0; }
.tabs__panel-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--c-border); }
.tabs__panel-head .tabs__tab-n { font-size: 12px; }
.tabs__panel-head .tabs__tab-name { font-size: 18px; color: var(--c-ink-blue); }
/* 有 JS 时面板标题与标签重复：只做视觉隐藏（保留 h4，标题层级 h3→h4→h5 不跳级）；打印不受影响 */
@media screen {
  .xpl-ready [data-tabs] .tabs__panel-head {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}
.cap-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cap-item {
  background: var(--c-white); border: 1px solid var(--c-border); border-left: 3px solid var(--c-blue-200);
  border-radius: var(--radius-sm); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px;
}
.cap-item--adv { border-left-color: var(--c-orange); }
.cap-item__title { font-size: 16px; font-weight: 600; line-height: 1.4; margin: 0; }
.cap-item__text { font-size: 14px; line-height: 1.6; color: var(--c-text-2); text-wrap: pretty; }

/* ---------- 11. 算法引擎（深底）：指标行 + 四步 ---------- */
.metrics { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-top: 18px; }
.metric { display: flex; flex-direction: column; gap: 2px; }
.metric__k { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-blue-300); }
.metric__v { font-weight: 600; font-size: 26px; line-height: 1.1; }
.steps { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--c-line-dark); }
.step { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--c-line-dark); align-items: start; }
.step__n { font-weight: 600; font-size: 20px; line-height: 1.4; color: var(--c-blue-200); }
.step__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.step__title { font-weight: 600; font-size: 20px; line-height: 1.4; margin: 0; }
.step__desc { font-size: 14px; line-height: 1.55; color: var(--c-blue-150); text-wrap: pretty; }
.step__tag { font-family: var(--mono); font-size: 12px; line-height: 2; color: var(--c-blue-200); white-space: nowrap; }
/* 浅底版本（如需） */
.steps--light { border-top-color: var(--c-border); }
.steps--light .step { border-bottom-color: var(--c-border); }
.steps--light .step__n, .steps--light .step__tag { color: var(--c-link); }
.steps--light .step__desc { color: var(--c-text-2); }

/* ---------- 12. 视频卡（实机演示） ---------- */
.video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.video-card { margin: 0; background: var(--c-white); border: 1px solid var(--c-border-soft); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; }
.video-card__screen { position: relative; aspect-ratio: 16 / 9; background: #0b1a3a; }
.video-card__screen video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0b1a3a; }
.video-card__play {
  display: none; position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; cursor: pointer;
  background: linear-gradient(180deg, rgba(11, 61, 145, 0) 40%, rgba(11, 26, 58, 0.55) 100%);
  color: var(--c-white); align-items: center; justify-content: center; flex-direction: column; gap: 12px;
}
.xpl-ready .video-card__play { display: flex; }
.video-card.is-playing .video-card__play, .is-playing > .video-card__play { display: none; }
.video-card__play-icon {
  width: 72px; height: 72px; border-radius: 50%; background: var(--c-primary); display: grid; place-items: center;
  box-shadow: 0 0 0 8px rgba(26, 102, 255, 0.25), 0 12px 32px rgba(5, 25, 70, 0.45); transition: transform .2s;
}
.video-card__play-icon svg { width: 26px; height: 26px; margin-left: 4px; fill: currentColor; }
.video-card__play:hover .video-card__play-icon { transform: scale(1.06); }
.video-card__play-label { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); }
.video-card__play:focus-visible { outline: 3px solid var(--c-white); outline-offset: -6px; }
.video-card__body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 10px; }
.video-card__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--c-link); }
.video-card__title { font-weight: 600; font-size: 22px; line-height: 1.25; margin: 0; }
.video-card__title em { font-style: normal; color: var(--c-primary); }
.video-card__text { font-size: 14px; line-height: 1.65; color: var(--c-text-2); text-wrap: pretty; }
.video-card__fallback { padding: 24px; color: var(--c-white); font-size: 14px; }
.video-card__fallback a { color: var(--c-blue-150); text-decoration: underline; }

/* ---------- 13. 行业版图：照片卡片横向滑动（照片取自 opt-xplanner.com 旧站行业轮播） ----------
   原生横向滚动 + scroll-snap：无 JS 也能滑（并保留原生滚动条）；site.js 运行后隐藏滚动条，
   由标题行右侧的左右箭头翻页、底部进度条显示位置。键盘 Tab 到屏外卡片时浏览器会自动滚入视口 */
.scroller-nav { display: none; gap: 10px; }
.xpl-ready .scroller-nav { display: flex; }
.scroller-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-border); background: var(--c-white); color: var(--c-ink-blue);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, opacity .2s;
}
.scroller-btn::before { content: ""; width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); margin-right: 3px; }
.scroller-btn--prev::before { transform: rotate(-135deg); margin: 0 0 0 3px; }
.scroller-btn:hover:not(:disabled) { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }
.scroller-btn:disabled { opacity: .35; cursor: default; }
.ind-cards {
  list-style: none; margin: 0; padding: 0 0 12px; display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 16px) / 4.35); gap: 16px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.xpl-ready .ind-cards { scrollbar-width: none; }
.xpl-ready .ind-cards::-webkit-scrollbar { display: none; }
.ind-cards > li { scroll-snap-align: start; min-width: 0; }
.ind-card {
  position: relative; display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 384 / 560;
  background: var(--c-navy); color: var(--c-white); isolation: isolate;
}
.ind-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s ease; }
/* 照片上半部本身已压暗；再叠一层上深下浅的渐变，保证白字对比度 */
.ind-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 13, 43, 0.72) 0%, rgba(4, 13, 43, 0.35) 42%, rgba(4, 13, 43, 0) 70%, rgba(4, 13, 43, 0.25) 100%);
  transition: opacity .4s;
}
.ind-card__body { position: absolute; left: 0; right: 0; top: 0; padding: 28px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ind-card__body::before { content: ""; width: 36px; height: 4px; border-radius: 2px; background: var(--c-primary); margin-bottom: 16px; transition: width .4s; }
.ind-card__n { font-size: 12px; letter-spacing: 0.1em; color: var(--c-blue-150); }
.ind-card__name { font-weight: 600; font-size: 24px; line-height: 1.2; text-shadow: 0 1px 3px rgba(4, 13, 43, 0.5); }
html[lang="en"] .ind-card__name { font-size: 21px; }
.ind-card__alt { font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.78); }
.ind-card__alt:empty { display: none; }
.ind-card__more {
  margin-top: 18px; font-size: 13px; line-height: 1; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.85);
  transition: background-color .25s, border-color .25s;
}
.ind-card:hover .ind-card__img, .ind-card:focus-visible .ind-card__img { transform: scale(1.06); }
.ind-card:hover .ind-card__body::before, .ind-card:focus-visible .ind-card__body::before { width: 56px; }
.ind-card:hover .ind-card__more, .ind-card:focus-visible .ind-card__more { background: var(--c-primary); border-color: var(--c-primary); }
.ind-foot { margin-top: 20px; display: flex; align-items: center; gap: 24px; }
.scroller-bar { flex: 1; height: 3px; border-radius: 2px; background: var(--c-border); overflow: hidden; visibility: hidden; }
.xpl-ready .scroller-bar { visibility: visible; }
.scroller-bar__thumb { display: block; height: 100%; width: 30%; border-radius: 2px; background: var(--c-primary); transform-origin: left; transition: transform .2s ease-out, width .2s; }
.ind-foot .link-arrow { margin-left: auto; white-space: nowrap; }

/* ---------- 14. 数字表（实施数字 · XPL-REF） ---------- */
.ref-sheet { background: var(--c-white); border: 1px solid var(--c-border-soft); border-radius: var(--radius); box-shadow: var(--shadow-card); margin: 8px; }
.ref-sheet__head { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--c-border); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 24px; }
.ref-sheet__title { flex: 1; min-width: 16ch; padding: 12px 24px; margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.ref-sheet__cell { padding: 12px 24px; border-left: 1px solid var(--c-border); color: var(--c-text-2); white-space: nowrap; }
.ref-sheet__rows { list-style: none; display: flex; flex-direction: column; }
.ref-sheet__row { display: grid; grid-template-columns: 48px minmax(120px, 160px) minmax(0, 1fr); gap: 12px 24px; align-items: center; padding: 12px 24px; border-bottom: 1px solid var(--c-line-row); }
.ref-sheet__n { font-weight: 600; font-size: 13px; letter-spacing: 0.08em; color: var(--c-link); }
.ref-sheet__v { font-weight: 600; font-size: 30px; line-height: 1.1; color: var(--c-ink-blue); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ref-sheet__k { font-size: 14px; line-height: 1.5; color: var(--c-text-2); text-wrap: pretty; }
.ref-sheet__note { margin: 0; padding: 12px 24px; font-size: 13px; line-height: 24px; color: var(--c-text-2); }

/* ---------- 15. 版本更新 ---------- */
.release { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 2px solid var(--c-ink-blue); min-width: 0; }
.release__meta { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; font-size: 13px; letter-spacing: 0.08em; color: var(--c-link); }
.release__title { font-weight: 600; font-size: 24px; line-height: 1.2; margin: 0; }
.release__text { font-size: 14px; line-height: 1.6; color: var(--c-text-2); text-wrap: pretty; }
.release-date { font-size: 14px; letter-spacing: 0.08em; color: var(--c-blue-200); }
.release-desc { font-size: 15px; line-height: 1.7; color: var(--c-blue-150); text-wrap: pretty; }

/* ---------- 16. 客户 LOGO 墙 ---------- */
.logo-wall { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }   /* 12 家：4×3；<1100 半栏 3×4；<860 通栏 4×3；≤560 2×6 */
.logo-wall__item {
  aspect-ratio: 5 / 3; border: 1px solid var(--c-border); background: var(--c-white); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; padding: 10px 12px; min-width: 0;
}
.logo-wall__item img { display: block; height: 36px; width: auto; max-width: 100%; object-fit: contain; }

/* ---------- 17. FAQ ---------- */
.faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--c-border); }
.faq-item { border-bottom: 1px solid var(--c-border); padding: 14px 0; }
.faq-item > summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  font-weight: 600; font-size: 18px; line-height: 1.45; border-radius: 2px;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+"; flex-shrink: 0; width: 1em; text-align: center; color: var(--c-primary); font-weight: 500; font-size: 22px; line-height: 1.2;
  transition: transform .2s;
}
.faq-item[open] > summary::after { transform: rotate(45deg); }
.faq-item > summary:hover { color: var(--c-ink-blue); }
.faq-item__a { margin: 10px 0 0; font-size: 14px; line-height: 1.7; color: var(--c-text-2); text-wrap: pretty; }

/* ---------- 18. CTA ---------- */
.cta { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.cta__title { font-weight: 600; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.1; margin: 0; max-width: 760px; text-wrap: pretty; }
.cta__desc { font-size: 16px; line-height: 1.6; color: var(--c-text-2); max-width: 560px; text-wrap: pretty; }
.cta .btn-row { margin-top: 8px; justify-content: center; }

/* ---------- 19. 页脚 ---------- */
.site-footer { background: var(--c-navy); color: var(--c-blue-150); }
.site-footer a { color: inherit; }
.site-footer a:hover { color: var(--c-white); }
.footer-grid { padding-top: 56px; padding-bottom: 32px; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 40px; }
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-brand__logo { align-self: flex-start; }
.footer-brand__text { font-size: 14px; line-height: 1.65; max-width: 380px; text-wrap: pretty; }
.footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; min-width: 0; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col__title { font-weight: 600; font-size: 12px; line-height: 1.5; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-blue-300); margin: 0 0 2px; }
.footer-col__k::after { content: ": "; }
.footer-bottom { border-top: 1px solid var(--c-line-dark-soft); }
.footer-bottom__inner { padding-top: 18px; padding-bottom: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--c-blue-300); }

/* ---------- 20. 产品页 ---------- */
.breadcrumb { padding-top: 24px; font-size: 13px; color: var(--c-text-2); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.breadcrumb li { display: flex; gap: 8px; }
.breadcrumb li + li::before { content: "/"; color: var(--c-text-2); }
.breadcrumb a { color: inherit; }
.breadcrumb a:hover { color: var(--c-primary); }
.breadcrumb [aria-current] { color: var(--c-text); }
.product-tabs { margin-top: 20px; border-bottom: 1px solid var(--c-border); }
.product-tabs ul { list-style: none; display: flex; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.product-tabs a {
  display: block; padding: 12px 18px; font-weight: 600; font-size: 16px; white-space: nowrap; color: var(--c-text-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.product-tabs a:hover { color: var(--c-ink-blue); }
.product-tabs a[aria-current="page"] { color: var(--c-ink-blue); border-bottom-color: var(--c-ink-blue); }
.product-hero { padding: 56px 0; }
.product-hero__copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.product-hero__title { font-weight: 600; font-size: clamp(40px, 5vw, 64px); line-height: 1.05; margin: 0; }
.product-hero__sub { font-size: 20px; line-height: 1.4; color: var(--c-ink-blue); font-weight: 500; }
.product-hero__desc { font-size: 16px; line-height: 1.65; color: var(--c-text-2); max-width: 520px; text-wrap: pretty; }
.product-hero .btn-row { margin-top: 6px; }
/* 配图容器 */
.figure-card { margin: 0; min-width: 0; background: var(--c-white); border: 1px solid var(--c-border-soft); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 16px; }
.figure-card--scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.figure-card--hero { background: var(--g-hero); border: 0; padding: 20px; }
.product-hero__shot { margin: 0; min-width: 0; }
.figure-card--bare { padding: 0; overflow: hidden; }
.figure-card__cap { margin-top: 10px; font-size: 13px; color: var(--c-text-2); }
/* 规格条 */
.spec-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.spec-bar__item { padding: 22px 20px 22px 0; margin-right: 20px; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--c-border); min-width: 0; }
.spec-bar__item:last-child { border-right: 0; margin-right: 0; }
.spec-bar__k { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-2); }
.spec-bar__v { font-weight: 600; font-size: 22px; line-height: 1.3; overflow-wrap: anywhere; }

/* ---------- 20c. 产品页：功能架构 / 产品特点 / 应用场景 / 实现价值 / 算法体系（内容取自 opt-xplanner.com 旧站产品页，图标为旧站 3D 图标 icon-NN.png） ---------- */
/* 功能架构：上方能力卡（APS）或模块组（Pro）→ 平台光核 → 下方分层面板 */
.arch { display: flex; flex-direction: column; gap: 14px; }
.arch-caps { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.arch-cap { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.arch-cap__desc {
  flex: 1; padding: 14px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.55; color: var(--c-white);
  background: linear-gradient(160deg, var(--c-primary), var(--c-blue-400)); box-shadow: 0 8px 20px rgba(26, 102, 255, 0.18); text-wrap: pretty;
}
.arch-cap__name { order: 1; margin: 0; text-align: center; font-weight: 600; font-size: 16px; }   /* 标题在 HTML 里在前，视觉上排到说明卡下方 */
.arch-mods { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr) minmax(0, 1.1fr) minmax(0, 1.1fr); gap: 12px; }
.arch-mod { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; background: var(--c-white); border: 1px solid var(--c-blue-100); border-radius: var(--radius); }
.arch-mod__title { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; font-size: 16px; color: var(--c-ink-blue); }
.arch-core {
  position: relative; align-self: center; margin: 8px 0 4px; padding: 14px 52px; border-radius: 999px; text-align: center;
  font-weight: 600; font-size: 22px; letter-spacing: 0.04em; color: var(--c-white);
  background: linear-gradient(120deg, var(--c-navy-2), var(--c-primary)); box-shadow: 0 12px 32px rgba(26, 102, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.arch-core::before, .arch-core::after { content: ""; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--c-blue-150); }
.arch-core::before { left: 24px; }
.arch-core::after { right: 24px; }
.arch-layer { padding: 18px 22px; background: var(--c-white); border: 1px solid var(--c-blue-100); border-radius: var(--radius); }
.arch-layer__title, .arch-mod__title { line-height: 1.4; }
.arch-layer__title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-weight: 600; font-size: 16px; color: var(--c-ink-blue); }
.arch-layer__title::before, .arch-mod__title::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--c-primary); }
.arch-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 24px; }
.arch-group { min-width: 0; }
.arch-group__title { margin: 0 0 8px; font-weight: 600; font-size: 13px; color: var(--c-text-2); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--c-blue-100); background: var(--c-blue-50); font-size: 13px; line-height: 1.6; color: var(--c-text); }
.chips--solid li { border-color: transparent; background: linear-gradient(160deg, var(--c-primary), var(--c-blue-400)); color: var(--c-white); }
.chips--strong li { border-color: var(--c-blue-150); background: var(--c-white); font-weight: 600; color: var(--c-ink-blue); }
.chips + .chips { margin-top: 8px; }
/* 产品特点：文字 + 右侧 3D 图标 */
.feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.feat-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feat { flex-direction: row; align-items: flex-start; gap: 16px; }
.feat__body { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.feat__title { margin: 0; font-weight: 600; font-size: 19px; line-height: 1.35; }
.feat__text { font-size: 14px; line-height: 1.7; color: var(--c-text-2); text-wrap: pretty; }
.feat__icon { flex-shrink: 0; width: 56px; height: 56px; }
/* 应用场景（APS）：居中图标卡 */
.scene-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.scene { align-items: center; text-align: center; padding: 28px 24px; }
.scene__icon { width: 64px; height: 64px; }
.scene__title { margin: 4px 0 0; font-weight: 600; font-size: 18px; }
.scene__text { font-size: 14px; line-height: 1.65; color: var(--c-text-2); text-wrap: pretty; }
/* 应用场景（Pro）：智能工厂整体方案——上下两排业务卡，中间「指挥大脑」与指令 / 反馈两条流向 */
.hub { display: flex; flex-direction: column; gap: 24px; }
.hub-row { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.hub-row--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0 7%; }
.hub-card {
  display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 16px; border-radius: var(--radius-sm); color: var(--c-white);
  background: linear-gradient(160deg, var(--c-primary), var(--c-blue-400)); box-shadow: 0 8px 20px rgba(26, 102, 255, 0.18);
}
.hub-card__title { margin: 0; font-weight: 600; font-size: 15px; line-height: 1.4; }
.hub-card__text { font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.9); text-wrap: pretty; }
.hub-mid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; }
.hub-flow { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; color: var(--c-ink-blue); }
.hub-flow::after { content: ""; flex: 1; min-width: 24px; height: 2px; background: linear-gradient(90deg, var(--c-blue-150), var(--c-primary)); }
.hub-flow--up { flex-direction: row-reverse; text-align: right; }
.hub-flow--up::after { background: linear-gradient(270deg, var(--c-blue-150), var(--c-primary)); }
.hub-brain { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 240px; text-align: center; }
.hub-brain__orb {
  display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--c-blue-300), var(--c-primary) 55%, var(--c-navy-2));
  box-shadow: 0 0 0 10px rgba(26, 102, 255, 0.1), 0 0 0 22px rgba(26, 102, 255, 0.05), 0 16px 40px rgba(26, 102, 255, 0.35);
}
.hub-brain__orb svg { width: 54px; height: 54px; fill: none; stroke: var(--c-white); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hub-brain__name { margin: 12px 0 0; font-weight: 600; font-size: 18px; }
.hub-brain__text { font-size: 13px; line-height: 1.6; color: var(--c-text-2); text-wrap: pretty; }
/* 实现价值：大号序号卡 */
.value-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.value-item { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: var(--c-white); border-top: 3px solid var(--c-primary); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-card); }
.value-item__n { font-weight: 600; font-size: 36px; line-height: 1; color: var(--c-primary); font-variant-numeric: tabular-nums; }
.value-item__title { margin: 4px 0 0; font-weight: 600; font-size: 18px; line-height: 1.4; }
.value-item__text { font-size: 14px; line-height: 1.7; color: var(--c-text-2); text-wrap: pretty; }
/* 算法体系（Core）：4 种生产模型 → 一张约束网络，下附三张说明卡 */
.algo-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; margin-bottom: 28px; }
.algo-flow__model { padding: 10px 18px; border-radius: var(--radius-sm); border: 1px solid var(--c-blue-150); background: var(--c-white); font-weight: 600; color: var(--c-ink-blue); }
.algo-flow__op { font-weight: 600; color: var(--c-text-3); }
.algo-flow__net { padding: 10px 24px; border-radius: 999px; background: linear-gradient(120deg, var(--c-navy-2), var(--c-primary)); font-weight: 600; color: var(--c-white); box-shadow: 0 10px 24px rgba(26, 102, 255, 0.25); }
.algo-sub { margin: 6px 0 6px; font-weight: 600; font-size: 13px; color: var(--c-text-2); }

/* ---------- 20b. 横向滚动提示（site.js 按滚动位置切类名，可继续滚动的一侧渐隐） ---------- */
.is-scroll-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.is-scroll-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); mask-image: linear-gradient(90deg, transparent, #000 48px); }
.is-scroll-l.is-scroll-r {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

/* ---------- 21. 渐显（仅 JS；site.js 加载失败时 3 s 后 CSS 兜底显示） ---------- */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
.js:not(.xpl-ready) .reveal { animation: xpl-reveal-fallback .01s linear 3s forwards; }
@keyframes xpl-reveal-fallback { to { opacity: 1; transform: none; } }

/* ---------- 22. 行业方案页：枢纽页 industries.html + 12 篇 industry-*.html（只有中文，页面不带 XPL_I18N 字典） ---------- */
/* 枢纽页页头 */
.page-head { padding-top: 40px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 20px; }
.page-head .kicker { align-self: flex-start; }
.page-head__title { font-weight: 600; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.12; margin: 0; text-wrap: balance; }
.page-head__title em { font-style: normal; color: var(--c-primary); }
.page-head .lede { font-size: 16px; }
.fact-row { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--c-border); font-size: 14px; color: var(--c-text-2); }
.fact-row b { font-weight: 600; font-size: 1.15em; color: var(--c-ink-blue); }
/* 枢纽页行业卡：4 列，末张「你的行业」通栏 */
.ind-atlas { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ind-atlas > li { min-width: 0; }
.ind-atlas > li:last-child:nth-child(4n + 1) { grid-column: 1 / -1; }
.ind-tile {
  position: relative; height: 100%; min-height: 184px; display: flex; flex-direction: column; gap: 4px;
  padding: 22px 22px 20px; background: var(--c-white); color: var(--c-text);
  border: 1px solid var(--c-border); border-top: 3px solid var(--c-border); border-radius: var(--radius);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.ind-tile:hover, .ind-tile:focus-visible { color: var(--c-text); border-top-color: var(--c-primary); box-shadow: var(--shadow-card-hi); transform: translateY(-2px); }
.ind-tile::after {
  content: "→"; position: absolute; top: 18px; right: 20px; color: var(--c-primary);
  opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .25s;
}
.ind-tile:hover::after, .ind-tile:focus-visible::after { opacity: 1; transform: none; }
.ind-tile__n { font-weight: 600; font-size: 12px; letter-spacing: 0.1em; color: var(--c-primary); }
.ind-tile__name { margin-top: 8px; font-weight: 600; font-size: 21px; line-height: 1.25; }
.ind-tile__en { font-size: 12px; letter-spacing: 0.04em; color: var(--c-text-3); }
.ind-tile__tag { margin-top: auto; padding-top: 14px; font-size: 13px; line-height: 1.55; color: var(--c-text-2); text-wrap: pretty; }
.ind-tile--more { min-height: 0; background: linear-gradient(120deg, var(--c-navy) 0%, var(--c-navy-2) 55%, var(--c-link) 100%); border-color: transparent; color: var(--c-white); }
.ind-tile--more:hover, .ind-tile--more:focus-visible { color: var(--c-white); border-top-color: var(--c-blue-200); }
.ind-tile--more .ind-tile__n, .ind-tile--more .ind-tile__en, .ind-tile--more .ind-tile__tag, .ind-tile--more::after { color: var(--c-blue-150); }
.ind-tile--more::after { opacity: 1; transform: none; }

/* 行业页主视觉：左栏文字，右栏行业照片（照片同首页行业卡 ind-*.jpg；没有对应照片的行业用蓝色序号卡） */
.ind-hero { padding: 40px 0 64px; }
.ind-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: center; }
.ind-hero__copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ind-hero__copy .kicker { align-self: flex-start; }
.ind-hero__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0; font-weight: 600; font-size: clamp(40px, 5vw, 60px); line-height: 1.1; }
.ind-hero__en { font-size: 16px; font-weight: 500; letter-spacing: 0.04em; color: var(--c-text-3); }
.ind-hero__tag { font-size: 20px; line-height: 1.5; font-weight: 500; color: var(--c-ink-blue); text-wrap: pretty; }
.ind-metrics { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.ind-metrics li { padding: 5px 14px; border-radius: 999px; border: 1px solid var(--c-blue-150); background: var(--c-blue-50); font-size: 13px; line-height: 1.6; color: var(--c-text-2); }
.ind-metrics b { font-weight: 600; color: var(--c-ink-blue); }
.ind-hero .btn-row { margin-top: 6px; }
.ind-hero__photo { position: relative; margin: 0; aspect-ratio: 384 / 560; overflow: hidden; border-radius: var(--radius); background: var(--c-navy); box-shadow: var(--shadow-panel); }
.ind-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ind-hero__photo::before { content: ""; position: absolute; left: 24px; top: 24px; z-index: 1; width: 36px; height: 4px; border-radius: 2px; background: var(--c-primary); }
.ind-hero__photo--plain {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 28px 24px; color: var(--c-white);
  background:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 100% 32px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 32px 100%,
    linear-gradient(160deg, var(--c-navy) 0%, var(--c-navy-2) 50%, var(--c-primary) 100%);
}
.ind-hero__photo-n { font-weight: 600; font-size: 96px; line-height: 1; letter-spacing: -0.02em; }
.ind-hero__photo-en { font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-blue-150); }

/* 计划体系示意图（SVG 各元素类名沿用原页面） */
.schematic { margin: 0; padding: 28px 32px 22px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.schematic__svg { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.schematic svg { display: block; width: 100%; min-width: 680px; height: auto; overflow: visible; }
.schematic .pill { fill: var(--c-white); stroke: var(--c-blue-150); stroke-width: 1; }
.schematic .stg { fill: var(--c-bg-soft); stroke: var(--c-border); stroke-width: 1; }
.schematic .pill.lead, .schematic .stg.hot { fill: var(--c-blue-50); stroke: var(--c-primary); stroke-width: 1.5; }
.schematic text { font-family: var(--font); }
.schematic .pill-t { fill: var(--c-text-2); font-size: 13px; text-anchor: middle; }
.schematic .pill-t.lead { fill: var(--c-ink-blue); font-weight: 600; }
.schematic .stg-t { fill: var(--c-text); font-weight: 600; font-size: 16px; text-anchor: middle; }
.schematic .stg-t.hot { fill: var(--c-primary); }
.schematic .tier-tag { fill: var(--c-text-3); font-size: 11px; }
.schematic .hot-tag { fill: var(--c-primary); font-weight: 600; font-size: 10px; letter-spacing: 0.12em; text-anchor: middle; }
.schematic .pull-lab { fill: var(--c-ink-blue); font-size: 12px; text-anchor: middle; }
.schematic .flow { fill: none; stroke: var(--c-text-3); stroke-width: 1.4; }
.schematic .pull { fill: none; stroke: var(--c-primary); stroke-width: 1.6; }
.schematic__cap { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--c-border-soft); font-size: 13px; line-height: 1.6; color: var(--c-text-2); }
.schematic__cap b { font-weight: 600; color: var(--c-ink-blue); }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.svg-defs #ar path { fill: var(--c-text-3); }
.svg-defs #arHot path { fill: var(--c-primary); }

/* 行业页正文：原型 / 难点两卡并排，方案要点通栏三列，典型价值深底横幅 */
.ind-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ind-block { padding: 28px; gap: 0; }
.ind-block--wide { grid-column: 1 / -1; border-top: 3px solid var(--c-primary); }
.ind-block p { font-size: 15px; line-height: 1.8; color: var(--c-text-2); text-wrap: pretty; }
.ind-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ind-list li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.7; color: var(--c-text-2); text-wrap: pretty; }
.ind-list li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-primary); }
.ind-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.ind-points > div { min-width: 0; padding: 0 24px; border-left: 1px solid var(--c-border); }
.ind-points > div:first-child { padding-left: 0; border-left: 0; }
.ind-points > div:last-child { padding-right: 0; }
.ind-points dt { margin-bottom: 8px; font-weight: 600; font-size: 17px; line-height: 1.4; color: var(--c-ink-blue); }
.ind-points dd { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--c-text-2); text-wrap: pretty; }
.ind-value { grid-column: 1 / -1; margin-top: 0; }
.ind-value .banner__label { margin: 0; }
/* 上一个 / 下一个行业 */
.pn-nav { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--c-border); }
.pn-nav__link { display: flex; flex-direction: column; gap: 2px; font-weight: 600; font-size: 17px; line-height: 1.4; color: var(--c-text); }
.pn-nav__link:hover { color: var(--c-primary); }
.pn-nav__k { font-weight: 500; font-size: 12px; letter-spacing: 0.08em; color: var(--c-text-3); }
.pn-nav__next { align-items: flex-end; text-align: right; }
.cta__title em { font-style: normal; color: var(--c-primary); }

/* ---------- 23. OntoCore 页（ontocore.html：供应链底座，中英双语） ---------- */
.oc-hero { position: relative; isolation: isolate; overflow: hidden; color: var(--c-white); background: linear-gradient(120deg, var(--c-navy) 0%, var(--c-navy-2) 55%, var(--c-link) 100%); }
/* 蓝图网格，向右上渐隐 */
.oc-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 85% at 78% 35%, #000 15%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 85% at 78% 35%, #000 15%, transparent 75%);
}
.oc-hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding-top: 88px; padding-bottom: 40px; }
.oc-hero .kicker { color: var(--c-blue-150); }
.oc-hero__title { margin: 0; max-width: 15em; font-weight: 600; font-size: clamp(38px, 5.4vw, 72px); line-height: 1.1; text-wrap: balance; }
.oc-hero__title em { font-style: normal; color: var(--c-blue-150); }
.oc-hero__sub { max-width: 640px; font-size: 17px; line-height: 1.75; color: var(--c-blue-100); text-wrap: pretty; }
.oc-hero__sub b { font-weight: 600; color: var(--c-white); }
.oc-hero .btn-row { margin-top: 8px; }
.oc-hero__meta { list-style: none; align-self: stretch; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px; margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--c-line-dark); font-size: 13px; color: var(--c-blue-150); }
.oc-hero__meta b { font-weight: 600; color: var(--c-white); }
.oc-shot { margin: 0; }
.oc-tag { font-weight: 600; font-size: 12px; line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-primary); }
/* 01 共同语言：三层消费方 → 共享本体 */
.oc-onto { display: flex; flex-direction: column; gap: 16px; }
.oc-onto__flow { text-align: center; font-weight: 600; font-size: 13px; letter-spacing: 0.08em; color: var(--c-primary); }
.oc-core { display: flex; flex-direction: column; gap: 8px; padding: 28px; border: 2px solid var(--c-primary); border-radius: var(--radius); background: linear-gradient(180deg, var(--c-blue-50), var(--c-white) 75%); }
.oc-core__title { margin: 0 0 10px; font-weight: 600; font-size: 26px; line-height: 1.3; }
.oc-core__title em { font-style: normal; color: var(--c-primary); }
.oc-triple { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.oc-triple__item { min-width: 0; padding: 18px 20px; background: var(--c-white); border: 1px solid var(--c-blue-150); border-radius: var(--radius-sm); }
.oc-triple__k { font-weight: 600; font-size: 17px; line-height: 1.4; }
.oc-triple__k .en { margin-left: 8px; font-weight: 500; font-size: 13px; letter-spacing: 0.04em; color: var(--c-text-3); }
.oc-triple__item p { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--c-text-2); text-wrap: pretty; }
.oc-note { max-width: 760px; margin-top: 24px; font-size: 15px; line-height: 1.75; color: var(--c-text-2); text-wrap: pretty; }
.oc-note b { font-weight: 600; color: var(--c-text); }
.card__title .en { display: block; margin-top: 4px; font-weight: 500; font-size: 14px; color: var(--c-primary); }
/* 02 应变速度：过去 / 现在对比 + 同时生效的 6 个面 */
.oc-speed { display: grid; grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr); gap: 40px; align-items: stretch; }
.oc-vs { display: grid; grid-template-rows: 1fr auto 1fr; overflow: hidden; background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius); }
.oc-lane { display: flex; flex-direction: column; gap: 8px; padding: 28px; }
.oc-lane--now { background: var(--c-blue-50); }
.oc-lane .oc-tag { color: var(--c-text-3); }
.oc-lane--now .oc-tag { color: var(--c-primary); }
.oc-lane__big { font-weight: 600; font-size: 32px; line-height: 1.15; color: var(--c-text-3); }
.oc-lane--now .oc-lane__big { color: var(--c-primary); }
.oc-lane__big em { font-style: normal; }
.oc-lane__title { margin: 4px 0 0; font-weight: 600; font-size: 20px; line-height: 1.4; }
.oc-lane p { font-size: 14px; line-height: 1.65; color: var(--c-text-2); text-wrap: pretty; }
.oc-vs__div { padding: 10px 16px; text-align: center; font-weight: 600; font-size: 12px; letter-spacing: 0.1em; color: var(--c-white); background: var(--c-primary); }
.oc-surf { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.oc-surf__arrow { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 13px; letter-spacing: 0.08em; color: var(--c-primary); }
.oc-surf__arrow::before { content: ""; flex-shrink: 0; width: 28px; height: 2px; background: var(--c-primary); }
.oc-surf__grid { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.oc-surf__item { min-width: 0; padding: 18px 20px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-sm); }
.oc-surf__l { font-weight: 600; font-size: 16px; line-height: 1.4; }
.oc-surf__d { margin-top: 4px; font-size: 13px; line-height: 1.55; color: var(--c-text-2); text-wrap: pretty; }
/* 03 决策底座：底部提示条 */
.oc-foot { margin-top: 20px; padding: 18px 22px; border: 1px solid var(--c-blue-150); border-left: 4px solid var(--c-primary); border-radius: var(--radius); background: var(--c-blue-50); font-size: 15px; line-height: 1.7; color: var(--c-text-2); text-wrap: pretty; }
.oc-foot b { font-weight: 600; color: var(--c-ink-blue); }
/* 04 价值地图 */
.oc-caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.oc-caps .card__title { font-size: 19px; }
/* 05 同源 */
.oc-kin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.oc-kin__side { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 32px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.oc-kin__side--core { border-color: var(--c-primary); background: linear-gradient(180deg, var(--c-blue-50), var(--c-white) 60%); }
.oc-kin__name { margin: 0; font-weight: 600; font-size: 30px; line-height: 1.2; }
.oc-kin__name em { font-style: normal; color: var(--c-primary); }
.oc-kin__role { font-weight: 600; font-size: 14px; color: var(--c-ink-blue); }
.oc-kin__side p { font-size: 15px; line-height: 1.7; color: var(--c-text-2); text-wrap: pretty; }
.oc-kin-note { max-width: 960px; margin: 40px auto 0; text-align: center; font-weight: 600; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.5; text-wrap: balance; }
.oc-kin-note em { font-style: normal; color: var(--c-primary); }

/* =====================================================================
   响应式
   ===================================================================== */
@media (max-width: 1279.98px) {
  .header-tel { display: none; }
}
@media (max-width: 1199.98px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1099.98px) {
  .nav-wide { display: none; }
  .header-tel { display: none; }
  .ind-cards { grid-auto-columns: calc((100% - 2 * 16px) / 2.6); }
  .spec-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-bar__item:nth-child(2n) { border-right: 0; margin-right: 0; }
  .spec-bar__item:nth-child(n+3) { border-top: 1px solid var(--c-border); }
  .split .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ind-atlas, .oc-caps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .arch-caps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .arch-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-row, .hub-row--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; }
  .feat-grid, .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ind-atlas > li:last-child:nth-child(4n + 1) { grid-column: auto; }
  .ind-atlas > li:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .ind-hero__grid { grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; }
  .ind-points { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ind-points > div, .ind-points > div:first-child { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--c-border); }
  .ind-points > div:first-child { padding-top: 0; border-top: 0; }
  .oc-speed { grid-template-columns: minmax(0, 1fr); }
  /* 860–1099：文字栏占到视宽 ~75%，压暗区相应右移；甘特排到文字下方，限宽 */
  .hero { --hero-shade: linear-gradient(90deg, rgba(8, 28, 80, 0.92) 0%, rgba(11, 61, 145, 0.80) 50%, rgba(26, 102, 255, 0.32) 82%, rgba(26, 102, 255, 0.12) 100%); }
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero__figure { width: 100%; max-width: 640px; }
}

@media (max-width: 859.98px) {
  :root { --sec-y: 64px; }
  .site-header__inner { gap: 12px; }
  .site-header .brand { --brand-org-h: 34px; --brand-sep-h: 22px; --brand-gap: 9px; --brand-product-h: 22px; }
  .platform-grid, .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split .logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* 无 JS：导航换行成第二排（页头约 94px 高，锚点留出更多顶部余量） */
  html:not(.js) .site-header__inner { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 8px; row-gap: 4px; }
  html:not(.js) .site-nav { order: 5; width: 100%; margin: 0; overflow-x: auto; overflow-y: hidden; gap: 18px; font-size: 14px; }
  html:not(.js) .header-cta { margin-left: auto; }
  html:not(.js) [id] { scroll-margin-top: 110px; }
  /* 有 JS：折叠为汉堡菜单 + 下拉面板 */
  .js .site-header__inner > .lang-switch { display: none; }
  .js .header-cta { margin-left: auto; }
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav {
    position: absolute; top: var(--header-h); left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 20px; background: var(--c-white);
    border-bottom: 1px solid var(--c-border); box-shadow: var(--shadow-panel);
    font-size: 16px;
    visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .js .nav-open .site-nav,
  /* site.js 未到 / 加载失败时的兜底：悬停（触屏即点按）或聚焦汉堡按钮、或面板内有焦点/悬停时展开 */
  .js:not(.xpl-ready) .site-nav:hover, .js:not(.xpl-ready) .site-nav:focus-within {
    visibility: visible; opacity: 1; transform: none; pointer-events: auto;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
  }
  /* :has() 单独成条：不支持的浏览器只丢这一条 */
  .js:not(.xpl-ready) .site-header__inner:has(.nav-toggle:hover, .nav-toggle:focus) .site-nav {
    visibility: visible; opacity: 1; transform: none; pointer-events: auto;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
  }
  .js .site-nav a { padding: 14px 0; border-bottom: 1px solid var(--c-border-soft); }
  /* 面板里的二级栏目：一级行右侧是展开箭头，点开在下方列出（手风琴） */
  .js .site-nav .nav-item { flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--c-border-soft); }
  .js .site-nav .nav-item > a { flex: 1; border-bottom: 0; }
  .js .site-nav .subnav-toggle { width: 44px; height: 44px; margin-right: -12px; }
  .js .site-nav .subnav { position: static; display: none; width: 100%; min-width: 0; margin: -4px 0 10px; padding: 0 0 0 12px; border: 0; border-radius: 0; background: none; box-shadow: none; visibility: visible; opacity: 1; transform: none; transition: none; }
  .js .site-nav .subnav::before { display: none; }
  .js .site-nav .nav-item.is-open > .subnav { display: block; }
  .js .site-nav .nav-item.is-open > .subnav--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .js .site-nav .subnav a { padding: 9px 0; border-bottom: 0; border-radius: 0; font-size: 15px; color: var(--c-text-2); background: none; white-space: normal; }
  .js .site-nav .subnav__all { margin-top: 2px; padding-top: 2px; border-top: 0; }
  html:not(.js) .subnav { display: none; }
  .site-nav .nav-wide { display: block; }
  html:not(.js) .site-nav .nav-wide { display: inline; }
  .site-nav .nav-item.nav-wide { display: flex; }
  .header-tel { display: none; }
  .js .site-nav .nav-tel { display: flex; align-items: center; gap: 8px; color: var(--c-ink-blue); font-weight: 600; }
  .js .site-nav .lang-switch { display: inline-flex; align-self: flex-start; margin-top: 16px; font-size: 14px; }
  .js .site-nav .lang-switch button { padding: 8px 16px; }

  .split { grid-template-columns: minmax(0, 1fr); }
  /* hero 窄屏：压暗改为上下均匀（文字铺满全宽）；第 4 屏右移取景，避开笔记本屏幕上的大数字贴着标题 */
  .hero { --hero-shade: linear-gradient(180deg, rgba(8, 28, 80, 0.58), rgba(8, 28, 80, 0.86)); }
  .hero__bg-item--4 { --hero-pos: 85% 50%; }
  .hero__inner { min-height: 0; padding-top: 64px; padding-bottom: 56px; }
  .grid--3, .grid--2, .video-grid { grid-template-columns: minmax(0, 1fr); }
  .ind-atlas, .oc-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arch-caps, .hub-row, .hub-row--5, .scene-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arch-mods, .feat-grid, .feat-grid--2, .value-grid { grid-template-columns: minmax(0, 1fr); }
  .arch-core { font-size: 19px; padding: 12px 40px; }
  /* 指挥大脑一栏居中，两条流向改成上下各一行 */
  .hub-mid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; }
  .hub-flow::after { display: none; }
  .hub-flow--down::before { content: "↓"; }
  .hub-flow--up::before { content: "↑"; }
  .hub-flow--up { flex-direction: row; text-align: left; }
  .ind-atlas > li:last-child:nth-child(3n + 1) { grid-column: auto; }
  .ind-atlas > li:last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
  /* 行业页：照片改为文字下方的横幅（裁中下部，避开照片上方的压暗区） */
  .ind-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ind-hero__photo { aspect-ratio: 16 / 9; }
  .ind-hero__photo img { object-position: 50% 70%; }
  .ind-hero__photo-n { font-size: 64px; }
  .ind-body, .oc-kin { grid-template-columns: minmax(0, 1fr); }
  .oc-onto .grid--3, .oc-triple { grid-template-columns: minmax(0, 1fr); }
  .oc-hero__inner { padding-top: 64px; }
  .oc-hero__meta { justify-content: flex-start; flex-direction: column; margin-top: 32px; }
  .sec-head--split { flex-direction: column; align-items: flex-start; }
  .banner { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .section--loose { padding: 72px 0; }
}

/* 窄屏且 <2x 屏才换 960 宽小图；高清手机（≥2x）hero 比 960 图高、会放大 2–4 倍发糊，仍用 1920 原图。
   条件与 index.html 的 preload media、site.js heroBg 的 matchMedia 三处一致，改一处要同步另两处 */
@media (max-width: 859.98px) and (max-resolution: 1.99dppx) {
  .hero__bg-item--1 { background-image: url(hero-1-960.jpg); }
  .hero__bg-item--2.is-loaded { background-image: url(hero-2-960.jpg); }
  .hero__bg-item--3.is-loaded { background-image: url(hero-3-960.jpg); }
  .hero__bg-item--4.is-loaded { background-image: url(hero-4-960.jpg); }
}

@media (max-width: 560px) {
  :root { --gutter: 20px; --sec-y: 56px; }
  .section--tight { padding: 44px 0; }
  .section--loose { padding: 64px 0; }
  .btn { padding: 11px 18px; }
  .btn--sm { padding: 7px 12px; font-size: 13px; }
  .sec-head { margin-bottom: 28px; }
  .subhead { margin-top: 40px; }
  .grid--4, .platform-grid { grid-template-columns: minmax(0, 1fr); }
  .platform-card { min-height: 0; }
  .hero__inner { padding-top: 48px; padding-bottom: 48px; }
  .hero__title { font-size: 30px; }
  html[lang="en"] .hero__title { font-size: 27px; }
  .hero__desc { font-size: 16px; }
  .hero-stats { gap: 14px 22px; }
  .hero-stats__v { font-size: 26px; }
  .brain-frame { padding: 12px 8px; }
  .banner { padding: 22px 20px; }
  .banner__text { font-size: 16px; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kv__v + .kv__k { margin-top: 6px; }
  /* 表格转为逐行卡片 */
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table, .data-table tbody, .data-table tr, .data-table th, .data-table td { display: block; width: 100%; }
  .data-table tr { padding: 12px 16px; border-bottom: 1px solid var(--c-line-row); }
  .data-table tbody tr:last-child { border-bottom: 0; }
  .data-table th, .data-table td { padding: 2px 0; border: 0; }
  .data-table .who { font-size: 13px; }
  .tabs__tab { padding: 10px 14px; }
  .tabs__tab-name { font-size: 15px; }
  .cap-list { grid-template-columns: minmax(0, 1fr); }
  .metrics { gap: 14px 20px; }
  .metric__v { font-size: 22px; }
  .step { grid-template-columns: 36px minmax(0, 1fr); gap: 4px 12px; }
  .step__tag { grid-column: 2; grid-row: 2; line-height: 1.4; }
  .step__title { font-size: 18px; }
  .ind-cards { grid-auto-columns: 72%; gap: 12px; }
  .ind-card__body { padding: 22px 20px; }
  .ind-card__name { font-size: 22px; }
  .ref-sheet { margin: 0; }
  .ref-sheet__title, .ref-sheet__cell { padding: 10px 16px; }
  .ref-sheet__title { flex-basis: 100%; border-bottom: 1px solid var(--c-border); }
  .ref-sheet__cell:first-of-type { border-left: 0; }
  .ref-sheet__row { grid-template-columns: 32px minmax(0, 1fr); gap: 2px 12px; padding: 12px 16px; }
  .ref-sheet__k { grid-column: 2; }
  .ref-sheet__v { font-size: 26px; }
  .ref-sheet__note { padding: 12px 16px; }
  .release__title { font-size: 21px; }
  .logo-wall, .split .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .logo-wall__item { aspect-ratio: 2 / 1; padding: 8px 10px; }
  .logo-wall__item img { height: 32px; }
  html:not(.js) .site-nav { gap: 12px; font-size: 13px; justify-content: space-between; }
  .product-tabs ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-tabs li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .product-tabs a { padding: 10px 12px; text-align: center; }
  .faq-item > summary { font-size: 16px; }
  .video-card__body { padding: 16px 18px 20px; }
  .video-card__title { font-size: 19px; }
  .product-hero { padding: 40px 0; }
  .product-hero__sub { font-size: 18px; }
  .spec-bar { grid-template-columns: minmax(0, 1fr); }
  .spec-bar__item { border-right: 0; margin-right: 0; padding: 16px 0; }
  .spec-bar__item + .spec-bar__item { border-top: 1px solid var(--c-border); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 44px; }
  .page-head { padding-top: 32px; padding-bottom: 44px; }
  .oc-caps, .oc-surf__grid { grid-template-columns: minmax(0, 1fr); }
  .scene-grid { grid-template-columns: minmax(0, 1fr); }
  .scene { padding: 22px 20px; }
  .arch-layer { padding: 16px; }
  .arch-groups { grid-template-columns: minmax(0, 1fr); }
  .hub-card { padding: 14px 12px; }
  .feat__icon { width: 48px; height: 48px; }
  /* 枢纽页行业卡手机上保持两列（单列 13 张太长），收紧字号与内边距 */
  .ind-atlas { gap: 10px; }
  .ind-tile { min-height: 0; padding: 16px 14px 14px; }
  .ind-tile::after { display: none; }
  .ind-tile__name { margin-top: 4px; font-size: 18px; }
  .ind-tile__en { font-size: 11px; }
  .ind-tile__tag { padding-top: 10px; font-size: 12px; }
  .ind-hero { padding: 32px 0 48px; }
  .ind-hero__tag { font-size: 18px; }
  .ind-block, .oc-core, .oc-lane, .oc-kin__side { padding: 22px 20px; }
  .schematic { padding: 18px 16px 14px; }
  .pn-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pn-nav__hub { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .oc-lane__big { font-size: 28px; }
  .oc-kin__name { font-size: 26px; }
}
@media (max-width: 420px) {
  /* 375/390 宽：收紧页头间距与 CTA，把空间留给品牌组（仍不够时品牌组等比微缩，见 .brand） */
  .site-header__inner { gap: 6px; }
  .header-cta.btn--sm { padding: 6px 8px; font-size: 12px; }
}
@media (max-width: 359.98px) {
  .header-cta { display: none; }                        /* <360 页头放不下；hero 里仍有「预约演示」 */
  .js .nav-toggle { margin-left: auto; }
}

/* =====================================================================
   减少动态
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
  .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; }
  .js .hero-slide.is-active, .js .hero-slide:not(.is-active) { transform: none; }
}

/* =====================================================================
   打印
   ===================================================================== */
@media print {
  .site-header, .nav-toggle, .skip-link, .hero-dots, .video-card__play, .tabs__list { display: none !important; }
  body { overflow: visible; }
  .reveal, .js .reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
  .js .hero-slides { display: flex !important; flex-direction: column; gap: 24px; }
  .js .hero-slide, .js .hero-slide:not(.is-active) { opacity: 1 !important; visibility: visible !important; transform: none !important; }
  [role="tabpanel"][hidden] { display: block !important; }
  .tabs__panel + .tabs__panel { margin-top: 24px !important; }
  details > :not(summary) { display: block; }
  details::details-content { content-visibility: visible; display: block; }
  .hero, .section--dark, .on-dark, .site-footer, .banner, .figure-card--hero, .oc-hero, .ind-tile--more, .ind-hero__photo--plain {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .card, .product-card, .ref-sheet, .video-card, .table-wrap { box-shadow: none; break-inside: avoid; }
  .brain-frame, .figure-card--scroll, .schematic__svg { overflow: visible; }
  .schematic svg { min-width: 0; }
  xp-brain { min-width: 0; }
  .section { padding: 32px 0; }
  /* 页脚品牌组：企业 logo 取消反白滤镜、只在其后垫白底（原色可见）；
     文字标保留浅色版，落在深蓝页脚底上（.site-footer 已 print-color-adjust:exact），不依赖换图 */
  .brand--inverse .brand__org {
    filter: none; background: #fff; padding: 4px 6px; border-radius: 4px; box-sizing: content-box;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}