/* ============================================================
   卓信咨询官网 · 全站样式
   设计规范：
   - 主色取自品牌 LOGO 蓝色条带 #5B8FD9，纯色无渐变
   - 蓝色系共 5 阶：#1E3A5F / #2C5282 / #5B8FD9 / #8FB8E8 / #EDF4FC
   - 间距体系：8px 基数（8/16/24/32/48/64/96）
   ============================================================ */

:root {
  --blue-900: #1E3A5F;
  --blue-700: #2C5282;
  --blue-500: #5B8FD9;
  --blue-300: #8FB8E8;
  --blue-100: #EDF4FC;

  --ink: #1A1A1A;
  --ink-2: #4A4A4A;
  --ink-3: #8A8A8A;
  --line: #E8E8E8;
  --bg-soft: #F8FAFC;
  --white: #FFFFFF;

  --font-sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", sans-serif;
  --font-serif: "Songti SC", "SimSun", "Noto Serif SC", serif;

  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 96px;

  --radius: 8px;
  --radius-lg: 16px;
  --container: 1200px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--white);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-3);
}

/* ---------- 排版层级 ---------- */
h1, h2, h3, h4 { font-weight: 600; line-height: 1.35; color: var(--ink); }

.hero-title { font-size: var(--fs-hero); font-weight: 700; letter-spacing: 1px; }
.section-title { font-size: var(--fs-section); text-align: var(--title-align); }
.section-sub {
  text-align: var(--title-align);
  color: var(--ink-3);
  font-size: var(--fs-body);
  margin-top: var(--sp-2);
}
.card-title { font-size: var(--fs-card-title); }
.body-text { color: var(--ink-2); font-size: var(--fs-body); }

.accent { color: var(--blue-700); }

/* 章节头部：编号 + 标题 */
.section-head { margin-bottom: var(--section-head-mb); }
.section-head .kicker {
  display: block;
  text-align: var(--title-align);
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--blue-500);
  font-weight: 500;
  margin-bottom: var(--sp-2);
  text-transform: uppercase;
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-block;
  padding: 13px 36px;
  font-size: 15px;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .25s ease;
  letter-spacing: 1px;
}
.btn-primary {
  background: var(--blue-500);
  color: var(--white);
}
.btn-primary:hover { background: var(--blue-700); }
.btn-outline {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn-outline:hover { background: var(--ink); color: var(--white); }
.btn-light {
  background: var(--white);
  color: var(--blue-700);
}
.btn-light:hover { background: var(--blue-100); }

/* ---------- 区块 ---------- */
.section { padding: var(--section-pad-y) 0; }
.section-soft { background: var(--bg-soft); }

/* ---------- 顶部导航 ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 最小高度 + 上下留白：LOGO 调大调小时导航条自动跟随，不会被撑破也不会留大片空白 */
  min-height: var(--nav-h);
  padding: var(--nav-pad-y) 0;
}
/* display:block 避免 <a> 作为 inline 元素产生的基线间隙影响左边缘对齐 */
.nav-logo {
  display: block;
  margin-inline: var(--logo-nav-mx);   /* 水平位置：靠左 / 居中 / 靠右 */
  align-self: var(--logo-nav-v);       /* 垂直位置：上 / 中 / 下 */
}
.nav-logo img { height: calc(var(--logo-nav-h) * var(--logo-scale)); width: auto; }
.nav-menu { display: flex; align-items: center; gap: var(--nav-gap); }
.nav-menu a {
  font-size: var(--fs-nav);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.5px;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color .2s;
}
.nav-menu a:hover, .nav-menu a.active { color: var(--blue-700); }
.nav-menu a.active { border-bottom-color: var(--blue-500); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 24px; height: 2px;
  background: var(--ink);
  transition: all .25s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  padding: var(--sp-7) 0;
  background: var(--white);
}
.hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hero-gap);
}
.hero-copy { max-width: var(--hero-copy-w); }
.hero-eyebrow {
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--blue-500);
  font-weight: 500;
  margin-bottom: var(--sp-2);
}
.hero-title { margin-bottom: var(--sp-3); }
.hero-desc {
  font-size: 16px;
  color: var(--ink-2);
  margin-bottom: var(--sp-4);
  max-width: 480px;
}
.hero-actions { display: flex; gap: var(--sp-2); }

