@charset "UTF-8";
/* ==========================================================================
   品牌故事页（brand.html）页面级样式
   2026-09-24 依 Ardot 设计稿《科丽艾 Cal Inc. 品牌故事页》还原版式
   （画布 fileId 729313017886786，桌面端画板 1440 / 移动端画板 390）

   作用域约定
     · 所有类名一律 bs- 前缀，令牌挂在 .bs-page 上，不外泄、不与 base.css 撞名
     · 只提供 .bs- 前缀样式，不覆盖任何站点公共组件（导航 / 页脚 / .btn 全部沿用 base.css）

   容器对齐（重要）
     设计稿桌面端左右留白 140，1440 - 140×2 = 内容宽 1160
     站点 .container 为 max-width:1200 + padding:0 20px，在 ≥1240 视口下内容宽同为 1160
     → 区块内部直接复用站点 .container，左右边距自动等于 140，无需额外定位
   ========================================================================== */

.bs-page {
  /* 颜色令牌：全部取自 base.css 的 :root，此处仅做页内别名 */
  --bs-ink: #2C6E8F;          /* 深云蓝 · 标题与主锚点 */
  --bs-strong: #333333;       /* 强调正文 */
  --bs-body: #666666;         /* 正文 */
  --bs-muted: #A1A1A1;        /* 补充说明 */
  --bs-accent: #C07A2E;       /* 暖琥珀金 · 年份 / 序号 / 按钮 */
  --bs-line: #C9DCE3;         /* 浅云蓝 · 时间轴连线 */
  --bs-surface: #F4F6F8;      /* 浅底区块 */
  --bs-band: #2C6E8F;         /* 深蓝数据带底色 */
  --bs-band-label: #C9DCE3;   /* 数据带标签文字 */
  --bs-radius: 2px;
}

/* ---------- 通用板块骨架 ---------- */
.bs-sec { padding: 96px 0; }
.bs-sec--surface { background: var(--bs-surface); }
.bs-sec--cta { padding: 88px 0; background: var(--bs-surface); }

/* 锚点跳转时让开固定导航（base.css 的 .section[id] 不覆盖 bs- 板块） */
.bs-page [id] { scroll-margin-top: 104px; }

.bs-head { margin-bottom: 48px; }
.bs-head__title {
  font-family: var(--font-title);
  font-size: 36px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--bs-ink);
}
.bs-head__desc {
  margin-top: 12px;
  font-size: 16px;
  line-height: 28px;
  color: var(--bs-body);
}

/* 板块收尾的补充说明（资质 / 团队下方） */
.bs-note {
  margin-top: 28px;
  font-size: 13px;
  line-height: 24px;
  color: var(--bs-muted);
}

/* ==========================================================================
   1. Hero 标题区
   画布 3:16 / 3:17 / 3:18 —— 高 620，左深右浅斜向遮罩，内容左对齐宽 660
   高度随视口等比（1440 时正好 620），避免超宽屏把两侧内容裁掉
   ========================================================================== */
.bs-hero {
  position: relative;
  height: 43.05vw;
  min-height: 520px;
  max-height: 860px;
  display: flex;
  align-items: center;
  background: #1D4A66 url('../images/bs-hero.jpg') center center / cover no-repeat;
  overflow: hidden;
}
.bs-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(23, 61, 84, 0.94) 0%,
    rgba(28, 79, 110, 0.71) 42%,
    rgba(28, 79, 110, 0.33) 70%,
    rgba(28, 79, 110, 0) 100%
  );
}
.bs-hero__inner { position: relative; z-index: 1; width: 100%; }
.bs-hero__copy { max-width: 660px; }
.bs-hero__title {
  font-family: var(--font-title);
  font-size: 52px;
  font-weight: 800;
  line-height: 68px;
  color: #FFFFFF;
  text-shadow: 0 2px 18px rgba(12, 38, 54, 0.34);
}
.bs-hero__lead {
  margin-top: 24px;
  font-size: 16px;
  line-height: 32px;
  color: #E2EDF2;
  text-shadow: 0 1px 10px rgba(12, 38, 54, 0.40);
}
.bs-hero__actions { display: flex; gap: 14px; margin-top: 24px; }

/* ==========================================================================
   2. 品牌起源
   画布 3:27 ~ 3:41 —— 上标题组 gap12，下图文两栏 gap64
   栏宽 660 + 64 + 436 = 1160；两栏顶部对齐（capture_layout 实测 y 均为 952）
   ========================================================================== */
