/* ===================== */
/* HEADER (base ~1920)   */
/* ===================== */


/* === НАВИГАЦИЯ === */
.site-nav ul {
  padding-left: 110px;
  padding-top: 0;
  list-style: none;
  display: flex;
  gap: 70px;
  align-items: center;
  height: 80px;
  margin: 0;
}

/* === КОНТЕЙНЕР хедер === */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  z-index: 10;

  background: transparent;
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

/* контейнер внутри – выравнивание по сетке */
.site-header .container {
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
  padding-left: 225px;
  height: 80px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
}

/* фон при скролле */
.site-header.scrolled {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
}

/* === ЛОГО === */
.logo img {
  display: inline-block;
  max-width: none;
  height: 46px;
  width: auto;
  margin-top: 0;
}

.logo{
  margin-top: -10px;
}

/* === ЯЗЫК === */
#langToggle{
  margin-left: auto;
  margin-right: 50px;
  height: 80px;
  display: flex;
  align-items: center;
}

#langIcon{
  width: 22px;
  height: 22px;
  display: block;
  transition: transform 0.3s ease;
}

#langIcon:hover{
  transform: scale(1.45);
}

.site-header.scrolled {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
}

.site-nav a {
  text-decoration: none;
  font-family: 'Nunito', sans-serif;
  color: #ffffff;
  font-weight: 500;
  font-size: 16px;
  transition: color 0.2s;
}

.site-nav a:hover {
  color: #a259ff;
  transition: .1s;
}



/* ========================================================= */
/* HEADER step scale (soft) 1920 -> 1024                     */
/* + height + logo scale                                     */
/* ========================================================= */

/* 1890 */
@media (max-width: 1890px){
  .site-header, .site-header .container{ height: 79px; }
  .site-nav ul{ height: 79px; padding-left: 108px; gap: 69px; }
  .site-header .container{ padding-left: 220px; }
  #langToggle{ height: 79px; margin-right: 48px; }
  .logo img{ height: 45px; }
}

/* 1860 */
@media (max-width: 1860px){
  .site-header, .site-header .container{ height: 78px; }
  .site-nav ul{ height: 78px; padding-left: 106px; gap: 68px; }
  .site-header .container{ padding-left: 215px; }
  #langToggle{ height: 78px; margin-right: 47px; }
  .logo img{ height: 45px; }
}

/* 1830 */
@media (max-width: 1830px){
  .site-header, .site-header .container{ height: 77px; }
  .site-nav ul{ height: 77px; padding-left: 104px; gap: 67px; }
  .site-header .container{ padding-left: 210px; }
  #langToggle{ height: 77px; margin-right: 46px; }
  .logo img{ height: 44px; }
}

/* 1800 */
@media (max-width: 1800px){
  .site-header, .site-header .container{ height: 76px; }
  .site-nav ul{ height: 76px; padding-left: 102px; gap: 66px; }
  .site-header .container{ padding-left: 205px; }
  #langToggle{ height: 76px; margin-right: 45px; }
  .logo img{ height: 44px; }
}

/* 1770 */
@media (max-width: 1770px){
  .site-header, .site-header .container{ height: 75px; }
  .site-nav ul{ height: 75px; padding-left: 100px; gap: 65px; }
  .site-header .container{ padding-left: 200px; }
  #langToggle{ height: 75px; margin-right: 44px; }
  .logo img{ height: 43px; }
}

/* 1740 */
@media (max-width: 1740px){
  .site-header, .site-header .container{ height: 74px; }
  .site-nav ul{ height: 74px; padding-left: 98px; gap: 64px; }
  .site-header .container{ padding-left: 195px; }
  #langToggle{ height: 74px; margin-right: 43px; }
  .logo img{ height: 43px; }
}

/* 1710 */
@media (max-width: 1710px){
  .site-header, .site-header .container{ height: 73px; }
  .site-nav ul{ height: 73px; padding-left: 96px; gap: 63px; }
  .site-header .container{ padding-left: 190px; }
  #langToggle{ height: 73px; margin-right: 42px; }
  .logo img{ height: 42px; }
}

/* 1680 */
@media (max-width: 1680px){
  .site-header, .site-header .container{ height: 72px; }
  .site-nav ul{ height: 72px; padding-left: 94px; gap: 62px; }
  .site-header .container{ padding-left: 185px; }
  #langToggle{ height: 72px; margin-right: 41px; }
  .logo img{ height: 42px; }
}

/* 1650 */
@media (max-width: 1650px){
  .site-header, .site-header .container{ height: 71px; }
  .site-nav ul{ height: 71px; padding-left: 92px; gap: 61px; }
  .site-header .container{ padding-left: 180px; }
  #langToggle{ height: 71px; margin-right: 40px; }
  .logo img{ height: 41px; }
}

