/* ============================================================
   电梯码 · 产品落地页 设计系统 v3 —— 「友好高级风 · 浅色 Bento」
   面向买单方（维保公司）：明亮、亲和、可信赖；全屏 Hero + 动效保留
   依赖既有 HTML 结构与文案，选择器向前兼容
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --ink: #101828; --ink-2: #1D2939; --ink-3: #344054;
  --navy: #0B1F44; --navy-2: #12295A;
  --bg: #F4F6FB; --bg-2: #EDF0F8; --white: #FFFFFF;
  --line: #E4E9F4; --line-2: #EEF1F8; --line-dark: rgba(255,255,255,.16);
  --blue: #2352F5; --blue-d: #1B42D6; --blue-soft: #E9EEFE;
  --muted: #5D6B85; --muted-2: #8A96AD;
  --ok: #0F9958; --warn: #B26A00; --danger: #DE5B4C;
  --accent: var(--blue); --accent-d: var(--blue-d); --accent-soft: var(--blue-soft);
  --r: 20px; --r-sm: 14px;
  --shadow-s: 0 1px 2px rgba(23,43,99,.05), 0 6px 18px rgba(23,43,99,.06);
  --shadow-m: 0 2px 6px rgba(23,43,99,.06), 0 18px 44px rgba(23,43,99,.10);
  --shadow-l: 0 4px 10px rgba(23,43,99,.08), 0 30px 70px rgba(23,43,99,.16);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Courier New", monospace;
  --ease: cubic-bezier(.22, .61, .2, 1);
}

/* 三视角个性化主色（主页品牌蓝；维保=暖橙，买方主色） */
body.p-gov   { --accent: #2E5FE8; --accent-d: #2349C2; --accent-soft: #E9EFFE; --wnum: #A3C2FF; --wglow: rgba(90,140,255,.30); --wglow2: rgba(46,95,232,.22); }
body.p-owner { --accent: #0E9C85; --accent-d: #0B7E6C; --accent-soft: #E3F6F1; --wnum: #8FE0C9; --wglow: rgba(18,156,133,.26); --wglow2: rgba(90,140,255,.20); }
body.p-mnt   { --accent: #E87B0E; --accent-d: #C4670B; --accent-soft: #FCF0E1; --wnum: #FFC98A; --wglow: rgba(232,123,14,.28); --wglow2: rgba(90,140,255,.22); }

html { scroll-behavior: smooth; }
body {
  font-family: var(--sans); color: var(--ink); background: var(--bg);
  line-height: 1.75; font-size: 16px; -webkit-font-smoothing: antialiased;
  overflow-x: hidden; counter-reset: sec;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
section[id] { scroll-margin-top: 84px; }
::selection { background: var(--accent); color: #fff; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.section { padding: 116px 0; counter-increment: sec; position: relative; }
.section.alt { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* 滚动进度条 */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 300; }
.progress i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--accent), var(--blue)); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- 区块标题：眉标在上、大标题独占一行、副标题在下方 ---------- */
.sec-head { display: grid; grid-template-columns: 1fr; gap: 4px 0; margin-bottom: 60px; }
.sec-head .eyebrow {
  display: inline-flex; align-items: center; gap: 12px; justify-self: start;
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .2em;
  color: var(--accent); text-transform: uppercase; margin-bottom: 10px;
}
.sec-head .eyebrow::before { content: counter(sec, decimal-leading-zero); font-size: 12px; padding: 2px 9px; background: var(--accent-soft); border-radius: 99px; }
.sec-title { font-size: clamp(28px, 3.6vw, 46px); font-weight: 800; line-height: 1.24; letter-spacing: -.015em; color: var(--ink); }
.sec-sub { color: var(--muted); font-size: 16px; margin-top: 12px; /* max-width: 720px; */ }

/* ---------- 按钮：胶囊、友好 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 700; font-family: inherit; letter-spacing: .01em;
  border-radius: 999px; padding: 14px 30px; cursor: pointer; border: 1.5px solid transparent;
  transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 10px 24px rgba(35,82,245,.32); }
.btn-primary:hover { background: var(--blue-d); box-shadow: 0 14px 30px rgba(35,82,245,.42); }
.btn-accent { background: var(--accent); color: #fff; box-shadow: 0 10px 24px rgba(232,123,14,.3); }
.btn-accent:hover { background: var(--accent-d); }
.btn-ghost { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.18); }
.btn-outline { border-color: #C9D4EA; color: var(--ink); background: var(--white); }
.btn-outline:hover { border-color: var(--ink); background: var(--white); box-shadow: var(--shadow-s); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--ink-2); box-shadow: 0 12px 28px rgba(16,24,40,.28); }
.btn-sm { padding: 9px 20px; font-size: 13.5px; }
.btn-lg { padding: 16px 36px; font-size: 16px; }

/* ---------- 导航：通透式（顶部透明融入首屏，滚动后收成毛玻璃细条） ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 22px 0;
  background: transparent; border-bottom: 1px solid transparent;
  transition: padding .35s var(--ease), background .3s, border-color .3s, box-shadow .3s; }
.nav-inner { display: flex; align-items: center; gap: 36px; }
.brand { display: flex; align-items: baseline; color: var(--ink); }
.brand-name { font-size: 21px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.brand-name em { font-style: normal; font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--muted-2); margin-left: 10px; letter-spacing: .3em; }
/* 注册商标标注：SVG 圆圈 R，上标小号，继承文字颜色 */
.tm-r { vertical-align: super; line-height: 0; margin: 0 2px; }
.tm-r svg { display: inline-block; width: .55em; height: .55em; }
.nav-links { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav-links a { position: relative; color: var(--ink-3); font-size: 14.5px; font-weight: 600; padding: 8px 0; transition: color .2s; }
.nav-links a::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--accent); transform: translateX(-50%) scale(0); transition: transform .25s var(--ease); }
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--ink); }
.nav-links a.active::after { transform: translateX(-50%) scale(1); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav.scrolled { padding: 11px 0; background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(23,43,99,.05); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 22px; height: 2.5px; border-radius: 2px; background: var(--ink); transition: .25s; }

/* ---------- Hero：浅色全屏 + 光斑 + 圆点网格 ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center;
  padding: 150px 0 110px; overflow: hidden; background: var(--bg); color: var(--ink); }
.hero::before { content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(23,43,99,.13) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 20%, #000 20%, transparent 72%);
          mask-image: radial-gradient(ellipse 80% 70% at 70% 20%, #000 20%, transparent 72%); }
.hero::after { content: ""; position: absolute; width: 900px; height: 900px; right: -220px; top: -260px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(35,82,245,.20), rgba(35,82,245,.05) 45%, transparent 68%);
  animation: blobFloat 16s ease-in-out infinite; }
body.p-gov   .hero::after { background: radial-gradient(circle at 35% 35%, rgba(46,95,232,.22), rgba(46,95,232,.05) 45%, transparent 68%); }
body.p-owner .hero::after { background: radial-gradient(circle at 35% 35%, rgba(14,156,133,.20), rgba(14,156,133,.05) 45%, transparent 68%); }
body.p-mnt   .hero::after { background: radial-gradient(circle at 35% 35%, rgba(232,123,14,.24), rgba(232,123,14,.06) 45%, transparent 68%);
  width: 1000px; height: 1000px; }
@keyframes blobFloat { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-40px,30px) scale(1.06); } }
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.06fr .94fr; gap: 64px; align-items: center; width: 100%; }
.hero-badge { display: inline-flex; gap: 12px; align-items: center; background: var(--white); border: 1px solid var(--line);
  box-shadow: var(--shadow-s); padding: 9px 18px; border-radius: 99px; font-family: var(--mono);
  font-size: 12.5px; letter-spacing: .04em; color: var(--ink-3); font-weight: 600; }
.hero-badge .dot { width: 8px; height: 8px; border-radius: 99px; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.hero h1 { font-size: clamp(38px, 5.2vw, 68px); line-height: 1.16; font-weight: 800; letter-spacing: -.02em; margin: 28px 0 22px; color: var(--ink); }
.hero h1 em { font-style: normal; white-space: nowrap;
  background: linear-gradient(115deg, var(--accent), var(--accent-d));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { font-size: clamp(15.5px, 1.6vw, 18px); color: var(--muted); max-width: 590px; }
.hero-sub b { color: var(--ink); font-weight: 700; }
.hero-ctas { display: flex; gap: 14px; margin-top: 38px; flex-wrap: wrap; }
.hero-note { margin-top: 18px; font-size: 13px; color: var(--muted-2); }
/* Hero 亮点小徽章（维保页买单方友好） */
.hero-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.hero-chips .hchip { display: inline-flex; align-items: center; gap: 7px; background: var(--white); border: 1px solid var(--line);
  border-radius: 99px; padding: 7px 14px; font-size: 12.8px; font-weight: 700; color: var(--ink-2); box-shadow: var(--shadow-s); }
.hero-chips .hchip svg { width: 15px; height: 15px; color: var(--accent); flex: none; }
/* 载入动效 */
@keyframes heroUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero-badge { animation: heroUp .8s var(--ease) .05s both; }
.hero h1 { animation: heroUp .9s var(--ease) .15s both; }
.hero-sub { animation: heroUp .9s var(--ease) .26s both; }
.hero-ctas { animation: heroUp .9s var(--ease) .38s both; }
.hero-chips { animation: heroUp .9s var(--ease) .46s both; }
.hero-note { animation: heroUp .9s var(--ease) .54s both; }
.hero-visual { animation: heroUp 1.1s var(--ease) .3s both; }
.hero-scroll { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted-2);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .3em; }
.hero-scroll::after { content: ""; width: 1.5px; height: 32px; border-radius: 2px;
  background: linear-gradient(var(--muted-2), transparent); animation: dropLine 1.8s var(--ease) infinite; }
