/* Exo motion layer */
:root{--mx:50vw;--my:30vh}body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,43,61,.055),transparent 68%)}.motion-ready .motion-reveal{opacity:0;transform:translateY(22px) scale(.985);filter:blur(5px);transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease);transition-delay:var(--stagger,0ms)}.motion-ready .motion-reveal.motion-in{opacity:1;transform:none;filter:none}.logo-mark{position:relative;animation:logoFloat 4.8s ease-in-out infinite}.logo-mark::after{content:"";position:absolute;inset:-7px;border:1px solid rgba(255,43,61,.3);border-radius:inherit;animation:logoPing 3s ease-out infinite}.btn{overflow:hidden;isolation:isolate}.btn::after{content:"";position:absolute;inset:-120% -35%;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.24) 50%,transparent 62%);transform:translateX(-65%) rotate(8deg);transition:transform .75s var(--ease);z-index:-1}.btn:hover::after{transform:translateX(65%) rotate(8deg)}.btn:hover{transform:translateY(-2px)}.btn:active{transform:scale(.975)}.motion-ripple{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.25);transform:translate(-50%,-50%) scale(0);animation:ripple .65s ease-out forwards}.card,.stat-card,.bcard,.mod-card,.price-card,.testi,.login-card{transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}.card:hover,.stat-card:hover,.bcard:hover,.mod-card:hover,.price-card:hover,.testi:hover{transform:translateY(-5px);border-color:rgba(255,43,61,.28);box-shadow:0 22px 55px -34px rgba(255,43,61,.45)}.login-card{animation:cardEnter .8s var(--ease) both,cardBreathe 7s 1s ease-in-out infinite}.hero-card,.preview-shot{animation:heroHover 6s ease-in-out infinite}.tbl tbody tr,.lf-row,.feed-row{animation:rowIn .42s var(--ease) both}.page .stat-card,.page .card{animation:panelRise .5s var(--ease) both;animation-delay:var(--stagger,0ms)}.prog i::after,.mon-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:progress 2.2s linear infinite}@keyframes logoFloat{50%{transform:translateY(-3px) rotate(-2deg)}}@keyframes logoPing{0%{opacity:.55;transform:scale(.82)}70%,100%{opacity:0;transform:scale(1.35)}}@keyframes ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}@keyframes cardEnter{from{opacity:0;transform:translateY(24px) scale(.97);filter:blur(8px)}}@keyframes cardBreathe{50%{box-shadow:0 40px 110px -28px rgba(255,43,61,.2)}}@keyframes heroHover{50%{transform:translateY(-7px)}}@keyframes rowIn{from{opacity:0;transform:translateX(-8px)}}@keyframes panelRise{from{opacity:0;transform:translateY(12px)}}@keyframes progress{from{transform:translateX(-120%)}to{transform:translateX(120%)}}@media(max-width:860px){body::after{display:none}.hero-card,.preview-shot{animation:none}}@media(prefers-reduced-motion:reduce){body::after{display:none}.logo-mark,.login-card,.hero-card,.preview-shot,.tbl tbody tr,.lf-row,.feed-row,.page .stat-card,.page .card{animation:none!important}.motion-ready .motion-reveal{opacity:1;transform:none;filter:none}.card:hover,.stat-card:hover,.bcard:hover,.mod-card:hover,.price-card:hover,.testi:hover{transform:none}}

