/* ============================================================
   refine.css — 视觉精修层（2026-08-29 威哥拍板全面升级）

   为什么单独一个文件，不直接改 style.css：
   ① style.css 里有威哥在途未提交的技能看板改动，直接改会污染
   ② 精修是「覆盖层」性质，独立文件出问题直接摘掉 link 就回滚
   ③ 加载顺序在 style.css 之后，靠层叠覆盖，不用到处加 !important

   设计语言（自建规律，非照搬任何站点）：
     底色     黑 #0A0A0B → #101012 垂直渐变（2026-08-29 威哥拍板去深蓝）
     强调     纯白 —— 三色体系不用彩色，靠明度与留白撑质感
     圆角     4-12px 微圆角，保留方正感，拒绝婴儿肥
     割线     1px 白色 8%-14% 半透明，替代硬边框
     阴影     雾面投影 —— 大范围低透明度，物体像悬在雾里而非贴纸
     留白     章节 8rem 起，元素间距占容器 20-30%
     字阶     大标题更大、行高更松、字重对比更强
   ============================================================ */

/* ─────────── 设计令牌（改一处，全站生效）─────────── */
:root {
  /* ⭐ 2026-08-29 威哥拍板：去掉深蓝，改黑/灰/白三色体系。
     纯中性灰阶最考验功力 —— 没有色彩可依赖，全靠明度层次与留白撑质感。
     黑不用纯黑 #000（死板、且深色屏上发灰），用 #0A0A0B 带一丝暖度。 */
  --ink-900: #050506;
  --ink-800: #0A0A0B;                   /* 主底 */
  --ink-700: #101012;
  --ink-600: #16161A;
  --ink-500: #1E1E22;

  /* 文字阶梯 —— 纯白透明度分层。三色体系里这是唯一的层次来源，必须拉开。 */
  --txt-1: #FFFFFF;                     /* 标题：给足纯白 */
  --txt-2: rgba(255,255,255,0.74);      /* 正文 */
  --txt-3: rgba(255,255,255,0.52);      /* 辅助 */
  --txt-4: rgba(255,255,255,0.34);      /* 眉标/脚注 */

  /* 强调色 —— 三色体系下不用彩色，改用「亮白」当强调。
     变量名保留(避免全站改引用)，值全部换成中性色阶。 */
  --cyan: #FFFFFF;
  --cyan-soft: rgba(255,255,255,0.86);
  --violet: rgba(255,255,255,0.55);

  /* 1px 半透明割线 —— 三档强度 */
  --line-1: rgba(255,255,255,0.07);     /* 极弱：列表分隔 */
  --line-2: rgba(255,255,255,0.12);     /* 常规：卡片边界 */
  --line-3: rgba(255,255,255,0.22);     /* 强调：hover/激活 */

  /* 雾面投影 —— 关键：范围大、透明度低、无锐利边缘。
     这是「悬浮在雾中」和「贴了张纸」的区别所在。 */
  /* ⭐ 评审后修正：单层阴影仍是贴纸感，必须多层叠加 ——
     内高光做轮廓、近阴影做接触、远阴影做悬浮，三层一起才有物理感。 */
  --fog-sm:
    inset 0 1px 0 rgba(255,255,255,0.055),
    0 1px 2px rgba(0,0,0,0.30),
    0 6px 20px rgba(0,0,0,0.22),
    0 18px 48px rgba(0,0,0,0.16);
  --fog-md:
    inset 0 1px 0 rgba(255,255,255,0.075),
    0 2px 4px rgba(0,0,0,0.34),
    0 12px 34px rgba(0,0,0,0.28),
    0 32px 72px rgba(0,0,0,0.22);
  --fog-lg:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 4px 10px rgba(0,0,0,0.36),
    0 24px 60px rgba(0,0,0,0.30),
    0 56px 120px rgba(0,0,0,0.24);
  /* 强调光晕：hover 时透出的冷色环境光 */
  /* hover 环境光：三色体系下用白光，不用彩色 */
  --aura-cyan: 0 0 0 1px rgba(255,255,255,0.20), 0 16px 56px rgba(255,255,255,0.055);

  /* 圆角 —— 只留三档，避免全站十几种圆角各说各话 */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  /* 节奏：章节垂直留白 */
  --gap-section: clamp(5rem, 10vw, 9rem);
}

/* ─────────── 底色：从纯色改为极缓垂直渐变 ───────────
   纯色底是平的；一层几乎看不见的渐变会让页面「有空气」。
   幅度必须极小（#0A1020→#0D1526），大了就变成廉价背景。 */
/* 2026-09-06：原先此处给 body 上渐变底色 + fixed，已被文件末尾星空主题接管，
   并统一上提到 html 层（见文末「全站底色载体」）。
   此处只保留字体渲染，不再重复定义背景，避免两层 fixed 背景相互干扰。 */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 全局细噪点 —— 消除大面积纯色的「塑料感」。
   用 SVG 湍流滤镜，不占请求、不需要图片资源。
   透明度必须极低（0.025），能感觉到但看不出来才对。 */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─────────── 字阶重排 ───────────
   吸收的排版规律：大标题要够大、字重对比要强、行高要松。
   中文行高比英文更需要松 —— 方块字密度高，1.5 以下就发闷。 */

/* 首屏主标题：更大、字距收紧（大字号必须收字距，否则松散）*/
.hero-title {
  /* ⭐ 评审后修正：原标题与副文视觉重量太接近，层次不开。
     字号拉大、字重到 850、加极淡上光（模拟顶部光源打在字缘）。 */
  font-size: clamp(3rem, 8.2vw, 6.75rem);
  font-weight: 850;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin-bottom: 1.75rem;
  background: linear-gradient(180deg, #FFFFFF 0%, #E6E6E8 62%, #A8A8AD 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-subtitle {
  font-size: clamp(1.05rem, 2.2vw, 1.55rem);
  color: var(--cyan-soft);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.01em;
  margin-bottom: 1.1rem;
}
.hero-desc {
  font-size: clamp(0.92rem, 1.4vw, 1.08rem);
  color: var(--txt-3);
  line-height: 1.85;
  letter-spacing: 0.02em;
  max-width: 44rem;
  margin-left: auto; margin-right: auto;
}

/* 章节标题：字号提升 + 字距收紧 + 下方留白加大 */
.section-title,
.page-title {
  font-size: clamp(1.85rem, 3.4vw, 2.85rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--txt-1);
  margin-bottom: 3.5rem;
}

/* ⭐ 英文眉标 —— 中文大标题上方的小字英文。
   这是通用的商务排版惯例（Why Us / Our Services 这类），
   作用是给标题「起势」，让章节有仪式感而非直接怼一行中文。
   用 data-eyebrow 属性驱动，不用改 HTML 结构层级。 */
.section-title[data-eyebrow]::before,
.page-title[data-eyebrow]::before {
  content: attr(data-eyebrow);
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--txt-4);
  margin-bottom: 1.15rem;
}

/* 章节留白加大：从 6rem 提到 clamp(5-9rem) */
.section { padding: var(--gap-section) 1.5rem; }

/* ─────────── 卡片：硬边框 → 1px 割线 + 雾面投影 ───────────
   原来是 1px 边框 + 硬阴影 = 「贴纸感」。
   改为极弱割线 + 大范围雾面投影 = 「悬浮感」。 */
.glass-card,
.scenario-card,
.feature-item,
.contact-card,
.geo-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.018) 100%);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--fog-sm);
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1),
              border-color 0.35s ease,
              box-shadow 0.45s ease;
}

/* 卡片顶部高光细线 —— 模拟顶部光源打在边缘上。
   一条 1px 的渐变线，是「有光源」和「没光源」的分界。 */
.glass-card::after,
.scenario-card::after {
  content: '';
  position: absolute; top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  pointer-events: none;
}
.glass-card, .scenario-card { position: relative; }

/* hover：抬升 + 冷色环境光，位移放小（6px→4px，克制）*/
.glass-card:hover,
.scenario-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.24);
  box-shadow: var(--fog-md), var(--aura-cyan);
}

/* 卡片内部：留白加大、字阶分明 */
.glass-card { padding: 2.35rem 2rem; }
.glass-card h3,
.scenario-card h3 {
  font-size: 1.16rem;
  font-weight: 650;
  color: var(--txt-1);
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin-bottom: 0.85rem;
}
.glass-card p,
.scenario-card p {
  font-size: 0.93rem;
  color: var(--txt-3);
  line-height: 1.85;
  letter-spacing: 0.015em;
}

/* 卡片图标：从大 emoji 改为「装在容器里」，更像产品少像表情
   —— emoji 直接裸放是最容易显廉价的一处 */
.card-icon,
.scenario-icon {
  width: 3rem; height: 3rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: var(--r-md);
  margin-bottom: 1.5rem;
}

/* ─────────── 功能特性：一行行的清单感 ─────────── */
.feature-item {
  padding: 1.15rem 1.35rem;
  border-radius: var(--r-md);
  box-shadow: none;
  gap: 0.85rem;
}
.feature-item:hover {
  border-color: var(--line-3);
  background: rgba(255,255,255,0.055);
}
.feat-text {
  font-size: 0.95rem;
  color: var(--txt-2);
  letter-spacing: 0.015em;
  line-height: 1.6;
}

/* ─────────── 关键指标区（新增）───────────
   大数字比形容词有说服力。
   ⚠️ 只放我们真实测得的数据，不编造百分比。 */
.metrics-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;                                  /* 用 1px 间隙做割线，比画边框干净 */
  background: var(--line-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--fog-md);
  margin-top: 1rem;
}
.metric-cell {
  background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  padding: 2.35rem 1.5rem;
  text-align: center;
  transition: background 0.4s ease;
}
.metric-cell:hover { background: rgba(255,255,255,0.045); }
.metric-num {
  display: block;
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  /* ⭐ 评审后修正：青→紫全色相渐变被批「廉价科技感」。
     改白→淡蓝金属高光，只在下缘透一点青 ——
     高级感来自「光打在白色数字上」，而非「数字本身是彩色的」。 */
  background: linear-gradient(178deg, #FFFFFF 0%, #EDEDEF 46%, #B4B4B9 82%, #85858B 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.7rem;
  font-variant-numeric: tabular-nums;
}
.metric-label {
  font-size: 0.85rem;
  color: var(--txt-3);
  letter-spacing: 0.04em;
  line-height: 1.55;
}

/* ─────────── 流程条：箭头 → 带连接线的节点 ─────────── */
.flow-step {
  background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 1.6rem 1.9rem;
  box-shadow: var(--fog-sm);
  transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
}
.flow-step.active {
  border-color: rgba(255,255,255,0.34);
  box-shadow: var(--fog-md), var(--aura-cyan);
}
.step-label {
  font-size: 0.95rem; color: var(--txt-2);
  letter-spacing: 0.02em;
}
/* 箭头改为细连接线：符号感弱一点，秩序感强一点 */
.flow-arrow {
  color: var(--txt-4);
  font-size: 1rem;
  opacity: 0.5;
}

/* ─────────── 按钮：更方、更沉、更克制 ─────────── */
.btn-primary,
.btn-secondary {
  border-radius: var(--r-sm);
  letter-spacing: 0.03em;
  font-weight: 600;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.35s ease, background 0.3s ease;
}
.btn-primary {
  /* 三色体系：主按钮用白底黑字 —— 纯中性下最强的视觉重量 */
  background: #FFFFFF;
  color: #0A0A0B;
  box-shadow: 0 6px 22px rgba(0,0,0,0.5), inset 0 -1px 0 rgba(0,0,0,0.10);
}
.btn-primary:hover {
  transform: translateY(-2px);
  background: #F0F0F1;
  box-shadow: 0 12px 34px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.14);
}
.btn-secondary {
  background: rgba(255,255,255,0.045);
  border: 1px solid var(--line-2);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.075);
  border-color: var(--line-3);
  transform: translateY(-2px);
}

