/* ==========================================================================
   Movezle premium UI layer (additive — nothing in the pages is removed)
   1 tokens · 2 glossy header + mega menu · 3 section rhythm · 4 surfaces · 5 buttons · 6 motion
   ========================================================================== */
:root{
  --mz-sec:clamp(64px,7.2vw,112px);      /* one vertical rhythm for every section */
  --mz-gut:clamp(20px,3vw,32px);
  --mz-max:1200px;
  --mz-ink:#050d1f; --mz-navy:#071c3b; --mz-navy2:#0b2246;
  --mz-sky:#4fc3f7; --mz-blue:#2f6bff; --mz-text:#eaf1fb; --mz-mute:#9fb6d4;
  --mz-line:rgba(255,255,255,.09);
  --mz-ease:cubic-bezier(.2,.8,.2,1);
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ================= 2. GLOSSY HEADER + MEGA MENU ================= */
/* the original nav stays in the markup; the premium bar replaces it visually */
.mzh-on .cnav,.mzh-on .pnav,.mzh-on .menuT{display:none!important}
.mzh{position:fixed;top:14px;left:0;right:0;z-index:1000;pointer-events:none;font-family:Inter,system-ui,sans-serif}
.mzh *{box-sizing:border-box}
.mzh-bar{pointer-events:auto;position:relative;margin:0 auto;width:min(1200px,calc(100% - 28px));height:64px;display:flex;align-items:center;gap:8px;padding:0 10px 0 14px;border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 46%,rgba(255,255,255,.03)),rgba(8,20,48,.70);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.17);
  box-shadow:0 20px 50px rgba(2,8,24,.50),inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(255,255,255,.05);
  transition:background .35s,box-shadow .35s,height .3s var(--mz-ease),border-color .3s;animation:mzhin .8s var(--mz-ease) both}
