main{margin-top: -82px;}
.top-block {
    position: relative;
    width: 100%;
    height: 60vh; /* Высота шапки: 60% от высоты экрана (можно задать в px, например 400px) */
    overflow: hidden; /* Прячем всё, что выходит за пределы шапки */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Настройки видео */
.top-block .video-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Видео заполнит весь блок без искажения пропорций */
    object-position: center top;
    z-index: 1; /* Отправляем видео на задний план */
}

/* Полупрозрачный слой для читаемости текста (опционально) */
.top-block .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Черный цвет с прозрачностью 40% */
    z-index: 2;
}
            :root {
                --color-bg-main: #FFFFFF;        /* Белый фон */
                --color-bg-secondary: #F0F0F0;   /* Светло-серый для секций */
                --color-text-main: #333333;      /* Темный текст */
                --color-text-secondary: #666666; /* Серый текст */
                --color-accent-blue: #007BFF;    /* Основной акцентный синий */
                --color-accent-red: #FF416C;     /* Вторичный акцентный красный (для CTA) */
                --font-main: 'Arial', sans-serif;
                --border-radius: 12px;
            }
    
            /* == Базовые стили == */
            body {
                font-family: var(--font-main);
                margin: 0;
                padding: 0;
                background-color:#fcf3f0;
                color: var(--color-text-main);
                line-height: 1.6;
            }
            .container {
                max-width: 1200px; /* Увеличим для десктопного режима */
                margin: 0 auto;
                padding: 0 15px;
            }
    
            .header {
                /* background: linear-gradient(to right, rgb(107, 20, 220), rgb(143, 71, 238)); */
                /* border-bottom: 1px solid #E0E0E0; */
                padding: 15px 0;
                position: sticky;
                top: 0;
                z-index: 100;
                /* background: linear-gradient(288deg, #667eea 0%, #840cff 100%); */
            }
            .header .container {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .logo {max-width: 100px;}
            .logo a {
                color: rgb(253 230 64);
                font-size: 1em;
                font-weight: bold;
                text-decoration: none;
            }
            .menuMainContainer{margin: 0 auto;max-width: 1200px;}
            .nav{
                background: #FFFFFF;
                display: table;
                z-index: 9;
                position: fixed;
                border-radius: 20px;
                max-width: 380px;
                border: 1px solid #eee;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
            }
            .nav-links a {
                color: #6a6969;
                padding: 20px 20px 20px 25px;
                text-decoration: none;
                transition: color 0.3s;
                font-weight: bold;
            }
            .nav ul{list-style-type:none;margin: 0px;padding: 0px;}
            .nav-links a:hover {
                color: #8119fd; 
                /* #8119fd */
                background: #6c67ee29;
                border-radius: 20px;
            }
            .active{
                background: #6c67ee29;
                color: #8119fd !important;
            }
    
            /* == Секция Ленты (ОСНОВНОЕ ИЗМЕНЕНИЕ ЗДЕСЬ) == */
            .feed-layout {
                display: grid;
                background-color:#fcf3f0;
                /* grid-template-columns: 25% 75%; Два одинаковых столбца */
                grid-template-columns: none;
                max-width: 1200px;
                margin: 0 auto;
            }
            .feed-grid {
                padding: 10px;
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                gap: 30px;
            }
            
    
            /* == Стиль для Каждого Блока-Плитки == */
            .feed-block {
                background-color: var(--color-bg-main);
                border-radius: var(--border-radius);
                box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px;
                padding: 0; /* Убираем паддинг тут, чтобы видео было вплотную */
                overflow: hidden; /* Обрезает контент по радиусу */
                display: inline-block;
                transition: transform 0.3s;
                max-height: fit-content;
                vertical-align: top;
            }
            .feed-block:hover {
                transform: translateY(-5px);
            }
            
            /* Внутренний контент блока */
            .block-content {
                padding: 20px;
            }
    
            /* Блок 1: Видео (Портретный формат) */
            .video-block {
                /* Портретный аспект (9:16) - высота в 1.777 раза больше ширины */
                position: relative;
                background-color: #000;
            }
            .video-block iframe, .video-block video {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
    
            /* Блок 2: Текст */
            .text-block h2 {
                color: var(--color-accent-blue);
                margin-top: 0;
                font-size: 1.3em; /* Чуть меньше для плитки */
            }
            .text-block p {
                color: var(--color-text-secondary);
            }
    
            /* Блок 3: CTA */
            .cta-block {
                text-align: center;
                /* Flex-grow, чтобы блок CTA всегда был внизу, если нужно */
                margin-top: auto; 
                padding: 20px;
            }
            .cta-button {
                display: block;
                padding: 15px 10px;
                border-radius: var(--border-radius);
                text-decoration: none;
                font-weight: bold;
                font-size: 1.1em; 
                text-transform: uppercase;
                background-color: var(--color-accent-red); 
                color: var(--color-bg-main);
                transition: background-color 0.3s;
            }
            .cta-button:hover {
                background-color: #E0355A;
            }
    
            /* Блок 4: Иконки Площадок */
            .links-block {
                text-align: center;
                padding: 20px;
            }
            .feed-block h1, .feed-block h2, .feed-block h3 {
                color: var(--color-accent-blue);
            }
            .app-icons a {
                margin: 0 5px;
                display: inline-block;
            }
            .app-icons img {
                width: 120px; /* Уменьшим размер иконок для плитки */
                height: 120px;
                border-radius: 50%;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
                background: #ffcd01;
                box-shadow: 0 2px 0px #CC5500, 0px 0px 0px rgba(0, 0, 0, 0);
            }
    
            /* == Футер == */
            .footer {
                background: white;
                border-top: 1px solid rgb(229, 231, 235);
                padding: 30px 0;
                text-align: center;
                font-size: 0.85em;
                color: rgb(75, 85, 99);
            }
            .footer a {
                color: rgb(75, 85, 99);
                text-decoration: none;
                margin: 0 10px;
            }
            /* ... другие стили ... */
    
    /* Добавляем стили для видеоплеера, чтобы он занимал весь контейнер 9:16 */
    .video-placeholder .video-player {
    /* position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; */
    /* Убедимся, что на мобильных плеер не показывает кнопки управления */
    /* Это не всегда работает, но помогает */
    pointer-events: none; 
    }
    .btn-play-demo {
        background: linear-gradient(to bottom,  #FFD700, #FF8C00);
        padding: 12px 20px;
        color: #fff;
        border-radius: 12px;
        text-decoration: none;
        font-weight: bold;
        text-align: center;
        display: block;
        position: relative;
        box-shadow: 
            0 2px 0px #CC5500,
            0px 0px 0px rgba(0, 0, 0, 0);
        transition: all 0.2s ease;
        cursor: pointer;
        text-transform: uppercase;
    }
    
    
    /* Стили для кнопки бургера */
    #menuToggle{
        border: none;
        background: linear-gradient(to bottom, #FFD700, #FF8C00);
        padding: 12px 20px;
        color: #CC5500;
        border-radius: 12px;
        text-decoration: none;
        font-weight: bold;
        text-align: center;
        display: block;
        position: relative;
        box-shadow: 0 2px 0px #CC5500, 0px 0px 0px rgba(0, 0, 0, 0);
        transition: all 0.2s ease;
        cursor: pointer;
    }
    .no-active{
        display: none !important;
    }
    /* Иконки меню */
    .nav-link {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
    }
    
    .nav-link::before {
        content: '';
        width: 60px;
        height: 60px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    
    .icon-home::before { background-image: url('/image/256-icon-about-bubbleo.png'); }
    .icon-platforms::before { background-image: url('/image/256-icon-platforms.png'); }
    .icon-play::before { background-image: url('/image/256-icon-play-online.png'); }
    .icon-hub::before { background-image: url('/image/invite-icon.png'); }
    
     /* == Адаптация для мобильного */
     @media (max-width: 1013px) {
               
               .feed-layout {
                   grid-template-columns: none;
                   /* position: fixed;
                   height: 100%; */
               }
           }
.show{
    display: block;
    height: 80px;
    background: linear-gradient(to top, rgb(252 243 240) 0%, rgb(252 243 240 / 0%) 100%);
    margin-top: -80px;
    z-index: 10;
    position: relative;
}
.show::before {
  content: "";
  position: absolute;
  inset: -40px 0 0 0; /* вылезаем вверх */
  background: linear-gradient(
    to top,
    rgb(252 243 240) 0%,
    rgb(252 243 240 / 0%) 100%
  );
  pointer-events: none;
  z-index: -1;}
  .section-main-article h2{text-align: center;}
  .main-page-article{
        max-width: 1020px;
        margin: 0 auto;
        overflow-x: scroll;
        display: flex;
        gap: 15px;
  }
  .main-page-article article{
    background: #ffffff;
    border-radius: 20px;
    text-align: center;
    padding: 10px;
    width: 300px;
    border: 1px solid #eee;
    min-width: 300px;
  }
  .main-page-article article a{
        text-decoration: none;
        font-size: 13px;
        color: #6c67ee;
  }
  .btn-more-hub{
    background: linear-gradient(to bottom, #667eea, #6c67ee);
    padding: 12px 20px;
    color: #fff;
    border-radius: 12px;
    text-decoration: none;
    font-weight: bold;
    display: block;
    position: relative;
    box-shadow: 0 2px 0px rgb(107, 20, 220), 0px 0px 0px rgba(0, 0, 0, 0);
    transition: all 0.2s ease;
    cursor: pointer;
    max-width: 50px;
    text-align: center;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
  }