/**
 * 前台组件层（`.bm-*`）—— **只在非 /admin 路由加载**，由 `server/plugins/front-css.ts`
 * 在 SSR 渲染时追加一条 <link> 注入（之所以不用布局 import：布局属于应用静态图，
 * Vite 会把它的 CSS 提升进全局包，等于没拆 —— 见 server/plugins/theme-css.ts:8 的实测教训）。
 *
 * 【怎么来的】2026-09-30 由 `scripts/tmp-front-css-split.mjs` 从 assets/css/main.css 原样搬出：
 * 连 `@layer components { }` 包装一起搬（丢包装会让这些规则变成 unlayered，
 * 而 unlayered 高于任何 layer ⇒ 压掉 Tailwind utilities，全站工具类静默失效）。
 * 前台令牌（`--bm-*`）仍留在 main.css，因为可能有页面的 <style> 直接引用它们。
 *
 * 【不要手改给后台用】后台轨道有自己的 `assets/css/admin.css`（`--admin-*`）；
 * 两边互不引用，由 scripts/gate-compile.mjs 的两条规则守着。
 */



/* ---------- 贯穿式浅青渐变底（对齐有赞首页「大面积铺色」的做法） ----------
   有赞整页是一层蓝紫渐变而不是纯白，这是它观感「贵」的主要原因之一。
   这里换成禾君青，用 fixed 定位 + 多层 radial/linear 渐变实现，不依赖图片，
   滚动时背景不动，形成「整页是一张底」的连续感。 */
.bm-page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(115% 55% at 12% -2%, rgba(41, 124, 112, 0.16) 0%, rgba(41, 124, 112, 0) 58%),
    radial-gradient(95% 48% at 88% 6%, rgba(79, 156, 144, 0.15) 0%, rgba(79, 156, 144, 0) 60%),
    radial-gradient(80% 40% at 50% 62%, rgba(167, 207, 201, 0.18) 0%, rgba(167, 207, 201, 0) 70%),
    linear-gradient(180deg, #e9f2f0 0%, #f2f8f7 18%, #edf4f5 40%, #f4f8f7 62%, #eaf1f1 84%, #e6eef0 100%);
}
/* =====================================================================
   组件层
   注意：必须放在 @layer components 内 —— 未分层的规则优先级高于
   Tailwind 的 @layer utilities，会导致 md:flex-1 / mt-[120px] 等工具类失效。
   ===================================================================== */