/* ─────────── 首屏氛围光 ───────────
   两团极大范围的低透明径向光斑，模拟环境漫射。
   关键是「大而淡」：半径要大过屏幕，透明度要低到几乎看不见。 */
.hero-section::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 82% 58% at 50% -6%,  rgba(255,255,255,0.075), transparent 70%),
    radial-gradient(ellipse 55% 42% at 78% 26%,  rgba(255,255,255,0.035), transparent 72%);
}

/* 首屏底部网格地平线 —— 极细线条网格，给空间一个「地面」。
   遮罩让它向上淡出，避免生硬截断。 */
.hero-section::before {
  content: '';
  position: absolute;
  /* ⭐ 评审后修正：原被批「边缘过渡生硬、像粗糙贴图」。
     两处病根：① 线太亮 0.035→0.022
              ② 纵向遮罩让左右两侧硬切 → 改径向遮罩四面淡出
     并加透视斜角，让它真像「地面」而不是贴在屏上的方格纸。 */
  left: -25%; right: -25%; bottom: 0; height: 46vh;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(ellipse 62% 100% at 50% 118%, rgba(0,0,0,0.9) 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 62% 100% at 50% 118%, rgba(0,0,0,0.9) 0%, transparent 72%);
  transform: perspective(680px) rotateX(62deg);
  transform-origin: bottom center;
  top: auto; width: auto;
  border-radius: 0;
}

/* ─────────── 章节分隔：极淡水平割线 ───────────
   不用粗分隔线，用一条两端淡出的 1px 线，暗示边界而不打断视线。 */
.section + .section .section-inner::before {
  content: '';
  display: block;
  height: 1px;
  width: min(100%, 1280px);
  margin: 0 auto calc(var(--gap-section) * 0.62);
  background: linear-gradient(90deg, transparent, var(--line-2) 22%, var(--line-2) 78%, transparent);
}

/* ─────────── CTA：收进容器，别通栏铺满 ─────────── */
.cta-inner {
  background: linear-gradient(160deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.022) 100%);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: clamp(3rem, 7vw, 5rem) 2rem;
  box-shadow: var(--fog-lg);
  position: relative; overflow: hidden;
}
.cta-inner::before {
  content: '';
  position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
}
.cta-title {
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--txt-1);
  margin-bottom: 2.25rem;
}

/* ─────────── 移动端：留白收一档，字阶跟着降 ─────────── */
@media (max-width: 768px) {
  :root { --gap-section: 3.75rem; }
  .glass-card { padding: 1.75rem 1.4rem; }
  .metric-cell { padding: 1.75rem 1rem; }
  .section-title[data-eyebrow]::before,
  .page-title[data-eyebrow]::before {
    font-size: 0.7rem; letter-spacing: 0.16em; margin-bottom: 0.85rem;
  }
  .section-title, .page-title { margin-bottom: 2.5rem; }
  /* 移动端网格地平线收窄，免得挤压首屏文字 */
  .hero-section::before { height: 26vh; background-size: 48px 48px; }
}

/* ─────────── 无障碍：尊重系统「减少动效」偏好 ───────────
   这不是可选项 —— 前庭功能敏感的人看动效会不适。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════ 设计评审后的第二轮修正（2026-08-29）═══════════════
   评审批评（照单收下，逐条改）：
   ① 图标风格割裂（表情/扁平/3D 混杂）→ 全站统一线性 SVG
   ② 完美居中太呆板 → 首屏改左对齐，破掉中轴线
   ③ 卡片内文字行宽过长 → 限宽 + 留白加大
   ══════════════════════════════════════════════════════════════ */

/* ─── 统一线性图标：同一套规格，杜绝风格打架 ─── */
.ico {
  width: 1.45rem; height: 1.45rem;
  display: block;
  color: var(--cyan-soft);
  stroke-width: 1.5;
  flex: 0 0 auto;
}
/* 卡片大图标容器里的图标略大一点 */
.card-icon .ico,
.scenario-icon .ico { width: 1.6rem; height: 1.6rem; }
.card-icon, .scenario-icon { color: var(--cyan-soft); }

/* 功能清单的小图标：容器化，与卡片图标同语言 */
.feat-icon {
  width: 2.15rem; height: 2.15rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-sm);
  flex: 0 0 auto;
}
.feat-icon .ico { width: 1.15rem; height: 1.15rem; }

/* 流程步骤图标 */
.step-icon { display: inline-flex; color: var(--cyan-soft); margin-bottom: 0.6rem; }
.step-icon .ico { width: 1.5rem; height: 1.5rem; }

