#header {
    padding: 10px 16px;
    border-radius: 16px 16px 0px 0px;
    border-bottom: 1px solid #E4E4E4;
    background: #EFEFEF;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    margin-top: 260px;
}

body.dark #header {
    border-bottom: 1px solid #242424;
    background: #1D1D1D;
}

.header_wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    gap: 16px;
}

.header_left {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
}

.nav-link {
    white-space: nowrap;
}

.header_logo {
    min-width: 125px;
    height: 52px;
    background: url(../images/logo.svg) center / contain no-repeat;
    transition: all 0.3s ease;
    cursor: pointer;
}

.header_logo:hover {
    transform: scale(1.02);
}

.header_text {
    line-height: 100%;
}

.header_texts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    padding: 5px 0 0;
}

.header_title {
    overflow: hidden;
    color: #171717;
    font-family: "HelveticaNeue-Bold";
    font-size: 18px;
    line-height: 100%;
    margin: 0;
}

body.dark .header_title {
    color: #F2F2F2;
}

.header_right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.dropdown-content {
    display: none;
    position: absolute;
    border-radius: 4px;
    border: 1px solid #e0dbdb;
    padding: 8px 16px;
    background: #F4F4F4;
    top: 58px;
    left: 0;
    z-index: 99;
    width: 100%;
}

body.dark .dropdown-content {
    background: #1D1D1D;
    border: 1px solid #3A3A3A;
}

.header_right .dropdown>a::after {
    filter: brightness(0) saturate(100%) invert(0%) sepia(3%) saturate(2883%) hue-rotate(5deg) brightness(94%) contrast(82%);
}

body.dark .header_right .dropdown>a::after {
    filter: none;
}

.dropdown-item {
    margin: 4px 0;
    display: block;
    text-align: center;
    color: #171717;
}

body.dark .dropdown-item {
    color: #F2F2F2;
}

.darkModeToggle {
    padding: 14px 10px;
    width: 56px;
    height: 56px;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #3a3a3a00;
    transition: all 0.3s ease;
}

body.dark .darkModeToggle:hover {
    border: 1px solid #3a3a3a;
}

.darkModeToggle:hover {
    border: 1px solid #cbcbcb;
}

.now-moon {
    background: url(../images/dark.svg) center / contain no-repeat;
    width: 100%;
    height: 100%;
    display: block;
}

.now-sun {
    background: url(../images/light.svg) center / contain no-repeat;
    width: 100%;
    height: 100%;
    display: block;
}

.header_right .dropdown {
    padding: 16px;
    height: 56px;
    color: #F2F2F2;
    font-family: "HelveticaNeue-Medium";
    font-size: 18px;
    line-height: 24px;
    text-transform: uppercase;
    position: relative;
    border-radius: 4px;
    border: 1px solid #3a3a3a00;
    transition: all 0.3s ease;
}


body.dark .dropdown:hover {
    border: 1px solid #3A3A3A;
}

.dropdown:hover {
    border: 1px solid #cbcbcb;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: #171717;
}

body.dark .dropdown-item:hover,
body.dark .dropdown-item:focus {
    color: #F2F2F2;
}

.header_right .dropdown>a::after {
    display: inline-block;
    content: "";
    transition: transform 0.2s linear;
    background-image: url(../images/arrow_1.svg);
    width: 24px;
    margin: 0 0 4px 0;
    height: 10px;
    background-position: center;
}

.header_right .dropdown>a.active::after {
    transform: rotate(180deg);
}

.header_right .dropdown>a {
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.3s ease;
    color: #171717;
}

body.dark .header_right .dropdown>a {
    color: #F2F2F2;
}

.burger {
    display: none;
}

