/* ============================================================
   有鱼智能体 官网样式 · shadcn 令牌体系
   唯一真源：skill `visual-design-system`

   一套令牌、亮暗两张皮（`.dark` 类切换，默认亮色）。
   红线 1：颜色只在下面的令牌层出现，组件层不写任何颜色原值。
   品牌蓝紫粉渐变已整体退场——营销强调改用 --primary 实心 + 排版层级 + 留白。
   无外部 CDN，系统字体栈。UTF-8 无 BOM
   ============================================================ */

/* ════════════════ 令牌层开始（逐字取自 SKILL.md §3） ════════════════ */
:root {
  color-scheme: light;
  --radius: 0.625rem;

  --background:            oklch(1 0 0);
  --foreground:            oklch(0.145 0 0);
  --card:                  oklch(1 0 0);
  --card-foreground:       oklch(0.145 0 0);
  --popover:               oklch(1 0 0);
  --popover-foreground:    oklch(0.145 0 0);

  --primary:               oklch(0.205 0 0);
  --primary-foreground:    oklch(0.985 0 0);
  --secondary:             oklch(0.97 0 0);
  --secondary-foreground:  oklch(0.205 0 0);
  --muted:                 oklch(0.97 0 0);
  --muted-foreground:      oklch(0.545 0 0);
  --accent:                oklch(0.97 0 0);
  --accent-foreground:     oklch(0.205 0 0);

  --success:               oklch(0.52 0.15 150);
  --success-foreground:    oklch(0.985 0 0);
  --warning:               oklch(0.53 0.14 70);
  --warning-foreground:    oklch(0.985 0 0);
  --info:                  oklch(0.52 0.16 255);
  --info-foreground:       oklch(0.985 0 0);
  --destructive:           oklch(0.577 0.245 27.325);
  --destructive-foreground:oklch(0.985 0 0);
  /* hover 面：规则是「离自己的字色**更远一步**」——亮皮变深、暗皮变浅，
     于是两皮 hover 都是对比度**上升**，结构上不可能压线。
     🔴 别用 `opacity` 压整块：它会把面、字、描边一起淡向父面，对比度只降不升。
        实测事故（三处独立命中）：`.btn-danger` 静止 4.56 → hover **3.83 不过 AA**、
        描边 3.30 → 2.78、禁用态文字 4.54 → 3.61。
     🔴 也别用 `color-mix` 现算：混的方向对中性面与彩色面**相反**（中性面混向
        `--background`、彩色面必须混向 `--foreground`），极易写反；算出来的值还
        进不了令牌表、过不了自检的令牌对检查（红线 9）。 */
  --primary-hover:         oklch(0.145 0 0);
  --secondary-hover:       oklch(0.922 0 0);
  --destructive-hover:     oklch(0.505 0.213 27.518);
  --sidebar-primary-hover: oklch(0.985 0 0);


  --border:                oklch(0.922 0 0);
  --input:                 oklch(0.645 0 0);
  --ring:                  oklch(0.645 0 0);

  --chart-1: oklch(0.5 0.2 262);
  --chart-2: oklch(0.52 0.13 185);
  --chart-3: oklch(0.55 0.14 75);
  --chart-4: oklch(0.5 0.22 305);
  --chart-5: oklch(0.53 0.2 15);

  --sidebar:                      oklch(0.205 0 0);
  --sidebar-foreground:           oklch(0.985 0 0);
  --sidebar-primary:              oklch(0.922 0 0);
  --sidebar-primary-foreground:   oklch(0.205 0 0);
  --sidebar-accent:               oklch(0.269 0 0);
  --sidebar-accent-foreground:    oklch(0.985 0 0);
  --sidebar-border:               oklch(1 0 0 / 10%);
  --sidebar-ring:                 oklch(0.556 0 0);

  --radius-sm:  calc(var(--radius) * 0.6);
  --radius-md:  calc(var(--radius) * 0.8);
  --radius-lg:  var(--radius);
  --radius-xl:  calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;

  --text-xs: 12px; --text-sm: 14px; --text-base: 16px;
  --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px;

  --dur: 160ms;
  --font-sans: "PingFang SC","Microsoft YaHei","Noto Sans SC","Segoe UI",system-ui,sans-serif;
  --font-mono: ui-monospace,"Cascadia Mono",Consolas,"SF Mono",monospace;

  /* ── 本站附加令牌（shadcn 表里没有的东西，两皮同值） ───────────────
     ① --container 是布局尺度不是颜色；
     ② --font-num 是数字用的比例无衬线（统计数字 / 价格），shadcn 只给了
        sans 与 mono，等宽会让营销数字显得像日志，故单列；
     ③ --art-* 是**插画色**：页脚鱼群横带是一整段自带水面渐变的 SVG 插画，
        跟压在图片上的角标一个道理——它不是界面，不参与换肤。
        实测：--art-water-ink 对水面中心白 17.72:1、对边缘青 3.36:1
        （品牌名 26px/700 属大字，门槛 3.0，压到最边缘也刚好过；15px 的 slogan
        在最边缘不够 4.5，靠那层白色外发光兜底——发光在这里是承重件不是装饰）。 */
  --container: 1120px;
  --font-num: "Inter","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --art-water-center: #ffffff;
  --art-water-edge:   #01768e;
  --art-water-ink:    #18181b;
  --art-water-glow:   rgb(255 255 255 / .95);
  --art-fish-a:       #87ceeb;
  --art-fish-b:       #444444;
  /* 首屏粒子场（hero-medusae）。2026-08-12 用户裁决：**效果保持原样不变**，
     所以这四个值就是迁移前的原值，同样属插画色、不参与换肤。
     只有场景底走 --background 跟随皮肤——不跟的话暗色皮下会是一块白矩形。 */
  --art-medusae-base:  #0000ff;
  --art-medusae-one:   #4285f5;
  --art-medusae-two:   #eb4236;
  --art-medusae-three: #faba03;
}

