/* ==========================================================================
   1. СОВРЕМЕННЫЙ CSS RESET
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    height: -webkit-fill-available;
}

body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #fdfdfd;
    color: #1a1a1a;
}

img, picture, video, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   2. АРХИТЕКТУРА СЕТКИ (GRID SYSTEM)
   ========================================================================== */

/* Блок на всю ширину экрана */
.section-full {
    width: 100%;
}

/* Главный контейнер сетки (Макс 1440px + центрирование) */
.grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* Честные 12 колонок */
    column-gap: 30px; /* Межколоночный константный отступ (Gutter) */
    row-gap: 20px;    /* Отступ между рядами, если колонки переносятся */
    
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    
    /* Умные боковые отступы: на мобильных 16px, на десктопах плавно до 40px */
    padding-left: clamp(1rem, 4vw, 2.5rem);
    padding-right: clamp(1rem, 4vw, 2.5rem);
}

/* Базовое поведение колонок: на мобильных (по умолчанию) все занимают 12 колонок */
.grid-container > [class^="col-"] {
    grid-column: span 12;
}

/* ==========================================================================
   3. СЕТКА ДЛЯ ДЕСКТОПА (от 768px и выше)
   ========================================================================== */
@media (min-width: 768px) {
    .col-1  { grid-column: span 1; }
    .col-2  { grid-column: span 2; }
    .col-3  { grid-column: span 3; }
    .col-4  { grid-column: span 4; }
    .col-5  { grid-column: span 5; }
    .col-6  { grid-column: span 6; }
    .col-7  { grid-column: span 7; }
    .col-8  { grid-column: span 8; }
    .col-9  { grid-column: span 9; }
    .col-10 { grid-column: span 10; }
    .col-11 { grid-column: span 11; }
    .col-12 { grid-column: span 12; }
}

/* ==========================================================================
   4. СТИЛИ ДЛЯ ДЕМОНСТРАЦИИ (Можно удалять/менять)
   ========================================================================== */

.my-5 { margin-top: 50px; margin-bottom: 50px; }
.text-right { text-align: right; }

.header-bg {
    background-color: #ffffff;
	background-image:url(../img/main_bg.webp);
    border-bottom: 1px solid #eaeaea;
    padding: 20px 0;
}
.row_logo{}
.row_logo svg{}
.blue_btn{}
.main_title_head{}
.main_title_head h1{}
.main_title_head h1 span{}

.meta_inform{}
.meta_inform span{}
.mobile_form{}
.need_validete input{}
.need_validete button{}

.row_block{}
.row_block img{}
.row_block img{}

.title_block{}
.title_block .main_sec_title{}
.title_block .main_sec_title span{}
.title_block .action_slider{}
.title_block .action_slider button{}
.title_block .action_slider button.next{}

.content_block{}
.m_action_slider{}
.m_action_slider button{}
.m_action_slider button.next{}

.content_block .feature_list{}
.content_block .feature_list li{}
.content_block .feature_list li:before{}
.content_block .desc_data{}
.content_block .small_meta{}
.content_block .small_meta span{}
.content_block .invest_block{}
.content_block .invest_block .invest_item{}
.content_block .invest_block .invest_item img{}
.content_block .invest_block .invest_item .name_invest{}
.content_block .invest_block .invest_item .desc_invest{}
.content_block .number_fea{}
.content_block .number_fea span{}
.content_block .number_fea p{}

.flex_block{}
.flex_block .text_action{}
.flex_block .text_action strong{}

.dark-bg {
    background: blue;
    color: white;
    padding: 80px 0;
}

.promo-bg {
    background: #5856d6;
    color: white;
    padding: 80px 0;
}

.footer-bg {
    background-color: #111111;
    color: #ffffff;
    padding: 40px 0;
}

.card {
    background-color: #f3f3f7;
    padding: 30px;
    border-radius: 6px;
    border: 1px solid #e1e1e8;
}