/* ============================================================
   ifu.me 主样式 — 基于品牌规范（docs/品牌规范.md）
   设计原则：真诚、专业、友好、克制、有温度
   - 暖白纸感背景 + 主品牌绿强调色
   - 4px 间距系统 · 圆角系统 · Elevation 层级（暗色）
   - 板块标题左侧 4px 绿色竖线装饰
   ============================================================ */

/* ---------- 派生令牌（品牌规范未定义，按 PRD 视觉规范补充） ---------- */
:root {
  --ifu-gray-50: var(--ifu-black-900);      /* 亮色下近似黑（标题），暗色下反白 */
  --ifu-gray-400: #a3a09a;
  --ifu-gray-600: #6f6d66;
  --ifu-gray-900: var(--ifu-black-900);
  --ifu-bg-canvas: var(--ifu-cream-50);     /* 页面主背景 */
  --ifu-bg-soft: var(--ifu-green-100);      /* 浅绿底（节奏分区） */
  --ifu-card-bg: var(--ifu-white);
  --ifu-text-h4: 18px;
  --ifu-text-h5: 16px;
  --ifu-text-h6: 14px;
  --ifu-text-body-sm: 14px;
  --ifu-text-display-sm: 36px;
  --ifu-leading-h4: 26px;
  --ifu-leading-h5: 24px;
  --ifu-leading-h6: 20px;
  --ifu-leading-body-sm: 22px;
  --ifu-leading-display-sm: 44px;
  --ifu-space-20: 80px;
  --ifu-space-24: 96px;
  --ifu-shadow-glow: 0 0 32px rgba(16, 185, 129, 0.25);
  --ifu-translate-y: -4px;
  --ifu-header-height: 76px;
  --ifu-max-width: 1200px;
}

html[data-theme="dark"] {
  --ifu-gray-50: #f2f2f0;
  --ifu-gray-400: #b9bbb6;
  --ifu-gray-600: #a7aaa5;
  --ifu-gray-900: var(--ifu-black-900);
  --ifu-bg-canvas: var(--ifu-cream-50);
  /* soft 分区背景：品牌规范 3.4 要求暗色延续「微暖绿调」而非大面积深绿。
     0.12 alpha 的 green-100 叠加在 #121413 上会形成明显深绿色块，降低为 0.05 保留氛围。 */
  --ifu-bg-soft: rgba(16, 185, 129, 0.05);
  --ifu-card-bg: var(--ifu-elevation-1);
}

/* ---------- Reset 与基础 ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--ifu-font-cn);
  font-size: var(--ifu-text-body);
  line-height: var(--ifu-leading-body);
  color: var(--ifu-gray-700);
  background: var(--ifu-bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 0.3s ease, color 0.3s ease;
}

img { max-width: 100%; display: block; }
a { color: var(--ifu-green-600); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--ifu-space-2);
  color: var(--ifu-gray-900);
  font-weight: 600;
  line-height: 1.3;
}
p { margin: 0 0 var(--ifu-space-4); }
ul, ol { margin: 0 0 var(--ifu-space-4); padding-left: var(--ifu-space-6); }
:focus-visible { outline: none; box-shadow: var(--ifu-shadow-focus); border-radius: var(--ifu-radius-sm); }

::selection { background: var(--ifu-green-200); color: var(--ifu-gray-900); }

/* 锚点跳转偏移：避免被 sticky 头部遮挡（产品详情页板块跳转核心） */
[id] { scroll-margin-top: calc(var(--ifu-header-height, 64px) + var(--ifu-space-4)); }

/* ---------- 布局容器 ---------- */
.ifu-container {
  width: 100%;
  max-width: var(--ifu-max-width);
  margin: 0 auto;
  padding: 0 var(--ifu-space-6);
}

.ifu-section { padding: var(--ifu-space-20) 0; }
.ifu-section--soft { background: var(--ifu-bg-soft); }
.ifu-section--canvas { background: var(--ifu-bg-canvas); }

/* ---------- 板块标题（左侧 4px 绿色竖线装饰） ---------- */
.ifu-section-head {
  text-align: center;
  margin-bottom: var(--ifu-space-12);
}
.ifu-section-head .ifu-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ifu-space-2);
  font-size: var(--ifu-text-caption);
  letter-spacing: 2px;
  color: var(--ifu-green-600);
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: var(--ifu-space-2);
}
.ifu-section-head .ifu-eyebrow::before,
.ifu-section-head .ifu-eyebrow::after {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--ifu-green-500);
  opacity: 0.6;
}
.ifu-section-head h2 {
  font-size: var(--ifu-text-h2);
  line-height: var(--ifu-leading-h2);
  font-weight: 600;
}
.ifu-section-head .ifu-section-sub {
  max-width: 560px;
  margin: var(--ifu-space-2) auto 0;
  color: var(--ifu-gray-500);
  font-size: var(--ifu-text-body);
}
/* 左对齐板块头（带绿色竖线） */
.ifu-section-head--left {
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: var(--ifu-space-3);
}
.ifu-section-head--left::before {
  content: "";
  flex: 0 0 4px;
  width: 4px;
  height: 34px;
  margin-top: var(--ifu-space-1);
  background: var(--ifu-green-500);
  border-radius: var(--ifu-radius-full);
}
.ifu-section-head--left h2 { margin-bottom: 0; }

/* ---------- 按钮 ---------- */
.ifu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ifu-space-2);
  padding: var(--ifu-space-3) var(--ifu-space-6);
  border-radius: var(--ifu-radius-md);
  font-size: var(--ifu-text-body);
  font-weight: 500;
  font-family: var(--ifu-font-cn);
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  text-decoration: none;
}
.ifu-btn:hover { text-decoration: none; }

.ifu-btn--primary {
  background: var(--ifu-btn-primary);
  color: var(--ifu-white);
  box-shadow: var(--ifu-shadow-sm);
}
.ifu-btn--primary:hover {
  background: var(--ifu-btn-primary-hover);
  box-shadow: var(--ifu-shadow-md);
  transform: translateY(var(--ifu-translate-y));
}
.ifu-btn--primary:focus-visible { box-shadow: var(--ifu-shadow-focus); }

.ifu-btn--secondary {
  background: var(--ifu-card-bg);
  color: var(--ifu-gray-900);
  border-color: var(--ifu-cream-200);
  box-shadow: var(--ifu-shadow-sm);
}
.ifu-btn--secondary:hover {
  border-color: var(--ifu-green-500);
  color: var(--ifu-green-600);
  box-shadow: var(--ifu-shadow-md);
  transform: translateY(var(--ifu-translate-y));
}

.ifu-btn--ghost {
  background: transparent;
  color: var(--ifu-green-600);
}
.ifu-btn--ghost:hover { color: var(--ifu-green-500); }

.ifu-btn--inverse {
  background: var(--ifu-bg-canvas);
  color: var(--ifu-green-700);
  box-shadow: var(--ifu-shadow-sm);
}
.ifu-btn--inverse:hover {
  box-shadow: var(--ifu-shadow-md);
  transform: translateY(var(--ifu-translate-y));
  color: var(--ifu-green-600);
}

/* 深绿底玻璃按钮（最终 CTA / 订阅区次级按钮） */
.ifu-btn--glass {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
.ifu-btn--glass:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  box-shadow: var(--ifu-shadow-md);
  transform: translateY(var(--ifu-translate-y));
}

/* ---------- 标签 / 徽章 ---------- */
.ifu-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--ifu-space-1);
  padding: 2px var(--ifu-space-2);
  border-radius: var(--ifu-radius-sm);
  font-size: var(--ifu-text-caption);
  line-height: 1.6;
  font-weight: 500;
  white-space: nowrap;
}
.ifu-tag--free { background: var(--ifu-green-500); color: #fff; }
.ifu-tag--free-outline { border: 1px solid var(--ifu-green-500); color: var(--ifu-green-600); }
/* 付费标识使用品牌深灰（明码标价感），避免橙色（品牌规范 3.6 非令牌色禁忌） */
.ifu-tag--paid { background: var(--ifu-gray-900); color: var(--ifu-card-bg); }
.ifu-tag--paid-outline { border: 1px solid var(--ifu-gray-700); color: var(--ifu-gray-700); }
.ifu-tag--scene { background: var(--ifu-green-100); color: var(--ifu-green-700); }
.ifu-tag--gray { background: var(--ifu-cream-100); color: var(--ifu-gray-500); }
/* 暗色下浅绿底标签文字提亮（green-700 在 0.12 绿底上对比度不足，AA 要求） */
html[data-theme="dark"] .ifu-tag--scene { color: var(--ifu-green-400); }

/* 价格角标 */
.ifu-price-badge {
  position: absolute;
  top: var(--ifu-space-4);
  right: var(--ifu-space-4);
  padding: var(--ifu-space-1) var(--ifu-space-3);
  border-radius: var(--ifu-radius-full);
  font-size: var(--ifu-text-caption);
  font-weight: 600;
  color: #fff;
}
.ifu-price-badge--free { background: var(--ifu-green-500); }
.ifu-price-badge--paid { background: var(--ifu-gray-900); color: var(--ifu-card-bg); }

/* ============================================================
   头部导航（64px 毛玻璃）
   ============================================================ */
.ifu-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--ifu-header-height);
  background: var(--ifu-header-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.ifu-header.is-scrolled {
  border-bottom-color: var(--ifu-border-subtle);
  box-shadow: var(--ifu-shadow-sm);
}
.ifu-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--ifu-space-6);
}
.ifu-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--ifu-space-2);
  flex-shrink: 0;
}
.ifu-logo:hover { text-decoration: none; }
/* 组合标志（450×120 横向，3.75:1）：导航栏内按 40px 高等比缩放显示（宽 150px） */
.ifu-logo svg { width: 150px; height: 40px; }
/* 品牌规范 2.2：组合标志内文字统一使用鸿蒙字体 */
.ifu-logo svg .brand-title,
.ifu-logo svg .brand-subtitle { font-family: var(--ifu-font-cn); }

