/* 简远官网 v3 · 基础：字体、令牌、重置、顶栏与下拉、按钮、表单、页脚。动效与版面见后面的段落。 */
@font-face { font-family: "简远标题"; src: url("assets/fonts/JianYuan-Display-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root {
  --serif: "简远标题", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", "STSong", "Microsoft YaHei", "PingFang SC", sans-serif;
  --sans: "Microsoft YaHei", "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", system-ui, sans-serif;
  --mono: "Cascadia Mono", "Cascadia Code", Consolas, "SFMono-Regular", Menlo, monospace;
  --m-out: cubic-bezier(.22, 1, .36, 1);
  --m-in: cubic-bezier(.64, 0, .78, 0);
  --ease: cubic-bezier(.23, 1, .32, 1);
  --header-h: 76px;
  --pgh: calc(100vh - var(--header-h)); --pgh: calc(100svh - var(--header-h));
  /* 电光蓝：白底、近黑文字、一个蓝色强调色 */
  --on-node: #ffffff;
  --paper: #fbfcff; --paper-2: #eef3ff; --white: #ffffff; --ink: #0a1230; --navy: #0b1437; --muted: #5b6788; --body: #2a3454;
  --rule: #dde4f6; --rule-2: #c3cdea; --violet: #2b50ff; --accent2: #00b8f0; --line-strong: #0b1437;
  --btn-bg: #2b50ff; --btn-fg: #ffffff; --btn-bg-h: #0b1437; --btn-fg-h: #ffffff;
  --glow: rgba(43, 80, 255, .10); --g1: #7b3cff; --g2: #2b50ff; --g3: #00c2ff; --fig-fill: #ffffff; --fig-soft: #e4ebff; --dim: #c3cdea;
  --grad: linear-gradient(90deg, var(--g1), var(--g2), var(--g3));
}
* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 17px/1.8 var(--sans); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 3px; }
.serif { font-family: var(--serif); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 80; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px; }
.skip:focus { left: 8px; }
section { border-bottom: 0; }

/* ———— 顶栏与下拉 ———— */
.site-header { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--paper) 80%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid color-mix(in srgb, var(--rule-2) 60%, transparent); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 24px; position: relative; }
.brand img { height: 34px; width: auto; }
.nav-toggle { display: none; border: 1px solid var(--navy); background: transparent; padding: 8px 18px; border-radius: 999px; font-size: 15px; font-weight: 600; }
.site-nav { display: flex; align-items: center; gap: 2px; }
.nav-group { position: static; }
.nav-top { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; font-size: 14px; background: none; border: 0; border-radius: 999px; color: var(--ink); opacity: .86; transition: opacity 200ms var(--m-out), color 200ms var(--m-out); }
.nav-top:hover, .nav-group.is-open .nav-top { color: var(--violet); opacity: 1; }
.nav-top[aria-current="page"] { font-weight: 700; opacity: 1; }
.nav-caret { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 160ms var(--ease); }
.nav-group.is-open .nav-caret { transform: rotate(225deg) translateY(-2px); }
.nav-cta { margin-left: 10px; padding: 8px 18px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font-size: 14px; font-weight: 600; transition: background 200ms var(--m-out); }
.nav-cta:hover, .nav-cta[aria-current="page"] { background: var(--btn-bg-h); color: var(--btn-fg-h); }
.nav-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border: 1px solid var(--rule); border-top: 0; border-radius: 0 0 28px 28px;
  box-shadow: 0 30px 50px -30px rgba(11, 20, 55, .32); visibility: hidden; opacity: 0; transform: translateY(-6px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 0s linear 180ms; }
.nav-panel.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.nav-panel-inner { display: grid; grid-template-columns: 4fr 8fr; gap: 64px; padding: 36px 40px 40px; max-width: 1240px; margin: 0 auto; }
.nav-lead .kicker { font: 12.5px var(--mono); letter-spacing: .14em; color: var(--muted); }
.nav-lead strong { display: block; font: 700 26px/1.4 var(--serif); color: var(--navy); margin: 8px 0 8px; text-wrap: balance; }
.nav-lead p { font-size: 15px; color: var(--muted); }
.nav-lead a { display: inline-block; margin-top: 14px; font-weight: 700; color: var(--violet); }
.nav-links { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--rule-2); column-gap: 40px; align-content: start; }
.nav-links a { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.nav-links .i { font: 700 12.5px/1 var(--mono); color: var(--violet); }
.nav-links strong { display: block; font: 700 17px/1.5 var(--serif); color: var(--navy); }
.nav-links small { display: block; font-size: 14px; color: var(--muted); line-height: 1.6; }
.nav-links a:hover strong { color: var(--violet); }
.nav-links.one { grid-template-columns: 1fr; }

/* ———— 按钮、链接 ———— */
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 28px; background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; font-size: 16px; border: 0; border-radius: 999px; transition: background 240ms var(--m-out), color 240ms var(--m-out), transform 200ms var(--m-out); }
.btn:hover { background: var(--btn-bg-h); color: var(--btn-fg-h); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn.ghost { background: transparent; color: var(--violet); box-shadow: inset 0 0 0 1.5px var(--violet); }
.btn.ghost:hover { background: var(--violet); color: #fff; }
.text-link { font-weight: 700; color: var(--violet); background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; padding-bottom: 3px; transition: background-size 260ms var(--m-out); }
.text-link:hover { background-size: 100% 2px; }
.actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 34px; align-items: center; }

/* ———— 需求表单 ———— */
.form { display: grid; gap: 22px; }
.form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 22px; min-width: 0; }
.form label { display: block; font: 700 16px/1.6 var(--serif); color: var(--navy); }
.form label small { font: 400 13.5px var(--sans); color: var(--muted); margin-left: 8px; }
.form input, .form textarea { width: 100%; margin-top: 8px; padding: 13px 16px; font: 16px/1.7 var(--sans); color: var(--ink); background: var(--white); border: 1px solid var(--rule-2); border-radius: 14px; }
.form textarea { min-height: 128px; resize: vertical; }
.form input:focus, .form textarea:focus { outline: 3px solid color-mix(in srgb, var(--violet) 40%, transparent); outline-offset: 0; border-color: var(--violet); }
.form fieldset:disabled { opacity: .55; }
.form legend { padding: 0; margin-bottom: 4px; }
.form .buttons { display: flex; gap: 14px; flex-wrap: wrap; }
.status { min-height: 1.6em; font-size: 15px; color: var(--violet); }
.draft { background: var(--white); border: 1px solid var(--rule-2); border-radius: 18px; padding: 24px; margin-top: 24px; }
.draft h3 { font: 700 22px var(--serif); color: var(--navy); margin-bottom: 10px; }
.draft pre { white-space: pre-wrap; word-break: break-word; font: 15px/1.9 var(--sans); margin: 0 0 16px; }
.nojs { font-size: 15px; color: var(--muted); }
.js-ready .nojs { display: none; }

