/*! ============================================================================
 *  AIEER 品牌层  v2.0
 *  ----------------------------------------------------------------------------
 *  依赖：css/design-tokens.css（Polo 设计规范 v1.0 令牌层）
 *        css/plugins.css + css/style.css（Polo 运行时）
 *
 *  规则（对齐 DESIGN_SPEC.md §9 反模式清单）：
 *    · 本文件**不出现任何硬编码色值 / 间距**，一律走 var(--token)
 *    · 单位统一用 px 令牌，不依赖 html{font-size:88%}（与 Polo 的 rem 并存但不混用）
 *    · 静态资源尺寸/定位的例外值集中标注 ✱
 *
 *  品牌层扩展令牌（DESIGN_SPEC 未覆盖的营销展示档，集中在此处声明，勿散落）
 * ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
 *  0. 字体：Poppins 自托管（替代原模板的 Google Fonts @import）
 *     字重契约见 DESIGN_SPEC.md §2.1：100,200,400,500,600,700,800
 *     仅取 latin 子集（中文走 --font-sans 里的系统 CJK 栈）
 * ══════════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("../webfonts/poppins/poppins-100.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("../webfonts/poppins/poppins-200.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../webfonts/poppins/poppins-300.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../webfonts/poppins/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../webfonts/poppins/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../webfonts/poppins/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../webfonts/poppins/poppins-700.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../webfonts/poppins/poppins-800.woff2") format("woff2");
}

/* ══════════════════════════════════════════════════════════════════════════
 *  1. 品牌层扩展令牌
 *     DESIGN_SPEC 的令牌体系覆盖到 --fs-section-title(48px)。
 *     营销展示档（首屏主标 / 产品名）需要更大字号与更强的留白节奏，
 *     在此集中声明并保持与基础字阶的倍数关系，不在页面里散写数值。
 * ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* 展示字阶：以 --fs-section-title(48px) 为基准按 1.333 递进 */
  --fs-display:       64px;   /* 首屏主标 · 整幅（≈ 48 × 1.333） */
  --fs-display-split: 48px;   /* 首屏主标 · 分栏（栏宽约为整幅一半，取 0.75 档以免换行甩字） */
  --fs-display-md:    48px;   /* ≤992px 降档 */
  --fs-display-sm:    32px;   /* ≤767px 降档（36px 时 9 字中文主标会溢出成孤行） */
  --fs-title:      40px;   /* 次级展示标题（≈ 30 × 1.333） */
  --fs-lead:       18px;   /* 引导语，= --fs-lg */

  /* ── 例外值说明 ─────────────────────────────────────────────────────────
   * 下列 px 不参与令牌化，属「结构 / 图形 / 资源固有」三类，均就地标注 ✱：
   *   · 边框与描边宽度（1px / 2px）、焦点环（2px）
   *   · 媒体查询断点（576 / 767 / 768 / 992 / 1200 / 1400，取自 DESIGN_SPEC §8）
   *   · 触控目标下限 44px（DESIGN_SPEC §8 规则）
   *   · 图形几何：图标盒 48px、波形条 4px、圆点 5px、卡片剪影 200×280 / 148×208
   *   · 资源固有尺寸：wordmark 82×22（源图 982×264，比例 3.720）
   * 其余一律走 var(--token)。
   * ─────────────────────────────────────────────────────────────────────── */

  /* 版式节奏 */
  --hero-padding-top:    120px;  /* 首屏上内边距（含 80px 头部让位） */
  --hero-padding-bottom:  84px;  /* = --section-padding-y */
  --tile-padding:         42px;  /* = --space-5 */
  --prose-max:            760px; /* 长文段落最大宽度（可读性） */
  --hero-sub-max:         820px; /* 首屏引导语最大宽度：比 --prose-max 略宽，
                                    否则中文长句会甩出单字孤行 */

  /* 品牌层专属：外发光（仅用于卡片悬浮，替代多层阴影叠加） */
  --shadow-lift: 0 14px 42px rgb(var(--color-primary-rgb) / 10%),
                 0 0 0 1px rgb(var(--color-primary-rgb) / 6%);
}

/* ══════════════════════════════════════════════════════════════════════════
 *  2. 基础重置与品牌基线
 * ══════════════════════════════════════════════════════════════════════════ */
html {
  scroll-behavior: smooth;
}

/* Polo 的 body 写死了 "Poppins", sans-serif —— 中文无字形可用，必须覆盖 */
body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  color: var(--color-text-heading);
}

/* DESIGN_SPEC §2.3 已知瑕疵 #1：原模板 h1 未声明字重，回落 700 导致层级断裂。
 * 品牌层显式补正为 600，恢复 h1 ≥ h2 ≥ h3 的连续层级。 */