@layer components {


  /* ---------- 骨架屏（PRD 4：区块骨架，不使用全屏 Loading 转圈） ---------- */
  .bm-skeleton {
    display: block;
    background: linear-gradient(90deg, #eef1f3 25%, #f7f9fa 37%, #eef1f3 63%);
    background-size: 400% 100%;
    border-radius: 8px;
    animation: bm-skeleton-shine 1.4s ease infinite;
  }

  @keyframes bm-skeleton-shine {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
  }
@media (prefers-reduced-motion: reduce) {

    .bm-skeleton { animation: none; background: #eef1f3; }
}


  /* ---------- 首页：容器与板块 ---------- */
  .bm-container {
    width: 100%;
    max-width: var(--bm-container);
    margin-left: auto;
    margin-right: auto;
  }
@media (min-width: 1920px) {
 .bm-container { max-width: 1462px; }
}
@media (max-width: 767px) {
 .bm-container { padding-left: 16px; padding-right: 16px; }
}
/* 768–1193px：容器宽度=视口宽，内容会**顶到窗口边缘**（1024 下 logo 与文档侧栏看着像被"切掉"、
     导航下拉也没有回旋空间）。这里补左右留白。≥1194px 时容器已是完整 1146px 且居中，
     留白由 auto 边距给出 —— 所以不再加内边距，避免改动 1146 的对齐基准。 */
  @media (min-width: 768px) and (max-width: 1193px) {
 .bm-container { padding-left: 24px; padding-right: 24px; }
}


  .bm-sections { display: flex; flex-direction: column; gap: var(--bm-gap); }
/* 手机端标题断行平衡（2026-10-06，手机体检后加）
   实测：中文标题在 375 宽下会把**最后一个字**挤到单独一行 ✗
   —— 线上截图里最扎眼的一处就是「四套已上线系统，交付即可用」末行只剩一个「用」✓。
   中文按字断行、没有"词"的概念，所以浏览器默认的贪心断行几乎必然留下孤字 ✓。
   `text-wrap: balance` 让浏览器把标题**均分到各行** ⇒ 13 个字排成 7+6 而不是 11+2 ✓。
   ⚠️ 刻意**不动任何字号**（站主对字号/密度有明确偏好：资料页密度优先 ✓）；
   ⚠️ 也不用 `pretty` —— 当天实测那一个对中文**没有效果**（孤行数一点没降 ✗）⇒ 已撤掉 ✓；
   ⚠️ 只作用于 h1–h4（浏览器对 balance 有 6 行上限 ✓，长正文永远不会被它影响 ✓）。 */
@media (max-width: 767px) {
  h1, h2, h3, h4 { text-wrap: balance; }
}
@media (max-width: 768px) {
 .bm-sections { gap: 64px; }
}
@media (max-width: 470px) {
 .bm-sections { gap: 44px; }
}


  /* 内页板块间距（比首页略紧凑，但同样保留呼吸空间） */
  .bm-sections-compact { display: flex; flex-direction: column; gap: 96px; }
@media (max-width: 768px) {
 .bm-sections-compact { gap: 64px; }
}
@media (max-width: 470px) {
 .bm-sections-compact { gap: 48px; }
}


  /* 板块标题：左对齐（长内容页左对齐更好读）。
     字号放大到 36px 并加重字重 —— 参考站有赞的板块标题视觉压强明显更大，
     标题够重，正文才显得轻，整页才有层次。 */
  .bm-subtitle {
    margin: 0 0 44px;
    color: var(--bm-heading);
    /* 对齐有赞的量级：它的板块标题约 40–44px / 700，是全页仅次于 Hero 的字号。
       之前 36px/600 偏弱，标题不够重，正文就显不出轻，整页层次出不来。 */
    font-size: 40px;
    line-height: 54px;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
@media (max-width: 768px) {

    .bm-subtitle { font-size: 28px; line-height: 40px; margin-bottom: 28px; }
}


  /* ---------- 内页次级标题（模块 / 卡片群标题）与卡片标题 ----------
     改版前这两层是全国手写值：15 / 16 / 17 / 18 / 19 / 20px 共六档，
     同一个角色在不同页面能差 4px，整站字号阶梯是散的。现固定两级：
       .bm-h2  20px —— 页面内的模块标题（板块标题 .bm-subtitle 之下的一层）
       .bm-h3  16px —— 卡片标题
     刻意不设 color 与 margin：
       · 不设 color —— 深色渐变卡里的标题要继承 text-white，写死颜色会把它压成墨黑；
       · 不设 margin —— Tailwind 的 mt-* / mb-* 是同级选择器，本文件在 Tailwind 之后加载，
         一旦这里写了 margin 就会把写法各处的间距覆盖掉。 */
  .bm-h2 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  .bm-h3 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
  }
@media (max-width: 768px) {

    .bm-h2 { font-size: 18px; line-height: 26px; }
}


  /* ---------- 标题（已清理） ----------
     .bm-title（居中 40px/500）与 .bm-hero-title（居中 48px/500）都是早期
     「居中大标题」的写法，全站已无引用（板块标题统一走 .bm-subtitle 左对齐）。
     唯一使用者 about.vue 已改为 .bm-subtitle，这两个类随之删除。 */

  /* ---------- 首页：按钮 ---------- */
  .bm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 14px 36px;
    border: none;
    border-radius: 999px;
    background: var(--bm-brand);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 24px;
    text-decoration: none;
    cursor: pointer;
    /* 常态就有阴影：有厚度的按钮才像「能点的东西」，纯色块会显得平 */
    box-shadow: 0 6px 18px -10px rgba(41, 124, 112, 0.55);
    transition: background-color 0.2s linear, box-shadow 0.2s var(--bm-ease), transform 0.2s var(--bm-ease);
  }

  .bm-btn:hover {
    background: var(--bm-brand-hover);
    box-shadow: 0 14px 30px -12px rgba(41, 124, 112, 0.6);
    transform: translateY(-1px);
  }
@media (max-width: 767px) {

    .bm-btn { height: 46px; padding: 12px 28px; }
}


  /* 【这里曾有一份 .bm-btn-dark 的旧定义，2026-09-30 删除】
     同一选择器在本文件下方（搜 "黑色胶囊按钮"）又定义了一遍（height 46 / radius 999px 那版）。
     两版并存时共享属性全部由后者覆盖，前者只剩 line-height 一项生效 —— 而它是 inline-flex +
     align-items:center + 固定高度，line-height 不起作用，等于纯死规则。留着只会让人改错那一份。 */

  /* ---------- 首页：首屏 ---------- */
  .bm-hero-input {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 640px;
    height: 60px;
    padding: 12px 32px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 100px;
    /* 用半透明白替代 backdrop-filter：毛玻璃叠加动画背景会持续重采样，是主要卡顿源 */
    background: rgba(255, 255, 255, 0.72);
    transition: box-shadow 0.3s var(--bm-ease), background-color 0.3s var(--bm-ease), border-color 0.3s var(--bm-ease);
  }

  .bm-hero-input:focus-within {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(41, 124, 112, 0.35);
    box-shadow: 0 0 0 4px rgba(41, 124, 112, 0.12), 0 10px 30px -18px rgba(15, 46, 42, 0.35);
  }
@media (max-width: 767px) {

    .bm-hero-input { height: 52px; padding: 10px 20px; }
}


  .bm-hero-card {
    position: relative;
    flex: 1;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
    cursor: pointer;
    transition: border-color 0.3s var(--bm-ease);
  }

  .bm-hero-card:hover { border-color: transparent; }

  .bm-hero-card .bm-hero-title-text,
  .bm-hero-card .bm-hero-desc { transition: color 0.3s ease-out; }


  .bm-icon-box {
    transition: background-color 0.8s var(--bm-ease), transform 0.6s var(--bm-ease-elastic), color 0.5s ease;
  }

  .bm-hero-card:hover .bm-icon-box { transform: translateY(-2px) scale(1.06); }


  /* ---------- 首页：模型卡 ---------- */
  .bm-model-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    min-height: 246px;
    padding: 24px;
    border: 1px solid #fff;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.3s var(--bm-ease);
  }

  .bm-model-card:hover { box-shadow: 0 12px 32px -18px rgba(15, 46, 42, 0.3); }

  .bm-model-card .bm-model-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: 100% 50%;
    transition: transform 0.4s var(--bm-ease);
  }

  .bm-model-card:hover .bm-model-bg { transform: scale(1.06); }


  .bm-hover-arrow .bm-arrow { transition: transform 0.3s var(--bm-ease); }

  .bm-hover-arrow:hover .bm-arrow { transform: translateX(4px); }


  /* ---------- 首页：tab ---------- */
  .bm-tab { position: relative; }

  .bm-tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--bm-heading);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s var(--bm-ease);
  }

  .bm-tab:hover::after { transform: scaleX(0.5); }

  .bm-tab.is-active::after { transform: scaleX(1); }


  /* ---------- 首页：logo 墙 ---------- */
  .bm-partner { transition: transform 0.3s var(--bm-ease), box-shadow 0.3s var(--bm-ease); }

  .bm-partner:hover { transform: translateY(-4px); box-shadow: 0 12px 28px -18px rgba(15, 46, 42, 0.32); }

  .bm-partner-name { transition: color 0.3s var(--bm-ease); }

  .bm-partner:hover .bm-partner-name { color: var(--bm-brand); }


  /* ---------- 通用卡片：轻阴影 + 悬停抬升 ----------
     参考站有赞的卡片都有立体感（白底 + 双向阴影 + hover 上浮），
     纯描边无阴影的卡片会显得平、缺层次，整页像线稿。 */
  .bm-card {
    border: 1px solid rgba(19, 18, 18, 0.05);
    /* 圆角对齐有赞的 20px（原 14px 偏「工具感」，20px 更接近它的圆润气质） */
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 2px 4px -2px rgba(15, 46, 42, 0.06), 0 14px 34px -26px rgba(15, 46, 42, 0.3);
    transition: box-shadow 0.3s var(--bm-ease), transform 0.3s var(--bm-ease), border-color 0.3s var(--bm-ease);
  }

  .bm-card:hover {
    border-color: rgba(41, 124, 112, 0.2);
    box-shadow: 0 3px 8px -3px rgba(15, 46, 42, 0.09), 0 26px 54px -30px rgba(15, 46, 42, 0.42);
    transform: translateY(-3px);
  }


  /* ---------- 内页信息卡：比 .bm-card 紧凑一档（12px 圆角），阴影语言保持一致 ----------
     内页原先手写 `rounded-[12px] border border-white bg-white` 共 30 处，
     其中 border-white 叠在白底上等于没有边框，卡片浮不起来，整页像线稿。
     这里只统一「边框 + 圆角 + 阴影」，内边距仍由各处的 p-* 决定（卡片密度差别很大）。
     注意：不做 hover 位移 —— 内页多是静态信息卡，整片卡片一起上浮会很吵。 */
  .bm-card-sm {
    border: 1px solid rgba(19, 18, 18, 0.05);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 4px -2px rgba(15, 46, 42, 0.05), 0 10px 26px -22px rgba(15, 46, 42, 0.28);
    transition: border-color 0.3s var(--bm-ease), box-shadow 0.3s var(--bm-ease);
  }

  .bm-card-sm:hover {
    border-color: rgba(41, 124, 112, 0.18);
    box-shadow: 0 3px 8px -3px rgba(15, 46, 42, 0.08), 0 20px 40px -28px rgba(15, 46, 42, 0.36);
  }


  /* 黑色胶囊按钮（对齐有赞：它大量使用黑色胶囊做行动点，比彩色更「重」更醒目） */
  .bm-btn-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 28px;
    border: none;
    border-radius: 999px;
    background: #131212;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.25s var(--bm-ease), transform 0.25s var(--bm-ease), box-shadow 0.25s var(--bm-ease);
  }

  .bm-btn-dark:hover {
    background: #2a2a2e;
    transform: translateY(-1px);
    box-shadow: 0 12px 26px -14px rgba(19, 18, 18, 0.55);
  }


  /* 幽灵胶囊：与 .bm-btn 成对出现，所以高度/字号/字重必须完全对齐，
     否则并排两个按钮会一高一矮（内页 Hero 里原本就是这样：52px 主按钮 + 48px 副按钮，
     而且副按钮是手写 Tailwind 串复刻的，描边色/内边距还各不相同）。 */
  .bm-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 14px 32px;
    border: 1px solid rgba(19, 18, 18, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    color: var(--bm-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 24px;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.25s var(--bm-ease), background-color 0.25s var(--bm-ease);
  }

  .bm-btn-ghost:hover { border-color: var(--bm-brand); background: #fff; }
@media (max-width: 767px) {

    .bm-btn-ghost { height: 46px; padding: 12px 28px; }
}


  /* 彩色图标底（对齐有赞的彩色 3D 图标：每个功能一个带色图标，
     纯线性单色图标是整页「偏素」的重要原因之一） */
  .bm-icon-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    color: #fff;
    flex: none;
    box-shadow: 0 8px 18px -12px rgba(15, 46, 42, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.32);
  }


  /* 板块头：上「小字引导 + 胶囊」、下「超大标题」的双行结构（对齐有赞） */
  .bm-sec-lead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
    color: var(--bm-ink);
  }
