.nav-wrap {
    display: flex;
    align-items: center;
 }

 .nav-wrap button {
    background-color: transparent;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0;

}

.menu-icon {
    position: relative; 
    width: 2.5rem;
    height: 1.4rem; 
    cursor: pointer;
    z-index: 110;
    display: none;
}



.menu-icon-line {
    position: absolute;
    height: 0.2rem;
    background-color: #fff;
    border-radius: 0.1rem;
    transition: transform .4s ease, width .4s ease, opacity .4s ease;
}

.menu-icon-line-left {
    top: 0;
    left: 0;
    width: 2.5rem;
}

.menu-icon-line:nth-child(2) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.5rem;
}

.menu-icon-line-right {
    bottom: 0;
    right: 0;
    width: 2.5rem;

}



body.nav-active .menu-icon-line-left {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 3rem;
}

body.nav-active .menu-icon-line:nth-child(2){
    opacity: 0;
}


body.nav-active .menu-icon-line-right {
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%) rotate(-45deg);
 width: 3rem;
}

.nav-mobile {
    position: fixed;
    z-index: 99;
}

.nav-mobile::before,
.nav-mobile::after {
    content: '';
    position: fixed;
    top: 2rem;
    right: 5rem;
    width: 0;
    height: 0;
    background-color: rgba(20, 21, 26, .6);
    border-top-left-radius: 200%;
    z-index: -1;
    transition: border-radius linear .8s, 
    width cubic-bezier(0.77, 0, 0.175, 1) .6s, height  cubic-bezier(0.77, 0, 0.175, 1) .6s ;
}

.nav-mobile::after {
    background-color: #09090c;
    background-image: radial-gradient(circle, rgba(129, 103, 169, 0.2) 0.1rem,
    transparent 0.1rem );
    background-size: 2rem 2rem;
    box-shadow: -0.6rem 0.7rem 2.8rem 0 rgba(16, 16, 16, 0.3);
    transition-delay: 0s;
}

.nav-mobile::before {
    transition-delay: .2s;
}

.nav-content-mobile {
    display: flex;
    position: fixed;
    visibility: hidden;
    top: 9rem;
    right: 5rem;
    width: 28rem;
    text-align: right;
}

.nav-list-mobile {
    position: relative;
    z-index: 2;
    text-align: center;
}

.nav-list-item {
    position: relative;
    display: block;
    opacity: 0;
    margin: 0.7rem 0rem;
    font-size: 2.2rem;
    line-height: 1.2;
    letter-spacing: .2rem;
    text-align: right;
    overflow: hidden;
    transform: translateX(3rem);
    transition: opacity .2s ease, transform .2s ease;
    transition-delay: .1s;
}

.nav-list-item a {
    position: relative;
    display: inline-block;
    padding: .5rem 4rem .5rem 0rem;
    color: rgba(255, 255, 255, .6);
    font-weight: 600;
    transition: all .2s linear;
    text-decoration: none;
}

.nav-list-item a::after {
   content: '';
   position: absolute;
   top: 50%;
   right: 0;
   width: 0.5rem;
   height: 0;
   opacity: 0;
   background-color: #1888d8;
   transition: all .2s linear;
}

.nav-list-item a:hover {
    color: rgba(255, 255, 255, 1);
}

.nav-list-item:hover::after {
    top: 0;
    height: 100%;
    opacity: 1;
}

body.nav-active .nav-content-mobile,
body.nav-active .nav-mobile {
 visibility: visible;
}

body.nav-active .nav-mobile::before,
body.nav-active .nav-mobile::after {
    width: 25rem;
    height: 35rem;
    border-radius: 1.5rem;
}

body.nav-active .nav-mobile::after {
    transition-delay: .1s;
}

body.nav-active .nav-mobile::before {
    transition-delay:0s ;
}

body.nav-active .nav-list-item {
    opacity: 1;
    transform: translateX(0);
    transition: opacity .3s ease, transform 0.3s ease,
    color .3s ease;
}

body.nav-active .nav-list-item:nth-child(1) {
    transition-delay: .7s;
}
body.nav-active .nav-list-item:nth-child(2) {
    transition-delay: .8s;
}
body.nav-active .nav-list-item:nth-child(3) {
    transition-delay: .9s;
}
body.nav-active .nav-list-item:nth-child(4) {
    transition-delay: 1s;
}
body.nav-active .nav-list-item:nth-child(5) {
    transition-delay: 1.1s;
}

@media (max-width: 768px) {

    
    .nav-mobile::before,
  .nav-mobile::after {
    top: 2.5rem;   /* примерно на уровне бургера по вертикали */
    right: 1.5rem; /* примерно на уровне бургера по горизонтали — было 5rem, слишком далеко для мобильного */
    left: auto;
    transform: none; /* убираем translate(-50%, -50%) — без него рост идёт из фиксированного угла, а не из центра экрана */
  }

  body.nav-active .nav-mobile::before,
  body.nav-active .nav-mobile::after {
    width: 95vw;
    max-width: 26rem;
    height: 34rem;
  }

  .nav-content-mobile {
    top: 2.5rem;
    right: 1.5rem;
    left: auto;
    transform: none;
    width: 90vw;
    max-width: 22rem;
    text-align: center;
  }

  .nav-list-item {
    text-align: center;
  }

  .nav-list-item a {
    padding: .5rem 1rem;
  }

  .nav-list-item a::after {
    display: none;
  }

   .menu-icon {
    display: block;
   }

  .nav-desktop {
    display: none; /* прячем десктопную навигацию */
  }

  .lang-switch-mobile,
  .nav-wrap {
    display: flex; /* показываем переключатель языка и бургер */
  }

  .nav-mobile {
    display: block; /* показываем контейнер мобильного меню — дальше открытие/закрытие управляется через body.nav-active */
  }

  .header-content {
    justify-content: space-between;
  }
}