/* ==========================================================================
   品牌页公共组件 brand-page.css
   ──────────────────────────────────────────────────────────────────────────
   【2026-09-30】从 landing.html 内联 <style> 提取，供 landing.html 与 nutri-find.html
   等「品牌页」共用，消除同一套视觉写两遍的问题。

   规则（与 design-system.css 的分工）：
     · design-system.css  = 设计令牌 + 全站通用组件（.btn/.tag/.card/.topbar…）
     · brand-page.css     = 品牌页（营销页 / 门户页）的区块与卡片组件
     · 页面内联 <style>   = 仅该页专属样式（如 landing 的 .hero、nutri-find 的 .nf-*）
   本文件必须在 design-system.css **之后**加载（依赖其 CSS 变量）。

   ⚠️ 提取时**逐字保留** landing.html 原值（区块留白 80/32、卡片 gap 24、动效
   .25s + translateY(-4px)），因此 landing 改为引用本文件后渲染结果应逐像素不变
   （已由 _verify/landing_visual_capture_20260930.cjs 的 before/after 快照证明）。
   ========================================================================== */

/* ── 区块节奏 ─────────────────────────────────────────────────────────────
   品牌页统一：上下留白 80px / 左右 32px / 内容最宽 1100px 居中；
   移动端收紧为 50px / 20px（与 landing 的 .products / .stats 完全一致）。 */
.section { padding: 80px 32px; max-width: 1100px; margin: 0 auto; }
@media (max-width: 768px) {
  .section { padding: 50px 20px; }
}

/* ── 区块标题（居中三段式：徽章 + 主标题 + 副说明）───────────────────────── */
.section-header { text-align: center; margin-bottom: 48px; }
.section-header .badge {
  display: inline-block;
  background: var(--c-primary-ghost); color: var(--c-primary);
  border-radius: 999px; padding: 4px 16px;
  font-size: 12px; font-weight: 600; margin-bottom: 12px;
}
.section-header h2 { font-size: 28px; font-weight: 700; color: var(--c-t1); margin-bottom: 8px; }
.section-header p { font-size: 15px; color: var(--c-t3); }

/* ── 卡片矩阵 ───────────────────────────────────────────────────────────── */
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 768px) {
  .product-grid { grid-template-columns: 1fr; }
}

.product-card {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: all .25s ease;
  background: var(--c-white);
}
.product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }

.product-banner {
  height: 140px;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 700; color: #fff;
  position: relative; overflow: hidden;
}
.product-banner::after {
  content: ''; position: absolute;
  top: -40%; right: -30%;
  width: 160px; height: 160px;
  background: rgba(255,255,255,.12);
  border-radius: 50%;
}
.product-banner.admin   { background: linear-gradient(135deg,#047857,#059669,#6EE7B7); }
.product-banner.nutri   { background: linear-gradient(135deg,#065F46,#059669,#6EE7B7); }
.product-banner.client  { background: linear-gradient(135deg,#D946EF,#EC4899,#F9A8D4); }
.product-banner.balance { background: linear-gradient(135deg,#7C3AED,#8B5CF6,#C4B5FD); }

.product-body { padding: 22px 22px 24px; }
.product-body h3 { font-size: 16px; font-weight: 700; color: var(--c-t1); margin-bottom: 6px; }
.product-body p { font-size: 14px; color: var(--c-t3); line-height: 1.7; margin-bottom: 14px; }

.product-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.product-tags .tag { font-size: 11px; padding: 3px 10px; }

.product-link {
  font-size: 13px; font-weight: 600; color: var(--c-primary);
  display: inline-flex; align-items: center; gap: 4px;
}
.product-link:hover { color: var(--c-primary-deep); }

@media (max-width: 768px) {
  .product-banner { height: 100px; }
}

/* ── 标签补充变体 ─────────────────────────────────────────────────────────
   .tag-muted：中性状态（如「已解约 / 已撤回」），取值与 design-system 的
   .cbadge--muted 一致（--c-bg / --c-t4），避免本页再造一套灰色。 */
.tag-muted { background: var(--c-bg); color: var(--c-t4); }