/* fx.css - progress bar, active nav, dot network, icons, steps line, tilt */
.mx-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:9997;pointer-events:none}
.mx-progress i{display:block;height:100%;width:0;border-radius:0 2px 2px 0;background:linear-gradient(90deg,var(--teal-700,#0E6E6A),var(--teal-500,#159A93) 55%,var(--coral-500,#E8776F));box-shadow:0 0 10px rgba(232,119,111,.5)}
header.mx-scrolled{box-shadow:0 10px 34px -22px rgba(8,61,59,.55)}
.nav-links a{position:relative;transition:color .2s ease}
.nav-links a.mx-active{color:var(--teal-700,#0E6E6A)}
.nav-links a.mx-active::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--teal-500,#159A93),var(--coral-500,#E8776F));animation:mx-grow .35s cubic-bezier(.2,.8,.2,1)}
@keyframes mx-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero{isolation:isolate}
.mx-canvas{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.8;display:block;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent)}
/* tilt owns transform while hovered; replaces the CSS hover lift on these */
.mx-tilt{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease!important}
.card.mx-tilt:hover{transform:none}
.mx-spot{background-image:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(21,154,147,.13),transparent 70%)!important}
.tool.mx-spot{background-image:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.12),transparent 70%)!important}
html.mx-ready .mx-draw svg{stroke-dasharray:120;stroke-dashoffset:120}
html.mx-ready .mx-draw.mx-in svg{stroke-dashoffset:0;transition:stroke-dashoffset 1s cubic-bezier(.3,.7,.2,1) .1s}
.steps{position:relative}
.mx-steps-line{position:absolute;top:28px;left:12.5%;right:12.5%;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--teal-500,#159A93),var(--coral-500,#E8776F));transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s cubic-bezier(.35,0,.2,1);box-shadow:0 0 10px rgba(232,119,111,.35)}
.mx-steps-line.mx-in{transform:scaleX(1)}
html.mx-ready .step .dot{opacity:0;transform:scale(.55)}
html.mx-ready .step .dot.mx-in{opacity:1;transform:none;transition:opacity .45s ease,transform .6s cubic-bezier(.2,1.5,.4,1)}
@media (max-width:960px){.mx-steps-line{display:none}}
@media (prefers-reduced-motion:reduce){.mx-progress,.mx-canvas{display:none}.mx-steps-line{transform:scaleX(1)}}