@import "tailwindcss";

/* 排除历史构建备份目录：safe-delete 禁止 rm，这些 dist_bak_* 会残留在项目根，
   Tailwind v4 自动扫描会重新吸入其中的旧色 arbitrary class（如 .text-[#FEEAC9]）。
   用 @source not 显式排除，确保新构建不再被污染。 */
@source not "../../dist_bak-*/**";

/* ===== BaskBuddy Design System — Professional Warm Futurism ===== */
/* Design Philosophy: 简单明了 + 温暖未来主义
   Reference: AxureShop Tech Corp Template + 2025 Tech Website Trends
   Key: Clarity over decoration, warmth through subtlety */

:root {
  /* Core Brand Colors — 主题色 #EBEAF6（浅薰衣草），作为全站冷调基调 */
  --brand-white: #FFFFFF;
  --brand-black: #1A1A1A;
  --brand: #EBEAF6;                 /* 主题色（浅薰衣草）—— 背景/色块/图标底/浅描边 */
  --brand-cream: #EBEAF6;           /* 沿用名 = 主题色 */
  --brand-cream-light: #EBEAF6;     /* 主题色更浅一档（hover 底）—— 统一为 #EBEAF6 */
  --brand-cream-deep: #EBEAF6;      /* 主题色更深一档（描边/边框）—— 统一为 #EBEAF6 */

  /* ===== 赛道 Identity — 统一为深色强调（#1A1A1A 深暖黑，与底部黑呼应）=====
     原四赛道色（红/蓝/绿/紫）已统一到 --accent（深黑），全站单一强调锚点。
     强色用于：图标、卡片顶条、产品标签描边、强调点缀；浅色由 color-mix 派生。
     主题色 #EBEAF6（浅薰衣草）承担全站冷调基调：底色、图标底、大色块、导航底。 */
  --track-social: var(--accent);   /* 社交赛道 — 统一深色强调 */
  --track-career: var(--accent);   /* 职场赛道 — 统一深色强调 */
  --track-payment: var(--accent);  /* 支付赛道 — 统一深色强调 */
  --track-ai: var(--accent);       /* AI 赛道 — 统一深色强调 */

  /* ===== 规范 / 语义 token（设计系统约束，杜绝游离硬编码）=====
      · accent:       默认强调色，用于 eyebrow 引导线、统一强调锚点
      · focus-ring:   焦点环颜色——高对比（替代近白 cream，白底上曾不可见）
      · radius-*:     圆角尺度，全站唯一来源（sm8/md10/lg14/xl18，克制圆角：大块面锐利、小元素圆润）
      · status-*:     状态色独立于赛道色，自成中性家族，避免「状态=赛道」混淆
      · 赛道色只此一处定义，浅色一律由 color-mix(强色 N%) 派生 */
  --accent: #1A1A1A;               /* 结构性强调色：深暖黑（字/描边/按钮底/引导线/焦点环），与底部黑呼应 */
  /* ===== 品牌蓝 — 对比度分级体系（高级配色铁律：强调色按「显示角色」分档，各档过各自 WCAG 阈值）=====
     品牌蓝 #3d5afe 在纯白底上 5.07:1 已过 AA；导航 / CTA 走 deep 档 #2E40D8（白字 7.4:1）更稳：
       · --brand-accent        #3d5afe  大字号展示 / 图标 / 装饰线 / eyebrow（≥18px 或图形，3:1 即可）
       · --brand-accent-deep   #2E40D8  小字正文 / 按钮底色（白字 7.4:1，过 AA）★ 导航/CTA 用此档
       · --brand-accent-darker #1B2A9E  hover/press 更深一档（白字 11:1，高对比反馈）
       · --brand-accent-ink    #1B2A9E  浅底上的蓝字（超高对比，文字选中 / 浅色块内文字）
       · --brand-accent-soft   #EBEAF6  浅洗 hover / 选中高亮底 / 点缀底 */
  --brand-accent: #3d5afe;
  --brand-accent-soft: #EBEAF6;
  --brand-accent-deep: #2E40D8;
  --brand-accent-darker: #1B2A9E;
  --brand-accent-ink: #1B2A9E;
  --focus-ring: var(--brand-accent-deep);
  /* 圆角尺度：克制但有圆角（学 asrmicro 锐利公司级版面，但按钮/图标块/标签/胶囊等「该圆角」处恢复圆角）。
     大卡/图带保持相对锐利，小元素明显圆角，形成层次。 */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --status-done: #0E8F6E;      /* 已完成 — 青绿 */
  --status-progress: #4F6BED;  /* 推进中 — 靛蓝 */

  /* ICIDP价值观专属色 */
  --icidp-integrity: #667EEA;
  --icidp-courage: #EF4444;
  --icidp-innovation: #8B5CF6;
  --icidp-devotion: #10B981;
  --icidp-passion: #3d5afe;      /* 激情 — 品牌蓝（与主题色统一） */

  /* ===== 责任与价值 · 三方向专属色（2026-08 重构 ESG → 责任与价值）=====
     参考 腾讯「可持续社会价值」/淡马锡 ESG 框架，把抽象 ESG 拆解为三个可感知的方向，
     各方向有独立视觉锚点，避免「状态=赛道」混淆，也避免 ESG 一团灰。
       · --sus-green : 绿色低碳 — 主色绿（用户要求环境用绿色）
       · --sus-blue  : 数字普惠 — 品牌蓝（连接普惠入口）
       · --sus-dark  : 可信运营 — 深暖黑（与全站 accent 呼应，体现「可信」的稳重）
     浅色档由 color-mix(in oklch, X N%, transparent) 派生。 */
  --sus-green: #10B981;
  --sus-green-soft: color-mix(in oklch, var(--sus-green) 12%, transparent);
  --sus-blue: #3d5afe;
  --sus-blue-soft: color-mix(in oklch, var(--sus-blue) 12%, transparent);
  --sus-dark: var(--accent);
  --sus-dark-soft: color-mix(in oklch, var(--accent) 10%, transparent);

  /* Semantic Colors */
  --bg-primary: #FAFAFE;          /* 冷调近白底：与浅薰衣草主题色呼应 */
  --bg-secondary: var(--brand-cream-light); /* 现为 #EBEAF6 */
  --bg-subtle: #EBEAF6;          /* 浅薰衣草交替底 */
  --bg-dark: var(--brand-black);
  --text-primary: var(--brand-black);
  --text-secondary: #4A4A4A;
  --text-muted: #6A6A6A;
  --text-muted-on-dark: rgba(255,255,255,0.65);
  --text-on-dark: var(--brand-white);
  --border-light: rgba(26,26,26,0.06);
  --border-medium: rgba(26,26,26,0.10);

  /* Typography — Professional hierarchy */
  --font-display: 'Noto Sans SC', 'Noto Sans TC', system-ui, sans-serif;
  --font-body: 'Noto Sans SC', 'Noto Sans TC', system-ui, sans-serif;
  --font-mono: 'Noto Sans SC', 'Noto Sans TC', system-ui, sans-serif;

  /* ===== Typography Scale — 统一字号阶梯（asrmicro 式干净公司级层级）=====
     全站字号的「单一真相源」。组件内字号必须落到这一阶梯，杜绝 12/13/14/15 散落与
     卡片标题 15~18 不统一。层级：display > h1 > h2 > h3 > body-lg > body > body-sm > micro。
     规则：主阅读文本一律 15(body)，次级描述/图注 14(body-sm)，卡片标题一律 18(h3)，
     区块大标题一律 h2(clamp 20~26)，小节标签/徽章/eyebrow 一律 11(micro)。 */
  --fs-display: clamp(42px, 6.5vw, 78px);  /* 首页 Hero slogan */
  --fs-h1: clamp(34px, 4.6vw, 56px);       /* 页面/区块大标题（section-title） */
  --fs-h2: clamp(22px, 2.8vw, 30px);       /* 区块内主标题（赛道名/CTA/投递） */
  --fs-h3: 20px;                            /* 卡片标题（一律统一） */
  --fs-body-lg: clamp(17px, 1.2vw, 20px);  /* 引导段落 / 宣言 */
  --fs-body: 16px;                          /* 主阅读正文 */
  --fs-body-sm: 15px;                       /* 次级描述 / 图注 */
  --fs-micro: 12px;                         /* 小节标签 / 徽章 / eyebrow */

  /* Spacing Scale — 8px grid + 流体间距（C. 2026 趋势）
     clamp(min, preferred, max): 小屏紧凑(min ~85%), 中屏接近原值, 大屏松弛(max ~115%)
     preferred = 原值 + vw 调整, 让间距随视口宽度平滑变化 */
  --space-1: clamp(0.4rem, 0.5rem + 0.1vw, 0.6rem);
  --space-2: clamp(0.85rem, 1rem + 0.2vw, 1.15rem);
  --space-3: clamp(1.25rem, 1.5rem + 0.3vw, 1.75rem);
  --space-4: clamp(1.7rem, 2rem + 0.4vw, 2.3rem);
  --space-5: clamp(2.1rem, 2.5rem + 0.5vw, 2.9rem);
  --space-6: clamp(2.5rem, 3rem + 0.6vw, 3.5rem);
  --space-7: clamp(2.9rem, 3.5rem + 0.7vw, 4.1rem);
  --space-8: clamp(3.3rem, 4rem + 0.8vw, 4.7rem);
  --space-9: clamp(4.1rem, 5rem + 1vw, 5.9rem);
  --space-10: clamp(4.9rem, 6rem + 1.2vw, 7.1rem);
  --space-11: clamp(6.5rem, 8rem + 1.6vw, 9.5rem);

  /* Animation — Professional easing */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 180ms;
  --duration-normal: 350ms;
  --duration-slow: 600ms;

  /* Shadows — Warm but subtle */
  --shadow-xs: 0 1px 3px rgba(26,26,26,0.04);
  --shadow-sm: 0 2px 8px rgba(26,26,26,0.06), 0 1px 2px rgba(235,234,246,0.06);
  --shadow-md: 0 6px 20px rgba(26,26,26,0.07), 0 2px 6px rgba(235,234,246,0.08);
  --shadow-lg: 0 12px 40px rgba(26,26,26,0.08), 0 4px 12px rgba(235,234,246,0.10);
  --shadow-xl: 0 20px 60px rgba(26,26,26,0.10), 0 8px 24px rgba(235,234,246,0.12);
  --shadow-dark-sm: 0 2px 8px color-mix(in oklch, var(--track-ai) 10%, transparent);
  --shadow-dark-md: 0 6px 24px color-mix(in oklch, var(--track-ai) 12%, transparent);
  --shadow-dark-lg: 0 12px 40px color-mix(in oklch, var(--track-ai) 14%, transparent);
}