@media (max-width: 900px) {
    #header {
        margin-top: 0px;
        border-radius: 0;
    }

    .burger {
        display: block;
        position: relative;
        width: 38px;
    }

    #burger {
        visibility: hidden;
    }

    #burger+label {
        position: absolute;
        top: 0;
        right: 5px;
        height: 18px;
        width: 27px;
        z-index: 5;
    }

    #burger+label span {
        position: absolute;
        width: 100%;
        height: 2px;
        top: 50%;
        margin-top: -1px;
        left: 0;
        display: block;
        background: black;
        transition: 0.5s;
    }

    body.dark #burger+label span {
        background: #F2F2F2;
    }

    #burger+label span:first-child {
        top: 3px;
    }

    #burger+label span:last-child {
        top: 16px;
    }

    #burger:checked+label span:first-child {
        opacity: 1;
        transform: rotate(405deg);
    }

    #burger:checked+label span {
        opacity: 0;
        top: 50%;
    }

    #burger:checked+label span:last-child {
        opacity: 1;
        transform: rotate(-405deg);
    }

    .nav-link {
        display: none;
    }
}

@media (max-width: 610px) {
    .header_texts {
        display: none;
    }
}

/* ============================= */
/* LINEAGE 2 HEADER ENHANCEMENT */
/* ADD TO END OF header.css     */
/* ============================= */

#header {
    position: relative;
    margin-top: 290px; /* больше воздуха под видео */
    background: linear-gradient(
        180deg,
        rgba(20,20,20,0.88) 0%,
        rgba(12,12,12,0.94) 100%
    );
    border: 1px solid rgba(255, 200, 120, 0.18);
    box-shadow:
        0 20px 60px rgba(0,0,0,0.85),
        inset 0 0 0 1px rgba(255,255,255,0.03);
    backdrop-filter: blur(6px);
}

/* декоративная линия как в UI L2 */
#header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,200,120,0.6),
        transparent
    );
}

/* контейнер */
.header_wrapper {
    padding: 10px 8px;
}

/* ЛОГО */
.header_logo {
    filter: drop-shadow(0 0 6px rgba(255,180,80,0.35));
}

.header_logo:hover {
    transform: scale(1.04);
    filter: drop-shadow(0 0 10px rgba(255,200,120,0.6));
}

/* ТЕКСТ */
.header_title {
    letter-spacing: 0.04em;
    text-shadow: 0 0 6px rgba(255,200,120,0.25);
}

.header_text {
    font-size: 13px;
    color: #bfa680;
    text-shadow: 0 0 4px rgba(0,0,0,0.8);
}

/* ЯЗЫК + DARK MODE */
.header_right .dropdown,
.darkModeToggle {
    background: linear-gradient(
        180deg,
        rgba(60,60,60,0.6),
        rgba(25,25,25,0.8)
    );
    border: 1px solid rgba(255,200,120,0.22);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.04),
        0 4px 14px rgba(0,0,0,0.8);
}

.header_right .dropdown:hover,
.darkModeToggle:hover {
    border-color: rgba(255,220,150,0.45);
}

/* ВЫПАДАЮЩЕЕ МЕНЮ */
.dropdown-content {
    background: linear-gradient(
        180deg,
        rgba(25,25,25,0.96),
        rgba(10,10,10,0.98)
    );
    border: 1px solid rgba(255,200,120,0.25);
    box-shadow: 0 10px 40px rgba(0,0,0,0.9);
}

/* ПУНКТЫ */
.dropdown-item {
    font-size: 14px;
    letter-spacing: 0.05em;
}

.dropdown-item:hover {
    background: rgba(255,200,120,0.08);
}

/* МОБИЛКА */
@media (max-width: 900px) {
    #header {
        margin-top: 200px;
        border-radius: 0;
    }
}

/* ===== LIGHT THEME FIX FOR HEADER ===== */
body:not(.dark) #header {
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.92) 0%,
        rgba(245,245,245,0.98) 100%
    );
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow:
        0 12px 40px rgba(0,0,0,0.15),
        inset 0 0 0 1px rgba(255,255,255,0.6);
}

/* текст в светлой теме */
body:not(.dark) #header,
body:not(.dark) #header * {
    color: #171717;
    text-shadow: none;
}

/* подзаголовки / мелкий текст */
body:not(.dark) .header_text {
    color: #555;
}

/* dropdown и кнопки */
body:not(.dark) .header_right .dropdown,
body:not(.dark) .darkModeToggle {
    background: linear-gradient(
        180deg,
        #ffffff,
        #f0f0f0
    );
    border: 1px solid rgba(0,0,0,0.12);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.8),
        0 4px 12px rgba(0,0,0,0.15);
}