.ifu-nav {
  display: flex;
  align-items: center;
  gap: var(--ifu-space-1);
}
.ifu-nav a {
  position: relative;
  padding: var(--ifu-space-2) var(--ifu-space-3);
  font-size: 16px;
  color: var(--ifu-gray-700);
  border-radius: var(--ifu-radius-md);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.ifu-nav a:hover { color: var(--ifu-green-600); background: var(--ifu-green-100); text-decoration: none; }
/* 当前页面指示：绿色药丸底 + 文字加粗（亮色）/ 提亮绿字（暗色） */
.ifu-nav a.is-active {
  color: var(--ifu-green-700);
  font-weight: 600;
  background: var(--ifu-green-100);
}
html[data-theme="dark"] .ifu-nav a.is-active { color: var(--ifu-green-400); }

.ifu-header__actions {
  display: flex;
  align-items: center;
  gap: var(--ifu-space-2);
}

/* 主题切换按钮 */
.ifu-theme-toggle {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ifu-cream-200);
  border-radius: var(--ifu-radius-full);
  background: var(--ifu-card-bg);
  color: var(--ifu-gray-700);
  cursor: pointer;
  transition: all 0.2s ease;
}
.ifu-theme-toggle:hover { color: var(--ifu-green-600); border-color: var(--ifu-green-500); box-shadow: var(--ifu-shadow-sm); }
.ifu-theme-toggle .icon-sun { display: none; }
.ifu-theme-toggle .icon-moon { display: block; }
html[data-theme="dark"] .ifu-theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .ifu-theme-toggle .icon-moon { display: none; }

/* 移动端菜单按钮 */
.ifu-nav-toggle {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ifu-cream-200);
  border-radius: var(--ifu-radius-md);
  background: var(--ifu-card-bg);
  color: var(--ifu-gray-900);
  cursor: pointer;
}

/* ============================================================
   底部（深色反白）
   ============================================================ */
.ifu-footer {
  background: var(--ifu-footer-bg);
  color: var(--ifu-gray-500);
  padding: var(--ifu-space-16) 0 var(--ifu-space-8);
  font-size: 14px;
}
/* 顶部品牌色渐变分隔线，提升整洁感；margin-bottom 保证与下方内容留有呼吸间距 */
.ifu-footer::before {
  content: "";
  display: block;
  height: 4px;
  margin-bottom: var(--ifu-space-12);
  background: linear-gradient(90deg, var(--ifu-green-500), var(--ifu-green-300), transparent);
}
.ifu-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--ifu-space-12);
  margin-bottom: var(--ifu-space-12);
}
.ifu-footer h4 {
  color: #fff;
  font-size: 15px;
  margin-bottom: var(--ifu-space-4);
}
.ifu-footer a { color: var(--ifu-gray-500); display: inline-block; margin-bottom: var(--ifu-space-2); }
.ifu-footer a:hover { color: var(--ifu-green-400); text-decoration: none; }
/* 产品列双列网格：产品数量增长时高度可控，避免单列失控 */
.ifu-footer__products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ifu-space-2) var(--ifu-space-4);
}
.ifu-footer__products a { margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ifu-footer__brand p { margin-top: var(--ifu-space-3); line-height: 1.8; max-width: 300px; }
/* 底部深色背景反白：组合标志文字通过 CSS 变量强制亮色（品牌规范 2.5 深色背景反白规则） */
.ifu-footer .ifu-logo svg {
  --ifu-mark-title: #e8e8e8;
  --ifu-mark-subtitle: #9a9d9a;
}
.ifu-footer__slogan { color: var(--ifu-green-400); font-weight: 500; }
.ifu-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: var(--ifu-space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ifu-space-4);
  font-size: 13px;
}
.ifu-footer__legal { display: flex; gap: var(--ifu-space-6); }

/* ============================================================
   首页 Hero（版本 B · 痛点共鸣版）
   ============================================================ */
.ifu-hero {
  position: relative;
  overflow: hidden;
  padding: var(--ifu-space-24) 0;
  background: var(--ifu-bg-canvas);
}
/* 微暖光晕背景 */
.ifu-hero::before {
  content: "";
  position: absolute;
  top: -160px;
  right: -120px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, var(--ifu-green-100), transparent 65%);
  opacity: 0.9;
  pointer-events: none;
}
.ifu-hero::after {
  content: "";
  position: absolute;
  bottom: -200px;
  left: -120px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, var(--ifu-green-100), transparent 65%);
  opacity: 0.5;
  pointer-events: none;
}
.ifu-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ifu-space-16);
  align-items: center;
}
.ifu-hero__content { max-width: 720px; }
.ifu-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ifu-space-2);
  padding: var(--ifu-space-1) var(--ifu-space-3);
  border: 1px solid var(--ifu-green-500);
  border-radius: var(--ifu-radius-full);
  color: var(--ifu-green-600);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: var(--ifu-space-4);
}
.ifu-hero h1 {
  font-size: var(--ifu-text-display);
  line-height: var(--ifu-leading-display);
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: var(--ifu-space-4);
}
.ifu-hero__sub {
  font-size: var(--ifu-text-h4);
  line-height: var(--ifu-leading-h4);
  color: var(--ifu-gray-500);
  margin-bottom: var(--ifu-space-8);
}
.ifu-hero__story p {
  color: var(--ifu-gray-700);
  margin-bottom: var(--ifu-space-6);
  max-width: 720px;
}
.ifu-hero__story p:last-child { margin-bottom: 0; }
.ifu-hero__story mark {
  background: linear-gradient(transparent 60%, var(--ifu-green-100) 60%);
  color: var(--ifu-gray-900);
  font-weight: 600;
  padding: 0 2px;
  border-radius: 2px;
}
.ifu-hero__cta {
  display: flex;
  gap: var(--ifu-space-4);
  margin-top: var(--ifu-space-8);
  flex-wrap: wrap;
}
.ifu-hero__visual { position: relative; }
.ifu-hero__card {
  background: var(--ifu-card-bg);
  border: 1px solid var(--ifu-border-subtle);
  border-radius: var(--ifu-radius-xl);
  box-shadow: var(--ifu-shadow-lg);
  padding: var(--ifu-space-6);
  position: relative;
}
.ifu-hero__card-title {
  display: flex;
  align-items: center;
  gap: var(--ifu-space-2);
  font-size: var(--ifu-text-h4);
  color: var(--ifu-gray-900);
  margin-bottom: var(--ifu-space-6);
}
.ifu-hero__card-title .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ifu-green-500);
}
.ifu-hero__window {
  background: var(--ifu-cream-100);
  border-radius: var(--ifu-radius-md);
  border: 1px solid var(--ifu-border-subtle);
  overflow: hidden;
}
.ifu-hero__window-bar {
  display: flex;
  gap: 6px;
  padding: var(--ifu-space-2) var(--ifu-space-3);
  background: var(--ifu-elevation-2);
}
.ifu-hero__window-bar i {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ifu-gray-300);
}
.ifu-hero__window-bar i:nth-child(1) { background: var(--ifu-gray-300); }
.ifu-hero__window-bar i:nth-child(2) { background: var(--ifu-gray-300); }
.ifu-hero__window-bar i:nth-child(3) { background: var(--ifu-green-300); }
.ifu-hero__window-body { padding: var(--ifu-space-4); }
/* 汇总行：大数字突出设备规模，第一眼抓住注意力 */
.ifu-hero__summary {
  display: flex;
  align-items: baseline;
  gap: var(--ifu-space-2);
  padding: 0 var(--ifu-space-3) var(--ifu-space-3);
}
.ifu-hero__summary-num {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: var(--ifu-green-600);
  font-variant-numeric: tabular-nums;
}
.ifu-hero__summary-text { font-size: 13px; color: var(--ifu-gray-600); }
/* 设备行：指示灯 + 名称 + 数量，数量加粗强调 */
.ifu-hero__device {
  display: flex;
  align-items: center;
  gap: var(--ifu-space-2);
  padding: var(--ifu-space-2) var(--ifu-space-3);
  border-radius: var(--ifu-radius-sm);
  margin-bottom: var(--ifu-space-2);
  background: var(--ifu-elevation-1);
  font-size: 13px;
  color: var(--ifu-gray-700);
}
.ifu-hero__device-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ifu-hero__device-count {
  font-weight: 700;
  color: var(--ifu-gray-900);
  font-variant-numeric: tabular-nums;
}
/* 状态指示灯：绿点呼吸（在线）/ 黄点闪烁（更新中） */
.ifu-hero__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ifu-hero__dot.ok { background: var(--ifu-green-500); animation: ifu-pulse 2.4s ease-in-out infinite; }
.ifu-hero__dot.warn { background: var(--ifu-warning); animation: ifu-pulse 1.4s ease-in-out infinite; }
/* 更新进度条：滑块来回走动，模拟"更新中"的动态感 */
.ifu-hero__device-bar {
  position: relative;
  width: 64px;
  height: 6px;
  border-radius: var(--ifu-radius-full);
  background: var(--ifu-gray-300);
  overflow: hidden;
  flex: none;
}
.ifu-hero__device-bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: var(--ifu-radius-full);
  background: var(--ifu-warning);
  animation: ifu-progress 2s ease-in-out infinite alternate;
}
/* 系统状态栏：终端命令风格，贴合"本地协议服务"调性 */
.ifu-hero__sys {
  margin-top: var(--ifu-space-2);
  padding: var(--ifu-space-2) var(--ifu-space-3) 0;
  border-top: 1px dashed var(--ifu-border-subtle);
  font-size: 12px;
  color: var(--ifu-gray-500);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ifu-hero__sys-row {
  display: flex;
  align-items: center;
  gap: var(--ifu-space-2);
  padding: 2px 0;
}
.ifu-hero__sys-row .ok { color: var(--ifu-success); font-weight: 600; margin-left: auto; }
.ifu-hero__prompt { color: var(--ifu-green-600); font-weight: 700; }
/* 指示灯呼吸动画 */
@keyframes ifu-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.8); }
}
/* 更新进度条走动动画 */
@keyframes ifu-progress {
  0% { left: 4%; width: 30%; }
  100% { left: 58%; width: 38%; }
}
.ifu-hero__float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--ifu-space-2);
  padding: var(--ifu-space-2) var(--ifu-space-4);
  background: var(--ifu-elevation-2);
  border: 1px solid var(--ifu-border-subtle);
  border-radius: var(--ifu-radius-full);
  box-shadow: var(--ifu-shadow-md);
  font-size: 13px;
  color: var(--ifu-gray-900);
  animation: ifu-float 5s ease-in-out infinite;
}
.ifu-hero__float--1 { top: -18px; right: 12px; }
.ifu-hero__float--2 { bottom: -16px; left: -8px; animation-delay: 2.5s; }
@keyframes ifu-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ============================================================
   首页 · 产品矩阵
   ============================================================ */