/* 文字选中高亮：品牌暖橙淡调（premium 细节，替代默认蓝） */
::selection {
  background: var(--brand-accent-soft);
  color: var(--brand-black);
}

/* ===== Smooth Scroll + Mobile Safe-Area ===== */
html {
  scroll-behavior: smooth;
  /* WCAG 2.4.12 Focus Not Obscured: 锚点跳转/获焦不被 sticky header 遮挡（header ~64px + 余量）*/
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  /* 移动端安全边距，防止按钮贴边缘 */
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

::selection {
  background: rgba(235,234,246,0.35);
  color: var(--brand-black);
}

/* ===== Clean Gradient Mesh Background ===== */
.gradient-mesh {
  position: relative;
  background: var(--bg-primary);
}

.gradient-mesh::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 15% 20%, rgba(235,234,246,0.34), transparent 60%),
    radial-gradient(ellipse 40% 30% at 85% 75%, rgba(235,234,246,0.20), transparent 50%),
    radial-gradient(ellipse 35% 25% at 60% 10%, rgba(235,234,246,0.16), transparent 50%);
  animation: meshDrift 40s ease-in-out infinite; /* 25s→40s 降低动画强度 */
  pointer-events: none;
  z-index: 0;
}

@keyframes meshDrift {
  0%, 100% { opacity: 0.5; transform: translate(0, 0) scale(1); }
  33% { opacity: 0.6; transform: translate(-0.8%, 0.5%) scale(1.006); } /* 位移减半，缩放大幅降低 */
  66% { opacity: 0.55; transform: translate(0.6%, -0.4%) scale(1.003); }
}

/* ===== Dark Gradient Mesh (Innovation Lab) ===== */
.gradient-mesh-dark {
  position: relative;
  background: var(--brand-black);
}

.gradient-mesh-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 20% 30%, color-mix(in oklch, var(--track-ai) 10%, transparent), transparent 50%),
    radial-gradient(ellipse 35% 25% at 80% 70%, color-mix(in oklch, var(--track-career) 6%, transparent), transparent 40%);
  animation: meshDriftDark 50s ease-in-out infinite; /* 30s→50s 降低动画强度 */
  pointer-events: none;
  z-index: 0;
}

@keyframes meshDriftDark {
  0%, 100% { opacity: 0.45; transform: translate(0, 0); }
  50% { opacity: 0.55; transform: translate(-1%, 0.6%); } /* 位移大幅降低 */
}

/* ===== Gradient Text — Elegant & Subtle ===== */
.text-gradient-animated {
  background: linear-gradient(
    90deg,
    var(--brand-black) 0%,
    var(--brand-black) 30%,
    var(--brand-cream-deep) 55%,
    var(--track-social) 75%,
    var(--brand-black) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textGradientSlide 14s ease-in-out infinite; /* 8s→14s 降低动画强度，避免视觉疲劳 */
}

@keyframes textGradientSlide {
  0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* ===== 统一按钮/卡片交互层 ===== */
a, button {
  touch-action: manipulation;
}
/* 卡片悬浮微交互 */
.card-hover {
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 400ms cubic-bezier(0.16, 1, 0.3, 1), border-color 200ms ease;
}
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-xl);
}


/* ===== Professional Glassmorphism ===== */
.glass-premium {
  background: rgba(255,255,255,0.80);
  backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}

.glass-premium-dark {
  background: rgba(26,26,26,0.85);
  backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid rgba(235,234,246,0.06);
  box-shadow: var(--shadow-dark-sm);
}

/* ===== 暖科技玻璃卡 — 全站卡片统一套用（核心升级） =====
   玻璃底色 + 细边 + 柔影；hover 微浮交给元素自带的 Tailwind hover 类，
   避免 transform 冲突，保持单一真相源。 */
.card-surface {
  background: rgba(255,255,255,0.70);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}
.card-surface-soft {
  background: rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid var(--border-light);
}

/* 科技感网格底纹（极淡，premium 纹理不抢戏） */
.tech-grid-bg {
  background-image:
    linear-gradient(rgba(26,26,26,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,26,26,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center;
}

/* ===== Scroll Reveal — Smooth & Professional ===== */
.scroll-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}

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

.scroll-reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}

.scroll-reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.scroll-reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}

.scroll-reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ===== Scroll-driven Animations（2026 规范 · 渐进增强）=====
   浏览器支持 animation-timeline: view() 时，用纯 CSS 替代 JS IntersectionObserver
   揭示。fill-mode: both 保证进入视口前保持 from（隐藏）、滚过后保持 to（可见），
   不依赖 .visible 类即完成揭示；JS 仍作 fallback，互不冲突。
   animation-range: entry 0% cover 30% —— 进入视口 0% 开始，覆盖 30% 时完成，
   比默认 cover 0%-100% 更早完成，更贴合「宁静界面」。
   不做 stagger：scroll-driven 的错峰需平移 animation-range，复杂且违背宁静原则；
   JS 路径仍保留 stagger 作为不支持本特性时的体验 fallback。 */