h1 { font-weight: var(--fw-semibold); }

a { transition: color var(--duration-fast) var(--ease-in-out); }

::selection {
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
}

/* 图片基础契约：原模板 Bootstrap reboot 未编译进产物（§10.2 瑕疵 #7） */
img { max-width: 100%; height: auto; }
*, *::before, *::after { box-sizing: border-box; }

/* 焦点可见性（无障碍；Apple 级别产品站的必备项） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
 *  3. 头部与导航
 * ══════════════════════════════════════════════════════════════════════════ */
/* 🔴 特异性陷阱（实测踩过）：Polo 对头部 logo 下了两条高特异性规则
 *
 *   ① #header .header-inner #logo a > img  →  (2,1,2)  { display:none; height:80px }
 *   ② #header .header-inner #logo a span   →  (2,1,2)  { font-size:40px; font-weight:800 }
 *   ③ #header #logo > a img                →  (1,1,2)  { max-height:80px; padding-bottom:6px }
 *
 * 因此：
 *   · 覆盖 ①② 必须用 **≥(2,1,2)** 且写在 style.css 之后 —— 只用 `#logo a > img`(1,0,2)
 *     或 `#header #logo a > img`(2,0,2) 都**不够**，logo 会保持 display:none。
 *   · ③ 的 padding-bottom:6px 会顶低 logo 的垂直居中，需显式清零。
 *   · 本文件全局补的 `img{max-width:100%}`（DESIGN_SPEC §10.2 瑕疵 #7）在 **flex 主轴**上
 *     会把替换元素的宽度钳到容器宽度 —— 实测 logo 被拉到 1113px 并撑破 1140 容器。
 *     logo 图必须显式 `max-width:none` + `flex:none` + 定宽。 */
#header #logo,
#header .header-inner #logo {
  display: flex;
  align-items: center;
  float: left;
  /* ⚠️ 必须显式 shrink-to-fit：`float:left` + `display:flex` + `width:auto` 在本项目里
     实测**不会**收缩，会撑满容器（390px 屏实测右缘 390）⇒ 副标被挤出边界、
     或与右侧汉堡/导航重叠。用 `width: fit-content` 显式声明收缩语义。
     也**不要**用 max-width 百分比钳制（如 60%）：那会把副标挤成两行。
     ⚠️ 副标长度预算：约 16 字符 @11px/0.16em。超出请跑 docs/verify 查横向溢出。 */
  width: -moz-fit-content;
  width: fit-content;
  max-width: none;
  height: var(--header-height);
}

#header #logo a.brand-logo,
#header .header-inner #logo a.brand-logo {
  display: flex;
  align-items: center;
  font-size: inherit;
  letter-spacing: normal;
}

/* wordmark = images/logo/wordmark-black.png（982×264，比例 3.720）
 * 源图 images/logo/AIEER_black.png 是 2000×2000 画布、内容仅占 1740×468，
 * 已按 alpha bbox 裁掉留白后等比导出 —— **不可直接引用 2000×2000 原图**：
 * 那会让字标在页头里缩成 ~19px 宽、并多出约 36px 的幽灵上下间距。
 * 22px 高 ⇒ 宽 = round(22 × 982/264) = 82px。
 * ⚠️ 必须用**后代**选择器 `a img` 而非 `a > img`：本项目的 img 嵌在
 *    <a><span class="brand-lockup"><img></span></a> 里，不是 a 的直接子元素，
 *    用 `>` 会完全不匹配 —— 图片退回默认 inline replaced 行为，
 *    被全局 img{max-width:100%} 钳到容器宽（实测 668px）。 */
#header #logo a img,
#header .header-inner #logo a img {
  display: block;
  flex: none;
  width: 82px;
  height: 22px;
  max-width: none;
  max-height: none;
  padding: 0;
  transition: none;
}

#logo .brand-lockup,
#header .header-inner #logo a .brand-lockup {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: inherit;      /* 压过 Polo 的 #logo a span{font-size:40px} */
  font-weight: inherit;
  letter-spacing: normal;
  line-height: 1;
}

/* 产品锁定副标：需 ≥(2,1,2) 才能压过 Polo 的 #header .header-inner #logo a span */
#header #logo a .brand-sub,
#header .header-inner #logo a .brand-sub {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-left: var(--space-2);
  border-left: 1px solid var(--color-border);
  line-height: 1;
  white-space: nowrap;   /* 品牌副标必须单行；宁可被校验查出溢出，也不要静默折成两行 */
}

/* 头部：粘性 + 半透明（Polo 默认 static，品牌层改为粘性以贴合产品站体验） */
#header.ai-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-height);
  background-color: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--duration-base) var(--ease-base);
}

