/* ============================================================================
 * GEO-Matrix · 获客页「高级版」视觉与动效（D-115）
 * ----------------------------------------------------------------------------
 * 为什么单独一份：`common.css` 是后台同源 token 的忠实转录，改它会影响 3 个页面；
 * 本文件只做**增量增强**，仅获客页引入，删掉即可回退到原样式。
 *
 * 动效档位（与后台不同，已在 D-115 登记）：
 *   后台仍守「位移 ≤8px / 220ms」；获客页按 Apple 式叙事放宽到
 *   「位移 ≤40px / 600–800ms / cubic-bezier(.16,1,.3,1)」——
 *   但**只用 transform + opacity**（不触发布局），并全部受 prefers-reduced-motion 约束。
 *
 * 性能口径：
 *   - 不使用 backdrop-filter 于大面积元素（移动端 GPU 开销高）；仅在 ≤320px 的标签上用；
 *   - 光晕用 radial-gradient **自带柔边**（不用 filter: blur），漂移只动 transform；
 *   - 低部板块加 `content-visibility: auto`，长页首屏渲染更轻；
 *   - 移动端自动关闭视差与光晕动画（见 @media）。
 * ==========================================================================*/

:root {
  --lp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --lp-ink: #070b18;
  --lp-ink-2: #0d1428;
  --lp-glow-a: rgba(42, 111, 224, 0.55);
  --lp-glow-b: rgba(20, 184, 166, 0.42);
  --lp-glow-c: rgba(245, 158, 11, 0.3);
  --lp-line: rgba(148, 163, 184, 0.18);
  --lp-mono: var(--gmd-font-numeric);
}

/* ── 修正（D-115 联调实测） ─────────────────────────────────────────────── */
/* 1) 条件字段：common.css 给 .lp-field 设了 display，会覆盖 [hidden] 的 UA 样式，
      导致「所在城市」「未选平台店铺时」本应隐藏的字段仍然显示（D-112 逻辑失效）。 */
.lp-field[hidden] {
  display: none !important;
}

/* 2) 深色首屏里的表单标题：common.css 未指定颜色，继承 hero 的浅色 → 白底白字不可见 */
.lp-hero--premium .lp-form__title {
  color: var(--gmd-text-primary);
}

/* 3) 首屏标题改无衬线 + 更紧字距（Apple 式观感；common.css 用的是衬线 display 字） */
.lp-hero--premium .lp-hero__title {
  font-family: var(--gf-font);
  font-weight: 800;
}

/* 4) 首屏卖点标签在窄屏要换行，否则 flex nowrap 会把整页撑出横向滚动 */
.lp-points {
  flex-wrap: wrap;
}

/* 5) D-144：输入框「发灰 / 像被蒙一层」的两条防线（两页共用本文件，企业版同步生效） */
/*  ① 浏览器自动填充（Chrome/Edge 的 `:-webkit-autofill`）会把背景刷成淡蓝/淡黄，
 *     在深色首屏里尤其明显 —— 用 1000px 内阴影压回白底，并把文字色钉成主文本色； */
.lp-input:-webkit-autofill,
.lp-input:-webkit-autofill:hover,
.lp-input:-webkit-autofill:focus,
.lp-select:-webkit-autofill {
  -webkit-text-fill-color: var(--gmd-text-primary);
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
  box-shadow: 0 0 0 1000px #ffffff inset;
  caret-color: var(--gmd-text-primary);
}

/*  ② 显式不透明背景：任何后续新增的装饰层都不能透到字段底色上。 */
.lp-input,
.lp-select {
  background-color: #ffffff;
}

/* ── 通用：滚动入场（由 motion.js 加 .is-in） ─────────────────────────────
 * 选择器必须带 `html.js` 前缀：common.css 的 `html.js [data-reveal]`（8px / 220ms）
 * 特异性 (0,2,1) 高于裸 `[data-reveal]` (0,1,0)，不加前缀则本文件的 36px / 620px
 * 一直被它压住（实测获客页入场长期只跑 8px，「感觉不到动画」的根因之一）。 */
html.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition:
    opacity 0.62s var(--lp-ease-out),
    transform 0.62s var(--lp-ease-out);
}

html.js [data-reveal].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html.js [data-reveal="left"] {
  transform: translate3d(-28px, 0, 0);
}

html.js [data-reveal="right"] {
  transform: translate3d(28px, 0, 0);
}

html.js [data-reveal="scale"] {
  transform: scale(0.94);
}

/* ── 首屏：深色叙事 + 双层光晕 ─────────────────────────────────────────── */
.lp-hero.lp-hero--premium {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(1200px 620px at 78% -8%, rgba(42, 111, 224, 0.42), transparent 62%),
    radial-gradient(900px 520px at 6% 4%, rgba(20, 184, 166, 0.24), transparent 60%),
    linear-gradient(180deg, #070b18 0%, #0a1022 62%, #070b18 100%);
  color: #f8fafc;
  padding-block: clamp(64px, 9vw, 132px) clamp(56px, 7vw, 104px);
}

.lp-hero--premium .lp-hero__title {
  color: #fff;
  font-size: clamp(38px, 6.2vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin: 10px 0 18px;
}

.lp-hero--premium .lp-hero__title em {
  font-style: normal;
  background: linear-gradient(96deg, #7dd3fc 0%, #a5b4fc 46%, #5eead4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp-hero--premium .lp-hero__sub {
  color: rgba(226, 232, 240, 0.78);
  font-size: clamp(15px, 1.55vw, 18px);
  line-height: 1.72;
  max-width: 33em;
}

.lp-hero--premium .lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: var(--gmd-radius-pill);
  background: rgba(148, 163, 184, 0.08);
  color: #cbd5e1;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lp-hero--premium .lp-hero__note {
  color: rgba(148, 163, 184, 0.72);
}

/* 光晕：**不用 filter: blur**（大面积模糊动画在集显/手机上每帧离屏合成，是首屏顿感的主因）。
   改用多层 radial-gradient 自带柔边，视觉几乎一致，GPU 成本接近 0。 */
.lp-hero__glow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  opacity: 0.9;
  pointer-events: none;
}

.lp-hero__glow--a {
  width: 46vw;
  height: 46vw;
  max-width: 620px;
  max-height: 620px;
  top: -16%;
  right: -6%;
  background: radial-gradient(
    circle,
    rgba(42, 111, 224, 0.5) 0%,
    rgba(42, 111, 224, 0.28) 26%,
    rgba(42, 111, 224, 0.1) 48%,
    rgba(42, 111, 224, 0) 70%
  );
}

.lp-hero__glow--b {
  width: 34vw;
  height: 34vw;
  max-width: 460px;
  max-height: 460px;
  bottom: -22%;
  left: -8%;
  background: radial-gradient(
    circle,
    rgba(20, 184, 166, 0.42) 0%,
    rgba(20, 184, 166, 0.22) 28%,
    rgba(20, 184, 166, 0.08) 50%,
    rgba(20, 184, 166, 0) 72%
  );
}

/* 光晕缓慢漂移：纯 transform，走合成层，不触发布局 */
@keyframes lp-drift-a {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-2.5%, 3%, 0) scale(1.06);
  }
}

