/* Zorvex visual effects: transitions, floating robotic decor, namaste thank-you, footer robot */
@keyframes zxfl{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(6deg)}}
@keyframes zxsp{to{transform:rotate(360deg)}}
@keyframes zxtw{0%,100%{opacity:.35;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
@keyframes zxout{from{transform:none}to{transform:translateY(101%)}}
@keyframes zxin{from{transform:translateY(-101%)}to{transform:none}}
@keyframes zxmain{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* page transition (robot wipe) */
html::before,html::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;transform:translateY(-101%);
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80'%3E%3Crect x='16' y='8' width='68' height='54' rx='20' fill='%23fff' stroke='%2316C7B5' stroke-width='5'/%3E%3Crect x='25' y='18' width='50' height='34' rx='13' fill='%230B1F4B'/%3E%3Ccircle cx='39' cy='35' r='5' fill='%2316C7B5'/%3E%3Ccircle cx='61' cy='35' r='5' fill='%2316C7B5'/%3E%3Cline x1='50' y1='8' x2='50' y2='1' stroke='%23FF8A1F' stroke-width='4'/%3E%3C/svg%3E") center/86px no-repeat,linear-gradient(135deg,#0B1F4B 0 72%,#16C7B5 72% 100%)}
html.zxe::before{transform:none;animation:zxout .42s .06s cubic-bezier(.7,0,.3,1) both}
html.zxl::after{animation:zxin .24s cubic-bezier(.7,0,.3,1) both}
main{animation:zxmain .5s ease both}

/* scroll rider */
.zx-rider{position:fixed;top:5px;left:0;width:26px;height:22px;z-index:121;pointer-events:none;transform:translateX(calc((100vw - 26px)*var(--p,0)));will-change:transform}
.zx-rider svg{width:26px;height:22px;display:block;filter:drop-shadow(0 2px 0 rgba(11,31,75,.25));animation:zxfl 1.6s ease-in-out infinite}

/* floating decor in heroes */
.zx-deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hero>.wrap,.page-hero>.wrap,.cta-band>.wrap{position:relative;z-index:1}
.hero,.page-hero,.cta-band{position:relative}
.zx-deco>span{position:absolute;display:block;transform:translate(calc(var(--mx,0)*var(--k,10)*1px),calc(var(--my,0)*var(--k,10)*1px));transition:transform .25s ease-out}
.zx-deco svg{display:block;width:100%;height:auto;animation:zxfl var(--d,6s) ease-in-out infinite;animation-delay:var(--dl,0s)}
.zx-deco .gear svg{animation:zxsp 18s linear infinite}
.zx-deco .tw svg{animation:zxtw 3.4s ease-in-out infinite;animation-delay:var(--dl,0s)}
@media(max-width:700px){.zx-deco{opacity:.4}.zx-deco>span:nth-child(n+5){display:none}}
.hero-art{transform:translate(calc(var(--mx,0)*-8px),calc(var(--my,0)*-6px));transition:transform .3s ease-out}

/* circuit-dot backdrop on dark sections + cta */
section.dark,.cta-band{background-image:radial-gradient(rgba(22,199,181,.2) 1.4px,transparent 1.5px);background-size:26px 26px;animation:zxgrid 30s linear infinite}
@keyframes zxgrid{to{background-position:260px 130px}}

/* how-we-work journey */
.zx-journey{background:linear-gradient(180deg,#fff,var(--pale));padding:clamp(40px,6vw,76px) 0;overflow:hidden}
.zx-j{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.zx-j::before{content:"";position:absolute;left:12%;right:12%;top:48px;border-top:5px dashed var(--teal);opacity:.6}
.zx-j .b{position:absolute;left:12%;top:20px;width:44px;height:36px;animation:zxwalk 7s ease-in-out infinite;z-index:2}
@keyframes zxwalk{0%{left:10%}45%,55%{left:84%}100%{left:10%}}
.zx-j .b svg{width:44px;animation:zxfl 1.2s ease-in-out infinite}
.zx-js{position:relative;text-align:center;background:#fff;border:var(--bd);border-radius:var(--r);box-shadow:var(--sh-s);padding:54px 16px 20px;margin-top:20px}
.zx-js i{position:absolute;left:50%;top:-22px;transform:translateX(-50%);width:54px;height:54px;border-radius:50%;background:var(--orange);border:var(--bd);display:grid;place-items:center;font:800 1.3rem var(--hd);color:var(--navy);font-style:normal}
.zx-js:nth-child(odd) i{background:var(--teal)}
.zx-js h3{margin:0 0 6px;font-size:1.1rem}.zx-js p{margin:0;color:var(--mute);font-size:.94rem}
@media(max-width:860px){.zx-j{grid-template-columns:1fr 1fr}.zx-j::before,.zx-j .b{display:none}}
@media(max-width:520px){.zx-j{grid-template-columns:1fr}}

/* click sparks */
.zx-spark{position:fixed;z-index:9998;width:9px;height:9px;border-radius:2px;pointer-events:none;background:var(--c,#FF8A1F);animation:zxspark .6s ease-out forwards}
@keyframes zxspark{from{transform:translate(0,0) rotate(0) scale(1);opacity:1}to{transform:translate(var(--x),var(--y)) rotate(200deg) scale(.2);opacity:0}}

/* footer peeking robot */
footer{position:relative}
.zx-peek{position:absolute;right:7%;top:-54px;width:86px;z-index:3;cursor:pointer;background:none;border:0;padding:0}
.zx-peek svg{display:block;width:100%;animation:zxpeek 5s ease-in-out infinite}
@keyframes zxpeek{0%,100%{transform:translateY(8px)}50%{transform:translateY(0)}}
.zx-peek .say{position:absolute;right:92px;top:2px;white-space:nowrap;background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:14px;padding:6px 12px;font:700 .85rem var(--bd-f);opacity:0;transform:translateX(8px);transition:.25s;pointer-events:none}
.zx-peek:hover .say,.zx-peek.hi .say{opacity:1;transform:none}
@media(max-width:560px){.zx-peek{width:68px;right:4%;top:-42px}.zx-peek .say{right:72px}}

/* NAMASTE thank-you */
.zx-nam{position:fixed;inset:0;z-index:600;display:grid;place-items:center;background:rgba(11,31,75,.72);padding:16px;opacity:0;animation:zxfade .3s ease forwards}
.zx-nam.out{animation:zxfadeo .3s ease forwards}
@keyframes zxfade{to{opacity:1}}@keyframes zxfadeo{from{opacity:1}to{opacity:0}}
.zx-nam{overflow:hidden;background:radial-gradient(ellipse at 50% 38%,#1b3a80 0%,#0B1F4B 52%,#040b20 100%)}
.zx-nam::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(127,245,230,.06) 0 1px,transparent 1px 46px),repeating-linear-gradient(90deg,rgba(127,245,230,.06) 0 1px,transparent 1px 46px);-webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 75%);mask-image:radial-gradient(circle at 50% 40%,#000,transparent 75%)}
.zx-nam .nmsv{position:absolute;left:50%;top:39%;transform:translate(-50%,-50%);width:min(max(860px,100vw),1500px,150vh);max-width:none;height:auto;overflow:visible}
.zx-nam .t{position:absolute;left:0;right:0;bottom:max(3vh,18px);text-align:center;padding:0 18px;color:#fff}
.zx-nam h3{margin:0;font-size:clamp(1.7rem,4.2vw,2.6rem);color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.35)}
.zx-nam .hi{font:700 clamp(1.15rem,2.6vw,1.6rem) var(--hd);color:var(--orange);margin:2px 0 6px}
.zx-nam p{margin:0 auto 14px;max-width:34ch;color:#cfe0ff;font-size:1rem}
.zx-nam .aL{animation:zxinL 1.35s cubic-bezier(.22,.8,.3,1) .12s both}
.zx-nam .aR{animation:zxinR 1.35s cubic-bezier(.22,.8,.3,1) .12s both}
@keyframes zxinL{0%{transform:translateX(-1350px)}72%{transform:translateX(10px)}100%{transform:none}}
@keyframes zxinR{0%{transform:translateX(1350px)}72%{transform:translateX(-10px)}100%{transform:none}}
.zx-nam .hands{animation:zxbow 1.3s ease-in-out 1.5s both}
@keyframes zxbow{0%,100%{transform:none}45%{transform:translateY(16px)}}
.zx-nam .glow{opacity:0;animation:zxglow 2.4s ease-in-out .9s infinite alternate}
@keyframes zxglow{from{opacity:.35;transform:scale(.92)}to{opacity:.95;transform:scale(1.06)}}
.zx-nam .glow,.zx-nam .rg,.zx-nam .fl{transform-box:fill-box;transform-origin:center}
.zx-nam .fl{opacity:0;animation:zxflash .9s ease-out .95s both}
@keyframes zxflash{0%{opacity:0;transform:scale(.3)}25%{opacity:1}100%{opacity:0;transform:scale(1.7)}}
.zx-nam .rg{opacity:0;animation:zxring 1.3s ease-out .98s both}.zx-nam .rg.r2{animation-delay:1.2s}
@keyframes zxring{0%{transform:scale(.3);opacity:0}8%{opacity:.95}100%{transform:scale(4.2);opacity:0}}
.zx-nam .sp{transform-box:fill-box;transform-origin:center;opacity:0;animation:zxsp 1.5s ease-out both}
@keyframes zxsp{0%{opacity:0;transform:translate(0,0) scale(0)}30%{opacity:1;transform:translate(calc(var(--dx)*.6),calc(var(--dy)*.6)) scale(1.2) rotate(70deg)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.7) rotate(140deg)}}
.zx-nam .core{animation:zxcore 1.2s ease-in-out infinite alternate}
@keyframes zxcore{from{opacity:.4}to{opacity:1}}
.zx-nam .txt{opacity:0;animation:zxtxt .5s ease 1.3s forwards}.zx-nam .txt2{opacity:0;animation:zxtxt .5s ease 1.6s forwards}
@keyframes zxtxt{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
 html::before,html::after{display:none}main{animation:none}.zx-rider svg,.zx-deco svg,.zx-peek svg,.zx-j .b,.zx-j .b svg,section.dark,.cta-band{animation:none!important}
 .zx-nam .aL,.zx-nam .aR,.zx-nam .hands,.zx-nam .glow,.zx-nam .rg,.zx-nam .fl,.zx-nam .sp,.zx-nam .core{animation:none!important}.zx-nam .glow{opacity:.7}.zx-nam .txt,.zx-nam .txt2{animation:none;opacity:1}
}

/* v2 cleanups: no rider over the nav; no floating decor over text on phones */
.zx-rider{display:none!important}
@media(max-width:700px){.zx-deco{display:none!important}}