/* ============================================================
   温州特别一点 (TEB) — 官网设计系统
   外贸数字化出海一站式服务商
   暖白+品牌橙 配色体系
   ============================================================ */

/* ----------------------------------------------------------
   0. Web Font — 阿里巴巴普惠体 3.0（Alibaba PuHuiTi 3.0）
   ----------------------------------------------------------
   官方发布、永久免费商用（见 assets/fonts/LICENSE.txt）。
   文件保存在项目本地，运行时不依赖任何外部字体 CDN。
   字重映射（对应 --font-sans 的三档使用口径）：
     100–499 → 55 Regular （正文）
     500–649 → 65 Medium  （导航、按钮）
     650–900 → 85 Bold    （标题、重点）
   ---------------------------------------------------------- */
@font-face {
  font-family: 'Alibaba PuHuiTi 3.0';
  font-style: normal;
  font-weight: 100 499;
  font-display: swap;
  src: url('../assets/fonts/AlibabaPuHuiTi-3-55-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Alibaba PuHuiTi 3.0';
  font-style: normal;
  font-weight: 500 649;
  font-display: swap;
  src: url('../assets/fonts/AlibabaPuHuiTi-3-65-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Alibaba PuHuiTi 3.0';
  font-style: normal;
  font-weight: 650 900;
  font-display: swap;
  src: url('../assets/fonts/AlibabaPuHuiTi-3-85-Bold.woff2') format('woff2');
}

/* ----------------------------------------------------------
   1. CSS Variables — Design Tokens
   ---------------------------------------------------------- */
:root {
  /* Brand Colors — Orange + Warm White */
  --color-brand: #E8551A;          /* Brand Orange — CTAs, key accents, interactive */
  --color-brand-deep: #B8410A;     /* Deep Orange — hover states */
  --color-brand-light: #FFF5ED;    /* Very light warm orange — icon backgrounds, card tints */
  --color-accent: #E8551A;         /* Alias: primary accent = brand orange */
  --color-accent-dark: #B8410A;    /* Alias: accent hover */
  --color-primary: #1E1B18;        /* Warm charcoal — footer only */
  --color-primary-light: #3D3834;  /* Medium warm charcoal */
  --color-teal: #0D9488;           /* Retained for minor variety */
  --color-gold: #D97706;           /* Retained for warm data highlights */
  --color-green: #059669;          /* Retained for positive indicators */

  /* Gradients */
  --gradient-hero: linear-gradient(170deg, #FFFAF6 0%, #FFF5ED 40%, #FFF0E5 100%);
  --gradient-cta: linear-gradient(135deg, #E8551A 0%, #F57330 100%);
  --gradient-warm-glow: radial-gradient(circle at 70% 30%, rgba(232, 85, 26, 0.07) 0%, transparent 55%);
  --gradient-orange-subtle: linear-gradient(170deg, #FFFAF6 0%, #FFF3EA 50%, #FFFAF6 100%);

  /* Neutrals — Warm-toned gray scale */
  --color-white: #FFFFFF;
  --color-warm-white: #FFFAF6;     /* Primary warm page background */
  --color-gray-50: #FAF9F7;        /* Warm white page background */
  --color-gray-100: #F5F2EF;       /* Warm light gray card backgrounds */
  --color-gray-200: #E8E3DE;       /* Warm border */
  --color-gray-300: #D1CCC6;       /* Warm light border */
  --color-gray-400: #999590;       /* Placeholder text */
  --color-gray-500: #6B6662;       /* Secondary text */
  --color-gray-600: #4A4642;       /* Body text */
  --color-gray-700: #33312E;       /* Strong text */
  --color-gray-800: #1E1D1B;       /* Near-black text */
  --color-gray-900: #141414;       /* Headings, strong emphasis */

  /* Typography */
  /* 全站主字体：阿里巴巴普惠体 3.0（本地 @font-face，见文件顶部）；
     后面的系统字体仅作字体加载失败时的回退，不再作为默认显示字体。 */
  --font-sans: 'Alibaba PuHuiTi 3.0', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'SimHei', sans-serif;
  /* 等宽栈：拉丁/数字仍走 SF Mono / Fira Code / 系统等宽（保留技术标签的设计语言）。
     普惠体放在**通用族 monospace 之后**：通用族总有具体字体，所以拉丁/数字仍命中等宽、
     外观不变；而 SF Mono / Fira Code / 系统等宽都没有中文字形，浏览器会继续往后找，
     于是等宽元素里的**中文**落到普惠体，而不是系统默认中文字体。 */
  --font-mono: 'SF Mono', 'Fira Code', monospace, 'Alibaba PuHuiTi 3.0';

  /* Font Sizes */
  --text-hero: 3.5rem;      /* 56px */
  --text-h2: 2.5rem;        /* 40px */
  --text-h3: 1.75rem;       /* 28px */
  --text-h4: 1.25rem;       /* 20px */
  --text-body-lg: 1.125rem; /* 18px */
  --text-body: 1rem;        /* 16px */
  --text-body-sm: 0.875rem; /* 14px */
  --text-label: 0.8125rem;  /* 13px */
  --text-metric: 3rem;      /* 48px */

  /* Spacing (8px base) */
  --space-xs: 0.5rem;       /* 8px */
  --space-sm: 1rem;         /* 16px */
  --space-md: 1.5rem;       /* 24px */
  --space-lg: 2rem;         /* 32px */
  --space-xl: 3rem;         /* 48px */
  --space-2xl: 4rem;        /* 64px */
  --space-3xl: 6rem;        /* 96px */
  --space-4xl: 8rem;        /* 128px */

  /* Layout */
  --content-max: 1200px;
  --content-narrow: 768px;

  /* Borders & Shadows */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.06), 0 4px 10px rgba(0, 0, 0, 0.03);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.03);
  --shadow-glow: 0 0 24px rgba(232, 85, 26, 0.2);
  --shadow-glow-lg: 0 0 40px rgba(232, 85, 26, 0.25);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 4px 20px rgba(0,0,0,0.05);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  /* Z-Index */
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

/* ----------------------------------------------------------
   2. Reset & Base
   ---------------------------------------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-gray-800);
  background-color: var(--color-warm-white);
  overflow-x: hidden;
}

/* 表单控件的 font-family **默认不继承**，浏览器会回落到自身 UI 字体
   （实测：<button> 及其后代掉到 Arial，.work__dur 视频时长角标因此不是普惠体）。
   这里显式继承，只动 font-family，不动 font-size / line-height，避免影响布局。 */
button, input, select, textarea, optgroup {
  font-family: inherit;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent-dark);
}

ul {
  list-style: none;
}

/* Selection */
::selection {
  background: rgba(232, 85, 26, 0.15);
  color: var(--color-gray-900);
}

/* Focus */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ----------------------------------------------------------
   3. Typography
   ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-gray-900);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

.text-hero {
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.text-metric {
  font-size: var(--text-metric);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.text-gradient {
  background: var(--gradient-cta);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ----------------------------------------------------------
   4. Layout Utilities
   ---------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

.container-narrow {
  max-width: var(--content-narrow);
}

.section {
  padding: var(--space-3xl) 0;
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.section-tag {
  display: inline-block;
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--color-accent);
  background: rgba(232, 85, 26, 0.08);
  padding: 4px 14px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-sm);
  letter-spacing: 0.02em;
}

.section-title {
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-sm);
  letter-spacing: -0.01em;
}

.section-subtitle {
  font-size: var(--text-body-lg);
  color: var(--color-gray-600);
  max-width: 560px;
  margin: 0 auto;
}

.bg-gray { background-color: var(--color-gray-50); }
.bg-dark { background-color: var(--color-primary); }
.bg-white { background-color: var(--color-white); }
.bg-warm { background-color: var(--color-warm-white); }

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-md); }


/* ----------------------------------------------------------
   5. Components — Navigation
   ---------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-nav);
  height: 72px;
  display: flex;
  align-items: center;
  transition: background var(--transition-base),
              box-shadow var(--transition-base),
              height var(--transition-base);
}

.nav--transparent {
  background: rgba(255, 250, 246, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none;
}

.nav--solid {
  /* 轻量半透明 + 轻 backdrop blur，避免浅色区出现纯白矩形横条 */
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  height: 64px;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.nav__logo {
  display: grid;
  align-items: center;
  width: 195px;
  height: auto;
  overflow: visible;
  font-weight: 800;
  font-size: var(--text-h4);
  color: var(--color-gray-900);
  letter-spacing: -0.02em;
  transition: color var(--transition-base);
}

.nav--solid .nav__logo {
  color: var(--color-gray-900);
}

.nav__logo-icon {
  width: 36px;
  height: 36px;
  background: var(--gradient-cta);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav__link {
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--color-gray-600);
  transition: color var(--transition-fast);
  cursor: pointer;
}

.nav__link:hover {
  color: var(--color-gray-900);
}

.nav--solid .nav__link {
  color: var(--color-gray-600);
}

.nav--solid .nav__link:hover {
  color: var(--color-gray-900);
}

/* Hero：透明深色导航，白色 Logo */
.nav--dark {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* 合作版图：极浅深橙透明蒙层，白色 Logo */
.nav--orange {
  background: rgba(202, 66, 20, 0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none;
}

.nav--dark .nav__link,
.nav--orange .nav__link {
  color: rgba(255,255,255,0.80);
}

.nav--dark .nav__link:hover,
.nav--orange .nav__link:hover {
  color: #fff;
}

.nav--dark .nav__logo,
.nav--orange .nav__logo {
  color: #fff;
}

.nav--dark .nav__hamburger span,
.nav--orange .nav__hamburger span {
  background: rgba(255,255,255,0.85);
}

.nav--dark .nav__dropdown-menu,
.nav--orange .nav__dropdown-menu {
  background: #1E1B18;
  border-color: rgba(255,255,255,0.10);
}

.nav--dark .nav__dropdown-item,
.nav--orange .nav__dropdown-item {
  color: rgba(255,255,255,0.70);
}

.nav--dark .nav__dropdown-item:hover,
.nav--orange .nav__dropdown-item:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}

/* Nav logo image — 双图叠层交叉淡入，不再 src 瞬时切换 */
.nav__logo-img {
  display: block;
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: opacity 0.45s ease;
}

.nav__logo-img--light {
  /* 深色/橙色区显示白 logo；Hero 中央 Logo 完整出现时由控制器降到 ~0.4 */
  opacity: var(--nav-logo-opacity, 0.92);
}
.nav__logo-img--dark {
  opacity: 0;
}
.nav--solid .nav__logo-img--light {
  opacity: 0;
}
.nav--solid .nav__logo-img--dark {
  opacity: 1;
}

/* Nav logo — 响应式缩放，避免挤压导航 */
@media (max-width: 768px) {
  .nav__logo { width: 160px; }
}
@media (max-width: 480px) {
  .nav__logo { width: 140px; }
}

/* Dropdown */
.nav__dropdown {
  position: relative;
}

.nav__dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-sm);
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
}

.nav__dropdown:hover .nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav__dropdown-item {
  display: block;
  padding: 10px 14px;
  font-size: var(--text-body-sm);
  color: var(--color-gray-700);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.nav__dropdown-item:hover {
  background: var(--color-gray-50);
  color: var(--color-accent);
}

/* R66：当前页高亮。由 main.js 按 location.pathname 打 .is-current。
   必须排在 .nav--dark/.nav--orange .nav__link 之后 —— 两者同为 (0,2,0) 权重，
   靠后的才生效；:hover 那条是 (0,3,0)，所以高亮要单独再压一条。 */
.nav__link.is-current,
.nav__link.is-current:hover {
  color: var(--color-accent);
}

.mobile-menu__link.is-current {
  color: var(--color-accent);
}

/* Hamburger */
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
}

.nav__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-gray-800);
  border-radius: 2px;
  transition: all var(--transition-base);
}

.nav--solid .nav__hamburger span {
  background: var(--color-gray-900);
}

/* Mobile menu */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 360px;
  height: 100vh;
  background: var(--color-white);
  z-index: var(--z-overlay);
  padding: 96px var(--space-lg) var(--space-lg);
  /* 关闭态用 visibility:hidden 移出键盘 Tab 序列；延迟到滑出动画结束再生效，
     滑出过程仍可见。打开态（--open）立即恢复可见。 */
  visibility: hidden;
  transition: right var(--transition-base), visibility 0s linear var(--transition-base);
  box-shadow: var(--shadow-xl);
  overflow-y: auto;
}

.mobile-menu--open {
  right: 0;
  visibility: visible;
  transition: right var(--transition-base);
}

/* 移动菜单关闭按钮：原先只能点遮罩或按 Esc，键盘/触屏用户没有可见入口 */
.mobile-menu__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.mobile-menu__close:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
}

.mobile-menu__close:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.mobile-menu__link {
  display: block;
  padding: 14px 0;
  font-size: var(--text-body-lg);
  font-weight: 500;
  color: var(--color-gray-800);
  border-bottom: 1px solid var(--color-gray-100);
}

.mobile-menu__overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 40, 0.4);
  z-index: calc(var(--z-overlay) - 1);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
}

.mobile-menu__overlay--open {
  opacity: 1;
  visibility: visible;
}

/* R66：7 个入口平铺后，768–1200px 这一段放不下（7 项文字约 465px + 6×32px 间距
   + 195px Logo 已超出容器）。这里只收紧导航间距与容器左右留白，
   **不缩小 Logo / 字号**；并把汉堡菜单切换点从 768px 提到 992px，
   窄桌面直接走汉堡，不出现挤压或异常换行。 */
@media (max-width: 1200px) {
  .nav__links { gap: var(--space-md); }
  .nav__inner { padding: 0 var(--space-md); }
}

@media (max-width: 992px) {
  .nav__links    { display: none; }
  .nav__hamburger { display: flex; }
}

/* ----------------------------------------------------------
   6. Components — Buttons
   ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-size: var(--text-body-sm);
  font-weight: 600;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.btn--primary {
  background: var(--gradient-cta);
  color: var(--color-white);
  box-shadow: 0 2px 8px rgba(232, 85, 26, 0.25);
}

.btn--primary:hover {
  box-shadow: 0 4px 16px rgba(232, 85, 26, 0.4);
  transform: translateY(-1px);
}

.btn--secondary {
  background: transparent;
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
}

.btn--secondary:hover {
  background: rgba(232, 85, 26, 0.04);
}

.btn--ghost {
  background: var(--color-white);
  color: var(--color-gray-800);
  border: 1.5px solid var(--color-gray-200);
}

.btn--ghost:hover {
  border-color: var(--color-gray-400);
  background: var(--color-gray-50);
}

.btn--lg {
  padding: 18px 36px;
  font-size: var(--text-body);
}

.btn--sm {
  padding: 10px 20px;
  font-size: var(--text-body-sm);
}

/* ----------------------------------------------------------
   7. Narrative Hero — First Screen + Transition + AI Section
   ============================================================ */

/* ---- 7a. Narrative Wrap — tall container for sticky dot ---- */
.narrative-wrap {
  position: relative;
  /* Total height: hero(100vh) + ai-section content */
}

/* ---- 7a-i. Narrative Background — 三层固定全屏背景，JS 按滚动进度设置 opacity ---- */
.narrative-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.narrative-background__layer {
  position: absolute;
  inset: 0;
  opacity: 0; /* JS 直接设置，无 CSS transition */
}

.narrative-background__layer--dark {
  background: #0A0705;
}

/* 橙色/浅色背景不再整屏 crossfade，而是由 JS 从光球位置扩散的圆形光域（.bg-spread） */
.narrative-background__layer--orange {
  background: transparent;
}

.narrative-background__layer--light {
  background: transparent;
}

/* 扩散光域：2000px 圆形，JS 通过 translate3d + scale 让它从光球处向外生长 */
.bg-spread {
  position: absolute;
  left: 0;
  top: 0;
  width: 3000px;
  height: 3000px;
  border-radius: 50%;
  transform: scale(0);
  transform-origin: center center;
  will-change: transform;
}

.bg-spread--orange {
  background:
    radial-gradient(circle closest-side at 48% 46%, rgba(255, 152, 98, 0.92) 0%, rgba(246, 115, 53, 0.60) 24%, rgba(232, 85, 26, 0.32) 46%, rgba(160, 58, 22, 0.14) 66%, rgba(60, 24, 12, 0.04) 84%, rgba(16, 6, 3, 0) 100%),
    radial-gradient(circle closest-side at 56% 58%, rgba(246, 115, 53, 0.38) 0%, rgba(202, 66, 20, 0.12) 52%, rgba(80, 30, 14, 0) 100%);
}

.bg-spread--light {
  background:
    radial-gradient(circle closest-side at 50% 46%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 250, 246, 0.62) 28%, rgba(255, 240, 230, 0.30) 52%, rgba(253, 222, 202, 0.12) 74%, rgba(250, 214, 196, 0) 100%),
    radial-gradient(circle closest-side at 46% 54%, rgba(255, 246, 238, 0.40) 0%, rgba(251, 214, 198, 0.10) 60%, rgba(250, 210, 190, 0) 100%);
}

/* 内容层浮于固定背景之上 */
main {
  position: relative;
  z-index: 1;
}

/* 跨 Section 地图预显层：Hero→Map 移动中途由控制器淡入中国地图轮廓（与正式地图同尺寸同 padding，交接无跳变） */
.narrative-map-transition-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  padding: 80px 5vw var(--space-lg) 42vw;
}
.narrative-map__svg {
  width: 100%;
  max-width: 700px;
  height: auto;
  display: block;
}
.narrative-map__outline {
  fill: rgba(0, 0, 0, 0.06);
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.16));
}

/* 三大叙事 stage 全部透明，露出固定背景层 */
.hero-stage,
.cooperation-map,
.aibot-stage {
  background: transparent !important;
}

/* ---- 7b. Hero Stage — 地球弧线→光球→品牌 (280vh sticky) ---- */
.hero-stage {
  position: relative;
  z-index: 1;
}

.hero-stage__track {
  height: 280vh;
  position: relative;
}

.hero-stage__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* ---- 7b-i. Layer 1: Deep space background (now handled by .narrative-background) ---- */
.hero-stage__bg {
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 0;
}

/* ---- 7b-ii. Layer 2: Earth Arc ---- */
.hero-stage__arc-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-arc-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Arc glow beneath (large orange ambient below the arc) */
.hero-arc__glow {
  fill: rgba(255,120,50,0.18);
  filter: blur(22px);
}

/* Atmosphere circles (3 layers — outer to inner, increasing brightness) */
.hero-arc__atm {
  fill: none;
  stroke-linecap: round;
}

.hero-arc__atm--outer {
  stroke: rgba(255,150,90,0.16);
  stroke-width: 2;
}

.hero-arc__atm--mid {
  stroke: rgba(255,170,110,0.22);
  stroke-width: 1.6;
}

.hero-arc__atm--inner {
  stroke: rgba(255,190,130,0.28);
  stroke-width: 1.3;
}

/* Main arc line — bright, thick */
.hero-arc__main {
  fill: none;
  stroke: rgba(255,170,100,0.70);
  stroke-width: 2.8;
  stroke-linecap: round;
  filter: drop-shadow(0 0 12px rgba(255,130,60,0.50)) drop-shadow(0 0 4px rgba(255,160,90,0.35));
}

/* Core glow inside arc */
.hero-arc__core-glow {
  fill: rgba(255,150,80,0.0);
  filter: blur(16px);
  transition: fill 0.3s ease;
}

/* Arc particles — warm bright dots */
.hero-arc__particles circle {
  fill: rgba(255,210,170,0.85);
}

/* ---- 7b-ii-ext. Hero social icons along the arc（品牌色/光晕 inline，wrapper 只定位） ---- */
.hero-social {
  will-change: transform;
}
.hero-social__inner {
  will-change: transform;
}

/* ---- 7b-iii. Layer 3: Old Sphere — PERMANENTLY HIDDEN, shared-orb handles all ---- */
.hero-stage__sphere-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
}

.hero-sphere-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hero-sphere__glow-outer {
  filter: blur(20px);
}

.hero-sphere__body {
  filter: blur(0.5px);
}

.hero-sphere__core {
  filter: blur(2px);
}

/* Orbit rings */
.hero-sphere__orbit {
  fill: none;
  stroke: rgba(255,200,150,0.20);
  stroke-width: 1;
  stroke-dasharray: 8 4;
  stroke-linecap: round;
}

/* Orbit particles */
.hero-sphere__particles circle {
  fill: rgba(255,220,180,0.8);
}

/* ---- 7b-iv. Layer 4: Brand — Logo above orb, slogan below ---- */
.hero-stage__brand-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  /* Slogan 底边相对光球顶部：--orb-y / --orb-size 由叙事控制器发布 */
  padding-bottom: calc(100vh - var(--orb-y, 44vh) + (var(--orb-size, 160px) / 2) + clamp(24px, 3vh, 36px));
  pointer-events: none;
}

.hero-brand__logo {
  display: block;
  width: min(300px, 42vw);
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: translateY(12px);
  /* Logo 与 Slogan 间距 16—24px */
  margin-bottom: clamp(16px, 2vh, 24px);
}

.hero-brand__slogan {
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  color: rgba(255,255,255,0.72);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
}

/* ---- 7b-iv-b. Intro brand signature — 首屏中央品牌签名（Logo + Slogan） ---- */
.hero-stage__intro {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-16vh);
  pointer-events: none;
}

/* 品牌签名组合背后的极轻橙色径向光晕（连接下方弧线，无硬边界） */
.hero-stage__intro::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(760px, 80vw);
  height: min(560px, 62vh);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(232, 85, 26, 0.12), rgba(232, 85, 26, 0));
  filter: blur(16px);
  pointer-events: none;
}

.hero-brand-signature {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: fit-content;
}

.hero-brand-logo {
  display: block;
  width: clamp(240px, 20vw, 340px);
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.hero-brand-tagline {
  margin-top: clamp(9px, 1.5vh, 14px);
}

.hero-brand-text {
  font-size: clamp(15px, 1vw, 19px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  color: #FFFAF6;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  will-change: opacity, transform;
}

/* 编辑器保存的 Slogan 样式：固定 15px / 1px 字距（生产合并自 editable-overrides.css） */
.hero-brand-text[data-edit-id="hero-slogan"] {
  font-size: 15px;
  letter-spacing: 1px;
}

/* 进入态：Logo 先淡入 → Slogan 延迟约 150ms 跟随 */
.hero-brand-signature.is-visible .hero-brand-logo {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.hero-brand-signature.is-visible .hero-brand-text {
  opacity: 0.8;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .hero-brand-logo { opacity: 1; transform: none; transition: none; }
  .hero-brand-text { opacity: 0.8; transform: none; transition: none; }
}

@media (max-width: 768px) {
  .hero-brand-signature {
    align-items: center;
  }
  .hero-brand-logo {
    width: clamp(190px, 46vw, 250px);
  }
}

@media (max-width: 480px) {
  .hero-brand-logo {
    width: clamp(150px, 44vw, 190px);
  }
}

/* ---- 7b-vi. Hero responsive ---- */
@media (max-width: 1024px) {
  .hero-stage__track {
    height: 250vh;
  }
  .hero-brand__logo {
    width: min(260px, 45vw);
  }
}

@media (max-width: 768px) {
  .hero-stage__track {
    height: 220vh;
  }
  .hero-brand__logo {
    width: min(220px, 50vw);
  }
  .hero-brand__slogan {
    font-size: 0.85rem;
  }
  .hero-arc__particles circle {
    /* Reduce particle count handled in JS */
  }
}

@media (max-width: 480px) {
  .hero-stage__track {
    height: 200vh;
  }
  .hero-brand__logo {
    width: min(180px, 55vw);
  }
  .hero-brand__slogan {
    font-size: 0.8rem;
    padding: 0 var(--space-sm);
  }
}
   ============================================================ */
.hero {
  min-height: 92vh;
  display: flex;
  align-items: center;
  background: linear-gradient(170deg, #FFFAF6 0%, #FFF5ED 35%, #FFF0E3 70%, #FFFAF6 100%);
  position: relative;
  overflow: hidden;
  padding-top: 72px;
}

/* Grid overlay */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(232, 85, 26, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 85, 26, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  z-index: 0;
}

/* Primary warm glow — large, top-right */
.hero__glow-primary {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(232, 85, 26, 0.09) 0%, rgba(232, 85, 26, 0.04) 30%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Secondary glow — bottom-left, smaller */
.hero__glow-secondary {
  position: absolute;
  bottom: -10%;
  left: -5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(232, 85, 26, 0.05) 0%, rgba(217, 119, 6, 0.03) 30%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-2xl);
  align-items: center;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg);
  position: relative;
  z-index: 1;
}

/* ---- Hero Content (Left) ---- */
.hero__content {
  max-width: 540px;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--color-accent-dark);
  background: rgba(232, 85, 26, 0.07);
  border: 1px solid rgba(232, 85, 26, 0.14);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-md);
  letter-spacing: 0.03em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.hero__badge--visible {
  opacity: 1;
  transform: translateY(0);
}

.hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); }
}