.dark {
  color-scheme: dark;

  --background:            oklch(0.145 0 0);
  --foreground:            oklch(0.985 0 0);
  --card:                  oklch(0.205 0 0);
  --card-foreground:       oklch(0.985 0 0);
  --popover:               oklch(0.205 0 0);
  --popover-foreground:    oklch(0.985 0 0);

  --primary:               oklch(0.922 0 0);
  --primary-foreground:    oklch(0.205 0 0);
  --secondary:             oklch(0.269 0 0);
  --secondary-foreground:  oklch(0.985 0 0);
  --muted:                 oklch(0.269 0 0);
  --muted-foreground:      oklch(0.708 0 0);
  --accent:                oklch(0.371 0 0);
  --accent-foreground:     oklch(0.985 0 0);

  --success:               oklch(0.77 0.16 155);
  --success-foreground:    oklch(0.205 0 0);
  --warning:               oklch(0.82 0.15 85);
  --warning-foreground:    oklch(0.205 0 0);
  --info:                  oklch(0.78 0.13 235);
  --info-foreground:       oklch(0.205 0 0);
  --destructive:           oklch(0.704 0.191 22.216);
  --destructive-foreground:oklch(0.205 0 0);
  --primary-hover:         oklch(0.985 0 0);
  --secondary-hover:       oklch(0.371 0 0);
  --destructive-hover:     oklch(0.77 0.16 22.216);


  --border:                oklch(1 0 0 / 10%);
  --input:                 oklch(1 0 0 / 35%);
  --ring:                  oklch(0.556 0 0);

  --chart-1: oklch(0.72 0.2 262);
  --chart-2: oklch(0.75 0.13 185);
  --chart-3: oklch(0.78 0.14 75);
  --chart-4: oklch(0.72 0.22 305);
  --chart-5: oklch(0.7 0.2 15);

  /* 首屏粒子：光环三色（蓝/红/黄）两皮同值、一个字没改——暗底上它们反而更亮
     （实测对黑底 5.57 / 5.06 / 11.40）。唯独**静止粒子**要提亮：原值 #0000ff
     以 alpha .4 合成后，亮皮对白底 2.51:1（就是那层淡蓝雾），暗皮对黑底只有
     1.18:1 等于看不见。这里换成同色相的浅蓝，合成后 2.47:1，与亮皮观感相当。
     🔴 想严格两皮同一份值，删掉下面这一行即可——代价是暗色首屏几乎空白。 */
  --art-medusae-base: #b3b3ff;
}
/* ════════════════ 令牌层结束 ════════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* sticky 导航约 68px 高；没有这条，#pipeline 等锚点跳过去标题会被导航盖住 */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  font-family: var(--font-sans);
  color: var(--foreground);
  background: var(--background);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { font: inherit; }
.num { font-family: var(--font-num); }

/* 键盘可达：全站统一焦点环 */
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* 正文里的行内链接：品牌色退场后不靠颜色区分，靠下划线 */
.link { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--muted-foreground); }

/* ---------------- 导航 ---------------- */
.nav {
  background: var(--background);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.nav-mark {
  /* logo 真实资产（红线 10）：logo.png 纯黑 / logo-light.png 纯白，同形同尺寸，
     按皮肤换图——不许用 SVG 手工复刻，也不许拿 filter:invert 糊弄。 */
  height: 28px; width: auto; display: block; object-fit: contain;
}
.nav-mark-dark { display: none; }
.dark .nav-mark-light { display: none; }
.dark .nav-mark-dark { display: block; }
.nav-links { display: flex; align-items: center; gap: 36px; margin: 0 auto; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--muted-foreground); }
.nav-links a:hover, .nav-links a.active { color: var(--foreground); }
.nav-right { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.nav-right .nav-login { font-size: 14px; font-weight: 500; color: var(--muted-foreground); }
.nav-right .nav-login:hover { color: var(--foreground); }

/* 配色切换入口（theme.js 接管；无 JS 时按钮不显示，不留死控件） */
.skin-btn {
  display: none; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--radius-full);
  border: 1px solid var(--input); background: transparent;
  color: var(--muted-foreground); font-family: var(--font-sans); font-size: 13px;
  cursor: pointer; transition: background var(--dur) ease, color var(--dur) ease;
}
.skin-btn.ready { display: inline-flex; }
.skin-btn:hover { background: var(--accent); color: var(--accent-foreground); }
.skin-btn svg { width: 14px; height: 14px; flex: none; }

