/* ===== Home v2: spacious chapters ===== */
.vx { padding-block: clamp(80px, 10vw, 140px) clamp(40px, 5vw, 80px); }
.vx-pin { display: grid; gap: 28px; justify-items: center; text-align: center; padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
.vx-head { display: grid; gap: 12px; }
.vx-head h2 { font-size: var(--step-4); }
.vx-frame { position: relative; display: block; width: min(1100px, 100%); aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 28px; overflow: hidden; cursor: pointer; background: radial-gradient(ellipse 55% 75% at 50% 62%, rgba(217, 119, 87, 0.35), transparent 70%), radial-gradient(ellipse 80% 80% at 50% 120%, #2a2522, #141413 70%); }
.vx-frame .vid-box { position: absolute; left: 50%; top: 64%; width: min(42%, 520px); transform: translate(-50%, -50%); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.5)); }
.vx-frame .vid-play { top: 30%; }

.hz { background: var(--pampas); }
.hz-pin { padding-block: clamp(72px, 9vw, 120px); }
.hz-track { display: grid; gap: 28px; padding-inline: max(16px, env(safe-area-inset-left, 0px)); max-width: calc(var(--max) + 64px); margin-inline: auto; }
.hz-panel h2 { font-size: var(--step-4); line-height: 1.25; }
.hz-panel.intro { display: grid; gap: 18px; align-content: center; }
.hz-panel.end { display: grid; gap: 14px; align-content: center; }
.hz-panel.end p { font-family: var(--display); font-size: var(--step-2); color: var(--ink-2); }
.hz-panel.end h2 { color: var(--crail); font-size: clamp(2.5rem, 1.5rem + 5vw, 5.5rem); line-height: 1.1; }
.hz-card { display: grid; gap: 14px; align-content: start; padding: 22px; border-radius: 26px; background: var(--ivory); box-shadow: 0 30px 60px -40px rgba(20, 20, 19, 0.35); }
.hz-art { border-radius: 18px; background: var(--pampas); }
.hz-art svg { display: block; width: 100%; height: auto; font-family: var(--body); }
.hz-card h3 { font-size: var(--step-3); }
.hz-card p { color: var(--ink-2); font-size: var(--step-1); }
.hz-bar { display: none; }
@media (min-width: 761px) {
  html.sx .hz-pin { position: sticky; top: calc(64px + env(safe-area-inset-top, 0px)); height: calc(100vh - 64px - env(safe-area-inset-top, 0px)); padding: 0; overflow: hidden; display: grid; align-items: center; }
  html.sx .hz-track { display: flex; align-items: center; gap: clamp(28px, 4vw, 56px); width: max-content; max-width: none; margin: 0; padding-inline: max(32px, calc((100vw - var(--max)) / 2)); will-change: transform; }
  html.sx .hz-panel.intro { width: min(720px, 70vw); }
  html.sx .hz-panel.end { width: min(760px, 72vw); }
  html.sx .hz-card { width: min(440px, 36vw); }
  html.sx .hz-bar { display: block; position: absolute; left: max(32px, calc((100vw - var(--max)) / 2)); right: max(32px, calc((100vw - var(--max)) / 2)); bottom: 36px; height: 3px; border-radius: 3px; background: var(--line); }
  html.sx .hz-bar i { display: block; height: 100%; width: calc(var(--hp, 0) * 100%); border-radius: inherit; background: var(--clay); }
}
@media (max-width: 760px) { .hz-card { padding: 16px; } }

.ft { padding-block: clamp(96px, 12vw, 180px); }
.ft-head { display: grid; gap: 14px; margin-bottom: clamp(40px, 6vw, 90px); }
.ft-head h2 { font-size: var(--step-4); }
.ft-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 96px); }
.ft-item { min-height: 72vh; display: grid; gap: 16px; align-content: center; padding-block: 40px; opacity: .28; transition: opacity .5s; }
.ft-item.on { opacity: 1; }
.ft-item .k { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; color: var(--crail); }
.ft-item h3 { font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3rem); line-height: 1.2; }
.ft-item > p:not(.k) { font-size: var(--step-1); color: var(--ink-2); max-width: 24em; }
.go { font-weight: 500; color: var(--crail); text-decoration: none; justify-self: start; }
.go::after { content: " →"; transition: margin .2s; }
.go:hover::after { margin-left: 5px; }
.ft-vm { display: none; }
.ft-stage { position: sticky; top: calc(64px + 12vh + env(safe-area-inset-top, 0px)); height: 64vh; border-radius: 32px; background: radial-gradient(ellipse 60% 60% at 50% 55%, rgba(217, 119, 87, 0.16), transparent 70%), var(--pampas); overflow: hidden; }
.ft-vis { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.94) translateY(20px); transition: opacity .6s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.ft-vis.on { opacity: 1; transform: none; }
.ft-vis.v0 img { width: 76%; filter: drop-shadow(0 34px 40px rgba(20, 20, 19, 0.22)); }
.ft-vis.v1 img { position: absolute; width: 56%; border-radius: 16px; box-shadow: 0 24px 50px -24px rgba(20, 20, 19, 0.5); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.ft-vis.v1 .p1 { transform: translate(-30%, -22%) rotate(-7deg); }
.ft-vis.v1 .p2 { transform: translate(30%, -14%) rotate(6deg); }
.ft-vis.v1 .p3 { transform: translate(0, 18%); }
.ft-vis.v1:not(.on) img { transform: translate(0, 0) rotate(0); }
.ft-vis.v2 img { width: 100%; height: 100%; object-fit: cover; }
.ft-vis.dark, .ft-vm.dark { background: radial-gradient(circle at 50% 42%, rgba(217, 119, 87, 0.3), transparent 60%), var(--ink); }
.ft-vis.v3 { align-content: center; gap: 26px; }
.ft-vis.v3 svg { width: 26%; }
.ft-vis.v3 ul { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 80%; }
.ft-vis.v3 li { list-style: none; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--night-line); color: var(--ivory); font-size: 0.875rem; }
.ft-dots { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); margin: 0; padding: 0; display: grid; gap: 8px; }
.ft-dots li { list-style: none; width: 6px; height: 6px; border-radius: 50%; background: var(--cloudy); transition: height .3s, background .3s; }
.ft-dots li.on { height: 22px; border-radius: 3px; background: var(--clay); }
@media (max-width: 860px) {
  .ft-grid { grid-template-columns: 1fr; }
  .ft-stage { display: none; }
  .ft-item { min-height: 0; opacity: 1; padding-block: 28px; border-top: 1px solid var(--line); }
  .ft-vm { display: grid; place-items: center; border-radius: 22px; background: var(--pampas); aspect-ratio: 4 / 3; overflow: hidden; margin-top: 8px; }
  .ft-vm img { width: 100%; height: 100%; object-fit: cover; }
  .ft-vm.v0 img { width: 76%; height: auto; object-fit: contain; }
  .ft-vm svg { width: 30%; }
}