@supports (animation-timeline: view()) {
  .scroll-reveal {
    animation: scroll-reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  .scroll-reveal-left {
    animation: scroll-reveal-left linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  .scroll-reveal-right {
    animation: scroll-reveal-right linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  @keyframes scroll-reveal-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes scroll-reveal-left {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes scroll-reveal-right {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
  }
}

/* ===== Hover Effects — Subtle & Elegant ===== */
.hover-lift {
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}

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

.hover-lift-dark:hover {
  box-shadow: var(--shadow-dark-lg);
}

/* ===== Section Divider — Clean ===== */
.section-divider {
  height: 1px;
  max-width: 80%;
  margin: var(--space-8) auto;
  background: linear-gradient(90deg, transparent, var(--border-medium), transparent);
}

.dark-divider {
  background: linear-gradient(90deg, transparent, rgba(235,234,246,0.10), transparent);
}

/* ===== Timeline Style — 响应式移动端单列布局 ===== */
.timeline-line {
  position: relative;
  padding-left: 48px;
}

@media (max-width: 640px) {
  .timeline-line {
    padding-left: 36px;
  }
}

.timeline-line::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(235,234,246,0.4), color-mix(in oklch, var(--track-ai) 22%, transparent), transparent);
}

@media (max-width: 640px) {
  .timeline-line::before {
    left: 14px;
  }
}

.timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  left: 15px;
  border: 2px solid;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 640px) {
  .timeline-dot {
    left: 9px;
    width: 8px;
    height: 8px;
  }
}

/* ===== Star Field (Innovation Lab) — 降低密度和亮度，保持科技克制感 ===== */
.star-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.star {
  position: absolute;
  width: 1px;
  height: 1px;
  background: var(--brand-cream);
  border-radius: 50%;
  animation: starTwinkle var(--twinkle-duration) ease-in-out infinite;
  opacity: 0;
}

@keyframes starTwinkle {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.35; }
}

/* ===== Neon Elements — Dark pages only ===== */
.neon-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: neonDotPulse 3s ease-in-out infinite;
}

@keyframes neonDotPulse {
  0%, 100% { opacity: 0.5; box-shadow: 0 0 3px currentColor; }
  50% { opacity: 1; box-shadow: 0 0 6px currentColor, 0 0 12px currentColor; }
}

.neon-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-cream), var(--track-ai), transparent);
  animation: neonPulse 4s ease-in-out infinite;
}

@keyframes neonPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

/* ===== Flip Card (WCAG 2.1 AA 无障碍：支持键盘/触摸/点击) ===== */
/* ===== Flip Card (WCAG 2.1 AA 无障碍：支持键盘/触摸/点击) ===== */
/* Grid Stack 方案：两面叠在同一 grid-cell → 容器高度 = max(正面高, 背面高)
   —— 彻底解决原 absolute inset-0 + 固定 h-[200px] 导致长内容截断的问题
   翻转时使用 3D rotateY(180) + backface-visibility:hidden 隐藏背面，
   不再额外设 visibility:hidden，避免与 3D 逻辑冲突。*/
.flip-card {
  perspective: 1000px;
  cursor: pointer;
  display: grid;
  container-type: inline-size;
}
.flip-card-inner {
  display: grid;
  grid-template-areas: 'stack';
  transition: transform 0.6s cubic-bezier(0.85, 0, 0.15, 1);
  transform-style: preserve-3d;
}
.flip-card-inner > * { grid-area: stack; }

.flip-card-front h3 {
  font-size: var(--fs-body);
}

.flip-card:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* 桌面：hover 或 .flipped 类翻转 */
@media (hover: hover) and (pointer: fine) {
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
}

/* 键盘点击/触摸点击：.flipped 类控制翻转 (优先级最高) */
.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg) !important;
}

.flip-card-front, .flip-card-back {
  backface-visibility: hidden;
  transform-style: preserve-3d;
  /* Grid Stack：每面是独立 grid cell，按内容自然高度撑开 */
  position: relative;
  top: auto; left: auto; right: auto; bottom: auto;
  inset: auto;
}

.flip-card-back {
  /* 初始背面：与正面成 180°，backface-visibility 会隐藏它 */
  transform: rotateY(180deg);
}

/* ===== Page Enter ===== */
.page-enter {
  animation: pageEnter 0.6s var(--ease-out-expo) forwards;
}

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

/* ===== Route Lazy Loading Fallback（2026 规范 · 宁静界面）=====
   React.lazy chunk 加载时的极简 fallback：居中品牌蓝旋转环，
   不抢戏、不闪烁。aria-live="polite" 供屏读。 */
.page-loading {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-loading::after {
  content: "";
  width: 28px;
  height: 28px;
  border: 2px solid var(--border-medium);
  border-top-color: var(--brand-accent);
  border-radius: 50%;
  animation: pageLoadingSpin 0.8s linear infinite;
}
@keyframes pageLoadingSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .page-loading::after {
    animation: none;
    border-top-color: var(--brand-accent-deep);
  }
}

/* ===== Cross-Document View Transitions（2026 规范 · 路由交叉淡化）=====
   本站导航用 <a href> 全页重载（非 SPA Link），故采用 Cross-Document VT
   （Chrome 134+ / Safari 18.2+），同源导航自动交叉淡化 0.25s。
   不支持时无副作用（@view-transition 与 ::view-transition-* 被忽略，回退到 .page-enter）。
   支持时抑制 .page-enter 避免双重动画（VT 已涵盖进场过渡）。 */
@view-transition {
  navigation: auto;
}
@supports (view-transition-name: root) {
  /* VT 支持：抑制旧 .page-enter，让 VT 接管进场过渡（避免 translateY 与 cross-fade 叠加） */
  .page-enter {
    animation: none;
  }
  ::view-transition-old(root) {
    animation: vt-fade-out 0.25s var(--ease-out) both;
  }
  ::view-transition-new(root) {
    animation: vt-fade-in 0.25s var(--ease-out) both;
  }
  @keyframes vt-fade-out {
    to { opacity: 0; }
  }
  @keyframes vt-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}
@media (prefers-reduced-motion: reduce) {
  @supports (view-transition-name: root) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
      animation: none;
    }
  }
}

/* ===== Custom Focus Ring ===== */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* WCAG 2.5.8 Target Size Minimum: footer 链接触控目标 ≥24×24 CSS px */
footer a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* WCAG 1.4.6 + 2026 趋势 prefers-contrast: 高对比度偏好增强 */
@media (prefers-contrast: more) {
  :root {
    --text-muted: #4a4a4a;
    --text-secondary: #2a2a2a;
  }
  :focus-visible {
    outline-width: 3px;
  }
}

/* ===== Innovation Lab — 科技感样式系统 ===== */
.innovation-lab-container {
  background: linear-gradient(180deg, #0a0a0f 0%, #12121a 30%, #0e0e16 70%, #0a0a0f 100%);
  position: relative;
  overflow: hidden;
}

/* 动态背景网格 */
.grid-background {
  position: fixed;
  inset: 0;
  background-image: 
    linear-gradient(rgba(201,177,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,177,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0;
  animation: gridFadeIn 2s ease-out 0.5s forwards;
  pointer-events: none;
  z-index: 0;
}

@keyframes gridFadeIn {
  to { opacity: 1; }
}

/* 光晕装饰层 */
.glow-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.glow-orbs::before,
.glow-orbs::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.3;
}

.glow-orbs::before {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--track-ai)40 0%, transparent 70%);
  top: -200px;
  right: -100px;
  animation: orbFloat1 20s ease-in-out infinite;
}

.glow-orbs::after {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--track-career)30 0%, transparent 70%);
  bottom: -150px;
  left: -80px;
  animation: orbFloat2 25s ease-in-out infinite;
}

@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-30px, 20px) scale(1.1); }
  66% { transform: translate(20px, -15px) scale(0.95); }
}

@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, 30px) scale(1.15); }
}


/* 扫描线 */
.scan-line {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--track-ai), transparent);
  animation: scanLineMove 3s ease-in-out infinite;
}

@keyframes scanLineMove {
  0% { top: 0; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* 动态进度条 */
.progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--track-ai), var(--track-career));
  border-radius: inherit;
  animation: progressFill 1.5s ease-out 0.5s forwards;
  box-shadow: 0 0 10px var(--track-ai);
}

@keyframes progressFill {
  to { width: 100%; }
}

/* 发光圆点 */
.neon-dot-glow {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: neonGlow 2s ease-in-out infinite;
}

.neon-dot-glow-lg {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  animation: neonGlow 2s ease-in-out infinite;
}

@keyframes neonGlow {
  0%, 100% { opacity: 0.6; box-shadow: 0 0 5px currentColor, 0 0 10px currentColor; }
  50% { opacity: 1; box-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor; }
}

/* 科技感时间线 */
.timeline-tech {
  position: relative;
  padding-left: 52px;
}

@media (max-width: 640px) {
  .timeline-tech {
    padding-left: 40px;
  }
}