.ifu-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ifu-space-6);
}
.ifu-product-card {
  position: relative;
  display: block;
  background: var(--ifu-card-bg);
  border: 1px solid var(--ifu-border-subtle);
  border-radius: var(--ifu-radius-lg);
  box-shadow: var(--ifu-shadow-sm);
  padding: var(--ifu-space-6);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ifu-product-card:hover {
  transform: translateY(var(--ifu-translate-y));
  box-shadow: var(--ifu-shadow-md);
  border-color: var(--ifu-green-300);
  text-decoration: none;
}
.ifu-product-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--ifu-space-4);
}
.ifu-product-card__icon {
  width: 64px; height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ifu-radius-lg);
  background: var(--ifu-green-100);
  color: var(--ifu-green-600);
  flex-shrink: 0;
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.ifu-product-card:hover .ifu-product-card__icon { transform: translateY(-3px) scale(1.06); }
.ifu-product-card__icon svg { width: 32px; height: 32px; }
.ifu-product-card h3 {
  font-size: var(--ifu-text-h4);
  color: var(--ifu-gray-900);
  margin-bottom: var(--ifu-space-1);
}
.ifu-product-card__tagline { font-size: 13px; color: var(--ifu-gray-500); margin-bottom: var(--ifu-space-4); }
.ifu-product-card__scenes { display: grid; gap: var(--ifu-space-2); margin-bottom: var(--ifu-space-4); }
.ifu-product-card__scene {
  display: flex;
  align-items: baseline;
  gap: var(--ifu-space-2);
  font-size: var(--ifu-text-body-sm);
  color: var(--ifu-gray-700);
}
.ifu-product-card__scene .label {
  flex-shrink: 0;
  font-size: var(--ifu-text-caption);
  color: var(--ifu-green-600);
  font-weight: 500;
}
.ifu-product-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ifu-space-2);
  padding-top: var(--ifu-space-3);
  border-top: 1px dashed var(--ifu-cream-200);
  font-size: 13px;
  color: var(--ifu-gray-500);
}
.ifu-product-card__meta .arrow { color: var(--ifu-green-500); transition: transform 0.2s ease; }
.ifu-product-card:hover .arrow { transform: translateX(4px); }

/* 更多产品占位卡（通栏 · 产品数量超过网格首屏时展示） */
.ifu-more-card {
  grid-column: 1 / -1;  /* 通栏，避免出现孤卡 */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--ifu-space-3);
  min-height: 96px;
  background: var(--ifu-card-bg);
  border: 2px dashed var(--ifu-cream-200);
  border-radius: var(--ifu-radius-lg);
  color: var(--ifu-gray-500);
  transition: all 0.25s ease;
}
.ifu-more-card:hover {
  border-color: var(--ifu-green-500);
  color: var(--ifu-green-600);
  box-shadow: var(--ifu-shadow-md);
  transform: translateY(var(--ifu-translate-y));
  text-decoration: none;
}
.ifu-more-card .icon { font-size: 22px; }
.ifu-more-card strong { font-size: 15px; }
.ifu-more-card span:last-child { font-size: var(--ifu-text-body-sm); }

/* 免费/收费标识小条 */
.ifu-price-strip {
  display: inline-flex;
  align-items: center;
  gap: var(--ifu-space-2);
  padding: var(--ifu-space-2) var(--ifu-space-4);
  background: var(--ifu-green-100);
  border: 1px solid var(--ifu-green-200);
  border-radius: var(--ifu-radius-full);
  font-size: 13px;
  color: var(--ifu-green-700);
  margin-bottom: var(--ifu-space-8);
}
.ifu-price-strip b { font-weight: 700; }

/* ============================================================
   首页 · 场景组合
   ============================================================ */
.ifu-scene-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ifu-space-6);
}
.ifu-scene-card {
  background: var(--ifu-card-bg);
  border: 1px solid var(--ifu-border-subtle);
  border-radius: var(--ifu-radius-lg);
  box-shadow: var(--ifu-shadow-sm);
  padding: var(--ifu-space-6);
  transition: all 0.25s ease;
}
.ifu-scene-card:hover { box-shadow: var(--ifu-shadow-md); transform: translateY(var(--ifu-translate-y)); }
.ifu-scene-card__icon {
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ifu-radius-md);
  background: var(--ifu-green-100);
  color: var(--ifu-green-600);
  margin-bottom: var(--ifu-space-4);
}
.ifu-scene-card h3 { font-size: var(--ifu-text-h4); margin-bottom: var(--ifu-space-2); }
.ifu-scene-card p { font-size: var(--ifu-text-body-sm); color: var(--ifu-gray-500); margin-bottom: var(--ifu-space-4); }
.ifu-scene-card__products { display: flex; flex-wrap: wrap; gap: var(--ifu-space-2); margin-bottom: var(--ifu-space-4); }
.ifu-scene-card__products .dot {
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ifu-green-100);
  color: var(--ifu-green-600);
  font-size: 10px;
  font-weight: 700;
}
.ifu-scene-card__link { font-size: var(--ifu-text-body-sm); color: var(--ifu-green-600); font-weight: 500; }
.ifu-scene-card__link:hover { color: var(--ifu-green-500); }

/* 高亮场景（中控生态） */
.ifu-scene-card--highlight {
  background: var(--ifu-green-500);
  border-color: var(--ifu-green-500);
  color: #fff;
  box-shadow: var(--ifu-shadow-lg);
}
.ifu-scene-card--highlight h3 { color: #fff; }
.ifu-scene-card--highlight p { color: rgba(255, 255, 255, 0.85); }
.ifu-scene-card--highlight .ifu-scene-card__icon { background: rgba(255, 255, 255, 0.2); color: #fff; }
.ifu-scene-card--highlight .ifu-scene-card__products .dot { background: rgba(255, 255, 255, 0.25); color: #fff; }
.ifu-scene-card--highlight .ifu-scene-card__link { color: #fff; }
.ifu-scene-card--highlight:hover { box-shadow: var(--ifu-shadow-xl); transform: translateY(var(--ifu-translate-y)); }

/* ============================================================
   首页 · 开箱即用 / 创始人（左右分栏）
   ============================================================ */
.ifu-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ifu-space-16);
  align-items: center;
}
.ifu-split h2 { font-size: var(--ifu-text-h2); margin-bottom: var(--ifu-space-4); }
.ifu-split p { color: var(--ifu-gray-500); }
.ifu-split__media {
  border-radius: var(--ifu-radius-lg);
  overflow: hidden;
  box-shadow: var(--ifu-shadow-md);
  background: var(--ifu-elevation-1);
  border: 1px solid var(--ifu-border-subtle);
}
.ifu-split__avatar {
  width: 320px; max-width: 100%;
  aspect-ratio: 1;
  border-radius: var(--ifu-radius-xl);
  overflow: hidden;
  background: var(--ifu-green-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ifu-green-600);
  box-shadow: var(--ifu-shadow-md);
  border: 1px solid var(--ifu-border-subtle);
}
/* 头像内联品牌图标：覆盖源文件固定宽高，文字使用鸿蒙字体（品牌规范 2.2） */
.ifu-split__avatar svg { width: 120px; height: 120px; }
.ifu-split__avatar svg .sl-text { font-family: var(--ifu-font-cn); }

/* ============================================================
   首页 · 为什么选择 ifu
   ============================================================ */
.ifu-reason-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ifu-space-6);
}
.ifu-reason-card { text-align: center; padding: var(--ifu-space-6) var(--ifu-space-4); }
.ifu-reason-card__icon {
  width: 48px; height: 48px;
  margin: 0 auto var(--ifu-space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ifu-radius-md);
  background: var(--ifu-green-100);
  color: var(--ifu-green-600);
}
.ifu-reason-card h3 { font-size: var(--ifu-text-h4); margin-bottom: var(--ifu-space-2); }
.ifu-reason-card p { font-size: var(--ifu-text-body-sm); color: var(--ifu-gray-500); }

/* ============================================================
   首页 · 最终 CTA（深绿底反白）
   ============================================================ */
.ifu-final-cta {
  background: var(--ifu-green-700);
  color: #fff;
  padding: var(--ifu-space-24) 0;
  text-align: center;
}
.ifu-final-cta h2 { color: #fff; font-size: var(--ifu-text-h1); margin-bottom: var(--ifu-space-3); }
.ifu-final-cta .sub { color: rgba(255, 255, 255, 0.85); margin-bottom: var(--ifu-space-12); }
.ifu-final-cta__links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ifu-space-4);
  max-width: 960px;
  margin: 0 auto var(--ifu-space-12);
}
.ifu-final-cta__link {
  background: var(--ifu-card-bg);
  color: var(--ifu-gray-900);
  border-radius: var(--ifu-radius-md);
  padding: var(--ifu-space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ifu-space-2);
  font-weight: 500;
  box-shadow: var(--ifu-shadow-sm);
  transition: all 0.25s ease;
}
.ifu-final-cta__link:hover { box-shadow: var(--ifu-shadow-lg); transform: translateY(var(--ifu-translate-y)); text-decoration: none; color: var(--ifu-green-600); }
.ifu-final-cta__link .icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--ifu-radius-md);
  background: var(--ifu-green-100);
  color: var(--ifu-green-600);
}
.ifu-final-cta__ctas { display: flex; gap: var(--ifu-space-4); justify-content: center; flex-wrap: wrap; }

/* ============================================================
   产品中心 /products/
   ============================================================ */
.ifu-page-hero {
  padding: var(--ifu-space-16) 0 var(--ifu-space-8);
  text-align: center;
  background: var(--ifu-bg-canvas);
}
.ifu-page-hero h1 { font-size: var(--ifu-text-h1); margin-bottom: var(--ifu-space-2); }
.ifu-page-hero p { color: var(--ifu-gray-500); max-width: 640px; margin: 0 auto; }