/* 导航链接：契约见 DESIGN_SPEC §6.5（12px / 600 / ls .6px / 默认 #7e8299） */
#header #mainMenu nav > ul > li > a,
#header #mainMenu nav > ul > li > a > span {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-nav);
  color: var(--color-text-nav);
  transition: color var(--duration-fast) var(--ease-in-out);
}

#header #mainMenu nav > ul > li > a:hover,
#header #mainMenu nav > ul > li > a:hover > span,
#header #mainMenu nav > ul > li.active > a,
#header #mainMenu nav > ul > li.active > a > span {
  color: var(--color-primary);
}

/* 语言切换：胶囊 */
#mainMenu nav > ul > li.ai-lang > a {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3) !important;
  line-height: var(--lh-loose) !important;   /* 12px × 1.857 ≈ 22px，与 --fs-sm 成比例 */
  color: var(--color-text-nav);
}

#mainMenu nav > ul > li.ai-lang > a:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background-color: var(--color-primary-tint);
}

/* ══════════════════════════════════════════════════════════════════════════
 *  4. 通用排版件
 * ══════════════════════════════════════════════════════════════════════════ */
.ai-eyebrow {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

/* 深色区块内的眉标（主色在深底上对比不足，改用白字） */
.ai-dark .ai-eyebrow,
.text-light .ai-eyebrow {
  color: rgba(255, 255, 255, 0.72);
}

/* 注意：基础 .ai-eyebrow 用 12px 会更接近 Apple 的节奏，但 DESIGN_SPEC §2.3
 * 把 12.1px 归给 h6；此处沿用 --fs-xs(11px)，与 Polo 的按钮/徽标字号同档。 */

.ai-lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.ai-dark .ai-lead,
.text-light .ai-lead {
  color: rgba(255, 255, 255, 0.78);
}

.ai-prose {
  max-width: var(--prose-max);
}

.ai-muted { color: var(--color-text-muted); }

/* 眉标 + 标题 + 描述 的组合块，替代 Polo 带短横线的 .heading-section
 * （短横线保留给内容页的章节标题，首屏与产品页用本组合更贴合营销版式） */
.ai-head {
  margin-bottom: var(--space-6);
}

/* 换行质量：中文长句极易在末行甩出 1–3 字孤行。
 * 用 text-wrap 让浏览器自己平衡行宽，比在内容里手写 <br> 或调 max-width 更稳，
 * 且一次覆盖所有断点。不支持该属性的浏览器退化为常规折行（渐进增强，无副作用）。 */
.ai-hero h1,
.ai-head h2,
.ai-cta h2,
.ai-tile-name,
.ai-card h3,
.ai-card h4 {
  text-wrap: balance;
}

.ai-hero-sub,
.ai-head p,
.ai-cta p,
.ai-quote,
.ai-lead,
.ai-card p,
.ai-spec-plain li {
  text-wrap: pretty;
}

.ai-head h2 {
  font-size: var(--fs-section-title);
  font-weight: var(--fw-semibold);
  line-height: 1.18;
  letter-spacing: var(--ls-heading);
  margin-bottom: var(--space-4);
}

.ai-head p {
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.ai-head--center {
  text-align: center;
  max-width: var(--prose-max);
  margin-left: auto;
  margin-right: auto;
}

.ai-dark .ai-head h2 { color: var(--color-text-light); }
.ai-dark .ai-head p  { color: rgba(255, 255, 255, 0.72); }

/* ══════════════════════════════════════════════════════════════════════════
 *  5. 按钮（走 Polo .btn 体系，仅补品牌层需要的形态）
 * ══════════════════════════════════════════════════════════════════════════ */
/* 规则：一屏内实心主按钮最多 1 个（DESIGN_SPEC §6.1） */
.ai-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.ai-btn-row--center { justify-content: center; }

/* Polo 的 .btn 组用 margin-left:4px 排布，改用 flex gap 后去掉 */
.ai-btn-row .btn { margin-bottom: 0; }

/* 大按钮：契约 --fs-h4(19.1px) 过大，品牌层用 16px（Polo .btn-lg 原值） */
.btn-ai-lg {
  font-size: 16px;
  font-weight: var(--fw-semibold);
  letter-spacing: 1px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  line-height: 20px;
  text-transform: none;
}

/* 深色区块上的次级按钮 */
.ai-dark .btn-outline,
.text-light .btn-outline {
  color: var(--color-text-light);
  border-color: rgba(255, 255, 255, 0.36);
}

.ai-dark .btn-outline:hover,
.text-light .btn-outline:hover {
  background-color: var(--color-text-light);
  border-color: var(--color-text-light);
  color: var(--color-text-heading);
}

/* 文字链（Apple 的「了解更多 ›」） */
.ai-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
}

.ai-link i { font-size: var(--fs-base); transition: transform var(--duration-fast) var(--ease-in-out); }
.ai-link:hover i { transform: translateX(3px); }

.ai-dark .ai-link,
.text-light .ai-link { color: var(--color-text-light); }

/* ══════════════════════════════════════════════════════════════════════════
 *  6. 首屏
 * ══════════════════════════════════════════════════════════════════════════ */
.ai-hero {
  padding-top: var(--hero-padding-top);
  padding-bottom: var(--hero-padding-bottom);
  background-color: var(--color-bg);
  background-image: radial-gradient(
    circle at 50% 0%,
    var(--color-primary-tint) 0%,
    var(--color-bg) 62%
  );
}

.ai-hero--center { text-align: center; }

/* 主标字号用自定义属性下发：变体只改 --hero-h1，媒体查询只需覆盖同名变量，
 * 不会出现「.ai-hero--center h1 (0,2,1) 压过媒体查询里的 .ai-hero h1 (0,1,1)」这类覆盖失败。 */
.ai-hero { --hero-h1: var(--fs-display); }
.ai-hero--split { --hero-h1: var(--fs-display-split); }

.ai-hero h1 {
  font-size: var(--hero-h1);
  font-weight: var(--fw-semibold);
  line-height: 1.15;
  letter-spacing: var(--ls-heading);
  margin-bottom: var(--space-4);
}

.ai-hero .ai-hero-sub {
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* 首屏主标下的单行参数摘要 */
.ai-hero .ai-hero-note {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.ai-hero--center .ai-hero-sub,
.ai-hero--center .ai-hero-note { margin-left: auto; margin-right: auto; }
.ai-hero--center .ai-hero-sub { max-width: var(--prose-max); }

.ai-hero .ai-btn-row { margin-top: var(--space-5); }

.ai-hero-shot {
  display: block;
  margin: 0 auto;
  max-width: 520px;
  width: 100%;
  /* 首屏图是**透明底抠图**（deskbot-hero.webp）：透明通道本身就能与径向底色自然融合，
     此处**不能**再加 mix-blend-mode: multiply —— 那会把白色机身按背景色相乘而染色。
     multiply 只用于白底棚拍图（见 .ai-tile-media img / .ai-figure img）。 */
}

/* 首屏视觉：产品图 + 柔光底（用品牌色 8% 铺白，等价 color-mix） */
.ai-hero-stage {
  position: relative;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background-color: var(--color-primary-tint);
}

.ai-hero--center .ai-hero-stage {
  margin-top: var(--space-5);
  background: none;
  padding: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
 *  7. 产品阵列（Apple 式首页产品宫格）
 * ══════════════════════════════════════════════════════════════════════════ */
.ai-grid {
  display: grid;
  gap: var(--grid-gutter);
}

.ai-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ai-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ai-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* 卡片做成链接时保持块级与继承排版 */
a.ai-card { display: block; text-decoration: none; }
a.ai-card:hover { text-decoration: none; }
a.ai-card h4 { color: var(--color-primary); }

/* 瓦片里的 stage：去掉自身的浅底与内边距，只留卡片剪影落在白卡上 */
.ai-tile .ai-stage {
  background: none;
  padding: 0;
  min-height: 0;
  border-radius: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
 *  7.1 无边框要点列表（规格正文 / 隐私说明，与 .ai-spec 表格区分）
 * ══════════════════════════════════════════════════════════════════════════ */
.ai-spec-plain {
  list-style: none;
  padding-left: 0;
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
}

.ai-spec-plain li {
  position: relative;
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.ai-spec-plain li:last-child { border-bottom: 0; }

/* 主色圆点标记 */
.ai-spec-plain li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-circle);
  background-color: var(--color-primary);
}

.ai-spec-plain b { font-weight: var(--fw-semibold); color: var(--color-text-heading); }
.ai-spec-plain a { color: var(--color-primary); }

/* 深色区块内的版本 */
.ai-spec-plain--light li { border-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.74); }
.ai-spec-plain--light li::before { background-color: var(--color-text-light); }
.ai-spec-plain--light b { color: var(--color-text-light); }
.ai-spec-plain--light a { color: var(--color-text-light); }

.ai-tile {
  display: flex;
  flex-direction: column;
  padding: var(--tile-padding);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--duration-slow) var(--ease-base),
              transform var(--duration-slow) var(--ease-base);
}

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

.ai-tile .ai-tile-tag {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.ai-tile .ai-tile-name {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--color-text-heading);
  margin-bottom: var(--space-2);
}

.ai-tile .ai-tile-desc {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* 视觉区：统一压到瓦片底部，保证三张卡的 CTA 在同一水平线上 */
.ai-tile-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  margin-top: auto;
  padding-top: var(--space-4);
}

.ai-tile .ai-link { margin-top: var(--space-4); }

.ai-tile-sub { color: var(--color-primary); font-weight: var(--fw-medium); }

/* 瓦片里的产品图统一用 multiply 融合底色：
 * 产品图是白底棚拍，白底在与瓦片底色不同的浅底上会露出可见的方形边界 */
.ai-tile-media img { mix-blend-mode: multiply; }

.ai-tile-shot {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

/* 阵列里的主推位：白卡 + 主色描边（不用灰底 —— 灰底瓦片放在灰底区块上边界不可辨） */
.ai-tile--feature { border-color: var(--color-primary); }

/* 占位卡（尚未发布的产品线）：虚线交由内部占位块表达，卡片本身保持实线 */
.ai-tile--soon .ai-tile-name { color: var(--color-text-muted); }

.ai-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 200px;
  border: 1px dashed var(--color-gray-400);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.ai-placeholder i { font-size: 26px; color: var(--color-gray-500); }

/* ══════════════════════════════════════════════════════════════════════════
 *  8. 图文分栏（产品页主力版式）
 * ══════════════════════════════════════════════════════════════════════════ */
.ai-split {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.ai-figure {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-bg-muted);
}

.ai-figure img { display: block; width: 100%; mix-blend-mode: multiply; }

/* ══════════════════════════════════════════════════════════════════════════
 *  9. 卡片 / 特性 / 指标
 * ══════════════════════════════════════════════════════════════════════════ */
.ai-card {
  height: 100%;
  padding: var(--space-5) var(--space-4);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--duration-slow) var(--ease-base);
}

.ai-card:hover { box-shadow: var(--shadow-card); }

/* 灰底区块里的卡片自动反白，避免同色相接 */
.background-grey .ai-card,
section[data-ai-bg="muted"] .ai-card { background-color: var(--color-bg); }

.ai-card .ai-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-base);
  background-color: var(--color-primary-tint);
  color: var(--color-primary);
  font-size: 22px;
}