/* 公告横幅（site-config.js 动态插入）
   实心语义底 + 配对的 -foreground 字（SKILL §2 用法①）。
   promo 没有对应语义色，用中性 --primary 实心——品牌色已退场。 */
.announcement-banner { padding: 9px 24px; text-align: center; font-size: 13px; }
.announcement-info  { background: var(--info); color: var(--info-foreground); }
.announcement-warn  { background: var(--warning); color: var(--warning-foreground); }
.announcement-promo { background: var(--primary); color: var(--primary-foreground); }

/* ---------------- 按钮 ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 28px; border-radius: var(--radius-full);
  font-size: 15px; font-weight: 500; font-family: var(--font-sans);
  border: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur) ease, color var(--dur) ease,
              border-color var(--dur) ease, box-shadow var(--dur) ease;
}
/* 🔴 hover 绝不用 opacity 压整块：整块变淡会把**描边和文字一起冲淡**。
   实测（亮皮）：.btn-outline 的 --input 描边 3.30 → 2.78、.btn-disabled 的文字
   4.54 → 3.61，两条都跌破门槛；暗皮描边同样 3.14 → 2.67。而且红线 7 明写
   「不可用状态换颜色不换透明度」，.btn-disabled 本来就是 .btn，继承这条 hover
   等于给禁用态又加回一层透明度。
   改法：只调「底」这一层，文字与描边保持满强度；不可用态干脆不给 hover 反馈。 */
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary { background: var(--primary); color: var(--primary-foreground); }
/* 描边按钮：§4 规定 transparent 底，这里改用 --background 实底——它压在首屏粒子
   动画上，透明底会让文字直接叠在游动的粒子上。仍然是令牌，不是原值。
   hover 走 §4 的 outline 变体约定（accent 面 + accent 字），两皮都是不透明面，
   照样盖得住粒子。 */
.btn-outline { background: var(--background); color: var(--foreground); border: 1px solid var(--input); }
.btn-outline:hover { background: var(--accent); color: var(--accent-foreground); }
.btn-sm { padding: 9px 20px; font-size: 13px; }
.btn-lg { padding: 16px 40px; font-size: 16px; }
.btn-block { width: 100%; display: flex; }

/* ---------------- 徽章 / 小标签 ---------------- */
.badge {
  display: inline-flex; align-items: center; padding: 4px 10px;
  border-radius: var(--radius-full); font-size: 12px; font-weight: 600;
  background: var(--secondary); color: var(--secondary-foreground); font-family: var(--font-num);
}
/* 三种徽章靠「面」区分，不靠品牌色：中性次级 / 中性实心 / 语义成功 */
.badge-ai { background: var(--primary); color: var(--primary-foreground); }
.badge-green { background: var(--success); color: var(--success-foreground); font-family: var(--font-sans); }

/* ---------------- 区块通用 ---------------- */
.section { padding: 96px 24px; }
.section-subtle { background: var(--muted); }
/* 恒定深色区块：两皮都深，用侧栏令牌族（SKILL §1.7）。
   🔴 区块内不许借用会随皮反转的令牌，否则暗色皮下深字压深底。 */
.section-ink { background: var(--sidebar); color: var(--sidebar-foreground); }
.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
/* 眉标：原先是蓝紫粉渐变裁字，渐变退场后改为中性弱化字 + 字间距拉开 */
.section-kicker {
  display: inline-block; font-size: 13px; font-weight: 600; margin-bottom: 14px;
  color: var(--muted-foreground); letter-spacing: .08em;
}
.section-title { font-size: 36px; font-weight: 700; line-height: 1.35; }
.section-sub { font-size: 16px; color: var(--muted-foreground); margin-top: 12px; line-height: 1.7; }
.section-ink .section-sub { color: var(--sidebar-foreground); opacity: .72; }
/* 深色区块里的主按钮要用侧栏那对（浅底深字），否则亮色皮下
   --primary 近黑压在近黑的区块上，按钮形状等于消失（实测 1.06:1）。 */
.section-ink .btn-primary,
.footer .btn-primary { background: var(--sidebar-primary); color: var(--sidebar-primary-foreground); }
/* hover 同样只调底，且要往**侧栏底**混而不是往页面底混——页面底会随皮反转，
   亮皮下把浅按钮往白里混等于不变，暗皮下又混过头。 */
