/* Motion enhances the existing layout; no content depends on animation to be visible. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
.reading-progress{position:absolute;bottom:-1px;left:0;width:100%;height:3px;background:linear-gradient(90deg,#2568ef,#9c4aff,#60c8ed);transform:scaleX(0);transform-origin:left;pointer-events:none;z-index:2}
.site-header{transition:box-shadow .35s,background-color .35s,border-color .35s}
.site-header.scrolled{background:rgba(255,255,255,.93);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.interactive-surface{position:relative;isolation:isolate;transition:transform .35s var(--motion-ease),box-shadow .35s,border-color .35s}
.interactive-surface::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(420px circle at var(--pointer-x,50%) var(--pointer-y,50%),rgba(113,92,255,.10),transparent 65%);opacity:0;pointer-events:none;z-index:-1;transition:opacity .35s}
.feature-spotlight.primary::before{background:radial-gradient(350px circle at var(--pointer-x,50%) var(--pointer-y,50%),rgba(255,255,255,.28),transparent 68%);z-index:0}
.feature-spotlight.primary>*{position:relative}
.interactive-surface:focus-within{border-color:#9baaff;box-shadow:0 12px 30px #4f64cd18}
.interactive-surface:focus-within::before{opacity:1}
.button{position:relative;isolation:isolate;transition:transform .25s var(--motion-ease),box-shadow .25s,filter .25s,background-color .25s}
.button:active{transform:translateY(0) scale(.97)}
.button:not(.button-secondary):not(.button-light){background-size:160% 100%;transition:background-position .4s,transform .25s,box-shadow .25s,filter .25s}
.button i,.text-link i,.office-map-link,.reading-nav a{transition:transform .25s var(--motion-ease)}
.ripple-host{position:relative;overflow:hidden;isolation:isolate}
.click-ripple{position:absolute;border-radius:50%;background:currentColor;pointer-events:none;z-index:3;opacity:0}
.product-tabs [role=tab]{transition:color .25s,background .25s,box-shadow .25s,transform .25s}
.product-tabs [role=tab][aria-selected=true]{box-shadow:0 6px 17px #7546ef26}
.product-cycle button{transition:background .2s,transform .25s,box-shadow .25s}
.product-cycle button:active{transform:scale(.91)}
.product-visual .zoom-button{transition:transform .5s var(--motion-ease)}
.faq-list details{transition:border-color .25s,background-color .25s}
.faq-list summary{transition:color .2s,padding-left .25s}
.faq-list summary i{transition:transform .3s var(--motion-ease),color .2s}
.faq-list details[open] summary i{transform:rotate(45deg)}
.faq-list details[open]{border-color:#d2dafa}
.demo-form label:not(.consent-field)>span{transition:color .2s}
.demo-form label:focus-within>span{color:#6353dc}
.demo-form input,.demo-form textarea,.demo-form select,.guide-search input{transition:border-color .2s,box-shadow .2s,background-color .2s}
.demo-form input:focus,.demo-form textarea:focus,.demo-form select:focus,.guide-search input:focus{outline:none;border-color:#8874ef;box-shadow:0 0 0 4px #8468ed12;background:#fdfcff}
.demo-form input[type=checkbox]{accent-color:#7754ef}
.demo-form[aria-busy=true] button[type=submit]::before{content:"";width:14px;height:14px;border:2px solid #ffffff55;border-top-color:#fff;border-radius:50%;animation:motion-spin .8s linear infinite}
.back-top,.floating-contact{transition:transform .3s var(--motion-ease),box-shadow .3s,background-color .3s}
.back-top:not([hidden]){animation:motion-rise .3s var(--motion-ease) both}
.factory-visual{overflow:hidden}
.factory-visual>img{transition:transform .45s ease-out;transform-origin:center}
.factory-signals{position:absolute;inset:0;pointer-events:none}
.factory-signal{position:absolute;display:inline-flex;align-items:center;gap:9px;padding:11px 15px;background:#ffffffda;border:1px solid #e3e9fb;border-radius:8px;color:#476184;box-shadow:0 10px 30px #4360a51a;font-size:12px;font-weight:600;backdrop-filter:blur(6px);animation:motion-float 7s ease-in-out infinite;animation-play-state:paused}
.factory-signal i{position:relative;width:7px;height:7px;border-radius:50%;background:#7c57f3}
.factory-signal i::after{content:"";position:absolute;inset:-4px;border:1px solid #8d68f87a;border-radius:50%;animation:motion-pulse 3s ease-out infinite;animation-play-state:paused}
.signal-0{top:34%;left:39%}.signal-1{top:63%;left:19%;animation-delay:-2s}.signal-2{top:77%;left:64%;animation-delay:-4s}
.motion-in-view .factory-signal,.motion-in-view .factory-signal i::after{animation-play-state:running}
.motion-paused .factory-signal,.motion-paused .factory-signal i::after{animation-play-state:paused!important}
@keyframes motion-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes motion-pulse{0%{transform:scale(.8);opacity:.8}80%,100%{transform:scale(1.9);opacity:0}}
@keyframes motion-spin{to{transform:rotate(360deg)}}
@keyframes motion-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes motion-dialog{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes motion-backdrop{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:no-preference){
 .demo-dialog[open],.image-preview[open]{animation:motion-dialog .32s var(--motion-ease) both}
 dialog[open]::backdrop{animation:motion-backdrop .25s ease both}
 .mobile-nav:not([hidden]){animation:motion-rise .28s var(--motion-ease) both}
 .mobile-nav:not([hidden]) a{animation:motion-rise .35s var(--motion-ease) both}
 .mobile-nav a:nth-child(2){animation-delay:35ms}.mobile-nav a:nth-child(3){animation-delay:70ms}.mobile-nav a:nth-child(4){animation-delay:105ms}.mobile-nav a:nth-child(5){animation-delay:140ms}.mobile-nav a:nth-child(6){animation-delay:175ms}
}
@media(hover:hover) and (pointer:fine){
 .interactive-surface:hover{transform:translateY(-6px);border-color:#a8b5fa;box-shadow:0 18px 38px #4362b91c}
 .interactive-surface:hover::before{opacity:1}
 .feature-spotlight:hover{transform:translateY(-5px)}
 .feature-mini-grid>div{transition:transform .25s,box-shadow .25s}
 .feature-mini-grid>div:hover{transform:translateY(-4px);box-shadow:0 7px 15px #5264c518}
 .service-card-art i,.feature-title i,.hardware-photo{transition:transform .4s var(--motion-ease)}
 .service-card:hover .service-card-art i,.feature-spotlight:hover .feature-title i{transform:translateY(-3px) rotate(-6deg)}
 .hardware-grid>article:hover .hardware-photo{transform:scale(1.035)}
 .button:hover{box-shadow:0 9px 24px #6647ec26;background-position:100% 50%}
 .button:hover i,.text-link:hover i{transform:translateX(4px)}
 .product-cycle button:hover{transform:translateY(-2px);box-shadow:0 6px 15px #7048e81c;background:#f8f5ff}
 .product-visual .zoom-button:hover{transform:scale(1.025)}
 .faq-list summary:hover{color:#7152d8;padding-left:5px}
 .floating-contact:hover,.back-top:hover{transform:translateY(-4px);box-shadow:0 9px 24px #5546cf30}
 .site-footer a:not(.brand){transition:color .2s,transform .25s}
 .site-footer a:not(.brand):hover{color:#a9baff;transform:translateX(3px)}
}
@media(max-width:840px){.factory-signal{font-size:10px;padding:7px 10px;gap:6px}.signal-0{top:30%;left:51%}.signal-1{top:57%;left:22%}.signal-2{top:79%;left:66%}}
@media(max-width:380px){.factory-signal{font-size:9px;padding:6px 8px}.signal-2{left:62%}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .interactive-surface:hover,.feature-spotlight:hover,.product-visual .zoom-button:hover,.hardware-grid>article:hover .hardware-photo,.floating-contact:hover,.back-top:hover,.button:hover,.button:active{transform:none}
 .factory-visual>img{transform:none!important}
}
@media print{.factory-signals,.reading-progress,.floating-contact,.back-top{display:none!important}}