@keyframes dropLine { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Hero 手机模型（浅底上加强投影） ---------- */
.hero-visual { position: relative; display: flex; justify-content: center; will-change: transform; }
.phone { width: 320px; background: var(--navy); border-radius: 38px; padding: 10px; box-shadow: var(--shadow-l); }
.phone-screen { background: #F8FAFF; border-radius: 30px; overflow: hidden; font-size: 13px; color: var(--ink); }
.pub-top { background: linear-gradient(135deg, var(--navy), #1B3B7E); color: #fff; padding: 22px 20px 16px; position: relative; overflow: hidden; }
.pub-top::after { content: ""; position: absolute; right: -24px; top: -24px; width: 100px; height: 100px; border-radius: 99px;
  background: radial-gradient(circle, rgba(90,140,255,.55), transparent 70%); }
.pub-top .pt-b { font-family: var(--mono); font-size: 10.5px; opacity: .78; letter-spacing: .16em; font-weight: 600; }
.pub-top .pt-code { font-family: var(--mono); font-size: 13px; margin-top: 6px; color: #C4D3F5; letter-spacing: .04em; }
.pub-body { padding: 14px 18px 18px; }
.pub-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 12.8px; }
.pub-row span { color: var(--muted); flex: none; }
.pub-row b { font-weight: 650; text-align: right; }
.pub-row b.ok { color: var(--ok); }
.pub-btn { display: block; width: 100%; margin-top: 16px; background: var(--blue); color: #fff;
  border: 0; border-radius: 99px; padding: 13px; font-size: 14px; font-weight: 700; font-family: inherit; box-shadow: 0 8px 18px rgba(35,82,245,.32); }
.sticker { position: absolute; right: -6px; bottom: -38px; background: var(--white); border-radius: 18px; padding: 16px;
  transform: rotate(4deg); text-align: center; width: 130px; border: 1px solid var(--line); box-shadow: var(--shadow-m); }
.sticker svg { width: 84px; height: 84px; margin: 0 auto 8px; color: var(--ink); }
.sticker b { font-size: 12.5px; display: block; }
.sticker span { font-size: 10px; color: var(--muted); font-family: var(--mono); letter-spacing: .06em; }
.chip { position: absolute; background: var(--white); border-radius: 99px; padding: 10px 16px; font-size: 12px; font-weight: 700;
  color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-m);
  display: flex; gap: 9px; align-items: center; font-family: var(--mono); }
.chip .cdot { width: 8px; height: 8px; border-radius: 99px; background: var(--ok); box-shadow: 0 0 0 3px rgba(15,153,88,.15); }
.chip-1 { left: -22px; top: 68px; transform: rotate(-3deg); }

/* 视角页 Hero 深色面板模型（浅底上的深色卡） */
.mock { background: linear-gradient(160deg, var(--navy), #142F63); border-radius: 24px;
  padding: 24px; width: 100%; max-width: 480px; margin: 0 auto; border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-l); will-change: transform; }
.mock-head { display: flex; justify-content: space-between; align-items: center; color: #EAF0FC; font-size: 13px;
  font-weight: 700; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line-dark); }
.mock-head .mh-tag { font-family: var(--mono); font-size: 11px; font-weight: 500; color: #93A6D4; letter-spacing: .08em; }
.mock-row { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 14px;
  padding: 13px 16px; margin-bottom: 10px; display: flex; gap: 14px; align-items: center; transition: .25s; }
.mock-row:hover { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); }
.mock-row .mic { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); color: #8FB0F5; flex: none; }
body.p-owner .mock-row .mic { color: #7FE0C8; }
body.p-mnt   .mock-row .mic { color: #FFC98A; }
.mock-row .mtxt { min-width: 0; }
.mock-row .mtxt b { font-size: 13.8px; color: #fff; display: block; line-height: 1.45; font-weight: 650; }
.mock-row .mtxt span { font-size: 11.6px; color: #93A6D4; font-family: var(--mono); }
.mock-row .mright { margin-left: auto; flex: none; }
.lv { font-family: var(--mono); font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 99px; letter-spacing: .1em; }
.lv-high { background: rgba(235,92,76,.2); color: #FFA9A2; }
.lv-mid  { background: rgba(240,164,51,.2); color: #FFD09A; }
.lv-ok   { background: rgba(38,178,110,.22); color: #86E3B0; }
.sw { width: 36px; height: 20px; border-radius: 99px; background: #2E9E6B; position: relative; }
.sw::after { content: ""; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 99px; background: #fff; }
.sw.off { background: rgba(255,255,255,.2); }
.sw.off::after { right: auto; left: 2px; }
.mock-foot { text-align: center; color: #9DABCC; font-size: 11.5px; margin-top: 6px; font-family: var(--mono); letter-spacing: .04em; }

/* ---------- 信任条跑马灯（浅色） ---------- */
.trust { background: var(--white); border-bottom: 1px solid var(--line); overflow: hidden; position: relative; }
.trust::before, .trust::after { content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; }
.trust::before { left: 0; background: linear-gradient(90deg, var(--white), transparent); }
.trust::after { right: 0; background: linear-gradient(-90deg, var(--white), transparent); }
.trust-inner { display: flex; gap: 0; width: max-content; padding: 18px 0; }
.trust-inner.run { animation: mq 30s linear infinite; }
.trust:hover .trust-inner.run { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }
.trust-item { display: flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 700; letter-spacing: .1em; padding: 0 46px; white-space: nowrap; color: var(--ink-2); }
.trust-item svg { width: 21px; height: 21px; color: var(--accent); flex: none; }
.trust-item + .trust-item { border-left: 1px solid var(--line); }

/* ---------- 网格与卡片：白色圆角软投影 ---------- */
.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 30px 28px; position: relative; overflow: hidden; box-shadow: var(--shadow-s);
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-m); border-color: #D4DEF0; }

/* 痛点卡 */
.pain .num { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .16em; color: var(--danger); }
.pain h3 { font-size: 19px; margin: 12px 0 10px; font-weight: 800; letter-spacing: -.01em; }
.pain p { color: var(--muted); font-size: 14.3px; }
.pain .pic { width: 46px; height: 46px; border-radius: 14px; background: #FDEDEA; color: var(--danger);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.pain .pic svg { width: 23px; height: 23px; }

/* 功能卡 */
.feat .fic { width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.feat .fic svg { width: 24px; height: 24px; }
.feat h3 { font-size: 17.5px; font-weight: 800; margin-bottom: 9px; letter-spacing: -.01em; }
.feat p { color: var(--muted); font-size: 14.2px; }
.feat p b { color: var(--ink); }

/* ---------- 三视角 Bento：维保置顶放大（买单方优先） ---------- */
.persp-grid { display: grid; gap: 22px; }
.persp { padding: 36px 34px 32px; }
.persp::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--pc, var(--blue)); }
.pc-gov   { --pc: #2E5FE8; --pc-soft: #E9EFFE; }
.pc-owner { --pc: #0E9C85; --pc-soft: #E3F6F1; }
.pc-mnt   { --pc: #E87B0E; --pc-soft: #FCF0E1; }
.persp .p-tag { display: inline-block; background: var(--pc-soft); color: var(--pc); font-family: var(--mono); font-size: 11.5px;
  font-weight: 700; padding: 5px 13px; letter-spacing: .14em; border-radius: 99px; }
.persp h3 { font-size: 22px; margin: 18px 0 12px; font-weight: 800; line-height: 1.42; letter-spacing: -.01em; }
.persp p { color: var(--muted); font-size: 14.6px; }
.persp .p-link { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; color: var(--pc); font-weight: 800; font-size: 14.5px; }
.persp .p-link::after { content: "→"; transition: transform .25s var(--ease); }
.persp:hover .p-link::after { transform: translateX(5px); }
/* Featured：维保单位主卡（横排大卡，靠前展示不加任何身份标注） */
.persp-featured { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; padding: 40px 40px 36px;
  border-color: #F3DDC0; background: linear-gradient(135deg, #FFFFFF 55%, #FDF6EC 100%); }
.persp-featured:hover { border-color: var(--pc); }
.persp-featured h3 { font-size: 26px; margin-top: 16px; }
.persp-featured .p-link { font-size: 15.5px; }
.pf-points { display: grid; gap: 12px; }
.pf-points .pf-item { display: flex; gap: 12px; align-items: flex-start; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 14px 16px; box-shadow: var(--shadow-s); }
.pf-points .pf-item b { font-size: 14.5px; display: block; }
.pf-points .pf-item span { font-size: 12.6px; color: var(--muted); }
.pf-points .pf-item .pf-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--pc-soft); color: var(--pc);
  display: flex; align-items: center; justify-content: center; flex: none; }
.pf-points .pf-item .pf-ic svg { width: 18px; height: 18px; }

/* ---------- 校验矩阵 ---------- */
.matrix { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mx { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 20px 18px 16px;
  box-shadow: var(--shadow-s); transition: .25s var(--ease); }
.mx:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); border-color: #D4DEF0; }
.mx b { display: flex; gap: 10px; align-items: center; font-size: 14.8px; font-weight: 750; }
.mx-ic { width: 23px; height: 23px; border-radius: 8px; background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; flex: none; }
.mx p { font-size: 12.6px; color: var(--muted); margin-top: 8px; line-height: 1.6; }
.mx .tag { display: inline-block; margin-top: 10px; font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  padding: 2px 9px; border-radius: 99px; letter-spacing: .08em; }
.tag-opt  { background: #FBF1DD; color: #9A6206; }
.tag-must { background: #FBE6E2; color: #B03A30; }
.matrix-note { text-align: center; color: var(--muted); font-size: 13.5px; margin-top: 28px; }

/* ---------- 一梯多档时间线 ---------- */
.dev-code { display: inline-flex; align-items: center; gap: 14px; background: var(--white); border: 1px solid var(--line);
  padding: 12px 22px; font-family: var(--mono); font-size: 14.5px; letter-spacing: .06em;
  color: var(--ink); margin: 0 auto 36px; border-radius: var(--r-sm); box-shadow: var(--shadow-s); }
.dev-code .dc-l { font-family: var(--sans); font-size: 12.5px; color: var(--muted); font-weight: 600; }
.tl { display: flex; align-items: stretch; position: relative; }
.tl-item { flex: 1; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 26px 22px; box-shadow: var(--shadow-s); position: relative; z-index: 1; }
.tl-item .tl-s { font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); font-weight: 700; letter-spacing: .1em;
  display: flex; align-items: center; gap: 10px; }
.tl-item .tl-s::before { content: ""; width: 10px; height: 10px; border-radius: 99px; background: var(--white); border: 2.5px solid var(--muted-2); flex: none; }
.tl-item b { display: block; font-size: 17.5px; margin: 12px 0 4px; font-weight: 800; }
.tl-item .tl-d { font-size: 13.5px; color: var(--muted); }
.tl-item .tl-st { display: inline-block; margin-top: 14px; font-family: var(--mono); font-size: 11px; font-weight: 700;
  padding: 3px 11px; border-radius: 99px; letter-spacing: .1em; }
.tl-st-old { background: var(--bg-2); color: var(--muted); }
.tl-item.cur { border: 1.5px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-m); }
.tl-item.cur .tl-s::before { border-color: var(--accent); background: var(--accent); }
.tl-st-cur { background: var(--accent-soft); color: var(--accent-d); }
.tl-arrow { align-self: flex-start; padding: 22px 8px 0; color: var(--muted-2); font-size: 18px; flex: none; position: relative; z-index: 1; }
.tl-note { text-align: center; color: var(--muted); font-size: 13.5px; margin-top: 26px; }
.tl-note b { color: var(--accent-d); }

/* ---------- 使用流程步骤 ---------- */
.steps .s-num { font-family: var(--mono); font-size: 15px; font-weight: 800; color: var(--accent);
  width: 46px; height: 46px; border-radius: 99px; background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center; }
.steps h3 { font-size: 17.5px; font-weight: 800; margin: 18px 0 9px; }
.steps p { color: var(--muted); font-size: 13.9px; }

/* ---------- 数据/能力条 ---------- */
.impact { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.imp { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 28px 24px; box-shadow: var(--shadow-s); }
.imp b { font-family: var(--mono); font-size: 36px; font-weight: 700; color: var(--ink); line-height: 1.15; display: block; letter-spacing: -.02em; }
.imp b small { font-size: 15px; font-weight: 600; margin-left: 4px; color: var(--muted); }
.imp b .cnt { color: var(--accent); }
.imp span { font-size: 13px; color: var(--muted); display: block; margin-top: 9px; line-height: 1.6; }

/* 价值宣言条（深色锚点） */
.value-strip { background: linear-gradient(140deg, var(--navy), #1A3A78); color: #fff; border-radius: var(--r);
  padding: 52px 56px; display: flex; align-items: center; gap: 30px; flex-wrap: wrap; position: relative; overflow: hidden;
  box-shadow: var(--shadow-m); }
.value-strip::before { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(90,140,255,.35), transparent 65%); }
.value-strip > * { position: relative; }
.value-strip .vs-q { flex: 1; min-width: 280px; }
.value-strip .vs-q b { font-size: clamp(20px, 2.4vw, 27px); font-weight: 800; display: block; line-height: 1.5; }
.value-strip .vs-q span { font-size: 14px; color: #B9C7E6; }
.value-strip .btn { background: #fff; color: var(--navy); flex: none; }
.value-strip .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.3); }

/* 获取方式 */
.get-band { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.get-opt { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 36px 34px;
  position: relative; overflow: hidden; box-shadow: var(--shadow-s); transition: .3s var(--ease); }
.get-opt:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: #D4DEF0; }
.get-opt .go-idx { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; color: var(--accent); font-weight: 700; }
.get-opt h3 { font-size: 21px; font-weight: 800; margin: 14px 0 10px; }
.get-opt p { color: var(--muted); font-size: 14.5px; }
.get-opt .btn { margin-top: 24px; }
.get-opt.hl { border-color: #F3DDC0; background: linear-gradient(135deg, #FFFFFF 55%, #FDF6EC 100%); }

/* ---------- FAQ 手风琴（维保页新增） ---------- */
.faq-list { display: grid; gap: 14px; }
.faq-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-s); overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.faq-item.open { border-color: #D4DEF0; box-shadow: var(--shadow-m); }
.faq-q { width: 100%; display: flex; align-items: center; gap: 16px; padding: 20px 24px; background: none; border: 0;
  cursor: pointer; text-align: left; font-family: inherit; font-size: 16px; font-weight: 750; color: var(--ink); }
.faq-q .fq-i { margin-left: auto; width: 28px; height: 28px; border-radius: 99px; background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; flex: none; transition: transform .3s var(--ease); }
.faq-item.open .faq-q .fq-i { transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 24px 22px; color: var(--muted); font-size: 14.6px; }
.faq-a p b { color: var(--ink); }

/* 一体化价值横幅（维保页）：价值宣言 + 数据同版面 */
.worth { background: linear-gradient(150deg, #0F1B33 0%, #14294F 55%, #1A3563 100%); color: #fff;
  border-radius: var(--r-lg); padding: 46px 52px 42px; position: relative; overflow: hidden;
  box-shadow: var(--shadow-m); }
.worth::before { content: ""; position: absolute; width: 480px; height: 480px; right: -140px; top: -200px; border-radius: 50%;
  background: radial-gradient(circle, var(--wglow, rgba(232,123,14,.28)), transparent 65%); }
.worth::after { content: ""; position: absolute; width: 380px; height: 380px; left: -130px; bottom: -190px; border-radius: 50%;
  background: radial-gradient(circle, var(--wglow2, rgba(90,140,255,.22)), transparent 65%); }
.worth > * { position: relative; }
.worth-top { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.worth-copy b { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; display: block; letter-spacing: -.01em; }
.worth-copy span { color: #A9B6D2; font-size: 14.5px; display: block; margin-top: 10px; max-width: 660px; }
.worth .btn { background: #fff; color: #14294F; flex: none; }
.worth .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.3); }
.worth-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 38px; padding-top: 34px; border-top: 1px solid rgba(255,255,255,.14); }
.ws b { font-family: var(--mono); font-size: 34px; font-weight: 700; color: var(--wnum, #FFC98A); line-height: 1.15; display: block; }
.ws b small { font-size: 15px; font-weight: 600; color: #9DB0D6; margin-left: 2px; }
.ws > span { font-size: 12.8px; color: #A9B6D2; display: block; margin-top: 8px; line-height: 1.55; }
.ws + .ws { border-left: 1px solid rgba(255,255,255,.12); padding-left: 22px; }
/* 纯数据版（政府页）：无上部文案区 */
.worth.stats-only { padding: 44px 48px; }
.worth.stats-only .worth-stats { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 900px) {
  .worth { padding: 34px 28px 30px; }
  .worth.stats-only { padding: 30px 24px; }
  .worth-top { flex-direction: column; align-items: flex-start; }
  .worth-stats { grid-template-columns: repeat(2, 1fr); gap: 24px 18px; }
  .ws + .ws { border-left: 0; padding-left: 0; }
}

/* 交叉导航 */
.cross { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cross .card { display: flex; align-items: center; gap: 20px; padding: 28px 30px; }
.cross .cic { width: 52px; height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: center; flex: none; }
.cross .card h4 { font-size: 17px; font-weight: 800; }
.cross .card p { font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.cross .card .p-link { margin-left: auto; color: var(--pc, var(--blue)); font-weight: 800; flex: none; font-size: 16px; }

/* ---------- CTA 满幅（深色锚点） ---------- */
#cta.section { background: linear-gradient(155deg, var(--navy) 0%, #132C5E 60%, #1A3A78 100%); color: #fff; padding: 120px 0; position: relative; overflow: hidden; }
#cta.section::before { content: ""; position: absolute; width: 700px; height: 700px; right: -180px; top: -260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(90,140,255,.35), transparent 65%); }
#cta.section::after { content: ""; position: absolute; width: 500px; height: 500px; left: -160px; bottom: -220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,123,14,.18), transparent 65%); }
.cta-panel { position: relative; text-align: center; background: transparent; border: 0; padding: 0; }
.cta-panel h2 { font-size: clamp(26px, 3.4vw, 42px); font-weight: 800; letter-spacing: -.015em; line-height: 1.3; }
.cta-panel .cta-sub { color: #B9C7E6; margin: 18px auto 40px; max-width: 620px; font-size: 16px; }
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-btns .btn-primary { background: #fff; color: var(--navy); box-shadow: 0 12px 28px rgba(0,0,0,.28); }
.cta-btns .btn-primary:hover { background: #EAF0FC; box-shadow: 0 16px 34px rgba(0,0,0,.34); }
.cta-contact { margin-top: 30px; font-size: 13px; color: #8FA3CF; font-family: var(--mono); letter-spacing: .05em; }
.cta-contact b { color: #DFE7F6; }

/* ---------- 移动端悬浮 CTA（维保页转化） ---------- */
.sticky-cta { position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 250; display: none;
  background: rgba(13,26,53,.94); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px; padding: 12px 14px; box-shadow: var(--shadow-l);
  align-items: center; gap: 10px; transform: translateY(120%); opacity: 0; transition: transform .4s var(--ease), opacity .4s; }
.sticky-cta.show { transform: none; opacity: 1; }
.sticky-cta .sc-t { color: #fff; font-size: 13px; font-weight: 700; line-height: 1.4; flex: 1; min-width: 0; }
.sticky-cta .sc-t span { display: block; color: #93A6D4; font-size: 11px; font-family: var(--mono); }
.sticky-cta .btn { padding: 10px 18px; font-size: 13.5px; flex: none; }
.sticky-cta .btn + .btn { margin-left: 2px; }

/* ---------- 页脚 ---------- */
.footer { background: #0A1730; color: #93A0BC; padding: 72px 0 34px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; }
.footer .brand { color: #fff; margin-bottom: 18px; }
.footer-desc { font-size: 13.8px; line-height: 1.85; max-width: 400px; color: #7A8AA8; }
.footer h4 { color: #fff; font-size: 13px; margin-bottom: 18px; font-weight: 700; font-family: var(--mono); letter-spacing: .18em; }
.footer ul a { display: block; font-size: 14px; margin: 10px 0; color: #93A0BC; transition: .2s; }
.footer ul a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 52px; padding-top: 24px;
  font-size: 12px; color: #566179; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-family: var(--mono); }

/* ---------- 入场动画 ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .09s; } .js .reveal.d2 { transition-delay: .18s; }
.js .reveal.d3 { transition-delay: .27s; } .js .reveal.d4 { transition-delay: .36s; }

/* ---------- 响应式 ---------- */
@media (max-width: 1040px) {
  .g4, .matrix { grid-template-columns: repeat(2, 1fr); }
  .impact { grid-template-columns: repeat(2, 1fr); }
  .hero { min-height: 0; padding: 138px 0 100px; }
  .hero-inner { grid-template-columns: 1fr; gap: 68px; }
  .hero-sub { max-width: 660px; }
  .persp-featured { grid-template-columns: 1fr; padding: 34px 30px 30px; }
  .pf-badge { position: static; justify-self: start; margin-bottom: 4px; }
  .get-band { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .section { padding: 84px 0; }
  .container { padding: 0 20px; }
  .g3 { grid-template-columns: 1fr; }
  .g2, .cross { grid-template-columns: 1fr; }
  .nav { padding: 16px 0; }
  .nav.scrolled { padding: 10px 0; }
  .nav-inner { gap: 16px; }
  .nav-cta { margin-left: auto; }
  .nav-links { display: none; position: absolute; top: calc(100% + 10px); left: 20px; right: 20px; flex-direction: column;
    background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 10px; gap: 2px;
    box-shadow: var(--shadow-l); }
  .nav-links a { padding: 13px 16px; }
  .nav-links a::after { display: none; }
  .nav-links a.active { background: var(--accent-soft); color: var(--accent-d); }
  .nav-links.open { display: flex; }
  .nav-toggle { display: flex; }
  .nav-cta .btn { display: none; }
  .tl { flex-direction: column; gap: 14px; }
  .tl-arrow { transform: rotate(90deg); padding: 2px 0 0; align-self: center; }
  .value-strip { padding: 38px 28px; }
  .sticker { right: 2px; bottom: -34px; }
  .chip-1 { left: 0; top: 62px; }
  .phone { width: 292px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-scroll { display: none; }
  .sticky-cta { display: flex; }
  body { padding-bottom: 76px; } /* 给悬浮 CTA 让位 */
  .footer { padding-bottom: 100px; }
}
@media (max-width: 520px) {
  .g4, .matrix, .impact { grid-template-columns: 1fr; }
  .hero { padding: 122px 0 92px; }
  .hero-ctas .btn { width: 100%; }
  .hero-visual { width: 100%; padding: 0 4px; }
  .sticker { width: 116px; bottom: -30px; }
  .sticker svg { width: 72px; height: 72px; }
  .imp b { font-size: 30px; }
}

/* ---------- 动效克制 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}