.hero-visual { flex-shrink: 0; }
.hero-visual svg { width: var(--hero-img-w); height: auto; }

/* ---------- 品牌视觉区（完整 LOGO 大图） ---------- */
.brand-stage {
  padding: var(--sp-7) var(--sp-3);
  background: var(--white);
  text-align: center;
}
.brand-stage img {
  max-width: calc(var(--brand-img-w) * var(--logo-scale));
  margin-inline: var(--brand-img-mx);
}
.brand-stage .brand-caption {
  margin-top: var(--sp-3);
  color: var(--ink-3);
  font-size: 14px;
  letter-spacing: 2px;
}

/* ---------- 服务卡片 ---------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--card-pad);
  text-align: var(--card-align);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display: flex;
  flex-direction: column;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--blue-300);
  box-shadow: 0 12px 32px rgba(30,58,95,.08);
}
.card .icon-box {
  width: 52px; height: 52px;
  border-radius: var(--radius);
  background: var(--card-accent-bg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-2);
  font-size: 24px;
  color: var(--card-accent-fg);
}
/* 线性 SVG 图标：白底 + 近黑细框（卢老师 2026-08-30 定稿）。
   序号卡 01-06 和价值观汉字卡仍沿用上面的蓝底白字，两种风格刻意区分。 */
.card .icon-box.icon-line {
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  border-radius: var(--icon-box-radius);
  background: var(--icon-box-bg);
  border: var(--icon-border-w) solid var(--icon-border);
}
.card .icon-box.icon-line svg {
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
  color: var(--icon-stroke);
}
.card .card-title { margin-bottom: var(--sp-1); }
.card .body-text { font-size: 14px; }
.card .card-tags {
  margin-top: auto;
  padding-top: var(--sp-2);
  display: flex; flex-wrap: wrap; gap: 8px;
}
.card .tag {
  font-size: 12px;
  color: var(--card-accent-fg);
  background: var(--card-accent-bg);
  padding: 3px 10px;
  border-radius: 999px;
}

/* ---------- 承诺条 ---------- */
.promise-strip {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-4);
  font-size: 14px; color: var(--ink-2);
}
.promise-strip .pi { color: var(--blue-500); font-weight: 700; margin-right: 8px; }

/* ---------- 数据条 ---------- */
.stats-band {
  background: var(--blue-900);
  color: var(--white);
  padding: var(--band-pad-y) 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  text-align: center;
}
.stat-num {
  font-size: var(--fs-stat);
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
}
.stat-label { font-size: 14px; color: var(--white); font-weight: 500; margin-top: 6px; opacity: .9; }

/* ---------- 团队卡 ---------- */
.member-photo {
  width: 100%;
  aspect-ratio: var(--m-ratio, var(--team-photo-ratio));
  background: var(--team-photo-bg);
  border-radius: var(--team-photo-radius);
  margin-bottom: var(--team-photo-gap);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-700);
  font-size: 15px;
  overflow: hidden;
}
.member-photo img {
  /* flex:0 0 auto 必须有：否则放大时会被 flex 容器压缩回原尺寸，缩放滑块失效
     max-width:none 必须有：全局 img{max-width:100%} 会把放大后的照片卡回原宽 */
  flex: 0 0 auto;
  max-width: none;
  width: calc(100% * var(--m-zoom, var(--team-photo-zoom)));
  height: calc(100% * var(--m-zoom, var(--team-photo-zoom)));
  object-fit: cover;
  object-position: 50% var(--m-y, var(--team-photo-y));
}

