/* Reset */ *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'GOST type B';
    src: url('fonts/gost/gosttypeb.eot'); /* IE9 Compat Modes */
    src: url('fonts/gost/gosttypeb.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/gost/gosttypeb.woff') format('woff'), /* Modern Browsers */
         url('fonts/gost/gosttypeb.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('fonts/gost/gosttypeb.svg#Gost Type B') format('svg'); /* Legacy iOS */
}




img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  user-select: none; /* Заодно отключает выделение синим щитом при клике */
}


html, body{
        height: 100%;
	background-color: rgba(17, 25, 47);
	font-family: "Play", sans-serif;
	font-style: normal;
        font-weight: 400;
        letter-spacing: 1px;
        box-sizing: border-box;
        scroll-behavior: smooth;
}


body {
    min-height: 100svh; /* Small Viewport Height - stays constant */
}

h1{
        margin-top: 0px;
        margin-bottom: 16px;
        font-family: "Play", sans-serif;
        font-size: 1.25em;
        color: rgba(87, 255, 255);
        font-weight: 400;
        font-style: normal;
}

.headlineTotal {
        line-height: 1.7em;
        color:rgb(187,225,255);
}

h2{
        position: relative;
        display: inline;
        margin-top: 10px;
        margin-bottom: 10px;
        font-family: "Play", sans-serif;
        font-size: 1.27em;
        color: rgba(220, 220, 255);
        font-weight: 400;
        font-style: normal;
}

h3 {
        font-family: "Play", sans-serif;
        font-size: 1.1em;
        color: rgba(100, 220, 240);
        font-weight: 400;
        font-style: normal;
}

p {
        font-family: "Play", sans-serif;
        font-size: 1.25em;
        color: rgba(220, 220, 255);
        font-weight: 400;
        font-style: normal;
}

a {
	text-decoration: none;
	margin-left: 0px;
	margin-right: 0px;
        text-decoration: none;
        color: rgba(220, 90, 125);
}



p:hover span {
    opacity: 1 !important;
}







/* Базовый отступ между всеми крупными секциями на ПК */
.main-section {
    padding-bottom: 90px; 
}


/* Адаптивность: уменьшаем шаг на мобильных экранах */
@media only screen and (max-width: 577px) {
  .main-section {
      padding-bottom: 50px; /* На смартфонах 50px выглядит аккуратно и свободно */
  }
}





.nav-link {
    font-family: "Play", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: rgba(140, 255, 255, 0.99);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: color 0.5s ease, text-shadow 0.5s ease; /* Изменил время на 0.5s для синхронности */
    margin-right: 27px;
    position: relative;         /* Важно: контекст для линии */
    text-decoration: none;      /* На всякий случай гасим стандартное подчеркивание */
    display: inline-block;
}

/* Альтернативный вариант линии (слева направо) */
.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;                   /* Начинаем с нуля слева */
    height: 2px;
    background-color: rgb(87, 255, 255);
    box-shadow: 0 0 8px rgba(87, 255, 255, 0.6);
    transition: width 0.5s ease; /* Заполняет пространство слева направо за 0.5с */
}

/* Эффект при наведении */
.nav-link:hover {
    color: rgb(87, 255, 255);
    text-shadow: 0 0 8px rgba(87, 255, 255, 0.4);
}

.nav-link:hover::after {
    width: 100%;                /* Активация полной ширины */
}

.nav-separator {
    color: rgba(140, 225, 255, 0.2);
    font-size: 14px;
}




/* Верхняя панель навигации */
.top-bar {
    display: flex;
    justify-content: center;       /* Центрируем содержимое панели */
    align-items: center;
    margin-top: 32px;               /* Отступ сверху от края экрана/контейнера */
    margin-bottom: 36px;            /* Отступ снизу до основного блока оплаты */
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* Ссылка / контейнер бренда внутри top-bar */
.main-site-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;                      /* Современный отступ между логотипом и текстом */
    text-decoration: none;
}

/* Стили логотипа */
.brand-logo {
    height: 40px;
    width: auto;
    display: block;
    margin-right: 8px;              /* Фолбэк-марджин справа на случай отсутствия поддержки gap */
    filter: drop-shadow(0 0 10px rgba(87, 255, 255, 0.4));
}

/* Стили для самого текста "shustree" в шапке */
.top-bar-text {
    font-family: 'GOST type B', sans-serif;
    font-size: 1.45rem;             /* Пропорциональный размер под высоту логотипа 40px */
    font-weight: 400;
    font-style: italic;             /* Фирменный курсив */
    color: rgb(87, 255, 255);     /* Используем вашу переменную яркого бирюзового циана */
    letter-spacing: 1.5px;
    line-height: 1;
    opacity: 0.95;                  /* В шапке на внутренних страницах делаем бренд сразу четким */
    margin: 0;                      /* Сбрасываем дефолтные марджины текста */
    
    /* Аккуратное, ненавязчивое свечение, адаптированное под меньший размер букв */
    text-shadow: 0 0 10px rgba(87, 255, 255, 0.4),
                 0 0 20px rgba(87, 255, 255, 0.15);
                 
    transition: text-shadow 0.2s ease;
}

/* Корректировка для мобильных устройств, чтобы элементы не зажимались */
@media only screen and (max-width: 480px) {
    .top-bar {
        margin-top: 20px;           /* Чуть меньше отступ сверху на мобилках */
        margin-bottom: 24px;        /* Компактный отступ снизу на мобилках */
    }

    .top-bar-text {
        font-size: 1.4rem;          /* Чуть уменьшаем на смартфонах */
        letter-spacing: 1px;
    }
}





.brand-logo {
    height: 40px; /* Оптимальная высота под размер шрифта */
    width: auto;
    display: block;
    /* Сдвигаем картинку ровно на 2 пикселя вверх для оптического выравнивания */
    transform: translateY(-2px);
    /* Добавляем базовое мягкое свечение для графического знака */
    filter: drop-shadow(0 0 10px rgba(87, 255, 255, 0.4)) 
            drop-shadow(0 0 20px rgba(87, 255, 255, 0.1));
            
    /* Плавный переход для фильтра при наведении */
    transition: filter 0.2s ease;
    
}






/* --- ТАБЛИЦА С ИНФОРМАЦИЕЙ ОБ АККАУНТЕ --- */
.pay-info-table {
    width: 100%;
    max-width: 420px;               /* Ограничиваем ширину для компактности */
    border-collapse: separate;
    border-spacing: 0 10px;         /* Вертикальный отступ между строками таблицы */
    margin-top: 10px;               /* Отступ сверху */
    margin-bottom: 0px;            /* Адекватный марджин снизу до описания/инпута */
    margin-left: 0;                 /* Выравнивание по левому краю (или auto для центра) */
}

