/* ==========================================================================
   Zeus Insights · 主站 v3 样稿 · 合并定版 H3_merged · desktop.css
   桌面版的版面。变量与公共件在 base.css。尺寸一律用 rem，随根字号（即随视口宽度）整体缩放；
   768 至 2560 宽之间不出现横向滚动，窄于 1360、1200、900 时各有一档重排（见文件末尾）。
   底本是 H2_free；合并定版重写了首屏、买家的两难、三个支柱与页脚四处。
   ========================================================================== */


/* ---------- 1 首屏 ----------
   标题、一句副文、两个按钮居中在上；其下是系统窗口，占视口宽的九成上下（最宽 84rem）。
   窗口以外没有别的文字。窗口的尺寸策略见 demo.css 开头。 */
/* 第四轮：标题改成两行、副文删去，纵向间距收紧，让系统窗口尽量整扇落在第一屏里。
   窗口的高度在 demo.css 里按「视口高减去页眉、两行标题、按钮与下面这些间距」取值，
   这里改间距时，demo.css 里 .fd 的 height 一行（常数 8.5rem）要一起改。 */
.sec.hero { overflow: clip; padding-block: 1.625rem var(--s-24); }   /* 写成 .sec.hero：盖过 base.css 里 [data-rhythm="hero"] 的上下留白 */
.hero__copy { display: grid; justify-items: center; text-align: center; }
.hero__h { max-width: 100%; line-height: 1.08; }
.hero__h .ln { white-space: nowrap; padding-bottom: .2em; margin-bottom: -.2em; }
.hero__cta { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 1.25rem; }
.hero__cta .btn { --btn-h: 2.75rem; }

.stage { position: relative; width: min(100% - var(--gutter) * 2, 84rem); margin: 1.625rem auto 0; }
.stage__win { position: relative; min-width: 0; }
.stage__win noscript p { padding: 1.5rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--c-white); }

/* ---------- 2 客户标志 ---------- */
.clients .wrap { display: grid; grid-template-columns: 18.5rem minmax(0, 1fr); column-gap: var(--s-10); align-items: center; }
.clients__t { font-size: var(--t-ui); line-height: 1.5; color: var(--ink-muted); max-width: 16.875rem; text-wrap: pretty; }
.clients__logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.clients__logos li { display: grid; place-items: center; height: 6.25rem; padding: 0 1rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background var(--d-2) var(--e-out); }
.clients__logos li:hover { background: var(--surface-2); }
.clients__logos img { width: auto; max-width: 100%; }
.clients__logos .inv img { filter: brightness(0); }
/* 名单末尾的 More +：占最右一列、跨两行，不是链接 */
.clients__logos { grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(7.5rem, .7fr); }
.clients__logos .clients__more { grid-column: 6; grid-row: 1 / span 2; height: auto; font-family: var(--f-mono, "Geist Mono", ui-monospace, monospace); font-size: var(--t-ui); letter-spacing: .02em; color: var(--ink-muted); white-space: nowrap; }
.clients__logos .clients__more:hover { background: none; }

/* ---------- 3 买家的两难 ----------
   版式与点阵图形取自第一版：左边一块深色画框，点阵在两种结局之间变形并跟随指针；
   右边小标签、标题与两条文字，当前一条的上边线在 5.6 秒内填满，指针移上去即切到那一条。
   按本版适配：画框是暖黑、圆角 .75rem，点是暖纸色；两条文字前各有一枚整圆标记，
   当前一条的圆心是红点（与步骤轨、问答、单选圆同一个写法）。 */