/* dropdown меню */
body:not(.dark) .dropdown-content {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.12);
}

/* hover */
body:not(.dark) .dropdown-item:hover {
    background: rgba(0,0,0,0.05);
}

/* =========================================================
   TOP without badge: premium shine + pulse border
   Light theme: grade-colored text (A/B only)
   ========================================================= */

/* ---------- LIGHT THEME: grade-colored name (A/B only) ---------- */
body:not(.dark) .server_card_A .card_up_name { color: #0B5ED7; } /* blue */
body:not(.dark) .server_card_B .card_up_name { color: #4B5563; } /* graphite */

/* чуть усилить читаемость в hover (light) */
body:not(.dark) .server_card:hover .card_up_name{
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}

/* ---------- TOP: premium effect (no badge) ---------- */
.server_card_Top{
  position: relative;
  isolation: isolate; /* чтобы эффекты не конфликтовали */
}

/* премиум-рамка */
.server_card_Top::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius: 6px;
  pointer-events:none;
  z-index: 2;
  border: 1px solid rgba(255,215,0,.30);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 0 0 1px rgba(0,0,0,.35);
  transition: all .25s ease;
}

/* блеск (shine sweep) */
.server_card_Top::before{
  content:"";
  position:absolute;
  inset:-40%;
  z-index: 1;
  pointer-events:none;
  background:
    linear-gradient(115deg,
      transparent 0%,
      rgba(255,225,140,.00) 40%,
      rgba(255,225,140,.26) 50%,
      rgba(255,225,140,.00) 60%,
      transparent 100%);
  transform: translateX(-35%) rotate(0deg);
  transition: transform .55s ease;
  mix-blend-mode: screen;
  opacity: .75;
}

/* hover: shine + glow */
.server_card_Top:hover::before{
  transform: translateX(35%) rotate(0deg);
}

.server_card_Top:hover::after{
  border-color: rgba(255,215,0,.65);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 0 26px rgba(255,215,0,.25),
    0 0 42px rgba(255,80,80,.35);
}

/* TOP: лёгкая “пульсация” только при hover (не постоянно) */
@keyframes topPulse {
  0%   { filter: drop-shadow(0 0 0 rgba(255,215,0,0)); }
  50%  { filter: drop-shadow(0 0 10px rgba(255,215,0,.25)); }
  100% { filter: drop-shadow(0 0 0 rgba(255,215,0,0)); }
}
.server_card_Top:hover{
  animation: topPulse .9s ease-in-out;
}

/* TOP: чтобы текст был читаемый на обоих темах */
.server_card_Top .card_up_name,
.server_card_Top .card_up_right div,
.server_card_Top .card_bottom_text{
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* =========================
   PREMIUM HEADER (SAFE)
   add to end of header.css
   ========================= */

#header{
  position: relative;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

/* тонкая “L2 линия” сверху */
#header::before{
  content:"";
  position:absolute;
  left:14px; right:14px; top:0;
  height:2px;
  background: linear-gradient(90deg, transparent, rgba(255,200,120,.65), transparent);
  opacity: .9;
  pointer-events:none;
}

/* DARK */
body.dark #header{
  background: linear-gradient(180deg, rgba(30,30,30,.92), rgba(14,14,14,.96));
  border-bottom: 1px solid rgba(255,200,120,.18);
  box-shadow: 0 18px 50px rgba(0,0,0,.75);
}
body.dark .header_title{
  text-shadow: 0 0 10px rgba(255,200,120,.18);
}
body.dark .header_logo{
  filter: drop-shadow(0 0 10px rgba(255,200,120,.20));
}

/* LIGHT */
body:not(.dark) #header{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(242,242,242,.98));
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
body:not(.dark) #header::before{
  background: linear-gradient(90deg, transparent, rgba(180,120,40,.35), transparent);
}

