:root {
    /* Цвета фона (темные) */
    --color-bg1: rgb(8, 3, 31);
    --color-bg2: rgb(20, 15, 44);
    
    /* Цвета пузырей (RGB без скобок для rgba) */
    --color1: 108, 0, 162;   
    --color2: 161, 127, 255;     
    --color3: 161, 127, 255; 
    --color4: 200, 50, 50;   
    --color5: 161, 127, 255;
    --color-interactive: 161, 127, 255;
    
    --circle-size: 120%;
    --blending: hard-light; 

    /* Шрифты и цвета текста */
    --Unbounded: 'Unbounded', sans-serif;
    --Roboto: 'Roboto', sans-serif;

    /* Main Colors */
    --page-bg: #08031F;
    --bg1: #140F2C;
    --white: #FFFFFF;
    --hightlight: #DACCFF;
    --subtext: #C7BFD7;
    --link: #A17FFF;
}

/* Базовый класс для всех параллакс-элементов */
.parallax {
    will-change: transform; /* Оптимизация производительности */
    transition: transform 0.5s linear; /* Делает движение чуть мягче */
}

/* Начальное состояние: невидимый и чуть ниже */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1.45s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Плавный вылет */
}

/* Состояние при появлении */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Контейнер, в котором находится параллакс-объект */
/* Важно: если объект вылетит за края родителя, появится лишний скролл. 
   Поэтому родителю почти всегда нужен overflow: hidden */
.parallax-container {
    position: relative;
    overflow: hidden;
}

* { margin: 0; padding: 0; box-sizing: border-box; border: none; outline: none; }

a {
    text-decoration: none;
    color: inherit;
}

ul, ol {
    list-style: none;
}

/* body::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url('https://grainy-gradients.vercel.app/noise.svg');
    opacity: 0.10; 
    pointer-events: none;
    z-index: 9999;
} */

html, body {
    font-family: var(--Roboto);
    background-color: var(--color-bg1); /* Тот же цвет, что и основа фона, чтобы блок не висел в пустоте */
    color: var(--white);
    overflow-x: hidden;
    width: 100%;
}

/* ==================================
Основные шрифты
================================== */
.regular-16 {
    color: var(--white);
    font-family: var(--Roboto);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
}

.regular-18 {
    color: var(--white);
    font-family: var(--Roboto);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 28.8px */
}

.title-xl {
    color: var(--white);
    font-family: Unbounded;
    font-size: 53px;
    font-style: normal;
    font-weight: 700;
    line-height: 115%; /* 60.95px */
    letter-spacing: -1.06px;
    text-transform: uppercase;
}

.title-xl span{
    color: var(--hightlight);
}


/* ==================================
ГЛАВНЫЙ БЛОК (БОКС 1400x700)
================================== */
.hero-wrapper {
    position: relative;
    width: 1400px; /* Жесткая ширина бокса */
    max-width: 95%; /* Защита для экранов меньше 1400px */
    height: 660px; /* Жесткая высота */
    margin: 0 auto; /* Центрируем по горизонтали, отступ сверху/снизу 40px */
    border-radius: 0 0 40px 40px; /* Скругление углов */
    overflow: hidden; /* Обрезаем всё, что выходит за рамки */
    display: flex;
    z-index: 1; 
}
/* ==================================
   ХАМЕЛЕОН И БАБЛ
================================== */

/* 1. Главная зона реагирования. 
   Она прибита к самому правому краю 1400px экрана */
.hero-character-box {
    position: absolute;
    right: 0; /* Всегда у самого края фона */
    bottom: 150px; /* Высота над логотипами */
    width: 30px; /* Зона, на которую наводим мышь */
    height: 120px;
    z-index: 25;
}
.character-img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 110px;
    height: auto;
    
    /* Состояние "Спрятан": сдвигаем саму картинку вправо за край фона */
    /* Теперь она не зависит от right: -100px и не исчезнет */
    transform: translateX(45px); 
    
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
}

/* Логика для JS (Выглядывание) */
.hero-character-box.is-peeking .character-img {
    transform: translateX(50px);
}

/* Ховер: выезжает полностью */
.hero-character-box:hover .character-img {
    transform: translateX(0);
}

/* 3. Тултип */
.character-tooltip {
    position: absolute;
    right: 140px; 
    bottom: 0px;
    
    display: flex;
    width: 303px;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    
    border-radius: 32px;
    background: rgba(0, 0, 0, 0.29);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* Начальное состояние (Скрыт) */
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    
    pointer-events: none; 
    z-index: 1;
}

/* Тексты тултипа */
.tooltip-title {
    color: #FFF;
    font-family: var(--Unbounded);
    font-size: 14px;
    font-weight: 700;
    line-height: 100%;
    text-transform: uppercase;
    margin: 0;
}

.tooltip-text {
    color: #F2F2F2;
    font-family: var(--Roboto);
    font-size: 15px;
    font-weight: 400;
    line-height: 160%;
    margin: 0;
}

/* Хвостик сообщения */
.tooltip-tail {
    position: absolute;
    right: -27px; 
    top: 50%;
    transform: translateY(-50%);
    width: 27px;
    height: 40px;
}

/* ==================================
ЛОГИКА ВЫГЛЯДЫВАНИЯ И НАВЕДЕНИЯ
================================== */

/* Класс, который будет добавлять скрипт каждые 6 сек */
.hero-character-box.is-peeking .character-img {
    transform: translateX(15px);
}

/* Как только навели - выезжает полностью 
   (Пишем ниже, чтобы ховер имел приоритет над is-peeking) */
.hero-character-box:hover .character-img {
    transform: translateX(0);
}

/* Плавно появляется тултип */
.hero-character-box:hover .character-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto; 
}

/* ==================================
АНИМИРОВАННЫЙ ФОН
================================== */
.gradient-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; 
    background: #221f6b;
}

.gradients-container {
    filter: url(#goo) blur(50px);
    width: 100%;
    height: 100%;
}

.g1, .g2, .g3, .g4, .g5, .interactive {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color1), 0.8) 0, rgba(var(--color1), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);
    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2);
    left: calc(50% - var(--circle-size) / 2);
    transform-origin: center center;
}

.g1 { animation: moveVertical 30s ease infinite; }
.g2 { 
    background: radial-gradient(circle at center, rgba(var(--color2), 0.8) 0, rgba(var(--color2), 0) 50%) no-repeat;
    transform-origin: calc(50% - 400px);
    animation: moveInCircle 20s reverse infinite;
}
.g3 { 
    background: radial-gradient(circle at center, rgba(var(--color3), 0.8) 0, rgba(var(--color3), 0) 50%) no-repeat;
    top: calc(50% - var(--circle-size) / 2 + 200px);
    left: calc(50% - var(--circle-size) / 2 - 500px);
    transform-origin: calc(50% + 400px);
    animation: moveInCircle 40s linear infinite;
}
.g4 { 
    background: radial-gradient(circle at center, rgba(var(--color4), 0.8) 0, rgba(var(--color4), 0) 50%) no-repeat;
    transform-origin: calc(50% - 200px);
    animation: moveHorizontal 40s ease infinite;
    opacity: 0.7;
}
.g5 { 
    background: radial-gradient(circle at center, rgba(var(--color5), 0.8) 0, rgba(var(--color5), 0) 50%) no-repeat;
    width: calc(var(--circle-size) * 2);
    height: calc(var(--circle-size) * 2);
    top: calc(50% - var(--circle-size));
    left: calc(50% - var(--circle-size));
    transform-origin: calc(50% - 800px) calc(50% + 200px);
    animation: moveInCircle 20s ease infinite;
}
.interactive {
    background: radial-gradient(circle at center, rgba(var(--color-interactive), 0.8) 0, rgba(var(--color-interactive), 0) 50%) no-repeat;
    width: 100%;
    height: 100%;
    top: -50%;
    left: -50%;
    opacity: 0.7;
}

@keyframes moveInCircle {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
}
@keyframes moveVertical {
    0% { transform: translateY(-50%); }
    50% { transform: translateY(50%); }
    100% { transform: translateY(-50%); }
}
@keyframes moveHorizontal {
    0% { transform: translateX(-50%) translateY(-10%); }
    50% { transform: translateX(50%) translateY(10%); }
    100% { transform: translateX(-50%) translateY(-10%); }
}

/* ==================================
HERO
================================== */
.container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1180px; /* Ширина контента */
    margin: 0 auto;
    height: 100%; /* Растягиваем на всю высоту 700px */
    display: flex;
    flex-direction: column;
    align-content: center;
}

.hero-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 150px;
    gap: 32px;
    padding-bottom: 40px;
}

.hero-title {
    color: var(--bg1);
    font-family: Unbounded;
    font-size: 55px;
    font-style: normal;
    font-weight: 700;
    line-height: 115%; /* 63.25px */
    letter-spacing: -1.1px;
    text-transform: uppercase;
}

.hero-title span {
    color: var(--white);
}

.hero-description {
    color: #F2F2F2;
    font-family: Roboto;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 28.8px */
    margin-bottom: 24px;
}

.hero-actions {
    display: flex;
    gap: 16px;
}

.btn {
    /* 1. Позиционирование и база */
    display: inline-flex; 
    justify-content: center;
    align-items: center;
    /* width: fit-content; — можно убрать, inline-flex и так сжимается по контенту */
    
    /* 2. Отступы и форма */
    padding: 20px 25px;
    border-radius: 20px;
    
    /* 3. Типографика */
    font-family: var(--Unbounded), sans-serif; /* Добавил fallback шрифт */
    font-size: 13px;
    font-weight: 700;
    line-height: 1; /* Чтобы высота текста не ломала центровку */
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    
    /* 4. Анимация */
    transition: all 0.3s ease; /* Указал тип анимации для плавности */
    cursor: pointer;
}

/* Кнопка прижмется влево */
.btn--left {
    align-self: flex-start;
}

/* Кнопка встанет по центру */
.btn--center {
    align-self: center;
    margin-left: auto;
    margin-right: auto;
}

/* Кнопка растянется на всю ширину */
.btn--stretch {
    width: 100%;           /* Занимает всю ширину родителя */
    display: flex;         /* Переопределяем inline-flex, чтобы блок стал полноценным */
    align-self: stretch;   /* Инструкция для Flex/Grid контейнеров растянуться */
    margin-left: 0;        /* Сбрасываем авто-отступы от центрирования */
    margin-right: 0;
}