@media (max-width: 767px) {

    .bm-sec-lead { font-size: 15px; line-height: 24px; }
}

  .bm-sec-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    color: var(--bm-sub);
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.25s var(--bm-ease);
  }

  .bm-sec-pill:hover { color: var(--bm-ink); }


  /* 超大板块标题（有赞的板块标题约 40–44px，是本页仅次于 Hero 的字号） */
  .bm-sec-title {
    margin: 0;
    color: var(--bm-heading);
    font-size: 40px;
    line-height: 54px;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
@media (max-width: 767px) {

    .bm-sec-title { font-size: 28px; line-height: 40px; }
}


  /* 渐变光晕卡（对齐有赞那张「加我智能」的紫粉渐变边框卡） */
  .bm-card-glow {
    position: relative;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7), 0 40px 90px -50px rgba(41, 124, 112, 0.55);
  }

  .bm-card-glow::before {
    content: '';
    position: absolute;
    inset: -14px;
    z-index: -1;
    border-radius: 30px;
    background: conic-gradient(from 140deg, rgba(41, 124, 112, 0.5), rgba(167, 207, 201, 0.55), rgba(79, 156, 144, 0.45), rgba(41, 124, 112, 0.5));
    filter: blur(26px);
    opacity: 0.75;
  }


  /* ---------- 图片 / 视频占位骨架屏 ----------
     产品截图和演示视频还没有素材，先用骨架屏顶住真实尺寸的位置，
     素材到位后直接把 <div class="bm-shot"> 换成 <img> 或 <video> 即可，
     外层容器与交互（tab / 轮播 / 箭头）都不用改。 */
  .bm-shot {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #eaf0ee 0%, #f5f9f8 55%, #e9f0ee 100%);
  }

  /* 斜向微光扫过，让占位块看起来是「等待加载」而不是「坏了」 */
  .bm-shot::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.72) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: bm-shimmer 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }

  /* 占位块里的网格底纹，暗示这是「界面截图」的待填位 */
  .bm-shot-grid {
    background-image: linear-gradient(rgba(41, 124, 112, 0.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(41, 124, 112, 0.07) 1px, transparent 1px);
    background-size: 44px 44px;
  }


  /* ---------- 筛选胶囊（系统矩阵的行业筛选 / 常见问题的分类筛选） ----------
     两处各手写了两份完全相同的长 class 串，描边色还分别是 #e2e5e9 与 #e3e5e9（差一个色阶），
     选中态也分两套（描边淡底 / 实心填充）。这里收敛为一种：
     描边 + 淡青底 + 深青字，和站内大量 bg-hejun-50 text-hejun-700 的语言一致。 */
  .bm-chip {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 16px;
    border: 1px solid #e2e5e9;
    border-radius: 999px;
    background: #fff;
    color: var(--bm-sub);
    font-size: 13px;
    line-height: 20px;
    cursor: pointer;
    transition: border-color 0.2s var(--bm-ease), background-color 0.2s var(--bm-ease), color 0.2s var(--bm-ease);
  }

  .bm-chip:hover { border-color: var(--color-hejun-300); color: var(--color-hejun-600); }

  .bm-chip.is-active {
    border-color: var(--color-hejun-500);
    background: var(--color-hejun-50);
    color: var(--color-hejun-700);
  }


  /* ---------- 胶囊 tab（参考有赞首屏的分类切换） ---------- */
  .bm-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 20px;
    border: 1px solid #e3e5e9;
    border-radius: 999px;
    background: #fff;
    color: var(--bm-sub);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s var(--bm-ease);
  }

  .bm-pill:hover { border-color: var(--bm-brand-hover); color: var(--bm-brand); transform: translateY(-1px); }

  .bm-pill.is-active {
    border-color: #131212;
    background: #131212;
    color: #fff;
    box-shadow: 0 8px 20px -12px rgba(19, 18, 18, 0.6);
  }