.ai-card h3,
.ai-card h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  margin-bottom: var(--space-2);
}

.ai-card p {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* 深色区块内的卡片 */
.ai-dark .ai-card {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

.ai-dark .ai-card .ai-icon {
  background-color: rgba(255, 255, 255, 0.10);
  color: var(--color-text-light);
}

.ai-dark .ai-card p { color: rgba(255, 255, 255, 0.66); }
.ai-dark .ai-card h3,
.ai-dark .ai-card h4 { color: var(--color-text-light); }

/* 指标条 */
.ai-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background-color: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ai-stat {
  padding: var(--space-4) var(--space-3);
  background-color: var(--color-bg);
  text-align: center;
}

.ai-stat b {
  display: block;
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-text-heading);
  line-height: 1.3;
}

.ai-stat span {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
 * 10. 步骤 / 编号列表
 * ══════════════════════════════════════════════════════════════════════════ */
.ai-step-list { counter-reset: ai-step; }

.ai-step {
  position: relative;
  counter-increment: ai-step;
  height: 100%;
  padding: var(--space-5) var(--space-4) var(--space-5) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg);
}

.ai-step::before {
  content: counter(ai-step, decimal-leading-zero);
  position: absolute;
  left: var(--space-4);
  top: var(--space-5);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  line-height: 1;
}

.ai-step h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-2);
}