/* ---------- 团队照片 · 逐人微调 ----------
   每位老师可单独覆盖全局参数：--m-<拼音>-ratio / -zoom / -y
   这些变量由视觉微调台写在 :root 上；没设置时自动回落到全局值，互不影响。 */
.member-photo[data-m="moshijie"] {
  --m-ratio: var(--m-moshijie-ratio, var(--team-photo-ratio));
  --m-zoom:  var(--m-moshijie-zoom,  var(--team-photo-zoom));
  --m-y:     var(--m-moshijie-y,     var(--team-photo-y));
}
.member-photo[data-m="luzhongxian"] {
  --m-ratio: var(--m-luzhongxian-ratio, var(--team-photo-ratio));
  --m-zoom:  var(--m-luzhongxian-zoom,  var(--team-photo-zoom));
  --m-y:     var(--m-luzhongxian-y,     var(--team-photo-y));
}
.member-photo[data-m="zhangzhongchun"] {
  --m-ratio: var(--m-zhangzhongchun-ratio, var(--team-photo-ratio));
  --m-zoom:  var(--m-zhangzhongchun-zoom,  var(--team-photo-zoom));
  --m-y:     var(--m-zhangzhongchun-y,     var(--team-photo-y));
}
.member-photo[data-m="chenlide"] {
  --m-ratio: var(--m-chenlide-ratio, var(--team-photo-ratio));
  --m-zoom:  var(--m-chenlide-zoom,  var(--team-photo-zoom));
  --m-y:     var(--m-chenlide-y,     var(--team-photo-y));
}
.member-photo[data-m="bihailong"] {
  --m-ratio: var(--m-bihailong-ratio, var(--team-photo-ratio));
  --m-zoom:  var(--m-bihailong-zoom,  var(--team-photo-zoom));
  --m-y:     var(--m-bihailong-y,     var(--team-photo-y));
}
.member-photo[data-m="wuchunrong"] {
  --m-ratio: var(--m-wuchunrong-ratio, var(--team-photo-ratio));
  --m-zoom:  var(--m-wuchunrong-zoom,  var(--team-photo-zoom));
  --m-y:     var(--m-wuchunrong-y,     var(--team-photo-y));
}
.member-photo[data-m="zhouchangxia"] {
  --m-ratio: var(--m-zhouchangxia-ratio, var(--team-photo-ratio));
  --m-zoom:  var(--m-zhouchangxia-zoom,  var(--team-photo-zoom));
  --m-y:     var(--m-zhouchangxia-y,     var(--team-photo-y));
}
.member-photo[data-m="hechuheng"] {
  --m-ratio: var(--m-hechuheng-ratio, var(--team-photo-ratio));
  --m-zoom:  var(--m-hechuheng-zoom,  var(--team-photo-zoom));
  --m-y:     var(--m-hechuheng-y,     var(--team-photo-y));
}
.member-photo[data-m="zhangwanying"] {
  --m-ratio: var(--m-zhangwanying-ratio, var(--team-photo-ratio));
  --m-zoom:  var(--m-zhangwanying-zoom,  var(--team-photo-zoom));
  --m-y:     var(--m-zhangwanying-y,     var(--team-photo-y));
}
.member-photo[data-m="lijunliang"] {
  --m-ratio: var(--m-lijunliang-ratio, var(--team-photo-ratio));
  --m-zoom:  var(--m-lijunliang-zoom,  var(--team-photo-zoom));
  --m-y:     var(--m-lijunliang-y,     var(--team-photo-y));
}
/* 照片未到位时的占位：姓氏首字 + 角标，保持"待替换"标注 */
.member-photo { position: relative; }
.member-photo .mp-mono {
  font-size: 60px; font-weight: 600;
  color: var(--blue-300); letter-spacing: 2px;
}
.member-photo .mp-tag {
  position: absolute; right: 10px; bottom: 10px;
  font-size: 11px; color: var(--ink-3);
  background: rgba(255,255,255,.92);
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line);
}
.member-role { font-size: 13px; color: var(--blue-700); margin-top: 2px; }
.member-bio { font-size: 13px; color: var(--ink-3); margin-top: 6px; }

