/* =========================================================
   数云企业级 AI Agent 平台 - 全屏通用高保真样式系统 (01~10屏)
   ========================================================= */

:root {
  --bg-black: #020805;
  --bg-gray: #f7f7f7;
  --bg-gray-alt: #f2f2f2;
  --bg-dark-infra: #09120b;
  --bg-footer: #0a0a0a;

  --brand-green: #00c97b;
  --brand-green-hover: #00e08a;
  --g1: #10a86d;
  --g2: #00a67a;
  --b1: #18181b;

  --text-white: #f0f4f8;
  --text-gray-dark: #52525c;
  --text-gray-sub: #71717b;
  --text-gray-light: #9f9fa9;

  --border-hairline: 0.83px;

  /* 全站统一品牌缓动：快速启动、柔和收尾（交互过渡一律引用此变量；
     循环动画如呼吸效果的对称 ease-in-out 属正当节奏，不在此列） */
  --ease-brand: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; /* 移动端点击高亮交由 :active 反馈表达 */
}

html {
  scroll-behavior: smooth;
  /* 关闭移动端浏览器的**自动字号放大**（text autosizing / font boosting）。
     为什么必须有：本站是紧凑的定像素设计（9~48px 字号 + 大量固定尺寸容器），
     一旦移动端把正文字号自动放大，文字会溢出容器、与相邻元素互相压住，
     且每个屏区都会同时出现「文字压住」与「间距异常」。
     桌面端不触发该机制，故此处取值 100% 对桌面渲染无影响（几何基线可证）。 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 滚动条出现 / 消失时内容不横移（页面恒长时为无感防护，防边界场景跳动） */
  scrollbar-gutter: stable;
  /* 滚动条低调化：轨道透明 + thumb 中性半透明（深浅屏区皆不抢眼）+ 收窄；
     标准属性走这里（Chrome 121+ / Firefox），旧 WebKit 走下方伪元素段 */
  scrollbar-color: rgba(113, 113, 123, 0.38) transparent;
  scrollbar-width: thin;
}

/* 滚动条低调化（旧版 WebKit：Chrome <121 / Safari / 旧 Edge）——
   视觉宽度经透明边框内缩至 6px，实际可抓取区域仍 10px（不牺牲可用性）；
   悬停加亮一档，保证"找得到、抓得住" */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(113, 113, 123, 0.38);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(113, 113, 123, 0.62);
  background-clip: content-box;
}

/* 文本选中色：品牌绿底 + 深绿黑字（深浅屏区皆清晰，全站统一） */
::selection {
  background: var(--brand-green);
  color: #04231a;
}

/* 锚点跳转补偿：屏区顶到吸顶导航（76px）下沿，目标内容不被遮挡 */
[id^="sec-"] {
  scroll-margin-top: 76px;
}

/* 键盘焦点细环：仅键盘导航触发（:focus-visible），鼠标操作无感知；
   统一品牌绿，深 / 浅屏区皆清晰可辨 */
:focus-visible {
  outline: 2px solid var(--brand-green);
  outline-offset: 2px;
}

/* 按下触感：主要按钮 / 开关类物理下沉 1px（均已确认无 transform 基础值，不会覆盖位移） */
.btn-trial:active,
.btn-cta-large:active,
.val-carousel-arrow:active,
.val-carousel-dot:active,
.agent-nav-tab:active {
  transform: translateY(1px);
}

/* 全站元素级渐进展示（Scroll Reveal，2026-09-11）：[data-reveal] 标记的内容块进入
   视口时淡入 + 上浮 24px，逐块触发、同组 80ms 错峰（一次性，滚回不重播）；
   01 首屏不可藏（首帧即开场）、02 四阶段首播，两屏豁免（自带更高级演出）。
   位移用独立 translate 属性而非 transform——与元素既有的 transform（居中 /
   hover / 轮播 slot 等）互不干扰（先例：01 屏开场演出同款做法）。
   初始隐藏态类 .reveal-init 由 JS 添加——CSS 默认可见，JS 失效时不白屏；
   过渡挂在 .reveal-init.revealed 上，JS 在播放完成后移除 .reveal-init，
   终态 translate 为 none（不留非 none 值，避免长期占用 containing block）。
   错峰：data-reveal-delay 由 JS 注入 --rv-delay（带单位如 "80ms"），仅作用于本次过渡 */
.reveal-init {
  opacity: 0;
  translate: 0 24px;
}

.reveal-init.revealed {
  opacity: 1;
  translate: none;
  transition: opacity 0.7s var(--ease-brand) var(--rv-delay, 0s),
              translate 0.7s var(--ease-brand) var(--rv-delay, 0s);
}

body {
  background-color: var(--bg-black);
  color: var(--text-white);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
}

/* 通用画布与栅格居中 */
.site-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 横向剪裁超宽内容；overflow-x: hidden 会把 overflow-y 拖成 auto
     （site-wrapper 成为滚动容器）——屏级入场的 transform 溢出曾因此产生第二条
     滚动条。clip 不创建滚动容器，且纵向剪裁 transform 溢出（不污染视口滚动量）；
     hidden 保留作老浏览器兜底（不支持 clip 时维持原行为） */
  overflow-x: hidden;
  overflow: clip;
}

.screen-section {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

.canvas-container {
  position: relative;
  width: 1440px;
  flex-shrink: 0;
}

/* =========================================================
   01 首屏样式 (继承完美优化的点阵与深绿光晕)
   ========================================================= */
#sec-01 {
  /* 至少铺满视口：854px 为设计稿保底高度，更高视口下自适应铺满，矮屏保持 854px */
  height: 100vh;
  min-height: 854px;
  background-color: var(--bg-black);
  overflow: hidden;
}

#sec-01 .canvas-container {
  height: 100vh;
  min-height: 854px;
}

.hero-tech-bg {
  position: absolute;
  /* 背景层横向铺满整个视口：超宽屏（>1440px）下光晕/星尘不再被 1440px 画布两侧截断 */
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  min-width: 1440px;
  pointer-events: none;
  overflow: hidden;
}

.hero-ambient-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 38%, rgba(16, 68, 45, 0.55) 0%, rgba(8, 38, 25, 0.38) 36%, rgba(2, 12, 7, 0.7) 65%, rgba(2, 8, 5, 1) 85%);
}

/* 顶部下泄光锥：从画面顶部向中央扩散的柱状光（对应效果稿的"顶光"氛围） */
.hero-light-cone {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 860px;
  height: 640px;
  background:
    radial-gradient(ellipse 52% 78% at 50% 0%, rgba(34, 170, 122, 0.24) 0%, rgba(20, 105, 76, 0.14) 40%, transparent 72%),
    linear-gradient(to bottom, rgba(40, 180, 128, 0.07) 0%, transparent 62%);
  filter: blur(38px);
  pointer-events: none;
}

.hero-bottom-glow-large {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 1280px;
  height: 520px;
  background: radial-gradient(ellipse at 50% 75%, rgba(15, 61, 46, 0.55) 0%, rgba(10, 42, 30, 0.38) 42%, rgba(4, 18, 11, 0.15) 70%, transparent 85%);
  filter: blur(45px);
  pointer-events: none;
}

.hero-dialogue-underglow {
  position: absolute;
  top: 420px;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 260px;
  background: radial-gradient(ellipse at center, rgba(0, 201, 123, 0.16) 0%, rgba(16, 80, 52, 0.1) 45%, transparent 75%);
  filter: blur(35px);
  pointer-events: none;
}

.hero-stardust-layer {
  position: absolute;
  inset: 0;
  background-image: url('assets/stardust-particles.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  mix-blend-mode: screen;
  opacity: 0.85;
  pointer-events: none;
}

.hero-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(0, 201, 123, 0.032) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 201, 123, 0.032) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.9) 25%, rgba(0, 0, 0, 0.3) 65%, transparent 90%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.9) 25%, rgba(0, 0, 0, 0.3) 65%, transparent 90%);
}

/* 顶部全局导航：全站吸顶（fixed 居中于视口），滚动后淡入玻璃材质背景
   沉浸光感三要素：通透玻璃（低不透明度 + 小模糊 + 提饱和）+ 边缘光（亮描边/高光）+ 悬浮投影
   自适应主题：深色环境（默认）浅色文字；.on-light（浅色屏）深色文字 + 浅色玻璃 */
.hero-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1206px;
  height: 76px;
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 200;
  /* 主题变量：深色环境（默认） */
  --nav-fg: rgba(240, 244, 248, 0.55);
  --nav-fg-hover: #ffffff;
  --nav-logo-filter: none;
}
/* 浅色环境：文字转深色、Logo 压暗，保证在浅色玻璃上的对比度 */
.hero-header.on-light {
  --nav-fg: rgba(24, 24, 27, 0.66);
  --nav-fg-hover: #18181b;
  --nav-logo-filter: brightness(0.72);
}
/* 玻璃背景层（伪元素承载，滚动时淡入；通栏铺满视口宽度，内容仍 1206 居中）
   ▸ 通透度手动调节处：background 的末位透明度（当前 0.32） */