@keyframes lp-drift-b {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1.02);
  }
  50% {
    transform: translate3d(3%, -2.5%, 0) scale(0.96);
  }
}

.lp-hero__glow--a {
  animation: lp-drift-a 15s ease-in-out infinite;
}

.lp-hero__glow--b {
  animation: lp-drift-b 18s ease-in-out infinite;
}

/* 深色底上的表单卡片：白卡 + 细腻投影，保持高对比可读。
 * D-144：背景由 `rgba(…, .97)` 改为**完全不透明**，并建立独立合成层（isolation + z-index）。
 * 原因：首屏光晕/噪点等装饰层都是绝对定位元素，卡片一旦半透明，任何一层压上来都会
 * 让输入框里的 placeholder 变灰发糊；客户反馈「像被遮罩盖住、看不清」。
 * 卡片不透明 + 独立叠层后，装饰层再怎么写也不可能透到字段上。 */
.lp-hero--premium .lp-form {
  position: relative;
  z-index: 1;
  isolation: isolate;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 32px 80px rgba(2, 6, 23, 0.45),
    0 0 0 1px rgba(15, 23, 42, 0.06);
  border-radius: 18px;
}

.lp-hero--premium .lp-point {
  color: rgba(226, 232, 240, 0.86);
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(148, 163, 184, 0.07);
}

.lp-hero--premium .lp-point svg {
  color: #5eead4;
}

/* ── 滚动进度条（顶部，仅获客页） ───────────────────────────────────────── */
.lp-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 60;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #38bdf8, #818cf8 55%, #2dd4bf);
  pointer-events: none;
}

/* ── 回到顶部（滚动超过一屏才出现；移动端抬高避开吸底 CTA） ─────────────── */
.lp-to-top {
  position: fixed;
  right: clamp(14px, 2.4vw, 28px);
  bottom: clamp(14px, 2.4vw, 28px);
  z-index: 65;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--gmd-border-default);
  background: rgba(255, 255, 255, 0.94);
  color: var(--gmd-text-primary);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.14);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 8px, 0);
  transition:
    opacity 0.28s var(--lp-ease-out),
    transform 0.28s var(--lp-ease-out),
    border-color 0.2s var(--lp-ease-out),
    visibility 0s linear 0.28s;
}

.lp-to-top svg {
  width: 20px;
  height: 20px;
}

.lp-to-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.lp-to-top:hover {
  background: #fff;
  border-color: var(--gmd-border-strong);
}

.lp-to-top:focus-visible {
  outline: 2px solid var(--gm-brand-blue);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  /* 吸底 CTA 高约 72px，按钮抬到它上方，避免遮挡 */
  .lp-to-top {
    bottom: calc(72px + 14px + env(safe-area-inset-bottom, 0px));
  }
}

/* Cookie 同意条（z-index 80，整宽浮层）显示期间隐藏回顶按钮：
 * 否则按钮会压在深色同意条上或被其遮挡（同意条高度随文案换行而变，无法用固定 offset 让位） */
body.has-consent .lp-to-top {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media print {
  .lp-to-top {
    display: none !important;
  }
}

/* ── 焦虑段（问题 → 代价 → 你并不孤单） ────────────────────────────────── */
.lp-anxiety {
  background: linear-gradient(180deg, #070b18 0%, #0b1224 100%);
  color: #e2e8f0;
  padding-block: clamp(56px, 8vw, 104px);
  position: relative;
  overflow: hidden;
}

.lp-anxiety__kicker {
  color: #fca5a5;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.lp-anxiety__title {
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 18px;
  max-width: 22em;
}

.lp-anxiety__title b {
  color: #fda4af;
  font-weight: 700;
}

.lp-anxiety__lead {
  color: rgba(203, 213, 225, 0.82);
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.8;
  max-width: 46em;
}

.lp-anxiety__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 34px;
}

.lp-anxiety__card {
  border: 1px solid rgba(248, 113, 113, 0.22);
  background: linear-gradient(180deg, rgba(248, 113, 113, 0.09), rgba(15, 23, 42, 0.2));
  border-radius: 14px;
  padding: 20px 18px;
}

.lp-anxiety__card h3 {
  font-size: 15px;
  margin: 0 0 8px;
  color: #fecdd3;
}

.lp-anxiety__card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(203, 213, 225, 0.78);
}

.lp-anxiety__turn {
  margin-top: 30px;
  padding: 18px 20px;
  border-left: 3px solid #5eead4;
  background: rgba(20, 184, 166, 0.08);
  border-radius: 0 12px 12px 0;
  color: #d1fae5;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.75;
}

/* ── 差异化三件套（GEO × AIGC × 建站） ──────────────────────────────────
 * 2026-10-28（D-293）：D-287 把这一段当「死代码」删掉了，判据是「全仓无 `.lp-trio*` 节点」——
 * 但两版落地页一直在用 `.lp-trio__head/__title/__sub/__idx/__list/__chain`。删后该板块失去
 * 容器留白、标题层级与列表缩进：说明文字铺满 1160px「贴边」，卡片内上下各空 ~100px。
 * 此处按原设计恢复，并把卡片内留白收紧（用户反馈：这一块内容上下留白太多）。
 */
.lp-trio {
  padding-block: clamp(52px, 6.4vw, 92px);
  background:
    radial-gradient(900px 480px at 84% 0%, rgba(42, 111, 224, 0.1), transparent 62%),
    var(--gmd-bg-app);
}

.lp-trio__head {
  max-width: 44em;
}

.lp-trio__title {
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 8px 0 12px;
}

.lp-trio__title em {
  font-style: normal;
  color: var(--gm-brand-blue);
}

.lp-trio__sub {
  color: var(--gmd-text-secondary);
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.8;
  margin: 0;
}

.lp-trio__idx {
  font-family: var(--lp-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--gm-brand-blue);
}

.lp-trio__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.lp-trio__list li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--gmd-text-primary);
}

.lp-trio__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gm-brand-teal);
}

/* 原设计是一串「A → B → C」短片段，flex 不会暴露问题；现在的文案是一整句说明，
 * 铺满 1160px 会变成一行超长句（PC 上读起来很累）→ 回到正常文本流 + 限宽。 */
.lp-trio__chain {
  margin: 22px 0 0;
  max-width: 56rem;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--gmd-text-secondary);
  text-wrap: pretty;
}

.lp-trio__chain b {
  color: var(--gmd-text-primary);
}

/* ── 知识科普（GEO / AIGC 是什么） ─────────────────────────────────────── */
.lp-know {
  padding-block: clamp(60px, 8vw, 108px);
  background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
}

