/* ===== Premium navbar — floating glass pill, sliding indicator, animated burger, full-screen mobile menu ===== */
.nav{position:sticky;top:0;z-index:60;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding:12px 14px 0;pointer-events:none;box-shadow:none!important;transition:padding .45s cubic-bezier(.22,1,.36,1)}
.nav.scrolled{background:none;padding-top:8px}
.nav .wrap{pointer-events:auto;position:relative;max-width:1120px;height:64px;padding:0 10px 0 18px;gap:14px;border-radius:99px;
  background:rgba(12,14,22,.55);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid rgba(255,255,255,.09);box-shadow:0 18px 50px -24px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.025) inset;
  animation:navDrop .9s cubic-bezier(.22,1,.36,1) both;transition:height .45s cubic-bezier(.22,1,.36,1),max-width .45s cubic-bezier(.22,1,.36,1),background .4s,box-shadow .4s}
.nav.scrolled .wrap{height:54px;max-width:960px;background:rgba(9,10,17,.82);box-shadow:0 24px 60px -22px rgba(0,0,0,1),0 0 40px -18px var(--a1)}
@keyframes navDrop{from{opacity:0;transform:translateY(-26px) scale(.96);filter:blur(8px)}}
/* glowing hairline on the top edge */
.nav .wrap::before{content:"";position:absolute;left:12%;right:12%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--a2),var(--a1),transparent);opacity:.55;pointer-events:none}

.nav-links{position:relative;gap:2px;margin-left:auto;padding:4px;border-radius:99px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.05)}
.nav-links a{position:relative;z-index:1;padding:8px 16px;background:none!important;color:#a9b0c6;font-weight:500;transition:color .3s}
.nav-links a::after{display:none}
.nav-links a:hover,.nav-links a.on{color:#fff}
.nav-ind{position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:0;border-radius:99px;opacity:0;pointer-events:none;
  background:linear-gradient(120deg,rgba(124,92,255,.38),rgba(0,212,255,.26));border:1px solid rgba(255,255,255,.14);box-shadow:0 6px 22px -8px var(--a1);
  transition:transform .5s cubic-bezier(.22,1,.36,1),width .5s cubic-bezier(.22,1,.36,1),opacity .3s}
.nav-ind.show{opacity:1}

.nav .btn-offer{position:relative;overflow:hidden}
.nav .btn-offer::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-130%);animation:shine 3.6s 1.2s infinite}

/* burger -> X */
.burger{position:relative;width:44px;height:44px;border-radius:50%;padding:0;font-size:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);transition:background .3s,transform .3s}
.burger:active{transform:scale(.92)}
.burger i{position:absolute;left:13px;right:13px;height:2px;border-radius:2px;background:#fff;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .25s,top .45s cubic-bezier(.22,1,.36,1)}
.burger i:nth-child(1){top:15px}.burger i:nth-child(2){top:21px}.burger i:nth-child(3){top:27px}
.burger.open{background:linear-gradient(135deg,var(--a1),var(--a2));border-color:transparent}
.burger.open i:nth-child(1){top:21px;transform:rotate(45deg)}
.burger.open i:nth-child(2){opacity:0;transform:scaleX(0)}
.burger.open i:nth-child(3){top:21px;transform:rotate(-45deg)}

@media(max-width:860px){
  .nav{padding:10px 10px 0}
  /* backdrop-filter would make .wrap the containing block of the fixed full-screen menu, so drop it on mobile */
  .nav .wrap,.nav.scrolled .wrap{height:58px;padding:0 8px 0 14px;max-width:none;backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(10,12,20,.92);animation:none}
  .nav.scrolled .wrap{height:52px}
  .burger{display:block;margin-left:auto;position:relative;z-index:80}
  .nav .btn-offer{display:none}
  .nav-ind{display:none}
  /* full-screen menu */
  .nav-links{position:fixed;inset:0;z-index:70;margin:0;padding:96px 28px 40px;border-radius:0;border:0;flex-direction:column;justify-content:center;gap:6px;
    background:radial-gradient(900px 500px at 80% 0%,rgba(124,92,255,.32),transparent 60%),radial-gradient(700px 500px at 0% 100%,rgba(0,212,255,.2),transparent 60%),rgba(7,8,13,.96);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);display:flex;pointer-events:none;opacity:0;visibility:hidden;clip-path:circle(0% at calc(100% - 38px) 38px);
    transition:clip-path .7s cubic-bezier(.22,1,.36,1),opacity .35s,visibility 0s .7s}
  .nav-links.open{pointer-events:auto;opacity:1;visibility:visible;clip-path:circle(150% at calc(100% - 38px) 38px);transition:clip-path .8s cubic-bezier(.22,1,.36,1),opacity .3s,visibility 0s}
  .nav-links a{font-family:var(--head);font-size:clamp(30px,9vw,44px);font-weight:700;color:#fff;padding:12px 6px;border-radius:14px;border-bottom:1px solid rgba(255,255,255,.07);
    opacity:0;transform:translateY(28px);transition:opacity .5s,transform .7s cubic-bezier(.22,1,.36,1),color .3s}
  .nav-links.open a{opacity:1;transform:none;transition-delay:calc(var(--i)*.07s + .22s)}
  .nav-links a.on{background:linear-gradient(90deg,var(--a1),var(--a2));-webkit-background-clip:text!important;background-clip:text!important;color:transparent}
  .nav-links .nav-cta{display:inline-flex!important;justify-content:center;margin-top:22px;border:0;font-size:17px;font-family:inherit;padding:15px 24px;color:#fff;
    background:linear-gradient(120deg,var(--a1),var(--a2))!important;border-radius:99px;box-shadow:0 18px 40px -14px var(--a1)}
  body.nav-open{overflow:hidden}
}
@media(min-width:861px){.nav-links .nav-cta{display:none}}
@media(prefers-reduced-motion:reduce){.nav .wrap,.nav .btn-offer::after{animation:none!important}.nav-links,.nav-links a,.nav-ind{transition:none!important}}