/* Левая колонка (названия полей) */
.pay-info-table .pay-label {
    text-align: left !important;    /* Принудительно выравниваем по левому краю */
    font-size: 1.05rem;
    color: rgba(220, 245, 255, 0.85);
    font-weight: 500;
    padding-right: 20px;            /* Адекватный отступ справа до значения */
    padding-left: 0;                /* Убираем внутренний отступ слева, чтобы ровнять по краю контейнера */
    white-space: nowrap;
    vertical-align: middle;
}

/* Правая колонка (неоновые значения) */
.pay-info-table .pay-val {
    vertical-align: middle;
    text-align: left;
}

/* Базовый стили для Баланса (ярко-бирюзовый / зеленый циан) */
.pay-val-balance span,
#shustreeBalance {
    color: #00ffcc !important;
    font-weight: 400 !important;
    font-size: 1.1rem !important;
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(0, 255, 204, 0.5),
                 0 0 18px rgba(0, 255, 204, 0.2);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Розовый неоновый стиль при нулевом балансе */
.pay-val-balance span.is-zero,
#shustreeBalance.is-zero {
    color: #ff3388 !important;
    text-shadow: 0 0 8px rgba(255, 51, 136, 0.6),
                 0 0 18px rgba(255, 51, 136, 0.3) !important;
}



/* Неоновый стиль для ID (небесно-голубой циан) */
.pay-val-uid span,
#shustreeUid {
    color: #7dd3fc !important;
    font-weight: 400 !important;
    font-size: 1.4rem !important;
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(125, 211, 252, 0.5),
                 0 0 18px rgba(125, 211, 252, 0.2);
}

/* Лаконичное описание под таблицей */
.pay-description {
    text-align: left !important;    /* Строгое выравнивание по левому краю */
    max-width: 420px;               /* Соразмерность с шириной таблицы */
    margin-top: 0;
    margin-bottom: 28px;            /* Адекватный отступ снизу до поля ввода email */
    margin-left: 0;                 /* Прижим к левой границе */
    
    font-size: 0.95rem;             /* Соразмерный аккуратный кегль */
    line-height: 1.4;
    color: rgba(220, 245, 255, 0.9); /* Сделали более светлым и читаемым */
    opacity: 0.9;
}

/* Настройки для мобильных устройств */
@media only screen and (max-width: 480px) {
    .pay-description {
        font-size: 0.85rem;
        margin-bottom: 20px;
    }
}





/* Контейнер для выравнивания ID и кнопки в одну строку */
.id-copy-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    vertical-align: middle;
    margin-top: 4px;
}

/* Стили кнопки копирования */
.copy-btn {
    background: rgba(125, 211, 252, 0.08);
    border: 1px dashed rgba(125, 211, 252, 0.4);
    color: #7dd3fc;
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 0px; /* Поддерживаем строгий индустриальный стиль без скруглений */
    transition: all 0.25s ease;
}

/* Размер SVG иконки внутри кнопки */
.copy-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

/* Эффект при наведении (Hover) */
.copy-btn:hover {
    background: rgba(125, 211, 252, 0.2);
    border-color: #7dd3fc;
    box-shadow: 0 0 10px rgba(125, 211, 252, 0.4);
    transform: translateY(-1px);
}

.copy-btn:hover svg {
    transform: scale(1.1);
}

/* Состояние после успешного копирования (зеленовато-бирюзовый успешный неон) */
.copy-btn.copied {
    background: rgba(87, 255, 200, 0.15);
    border-color: rgb(87, 255, 200);
    color: rgb(87, 255, 200);
    box-shadow: 0 0 12px rgba(87, 255, 200, 0.5);
}

















/* --- СТИЛИЗАЦИЯ БРЕНДА: ЦЕНТРИРОВАНИЕ И НЕОН --- */

#logoSizing {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    position: relative;
}

.logo-brand-link {
    display: inline-block;
    position: relative; /* Создаем контекст для абсолютного позиционирования текста */
    text-decoration: none;
}

#logoCarbon {
    display: block;
    width: 74px;
    height: auto;
    opacity: 0.75; /* Базовая прозрачность как у знака, так и у текста */
    filter: drop-shadow(0 0 15px rgba(87, 255, 255, 0.5)) 
            drop-shadow(0 0 30px rgba(87, 255, 255, 0.1));
    transition: opacity 0.4s ease, filter 0.4s ease;
}

#enableButton {
    display: block;
    width: 74px;
    height: auto;
}


/* Текстовая часть "shustree" справа */
.logo-text {
    position: absolute;
    left: calc(100% + 16px); /* Прижимаем строго к правому краю картинки + зазор 16px */
    top: 50%;
    transform: translateY(-50%); /* Идеальное центрирование по высоте относительно иконки */
    
    font-family: 'GOST type B', sans-serif;
    font-size: 1.7rem;
    font-weight: 400;
    font-style: italic;
    color: rgb(87, 255, 255); /* Цвет монолитен и неизменен */
    letter-spacing: 2px;
    line-height: 1;
    opacity: 0.75; /* По умолчанию совпадает с shustree_x.png */
    
    /* Мягкое базовое свечение */
    text-shadow: 0 0 15px rgba(87, 255, 255, 0.5),
                 0 0 30px rgba(87, 255, 255, 0.1);
                 
    transition: opacity 0.4s ease, text-shadow 0.4s ease;
    white-space: nowrap; /* Запрещаем перенос текста на новую строку */
}

/* --- НЕОНОВЫЙ ИНТЕР-ХОВЕР (ТОЛЬКО СВЕЧЕНИЕ, БЕЗ СМЕНЫ ЦВЕТА) --- */
.logo-brand-link:hover #logoCarbon {
    filter: drop-shadow(0 0 20px rgba(87, 255, 255, 0.8)) 
            drop-shadow(0 0 40px rgba(87, 255, 255, 0.3));
}

.logo-brand-link:hover .logo-text {
    /* Цвет и opacity не меняются, но неон наливается глубиной */
    text-shadow: 0 0 18px rgba(87, 255, 255, 0.8),
                 0 0 35px rgba(87, 255, 255, 0.4);
}

/* Адаптивность для мобилок */
@media only screen and (max-width: 577px) {
    .logo-text {
        font-size: 2rem;
        left: calc(100% + 12px);
    }
}









Отличная задача! Ниже приведены аккуратные точечные изменения, которые решают поставленные задачи и сохраняют ваш оригинальный CSS и верстку без поломок на других страницах.

