/* 页面主题层：本文件仅供 consulting.html 加载（晚于 tokens.css 与 style.css）。
其中的 :root 覆盖与 .btn / .hero / .card 等通用类覆盖是**刻意保留的页面主题**：
各落地页自成一套视觉规格，取值差异并非 token 冲突，不得为「统一」而随意拉平。
加载顺序：tokens.css → style.css → 本文件，故本文件的覆盖始终生效。 */
/* ============================================================
达师管培 · 管理咨询业务 · 单页设计系统 v2
------------------------------------------------------------
设计原则
1 统一模块框架：每个模块 = 模块头（编号块 + 标签 + 分隔线 + 标题 + 导语）
+ 统一内容容器；模块之间的结构完全同构，可预测、可复用。
2 统一元件库：卡片 / 编号块 / 标签 / 胶囊 / 按钮 / 筛选条，全站单一来源，
同一套圆角、描边、阴影与内边距。
3 紧凑纵向节奏：模块留白 --sec-y、模块内块间距 --blk-y、
卡片间距 --gap-card —— 三层节奏各自成体系，不再逐处硬编码。
4 交替底色分层：白 → 浅蓝 → 白 → 浅蓝 → 白 → 深蓝 → 浅蓝 → 白 → 品牌渐变，
相邻模块底色必不相同；相邻同色区块之间以 1px 分隔线收边。
============================================================ */
/* ============================================================
01 设计令牌
============================================================ */
.lp-page {
/* ---- 品牌色 ---- */
--c-primary: #165DFF;
--c-primary-h: #4080FF;
--c-primary-a: #0E42C1;
--c-grad: linear-gradient(135deg, var(--c-primary), var(--c-primary-active));
--c-gold: #D4AF66;
--c-gold-d: #B8934C;
/* 金色墨：浅金底上的文字色。原两处标签直接复用 --c-gold-d(#B8934C) →
对奶金底 rgba(212,175,102,.14) 实测仅 2.61:1，未达 WCAG AA 4.5:1；
2026-09-25 新增本令牌（同 talent.css --c-gold-ink 口径），--c-gold-d 本体不动
（其另作 3 处背景使用，改动会外溢）*/
--c-gold-ink: #7A5A1E;
--c-gold-lit: #E8C98A;
/* ---- 中性色 ---- */
--bg: #FFF;
--bg-soft: #F4F7FD;
--bg-soft-2: #E8F0FE;
--bd: #E4E7ED;
--bd-2: #EFF1F6;
--bd-card: #DEE4F0;
--bd-strong: rgba(22, 93, 255, 0.16);
--tx: #1F2329;
--tx-2: #43464C;
--tx-3: #606266;
--tx-4: #606266;
/* ---- 蓝色纵深 ---- */
--navy-1: #165DFF;
--navy-2: #123F8C;
--navy-3: #0A2A6E;
--navy-4: #071E52;
--grad-navy: linear-gradient(158deg, #0A2A6E 0%, #0E3480 55%, #123F8C 100%);
--grad-navy-lit: radial-gradient(ellipse 90% 70% at 86% 4%, rgba(22, 93, 255, 0.34) 0%, transparent 58%), linear-gradient(158deg, #0A2A6E 0%, #0E3480 55%, #123F8C 100%);
--on-navy: #E3ECFF;
--on-navy-2: #B9CDF2;
--err: #F53F3F;
--ok: #00B42A;
/* ---- 字体 ---- */
--f-sans: var(--font-sans-base); /* 唯一真源见 style.css :root */
--f-serif: "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", "SimSun", Georgia, serif;
--f-mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
/* ---- 字号阶梯（整体收敛一档，层级关系不变） ---- */
--t-display: clamp(2.5rem, 4.6vw, 3.75rem);
/* 40 → 60 Hero */
--t-h1: clamp(2rem, 3.4vw, 3rem);
--t-h2: clamp(1.75rem, 2.6vw, 2.375rem);
/* 28 → 38 模块标题 */
--t-h3: clamp(1.3125rem, 1.7vw, 1.5rem);
/* 21 → 24 卡名 */
--t-h4: 1.1875rem;
/* 19 强调 / 次级标题 */
--t-lede: clamp(1.0625rem, 1.25vw, 1.1875rem);
/* 17 → 19 模块导语 */
--t-body: 1.0625rem;
/* 17 正文 / 模块标签 */
--t-sm: 0.9375rem;
/* 15 卡片正文 */
--t-xs: 0.875rem;
/* 14 辅助信息 */
--t-label: 0.8125rem;
/* 13 标签 / 编号 */
--t-mini: 0.75rem;
/* 12 极致小字 */
/* ---- 间距（4px 基准） ---- */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 20px;
--s-6: 24px;
--s-7: 28px;
--s-8: 32px;
--s-10: 40px;
--s-12: 48px;
--s-14: 56px;
--s-16: 64px;
--s-20: 80px;
--s-24: 96px;
/* ---- 节奏三层（本轮重设计核心） ---- */
--sec-y: clamp(2rem, 3vw, 3.25rem);
/* 模块上下留白 */
--blk-y: var(--s-8);
/* 模块内「块 → 块」间距 */
--pad-card: clamp(1.125rem, 1.6vw, 1.375rem);
/* 卡片内边距 18 → 22 */
--gap-card: var(--s-5);
/* 卡片栅格间距 */
/* ---- 圆角 / 阴影 ---- */
--r-card: 12px;
--r-sm: 8px;
--r-btn: 8px;
--sh-1: 0 1px 2px rgba(20, 40, 90, 0.04), 0 6px 16px rgba(22, 93, 255, 0.05);
--sh-2: 0 4px 10px rgba(20, 40, 90, 0.06), 0 16px 34px rgba(22, 93, 255, 0.12);
--sh-3: 0 8px 24px rgba(22, 93, 255, 0.16), 0 24px 60px rgba(22, 93, 255, 0.2);
/* ---- 编号块 / 标签 ---- */
--nbox-bg: #F2F7FF;
--nbox-fg: #165DFF;
--nbox-on-bg: #165DFF;
--nbox-on-fg: #fff;
/* ---- 布局 ---- */
--nav-h: 64px;
--wrap: 1280px;
--ease: cubic-bezier(0.22, 0.61, 0.36, 1)
}
/* ============================================================
02 基础
============================================================ */
.lp-page *, .lp-page *::before, .lp-page *::after {
box-sizing: border-box
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth
}
.lp-page {
margin: 0;
background: var(--bg);
color: var(--tx);
font-family: var(--f-sans);
font-size: var(--t-body);
line-height: 1.8;
-webkit-font-smoothing: antialiased;
overflow-x: hidden
}
.lp-page h1, .lp-page h2, .lp-page h3, .lp-page h4, .lp-page p, .lp-page figure, .lp-page ul, .lp-page ol {
margin: 0
}
.lp-page ul, .lp-page ol {
padding: 0;
list-style: none
}
.lp-page a {
color: inherit;
text-decoration: none
}
.lp-page img, .lp-page svg {
display: block;
max-width: 100%
}
.lp-page button {
font-family: inherit;
font-size: inherit;
cursor: pointer;
border: none;
background: none;
color: inherit
}
.lp-page input, .lp-page select, .lp-page textarea {
font-family: inherit;
font-size: inherit
}
.lp-page :focus-visible {
outline: 2px solid var(--c-primary);
outline-offset: 3px;
border-radius: 2px
}
.lp-page ::selection {
background: rgba(22, 93, 255, 0.16)
}
/* ============================================================
03 布局容器
============================================================ */
.lp-page .wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
/* 内容宽度对齐全站：全站 .container 为 padding: 0 20px（1.25rem）。
原 clamp(1.25rem, 3.5vw, 2.25rem) 在 1440px 取 36px，内容盒仅 1208px，
与主流 1240px 及本页自身页脚（1240px）左边线错位 16px。 */
padding-inline: 1.25rem
}
.lp-page .section {
padding-block: var(--sec-y);
position: relative;
scroll-margin-top: calc(var(--nav-h) + 16px)
}
/* 浅蓝层：与上下白色层以发丝线收边，模块边界清晰 */
.lp-page .section--soft {
background: var(--bg-soft);
border-block: 1px solid var(--bd-2)
}
.lp-page .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0
}
/* ============================================================
04 模块头（全站唯一结构：编号块 + 标签 + 分隔线 / 标题 / 导语）
============================================================ */
.lp-page .sec-head {
display: flex;
flex-direction: column;
gap: var(--s-4);
margin-bottom: var(--blk-y);
max-width: 1040px
}
.lp-page .eyebrow {
display: flex;
align-items: center;
gap: var(--s-3);
margin: 0
}
.lp-page .eyebrow__n {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 26px;
padding: 0 9px;
flex-shrink: 0;
background: var(--nbox-bg);
color: var(--nbox-fg);
border: 1px solid var(--bd-strong);
border-radius: 6px;
font-family: var(--f-mono);
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: 0.06em
}
.lp-page .eyebrow__t {
font-family: var(--f-mono);
font-size: var(--t-body);
font-weight: 700;
letter-spacing: 0.1em;
color: var(--tx-3);
white-space: nowrap
}
.lp-page .eyebrow::after {
content: "";
flex: 1;
min-width: 40px;
height: 1px;
margin-left: var(--s-4);
background: var(--bd-card)
}
/* 无编号变体（产品体系 / CTA）：以金色方点替代编号块 */
.lp-page .eyebrow--sub .eyebrow__t::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin-right: 10px;
background: var(--c-gold-d);
border-radius: 1px;
transform: translatey(-2px)
}
/* 深蓝底变体 */
.lp-page .eyebrow--light .eyebrow__n {
background: rgba(232, 201, 138, 0.14);
color: var(--c-gold-lit);
border-color: rgba(232, 201, 138, 0.4)
}
.lp-page .eyebrow--light .eyebrow__t {
color: rgba(255, 255, 255, 0.88)
}
.lp-page .eyebrow--light::after {
background: rgba(255, 255, 255, 0.2)
}
.lp-page .eyebrow--light.eyebrow--sub .eyebrow__t::before {
background: var(--c-gold-lit)
}
.lp-page .h2 {
font-family: var(--f-serif);
font-weight: 700;
font-size: var(--t-h2);
line-height: 1.26;
letter-spacing: 0.004em
}
.lp-page .lede {
font-size: var(--t-lede);
color: var(--tx-3);
line-height: 1.8;
max-width: 78ch
}
.lp-page .lede b {
color: var(--tx);
font-weight: 600
}
.lp-page .lede--light {
color: var(--on-navy)
}
.lp-page .lede--light b {
color: var(--c-gold-lit);
font-weight: 600
}
/* ============================================================
05 元件库（按钮 / 编号块 / 标签 / 胶囊 / 卡片）
============================================================ */
.lp-page .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
font-size: var(--t-sm);
font-weight: 600;
letter-spacing: 0.02em;
height: 48px;
padding: 0 26px;
border: 1px solid transparent;
border-radius: var(--r-btn);
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
white-space: nowrap
}
.lp-page .btn--primary {
background: var(--c-primary);
color: #fff;
box-shadow: var(--sh-1)
}
.lp-page .btn--primary:hover {
background: var(--c-primary-h);
transform: translatey(-2px);
box-shadow: var(--sh-2)
}
.lp-page .btn--primary:active {
background: var(--c-primary-a);
transform: translatey(0)
}
.lp-page .btn--ghost {
background: #fff;
color: var(--tx);
border-color: var(--bd-card)
}
.lp-page .btn--ghost:hover {
border-color: var(--c-primary);
color: var(--c-primary)
}
.lp-page .btn--light {
background: #fff;
color: var(--c-primary)
}
.lp-page .btn--light:hover {
background: #EAF1FF
}
.lp-page .btn--sm {
height: 38px;
padding: 0 16px;
font-size: var(--t-xs)
}
.lp-page .btn--block {
width: 100%
}
.lp-page .tag {
display: inline-flex;
align-items: center;
padding: 4px 10px;
font-size: var(--t-label);
line-height: 1.5;
color: var(--c-primary);
background: var(--nbox-bg);
border: 1px solid var(--bd-strong);
border-radius: 6px;
font-weight: 600;
white-space: nowrap
}
.lp-page .tag--flag {
color: var(--c-primary);
background: rgba(22, 93, 255, 0.08);
border-color: rgba(22, 93, 255, 0.28)
}
.lp-page .tag--gold {
color: var(--c-gold-d);
background: rgba(212, 175, 102, 0.14);
border-color: rgba(212, 175, 102, 0.42)
}
.lp-page .chip {
display: inline-flex;
align-items: center;
gap: var(--s-2);
height: 38px;
padding: 0 16px;
border-radius: var(--r-btn);
border: 1px solid var(--bd-card);
background: #fff;
font-size: var(--t-xs);
font-weight: 600;
color: var(--tx-2);
transition: all 0.18s var(--ease);
white-space: nowrap
}
.lp-page .chip:hover {
border-color: var(--c-primary);
color: var(--c-primary)
}
.lp-page .chip.is-on {
background: var(--c-primary);
border-color: var(--c-primary);
color: #fff
}
.lp-page .chip__c {
font-family: var(--f-mono);
font-size: var(--t-label);
font-weight: 700;
background: rgba(22, 93, 255, 0.1);
color: var(--c-primary);
padding: 0 6px;
border-radius: 4px
}
.lp-page .chip.is-on .chip__c {
background: rgba(255, 255, 255, 0.22);
color: #fff
}
/* 统一卡片外观 —— 全站单一来源 */
.lp-page .domc, .lp-page .cl, .lp-page .client, .lp-page .pval, .lp-page .frame, .lp-page .advgrid > li, .lp-page .filterbar, .lp-page .faq, .lp-page .cl__side .side__box, .lp-page .dsub li, .lp-page .dcard, .lp-page .svcempty, .lp-page .pos {
border-radius: var(--r-card);
border: 1px solid var(--bd-card);
background: #fff;
box-shadow: var(--sh-1)
}
/* ============================================================
06 导航 / 抽屉 / 进度条
============================================================ */
.lp-page .nav {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--nav-h);
z-index: 120;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: saturate(170%) blur(16px);
-webkit-backdrop-filter: saturate(170%) blur(16px);
border-bottom: 1px solid transparent;
transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease)
}
.lp-page .nav.is-stuck {
border-bottom-color: var(--bd);
box-shadow: 0 1px 14px rgba(29, 35, 48, 0.06)
}
.lp-page .nav__sub {
font-size: var(--t-label);
color: var(--tx-4);
line-height: 1.25
}
.lp-page .nav__link {
position: relative;
font-size: var(--t-sm);
font-weight: 600;
color: var(--tx-2);
padding: var(--s-2) 0;
transition: color 0.2s
}
.lp-page .nav__link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 2px;
background: var(--c-primary);
transform: scalex(0);
transform-origin: left;
transition: transform 0.28s var(--ease)
}
.lp-page .nav__link:hover {
color: var(--c-primary)
}
.lp-page .nav__link:hover::after, .lp-page .nav__link.is-active::after {
transform: scalex(1)
}
.lp-page .nav__link.is-active {
color: var(--c-primary)
}
.lp-page .progress {
position: fixed;
top: 0;
left: 0;
height: 2px;
background: var(--c-primary);
width: 0;
z-index: 200;
transition: width 0.1s linear
}
/* ============================================================
07 Hero
============================================================ */
.lp-page .hero {
padding-bottom: clamp(1.75rem, 3vw, 2.75rem);
position: relative;
overflow: hidden
}
.lp-page .hero::before {
content: "";
position: absolute;
top: -20%;
right: -14%;
width: 50vw;
height: 50vw;
background: radial-gradient(circle, rgba(22, 93, 255, 0.07) 0%, transparent 62%);
pointer-events: none
}
.lp-page .hero__grid {
display: grid;
grid-template-columns: 1.02fr 0.98fr;
gap: clamp(2rem, 4vw, 4rem);
align-items: center;
position: relative
}
.lp-page .hero__tag {
display: inline-flex;
align-items: center;
gap: var(--s-2);
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: 0.14em;
color: var(--c-primary);
border: 1px solid var(--bd-strong);
border-radius: 100px;
padding: 5px 14px;
margin-bottom: var(--s-6);
background: var(--nbox-bg)
}
.lp-page .hero h1 {
font-family: var(--f-serif);
font-weight: 700;
font-size: var(--t-display);
line-height: 1.16;
letter-spacing: -0.01em;
margin: 0 0 var(--s-5)
}
.lp-page .hero h1 em {
font-style: normal;
color: var(--c-primary);
position: relative
}
.lp-page .hero h1 em::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0.1em;
height: 0.28em;
background: rgba(22, 93, 255, 0.14);
z-index: -1
}
.lp-page .hero__quote {
border-left: 3px solid var(--c-primary);
padding-left: var(--s-5);
font-family: var(--f-serif);
font-size: var(--t-lede);
color: var(--tx);
line-height: 1.8;
margin: 0 0 var(--s-4)
}
.lp-page .hero__quote b {
color: var(--c-primary);
font-weight: 700
}
.lp-page .hero__sub {
font-size: var(--t-sm);
color: var(--tx-3);
line-height: 1.85;
max-width: 58ch;
margin: 0 0 var(--s-8)
}
.lp-page .hero__acts {
display: flex;
flex-wrap: wrap;
gap: var(--s-3)
}
.lp-page .hero__fig svg {
width: 100%;
height: auto
}
.lp-page .hfig-num {
font-family: var(--f-mono);
font-size: var(--t-label);
fill: var(--c-primary);
letter-spacing: 0.12em;
font-weight: 600
}
.lp-page .hfig-title {
font-family: var(--f-serif);
font-size: var(--t-h3);
font-weight: 700;
fill: var(--tx);
letter-spacing: 0.02em
}
.lp-page .hfig-label {
font-family: var(--f-sans);
font-size: var(--t-xs);
fill: var(--tx-3);
letter-spacing: 0.03em
}
.lp-page .hfig-foot {
font-family: var(--f-serif);
font-size: var(--t-sm);
font-weight: 600;
fill: var(--tx-2);
letter-spacing: 0.03em
}
/* 数据条 */
.lp-page .stats {
display: grid;
grid-template-columns: repeat(5, 1fr);
background: #fff;
border: 1px solid var(--bd-card);
border-radius: var(--r-card);
box-shadow: var(--sh-1);
overflow: hidden;
margin-top: var(--blk-y);
position: relative
}
.lp-page .stats::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 3px;
background: linear-gradient(90deg, var(--c-primary) 0%, rgba(22, 93, 255, 0.45) 55%, transparent 100%)
}
.lp-page .stat {
padding: var(--s-6) var(--s-4);
border-right: 1px solid var(--bd-2);
text-align: center;
transition: background-color 0.2s var(--ease)
}
.lp-page .stat:hover {
background: var(--bg-soft)
}
.lp-page .stat:last-child {
border-right: 0
}
.lp-page .stat__n {
font-family: var(--f-serif);
font-weight: 700;
font-size: clamp(1.625rem, 2.5vw, 2.25rem);
line-height: 1;
color: var(--c-primary)
}
.lp-page .stat__n sup {
font-size: 0.45em;
font-weight: 600;
vertical-align: super;
color: var(--tx-3)
}
.lp-page .stat__l {
font-size: var(--t-xs);
color: var(--tx-3);
margin-top: var(--s-2);
letter-spacing: 0.02em;
font-weight: 600
}
/* ============================================================
08 跑马灯（通栏下方的紧凑信息带）
============================================================ */
.lp-page .mq {
max-width: var(--wrap);
margin-inline: auto;
padding: var(--s-4) clamp(1.25rem, 3.5vw, 2.25rem);
background: var(--bg-soft);
border-block: 1px solid var(--bd-2)
}
.lp-page .mq__in {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%)
}
.lp-page .mq__track {
display: flex;
gap: var(--s-8);
width: max-content;
animation: mq 42s linear infinite
}
.lp-page .mq:hover .mq__track {
animation-play-state: paused
}
.lp-page .mq__track span {
display: flex;
align-items: center;
gap: var(--s-8);
font-size: var(--t-xs);
color: var(--tx-3);
font-weight: 500;
white-space: nowrap
}
.lp-page .mq__track span::after {
content: "";
width: 4px;
height: 4px;
background: var(--c-gold-d);
border-radius: 50%;
flex-shrink: 0
}
/* 与 style.css 的 recScroll / marquee 同源的回环接缝修复：
.mq__track 同样是「关键词复制两份 + gap: var(--s-8)（32px） + width: max-content」，
translateX(-50%) 的位移比应有值少 0.5×32 = 16px，回环时可见 16px 跳动。
补上 0.5·gap 后位移正好跨过「一份 + 一个间距」。 */
@keyframes mq {
to {
transform: translateX(calc(-50% - var(--s-8) / 2));
}
}
/* ============================================================
09 01 业务定位
============================================================ */
/* 定位整合卡：宣言 + 关键数据 + 业务生态位，同卡三段 */
.lp-page .pos {
position: relative;
overflow: hidden;
padding: clamp(1.5rem, 2.6vw, 2.25rem);
background: var(--grad-navy);
color: #fff;
border-color: transparent;
box-shadow: var(--sh-2);
display: grid;
grid-template-columns: 1.3fr 0.7fr;
column-gap: clamp(1.5rem, 4vw, 3.5rem);
row-gap: var(--s-6);
align-items: start
}
.lp-page .pos::before {
content: "";
position: absolute;
right: -14%;
top: -42%;
width: 56%;
height: 150%;
background: radial-gradient(circle, rgba(22, 93, 255, 0.5) 0%, transparent 62%);
pointer-events: none
}
.lp-page .pos > * {
position: relative;
z-index: 1
}
.lp-page .pos__hd {
min-width: 0
}
.lp-page .pos__cap {
display: inline-block;
margin-bottom: var(--s-3);
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: 0.16em;
font-weight: 700;
color: var(--c-gold-lit)
}
.lp-page .pos__h {
font-family: var(--f-serif);
font-weight: 700;
font-size: clamp(1.4375rem, 2.2vw, 1.875rem);
line-height: 1.4;
margin: 0 0 var(--s-4)
}
.lp-page .pos__h span {
color: var(--c-gold-lit)
}
.lp-page .pos__p {
font-size: var(--t-sm);
line-height: 1.85;
color: rgba(255, 255, 255, 0.86);
max-width: 60ch
}
.lp-page .pos__badges {
display: grid;
align-content: start
}
.lp-page .pos__badges li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-4);
padding: var(--s-2) 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.16)
}
.lp-page .pos__badges li:first-child {
padding-top: 0
}
.lp-page .pos__badges li:last-child {
border-bottom: none;
padding-bottom: 0
}
.lp-page .pos__badges b {
font-family: var(--f-serif);
font-size: var(--t-h3);
font-weight: 700;
color: #fff;
line-height: 1.25;
white-space: nowrap
}
.lp-page .pos__badges span {
font-size: var(--t-xs);
color: rgba(255, 255, 255, 0.7);
text-align: right
}
.lp-page .pos__eco {
grid-column: 1/-1;
border-top: 1px solid rgba(255, 255, 255, 0.2);
padding-top: var(--s-6);
display: flex;
flex-direction: column;
gap: var(--s-4)
}
.lp-page .pos__eco-cap {
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: 0.12em;
color: rgba(255, 255, 255, 0.68);
font-weight: 700
}
.lp-page .pos__chain {
display: flex;
align-items: stretch;
gap: var(--s-3);
flex-wrap: wrap
}
.lp-page .pos__link {
flex: 1;
min-width: 150px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--r-sm);
padding: var(--s-3) var(--s-4);
background: rgba(255, 255, 255, 0.07);
display: flex;
flex-direction: column;
gap: 2px
}
.lp-page .pos__link--hl {
background: #fff;
border-color: #fff;
box-shadow: var(--sh-1)
}
.lp-page .pos__link-t {
font-family: var(--f-serif);
font-size: var(--t-sm);
font-weight: 700;
color: #fff;
line-height: 1.35
}
.lp-page .pos__link--hl .pos__link-t {
color: var(--navy-3)
}
.lp-page .pos__link-s {
font-size: var(--t-label);
color: rgba(255, 255, 255, 0.64)
}
.lp-page .pos__link--hl .pos__link-s {
color: rgba(10, 42, 110, 0.68)
}
.lp-page .pos__arrow {
display: flex;
align-items: center;
color: rgba(255, 255, 255, 0.5);
font-size: var(--t-h4);
font-weight: 700;
flex-shrink: 0
}
.lp-page .pos__ecotip {
font-size: var(--t-xs);
color: rgba(255, 255, 255, 0.78);
line-height: 1.75
}
/* 顶层设计五大支柱框架 */
.lp-page .frame {
margin-top: var(--blk-y);
overflow: hidden
}
.lp-page .frame__hd {
display: flex;
flex-direction: column;
gap: var(--s-3);
padding: var(--pad-card) var(--pad-card) var(--s-4);
border-bottom: 1px solid var(--bd-2);
background: linear-gradient(180deg, var(--bg-soft) 0%, #fff 100%)
}
.lp-page .frame__lab {
display: flex;
align-items: center;
gap: var(--s-3);
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: 0.14em;
color: var(--c-primary);
font-weight: 700
}
.lp-page .frame__lab::before {
content: "";
width: 5px;
height: 18px;
background: var(--c-primary);
border-radius: 2px;
flex-shrink: 0
}
.lp-page .frame__sub {
font-size: var(--t-xs);
color: var(--tx-3);
line-height: 1.8;
max-width: 78ch
}
.lp-page .frame__grid {
display: grid;
grid-template-columns: repeat(5, 1fr)
}
.lp-page .fcol {
display: flex;
flex-direction: column;
gap: var(--s-2);
padding: var(--pad-card);
border-left: 1px solid var(--bd-2);
position: relative;
transition: background-color 0.2s var(--ease)
}
.lp-page .fcol:first-child {
border-left: none
}
.lp-page .fcol::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 3px;
width: 0;
background: var(--c-grad);
transition: width 0.3s var(--ease)
}
.lp-page .fcol:hover {
background: var(--bg-soft)
}
.lp-page .fcol:hover::after {
width: 100%
}
.lp-page .fcol__n {
font-family: var(--f-mono);
font-size: var(--t-label);
font-weight: 700;
letter-spacing: 0.08em;
color: var(--c-primary)
}
.lp-page .fcol__t {
font-family: var(--f-serif);
font-size: var(--t-h4);
font-weight: 700;
color: var(--tx);
line-height: 1.35
}
.lp-page .fcol__d {
font-size: var(--t-xs);
color: var(--tx-3);
line-height: 1.75
}
/* 收束洞察条 */
.lp-page .pos__insight {
display: flex;
align-items: flex-start;
gap: var(--s-4);
margin-top: var(--blk-y);
padding: var(--s-5) var(--s-6);
background: var(--bg-soft);
border: 1px solid var(--bd-card);
border-left: 3px solid var(--c-gold-d);
border-radius: 0 var(--r-card) var(--r-card) 0
}
.lp-page .pos__insight-ic {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: var(--r-sm);
background: rgba(212, 175, 102, 0.16);
display: flex;
align-items: center;
justify-content: center
}
.lp-page .pos__insight-ic svg {
width: 20px;
height: 20px;
fill: var(--c-gold-d)
}
.lp-page .pos__insight p {
font-size: var(--t-sm);
color: var(--tx-2);
line-height: 1.85
}
.lp-page .pos__insight b {
color: var(--tx);
font-weight: 700
}
/* ============================================================
10 02 服务矩阵
============================================================ */
.lp-page .domatrix {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--gap-card)
}
.lp-page .domc {
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease)
}
.lp-page .domc::before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 3px;
background: var(--c-grad);
opacity: 0;
transition: opacity 0.25s var(--ease)
}
.lp-page .domc:hover {
transform: translatey(-3px);
box-shadow: var(--sh-2);
border-color: rgba(22, 93, 255, 0.4)
}
.lp-page .domc:hover::before {
opacity: 1
}
.lp-page .domc__head {
display: flex;
align-items: center;
gap: var(--s-3);
padding: var(--pad-card);
border-bottom: 1px solid var(--bd-2)
}
.lp-page .domc__n {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex-shrink: 0;
border-radius: var(--r-sm);
background: var(--c-grad);
color: #fff;
font-family: var(--f-mono);
font-size: var(--t-xs);
font-weight: 700
}
.lp-page .domc__tbox {
flex: 1;
min-width: 0
}
.lp-page .domc__t {
font-family: var(--f-serif);
font-size: var(--t-h4);
font-weight: 700;
line-height: 1.3;
color: var(--tx)
}
.lp-page .domc__en {
display: block;
margin-top: 2px;
font-family: var(--f-mono);
font-size: var(--t-mini);
letter-spacing: 0.06em;
color: var(--tx-4)
}
.lp-page .domc__d {
padding: var(--s-3) var(--pad-card) 0;
font-size: var(--t-xs);
color: var(--tx-3);
line-height: 1.7
}
.lp-page .domc__stat {
display: flex;
align-items: center;
gap: var(--s-2);
padding: var(--s-2) var(--pad-card) 0;
font-family: var(--f-mono);
font-size: var(--t-label);
color: var(--tx-4)
}
.lp-page .domc__stat b {
color: var(--c-primary);
font-size: var(--t-sm)
}
.lp-page .domc__dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--bd-strong);
flex-shrink: 0
}
.lp-page .domc__lines {
flex: 1;
display: flex;
flex-direction: column;
padding: var(--s-3) var(--pad-card)
}
.lp-page .domc__lines li {
border-top: 1px dashed var(--bd-2)
}
.lp-page .domc__lines li:first-child {
border-top: none
}
.lp-page .domc__lines a {
display: flex;
align-items: center;
gap: var(--s-2);
padding: 7px 0;
font-size: var(--t-xs);
color: var(--tx-2);
transition: color 0.18s var(--ease)
}
.lp-page .domc__lines a:hover, .lp-page .domc__lines a:hover .domc__ln {
color: var(--c-primary)
}
.lp-page .domc__lines i {
font-family: var(--f-mono);
font-size: var(--t-mini);
color: var(--tx-3);
font-style: normal;
font-weight: 700;
flex-shrink: 0
}
.lp-page .domc__ln {
flex: 1;
min-width: 0;
line-height: 1.5
}
.lp-page .domc__lc {
font-family: var(--f-mono);
font-size: var(--t-mini);
color: var(--tx-3);
flex-shrink: 0
}
.lp-page .domc__flag {
font-size: var(--t-mini);
font-weight: 700;
color: var(--c-gold-d);
background: rgba(212, 175, 102, 0.16);
border: 1px solid rgba(212, 175, 102, 0.4);
border-radius: 4px;
padding: 0 5px;
flex-shrink: 0
}
.lp-page .domc__go {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
width: 100%;
padding: var(--s-3) var(--pad-card);
border-top: 1px solid var(--bd-2);
background: var(--bg-soft);
font-size: var(--t-xs);
font-weight: 600;
color: var(--c-primary);
text-align: left;
transition: background-color 0.2s var(--ease)
}
.lp-page .domc__go:hover {
background: var(--bg-soft-2)
}
.lp-page .domc__go span {
transition: transform 0.2s var(--ease)
}
.lp-page .domc__go:hover span {
transform: translatex(4px)
}
/* 第 8 格：产品体系入口卡（补齐 4×2 网格，替代原独立横条） */
.lp-page .domc--jump {
background: linear-gradient(165deg, #F1F6FF 0%, #E5EEFE 100%);
border-color: rgba(22, 93, 255, 0.28)
}
.lp-page .domc--jump::before {
opacity: 1;
background: var(--c-primary)
}
.lp-page .domc--jump:hover {
border-color: var(--c-primary)
}
.lp-page .domc--jump .domc__go {
background: #fff;
border-top-color: rgba(22, 93, 255, 0.2)
}
.lp-page .domc--jump .domc__go:hover {
background: var(--nbox-bg)
}
.lp-page .domc__lines--feat li {
display: flex;
align-items: center;
gap: var(--s-2);
padding: 6px 0;
font-size: var(--t-xs);
color: var(--tx-2)
}
.lp-page .domc__lines--feat li::before {
content: "";
width: 5px;
height: 5px;
border-radius: 2px;
background: var(--c-gold-d);
flex-shrink: 0
}
/* ============================================================
11 产品体系（全部产品）
============================================================ */
.lp-page .filterbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-3);
padding: var(--s-4) var(--s-5);
margin-bottom: var(--s-4)
}
.lp-page .filterbar__lab {
font-size: var(--t-sm);
font-weight: 700;
color: var(--tx);
flex-shrink: 0
}
.lp-page .filterbar__sp {
flex: 1
}
.lp-page .svcbar__chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2);
min-width: 0
}
.lp-page .svcbar__search {
display: flex;
align-items: center;
gap: var(--s-3);
border: 1px solid var(--bd-card);
border-radius: var(--r-btn);
background: #fff;
padding: 0 var(--s-4);
height: 38px;
min-width: 260px;
transition: border-color 0.18s var(--ease)
}
.lp-page .svcbar__search--in-filter {
margin-left: 0
}
.lp-page .svcbar__search:focus-within {
border-color: var(--c-primary);
box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.1)
}
.lp-page .svcbar__search svg {
width: 17px;
height: 17px;
stroke: var(--tx-4);
fill: none;
stroke-width: 2;
flex-shrink: 0
}
.lp-page .svcbar__search input {
flex: 1;
border: none;
outline: none;
font-size: var(--t-xs);
background: transparent;
}
/* 无障碍 P3-3：本选择器的 outline:none（0,2,1）特异性高于 .lp-page :focus-visible（0,2,0），
会把键盘焦点提示一并抹掉；此处只对 :focus-visible 补回内嵌轮廓，鼠标点击不受影响。 */
.lp-page .svcbar__search input:focus-visible {
outline: 2px solid var(--c-primary);
outline-offset: -2px;
min-width: 0
}
.lp-page .svcbar__search input::placeholder {
color: var(--tx-4)
}
.lp-page .clbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
margin-bottom: var(--s-4);
flex-wrap: wrap
}
.lp-page .list-count {
font-size: var(--t-xs);
color: var(--tx-3)
}
.lp-page .clbar .list-count {
margin-bottom: 0
}
.lp-page .cltoggle {
display: inline-flex;
align-items: center;
gap: var(--s-2);
height: 38px;
padding: 0 18px;
border-radius: var(--r-btn);
border: 1px solid var(--bd-card);
background: #fff;
color: var(--c-primary);
font-size: var(--t-xs);
font-weight: 600;
transition: all 0.18s var(--ease);
white-space: nowrap
}
.lp-page .cltoggle:hover {
border-color: var(--c-primary);
background: var(--bg-soft)
}
.lp-page .clist {
display: grid;
gap: var(--s-3)
}
@media (min-width: 1100px) {
.lp-page .clist {
grid-template-columns: repeat(2, 1fr);
align-items: start
}
.lp-page .clist.clist--read {
grid-template-columns: 1fr
}
}
.lp-page .cl {
overflow: hidden;
transition: border-color 0.2s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease), background-color 0.25s var(--ease)
}
/* 需求8：hover 背景变色 + 放大。口径克制：只做「纸面抬高一层」——
极浅的品牌蓝纵向渐变 + 既有 --sh-2 阴影 + 1.01 缩放（宽幅双栏卡片，1.02 会明显变形）；
放大仅作用于折叠速览态：展开阅读（.clist--read）后卡片即整段正文，
再缩放会让长卡片边缘出画、文字发虚，故只保留底色与描边反馈 */
.lp-page .cl:hover {
border-color: rgba(22, 93, 255, 0.45);
background: linear-gradient(180deg, #FFFFFF 0%, #F3F7FF 100%);
box-shadow: var(--sh-2)
}
.lp-page .clist:not(.clist--read) .cl:hover {
transform: scale(1.01);
z-index: 1
}
.lp-page .cl:hover .svc__t {
color: var(--c-primary)
}
.lp-page .cl.is-hit {
box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.4);
border-color: rgba(22, 93, 255, 0.6);
scroll-margin-top: calc(var(--nav-h) + 20px)
}
.lp-page .cl__btn {
display: block;
width: 100%;
padding: var(--pad-card) var(--s-5);
cursor: pointer;
font: inherit;
color: inherit;
background: none;
border: 0;
text-align: left;
outline: none
}
.lp-page .cl__btn:focus-visible {
box-shadow: inset 0 0 0 2px rgba(22, 93, 255, 0.55)
}
.lp-page .cl__btn .svc__t {
margin: 6px 0 5px
}
.lp-page .cl__btn .svc__q {
margin: 0
}
.lp-page .cl__c {
font-size: var(--t-label);
color: var(--tx-4);
white-space: nowrap
}
.lp-page .cl__detail {
padding: 0 var(--s-5) var(--s-5);
border-top: 1px solid var(--bd-2)
}
.lp-page .cl__detail .dblock:first-child {
padding-top: var(--s-5)
}
.lp-page .cl__split {
display: grid;
grid-template-columns: minmax(0, 1fr) 290px;
gap: var(--s-6);
align-items: start
}
.lp-page .cl__side {
position: sticky;
top: calc(var(--nav-h) + 20px);
display: grid;
gap: var(--s-3);
align-content: start
}
.lp-page .cl__side .side__box {
padding: var(--s-4) var(--s-5);
background: var(--bg-soft);
border-color: var(--bd-2);
box-shadow: none
}
.lp-page .svcempty {
grid-column: 1/-1;
text-align: center;
padding: var(--s-16) var(--s-6);
color: var(--tx-3);
font-size: var(--t-sm)
}
.lp-page .svcempty[hidden] {
display: none
}
/* 卡片内通用小元件 */
.lp-page .svc__top {
display: flex;
align-items: center;
gap: var(--s-2);
flex-wrap: wrap
}
.lp-page .svc__n {
display: inline-flex;
align-items: center;
gap: var(--s-2);
font-family: var(--f-mono);
font-size: var(--t-label);
font-weight: 700;
letter-spacing: 0.08em;
color: var(--c-primary)
}
.lp-page .svc__n::before {
content: "";
width: 18px;
height: 1px;
background: var(--c-primary);
opacity: 0.45;
flex-shrink: 0
}
.lp-page .svc__t {
font-family: var(--f-serif);
font-size: var(--t-h3);
font-weight: 700;
line-height: 1.35;
color: var(--tx)
}
.lp-page .svc__q {
font-size: var(--t-sm);
color: var(--tx-3);
line-height: 1.75
}
.lp-page .svc__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
margin-top: var(--s-4);
padding-top: var(--s-3);
border-top: 1px solid var(--bd-2);
flex-wrap: wrap
}
.lp-page .svc__hint {
display: inline-flex;
align-items: center;
gap: var(--s-2);
font-size: var(--t-xs);
color: var(--c-primary);
font-weight: 700
}
.lp-page .svc__hint svg {
width: 14px;
height: 14px;
stroke: currentColor;
fill: none;
stroke-width: 2.2;
transition: transform 0.25s var(--ease)
}
.lp-page .cl__btn[aria-expanded="true"] .svc__hint svg {
transform: rotate(180deg)
}
.lp-page .cl__topic {
display: inline-flex;
align-items: center;
padding: 3px 9px;
border-radius: 100px;
background: rgba(212, 175, 102, 0.14);
border: 1px solid rgba(212, 175, 102, 0.42);
color: var(--c-gold-ink);
font-size: var(--t-label);
font-weight: 700;
white-space: nowrap
}
/* 卡片内区块 */
.lp-page .dblock {
margin-bottom: var(--s-6)
}
.lp-page .dblock:last-child {
margin-bottom: 0
}
.lp-page .dblock__h {
display: flex;
align-items: center;
gap: var(--s-3);
font-family: var(--f-serif);
font-size: var(--t-h4);
font-weight: 700;
margin: 0 0 var(--s-3);
padding-bottom: var(--s-2);
border-bottom: 1px solid var(--bd-2)
}
.lp-page .dblock__h::before {
content: "";
width: 4px;
height: 18px;
background: var(--c-primary);
border-radius: 2px;
flex-shrink: 0
}
.lp-page .dblock__note {
font-size: var(--t-label);
color: var(--tx-4);
line-height: 1.7;
margin: 0 0 var(--s-3)
}
.lp-page .dlead {
font-size: var(--t-sm);
color: var(--tx-2);
line-height: 1.8;
padding: var(--s-4) var(--s-5);
background: var(--bg-soft);
border-left: 3px solid var(--c-primary);
border-radius: 0 var(--r-sm) var(--r-sm) 0
}
.lp-page .dsub {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-2)
}
.lp-page .dsub li {
display: flex;
align-items: flex-start;
gap: var(--s-3);
padding: var(--s-3) var(--s-4);
background: #fff;
border-color: var(--bd-2);
box-shadow: none;
font-size: var(--t-sm);
color: var(--tx-2);
line-height: 1.65;
scroll-margin-top: calc(var(--nav-h) + 24px);
transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease)
}
.lp-page .dsub li i {
flex-shrink: 0;
min-width: 26px;
height: 26px;
padding: 0 6px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--nbox-bg);
color: var(--nbox-fg);
border: 1px solid var(--bd-strong);
border-radius: 5px;
font-family: var(--f-mono);
font-size: var(--t-label);
font-weight: 700;
font-style: normal
}
.lp-page .dsub li.is-hit {
border-color: var(--c-primary);
box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.12)
}
.lp-page .dsub__note {
font-size: var(--t-xs);
color: var(--tx-3);
line-height: 1.7;
margin-bottom: var(--s-4)
}
.lp-page .dlist li {
display: flex;
gap: var(--s-3);
padding: var(--s-3) 0;
border-top: 1px solid var(--bd-2);
font-size: var(--t-sm);
line-height: 1.75
}
.lp-page .dlist li:first-child {
border-top: none
}
.lp-page .dlist i {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 24px;
padding: 0 6px;
margin-top: 2px;
flex-shrink: 0;
background: var(--nbox-bg);
color: var(--nbox-fg);
border: 1px solid var(--bd-strong);
border-radius: 5px;
font-family: var(--f-mono);
font-size: var(--t-label);
font-style: normal;
font-weight: 700
}
.lp-page .dlist p {
color: var(--tx-2)
}
.lp-page .dcards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: var(--s-2)
}
.lp-page .dcard {
padding: var(--s-3) var(--s-4);
border-color: var(--bd-2);
box-shadow: none;
transition: border-color 0.2s var(--ease)
}
.lp-page .dcard:hover {
border-color: rgba(22, 93, 255, 0.4)
}
.lp-page .dcard b {
display: block;
font-size: var(--t-xs);
font-weight: 700;
color: var(--tx)
}
.lp-page .dcard span {
display: block;
font-size: var(--t-label);
color: var(--tx-3);
line-height: 1.6;
margin-top: 2px
}
.lp-page .dcard--accent {
background: var(--bg-soft);
border-color: rgba(22, 93, 255, 0.24)
}
.lp-page .dcard--accent b {
color: var(--c-primary)
}
.lp-page .dcard--topic {
display: block;
border-color: rgba(22, 93, 255, 0.32)
}
.lp-page .dcard--topic b {
font-family: var(--f-serif);
font-size: var(--t-sm)
}
.lp-page .dcard .dcard__go {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: var(--s-2);
color: var(--c-primary);
font-weight: 600;
font-size: var(--t-label)
}
.lp-page .cl__promise {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--s-2);
margin-top: var(--s-6);
padding: var(--s-3) var(--s-4);
background: var(--bg-soft);
border-left: 3px solid var(--c-primary);
border-radius: 0 var(--r-sm) var(--r-sm) 0;
font-size: var(--t-xs);
color: var(--tx-3);
line-height: 1.7
}
.lp-page .cl__promise b {
flex-shrink: 0;
color: var(--c-primary);
font-size: var(--t-label);
letter-spacing: 0.06em;
font-weight: 700
}
.lp-page .side__h {
display: flex;
align-items: center;
gap: var(--s-2);
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: 0.12em;
color: var(--tx-3);
font-weight: 700;
margin-bottom: var(--s-2)
}
.lp-page .side__list li {
border-top: 1px solid var(--bd-2)
}
.lp-page .side__list li:first-child {
border-top: none
}
.lp-page .side__list a {
display: flex;
align-items: center;
gap: var(--s-2);
padding: var(--s-2) 0;
font-size: var(--t-xs);
color: var(--tx-2);
transition: color 0.18s var(--ease)
}
.lp-page .side__list a:hover {
color: var(--c-primary)
}
.lp-page .side__list a.is-cur {
color: var(--c-primary);
font-weight: 700
}
.lp-page .side__list i {
font-family: var(--f-mono);
font-size: var(--t-label);
color: var(--tx-4);
font-style: normal;
font-weight: 700;
flex-shrink: 0
}
.lp-page .side__cta {
background: var(--c-grad);
border-radius: var(--r-card);
padding: var(--s-5);
color: #fff;
box-shadow: var(--sh-1)
}
.lp-page .side__cta b {
display: block;
font-family: var(--f-serif);
font-size: var(--t-sm);
margin-bottom: var(--s-2)
}
.lp-page .side__cta p {
font-size: var(--t-label);
line-height: 1.7;
color: rgba(255, 255, 255, 0.9);
margin-bottom: var(--s-4)
}
/* ============================================================
12 03 交付闭环
============================================================ */
.lp-page .loop {
display: grid;
grid-template-columns: minmax(280px, 380px) 1fr;
gap: clamp(1.5rem, 3.5vw, 3rem);
align-items: start
}
.lp-page .loop__fig {
position: sticky;
top: calc(var(--nav-h) + 24px);
margin: 0
}
.lp-page .loop__fig svg {
width: 100%;
height: auto
}
.lp-page .loop__cap {
display: flex;
align-items: center;
justify-content: center;
gap: var(--s-3);
margin-top: var(--s-4);
font-size: var(--t-xs);
color: var(--tx-3)
}
.lp-page .loop__cap::before {
content: "";
flex-shrink: 0;
width: 20px;
height: 1px;
background: var(--c-primary);
opacity: 0.6
}
.lp-page .loop__num {
font-family: var(--f-mono);
font-size: 15px;
font-weight: 700;
fill: var(--c-primary);
letter-spacing: 0.04em
}
.lp-page .loop__lab {
font-family: var(--f-sans);
font-size: 14px;
font-weight: 600;
fill: var(--tx-2)
}
.lp-page .loop__ct {
font-family: var(--f-serif);
font-size: 20px;
font-weight: 700;
fill: var(--tx)
}
.lp-page .loop__cs {
font-family: var(--f-mono);
font-size: 11px;
font-weight: 600;
fill: var(--tx-4);
letter-spacing: 0.14em
}
.lp-page .loop__steps {
display: flex;
flex-direction: column;
gap: var(--s-3)
}
.lp-page .pstep {
display: flex;
gap: var(--s-4);
background: #fff;
border: 1px solid var(--bd-card);
border-radius: var(--r-card);
box-shadow: var(--sh-1);
padding: var(--s-4) var(--s-5);
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease)
}
/* 需求8：交付闭环步骤 hover —— 保留原有右移，叠加极浅底色与微放大（口径与服务线一致） */
.lp-page .pstep:hover {
transform: translatex(4px) scale(1.005);
box-shadow: var(--sh-2);
border-color: rgba(22, 93, 255, 0.4);
background: linear-gradient(180deg, #FFFFFF 0%, #F3F7FF 100%)
}
.lp-page .pstep__n {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: var(--r-sm);
background: var(--c-grad);
color: #fff;
font-family: var(--f-mono);
font-size: var(--t-h4);
font-weight: 700
}
.lp-page .pstep__b {
flex: 1;
min-width: 0
}
.lp-page .pstep__th {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
margin-bottom: var(--s-2)
}
.lp-page .pstep__t {
font-family: var(--f-serif);
font-size: var(--t-h4);
font-weight: 700;
line-height: 1.35
}
.lp-page .pstep__ph {
display: inline-flex;
align-items: center;
flex-shrink: 0;
padding: 3px 9px;
border-radius: 100px;
background: rgba(212, 175, 102, 0.14);
border: 1px solid rgba(212, 175, 102, 0.42);
color: var(--c-gold-ink);
font-size: var(--t-label);
font-weight: 700;
white-space: nowrap
}
.lp-page .pstep__d {
font-size: var(--t-sm);
color: var(--tx-3);
line-height: 1.75
}
.lp-page .pstep__acts {
margin-top: var(--s-3);
padding-top: var(--s-2);
border-top: 1px dashed var(--bd);
font-size: var(--t-xs);
color: var(--tx-3);
line-height: 1.7
}
.lp-page .pstep__acts b {
display: inline;
color: var(--c-primary);
margin-right: 6px;
font-weight: 700
}
.lp-page .proc__note {
margin-top: var(--blk-y);
padding: var(--s-4) var(--s-5);
background: #fff;
border: 1px solid var(--bd-card);
border-left: 3px solid var(--c-primary);
border-radius: 0 var(--r-card) var(--r-card) 0;
box-shadow: var(--sh-1);
font-size: var(--t-sm);
color: var(--tx-2);
line-height: 1.8
}
.lp-page .proc__note b {
color: var(--tx);
font-weight: 700
}
.lp-page .pvals {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap-card);
margin-top: var(--blk-y)
}
.lp-page .pval {
display: flex;
flex-direction: column;
gap: var(--s-2);
padding: var(--pad-card) var(--s-5);
position: relative;
overflow: hidden
}
.lp-page .pval::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--c-primary);
opacity: 0.85
}
.lp-page .pval__ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--r-sm);
background: var(--bg-soft);
border: 1px solid var(--bd-card)
}
.lp-page .pval__ico svg {
width: 20px;
height: 20px;
stroke: var(--c-primary);
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round
}
.lp-page .pval__t {
font-family: var(--f-serif);
font-size: var(--t-h4);
font-weight: 700;
color: var(--tx)
}
.lp-page .pval__d {
font-size: var(--t-xs);
color: var(--tx-3);
line-height: 1.75
}
/* ============================================================
13 04 核心优势（浅色层 + 金色强调）
============================================================ */
.lp-page .advgrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap-card)
}
.lp-page .advgrid > li {
padding: var(--pad-card);
display: flex;
flex-direction: column;
background: linear-gradient(180deg, #FFF 0%, #F3F7FE 100%);
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease)
}
.lp-page .advgrid > li:hover {
transform: translatey(-3px);
box-shadow: var(--sh-2);
border-color: rgba(22, 93, 255, 0.4)
}
.lp-page .advgrid .adv__n {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-start;
min-width: 40px;
height: 26px;
padding: 0 9px;
margin-bottom: var(--s-3);
background: rgba(212, 175, 102, 0.14);
color: var(--c-gold-d);
border: 1px solid rgba(212, 175, 102, 0.42);
border-radius: 6px;
font-family: var(--f-mono);
font-size: var(--t-label);
font-weight: 700;
letter-spacing: 0.08em
}
.lp-page .advgrid .adv__t {
font-family: var(--f-serif);
font-size: var(--t-h4);
font-weight: 700;
color: var(--tx);
margin-bottom: var(--s-2);
line-height: 1.35
}
.lp-page .advgrid .adv__d {
font-size: var(--t-sm);
color: var(--tx-3);
line-height: 1.8
}
/* 第 6 格：转化位 */
.lp-page .advgrid > li.advcta {
background: linear-gradient(150deg, #FFFBF3 0%, #FFFDF9 100%);
border-color: rgba(212, 175, 102, 0.5)
}
.lp-page .advgrid > li.advcta:hover {
border-color: var(--c-gold-d);
box-shadow: var(--sh-2)
}
.lp-page .advcta__k {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-start;
min-width: 40px;
height: 26px;
padding: 0 9px;
margin-bottom: var(--s-3);
background: rgba(212, 175, 102, 0.2);
color: var(--c-gold-d);
border: 1px solid rgba(212, 175, 102, 0.5);
border-radius: 6px;
font-family: var(--f-mono);
font-size: var(--t-label);
font-weight: 700;
letter-spacing: 0.08em
}
.lp-page .advcta__t {
font-family: var(--f-serif);
font-size: var(--t-h4);
font-weight: 700;
color: var(--tx);
margin-bottom: var(--s-2);
line-height: 1.35
}
.lp-page .advcta__d {
font-size: var(--t-sm);
color: var(--tx-3);
line-height: 1.8;
margin-bottom: var(--s-4)
}
.lp-page .advcta__go {
display: inline-flex;
align-items: center;
gap: var(--s-2);
margin-top: auto;
align-self: flex-start;
padding-bottom: 2px;
border-bottom: 1px solid rgba(184, 147, 76, 0.55);
color: var(--c-gold-d);
font-size: var(--t-sm);
font-weight: 700;
transition: gap 0.2s var(--ease), border-color 0.2s var(--ease)
}
.lp-page .advcta__go:hover {
gap: var(--s-3);
border-color: var(--c-gold-d)
}
.lp-page .advcta__go span {
transition: transform 0.2s var(--ease)
}
.lp-page .advcta__go:hover span {
transform: translatex(3px)
}
/* ============================================================
14 05 深度专题（唯一深蓝层）
============================================================ */
.lp-page .topics {
background: var(--grad-navy-lit);
color: var(--on-navy);
position: relative;
overflow: hidden
}
.lp-page .topics::before, .lp-page .topics::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0
}
.lp-page .topics::before {
background: radial-gradient(ellipse 60% 50% at 6% 100%, rgba(22, 93, 255, 0.2) 0%, transparent 60%)
}
.lp-page .topics::after {
background-image: linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
background-size: 64px 64px
}
.lp-page .topics > .wrap {
position: relative;
z-index: 1
}
.lp-page .topics .h2 {
color: #fff
}
.lp-page .twrap {
display: grid;
grid-template-columns: 320px 1fr;
gap: clamp(1.5rem, 3vw, 2.5rem);
align-items: start
}
.lp-page .tlist {
display: flex;
flex-direction: column;
gap: var(--s-2);
position: sticky;
top: calc(var(--nav-h) + 20px)
}
.lp-page .titem {
display: flex;
align-items: center;
gap: var(--s-3);
width: 100%;
text-align: left;
padding: var(--s-3) var(--s-4);
border-radius: var(--r-card);
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.85);
transition: all 0.2s var(--ease);
cursor: pointer
}
.lp-page .titem:hover {
border-color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.1)
}
.lp-page .titem.is-on {
/* 需求优化v8 第2条修复：原规则「白底 + 深蓝字」是为浅底设计配套的；v7 重设计后
激活态背景改为深底色上的微亮半透明（rgba(255,255,255,.1)），但这条深蓝字没有同步
——深蓝字落在深蓝底上完全看不见。改为保留金色描边、文字转白（标题在下方规则转金）。 */
border-color: rgba(240, 198, 105, .32);
color: #fff
}
.lp-page .titem__n {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 24px;
padding: 0 6px;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 5px;
font-family: var(--f-mono);
font-size: var(--t-label);
font-weight: 700;
color: rgba(255, 255, 255, 0.92)
}
.lp-page .titem.is-on .titem__n {
background: var(--nbox-bg);
color: var(--c-primary);
border-color: var(--bd-strong)
}
.lp-page .titem__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px
}
.lp-page .titem__t {
font-size: var(--t-sm);
font-weight: 700;
line-height: 1.45;
color: #fff;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden
}
.lp-page .titem.is-on .titem__t {
/* v8 第2条：激活态标题改用金色（白底深蓝字的旧配套已作废），既醒目又不与深底混淆。 */
color: #F0C669
}
.lp-page .titem__s {
font-family: var(--f-mono);
font-size: var(--t-mini);
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.58);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.lp-page .titem.is-on .titem__s {
/* v8 第2条：同上，激活态不再是白底，副标题保持浅色而不可用深蓝。 */
color: rgba(255, 255, 255, 0.68)
}
.lp-page .titem__go {
font-size: var(--t-h4);
color: rgba(255, 255, 255, 0.7);
flex-shrink: 0;
transition: transform 0.2s var(--ease)
}
.lp-page .titem:hover .titem__go, .lp-page .titem.is-on .titem__go {
transform: translatex(3px);
color: var(--c-primary)
}
.lp-page .tstage {
position: relative;
min-width: 0
}
.lp-page .tpanel {
display: flex;
flex-direction: column;
gap: var(--s-5)
}
.lp-page .tpanel[hidden] {
display: none
}
.lp-page .tpanel__main {
display: flex;
flex-direction: column;
min-width: 0
}
.lp-page .tpanel__hgroup {
display: flex;
align-items: center;
gap: var(--s-3);
margin-bottom: var(--s-3)
}
.lp-page .tpanel__nbox {
display: inline-flex;
align-items: center;
gap: var(--s-2);
padding: 4px 12px;
border-radius: 6px;
background: rgba(22, 93, 255, 0.18);
border: 1px solid rgba(22, 93, 255, 0.4);
font-family: var(--f-mono);
font-size: var(--t-label);
font-weight: 700;
letter-spacing: 0.12em;
color: var(--on-navy)
}
.lp-page .tpanel__h {
font-family: var(--f-serif);
font-size: var(--t-h3);
font-weight: 700;
color: #fff;
line-height: 1.35
}
.lp-page .tpanel__s {
font-size: var(--t-sm);
color: rgba(255, 255, 255, 0.86);
line-height: 1.85;
max-width: 72ch
}
.lp-page .tpanel__ul {
margin-top: var(--s-5);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--r-card);
padding: 0 var(--s-4)
}
.lp-page .tpanel__ul li {
display: flex;
gap: var(--s-3);
padding: var(--s-4) 0;
border-top: 1px solid rgba(255, 255, 255, 0.1)
}
.lp-page .tpanel__ul li:first-child {
border-top: none
}
.lp-page .tpanel__ul i {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 22px;
padding: 0 7px;
margin-top: 3px;
flex-shrink: 0;
background: rgba(232, 201, 138, 0.14);
border: 1px solid rgba(232, 201, 138, 0.4);
border-radius: 5px;
font-family: var(--f-mono);
font-size: var(--t-label);
font-style: normal;
font-weight: 700;
color: var(--c-gold-lit)
}
.lp-page .tpanel__ul b {
color: #fff;
font-weight: 700;
font-size: var(--t-sm);
display: block
}
.lp-page .tpanel__ul p {
font-size: var(--t-xs);
color: rgba(255, 255, 255, 0.78);
line-height: 1.8;
margin-top: var(--s-1)
}
.lp-page .tpanel__tags {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
margin-top: var(--s-5)
}
.lp-page .tpanel__tags span {
font-size: var(--t-label);
padding: 4px 11px;
border-radius: 100px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.18);
color: rgba(255, 255, 255, 0.86)
}
.lp-page .trel {
margin-top: var(--s-5);
padding: var(--s-3) var(--s-4);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--r-card)
}
.lp-page .trel__h {
display: block;
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: 0.1em;
color: var(--c-gold-lit);
margin-bottom: var(--s-2)
}
.lp-page .trel__cs {
display: flex;
flex-wrap: wrap;
gap: var(--s-2)
}
.lp-page .trel__c {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 11px;
border-radius: 100px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.92);
font-size: var(--t-xs);
transition: all 0.18s var(--ease)
}
.lp-page .trel__c:hover {
background: #fff;
color: var(--navy-3);
border-color: #fff
}
.lp-page .tpanel__fig {
margin: 0;
padding: clamp(1rem, 2.2vw, 1.5rem);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: var(--r-card);
position: relative
}
.lp-page .tpanel__fig svg {
width: 100%;
max-width: 560px;
height: auto;
margin-inline: auto
}
.lp-page .tpanel__cap {
display: flex;
align-items: center;
justify-content: center;
gap: var(--s-3);
margin-top: var(--s-4);
font-size: var(--t-label);
color: rgba(255, 255, 255, 0.72)
}
.lp-page .tpanel__cap::before {
content: "";
flex-shrink: 0;
width: 20px;
height: 1px;
background: rgba(232, 201, 138, 0.6)
}
.lp-page .sv-m {
font-family: var(--f-mono)
}
.lp-page .sv-t {
font-family: var(--f-serif)
}
.lp-page .sv-l {
font-family: var(--f-sans)
}
/* ============================================================
15 06 服务对象
============================================================ */
.lp-page .clients {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--gap-card)
}
.lp-page .client {
padding: var(--pad-card);
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease)
}
.lp-page .client::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--c-grad)
}
/* 需求8：服务对象卡片 hover —— 保留原有上浮，叠加极浅底色与微放大（口径与服务线一致） */
.lp-page .client:hover {
transform: translatey(-3px) scale(1.005);
box-shadow: var(--sh-2);
border-color: rgba(22, 93, 255, 0.4);
background: linear-gradient(180deg, #FFFFFF 0%, #F3F7FF 100%)
}
.lp-page .client__hd {
display: flex;
align-items: center;
gap: var(--s-3);
margin-bottom: var(--s-3)
}
.lp-page .client__idx {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 26px;
border-radius: 6px;
background: var(--c-grad);
color: #fff;
flex-shrink: 0;
font-family: var(--f-mono);
font-size: var(--t-label);
font-weight: 700
}
.lp-page .client__k {
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: 0.14em;
color: var(--tx-4);
font-weight: 700
}
.lp-page .client__t {
font-family: var(--f-serif);
font-size: var(--t-h3);
font-weight: 700;
line-height: 1.35;
margin-bottom: var(--s-3)
}
.lp-page .client__d {
font-size: var(--t-sm);
color: var(--tx-3);
line-height: 1.8;
margin-bottom: var(--s-4)
}
.lp-page .client__svc {
margin-top: auto;
padding-top: var(--s-4);
border-top: 1px solid var(--bd-2)
}
.lp-page .client__svc-h {
display: block;
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: 0.12em;
color: var(--c-primary);
font-weight: 700;
margin-bottom: var(--s-2)
}
.lp-page .client__ul li {
display: flex;
align-items: flex-start;
gap: var(--s-3);
padding: 7px 0;
border-top: 1px dashed var(--bd-2);
font-size: var(--t-sm);
color: var(--tx-2);
line-height: 1.65
}
.lp-page .client__ul li:first-child {
border-top: none
}
.lp-page .client__ul li::before {
content: "";
flex-shrink: 0;
width: 5px;
height: 5px;
border-radius: 2px;
margin-top: 0.6em;
background: var(--c-primary)
}
.lp-page .client__links {
margin-top: var(--s-4);
padding-top: var(--s-3);
border-top: 1px solid var(--bd-2)
}
.lp-page .client__links-h {
display: block;
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: 0.12em;
color: var(--tx-4);
font-weight: 700;
margin-bottom: var(--s-2)
}
.lp-page .client__lks {
display: flex;
flex-wrap: wrap;
gap: 6px
}
.lp-page .client__lk {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 100px;
background: #fff;
border: 1px solid var(--bd-card);
color: var(--tx-2);
font-size: var(--t-xs);
line-height: 1.5;
transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background 0.18s var(--ease)
}
.lp-page .client__lk::after {
content: "→";
font-size: var(--t-mini);
opacity: 0.5;
transition: opacity 0.18s var(--ease)
}
.lp-page .client__lk:hover {
border-color: var(--c-primary);
color: var(--c-primary);
background: var(--nbox-bg)
}
.lp-page .client__lk:hover::after {
opacity: 1
}
/* ============================================================
16 07 常见问题
============================================================ */
.lp-page .faq {
overflow: hidden
}
.lp-page .faq__i {
border-top: 1px solid var(--bd-2)
}
.lp-page .faq__i:first-child {
border-top: none
}
.lp-page .faq__q {
width: 100%;
display: flex;
align-items: center;
gap: var(--s-4);
padding: var(--s-4) var(--s-5);
text-align: left;
font-size: var(--t-h4);
font-weight: 600;
color: var(--tx);
transition: color 0.18s var(--ease), background-color 0.18s var(--ease)
}
.lp-page .faq__q:hover {
color: var(--c-primary);
background: var(--bg-soft)
}
.lp-page .faq__i.is-open .faq__q {
color: var(--c-primary)
}
.lp-page .faq__i2 {
position: relative;
width: 18px;
height: 18px;
flex-shrink: 0
}
.lp-page .faq__i2::before, .lp-page .faq__i2::after {
content: "";
position: absolute;
background: currentColor;
border-radius: 1px;
transition: transform 0.3s var(--ease)
}
.lp-page .faq__i2::before {
left: 0;
right: 0;
top: 8px;
height: 2px
}
.lp-page .faq__i2::after {
top: 0;
bottom: 0;
left: 8px;
width: 2px
}
.lp-page .faq__i.is-open .faq__i2::after {
transform: scaley(0)
}
.lp-page .faq__a {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s var(--ease)
}
.lp-page .faq__a p {
font-size: var(--t-sm);
color: var(--tx-3);
line-height: 1.9;
padding: 0 var(--s-5) var(--s-5) calc(var(--s-5) + 18px + var(--s-4))
}
/* ============================================================
17 CTA + 表单
============================================================ */
.lp-page .cta {
background: var(--c-grad);
color: #fff;
position: relative;
overflow: hidden
}
.lp-page .cta::before {
content: "";
position: absolute;
right: -8%;
bottom: -40%;
width: 46vw;
height: 46vw;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
pointer-events: none
}
.lp-page .cta::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
background-size: 80px 80px
}
.lp-page .cta > .wrap {
position: relative;
z-index: 1
}
.lp-page .cta .h2 {
color: #fff
}
.lp-page .cta__grid {
display: grid;
grid-template-columns: 0.92fr 1.08fr;
gap: clamp(1.75rem, 4vw, 3.5rem);
align-items: start
}
.lp-page .cta__p {
color: rgba(255, 255, 255, 0.94);
line-height: 1.85;
font-size: var(--t-sm);
max-width: 50ch;
margin: 0 0 var(--s-6)
}
.lp-page .cta__pts {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: var(--r-card);
padding: 0 var(--s-5)
}
.lp-page .cta__pts li {
display: flex;
gap: var(--s-3);
align-items: flex-start;
padding: var(--s-3) 0;
border-top: 1px solid rgba(255, 255, 255, 0.16);
font-size: var(--t-sm);
color: #fff;
line-height: 1.7
}
.lp-page .cta__pts li:first-child {
border-top: none
}
.lp-page .cta__pts li:last-child {
padding-bottom: var(--s-4)
}
.lp-page .cta__pts svg {
width: 22px;
height: 22px;
flex-shrink: 0;
margin-top: 2px;
padding: 5px;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
stroke: #fff;
fill: none;
stroke-width: 2.2
}
.lp-page .form {
background: #fff;
border-radius: var(--r-card);
padding: clamp(1.5rem, 2.8vw, 2rem);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 20px 48px rgba(6, 26, 80, 0.24);
color: var(--tx);
border: 1px solid rgba(255, 255, 255, 0.6)
}
.lp-page .frow {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-3)
}
.lp-page .fld {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: var(--s-3)
}
.lp-page .fld label {
font-size: var(--t-xs);
font-weight: 700;
color: var(--tx-2)
}
.lp-page .fld label i {
font-style: normal;
color: var(--err);
margin-left: 2px
}
.lp-page .fld input, .lp-page .fld select, .lp-page .fld textarea {
font-size: var(--t-sm);
padding: 0.65rem 0.9rem;
border: 1px solid var(--bd-card);
border-radius: var(--r-btn);
background: #fff;
color: var(--tx);
transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
width: 100%
}
.lp-page .fld input::placeholder, .lp-page .fld textarea::placeholder {
color: var(--tx-4)
}
.lp-page .fld input:focus, .lp-page .fld select:focus, .lp-page .fld textarea:focus {
outline: none;
border-color: var(--c-primary);
box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.12)
}
.lp-page .fld textarea {
resize: vertical;
min-height: 88px
}
.lp-page .fld.has-err input, .lp-page .fld.has-err select {
border-color: var(--err)
}
.lp-page .fld .err {
font-size: var(--t-label);
color: var(--err);
display: none
}
.lp-page .fld.has-err .err {
display: block
}
.lp-page .form__note {
font-size: var(--t-label);
color: var(--tx-4);
line-height: 1.7;
margin-top: var(--s-3)
}
.lp-page .form__ok {
display: none;
text-align: center;
padding: var(--s-12) var(--s-4)
}
.lp-page .form__ok.is-on {
display: block
}
.lp-page .form__ok svg {
width: 52px;
height: 52px;
margin: 0 auto var(--s-4);
padding: 12px;
background: var(--nbox-bg);
border: 1px solid var(--bd-strong);
border-radius: 50%;
stroke: var(--c-primary);
fill: none;
stroke-width: 1.8
}
.lp-page .form__ok h3 {
font-family: var(--f-serif);
font-size: var(--t-h3);
margin-bottom: var(--s-2)
}
.lp-page .form__ok p {
font-size: var(--t-sm);
color: var(--tx-3);
line-height: 1.8
}
/* ============================================================
18 页脚
============================================================ */
.lp-page .foot {
background: linear-gradient(180deg, var(--c-primary-active) 0%, #0A2A6E 24%, #071E52 100%);
color: rgba(255, 255, 255, 0.76);
padding-block: var(--s-16) var(--s-6);
position: relative
}
.lp-page .foot h4 {
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: 0.16em;
color: var(--c-gold-lit);
margin-bottom: var(--s-3);
font-weight: 600
}
.lp-page .foot ul li {
font-size: var(--t-xs);
line-height: 2.1
}
.lp-page .foot ul li a {
transition: color 0.18s var(--ease)
}
.lp-page .foot ul li a:hover {
color: #fff
}
/* ============================================================
19 动效
============================================================ */
.lp-page .rv {
opacity: 0;
transform: translatey(18px);
transition: opacity 0.6s var(--ease), transform 0.6s var(--ease)
}
.lp-page .rv.in {
opacity: 1
}
/* 优化000 第22条：删除 `.rv.in:not(:hover){transform:none}` —— hover 时它会让元素
回退到 translateY(18px)，视觉上像「标题动画盖住下面文字」。
落位归零改由 landing-app.js 在动画结束后摘除 rv 状态类完成，两不干扰。 */
/* ============================================================
19-C 优化000 咨询页专项（第 12 ~ 23 条）
============================================================ */
/* ---------- 第12条 · Hero ----------
① 主标题缩为一行（去
，字号收一档）；② 两段文字左右齐宽（与上方文字同一栏宽）；
③ 三张卡宽高比已在 SVG 内调整（150→166 宽、330→300 高），此处不再拉伸。 */
.lp-page .hero h1 { font-size: clamp(1.5rem, 2.25vw, 2rem); }
@media (min-width: 992px) {
.lp-page .hero h1 { white-space: nowrap; }
}
.lp-page .hero__quote,
.lp-page .hero__sub { max-width: 100%; }
/* ---------- 第13条 · 章节小标题 > 主标题；描述行按页面通栏不折行 ----------
「业务定位」「服务矩阵」等章节标签字号大于其下方主标题；同样规则适用于
服务矩阵 / 产品体系 / 交付闭环 / 核心优势 / 深度专题 / 服务对象 / 常见问题。 */
.lp-page .sec-head { max-width: 100%; }
.lp-page .eyebrow__t {
font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
letter-spacing: 0.03em;
color: var(--c-primary);
font-weight: 800
}
.lp-page .eyebrow__n { min-width: 32px; height: 25px; }
.lp-page .h2 { font-size: clamp(1rem, 1.25vw, 1.1875rem); font-weight: 500; line-height: 1.5; }
.lp-page .lede { max-width: 100%; }
.lp-page .sec-head .lede { max-width: 100%; font-size: var(--t-sm); }
/* 业务定位整合卡：三个环节卡 hover 动态效果 + 字号层次重新设计 */
.lp-page .pos__link {
transition: transform .22s var(--ease), background-color .22s var(--ease),
border-color .22s var(--ease), box-shadow .22s var(--ease)
}
.lp-page .pos__link:hover {
transform: translateY(-3px);
background: rgba(255, 255, 255, .15);
border-color: rgba(232, 201, 138, .55);
box-shadow: 0 12px 26px rgba(4, 18, 56, .28)
}
.lp-page .pos__link:hover .pos__link-t { color: var(--c-gold-lit); }
.lp-page .pos__link-t { font-size: var(--t-h4); font-weight: 800; }
.lp-page .pos__link-s { font-size: var(--t-xs); }
.lp-page .pos__link--hl { box-shadow: 0 0 0 1px rgba(232, 201, 138, .35) inset; }
.lp-page .pos__p { max-width: 100%; }
/* ---------- 第14条 · 顶层设计 · 五大支柱 ----------
① 标题字号 > 描述字号；② 描述行通栏；③ 序号与标题同一行；④ hover + 入场动画 */
.lp-page .frame__lab {
font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
font-weight: 800;
color: var(--c-primary)
}
.lp-page .frame__sub { font-size: var(--t-sm); max-width: 100%; }
/* 原 .fcol 为 flex column（952 行），inline 排版不生效 —— 改为块级，让序号与标题自然同行 */
.lp-page .fcol { display: block; }
.lp-page .fcol__n {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; margin: 0 10px 0 0; border-radius: 7px;
vertical-align: middle;
background: var(--nbox-bg); color: var(--c-primary);
border: 1px solid var(--bd-strong);
font-size: 13px; font-weight: 700; letter-spacing: .02em
}
.lp-page .fcol__t { display: inline-block; vertical-align: middle; }
.lp-page .fcol__d { margin-top: 10px; }
.lp-page .fcol {
transition: transform .22s var(--ease), box-shadow .22s var(--ease),
border-color .22s var(--ease), background-color .22s var(--ease)
}
.lp-page .fcol:hover {
transform: translateY(-4px);
border-color: rgba(22, 93, 255, .42);
box-shadow: var(--sh-2);
background: linear-gradient(180deg, #FFFFFF 0%, #F3F7FF 100%)
}
.lp-page .fcol:hover .fcol__n { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
/* 卡片自动浮现动画（入场后依次错峰，仅一次，不循环干扰阅读） */
.lp-page .frame__grid .fcol { animation: fcolIn .5s var(--ease) both; }
.lp-page .frame__grid .fcol:nth-child(1) { animation-delay: .04s; }
.lp-page .frame__grid .fcol:nth-child(2) { animation-delay: .10s; }
.lp-page .frame__grid .fcol:nth-child(3) { animation-delay: .16s; }
.lp-page .frame__grid .fcol:nth-child(4) { animation-delay: .22s; }
.lp-page .frame__grid .fcol:nth-child(5) { animation-delay: .28s; }
@keyframes fcolIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* ---------- 第15条 · 服务矩阵：标题行不折行 ---------- */
@media (min-width: 992px) {
.lp-page #services .h2 { white-space: nowrap; }
}
/* ---------- 第16条 · 产品体系 ----------
① 职能域列表由「一行 2 个」改为「一行 1 个」；② 展开后内容字号/颜色分层，服务项重点突出 */
.lp-page .clist { grid-template-columns: minmax(0, 1fr) !important; }
.lp-page .cl { max-width: 100%; }
.lp-page .cl__detail .dblock__h {
font-size: var(--t-h4); color: var(--tx); letter-spacing: .01em;
padding-left: 10px; border-left: 3px solid var(--c-primary); line-height: 1.4
}
.lp-page .cl__detail .dsub__note { font-size: var(--t-xs); color: var(--tx-4); }
.lp-page .cl__detail .dsub li {
gap: 12px; padding: 12px 0;
border-bottom: 1px dashed var(--bd)
}
.lp-page .cl__detail .dsub li i {
flex-shrink: 0; font-size: var(--t-label); color: var(--c-primary);
background: var(--nbox-bg); border: 1px solid var(--bd-strong)
}
.lp-page .cl__detail .dsub li span {
font-size: var(--t-body); color: var(--tx); font-weight: 600; line-height: 1.7
}
/* ---------- 第17条 · 交付闭环 ----------
① 五个环节同一行；② 左侧环形图缩到与右侧步骤视觉等高的尺度；
③ 下方三卡：图标与标题同一行 + 重新设计 */
.lp-page .h2--nowrap { overflow-x: auto; overflow-y: hidden; }
.lp-page .h2--nowrap .h2__line { display: inline-block; white-space: nowrap; }
.lp-page .loop { align-items: center; }
.lp-page .loop__fig { max-width: 360px; }
.lp-page .loop__fig svg { max-height: 420px; }
/* 三卡：改为「图标 + 右侧文字」横向结构，图标替换为更能表达语义的新图标（见 HTML） */
.lp-page .pvals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-page .pval { flex-direction: row; align-items: flex-start; gap: 14px; }
.lp-page .pval::before { width: 3px; }
.lp-page .pval__ico { flex-shrink: 0; width: 42px; height: 42px; }
.lp-page .pval__b { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.lp-page .pval__ico svg { width: 22px; height: 22px; }
.lp-page .pval__t { font-size: var(--t-body); }
.lp-page .pval__d { font-size: var(--t-xs); }
.lp-page .pval {
transition: transform .22s var(--ease), box-shadow .22s var(--ease),
border-color .22s var(--ease), background-color .22s var(--ease)
}
.lp-page .pval:hover {
transform: translateY(-3px); box-shadow: var(--sh-2);
border-color: rgba(22, 93, 255, .42);
background: linear-gradient(180deg, #FFFFFF 0%, #F3F7FF 100%)
}
/* ---------- 第18条 · 核心优势：序号与标题同一行 + 卡片重设计 ---------- */
.lp-page .advgrid > li,
.lp-page .advgrid > li.advcta { display: block; padding: clamp(1.125rem, 2vw, 1.5rem) clamp(1.125rem, 2vw, 1.5rem) var(--s-5); }
.lp-page .advgrid .adv__n,
.lp-page .advgrid .advcta__k {
display: inline-flex; align-items: center; justify-content: center;
vertical-align: middle; margin-bottom: 0; margin-right: 10px
}
.lp-page .advgrid .adv__t,
.lp-page .advgrid .advcta__t { display: inline-block; vertical-align: middle; margin-bottom: 0; }
.lp-page .advgrid .adv__d,
.lp-page .advgrid .advcta__d { margin-top: 10px; }
.lp-page .advgrid > li:hover {
transform: translateY(-4px); box-shadow: var(--sh-2);
border-color: rgba(22, 93, 255, .42);
background: linear-gradient(180deg, #FFFFFF 0%, #F3F7FF 100%)
}
.lp-page .advgrid > li:hover .adv__n,
.lp-page .advgrid > li:hover .advcta__k {
background: var(--c-primary); color: #fff; border-color: var(--c-primary)
}
.lp-page .advcta__k { align-self: center; margin-bottom: 0; margin-right: 10px; vertical-align: middle; }
.lp-page .advcta__t { display: inline-block; vertical-align: middle; margin-bottom: 0; }
.lp-page .advcta__d { margin-top: 10px; }
/* ---------- 第19条 · 深度专题：左栏与右栏等高（消除两列高度落差） ---------- */
.lp-page .twrap { align-items: stretch; }
.lp-page .tlist {
display: grid; grid-auto-rows: 1fr; gap: var(--s-2);
align-self: stretch
}
.lp-page .titem { height: 100%; }
.lp-page .tstage { align-self: stretch; }
.lp-page .tpanel { min-height: 100%; justify-content: flex-start; }
.lp-page .tpanel__s { max-width: 100%; }
/* ---------- 第20条 · 服务对象：一行 1 个 + 四类颜色区分 ---------- */
.lp-page .clients { grid-template-columns: minmax(0, 1fr) !important; }
.lp-page .clients > li { padding: var(--s-5) var(--s-6); }
.lp-page .clients > li:nth-child(1)::before { width: 5px; background: linear-gradient(180deg, #165DFF, #5B8DEF); }
.lp-page .clients > li:nth-child(2)::before { width: 5px; background: linear-gradient(180deg, #0E9F6E, #34BD8A); }
.lp-page .clients > li:nth-child(3)::before { width: 5px; background: linear-gradient(180deg, #B8934C, #D4AF66); }
.lp-page .clients > li:nth-child(4)::before { width: 5px; background: linear-gradient(180deg, #7A5AF8, #A88BFF); }
.lp-page .clients > li:nth-child(1) { background: linear-gradient(180deg, #FFFFFF 0%, #F3F7FF 100%); }
.lp-page .clients > li:nth-child(2) { background: linear-gradient(180deg, #FFFFFF 0%, #F2FBF7 100%); }
.lp-page .clients > li:nth-child(3) { background: linear-gradient(180deg, #FFFFFF 0%, #FFFBF4 100%); }
.lp-page .clients > li:nth-child(4) { background: linear-gradient(180deg, #FFFFFF 0%, #F8F5FF 100%); }
.lp-page .clients > li:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
/* ---------- 第21条 · 常见问题：字号重新设计（原偏小） ---------- */
.lp-page .faq__q { font-size: var(--t-h3); font-weight: 700; padding: var(--s-4) var(--s-5); }
.lp-page .faq__a p { font-size: var(--t-body); color: var(--tx-2); line-height: 1.9; }
/* ---------- 第22条 · CTA 表单 ----------
① 已删除 `.rv.in:not(:hover)` 回退规则（标题 hover 不再下压盖住正文）；
② 「开始」标签字号随全局 eyebrow 口径放大；
③ 描述文字撑满左栏，右边缘与右侧表单卡右边缘对齐；
④ 姓名+框+手机+框 同行；企业名称+框 同行；企业规模+下拉+关注方向+下拉 同行 */
.lp-page .cta__p { max-width: 100%; }
.lp-page .frow { margin-bottom: 0; }
.lp-page .frow--inline { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin-bottom: var(--s-3); }
.lp-page .fld--inline {
display: flex; flex-direction: row; align-items: center; gap: 10px;
position: relative; margin-bottom: 0; padding-bottom: 14px
}
.lp-page .fld--inline label { flex: 0 0 auto; white-space: nowrap; margin: 0; }
.lp-page .fld--inline input,
.lp-page .fld--inline select { flex: 1 1 auto; min-width: 0; width: auto; }
.lp-page .fld--inline .err { position: absolute; left: 0; top: calc(100% - 12px); }
.lp-page .frow > .fld--inline { padding-bottom: 14px; }
/* ============================================================
20 响应式
============================================================ */
/* P2 断点收敛：原为 max-width:1200px，与全站主流档位 1199px 仅差 1px（等效），
统一到 1199px 以免后续误以为这里还有第五档。
注意：本站**刻意保留** 1080 / 900 / 760 / 720 / 640 / 560 等独立断点 ——
它们各自对应具体组件的塌缩宽度，强行收敛到 1200/992/768/576 四档会改变这些区间的布局。 */
@media (max-width: 1199px) {
.lp-page .domatrix {
grid-template-columns: repeat(3, 1fr)
}
}
@media (max-width: 1100px) {
.lp-page .frame__grid {
grid-template-columns: repeat(3, 1fr)
}
.lp-page .fcol {
border-left: none;
border-top: 1px solid var(--bd-2)
}
.lp-page .fcol:nth-child(-n+3) {
border-top: none
}
.lp-page .advgrid {
grid-template-columns: repeat(2, 1fr)
}
}
@media (max-width: 1000px) {
.lp-page .hero__grid {
grid-template-columns: 1fr;
gap: var(--s-10)
}
.lp-page .hero__fig {
max-width: 560px
}
.lp-page .stats {
grid-template-columns: repeat(2, 1fr)
}
.lp-page .stat {
border-bottom: 1px solid var(--bd-2)
}
.lp-page .stat:nth-child(odd) {
border-right: 1px solid var(--bd-2)
}
.lp-page .stat:nth-child(n+4) {
border-bottom: none
}
.lp-page .pos {
grid-template-columns: 1fr;
row-gap: var(--s-6)
}
.lp-page .pos__badges {
grid-template-columns: repeat(3, 1fr);
gap: var(--s-3) var(--s-5);
border-top: 1px solid rgba(255, 255, 255, 0.14);
padding-top: var(--s-5)
}
.lp-page .pos__badges li {
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: 0;
border-bottom: none
}
.lp-page .pos__badges span {
text-align: left
}
.lp-page .pos__chain {
flex-direction: column;
gap: var(--s-2)
}
.lp-page .pos__link {
min-width: 0
}
.lp-page .pos__arrow {
transform: rotate(90deg);
align-self: center;
line-height: 1
}
.lp-page .twrap {
grid-template-columns: 1fr
}
.lp-page .tlist {
position: static;
flex-direction: row;
flex-wrap: wrap
}
.lp-page .titem {
flex: 1;
min-width: 150px
}
.lp-page .titem__go {
display: none
}
.lp-page .loop {
grid-template-columns: 1fr;
gap: var(--s-8)
}
.lp-page .loop__fig {
position: static;
max-width: 360px;
margin-inline: auto
}
.lp-page .cta__grid, .lp-page .clients, .lp-page .pvals {
grid-template-columns: 1fr
}
}
@media (max-width: 820px) {
.lp-page .domatrix {
grid-template-columns: repeat(2, 1fr)
}
.lp-page .cl__split {
grid-template-columns: 1fr
}
.lp-page .cl__side {
position: static
}
.lp-page .advgrid {
grid-template-columns: repeat(2, 1fr)
}
}
@media (max-width: 700px) {
.lp-page {
--sec-y: clamp(1.5rem, 4.4vw, 2.25rem)
}
.lp-page .frame__grid {
grid-template-columns: repeat(2, 1fr)
}
.lp-page .fcol {
border-top: 1px solid var(--bd-2)
}
.lp-page .fcol:nth-child(-n+2) {
border-top: none
}
.lp-page .foot__grid, .lp-page .frow, .lp-page .dsub {
grid-template-columns: 1fr
}
.lp-page .svcbar__search {
margin-left: 0;
width: 100%;
min-width: 0
}
.lp-page .btn {
height: 46px;
padding: 0 20px
}
.lp-page .advgrid {
grid-template-columns: 1fr
}
.lp-page .pos__badges {
grid-template-columns: 1fr;
gap: var(--s-2)
}
.lp-page .pos__badges li {
flex-direction: row;
align-items: baseline;
justify-content: space-between
}
.lp-page .pos__badges span {
text-align: right
}
.lp-page .pos__insight {
padding: var(--s-4) var(--s-5)
}
.lp-page .filterbar {
padding: var(--s-4)
}
}
@media (max-width: 560px) {
.lp-page .frame__grid {
grid-template-columns: 1fr
}
.lp-page .fcol {
border-top: 1px solid var(--bd-2)
}
.lp-page .fcol:nth-child(-n+2) {
border-top: 1px solid var(--bd-2)
}
.lp-page .fcol:first-child {
border-top: none
}
.lp-page .domatrix {
grid-template-columns: 1fr
}
.lp-page .stats {
grid-template-columns: 1fr
}
.lp-page .stat {
/* 必须 !important：基础规则 .lp-page .stat:nth-child(odd)（0,3,0）特异性高于此处
的 .lp-page .stat（0,2,0），且媒体查询不提升特异性，去边框只能靠 !important。 */
border-right: none !important
}
.lp-page .titem {
min-width: 100%
}
}
@media (prefers-reduced-motion: reduce) {
.lp-page * {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important
}
.lp-page .rv {
opacity: 1;
transform: none
}
}
@media (prefers-contrast: more) {
.lp-page {
--tx-3: #4A4F55;
--tx-4: #5A6068;
--bd: #9AA0A8;
--bd-2: #C4C8CE;
--bd-card: #A8AEB6
}
}
@media print {
.lp-page .nav, .lp-page .progress, .lp-page .drawer, .lp-page .mq, .lp-page .hero__fig, .lp-page .side__cta {
display: none !important
}
.lp-page {
background: #fff
}
.lp-page .topics, .lp-page .cta, .lp-page .foot {
background: #fff !important;
color: #000 !important
}
.lp-page .topics .h2, .lp-page .cta .h2, .lp-page .tpanel__h, .lp-page .tpanel__s, .lp-page .cta__p, .lp-page .lede--light {
color: #000 !important
}
}
.lp-page .side {
position: sticky;
top: calc(var(--nav-h) + var(--s-4));
display: flex;
flex-direction: column;
gap: var(--s-4)
}
/* ============================================================
需求轮 6（文档《网站优化 V3》）—— 管理咨询落地页样式段
============================================================ */
/* --- 需求14 第②项（根因：hero 被固定高度裁切）---
.hero 在 style.css:392 声明 `height: 600px; overflow: hidden`，
而 .lp-page .hero（本文 07 节）**未声明 height** —— 未声明不等于覆盖，
故该固定高度一直作用于本页 hero，配合 overflow:hidden 造成内容被裁。
实测（1440px 视口）：clientHeight 600 / scrollHeight 673 → 内容溢出 73px，
.wrap / .stats / .stat / .stat__l 依次被裁（最大 30.3px）；又因 .mq 紧随 hero，
视觉上「业务定位」模块像压住了 hero 内的统计条。
改为 height:auto + min-height，保留原视觉基线高度，内容超出时自然撑开。
overflow:hidden 保留：hero 的 ::before 光晕与斜切过渡仍需裁切在自身范围内。 */
.lp-page .hero { height: auto; min-height: 600px; }
@media (max-width: 1199px) { .lp-page .hero { min-height: 400px; } }
@media (max-width: 767px) { .lp-page .hero { min-height: 220px; } }
/* --- 需求14 第①项：跑马灯与其上方模块保持间距 ---
.mq 与 .hero 是相邻兄弟且两者都没有纵向外边距 → 实测间距 0。
取站点纵向节奏令牌 --sec-y（.section 的 padding-block 同源），使
「hero → 跑马灯」的间距与站内其它模块节奏一致。
hero 无 margin-bottom，故本 margin-top 不会发生外边距折叠。 */
.lp-page .mq { margin-top: var(--sec-y); }
/* ============================================================
需求优化v6 · 咨询页专项（第 4 ~ 10 条）
============================================================ */
/* ---------- 需求优化v7 第1条 · 跑马灯字号适度回调（保留加粗） ---------- */
.lp-page .mq { margin-top: 10px; }
.lp-page .mq__track span {
font-weight: 800;
font-size: clamp(.8125rem, .95vw, .9375rem);
letter-spacing: .02em;
color: var(--tx-2)
}
/* ---------- 第5/6/7 条 · 咨询页字号层级重设计（总表） ----------
L1 章节标题 01业务定位…：20px w800 → clamp(22,2vw,28) w900 【第5条 加大加粗】
L2 章节子标题「把方向看清…」：18px w500 → clamp(20,1.8vw,25) w700 【第6层递进 + 第7条 加粗】
L3 卡片标题（服务线 / 语域 / 步骤 / 优势 / 客户 / 专题）：统一 clamp(19,1.35vw,21) w700
L4 正文与导语：15px → 16.5px
L5 辅助 / 编号 / 元信息：13~14px（编号与横线同步收小，见第10条）
L0 hero 主标题同步放大一档；整体较上一版等比放大约 6%~8%。 */
.lp-page .hero h1 { font-size: clamp(1.75rem, 3vw, 2.375rem); }
.lp-page .hero__tag {
font-size: clamp(.9375rem, 1.05vw, 1.0625rem);
font-weight: 800;
letter-spacing: .16em
}
.lp-page .eyebrow__t {
font-size: clamp(1.375rem, 2vw, 1.75rem);
font-weight: 900;
letter-spacing: .02em;
color: var(--c-primary)
}
.lp-page .eyebrow__n { min-width: 36px; height: 30px; font-size: 15px; font-weight: 800; }
.lp-page .h2 {
font-size: clamp(1.25rem, 1.85vw, 1.5625rem);
font-weight: 700;
line-height: 1.46
}
.lp-page .lede,
.lp-page .sec-head .lede { font-size: 16.5px; line-height: 1.85; }
.lp-page .hero__quote { font-size: clamp(1.0625rem, 1.35vw, 1.1875rem); }
.lp-page .hero__sub { font-size: 16px; line-height: 1.9; }
/* L3 · 卡片标题统一到同一档（原 19~24px 参差） */
.lp-page .domc__t,
.lp-page .fcol__t,
.lp-page .pstep__t,
.lp-page .adv__t,
.lp-page .advcta__t,
.lp-page .pval__t,
.lp-page .tpanel__h,
.lp-page .client__t,
.lp-page .dblock__h,
.lp-page .svc__t {
font-size: clamp(1.1875rem, 1.35vw, 1.3125rem);
font-weight: 700;
line-height: 1.4
}
/* L4 · 卡片正文 */
.lp-page .svc__q,
.lp-page .pstep__d,
.lp-page .adv__d,
.lp-page .advcta__d,
.lp-page .client__d,
.lp-page .dlead,
.lp-page .tpanel__s,
.lp-page .proc__note,
.lp-page .cta__p { font-size: 16px; line-height: 1.8; }
/* ---------- 第5条③ · 常见问题列表标题大幅减小（24 → 17px） ----------
需求优化v7 第9条修复：此前 `.faq__q > span` 的 flex 规则会同时命中
展开指示符 .faq__i2（同为 span），把「+」拉成整行横线导致版式损坏；
已删除该规则，问题文字行改为自然伸展（.faq__q 已是 flex 布局）。 */
.lp-page .faq__q { font-size: 15.5px; font-weight: 600; line-height: 1.6; }
.lp-page .faq__q > span:not(.faq__i2) { flex: 1 1 auto; min-width: 0; }
.lp-page .faq__a p { font-size: 16px; line-height: 1.85; }
/* ---------- 第8条 · 业务定位徽章重设计 ----------
原样式是深色卡上的三行「数值 + 标签」下划线列表，信息弱、无焦点。
重设计为三枚独立数据胶囊：金色竖条 + 玻璃拟态底 + 大号衬线数值，
悬停抬升并提亮，与 .pos 深色区形成清晰的数据锚点。 */
.lp-page .pos__badges {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
border-top: 0;
padding-top: 0
}
.lp-page .pos__badges li {
position: relative; overflow: hidden;
display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
padding: 12px 14px 12px 17px;
border-radius: 13px;
background: linear-gradient(135deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .06) 100%);
border: 1px solid rgba(255, 255, 255, .18);
transition: transform .28s var(--ease), background .28s var(--ease),
border-color .28s var(--ease), box-shadow .28s var(--ease)
}
.lp-page .pos__badges li:first-child {
padding-top: 12px
}
.lp-page .pos__badges li::before {
content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px;
border-radius: 0 3px 3px 0;
background: linear-gradient(180deg, #F0C669 0%, #D8A745 100%);
opacity: .95
}
.lp-page .pos__badges li::after {
content: ""; position: absolute; right: -22px; top: -26px;
width: 78px; height: 78px; border-radius: 50%;
background: rgba(255, 255, 255, .07); pointer-events: none
}
.lp-page .pos__badges li:hover {
transform: translateY(-4px);
background: linear-gradient(135deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .1) 100%);
border-color: rgba(240, 198, 105, .55);
box-shadow: 0 14px 28px rgba(4, 18, 56, .26)
}
.lp-page .pos__badges b {
font-size: clamp(1.375rem, 1.9vw, 1.75rem);
font-weight: 800; line-height: 1.2; color: #fff;
font-variant-numeric: tabular-nums
}
.lp-page .pos__badges span {
font-size: 13px; color: rgba(255, 255, 255, .72);
text-align: left; letter-spacing: .02em
}
@media (max-width: 767px) {
.lp-page .pos__badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---------- 第9条 · 服务矩阵亮点列表 4 行 → 2 行 × 2 条 ---------- */
.lp-page .domc__lines--feat {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 var(--s-3)
}
.lp-page .domc__lines--feat li { padding: 5px 0; }
/* ---------- 第10条 · 产品体系列表：标题与序号适度调小 ---------- */
#catalogGrid .svc__t { font-size: clamp(1.125rem, 1.15vw, 1.25rem); }
#catalogGrid .svc__n {
font-size: 12px;
letter-spacing: .06em;
gap: 6px
}
#catalogGrid .svc__n::before { width: 10px; opacity: .35; }
/* ============================================================
需求优化v7 · 咨询页专项（第 2 ~ 10 条）
============================================================ */
/* ---------- 第2条 · 业务定位徽章再次重设计 ----------
放弃上一版的玻璃拟态胶囊（在深蓝底上显得灰暗拥挤、17/88 还会折行），
改为「金色衬线大数字 + 细分隔线」的三列数据带：
数字用品牌金（与深蓝底对比最高级），标签浅色小字，
hover 时数字提亮、底部金线延展 —— 简洁、大气、有数据锚点感。 */
.lp-page .pos__badges {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
border-top: 0;
padding-top: 0
}
.lp-page .pos__badges li {
position: relative;
display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
padding: 4px 18px 10px;
background: none; border: 0; border-radius: 0; box-shadow: none;
transition: transform .28s var(--ease)
}
.lp-page .pos__badges li::before {
content: ""; display: none
}
.lp-page .pos__badges li::after {
content: ""; position: absolute; left: 0; right: auto; bottom: 0;
width: 26px; height: 2px; border-radius: 2px;
background: linear-gradient(90deg, #F0C669 0%, rgba(240, 198, 105, .25) 100%);
transition: width .35s var(--ease)
}
.lp-page .pos__badges li + li::before {
content: ""; display: block; position: absolute; left: 0; top: 6px; bottom: 10px;
width: 1px; height: auto; border-radius: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .28) 30%, rgba(255, 255, 255, .28) 70%, rgba(255, 255, 255, 0) 100%)
}
.lp-page .pos__badges li:hover { transform: translateY(-3px); background: none; box-shadow: none; }
.lp-page .pos__badges li:hover::after { width: 58px; }
.lp-page .pos__badges b {
font-family: var(--f-serif);
font-size: clamp(1.375rem, 1.8vw, 1.75rem);
font-weight: 700; line-height: 1;
color: #F0C669; letter-spacing: 0; white-space: nowrap;
font-variant-numeric: tabular-nums;
transition: color .28s var(--ease)
}
.lp-page .pos__badges li:hover b { color: #FFD98A; }
.lp-page .pos__badges span {
font-size: 13px; color: rgba(255, 255, 255, .66);
text-align: left; letter-spacing: .05em
}
@media (max-width: 767px) {
.lp-page .pos__badges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-page .pos__badges li { padding: 4px 12px 8px; }
.lp-page .pos__badges b { font-size: clamp(1.375rem, 5.6vw, 1.75rem); }
.lp-page .pos__badges span { font-size: 12px; }
}
/* ---------- 第3条 · 服务矩阵卡头 ----------
序号方块改为拉伸贴齐：高度自动等于「中文标题 + 英文小字」文字块总高；
英文字号再收一档（12 → 11px）；卡头内边距收窄，降低头部区块高度。 */
.lp-page .domc__head { padding: 13px 18px; gap: 12px; }
.lp-page .domc__n {
width: 42px; height: auto; align-self: stretch;
border-radius: 10px; font-size: 15px
}
.lp-page .domc__en { font-size: 11px; margin-top: 1px; }
/* ---------- 第4条 · 产品体系列表右侧专题序号徽章调小 ---------- */
.lp-page .cl__topic { font-size: 11px; padding: 2px 8px; }
/* ---------- 第5条 · 展开详情面板六个小标题改品牌蓝 ----------
「这项服务解决什么问题 / 本服务线包含的服务项 / 核心内容 / 关键交付物 /
典型成效 / 关联深度专题」—— dblock__h 标题文字由墨色改为主蓝，
与标题前已有的蓝色竖条、面板内链接的蓝色呼应，层级更清晰。 */
.lp-page .dblock__h { color: var(--c-primary); }
.lp-page .dblock__h::before { background: var(--c-primary); }
/* ↑ 通用覆盖；展开详情面板内的标题另有更高特异性规则（.cl__detail .dblock__h），此处同口径覆盖 */
.lp-page .cl__detail .dblock__h { color: var(--c-primary); }
/* ---------- 第6条 · 交付闭环：左图对齐 + 后三卡满宽 ----------
需求三段的完整含义：
① 左侧图形顶端与右侧第 1 张步骤卡顶边对齐；
② 图形下端与第 2 张步骤卡下边框对齐 —— 用 grid 让图形跨「第1/第2卡」两行，
高度即自动等于两卡 + 行间距，无需 JS 计算；
③ 红框圈住的 3 个内容（第 3/4/5 张卡）宽度与网页左右对齐 ——
图形只占前两行，下方三张卡顺理成章跨满整个内容区（左缘=网页左、右缘=网页右）。 */
.lp-page .loop {
display: grid;
grid-template-columns: minmax(280px, 360px) 1fr;
column-gap: clamp(1.5rem, 3.5vw, 3rem);
row-gap: var(--s-3);
align-items: start
}
/* steps 容器透明化，让 5 张卡直接参与 .loop 的网格排布 */
.lp-page .loop__steps { display: contents; }
.lp-page .loop__fig {
grid-column: 1;
grid-row: 1 / span 2;
align-self: stretch
}
.lp-page .loop__fig svg {
display: block;
width: 100%;
height: 100%
}
/* 图注悬浮于图形底部内侧，保证图形下沿仍精确落在第 2 张卡下边框 */
.lp-page .loop__cap {
position: absolute;
left: 0; right: 0; bottom: 4px;
justify-content: center;
background: rgba(255, 255, 255, .86)
}
#procGrid .pstep:nth-child(1) { grid-column: 2; grid-row: 1; }
#procGrid .pstep:nth-child(2) { grid-column: 2; grid-row: 2; }
#procGrid .pstep:nth-child(n+3) { grid-column: 1 / -1; }
@media (max-width: 1199px) {
.lp-page .loop { grid-template-columns: 1fr; row-gap: var(--s-3); }
.lp-page .loop__fig { grid-column: 1; grid-row: auto; align-self: auto; }
.lp-page .loop__fig svg { height: auto; }
.lp-page .loop__cap { position: static; background: none; }
#procGrid .pstep:nth-child(1),
#procGrid .pstep:nth-child(2),
#procGrid .pstep:nth-child(n+3) { grid-column: 1; grid-row: auto; }
}
/* ---------- 第7条 · 核心优势：序号与标题同行 + hover 背景加深 ----------
结构已在 landing-app.js 调整为 .adv__hd 弹性行（序号徽章 + 标题），
序号高度与标题行高一致；悬停时卡片背景由浅蓝渐变加深为更实的蓝色调。 */
.lp-page .advgrid .adv__hd {
display: flex; align-items: stretch; gap: 11px;
margin-bottom: 10px
}
.lp-page .advgrid .adv__n,
.lp-page .advgrid .advcta__k {
display: inline-flex; align-items: center; justify-content: center;
min-width: 42px; height: auto; align-self: stretch; margin: 0; flex-shrink: 0;
padding: 0 10px
}
.lp-page .advgrid .adv__t,
.lp-page .advgrid .advcta__t { display: block; margin: 0; }
.lp-page .advgrid > li:hover {
background: linear-gradient(180deg, #FFFFFF 0%, #DCE7FF 100%);
}
.lp-page .advgrid > li.advcta:hover { background: linear-gradient(150deg, #FFF7E8 0%, #FFFDF6 100%); }
/* ---------- 第8条 · 服务对象「典型服务组合」一行 3 条 ----------
修正：v7 首版误改了「直达服务线」的 .client__lks（链接胶囊组）。
用户要求的「典型服务组合」是客群卡内的 .client__ul（原本一行显示一条、
带圆点与虚线分隔）。此处改为 3 列网格，并还原 .client__lks 原有胶囊流式布局。 */
.lp-page .client__ul {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2px 14px
}
.lp-page .client__ul li { align-items: flex-start; }
/* 3 列后仅首行不带上分隔线，保持行间层次 */
.lp-page .client__ul li:nth-child(-n+3) { border-top: none; }
.lp-page .client__lks { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-page .client__lk { width: auto; }
@media (max-width: 900px) {
.lp-page .client__ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-page .client__ul li:nth-child(-n+2) { border-top: none; }
.lp-page .client__ul li:nth-child(3) { border-top: 1px dashed var(--bd-2); }
}
@media (max-width: 575px) {
.lp-page .client__ul { grid-template-columns: minmax(0, 1fr); }
.lp-page .client__ul li { border-top: 1px dashed var(--bd-2); }
.lp-page .client__ul li:first-child { border-top: none; }
}
/* ---------- 第10条 · 深度专题推翻重设计 ----------
深蓝底上的「策展式」版面：
① 左列专题目录 —— 金色衬线大编号 + 标题，激活项金色左竖条 + 微亮底 + 箭头右移；
② 右侧详情面板 —— 右上角超大半透明编号水印（层次锚点），标题下金色细线，
「实施要点」改为金色编号 + 竖向连接线的 timeline；关联服务线金色描边 chips；
③ 切换时淡入上移动效，尊重 prefers-reduced-motion。 */
.lp-page .twrap { gap: clamp(1.25rem, 2.4vw, 2rem); }
.lp-page .tlist { gap: 6px; }
.lp-page .titem {
position: relative;
align-items: center;
padding: 13px 16px 13px 20px;
border-radius: 12px;
border: 1px solid transparent;
transition: background .28s var(--ease), border-color .28s var(--ease)
}
.lp-page .titem::before {
content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
border-radius: 0 3px 3px 0;
background: linear-gradient(180deg, #F0C669, #D8A745);
opacity: 0; transition: opacity .28s var(--ease)
}
.lp-page .titem:hover { background: rgba(255, 255, 255, .07); }
.lp-page .titem.is-on { background: rgba(255, 255, 255, .1); border-color: rgba(240, 198, 105, .32); }
.lp-page .titem.is-on::before { opacity: 1; }
.lp-page .titem__n {
font-family: var(--f-serif);
font-size: 22px; font-weight: 700; color: rgba(255, 255, 255, .42);
transition: color .28s var(--ease)
}
.lp-page .titem.is-on .titem__n { color: #F0C669; }
.lp-page .titem__t { color: #fff; }
.lp-page .titem__s { color: rgba(255, 255, 255, .55); }
.lp-page .titem__go { transition: transform .28s var(--ease); color: rgba(255, 255, 255, .45); }
.lp-page .titem:hover .titem__go { transform: translateX(4px); color: #F0C669; }
.lp-page .tpanel { position: relative; overflow: hidden; }
.lp-page .tpanel::before {
content: attr(data-n);
position: absolute; right: 18px; top: -34px;
font-family: var(--f-serif); font-weight: 700;
font-size: clamp(120px, 12vw, 176px); line-height: 1;
color: rgba(240, 198, 105, .07);
pointer-events: none; user-select: none
}
.lp-page .tpanel__nbox {
background: linear-gradient(135deg, rgba(240, 198, 105, .22), rgba(240, 198, 105, .1));
border: 1px solid rgba(240, 198, 105, .45);
color: #F0C669
}
.lp-page .tpanel__h { color: #fff; }
.lp-page .tpanel__hgroup { position: relative; }
.lp-page .tpanel__hgroup::after {
content: ""; display: block; margin-top: 14px;
width: 56px; height: 2px; border-radius: 2px;
background: linear-gradient(90deg, #F0C669, rgba(240, 198, 105, .2))
}
.lp-page .tpanel__s { color: rgba(255, 255, 255, .78); }
/* 实施要点 → 金色编号 timeline */
.lp-page .tpanel__ul { position: relative; }
.lp-page .tpanel__ul::before {
content: ""; position: absolute; left: 15px; top: 10px; bottom: 10px; width: 1px;
background: linear-gradient(180deg, rgba(240, 198, 105, .4), rgba(240, 198, 105, .08))
}
.lp-page .tpanel__ul li {
position: relative; display: flex; gap: 14px; align-items: flex-start;
padding: 9px 0
}
.lp-page .tpanel__ul li i {
position: relative; z-index: 1;
display: inline-flex; align-items: center; justify-content: center;
width: 31px; height: 31px; flex-shrink: 0;
border-radius: 50%;
background: #0A2A6B;
border: 1px solid rgba(240, 198, 105, .5);
color: #F0C669; font-style: normal;
font-family: var(--f-mono); font-size: 12px; font-weight: 700
}
.lp-page .tpanel__ul li b { color: #fff; }
.lp-page .tpanel__ul li p { color: rgba(255, 255, 255, .66); margin-top: 2px; }
.lp-page .trel__h { color: rgba(255, 255, 255, .6); }
.lp-page .trel__c {
border: 1px solid rgba(240, 198, 105, .4);
color: #F5D9A8;
transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease)
}
.lp-page .trel__c:hover {
background: rgba(240, 198, 105, .16); border-color: rgba(240, 198, 105, .75); color: #FFE7B8
}
/* 切换动效 */
@media (prefers-reduced-motion: no-preference) {
.lp-page .tpanel { animation: v7panel .45s var(--ease) both; }
@keyframes v7panel {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
}
/* ==================== 需求优化v8 · 第2条 深度专题左右两侧重构 ====================
① 激活态可读性：旧的「白底 + 深蓝字」配套规则已在上方源头修正为「微亮深底 + 白/金字」，
彻底解决点击后文字被背景吞掉的问题；
② 左列排版重排 —— 编号移到行首作为金色锚点，标题放大到 17px 并优先占行，
说明行降到 mono 11.5px 作为次级信息，箭头右移反馈；卡片内留出纵向呼吸感；
③ 右侧图版规范化 —— 原先 svg 只有 560px 宽居中于 888px 图版、而图注却有 838px 宽，
文字明显跑出图片区域。现把 figure 收敛成独立的「图版卡片」（宽度 min(100%,660px) 居中、
描边 + 圆角 + 内边距），svg 与图注同宽，图注用细线与图片分隔、字号居中下沉，
保证文字始终落在图版之内；各专题 fig viewBox 比例不同也让图片按自身比例展示。 */
.lp-page .tlist { gap: 8px; }
.lp-page .titem {
align-items: stretch;
gap: 14px;
padding: 15px 18px 15px 22px;
border-radius: 14px
}
.lp-page .titem__n {
width: 34px; height: 34px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
margin-top: 1px;
font-size: 15px
}
.lp-page .titem__body { gap: 5px; justify-content: center; }
.lp-page .titem__t {
font-size: 17px;
font-weight: 700;
line-height: 1.4;
letter-spacing: .01em
}
.lp-page .titem__s {
font-size: 11.5px;
letter-spacing: .06em;
color: rgba(255, 255, 255, .5)
}
.lp-page .titem.is-on .titem__s { color: rgba(255, 255, 255, .72); }
.lp-page .titem.is-on .titem__n {
background: linear-gradient(135deg, rgba(240, 198, 105, .26), rgba(240, 198, 105, .12));
border-color: rgba(240, 198, 105, .5)
}
.lp-page .titem__go { align-self: center; font-size: 16px; }
/* 右侧：图版卡片 —— 图片与图注同宽，文字不越界 */
.lp-page .tpanel__fig {
width: min(100%, 660px);
margin: 6px auto 0;
padding: 14px 14px 10px;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 14px;
background: rgba(255, 255, 255, .035);
display: flex;
flex-direction: column
}
.lp-page .tpanel__fig svg {
display: block;
width: 100%;
height: auto
}
.lp-page .tpanel__cap {
margin-top: 10px;
padding-top: 9px;
border-top: 1px solid rgba(255, 255, 255, .1);
/* 图注与图片同宽（svg 有 max-width:560px），保证文字横向不越出图片区域 */
width: min(100%, 560px);
margin-inline: auto;
text-align: center;
font-size: 12.5px;
line-height: 1.65;
color: rgba(255, 255, 255, .68)
}
@media (max-width: 1199px) {
.lp-page .tpanel__fig { width: 100%; }
.lp-page .titem__t { font-size: 16px; }
}
/* ==================== 需求优化v9 · 第3条 落地页归属索引 ====================
落地页（管理咨询/赋能陪跑/人才管理/企业团建）顶部面包屑：
沿用全站 .breadcrumb 样式，仅补充落地页容器内的间距与分隔观感。 */
.lp-page .lp-crumb { padding: 14px 0 0; }
.lp-page .breadcrumb { font-size: 12.5px; color: var(--tx-3, #7a8499); }