/* ———— 页脚 ———— */
footer.site-footer { padding: 48px 0 40px; border-top: 1px solid var(--rule); background: var(--paper); }
.footer-main { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.footer-main strong { font: 700 22px var(--serif); color: var(--navy); }
.footer-main p { font-size: 14.5px; color: var(--muted); margin-top: 4px; }
.footer-main nav { display: flex; gap: 14px 26px; font-size: 15px; flex-wrap: wrap; align-content: flex-start; }
.footer-main nav a:hover { color: var(--violet); }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--muted); }

/* ———— 窄屏顶栏：折叠成菜单 ———— */
@media (max-width: 1080px) {
  .nav-toggle { display: inline-block; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper);
    border-bottom: 1px solid var(--rule-2); padding: 8px 40px 20px; max-height: calc(100vh - var(--header-h)); overflow-y: auto; box-shadow: 0 28px 40px -28px rgba(11, 20, 55, .3); }
  .site-nav.is-open { display: flex; }
  .nav-group { border-bottom: 1px solid var(--rule); }
  .nav-top { width: 100%; justify-content: space-between; padding: 16px 0; font-size: 17px; border-radius: 0; opacity: 1; }
  .nav-panel { position: static; display: none; visibility: visible; opacity: 1; transform: none; box-shadow: none; border: 0; border-radius: 0; background: transparent; transition: none; }
  .nav-panel.is-open { display: block; }
  .nav-panel-inner { grid-template-columns: 1fr; gap: 14px; padding: 0 0 18px; }
  .nav-lead strong { font-size: 20px; }
  .nav-links { grid-template-columns: 1fr; }
  .nav-cta { align-self: flex-start; margin: 16px 0 0; padding: 12px 24px; }
}
@media (max-width: 900px) { .nav-panel-inner { padding-left: 0; padding-right: 0; } }
@media (max-width: 600px) { .wrap { padding-left: 22px; padding-right: 22px; } .site-nav { padding: 8px 22px 20px; } .brand img { height: 30px; } .footer-main nav { gap: 12px 22px; } }

/* ———— 首页与通用版面、动效（原型验证过） ———— */
/* ———— 通用版面：自然高度，连续滚动 ———— */
.label { font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.big { font: 700 clamp(34px, min(4.6vw, 7.6vh), 80px)/1.2 var(--serif); letter-spacing: -.015em; color: var(--navy); margin: 14px 0 0; }
.lead { font-size: clamp(15.5px, 1.25vw, 19px); color: var(--body); margin-top: clamp(12px, 2vh, 22px); max-width: 28em; }
.sec { position: relative; padding: clamp(56px, 9vh, 104px) 0; }
.two .big { font-size: clamp(30px, min(3.6vw, 6.4vh), 72px); }
.hero-screen + .sec { padding-top: clamp(24px, 4vh, 56px); }
.sec.alt { background: var(--paper-2); }
.two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.two.rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.row-n { display: grid; grid-template-columns: clamp(64px, 7vw, 108px) minmax(0, 1fr); gap: 20px; align-items: center; border-bottom: 1px solid var(--rule); padding: clamp(18px, 3vh, 34px) 0; }
.row-n .num { font: 700 clamp(40px, 6vw, 84px)/1 var(--serif); color: var(--violet); transform-origin: left center; }
.row-n h3 { font: 700 clamp(20px, 2.1vw, 30px)/1.35 var(--serif); color: var(--navy); margin: 0; }
.row-n p { font-size: clamp(14.5px, 1.15vw, 17.5px); color: var(--body); margin: 6px 0 0; max-width: 34em; }

/* ———— 首屏：只有首屏占满第一屏 ———— */
.hero-screen { min-height: var(--pgh); display: flex; flex-direction: column; padding: clamp(18px, 3.2vh, 44px) 0 clamp(12px, 2vh, 28px); position: relative; overflow: clip; isolation: isolate; }
.hero-screen::after { content: ""; position: absolute; inset: -10vh 0; z-index: -1; background: radial-gradient(ellipse 52% 60% at 76% 42%, var(--glow), transparent 72%); pointer-events: none; }
.hero-screen > .wrap { flex: 1; display: grid; grid-template-rows: auto 1fr auto; row-gap: clamp(10px, 2vh, 28px); width: 100%; }
.hero-mid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: clamp(24px, 4vw, 72px); }
.hero-mid h1 { font: 700 clamp(44px, min(6vw, 10.5vh), 112px)/1.1 var(--serif); letter-spacing: -.02em; color: var(--navy); margin: 14px 0 0; }
.hero-mid .lede { font-size: clamp(16px, 1.35vw, 20px); color: var(--body); max-width: 28em; margin: clamp(14px, 2.6vh, 28px) 0 0; }
.hero-mid .actions { margin-top: clamp(18px, 3.4vh, 36px); }
.hero-fig { width: 100%; max-height: 56vh; }
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid transparent; border-image: var(--grad) 1; }
.ways a { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: baseline; padding: clamp(12px, 2.2vh, 24px) 20px clamp(12px, 2.2vh, 24px) 0; }
.ways a + a { border-left: 1px solid var(--rule); padding-left: 22px; }
.ways .n { font: 700 14px/1 var(--mono); color: var(--violet); }
.ways strong { display: block; font: 700 clamp(17px, 2.5vh, 24px)/1.4 var(--serif); color: var(--navy); }
.ways .d { display: block; font-size: clamp(13px, 1.7vh, 15px); color: var(--muted); }
.ways .go { font-size: 18px; color: var(--navy); }
.band-line { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--rule); padding-top: clamp(8px, 1.4vh, 14px); font-size: 14px; color: var(--muted); }
.band-line b { color: var(--navy); }
@media (min-width: 1700px) { .wrap { max-width: 1440px; } }

/* ———— 按钮、链接：药丸形，只有一个强调色 ———— */
.btn { background: var(--btn-bg); color: var(--btn-fg); border-radius: 999px; min-height: 48px; padding: 0 28px; transition: background 240ms var(--m-out), color 240ms var(--m-out), transform 200ms var(--m-out); }
.btn:hover { background: var(--btn-bg-h); color: var(--btn-fg-h); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn.ghost { background: transparent; color: var(--violet); box-shadow: inset 0 0 0 1.5px var(--violet); }
.btn.ghost:hover { background: var(--violet); color: #fff; }
.actions { align-items: center; }
.text-link { color: var(--violet); background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; border-bottom: 0; padding-bottom: 3px; transition: background-size 260ms var(--m-out), color 200ms var(--m-out); }
.text-link:hover { background-size: 100% 2px; color: var(--violet); }
.ways a { transition: transform 280ms var(--m-out); }
.ways a:hover { transform: translateY(-3px); }

/* ———— 大字声明：滚动时逐字点亮 ———— */
.stmt { font: 700 clamp(36px, min(5.6vw, 10vh), 104px)/1.22 var(--serif); letter-spacing: -.02em; color: var(--navy); margin: 18px 0 0; max-width: 14em; }
.stmt .ch { color: var(--navy); }
.stmt-lead { font-size: clamp(16px, 1.4vw, 21px); color: var(--body); max-width: 30em; margin-top: clamp(18px, 3vh, 34px); }
.p3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 72px); margin-top: clamp(56px, 10vh, 120px); border-top: 1px solid var(--rule-2); padding-top: clamp(24px, 4vh, 44px); }
.p3 .num { font: 700 clamp(40px, 4.4vw, 72px)/1 var(--serif); color: var(--violet); transform-origin: left center; }
.p3 h3 { font: 700 clamp(21px, 2vw, 30px)/1.4 var(--serif); color: var(--navy); margin: clamp(14px, 2.4vh, 26px) 0 0; }
.p3 p { font-size: clamp(15px, 1.15vw, 17.5px); color: var(--body); margin: 10px 0 0; }