.section-ink .btn-primary:hover,
.footer .btn-primary:hover { background: var(--sidebar-primary-hover); }
/* 原 .grad-text（蓝紫粉渐变裁字）退场。强调改走**墨色层级**：
   引子压到弱化字色、落点回到正文色，靠明度差分主次，不靠色相。
   大字号下 --muted-foreground 对页面底 4.96:1 / 对 muted 面 4.54:1，两皮都过 AA。 */
.hero h1, .final-cta h2 { color: var(--muted-foreground); }
.hl { color: var(--foreground); }

/* ---------------- 首屏 Hero ---------------- */
/* 粒子动画只铺 Hero 自身：.hero 是 .hero-anim(inset:0) 的定位祖先，
   动画边界即 Hero 边界，第二屏（能力条）不再出现粒子。
   overflow:hidden 拦住画布在 Hero 高度变化瞬间的溢出。 */
.hero {
  position: relative; overflow: hidden;
  /* 铺满首屏：Hero 自己撑满「视口减去 sticky 导航」，.hero-anim(inset:0) 随之
     覆盖整个第一屏。粒子仍被 Hero 的 overflow:hidden 夹住，不会漏进能力条。
     dvh 放在 vh 之后：移动端地址栏收合时 vh 会跳，dvh 才是稳的；不支持 dvh 的
     浏览器落到前一条 vh。 */
  min-height: calc(100vh - 68px);
  min-height: calc(100dvh - 68px);
  /* space-evenly：文案与能力条在首屏内**均匀行距**排列——上、中、下三段留白相等。
     间距因此随屏高自适应，不再是写死的数值（写死的话矮屏必然把能力条挤出首屏）。
     内容高过首屏时（如手机四列堆成一列）自由空间为 0，两块自然贴合，不会溢出。 */
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
  padding: 40px 24px 32px; text-align: center; background: var(--background);
}
.hero-anim { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-anim canvas { width: 100%; height: 100%; display: block; }
.hero > .hero-content { position: relative; z-index: 1; }
.hero-kicker {
  display: inline-flex; align-items: center; padding: 6px 14px; margin-bottom: 22px;
  border: 1px solid var(--border); border-radius: var(--radius-full);
  /* 半透明页面底：粒子在药丸后面若隐若现，两皮自动跟随（不写死白色） */
  background: color-mix(in srgb, var(--background) 82%, transparent);
  font-size: 13px; color: var(--muted-foreground);
}
.hero h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 700; line-height: 1.3; }
.hero-sub {
  max-width: 640px; margin: 24px auto 0; font-size: 17px; line-height: 1.7;
  color: var(--muted-foreground);
}
.hero-cta { display: flex; justify-content: center; gap: 16px; margin-top: 36px; flex-wrap: wrap; }
.hero-trust {
  display: flex; justify-content: center; gap: 28px; margin-top: 22px;
  font-size: 13px; color: var(--muted-foreground); flex-wrap: wrap;
}
.hero-trust span::before { content: "✓ "; color: var(--success); font-weight: 700; }

/* ---------------- 能力条（四列一卡） ---------------- */
/* 能力条现在在 Hero **内部**（见 index.html 的注释）：整条不能再铺白底，
   否则会盖掉下面的粒子动画；只让 .cap-card 自己是实底卡浮在动画上层。
   z-index:1 与 .hero-content 同层，压在 .hero-anim(z-index:0) 之上。 */
.cap-strip {
  position: relative; z-index: 1;
  /* 不设上间距：与 Hero 文案的距离交给 .hero 的 justify-content: space-evenly
     去均分。这里再加 padding 会把那份均匀破坏掉。 */
  width: 100%; padding: 0; background: transparent;
}
/* 矮屏（1366×768 / 1280×720 这类笔记本）：Hero 文案 + 能力条同屏时垂直预算不够，
   实测 720p 下能力条底边会掉到 103% 处、被折叠线切掉一条。这里只收紧留白，不动
   字号与结构；高屏（>800px）完全不受影响，保持原来的疏朗。 */
@media (min-width: 641px) and (max-height: 800px) {
  .hero { padding: 24px 24px 20px; }
  .hero-sub { margin-top: 18px; }
  .hero-cta { margin-top: 24px; }
  .hero-trust { margin-top: 16px; }
}
.cap-card {
  max-width: var(--container); margin: 0 auto;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.cap-col { padding: 24px 26px; }
.cap-col + .cap-col { border-left: 1px solid var(--border); }
.cap-col h3 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.cap-col h3 .cap-ic { color: var(--muted-foreground); font-size: 16px; }
.cap-col p { font-size: 13px; color: var(--muted-foreground); margin-top: 8px; line-height: 1.65; }
/* 痛点句：先说"你现在有多烦"，再说我们怎么解决 */
.cap-col .cap-pain { color: var(--card-foreground); font-weight: 600; }
/* 能力边界的如实标注，字号更小，不抢主文案 */
.cap-col .cap-note { font-size: 12px; color: var(--muted-foreground); margin-top: 8px; }
.cap-col h3 .badge { font-size: 11px; padding: 2px 8px; }

/* ---------------- S1–S4 流水线 ---------------- */
.timeline { position: relative; height: 28px; max-width: var(--container); margin: 0 auto; }
.timeline::before {
  content: ""; position: absolute; left: 11.7%; right: 11.7%; top: 13px; height: 2px;
  background: var(--input);
}
.timeline i {
  position: absolute; top: 8px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--foreground); border: 2px solid var(--background);
}
.timeline i:nth-child(1) { left: calc(11.7% - 6px); }
.timeline i:nth-child(2) { left: calc(37.2% - 6px); }
.timeline i:nth-child(3) { left: calc(62.8% - 6px); }
.timeline i:nth-child(4) { left: calc(88.3% - 6px); }

