/* Premium floating navigation */
.vSite{overflow:clip}
.vNav{
  position:sticky;
  top:14px;
  width:min(calc(100% - 28px),1540px);
  height:76px;
  margin:14px auto;
  padding:0 15px 0 20px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:24px;
  background:linear-gradient(115deg,rgba(255,255,255,.91),rgba(255,249,242,.84) 55%,rgba(241,247,255,.91));
  box-shadow:0 18px 55px rgba(31,29,78,.14),inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(24px) saturate(145%);
  -webkit-backdrop-filter:blur(24px) saturate(145%);
  isolation:isolate;
}
.vNav:before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-1px;
  padding:1px;
  border-radius:inherit;
  background:linear-gradient(105deg,#3156ff,#20d6df,#ffcb55,#ff4f91,#795cff,#3156ff);
  background-size:300% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.68;
  pointer-events:none;
  animation:navBorderFlow 8s linear infinite;
}
.vBrand{position:relative;flex:0 0 auto;border-radius:16px}
.vLogo>i{position:relative;overflow:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease}
.vLogo>i:after{content:"";position:absolute;inset:-40%;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.75),transparent 65%);transform:translateX(-120%) rotate(18deg);transition:transform .7s ease}
.vBrand:hover .vLogo>i{transform:translateY(-3px) rotate(-7deg) scale(1.06);box-shadow:0 15px 32px rgba(49,86,255,.42)}
.vBrand:hover .vLogo>i:after{transform:translateX(120%) rotate(18deg)}
.vLogo b{transition:letter-spacing .35s ease,color .35s ease}
.vBrand:hover .vLogo b{color:#3156ff;letter-spacing:.125em}
.vNav nav{
  gap:6px;
  padding:6px;
  border:1px solid rgba(37,36,79,.07);
  border-radius:999px;
  background:rgba(255,255,255,.58);
  box-shadow:inset 0 1px 0 #fff,0 8px 24px rgba(49,42,104,.06);
}
.vNav nav a{
  --menu-color:#3156ff;
  position:relative;
  z-index:1;
  padding:10px 15px;
  border-radius:999px;
  color:#3f3d59;
  line-height:1;
  transition:color .3s ease,transform .35s cubic-bezier(.2,.8,.2,1),text-shadow .3s ease;
}
.vNav nav a:nth-child(2){--menu-color:#8c45ea}
.vNav nav a:nth-child(3){--menu-color:#ef8c2f}
.vNav nav a:nth-child(4){--menu-color:#16a77d}
.vNav nav a:before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  border-radius:inherit;
  background:color-mix(in srgb,var(--menu-color) 13%,white);
  box-shadow:0 8px 20px color-mix(in srgb,var(--menu-color) 20%,transparent);
  opacity:0;
  transform:scale(.72);
  transition:opacity .3s ease,transform .4s cubic-bezier(.18,.85,.25,1.25);
}
.vNav nav a:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:3px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--menu-color);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--menu-color) 35%,transparent);
  opacity:0;
  transform:translateX(-50%) scale(0);
  transition:.3s ease;
}
.vNav nav a:hover{color:var(--menu-color);transform:translateY(-2px);text-shadow:0 0 18px color-mix(in srgb,var(--menu-color) 24%,transparent)}
.vNav nav a:hover:before{opacity:1;transform:scale(1)}
.vNav nav a:hover:after{opacity:1;transform:translateX(-50%) scale(1);box-shadow:0 0 0 5px color-mix(in srgb,var(--menu-color) 10%,transparent)}
.vCall{
  position:relative;
  overflow:hidden;
  flex:0 0 auto;
  padding:13px 19px;
  border:0;
  color:#fff;
  background:linear-gradient(125deg,#3156ff,#7347df 55%,#d44dca);
  background-size:180% 100%;
  box-shadow:0 12px 28px rgba(71,68,210,.28);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,background-position .5s ease;
}
.vCall:after{content:"";position:absolute;top:-80%;bottom:-80%;left:-36%;width:26%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);transform:rotate(18deg);transition:left .7s ease}
.vCall:hover{transform:translateY(-3px) scale(1.025);background-position:100% 50%;box-shadow:0 17px 38px rgba(71,68,210,.38)}
.vCall:hover:after{left:118%}
.vCall span{display:inline-block;color:#69ffc0;text-shadow:0 0 12px #69ffc0;animation:callPulse 1.8s ease-in-out infinite}
.vMenu{position:relative;width:46px;height:46px;border-radius:15px!important;color:#fff!important;background:linear-gradient(145deg,#3156ff,#8a48e8)!important;box-shadow:0 10px 24px rgba(69,67,206,.28);transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease!important}
.vMenu:hover{transform:translateY(-2px) rotate(4deg);box-shadow:0 15px 30px rgba(69,67,206,.38)}
.vMenu.isOpen{transform:rotate(90deg);background:linear-gradient(145deg,#ff5b7d,#ff8b49)!important}
@keyframes navBorderFlow{to{background-position:300% 0}}
@keyframes callPulse{0%,100%{opacity:.75;transform:scale(.82)}50%{opacity:1;transform:scale(1.2)}}

@media(min-width:901px){
  .vNav nav a{opacity:0;animation:menuItemIn .55s cubic-bezier(.2,.8,.2,1) forwards}
  .vNav nav a:nth-child(1){animation-delay:.25s}
  .vNav nav a:nth-child(2){animation-delay:.34s}
  .vNav nav a:nth-child(3){animation-delay:.43s}
  .vNav nav a:nth-child(4){animation-delay:.52s}
  @keyframes menuItemIn{from{opacity:0;transform:translateY(-12px) scale(.88)}to{opacity:1;transform:none}}
}

@media(max-width:900px){
  .vNav{top:8px;width:calc(100% - 16px);height:64px;margin:8px auto;padding:0 9px 0 13px;border-radius:20px}
  .vLogo>i{width:39px;height:39px;border-radius:13px}
  .vLogo b{font-size:15px}
  .vLogo small{font-size:7px;margin-top:5px}
  .vMenu{display:grid;place-items:center;margin-left:auto;border:0;font-size:23px;line-height:1}
  .vNav nav{
    display:flex;
    visibility:hidden;
    pointer-events:none;
    position:absolute;
    top:72px;
    left:0;
    right:0;
    margin:0;
    gap:7px;
    padding:12px;
    border-radius:21px;
    flex-direction:column;
    background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(248,245,255,.96));
    box-shadow:0 24px 65px rgba(31,28,91,.25);
    opacity:0;
    transform:translateY(-14px) scale(.96);
    transform-origin:top center;
    transition:opacity .32s ease,transform .42s cubic-bezier(.2,.8,.2,1),visibility .32s;
  }
  .vNav nav.open{display:flex;visibility:visible;pointer-events:auto;opacity:1;transform:none}
  .vNav nav a{width:100%;padding:15px 17px;font-size:14px;opacity:0;transform:translateX(-14px);transition:opacity .3s ease,transform .35s ease,color .3s ease}
  .vNav nav.open a{opacity:1;transform:none}
  .vNav nav.open a:nth-child(1){transition-delay:.07s}
  .vNav nav.open a:nth-child(2){transition-delay:.12s}
  .vNav nav.open a:nth-child(3){transition-delay:.17s}
  .vNav nav.open a:nth-child(4){transition-delay:.22s}
  .vNav nav a:before{border-radius:13px;transform:scale(.92)}
  .vNav nav a:hover:before,.vNav nav a:focus-visible:before{opacity:1;transform:scale(1)}
  .vNav nav a:after{left:auto;right:15px;bottom:50%;transform:translateY(50%) scale(0)}
  .vNav nav a:hover:after,.vNav nav a:focus-visible:after{transform:translateY(50%) scale(1)}
}

@media(prefers-reduced-motion:reduce){
  .vNav:before,.vCall span,.vNav nav a{animation:none!important}
  .vNav nav a{opacity:1}
}