.timeline-item {
  position: relative;
}

.timeline-connector {
  position: absolute;
  left: 9px;
  top: 16px;
  width: 2px;
  height: calc(100% - 16px);
}

@media (max-width: 640px) {
  .timeline-connector {
    left: 5px;
  }
}

.timeline-node {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  position: absolute;
  left: -44px;
  border: 2px solid var(--node-color);
  background: #0a0a0f;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease;
}

@media (max-width: 640px) {
  .timeline-node {
    left: -32px;
    width: 12px;
    height: 12px;
  }
}

.timeline-node.active {
  background: var(--node-color);
}

.timeline-node.upcoming {
  opacity: 0.5;
  border-color: rgba(255,255,255,0.3);
}

.timeline-node.upcoming .node-inner {
  opacity: 0.3;
}

.timeline-node.upcoming .node-glow {
  opacity: 0;
}

.timeline-node:hover {
  transform: scale(1.3);
}

.node-inner {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--node-color);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.timeline-node.active .node-inner {
  opacity: 1;
  box-shadow: 0 0 10px var(--node-color);
}

.node-glow {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--node-color);
  opacity: 0;
  animation: nodePulse 2s ease-in-out infinite;
}

.timeline-node.active .node-glow {
  opacity: 0.5;
}

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

.node-check {
  color: #0a0a0f;
  font-size: 8px;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.timeline-node.active .node-check {
  opacity: 1;
}

.timeline-card {
  position: relative;
}

.timeline-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.timeline-card:hover::before {
  opacity: 1;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  :root {
    --space-8: 3rem;
    --space-9: 3.5rem;
    --space-10: 4rem;
    --space-11: 5rem;
  }
}

@media (max-width: 480px) {
  :root {
    --space-7: 2.5rem;
    --space-8: 2.5rem;
    --space-9: 3rem;
    --space-10: 3.5rem;
    --space-11: 4rem;
  }
}

/* ============================================================
   asrmicro-style section system — 学结构保品牌（温暖未来主义）
   Clean corporate structure, warm brand palette
   ============================================================ */

/* Section eyebrow + title (形如 asrmicro 的 "ABOUT ASR / 走进翱捷") */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.section-eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-accent);
  flex-shrink: 0;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.10;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-wrap: balance;
}
.section-lead {
  margin-top: 14px;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--text-secondary);
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
}
.section-head { margin-bottom: var(--space-7); }

/* 板块标题降一档：h2 应小于页面 h1，否则与 Hero 标题视觉权重冲突。
   .section-title 默认按 h1 渲染，仅页面级 Hero 使用；板块内统一降为 h2 尺寸。 */
.section-head .section-title { font-size: var(--fs-h1); }

/* 细线分隔的版式（已并入 .section-eyebrow 统一引导线，保留兼容） */

/* ===== Stat band — "翱捷速度" 风格的数据滚动 ===== */
.stat-band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 768px) {
  .stat-band { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.stat-cell {
  background: var(--bg-primary);
  padding: 32px 20px;
  text-align: center;
  transition: background var(--duration-normal) var(--ease-out);
}
.stat-cell:hover { background: var(--bg-secondary); }
.stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 5.8vw, 60px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--brand-black);
}
.stat-suffix { font-size: 0.52em; font-weight: 600; color: var(--track-color, var(--brand-accent-deep)); }
.stat-value--text { /* 兼容保留：统一字号后无需差异化，空实现避免引用报错 */ }
.stat-label {
  margin-top: 10px;
  font-size: var(--fs-micro);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.stat-sub {
  margin-top: 2px;
  font-size: var(--fs-micro);
  color: var(--text-muted);
  opacity: 0.7;
}

/* ===== Hero video wrap (首页) ===== */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
  /* 不要任何底垫色，只保留视频本身（视频未加载时透出底层页面背景） */
  background: transparent;
  z-index: 0;
}
.hero-slogan {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--brand-black);
  white-space: pre-line;
}

/* ===== News / 动态 card (asrmicro 新闻中心风格) ===== */
.news-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 22px 22px 24px;
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}
.news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-cream-deep);
}
.news-tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(235,234,246,0.22);
  color: var(--text-muted);
  border: 1px solid rgba(235,234,246,0.30);
}
.news-year {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--track-career);
  margin-top: 14px;
}
.news-title {
  margin-top: 6px;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.6;
  color: var(--text-primary);
}
.news-desc {
  margin-top: 8px;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-secondary);
  flex: 1;
}

/* ===== Track / product matrix cards (主营业务风格) ===== */
.track-card {
  position: relative;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 28px 26px 30px;
  /* 静态白底，不靠整卡泛彩抢戏；赛道识别交给顶部 4px 满色条 + icon-tile */
  background: var(--bg-primary);
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out),
              background-color var(--duration-normal) var(--ease-out);
}
.track-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in oklch, var(--track-color, var(--track-career)) 45%, transparent);
  background: color-mix(in oklch, var(--track-color, var(--track-career)) 4%, var(--bg-primary));
}

/* ===== 统一图标块（品牌双色体系：#3d5afe ↔ #EBEAF6）=====
   全站图标 tile 共用一套配方：#EBEAF6 浅薰衣草底 + #3d5afe 品牌蓝图标。
   不再依赖 --track-color，统一为品牌双色，保证全站图标视觉一致。 */
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--brand);          /* #EBEAF6 浅薰衣草底 */
  border: none;
  color: var(--brand-accent);       /* #3d5afe 品牌蓝图标（lucide 用 currentColor） */
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(61, 90, 254, 0.10);
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              background-color var(--duration-normal) var(--ease-out);
}
.icon-tile:hover {
  transform: translateY(-2px);
  background: color-mix(in oklch, var(--brand-accent) 8%, var(--brand));
  box-shadow: 0 6px 18px rgba(61, 90, 254, 0.18);
}
.icon-tile--lg { width: 48px; height: 48px; }
.icon-tile--md { width: 40px; height: 40px; }
.icon-tile--sm { width: 36px; height: 36px; }

/* ===== CTA band ===== */
.cta-band {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(135deg, #1A1A1A 0%, #2a2118 55%, #1A1A1A 100%);
  color: var(--brand-white);
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 60% at 20% 20%, rgba(235,234,246,0.16), transparent 60%),
    radial-gradient(ellipse 40% 60% at 85% 80%, color-mix(in oklch, var(--track-career) 12%, transparent), transparent 55%);
  pointer-events: none;
}

/* ===== Full-bleed subtle band (中性交替底色，asrmicro 式克制节奏) ===== */
.band {
  background: var(--bg-subtle);
  background-image:
    linear-gradient(rgba(26,26,26,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,26,26,0.022) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
/* 空状态专用：news.items 为空时去掉薰衣草色和网格，整片纯白 */
.band--empty {
  background: #fff;
  background-image: none;
  border-top: none;
  border-bottom: none;
}

/* ===== Unified Button System — 单一强调色，全局一致 ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  /* asrmicro「进一步了解」式圆润胶囊按钮（该圆角处恢复圆角） */
  border-radius: 999px;
  padding: 13px 26px;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.btn-primary {
  background: var(--brand-accent-deep);
  color: #fff;
  box-shadow: 0 6px 18px color-mix(in oklch, var(--brand-accent-deep) 28%, transparent);
}
.btn-primary:hover {
  transform: translateY(-2px);
  background: var(--brand-accent-darker);
  box-shadow: 0 10px 26px color-mix(in oklch, var(--brand-accent-deep) 36%, transparent);
}
.btn-primary:active {
  transform: translateY(0);
  background: var(--brand-accent-darker);
}

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-medium);
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 6%, transparent);
}

/* 深色背景上的按钮 */
.btn-light {
  background: var(--brand-cream);
  color: var(--brand-black);
  box-shadow: var(--shadow-md);
}
.btn-light:hover { transform: translateY(-2px); filter: brightness(1.04); }

.btn-outline-light {
  background: transparent;
  color: var(--brand-cream);
  border-color: rgba(235,234,246,0.35);
}
.btn-outline-light:hover { background: rgba(235,234,246,0.10); }

.btn-lg { padding: 15px 32px; font-size: var(--fs-body); }
.btn-sm { padding: 10px 18px; font-size: var(--fs-micro); }