.lane-grid {
  max-width: var(--container); margin: 20px auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.lane-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px; box-shadow: var(--shadow-sm);
}
.lane-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.lane-head .lane-num { font-family: var(--font-num); font-weight: 700; font-size: 13px; color: var(--muted-foreground); }
.lane-head .lane-title { font-size: 15px; font-weight: 700; }
.lane-head .badge { margin-left: auto; }
.lane-tasks li {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--muted-foreground); padding: 5px 0;
}
/* 状态字压在中性卡片面上 → 用语义色**本身**（SKILL §2 用法②），
   不是 -foreground（那是近白色，放白卡上实测 1.04:1）。 */
.lane-tasks .st { font-size: 12px; font-weight: 500; }
.st-done { color: var(--success); }
.st-run { color: var(--info); }
.st-wait { color: var(--warning); }

.value-grid {
  max-width: var(--container); margin: 48px auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.value-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; }
.value-card .v-ic {
  width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--muted);
  color: var(--foreground);
  display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 14px;
}
.value-card h3 { font-size: 18px; font-weight: 700; }
.value-card p { font-size: 14px; color: var(--muted-foreground); margin-top: 10px; line-height: 1.7; }

/* ---------------- 深色效果展示 ---------------- */
.showcase-row {
  max-width: 900px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 48px;
}
.showcase-inputs { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.showcase-thumb img { width: 190px; height: 190px; object-fit: cover; border-radius: var(--radius-md); }
.showcase-thumb figcaption { font-size: 13px; color: var(--sidebar-foreground); opacity: .72; margin-top: 10px; }
.showcase-op { color: var(--sidebar-foreground); opacity: .6; font-size: 22px; font-weight: 700; }
.showcase-result img { width: 440px; height: 552px; object-fit: cover; border-radius: var(--radius-lg); }
.showcase-caption {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; font-size: 13px; color: var(--sidebar-foreground); opacity: .72; width: 440px;
}
.showcase-caption .num { font-size: 12px; }

/* ---------------- 产物链（旅程） ---------------- */
.journey-row {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 420px 1fr; gap: 24px; align-items: stretch;
}
.journey-dark {
  background: var(--sidebar); color: var(--sidebar-foreground);
  border-radius: var(--radius-lg); padding: 36px 32px;
  display: flex; flex-direction: column; justify-content: center;
}
.journey-dark h3 { font-size: 26px; font-weight: 700; line-height: 1.45; }
.journey-dark p { font-size: 14px; color: var(--sidebar-foreground); opacity: .72; margin-top: 14px; line-height: 1.75; }
.journey-dark .journey-eyebrow { font-size: 13px; margin: 0 0 14px; }
.journey-dark .badge {
  align-self: flex-start; margin-top: 22px;
  background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); font-family: var(--font-sans);
}
.journey-list { display: flex; flex-direction: column; gap: 14px; }
.journey-item {
  display: flex; align-items: center; gap: 16px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 18px 22px; flex: 1;
}
.journey-item .j-ic {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-md);
  background: var(--muted); color: var(--foreground);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.journey-item h4 { font-size: 15px; font-weight: 700; }
.journey-item p { font-size: 13px; color: var(--muted-foreground); margin-top: 2px; }
.journey-item .j-check { margin-left: auto; color: var(--success); font-weight: 700; }

/* ---------------- 定价页与首页定价摘要 ---------------- */
/* 旧的四档套餐卡（.plan-grid/.plan-card/.plan-tier/.billing-toggle 等）已随
   订阅制废除而删除；仅保留仍在用的脚注样式。 */
.plan-note { text-align: center; font-size: 13px; color: var(--muted-foreground); margin-top: 24px; }
.plan-note a { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }

.cost-grid {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.cost-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }
.cost-card h3 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.cost-card .cost-v { font-family: var(--font-num); font-weight: 700; font-size: 22px; margin-top: 10px; }
.cost-card p { font-size: 13px; color: var(--muted-foreground); margin-top: 8px; line-height: 1.65; }
.cost-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cost-ic {
  flex: none; width: 18px; height: 18px; color: var(--muted-foreground);
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.pack-grid {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.pack-grid li.muted, #points-packs-list li.muted {
  grid-column: 1 / -1; text-align: center; color: var(--muted-foreground); font-size: 14px; padding: 24px 0;
}
.pack-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }
.pack-card h3 { font-size: 16px; font-weight: 700; }
.pack-card .pack-note { font-size: 12px; color: var(--muted-foreground); margin-top: 4px; }
.pack-line { display: flex; align-items: flex-end; margin-top: 14px; }
.pack-line b { font-family: var(--font-num); font-weight: 700; font-size: 28px; line-height: 1; }
.pack-line span { font-size: 13px; color: var(--muted-foreground); margin-left: 6px; }
.pack-line .pack-price { margin-left: auto; font-family: var(--font-num); font-weight: 600; font-size: 16px; color: var(--card-foreground); }

/* ---------------- 安全三卡 ---------------- */
.safe-grid {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.safe-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; }
.safe-card .s-ic {
  width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--muted);
  color: var(--foreground); display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 14px;
}
.safe-card h3 { font-size: 17px; font-weight: 700; }
.safe-card p { font-size: 14px; color: var(--muted-foreground); margin-top: 10px; line-height: 1.7; }

/* ---------------- FAQ ---------------- */
.faq-2col {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 340px 1fr; gap: 48px; align-items: start;
}
.faq-2col .faq-intro h2 { font-size: 28px; font-weight: 700; line-height: 1.4; }
.faq-2col .faq-intro p { font-size: 14px; color: var(--muted-foreground); margin-top: 12px; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-wrap { max-width: 760px; margin: 0 auto; }
.faq-group-title { font-size: 20px; font-weight: 700; margin: 36px 0 16px; }
.faq-wrap .faq-group-title:first-child { margin-top: 0; }
.faq-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); }
.faq-q {
  width: 100%; text-align: left; background: transparent; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--card-foreground);
  padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.faq-q::after { content: "▾"; color: var(--muted-foreground); font-size: 13px; transition: transform var(--dur) ease; flex-shrink: 0; }
.faq-item.open .faq-q::after { transform: rotate(180deg); }
.faq-a { display: none; padding: 0 22px 18px; font-size: 13px; line-height: 1.75; color: var(--muted-foreground); }
.faq-item.open .faq-a { display: block; }

/* ---------------- 联系 / 顾问卡 ---------------- */
.consult-card {
  display: inline-flex; align-items: center; gap: 20px; text-align: left;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px;
}
/* 图片容器（SKILL §4）：下沉面 --muted + **--input 描边**。
   二维码是白底图，浅皮下不描边就跟卡片面糊在一起，--border 只有 1.26:1 等于没描。 */
.consult-card .qrcode-img {
  width: 104px; height: 104px; object-fit: cover;
  border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--muted);
}
.consult-card h3 { font-size: 16px; font-weight: 700; }
.consult-card .c-id { font-size: 14px; color: var(--muted-foreground); margin-top: 6px; }
.consult-card .c-note { font-size: 12px; color: var(--muted-foreground); margin-top: 6px; max-width: 280px; }

/* ---------------- 下载页 ---------------- */
.dl-icon {
  width: 64px; height: 64px; margin: 0 auto 24px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--muted);
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.ver-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; }
/* 不可用状态换颜色不换透明度（红线 7）：muted 面 + muted 字，两皮都过 AA。
   🔴 它也是 .btn，所以 .btn 那边**不许再出现通用的 :hover 透明度规则**
   （见上），否则这条 4.54 会在 hover 时被冲到 3.61。不可用态不给任何 hover 反馈。 */
.btn-disabled {
  background: var(--muted); color: var(--muted-foreground);
  border: 1px solid var(--input); cursor: not-allowed;
}
.note-muted { font-size: 13px; color: var(--muted-foreground); }
.step-grid {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.step-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }
.step-card .step-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary); color: var(--primary-foreground);
  font-family: var(--font-num); font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.step-card h4 { font-size: 16px; font-weight: 700; }
.step-card p { font-size: 13px; color: var(--muted-foreground); margin-top: 8px; line-height: 1.7; }
.step-card code { background: var(--muted); color: var(--foreground); border-radius: var(--radius-sm); padding: 1px 6px; font-size: 12px; }

.changelog { max-width: 760px; margin: 0 auto; }
.changelog-entry { display: flex; gap: 24px; padding-bottom: 32px; }
.changelog-meta { width: 150px; flex-shrink: 0; }
.changelog-meta .v { font-family: var(--font-num); font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.changelog-meta .d { font-family: var(--font-num); font-size: 12px; color: var(--muted-foreground); margin-top: 6px; }
.changelog-items li {
  position: relative; padding-left: 16px; font-size: 14px; color: var(--muted-foreground); padding-bottom: 8px;
}
.changelog-items li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--muted-foreground);
}