.ai-step p {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
 * 11. 深色区块
 * ══════════════════════════════════════════════════════════════════════════ */
/* 用法：<section class="ai-dark text-light">  —— 深底必须带 .text-light
 * （DESIGN_SPEC §1.3：否则标题会保持 #1e2022 在深底上不可读） */
.ai-dark {
  background-color: var(--color-bg-dark);
}

.ai-dark h1, .ai-dark h2, .ai-dark h3,
.ai-dark h4, .ai-dark h5, .ai-dark h6 { color: var(--color-text-light); }

.ai-dark p, .ai-dark li { color: rgba(255, 255, 255, 0.74); }

/* 深色区块里的规格表 */
.ai-dark .ai-spec tr { border-color: rgba(255, 255, 255, 0.14); }
.ai-dark .ai-spec th,
.ai-dark .ai-spec td { color: var(--color-text-light); }
.ai-dark .ai-spec td:first-child { color: rgba(255, 255, 255, 0.58); }

/* ══════════════════════════════════════════════════════════════════════════
 * 12. 规格表
 * ══════════════════════════════════════════════════════════════════════════ */
.ai-spec {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}

.ai-spec caption {
  text-align: left;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-bottom: var(--space-3);
}

.ai-spec th,
.ai-spec td {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  text-align: left;
  color: var(--color-text-heading);
  line-height: var(--lh-body);
}

.ai-spec td:first-child,
.ai-spec th:first-child {
  width: 32%;
  color: var(--color-text-muted);
  font-weight: var(--fw-normal);
}

.ai-spec td:last-child { padding-right: 0; }

/* ══════════════════════════════════════════════════════════════════════════
 * 13. 对比表（选型页）
 * ══════════════════════════════════════════════════════════════════════════ */
.ai-compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: var(--fs-base);
}