/* ———— 示意图：SVG 通用样式 ———— */
.fig { display: block; width: 100%; height: auto; overflow: visible; color: var(--navy); }
.fig text { font-family: var(--sans); fill: currentColor; }
.fig .s { stroke: var(--rule-2); fill: var(--fig-fill); stroke-width: 1.5; }
.fig .soft { fill: var(--fig-soft); stroke: none; }
.fig .ln-a { fill: none; stroke: var(--rule-2); stroke-width: 2; stroke-linecap: round; }
.fig .ink { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fig .wire { fill: none; stroke: url(#gx); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.fig .wire-base { fill: none; stroke: var(--rule-2); stroke-width: 2; stroke-linecap: round; }
.fig .grad-fill { fill: url(#gx); }
.fig .grad-stroke { fill: none; stroke: url(#gx); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fig .node-t { font-size: 15px; font-weight: 700; }
.fig .node-s { font-size: 13px; fill: var(--muted); }
.figcap { font: 13px var(--mono); letter-spacing: .06em; color: var(--muted); margin: 16px 0 0; }
.fig-box { background: var(--paper-2); border-radius: clamp(20px, 2.2vw, 36px); padding: clamp(20px, 2.8vw, 48px); }
.sec.alt .fig-box { background: var(--white); }

/* 工作线：定住画面，流程图画出，细节逐段切换 */
.fig-wf { margin: clamp(14px, 2.6vh, 32px) auto clamp(10px, 2vh, 24px); max-height: calc(var(--pgh) * .36); }
.fig-wf .wf-c { fill: var(--violet); stroke: var(--violet); stroke-width: 3; }
.fig-wf .wf-ic { color: var(--on-node); }
.fig-wf .wf-ring { fill: none; stroke: var(--violet); stroke-width: 2; opacity: 0; }
.pin-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 72px); align-items: end; }
.pin-head .lead { margin: 0; }
.pin-wf .big { font-size: clamp(32px, min(4vw, 6.6vh), 68px); }
.wf-panels { display: none; }
.wf-p { grid-area: 1 / 1; border-top: 1px solid var(--rule-2); padding-top: clamp(14px, 2.4vh, 24px); }
.wf-ph { display: flex; align-items: baseline; gap: 14px; margin-bottom: clamp(10px, 1.8vh, 18px); }
.wf-ph .st { font: 700 14px/1 var(--mono); color: var(--violet); }
.wf-ph h3 { font: 700 clamp(21px, 2vw, 30px)/1.35 var(--serif); color: var(--navy); margin: 0; }
.wf-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 56px); }
.wf-cols .k { display: block; font: 12.5px var(--mono); letter-spacing: .14em; color: var(--muted); margin-bottom: 6px; }
.wf-cols p { font-size: clamp(14.5px, 1.2vw, 18px); color: var(--body); margin: 0; }
.flow-n { position: relative; padding-top: 4px; }
.flow-n .rowh, .flow-n .rw { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr 1.2fr; gap: 28px; }
.flow-n .rowh { padding: 10px 0; font: 13px var(--mono); letter-spacing: .14em; color: var(--muted); border-bottom: 1px solid var(--rule); }
.flow-n .rw { align-items: center; border-bottom: 1px solid var(--rule); padding: clamp(14px, 2.2vh, 26px) 0; }
.flow-n .st { font: 700 14px/1 var(--mono); color: var(--violet); display: block; margin-bottom: 4px; }
.flow-n h3 { font: 700 clamp(19px, 1.9vw, 27px)/1.35 var(--serif); color: var(--navy); margin: 0; }
.flow-n p { font-size: clamp(14px, 1.1vw, 16.5px); color: var(--body); margin: 0; }
.flow-n .k { display: none; }
.fig-wf-wrap { margin-top: clamp(28px, 5vh, 56px); }

/* 看板：定住画面，示意图一块一块拼起来，说明跟着换 */
.pin-dash .fig-dash { max-width: 100%; margin: 0 auto; }
.beats { margin-top: clamp(20px, 3.4vh, 38px); display: grid; gap: clamp(12px, 2.2vh, 24px); position: relative; padding-left: 28px; }
.beats::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: var(--rule-2); border-radius: 2px; }
.beat-bar { position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: var(--grad); border-radius: 2px; transform-origin: top; }
.beat h3 { font: 700 clamp(19px, 1.9vw, 28px)/1.35 var(--serif); color: var(--navy); margin: 0; }
.beat p { font-size: clamp(14.5px, 1.15vw, 17.5px); color: var(--body); margin: 4px 0 0; }

/* 做法：竖向进度线 */
@media (min-width: 1000px) { .stick { align-self: start; position: sticky; top: calc(var(--header-h) + 16vh); } }
.tl { position: relative; padding-left: 40px; }
.tl::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; background: var(--rule-2); }
.tl-fill { position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; background: var(--grad); transform-origin: top; transform: scaleY(1); }
.tl .row-n { position: relative; }
.tl .tl-dot { position: absolute; left: -40px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; border: 2px solid var(--rule-2); background: var(--paper); box-sizing: border-box; display: block; }
.tl .tl-dot b { position: absolute; inset: 4px; border-radius: 50%; background: var(--violet); display: block; }

/* 结尾 */
.close-sec { padding: clamp(72px, 13vh, 150px) 0 clamp(40px, 6vh, 72px); text-align: center; }
.close-sec h2 { font: 700 clamp(40px, min(6.6vw, 11.5vh), 120px)/1.12 var(--serif); letter-spacing: -.02em; color: var(--navy); margin: 18px 0 0; }
.close-sec .lead { margin-left: auto; margin-right: auto; }
.close-sec .actions { justify-content: center; }
.pg-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--rule); margin-top: clamp(56px, 10vh, 110px); padding-top: 18px; font-size: 14px; color: var(--muted); text-align: left; }