/* ---------------- 页脚 ---------------- */
.footer { background: var(--sidebar); color: var(--sidebar-foreground); }
/* 鱼群带 + 居中品牌层。品牌层绝对定位覆在动画之上；.footer-fish 自己带高度，
   band 不重复写高，改动画高度时只需改一处。
   横带底铺的是与 SVG 内同一段水面渐变（--art-* 插画令牌）：
   d3 没加载时这层就是兜底，品牌字仍压在中心白上而不是压在一块深灰上。 */
.fish-band {
  position: relative;
  background: radial-gradient(circle, var(--art-water-center) 3%, var(--art-water-edge) 100%);
}
.fish-brand {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 0 20px;
  pointer-events: none;   /* 不挡住鱼群的鼠标交互 */
}
.fish-brand-row { display: flex; align-items: center; gap: 12px; }
.fish-brand-mark { height: 36px; width: auto; }
/* 鱼群背景中心是白色径向渐变、四周转青，故用**插画墨色**（两皮同值，不跟随主题——
   跟随的话暗色皮下这里会变成白字压白底）；再加一层白色外发光，
   保证文字压到青色区域时仍读得清（纯靠中心白点会随窗口宽度漂移）。 */
.fish-brand-name {
  font-size: 26px; font-weight: 700; color: var(--art-water-ink);
  text-shadow: 0 0 18px var(--art-water-glow), 0 0 6px var(--art-water-glow);
}
.fish-brand-slogan {
  font-size: 15px; color: var(--art-water-ink);
  text-shadow: 0 0 16px var(--art-water-glow), 0 0 5px var(--art-water-glow);
}
.footer-fish {
  /* 鱼群动画横带（仅首页）：动画代码来自 footer.txt，视觉保持原样 */
  height: 400px; background: transparent; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.footer-fish svg {
  max-height: 500px;
  background: radial-gradient(circle, var(--art-water-center) 3%, var(--art-water-edge) 100%);
}
.footer-inner { max-width: var(--container); margin: 0 auto; padding: 56px 24px 40px; }
.footer-top { display: flex; align-items: flex-start; }
.footer-brand-col .footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; }
.footer-brand-col .nav-mark { height: 24px; width: auto; }
/* 页脚恒定深色：所有弱化字走 --sidebar-foreground + 透明度，
   不许借 --muted-foreground（它会随皮反转，暗色皮下会变浅得没层次）。 */
.footer-slogan { font-size: 13px; color: var(--sidebar-foreground); opacity: .72; margin-top: 10px; }
.footer-links { margin-left: auto; display: flex; gap: 32px; }
.footer-links a { font-size: 13px; color: var(--sidebar-foreground); opacity: .78; }
.footer-links a:hover { opacity: 1; }
.footer-divider { height: 1px; background: var(--sidebar-border); margin: 40px 0 24px; }
.footer-copy { font-size: 12px; color: var(--sidebar-foreground); opacity: .72; }
.footer-beian { font-size: 12px; color: var(--sidebar-foreground); opacity: .72; margin-top: 6px; }
.footer-beian a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- 真实用量数字（信任背书） ----------------
   口径必须与服务器实测一致；改数字时同步改 .proof-note 的统计区间。 */
.proof-stats {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.proof-stat {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 24px; text-align: center;
}
.proof-stat b {
  display: block; font-family: var(--font-num); font-weight: 700;
  font-size: 34px; line-height: 1.1; letter-spacing: -.02em;
}
.proof-stat span { display: block; font-size: 13px; color: var(--muted-foreground); margin-top: 8px; }
.proof-note { text-align: center; font-size: 12px; color: var(--muted-foreground); margin-top: 20px; }

/* ---------------- 客户评价墙 ----------------
   ⚠️ 只放真实、已获授权的评价。没有真实评价时整块注释掉，不要用占位文案充数。 */
.quote-grid {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.quote-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 26px; display: flex; flex-direction: column;
}
.quote-card .q-mark {
  font-family: var(--font-num); font-size: 34px; line-height: 1;
  color: var(--input); margin-bottom: 10px;
}
.quote-card .q-text { font-size: 14px; line-height: 1.8; color: var(--card-foreground); flex: 1; }
.quote-card .q-meta {
  display: flex; align-items: center; gap: 12px;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border);
}
/* 无真人照片：用姓氏首字做圆形头像，避免用图库照片冒充真实客户 */
.quote-card .q-avatar {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: var(--muted); color: var(--muted-foreground);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
}
.quote-card .q-who { font-size: 14px; font-weight: 600; }
.quote-card .q-role { font-size: 12px; color: var(--muted-foreground); margin-top: 2px; }
.quote-card .q-tag {
  margin-left: auto; font-size: 12px; padding: 3px 9px; border-radius: var(--radius-full);
  background: var(--muted); color: var(--muted-foreground);
}