/* ---------- 时间轴 ---------- */
.timeline { position: relative; max-width: 760px; margin: 0 auto; }
.timeline::before {
  content: "";
  position: absolute;
  left: 8px; top: 4px; bottom: 4px;
  width: 2px;
  background: var(--blue-100);
}
.tl-item { position: relative; padding-left: var(--sp-5); margin-bottom: var(--sp-4); }
.tl-item::before {
  content: "";
  position: absolute;
  left: 2px; top: 8px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--blue-500);
}
.tl-year { font-weight: 700; color: var(--blue-700); font-size: 15px; }
.tl-text { color: var(--ink-2); font-size: 15px; }

/* ---------- 步骤流程 ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  counter-reset: step;
}
.steps.steps-6 { grid-template-columns: repeat(3, 1fr); }
.step {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-3);
  counter-increment: step;
}
.step::before {
  content: "0" counter(step);
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: var(--blue-300);
  margin-bottom: var(--sp-1);
}
.step .card-title { font-size: 17px; margin-bottom: 6px; }
.step .body-text { font-size: 14px; }

/* ---------- 案例 ---------- */
.case-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.case-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(30,58,95,.08);
}
.case-cover {
  height: 180px;
  background: var(--blue-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-700);
  font-size: 15px;
  letter-spacing: 2px;
}
.case-body { padding: var(--sp-3); }
.case-industry {
  font-size: 12px;
  color: var(--card-accent-fg);
  background: var(--card-accent-bg);
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  margin-bottom: var(--sp-1);
}
.case-result {
  border-left: 3px solid var(--blue-500);
  padding-left: var(--sp-2);
  margin-top: var(--sp-2);
  color: var(--ink-2);
  font-size: 14px;
}

/* ---------- 表单 ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.form-item label {
  display: block;
  font-size: 14px;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.form-item input, .form-item textarea, .form-item select {
  width: 100%;
  padding: 13px var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 15px;
  font-family: inherit;
  transition: border-color .2s;
  background: var(--white);
}
.form-item input:focus, .form-item textarea:focus {
  outline: none;
  border-color: var(--blue-500);
}
.form-item.full { grid-column: 1 / -1; }

/* ---------- CTA ---------- */
.cta-band {
  background: var(--blue-900);
  color: var(--white);
  text-align: center;
  padding: var(--sp-6) var(--sp-3);
}
.cta-band h2 { color: var(--white); font-size: 30px; margin-bottom: var(--sp-2); font-weight: 700; }
.cta-band p { color: var(--white); opacity: 1; font-weight: 500; margin-bottom: var(--sp-4); }

/* ---------- 页脚 ---------- */
.site-footer {
  background: var(--white);
  color: var(--ink-2);
  border-top: 1px solid var(--line);
  padding: var(--footer-pad-y) 0 var(--sp-4);
  font-size: 14px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.site-footer img {
  height: calc(var(--logo-footer-h) * var(--logo-scale));
  margin-inline: var(--logo-footer-mx);
  margin-bottom: var(--sp-2);
}
.footer-title { color: var(--ink); font-size: 15px; margin-bottom: var(--sp-2); font-weight: 600; }
.site-footer a { color: var(--ink-2); transition: color .2s; }
.site-footer a:hover { color: var(--blue-700); }
.footer-links li { margin-bottom: 10px; }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-3);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-1);
  font-size: 13px;
  color: var(--ink-3);
}