.choice__in { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 5.5rem); align-items: center; }
.choice__fig { position: relative; aspect-ratio: 1 / .88; border-radius: var(--r-3); overflow: hidden; --dot-ink: #EFEBE2; }
.choice__fig canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.choice__txt .h-2 { margin-top: var(--s-5); }
.choice__txt .h-2 span { display: block; }
.choice__txt .h-2 .v-sans { margin-top: .08em; }
.choice__list { margin-top: var(--s-12); max-width: 33rem; }
.choice__list li { position: relative; display: grid; grid-template-columns: 1.125rem minmax(0, 1fr); column-gap: .875rem; padding: 1.375rem 0 1.5rem; cursor: default; }
.choice__list li:last-child { border-bottom: 1px solid var(--line-strong); }
.choice__bar { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-strong); }
.choice__bar i { display: block; height: 2px; margin-top: -.5px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.choice__list li.is-on .choice__bar i { animation: choice-fill var(--choice-ms, 5600ms) linear forwards; }
@keyframes choice-fill { to { transform: scaleX(1); } }
.choice__list li::before { content: ""; width: 1.125rem; height: 1.125rem; margin-top: .3125rem; border-radius: 50%; border: 1px solid var(--line-strong); background: radial-gradient(circle, var(--c-red) 0 .21875rem, transparent .25rem) no-repeat center / 0 0; transition: border-color var(--d-2) var(--e-out), background-size var(--d-3) var(--e-spring); }
.choice__list li.is-on::before { border: 2px solid var(--ink); background-size: 100% 100%; }
.choice__list p { font-size: 1.125rem; line-height: 1.55; color: var(--ink-subtle); text-wrap: pretty; transition: color var(--d-3) var(--e-out); }
.choice__list strong { font-weight: 500; color: var(--ink-muted); transition: color var(--d-3) var(--e-out); }
.choice__list li.is-on p { color: var(--ink-muted); }
.choice__list li.is-on strong { color: var(--ink); }
/* 脚本没有运行或减少动态效果：两条同等分量，没有进度线 */
:is(html.rm, html:not(.js)) .choice__list p { color: var(--ink-muted); }
:is(html.rm, html:not(.js)) .choice__list strong { color: var(--ink); }
:is(html.rm, html:not(.js)) .choice__bar i { display: none; }

/* ---------- 4 第三条路与三个支柱 ----------
   第二轮：恢复第二版原样。三张卡上方是圆环图形（画布），下方是编号、标题、正文；标题右侧是归拢图。
   只有第一张图重画（engine.js 的 home 场景：一个首页，四块各一步可达）。 */
.third__head { display: grid; grid-template-columns: minmax(0, 1fr) 18.75rem; column-gap: var(--s-16); align-items: center; }
.third__head .h-2 { margin-top: var(--s-5); max-width: 61.25rem; }
.third__fig { width: 18.75rem; height: 15.625rem; }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-4); margin-top: var(--s-16); }
.pillar { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; transition: border-color var(--d-2) var(--e-out), transform var(--d-3) var(--e-out), box-shadow var(--d-3) var(--e-out); }
.pillar:hover { border-color: var(--line-strong); transform: translateY(-.1875rem); box-shadow: 0 1.375rem 2.5rem -1.75rem rgba(25, 24, 23, .4); }
.pillar__fig { height: 15.625rem; border-bottom: 1px solid var(--line); }
.pillar__fig canvas { width: 100%; height: 100%; }
.pillar__txt { padding: var(--s-6) var(--s-6) 1.75rem; }
.pillar__n { font-family: var(--f-mono); font-size: .8125rem; color: var(--ink-subtle); }
.pillar .h-3 { margin-top: .375rem; }
.pillar .body { margin-top: var(--s-3); color: var(--ink); font-size: var(--t-body); line-height: 1.55; }

/* 页内链接把焦点交给目标区块时，区块本身不画焦点框（它不是控件） */
main > section:focus, main > section:focus-visible { outline: none; }

/* ---------- 5 一个项目怎样进行 ----------
   外层很高（一屏，加四步、每步 75% 屏高），内层粘在页眉下。左：步骤轨与换段的文字；右：深色面板。
   四步的文字与画面叠在同一位置，只显示当前一步；面板底与焦点环是共用的一层。 */
.how { border-top: 1px solid var(--line); }
.how__pin { height: 400vh; }
.how__stage { position: sticky; top: var(--hdr-h); height: calc(100vh - var(--hdr-h)); min-height: 37.5rem; overflow: clip; }
.how__in { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); row-gap: 1.5rem; padding-block: 2.375rem 2.75rem; }
.how__eyebrow { justify-self: start; }
.how__body { display: grid; grid-template-columns: 4.875rem minmax(0, 1fr); min-height: 0; }
.how__area { --pw: 56%; position: relative; min-height: 0; }
.how__panel { position: absolute; top: 0; right: 0; bottom: 0; width: var(--pw); border-radius: var(--r-3); overflow: hidden; }
.how__panel canvas { width: 100%; height: 100%; }
.how__steps { position: absolute; inset: 0; }
.hstep { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--pw); column-gap: var(--s-16); align-items: center;
  opacity: 0; pointer-events: none; transition: opacity var(--d-1) var(--e-out); }