/* ---------------- 顶级模型支持 ---------------- */
.model-strip {
  max-width: var(--container); margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.model-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px; border-radius: var(--radius-full);
  border: 1px solid var(--input); background: var(--card);
  font-size: 14px; font-weight: 600; color: var(--card-foreground);
}
.model-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex: none; }
/* 未接入的模型：虚线边框 + 灰点 + 「未接入」标签，三重信号区分，不误导。
   文字用 --muted-foreground（4.96:1 对页面底）——「未接入」这几个字正是诚实声明
   的承重部分，必须看得清；弱化交给边框与圆点，不靠降低对比度。
   注：旧体系分 --text-secondary / --text-muted 两级弱化字，shadcn 只有一级，
   两者已并入 --muted-foreground，这里不再有"选深的那一级"可挑。 */
.model-pill.soon {
  border-style: dashed; border-color: var(--input);
  color: var(--muted-foreground); font-weight: 500; background: transparent;
}
.model-pill.soon i { background: var(--input); }
.model-pill em { font-style: normal; font-size: 12px; color: var(--muted-foreground); font-weight: 400; }
/* 待并入那排条目多，靠 flex 自由换行实测会出现 7+1 的孤儿行（超 38px）。
   钉成网格，换行结果不再取决于字体宽度。 */
.model-strip.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.model-strip.grid-4 .model-pill { justify-content: center; }

/* ---------------- 收尾大 CTA ---------------- */
.final-cta { text-align: center; }
.final-cta h2 {
  font-size: clamp(28px, 4.4vw, 46px); font-weight: 700; line-height: 1.35;
  letter-spacing: -.01em;
}
.final-cta .fc-sub { margin-top: 16px; font-size: 15px; color: var(--muted-foreground); }
.final-cta .fc-actions { margin-top: 32px; }
.final-cta .fc-fine { margin-top: 16px; font-size: 13px; color: var(--muted-foreground); }

/* ---------------- 工具类 ---------------- */
.text-center { text-align: center; }
.mt-8 { margin-top: 8px; }
.mt-24 { margin-top: 24px; }
.mt-28 { margin-top: 28px; }
.mt-48 { margin-top: 48px; }
.flex-center { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1024px) {
  .cap-card { grid-template-columns: repeat(2, 1fr); }
  .cap-col + .cap-col { border-left: none; }
  .cap-col:nth-child(even) { border-left: 1px solid var(--border); }
  .cap-col:nth-child(n+3) { border-top: 1px solid var(--border); }
  .lane-grid, .pack-grid { grid-template-columns: repeat(2, 1fr); }
  .value-grid, .safe-grid, .cost-grid, .cost-grid.cols-4 { grid-template-columns: 1fr 1fr; }
  .proof-stats { grid-template-columns: repeat(2, 1fr); }
  .model-strip.grid-4 { grid-template-columns: repeat(3, 1fr); }
  .quote-grid { grid-template-columns: 1fr 1fr; }
  .journey-row { grid-template-columns: 1fr; }
  .showcase-row { flex-direction: column; }
  .showcase-result img, .showcase-caption { width: 100%; max-width: 440px; }
  .faq-2col { grid-template-columns: 1fr; gap: 24px; }
  .timeline { display: none; }
}
@media (max-width: 640px) {
  .section { padding: 64px 20px; }
  /* 这两个不是 .section，得单独收边距，否则左缘 24px 与全站 20px 对不齐。
     能力条已移进 Hero，横向留白由 Hero 统一给，这里只收它的上间距。 */
  .hero { padding: 32px 20px 28px; }
  .cap-strip { padding: 24px 0 0; }
  .nav-links { display: none; }
  .cap-card, .lane-grid, .pack-grid, .value-grid, .safe-grid, .cost-grid, .cost-grid.cols-4 { grid-template-columns: 1fr; }
  .proof-stats, .quote-grid { grid-template-columns: 1fr; }
  .proof-stat { padding: 18px; }
  .proof-stat b { font-size: 30px; }
  /* 移动端每个 pill 独占一行会让路线图那 6 项拉出 6 屏，收紧到两列 */
  /* 移动端把三条 pill 排统一钉成两列，否则 flex 会换出 3+1、2+1+1 这种参差 */
  .model-strip { gap: 8px; display: grid; grid-template-columns: repeat(2, 1fr); }
  /* 比 1024 断点里的 .grid-4{repeat(3,1fr)} 更具体，否则那条会赢，排出 3/3/2 */
  .model-strip.grid-4 { grid-template-columns: repeat(2, 1fr); }
  .model-strip .model-pill { justify-content: center; }
  .model-pill { padding: 8px 12px; font-size: 12.5px; gap: 7px; }
  .model-pill em { font-size: 11px; }
  .cap-col { border-left: none !important; border-top: 1px solid var(--border); }
  .cap-col:first-child { border-top: none; }
  .footer-top { flex-direction: column; gap: 24px; }
  .footer-links { margin-left: 0; flex-wrap: wrap; }
  .hero-trust { gap: 14px; }
  .footer-fish { height: 260px; }
}