1. Точечные изменения в CSS
Добавьте в конец вашего CSS-файла (darkshustreestyle.css) следующий изолированный блок стилей:

CSS
/* --- ТОЧЕЧНЫЕ ПРАВКИ ДЛЯ СТРАНИЦЫ ОПЛАТЫ --- */

/* 1. Настройка отображения бренда (логотип + шрифтовой текст GOST) */
.pay-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    text-decoration: none;
}

.pay-brand-logo {
    height: 44px;
    width: auto;
    display: block;
    filter: drop-shadow(0 0 10px rgba(87, 255, 255, 0.5));
}

.pay-brand-text {
    font-family: 'GOST type B', sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    font-style: italic;
    color: rgb(87, 255, 255);
    letter-spacing: 2px;
    line-height: 1;
    text-shadow: 0 0 12px rgba(87, 255, 255, 0.6);
}

/* 2. Изолированные стили для значений Баланса и ID */
.pay-val-balance {
    color: #00ffcc !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(0, 255, 204, 0.4);
    vertical-align: middle;
}

.pay-val-uid {
    color: #7dd3fc !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(125, 211, 252, 0.4);
    vertical-align: middle;
}

/* 3. Состояния placeholder для инпута email */
.inputId::placeholder {
    color: rgba(148, 255, 255, 0.87) !important;
    font-weight: 400 !important;
    transition: color 0.3s ease, font-weight 0.3s ease;
}

.inputId.input-warn::placeholder {
    color: rgb(255,100,187) !important;
    opacity: 1 !important;
    text-shadow: 0 0 6px rgba(255, 51, 102, 0.5);
}
















/* Базовые стили инфо-блоков (общие) */
.news {
  background-color: rgba(20, 42, 66, 0.65); /* Сделали чуть прозрачнее и благороднее */
  border-left: 2px solid rgba(87, 255, 255, 0.4); /* Заменили нижнюю черту на стильную левую грань */
  border-bottom: none;
  position: relative;
  box-sizing: border-box;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Плавная анимация до 0.5с */
  z-index: 10;
}


.news .link.info {
  text-decoration: none;
  color: #e0f7fc;
  font-size: 1.05rem;
  line-height: 1.4;
  display: block;
  transition: color 0.3s ease;
}


/* Эффекты при наведении на ПК */
@media only screen and (min-width: 577px) {
  .news:hover {
    background-color: rgba(27, 57, 87, 0.9);
    border-left-color: rgb(87, 255, 255);
    transform: translateY(-2px); /* Легкий интерактивный подъем */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 12px rgba(87, 255, 255, 0.15);
  }
  .news:hover .link.info {
    color: rgb(87, 255, 255); /* Подсветка текста при наведении */
  }
}



.disclaimer {
  font-size: 1.17em;
  font-style: italic;
  color: rgb(170,170,255);
  margin-top: 10px;
}



.victory-icon {
    position: fixed;
    top: 5px;
    left: 5px;
    width: 255px;
    height: 255px;
    z-index: 3000;
    pointer-events: none;
}




/* Новый изолированный контейнер для центральной части */
#promo_hero_container {
  display: flex;
  flex-direction: column;
  align-items: center; /* Центрируем все элементы по горизонтали */
  text-align: center;
  width: 100%;
  max-width: 800px;    /* Ограничиваем максимальную ширину, чтобы не наезжать на правый блок новостей */
  margin: 0 auto;      /* Идеальное центрирование самого контейнера на экране */
  position: relative;
  pointer-events: none; /* Пропускаем клики сквозь пустые области контейнера к нижним слоям */
}




/* Возвращаем кликабельность элементам управления внутри контейнера */
.enabler-container,
#headline_summary,
.basement-line-wrapper {
  pointer-events: auto;
}


/* Контейнер для кнопки enabler */
.enabler-container {
  margin-top: 47px; /* Эквивалент padding-top:100px от старого .sizing на ПК */
}

/* Базовое состояние кнопки */
#enablerHover img {
    /* Мягкая дефолтная подсветка, показывающая, что кнопка активна для клика */
    filter: drop-shadow(0 0 8px rgba(87, 255, 255, 0.2));
    transition: filter 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Эффект при наведении (Ховер) */
#enablerHover:hover img {
    /* Яркое неоновое киберпанк-свечение при наведении */
    filter: drop-shadow(0 0 15px rgba(87, 255, 255, 0.6)) 
            drop-shadow(0 0 30px rgba(87, 255, 255, 0.2));
            
    /* Легкий интерактивный микро-масштаб (по желанию, для тактильности) */
    transform: scale(1.04); 
}











/* Главная секция инструкций — теперь сама управляет потоком */
#vpn_carbon_promo_instruction {
  width: 100%;
  max-width: 600px;
  margin: 97px auto 0 auto; /* Увеличили отступ от главного бокса */
  padding: 0;
  text-align: left;
  box-sizing: border-box;
}

.step-card {
  background: 
    linear-gradient(rgba(18, 18, 56, 0.6), rgba(13, 23, 42, 0.7)),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15) 2px, transparent 2px, transparent 4px);
  
  border-left: 2px solid rgba(87, 255, 255, 0.3);
  box-shadow: inset 0 0 15px rgba(87, 255, 255, 0.03);
  backdrop-filter: blur(5px);
  padding: 24px;
  margin-bottom: 30px;
  transition: all 0.4s ease;
  /* Форсируем создание отдельного слоя в GPU */
  will-change: transform, opacity; 
  transform: translateZ(0);

}


.step-card:hover {
  /* При наведении подмешиваем радиальный неоновый отсвет */
  background: 
    radial-gradient(circle at 10% 10%, rgba(255, 90, 174, 0.08) 0%, transparent 50%),
    linear-gradient(rgba(22, 28, 66, 0.7), rgba(15, 27, 50, 0.75)),
    repeating-linear-gradient(0deg, rgba(87, 255, 255, 0.03), rgba(87, 255, 255, 0.03) 2px, transparent 2px, transparent 4px);
  border-left-color: rgb(255, 90, 174);
  box-shadow: -5px 0 20px rgba(255, 90, 174, 0.2), inset 0 0 15px rgba(87, 255, 255, 0.05);
}




/* Заголовки шагов */
.step-title {
  color: rgb(200,220,255);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 0;
}

/* Свободный отступ внутри первого шага до кнопок */
.market-links {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}




/* Прозрачные технологичные плашки кнопок */
.market-btn, .market-info-block {
  display: flex;
  align-items: center;
  text-decoration: none;
  background: rgba(15, 23, 42, 0.4);
  border: 2px dashed rgba(87, 255, 255, 0.1);
  padding: 14px 18px;
  border-radius: 0px;
  transition: all 0.3s ease;
}