.ai-compare th,
.ai-compare td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
  line-height: var(--lh-body);
  color: var(--color-text-heading);
}

.ai-compare thead th {
  background-color: var(--color-bg-light);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.ai-compare tbody th {
  font-weight: var(--fw-medium);
  color: var(--color-text);
  background-color: var(--color-bg-light);
  width: 22%;
}

.ai-compare tbody tr:last-child th,
.ai-compare tbody tr:last-child td { border-bottom: 0; }

.ai-compare tbody tr:hover td { background-color: var(--color-primary-tint); }

/* 对比表里的「有 / 无」标记 */
.ai-yes { color: var(--color-success); font-weight: var(--fw-semibold); }
.ai-no  { color: var(--color-text-muted); }

/* 表格横向滚动容器（小屏保护） */
.ai-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ai-scroll-x .ai-compare { min-width: 620px; }

/* ══════════════════════════════════════════════════════════════════════════
 * 14. 纹章 / 徽标 / 提示
 * ══════════════════════════════════════════════════════════════════════════ */
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background-color: var(--color-primary-tint);
  color: var(--color-primary);
  line-height: 20px;
  align-self: flex-start;   /* flex 列内不被拉伸；块级上下文里此属性无效，安全 */
  width: -moz-fit-content;
  width: fit-content;
}

.ai-badge--neutral {
  background-color: var(--color-bg-muted);
  color: var(--color-text-muted);
}

.ai-dark .ai-badge {
  background-color: rgba(255, 255, 255, 0.10);
  color: var(--color-text-light);
}

/* 说明 / 免责小字 */
.ai-note {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

.ai-dark .ai-note { color: rgba(255, 255, 255, 0.54); }

/* 带主色竖线的引用块（用于原则 / 主张） */
.ai-quote {
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-primary);
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.ai-dark .ai-quote {
  border-color: var(--color-text-light);
  color: rgba(255, 255, 255, 0.84);
}

/* ══════════════════════════════════════════════════════════════════════════
 * 15. 几何构图件
 *     ReCard 尚无实拍图，用品牌色块与波形呈现「设计中的产品」。
 *     不使用伪造的产品摄影。
 * ══════════════════════════════════════════════════════════════════════════ */
.ai-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background-color: var(--color-primary-tint);
  overflow: hidden;
}

/* 卡片剪影：ReCard 的产品形态（一张卡） */
.ai-silhouette {
  position: relative;
  width: 200px;
  height: 280px;
  border-radius: var(--radius-xl);
  background: linear-gradient(
    150deg,
    var(--color-primary) 0%,
    var(--color-primary-hover) 100%
  );
  box-shadow: var(--shadow-lg);
}

/* 卡片上的拾音孔阵列 */
.ai-silhouette::before {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--space-5);
  transform: translateX(-50%);
  width: 88px;
  height: 88px;
  border-radius: var(--radius-circle);
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.92) 1.6px,
    transparent 1.7px
  );
  background-size: 11px 11px;
}

/* 卡片底部的状态指示灯 */
.ai-silhouette::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%);
  width: 44px;
  height: 4px;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.72);
}

/* 波形（语音可视化） */
.ai-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: 56px;
}

.ai-wave span {
  display: block;
  width: 4px;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  height: 20%;
}

.ai-wave span:nth-child(1) { height: 26%; }
.ai-wave span:nth-child(2) { height: 58%; }
.ai-wave span:nth-child(3) { height: 100%; }
.ai-wave span:nth-child(4) { height: 44%; }
.ai-wave span:nth-child(5) { height: 76%; }
.ai-wave span:nth-child(6) { height: 34%; }
.ai-wave span:nth-child(7) { height: 88%; }
.ai-wave span:nth-child(8) { height: 52%; }
.ai-wave span:nth-child(9) { height: 22%; }
.ai-wave span:nth-child(10) { height: 64%; }
.ai-wave span:nth-child(11) { height: 38%; }
.ai-wave span:nth-child(12) { height: 74%; }
.ai-wave span:nth-child(13) { height: 30%; }