.lp-know__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.lp-know__card {
  border-radius: 18px;
  padding: 26px 24px;
  background: #fff;
  border: 1px solid var(--gmd-border-default);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.lp-know__tag {
  display: inline-block;
  font-family: var(--lp-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gf-blue-50);
  color: var(--gm-brand-blue);
  margin-bottom: 12px;
}

.lp-know__card--aigc .lp-know__tag {
  background: var(--gf-emerald-50);
  color: var(--gf-emerald-600);
}

.lp-know__h {
  font-size: 21px;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.lp-know__p {
  font-size: 14px;
  line-height: 1.82;
  color: var(--gmd-text-secondary);
  margin: 0 0 14px;
}

.lp-know__plain {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--gmd-bg-subtle);
  font-size: 13px;
  line-height: 1.7;
  color: var(--gmd-text-primary);
}

.lp-know__plain b {
  color: var(--gm-brand-blue);
}

.lp-know__table {
  margin-top: 26px;
  border: 1px solid var(--gmd-border-default);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.lp-know__row {
  display: grid;
  grid-template-columns: 1.1fr 1.5fr 1.5fr;
  gap: 12px;
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.7;
  border-top: 1px solid var(--gmd-border-default);
}

.lp-know__row:first-child {
  border-top: 0;
  background: var(--gmd-bg-subtle);
  font-weight: 600;
  color: var(--gmd-text-primary);
}

.lp-know__row span:nth-child(2) {
  color: var(--gmd-text-secondary);
}

.lp-know__row span:nth-child(3) {
  color: var(--gmd-text-primary);
}

.lp-know__row em {
  font-style: normal;
  color: var(--gf-emerald-600);
  font-weight: 600;
}

/* ── 一站式流程（5 步时间轴） ──────────────────────────────────────────── */
.lp-flow {
  padding-block: clamp(60px, 8vw, 108px);
  background: var(--gmd-bg-app);
}

.lp-flow__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
}

.lp-flow__track::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 21px;
  height: 2px;
  background: linear-gradient(90deg, rgba(42, 111, 224, 0.5), rgba(20, 184, 166, 0.5));
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 1.1s var(--lp-ease-out);
}

.lp-flow.is-in .lp-flow__track::before {
  transform: scaleX(1);
}

.lp-flow__step {
  position: relative;
  /* 纵向 flex + 末尾 margin-top:auto：5 列等高，长短不一的描述不会把「交付：」标签顶下来 */
  display: flex;
  flex-direction: column;
  padding-top: 54px;
}

.lp-flow__dot {
  position: absolute;
  top: 12px;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--gm-brand-blue);
  box-shadow: 0 0 0 4px rgba(42, 111, 224, 0.12);
}

.lp-flow__step:nth-child(5) .lp-flow__dot {
  border-color: var(--gm-brand-teal);
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.14);
}

.lp-flow__no {
  font-family: var(--lp-mono);
  font-size: 11px;
  color: var(--gmd-text-muted);
  letter-spacing: 0.12em;
}

.lp-flow__name {
  font-size: 15.5px;
  font-weight: 700;
  margin: 4px 0 6px;
}

.lp-flow__desc {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--gmd-text-secondary);
  margin: 0 0 10px;
}

.lp-flow__out {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  font-size: 11.5px;
  color: var(--gm-brand-blue);
  background: var(--gf-blue-50);
  border-radius: 999px;
  padding: 3px 10px;
}

/* ── 报告样例强化（焦虑 → 解法） ───────────────────────────────────────── */
.lp-report-cta {
  margin-top: 26px;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 18px;
  align-items: start;
}

.lp-report-cta__box {
  border-radius: 16px;
  padding: 22px 20px;
  background: var(--lp-ink);
  color: #e2e8f0;
}

.lp-report-cta__box h3 {
  margin: 0 0 10px;
  font-size: 16px;
  color: #fff;
}

.lp-report-cta__box p {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.75;
  color: rgba(203, 213, 225, 0.8);
}

.lp-report-cta__box .lp-btn {
  width: 100%;
  justify-content: center;
}

.lp-report-cta__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--gmd-text-primary);
}

.lp-report-cta__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.lp-report-cta__list b {
  color: var(--gm-brand-blue);
}

/* ── 粘性叙事（Apple 式 sticky storytelling，D-115） ─────────────────────
 * 参照 iPhone 产品页「设计」章：视觉区钉住不动，滚动推进右侧步骤，
 * 左侧大字随当前步骤切换。**不用图片序列帧**（素材成本与体积不允许），
 * 用排版 + 渐变切换达到同等的「一屏一个信息」节奏。
 * 桌面 only；≤1023px 退化为普通堆叠（移动端 sticky 会吃掉视口）。
 */
.lp-sticky {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  margin-top: clamp(20px, 2.4vw, 32px);
}

.lp-sticky__visual {
  position: sticky;
  top: 96px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 8px 0;
}

.lp-sticky__kicker {
  font-family: var(--lp-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--gm-brand-blue);
}

.lp-sticky__big {
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--gmd-text-primary);
  transition:
    opacity 0.45s var(--lp-ease-out),
    transform 0.45s var(--lp-ease-out);
}

.lp-sticky__big.is-switching {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}

.lp-sticky__hint {
  font-size: 13px;
  line-height: 1.7;
  color: var(--gmd-text-secondary);
  max-width: 24em;
}

.lp-sticky__bar {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.lp-sticky__dot {
  width: 26px;
  height: 3px;
  border-radius: 999px;
  background: var(--gmd-border-strong);
  transition: background 0.3s var(--lp-ease-out), width 0.3s var(--lp-ease-out);
}

.lp-sticky__dot.is-on {
  width: 44px;
  background: var(--gm-brand-blue);
}

.lp-sticky__steps {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
}

/* 卡片只留「内容 + 一档呼吸」：原 min-height 44vh（1080 屏 ≈420px）+ 垂直居中，
 * 内容只有 ~240px → 上下各空近 100px（2026-10-28 用户截图圈注）。改为按内容高度、
 * 顶部对齐；滚动推进靠三张卡片的总高度，不靠单张撑高。 */
.lp-sticky__step {
  min-height: clamp(200px, 24vh, 260px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(22px, 2vw, 28px) clamp(20px, 1.8vw, 26px);
  border-radius: 16px;
  border: 1px solid var(--gmd-border-default);
  background: #fff;
  opacity: 0.45;
  transform: scale(0.985);
  transition:
    opacity 0.45s var(--lp-ease-out),
    transform 0.45s var(--lp-ease-out),
    box-shadow 0.45s var(--lp-ease-out);
}

.lp-sticky__step.is-on {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.1);
}

.lp-sticky__step h3 {
  font-size: 20px;
  margin: 10px 0 8px;
  letter-spacing: -0.01em;
}

.lp-sticky__step p {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.78;
  color: var(--gmd-text-secondary);
}

/* ── 数字计数条（Apple 式 scroll-triggered count-up） ──────────────────── */
.lp-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(26px, 3vw, 40px);
}