.ifu-filter-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--ifu-space-2);
  margin: var(--ifu-space-8) 0;
}
.ifu-filter-group {
  display: flex;
  align-items: center;
  gap: var(--ifu-space-1);
  padding: 4px;
  background: var(--ifu-card-bg);
  border: 1px solid var(--ifu-border-subtle);
  border-radius: var(--ifu-radius-full);
  box-shadow: var(--ifu-shadow-sm);
}
.ifu-filter-btn {
  padding: var(--ifu-space-1) var(--ifu-space-3);
  border: none;
  border-radius: var(--ifu-radius-full);
  background: transparent;
  color: var(--ifu-gray-600);
  font-size: 13px;
  font-family: var(--ifu-font-cn);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.ifu-filter-btn:hover { color: var(--ifu-green-600); }
.ifu-filter-btn.is-active {
  background: var(--ifu-green-500);
  color: #fff;
  font-weight: 600;
}

/* 置顶小卡片（品牌叙事） */
.ifu-topnote {
  max-width: 720px;
  margin: 0 auto var(--ifu-space-12);
  padding: var(--ifu-space-4) var(--ifu-space-6);
  background: var(--ifu-card-bg);
  border: 1px solid var(--ifu-border-subtle);
  border-left: 4px solid var(--ifu-green-500);
  border-radius: var(--ifu-radius-md);
  box-shadow: var(--ifu-shadow-sm);
  color: var(--ifu-gray-700);
  font-size: var(--ifu-text-body-sm);
}
.ifu-topnote b { color: var(--ifu-gray-900); }

/* ============================================================
   产品详情页（11 个板块）
   ============================================================ */
.product-hero {
  padding: var(--ifu-space-16) 0;
  background: var(--ifu-bg-canvas);
  border-bottom: 1px solid var(--ifu-border-subtle);
}
.product-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ifu-space-16);
  align-items: center;
}
.product-hero__tags { display: flex; gap: var(--ifu-space-2); margin-bottom: var(--ifu-space-4); flex-wrap: wrap; }
.product-hero h1 { font-size: var(--ifu-text-h1); margin-bottom: var(--ifu-space-2); }
.product-hero__tagline { font-size: var(--ifu-text-h4); color: var(--ifu-gray-500); margin-bottom: var(--ifu-space-6); }
.product-hero__platforms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ifu-space-2);
  margin-bottom: var(--ifu-space-8);
}
.product-hero__platform {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--ifu-space-1) var(--ifu-space-3);
  background: var(--ifu-card-bg);
  border: 1px solid var(--ifu-border-subtle);
  border-radius: var(--ifu-radius-full);
  font-size: 13px;
  color: var(--ifu-gray-700);
}
.product-hero__cta { display: flex; gap: var(--ifu-space-4); flex-wrap: wrap; align-items: center; }
.product-hero__price { font-size: var(--ifu-text-body-sm); color: var(--ifu-gray-500); margin-top: var(--ifu-space-3); }
.product-hero__price b { color: var(--ifu-green-600); font-size: var(--ifu-text-h3); }

/* 产品详情页 · CTA 吸附栏（PRD 6.3.3.3：滚动超过 600px 后显示，吸附在头部下方） */
.ifu-sticky-cta {
  position: fixed;
  top: var(--ifu-header-height);
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--ifu-header-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--ifu-border-subtle);
  box-shadow: var(--ifu-shadow-md);
  transform: translateY(-120%);
  transition: transform 0.3s ease;
  pointer-events: none;
}
.ifu-sticky-cta.is-visible { transform: translateY(0); pointer-events: auto; }
.ifu-sticky-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ifu-space-4);
  height: var(--ifu-header-height);
}
.ifu-sticky-cta__title { font-weight: 600; color: var(--ifu-gray-900); white-space: nowrap; }
.ifu-sticky-cta__title:hover { color: var(--ifu-green-600); text-decoration: none; }
/* 二级导航：板块锚点快速跳转（ScrollSpy 高亮当前项） */
.ifu-sticky-cta__nav {
  display: flex;
  align-items: center;
  gap: var(--ifu-space-1);
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.ifu-sticky-cta__nav::-webkit-scrollbar { display: none; }
.ifu-sticky-cta__nav a {
  padding: var(--ifu-space-1) var(--ifu-space-3);
  border-radius: var(--ifu-radius-full);
  font-size: 13px;
  color: var(--ifu-gray-500);
  white-space: nowrap;
  transition: all 0.2s ease;
}
.ifu-sticky-cta__nav a:hover { color: var(--ifu-green-600); background: var(--ifu-green-100); text-decoration: none; }
.ifu-sticky-cta__nav a.is-active { color: var(--ifu-green-700); background: var(--ifu-green-100); font-weight: 600; }
html[data-theme="dark"] .ifu-sticky-cta__nav a.is-active { color: var(--ifu-green-400); }
.ifu-sticky-cta__btn { padding: var(--ifu-space-2) var(--ifu-space-4); font-size: 14px; white-space: nowrap; }

/* 产品详情页通用分区 */
.ifu-detail-section { padding: var(--ifu-space-20) 0; }

/* 核心卖点 */
.ifu-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ifu-space-6);
}
.ifu-feature-card {
  background: var(--ifu-card-bg);
  border: 1px solid var(--ifu-border-subtle);
  border-radius: var(--ifu-radius-lg);
  padding: var(--ifu-space-6);
  box-shadow: var(--ifu-shadow-sm);
  transition: all 0.25s ease;
}
.ifu-feature-card:hover { box-shadow: var(--ifu-shadow-md); transform: translateY(var(--ifu-translate-y)); }
.ifu-feature-card__icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--ifu-radius-md);
  background: var(--ifu-green-100);
  color: var(--ifu-green-600);
  margin-bottom: var(--ifu-space-4);
}
.ifu-feature-card h3 { font-size: var(--ifu-text-h4); margin-bottom: var(--ifu-space-2); overflow-wrap: break-word; word-break: break-word; }
.ifu-feature-card p { font-size: var(--ifu-text-body-sm); color: var(--ifu-gray-500); margin: 0; }

/* 场景双卡片（通用 / 中控） */
.ifu-dual-scene {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ifu-space-6);
}
.ifu-dual-scene__card {
  padding: var(--ifu-space-8);
  border-radius: var(--ifu-radius-lg);
  border: 1px solid var(--ifu-border-subtle);
}
.ifu-dual-scene__card--universal { background: var(--ifu-card-bg); box-shadow: var(--ifu-shadow-sm); }
.ifu-dual-scene__card--control {
  background: var(--ifu-green-500);
  color: #fff;
  box-shadow: var(--ifu-shadow-lg);
}
.ifu-dual-scene__card--control h3 { color: #fff; }
.ifu-dual-scene__card--control p { color: rgba(255, 255, 255, 0.9); }
.ifu-dual-scene__label {
  display: inline-block;
  font-size: var(--ifu-text-caption);
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: var(--ifu-space-3);
  padding: 2px var(--ifu-space-2);
  border-radius: var(--ifu-radius-sm);
}
.ifu-dual-scene__card--universal .ifu-dual-scene__label { background: var(--ifu-green-100); color: var(--ifu-green-700); }
.ifu-dual-scene__card--control .ifu-dual-scene__label { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* 下载 / 购买 */
.ifu-download-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ifu-space-4);
}
.ifu-download-card {
  display: flex;
  align-items: center;
  gap: var(--ifu-space-3);
  padding: var(--ifu-space-4);
  background: var(--ifu-card-bg);
  border: 1px solid var(--ifu-border-subtle);
  border-radius: var(--ifu-radius-md);
  box-shadow: var(--ifu-shadow-sm);
  transition: all 0.2s ease;
}
.ifu-download-card:hover { box-shadow: var(--ifu-shadow-md); border-color: var(--ifu-green-300); text-decoration: none; }
.ifu-download-card__icon {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--ifu-radius-md);
  background: var(--ifu-green-100);
  color: var(--ifu-green-600);
}
.ifu-download-card h4 { font-size: 15px; margin: 0; color: var(--ifu-gray-900); }
.ifu-download-card small { color: var(--ifu-gray-500); font-size: 12px; }

/* 购买面板（收费产品） */
.ifu-purchase-panel {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--ifu-space-8);
  align-items: center;
  background: var(--ifu-elevation-1);
  border: 1px solid var(--ifu-border-subtle);
  border-radius: var(--ifu-radius-xl);
  padding: var(--ifu-space-12);
  box-shadow: var(--ifu-shadow-md);
}
.ifu-purchase-panel__price { font-size: var(--ifu-text-h1); font-weight: 700; color: var(--ifu-gray-900); margin-bottom: var(--ifu-space-2); }
.ifu-purchase-panel__price small { font-size: 15px; font-weight: 400; color: var(--ifu-gray-500); }
.ifu-purchase-panel .promise {
  display: flex;
  align-items: center;
  gap: var(--ifu-space-2);
  font-size: var(--ifu-text-caption);
  color: var(--ifu-gray-500);
  margin-bottom: var(--ifu-space-4);
}
.ifu-purchase-panel .promise::before {
  content: "✓";
  color: var(--ifu-success);
  font-weight: 700;
}
.ifu-purchase-panel ul { font-size: var(--ifu-text-body-sm); color: var(--ifu-gray-500); }

/* 快速开始步骤 */
.ifu-steps { display: grid; gap: var(--ifu-space-6); }
.ifu-step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--ifu-space-4);
  align-items: start;
}
.ifu-step__num {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ifu-green-500);
  color: #fff;
  font-size: var(--ifu-text-h4);
  font-weight: 700;
  box-shadow: var(--ifu-shadow-sm);
}
.ifu-step h3 { font-size: var(--ifu-text-h4); margin-bottom: var(--ifu-space-2); }
.ifu-step p { color: var(--ifu-gray-500); margin: 0; }

/* FAQ 折叠 */
.ifu-faq { max-width: 820px; margin: 0 auto; }
.ifu-faq-item {
  background: var(--ifu-card-bg);
  border: 1px solid var(--ifu-border-subtle);
  border-radius: var(--ifu-radius-md);
  margin-bottom: var(--ifu-space-3);
  overflow: hidden;
  box-shadow: var(--ifu-shadow-sm);
}
.ifu-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ifu-space-4);
  padding: var(--ifu-space-4) var(--ifu-space-6);
  cursor: pointer;
  font-weight: 500;
  color: var(--ifu-gray-900);
  list-style: none;
}
.ifu-faq-item summary::-webkit-details-marker { display: none; }
.ifu-faq-item summary::after {
  content: "+";
  font-size: 20px;
  color: var(--ifu-green-500);
  transition: transform 0.2s ease;
}
.ifu-faq-item[open] summary::after { transform: rotate(45deg); }
.ifu-faq-item__body {
  padding: 0 var(--ifu-space-6) var(--ifu-space-4);
  color: var(--ifu-gray-500);
  font-size: var(--ifu-text-body-sm);
  line-height: 1.8;
}