.hero__title {
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--color-gray-900);
  margin-bottom: var(--space-md);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
}

.hero__title--visible {
  opacity: 1;
  transform: translateY(0);
}

.hero__title-em {
  display: inline;
  background: linear-gradient(135deg, #E8551A 0%, #F59E0B 50%, #F57330 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__subtitle {
  font-size: var(--text-body-lg);
  color: var(--color-gray-600);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
  max-width: 460px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}

.hero__subtitle--visible {
  opacity: 1;
  transform: translateY(0);
}

.hero__actions {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease 0.35s, transform 0.6s ease 0.35s;
}

.hero__actions--visible {
  opacity: 1;
  transform: translateY(0);
}

.hero__trust {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--text-body-sm);
  color: var(--color-gray-500);
  opacity: 0;
  transition: opacity 0.5s ease 0.5s;
}

.hero__trust--visible {
  opacity: 1;
}

.hero__trust-dot {
  width: 4px;
  height: 4px;
  background: var(--color-gray-400);
  border-radius: 50%;
}

/* ---- Hero Visual (Right) — Orbital System ---- */
.hero__visual {
  position: relative;
  width: 100%;
  height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Large soft glow behind the orbital system */
.hero__visual::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(232,85,26,0.10) 0%, rgba(232,85,26,0.04) 40%, transparent 65%);
  pointer-events: none;
}

/* Orbital rings — elliptical, tilted feel */
.hero-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(232, 85, 26, 0.12);
  pointer-events: none;
}

.hero-orbit--outer {
  width: 440px; height: 300px;
  margin-left: -220px; margin-top: -150px;
  border-color: rgba(232, 85, 26, 0.07);
  animation: orbit-rotate-outer 70s linear infinite;
}

.hero-orbit--mid {
  width: 330px; height: 225px;
  margin-left: -165px; margin-top: -112px;
  border-color: rgba(232, 85, 26, 0.10);
  animation: orbit-rotate-mid 55s linear infinite;
}

.hero-orbit--inner {
  width: 210px; height: 145px;
  margin-left: -105px; margin-top: -72px;
  border-color: rgba(232, 85, 26, 0.14);
  animation: orbit-rotate-inner 35s linear infinite;
}

@keyframes orbit-rotate-outer {
  from { transform: rotate(-8deg); }
  to { transform: rotate(352deg); }
}

@keyframes orbit-rotate-mid {
  from { transform: rotate(5deg); }
  to { transform: rotate(-355deg); }
}

@keyframes orbit-rotate-inner {
  from { transform: rotate(-3deg); }
  to { transform: rotate(357deg); }
}

/* SVG connection lines layer */
.hero-connections {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Central hub */
.hero-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 50px rgba(232, 85, 26, 0.18), 0 4px 24px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  border: 1px solid rgba(232, 85, 26, 0.10);
}

.hero-hub__inner {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--gradient-cta);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 0 24px rgba(232,85,26,0.3);
}

/* Floating business cards on orbits */
.hero-float-card {
  position: absolute;
  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(232, 85, 26, 0.10);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-800);
  white-space: nowrap;
  box-shadow: 0 2px 16px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  gap: 7px;
  z-index: 3;
  pointer-events: none;
  transition: all 0.4s ease;
}

.hero-float-card__dot {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero-float-card__dot svg {
  width: 14px;
  height: 14px;
}

/* Card positions — precise placement around orbital */
.hero-float-card--1 { top: 8%; left: 52%; animation: float-card-1 7s ease-in-out infinite; }
.hero-float-card--2 { top: 26%; right: -2%; animation: float-card-2 8s ease-in-out infinite 0.5s; }
.hero-float-card--3 { bottom: 22%; right: 5%; animation: float-card-3 7.5s ease-in-out infinite 1s; }
.hero-float-card--4 { bottom: 8%; left: 46%; animation: float-card-4 8.5s ease-in-out infinite 0.3s; }
.hero-float-card--5 { top: 42%; left: -2%; animation: float-card-5 9s ease-in-out infinite 0.8s; }

@keyframes float-card-1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(10px, -8px) rotate(0.5deg); }
  50% { transform: translate(-5px, -16px) rotate(-0.3deg); }
  75% { transform: translate(-8px, -4px) rotate(0.2deg); }
}

@keyframes float-card-2 {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-14px, -10px); }
  66% { transform: translate(6px, 8px); }
}

@keyframes float-card-3 {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-8px, 12px); }
  50% { transform: translate(12px, 6px); }
  75% { transform: translate(4px, -8px); }
}

@keyframes float-card-4 {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(12px, 8px); }
  66% { transform: translate(-10px, -6px); }
}

@keyframes float-card-5 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(8px, -12px); }
}

/* Orbit particles (tiny dots along rings) */
.hero-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.hero-particle--visible {
  opacity: 0.5;
  transition: opacity 0.8s ease 1s;
}

/* ---- Hero responsive ---- */
@media (max-width: 1024px) {
  .hero__visual {
    height: 360px;
  }
  .hero-orbit--outer { width: 300px; height: 205px; margin-left: -150px; margin-top: -102px; }
  .hero-orbit--mid   { width: 225px; height: 155px; margin-left: -112px; margin-top: -77px; }
  .hero-orbit--inner { width: 145px; height: 100px; margin-left: -72px; margin-top: -50px; }
  .hero-hub { width: 70px; height: 70px; }
  .hero-hub__inner { width: 48px; height: 48px; font-size: 10px; }
  .hero-float-card { font-size: 11px; padding: 7px 10px; }
  .hero-float-card__dot { width: 22px; height: 22px; border-radius: 6px; }
  .hero-float-card__dot svg { width: 12px; height: 12px; }
}

@media (max-width: 768px) {
  .hero { min-height: 85vh; }
  .hero__visual {
    height: 280px;
  }
  .hero-orbit--outer { width: 230px; height: 155px; margin-left: -115px; margin-top: -77px; }
  .hero-orbit--mid   { width: 170px; height: 115px; margin-left: -85px; margin-top: -57px; }
  .hero-orbit--inner { width: 110px; height: 75px; margin-left: -55px; margin-top: -37px; }
  .hero-hub { width: 56px; height: 56px; }
  .hero-hub__inner { width: 38px; height: 38px; font-size: 9px; }
  .hero-float-card { font-size: 10px; padding: 5px 8px; gap: 4px; }
  .hero-float-card__dot { width: 18px; height: 18px; border-radius: 4px; }
  .hero-float-card__dot svg { width: 10px; height: 10px; }
  .hero__actions { flex-direction: column; align-items: center; }
}

/* Nav logo — uses cropped PNG img, styles at .nav__logo-img above */

/* ============================================================
   8. Components — Cards
   ============================================================ */

/* ============================================================
   8. Bento Grid — 五大核心能力
   ============================================================ */
.bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: var(--space-md);
}

/* Core card — 双核心主卡片 (equal weight) */
.bento-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: all var(--transition-base);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}

.bento-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.bento-card__body { flex: 1; }

.bento-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.bento-card__header--compact {
  margin-bottom: var(--space-sm);
}

.bento-card__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.bento-card__icon--blue  { background: rgba(232, 85, 26, 0.08); color: var(--color-accent); }
.bento-card__icon--teal  { background: rgba(232, 85, 26, 0.06); color: var(--color-brand-deep); }
.bento-card__icon--gold  { background: rgba(217, 119, 6, 0.08);  color: var(--color-gold); }
.bento-card__icon--purple{ background: rgba(184, 65, 10, 0.08); color: var(--color-brand-deep); }
.bento-card__icon--green { background: rgba(5, 150, 105, 0.08);  color: var(--color-green); }

.bento-card__title {
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: 2px;
}

.bento-card__title--sm { font-size: var(--text-body); }

.bento-card__tagline {
  font-size: var(--text-label);
  color: var(--color-gray-500);
  line-height: 1.4;
}

.bento-card__desc {
  font-size: var(--text-body-sm);
  color: var(--color-gray-600);
  line-height: 1.5;
  margin-top: var(--space-sm);
}

.bento-card__link {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--color-accent);
}

/* Data card — wide middle row */
.bento-card--data {
  grid-column: 1 / -1;
}

/* Mini cards — bottom row, each 1 column */
.bento-card--mini {
  /* standard 1-column in 2-column grid */
}

/* ============================================================
   8a. Mock UI — Video Player
   ============================================================ */
.mock-video {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #1a1a1a;
  border: 1px solid var(--color-gray-200);
}

.mock-video__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mock-video__frame {
  width: 70%;
  height: 65%;
  background: linear-gradient(135deg, #3d3d3d 0%, #2d2d2d 100%);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.mock-video__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 40%, rgba(255,255,255,0.03) 50%, transparent 60%);
  animation: shimmer 3s ease-in-out infinite;
}

.mock-video__label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  font-family: var(--font-sans);
  z-index: 1;
}

.mock-video__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mock-video__play-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  position: relative;
}

.mock-video__play-btn::after {
  content: '';
  position: absolute;
  top: 50%; left: 55%;
  transform: translate(-50%, -50%);
  border-left: 10px solid var(--color-accent);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.mock-video__langs {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  gap: 4px;
}

.mock-video__langs span {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 2px 6px;
  background: rgba(232, 85, 26, 0.5);
  color: #fff;
  border-radius: 3px;
}

.mock-video__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #2d2d2d;
}

.mock-video__ctrl-icon {
  color: rgba(255,255,255,0.7);
  font-size: 0.7rem;
}

.mock-video__track {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  overflow: hidden;
}

.mock-video__progress {
  height: 100%;
  background: var(--color-accent);
  border-radius: 2px;
}

.mock-video__time {
  color: rgba(255,255,255,0.5);
  font-size: 0.65rem;
  font-family: var(--font-mono);
}

/* ============================================================
   8b. Mock UI — Browser Window
   ============================================================ */
.mock-browser {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.mock-browser__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--color-gray-100);
  border-bottom: 1px solid var(--color-gray-200);
}

.mock-browser__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gray-300);
}

.mock-browser__dot:nth-child(1) { background: #EF4444; }
.mock-browser__dot:nth-child(2) { background: #F59E0B; }
.mock-browser__dot:nth-child(3) { background: #10B981; }

.mock-browser__url {
  flex: 1;
  margin-left: 10px;
  padding: 4px 10px;
  background: #fff;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  color: var(--color-gray-500);
  display: flex;
  align-items: center;
  gap: 6px;
}

.mock-browser__page {
  padding: 14px;
}

.mock-browser__hero {
  height: 40px;
  background: linear-gradient(135deg, var(--color-accent) 0%, #F57330 100%);
  border-radius: 4px;
  margin-bottom: 10px;
  opacity: 0.85;
}

.mock-browser__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.mock-browser__card {
  height: 36px;
  background: var(--color-gray-100);
  border-radius: 4px;
}

.mock-browser__form {
  display: flex;
  gap: 8px;
}

.mock-browser__input {
  flex: 1;
  height: 28px;
  background: var(--color-gray-100);
  border-radius: 4px;
}

.mock-browser__btn {
  width: 60px;
  height: 28px;
  background: var(--color-accent);
  border-radius: 4px;
  opacity: 0.8;
}

/* ============================================================
   8c. Mock UI — Data Panel
   ============================================================ */
.mock-datapanel {
  background: #FAF9F7;
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  border: 1px solid var(--color-gray-100);
}

.mock-datapanel__row {
  margin-bottom: 8px;
}

.mock-datapanel__bar {
  height: 22px;
  background: linear-gradient(90deg, var(--color-accent), rgba(232,85,26,0.6));
  border-radius: 4px;
  margin-bottom: 4px;
  position: relative;
  min-width: 40px;
}

.mock-datapanel__bar--teal { background: linear-gradient(90deg, var(--color-teal), rgba(13,148,136,0.6)); }
.mock-datapanel__bar--gold { background: linear-gradient(90deg, var(--color-gold), rgba(217,119,6,0.6)); }

.mock-datapanel__label {
  font-size: 0.7rem;
  color: var(--color-gray-500);
  font-weight: 500;
}

.mock-datapanel__badges {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.mock-datapanel__badges span {
  font-size: 0.65rem;
  font-weight: 500;
  padding: 3px 8px;
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  color: var(--color-gray-600);
}

/* ============================================================
   8d. Mock UI — Social & Course
   ============================================================ */
.mock-social {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  margin-bottom: 4px;
}

.mock-social__platform {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-gray-600);
}

.mock-social__pulse {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--color-green);
  font-weight: 500;
}

.mock-course {
  padding: 4px 0;
  margin-bottom: 4px;
}

.mock-course__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-gray-100);
}

.mock-course__row:last-child { border-bottom: none; }

.mock-course__module {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-gray-700);
}

.mock-course__tag {
  font-size: 0.65rem;
  color: var(--color-gray-400);
  font-family: var(--font-mono);
}

@keyframes shimmer {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

/* 9. 独立站案例卡（.case-card / .cases-grid）已移除。
   五个网站改为在 #acq 第一幕末端的 Website Showcase 内以真实截图呈现，
   页面不再有独立的五卡案例墙，避免同一批素材重复展示两次。
   相关样式见本文件的 31b-show 段。 */

/* ============================================================
   9b. Company News — 公司动态
   ============================================================ */
.news-card {
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.news-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.news-card__cover {
  position: relative;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-card__cover--insight { background: linear-gradient(135deg, #E8551A 0%, #F5A623 100%); }
.news-card__cover--company { background: linear-gradient(135deg, #0D9488 0%, #14B8A6 100%); }
.news-card__cover--case    { background: linear-gradient(135deg, #B8410A 0%, #E8551A 100%); }

.news-card__icon {
  width: 48px;
  height: 48px;
  color: rgba(255, 255, 255, 0.9);
}

.news-card__category {
  position: absolute;
  left: 14px;
  bottom: 14px;
  font-size: var(--text-label);
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.18);
  padding: 3px 12px;
  border-radius: var(--radius-full);
}

.news-card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.news-card__date {
  font-size: var(--text-label);
  color: var(--color-gray-400);
}

.news-card__title {
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--color-gray-900);
  line-height: 1.4;
}

.news-card__excerpt {
  font-size: var(--text-body-sm);
  color: var(--color-gray-500);
  line-height: 1.6;
  flex: 1;
}

/* ============================================================
   10. Comparison Table — 常见模式 vs 特别一点
   ============================================================ */
.comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  max-width: 900px;
  margin: 0 auto;
}

.comparison__col {
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.comparison__col--dim {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
}

.comparison__col--highlight {
  background: linear-gradient(135deg, rgba(232,85,26,0.03) 0%, rgba(217,119,6,0.03) 100%);
  border: 1.5px solid rgba(232,85,26,0.2);
  box-shadow: var(--shadow-md);
}

.comparison__heading {
  font-size: var(--text-body-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-gray-200);
}

.comparison__col--dim .comparison__heading { color: var(--color-gray-500); }
.comparison__col--highlight .comparison__heading { color: var(--color-accent); }

.comparison__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-gray-100);
  font-size: var(--text-body-sm);
  line-height: 1.5;
}

.comparison__item:last-child { border-bottom: none; }

.comparison__col--dim .comparison__item { color: var(--color-gray-500); }
.comparison__col--highlight .comparison__item { color: var(--color-gray-800); }

.comparison__mark {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  margin-top: 1px;
}

.comparison__col--dim .comparison__mark {
  background: var(--color-gray-200);
  color: var(--color-gray-400);
}

.comparison__col--highlight .comparison__mark {
  background: rgba(232,85,26,0.12);
  color: var(--color-accent);
}

/* ============================================================
   11. Market Channel Tags — on orange trade map bg
   ============================================================ */
.market-tags {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-sm);
  max-width: 1000px;
  margin: var(--space-lg) auto 0;
}

.market-tag {
  text-align: center;
  padding: var(--space-sm);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-md);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all var(--transition-base);
}

.market-tag:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.35);
}

.market-tag__name {
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
}

.market-tag__channels {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.70);
  line-height: 1.5;
}

.market-tag__note {
  text-align: center;
  font-size: var(--text-label);
  color: rgba(255,255,255,0.60);
  margin-top: var(--space-sm);
  grid-column: 1 / -1;
}

/* ============================================================
   12. Immersive Trade Map — 暖橙渐变 (already orange, keep)
   ============================================================ */
.trade-map-section {
  background: linear-gradient(160deg, #C54114 0%, #D94E18 30%, #E8551A 70%, #F45A1E 100%);
  position: relative;
  overflow: hidden;
  padding: var(--space-4xl) 0;
}

.trade-map-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
}

.trade-map-section::after {
  content: '';
  position: absolute;
  top: 40%; left: 65%;
  transform: translate(-50%, -50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, rgba(255,200,150,0.04) 40%, transparent 70%);
  pointer-events: none;
}

.trade-map-section .section-tag {
  color: #FEE3D4;
  background: rgba(255,255,255,0.12);
}

.trade-map-section .section-title {
  color: var(--color-white);
}

.trade-map-section .section-subtitle {
  color: rgba(255,255,255,0.80);
}

.trade-map {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.trade-map__canvas {
  width: 100%;
  height: 420px;
  display: block;
}

/* Floating info cards over map (JS-controlled positioning) */
.trade-map__float-card {
  position: absolute;
  background: rgba(30,27,24,0.9);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: 2;
}

.trade-map__float-card--visible {
  opacity: 1;
}

.trade-map__float-card .name {
  font-size: var(--text-label);
  font-weight: 600;
  color: #fff;
  display: block;
}

.trade-map__float-card .hint {
  font-size: 0.65rem;
  color: var(--color-gray-400);
}

/* ============================================================
   13. Simplified Growth Path — 精简三步
   ============================================================ */
.path-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  max-width: 800px;
  margin: 0 auto;
}

.path-mini__step {
  text-align: center;
}

.path-mini__num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
  font-weight: 700;
  font-size: var(--text-body-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-sm);
  background: #fff;
}

.path-mini__title {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: 4px;
}

.path-mini__desc {
  font-size: var(--text-body-sm);
  color: var(--color-gray-500);
  line-height: 1.4;
}

/* ============================================================
   14. AI Workflow Pipeline — 软件界面式横向管道
   ============================================================ */
.workflow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: var(--space-md) 0;
}

.workflow__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 150px;
}

.workflow__mock {
  width: 120px;
  height: 90px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-200);
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-sm);
  position: relative;
}

.workflow__mock--camera {
  background: #2d2d2d;
  display: flex;
  align-items: center;
  justify-content: center;
}
.workflow__mock--camera::after {
  content: '';
  width: 40px; height: 30px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  position: relative;
}
.workflow__mock--camera::before {
  content: '';
  position: absolute;
  top: 10px; right: 30px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-green);
}

.workflow__mock--ai {
  background: linear-gradient(135deg, #2d2d2d, #1a1a1a);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-teal);
  font-family: var(--font-mono);
  font-size: 0.65rem;
}
.workflow__mock--ai::after {
  content: 'AI ▸ 生成脚本...';
  color: rgba(255,255,255,0.5);
  font-size: 0.6rem;
}

.workflow__mock--videoedit {
  background: #1a1a1a;
  display: flex;
  flex-direction: column;
}
.workflow__mock--videoedit .track {
  flex: 1;
  margin: 6px;
  display: flex;
  gap: 2px;
  align-items: flex-end;
}
.workflow__mock--videoedit .clip {
  flex: 1;
  background: rgba(232,85,26,0.4);
  border-radius: 2px;
}
.workflow__mock--videoedit .clip:nth-child(1) { height: 60%; }
.workflow__mock--videoedit .clip:nth-child(2) { height: 80%; }
.workflow__mock--videoedit .clip:nth-child(3) { height: 50%; }
.workflow__mock--videoedit .clip:nth-child(4) { height: 70%; }
.workflow__mock--videoedit .ruler {
  height: 12px;
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex;
  justify-content: space-between;
  padding: 1px 4px 0;
  font-size: 0.45rem;
  color: rgba(255,255,255,0.3);
}

.workflow__mock--distribute {
  background: #FAF9F7;
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 4px;
}
.workflow__mock--distribute .ch {
  flex: 1;
  border-radius: 3px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 0.55rem;
  font-weight: 600;
  color: #fff;
}
.workflow__mock--distribute .ch:nth-child(1) { background: #E8551A; }
.workflow__mock--distribute .ch:nth-child(2) { background: #D97706; }
.workflow__mock--distribute .ch:nth-child(3) { background: #F57330; }

.workflow__mock--client {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.workflow__mock--client .msg {
  background: var(--color-gray-100);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.55rem;
  color: var(--color-gray-600);
}

.workflow__mock--data {
  background: #FAF9F7;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  padding: 8px;
}
.workflow__mock--data .bar {
  width: 12px;
  background: var(--color-accent);
  border-radius: 2px 2px 0 0;
}
.workflow__mock--data .bar:nth-child(1) { height: 40%; opacity: 0.5; }
.workflow__mock--data .bar:nth-child(2) { height: 55%; opacity: 0.6; }
.workflow__mock--data .bar:nth-child(3) { height: 70%; opacity: 0.7; }
.workflow__mock--data .bar:nth-child(4) { height: 85%; }

.workflow__label {
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--color-gray-700);
  text-align: center;
  margin-bottom: 2px;
}

.workflow__sublabel {
  font-size: 0.65rem;
  color: var(--color-gray-400);
  text-align: center;
}

.workflow__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  flex-shrink: 0;
  color: var(--color-gray-300);
  font-size: 1.2rem;
  padding-top: 30px;
}

/* ============================================================
   15. Accessibility — prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .globe__sphere { animation: none; }

  @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } }

  .scroll-indicator__arrow { animation: none; }

  .mock-video__frame::after { animation: none; }
}

/* ----------------------------------------------------------
   16. Components — CTA Banner (Warm White + White Card)
   ---------------------------------------------------------- */
.cta-banner {
  background: var(--gradient-orange-subtle);
  position: relative;
  overflow: hidden;
  padding: var(--space-4xl) 0;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(232, 85, 26, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 85, 26, 0.025) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
}

/* Warm glow at bottom right */
.cta-banner::after {
  content: '';
  position: absolute;
  bottom: -10%;
  right: -5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(232, 85, 26, 0.06) 0%, transparent 65%);
  pointer-events: none;
}

.cta-banner__inner {
  text-align: center;
  position: relative;
  z-index: 1;
}

/* CTA 2-column layout */
.cta-banner__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
  text-align: left;
}

.cta-banner__text {
  max-width: 480px;
}

.cta-banner__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

.cta-banner__features span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-body-sm);
  color: var(--color-gray-600);
}

.cta-banner__title {
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-sm);
}

.cta-banner__subtitle {
  font-size: var(--text-body-lg);
  color: var(--color-gray-600);
  margin-bottom: var(--space-lg);
}

/* Consult Form — White Card on warm background */
.cta-banner__form {
  position: relative;
  z-index: 1;
}

.consult-form {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
}

.consult-form__group {
  margin-bottom: var(--space-sm);
}

.consult-form__label {
  display: block;
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--color-gray-700);
  margin-bottom: 4px;
}