.lp-metric {
  padding: 18px 16px;
  border-radius: 14px;
  border: 1px solid var(--lp-line);
  background: rgba(148, 163, 184, 0.06);
  text-align: center;
}

.lp-metric__num {
  display: block;
  font-family: var(--lp-mono);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  letter-spacing: -0.03em;
}

.lp-metric__num small {
  font-size: 0.5em;
  font-weight: 600;
  opacity: 0.75;
  margin-left: 1px;
}

.lp-metric__label {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(203, 213, 225, 0.72);
}

/* 浅色段上的同一组件（企业版「为什么是现在」用） */
.lp-metrics--light .lp-metric {
  border-color: var(--gmd-border-default);
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.lp-metrics--light .lp-metric__num {
  color: var(--gmd-text-primary);
}

.lp-metrics--light .lp-metric__label {
  color: var(--gmd-text-secondary);
}

/* ── 首屏滚动缩放淡出（Apple 首屏大标题的常规处理） ────────────────────
 * 由**合成器**驱动（animation-timeline），不占主线程；
 * 不支持的浏览器直接不生效 —— 不用 JS 兜底，避免每帧写样式导致掉帧。
 * 移动端不做（iOS 地址栏收缩时 scroll 进度会跳）。
 *
 * D-154：**退场对象从整列 `.lp-hero__grid` 收敛为左侧文案列 `.lp-hero__copy`**。
 * 原因（2026-10-21 客户侧实测反馈）：grid 带 opacity 动画时，白表单卡片作为其子元素
 * 一起变半透明 —— 深色底上滑半屏（opacity ≈ 0.54）时白卡透出底色，看起来就是
 * 「一层黑纱盖住表单、输入框发灰」，而首屏表单恰恰是转化入口，绝不能随滚动淡出。
 * 现在：文案照旧退场（幅度收敛到 0.45），表单始终 100% 不透明、不缩放、不位移。 */
@supports (animation-timeline: scroll()) {
  @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .lp-hero--premium .lp-hero__copy {
      animation: lp-hero-out linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 68vh;
    }

    /* 兜底：任何祖先层都不得让表单参与淡出（表单自身的入场动画 lp-form-in 不受影响） */
    .lp-hero--premium .lp-hero__grid > .lp-form {
      opacity: 1;
      transform: none;
    }
  }
}

@keyframes lp-hero-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0.45;
    transform: translate3d(0, -26px, 0) scale(0.98);
  }
}

@media (max-width: 1023px) {
  .lp-sticky {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .lp-sticky__visual {
    position: static;
    min-height: 0;
    gap: 8px;
  }

  .lp-sticky__big {
    font-size: clamp(26px, 6vw, 34px);
  }

  .lp-sticky__bar {
    display: none;
  }

  .lp-sticky__step {
    min-height: 0;
    padding: 20px 18px;
    opacity: 1;
    transform: none;
    box-shadow: none;
  }

  .lp-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── 动效 v2：分组节奏 / 按端差异化 / 动画后退出合成（D-115 第二批） ──── */

/* 动画结束后移除 transition / will-change：元素不再参与合成层刷新
   （47 个入场元素的关键优化；will-change 常驻会长期占用合成层显存）
   同样需要 `html.js` 前缀才能压过 common.css 的 `html.js [data-reveal]`。 */
html.js [data-reveal].is-done {
  transition: none;
  will-change: auto;
}

/* 同组子项依次入场（90ms 步进）—— 比「整块同时动」更高级，同时动画数不变 */
.lp-anxiety__grid > [data-reveal]:nth-child(2),
.lp-know__grid > [data-reveal]:nth-child(2),
.lp-grid--2 > [data-reveal]:nth-child(2),
.lp-grid--3 > [data-reveal]:nth-child(2),
.lp-grid--4 > [data-reveal]:nth-child(2) {
  transition-delay: 90ms;
}

.lp-anxiety__grid > [data-reveal]:nth-child(3),
.lp-grid--3 > [data-reveal]:nth-child(3),
.lp-grid--4 > [data-reveal]:nth-child(3) {
  transition-delay: 180ms;
}

.lp-grid--4 > [data-reveal]:nth-child(4) {
  transition-delay: 270ms;
}

/* 科普两卡：左右对向滑入 + 轻微缩放（比单纯上浮更抓眼） */
.lp-know__grid > [data-reveal]:nth-child(1) {
  transform: translate3d(-30px, 16px, 0) scale(0.985);
}

.lp-know__grid > [data-reveal]:nth-child(2) {
  transform: translate3d(30px, 16px, 0) scale(0.985);
}

.lp-know__grid > [data-reveal].is-in {
  transform: translate3d(0, 0, 0);
}

/* 对比表逐行浮现（最多 6 行） */
.lp-know__table .lp-know__row {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 0.5s var(--lp-ease-out),
    transform 0.5s var(--lp-ease-out);
}

.lp-know__table.is-in .lp-know__row {
  opacity: 1;
  transform: none;
}

.lp-know__table.is-in .lp-know__row:nth-child(2) { transition-delay: 60ms; }
.lp-know__table.is-in .lp-know__row:nth-child(3) { transition-delay: 120ms; }
.lp-know__table.is-in .lp-know__row:nth-child(4) { transition-delay: 180ms; }
.lp-know__table.is-in .lp-know__row:nth-child(5) { transition-delay: 240ms; }
.lp-know__table.is-in .lp-know__row:nth-child(6) { transition-delay: 300ms; }

/* 一站式 5 步依次点亮（Apple 常见的「逐项带入」） */
@keyframes lp-step-in {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.lp-flow.is-in .lp-flow__step {
  animation: lp-step-in 0.55s var(--lp-ease-out) both;
}

.lp-flow.is-in .lp-flow__step:nth-child(1) { animation-delay: 0.06s; }
.lp-flow.is-in .lp-flow__step:nth-child(2) { animation-delay: 0.16s; }
.lp-flow.is-in .lp-flow__step:nth-child(3) { animation-delay: 0.26s; }
.lp-flow.is-in .lp-flow__step:nth-child(4) { animation-delay: 0.36s; }
.lp-flow.is-in .lp-flow__step:nth-child(5) { animation-delay: 0.46s; }

/* 重绘范围收敛：不改高度计算，不影响锚点；比 content-visibility 安全。
 * D-144：去掉 `paint` —— 只保留 layout/style 包含。
 * 原因：`contain: paint` 会给每个板块建立独立绘制层，滚动到板块交界处时
 * Chromium（尤其 Windows + 集显）偶发「上一帧没重绘」的残影：表单字段上浮出
 * 半透明旧像素、文字出现重影，看起来像被蒙了一层遮罩（2026-10-20 获客页实测）。
 * 视觉收益为 0，风险却是「客户看不清表单」，故收敛为 layout + style。 */
.lp-section {
  contain: layout style;
}

/* hover 只在「有精确指针」的设备生效（触屏不触发，避免点按残留抬升/阴影） */
@media (hover: none), (pointer: coarse) {
  .lp-card--hover:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--gmd-border-default);
  }
}

/* ── 按端差异化：移动端只保留「轻淡入 + 计数」，关掉大位移与大时长 ──────── */
@media (max-width: 767px) {
  html.js [data-reveal],
  html.js [data-reveal="left"],
  html.js [data-reveal="right"],
  html.js [data-reveal="scale"] {
    transform: translate3d(0, 12px, 0);
    transition-duration: 0.42s;
  }

  .lp-know__grid > [data-reveal]:nth-child(1),
  .lp-know__grid > [data-reveal]:nth-child(2) {
    transform: translate3d(0, 12px, 0);
  }

  /* 手机端不做逐行/逐项级联（步进延迟在窄屏上会显得拖沓） */
  .lp-anxiety__grid > [data-reveal],
  .lp-know__grid > [data-reveal],
  .lp-grid--2 > [data-reveal],
  .lp-grid--3 > [data-reveal],
  .lp-grid--4 > [data-reveal],
  .lp-know__table.is-in .lp-know__row,
  .lp-flow.is-in .lp-flow__step {
    transition-delay: 0ms;
    animation-delay: 0ms;
  }
}

/* 长页性能：低部板块批量渲染（保留 class 名，实际用 contain 实现更安全的收敛） */
.lp-defer {
  contain: layout paint;
}

/* ── 移动端：单列 + 关闭重动效 ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .lp-anxiety__grid,
  .lp-know__grid,
  .lp-report-cta {
    grid-template-columns: 1fr;
  }

  .lp-flow__track {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .lp-flow__track::before {
    left: 9px;
    right: auto;
    top: 8px;
    bottom: 8px;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, rgba(42, 111, 224, 0.5), rgba(20, 184, 166, 0.5));
    transform: scaleY(0);
    transform-origin: 50% 0;
  }

  .lp-flow.is-in .lp-flow__track::before {
    transform: scaleY(1);
  }

  .lp-flow__step {
    padding-top: 0;
    padding-left: 44px;
  }

  .lp-flow__dot {
    top: 2px;
  }

  /* 移动端直接不画光晕：省一块大面积重绘，观感差异极小 */
  .lp-hero__glow {
    display: none;
  }

  .lp-know__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .lp-know__row span:first-child {
    font-weight: 600;
    color: var(--gmd-text-primary);
  }

  /* 移动端不做视差与光晕漂移（省电、防掉帧） */
  .lp-hero__glow {
    animation: none !important;
  }
}

