/* ======================================================================
   AI督学帮 · 移动端精简版官网
   ----------------------------------------------------------------------
   与 PC 端（site.css）完全独立的一套样式，类名统一 .m- 前缀。
   复用 site.css 的设计令牌（:root 变量），因此视觉语言一致，
   但排版按「一屏一模块、短句优先」重新设计。

   关键差异（不是简单压缩）：
   - 抽屉式汉堡菜单，而非下拉面板
   - 底部固定双按钮操作条，滚动时常驻
   - 闭环流程改为纵向时间轴，横向在手机上不可读
   - 点击区最小 44px（iOS HIG / Material 触控标准）
   - 适配 iPhone 底部安全区（刘海屏 / 灵动岛）
   ====================================================================== */

/* ---------- 基础重置（移动端独立） ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 顶部固定导航高度补偿，锚点滚动不被遮挡 */
  scroll-padding-top: 58px;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.7;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

/* ---------- 布局容器 ---------- */
.m-wrap {
  padding: 0 20px;
  max-width: 640px;
  margin: 0 auto;
}
.m-sec {
  padding: 52px 0;
}
.m-sec--tint { background: var(--grad-paper); }
.m-sec--deep {
  background: var(--grad-jade-deep);
  color: #fff;
}

/* ---------- 模块标题 ---------- */
.m-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--jade-600);
  margin-bottom: 10px;
}
.m-sec--deep .m-eyebrow { color: var(--jade-300); }

.m-title {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.m-title em {
  font-style: normal;
  background: var(--grad-ai);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.m-sec--deep .m-title { color: #fff; }

.m-desc {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink-2);
}
.m-sec--deep .m-desc { color: rgba(255, 255, 255, .68); }

/* ======================================================================
   顶部导航（固定 + 抽屉）
   ====================================================================== */
.m-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  background: rgba(252, 251, 248, .88);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d2), background var(--d2);
  padding-top: env(safe-area-inset-top);
}
.m-nav.is-scrolled {
  border-bottom-color: var(--line);
  background: rgba(252, 251, 248, .96);
}
.m-nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
}
.m-logo {
  display: flex;
  align-items: center;
  gap: 9px;
}
/* logo-dxb 为 4.57:1 超宽横幅构图。
   必须 height 定高 + width:auto，固定方形尺寸会把三个色块压扁、字距挤死。 */
.m-logo img {
  height: 26px;
  width: auto;
}
/* logo 下方的品牌标语 */
.m-logo-mark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.m-logo-tag {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .03em;
  color: var(--ink-2);
  white-space: nowrap;
}
.m-logo b {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* 汉堡按钮 —— 44px 触控区 */
.m-burger {
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border: none;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.m-burger span {
  display: block;
  width: 21px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform var(--d3) var(--ease-out), opacity var(--d2);
}
.m-burger.is-on span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.m-burger.is-on span:nth-child(2) { opacity: 0; }
.m-burger.is-on span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 抽屉 */
.m-drawer {
  position: fixed;
  top: 54px; left: 0; right: 0;
  z-index: 89;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(12, 58, 50, .14);
  padding: 8px 0 20px;
  transform: translateY(-14px);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--d3) var(--ease-out),
              opacity var(--d2) var(--ease-out),
              visibility var(--d3);
  max-height: calc(100vh - 54px);
  overflow-y: auto;
}
.m-drawer.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.m-drawer a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line-2);
}
.m-drawer a:last-child { border-bottom: none; }
.m-drawer a::after {
  content: '';
  width: 7px; height: 7px;
  border-top: 1.8px solid var(--ink-4);
  border-right: 1.8px solid var(--ink-4);
  transform: rotate(45deg);
}
.m-drawer a:active { background: var(--card-2); }

/* 遮罩 */
.m-mask {
  position: fixed;
  inset: 0;
  z-index: 88;
  background: rgba(10, 36, 32, .34);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d3), visibility var(--d3);
}
.m-mask.is-open { opacity: 1; visibility: visible; }