.consult-form__required {
  color: var(--color-accent);
}

.consult-form__input {
  width: 100%;
  /* 显式钉死高度：<select> 的固有高度比 <input> 高约 1.6px，
     不钉的话下拉框和文本框会对不齐（本轮返工第 3 条就卡在这个 1.6px）。
     输入框原本就是 48px，这里只是把它固定下来，视觉无变化。 */
  height: 48px;
  padding: 12px 14px;
  font-size: var(--text-body);
  font-family: var(--font-sans);
  color: var(--color-gray-800);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  outline: none;
}

.consult-form__input::placeholder {
  color: var(--color-gray-400);
}

.consult-form__input:focus {
  border-color: var(--color-accent);
  background: var(--color-white);
  box-shadow: 0 0 0 3px rgba(232, 85, 26, 0.10);
}

/* 键盘焦点可见（基础态 outline:none 会吞掉全局 :focus-visible，这里按更高特异性恢复） */
.consult-form__input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.consult-form__input option {
  color: var(--color-gray-900);
  background: var(--color-white);
}

.consult-form__note {
  font-size: var(--text-label);
  color: var(--color-gray-500);
  margin-top: var(--space-sm);
  text-align: center;
}

/* R63 反垃圾蜜罐：不是 display:none —— 部分爬虫会跳过 display:none 的字段。
   挪到视口外并压成 1px，真人看不见也点不到，机器人却会照填。 */
.consult-form__hp {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* R63 提交失败提示：必须让访客看到「没成功」以及重试/电话两条出路，
   不允许像旧版那样无论成败都显示「已提交」。 */
.consult-form__error {
  margin-top: var(--space-sm);
  padding: 10px 12px;
  border: 1px solid rgba(180, 35, 24, 0.25);
  border-radius: var(--radius-md);
  background: rgba(180, 35, 24, 0.06);
  color: #B42318;
  font-size: var(--text-body-sm);
  line-height: 1.6;
  text-align: center;
}

.consult-form__error a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

.consult-form__input:disabled,
.consult-form .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Success State */
.consult-success {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  box-shadow: var(--shadow-card);
}

.consult-success__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-green);
  color: var(--color-white);
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
}

.consult-success h3 {
  color: var(--color-gray-900);
  margin-bottom: var(--space-xs);
}

.consult-success p {
  color: var(--color-gray-600);
  font-size: var(--text-body);
}

/* 成功态里的小字倒计时说明，以及「再次提交预约」按钮的上间距。
   成功提示 5 秒后会自己收起还原成空表单，这里只是把说明和按钮排开。 */
.consult-success__hint {
  color: var(--color-gray-500);
  font-size: var(--text-body-sm);
  margin-bottom: var(--space-md);
}

.consult-success .btn {
  margin-top: var(--space-xs);
}

/* ----------------------------------------------------------
   17. Components — Footer (Warm White + Orange)
   ---------------------------------------------------------- */
.site-footer {
  background: #FFF7F1;
  padding: var(--space-2xl) 0 var(--space-md);
  color: var(--color-gray-600);
  border-top: 1px solid rgba(232, 85, 26, 0.10);
  position: relative;
}

/* Very subtle warm gradient at top edge */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(232,85,26,0.05) 0%, rgba(232,85,26,0.15) 50%, rgba(232,85,26,0.05) 100%);
  pointer-events: none;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.site-footer__brand {
  font-size: var(--text-h4);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-sm);
}

.site-footer__brand-sub {
  display: block;
  font-size: var(--text-body-sm);
  font-weight: 400;
  color: var(--color-gray-500);
  margin-top: 2px;
}

.site-footer__desc {
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--color-gray-500);
  margin-bottom: var(--space-md);
}

.site-footer__heading {
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--color-gray-800);
  margin-bottom: var(--space-sm);
}

.site-footer__link {
  display: block;
  font-size: var(--text-body-sm);
  color: var(--color-gray-500);
  padding: 3px 0;
  transition: color var(--transition-fast);
}

.site-footer__link:hover {
  color: var(--color-accent);
}

.site-footer__contact {
  list-style: none;
  margin-bottom: var(--space-md);
}

.site-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--text-body-sm);
  color: var(--color-gray-600);
  line-height: 1.6;
  margin-bottom: 8px;
}

.site-footer__contact li i,
.site-footer__contact li svg {
  margin-top: 2px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.site-footer__contact li a {
  color: var(--color-gray-600);
  transition: color var(--transition-fast);
}

.site-footer__contact li a:hover {
  color: var(--color-accent);
}

/* R63：页脚二维码区（老板微信 / 公司视频号 / 公司公众号）。
   位置在「联系我们」栏内部、预约演示按钮上方；邮箱不再对外展示。
   只有一行小字说明，按用户要求不做加粗标题（没有 heading）。

   尺寸策略（本轮返工改版）：
   - 三张统一成 90×90 的**外框**，object-fit:contain 只缩不放，绝不变形；
   - 宽高一律由 CSS 钉死，禁止原图自然宽高撑开布局；
   - 旧版是「统一高度 + 宽度自适应」，视频号那张海报比例会把整行撑宽、
     反而挤爆栏位，所以改成钉正方形（素材已同步裁成正方形）。
   - 白底 + 内边距是二维码的静默区，去掉会明显降低识别率，不能省。 */
.site-footer__qr {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  margin: var(--space-md) 0;
}

.site-footer__qr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.site-footer__qr-item img {
  display: block;
  width: 90px;
  height: 90px;
  box-sizing: border-box;
  padding: 3px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  object-fit: contain;
}

.site-footer__qr-cap {
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-gray-600);
  white-space: nowrap;
  text-align: center;
}

.site-footer__bottom {
  border-top: 1px solid rgba(232, 85, 26, 0.08);
  padding-top: var(--space-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-body-sm);
  color: var(--color-gray-400);
}

/* R39 §F：页脚隐私政策入口（全站页脚共用）。
   __bottom 本身就是 space-between 的两端布局，这个链接自然落在右端；
   ≤768 时 __bottom 已转纵向居中，无需额外断点。 */
.site-footer__legal {
  color: var(--color-gray-400);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.site-footer__legal:hover {
  color: var(--color-accent);
}

/* R-ICP-01：页脚「隐私政策 + ICP 备案号」同组；桌面右对齐，≤768 随 __bottom 居中 */
.site-footer__legal-links {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

/* ----------------------------------------------------------
   18. Components — Page Hero (内页 — Warm White)
   ---------------------------------------------------------- */
.page-hero {
  background: var(--gradient-hero);
  padding: 120px 0 var(--space-3xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-hero::after {
  content: '';
  position: absolute;
  top: -10%;
  right: -5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(232, 85, 26, 0.06) 0%, transparent 60%);
  pointer-events: none;
}

.page-hero__badge {
  display: inline-block;
  padding: 4px 14px;
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--color-accent-dark);
  background: rgba(232, 85, 26, 0.08);
  border: 1px solid rgba(232, 85, 26, 0.15);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-md);
  position: relative;
  z-index: 1;
}

.page-hero__title {
  font-size: var(--text-hero);
  font-weight: 700;
  color: var(--color-gray-900);
  line-height: 1.15;
  margin-bottom: var(--space-sm);
  position: relative;
  z-index: 1;
}

.page-hero__subtitle {
  font-size: var(--text-body-lg);
  color: var(--color-gray-600);
  max-width: 560px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ----------------------------------------------------------
   19. Components — FAQ Accordion
   ---------------------------------------------------------- */
.faq-item {
  border-bottom: 1px solid var(--color-gray-200);
}

.faq-item__trigger {
  width: 100%;
  padding: var(--space-md) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-body-lg);
  font-weight: 500;
  color: var(--color-gray-900);
  text-align: left;
}

.faq-item__trigger:hover {
  color: var(--color-accent);
}

.faq-item__icon {
  width: 24px;
  height: 24px;
  transition: transform var(--transition-base);
  flex-shrink: 0;
  margin-left: var(--space-sm);
}

.faq-item--open .faq-item__icon {
  transform: rotate(45deg);
}

.faq-item__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow), padding var(--transition-base);
}

.faq-item--open .faq-item__content {
  max-height: 500px;
  padding-bottom: var(--space-md);
}

.faq-item__content p {
  font-size: var(--text-body);
  color: var(--color-gray-600);
  line-height: 1.6;
}

/* ----------------------------------------------------------
   20. Components — Filter Pills
   ---------------------------------------------------------- */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: center;
  margin-bottom: var(--space-xl);
}

.filter-pill {
  padding: 8px 18px;
  font-size: var(--text-body-sm);
  font-weight: 500;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
  color: var(--color-gray-600);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-pill:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.filter-pill--active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

/* ----------------------------------------------------------
   21. Animations
   ---------------------------------------------------------- */

/* Fade In Up (scroll-triggered) */
.anim-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.anim-fade-up--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay for children */
.anim-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.anim-stagger--visible > *:nth-child(1) { transition-delay: 0s; }
.anim-stagger--visible > *:nth-child(2) { transition-delay: 0.1s; }
.anim-stagger--visible > *:nth-child(3) { transition-delay: 0.2s; }
.anim-stagger--visible > *:nth-child(4) { transition-delay: 0.3s; }
.anim-stagger--visible > *:nth-child(5) { transition-delay: 0.4s; }
.anim-stagger--visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Pulse */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

/* Float */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--color-gray-500);
  font-size: var(--text-label);
  cursor: pointer;
  z-index: 2;
}

.scroll-indicator__arrow {
  width: 20px;
  height: 20px;
  border-right: 2px solid var(--color-gray-400);
  border-bottom: 2px solid var(--color-gray-400);
  transform: rotate(45deg);
  animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: rotate(45deg) translateY(0); opacity: 0.6; }
  50% { transform: rotate(45deg) translateY(8px); opacity: 1; }
}

/* ----------------------------------------------------------
   22. Responsive — Full coverage for all components
   ---------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --text-hero: 2.5rem;
    --text-h2: 2rem;
    --text-metric: 2.25rem;
  }

  .bento { grid-template-columns: 1fr; }
  .bento-card--data { grid-column: auto; }

  .market-tags { grid-template-columns: repeat(3, 1fr); }


  .cta-banner__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .cta-banner__text { max-width: 100%; text-align: center; }
  .cta-banner__features { align-items: center; }

  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }

  /* R63 二维码：1024 起页脚栏收窄，靠 flex-wrap 自动折行即可。
     这里**不再**改尺寸 —— 三张码必须永远一样大，可扫性优先于「排成一行」。 */
}

/* 31. 对比表塌陷断点
   原先挂在 max-width:1024 上，但 .comparison 自身 max-width 是 900px：
   1024 下每列仍有约 426px，与 1440 的 434px 几乎一致，堆叠纯属浪费宽度。
   下调到 900px —— 只有真正放不下两列时才塌成单列。 */
@media (max-width: 900px) {
  .comparison { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root {
    --text-hero: 2rem;
    --text-h2: 1.75rem;
    --text-h3: 1.35rem;
  }

  .section { padding: var(--space-2xl) 0; }

  .nav__links    { display: none; }
  .nav__hamburger { display: flex; }

  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }


  .hero__actions { flex-direction: column; align-items: center; }

  .bento { grid-template-columns: 1fr; }

  .comparison { grid-template-columns: 1fr; }

  .market-tags { grid-template-columns: repeat(2, 1fr); }

  .workflow { flex-direction: column; align-items: center; overflow-x: visible; gap: 0; }
  .workflow__arrow { transform: rotate(90deg); padding: 4px 0; }
  .workflow__node { width: 100%; max-width: 280px; }

  .path-mini { grid-template-columns: 1fr; gap: var(--space-md); }

  .trade-map__canvas { height: 250px; }

  .cta-banner__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .cta-banner__text { max-width: 100%; text-align: center; }
  .cta-banner__features { align-items: center; }

  .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .site-footer__bottom { flex-direction: column; gap: var(--space-xs); text-align: center; }

  /* R63 二维码：768 起放开换行，放不下就自动折行，绝不靠缩小去挤 */
  .site-footer__qr { gap: 8px; }
}

@media (max-width: 480px) {
  :root {
    --text-hero: 1.75rem;
    /* 1.5rem(24px) 下「而是一套持续运转的外贸增长系统」15 字约 356px，
       超过 .section-title 的 328px 可用宽，被迫折出第 3 行、末行只剩「系统」。
       1.3125rem(21px) 时该行约 312px，回到干净的 2 行。 */
    --text-h2: 1.3125rem;
    --text-metric: 1.75rem;
  }

  .container { padding-left: var(--space-sm); padding-right: var(--space-sm); }
  .btn    { padding: 12px 22px; font-size: var(--text-body-sm); }
  .btn--lg { padding: 14px 28px; }

  /* ≤768 已收到 64px；375 再收到 48px，否则相邻 section 之间累计 128px 纯留白 */
  .section { padding: var(--space-xl) 0; }

  .market-tags { grid-template-columns: 1fr; }

  .trade-map__canvas { height: 220px; }

  .bento-card { padding: var(--space-md); }

  /* .aibot-stage__text 是 left:50% + width:auto 的绝对定位盒，收缩后可用宽度
     只剩容器一半（375 → 约 187px），≤768 又加了左右各 32px padding，
     标题实际只剩约 116px，「您的出海智能助手」被压成 2 行。
     给足宽度即可；只改 width/padding，不碰 transform —— transform 由 JS 驱动。 */
  .aibot-stage__text {
    width: 92vw;
    padding: 0 var(--space-sm);
  }

  /* 375 下四列纵排后块与块之间 32px 过大，收到 24px */
  .site-footer__grid { gap: var(--space-md); }

  /* R63 二维码：≤480 仍保持三张同尺寸，放不下就折行并整体居中。
     视频号素材已裁成正方形，不会再出现「海报比例把整行撑宽」的老问题。 */
  .site-footer__qr { gap: 8px; justify-content: center; }
}

/* ============================================================
   25. Enhanced Animations & Parallax
   ============================================================ */

/* Mouse parallax layers */
.parallax-slow {
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.parallax-fast {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Smooth entrance for sections */
.section-enter {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.section-enter--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Card hover lift — shared by all card types */
.card-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* ============================================================
   26. Cooperation Map — 合作版图（第二幕）
   ============================================================ */

/* ---- 26a. Section container — background from .narrative-background ---- */
.cooperation-map {
  position: relative;
  background: transparent;
  z-index: 3;
}

/* ---- 26b. Scroll track — provides scroll distance ---- */
.cooperation-map__track {
  height: 300vh;
  position: relative;
}

/* ---- 26c. Sticky stage — pinned while scrolling ---- */
.cooperation-map__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ---- 26d. Phase containers — stacked, opacity-controlled ---- */
.coop-phase {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  padding: 80px var(--space-lg) var(--space-lg);
}

.coop-phase--active {
  opacity: 1;
}

/* ---- 26e. Phase 1 — Big glowing dot ---- */
.coop-phase__dot {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: width, height, transform;
  transition: width 0.15s linear, height 0.15s linear, transform 0.15s linear;
}

.coop-phase__dot-core {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 40px rgba(255,255,255,0.9), 0 0 80px rgba(255,180,130,0.5);
  z-index: 2;
}

.coop-phase__dot-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,160,100,0.15) 40%, transparent 70%);
  box-shadow: 0 0 60px rgba(255,106,36,0.4), 0 0 140px rgba(255,106,36,0.25), 0 0 240px rgba(255,106,36,0.10);
  animation: coop-glow-pulse 3s ease-in-out infinite;
}

@keyframes coop-glow-pulse {
  0%, 100% { box-shadow: 0 0 60px rgba(255,106,36,0.4), 0 0 140px rgba(255,106,36,0.25), 0 0 240px rgba(255,106,36,0.10); }
  50% { box-shadow: 0 0 80px rgba(255,106,36,0.55), 0 0 170px rgba(255,106,36,0.35), 0 0 280px rgba(255,106,36,0.15); }
}

/* ---- 26f. Counter display ---- */
.coop-phase__counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(40px, 6vh, 64px);
}

.coop-phase__label {
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  font-weight: 500;
  color: rgba(255,255,255,0.80);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.coop-phase__number-row {
  display: flex;
  align-items: baseline;
}

.coop-phase__number {
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  text-shadow: 0 0 40px rgba(255,255,255,0.5), 0 0 80px rgba(255,180,130,0.3);
}

.coop-phase__sublabel {
  font-size: clamp(0.8rem, 1.2vw, 0.95rem);
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.04em;
  margin-top: 8px;
  font-weight: 400;
}

/* ---- 26g. SVG Map ---- */
.coop-map__svg-wrap {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
}

.coop-map__svg {
  width: 100%;
  height: auto;
  display: block;
}

/* China outline — higher contrast */
.coop-map__outline {
  fill: rgba(0,0,0,0.06);
  stroke: rgba(255,255,255,0.58);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.16));
}

/* shared-orb 是唯一的温州主体，隐藏 SVG 里的温州点与光晕（保留布局供锚点定位） */
.coop-map__node--wenzhou,
.coop-map__glow--wenzhou {
  opacity: 0 !important;
}

/* 温州环线城市（乐清/瓯海/瑞安/龙港）：放大后并入核心光晕，节点/标签视觉隐藏（数据保留） */
.coop-map__node--ring {
  opacity: 0 !important;
}

/* 定性表达（替代虚构数字）使用更收敛的字号 */
.coop-phase__number--phrase {
  font-size: clamp(1.5rem, 4vw, 2.8rem) !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Wenzhou core glow */
.coop-map__glow--wenzhou {
  fill: rgba(255,255,255,0.15);
  stroke: rgba(255,255,255,0.35);
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity 0.6s ease;
  r: 35;
}

.coop-map__glow--wenzhou--visible {
  opacity: 1;
}

/* Connection paths — thicker, brighter */
.coop-map__conn {
  fill: none;
  stroke: rgba(255,255,255,0.24);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: var(--path-len, 200);
  stroke-dashoffset: var(--path-len, 200);
  transition: stroke-dashoffset 0.6s ease;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.16));
}

.coop-map__conn--drawn {
  stroke-dashoffset: 0;
}

/* City nodes — brighter */
.coop-map__node {
  fill: #FFFFFF;
  stroke: rgba(255,255,255,0.75);
  stroke-width: 2.5;
  opacity: 0;
  transform-origin: center;
  transition: opacity 0.4s ease, transform 0.4s ease;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.30));
}

.coop-map__node--wenzhou {
  fill: #FFFFFF;
  stroke: #FFFFFF;
  stroke-width: 3.5;
  filter: drop-shadow(0 0 14px rgba(255,255,255,0.85));
  r: 5.5;
}

/* Subtle pulse for non-Wenzhou nodes（仅在数据光点流动阶段开启） */
.coop-map__node--visible {
  opacity: 0.75;
}
.coop-map--pulsing .coop-map__node--visible {
  animation: node-pulse-subtle 3s ease-in-out infinite;
}

.coop-map__node--wenzhou.coop-map__node--visible {
  animation: node-pulse-wenzhou 0.9s ease-out 1;
}

@keyframes node-pulse-subtle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

@keyframes node-pulse-wenzhou {
  0%   { filter: drop-shadow(0 0 8px rgba(255,255,255,0.60)); }
  50%  { filter: drop-shadow(0 0 22px rgba(255,255,255,0.95)); }
  100% { filter: drop-shadow(0 0 12px rgba(255,255,255,0.75)); }
}

.coop-map__node--visible {
  opacity: 0.75;
}

/* City labels — larger, brighter */
.coop-map__label {
  fill: rgba(255,255,255,1);
  font-size: 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.5s ease 0.1s;
  text-anchor: middle;
  pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.35));
}

.coop-map__label--wenzhou {
  font-size: 13px;
  font-weight: 700;
  fill: #FFFFFF;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.45));
}

.coop-map__label--visible {
  opacity: 1;
}

/* 周边城市标签降级：更小、更低透明度（节点保留，文字克制） */
.coop-map__label--minor {
  font-size: 8px;
  font-weight: 500;
}
.coop-map__label--minor.coop-map__label--visible {
  opacity: 0; /* 周边城市节点保留，常驻文字隐藏，避免东部标签拥堵 */
}