.sq { padding-block: clamp(96px, 12vw, 180px); text-align: center; }
.sq .wrap { display: grid; gap: 26px; justify-items: center; }
.sq-text { font-family: var(--display); font-weight: 600; font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem); line-height: 1.35; max-width: 18em; text-wrap: balance; }
.sq-text em { font-style: normal; }
html.sx .scrub em .ch.lit { color: var(--crail); }
.sq-link { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 500; color: var(--crail); }
.sq-link .avs { display: flex; }
.sq-link .avs span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--display); font-weight: 700; border: 2px solid var(--ivory); }
.sq-link .avs span + span { margin-left: -10px; }

.px { padding-block: clamp(96px, 12vw, 160px); }
.px-head { display: grid; gap: 14px; margin-bottom: clamp(40px, 5vw, 72px); }
.px-head h2 { font-size: var(--step-4); line-height: 1.25; }
.px-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.5vw, 32px); }
.px-card { display: grid; gap: 8px; justify-items: center; text-align: center; padding: clamp(28px, 4vw, 48px) 24px clamp(32px, 4vw, 48px); border-radius: 32px; background: var(--ivory); text-decoration: none; color: var(--ink); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.px-card:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -40px rgba(20, 20, 19, 0.45); }
.px-img { width: 100%; height: clamp(220px, 26vw, 340px); display: grid; place-items: center; margin-bottom: 12px; background: radial-gradient(ellipse 50% 45% at 50% 60%, rgba(217, 119, 87, 0.16), transparent 70%); }
.px-img { position: relative; }
.px-img img { position: absolute; inset: 4% 9%; width: 82%; height: 92%; object-fit: contain; filter: drop-shadow(0 30px 36px rgba(20, 20, 19, 0.22)); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.px-card:hover .px-img img { transform: scale(1.05); }
.px-card .who { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; color: var(--crail); }
.px-card h3 { font-size: var(--step-3); }
.px-d { color: var(--ink-2); font-size: var(--step-1); }
.px-card .go { justify-self: center; margin-top: 6px; }
@media (max-width: 760px) { .px-grid { grid-template-columns: 1fr; } }

.fin { padding-block: clamp(120px, 14vw, 220px); text-align: center; background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(217, 119, 87, 0.12), transparent 70%), var(--ivory); }
.fin .wrap { display: grid; gap: 36px; justify-items: center; }
.fin-h { font-size: clamp(2.25rem, 1.2rem + 4.5vw, 5rem); line-height: 1.2; }
.fin-h em { font-style: normal; }
.fin-acts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btn-lg { min-height: 54px; padding: 0 30px; font-size: 1rem; }
.fin .company { font-size: 0.875rem; color: var(--ink-2); }
@media (max-width: 760px) {
  html.sx .vx { height: auto; padding-block: 72px 32px; }
  html.sx .vx-pin { position: static; height: auto; }
  html.sx .vx-frame { width: 100%; border-radius: 22px; max-height: none; }
  html.sx .vx-head { opacity: 1; transform: none; }
}