/* кнопки справа (и там и там) */
.header_right .dropdown,
.darkModeToggle{
  border-radius: 10px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.header_right .dropdown:hover,
.darkModeToggle:hover{
  transform: translateY(-1px);
}

/* dark buttons */
body.dark .header_right .dropdown,
body.dark .darkModeToggle{
  background: linear-gradient(180deg, rgba(60,60,60,.55), rgba(20,20,20,.8));
  border: 1px solid rgba(255,200,120,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 8px 22px rgba(0,0,0,.55);
}

/* light buttons */
body:not(.dark) .header_right .dropdown,
body:not(.dark) .darkModeToggle{
  background: linear-gradient(180deg, #ffffff, #f0f0f0);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 6px 16px rgba(0,0,0,.12);
}

/* dropdown menu */
body.dark .dropdown-content{
  background: linear-gradient(180deg, rgba(20,20,20,.98), rgba(10,10,10,.98));
  border: 1px solid rgba(255,200,120,.22);
  box-shadow: 0 18px 55px rgba(0,0,0,.8);
}
body:not(.dark) .dropdown-content{
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 16px 44px rgba(0,0,0,.18);
}

/* =========================
   HEADER FIX PACK
   ========================= */

/* 1) ВАЖНО: не режем выпадашку */
#header{
  overflow: visible !important;  /* иначе dropdown обрезается */
  z-index: 50;
}

/* dropdown должен быть выше всего */
.header_right .dropdown{ position: relative; z-index: 60; }
.dropdown-content{
  z-index: 9999;
  top: calc(100% + 10px);  /* вместо фиксированных 58px */
  left: 0;
}

/* если где-то фон/обёртка перекрывает клики */
#header::before{ pointer-events: none; }

/* 2) Делаем бар компактнее */
#header{
  padding: 6px 12px !important; /* было 10px 16px */
}
.header_wrapper{
  gap: 12px !important;
}
.header_left{ gap: 12px !important; }
.header_logo{
  height: 44px !important;      /* было 52 */
  min-width: 112px !important;  /* было 125 */
}
.header_right .dropdown{
  height: 44px !important;      /* было 56 */
  padding: 10px 12px !important;/* было 16 */
  font-size: 16px !important;
}
.darkModeToggle{
  width: 52px !important;
  height: 44px !important;
  padding: 6px !important;
}

/* 3) Премиум-переключатель темы (без “колхоза”)
   Работает даже если внутри у тебя .now-moon / .now-sun */
.darkModeToggle{
  position: relative;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 6px 16px rgba(0,0,0,.25);
  overflow: hidden;
}

/* “ползунок” */
.darkModeToggle::after{
  content:"";
  position:absolute;
  top: 4px; left: 4px;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #fff, #d7d7d7);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  transition: transform .25s ease, background .25s ease;
}

/* дорожка */
.darkModeToggle::before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    radial-gradient(12px 12px at 18px 50%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(12px 12px at calc(100% - 18px) 50%, rgba(255,200,120,.25), transparent 60%);
  opacity: .9;
  pointer-events:none;
}

/* СВЕТЛАЯ тема: ползунок слева */
body:not(.dark) .darkModeToggle{
  border-color: rgba(0,0,0,.10);
  background: linear-gradient(180deg, #ffffff, #f0f0f0);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.7),
    0 6px 16px rgba(0,0,0,.12);
}
body:not(.dark) .darkModeToggle::after{
  transform: translateX(0);
}

/* ТЁМНАЯ тема: ползунок справа */
body.dark .darkModeToggle{
  background: linear-gradient(180deg, rgba(70,70,70,.55), rgba(18,18,18,.85));
  border-color: rgba(255,200,120,.16);
}
body.dark .darkModeToggle::after{
  transform: translateX(24px);
  background: radial-gradient(circle at 30% 30%, #ffe9b7, #d6a85b);
}

/* прячем старые иконки, чтобы не мешали */
.darkModeToggle .now-moon,
.darkModeToggle .now-sun{
  opacity: 0 !important;
  pointer-events: none;
}

.header_right{
  gap: 10px; /* можно 8-12 */
}
.header_right .dropdown{
  height: 44px;        /* если хочешь меньше бар */
  padding: 10px 12px;
}
/* ===== REMOVE THEME TOGGLE IF IT EXISTS ===== */
.darkModeToggle { display: none !important; }

/* ===== HEADER TEXT (our premium style) ===== */
.header_title{
  letter-spacing: .04em;
  text-transform: uppercase;
}
.header_text{
  opacity: .92;
  letter-spacing: .02em;
}

/* ===== NAV MENU ===== */
.header_nav{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 6px;
}

.header_nav_link{
  height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 10px;
  text-decoration: none;

  font-family: "HelveticaNeue-Medium";
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;

  border: 1px solid rgba(255,200,120,.14);
  background: linear-gradient(180deg, rgba(60,60,60,.55), rgba(18,18,18,.85));
  color: #F2F2F2;

  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 8px 22px rgba(0,0,0,.45);
  transition: transform .2s ease, border-color .2s ease, filter .2s ease;
}
.header_nav_link:hover{
  transform: translateY(-1px);
  border-color: rgba(255,200,120,.28);
  filter: brightness(1.05);
}

/* ===== LANGUAGE DROPDOWN: align like buttons ===== */
.header_lang .dropdown{
  height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,200,120,.18);
  background: linear-gradient(180deg, rgba(60,60,60,.55), rgba(18,18,18,.85));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 8px 22px rgba(0,0,0,.45);
}

/* dropdown positioning: safe */
#header{ overflow: visible !important; z-index: 50; }
.header_right .dropdown{ position: relative; z-index: 60; }
.dropdown-content{
  z-index: 9999;
  top: calc(100% + 10px);
  left: 0;
  width: max-content;
  min-width: 160px;
  border-radius: 12px;
  padding: 8px;
}

/* dropdown items: nicer */
.dropdown-item{
  border-radius: 10px;
  padding: 10px 10px;
  text-align: left;
}
.dropdown-item:hover{
  background: rgba(255,200,120,0.10);
}

/* ===== MOBILE: burger opens nav ===== */
@media (max-width: 900px){
  .header_nav{
    position: absolute;
    right: 12px;
    top: calc(100% + 10px);
    flex-direction: column;
    align-items: stretch;
    gap: 6px;

    width: 240px;
    padding: 10px;
    border-radius: 14px;

    border: 1px solid rgba(255,200,120,.18);
    background: linear-gradient(180deg, rgba(20,20,20,.98), rgba(10,10,10,.98));
    box-shadow: 0 18px 55px rgba(0,0,0,.8);

    display: none;
  }

  #burger:checked ~ .header_nav{
    display: flex;
  }

  /* язык оставим рядом с бургером */
  .header_lang{ margin-left: 0; }
}

/* если у тебя header_right не relative — сделаем, чтобы моб. меню встало правильно */
.header_right{ position: relative; }


/* =========================
   MOBILE: FULLSCREEN / NO BG
   ========================= */
@media (max-width: 900px){

  /* убираем “карточность” у страницы/обёрток (если есть) */
  body{ background: transparent !important; }

  /* хедер во всю ширину, без скруглений/полос */
  #header{
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 10px 12px !important;

    position: relative;
    overflow: hidden !important; /* чтобы видео не вылазило */
  }

  /* безопасные отступы под iPhone “чёлку” */
  #header{
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    padding-top: max(10px, env(safe-area-inset-top)) !important;
  }

  /* если у тебя была декоративная линия сверху — прячем */
  #header::before{ display:none !important; }

  /* видео как фон во весь хедер */
  .header_video{
    display:block !important;
    position:absolute;
    inset:0;
    z-index:0;
  }
  .header_video_el{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    filter: saturate(1.02) contrast(1.05) brightness(.55);
    transform: scale(1.03);
  }

  /* затемнение поверх видео, чтобы текст читался */
  .header_video::after{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.82));
    pointer-events:none;
  }

  /* контент хедера поверх видео */
  .header_wrapper{ position:relative; z-index:1; }

  /* чтобы язык/бургер не “прыгали” */
  .header_right{ position: relative; z-index: 2; }
}