/* hover 时图标提亮 —— 微反馈，让卡片"活"一点 */
.glass-card:hover .ico,
.scenario-card:hover .ico,
.feature-item:hover .ico { color: #FFFFFF; }

/* ─── 首屏回归居中（2026-09-06 威哥要求）───
   此前桌面端为「破呆板」改成左对齐 + 内容偏左 + 副标题起势竖线。
   现改回中轴居中：标题/副标题/描述/按钮全部居中，
   配套的副标题竖线一并撤掉（居中排版下竖线会破坏对称）。 */
@media (min-width: 992px) {
  .hero-section { justify-content: center; text-align: center; }
  .hero-content {
    max-width: 60rem;
    padding-left: 0;
    margin: 0 auto;
  }
  .hero-desc { margin-left: auto; margin-right: auto; }
  .hero-buttons { justify-content: center; }
  /* 居中排版下不再需要起势短线 */
  .hero-subtitle { position: static; padding-left: 0; }
  .hero-subtitle::before { content: none; }
}

/* ─── 卡片内文字行宽：过长影响阅读节奏 ─── */
.glass-card p,
.scenario-card p { max-width: 30rem; }
.glass-card { padding: 2.5rem 2.15rem 2.35rem; }

/* ─── 指标区：数字与说明的空间关系再调 ─── */
.metric-cell { padding: 2.6rem 1.5rem 2.4rem; }
.metric-label {
  max-width: 11rem;
  margin: 0 auto;
  display: block;
}

/* ═══════════════ 第三轮修正（2026-08-29 设计复检后）═══════════════
   复检确认前 7 项问题已全部解决，新提 3 项：
   ① 标题明度偏低，不够通透
   ② 首屏右侧过空（左对齐带来的副作用）
   ③ 6 个功能点被 auto-fit 排成 4+2，不规整
   ══════════════════════════════════════════════════════════════ */

/* ─── ③ 功能网格：固定 3 列，6 项 = 整齐 2×3 ───
   病根：auto-fit + minmax(280px) 在 1280px 容器下算出 4 列 → 4+2 断行。
   改固定列数，宽屏 3 列、中屏 2 列、窄屏 1 列，永远不会落单。 */
.features-grid { grid-template-columns: repeat(3, 1fr); gap: 1.15rem; }
@media (max-width: 900px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features-grid { grid-template-columns: 1fr; } }

/* 四大核心卡片同理：2×2 而非 auto-fit 乱排 */
@media (min-width: 1024px) { .cards-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) and (max-width: 1023px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }

/* ─── ① 标题提亮：拉开与深底的明度差 ───
   原渐变末端 #A9BDD4 压太暗，整体发灰。
   末端提到 #C8D8E8，并保留顶部纯白起点 → 更通透。 */
.hero-title {
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F2F3 40%, #B8B8BC 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 极淡外发光：让白字在深底上"亮起来"而非贴上去 */
  filter: drop-shadow(0 2px 20px rgba(255,255,255,0.13));
}
/* 章节标题同步提亮 */
.section-title, .page-title { color: #FAFAFA; }

/* ─── ③ 图标线条太细弱 → 加粗到 1.75 ───
   1.5px 在深色底上会"糊"掉，视觉上显虚。 */
.ico { stroke-width: 1.75; }
.feat-icon .ico { stroke-width: 1.85; }

/* ─── ② 首屏右侧留白：加抽象几何视觉锚点 ───
   评审建议放产品 UI 示意图。但我们没有现成素材（图片通道不可用），
   所以用纯 CSS 画一组同心环 + 轨道点：
   既填补空白、又不冒充截图、也不增加请求。
   桌面端才显示 —— 窄屏放不下，硬塞会挤压文字。 */
@media (min-width: 1200px) {
  .hero-content { position: relative; }
  .hero-content::after {
    content: '';
    position: absolute;
    /* 2026-09-06 首屏改居中：原 right:-34vw 是配合左对齐的右侧偏移，
       居中后会视觉失衡。改为以标题为圆心的对称环绕，同时降低不透明度
       避免盖过文字。 */
    left: 50%; top: 50%;
    width: 46vw; height: 46vw;
    max-width: 720px; max-height: 720px;
    transform: translate(-50%, -50%);
    /* 不用 z-index:-1：负值会让伪元素沉到父元素背景层之下，
       遇上 .hero-section 的层叠上下文会连文字一起压没。
       改用：伪元素不设 z-index（默认 auto，位于内容之下），
       由下方给文字子元素显式提层。 */
    pointer-events: none;
    border-radius: 50%;
    /* 三层同心环 + 中心辉光，用多重 radial/conic 叠出"仪表"感 */
    background:
      radial-gradient(circle at 50% 50%, rgba(255,255,255,0.075) 0%, transparent 42%),
      conic-gradient(from 210deg, rgba(255,255,255,0.20), transparent 32%, transparent 68%, rgba(255,255,255,0.10));
    -webkit-mask:
      radial-gradient(circle, transparent 27%, #000 27.6%, #000 28.4%, transparent 29%),
      radial-gradient(circle, transparent 40%, #000 40.6%, #000 41.4%, transparent 42%),
      radial-gradient(circle, transparent 49%, #000 49.5%, #000 50.3%, transparent 51%),
      radial-gradient(circle, #000 0%, #000 24%, transparent 26%);
    mask:
      radial-gradient(circle, transparent 27%, #000 27.6%, #000 28.4%, transparent 29%),
      radial-gradient(circle, transparent 40%, #000 40.6%, #000 41.4%, transparent 42%),
      radial-gradient(circle, transparent 49%, #000 49.5%, #000 50.3%, transparent 51%),
      radial-gradient(circle, #000 0%, #000 24%, transparent 26%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
    animation: ringSpin 46s linear infinite;
    opacity: 0.85;
  }
}
@keyframes ringSpin { to { transform: translateY(-50%) rotate(360deg); } }

/* ─── 第四轮：修最后一处硬伤 ───
   评审：底部「向下探索」在深底上过于单薄，对比度不足，
   大屏上可能被当成无效杂点。
   改：文字提亮 + 箭头加缓动浮动，强化引导属性。 */
.scroll-indicator {
  color: rgba(240,244,248,0.62);
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  text-transform: uppercase;
  animation: scrollFloat 2.6s ease-in-out infinite;
}
.scroll-indicator span { color: rgba(240,244,248,0.66); }
.scroll-arrow {
  border-color: rgba(255,255,255,0.7);
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.28));
}
/* 整体缓慢上下浮动 —— 比闪烁更含蓄，也更明确地"指向下方"
   ⚠️ 2026-09-06：指示器居中靠 translateX(-50%)，关键帧必须带上它，
   否则 transform 会被整体覆盖导致水平居中失效。 */
@keyframes scrollFloat {
  0%, 100% { transform: translateX(-50%) translateY(0);   opacity: 0.72; }
  50%      { transform: translateX(-50%) translateY(7px); opacity: 1; }
}
/* 2026-09-06 首屏改居中：指示器跟着回到中轴
   （原为配合左对齐而左移，居中后必须还原，否则孤在左下角） */
@media (min-width: 992px) {
  .scroll-indicator { left: 50%; transform: translateX(-50%); }
}

/* ─── 移动端按钮微调（第五轮，最后一处）───
   评审：按钮占屏 90% 过于笨重、两按钮几乎贴在一起。 */
@media (max-width: 640px) {
  .hero-buttons {
    flex-direction: column;
    gap: 0.85rem;              /* 原来贴在一起，补 ~13px 间距 */
    align-items: center;
    width: 100%;
  }
  .hero-buttons .btn-lg {
    width: 82%;                /* 90% → 82%，两侧留出呼吸 */
    max-width: 20rem;
    text-align: center;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   顶部导航重做（2026-08-29 威哥要求 2 & 4）
   参考站的做法：胶囊背景高亮，不用下划线。
   为什么胶囊优于下划线：三色体系下没有彩色可用，
   一条 2px 白线太细弱；一块半透明胶囊面积够，能撑起视觉重量。
   ═══════════════════════════════════════════════════════════════ */

/* 导航栏本体：黑底毛玻璃 */
.navbar { padding: 0.85rem 0; }
.navbar.scrolled {
  padding: 0.55rem 0;
  background: rgba(10,10,11,0.82);
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  border-bottom: 1px solid var(--line-1);
}

/* 菜单容器：整体收进一个极淡的胶囊槽里，像一组分段控件 */
.nav-menu {
  gap: 0.15rem;
  padding: 0.28rem;
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--line-1);
  border-radius: 999px;
}

/* 链接改胶囊：干掉原来的下划线方案 */
.nav-link {
  color: rgba(255,255,255,0.62);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.46rem 0.92rem;
  border-radius: 999px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 0.22s ease, background 0.22s ease;
}
/* 原下划线彻底禁用（style.css 里的 ::after）*/
.nav-link::after { display: none !important; }

.nav-link:hover { color: #FFFFFF; background: rgba(255,255,255,0.07); }
.nav-link.active {
  color: #0A0A0B;
  background: #FFFFFF;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

/* ⭐ 点击交互反馈（要求 2）——
   三段式：按下瞬间缩、松开回弹、外扩一圈涟漪。
   关键是「按下就有反应」，不等页面跳转 —— 这是感知速度的来源。 */
.nav-link { position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.nav-link:active { transform: scale(0.955); transition-duration: 0.06s; }

/* 涟漪：用伪元素做，从中心扩散后淡出 */
.nav-link::before {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transform: translate(-50%,-50%) scale(0);
  opacity: 0;
  pointer-events: none;
}
.nav-link.rippling::before { animation: navRipple 0.52s cubic-bezier(0.22,1,0.36,1); }
@keyframes navRipple {
  0%   { transform: translate(-50%,-50%) scale(0);  opacity: 0.55; }
  100% { transform: translate(-50%,-50%) scale(16); opacity: 0; }
}

/* Logo：emoji 换成纯字标，三色体系下 emoji 是彩色异物 */
.nav-logo { gap: 0.55rem; }
.logo-icon {
  width: 1.72rem; height: 1.72rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 800;
  color: #0A0A0B;
  background: #FFFFFF;
  border-radius: 6px;
  letter-spacing: -0.04em;
}
.logo-text {
  font-weight: 700; font-size: 1.05rem;
  letter-spacing: -0.01em; color: #FFFFFF;
}

/* 右侧按钮 */
.nav-btn-secondary {
  color: rgba(255,255,255,0.78);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 0.44rem 1.05rem;
  font-size: 0.855rem; font-weight: 500;
  background: transparent;
  transition: all 0.24s ease;
}
.nav-btn-secondary:hover {
  color: #FFF; border-color: var(--line-3);
  background: rgba(255,255,255,0.06);
}
.nav-btn-secondary:active { transform: scale(0.96); }

.nav-btn-primary {
  background: #FFFFFF; color: #0A0A0B;
  border: 1px solid #FFFFFF;
  border-radius: 999px;
  padding: 0.44rem 1.15rem;
  font-size: 0.855rem; font-weight: 650;
  box-shadow: 0 2px 12px rgba(0,0,0,0.42);
  transition: all 0.24s ease;
}
.nav-btn-primary:hover {
  background: #EFEFF0;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.55);
}
.nav-btn-primary:active { transform: translateY(0) scale(0.97); }

/* 用户胶囊去彩色 */
.nav-btn-user {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line-2);
}
.nav-btn-user:hover {
  background: rgba(255,255,255,0.09);
  border-color: var(--line-3);
}
.avatar-circle { background: #FFFFFF; color: #0A0A0B; }
.user-dropdown-menu {
  background: rgba(16,16,18,0.96);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  backdrop-filter: blur(18px);
}
.user-dropdown-item { color: rgba(255,255,255,0.78); }
.user-dropdown-item:hover { background: rgba(255,255,255,0.07); color: #FFF; }

/* 窄屏：回落成侧滑抽屉（沿用 style.css 的 right:-100% 逻辑）
   ⚠️ 教训：这里原先我覆盖了 padding 和 border-radius，
   结果破坏了抽屉隐藏计算 —— 收起状态停在 left:500 撑出 780px 横向滚动。
   实测抓到(scrollW 780 vs clientW 390)。
   现在只改配色，绝不碰 position/padding/width 这些定位相关属性。 */
@media (max-width: 991px) {
  .nav-menu {
    background: rgba(7,12,27,0.97);
    border-left: 1px solid rgba(255,255,255,0.09);
  }
  .nav-link { border-radius: var(--r-sm); }
}

/* 滚动条去彩色 */
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16) !important; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.26) !important; }

/* ═══════════════════════════════════════════════════════════════
   Footer 重构（2026-08-29 威哥要求 3）
   把原「联系我们」独立页的核心信息搬进页脚多列布局。
   排版要点：列宽不等分 —— 品牌列宽、链接列窄、联系列中等，
   等分会让链接列显得空、联系列显得挤。
   ═══════════════════════════════════════════════════════════════ */
.footer {
  background: var(--ink-900);
  border-top: 1px solid var(--line-2);
  padding: 0;
  margin-top: 0;
}
.footer-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 4.75rem) 1.5rem clamp(2.25rem, 4vw, 3.25rem);
  display: grid;
  /* 不等分：品牌 1.5 / 三个链接列各 1 / 联系 1.5 */
  grid-template-columns: 1.55fr 1fr 1fr 1fr 1.5fr;
  gap: clamp(1.5rem, 3vw, 3rem);
}

/* ─ 品牌列 ─ */
.footer-logo {
  display: flex; align-items: center; gap: 0.5rem;
  text-decoration: none; margin-bottom: 1.15rem;
  flex-wrap: wrap;
}
.footer-logo-mark {
  width: 1.62rem; height: 1.62rem;
  display: flex; align-items: center; justify-content: center;
  background: #FFFFFF; color: #0A0A0B;
  font-weight: 800; font-size: 0.85rem;
  border-radius: 5px; letter-spacing: -0.04em;
}
.footer-logo-text { color: #FFF; font-weight: 700; font-size: 1.02rem; }
.footer-logo-sep  { color: rgba(255,255,255,0.2); font-weight: 300; }
.footer-logo-en   { color: rgba(255,255,255,0.72); font-weight: 600; font-size: 0.98rem; letter-spacing: -0.01em; }
.footer-slogan {
  color: var(--txt-3);
  font-size: 0.855rem;
  line-height: 1.9;
  letter-spacing: 0.015em;
  max-width: 17rem;
}

/* ─ 链接列 ─ */
.fcol { display: flex; flex-direction: column; min-width: 0; }
.fcol-title {
  color: rgba(255,255,255,0.5);
  font-size: 0.755rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 1.35rem;
}
.fcol > a {
  color: var(--txt-2);
  text-decoration: none;
  font-size: 0.885rem;
  line-height: 1.5;
  padding: 0.42rem 0;
  letter-spacing: 0.015em;
  transition: color 0.22s ease, transform 0.22s ease;
  width: fit-content;
}
.fcol > a:hover { color: #FFFFFF; transform: translateX(3px); }

/* ─ 联系方式列 ─ */
.fcol-contact .fc-row {
  display: flex; align-items: baseline; gap: 0.6rem;
  padding: 0.36rem 0;
  font-size: 0.875rem;
}
.fc-label {
  color: var(--txt-4);
  font-size: 0.79rem;
  flex: 0 0 auto;
  min-width: 3.9rem;
  letter-spacing: 0.02em;
}
.fcol-contact a {
  color: var(--txt-2);
  text-decoration: none;
  transition: color 0.22s ease;
  letter-spacing: 0.01em;
}
.fcol-contact a:hover { color: #FFFFFF; }
/* 主要电话给足重量 —— 页脚里这是转化入口，不该和普通链接一样轻 */
.fc-strong {
  color: #FFFFFF !important;
  font-weight: 650;
  font-size: 0.945rem;
  font-variant-numeric: tabular-nums;
  /* 8-30 真渲染体检：电话链接只有 16px 高，移动端手指几乎按不中（HIG 44px）。
     页脚行高拉足 + 链接本身撑大可触达区，不破坏视觉。 */
  display: inline-block;
  padding: 0.35rem 0.25rem;
  min-height: 28px;
}

/* 商务合作 CTA：带边框的行内块，比纯文字链接更像按钮 */
.fc-cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 1.15rem;
  padding: 0.58rem 1rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: 0.85rem;
  font-weight: 550;
  color: #FFFFFF !important;
  background: rgba(255,255,255,0.045);
  transition: all 0.24s ease;
  width: fit-content;
}
.fc-cta:hover {
  background: #FFFFFF;
  color: #0A0A0B !important;
  border-color: #FFFFFF;
  transform: translateY(-1px);
}
.fc-arrow { transition: transform 0.24s ease; font-size: 1.05rem; line-height: 1; }
.fc-cta:hover .fc-arrow { transform: translateX(3px); }

.fc-addr {
  margin: 1.15rem 0 0;
  color: var(--txt-4);
  font-size: 0.775rem;
  line-height: 1.75;
  letter-spacing: 0.02em;
}

/* ─ 底部备案条 ─ */
.footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.35rem 1.5rem 1.6rem;
  border-top: 1px solid var(--line-1);
  display: flex; align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; gap: 0.85rem;
}
.fb-left {
  display: flex; align-items: center;
  flex-wrap: wrap; gap: 0.4rem 1.4rem;
  font-size: 0.775rem;
  color: var(--txt-4);
}
.fb-left a {
  color: var(--txt-4);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.32rem;
  transition: color 0.22s ease;
}
.fb-left a:hover { color: rgba(255,255,255,0.72); }
.fb-left img { opacity: 0.55; vertical-align: middle; }
.fb-right { font-size: 0.755rem; color: var(--txt-4); letter-spacing: 0.06em; }

/* ─ 响应式：五列 → 两列 → 单列 ─ */
@media (max-width: 1080px) {
  .footer-main { grid-template-columns: 1.4fr 1fr 1fr; row-gap: 2.75rem; }
  .fcol-contact { grid-column: 1 / -1; }
  .fcol-contact .fc-row { max-width: 22rem; }
}
@media (max-width: 680px) {
  .footer-main {
    grid-template-columns: 1fr 1fr;
    padding-top: 2.75rem;
    row-gap: 2.35rem;
  }
  .fcol-brand { grid-column: 1 / -1; }
  .footer-slogan { max-width: none; }
  .fcol-title { margin-bottom: 1rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
  .footer-main { grid-template-columns: 1fr; }
  .fc-label { min-width: 3.4rem; }
}

/* ═══════════════════════════════════════════════════════════════
   设计复检修正（2026-08-29 第二轮）
   评审三条硬伤，照单收下：
   ① 导航外围胶囊槽笨重 —— 深底+深槽+刺白激活项三重叠加，视觉疲劳
   ② 联系方式标签与数值贴在一起，无对齐规则（评为全页最差一块）
   ③ 激活项太刺眼导致导航视觉重心失衡
   ══════════════════════════════════════════════════════════════ */

/* ─── ① 删掉外围胶囊槽 ───
   我加这圈槽本想做「分段控件」感，结果给黑底又添一层重量。
   删掉后菜单项直接浮在黑底上，轻盈得多。 */
.nav-menu {
  background: transparent;
  border: none;
  padding: 0;
  gap: 0.1rem;
}

/* ─── ③ 激活态降刺眼 + 非激活态提亮，找回平衡 ───
   原来纯白底#FFF太抢，且其余灰字 0.62 太弱 → 两头往中间收。 */
.nav-link { color: rgba(255,255,255,0.72); padding: 0.44rem 0.82rem; }
.nav-link:hover { color: #FFFFFF; background: rgba(255,255,255,0.075); }
.nav-link.active {
  color: #0A0A0B;
  /* 白色压到 0.92 —— 仍是最强项，但不再灼眼 */
  background: rgba(255,255,255,0.92);
  font-weight: 600;
  box-shadow: none;
}

/* 滚动后导航：加深底色 + 底部渐隐，让内容"沉"进去有纵深 */
.navbar.scrolled {
  background: rgba(8,8,9,0.90);
  border-bottom: 1px solid var(--line-1);
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
}

/* ─── ② 重排联系方式：标签左、数值右，横向信息条 ───
   评审说"标签与数值直接贴在一起，没有对齐规则"。
   改 space-between 两端对齐 + 极淡虚线连接，像一份规整的资料表。 */
.fcol-contact .fc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.055);
}
.fcol-contact .fc-row:last-of-type { border-bottom: none; }
.fc-label {
  color: var(--txt-4);
  font-size: 0.775rem;
  letter-spacing: 0.03em;
  min-width: auto;
  flex: 0 0 auto;
}
/* 数值右对齐 */
.fcol-contact .fc-row > a { text-align: right; }
.fc-strong { font-size: 0.9rem; font-weight: 600; }

/* CTA 改幽灵按钮：减轻视觉负担（评审建议）*/
.fc-cta {
  margin-top: 1.5rem;
  padding: 0.62rem 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  font-weight: 550;
  width: 100%;
  justify-content: space-between;
  color: rgba(255,255,255,0.88) !important;
}
.fc-cta:hover {
  background: transparent;
  color: #FFFFFF !important;
  border-bottom-color: rgba(255,255,255,0.45);
  transform: none;
}

/* 地址：拉开留白与行距，别和按钮挤一起 */
.fc-addr {
  margin-top: 1.5rem;
  font-size: 0.765rem;
  line-height: 1.95;
  color: var(--txt-4);
  max-width: 15rem;
}

/* ─── 页脚与上方的过渡：加一层顶部渐变，别硬切 ───
   评审说"上方大量留白，页脚信息密度突然增大，过渡生硬"。 */
.footer {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.022) 0%, transparent 18%),
    var(--ink-900);
}
.footer-main { padding-top: clamp(3.5rem, 7vw, 5.5rem); }

/* ─── 副标题竖杠样式（2026-09-06 首屏改居中后已停用）───
   保留规则但不再生效：上方 992px 断点已设 content: none。 */

/* ─── 第三轮微调：修掉最后 0.5 分 ───
   ① 页脚品牌简介字号偏小、对比度弱
   ② 导航滚动投影是黑色硬投影，与纯净深邃感割裂 → 改极淡白色透光 */
.footer-slogan {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.62);
  line-height: 1.95;
}
.navbar.scrolled {
  /* 黑投影换成一道极淡的顶部白色透光 + 极弱黑色垫底，
     纯净感来自「光」而非「阴影」 */
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,0.055),
    0 10px 30px rgba(0,0,0,0.32);
}

/* ─── 移动端页脚最后修正 ───
   评审：地址「1110」和「· 王先生」被挤成单独两行，右侧留白过大。
   病根：max-width:15rem 在 390px 屏上把文字硬压窄了。
   改：窄屏放开限宽，并把联系人拆成独立行（不用「·」硬接）。 */
@media (max-width: 680px) {
  .fc-addr {
    max-width: none;
    font-size: 0.79rem;
    line-height: 1.85;
    margin-top: 1.25rem;
  }
  /* 邮箱较长，窄屏允许换行不挤压标签 */
  .fcol-contact .fc-row { gap: 1rem; }
  .fcol-contact .fc-row > a { word-break: break-all; }
}
.fc-person { color: rgba(255,255,255,0.44); }

/* ═══════════════════════════════════════════════════════════════
   宇宙星辰背景（2026-08-29 威哥要求）

   分层说明 —— 为什么只改背景层，不改界面元素：
     背景层  深蓝宇宙 + 星辰（氛围）
     界面层  白 / 中性灰（导航胶囊、按钮、卡片割线保持不变）
   两者分层才不会糊成一片；如果连按钮卡片都染蓝，
   上一版刚做出来的干净利落会全部丢掉。

   深蓝不是回到原来的 #0A1020 ——
   宇宙需要「越往深处越黑」的纵深，所以用三段式：
     顶部 稍亮的夜蓝（有光的一侧）
     中部 深海军蓝
     底部 近乎黑（深空）
   ═══════════════════════════════════════════════════════════════ */
:root {
  --space-1: #0B1226;   /* 顶部：夜蓝 */
  --space-2: #070C1B;   /* 中部：深海军蓝 */
  --space-3: #04070F;   /* 底部：深空近黑 */
}

/* ─── 全站底色载体：挂在 html 而非 body ───
   2026-09-06 修复：原先背景写在 body + background-attachment:fixed。
   fixed 会把背景绘制区锁死为「一个视口」，页面一旦高于视口
   （/productivity 3078px、/developers 1345px），超出部分无背景可画，
   直接露出浏览器默认白底 —— 表现为「上半深色、下半泛白、文字消失」。
   改挂 html：其背景由浏览器自动铺满整个画布高度，任意页面长度都成立。
   同时保留 fixed 以维持滚动时星云不跟随位移的纵深感。 */
html {
  background:
    radial-gradient(ellipse 68% 48% at 18% 12%,  rgba(86,124,214,0.085), transparent 62%),
    radial-gradient(ellipse 54% 40% at 86% 26%,  rgba(126,104,206,0.062), transparent 66%),
    radial-gradient(ellipse 78% 52% at 50% 104%, rgba(46,78,150,0.070), transparent 64%),
    linear-gradient(180deg, var(--space-1) 0%, var(--space-2) 46%, var(--space-3) 100%);
  background-attachment: fixed;
  background-color: var(--space-2);
}

/* body 自身不再承载背景，避免与 html 双层叠加导致颜色加深 */
body {
  background: transparent;
}

/* 星空底噪：极细颗粒，让"空"的区域也有质感。
   原来的 SVG 湍流噪点保留，但透明度再降一档 ——
   现在有真星星了，噪点只需做底衬，不能和星星抢。 */
body::after { opacity: 0.018; }

/* 星空画布：压在内容之下、噪点之上 */
#particleCanvas {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ─── 深色区块改半透明，让星空透上来 ───
   关键：如果区块still是实色，星空只在首屏可见，往下滚就没了。
   改半透明 + 模糊后，整页都"泡在宇宙里"。 */
.section { background: transparent; }
.glass-card,
.scenario-card,
.feature-item {
  /* 底色带一点蓝，与星空同色系；仍靠白色割线保持界面感 */
  background: linear-gradient(160deg, rgba(255,255,255,0.052) 0%, rgba(140,170,255,0.022) 100%);
  backdrop-filter: blur(9px) saturate(1.05);
  -webkit-backdrop-filter: blur(9px) saturate(1.05);
}
.metric-cell {
  background: linear-gradient(160deg, rgba(255,255,255,0.042), rgba(140,170,255,0.016));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* 导航：深蓝毛玻璃（原来是纯黑）*/
.navbar.scrolled {
  background: rgba(7,12,27,0.86);
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,0.06),
    0 10px 30px rgba(2,5,12,0.45);
}
/* 页脚：深空底（最暗的一端，页面自然收尾）*/
.footer {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 16%),
    linear-gradient(180deg, var(--space-3) 0%, #020408 100%);
  border-top: 1px solid rgba(255,255,255,0.10);
}
.user-dropdown-menu { background: rgba(9,14,30,0.96); }

/* 首屏氛围光：改冷蓝调，与宇宙同色系 */
.hero-section::after {
  background:
    radial-gradient(ellipse 82% 58% at 50% -6%, rgba(150,180,255,0.075), transparent 70%),
    radial-gradient(ellipse 55% 42% at 78% 26%, rgba(120,150,240,0.042), transparent 72%);
}
/* 网格地平线：改极淡冷蓝，融进星空 */
.hero-section::before {
  background-image:
    linear-gradient(rgba(150,180,255,0.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,180,255,0.030) 1px, transparent 1px);
}
/* 同心环：冷蓝微光 */
@media (min-width: 1200px) {
  .hero-content::after {
    background:
      radial-gradient(circle at 50% 50%, rgba(150,180,255,0.085) 0%, transparent 42%),
      conic-gradient(from 210deg, rgba(180,205,255,0.20), transparent 32%, transparent 68%, rgba(140,120,230,0.13));
  }
}

/* 主标题：加极淡冷蓝外发光，像被星光照着 */
.hero-title { filter: drop-shadow(0 2px 24px rgba(150,180,255,0.16)); }

/* 2026-09-06 首屏居中后：装饰环从右侧移到标题正后方，
   文字子元素必须显式提层，否则会与环重叠发糊。 */
.hero-content > * { position: relative; z-index: 1; }

/* 内容层级：必须高于星空画布，否则会被盖住 */
.navbar, .footer, main, .section, .hero-section { position: relative; z-index: 2; }

/* ═══════════════════════════════════════════════════════════════
   星空复检修正（2026-08-29 第二轮）
   评审三条：
   ① 渐变换挡处有断层感，横向单调
   ② 页脚与上方脱节，像两块独立面板；页脚星星被"吃掉"死气沉沉
   ③ 右侧同心环边缘生硬，像贴上去的 PNG
   ══════════════════════════════════════════════════════════════ */

/* ─── ① 渐变拉长 + 加体积感 ───
   断层根因：三段渐变节点太密（0/46/100）→ 改多节点缓过渡。
   并从左上、右下各透一点紫蓝，给画面体积而非纯平渐变。 */
body {
  background:
    radial-gradient(ellipse 62% 44% at 14% 8%,   rgba(96,132,222,0.078), transparent 60%),
    radial-gradient(ellipse 50% 38% at 88% 22%,  rgba(132,108,212,0.058), transparent 64%),
    /* 右下角新增紫蓝透光（评审建议）—— 打破横向单调 */
    radial-gradient(ellipse 58% 46% at 92% 88%,  rgba(112,96,196,0.050), transparent 66%),
    radial-gradient(ellipse 74% 50% at 46% 106%, rgba(42,70,140,0.062), transparent 62%),
    /* 主渐变改五节点，过渡更长更缓，消除断层 */
    linear-gradient(180deg,
      #0C1428 0%,
      #0A1122 18%,
      #070C1B 44%,
      #050912 72%,
      #04070F 100%);
  background-attachment: fixed;
}

/* ─── ② 页脚：去掉硬分界，让星空延续下去 ───
   原来页脚是独立实色渐变 → 改为「透明 + 极淡压暗」，
   星空画布是 fixed 的，页脚透明后星星自然透上来，不再死气沉沉。 */
.footer {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.016) 0%,
      rgba(4,7,15,0.35) 22%,
      rgba(3,5,11,0.62) 100%);
  border-top: 1px solid rgba(255,255,255,0.09);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
/* 顶部割线改两端淡出，不要一条硬边横贯（这是"两块面板"的观感来源）*/
.footer { border-top: none; position: relative; }
.footer::before {
  content: '';
  position: absolute; top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16) 30%, rgba(255,255,255,0.16) 70%, transparent);
}

/* ─── ③ 同心环：边缘生硬 → 加冷蓝微光并融进星空 ─── */
@media (min-width: 1200px) {
  .hero-content::after {
    opacity: 0.62;
    filter: blur(0.4px) drop-shadow(0 0 22px rgba(150,180,255,0.16));
  }
}

/* 卡片：底色再压一档，避免在星空上显得过亮抢戏 */
.glass-card,
.scenario-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.045) 0%, rgba(130,160,245,0.018) 100%);
}