/* 1620 */
@media (max-width: 1620px){
  .site-header, .site-header .container{ height: 70px; }
  .site-nav ul{ height: 70px; padding-left: 90px; gap: 60px; }
  .site-header .container{ padding-left: 175px; }
  #langToggle{ height: 70px; margin-right: 39px; }
  .logo img{ height: 41px; }
}

/* 1590 */
@media (max-width: 1590px){
  .site-header, .site-header .container{ height: 69px; }
  .site-nav ul{ height: 69px; padding-left: 88px; gap: 59px; }
  .site-header .container{ padding-left: 170px; }
  #langToggle{ height: 69px; margin-right: 38px; }
  .site-nav a{ font-size: 15.8px; }
  .logo img{ height: 40px; }
}

/* 1560 */
@media (max-width: 1560px){
  .site-header, .site-header .container{ height: 68px; }
  .site-nav ul{ height: 68px; padding-left: 86px; gap: 58px; }
  .site-header .container{ padding-left: 165px; }
  #langToggle{ height: 68px; margin-right: 37px; }
  .logo img{ height: 40px; }
}

/* 1530 */
@media (max-width: 1530px){
  .site-header, .site-header .container{ height: 67px; }
  .site-nav ul{ height: 67px; padding-left: 84px; gap: 57px; }
  .site-header .container{ padding-left: 160px; }
  #langToggle{ height: 67px; margin-right: 36px; }
  .logo img{ height: 39px; }
}

/* 1500 */
@media (max-width: 1500px){
  .site-header, .site-header .container{ height: 66px; }
  .site-nav ul{ height: 66px; padding-left: 82px; gap: 56px; }
  .site-header .container{ padding-left: 155px; }
  #langToggle{ height: 66px; margin-right: 35px; }
  .site-nav a{ font-size: 15.6px; }
  .logo img{ height: 39px; }
}

/* 1470 */
@media (max-width: 1470px){
  .site-header, .site-header .container{ height: 65px; }
  .site-nav ul{ height: 65px; padding-left: 80px; gap: 55px; }
  .site-header .container{ padding-left: 150px; }
  #langToggle{ height: 65px; margin-right: 34px; }
  .logo img{ height: 38px; }
  #langIcon{ width: 21px; height: 21px; }
}

/* 1440 */
@media (max-width: 1440px){
  .site-header, .site-header .container{ height: 64px; }
  .site-nav ul{ height: 64px; padding-left: 78px; gap: 54px; }
  .site-header .container{ padding-left: 145px; }
  #langToggle{ height: 64px; margin-right: 33px; }
  .site-nav a{ font-size: 15.2px; }
  .logo img{ height: 37px; }
  #langIcon{ width: 21px; height: 21px; }
}

/* --- ниже 1440 тоже держим мягко --- */

/* 1410 */
@media (max-width: 1410px){
  .site-header .container{ padding-left: 140px; }
  .site-nav ul{ padding-left: 76px; gap: 52px; }
  #langToggle{ margin-right: 32px; }
}

/* 1380 */
@media (max-width: 1380px){
  .site-header .container{ padding-left: 135px; }
  .site-nav ul{ padding-left: 74px; gap: 50px; }
  #langToggle{ margin-right: 31px; }
}

/* 1350 */
@media (max-width: 1350px){
  .site-header .container{ padding-left: 130px; }
  .site-nav ul{ padding-left: 72px; gap: 48px; }
  #langToggle{ margin-right: 30px; }
}

/* 1320 */
@media (max-width: 1320px){
  .site-header .container{ padding-left: 125px; }
  .site-nav ul{ padding-left: 70px; gap: 46px; }
  #langToggle{ margin-right: 29px; }
  .site-nav a{ font-size: 15px; }
}

/* 1290 */
@media (max-width: 1290px){
  .site-header .container{ padding-left: 120px; }
  .site-nav ul{ padding-left: 68px; gap: 44px; }
  #langToggle{ margin-right: 28px; }
}

/* 1260 */
@media (max-width: 1260px){
  .site-header .container{ padding-left: 115px; }
  .site-nav ul{ padding-left: 66px; gap: 42px; }
  #langToggle{ margin-right: 27px; }
  .logo img{ height: 36px; }
  #langIcon{ width: 20px; height: 20px; }
}

/* 1230 */
@media (max-width: 1230px){
  .site-header .container{ padding-left: 110px; }
  .site-nav ul{ padding-left: 64px; gap: 40px; }
  #langToggle{ margin-right: 26px; }
}

/* 1200 */
@media (max-width: 1200px){
  .site-header .container{ padding-left: 105px; }
  .site-nav ul{ padding-left: 62px; gap: 38px; }
  #langToggle{ margin-right: 25px; }
  .site-nav a{ font-size: 14.8px; }
}

/* 1170 */
@media (max-width: 1170px){
  .site-header .container{ padding-left: 100px; }
  .site-nav ul{ padding-left: 60px; gap: 36px; }
  #langToggle{ margin-right: 24px; }
}