.btn--primary { background: linear-gradient(90deg, #FFF 0%, #907CE2 100%); color: black; }
.btn--secondary { border: 1px solid white; color: white; }

/* ===============================
PRIMARY КНОПКА
=============================== */
.btn--primary { 
    /* Растягиваем градиент: Белый -> Фиолетовый -> Белый */
    background: linear-gradient(90deg, #FFF 0%, #907CE2 50%, #FFF 100%); 
    background-size: 200% auto;
    background-position: 0% center;
    color: black; 
    transition: background-position 1.2s ease, transform 0.5s;
}

.btn--primary:hover { 
    /* Плавно сдвигаем фон, создавая эффект отзеркаливания */
    background-position: 100% center; 
}

/* ===============================
SECONDARY КНОПКА (Animated Shine Border)
=============================== */

/* Регистрация переменной угла для вращения градиента */
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.btn--secondary { 
    position: relative;
    border: 1px solid white; 
    color: white; 
    background: transparent;
    z-index: 1;
    transition: border-color 0.3s, transform 0.3s;
}

.btn--secondary:hover { 
    border-color: transparent; /* Скрываем статичный бордер при ховере */
}

/* Создаем слой для бегающего блика */
.btn--secondary::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    
    background: conic-gradient(from var(--angle), transparent 50%, #fff 80%, transparent 100%);
    
    /* 1. Стандартное свойство mask и префиксное -webkit-mask */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    
    /* 2. Композиция масок (логика исключения центра) */
    /* Для Safari и старых Chrome */
    -webkit-mask-composite: xor; 
    /* Для Firefox и современных стандартов */
    mask-composite: exclude; 
    
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s;
}

/* Запускаем анимацию при ховере */
.btn--secondary:hover::before {
    opacity: 1;
    animation: spinBorder 1.1s linear infinite;
}

/* Сама анимация вращения на 360 градусов */
@keyframes spinBorder {
    to { --angle: 360deg; }
}

/* ===============================
   ЛОГОТИПЫ В HERO (БЕСКОНЕЧНАЯ ЛЕНТА)
=============================== */
.hero-logos {
    width: 100%;
    overflow: hidden;
    margin-top: auto; 
    border-top: 1px solid rgba(255, 255, 255, 0.25); 
    padding: 20px 0;
    
    /* Маска для плавного растворения по краям */
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.hero-logos-track {
    display: flex;
    align-items: center;
    width: max-content; /* Важно: трек должен быть во всю длину контента */
    gap: 80px; /* Расстояние между логотипами на десктопе */
    opacity: 0.6;
    
    /* Запускаем анимацию: скорость можно менять (30s — медленнее, 15s — быстрее) */
    animation: marqueeLeftToRight 40s linear infinite;
}

.hero-logos-track img { 
    height: 25px; 
    width: auto; 
    object-fit: contain;
    flex-shrink: 0; /* Чтобы логотипы не сжимались */
}

/* На мобилках делаем расстояние чуть меньше */
@media (max-width: 768px) {
    .hero-logos-track {
        gap: 40px;
        animation-duration: 20s; /* На мобилках пусть крутятся чуть быстрее, так как путь короче */
    }
    .hero-logos-track img {
        height: 20px;
    }
}

/* УДАЛИЛИ старый медиа-запрос, который скрывал логотипы (nth-child) */

/* Анимация для бесконечного цикла */
@keyframes marqueeLeftToRight {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Смещаем на половину длины трека */
}


/* ===============================
Header
=============================== */

.header-container {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    width: calc(100% - 32px);
    max-width: 1180px;
    margin-top: 12px;
    padding: 10px 10px 10px 24px;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 40px;
    overflow: visible;
    top: 0; /* Явно привязываем к верху */
    transform: translate3d(-50%, 0, 0); /* Включаем аппаратное ускорение видеокарты */
    will-change: transform; /* Подсказка браузеру не перерисовывать лишнее */
}

.header-container::before {
    content: "";
    position: absolute;
    inset: 0; /* Растягивает фон на всю ширину и высоту шапки */
    z-index: -1; /* Прячем подложку за ссылки и кнопки */
    border-radius: inherit; /* Автоматически берет 40px от шапки */
    
    /* Переносим фон и блюр сюда */
    background: rgba(0, 0, 0, 0.20);
    -webkit-backdrop-filter: blur(3.5px);
    backdrop-filter: blur(3.5px);
}

.header-link-list {
    position: relative; /* Важно для позиционирования курсора */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.header-logo {
    padding-right: 20px;
}

.header-link {
    position: relative;
    z-index: 2; /* Текст должен быть выше фона */
    display: flex;
    padding: 6px 14px;
    align-items: center;
    color: #ffffffd5;
    font-family: var(--Roboto);
    font-size: 15px;
    font-weight: 400;
    line-height: 160%;
    cursor: pointer;
    transition: 0.3ms ease;
}

.header-link:hover {
    color: #FFFFFF;
}

.nav-cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.1); /* Легкий белый фон */
    border-radius: 32px;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); /* Плавный и быстрый эффект */
    pointer-events: none; /* Чтобы каретка не мешала нажимать на ссылки */
    opacity: 0;
}

.header-action {
    display: flex;
    gap: 8px;
}
/* 1. Кнопка переключателя */
.lang-sw {
    display: flex;
    height: 38px;
    padding: 7px 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #FFF;
    font-family: var(--Roboto);
    font-size: 15px;
    font-weight: 400;
    line-height: 160%;
    transition: border-color 0.3s ease;
    cursor: pointer;
    user-select: none;
}

.lang-sw:hover {
    border: 1px solid rgba(255, 255, 255, 0.20);
}

/* 2. Обертка */
.lang-wrapper {
    position: relative;
}

.lang-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* 3. Выпадающее меню */
.lang-dropdown {
    position: absolute;
    top: calc(100% + 16px);
    right: 0;
    display: inline-flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    border-radius: 24px;
    background: rgba(15, 15, 25, 0.8); /* Увеличил непрозрачность для читаемости */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    
    /* Анимация */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 9999;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Состояние при клике (Active) */
.lang-wrapper.active .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Временно разрешаем всему выходить за пределы хедера */
.header-container, 
.header-action, 
.lang-wrapper {
    overflow: visible !important;
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #FFF;
    font-family: var(--Roboto);
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.lang-option:hover {
    opacity: 0.85;
}

.lang-wrapper.active .lang-sw {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Поворот стрелочки */
.lang-wrapper.active .lang-arrow {
    transform: rotate(180deg);
}
.lang-arrow {
    transition: transform 0.3s ease;
}

.header-btn {
    display: flex;
    height: 38px;
    padding: 7px 17px;
    justify-content: center;
    align-items: center;
    gap: 10px; 
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #FFF;
    font-family: var(--Unbounded);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 12px */
    text-transform: uppercase;
    transition: border-color 0.3s ease;
}

.header-btn:hover {
    border: 1px solid rgba(255, 255, 255, 0.20);
    cursor: pointer;
}

/* ===============================
Мобильное меню и адаптив хедера
=============================== */

/* Кнопка бургера скрыта на ПК */
.mobile-menu-btn {
    display: none;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 1002; /* Выше всех */
}

/* Полноэкранное меню (скрыто по умолчанию) */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #140F2C; /* Тот самый цвет из макета */
    z-index: 999; /* Под хедером (хедер 1000) */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Анимация появления */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Навигация внутри мобильного меню */
.mobile-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.mobile-link {
    color: #FFF;
    text-align: center;
    font-family: var(--Unbounded, Unbounded);
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 115%; /* 20.7px */
    text-transform: uppercase;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.mobile-link:hover {
    opacity: 0.7;
}

/* ===============================
Медиа-запросы (Планшеты и Мобилки)
=============================== */
@media (max-width: 992px) {
    /* Перенастраиваем шапку: отступы 16px и ширина */
    .header-container {
        width: calc(100% - 32px); /* 100% минус 16px с каждой стороны */
        margin-top: 16px;
        padding: 10px 10px 10px 16px;
    }

    /* Включаем кнопку бургера */
    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Скрываем десктопные ссылки, каретку и кнопку подбора */
    .header-link, 
    .nav-cursor, 
    .header-btn {
        display: none;
    }

    .header-link-list {
        position: static; 
    }

    /* Логотип строго по центру хедера (абсолют) */
    .header-logo {
        position: absolute;
        margin-top: -11px;
        z-index: 5;
    }

    /* Чтобы фон меню перекрывал сайт, но хедер оставался сверху */
    .header-container.menu-open::before {
        /* Делаем подложку хедера полностью прозрачной, если открыто меню, 
           чтобы цвет 140F2C был ровным */
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Легкая линия под шапкой (опционально) */
    }
}

/* ===============================
section 2
=============================== */
.specs-title {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 50px;
}

.specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.specs-item {
    display: flex;
    border-bottom: 1px solid #272232;
    padding: 24px 16px 24px 0px;
    gap: 20px;
}

.specs-item-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.specs-number {
    width: 90px;
    color: #DACCFF;
    font-family: var(--Unbounded);
    font-size: 53px;
    font-style: normal;
    font-weight: 100;
    line-height: 115%; /* 60.95px */
    letter-spacing: -1.06px;
    text-transform: uppercase;
}

.specs-number-text {
    color: #FFF;
    font-family: Unbounded;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 115%; /* 20.7px */
    text-transform: uppercase;
}

/* Базовый стиль для всех элементов */
.specs-item {
    display: flex;
    border-bottom: 1px solid #272232;
    padding: 32px 16px 32px 0px;
    gap: 16px;
    align-items: flex-start; /* Стандарт для текстовых блоков */
}

/* Стили только для ПОСЛЕДНЕГО элемента */
.specs-item:last-child {
    background: #140F2C;
    border-radius: 32px;
    padding: 32px;
    border-bottom: none; /* Убираем линию снизу */
    
    flex-direction: row;
    justify-content: space-between;
    align-items: center; /* Центрируем кнопку и текст по вертикали */
}

/* Если нужно чуть увеличить заголовок именно в последней карточке */
.specs-item:last-child .specs-number-text {
    font-size: 20px;
}

/* Убираем отступ у текста в последней карточке, если там нет номера */
.specs-item:last-child .specs-item-text {
    gap: 12px;
}

/* Убираем линию у 4-го и 5-го элементов */
@media (min-width: 1024px) {
    .specs-grid .specs-item:nth-child(4),
    .specs-grid .specs-item:nth-child(5) {
        border-bottom: none;
    }
}

/* ===============================
section industries
=============================== */

.industries-title {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.industries-actor {
    width: 245px;
    height: 310px;
    z-index: -1;
}

.industries-text {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.switcher {
    padding: 8px 16px 0px 16px;
    vertical-align: -4px; /* Выравнивает иконку по центру строки текста */
    display: inline-block;
    filter: drop-shadow(0 0 32px rgba(121, 82, 250, 0.60));
}

.industries-text h3 {
    color: #FFF;
    font-family: var(--Unbounded);
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 115%; /* 17.25px */
    text-transform: uppercase;
}

.industries-text h4 {
    font-size: 15px;
}

.industries-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    height: 280px;
    gap: 16px;
    margin-top: -16px;
}

.industries-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 32px;
    background: #140F2C;
    padding: 24px;
}

.industries-item img {
    width: 52px;
    height: 52px;
}

/* ===============================
section believe
=============================== */

.believe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;

    background-image: url('assets/img/main/map-bg.svg');
    background-repeat: no-repeat;
    background-position: center;
    
    /* Вариант А: Чтобы карта всегда вписывалась целиком */
    background-size: contain; 
    
    /* Вариант Б: Чтобы карта растягивалась на всю ширину блока */
    /* background-size: 100% auto; */
    padding: 120px 0; /* Добавьте отступы сверху и снизу */
}

.believe-number-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    
    /* Добавляем фон */
    background-image: url('assets/img/main/glow.png');
    background-repeat: no-repeat;
    background-position: center; /* Центрируем по вертикали и горизонтали */
    
    /* Указываем размер картинки */
    background-size: contain;
    
    /* Опционально: если цифры стоят слишком плотно к краям свечения, 
       можно добавить внутренние отступы самому контейнеру */
    padding: 0px 0; 
}

.believe-number-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: center;
}

.believe-number-item h4 {
    color: rgba(255, 255, 255, 0.80);
    text-align: center;
}

.believe-number-item .regular-16 {
    color: rgba(255, 255, 255, 0.80);
}

.believe-number-item-title {
    color: #FFF;
    text-align: center;
    font-family: var(--Unbounded);
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 115%; /* 71.3px */
    letter-spacing: -1.24px;
    text-transform: uppercase;
}

.believe-text {
display: flex;
flex-direction: column;
gap: 24px;
align-content: flex-start;
align-items: flex-start;
justify-content: flex-start;
}



/* ===============================
section advantages
=============================== */

/* 1. Делаем две равные колонки через Grid */
.advantages {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Две части ровно по 50% */
    gap: 42px;
    align-items: center; /* Выравниваем обе колонки по центру по вертикали */
}

/* 2. Левая часть (контейнер для картинок) */
.advantages-img {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 580px; /* Задаем высоту, чтобы блок не схлопнулся */
        overflow: hidden;
}

/* 3. Вращающиеся круги (вынесены в ::before, чтобы не крутить логотип) */
.advantages-img::before {
    content: "";
    position: absolute;
    width: 580px;
    height: 580px;
    background-image: url('assets/img/main/circles-box.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    
    /* Та самая анимация: 5 секунд, линейно, бесконечно */
    animation: spin 15s linear infinite; 
}

/* 4. Логотип по центру (статичный) */
.advantage-logo {
    width: 143px;
    height: 50px;
    background-image: url('assets/img/main/circle-logo.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: relative;
    z-index: 2; /* Поднимаем логотип над вращающимися кругами */
}

/* Ключевые кадры для вращения */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===============================
Правая часть (Текст)
=============================== */
.advantage-text {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: flex-start; /* Удерживаем элементы от лишнего растягивания */
}

.advantage-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.advantage-list-item {
    display: flex;
    padding: 12px 16px 12px 0;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Добавил легкую линию между пунктами для эстетики, если не нужна - удали */
}

.advantage-list-item:last-child {
    border-bottom: none;
}

.advantage-list-item-number {
    min-width: 90px; /* Заменил width на min-width, чтобы цифры не плющило */
    color: #DACCFF;
    font-family: var(--Unbounded);
    font-size: 48px;
    font-weight: 250;
    line-height: 115%;
    letter-spacing: -0.96px;
    text-transform: uppercase;
}

.advantage-list-item-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.advantage-list-item-text-title {
    color: #FFF;
    font-family: var(--Unbounded);
    font-size: 16px;
    font-weight: 700;
    line-height: 115%;
    text-transform: uppercase;
}

.advantage-list-item-text-subtitle {
    color: #C7BFD7;
    /* font-family: Roboto; - если шрифт подключен глобально, можно не дублировать */
    font-size: 15px;
    font-weight: 400;
    line-height: 140%;
}




/* ==================================
   ФУТЕР (FOOTER)
================================== */
.footer-wrapper {
    position: relative;
    width: 100%;
    /* Делаем сам контейнер футера прозрачным, чтобы фон страницы мог просвечивать */
    background-color: transparent !important; 
    padding: 80px 0 40px;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Скрываем вылеты градиента */
    z-index: 1;
}

/* Применяем маску прозрачности к анимированному фону (градиенту) */
.footer-wrapper .gradient-bg {
    position: absolute; /* Убедись, что он позиционирован абсолютно */
    inset: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 200px);
    mask-image: linear-gradient(to bottom, transparent 0%, black 200px);
    z-index: 0;
}

/* Оверлей затемнения поверх анимированного фона (к нему тоже применяем маску) */
.footer-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.40); /* Черный 40% */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 200px);
    mask-image: linear-gradient(to bottom, transparent 0%, black 200px);
    z-index: 0; 
}

/* ==================================
   ВЕРХНИЙ БЛОК (Текст и Персонаж)
================================== */
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2; /* Поднимаем контент над оверлеем */
}

.footer-text-content {
    max-width: 600px;
}

.footer-title {
    color: var(--white);
    font-family: var(--Unbounded);
    font-size: 48px;
    font-weight: 700;
    line-height: 110%;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.footer-desc {
    color: var(--white);
    font-family: var(--Roboto);
    font-size: 16px;
    font-weight: 400;
    line-height: 160%;
    margin-bottom: 32px;
}

/* Сетка кнопок соцсетей */
.social-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.social-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    
    color: var(--white);
    font-family: var(--Roboto);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    
    transition: all 0.3s ease;
}

.social-btn img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* Эффект при наведении на соцсети */
.social-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

/* Персонаж (Хамелеон) */
.footer-character {
    display: flex;
    justify-content: flex-end;
}

.footer-character img {
    width: 471px;
    height: 486px;
    object-fit: contain;
}