.hero-header::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  /* 深色玻璃 · 通透版：低不透明度 + 小模糊（保真）+ 提饱和（色彩透上来） */
  background: rgba(8, 14, 10, 0.32);
  -webkit-backdrop-filter: blur(4px) saturate(140%);
  backdrop-filter: blur(4px) saturate(140%);
  /* 边缘光（四周亮描边 + 顶部再亮一档）+ 底部柔和投影（悬浮感） */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 6px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity 0.28s var(--ease-brand);
  pointer-events: none;
  z-index: -1;
}
.hero-header.scrolled::before {
  opacity: 1;
}
/* 浅色环境玻璃：浅色通透 + 深色细描边 + 白色顶部高光 */
.hero-header.on-light::before {
  background: rgba(252, 252, 252, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(24, 24, 27, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 6px 24px rgba(0, 0, 0, 0.08);
}

.brand-logo-wrap {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.brand-logo-img {
  height: 34px;
  width: auto;
  display: block;
  filter: var(--nav-logo-filter, none);
  transition: filter 0.28s var(--ease-brand);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-link {
  color: var(--nav-fg, rgba(240, 244, 248, 0.55));
  font-size: 12px;
  text-decoration: none;
  transition: color 0.2s var(--ease-brand);
}

.nav-link:hover {
  color: var(--nav-fg-hover, #ffffff);
}

.btn-trial {
  background-color: var(--brand-green);
  color: #020805;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 201, 123, 0.25);
  transition: all 0.25s var(--ease-brand);
}

.btn-trial:hover {
  background-color: var(--brand-green-hover);
  transform: translateY(-1px);
}

/* =========================================================
   顶部导航下拉面板（产品与服务 / 案例与方案 / AI Lab / 关于我们）
   结构：双层描边面板（外层浅灰描边 + 内层近白），水平居中于页面容器
   ========================================================= */

/* --- 触发项：包裹层与激活态 --- */
.nav-item {
  display: flex;
  align-items: center;
}
.nav-item .nav-link {
  display: block;
  white-space: nowrap;
}
.nav-item.active .nav-link {
  color: var(--nav-fg-hover, #ffffff);
}

/* --- 浮层锚点：水平居中，位于导航栏下沿 --- */
.nav-drop-layer {
  position: absolute;
  top: 84px;
  left: 50%;
  width: 0;
  height: 0;
  z-index: 60;
}

/* --- 面板容器（外层）：浅灰描边 + 内缩，默认隐藏 --- */
/* 水平位置 = 居中于页面（默认）+ --drop-shift 动态偏移（data-follow 面板对齐触发项用） */
.nav-drop {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px;
  background: #f1f1f1;
  border: 1px solid rgba(164, 164, 164, 0.1);
  border-radius: 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(calc(-50% + var(--drop-shift, 0px))) translateY(-8px);
  transition: opacity 0.22s var(--ease-brand), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.22s;
}
.nav-drop.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(calc(-50% + var(--drop-shift, 0px))) translateY(0);
  transition: opacity 0.22s var(--ease-brand), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}

/* --- 面板内层：近白底 + 细描边 --- */
.nd-frame {
  display: flex;
  align-items: stretch;
  background: #fcfcfc;
  border: 1px solid rgba(51, 51, 51, 0.11);
  border-radius: 12px;
  overflow: hidden;
}
.nd-frame-products { width: 999px; }
.nd-frame-cases { width: 965px; }
.nd-frame-ailab { width: 990px; padding: 11px; gap: 10px; }
.nd-frame-about {
  width: 117px;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  padding: 28px;
}

/* --- 通用文本层级 --- */
.nd-group-title {
  font-size: 14px;
  line-height: 20px;
  color: #18181b;
}
.nd-item-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #18181b;
  transition: color 0.18s var(--ease-brand);
}
.nd-item-sub {
  font-size: 12px;
  line-height: 20px;
  color: #71717b;
}
.nd-link-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
}
.nd-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- 图标（内联 SVG symbol：随文字一同变色） --- */
.nav-icon-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.nd-ico {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  flex-shrink: 0;
  color: #71717b;
  transition: color 0.18s var(--ease-brand);
}

/* ============ ① 产品与服务 ============ */
.nd-col {
  flex-shrink: 0;
}
.nd-col-scenes {
  width: 251px;
  padding: 40px;
  background: #f8f8f8;
  border-right: 1px solid rgba(51, 51, 51, 0.11);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nd-scene-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.nd-scene-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-decoration: none;
}
.nd-scene-text {
  display: flex;
  flex-direction: column;
}
.nd-col-products {
  flex: 1;
  min-width: 0;
  padding: 40px;
  border-right: 1px solid rgba(51, 51, 51, 0.11);
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.nd-link-grid {
  display: grid;
  grid-template-columns: 140px 140px;
  gap: 24px 40px;
}
.nd-group-row {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
.nd-group-row .nd-group {
  width: 140px;
}

/* ============ ② 案例与方案 ============ */
.nd-col-promo {
  width: 280px;
  padding: 40px;
}
.nd-promo-card {
  position: relative;
  display: block;
  width: 240px;
  height: 330px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(229, 229, 229, 0.91);
  border: 1px solid #cccccc;
  text-decoration: none;
}
.nd-promo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* 半透明灰罩：对应设计稿覆盖在渐变图形上的灰底框，整体呈浅灰渐变观感 */
.nd-promo-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(229, 229, 229, 0.91);
  z-index: 1;
  pointer-events: none;
}
.nd-promo-new {
  position: absolute;
  left: 20px;
  top: 30px;
  padding: 4px 6px;
  font-size: 12px;
  line-height: 12px;
  font-weight: 600;
  color: #18181b;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid #18181b;
  border-radius: 4px;
  z-index: 2;
}
.nd-promo-text {
  position: absolute;
  left: 20px;
  top: 80px;
  width: 196px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 2;
}
.nd-promo-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #18181b;
}
.nd-promo-sub {
  font-size: 14px;
  line-height: 20px;
  color: #18181b;
}
.nd-promo-card .nd-more {
  position: absolute;
  left: 20px;
  top: 286px;
  z-index: 2;
}
.nd-col-industry {
  width: 364px;
  padding: 40px;
  border-right: 1px solid rgba(51, 51, 51, 0.11);
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.nd-industry-grid {
  display: grid;
  grid-template-columns: 110px 110px;
  gap: 30px 60px;
}
.nd-industry-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-decoration: none;
}

/* ============ 右侧视觉区（三个面板共用） ============ */
.nd-col-visual {
  width: 320px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.nd-visual-img {
  width: 240px;
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
  background: #18181b;
  margin-bottom: 24px;
  flex-shrink: 0;
}
.nd-visual-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nd-visual-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #18181b;
  margin-bottom: 10px;
}
.nd-visual-sub {
  font-size: 12px;
  line-height: 24px;
  color: #18181b;
  margin-bottom: 20px;
}
.nd-frame-cases .nd-visual-sub,
.nd-frame-ailab .nd-visual-sub {
  font-size: 14px;
}

/* --- "前往查看 / 立即下载" 链接 --- */
.nd-more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: #18181b;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s var(--ease-brand);
}
.nd-arrow-box {
  width: 10px;
  height: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nd-arrow {
  display: block;
  width: 8px;
  height: 4.5px;
  transform: rotate(-90deg);
}

/* ============ ③ AI Lab ============ */
.nd-col-ailab {
  width: 638px;
  padding: 40px;
  border-right: 1px solid rgba(150, 150, 150, 0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nd-ailab-grid {
  display: grid;
  grid-template-columns: 264px 264px;
  gap: 24px 30px;
}
.nd-ailab-card {
  position: relative;
  display: block;
  width: 264px;
  height: 137px;
  background: #f6f6f6;
  border: 1px solid rgba(150, 150, 150, 0.1);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 0.18s var(--ease-brand);
}
.nd-ailab-card:hover {
  border-color: var(--brand-green);
}
.nd-ailab-text {
  position: absolute;
  left: 20px;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nd-ailab-card .nd-item-sub {
  font-size: 14px;
}
.nd-ailab-illus {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 100px;
  height: 113px;
  pointer-events: none;
}

/* ============ ④ 关于我们 ============ */
.nd-about-link {
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  color: #18181b;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s var(--ease-brand);
}
.nd-about-link:hover {
  color: var(--brand-green);
}

/* ============ hover 变色（文字与图标） ============ */
.nd-link-item:hover .nd-item-title,
.nd-scene-item:hover .nd-item-title,
.nd-industry-item:hover .nd-item-title,
.nd-more:hover,
.nd-promo-card:hover .nd-more {
  color: var(--brand-green);
}
.nd-scene-item:hover .nd-ico,
.nd-industry-item:hover .nd-ico {
  color: var(--brand-green);
}

.hero-headline-wrap {
  position: absolute;
  top: 140px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  z-index: 20;
}

.hero-main-title {
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  letter-spacing: -0.94px;
  color: #f0f4f8;
}

.hero-sub-title {
  font-size: 14px;
  line-height: 23px;
  color: rgba(240, 244, 248, 0.45);
}

/* 两侧点阵字母 + 星尘粒子：Canvas 2D 自绘层（逐点独立呼吸/发光/散点漂浮）
   画布横向铺满整个视口（与 .hero-tech-bg 同款）：超宽屏（>1440px）下光点不再被 1440px 容器两侧截断；
   字母坐标由 JS 侧加居中偏移（OX）保持设计稿位置。实际绘制逻辑见 shuyun-full.js「01 首屏」节 */
.hero-fx-canvas {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  pointer-events: none;
  z-index: 15;
}

/* 中央 AI 对话框 */
.chat-container {
  position: absolute;
  top: 333px;
  left: 50%;
  transform: translateX(-50%);
  width: 565px;
  height: 228px;
  padding: 20px 20px 16px;
  border-radius: 19px;
  background: rgba(4, 16, 10, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 201, 123, 0.45);
  box-shadow: 0 0 20px rgba(0, 201, 123, 0.3), 0 0 45px rgba(0, 201, 123, 0.12), 0 18px 45px rgba(0, 0, 0, 0.75), inset 0 0 14px rgba(0, 201, 123, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 30;
  transition: all 0.35s var(--ease-brand);
}

.chat-container:hover, .chat-container.active-mode, .chat-container.input-mode {
  border-color: rgba(0, 201, 123, 0.85);
  box-shadow: 0 0 28px rgba(0, 201, 123, 0.48), 0 0 60px rgba(0, 201, 123, 0.22), 0 22px 55px rgba(0, 0, 0, 0.85), inset 0 0 18px rgba(0, 201, 123, 0.12);
}

/* —— 01 屏开场演出（会话级一次）：面板自下浮入 → 内部元素 60ms 阶梯浮现 →
   粒子从面板中释放（canvas 侧由 suction 驱动，见 shuyun-full.js heroIntro）。
   .hero-intro 由 <head> 内联脚本最早时机同步添加（防对话框先闪现再隐藏）；
   body 模块结合视口位置 / reduced-motion 定夺是否真正播放，未播则立即移除。
   入场用独立 translate 属性（与既有 transform: translateX(-50%) 居中互不干扰）。 */
/* 隐藏态仅在"未入场"（无 .intro-in）时命中——加入入场类即解除隐藏，浮入过渡随之上场。
   （若不加 :not 作用域，隐藏值会在入场后继续压住面板——面板拖到收尾才现身、粒子反而先出） */
.hero-intro .chat-container:not(.intro-in) {
  opacity: 0;
  translate: 0 28px;
}
/* 演出全程面板不可交互（.intro-in 就位后仍保持 none）：防"面板未出场 / 粒子飞行中"
   被悬停触发吸入、与演出时序打架（回吸冲突）；收尾移除 .hero-intro 后自动恢复 */
.hero-intro .chat-container {
  pointer-events: none;
}
.hero-intro .chat-container:not(.intro-in) > * {
  opacity: 0;
  translate: 0 12px;
}
.hero-intro .chat-container.intro-in {
  /* 叠加在既有 hover 过渡之后：opacity / translate 用 0.3s（快速浮入），其余属性维持 0.35s */
  transition: all 0.35s var(--ease-brand), opacity 0.3s var(--ease-brand), translate 0.3s var(--ease-brand);
}
.hero-intro .chat-container.intro-in > * {
  transition: opacity 0.3s var(--ease-brand), translate 0.3s var(--ease-brand);
}
.hero-intro .chat-container.intro-in > *:nth-child(1) { transition-delay: 0.06s; }
.hero-intro .chat-container.intro-in > *:nth-child(2) { transition-delay: 0.12s; }
.hero-intro .chat-container.intro-in > *:nth-child(3) { transition-delay: 0.18s; }
.hero-intro .chat-container.intro-in > *:nth-child(4) { transition-delay: 0.24s; }

.chat-vector-glow {
  position: absolute;
  top: 0.5px;
  right: -2px;
  width: 201px;
  height: 105px;
  pointer-events: none;
  opacity: 0.9;
}

.chat-vector-glow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.chat-textarea-placeholder {
  min-height: 48px;
  font-size: 12px;
  line-height: 20px;
  color: rgba(240, 244, 248, 0.3);
  /* 悬停热区：本块即"悬停进入输入模式"的触发区（见 shuyun-full.js 第 1 节），
     文本光标提示"此处可输入" */
  cursor: text;
  /* 退出输入模式：等输入框淡出（0.25s）后再显形（visibility 延迟翻转，避免文字重影） */
  transition: color 0.3s var(--ease-brand), visibility 0s 0.25s;
}

.chat-container:hover .chat-textarea-placeholder,
.chat-container.active-mode .chat-textarea-placeholder {
  color: #ffffff;
}

/* 真输入框（输入模式）：绝对定位覆盖文本区并向下占满（推荐卡已淡出），
   无边框透明底、品牌绿光标。展示态用 opacity + pointer-events 隐藏而非 display:none——
   display:none 的元素会被排除出焦点序列（Tab 不可达）且 focus() 静默失效，
   而本交互正是"焦点驱动"（focus 事件才加 .input-mode），用 display 会死锁。
   常驻可聚焦也让键盘 Tab 直接进入输入模式；绝对定位不参与布局，
   不影响开场演出入场阶梯的 nth-child 序号 */
.chat-input {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 58px; /* 底栏上沿（底栏 28 + padding-top 13 + 容器 padding-bottom 16 + 边框） */
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  font-family: inherit;
  font-size: 12px;
  line-height: 20px;
  color: #ffffff;
  caret-color: var(--brand-green);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-brand);
}

.chat-input::placeholder {
  color: rgba(240, 244, 248, 0.3);
}

.chat-container.input-mode .chat-input { opacity: 1; pointer-events: auto; }
/* 输入模式隐藏展示占位：用 visibility（留在文档流中）而非 display:none——
   display 会让 flex space-between 重排、推荐卡整体上跳；visibility 零位移，
   进入时即时隐藏（不与输入框重影），退出时经上方 0.25s 延迟再显形 */
.chat-container.input-mode .chat-textarea-placeholder {
  visibility: hidden;
  transition: color 0.3s var(--ease-brand), visibility 0s;
}

.question-cards-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
  transition: opacity 0.25s var(--ease-brand), visibility 0.25s;
}

/* 输入模式：推荐卡淡出（腾出空间给输入区），退出淡入复原 */
.chat-container.input-mode .question-cards-wrap {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.question-card {
  height: 30px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 0.787px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  width: fit-content;
  max-width: 100%;
  transition: all 0.25s var(--ease-brand);
}

.question-card-text {
  font-size: 10px;
  color: rgba(240, 244, 248, 0.45);
  white-space: nowrap;
}

.question-arrow-icon {
  width: 14px;
  height: 14px;
  margin-left: 10px;
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.25s var(--ease-brand);
  display: flex;
  align-items: center;
  justify-content: center;
}

.question-card.active-card, .question-card:hover {
  background: rgba(0, 44, 34, 0.55);
  border-color: rgba(0, 188, 125, 0.65);
}

.question-card.active-card .question-card-text, .question-card:hover .question-card-text {
  color: #ffffff;
}

.question-card.active-card .question-arrow-icon, .question-card:hover .question-arrow-icon {
  opacity: 1;
  transform: translateX(0);
}

.chat-bottom-bar {
  border-top: 0.787px solid rgba(255, 255, 255, 0.05);
  padding-top: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* —— 附件条（「+」上传的文件以 chip 展示，可单独删除）——
   绝对定位贴在底栏上方；无附件时整体 hidden（不占位、不影响入场阶梯） */
.chat-attachment-bar {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 62px; /* 底栏上沿（58）之上，落在输入框上收后让出的空档里 */
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  z-index: 2;
}

/* 有附件时输入框上收，把这 30px 让给附件条——
   否则 chip 会压住输入框里的文字（绝对定位层叠，且输入区本就占满到 58px） */
.chat-container.has-attachment .chat-input { bottom: 96px; }

.chat-attachment-bar[hidden] { display: none; }

.chat-attachment-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 168px;
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 10px;
  color: rgba(240, 244, 248, 0.72);
}

.chat-attachment-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-attachment-size {
  flex-shrink: 0;
  color: rgba(240, 244, 248, 0.35);
}

.chat-attachment-remove {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: rgba(240, 244, 248, 0.4);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s var(--ease-brand), background 0.2s var(--ease-brand);
}

.chat-attachment-remove:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

/* 上传中：降透明；失败：转红边（点击 chip 可重试） */
.chat-attachment-chip.uploading { opacity: 0.55; }
.chat-attachment-chip.error {
  border-color: rgba(255, 107, 107, 0.5);
  color: #ff8a8a;
}
.chat-attachment-chip.error .chat-attachment-size { color: rgba(255, 138, 138, 0.7); }

.chat-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-chat-add-pill {
  height: 26px;
  min-width: 26px;
  padding: 0 8px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(240, 244, 248, 0.45);
  font-size: 14px;
  transition: border-color 0.3s var(--ease-brand), color 0.3s var(--ease-brand), background 0.3s var(--ease-brand);
}

.tag-ai-auto-pill {
  height: 26px;
  padding: 0 12px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 500;
  color: rgba(240, 244, 248, 0.45);
  /* 由 div 升级为 button（可点击模型选择器）：清掉浏览器默认按钮样式，视觉与升级前一致 */
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.3s var(--ease-brand), color 0.3s var(--ease-brand), background 0.3s var(--ease-brand);
}

/* 标签文本层：模型名可能较长（如「深度思考 Pro」），单独一层做省略号截断——
   text-overflow 在 flex 容器上不生效，必须落在文本自己的块级盒上 */
.model-picker-label {
  display: block;
  max-width: 108px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* —— AI Auto 模型选择面板（点击展开；数据源见 shuyun-full.js 第 1 节）——
   向上弹出（底栏贴近面板下沿），暗色玻璃 + 细描边，与对话框同一视觉语言 */
.model-picker {
  position: relative;
  display: flex;
}

.model-picker-panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: 238px;
  max-height: 244px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 12px;
  background: rgba(8, 22, 16, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.62), 0 0 22px rgba(0, 201, 123, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 40;
  cursor: default; /* 面板整体不再是"点击进入输入模式"的热区 */
  animation: modelPanelIn 0.22s var(--ease-brand);
}

.model-picker-panel[hidden] { display: none; }

@keyframes modelPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.model-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s var(--ease-brand);
}

.model-item:hover { background: rgba(255, 255, 255, 0.05); }

.model-item-main { flex: 1; min-width: 0; }

.model-item-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(240, 244, 248, 0.9);
}

.model-item-tag {
  flex-shrink: 0;
  height: 15px;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 9px;
  line-height: 15px;
  color: var(--brand-green);
  background: rgba(0, 201, 123, 0.14);
}

.model-item-desc {
  margin-top: 2px;
  font-size: 10px;
  line-height: 14px;
  color: rgba(240, 244, 248, 0.38);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-item-check {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  color: var(--brand-green);
  opacity: 0;
}

/* 当前选中项：名称转品牌绿 + 勾选显形 */
.model-item.active .model-item-name { color: var(--brand-green); }
.model-item.active .model-item-check { opacity: 1; }

/* 「+」与 AI Auto 共用同一套高亮：指针进入面板（或面板处于唤醒 / 输入态）时，两个胶囊
   一起转品牌绿 + 白字 + 绿底——避免"一个亮、一个还是灰的"切换割裂感 */
.chat-container:hover .btn-chat-add-pill,
.chat-container.active-mode .btn-chat-add-pill,
.chat-container:hover .tag-ai-auto-pill,
.chat-container.active-mode .tag-ai-auto-pill {
  border-color: rgba(0, 201, 123, 0.6);
  color: #ffffff;
  background: rgba(0, 201, 123, 0.12);
}

.btn-chat-send {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--brand-green);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 201, 123, 0.4);
}

.btn-chat-send svg {
  width: 13px;
  height: 13px;
}

/* 就绪反馈：仅输入模式内、内容为空时降暗（展示态恒亮，贴合设计稿） */
.chat-container.input-mode .btn-chat-send:disabled {
  opacity: 0.4;
  cursor: default;
}

/* 底部生态伙伴 Logo 组 */
.ecosystem-partners-section {
  position: absolute;
  /* 锚定首屏底部：130px 距底 ≈ 原 854px 高度下 top:659px 的等价位置（元素自身高约 65px） */
  top: auto;
  bottom: 130px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  opacity: 0.75;
  z-index: 20;
}

.ecosystem-title {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.46);
  text-align: center;
}

.logo-carousel-viewport {
  position: relative;
  width: 560px; /* 容纳最宽组（组 03 ≈ 536px），保证每组 6 个 logo 完整显示不被截断 */
  height: 26px;
  overflow: hidden; /* 上下切换时进入/退出在框内完成（字幕式裁剪） */
}

/* 分组垂直切换（字幕播报式）：三组绝对定位叠放。
   预备位在下方（+24px、透明）；加 .current 平滑上浮显示；
   退出时加 .exit-up 向上淡出（-24px），过渡结束后移除类回到预备位。 */
.logo-group {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px; /* 组内间距（= 设计稿实测间距 30px） */
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.55s var(--ease-brand);
}

.logo-group.current {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.logo-group.exit-up {
  opacity: 0;
  transform: translateY(-24px);
}

/* reduced-motion 降级：下列组件的过渡 / 动画全部禁用——
   首播降级为终态落定、轮播不自动播放时，CSS 层瞬时生效；滚动收束等手动交互保留但无过渡 */
@media (prefers-reduced-motion: reduce) {
  .logo-group,
  .question-card,
  .question-cards-wrap,
  .chat-input,
  .chat-textarea-placeholder,
  .case-card-new,
  .case-card-logos img,
  .arch-brand-title,
  .arch-center-box,
  .arch-rail-base,
  .arch-rail-progress,
  .arch-nav-list,
  .arch-nav-node,
  .arch-node-dot,
  .arch-node-label,
  .sticky-arch-sidebar {
    transition: none !important;
  }
  .infra-center-art,
  .model-picker-panel,
  .sticky-arch-sidebar.visible .sticky-sidebar-item {
    animation: none !important;
  }
  /* 元素级渐进展示双保险：即使隐藏类被 JS 添加也直接显示（translate 同步复位） */
  .reveal-init {
    opacity: 1 !important;
    translate: none !important;
  }
  /* 09 屏：粒子漂浮 / 光弧流转禁用（双保险） */
  .cta-particles,
  .cta-btn-orbit {
    animation: none !important;
  }
  /* 01 屏开场演出双保险：reduce 下即使 .hero-intro 被添加也直接显示
     （须一并覆盖 :not(.intro-in) 细分选择器——其特异性更高） */
  .hero-intro .chat-container,
  .hero-intro .chat-container:not(.intro-in),
  .hero-intro .chat-container > *,
  .hero-intro .chat-container:not(.intro-in) > * {
    opacity: revert;
    translate: none;
  }
}

/* 减少透明度偏好（系统级无障碍）：玻璃模糊退化为实色背景，保证低视力 /
   晕动敏感用户的可读性；不支持该媒体特性的浏览器整段忽略（渐进增强） */
@media (prefers-reduced-transparency: reduce) {
  .hero-header::before,
  .chat-container,
  .card-growth-float-card,
  .hub-core-card,
  .hub-sub-pill {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .hero-header::before { background: #0a110d; }
  .hero-header.on-light::before { background: #fbfbfb; }
  .chat-container { background: #06120c; }
  .card-growth-float-card { background: #ffffff; }
  .hub-core-card { background: linear-gradient(135deg, #141a16 0%, #0b0d10 100%); }
  .hub-sub-pill { background: #252525; }
}

.partner-logo-item {
  display: flex;
  align-items: center;
  opacity: 0.7;
  transition: opacity 0.2s var(--ease-brand);
  flex: none;
}

.partner-logo-item:hover {
  opacity: 1;
}

.partner-logo-item img {
  /* 按 SVG 固有尺寸渲染（= 设计稿原始尺寸，各品牌 logo 高度不一属设计本身） */
  display: block;
}

.partner-label {
  margin-left: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

/* =========================================================
   02 四层架构开场导航条 (Node 10894:1721)
   ========================================================= */
/* =========================================================
   02 四层架构开场演进导航条 (Node 10894:1721 - 1440 × 398px)
   Figma 批注时序动效规范：
   1. [进入页面] ↓ (0ms)   [品牌 Logo 居中入场]
   2.            ↓ (400ms)  [横向轨道展开]
   3.            ↓ (780ms)  [绿色进度条顺序点亮阶段 1~4]
   4.            ↓ (演进结束) [横向导航向右上缩回平滑交接]
   5.            ↓ (平滑交接) [右侧竖向导航淡入常驻] ↔ [用户自由点击 Synwin. ↔ 切换阶段]
   ========================================================= */
#sec-02 {
  height: 398px;
  background-color: #f2f2f2;
  border-top: 1px solid #e4e4e7;
  overflow: hidden;
  position: relative;
}

#sec-02 .canvas-container {
  height: 398px;
  position: relative;
}

/* 顶部绿色弥散光晕 (Node 10894:1748: 802px × 228px, blur 120px) */
.arch-glow {
  position: absolute;
  top: -167px;
  left: 339px;
  width: 802px;
  height: 228px;
  background: rgba(0, 201, 80, 0.15);
  border-radius: 9999px;
  filter: blur(120px);
  pointer-events: none;
}

/* 横向灰色基底轨道 (Node 10894:1722: 420px × 1.5px, left 525px, top 238px) */
.arch-rail-base {
  position: absolute;
  top: 238px;
  left: 525px;
  width: 0px;
  height: 1.5px;
  background-color: #e4e4e7;
  /* opacity / transform 过渡用于收束（docking）与反向展开的平滑渐隐恢复 */
  transition: width 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s var(--ease-brand), transform 0.35s var(--ease-brand);
  z-index: 2;
}
.arch-rail-base.ready {
  width: 420px;
}

/* 动态绿色进度条 (Node 10894:1723: left 525px, top 238px) */
.arch-rail-progress {
  position: absolute;
  top: 238px;
  left: 525px;
  width: 0px;
  height: 1.5px;
  background-color: var(--g1, #10a86d);
  transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s var(--ease-brand), transform 0.35s var(--ease-brand);
  z-index: 3;
  transform-origin: center center;
}
.arch-rail-base.docking,
.arch-rail-progress.docking {
  opacity: 0;
  transform: scaleX(0.35);
}

/* 02 舞台中心演进复合容器 (left: 491.57px, top: 130.14px, w: 498px, h: 153.5px) */
.arch-center-box {
  position: absolute;
  top: 130.14px;
  left: 50%;
  transform: translateX(-50%);
  width: 498px;
  height: 153.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  z-index: 5;
  transform-origin: center center;
  transition:
    transform 0.75s cubic-bezier(0.2, 0.85, 0.25, 1),
    opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.55s var(--ease-brand);
}

/* 第一阶段：品牌 Logo (33.18px, Semibold, leading 59.7px, tracking 2.28px) */
.arch-brand-title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "PingFang SC", sans-serif;
  font-size: 33.18px;
  font-weight: 600;
  color: #18181b;
  letter-spacing: 2.28px;
  line-height: 59.7px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.arch-brand-title.visible {
  opacity: 1;
  transform: translateY(0);
}
.arch-brand-title .dot {
  font-weight: 700;
  color: #10a86d;
}

/* 横向节点列表 (Node 10894:1728: 498px × 59.5px, gap 66.36px) */
.arch-nav-list {
  display: flex;
  align-items: flex-start;
  gap: 66.36px;
  width: 498px;
  position: relative;
  z-index: 6;
  opacity: 0;
  transition: opacity 0.35s var(--ease-brand);
}
.arch-nav-list.visible {
  opacity: 1;
}

/* 单个阶段节点 (75px × 59.5px, gap 13.27px) */
.arch-nav-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13.27px;
  width: 75px;
  cursor: pointer;
  text-decoration: none;
  /* transform + opacity 过渡：兼顾 hover 微浮与形态切换时的整体飞入/飞回 */
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s var(--ease-brand);
}
.arch-nav-node:hover {
  transform: translateY(-2px);
}

/* 节点圆形外环 (14px × 14px) */
.arch-node-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #e4e4e7;
  border: 2px solid #f0f1ee;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s var(--ease-brand), border-color 0.3s var(--ease-brand), box-shadow 0.3s var(--ease-brand);
}
.arch-node-dot .arch-dot-outer {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
}
.arch-node-dot .arch-dot-inner {
  width: 4.5px;
  height: 4.5px;
  border-radius: 50%;
  background-color: #e4e4e7;
  transition: background-color 0.3s var(--ease-brand);
}

/* 点亮激活状态 (根据 Figma 10894:1730 设计规范) */
.arch-node-dot.active {
  background-color: #10a86d;
  border: 2.5px solid #eff1f0;
  box-shadow: 0 0 10px rgba(16, 168, 109, 0.45);
}
.arch-node-dot.active .arch-dot-outer {
  background-color: #ffffff;
  border: 1.66px solid #10a86d;
}
.arch-node-dot.active .arch-dot-inner {
  background-color: #10a86d;
}

/* 节点文字 (14px Semibold, tracking 0.117px) */
.arch-node-label {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(81, 94, 88, 0.38);
  letter-spacing: 0.117px;
  line-height: 18.66px;
  white-space: nowrap;
  transition: color 0.3s var(--ease-brand), transform 0.3s var(--ease-brand);
}
.arch-node-label.active {
  color: #525c58;
}

/* 第四阶段：横向导航向右侧中间平滑交接与折叠收拢 (Dock to right-center & morph to vertical sidebar) */
/* 第四阶段：横向导航【逐元素】飞向右侧收束（序列化交接）
   顺序：Synwin. 先行 → 价值交付 → 应用生态 → 智能中枢 → 基础设施（由右至左依次飞出）*/
.arch-center-box.dock-to-right {
  pointer-events: none;
  /* 容器不再整体飞行，改由下方子元素逐个飞走；此处 opacity 为兜底（全部元素飞出后容器淡出） */
  opacity: 0;
  transition: opacity 0.3s var(--ease-brand) 0.78s;
}

/* 品牌标题：序列第一位飞出 */
.arch-center-box.dock-to-right .arch-brand-title {
  opacity: 0;
  transform: translate(170px, 26px) scale(0.55);
  transition: transform 0.42s cubic-bezier(0.45, 0, 0.55, 1), opacity 0.42s var(--ease-brand);
}

/* 四个节点：依次向右下方飞出 + 缩小淡出（统一位移，节奏由阶梯延迟控制） */
.arch-center-box.dock-to-right .arch-nav-node {
  opacity: 0;
  transform: translate(190px, 22px) scale(0.42);
  transition: transform 0.42s cubic-bezier(0.45, 0, 0.55, 1), opacity 0.42s var(--ease-brand);
}

/* 序列阶梯：由右至左依次出发（与竖向导航自上而下的顺序呼应） */
.arch-center-box.dock-to-right .arch-nav-node[data-stage="4"] { transition-delay: 0.07s; }
.arch-center-box.dock-to-right .arch-nav-node[data-stage="3"] { transition-delay: 0.14s; }
.arch-center-box.dock-to-right .arch-nav-node[data-stage="2"] { transition-delay: 0.21s; }
.arch-center-box.dock-to-right .arch-nav-node[data-stage="1"] { transition-delay: 0.28s; }

/* =========================================================
   右侧微型竖向常驻导航条 (Sticky Sidebar)
   Figma 批注交接：[右侧竖向导航淡入常驻] ↔ [用户自由点击Synwin.↔切换阶段]
   ========================================================= */
.sticky-arch-sidebar {
  position: fixed;
  right: calc((100vw - 1440px)/2 + 20px);
  top: 311px;
  width: 80px;
  height: 201px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.94) translateX(10px);
  transform-origin: center right;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  /* 主题变量：浅色环境（默认，02/03/04/07/08 浅色屏） */
  --sb-fg: #18181b;             /* 标题 / 激活文字 */
  --sb-fg-dim: #9f9fa9;         /* 常规节点文字 */
  --sb-line: #e4e4e7;           /* 导轨 / 分隔线 */
  --sb-dot-bg: #f2f2f2;         /* 圆点底色（含 2px 描边） */
  --sb-dot-inner-bg: #ffffff;   /* 圆点内心底色 */
  --sb-dot-inner-border: #d4d4d8; /* 圆点内心描边 */
}

/* 深色环境（05/06/09/10 深色屏）：文字 / 导轨 / 圆点整体转浅色 */
.sticky-arch-sidebar.on-dark {
  --sb-fg: #f0f4f8;
  --sb-fg-dim: rgba(240, 244, 248, 0.5);
  --sb-line: rgba(240, 244, 248, 0.16);
  --sb-dot-bg: rgba(240, 244, 248, 0.16);
  --sb-dot-inner-bg: #0d1210;
  --sb-dot-inner-border: rgba(240, 244, 248, 0.38);
}

@media (max-width: 1480px) {
  .sticky-arch-sidebar {
    right: 15px;
  }
}

.sticky-arch-sidebar.visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateX(0);
}

/* 侧边栏内部节点在展开时的轻微阶梯入场 */
.sticky-arch-sidebar.visible .sticky-sidebar-item {
  animation: sidebarItemSlideIn 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.sticky-arch-sidebar.visible .sticky-sidebar-item:nth-child(2) { animation-delay: 0.04s; }
.sticky-arch-sidebar.visible .sticky-sidebar-item:nth-child(3) { animation-delay: 0.08s; }
.sticky-arch-sidebar.visible .sticky-sidebar-item:nth-child(4) { animation-delay: 0.12s; }
.sticky-arch-sidebar.visible .sticky-sidebar-item:nth-child(5) { animation-delay: 0.16s; }

@keyframes sidebarItemSlideIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sticky-sidebar-title {
  padding-bottom: 20px;
  padding-left: 3px;
  border-bottom: 0.83px solid var(--sb-line);
  margin-bottom: 10px;
  transition: border-color 0.28s var(--ease-brand);
}

.sticky-sidebar-title a {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--sb-fg);
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  transition: transform 0.2s var(--ease-brand), color 0.28s var(--ease-brand);
}
.sticky-sidebar-title a:hover {
  transform: scale(1.08);
}
.sticky-sidebar-title a .dot {
  color: #00c950;
  font-weight: 700;
}

.sticky-sidebar-list {
  display: flex;
  flex-direction: column;
  position: relative;
}

.sticky-sidebar-line {
  position: absolute;
  top: 10px;
  left: 6px;
  width: 0;
  height: 110px;
  border-left: 1px solid var(--sb-line);
  z-index: 1;
  transition: border-color 0.28s var(--ease-brand);
}

.sticky-sidebar-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 0;
  cursor: pointer;
  text-decoration: none;
  z-index: 2;
  transition: transform 0.2s var(--ease-brand);
}
.sticky-sidebar-item:hover {
  transform: translateX(-2px);
}

.sticky-item-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--sb-dot-bg);
  border: 2px solid var(--sb-dot-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  transition: all 0.28s var(--ease-brand);
}

.sticky-item-dot .inner {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--sb-dot-inner-bg);
  border: 0.83px solid var(--sb-dot-inner-border);
  transition: all 0.28s var(--ease-brand);
}

.sticky-sidebar-item.active .sticky-item-dot {
  border-color: rgba(16, 168, 109, 0.43);
}

.sticky-sidebar-item.active .sticky-item-dot .inner {
  background-color: var(--g1, #10a86d);
  border-color: var(--g1, #10a86d);
  box-shadow: 0 0 8px rgba(16, 168, 109, 0.5);
}

.sticky-item-text {
  font-size: 9px;
  font-weight: 300;
  color: var(--sb-fg-dim);
  letter-spacing: 0.97px;
  white-space: nowrap;
  transition: color 0.28s var(--ease-brand), font-weight 0.28s var(--ease-brand);
}

.sticky-sidebar-item.active .sticky-item-text {
  color: var(--sb-fg);
  font-weight: 500;
}

/* =========================================================
   03 AI 价值交付 (Node 11128:817)
   ========================================================= */
#sec-03 {
  /* 铺满视口：760px 为设计稿保底高度，更高视口下背景铺满一屏（内容保持原位） */
  height: 100vh;
  min-height: 760px;
  background-color: var(--bg-gray-alt);
  border-top: 0.83px solid #e4e4e7;
  overflow: hidden;
}

#sec-03 .canvas-container {
  height: 100vh;
  min-height: 760px;
}

.section-tag-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}

.section-tag-line {
  width: 27px;
  height: 0.83px;
  background-color: rgba(0, 166, 62, 0.2);
}

.section-tag-text {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--g2);
  text-transform: uppercase;
}

.section-title-wrap {
  text-align: center;
  margin-bottom: 40px;
}

.section-main-title {
  font-size: 32px;
  line-height: 43px;
  color: #18181b;
  font-weight: 300;
}

.section-main-title strong {
  font-weight: 600;
}

.value-carousel-wrapper {
  position: absolute;
  top: 195px;
  left: 50%;
  transform: translateX(-50%);
  width: 1280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
}

/* 3 张卡片的定位容器 (总宽 1280px) */
.value-cards-stage {
  width: 1280px;
  height: 410px;
  position: relative;
}

/* 基础卡片样式 */
.val-card {
  position: absolute;
  top: 0;
  width: 440px;
  height: 400px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0px 7px 27px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 31px 24px 24px;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  /* 弹性位移 (Spring 弹簧效果，保证滑入丝滑无顿挫) */
  transition:
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.45s var(--ease-brand),
    border-color 0.3s var(--ease-brand),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    z-index 0.3s var(--ease-brand);
}

/* 位置 1: 居中突出大卡片 (主展示) */
.val-card.slot-center {
  left: 420px;
  transform: translateX(0) scale(1);
  border: 1.5px solid #00c97b;
  box-shadow: 0 16px 40px rgba(0, 201, 123, 0.1), 0 4px 16px rgba(0, 0, 0, 0.04);
  z-index: 10;
  opacity: 1;
}

/* 位置 0: 左侧略小卡片 (缩放 0.92) + 朝画面外侧边缘渐隐（还原设计稿 hover 态侧卡处理：
   左边缘向画面外淡出，内侧保持锐利；显现区为纯白，不做整体降透明） */
.val-card.slot-left {
  left: 0;
  transform: translateX(20px) scale(0.92);
  border: 1.1px solid #e3e3e3;
  box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.02);
  z-index: 5;
  /* 渐隐带：0-80px 完全透明段 → 215px 处完全显现（元素坐标，经 scale 0.92 后视觉 ≈74-198px） */
  -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 80px, #000 215px);
  mask-image: linear-gradient(to right, transparent 0, transparent 80px, #000 215px);
}
.val-card.slot-left:hover {
  border-color: rgba(0, 201, 123, 0.4);
}

/* 位置 2: 右侧略小卡片 (缩放 0.92) + 朝画面外侧边缘渐隐（镜像处理） */
.val-card.slot-right {
  left: 840px;
  transform: translateX(-20px) scale(0.92);
  border: 1.1px solid #e3e3e3;
  box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.02);
  z-index: 5;
  -webkit-mask-image: linear-gradient(to left, transparent 0, transparent 80px, #000 215px);
  mask-image: linear-gradient(to left, transparent 0, transparent 80px, #000 215px);
}
.val-card.slot-right:hover {
  border-color: rgba(0, 201, 123, 0.4);
}

/* 卡片标题与副标 */
.val-card-header {
  text-align: center;
  margin-bottom: 12px;
  transition: opacity 0.22s var(--ease-brand);
}

.val-card-title {
  font-size: 23px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.val-card-title .green {
  color: var(--g1, #10a86d);
}
.val-card-title .black {
  color: #18181b;
}

.val-card-sub {
  font-size: 13px;
  color: #71717b;
  margin-top: 4px;
}

/* 默认状态：展示业务图形 (底部无任何多余文字或占位) */
.val-card-visual {
  position: relative;
  width: 435.6px;
  height: 275px;
  flex: none;
  overflow: hidden;
  transition: opacity 0.22s var(--ease-brand), transform 0.22s var(--ease-brand);
}

/* 底层背景纹理 PNG 绝对定位铺底 */
.card-vis-bg-png {
  position: absolute;
  left: -5.2px;
  top: -13.7px;
  width: 447px;
  height: 297px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.card-vis-bg-png img {
  position: absolute;
  top: -12.18%;
  left: 0.07%;
  width: 99.89%;
  height: 206.26%;
  max-width: none;
  display: block;
}

/* 点阵背景通用样式 */
.card-dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0, 0, 0, 0.12) 1px, transparent 1px);
  background-size: 8px 8px;
  opacity: 0.4;
  pointer-events: none;
}

/* 底部悬停查看胶囊提示条 */
/* =========================================================
   卡片 0: AI+ 增长运营 (11136:3296)
   ========================================================= */
.card-growth-stage {
  position: absolute;
  left: 64px;
  top: 25.95px;
  width: 347.6px;
  height: 209px;
  z-index: 2;
}
.card-growth-main-box {
  position: absolute;
  left: 14px;
  top: -3px;
  background: rgba(255, 255, 255, 0.46);
  border: 1.134px solid rgba(243, 244, 246, 0.9);
  border-radius: 18.14px;
  padding: 4.5px;
  box-shadow: 0 6.8px 27.2px rgba(0, 0, 0, 0.04);
}
.card-growth-inner-card {
  width: 244.9px;
  height: 175.7px;
  background: rgba(255, 255, 255, 0.95);
  border: 1.134px solid rgba(243, 244, 246, 0.9);
  border-radius: 13.6px;
  padding: 13.6px 22.7px 13.6px 13.6px;
  box-shadow: 0 6.8px 27.2px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card-mock-bars {
  display: flex;
  flex-direction: column;
  gap: 4.5px;
}
.mock-bar-1 {
  width: 79.4px;
  height: 6.8px;
  background: rgba(229, 231, 235, 0.38);
  border-radius: 10px;
}
.mock-bar-2 {
  width: 53.3px;
  height: 6.8px;
  background: rgba(229, 231, 235, 0.35);
  border-radius: 10px;
}
.card-growth-chart-wrap {
  position: relative;
  width: 208.6px;
  height: 96.4px;
}
.growth-wave-bg {
  position: absolute;
  left: 6.95px;
  top: -23.25px;
  width: 194.7px;
  height: 127.6px;
  object-fit: fill;
  pointer-events: none;
}
.growth-wave-line {
  position: absolute;
  left: 6.95px;
  top: -22.68px;
  width: 195.4px;
  height: 19.7px;
  pointer-events: none;
}
.growth-dot {
  position: absolute;
  width: 5.1px;
  height: 5.1px;
  pointer-events: none;
}
.growth-dot.d1 { left: 4.4px;   top: 39.8px; }
.growth-dot.d2 { left: 46.35px; top: 23.8px; }
.growth-dot.d3 { left: 85.75px; top: 30.7px; }
.growth-dot.d4 { left: 127.5px; top: 16.8px; }
.growth-dot.d5 { left: 155.3px; top: 23.8px; }
.growth-dot-peak {
  position: absolute;
  left: 197.3px;
  top: -26.1px;
  width: 6.5px;
  height: 6.5px;
  pointer-events: none;
}
.growth-bars-group {
  position: absolute;
  left: 9.07px;
  top: 40px;
  width: 126.98px;
  height: 54px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  opacity: 0.45;
  padding: 0 4.5px;
}
.growth-bar {
  width: 9.1px;
  border-radius: 11px;
}
.growth-bar.b1 { height: 30.6px; background: rgba(0, 212, 146, 0.41); }
.growth-bar.b2 { height: 44.2px; background: rgba(0, 188, 125, 0.4); }
.growth-bar.b3 { height: 39.7px; background: rgba(0, 212, 146, 0.41); }
.growth-bar.b4 { height: 53.3px; background: rgba(0, 188, 125, 0.4); }
.growth-bar.b5 { height: 35.1px; background: rgba(0, 212, 146, 0.41); }

.card-growth-float-card {
  position: absolute;
  left: 228.8px;
  top: 95.1px;
  width: 96.8px;
  height: 101.2px;
  background: rgba(255, 255, 255, 0.95);
  border: 1.1px solid rgba(243, 244, 246, 0.9);
  border-radius: 13.2px;
  box-shadow: 0 11px 28.6px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(4.4px);
  padding: 11px;
  display: flex;
  flex-direction: column;
  gap: 8.8px;
  align-items: center;
}
.float-card-icon-box {
  width: 52.8px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.float-card-icon-box img {
  width: 58px;
  height: 58px;
}
.float-card-bars {
  display: flex;
  gap: 3.3px;
  width: 100%;
}
.fc-bar-1 {
  width: 42.9px;
  height: 6.6px;
  background: rgba(229, 231, 235, 0.8);
  border-radius: 10px;
}
.fc-bar-2 {
  width: 12.1px;
  height: 6.6px;
  background: rgba(229, 231, 235, 0.8);
  border-radius: 10px;
}
.card-growth-fab {
  position: absolute;
  left: 253px;
  top: -4.4px;
  width: 48.4px;
  height: 48.4px;
  background: transparent;
  border: 1.1px solid #e2f5ea;
  border-radius: 50%;
  padding: 5.5px;
  box-sizing: border-box;
}
.card-growth-fab-core {
  width: 35.2px;
  height: 35.2px;
  background: #10a86d;
  border: 1.1px solid rgba(94, 233, 181, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4.4px 7.7px rgba(16, 185, 129, 0.38);
}
.card-growth-fab-core img {
  width: 17.6px;
  height: 17.6px;
}

/* =========================================================
   卡片 1: AI+ 咨询诊断 (11136:3298)
   ========================================================= */
.card-diag-stage {
  position: absolute;
  left: -57.2px;
  top: -6.7px;
  width: 550px;
  height: 254.4px;
  z-index: 2;
}
.diag-curve-up {
  position: absolute;
  left: 121px;
  top: 117px;
  width: 316px;
  height: 101px;
}
.diag-curve-down {
  position: absolute;
  left: 121px;
  top: 40px;
  width: 316px;
  height: 125px;
  transform: scaleY(-1);
}
.diag-circle-node {
  position: absolute;
  width: 42px;
  height: 42px;
  background: #ffffff;
  border: 1.1px solid #e6e6e6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3.5px 7px rgba(0, 0, 0, 0.04);
}
.diag-circle-node img {
  width: 24.4px;
  height: 24.4px;
}
.diag-node-lt { left: 98px; top: 63px; }
.diag-node-lb { left: 98px; top: 151px; }
.diag-node-rt { left: 412px; top: 63px; }
.diag-node-rb { left: 412px; top: 151px; }

.diag-center-box {
  position: absolute;
  left: 173px;
  top: 40.9px;
  width: 200px;
  background: rgba(255, 255, 255, 0.46);
  border: 0.844px solid rgba(16, 168, 109, 0.27);
  border-radius: 13.5px;
  padding: 3.4px;
  box-shadow: 0 7.5px 20.3px rgba(16, 168, 109, 0.12);
}
.diag-inner-card {
  position: relative;
  width: 100%;
  height: 130.8px;
  background: rgba(255, 255, 255, 0.95);
  border: 0.844px solid #d6efe5;
  border-radius: 10.1px;
  overflow: hidden;
  box-shadow: 0 5.1px 20.3px rgba(16, 168, 109, 0.1);
}
.diag-top-status-bar {
  position: absolute;
  left: -0.4px;
  top: -0.4px;
  width: 212px;
  height: 13px;
  background: rgba(16, 168, 109, 0.63);
  padding: 3.7px 11px;
}
.diag-status-dots {
  display: flex;
  gap: 5.6px;
}
.status-dot-1 {
  width: 5.6px;
  height: 5.6px;
  background: #10a86d;
  border-radius: 50%;
}
.status-dot-2 {
  width: 5.6px;
  height: 5.6px;
  background: #10a86d;
  opacity: 0.5;
  border-radius: 4px;
}
.diag-cards-split {
  position: absolute;
  left: 5px;
  top: 22.8px;
  display: flex;
  gap: 4px;
  width: 190px;
}
.diag-mini-list {
  width: 61.4px;
  height: 100.7px;
  background: rgba(255, 255, 255, 0.95);
  border: 0.819px solid rgba(243, 244, 246, 0.9);
  border-radius: 4.9px;
  padding: 8px 5px 14px 5px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  gap: 7.5px;
}
.diag-mini-item {
  display: flex;
  gap: 3.3px;
  align-items: center;
}
.mini-pill-ic {
  width: 7.5px;
  height: 7.5px;
  border-radius: 50%;
  background: #10a86d;
  border: 0.256px solid rgba(94, 233, 181, 0.4);
  opacity: 0.4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mini-pill-ic img { width: 4.1px; height: 4.1px; }
.mini-bar {
  width: 36.4px;
  height: 4.7px;
  background: rgba(229, 231, 235, 0.35);
  border-radius: 10px;
}
.diag-pie-card {
  position: relative;
  width: 114px;
  height: 100px;
  background: rgba(255, 255, 255, 0.95);
  border: 0.819px solid rgba(243, 244, 246, 0.9);
  border-radius: 4.9px;
  padding: 7.7px 8.8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.02);
}
.diag-pie-head {
  display: flex;
  gap: 7px;
  align-items: center;
}
.diag-pie-head img { width: 23.6px; height: 23.6px; transform: rotate(-90deg); }
.diag-pie-tag {
  width: 49.5px;
  height: 23.4px;
  background: #f5f6f8;
  border-radius: 2.8px;
}
.diag-pie-bars {
  position: absolute;
  left: 10px;
  top: 55px;
  display: flex;
  flex-direction: column;
  gap: 5.7px;
}
.pie-bar-1 { width: 98.2px; height: 5.7px; background: rgba(229, 231, 235, 0.38); border-radius: 10px; }
.pie-bar-2 { width: 98.2px; height: 5.7px; background: rgba(229, 231, 235, 0.38); border-radius: 10px; }
.pie-bar-3 { width: 39.7px; height: 5.1px; background: rgba(229, 231, 235, 0.35); border-radius: 10px; }

.diag-ai-glow-wrap {
  position: absolute;
  left: 290px;
  top: 39px;
  width: 131px;
  height: 142px;
  pointer-events: none;
}
.diag-ai-glow-wrap img {
  width: 100%;
  height: 100%;
}

/* 中部装饰小矢量（Figma 11136:1802 换算：left 27.27%×550=150, top 203 居中） */
.diag-mini-vector {
  position: absolute;
  left: 150px;
  top: 200px;
  width: 6px;
  height: 6px;
  pointer-events: none;
}

/* =========================================================
   卡片 2: AI+ 实施交付 (11136:3297)
   ========================================================= */
.card-deliv-stage {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -4.7px;
  width: 396px;
  height: 234.1px;
  z-index: 2;
}
.card-deliv-stage .card-dot-grid {
  inset: auto;
  left: 9.43px;
  top: -28.29px;
  width: 377.143px;
  height: 298.571px;
}
.deliv-lines-outer {
  position: absolute;
  left: 25.1px;
  top: 29.1px;
  width: 346.8px;
  height: 183.4px;
}
.deliv-lines-inner {
  position: absolute;
  left: 105.3px;
  top: 69.1px;
  width: 186.5px;
  height: 101.7px;
}
.deliv-v-top { position: absolute; left: 192.5px; top: 23.6px; width: 11px; height: 11px; }
.deliv-v-bottom { position: absolute; left: 192.5px; bottom: 17.3px; width: 11px; height: 11px; }
.deliv-v-lt { position: absolute; left: 42.4px; top: 72.3px; width: 9px; height: 9px; }
.deliv-v-rt { position: absolute; right: 36.3px; top: 78.3px; width: 9px; height: 9px; }
.deliv-v-lb { position: absolute; left: 42.4px; bottom: 65px; width: 9px; height: 9px; }
.deliv-v-rb { position: absolute; right: 38.3px; bottom: 68.2px; width: 9px; height: 9px; }

.deliv-nodes-row {
  position: absolute;
  left: 9.4px;
  top: 86.4px;
  width: 377.1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3.1px;
}
.deliv-node-circle {
  width: 49.5px;
  height: 49.5px;
  background: #ffffff;
  border: 1.1px solid rgba(230, 230, 230, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6.3px 9.4px rgba(0, 0, 0, 0.04);
}
.deliv-node-circle img {
  width: 22px;
  height: 22px;
}
.deliv-line-segment {
  width: 9.4px;
  height: 1.9px;
  background: #e1e7e5;
}
.deliv-center-fde-node {
  width: 65.9px;
  height: 69.1px;
  background: linear-gradient(to bottom, #ecfdf5, rgba(224, 252, 238, 0.85) 50%, rgba(208, 250, 229, 0.7));
  border: 1.1px solid #8ee1c2;
  border-radius: 22px;
  box-shadow: 0 0 31.4px rgba(16, 185, 129, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fde-inner-cube {
  width: 50.3px;
  height: 50.3px;
  background: #00bc7d;
  border: 1.1px solid #10a86d;
  border-radius: 15.7px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3.1px 6.3px rgba(16, 185, 129, 0.4);
}
.fde-inner-cube img {
  width: 26.7px;
  height: 26.7px;
}

/* =========================================================
   Figma 批注交互规范：3. Hover 状态与过渡速度建议
   - 默认状态：展示业务图形（底部无任何提示文字或多余占位）
   - 鼠标 Hover 状态：图形渐隐淡出，平滑切换为 5 项交付成果清单
   - Hover 切换速度：整体渐变耗时 220ms（0.22s ease-out）
   - 列表项入场：5 条成果按 60ms（0.06s）阶梯依次滑入展开
   - 鼠标移出：同样以 220ms 平滑恢复默认图形
   ========================================================= */

/* 默认状态：业务图形和标题以 220ms 平滑过渡 */
.val-card-header,
.val-card-visual {
  transition: opacity 0.22s var(--ease-brand), transform 0.22s var(--ease-brand);
}

/* Hover 激活时：图形和标题 220ms 渐隐淡出 */
.val-card:hover .val-card-visual,
.val-card:hover .val-card-header {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.97);
}

/* 抽屉容器：默认透明，移出时以 220ms ease-out 平滑淡出 */
.val-card-hover-drawer {
  position: absolute;
  inset: 0;
  background: #ffffff;
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.22s var(--ease-brand);
}

/* Hover 激活时：抽屉容器 220ms ease-out 淡入 */
.val-card:hover .val-card-hover-drawer {
  opacity: 1;
  pointer-events: auto;
}

/* 列表项条目：默认微下移 12px + 透明
   鼠标移出时：无延迟，以 220ms ease-out 瞬间同步平滑淡出归位 */
.val-drawer-item {
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(243, 244, 246, 0.9);
  border-radius: 12px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.02);
  transform: translateY(12px);
  opacity: 0;
  transition: transform 0.22s var(--ease-brand) 0s, opacity 0.22s var(--ease-brand) 0s, background-color 0.15s var(--ease-brand), border-color 0.15s var(--ease-brand);
}

/* Hover 激活时：5 项交付成果按 60ms (0.06s) 阶梯依次滑入展开 */
.val-card:hover .val-drawer-item {
  transform: translateY(0);
  opacity: 1;
}
.val-card:hover .val-drawer-item:nth-child(1) { transition: transform 0.22s var(--ease-brand) 0.00s, opacity 0.22s var(--ease-brand) 0.00s; }
.val-card:hover .val-drawer-item:nth-child(2) { transition: transform 0.22s var(--ease-brand) 0.06s, opacity 0.22s var(--ease-brand) 0.06s; }
.val-card:hover .val-drawer-item:nth-child(3) { transition: transform 0.22s var(--ease-brand) 0.12s, opacity 0.22s var(--ease-brand) 0.12s; }
.val-card:hover .val-drawer-item:nth-child(4) { transition: transform 0.22s var(--ease-brand) 0.18s, opacity 0.22s var(--ease-brand) 0.18s; }
.val-card:hover .val-drawer-item:nth-child(5) { transition: transform 0.22s var(--ease-brand) 0.24s, opacity 0.22s var(--ease-brand) 0.24s; }

.val-drawer-item:hover {
  background: #f8faf9;
  border-color: rgba(0, 201, 123, 0.3);
}

.val-drawer-icon-box {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: #ecfdf5;
  border: 1px solid rgba(208, 250, 229, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.val-drawer-icon-box img {
  width: 14px;
  height: 14px;
}

.val-drawer-text {
  font-size: 13.5px;
  color: #18181b;
  letter-spacing: -0.35px;
  white-space: nowrap;
  font-weight: 500;
}

/* 底部联动导航控件 (左右箭头 + 圆点指示器) */
/* 卡片切换样式：纯鼠标点击卡片，左侧/右侧侧卡片强化点击手势 */
.val-card.slot-left,
.val-card.slot-right {
  cursor: pointer;
}
.val-card.slot-left:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}
.val-card.slot-right:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

/* =========================================================
   03 屏底部方向键与指示器控制器样式 (与卡片点击双向联动)
   ========================================================= */
.val-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 36px;
  user-select: none;
  z-index: 20;
  position: relative;
}

.val-carousel-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e3e3e3;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.val-carousel-arrow:hover {
  border-color: #10a86d;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(16, 168, 109, 0.15);
  transform: scale(1.06);
}
.val-carousel-arrow svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #18181b;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s var(--ease-brand);
}
.val-carousel-arrow:hover svg {
  stroke: #10a86d;
}

.val-carousel-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.val-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #d4d4d8;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.val-carousel-dot.active {
  width: 24px;
  background: #10a86d;
}
.val-carousel-dot:hover:not(.active) {
  background: #a1a1aa;
}

/* =========================================================
   04 AI 应用生态 (Node 10529:13184)
   ========================================================= */
#sec-04 {
  /* 铺满视口：890px 为设计稿保底高度 */
  height: 100vh;
  min-height: 890px;
  background-color: var(--bg-gray);
  border-top: 0.83px solid #e4e4e7;
  overflow: hidden;
}

#sec-04 .canvas-container {
  height: 100vh;
  min-height: 890px;
  /* 顶部留白随视口平滑增长：超出设计高度的空间上下平均分配（无跳变） */
  padding-top: calc(106px + (max(890px, 100vh) - 890px) * 0.5);
}

.agent-eco-content {
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  width: 1120px;
  margin-left: auto;
  margin-right: auto;
  gap: 66px;
}

.agent-left-info {
  width: 174px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 450px;
}

.agent-feature-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.agent-feature-icon {
  width: 30px;
  height: 30px;
  background: #ffffff;
  border: 0.83px solid rgba(228, 228, 231, 0.8);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.03);
}

.agent-feature-desc {
  font-size: 10px;
  color: #52525c;
  line-height: 18px;
}

.btn-more-agents {
  background-color: var(--b1);
  color: #ffffff;
  font-size: 11px;
  padding: 8px 18px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  width: fit-content;
  transition: all 0.25s var(--ease-brand);
}

.btn-more-agents:hover {
  background-color: #27272a;
  transform: translateX(2px);
}

.agent-right-workspace {
  width: 875px;
  height: 450px;
  background: #ffffff;
  border: 0.83px solid rgba(228, 228, 231, 0.8);
  border-radius: 12px;
  box-shadow: 0 20px 66px rgba(0, 0, 0, 0.08);
  display: flex;
  overflow: hidden;
}

.agent-nav-sidebar {
  width: 200px;
  height: 100%;
  background: #fafafa;
  border-right: 0.94px solid #f4f4f5;
  display: flex;
  flex-direction: column;
  padding: 24px 10px;
  gap: 8px;
}

.agent-nav-tab {
  height: 56px;
  padding: 10px 14px;
  border-radius: 7.5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.25s var(--ease-brand);
}

.agent-nav-tab.active {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.agent-nav-tab.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background-color: var(--brand-green);
  border-radius: 0 2px 2px 0;
}

.agent-tab-name {
  font-size: 12px;
  font-weight: 600;
  color: #18181b;
}

.agent-tab-sub {
  font-size: 9px;
  color: #71717b;
}

.agent-preview-panel {
  flex: 1;
  position: relative;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.agent-preview-img {
  max-width: 95%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transition: opacity 0.3s var(--ease-brand);
}

/* =========================================================
   05 AI 智能中枢 (Node 11137:4185 - 2202px 高精度全景长卷)
   ========================================================= */
#sec-05 {
  min-height: 2202px;
  background-color: #0d1a10;
  background-image:
    radial-gradient(ellipse at 50% 15%, rgba(0, 201, 123, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 65%, rgba(0, 201, 123, 0.08) 0%, transparent 55%),
    linear-gradient(180deg, #0d1a10 0%, #08110b 40%, #030805 100%);
  overflow: hidden;
  position: relative;
  padding: 100px 0 120px;
}

/* 底边渐隐（2026-09-11）：05 屏底部的绿调（背景渐变 / 底部流光）与装饰纹理在最后
   170px 内平滑消隐到 06 屏顶部色（#070b07），交界无分界。
   背景：设计稿中 05 帧底部是 ~160px 中性灰带（#1e1e1e，系内容结束后帧背景的裸露，
   非过渡设计），硬切到 06 的近黑（30 → 5，亮度差 6 倍）；实页为绿调 + 纹理被
   overflow:hidden 硬切（实测交界跳变 G 达 6+）——两版都突兀，故按 09→10 同款
   手法做底部渐隐（收尾色取 06 顶部色，实测剖面 3,13,8 → 7,11,7 平滑收口）。 */
#sec-05::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 170px;
  background: linear-gradient(to bottom, rgba(7, 11, 7, 0), #070b07);
  pointer-events: none;
  z-index: 2;
}

#sec-05 .canvas-container {
  min-height: 2000px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* 顶部与中部光晕背景 */
.hub-ambient-glow-top {
  position: absolute;
  top: 180px;
  left: 50%;
  transform: translateX(-50%);
  width: 960px;
  height: 600px;
  background: radial-gradient(ellipse at center, rgba(0, 201, 123, 0.15) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

.hub-ambient-glow-bottom {
  position: absolute;
  top: 1350px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 450px;
  background: radial-gradient(ellipse at center, rgba(0, 201, 123, 0.1) 0%, transparent 65%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}

/* 05 屏标头 */
.hub-header-block {
  text-align: center;
  position: relative;
  z-index: 2;
  margin-bottom: 50px;
}

.hub-main-headline {
  font-size: 34px;
  font-weight: 600;
  color: #f5f8fa;
  letter-spacing: -0.5px;
  margin-top: 16px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* =========================================================
   Part 1: 01 环形双核系统架构图 (1000px × 784px)
   ========================================================= */
.hub-orbital-stage {
  width: 1000px;
  height: 785px;
  position: relative;
  z-index: 2;
  margin-bottom: 90px;
}

/* 循环流向底层背景图 (带 4 个方向圆弧与指示) */
.hub-orbital-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;
  height: 785px;
  background-image: url("assets/hub/loops-bg.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  opacity: 0.85;
}

/* 四个流动环节标签 (带精确旋转角度) */
.hub-flow-label {
  position: absolute;
  font-family: "Inter", -apple-system, sans-serif;
  font-size: 13.8px;
  font-weight: 500;
  color: #606863;
  letter-spacing: 2.7px;
  text-transform: uppercase;
  user-select: none;
  pointer-events: none;
}
.hub-flow-label.input {
  left: 735px;
  top: 185px;
  transform: rotate(27.7deg);
}
.hub-flow-label.feedback {
  left: 227px;
  top: 187px;
  transform: rotate(-31.3deg);
}
.hub-flow-label.constraint {
  left: 722px;
  top: 586px;
  transform: rotate(-29.2deg);
}
.hub-flow-label.output {
  left: 280px;
  top: 605px;
  transform: rotate(20.4deg);
}

/* 中央双核系统容器 */
.hub-center-cores {
  position: absolute;
  left: 247px;
  top: 247px;
  width: 506px;
  height: 256px;
  display: flex;
  gap: 15px;
  z-index: 5;
}

.hub-core-card {
  width: 245px;
  height: 256px;
  border-radius: 128px;
  background: linear-gradient(135deg, rgba(20, 26, 22, 0.85) 0%, rgba(11, 13, 16, 0.9) 100%);
  border: 1px solid rgba(231, 231, 231, 0.17);
  box-shadow:
    inset 0 0 35px rgba(0, 201, 123, 0.08),
    0 10px 30px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(15px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  transition: all 0.3s var(--ease-brand);
  cursor: pointer;
}
.hub-core-card:hover {
  border-color: rgba(0, 201, 123, 0.5);
  box-shadow:
    inset 0 0 45px rgba(0, 201, 123, 0.15),
    0 15px 40px rgba(0, 201, 123, 0.2);
  transform: translateY(-2px);
}

.hub-core-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 201, 123, 0.12);
  border: 1px solid rgba(0, 201, 123, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.hub-core-icon-box img {
  width: 24px;
  height: 24px;
}

.hub-core-title {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}

.hub-core-subtitle {
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-green);
  letter-spacing: 0.6px;
}

/* 四大能力节点主圆形盘 (围绕双核) */
.hub-orbit-node {
  position: absolute;
  z-index: 6;
}

.hub-node-disc {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: #19201c;
  border: 1.1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.hub-node-disc:hover {
  border-color: rgba(0, 201, 123, 0.6);
  background: #1e2822;
  box-shadow: 0 0 25px rgba(0, 201, 123, 0.3);
  transform: scale(1.05);
}

.hub-node-disc img {
  width: 22px;
  height: 22px;
  margin-bottom: 8px;
}

.hub-node-disc .hub-node-name {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.3px;
}

.hub-node-desc {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(205, 215, 235, 0.7);
  text-align: center;
  letter-spacing: 0.3px;
  margin-top: 10px;
  white-space: nowrap;
}

/* 节点定位 (顶部: 数据记忆, 右侧: 工程护栏, 底部: 能力调用, 左侧: 自我进化) */
.hub-orbit-node.node-memory {
  top: 15px;
  left: 436px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hub-orbit-node.node-guard {
  top: 310px;
  left: 830px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hub-orbit-node.node-ability {
  top: 590px;
  left: 436px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hub-orbit-node.node-evolution {
  top: 310px;
  left: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 半透明微发光胶囊药丸 (Pills) */
.hub-sub-pill {
  position: absolute;
  width: 86px;
  height: 87px;
  border-radius: 43px;
  background: rgba(37, 37, 37, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  font-size: 12px;
  color: rgba(180, 190, 185, 0.75);
  line-height: 1.35;
  letter-spacing: 0.5px;
  transition: all 0.3s var(--ease-brand);
  user-select: none;
  cursor: default;
  z-index: 4;
}
.hub-sub-pill:hover {
  background: rgba(0, 201, 123, 0.12);
  border-color: rgba(0, 201, 123, 0.4);
  color: #00c97b;
  transform: scale(1.08);
}

/* 16 颗药丸的精准坐标布局 */
/* 数据记忆 4 Pills (顶部) */
.pill-rag { left: 315px; top: 10px; }
.pill-multi-source { left: 210px; top: 42px; }
.pill-vector-db { left: 595px; top: 10px; }
.pill-layer-mem { left: 700px; top: 45px; }

/* 工程护栏 4 Pills (右侧) */
.pill-prompt-shield { left: 855px; top: 125px; }
.pill-fine-perm { left: 910px; top: 215px; }
.pill-full-audit { left: 910px; top: 520px; }
.pill-harness { left: 830px; top: 590px; }

/* 能力调用 4 Pills (底部) */
.pill-atomic-api { left: 250px; top: 655px; }
.pill-skill-ext { left: 350px; top: 690px; }
.pill-mcp-proto { left: 568px; top: 695px; }
.pill-a2a-inter { left: 672px; top: 665px; }

/* 自我进化 4 Pills (左侧) */
.pill-strategy-iter { left: 10px; top: 212px; }
.pill-reflection { left: 70px; top: 125px; }
.pill-data-loop { left: 45px; top: 520px; }
.pill-offline-eval { left: 118px; top: 590px; }

/* =========================================================
   Part 2: 02 原子能力与 6 大分类复合能力盘 (1000px × 755px)
   ========================================================= */
.hub-matrix-section {
  width: 1000px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hub-matrix-headline {
  font-size: 24px;
  font-weight: 500;
  color: #e5edf0;
  text-align: center;
  letter-spacing: -0.3px;
  margin-bottom: 40px;
}

/* 复合能力盘容器 */
.hub-integrated-stage {
  width: 1000px;
  height: 755px;
  position: relative;
  background: rgba(13, 18, 15, 0.4);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 0;
  overflow: hidden;
}

/* SmallTile 基础原子能力磁贴样式 */
.hub-small-tile {
  background: rgba(19, 19, 19, 0.65);
  border: 1px solid rgba(40, 45, 42, 0.5);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s var(--ease-brand);
  cursor: pointer;
  user-select: none;
}
.hub-small-tile:hover {
  background: rgba(28, 38, 32, 0.85);
  border-color: rgba(0, 201, 123, 0.5);
  box-shadow: 0 4px 15px rgba(0, 201, 123, 0.15);
  transform: translateY(-2px);
}
.hub-small-tile .tile-icon {
  width: 22px;
  height: 22px;
  opacity: 0.85;
}
.hub-small-tile .tile-text {
  font-size: 13px;
  color: #a0aab2;
  font-weight: 400;
  white-space: nowrap;
}
.hub-small-tile:hover .tile-text {
  color: #00c97b;
}

/* Row 1: 顶部 8 个 SmallTile (高 103px) */
.hub-tiles-row-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;
  height: 103px;
  display: grid;
  grid-template-columns: repeat(8, 125px);
}

/* Row 2: 次顶 8 个 SmallTile (高 103px) */
.hub-tiles-row-second {
  position: absolute;
  top: 103px;
  left: 0;
  width: 1000px;
  height: 103px;
  display: grid;
  grid-template-columns: repeat(8, 125px);
}

/* 中部复合行 (高 441px): 左 1 列(4个) + 中 6 大分类(750px) + 右 1 列(4个) */
.hub-middle-composite-row {
  position: absolute;
  top: 206px;
  left: 0;
  width: 1000px;
  height: 441px;
  display: flex;
}

.hub-tiles-col-left {
  width: 125px;
  height: 441px;
  display: grid;
  grid-template-rows: repeat(4, 110px);
}

/* 核心展开：6 大分类 LargeCard 区域 (750px × 441px, 3列 × 2行) */
.hub-six-categories-panel {
  width: 750px;
  height: 441px;
  display: grid;
  grid-template-columns: repeat(3, 250px);
  grid-template-rows: repeat(2, 220px);
  border-left: 1px solid rgba(0, 201, 123, 0.2);
  border-right: 1px solid rgba(0, 201, 123, 0.2);
  background: rgba(11, 15, 13, 0.55);
}

.hub-large-card {
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(18, 22, 20, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 24px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  position: relative;
}
.hub-large-card:hover {
  background: rgba(22, 32, 26, 0.75);
  border-color: rgba(0, 201, 123, 0.4);
  box-shadow:
    inset 0 0 25px rgba(0, 201, 123, 0.1),
    0 10px 30px rgba(0, 0, 0, 0.4);
  transform: scale(1.02);
  z-index: 3;
}

.hub-large-card-icon-box {
  width: 56px;
  height: 56px;
  border-radius: 28px;
  background: #161616;
  border: 1.2px solid #1b2a22;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
  transition: all 0.3s var(--ease-brand);
}
.hub-large-card:hover .hub-large-card-icon-box {
  border-color: rgba(0, 201, 123, 0.6);
  background: #1a251e;
  box-shadow: 0 0 15px rgba(0, 201, 123, 0.3);
}

.hub-large-card-icon-box img {
  width: 24px;
  height: 24px;
}

.hub-large-card-title {
  font-size: 19px;
  font-weight: 500;
  color: #cbcbcb;
  letter-spacing: -0.3px;
  margin-bottom: 6px;
}
.hub-large-card:hover .hub-large-card-title {
  color: #ffffff;
}

.hub-large-card-desc {
  font-size: 13px;
  font-weight: 300;
  color: #727a75;
  line-height: 1.5;
  white-space: nowrap;
}
.hub-large-card:hover .hub-large-card-desc {
  color: #9eb5a5;
}

.hub-tiles-col-right {
  width: 125px;
  height: 441px;
  display: grid;
  grid-template-rows: repeat(4, 110px);
}

/* Row 4: 底部 8 个 SmallTile (高 103px) */
.hub-tiles-row-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1000px;
  height: 103px;
  display: grid;
  grid-template-columns: repeat(8, 125px);
}

/* =========================================================
   06 AI 基础设施与安全底座 (Node 10481:1903)
   ========================================================= */
#sec-06 {
  /* 铺满视口：872px 为设计稿保底高度（暗黑屏下方不再露出浅色下一屏） */
  height: 100vh;
  min-height: 872px;
  background: radial-gradient(circle at 50% 50%, #0d1a0d 0%, #050605 100%);
  overflow: hidden;
  position: relative;
}

#sec-06 .canvas-container {
  height: 100vh;
  min-height: 872px;
  /* 顶部留白随视口平滑增长：超出设计高度的空间上下平均分配（无跳变） */
  padding-top: calc(100px + (max(872px, 100vh) - 872px) * 0.5);
}

.infra-header {
  text-align: center;
  margin-bottom: 70px;
}

.infra-layout-box {
  width: 975px;
  height: 396px;
  margin: 0 auto;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 06 屏入场（2026-09-11 并入全站统一元素级 reveal）：标头 / 左卡 / 右卡 / 中心核心
   由 [data-reveal] 驱动（左 0 → 右 80 → 中心 160）；旧 animate-in 机制已整体删除，
   基础规则不再声明 opacity/transform/transition（避免抢占揭示过渡） */
.infra-col-card.left-module {
  width: 350px;
  background: linear-gradient(95deg, #000000 3%, rgba(36, 36, 36, 0.24) 100%);
  border: 0.83px solid #323232;
  border-radius: 13px;
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  z-index: 10;
}

.infra-col-card.right-module {
  width: 350px;
  background: linear-gradient(95deg, #000000 3%, rgba(36, 36, 36, 0.24) 100%);
  border: 0.83px solid #323232;
  border-radius: 13px;
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  z-index: 10;
}

.infra-center-core svg {
  width: 288px;
  height: 233px;
  display: block;
}

.infra-col-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.infra-header-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(117deg, #131313 34%, rgba(55, 55, 55, 0.4) 155%);
  border: 1px solid #2e2e2e;
  display: flex;
  align-items: center;
  justify-content: center;
}

.infra-row-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.infra-row-title {
  font-size: 16px;
  color: #f4f4f4;
  display: flex;
  align-items: center;
  gap: 8px;
}

.infra-pills-wrap {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.infra-pill {
  background: #191919;
  border: 0.83px solid #2f2f2f;
  border-radius: 6.6px;
  padding: 4px 10px;
  font-size: 12px;
  color: #a3a3a3;
}

.infra-center-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 288px;
  height: 233px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.infra-center-art {
  width: 100%;
  height: 100%;
  animation: pulseBreathing 4s infinite ease-in-out;
}

@keyframes pulseBreathing {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.05); opacity: 1; filter: drop-shadow(0 0 15px rgba(0, 201, 123, 0.6)); }
}

/* =========================================================
   07 品牌客户案例 · 双行循环轮播 (Node 10001:547)
   批注（10801:10315）：自动横向循环轮播、默认 Logo 灰度；Hover 暂停 + 高亮 +
   Logo 变彩；匀速 30px/s、平滑加减速（滚动驱动见 shuyun-full.js 第 5 节）
   ========================================================= */
#sec-07 {
  /* 铺满视口：832px 为设计稿保底高度 */
  height: 100vh;
  min-height: 832px;
  background-color: #f6f6f6;
  border-top: 0.827px solid #e4e4e7;
  overflow: hidden;
}

#sec-07 .canvas-container {
  height: 100vh;
  min-height: 832px;
  /* 顶部留白随视口平滑增长：超出设计高度的空间上下平均分配（无跳变） */
  padding-top: calc(106px + (max(832px, 100vh) - 832px) * 0.5);
}

/* 标题第三行（设计稿为 Medium 字重） */
.section-main-title .title-medium {
  font-weight: 500;
}

.section-sub-desc {
  font-size: 12px;
  color: rgba(24, 26, 30, 0.6);
  margin-top: 8px;
}

/* 卡区：两行横向循环轨道（1120 裁剪窗；卡间距 10.6、行距 8.27 为设计稿实测） */
.cases-marquee {
  width: 1120px;
  margin: 70px auto 0;
  display: flex;
  flex-direction: column;
  gap: 8.27px;
}

.cases-row {
  height: 194.37px;
  overflow: hidden;
  position: relative;
}

.cases-track {
  display: flex;
  gap: 10.6px;
  width: max-content;
  will-change: transform;
}

.case-card-new {
  flex: none;
  width: 280px;
  height: 189px;
  background: #ffffff;
  border: 0.732px solid #eee;
  border-radius: 6.389px;
  overflow: hidden;
  transition: border-color 0.25s var(--ease-brand);
}

/* Hover 高亮：描边转品牌绿（设计稿 --g1，与全局变量一致） */
.case-card-new.is-hot {
  border-color: var(--g1);
}

.case-card-head {
  height: 74px;
  padding: 20px 24px 20.732px;
  background: rgba(255, 255, 255, 0.5);
  border-bottom: 0.732px solid #f4f4f5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5.793px;
}

.case-card-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 14.637px;
  letter-spacing: -0.3288px;
  color: #181a1e;
}

.case-card-subline {
  font-size: 12px;
  font-weight: 300;
  line-height: 8.782px;
  letter-spacing: 0.0949px;
  color: rgba(24, 26, 30, 0.6);
}

.case-card-logos {
  height: 114px;
}

/* 灰度/彩色：同一张图，默认 grayscale，Hover 变品牌彩色（可平滑过渡） */
.case-card-logos img {
  display: block;
  width: 100%;
  height: 100%;
  filter: grayscale(1);
  transition: filter 0.3s var(--ease-brand);
}

.case-card-new.is-hot .case-card-logos img {
  filter: grayscale(0);
}

/* =========================================================
   08 AI Lab 前沿智库 (Node 10501:3863)
   ========================================================= */
#sec-08 {
  /* 铺满视口：950px 为设计稿保底高度 */
  height: 100vh;
  min-height: 950px;
  background-color: #fafafa;
  border-top: 0.83px solid #e4e4e7;
  overflow: hidden;
  /* 上下留白对称且随视口平滑增长（无跳变） */
  padding: calc(106px + (max(950px, 100vh) - 950px) * 0.5) 0;
}

#sec-08 .canvas-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lab-whitepaper-card {
  width: 1040px;
  height: 243px;
  background: #ffffff;
  border: 0.83px solid #e4e4e7;
  border-radius: 13px;
  display: flex;
  overflow: hidden;
  box-shadow: 0 1px 9px rgba(0, 0, 0, 0.04);
  margin-bottom: 24px;
  transition: all 0.3s var(--ease-brand);
}

.lab-whitepaper-card:hover {
  border-color: var(--g1);
  box-shadow: 0 6px 20px rgba(16, 168, 109, 0.08);
}

.wp-cover-col {
  width: 545px;
  height: 100%;
  /* 与 03 屏卡片共用同一张底图（原 val-bg-1.png 与 card-shared-bg.png 内容完全相同，
     已合并为一个 WebP；1071×1469 的 PNG 存成 WebP 后 1268KB → 17KB，像素差 >8 的比例为 0%） */
  background: #f2f2f2 url('assets/val/card-shared-bg.webp') no-repeat center/cover;
}

.wp-info-col {
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.wp-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wp-badge {
  background: #f4f4f5;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 9px;
  font-weight: 600;
  color: #52525c;
}

.wp-date {
  font-size: 10px;
  color: #9f9fa9;
}

.wp-title {
  font-size: 24px;
  font-weight: 600;
  color: #18181b;
}

.wp-desc {
  font-size: 12px;
  color: #71717b;
  line-height: 19px;
}

.btn-download-wp {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #27272a;
  text-decoration: none;
}

.btn-download-wp:hover {
  color: var(--g1);
}

.lab-three-cards {
  width: 1040px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.lab-mini-card {
  height: 340px;
  background: #ffffff;
  border: 0.83px solid #e4e4e7;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s var(--ease-brand);
}

.lab-mini-card:hover, .lab-mini-card.active-card {
  border-color: var(--g1);
  box-shadow: 0 15px 22px rgba(0, 0, 0, 0.05);
}

.lab-card-thumb {
  height: 166px;
  background: #fafafa;
  border-bottom: 0.83px solid #e4e4e7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lab-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.lab-card-body .title {
  font-size: 14px;
  font-weight: 600;
  color: #18181b;
}

.lab-card-body .desc {
  font-size: 11px;
  color: #71717b;
  line-height: 17px;
}

/* =========================================================
   09 底部行动转化条 (Node 10501:4274)
   批注（CtaSection 10501:4275）：进入视区后标题/副标题/按钮依次淡入、
   背景绿色粒子缓慢漂浮（低频克制）；「立即咨询」为 MovingBorderButton——
   渐变光弧沿边框流转，Hover 描边/光效增强 + 箭头轻微右移
   ========================================================= */
#sec-09 {
  height: 445px;
  background: #0a0a0a; /* 设计稿：近黑底，绿色氛围由"光"图层提供 */
  border-top: 1px solid #1a3a2a;
  /* 底描边已移除（2026-09-11）：设计稿中该线是 CtaSection(460px) 溢出 09 帧(445.8px)
     的边框，位于交界下方 ~14px，并非两屏间的分隔设计；实页渲染为近黑底上全宽亮线
     （实测亮度 41 vs 底色 10）割裂感明显——交界改由底部渐隐无缝过渡，不留任何线 */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 底边渐隐：光晕 / 网格 / 粒子在底部 110px 内平滑消隐至纯黑，与 10 屏无缝衔接
   （交界零线，背景见 #sec-09 主规则注释）；遮罩起于 y≈335，不触及内容区
   （按钮底缘 y≈312）。 */
#sec-09::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0), #0a0a0a);
  pointer-events: none;
  z-index: 2;
}

#sec-09 .canvas-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* —— 背景层：光晕 / 网格 / 左右粒子（参数均为设计稿实测） —— */
.cta-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 光：超大模糊圆块（设计稿为 blur(99px) 的绿块，非径向渐变） */
.cta-glow {
  position: absolute;
  left: 50%;
  top: 62px;
  width: 864.33px;
  height: 321.75px;
  transform: translateX(-50%);
  background: rgba(0, 201, 80, 0.1);
  filter: blur(99.253px);
  border-radius: 9999px;
}

/* 网格：旋转 90° 的方格纹理，color-dodge + 7% 透明度（极淡的科技纹理） */
.cta-grid {
  position: absolute;
  left: 50%;
  top: -149px;
  width: 1088px;
  height: 774px;
  transform: translateX(-50%);
  mix-blend-mode: color-dodge;
  opacity: 0.07;
}

.cta-grid-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 774px;
  height: 1088px;
  transform: translate(-50%, -50%) rotate(-90deg) scaleY(-1);
}

.cta-grid-inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 粒子：同一张大图的两个局部（exclusion 混合 + 50% 透明），缓慢漂浮（批注："低频、克制"） */
.cta-particles {
  position: absolute;
  mix-blend-mode: exclusion;
  opacity: 0.5;
}

.cta-particles img {
  position: absolute;
  max-width: none;
}

.cta-particles-left {
  left: 120px;
  top: 252px;
  width: 432px;
  height: 160px;
  animation: cta-drift-left 16s ease-in-out infinite;
}

.cta-particles-left img {
  left: -0.1%;
  top: -60.63%;
  width: 182.84%;
  height: 277.15%;
}

.cta-particles-right {
  left: 535px;
  top: 256px;
  width: 789px;
  height: 146px;
  animation: cta-drift-right 19s ease-in-out infinite;
}

.cta-particles-right img {
  left: -0.05%;
  top: -76.03%;
  width: 100.11%;
  height: 303.73%;
}

/* 设计稿为 rotate(180deg) + scaleY(-1)，等效水平镜像；独立层承载以免与漂浮动画互相覆盖 */
.cta-particles-flip {
  position: absolute;
  inset: 0;
  transform: scaleX(-1);
}

@keyframes cta-drift-left {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(16px, -10px); }
}

@keyframes cta-drift-right {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-18px, 8px); }
}

/* —— 内容 —— */
.cta-title {
  font-size: 42px;
  font-weight: 300;
  line-height: 51.6px;
  letter-spacing: -0.8022px;
  color: #ffffff;
}

.cta-sub {
  font-size: 18px;
  font-weight: 300;
  line-height: 23.57px;
  letter-spacing: 0.0246px;
  color: #9f9fa9;
  margin-top: 8.27px;
}

/* 依次淡入（批注）：2026-09-11 并入全站统一元素级 reveal——
   三元素由 [data-reveal] + data-reveal-delay="0|80|160" 驱动（见 .reveal-init 规则与 index.html） */

/* —— 按钮：MovingBorderButton（渐变光弧沿边框流转） —— */
.btn-cta-large {
  position: relative;
  width: 257px;
  height: 59px;
  margin-top: 16.54px;
  background: #111513;
  border: 0.919px solid #00c97b;
  border-radius: 13.78px;
  box-shadow: 0 0 3.675px rgba(0, 166, 122, 0.48);
  color: #fafafa;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.3965px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden; /* 光弧裁剪在按钮内（设计稿 overflow-clip） */
  transition: border-color 0.3s var(--ease-brand), box-shadow 0.3s var(--ease-brand);
}

/* 流动光弧：设计稿中叠于边框的渐变形变元素（Rectangle 2817），绕按钮中心循环流转 */
.cta-btn-orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: cta-orbit 4.2s linear infinite;
}

.cta-btn-orbit svg {
  position: absolute;
  left: 139.37px;
  top: 0.83px;
  width: 116.62px;
  height: 40.53px;
}

@keyframes cta-orbit {
  to { transform: rotate(360deg); }
}

.cta-btn-arrow {
  width: 18.374px;
  height: 18.374px;
  margin-left: 3.675px;
  transition: transform 0.3s var(--ease-brand);
}

.btn-cta-large:hover {
  border-color: #4fffc7;
  box-shadow: 0 0 4px rgba(0, 201, 123, 0.8), 0 0 18px rgba(0, 201, 123, 0.35);
}

.btn-cta-large:hover .cta-btn-arrow {
  transform: translateX(3px);
}

/* =========================================================
   10 全局页尾 Footer (Node 10501:4071)
   ========================================================= */
#sec-10 {
  height: 699px;
  background-color: var(--bg-footer);
  /* 顶部不画线：交界处为「零线」（09 屏底描边与 10 屏顶边框均已移除，见 #sec-09 注释），
     由 09 屏底部渐隐自然收尾。两屏各自画线会紧贴叠成 2px 亮带（实测亮度 41+31，底色仅 10） */
  overflow: hidden;
}

#sec-10 .canvas-container {
  height: 699px;
  padding-top: 126px;
  padding-left: 160px;
  padding-right: 160px;
}

.footer-top-grid {
  display: flex;
  justify-content: space-between;
  gap: 80px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-col-title {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-links-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-links-list a {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.2s var(--ease-brand);
}

.footer-links-list a:hover {
  color: var(--brand-green);
}

.footer-middle-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 50px;
}

.footer-social-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-social-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-qrcodes-wrap {
  display: flex;
  gap: 20px;
}

.qrcode-box {
  background: #ffffff;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.qrcode-box img {
  width: 84px;
  height: 84px;
  object-fit: cover;
}

.qrcode-label {
  font-size: 11px;
  color: #181a1e;
}

.footer-bottom-bar {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-contacts-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

.footer-contacts-info span {
  color: #ffffff;
}

.footer-legal-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.footer-legal-links a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.footer-copyright {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

/* =========================================================
   响应式适配 · 新增元素的基础规则（桌面端一律隐藏）

   从这里开始往下的内容全部是**适配期新增**，桌面端不消费。
   集中放在文件末尾、与既有样式分段，是为了让边界清晰：任何一行出问题都能整段回滚，
   也便于 tools/_check-mobile.js 断言「新增规则没有裸选择器泄漏到桌面」。
   ========================================================= */
.nav-toggle {
  display: none; /* 仅 ≤1024px 显示 */
}
.mobile-nav-panel {
  display: none; /* 仅 ≤1024px 显示；显隐由 [hidden] 控制 */
}

/* =========================================================
   响应式适配 · M 档（1025–1440px：窄屏笔记本 / 横屏平板）

   设计原则：
   1) **本档在 1440 恒为 no-op** —— 所有取值在 vw 超过阈值时都退化为桌面原值，
      由 tools/_check-mobile.js --diff（几何基线逐项比对）机器验证，不靠肉眼。
   2) 只处理「确实超出视口」的少数盒子，**不动 .canvas-container 的 1440px 基线**。
      为什么不整体改成流式：内容的包含块就是 .canvas-container，其 position:absolute
      子元素的 100% 仍解析为 1440，收窄容器并不能让它们跟着变窄；反而会把「画布居中 +
      两侧对称裁剪」变成「左锚定」，恶化 02/09 屏硬左定位的装饰层
      （.arch-rail-base left:525px / .cta-particles-left left:120px 等）。
   3) 本档不修改任何既有规则，只做同名覆盖。

   全站需要处理的只有下面两处 —— 其余内容盒本来就 ≤1120px，1440 画布下无需改动。
   ========================================================= */
@media (max-width: 1440px) {
  /* 顶部导航 1206px：视口 <1230px 时开始溢出。fixed 元素的包含块是视口，故用 vw。
     vw ≥ 1230 时取 1206px，与桌面完全一致 → 本档在 1440 无副作用 */
  .hero-header {
    width: min(1206px, calc(100vw - 24px));
  }

  /* 页脚内容区 1120px（由 .canvas-container 左右各 160px 内边距围出）。
     注意：内边距的百分比按**包含块**（.screen-section，宽 = 视口）解析，不是画布宽，
     所以这里必须显式用 1440px 参与计算，不能写 100%。
     可见宽度不会超过视口，故把内容宽度收敛为 min(1120px, 100vw - 48px)：
       vw ≥ 1168 → 取 1120px → 左右各 (1440-1120)/2 = 160px，与桌面完全一致
       vw = 1100 → 内容 1052px → 视口内左右各留 24px（原会被裁掉 10px）
       vw = 1025 → 内容  977px → 视口内左右各留 24px（原会被裁掉 48px） */
  #sec-10 .canvas-container {
    --footer-content: min(1120px, calc(100vw - 48px));
    padding-left: calc((1440px - var(--footer-content)) / 2);
    padding-right: calc((1440px - var(--footer-content)) / 2);
  }

  /* 内容盒宽度收敛。
     这些盒子居中于 1440 画布，可见区域是画布中「宽度=视口宽」的那一条，所以
     盒子宽 X 必须 <= 视口宽才不会被裁。1120px 的盒子在视口 <1168px 时会溢出
     （1100 时左右各裁 10px，1025 时各裁 48px），1040px 的盒子在 <1088px 时同理。
     收敛为 min(原值, 100vw - 48px)：vw >= 1168 时取原值 → 本档在 1440 恒为 no-op。
     以上盒子全都居中（auto 外边距 / flex align-items:center），故缩小后仍居中，
     正好落在可见区内。 */
  .agent-eco-content,
  .cases-marquee {
    width: min(1120px, calc(100vw - 48px));
  }
  .lab-whitepaper-card,
  .lab-three-cards {
    width: min(1040px, calc(100vw - 48px));
  }

  /* 导航下拉面板本档无需处理：宽面板（products 999 / cases 965 / ailab 990）是**页面
     居中、无偏移**的，在 ≥1025px 视口下放得下；唯一带 data-follow 动态偏移的是「关于
     我们」面板，仅 117px 宽，不可能溢出。（S 档 ≤1024 会用汉堡面板整体替换下拉系统。） */
}

/* =========================================================
   响应式适配 · S 档（641–1024px：平板竖屏 / 大屏手机）
              T 档（≤640px：手机）见文件更下方

   本档做真重排：画布流式化后，屏内内容改为纵向单列，装饰层分级降级。
   仍遵守「桌面零改动」——全部写在媒体查询内，且不改任何既有规则。

   拆档理由：1024 恰好卡在 1120px 内容盒外侧，故 S 档与 T 档分开控制。
   ========================================================= */
@media (max-width: 1024px) {
  /* ---------- 全局骨架 ---------- */

  /* 画布流式化：S/T 档的地基。基线 width:1440px 只在 ≥1441 生效。
     特异性同为 (0,1,0)，靠**源序在后**取胜（本块在文件末尾）。 */
  .canvas-container {
    width: 100%;
  }

  /* 右侧竖向导航栏：它导航的 sec-03~06 在汉堡面板里有等价锚点，无信息损失 */
  .sticky-arch-sidebar {
    display: none;
  }

  /* 桌面 mega-menu 下拉系统：面板宽 999/965/990px，平板放不下。
     注意——不是「收窄」，而是整个撤下，由汉堡面板接管（见 .nav-toggle 段）。 */
  .nav-links,
  .nav-drop-layer {
    display: none;
  }

  /* 解开各屏 100vh / min-height 兜底，让高度由内容决定。
     ⚠️ 关键顺序约束：**必须与「该屏内容改为静态流」同一步完成**。
     这些屏的内容是 position:absolute，绝对定位子元素不撑高父容器 —— 若只改 height:auto
     而内容仍是绝对定位，容器会直接塌缩成 0 高度（实测 sec-01 高 0、sec-04 被顶到 top:2px）。
     所以这里按屏逐个解锁，与下面的逐屏重排一一对应，不做批量处理。
     注意必须写成 #sec-XX 形式：基线用的是 (1,1,0)，普通类选择器压不过。 */

  /* ---------- sec-10 页脚（内容本就在正常流中，无需先重排）---------- */
  #sec-10 {
    height: auto;
  }
  #sec-10 .canvas-container {
    height: auto;
    /* 同时压掉 M 档的 --footer-content 内边距算法：画布已流式，直接按视口留边 */
    padding: 56px 20px 40px;
  }
  .footer-top-grid {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 32px 24px;
  }
  .footer-col {
    /* !important 必需：四列宽度写在 HTML 内联 style 上（320/220/180/160px），
       内联样式的优先级高于任何媒体查询规则，不加 !important 覆盖不掉。
       （另一条路是把内联宽度搬进 CSS 类，但那要动桌面 HTML；此处用 !important 更收敛。） */
    width: auto !important;
    flex: 1 1 180px;
    min-width: 140px;
  }
  .footer-middle-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }
  .footer-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .footer-legal-copy {
    align-items: flex-start;
  }

  /* ---------- sec-04 / 06 / 07 区块解锁 ----------
     ⚠️ 区块( section )自身也带 height:100vh + min-height 兜底，必须**与 .canvas-container
     一起**解锁：只改容器的话，区块仍是 100vh 且 overflow:hidden，内容高出部分会被整块裁掉。 */
  #sec-04,
  #sec-06,
  #sec-07 {
    height: auto;
    min-height: 0;
  }

  /* ---------- sec-04 AI 应用生态：左右横排 → 纵向 ---------- */
  #sec-04 .canvas-container {
    height: auto;
    min-height: 0;
    /* 上留白压掉「超出设计高度上下均分」的 100vh 居中 calc；左右统一留视口边距 */
    padding: 56px 20px 0;
  }
  .agent-eco-content {
    width: 100%;
    flex-direction: column;
    gap: 32px;
    margin-top: 0;
  }
  .agent-left-info {
    width: 100%;
    height: auto; /* 原 450px 是为与右栏等高，纵向排列后无意义 */
  }

  /* 三条能力项：窄屏改「图标在左、文案在右」的横向条目。
     为什么必须改：桌面版左栏只有 174px 宽，文案折成多行，「图标→文案」与
     「文案→下一个图标」的间距都只有 20 余像素 —— 因为文案本身够长，分组关系靠
     体量就能看出来。窄屏左栏变成整屏宽后，文案只占 1~2 行，两个间距就几乎相等
     （实测 图标→文案 ≈22px、文案→下一图标 24px），眼睛分不清哪段文案属于哪个图标，
     整块读起来像 6 个元素松散堆叠。
     改横向条目后：图标与文案压到 12px、条目间距保持 24px，分组关系一眼可辨。
     同时把文案从 10px 提到 13px（10px 在手机上过小）、行高 1.65，并按
     (图标高 30 − 首行高 ≈21)/2 给文案加 4px 上内边距，使首行文字与图标光学对齐。 */
  .agent-feature-item {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
  }
  .agent-feature-desc {
    flex: 1;
    font-size: 13px;
    line-height: 1.65;
    padding-top: 4px;
  }
  .agent-right-workspace {
    width: 100%;
    height: auto;
    flex-direction: column;
  }
  .agent-nav-sidebar {
    /* 竖向 tab 栏 → 横向可滑动 tab 条 */
    width: 100%;
    height: auto;
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 0.94px solid #f4f4f5;
    padding: 8px;
    gap: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .agent-nav-tab {
    flex: none;
    height: auto;
    min-height: 52px;
    white-space: nowrap;
  }
  .agent-preview-panel {
    min-height: 240px;
  }
  .agent-preview-img {
    max-width: 100%;
  }

  /* ---------- sec-06 AI 基础设施：975px 横排 → 纵向「左 → 核心 → 右」 ---------- */
  #sec-06 .canvas-container {
    height: auto;
    min-height: 0;
    padding: 56px 20px 0;
  }
  .infra-header {
    margin-bottom: 40px;
  }
  .infra-layout-box {
    width: 100%;
    height: auto;
    flex-direction: column;
    /* 间距取小值：中间核心的连接线只画到 SVG 边缘，间距太大端点会与卡片脱开。
       桌面版这两者是轻微重叠的（卡片边缘压过 SVG 盒子 7px），故这里也贴近处理。 */
    gap: 6px;
  }
  .infra-col-card.left-module,
  .infra-col-card.right-module {
    width: 100%;
    order: 1; /* 左卡先 */
  }
  .infra-col-card.right-module {
    order: 3; /* 右卡最后 */
  }
  .infra-center-core {
    /* 原为 975×396 舞台内的绝对居中核，纵向排列后回归正常流。
       ⚠️ 用 relative 而非 static：下面的端点圆点要用它当定位参照。
       ⚠️ 同时必须重置 top/left —— 基座是 top:50%; left:50%，这两个声明在 static 下无效、
          一变成 relative 就会把核心推歪（与 .chat-container 是同一类坑）。 */
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    order: 2; /* 复刻设计意图：两个底座都连接到中间的 AI 核心 */
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
  /* 连接线的端点圆点：桌面版这两个圆点画在连接线两端（属于各自 path），
     竖排旋转后落到了 SVG 边界之外、被 viewBox 裁掉，故用 CSS 补回。
     位置就是连接线所在的水平中线 —— SVG 居中于核心，故中线即核心的水平中心。 */
  .infra-center-core::before,
  .infra-center-core::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: #00c97b;
    opacity: 0.7;
  }
  .infra-center-core::before {
    top: 0;
  }
  .infra-center-core::after {
    bottom: 0;
  }
  .infra-center-core svg {
    width: min(288px, 72vw);
    height: auto;
    margin: 0 auto;
  }

  /* 中间 AI 核心的连接线。桌面版由两组构成：
     · 中间两条**水平点线**左右直连两张卡片（`Vector 2521` / `2524`，各含端点小圆点）；
     · 4 条弧线扇向四角（`Vector 2518`/`2522`/`2520`/`2523`）。
     竖排后左右不再有卡片，但**不能简单删掉水平线** —— 它们才是真正搭到卡片边缘的那两条，
     删了之后弧线只是"朝上朝下扇开"，端点和卡片之间隔着一段空隙，连接关系读不出来。
     正解：绕 SVG 中心把这两条线**旋转 90°**，从「左右直连」变成「上下直连」，
     与上下两张卡片的边缘相接；弧线保持不动，继续做扇形装饰 —— 两组各司其职，与桌面版一致。
     旋转中心取 viewBox(0 0 288 233) 的中心；必须显式写 transform-box:view-box，
     否则 transform-origin 的参照系在各浏览器下不一致（SVG 元素的默认 transform-box 有历史差异）。
     用属性选择器是因为这些 id 含空格（如 "Vector 2521"），`#Vector 2521` 不是合法选择器；
     已核实这两个 id 在文档中唯一。 */
  .infra-center-core svg [id="Vector 2521"],
  .infra-center-core svg [id="Vector 2524"] {
    transform-box: view-box;
    transform-origin: 144px 116px;
    transform: rotate(90deg);
  }

  /* ---------- sec-07 案例轮播：裁剪窗 1120px → 全宽 ---------- */
  #sec-07 .canvas-container {
    height: auto;
    min-height: 0;
    padding: 56px 20px 0;
  }
  .cases-marquee {
    /* 轮播本身保留（rAF 驱动，触屏照常运行，IntersectionObserver 已控屏内才跑）。
       只把裁剪窗从固定 1120px 放开到全宽 —— 卡片宽度与轨道测宽逻辑不受影响。 */
    width: 100%;
    margin-top: 32px;
  }

  /* ---------- sec-08 AI Lab：白皮书卡与三小卡 → 纵向 / 自适应列 ---------- */
  #sec-08 {
    height: auto;
    min-height: 0;
    padding: 56px 0;
  }
  #sec-08 .canvas-container {
    /* 基础规则里横向内边距本就是 0（内容盒 1040 宽靠 canvas 居中留白）；
       画布流式化后留白消失，这里补上视口边距，否则标题文字会顶到屏幕边 */
    padding: 0 20px;
  }
  .lab-whitepaper-card {
    width: 100%;
    height: auto;
    flex-direction: column;
  }
  .wp-cover-col {
    width: 100%;
    height: 180px; /* 原 545×100%，纵向后改为定高封面带 */
    background-position: center;
  }
  .wp-info-col {
    padding: 24px;
  }
  .lab-three-cards {
    width: 100%;
    /* 卡片数是 3（质数），列数只能是 1 或 3 —— 2 列必定余 1、末行只剩一张卡。
       原来用 auto-fit minmax(240px,1fr)：768px 下只排 2 列 → 3 张卡排成 2+1（已实测报错）。
       本档宽度足够放 3 列（768 下每卡约 227px），T 档（≤640）再降为单列。
       minmax(0,1fr) 而非 1fr：1fr 的最小值是 min-content，长单词会把该列顶宽，
       导致同一行格子宽度不一致。 */
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lab-mini-card {
    height: auto;
    min-height: 300px;
  }

  /* ---------- sec-09 CTA：定高 445px → 随内容 ---------- */
  #sec-09 {
    height: auto;
    padding: 64px 20px;
  }

  /* ---------- sec-02 四层架构 ----------
     原为 398px 定高舞台上的一整套「轨道点亮 → 逐元素飞向右侧」演出，终点是把内容
     交接给右侧常驻竖栏。而 S 档已把竖栏隐藏，故这里不只是重排，更必须**中和交接**。 */
  #sec-02 {
    height: auto;
    padding: 56px 0;
  }
  #sec-02 .canvas-container {
    height: auto;
    min-height: 0;
    padding: 0 20px;
  }
  /* 轨道与光晕是横向舞台的装饰，纵向排列后无处安放 —— 直接撤下（JS 仍会写它们的
     width/class，但元素已 display:none，无副作用） */
  .arch-glow,
  .arch-rail-base,
  .arch-rail-progress {
    display: none;
  }
  .arch-center-box {
    position: static;
    transform: none;
    width: 100%;
    height: auto;
    gap: 24px;
  }
  /* ⚠️ 关键中和：.dock-to-right 原本把品牌标题与 4 个节点**全部淡出**
     （桌面端的语义是「交棒给右侧竖栏」）。移动端竖栏不存在，若不一并压回，
     02 屏会在演出结束后变成一整屏空白。选择器特异性与基线同为 (0,3,0)，靠源序在后取胜。 */
  .arch-center-box.dock-to-right {
    opacity: 1;
    pointer-events: auto;
  }
  .arch-center-box.dock-to-right .arch-brand-title,
  .arch-center-box.dock-to-right .arch-nav-node {
    opacity: 1;
    transform: none;
  }
  .arch-brand-title {
    font-size: 26px;
    line-height: 1.5;
    letter-spacing: 1.6px;
  }
  .arch-nav-list {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 28px;
  }
  .arch-nav-node {
    width: auto;
    min-width: 64px;
  }

  /* ---------- sec-03 AI 价值交付：1280px 三卡舞台 → 单卡 ---------- */
  #sec-03 {
    height: auto;
    min-height: 0;
    padding: 56px 0;
  }
  #sec-03 .canvas-container {
    height: auto;
    min-height: 0;
    /* 画布流式化后失去居中留白 —— 统一在**容器**上留视口边距，
       而不是给每个子块单独加（否则标头与轮播会各自不同、也容易漏） */
    padding: 0 20px;
  }
  /* 标头 div 的位置/宽度写在 HTML 内联 style 上（position:absolute; top:60px;
     width:1120px）—— 媒体查询压不过内联样式，必须 !important。 */
  #sec-03 .canvas-container > div:first-child {
    position: static !important;
    transform: none !important;
    width: 100% !important;
  }
  .value-carousel-wrapper {
    position: static;
    transform: none;
    width: 100%;
    margin-top: 32px;
  }
  .value-cards-stage {
    width: 100%;
    height: auto;
  }
  /* 只保留居中的那张卡并让它回归正常流（否则舞台内全是绝对定位子元素，高度会塌成 0）。
     JS 的 slot 轮换照常工作：被切到 center 的那张自动进入流内显示。 */
  .val-card.slot-center {
    position: relative;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 440px;
    height: auto;
    min-height: 380px;
    margin: 0 auto;
  }
  .val-card.slot-left,
  .val-card.slot-right {
    opacity: 0;
    pointer-events: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* 卡内视觉图固定 435.6px（设计稿卡宽 440 减内边距），窄屏卡变窄后会溢出卡外 */
  .val-card-visual {
    width: 100%;
    max-width: 435.6px;
  }

  /* ---------- sec-05 AI 智能中枢（信息最密的一屏，桌面 2202px 高）----------
     这里与方案原稿有一处偏离：原计划 S 档对 1000×785 环形舞台做 transform:scale
     + 负 margin 补偿，T 档再整块隐藏。但那是「缩小」与「删内容」，而 05 屏的舞台里
     装着 2 张核心卡 + 4 个轨道节点（带描述）+ 16 个能力药丸，**都是正文内容**。
     改为：只隐藏纯装饰（背景环图层、4 个定位角标、环境光斑），内容全部纵向铺开 ——
     既不缩小也不删，也省掉了补偿公式需要核对的环节。 */
  #sec-05 {
    min-height: 0;
    padding: 56px 0;
  }
  #sec-05 .canvas-container {
    min-height: 0;
    padding: 0 20px;
  }
  /* 纯装饰：环形背景图、四个带旋转角度的流动标签、两团环境光斑 */
  .hub-orbital-bg,
  .hub-flow-label,
  .hub-ambient-glow-top,
  .hub-ambient-glow-bottom {
    display: none;
  }

  /* --- 环形舞台：重排为「紧凑环形图」---
     桌面版的构图是一个**循环关系图**：中心两个核心（ORA / CWM）被 4 个能力域环绕，
     环上还有 16 个具体能力与 4 个方向标签（输入 / 约束 / 输出 / 反馈）—— 那四个字
     说明这是一个闭环，也是「关联关系」的核心。若只按内容顺序竖排，就退化成一根筋的列表。

     ★ 几何约束（先算过再动手，避免设计出做不到的方案）：
     350px 宽的屏幕放不下「核心居中 + 能力域落在环上」的原构图 —— 环半径至少要 100px
     才能让 128px 的圆盘互不重叠，此时环心只剩约 72px，装不下两个核心。
     故手机上改为：**核心置顶 → 循环流说明 → 4 个能力域成 2×2 环 → 每域能力列在其正下方**。

     ★ 用 grid-template-areas 而不是数字行列定位：模板本身就是一张布局图，可读、可核对。
       16 个药丸的归属是**从桌面端实测坐标算出来的**（每个药丸到 4 个圆盘中心的距离取最近），
       结果正好每域 4 个 —— 印证了设计意图就是「4 域 × 4 能力」。 */
  .hub-orbital-stage {
    width: 100%;
    height: auto;
    margin-bottom: 48px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 8px;
    row-gap: 10px;
    grid-template-areas:
      "cores cores cores cores"
      "f1    f2    f3    f4"
      "mem   mem   guard guard"
      "m1    m2    g1    g2"
      "m3    m4    g3    g4"
      "abil  abil  evo   evo"
      "a1    a2    e1    e2"
      "a3    a4    e3    e4";
  }
  /* 环形暗示：在「4 个能力域 + 其能力」这整块背后放一个虚线圆（第 3~6 行、4 列）
     —— 第 3 行是上两个能力域、第 4~5 行是它们的能力、第 6 行是下两个能力域。
     ::before 作为网格项会**先于**其它子元素绘制，自然落在最底层。 */
  .hub-orbital-stage::before {
    content: '';
    grid-area: 3 / 1 / 7 / 5;
    margin: 6px;
    border: 1px dashed rgba(0, 201, 123, 0.18);
    border-radius: 50%;
    pointer-events: none;
  }
  /* 环形背景图与「带旋转角度的环上标注」都是为桌面环服务的，窄屏不再适用 */
  .hub-orbital-bg {
    display: none;
  }
  .hub-center-cores {
    grid-area: cores;
    position: static;
    width: 100%;
    height: auto;
    flex-wrap: nowrap; /* 两个核心并排各占一半，不换行 */
    justify-content: center;
    gap: 12px;
  }
  .hub-core-card {
    /* 原 245×256 的胶囊形（radius 128px）→ 环形图里改为常规卡片圆角 */
    width: calc(50% - 6px);
    max-width: 340px;
    height: auto;
    min-height: 168px;
    border-radius: 24px;
    padding: 22px 14px;
  }
  /* 4 个方向标签：由「环上带旋转角度的标注」收成一条**循环流**说明行。
     顺序按环上的顺时针：输入 → 约束 → 输出 → 反馈，最后一个用 ↺ 表示回到起点。 */
  .hub-flow-label {
    position: static;
    transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    letter-spacing: 1.2px;
    color: #6f7a74;
    opacity: 1;
  }
  .hub-flow-label::after {
    content: '→';
    opacity: 0.55;
    letter-spacing: 0;
  }
  .hub-flow-label.feedback::after {
    content: '↺'; /* 反馈回到起点：闭环 */
    opacity: 0.75;
  }
  /* ⚠️ transform:none 必须写在这 4 条**带类名**的规则里：基础版是
     `.hub-flow-label.input { transform: rotate(27.7deg) }`（特异性 0,2,0），
     只在上面的 `.hub-flow-label {}`（0,1,0）里写 transform:none 压不住它 ——
     那些旋转角度是为桌面环服务的，在横向的循环流行里会变成莫名其妙的倾斜。 */
  .hub-flow-label.input { grid-area: f1; transform: none; }
  .hub-flow-label.constraint { grid-area: f2; transform: none; }
  .hub-flow-label.output { grid-area: f3; transform: none; }
  .hub-flow-label.feedback { grid-area: f4; transform: none; }
  /* 4 个能力域：各占 2 列，圆盘 + 名称 + 说明居中（构成 2×2 环） */
  .hub-orbit-node {
    position: static;
    width: 100%;
  }
  .hub-orbit-node.node-memory { grid-area: mem; }
  .hub-orbit-node.node-guard { grid-area: guard; }
  .hub-orbit-node.node-ability { grid-area: abil; }
  .hub-orbit-node.node-evolution { grid-area: evo; }
  .hub-node-desc {
    white-space: normal; /* 原为 nowrap，窄屏会撑破 */
  }
  /* 16 个具体能力：单格一个的胶囊（内容形如「RAG<br>检索增强」，保留两行结构） */
  .hub-sub-pill {
    position: static;
    display: flex;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 54px;
    border-radius: 12px;
    padding: 6px 4px;
    margin: 0;
    font-size: 11px;
    line-height: 1.3;
  }
  /* 药丸 → 能力域的归属：由桌面端实测坐标（到 4 个圆盘中心取最近）算出，正好每域 4 个。
     顺序按各域在桌面环上的排布，读起来与该域的说明相承接。 */
  .pill-rag { grid-area: m1; }
  .pill-vector-db { grid-area: m2; }
  .pill-multi-source { grid-area: m3; }
  .pill-layer-mem { grid-area: m4; }
  .pill-prompt-shield { grid-area: g1; }
  .pill-fine-perm { grid-area: g2; }
  .pill-full-audit { grid-area: g3; }
  .pill-harness { grid-area: g4; }
  .pill-atomic-api { grid-area: a1; }
  .pill-skill-ext { grid-area: a2; }
  .pill-mcp-proto { grid-area: a3; }
  .pill-a2a-inter { grid-area: a4; }
  .pill-reflection { grid-area: e1; }
  .pill-strategy-iter { grid-area: e2; }
  .pill-data-loop { grid-area: e3; }
  .pill-offline-eval { grid-area: e4; }

  /* --- 复合能力盘：1000px 绝对定位网格 → 流式栅格 --- */
  .hub-matrix-section {
    width: 100%;
  }
  .hub-integrated-stage {
    width: 100%;
    height: auto; /* 原 755px 定高 + overflow:hidden，是靠绝对定位撑的 */
    overflow: visible;
    padding: 12px;
    box-sizing: border-box;
  }
  /* 磁贴容器：**必须用固定列数，不能用 auto-fit**。
     各容器磁贴数为 8/8/4/4/8 —— auto-fit 的列数会随宽度浮动（实测 390px 下 3 列、
     768px 下 7 列），于是 8 排成 3+3+2、4 排成 3+1，且同一屏内出现 93px 与 169px
     两种宽度的磁贴（空轨塌缩把后者的磁贴拉宽），**视口越大磁贴反而越小**。
     固定 4 列是 8 与 4 的公约数：8 → 2 整行、4 → 1 整行，全部排满且宽度一致。
     （32 个磁贴因此共 8 整行；若改列数务必确认仍能整除 8 与 4。） */
  .hub-tiles-row-top,
  .hub-tiles-row-second,
  .hub-tiles-row-bottom {
    position: static;
    width: 100%;
    height: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* 原 repeat(8,125px) */
    gap: 8px;
    margin-bottom: 8px;
  }
  .hub-middle-composite-row {
    position: static;
    width: 100%;
    height: auto;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
  }
  .hub-tiles-col-left,
  .hub-tiles-col-right {
    width: 100%;
    height: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 个磁贴 → 1 整行（原单列 125px + 4 行定高） */
    grid-template-rows: none;
    gap: 8px;
  }
  .hub-six-categories-panel {
    /* 原 750×441 的 3 列 × 2 行定死网格 → 窄屏两列自适应 */
    width: 100%;
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    border-left: 0;
    border-right: 0;
    gap: 8px;
  }
  .hub-small-tile {
    min-height: 88px;
  }
  .hub-small-tile .tile-text {
    white-space: normal; /* 原 nowrap */
  }
  .hub-large-card {
    padding: 20px 14px;
  }

  /* ---------- sec-01 首屏 ---------- */
  #sec-01 {
    height: auto;
    min-height: 0;
    padding: 56px 0 40px;
  }
  #sec-01 .canvas-container {
    height: auto;
    min-height: 0;
    padding: 0 20px;
    /* 改为纵向流容器：三个绝对定位内容块回归正常流后依次排布 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }
  /* 背景层：解除 1440px 下限（那是给超宽屏铺满用的），窄屏跟随视口 */
  .hero-tech-bg {
    min-width: 0;
    width: 100vw;
  }
  /* 点阵字母 / 粒子层：≤1024px 整体撤下。
     字母是**侧翼构图**（左侧 x≈125–220、右侧 x≈1255–1305，桌面靠 1440 画布两侧留白）；
     等比缩小后它们会从两侧收进画面中部，而首屏内容在窄屏下几乎占满宽度 ——
     实测「对话面板宽度 / 视口宽度」一旦超过 69%，左翼字母必然被面板压住
     （768px 时面板 565px 占 74%，左翼字母落在面板范围内）。
     侧翼构图在窄屏没有容身之处，故按「装饰层窄屏降级」整体撤下；
     首屏氛围由星尘底纹、光晕与渐变保留（星尘是铺满的背景层，不受影响）。
     JS 侧已加守卫（`if (canvas.clientWidth) draw(t)`），隐藏时跳过整帧绘制以省电。 */
  .hero-fx-canvas {
    display: none;
  }

  /* 主标题块：绝对定位 → 正常流 */
  .hero-headline-wrap {
    position: static;
    transform: none;
    width: 100%;
    max-width: 520px;
    margin-top: 24px;
  }
  .hero-main-title {
    font-size: clamp(28px, 6.6vw, 40px);
    line-height: 1.22;
    letter-spacing: -0.5px;
  }

  /* 中央 AI 对话框：565×228 绝对面板 → 流式（内部仍是绝对定位布局，
     故保留 min-height 作为高度下限，避免 auto 高度把吸底元素挤扁）。

     ⚠️ 这里**必须用 position: relative，不能用 static**：面板内有 3 个绝对定位子元素
     依赖它当包含块 —— .chat-vector-glow（光晕）、.chat-input（输入框）、
     .chat-attachment-bar（附件条）。改成 static 后它们会逃逸到 .canvas-container，
     光晕压到首屏标题上、输入框横铺整个画布并把标题与生态 Logo 区盖住。
     （实测：390px 下报 2 处包含块逃逸 + 1 处新增重叠；1440px 下为 0。）

     ⚠️ 同时**必须重置 top/left**：基座是 `top:333px; left:50%`，这两个声明在
     static 下无效，一旦变成 relative 就会立即生效、把整个面板向下推 333px 并右移半个容器宽。 */
  .chat-container {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 565px;
    height: auto;
    min-height: 200px;
  }

  /* 生态伙伴 Logo 区：底部绝对锚定 → 正常流 */
  .ecosystem-partners-section {
    position: static;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: 600px;
  }
  .logo-carousel-viewport {
    width: 100%;
    max-width: 560px;
  }

  /* ---------- sec-01 生态伙伴 Logo ----------
     保留桌面的「三组绝对叠放 + 字幕式上下轮换」动画（轮播窗 26px 高，一次只显示一组）。

     ⚠️ 这里我曾误改成「三行静态铺开」——虽然能让三组一次看全，但把动画去掉了，
     属于用「降级」掩盖「没做适配」，已还原。

     窄屏要解决的真问题是：一行 6 个 logo（最宽组 ≈536px）放不进 350px 的轮播窗。
     解法是**把整组等比缩小**：在原有 translateY 动画上合成一个 scale，两者同时生效。
     用 transform: scale 而非 zoom —— zoom 会改变 clientWidth/scrollWidth 语义，
     而 scale 只影响绘制、不干扰任何测量（本组内也没有任何 JS 读尺寸）。
     缩放档位由「组宽 536 ≤ 轮播窗宽 min(560, 视口-40)」推出，见文件末尾的档位块。 */
  .logo-group {
    transform: translateY(24px) scale(var(--logo-scale, 1));
  }
  .logo-group.current {
    transform: translateY(0) scale(var(--logo-scale, 1));
  }
  .logo-group.exit-up {
    transform: translateY(-24px) scale(var(--logo-scale, 1));
  }

  /* ---------- sec-09 CTA 装饰层 ----------
     .cta-grid(1088px) / .cta-particles-left(432px@left:120) /
     .cta-particles-right(789px@left:535) 都是基于 1440 视口的绝对装饰，
     窄屏一律溢出。网格与粒子是纯纹理（还各带一张大图与 exclusion 混合），
     直接撤下；光晕保留但收进视口内。 */
  .cta-grid,
  .cta-particles {
    display: none;
  }
  .cta-glow {
    width: min(864.33px, 100%);
  }

  /* ---------- sec-05 六品类大卡：窄屏压缩内边距 ---------- */
  .hub-large-card {
    padding: 18px 12px;
  }

  /* ---------- iOS 安全区补偿 ----------     加了 viewport-fit=cover 之后，fixed 导航会顶到屏幕最上沿（刘海/灵动岛之下），
     故用安全区变量把它推下来。桌面与无刘海设备 env() 求值为 0，等价于没改。 */
  .hero-header {
    top: env(safe-area-inset-top, 0px);
    height: calc(76px + env(safe-area-inset-top, 0px));
    padding: calc(20px + env(safe-area-inset-top, 0px)) 16px 20px;
  }

  /* ---------- 移动端导航：汉堡按钮 ---------- */
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    /* 44px 触控热区（iOS HIG 的最小值） */
    width: 44px;
    height: 44px;
    margin-right: -10px; /* 视觉贴齐右缘，热区仍外扩 */
    padding: 0 10px;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .nav-toggle-bar {
    display: block;
    height: 1.5px;
    border-radius: 2px;
    background: var(--nav-fg-hover, #fff); /* 深底 #fff / 浅底 #18181b，两种主题都清晰 */
    transition: transform 0.3s var(--ease-brand);
  }
  /* 展开态：两条横线交叉成 ✕ */
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child {
    transform: translateY(3.25px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child {
    transform: translateY(-3.25px) rotate(-45deg);
  }

  /* ---------- 移动端导航：抽屉面板 ---------- */
  .mobile-nav-panel {
    display: block;
    position: fixed;
    top: calc(76px + env(safe-area-inset-top, 0px)); /* 紧贴导航栏下沿 */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 190; /* 低于 .hero-header(200) */
    background: rgba(9, 14, 11, 0.97);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    color: var(--text-white, #f0f4f8);
    overflow-y: auto;
    overscroll-behavior: contain; /* 滚到端点不把滑动传给背景页 */
    padding: 8px 0 calc(24px + env(safe-area-inset-bottom, 0px));
  }
  /* [hidden] 的 UA 规则特异性低于上面的 .mobile-nav-panel，须显式压回来 */
  .mobile-nav-panel[hidden] {
    display: none;
  }
  .mobile-nav-inner {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
  }
  .mnav-item {
    border-bottom: 1px solid rgba(240, 244, 248, 0.1);
  }
  .mnav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 56px;
    padding: 12px 0;
    background: none;
    border: 0;
    color: inherit;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
  }
  .mnav-caret {
    width: 9px;
    height: 9px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    opacity: 0.6;
    transition: transform 0.3s var(--ease-brand);
  }
  .mnav-item.open .mnav-caret {
    transform: rotate(-135deg) translate(-2px, -2px);
  }
  .mnav-body {
    padding: 2px 0 16px;
  }
  .mnav-group-title {
    padding: 12px 0 6px;
    font-size: 12px;
    color: rgba(240, 244, 248, 0.45);
  }
  .mnav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
  }
  .mnav-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 44px; /* 触控目标下限 */
    padding: 10px 0;
    color: inherit;
    text-decoration: none;
  }
  .mnav-link-title {
    font-size: 14px;
    color: rgba(240, 244, 248, 0.92);
  }
  .mnav-link-sub {
    font-size: 12px;
    color: rgba(240, 244, 248, 0.42);
  }
  .mnav-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: 24px;
    border-radius: 8px;
    background: var(--brand-green, #00c97b);
    color: #04140c;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
  }
  /* 抽屉展开时锁背景滚动（类由 JS 切换，比内联 style 更易被探针断言） */
  html.nav-open,
  html.nav-open body {
    overflow: hidden;
  }
}