/* 1140 */
@media (max-width: 1140px){
  .site-header .container{ padding-left: 90px; }
  .site-nav ul{ padding-left: 56px; gap: 34px; }
  #langToggle{ margin-right: 23px; }
}

/* 1110 */
@media (max-width: 1110px){
  .site-header .container{ padding-left: 80px; }
  .site-nav ul{ padding-left: 52px; gap: 32px; }
  #langToggle{ margin-right: 22px; }
}

/* 1080 */
@media (max-width: 1080px){
  .site-header .container{ padding-left: 70px; }
  .site-nav ul{ padding-left: 48px; gap: 30px; }
  #langToggle{ margin-right: 21px; }
  .site-nav a{ font-size: 14.6px; }
}

/* 1050 */
@media (max-width: 1050px){
  .site-header .container{ padding-left: 60px; }
  .site-nav ul{ padding-left: 44px; gap: 28px; }
  #langToggle{ margin-right: 20px; }
}

/* 1024 */
@media (max-width: 1024px){
  .site-header, .site-header .container{ height: 64px; } /* держим компактным */
  .site-header .container{
    padding-left: 28px;
    padding-right: 28px;
  }
  .site-nav ul{
    height: 64px;
    padding-left: 24px;
    gap: 22px;
  }
  .site-nav a{ font-size: 14px; }
  .logo img{ height: 36px; }
  #langToggle{ height: 64px; margin-right: 18px; }
  #langIcon{ width: 20px; height: 20px; }
}

/* ============================= */
/* BURGER + ADAPTIVE MENU FIXED  */
/* ============================= */

.burger{
  display: none;
}

/* TABLET */
@media (max-width:1024px){

  .site-header,
  .site-header .container{
    height:64px !important;
  }

  .site-header .container{
    padding-left:20px !important;
    padding-right:20px !important;
    display:flex;
    align-items:center;
  }

  .logo{
    margin-top:0 !important;
    flex-shrink:0;
  }

  .logo img{
    height:34px !important;
  }

  /* в хедере на адаптиве только logo + burger */
  #langToggle{
    display:none !important;
  }

  .burger{
    display:flex !important;
    width:36px;
    height:36px;
    padding:0;
    border:none;
    background:transparent;
    cursor:pointer;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:6px;
    margin-left:auto;
    z-index:1002;
  }

  .burger span{
    display:block;
    width:24px;
    height:2px;
    background:#fff;
    transition:transform .3s ease, opacity .3s ease;
  }

  .burger.active span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
  }

  .burger.active span:nth-child(2){
    opacity:0;
  }

  .burger.active span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
  }

  .site-nav{
    position:fixed;
    top:64px;
    left:0;
    right:0;
    background:rgba(14,12,16,0.98);
    backdrop-filter:blur(12px);
    transform:translateY(-120%);
    opacity:0;
    pointer-events:none;
    transition:transform .35s ease, opacity .35s ease;
    z-index:1001;
  }

  .site-nav.active{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  .site-nav ul{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start;
    align-items:center;
    gap:0 !important;
    padding:22px 0 28px 0 !important;
    margin:0 !important;
    height:auto !important;
  }

  .site-nav li{
    width:100%;
    text-align:center;
  }

  .site-nav a{
    display:block;
    width:100%;
    padding:18px 20px;
    font-size:18px !important;
  }

  .mobile-lang-item{
    margin-top:10px;
  }

  .mobile-lang-item a{
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:18px 20px;
  }

  .mobile-lang-item img{
    width:20px;
    height:20px;
    display:block;
  }
}

/* MOBILE FULLSCREEN */
@media (max-width:640px){

  .site-header .container{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .logo img{
    height:30px !important;
  }

  .burger{
    width:34px;
    height:34px;
  }

  .burger span{
    width:22px;
  }

  .site-nav{
    top:0;
    height:100vh;
  }

  .site-nav ul{
    min-height:100vh;
    justify-content:center;
    padding:40px 0 !important;
  }

  .site-nav a{
    font-size:22px !important;
    padding:16px 20px;
  }

  .mobile-lang-item{
    margin-top:14px;
  }
}

/* ============================= */
/* FINAL FIXES: logo / lang / close */
/* ============================= */

@media (max-width: 1024px) {
  .site-header .container {
    padding-left: 26px !important;
    padding-right: 20px !important;
  }

  .logo {
    margin-left: 6px;
  }

  .site-nav {
    overflow-y: auto;
  }

  .site-nav ul {
    width: 100%;
  }

  .mobile-lang-item {
    width: 100%;
    text-align: center;
    margin-top: 8px;
  }

  .mobile-lang-item #langToggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 18px 20px !important;
  }

  .mobile-lang-item #langIcon {
    width: 20px !important;
    height: 20px !important;
    display: block;
  }
}

@media (max-width: 640px) {
  .site-header .container {
    padding-left: 20px !important;
    padding-right: 16px !important;
  }

  .logo {
    margin-left: 4px;
  }

  .mobile-lang-item {
    margin-top: 12px;
  }
}