/* ==================================
   РАЗДЕЛИТЕЛЬНАЯ ЛИНИЯ
================================== */
.footer-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.20); /* Белый 20% */
    margin-bottom: 52px;
    position: relative;
    z-index: 2;
}

/* ==================================
   НИЖНИЙ БЛОК (Лого и Навигация)
================================== */
.footer-bottom {
    display: flex;
    gap: 64px;
    align-items: flex-start;
    position: relative;
    z-index: 2;
}

.footer-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 275px;
}

.footer-logo {
    width: 109px;
    height: 38px;
    object-fit: contain;
    margin-bottom: 4px;
}

.footer-company-desc {
    color: var(--subtext, #C7BFD7);
    font-family: var(--Roboto);
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    margin: 0;
}

.footer-copyright {
    color: rgba(199, 191, 215, 0.5); /* Более тусклый текст для копирайта */
    font-family: var(--Roboto);
    font-size: 12px;
    font-weight: 400;
    margin-top: 16px;
}

/* Сетка навигации */
.footer-nav-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.nav-title {
    color: var(--white);
    font-family: var(--Unbounded);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
}

.nav-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 одинаковые колонки */
    gap: 12px;
}

.nav-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

.nav-link {
    color: var(--subtext, #C7BFD7);
    font-family: var(--Roboto);
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.3s ease;
    text-align: left;
}

.nav-link:hover {
    color: var(--white);
}

/* ==========================================================
   АДАПТИВ (RESPONSIVE)
========================================================== */

/* Общий контейнер (чтобы текст не прилипал к краям на мобилках) */
@media (max-width: 1280px) {
    .container {
        padding: 0 16px;
        width: 100%;
        box-sizing: border-box;
    }
    .hero-title {
        font-size: 42px;
    }

    .hero-wrapper {
        max-width: 100%;
    }

/*     .header-container {
        margin: 12px 16px;
        width: 100%;
    } */
}

/* ==================================
   ПЛАНШЕТЫ (до 1024px)
================================== */
@media (max-width: 1024px) {
    /* Главный экран (Hero) */
    .hero-wrapper {
        height: auto;
        min-height: 700px;
        padding-bottom: 0;
        max-width: 100%;
        display: flex; /* Добавили флекс */
        flex-direction: column;
    }

    .hero-wrapper .container {
        flex-grow: 1;
    }

    .hero-content {
        flex-direction: column; /* Текст и кнопки друг под другом */
        align-items: center;
        text-align: center;
        padding-top: 200px;
    }
    .hero-title {
        font-size: 42px;
    }
    .hero-actions {
        justify-content: center;
    }

    /* Блок Specs */
    .specs-title {
        grid-template-columns: 1fr; /* Заголовок и текст друг под другом */
    }

    /* Индустрии */
    .industries-title {
        text-align: left;
        align-items: flex-start;
        padding-top: 8px;
    }

    .industries-item {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 24px;
    }

    .industries-actor {
        display: none; /* Прячем картинку чувака, чтобы не ломать верстку */
    }
    .industries-list {
        grid-template-columns: 1fr 1fr; /* По 2 карточки в ряд */
        height: auto;
        margin-top: 24px;
    }

    /* Преимущества (Advantages) */
    .advantages {
        grid-template-columns: 1fr; /* Картинка сверху, текст снизу */
        gap: 60px;
    }

    .hero-logos {
        position: relative; /* Отключаем твой абсолют */
        margin-top: auto !important; /* Мощно толкаем блок в самый низ контейнера */
        padding-bottom: 20px; /* Аккуратный отступ от нижнего края экрана */
        
        /* Делаем бегущую строку красивой — от края до края экрана */
        width: 100vw;
        margin-left: -16px; /* Компенсируем padding контейнера, чтобы убрать рамки по бокам */
    }

     /* Хамелеон в Hero (тултип) */
    .hero-character-box {
        display: none; /* На мобилках ховер не работает, лучше скрыть, чтобы не мешал скроллу */
    }
    
    /* Блог */
    .blog-list {
        grid-template-columns: 1fr 1fr; /* 2 поста в ряд */
    }
    .blog-post-tumbnail {
        width: 100%; /* Картинка тянется на всю ширину колонки */
        background-size: cover;
        background-position: center;
    }

    .blog-post:nth-child(3) {
        display: none;
    }

    /* Футер */
    .footer-top {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }
    .social-grid {
        justify-content: center;
        padding-bottom: 36px;
    }
    .footer-character {
        display: none; /* Прячем огромного хамелеона на мобилках */
    }

    /* Включаем бегущую строку */
    .hero-logos-track {
        justify-content: flex-start;
        width: max-content; /* Трек растягивается по размеру всех 10 картинок */
        gap: 40px; /* Отступ между логотипами */
        padding-right: 40px; /* Компенсация последнего отступа для идеальной математики лупа */
        
        /* Запускаем анимацию: 15 секунд, линейная скорость, бесконечно */
        animation: marqueeLeftToRight 15s linear infinite;
    }
}


/* ==================================
   МОБИЛЬНЫЕ ТЕЛЕФОНЫ (до 768px)
================================== */
@media (max-width: 768px) {
    /* Глобальные шрифты */
    .title-xl { font-size: 32px; }
    .hero-title { font-size: 32px; }

    /* Хамелеон в Hero (тултип) */
    .hero-character-box { display: none; }

    /* Блок Specs */
    .specs-grid { grid-template-columns: 1fr; }
    .specs-item:last-child {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
    .specs-grid .specs-item:nth-child(5) { border-bottom: none; }

    /* Индустрии */
    .industries-list { grid-template-columns: 1fr; }
    .switcher { display: none; }

    /* Блок Believe */
    .believe {
        grid-template-columns: 1fr;
        padding: 60px 0;
        background-size: cover;
    }
    .believe-text { align-items: center; }

    /* Кнопки на всю ширину */
    .btn {
        width: 100%;
        display: flex;
    }

    /* Блог */
    .blog-list { grid-template-columns: 1fr; }
    .blog-post:nth-child(2) { display: none; }

    /* --- МАГИЯ ДЛЯ БЛОКА ADVANTAGES --- */
    .advantages {
        display: flex;
        flex-direction: column;
        gap: 0px;
    }

    /* ❗ ВАЖНО: Раскрываем контейнер, чтобы управлять порядком внутри */
    .advantage-text {
        display: contents; 
    }
    
    .advantage-text h2 {
        order: 1; /* Заголовок идет самым первым */
        text-align: center;
        margin-bottom: 8px;
    }

    /* Круги в Advantages */
    .advantages-img {
        order: 2; /* Крутилка идет второй */
        min-height: 380px; 
        overflow: hidden; 
    }

    .advantages-img::before {
        width: 420px; 
        height: 420px;
        max-width: 100vw;
        border-radius: 50%; /* Срезает углы, чтобы экран не дергался */
    }

    .advantage-list {
        order: 3; /* Список идет третьим */
    }
    
    .advantage-text .btn {
        order: 4; /* Кнопка в самом низу */
        margin-top: 16px;
    }

    .believe-number-list {
        background-image: none;
    }

    /* --- ФУТЕР --- */
    .footer-bottom {
        display: flex;
        flex-direction: column;
        gap: 48px;
        align-items: center;
        text-align: center;
    }
    
    .footer-nav-section {
        order: -1; /* Поднимаем меню наверх */
        margin-bottom: 24px;
    }
    
    .footer-info { align-items: center; }
    
    .nav-columns {
        grid-template-columns: 1fr 1fr; 
        text-align: left;
    }

    .footer-title {
    font-size: 36px;
    }


    .nav-link {
        text-align: center;
    }
}

/* ==================================
   МАЛЕНЬКИЕ ЭКРАНЫ (до 480px)
================================== */
@media (max-width: 480px) {
    /* Кнопки в Hero */
    .hero-actions {
        flex-direction: column; /* Кнопки друг под другом */
        width: 100%;
    }
    .hero-actions .btn {
        width: 100%; /* Растягиваем кнопки на всю ширину */
    }

    .hero-content {
        padding-top: 120px;
    }
    .title-xl {
        font-size: 28px;
    }

    /* Цифры на фоне свечения */
    .believe-number-list {
        grid-template-columns: 1fr; /* Цифры друг под другом */
        background-size: cover;
        padding: 40px 0;
    }

    /* Навигация в футере */
    .nav-columns {
        grid-template-columns: 1fr; /* 1 колонка ссылок по центру */
        text-align: center;
    }

    .footer-title {
    font-size: 28px;
    }

    .regular-18 {
    font-size: 17px;
    }
}


/* ==================================
Блог главная
================================== */

.inner-page-wrapper {
    position: relative;
    width: 100%;
    padding-top: 85px; /* Отступ под фиксированную шапку хедера */
    z-index: 1;
}

/* Градиентный фон сверху */
.page-top-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 325px; /* Фиксированная высота по ТЗ */
    background: linear-gradient(180deg, #917EE2 0%, #52208C 45%, #08031F 100%);
    z-index: -1;
    pointer-events: none; /* Чтобы не мешал кликам */
}

/* ==================================
   ХЛЕБНЫЕ КРОШКИ (Breadcrumbs)
================================== */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 22px;
    
    /* Запрещаем перенос на новые строки */
    flex-wrap: nowrap; 
    /* Включаем горизонтальный скролл */
    overflow-x: auto; 
    
    /* Прячем системный ползунок скролла */
    -ms-overflow-style: none;  /* для IE и Edge */
    scrollbar-width: none;  /* для Firefox */
    /* margin-top: 32px;*/
}

/* Прячем ползунок в Chrome/Safari */
.breadcrumbs::-webkit-scrollbar {
    display: none;
}

/* Общие правила для всех элементов крошек, чтобы они не сжимались */
.crumb-link, 
.crumb-separator,
.crumb-current {
    white-space: nowrap; /* Текст внутри элемента никогда не переносится */
    flex-shrink: 0; /* Запрещаем элементам сплющиваться при нехватке места */
}

.crumb-link, 
.crumb-separator {
    padding: 0 6px;
    color: #B5B5B5; /* Неактивный цвет */
    font-family: var(--Roboto);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.3s ease;
}


.crumb-link:hover {
    color: #FFF; /* Если это страница блога на светлом фоне, поменяй тут цвет ховера на нужный (например, #A17FFF) */
}

.crumb-current {
    color: #FFFFFF; /* Активный цвет */
    font-family: var(--Roboto);
    font-size: 14px;
    font-weight: 400;
}

/* ==================================
   ЗАГОЛОВОК СТРАНИЦЫ
================================== */
.vacancies-wrapper {
    display: flex;
    flex-direction: row;
    gap: 48px;
    align-items: flex-end;
    justify-content: space-between;
}

.vacancies-head {
    display: flex;
    flex-direction: column;
    gap: 24px; /* Отступ между H1 и текстом */
    max-width: 980px; /* Чтобы текст не растягивался на всю ширину экрана */
    margin-bottom: 32px;
    margin-top: 42px;
}

.page-subtitle {
    color: #FFF; /* Переопределяем цвет*/
}

/* ==================================
   ФИЛЬТРЫ (Таблетки)
================================== */
.filters-list {
    display: flex;
    flex-wrap: wrap; /* Чтобы на мобилках красиво переносились */
    gap: 2px;
    margin-bottom: 48px;
}

.filter-btn {
    display: flex;
    padding: 8px 14px; /* Чуть добавил по бокам, чтобы текст не прилипал к краям */
    justify-content: center;
    align-items: center;
    gap: 10px;
    
    border-radius: 45px;
    border: 1px solid #4B4558;
    background: transparent; /* Неактивное состояние */
    
    color: #FFF;
    font-family: var(--Unbounded);
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 13px */
    
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Активное состояние и Ховер */
.filter-btn.active,
.filter-btn:hover {
    background: #4B4558;
    border-color: #4B4558; /* Чтобы рамка не выделялась */
}

.page-heading {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 0;
}

/* Адаптив для планшетов и мобилок */
@media (max-width: 768px) {
    .inner-page-wrapper {
        padding-top: 95px;
    }
    
    .page-heading {
        gap: 16px;
        margin-bottom: 32px;
    }

    .filters-list {
        gap: 4px;
    }

    .filter-btn {
        padding: 10px 16px;
        font-size: 12px; /* Чуть уменьшаем шрифт на мобилке */
    }
    .vacancies-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-start
    }

    .vacancies-filters {
    flex-direction: column;
    width: 100%;
    }

    .filter-group {
    width: 100%;
    } 
}


/* ===============================
   КАРТОЧКИ ПОСТОВ (БЛОГ)
=============================== */

.blog-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 42px;
    justify-items: stretch;
    padding-bottom: 64px;
}

.blog-post {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    cursor: pointer;
    height: 100%; /* Важно для выравнивания кнопок в ряд */
}

/* Обертка для картинки (обрезает зум) */
.blog-post-thumbnail-wrapper {
    position: relative;
    width: 100%;
    height: 210px;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 16px;
}

/* Сама картинка */
.blog-post-thumbnail-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Тег категории (Новини, Анонси и тд) */
.blog-post-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(20, 15, 44, 0.9); /* Темный фон из палитры */
    color: #FFF;
    padding: 8px 16px;
    border-radius: 40px;
    font-family: var(--Unbounded);
    font-size: 13px;
    font-weight: 700;
    z-index: 2;
}

/* Текстовый блок (выталкивает кнопку вниз) */
.blog-post-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1; /* Магия: забирает всё свободное место, толкая кнопку вниз */
    margin-bottom: 24px;
}

.blog-post-date {
    color: #C7BFD7;
    font-family: var(--Roboto);
    font-size: 14px;
    font-weight: 400;
    line-height: 160%;
}