.ai-dark .ai-wave span { background-color: var(--color-primary-contrast); }

/* ══════════════════════════════════════════════════════════════════════════
 * 16. 行动区（CTA）
 * ══════════════════════════════════════════════════════════════════════════ */
.ai-cta {
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-muted);
  text-align: center;
}

.ai-cta h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-2);
}

.ai-cta p {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  max-width: var(--prose-max);
  margin: 0 auto var(--space-4);
}

.ai-cta .ai-btn-row { margin-top: var(--space-4); }

.ai-dark .ai-cta {
  background-color: rgba(255, 255, 255, 0.05);
}

/* ══════════════════════════════════════════════════════════════════════════
 * 16.5 折叠问答
 *      用原生 <details>/<summary> 而非 Polo 的 Bootstrap 折叠：
 *      零 JS 依赖、键盘可达、屏幕阅读器语义正确。
 * ══════════════════════════════════════════════════════════════════════════ */
.ai-faq {
  border-bottom: 1px solid var(--color-border);
}

.ai-faq:first-of-type { border-top: 1px solid var(--color-border); }

.ai-faq > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  min-height: 44px;                 /* 触控目标 */
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-h5);
  font-weight: var(--fw-medium);
  color: var(--color-text-heading);
  transition: color var(--duration-fast) var(--ease-in-out);
}

.ai-faq > summary::-webkit-details-marker { display: none; }
.ai-faq > summary:hover { color: var(--color-primary); }

.ai-faq > summary i {
  flex: none;
  font-size: 14px;
  color: var(--color-primary);
  transition: transform var(--duration-base) var(--ease-in-out);
}

.ai-faq[open] > summary i { transform: rotate(90deg); }

.ai-faq-body {
  padding-bottom: var(--space-4);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  max-width: var(--prose-max);
}

/* ══════════════════════════════════════════════════════════════════════════
 * 17. 表单（沿用 Polo .form-control，补品牌层尺寸）
 * ══════════════════════════════════════════════════════════════════════════ */
.ai-form label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-heading);
  margin-bottom: var(--space-2);
}

.ai-form .form-group { margin-bottom: var(--space-4); }

.ai-form .form-control {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-3);
  font-size: var(--fs-base);
  font-family: var(--font-sans);
  color: var(--color-text-heading);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  box-shadow: none;
  transition: border-color var(--duration-fast) var(--ease-in-out);
}

.ai-form textarea.form-control {
  min-height: 140px;
  padding: var(--space-3);
  line-height: var(--lh-body);
  resize: vertical;
}

.ai-form select.form-control {
  border-radius: var(--radius-sm);
  height: 48px;
}

.ai-form .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: none;
}

.ai-form .form-control::placeholder { color: var(--color-text-muted); }

.ai-form .form-control.is-invalid {
  border-color: var(--color-danger);
}

.ai-form .ai-req { color: var(--color-danger); }

.ai-form-note {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  margin-bottom: 0;
  transition: color var(--duration-fast) var(--ease-in-out);
}

.ai-form-note.is-error { color: var(--color-danger); }
.ai-form-note.is-ok { color: var(--color-success); }

/* ══════════════════════════════════════════════════════════════════════════
 * 18. 页脚
 * ══════════════════════════════════════════════════════════════════════════ */
#footer {
  background-color: var(--color-bg-dark);
  color: rgba(255, 255, 255, 0.74);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

#footer .footer-content { padding: var(--space-6) 0 var(--space-5); }

#footer .footer-brand { display: inline-block; margin-bottom: var(--space-3); }
/* 同头部：显式定宽，避免被全局 img{max-width:100%} 影响 */
#footer .footer-brand img {
  display: block;
  width: 82px;
  height: 22px;
  max-width: none;
}

#footer p { color: rgba(255, 255, 255, 0.66); font-size: var(--fs-base); }

#footer .widget-title {
  color: var(--color-text-light);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-3);
}

#footer .widget ul { list-style: none; padding-left: 0; margin: 0; }
#footer .widget ul li { line-height: 2; }
#footer a:not(.btn) { color: rgba(255, 255, 255, 0.74); }
#footer a:not(.btn):hover { color: var(--color-text-light); }

#footer .ai-footer-meta { padding-left: 0; margin: 0; }
#footer .ai-footer-meta li { line-height: 2; }