/* 更新日志（时间线倒序） */
.ifu-changelog {
  max-width: 720px;
  margin: 0 auto;
  border-left: 2px solid var(--ifu-green-200);
  padding-left: var(--ifu-space-8);
  display: grid;
  gap: var(--ifu-space-8);
}
.ifu-changelog__item { position: relative; }
.ifu-changelog__item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--ifu-space-8) - 5px);
  top: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ifu-green-500);
  box-shadow: 0 0 0 3px var(--ifu-green-100);
}
.ifu-changelog__version {
  font-size: var(--ifu-text-h4);
  color: var(--ifu-gray-900);
  font-weight: 600;
  margin-bottom: 2px;
}
.ifu-changelog__date { font-size: var(--ifu-text-caption); color: var(--ifu-gray-500); margin-bottom: var(--ifu-space-3); }
.ifu-changelog__item ul { font-size: var(--ifu-text-body-sm); color: var(--ifu-gray-500); margin: 0; }
.ifu-changelog__item li { margin-bottom: var(--ifu-space-1); }

/* 评论区（占位） */
.ifu-comments {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.ifu-comments__stub {
  padding: var(--ifu-space-12);
  border: 1px dashed var(--ifu-cream-200);
  border-radius: var(--ifu-radius-lg);
  color: var(--ifu-gray-500);
}
.ifu-comments__stub h3 { font-size: var(--ifu-text-h4); margin-bottom: var(--ifu-space-2); }
.ifu-comments__stub p { font-size: var(--ifu-text-body-sm); }

/* 相关产品 */
.ifu-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ifu-space-6);
}
.ifu-related-card {
  display: flex;
  align-items: center;
  gap: var(--ifu-space-4);
  padding: var(--ifu-space-4);
  background: var(--ifu-card-bg);
  border: 1px solid var(--ifu-border-subtle);
  border-radius: var(--ifu-radius-md);
  box-shadow: var(--ifu-shadow-sm);
  transition: all 0.2s ease;
}
.ifu-related-card:hover { box-shadow: var(--ifu-shadow-md); border-color: var(--ifu-green-300); text-decoration: none; transform: translateY(var(--ifu-translate-y)); }
.ifu-related-card__icon {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--ifu-radius-md);
  background: var(--ifu-green-100);
  color: var(--ifu-green-600);
}
.ifu-related-card h4 { font-size: 15px; margin: 0; color: var(--ifu-gray-900); }
.ifu-related-card small { color: var(--ifu-gray-500); }

/* ============================================================
   关于页 · 时间线
   ============================================================ */
.ifu-timeline {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--ifu-space-4);
  position: relative;
}
.ifu-timeline::before {
  content: "";
  position: absolute;
  top: 10px;
  left: var(--ifu-space-4);
  right: var(--ifu-space-4);
  height: 2px;
  background: var(--ifu-green-200);
}
.ifu-timeline__node {
  position: relative;
  text-align: center;
  padding-top: var(--ifu-space-8);
}
.ifu-timeline__dot {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ifu-green-500);
  border: 3px solid var(--ifu-bg-canvas);
  box-shadow: var(--ifu-shadow-sm);
}
.ifu-timeline__node.is-current .ifu-timeline__dot { box-shadow: var(--ifu-shadow-md), var(--ifu-shadow-glow); }
.ifu-timeline__year { font-size: var(--ifu-text-caption); color: var(--ifu-gray-500); font-weight: 600; margin-bottom: var(--ifu-space-2); }
.ifu-timeline__node h3 {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: var(--ifu-space-2);
  color: var(--ifu-gray-900);
}
.ifu-timeline__node p { font-size: 12px; line-height: 1.7; color: var(--ifu-gray-500); margin: 0; }
.ifu-timeline__products { display: flex; justify-content: center; gap: 4px; margin-top: var(--ifu-space-2); flex-wrap: wrap; }
.ifu-timeline__products .dot {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ifu-green-100);
  color: var(--ifu-green-600);
  font-size: 9px;
  font-weight: 700;
}

/* 品牌承诺 */
.ifu-commit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ifu-space-6);
}
.ifu-commit-card { text-align: center; padding: var(--ifu-space-8) var(--ifu-space-4); }
.ifu-commit-card__icon {
  width: 48px; height: 48px;
  margin: 0 auto var(--ifu-space-4);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--ifu-radius-md);
  background: var(--ifu-green-100);
  color: var(--ifu-green-600);
}
.ifu-commit-card h3 { font-size: var(--ifu-text-h4); margin-bottom: var(--ifu-space-2); }
.ifu-commit-card p { font-size: var(--ifu-text-body-sm); color: var(--ifu-gray-500); margin: 0; }

/* 邮箱订阅 */
.ifu-subscribe {
  background: var(--ifu-green-700);
  color: #fff;
  padding: var(--ifu-space-24) 0;
  text-align: center;
}
.ifu-subscribe h2 { color: #fff; font-size: var(--ifu-text-h1); margin-bottom: var(--ifu-space-2); }
.ifu-subscribe p { color: rgba(255, 255, 255, 0.85); margin-bottom: var(--ifu-space-8); }
.ifu-subscribe__form {
  display: flex;
  gap: var(--ifu-space-2);
  justify-content: center;
  flex-wrap: wrap;
  max-width: 520px;
  margin: 0 auto;
}
.ifu-subscribe__form input {
  flex: 1;
  min-width: 240px;
  padding: var(--ifu-space-3) var(--ifu-space-4);
  border: none;
  border-radius: var(--ifu-radius-md);
  font-size: var(--ifu-text-body);
  font-family: var(--ifu-font-cn);
  background: #fff;
  color: var(--ifu-gray-900);
}
.ifu-subscribe__form input:focus-visible { box-shadow: var(--ifu-shadow-focus); }

/* ============================================================
   定价页 / 购买页 / 打赏页
   ============================================================ */
.ifu-price-table { max-width: 860px; margin: 0 auto; }
.ifu-price-table table {
  width: 100%;
  border-collapse: collapse;
  background: var(--ifu-card-bg);
  border-radius: var(--ifu-radius-lg);
  overflow: hidden;
  box-shadow: var(--ifu-shadow-md);
  border: 1px solid var(--ifu-border-subtle);
}
.ifu-price-table th, .ifu-price-table td {
  padding: var(--ifu-space-4);
  text-align: left;
  border-bottom: 1px solid var(--ifu-cream-200);
  font-size: var(--ifu-text-body-sm);
  color: var(--ifu-gray-700);
}
.ifu-price-table th { background: var(--ifu-green-100); color: var(--ifu-green-800); font-weight: 600; }
.ifu-price-table tr:last-child td { border-bottom: none; }
.ifu-price-table .price { font-weight: 700; color: var(--ifu-gray-900); white-space: nowrap; }
.ifu-price-table .price--free { color: var(--ifu-success); }
.ifu-price-table .product-name { font-weight: 600; color: var(--ifu-gray-900); }

/* 购买流程步骤 */
.ifu-buy-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ifu-space-6);
  counter-reset: buystep;
}
.ifu-buy-step {
  position: relative;
  padding: var(--ifu-space-6);
  background: var(--ifu-card-bg);
  border: 1px solid var(--ifu-border-subtle);
  border-radius: var(--ifu-radius-lg);
  box-shadow: var(--ifu-shadow-sm);
}
.ifu-buy-step::before {
  counter-increment: buystep;
  content: counter(buystep);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ifu-green-500);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: var(--ifu-space-3);
}
.ifu-buy-step h3 { font-size: var(--ifu-text-h4); margin-bottom: var(--ifu-space-2); }
.ifu-buy-step p { font-size: var(--ifu-text-body-sm); color: var(--ifu-gray-500); margin: 0; }

/* 定价页说明列表 */
.ifu-note-list {
  max-width: 860px;
  margin: var(--ifu-space-8) auto 0;
  display: grid;
  gap: var(--ifu-space-2);
  font-size: var(--ifu-text-body-sm);
  color: var(--ifu-gray-500);
}
.ifu-note-list li {
  position: relative;
  padding-left: var(--ifu-space-6);
  line-height: 1.8;
}
.ifu-note-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ifu-success);
  font-weight: 700;
}

/* 关键说明条（购买页 / 打赏页） */
.ifu-note {
  max-width: 860px;
  margin: var(--ifu-space-8) auto 0;
  padding: var(--ifu-space-4) var(--ifu-space-6);
  border: 1px solid var(--ifu-border-subtle);
  border-left: 3px solid var(--ifu-green-500);
  border-radius: var(--ifu-radius-md);
  background: var(--ifu-card-bg);
  font-size: var(--ifu-text-body-sm);
  color: var(--ifu-gray-700);
  line-height: 1.8;
}

/* 打赏渠道卡片 */
.ifu-sponsor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ifu-space-6);
  max-width: 960px;
  margin: 0 auto;
}
.ifu-sponsor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ifu-space-2);
  padding: var(--ifu-space-8) var(--ifu-space-6);
  background: var(--ifu-card-bg);
  border: 1px solid var(--ifu-border-subtle);
  border-radius: var(--ifu-radius-lg);
  box-shadow: var(--ifu-shadow-sm);
  transition: all 0.25s ease;
}
.ifu-sponsor-card:hover {
  box-shadow: var(--ifu-shadow-md);
  border-color: var(--ifu-green-300);
  transform: translateY(var(--ifu-translate-y));
}
.ifu-sponsor-card__icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--ifu-radius-full);
  background: var(--ifu-green-100);
  color: var(--ifu-green-600);
  margin-bottom: var(--ifu-space-2);
}
.ifu-sponsor-card h3 { font-size: var(--ifu-text-h4); margin-bottom: var(--ifu-space-1); }
.ifu-sponsor-card p { font-size: var(--ifu-text-body-sm); color: var(--ifu-gray-500); margin: 0; }

/* 打赏用途（专款专用） */
.ifu-usage-list {
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  gap: var(--ifu-space-4);
}
.ifu-usage-item {
  display: grid;
  grid-template-columns: 64px 1fr 1fr;
  align-items: center;
  gap: var(--ifu-space-4);
}
.ifu-usage-item__percent {
  font-size: var(--ifu-text-h4);
  font-weight: 700;
  color: var(--ifu-green-600);
}
.ifu-usage-item__bar {
  height: 10px;
  border-radius: var(--ifu-radius-full);
  background: var(--ifu-green-100);
  overflow: hidden;
}
.ifu-usage-item__bar span {
  display: block;
  height: 100%;
  border-radius: var(--ifu-radius-full);
  background: linear-gradient(90deg, var(--ifu-green-400), var(--ifu-green-500));
}
.ifu-usage-item__label { font-size: var(--ifu-text-body-sm); color: var(--ifu-gray-700); }