@media (max-width: 767px) {

    .bm-pill { height: 38px; padding: 0 16px; font-size: 13px; }
}


  /* Hero 卖点轮播的进度条 */
  .bm-point-bar { animation: bm-point-progress 6s linear; }


  /* 轮播圆点 */
  .bm-dot-btn {
    height: 4px;
    border-radius: 999px;
    background: rgba(19, 18, 18, 0.16);
    cursor: pointer;
    transition: all 0.3s var(--bm-ease);
  }

  .bm-dot-btn.is-active { background: var(--bm-brand); width: 28px; }


  /* ---------- 首页：首屏产品展示（界面预览，纯 CSS 绘制，不依赖截图素材） ---------- */
  .bm-window {
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(19, 18, 18, 0.08);
    background: #fff;
    /* 双层阴影：远距离大柔化投影撑出立体感，近距离细阴影压住边缘 */
    box-shadow: 0 32px 72px -42px rgba(15, 46, 42, 0.5), 0 2px 10px -5px rgba(15, 46, 42, 0.14);
  }

  .bm-window-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #eef0f2;
    background: #fafbfc;
    padding: 10px 14px;
  }

  .bm-dot { width: 10px; height: 10px; border-radius: 999px; flex: none; }


  /* 状态点脉冲：租赁中 / LIVE 这类「正在发生」的提示 */
  .bm-pulse { position: relative; }

  .bm-pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: inherit;
    animation: bm-pulse 1.8s var(--bm-ease) infinite;
  }


  /* 数据条生长：切 tab 时重新播放，让界面看起来是活的 */
  .bm-bar { animation: bm-grow 0.9s var(--bm-ease) both; }


  /* 列表逐行浮现 */
  .bm-row { animation: bm-rise 0.4s var(--bm-ease) both; }


  /* 直播弹幕上滚 */
  .bm-danmu { animation: bm-danmu 9s linear infinite; }


  /* 输入光标闪烁 */
  .bm-caret { animation: bm-caret 1.1s steps(1) infinite; }


  /* ---------- 首页：FAQ 手风琴（原生 details，无 JS） ---------- */
  .bm-faq { transition: border-color 0.25s var(--bm-ease), box-shadow 0.25s var(--bm-ease); }

  .bm-faq summary { list-style: none; cursor: pointer; }

  .bm-faq summary::-webkit-details-marker { display: none; }

  .bm-faq-icon { transition: transform 0.25s var(--bm-ease); }

  .bm-faq[open] .bm-faq-icon { transform: rotate(180deg); }

  .bm-faq[open] .bm-faq-q { color: var(--bm-brand); }

  .bm-faq[open],
  .bm-faq.is-open { border-color: rgba(41, 124, 112, 0.28); box-shadow: 0 10px 28px -20px rgba(15, 46, 42, 0.3); }


  /* ---------- 首页：交付物 / 质量保障 编号 ---------- */
  .bm-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(41, 124, 112, 0.1);
    color: var(--bm-brand);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
  }


  /* ---------- 首屏装饰光斑（纯 CSS，GPU 合成，零 JS 开销） ---------- */
  .bm-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
  }
}