/* 换步：上一步先很快隐去，下一步稍后再出现，两步的文字不叠在一起 */
.hstep.is-on { opacity: 1; pointer-events: auto; transition: opacity var(--d-3) var(--e-out) 110ms; }
.hstep__txt { padding-bottom: 5vh; }
.hstep__txt > * { transform: translateY(1.375rem); transition: transform var(--d-4) var(--e-out); }
.hstep.is-on .hstep__txt > * { transform: none; }
.hstep.is-on .hstep__txt > :nth-child(2) { transition-delay: 60ms; }
.hstep.is-on .hstep__txt > :nth-child(3) { transition-delay: 120ms; }
.hstep__n { font-size: .8125rem; color: var(--ink-subtle); }
.hstep__txt .h-2 { margin-top: var(--s-4); }
.hstep__txt .lead { margin-top: var(--s-6); max-width: 30em; }
.hstep__fig { position: relative; align-self: stretch; background: none; border-radius: var(--r-3); overflow: hidden; }

/* 步骤轨：四枚环串在一条发丝线上，走过的填实，当前的一枚中心是红点 */
.how__rail { --rail: 0; position: relative; align-self: center; display: grid; row-gap: 1.625rem; padding-bottom: 5vh; }
.how__rail::before, .how__rail::after { content: ""; position: absolute; left: .5625rem; top: .75rem; width: 1px; height: calc(100% - 5vh - 1.5rem); background: var(--line-strong); }
.how__rail::after { background: var(--ink); transform-origin: 0 0; transform: scaleY(var(--rail)); }
.how__rail button { position: relative; z-index: 1; display: flex; align-items: center; gap: .75rem; height: 1.5rem; padding-right: .5rem; font-size: .8125rem; color: var(--ink-subtle); border-radius: var(--r-pill); }
.how__ring { position: relative; flex: none; width: 1.1875rem; height: 1.1875rem; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); transition: border-color var(--d-2) var(--e-out), background var(--d-2) var(--e-out), border-width var(--d-2) var(--e-out); }
.how__ring::after { content: ""; position: absolute; inset: 0; margin: auto; width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--c-red); transform: scale(0); transition: transform var(--d-3) var(--e-spring); }
.how__rail button:hover .how__ring { border-color: var(--ink); }
.how__rail button.is-done .how__ring { background: var(--ink); border-color: var(--ink); }
.how__rail button[aria-current="step"] { color: var(--ink); }
.how__rail button[aria-current="step"] .how__ring { border: 2px solid var(--ink); }
.how__rail button[aria-current="step"] .how__ring::after { transform: scale(1); }

.how__fine { display: grid; grid-template-columns: .875rem minmax(0, 1fr); column-gap: .625rem; max-width: 35rem; margin-left: 4.875rem; padding: .25rem 0 var(--s-20); color: var(--ink-muted); }
.how__fine::before { content: ""; width: .4375rem; height: .4375rem; margin-top: .4375rem; border-radius: 50%; border: 1px solid var(--ink-subtle); }

/* ---------- 6 使用它的人 ----------
   一块暖纸色的舞台，三件设备。设备随滚动由下方升起（手机从口袋里拿出来），
   焦点环的环心在当前一件上；下方三项文字与设备一一对应。 */
.people__head { max-width: 61.25rem; }
.people__head .h-2 { margin-top: var(--s-5); }
.devstage { --p: 1; --q: 0; position: relative; margin-top: var(--s-16); aspect-ratio: 1360 / 610; border-radius: var(--r-3); overflow: hidden; isolation: isolate; }
.devstage__bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.dev { position: absolute; margin: 0; top: 11%; transform-origin: 50% 60%; transition: scale var(--d-4) var(--e-out), box-shadow var(--d-3) var(--e-out); will-change: translate; }
.dev img { display: block; width: 100%; height: auto; }
.dev--phone { width: 18.2%; padding: .4375rem; border-radius: 1.875rem; background: var(--c-ink); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 1.875rem 3.125rem -1.75rem rgba(25, 24, 23, .5); }
.dev--phone .dev__screen { position: relative; aspect-ratio: 780 / 1688; border-radius: 1.4375rem; overflow: hidden; background: var(--c-white); }
.dev--a { left: 5.3%; translate: 0 calc((1 - var(--p)) * 58%); }
.dev--c { right: 5.3%; translate: 0 calc((1 - var(--p)) * 24%); }
.dev--win { left: 27.2%; width: 47.2%; height: 100%; border-radius: .75rem .75rem 0 0; overflow: hidden; background: var(--c-white); border: 1px solid rgba(25, 24, 23, .16); border-bottom: 0;
  box-shadow: 0 1.875rem 3.75rem -1.875rem rgba(25, 24, 23, .4); translate: 0 calc((1 - var(--p)) * 12%); }