/* Exo 2.2 animated brand and icon system */
.brand-shell{background:radial-gradient(circle at 35% 25%,rgba(255,72,88,.3),rgba(255,43,61,.08) 52%,rgba(0,0,0,.2));overflow:hidden!important;isolation:isolate;animation:shellGlow 4.4s ease-in-out infinite}.brand-image{width:100%;height:100%;max-width:100%;object-fit:contain;padding:2.5px;transform-origin:center;animation:brandHover 4.6s ease-in-out infinite,brandGlow 2.8s ease-in-out infinite}.hero-brand-watermark{position:absolute;right:6%;top:18%;width:46%;opacity:.11;pointer-events:none;z-index:0;animation:brandOrbit 8s ease-in-out infinite;filter:drop-shadow(0 0 25px rgba(255,43,61,.6))}.hero-card>*:not(.hero-brand-watermark){position:relative;z-index:1}.btn svg,.sb-item svg,.tb-ico svg,.pv-item svg,.bc-icon svg,.sc-ico svg,.t-icon svg{transform-origin:center;transition:transform .35s var(--ease),filter .35s}.btn:hover svg{animation:iconNudge .7s var(--ease)}.sb-item:hover svg,.tb-ico:hover svg,.pv-item:hover svg,.bc-icon:hover svg,.sc-ico:hover svg{transform:translateY(-2px) scale(1.14);filter:drop-shadow(0 0 7px currentColor)}.sb-item.active svg{animation:iconPulse 2.2s ease-in-out infinite}.badge .dot,.tb-server .dot,.ndot{animation:statusPulse 2s ease-in-out infinite}.bc-icon,.sc-ico,.t-icon{animation:iconFloat 4s ease-in-out infinite}@keyframes brandHover{0%,100%{transform:rotate(-3deg) scale(1)}50%{transform:rotate(3deg) scale(1.03)}}@keyframes brandGlow{0%,100%{filter:drop-shadow(0 0 8px rgba(255,43,61,.45))}50%{filter:drop-shadow(0 0 20px rgba(255,43,61,.9))}}@keyframes shellGlow{0%,100%{box-shadow:0 0 14px -4px rgba(255,43,61,.55),inset 0 1px 0 rgba(255,255,255,.3)}50%{box-shadow:0 0 26px -2px rgba(255,43,61,.95),inset 0 1px 0 rgba(255,255,255,.3)}}@keyframes brandOrbit{0%,100%{transform:translate3d(0,0,0) rotate(-4deg) scale(.96);opacity:.08}50%{transform:translate3d(-8px,-10px,0) rotate(4deg) scale(1.04);opacity:.16}}@keyframes iconNudge{0%,100%{transform:none}35%{transform:translateX(3px) rotate(8deg) scale(1.12)}70%{transform:translateX(-1px) rotate(-4deg)}}@keyframes iconPulse{50%{transform:scale(1.14);filter:drop-shadow(0 0 8px currentColor)}}@keyframes statusPulse{0%,100%{opacity:.75;transform:scale(.9)}50%{opacity:1;transform:scale(1.25)}}@keyframes iconFloat{50%{transform:translateY(-3px)}}@media(max-width:860px){.hero-brand-watermark{width:62%;right:-5%;top:24%;opacity:.08}}@media(prefers-reduced-motion:reduce){.brand-image,.hero-brand-watermark,.btn svg,.sb-item svg,.badge .dot,.tb-server .dot,.ndot,.bc-icon,.sc-ico,.t-icon{animation:none!important;transform:none!important}}

/* Exo 3.5 — living icons, tuned by hand.
   Every icon idles on its own clock: renderIcon() deals each instance a
   phase offset (--ic-d), so a wall of icons never moves in lockstep — it
   reads like a room full of small machines, not a synchronized loop.
   The icons people actually touch have signature moves picked one by one:
   the bell rings when it's been quiet a while, the gear settles with a
   half-turn, the search glass takes a peek, shields draw a slow breath,
   the eye blinks. Timings are deliberately odd numbers (5.3s, 6.7s, 8.9s)
   so overlapping loops drift apart instead of beating together. */
