nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:14px clamp(20px,4vw,48px) 0;transition:padding .4s var(--ease)}
nav.scrolled{padding-top:10px}
.nav-bar{max-width:860px;margin:0 auto;position:relative;display:flex;align-items:center;padding:4px 5px 4px 22px;height:48px;background:rgba(8,8,10,.55);border:1px solid rgba(255,255,255,.08);border-radius:999px;backdrop-filter:blur(48px) saturate(2);-webkit-backdrop-filter:blur(48px) saturate(2);box-shadow:0 4px 24px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.03);transition:all .5s var(--ease)}
nav.scrolled .nav-bar{background:rgba(8,8,10,.55);border-color:rgba(255,255,255,.1);box-shadow:0 8px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.03)}
nav.light .nav-bar{background:rgba(255,255,255,.55);border-color:rgba(0,0,0,.06);box-shadow:0 4px 24px rgba(0,0,0,.05),inset 0 1px 0 rgba(255,255,255,.6)}
.n-l{font-size:15px;font-weight:700;letter-spacing:-.5px;color:var(--w);text-decoration:none;transition:color .3s}
.n-l:hover{color:var(--w)}
nav.light .n-l{color:var(--ltt)}
.nav-mid{display:flex;align-items:center;gap:2px;list-style:none;position:absolute;left:50%;transform:translateX(-50%)}
.nav-mid a{font-size:12.5px;font-weight:500;color:rgba(255,255,255,.4);padding:7px 14px;border-radius:999px;transition:color .25s var(--ease),background .25s var(--ease),transform .2s var(--ease);display:block}
.nav-mid a:hover{color:rgba(255,255,255,.85);background:rgba(255,255,255,.06);transform:scale(1.04)}
.nav-mid a.active{color:var(--w);background:rgba(255,255,255,.08)}
nav.light .nav-mid a{color:rgba(0,0,0,.35)}
nav.light .nav-mid a:hover{color:rgba(0,0,0,.75);background:rgba(0,0,0,.04)}
nav.light .nav-mid a.active{color:var(--ltt);background:rgba(0,0,0,.06)}
.nav-cta{font-size:12px;font-weight:600;color:var(--w3);background:transparent;border:1px solid var(--b);padding:7px 18px;border-radius:999px;margin-left:auto;transition:all .4s var(--ease);display:inline-flex;align-items:center;gap:6px;position:relative;overflow:hidden;text-decoration:none}
.nav-cta::before{content:'';position:absolute;inset:0;border-radius:999px;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav-cta span,.nav-cta svg{position:relative;z-index:1;transition:color .35s,stroke .35s}
.nav-cta:hover{border-color:var(--c);color:#000}
.nav-cta:hover::before{transform:scaleX(1)}
.nav-cta:hover svg{stroke:#000}
.nav-cta:active{transform:scale(.96)}
.nav-cta svg{width:12px;height:12px;transition:transform .3s var(--ease)}
.nav-cta:hover svg{transform:translateX(2px)}
nav.light .nav-cta{color:var(--ltt3);border-color:var(--ltb)}
nav.light .nav-cta:hover{border-color:var(--c);color:#000}

.n-t{display:none;background:none;border:none;cursor:pointer;padding:0;margin:0;flex-direction:column;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%}
.n-t span{display:block;width:18px;height:1.5px;background:var(--w);transition:all .4s var(--ease)}
.n-t span:nth-child(1){margin-bottom:5px}
.n-t span:nth-child(2){width:12px;margin-bottom:5px}
.n-t span:nth-child(3){width:15px}
.n-t.active span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.n-t.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.n-t.active span:nth-child(3){width:18px;transform:translateY(-6.5px) rotate(-45deg)}
nav.light .n-t span{background:var(--ltt)}

@media(max-width:768px){
  nav{padding:14px 16px 0}
  .nav-bar{background:transparent;border:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;height:auto;max-width:none;justify-content:flex-end}
  nav.scrolled .nav-bar,nav.light .nav-bar{background:transparent;border:none;box-shadow:none}
  .n-l{display:none}
  .nav-mid{display:none;position:static;transform:none}

  .n-t{
    display:flex;
    width:48px;height:48px;border-radius:14px;
    background:rgba(8,8,10,.65);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(24px) saturate(2);-webkit-backdrop-filter:blur(24px) saturate(2);
    box-shadow:0 4px 20px rgba(0,0,0,.25);
    transition:background .3s,border-color .3s,box-shadow .3s,transform .3s var(--ease);
  }
  .n-t:active{transform:scale(.92)}
  nav.light .n-t{background:rgba(255,255,255,.65);border-color:rgba(0,0,0,.06);box-shadow:0 4px 20px rgba(0,0,0,.08)}

  .nav-mid.open{
    display:flex;flex-direction:column;
    position:fixed;top:72px;right:16px;left:auto;
    width:200px;
    background:rgba(8,8,10,.96);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    padding:8px;gap:2px;
    border-radius:14px;border:1px solid rgba(255,255,255,.06);
    box-shadow:0 16px 48px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.03);
    animation:menuIn .25s var(--ease);
  }
  @keyframes menuIn{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:none}}
  nav.light .nav-mid.open{background:rgba(255,255,255,.96);border-color:rgba(0,0,0,.06);box-shadow:0 16px 48px rgba(0,0,0,.1)}
  .nav-mid.open a{
    font-size:14px;font-weight:500;color:var(--w2);padding:12px 16px;border-radius:10px;
    transition:color .2s,background .2s;
  }
  .nav-mid.open a:hover{color:var(--w);background:rgba(255,255,255,.06);transform:none}
  nav.light .nav-mid.open a{color:rgba(0,0,0,.5)}
  nav.light .nav-mid.open a:hover{color:var(--ltt);background:rgba(0,0,0,.04)}
}