.market-btn {
  cursor: pointer;
}


/* Неоновое свечение кнопок при наведении */
@media only screen and (min-width: 577px) {
  .market-btn:hover {
    border-color: rgb(87, 255, 255);
    background: rgba(27, 57, 87, 0.6);
    transform: translateX(6px); /* Чуть более выраженный сдвиг */
    box-shadow: 0 0 20px rgba(87, 255, 255, 0.2), inset 0 0 8px rgba(87, 255, 255, 0.1);
  }
}

.market-btn:hover .market-icon {
  opacity: 1;
}

.market-btn:hover .market-text {
  color: rgb(200,220,255);
}



/* Базовые цвета граней для суб-стилей */

/* ВАРИАНТ 1 (например, для Chrome Store):
   Слева: rgb(100, 100, 255) — Сине-фиолетовый
   Снизу: rgb(100, 200, 255) — Лазурный
   Справа/Сверху: rgb(100, 255, 200) — Бирюзовый */
.market-btn--sub-1 {
  border-left-color: rgb(50, 150, 255);
}

/* ВАРИАНТ 2 (например, для Google Play):
   Слева: rgb(100, 200, 255) — Лазурный
   Снизу: rgb(100, 255, 200) — Бирюзовый
   Справа/Сверху: rgb(100, 100, 255) — Сине-фиолетовый */
.market-btn--sub-2 {
  border-left-color: rgb(25, 200, 190);
}

/* ВАРИАНТ 3 (например, для APK):
   Слева: rgb(100, 255, 200) — Бирюзовый
   Снизу: rgb(100, 100, 255) — Сине-фиолетовый
   Справа/Сверху: rgb(100, 200, 255) — Лазурный */
.market-btn--sub-3 {
  border-left-color: rgb(150, 100, 255);
}

/* При наведении сохраняем ваш стандартный hover-эффект,
   но границы оставляют свои три цвета ярче */
@media only screen and (min-width: 577px) {
  .market-btn--sub-1:hover {
    border-left-color: rgb(50, 150, 255);
  }

  .market-btn--sub-2:hover {
    border-left-color: rgb(25, 200, 190);
  }

  .market-btn--sub-3:hover {
    border-left-color: rgb(150, 100, 255);
  }
}



.market-info-block {
  border-color: rgba(255, 255, 255, 0.04);
  background: rgba(15, 23, 42, 0.15);
}


.market-icon {
  flex-shrink: 0;
  opacity: 0.75;
  transition: opacity 0.3s ease;
}


.market-text {
  color: rgb(175, 225, 255);
  font-size: 1.05rem;
  margin-left: 18px;
  line-height: 1.45;
  transition: color 0.3s ease;
}


/* Облегченная карточка предупреждения */
.disclaimer-card {
  background: rgba(30, 20, 35, 0.1);
  border-left-color: rgba(244, 63, 94, 0.2);
  margin-bottom: 40px; /* Отделяем от финала страницы */
}

.disclaimer-card:hover {
  background: rgba(40, 22, 45, 0.55);
  border-left-color: rgba(244, 99, 178, 0.9);
  box-shadow: -6px 0 20px rgba(244, 63, 94, 0.15);
}

/* Облегченная карточка промо деталей */
.details-card {
  background: rgba(10, 30, 35, 0.1);
  border-left-color: rgba(87, 225, 255, 0.2);
  margin-bottom: 40px; /* Отделяем от финала страницы */
}

.details-card:hover {
  background: rgba(20, 45, 55, 0.55);
  border-left-color: rgba(244, 99, 178, 0.9);
  box-shadow: -6px 0 20px rgba(244, 63, 94, 0.15);
}




.disclaimer {
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgb(255,99,178);
  margin: 0;
}


.details {
  font-size: 0.95rem;
  line-height: 1.7em;
  color: rgb(187,250,255);
  margin: 0;
}