/* =========================
   MOBILE: GREY BACKGROUND FIX
   ========================= */
@media (max-width: 900px){

  /* возвращаем фирменный серый фон страницы */
  body{
    background: #EFEFEF !important;
  }

  body.dark{
    background: #171717 !important;
  }

  /* хедер остаётся во всю ширину,
     но с серой подложкой как в десктопе */
  #header{
    background: linear-gradient(
      180deg,
      rgba(239,239,239,0.96),
      rgba(225,225,225,0.98)
    ) !important;

    box-shadow:
      0 10px 30px rgba(0,0,0,.12);
  }

  body.dark #header{
    background: linear-gradient(
      180deg,
      rgba(28,28,28,.96),
      rgba(16,16,16,.98)
    ) !important;

    box-shadow:
      0 14px 40px rgba(0,0,0,.65);
  }

  /* видео остаётся, но не “давит” */
  .header_video_el{
    filter: saturate(1.02) contrast(1.05) brightness(.6);
  }

  /* затемнение мягче */
  .header_video::after{
    background: linear-gradient(
      180deg,
      rgba(0,0,0,.45),
      rgba(0,0,0,.70)
    );
  }
}

/* =========================
   MOBILE: LANGUAGE DROPDOWN FIX
   ========================= */
@media (max-width: 900px){

  /* важно: чтобы выпадашка не пряталась под соседними блоками */
  #header{ z-index: 999; }
  .header_right{ position: relative; z-index: 1000; }

  /* сам контейнер dropdown выше бургер-иконки */
  .header_right .dropdown{
    position: relative;
    z-index: 2000;
  }

  /* панелька выбора языка — видимая, внутри экрана */
  .header_right .dropdown-content{
    top: calc(100% + 10px) !important;
    left: auto !important;
    right: 0 !important;

    width: 220px !important;          /* чтобы не была 100% и не ломала моб */
    min-width: 180px !important;
    max-width: calc(100vw - 24px) !important;

    border-radius: 14px !important;
    padding: 8px !important;

    z-index: 99999 !important;
    overflow: hidden;
  }

  /* если список длиннее — чтобы можно было скроллить */
  .header_right .dropdown-content ul{
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 50vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* пункты — крупнее для пальца */
  .header_right .dropdown-item{
    display: block;
    padding: 12px 12px !important;
    border-radius: 12px !important;
    text-align: left;
  }
}

/* =========================
   LANG DROPDOWN: reliable open state
   ========================= */
.header_right .dropdown { position: relative; }
.header_right .dropdown-content { display: none; }

/* когда открыт */
.header_right .dropdown.is-open > .dropdown-content{
  display: block !important;
}

/* мобильная панелька языка */
@media (max-width: 900px){
  #header{ z-index: 999; }
  .header_right{ position: relative; z-index: 1000; }

  .header_right .dropdown{ z-index: 2000; }

  .header_right .dropdown-content{
    top: calc(100% + 10px) !important;
    right: 0 !important;
    left: auto !important;

    width: 220px !important;
    max-width: calc(100vw - 24px) !important;

    border-radius: 14px !important;
    padding: 8px !important;
    z-index: 99999 !important;

    /* чтобы клики точно работали */
    pointer-events: auto;
  }

  .header_right .dropdown-content ul{
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 50vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .header_right .dropdown-item{
    display: block;
    padding: 12px 12px !important;
    border-radius: 12px !important;
    text-align: left;
  }
}

/* =========================
   MOBILE LANGUAGE DROPDOWN FIX
   ========================= */

/* важно: не режем выпадашку */
@media (max-width: 900px){
  #header{
    overflow: visible !important; /* иначе меню языка обрезается */
  }

  /* контейнер языка выше всего */
  .header_right .dropdown{
    position: relative;
    z-index: 9999;
  }

  /* меню языка: фиксируем как “панельку”, чтобы 100% было видно */
  .dropdown-content{
    display: none;              /* откроем через :focus-within */
    position: fixed !important; /* не зависит от overflow родителя */
    left: 12px !important;
    right: 12px !important;
    top: calc(env(safe-area-inset-top) + 58px) !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    max-height: min(60vh, 420px);
    overflow: auto;

    border-radius: 14px;
    z-index: 99999;
  }

  /* открытие по тапу */
  .dropdown:focus-within .dropdown-content{
    display: block;
  }

  /* чуть крупнее пункты, чтобы попадать пальцем */
  .dropdown-item{
    padding: 12px 12px;
    border-radius: 12px;
  }
}

/* ===== MOBILE HEADER FIX (lang dropdown + z-index) ===== */
#header{
  position: relative;
  z-index: 50; /* поверх hero/видео */
}