/* ---- 26h. Phase 5 — Bottom content ---- */
.coop-phase__content {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.coop-phase__heading {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  font-weight: 700;
  color: var(--color-gray-900);
  margin: var(--space-sm) 0;
  letter-spacing: -0.01em;
}

.coop-phase__desc {
  font-size: clamp(0.9rem, 1.3vw, 1rem);
  color: var(--color-gray-600);
  line-height: 1.65;
  max-width: 520px;
  margin: 0 auto var(--space-md);
}

/* Phase 5 收尾文案：桌面左右构图，文案居左（地图已居右），不再压在地图中央 */
.coop-phase--5 {
  align-items: flex-start;
  justify-content: center;
  padding: 80px 0 var(--space-lg) 12vw;
}
.coop-phase--5 .coop-phase__content {
  text-align: left;
  max-width: 400px;
  margin: 0;
}

/* Phase 5 文案在橙色背景上：高对比暖白，提升可读性 */
.coop-phase--5 .coop-phase__heading { color: #FFFFFF; }
.coop-phase--5 .coop-phase__desc { color: rgba(255, 255, 255, 0.88); }
.coop-phase--5 .section-tag { color: #FFF7F0; background: rgba(255, 255, 255, 0.20); }
.coop-phase--5 .coop-tag { color: #FFFAF6; background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.38); }

.coop-phase__highlights {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
}

.coop-highlight {
  text-align: center;
}

.coop-highlight__num {
  display: block;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.coop-highlight__label {
  display: block;
  font-size: 0.8rem;
  color: var(--color-gray-500);
  margin-top: 4px;
}

.coop-phase__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.coop-tag {
  display: inline-block;
  padding: 6px 18px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-accent-dark);
  background: rgba(232,85,26,0.06);
  border: 1px solid rgba(232,85,26,0.15);
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
}


/* ---- 26l. 华东延伸层：东部底图层 + 网络覆盖层（双独立层，防空窗） ----
   底图层露头后常显（mapRevealed 锁）；网络层按时间线渐入；二者互不控制对方 opacity。 */
.coop-map-visual {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
/* 东部底图层：地图/网格/光晕 —— 由 JS 在首次露头后锁定 opacity=1。
   padding 必须写在本层（而非 .coop-map-visual）：absolute inset:0 的子元素忽略父级 padding，
   只有自带 padding 才能把内容区推到右侧文字栏之外，恢复左文右图。 */
.coop-base-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  padding: 80px 5vw var(--space-lg) 42vw;
}
/* 网络覆盖层：节点/标签/连线/粒子 —— 时间线渐入，不反向控制底图层 */
.coop-net-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  padding: 80px 5vw var(--space-lg) 42vw;
}

@media (max-width: 1024px) {
  .cooperation-map__track {
    height: 260vh;
  }
  .coop-phase__dot {
    width: 110px;
    height: 110px;
  }
  .coop-map__svg-wrap {
    max-width: 560px;
  }
}

@media (max-width: 768px) {
  .cooperation-map__track {
    height: 220vh;
  }
  .coop-phase__dot {
    width: 90px;
    height: 90px;
  }
  .coop-map__svg-wrap {
    max-width: 420px;
  }
  /* Mobile: keep Wenzhou + key biz cities, shrink others */
  .coop-map__label:not(.coop-map__label--wenzhou):not([data-city="杭州"]):not([data-city="南京"]):not([data-city="广州"]) {
    font-size: 7px;
  }
  .coop-phase__content {
    padding: 0 var(--space-sm);
  }
  .coop-phase, .coop-map-visual, .coop-base-layer, .coop-net-layer {
    padding: 60px var(--space-sm) var(--space-sm);
  }
}

@media (max-width: 480px) {
  .cooperation-map__track {
    height: 200vh;
  }
  .coop-phase__dot {
    width: 70px;
    height: 70px;
  }
  .coop-phase__dot-core {
    width: 28px;
    height: 28px;
  }
  .coop-map__svg-wrap {
    max-width: 340px;
  }
  .coop-map__label {
    font-size: 7px;
  }
  .coop-map__label--wenzhou {
    font-size: 9px;
  }
  .coop-phase__tags {
    gap: 8px;
  }
  .coop-tag {
    padding: 4px 14px;
    font-size: 0.78rem;
  }
}

/* prefers-reduced-motion: disable all animations */
@media (prefers-reduced-motion: reduce) {
  .hero-orbit--outer,
  .hero-orbit--mid,
  .hero-orbit--inner {
    animation: none;
  }
  .hero-float-card--1,
  .hero-float-card--2,
  .hero-float-card--3,
  .hero-float-card--4,
  .hero-float-card--5 {
    animation: none;
  }
  .ai-bot__trigger {
    animation: none;
  }
  .ai-bot__pulse {
    animation: none;
    display: none;
  }
  .section-enter {
    opacity: 1;
    transform: none;
  }
  .hero__badge,
  .hero__title,
  .hero__subtitle,
  .hero__actions,
  .hero__trust {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .parallax-slow,
  .parallax-fast {
    transform: none !important;
    transition: none !important;
  }
  /* Cooperation map: show all phases immediately */
  .cooperation-map__stage {
    position: relative;
  }
  .coop-phase, .coop-map-visual {
    position: relative;
    opacity: 1;
  }
  .coop-base-layer, .coop-net-layer {
    position: relative;
    opacity: 1;
  }
  .coop-phase__dot-glow {
    animation: none;
  }
  .coop-map__conn {
    stroke-dashoffset: 0 !important;
  }
  .coop-map__node {
    opacity: 1;
  }
  .coop-map__label {
    opacity: 1;
  }
  .coop-map__glow--wenzhou {
    opacity: 1;
  }
  .coop-phase__content {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  .coop-map__node--visible {
    animation: none;
  }
}

/* ============================================================
   27. Shared Orb Layer — 贯穿三幕的统一光球
   position: fixed, JS 控制位置/尺寸/材质
   不使用 CSS transition 于滚动驱动属性
   ============================================================ */

.shared-orb-layer {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  /* 默认隐藏，JS 接管后显示 */
  opacity: 0;
}

.shared-orb-layer--active {
  opacity: 1;
}

.shared-orb {
  position: absolute;
  /* left / top / width / height set by JS */
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* Ensure perfect circle — no box-shadow on the container */
  overflow: visible;
}

/* ---- 27a. Surface — sphere material, always perfect circle ---- */
.shared-orb__surface {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--orb-surface-gradient, transparent);
  opacity: var(--orb-surface-opacity, 0);
  /* 极轻微轮廓（品牌=白，AIBot=暖灰），避免过重边框 */
  border: 1px solid var(--orb-outline, rgba(255, 255, 255, 0.14));
}

/* ---- 27b. Rings — centered on orb ---- */
.shared-orb__rings {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 160%;
  height: 160%;
  opacity: var(--orb-rings-opacity, 0);
  pointer-events: none;
}

.shared-orb__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  /* 轨道线透明度进一步降低，只作隐约能量轨迹 */
  border: 1px solid rgba(255, 200, 150, 0.12);
  transform: translate(-50%, -50%);
}

.shared-orb__ring--1 {
  width: 94%;
  height: 20%;
}

.shared-orb__ring--2 {
  width: 118%;
  height: 25%;
  transform: translate(-50%, -50%) rotate(-25deg);
  border-color: rgba(255, 200, 150, 0.07);
}

/* ---- 27c. Glow — centered on orb center ---- */
.shared-orb__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  width: var(--orb-glow-size, 0px);
  height: var(--orb-glow-size, 0px);
  background: radial-gradient(
    circle,
    var(--orb-glow-color, rgba(255, 150, 100, 0.2)) 0%,
    transparent 70%
  );
  opacity: var(--orb-glow-opacity, 0);
  pointer-events: none;
}

/* ---- 27d. Core — centered on orb center ---- */
.shared-orb__core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #FFFFFF;
  width: var(--orb-core-size, 0px);
  height: var(--orb-core-size, 0px);
  opacity: var(--orb-core-opacity, 0);
  box-shadow: 0 0 calc(var(--orb-core-size, 0px) * 2.5) rgba(255, 255, 255, 0.85);
  pointer-events: none;
}

/* ---- 27e. Eyes — white vertical ellipses, subtle inner shadow ---- */
.shared-orb__eyes {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: clamp(26px, 4.4vw, 40px);
  opacity: var(--orb-eyes-opacity, 0);
  pointer-events: none;
}

.aibot-eye {
  position: relative;
  width: clamp(36px, 4vw, 58px);
  height: clamp(52px, 6.4vw, 74px);
  background: rgba(255, 255, 255, 0.96);
  border-radius: 50%;
  /* Inner shadow for depth — 浅灰内阴影 + 与球体保持对比 */
  box-shadow:
    inset 0 2px 8px rgba(90, 90, 90, 0.14),
    inset 0 -1px 4px rgba(0, 0, 0, 0.05),
    inset 0 0 0 1px rgba(120, 120, 120, 0.07),
    0 0 8px rgba(255, 255, 255, 0.30);
  /* 眼白保持稳定，只有内部瞳孔跟随鼠标（JS 驱动瞳孔 transform） */
}

/* 瞳孔：深灰 + 少量品牌橙 + 高光，跟随鼠标在眼眶内移动 */
.aibot-eye__pupil {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #8a7a68 0%, #4a3f36 45%, #241e1a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 170, 110, 0.28), 0 0 4px rgba(255, 160, 100, 0.30);
  will-change: transform;
}
.aibot-eye__pupil::after {
  content: '';
  position: absolute;
  left: 22%;
  top: 18%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}

/* Blink animation */
.aibot-eye--blink {
  animation: aibot-blink 0.38s ease-in-out;
}

@keyframes aibot-blink {
  0%   { transform: scaleY(1); }
  45%  { transform: scaleY(0.12); }
  100% { transform: scaleY(1); }
}

/* ============================================================
   28. AIBot Stage — 第三幕舞台
   承接合作版图，光点脱离地图→放大→材质转换→AIBot 苏醒
   ============================================================ */

.aibot-stage {
  position: relative;
  background: transparent;
  z-index: 4;
}

.aibot-stage__track {
  height: 200vh;
  position: relative;
}

.aibot-stage__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

/* ---- 28a. AIBot Stage text — positioned ABOVE the orb ---- */
.aibot-stage__text {
  text-align: center;
  z-index: 55;
  position: absolute;
  /* 顶部安全区：导航下方留 20–36px 呼吸空间，文案不被导航压住 */
  top: calc(72px + clamp(20px, 4vh, 36px));
  left: 50%;
  transform: translateX(-50%) translateY(24px);
  opacity: 0;
  /* JS controls opacity/transform */
}

.aibot-stage__label {
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-sm);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.aibot-stage__title {
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  margin-bottom: 0;
}

/* Text color shifts when background transitions to light */
.aibot-stage--light .aibot-stage__label {
  color: rgba(0, 0, 0, 0.55);
  text-shadow: none;
}

.aibot-stage--light .aibot-stage__title {
  color: var(--color-gray-900);
  text-shadow: none;
}

/* ---- 28b. AIBot Stage responsive ---- */
@media (max-width: 1024px) {
  .aibot-stage__track {
    height: 180vh;
  }
}

@media (max-width: 768px) {
  .aibot-stage__track {
    height: 180vh;
  }
  .aibot-stage__text {
    padding: 0 var(--space-lg);
  }
}

@media (max-width: 480px) {
  .aibot-stage__track {
    height: 160vh;
  }
}

/* prefers-reduced-motion: AIBot stage shows final state */
@media (prefers-reduced-motion: reduce) {
  .shared-orb-layer {
    /* Keep opacity 0 — JS will handle reduced-motion path */
  }
  .aibot-eye--blink {
    animation: none;
  }
}

/* ============================================================
   30. 本轮优化：三幕叙事增强（Hero 图标 / 合作版图 / AIBot）
   ============================================================ */

/* ---- 30a. Coop phase 无 CSS transition（JS 逐帧驱动，避免滚动滞后） ---- */
.coop-phase {
  transition: none;
}

/* ---- 30b. 合作版图第一阶段：左侧 40% 文案安全区，地图右侧 60% ---- */
.coop-phase--1 {
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  padding: 80px 0 var(--space-lg) 6vw;
}
.coop-phase--1 .coop-phase__counter {
  align-items: flex-start;
  margin-top: clamp(24px, 4vh, 48px);
  max-width: 34vw;
}
.coop-phase--1 .coop-phase__label {
  text-align: left;
  margin-bottom: 14px;
}
.coop-phase--1 .coop-phase__number-row {
  justify-content: flex-start;
}
.coop-phase--1 .coop-phase__sublabel {
  text-align: left;
  max-width: 32vw;
  line-height: 1.6;
}

/* ---- 30c. 合作版图第二阶段：左侧实力证明 ---- */
.coop-cred__content {
  text-align: left;
}
.coop-cred__heading {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.24;
  letter-spacing: -0.01em;
}
.coop-cred__line {
  display: block;
  overflow: hidden;
}
.coop-cred__line-inner {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%);
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
  will-change: transform, opacity;
}
.coop-cred__metric {
  color: #FFA060;
  font-weight: 800;
  font-size: 1.12em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.coop-cred__metric--done {
  text-shadow: 0 0 16px rgba(255, 190, 140, 0.75), 0 0 36px rgba(255, 150, 80, 0.40);
}
.coop-cred__desc {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.coop-cred__tags {
  opacity: 0;
  transition: opacity 0.5s ease 0.1s;
  justify-content: flex-start;
}
.coop-cred--reveal .coop-cred__line:nth-child(1) .coop-cred__line-inner { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
.coop-cred--reveal .coop-cred__line:nth-child(2) .coop-cred__line-inner { opacity: 1; transform: translateY(0); transition-delay: 0.65s; }
.coop-cred--reveal .coop-cred__desc { opacity: 1; transform: translateY(0); transition-delay: 1.2s; }
.coop-cred--reveal .coop-cred__tags { opacity: 1; transition-delay: 1.4s; }

/* 滚动驱动：实力证明文案由 JS 逐帧控制（mask reveal + 淡入），禁用 CSS transition 避免与滚动进度冲突 */
.coop-cred__line-inner,
.coop-cred__desc,
.coop-cred__tags {
  transition: none;
}

/* ---- 30d. 合作版图地图精致化 ---- */
.coop-map__graticule line {
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 1;
  stroke-dasharray: 2 6;
}
.coop-map__fog {
  opacity: 0.9;
}
/* 外层宽柔描边（画在下层，柔和外发光） */
.coop-map__outline-outer {
  fill: none;
  stroke: rgba(255, 200, 160, 0.16);
  stroke-width: 5;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(255, 170, 110, 0.18));
}
/* 主轮廓：极淡内部渐变填充 + 清晰细描边 + 柔和外发光（东部放大视窗内作为底图主视觉） */
.coop-map__outline {
  fill: url(#mapFill);
  stroke: rgba(255, 235, 215, 0.62);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(255, 190, 140, 0.30)) drop-shadow(0 0 10px rgba(255, 150, 90, 0.10));
}
/* 东部 15 省界 = 唯一底图轮廓：极低透明度，作为主轮廓略清晰（单一几何，无双海岸线） */
.coop-map__province {
  fill: rgba(255, 190, 140, 0.055);
  stroke: rgba(255, 235, 215, 0.18);
  stroke-width: 0.7;
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* 浙江区域轻微强调（仅视觉覆盖，不改国界/省界几何） */
.coop-map__province[data-province="浙江"] {
  fill: rgba(255, 170, 100, 0.12);
  stroke: rgba(255, 200, 160, 0.30);
}
/* 次级节点（杭州/上海/南京/广州）：比周边更亮、光晕更强 */
.coop-map__node--major {
  fill: #FFF3E4;
  stroke: rgba(255, 255, 255, 0.90);
  filter: drop-shadow(0 0 6px rgba(255, 190, 140, 0.60));
}
.coop-map__dots circle {
  fill: rgba(255, 210, 170, 0.28);
}
.coop-map__scan {
  animation: map-scan 7s ease-in-out infinite;
}
@keyframes map-scan {
  0%   { transform: translateY(-90px); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(500px); opacity: 0; }
}
.coop-map__conn {
  stroke: rgba(255, 200, 160, 0.30);
  stroke-width: 1.3;
}
.coop-map__flow {
  opacity: 0;
}
.coop-map__flow-dot {
  fill: #FFC9A0;
  filter: drop-shadow(0 0 4px rgba(255, 180, 130, 0.9));
}
.coop-map__node {
  fill: #FFE9D6;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 1.5;
}

/* ---- 30e. AIBot 场景：标题 / 本体 / 五卡 纵向三层 ---- */
.aibot-cards {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 5vh, 56px);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(10px, 1.4vw, 20px);
  width: min(1120px, 92vw);
  z-index: 56;
  pointer-events: none;
}
.aibot-card {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  padding: 18px 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  text-align: left;
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  will-change: opacity, transform;
}
.aibot-card__num {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: 6px;
}
.aibot-card__title {
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}
.aibot-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.aibot-card__tags span {
  font-size: 0.68rem;
  line-height: 1;
  color: var(--color-gray-600);
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 999px;
  padding: 4px 9px;
  white-space: nowrap;
}

/* ---- 30f. AIBot 本体：tilt + 柔和投影 ---- */
.shared-orb {
  transform: translate(-50%, -50%) rotateX(var(--orb-tilt-x, 0deg)) rotateY(var(--orb-tilt-y, 0deg));
  transform-style: preserve-3d;
  will-change: transform;
}
.shared-orb::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -16%;
  transform: translateX(-50%);
  width: 72%;
  height: 15%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(25, 18, 12, 0.20) 0%, rgba(25, 18, 12, 0.06) 55%, transparent 72%);
  filter: blur(7px);
  opacity: var(--orb-shadow-opacity, 0);
  pointer-events: none;
}

/* ---- 30f-ext. 温州核心节点：扩散波 + 缓慢呼吸（仅在 map-node 阶段生效） ---- */
.shared-orb__wave {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 180, 120, 0.45);
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  pointer-events: none;
}
.shared-orb--map-node .shared-orb__wave {
  animation: orb-wave 2.8s ease-out infinite;
}
@keyframes orb-wave {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0.7; }
  70%  { opacity: 0.14; }
  100% { transform: translate(-50%, -50%) scale(3.2); opacity: 0; }
}
.shared-orb--map-node .shared-orb__glow {
  animation: orb-breathe 3.4s ease-in-out infinite;
}
@keyframes orb-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.22); }
}

/* ---- 30g. 响应式：AIBot 五卡 / 合作版图 ---- */
@media (max-width: 1024px) {
  .aibot-cards {
    gap: 8px;
  }
  .aibot-card {
    padding: 14px 12px;
  }
  .aibot-card__tags span {
    padding: 3px 7px;
    font-size: 0.62rem;
  }
}
@media (max-width: 768px) {
  /* 合作版图第一/二阶段文案上移，避免压到居中的地图 */
  .coop-phase--1,
  .coop-phase--5 {
    justify-content: flex-start;
    padding-top: 88px;
  }
  .coop-phase--1 .coop-phase__counter {
    max-width: 86vw;
  }
  .coop-phase--1 .coop-phase__sublabel {
    max-width: 86vw;
  }
  .coop-cred__content {
    max-width: 88vw;
  }
  /* AIBot 五卡：横向滑动单行，避免与球体重叠 */
  .aibot-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    width: 94vw;
    bottom: 22px;
    padding-bottom: 6px;
    /* 基础样式里的 pointer-events:none 是为桌面准备的（点击交给整卡背后的处理），
       但 ≤768 这里整条变成了 overflow-x:auto 的滚动容器 —— 不还原成 auto，
       手指根本拖不动它，滚动条就成了一条"能滑但滑不了"的假提示。
       本机触屏实测：还原后指针事件可达，横向拖拽生效。 */
    pointer-events: auto;
    /* 五张卡总量 900px，768 容器只有 722px、375 只有 353px，第 5 张必然在屏外。
       原生滚动条在浅底卡片下非常抢眼（实测 10px 高、横贯整条），
       改用「右缘渐隐 + 末张自然露边」这两个不占布局的手势暗示：
       卡片照旧硬裁在容器右缘，但最后 44px 溶进背景，读起来是"还有内容"而不是"被切坏"。 */
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 44px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 44px), transparent 100%);
  }
  .aibot-cards::-webkit-scrollbar { display: none; }
  .aibot-card {
    flex: 0 0 172px;
    padding: 14px 12px;
  }
  .aibot-card:nth-child(5) {
    grid-column: auto;
  }
}

/* ============================================================
   27. Showcase — 沉浸式案例（AIBot 卡片区之后，后半段主视觉）
       - 开场过渡区 + 第一章「AI创意短视频」sticky 长滚动
       - 右侧为视频作品展厅（3 竖屏卡，中主侧弱）
       - 滚动节奏由 js/showcase-scroll.js 驱动（transform/opacity）
   ============================================================ */
.showcase {
  position: relative;
  background: var(--color-gray-50);
  /* 注意：不能设 overflow 非 visible —— 会破坏内部 .showcase-track 的
     position: sticky（祖先 overflow 会成为 scrollport，sticky 将失效）。
     横向溢出由 .showcase-sticky 自身 overflow:hidden 兜住。 */
}

/* ---- 27a. 开场过渡区：留白、克制，淡入由 .anim-fade-up 承接 ---- */
.showcase-intro {
  padding: var(--space-3xl) var(--space-lg) var(--space-xl);
}

/* ---- 27b. 第一章轨道 + sticky 舞台 ---- */
.showcase-track {
  /* 520vh 长滚动：5 段视频各有独立停留区，滚轮不会一下跳过 2~3 个视频 */
  height: 520vh;
  position: relative;
}

.showcase-sticky {
  /* 布局边界：左侧文案区宽度 + 文案区↔视频区安全间距（CSS 变量），
     两个独立布局区域，禁止用 margin 修补重叠 */
  --showcase-side-w: clamp(300px, 24vw, 380px);
  --showcase-side-gap: clamp(48px, 4.5vw, 72px);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 75% 40%, rgba(232, 85, 26, 0.05), transparent 60%),
    var(--color-gray-50);
}

/* ---- 27c. 中央标题（第一/二幕）---- */
.showcase-title {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  width: 0;
  height: 0;
  /* 大标题：7 字「AI创意短视频」横排/竖排同字号（约 42-64px），
     竖排后 7 字总高需 ≤ 视口高度，故不再用 150px 级超大字号。
     各汉字由 JS 以自身 em 为基准平移/缩放，容器仅是锚点，宽度为 0。 */
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: 0;
  color: var(--color-gray-900);
  white-space: nowrap;
  will-change: transform;
}

.showcase-title__char {
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1;
  will-change: transform, opacity, filter;
}

/* ---- 27d. 左侧章节 Rail（第三幕）----
   最左细 Rail：01-05 纯数字竖排，当前章节橙色高亮；
   与右侧大号竖排标题（19vw）分属两个区域，互不重叠。 */
.showcase-rail {
  position: absolute;
  left: clamp(1rem, 2vw, 2.5rem);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.8vh, 20px);
  opacity: 0;
  will-change: transform, opacity;
}

.showcase-rail__num {
  display: block;
  font-size: clamp(0.85rem, 1vw, 1rem);
  font-weight: 600;
  line-height: 1;
  color: var(--color-gray-300);
  font-variant-numeric: tabular-nums;
  transition: color var(--transition-fast);
}

.showcase-rail__num.is-active {
  color: var(--color-accent);
  font-weight: 800;
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
}

/* ---- 27e. 右侧视频作品展厅（第四幕）----
   作品画廊：5 条真实视频横排，当前最大、其余依次缩小但清晰可见（opacity ≥ 0.7）。
   容器横向覆盖右侧 75% 区域（左缘 24vw 避开竖排标题），中心约 61vw。 */
.showcase-cases {
  position: absolute;
  /* 视频区起点 = 左侧文案区宽度 + 安全间距（两个独立区域，不用 margin 修补）；
     overflow:hidden 兜住远端视频与 hover 缩放，绝不侵入左侧文字。 */
  left: calc(var(--showcase-side-w) + var(--showcase-side-gap));
  right: 2vw;
  top: 50%;
  height: 76vh;
  opacity: 0;
  overflow: hidden;
  will-change: transform, opacity;
  touch-action: pan-y;
}

/* 单条竖屏视频作品：视频本身即完整视觉主体（9:16，圆角、轻阴影、留白）。
   无 hover 边框 / 无描边；标题/分类叠加在视频底部，由底部渐变保证可读性。
   柔和过渡：滚动推进 + hover 聚光灯共用（350~550ms，自然缓动）。 */
.showcase-video {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(220px, 24vw, 360px);
  margin: 0;
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 50px -22px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  will-change: transform, opacity;
  transition:
    transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.42s ease,
    filter 0.42s ease,
    box-shadow 0.42s ease;
}

/* 键盘焦点：用柔和阴影代替 outline / 边框（用户要求不要明显描边） */
.showcase-video:focus-visible {
  box-shadow: 0 0 0 3px rgba(232, 85, 26, 0.45), 0 20px 50px -22px rgba(0, 0, 0, 0.45);
}

/* 真实视频铺满整卡（object-fit:cover 不拉伸） */
.showcase-video__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #101012;
}

/* 克制播放按钮：居中圆形，hover / 播放中显示，播放时切换为暂停图标。
   不做抖音式花哨 UI；pointer-events:none 让整卡点击统一由卡片处理。 */
.showcase-video__btn {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(15, 15, 17, 0.36);
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(2px);
}

.showcase-video__btn::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 9px solid #fff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  margin-left: 3px;
}

.showcase-video.is-playing .showcase-video__btn::before {
  border: none;
  width: 11px;
  height: 13px;
  margin-left: 0;
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  background-size: 4px 13px, 4px 13px;
  background-repeat: no-repeat;
  background-position: 0 0, 7px 0;
}

.showcase-video:hover .showcase-video__btn,
.showcase-video.is-playing .showcase-video__btn { opacity: 1; }

/* 触屏设备：无 hover，播放按钮常显作为点击提示 */
@media (hover: none) {
  .showcase-video__btn { opacity: 1; }
}

/* 分类标签：视频底部渐变区左上角，克制小胶囊 */
.showcase-video__tag {
  display: inline-block;
  font-size: var(--text-label);
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  letter-spacing: 0.02em;
}

/* 视频元信息：叠加在视频底部，底部渐变保证可读性（无白底卡） */
.showcase-video__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 34px 14px 12px;
  text-align: left;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
}

.showcase-video__name {
  margin: 6px 0 0;
  font-size: var(--text-body-md);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* 进度反馈：当前视频 01/05，画廊右下角（对齐 cases 容器），克制小字 */
.showcase-progress {
  position: absolute;
  right: 2vw;
  bottom: clamp(1rem, 3vh, 2rem);
  z-index: 5;
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--color-gray-400);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.showcase-progress__cur {
  color: var(--color-gray-900);
  font-weight: 700;
}

/* 左右切换按钮（桌面端）：位于视频展示区域内部左右缘，
   不重叠左侧竖排文字，不伸出视频容器；随展厅淡入。
   hover 仅轻微放大（scale 1.1），不触发视频播放。 */
.showcase-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-gray-800);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.35);
  transition:
    opacity 0.3s ease,
    transform 0.2s ease,
    background 0.2s ease;
}
.showcase-nav:hover {
  transform: translateY(-50%) scale(1.1);
  background: #fff;
}
.showcase-nav:active {
  transform: translateY(-50%) scale(0.96);
}
/* 左右按钮位置 = 视频区内部左右缘（复用与 .showcase-cases 相同的布局变量） */
.showcase-nav--prev {
  left: calc(var(--showcase-side-w) + var(--showcase-side-gap) + 10px);
}
.showcase-nav--next {
  right: calc(2vw + 10px);
}

/* v14：移除桌面横向拖拽（滚轮/拖拽不再切换视频），故 .is-dragging 样式删除 */