/* =====================================================================
   动效
   ===================================================================== */

/* 首屏卡片依次浮现 */
@keyframes bm-rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

.bm-rise { animation: bm-rise 0.45s var(--bm-ease) both; }


/* 光斑缓慢漂移（时长很长、幅度很小，避免持续重绘带来的卡顿感） */
@keyframes bm-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(40px, -30px, 0) scale(1.08); }
}

@keyframes bm-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
  50% { transform: translate3d(-50px, 26px, 0) scale(0.98); }
}

@keyframes bm-drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.96); }
  50% { transform: translate3d(28px, 34px, 0) scale(1.06); }
}

.bm-drift-a { animation: bm-drift-a 26s ease-in-out infinite; }

.bm-drift-b { animation: bm-drift-b 32s ease-in-out infinite; }

.bm-drift-c { animation: bm-drift-c 38s ease-in-out infinite; }


/* 首屏界面预览的微动效：目的不是炫技，而是让静态界面看起来「在运行」 */
@keyframes bm-pulse {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(2.6); opacity: 0; }
}

@keyframes bm-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes bm-danmu {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

@keyframes bm-caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}


/* 骨架屏微光扫过 */
@keyframes bm-shimmer {
  100% { transform: translateX(100%); }
}


/* Hero 卖点轮播的进度条（6s 走满，与切换间隔一致） */
@keyframes bm-point-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}