@media (max-width: 900px){
  .header_right{
    align-items: center;
    gap: 6px;
  }

  /* dropdown всегда внутри экрана */
  .header_right .dropdown{
    position: relative;
  }

  .dropdown-content{
    left: auto;
    right: 0;               /* прижимаем к правому краю */
    top: calc(100% + 8px);  /* ниже кнопки */
    width: max-content;
    min-width: 140px;
    max-width: calc(100vw - 24px);
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
  }

  body.dark .dropdown-content{
    box-shadow: 0 12px 30px rgba(0,0,0,.55);
  }
}

/* На очень узких — делаем dropdown во всю ширину */
@media (max-width: 420px){
  .dropdown-content{
    right: -8px;
    left: -8px;
    width: auto;
    min-width: 0;
  }
}

.header_left{ display:flex; align-items:center; gap:14px; }
.header_lang{ margin-left: 6px; }
.header_lang a[data-toggle="dropdown"]{
  display:inline-flex; align-items:center; justify-content:center;
  height: 38px; padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,200,120,.18);
  background: rgba(0,0,0,.18);
}

.header_lang { position: relative; }
.header_lang .dropdown-content{
  display: none;
  position: absolute;
  top: 110%;
  left: 0;
  z-index: 9999;
}
.header_lang .dropdown.is-open .dropdown-content{ display: block; }

