.motion-ribbon{overflow:hidden;background:#2f63ff;color:#fff;border-top:1px solid rgba(255,255,255,.25);border-bottom:1px solid rgba(17,18,24,.18);padding:12px 0;white-space:nowrap}
.ribbon-track{display:flex;width:max-content;align-items:center;gap:28px;font:800 1.05rem "Barlow Condensed";letter-spacing:.1em;animation:ribbonMove 24s linear infinite}
.ribbon-track i{color:#d9ff38;font-style:normal;font-size:.8rem}
@keyframes ribbonMove{to{transform:translateX(-50%)}}
.hero-copy>*{animation:heroRise .75s cubic-bezier(.2,.8,.2,1) both}
.hero-copy .eyebrow{animation-delay:.05s}.hero-copy h1{animation-delay:.12s}.hero-copy .lede{animation-delay:.2s}.hero-copy .actions{animation-delay:.28s}.hero-copy .trust{animation-delay:.36s}
@keyframes heroRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.hero-visual{overflow:hidden}
.hero-visual>img{transform:scale(1.045) translate(var(--drift-x,0),var(--drift-y,0));transition:transform 1.2s cubic-bezier(.2,.7,.2,1);animation:heroZoom 12s ease-in-out infinite alternate}
@keyframes heroZoom{from{scale:1}to{scale:1.035}}
.floating-card{animation:cardFloat 3.8s ease-in-out infinite}
@keyframes cardFloat{0%,100%{translate:0 0;rotate:-2deg}50%{translate:0 -10px;rotate:-1deg}}
.pulse{animation:pulseRing 2s ease-out infinite}
@keyframes pulseRing{0%,100%{box-shadow:0 0 0 7px rgba(47,99,255,.16)}50%{box-shadow:0 0 0 13px rgba(47,99,255,0)}}
.motion-ready .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease var(--reveal-delay,0ms),transform .7s cubic-bezier(.2,.8,.2,1) var(--reveal-delay,0ms)}
.motion-ready .reveal.in-view{opacity:1;transform:translateY(0)}
.service-detail{animation:detailIn .45s ease both}
@keyframes detailIn{from{opacity:.35;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}
.service-tab{position:relative;overflow:hidden;transition:color .25s ease,background-color .25s ease,padding-left .25s ease}.service-tab:hover{padding-left:28px}.service-tab:after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:#d9ff38;transition:width .3s ease}.service-tab:hover:after{width:100%}
.button span{display:inline-block;transition:transform .2s ease}.button:hover span{transform:translateX(5px)}
.nav .brand img{transform-origin:22% 50%;animation:logoArrive .9s cubic-bezier(.16,1,.3,1) both,logoHover 4.5s ease-in-out 1s infinite;transition:filter .3s ease,scale .3s ease}
.hero-logo{animation:heroLogoIn 1s .25s cubic-bezier(.16,1,.3,1) both}
.hero-logo img{animation:heroLogoFloat 5s 1.2s ease-in-out infinite;transition:transform .35s ease,filter .35s ease}
.hero-logo:hover img{transform:scale(1.035);filter:drop-shadow(0 12px 22px rgba(47,99,255,.28))}
@keyframes heroLogoIn{from{opacity:0;transform:translate(-50%,-43%) scale(.86)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes heroLogoFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
.nav .brand:hover img{scale:1.07;filter:drop-shadow(0 9px 12px rgba(47,99,255,.25))}
@keyframes logoArrive{0%{opacity:0;transform:translateX(-28px) rotate(-5deg) scale(.86)}70%{opacity:1;transform:translateX(3px) rotate(1deg) scale(1.02)}100%{opacity:1;transform:translateX(0) rotate(0) scale(1)}}
@keyframes logoHover{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -5px;rotate:.6deg}}
.work figure:nth-child(2n){--reveal-delay:90ms}.work figure:nth-child(3n){--reveal-delay:160ms}
.product-rotator{cursor:pointer}.product-rotator:focus-visible{outline:4px solid #2f63ff;outline-offset:4px}.product-rotator img{transition:opacity .38s ease,transform .5s ease,filter .4s ease}.product-rotator.is-changing img{opacity:0;transform:scale(1.045)}
.slide-count{position:absolute;z-index:3;top:15px;right:15px;padding:5px 9px;border-radius:20px;background:rgba(17,18,24,.76);color:#fff;font:700 .7rem Inter;letter-spacing:.08em;backdrop-filter:blur(6px)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ribbon-track,.hero-copy>*,.hero-visual>img,.floating-card,.pulse,.service-detail,.nav .brand img,.hero-logo,.hero-logo img{animation:none!important}.hero-visual>img{transform:none!important}.motion-ready .reveal{opacity:1;transform:none;transition:none}}
@media(max-width:800px){.ribbon-track{animation-duration:19s}.service-tab:hover{padding-left:20px}}