svg[data-icon]{animation:icoBreathe 5.3s ease-in-out infinite;animation-delay:var(--ic-d,0s)}
/* interactive containers: pause the idle so hover transforms can land */
.sb-item:hover svg,.tb-ico:hover svg,.pv-item:hover svg,.bc-icon:hover svg,.sc-ico:hover svg{animation:none}
/* signature idles */
svg[data-icon=bell]{transform-origin:50% 15%;animation:icoRing 6.7s ease-in-out infinite;animation-delay:var(--ic-d,0s)}
svg[data-icon=search]{animation:icoPeek 8.9s ease-in-out infinite;animation-delay:var(--ic-d,0s)}
svg[data-icon=settings],svg[data-icon=sliders-horizontal]{animation:icoTinker 7.3s ease-in-out infinite;animation-delay:var(--ic-d,0s)}
svg[data-icon=shield],svg[data-icon=shield-check],svg[data-icon=shield-half],svg[data-icon=shield-alert],svg[data-icon=shield-x]{animation:icoGuard 4.3s ease-in-out infinite;animation-delay:var(--ic-d,0s)}
svg[data-icon=activity],svg[data-icon=radar],svg[data-icon=gauge]{animation:icoScan 3.7s ease-in-out infinite;animation-delay:var(--ic-d,0s)}
svg[data-icon=zap]{animation:icoSpark 5.1s ease-in-out infinite;animation-delay:var(--ic-d,0s)}
svg[data-icon=eye]{animation:icoBlink 6.1s ease-in-out infinite;animation-delay:var(--ic-d,0s)}
svg[data-icon=timer],svg[data-icon=clock]{animation:icoTick 2.9s ease-in-out infinite;animation-delay:var(--ic-d,0s)}
svg[data-icon=wifi],svg[data-icon=server]{animation:icoScan 4.7s ease-in-out infinite;animation-delay:var(--ic-d,0s)}
/* hover signatures — small, quick, deliberate */
button:hover svg[data-icon=x]{animation:none;transform:rotate(90deg) scale(1.12)}
.tb-ico:hover svg[data-icon=log-out],.btn:hover svg[data-icon=log-in]{animation:none;transform:translateX(3px) scale(1.08)}
.btn:hover svg[data-icon=refresh-cw],.btn:hover svg[data-icon=rotate-cw],.btn:hover svg[data-icon=rotate-ccw]{animation:icoSpin .8s var(--ease)}
.btn:hover svg[data-icon=trash-2]{animation:icoShake .5s var(--ease)}
.btn:hover svg[data-icon=send],.btn:hover svg[data-icon=upload],.btn:hover svg[data-icon=upload-cloud]{animation:none;transform:translate(2px,-2px) scale(1.08)}
.btn:hover svg[data-icon=save],.btn:hover svg[data-icon=check]{animation:icoStamp .45s var(--ease)}
.btn:hover svg[data-icon=download]{animation:none;transform:translateY(2px) scale(1.08)}
@keyframes icoBreathe{50%{transform:translateY(-1.6px)}}
@keyframes icoRing{0%,86%,100%{transform:none}88%{transform:rotate(13deg)}91%{transform:rotate(-10deg)}94%{transform:rotate(6deg)}97%{transform:rotate(-3deg)}}
@keyframes icoPeek{0%,88%,100%{transform:none}91%{transform:translate(1.6px,-1.6px) rotate(-9deg)}95%{transform:translate(-1px,.6px) rotate(4deg)}}
@keyframes icoTinker{0%,80%,100%{transform:none}86%{transform:rotate(28deg)}93%{transform:rotate(12deg)}}
@keyframes icoGuard{0%,100%{transform:scale(1)}50%{transform:scale(1.06);filter:drop-shadow(0 0 5px currentColor)}}
@keyframes icoScan{0%,100%{opacity:.82;transform:scale(.97)}50%{opacity:1;transform:scale(1.05)}}
@keyframes icoSpark{0%,90%,100%{opacity:1}92%{opacity:.35}94%{opacity:1}96%{opacity:.55}98%{opacity:1}}
@keyframes icoBlink{0%,91%,100%{transform:scaleY(1)}94%{transform:scaleY(.12)}97%{transform:scaleY(1)}}
@keyframes icoTick{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes icoSpin{to{transform:rotate(360deg)}}
@keyframes icoShake{25%{transform:rotate(-8deg)}55%{transform:rotate(7deg)}80%{transform:rotate(-3deg)}}
@keyframes icoStamp{40%{transform:translateY(2px) scale(.92)}70%{transform:translateY(-1px) scale(1.06)}}
@media(prefers-reduced-motion:reduce){svg[data-icon]{animation:none!important;transform:none!important}.brand-shell{animation:none!important}}