/* ─── 星空第三轮微调：修最后 0.5 分 ───
   评审：同心环对比度仍偏高，会让人误以为可点击。透明度再降一档。 */
@media (min-width: 1200px) {
  .hero-content::after { opacity: 0.52; }
}

/* 兜底：任何情况下都不允许横向滚动。
   星空画布 fixed + 抽屉 right:-100% 这类离屏元素最容易撑破视口。 */
html, body { overflow-x: hidden; max-width: 100%; }

/* ─── 移动端抽屉最后修正 ───
   评审：抽屉展开时「首页」被顶部 logo 遮挡/裁切。
   原因：style.css 给抽屉的 padding-top 是 5rem，
   而导航栏本身高度 + logo 占位在小屏上超过了这个值。
   改：顶部留白加大并加一条割线，把 logo 区和菜单区分开。 */
@media (max-width: 991px) {
  .nav-menu {
    padding-top: 6.2rem;
    /* 顶部割线：视觉上划出「这里是菜单区」，不与 logo 混在一起 */
    background-image: linear-gradient(90deg,
      transparent 8%, rgba(255,255,255,0.10) 8%, rgba(255,255,255,0.10) 92%, transparent 92%);
    background-size: 100% 1px;
    background-position: 0 5.5rem;
    background-repeat: no-repeat;
  }
  /* logo 提到抽屉之上，避免边缘互相糊在一起 */
  .nav-logo { position: relative; z-index: 1002; }
}

