/* Бургер — скрыт на десктопе */
.burger { display:none; }

/* Мобильные правила */
@media (max-width: 1024px) {
  header {
    gap: 10px;
    padding: 12px 16px;
  }

  /* Скрываем горизонтальную навигацию и auth на мобилке */
  .nav_button,
  .nav_auth {
    display: none !important;
  }

  /* Лого чуть меньше */
  .logo { width: 120px; }

  /* Показываем бургер слева от корзины */
  .burger {
    display: inline-flex;
    width: 44px; height: 44px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 12px;
    background: rgba(18,27,34,0.6);
    backdrop-filter: blur(10px);
    align-items: center; justify-content: center;
    gap: 5px;
    margin-left: auto; /* уводим вправо, если нужно — подправь */
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease;
    flex-direction: column;
  }
  .burger:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.6); }
  .burger span {
    display:block;
    width:22px; height:3px; border-radius:2px;
    background: linear-gradient(90deg, rgba(0,187,255,1), rgba(205,56,150,1));
  }

  /* Корзина остаётся в хедере */
  .shop_icon { width: 40px; height: 40px; }

  /* Бэкдроп */
  .mm_backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
    z-index: 999;
  }
  .mm_backdrop.show {
    opacity: 1; pointer-events: all;
  }

  /* Выезжающее меню */
  .mobile_menu {
    position: fixed; top:0; right:0; bottom:0;
    width: min(86vw, 380px);
    background: rgba(18,27,34,0.9);
    backdrop-filter: blur(14px);
    border-left: 1px solid rgba(255,255,255,0.15);
    transform: translateX(100%);
    transition: transform .28s ease;
    z-index: 1000;
    display: flex; flex-direction: column;
    padding: 16px;
  }
  .mobile_menu.open { transform: translateX(0); }

  .mm_top {
    display:flex; align-items:center; justify-content: space-between;
    padding-bottom: 6px; margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
  }
  .mm_logo { width: 120px; }
  .mm_close {
    width: 40px; height: 40px; border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.35);
    background: linear-gradient(90deg, rgba(0,187,255,0.7), rgba(205,56,150,0.7));
    color: #fff; font-size: 24px; line-height: 1;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
  }
  .mm_close:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.6);
    background: linear-gradient(90deg, rgba(0,187,255,1), rgba(205,56,150,1));
  }

  .mm_links {
    display: grid; gap: 10px; padding: 12px 0 8px;
  }
  .mm_links a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-radius: 14px;
    text-transform: uppercase;
    font-family: 'Tiny5', sans-serif; font-weight: 700; font-size: 20px;
    color: #fff; text-decoration: none;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.03);
    transition: transform .15s ease, border-color .2s ease, background .2s ease;
    position: relative;
  }
  .mm_links a:hover {
    transform: translateY(-1px);
    border-color: rgba(0,187,255,0.8);
    background: rgba(0,187,255,0.06);
  }
  .mm_links a::after {
    content: '';
    position: absolute; left: 14px; bottom: 8px;
    width: 40px; height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, rgba(0,187,255,1), rgba(205,56,150,1));
    opacity: 0; transition: opacity .2s ease;
  }
  .mm_links a:hover::after { opacity: 1; }

  /* Cart внутри меню */
  .mm_cart { position: relative; }
  .mm_cart_bubble {
    display:inline-flex; align-items:center; justify-content:center;
    min-width: 22px; height: 22px; padding: 0 6px;
    border-radius: 999px; margin-left: 8px;
    background: #6dd99a; color: #fff; font-size: 12px; font-family: 'Tilt Warp', sans-serif;
  }

  .mm_auth {
    margin-top: auto; padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.15);
    display: grid; gap: 12px;
  }

  /* Блокировка прокрутки, когда меню открыто */
  body.menu-open { overflow: hidden; }
}

@media (max-width:1024px){
  .mobile_menu{ display:flex; }   /* когда не hidden — рендерится и анимируется */
  .mm_backdrop{ display:block; }
}

/* ===== HERO (main) LAPTOP ===== */
@media (max-width: 1280px) {
  .main-content { max-width: 1160px; padding: 20px 20px 140px; }
  .neon-text { top: 16%; left: 10%; max-width: 78%; }
  .neon-text h1 { font-size: 2.3rem; }
  .neon-text p  { font-size: .92rem; }
  .main-bg { width: 980px; height: auto; left: 160px; top: -250px; }
  .vector-left  { width: 210px; left: -80px; top: 22%; }
  .vector-right { width: 240px; right: -90px; top: 10px; }
  .features-line { gap: 90px; }
}