.blog-post-name {
    color: #FFF;
    font-family: var(--Unbounded);
    font-size: 18px;
    font-weight: 500;
    line-height: 115%;
    transition: color 0.3s ease;
}

.blog-post-descr {
    color: #C7BFD7;
    font-family: var(--Roboto);
    font-size: 16px;
    font-weight: 400;
    line-height: 160%;
}

/* Кнопка */
.btn--read-more {
    align-self: stretch; /* Прижимаем к левому краю */
    /* Так как это <span>, переопределяем hover, если он привязан к кнопкам в базовых стилях */
}

/* --- ЛОГИКА HOVER ДЛЯ ВСЕЙ КАРТОЧКИ --- */
.blog-post:hover .blog-post-thumbnail-img {
    transform: scale(1.05); /* Легкий зум картинки */
}

.blog-post:hover .blog-post-name {
    color: var(--hightlight); /* Подсвечиваем заголовок */
}

.blog-post:hover .btn--read-more {
    background-position: 100% center; /* Запускаем эффект блика градиента на кнопке */
}


@media (max-width: 1024px) {
    .blog-list {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .blog-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    /* ... твои старые мобильные стили ... */

    /* Делаем фильтры скроллящимися */
    .filters-list {
        flex-wrap: nowrap; /* Запрещаем перенос на новые строки */
        overflow-x: auto; /* Включаем горизонтальный скролл */
        justify-content: flex-start;
        padding-bottom: 8px; /* Небольшой отступ снизу, чтобы скролл не резал тень */
        
        /* Прячем системный ползунок скролла */
        -ms-overflow-style: none;  /* IE и Edge */
        scrollbar-width: none;  /* Firefox */
    }

    /* Прячем ползунок в Chrome/Safari */
    .filters-list::-webkit-scrollbar {
        display: none;
    }
    
    /* Добавляем фейковый отступ справа, чтобы последний элемент не прилипал к краю экрана при скролле */
    .filters-list::after {
        content: "";
        min-width: 1px;
    }
}

/* ===============================
   СТРАНИЦА: РОБОТОДАВЦЯМ (Employer Hero)
=============================== */

.employer-hero {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr; 
    gap: 42px;
    align-items: center; 
    margin-top: 24px; 
}

.employer-title {
    color: #FFF;
    font-family: var(--Unbounded);
    font-size: 44px;
    font-style: normal;
    font-weight: 700;
    line-height: 115%; /* 50.6px */
    letter-spacing: -0.88px;
    text-transform: uppercase;
}

.employer-title span {
    color: #DACCFF;
}

.employer-text {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
}

.employer-img {
    width: 100%;
    max-width: 100%; /* Убиваем любой старый ограничитель ширины, если он был */
    min-height: 500px; 
    background-image: url('assets/img/employer/emoloyer-img.png');
    background-repeat: no-repeat;
    background-position: center; /* Центрируем хамелеона в своей половине */
    background-size: contain; 
}

/* ===============================
АДАПТИВ (Планшеты и Мобилки)
=============================== */

@media (max-width: 1024px) {
    .employer-hero {
        grid-template-columns: 1fr; 
        text-align: center;
        gap: 32px;
    }
    
    /* МЕНЯЕМ ПОРЯДОК: КАРТИНКА СВЕРХУ */
    .employer-img {
        order: 1; /* Картинка становится первой */
        min-height: 400px;
    }
    
    .employer-text {
        order: 2; /* Текст уходит под картинку */
        align-items: center; 
    }
    
    .employer-hero .btn--left {
        align-self: center; 
    }

    .employer-title {
    font-size: 36px;
    }

    /* Настраиваем контейнер секции "Повний цикл" */
    .full-cycle-section {
        display: flex;
        flex-direction: column;
        gap: 0; /* Управляем отступами индивидуально через margin */
    }

    /* Раскрываем левый блок, чтобы вытащить заголовок и кнопку на один уровень со списком */
    .cycle-left {
        display: contents;
    }

    /* Заголовок идет первым */
    .cycle-left .title-xl {
        order: 1;
        text-align: center;
        margin-bottom: 32px;
    }

    /* Список пунктов 01-03 идет вторым */
    .cycle-right {
        order: 2;
    }

    /* Кнопка "Почати працювати" теперь будет в самом низу под списком */
    .cycle-left .btn {
        order: 3;
        margin-top: 0 !important; /* Сбрасываем инлайновый стиль, если он мешает */          /* Растягиваем на всю ширину для мобилки */
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .employer-img {
        min-height: 375px; /* Еще меньше картинка для телефонов */
    }
    
    .employer-hero {
        margin-top: 20px;
    }

    .employer-title {
    font-size: 28px;
    }
}

/* ==================================
   ГЛОБАЛЬНЫЕ КЛАССЫ секции 1-3
================================== */

/* Контурные прозрачные цифры */
.outline-number {
    font-family: var(--Unbounded);
    color: #DACCFF;
    font-size: 48px;
    font-weight: 200;
    line-height: 100%;
    min-width: 85px;
}

/* ==================================
   СЕКЦИЯ 1: ПОВНИЙ ЦИКЛ
================================== */
.full-cycle-section {
    display: grid;
    grid-template-columns: 0.75fr 1fr;
    gap: 60px;
    margin-top: 72px;
}

.cycle-item {
    display: flex;
    gap: 32px;
    padding: 16px 0;
    align-items: flex-start;
}

.cycle-item-subtitle {
    color: #C7BFD7;
    font-family: var(--Roboto);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 21px */
}

.cycle-item:first-child {
    padding-top: 0; /* Убираем верхний отступ у первого элемента для выравнивания */
}

.cycle-item:last-child {
    border-bottom: none;
}

.cycle-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cycle-title {
    color: #FFF;
    font-family: var(--Unbounded);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 120%;
}

/* ==================================
СЕКЦИЯ 2: ЧОМУ КОМПАНІЇ ПРАЦЮЮТЬ
================================== */
.why-us-section {
    margin-top: 72px;
}

.why-us-wrapper {
    position: relative;
    border-radius: 40px;
    overflow: hidden; /* Чтобы фон не вылазил за скругления */
    padding: 60px 48px;
    z-index: 1;
}

.why-us-content {
    position: relative;
    z-index: 2; /* Поверх анимированного фона */
}

.why-us-title {
    margin-bottom: 48px;
}

.why-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: stretch;
}

.why-card {
    background: rgba(15, 15, 25, 0.4); /* Полупрозрачная подложка */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 24px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05); /* Очень легкая рамка для глубины */
}

.why-card-icon {
    width: 52px;
    height: 52px;
    object-fit: contain;
    margin-bottom: 8px; /* Доп. отступ от заголовка */
}

.why-card-title {
    color: #FFF;
    font-family: var(--Unbounded);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 130%;
}

.why-card-desc {
    color: #C7BFD7;
    font-family: var(--Roboto);
    font-size: 15px;
    font-weight: 400;
    line-height: 150%;
}

/* ==================================
   СЕКЦИЯ 3: ЯК ПОБУДОВАНИЙ ПРОЦЕС
================================== */
.process-section {
    display: flex;
    flex-direction: column;
    margin-top: 72px;
    margin-bottom: 80px;
    gap: 32px
}

.process-main-title {
    margin-bottom: 60px;
}

.process-timeline-wrapper {
    position: relative;
}

/* Горизонтальная линия (Десктоп) */
.process-line {
    position: absolute;
    top: 10px; /* Выравнивание по центру кружков (22px / 2 - 1px) */
    left: 0;
    width: 78%;
    height: 3px;
    background: #DACCFF;
    z-index: 1;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    position: relative;
    z-index: 2;
}

.process-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.process-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid #DACCFF;
    background: #08031F; /* Цвет страницы, чтобы перекрыть линию */
    margin-bottom: 24px;
}

.process-step .outline-number {
    font-size: 54px; /* Чуть меньше, чем в первом блоке */
    margin-bottom: 16px;
}

.process-step-title {
    color: #FFF;
    font-family: var(--Unbounded);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 120%;
    margin-bottom: 12px;
}

.process-step-desc {
    color: #C7BFD7;
    font-family: var(--Roboto);
    font-size: 15px;
    font-weight: 400;
    line-height: 150%;
}

/* ==================================
   АДАПТИВ: Планшеты (до 1024px)
================================== */
@media (max-width: 1024px) {
    /* Секция 1 */
    .full-cycle-section {
        grid-template-columns: 1fr; /* Колонки друг под другом */
        gap: 32px;
    }

    /* Секция 2 */
    .why-cards-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 карточки в ряд */
    }

    /* Секция 3 (Делаем вертикальный таймлайн) */
    .process-timeline-wrapper {
        padding-left: 42px; /* Отступ для вертикальной линии */
    }

    .process-line {
        width: 2px;
        height: 100%;
        left: 20px; /* Центрируем под кружками */
        top: -2;
    }

    .process-grid {
        grid-template-columns: 1fr; /* 1 колонка */
        gap: 40px;
    }

    .process-step {
        position: relative;
    }

    .process-dot {
        position: absolute;
        left: -32px; /* Выносим кружок на линию */
        top: 0;
        margin-bottom: 0;
    }
}

/* ==================================
   АДАПТИВ: Мобильные (до 768px)
================================== */
@media (max-width: 768px) {
    /* Уменьшаем шрифты контурных цифр */
    .outline-number { font-size: 48px; }
    .process-step .outline-number { font-size: 42px; }

    /* Секция 1 */
    .cycle-item { gap: 20px; }

    /* Секция 2 */
    .why-us-wrapper { padding: 32px 24px; }
    .why-cards-grid { grid-template-columns: 1fr; } /* 1 карточка в ряд */
    .why-card { padding: 24px 20px; }
    
    /* Секция 3 */
    .process-btn { width: 100%; display: flex; }
}

/* ==================================
Страница кандидаты
================================== */

.candidates-hero {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 64px;
    margin-bottom: 82px;
}

.candidates-title {
    color: #FFF;
    font-family: Unbounded;
    font-size: 44px;
    font-style: normal;
    font-weight: 700;
    line-height: 115%; /* 50.6px */
    letter-spacing: -0.88px;
    text-transform: uppercase;
}

.candidates-title span {
    color: #DACCFF;
}

.candidates-btn-list {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.candidates-you-get {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.candidates-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 20px;
}

.candidates-grid-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border-radius: 32px;
    background: #140F2C;
}

.candidates-grid-item h4 {
    color: #C7BFD7;
    font-family: var(--Roboto);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 21px */
}


.candidates-grid-item-title {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
}

.candidates-grid-item-title h3 {
    color: #FFF;
    font-family: var(--Unbounded);
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 115%; /* 17.25px */
    text-transform: uppercase;
}

.candidates-grid-item-title-icon {
    width: 52px;
    height: 52px;
}

.candidates-roles {
    display: grid;
    grid-template-columns: 0.75fr 1fr;
    gap: 32px;
    margin-top: 72px;
}

.candidates-character {
    width: 240px;
    height: 310px;
    background-image: url('assets/img/candidates/character.png');
    background-repeat: no-repeat;
    background-position: center; /* Центрируем хамелеона в своей половине */
    background-size: contain; 
}

.candidates-title-img {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.candidates-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.candidates-list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.candidates-list-item-img {
    width: 48px;
    height: 48px;
    background-image: url('assets/img/candidates/check.svg');
    background-repeat: no-repeat;
    background-position: center; /* Центрируем хамелеона в своей половине */
    background-size: contain; 
}

.candidates-actions {
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin-top: 24px;
}

.candidates-actions-timeline {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}

/* ==================================
СЕКЦИЯ ЯК ПОБУДОВАНИЙ ПРОЦЕС
================================== */
.candidates-process-section {
    display: flex;
    flex-direction: column;
    margin-top: 72px;
    margin-bottom: 80px;
    gap: 32px
}

.candidates-process-timeline-wrapper {
    position: relative;
}

/* Горизонтальная линия (Десктоп) */
.candidates-process-line {
    position: absolute;
    top: 10px; /* Выравнивание по центру кружков (22px / 2 - 1px) */
    left: 0;
    width: 69%;
    height: 3px;
    background: #DACCFF;
    z-index: 1;
}

.candidates-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    position: relative;
    z-index: 2;
}

.candidates-process-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.candidates-process-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid #DACCFF;
    background: #08031F; /* Цвет страницы, чтобы перекрыть линию */
    margin-bottom: 24px;
}

.candidates-process-step .candidates-outline-number {
    font-size: 54px; /* Чуть меньше, чем в первом блоке */
    margin-bottom: 16px;
}

.candidates-process-step-title {
    color: #FFF;
    font-family: var(--Unbounded);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 120%;
    margin-bottom: 12px;
}

.candidates-process-step-desc {
    color: #C7BFD7;
    font-family: var(--Roboto);
    font-size: 15px;
    font-weight: 400;
    line-height: 150%;
}

/* Контурные прозрачные цифры */
.candidates-outline-number {
    font-family: var(--Unbounded);
    color: #DACCFF;
    font-size: 48px;
    font-weight: 200;
    line-height: 100%;
    min-width: 85px;
}

/* ==================================
   АДАПТИВ ДЛЯ СТОРИНКИ КАНДИДАТІВ
================================== */