/* ---- 27f. 结束占位（第五幕）---- */
.showcase-outro {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 4vh, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  font-size: var(--text-label);
  color: var(--color-gray-500);
  will-change: transform, opacity;
}

.showcase-outro__arrow {
  color: var(--color-accent);
  animation: outro-arrow-bob 1.6s ease-in-out infinite;
}

@keyframes outro-arrow-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* ---- 27g. 移动端基本适配 ---- */
@media (max-width: 768px) {
  .showcase-cases {
    left: 4vw;
    right: 4vw;
    height: 64vh;
  }

  .showcase-video {
    /* 移动端：当前视频居中略大，前后视频部分露出（JS slotX 14vw） */
    width: clamp(150px, 42vw, 210px);
    border-radius: 14px;
  }

  .showcase-rail {
    left: clamp(0.5rem, 2vw, 1.5rem);
    gap: 8px;
  }

  .showcase-title {
    /* 移动端 6 字竖排总高需 ≤ 视口高度 */
    font-size: clamp(1.6rem, 6vw, 2.4rem);
  }

  .showcase-progress {
    right: 4vw;
    bottom: 1rem;
    font-size: 12px;
  }

  /* 移动端隐藏左右按钮，改用手指左右 swipe */
  .showcase-nav { display: none; }
}

/* ---- 27h. reduced-motion：禁用箭头浮动 ---- */
@media (prefers-reduced-motion: reduce) {
  .showcase-outro__arrow {
    animation: none;
  }
}

/* ============================================================
   28. AI 市场部 — 线下 AI 实训课程（第二章）

   定位：不是 SaaS 仪表盘，是「正在参观一家真的在做 AI 外贸实训
         的公司的课堂」。真实课堂照片始终是视觉主体，科技 UI 是
         包装课堂的 HUD，不能把课堂遮掉。

   结构：章头(intro) → 舞台(stage: 顶栏 + 导航栏 + 课堂场景 + 实训路径)
         → 落地 4 卡(fields)
   交互：js/ai-marketing.js 点击驱动，切换时右侧场景整体重组。
   命名空间 ai-dept-*，与 showcase 完全隔离，互不影响。
   ============================================================ */
.ai-dept {
  position: relative;
  background: var(--color-gray-50);
  /* 与 .showcase 同理：不设 overflow，避免破坏其它 section 的 sticky */
  --ai-stage-bg: #13100D;
  --ai-panel: rgba(255, 255, 255, 0.035);
  --ai-line: rgba(255, 255, 255, 0.11);
  --ai-line-2: rgba(255, 255, 255, 0.055);
  --ai-ink: rgba(255, 255, 255, 0.92);
  --ai-ink-2: rgba(255, 255, 255, 0.66);
  --ai-ink-3: rgba(255, 255, 255, 0.40);
  --ai-orange: #FF6A24;
  --ai-orange-2: #E8551A;
  --ai-orange-3: #D94E18;
  --ai-mono: var(--font-mono);
  --ai-wrap: min(1360px, 92vw);
}

/* 内容宽度容器 */
.ai-dept__wrap {
  width: var(--ai-wrap);
  margin: 0 auto;
}

/* 视觉隐藏的章节标题（保 h2 语义，不参与视觉） */
.ai-dept__sr-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- 28a. 章头（在轨道之外，普通滚动呈现；保持浅色底，不做科技 UI） ---- */
.ai-dept__intro {
  position: relative;
  padding: var(--space-3xl) var(--space-lg) clamp(64px, 10vh, 128px);
  overflow: hidden;
  transform-origin: 50% 42%;
  /* 黑色舞台升起时，章头轻微缩小、退到背景（--ip 由 JS 按滚动进度写入 0→1） */
  transform: scale(calc(1 - var(--ip, 0) * 0.022));
  opacity: calc(1 - var(--ip, 0) * 0.6);
}

/* 进入视口时分段显现：标签 → 主标题 → 副标题 → 关键词 → 注脚 */
.ai-dept__intro.is-on .ai-dept__intro-tag,
.ai-dept__intro.is-on .ai-dept__intro-title,
.ai-dept__intro.is-on .ai-dept__intro-sub,
.ai-dept__intro.is-on .ai-dept__keywords li,
.ai-dept__intro.is-on .ai-dept__intro-note {
  animation: aiDeptIntroIn 640ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0ms);
}

.ai-dept__intro.is-on .ai-dept__intro-tag   { --d:   0ms; }
.ai-dept__intro.is-on .ai-dept__intro-title { --d: 110ms; }
.ai-dept__intro.is-on .ai-dept__intro-sub   { --d: 220ms; }
.ai-dept__intro.is-on .ai-dept__intro-note  { --d: 440ms; }
.ai-dept__intro.is-on .ai-dept__keywords li:nth-child(1) { --d: 320ms; }
.ai-dept__intro.is-on .ai-dept__keywords li:nth-child(2) { --d: 356ms; }
.ai-dept__intro.is-on .ai-dept__keywords li:nth-child(3) { --d: 392ms; }
.ai-dept__intro.is-on .ai-dept__keywords li:nth-child(4) { --d: 428ms; }
.ai-dept__intro.is-on .ai-dept__keywords li:nth-child(5) { --d: 464ms; }
.ai-dept__intro.is-on .ai-dept__keywords li:nth-child(6) { --d: 500ms; }

@keyframes aiDeptIntroIn {
  from { opacity: 0; transform: translateY(24px); filter: blur(5px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* 背景超大英文：非常缓慢的横向漂移，只作气氛 */
.ai-dept__intro.is-on .ai-dept__intro-bg {
  animation: aiDeptIntroBg 26s ease-in-out infinite alternate;
}

@keyframes aiDeptIntroBg {
  from { transform: translate(-50%, -50%) translateX(-1.7%); }
  to   { transform: translate(-50%, -50%) translateX(1.7%); }
}

/* 背景超大低透明英文（只作装饰，不抢中文主体） */
.ai-dept__intro-bg {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  font-family: var(--ai-mono);
  font-size: clamp(4.5rem, 16vw, 15rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: rgba(30, 27, 24, 0.052);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.ai-dept__intro-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

/* 章节标签：HUD 风格，替代原来的胶囊 */
.ai-dept__intro-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ai-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: var(--ai-orange-2);
}

.ai-dept__intro-tag b {
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--color-gray-400);
}

.ai-dept__intro-tag i {
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

.ai-dept__intro-title {
  margin: 18px 0 0;
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: 0.04em;
  color: var(--color-gray-900);
}

.ai-dept__intro-sub {
  margin: 16px 0 0;
  font-size: clamp(1rem, 1.7vw, 1.28rem);
  line-height: 1.6;
  color: var(--color-gray-600);
}

/* 课程关键词：不用标签堆砌，做成 HUD 文本行 */
.ai-dept__keywords {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin: 34px auto 0;
  padding: 16px 0;
  max-width: 940px;
  list-style: none;
  border-top: 1px solid rgba(30, 27, 24, 0.09);
  border-bottom: 1px solid rgba(30, 27, 24, 0.09);
}

.ai-dept__keywords li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 23px;
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  color: var(--color-gray-600);
}

.ai-dept__keywords li + li {
  border-left: 1px solid rgba(30, 27, 24, 0.09);
}

/* 关键词前的状态点：低透明，只有第一个是品牌色 */
.ai-dept__keywords s {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-gray-400);
  flex-shrink: 0;
}

.ai-dept__keywords li:first-child s {
  background: var(--ai-orange-2);
  box-shadow: 0 0 6px rgba(232, 85, 26, 0.55);
}

.ai-dept__intro-note {
  margin: 26px 0 0;
  font-family: var(--ai-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--color-gray-500);
}

/* ---- 28b. 滚动叙事轨道 + sticky 舞台（入场 / 退场） ----
   祖先元素一律不得设 overflow —— 会让 scrollport 变成祖先自身，
   下面 .ai-dept__sticky 的 position: sticky 直接失效（同 .showcase 的约定）。
   舞台自身的 scale / translate 溢出，由 .ai-dept__sticky 的 overflow 兜住。 */
.ai-dept__track {
  /* 520vh 总长度：入场 0.06 + 五幕 0.70 + 总结 0.09 + 退场 0.05
     （比例见 js/ai-marketing.js 顶部 TL） */
  height: 520vh;
  position: relative;
}

.ai-dept__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  padding-top: 72px;               /* 让开固定导航（.nav height: 72px） */
  box-sizing: border-box;
  background: var(--color-gray-50);  /* 与章头同色：黑色舞台从浅色底上升起 */
}

/* 舞台「身后」的深色底：只在退场段（JS 写 --back:1）显形。
   退场时舞台会轻微上移 / 缩小，露出的边缝与圆角缺口必须是深色 ——
   否则会透出 sticky 的浅色底，整块看起来像被白色蒙版罩住。 */
.ai-dept__sticky::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--ai-stage-bg);
  opacity: var(--back, 0);
  pointer-events: none;
}

/* 舞台升降 / 缩放由 JS 写入（单位：vh / 无量纲），透明度恒为 1。
   --lift = 舞台离「落位」还有多远（|enter-y|）。
   它同时驱动圆角和外投影：升起到位时是整屏铺满（radius 0、无投影），
   升起 / 退场途中则像一块浮起来的界面板，边缘不再是硬切的黑白平线。 */
.ai-dept__stage {
  position: relative;
  z-index: 1;                      /* 压在 .ai-dept__sticky::before 深色底之上 */
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.8vh, 38px) 0 clamp(18px, 2.4vh, 32px);
  background:
    radial-gradient(1100px 520px at 68% 34%, rgba(255, 106, 36, 0.075), transparent 62%),
    linear-gradient(180deg, #16120E 0%, var(--ai-stage-bg) 52%, #0D0B09 100%);
  transform: translate3d(0, calc(var(--enter-y, 0) * 1vh), 0) scale(var(--enter-s, 1));
  transform-origin: 50% 50%;
  /* 舞台全程不透明。整块淡出会让 sticky 的浅色底透上来，
     导航 / 照片 / HUD / 文字一起发灰白——退场只由 --enter-y / --enter-s 表达。 */
  opacity: 1;
  border-radius: calc(var(--lift, 0) * 1.6px);
  box-shadow:
    0 calc(var(--lift, 0) * 1.1px) calc(var(--lift, 0) * 5px) rgba(0, 0, 0, 0.55),
    0 calc(var(--lift, 0) * 5px) calc(var(--lift, 0) * 20px) rgba(0, 0, 0, 0.38);
  will-change: transform, opacity;
}

.ai-dept__stage > .ai-dept__wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* 顶栏：真实感标签 + 序号 */
.ai-dept__topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(16px, 2.4vh, 26px);
}

.ai-dept__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 106, 36, 0.34);
  border-radius: var(--radius-full);
  font-family: var(--ai-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ai-orange);
  white-space: nowrap;
}

.ai-dept__badge i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ai-orange);
  box-shadow: 0 0 7px rgba(255, 106, 36, 0.8);
}

.ai-dept__badge--dim {
  border-color: var(--ai-line);
  color: var(--ai-ink-3);
}

.ai-dept__badge--dim i {
  background: var(--ai-ink-3);
  box-shadow: none;
}

.ai-dept__topbar-line {
  flex: 1;
  height: 1px;
  background: var(--ai-line-2);
}

.ai-dept__counter {
  font-family: var(--ai-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ai-ink-3);
  font-variant-numeric: tabular-nums;
}

/* ---- 28c. 主体：左课程导航 + 右课堂场景 ---- */
.ai-dept__body {
  display: grid;
  grid-template-columns: minmax(240px, 27%) 1fr;
  gap: clamp(14px, 1.8vw, 26px);
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

/* ================= 28d. 左：科技感课程导航 ================= */
.ai-dept__rail {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 行高 + 间距按视口分档：让这一列真正占满高度，不是半屏死黑 */
  gap: clamp(8px, 2.2vh, 26px);
  min-height: 0;
}

/* 导航栏与场景之间的贯穿连接线 */
.ai-dept__rail::after {
  content: '';
  position: absolute;
  right: calc(-1 * clamp(14px, 1.8vw, 26px));
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: linear-gradient(180deg,
    transparent, var(--ai-line) 12%, var(--ai-line) 88%, transparent);
  pointer-events: none;
}

.ai-dept__nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: clamp(13px, 2.2vh, 24px) 14px;
  border: 1px solid var(--ai-line-2);
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 240ms ease,
    background 240ms ease,
    box-shadow 240ms ease;
}

.ai-dept__nav:hover {
  transform: translateX(4px);
  border-color: var(--ai-line);
  background: var(--ai-panel);
}

.ai-dept__nav:focus-visible {
  outline: 2px solid var(--ai-orange);
  outline-offset: 3px;
}

.ai-dept__nav-num {
  font-family: var(--ai-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ai-ink-3);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  transition: color 240ms ease;
}

.ai-dept__nav-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ai-dept__nav-en {
  font-family: var(--ai-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ai-ink-3);
  transition: color 240ms ease;
}

.ai-dept__nav-cn {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ai-ink-2);
  white-space: nowrap;
  transition: color 240ms ease;
}

.ai-dept__nav-led {
  margin-left: auto;
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  flex-shrink: 0;
  transition: background 240ms ease, box-shadow 240ms ease;
}

/* 选中态标记：默认不可见，只有 ACTIVE 项显示 */
.ai-dept__nav-state {
  position: absolute;
  right: 12px;
  bottom: 9px;
  font-family: var(--ai-mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ai-orange);
  opacity: 0;
  transition: opacity 240ms ease;
}

/* 极细动态扫描光：hover 时掠过一次 */
.ai-dept__nav-scan {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ai-orange), transparent);
  opacity: 0;
  pointer-events: none;
}

.ai-dept__nav:hover .ai-dept__nav-scan {
  animation: aiDeptNavScan 700ms ease-out;
}

@keyframes aiDeptNavScan {
  0%   { opacity: 0; transform: translateY(0); }
  35%  { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(52px); }
}

/* 选中态：橙色左沿 + 微 glow + 状态灯 */
.ai-dept__nav.is-active {
  border-left-color: var(--ai-orange);
  border-color: rgba(255, 106, 36, 0.42);
  background: linear-gradient(90deg, rgba(255, 106, 36, 0.2), transparent 78%);
  box-shadow: inset 0 0 0 1px rgba(255, 106, 36, 0.12), 0 0 30px -10px rgba(255, 106, 36, 0.7);
}

.ai-dept__nav.is-active .ai-dept__nav-num { color: var(--ai-orange); }
.ai-dept__nav.is-active .ai-dept__nav-en  { color: var(--ai-orange); }
.ai-dept__nav.is-active .ai-dept__nav-cn  { color: #fff; }

.ai-dept__nav.is-active .ai-dept__nav-led {
  width: 8px;
  height: 8px;
  background: var(--ai-orange);
  box-shadow: 0 0 12px rgba(255, 106, 36, 0.95);
}

.ai-dept__nav.is-active .ai-dept__nav-state { opacity: 1; }

/* ================= 28e. 右：课堂场景 =================
   高度由 .ai-dept__body 的 grid 行高撑满（→ 100vh - 导航 - 顶栏 - 路径），
   不再用 aspect-ratio，避免矮屏上舞台被顶出视口。
   --out（0→1，由滚动进度写入）= 当前幕的「退出」段：
   内容下沉淡出 / HUD 向外让位 / 照片轻微推近，三件事同步发生。 */
.ai-dept__scene {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: #0B0908;
  min-height: 300px;
  box-shadow: 0 40px 90px -34px rgba(0, 0, 0, 0.72);
  isolation: isolate;
}

/* 覆盖层 1：照片。两张叠着做交叉淡入；退出段轻微推近 */
.ai-dept__shot {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: scale(calc(1 + var(--out, 0) * 0.03));
}

.ai-dept__shot-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  opacity: 0;
  /* --cam-* 由 JS 按当前幕写入：每幕一个极小的镜头方向差（≤6px / ≤1.035），
     制造「镜头在动」而不是「图片飞入」 */
  transform: translate3d(var(--cam-x, 0px), var(--cam-y, 0px), 0) scale(var(--cam-s0, 1.05));
  transition: opacity 620ms ease, transform 1500ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.ai-dept__shot-img.is-cur {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* 覆盖层 2：可读性渐变 + 轻网格（总覆盖强度克制，照片保持清楚） */
.ai-dept__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(9, 7, 6, 0.95) 0%, rgba(9, 7, 6, 0.92) 30%,
                    rgba(9, 7, 6, 0.84) 44%, rgba(9, 7, 6, 0.52) 58%,
                    rgba(9, 7, 6, 0.14) 72%, rgba(9, 7, 6, 0.06) 82%,
                    rgba(9, 7, 6, 0.32) 100%),
    linear-gradient(180deg, rgba(9, 7, 6, 0.5) 0%, transparent 22%,
                    transparent 46%, rgba(9, 7, 6, 0.86) 100%);
}

.ai-dept__scrim::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 100% at 50% 50%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 20%, transparent 78%);
}

/* 覆盖层 3：HUD 装饰（四角定位线 + 扫描光 + 序号） */
.ai-dept__hud {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* 退出段：HUD 整体向外让位 12px，不是一起淡掉 */
  transform: translate3d(calc(var(--out, 0) * 12px), 0, 0);
  opacity: calc(1 - var(--out, 0) * 0.75);
}

.ai-dept__hud-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 0 solid rgba(255, 255, 255, 0.34);
  opacity: 1;
  transform: scale(1);
}

/* 四角定位线：随幕「描」出来 */
.ai-dept__scene.is-in .ai-dept__hud-corner {
  animation: aiDeptCorner 420ms cubic-bezier(0.22, 1, 0.36, 1) 60ms both;
}

@keyframes aiDeptCorner {
  from { opacity: 0; transform: scale(0.55); }
  to   { opacity: 1; transform: scale(1); }
}

.ai-dept__hud-corner--tl { top: 16px; left: 16px; border-top-width: 1px; border-left-width: 1px; }
.ai-dept__hud-corner--tr { top: 16px; right: 16px; border-top-width: 1px; border-right-width: 1px; }
.ai-dept__hud-corner--bl { bottom: 16px; left: 16px; border-bottom-width: 1px; border-left-width: 1px; }
.ai-dept__hud-corner--br { bottom: 16px; right: 16px; border-bottom-width: 1px; border-right-width: 1px; }

/* 横向橙色扫描光：每次切幕重放一次，是「旧幕退 → 新幕进」之间那道过渡 */
.ai-dept__scan {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 30%;
  opacity: 0;
  background: linear-gradient(90deg,
    transparent, rgba(255, 138, 77, 0.14) 70%, rgba(255, 138, 77, 0.32));
  mix-blend-mode: screen;
}

.ai-dept__scan.is-run {
  animation: aiDeptScan 700ms cubic-bezier(0.33, 1, 0.68, 1);
}

@keyframes aiDeptScan {
  0%   { opacity: 0; transform: translateX(-100%); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(430%); }
}

.ai-dept__hud-num {
  position: absolute;
  right: 20px;
  bottom: 12px;
  font-family: var(--ai-mono);
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.075);
  font-variant-numeric: tabular-nums;
}

/* 覆盖层 4：场景内容。文本块固定在左栏，右侧全部留给真实课堂照片。 */
.ai-dept__scene-inner {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  padding: clamp(20px, 3%, 40px) clamp(22px, 3.2%, 44px) 82px;
  /* 退出段：文本块先轻轻退下去，带动画的是子元素，这一层只负责「让位」 */
  opacity: calc(1 - var(--out, 0) * 0.95);
  transform: translate3d(0, calc(var(--out, 0) * -12px), 0);
}

/* 文本块固定左栏，右侧整片留给真实课堂照片与流程示意 */
.ai-dept__scene-left {
  width: min(46%, 460px);
  min-width: 0;
}

/* 进入：错峰组装 —— 0ms 照片场景 → 120ms 标签 → 150ms 标题 → 250ms 画线
   → 350ms 起节点逐个点亮 → 430/490/550ms 教什么·怎么练·做出什么 */
.ai-dept__scene.is-in .ai-dept__scene-tag,
.ai-dept__scene.is-in .ai-dept__scene-title,
.ai-dept__scene.is-in .ai-dept__hudcards,
.ai-dept__scene.is-in .ai-dept__teach-col {
  animation: aiDeptRise 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0ms);
}

.ai-dept__scene.is-in .ai-dept__scene-tag   { --d: 120ms; }
.ai-dept__scene.is-in .ai-dept__scene-title { --d: 150ms; }
.ai-dept__scene.is-in .ai-dept__hudcards    { --d: 190ms; }
.ai-dept__scene.is-in .ai-dept__teach       { --d: 400ms; }

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

.ai-dept__scene-tag {
  display: inline-block;
  font-family: var(--ai-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ai-orange);
}

.ai-dept__hudcards {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}

.ai-dept__hudcard {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-full);
  background: rgba(10, 8, 6, 0.4);
}

.ai-dept__hudcard-k {
  font-family: var(--ai-mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ai-orange);
}

.ai-dept__hudcard-v {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.72);
}

.ai-dept__scene-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 16px 0 0;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.1;
  color: #fff;
}

.ai-dept__scene-num {
  font-family: var(--ai-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ai-orange);
}

/* ================= 28e-2. 流程示意（五幕构图各不相同）=================
   覆盖层 5：锚在场景右下，让开底部状态条与左侧文本块。
   col   纵向流程（分析感）      row   横向生产管线
   hub   中心节点 + 平台环绕     tree  任务分解树
   chain 横向链路，节点依次接通并 pulse 一次
   逐幕的构图差异是这一章「换的不只是照片」的主要来源。 */
.ai-dept__diagram {
  position: absolute;
  right: clamp(22px, 3.2%, 46px);
  bottom: 92px;
  z-index: 3;
  pointer-events: none;
  opacity: calc(1 - var(--out, 0) * 0.95);
  transform: translate3d(0, calc(var(--out, 0) * -10px), 0);
}

/* 节点本体（col / row / tree / chain 共用） */
.ai-dept__dnode {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-full);
  background: rgba(10, 8, 6, 0.55);
  font-size: 0.7rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
  /* 基础态一律可见；进场动画靠 animation-fill-mode: both 的延迟段负责隐藏。
     这样一旦 is-in 缺失（总结幕 / 降级 / 减动效），内容不会停在 opacity:0。 */
  opacity: 1;
}

.ai-dept__dnode-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ai-orange);
  box-shadow: 0 0 6px rgba(255, 106, 36, 0.7);
  flex-shrink: 0;
  opacity: 0.55;
}

.ai-dept__scene.is-in .ai-dept__dnode {
  animation: aiDeptNode 340ms ease both;
  animation-delay: var(--d, 350ms);
}

@keyframes aiDeptNode {
  0%   { opacity: 0; transform: translateY(6px); }
  45%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 连接段：横向 scaleX 绘制，纵向 scaleY 绘制 */
.ai-dept__diagram .ai-dept__dnode::before,
.ai-dept__diagram .ai-dept__dnode::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.14);
}

/* ---- col：纵向流程。市场 → 对标 → 选题 → 脚本，往下走 ---- */
.ai-dept__diagram[data-layout="col"] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}

.ai-dept__diagram[data-layout="col"] .ai-dept__dnode::after {
  left: 13px;
  top: 100%;
  width: 1px;
  height: 11px;
  transform: scaleY(0);
  transform-origin: top center;
  background: linear-gradient(180deg, rgba(255, 138, 77, 0.8), rgba(255, 138, 77, 0.4));
}

/* 连接段末端的向下箭头（col 布局的 ::before 原本空着） */
.ai-dept__diagram[data-layout="col"] .ai-dept__dnode::before {
  left: 10px;
  top: calc(100% + 7px);
  width: 0;
  height: 0;
  background: none;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(255, 138, 77, 0.85);
  opacity: 1;
}

.ai-dept__diagram[data-layout="col"] .ai-dept__dnode:last-child::before { display: none; }

