:root {
  --ink: #0a0a0f;
  --ink-soft: #191a27;
  --paper: #f7f7f5;
  --paper-strong: #ecece7;
  --line: #d8d9d6;
  --muted: #656772;
  --blue: #635bff;
  --blue-deep: #3931c8;
  --sky: #4c90ff;
  --mint: #c9f36a;
  --coral: #fa8d78;
  --radius: 8px;
  --shell: min(1320px, calc(100% - 64px));
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --display: "Arial", "HarmonyOS Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  --body: "HarmonyOS Sans SC", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; color: var(--ink); background: var(--paper); font-family: var(--body); line-height: 1.55; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }

.site-shell { width: var(--shell); margin: 0 auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 200; padding: 10px 14px; color: #fff; background: var(--blue); transform: translateY(-180%); transition: transform 180ms var(--ease-out); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }

/* Shared navigation */
.site-header { position: sticky; top: 0; z-index: 50; color: #f9f9fb; background: rgba(10, 10, 15, 0.94); border-bottom: 1px solid rgba(255, 255, 255, 0.12); transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease; }
.site-header.is-scrolled { background: rgba(10, 10, 15, 0.98); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 28px; }
.brand { display: inline-flex; align-items: center; min-width: max-content; gap: 11px; }
.brand-mark { display: grid; width: 34px; height: 34px; place-items: center; color: #11121b; background: var(--mint); border-radius: 50%; font: 800 10px/1 var(--display); letter-spacing: 0.08em; }
.brand-copy { display: grid; gap: 2px; line-height: 1.1; }
.brand-copy strong { color: #fff; font-size: 14px; font-weight: 750; }
.brand-copy small { color: #a5a6b5; font: 700 8px/1.1 var(--display); letter-spacing: 0.16em; }
.site-nav { display: flex; align-items: center; gap: 24px; color: #a9aab6; font-size: 13px; font-weight: 700; }
.site-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; transition: color 180ms ease; }
.site-nav a:not(.nav-workbench)::after { position: absolute; right: 0; bottom: 6px; left: 0; height: 2px; content: ""; background: var(--mint); transform: scaleX(0); transform-origin: right; transition: transform 220ms var(--ease-out); }
.site-nav a:hover, .site-nav a.is-active { color: #fff; }
.site-nav a:hover::after, .site-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.site-nav .nav-workbench { min-height: 38px; padding: 0 13px; color: #11121b; background: #fff; border-radius: 4px; transition: transform 180ms ease, background 180ms ease; }
.site-nav .nav-workbench:hover { color: #11121b; background: var(--mint); transform: translateY(-1px); }
.nav-toggle { display: none; position: relative; width: 44px; height: 44px; padding: 0; color: #fff; border: 0; background: transparent; }
.nav-toggle > span:not(.visually-hidden) { position: absolute; right: 8px; width: 25px; height: 2px; background: currentColor; transition: transform 180ms ease, top 180ms ease; }
.nav-toggle > span:nth-child(2) { top: 17px; }
.nav-toggle > span:nth-child(3) { top: 25px; width: 17px; }
.nav-toggle[aria-expanded="true"] > span:nth-child(2) { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] > span:nth-child(3) { top: 21px; width: 25px; transform: rotate(-45deg); }

.scene-rail { position: fixed; right: 24px; top: 50%; z-index: 30; display: grid; gap: 8px; transform: translateY(-50%); }
.scene-rail a { position: relative; display: flex; align-items: center; justify-content: flex-end; min-height: 22px; gap: 9px; color: #b7b7c0; font: 700 10px/1 var(--display); letter-spacing: 0.08em; }
.scene-rail i { position: absolute; right: 31px; opacity: 0; font-style: normal; white-space: nowrap; transform: translateX(5px); transition: opacity 180ms ease, transform 220ms var(--ease-out); }
.scene-rail span { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid currentColor; border-radius: 50%; transition: color 180ms ease, background 180ms ease; }
.scene-rail a.is-active { color: #0b0b11; }
.scene-rail a.is-active span { background: var(--mint); border-color: var(--mint); }
.scene-rail a.is-active i { opacity: 1; transform: translateX(0); }

/* Home scenes */
.scene { position: relative; min-height: 760px; overflow: clip; --scene-progress: 0.5; --scene-shift: 0px; --scene-art-shift: 0px; --flow-shift-up: 0px; --flow-shift-down: 0px; --scene-turn: 0deg; }
.scene-hero { display: grid; min-height: calc(100svh - 76px); isolation: isolate; color: #f9f9fb; background: var(--ink); }
.scene-hero::before { position: absolute; top: -30%; right: -21%; z-index: 0; width: min(54vw, 810px); height: min(54vw, 810px); content: ""; border: clamp(52px, 6.5vw, 108px) solid var(--blue); border-left-color: transparent; border-radius: 50%; transform: rotate(-28deg); opacity: 0.95; }
.scene-hero::after { position: absolute; right: 10%; bottom: 0; z-index: 0; width: 1px; height: 48%; content: ""; background: rgba(255, 255, 255, 0.18); }
.webgl-stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.webgl-stage canvas { display: block; width: 100%; height: 100%; opacity: 0.82; }
.hero-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(500px, 1.12fr); align-items: center; gap: clamp(42px, 7vw, 120px); padding: 78px 0 100px; }
.hero-copy { max-width: 610px; }
.hero-label, .scene-label, .demo-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; color: var(--mint); font: 800 11px/1.3 var(--display); letter-spacing: 0.12em; }
.hero-label span { width: 30px; height: 1px; background: currentColor; }
h1, h2, h3, p { margin-top: 0; }
.hero-copy h1 { margin: 0 0 25px; color: #fff; font: 750 clamp(48px, 6vw, 88px)/0.98 var(--display); letter-spacing: -0.045em; }
.hero-copy h1 em { color: var(--mint); font-style: normal; }
.hero-lead { max-width: 500px; margin-bottom: 32px; color: #c1c2cd; font-size: 17px; line-height: 1.85; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 49px; gap: 14px; padding: 0 17px; border: 1px solid transparent; border-radius: 5px; font-size: 14px; font-weight: 800; transition: transform 180ms ease, color 180ms ease, background 180ms ease, border-color 180ms ease; }
.button:hover { transform: translateY(-2px); }
.button span { font-size: 18px; line-height: 1; transition: transform 180ms ease; }
.button:hover span { transform: translateX(3px); }
.button-primary { color: #0b0b11; background: var(--mint); }
.button-primary:hover { background: #dcff8e; }
.button-quiet { color: #fff; border-color: #4e4f5b; }
.button-quiet:hover { border-color: #fff; }
.hero-demo-launches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 600px; gap: 11px; margin-top: 16px; }
.hero-demo-launch { display: flex; min-width: 0; min-height: 104px; align-items: center; justify-content: space-between; gap: 12px; padding: 15px; color: #101117; border-radius: 5px; text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease; }
.hero-demo-launch--admin { background: #f8f8f5; }
.hero-demo-launch--user { background: #c9d7ff; }
.hero-demo-launch:hover { color: #101117; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24); transform: translateY(-2px); }
.hero-demo-launch:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
.hero-demo-launch span { display: grid; min-width: 0; gap: 4px; }
.hero-demo-launch strong { font-size: 14px; line-height: 1.25; }
.hero-demo-launch small { color: #4a4b56; font-size: 11px; font-weight: 700; line-height: 1.45; }
.hero-demo-launch b { flex: 0 0 auto; font-size: 21px; font-weight: 400; line-height: 1; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 27px; margin: 52px 0 0; }
.hero-facts div { min-width: 148px; padding-left: 12px; border-left: 1px solid #4b4c58; }
.hero-facts dt { color: #a9aab6; font-size: 11px; font-weight: 700; }
.hero-facts dd { margin: 5px 0 0; color: #fff; font-size: 13px; font-weight: 700; }
.hero-art { position: relative; width: 100%; margin: 0; padding: 17px; color: #11121b; background: #fcfcfa; border-radius: var(--radius); box-shadow: 20px 26px 0 #2c2aa2; transform: rotate(-2.25deg); }
.hero-art::after { position: absolute; top: -19px; right: 18px; width: 106px; height: 106px; content: ""; border: 16px solid var(--coral); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(20deg); }
.hero-art-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 2px 13px; color: #333541; font: 800 9px/1 var(--display); letter-spacing: 0.12em; }
.hero-art-frame { position: relative; overflow: hidden; border: 1px solid #dadddf; border-radius: 4px; background: #e8ecf1; }
.flow-map { min-height: 320px; padding: 22px; background: #f4f5f7; }
.flow-map-head { display: flex; justify-content: space-between; color: #656875; font: 800 9px/1 var(--display); letter-spacing: 0.12em; }
.flow-track { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 54px 0 30px; }
.flow-track::before { position: absolute; top: 21px; right: 8%; left: 8%; height: 2px; content: ""; background: #b9bec8; }
.flow-step { position: relative; display: grid; justify-items: center; gap: 10px; color: #353842; text-align: center; }
.flow-step-index { display: grid; width: 43px; height: 43px; place-items: center; color: #5e6371; border: 1px solid #aeb4bf; border-radius: 50%; background: #f4f5f7; font: 800 10px/1 var(--display); }
.flow-step.is-current .flow-step-index { color: #17191f; border-color: var(--mint); background: var(--mint); box-shadow: 0 0 0 6px rgba(201, 243, 106, 0.26); }
.flow-step strong { display: block; color: #20222a; font-size: 12px; line-height: 1.35; }
.flow-step small { display: block; margin-top: 4px; color: #6c707c; font-size: 10px; line-height: 1.45; }
.flow-map-note { margin: 0; padding: 11px 12px; color: #343742; border-left: 1px solid var(--blue); background: #e7e9ef; font-size: 11px; font-weight: 700; }
.hero-art figcaption { display: flex; align-items: center; gap: 8px; padding: 13px 2px 1px; color: #52545f; font-size: 12px; }
.hero-art figcaption span { width: 7px; height: 7px; background: #4ab881; border-radius: 50%; }
.scroll-cue { position: absolute; left: max(32px, calc((100vw - 1320px) / 2)); bottom: 31px; z-index: 2; display: inline-flex; align-items: center; gap: 14px; color: #a8a9b4; font: 700 9px/1 var(--display); letter-spacing: 0.12em; }
.scroll-cue i { width: 52px; height: 1px; background: #a8a9b4; }

html.has-scroll-motion .scene-hero::before { transform: translate3d(0, var(--scene-shift), 0) rotate(calc(-28deg + var(--scene-turn))); }
html.has-scroll-motion .hero-art { transform: translate3d(0, var(--scene-art-shift), 0) rotate(calc(-2.25deg + var(--scene-turn))); }
html.has-scroll-motion .flow-step:nth-child(odd) { transform: translate3d(0, var(--flow-shift-up), 0); }
html.has-scroll-motion .flow-step:nth-child(even) { transform: translate3d(0, var(--flow-shift-down), 0); }

.scene-studio { display: grid; align-items: center; background: var(--paper); }
.scene-studio::after { position: absolute; top: 14%; right: -108px; width: 270px; height: 270px; content: ""; border: 42px solid rgba(99, 91, 255, 0.12); border-right-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(-38deg); }
.studio-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(280px, 0.88fr) minmax(460px, 1.12fr); align-items: center; gap: clamp(48px, 10vw, 160px); padding: 112px 0; }
.scene-label { color: var(--blue-deep); }
.scene-intro h2, .cases-heading h2, .sample-heading h2, .contact-main h2 { margin-bottom: 21px; color: var(--ink); font: 750 clamp(38px, 4.5vw, 68px)/1.04 var(--display); letter-spacing: -0.043em; }
.scene-intro > p:last-child, .cases-heading > p:last-child, .sample-heading > p:last-child { max-width: 590px; margin-bottom: 0; color: var(--muted); font-size: 16px; line-height: 1.85; }
.service-list { border-top: 1px solid var(--line); }
.service-line { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 20px; min-height: 152px; border-bottom: 1px solid var(--line); transition: background 220ms ease, transform 220ms var(--ease-out); }
.service-line:hover { background: #fff; transform: translateX(8px); }
.service-index { color: var(--blue); font: 800 13px/1 var(--display); }
.service-line h3 { margin: 0 0 7px; color: var(--ink); font-size: 22px; line-height: 1.3; letter-spacing: -0.02em; }
.service-line p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.service-arrow { color: var(--blue); font-size: 28px; transition: transform 180ms ease; }
.service-line:hover .service-arrow { transform: translateX(5px); }

.scene-cases { color: #fcfcfa; background: #191a27; }
.scene-cases::after { position: absolute; right: -110px; bottom: -140px; width: 410px; height: 410px; content: ""; border: 65px solid var(--sky); border-top-color: transparent; border-left-color: transparent; border-radius: 50%; transform: rotate(7deg); }
.cases-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(270px, 0.78fr) minmax(520px, 1.22fr); gap: clamp(48px, 9vw, 150px); align-items: center; min-height: 760px; padding: 104px 0; }
.cases-heading .scene-label { color: var(--mint); }
.cases-heading h2 { color: #fff; }
.cases-heading > p:last-child { color: #bcbec9; }
.case-list { border-top: 1px solid #3a3b47; }
.case-row { position: relative; display: grid; grid-template-columns: 132px minmax(150px, 0.8fr) minmax(210px, 1.2fr) 38px; gap: 20px; align-items: center; min-height: 119px; padding: 18px 0; border-bottom: 1px solid #3a3b47; transition: background 220ms ease, transform 220ms var(--ease-out); }
.case-row:hover { background: #252638; transform: translateX(8px); }
.case-row.case-featured { color: #15151c; background: var(--mint); padding: 19px 18px; border-bottom-color: var(--mint); }
.case-row.case-featured:hover { background: #ddff8b; }
.case-meta { display: grid; gap: 4px; }
.case-meta span { font-size: 12px; font-weight: 800; }
.case-meta small { color: #a6a8b4; font-size: 11px; }
.case-featured .case-meta small { color: #454641; }
.case-row h3 { margin: 0; font: 750 26px/1.2 var(--display); letter-spacing: -0.03em; }
.case-row p { margin: 0; color: #bfc1cd; font-size: 13px; line-height: 1.65; }
.case-featured p { color: #3c3d3a; }
.case-number { justify-self: end; color: #797b88; font: 800 16px/1 var(--display); }
.case-featured .case-number { color: #474841; }

/* Client feedback */
.scene-feedback { display: grid; align-items: center; min-height: 930px; isolation: isolate; color: #f7f8ff; background: #101321; }
.scene-feedback::before { position: absolute; top: -24%; right: -14%; z-index: -2; width: min(72vw, 1100px); height: 46%; content: ""; background: #3d37cb; clip-path: polygon(12% 0, 100% 20%, 87% 100%, 0 78%); opacity: 0.78; transform: rotate(-7deg); animation: feedback-plane 18s var(--ease-out) infinite alternate; }
.scene-feedback::after { position: absolute; right: 10%; bottom: 0; left: 10%; z-index: -1; height: 1px; content: ""; background: rgba(255, 255, 255, 0.17); }
.feedback-layout { position: relative; z-index: 1; width: var(--shell); padding: 116px 0 122px; }
.feedback-heading { display: grid; grid-template-columns: minmax(320px, 0.94fr) minmax(300px, 0.6fr); align-items: end; justify-content: space-between; gap: clamp(34px, 8vw, 148px); margin-bottom: 62px; }
.feedback-heading .scene-label { color: var(--mint); }
.feedback-heading h2 { max-width: 670px; margin: 0; color: #fff; font: 750 clamp(42px, 5vw, 72px)/1.02 var(--display); letter-spacing: -0.04em; }
.feedback-heading > p { max-width: 510px; margin: 0; color: #c5c7d6; font-size: 16px; line-height: 1.84; }
.feedback-gallery { position: relative; z-index: 1; display: block; }
.feedback-gallery .sample-carousel-layout { grid-template-columns: minmax(0, 1.45fr) minmax(230px, 0.45fr); align-items: center; gap: clamp(20px, 3vw, 46px); }
.feedback-gallery .sample-stage { min-height: clamp(560px, 48vw, 680px); aspect-ratio: auto; overflow: hidden; background: #16192b; box-shadow: 0 28px 66px rgba(0, 0, 0, 0.25); }
.feedback-gallery .sample-stage::before { position: absolute; inset: 23px; z-index: 0; content: ""; border: 1px solid rgba(255, 255, 255, 0.12); pointer-events: none; }
.feedback-gallery .sample-slide { width: min(70%, 620px); aspect-ratio: 1; padding: 12px; border-radius: 8px; background: #f6f7f5; box-shadow: 0 32px 76px rgba(0, 0, 0, 0.42); }
.feedback-gallery .sample-slide img { object-fit: contain; background: #fff; }
.feedback-gallery .sample-slide.is-active { box-shadow: 0 42px 88px rgba(0, 0, 0, 0.52); transform: translate3d(-50%, -50%, 70px) rotateZ(-1.25deg) scale(1); }
.feedback-gallery .sample-slide.is-left { transform: translate3d(-100%, -50%, -145px) rotateY(46deg) rotateZ(-4deg) scale(0.76); }
.feedback-gallery .sample-slide.is-right { transform: translate3d(0, -50%, -145px) rotateY(-46deg) rotateZ(4deg) scale(0.76); }
.feedback-gallery .sample-control { color: #11121a; border-color: var(--mint); background: var(--mint); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24); }
.feedback-gallery .sample-control:hover { color: #11121a; background: #e0ff95; }
.feedback-gallery .sample-caption { min-height: 390px; color: #f7f8ff; border-color: rgba(255, 255, 255, 0.26); }
.feedback-gallery .sample-count { color: var(--mint); }
.feedback-gallery .sample-kicker { color: #9fb6ff; }
.feedback-gallery .sample-caption h3 { color: #fff; font-size: clamp(26px, 2.65vw, 39px); }
.feedback-gallery .sample-caption div > p:last-child { max-width: 31ch; color: #c5c7d6; }
.feedback-gallery .sample-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); border-color: rgba(255, 255, 255, 0.25); }
.feedback-gallery .sample-selector button { color: #c9cad5; border-color: rgba(255, 255, 255, 0.18); }
.feedback-gallery .sample-selector button:hover, .feedback-gallery .sample-selector button.is-active { color: #11121a; background: var(--mint); }
.feedback-zoom-hint { margin: 0; color: #aeb0c2; font-size: 12px; font-weight: 700; }
.feedback-danmaku { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.feedback-danmaku-item { position: absolute; top: var(--lane); left: 0; padding: 8px 12px; color: var(--chip-fg); border: 1px solid rgba(255, 255, 255, 0.36); border-radius: 999px; background: var(--chip-bg); box-shadow: 0 9px 22px rgba(0, 0, 0, 0.16); font: 800 clamp(11px, 0.95vw, 14px)/1 var(--display); letter-spacing: 0; opacity: 0.72; white-space: nowrap; will-change: transform; animation: feedback-danmaku-item var(--duration) linear var(--delay) infinite; }
@keyframes feedback-plane { to { transform: translate3d(-9vw, 5%, 0) rotate(-2deg); } }
@keyframes feedback-danmaku-item { from { transform: translate3d(calc(-100% - 36px), 0, 0); } to { transform: translate3d(calc(100vw + 36px), 0, 0); } }

.scene-product { display: grid; align-items: center; min-height: 900px; background: #f2f1ee; }
.scene-product::before { position: absolute; top: -172px; left: -110px; width: 490px; height: 490px; content: ""; border: 74px solid var(--coral); border-right-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(-18deg); }
.sample-layout { position: relative; z-index: 1; width: var(--shell); padding: 108px 0 124px; }
.sample-heading { display: grid; grid-template-columns: minmax(300px, 0.9fr) minmax(340px, 0.65fr); align-items: end; justify-content: space-between; gap: clamp(34px, 8vw, 148px); margin-bottom: 55px; }
.sample-heading h2 { margin-bottom: 0; }
.text-action { display: inline-flex; align-items: center; gap: 14px; margin-top: 33px; padding-bottom: 5px; color: var(--blue-deep); border-bottom: 2px solid currentColor; font-size: 14px; font-weight: 850; transition: gap 180ms ease; }
.text-action:hover { gap: 19px; }
.text-action span { font-size: 18px; line-height: 1; }
.sample-gallery { display: grid; gap: 26px; }
.sample-gallery + .sample-gallery { margin-top: clamp(76px, 10vw, 138px); padding-top: clamp(58px, 7vw, 96px); border-top: 1px solid #bfc0c4; }
.sample-gallery-heading { display: grid; grid-template-columns: minmax(260px, 0.84fr) minmax(300px, 0.7fr); align-items: end; gap: clamp(28px, 6vw, 108px); }
.sample-gallery-label { margin: 0 0 10px; color: var(--blue-deep); font-size: 11px; font-weight: 850; letter-spacing: 0.08em; }
.sample-gallery-heading h3 { margin: 0; color: var(--ink); font: 750 clamp(32px, 4vw, 54px)/1.02 var(--display); letter-spacing: -0.04em; }
.sample-gallery-meta { display: grid; max-width: 500px; gap: 16px; }
.sample-gallery-meta > p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.sample-demo-launch { display: flex; min-height: 88px; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 15px; color: #101117; border-radius: 5px; text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease; }
.sample-demo-launch--admin { background: var(--mint); }
.sample-demo-launch--user { background: #c9d7ff; }
.sample-demo-launch:hover { color: #101117; box-shadow: 0 12px 26px rgba(21, 22, 33, 0.18); transform: translateY(-2px); }
.sample-demo-launch--admin:hover { background: #ddff8b; }
.sample-demo-launch:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 3px; }
.sample-demo-launch span { display: grid; min-width: 0; gap: 4px; }
.sample-demo-launch strong { font-size: 14px; line-height: 1.25; }
.sample-demo-launch small { color: #4a4b56; font-size: 11px; font-weight: 700; line-height: 1.45; }
.sample-demo-launch b { flex: 0 0 auto; font-size: 21px; font-weight: 400; line-height: 1; }
.sample-carousel-layout { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(270px, 0.58fr); align-items: stretch; gap: clamp(26px, 4vw, 58px); }
.sample-gallery--admin .sample-carousel-layout { grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.45fr); gap: clamp(20px, 3vw, 40px); }
.sample-gallery--user .sample-carousel-layout { grid-template-columns: minmax(0, 1.3fr) minmax(290px, 0.7fr); }
.sample-stage { position: relative; min-height: 500px; aspect-ratio: 2552 / 1292; perspective: 1500px; outline: none; }
.sample-track { position: absolute; inset: 0; transform-style: preserve-3d; }
.sample-slide { position: absolute; top: 50%; left: 50%; width: min(74%, 920px); aspect-ratio: 2552 / 1292; padding: 0; overflow: hidden; border: 0; border-radius: 7px; background: #171825; box-shadow: 0 28px 62px rgba(21, 22, 33, 0.2); cursor: pointer; transform-style: preserve-3d; transition: transform 650ms cubic-bezier(0.16, 1, 0.3, 1), opacity 500ms ease, filter 500ms ease, box-shadow 500ms ease; will-change: transform, opacity; }
.sample-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sample-slide.is-active { z-index: 4; opacity: 1; box-shadow: 0 35px 76px rgba(21, 22, 33, 0.3); transform: translate3d(-50%, -50%, 60px) rotateY(0) scale(1); }
.sample-slide.is-left { z-index: 3; opacity: 0.58; filter: saturate(0.72) brightness(0.78); transform: translate3d(-88%, -50%, -120px) rotateY(42deg) scale(0.8); }
.sample-slide.is-right { z-index: 3; opacity: 0.58; filter: saturate(0.72) brightness(0.78); transform: translate3d(-12%, -50%, -120px) rotateY(-42deg) scale(0.8); }
.sample-slide.is-back-left, .sample-slide.is-back-right { z-index: 1; opacity: 0; pointer-events: none; transform: translate3d(-50%, -50%, -280px) scale(0.56); }
.sample-control { position: absolute; top: 50%; z-index: 6; display: grid; width: 50px; height: 50px; place-items: center; padding: 0; color: #fff; border: 1px solid rgba(255, 255, 255, 0.52); border-radius: 50%; background: #171825; font-size: 24px; line-height: 1; transition: background 180ms ease, color 180ms ease, transform 180ms var(--ease-out); }
.sample-control:hover { color: #15151c; background: var(--mint); transform: translateY(-50%) scale(1.06); }
.sample-control-previous { left: 2%; transform: translateY(-50%); }
.sample-control-next { right: 2%; transform: translateY(-50%); }
.sample-caption { display: flex; min-width: 0; flex-direction: column; align-self: stretch; gap: 12px; padding: 5px 0 0 clamp(24px, 3vw, 42px); border-left: 1px solid #bfc0c4; }
.sample-count { margin: 0; color: var(--blue-deep); font: 800 17px/1 var(--display); letter-spacing: 0.04em; }
.sample-kicker { margin: 0 0 8px; color: var(--blue-deep); font-size: 12px; font-weight: 850; }
.sample-caption h3 { margin: 0 0 8px; color: var(--ink); font: 750 clamp(27px, 3vw, 42px)/1.06 var(--display); letter-spacing: -0.035em; }
.sample-caption div > p:last-child { max-width: 610px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.sample-selector { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: auto; overflow: hidden; border-top: 1px solid #d1d2d4; border-bottom: 1px solid #d1d2d4; }
.sample-selector button { min-height: 52px; padding: 0 10px; color: #73757e; border: 0; border-right: 1px solid #d1d2d4; background: transparent; font-size: 13px; font-weight: 800; transition: color 180ms ease, background 180ms ease; }
.sample-selector button:last-child { border-right: 0; }
.sample-selector button:hover, .sample-selector button.is-active { color: #15151c; background: var(--mint); }
.sample-gallery--admin .sample-selector { grid-template-columns: 1fr; }
.sample-gallery--admin .sample-selector button { min-height: 49px; padding: 0 14px; border-right: 0; border-bottom: 1px solid #d1d2d4; text-align: left; }
.sample-gallery--admin .sample-selector button:last-child { border-bottom: 0; }
.sample-gallery--admin .sample-slide { width: min(90%, 1180px); }
.sample-gallery--admin .sample-slide.is-active { filter: none; cursor: zoom-in; }
.sample-gallery--admin .sample-caption { padding-left: clamp(18px, 2vw, 28px); }
.sample-gallery--admin .sample-count { font-size: 15px; }
.sample-gallery--admin .sample-kicker { margin-bottom: 6px; font-size: 11px; }
.sample-gallery--admin .sample-caption h3 { margin-bottom: 7px; font-size: clamp(25px, 2.5vw, 36px); }
.sample-gallery--admin .sample-caption div > p:last-child { font-size: 14px; line-height: 1.62; }
.sample-gallery--admin .sample-selector button { min-height: 45px; font-size: 12px; }

.sample-gallery--user { gap: 30px; }
.sample-gallery--user .sample-stage { min-height: clamp(720px, 56vw, 820px); aspect-ratio: 1.7 / 1; perspective: 1800px; }
.sample-gallery--user .sample-slide { width: min(31%, 300px); aspect-ratio: 533 / 1260; border-radius: 18px; background: #10111a; box-shadow: 0 30px 70px rgba(21, 22, 33, 0.24); }
.sample-gallery--user .sample-slide img { object-fit: contain; }
.sample-gallery--user .sample-slide.is-active { box-shadow: 0 42px 86px rgba(21, 22, 33, 0.3); }
.sample-gallery--user .sample-slide.is-left { transform: translate3d(-162%, -50%, -150px) rotateY(38deg) scale(0.76); }
.sample-gallery--user .sample-slide.is-right { transform: translate3d(62%, -50%, -150px) rotateY(-38deg) scale(0.76); }
.sample-gallery--user .sample-selector { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sample-gallery--user .sample-selector button { min-height: 49px; border-bottom: 1px solid #d1d2d4; font-size: 12px; }
.sample-gallery--user .sample-selector button[data-demo-selector="2"], .sample-gallery--user .sample-selector button[data-demo-selector="5"], .sample-gallery--user .sample-selector button[data-demo-selector="8"] { border-right: 0; }
.sample-gallery--user .sample-selector button:nth-last-child(-n + 3) { border-bottom: 0; }

.image-lightbox { width: min(96vw, 1800px); max-width: none; max-height: 94svh; margin: auto; padding: 0; overflow: hidden; color: #fff; border: 0; border-radius: 8px; background: #101117; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45); }
.image-lightbox::backdrop { background: rgba(6, 7, 12, 0.88); }
.image-lightbox-toolbar { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 16px; padding: 0 14px 0 20px; }
.image-lightbox-toolbar p { margin: 0; font-size: 14px; font-weight: 800; }
.image-lightbox-toolbar form { margin: 0; }
.image-lightbox-close { display: grid; width: 44px; height: 44px; place-items: center; padding: 0; color: #fff; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 50%; background: transparent; font-size: 28px; line-height: 1; transition: background 180ms ease, color 180ms ease, transform 180ms var(--ease-out); }
.image-lightbox-close:hover { color: #15151c; background: var(--mint); transform: scale(1.06); }
.image-lightbox-close:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
.image-lightbox-viewer { max-height: calc(94svh - 56px); overflow: auto; background: #101117; }
.image-lightbox img { display: block; width: 100%; max-height: calc(94svh - 56px); object-fit: contain; background: #101117; }
.image-lightbox.is-qr { width: min(94vw, 680px); }
.image-lightbox.is-qr .image-lightbox-viewer { display: grid; place-items: center; padding: clamp(14px, 2vw, 24px); }
.image-lightbox.is-qr img { width: min(100%, 620px); max-height: calc(94svh - 104px); }

.scene-contact { display: flex; align-items: center; min-height: 690px; isolation: isolate; background: var(--coral); }
.scene-contact::before { position: absolute; top: -135px; right: -90px; z-index: 0; width: 430px; height: 430px; content: ""; border: 66px solid #12121a; border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(18deg); }
.contact-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(280px, 1fr) minmax(300px, 0.7fr); align-items: center; gap: clamp(40px, 10vw, 180px); padding: 95px 0 148px; }
.contact-main .scene-label { color: #34303b; }
.contact-main h2 { margin-bottom: 18px; font-size: clamp(46px, 5vw, 76px); }
.contact-main > p:last-child { margin: 0; color: #4a3540; font-size: 18px; line-height: 1.75; }
.contact-side { padding: 28px 0 28px 34px; border-left: 1px solid rgba(23, 20, 25, 0.36); }
.contact-side > p { margin: 0 0 9px; color: #43313a; font-size: 13px; font-weight: 800; }
.contact-phone { display: inline-block; color: #11121b; white-space: nowrap; font-family: var(--body); font-size: clamp(29px, 8vw, 48px); font-weight: 850; font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 1.12; }
.contact-wechat { display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: center; gap: 18px; margin-top: 21px; padding-top: 20px; border-top: 1px solid rgba(23, 20, 25, 0.28); }
.contact-qr-trigger { display: block; width: 128px; height: 128px; padding: 0; border: 0; border-radius: 5px; background: transparent; cursor: zoom-in; transition: transform 180ms ease; }
.contact-qr-trigger:hover { transform: translateY(-2px); }
.contact-qr-trigger:focus-visible { outline: 3px solid #11121b; outline-offset: 4px; }
.contact-qr-trigger img { display: block; width: 128px; height: 128px; padding: 6px; background: #fff; border-radius: 5px; box-shadow: 0 12px 24px rgba(44, 32, 38, 0.16); }
.contact-wechat div { display: grid; gap: 7px; }
.contact-wechat span { color: #43313a; font-size: 12px; font-weight: 800; }
.contact-wechat strong { color: #11121b; font-family: var(--body); font-size: clamp(18px, 2vw, 24px); font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 1.2; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 29px; }
.button-dark { color: #fff; background: #11121b; }
.button-dark:hover { background: #33343d; }
.text-action-dark { margin-top: 0; color: #11121b; }
.site-footer { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; padding: 23px 0; border-top: 1px solid rgba(23, 20, 25, 0.28); color: #4a3540; font: 700 10px/1.4 var(--display); letter-spacing: 0.08em; }
.site-footer .site-shell { display: flex; justify-content: space-between; gap: 16px; }
.site-footer a { color: inherit; text-decoration: none; transition: color 180ms ease; }
.site-footer a:hover { color: #11121b; }
.site-footer a:focus-visible { outline: 2px solid #11121b; outline-offset: 4px; }

html.has-scroll-motion .scene-studio::after { transform: translate3d(0, var(--scene-shift), 0) rotate(calc(-38deg + var(--scene-turn))); }
html.has-scroll-motion .scene-cases::after { transform: translate3d(0, var(--scene-shift), 0) rotate(calc(7deg + var(--scene-turn))); }
html.has-scroll-motion .scene-product::before { transform: translate3d(0, var(--scene-shift), 0) rotate(calc(-18deg + var(--scene-turn))); }
html.has-scroll-motion .scene-contact::before { transform: translate3d(0, var(--scene-shift), 0) rotate(calc(18deg + var(--scene-turn))); }

/* Interactive demo */
.demo-page { color: #f7f7fa; background: #0a0a0f; }
.demo-header { border-bottom: 1px solid #333440; background: #0a0a0f; }
.demo-header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 20px; }
.back-link { display: inline-flex; align-items: center; min-height: 44px; gap: 11px; color: #d5d5dc; font-size: 13px; font-weight: 750; transition: color 180ms ease; }
.back-link:hover { color: var(--mint); }
.back-link span { font-size: 18px; line-height: 1; }
.demo-intro { position: relative; overflow: clip; padding: 112px 0 92px; background: #0a0a0f; }
.demo-intro::before { position: absolute; top: -305px; right: -154px; width: 620px; height: 620px; content: ""; border: 92px solid var(--blue); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(-24deg); }
.demo-intro .site-shell { position: relative; z-index: 1; }
.demo-kicker { color: var(--mint); }
.demo-intro h1 { max-width: 750px; margin-bottom: 22px; color: #fff; font: 750 clamp(48px, 6vw, 86px)/0.98 var(--display); letter-spacing: -0.045em; }
.demo-intro p:last-child { max-width: 625px; margin: 0; color: #b7b8c4; font-size: 17px; line-height: 1.85; }
.demo-workspace { min-height: calc(100svh - 402px); padding: 36px 0 82px; background: #f2f1ee; }
.demo-tabs { display: grid; grid-template-columns: repeat(5, 1fr); margin-bottom: 16px; overflow: hidden; border: 1px solid #cbccc8; border-radius: var(--radius); background: #fff; }
.demo-step { display: flex; min-height: 77px; align-items: center; gap: 10px; padding: 12px 16px; color: #666875; border: 0; border-right: 1px solid #d8d9d6; background: #fff; text-align: left; transition: color 180ms ease, background 180ms ease; }
.demo-step:last-child { border-right: 0; }
.demo-step span { color: #9b9ca5; font: 800 10px/1 var(--display); }
.demo-step strong { font-size: 14px; }
.demo-step:hover, .demo-step.is-active { color: #11121b; background: var(--mint); }
.demo-step.is-active span { color: #33352f; }
.demo-stage { display: grid; grid-template-columns: minmax(300px, 0.84fr) minmax(330px, 1.16fr); grid-template-areas: "copy visual" "metrics visual"; gap: 0 46px; min-height: 500px; padding: clamp(26px, 5vw, 62px); color: #11121b; background: #fff; border-radius: var(--radius); box-shadow: 0 20px 54px rgba(20, 20, 24, 0.12); }
.demo-stage-copy { grid-area: copy; align-self: center; }
.demo-state-label { margin: 0 0 17px; color: var(--blue-deep); font: 850 11px/1.2 var(--display); letter-spacing: 0.13em; }
.demo-stage h2 { max-width: 470px; margin-bottom: 15px; font: 750 clamp(32px, 4vw, 57px)/1.07 var(--display); letter-spacing: -0.042em; }
.demo-stage-copy > p:not(.demo-state-label) { max-width: 440px; margin-bottom: 27px; color: #666875; font-size: 16px; line-height: 1.8; }
.demo-stage-visual { grid-area: visual; position: relative; display: grid; min-height: 337px; align-self: center; padding: 43px 31px 31px; color: #fff; background: #171825; border-radius: var(--radius); overflow: hidden; }
.demo-stage-visual::before { position: absolute; right: -109px; bottom: -109px; width: 330px; height: 330px; content: ""; border: 55px solid var(--coral); border-left-color: transparent; border-radius: 50%; transform: rotate(-36deg); }
.route-label { position: relative; z-index: 1; color: var(--mint); font: 800 10px/1 var(--display); letter-spacing: 0.13em; }
.demo-route { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; margin: 45px 0 19px; }
.demo-route::before { position: absolute; right: 8%; left: 8%; height: 2px; content: ""; background: #5c5e68; }
.route-node { position: relative; display: grid; justify-items: center; gap: 10px; color: #9294a0; }
.route-node i { display: grid; width: 42px; height: 42px; place-items: center; color: #9294a0; border: 1px solid currentColor; border-radius: 50%; background: #171825; font: 800 10px/1 var(--display); font-style: normal; }
.route-node b { font-size: 11px; }
.route-node.is-past { color: #c8f36e; }
.route-node.is-past i { background: #2a3634; }
.route-node.is-current { color: #11121b; }
.route-node.is-current i { background: var(--mint); border-color: var(--mint); box-shadow: 0 0 0 7px rgba(201, 243, 106, 0.16); }
.demo-metrics { grid-area: metrics; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; align-self: end; margin-top: 34px; }
.demo-metric { padding: 14px; border-top: 2px solid #20212b; background: #f6f6f3; }
.demo-metric span { display: block; color: #777985; font-size: 11px; font-weight: 750; }
.demo-metric strong { display: block; margin-top: 7px; color: #171825; font-size: 15px; line-height: 1.4; }
.demo-note { margin: 17px 0 0; color: #62646d; font-size: 12px; }

@media (max-width: 1100px) {
  :root { --shell: min(100% - 44px, 960px); }
  .scene-rail { display: none; }
  .hero-layout, .studio-layout, .cases-layout { grid-template-columns: 1fr; gap: 48px; }
  .hero-layout { padding-top: 84px; }
  .hero-art { max-width: 720px; justify-self: end; }
  .scene-hero, .scene-studio, .scene-cases, .scene-product { min-height: auto; }
  .studio-layout, .cases-layout { min-height: 0; padding: 102px 0; }
  .cases-layout { align-items: start; }
  .cases-heading { max-width: 650px; }
  .sample-heading { grid-template-columns: 1fr; gap: 24px; }
  .sample-gallery--user .sample-slide { width: min(42%, 300px); }
  .contact-layout { gap: 70px; }
}

@media (max-width: 900px) {
  .sample-carousel-layout, .sample-gallery--admin .sample-carousel-layout, .sample-gallery--user .sample-carousel-layout { grid-template-columns: 1fr; gap: 28px; }
  .sample-caption { padding: 23px 0 0; border-top: 1px solid #d1d2d4; border-left: 0; }
  .sample-gallery--admin .sample-selector { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sample-gallery--admin .sample-selector button { padding: 0 5px; border-right: 1px solid #d1d2d4; border-bottom: 0; text-align: center; }
  .sample-gallery--admin .sample-selector button:last-child { border-right: 0; }
}

@media (max-width: 760px) {
  :root { --shell: min(100% - 32px, 620px); }
  .header-inner, .demo-header-inner { min-height: 66px; }
  .brand-copy small { display: none; }
  .nav-toggle { display: block; }
  .site-nav { position: absolute; top: 66px; right: 0; left: 0; display: none; padding: 10px 16px 18px; color: #e8e8ee; background: #12121a; border-bottom: 1px solid #3b3b46; flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav.is-open { display: flex; }
  .site-nav a { justify-content: space-between; min-height: 48px; border-bottom: 1px solid #30313b; }
  .site-nav a:not(.nav-workbench)::after { display: none; }
  .site-nav .nav-workbench { justify-content: center; margin-top: 12px; border-bottom: 0; }
  .scene-hero { min-height: auto; }
  .webgl-stage { display: none; }
  .scene-hero::before { top: auto; right: -56%; bottom: -19%; width: 470px; height: 470px; border-width: 63px; }
  .hero-layout { gap: 58px; padding: 72px 0 100px; }
  .hero-copy h1 { font-size: clamp(48px, 14vw, 68px); }
  .hero-lead { font-size: 16px; }
  .hero-art { padding: 11px; box-shadow: 12px 14px 0 #2c2aa2; transform: none; }
  .hero-art::after { top: -16px; right: 8px; width: 72px; height: 72px; border-width: 11px; }
  .flow-map { min-height: 0; padding: 18px 15px; }
  .flow-track { grid-template-columns: 1fr; gap: 10px; margin: 22px 0; }
  .flow-track::before { top: 20px; bottom: 20px; left: 20px; width: 2px; height: auto; }
  .flow-step { grid-template-columns: 42px minmax(0, 1fr); justify-items: start; gap: 12px; text-align: left; }
  .flow-step-index { width: 42px; height: 42px; }
  .flow-step small { margin-top: 2px; }
  .scroll-cue { left: 16px; bottom: 28px; }
  .studio-layout, .cases-layout { gap: 42px; padding: 79px 0; }
  .sample-layout { padding: 79px 0 94px; }
  .sample-heading { gap: 22px; margin-bottom: 34px; }
  .scene-intro h2, .cases-heading h2, .sample-heading h2 { font-size: clamp(39px, 11vw, 54px); }
  .hero-demo-launches { grid-template-columns: 1fr; max-width: none; }
  .service-line { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; min-height: 133px; }
  .service-line:hover { transform: translateX(4px); }
  .service-line h3 { font-size: 18px; }
  .service-arrow { font-size: 22px; }
  .scene-cases::after { right: -140px; bottom: -158px; width: 300px; height: 300px; border-width: 45px; }
  .case-row { grid-template-columns: 1fr auto; gap: 7px 15px; min-height: 0; padding: 21px 0; }
  .case-row.case-featured { padding: 21px 14px; }
  .case-meta { grid-column: 1 / 2; }
  .case-row h3 { grid-column: 1 / 2; grid-row: 2; font-size: 25px; }
  .case-row p { grid-column: 1 / 2; grid-row: 3; }
  .case-number { grid-column: 2; grid-row: 1 / 4; }
  .scene-product::before { top: -111px; left: -120px; width: 310px; height: 310px; border-width: 48px; }
  .scene-product { min-height: 0; }
  .sample-stage { min-height: 230px; aspect-ratio: auto; }
  .sample-slide { width: 96%; }
  .sample-gallery--admin .sample-slide { width: 96%; }
  .sample-slide.is-left, .sample-slide.is-right, .sample-slide.is-back-left, .sample-slide.is-back-right { opacity: 0; pointer-events: none; transform: translate3d(-50%, -50%, -160px) scale(0.75); }
  .sample-control { width: 44px; height: 44px; font-size: 21px; }
  .sample-control-previous { left: 8px; }
  .sample-control-next { right: 8px; }
  .sample-carousel-layout { grid-template-columns: 1fr; gap: 26px; }
  .sample-gallery--user .sample-carousel-layout { grid-template-columns: 1fr; }
  .sample-caption { gap: 12px; padding: 23px 0 0; border-top: 1px solid #d1d2d4; border-left: 0; }
  .sample-count { font-size: 14px; }
  .sample-caption h3 { font-size: 32px; }
  .sample-selector { margin-top: 10px; }
  .sample-selector button { min-height: 48px; padding: 0 3px; font-size: 10px; }
  .sample-gallery--admin .sample-selector { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sample-gallery--admin .sample-selector button { min-height: 48px; padding: 0 3px; border-right: 1px solid #d1d2d4; border-bottom: 0; font-size: 10px; text-align: center; }
  .sample-gallery--admin .sample-selector button:last-child { border-right: 0; }
  .sample-gallery + .sample-gallery { margin-top: 74px; padding-top: 55px; }
  .sample-gallery-heading { grid-template-columns: 1fr; gap: 14px; }
  .sample-gallery-heading h3 { font-size: 36px; }
  .sample-gallery-meta > p { font-size: 14px; }
  .sample-gallery--user { gap: 24px; }
  .sample-gallery--user .sample-stage { min-height: clamp(600px, 164vw, 710px); aspect-ratio: auto; }
  .sample-gallery--user .sample-slide { width: min(70%, 290px); border-radius: 16px; }
  .sample-gallery--user .sample-selector { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sample-gallery--user .sample-selector button { min-height: 45px; padding: 0 4px; font-size: 11px; }
  .image-lightbox { width: calc(100vw - 16px); }
  .image-lightbox-toolbar { min-height: 52px; padding: 0 10px 0 16px; }
  .image-lightbox-viewer { max-height: calc(94svh - 52px); }
  .image-lightbox img { width: 920px; max-width: none; max-height: none; }
  .image-lightbox.is-qr img { width: min(100%, 520px); max-width: 100%; max-height: calc(94svh - 100px); }
  .scene-contact { min-height: 690px; }
  .scene-contact::before { top: auto; right: -246px; bottom: -134px; width: 340px; height: 340px; border-width: 52px; }
  .contact-layout { grid-template-columns: 1fr; gap: 43px; padding: 82px 0 135px; }
  .contact-side { padding: 27px 0 0; border-top: 1px solid rgba(23, 20, 25, 0.36); border-left: 0; }
  .contact-wechat { grid-template-columns: 112px minmax(0, 1fr); }
  .contact-qr-trigger, .contact-qr-trigger img { width: 112px; height: 112px; }
  .contact-main h2 { font-size: clamp(46px, 13vw, 64px); }
  .site-footer .site-shell { flex-direction: column; gap: 8px; }
  .demo-intro { padding: 81px 0 67px; }
  .demo-intro::before { top: auto; right: -187px; bottom: -202px; width: 430px; height: 430px; border-width: 65px; }
  .demo-intro h1 { font-size: clamp(47px, 13vw, 66px); }
  .demo-intro p:last-child { font-size: 16px; }
  .demo-workspace { padding: 22px 0 58px; }
  .demo-tabs { grid-template-columns: repeat(5, minmax(64px, 1fr)); overflow-x: auto; }
  .demo-step { min-height: 65px; min-width: 66px; justify-content: center; padding: 10px 7px; gap: 4px; flex-direction: column; text-align: center; }
  .demo-step strong { font-size: 12px; }
  .demo-stage { grid-template-columns: 1fr; grid-template-areas: "copy" "visual" "metrics"; gap: 30px; min-height: 0; padding: 26px 20px; }
  .demo-stage h2 { font-size: clamp(33px, 10vw, 48px); }
  .demo-stage-visual { min-height: 286px; padding: 35px 16px 21px; }
  .demo-route { margin-top: 51px; }
  .route-node i { width: 36px; height: 36px; }
  .route-node b { font-size: 10px; }
  .demo-metrics { margin-top: 0; }
}

@media (max-width: 430px) {
  .hero-actions, .contact-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-facts { gap: 14px; margin-top: 38px; }
  .hero-facts div { min-width: 135px; }
  .demo-metrics { grid-template-columns: 1fr; }
  .demo-metric { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: 12px; }
  .demo-metric strong { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

@media (max-width: 1100px) {
  .scene-feedback { min-height: auto; }
  .feedback-layout { padding: 104px 0; }
  .feedback-heading { grid-template-columns: 1fr; gap: 24px; margin-bottom: 46px; }
  .feedback-heading > p { max-width: 620px; }
}

@media (max-width: 900px) {
  .feedback-gallery .sample-carousel-layout { grid-template-columns: 1fr; gap: 28px; }
  .feedback-gallery .sample-caption { min-height: 0; padding-top: 25px; border-top-color: rgba(255, 255, 255, 0.26); border-left: 0; }
}

@media (max-width: 760px) {
  .feedback-layout { padding: 79px 0 86px; }
  .feedback-heading { gap: 20px; margin-bottom: 36px; }
  .feedback-heading h2 { font-size: clamp(39px, 11vw, 54px); }
  .feedback-heading > p { font-size: 14px; line-height: 1.78; }
  .feedback-gallery .sample-stage { min-height: min(122vw, 500px); }
  .feedback-gallery .sample-stage::before { inset: 14px; }
  .feedback-gallery .sample-slide { width: min(86%, 410px); padding: 8px; }
  .feedback-gallery .sample-slide.is-active { transform: translate3d(-50%, -50%, 55px) rotateZ(-0.7deg) scale(1); }
  .feedback-gallery .sample-caption { gap: 14px; padding-top: 24px; }
  .feedback-gallery .sample-caption h3 { font-size: 31px; }
  .feedback-gallery .sample-caption div > p:last-child { max-width: 34ch; font-size: 14px; }
  .feedback-gallery .sample-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feedback-gallery .sample-selector button { min-height: 46px; padding: 0 8px; font-size: 11px; }
  .feedback-danmaku { top: 266px; bottom: auto; height: 106px; }
  .feedback-danmaku-item { padding: 7px 10px; font-size: 10px; opacity: 0.66; }
  .feedback-danmaku-item:nth-child(1) { top: 0; animation: feedback-danmaku-item 8s linear var(--delay) infinite; }
  .feedback-danmaku-item:nth-child(2) { top: 22px; animation: feedback-danmaku-item 9s linear var(--delay) infinite; }
  .feedback-danmaku-item:nth-child(3) { top: 46px; animation: feedback-danmaku-item 7s linear var(--delay) infinite; }
  .feedback-danmaku-item:nth-child(4) { top: 72px; animation: feedback-danmaku-item 10s linear var(--delay) infinite; }
  .feedback-danmaku-item:nth-child(5) { top: 30px; animation: feedback-danmaku-item 8s linear var(--delay) infinite; }
  .feedback-danmaku-item:nth-child(n + 6) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-feedback::before { animation: none !important; }
  .feedback-danmaku { display: none; }
}