/* --- Планшеты (до 1024px) --- */
@media (max-width: 1024px) {
    /* Hero блок */
    .candidates-hero {
        text-align: center;
        margin-bottom: 60px;
        padding-top: 40px;
    }

    .candidates-btn-list {
        justify-content: center; /* Центрируем кнопки */
    }

    /* Що ви отримуєте (3 картки) */
    .candidates-grid {
        grid-template-columns: 1fr; /* Робимо 1 колонку, щоб текст не був занадто вузьким */
        gap: 24px;
    }

    /* Ролі, які ми закриваємо */
    .candidates-roles {
        grid-template-columns: 1fr; /* Текст і список один під одним */
        gap: 40px;
        margin-top: 60px;
    }

    .candidates-title-img {
        align-items: center;
        text-align: center;
    }

    .candidates-actions {
        justify-content: center;
    }

    /* Як побудований процес (Таймлайн) */
    .candidates-process-grid {
        grid-template-columns: 1fr; /* 1 колонка */
        gap: 40px;
        padding-left: 12px;
    }

    .candidates-process-timeline-wrapper {
        padding-left: 24px; /* Відступ для вертикальної лінії */
    }

    /* Перетворюємо горизонтальну лінію на вертикальну */
    .candidates-process-line {
        width: 3px;
        height: 100%;
        left: 14px; /* Центруємо під кружками */
        top: 0;
    }

    .candidates-process-step {
        position: relative;
    }

    .candidates-process-dot {
        position: absolute;
        left: -32px; /* Виносимо кружок на лінію */
        top: 0;
        margin-bottom: 0;
    }
}

/* --- Мобильные телефоны (до 768px) --- */
@media (max-width: 768px) {
    /* Зменшуємо шрифти заголовків */
    .candidates-title {
        font-size: 32px;
    }

    /* Робимо всі кнопки на 100% ширини екрану */
    .candidates-btn-list,
    .candidates-actions,
    .candidates-actions-timeline {
        flex-direction: column;
        width: 100%;
    }

    .candidates-btn-list .btn,
    .candidates-actions .btn,
    .candidates-actions-timeline .btn {
        width: 100%;
        display: flex;
    }

    /* Ховаємо хамелеона на мобільних, щоб не займав багато місця */
    .candidates-character {
        display: none;
    }

    /* Трохи зменшуємо цифри в таймлайні */
    .candidates-outline-number {
        font-size: 42px;
        min-width: 70px;
    }
}

/* ==================================
Вакансии
================================== */

/* ==================================
ФИЛЬТРЫ ВАКАНСИЙ
================================== */
.vacancies-filters {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    padding-bottom: 42px;
}

.filter-group {
    position: relative;
    min-width: 250px;
    height: 44px;
    align-self: center;
}

.filter-select {
    width: 100%;
    appearance: none; /* Убираем стандартный дизайн браузера */
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 15px 16px;
    color: #FFF;
    font-family: var(--Roboto);
    font-size: 15px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.filter-select:hover, .filter-select:focus {
    border-color: rgba(255, 255, 255, 0.6);
}

.filter-select option {
    background: #140F2C; /* Темный фон для выпадашки */
    color: #FFF;
}

.select-arrow {
    position: absolute;
    top: 30%;
    right: 12px;
    width: 24px;
    height: 24px;
    background-image: url('assets/img/vacancies/chevron.svg');
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none; /* Чтобы клик проходил сквозь иконку на селект */
}

/* ==================================
   КАРТОЧКА ВАКАНСИИ (АККОРДЕОН)
================================== */
.vacancies-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 64px;
}

.vacancy-card {
    background: #140F2C;
    border-radius: 24px;
    padding: 24px;
    transition: background 0.3s ease;
}

.vacancy-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
}

.vacancy-section-title {
    color: #B5B5B5;
    font-family: var(--Roboto);
    font-size: 16px;
    font-weight: 400;
    line-height: 160%; 
    text-transform: uppercase;
    padding-top: 16px;
}

.vacancy-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vacancy-title {
    color: #FFF;
    font-family: var(--Unbounded);
    font-size: 20px;
    font-weight: 500;
    line-height: 115%; 
    margin-bottom: 16px;
}

.vacancy-action {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.vacancy-tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    /* Убрал margin-bottom, чтобы не ломать центровку в хедере */
}

.vacancy-tag-type {
    display: flex;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 45px;
    border: 1px solid #00FFC6;
    color: #00FFC6;
    font-family: var(--Unbounded);
    font-size: 9px;
    font-weight: 500;
    line-height: 100%; 
    text-transform: uppercase;
}

.vacancy-tag-location {
    display: flex;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 45px;
    border: 1px solid #2093FF;
    color: #2093FF;
    font-family: var(--Unbounded);
    font-size: 9px;
    font-weight: 500;
    line-height: 100%; 
    text-transform: uppercase;
}

.vacancy-tags-actions {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

/* ==================================
   АККОРДЕОН И АНИМАЦИИ
================================== */
.vacancy-body {
    position: relative;
    max-height: 100px; 
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}

.vacancy-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(180deg, rgba(20, 15, 44, 0) 0%, #140F2C 100%);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Состояние РАЗВЕРНУТО */
.vacancy-card.is-expanded .vacancy-body {
    max-height: 2000px; 
    transition: max-height 0.8s ease-in-out;
}

.vacancy-card.is-expanded .vacancy-fade {
    opacity: 0; 
}

/* Кнопка открытия */
.vacancy-toggle-btn {
    display: flex;
    width: 52px;
    height: 52px;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background: #352E43;
    
    /* Сбрасываем стандартные стили браузера */
    border: none;
    outline: none;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.vacancy-toggle-btn:hover {
    opacity: 0.8;
}

/* Иконка шеврона */
.vacancy-toggle-icon {
    width: 24px;
    height: 24px;
    background-image: url('assets/img/vacancies/chevron.svg');
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease; /* Анимация поворота */
}

/* Переворот стрелки при открытии */
.vacancy-card.is-expanded .vacancy-toggle-icon {
    transform: rotate(180deg);
}

/* ==================================
   Стилизация получаемых данных по апи
================================== */

/* Стилизация HTML-контента из API внутри описания */
.vacancy-content-text {
    color: #c7bfd7;
    font-family: var(--Roboto);
    font-size: 16px;
    line-height: 160%;
}

/* Превращаем все <strong> внутри описания в заголовки секций */
.vacancy-content-text h2,
.vacancy-content-text h3 {
    display: block;
    color: #B5B5B5; /* Цвет как у vacancy-section-title */
    font-family: var(--Roboto);
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 12px;
    letter-spacing: 0.05em;
}



/* Убираем лишний отступ у самого первого заголовка */
.vacancy-content-text strong:first-child,
.vacancy-content-text p:first-child strong {
    margin-top: 0;
}

/* Стилизация списков */
.vacancy-content-text ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 16px;
}

.vacancy-content-text li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
}

/* Кастомный маркер списка (точка) */
.vacancy-content-text li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 4px;
    height: 4px;
    background-color: #c7bfd7;
    border-radius: 50%;
}

.vacancy-content-text p {
    margin-bottom: 12px;
}

/* ==================================
   АДАПТИВ
================================== */
@media (max-width: 768px) {
    .vacancy-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .filter-select {
        display: flex;
        width: 100%;
    }

    .vacancy-card {
    padding: 16px;
    }

    /* Растягиваем кнопки на мобильном */
    .vacancy-action {
        width: 100%;
    }
    
    .vacancy-action .btn {
        flex-grow: 1; /* Кнопка Відгукнутись займет всё свободное место */
        text-align: center;
        justify-content: center;
    }

    .vacancy-toggle-btn {
        flex-shrink: 0; /* Чтобы квадратная кнопка не сжималась */
    }
}


/* ==================================
   ГЛОБАЛЬНІ КЛАСИ (ДЛЯ СВІТЛИХ СТОРІНОК)
================================== */
.blog-post-page {
    background: #EBE2FE; /* Фон сторінки за ТЗ */
}

/* Колір body text на світлому фоні */
.text-content {
    color: #352E43; /* Темний колір для тексту, щоб був читабельним */
}

/* Перевизначення заголовків за ТЗ */
.blog-post-title {
    color: #100D16;
    font-family: var(--Unbounded);
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: 115%;
    letter-spacing: -0.84px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.blog-h2 {
    color: #100D16;
    font-family: var(--Unbounded);
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 115%;
    text-transform: uppercase;
    margin-top: 24px;
    margin-bottom: 24px;
}

.blog-h3 {
    color: #100D16;
    font-family: var(--Unbounded);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 115%;
    text-transform: uppercase;
    margin-top: 32px;
    margin-bottom: 16px;
}

/* Градієнт (перероблений під світлий фон) */
.blog-post-page .page-top-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px; /* Висота за ТЗ */
    background: linear-gradient(180deg, #100D16 0%, #52208C 50%, #EBE2FE 100%);
    z-index: -1;
    pointer-events: none;
}

/* ==================================
   ДЕТАЛІЗАЦІЯ ПОСТУ
================================== */
.blog-post-detail {
    max-width: 980px;
    margin: 0 auto;
    padding-top: 32px;
}

.post-header {
    margin-bottom: 24px;
}

.blog-mainpage-head {
    display: flex;
    flex-direction: column;
    gap: 24px; /* Отступ между H1 и текстом */
    max-width: 980px; /* Чтобы текст не растягивался на всю ширину экрана */
    margin-bottom: 32px;
    margin-top: 42px;
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.vacancy-tag-type.green {
    border-color: var(--bg1);
    color: var(--bg1);
    font-family: var(--Unbounded);
    font-size: 11px;
    font-weight: 700;
}

.post-date {
    color: #6E568E;
    font-family: var(--Roboto);
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 16px;
}

/* Головне зображення (980x460) */
.post-main-image-wrapper {
    width: 100%;
    height: 460px; /* Висота за ТЗ */
    border-radius: 40px;
    overflow: hidden;
    margin-bottom: 20px;
}

.post-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Заповнює блок, зберігаючи пропорції */
}

/* Тіло поста */
.post-body {
    display: flex;
    flex-direction: column;
}

.post-body .intro {
    font-size: 18px; /* intro-paragraph */
    margin-bottom: 24px;
}

.post-body p {
    margin-bottom: 16px;
}

.roles-list.list-on-light li {
    padding-left: 20px;
}

/* 1. Базовые настройки для элементов списка */
.roles-list li {
    position: relative; /* Чтобы точка позиционировалась ровно относительно текста */
    padding-left: 20px; /* Отодвигаем текст вправо, освобождая место под точку */
    list-style: none;   /* Убиваем стандартные браузерные точки */
    margin-left: 4px;
}

.roles-list.list-on-light li::before {
    content: ""; /* ОБЯЗАТЕЛЬНО! Без этого псевдоэлемент не отрендерится */
    position: absolute;
    left: 0;
    top: 10px; /* Выравниваем по высоте текста (возможно, придется сделать 8px или 12px) */
    width: 6px; /* Ширина точки */
    height: 6px; /* Высота точки */
    border-radius: 50%; /* Делаем её идеально круглой */
    background-color: #9686c2; /* Базовый цвет для темных страниц (если он там используется) */
}

/* Футер поста */
.post-footer {
    padding-top: 32px;
}

.post-share {
    display: flex;
    align-items: center;
    gap: 24px;
}

.share-title {
    color: #6E568E;
    font-family: var(--Roboto);
    font-weight: 500;
}

.share-links {
    display: flex;
    align-items: center;
    gap: 12px;
}

.share-link {
    display: flex;
    width: 48px;
    height: 48px;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    background: #FFF; /* Біла підложка */
    border: 1px solid rgba(16, 13, 22, 0.1);
    transition: background 0.3s;
}

.share-link:hover {
    background: #A17FFF; /* Фіолетова підложка при наведенні */
}

.share-link img {
    width: 20px;
    height: 20px;
}

/* ==================================
   ІНШІ ПОСТИ
================================== */
.title-xl.style-other-posts-main {
    color: #100D16;
}

.other-posts-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Обертка картки на світлому фоні */
.blog-post.on-light {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    height: 100%;
}

.on-light .blog-post-date {
    color: #6E568E;
}

.on-light .blog-post-name {
    color: #100D16;
}

.on-light .blog-post-descr {
    color: #352E43;
}

.btn--on-light {
    border-color: #6E568E;
    color: #6E568E;
}

.blog-post.on-light:hover .blog-post-name {
    color: #A17FFF; /* Подсветка заголовка фиолетовым при ховере на светлом */
}

.blog-post.on-light:hover .btn--on-light {
    background-color: #A17FFF;
    border-color: #A17FFF;
    color: #FFF;
}

/* ==================================
   АДАПТИВ
================================== */
@media (max-width: 1024px) {
    /* Зменшуємо шрифти заголовків на планшеті */
    .blog-post-title { font-size: 32px; }
    .blog-h2 { font-size: 24px; margin-top: 32px; }
    .blog-h3 { font-size: 18px; margin-top: 24px; }
    
    .post-main-image-wrapper {
        height: 360px;
    }
}

@media (max-width: 768px) {
    .blog-post-page .page-top-gradient {
        height: 400px;
    }

    /* Зменшуємо шрифти та відступи на мобільних */
    .blog-post-title { font-size: 24px; margin-bottom: 16px; }
    .blog-h2 { font-size: 20px; margin-top: 24px; }
    .blog-h3 { font-size: 16px; margin-top: 20px; }
    
    .post-main-image-wrapper {
        height: 280px;
        border-radius: 20px;
        margin-bottom: 32px;
    }

    .post-body .intro {
        font-size: 16px;
        margin-bottom: 24px;
    }

    /* Скролл для картки "Поділитись" на мобилке */
    .post-footer {
        padding-bottom: 1px;
    }
    
    .share-links {
        overflow-x: auto; /* Вмикаємо горизонтальний скролл */
        padding-bottom: 8px; /* Відступ, щоб скролл не резав тіні */
        
        /* Прячем системный ползунок скролла */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .share-links::-webkit-scrollbar {
        display: none;
    }

    /* Горизонтальний скролл для "Інші пости" */
    .other-posts-list {
        flex-wrap: nowrap; /* Запрещаем перенос на новые строки */
        overflow-x: auto; /* Включаем горизонтальный скролл */
        justify-content: flex-start;
        padding-bottom: 8px;
        gap: 16px;
        
        /* Прячем системный ползунок */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .other-posts-list::-webkit-scrollbar {
        display: none;
    }
    
    /* Збільшуємо ширину кожної картки, щоб вони займали 80% екрану в скроллі */
    .other-posts-list .blog-post.on-light {
        min-width: 80%;
        max-width: 80%;
    }
}


/* ==================================
   БЛОК ОГЛАВЛЕНИЯ (TOC)
================================== */
.toc-block {
    background: #FFFFFF;
    border-radius: 24px;
    margin-top: 16px;
    margin-bottom: 40px;
}

.toc-title {
    color: #100D16;
    font-family: var(--Unbounded);
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.toc-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none; /* Убираем стандартные маркеры */
    padding: 0;
    margin: 0;
}

.toc-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.toc-link {
    color: #7C4DFF;
    font-family: var(--Roboto);
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    text-decoration: none;
    transition: color 0.3s ease;
}

.toc-link:hover {
    color: #A17FFF;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .toc-block {
        padding: 24px;
        border-radius: 16px;
    }
    
    .toc-title {
        font-size: 16px;
        margin-bottom: 20px;
    }
}

/* ==================================
   АДАПТИВ ДЛЯ "ІНШІ ПОСТИ" (Ховаємо зайві картки)
================================== */

/* Планшеты (до 1024px): Показуємо 2 картки */
@media (max-width: 1024px) {
    .other-posts-list {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки */
        gap: 24px;
    }

    /* Ховаємо всі картки, починаючи з 3-ї */
    .other-posts-list .blog-post:nth-child(n+3) {
        display: none;
    }
}

/* Мобильные телефоны (до 768px): Показуємо 1 картку */
@media (max-width: 768px) {
    .other-posts-list {
        display: grid;
        grid-template-columns: 1fr; /* 1 колонка */
        
        /* Вимикаємо горизонтальний скрол, якщо він залишився від попереднього коду */
        overflow-x: visible; 
        padding-bottom: 0;
    }

    /* Ховаємо всі картки, починаючи з 2-ї (залишиться тільки найперша) */
    .other-posts-list .blog-post:nth-child(n+2) {
        display: none;
    }

    .other-posts-list .blog-post.on-light {
        min-width: 100%;
        max-width: 100%;
    }
}

/* ==================================
   БЛОК CTA В БЛОЗІ
================================== */
.blog-cta-block {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    margin-top: 24px;
    margin-bottom: 32px;
}

/* Слой для фону з Hero */
.hero-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Якщо фон картинкою, розкоментуй рядок нижче: */
    /* background: url('шлях_до_фону_hero.jpg') center/cover no-repeat; */
}

.blog-cta-content {
    position: relative;
    z-index: 2; /* Піднімаємо контент над фоном */
    display: flex;
    flex-direction: row; /* Контент у колонку */
    align-items: center; /* Центруємо контент */
    padding: 24px 24px;
    text-align: center; /* Центруємо текст */
    margin: 0 auto; /* Центруємо блок на сторінці */
    background-color: #000;
}

.blog-cta-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    
}

