/* ==========================================================================
   Zeus Insights · 主站 v3 · mpages.css
   二级页（方案、AI、案例、关于我们）的手机版版面。在 mobile.css 之后引入。
   结构与桌面版同一份网页，这里按单栏重排：并排的改上下，钉住与横推的区块改为纵向排列，
   时间与流程改为左侧一条竖线随滚动走完。任何文字不小于 13 像素，触控目标不小于 44 像素。
   ========================================================================== */

/* ---------- 首屏 ---------- */
.sec.phero { overflow: clip; padding-block: 2.25rem 2.75rem; border-bottom: 1px solid var(--line); }
.phero__in { display: grid; }
.phero__h { margin-top: 1rem; line-height: 1.08; }
.phero__h .ln { white-space: normal; }
.phero__lead { margin-top: 1.25rem; font-size: 1.0625rem; }
.phero__cta { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 1.75rem; }
.phero__fig { position: relative; justify-self: center; width: min(100%, 19rem); aspect-ratio: 1; margin-top: 1.5rem; }
.phero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.phero__facts { display: grid; margin-top: 1rem; border-top: 1px solid var(--line-strong); }
.phero__facts > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); align-items: baseline; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.phero__facts dt { font-size: .8125rem; color: var(--ink-subtle); }
.phero__facts dd { margin: 0; font-size: 1.125rem; }

.shead .h-2 { margin-top: 1rem; }
.shead__lead { margin-top: 1rem; }

/* ---------- 方案 · 四类系统 ---------- */
.kinds__grid { display: grid; row-gap: 1rem; margin-top: 2rem; }
.kind { border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; scroll-margin-top: calc(var(--hdr-h) + .75rem); }
.kind__fig { position: relative; height: 14rem; overflow: hidden; background: var(--c-paper); border-bottom: 1px solid var(--line); }
.kind__shot { position: absolute; inset: 1.25rem 1.25rem 0; display: flex; justify-content: center; }
.kind__win { width: 100%; border-radius: .5rem .5rem 0 0; overflow: hidden; border: 1px solid rgba(25, 24, 23, .14); border-bottom: 0; background: var(--c-white); }
.kind__win img { width: 100%; height: auto; }
.kind__shot--tall img { width: 11rem; height: auto; align-self: flex-start; border-radius: .5rem .5rem 0 0; border: 1px solid rgba(25, 24, 23, .14); }
.kind__scene { position: absolute; inset: 0; }
.kind__scene canvas { width: 100%; height: 100%; }
.pdev__bar { display: flex; align-items: center; gap: .3125rem; height: 1.5rem; padding: 0 .625rem; background: #FAF8F5; border-bottom: 1px solid #E9E5DE; }
.pdev__bar i { width: .4375rem; height: .4375rem; border-radius: 50%; border: 1px solid #BDB7AC; }
.kind__txt { padding: 1.25rem 1.25rem 1.5rem; }
.kind__cat { display: flex; align-items: baseline; gap: .625rem; font-family: var(--f-mono); font-size: .8125rem; color: var(--ink-muted); }
.kind__n { color: var(--ink-subtle); }
.kind__h { margin-top: .5rem; font-size: 1.5rem; line-height: 1.22; font-weight: 400; letter-spacing: -0.02em; }
.kind__pts { margin-top: 1rem; display: grid; row-gap: .375rem; }
.kind__pts li { position: relative; padding-left: 1.375rem; font-size: 1rem; line-height: 1.45; }
.kind__pts li::before { content: ""; position: absolute; left: 0; top: .5em; width: .5625rem; height: .5625rem; border-radius: 50%; border: 1px solid var(--ink-subtle); }
.kind__ai { display: grid; row-gap: .25rem; margin-top: 1.125rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .9375rem; line-height: 1.5; color: var(--ink-muted); }
.kind__lab { font-size: .8125rem; color: var(--ink-subtle); }
.kind__ai .kind__lab::before { content: ""; display: inline-block; width: .4375rem; height: .4375rem; margin-right: .5rem; border-radius: 50%; background: var(--accent); vertical-align: .08em; }
.kind__refs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }
.kind__refs .kind__lab { width: 100%; }
.kind__note { font-size: .9375rem; color: var(--ink-muted); }
.ref { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 .875rem 0 .375rem; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: .875rem; font-weight: 500; color: var(--ink); text-decoration: none; }
.ref img { width: 1.5rem; height: 1.5rem; }
.kinds__foot { display: grid; row-gap: .75rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line-strong); font-size: 1.0625rem; color: var(--ink-muted); }
.kinds__foot .link { justify-self: start; min-height: 2.75rem; color: var(--ink); }