/* ===== 万象是什么 on home ===== */
.wx { padding-block: clamp(96px, 12vw, 180px); }
.wx-head { display: grid; gap: 16px; justify-items: center; text-align: center; margin-bottom: clamp(40px, 6vw, 80px); }
.wx-head h2 { font-size: var(--step-4); line-height: 1.25; }
.wx-head .lead { max-width: 32em; }
.wx .diagram-graphic { margin-top: 0; }
.pillars { margin: clamp(48px, 6vw, 88px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.5vw, 32px); }
.pillars li { list-style: none; display: grid; gap: 6px; padding-top: 18px; border-top: 2px solid var(--ink); min-width: 0; }
.pillars b { font-family: var(--display); font-size: var(--step-2); font-weight: 600; }
.pillars span { color: var(--ink-2); font-size: 0.9375rem; }
.wx-more { display: table; margin: clamp(32px, 4vw, 48px) auto 0; font-size: var(--step-1); }
@media (max-width: 860px) { .pillars { grid-template-columns: 1fr 1fr; row-gap: 28px; } }
@media (max-width: 420px) { .pillars { grid-template-columns: 1fr; } }
.vx { background: var(--pampas); }

/* Batch-2 photos */
.sq-pics { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px); width: 100%; max-width: 1100px; margin-top: clamp(16px, 3vw, 32px); }
.sq-pic { position: relative; display: block; border-radius: 28px; overflow: hidden; aspect-ratio: 3 / 2; text-decoration: none; }
.sq-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.sq-pic:hover img { transform: scale(1.04); }
.sq-pic span { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(250, 249, 245, 0.92); color: var(--ink); font-size: 0.875rem; font-weight: 500; }
.sq-pic span i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--display); font-weight: 700; color: #fff; }
@media (max-width: 640px) { .sq-pics { grid-template-columns: 1fr; } .sq-pic { border-radius: 20px; } }
.ft-vis.v3.photo { background: var(--ink); }
.ft-vis.v3.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% center; }
.ft-vis.v3.photo ul { position: absolute; left: 0; right: 0; bottom: 22px; margin: 0 auto; }
.ft-vis.v3.photo li { background: rgba(20, 20, 19, 0.6); backdrop-filter: blur(6px); }
.ft-vm.v3.photo img { width: 100%; height: 100%; object-fit: cover; }

/* Product UI chapter */
.ui-sec { padding-block: clamp(96px, 12vw, 170px); background: linear-gradient(180deg, var(--ivory), var(--pampas)); overflow: hidden; }
.ui-head { display: grid; gap: 16px; justify-items: center; text-align: center; margin-bottom: clamp(40px, 5vw, 72px); }
.ui-head h2 { font-size: var(--step-4); line-height: 1.25; }
.ui-shot { margin: 0 auto; max-width: 1180px; display: grid; gap: 14px; justify-items: center; perspective: 1600px; }
.ui-shot img { width: 100%; height: auto; aspect-ratio: 1600 / 1000; border-radius: 22px; box-shadow: 0 60px 110px -60px rgba(20, 20, 19, 0.55), 0 0 0 1px var(--line); transform: rotateX(var(--ur, 0deg)) scale(var(--us, 1)); transform-origin: center top; will-change: transform; }
.ui-shot figcaption { font-size: 0.8125rem; color: var(--ink-2); }
@media (max-width: 600px) { .ui-shot img { border-radius: 12px; } }
.ui-shot .cp-shot:hover img { transform: rotateX(var(--ur, 0deg)) scale(var(--us, 1)); }

/* video cover: real client screen */
.vx-frame .vid-ui { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.vx-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,19,.25), rgba(20,20,19,.55)); pointer-events: none; transition: opacity .3s; }
.vx-frame:hover::after { opacity: .7; }
.vx-frame .vid-play, .vx-frame .vid-cap { z-index: 2; }
.vx-frame .vid-play { top: 50%; }