/* 给固定导航让位 */
.m-body { padding-top: calc(54px + env(safe-area-inset-top)); }

/* ======================================================================
   按钮
   ====================================================================== */
.m-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 50px;
  padding: 0 20px;
  border: none;
  border-radius: var(--r-full);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .02em;
  transition: transform var(--d2) var(--ease-out), opacity var(--d2);
}
.m-btn:active { transform: scale(.975); }
.m-btn--primary {
  background: var(--grad-jade);
  color: #fff;
  box-shadow: 0 6px 18px rgba(23, 128, 109, .28);
}
.m-btn--ghost {
  background: var(--card);
  color: var(--jade-700);
  border: 1.5px solid var(--jade-200);
}
.m-btn--light {
  background: #fff;
  color: var(--jade-700);
}
.m-btn--outline-light {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .42);
}

/* ======================================================================
   模块 1· Hero（手机首屏，极简）
   ====================================================================== */
.m-hero {
  position: relative;
  padding: 44px 0 40px;
  background:
    radial-gradient(120% 82% at 84% 6%, rgba(45, 140, 147, .13) 0%, transparent 58%),
    radial-gradient(90% 62% at 6% 96%, rgba(222, 148, 64, .10) 0%, transparent 60%),
    var(--grad-paper);
  overflow: hidden;
}
.m-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 11px;
  border-radius: var(--r-full);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.m-hero-badge i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--jade-500);
  box-shadow: 0 0 0 3px rgba(31, 152, 132, .16);
}
.m-hero h1 {
  margin-top: 20px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -0.035em;
}
.m-hero h1 em {
  font-style: normal;
  background: var(--grad-ai);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* 副标题：两行短句，用/ 分隔的关键标签组 */
.m-hero-tags {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.m-hero-tags span {
  padding: 6px 12px;
  border-radius: var(--r-full);
  background: var(--card);
  border: 1px solid var(--jade-100);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--jade-700);
}
.m-hero-sub {
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--ink-2);
}
.m-hero-acts {
  margin-top: 26px;
  display: grid;
  gap: 11px;
}
.m-hero-note {
  margin-top: 18px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--ink-3);
  text-align: center;
}

/* ======================================================================
   模块 2 · 痛点（一行一条，短句）
   ====================================================================== */
.m-pain {
  display: grid;
  gap: 10px;
}
.m-pain li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 15px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-2);
}
.m-pain li b {
  flex-shrink: 0;
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: 7px;
  background: var(--clay-50);
  color: var(--clay);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ======================================================================
   模块 3 · 四大核心能力
   ====================================================================== */
.m-cap { display: grid; gap: 16px; }

.m-cap-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 20px 20px;
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.m-cap-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--cap-accent, var(--jade-600));
  opacity: .9;
}
.m-cap-1 { --cap-accent: var(--jade-600); --cap-soft: var(--jade-50);  --cap-ink: var(--jade-700); }
.m-cap-2 { --cap-accent: var(--sky);      --cap-soft: var(--sky-50);   --cap-ink: var(--sky); }
.m-cap-3 { --cap-accent: var(--plum);     --cap-soft: var(--plum-50);  --cap-ink: var(--plum); }
.m-cap-4 { --cap-accent: var(--amber-600);--cap-soft: var(--amber-50); --cap-ink: var(--amber-600); }