/* ===== Light feature row (图文交错) ===== */
.feature-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}
.feature-media:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slow) var(--ease-out);
}
.feature-media:hover img { transform: scale(1.05); }

/* ===== 图文卡（asrmicro 式：相关图进卡，图在上、文在下）=====
   用于 Home 四大赛道、Innovation 技术路径：每张卡带一张与赛道强相关的图，
   顶部 4px 赛道色条保留识别度，hover 轻微上浮 + 图片缓放。 */
.track-media {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out),
              background-color var(--duration-normal) var(--ease-out);
}
.track-media:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in oklch, var(--track-color, var(--track-career)) 45%, transparent);
  background: color-mix(in oklch, var(--track-color, var(--track-career)) 4%, var(--bg-primary));
}
.track-media__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.track-media__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slow) var(--ease-out);
}
.track-media:hover .track-media__media img { transform: scale(1.06); }
.track-media__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 22px;
}

/* ===== 图文并排卡（图在侧、内容在另一侧；赛道大段用）=====
   用于 Business 四大赛道：左侧相关图、右侧标题+产品矩阵；奇偶交替左右。 */
.track-split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 0;
  overflow: hidden;
  transition: box-shadow var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}
.track-split:hover {
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in oklch, var(--track-color, var(--track-career)) 35%, transparent);
}
.track-split__media {
  position: relative;
  min-height: 240px;
  overflow: hidden;
}
.track-split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}
.track-split:hover .track-split__media img { transform: scale(1.04); }
.track-split__body { padding: 24px 26px 28px; }
@media (min-width: 768px) {
  .track-split { grid-template-columns: 0.95fr 1.05fr; }
  .track-split__media { min-height: 100%; }
  .track-split--rev .track-split__media { order: 2; }
}

/* ===== Tech Hero — asrmicro「科技公司」暗色脉搏段（暖米/琥珀点缀，不返红）=====
   用于 Innovation 页首屏：近黑底 + 细网格 + 暖米光晕，给全站中段注入能量与对比。
   网格/光晕用 absolute 限定在本区块内（避免旧 .grid-background 的 fixed 溢出问题）。 */
.tech-hero {
  position: relative;
  background: linear-gradient(180deg, #0c0c12 0%, #15151f 42%, #0e0e16 100%);
  overflow: hidden;
  isolation: isolate;
}
.tech-hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(235,234,246,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(235,234,246,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 38%, #000 25%, transparent 82%);
  mask-image: radial-gradient(ellipse 85% 70% at 50% 38%, #000 25%, transparent 82%);
  animation: gridFadeIn 1.6s ease-out forwards;
}
.tech-hero-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tech-hero-glow::before,
.tech-hero-glow::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.35;
}
.tech-hero-glow::before {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(235,234,246,0.18) 0%, transparent 70%);
  top: -160px; right: -80px;
  animation: orbFloat1 22s ease-in-out infinite;
}
.tech-hero-glow::after {
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(200,132,26,0.22) 0%, transparent 70%);
  bottom: -140px; left: -60px;
  animation: orbFloat2 26s ease-in-out infinite;
}
.tech-hero .section-eyebrow { color: rgba(235,234,246,0.78); }
.tech-hero .section-eyebrow::before { background: var(--brand-accent); }
.tech-hero .section-title { color: #fff; }
.tech-hero .section-lead { color: rgba(255,255,255,0.72); }

/* 图片悬停轻微放大（已在 .feature-media 内），此处补一处暗场图片呼吸感 */
@keyframes gridFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== Typography Utilities — 全站字号统一走 CSS 变量阶梯 ===== */
@utility text-display { font-size: var(--fs-display); }
@utility text-h1 { font-size: var(--fs-h1); }
@utility text-h2 { font-size: var(--fs-h2); }
@utility text-h3 { font-size: var(--fs-h3); }
@utility text-body-lg { font-size: var(--fs-body-lg); }
@utility text-body { font-size: var(--fs-body); }
@utility text-body-sm { font-size: var(--fs-body-sm); }
@utility text-micro { font-size: var(--fs-micro); }

/* ===== 小巴适 · 动态陪伴助手 ===== */
/* 进场默认态：藏在屏外右下；.has-entered 后滑入+轻弹跳（时长 ~880ms，JS 端留 1050ms 再开口）。
   基础位置/布局/令牌保留原来语义。 */
.mascot-root {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  /* 主题色：主体用浅薰衣草；点缀用品牌蓝；车灯与星星用暖琥珀黄（光感闪耀） */
  --mascot-body: var(--brand);
  --mascot-accent: var(--brand-accent);
  --mascot-star: #F5A623;
  transition: transform 0.88s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.45s ease;
  transform: translate3d(180px, 60px, 0) rotate(-10deg);
  opacity: 0;
  will-change: transform, opacity;
}
.mascot-root.has-entered {
  transform: translate3d(0, 0, 0) rotate(0deg);
  opacity: 1;
  animation: mascotRunInBounce 0.88s cubic-bezier(0.16, 1.25, 0.3, 1);
}
.mascot-float {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  line-height: 0;
  border-radius: 50%;
  transition: transform 0.2s ease;
  user-select: none;
}
/* 配色统一主题色：覆盖 SVG 内硬编码填充 */
.mascot-svg .mascot-body { fill: var(--mascot-body); }
.mascot-svg .mascot-accent { fill: var(--mascot-accent); }
.mascot-svg .mascot-light { fill: var(--mascot-star); }
.mascot-svg .mascot-star { fill: var(--mascot-star); }
.mascot-float:hover { transform: scale(1.06); }
.mascot-float:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mascot-svg {
  display: block;
  filter: drop-shadow(0 6px 14px rgba(26, 26, 26, 0.18));
}

.mascot-bubble {
  width: min(300px, calc(100vw - 40px));
  background: var(--brand-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: 0 12px 30px rgba(26, 26, 26, 0.16);
  position: relative;
  animation: bubbleIn 0.22s ease-out;
}
.mascot-bubble::after {
  content: "";
  position: absolute;
  right: 28px;
  bottom: -8px;
  width: 16px;
  height: 16px;
  background: var(--brand-white);
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  transform: rotate(45deg);
}
.mascot-bubble-name {
  font-size: var(--fs-body); /* 16px 与正文同级，作为气泡标题"小巴适"视觉平衡；原 12px 太小，比正文还小 4px */
  line-height: 1.35;
  font-weight: 700;
  /* 品牌蓝（主题强调色），与全站 CTA/导航/链接统一，白底对比 5.07:1 过 AA */
  color: var(--brand-accent);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}
.mascot-bubble-text {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--brand-black);
  margin: 0;
}
.mascot-bubble-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  justify-content: flex-end;
}
.mascot-bubble-btn {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--brand-accent-deep);
  background: var(--brand-accent-deep);
  color: #fff;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