@keyframes mzhin{from{opacity:0;transform:translateY(-22px) scale(.98)}to{opacity:1;transform:none}}
.mzh-bar::before{ /* gloss sheen that follows the pointer */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px 90px at var(--gx,30%) 0,rgba(255,255,255,.20),transparent 70%),linear-gradient(115deg,transparent 30%,rgba(255,255,255,.07) 46%,transparent 62%);opacity:.9}
.mzh-bar::after{ /* hairline gradient edge */
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1px;
  background:linear-gradient(135deg,rgba(79,195,247,.55),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 70%,rgba(47,107,255,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.8}
.mzh.scrolled .mzh-bar{height:58px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03)),rgba(6,16,40,.86);box-shadow:0 14px 40px rgba(2,8,24,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.mzh-bar.mega{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent}
.mzh-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;margin-right:6px;flex:none;position:relative;z-index:1}
.mzh-brand video{width:36px;height:36px;border-radius:10px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 6px 16px rgba(47,107,255,.35)}
.mzh-brand span{font:800 19px/1 Inter,sans-serif;letter-spacing:.01em}
.mzh-nav{display:flex;align-items:center;gap:2px;margin:0 auto;position:relative;z-index:1}
.mzh-l,.mzh-t{position:relative;display:inline-flex;align-items:center;gap:5px;height:40px;padding:0 13px;border-radius:12px;border:0;background:transparent;cursor:pointer;
  font:600 13.5px/1 Inter,sans-serif;color:#dbe7fa;text-decoration:none;white-space:nowrap;transition:background .22s,color .22s}
.mzh-l:hover,.mzh-t:hover,.mzh-t.open{background:rgba(255,255,255,.09);color:#fff}
.mzh-l.on,.mzh-t.on{color:#fff;background:linear-gradient(180deg,rgba(79,195,247,.22),rgba(47,107,255,.14));box-shadow:inset 0 0 0 1px rgba(79,195,247,.35)}
.mzh-t svg{width:14px;height:14px;transition:transform .25s var(--mz-ease)}.mzh-t.open svg{transform:rotate(180deg)}
.mzh-l:focus-visible,.mzh-t:focus-visible,.mzh-cta:focus-visible,.mzm-i:focus-visible,.mzm-f:focus-visible,.mzh-burger:focus-visible{outline:2px solid #4fc3f7;outline-offset:2px}
.mzh-r{display:flex;align-items:center;gap:8px;flex:none;position:relative;z-index:1}
.mzh-cta{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:13px;color:#fff;text-decoration:none;font:700 13.5px/1 Inter,sans-serif;
  background:linear-gradient(180deg,#5aa2ff 0%,#2f6bff 52%,#1d4fe0 100%);box-shadow:0 10px 24px rgba(47,107,255,.45),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,0,0,.18);
  transition:transform .25s var(--mz-ease),box-shadow .25s;position:relative;overflow:hidden}
.mzh-cta::after{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:mzshine 4.5s ease-in-out infinite}
@keyframes mzshine{0%,60%{left:-70%}100%{left:130%}}
.mzh-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(47,107,255,.6),inset 0 1px 0 rgba(255,255,255,.55)}
.mzh-cta svg{width:16px;height:16px;transition:transform .25s}.mzh-cta:hover svg{transform:translateX(3px)}
.mzh-burger{display:none;width:44px;height:44px;border:0;border-radius:13px;background:rgba(255,255,255,.08);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.mzh-burger i{display:block;width:20px;height:2px;border-radius:2px;background:#fff;transition:transform .3s var(--mz-ease),opacity .2s}
.mzh-burger.open i:nth-child(1){transform:translateY(7px) rotate(45deg)}.mzh-burger.open i:nth-child(2){opacity:0}.mzh-burger.open i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mega panel */
.mzm{position:absolute;left:-1px;right:-1px;top:100%;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .24s,transform .3s var(--mz-ease),visibility 0s .3s;
  border-radius:0 0 22px 22px;border:1px solid rgba(255,255,255,.17);border-top:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),rgba(6,16,40,.94);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
  box-shadow:0 40px 80px rgba(2,8,24,.65),inset 0 -1px 0 rgba(255,255,255,.06);overflow:hidden}
.mzm.open{opacity:1;visibility:visible;transform:none;transition:opacity .24s,transform .3s var(--mz-ease),visibility 0s}
.mzm-in{display:grid;grid-template-columns:1fr minmax(260px,330px);gap:22px;padding:24px 24px 26px}
.mzm-cols{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:26px}
.mzm-h{font:700 11px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#6f8db8;margin:2px 0 12px 8px}
.mzm-g{display:grid;gap:4px}
.mzm-i{display:flex;align-items:center;gap:13px;padding:10px 12px;border-radius:14px;text-decoration:none;color:#fff;border:1px solid transparent;
  opacity:0;transform:translateY(6px);transition:background .2s,border-color .2s,transform .3s var(--mz-ease),opacity .3s}
.mzm.open .mzm-i{opacity:1;transform:none;transition-delay:calc(var(--n)*34ms + 40ms)}
.mzm-i:hover{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border-color:rgba(79,195,247,.28);transform:translateX(3px)}
.mzm-ic{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;color:#7fd3ff;
  background:linear-gradient(160deg,rgba(79,195,247,.22),rgba(47,107,255,.12));box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 14px rgba(0,0,0,.25)}
.mzm-ic svg{width:20px;height:20px}
.mzm-tx{display:flex;flex-direction:column;gap:4px;min-width:0}
.mzm-tx b{font:700 14px/1.15 Inter,sans-serif}.mzm-tx small{font:400 12.5px/1.35 Inter,sans-serif;color:#9fb6d4}
.mzm-f{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:280px;border-radius:18px;overflow:hidden;text-decoration:none;color:#fff;isolation:isolate;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 44px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.2)}
.mzm-fi{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transition:transform .8s var(--mz-ease)}
.mzm-f:hover .mzm-fi{transform:scale(1.06)}
.mzm-f::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,13,31,.10) 0%,rgba(5,13,31,.55) 55%,rgba(5,13,31,.92) 100%)}
.mzm-ft{display:flex;flex-direction:column;gap:7px;padding:18px}
.mzm-ft em{font:700 10.5px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;font-style:normal;color:#7fd3ff}
.mzm-ft b{font:800 20px/1.2 Inter,sans-serif}.mzm-ft small{font:400 12.5px/1.45 Inter,sans-serif;color:#c9d8ef}
.mzm-fc{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font:700 13px/1 Inter,sans-serif;color:#fff}
.mzm-fc svg{width:16px;height:16px;transition:transform .25s}.mzm-f:hover .mzm-fc svg{transform:translateX(5px)}
/* dim page behind open menu */
body.mzh-dim::before{content:"";position:fixed;inset:0;z-index:999;background:rgba(2,6,18,.46);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:mzfade .25s both}
@keyframes mzfade{from{opacity:0}to{opacity:1}}

/* tablet: tighter bar */
@media (max-width:1240px){.mzh-l,.mzh-t{padding:0 10px;font-size:13px}.mzh-cta span{display:none}.mzh-cta{padding:0 14px}}
/* mobile drawer */
@media (max-width:980px){
  .mzh{top:10px}.mzh-bar{height:58px;border-radius:18px}.mzh-nav{display:none}.mzh-r{margin-left:auto}.mzh-burger{display:flex}
  .mzh-cta{display:none}
  .mzm{display:none}
}
.mzd{display:none}
@media (max-width:980px){
  .mzd{display:block;position:fixed;inset:0;top:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .25s;background:rgba(3,9,24,.97);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:84px 18px 28px;overflow-y:auto}
  .mzd.open{pointer-events:auto;opacity:1}
  .mzd-in{display:flex;flex-direction:column;gap:6px;max-width:520px;margin:0 auto}
  .mzd-l,.mzd-b{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 16px;border-radius:14px;border:1px solid var(--mz-line);background:rgba(255,255,255,.04);color:#fff;text-decoration:none;font:700 16px/1 Inter,sans-serif;cursor:pointer}
  .mzd-b svg{width:18px;height:18px;transition:transform .25s}.mzd-g.open .mzd-b svg{transform:rotate(180deg)}
  .mzd-p{display:grid;gap:2px;max-height:0;overflow:hidden;transition:max-height .35s var(--mz-ease)}
  .mzd-g.open .mzd-p{max-height:640px;padding:6px 0 4px}
  .mzd-p a{display:flex;align-items:center;gap:12px;padding:10px 12px;color:#dbe7fa;text-decoration:none;font:600 14.5px/1.2 Inter,sans-serif;border-radius:12px}
  .mzd-p a:active{background:rgba(255,255,255,.07)}
  .mzd-cta{margin-top:12px;height:52px;justify-content:center;font-size:15px;display:inline-flex}
  body.mzd-lock{overflow:hidden}
}

/* ================= 3. SECTION RHYTHM ================= */
/* one vertical spacing scale for every section on every page */
.asec{padding-top:var(--mz-sec)!important;padding-bottom:var(--mz-sec)!important}
.asec .ain,.scn .sin{max-width:var(--mz-max);padding-left:var(--mz-gut);padding-right:var(--mz-gut)}
/* first section under the fixed header leaves room for it, then follows the same scale */
#oshero,#ophero,#find,#pick{padding-top:calc(var(--mz-sec) + 64px)!important}
/* the "solutions band" had zero bottom padding → uneven gap before the CTA */
#solband{padding-bottom:calc(var(--mz-sec) * .6)!important;padding-top:calc(var(--mz-sec) * .6)!important}
#recommended{margin-top:-60px}
.asec + .asec{border-top:1px solid var(--mz-line)}
/* home: scenes move from percentage-positioned boxes to a normal flow so no gaps/overlaps remain */
.design#top .scn{position:relative!important;top:auto!important;height:auto!important;padding-top:var(--mz-sec)!important;padding-bottom:var(--mz-sec)!important;overflow:hidden}
.design#top .scn .sin{height:auto!important}
.design#top .scn + .scn{border-top:1px solid var(--mz-line)}
.design#top{height:auto!important;min-height:0!important}

/* ================= 4. SURFACES (depth instead of flat navy) ================= */
.asec:nth-of-type(odd),.design#top .scn:nth-of-type(odd){background:radial-gradient(900px 420px at 88% 0,rgba(47,107,255,.11),transparent 62%),radial-gradient(700px 380px at 6% 100%,rgba(79,195,247,.06),transparent 60%),var(--mz-navy)!important}
.asec:nth-of-type(even),.design#top .scn:nth-of-type(even){background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0) 40%),radial-gradient(800px 380px at 8% 0,rgba(79,195,247,.07),transparent 60%),var(--mz-navy2)!important}
.asec h2,.scn h3,.scn h2{letter-spacing:-.02em;text-wrap:balance}
.asec .asub,.scn .ssub{color:var(--mz-mute)}
/* glass cards: shared look for the many card types on the site */
.icard,.teamcard,.stepcard,.ccard,.hcard,.s1c,.stp,.dna,.appc,.lvcard,.vsc,.tchip{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025))!important;border:1px solid rgba(255,255,255,.11)!important;
  box-shadow:0 18px 40px rgba(2,8,24,.35),inset 0 1px 0 rgba(255,255,255,.14)!important;border-radius:18px}
.icard:hover,.teamcard:hover,.stepcard:hover,.s1c:hover,.stp:hover,.dna:hover,.appc:hover{border-color:rgba(79,195,247,.38)!important}

/* ================= 5. BUTTONS ================= */
.abtn,.cbtn,.sbtn,.hzBtn,.solbtn,.nbtn{transition:transform .25s var(--mz-ease),box-shadow .25s,filter .25s}
.abtn:hover,.cbtn:hover,.sbtn:hover,.hzBtn:hover,.solbtn:hover{transform:translateY(-3px);filter:brightness(1.06)}
.abtn.blue,.hzBtn.p,.sbtn.p{background:linear-gradient(180deg,#5aa2ff,#2f6bff 55%,#1d4fe0)!important;box-shadow:0 12px 28px rgba(47,107,255,.45),inset 0 1px 0 rgba(255,255,255,.45)!important}

/* ================= 6. MOTION ================= */
/* blocks fade/slide in when they enter and reverse when they leave (toggled by mz-premium.js) */
.mz-js .mz-r{opacity:0;transform:translate3d(0,30px,0);transition:opacity .7s var(--mz-ease),transform .85s var(--mz-ease);transition-delay:var(--rd,0ms);will-change:opacity,transform}
.mz-js .mz-r.mz-in{opacity:1;transform:none}
/* original reveal classes also replay on the way back */
.fx,.fxL,.fxR,.rv{will-change:opacity,transform}
#mzp{position:fixed;left:0;top:0;height:3px;width:100%;z-index:1100;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#4fc3f7,#2f6bff,#8b5cf6);box-shadow:0 0 12px rgba(79,195,247,.7);pointer-events:none}
#homeHero video.bg,.heroWrap video{will-change:transform}
@media (prefers-reduced-motion:reduce){
  .mz-js .mz-r{opacity:1;transform:none;transition:none}
  .mzh-bar,.mzh-cta::after{animation:none}
  #mzp{display:none}
}
@media (max-width:820px){:root{--mz-sec:clamp(48px,11vw,72px)}}

/* ---- home scenes: tidy inner offsets that belonged to the old percentage layout ---- */
.design#top .scn .seye{padding-top:0!important}
.design#top .scn .sin>:first-child{margin-top:0!important}
.design#top #scn6{padding-top:calc(var(--mz-sec)*.45)!important;padding-bottom:calc(var(--mz-sec)*.45)!important}
.design#top .scn:has(.sport){padding:0!important;min-height:clamp(380px,44vw,620px);display:flex;align-items:center}
.design#top .scn:has(.sport) .sport{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none}
.design#top .scn:has(.sport) .sportxt{position:relative;right:auto;top:auto;margin:0 6% 0 auto;max-width:min(46%,560px);z-index:2}
.design#top .scn:has(.sport)::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(7,28,59,0) 20%,rgba(7,28,59,.78) 100%);pointer-events:none}
@media (max-width:820px){.design#top .scn:has(.sport){flex-direction:column;justify-content:flex-end}.design#top .scn:has(.sport) .sportxt{max-width:none;margin:0;padding:24px var(--mz-gut)}}
/* home: drop the fixed poster aspect-ratio so sections flow */
.design#top{aspect-ratio:auto!important}