.ai-dept__scene.is-in .ai-dept__diagram[data-layout="col"] .ai-dept__dnode::before {
  animation: aiDeptFade 300ms ease both;
  animation-delay: var(--d, 350ms);
}

.ai-dept__diagram[data-layout="col"] .ai-dept__dnode:last-child::after { display: none; }

.ai-dept__scene.is-in .ai-dept__diagram[data-layout="col"] .ai-dept__dnode::after {
  animation: aiDeptDrawY 300ms ease both;
  animation-delay: var(--d, 350ms);
}

@keyframes aiDeptDrawY {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ---- row / chain：横向管线，节点之间的连接段从左往右画出来 ---- */
.ai-dept__diagram[data-layout="row"],
.ai-dept__diagram[data-layout="chain"] {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.ai-dept__diagram[data-layout="row"] .ai-dept__dnode,
.ai-dept__diagram[data-layout="chain"] .ai-dept__dnode {
  border-radius: var(--radius-sm);
}

.ai-dept__diagram[data-layout="row"] .ai-dept__dnode::before,
.ai-dept__diagram[data-layout="chain"] .ai-dept__dnode::before {
  left: -18px;
  top: 50%;
  width: 18px;
  height: 1px;
  margin-top: -0.5px;
  transform: scaleX(0);
  transform-origin: left center;
  background: rgba(255, 138, 77, 0.55);
}

.ai-dept__diagram[data-layout="row"] .ai-dept__dnode:first-child::before,
.ai-dept__diagram[data-layout="chain"] .ai-dept__dnode:first-child::before { display: none; }

.ai-dept__diagram[data-layout="row"] .ai-dept__dnode + .ai-dept__dnode,
.ai-dept__diagram[data-layout="chain"] .ai-dept__dnode + .ai-dept__dnode {
  margin-left: 18px;
}

.ai-dept__scene.is-in .ai-dept__diagram[data-layout="row"] .ai-dept__dnode::before,
.ai-dept__scene.is-in .ai-dept__diagram[data-layout="chain"] .ai-dept__dnode::before {
  animation: aiDeptDraw 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 350ms);
}

@keyframes aiDeptDraw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* chain：接通的那一刻 pulse 一次（只一下，不连续闪） */
.ai-dept__diagram[data-layout="chain"] .ai-dept__dnode::before {
  background: rgba(255, 138, 77, 0.5);
}

.ai-dept__scene.is-in .ai-dept__diagram[data-layout="chain"] .ai-dept__dnode::before {
  animation: aiDeptDraw 320ms cubic-bezier(0.22, 1, 0.36, 1) both,
             aiDeptPulse 620ms ease both;
  animation-delay: var(--d, 350ms), calc(var(--d, 350ms) + 300ms);
}

@keyframes aiDeptPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 106, 36, 0); }
  45%      { box-shadow: 0 0 9px rgba(255, 106, 36, 0.9); }
}

/* ---- hub：中心「内容」节点 + 平台环绕，连线从中心向外绘制 ---- */
.ai-dept__diagram[data-layout="hub"] {
  width: 340px;
  height: 290px;
}

.ai-dept__hub-core,
.ai-dept__hub-leaf,
.ai-dept__spoke {
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 1;
}

.ai-dept__hub-core {
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border: 1px solid rgba(255, 106, 36, 0.5);
  border-radius: 50%;
  background: rgba(255, 106, 36, 0.1);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
}

.ai-dept__hub-leaf {
  transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y)));
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
  background: rgba(10, 8, 6, 0.6);
  font-size: 0.6rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}

.ai-dept__spoke {
  width: 112px;
  height: 1px;
  margin-top: -0.5px;
  transform-origin: 0 50%;
  transform: rotate(var(--a)) scaleX(1);
  background: linear-gradient(90deg, rgba(255, 138, 77, 0.5), rgba(255, 255, 255, 0.08));
}

/* 注意：hub 的中心节点 / 环绕节点靠 transform 定位，
   进入动画只能动 opacity —— 若给它们 aiDeptNode（会写 translateY），
   会把定位用的 translate 覆盖掉，五个平台全部塌到同一点。 */
.ai-dept__scene.is-in .ai-dept__hub-core,
.ai-dept__scene.is-in .ai-dept__hub-leaf {
  animation: aiDeptFade 340ms ease both;
  animation-delay: var(--d, 200ms);
}

@keyframes aiDeptFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ai-dept__scene.is-in .ai-dept__spoke {
  animation: aiDeptSpoke 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 250ms);
}

/* 保持 --a 的旋转量，只把 scaleX 从 0 拉到 1 */
@keyframes aiDeptSpoke {
  from { opacity: 0; transform: rotate(var(--a)) scaleX(0); }
  30%  { opacity: 1; }
  to   { opacity: 1; transform: rotate(var(--a)) scaleX(1); }
}

/* ---- tree：提出任务 → 向下分叉给 AI ---- */
.ai-dept__diagram[data-layout="tree"] {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ai-dept__tree-root {
  display: inline-flex;
  padding: 5px 12px;
  border: 1px solid rgba(255, 106, 36, 0.45);
  border-radius: var(--radius-full);
  background: rgba(255, 106, 36, 0.1);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  opacity: 1;
}

.ai-dept__tree-stem,
.ai-dept__tree-bar {
  display: block;
  background: rgba(255, 138, 77, 0.42);
  transform-origin: top center;
}

.ai-dept__tree-stem {
  width: 1px;
  height: 16px;
}

.ai-dept__tree-bar {
  width: 100%;
  height: 1px;
  transform-origin: center;
}

.ai-dept__tree-branches {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.ai-dept__tree-branches .ai-dept__dnode::before {
  display: none;
}

/* 每个分支向上连回横杠 */
.ai-dept__tree-branches .ai-dept__dnode::after {
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: 16px;
  transform: scaleY(0);
  transform-origin: bottom center;
  background: rgba(255, 138, 77, 0.42);
}

.ai-dept__scene.is-in .ai-dept__tree-root {
  animation: aiDeptNode 340ms ease both;
  animation-delay: var(--d, 150ms);
}

.ai-dept__scene.is-in .ai-dept__tree-stem {
  animation: aiDeptDrawY 220ms ease both;
  animation-delay: 260ms;
}

.ai-dept__scene.is-in .ai-dept__tree-bar {
  animation: aiDeptDraw 260ms ease both;
  animation-delay: 320ms;
}

.ai-dept__scene.is-in .ai-dept__tree-branches .ai-dept__dnode::after {
  animation: aiDeptDrawY 220ms ease both;
  animation-delay: var(--d, 350ms);
}

/* 教什么 → 怎么练 → 做出什么 */
.ai-dept__teach {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.ai-dept__teach-col {
  min-width: 0;
}

.ai-dept__teach-h {
  display: block;
  margin-bottom: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ai-orange);
}

.ai-dept__teach-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.ai-dept__teach-col li {
  position: relative;
  padding-left: 11px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  text-wrap: pretty;
}

.ai-dept__teach-col li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 138, 77, 0.7);
}

/* 覆盖层 5：底部状态条 ——「这一课，你会亲手做什么」 */
.ai-dept__scene-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 14px clamp(24px, 3.6%, 46px);
  background: linear-gradient(180deg, rgba(9, 7, 6, 0.5), rgba(9, 7, 6, 0.94));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  /* 容器本身不做进入动画（用 --out 做退出让位）；
     进入由里面的标题和步骤各自完成 */
  opacity: calc(1 - var(--out, 0));
}

.ai-dept__scene.is-in .ai-dept__foot-h {
  animation: aiDeptRise 380ms ease 300ms both;
}

.ai-dept__foot-h {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--ai-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ai-orange);
  white-space: nowrap;
}

.ai-dept__foot-h em {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
}

.ai-dept__steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-dept__step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.34);
}

.ai-dept__step i {
  font-family: var(--ai-mono);
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 700;
  color: rgba(255, 106, 36, 0.6);
}

/* 底部步骤依次点亮，与当幕节点同步 */
.ai-dept__scene.is-in .ai-dept__step {
  animation: aiDeptStep 340ms ease both;
  animation-delay: var(--d, 350ms);
}

@keyframes aiDeptStep {
  0%   { color: rgba(255, 255, 255, 0.2); }
  45%  { color: var(--ai-orange); }
  100% { color: rgba(255, 255, 255, 0.88); }
}

/* ================= 28f. AI 市场部实训路径 ================= */
.ai-dept__path {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 4px;
  margin-top: clamp(16px, 2.4vh, 26px);
  padding-top: clamp(14px, 2vh, 22px);
  border-top: 1px solid var(--ai-line-2);
}

.ai-dept__pnode {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 7px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

/* 节点之间的连接小段 */
.ai-dept__pnode::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--ai-line);
  transition: background 300ms ease;
}

.ai-dept__pnode:first-child::before {
  display: none;
}

.ai-dept__pnode-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  flex-shrink: 0;
  transition: background 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.ai-dept__pnode-label {
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.52);
  white-space: nowrap;
  transition: color 300ms ease;
}

.ai-dept__pnode:hover .ai-dept__pnode-label {
  color: var(--ai-ink);
}

.ai-dept__pnode:focus-visible {
  outline: 2px solid var(--ai-orange);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* 已经走过：弱亮 */
.ai-dept__pnode.is-done .ai-dept__pnode-dot {
  background: rgba(255, 106, 36, 0.52);
}

.ai-dept__pnode.is-done .ai-dept__pnode-label {
  color: rgba(255, 255, 255, 0.55);
}

.ai-dept__pnode.is-done::before {
  background: rgba(255, 106, 36, 0.3);
}

/* 当前节点：最亮 */
.ai-dept__pnode.is-cur .ai-dept__pnode-dot {
  background: var(--ai-orange);
  box-shadow: 0 0 12px rgba(255, 106, 36, 0.85);
  transform: scale(1.25);
}

.ai-dept__pnode.is-cur .ai-dept__pnode-label {
  color: #fff;
  font-weight: 700;
}

/* ================= 28f-2. 总结幕（第五幕之后，退场之前）=================
   复杂 HUD 退下，课堂真实照片留着，中央只留：
   「AI 市场部」→ 完整工作链依次点亮 → 结尾一句。 */
.ai-dept__summary {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vh, 22px);
  padding: clamp(28px, 4.6%, 54px);
  text-align: center;
  background: linear-gradient(180deg, rgba(9, 7, 6, 0.74), rgba(9, 7, 6, 0.88));
  opacity: 0;
  visibility: hidden;
  transition: opacity 520ms ease, visibility 0s linear 520ms;
}

.ai-dept__summary.is-on {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s, 0s;
}

/* 总结幕期间，五幕的模块内容、流程示意、底部状态一并退下 */
.ai-dept__scene.is-summary .ai-dept__scene-inner,
.ai-dept__scene.is-summary .ai-dept__diagram,
.ai-dept__scene.is-summary .ai-dept__scene-foot {
  opacity: 0;
}

.ai-dept__summary-eyebrow {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  opacity: 1;
}

.ai-dept__summary-sub {
  margin: 0;
  font-size: clamp(0.82rem, 1.3vw, 1rem);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.56);
  opacity: 1;
}

.ai-dept__summary.is-on .ai-dept__summary-eyebrow {
  animation: aiDeptRise 460ms cubic-bezier(0.22, 1, 0.36, 1) 60ms both;
}

.ai-dept__summary.is-on .ai-dept__summary-sub {
  animation: aiDeptRise 460ms cubic-bezier(0.22, 1, 0.36, 1) 140ms both;
}

/* 完整工作链：七个环节依次点亮 */
.ai-dept__summary-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 0;
  margin: clamp(6px, 1.4vh, 14px) 0 0;
  padding: 0;
  list-style: none;
  max-width: 900px;
}

.ai-dept__snode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  opacity: 1;
}

.ai-dept__snode::before {
  content: '';
  width: 22px;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
  transform-origin: left center;
}

.ai-dept__snode:first-child::before { display: none; }

.ai-dept__snode-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ai-orange);
  box-shadow: 0 0 9px rgba(255, 106, 36, 0.8);
  flex-shrink: 0;
}

.ai-dept__snode-label {
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}

.ai-dept__summary.is-on .ai-dept__snode {
  animation: aiDeptNode 380ms ease both;
  animation-delay: var(--d, 180ms);
}

.ai-dept__summary.is-on .ai-dept__snode::before {
  animation: aiDeptDraw 300ms ease both;
  animation-delay: var(--d, 180ms);
}

/* 结尾价值表达（只在总结幕出现） */
.ai-dept__claim {
  margin: clamp(10px, 2vh, 20px) 0 0;
  text-align: center;
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
  opacity: 1;
}

.ai-dept__summary.is-on .ai-dept__claim {
  animation: aiDeptRise 520ms cubic-bezier(0.22, 1, 0.36, 1) 900ms both;
}

/* ================= 28g. 落地 4 卡 ================= */
.ai-dept__fields-wrap {
  padding: clamp(28px, 4vh, 52px) 0 clamp(44px, 6vh, 76px);
  background: var(--color-gray-50);
}

.ai-dept__fields {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.ai-dept__field {
  position: relative;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.66));
  border: 1px solid rgba(30, 27, 24, 0.08);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.ai-dept__field-tag {
  align-self: flex-start;
  font-family: var(--ai-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  background: var(--color-brand-light);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  margin-bottom: 12px;
}

.ai-dept__field-title {
  margin: 0 0 8px;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--color-gray-900);
}

.ai-dept__field-desc {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-gray-600);
}

/* 有照片：全图展示 + 底部渐变遮罩 */
.ai-dept__field.has-photo {
  justify-content: flex-end;
  background: #1A1613;
}

.ai-dept__field.has-photo .ai-dept__field-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.ai-dept__field.has-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10, 8, 6, 0.72) 100%);
  z-index: 0;
}

.ai-dept__field.has-photo .ai-dept__field-tag,
.ai-dept__field.has-photo .ai-dept__field-title,
.ai-dept__field.has-photo .ai-dept__field-desc {
  position: relative;
  z-index: 1;
  color: var(--color-white);
}

.ai-dept__field.has-photo .ai-dept__field-tag {
  background: rgba(255, 255, 255, 0.16);
  color: #FFC7A8;
}

/* ================= 28h. 平板：导航换行、场景改为竖排 ================= */
@media (max-width: 1100px) {
  .ai-dept__body {
    grid-template-columns: 1fr;
  }

  .ai-dept__rail {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }

  .ai-dept__rail::after {
    display: none;
  }

  .ai-dept__nav {
    flex: 0 0 auto;
    width: auto;
    border-radius: var(--radius-full);
    border-left-width: 1px;
    padding: 9px 13px;
    gap: 8px;
  }

  .ai-dept__nav:hover {
    transform: translateY(-2px);
  }

  .ai-dept__nav.is-active {
    border-left-color: rgba(232, 85, 26, 0.34);
    border-color: rgba(232, 85, 26, 0.34);
    border-radius: var(--radius-full);
    background: linear-gradient(180deg, rgba(255, 106, 36, 0.16), rgba(255, 106, 36, 0.06));
  }

  .ai-dept__nav-state {
    display: none;
  }

  /* 平板：导航换到场景上方，文本块可以宽一点 */
  .ai-dept__scene-left {
    width: min(52%, 460px);
  }

  .ai-dept__diagram {
    bottom: 70px;
  }
}

/* ================= 28i. 移动端（≤768px）：不硬复制桌面交互 =================
   关闭 mouse parallax / 复杂 HUD 连线 / 重 blur；照片在上、内容在下、
   五模块纵向排布，优先保证「AI 市场部 / 真实课堂 / 学什么 / 怎么实操」可读。 */
@media (max-width: 768px) {
  /* 不做 520vh sticky：移动端退回「点击 / 滑动切换五幕」，
     桌面那套滚动叙事（含舞台升降、逐幕退出让位）整段关闭。 */
  .ai-dept__track {
    height: auto;
  }

  .ai-dept__sticky {
    position: static;
    height: auto;
    overflow: visible;
    display: block;
    padding-top: 0;
  }

  /* 静态降级下 sticky 不再定位，深色底会变成覆盖整段轨道的浮层 —— 关掉 */
  .ai-dept__sticky::before { content: none; }

  .ai-dept__stage {
    transform: none;
    opacity: 1;
    padding: 22px 0 26px;
    will-change: auto;
  }

  .ai-dept__stage > .ai-dept__wrap {
    display: block;
  }

  .ai-dept__intro {
    padding: var(--space-2xl) var(--space-md) var(--space-lg);
    transform: none;
    opacity: 1;
  }

  .ai-dept__intro-bg {
    font-size: clamp(3rem, 22vw, 6rem);
    opacity: 0.6;
  }

  .ai-dept__intro-title {
    font-size: clamp(2.1rem, 10vw, 2.9rem);
  }

  .ai-dept__keywords {
    margin-top: 22px;
    padding: 12px 0;
  }

  .ai-dept__keywords li {
    padding: 6px 12px;
    font-size: 0.78rem;
  }

  .ai-dept__keywords li + li {
    border-left: 0;
  }

  .ai-dept__stage {
    padding: 22px 0 26px;
  }

  .ai-dept__topbar {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
  }

  .ai-dept__badge {
    font-size: 0.58rem;
    padding: 4px 9px;
  }

  /* 五模块：纵向卡片选择，不做横向滑动（避免与页面横向手势冲突） */
  .ai-dept__rail {
    flex-direction: column;
    gap: 6px;
  }

  .ai-dept__nav {
    width: 100%;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    border-left-width: 2px;
    padding: 11px 13px;
  }

  .ai-dept__nav.is-active {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: linear-gradient(90deg, rgba(255, 106, 36, 0.14), transparent 78%);
  }

  .ai-dept__scene {
    min-height: 560px;
  }

  /* 照片在上、内容在下 */
  .ai-dept__scrim {
    background:
      linear-gradient(180deg, rgba(9, 7, 6, 0.30) 0%, rgba(9, 7, 6, 0.55) 34%,
                      rgba(9, 7, 6, 0.88) 52%, rgba(9, 7, 6, 0.95) 100%);
  }

  .ai-dept__scrim::after {
    display: none;                    /* 关掉网格纹理 */
  }

  .ai-dept__hud-corner {
    width: 12px;
    height: 12px;
  }

  .ai-dept__hud-corner--tl { top: 10px; left: 10px; }
  .ai-dept__hud-corner--tr { top: 10px; right: 10px; }
  .ai-dept__hud-corner--bl { bottom: 10px; left: 10px; }
  .ai-dept__hud-corner--br { bottom: 10px; right: 10px; }

  .ai-dept__hud-num {
    font-size: 2.2rem;
    right: 12px;
    bottom: 8px;
  }

  /* 照片在上、内容在下：文本块改为整宽、从照片下方开始。
     左右内边距比桌面大一些，避免文字贴边。 */
  .ai-dept__scene-inner {
    align-items: flex-start;
    padding: 30vh 22px 104px;
  }

  .ai-dept__scene-left {
    width: 100%;
  }

  /* 流程示意：不保留桌面的绝对定位构图，改为跟着正文流的标签行，
     放在「教什么 · 怎么练 · 做出什么」下面（由 JS 移进左栏）。 */
  .ai-dept__diagram {
    position: static;
    right: auto;
    bottom: auto;
    width: auto;
    height: auto;
    margin-top: 14px;
    opacity: 1;
    transform: none;
  }

  .ai-dept__diagram[data-layout="col"],
  .ai-dept__diagram[data-layout="row"],
  .ai-dept__diagram[data-layout="chain"],
  .ai-dept__diagram[data-layout="tree"] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px 8px;
  }

  .ai-dept__diagram[data-layout="hub"] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
  }

  .ai-dept__diagram[data-layout="row"] .ai-dept__dnode + .ai-dept__dnode,
  .ai-dept__diagram[data-layout="chain"] .ai-dept__dnode + .ai-dept__dnode {
    margin-left: 0;
  }

  /* 移动端关掉所有连线 / 放射线 / 树形结构——只留可读的节点标签 */
  .ai-dept__diagram .ai-dept__dnode::before,
  .ai-dept__diagram .ai-dept__dnode::after,
  .ai-dept__diagram .ai-dept__spoke,
  .ai-dept__diagram .ai-dept__tree-stem,
  .ai-dept__diagram .ai-dept__tree-bar { display: none; }

  .ai-dept__diagram .ai-dept__hub-core,
  .ai-dept__diagram .ai-dept__hub-leaf,
  .ai-dept__diagram .ai-dept__tree-root,
  .ai-dept__diagram .ai-dept__dnode {
    position: static;
    transform: none;
    opacity: 1;
    animation: none;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-full);
    padding: 4px 10px;
    width: auto;
    height: auto;
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.78);
  }

  .ai-dept__diagram .ai-dept__tree-branches {
    display: contents;
  }

  .ai-dept__teach {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ai-dept__scene-foot {
    padding: 12px 18px;
    gap: 8px 14px;
  }

  .ai-dept__foot-h {
    padding-right: 0;
    border-right: 0;
  }

  .ai-dept__steps {
    gap: 5px 12px;
  }

  .ai-dept__path {
    justify-content: flex-start;
    gap: 4px 2px;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .ai-dept__pnode::before {
    width: 12px;
  }

  .ai-dept__pnode-label {
    font-size: 0.72rem;
  }

  .ai-dept__fields {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .ai-dept__field {
    min-height: 180px;
    padding: 18px;
  }

  /* 小卡上文字块更高（tag 顶约 y=29），原 40% 起点处遮罩为 0，白字压在亮图上。
     线性斜坡即使起点前移到 0%，y=29 处 alpha 也仅 0.12（数学上限），故加一个
     中间停靠点，让遮罩在文字块顶部就达到可读强度；末端仍为 0.72。桌面端不生效。 */
  .ai-dept__field.has-photo::after {
    background: linear-gradient(
      180deg,
      transparent 5%,
      rgba(10, 8, 6, 0.52) 22%,
      rgba(10, 8, 6, 0.72) 100%
    );
  }

  .ai-dept__field-title { font-size: 1.1rem; }
  .ai-dept__field-desc  { font-size: 0.84rem; }
}

/* ================= 28j. reduced-motion：全部动画关闭，内容完整可见 =================
   不做滚动叙事（JS 同时会切到点击模式），直接显示稳定完整状态。 */
@media (prefers-reduced-motion: reduce) {
  /* 轨道降级：与移动端同样的静态结构 */
  .ai-dept__track {
    height: auto;
  }

  .ai-dept__sticky {
    position: static;
    height: auto;
    overflow: visible;
    display: block;
    padding-top: 0;
    background: none;
  }

  .ai-dept__sticky::before { content: none; }

  .ai-dept__stage {
    transform: none;
    opacity: 1;
    will-change: auto;
  }

  .ai-dept__stage > .ai-dept__wrap {
    display: block;
  }

  .ai-dept__intro {
    transform: none;
    opacity: 1;
  }

  .ai-dept__scene {
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .ai-dept__shot-img,
  .ai-dept__nav,
  .ai-dept__nav-scan,
  .ai-dept__pnode-dot,
  .ai-dept__pnode-label,
  .ai-dept__pnode::before,
  .ai-dept__summary {
    transition: none;
  }

  .ai-dept__nav:hover {
    transform: none;
  }

  .ai-dept__nav:hover .ai-dept__nav-scan,
  .ai-dept__scan.is-run,
  .ai-dept__intro.is-on .ai-dept__intro-tag,
  .ai-dept__intro.is-on .ai-dept__intro-title,
  .ai-dept__intro.is-on .ai-dept__intro-sub,
  .ai-dept__intro.is-on .ai-dept__intro-bg,
  .ai-dept__intro.is-on .ai-dept__keywords li,
  .ai-dept__intro.is-on .ai-dept__intro-note,
  .ai-dept__scene.is-in .ai-dept__scene-tag,
  .ai-dept__scene.is-in .ai-dept__hudcards,
  .ai-dept__scene.is-in .ai-dept__scene-title,
  .ai-dept__scene.is-in .ai-dept__teach-col,
  .ai-dept__scene.is-in .ai-dept__hud-corner,
  .ai-dept__scene.is-in .ai-dept__dnode,
  .ai-dept__scene.is-in .ai-dept__diagram .ai-dept__dnode::before,
  .ai-dept__scene.is-in .ai-dept__diagram .ai-dept__dnode::after,
  .ai-dept__scene.is-in .ai-dept__hub-core,
  .ai-dept__scene.is-in .ai-dept__hub-leaf,
  .ai-dept__scene.is-in .ai-dept__spoke,
  .ai-dept__scene.is-in .ai-dept__tree-root,
  .ai-dept__scene.is-in .ai-dept__tree-stem,
  .ai-dept__scene.is-in .ai-dept__tree-bar,
  .ai-dept__scene.is-in .ai-dept__foot-h,
  .ai-dept__scene.is-in .ai-dept__step,
  .ai-dept__summary.is-on .ai-dept__summary-eyebrow,
  .ai-dept__summary.is-on .ai-dept__summary-sub,
  .ai-dept__summary.is-on .ai-dept__snode,
  .ai-dept__summary.is-on .ai-dept__snode::before,
  .ai-dept__summary.is-on .ai-dept__claim {
    animation: none;
  }

  .ai-dept__scan { display: none; }

  /* 动画关闭后必须直接可见，不能停留在 opacity:0 */
  .ai-dept__scene-inner,
  .ai-dept__diagram,
  .ai-dept__scene-foot,
  .ai-dept__hud,
  .ai-dept__hud-corner,
  .ai-dept__intro-tag,
  .ai-dept__intro-title,
  .ai-dept__intro-sub,
  .ai-dept__intro-note,
  .ai-dept__intro .ai-dept__keywords li,
  .ai-dept__scene-tag,
  .ai-dept__scene-title,
  .ai-dept__hudcards,
  .ai-dept__teach-col,
  .ai-dept__dnode,
  .ai-dept__hub-core,
  .ai-dept__hub-leaf,
  .ai-dept__tree-root,
  .ai-dept__step,
  .ai-dept__foot-h,
  .ai-dept__summary-eyebrow,
  .ai-dept__summary-sub,
  .ai-dept__snode,
  .ai-dept__claim {
    opacity: 1;
  }

  /* 连线 / 描边直接到位，不做绘制过程 */
  .ai-dept__diagram .ai-dept__dnode::before,
  .ai-dept__diagram .ai-dept__dnode::after {
    transform: none;
  }

  .ai-dept__diagram .ai-dept__spoke {
    opacity: 1;
    transform: rotate(var(--a)) scaleX(1);
  }

  .ai-dept__tree-stem,
  .ai-dept__tree-bar {
    transform: none;
  }

  .ai-dept__snode::before {
    transform: scaleX(1);
  }
}

/* ---- 旧「工作台·作战室」规则已由上面的新结构取代，整段移除 ---- */

/* ============================================================
   31. 全球获客系统 — 独立站定制 → 海外广告推广 → 主动获客软件
   单轨道连续滚动叙事。命名空间 acq-*，与区块 28（ai-dept-*）互不污染。
   ============================================================ */

/* ---- 31a. 轨道与舞台 ---- */
.acq {
  position: relative;
  background: var(--color-gray-50);
}

.acq__track {
  position: relative;
  /* 总轨道 917vh = 156vh 建站 + 186vh Website Showcase + 10vh 呼吸
     + 205vh 第二幕 + 260vh 第三幕，可滚动 817vh。
     改这里必须同步 js/acquisition-system.js 的 PHYS：
     两边互为兜底，不同步只会让整体节奏等比缩放，不会算崩。 */
  height: 917vh;
}

/* 全站唯一的 #cases 锚点：落在轨道内「展示段起点」= 建站 156vh 处。
   绝对定位，不参与轨道布局。降级（轨道变静态）时由媒体查询压回 0。 */
.acq__anchor {
  position: absolute;
  left: 0;
  top: 156vh;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.acq__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--acq-bg, #13100D);   /* 唯一背景色，由 JS 连续插值 */
  isolation: isolate;
}

.acq__stage {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* ---- 主体对象：唯一全局姿态容器，只有 AcqTransition 写它的变量 ---- */
.acq__obj {
  position: absolute;
  left: var(--obj-x, 50%);
  top: var(--obj-y, 50%);
  width: 0;
  height: 0;              /* 零尺寸锚点，内部图层各自绝对定位向外展开 */
  transform:
    translate(-50%, -50%)
    scale(var(--obj-s, 1))
    rotate(var(--obj-r, 0deg));
  transform-origin: 50% 50%;
  will-change: transform;
}

/* ---- 三个图层：各自淡入淡出与内部缩放，由各自 scene 模块写 ---- */
.acq__lyr {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%) scale(var(--lyr-s, 1));
  opacity: var(--lyr-o, 0);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.acq__lyr-site,
.acq__lyr-ads,
.acq__lyr-leads { visibility: hidden; }          /* 默认不占位 */
.acq__lyr-site.is-on,
.acq__lyr-ads.is-on,
.acq__lyr-leads.is-on { visibility: visible; }

/* ---- 光晕层：橙是光，不是底 ---- */
.acq__glow {
  position: absolute;
  inset: -25%;
  z-index: 1;
  pointer-events: none;
  opacity: var(--go, 0);
  will-change: transform, opacity;
}
.acq__glow--1 {
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%),
              rgba(232, 85, 26, 0.55) 0%, rgba(232, 85, 26, 0) 62%);
}
.acq__glow--2 {
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%),
              rgba(255, 156, 74, 0.38) 0%, rgba(255, 156, 74, 0) 55%);
}
.acq__glow--3 {
  background: radial-gradient(circle at 50% 60%,
              rgba(255, 236, 214, 0.85) 0%, rgba(255, 236, 214, 0) 70%);
}