/* ---------- 悬浮客服 ---------- */
.float-widget {
  position: fixed;
  right: var(--float-offset);
  bottom: var(--float-offset);
  z-index: 200;
}
.float-toggle {
  width: var(--float-size); height: var(--float-size);
  border-radius: 50%;
  background: var(--blue-500);
  color: var(--white);
  border: none;
  cursor: pointer;
  font-size: 24px;
  box-shadow: 0 8px 24px rgba(30,58,95,.25);
  transition: background .2s, transform .2s;
  display: flex; align-items: center; justify-content: center;
}
.float-toggle:hover { background: var(--blue-700); transform: scale(1.06); }
.float-panel {
  position: absolute;
  right: 0;
  bottom: 68px;
  width: 280px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(30,58,95,.18);
  padding: var(--sp-3);
  display: none;
}
.float-panel.open { display: block; }
.float-panel h4 {
  font-size: 15px;
  margin-bottom: var(--sp-2);
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--line);
}
.float-item {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 10px;
  border-radius: var(--radius);
  color: var(--ink-2);
  font-size: 14px;
  transition: background .2s;
  cursor: pointer;
}
.float-item:hover { background: var(--blue-100); color: var(--blue-700); }
.float-qr {
  width: 140px; height: 140px;
  margin: var(--sp-1) auto 0;
  background: var(--blue-100);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-700);
  font-size: 13px;
  text-align: center;
  line-height: 1.5;
}
.float-note {
  text-align: center;
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 8px;
}

/* ---------- 占位标注 ---------- */
.placeholder-note {
  display: inline-block;
  font-size: 12px;
  color: #B8860B;
  background: #FFF8E6;
  border: 1px dashed #E0C060;
  padding: 2px 10px;
  border-radius: 999px;
  margin-top: var(--sp-1);
}

/* ---------- 滚动入场动画（克制） ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .reveal.visible { opacity: 1; transform: none; }
}

/* ---------- 页面头部（内页 Hero） ---------- */
.page-hero {
  background: var(--blue-100);
  padding: var(--sp-6) 0;
  text-align: center;
  border-bottom: 1px solid #DDE8F5;
}
.page-hero h1 { font-size: var(--fs-page-title); margin-bottom: var(--sp-1); color: var(--blue-900); }
.page-hero h1::after {
  content: "";
  display: block;
  width: 48px; height: 3px;
  background: var(--blue-500);
  border-radius: 2px;
  margin: var(--sp-2) auto 0;
}
.page-hero p { color: var(--ink-2); font-size: 15px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .grid-4, .steps, .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .steps.steps-6 { grid-template-columns: repeat(2, 1fr); }
  .hero-title { font-size: 36px; }
  /* 窄屏下给导航 LOGO 设上限，避免大 LOGO + 菜单挤爆一行（min 让它跟随参数但不超过上限） */
  .nav-logo img { height: min(calc(var(--logo-nav-h) * var(--logo-scale)), 120px); }
}