/* =========================================================
   响应式适配 · T 档（≤640px：手机）
   在 S 档基础上再降一级：触控目标放大、页脚落为单列、关掉小屏上最贵的毛玻璃。
   ========================================================= */
@media (max-width: 640px) {
  /* 页脚四列 → 单列 */
  .footer-col {
    flex-basis: 100%;
  }

  /* 触控目标放大到 44px（iOS HIG 下限）：
     轮播箭头本体 36px → 44px；圆点本体只有 8px，用 padding 撑出热区（视觉大小不变） */
  .val-carousel-arrow {
    width: 44px;
    height: 44px;
  }
  .val-carousel-dot {
    box-sizing: content-box;
    padding: 14px;
  }

  /* 01 屏对话面板：关掉 backdrop-filter。
     毛玻璃在小屏上要按整个面板尺寸反复重绘，是移动端最贵的一项；
     退化样式与已有的 prefers-reduced-transparency 分支同款（实色半透明底）。 */
  .chat-container {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(4, 16, 10, 0.92);
  }

  /* 两处主标题再收一档 */
  .hero-main-title {
    font-size: clamp(24px, 7.4vw, 32px);
  }
  .cta-title {
    font-size: clamp(26px, 7.6vw, 34px);
  }

  /* 六品类面板：手机单列（每卡内容偏长，两列会挤） */
  .hub-six-categories-panel {
    grid-template-columns: 1fr;
  }

  /* 对话框推荐问题卡：文案原为 nowrap，窄屏会顶出面板（320px 下溢出 14px）；
     高度也从固定 30px 放开，供换行后自适应 */
  .question-card {
    height: auto;
    min-height: 30px;
  }
  .question-card-text {
    white-space: normal;
  }

  /* 磁贴固定 4 列后，390px 视口下每格仅约 75px（320px 下约 58px）：
     字号收一档 + 补内边距，避免「VoC 客户之声」这类长标签顶到格边。
     多出的行高由 min-height:88px 自然吸收。 */
  .hub-small-tile {
    padding: 8px 6px;
  }
  .hub-small-tile .tile-text {
    font-size: 12px;
    line-height: 1.3;
  }
  .hub-small-tile .tile-icon {
    width: 20px;
    height: 20px;
  }

  /* 药丸同为 4 列：390px 下每格约 87px、320px 下约 64px。
     基础字号 12px 时「Reflection」「Harness」这类较长拉丁词会顶到格边，故再收一档。 */
  .hub-sub-pill {
    font-size: 11px;
    padding: 8px 4px;
  }

  /* sec-08 三卡：手机上放不下 3 列，而 2 列会余 1，故落为单列 */
  .lab-three-cards {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  /* 对话面板右上角的装饰光晕：桌面上面板宽 565px、光晕 201×105 只压在留白区；
     手机上面板变窄且内容变高，光晕就落到「推荐问题卡」上了（实测 430/390/360/320
     四档均报重叠）。它是纯装饰（已确认 pointer-events:none，不影响点击），
     按「装饰层窄屏降级」处理，直接撤下。 */
  .chat-vector-glow {
    display: none;
  }
}

/* =========================================================
   sec-01 生态伙伴 Logo 的缩放档位

   为什么需要：桌面的轮播窗固定 560px、最宽一组 6 个 logo ≈536px，正好放得下；
   窄屏下窗宽降为 min(560, 视口-40)，536px 就放不进了 —— 而轮播窗是 overflow:hidden，
   放不下就会把最外侧的 logo 直接裁掉。故把整组按比例缩小（在原有 translateY 动画上
   合成 scale，见 S 档的 .logo-group 规则）。

   档位由「536 × scale ≤ 窗宽 = min(560, 视口-40)」反推，每档取该档**最窄视口**所需的
   缩放值，保证区间内任意宽度都放得下：
     视口 ≥576 → 窗宽 ≥536，本来就放得下，无需缩放（默认 1）
     430–576  → 窗宽 390–536 → 536×0.72 = 386 ≤ 390 ✔
     390–430  → 窗宽 350–390 → 536×0.65 = 348 ≤ 350 ✔
     360–390  → 窗宽 320–350 → 536×0.58 = 311 ≤ 320 ✔
     ≤360     → 窗宽 ≤320    → 536×0.50 = 268 ≤ 280 ✔（320px 视口）
   ========================================================= */
@media (max-width: 576px) {
  .logo-group {
    --logo-scale: 0.72;
  }
}
@media (max-width: 430px) {
  .logo-group {
    --logo-scale: 0.65;
  }
}
@media (max-width: 390px) {
  .logo-group {
    --logo-scale: 0.58;
  }
}
@media (max-width: 360px) {
  .logo-group {
    --logo-scale: 0.5;
  }
}