/* ===== FX for case pages ===== */
body{animation:cf-pg .7s ease both}@keyframes cf-pg{from{opacity:0}}
body.fx-leave{opacity:0;transform:scale(.985);transition:.3s ease}
.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%);mix-blend-mode:screen}
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.topbar{position:sticky;top:0;z-index:20;transition:height .3s,box-shadow .3s}.topbar.fx-small{height:58px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
/* 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:cf-up .8s cubic-bezier(.2,.8,.2,1) forwards,cf-fade .6s forwards;animation-delay:calc(var(--i)*45ms + 100ms)}
@keyframes cf-up{to{transform:none}}@keyframes cf-fade{to{opacity:1}}
.logo>span{display:inline-block;animation:cf-x 6s ease-in-out 2s infinite}.logo:hover>span{animation:cf-x2 .8s}
@keyframes cf-x{0%,85%{transform:none}92%{transform:rotate(180deg) scale(1.3)}100%{transform:rotate(360deg)}}@keyframes cf-x2{to{transform:rotate(360deg) scale(1.4)}}
.logo b{display:inline-block;animation:cf-glow 3s ease-in-out infinite}@keyframes cf-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:cf-shine 5s ease-in-out 1.5s infinite;pointer-events:none}
@keyframes cf-shine{0%,55%{left:-70%}100%{left:130%}}
.logo:hover .lc{animation:cf-jump .5s calc(var(--i)*25ms) both}@keyframes cf-jump{40%{transform:translateY(-6px);color:#ff7a9c}}
.back{position:relative;display:inline-block;transition:transform .3s,color .3s}.back:hover{transform:translateX(-6px)}.back:after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:0;background:linear-gradient(90deg,#ff315a,#a45cff);transition:width .35s}.back:hover:after{width:100%}
.topbar .btn{animation:cf-in .8s .9s both,cf-bp 3s 2.5s infinite}@keyframes cf-bp{50%{box-shadow:0 8px 34px rgba(207,54,157,.55)}}
@keyframes cf-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
/* hero */
.case-hero{isolation:isolate}.case-hero:before{animation:cf-float 9s ease-in-out infinite}@keyframes cf-float{50%{transform:translate(-40px,30px) scale(1.12)}}
.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:cf-up .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*80ms + 250ms)}
.js .case-hero .eyebrow,.js .case-hero .lead,.js .case-hero .facts span,.js .case-hero .concept-note,.js .case-hero h1 .gradient{opacity:0;animation:cf-in .9s cubic-bezier(.2,.8,.2,1) forwards}
.js .case-hero .eyebrow{animation-delay:.1s}.js .case-hero .lead{animation-delay:.9s}.js .case-hero .facts span{animation-delay:calc(1.05s + var(--i)*110ms)}.js .case-hero .concept-note{animation-delay:1.4s}
.gradient{background-size:220% 100%;animation:cf-grad 6s linear infinite}@keyframes cf-grad{to{background-position:-220% 0}}
.js .case-hero h1 .gradient{animation:cf-in .9s .7s forwards,cf-grad 6s linear infinite}
.dot{animation:cf-pulse 1.8s ease-out infinite}@keyframes cf-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-img{position:relative;transition:transform .2s ease-out;animation:cf-img 7s ease-in-out infinite,cf-in 1.1s .5s backwards}@keyframes cf-img{50%{translate:0 -14px}}
.hero-img:before{content:"";position:absolute;inset:-1px;border-radius:18px;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:cf-spin 5s linear infinite}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes cf-spin{to{--a:360deg}}
/* 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}
.js .info-card.in,.js .flow-card.in,.js .value-box.in{transition:transform .15s ease-out,border-color .25s,opacity .9s,filter .9s;transition-delay:0s}
.js .info-card.in:not(:hover),.js .flow-card.in:not(:hover){transition:transform .5s,opacity .9s,filter .9s}
.info-card,.flow-card,.value-box{position:relative;overflow:hidden;will-change:transform}
.info-card:after,.flow-card:after,.value-box:after{content:"";position:absolute;inset:0;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%)}
.info-card:hover:after,.flow-card:hover:after,.value-box:hover:after{opacity:1}.info-card:hover,.flow-card:hover{border-color:rgba(233,87,153,.4)}
.flow-card small{display:inline-block;transition:transform .3s,letter-spacing .3s}.flow-card:hover small{transform:translateX(4px);letter-spacing:.2em}
.flow{position:relative}.flow-card{counter-increment:f}
.section-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:cf-grad 5s linear infinite}
.section h2{position:relative}.section h2:after{content:"";display:block;height:3px;width:0;margin-top:10px;border-radius:3px;background:linear-gradient(90deg,#ff315a,#a45cff);transition:width 1s .3s cubic-bezier(.2,.8,.2,1)}.section h2.in:after{width:64px}
.js .list li{opacity:0;transform:translateX(-24px);transition:.6s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--k,0)*90ms + 150ms)}.js .list.in li{opacity:1;transform:none}
.list li:before{display:inline-block;transition:transform .5s cubic-bezier(.3,1.6,.5,1);transform:scale(0)}.list.in li:before{transform:scale(1);transition-delay:calc(var(--k,0)*90ms + 350ms)}.list li:hover{transform:translateX(6px)!important}
/* buttons */
.btn{position:relative;overflow:hidden;will-change:transform;background-size:200% 100%;transition:background-position .5s,transform .2s,box-shadow .2s}.btn:hover{background-position:100% 0}
.btn: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:cf-shine 3.6s ease-in-out infinite}
.value-box:before{content:"";position:absolute;width:380px;height:380px;right:-90px;top:-170px;background:radial-gradient(circle,rgba(255,49,90,.2),transparent 65%);animation:cf-float 8s ease-in-out infinite;pointer-events:none}
.footer-links a{transition:transform .25s,color .25s}.footer-links a:hover{transform:translateY(-2px)}
@media(max-width:820px){.fx-spot,.fx-canvas{display:none}.hero-img{animation:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.js [data-fx],.js .case-hero *,.js .list li,.logo .lc{opacity:1!important;transform:none!important;filter:none!important}.list li:before{transform:none!important}.fx-canvas,.fx-spot,.logo:after{display:none}.section h2:after{width:64px}}