/* 申请授权"三不"原则 */
.ifu-principles {
  max-width: 820px;
  margin: var(--ifu-space-8) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ifu-space-4);
}
.ifu-principle {
  padding: var(--ifu-space-4) var(--ifu-space-6);
  background: var(--ifu-card-bg);
  border: 1px solid var(--ifu-border-subtle);
  border-radius: var(--ifu-radius-md);
  box-shadow: var(--ifu-shadow-sm);
}
.ifu-principle b {
  display: block;
  color: var(--ifu-green-700);
  font-size: var(--ifu-text-body);
  margin-bottom: var(--ifu-space-1);
}
.ifu-principle span { font-size: var(--ifu-text-body-sm); color: var(--ifu-gray-500); }

/* ============================================================
   文摘 / 案例卡片
   ============================================================ */
.ifu-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ifu-space-6);
}
.ifu-card {
  display: block;
  background: var(--ifu-card-bg);
  border: 1px solid var(--ifu-border-subtle);
  border-radius: var(--ifu-radius-lg);
  overflow: hidden;
  box-shadow: var(--ifu-shadow-sm);
  transition: all 0.25s ease;
}
.ifu-card:hover {
  box-shadow: var(--ifu-shadow-md);
  transform: translateY(var(--ifu-translate-y));
  text-decoration: none;
}
.ifu-card__cover {
  aspect-ratio: 16 / 9;
  background: var(--ifu-green-100);
  color: var(--ifu-green-600);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ifu-card__cover svg { width: 48px; height: 48px; opacity: 0.7; }
.ifu-card__body { padding: var(--ifu-space-4) var(--ifu-space-6) var(--ifu-space-6); }
.ifu-card__meta {
  display: flex;
  align-items: center;
  gap: var(--ifu-space-3);
  font-size: var(--ifu-text-caption);
  color: var(--ifu-gray-500);
  margin-bottom: var(--ifu-space-3);
  flex-wrap: wrap;
}
.ifu-card h3 {
  font-size: var(--ifu-text-h5);
  color: var(--ifu-gray-900);
  margin-bottom: var(--ifu-space-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ifu-card p {
  font-size: var(--ifu-text-body-sm);
  color: var(--ifu-gray-500);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ifu-card__products { display: flex; gap: var(--ifu-space-1); margin-top: var(--ifu-space-3); }
.ifu-card__products .dot {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ifu-green-100);
  color: var(--ifu-green-600);
  font-size: 9px;
  font-weight: 700;
}

/* 文摘中心 */
.ifu-article-search {
  position: relative;
  max-width: 480px;
  margin: var(--ifu-space-8) auto 0;
}
.ifu-article-search svg {
  position: absolute;
  left: var(--ifu-space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--ifu-gray-500);
}
.ifu-article-search input {
  width: 100%;
  padding: var(--ifu-space-3) var(--ifu-space-4) var(--ifu-space-3) 46px;
  border: 1px solid var(--ifu-border-subtle);
  border-radius: var(--ifu-radius-full);
  background: var(--ifu-card-bg);
  font-size: var(--ifu-text-body);
  color: var(--ifu-gray-900);
  box-shadow: var(--ifu-shadow-sm);
  outline: none;
}
.ifu-article-search input:focus { box-shadow: var(--ifu-shadow-focus); }

.ifu-tag-filter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--ifu-space-2);
  margin-top: var(--ifu-space-8);
}
.ifu-tag-filter button {
  padding: var(--ifu-space-2) var(--ifu-space-4);
  border: 1px solid var(--ifu-border-subtle);
  border-radius: var(--ifu-radius-full);
  background: var(--ifu-card-bg);
  color: var(--ifu-gray-700);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ifu-tag-filter button:hover { box-shadow: var(--ifu-shadow-sm); border-color: var(--ifu-green-300); }
.ifu-tag-filter button.is-active { background: var(--ifu-green-500); border-color: var(--ifu-green-500); color: #fff; }

.ifu-layout-sidebar {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--ifu-space-12);
  align-items: start;
}
.ifu-aside-card {
  background: var(--ifu-card-bg);
  border: 1px solid var(--ifu-border-subtle);
  border-radius: var(--ifu-radius-lg);
  box-shadow: var(--ifu-shadow-sm);
  padding: var(--ifu-space-6);
  margin-bottom: var(--ifu-space-6);
}
.ifu-aside-card h4 {
  font-size: var(--ifu-text-h4);
  color: var(--ifu-gray-900);
  margin-bottom: var(--ifu-space-4);
  padding-left: var(--ifu-space-3);
  border-left: 4px solid var(--ifu-green-500);
}
.ifu-aside-card p { font-size: var(--ifu-text-body-sm); color: var(--ifu-gray-500); margin-bottom: var(--ifu-space-4); }
.ifu-hot-item {
  display: flex;
  align-items: baseline;
  gap: var(--ifu-space-3);
  padding: var(--ifu-space-2) 0;
  border-bottom: 1px dashed var(--ifu-cream-200);
}
.ifu-hot-item:last-child { border-bottom: none; }
.ifu-hot-item:hover { text-decoration: none; }
.ifu-hot-item__num {
  flex-shrink: 0;
  font-size: var(--ifu-text-caption);
  font-weight: 700;
  color: var(--ifu-green-600);
  width: 34px;
}
.ifu-hot-item__title {
  font-size: 13px;
  color: var(--ifu-gray-700);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ifu-hot-item:hover .ifu-hot-item__title { color: var(--ifu-green-600); }
.ifu-tag-cloud { display: flex; flex-wrap: wrap; gap: var(--ifu-space-2); }

.ifu-article-head { text-align: center; }
.ifu-article-head__cover {
  width: 100%;
  max-width: 860px;
  margin: var(--ifu-space-8) auto 0;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--ifu-radius-lg);
  box-shadow: var(--ifu-shadow-md);
}
.ifu-article-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: var(--ifu-space-12);
  align-items: start;
}
.ifu-toc { position: sticky; top: calc(var(--ifu-header-height, 64px) + var(--ifu-space-4)); }
.ifu-toc nav { font-size: 13px; }
.ifu-toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--ifu-space-2); }
.ifu-toc ul ul { padding-left: var(--ifu-space-4); margin-top: var(--ifu-space-2); }
.ifu-toc a {
  display: block;
  color: var(--ifu-gray-500);
  padding: var(--ifu-space-1) var(--ifu-space-2);
  border-radius: var(--ifu-radius-sm);
  border-left: 2px solid transparent;
  line-height: 1.6;
}
.ifu-toc a:hover { color: var(--ifu-green-600); text-decoration: none; }
.ifu-toc a.is-active { color: var(--ifu-green-600); border-left-color: var(--ifu-green-500); background: var(--ifu-green-100); }

/* ============================================================
   正文排版（Markdown 渲染 · 最大宽度 720px）
   ============================================================ */
.ifu-prose {
  max-width: 720px;
  margin: 0 auto;
  font-size: var(--ifu-text-body);
  line-height: var(--ifu-leading-body);
  color: var(--ifu-gray-700);
}
.ifu-prose h2 {
  font-size: var(--ifu-text-h2);
  margin-top: var(--ifu-space-12);
  padding-left: var(--ifu-space-3);
  border-left: 4px solid var(--ifu-green-500);
}
.ifu-prose h3 { font-size: var(--ifu-text-h3); margin-top: var(--ifu-space-8); }
.ifu-prose p { margin-bottom: var(--ifu-space-4); }
.ifu-prose blockquote {
  margin: var(--ifu-space-6) 0;
  padding: var(--ifu-space-4) var(--ifu-space-6);
  background: var(--ifu-green-100);
  border-left: 4px solid var(--ifu-green-500);
  border-radius: 0 var(--ifu-radius-md) var(--ifu-radius-md) 0;
  color: var(--ifu-gray-700);
}
.ifu-prose blockquote p { margin: 0; }
.ifu-prose code {
  padding: 2px 6px;
  background: var(--ifu-cream-100);
  border-radius: var(--ifu-radius-sm);
  font-size: 14px;
}
.ifu-prose pre {
  padding: var(--ifu-space-4);
  background: var(--ifu-elevation-1);
  border: 1px solid var(--ifu-border-subtle);
  border-radius: var(--ifu-radius-md);
  overflow-x: auto;
}
.ifu-prose pre code { background: none; padding: 0; }
.ifu-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--ifu-space-6) 0;
  font-size: var(--ifu-text-body-sm);
}
.ifu-prose th, .ifu-prose td {
  padding: var(--ifu-space-2) var(--ifu-space-3);
  border: 1px solid var(--ifu-cream-200);
}
.ifu-prose th { background: var(--ifu-green-100); font-weight: 600; }
.ifu-prose li { margin-bottom: var(--ifu-space-1); }
.ifu-prose img { border-radius: var(--ifu-radius-md); box-shadow: var(--ifu-shadow-md); margin: var(--ifu-space-6) auto; }
.ifu-prose strong { color: var(--ifu-gray-900); }

/* ============================================================
   品牌资源页
   ============================================================ */
.ifu-resource-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ifu-space-6);
}
.ifu-resource-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ifu-space-4);
  text-align: center;
  padding: var(--ifu-space-8);
  background: var(--ifu-card-bg);
  border: 1px solid var(--ifu-border-subtle);
  border-radius: var(--ifu-radius-lg);
  box-shadow: var(--ifu-shadow-sm);
  transition: all 0.25s ease;
}
.ifu-resource-card:hover { box-shadow: var(--ifu-shadow-md); transform: translateY(var(--ifu-translate-y)); text-decoration: none; }
.ifu-resource-card__preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ifu-cream-50);
  border: 1px solid var(--ifu-border-subtle);
  border-radius: var(--ifu-radius-md);
  color: var(--ifu-gray-400);
  font-size: var(--ifu-text-caption);
  overflow: hidden;
}
.ifu-resource-card__preview svg { height: 100%; width: auto; max-width: 100%; }
.ifu-resource-card h3 { font-size: var(--ifu-text-h4); margin: 0; }
.ifu-resource-card p { font-size: var(--ifu-text-body-sm); color: var(--ifu-gray-500); margin: 0; }

