.header {
    width: 100%;
    position: fixed;
	top: 0;
    z-index: 10;
    border-bottom: 3px solid transparent;
    transition:
        border-radius 0.3s ease,
        border-bottom-color 0.3s ease,
        border-bottom-width 0.3s ease,
        background-color 0.5s ease,
        backdrop-filter 0.5s ease,
        color 0.6s ease;
}
.header.scrolled {
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    color: white;
    background-color: color-mix(in srgb, var(--color-dark) 60%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom-color: var(--color-dark);
}
.header__content {
    position: relative;
    gap: 40px;
    padding-left: 145px;
    align-items: center;
    justify-content: space-between;
}
.header__logo-link {
    margin-top: 10px;
    position: absolute;
    top: 0;
    left: 0;
    max-width: 145px;
    min-width: 145px;
    height: 42.5px;
    transition: opacity 0.6s ease;
}
.header__logo {
    position: absolute;
    transition: opacity 0.6s ease;
}
.header__menu {
    padding-left: 50px;
}
.header__logo--white {
    opacity: 0;
}
.header.scrolled .header__logo--green {
    opacity: 0;
}
.header.scrolled .header__logo--white {
    opacity: 1;
}
.header__nav {}
.header__menu {
    gap: 32px;
    align-items: center;
    flex-wrap: wrap;
}
.header__menu-item {
    width: max-content;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: normal;
}
.header__cta {
    gap: 20px;
    align-items: center;
    justify-content: end;
    flex-wrap: wrap;
}
.header__phone {
    font-weight: 700;
    font-size: 16px;
    line-height: 18.2px;
    letter-spacing: normal;
}
.header__button {
    transition: color 0.6s ease, background-color 0.5s ease, ;
}
.header.scrolled .header__button {
    color: var(--color-dark);
    background-color: white;
}






:root { --dur:.28s; --br:12px; --menu-bg:#fff; }

.header__nav { position: relative; margin: 0 auto; }

/* Кнопка-гамбургер */
.nav-toggle{
  display:none; gap:8px; align-items:center; cursor:pointer;
  padding:10px 20px; margin-left: 50px; border:1px solid var(--color-dark); border-radius:10px; background:transparent;
}
.nav-toggle__box{ width:22px; height:16px; position:relative; }
.nav-toggle__bar,
.nav-toggle__box::before,
.nav-toggle__box::after{
  content:""; position:absolute; left:0; right:0; height:1px; background:currentColor; border-radius:2px;
  transition:transform var(--dur) ease, opacity var(--dur) ease;
}
.nav-toggle__bar{ top:50%; transform:translateY(-50%); }
.nav-toggle__box::before{ top:0; }
.nav-toggle__box::after{ bottom:0; }
/* Анимация в «крестик» */
.nav-toggle[aria-expanded="true"] .nav-toggle__box::before{ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar{ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__box::after{ transform:translateY(-7px) rotate(-45deg); }

/* Десктоп: без изменений */
@media (min-width:1001px){
  .header__menu{ display:flex; gap:20px; max-height:none; overflow:visible; }
}

/* Мобилки/узко: выпадающая панель */
@media (max-width:1000px){
  .nav-toggle{ display:inline-flex; }
  .header__menu{
    width: max-content;
    position:absolute; left:0; right:0; top:100%;
    background:var(--menu-bg); border:1px solid var(--color-dark); border-radius:var(--br);
    box-shadow:0 8px 24px rgba(0,0,0,.12);
    margin:8px 0 0; padding:8px 12px;
    display:block; overflow:hidden; height:0; visibility:hidden;
    transition:height var(--dur) ease, visibility 0s linear var(--dur);
  }
  .header__menu.is-open{ visibility:visible; transition-delay:0s; }
  .header__menu-item{ padding:6px 0; }
  .header__link{ display:block; padding:10px 8px; }
  
}

/* Уважение к reduced motion */
@media (prefers-reduced-motion:reduce){
  .header__menu, .nav-toggle__box, .nav-toggle__bar{ transition:none !important; }
}


header.scrolled .nav-toggle[aria-expanded="true"] + .header__menu .header__link,
header .nav-toggle[aria-expanded="true"] + .header__menu .header__link {
    color: var(--color-dark);
}

header .nav-toggle{
    border: 1px solid var(--color-dark);
}
header.scrolled .nav-toggle{
    border: 1px solid white;
}


@media screen and (max-width: 650px) {
    .header__menu {
        height: auto;
        position: fixed;
        top: 76px;
        margin-top: 0px;
        width: max-content;
        margin-left: auto;
        border-radius: 0px 0px 0px 30px;
        transition: 
            height var(--dur) ease, 
            visibility 0s linear var(--dur), 
            transform 0.3s ease,
            border-radius 0.3s ease;
    }
    .nav-toggle {
        transition: border-color 0.3s ease, border-radius 0.3s ease;
    }
    .header:has(.nav-toggle[aria-expanded="true"]) .nav-toggle {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        border-bottom-color: white;
    }
    .header:has(.nav-toggle[aria-expanded="true"]) .header__menu {
        border-top-left-radius: 30px;
    }
    .header.scrolled:has(.nav-toggle[aria-expanded="true"]) .nav-toggle {
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    .header.scrolled:has(.nav-toggle[aria-expanded="true"]) {
        border-bottom-right-radius: 0;
    }
    .header.scrolled:has(.nav-toggle[aria-expanded="true"]) .header__menu {
        transform: translateY(22px);
        border-top-left-radius: 0px;
    }
}
@media screen and (max-width: 370px) {
    .header:has(.nav-toggle[aria-expanded="true"]) .header__menu {
        border-top-left-radius: 70px;
    }
}





.header {
    transition:
    border-radius 0.3s ease,
    border-bottom-color 0.3s ease,
    border-bottom-width 0.3s ease,
    background-color 0.5s ease,
    backdrop-filter 0.5s ease,
    color 0.6s ease,
    opacity 0.3s ease,
    transform 0.3s ease;
}
.header.is-hidden { 
	transform: translateY(-100%); 
	opacity: 0; 
	pointer-events: none; 
}