.bs-origin__row {
  display: flex;
  gap: 64px;
  align-items: flex-start;
}
.bs-origin__body { flex: 1 1 auto; min-width: 0; }
.bs-origin__media {
  flex: 0 0 436px;
  aspect-ratio: 436 / 545;
  border-radius: var(--bs-radius);
  overflow: hidden;
}
.bs-origin__media img { width: 100%; height: 100%; object-fit: cover; }

.bs-origin__anchor {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
}
.bs-origin__year {
  font-family: var(--font-num);
  font-size: 58px;
  font-weight: 800;
  line-height: 1;
  color: var(--bs-accent);
}
.bs-origin__place {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 500;
  color: var(--bs-body);
}
.bs-origin__subtitle {
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: var(--bs-strong);
  margin-bottom: 20px;
}
.bs-origin__text {
  font-size: 16px;
  line-height: 32px;
  color: var(--bs-body);
}
.bs-origin__text + .bs-origin__text { margin-top: 20px; }
.bs-origin__en {
  margin-top: 20px;
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: var(--bs-muted);
}

/* ==========================================================================
   3. 数据带
   画布 3:42 —— 深云蓝通栏，上下留白 52，四项两端分布（首项 x140 / 末项右缘 1300）
   ========================================================================== */
.bs-band { background: var(--bs-band); padding: 52px 0; }
.bs-band__grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.bs-band__num {
  font-family: var(--font-num);
  font-size: 40px;
  font-weight: 800;
  line-height: 42px;
  color: #FFFFFF;
}
.bs-band__num span {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 500;
  margin-left: 5px;
}
.bs-band__label {
  margin-top: 10px;
  font-size: 14px;
  color: var(--bs-band-label);
}

/* ==========================================================================
   4. 发展历程
   画布 3:61 ~ 3:112 —— 桌面端横向三列：年份 150 / 节点列 40 / 内容自适应
   每行固定最小高 130，行内三者顶部对齐
   ========================================================================== */
.bs-tl { list-style: none; }
.bs-tl__row {
  display: grid;
  grid-template-columns: 150px 40px minmax(0, 1fr);
  gap: 0 24px;
  min-height: 130px;
}
.bs-tl__year {
  grid-column: 1;
  font-family: var(--font-num);
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  color: var(--bs-accent);
}
.bs-tl__rail {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bs-tl__body { grid-column: 3; min-width: 0; padding: 2px 0; }
.bs-tl__dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bs-accent);
}
.bs-tl__rail::after {
  content: "";
  flex: 1 1 auto;
  width: 2px;
  background: var(--bs-line);
}
.bs-tl__row:last-child .bs-tl__rail::after { display: none; }
.bs-tl__title {
  font-family: var(--font-title);
  font-size: 19px;
  font-weight: 700;
  line-height: 28px;
  color: var(--bs-ink);
}
.bs-tl__desc {
  margin-top: 10px;
  font-size: 15px;
  line-height: 28px;
  color: var(--bs-body);
}

/* ==========================================================================
   5. 服务中心网络
   2026-09-27 由 3 列卡片网格改为「左侧节点列表 ↔ 右侧大图」联动：
   hover / 点击左侧列表项，右侧淡入对应门店图；左列底部保留深蓝「服务网络」小结。
   ========================================================================== */
.bs-svc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
}
.bs-svc__side { display: flex; flex-direction: column; gap: 18px; }
.bs-svc__list { display: flex; flex-direction: column; }
.bs-svc__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 13px 16px 13px 18px;
  background: none;
  border: 0;
  border-left: 2px solid var(--bs-line);
  border-radius: 0 var(--bs-radius) var(--bs-radius) 0;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.bs-svc__item:hover { background: var(--bs-surface); }