.m-cap-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.m-cap-ic {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 13px;
  background: var(--cap-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.m-cap-ic img { width: 36px; height: 36px; }
.m-cap-no {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-4);
  line-height: 1;
  margin-bottom: 6px;
}
.m-cap-top h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.m-cap-slogan {
  font-size: 15px;
  font-weight: 700;
  color: var(--cap-ink);
  padding: 11px 14px;
  background: var(--cap-soft);
  border-radius: var(--r-sm);
  margin-bottom: 15px;
  line-height: 1.5;
}
/* 能力清单：勾选样式，比圆点更醒目 */
.m-cap-list { display: grid; gap: 9px; margin-bottom: 14px; }
.m-cap-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  line-height: 1.62;
  color: var(--ink-2);
}
.m-cap-list li::before {
  content: '';
  flex-shrink: 0;
  width: 16px; height: 16px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--cap-soft);
  border: 1.5px solid var(--cap-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317806D' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 10px 10px;
  background-position: center;
  background-repeat: no-repeat;
}
.m-cap-desc {
  font-size: 14px;
  line-height: 1.78;
  color: var(--ink-2);
  padding-top: 13px;
  border-top: 1px dashed var(--line-2);
}

/* ======================================================================
   模块 4 · 成长闭环（纵向时间轴）
   横向 8 步在手机上不可读，改为纵向
   ====================================================================== */
.m-flow { margin-top: 30px; position: relative; }
.m-flow li {
  position: relative;
  padding: 0 0 22px 40px;
  min-height: 44px;
}
.m-flow li:last-child { padding-bottom: 0; }
/* 竖线 */
.m-flow li::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 26px;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, .2);
}
.m-flow li:last-child::before { display: none; }
/* 节点 */
.m-flow li::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  border: 2px solid var(--jade-300);
}
.m-flow-no {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--jade-300);
  margin-bottom: 3px;
}
.m-flow-txt {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  color: #fff;
}
.m-flow-sum {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  text-align: center;
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .06em;
}

/* ======================================================================
   模块 5 · 客户案例
   ====================================================================== */
.m-case {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  box-shadow: var(--sh-1);
}
.m-case-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 20px;
}
.m-case-logo {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 13px;
  background: var(--grad-jade-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--jade-700);
}
.m-case-org b {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
}
.m-case-org span {
  display: block;
  font-size: 12px;
  color: var(--ink-4);
  margin-top: 3px;
}
.m-case-blk + .m-case-blk { margin-top: 20px; }
.m-case-lbl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 9px;
}
.m-case-lbl--pain { color: var(--clay); }
.m-case-lbl--gain { color: var(--jade-600); }
.m-case-blk p {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink-2);
}
.m-case-btn {
  margin-top: 20px;
}

/* ======================================================================
   模块 6 · 快速上线
   ====================================================================== */
.m-steps { display: grid; gap: 12px; counter-reset: mstep; }
.m-steps li {
  counter-increment: mstep;
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 48px;
  padding: 13px 16px 13px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
}
.m-steps li::before {
  content: counter(mstep);
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--grad-jade-light);
  color: var(--jade-700);
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ======================================================================
   模块 7 · 数据安全
   ====================================================================== */
.m-safe { display: grid; gap: 10px; }
.m-safe li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 15px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--ink-2);
}
.m-safe li b {
  flex-shrink: 0;
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: 7px;
  background: var(--jade-50);
  color: var(--jade-600);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ======================================================================
   模块 8 · 底部 CTA
   ====================================================================== */
.m-cta {
  padding: 44px 0 48px;
  background:
    radial-gradient(110% 70% at 82% 0%, rgba(255, 255, 255, .16) 0%, transparent 60%),
    var(--grad-jade-deep);
  color: #fff;
  text-align: center;
}
.m-cta h2 {
  font-size: 23px;
  font-weight: 800;
  line-height: 1.38;
  letter-spacing: -0.02em;
  color: #fff;
}
.m-cta p {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .72);
  padding: 0 4px;
}
.m-cta-acts {
  margin-top: 26px;
  display: grid;
  gap: 11px;
}

/* ======================================================================
   模块 9 · FAQ
   ====================================================================== */