/* ═══════════════════════════════════════════════════════════════
   解决「压抑感」（2026-08-29 威哥反馈：首页太压抑）

   诊断 —— 压抑不是单一原因，是三件事同时在减光、没一处在给光：
     ① 底色下探太狠：底部 #04070F 已近纯黑，页面越往下越"闷死"
     ② 文字透明度压太低：辅助文字 0.52、眉标 0.34，看着费劲
     ③ 卡片只有 4% 白：几乎不发光，全靠割线撑，显得干瘪

   解法不是"整体调亮一点"那么笼统，而是三处分别对症：
     ① 底色抬起来，并把最暗点从"底部"改到"上下两端"，
        让中段亮 —— 视觉重心在中间，页面就不会有"往下坠"的压迫感
     ② 文字阶梯整体上移一档
     ③ 卡片给足底色 + 加内发光，让它自己"亮"起来
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ① 深蓝整体抬亮，且加大蓝的比重 —— 蓝比灰黑更"透气"。
     关键改动：底部不再是近黑，抬到 #0A1226；
     纵深靠"中段亮、两端稍暗"实现，而不是"一路暗到底"。 */
  --space-1: #16213F;   /* 顶部：抬亮的夜蓝（原 #0B1226）*/
  --space-2: #131E39;   /* 中段：主色，最亮 —— 视觉重心 */
  --space-3: #0C1428;   /* 底部：仍是深蓝但不再近黑（原 #04070F）*/

  /* ② 文字阶梯整体上移一档，费劲的地方全部提亮 */
  --txt-1: #FFFFFF;
  --txt-2: rgba(255,255,255,0.86);      /* 0.74 → 0.86 正文 */
  --txt-3: rgba(255,255,255,0.68);      /* 0.52 → 0.68 辅助（原来最费劲）*/
  --txt-4: rgba(255,255,255,0.50);      /* 0.34 → 0.50 眉标 */

  /* 割线也提一档，太弱的割线会让卡片"没有形" */
  --line-1: rgba(255,255,255,0.09);
  --line-2: rgba(255,255,255,0.16);
  --line-3: rgba(255,255,255,0.28);

  /* 阴影减轻 —— 原来四层重投影在深色上进一步压暗周围。
     既然要通透，投影就得让位给光。 */
  --fog-sm:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 2px 8px rgba(4,8,20,0.28),
    0 10px 30px rgba(4,8,20,0.20);
  --fog-md:
    inset 0 1px 0 rgba(255,255,255,0.13),
    0 4px 14px rgba(4,8,20,0.32),
    0 18px 46px rgba(4,8,20,0.24);
  --fog-lg:
    inset 0 1px 0 rgba(255,255,255,0.11),
    0 8px 24px rgba(4,8,20,0.34),
    0 34px 80px rgba(4,8,20,0.26);
}

/* ① 底色重做：中段最亮，上下略沉。
   星云雾的透明度全部上调 —— 雾是"给光"的，之前太吝啬。 */
body {
  background:
    radial-gradient(ellipse 66% 46% at 14% 6%,   rgba(120,158,255,0.155), transparent 62%),
    radial-gradient(ellipse 54% 40% at 88% 20%,  rgba(158,132,255,0.125), transparent 66%),
    radial-gradient(ellipse 60% 48% at 92% 86%,  rgba(132,116,235,0.105), transparent 68%),
    /* 中段横向亮带 —— 这是"不压抑"的关键：给页面中部一层整体环境光 */
    radial-gradient(ellipse 120% 40% at 50% 48%, rgba(96,132,220,0.095), transparent 70%),
    radial-gradient(ellipse 76% 46% at 46% 104%, rgba(80,110,205,0.100), transparent 64%),
    linear-gradient(180deg,
      var(--space-1) 0%,
      #17244A 22%,
      var(--space-2) 50%,
      #101A33 78%,
      var(--space-3) 100%);
  background-attachment: fixed;
}

/* ③ 卡片：给足底色 + 内发光，让它自己亮起来 */
.glass-card,
.scenario-card,
.feature-item {
  background: linear-gradient(160deg,
    rgba(255,255,255,0.10) 0%,
    rgba(150,180,255,0.055) 100%);
  border: 1px solid rgba(255,255,255,0.17);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
}
.glass-card:hover,
.scenario-card:hover {
  background: linear-gradient(160deg,
    rgba(255,255,255,0.135) 0%,
    rgba(160,190,255,0.075) 100%);
  border-color: rgba(255,255,255,0.30);
}
/* 卡片顶部高光线提亮 —— 光源感的直接来源 */
.glass-card::after,
.scenario-card::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.42), transparent);
}
.feature-item:hover {
  background: rgba(255,255,255,0.115);
  border-color: rgba(255,255,255,0.26);
}

/* 指标区同步提亮 */
.metric-cell {
  background: linear-gradient(160deg, rgba(255,255,255,0.085), rgba(150,180,255,0.04));
}
.metric-cell:hover { background: rgba(255,255,255,0.115); }
.metrics-band { border-color: rgba(255,255,255,0.17); }

/* 图标容器提亮 —— 原来 5% 白几乎看不见容器 */
.card-icon, .scenario-icon {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.19);
}
.feat-icon {
  background: rgba(255,255,255,0.095);
  border: 1px solid rgba(255,255,255,0.17);
}

/* 首屏氛围光加强 —— 首屏是第一印象，必须透亮 */
.hero-section::after {
  background:
    radial-gradient(ellipse 85% 62% at 50% -8%, rgba(160,190,255,0.145), transparent 70%),
    radial-gradient(ellipse 58% 45% at 78% 24%, rgba(140,170,255,0.085), transparent 72%);
}
/* 网格地平线提亮，让"地面"看得见 */
.hero-section::before {
  background-image:
    linear-gradient(rgba(170,195,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(170,195,255,0.055) 1px, transparent 1px);
}

/* 导航与页脚：跟着底色抬亮，别再是黑块 */
.navbar.scrolled {
  background: rgba(19,30,57,0.86);
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,0.09),
    0 10px 30px rgba(8,14,32,0.38);
}
@media (max-width: 991px) {
  .nav-menu { background: rgba(19,30,57,0.97); }
}
.footer {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.022) 0%,
      rgba(14,22,44,0.30) 22%,
      rgba(11,18,38,0.52) 100%);
}
.user-dropdown-menu { background: rgba(22,34,62,0.96); }

/* 章节分隔线提亮 */
.section + .section .section-inner::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16) 22%, rgba(255,255,255,0.16) 78%, transparent);
}

/* CTA 区提亮 */
.cta-inner {
  background: linear-gradient(160deg, rgba(255,255,255,0.095) 0%, rgba(150,180,255,0.05) 100%);
  border-color: rgba(255,255,255,0.17);
}

/* 副标题：从辅助色提到接近正文，首屏文字不该费劲读 */
.hero-subtitle { color: rgba(190,215,255,0.95); }
.hero-desc { color: rgba(255,255,255,0.74); }

/* 星星整体提亮一档（底色抬亮后，原来的星会被"吃掉"）*/
#particleCanvas { opacity: 1; filter: brightness(1.22); }

/* ═══════════════════════════════════════════════════════════════
   第二轮：从「压抑」修到「平」了 —— 补层次（2026-08-29）

   评审关键判断：压抑感消除了，但整体提亮让画面变「平」，
   从压抑走向平庸。—— 均匀提亮等于没提亮。

   真正的通透 = 亮暗有差 + 主次分明，不是整体调亮。
   四处对症：
     ① 中段亮带太弱 + 缺暗角 → 强化亮带、四角压深（轮廓光）
     ② 纯白按钮太抢像营销站 → 收敛，改半透明/降亮
     ③ 主标题偏灰不够"硬" → 提到近纯白，副标题反而压一点，拉开层次
     ④ 卡片 10% 边缘生硬 → 减内发光，靠极细描边做毛玻璃
   ═══════════════════════════════════════════════════════════════ */