/* 色卡 */
.ifu-swatch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ifu-space-4); }
.ifu-swatch {
  border-radius: var(--ifu-radius-md);
  overflow: hidden;
  border: 1px solid var(--ifu-border-subtle);
  box-shadow: var(--ifu-shadow-sm);
}
.ifu-swatch__color { height: 64px; background: var(--ifu-green-100); }
.ifu-swatch__meta { padding: var(--ifu-space-2) var(--ifu-space-3); background: var(--ifu-card-bg); }
.ifu-swatch__meta b { display: block; font-size: 13px; color: var(--ifu-gray-900); }
.ifu-swatch__meta span { font-size: 11px; color: var(--ifu-gray-500); font-family: monospace; }
.ifu-swatch__meta small { display: block; font-size: 11px; color: var(--ifu-gray-500); margin-top: 2px; }

/* 品牌资源页 */
.ifu-brand-deco { display: flex; justify-content: center; gap: var(--ifu-space-2); margin-top: var(--ifu-space-8); flex-wrap: wrap; }
.ifu-brand-deco .dot {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ifu-green-100);
  color: var(--ifu-green-700);
  font-size: 12px;
  font-weight: 600;
  transition: all 0.2s ease;
}
.ifu-brand-deco .dot:hover { background: var(--ifu-green-500); color: #fff; transform: translateY(-3px); }

.ifu-brand-logo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ifu-space-6); }
.ifu-brand-logo-card {
  background: var(--ifu-card-bg);
  border: 1px solid var(--ifu-border-subtle);
  border-radius: var(--ifu-radius-lg);
  box-shadow: var(--ifu-shadow-sm);
  padding: var(--ifu-space-6);
  transition: all 0.25s ease;
}
.ifu-brand-logo-card:hover { box-shadow: var(--ifu-shadow-md); border-color: var(--ifu-green-300); transform: translateY(var(--ifu-translate-y)); }
.ifu-brand-logo-card__preview {
  height: 140px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ifu-cream-100);
  border-radius: var(--ifu-radius-md);
  margin-bottom: var(--ifu-space-4);
  overflow: hidden;
}
/* 内联官方 SVG 预览：覆盖源文件固定宽高，按比例缩放居中 */
.ifu-brand-logo-card__preview svg { height: auto; max-height: 110px; max-width: 100%; width: auto; }
.ifu-brand-logo-card__preview--mark svg { max-height: 72px; }
.ifu-brand-logo-card h3 { font-size: var(--ifu-text-h4); margin-bottom: var(--ifu-space-1); }
.ifu-brand-logo-card > p { font-size: var(--ifu-text-body-sm); color: var(--ifu-gray-500); margin-bottom: var(--ifu-space-4); }
.ifu-brand-logo-card__formats { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--ifu-space-1); }
.ifu-brand-logo-card__formats li {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--ifu-gray-500);
  padding: var(--ifu-space-1) 0;
  border-bottom: 1px dashed var(--ifu-cream-200);
}
.ifu-brand-logo-card__formats li:last-child { border-bottom: none; }
.ifu-brand-logo-card__formats a { color: var(--ifu-green-600); font-weight: 500; }
.ifu-brand-logo-card__formats a:hover { text-decoration: underline; }
.ifu-brand-logo-card__formats .soon { color: var(--ifu-gray-500); }

.ifu-brand-color-title {
  font-size: var(--ifu-text-h4);
  color: var(--ifu-gray-700);
  margin: var(--ifu-space-8) 0 var(--ifu-space-3);
}

/* 字体规范 */
.ifu-type-card {
  max-width: 860px;
  margin: 0 auto var(--ifu-space-6);
  padding: var(--ifu-space-6);
  background: var(--ifu-card-bg);
  border: 1px solid var(--ifu-border-subtle);
  border-radius: var(--ifu-radius-lg);
  box-shadow: var(--ifu-shadow-sm);
}
.ifu-type-card > b { color: var(--ifu-gray-700); }
.ifu-type-card code {
  display: block;
  font-size: 12px;
  color: var(--ifu-gray-500);
  background: var(--ifu-cream-100);
  padding: var(--ifu-space-2) var(--ifu-space-3);
  border-radius: var(--ifu-radius-sm);
  overflow-x: auto;
}
.ifu-type-sizes { display: grid; gap: var(--ifu-space-3); margin-top: var(--ifu-space-4); }
.ifu-type-size {
  display: grid;
  grid-template-columns: 90px 70px 1fr 140px;
  align-items: baseline;
  gap: var(--ifu-space-4);
  border-bottom: 1px dashed var(--ifu-cream-200);
  padding-bottom: var(--ifu-space-3);
}
.ifu-type-size__name { font-size: 13px; font-weight: 600; color: var(--ifu-gray-900); }
.ifu-type-size__px { font-size: 12px; color: var(--ifu-gray-500); font-family: monospace; }
.ifu-type-size__demo { font-size: 16px; color: var(--ifu-gray-900); white-space: nowrap; }
.ifu-type-size__usage { font-size: 12px; color: var(--ifu-gray-500); }
.ifu-type-weights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ifu-space-4);
  margin-top: var(--ifu-space-4);
}
.ifu-type-weight {
  text-align: center;
  padding: var(--ifu-space-4);
  background: var(--ifu-cream-100);
  border-radius: var(--ifu-radius-md);
}
.ifu-type-weight__demo { font-size: 40px; line-height: 1.2; color: var(--ifu-gray-900); display: block; font-weight: 400; }
.ifu-type-weight b { display: block; margin-top: var(--ifu-space-2); font-size: 13px; color: var(--ifu-gray-900); }
.ifu-type-weight span { font-size: 12px; color: var(--ifu-gray-500); font-family: monospace; }
.ifu-type-weight small { display: block; font-size: 12px; color: var(--ifu-gray-500); }

