/* ===== FX: motion layer ===== */
.fx-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#ff315a,#a45cff,#536dff);box-shadow:0 0 14px #a45cff}
.fx-spot{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(164,92,255,.13),transparent 65%);will-change:transform;mix-blend-mode:screen}
.topbar{position:sticky;top:0;transition:height .3s,box-shadow .3s}.topbar.fx-small{height:60px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero:before{will-change:transform;animation:fx-kb 24s ease-in-out infinite alternate}
@keyframes fx-kb{from{scale:1.04}to{scale:1.14}}
.hero-glow{animation:fx-float 9s ease-in-out infinite}
@keyframes fx-float{50%{transform:translate(-40px,30px) scale(1.12)}}
.gradient{background-size:220% 100%;animation:fx-grad 6s linear infinite}
@keyframes fx-grad{to{background-position:-220% 0}}
.dot{animation:fx-pulse 1.8s ease-out infinite}
@keyframes fx-pulse{0%{box-shadow:0 0 0 0 rgba(255,71,117,.7)}100%{box-shadow:0 0 0 12px rgba(255,71,117,0)}}
/* hero intro */
.fx-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}.fx-w>i{display:inline-block;font-style:normal;transform:translateY(110%) rotate(6deg);animation:fx-up .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*70ms + 250ms)}
@keyframes fx-up{to{transform:none}}
.js .hero .eyebrow,.js .hero p,.js .hero-actions,.js .trustline span,.js .hero h1 .gradient{opacity:0;transform:translateY(26px);animation:fx-in .9s cubic-bezier(.2,.8,.2,1) forwards}
.js .hero .eyebrow{animation-delay:.1s}.js .hero h1 .gradient{animation:fx-in .9s cubic-bezier(.2,.8,.2,1) .75s forwards,fx-grad 6s linear infinite}.js .hero p{animation-delay:1.05s}.js .hero-actions{animation-delay:1.2s}.js .trustline span:nth-child(1){animation-delay:1.4s}.js .trustline span:nth-child(2){animation-delay:1.5s}.js .trustline span:nth-child(3){animation-delay:1.6s}
@keyframes fx-in{to{opacity:1;transform:none}}
/* scroll reveal */
.js [data-fx]{opacity:0;transform:translateY(46px) scale(.97);filter:blur(8px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1),filter .9s;transition-delay:var(--d,0ms)}
.js [data-fx=left]{transform:translateX(-60px)}.js [data-fx=right]{transform:translateX(60px)}
.js [data-fx].in{opacity:1;transform:none;filter:none}
/* cards: tilt + spotlight */
.card,.project,.step{transform-style:preserve-3d;will-change:transform}
.js .card.in,.js .project.in,.js .step.in{transition:transform .15s ease-out,border-color .25s,opacity .9s,filter .9s}
.card:after,.project:after,.step{position:relative}
.card:after,.project:after,.step:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(190,110,255,.2),transparent 65%)}
.card:hover:after,.project:hover:after,.step:hover:after{opacity:1}
.card:hover .iconbox{animation:fx-wob .7s}.iconbox{transition:box-shadow .3s}.card:hover .iconbox{box-shadow:0 0 28px rgba(190,100,255,.55)}
@keyframes fx-wob{30%{transform:rotate(-12deg) scale(1.15)}60%{transform:rotate(8deg) scale(1.1)}}
.project-art img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}.project:hover .project-art img{transform:scale(1.09) translateY(-4px)}
/* buttons */
.btn{position:relative;overflow:hidden;will-change:transform}
.btn-primary:before{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;transform:skewX(-22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:fx-shine 3.6s ease-in-out infinite}
@keyframes fx-shine{0%,55%{left:-70%}100%{left:130%}}
.btn-primary{background-size:200% 100%;transition:background-position .5s,transform .2s,box-shadow .2s}.btn-primary:hover{background-position:100% 0}
/* dashboard */
.dashboard{animation:fx-dash 7s ease-in-out infinite;transition:transform .2s ease-out;will-change:transform}
@keyframes fx-dash{50%{translate:0 -14px}}
.dashboard:before{content:"";position:absolute;inset:-1px;border-radius:16px;padding:1px;pointer-events:none;background:conic-gradient(from var(--a,0deg),transparent 70%,#ff315a,#a45cff,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:fx-spin 5s linear infinite}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes fx-spin{to{--a:360deg}}
.dashboard{position:relative}
.js .chart span{transform-origin:bottom;transform:scaleY(0);transition:transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--k,0)*90ms + 300ms)}.js .in .chart span,.js .chart.in span{transform:none}
.js .dash-tile{opacity:0;transform:translateY(20px);transition:.7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--k,0)*140ms + 200ms)}.js .in .dash-tile{opacity:1;transform:none}
.js .dash-tile span[style*="width:82%"]{width:0!important;transition:width 1.6s cubic-bezier(.2,.8,.2,1) .9s}.js .in .dash-tile span[style*="width:82%"]{width:82%!important}
.dash-head span:last-child{animation:fx-blink 1.4s infinite}@keyframes fx-blink{50%{opacity:.25}}
.picon{animation:fx-hop 2.4s ease-in-out infinite}.picon:nth-child(2){animation-delay:.2s}.picon:nth-child(3){animation-delay:.4s}@keyframes fx-hop{50%{transform:translateY(-4px)}}
/* misc */
.iconbox,.step-num{display:inline-grid}.bullets li{transition:transform .3s}.bullets li:hover{transform:translateX(6px)}
.pricebar,.contact-box{position:relative;overflow:hidden}.contact-box:before{content:"";position:absolute;width:420px;height:420px;right:-80px;top:-180px;background:radial-gradient(circle,rgba(255,49,90,.22),transparent 65%);animation:fx-float 8s ease-in-out infinite;pointer-events:none}
.kicker{display:inline-block;background:linear-gradient(90deg,#c38fff,#ff6e93,#c38fff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fx-grad 5s linear infinite}
@media(max-width:820px){.fx-spot,.fx-canvas{display:none}.dashboard{animation:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.js [data-fx],.js .hero *,.js .chart span,.js .dash-tile{opacity:1!important;transform:none!important;filter:none!important}.fx-canvas,.fx-spot{display:none}.logo .lc,.js .navlinks a{opacity:1!important;transform:none!important}.logo:after{display:none}}
/* ===== Logo ===== */
.logo{position:relative;display:inline-flex;align-items:baseline;overflow:hidden;padding:2px 0}
.logo .lc{display:inline-block;transform:translateY(120%) rotate(8deg);opacity:0;animation:fx-up .8s cubic-bezier(.2,.8,.2,1) forwards,fx-lo .6s forwards;animation-delay:calc(var(--i)*45ms + 100ms)}
@keyframes fx-lo{to{opacity:1}}
.logo>span{display:inline-block;animation:fx-x 6s ease-in-out 2s infinite}.logo:hover>span{animation:fx-x2 .8s}
@keyframes fx-x{0%,85%{transform:none}92%{transform:rotate(180deg) scale(1.3)}100%{transform:rotate(360deg)}}
@keyframes fx-x2{to{transform:rotate(360deg) scale(1.4)}}
.logo b{display:inline-block;text-shadow:0 0 0 rgba(255,49,90,0);animation:fx-glow 3s ease-in-out infinite}
@keyframes fx-glow{50%{text-shadow:0 0 18px rgba(255,49,90,.9),0 0 36px rgba(164,92,255,.6)}}
.logo:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;transform:skewX(-22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:fx-shine 5s ease-in-out 1.5s infinite;pointer-events:none}
.logo:hover .lc{animation:fx-jump .5s calc(var(--i)*25ms) both}
@keyframes fx-jump{40%{transform:translateY(-6px);color:#ff7a9c}}
/* ===== Menu ===== */
.navlinks{position:relative}
.navlinks a{position:relative;padding:6px 2px;transition:color .25s,transform .25s}
.js .navlinks a{opacity:0;transform:translateY(-12px);animation:fx-in .7s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--n)*90ms + 500ms)}
.navlinks a:hover{transform:translateY(-2px)}.navlinks a.act{color:#fff}
.fx-ind{position:absolute;bottom:-3px;left:0;height:2px;width:0;border-radius:2px;background:linear-gradient(90deg,#ff315a,#a45cff);box-shadow:0 0 12px #a45cff;transition:left .4s cubic-bezier(.2,.8,.2,1),width .4s cubic-bezier(.2,.8,.2,1),opacity .3s;opacity:0;pointer-events:none}
.navlinks a:before{content:"";position:absolute;left:50%;bottom:-3px;width:0;height:2px;background:rgba(255,255,255,.35);transition:.3s;transform:translateX(-50%)}.navlinks a:hover:before{width:100%}
.navright .btn{animation:fx-in .8s 1s both,fx-bpulse 3s 2.5s infinite}@keyframes fx-bpulse{50%{box-shadow:0 8px 34px rgba(207,54,157,.55)}}
.menu-toggle{position:relative;width:42px;height:38px;font-size:0;overflow:hidden}
.menu-toggle:before,.menu-toggle:after,.menu-toggle i{content:"";position:absolute;left:10px;right:10px;height:2px;border-radius:2px;background:#fff;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .2s,top .35s}
.menu-toggle:before{top:12px}.menu-toggle i{top:18px}.menu-toggle:after{top:24px}
.menu-toggle[aria-expanded=true]:before{top:18px;transform:rotate(45deg)}.menu-toggle[aria-expanded=true]:after{top:18px;transform:rotate(-45deg)}.menu-toggle[aria-expanded=true] i{opacity:0;transform:scaleX(0)}
@media(max-width:650px){.navlinks{display:flex!important;visibility:hidden;opacity:0;transform:translateY(-14px) scale(.96);transform-origin:top;transition:.35s cubic-bezier(.2,.8,.2,1);backdrop-filter:blur(14px)}.navlinks.open{visibility:visible;opacity:1;transform:none}.navlinks.open a{animation:fx-in .5s calc(var(--n)*70ms + 80ms) both}.fx-ind{display:none}}

body{animation:fx-pg .7s ease both}@keyframes fx-pg{from{opacity:0}}body.fx-leave{opacity:0;transform:scale(.985);transition:.3s ease}