/* tab 内容切换淡入 */
@keyframes bm-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.bm-fade-up { animation: bm-fade-up 0.4s var(--bm-ease) both; }
/* =====================================================================
   无障碍 / 低性能偏好降级
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {

  .bm-rise,
  .bm-fade-up,
  .bm-drift-a,
  .bm-drift-b,
  .bm-drift-c,
  .bm-bar,
  .bm-row,
  .bm-danmu,
  .bm-pulse::after,
  .bm-shot::after,
  .bm-point-bar { animation: none; }


  /* 关掉进度条动画后让它停在满格，否则会一直空着 */
  .bm-point-bar { transform: none; }


  /* 关掉动画后，数据条要停在「已展开」状态而不是缩成一条线 */
  .bm-bar { transform: none; }


  .card-lift,
  .bm-tab::after,
  .bm-icon-box,
  .bm-model-card .bm-model-bg,
  .bm-hover-arrow .bm-arrow { transition: none; }


  .card-lift:hover,
  .bm-partner:hover,
  .bm-hero-card:hover .bm-icon-box,
  .bm-model-card:hover .bm-model-bg { transform: none; }
}

/* 【2026-10-04】页脚"联系方式"列：标签在上、值在下（原来挤在一行 ✗ 没有层级）。
   用 flex-direction:column 让「商务邮箱：」这类文本与随后的 <a> 自动分两行 ✓，
   值本身已是品牌浅绿（text-hejun-300 ✓），标签沿用更浅的父级色 → 一眼分得开 ✓。 */
.ft-contact > li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}