.warn-accent {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.calm-accent {
  font-weight: 500;
  color: rgb(148,220,255);
  text-transform: uppercase;
  margin-top:10px;
  line-height: 1.4em;
  letter-spacing: 1px;
  font-size: 0.95rem;
}


/* Неоновый светящийся ID в той же строке */
.neon-id {
    font-size: 1.1em;
    font-weight: bold;
    color: #93e1ff;
    letter-spacing: 0.5px;
    text-shadow: 0 0 6px rgba(147, 225, 255, 0.7);
}




/* Выравнивание строки с сервисами */
.services-headline {
  display: block;
  line-height: 1.5;
}

/* Элемент сервиса (иконка + текст) */
.service-item {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* Отступ между иконкой и текстом сервиса */
  white-space: nowrap;
}

/* Единый размер и выравнивание иконок */
.service-icon {
  width: 1.1em;
  height: 1.1em;
  display: inline-block;
  vertical-align: -0.15em; /* Выравнивание строго по базовой линии текста */
  flex-shrink: 0;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* При ховере на заголовок иконки слегка увеличиваются и получают неоновое свечение */
#x2:hover .service-icon {
  transform: scale(1.1);
  filter: drop-shadow(0 0 6px rgba(87, 255, 255, 0.8));
}




/* ---  EMAIL INPUT --- */
.inputId {
    /* Твои текущие свойства */
    outline: none;
    padding: 4px 0px !important;
    resize: none;
    font-family: "Play", sans-serif;
    font-style: normal;
    width: 100% !important;
    border: none;
    font-size: 1.3em;
    color: rgb(147, 225, 255);
    background-color: transparent; 
    border-radius: 4px;
    font-weight: 300;
    display: block;
    margin: 0px 0 10px 0 !important;
    box-sizing: border-box;

    /* Принудительный цвет курсора по умолчанию */
    caret-color: rgb(147, 225, 255) !important;
}

.inputId::placeholder {
    font-style: normal;
    color: rgba(87,85,255);
}

/* Второе состояние — "укажите корректный email", включается через JS-класс */
.inputId.input-warn::placeholder {
     color: rgb(255, 100, 187);
     opacity: 1;
}



/* --- СЕТКА ТАРИФНЫХ КАРТОЧЕК --- */
.pricing-grid {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 22px;
}

/* Базовый стиль прямоугольной карточки */
.pricing-card {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap; /* Чтобы на совсем узких экранах текст корректно переносился */
  
  padding: 12px 8px;
  border-radius: 0px; /* Сохраняем твой строго индустриальный стиль без скруглений */
  border: 2px dashed rgba(125, 255, 255, 0.2);
  
  cursor: pointer;
  user-select: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Текстовые элементы внутри карточки */
.pricing-card .old-price {
  color: rgb(255, 100, 178);
  font-size: 0.95em;
}

.pricing-card .new-price {
  color: rgb(125, 255, 255);
  font-weight: bold;
  font-size: 1.2em;
  transition: text-shadow 0.3s ease, color 0.3s ease;
}

.pricing-card .period {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95em;
}

/* --- Различие по оттенкам (Индиго + Неон) --- */

/* Карточка 1: Глубокий темно-синий / Индиго */
.pricing-card.card-1 {
  background: linear-gradient(135deg, rgba(20, 35, 65, 0.9) 0%, rgba(12, 22, 40, 0.9) 100%);
  border-color: rgba(155, 155, 255, 0.35);
}

/* Карточка 2: Чуть более насыщенный индиго с легким фиолетово-розовым подтоном */
.pricing-card.card-2 {
  background: linear-gradient(135deg, rgba(32, 30, 68, 0.9) 0%, rgba(18, 20, 48, 0.9) 100%);
  border-color: rgba(255, 90, 174, 0.3);
}

/* Карточка 3: Плотный холодный индиго-циановый */
.pricing-card.card-3 {
  background: linear-gradient(135deg, rgba(16, 45, 68, 0.9) 0%, rgba(10, 26, 44, 0.9) 100%);
  border-color: rgba(87, 255, 255, 0.35);
}

/* --- ЭФФЕКТЫ ПРИ НАВЕДЕНИИ (HOVER) --- */
.pricing-card:hover {
  transform: translateY(-2px);
  background: rgba(25, 45, 80, 0.95);
}

.pricing-card.card-1:hover {
  border-color: rgb(155, 155, 255);
  box-shadow: 0 0 15px rgba(125, 255, 255, 0.4), inset 0 0 10px rgba(125, 255, 255, 0.15);
}

.pricing-card.card-2:hover {
  border-color: rgb(255, 90, 174);
  box-shadow: 0 0 15px rgba(255, 90, 174, 0.45), inset 0 0 10px rgba(255, 90, 174, 0.15);
}

.pricing-card.card-3:hover {
  border-color: rgb(87, 255, 255);
  box-shadow: 0 0 18px rgba(87, 255, 255, 0.5), inset 0 0 12px rgba(87, 255, 255, 0.2);
}

/* Сочное свечение неоновой цены при ховере */
.pricing-card:hover .new-price {
  color: #ffffff;
  text-shadow: 0 0 10px rgb(125, 255, 255), 0 0 20px rgb(125, 255, 255);
}

/* --- АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ (до 577px) --- */
@media only screen and (max-width: 577px) {
  .pricing-grid {
    flex-direction: column; /* Перестраиваем карточки в столбик на узких экранах */
    gap: 8px;
  }
  
  .pricing-card {
    padding: 10px 14px;
    justify-content: center;
  }
}





/* Корректировка обертки линии */
.basement-line-wrapper {
  padding-top: 20px;
  width: 100%;
}

/* Мобильная адаптация */
@media only screen and (max-width: 577px) {
  #vpn_carbon_promo_instruction {
    max-width: 100%;
    padding: 0 15px;
    margin-top: 97px;
  }
  
  .step-card {
    padding: 18px 16px;
    margin-bottom: 20px; /* На мобильных отступы чуть меньше, но воздух сохраняется */
  }
  
  .step-title {
    font-size: 1.1rem;
  }
  
  .market-btn, .market-info-block {
    padding: 12px;
  }
  
  .market-icon {
    width: 48px;
    height: 48px;
  }
  
  .market-text {
    font-size: 0.85rem;
    margin-left: 14px;
  }
}









/* --- СТИЛИЗАЦИЯ ИНФО-БОКСА (Индустриальный апгрейд) --- */
#headline_box {
    position: relative;        /* Важно: становится точкой отсчета для нижней плашки */
    overflow: hidden;         /* Важно: чтобы картинка не вылезала за скругленные углы бокса */
    
    background:
        /* Лучи из центра верхнего ребра */
        radial-gradient(circle at 50% 0%, rgba(255, 90, 174, 0.12) 0%, transparent 75%),
        /* Изящная диагональная металлическая штамповка */
        repeating-linear-gradient(
            45deg,
            rgba(177, 177, 255, 0.02) 0px,
            rgba(177, 177, 255, 0.02) 3px,
            transparent 3px,
            transparent 9px
        ),
        /* Плотная глубокая подложка для читаемости на фоне динамичного видео */
        rgba(15, 27, 49, 0.87);
    
    /* РЕШЕНИЕ: Сверху оставляем честные 36px. Снизу ужимаем до 16px, 
       чтобы компенсировать высоту розового штриха */
    padding: 36px 96px 26px 96px;
    
    max-width: 800px;
    width: 100%;
    border: 1px solid rgba(255, 99, 174, 0.15);
    /*border-left: 3px solid rgb(255, 90, 174);*/ /* Фирменная неоновая черта */
    border-radius: 0px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 90, 174, 0.05);
    backdrop-filter: blur(6px);
    transition: all 0.5s ease;
}

#headline_box:hover {
    border-color: rgba(255, 90, 174, 0.3);
    /*border-left-color: rgb(255, 90, 174);*/
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 90, 174, 0.15);
}

#headline_box h2.sizing_bottom {
    display: block;
    margin: 0 0 22px 0;
    padding: 0;
    transition: color 0.3s ease;
}

#headline_box h2.sizing_bottom:last-child {
    margin-bottom: 0;
}


/* --- Новые стили для индустриального штриха --- */
.headline-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;               /* Идентичная ширина с боксом */
    height: auto;             /* Сохраняем пропорции картинки */
    display: block;
    max-width: 100% !important; /* Перебиваем глобальный img */
    max-height: 100% !important;
    
    opacity: 0.5;              /* Прозрачность по умолчанию */
    mix-blend-mode: screen;    /* Интегрирует белые области картинки в структуру нашего темного фона */
    pointer-events: none;      /* Чтобы картинка не мешала выделению текста над ней */
    
    transition: opacity 0.5s ease; /* Плавное проявление за те же 0.5с, что и весь бокс */
}

/* При наведении на весь инфо-бокс — выкручиваем прозрачность штриха в единицу */
#headline_box:hover .headline-bar {
    opacity: 1;
}



/* Корректируем обертку #headline_summary, убирая скачущие padding */
.sizing {
  padding: 0; /* Очищаем, так как внешние интервалы теперь контролирует #promo_hero_container */
}




/* Корректировка декоративной линии */
.basement-line-wrapper {
  padding-top: 69px;
  width: 100%;
}