.bs-svc__item.is-active { background: var(--bs-surface); border-left-color: var(--bs-accent); }
.bs-svc__idx {
  flex: none;
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 700;
  line-height: 24px;
  color: var(--bs-accent);
}
.bs-svc__item.is-active .bs-svc__idx { color: var(--bs-ink); }
.bs-svc__text { display: block; min-width: 0; }
.bs-svc__item-name {
  display: block;
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--bs-body);
  transition: color 0.25s ease;
}
.bs-svc__item:hover .bs-svc__item-name,
.bs-svc__item.is-active .bs-svc__item-name { color: var(--bs-ink); }
.bs-svc__item-desc {
  display: block;
  font-size: 13px;
  line-height: 21px;
  color: var(--bs-body);
  margin-top: 3px;
}
/* 左列底部：深蓝小结（原网格里的「服务网络」板收敛于此） */
.bs-svc__note {
  border-radius: var(--bs-radius);
  background: var(--bs-band);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bs-svc__note-title {
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 700;
  line-height: 26px;
  color: #FFFFFF;
}
.bs-svc__note-list {
  font-size: 14px;
  line-height: 28px;
  color: #FFFFFF;
}
.bs-svc__note-desc { font-size: 13px; line-height: 24px; color: var(--bs-band-label); }
/* 右侧大图舞台：面板全部绝对定位，高度随左列拉伸 */
.bs-svc__stage {
  position: relative;
  border-radius: var(--bs-radius);
  overflow: hidden;
  background: var(--bs-surface);
  min-height: 420px;
}
.bs-svc__panel {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.bs-svc__panel.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0s linear 0s;
}
.bs-svc__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   6. 上门服务团队
   2026-09-27 由两列大图网格改为「手风琴图卡」（参考用户提供的场景卡形式）：
   一排 4 张竖卡，收起时只露序号 + 名称，悬停/点击的卡横向展开露出描述。
   高度 360 / 展开卡约 578×360（≈1.6:1），合照裁切控制在 17% 以内不切人。
   ========================================================================== */
.bs-team__acc {
  display: flex;
  gap: 14px;
  height: 360px;
}
.bs-team__acc-item {
  position: relative;
  flex: 1;
  min-width: 0;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: var(--bs-surface);
  transition: flex 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.bs-team__acc-item.is-active { flex: 3.2; }
.bs-team__acc-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 上浅下深可读性蒙版：整体不压死，底部加重保白字 */
.bs-team__acc-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(16, 42, 58, 0.12) 0%,
    rgba(16, 42, 58, 0.28) 55%,
    rgba(16, 42, 58, 0.66) 100%
  );
}
.bs-team__acc-no {
  position: absolute;
  top: 16px;
  left: 18px;
  z-index: 1;
  font-family: var(--font-num);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
}
.bs-team__acc-cap {
  position: absolute;
  left: 18px;
  right: 16px;
  bottom: 16px;
  z-index: 1;
  display: block;
}
.bs-team__acc-name {
  display: block;
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bs-team__acc-desc {
  display: block;
  font-size: 13px;
  line-height: 21px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 46ch;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease 0.12s, transform 0.45s ease 0.12s;
}
.bs-team__acc-item.is-active .bs-team__acc-desc {
  opacity: 1;
  transform: none;
}

/* #service 落在浅底区块（bs-sec--surface）上：列表项的激活/悬停底色改白，否则浅底叠浅底看不出激活态。2026-09-27 */
.bs-sec--surface .bs-svc__item:hover,
.bs-sec--surface .bs-svc__item.is-active { background: #FFFFFF; }

/* ==========================================================================
   7. 核心理念与愿景
   画布 3:145 ~ 3:166 —— 三张白卡（padding 34 / 内 gap 14）+ 愿景陈述条
   ========================================================================== */
.bs-val__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px;
}
.bs-val__card {
  background: #FFFFFF;
  border-radius: var(--bs-radius);
  padding: 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bs-val__no {
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 700;
  color: var(--bs-accent);
}
.bs-val__name {
  font-family: var(--font-title);
  font-size: 21px;
  font-weight: 700;
  line-height: 32px;
  color: var(--bs-ink);
}
.bs-val__desc { font-size: 15px; line-height: 28px; color: var(--bs-body); }

.bs-vision {
  margin-top: 44px;
  background: #FFFFFF;
  border-radius: var(--bs-radius);
  padding: 42px 46px;
  display: flex;
  gap: 26px;
  align-items: stretch;
}
.bs-vision__bar {
  flex: none;
  width: 4px;
  background: var(--bs-accent);
}
.bs-vision__body { min-width: 0; }
.bs-vision__quote {
  font-family: var(--font-title);
  font-size: 28px;
  font-weight: 700;
  line-height: 44px;
  color: var(--bs-ink);
}
.bs-vision__note {
  margin-top: 14px;
  font-size: 15px;
  line-height: 28px;
  color: var(--bs-body);
}

/* ==========================================================================
   8. 权威资质 · 单行循环轮播
   设计稿原为 3 列 × 2 行网格（卡宽 370 / 图高 259，比例 1.4286）
   站点 images/cert-01..06.jpg 为 1000×700，比例完全一致，直接复用
   现改为单行轮播：左右各留 56px 箭头沟槽，视口内仍完整显示 3 张
   循环由 js/cert.js 用「整组克隆 + transform 平移 + 到界瞬跳」实现
   ========================================================================== */
.bs-cert {
  position: relative;
  margin-top: 46px;
}
/* stage 只包住视口，不含下方圆点 —— 这样箭头 top:50% 刚好落在卡片图片区中心。
   沟槽必须加在 stage 上：箭头是 stage 的子元素、相对 stage 的 padding box 定位，
   加在外层 .bs-cert 上时 left:0 仍会压住照片（2026-09-28 用户反馈修复） */
.bs-cert__stage { position: relative; padding: 0 56px; }
.bs-cert__viewport { overflow: hidden; touch-action: pan-y; }
.bs-cert__viewport.is-dragging { cursor: grabbing; }
.bs-cert__track {
  display: flex;
  gap: 25px;
  will-change: transform;
}
.bs-cert__card {
  flex: 0 0 calc((100% - 50px) / 3); /* 3 列：2 个 25px 间隙 */
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bs-cert__media {
  aspect-ratio: 370 / 259;
  border-radius: var(--bs-radius);
  overflow: hidden;
  background: var(--bs-surface);
}
.bs-cert__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bs-cert__name {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  color: var(--bs-strong);
}

/* ---- 箭头：绝对定位于沟槽内，垂直对准卡片图片区中心 ---- */
.bs-cert__arrow {
  position: absolute;
  top: calc(50% - 18px); /* 卡片 = 图高 + 12gap + 24文字，故上移半行文字 */
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--bs-line);
  border-radius: 50%;
  background: #fff;
  color: var(--bs-ink);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(44, 110, 143, .12);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
  z-index: 2;
}
.bs-cert__arrow:hover {
  background: var(--bs-ink);
  border-color: var(--bs-ink);
  color: #fff;
}
.bs-cert__arrow:focus-visible { outline: 2px solid var(--bs-accent); outline-offset: 2px; }
.bs-cert__arrow:active { transform: translateY(-50%) scale(.94); }
.bs-cert__arrow--prev { left: 0; }
.bs-cert__arrow--next { right: 0; }
.bs-cert__arrow svg { width: 18px; height: 18px; }

/* ---- 圆点分页 ---- */
.bs-cert__dots { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.bs-cert__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #D5DCE5;
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}
.bs-cert__dot:hover { background: #B9C4D0; }
.bs-cert__dot.is-active { width: 22px; border-radius: 4px; background: var(--bs-accent); }
.bs-cert__dot:focus-visible { outline: 2px solid var(--bs-accent); outline-offset: 2px; }

/* ==========================================================================
   9. 结语 CTA
   画布 3:191 ~ 3:195 —— 居中，上下留白 88
   ========================================================================== */
.bs-final { text-align: center; }
.bs-final__title {
  font-family: var(--font-title);
  font-size: 38px;
  font-weight: 800;
  line-height: 52px;
  color: var(--bs-ink);
}
.bs-final__desc {
  margin-top: 22px;
  font-size: 16px;
  line-height: 28px;
  color: var(--bs-body);
}
.bs-final__actions { margin-top: 22px; }

/* ==========================================================================
   响应式
   设计稿只给了 1440 / 390 两态，这里以 900 为界切换（与站点 .main-nav 收合断点一致）
   ========================================================================== */

/* --- 中宽：两栏先改单列，栅格收一档，避免 1160 的内容宽被硬挤 --- */
@media (max-width: 1100px) {
  .bs-origin__row { flex-direction: column; align-items: stretch; gap: 40px; }
  .bs-origin__media { flex: none; width: 100%; aspect-ratio: 436 / 545; max-width: 436px; }
  .bs-hero__copy { max-width: 560px; }
  .bs-hero__title { font-size: 42px; line-height: 56px; }
}

/* --- 移动端版式：全部单列堆叠 --- */
@media (max-width: 900px) {
  /* Hero 换竖幅实拍图，遮罩由「左深右浅」改为「下深上浅」 */
  .bs-hero {
    height: clamp(430px, 123vw, 620px);
    min-height: 0;
    align-items: flex-end;
    background-image: url('../images/bs-hero-m.jpg');
    background-position: center 30%;
  }
  .bs-hero__veil {
    background: linear-gradient(
      to bottom,
      rgba(13, 41, 56, 0) 0%,
      rgba(13, 41, 56, 0.15) 40%,
      rgba(13, 41, 56, 0.60) 58%,
      rgba(13, 41, 56, 0.94) 100%
    );
  }
  .bs-hero__copy { max-width: none; padding-bottom: 34px; }
  .bs-hero__title { font-size: 30px; line-height: 42px; }
  .bs-hero__lead { margin-top: 14px; font-size: 14px; line-height: 24px; }
  .bs-hero__actions { margin-top: 20px; }

  .bs-sec { padding: 56px 0; }
  .bs-sec--cta { padding: 56px 0; }

  .bs-head { margin-bottom: 28px; }
  .bs-head__title { font-size: 26px; }
  .bs-head__desc { margin-top: 10px; font-size: 14px; line-height: 24px; }

  .bs-origin__row { gap: 26px; }
  .bs-origin__media { max-width: none; aspect-ratio: 350 / 438; }
  .bs-origin__year { font-size: 44px; }
  .bs-origin__place { font-size: 16px; }
  .bs-origin__subtitle { font-size: 19px; line-height: 30px; margin-bottom: 16px; }
  .bs-origin__text { font-size: 14px; line-height: 26px; }
  .bs-origin__text + .bs-origin__text { margin-top: 16px; }
  .bs-origin__en { font-size: 12px; }

  /* 数据带：两端分布 → 2×2 网格 */
  .bs-band { padding: 36px 0; }
  .bs-band__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 16px;
  }
  .bs-band__num { font-size: 28px; line-height: 30px; }
  .bs-band__label { margin-top: 6px; font-size: 12px; }

  /* 发展历程：桌面「年份 | 节点列 | 内容」→ 移动端「左侧 3px 竖线 + 年份置顶」 */
  .bs-tl { display: flex; flex-direction: column; gap: 26px; }
  .bs-tl__row {
    grid-template-columns: 3px minmax(0, 1fr);
    grid-template-areas:
      "rail year"
      "rail body";
    gap: 6px 14px;
    min-height: 0;
  }
  .bs-tl__rail {
    grid-area: rail;
    align-items: stretch;
  }
  .bs-tl__dot { display: none; }
  .bs-tl__rail::after { width: 3px; }
  .bs-tl__year {
    grid-area: year;
    font-size: 13px;
    line-height: 20px;
  }
  .bs-tl__body {
    grid-area: body;
    padding: 0;
  }
  .bs-tl__title { font-size: 15px; line-height: 24px; }
  .bs-tl__desc { margin-top: 6px; font-size: 13px; line-height: 22px; }

  /* 服务中心：两列联动 → 单列（列表在上、图在下，图 1:1 防止竖图裁掉门头） */
  .bs-svc { grid-template-columns: 1fr; gap: 24px; }
  .bs-svc__stage { min-height: 0; aspect-ratio: 1 / 1; }

  /* 手风琴：横向展开 → 纵向堆叠（收起 84px / 展开 300px） */
  .bs-team__acc { flex-direction: column; height: auto; gap: 12px; }
  .bs-team__acc-item { flex: none; height: 84px; transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
  /* flex:none 必须同样提到 is-active（0,2,0），否则被桌面 flex:3.2 压住、展开卡高度归零 */
  .bs-team__acc-item.is-active { flex: none; height: 300px; }

  .bs-val__grid { grid-template-columns: 1fr; gap: 16px; }
  .bs-val__card { padding: 24px; gap: 10px; }
  .bs-val__name { font-size: 19px; line-height: 30px; }
  .bs-val__desc { font-size: 14px; line-height: 26px; }

  .bs-vision { margin-top: 24px; padding: 28px 24px; gap: 20px; }
  .bs-vision__bar { width: 3px; }
  .bs-vision__quote { font-size: 20px; line-height: 32px; }
  .bs-vision__note { margin-top: 10px; font-size: 14px; line-height: 26px; }

  .bs-cert { margin-top: 28px; }
  .bs-cert__stage { padding: 0; } /* 撤掉箭头沟槽，视口占满（箭头已隐藏） */
  .bs-cert__track { gap: 16px; }
  .bs-cert__card { flex-basis: calc((100% - 16px) / 2); gap: 8px; } /* 平板起显示 2 张 */
  .bs-cert__arrow { display: none; } /* 触屏改手势滑动 + 圆点 */
  .bs-cert__name { font-size: 12px; line-height: 18px; }
  .bs-cert__dots { margin-top: 22px; }
  .bs-note { margin-top: 20px; font-size: 12px; line-height: 22px; }

  .bs-final__title { font-size: 24px; line-height: 36px; }
  .bs-final__desc { margin-top: 18px; font-size: 14px; line-height: 24px; }
  .bs-final__actions { margin-top: 18px; }
}

/* --- 手机：单张为主 + 右侧露出一点下一张，提示可滑动 --- */
@media (max-width: 560px) {
  .bs-cert__card { flex-basis: 84%; }
}

/* --- 窄屏：按钮组在很窄的机型上换行，不进溢出 --- */
@media (max-width: 380px) {
  .bs-hero__actions { flex-wrap: wrap; }
}