/* ---------- 方案 · 五项职能：竖排，左边一条线随滚动走完 ---------- */
.proc__track { position: relative; margin-top: 2rem; padding-left: 2rem; }
.proc__line { position: absolute; left: .59rem; top: .59rem; bottom: 2rem; width: 1px; background: var(--line-strong); }
.proc__line i { display: block; width: 2px; height: 100%; margin-left: -.5px; background: var(--ink); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
.proc__list { display: grid; row-gap: 2rem; }
.proc__i { position: relative; opacity: .45; transition: opacity var(--d-3) var(--e-out); }
.proc__i.is-done, .proc__i.is-cur { opacity: 1; }
.proc__ring { position: absolute; left: -2rem; top: 0; display: block; width: 1.1875rem; height: 1.1875rem; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); }
.proc__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); }
.proc__i.is-done .proc__ring { background: var(--ink); border-color: var(--ink); }
.proc__i.is-cur .proc__ring { border: 2px solid var(--ink); }
.proc__i.is-cur .proc__ring::after { transform: scale(1); }
.proc__k { display: flex; align-items: baseline; gap: .5rem; font-size: 1.25rem; line-height: 1.2; font-weight: 500; letter-spacing: -0.015em; }
.proc__k .mono { font-size: .8125rem; font-weight: 400; color: var(--ink-subtle); }
.proc__p { margin-top: .5rem; font-size: 1rem; line-height: 1.55; color: var(--ink-muted); }
.proc__get { margin-top: .75rem; padding-top: .625rem; border-top: 1px solid var(--line); font-size: .9375rem; font-weight: 500; }
.proc__get .mono { display: block; margin-bottom: .125rem; font-size: .8125rem; font-weight: 400; color: var(--ink-subtle); }
.proc__fine { display: grid; grid-template-columns: .875rem minmax(0, 1fr); column-gap: .625rem; margin-top: 2rem; color: var(--ink-muted); }
.proc__fine::before { content: ""; width: .4375rem; height: .4375rem; margin-top: .4375rem; border-radius: 50%; border: 1px solid var(--ink-subtle); }
:is(html.rm, html:not(.js)) .proc__i { opacity: 1; }

/* ---------- 方案 · 上线评估与上线冲刺（深色） ---------- */
.review { overflow: clip; }
.review .sec__bg, .band--sample .sec__bg, .aiready .sec__bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.review__cards { display: grid; row-gap: 1rem; margin-top: 2rem; }
.rcard { position: relative; padding: 1.25rem 1.25rem 1.5rem; border: 1px solid var(--line-strong); border-radius: var(--r-3); background: rgba(36, 34, 31, .9); }
.rcard__head { display: grid; row-gap: .375rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.rcard__k { font-family: var(--f-serif); font-weight: 300; font-size: 1.875rem; line-height: 1.1; letter-spacing: -0.02em; }
.rcard__terms { font-size: .8125rem; color: var(--accent-text); }
.rcard__p { margin-top: 1rem; font-size: 1.0625rem; line-height: 1.5; }
.rcard__lh { margin-top: 1.5rem; font-size: .8125rem; color: var(--ink-subtle); }
.rcard__list { display: grid; grid-template-columns: 1fr 1fr; gap: .375rem; margin-top: .625rem; }
.rcard__list li { display: flex; align-items: center; gap: .375rem; min-height: 2.75rem; padding: .25rem .5rem; border: 1px solid var(--line); border-radius: var(--r-2); font-size: .875rem; line-height: 1.25; }
.rcard__list svg { flex: none; color: var(--ink-subtle); }
.rcard__list li.is-new { border-color: rgba(255, 86, 64, .55); }
.rcard__list li.is-new svg { color: var(--accent); }
.rcard__note { margin-top: .625rem; font-size: .9375rem; line-height: 1.5; color: var(--ink-muted); }
.rcard__get { margin-top: .5rem; }
.rcard__get li { position: relative; padding: .5rem 0 .5rem 1.375rem; border-bottom: 1px solid var(--line); font-size: 1rem; line-height: 1.45; color: var(--ink-muted); }
.rcard__get li::before { content: ""; position: absolute; left: 0; top: 1em; width: .5625rem; height: .5625rem; border-radius: 50%; border: 1px solid var(--ink-subtle); }

/* ---------- 方案 · 合作方式 ---------- */
.terms__list { display: grid; row-gap: 1.75rem; margin-top: 2rem; }
.term { position: relative; padding-top: 1.25rem; border-top: 1px solid var(--line-strong); }
.term__ring { position: absolute; top: -.59rem; left: 0; width: 1.1875rem; height: 1.1875rem; border-radius: 50%; border: 2px solid var(--ink); background: var(--surface); }
.term__ring i { position: absolute; inset: 0; margin: auto; width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--c-red); }
.term__n { font-size: .8125rem; color: var(--ink-subtle); }
.term__k { margin-top: .375rem; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.015em; }
.term__p { margin-top: .375rem; font-size: 1rem; line-height: 1.55; color: var(--ink-muted); }
.terms__faq { margin-top: 3rem; }
.terms__faqh { font-size: 1.25rem; font-weight: 500; }
.terms__faq .faq__list { margin-top: 1rem; }