.blog-cta-title {
    color: #FFF;
    font-family: Unbounded;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 115%; /* 27.6px */
    letter-spacing: -0.48px;
    text-transform: uppercase;
    text-align: left;

}

.blog-cta-desc {
    color: #FFF;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
    text-align: left;

}

.blog-cta-socials {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

/* Кнопки з сильним скругленням та білою обводкою при наведенні */
.cta-social-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 40px; 
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: #FFF;
    font-family: var(--Roboto);
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    transition: border-color 0.3s ease, background 0.3s ease;
    justify-content: flex-start; /* Вирівнюємо контент кнопки по лівому краю */
}

.cta-social-btn:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.05);
}

.cta-social-btn img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ==================================
   АДАПТИВ
================================== */
@media (max-width: 1024px) {
    .blog-cta-content {
        flex-direction: column;
        gap: 20px;
    }
    .blog-cta-content {
        padding: 40px 24px;
    }

    .blog-cta-title {
        font-size: 24px;
        text-align: center;
    }

    .blog-cta-desc {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .blog-cta-block {
        border-radius: 24px;
    }

    

    /* На телефоні кнопки в 1 колонку */
    .blog-cta-socials {
        grid-template-columns: 1fr; 
    }
    
    .cta-social-btn {
        justify-content: center; /* Центруємо контент кнопки на телефоні */
    }
}

@media (max-width: 520px) {
    .blog-cta-socials {
        border-radius: 24px;
        flex-direction: column;
        width: 100%;
    }
}


/* ==================================
   СТРАНИЦА 404 (ERROR PAGE)
================================== */
.error-page {
    padding-bottom: 100px;
}

.error-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 20px; /* Немного приподнял, чтобы влезло в экран */
}

.error-image-container {
    width: 100%;
    max-width: 500px; /* Размер хамелеона как на макете */
    margin-bottom: 24px;
}

.error-main-img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.error-title {
    color: #FFF;
    font-family: var(--Unbounded); 
    font-size: 64px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.error-descr {
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--Roboto);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    max-width: 680px;
    margin: 0 auto 32px;
}

/* Адаптив под мобилки */
@media (max-width: 768px) {
    .error-title {
        font-size: 38px;
    }
    
    .error-descr {
        font-size: 16px;
        margin-bottom: 24px;
    }

    .error-image-container {
        max-width: 280px;
    }

    .error-page {
        padding-bottom: 40px;
    }
}