/* ─── ① 强化中段亮带 + 加四角暗角 ───
   这是"通透"的真正来源：中间亮、四角沉，视线自然被引到中央。
   之前四角和中间一样亮 → 画面没有纵深，就"平"。 */
body {
  background:
    /* 四角暗角（vignette）—— 必须放最上层才压得住 */
    radial-gradient(ellipse 118% 96% at 50% 50%,
      transparent 42%, rgba(6,10,24,0.28) 78%, rgba(4,7,18,0.48) 100%),
    /* 星云雾 */
    radial-gradient(ellipse 62% 42% at 12% 4%,   rgba(126,164,255,0.150), transparent 62%),
    radial-gradient(ellipse 50% 38% at 90% 18%,  rgba(162,138,255,0.120), transparent 66%),
    radial-gradient(ellipse 56% 44% at 94% 88%,  rgba(134,118,238,0.095), transparent 68%),
    /* ⭐ 中段亮带强化：范围收窄一点、亮度提上去 —— 有边界才有层次 */
    radial-gradient(ellipse 88% 32% at 50% 46%,  rgba(112,150,235,0.165), transparent 68%),
    radial-gradient(ellipse 70% 42% at 46% 102%, rgba(84,116,210,0.088), transparent 64%),
    linear-gradient(180deg,
      #131E3B 0%,
      #16234A 20%,
      #17264F 46%,   /* 中段峰值，比上下明显亮 */
      #111B36 76%,
      #0B1226 100%);
  background-attachment: fixed;
}

/* ─── ② 收敛纯白按钮（评审：像早期营销站，抢走正文注意力）───
   不再是 100% 纯白铺满，改半透明白 + 更实的边，
   既保持"最强项"地位，又不再灼眼。 */
.btn-primary {
  background: rgba(255,255,255,0.90);
  color: #0C1428;
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 4px 18px rgba(6,12,30,0.34);
}
.btn-primary:hover {
  background: #FFFFFF;
  box-shadow: 0 10px 28px rgba(6,12,30,0.42), 0 0 0 1px rgba(255,255,255,0.28);
}
/* 导航「一键安装」同样收敛 —— 它在首屏右上角，最容易抢戏 */
.nav-btn-primary {
  background: rgba(255,255,255,0.88);
  color: #0C1428;
  border: 1px solid rgba(255,255,255,0.42);
  box-shadow: 0 2px 10px rgba(6,12,30,0.30);
}
.nav-btn-primary:hover { background: #FFFFFF; }
/* 导航激活项也压一档，与按钮拉开 */
.nav-link.active { background: rgba(255,255,255,0.88); }

/* ─── ③ 主次层级：主标题提到近纯白，副标题反而压一点 ───
   评审说主标题"略显柔弱不够硬"。原来渐变末端 #B8B8BC 太灰。 */
.hero-title {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFF 46%, #DCE6F8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 26px rgba(150,180,255,0.22));
}
/* 副标题压回去一点，主次才分明（原来 0.95 太接近标题）*/
.hero-subtitle { color: rgba(178,203,248,0.86); }
.hero-desc { color: rgba(255,255,255,0.70); }

/* ─── ④ 卡片：减内发光，靠极细描边做毛玻璃 ───
   评审：提到 10% 后边缘生硬。改法是降底色、提描边精度。 */
.glass-card,
.scenario-card,
.feature-item {
  background: linear-gradient(160deg,
    rgba(255,255,255,0.072) 0%,
    rgba(150,180,255,0.038) 100%);
  border: 1px solid rgba(255,255,255,0.13);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
.glass-card:hover,
.scenario-card:hover {
  background: linear-gradient(160deg,
    rgba(255,255,255,0.105) 0%,
    rgba(160,190,255,0.055) 100%);
  border-color: rgba(255,255,255,0.24);
}
/* 顶部高光线收敛 —— 10% 时那条 0.42 的线太亮，是"生硬"的来源之一 */
.glass-card::after,
.scenario-card::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.30), transparent);
}
.feature-item:hover { background: rgba(255,255,255,0.085); }
.metric-cell {
  background: linear-gradient(160deg, rgba(255,255,255,0.062), rgba(150,180,255,0.028));
}
.metric-cell:hover { background: rgba(255,255,255,0.09); }
.metrics-band { border-color: rgba(255,255,255,0.13); }
.card-icon, .scenario-icon {
  background: rgba(255,255,255,0.075);
  border: 1px solid rgba(255,255,255,0.15);
}
.feat-icon {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.13);
}
.cta-inner {
  background: linear-gradient(160deg, rgba(255,255,255,0.072) 0%, rgba(150,180,255,0.036) 100%);
  border-color: rgba(255,255,255,0.13);
}

/* 割线回收一档（提亮后 0.16/0.28 偏重，让描边显生硬）*/
:root {
  --line-1: rgba(255,255,255,0.075);
  --line-2: rgba(255,255,255,0.13);
  --line-3: rgba(255,255,255,0.24);
}

/* 导航/页脚跟随新底色 */
.navbar.scrolled { background: rgba(20,32,64,0.86); }
@media (max-width: 991px) { .nav-menu { background: rgba(20,32,64,0.97); } }
.footer {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.02) 0%,
      rgba(13,21,42,0.34) 22%,
      rgba(10,16,34,0.56) 100%);
}

/* 备案图标：评审说黄褐色与深蓝冲突 → 去色并压暗，统一视觉 */
.fb-left img { filter: grayscale(1) brightness(1.5); opacity: 0.42; }

/* ─── 收尾微调：CTA 卡片底部加光晕，让暗角过渡顺滑 ───
   评审：暗角在 CTA 卡片边缘过渡略生硬。
   加一层从卡片底部往外散的极弱光，把硬边"化开"。 */
.cta-inner::after {
  content: '';
  position: absolute;
  left: 12%; right: 12%; bottom: -1px;
  height: 62%;
  pointer-events: none;
  background: radial-gradient(ellipse 100% 100% at 50% 100%,
    rgba(140,175,255,0.075) 0%, transparent 72%);
}

/* ─── 页脚辅助信息提亮 ───
   评审：地址/备案/联系标签在深底上读着吃力。
   这类是低频信息，但"吃力"不该是设计选择，只是我压太狠了。 */
.fc-addr, .fc-person { color: rgba(255,255,255,0.58); }
.fb-left, .fb-left a, .fb-right { color: rgba(255,255,255,0.52); }
.fb-left a:hover { color: rgba(255,255,255,0.85); }
.fc-label { color: rgba(255,255,255,0.60); }
.fcol-title { color: rgba(255,255,255,0.62); }

/* ═══════════════════════════════════════════════════════════════
   开发者中心 · 排版重做（2026-09-06）
   问题：文档区是「裸文字贴在星空上」，无容器、无层次；
        内容为空时整块塌成大片空白，页面像坏掉。
   方案：侧栏与正文都收进玻璃卡片，建立明确的信息容器；
        正文区给最小高度兜底，空态有正经占位。
   ═══════════════════════════════════════════════════════════════ */

.dev-layout {
  grid-template-columns: 248px 1fr;
  gap: 2rem;
  align-items: start;
}

/* ─── 侧栏：玻璃卡片 ─── */
.dev-sidebar {
  padding: 0.9rem;
  border-radius: 16px;
  background: rgba(14, 22, 44, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24);
}

.dev-nav { gap: 0.28rem; }

/* 导航项：左侧高亮条由 transform 控制，避免 border 改变时布局抖动 */
.dev-nav-link {
  position: relative;
  border-left: none;
  border-radius: 10px;
  padding: 0.72rem 0.9rem 0.72rem 1.05rem;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  transition: color .25s ease, background .25s ease;
}
.dev-nav-link::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 3px; height: 60%;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #00E5FF, #9D5CFF);
  transform: translateY(-50%) scaleY(0);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.dev-nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.dev-nav-link.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(0, 168, 204, 0.16), rgba(0, 168, 204, 0.02));
  border-left: none;
}
.dev-nav-link.active::before { transform: translateY(-50%) scaleY(1); }

/* ─── 正文：玻璃卡片 + 最小高度兜底 ─── */
.dev-content {
  min-height: 460px;
  padding: 2.1rem 2.3rem;
  border-radius: 16px;
  background: rgba(14, 22, 44, 0.44);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}

/* ─── 空状态：文档未填时的正经占位 ─── */
.dev-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  min-height: 380px;
  padding: 2rem 1rem;
}
.dev-empty-icon {
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 1.1rem;
  background: linear-gradient(135deg, #00E5FF, #9D5CFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.85;
}
.dev-empty-title {
  font-size: 1.06rem; font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0.6rem;
}
.dev-empty-desc {
  font-size: 0.9rem; line-height: 1.85;
  color: rgba(255, 255, 255, 0.5);
  max-width: 30rem;
  margin-bottom: 1.5rem;
}
.dev-empty-link {
  display: inline-block;
  padding: 0.6rem 1.35rem;
  border-radius: 999px;
  font-size: 0.88rem;
  color: #7EE8FA;
  text-decoration: none;
  border: 1px solid rgba(0, 229, 255, 0.34);
  background: rgba(0, 229, 255, 0.07);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.dev-empty-link:hover {
  background: rgba(0, 229, 255, 0.14);
  border-color: rgba(0, 229, 255, 0.6);
  transform: translateY(-1px);
}

/* ─── 窄屏：侧栏转横向标签条 ─── */
@media (max-width: 900px) {
  .dev-layout { grid-template-columns: 1fr; gap: 1.1rem; }
  .dev-sidebar { padding: 0.5rem; }
  .dev-nav { flex-direction: row; flex-wrap: wrap; gap: 0.3rem; }
  .dev-nav-link { padding: 0.55rem 0.9rem; font-size: 0.85rem; }
  /* 横向排列时高亮条改到底部，竖条在横向标签上不成立 */
  .dev-nav-link::before {
    left: 12%; top: auto; bottom: 0;
    width: 76%; height: 2px;
    border-radius: 2px 2px 0 0;
    transform: translateY(0) scaleX(0);
    background: linear-gradient(90deg, #00E5FF, #9D5CFF);
  }
  .dev-nav-link.active::before { transform: translateY(0) scaleX(1); }
  .dev-content { min-height: 340px; padding: 1.5rem 1.25rem; }
  .dev-empty { min-height: 260px; }
}

/* ═══════════════════════════════════════════════════════════════
   生产力中心 · 开屏首图（2026-09-06）
   文案三层：主张（大）→ 品牌 OPC（中，带割线）→ 行动号召（小）
   设计取向：靠字阶与留白建立层次，不堆装饰 —— 科技感来自克制。
   ═══════════════════════════════════════════════════════════════ */

.opc-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 1.5rem 5rem;
  overflow: hidden;
}

/* 背景：一团极淡冷光，给标题一个"打光点"，不喧宾夺主 */
.opc-hero::before {
  content: '';
  position: absolute;
  top: 42%; left: 50%;
  width: 70vmax; height: 70vmax;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(0, 168, 204, 0.055) 0%,
    rgba(157, 92, 255, 0.028) 38%,
    transparent 66%);
  animation: opcGlow 11s ease-in-out infinite;
  pointer-events: none;
}
@keyframes opcGlow {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.62; }
  50%      { transform: translate(-50%, -50%) scale(1.16); opacity: 1; }
}

.opc-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 62rem;
  width: 100%;
}