/* ---- 全局 HUD（叠加层）：四角描线 + 右下 DEMO + 底部三幕进度条 ----
   纯叠加：absolute + pointer-events:none，不参与布局，不碰 .acq__obj / .acq__lyr。 */
.acq__hud {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  color: var(--acq-ink, #F5F0EA);
}
.acq__hud-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 0 solid var(--acq-ink, #F5F0EA);
  opacity: 0.35;
}
.acq__hud-corner--tl { top: 18px; left: 18px;   border-top-width: 1.5px;  border-left-width: 1.5px; }
.acq__hud-corner--tr { top: 18px; right: 18px;  border-top-width: 1.5px;  border-right-width: 1.5px; }
.acq__hud-corner--bl { bottom: 18px; left: 18px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.acq__hud-corner--br { bottom: 18px; right: 18px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.acq__hud-demo {
  position: absolute;
  right: 52px;
  bottom: 22px;
  padding: 3px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  opacity: 0.5;
}
.acq__hud-progress {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.acq__hud-seg {
  width: 44px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.22;
  transition: opacity 0.35s ease, background 0.35s ease;
}
.acq__sticky[data-act="site"]  .acq__hud-seg--site,
.acq__sticky[data-act="ads"]   .acq__hud-seg--ads,
.acq__sticky[data-act="leads"] .acq__hud-seg--leads {
  opacity: 1;
  background: #FFB36B;
}

/* ---- 光点粒子 Canvas ---- */
.acq__canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: var(--cnv-o, 0);
}

/* ---- 31d. 降级：≤768px 与 reduced-motion 下轨道变静态 ---- */
@media (max-width: 768px) {
  .acq__track { height: auto; }
  .acq__sticky { position: static; height: auto; overflow: visible; }
  .acq__stage { position: static; }
  .acq__obj { position: static; width: auto; height: auto; transform: none; }
  .acq__lyr { position: static; transform: none; opacity: 1; visibility: visible; }
  .acq__glow, .acq__canvas { display: none; }

  /* Task 6 C2：≤768px 横向溢出硬性兼容 —— 仅约束容器宽度 + 裁剪内部绝对定位，
     不调整字号/间距/层级/配色，不重排三幕视觉设计。 */
  .acq__lyr.acq__lyr-site,
  .acq__lyr.acq__lyr-ads,
  .acq__lyr.acq__lyr-leads {
    width: 100%;
    overflow-x: hidden;
  }

  /* height:auto 只给 site 层，且必须写成双类名 —— 不能写在 `.acq__lyr` 上，
     也不能套给 ads / leads。
     ① 双类名：`.acq__lyr-site` 自带设计画布高度 620px，其定义在本媒体查询之后，
        与 `.acq__lyr` 同为 (0,1,0) 特异性，写在单类名上会被后者覆盖。
     ② 只给 site：降级块把 `.acq-site__box` 改成 position:static（它自己 height:auto），
        展示区内容因此回到普通流，site 层必须 height:auto 才包得住。若沿用 620px，
        实测 375 下内容高 1981px 会撑破父级；父级只有 overflow-x:hidden，纵向溢出可见，
        DOM 顺序靠后的第二、三幕图层就整块盖在展示区上 —— 展示区在降级模式下完全不可见。
     ③ ads / leads 不能跟着改成 auto：它们的子元素在降级下仍是绝对定位，
        图层内没有普通流内容，height:auto 会让图层塌成 0 高（实测 780→0 / 580→0），
        第二、三幕直接消失。它们的设计高度本来就是对的，保持不动。 */
  .acq__lyr.acq__lyr-site { height: auto; }
  .acq__hud { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .acq__track { height: auto; }
  .acq__sticky { position: static; height: auto; overflow: visible; }
  .acq__stage { position: static; }
  .acq__obj { position: static; width: auto; height: auto; transform: none; }
  .acq__lyr { position: static; transform: none; opacity: 1; visibility: visible; }
  /* 宽度复位：本块不复用 31d 的宽度规则，三个图层会各自保持 960 / 1220 / 1000
     的设计宽度，静态堆叠时右边缘参差且可能外溢，统一交给容器宽度。 */
  .acq__lyr.acq__lyr-site,
  .acq__lyr.acq__lyr-ads,
  .acq__lyr.acq__lyr-leads {
    width: 100%;
    overflow-x: hidden;
  }
  /* 与 ≤768px 同因：只取消 site 层的固定画布高度，否则第一幕展示区被后两幕盖住。
     ads / leads 不可跟着改，否则图层塌成 0 高（见 31d 内说明）。 */
  .acq__lyr.acq__lyr-site { height: auto; }
  .acq__glow, .acq__canvas { display: none; }
  .acq__hud { display: none; }
}


/* ---- 31b. 第一幕：独立站定制 ---- */
.acq__lyr-site {
  width: 960px;
  height: 620px;
  /* 展示幕放大（路线①）：morph 阶段把整个浏览器 —— 线框外框与真实截图 —— 一起
     左移上移。位移与 --show-ho 同源，两件东西永远同框，不会一个先动一个后动。
     --show-ho 由 JS 写在 .acq-show 与本图层上（本图层负责让 .acq-site__box 也继承到）。 */
  --show-dx: -444.8px;
  --show-dy: -45.5px;
}

/* 线框与真实网站共用一个盒子：末端整个盒子下沉 --site-drop，
   补掉外框从 618 收到 432 带来的构图偏移，视觉中心不动。 */
.acq-site__box {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(960px + 364px * var(--show-ho, 0));    /* → 1324 */
  height: calc(620px + 17px * var(--show-ho, 0));    /* → 637 */
  /* 外框形状由 JS 直接改 rect 的 width/height 与 svg 的 viewBox；
     这里只负责与 .acq-show 同步位移，保证线框与截图不错位。 */
  transform: translateY(var(--site-drop, 0px))
             translate(calc(var(--show-dx, 0px) * var(--show-ho, 0)),
                       calc(var(--show-dy, 0px) * var(--show-ho, 0)));
}

.acq-site__svg { overflow: visible; }
.acq-site__stroke {
  stroke: rgba(245, 240, 234, 0.55);
  stroke-width: 1.5;
  transition: stroke 0.3s linear;
}
.acq-site__mobile { opacity: 0; }
.acq-site__mobile-frame { stroke: rgba(232, 85, 26, 0.75); }

/* 屏幕内的页面结构（导航 / hero / 内容块 / 页脚）。
   末端「线框 → 真实网站」时只淡出这一组，外框与地址栏保留。 */
.acq-site__body { opacity: var(--wire-o, 1); }

.acq-site__steps {
  position: absolute;
  left: -300px;
  top: 0;
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: right;
  opacity: var(--steps-o, 1);
}
.acq-site__step { opacity: 0.22; transition: opacity 0.45s ease; }
.acq-site__step.is-lit { opacity: 1; }
.acq-site__step-k {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--acq-ink, #F5F0EA);
  letter-spacing: 0.04em;
}
.acq-site__step-d {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--acq-ink, #F5F0EA);
  opacity: 0.62;
}

/* ---- 31b-show. 第一幕末端：Website Showcase ----
   Browser 外框与地址栏仍由上面的 SVG 绘制；这里只管屏幕内容、域名、
   结构说明与右侧导航。切换只用 opacity / transform / filter，不触发布局。 */
.acq-show {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(960px + 364px * var(--show-ho, 0));    /* → 1324 展示幕 */
  height: calc(620px + 17px * var(--show-ho, 0));    /* → 637 展示幕 */
  pointer-events: none;
  /* 不做 transform：.acq-show 是 .acq-site__box 的子节点，
     下沉与展示幕位移都由父节点一处施加，这里再来一次会叠加成两倍。 */
}

/* 地址栏域名：与 wireframe 的三个圆点同排 */
.acq-show__url {
  position: absolute;
  left: 108px;
  top: 0;
  height: 53px;
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--acq-ink, #F5F0EA);
  opacity: calc(var(--show-url-o, 0) * 0.72);
}

/* 屏幕区：与外框内缘对齐。真实网站只出现在这个范围内。 */
.acq-show__screen {
  position: absolute;
  left: 2px;
  top: 54px;
  /* 宽高随外框一起长：956x564 → 1320x582。外框底边 = 屏幕底边，过渡中不留空带。
     白底不写在这里 —— 屏幕自身没有门控，建站阶段会盖住线框。 */
  width: calc(956px + 364px * var(--show-ho, 0));
  height: calc(582px - 18px * (1 - var(--show-ho, 0)));
  border-radius: 0 0 13px 13px;
  overflow: hidden;
}

.acq-show__item {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #FFFFFF;
  opacity: var(--sh-o, 0);
  transform: scale(var(--sh-s, 1));
  filter: blur(var(--sh-b, 0px));
  /* 逐帧切换时只有当前项可见，其余四项 opacity 为 0 —— 但它们仍在 DOM 里，
     里面的「访问官网」链接依然会被 Tab 命中，焦点环落在看不见的地方。
     用 --sh-vis 与 --sh-o 同步门控整项：o≈0 时 visibility:hidden，
     既撤出 Tab 序，也撤出辅助技术。降级块把它整体复位为 visible（见 7008 附近）。 */
  visibility: var(--sh-vis, visible);
  will-change: opacity, transform, filter;
}
/* 用 cover 而不是 height:auto 被 overflow 硬切：截图比例与屏幕比例不一致时，
   height:auto 只能从底边切，比例偏宽的素材（OPACK）会反过来要求横向裁切，
   把左右两端的导航一起切掉。cover 只做等比放大 + 纵向对齐，横向永不裁。
   每站的取景位置由数据源的 objectPosition 决定，这里只给默认值。 */
.acq-show__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  will-change: transform, object-position;
}

/* 官网入口：信息轨末尾的一枚小胶囊（不再是浮在截图上的贴片）。
   放大到 1320x582 后，原来压在截图右下角的胶囊正好盖住网站内容，
   读起来像外部控件；移进轨道后既让开画面，也不影响展示层构图。
   .acq-show 整体是 pointer-events:none（避免挡住滚动叙事的命中），
   所以指针事件必须在这里单独收回来，否则鼠标点不动。 */
.acq-show__cta {
  align-self: flex-start;
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  color: #F5F0EA;
  background: rgba(19, 16, 13, 0.78);
  border: 1px solid rgba(245, 240, 234, 0.26);
  pointer-events: auto;
  /* 只让当前项的胶囊可命中（见 applyIndex 内的说明）；降级块整体复位 */
  visibility: var(--sh-cta, visible);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background-color 160ms ease, border-color 160ms ease;
}
.acq-show__cta:hover {
  background: rgba(19, 16, 13, 0.94);
  border-color: rgba(245, 240, 234, 0.55);
}
/* 键盘焦点必须看得见：深色底会把浏览器默认焦点环压掉，这里换成站点主橙 */
.acq-show__cta:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  background: rgba(19, 16, 13, 0.94);
}
.acq-show__cta-arrow { font-size: 11px; }

/* 待核验素材：与线框同一套语言的骨架，不写字、不伪造 Logo、不伪造截图 */
.acq-show__item.is-pending {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px;
  /* 用舞台底色而不是屏幕的白色：骨架描边与线框同色（浅色），
     放在白底上等于看不见。取 --acq-bg 让这一格读作「屏幕还是空的」。 */
  background: var(--acq-bg, #13100D);
}
.acq-show__ph-ph,
.acq-show__ph-hero,
.acq-show__ph-row i {
  display: block;
  border: 1.5px solid rgba(245, 240, 234, 0.38);
  border-radius: 8px;
}
.acq-show__ph-ph { width: 62%; height: 26px; }
.acq-show__ph-hero { height: 116px; }
.acq-show__ph-row { display: flex; gap: 14px; }
.acq-show__ph-row i { flex: 1; height: 70px; }

/* 结构说明：Browser 下方居中。中性表达，只描述网站自身。 */
.acq-show__note {
  position: absolute;
  left: 0;
  top: calc(457px + 202px * var(--show-ho, 0));      /* → 659：落到浏览器下方 */
  width: calc(960px + 364px * var(--show-ho, 0));    /* → 1324：与浏览器等宽 */
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  opacity: var(--show-note-o, 0);
}
.acq-show__note-k {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--acq-ink, #F5F0EA);
  opacity: 0.5;
}
.acq-show__note-v {
  font-size: 14px;
  color: var(--acq-ink, #F5F0EA);
  opacity: 0.92;
}

/* 右侧 Website Navigator：条目数 = WEBSITE_SHOWCASE.length，序号自动生成 */
.acq-show__nav {
  position: absolute;
  left: calc(1006px + 354px * var(--show-ho, 0));    /* → 1360 */
  top: calc(176px - 176px * var(--show-ho, 0));      /* → 0：与浏览器顶边齐平 */
  width: calc(214px - 14px * var(--show-ho, 0));     /* → 200 窄信息轨 */
  height: calc(257px + 378px * var(--show-ho, 0));   /* → 635 与浏览器等高 */
  display: flex;
  flex-direction: column;
  opacity: var(--show-nav-o, 0);
}
.acq-show__nav-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(245, 240, 234, 0.22);
}
.acq-show__nav-title,
.acq-show__nav-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--acq-ink, #F5F0EA);
}
.acq-show__nav-title { letter-spacing: 0.18em; opacity: 0.62; }
.acq-show__nav-count { letter-spacing: 0.08em; opacity: 0.5; }
.acq-show__nav-count i { font-style: normal; margin: 0 3px; opacity: 0.55; }
.acq-show__nav-no { font-weight: 700; color: #FFB36B; }

.acq-show__nav-name {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--acq-ink, #F5F0EA);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acq-show__nav-ind {
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--acq-ink, #F5F0EA);
  opacity: 0.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 展示幕下信息轨拉高到与浏览器等高；把条目推到轨底，
   中间留白，避免四条挤在顶部、下面空一大截。 */
.acq-show__nav-list {
  margin-top: auto;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.acq-show__nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.34;
  transition: opacity 0.35s ease;
}
.acq-show__nav-item.is-on { opacity: 1; }
.acq-show__nav-item-no {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--acq-ink, #F5F0EA);
}
.acq-show__nav-item-bar {
  flex: 1;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  color: var(--acq-ink, #F5F0EA);
  opacity: 0.18;
  overflow: hidden;
}
.acq-show__nav-item-bar i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: #FFB36B;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s ease;
}
.acq-show__nav-item.is-on .acq-show__nav-item-bar { opacity: 1; }
.acq-show__nav-item.is-on .acq-show__nav-item-bar i { transform: scaleX(1); }

/* ---- 降级：≤768px 与 reduced-motion 下 Website Showcase 的静态呈现 ----
   逐帧切换在这里没有意义（轨道不可滚动），改为把展示项按流式排开、全部可读。
   同时取消盒子的下沉位移与外框收缩，保证不会出现横向滚动。 */
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
  .acq-site__box {
    position: static;
    width: auto;
    height: auto;
    transform: none;
    /* 同一降级块里的第三幕 .acq-leads__dash 有 26px 内边距，第一幕却一路顶到
       x=0 / x=clientWidth（768 实测 L=0 R=753，375 实测 L=0 R=360），
       整段展示内容与屏幕左右边缘零留白，看起来就是"被页面裁掉一截"。
       补上与第三幕一致的 26px，让三幕在降级态下对齐。 */
    padding: 0 26px;
  }
  /* 浏览器外框 SVG 的 viewBox 是 960×620 且与元素尺寸 1:1（JS 每帧同步），
     宽度恒为 960px；768 只能放下 753px、375 只能放下 360px，外框被从中途切断 ——
     像素剖面实测最右内容列仍有 43% 行有内容，且有多条横线在右缘硬切。
     降级态不再需要"框内叠内容"（.acq-show 已改为流式），直接等比缩到容器宽度，
     让整个浏览器线框完整可见。 */
  .acq-site__svg {
    max-width: 100%;
    height: auto;
    /* 注意：这里不要加 overflow:hidden。viewBox 之外还有一组画在 user 单位
       x=1006–1220 的 .acq-site__mobile（手机线框），是 JS 在"建站"段末 22% 用
       opacity = ext*(1-ho) 主动淡入的设计元素（acquisition-system.js:432）——
       裁掉它等于删掉一个动效。缩放后它落在 917px（768 视口），仍由 #acq 自然裁边，
       与桌面 1:1 时的表现一致。 */
  }
  .acq__anchor { top: 0; }

  /* 降级时展示区并不落在浅底上：#acq 自身是浅色，但 .acq__sticky 是不透明的
     rgb(19,16,13)，在降级态变 static 后铺满整段，把 #acq 的计算值整个盖住。
     本块此前把 --acq-ink 覆盖成 --color-gray-900，那是从旧 #cases 白卡上下文
     搬过来的 —— 白卡随旧版块一起删了，深墨字却留了下来，实测深墨落在深色舞台上
     只有约 1.03:1，展示区文字几乎不可读。
     现在不覆盖 --acq-ink，让展示区继承默认浅米色 #F5F0EA，与同一舞台上的
     第二、三幕一致（约 16.7:1）。不要在这里重新引入深墨字 —— 除非同时给展示区
     一个真实存在的浅色底板（参考第三幕 .acq-leads__dash 的白面板做法）。 */
  .acq-show {
    position: static;
    width: 100%;
    height: auto;
  }

  /* .acq-site__steps 是挂在 .acq-site__box 左侧外面的注释栏（left:-300px / 宽 260px）。
     上一条把 box 改成 position:static 之后，它失去定位基准，整条落到视口外：
     768 与 375 逐点实测（p=0/0.25/0.5/0.75/1）恒为 L=-300 / R=-40 / 屏内 0%，
     而 opacity 一直是 1 —— 三条步骤「需求梳理 / 架构规划 / UI」既没显示也没被
     藏起来，属于静默丢内容。本降级块的要求本就是「把展示项按流式排开、全部可读」，
     这里补上漏掉的一条。 */
  .acq-site__steps {
    position: static;
    left: auto;
    width: auto;
    text-align: left;
    margin-top: var(--space-md);
  }
  .acq-show__ph-ph,
  .acq-show__ph-hero,
  .acq-show__ph-row i { border-color: var(--color-gray-300); }
  .acq-show__item.is-pending { background: var(--color-gray-50); }
  .acq-show__nav-no { color: var(--color-accent); }
  .acq-show__nav-item-bar i { background: var(--color-accent); }
  .acq-show__nav-item-bar { opacity: 0.35; }
  .acq-show__url { display: none; }

  .acq-show__screen {
    position: static;
    width: 100%;
    height: auto;
    border-radius: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .acq-show__item {
    /* 用 relative 而不是 static：两者在普通流里表现一致（本块也没有 top/left 偏移），
       但 relative 会给里面的「访问官网」胶囊一个定位参照，胶囊继续贴在各自截图右下角。
       骨架预览里没有任何绝对定位元素，改成 relative 不会让它们重新锚定。 */
    position: relative;
    opacity: 1;
    /* 静态堆叠时五项全部可读，逐项门控必须整体复位，否则桌面缩窗过来会残留
       update() 写下的 visibility:hidden，把后面几项连同链接一起藏掉。 */
    visibility: visible;
    transform: none;
    filter: none;
    border-radius: 8px;
  }
  /* 降级下不做逐帧切换，五项都在，五个入口都应可达（覆盖 applyIndex 写的 --sh-cta） */
  .acq-show__cta {
    visibility: visible;
    right: 12px;
    bottom: 12px;
  }
  .acq-show__img { transform: none !important; }
  .acq-show__item.is-pending { height: 260px; }

  .acq-show__note {
    position: static;
    width: auto;
    margin-top: 16px;
    opacity: 1;
  }
  .acq-show__nav {
    position: static;
    width: auto;
    height: auto;
    margin-top: 20px;
    opacity: 1;
  }
}

/* ---- 31b-ads. 第二幕：海外广告推广（素材飞入全球网络） ---- */
.acq__lyr-ads { width: 1220px; height: 780px; }

/* 广告素材卡（随 --card-o 淡入） */
.acq-ads__card {
  position: absolute;
  left: 20px;
  top: 190px;
  width: 320px;
  border-radius: 14px;
  background: rgba(245, 240, 234, 0.06);
  border: 1px solid rgba(245, 240, 234, 0.16);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  opacity: var(--card-o, 0);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
/* 卡片成为「投放起点」：边框与阴影提亮，明确它已被激活，而不是一张静止的图 */
.acq-ads__card.is-active {
  border-color: rgba(255, 179, 107, 0.55);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 179, 107, 0.22),
              0 0 42px rgba(232, 85, 26, 0.30);
}
.acq-ads__card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}
.acq-ads__card-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E8551A, #FFB36B);
  flex: 0 0 auto;
}
.acq-ads__card-meta { display: flex; flex-direction: column; line-height: 1.2; }
.acq-ads__card-name { font-size: 13px; font-weight: 600; color: var(--acq-ink, #F5F0EA); }
.acq-ads__card-sub { font-size: 11px; color: var(--acq-ink, #F5F0EA); opacity: 0.55; }
.acq-ads__card-media {
  height: 150px;
  margin: 0 14px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(232, 85, 26, 0.25), rgba(255, 179, 107, 0.12));
  border: 1px dashed rgba(255, 179, 107, 0.4);
}
.acq-ads__card-media-tag { font-size: 12px; color: #FFB36B; opacity: 0.8; }
.acq-ads__card-body { padding: 12px 14px 4px; }
.acq-ads__card-title { font-size: 15px; font-weight: 600; color: var(--acq-ink, #F5F0EA); margin: 0; }
.acq-ads__card-copy { font-size: 12px; line-height: 1.5; color: var(--acq-ink, #F5F0EA); opacity: 0.65; margin: 4px 0 0; }
.acq-ads__card-foot { padding: 10px 14px 14px; }
.acq-ads__card-cta {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #13100D;
  background: linear-gradient(135deg, #E8551A, #FFB36B);
}

/* 投放主线：广告卡右缘 → 地球「温州」起点。
   绘制进度与行进头位移都由 JS 写 dashoffset（见 acquisition-system.js 的 ARC_D）。 */
.acq-ads__arc {
  position: absolute;
  left: 0;
  top: 0;
  width: 1220px;
  height: 780px;
  overflow: visible;
  pointer-events: none;
  opacity: var(--arc-o, 0);
}
.acq-ads__arc-path {
  stroke: #FFB36B;
  stroke-width: 1.5;
  stroke-linecap: round;
  fill: none;
  opacity: 0.6;
}
/* 沿同一路径行进的短亮段：让「从卡片出发、抵达地球」在单帧里也能读出方向 */
.acq-ads__arc-head {
  stroke: #FFD9A8;
  stroke-width: 3;
  stroke-linecap: round;
  fill: none;
  opacity: var(--arc-head-o, 0);
  filter: drop-shadow(0 0 5px rgba(255, 179, 107, 0.9));
}

/* 地球 SVG：--globe-s 长大，--globe-flat 摊平，--globe-o 淡入 */
.acq-ads__globe {
  position: absolute;
  left: 620px;
  top: 80px;
  width: 620px;
  height: 620px;
  overflow: visible;
  opacity: var(--globe-o, 0);
  transform-origin: 50% 50%;
  transform: scale(
    calc(var(--globe-s, 1) * (1 + var(--globe-flat, 0) * 0.5)),
    calc(var(--globe-s, 1) * (1 - var(--globe-flat, 0) * 0.6))
  );
  will-change: transform, opacity;
}
.acq-ads__graticule ellipse,
.acq-ads__graticule line,
.acq-ads__ring {
  stroke: var(--acq-ink, #F5F0EA);
  stroke-opacity: 0.18;
  stroke-width: 1;
  fill: none;
}
.acq-ads__ring { stroke-dasharray: 4 8; }
.acq-ads__land path {
  stroke: var(--acq-ink, #F5F0EA);
  stroke-opacity: 0.35;
  stroke-width: 1;
  fill: var(--acq-ink, #F5F0EA);
  fill-opacity: 0.08;
}

/* 温州起点脉冲点 */
.acq-ads__origin-dot { fill: #FFB36B; }
.acq-ads__origin-pulse {
  fill: none;
  stroke: #FFB36B;
  stroke-width: 1.5;
  animation: acq-ads-pulse 2.2s ease-out infinite;
}
.acq-ads__origin-label {
  fill: var(--acq-ink, #F5F0EA);
  font-size: 12px;
  font-weight: 600;
}
@keyframes acq-ads-pulse {
  0%   { opacity: 0.7; }
  100% { opacity: 0; }
}

/* 市场光轨 + 节点 + 标签 */
.acq-ads__track {
  stroke: #FFB36B;
  stroke-width: 1.6;
  stroke-linecap: round;
  fill: none;
}
.acq-ads__market { opacity: 0.25; transition: opacity 0.3s ease; }
.acq-ads__market.is-on { opacity: 1; }
.acq-ads__market-dot { fill: #FFB36B; }
.acq-ads__market-label { opacity: 0; transition: opacity 0.3s ease; }
.acq-ads__market-label.is-on { opacity: 1; }
.acq-ads__market-title {
  fill: var(--acq-ink, #F5F0EA);
  font-size: 15px;
  font-weight: 600;
}
.acq-ads__market-sub {
  fill: var(--acq-ink, #F5F0EA);
  opacity: 0.7;
  font-size: 11px;
}

/* 平台节点环 */
.acq-ads__plat { opacity: 0.15; transition: opacity 0.35s ease; }
.acq-ads__plat.is-on { opacity: 1; }
.acq-ads__plat-link {
  stroke: var(--acq-ink, #F5F0EA);
  stroke-opacity: 0.2;
  stroke-width: 0.8;
  stroke-dasharray: 2 4;
}
.acq-ads__plat-ring {
  fill: none;
  stroke: var(--acq-ink, #F5F0EA);
  stroke-opacity: 0.5;
  stroke-width: 1;
}
.acq-ads__plat-dot { stroke: none; }
.acq-ads__plat-label {
  fill: var(--acq-ink, #F5F0EA);
  font-size: 11px;
  opacity: 0.85;
}

/* 右下数据 HUD（演示数据） */
.acq-ads__hud {
  position: absolute;
  right: 16px;
  bottom: 16px;
  min-width: 200px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(12, 10, 8, 0.55);
  border: 1px solid rgba(255, 179, 107, 0.28);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
.acq-ads__hud-title {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFB36B;
  margin-bottom: 8px;
  font-weight: 600;
}
.acq-ads__hud-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  border-top: 1px solid rgba(245, 240, 234, 0.10);
}
.acq-ads__hud-k {
  font-size: 12px;
  color: var(--acq-ink, #F5F0EA);
  opacity: 0.75;
}
.acq-ads__hud-v { display: flex; align-items: baseline; }
.acq-ads__hud-num {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #FFB36B;
}
.acq-ads__hud-unit {
  font-size: 11px;
  color: var(--acq-ink, #F5F0EA);
  opacity: 0.6;
  margin-left: 3px;
}

/* ---- 31b-leads. 第三幕：主动获客软件（Dashboard + 搜索 + 匹配分 + 联系人 + 五步流程） ----
   背景此时已褪到米白/白，故用浅卡 + 深字，卡片自身带细腻阴影与圆角。 */
.acq__lyr-leads { width: 1000px; height: 580px; }

.acq-leads__dash {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 22px 26px;
  border-radius: 18px;
  background: #FFFFFF;
  color: #1A1A1A;
  box-shadow: 0 24px 70px rgba(31, 21, 10, 0.18), 0 2px 8px rgba(31, 21, 10, 0.06);
  overflow: hidden;          /* 联系人卡片从右滑入时被裁剪在卡内 */
}

/* 顶部标题 + 产品品牌小标签 + 真实产品入口 */
.acq-leads__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.acq-leads__head-main { min-width: 0; }
.acq-leads__title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #1A1A1A;
  display: flex;
  align-items: center;
}
/* 产品名在左，品牌在右：DEMO 不再是本幕的品牌身份 */
.acq-leads__brand {
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #B45309;
  background: #FEF3C7;
}
.acq-leads__sub {
  margin-top: 4px;
  font-size: 12px;
  color: #746A60;   /* 次级文字压深：对比度 4.92:1（暖灰体系不变，仅解决偏浅） */
}
/* 次级 CTA：只有这个链接是外链，整卡不是链接 */
.acq-leads__brandlink {
  flex: 0 0 auto;
  align-self: center;
  padding: 6px 12px;
  border: 1px solid #E7E1D8;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #B45309;   /* on #FFFFFF：对比度 4.83:1 */
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.acq-leads__brandlink::after { content: ' ↗'; font-weight: 400; }
.acq-leads__brandlink:hover { border-color: #E8551A; background: #FFF7EE; }

/* 搜索行：目标市场 / 产品关键词 / 买家类型 + AI 匹配 */
.acq-leads__search {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 14px;
  margin-bottom: 18px;
  border: 1px solid #E7E1D8;
  border-radius: 10px;
  background: #FAF8F5;
}
.acq-leads__field { display: flex; align-items: center; gap: 6px; min-width: 0; }
.acq-leads__field-v {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 13px;
  color: #1A1A1A;
  white-space: nowrap;
}
.acq-leads__sep {
  flex: 0 0 auto;
  width: 1px;
  height: 18px;
  background: #E7E1D8;
}
.acq-leads__search-label { font-size: 12px; color: #786E64; }   /* 4.70:1 on #FAF8F5 */
.acq-leads__kw {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 13px;
  color: #1A1A1A;
  white-space: pre;
}
.acq-leads__caret {
  width: 1.5px;
  height: 16px;
  background: #E8551A;
  animation: acq-leads-blink 1s steps(1) infinite;
}
.acq-leads__search-btn {
  margin-left: auto;
  padding: 7px 18px;
  border-radius: 8px;
  background: linear-gradient(135deg, #E8551A, #FFB36B);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
}
@keyframes acq-leads-blink {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* 结果列表 + 联系人卡片 */
.acq-leads__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 22px;
}
.acq-leads__list {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.acq-leads__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  border: 1px solid #EFE9E0;
  border-radius: 10px;
  background: #FFFFFF;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.acq-leads__row.is-in { opacity: 1; transform: translateY(0); }
.acq-leads__row-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.acq-leads__row-name {
  font-size: 14px;
  font-weight: 600;
  color: #1A1A1A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acq-leads__row-meta {
  margin-top: 2px;
  font-size: 12px;
  color: #786E64;   /* 次级文字压深：对比度 4.99:1 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acq-leads__row-score {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.acq-leads__row-num {
  min-width: 42px;
  text-align: right;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #E8551A;
}
.acq-leads__row-bar {
  display: block;
  width: 110px;
  height: 6px;
  border-radius: 999px;
  background: #EFE9E0;
  overflow: hidden;
}
.acq-leads__row-bar i {
  display: block;
  height: 100%;
  min-width: 2px;              /* 漏斗末级只剩 1%，仍保留一根可见的细线 */
  width: calc(var(--w, 0) * 100%);
  border-radius: 999px;
  background: linear-gradient(90deg, #E8551A, #FFB36B);
}
/* 数字必须自带示例语义 */
.acq-leads__note {
  margin-top: 2px;
  font-size: 11px;
  color: #746A60;   /* 与 __sub 同色，白底对比度 4.92:1，11px 小字也必须过 4.5 */
}

/* 联系人卡片：--contact-in 由 JS 写在 leadsLyr 上，继承到本卡驱动滑出 */
.acq-leads__contact {
  flex: 0 0 236px;
  align-self: flex-start;
  padding: 18px 16px;
  border-radius: 12px;
  background: linear-gradient(160deg, #FFF7EE, #FFFFFF);
  border: 1px solid #F3DFC8;
  box-shadow: 0 10px 30px rgba(232, 85, 26, 0.12);
  transform: translateX(calc((1 - var(--contact-in, 0)) * 130%));
  opacity: var(--contact-in, 0);
}
.acq-leads__contact-avatar {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  color: #FFFFFF;
  background: linear-gradient(135deg, #E8551A, #FFB36B);
}
.acq-leads__contact-score {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.acq-leads__contact-score-k { margin-top: 3px; font-size: 9px; letter-spacing: 0.08em; opacity: 0.9; }
.acq-leads__contact-name { font-size: 14px; font-weight: 700; color: #1A1A1A; }
.acq-leads__contact-rows { margin-top: 12px; }
.acq-leads__card-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid #F3DFC8;
}
.acq-leads__card-k { flex: 0 0 auto; font-size: 12px; color: #786E64; }   /* on #FFF7EE：4.55:1 */
.acq-leads__card-v {
  font-size: 12px;
  font-weight: 600;
  color: #1A1A1A;
  text-align: right;
}
.acq-leads__contact-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 16px;
  border-radius: 8px;
  background: #1A1A1A;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
}

/* 底部五步流程条 */
.acq-leads__pipeline {
  display: flex;
  align-items: center;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #EFE9E0;
}
.acq-leads__step {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.acq-leads__step:not(:last-child)::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  margin: 0 10px;
  background: #E7E1D8;
}
.acq-leads__step-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #E7E1D8;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.acq-leads__step-k {
  font-size: 12px;
  color: #786E64;   /* 次级文字压深：对比度 4.99:1 */
  white-space: nowrap;
  transition: color 0.3s ease;
}
.acq-leads__step.is-lit .acq-leads__step-dot {
  background: linear-gradient(135deg, #E8551A, #FFB36B);
  box-shadow: 0 0 0 4px rgba(232, 85, 26, 0.12);
}
.acq-leads__step.is-lit .acq-leads__step-k { color: #1A1A1A; font-weight: 600; }


/* ============================================================
   32. CLIENTS — 合作客户 Logo 墙（第 26 轮）

   落位：三步启动 → CLIENTS → #cta
   形态：两排反向无缝 marquee，纯 CSS 驱动，无新增 JS
   reveal：复用现有 .anim-fade-up（js/main.js initScrollAnimations）

   ⚠ 本区块与 #acq / PHYS_TOTAL / 917vh / BG_ANCHORS / OBJ_ANCHORS 无任何关系。

   无缝原理：每组末尾用 padding-right 补齐组距，使轨道宽 = 2 × (组宽 + gap)，
   translateX(-50%) 恰好走完一整组。gap 必须放在 .clients-group 上，
   不能放在 .clients-row__track 上，否则 -50% 会差半个 gap，每圈跳一次。
   ============================================================ */

.clients {
  background: var(--color-gray-100);   /* #F5F2EF，与上方白色 section 分带 */
  padding: var(--space-3xl) 0;
}

/* ---- 尺寸变量：三档响应式全部由这一组驱动 ---- */
.clients,
.clients-marquee {
  /* 卡片宽度三档：统一高度 + 统一视觉语言，只按 Logo 横纵比分档。
     宽字标在 normal 内框里会被"压矮"，加宽才能把它的渲染高度抬回合理区间。 */
  --clients-card-w: 220px;   /* normal    */
  --clients-card-w-wide: 260px;
  --clients-card-w-ultra: 300px;
  --clients-card-h: 104px;
  --clients-pad-y: 16px;
  --clients-pad-x: 18px;
  --clients-gap: 48px;
  --clients-row-gap: 24px;
  --clients-fade: 96px;
  /* 无缝循环的位移恒为「一整组宽度」，所以 px/s = 组宽 / duration。
     两排组宽不再天然相等（档位不同），故两排各用独立 duration，
     按实测组宽换算，保持 targetSpeed ≈ 48px/s。纯 CSS，无需 JS。 */
  --clients-dur-a: 65.6s;
  --clients-dur-b: 64.8s;
  --clients-compact-h: 68%;  /* 短字标统一高度上限，不解比例、不拉字形 */
  /* 上下安全区：容 hover 上浮 4px + box-shadow 扩散，且让左右 mask 的遮罩框
     覆盖到溢出的光晕（mask 区域外会被判为透明，不撑开就会把 glow 切掉） */
  --clients-safe: 36px;
}

/* ---- 轨道视口 ----
   overflow-x: clip 横向裁掉轨道，但**不**创建滚动容器，因此 overflow-y 可以保持
   visible —— hover 上浮和 glow 不会被切。不能用 overflow: hidden：那会把
   overflow-y 一并算成 auto，上浮的 4px 和阴影全部被裁掉。 */
.clients-row {
  overflow-x: clip;
  overflow-y: visible;
  padding: var(--clients-safe) 0;
  margin: calc(var(--clients-safe) * -1) 0;   /* 抵消，保持两排视觉间距不变 */

  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--clients-fade),
                                      #000 calc(100% - var(--clients-fade)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--clients-fade),
                                      #000 calc(100% - var(--clients-fade)), transparent 100%);
}

.clients-row + .clients-row { margin-top: var(--clients-row-gap); }

.clients-row__track {
  display: flex;                 /* 注意：此处**不设** gap */
  width: max-content;
  will-change: transform;        /* 只加在轨道上，不加在 44 张卡片上 */
  animation: clients-marquee var(--clients-dur-a) linear infinite;
}

/* 第二排：反向 + 独立时长（两排组宽不同，必须按各自组宽换算才等速） */
.clients-row__track--rev {
  animation-direction: reverse;
  animation-duration: var(--clients-dur-b);
}

@keyframes clients-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.clients-group {
  display: flex;
  gap: var(--clients-gap);
  padding-right: var(--clients-gap);   /* 补齐组尾间隔 —— 无缝的关键 */
  flex: 0 0 auto;
  margin: 0;
  padding-left: 0;
  list-style: none;
}

/* ---- 卡片：固定尺寸，Logo 在框内等比缩放 ---- */
.clients-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--clients-card-w);
  height: var(--clients-card-h);
  padding: var(--clients-pad-y) var(--clients-pad-x);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  transition: background 0.35s ease, border-color 0.35s ease,
              box-shadow 0.35s ease, transform 0.35s ease;
}

.clients-card img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  /* 静止态：低饱和 + 降透明，但必须仍可辨认。
     实测 0.45 时整墙对比度只有 1.71:1，视觉复核判为 "washed-out / difficult
     to read" —— Logo 墙是社证，看不清就失去意义。0.62 是「低调但可读」的下限。 */
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.35s ease, opacity 0.35s ease;
}

/* ---- 宽度分档：只改宽度，高度与视觉语言保持统一 ----
   上一轮的 RIH scale(1.08~1.12) 补偿已**全部取消**：固定卡片实测下 RIH 反而是
   全墙最大的一档（占卡片高 100%），继续放大的方向是错的。 */
.clients-card--wide  { width: var(--clients-card-w-wide); }
.clients-card--ultra { width: var(--clients-card-w-ultra); }

/* ---- 短字标高度上限 ----
   RIH(1.89) / MIFIA(1.31) 这类"矮胖"字标原本会吃满内容高度，视觉重量远超平均。
   这里只压 max-height，宽度仍由 max-width 等比推导 —— 不 scaleX/scaleY，
   不改字形，不拆行。 */
.clients-card--compact img { max-height: var(--clients-compact-h); }

/* ---- hover：恢复原色 + 上浮 + 微橙描边 glow；该轨道暂停 ---- */
.clients-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(232, 85, 26, 0.28);
  box-shadow: 0 8px 22px rgba(232, 85, 26, 0.10);
}

.clients-card:hover img { filter: none; opacity: 1; }

.clients-row:hover .clients-row__track { animation-play-state: paused; }

/* ---- 触屏：不因点中而停住，也不锁定彩色态 ---- */
@media (hover: none) {
  .clients-row:hover .clients-row__track { animation-play-state: running; }
  .clients-card:hover {
    transform: none;
    background: none;
    border-color: transparent;
    box-shadow: none;
  }
  .clients-card:hover img { filter: grayscale(1); opacity: 0.62; }
}

/* ---- ≤1024 ---- */
@media (max-width: 1024px) {
  .clients-marquee {
    --clients-card-w: 190px;
    --clients-card-w-wide: 224px;
    --clients-card-w-ultra: 258px;
    --clients-card-h: 92px;
    --clients-pad-y: 14px;
    --clients-pad-x: 16px;
    --clients-gap: 40px;
    --clients-row-gap: 20px;
    --clients-fade: 80px;
    --clients-dur-a: 56.25s;
    --clients-dur-b: 55.5s;
  }
}

/* ---- ≤768 ---- */
@media (max-width: 768px) {
  .clients { padding: var(--space-2xl) 0; }
  .clients-marquee {
    --clients-card-w: 164px;
    --clients-card-w-wide: 194px;
    --clients-card-w-ultra: 222px;
    --clients-card-h: 80px;
    --clients-pad-y: 12px;
    --clients-pad-x: 14px;
    --clients-gap: 30px;
    --clients-row-gap: 16px;
    --clients-fade: 56px;
    /* 两排组宽此处相差 2px，分别换算，保证 px/s 一致 */
    --clients-dur-a: 47.6s;
    --clients-dur-b: 46.9s;
    --clients-safe: 28px;
  }
}

/* ---- ≤480 ---- */
@media (max-width: 480px) {
  .clients-marquee {
    --clients-card-w: 148px;
    --clients-card-w-wide: 174px;
    --clients-card-w-ultra: 200px;   /* 不把 300px 直接搬到 390 宽屏 */
    --clients-card-h: 70px;
    --clients-pad-y: 11px;
    --clients-pad-x: 12px;
    --clients-gap: 20px;
    --clients-row-gap: 14px;
    --clients-fade: 36px;
    --clients-dur-a: 41.2s;
    --clients-dur-b: 40.7s;
    --clients-safe: 24px;
  }
}

/* ---- prefers-reduced-motion：真正静态化 ----
   不是「只关掉 hover 位移」，而是彻底退化成一张静态 Logo 墙：
   无动画、无副本、无 mask、无横向滚动，原始 22 家居中换行排列。 */
@media (prefers-reduced-motion: reduce) {
  .clients-row {
    overflow: visible;
    padding: var(--clients-row-gap) 0;
    margin: 0;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .clients-row__track {
    animation: none;
    transform: none;          /* 明确清掉，防止 from 帧残留位移 */
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    will-change: auto;
  }
  .clients-group {
    /* 必须收进容器宽度：否则 flex:0 0 auto 会按 max-content 撑到 2948px，
       内部 wrap 永远不触发，整页出现横向滚动 */
    flex: 1 1 100%;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--clients-gap);
    padding-right: 0;
  }
  .clients-group[aria-hidden="true"] { display: none; }   /* 副本收起 */
  .clients-card:hover { transform: none; }                /* 不做上浮 */
}