/* Медиа-запрос для мобильных устройств (адаптивность отступа кнопки) */
@media only screen and (max-width: 577px) {
  #promo_hero_container {
    max-width: 100%; /* На мобилках используем всю доступную ширину */
    padding: 0 15px;
  }
  .enabler-container {
    margin-top: 34px; /* Компактный отступ для мобильных экранов */
  }

/* Адаптируем сам бокс под мобильные устройства */
  #headline_box {
    padding: 24px 20px 14px 20px; /* Делаем отступы чуть компактнее на смартфонах */
  }

  /* Настраиваем шаги между заголовками на мобильных */
  #headline_box h2.sizing_bottom {
    margin-bottom: 20px; /* Равномерный шаг между элементами */
  }

  /* Жестко глушим нижний отступ у #x3 на мобильных, чтобы не выдавливал низ */
  #headline_box h2.sizing_bottom:last-child {
    margin-bottom: 0;
  }
  
}







#walking_box {
  background-color: rgba(27, 57, 87, 0.87);
  background:
    /* The metallic sheen */
    linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.1) 100%),
    /* The brushed texture (very subtle repeating lines) */
    repeating-linear-gradient(
        135deg,
        rgba(177,177,255, 0.03) 0px,
        rgba(177,177,255, 0.03) 3px,
        transparent 3px,
        transparent 9px
    ),
    /* Your base color */
    rgba(7, 34, 77, 0.85);
  padding: 89px 36px 0px 36px;
  max-width: 789px;
  border-left: 1px solid rgb(87, 100, 255);
  /*display: flex;*/
  justify-content: center;
}


#walking_box_x {
  background-color: rgba(27, 57, 87, 0.87);
  padding: 89px 36px 0px 36px;
  max-width: 789px;
  border-left: 1px solid rgb(87,100,255);
  display: flex;
  justify-content: center;
}



/* Ссылки на интерактивные строки */
#x1, #x2, #x3 {
    cursor: pointer;
}
#x1:hover, #x2:hover, #x3:hover {
    color: rgb(87, 255, 255);
    text-shadow: 0 0 8px rgba(87, 255, 255, 0.6);
}

.rating {
  font-size:1.25em;
}


.left {
  width: 37%;
  text-align: left;
}



.info {
  font-size: 1.25em;
  line-height:1.24em;
  color: rgba(140, 225, 255);
  display: block;
}



a:hover{
	text-decoration: none;
}

img {
    max-width: 100%;
    max-height: 100%;
}



.link { 
  color: rgba(220, 220, 255);
  text-decoration: none;
  display: block;
  width: fit-content;
  height: 100%;
} 


.link:hover { 
  color: rgba(87, 255, 255);
  text-decoration: none;
  cursor: pointer;
}



/* --- Премиальный стиль навигации (Верхние углы) --- */
.about-link-desktop {
    position: absolute;
    top: 24px;
    left: 32px;
    z-index: 1000;
}


/* Стили для переключателя языков */
.lang-switcher-desktop {
  position: absolute;
  top: 24px;
  right: 20px;
  font-family: sans-serif;
  font-size: 14px;
  color: rgba(120, 120, 255, 0.6); /* Полупрозрачный для неактивных элементов */
  display: flex;
  gap: 6px;
  z-index: 1000;
}



/* Активный язык — яркий, некликабельный текст */
.lang-active {
  color: rgba(220, 220, 255);
  font-weight: bold;
}





/* Center all content in the box */
#thirdX {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Container for links to keep them stacked and centered */
.link-container {
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: 18px; /* Spacing between links */
    margin: 20px 0;
}

/* Layout for the link container */
.link-container {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Space between the two links */
  margin: 20px 0;
}

/* Styling the links to include images */
.linkX {
  display: flex;
  align-items: center; /* Vertically centers text to the image */
  text-decoration: none;
  color: rgb(87,255,255);
  font-size: 1.2rem;
}

/* Adds the images before the text */
.linkX::before {
  content: "";
  display: inline-block;
  width: 40px;  /* Adjust size as needed */
  height: 40px; /* Adjust size as needed */
  margin-right: 15px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Specific image for Android */
.linkX[href*="play.google"]::before {
  background-image: url('https://shustree.ru/static/img/android_app_install.png');
}

/* Specific image for Browser extension */
.linkX[href*="chromewebstore"]::before {
  background-image: url('https://shustree.ru/static/img/browser_install.png');
}








.headline a{
  color: rgba(96, 245, 255,.8);
}

.headline p:hover { 
  color: rgba(90, 177, 177);
}

.headline a:hover { 
  color: rgba(87, 255, 255);
}



.instruction {
  font-size:1.9em;
  line-height:55px;
}


.excite {
          opacity: 0.545;
          cursor: pointer;
          font-size:47px;
          color:rgb(87, 255, 255);
          line-height:47px;
          height:125px;
}




.excite:hover {
  opacity:	1;
  background-image: url("/static/img/pay_line_2.png");
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 120px auto;
}


.promo_excite {
          opacity: 0.87;
          cursor: pointer;
}


.promo_excite:hover {
          opacity: 1;
}


#totalEnabler:hover {
  opacity:	1;
}



.buyLine {
  background-image: url("/static/img/pay_line_1.png");
}




/* --- Новая стилизация Футера --- */
.footer {
    width: 100%;
    margin-top: 100px;
    padding-bottom: 40px;
    display: flex;
    justify-content: center; /* Центрируем саму оболочку на экране */
    box-sizing: border-box;
}

.footer-content {
    width: 100%;
    max-width: 600px;      /* Строго по ширине ваших карточек и headline_box */
    padding: 0 15px;       /* Защитные поля для мобилок */
    text-align: left;      /* Железное выравнивание по левому краю везде */
    
    /* Технологичная разделяющая полоса */
    border-top: 1px solid rgba(87, 255, 255, 0.45); 
    padding-top: 30px;
    position: relative;
}

/* Маленький неоновый маркер в начале полосы для стиля */
.footer-content::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 15px;
    width: 40px;
    height: 1px;
    background: rgb(255, 99, 178); /* Фирменный розовый неон */
    box-shadow: 0 0 10px rgb(255, 90, 174);
}

