/* Оборачиваем нужные слова в тег <span> в редакторе текста, либо применяем ко всему заголовку */
span.red-underline {
    position: relative;
    white-space: nowrap;
}

span.red-underline::after {
    content: "";
    position: absolute;
    left: -5%;
    bottom: -10px; /* Регулируй высоту подчеркивания под текстом */
    width: 110%;
    height: 15px; /* Толщина штриха */
    /* Заменен цвет stroke в SVG с %23FF3B30 на %2300E676 (Кибер-зеленый) */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20" preserveAspectRatio="none"><path d="M7.7,14.5c113.2-1.3,226.3-2,339.4-2.1c40.1,0,80.3,0.1,120.4,1.9" style="fill:none;stroke:%2300E676;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;"/></svg>');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: -1; /* Штрих будет под текстом */
}


/* Основная секция */
.fon1 {
    position: relative !important;
    overflow: hidden !important;
}

/* Общие стили для всех иконок */
.fon1::before, .fon1::after,
.fon1 .ba-row-wrapper::before,
.fon1 .ba-row-wrapper::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0 !important;
    pointer-events: none;
    opacity: 0.15;
    animation: swdFloatAll 15s infinite ease-in-out;
}

/* --- ИКОНКИ НА СЕКЦИИ --- */

/* Иконка 1: Сетка (Топ-Лево) */
.fon1::before {
    top: 8%;
    left: 5%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23E0E0E0" stroke-width="1.2"><path d="M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z"/></svg>');
}

/* Иконка 2: Курсор (Боттом-Право) */
.fon1::after {
    bottom: 15%;
    right: 17%;
    width: 70px;
    height: 70px;
    animation-delay: -4s;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FFFFFF" stroke-width="1.2"><path d="M22 2L11 13M22 2L15 22L11 13M11 13L2 9L22 2"/></svg>');
}

/* --- ИКОНКИ НА ВНУТРЕННЕМ КОНТЕЙНЕРЕ --- */

/* Иконка 3: Узлы/Связи (Топ-Право) */
.fon1 .ba-row-wrapper::before {
    top: 18%;
    right: 15%;
    width: 68px;
    height: 68px;
    animation-delay: -8s;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23A0A0A0" stroke-width="1.2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8.6 10.7l6.8-3.4M8.6 13.3l6.8 3.4"/></svg>');
}

/* Иконка 4: График (Боттом-Лево) */
.fon1 .ba-row-wrapper::after {
    bottom: 18%;
    left: 15%;
    width: 48px;
    height: 48px;
    animation-delay: -12s;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23D1D1D1" stroke-width="1.2"><path d="M21 21H3V3m18 5l-7 7-4-4-7 7"/></svg>');
}

/* Применяем фон ко всей странице */
body {
    background-color: #050505 !important; /* Глубокий черный база */
    margin: 0;
    padding: 0;
    position: relative;
}

/* Создаем слой свечения, который зафиксирован на экране */
body::before {
    content: "" !important;
    position: fixed !important; /* Фиксируем, чтобы свечение не уезжало при скролле */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at 50% 50%, #1a1a1a 0%, #050505 80%) !important;
    z-index: -2; /* Самый нижний слой */
    pointer-events: none;
}

/* Создаем слой цифрового шума (зернистость) */
body::after {
    content: "" !important;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E") !important;
    opacity: 0.04 !important;
    z-index: -1; /* Чуть выше градиента, но под контентом */
    pointer-events: none;
}

/* Важно: Чтобы эффект был виден, все секции Gridbox должны иметь прозрачный фон */
.ba-section, .ba-row-wrapper, .ba-grid-column-wrapper {
    background-color: transparent !important;
}


.fon2 {
    /* Сложный градиент: мягкое темно-серое свечение, смещенное влево-вверх, уходящее в глубокий черный */
    background: #212127!important;
}


/* ==========================================================================
   АДАПТИВНАЯ СИСТЕМA ТАБОВ НА ВСЮ ШИРИНУ (ДЛЯ БЛОКА БАНКОВ-ПАРТНЕРОВ)
   ========================================================================== */

/* 1. Растягиваем общую обертку табов на 100% ширины */
#item-1778951872525 ul.nav.nav-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important; /* Позволяет новым банкам переноситься, если они не влезают */
    justify-content: space-between !important; /* Равномерно распределяет банки по всей ширине */
    align-items: center !important;
    
    width: 100% !important; /* Занимает всю ширину контейнера */
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 16px !important; /* Чуть уменьшил радиус для широкой панели, так аккуратнее */
    padding: 6px !important;
    margin: 0 auto 50px auto !important;
    list-style: none !important;
    float: none !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px);
}

/* 2. Каждый пункт (li) автоматически делит ширину */
#item-1778951872525 ul.nav.nav-tabs li {
    flex: 1 1 auto !important; /* Магия flex: табы будут одинаково расширяться, заполняя пустоту */
    min-width: 140px !important; /* Минимальная ширина, чтобы текст банка не сжимался */
    margin: 0px !important;
    float: none !important;
    text-align: center !important;
}

/* 3. Кнопки банков (неактивные) внутри широких табов */
#item-1778951872525 ul.nav.nav-tabs li a {
    color: #8a8a8a !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
    padding: 8px 8px !important; /* Оптимальные отступы внутри */
    border: none !important;
    background: transparent !important;
    border-radius: 0px !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    display: block !important;
    width: 100% !important; /* Ссылка занимает всю ширину своей флекс-ячейки */
}

/* 4. Наведение курсора на банк */
#item-1778951872525 ul.nav.nav-tabs li a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

/* 5. АКТИВНЫЙ БАНК (Выбранная вкладка) — Переведено на Кибер-зеленый */
#item-1778951872525 ul.nav.nav-tabs li.active a {
    background: #00E676 !important; /* Новый неоновый зеленый */
    color: #050505 !important; /* Темный текст для идеальной читаемости на ярком фоне */
    box-shadow: 0 6px 20px rgba(0, 230, 118, 0.3) !important; /* Мягкий зеленый неон */
}

/* 6. Очистка дефолтных стилей контента */
#item-1778951872525 .tab-content {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}