/* ---------- AI · 变化与两行走动的任务字样 ---------- */
.shift { overflow: clip; }
.shift__p { display: grid; row-gap: 1rem; margin-top: 1.5rem; }
.shift__p .lead { font-size: 1.0625rem; }
.mq { margin-top: 2.5rem; display: grid; row-gap: .5rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq__row { overflow: hidden; }
.mq__track { display: flex; align-items: center; gap: 1rem; width: max-content; animation: mq 50s linear infinite; }
.mq__row--rev .mq__track { animation-direction: reverse; animation-duration: 60s; }
.mq__track span { font-family: var(--f-serif); font-weight: 300; font-size: 1.75rem; line-height: 1.25; letter-spacing: -0.02em; white-space: nowrap; }
.mq__row--rev .mq__track span { font-family: var(--f-sans); font-weight: 350; letter-spacing: -0.03em; color: var(--ink-muted); }
.mq__track i { width: .5rem; height: .5rem; border-radius: 50%; border: 1px solid var(--ink-subtle); flex: none; }
.mq__track span:nth-of-type(3n+2) + i { background: var(--c-red); border-color: var(--c-red); }
@keyframes mq { to { transform: translateX(-50%); } }
.mq.is-paused .mq__track { animation-play-state: paused; }
html.rm .mq__track { animation: none; }

/* ---------- AI · 四个问题 ---------- */
.qs__list { margin-top: 1.5rem; border-top: 1px solid var(--line-strong); }
.qs__i { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line); font-family: var(--f-serif); font-weight: 300; font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.015em; color: var(--ink-subtle); transition: color var(--d-3) var(--e-out); }
.qs__ring { position: relative; width: 1.1875rem; height: 1.1875rem; border-radius: 50%; border: 1px solid var(--line-strong); }
.qs__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); }
.qs__i.is-on { color: var(--ink); }
.qs__i.is-on .qs__ring { border: 2px solid var(--ink); }
.qs__i.is-on .qs__ring::after { transform: scale(1); }
.qs__foot { margin-top: 1.5rem; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-muted); }
:is(html.rm, html:not(.js)) .qs__i { color: var(--ink); }