#footer .copyright-content {
  background-color: rgba(255, 255, 255, 0.04);
  padding: var(--space-3) 0;
  font-size: var(--fs-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#footer .copyright-text { color: rgba(255, 255, 255, 0.54); }
#footer .beian { color: rgba(255, 255, 255, 0.54); text-decoration: none; }
#footer .beian:hover { color: var(--color-text-light); }

/* ══════════════════════════════════════════════════════════════════════════
 * 19. 返回顶部
 * ══════════════════════════════════════════════════════════════════════════ */
#scrollTop {
  z-index: var(--z-sticky);
}

/* ══════════════════════════════════════════════════════════════════════════
 * 20. 间距工具（品牌层，取代 Polo 的 250+ 个任意 px 工具类，
 *     仅暴露本站在用的少数几个；值一律取 --space-* 阶梯）
 * ══════════════════════════════════════════════════════════════════════════ */
.ai-mt-0  { margin-top: 0 !important; }
.ai-mt-1  { margin-top: var(--space-1) !important; }
.ai-mt-2  { margin-top: var(--space-2) !important; }
.ai-mt-3  { margin-top: var(--space-3) !important; }
.ai-mt-4  { margin-top: var(--space-4) !important; }
.ai-mt-5  { margin-top: var(--space-5) !important; }
.ai-mt-6  { margin-top: var(--space-6) !important; }

.ai-mb-0  { margin-bottom: 0 !important; }
.ai-mb-2  { margin-bottom: var(--space-2) !important; }
.ai-mb-3  { margin-bottom: var(--space-3) !important; }
.ai-mb-4  { margin-bottom: var(--space-4) !important; }
.ai-mb-5  { margin-bottom: var(--space-5) !important; }
.ai-mb-6  { margin-bottom: var(--space-6) !important; }

/* ══════════════════════════════════════════════════════════════════════════
 * 21. 响应式（断点严格取自 DESIGN_SPEC §8：576 / 768 / 992 / 1200 / 1400）
 * ══════════════════════════════════════════════════════════════════════════ */

/* ≤1400px：容器宽对齐 --container-xxl */
@media (max-width: 1400px) {
  .ai-stats { grid-template-columns: repeat(3, 1fr); }
}

/* ≤1200px */
@media (max-width: 1200px) {
  .ai-grid--3,
  .ai-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ≤992px：按钮压缩、标题降档、短横线隐藏（Polo 契约），
 *       并且移动端触控目标补足到 44px（§8 规则） */
@media (max-width: 992px) {
  .ai-hero,
  .ai-hero--split { --hero-h1: var(--fs-display-md); }
  .ai-hero { padding-top: var(--hero-padding-top); padding-bottom: var(--section-padding-y); }

  .ai-card { padding: var(--space-4); }
  .ai-tile { padding: var(--space-4); }
  .ai-tile .ai-tile-name { font-size: var(--fs-h3); }

  /* 触控目标补足：Polo 移动端按钮仅 32px 高（§10.2 瑕疵 #5） */
  .btn,
  .btn-ai-lg {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .ai-btn-row .btn { flex: 1 1 100%; }
  .ai-btn-row .btn + .btn { margin-left: 0; }
}

/* ≤768px：section 内边距降到 40px（Polo 契约）；标题再降一档 */
@media (max-width: 768px) {
  .ai-stats { grid-template-columns: repeat(2, 1fr); }
  .ai-head h2 { font-size: var(--fs-h2); }
  .ai-cta { padding: var(--space-5) var(--space-4); }
}

/* ≤767px：标题降一档（§2.4） */
@media (max-width: 767px) {
  /* 小屏取消手写 <br>：桌面端为控制语义断行而写的 <br>，在窄栏里会把末行压成
   * 「AI」这类 1–2 字孤行（实测 about 页 h1）。小屏改由 text-wrap:balance 自动平衡。 */
  .ai-hero h1 br,
  .ai-head h2 br,
  .ai-cta h2 br { display: none; }

  .ai-hero,
  .ai-hero--split { --hero-h1: var(--fs-display-sm); }
  .ai-hero .ai-hero-sub,
  .ai-head p,
  .ai-lead { font-size: var(--fs-base); }

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

  .ai-grid { gap: var(--space-4); }
  .ai-step { padding: var(--space-4); }
  .ai-step::before { position: static; display: block; margin-bottom: var(--space-2); }
}

/* ≤576px */
@media (max-width: 576px) {
  .ai-stats { grid-template-columns: 1fr; }
  .ai-silhouette { width: 148px; height: 208px; }
  .ai-hero-stage { padding: var(--space-4); }
}

/* 打印 / 降级：无 backdrop-filter 支持时头部保持不透明 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #header.ai-header { background-color: var(--color-bg); }
}

/* 尊重系统的减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .ai-tile:hover { transform: none; }
}