@media (max-width: 768px) {
  .nav-menu {
    display: none;
    position: absolute;
    top: 76px; left: 0; right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    padding: var(--sp-2) var(--sp-3);
    gap: var(--sp-1);
  }
  .nav-menu.open { display: flex; }
  .nav-menu a { padding: 12px 4px; border-bottom: none; }
  .nav-toggle { display: flex; }
  .nav-logo img { height: min(calc(var(--logo-nav-h) * var(--logo-scale)), 52px); }
  .nav-bar { min-height: 76px; padding: 8px 0; }

  .hero-inner { flex-direction: column; text-align: center; }
  .hero-copy { max-width: 100%; }
  .hero-actions { justify-content: center; }
  .hero-visual { width: 100%; max-width: 420px; }
  /* 2026-09-10 修：父容器已改成 100%，但 SVG 仍锁定 --hero-img-w(520px)，
     在窄屏会撑破容器导致整页横向可拖动。改为随父容器等比缩放（viewBox 保持比例） */
  .hero-visual svg { width: 100%; }

  .grid-3 { grid-template-columns: 1fr; }
  .section { padding: var(--sp-6) 0; }
  .section-title { font-size: 26px; }
  .hero-title { font-size: 30px; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .brand-stage img { max-width: 90%; }
}

@media (max-width: 480px) {
  .grid-4, .steps, .stats-grid { grid-template-columns: 1fr; }
  .steps.steps-6 { grid-template-columns: 1fr; }
  .stat-num { font-size: 32px; }
  .promise-strip { gap: var(--sp-2); font-size: 13px; justify-content: flex-start; }
}

/* ============================================================
   悬停微动效 · 2026-09-02 卢老师指定参考 eshare.io
   ------------------------------------------------------------
   学它的四个动作，但换成卓信的语言：
     1. 卡片轻微上浮 6px          —— 幅度小才是"微"动，大了就浮夸
     2. 阴影同步下沉+放大+略加深  —— 营造"抬离纸面"的层次
     3. 顶部品牌色细条淡入        —— eshare 用渐变，卓信规范禁止渐变，改纯色深蓝
     4. 内部图片/图标缓缓推近     —— 照片 0.6s 比卡片 0.4s 慢，层次才分明
   只动 transform / box-shadow / opacity，不触发重排，滚动不卡。
   整块包在 prefers-reduced-motion 里：系统开了"减弱动效"就完全静止。
   参数见 tokens.css「悬停微动效」，视觉微调台可实时拖，拖到 0 即关闭单项。
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* 定位基准 + 圆角裁剪（细条的两个上角才不会戳出圆角外） */
  .card, .case-card { position: relative; overflow: hidden; }

  /* 过渡写在这里而不是 :hover 里，鼠标移开时才同样平滑地"落回" */
  .card, .case-card {
    transition:
      transform var(--hover-dur) cubic-bezier(.22,.61,.36,1),
      box-shadow var(--hover-dur) cubic-bezier(.22,.61,.36,1),
      border-color var(--hover-dur) ease;
  }

  /* 顶部品牌色细条：绝对定位不占布局，平时透明，悬停淡入 */
  .card::before, .case-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: var(--hover-bar-h);
    background: var(--hover-bar-color);
    opacity: 0;
    transition: opacity var(--hover-dur) ease;
    z-index: 1;
    pointer-events: none;   /* 别挡住卡片上的链接和点击 */
  }
  .card:hover::before, .case-card:hover::before { opacity: 1; }

  /* 卡片上浮 + 阴影抬离（覆盖 style.css 上方原有的 -4px / .25s 版本） */
  .card:hover, .case-card:hover {
    transform: translateY(calc(var(--hover-lift) * -1));
    box-shadow: 0 var(--hover-shadow-y) var(--hover-shadow-blur)
                rgba(30, 58, 95, var(--hover-shadow-a));
    border-color: var(--blue-300);
  }

  /* 卡片内图标：跟着微微放大一点，呼应整体的"抬起来" */
  .card .icon-box { transition: transform var(--hover-dur) cubic-bezier(.22,.61,.36,1); }
  .card:hover .icon-box { transform: scale(var(--hover-icon-scale)); }

  /* 团队照片：悬停时在框内缓缓推近，像镜头轻微拉近。
     用 transform:scale 而非改 width——不触发重排，也不影响已有的
     逐人 --m-xxx-zoom 尺寸参数（两者相乘，各管各的）。
     .member-photo 自身带 overflow:hidden，推近的部分被裁在框内。 */
  .member-photo img { transition: transform var(--photo-hover-dur) cubic-bezier(.22,.61,.36,1); }
  .card:hover .member-photo img { transform: scale(var(--photo-hover-zoom)); }

  /* 数据条：鼠标经过时数字微微放大，学 eshare 的 stat-number scale(1.1)。
     注意容器是 .stats-grid > .reveal，没有 .stat 这个类名，别写错选择器。
     这里只放大数字、不让整条上浮——数据条没有卡片背景，浮起来会显得飘。 */
  .stat-num { transition: transform var(--hover-dur) cubic-bezier(.22,.61,.36,1); }
  .stats-grid > *:hover .stat-num { transform: scale(var(--hover-icon-scale)); }

  /* 鼠标移出后照片要平滑退回，所以过渡写在基础状态上（已在上面声明） */
}