@media (max-width: 767px) {
  /* 首屏卖点 + 导航在手机端最容易撑出横向滚动，这里兜一层（滚动条挂在 html 上，两处都要） */
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  .lp-nav {
    box-sizing: border-box;
    max-width: 100vw;
    padding-inline: 14px;
    gap: 8px;
  }

  .lp-hero--premium .lp-hero__sub {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .lp-nav .lp-btn {
    padding-inline: 14px;
    font-size: 13px;
  }

  .lp-hero--premium {
    padding-block: 36px 52px;
  }

  .lp-hero__glow--a {
    width: 70vw;
    height: 70vw;
  }
}

@media (max-width: 640px) {
  .lp-hero--premium .lp-hero__title {
    font-size: clamp(30px, 9vw, 40px);
  }

  .lp-anxiety__card,
  .lp-know__card {
    padding: 18px 16px;
  }

  /* 触控目标 ≥44px */
  .lp-btn {
    min-height: 44px;
  }

  .lp-input,
  .lp-select {
    min-height: 44px;
    font-size: 16px; /* 防 iOS 聚焦缩放 */
  }
}

/* ============================================================================
 * 动效 v3（D-115 第三批）：首屏加载动效 + 滚动连续绑定 + 移动端横滑
 * ----------------------------------------------------------------------------
 * 设计取向的修正：上一版所有动画都是「进入视口后淡入一次」，滚动过程中画面是静止的，
 * 所以主观感受是"普通"。Apple 页的高级感来自**滚动位置与视觉状态的连续绑定**
 * （scroll-linked），而不是一次性入场。
 *
 * 这里分两类：
 *   A. 一次性入场（load / 首次进入），负责"眼前一亮"；
 *   B. 滚动连续绑定（CSS animation-timeline），负责"往下滑一直在动"。
 *   B 仅在支持 `animation-timeline` 的浏览器 + PC + 非 reduce 时启用；
 *   不支持的浏览器退化为 A（不会坏，只是少一层联动）。
 * ==========================================================================*/

/* ── A1. 首屏加载动效：按 60–90ms 阶梯依次带出（PC / 移动端都做） ─────── */
@keyframes lp-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* LCP 关键元素（eyebrow / h1 / 副文案）专用：**只位移、不动 opacity**。
 * 2026-10-24 性能实测（Lighthouse mobile 4G）：原 `lp-rise` 从 opacity:0 开始，
 * 浏览器要等动画真正开始并推进才会把文字算作「已绘制」→ LCP 被动画延迟拖到 2.6s
 * （FCP 2.3s ≈ 同一原因）。改成首帧即可见、仅做 18px 位移，视觉上仍是「带出」，
 * 但 LCP 立即成立。下方 form / points / actions 仍保留淡入（不在首屏 LCP 判定内）。 */
@keyframes lp-rise-early {
  from {
    transform: translate3d(0, 18px, 0);
  }
  to {
    transform: none;
  }
}

@keyframes lp-form-in {
  from {
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(0.975);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes lp-glow-in {
  from {
    opacity: 0;
    transform: scale(0.84);
  }
  to {
    opacity: 0.9;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* 首屏 LCP 三件套：只位移（见 lp-rise-early 注释），保证首帧可绘制 */
  .lp-hero--premium .lp-eyebrow {
    animation: lp-rise-early 0.5s var(--lp-ease-out) both;
  }

  .lp-hero--premium .lp-hero__title {
    animation: lp-rise-early 0.55s var(--lp-ease-out) both;
  }

  .lp-hero--premium .lp-hero__sub {
    animation: lp-rise-early 0.55s var(--lp-ease-out) 0.04s both;
  }

  .lp-hero--premium .lp-points {
    animation: lp-rise 0.8s var(--lp-ease-out) 0.3s both;
  }

  .lp-hero--premium .lp-hero__actions {
    animation: lp-rise 0.8s var(--lp-ease-out) 0.38s both;
  }

  .lp-hero--premium .lp-hero__note {
    animation: lp-rise 0.8s var(--lp-ease-out) 0.46s both;
  }

  /* 表单从右侧轻推入（比整块淡入更有"到位"感） */
  .lp-hero--premium .lp-form {
    animation: lp-form-in 0.95s var(--lp-ease-out) 0.24s both;
  }

  /* 光晕先"亮起"再进入缓慢漂移 */
  .lp-hero__glow--a {
    animation:
      lp-glow-in 1.3s ease-out both,
      lp-drift-a 15s ease-in-out 1.3s infinite;
  }

  .lp-hero__glow--b {
    animation:
      lp-glow-in 1.5s ease-out 0.15s both,
      lp-drift-b 18s ease-in-out 1.5s infinite;
  }
}

/* ── A2. PC 每一屏的记忆点：整块"抬起"而不是只淡入 ───────────────────── */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .lp-anxiety__title,
  .lp-trio__title,
  .lp-know .lp-section__title,
  .lp-flow .lp-section__title {
    transform: translate3d(0, 34px, 0);
    transition:
      opacity 0.75s var(--lp-ease-out),
      transform 0.75s var(--lp-ease-out);
  }

  .lp-anxiety__title.is-in,
  .lp-trio__title.is-in,
  .lp-know .lp-section__title.is-in,
  .lp-flow .lp-section__title.is-in {
    transform: none;
  }
}

/* ── B. 滚动连续绑定（PC only）：滚动到哪，画面变到哪 ─────────────────── */
@keyframes lp-line-grow {
  to {
    transform: scaleX(1);
  }
}

@keyframes lp-row-in {
  from {
    opacity: 0.25;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes lp-head-shrink {
  from {
    transform: translate3d(0, 20px, 0) scale(0.97);
    opacity: 0.55;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes lp-card-lift {
  from {
    transform: translate3d(0, 40px, 0) scale(0.985);
  }
  to {
    transform: none;
  }
}

@supports (animation-timeline: view()) {
  @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    /* ① 流程横线随滚动生长（不是一次性展开） */
    html.lp-st .lp-flow .lp-flow__track::before {
      animation: lp-line-grow linear both;
      animation-timeline: view();
      animation-range: entry 12% cover 55%;
      transform: scaleX(0);
    }

    /* ② 说明：对比表 / 大标题 / 报告卡**不再**用 view() 驱动。
       原因（实测复盘）：`animation` 的优先级高于 `transition`，一旦用 view() 覆盖，
       元素会直接呈现 animation 的终态（或停在 from 态），滚动快时用户完全看不到入场；
       "从科普开始没有动画"就是这个原因。这些屏统一回到 `is-in` 过渡（每次进入必触发）。 */
  }
}

/* ── C. 移动端：横滑卡片（Apple 移动端最常用的手法，比堆叠高级） ──────── */
@media (max-width: 900px) {
  .lp-anxiety__grid,
  .lp-grid--4 {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    padding: 4px 20px 12px;
    margin-inline: -20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .lp-anxiety__grid::-webkit-scrollbar,
  .lp-grid--4::-webkit-scrollbar {
    display: none;
  }

  .lp-anxiety__card,
  .lp-grid--4 > * {
    flex: 0 0 84%;
    scroll-snap-align: start;
  }

  /* 横滑提示：右侧留出下一张的边缘 + 渐变遮罩，暗示"可以滑" */
  .lp-anxiety {
    overflow: hidden;
  }
}

/* ── D. 移动端入场加强：40px / 520ms（原来 12px 几乎看不出来） ─────────── */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  html.js [data-reveal],
  html.js [data-reveal="left"],
  html.js [data-reveal="right"],
  html.js [data-reveal="scale"] {
    transform: translate3d(0, 40px, 0);
    transition-duration: 0.52s;
  }

  .lp-know__grid > [data-reveal]:nth-child(1),
  .lp-know__grid > [data-reveal]:nth-child(2) {
    transform: translate3d(0, 40px, 0);
  }
}

/* ── 布局与遮挡修正（D-115 第五批 / D-116 补） ─────────────────────────── */

/* 锚点跳转：目标区块顶部让开 64px 吸顶导航，否则「为什么着急」「报告看什么」
 * 等标题会被压在导航条下面（`#lead-form` 是 form，`#privacy` 是 footer，一并覆盖）。 */
main[id],
section[id],
footer[id],
form[id] {
  scroll-margin-top: 84px;
}

/* 768–1023（平板）：6 个导航链接 + Logo + CTA 会挤到换行/溢出，收紧间距与字号 */
@media (min-width: 768px) and (max-width: 1023px) {
  .lp-nav {
    gap: 12px;
    padding-inline: 16px;
  }

  .lp-nav__links {
    gap: 12px;
    font-size: 12.5px;
  }

  .lp-nav__links a,
  .lp-nav .lp-btn {
    white-space: nowrap;
  }

  .lp-nav .lp-btn {
    padding-inline: 12px;
    font-size: 13px;
  }
}

/* PC：首屏表单加宽 —— 原 300px 在 1440 下字段被压窄，长 placeholder 会截断 */
@media (min-width: 1024px) {
  .lp-hero--premium .lp-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(348px, 392px);
  }

  .lp-hero--premium .lp-form {
    padding: 24px 26px;
  }
}

/* 禁止滚动锚定：修「打开页面自己往下滑一点点」
   （字体/入场动画引起布局微变时，浏览器会自动补偿滚动位置） */
html {
  overflow-anchor: none;
  scroll-behavior: auto;
}

/* 移动端 Cookie 同意条：让开吸底 CTA，按钮等宽不换行 */
@media (max-width: 767px) {
  .lp-consent {
    left: 8px;
    right: 8px;
    bottom: calc(72px + 10px);
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
  }

  .lp-consent__actions {
    margin-left: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .lp-consent button {
    height: 40px;
    padding: 0 8px;
    font-size: 13px;
    white-space: nowrap;
  }

  .lp-consent span {
    display: block;
    font-size: 12px;
    line-height: 1.62;
  }
}

/* ── 降低动效偏好：全部静止 ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .lp-hero__glow,
  .lp-flow__track::before {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
 * E. 2026-10-25 转化路径改版（D-246）：首屏只讲清楚，表单沉到页尾
 * --------------------------------------------------------------------------
 * 客户反馈：「一上来就是一张要填的表，还没看懂就想让我留手机号」。
 * 现在的节奏：首屏（看懂）→ 中间（为什么 / 怎么做）→ 页尾（唯一表单）。
 * 本段只管两件事：
 *   E1 `.lp-hero__peek`  首屏右侧的「报告长什么样」预览卡（替掉原表单位置）；
 *   E2 `.lp-lead`        页尾领取区块（深色书挡 + 白卡表单）。
 * 口径：颜色/圆角/动效全部复用既有 token，不引入新设计语言。
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── E1 首屏预览卡 ────────────────────────────────────────────────────── */
.lp-hero--premium .lp-hero__grid--peek {
  /* 右列原来 300–352：PC 1440 下一张 320 宽的卡片浮在 600 宽的空白里，显得又小又飘 */
  grid-template-columns: minmax(0, 1fr) minmax(380px, 470px);
  align-items: center;
  gap: clamp(26px, 4vw, 64px);
}

.lp-hero__peek {
  display: grid;
  gap: 12px;
  align-content: center;
}

/* 预览卡沿用真实报告的视觉语言（.lp-sample），只收一点内边距 */
.lp-hero__peek .lp-sample {
  min-height: 0;
  padding: 16px 18px;
}

.lp-hero__peek .lp-sample__body {
  margin-top: 12px;
  gap: 13px;
}

.lp-hero__peek .lp-sample__verdict {
  font-size: 12.5px;
  line-height: 1.62;
}

.lp-hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-hero__facts li {
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(148, 163, 184, 0.07);
  font-size: 11px;
  line-height: 1.5;
  color: rgba(226, 232, 240, 0.62);
}

.lp-hero__facts b {
  display: block;
  margin-bottom: 1px;
  font-family: var(--gmd-font-numeric);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

/* PC（≥1024）单独放大：卡里 12.5px 的正文 / 64px 的圆环放进 470 宽的栏里，
 * 在 1440 屏上看就是「一张缩略图」。移动端不动（客户口径：手机上一行放得下就够）。 */
@media (min-width: 1024px) {
  .lp-hero__peek {
    gap: 14px;
  }

  .lp-hero__peek .lp-sample {
    padding: 22px 24px;
  }

  .lp-hero__peek .lp-sample__top {
    font-size: 12.5px;
  }

  .lp-hero__peek .lp-sample__badge {
    font-size: 11.5px;
    padding: 2px 9px;
  }

  .lp-hero__peek .lp-sample__body {
    margin-top: 16px;
    gap: 18px;
  }

  .lp-hero__peek .lp-sample__ring {
    width: 84px;
    height: 84px;
    flex: 0 0 84px;
  }

  .lp-hero__peek .lp-sample__ring::before {
    inset: 7px;
  }

  .lp-hero__peek .lp-sample__ring b {
    font-size: 24px;
  }

  .lp-hero__peek .lp-sample__verdict {
    font-size: 14.5px;
    line-height: 1.68;
  }

  .lp-hero__peek .lp-sample__cta {
    margin-top: 16px;
    font-size: 13.5px;
  }

  .lp-hero__facts li {
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 12px;
  }

  .lp-hero__facts b {
    font-size: 19px;
    margin-bottom: 2px;
  }
}

/* ── E2 页尾领取区块 ──────────────────────────────────────────────────── */
.lp-lead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(52px, 7.5vw, 104px);
  background:
    radial-gradient(900px 460px at 84% -12%, rgba(42, 111, 224, 0.36), transparent 62%),
    radial-gradient(760px 420px at 2% 108%, rgba(20, 184, 166, 0.2), transparent 60%),
    linear-gradient(180deg, #070b18 0%, #0a1022 62%, #070b18 100%);
  color: #f8fafc;
}

.lp-lead__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(348px, 408px);
  /* 卡片（表单）比左侧文案高，两端对齐会让文案悬在顶部 —— 垂直居中读起来更稳 */
  align-items: center;
  gap: clamp(26px, 4vw, 64px);
}

/* 左栏文案容器：grid 子项默认 min-width:auto，长行会把右侧表单挤窄 */
.lp-lead__copy {
  min-width: 0;
}

.lp-lead .lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: var(--gmd-radius-pill);
  background: rgba(148, 163, 184, 0.08);
  color: #cbd5e1;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lp-lead__title {
  margin: 12px 0 14px;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.14;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: #fff;
}

.lp-lead__title em {
  font-style: normal;
  background: linear-gradient(96deg, #7dd3fc 0%, #a5b4fc 46%, #5eead4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp-lead__sub {
  max-width: 32em;
  font-size: clamp(14px, 1.35vw, 16.5px);
  line-height: 1.78;
  color: rgba(226, 232, 240, 0.76);
}

.lp-lead__list {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(226, 232, 240, 0.82);
}

/* 「报告里你会看到」小标题：把清单和上面的正文分层，避免读成一长句 */
.lp-lead__tag {
  display: block;
  margin-top: 22px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.85);
}

.lp-lead__tag + .lp-lead__list {
  margin-top: 12px;
}

.lp-lead__note {
  margin: 18px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(148, 163, 184, 0.72);
}

.lp-lead__list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.lp-lead__list li::before {
  content: '✓';
  flex: 0 0 18px;
  height: 18px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(45, 212, 191, 0.16);
  color: #5eead4;
  font-size: 11px;
  font-weight: 700;
}

/* 白卡表单：与首屏同一张卡，只是换了个位置（深色底上必须用重投影压住） */
.lp-lead .lp-form {
  position: relative;
  z-index: 1;
  padding: 24px 26px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 32px 80px rgba(2, 6, 23, 0.45),
    0 0 0 1px rgba(15, 23, 42, 0.06);
}

.lp-lead .lp-form__title {
  color: var(--gmd-text-primary);
  font-size: 17px;
}

.lp-lead .lp-form__hint,
.lp-lead .lp-form__foot {
  color: var(--gmd-text-secondary);
}

/* 表单里的小标题行：留一个「免费 / 不留邮箱」的安心锚点 */
.lp-lead .lp-form__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.lp-lead .lp-form__badges span {
  padding: 2px 9px;
  border-radius: var(--gmd-radius-pill);
  background: var(--gf-blue-50);
  color: var(--gm-brand-blue);
  font-size: 11px;
  font-weight: 600;
}

@media (max-width: 1023px) {
  .lp-hero--premium .lp-hero__grid--peek,
  .lp-lead__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lp-hero__peek {
    max-width: 460px;
  }

  /* 单列后表单会拉成整屏宽（平板 834px 时字段近 800px，读起来发散）→ 收在 560 以内 */
  .lp-lead .lp-form {
    max-width: 560px;
  }
}

@media (max-width: 767px) {
  .lp-lead {
    padding-block: 44px 56px;
  }

  .lp-lead .lp-form {
    padding: 18px 16px;
    border-radius: 16px;
  }

  .lp-lead__list {
    gap: 8px;
    margin-top: 16px;
    font-size: 13px;
  }

  .lp-hero__peek {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-lead__title em,
  .lp-hero__peek .lp-sample {
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
 * F. 2026-10-27 排版与呼吸感微调（T0 表现级：只调样式，不动结构 / 文案 / 契约）
 * --------------------------------------------------------------------------
 * 客户口径：「一看就舒服、愿意停下来了解」，但**不能脱离现有风格**。
 * 因此只做四件事，色板 / 圆角 / 动效全部复用既有 token，不引入新组件：
 *   F1 正文抬到中文舒适区（原 11–13px → 13.5–14px / 行距 1.72–1.8）；
 *   F2 呼吸感（区块纵向留白、标题与正文间距、FAQ 行高、浅色底去灰）；
 *   F3 质感（导航玻璃感、首屏次按钮改描边、卡片微投影与圆角、表格斑马纹）；
 *   F4 PC / 移动双端守卫：留白类改动只在 ≥768px 生效、≤767px 单独一档；
 *      顺带修两处双端问题：企业版首屏标题 9 字掉孤字（≥1024 收一档字号）、
 *      科普卡入场预位移 30px 在 1024/768 撑出 6–10px 横向可拖（收到 18px）。
 * 体积：本段 ≈7.9KB；两页（HTML + 公共资源）2026-10-28 恢复差异化三件套后为
 *       198.9 / 189.1 KB（local-life 余量仅 1.1 KB），仍 < 200KB（check-landing-sync L4）。
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── F1 正文可读性 ────────────────────────────────────────────────────── */
.lp-card__text,
.lp-anxiety__card p,
.lp-trio__list li,
.lp-sticky__step p,
.lp-sticky__hint,
.lp-report-cta__box p,
.lp-report-cta__list,
.lp-deliver ul,
.lp-know__plain {
  font-size: 13.5px;
  line-height: 1.78;
}

.lp-know__p,
.lp-know__row {
  font-size: 14px;
  line-height: 1.78;
}

.lp-flow__desc {
  font-size: 13px;
  line-height: 1.75;
}

.lp-flow__out,
.lp-flow__no {
  font-size: 12px;
}

.lp-faq summary {
  font-size: 15px;
}

.lp-footnote,
.lp-footer {
  font-size: 12px;
  line-height: 1.78;
}

/* 次级说明文字由 #9ca3af（白底约 2.6:1）抬到 secondary，久看不累也过 AA */
.lp-footer__disclaimer,
.lp-kv dt {
  color: #6b7280;
}

.lp-eyebrow {
  color: #6b7280;
}

/* ── F2 呼吸感与节奏 ──────────────────────────────────────────────────── */
.lp-section__title {
  font-size: clamp(26px, 2.35vw, 31px);
  letter-spacing: -0.012em;
}

.lp-section__sub {
  margin-top: 10px;
  max-width: 46em;
  font-size: 15px;
  line-height: 1.75;
}

/* 浅色板块原来直接用 gray-100（偏灰发闷），换成本页已有的冷调浅底 */
.lp-section--subtle {
  background: #f7f9fc;
}

.lp-hero__note {
  font-size: 12px;
  line-height: 1.72;
  color: rgba(148, 163, 184, 0.82);
}

.lp-kv {
  gap: 14px 16px;
  font-size: 12.5px;
}

.lp-metric__label {
  font-size: 12.5px;
}

.lp-anxiety__lead {
  color: rgba(203, 213, 225, 0.88);
}

/* ── F3 质感细节（全部是既有语言内的微调）──────────────────────────────── */
.lp-card {
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.lp-card__icon {
  border: 1px solid #e3edff;
  background: linear-gradient(160deg, #f1f6ff 0%, #ffffff 100%);
}

/* 报告样例卡原来是 8px（唯一一处「后台规格」圆角），与本页 14–18px 的卡片并列时显得方 */
.lp-sample {
  border-radius: 16px;
}

.lp-nav {
  background: rgba(250, 251, 253, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: rgba(15, 23, 42, 0.07);
}

.lp-nav__links {
  font-size: 13px;
}

.lp-btn {
  height: 42px;
  padding-inline: 20px;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 220ms var(--lp-ease-out),
    transform 220ms var(--lp-ease-out);
}

.lp-btn--primary {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

/* 深色首屏上的次按钮：原为白底，和主按钮抢视觉；改成半透明描边（与 .lp-point 同档） */
.lp-hero--premium .lp-btn--ghost {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(148, 163, 184, 0.4);
  color: #e2e8f0;
}

.lp-hero--premium .lp-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(226, 232, 240, 0.62);
  color: #fff;
}

/* 对比表斑马纹：三列长句并排时更容易横向对齐读 */
.lp-know__row:nth-child(even) {
  background: #fbfcff;
}

::selection {
  background: rgba(42, 111, 224, 0.18);
  color: var(--gmd-text-primary);
}

/* hover 抬升统一收敛到「精确指针」设备，参数与 .lp-trio__card 同档 */
@media (hover: hover) and (pointer: fine) {
  .lp-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(42, 111, 224, 0.24);
  }

  .lp-card--hover:hover {
    transform: translate3d(0, -4px, 0);
    border-color: rgba(42, 111, 224, 0.24);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.09);
  }

  .lp-faq summary:hover {
    color: var(--gm-brand-blue);
  }
}

/* ── F4 PC / 移动双端守卫 ─────────────────────────────────────────────── */
/* 科普卡「左右对向滑入」的入场前预位移 30px → 18px：30px 在 1024–1280 的窄桌面 /
 * 768–900 的单列态下会把 scrollWidth 撑出 6–10px（页面真能横向拖动一点）。
 * 18px 在最小 1024 双列与 768 单列下都落在容器内，动画观感不变。 */
@media (min-width: 768px) {
  .lp-know__grid > [data-reveal]:nth-child(1) {
    transform: translate3d(-18px, 16px, 0) scale(0.985);
  }

  .lp-know__grid > [data-reveal]:nth-child(2) {
    transform: translate3d(18px, 16px, 0) scale(0.985);
  }
}

/* 标题两端均衡、正文避免孤字（不支持的浏览器直接忽略，不影响布局） */
.lp-hero__title,
.lp-section__title,
.lp-anxiety__title,
.lp-trio__title,
.lp-lead__title,
.lp-know__h,
.lp-sticky__big {
  text-wrap: balance;
}

.lp-hero__sub,
.lp-anxiety__lead,
.lp-trio__sub,
.lp-section__sub,
.lp-lead__sub,
.lp-card__text,
.lp-know__p {
  text-wrap: pretty;
}

/* 桌面端：只给纵向留白与卡片内边距加码（移动端那点屏幕经不起加留白） */
@media (min-width: 768px) {
  .lp-section {
    padding: clamp(56px, 5.2vw, 80px) 0;
  }

  .lp-card {
    padding: 22px;
  }

  .lp-faq details {
    padding: 18px 0;
  }
}

/* 首屏大标题在双列布局（≥1024）收一档 76px → 66px：企业版「把采购意向导到官网」
 * 9 个字在 1440 的左栏（≈626px）里原来会掉出孤字「网」独占一行，收一档即整行排下；
 * 本地生活版是 7 字一行，观感几乎不变。≤1023 是单列全宽，不生效。 */
@media (min-width: 1024px) {
  .lp-hero--premium .lp-hero__title {
    font-size: clamp(40px, 5vw, 66px);
  }
}

/* 移动端：字号继续抬（手机 14px 是舒适下限），留白不加，触控目标统一 44px */
@media (max-width: 767px) {
  .lp-card__text,
  .lp-anxiety__card p,
  .lp-trio__list li,
  .lp-sticky__step p,
  .lp-know__p,
  .lp-know__row,
  .lp-flow__desc,
  .lp-deliver ul {
    font-size: 14px;
    line-height: 1.8;
  }

  .lp-section__sub {
    font-size: 14px;
  }

  .lp-section__title {
    font-size: 25px;
  }

  .lp-card {
    padding: 18px 16px;
    border-radius: 12px;
  }

  .lp-btn {
    height: 44px;
    padding-inline: 18px;
  }
}