/* ===== LOGO PNG ===== */
.header_logo{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo_img{
  height: 36px;          /* ИДЕАЛЬНО для хедера */
  width: auto;
  display: block;

  /* чтобы не мыло */
  image-rendering: -webkit-optimize-contrast;

  /* мягкое отделение от видео */
  filter:
    drop-shadow(0 2px 6px rgba(0,0,0,0.45));

  transition: transform .18s ease, filter .18s ease;
}

/* hover — очень аккуратно */
.header_logo:hover .logo_img{
  transform: translateY(-1px);
  filter:
    drop-shadow(0 4px 10px rgba(0,0,0,0.55));
}

/* мобильная версия */
@media (max-width: 768px){
  .logo_img{
    height: 30px;
  }
}
/* Mobile quick actions (no burger) */
.header_quick{
  display: none;
  align-items: center;
  gap: 8px;
}

.header_quick_btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 14px;
  text-decoration: none;
  font-family: 'HelveticaNeue-Medium';
  font-size: 13px;
  white-space: nowrap;

  color: rgba(242,242,242,0.92);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

body:not(.dark) .header_quick_btn{
  color: rgba(23,23,23,0.92);
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
}

.header_quick_btn_cta{
  background: rgba(140,20,20,0.18);
  border: 1px solid rgba(140,20,20,0.35);
}

.header_quick_btn_cta:hover{
  background: rgba(140,20,20,0.26);
}

/* Mobile: show quick buttons, hide full nav */
@media (max-width: 768px){
  .header_nav{ display: none !important; }
  .header_quick{ display: flex; }
}

/* Very small phones */
@media (max-width: 390px){
  .header_quick{ gap: 6px; }
  .header_quick_btn{ height: 34px; padding: 0 10px; font-size: 12px; }
}


/* ===== FIX: Desktop nav works, Mobile shows quick buttons ===== */

/* Desktop defaults */
.header_right{
  display: flex;
  align-items: center;
  gap: 12px;
}

.header_nav{
  display: flex !important;
  align-items: center;
  gap: 10px;
}

.header_quick{
  display: none !important;
}

/* Mobile */
@media (max-width: 768px){
  .header_nav{ display: none !important; }
  .header_quick{ display: flex !important; }
}