/* ==========================================================================
   集团背书横幅（2026-09-10 新增）
   --------------------------------------------------------------------------
   设计说明：整张品牌物料【原样贴图】嵌入，不拆不重建——这是卢老师自己定稿的
   宣传物料，贴原图保证 100% 还原，避免重建时歪掉设计。
   原图 assets/brand/bixin-banner.png：1440×483（源图 1624×545 等比缩小）。

   为什么下面还要单独放二维码：
   原图里的二维码只有约 84px，等比缩到手机屏上不足 20px，扫不出来。
   所以把码单独裁出放大显示（assets/brand/qr-wecom.png，已用 opencv 校验含有效码）。

   ⚠️ 注意：横幅是 1624 宽的横向物料，手机端等比缩小后图内小字会变很小。
   若卢老师要更好的手机效果，需另做一版竖版素材。
   ========================================================================== */
.brand-band { padding: 4px 0 8px; }

.brand-band-card {
  background: #fff;
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.brand-band-img {
  display: block;
  width: 100%;
  height: auto;
}

/* 扫码 + 电话行动条 */
.brand-contact {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 20px 24px;
  background: var(--blue-100);
  border-radius: var(--radius-lg);
}

.bc-qr {
  flex: 0 0 auto;
  width: 104px;
  height: 104px;
  padding: 6px;
  background: #fff;
  border-radius: 10px;
}

.bc-qr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bc-txt { flex: 1 1 260px; min-width: 240px; }

.bc-txt h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--blue-900);
  margin-bottom: 4px;
}

.bc-txt p {
  font-size: 14px;
  color: var(--ink-2);
  margin-bottom: 10px;
}

.bc-tel {
  display: inline-block;
  font-size: 17px;
  font-weight: 600;
  color: var(--blue-700);
  text-decoration: none;
  letter-spacing: .5px;
}

/* 悬停微动效（写在「悬停微动效」块之后，否则会被 .reveal.visible 覆盖） */
@media (prefers-reduced-motion: no-preference) {
  .brand-band-card {
    transition: transform var(--hover-dur) cubic-bezier(.22, .61, .36, 1),
                box-shadow var(--hover-dur) ease;
  }
  .brand-band-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(30, 58, 95, .13);
  }
  .bc-tel { transition: color .25s ease; }
  .bc-tel:hover { color: var(--blue-900); }
  .bc-qr { transition: transform var(--hover-dur) cubic-bezier(.22, .61, .36, 1); }
  .bc-qr:hover { transform: translateY(-3px); }
}

@media (max-width: 768px) {
  .brand-contact { padding: 18px; gap: 16px; }
  .bc-txt h3 { font-size: 16px; }
  .bc-txt p { font-size: 13px; }
}

/* ---------- 联系方式：二维码 / 电话链接（2026-09-17 回填真实信息） ---------- */
.contact-qr {
  width: 132px;
  height: 132px;
  display: block;
  margin: 4px auto 0;
  border-radius: var(--radius);
  background: var(--white);
}

.contact-link {
  color: var(--blue-700);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .5px;
}

/* 悬浮窗二维码：原来是占位文字，现换成真实二维码图片 */
.float-qr {
  background: var(--white);
  border: 1px solid var(--line);
}
.float-qr img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: var(--radius);
}

@media (prefers-reduced-motion: no-preference) {
  .contact-link { transition: color .25s ease; }
  .contact-link:hover { color: var(--blue-900); }
  .contact-qr { transition: transform var(--hover-dur) cubic-bezier(.22, .61, .36, 1); }
  .contact-qr:hover { transform: translateY(-3px); }
}