/* ———— 关键帧 ———— */
@keyframes m-rise { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes m-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-line-in { from { transform: translateY(112%); } to { transform: none; } }
@keyframes m-slide-r { from { opacity: 0; transform: translateX(64px); } to { opacity: 1; transform: none; } }
@keyframes m-progress { to { transform: scaleX(1); } }
@keyframes rv-flow {
  0%   { opacity: 0; transform: translateY(56px) scale(.97); animation-timing-function: var(--m-out); }
  24%  { opacity: 1; transform: none; }
  80%  { opacity: 1; transform: none; animation-timing-function: var(--m-in); }
  100% { opacity: 0; transform: translateY(-40px); }
}
@keyframes rv-scale { from { opacity: 0; transform: translateY(64px) scale(.88); } to { opacity: 1; transform: none; } }
@keyframes rv-soft { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-num { from { transform: scale(.55); } to { transform: none; } }
@keyframes ch-lit { from { color: var(--dim); } to { color: var(--navy); } }
@keyframes hero-out-a { 0%, 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-70px) scale(.95); } }
@keyframes hero-out-b { 0%, 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-36px) scale(.9); } }
@keyframes hero-out-c { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fig-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fig-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fig-slide { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
@keyframes fig-pop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
@keyframes fig-grow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes fig-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fig-scatter { from { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } 30% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes fig-node { from { fill: var(--paper); stroke: var(--rule-2); } to { fill: var(--violet); stroke: var(--violet); } }
@keyframes fig-iconc { from { color: var(--rule-2); } to { color: var(--on-node); } }
@keyframes ring-draw { from { stroke-dashoffset: .68; } to { stroke-dashoffset: 0; } }
@keyframes pulse-run { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes tl-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes tl-dot { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes bar-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* 定住段落：每一段只在自己的区间里出现，前一段先退场、后一段再进场 */
@keyframes pn-mid   { 0% { opacity: 0; transform: translateY(26px); } 16% { opacity: 1; transform: none; } 84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-26px); } }
@keyframes pn-first { 0% { opacity: 1; transform: none; } 84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-26px); } }
@keyframes pn-last  { 0% { opacity: 0; transform: translateY(26px); } 16% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }
@keyframes op-mid   { 0% { opacity: var(--lo, 0); } 16% { opacity: 1; } 84% { opacity: 1; } 100% { opacity: var(--lo, 0); } }
@keyframes op-first { 0% { opacity: 1; } 84% { opacity: 1; } 100% { opacity: var(--lo, 0); } }
@keyframes op-last  { 0% { opacity: var(--lo, 0); } 16% { opacity: 1; } 100% { opacity: 1; } }
/* 工作线的线：每到一个阶段的节点就刚好画到那里（线从第一个节点画到末端，长 960，后三个节点在 280、560、840） */
@keyframes wf-line { 0% { stroke-dashoffset: 1; } 29% { stroke-dashoffset: .708; } 54% { stroke-dashoffset: .417; } 79% { stroke-dashoffset: .125; } 92%, 100% { stroke-dashoffset: 0; } }

/* ———— 完整模式：首屏入场（时间驱动，所有浏览器） ———— */
:is(.mfull, .mfb) .m-load { animation: m-rise 950ms var(--m-out) both; animation-delay: calc(var(--d, 0) * 110ms + 150ms); }
:is(.mfull, .mfb) .m-h1 .ln > span { animation: m-line-in 1050ms var(--m-out) both; animation-delay: calc(var(--d, 0) * 140ms + 100ms); }
:is(.mfull, .mfb) .m-slide { animation: m-slide-r 950ms var(--m-out) both; animation-delay: calc(var(--d, 0) * 130ms + 450ms); }
.ln { display: block; overflow: clip; padding-bottom: .14em; margin-bottom: -.14em; }
.ln > span { display: block; }
.mfull { scroll-behavior: smooth; }

/* 首屏示意图：散乱的表格、聊天、邮件汇聚进一个系统（打开时播放一次） */
.hero-fig .hc { transform-box: fill-box; transform-origin: center; }
:is(.mfull, .mfb) .hero-fig .hc { animation: fig-scatter 1500ms var(--m-out) both; animation-delay: calc(500ms + var(--k) * 140ms); }
:is(.mfull, .mfb) .hero-fig .hw { animation: fig-draw 1100ms var(--m-out) both; animation-delay: calc(1100ms + var(--k) * 140ms); }
:is(.mfull, .mfb) .hero-fig .hm { animation: fig-pop 700ms var(--m-out) both; animation-delay: calc(1700ms + var(--k) * 70ms); transform-box: fill-box; transform-origin: center; }
:is(.mfull, .mfb) .hero-fig .hh { animation: fig-fade 900ms var(--m-out) both; animation-delay: 400ms; }

/* ———— 完整模式：滚动联动（浏览器原生滚动驱动动画） ———— */
.mfull .m-progress { animation: m-progress linear both; animation-timeline: scroll(root); }
.mfull .rv { animation: rv-flow linear both; animation-timeline: view(block 0px 0px); animation-range: cover calc(var(--i, 0) * 2%) cover 100%; }
.mfull .rv-in { animation: rv-scale linear both; animation-timeline: view(block 0px 0px); animation-range: cover 0% cover 30%; }
.mfull .rv-big { animation: rv-scale linear both; animation-timeline: view(block 0px 0px); animation-range: entry 0% entry 88%; transform-origin: 50% 60%; }
.mfull .row-n .num, .mfull .p3 .num { animation: m-num linear both; animation-timeline: view(block 0px 0px); animation-range: cover 0% cover 26%; }
/* 首屏离开时：整体缩小、上移、淡出，像产品页的镜头拉远 */
.mfull .hero-out-a { animation: hero-out-a linear both; animation-timeline: scroll(root block); animation-range: 0px 85vh; }
.mfull .hero-out-b { animation: hero-out-b linear both; animation-timeline: scroll(root block); animation-range: 0px 90vh; transform-origin: 50% 50%; }
.mfull .hero-out-c { animation: hero-out-c linear both; animation-timeline: scroll(root block); animation-range: 0px 100vh; }
/* 大字声明逐字点亮 */
.mfull .stmt { view-timeline: --st block; view-timeline-inset: 0px 0px; }
.mfull .stmt .ch { animation: ch-lit linear both; animation-timeline: --st; animation-range: cover calc(12% + var(--c) * 2.4%) cover calc(20% + var(--c) * 2.4%); }
/* 模块网络图 */
.mfull .fig-net { view-timeline: --net block; view-timeline-inset: 0px 0px; }
.mfull .fig-net .n-hub { transform-box: fill-box; transform-origin: center; animation: fig-pop linear both; animation-timeline: --net; animation-range: cover 4% cover 15%; }
.fig-net .wire { stroke: url(#gx4); }
.mfull .fig-net .n-wire { stroke-dasharray: 1; animation: fig-draw linear both; animation-timeline: --net; animation-range: cover calc(10% + var(--k) * 2.6%) cover calc(23% + var(--k) * 2.6%); }
.mfull .fig-net .n-sat { transform-box: fill-box; transform-origin: center; animation: fig-pop linear both; animation-timeline: --net; animation-range: cover calc(17% + var(--k) * 2.6%) cover calc(28% + var(--k) * 2.6%); }
.n-xl path { fill: none; stroke: var(--rule-2); stroke-width: 1.5; stroke-dasharray: 4 7; stroke-linecap: round; }
.mfull .n-xl { animation: fig-fade linear both; animation-timeline: --net; animation-range: cover 28% cover 36%; }
.mfull .n-pulses { animation: fig-fade linear both; animation-timeline: --net; animation-range: cover 34% cover 40%; }
.mfull .n-orbit { transform-box: fill-box; transform-origin: center; animation: orbit 90s linear infinite; }
/* 做法：竖向进度线 */
.mfull .tl { view-timeline: --tl block; view-timeline-inset: 0px 0px; }
.mfull .tl-fill { animation: tl-fill linear both; animation-timeline: --tl; animation-range: cover 16% cover 58%; }
.mfull .tl .tl-dot b { animation: tl-dot linear both; animation-timeline: view(block 0px 0px); animation-range: cover 20% cover 34%; }

/* ———— 两处定住画面（只在宽屏、够高的窗口；其余一律自然堆叠，示意图显示完整静止状态） ———— */
@media (min-width: 1000px) and (min-height: 640px) {
  /* 定住的内容只占自己的高度（脚本量出来写进 --ph），进入和离开时没有多余的空白；定住时停在窗口正中 */
  .mfull .pin { --ph: 640px; --pt: max(var(--header-h), calc((100svh - var(--ph)) / 2)); --pb: max(0px, calc(100svh - var(--pt) - var(--ph))); height: calc(var(--ph) + (var(--pin-n, 3.4) - 1) * var(--pgh)); padding: 0; }
  .mfull .pin-wf { view-timeline: --pwf block; view-timeline-inset: var(--pt) var(--pb); }
  .mfull .pin-dash { view-timeline: --pdb block; view-timeline-inset: var(--pt) var(--pb); }
  .mfull .pin-in { position: sticky; top: var(--pt); height: var(--ph); display: flex; align-items: center; }
  .mfull .pin-in > .wrap { width: 100%; }
  /* 工作线 */
  .mfull .flow-n { display: none; }
  .mfull .wf-panels { display: grid; }
  .mfull .wf-line { animation: wf-line linear both; animation-timeline: --pwf; animation-range: contain 0% contain 100%; }
  .mfull .wf-n { transform-box: fill-box; transform-origin: center; animation: fig-pop linear both; animation-timeline: --pwf; animation-range: contain calc(var(--k) * 25%) contain calc(var(--k) * 25% + 6%); }
  .mfull .wf-c { animation: fig-node linear both; animation-timeline: --pwf; animation-range: contain calc(var(--k) * 25% + 1%) contain calc(var(--k) * 25% + 7%); }
  .mfull .wf-ic { animation: fig-iconc linear both; animation-timeline: --pwf; animation-range: contain calc(var(--k) * 25% + 1%) contain calc(var(--k) * 25% + 7%); }
  .mfull .wf-ch { transform-box: fill-box; transform-origin: center; animation: fig-pop linear both; animation-timeline: --pwf; animation-range: contain calc(var(--k) * 25% + 8%) contain calc(var(--k) * 25% + 15%); }
  .mfull .wf-t { animation: fig-rise linear both; animation-timeline: --pwf; animation-range: contain calc(var(--k) * 25%) contain calc(var(--k) * 25% + 8%); }
  .mfull .wf-ring { animation: op-mid linear both; animation-timeline: --pwf; animation-range: contain calc(var(--k) * 25%) contain calc(var(--k) * 25% + 25%); }
  .mfull .wf-ring.f { animation-name: op-first; } .mfull .wf-ring.l { animation-name: op-last; }
  .mfull .wf-p { animation: pn-mid linear both; animation-timeline: --pwf; animation-range: contain calc(var(--k) * 25%) contain calc(var(--k) * 25% + 25%); }
  .mfull .wf-p.f { animation-name: pn-first; } .mfull .wf-p.l { animation-name: pn-last; }
  .mfull .wf-n.f { animation-range: entry 20% entry 62%; }
  .mfull .wf-c.f, .mfull .wf-ic.f { animation-range: entry 30% entry 68%; }
  .mfull .wf-t.f { animation-range: entry 24% entry 64%; }
  .mfull .wf-rings, .mfull .wf-panels { animation: fig-fade linear both; animation-timeline: --pwf; animation-range: entry 25% entry 68%; }
  .mfull .pin-wf .pin-head { animation: rv-scale linear both; animation-timeline: --pwf; animation-range: entry 0% entry 48%; }
  /* 看板 */
  .mfull .pin-dash .rv { animation: rv-scale linear both; animation-timeline: --pdb; animation-range: entry 0% entry 48%; }
  .mfull .pin-dash .fig-box { animation: rv-scale linear both; animation-timeline: --pdb; animation-range: entry 0% entry 58%; }
  .mfull .d-frame { stroke-dasharray: 1; animation: fig-draw linear both; animation-timeline: --pdb; animation-range: entry 18% entry 74%; }
  .mfull .d-nav { animation: fig-slide linear both; animation-timeline: --pdb; animation-range: contain calc(var(--k) * 1%) contain calc(var(--k) * 1% + 5%); }
  .mfull .d-card { animation: fig-rise linear both; animation-timeline: --pdb; animation-range: contain calc(3% + var(--k) * 4.5%) contain calc(11% + var(--k) * 4.5%); }
  .mfull .d-line { stroke-dasharray: 1; animation: fig-draw linear both; animation-timeline: --pdb; animation-range: contain 33% contain 53%; }
  .mfull .d-area { animation: fig-fade linear both; animation-timeline: --pdb; animation-range: contain 46% contain 58%; }
  .mfull .d-spark { animation: fig-draw linear both; animation-timeline: --pdb; animation-range: contain 36% contain 48%; }
  .mfull .d-ring { animation: ring-draw linear both; animation-timeline: --pdb; animation-range: contain 36% contain 48%; }
  .mfull .d-dot { transform-box: fill-box; transform-origin: center; animation: fig-pop linear both; animation-timeline: --pdb; animation-range: contain calc(50% + var(--k) * 1.6%) contain calc(55% + var(--k) * 1.6%); }
  .mfull .d-tip { transform-box: fill-box; transform-origin: 30% 100%; animation: fig-pop linear both; animation-timeline: --pdb; animation-range: contain 58% contain 64%; }
  .mfull .d-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: fig-grow linear both; animation-timeline: --pdb; animation-range: contain calc(34% + var(--k) * 3%) contain calc(44% + var(--k) * 3%); }
  .mfull .d-row { animation: fig-slide linear both; animation-timeline: --pdb; animation-range: contain calc(68% + var(--k) * 7%) contain calc(78% + var(--k) * 7%); }
  .mfull .beat { --lo: .26; animation: op-mid linear both; animation-timeline: --pdb; animation-range: contain calc(var(--k) * 33.33%) contain calc(var(--k) * 33.33% + 33.33%); }
  .mfull .beat.f { animation-name: op-first; } .mfull .beat.l { animation-name: op-last; }
  .mfull .beat-bar { animation: bar-fill linear both; animation-timeline: --pdb; animation-range: contain 0% contain 100%; }
}
@media not all and (min-width: 1000px) and (min-height: 640px) { .beat-bar { display: none; } .beats { padding-left: 0; } .beats::before { display: none; } }

/* ———— 柔和模式：图形静止，内容只做透明度 ———— */
.msoft .m-load, .msoft .m-h1 .ln > span, .msoft .m-slide { animation: m-fade-in 700ms ease-out both; animation-delay: calc(var(--d, 0) * 60ms); }
.msoft .rv, .msoft .rv-in, .msoft .rv-big { animation: rv-soft linear both; animation-timeline: view(block 0px 0px); animation-range: cover 0% cover 24%; }
.msoft .m-progress { display: none; }
.msoft .btn, .msoft .text-link, .msoft .ways a, .msoft .nav-top, .msoft .card, .msoft .ledger a { transition: none !important; }

/* ———— 不支持滚动联动：内容一次性淡入，图形显示完整静止状态 ———— */
.mfb .rv, .mfb .rv-in, .mfb .rv-big { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--m-out), transform 800ms var(--m-out); }
.mfb .rv.in, .mfb .rv-in.in, .mfb .rv-big.in { opacity: 1; transform: none; }
.mfb .m-progress { display: none; }

.m-progress { position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* ———— 窄屏：自然堆叠，流程图改用表格 ———— */
@media (max-width: 999px) {
  .hero-screen { min-height: auto; }
  .hero-screen > .wrap { grid-template-rows: none; row-gap: 28px; }
  .hero-mid, .two, .two.rev, .pin-head { grid-template-columns: 1fr; }
  .hero-fig { max-height: none; max-width: 520px; margin: 0 auto; }
  .ways, .p3 { grid-template-columns: 1fr; }
  .ways a + a { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); }
  .fig-wf { display: none; }
  .flow-n .rowh { display: none; }
  .flow-n .rw { grid-template-columns: 1fr; gap: 6px; }
  .flow-n .k { display: inline; font: 700 12px var(--mono); color: var(--violet); margin-right: 8px; }
  .sec { padding: 64px 0; }
  .pin-head .lead { margin-top: 12px; }
}
@media (max-width: 600px) {
  .wrap { padding-left: 22px; padding-right: 22px; }
}
@media (min-width: 1000px) and (max-height: 639px) { .fig-wf { margin: 20px 0; } }

/* ———— 示意图的新元素 ———— */
.fig .acc-soft { fill: var(--violet); opacity: .16; stroke: none; }
.fig .acc-fill { fill: var(--violet); stroke: none; }
.fig .bar-soft { fill: var(--rule-2); }
.fig .gl { fill: none; stroke: var(--violet); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fig .gl.mute { stroke: var(--muted); }
.fig .wf-ic .gl { stroke: currentColor; stroke-width: 1.5; }
.fig .sw { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }
.fig .sa { fill: none; stroke: var(--violet); stroke-linecap: round; stroke-linejoin: round; }
.fig .sr { fill: none; stroke: var(--rule-2); }
.fig .chip { fill: var(--fig-fill); stroke: var(--rule-2); stroke-width: 1.5; }
.fig .chip-t { font: 700 10.5px var(--mono); fill: var(--navy); }
.fig .chip-s { font-size: 12px; fill: var(--muted); text-anchor: middle; }
.fig .chev-bg { fill: var(--fig-fill); stroke: var(--rule-2); stroke-width: 1.5; }
.fig .gl-w, .fig .sw .gl { stroke: #fff; }
.pulse { display: none; fill: var(--violet); }
@supports (offset-path: path("M0 0 L1 1")) {
  :is(.mfull, .mfb) .pulse { display: inline; offset-rotate: 0deg; animation: pulse-run 2800ms linear infinite backwards; animation-delay: calc(3000ms + var(--k, 0) * 430ms); }
}
:is(.mfull, .mfb) .hero-fig .hb { transform-box: fill-box; transform-origin: center; animation: fig-pop 600ms var(--m-out) both; animation-delay: 2600ms; }

/* ———— 常见问答 ———— */
.qa { border-top: 1px solid var(--rule-2); }
.qa details { border-bottom: 1px solid var(--rule-2); border-top: 0; }
.qa details:first-of-type { border-top: 0; }
.qa summary { padding: clamp(18px, 2.6vh, 28px) 52px clamp(18px, 2.6vh, 28px) 0; font: 700 clamp(19px, 1.7vw, 26px)/1.45 var(--serif); color: var(--navy); transition: color 200ms var(--m-out); }
.qa summary:hover { color: var(--violet); }
.qa summary::after { content: ""; right: 6px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background:
  linear-gradient(var(--violet), var(--violet)) center / 10px 2px no-repeat, linear-gradient(var(--violet), var(--violet)) center / 2px 10px no-repeat; box-shadow: inset 0 0 0 1.5px var(--rule-2); transition: transform 280ms var(--m-out), background-size 280ms var(--m-out); position: absolute; font: 0/0 serif; }
.qa details[open] summary::after { content: ""; transform: rotate(135deg); }
.qa details p { padding: 0 52px clamp(20px, 3vh, 30px) 0; font-size: clamp(15px, 1.2vw, 18px); color: var(--body); max-width: 40em; }
.qa details[open] p { animation: faq-in 320ms var(--m-out) both; }
.msoft .qa details[open] p { animation: none; }


/* ———— 内页：页头 ———— */
.phero { position: relative; overflow: clip; isolation: isolate; padding: clamp(40px, 8vh, 88px) 0 clamp(36px, 7vh, 72px); }
.phero::after { content: ""; position: absolute; inset: -10vh 0; z-index: -1; background: radial-gradient(ellipse 48% 70% at 84% 42%, var(--glow), transparent 72%); pointer-events: none; }
.phero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: end; }
.crumb { font: 13px var(--mono); letter-spacing: .08em; color: var(--muted); }
.crumb a:hover { color: var(--violet); }
.phero h1 { font: 700 clamp(38px, min(5vw, 10vh), 92px)/1.12 var(--serif); letter-spacing: -.02em; color: var(--navy); margin: 18px 0 0; }
.phero .lede { font-size: clamp(16px, 1.3vw, 20px); color: var(--body); max-width: 30em; margin-top: clamp(16px, 3vh, 30px); }
.phero .actions { margin-top: clamp(20px, 3.6vh, 36px); }
.ledger { border-top: 1px solid var(--rule-2); }
.ledger a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--rule); transition: transform 240ms var(--m-out); }
.ledger a:hover { transform: translateX(4px); }
.ledger .n { font: 700 13px var(--mono); color: var(--violet); }
.ledger strong { display: block; font: 700 clamp(18px, 1.5vw, 22px)/1.45 var(--serif); color: var(--navy); }
.ledger .d { display: block; font-size: 14px; color: var(--muted); line-height: 1.6; }
.ledger .go { color: var(--navy); }
.aside-note { margin-top: 22px; padding: 18px 22px; border-radius: 20px; background: var(--paper-2); font-size: 15px; color: var(--body); }
.aside-note b { display: block; font: 700 17px/1.6 var(--serif); color: var(--navy); margin-bottom: 4px; }
.aside-note .bullets { margin-top: 10px; }