/* 素材对色规则 */
.ifu-pair-list { max-width: 960px; margin: 0 auto; display: grid; gap: var(--ifu-space-6); }
.ifu-pair-card {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--ifu-space-6);
  align-items: center;
  padding: var(--ifu-space-6);
  background: var(--ifu-card-bg);
  border: 1px solid var(--ifu-border-subtle);
  border-radius: var(--ifu-radius-lg);
  box-shadow: var(--ifu-shadow-sm);
}
.ifu-pair-card__text h3 { font-size: var(--ifu-text-h4); margin-bottom: var(--ifu-space-2); color: var(--ifu-gray-900); }
.ifu-pair-card__text p { font-size: var(--ifu-text-body-sm); color: var(--ifu-gray-500); line-height: 1.8; margin: 0; }
.ifu-pair-card__ex { display: grid; gap: var(--ifu-space-2); }
.ifu-pair-card__ex .good, .ifu-pair-card__ex .bad {
  display: flex; align-items: center; gap: var(--ifu-space-2);
  padding: var(--ifu-space-2) var(--ifu-space-3);
  border-radius: var(--ifu-radius-sm);
  font-size: 13px;
  color: var(--ifu-gray-700);
}
.ifu-pair-card__ex .good { background: var(--ifu-green-100); }
.ifu-pair-card__ex .bad { background: #fee2e2; color: #991b1b; }
.ifu-pair-card__ex .mark { font-weight: 700; }
.ifu-pair-card__ex .good .mark { color: var(--ifu-success); }
.ifu-pair-card__ex .bad .mark { color: var(--ifu-error); }

/* ============================================================
   面包屑 / 分页
   ============================================================ */
.ifu-breadcrumb {
  padding: var(--ifu-space-4) 0;
  font-size: 13px;
  color: var(--ifu-gray-500);
}
.ifu-breadcrumb a { color: var(--ifu-gray-500); }
.ifu-breadcrumb a:hover { color: var(--ifu-green-600); }
.ifu-breadcrumb .sep { margin: 0 var(--ifu-space-2); opacity: 0.5; }

.ifu-pagination {
  display: flex;
  justify-content: center;
  gap: var(--ifu-space-2);
  margin-top: var(--ifu-space-12);
}
.ifu-pagination a, .ifu-pagination span {
  min-width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--ifu-space-2);
  border-radius: var(--ifu-radius-md);
  background: var(--ifu-card-bg);
  border: 1px solid var(--ifu-border-subtle);
  color: var(--ifu-gray-700);
  font-size: 14px;
}
.ifu-pagination a:hover { border-color: var(--ifu-green-500); color: var(--ifu-green-600); text-decoration: none; }
.ifu-pagination .is-current { background: var(--ifu-green-500); border-color: var(--ifu-green-500); color: #fff; font-weight: 600; }

/* ============================================================
   动画（首页 Hero 交错入场 + 滚动显现）
   ============================================================ */
/* Hero 入场动画：元素依次上浮淡入，视觉卡缩放入场 */
.ifu-hero-anim {
  opacity: 0;
  animation: ifu-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.ifu-hero-anim--visual { animation-name: ifu-rise-zoom; }
@keyframes ifu-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ifu-rise-zoom {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.ifu-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.ifu-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .ifu-reveal { opacity: 1; transform: none; transition: none; }
  .ifu-hero-anim { opacity: 1; animation: none; }
  html { scroll-behavior: auto; }
  .ifu-hero__float { animation: none; }
}

/* ============================================================
   响应式断点
   ============================================================ */
@media (max-width: 1024px) {
  :root { --ifu-text-display: 40px; --ifu-leading-display: 48px; }
  .ifu-product-grid, .ifu-related-grid, .ifu-card-grid { grid-template-columns: repeat(2, 1fr); }
  .ifu-scene-grid, .ifu-reason-grid, .ifu-commit-grid, .ifu-buy-steps, .ifu-swatch-grid { grid-template-columns: repeat(2, 1fr); }
  .ifu-sponsor-grid { grid-template-columns: repeat(2, 1fr); }
  .ifu-brand-logo-grid { grid-template-columns: repeat(2, 1fr); }
  .ifu-type-size { grid-template-columns: 80px 60px 1fr; }
  .ifu-type-size__usage { display: none; }
  .ifu-layout-sidebar, .ifu-article-layout { grid-template-columns: 1fr; }
  .ifu-toc { position: static; order: -1; }
  .ifu-timeline { grid-template-columns: repeat(4, 1fr); }
  .ifu-timeline::before { display: none; }
  .ifu-hero__inner, .product-hero__inner { grid-template-columns: 1fr; }
  .ifu-hero__visual { order: -1; max-width: 520px; margin: 0 auto; }
  .ifu-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* 767.98px 而非 768px：避免 iPad 竖屏（含滚动条占位后 CSS 视口 751~768px）误命中移动端单列布局 */
@media (max-width: 767.98px) {
  :root {
    --ifu-text-display: 32px; --ifu-leading-display: 40px;
    --ifu-text-h1: 28px; --ifu-leading-h1: 36px;
    --ifu-space-20: 48px;
    --ifu-space-24: 48px;  /* Hero / 最终 CTA / 订阅区移动端垂直间距（PRD 6.3.1.3） */
  }
  .ifu-nav {
    display: none;
    position: absolute;
    top: var(--ifu-header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--ifu-space-1);
    padding: var(--ifu-space-4) var(--ifu-space-6) var(--ifu-space-6);
    background: var(--ifu-header-bg);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--ifu-border-subtle);
    box-shadow: var(--ifu-shadow-lg);
  }
  .ifu-nav.is-open { display: flex; }
  .ifu-nav a { padding: var(--ifu-space-3); font-size: 16px; }
  .ifu-nav-toggle { display: inline-flex; }
  .ifu-product-grid, .ifu-related-grid, .ifu-card-grid { grid-template-columns: 1fr; }
  .ifu-scene-grid, .ifu-reason-grid, .ifu-commit-grid, .ifu-buy-steps, .ifu-swatch-grid, .ifu-feature-grid { grid-template-columns: 1fr; }
  .ifu-brand-logo-grid { grid-template-columns: 1fr; }
  .ifu-sponsor-grid, .ifu-principles { grid-template-columns: 1fr; }
  .ifu-usage-item { grid-template-columns: 56px 1fr; }
  .ifu-usage-item__label { grid-column: 2; }
  .ifu-pair-card { grid-template-columns: 1fr; }
  .ifu-type-weights { grid-template-columns: repeat(2, 1fr); }
  .ifu-type-size { grid-template-columns: 1fr; gap: var(--ifu-space-1); }
  .ifu-type-size__usage { display: block; }
  .ifu-download-grid { grid-template-columns: 1fr; }
  .ifu-split, .ifu-dual-scene, .ifu-purchase-panel { grid-template-columns: 1fr; }
  .ifu-final-cta__links { grid-template-columns: repeat(2, 1fr); }
  .ifu-timeline {
    grid-template-columns: 1fr;
    gap: var(--ifu-space-6);
    padding-left: var(--ifu-space-8);
    border-left: 2px solid var(--ifu-green-200);
  }
  .ifu-timeline__node { text-align: left; padding-top: 0; }
  .ifu-timeline__dot {
    position: absolute;
    top: 4px;
    left: calc(-1 * var(--ifu-space-8) - 7px);
    transform: none;
  }
  .ifu-timeline__products { justify-content: flex-start; }
  .ifu-footer__grid { grid-template-columns: 1fr; gap: var(--ifu-space-8); }
  .ifu-footer__bottom { flex-direction: column; align-items: flex-start; }
  /* 移动端隐藏二级导航锚点（保留产品名 + CTA） */
  .ifu-sticky-cta__nav { display: none; }
}

/* 小屏手机（≤480px）：容器边距收窄至 16px，最大化内容宽度 */
@media (max-width: 480px) {
  .ifu-container { padding: 0 var(--ifu-space-4); }
  .ifu-hero__cta .ifu-btn { width: 100%; }
  .ifu-product-card { padding: var(--ifu-space-4); }
  .ifu-final-cta__links { grid-template-columns: 1fr; }
}

/* ============================================================
   暗色模式微调（补充令牌无法覆盖的硬编码）
   ============================================================ */
html[data-theme="dark"] .ifu-hero__window { background: var(--ifu-elevation-1); }
html[data-theme="dark"] .ifu-tag--free,
html[data-theme="dark"] .ifu-tag--paid,
html[data-theme="dark"] .ifu-price-badge--free { color: #fff; }
/* 暗色下浅绿底文字提亮（price-strip / 双场景标签），保证 AA 对比度 */
html[data-theme="dark"] .ifu-price-strip { color: var(--ifu-green-400); }
html[data-theme="dark"] .ifu-dual-scene__card--universal .ifu-dual-scene__label { color: var(--ifu-green-400); }
/* 暗色下 Hero 光晕降透明度，避免背景发绿 */
html[data-theme="dark"] .ifu-hero::before { opacity: 0.35; }
html[data-theme="dark"] .ifu-hero::after { opacity: 0.25; }

/* ============================================================
   案例中心（PRD 6.3.6 · /cases/ 列表 + 详情）
   ============================================================ */
/* 列表页 · 三维筛选条 */
.ifu-case-filter {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--ifu-space-4);
  max-width: 900px;
  margin: var(--ifu-space-8) auto 0;
}
.ifu-case-filter label {
  display: flex;
  flex-direction: column;
  gap: var(--ifu-space-1);
  font-size: var(--ifu-text-caption);
  color: var(--ifu-gray-500);
}
.ifu-case-filter select {
  min-width: 168px;
  height: 42px;
  padding: 0 var(--ifu-space-4);
  border: 1px solid var(--ifu-border-subtle);
  border-radius: var(--ifu-radius-md);
  background: var(--ifu-card-bg);
  color: var(--ifu-gray-900);
  font-family: var(--ifu-font-cn);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ifu-case-filter select:hover,
.ifu-case-filter select:focus {
  border-color: var(--ifu-green-500);
  box-shadow: var(--ifu-shadow-focus);
}
.ifu-case-empty {
  text-align: center;
  color: var(--ifu-gray-500);
  padding: var(--ifu-space-16) 0;
  font-size: var(--ifu-text-body);
}
/* 卡片 · 使用产品小图标缩小适配圆点 */
.ifu-card__products .dot svg { width: 13px; height: 13px; }

/* 详情页 · 使用产品列表 */
.ifu-case-products {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--ifu-space-3);
  margin-top: var(--ifu-space-8);
}
.ifu-case-product {
  display: inline-flex;
  align-items: center;
  gap: var(--ifu-space-3);
  padding: var(--ifu-space-2) var(--ifu-space-4);
  border: 1px solid var(--ifu-border-subtle);
  border-radius: var(--ifu-radius-md);
  background: var(--ifu-card-bg);
  color: var(--ifu-gray-900);
  box-shadow: var(--ifu-shadow-sm);
  transition: all 0.2s ease;
}
.ifu-case-product:hover {
  border-color: var(--ifu-green-500);
  box-shadow: var(--ifu-shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}
.ifu-case-product__icon { display: inline-flex; }
.ifu-case-product b { display: block; font-size: 14px; line-height: 1.3; }
.ifu-case-product small { color: var(--ifu-gray-500); font-size: 12px; line-height: 1.3; }

/* 详情页 · 双场景卡片 */
.ifu-case-scenes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ifu-space-4);
  margin: var(--ifu-space-4) 0 var(--ifu-space-8);
}
.ifu-case-scene {
  padding: var(--ifu-space-6);
  border: 1px solid var(--ifu-border-subtle);
  border-radius: var(--ifu-radius-lg);
  background: var(--ifu-bg-soft);
}
.ifu-case-scene .ifu-eyebrow {
  display: block;
  font-size: var(--ifu-text-caption);
  letter-spacing: 2px;
  color: var(--ifu-green-600);
  text-transform: uppercase;
  margin-bottom: var(--ifu-space-1);
}
.ifu-case-scene h3 { margin-bottom: var(--ifu-space-2); font-size: var(--ifu-text-h4); }
.ifu-case-scene p { margin: 0; color: var(--ifu-gray-500); }

/* 详情页 · 部署拓扑图（自动生成 SVG） */
.ifu-case-topology {
  margin: var(--ifu-space-4) 0 var(--ifu-space-8);
  border: 1px solid var(--ifu-border-subtle);
  border-radius: var(--ifu-radius-lg);
  background: var(--ifu-bg-soft);
  overflow: hidden;
  box-shadow: var(--ifu-shadow-sm);
}
.ifu-case-topology svg { width: 100%; height: auto; display: block; }
.ifu-case-topology .t-node--server { fill: var(--ifu-green-500); }
.ifu-case-topology .t-node--term { fill: var(--ifu-card-bg); stroke: var(--ifu-border-subtle); stroke-width: 1.5; }
.ifu-case-topology .t-node__dot { fill: var(--ifu-white); }
.ifu-case-topology .t-screen { fill: var(--ifu-green-100); }
.ifu-case-topology .t-title { font-size: 15px; font-weight: 600; fill: var(--ifu-white); }
.ifu-case-topology .t-sub { font-size: 11px; fill: var(--ifu-gray-500); }
.ifu-case-topology .t-line { stroke: var(--ifu-green-500); stroke-width: 2; stroke-dasharray: 6 4; fill: none; }
.ifu-case-topology .t-arrow { fill: var(--ifu-green-500); }
.ifu-case-topology .t-term-id { font-size: 11px; fill: var(--ifu-gray-600); }
.ifu-case-topology .t-dots { font-size: 30px; fill: var(--ifu-gray-400); }
.ifu-case-topology .t-scale { font-size: 13px; font-weight: 500; fill: var(--ifu-green-600); }
.ifu-case-topology__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--ifu-radius-md);
  box-shadow: var(--ifu-shadow-md);
  margin: var(--ifu-space-4) 0 var(--ifu-space-8);
}

/* 详情页 · 效果反馈（数字+描述） */
.ifu-case-results ul {
  list-style: none;
  padding: 0;
  margin: var(--ifu-space-4) 0 var(--ifu-space-8);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--ifu-space-4);
}
.ifu-case-results li {
  padding: var(--ifu-space-6);
  border-radius: var(--ifu-radius-lg);
  border: 1px solid var(--ifu-border-subtle);
  background: var(--ifu-bg-soft);
  color: var(--ifu-gray-500);
  font-size: 14px;
  line-height: 1.7;
}

/* 响应式：筛选条 / 双场景 / 拓扑图（与主断点同步用 767.98px） */
@media (max-width: 767.98px) {
  .ifu-case-filter { align-items: stretch; }
  .ifu-case-filter label { width: 100%; }
  .ifu-case-filter select { min-width: 0; width: 100%; }
  .ifu-case-scenes { grid-template-columns: 1fr; }
  .ifu-case-topology { overflow-x: auto; }
  .ifu-case-topology svg { min-width: 560px; }
  .ifu-case-topology__img { aspect-ratio: 4 / 3; }
  .ifu-case-results ul { grid-template-columns: 1fr; }
}
html[data-theme="dark"] .ifu-case-topology .t-title { fill: var(--ifu-gray-900); }
html[data-theme="dark"] .ifu-case-topology .t-node__dot { fill: var(--ifu-green-500); }