.m-faq { display: grid; gap: 10px; }
.m-faq-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.m-faq-q {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: none;
  background: none;
  font-size: 14.8px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  line-height: 1.55;
}
.m-faq-q .arr {
  flex-shrink: 0;
  font-size: 19px;
  font-weight: 400;
  color: var(--jade-600);
  transition: transform var(--d3) var(--ease-out);
}
.m-faq-item.is-open .arr { transform: rotate(45deg); }
.m-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--d3) var(--ease-out);
}
.m-faq-a p {
  padding: 0 16px 16px;
  font-size: 14px;
  line-height: 1.78;
  color: var(--ink-2);
}

/* ======================================================================
   页脚
   ====================================================================== */
.m-footer {
  background: var(--jade-900);
  color: rgba(255, 255, 255, .62);
  padding: 34px 0 calc(96px + env(safe-area-inset-bottom));
  font-size: 13.5px;
}
.m-footer-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}
.m-footer-brand img { height: 30px; width: auto; }
.m-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 12px;
}
.m-footer-links a {
  color: rgba(255, 255, 255, .62);
  transition: color var(--d2);
}
.m-footer-links a:active { color: #fff; }
.m-footer-contact {
  line-height: 1.9;
  margin-bottom: 14px;
}
.m-footer-beian {
  color: rgba(255, 255, 255, .42);
  transition: color var(--d2);
}
.m-footer-beian:active { color: rgba(255, 255, 255, .8); }
.m-footer-copy {
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .38);
  font-size: 12.5px;
}

/* ======================================================================
   底部固定操作条
   一屏一模块的移动端，必须让转化入口常驻拇指可达区
   ====================================================================== */
.m-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 92;
  display: flex;
  gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(252, 251, 248, .94);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform var(--d3) var(--ease-out);
}
.m-bar.is-show { transform: translateY(0); }
.m-bar .m-btn { flex: 1; min-height: 46px; font-size: 15px; }

/* ======================================================================
   滚动入场
   ====================================================================== */
.m-rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}
.m-rv.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .m-rv { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; }
}

/* ======================================================================
   大屏兜底
   移动版被PC 打开时限制阅读宽度，避免内容在大屏上拉得过宽
   ====================================================================== */
@media (min-width: 700px) {
  .m-bar { max-width: 640px; left: 50%; transform: translate(-50%, 110%); }
  .m-bar.is-show { transform: translate(-50%, 0); }
}

/* ======================================================================
   移动端动画 V2 —— 分层错峰 + 触觉反馈
   ----------------------------------------------------------------------
   修复：原先 m-cap-card 整块淡入，内部图标/标题/清单/简介零层次，
   看起来像「内容突然出现」。这里让内部元素依次进场。
   ====================================================================== */