/* ================================================================
   全站「返回顶部」浮动按钮
   - 固定在右下角、小巴适（Mascot）正上方，避免与可拖动陪伴角色重叠
   - 滚动超过 480px 后淡入上浮；点击平滑回到页首
   - 主题强调色（品牌蓝），hover 微抬升 + 加深阴影
   ================================================================ */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 120px;
  z-index: 58;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--brand-accent);
  box-shadow: 0 8px 20px rgba(61, 90, 254, 0.35);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease, background 0.2s ease;
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover {
  background: var(--brand-accent-deep, #2a3fd6);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(61, 90, 254, 0.45);
}
.back-to-top:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@media (max-width: 640px) {
  .back-to-top {
    right: 16px;
    bottom: 104px;
    width: 42px;
    height: 42px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity 0.2s ease;
    transform: none;
  }
  .back-to-top:hover {
    transform: none;
  }
}
.mascot-bubble-btn.ghost {
  background: transparent;
  color: var(--brand-accent-deep);
}
.mascot-bubble-btn:hover { opacity: 0.9; }

/* ===== 小巴适戳戳动效（老板"有趣"交付物） =====
   进场动画和 keyframes（mascotRunInBounce）已前移到文件顶部 .mascot-root 定义处。 */
.mascot-float[data-mood="squeeze"] {
  animation: mascotSqueeze 0.62s cubic-bezier(0.16, 1.35, 0.3, 1);
}
.mascot-float[data-mood="squeeze"] .mascot-arm {
  transform-box: fill-box;
  transform-origin: 0% 100%;
  animation: mascotWave 0.38s ease-in-out 3;
}
.mascot-float[data-mood="squeeze"] .mascot-dots circle,
.mascot-float[data-mood="squeeze"] .mascot-sparks path {
  animation-duration: 0.5s;
}

@keyframes mascotRunInBounce {
  0% { transform: translate3d(180px, 60px, 0) rotate(-10deg); }
  60% { transform: translate3d(-10px, -10px, 0) rotate(4deg); }
  78% { transform: translate3d(6px, 4px, 0) rotate(-2deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}
@keyframes mascotSqueeze {
  0% { transform: translateY(0) scale(1); }
  28% { transform: translateY(6px) scale(0.92, 1.04); }
  55% { transform: translateY(-16px) scale(1.08, 0.94); }
  80% { transform: translateY(2px) scale(0.98, 1.02); }
  100% { transform: translateY(0) scale(1); }
}

/* 动效仅在用户未要求减少动效时启用 */
@media (prefers-reduced-motion: no-preference) {
  .mascot-float { animation: mascotBob 2.8s ease-in-out infinite; }
  .mascot-float[data-mood="wave"] .mascot-arm {
    transform-box: fill-box;
    transform-origin: 0% 100%;
    animation: mascotWave 1s ease-in-out infinite;
  }
  .mascot-float[data-mood="think"] .mascot-dots circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: dotPulse 1.4s ease-in-out infinite;
  }
  .mascot-float[data-mood="think"] .mascot-dots circle:nth-child(2) { animation-delay: 0.2s; }
  .mascot-float[data-mood="think"] .mascot-dots circle:nth-child(3) { animation-delay: 0.4s; }
  .mascot-float[data-mood="cheer"] { animation: mascotCheer 0.7s ease-in-out infinite; }
  .mascot-float[data-mood="cheer"] .mascot-sparks path {
    transform-box: fill-box;
    transform-origin: center;
    animation: sparkle 1.2s ease-in-out infinite;
  }
  .mascot-float[data-mood="cheer"] .mascot-sparks path:nth-child(2) { animation-delay: 0.3s; }
}

@keyframes mascotBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes mascotWave {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(16deg); }
}
@keyframes mascotCheer {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes dotPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 吉祥物进场/戳戳动效的降级（尊重 prefers-reduced-motion） */
@media (prefers-reduced-motion: reduce) {
  .mascot-root {
    transition: opacity 0.2s ease;
    transform: none !important;
    opacity: 1 !important;
  }
  .mascot-root.has-entered {
    animation: none !important;
  }
  .mascot-float,
  .mascot-float[data-mood="squeeze"],
  .mascot-float[data-mood="wave"] .mascot-arm,
  .mascot-float[data-mood="think"] .mascot-dots circle,
  .mascot-float[data-mood="cheer"],
  .mascot-float[data-mood="cheer"] .mascot-sparks path,
  .mascot-float[data-mood="squeeze"] .mascot-arm,
  .mascot-float[data-mood="squeeze"] .mascot-dots circle,
  .mascot-float[data-mood="squeeze"] .mascot-sparks path {
    animation: none !important;
  }
}

/* ================================================================
   Hero 背景：环绕中央玻璃球的精致轨道粒子动画
   - 7 圈轨道（半径 110~275px），明确围绕玻璃球外侧公转
   - 16 颗精致小点（3~6px），白核 + 淡蓝边缘，光晕柔和不抢戏
   - 每点带轻微脉冲（3s，stagger），整体节奏从容
   - 锚点对齐 hero-bg.jpg 中央玻璃球（约 70% / 38%）
   - 仅动 transform / opacity（GPU 友好）
   ================================================================ */
.hero-orbit {
  position: absolute;
  left: 70%;
  top: 46%;
  width: 0;
  height: 0;
  pointer-events: none;
}
@media (max-width: 640px) {
  /* 窄屏下图片横向裁切更多，球偏右；轨道中心随之下移以贴近主体 */
  .hero-orbit { left: 77%; top: 48%; }
}
.hero-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  animation: heroOrbitSpin 12s linear infinite;
}
.hero-orbit-slot {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  /* 预旋转到角度 a，再向外推 r —— 父级 .hero-ring 旋转时整圈绕中心公转 */
  transform: rotate(var(--a, 0deg)) translateY(calc(-1 * var(--r, 50px)));
}
.hero-orbit-dot {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  /* 柔和径向渐变：白核 → 淡蓝雾化 → 透明，告别"硬光球"观感 */
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.55) 30%,
    rgba(186, 204, 255, 0.32) 60%,
    rgba(186, 204, 255, 0) 80%
  );
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.55),
    0 0 14px rgba(186, 204, 255, 0.32);
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  animation: heroOrbitPulse 3.2s ease-in-out infinite;
}

/* 彗星拖尾：沿轨道切线方向（slot 局部 ±X 轴），公转时自然拖在运动后方
   - normal 公转（顺时针）→ 拖尾在 -X（dot 左侧）
   - reverse 公转（逆时针）→ 拖尾镜像到 +X（dot 右侧），见 .is-rev 覆盖
   - 跟随 dot 的 pulse 一起呼吸/缩放，无需单独动画 */
.hero-orbit-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(186, 204, 255, 0.55) 35%,
    rgba(186, 204, 255, 0) 100%
  );
  pointer-events: none;
}
.hero-ring.is-rev .hero-orbit-dot::before {
  right: auto;
  left: 50%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(186, 204, 255, 0.55) 35%,
    rgba(186, 204, 255, 0) 100%
  );
}

@keyframes heroOrbitSpin {
  to { transform: rotate(360deg); }
}

/* 轻微呼吸：相位由 inline animationDelay 注入（每颗错开 0.35s），避免齐刷刷 */
@keyframes heroOrbitPulse {
  0%, 100% { opacity: 0.6;  transform: translate(-50%, -50%) scale(0.85); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.25); }
}

/* ===== 轨道粒子 4 色变体（白/蓝/紫/粉）+ 加长彗星拖尾 ===== */
.hero-orbit-dot.dot-white {
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.6) 30%,
    rgba(220, 230, 255, 0.35) 60%,
    rgba(220, 230, 255, 0) 82%
  );
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.55), 0 0 18px rgba(210, 220, 255, 0.28);
}
.hero-orbit-dot.dot-white::before {
  width: 32px;
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(200, 215, 255, 0.45) 40%,
    rgba(200, 215, 255, 0) 100%
  );
}
.hero-ring.is-rev .hero-orbit-dot.dot-white::before {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(200, 215, 255, 0.45) 40%,
    rgba(200, 215, 255, 0) 100%
  );
}

.hero-orbit-dot.dot-blue {
  background: radial-gradient(
    circle,
    rgba(210, 225, 255, 0.98) 0%,
    rgba(120, 160, 255, 0.62) 32%,
    rgba(70, 110, 255, 0.30) 62%,
    rgba(70, 110, 255, 0) 84%
  );
  box-shadow: 0 0 8px rgba(120, 160, 255, 0.55), 0 0 20px rgba(61, 90, 254, 0.32);
}
.hero-orbit-dot.dot-blue::before {
  width: 36px;
  background: linear-gradient(
    to left,
    rgba(170, 198, 255, 0.9) 0%,
    rgba(85, 125, 255, 0.45) 42%,
    rgba(85, 125, 255, 0) 100%
  );
}
.hero-ring.is-rev .hero-orbit-dot.dot-blue::before {
  background: linear-gradient(
    to right,
    rgba(170, 198, 255, 0.9) 0%,
    rgba(85, 125, 255, 0.45) 42%,
    rgba(85, 125, 255, 0) 100%
  );
}