/* ---------- AI · 四种做法：两行两列的选项，一条流程，四行说明 ---------- */
.ways__ui { margin-top: 1.75rem; }
.ways__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: .875rem; background: var(--surface-2); border: 1px solid var(--line); }
.ways__opt { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.875rem; padding: 0 .5rem; border-radius: .625rem; font-size: .9375rem; font-weight: 500; color: var(--ink-muted); }
.ways__opt i { position: relative; width: .875rem; height: .875rem; border-radius: 50%; border: 1px solid var(--line-strong); flex: none; }
.ways__opt i::after { content: ""; position: absolute; inset: 0; margin: auto; width: .375rem; height: .375rem; border-radius: 50%; background: var(--c-red); transform: scale(0); transition: transform var(--d-3) var(--e-spring); }
.ways__opt[aria-checked="true"] { background: var(--c-white); color: var(--ink); box-shadow: 0 1px 2px rgba(25, 24, 23, .1); }
.ways__opt[aria-checked="true"] i { border: 2px solid var(--ink); }
.ways__opt[aria-checked="true"] i::after { transform: scale(1); }
.ways__body { margin-top: 1rem; }
.ways__panel { position: relative; height: 10.5rem; border-radius: var(--r-3); overflow: hidden; display: grid; align-items: center; padding: 0 .75rem; }
.ways__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ways__panel .mm__flow { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ways__panel .mm__flow::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: .75rem; height: 1px; background: rgba(255, 255, 255, .34); }
.ways__panel .mm__flow li { position: relative; display: grid; justify-items: center; row-gap: .5rem; text-align: center; font-size: .8125rem; line-height: 1.25; color: rgba(255, 255, 255, .8); }
.ways__panel .mm__flow li i { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .6); background: var(--c-ink); }
.ways__panel .mm__flow li.is-slot i { width: 3rem; height: 3rem; margin-top: -.75rem; border: 2px solid #FF5640; }
.ways__panel .mm__flow li.is-slot { color: #fff; font-weight: 600; }
.ways__cards { margin-top: 1rem; }
.ways__card { border-top: 1px solid var(--line-strong); }
.ways__card[hidden] { display: none; }
.ways__card > div { display: grid; row-gap: .25rem; padding: .875rem 0; border-bottom: 1px solid var(--line); }
.ways__card dt { font-size: .8125rem; color: var(--ink-subtle); }
.ways__card dd { margin: 0; font-size: 1.0625rem; line-height: 1.45; }
.ways__card > div:last-child dd { font-size: 1rem; color: var(--ink-muted); }
.ways__card.is-on > div { animation: ways-in var(--d-4) var(--e-out) both; }
@keyframes ways-in { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
.ways__foot { margin-top: 1.5rem; font-size: 1.0625rem; color: var(--ink-muted); }

/* ---------- AI · AI 就绪（深色） ---------- */
.aiready { overflow: clip; }
.aiready__head .ready__fig { position: relative; width: 100%; max-width: 21rem; aspect-ratio: 1; margin: 1.5rem auto 0; }
.aiready__list { margin-top: 1.5rem; border-top: 1px solid var(--line-strong); }
.rrow { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); row-gap: .5rem; padding: 1rem 0 1.125rem; border-bottom: 1px solid var(--line); }
.rrow__n { font-size: .8125rem; color: var(--ink-subtle); padding-top: .25rem; }
.rrow__t h3 { font-size: 1.1875rem; line-height: 1.3; font-weight: 400; letter-spacing: -0.01em; color: var(--ink-muted); transition: color var(--d-2) var(--e-out); }
.rrow__t p { margin-top: .25rem; font-size: .9375rem; line-height: 1.5; color: var(--ink-subtle); }
.rrow__v { grid-column: 2; font-size: .9375rem; line-height: 1.5; color: var(--ink-muted); }
.rrow__v .mono { display: block; font-size: .8125rem; color: var(--ink-subtle); }
.rrow.is-on .rrow__t h3 { color: var(--ink); }
.rrow.is-on .rrow__n { color: var(--accent-text); }
:is(html.rm, html:not(.js)) .rrow__t h3 { color: var(--ink); }

/* ---------- AI · 自有产品里的四个做法 ---------- */
.practice__list { display: grid; row-gap: 2rem; margin-top: 2rem; }
.prac__fig { position: relative; height: 14rem; border-radius: var(--r-3); border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; padding: 1rem; }
.prac__k { margin-top: 1rem; font-size: 1.25rem; line-height: 1.25; font-weight: 500; letter-spacing: -0.015em; }
.prac__p { margin-top: .375rem; font-size: 1rem; line-height: 1.55; color: var(--ink-muted); }
.practice__note { display: grid; grid-template-columns: .875rem minmax(0, 1fr); column-gap: .625rem; margin-top: 2rem; color: var(--ink-muted); }
.practice__note::before { content: ""; width: .4375rem; height: .4375rem; margin-top: .4375rem; border-radius: 50%; border: 1px solid var(--ink-subtle); }
.mini { width: 100%; max-width: 18rem; background: var(--c-white); color: var(--c-ink); border: 1px solid rgba(25, 24, 23, .14); border-radius: .625rem; box-shadow: 0 1.25rem 2.5rem -1.5rem rgba(25, 24, 23, .45); font-size: .8125rem; line-height: 1.35; overflow: hidden; }
.mini .mono { font-size: .8125rem; }
.mini__bar { display: flex; align-items: center; justify-content: space-between; height: 2.25rem; padding: 0 .75rem; background: #FAF8F5; border-bottom: 1px solid #E9E5DE; }
.mini__chip { display: inline-flex; align-items: center; gap: .375rem; padding: 0 .5rem; line-height: 1.375rem; border-radius: 99rem; background: #EFECE6; font-weight: 500; }
.mini__chip i { width: .375rem; height: .375rem; border-radius: 50%; background: #2F8A57; }
.mini__tree { padding: .375rem; }
.mini__tree li { display: flex; align-items: center; gap: .5rem; height: 2rem; padding: 0 .5rem; border-radius: .375rem; color: #8A867F; }
.mini__tree li.is-cur { color: var(--c-ink); background: #FFF1EC; box-shadow: inset 0 0 0 1px rgba(230, 0, 0, .35); font-weight: 500; }
.mini__lock { margin-left: auto; opacity: .7; }
.mini__foot { padding: .5rem .75rem; border-top: 1px solid #F0EDE7; color: #56534E; }
.mini--confirm { padding: 1rem; }
.mini__k { display: flex; align-items: center; gap: .5rem; color: #8A5A00; }
.mini__k i { width: .5rem; height: .5rem; border-radius: 50%; background: #E8A317; }
.mini__t { margin-top: .5rem; font-size: 1rem; font-weight: 500; }
.mini__btns { display: flex; gap: .5rem; margin-top: .75rem; }
.mini__btn { display: inline-flex; align-items: center; height: 2rem; padding: 0 .875rem; border-radius: 99rem; border: 1px solid rgba(25, 24, 23, .2); font-weight: 500; }
.mini__btn--go { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.mini__timer { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; color: #56534E; }
.mini__arc { stroke-dasharray: 1; stroke-dashoffset: var(--arc, 0); color: var(--c-red); }
.mini__count { font-weight: 600; color: var(--c-ink); }
.mini--claim { padding: .5rem; background: transparent; border: 0; box-shadow: none; overflow: visible; }
.mini__msg { padding: .75rem .875rem; border-radius: .75rem .75rem .75rem .25rem; background: var(--c-white); border: 1px solid rgba(25, 24, 23, .14); box-shadow: 0 1rem 2rem -1.25rem rgba(25, 24, 23, .45); font-size: .9375rem; transition: opacity var(--d-3) var(--e-out); }
.mini__flag { display: flex; align-items: center; gap: .5rem; margin-top: .625rem; padding: .5rem .75rem; border-radius: .5rem; background: #FFF1EC; color: #A3271B; font-weight: 500; transition: opacity var(--d-3) var(--e-out), transform var(--d-3) var(--e-out); }
.mini__flag i { flex: none; width: .9375rem; height: .9375rem; border-radius: 50%; border: 2px solid currentColor; position: relative; }
.mini__flag i::after { content: ""; position: absolute; left: 50%; top: 50%; width: .625rem; height: 2px; margin: -1px 0 0 -.3125rem; background: currentColor; transform: rotate(-45deg); }
.mini--claim.is-stopped .mini__msg { opacity: .45; text-decoration: line-through; text-decoration-color: rgba(192, 54, 44, .7); }
.js .mini--claim .mini__flag { opacity: 0; transform: translateY(.375rem); }
.js .mini--claim.is-stopped .mini__flag { opacity: 1; transform: none; }
.mini--edit { position: relative; }
.mini--edit ol { padding: .375rem 0; }
.mini--edit li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: .25rem; padding: .4375rem .75rem; }
.mini--edit li .mono { color: #8A867F; }
.mini--edit li em { grid-column: 2; justify-self: start; margin-top: .25rem; font-style: normal; padding: 0 .4375rem; line-height: 1.25rem; border-radius: 99rem; background: #E6F2EB; color: #1F6B42; }
.mini--edit li.is-kept { background: #F7FBF8; }
.mini__sweep { position: absolute; left: 0; right: 0; top: 0; height: 2.25rem; display: flex; align-items: center; gap: .375rem; padding: 0 .75rem; color: #24406F; background: linear-gradient(180deg, rgba(221, 230, 243, 0), rgba(221, 230, 243, .95) 40%, rgba(221, 230, 243, .95) 60%, rgba(221, 230, 243, 0)); pointer-events: none; opacity: 0; }
.mini__sweep i { width: .375rem; height: .375rem; border-radius: 50%; background: currentColor; }

/* ---------- 通栏 ---------- */
.band__txt { display: grid; justify-items: start; row-gap: 1rem; margin-top: 1.25rem; }
.band__txt .lead { font-size: 1.0625rem; }
.band__txt .link { min-height: 2.75rem; }
.band--sample { overflow: clip; }

/* ---------- 案例 · 首屏的产品图标与子导航 ---------- */
.orbit { position: absolute; inset: 0; }
.orbit__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.orbit__i { position: absolute; left: 50%; top: 50%; width: 3.75rem; height: 3.75rem; margin: -1.875rem 0 0 -1.875rem; display: grid; place-items: center; border-radius: 1rem; background: var(--c-white); border: 1px solid var(--line); box-shadow: 0 .75rem 1.5rem -1rem rgba(25, 24, 23, .45);
  transform: rotate(calc(var(--i) * 72deg - 90deg + var(--rot, 0deg))) translate(var(--orb, 7rem)) rotate(calc(var(--i) * -72deg + 90deg - var(--rot, 0deg))); }
.orbit__i img { width: 2.5rem; height: 2.5rem; }
.wnav { position: sticky; top: var(--hdr-h); z-index: 40; background: var(--c-paper); border-bottom: 1px solid rgba(25, 24, 23, .13); }
.wnav__in { display: flex; align-items: center; gap: .25rem; height: 3.25rem; overflow-x: auto; scrollbar-width: none; padding-inline: var(--gutter); }
.wnav__in::-webkit-scrollbar { display: none; }
.wnav a { display: inline-flex; align-items: center; gap: .375rem; height: 2.75rem; padding: 0 .75rem 0 .375rem; border-radius: var(--r-pill); font-size: .875rem; font-weight: 500; color: #56534E; text-decoration: none; white-space: nowrap; flex: none; }
.wnav a.is-cur { color: var(--c-ink); background: var(--c-white); box-shadow: 0 0 0 1px rgba(25, 24, 23, .12); }
.wnav a img { width: 1.25rem; height: 1.25rem; }
.wnav__decade { padding-left: .75rem !important; }

/* ---------- 案例 · 产品 ---------- */
.prod { scroll-margin-top: calc(var(--hdr-h) + 3.25rem); }
.prod__in { display: grid; row-gap: 2rem; }
.prod__name img { height: 1.875rem; width: auto; }
.prod__cat { margin-top: 1rem; display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--ink-muted); }
.prod__cat::before { content: ""; width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--accent); flex: none; }
.prod__h { margin-top: .75rem; font-family: var(--f-serif); font-weight: 300; font-size: 1.875rem; line-height: 1.16; letter-spacing: -0.02em; }
.prod__p { margin-top: 1rem; }
.prod__shows { margin-top: 1.25rem; padding: .875rem 1rem; border-left: 2px solid var(--ink); background: var(--surface-2); }
.prod__shows .mono { font-size: .8125rem; color: var(--ink-subtle); }
.prod__shows p + p { margin-top: .25rem; font-size: 1rem; line-height: 1.5; }
.prod__ai { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .75rem; align-items: baseline; margin-top: 1rem; font-size: .9375rem; line-height: 1.5; color: var(--ink-muted); }
.prod__ai .mono { font-size: .8125rem; color: var(--ink-subtle); padding: 0 .5rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill); line-height: 1.25rem; }
.prod__facts { margin-top: 1.25rem; border-top: 1px solid var(--line); }
.prod__facts li { position: relative; padding: .625rem 0 .625rem 1.375rem; border-bottom: 1px solid var(--line); font-size: .9375rem; line-height: 1.45; }
.prod__facts li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: .5625rem; height: .5625rem; border-radius: 50%; border: 1px solid var(--ink-subtle); }
.prod__tm { margin-top: .875rem; }
.prod__tm a { color: inherit; }
.prod__stage { position: relative; aspect-ratio: 1 / 1.02; border-radius: var(--r-3); overflow: hidden; isolation: isolate; }
.prod__bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.pdev { position: absolute; margin: 0; will-change: transform; }
.pdev img { display: block; width: 100%; height: auto; }
.pdev--win, .pdev--tall { border-radius: .5rem; overflow: hidden; background: var(--c-white); border: 1px solid rgba(25, 24, 23, .16); box-shadow: 0 1.5rem 3rem -1.75rem rgba(25, 24, 23, .45); }
.pdev--bare { border: 0; border-radius: 0; background: none; overflow: visible; box-shadow: none; filter: drop-shadow(0 1rem 1.25rem rgba(25, 24, 23, .22)); }
.pdev--phone { padding: .25rem; border-radius: 1.25rem; background: var(--c-ink); box-shadow: 0 1.5rem 2.5rem -1.5rem rgba(25, 24, 23, .55); }
.pdev--phone .pdev__screen { aspect-ratio: 780 / 1688; border-radius: 1rem; overflow: hidden; background: var(--c-white); }
/* 窗口高度由截图决定（舞台宽高比 1:1.02），不拉到舞台底部 */
.prod__stage--win-phone .pdev--0 { left: 5%; top: 18%; width: 74%; }
.prod__stage--win-phone .pdev--1 { right: 5%; top: 30%; width: 30%; }
.prod__stage--win-phone-phone .pdev--0 { left: 4%; top: 14%; width: 70%; }
.prod__stage--win-phone-phone .pdev--1 { right: 31%; top: 36%; width: 25%; }
.prod__stage--win-phone-phone .pdev--2 { right: 3%; top: 26%; width: 25%; }
.prod__stage--tall-tall .pdev--0 { left: 7%; top: 6%; width: 44%; }
.prod__stage--tall-tall .pdev--1 { right: 6%; top: 12%; width: 44%; }
.prod__stage--phone-phone-phone .pdev--0 { left: 4%; top: 14%; width: 30%; }
.prod__stage--phone-phone-phone .pdev--1 { left: 35%; top: 6%; width: 30%; }
.prod__stage--phone-phone-phone .pdev--2 { right: 4%; top: 14%; width: 30%; }
.prod__stage--win-win .pdev--0 { left: 4%; top: 10%; width: 80%; }
.prod__stage--win-win .pdev--1 { right: 3%; top: 42%; width: 64%; }

/* ---------- 案例 · ZEUS OFFICE 对比 ---------- */
.cmp { border-top: 1px solid var(--line); }
.cmp__grid { display: grid; row-gap: 1.25rem; margin-top: 2rem; }
.cmp__txt .body { margin-top: .5rem; }
.slider { position: relative; margin: 0; border-radius: var(--r-3); overflow: hidden; border: 1px solid rgba(25, 24, 23, .16); background: var(--c-white); aspect-ratio: 6 / 5; touch-action: pan-y; user-select: none; }
.slider__img { position: absolute; inset: 0; }
.slider__img img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.slider__img--b { clip-path: inset(0 0 0 var(--x)); }
.slider__line { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: var(--c-ink); pointer-events: none; }
.slider__knob { position: absolute; top: 50%; left: 50%; width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem; border-radius: 50%; background: var(--c-ink); display: flex; align-items: center; justify-content: center; gap: .3125rem; }
.slider__knob i { width: 0; height: 0; border-top: .3125rem solid transparent; border-bottom: .3125rem solid transparent; }
.slider__knob i:first-child { border-right: .375rem solid #fff; }
.slider__knob i:last-child { border-left: .375rem solid #fff; }
.slider__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; }
.slider__caps { display: grid; row-gap: .25rem; padding: .625rem 0 0; position: static; }
.slider__caps span { font-size: .8125rem; color: var(--ink-muted); }
.cmp__terms { display: grid; row-gap: 1.25rem; margin-top: 3rem; }
.cmp__table { width: 100%; border-collapse: collapse; font-size: .8125rem; background: var(--c-white); border: 1px solid var(--line); }
.cmp__table th, .cmp__table td { text-align: left; padding: .5rem .5rem; border-bottom: 1px solid var(--line); font-weight: 400; vertical-align: top; }
.cmp__table thead th { font-family: var(--f-mono); font-size: .8125rem; color: var(--ink-subtle); background: var(--surface-2); }
.cmp__table td:last-child { font-weight: 600; }
.cmp__table td:nth-child(2) { color: var(--ink-subtle); }
.cmp__table .cmp__g th { padding-top: .875rem; font-weight: 500; color: var(--ink); }
.cmp__table .cmp__g .mono { display: block; margin: .125rem 0 0; font-size: .8125rem; color: var(--accent-text); }
.cmp__table [lang="zh-Hant-TW"] { font-family: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans SC", sans-serif; }
.cmp__tablewrap .micro { margin-top: .5rem; }
.cmp__how { margin-top: 2rem; }

/* ---------- 案例 · 十年里的四个案例：纵向列表 ---------- */
.decade { border-top: 1px solid var(--line); }
.cases { margin-top: 2rem; border-top: 1px solid var(--line-strong); }
.case { padding: 1.75rem 0 2rem; border-bottom: 1px solid var(--line); }
.case__y { display: flex; gap: .625rem; font-size: .8125rem; color: var(--ink-subtle); }
.case__y span { color: var(--accent-text); }
.case__h { margin-top: .75rem; font-family: var(--f-serif); font-weight: 300; font-size: 1.625rem; line-height: 1.18; letter-spacing: -0.02em; }
.case__sub { margin-top: .375rem; font-size: .9375rem; color: var(--ink-muted); }
.case__p { margin-top: .875rem; font-size: 1rem; line-height: 1.55; }
.case__pt { margin-top: .75rem; font-size: .9375rem; font-weight: 500; }
.case__pt::before { content: ""; display: inline-block; width: .4375rem; height: .4375rem; margin-right: .5rem; border-radius: 50%; background: var(--accent); vertical-align: .1em; }
.case__ip { margin-top: 1rem; }
.case__ip .mono { font-size: .8125rem; color: var(--ink-subtle); }
.case__ip ul { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: .5rem; }
.case__ip img { width: auto; filter: grayscale(1) contrast(1.1); opacity: .85; }
.case__media { margin-top: 1.25rem; }
.case__ph { margin: 0; }
.case__ph img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-2); }
.case__ph figcaption { margin-top: .5rem; }
.case__figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: .75rem; }
.case__figs > div { padding-top: .625rem; border-top: 1px solid var(--line-strong); }
.case__figs dt { font-size: 1.875rem; line-height: 1; letter-spacing: -0.03em; font-family: var(--f-sans); font-weight: 350; }
.case__figs dd { margin: .375rem 0 0; font-size: .8125rem; color: var(--ink-muted); }

/* ---------- 案例 · 署名 ---------- */
.credits { border-top: 1px solid var(--line); }
.credits__h { font-size: 1.25rem; font-weight: 500; }
.credits__in > div { margin-top: .75rem; }
.credits__list { margin-top: 1rem; display: grid; row-gap: .875rem; }
.credits__list li { font-size: .9375rem; line-height: 1.5; color: var(--ink-muted); }
.credits__list b { font-weight: 500; color: var(--ink); }
.credits__src { display: block; font-size: .8125rem; }
.credits__list a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; overflow-wrap: anywhere; }

/* ---------- 关于我们 ---------- */
.cmark { position: absolute; inset: 0; display: grid; place-items: center; }
.cmark__bg { position: absolute; inset: -10%; width: 120%; height: 120%; }
.cmark__img { position: relative; width: 44%; height: auto; }
.tl { border-top: 1px solid var(--line); }
.tl__rail { margin-top: 2rem; }
.tl__chapters { display: none; }
.tl__track { position: relative; }
.tl__line { position: absolute; left: .59rem; top: .59rem; bottom: 1.5rem; width: 1px; background: var(--line-strong); }
.tl__line i { display: block; width: 2px; height: 100%; margin-left: -.5px; background: var(--ink); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
.tl__nodes { display: grid; row-gap: 1.5rem; padding-left: 2rem; }
.tl__n { position: relative; }
.tl__dot { position: absolute; left: -2rem; top: .25rem; display: block; width: 1.1875rem; height: 1.1875rem; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); }
.tl__dot::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); }
.tl__n.is-done .tl__dot { background: var(--ink); border-color: var(--ink); }
.tl__n.is-cur .tl__dot { border: 2px solid var(--ink); }
.tl__n.is-cur .tl__dot::after { transform: scale(1); }
.tl__y { font-size: 2rem; line-height: 1; letter-spacing: -0.03em; font-family: var(--f-sans); font-weight: 300; color: var(--ink-subtle); transition: color var(--d-3) var(--e-out); }
.tl__n.is-done .tl__y, .tl__n.is-cur .tl__y { color: var(--ink); }
.tl__t { margin-top: .375rem; font-size: 1rem; line-height: 1.45; color: var(--ink-muted); }
.tl__turn { margin-top: 2rem; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-muted); }
:is(html.rm, html:not(.js)) .tl__y { color: var(--ink); }
:is(html.rm, html:not(.js)) .tl__dot { background: var(--ink); border-color: var(--ink); }
:is(html.rm, html:not(.js)) .tl__line i { transform: none; }
.values__body { margin-top: 1.75rem; }
.values__mark { padding: 1.75rem 1.25rem; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--c-white); }
.values__img { width: 100%; height: auto; }
.values__list { margin-top: 1.5rem; border-top: 1px solid var(--line-strong); }
.values__list > div { padding: 1rem 0 1.125rem; border-bottom: 1px solid var(--line); }
.values__list dt { font-size: 1.1875rem; font-weight: 500; letter-spacing: -0.015em; }
.values__list dd { margin: .25rem 0 0; font-size: 1rem; line-height: 1.55; color: var(--ink-muted); }
.team__list { display: grid; row-gap: .75rem; margin-top: 2rem; }
.role { padding: 1.25rem 1.25rem 1.5rem; border: 1px solid var(--line); border-radius: var(--r-3); }
.role__ring { position: relative; display: block; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--line-strong); }
.role__ring::before { content: ""; position: absolute; inset: .375rem; border-radius: 50%; border: 1px solid var(--line-strong); }
.role__ring i { position: absolute; inset: 0; margin: auto; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c-red); }
.role__k { margin-top: 1rem; font-size: 1.1875rem; line-height: 1.3; font-weight: 500; }
.role__p { margin-top: .375rem; font-size: 1rem; line-height: 1.55; color: var(--ink-muted); }
.clients--full .clients__logos--full { margin: 2rem 0 0; }
.clients__all { margin-top: 1.5rem; font-size: 1rem; line-height: 1.7; color: var(--ink-muted); }
.contactrows dl { margin-top: 1rem; border-top: 1px solid var(--line-strong); }
.contactrows dl > div { display: grid; row-gap: .25rem; padding: .875rem 0; border-bottom: 1px solid var(--line); }
.contactrows dt { font-size: .8125rem; color: var(--ink-subtle); }
.contactrows dd { margin: 0; font-size: 1.125rem; }
.contactrows dd a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-strong); }

/* 钉住类区块在手机版一律不钉住 */
[data-pin] { height: auto !important; }
[data-pin-stage] { position: static !important; height: auto !important; min-height: 0 !important; overflow: visible !important; }
.more__list { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
.more__list li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.more__list li > img { width: 3rem; height: 3rem; border-radius: .75rem; box-shadow: 0 0 0 1px rgba(25, 24, 23, .1); }
.more__txt { display: grid; justify-items: center; row-gap: .375rem; margin-top: .75rem; min-width: 0; }
.more__txt img { width: auto; height: 1.125rem; max-width: 100%; }
.more__txt .small { color: var(--ink-muted); }