/* ─── 第一层：主张 ─── */
.opc-hero-lead {
  font-size: clamp(1.65rem, 4.2vw, 3.25rem);
  font-weight: 800;
  line-height: 1.42;
  letter-spacing: -0.012em;
  color: #fff;
  margin: 0 0 2.1rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.34);
}
/* 「AI 员工」是全句的题眼，用渐变挑出来 */
.opc-hl {
  background: linear-gradient(96deg, #00E5FF 6%, #7B9DFF 52%, #B98CFF 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

/* ─── 第二层：品牌 OPC ─── */
.opc-hero-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.5rem 1.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  margin-bottom: 1.5rem;
}
.opc-brand-cn {
  font-size: clamp(0.94rem, 1.7vw, 1.12rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.16em;
}
/* 竖线把中文名与 OPC 分开，读作两个信息单元 */
.opc-brand-en {
  position: relative;
  padding-left: 0.95rem;
  font-size: clamp(1.06rem, 2vw, 1.34rem);
  font-weight: 800;
  letter-spacing: 0.15em;
  background: linear-gradient(92deg, #00E5FF, #9D5CFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.opc-brand-en::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 1px; height: 1.05em;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.24);
}

/* ─── 第三层：行动号召 ─── */
.opc-hero-sub {
  font-size: clamp(0.96rem, 1.85vw, 1.22rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.62);
  margin: 0 0 2.6rem;
  letter-spacing: 0.02em;
}

/* ─── 按钮 ─── */
.opc-hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.opc-btn-main,
.opc-btn-ghost {
  display: inline-block;
  padding: 0.88rem 2.05rem;
  border-radius: 999px;
  font-size: 0.97rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform .26s cubic-bezier(.4,0,.2,1), box-shadow .26s ease, background .26s ease, border-color .26s ease;
}
.opc-btn-main {
  color: #04121B;
  background: linear-gradient(96deg, #00E5FF, #6FB7FF);
  box-shadow: 0 8px 26px rgba(0, 190, 230, 0.26);
}
.opc-btn-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(0, 190, 230, 0.38);
}
.opc-btn-ghost {
  color: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.035);
}
.opc-btn-ghost:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 229, 255, 0.5);
  background: rgba(0, 229, 255, 0.08);
}

/* ─── 向下提示 ─── */
.opc-hero-cue {
  position: absolute;
  left: 50%; bottom: 2.1rem;
  transform: translateX(-50%);
  width: 22px; height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  pointer-events: none;
}
.opc-hero-cue span {
  position: absolute;
  left: 50%; top: 7px;
  width: 3px; height: 6px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: rgba(0, 229, 255, 0.75);
  animation: opcCue 1.9s ease-in-out infinite;
}
/* 注意：这里只动 translateY —— 定位靠父级 transform 完成，
   若在关键帧里写 transform 会覆盖父级的 translateX(-50%) 导致偏左 */
@keyframes opcCue {
  0%   { transform: translateY(0);    opacity: 0; }
  32%  { opacity: 1; }
  100% { transform: translateY(13px); opacity: 0; }
}

/* ─── 生产力中心首图之后，原标题不再需要大段上边距 ─── */
.opc-hero + .products-section { padding-top: 1rem; }
.opc-hero + .products-section .page-title { margin-top: 0; }

/* ─── 窄屏 ─── */
@media (max-width: 900px) {
  .opc-hero { min-height: 68vh; padding: 5.5rem 1.15rem 4rem; }
  .opc-hero-lead { margin-bottom: 1.7rem; }
  .opc-hero-sub { margin-bottom: 2.1rem; }
}
@media (max-width: 560px) {
  /* 窄屏收掉强制换行，让文字自然折行，避免出现孤字行 */
  .opc-br { display: none; }
  .opc-hl { white-space: normal; }
  .opc-hero-actions { flex-direction: column; align-items: stretch; }
  .opc-btn-main, .opc-btn-ghost { width: 100%; text-align: center; }
  .opc-hero-cue { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   技能卡片 · 水晶彩色（2026-09-06）
   由「一行一个」列表改为每排 6 个的卡片墙。
   水晶感来源：半透明玻璃底 + 背景模糊 + 顶部高光边 + 斜向流光，
   而非直接刷高饱和色块 —— 后者在暗色星空背景上会显脏。
   免费/付费两套色系，扫视时一眼分清。
   ═══════════════════════════════════════════════════════════════ */

.skill-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.7rem;
}

.skill-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  padding: 0.92rem 0.78rem 0.8rem;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(12px) saturate(1.25);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
  transition: transform .3s cubic-bezier(.4,0,.2,1),
              box-shadow .3s ease,
              border-color .3s ease;
}

/* 水晶底光：每张卡片左上角一团彩色雾，色相按色系变量走 */
.skill-card::before {
  content: '';
  position: absolute;
  inset: -40% -30% auto -30%;
  height: 150%;
  z-index: -1;
  background: radial-gradient(ellipse 62% 54% at 26% 12%,
    var(--sc-glow, rgba(0,168,204,0.24)) 0%, transparent 68%);
  opacity: 0.9;
  transition: opacity .3s ease;
}

/* 斜向流光：hover 时扫过，制造玻璃反光 */
.skill-card::after {
  content: '';
  position: absolute;
  top: 0; left: -70%;
  width: 45%; height: 100%;
  z-index: -1;
  background: linear-gradient(100deg,
    transparent, rgba(255,255,255,0.13), transparent);
  transform: skewX(-18deg);
  transition: left .62s cubic-bezier(.4,0,.2,1);
}

.skill-card:hover {
  transform: translateY(-4px);
  border-color: var(--sc-edge, rgba(0, 229, 255, 0.42));
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.3),
    0 0 0 1px var(--sc-edge, rgba(0, 229, 255, 0.2)),
    inset 0 1px 0 rgba(255, 255, 255, 0.17);
}
.skill-card:hover::before { opacity: 1; }
.skill-card:hover::after  { left: 125%; }

/* ─── 免费：青蓝色系 ─── */
.skill-card.sc-free {
  --sc-glow: rgba(0, 200, 235, 0.26);
  --sc-edge: rgba(0, 229, 255, 0.46);
}
/* ─── 付费：紫粉色系 ─── */
.skill-card.sc-paid {
  --sc-glow: rgba(150, 105, 255, 0.26);
  --sc-edge: rgba(178, 130, 255, 0.5);
}

/* 同排内错开色相，避免六张一模一样显得呆板 */
.skill-card:nth-child(6n+2) { --sc-glow: rgba(0, 176, 220, 0.24); }
.skill-card:nth-child(6n+3) { --sc-glow: rgba(72, 150, 240, 0.24); }
.skill-card:nth-child(6n+4) { --sc-glow: rgba(120, 130, 250, 0.24); }
.skill-card:nth-child(6n+5) { --sc-glow: rgba(88, 168, 232, 0.24); }
.skill-card:nth-child(6n+6) { --sc-glow: rgba(56, 196, 226, 0.24); }
.skill-card.sc-paid:nth-child(6n+2) { --sc-glow: rgba(170, 100, 245, 0.26); }
.skill-card.sc-paid:nth-child(6n+3) { --sc-glow: rgba(200, 110, 220, 0.24); }
.skill-card.sc-paid:nth-child(6n+4) { --sc-glow: rgba(140, 118, 255, 0.26); }
.skill-card.sc-paid:nth-child(6n+5) { --sc-glow: rgba(186, 122, 236, 0.24); }
.skill-card.sc-paid:nth-child(6n+6) { --sc-glow: rgba(158, 96, 240, 0.26); }

.skill-card-icon {
  font-size: 1.32rem;
  line-height: 1;
}
.skill-card-name {
  font-size: 0.875rem;
  font-weight: 650;
  color: #fff;
  letter-spacing: 0;
  line-height: 1.35;
  word-break: break-word;
}
.skill-card-desc {
  flex: 1;
  font-size: 0.745rem;
  line-height: 1.58;
  color: rgba(255, 255, 255, 0.56);
  /* 描述最多 4 行，超出省略 —— 保证同排卡片等高不参差。
     6 列布局单卡较窄，3 行会把多数描述截掉，4 行基本能完整容纳。 */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.skill-card-tag {
  align-self: flex-start;
  margin-top: 0.15rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.688rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.skill-card-tag.skill-tag-free {
  color: #7EF5DA;
  background: rgba(0, 220, 180, 0.13);
  border: 1px solid rgba(0, 220, 180, 0.3);
}
.skill-card-tag.skill-tag-paid {
  color: #D3B4FF;
  background: rgba(157, 92, 255, 0.15);
  border: 1px solid rgba(157, 92, 255, 0.36);
}

/* ─── 响应式：逐档降列，保证卡片不被压窄 ─── */
@media (max-width: 1280px) { .skill-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 900px)  { .skill-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0.7rem; } }
@media (max-width: 640px)  { .skill-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.6rem; } }
@media (max-width: 380px)  { .skill-grid { grid-template-columns: 1fr; } }

/* 移动端关掉背景模糊：低端机上 backdrop-filter 很吃性能 */
@media (max-width: 640px) {
  .skill-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.055);
    padding: 0.85rem 0.75rem 0.72rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   开发者中心 · 版本更新（2026-09-06 重做）
   开发文档入口撤除后，本页成为 /developers 落地页。
   科技感取向：发光节点 + 渐变主轴 + 玻璃卡片，靠光与层次，不堆装饰。
   ═══════════════════════════════════════════════════════════════ */

/* ─── 主标题下的价值主张 ─── */
.dev-page-slogan {
  text-align: center;
  margin: -0.6rem auto 2.4rem;
  max-width: 40rem;
  font-size: 1.02rem;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.62);
  position: relative;
  padding-bottom: 1.1rem;
}
/* 底部一道渐隐细线收口，避免这句话浮在半空 */
.dev-page-slogan::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 132px; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(0, 229, 255, 0.5), rgba(157, 92, 255, 0.5), transparent);
}

/* ─── 顶部入口标签：两个入口后居中排布 ─── */
.dev-entry-tabs {
  justify-content: center;
  margin-bottom: 2.6rem;
}

/* ─── 概览条：累计发布 / 当前版本 / 最近更新 ─── */
.rel-overview {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  margin: 0 auto 2.6rem;
  padding: 1.35rem 1rem;
  max-width: 46rem;
  border-radius: 16px;
  background: rgba(14, 22, 44, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}
.rel-ov-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.rel-ov-num {
  font-size: 1.62rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, #00E5FF, #9D5CFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* 版本号/日期是变宽文本，字号收一档避免撑破分栏 */
.rel-ov-ver, .rel-ov-date { font-size: 1.3rem; }
.rel-ov-label {
  font-size: 0.775rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.42);
}
.rel-ov-divider {
  width: 1px;
  align-self: center;
  height: 2.4rem;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.14), transparent);
}

/* ─── 时间线主轴：渐变 + 顶部亮、底部隐 ─── */
/* 时间线靠 padding-left 让出主轴位置，这会把卡片整体推向右边，
   导致卡片区中轴与上方居中的概览条对不齐（宽屏尤其明显）。
   补一个等量的 padding-right 抵消，使卡片区中轴回到容器中轴。
   宽度与概览条统一为 46rem + 两侧让位，视觉上成一条中轴线。 */
.rel-timeline-v2 {
  padding-left: 2.4rem;
  padding-right: 2.4rem;
  max-width: calc(46rem + 4.8rem);
  margin-left: auto;
  margin-right: auto;
}
.rel-timeline-v2::before {
  background: linear-gradient(180deg,
    rgba(0, 229, 255, 0.65) 0%,
    rgba(157, 92, 255, 0.4) 45%,
    rgba(157, 92, 255, 0.06) 100%);
  width: 2px;
}

