/* Company lockup retains the original XH artwork. */
.header .brand{gap:12px;font-weight:700;letter-spacing:.035em;color:#17253c;flex-shrink:0}
.header .brand img{width:44px;height:44px;border-radius:11px;box-shadow:0 0 0 1px #17253c10,0 4px 14px #0000000a}
.header .brand>span{display:block;white-space:nowrap;font-size:19px;line-height:1.18}
.header .brand small{font-size:8px;letter-spacing:.28em;line-height:1.4;margin-top:6px;font-weight:600;color:#768599}
.home-page .header .brand{color:#f5f7fb}
.home-page .header .brand img{width:44px;height:44px;border-radius:11px;box-shadow:0 0 0 1px #ffffff18,0 4px 18px #0003}
.home-page .header .brand small{color:#93a3b9}
.home-page .questions-grid>h2.faq-phrase-title span{display:block;white-space:nowrap}
.home-page .questions-grid>h2.faq-phrase-title{font-size:clamp(29px,3.55vw,48px);line-height:1.38}
/* Motion is local to each explanatory illustration and pauses offscreen. */
.home-page [data-motion-demo] .glass-window,
.home-page [data-motion-demo] .reference-photo,
.home-page [data-motion-demo] .wireless-line span,
.home-page [data-motion-demo] .touch-window,
.home-page [data-motion-demo] .touch-point,
.home-page [data-motion-demo] .gesture-arrows,
.home-page [data-motion-demo] .demo-pointer{animation-play-state:paused!important}
.home-page [data-motion-demo].motion-active .glass-window,
.home-page [data-motion-demo].motion-active .reference-photo,
.home-page [data-motion-demo].motion-active .wireless-line span,
.home-page [data-motion-demo].motion-active .touch-window,
.home-page [data-motion-demo].motion-active .touch-point,
.home-page [data-motion-demo].motion-active .gesture-arrows,
.home-page [data-motion-demo].motion-active .demo-pointer{animation-play-state:running!important}
.home-page .display-story[data-layout=extend] .demo-computer .glass-window{animation:xh-workspace 7.5s ease-in-out infinite}
.home-page .display-story[data-layout=extend] .reference-photo{animation:xh-reference 7.5s ease-in-out infinite;transform-origin:center}
.home-page .display-story[data-layout=mirror] .glass-window{animation:xh-mirror 7.5s ease-in-out infinite}
.home-page .wireless-line span{animation:xh-signal 3s ease-in-out infinite}
.home-page .wireless-line span:nth-child(2){animation-delay:.3s}.home-page .wireless-line span:nth-child(3){animation-delay:.6s}
.home-page .touch-window{animation:xh-touch-content 9s ease-in-out infinite;transform-origin:center}
.home-page .touch-point.point-one{animation:xh-touch-one 9s ease-in-out infinite}
.home-page .touch-point.point-two{animation:xh-touch-two 9s ease-in-out infinite}
.home-page .gesture-arrows{animation:xh-gesture 9s ease-in-out infinite}
.home-page .demo-pointer{animation:xh-pointer 9s ease-in-out infinite}
@keyframes xh-workspace{0%,12%,85%,100%{transform:translateX(0)}35%,65%{transform:translateX(-7%)}}
@keyframes xh-reference{0%,15%,85%,100%{transform:translateY(5px);opacity:.72}35%,65%{transform:translateY(0);opacity:1}}
@keyframes xh-mirror{0%,15%,85%,100%{transform:translateY(0)}35%,65%{transform:translateY(-6px)}}
@keyframes xh-signal{0%,100%{opacity:.25}50%{opacity:.9}}
@keyframes xh-touch-content{0%,8%,90%,100%{transform:translateY(0) scale(1)}25%,35%{transform:translateY(-12px) scale(1)}55%,70%{transform:translateY(0) scale(1.09)}80%{transform:translateY(0) scale(1)}}
@keyframes xh-touch-one{0%,8%,90%,100%{transform:translate(0,0);opacity:.35}25%,35%{transform:translate(0,-18px);opacity:1}55%,70%{transform:translate(-13px,12px);opacity:1}80%{transform:translate(0,0);opacity:.35}}
@keyframes xh-touch-two{0%,38%,80%,100%{transform:translate(0,0);opacity:.18}45%{opacity:1}55%,70%{transform:translate(13px,-12px);opacity:1}}
@keyframes xh-gesture{0%,38%,80%,100%{opacity:.12}50%,65%{opacity:.8}}
@keyframes xh-pointer{0%,70%,100%{transform:translate(0,0);opacity:.2}80%{transform:translate(-20px,-12px);opacity:1}88%{transform:translate(-20px,-12px) scale(.9);opacity:1}}
@media(max-width:760px){.header .brand>span{font-size:18px}.header .brand img,.home-page .header .brand img{width:38px;height:38px}.header .brand small,.home-page .header .brand small{font-size:7px;letter-spacing:.24em}.home-page .questions-grid>h2.faq-phrase-title{font-size:clamp(29px,8vw,36px)}}
@media(prefers-reduced-motion:reduce){.home-page [data-motion-demo] *{animation:none!important;transition:none!important}.home-page .touch-point,.home-page .gesture-arrows,.home-page .demo-pointer{opacity:.65}}

html[lang="zh-CN"] .home-page .launch-hero h1,html[lang="zh"] .home-page .launch-hero h1{letter-spacing:.035em;line-height:1.24;font-size:clamp(44px,5.8vw,90px)}
html[lang^="zh"] .home-page .launch-hero h1>span{white-space:nowrap}
@media(max-width:760px){html[lang^="zh"] .home-page .launch-hero h1{font-size:clamp(28px,7.7vw,54px);letter-spacing:.025em;line-height:1.3}}

/* A framed hero stage gives the actions and each next section a clear edge. */
.home-page .workspace-hero{width:calc(100% - 80px);max-width:1380px;height:clamp(360px,38vw,610px);margin:64px auto 36px;padding:16px;border:1px solid #ffffff16;border-radius:28px;background:linear-gradient(145deg,#182335,#101723);box-shadow:0 24px 70px #0003;overflow:hidden}
.home-page .workspace-hero img{object-fit:cover;object-position:center 60%;mix-blend-mode:normal;border-radius:16px;mask-image:none;-webkit-mask-image:none}
.home-page .workspace-hero figcaption{bottom:25px;color:#c5cedc;text-shadow:0 2px 8px #000;background:#101723a8;border-radius:20px;padding:5px 12px;left:50%;right:auto;transform:translateX(-50%);white-space:nowrap}
.home-page .launch-hero{padding-bottom:20px;border-bottom:1px solid #ffffff13}
.home-page .canvas-section,.home-page .interaction-section,.home-page .start-section,.home-page .questions-section{border-top:1px solid #17253c0d}
html[lang^="zh"] .home-page :is(.section-intro h2,.story-copy h3,.interaction-copy h2,.closing-banner h2,.questions-grid>h2){letter-spacing:.035em;line-height:1.4}
.home-page .heading-phrase{display:block;white-space:nowrap}
.home-page .xh-transfer-window{position:absolute;z-index:8;left:17%;top:21%;width:29%;height:31%;padding:10px;border-radius:9px;border:2px solid #85b7ff;background:#f5f8ff;box-shadow:0 10px 30px #185bd74d;animation:xh-transfer 7s cubic-bezier(.42,0,.2,1) infinite;pointer-events:none}
.home-page .xh-transfer-window:before{content:'';display:block;width:48%;height:5px;background:#3674df;border-radius:4px;margin-bottom:10px}
.home-page .xh-transfer-window i{display:block;height:calc(100% - 16px);border-radius:5px;background:linear-gradient(135deg,#89b2ed,#dce9ff 40%,#bca9d4 41%,#e7cfc4)}
.home-page .motion-stage-hint{position:absolute;bottom:-37px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:7px 15px;border-radius:30px;background:#fff;border:1px solid #d5e1f1;color:#365483;font-size:12px;font-weight:650;box-shadow:0 4px 18px #273a5510}
.home-page .touch-visual .motion-stage-hint{background:#15243a;border-color:#45617e;color:#e5f1ff;bottom:-30px}
.home-page .display-story{padding-bottom:38px}
.home-page .display-story[data-layout=mirror] .xh-transfer-window{display:none}
.home-page [data-motion-demo] .xh-transfer-window{animation-play-state:paused}
.home-page [data-motion-demo].motion-active .xh-transfer-window{animation-play-state:running}
.home-page .touch-window{animation-name:xh-touch-content-b;animation-duration:9s}
.home-page .touch-point.point-one{animation-name:xh-touch-one-b}
.home-page .touch-point.point-two{animation-name:xh-touch-two-b}
.home-page .touch-point{border-color:#b9ddffbb;background:#8dc5ff35;box-shadow:0 0 0 9px #8dc5ff14,0 0 30px #8dc5ff55}
.home-page .touch-point i{background:#e7f6ffb0}
@keyframes xh-transfer{0%,12%{left:17%;top:21%;transform:scale(1);opacity:1}48%,76%{left:65%;top:58%;transform:scale(.72);opacity:1}86%{left:65%;top:58%;transform:scale(.72);opacity:0}87%,100%{left:17%;top:21%;transform:scale(1);opacity:0}}
@keyframes xh-touch-content-b{0%,7%,92%,100%{transform:translateY(0) scale(1)}27%,37%{transform:translateY(-38px) scale(1)}58%,74%{transform:translateY(0) scale(1.23)}84%{transform:translateY(0) scale(1)}}
@keyframes xh-touch-one-b{0%,7%,92%,100%{transform:translate(0,0);opacity:.35}27%,37%{transform:translate(0,-47px);opacity:1}58%,74%{transform:translate(-31px,25px);opacity:1}84%{transform:translate(0,0);opacity:.35}}
@keyframes xh-touch-two-b{0%,38%,84%,100%{transform:translate(0,0);opacity:.12}45%{opacity:1}58%,74%{transform:translate(31px,-25px);opacity:1}}
@media(max-width:760px){.home-page .workspace-hero{width:calc(100% - 32px);height:auto;aspect-ratio:1.45;max-width:none;margin:42px auto 28px;padding:7px;border-radius:17px}.home-page .workspace-hero img{object-fit:cover;border-radius:11px}.home-page .workspace-hero figcaption{font-size:8px;bottom:12px;padding:3px 8px}.home-page .display-story{padding-bottom:45px}.home-page .motion-stage-hint{font-size:10px;bottom:-34px}.home-page .touch-visual{margin-bottom:45px}html[lang^="zh"] .home-page .section-intro h2{font-size:clamp(23px,6.7vw,34px)}html[lang^="zh"] .home-page .story-copy h3{font-size:clamp(25px,7vw,32px)}html[lang^="zh"] .home-page .interaction-copy h2,html[lang^="zh"] .home-page .closing-banner h2{font-size:clamp(27px,7.3vw,36px)}}
@media(prefers-reduced-motion:reduce){.home-page .xh-transfer-window{animation:none!important;left:65%;top:58%;transform:scale(.72)}.home-page .motion-stage-hint{display:none}}