/* ================= COST OF VACANCY CALCULATOR (ORIGINAL 1.HTML) ================= */
.cov-gradient-container {
  width: 100%;
  margin: 0 auto;
  background: linear-gradient(135deg, #6c52ee 0%, #562b8a 50%, #82305c 100%);
  border-radius: 36px; 
  padding: 40px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.cov-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.cov-dark-card {
  background-color: #131120a9; 
  border-radius: 16px;
  padding: 36px;
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.left-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.card-title {
    color: #FFF;
    font-family: var(--Unbounded);
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 115%;
    letter-spacing: -0.88px;
    text-transform: uppercase;
    padding-bottom: 24px;
}

.card-text {
  font-size: 16px;
  line-height: 1.6;
  color: #d1cbe8; 
  margin-bottom: 16px;
}
.card-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 32px 0 20px 0;
}
.card-footer-text {
  font-size: 13px;
  color: #8c82b4;
  margin: 0;
}

.calc-title {
  font-size: 22px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 24px;
}
.form-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 16px; 
  margin-bottom: 24px; 
}
.input-group { display: flex; flex-direction: column; }
.full-width { grid-column: span 2; }
.input-group label { 
  font-size: 12px; 
  color: #a49ac7; 
  margin-bottom: 8px; 
  font-weight: 500;
}

.cov-dark-card input, .cov-dark-card select {
  background: #1a1433; 
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px; 
  padding: 14px; 
  color: #fff; 
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
}
.cov-dark-card input:focus, .cov-dark-card select:focus {
  border-color: #8a63ff;
}
.cov-dark-card select option { color: #000; }

/* Сбрасываем дефолтную стрелку и ставим свою красивую */
.cov-dark-card select {
  padding-right: 40px !important; /* Увеличиваем отступ справа, чтобы текст не наезжал на стрелку */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Белая SVG-стрелочка */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center; /* Позиционируем стрелку в 14px от правого края */
  background-size: 16px;
}

/* Убираем дефолтную стрелку в старых версиях Edge/IE */
.cov-dark-card select::-ms-expand {
  display: none;
}

.primary-btn, .btn-telegram, .btn-email { 
  width: 100%; 
  background: linear-gradient(90deg, #ffffff 0%, #907aeb 50%, #ffffff 100%); 
  background-size: 200% auto; 
  background-position: 0% center; 
  color: #0b0914; 
  border: none; 
  border-radius: 100px; 
  cursor: pointer; 
  font-weight: 700; 
  font-family: 'Unbounded', sans-serif; 
  font-size: 15px;
  text-transform: uppercase; 
  letter-spacing: 0.5px;
  padding: 18px 24px; 
  transition: background-position 0.5s ease; 
}

.primary-btn:hover, .btn-telegram:hover, .btn-email:hover { 
  background-position: 100% center; 
}

.action-buttons { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 16px; 
  margin-top: 24px; 
}

.inner-result-box { 
  background: #1a1433; 
  border: 1px solid rgba(255, 255, 255, 0.05); 
  padding: 24px; 
  border-radius: 12px; 
  text-align: center; 
}
.inner-result-box h3 { margin-top: 0; padding-bottom: 12px; }
.inner-result-box p { color: #d1cbe8; font-size: 14px; line-height: 1.5; }
#cov-lead-email { width: 100%; box-sizing: border-box; margin: 16px 0; }

.neon-amount { 
  color: #00ffcc; 
  font-size: 46px; 
  font-weight: 700; 
  display: block; 
  margin: 12px 0;
  font-family: 'Unbounded', sans-serif;
  text-shadow: 0 0 20px rgba(0, 255, 204, 0.4); 
}

.btn-telegram { background: #ffffff; color: rgb(67, 43, 103); border: none; border-radius: 100px; padding: 14px; cursor: pointer; font-weight: 500;}
.btn-email { background: #7c4dff; color: white; border: none; border-radius: 100px; padding: 14px; cursor: pointer; font-weight: 500;}
.btn-telegram:hover, .btn-email:hover { opacity: 0.9; transform: translateY(-2px); }

.fade-in { animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
  .cov-cards-grid { grid-template-columns: 1fr; }
  .left-card { text-align: center; }
}
@media (max-width: 480px) {
  .form-grid { grid-template-columns: 1fr; }
  .full-width { grid-column: span 1; }
  .cov-gradient-container { padding: 20px; }
  .cov-dark-card { padding: 20px; }
  .action-buttons { 
        display: grid; 
        grid-template-columns: 1fr; 
        gap: 16px; 
        margin-top: 24px; 
        }
    .neon-amount { font-size: 28px;} 
}

.right-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

.success-message {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-grow: 1; 
  background: transparent; 
  padding: 20px;
}

/* ================= БЛОГ ================= */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 24px;
    row-gap: 42px;
    margin-bottom: 42px;
}

/* Карточка */
.blog-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    border-color: var(--link); 
}

/* Изображение и Рубрика */
.blog-card-img-wrap {
    position: relative;
    width: 100%;
    padding-top: 60%;
    display: block;
    overflow: hidden;
    border-radius: 24px;
}

.blog-card-img-wrap img {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-card-img-wrap img {
    transform: scale(1.05);
}

.blog-card-category {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--bg1); 
    color: var(--white);
    padding: 10px 16px;
    border-radius: 100px;
    font-family: var(--Unbounded);
    font-size: 14px;
    font-weight: 400;
    z-index: 2;
}

/* Текстовая часть */
.blog-card-content {
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
}

/* Дату теперь позиционируем над заголовком */
.blog-card-date {
    display: block;
    font-family: var(--Roboto);
    font-size: 14px;
    color: var(--subtext);
    margin-bottom: 12px; /* Отступ от даты до заголовка */
}

.blog-card-title {
    font-size: 20px;
    font-family: var(--Unbounded);
    font-weight: 500;
    color: var(--white);
    margin-bottom: 12px;
    line-height: 1.3;
    transition: color 0.3s ease;
    
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card:hover .blog-card-title {
    color: var(--hightlight);
}

.blog-card-excerpt {
    font-family: var(--Roboto);
    font-size: 15px;
    color: var(--subtext);
    line-height: 1.5;
    margin-bottom: 0;
    
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Футер карточки */
.blog-card-footer {
    display: flex;
    margin-top: auto;
}

/* Налаштування самої кнопки в блозі */
.btn--read-more {
    width: 100%; /* Розтягуємо кнопку на всю ширину картки */
}

/* Магія: ефект градієнтного бліку на кнопці спрацьовує при наведенні на ВСЮ картку */
.blog-card:hover .btn--read-more {
    background-position: 100% center; 
}

/* Пагинация */
.blog-pagination {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 60px;
}
.blog-pagination a, .blog-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    color: var(--white);
    font-family: var(--Roboto);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}
.blog-pagination span.current, .blog-pagination a:hover {
    background: var(--link);
    color: var(--white);
}

/* ================= АДАПТИВ БЛОГА ================= */
@media (max-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .blog-card-title {
        font-size: 18px;
    }
}

/* ================= ФИЛЬТРЫ РУБРИК ================= */
.filters-list-blog {
    display: flex;
    flex-wrap: wrap; /* Разрешаем перенос на новые строки на ПК */
    gap: 4px; /* Отступы между кнопками */
    margin-bottom: 48px;
}

.filter-btn {
    display: flex;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    border-radius: 45px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: var(--white);
    font-family: var(--Unbounded);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none; /* Убираем подчеркивание у ссылок */
    white-space: nowrap; /* Запрещаем тексту внутри кнопки переноситься */
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Активное состояние и наведение */
.filter-btn.active, 
.filter-btn:hover {
    background: #4B4558; /* Используем твой фирменный цвет */
    border-color: #4B4558;
    color: var(--white);
}

/* ================= АДАПТИВ ФИЛЬТРОВ ================= */
@media (max-width: 768px) {
    .filters-list-blog {
        flex-wrap: nowrap; /* Запрещаем перенос на мобилках */
        overflow-x: auto; /* Включаем горизонтальный скролл */
        padding-bottom: 12px; /* Место снизу, чтобы не резать тени/рамки */
        
        /* Прячем системный ползунок скролла */
        -ms-overflow-style: none;  /* IE / Edge */
        scrollbar-width: none;  /* Firefox */
    }

    /* Прячем ползунок в Chrome / Safari */
    .filters-list-blog::-webkit-scrollbar {
        display: none;
    }
    
    .filter-btn {
        padding: 10px 16px;
        font-size: 12px;
    }

    /* Фейковый элемент, чтобы последняя кнопка не прилипала к правому краю экрана при свайпе */
    .filters-list-blog::after {
        content: "";
        min-width: 1px;
    }
}

/* ==================================
   ГЛОБАЛЬНЫЕ КЛАССЫ (ДЛЯ СВЕТЛЫХ СТРАНИЦ)
================================== */
.blog-post-page {
    background: #EBE2FE; /* Фон страницы за ТЗ */
}

/* Колір body text на світлому фоні */
.text-content {
    color: #352E43; /* Темний колір для тексту, щоб був читабельним */
}

/* Перевизначення заголовків за ТЗ */
.blog-post-title {
    color: #100D16;
    font-family: var(--Unbounded);
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: 115%;
    letter-spacing: -0.84px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.blog-h2 {
    color: #100D16;
    font-family: var(--Unbounded);
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 115%;
    text-transform: uppercase;
    margin-top: 24px;
    margin-bottom: 24px;
}

.blog-h3 {
    color: #100D16;
    font-family: var(--Unbounded);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 115%;
    text-transform: uppercase;
    margin-top: 32px;
    margin-bottom: 16px;
}

/* Градієнт (перероблений під світлий фон) */
.blog-post-page .page-top-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px; /* Висота за ТЗ */
    background: linear-gradient(180deg, #100D16 0%, #52208C 50%, #EBE2FE 100%);
    z-index: -1;
    pointer-events: none;
}

/* ==================================
   ДЕТАЛИЗАЦИЯ ПОСТУ
================================== */
.blog-post-detail {
    max-width: 980px;
    margin: 0 auto;
    padding-top: 32px;
}

.post-header {
    margin-bottom: 24px;
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.vacancy-tag-type.green {
    border-color: #008D6F; /* Зелений колір тегу сфер */
    color: #008D6F;
    font-family: var(--Unbounded);
    font-size: 11px;
    font-weight: 700;
}

.post-date {
    color: #6E568E;
    font-family: var(--Roboto);
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 16px;
}

/* Головне зображення (980x460) */
.post-main-image-wrapper {
    width: 100%;
    height: 460px; /* Висота за ТЗ */
    border-radius: 40px;
    overflow: hidden;
    margin-bottom: 20px;
}

.post-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Заповнює блок, зберігаючи пропорції */
}

/* Тіло поста */
.post-body {
    display: flex;
    flex-direction: column;
}

.post-body .intro {
    font-size: 18px; /* intro-paragraph */
    margin-bottom: 24px;
}

.post-body p {
    margin-bottom: 16px;
}

/* Изображения в тексте (с закругленными углами) */
.post-body img {
    max-width: 100%;
    height: auto;
    border-radius: 20px; /* Закруглені кути для вставлених картинок */
    margin: 24px 0;
}

/* Списки в тексте (с точками) */
.roles-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 24px;
}

.roles-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
}

.roles-list.list-on-light li {
    padding-left: 20px;
}

/* 1. Базовые настройки для элементов списка */
.roles-list li {
    position: relative; /* Чтобы точка позиционировалась ровно относительно текста */
    padding-left: 20px; /* Отодвигаем текст вправо, освобождая место под точку */
    list-style: none;   /* Убиваем стандартные браузерные точки */
    margin-left: 4px;
}

.roles-list.list-on-light li::before {
    content: ""; /* ОБЯЗАТЕЛЬНО! Без этого псевдоэлемент не отрендерится */
    position: absolute;
    left: 0;
    top: 10px; /* Выравниваем по высоте текста (возможно, придется сделать 8px или 12px) */
    width: 6px; /* Ширина точки */
    height: 6px; /* Высота точки */
    border-radius: 50%; /* Делаем её идеально круглой */
    background-color: #9686C2; /* Базовый цвет для темных страниц (если он там используется) */
}

/* Футер поста */
.post-footer {
    margin-top: 60px;
    padding-top: 32px;
    border-top: 1px solid rgba(16, 13, 22, 0.1); /* Тонка лінія */
}

.post-share {
    display: flex;
    align-items: center;
    gap: 24px;
}

.share-title {
    color: #6E568E;
    font-family: var(--Roboto);
    font-weight: 500;
}

.share-links {
    display: flex;
    align-items: center;
    gap: 12px;
}

.share-link {
    display: flex;
    width: 48px;
    height: 48px;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    background: #FFF; /* Біла підложка */
    border: 1px solid rgba(16, 13, 22, 0.1);
    transition: background 0.3s;
}

.share-link:hover {
    background: #A17FFF; /* Фіолетова підложка при наведенні */
}

.share-link img {
    width: 20px;
    height: 20px;
}

/* ==================================
   ІНШІ ПОСТИ
================================== */
.title-xl.style-other-posts-main {
    color: #100D16;
}

.other-posts-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Обертка картки на світлому фоні */
.blog-card.on-light {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    height: 100%;
}

.on-light .blog-post-date {
    color: #6E568E;
}

.on-light .blog-post-name {
    color: #100D16;
}

.on-light .blog-post-descr {
    color: #352E43;
}

.btn--on-light {
    border-color: #6E568E;
    color: #6E568E;
}

.blog-post.on-light:hover .blog-post-name {
    color: #A17FFF; /* Подсветка заголовка фиолетовым при ховере на светлом */
}

.blog-post.on-light:hover .btn--on-light {
    background-color: #A17FFF;
    border-color: #A17FFF;
    color: #FFF;
}

/* ==================================
   АДАПТИВ
================================== */
@media (max-width: 1024px) {
    /* Зменшуємо шрифти заголовків на планшеті */
    .blog-post-title { font-size: 32px; }
    .blog-h2 { font-size: 24px; margin-top: 32px; }
    .blog-h3 { font-size: 18px; margin-top: 24px; }
    
    .post-main-image-wrapper {
        height: 360px;
    }
}

@media (max-width: 768px) {
    .blog-post-page .page-top-gradient {
        height: 400px;
    }

    /* Зменшуємо шрифти та відступи на мобільних */
    .blog-post-title { font-size: 24px; margin-bottom: 16px; }
    .blog-h2 { font-size: 20px; margin-top: 24px; }
    .blog-h3 { font-size: 16px; margin-top: 20px; }
    
    .post-main-image-wrapper {
        height: 280px;
        border-radius: 20px;
        margin-bottom: 32px;
    }

    .post-body .intro {
        font-size: 16px;
        margin-bottom: 24px;
    }

    /* Скролл для картки "Поділитись" на мобилке */
    .post-footer {
        padding-bottom: 1px;
    }
    
    .share-links {
        overflow-x: auto; /* Вмикаємо горизонтальний скролл */
        padding-bottom: 8px; /* Відступ, щоб скролл не резав тіні */
        
        /* Прячем системный ползунок скролла */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .share-links::-webkit-scrollbar {
        display: none;
    }

    /* Горизонтальний скролл для "Інші пости" */
    .other-posts-list {
        flex-wrap: nowrap; /* Запрещаем перенос на новые строки */
        overflow-x: auto; /* Включаем горизонтальный скролл */
        justify-content: flex-start;
        padding-bottom: 8px;
        gap: 16px;
        
        /* Прячем системный ползунок */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .other-posts-list::-webkit-scrollbar {
        display: none;
    }
    
    /* Збільшуємо ширину кожної картки, щоб вони займали 80% екрану в скроллі */
    .other-posts-list .blog-card.on-light {
        min-width: 80%;
        max-width: 80%;
    }
}


/* ==================================
   БЛОК ОГЛАВЛЕНИЯ (TOC)
================================== */
.toc-block {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 32px;
    margin-top: 16px;
    margin-bottom: 40px;
    max-width: 450px;
}

.toc-title {
    color: #100D16;
    font-family: var(--Unbounded);
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.toc-list {
    display: flex;
    flex-direction: column;
    list-style: none; /* Убираем стандартные маркеры */
}

.toc-list li {
    display: flex;
    align-items: flex-start;
}

.toc-link {
    color: #7C4DFF;
    font-family: var(--Roboto);
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    text-decoration: none;
    transition: color 0.3s ease;
}

.toc-link:hover {
    color: #A17FFF;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .toc-block {
        padding: 24px;
        border-radius: 16px;
    }
    
    .toc-title {
        font-size: 16px;
        margin-bottom: 20px;
    }
}

/* ====================================================
   БАЗОВЫЕ СТИЛИ ДЛЯ КОНТЕНТА СТАТЬИ (GUTENBERG)
   Все правила работают только внутри .post-body
==================================================== */

/* 1. Основной текст (Абзацы) */
.post-body p {
    color: #352E43; /* Или var(--subtext) если фон темный */
    font-family: var(--Roboto);
    font-size: 16px;
    line-height: 160%;
    margin-top: 0;
    margin-bottom: 24px; /* Воздух между абзацами */
}

/* 2. Заголовки внутри текста */
.post-body h2 {
    color: #100D16;
    font-family: var(--Unbounded);
    font-size: 32px;
    font-weight: 700;
    line-height: 120%;
    margin-top: 48px; /* Отступ СВЕРХУ больше, чтобы отделить от прошлого текста */
    margin-bottom: 24px;
}

.post-body h3 {
    color: #100D16;
    font-family: var(--Unbounded);
    font-size: 22px;
    font-weight: 700;
    line-height: 130%;
    margin-bottom: 16px;
}

.post-body h4 {
    color: #100D16;
    font-family: var(--Roboto); /* H4 обычно делают более спокойным шрифтом */
    font-size: 18px;
    font-weight: 700;
    margin-top: 24px;
    margin-bottom: 12px;
}

/* 3. КАРТИНКИ (Как просил: скругления 24px) */
.post-body img {
    max-width: 100%;
    height: auto;
    border-radius: 24px; /* Твои 24px */
    display: block;
    margin: 32px auto; /* Центрируем и даем воздух сверху/снизу */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05); /* Легкая тень для красоты (по желанию) */
}

/* 3.1 Подписи к картинкам (Gutenberg оборачивает картинки в <figure>) */
.post-body figure {
    margin: 32px 0;
}

.post-body figure img {
    margin: 0 auto; /* Убираем лишний отступ у самой картинки внутри figure */
}

.post-body figcaption {
    text-align: center;
    color: #888;
    font-family: var(--Roboto);
    font-size: 13px;
    margin-top: 12px;
    font-style: italic;
}

/* 4. Списки (Маркированные - Точки) */
.post-body ul {
    list-style: none; /* Убираем стандартные черные точки */
    padding-left: 0;
}

.post-body ul li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
    font-family: var(--Roboto);
    font-size: 16px;
    line-height: 150%;
    color: #352E43;
}

/* Кастомная фиолетовая точка */
.post-body ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px; /* Выравниваем по центру первой строки */
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #907CE2; /* Цвет из твоей кнопки btn--primary */
}

/* 5. Списки (Нумерованные - 1, 2, 3...) */
.post-body ol {
    padding-left: 20px;
    margin-bottom: 24px;
}

.post-body ol li {
    margin-bottom: 12px;
    font-family: var(--Roboto);
    font-size: 16px;
    line-height: 150%;
    color: #352E43;
    padding-left: 8px;
}

.post-body ol li::marker {
    color: #907CE2; /* Делаем цифры цветными */
    font-weight: 700;
    font-family: var(--Unbounded);
}

/* 6. Цитаты (Blockquote - блок "Цитата" в WordPress) */
.post-body blockquote {
    margin: 32px 0;
    padding: 24px 32px;
    background: rgba(144, 124, 226, 0.05); /* Очень легкий фиолетовый фон */
    border-left: 4px solid #907CE2; /* Акцентная линия слева */
    border-radius: 0 16px 16px 0;
}

.post-body blockquote p {
    font-size: 18px;
    font-style: italic;
    color: #100D16;
    margin-bottom: 0; /* Убираем отступ у последнего абзаца в цитате */
}

/* 7. Ссылки внутри текста */
.post-body a {
    color: #907CE2; /* Фирменный цвет ссылки */
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
    font-weight: 500;
}

.post-body a:hover {
    color: #52208C; /* Темно-фиолетовый при наведении */
    border-bottom-color: #52208C; /* Появляется подчеркивание */
}

/* 8. Жирный текст и курсив */
.post-body strong, .post-body b {
    font-weight: 700;
    color: #100D16; /* Жирный текст чуть темнее основного */
}

.post-body em, .post-body i {
    font-style: italic;
}

/* ==================================
   Исключения для Оглавления (TOC)
================================== */

/* Прячем фиолетовую точку в Змісті */
.post-body .toc-list li::before {
    display: none !important;
}

/* Убираем лишний отступ слева, который был зарезервирован под точку */
.post-body .toc-list li {
    padding-left: 0 !important;
}

/* ==================================
   МОДАЛЬНОЕ ОКНО КОНТАКТОВ
================================== */
.idn-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(16, 13, 22, 0.8); /* Твой темный фон */
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.idn-modal-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.idn-modal-box {
    position: relative;
    width: 100%;
    max-width: 500px;
    background: #140F2C; /* Фон карточек COV */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 24px 48px rgba(0,0,0,0.4);
    transform: translateY(20px) scale(0.95);
    transition: all 0.3s ease;
    max-height: 90vh;
    overflow-y: auto;
}

.idn-modal-overlay.is-active .idn-modal-box {
    transform: translateY(0) scale(1);
}

.idn-modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    background: transparent;
    border: none;
    color: var(--subtext);
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.3s ease;
}

.idn-modal-close:hover {
    color: #FFF;
}

.idn-modal-title {
    color: #FFF;
    font-family: var(--Unbounded);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    padding-right: 32px; /* Чтобы крестик не перекрывал */
}

.idn-modal-subtitle {
    color: var(--subtext);
    font-family: var(--Roboto);
    font-size: 14px;
    margin-bottom: 32px;
}

/* Специфично для формы */
.idn-modal-box .input-group {
    margin-bottom: 20px;
}

.idn-modal-box textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #FFF;
    font-family: var(--Roboto);
    font-size: 16px;
    padding: 16px;
    min-height: 120px; /* В два раза больше по высоте */
    resize: vertical;
    transition: all 0.3s ease;
}

.idn-modal-box textarea:focus {
    outline: none;
    border-color: #A17FFF;
    background: rgba(255, 255, 255, 0.06);
}

/* Красная рамка при ошибке */
.input-error {
    border-color: #ff4444 !important;
}

@media (max-width: 576px) {
    .idn-modal-box {
        padding: 32px 24px;
        width: calc(100% - 32px);
    }
}

/* ==================================
   ИЗОЛИРОВАННЫЕ СТИЛИ ДЛЯ ИНПУТОВ МОДАЛКИ
================================== */

/* Отдельно для текстовых полей (input) */
#idn-form-wrapper input[type="text"] {
    width: 100% !important;
    height: auto !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    color: #FFF !important;
    font-family: var(--Roboto), sans-serif !important;
    font-size: 16px !important;
    padding: 14px 16px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    transition: all 0.3s ease !important;
}

#idn-form-wrapper input[type="text"]:focus {
    outline: none !important;
    border-color: #A17FFF !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

#idn-form-wrapper input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* Отдельно для текстовой области (textarea), как и просил */
#idn-form-wrapper textarea {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    color: #FFF !important;
    font-family: var(--Roboto), sans-serif !important;
    font-size: 16px !important;
    padding: 14px 16px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    min-height: 120px !important;
    resize: vertical !important;
    transition: all 0.3s ease !important;
}