.rel-timeline-v2 .release-item { margin-bottom: 1.5rem; }

/* 节点：默认静态小点 */
.rel-timeline-v2 .release-dot {
  left: -2.4rem;
  width: 13px; height: 13px;
  background: #0B1224;
  border: 2px solid rgba(0, 229, 255, 0.5);
  box-shadow: 0 0 0 4px rgba(11, 18, 36, 0.9);
  transition: border-color .3s ease, box-shadow .3s ease;
}
/* 最新一条：节点发光并呼吸，扫视时一眼定位 */
.rel-timeline-v2 .release-item.is-latest .release-dot {
  border-color: #00E5FF;
  background: #00E5FF;
  box-shadow: 0 0 0 4px rgba(11, 18, 36, 0.9), 0 0 14px rgba(0, 229, 255, 0.75);
  animation: relDotPulse 2.6s ease-in-out infinite;
}
@keyframes relDotPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(11,18,36,.9), 0 0 12px rgba(0,229,255,.6); }
  50%      { box-shadow: 0 0 0 4px rgba(11,18,36,.9), 0 0 20px rgba(0,229,255,.95); }
}

/* ─── 卡片 ─── */
.rel-timeline-v2 .release-card {
  position: relative;
  overflow: hidden;
  padding: 1.45rem 1.7rem;
  border-radius: 14px;
  transition: transform .3s cubic-bezier(.4,0,.2,1),
              border-color .3s ease, box-shadow .3s ease;
}
/* 左上角冷光，与卡片圆角一起构成"玻璃被打光"的观感 */
.rel-timeline-v2 .release-card::before {
  content: '';
  position: absolute;
  inset: -50% 40% auto -20%;
  height: 160%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 58% 50% at 22% 14%,
    rgba(0, 168, 220, 0.14) 0%, transparent 70%);
}
.rel-timeline-v2 .release-card > * { position: relative; z-index: 1; }

.rel-timeline-v2 .release-item.is-latest .release-card {
  border-color: rgba(0, 229, 255, 0.28);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.26), 0 0 0 1px rgba(0, 229, 255, 0.1);
}
.rel-timeline-v2 .release-card:hover {
  transform: translateX(3px);
  border-color: rgba(0, 229, 255, 0.38);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

/* LATEST 徽标 */
.release-badge-new {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.16rem 0.5rem;
  border-radius: 4px;
  color: #06202B;
  background: linear-gradient(135deg, #00E5FF, #67F5D0);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
}

/* 要点列表：项目符号换成箭头，比圆点更有方向感 */
.rel-timeline-v2 .release-points li {
  padding-left: 1.25rem;
  line-height: 1.85;
}
.rel-timeline-v2 .release-points li::before {
  content: '›';
  color: rgba(0, 229, 255, 0.75);
  font-weight: 700;
  left: 0;
}

/* ─── 空态 ─── */
.rel-empty {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: 4.2rem 1.5rem;
  border-radius: 18px;
}
.rel-empty-icon {
  font-size: 3rem; line-height: 1;
  margin-bottom: 1.3rem;
  filter: drop-shadow(0 0 18px rgba(0, 229, 255, 0.35));
  animation: relFloat 3.6s ease-in-out infinite;
}
@keyframes relFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.rel-empty-title {
  font-size: 1.2rem; font-weight: 650;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 0.75rem;
}
.rel-empty-desc {
  font-size: 0.9rem; line-height: 2;
  color: rgba(255, 255, 255, 0.5);
  max-width: 32rem;
  margin-bottom: 1.7rem;
}
.rel-empty-link {
  display: inline-block;
  padding: 0.62rem 1.5rem;
  border-radius: 999px;
  font-size: 0.88rem;
  color: #7EE8FA;
  text-decoration: none;
  border: 1px solid rgba(0, 229, 255, 0.34);
  background: rgba(0, 229, 255, 0.07);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.rel-empty-link:hover {
  background: rgba(0, 229, 255, 0.14);
  border-color: rgba(0, 229, 255, 0.6);
  transform: translateY(-1px);
}

/* ─── 响应式 ─── */
@media (max-width: 768px) {
  .dev-page-slogan { font-size: 0.92rem; line-height: 1.85; margin-bottom: 2rem; padding: 0 0.5rem 1rem; }
  /* 三栏在窄屏会挤成一团，改两行：前两项一行，第三项占满 */
  .rel-overview { flex-wrap: wrap; gap: 1.1rem 0; padding: 1.15rem 0.75rem; }
  .rel-ov-item { flex: 0 0 calc(50% - 1px); }
  .rel-ov-divider:nth-of-type(2) { display: none; }
  .rel-ov-divider { height: 2rem; }
  .rel-ov-num { font-size: 1.35rem; }
  .rel-ov-ver, .rel-ov-date { font-size: 1.08rem; }
  .rel-timeline-v2 { padding-left: 1.7rem; padding-right: 0; max-width: none; }
  .rel-timeline-v2 .release-dot { left: -1.7rem; width: 11px; height: 11px; }
  .rel-timeline-v2 .release-card { padding: 1.15rem 1.15rem; }
  .rel-empty { padding: 3rem 1.1rem; }
}
@media (max-width: 420px) {
  /* 极窄屏三项各占一行，分隔线全隐 */
  .rel-ov-item { flex: 0 0 100%; }
  .rel-ov-divider { display: none; }
  .rel-overview { gap: 1rem 0; }
}

/* ═══════════════════════════════════════════════════════════════
   品牌 Logo（2026-09-06）
   威哥指定太阳花图形，替换原导航 🧬 emoji 与页脚字母 M 方块。
   图片已抠去米白底并裁掉留白，暗色背景上无白边。
   ═══════════════════════════════════════════════════════════════ */

.logo-icon-img {
  width: 34px;
  height: 34px;
  display: block;
  object-fit: contain;
  /* 暖色图形落在深蓝导航栏上，补一点暖光让它"亮起来"而不是贴上去 */
  filter: drop-shadow(0 0 9px rgba(255, 176, 32, 0.34));
  transition: transform .45s cubic-bezier(.4,0,.2,1),
              filter .35s ease;
}
/* hover 转一点，呼应太阳花的形态；幅度克制，避免像玩具 */
.nav-logo:hover .logo-icon-img {
  transform: rotate(22deg) scale(1.06);
  filter: drop-shadow(0 0 14px rgba(255, 176, 32, 0.6));
}

.footer-logo-img {
  width: 30px;
  height: 30px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(255, 176, 32, 0.26));
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.footer-logo:hover .footer-logo-img { transform: rotate(22deg); }

@media (max-width: 768px) {
  .logo-icon-img { width: 30px; height: 30px; }
  .footer-logo-img { width: 26px; height: 26px; }
}

/* crane 报价系统自带导航，同步替换 logo */
.crane-logo-icon-img {
  width: 32px; height: 32px;
  display: block; object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255, 176, 32, 0.3));
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.crane-logo:hover .crane-logo-icon-img { transform: rotate(22deg) scale(1.05); }
@media (max-width: 768px) { .crane-logo-icon-img { width: 28px; height: 28px; } }

/* ═══ 【底层】页·企业知识库两轨（2026-09-08）═══
   客户端 v1.45~v1.47 上线的溯源/双轨/一键沉淀是差异化亮点，
   官网原来只字未提。跟 .arch-layer 同一套语言：色条 + 暗底卡。 */
.kb-lead {
  max-width: 800px; margin: 0 auto 1.75rem;
  color: rgba(240,244,248,0.62);
  font-size: 0.95rem; line-height: 1.8; text-align: center;
}
.kb-lead strong { color: #00E5FF; font-weight: 600; }

.kb-tracks {
  display: flex; flex-direction: column; gap: 1rem;
  max-width: 800px; margin: 0 auto 2rem;
}
.kb-tk {
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid var(--tk-color, #00A8CC);
  border-radius: 12px; padding: 1.15rem 1.4rem;
  background: rgba(255,255,255,0.02);
  transition: all 0.3s;
}
.kb-tk:hover {
  background: rgba(255,255,255,0.05);
  box-shadow: 0 0 20px color-mix(in srgb, var(--tk-color) 18%, transparent);
}
.kb-tk--hit  { --tk-color: #00E5FF; }
.kb-tk--miss { --tk-color: #FF6B35; }
.kb-tk--grow { --tk-color: #9D5CFF; }

.kb-tk-no {
  display: inline-block;
  font-size: 0.78rem; letter-spacing: 0.06em;
  color: var(--tk-color, #00A8CC);
  border: 1px solid color-mix(in srgb, var(--tk-color) 45%, transparent);
  border-radius: 5px; padding: 1px 8px; margin-bottom: 0.55rem;
}
.kb-tk-title {
  font-size: 1.05rem; font-weight: 600;
  color: var(--tk-color, #00A8CC);
  margin-bottom: 0.45rem;
}
.kb-tk-desc {
  color: #B0C4DE; font-size: 0.88rem; line-height: 1.85;
}
.kb-tk-desc b { color: #F0F4F8; font-weight: 600; }
.kb-tk-desc code {
  background: rgba(0,229,255,0.1);
  color: #00E5FF;
  padding: 1px 6px; border-radius: 4px;
  font-size: 0.82rem;
}

.kb-facts {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem; max-width: 800px; margin: 0 auto 3rem;
}
.kb-fact {
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px; padding: 0.9rem 1.1rem;
  background: rgba(255,255,255,0.015);
}
.kb-fact-k {
  display: block; font-size: 0.9rem; font-weight: 600;
  color: #00E5FF; margin-bottom: 0.3rem;
}
.kb-fact-v {
  display: block; font-size: 0.82rem; line-height: 1.7;
  color: rgba(240,244,248,0.6);
}

/* ═══ 路线图卡片（9-9 威哥：客户端自带模型展望）═══
   刻意做成「未上线」的视觉语言：虚线边框 + 待建徽标。
   不能和已上线能力长得一样 —— 否则用户以为现在就能用，
   装完发现没有，那是我们在骗人。 */
.rm-cards {
  display: grid; grid-template-columns: 1fr;
  gap: 1rem; max-width: 800px; margin: 0 auto 3rem;
}
.rm-card {
  position: relative;
  border: 1px dashed rgba(157,92,255,0.32);
  border-radius: 14px; padding: 1.5rem 1.6rem;
  background: rgba(157,92,255,0.035);
}
.rm-card-badge {
  position: absolute; top: -0.65rem; left: 1.4rem;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em;
  color: #9D5CFF;
  background: #0A1020;
  border: 1px dashed rgba(157,92,255,0.4);
  border-radius: 999px; padding: 0.15rem 0.7rem;
}
.rm-card-ico {
  font-size: 1.6rem; line-height: 1; margin-bottom: 0.7rem;
}
.rm-card-title {
  font-size: 1rem; font-weight: 600; color: #F0F4F8;
  line-height: 1.5; margin-bottom: 0.7rem;
}
.rm-card-desc {
  font-size: 0.85rem; line-height: 1.85;
  color: rgba(240,244,248,0.62);
}
.rm-card-desc b { color: rgba(240,244,248,0.88); font-weight: 600; }

@media (max-width: 640px) {
  .kb-facts { grid-template-columns: 1fr; }
  .kb-tk { padding: 1rem 1.1rem; }
  .rm-card { padding: 1.3rem 1.1rem; }
}