/* R16.2 Motion Studio — independent of cinematic R15.4 and commercial adapters.
   Compositor friendly; animation work is gated by IntersectionObserver and user motion preferences. */
.page-home .r162-studio{--r162-ink:#172236;--r162-indigo:#5d6be5;--r162-sky:#e7eefb;position:relative;background:linear-gradient(180deg,#f6f8fe,#fff 75%);padding:112px 0 133px;overflow:hidden;color:var(--r162-ink)}
.page-home .r162-studio::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 56% 48% at 96% 35%,#e6eafa99,transparent 78%);pointer-events:none}
.page-home .r162-heading-wrap{text-align:center;max-width:900px;position:relative;z-index:2;margin-bottom:55px}
.page-home .r162-kicker{font-size:11px;font-weight:800;letter-spacing:.19em;color:#637491;margin:0 0 18px}
.page-home .r162-kicker span{color:#9076d4;padding:0 9px}
.page-home .r162-studio h2{font:700 clamp(42px,5vw,74px)/1.13 'Be Vietnam Pro',system-ui,sans-serif;letter-spacing:-.063em;margin:0 0 21px;color:#192238}
.page-home .r162-studio h2 span{color:#636fd0}
.page-home .r162-intro{font-size:clamp(15px,1.22vw,18px);line-height:1.78;color:#667289;max-width:650px;margin:0 auto}
.page-home .r162-studio-wrap{position:relative;display:grid;grid-template-columns:minmax(0,.73fr) minmax(0,1.27fr);gap:clamp(26px,4vw,65px);align-items:center}
.page-home .r162-mode-panel{position:relative;z-index:3;padding:18px 0 20px}
.page-home .r162-mode-eyebrow{font-weight:800;font-size:11px;letter-spacing:.15em;color:#627694;margin:0 0 18px}
.page-home .r162-mode-tabs{display:grid;gap:14px}
.page-home .r162-tab{width:100%;font:inherit;appearance:none;display:flex;align-items:center;gap:15px;text-align:left;padding:21px 19px;border:1px solid #e0e7f3;border-radius:19px;background:#fff;color:#29344d;box-shadow:0 6px 25px #4d628712;cursor:pointer;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s ease}
.page-home .r162-tab.is-selected{background:#1d2744;border-color:#1d2744;color:#fff;box-shadow:0 18px 40px #1d2a4d27;transform:translateX(7px)}
.page-home .r162-tab:hover:not(.is-selected){transform:translateX(3px);background:#f8fafe;border-color:#b9c9e8}
.page-home .r162-tab:focus-visible{outline:3px solid #788aff;outline-offset:3px}
.page-home .r162-tab-index{width:32px;height:32px;display:grid;place-items:center;flex:none;border:1px solid currentColor;border-radius:50%;font-size:11px;font-weight:750;opacity:.65}
.page-home .r162-tab-title{font-weight:760;font-size:17px;line-height:1.36;display:block;flex:1}.page-home .r162-tab-title small{display:block;font-size:12px;font-weight:450;opacity:.67;margin-top:3px}
.page-home .r162-tab-arrow{font-size:22px;opacity:.75}
.page-home .r162-panel-note{font-size:12px;line-height:1.6;color:#77849a;max-width:340px;margin:21px 0 15px}
.page-home .r162-more{display:inline-flex;gap:18px;align-items:center;color:#344b94;font-weight:760;font-size:13px;border-bottom:1px solid #6d83bb;padding:8px 0}
.page-home .r162-more:hover{color:#5b6fe5}
.page-home .r162-scene{--r162-shift-x:0px;--r162-shift-y:0px;--r162-tilt:0deg;--r162-depth:0px;position:relative;height:650px;min-width:0;border-radius:40px;background:linear-gradient(137deg,#f0f4fd 0%,#e3eafa 46%,#f3f6ff 100%);isolation:isolate;overflow:hidden;box-shadow:inset 0 1px 0 #fff,0 32px 80px #25345417;border:1px solid #e7eaf1;contain:layout paint}
.page-home .r162-scene-glow{position:absolute;inset:18% 13%;background:radial-gradient(ellipse at 45% 50%,#b2d5f4b9,#b9b2fc55 48%,transparent 76%);transform:translate3d(calc(var(--r162-shift-x) * -.45),calc(var(--r162-shift-y) * -.6),0);border-radius:50%;pointer-events:none}
.page-home .r162-scene-mesh{position:absolute;inset:0;background-image:linear-gradient(#8498bc10 1px,transparent 1px),linear-gradient(90deg,#8498bc10 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at center,#0009,transparent 81%);pointer-events:none}
.page-home .r162-ring{position:absolute;border:1px solid #7b8dc034;border-radius:50%;pointer-events:none;transform:translate3d(calc(var(--r162-shift-x) * -.34),calc(var(--r162-shift-y) * -.27),0) rotate(-21deg)}
.page-home .r162-ring-a{inset:10% 16%;}.page-home .r162-ring-b{inset:22% 28%;border-style:dashed;transform:translate3d(calc(var(--r162-shift-x) * .47),calc(var(--r162-shift-y) * .34),0) rotate(29deg)}
.page-home .r162-trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.42}.page-home .r162-trace path{fill:none;stroke:#879ad1;stroke-width:1.1;stroke-dasharray:5 9;animation:r162-trace 29s linear infinite;animation-play-state:paused}
.page-home .r162-float{position:absolute;z-index:3;display:flex;gap:10px;align-items:center;background:#ffffffed;box-shadow:0 13px 38px #42547519;border:1px solid #fff;border-radius:16px;padding:12px 14px;min-width:150px;transform:translate3d(var(--r162-float-x,0px),var(--r162-float-y,0px),0);animation:r162-float 7s ease-in-out infinite;animation-play-state:paused;pointer-events:none}
.page-home .r162-float>span:last-child{color:#2f4168;font-size:12px;font-weight:750;line-height:1.3}.page-home .r162-float small{display:block;font-size:10px;font-weight:440;color:#8a91a4;margin-top:3px}
.page-home .r162-float-symbol{width:31px;height:31px;display:grid;place-items:center;flex:none;border-radius:10px;background:#e8eafd;color:#5f6ccd;font-size:20px}
.page-home .r162-float-pos{left:5%;top:17%;--r162-float-x:calc(var(--r162-shift-x) * -.9);--r162-float-y:calc(var(--r162-shift-y) * -.78);animation-duration:7.1s}
.page-home .r162-float-web{right:4%;top:24%;--r162-float-x:calc(var(--r162-shift-x) * .85);--r162-float-y:calc(var(--r162-shift-y) * -.6);animation-delay:-2s;animation-duration:6.1s}
.page-home .r162-float-home{left:3%;bottom:26%;--r162-float-x:calc(var(--r162-shift-x) * -.7);--r162-float-y:calc(var(--r162-shift-y) * .7);animation-delay:-4s;animation-duration:8.4s}
.page-home .r162-float-account{right:3%;bottom:19%;--r162-float-x:calc(var(--r162-shift-x) * .8);--r162-float-y:calc(var(--r162-shift-y) * .85);animation-delay:-3.3s;animation-duration:7.5s}
.page-home .r162-float-home .r162-float-symbol{background:#e0f4e9;color:#4a937f}.page-home .r162-float-account .r162-float-symbol{background:#f3e8fc;color:#9362ad}
.page-home .r162-phone-shadow{position:absolute;z-index:1;left:50%;bottom:8%;width:252px;height:38px;border-radius:50%;background:#25385829;filter:blur(17px);transform:translateX(-50%);pointer-events:none}
.page-home .r162-phone{position:absolute;z-index:2;left:50%;top:50%;width:264px;height:525px;transform:translate(-50%,-50%) translate3d(calc(var(--r162-shift-x) * .16),calc(var(--r162-shift-y) * -.26),0) rotate(var(--r162-tilt));background:#141a2b;border:5px solid #151a29;border-radius:44px;padding:7px;box-shadow:0 23px 65px #1423484a,inset 0 0 1px #9aabda;will-change:auto}
.page-home .r162-phone::before{content:"";position:absolute;right:-8px;top:101px;width:4px;height:71px;background:#424b62;border-radius:0 4px 4px 0}
.page-home .r162-phone-island{position:absolute;z-index:20;left:50%;top:12px;width:76px;height:18px;background:#181d2a;transform:translateX(-50%);border-radius:16px;box-shadow:0 2px 4px #10131c33}
.page-home .r162-phone-glass{position:relative;height:100%;width:100%;overflow:hidden;border-radius:34px;background:#f7f9ff}
.page-home .r162-status{height:39px;padding:10px 17px 0;color:#1c2537;font:760 10px system-ui,sans-serif;display:flex;align-items:flex-start;justify-content:space-between;position:relative;z-index:10}.page-home .r162-status-icons{font-size:10px;letter-spacing:.1em}
.page-home .r162-screen{position:absolute;inset:39px 0 39px;padding:7px 14px 14px;overflow:hidden;opacity:0;transform:translate3d(27px,6px,0) scale(.965);visibility:hidden;transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.22,1,.36,1),visibility 0s linear .7s;pointer-events:none}
.page-home .r162-screen[hidden]{display:block!important} /* transitions managed by active class while aria-hidden on inactive */
.page-home .r162-screen.is-current{opacity:1;transform:translate3d(0,0,0) scale(1);visibility:visible;transition-delay:0s;pointer-events:auto}
.page-home .r162-appbar{display:flex;align-items:center;gap:9px;margin:1px 0 15px;height:31px}.page-home .r162-app-symbol{font-size:18px;background:#dfe5ff;border-radius:9px;width:31px;height:31px;display:grid;place-items:center;color:#6070d5}
.page-home .r162-appbar span:nth-child(2){display:flex;flex:1;flex-direction:column;justify-content:center}.page-home .r162-appbar b{font-size:11px;color:#202d4c}.page-home .r162-appbar small{font-size:8px;color:#7886a6;line-height:1.7}.page-home .r162-appbar i{font-style:normal;font-size:15px;letter-spacing:1px;color:#9aa7c1}
.page-home .r162-screen-intro{font-size:18px;font-weight:800;letter-spacing:-.055em;line-height:1.25;color:#172844}.page-home .r162-screen-intro span{color:#8288ee}.page-home .r162-screen-intro small{font-size:9px;line-height:2.2;color:#8591a8;display:block;font-weight:500;letter-spacing:0}
.page-home .r162-pos-cards{display:flex;gap:7px;margin-top:13px}.page-home .r162-pos-cards>div{position:relative;flex:1;min-width:0;height:78px;border:1px solid #dfe7f5;background:#fff;border-radius:13px;padding:11px 10px}.page-home .r162-pos-cards small{display:block;font-size:8px;color:#8290a9}.page-home .r162-pos-cards strong{font-size:12px;line-height:1.2;display:block;margin-top:5px;color:#1e2b43}.page-home .r162-pos-cards span{position:absolute;right:9px;top:11px;font-size:14px;color:#6d84df}
.page-home .r162-mini-chart{border:1px solid #e2e9f3;background:#fff;border-radius:14px;margin-top:10px;padding:12px 11px;height:134px}.page-home .r162-chart-head{display:flex;justify-content:space-between;align-items:center}.page-home .r162-chart-head strong{font-size:10px}.page-home .r162-chart-head span{font-size:8px;color:#8390a6}
.page-home .r162-chart-bars{height:79px;display:flex;align-items:flex-end;justify-content:space-around;gap:10px;padding:6px 3px 0;border-bottom:1px solid #d7dfee}
.page-home .r162-chart-bars i{display:block;flex:1;max-width:19px;height:var(--h);transform-origin:bottom;border-radius:5px 5px 1px 1px;background:linear-gradient(#8a8ef7,#6d9aef);animation:r162-bar 3.8s ease-in-out infinite;animation-delay:var(--d);animation-play-state:paused}
.page-home .r162-activity{margin-top:12px}.page-home .r162-activity>strong{font-size:11px;display:block;margin:0 0 9px}.page-home .r162-activity-row{display:flex;gap:8px;align-items:center;border-bottom:1px solid #e8eef7;padding:8px 0}.page-home .r162-activity-row span{border-radius:6px;background:#e5f3ee;color:#58a18a;width:17px;height:17px;display:grid;place-items:center;font-size:10px}.page-home .r162-activity-row b{font-size:9px;font-weight:600;flex:1}.page-home .r162-activity-row em{font-style:normal;color:#a0acc0;font-size:9px}
.page-home .r162-phone-bottom{position:absolute;bottom:1px;left:0;right:0;height:37px;display:flex;align-items:center;justify-content:space-around;border-top:1px solid #e6edf6;color:#90a3c3;font-size:17px;background:#fff}
.page-home .r162-screen-web{background:linear-gradient(180deg,#f8f9ff,#eef0fe 85%)}.page-home .r162-screen-web .r162-app-symbol{background:#eae2ff;color:#946cd9}.page-home .r162-web-title{padding:9px 0 12px}.page-home .r162-web-title small{font-size:8px;letter-spacing:.13em;font-weight:800;color:#7b7fb6}.page-home .r162-web-title strong{display:block;font-size:19px;line-height:1.14;margin-top:6px;color:#26284a;letter-spacing:-.055em}
.page-home .r162-web-preview{height:160px;border-radius:14px;background:radial-gradient(circle at 75% 25%,#bba9ed 0,transparent 55%),linear-gradient(135deg,#c8d6ff,#f2daff);padding:12px;overflow:hidden}
.page-home .r162-web-window{height:100%;border-radius:10px;background:#22253a;transform:rotate(-4deg) translate(10px,9px);padding:12px 14px;color:#fff;box-shadow:0 10px 20px #2523522b;animation:r162-web-lift 6s ease-in-out infinite;animation-play-state:paused}
.page-home .r162-web-window span{display:block;color:#9b9eb9;font-size:6px}.page-home .r162-web-window strong{display:block;font-size:29px;margin-top:15px;letter-spacing:-.05em}.page-home .r162-web-window small{display:block;font-size:7px;margin-top:4px;letter-spacing:.2em}.page-home .r162-web-window i{display:block;height:6px;width:72%;background:linear-gradient(90deg,#faf5ec 60%,#d0aaff 60% 84%,#818bea 84%);margin-top:10px}
.page-home .r162-web-blocks{margin-top:13px;display:grid;gap:8px}.page-home .r162-web-blocks>div{height:46px;border:1px solid #e6e7fa;background:#fff;display:flex;align-items:center;gap:10px;border-radius:10px;padding:8px 10px}.page-home .r162-web-blocks i{height:24px;width:29px;background:linear-gradient(135deg,#e4e4ff,#e9f1ff);border-radius:7px}.page-home .r162-web-blocks span{flex:1;font-size:10px;font-weight:750;color:#303350}.page-home .r162-web-blocks small{display:block;font-size:8px;font-weight:400;color:#929ab0}.page-home .r162-web-blocks b{color:#8587c8}
.page-home .r162-screen-home{background:linear-gradient(180deg,#f5fbfa,#eaf5f1)}.page-home .r162-screen-home .r162-app-symbol{background:#daf4e9;color:#419a7a}.page-home .r162-home-welcome{font-size:19px;font-weight:790;color:#243b3c;letter-spacing:-.05em}.page-home .r162-home-welcome small{font-size:9px;line-height:2.4;font-weight:450;letter-spacing:0;color:#7a9690;display:block}
.page-home .r162-home-place{height:181px;margin-top:14px;border-radius:16px;background:linear-gradient(135deg,#cee9e2,#bedde4);position:relative;overflow:hidden;text-align:center;padding:19px 10px}.page-home .r162-home-sun{font-size:29px;margin-bottom:3px;color:#e1ac6d;animation:r162-home-sun 12s linear infinite;animation-play-state:paused}.page-home .r162-home-place strong{display:block;color:#27524b;font-size:17px}.page-home .r162-home-place>small{display:block;font-size:9px;color:#688b86;margin-top:3px}.page-home .r162-home-avatars{position:absolute;bottom:12px;left:0;right:0;display:flex;align-items:center;justify-content:center}.page-home .r162-home-avatars span{width:26px;height:26px;border:2px solid #fff;border-radius:50%;background:#639a92;color:white;display:grid;place-items:center;font-size:10px;margin-left:-5px}
.page-home .r162-home-avatars span:nth-child(2){background:#8c8bd0}.page-home .r162-home-avatars span:nth-child(3){background:#d2a178}
.page-home .r162-home-tasks{margin-top:13px}.page-home .r162-home-tasks>strong{font-size:11px}.page-home .r162-home-tasks>div{display:flex;align-items:center;gap:10px;padding:11px;border-radius:10px;margin-top:8px;background:#fff;border:1px solid #e0eeea}.page-home .r162-home-tasks span{color:#3a9a7c}.page-home .r162-home-tasks b{font-size:10px;flex:1}.page-home .r162-home-tasks small{font-size:12px;color:#9bb5ad}
.page-home .r162-progress{position:absolute;z-index:5;left:7%;right:7%;bottom:16px;display:flex;gap:12px;align-items:center;font-size:9px;font-weight:750;letter-spacing:.12em;color:#7382a0}.page-home .r162-progress-track{height:3px;border-radius:8px;background:#c7d4ec;flex:1;overflow:hidden}.page-home .r162-progress-track i{height:100%;display:block;background:linear-gradient(90deg,#6373c9,#7f9fea);transform:scaleX(0);transform-origin:left;transition:transform .08s linear}.page-home .r162-progress-note{white-space:nowrap}
.page-home .r162-studio.r162-active .r162-trace path,.page-home .r162-studio.r162-active .r162-float,.page-home .r162-studio.r162-active .r162-chart-bars i,.page-home .r162-studio.r162-active .r162-web-window,.page-home .r162-studio.r162-active .r162-home-sun{animation-play-state:running}
@keyframes r162-float{0%,100%{translate:0 0}50%{translate:0 -14px}}
@keyframes r162-trace{to{stroke-dashoffset:-196}}
@keyframes r162-bar{0%,100%{scale:1 .85}50%{scale:1 1.13}}
@keyframes r162-web-lift{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes r162-home-sun{to{rotate:360deg}}
@media(max-width:1120px){.page-home .r162-studio-wrap{grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);gap:24px}.page-home .r162-scene{height:600px}.page-home .r162-phone{scale:.92}.page-home .r162-float{min-width:120px;padding:8px 10px}.page-home .r162-float>span:last-child{font-size:10px}.page-home .r162-float small{font-size:9px}}
@media(max-width:800px){.page-home .r162-studio{padding:80px 0 96px}.page-home .r162-heading-wrap{margin-bottom:29px}.page-home .r162-studio h2{font-size:clamp(37px,6vw,57px)}.page-home .r162-studio-wrap{display:flex;flex-direction:column;gap:26px}.page-home .r162-mode-panel{width:100%;max-width:620px;padding:0}.page-home .r162-mode-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.page-home .r162-tab{padding:12px 11px;gap:8px;border-radius:15px}.page-home .r162-tab.is-selected{transform:translateY(-3px)}.page-home .r162-tab-index{display:none}.page-home .r162-tab-title{font-size:12px}.page-home .r162-tab-title small{font-size:9px}.page-home .r162-tab-arrow{display:none}.page-home .r162-panel-note{max-width:none;margin:14px 0 8px}.page-home .r162-scene{width:100%;max-width:720px;height:630px}.page-home .r162-phone{scale:1}}
@media(max-width:460px){.page-home .r162-studio{padding:70px 0 80px}.page-home .r162-kicker{font-size:9px}.page-home .r162-studio h2{font-size:clamp(33px,9vw,45px)}.page-home .r162-intro{font-size:14px}.page-home .r162-mode-tabs{gap:6px}.page-home .r162-tab{padding:11px 7px}.page-home .r162-tab-title{font-size:11px}.page-home .r162-tab-title small{font-size:8px}.page-home .r162-scene{height:585px;border-radius:24px}.page-home .r162-phone{scale:.83}.page-home .r162-float{padding:7px 8px;min-width:0;gap:5px;border-radius:9px;box-shadow:0 7px 18px #49597919}.page-home .r162-float-symbol{width:24px;height:24px;font-size:15px;border-radius:7px}.page-home .r162-float>span:last-child{font-size:9px}.page-home .r162-float small{font-size:7px}.page-home .r162-float-pos{top:10%;left:1.5%}.page-home .r162-float-web{top:17%;right:1.5%}.page-home .r162-float-home{bottom:18%;left:1.5%}.page-home .r162-float-account{bottom:12%;right:1.5%}.page-home .r162-progress{left:5%;right:5%;gap:6px;font-size:8px}.page-home .r162-progress-note{letter-spacing:0}}
@media(prefers-reduced-motion:reduce){.page-home .r162-studio *{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}.page-home .r162-phone,.page-home .r162-float,.page-home .r162-ring,.page-home .r162-scene-glow{transform:none!important}.page-home .r162-phone{transform:translate(-50%,-50%)!important}.page-home .r162-screen:not(.is-current){visibility:hidden!important}.page-home .r162-progress-track i{transform:scaleX(1)}}
@keyframes r162-progress-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.page-home .r162-studio.r162-active .r162-progress-track i.r162-progress-playing{animation:r162-progress-fill 5.2s linear forwards}
/* Mobile comfort: preserve float motion but avoid continuous SVG stroke repaint. */
@media(max-width:800px){.page-home .r162-trace path{animation:none!important}}