/* Базовое состояние строк: строгий приглушенный стиль */
.footer-content p {
    margin-bottom: 16px;
    opacity: 0.75; 
    transform: translateY(0);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-content p:last-child {
    margin-bottom: 0;
}

/* Легкая анимация раскрытия при наведении мыши на футер */
.footer-content:hover p {
    opacity: 0.95; /* Текст становится значительно четче, но не перетягивает внимание */
}

/* Индивидуальный интерактив для ссылок при наведении на конкретную строку */
.footer .link.bottom {
    font-size: 0.95rem;
    color: rgba(220, 220, 255, 0.85);
    display: inline-block;
    transition: color 0.3s ease;
}

.footer .link.bottom:hover {
    color: rgb(87, 255, 255); /* Подсвечиваем бирюзой при фокусе */
    opacity: 1 !important;
}

/* Специфичные блоки внутри футера */
.lang-switcher-mobile {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Красивые аккуратные отступы между ссылками вместо жестких маргинов */
}

.footer-github a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.footer-github svg {
    vertical-align: middle;
    transition: transform 0.3s ease;
    transform: translateY(-2px);
}

.footer-github:hover svg {
    transform: rotate(12deg) scale(1.1); /* Интерактивный микро-эффект для иконки гитхаба */
}


/* Адаптивность для мобильных устройств */
@media only screen and (max-width: 577px) {
    .footer {
        margin-top: 60px; /* Чуть прижимаем на смартфонах */
    }
    .footer-content {
        padding: 0 20px;
    }
    .footer-content::before {
        left: 20px;
    }
    .footer-content p {
        font-size: 1.1em; /* Соответствие вашей мобильной типографике */
        line-height: 1.5;
        opacity: 0.9; /* На мобильных экранах (где нет ховера мыши) сразу даем чуть больше читаемости */
    }
}







#overlay {
        position: fixed; /* Sit on top of the page content */
        display: none; /* Hidden by default */
        width: 100%; /* Full width (cover the whole page) */
        height: 100%; /* Full height (cover the whole page) */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(17,17,55,0.9); /* Black background with opacity */
        z-index: 35; /* Specify a stack order in case you're using a different order for other elements */
        cursor: pointer; /* Add a pointer on hover */
}
#warning{
        position: absolute;
        margin-top: 280px;
        left: 50%;
        font-size: 25px;
        transform: translate(-50%,-50%);
       -ms-transform: translate(-50%,-50%);
}




.line {
  border:none;	
  border-top: 2px dashed rgba(155, 155, 255, .5);  
}


.column {
  float: left;
  padding: 0px;
  height: 120px;
}



.basementline {
  opacity:0.3;
}

/* --- Columns for Responsive Design  --------------------------------------------------------------------------------------------- */



.preview_left {
      width: 120px;
      margin-right: 33px;
}

.preview_right {
      width: calc(100% - 180px);
      float: right;
}
    
    


.email_form {
  width:100%;
  display:none;
}


input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgb(140, 225, 255);
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232329;
}

input:-webkit-autofill {
  caret-color: rgb(158, 225, 255);
}


.promo_code {
	background: rgba(140, 225, 255, 0.4);
	text-align:center;
	color: rgba(151, 225, 255);
	font-size: 1.25em;
	font-weight: 400;
        padding-top:14px;
        padding-bottom:14px;        
        width: 351px;
        border: none;
        font-family: "Play", sans-serif;
        font-weight: normal;
        font-style: normal;
}




.start_area {
  position: 			relative;
  display: 			inline-block;
  font-family: 		"Play", sans-serif;
  font-weight: 		normal;
  /*border: 			rgba(155, 155, 255, .5);*/
  border-bottom: 	1px solid rgb(90, 177, 177);  
  /*border-width: 2px;
  border-style: dashed;*/
  width: 			77%;
  margin-right: 		0px;
  margin-left: 		0px;
}




.welcome {
  width:				100%; 
  margin:			auto;
  padding-bottom:	34px;
  z-index:			10;
  position: 			absolute;
  background: 		rgba(17, 8, 71, 0.140);
  opacity: 			1;
  animation: 		fade 1.5s linear;
  /*
  max-width: 		901px; 
  left: 50%;
  border-top: 		solid 1px rgba(18, 18, 58);
  border-bottom: 	solid 1px rgba(18, 18, 58);*/
}




.video-background {
position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Оставляем на самом заднем плане */
    overflow: hidden;
}

/* Наш новый тонирующий экран */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 25, 55, 0.888); /* Ваш цвет: глубокий темный киберпанк-синий */
    z-index: 2; /* Строго поверх видео (#shustreeplay), но под основным контентом (.welcome) */
    
    /* Подключаем анимацию проявления */
    animation: fadeInOverlay 7.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    
    /* Хак для Chromium: изолируем графический слой, чтобы анимация шла плавно на GPU */
    will-change: opacity;
    transform: translateZ(0);
}


/* Корректируем z-index самого видео, чтобы оно было под оверлеем */
#shustreeplay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1; 
    object-fit: cover;
}

/* Тайминги и логика анимации */
@keyframes fadeInOverlay {
    from {
        opacity: 0;
    }
    to {
        opacity: 1; /* Проявляет слой до его нативного состояния rgba(..., 0.7) */
    }
}












/* Clear floats after the columns */
.row {
  display: flex;
  flex-wrap: wrap;
  height: 120px;
  align-items: center;
  margin-bottom:25px;
  margin-top:25px;
}


.totaller {
  line-height: 40px;
  font-size:1.25em;
  margin-bottom:25px;
  margin-top:34px;
}


.headliner {
  width:100%;
  margin-top:25px;
  margin-bottom:25px;
}



.contact {
  padding: 8px 0px 0px 0px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
  flex:1;
}





/* Clear floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}



.sizingX {
  margin-left: 36px;
  text-align: left;
}



#chrome_store_link {
    display: inline-flex;
    margin-top:25px;
    margin-bottom:25px;
    align-items: center; /* Выравнивает содержимое по вертикальному центру */
}

#play_search {
    display: inline-flex;
    margin-bottom:25px;
    align-items: center; /* Выравнивает содержимое по вертикальному центру */
}


#play_link {
    display: none;
    margin-bottom:25px;
    align-items: center; /* Выравнивает содержимое по вертикальному центру */
}


#shustree_apk {
    display: inline-flex;
    margin-bottom:25px;
    align-items: center; /* Выравнивает содержимое по вертикальному центру */
}



/* Если ширина экрана меньше 768px (стандарт для мобильных) */
@media (max-width: 1000px) {
    .lang-switcher-desktop, .about-link-desktop { display: none; }
    .lang-switcher-mobile {
        margin-top:27px;
        display: flex;
        flex-direction: column; /* Выстраивает ссылки строго друг под другом */
        gap: 12px;              /* Задает одинаковый, аккуратный зазор между строками */
        margin-bottom: 20px;
    }
    #play_search {
        display: none; /* Показываем кликабельную ссылку */
    }
    #play_link {
        display: inline-flex; /* Прячем текст для ПК */
    }
    #chrome_store_link {
        margin-top:0px;
    }
}