@keyframes mFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mPopIn {
  0%   { opacity: 0; transform: scale(.8) translateY(8px); }
  60%  { opacity: 1; transform: scale(1.05) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes mSlideL {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mSheen {
  0%   { transform: translateX(-130%) skewX(-18deg); }
  60%, 100% { transform: translateX(330%) skewX(-18deg); }
}
@keyframes mBarX {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---------- 能力卡：内部元素分层 ---------- */
.m-cap-card { transform: translateY(14px); }
.m-cap-card.m-rv.is-in { transform: translateY(-3px); }

.m-cap-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--cap-accent, var(--jade-600));
  transform: scaleX(0);
  transform-origin: left center;
  opacity: .9;
}
.m-cap-card.is-in::after {
  animation: mBarX 680ms var(--ease-out) 160ms both;
}

.m-cap-card .m-cap-ic,
.m-cap-card .m-cap-no,
.m-cap-card .m-cap-top h3,
.m-cap-card .m-cap-slogan,
.m-cap-card .m-cap-list li,
.m-cap-card .m-cap-desc { opacity: 0; }

.m-cap-card.is-in .m-cap-ic {
  animation: mPopIn 520ms var(--spring-emerge) 90ms both;
}
.m-cap-card.is-in .m-cap-no {
  animation: mFadeUp 420ms var(--ease-out) 170ms both;
}
.m-cap-card.is-in .m-cap-top h3 {
  animation: mFadeUp 480ms var(--ease-out) 220ms both;
}
.m-cap-card.is-in .m-cap-slogan {
  animation: mSlideL 480ms var(--ease-out) 290ms both;
}
.m-cap-card.is-in .m-cap-list li {
  animation: mSlideL 460ms var(--ease-out) both;
}
.m-cap-card.is-in .m-cap-list li:nth-child(1) { animation-delay: 360ms; }
.m-cap-card.is-in .m-cap-list li:nth-child(2) { animation-delay: 430ms; }
.m-cap-card.is-in .m-cap-list li:nth-child(3) { animation-delay: 500ms; }
.m-cap-card.is-in .m-cap-list li:nth-child(4) { animation-delay: 570ms; }
.m-cap-card.is-in .m-cap-list li:nth-child(5) { animation-delay: 640ms; }
.m-cap-card.is-in .m-cap-desc {
  animation: mFadeUp 520ms var(--ease-out) 700ms both;
}

/* 按压反馈（移动端没有 hover，用:active） */
.m-cap-card:active {
  transform: translateY(-2px) scale(.995);
  box-shadow: var(--sh-2);
}

/* ---------- 痛点条：序号弹入 + 文字跟随 ---------- */
.m-pain li b { opacity: 0; }
.m-pain li.m-rv.is-in b {
  animation: mPopIn 460ms var(--spring-emerge) 60ms both;
}
.m-pain li span { opacity: 0; }
.m-pain li.m-rv.is-in span {
  animation: mSlideL 440ms var(--ease-out) 150ms both;
}
.m-pain li:active {
  background: var(--card-2);
  transform: scale(.99);
}

/* ---------- 闭环时间轴：节点依次点亮 + 竖线生长 ---------- */
.m-flow li { opacity: 0; }
.m-flow li.m-rv.is-in {
  animation: mFadeUp 480ms var(--ease-out) both;
}
/* 竖线随节点一起长出来 */
@keyframes mLineGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
.m-flow li::before { transform: scaleY(0); transform-origin: top center; }
.m-flow li.m-rv.is-in::before {
  animation: mLineGrow 620ms var(--ease-out) 80ms both;
}
.m-flow-no { opacity: 0; }
.m-flow li.m-rv.is-in .m-flow-no {
  animation: mFadeUp 400ms var(--ease-out) 60ms both;
}
.m-flow-txt { opacity: 0; }
.m-flow li.m-rv.is-in .m-flow-txt {
  animation: mSlideL 440ms var(--ease-out) 140ms both;
}
/* 节点环：进场后轻微呼吸，点击有反馈 */
.m-flow li::after { transition: transform var(--d3) var(--spring-emerge), box-shadow var(--d3); }
.m-flow li:active::after {
  transform: scale(1.35);
  box-shadow: 0 0 0 7px rgba(125, 205, 188, .2);
}

/* ---------- 案例卡 ---------- */
.m-case-logo { opacity: 0; }
.m-case.m-rv.is-in .m-case-logo {
  animation: mPopIn 500ms var(--spring-emerge) 80ms both;
}
.m-case-org b { opacity: 0; }
.m-case.m-rv.is-in .m-case-org b {
  animation: mFadeUp 460ms var(--ease-out) 170ms both;
}
.m-case-org span { opacity: 0; }
.m-case.m-rv.is-in .m-case-org span {
  animation: mFadeUp 440ms var(--ease-out) 230ms both;
}
.m-case-blk { opacity: 0; }
.m-case.m-rv.is-in .m-case-blk:nth-of-type(1) { animation: mFadeUp 480ms var(--ease-out) 300ms both; }
.m-case.m-rv.is-in .m-case-blk:nth-of-type(2) { animation: mFadeUp 480ms var(--ease-out) 400ms both; }

/* ---------- 上线步骤：序号弹入 ---------- */
.m-steps li { opacity: 0; }
.m-steps li.m-rv.is-in {
  animation: mFadeUp 460ms var(--ease-out) both;
}
.m-steps li::before { opacity: 0; }
.m-steps li.m-rv.is-in::before {
  animation: mPopIn 440ms var(--spring-emerge) 40ms both;
}
.m-steps li:active { transform: scale(.99); }

/* ---------- 数据安全条 ---------- */
.m-safe li b { opacity: 0; }
.m-safe li.m-rv.is-in b {
  animation: mPopIn 440ms var(--spring-emerge) 60ms both;
}
.m-safe li span { opacity: 0; }
.m-safe li.m-rv.is-in span {
  animation: mSlideL 440ms var(--ease-out) 150ms both;
}

/* ---------- 按钮：点击掠过一道高光 ---------- */
.m-btn { position: relative; overflow: hidden; }
.m-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 42%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .32), transparent);
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
}
.m-btn:active::before {
  animation: mSheen 680ms var(--ease-out);
}
.m-btn:active { transform: scale(.975); }