.hero-orbit-dot.dot-violet {
  background: radial-gradient(
    circle,
    rgba(232, 220, 255, 0.98) 0%,
    rgba(185, 155, 255, 0.60) 32%,
    rgba(150, 110, 255, 0.28) 62%,
    rgba(150, 110, 255, 0) 84%
  );
  box-shadow: 0 0 8px rgba(185, 155, 255, 0.55), 0 0 20px rgba(150, 110, 255, 0.30);
}
.hero-orbit-dot.dot-violet::before {
  width: 34px;
  background: linear-gradient(
    to left,
    rgba(220, 205, 255, 0.9) 0%,
    rgba(160, 130, 255, 0.44) 42%,
    rgba(160, 130, 255, 0) 100%
  );
}
.hero-ring.is-rev .hero-orbit-dot.dot-violet::before {
  background: linear-gradient(
    to right,
    rgba(220, 205, 255, 0.9) 0%,
    rgba(160, 130, 255, 0.44) 42%,
    rgba(160, 130, 255, 0) 100%
  );
}

.hero-orbit-dot.dot-pink {
  background: radial-gradient(
    circle,
    rgba(255, 230, 240, 0.98) 0%,
    rgba(255, 170, 205, 0.58) 32%,
    rgba(255, 125, 180, 0.26) 62%,
    rgba(255, 125, 180, 0) 84%
  );
  box-shadow: 0 0 8px rgba(255, 170, 205, 0.52), 0 0 20px rgba(255, 125, 180, 0.28);
}
.hero-orbit-dot.dot-pink::before {
  width: 32px;
  background: linear-gradient(
    to left,
    rgba(255, 215, 230, 0.9) 0%,
    rgba(255, 145, 193, 0.42) 42%,
    rgba(255, 145, 193, 0) 100%
  );
}
.hero-ring.is-rev .hero-orbit-dot.dot-pink::before {
  background: linear-gradient(
    to right,
    rgba(255, 215, 230, 0.9) 0%,
    rgba(255, 145, 193, 0.42) 42%,
    rgba(255, 145, 193, 0) 100%
  );
}

/* ===== 雾化光晕 orb：超大 blur 圆，静止不漂（浅底可见版：透明度×2.2） ===== */
.hero-glow-orb {
  position: absolute;
  left: var(--orb-x);
  top: var(--orb-y);
  width: calc(var(--orb-sz) * 1.15);  /* 尺寸 ×1.15，浅底上更有存在感 */
  height: calc(var(--orb-sz) * 1.15);
  border-radius: 9999px;
  background: radial-gradient(circle, var(--orb-color) 0%, transparent 80%);
  filter: blur(32px);      /* 原 28px → 略增大，扩散感更强 */
  opacity: 1.0;            /* 原 0.85 → ×1.18，完全可见 */
  mix-blend-mode: multiply;/* 浅底叠加更柔和，不突兀 */
  animation-duration: 18s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

@keyframes hero-orb-float-1 {
  0%, 100% { transform: translate(-50%, -50%) translate(0, 0) scale(1); }
  33%      { transform: translate(-50%, -50%) translate(40px, -30px) scale(1.08); }
  66%      { transform: translate(-50%, -50%) translate(-30px, 25px) scale(0.94); }
}
@keyframes hero-orb-float-2 {
  0%, 100% { transform: translate(-50%, -50%) translate(0, 0) scale(1); }
  40%      { transform: translate(-50%, -50%) translate(-36px, 30px) scale(1.05); }
  75%      { transform: translate(-50%, -50%) translate(28px, -28px) scale(0.97); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-ring { animation: none; }
  .hero-orbit-dot { animation: none; opacity: 0.82; }
  .hero-glow-orb { animation: none; }
}

/* ===== 方案B：用户不喜欢"游来游去" → 全部停移动，保留呼吸闪烁 ===== */
.hero-ring {
  animation: none !important;
}
.hero-glow-orb {
  animation: none !important;
}

/* 轨道粒子：去掉彗星游动拖尾 → 改成静态"星芒放射"（4 向渐变光线） */
.hero-orbit-dot::before,
.hero-ring.is-rev .hero-orbit-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220%;
  height: 220%;
  border-radius: 9999px;
  background:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(255, 255, 255, 0.0) 0%,
      rgba(255, 255, 255, 0.0) 28%,
      rgba(255, 255, 255, 0.0) 100%
    );
  pointer-events: none;
}
.hero-orbit-dot.dot-white::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.0) 30%, rgba(255,255,255,0.60) 42%, rgba(255,255,255,0.0) 54%),
    linear-gradient(to right, transparent 48%, rgba(255,255,255,0.48) 50%, transparent 52%),
    linear-gradient(to bottom, transparent 48%, rgba(255,255,255,0.48) 50%, transparent 52%),
    linear-gradient(45deg, transparent 48%, rgba(255,255,255,0.30) 50%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(255,255,255,0.30) 50%, transparent 52%);
}
.hero-orbit-dot.dot-blue::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(80,125,255,0.0) 30%, rgba(80,125,255,0.60) 42%, rgba(80,125,255,0.0) 54%),
    linear-gradient(to right, transparent 48%, rgba(80,125,255,0.48) 50%, transparent 52%),
    linear-gradient(to bottom, transparent 48%, rgba(80,125,255,0.48) 50%, transparent 52%),
    linear-gradient(45deg, transparent 48%, rgba(80,125,255,0.30) 50%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(80,125,255,0.30) 50%, transparent 52%);
}
.hero-orbit-dot.dot-violet::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(135,100,255,0.0) 30%, rgba(135,100,255,0.60) 42%, rgba(135,100,255,0.0) 54%),
    linear-gradient(to right, transparent 48%, rgba(135,100,255,0.48) 50%, transparent 52%),
    linear-gradient(to bottom, transparent 48%, rgba(135,100,255,0.48) 50%, transparent 52%),
    linear-gradient(45deg, transparent 48%, rgba(135,100,255,0.30) 50%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(135,100,255,0.30) 50%, transparent 52%);
}
.hero-orbit-dot.dot-pink::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,105,175,0.0) 30%, rgba(255,105,175,0.60) 42%, rgba(255,105,175,0.0) 54%),
    linear-gradient(to right, transparent 48%, rgba(255,105,175,0.48) 50%, transparent 52%),
    linear-gradient(to bottom, transparent 48%, rgba(255,105,175,0.48) 50%, transparent 52%),
    linear-gradient(45deg, transparent 48%, rgba(255,105,175,0.30) 50%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(255,105,175,0.30) 50%, transparent 52%);
}

/* HERO 左下文字（h1 / p / a）在浅底 hero-bg.jpg 上的可读阴影，保证不蒙层时也清晰 */
.hero-text-visible h1.text-white,
.hero-text-visible p.text-white,
.hero-text-visible p.text-white\/90,
.hero-text-visible a.text-white {
  text-shadow:
    0 2px 14px rgba(10, 14, 42, 0.58),
    0 0 36px rgba(10, 14, 42, 0.28);
  -webkit-font-smoothing: antialiased;
}
.hero-text-visible a.text-white {
  text-shadow:
    0 1px 10px rgba(10, 14, 42, 0.65);
  border-bottom-color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 640px) {
  .hero-glow-orb { filter: blur(18px); opacity: 0.7; }
}

/* ================================================================
   公司概览：中心节点辐射网络图（深色科技感）
   - 中心「巴适伙伴」+ 6 个可点击子节点，SVG 发光线连接
   - 点击节点 → 下方详情面板展开（交互在 OrgNetwork.tsx）
   ================================================================ */
.org-shell {
  position: relative;
  max-width: 720px;
  margin: 28px auto 0;
  padding: 24px;
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 30%, rgba(61, 90, 254, 0.14), transparent 65%),
    linear-gradient(160deg, #0a0e2a 0%, #14182f 55%, #1d2150 100%);
  box-shadow:
    inset 0 0 80px rgba(61, 90, 254, 0.10),
    0 24px 60px -28px rgba(10, 14, 42, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.org-net {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(61, 90, 254, 0.18), transparent 62%),
    linear-gradient(135deg, #0a0e2a 0%, #14182f 50%, #1d2150 100%);
  box-shadow: inset 0 0 60px rgba(61, 90, 254, 0.12);
}

.org-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.org-line {
  stroke: rgba(120, 140, 255, 0.32);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  transition: stroke 0.3s ease, opacity 0.3s ease;
}
.org-line.is-active {
  stroke: var(--brand-accent);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 4px rgba(61, 90, 254, 0.9));
}

.org-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  font-size: var(--fs-micro);
  white-space: nowrap;
}
.org-node:hover {
  border-color: var(--brand-accent);
  background: rgba(61, 90, 254, 0.18);
  box-shadow: 0 0 18px rgba(61, 90, 254, 0.5);
}
.org-node.is-active {
  border-color: var(--brand-accent);
  background: rgba(61, 90, 254, 0.28);
  box-shadow: 0 0 22px rgba(61, 90, 254, 0.7);
}

