/* Motion study: independent composition; shared production components below. */
:root{--paper:#f0f3f8;--ink:#16213b;--blue:#315cff;--line:#d6deeb}html{scroll-padding-top:88px}body{background:var(--paper)}header{top:0;padding:0;background:#f0f3f8e8;border:0;backdrop-filter:blur(18px)}header .nav{height:76px;margin:0 auto;max-width:1440px;border:0;box-shadow:none;border-radius:0;background:transparent;padding:0 5%}header nav{background:transparent}.wrap{max-width:1440px}
.motion-hero{background:transparent;margin:0;overflow:hidden;min-height:0;height:auto;padding:0}.motion-hero .hero-scene{height:calc(100svh - 76px);min-height:560px;max-height:790px;margin-top:76px;padding-top:22px;position:relative}.hero-topline{display:flex;justify-content:space-between;border-top:1px solid #bfcadd;padding-top:13px;font-size:10px;color:#65738c}.hero-topline a{text-decoration:underline;text-underline-offset:4px}.motion-hero h1{font-size:clamp(70px,8.8vw,132px);font-weight:500;letter-spacing:-.075em;line-height:.98;margin:27px 0 0;max-width:none;pointer-events:none;position:relative;z-index:3}.title-line{display:block;width:max-content}.title-line:nth-child(2){margin-left:20%}.motion-hero h1 em{color:#315cff;background:none;-webkit-text-fill-color:currentColor}.hero-intro{position:absolute;bottom:95px;left:5%;z-index:4}.motion-hero .hero-copy{font-size:15px;line-height:1.6;margin:0 0 22px;max-width:270px}.motion-hero .btn{border-radius:10px;font-size:12px;padding:16px 22px;background:#17243f;border-color:#17243f}.hero-side{position:absolute;right:5%;bottom:130px;display:flex;flex-direction:column;gap:8px;width:160px;font-size:11px;color:#64748f}.hero-side strong{font-size:26px;color:#17243f;letter-spacing:-1px;margin-top:15px}.hero-side small{font-size:10px}.hero-side-line{height:1px;background:#cbd4e3;margin:16px 0}.explore{position:absolute;left:5%;right:5%;bottom:22px;border-top:1px solid #cad4e3;padding-top:14px;display:flex;justify-content:space-between;font-size:10px;color:#687995}.motion-hero .art{top:37%;left:35%;right:auto;width:430px;height:400px;transform:scale(.66);transform-origin:50% 0;perspective:1000px}.motion-hero .rack{top:0;left:10%;transition:none}.halo,.cross,.rack-tag{display:none}
/* The next surface grows to full width; scroll never gets intercepted. */
.motion-story{height:170svh;min-height:1050px;position:relative;margin:0 16px}.story-stage{position:sticky;top:76px;height:calc(100svh - 92px);min-height:535px;max-height:820px;background:#16213b;color:#f5f8ff;border-radius:26px;overflow:hidden;padding:26px 4%;transform:scale(var(--scene-scale,.96));transform-origin:center top}.story-top{display:flex;justify-content:space-between;font-size:11px;color:#b1bfd9}.story-top a{color:#d6e1fa}.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:5%;height:calc(100% - 105px);align-items:center}.story-copy{position:relative;height:300px}.story-count{font-size:12px;color:#96b0ff}.story-text{position:absolute;top:40px;left:0;right:0;opacity:0;transform:translateY(30px);transition:opacity .4s,transform .55s;visibility:hidden}.story-text.active{opacity:1;transform:none;visibility:visible}.story-text h2{font-size:clamp(38px,4.6vw,68px);line-height:1.03;letter-spacing:-.06em;font-weight:500;color:white;margin:0}.story-text p{font-size:14px;color:#b0bfd8;line-height:1.75;max-width:390px;margin-top:24px}.story-visual{height:330px;position:relative;perspective:1000px}.visual-orbit{position:absolute;inset:-30px 0;border:1px solid #5574b54a;border-radius:50%;transform:rotate(-28deg);box-shadow:0 0 0 25px #4263a00c,0 0 0 65px #4263a009}.story-screen{position:absolute;inset:0;border:1px solid #7894ca55;border-radius:18px;background:#213354;box-shadow:0 30px 60px #0003;padding:27px;opacity:0;transform:translateY(55px) rotateX(12deg) rotateY(-10deg) scale(.94);transition:transform .65s cubic-bezier(.2,.7,.2,1),opacity .35s;visibility:hidden}.story-screen.active{opacity:1;transform:translateY(0) rotateY(-5deg);visibility:visible}.screen-head{display:flex;justify-content:space-between;font-size:14px;border-bottom:1px solid #7894ca44;padding-bottom:19px}.screen-head span{color:#91adff}.resource-meter{margin-top:22px}.resource-meter label{display:flex;justify-content:space-between;font-size:12px;color:#bac8e0}.resource-meter b{font-weight:400;color:white}.resource-meter i{display:block;height:5px;background:#344969;border-radius:9px;margin-top:12px;overflow:hidden}.resource-meter i:after{content:'';display:block;width:var(--meter);height:100%;background:linear-gradient(90deg,#21b8ff,#7662ff);transform:scaleX(.15);transform-origin:left;transition:transform 1s}.active .resource-meter i:after{transform:scaleX(1)}.screen-foot{display:flex;justify-content:space-between;color:#9baecf;font-size:10px;margin-top:23px}.os-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:23px}.os-choices b{padding:17px 13px;background:#2b4269;border:1px solid #5a77a04a;border-radius:9px;font-size:16px;font-weight:500}.os-choices span{display:block;font-size:9px;color:#9eb6df;margin-top:6px}.panel-preview>div{display:flex;flex-direction:column;gap:6px;border-bottom:1px solid #708ab32b;padding:14px 0}.panel-preview span{font-size:9px;color:#9eb6df}.panel-preview b{font-size:14px;font-weight:400}.story-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:absolute;bottom:26px;left:4%;right:4%}.story-tabs button{position:relative;text-align:left;padding:13px 0 0;border:0;border-top:2px solid #405371;background:none;color:#99accb;font-size:12px}.story-tabs button.active{color:white}.story-tabs button span{margin-right:10px;color:#91adff}.story-tabs i{position:absolute;top:-2px;left:0;height:2px;width:100%;background:#769bff;transform:scaleX(var(--fill,0));transform-origin:left}
/* Different rhythm after the cinematic scene: sticky introduction, open selector. */
#plans{display:grid;grid-template-columns:30% 1fr;column-gap:6%;padding-top:65px;padding-bottom:55px}#plans .section-head{display:block;align-self:start;position:sticky;top:105px;margin:0}#plans .section-head h2{font-size:42px;line-height:1.08}#plans .section-head p{margin-top:24px;font-size:13px}#plans .configurator{grid-template-columns:1fr;border:0;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 12px 50px #263d6809}.task-list{padding:17px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;border:0;background:#e8edf6}.task-list>.config-label,.task-note{grid-column:1/-1}.task-list>.config-label{margin-bottom:3px}.task{display:block;padding:13px 10px;margin:0;border-radius:10px}.task-icon{display:none}.task b{font-size:12px}.task small{font-size:9px;line-height:1.5}.task-note{margin:5px 0 0;max-width:none;font-size:9px}.configuration{padding:25px}.config-hint{font-size:9px}#plans .all-plans,#plans .table-wrap,#plans>.fine{grid-column:2}#plans .all-plans{margin-top:14px}.payment-strip{box-shadow:none;background:#e4ebf8}.geo{background:#e6edf8}.use-cases{gap:0}.use-cases article{padding:24px;border-top:0;border-left:1px solid #c9d6e9}.use-cases article:first-child{padding-left:0;border-left:0}.platform .section-head h2{font-size:48px}.linux-bar{border-radius:0;background:transparent;border-top:1px solid #c9d6e9;padding-left:0;padding-right:0}.cta{border-radius:25px;margin:20px;background:#dfe8ff;color:#16213b}.cta h2{color:#16213b}.cta .eyebrow,.cta-brand span,.cta-row p{color:#475a7a}.reveal{transition:opacity .65s,transform .8s}.btn{border-radius:9px}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #21b8ff;outline-offset:5px}
@media(min-width:1001px) and (max-height:780px){.motion-hero .hero-scene{min-height:540px}.motion-hero h1{font-size:88px;margin-top:20px}.motion-hero .art{top:39%;transform:scale(.55)}.hero-intro{bottom:76px}.hero-side{bottom:100px}.story-stage{min-height:530px}.story-copy{height:270px}.story-text h2{font-size:48px}.story-visual{height:310px}.story-text p{font-size:13px}#plans .section-head h2{font-size:37px}}
@media(max-width:1000px){.motion-hero h1{font-size:8.8vw}.motion-hero .art{left:32%;transform:scale(.57);top:38%}.hero-side{right:4%;width:140px}.story-text h2{font-size:43px}.story-text p{font-size:12px}#plans{grid-template-columns:1fr}#plans .section-head{position:static;margin-bottom:25px;display:flex}#plans .all-plans,#plans .table-wrap,#plans>.fine{grid-column:1}.story-screen{padding:20px}.task small{font-size:10px}}
@media(max-width:650px){header .nav{height:66px}header nav.open{background:#fff}.motion-hero .hero-scene{margin-top:66px;height:790px;min-height:0;padding-top:18px}.hero-topline{font-size:8px}.motion-hero h1{font-size:clamp(38px,10.5vw,66px);margin-top:30px;letter-spacing:-.065em}.title-line:nth-child(2){margin-left:0}.hero-intro{top:215px;bottom:auto;left:5%}.motion-hero .hero-copy{font-size:13px;margin:0 0 16px}.motion-hero .hero-copy br{display:none}.motion-hero .btn{font-size:11px;padding:14px 18px}.motion-hero .art{top:390px;left:50%;margin-left:-215px;transform:scale(.48);width:430px}.hero-side{right:5%;bottom:65px;left:5%;width:auto;flex-direction:row;align-items:baseline;gap:12px;font-size:10px}.hero-side strong{font-size:19px}.hero-side small{font-size:8px}.hero-side-line,.hero-side>span:nth-last-child(-n+2){display:none}.explore{bottom:20px;font-size:9px}.motion-story{height:auto;min-height:0;margin:0 10px}.story-stage{position:relative;top:0;height:auto;min-height:0;max-height:none;padding:23px 20px;border-radius:20px;transform:none}.story-top{font-size:9px;gap:15px}.story-grid{grid-template-columns:1fr;gap:20px;height:auto}.story-copy{height:245px;padding-top:25px}.story-text{top:58px}.story-text h2{font-size:39px}.story-text p{font-size:12px;line-height:1.7;margin-top:17px}.story-visual{height:300px;margin:10px 0 25px}.story-screen.active{transform:none}.story-tabs{position:relative;left:auto;right:auto;bottom:auto;gap:10px}.story-tabs button{font-size:10px}.story-tabs button span{display:block;margin-bottom:6px}.visual-orbit{display:none}#plans{padding-top:40px;padding-bottom:40px}#plans .section-head{display:block}#plans .section-head h2{font-size:35px}#plans .section-head p{margin-top:16px}.task-list{padding:12px;gap:4px}.task{padding:12px 7px}.task b{font-size:11px}.task small{display:none}.task-note{font-size:9px;line-height:1.6}.configuration{padding:22px 18px}.use-cases article{border-left:0;border-top:1px solid #c9d6e9;padding:24px 0}.platform .section-head h2{font-size:34px}.cta{margin:10px}.section-head{gap:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.title-line,.story-stage,.story-screen,.story-text,.rack,.reveal{transition:none!important;transform:none!important}.motion-story{height:auto;min-height:0}.story-stage{position:relative;top:0;height:580px}.motion-hero .rack{transform:rotateX(15deg) rotateY(-28deg) rotateZ(10deg)!important}.reveal{opacity:1}@media(max-width:650px){.story-stage{height:auto}}}
@media(min-width:1001px){.motion-hero .art{top:44%}}
@media(max-width:650px){.motion-hero .hero-scene{height:700px}.hero-intro{top:175px}.motion-hero .art{top:310px}.motion-hero .hero-copy br:after{content:' '}}

/* Owner feedback: original split hero, new scroll scenes below. */
.hero .halo,.hero .cross{display:block}.hero .rack-tag{display:none}
.hero .rack{transition:none}
@media(prefers-reduced-motion:reduce){.hero .rack{transform:rotateX(15deg) rotateY(-28deg) rotateZ(10deg)!important}}

/* Keep the price note in the selector column, outside the sticky copy. */
#plans>.fine{max-width:none;margin:18px 0 0;line-height:1.7}
@keyframes hero-text-enter{from{opacity:0;translate:0 22px;filter:blur(5px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@media(prefers-reduced-motion:no-preference){
.hero .eyebrow{animation:hero-text-enter .65s both}
.hero h1{animation:hero-text-enter .9s .1s both}
.hero .hero-copy{animation:hero-text-enter .8s .25s both}
.hero .hero-scene>.btn{animation:hero-text-enter .7s .4s both}
}