#idn-form-wrapper textarea:focus {
    outline: none !important;
    border-color: #A17FFF !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

#idn-form-wrapper textarea::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* Ошибка валидации */
#idn-form-wrapper .input-error {
    border-color: #ff4444 !important;
}

/* ==================================
   ОШИБКИ ВАЛИДАЦИИ ФОРМЫ
================================== */
#idn-form-wrapper input[type="text"].input-error,
#idn-form-wrapper textarea.input-error {
    border-color: #ff4444 !important;
    background: rgba(255, 68, 68, 0.05) !important; /* Легкая красная подсветка фона */
}

/* Текст ошибки под полем */
.field-error-msg {
    display: none;
    color: #ff4444;
    font-family: var(--Roboto), sans-serif;
    font-size: 12px;
    margin-top: 8px;
    line-height: 1.2;
}

/* Стили спиннера в кнопке */
.idn-btn-spinner {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    animation: rotate-idn 2s linear infinite;
}
.idn-btn-spinner circle {
    stroke: #ffffff; /* Цвет крутилки */
    stroke-linecap: round;
    animation: dash-idn 1.5s ease-in-out infinite;
}
@keyframes rotate-idn {
    100% { transform: rotate(360deg); }
}
@keyframes dash-idn {
    0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}


/* ==================================
   СТИЛИ ДЛЯ БЛОКА RELATED POSTS (Светлый фон)
================================== */

/* Заголовок "Схожі статті" на светлом фоне */
.related-posts .title-xl {
    color: #1A1A1A !important; /* Насыщенный темный цвет */
}

/* Карточка блога в режиме "на светлом фоне" */
.blog-card.on-light .blog-card-title {
    color: #1A1A1A; /* Заголовок статьи */
}

.blog-card.on-light .blog-card-date {
    color: rgba(26, 26, 26, 0.6); /* Дата (чуть приглушенная) */
}

/* Если есть краткое описание (excerpt) в карточке */
.blog-card.on-light .blog-card-excerpt {
    color: rgba(26, 26, 26, 0.8);
}

/* Настройка обводки карточки, если она сливается с фоном */
.blog-card.on-light {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Стили для ссылки внутри заголовка */
.blog-card.on-light .blog-card-title a {
    text-decoration: none;
    color: inherit; /* Берет цвет #1A1A1A, который мы прописали для заголовка */
    transition: color 0.3s ease;
}

/* Эффект при наведении на название */
.blog-card.on-light .blog-card-title a:hover {
    color: #5D3891; /* Или любой твой акцентный цвет, чтобы было понятно, что это ссылка */
}


/* ==================================
   About US страница
================================== */

.about-us-hero-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding-top: 24px;
    margin-bottom: 24px;
    align-items: center;
}

.about-us-hero {
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-items: start;
}

.about-us-title {
    color: #FFF;
    font-family: Unbounded;
    font-size: 44px;
    font-style: normal;
    font-weight: 700;
    line-height: 115%; /* 50.6px */
    letter-spacing: -0.88px;
    text-transform: uppercase;
}

.about-us-title span {
    color: #DACCFF;
}

.about-us-btn-list {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.about-us-hero h1, 
.about-us-hero h2 {
    text-align: left;
}

.about-specs-wrapper {
    display: flex; 
    flex-direction: row;
    gap: 48px;
    align-items: center; /* Или flex-start, чтобы выровнять по верху */
}

/* И для мобилок вернуть колонку: */
@media (max-width: 991px) {
    .about-specs-wrapper {
        flex-direction: column;
    }
    .about-specs-block {
        grid-template-columns: 1fr; /* Одна колонка на телефонах */
    }
}

.about-specs-img {
    max-width: 380px;
    height: auto;
}

.about-specs-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    flex: 1;
}

.about-specs-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.about-specs-block-item {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    flex: 1 0 0;
    border-radius: 32px;
    background: #140F2C;
}

.about-specs-block-item-img {
    width: 52px;
    height: 52px;
}

.about-specs-block-title {
    color: #FFF;
    font-family: Unbounded;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 115%; /* 17.25px */
    text-transform: uppercase;
}

.about-specs-block-subtitle {
    color: #FFF;
    font-family: Roboto;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 24px */
}

/* ==================================
   СЕКЦИЯ: ПРОЦЕС (ABOUT US)
================================== */
.about-process-section {
    display: flex;
    flex-direction: column;
    margin-top: 72px;
    margin-bottom: 80px;
    gap: 48px; /* Чуть увеличил отступ от заголовка для красоты */
}

.about-process-timeline-wrapper {
    position: relative;
}

/* Горизонтальная линия (Десктоп) */
.about-process-line {
    position: absolute;
    top: 10px; /* Выравнивание по центру кружков */
    left: 0;
    width: 69%;
    height: 3px;
    background: #DACCFF;
    z-index: 1;
}

.about-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    position: relative;
    z-index: 2;
}

.about-process-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.about-process-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid #DACCFF;
    background: #08031F; /* Убедись, что этот цвет совпадает с фоном твоей страницы, чтобы линия "пряталась" под кружком */
    margin-bottom: 24px;
}

/* Контурные прозрачные цифры */
.about-outline-number {
    font-family: var(--Unbounded, 'Unbounded', sans-serif);
    color: #DACCFF;
    font-size: 48px;
    font-weight: 200;
    line-height: 100%;
    min-width: 85px;
    margin-bottom: 16px;
}

.about-process-step-title {
    color: #FFF;
    font-family: var(--Unbounded, 'Unbounded', sans-serif);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 120%;
    margin-bottom: 12px;
}

.about-process-step-desc {
    color: #C7BFD7;
    font-family: var(--Roboto, 'Roboto', sans-serif);
    font-size: 15px;
    font-weight: 400;
    line-height: 150%;
}

/* ==================================
   АДАПТИВ (ABOUT US PROCESS)
================================== */

/* Планшеты и мобильные устройства (до 1024px) */
@media (max-width: 1024px) {
    .about-process-grid {
        grid-template-columns: 1fr; /* Перестраиваем в 1 колонку */
        gap: 40px;
        padding-left: 12px;
    }

    .about-us-hero-wrapper {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 24px;
    margin-bottom: 24px;
    }

    .about-process-timeline-wrapper {
        padding-left: 24px; /* Освобождаем место слева для вертикальной линии */
    }

    /* Переделываем горизонтальную линию в вертикальную */
    .about-process-line {
        width: 3px;
        height: 100%;
        left: 14px; /* Центрируем под кружками */
        top: 0;
    }

    .about-process-step {
        position: relative;
    }

    .about-process-dot {
        position: absolute;
        left: -32px; /* Выносим кружок на вертикальную линию */
        top: 0;
        margin-bottom: 0;
    }
}

@media (max-width: 468px) {
    .about-specs-block {
    grid-template-columns: 1fr;
    }

    .about-us-title {
    font-size: 28px;
    }

}


/* ==================================
   СУПЕР-СТИЛИ ДЛЯ ТАБЛИЦ В БЛОГЕ
================================== */

/* Обертка таблицы (Вордпресс обычно задает класс фигуре) */
.wp-block-table {
    margin: 40px 0;
    overflow-x: auto; /* Чтобы таблица скроллилась на мобилках, если она широкая */
}

/* Сама таблица */
.wp-block-table table,
.post-content table { /* Добавил запасной класс */
    width: 100%;
    border-collapse: separate; /* Нужно separate, чтобы сработал border-radius */
    border-spacing: 0;
    background: #FFF;
    border: 1px solid rgb(219, 212, 219); /* Очень тонкая и прозрачная рамка вокруг */
    border-radius: 16px; /* Скругленные углы всей таблицы */
    overflow: hidden;
}

/* Стили ячеек (Отступы и текст) */
.wp-block-table table th,
.wp-block-table table td,
.post-content table th,
.post-content table td {
    padding: 20px 24px;
    text-align: left; /* Текст слева выглядит аккуратнее, чем по центру */
    border-bottom: 1px solid rgba(218, 204, 255, 0.517); /* Только горизонтальные разделители */
    border-right: none;
    border-left: none;
    border-top: none;
    color: #000000;
    font-family: var(--Roboto, 'Roboto', sans-serif);
    font-size: 16px;
    line-height: 150%;
}

/* Стили Шапки таблицы (th) */
.wp-block-table table th,
.post-content table th {
    background: rgba(218, 204, 255, 0.327); /* Чуть подсвечиваем шапку вашим фирменным фиолетовым */
    font-family: var(--Unbounded, 'Unbounded', sans-serif);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid rgba(218, 204, 255, 0.15); /* Линия под шапкой чуть толще */
}

/* Убираем нижнюю полоску у самой последней строки, чтобы не сливалась с радиусом */
.wp-block-table table tr:last-child td,
.post-content table tr:last-child td {
    border-bottom: none;
}

/* Эффект при наведении на строку (Hover) */
.wp-block-table table tbody tr,
.post-content table tbody tr {
    transition: background 0.3s ease;
}

.wp-block-table table tbody tr:hover,
.post-content table tbody tr:hover {
    background: rgba(218, 204, 255, 0.327); /* Строка чуть светлеет при наведении мышки */
}

/* Адаптив для телефонов */
@media (max-width: 768px) {
    .wp-block-table table th,
    .wp-block-table table td,
    .post-content table th,
    .post-content table td {
        padding: 16px;
        font-size: 14px;
    }
}

/* Отступ для якорей, чтобы заголовки не прятались под шапку сайта */
.blog-h2 {
    scroll-margin-top: 65px; 
}





/* Делаем контейнер на всю ширину */
.iti { 
    width: 100%; 
    display: block; 
}

/* Настраиваем цвета внутри списка (чтобы текст был виден на темном фоне) */
.iti__country-list {
    background-color: #1a1230 !important; /* Твой темный фон */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.iti__country-name, .iti__dial-code {
    color: #fff !important;
}

.iti__country.iti__highlight {
    background-color: rgba(218, 204, 255, 0.2) !important;
}

/* --- ФИНАЛЬНЫЙ ФИКС ТЕЛЕФОНА --- */

/* 1. Смещаем текстplaceholder и ввод. 115px должно хватить даже для длинных кодов */
body #idn-form-wrapper .iti input#modal-phone {
    padding-left: 115px !important;
}

/* 2. Делаем поиск темным (убираем тот белый прямоугольник) */
.iti__search-input {
    background-color: #251b3d !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    margin: 10px !important;
    padding: 10px !important;
    outline: none !important;
}

/* Фикс для фокуса в поиске, чтобы не вылазила синяя обводка */
.iti__search-input:focus {
    border-color: rgba(218, 204, 255, 0.5) !important;
    box-shadow: 0 0 0 1px rgba(218, 204, 255, 0.5) !important;
}

/* 3. Стрелочка выбора страны (делаем заметнее) */
.iti__arrow {
    border-top-color: #fff !important;
    opacity: 0.7;
}

/* 4. Контейнер самого списка */
.iti__country-list {
    background-color: #1a1230 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6) !important;
    padding-top: 5px !important;
}

/* Текст внутри списка */
.iti__country-name, .iti__dial-code {
    color: #fff !important;
    font-family: 'Roboto', sans-serif !important;
}

/* 5. Убираем "белый фон" у всего выпадающего блока контента */
.iti__dropdown-content {
    background-color: #1a1230 !important;
    border: none !important;
}