/* ---------- FAQ：折叠面板展开时内容淡入 ---------- */
.m-faq-a p { opacity: 0; transform: translateY(-6px); }
.m-faq-item.is-open .m-faq-a p {
  animation: mFadeUp 340ms var(--ease-out) 60ms both;
}

/* ---------- Hero：标签逐个弹入 ---------- */
.m-hero-tags span { opacity: 0; }
.m-hero-tags.m-rv.is-in span {
  animation: mPopIn 420ms var(--spring-emerge) both;
}
.m-hero-tags.m-rv.is-in span:nth-child(1) { animation-delay: 260ms; }
.m-hero-tags.m-rv.is-in span:nth-child(2) { animation-delay: 330ms; }
.m-hero-tags.m-rv.is-in span:nth-child(3) { animation-delay: 400ms; }
.m-hero-tags.m-rv.is-in span:nth-child(4) { animation-delay: 470ms; }

/* ---------- 底部 CTA：光斑呼吸 ---------- */
.m-cta h2 { opacity: 0; }
.m-cta.m-rv.is-in h2 { animation: mFadeUp 560ms var(--ease-out) both; }
.m-cta p { opacity: 0; }
.m-cta.m-rv.is-in p { animation: mFadeUp 520ms var(--ease-out) 120ms both; }
.m-cta-acts { opacity: 0; }
.m-cta.m-rv.is-in .m-cta-acts { animation: mFadeUp 520ms var(--ease-out) 240ms both; }

/* ---------- 底部操作条：出现时轻微弹入 ---------- */
.m-bar.is-show .m-btn--primary { animation: mPopIn 380ms var(--spring-emerge) both; }
.m-bar.is-show .m-btn--ghost { animation: mPopIn 380ms var(--spring-emerge) 70ms both; }

/* ---------- 减弱动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .m-cap-card, .m-cap-card .m-cap-ic, .m-cap-card .m-cap-no,
  .m-cap-card .m-cap-top h3, .m-cap-card .m-cap-slogan,
  .m-cap-card .m-cap-list li, .m-cap-card .m-cap-desc,
  .m-pain li b, .m-pain li span,
  .m-flow li, .m-flow li::before, .m-flow-no, .m-flow-txt,
  .m-case-logo, .m-case-org b, .m-case-org span, .m-case-blk,
  .m-steps li, .m-steps li::before,
  .m-safe li b, .m-safe li span,
  .m-hero-tags span, .m-cta h2, .m-cta p, .m-cta-acts,
  .m-faq-a p, .m-bar.is-show .m-btn {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .m-cap-card.is-in::after, .m-flow li::before { transform: scaleX(1) scaleY(1); }
  .m-btn:active::before { animation: none !important; }
}