/* ———— 内页：文章行、卡片、示意框 ———— */
.sec-lead { margin-top: 18px; font-size: clamp(16px, 1.25vw, 19px); color: var(--body); max-width: 26em; }
.sec-lead + .text-link, .stick .text-link { display: inline-block; margin-top: 20px; }
.art-list { border-top: 1px solid var(--rule-2); }
.art { display: grid; grid-template-columns: clamp(64px, 7vw, 108px) minmax(0, 1fr); gap: 20px; padding: clamp(24px, 4vh, 40px) 0; border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--header-h) + 24px); }
.art .num { font: 700 clamp(36px, 4.6vw, 68px)/1 var(--serif); color: var(--violet); transform-origin: left center; }
.art h3 { font: 700 clamp(22px, 2.1vw, 32px)/1.35 var(--serif); color: var(--navy); }
.art p { margin-top: 8px; color: var(--body); font-size: clamp(15px, 1.15vw, 17.5px); max-width: 38em; }
.art .tagline { color: var(--muted); margin-top: 2px; }
.bullets { margin-top: 14px; display: grid; gap: 6px; }
.bullets li { position: relative; padding-left: 22px; font-size: clamp(14.5px, 1.1vw, 16.5px); color: var(--body); }
.bullets li::before { content: ""; position: absolute; left: 0; top: .85em; width: 10px; height: 2px; background: var(--violet); border-radius: 2px; }
.ex { margin-top: 16px; padding: 14px 18px; border-radius: 16px; background: var(--paper-2); font-size: 15px; color: var(--body); }
.sec.alt .ex { background: var(--white); }
.ex b { color: var(--navy); margin-right: 8px; font-family: var(--serif); }
.out { margin-top: 12px; font-size: 14.5px; color: var(--muted); }
.out b { color: var(--navy); font-family: var(--serif); margin-right: 6px; }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; margin-top: 16px; }
.chain .c { padding: 5px 14px; border-radius: 999px; background: color-mix(in srgb, var(--violet) 10%, transparent); color: var(--navy); font-size: 14.5px; font-weight: 600; }
.chain i { font-style: normal; color: var(--muted); font-size: 13px; }