.org-node-center {
  padding: 16px 22px;
  font-size: var(--fs-body);
  background: rgba(61, 90, 254, 0.25);
  border-color: var(--brand-accent);
}
.org-node-title {
  font-weight: 600;
  line-height: 1.2;
}
.org-node-sub {
  font-size: var(--fs-micro);
  opacity: 0.7;
}

/* ===== 无障碍工具类（WCAG 2.4.1 Bypass Blocks + 2.5.8 Target Size）=====
   sr-only：视觉隐藏但屏幕阅读器可读。
   skip-link：默认隐藏，键盘 Tab 聚焦时显现，跳到主内容（绕过重复导航）。
   触控目标：桌面端导航 ≈24px（达 AA 24px 最小值），移动端导航 py-2.5≈44px（达 AAA）。 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-md);
  background: var(--brand-white);
  color: var(--brand-black);
  border: 2px solid var(--focus-ring);
  box-shadow: var(--shadow-md);
  font-weight: 600;
  transform: translateY(-150%);
  transition: transform var(--duration-fast) var(--ease-out);
}
.skip-link:focus {
  transform: translateY(0);
}

.org-panel {
  max-width: 720px;
  margin: 20px auto 0;
  min-height: 96px;
  padding: 20px 24px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e9ecff;
}
.org-panel-title {
  font-size: var(--fs-body);
  font-weight: 700;
  color: #fff;
}
.org-panel-desc {
  margin-top: 8px;
  line-height: 1.8;
  color: rgba(233, 236, 255, 0.85);
  font-size: var(--fs-body);
}
.org-panel-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  color: var(--brand-accent);
  font-weight: 600;
  font-size: var(--fs-body);
  transition: gap 0.2s ease;
}
.org-panel-link:hover {
  gap: 10px;
}

@media (max-width: 640px) {
  .org-net { aspect-ratio: 1 / 1; }
  .org-node {
    font-size: var(--fs-micro);
    padding: 7px 10px;
  }
  .org-node-center {
    font-size: var(--fs-micro);
    padding: 12px 16px;
  }
}

/* ===== 数字生活生态全景图（EcosystemMap · 首页3受众×业务页4赛道 的桥）=====
   依据 business-architecture.md §4 已确认矩阵。同一组 10 产品，赛道/受众双视角。
   动效：中心心跳 + 连接线能量流 + 节点轻浮；prefers-reduced-motion 由全局守卫降级。 */
.eco-shell {
  max-width: 1120px;
  margin: 0 auto;
}
.eco-lens {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border-radius: var(--radius-xl);
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-xs);
}
.eco-lens-btn {
  appearance: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-lg);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.eco-lens-btn:hover { color: var(--brand-black); }
.eco-lens-btn.is-active {
  color: #fff;
  background: var(--brand-accent-deep);
  box-shadow: var(--shadow-sm);
}
.eco-lens-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.eco-body {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 880px) {
  .eco-body { grid-template-columns: 1.05fr 0.95fr; align-items: start; }
}

.eco-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  max-height: 560px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(235,234,246,0.55), transparent 70%),
    var(--bg-primary);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
/* 极淡网格底纹，premium 纹理不抢戏 */
.eco-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(26,26,26,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,26,26,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center;
  pointer-events: none;
}

.eco-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.eco-line {
  stroke: var(--brand-accent);
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
  opacity: 0.35;
  animation: ecoDash 3.2s linear infinite;
  transition: opacity var(--duration-normal) var(--ease-out), stroke var(--duration-normal) var(--ease-out);
}
.eco-line.is-active {
  opacity: 0.9;
  stroke: var(--brand-accent-deep);
  stroke-width: 2;
  animation-duration: 1.6s;
}
@keyframes ecoDash {
  to { stroke-dashoffset: -7; }
}

/* 中心枢纽 */
.eco-hub {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 1.1rem 1.4rem;
  border-radius: var(--radius-xl);
  background: var(--brand-black);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}
.eco-hub:hover { transform: translate(-50%, -50%) scale(1.04); }
.eco-hub:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.eco-hub.is-active { box-shadow: 0 0 0 3px var(--brand-accent), var(--shadow-lg); }
.eco-hub-glow {
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(235,234,246,0.55) 0%, transparent 70%);
  z-index: -1;
  animation: ecoPulse 3.6s ease-in-out infinite;
}
@keyframes ecoPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.12); }
}
.eco-hub-title { font-size: var(--fs-body); font-weight: 800; letter-spacing: 0.01em; }
.eco-hub-sub { font-size: var(--fs-micro); opacity: 0.7; letter-spacing: 0.08em; }

/* 赛道 / 受众 节点 */
.eco-node {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: box-shadow var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out);
  animation: ecoFloat 6s ease-in-out infinite;
  animation-delay: var(--dly, 0s);
}
.eco-node:hover { box-shadow: var(--shadow-md); border-color: var(--brand-accent); }
.eco-node:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.eco-node.is-active {
  border-color: var(--brand-accent-deep);
  box-shadow: 0 0 0 2px var(--brand-accent), var(--shadow-md);
}
/* float 不破坏 translate(-50%,-50%) 居中：完整保留居中分量 */
@keyframes ecoFloat {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 4px)); }
}
.eco-node-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--brand-accent) 10%, transparent);
  color: var(--brand-accent-deep);
}
.eco-node-name { font-size: var(--fs-body); font-weight: 700; color: var(--brand-black); white-space: nowrap; }
.eco-node-action { font-size: var(--fs-micro); color: var(--brand-accent); font-weight: 600; letter-spacing: 0.06em; }
.eco-node-count {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--brand-accent-deep);
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: 700;
  box-shadow: var(--shadow-xs);
}

/* 详情面板 */
.eco-panel {
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}
.eco-panel-title { margin-top: 0.5rem; font-size: var(--fs-body); font-weight: 800; color: var(--brand-black); }
.eco-panel-note { margin-top: 0.35rem; font-size: var(--fs-body); color: var(--text-secondary); line-height: 1.6; }
.eco-products { margin-top: var(--space-3); display: flex; flex-direction: column; gap: 0.5rem; list-style: none; padding: 0; }
.eco-product {
  display: flex;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.eco-product:hover { border-color: var(--brand-accent); transform: translateX(2px); }
.eco-product-icon { color: var(--brand-accent-deep); padding-top: 1px; flex-shrink: 0; }
.eco-product-main { min-width: 0; flex: 1; }
.eco-product-head { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.eco-product-name { font-size: var(--fs-body); font-weight: 700; color: var(--brand-black); }
.eco-product-desc { margin-top: 0.15rem; font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.5; }

/* 受众标记：C=蓝 B=绿 F=紫（与品牌蓝/状态青绿/创新紫呼应） */
.eco-aud-dots { display: inline-flex; gap: 3px; margin-left: auto; }
.eco-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  font-size: var(--fs-micro);
  font-weight: 800;
  color: #fff;
  letter-spacing: 0;
}
.eco-dot-c { background: var(--brand-accent); }
.eco-dot-b { background: var(--status-done); }
.eco-dot-f { background: var(--icidp-innovation); }

.eco-legend {
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--fs-micro);
  color: var(--text-muted);
  line-height: 1.7;
}

/* 移动端：舞台缩小、节点紧凑、面板下移 */
@media (max-width: 879px) {
  .eco-stage { aspect-ratio: 1 / 1; max-height: 440px; }
  .eco-node { padding: 0.45rem 0.6rem; }
  .eco-node-icon { width: 28px; height: 28px; }
  .eco-node-name { font-size: var(--fs-micro); }
  .eco-node-action { font-size: var(--fs-micro); }
  .eco-hub { padding: 0.75rem 1rem; }
}
@media (max-width: 480px) {
  .eco-node-count { min-width: 18px; height: 18px; font-size: var(--fs-micro); }
  .eco-lens-btn { padding: 0.4rem 0.85rem; }
}