/* ===== TABLET (два блока -> колонка) ===== */
@media (max-width: 1024px) {
  .main-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 16px 120px;
  }

  .left, .right { flex: 1 1 100%; }

  /* неон и заголовок компактнее */
  .neon-bg {
    width: min(640px, 92vw);
    height: auto;
    bottom: 0;
  }
  .neon-text { top: 16%; left: 12%; max-width: 76%; }
  .neon-text h1 { font-size: 2.05rem; line-height: 1.15; }
  .neon-text p  { margin: 10px 0 14px; font-size: .9rem; }
  .btn { padding: 10px 22px; border-radius: 26px; }

  /* персонажи переводим в поток ниже текста */
  .right { text-align: center; }
  .main-bg {
    position: relative;
    left: 0; top: 0;
    width: min(820px, 100%);
    height: auto;
    margin: -8px auto 0;
  }

  /* фоновые пятна меньше */
  .vector-left  { width: 180px; left: -70px; top: 26%; opacity: .9; }
  .vector-right { width: 200px; right: -70px; top: 8px; opacity: .9; }

  /* features: карточки, высота по контенту */
  .features-line {
    margin-top: 20px;
    height: auto;
    padding: 16px;
    gap: 16px;
  }
  .feature {
    max-width: none;
    width: clamp(240px, 46vw, 360px);
  }
  .feature img { width: 52px; height: auto; }
  .feature h3 { font-size: 1.05rem; }
  .feature p  { font-size: .72rem; }
}

/* ===== PHONE (комфортный вид) ===== */
@media (max-width: 768px) {
  .main-content { padding: 8px 14px 96px; }
  .neon-text { top: 15%; left: 11%; max-width: 78%; }
  .neon-text h1 { font-size: 1.85rem; }
  .neon-text p  { font-size: .86rem; }

  /* персонажи ниже и компактнее */
  .main-bg { width: min(640px, 100%); margin-top: -6px; }

  /* пятна можно приглушить */
  .vector-left, .vector-right { opacity: .7; }

  /* features превращаем в горизонтальный скролл со snap */
  .features-line {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 14px 10px;
    gap: 12px;
  }
  .feature {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 12px 14px;
    min-width: 260px;
    scroll-snap-align: start;
  }
  .feature h3 { margin: 8px 0 6px; font-size: 1rem; }
  .feature p  { font-size: .74rem; opacity: .8; }
}

/* ===== VERY SMALL (узкие телефоны) ===== */
@media (max-width: 560px) {
    .main-content { padding-bottom: 250px;}
  .neon-text { top: 15%; left: 10%; max-width: 80%; }
  .neon-text h1 { font-size: 1.62rem; }
  .neon-text p  { font-size: .8rem; }
  .btn { padding: 9px 18px; font-size: .9rem; }

  /* если места критически мало — можно скрыть персонажей */
  .right { display: none; }           /* ← убери эту строку, если хочешь оставить их всегда */

  /* фоновые пятна очень деликатно */
  .vector-left, .vector-right { opacity: .5; filter: blur(1px); }

  /* features: компактнее текст */
  .feature { min-width: 240px; }
  .feature img { width: 46px; }
  .feature p { font-size: .7rem; }
}

/* ====== ≤1024px: правки как в твоём отладчике ====== */
@media (max-width: 1024px) {
  .features-line {
    margin-top: -160px; /* поднимаем линию преимуществ */
  }

  .main-bg {
    position: absolute;
    margin-left: 300px;
    z-index: -999;       /* уводим под контент, чтобы не перекрывал клики */
    height: 900px;
    width: 900px;
    top: -150px;
    left: 0;             /* чтобы работал margin-left */
  }
}

/* ====== ≤768px: персонажа скрываем, оставляем неоновый hero ====== */
@media (max-width: 768px) {
  .right, .main-bg { display: none !important; }

  /* опционально: чуть компактнее сам неон */
  .neon-bg { width: min(620px, 92vw); height: auto; bottom: 0; }
  .neon-text { top: 16%; left: 11%; max-width: 80%; }
  .neon-text h1 { font-size: 1.85rem; line-height: 1.15; }
  .neon-text p  { font-size: .86rem; margin: 10px 0 14px; }
  .btn { padding: 10px 22px; border-radius: 26px; }
}