.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.card { padding: clamp(22px, 2.4vw, 34px); border-radius: clamp(20px, 2vw, 28px); background: var(--paper-2); border: 1px solid transparent; scroll-margin-top: calc(var(--header-h) + 24px); transition: transform 300ms var(--m-out), box-shadow 300ms var(--m-out), border-color 300ms var(--m-out); }
.sec.alt .card { background: var(--white); border-color: var(--rule); }
.card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(11, 20, 55, .4); border-color: var(--rule-2); }
.card .iw { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: color-mix(in srgb, var(--violet) 12%, transparent); margin-bottom: 18px; }
.ico { width: 26px; height: 26px; }
.ico .gl { fill: none; stroke: var(--violet); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card .cn { font: 700 12.5px var(--mono); letter-spacing: .12em; color: var(--muted); }
.card h3 { font: 700 clamp(22px, 2vw, 28px)/1.35 var(--serif); color: var(--navy); margin-top: 4px; }
.card p { margin-top: 8px; font-size: clamp(15px, 1.1vw, 17px); color: var(--body); }
.card .out { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.pills span { padding: 6px 16px; border: 1px solid var(--rule-2); border-radius: 999px; font-size: 14.5px; color: var(--body); background: var(--white); }
.pills .h { border: 0; background: none; padding-left: 0; color: var(--muted); font-family: var(--mono); letter-spacing: .1em; }
.dl { border-top: 1px solid var(--rule-2); }
.dl div { display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.dl dt { font: 700 16px/1.7 var(--serif); color: var(--navy); }
.dl dd { color: var(--body); }
.todo { color: var(--muted); }
.note { margin-top: 20px; font-size: 14.5px; color: var(--muted); }

/* 示意图外框 */
.fig-wide { margin: clamp(8px, 2vh, 24px) 0 clamp(28px, 5vh, 56px); padding: clamp(18px, 2.4vw, 40px); border-radius: clamp(20px, 2.2vw, 36px); background: var(--paper-2); }
.sec.alt .fig-wide { background: var(--white); }
.fig-wide .fig { max-width: 100%; }
.demo-sec .fig-box { background: var(--paper-2); }
.demo-fig { max-width: 560px; margin: 0 auto; }

/* 内页示意图的滚动联动（只在完整动效下） */
.mfull .fig-depth { view-timeline: --dp block; view-timeline-inset: 0px 0px; }
.mfull .dp-s { animation: fig-rise linear both; animation-timeline: --dp; animation-range: cover calc(2% + var(--k) * 7%) cover calc(18% + var(--k) * 7%); }
.mfull .dp-wire { animation: fig-draw linear both; animation-timeline: --dp; animation-range: cover calc(10% + var(--k) * 7%) cover calc(24% + var(--k) * 7%); }
.mfull .dp-ch { transform-box: fill-box; transform-origin: center; animation: fig-pop linear both; animation-timeline: --dp; animation-range: cover calc(18% + var(--k) * 7%) cover calc(26% + var(--k) * 7%); }
.mfull .dp-cap { animation: fig-fade linear both; animation-timeline: --dp; animation-range: cover 30% cover 38%; }
.mfull .fig-rel { view-timeline: --rl block; view-timeline-inset: 0px 0px; }
.mfull .rl-n { transform-box: fill-box; transform-origin: center; animation: fig-pop linear both; animation-timeline: --rl; animation-range: cover calc(4% + var(--k) * 6%) cover calc(14% + var(--k) * 6%); }
.mfull .rl-wire { animation: fig-draw linear both; animation-timeline: --rl; animation-range: cover calc(8% + var(--k) * 6%) cover calc(18% + var(--k) * 6%); }
.mfull .rl-lab { animation: fig-fade linear both; animation-timeline: --rl; animation-range: cover calc(10% + var(--k) * 6%) cover calc(20% + var(--k) * 6%); }
.mfull .rl-ch { transform-box: fill-box; transform-origin: center; animation: fig-pop linear both; animation-timeline: --rl; animation-range: cover calc(12% + var(--k) * 6%) cover calc(20% + var(--k) * 6%); }
.mfull .rl-br { animation: fig-fade linear both; animation-timeline: --rl; animation-range: cover 34% cover 44%; }
.mfull .fig-pf { view-timeline: --pf block; view-timeline-inset: 0px 0px; }
.mfull .pf-line { animation: fig-draw linear both; animation-timeline: --pf; animation-range: cover 8% cover 46%; }
.mfull .pf-n { transform-box: fill-box; transform-origin: center; animation: fig-pop linear both; animation-timeline: --pf; animation-range: cover calc(5% + var(--k) * 10%) cover calc(13% + var(--k) * 10%); }
.mfull .pf-c { animation: fig-node linear both; animation-timeline: --pf; animation-range: cover calc(7% + var(--k) * 10%) cover calc(15% + var(--k) * 10%); }
.mfull .pf-ic { animation: fig-iconc linear both; animation-timeline: --pf; animation-range: cover calc(7% + var(--k) * 10%) cover calc(15% + var(--k) * 10%); }
.mfull .pf-t { animation: fig-rise linear both; animation-timeline: --pf; animation-range: cover calc(6% + var(--k) * 10%) cover calc(17% + var(--k) * 10%); }
.mfull .pf-ch { transform-box: fill-box; transform-origin: center; animation: fig-pop linear both; animation-timeline: --pf; animation-range: cover calc(12% + var(--k) * 10%) cover calc(19% + var(--k) * 10%); }
.fig .pf-ring, .fig .wf-ring { fill: none; stroke: var(--violet); stroke-width: 2; opacity: 0; }
.fig .pf-c, .fig .pf-line { }
.fig-pf .pf-c { fill: var(--violet); stroke: var(--violet); stroke-width: 3; }
.fig-pf .pf-ic { color: var(--on-node); }
.fig-pf, .fig-depth, .fig-rel { max-width: 100%; }
.fig-pf .chip, .fig-wf .chip { }

/* 内页首屏离开时轻轻淡出（比首页更克制） */
.mfull .phero .hero-out-a { animation-range: 0px 70vh; }

/* ———— 页面级收尾 ———— */
@media (max-width: 999px) {
  .phero-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .dl div { grid-template-columns: 1fr; gap: 2px; }
  .fig-pf, .fig-depth { min-width: 0; }
  .fig-pf { display: none; }
  .art { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 600px) {
  .fig-depth, .fig-rel { min-width: 640px; }
  .fig-scroll { overflow-x: auto; }
}

.blk { scroll-margin-top: calc(var(--header-h) + 8px); }

/* ———— 联系我们：首屏直接联系，流程压缩成一条 ———— */
.ct-first { position: relative; isolation: isolate; padding: clamp(24px, 4.5vh, 52px) 0 clamp(36px, 6vh, 64px); }
.ct-first::after { content: ""; position: absolute; inset: -10vh 0 0; z-index: -1; background: radial-gradient(ellipse 46% 62% at 88% 28%, var(--glow), transparent 72%); pointer-events: none; }
.ct-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "left right" "prep right"; gap: clamp(24px, 3vh, 36px) clamp(32px, 5vw, 80px); align-items: start; }
.ct-left { grid-area: left; } .ct-right { grid-area: right; } .ct-prep { grid-area: prep; }
.ct-h1 { font: 700 clamp(38px, min(4.6vw, 8vh), 66px)/1.14 var(--serif); letter-spacing: -.02em; color: var(--navy); margin: 14px 0 0; }
.ct-lede { margin-top: clamp(12px, 2vh, 20px); max-width: 30em; font-size: clamp(16px, 1.3vw, 19px); color: var(--body); }
.ct-info { margin-top: clamp(18px, 3vh, 30px); scroll-margin-top: calc(var(--header-h) + 16px); }
.ct-info .dl div { grid-template-columns: 96px 1fr; padding: 14px 0; }
.ct-info .todo { color: #8a94b3; font-size: 15px; }
.ct-prep { padding: 18px 22px; border-radius: 20px; background: var(--paper-2); font-size: 15px; color: var(--body); }
.ct-prep b { display: block; margin-bottom: 8px; font: 700 17px/1.6 var(--serif); color: var(--navy); }
.ct-prep ol { display: grid; gap: 4px; margin: 0; padding-left: 1.3em; }
.ct-card { padding: clamp(22px, 2.6vw, 32px); border: 1px solid var(--rule); border-radius: 24px; background: var(--white); box-shadow: 0 30px 60px -44px rgba(11, 20, 55, .5); scroll-margin-top: calc(var(--header-h) + 16px); }
.ct-right { scroll-margin-top: calc(var(--header-h) + 16px); }
.ct-card h2 { font: 700 26px/1.3 var(--serif); color: var(--navy); }
.ct-card .sub { margin: 4px 0 18px; color: var(--muted); }
.ct-card .form, .ct-card .form fieldset { gap: 16px; }
.ct-card .form textarea { min-height: 92px; }
.ct-card .more { border-top: 1px dashed var(--rule-2); padding-top: 4px; }
.ct-card .more summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--violet); list-style: none; }
.ct-card .more summary::-webkit-details-marker { display: none; }
.ct-card .more summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: var(--paper-2); font-weight: 700; }
.ct-card .more[open] summary::before { content: "−"; }
.ct-card .more > div { margin-top: 14px; }
.ct-card .draft { margin-top: 16px; padding: 18px; }
.ct-card .note { margin-top: 14px; font-size: 13.5px; }
.ct-proc { padding: clamp(36px, 6vh, 60px) 0 0; background: var(--paper-2); }
.ct-proc > .wrap { padding-bottom: clamp(28px, 4vh, 44px); }
.ct-proc-h h2 { margin-top: 10px; font: 700 clamp(26px, 3vw, 36px)/1.3 var(--serif); color: var(--navy); }
.steps4 { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 22px 0 0; padding: 0; }
.steps4 li { display: grid; gap: 4px; padding: 18px 18px 16px; border: 1px solid var(--rule); border-radius: 18px; background: var(--white); scroll-margin-top: calc(var(--header-h) + 16px); }
.steps4 .n { font: 700 13px var(--mono); color: var(--violet); }
.steps4 b { font: 700 18px/1.4 var(--serif); color: var(--navy); }
.steps4 li > span:last-child { color: var(--body); font-size: 14.5px; }
.fee-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 14px; padding: 16px 20px; border: 1px solid var(--rule); border-radius: 18px; background: var(--white); scroll-margin-top: calc(var(--header-h) + 16px); }
.fee-strip ul { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.fee-strip li { position: relative; padding-left: 14px; font-size: 14.5px; color: var(--body); }
.fee-strip li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); }
.ct-more > summary { display: block; list-style: none; cursor: pointer; border-top: 1px solid var(--rule-2); background: var(--paper-2); }
.ct-more > summary::-webkit-details-marker { display: none; }
.ct-more > summary > .wrap { display: flex; align-items: center; min-height: 56px; font-weight: 700; color: var(--violet); }
.ct-more > summary:hover > .wrap { color: var(--btn-bg-h); }
.ct-more[open] > summary > .wrap > span:last-child { display: inline-block; transform: rotate(180deg); }
@media (max-width: 900px) {
  .ct-grid { grid-template-columns: 1fr; grid-template-areas: "left" "right" "prep"; }
  .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-info .dl div { grid-template-columns: 80px 1fr; }
}
@media (max-width: 560px) { .steps4 { grid-template-columns: 1fr; } .ct-card { padding: 20px; } }

.ct-grid { grid-template-rows: auto 1fr; }
.ct-prep ol { list-style: decimal; }
@media (max-width: 560px) { .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .steps4 li { padding: 14px; } .steps4 b { font-size: 16px; } .ct-grid { grid-template-rows: none; } }