.dev__bar { display: flex; align-items: center; gap: .375rem; height: 2.125rem; padding: 0 .8125rem; background: #FAF8F5; border-bottom: 1px solid #E9E5DE; }
.dev__bar i { width: .5625rem; height: .5625rem; border-radius: 50%; border: 1px solid #BDB7AC; }
.dev--win .dev__screen img { translate: 0 calc(var(--q) * -6%); }
.dev.is-focus { scale: 1.025; }
/* 手机 C：点一下，文字稿立刻上来；再点一下，回到播放页。五秒多一轮。 */
.dev__sheet { position: absolute; inset: 0; transform: translateY(101%); }
.dev__tap { position: absolute; width: 2.125rem; height: 2.125rem; margin: -1.0625rem 0 0 -1.0625rem; border-radius: 50%; border: 2px solid var(--c-red); background: rgba(230, 0, 0, .1); opacity: 0; }
.dev__tap--a { left: 50%; top: 95.4%; }
.dev__tap--b { left: 8.6%; top: 4.1%; }
.devstage.is-live .dev__sheet { animation: dev-sheet 5.6s var(--e-out) infinite; }
.devstage.is-live .dev__tap--a { animation: dev-tap-a 5.6s var(--e-out) infinite; }
.devstage.is-live .dev__tap--b { animation: dev-tap-b 5.6s var(--e-out) infinite; }
@keyframes dev-sheet { 0%, 22% { transform: translateY(101%); } 25.5%, 68% { transform: translateY(0); } 71.5%, 100% { transform: translateY(101%); } }
@keyframes dev-tap-a { 0%, 15% { opacity: 0; transform: scale(.4); } 19% { opacity: 1; transform: scale(1); } 27% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes dev-tap-b { 0%, 61% { opacity: 0; transform: scale(.4); } 65% { opacity: 1; transform: scale(1); } 73% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; transform: scale(1.7); } }

/* 取词对照：六条真实字样，逐行点亮 */
.strings { position: absolute; right: 26.7%; bottom: 1.625rem; width: max(30%, 26rem); background: var(--c-white); color: var(--c-ink); border-radius: .625rem; border: 1px solid rgba(25, 24, 23, .14); overflow: hidden;
  box-shadow: 0 1.5rem 3.125rem -1.5rem rgba(25, 24, 23, .5); translate: 0 calc((1 - var(--p)) * 3.75rem); }
.strings__bar { display: flex; align-items: center; justify-content: space-between; height: 2.375rem; padding: 0 .875rem; background: #FAF8F5; border-bottom: 1px solid #E9E5DE; font-size: .8125rem; }
.strings__lang { font-size: .8125rem; padding: 0 .5rem; line-height: 1.3125rem; border-radius: 6.1875rem; background: #EFECE6; }
.strings__n { color: #56534E; }
.strings__n b { color: var(--c-ink); font-weight: 600; font-size: .8125rem; }
.strings__row { display: grid; grid-template-columns: 1.25fr 1fr 1.1fr; column-gap: .625rem; align-items: center; padding: 0 .875rem; min-height: 1.9375rem; font-size: .8125rem; line-height: 1.25; border-bottom: 1px solid #F0EDE7; transition: background var(--d-2) var(--e-out); }
.strings__row:last-child { border-bottom: 0; }
.strings__row--h { min-height: 1.6875rem; font-size: .8125rem; color: #66635E; }
.strings__row > span:nth-child(2) { color: #66635E; }
.strings__row > span:nth-child(3) { font-weight: 600; }
.strings__row [lang="zh-Hant-TW"] { font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", "Noto Sans SC", sans-serif; font-size: .875rem; }
.strings__row.is-on { background: #FFF5EC; }
.strings__row.is-on > span:nth-child(2) { text-decoration: line-through; text-decoration-color: rgba(192, 54, 44, .7); }
.strings__rows { position: relative; }

.people__list { display: grid; grid-template-columns: 21.9% 49.3% minmax(0, 1fr); padding-left: 5.3%; margin-top: var(--s-8); }
.pitem { padding-right: var(--s-10); cursor: default; }
.pitem__bar { display: block; height: 1px; background: var(--line-strong); margin-bottom: var(--s-5); }
.pitem__bar i { display: block; height: 2px; margin-top: -0.5px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.pitem.is-on .pitem__bar i { animation: pitem-fill 5.2s linear forwards; }
.pitem.is-held .pitem__bar i { animation: none; transform: none; }
@keyframes pitem-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pitem .h-3 { display: grid; grid-template-columns: .875rem minmax(0, 1fr); column-gap: .5rem; text-wrap: balance; }
.pitem .h-3::before { content: ""; width: .4375rem; height: .4375rem; margin-top: .6875rem; border-radius: 50%; border: 1px solid var(--ink-subtle); transition: background var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out); }
.pitem.is-on .h-3::before { background: var(--c-red); border-color: var(--c-red); }
.pitem .body { margin: var(--s-3) 0 0 1.375rem; max-width: 34em; }

/* ---------- 7 在用的系统 ----------
   大标题钉在舞台中央，卡片依次漂过。卡片是与首屏演出窗口同一种质地的白色窗口。 */
.work { border-top: 1px solid var(--line); }
.work__pin { height: 350vh; }
.work__stage { position: sticky; top: var(--hdr-h); height: calc(100vh - var(--hdr-h)); min-height: 37.5rem; overflow: clip; }
.work__head { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; text-align: center; padding: 0 var(--gutter) 3vh; }
.work__head .link { margin-top: var(--s-10); font-size: 1.0625rem; }
.work__cards { position: absolute; inset: 0; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; pointer-events: none; }
.wcard { position: absolute; top: 50%; left: calc(var(--gutter) + (100% - var(--gutter) * 2 - 25.25rem) * var(--xf, 0)); width: 25.25rem; border-radius: var(--r-3); overflow: hidden; border: 1px solid rgba(25, 24, 23, .16);
  box-shadow: 0 1px 1px rgba(25, 24, 23, .04), 0 1.5rem 3rem -1.5rem rgba(25, 24, 23, .28), 0 3.125rem 6.875rem -2.5rem rgba(25, 24, 23, .4); opacity: 0; pointer-events: auto; will-change: transform, opacity; }
.wcard__bar { display: flex; align-items: center; height: 3.375rem; padding: 0 1rem; border-bottom: 1px solid var(--line); background: #FAF8F5; }
.wcard__bar img { height: 1.875rem; width: auto; }
.wcard__shot { position: relative; height: 16.75rem; overflow: hidden; background: var(--c-paper); }
.wcard__shot > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* 截图四周留白多的，放大到只看应用本身（--zw 宽度，--zx 左移），不裁内容的上沿 */
.wcard__shot--zoom > img { width: var(--zw, 100%); max-width: none; height: auto; margin-left: var(--zx, 0%); object-fit: fill; }
.wcard__shot--phones { display: flex; justify-content: center; gap: 1.125rem; padding-top: 1.375rem; }
.wcard__shot--phones > img { width: 9.375rem; height: auto; align-self: flex-start; object-fit: fill; border-radius: 1rem; border: .3125rem solid var(--c-ink); box-shadow: 0 1.125rem 1.875rem -1.125rem rgba(25, 24, 23, .5); }
.wcard__shot--win { display: flex; justify-content: center; padding-top: 1.25rem; }
.wcard__shot--win > img { width: 15.5rem; height: auto; align-self: flex-start; object-fit: fill; border-radius: .625rem; border: 1px solid rgba(25, 24, 23, .14); box-shadow: 0 1.125rem 1.875rem -1.125rem rgba(25, 24, 23, .45); }
.wcard__t { padding: 1.0625rem 1.25rem 1.3125rem; border-top: 1px solid var(--line); font-size: 1.0625rem; line-height: 1.42; letter-spacing: -0.008em; color: var(--ink); text-wrap: pretty; }

/* ---------- 8 AI ready（深色） ---------- */
.ready { overflow: clip; }
.ready__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 36.25rem); column-gap: var(--s-20); align-items: center; }
.ready .h-2 { margin-top: var(--s-5); max-width: 13em; }
.ready__list { margin-top: var(--s-12); border-top: 1px solid var(--line-strong); }
.rdy { position: relative; display: grid; grid-template-columns: 2.875rem minmax(0, 1fr); align-items: baseline; padding: 1rem 0 1.0625rem; border-bottom: 1px solid var(--line);
  font-size: 1.3125rem; line-height: 1.32; letter-spacing: -0.015em; color: var(--ink-muted); cursor: default; }
.rdy > span { transition: color var(--d-2) var(--e-out), translate var(--d-3) var(--e-out); }
.rdy .mono { font-size: .8125rem; color: var(--ink-subtle); }
.rdy.is-on > span { color: var(--ink); }
.rdy.is-on > span:last-child { translate: .375rem 0; }
.rdy.is-on .mono { color: var(--accent-text); }
.ready__more { margin-top: var(--s-10); font-size: 1.0625rem; }
.ready__fig { position: relative; aspect-ratio: 1; }   /* 只占位：环组画在铺满区块的画布上，位置与大小取这一格 */

/* ---------- 9 问答 ---------- */
.faq__in { display: grid; grid-template-columns: minmax(0, 26.875rem) minmax(0, 1fr); column-gap: var(--s-20); align-items: start; }
.faq__head { position: sticky; top: calc(var(--hdr-h) + var(--s-16)); }
.faq__head .h-2 { margin-top: var(--s-5); }
.faq__head .h-2 span { display: block; }
.faq__list { border-top: 1px solid var(--line-strong); }
.qa { border-bottom: 1px solid var(--line); }
.qa h3 { font: inherit; }
.qa__q { display: grid; grid-template-columns: minmax(0, 1fr) 1.875rem; align-items: center; column-gap: var(--s-8); width: 100%; padding: 1.5625rem 2px 1.5625rem 0; text-align: left;
  font-size: 1.5rem; line-height: 1.25; font-weight: 450; letter-spacing: -0.022em; color: var(--ink); cursor: pointer; }
.qa__ring { position: relative; width: 1.875rem; height: 1.875rem; border-radius: 50%; border: 1px solid var(--line-strong); transition: border-color var(--d-2) var(--e-out), border-width var(--d-2) var(--e-out); }
.qa__ring::before, .qa__ring::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--ink); transition: transform var(--d-3) var(--e-out), opacity var(--d-2) var(--e-out), background var(--d-2) var(--e-out), width var(--d-3) var(--e-spring), height var(--d-3) var(--e-spring), border-radius var(--d-2) var(--e-out); }
.qa__ring::before { width: .6875rem; height: 1.5px; }
.qa__ring::after { width: 1.5px; height: .6875rem; }
.qa__q:hover .qa__ring { border-color: var(--ink); }
.qa.is-open .qa__ring { border: 2px solid var(--ink); }
.qa.is-open .qa__ring::before { opacity: 0; transform: scaleX(0); }
.qa.is-open .qa__ring::after { width: .5625rem; height: .5625rem; border-radius: 50%; background: var(--c-red); }
.qa__a { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--d-3) var(--e-out), visibility 0s linear var(--d-3); }
.qa__a > div { min-height: 0; overflow: hidden; }
.qa__a p { max-width: 40em; padding: 0 var(--s-16) 1.875rem 0; font-size: 1.0938rem; line-height: 1.6; color: var(--ink-muted); text-wrap: pretty; opacity: 0; transform: translateY(-.375rem); transition: opacity var(--d-2) var(--e-out), transform var(--d-3) var(--e-out); }
.qa.is-open .qa__a { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.qa.is-open .qa__a p { opacity: 1; transform: none; transition-delay: 90ms; }

/* ---------- 10 收尾 ---------- */
.close { overflow: clip; border-top: 1px solid var(--line); }
.close__in { display: grid; justify-items: center; text-align: center; padding-block: 9.25rem 9.75rem; }
.close__h { font-size: clamp(3rem, 5.9vw, 5.8rem); line-height: 1.02; font-family: var(--f-serif); font-weight: 300; }
.close__h .ln { padding-bottom: .16em; margin-bottom: -.1em; }
.close__h .v-serif { letter-spacing: -0.03em; }
.close__h .v-sans { letter-spacing: -0.05em; }
.close__cta { display: grid; justify-items: center; margin-top: var(--s-16); }
.btn--lg { --btn-h: 3.75rem; padding: 0 2rem 0 1.625rem; gap: .8125rem; font-size: 1.125rem; }
.btn--lg .btn__dot { width: .625rem; height: .625rem; }
.close__mail { margin-top: var(--s-5); font-size: var(--t-ui); color: var(--ink-muted); }

/* ---------- 页脚 ----------
   版式取自第一版：展示字标（W1a 原件，只定高度）在左，导航六项一行在右；
   发丝线下是版权行与三词原件；最后是署名行。质感按本版：暖黑底、Geist、发丝线。 */
.sec.foot { padding-block: var(--s-20) var(--s-10); }
.foot__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-12); padding-bottom: var(--s-24); }
.foot__mark { display: block; line-height: 0; flex: none; }
.foot__mark img { height: 5rem; width: auto; }
.foot__nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem 2.75rem; padding-top: .75rem; }
.foot__nav a { position: relative; padding: .375rem 0; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.012em; text-decoration: none; color: var(--ink); white-space: nowrap; }
.foot__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .125rem; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--d-2) var(--e-out); }
.foot__nav a:hover::after, .foot__nav a:focus-visible::after { transform: scaleX(1); }
.foot__lang { font-family: "Noto Sans SC", "Microsoft YaHei", var(--f-sans); letter-spacing: .02em; }
.foot__base { display: flex; align-items: center; justify-content: space-between; gap: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.foot__copy { font-size: var(--t-label); line-height: 1.5; color: var(--ink-subtle); }
.foot__values { height: 1.375rem; width: auto; }
.foot__credit { margin-top: var(--s-6); max-width: 76em; font-size: var(--t-label); line-height: 1.55; color: var(--ink-subtle); }
.foot__credit a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; transition: color var(--d-2) var(--e-out); }
.foot__credit a:hover { color: var(--ink); }

/* ---------- 减少动态效果，以及脚本没有运行的情况 ----------
   画布由 engine.js 定格。这里把粘性与漂移类区块改成普通的纵向排列，内容完整、互不遮挡。
   脚本没有运行时（html 不带 .js）用同一套排法，问答全部展开：文字都在，只是没有画面。 */
html:not(.js) [data-pin] { height: auto !important; }
html:not(.js) [data-pin] [data-pin-stage] { position: static !important; height: auto !important; }
html:not(.js) .hstep__fig { display: none; }
html:not(.js) .hstep { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .qa__a { grid-template-rows: 1fr; visibility: visible; }
html:not(.js) .qa__a p { opacity: 1; transform: none; }
html:not(.js) .qa__ring { display: none; }
:is(html.rm, html:not(.js)) .pillar:hover { transform: none; }
:is(html.rm, html:not(.js), .how.is-flow) .how__in { height: auto; display: block; padding-block: var(--s-24) var(--s-12); }
:is(html.rm, html:not(.js), .how.is-flow) .how__body { display: block; margin-top: var(--s-12); }
:is(html.rm, html:not(.js), .how.is-flow) .how__rail, :is(html.rm, html:not(.js), .how.is-flow) .how__panel { display: none; }
:is(html.rm, html:not(.js), .how.is-flow) .how__steps { position: static; display: grid; row-gap: var(--s-16); }
:is(html.rm, html:not(.js), .how.is-flow) .hstep { position: static; opacity: 1; pointer-events: auto; grid-template-columns: minmax(0, 1fr) 56%; }
:is(html.rm, html:not(.js), .how.is-flow) .hstep__txt { padding-bottom: 0; }
:is(html.rm, html:not(.js), .how.is-flow) .hstep__txt > * { transform: none; }
:is(html.rm, html:not(.js), .how.is-flow) .hstep__fig { align-self: auto; aspect-ratio: 680 / 600; background: var(--surface); }
:is(html.rm, html:not(.js), .how.is-flow) .how__fine { margin-left: 0; }
:is(html.rm, html:not(.js)) .devstage { --p: 1; --q: 0; }
:is(html.rm, html:not(.js)) .dev.is-focus { scale: none; }
:is(html.rm, html:not(.js)) .pitem.is-on .pitem__bar i { animation: none; transform: none; }
:is(html.rm, html:not(.js)) .work__pin { height: auto; }
:is(html.rm, html:not(.js)) .work__stage { overflow: visible; padding-block: var(--s-24); }
:is(html.rm, html:not(.js)) .work__head { position: static; padding-bottom: var(--s-16); }
:is(html.rm, html:not(.js)) .work__cards { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); padding-inline: var(--gutter); pointer-events: auto; }
:is(html.rm, html:not(.js)) .wcard { position: static; width: auto; opacity: 1 !important; transform: none !important; box-shadow: none; }

/* 区块 5 的顺排模式（.how.is-flow，由 desktop.js 在视口窄于 1200 或矮于 680 时加上）：
   不钉住，四步依次排开，每步的画面在自己进入视口时播放。画面里的字因此不必缩小。 */
.how.is-flow .how__pin { height: auto; }
.how.is-flow .how__stage { position: static; height: auto; min-height: 0; }

/* ---------- 随宽度重排 ----------
   媒体查询用像素（根字号本身随宽度变，不宜再拿它当断点的单位）。 */
/* 窄于 1360 */
@media (max-width: 1359px) {
  .third__head { grid-template-columns: minmax(0, 1fr) 16.25rem; }
  .third__fig { width: 16.25rem; height: 13.75rem; }
  .ready__in { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); column-gap: var(--s-16); }
  .faq__in { grid-template-columns: minmax(0, 23.75rem) minmax(0, 1fr); column-gap: var(--s-16); }
  .how__body { grid-template-columns: 4rem minmax(0, 1fr); }
  .how__fine { margin-left: 4rem; }
  .hstep { column-gap: var(--s-12); }
}
/* 窄于 1200：并排的改成上下 */
@media (max-width: 1199px) {
  .clients .wrap { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); }
  .clients__t { max-width: none; }
  .how.is-flow .hstep { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-8); }
  .how.is-flow .hstep__fig { width: min(100%, 46rem); }
  .how.is-flow .how__fine { padding-top: var(--s-8); }
  .devstage { aspect-ratio: 1360 / 760; }
  .strings { right: auto; left: 50%; margin-left: -13rem; width: 26rem; bottom: 1rem; }
  .ready__in { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-12); }
  .ready__fig { width: min(100%, 30rem); justify-self: center; }
  .faq__in { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-10); }
  .faq__head { position: static; }
  .faq__head .h-2 span { display: inline; }
  :is(html.rm, html:not(.js)) .work__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(html.rm, html:not(.js)) .hstep { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-8); }
  :is(html.rm, html:not(.js)) .hstep__fig { width: min(100%, 46rem); }
}
/* 窄于 1024：页签的固定宽度收一档，四格加右侧两项仍排得下 */
@media (max-width: 1023px) {
  .hdr__nav { --tab-w: 5.75rem; }
  .hdr__nav a { font-size: 1rem; }
}
/* 窄于 900：页眉收紧，三列改一列 */
@media (max-width: 899px) {
  :root { --gutter: 1.5rem; }
  .hdr__in { gap: var(--s-6); }
  .hdr__logo img { height: 1.875rem; }
  .hdr__nav { margin-left: 0; --tab-w: 5.125rem; }
  .hdr__nav a { font-size: 1rem; }
  .hdr__end { gap: var(--s-5); }
  .clients__logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .clients__logos .clients__more { grid-column: 3 / span 2; grid-row: auto; height: 6.25rem; }
  .choice__in { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-12); }
  .choice__fig { aspect-ratio: 1 / .56; }
  .choice__list { max-width: none; }
  .third__head { grid-template-columns: minmax(0, 1fr); }
  .third__fig { display: none; }
  .pillars { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-4); }
  .pillar { flex-direction: row; }
  .pillar__fig { flex: none; width: 15rem; height: auto; min-height: 13rem; border-bottom: 0; border-right: 1px solid var(--line); }
  .people__list { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); padding-left: 0; }
  .wcard { width: 22rem; left: calc(var(--gutter) + (100% - var(--gutter) * 2 - 22rem) * var(--xf, 0)); }
  .foot__top { flex-direction: column; gap: var(--s-8); padding-bottom: var(--s-16); }
  .foot__nav { justify-content: flex-start; padding-top: 0; }
  .foot__base { flex-wrap: wrap; gap: var(--s-4); }
}
/* 首屏标题：视口窄到一行放不下第一句时，允许折行 */
@media (max-width: 800px) {
  .hero__h .ln { white-space: normal; }
}
/* 视口不够高时，钉住的舞台收紧留白 */
@media (max-height: 800px) {
  .how__in { padding-block: 1.25rem 1.5rem; row-gap: .875rem; }
}