/* Адаптивность: десктоп прячем на мобилках, мобильный в футере прячем на десктопе */
/*@media (min-width: 1001px) {
  .lang-switcher-mobile { display: none; }
}*/







/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
  .cancelbtn, .signupbtn {
     width: 100%;
  }
}


@media only screen and (max-width: 577px) {
  .sizing {
    padding-top:38px;
  }
  .sizingX {
    padding-bottom:48px;
    margin-left: 0px;
  }
  h2, info {
    font-size: 1.1em;
  }
  p {
    font-size: 1.05em;
  }
  .sizing_bottom {
    padding-bottom:25px;
  }
  .bottom {
    font-size: 0.7em;
  }
  .promo_excite {
    opacity:1;
  }
}

@media only screen and (min-width: 577px) {
  .sizing {
    padding-top:78px;
  }
  .sizingX {
    padding-bottom:90px;
        margin-left: 0px;
  }
  .sizing_bottom {
    padding-bottom:17px;
    margin-left: 0px;
  }
  .news {
    width: calc(100% - 20px);
    max-width: 600px;
    text-align: left;
    padding: 16px 20px;
    margin: 10px auto;
    display: block;
  }
}


@media only screen and (min-width: 768px) {
  .sizing {
    padding-top:47px;
  }
  .sizingX {
    padding-bottom:55px;
    margin-left: 24px;
  }
  .sizing_bottom {
    padding-bottom:7px;
  }
}




@media only screen and (min-width: 1000px) {
  .news {
    width: 25%;
    left: 71%;
    max-width: 480px;
    text-align: left;
    padding: 16px 20px;
    margin: 0px;
    display: block;
  }
  #news2 {
    top: 66px;
  }
  #news3 {
    top: 85px;
  }
  #news4 {
    top: 105px;
  }
}





@media only screen and (min-width: 2560px) {
  .news {
    width: 15%;          /* На огромном экране 15% более чем достаточно */
    left: 80%;           /* Сдвигаем их еще дальше в правый угол */
  }
  /* Увеличиваем шаг между секциями до 190px */
  .main-section {
    padding-bottom: 190px; 
  }
  
  #logoSizing {
    padding-top: 140px; /* Красивое глубокое позиционирование на больших экранах */
  }
  
  .enabler-container {
    margin-top: 80px;
  }
  
  /* Немного увеличиваем headline_box, чтобы он соответствовал масштабу 4К */
  #headline_box {
    max-width: 900px;
    padding: 45px 110px;
  }
  
  #vpn_carbon_promo_instruction {
    max-width: 700px; /* Инструкции тоже можно сделать чуть шире */
    margin-top: 150px;
  }

}


@keyframes fade {
  0%,100% { opacity: 0 }
  100% { opacity: 1 }
}


@media only screen and (min-width: 1477px) {
  .sizing {
    padding-top:78px;
  }
  .sizingX {
    padding-bottom:90px;
    margin-left: 36px;

  }
  .sizing_bottom {
    padding-bottom:17px;
  }
}



@media only screen and (min-width: 1677px) {
  .sizing {
    padding-top:97px;
  }
  .sizingX {
    padding-bottom:105px;
    margin-left: 36px;
  }
  .sizing_bottom {
    padding-bottom:34px;
  }
}


@media only screen and (min-width: 1977px) {
  .sizing {
    padding-top:194px;
  }
  .sizingX {
    padding-bottom:190px;
    margin-left: 36px;
  }
  .sizing_bottom {
    padding-bottom:45px;
  }
}


/* Базовое состояние для средних десктопов (до 1440px - 1598px) */
@media only screen and (max-width: 1598px) and (min-width: 769px) {
  #logoSizing {
    padding-top: 7px !important; /* Поднимаем логотип существенно выше */
  }
  .enabler-container {
    margin-top: 77px !important;  /* Прижимаем кнопку ближе к логотипу */
  }
  #headline_box {
    padding: 30px 96px;          /* Делаем сам бокс чуть компактнее по бокам */
  }
  #vpn_carbon_promo_instruction {
    margin-top: 90px;            /* Подтягиваем шаги инструкций повыше */
  }
  .logo-text {
    font-size: 1.5rem;
  }
  .news .link.info {
    font-size: 0.85rem; /* Сделали текст компактнее */
    line-height: 1.3;
  }
  #logoCarbon, #enableButton {
    width: 64px;
  }
  h2 {
    font-size: 1.21em;
  }
}



/* Экраны от 1600px до 2560px (Ваш эталонный Full HD пресет) */
@media only screen and (min-width: 1599px) and (max-width: 2559px) {
  #logoSizing {
    padding-top: 50px;
  }
  .enabler-container {
    margin-top: 78px;
  }
  /* Возвращаем стандартный шаг между крупными секциями */
  .main-section {
    padding-bottom: 150px;
  }
}




@media only screen and (max-width: 577px) {
	.victory-icon {
	    position: relative;
	    top: 5px;
	    left: 5px;
	    margin-bottom:25px;
	    width: 195px;
	    height: 195px;
	    z-index: 3000;
	    pointer-events: none;
	}
	.header-block, .description-content, .cv-content, .data_description{
		width: 92%;
		font-size: 1.3em;
	}
        .modal-content {
          width: 95%;      
        }
	.headline_right{
	  padding-bottom:25px;
	}
	.row {
	  margin-top:25px;
	  margin-bottom:34px;
	}
	.instruction {
	  line-height:28px;
	}
        .headliner {
          width:100%;
          margin-top:34px;
          margin-bottom:0px;
        }
        .preview_left {
          width: 110px;
          margin-right: 14px;
        }
        .preview_right {
          width: calc(100% - 134px);
          float: right;
        }
	/* Компактный вид плашек новостей для мобильных устройств */
	.news {
	    width: 100%;
	    text-align: left;
	    top: 0px;
	    padding: 10px 14px; /* Уменьшили внутренние поля */
	    margin-top: 6px;    /* Сжали межстрочные интервалы */
	    margin-bottom: 6px;
	    display: block;
	    background-color: rgba(20, 35, 55, 0.85); /* Более плотный фон для читаемости на мелких экранах */
	}
	.news .link.info {
	    font-size: 0.85rem; /* Сделали текст компактнее */
	    line-height: 1.3;
	}
	.logo-text {
	    font-size: 1.4rem;
	    opacity: 1;
	}
	#logoCarbon, #enableButton {
	    opacity: 1;
	    width: 66px;
	}
	table {
	  font-size: 1.25em;
	}
}