/* ==========================================================================
   БАЗОВЫЕ СИСТЕМНЫЕ СТИЛИ И ГЕОМЕТРИЯ ЭКОСИСТЕМЫ
   ========================================================================== */

* {
    box-sizing: border-box;
    margin: 0; padding: 0;
    scroll-behavior: smooth;
}

body {
    font-family: "Segoe UI", Roboto, sans-serif;
    background: #06090e;
    color: #fff;
    overflow-x: hidden;
}

/* ФОНОВАЯ ДЕСНИЦА ТВОРЦА */
.invisible-background-layer {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%; 
    background: url('cover.webp') no-repeat center center;
    background-size: cover;
    z-index: 1; pointer-events: none; 
    transform: translateZ(0); -webkit-transform: translateZ(0);
}

/* ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКОВ В ВЕРХНЕМ УГЛУ — ХРУСТАЛЬ 0.15 */
.lang-switcher {
    position: fixed; top: 20px; right: 20px; z-index: 2100;
    background: rgba(6, 9, 14, 0.15); border: 1px solid #ffcc00;
    padding: 5px 12px; border-radius: 8px; display: flex; gap: 4px;
    backdrop-filter: blur(0.3px) !important; -webkit-backdrop-filter: blur(0.3px) !important;
}

.lang-btn {
    background: transparent; border: none; color: #ffffff; font-weight: 700;
    cursor: pointer; padding: 4px 8px; font-size: 0.9rem; transition: color 0.3s;
    text-transform: uppercase;
}

.lang-btn:hover, .lang-btn.active { 
    color: #ffcc00; 
    text-shadow: 0 0 8px rgba(255, 204, 0, 0.6); 
}

/* ГЕОМЕТРИЯ ГЛАВНОГО ЭКРАНА */
.hero {
    position: relative; min-height: 100vh; min-height: 100dvh; 
    display: flex; flex-direction: column; justify-content: space-between;
    align-items: center; text-align: center; padding: 40px 20px 20px 20px; z-index: 2;
}

.site-header-block { width: 100%; z-index: 2; margin-top: 30px; }

/* ДАТА ОСНОВАНИЯ — ХРУСТАЛЬ 0.15 */
.badge {
    background: rgba(6, 9, 14, 0.15) !important; border: 1px solid #ffcc00; color: #ffcc00;
    padding: 10px 24px; border-radius: 25px; font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px; display: inline-block;
/*    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); */
    backdrop-filter: blur(0.3px) !important; -webkit-backdrop-filter: blur(0.3px) !important;
    transition: all 0.4s ease !important;
    cursor: default; /* При наведении курсор будет аккуратным */
}

/* ЭФФЕКТ ХОВЕРА: Вспыхивает сочным золотым сиянием, как кнопка поддержки */
.badge:hover {
    border-color: #ffcc00 !important;
    color: #ffffff !important; 
    box-shadow: 0 0 25px rgba(255, 204, 0, 0.5) !important;
    transform: translateY(-1px);
}	
}

.center-composition-box { width: 100%; max-width: 1000px; z-index: 2; margin: 20px 0; }

/* ==========================================================================
   СВЯЩЕННЫЙ СОЛЯРНЫЙ ЗАГОЛОВОК (КРИСТАЛЬНЫЙ СВЕТ)
   ========================================================================== */

.main-holy-title {
    font-family: "Cambria", "Georgia", "Times New Roman", serif;
    font-size: 3.4rem; font-weight: 900; text-transform: uppercase; line-height: 1.25;
    letter-spacing: 1.5px; display: flex; flex-direction: column; gap: 10px;
}

/* 1 СТРОКА: ВСЕМИРНЫЙ МАНИФЕСТ */
.title-line-gold {
    font-size: 2.8rem;
    background: linear-gradient(180deg, #ffffff 10%, #fff0b3 35%, #ffcc00 70%, #d4a300 100%) !important;
    -webkit-background-clip: text !important; 
    -webkit-text-fill-color: transparent !important;
    color: #ffcc00; 
    font-weight: 900;
    text-shadow: none;
    filter: drop-shadow(0 0 8px rgba(255, 204, 0, 0.45)) drop-shadow(0 0 20px rgba(255, 230, 128, 0.2));
	transition: all 0.6s ease !important;
}
.title-line-gold.wave-active {
    filter: drop-shadow(0 0 20px rgba(255, 204, 0, 0.9)) drop-shadow(0 0 40px rgba(255, 230, 128, 0.6)) !important;
	
    /* Дополнительный визуальный толчок: строка на долю секунды слегка приподнимается и увеличивается на 1% */
    transform: scale(1.01);	
}

/* 2 СТРОКА: ГОЛУБЬ МИРА И БОГА */
.title-line-white {
    font-size: 3.8rem;
    color: #ffffff; 
    text-shadow: 
      0 0 12px rgba(255, 255, 255, 0.65), 
      0 0 25px rgba(255, 230, 128, 0.3);
    transition: all 0.6s ease !important;
}
/* ИСПРАВЛЕНО: Максимально мощная, густая солярная вспышка */
.title-line-white.wave-active {
    color: #ffffff !important;
    text-shadow: 
      0 0 20px rgba(255, 255, 255, 1),        /* Мощное белое свечение по контуру букв */
      0 0 35px rgba(255, 255, 255, 0.9),      /* Усиленный средний слой */
      0 0 60px rgba(255, 204, 0, 0.85),       /* Густой золотой неоновый ореол вокруг */
      0 0 90px rgba(255, 230, 128, 0.5) !important; /* Глубокая фоновая засветка */
    
    /* Дополнительный визуальный толчок: строка на долю секунды слегка приподнимается и увеличивается на 1% */
    transform: scale(1.01);
}	  

/* 3 СТРОКА: ПРОЕКТ АЛЕКСАНДРА */
.title-line-geo {
    font-size: 1.35rem; font-weight: 700; color: #ffe066; 
    letter-spacing: 3px; margin-top: 12px; text-transform: none; font-style: italic;
    text-shadow: 
      0 0 8px rgba(255, 204, 0, 0.5),
      0 0 0.3px rgba(255, 230, 128, 0.2);
}
/* ==========================================================================
   МОЩНАЯ ТРЕХКОЛОНОЧНАЯ СЕТКА GRID И СТИЛИ КОЛОНОК
   ========================================================================== */

.main-grid {
    display: grid;
    /* Исправлено: 100% безопасные фиксированные пропорции без дробных fr */
    grid-template-columns: 31% 35% 31%; 
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    z-index: 2;
    align-items: stretch;
}

/* ТРИ ГЛАВНЫЕ КОЛОНКИ — ХРУСТАЛЬ 0.15 + РАЗМЫТИЕ 0.3px */
.glass-column {
    background: rgba(6, 9, 14, 0.15) !important; 
    backdrop-filter: blur(0.3px) !important; -webkit-backdrop-filter: blur(0.3px) !important;
    border: 1px solid rgba(255, 204, 0, 0.2) !important;
    border-radius: 16px;
    padding: 22px;
    height: 380px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
/*    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;*/
    text-align: left;
}

/* Индивидуальные неоновые акценты колонок */
.left-column { border-left: 4px solid #ffcc00 !important; }
.center-column { border-top: 4px solid #ffffff !important; }
.right-column { border-right: 4px solid #00a8ff !important; } 

.column-title {
    font-size: 1.15rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1px; color: #fff; margin-bottom: 0.3px; border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 8px; text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.column-scroll-content {
    flex: 1; overflow-y: auto; padding-right: 5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* ИЗЯЩНЫЕ СКРОЛЛБАРЫ */
.column-scroll-content::-webkit-scrollbar { width: 3px !important; }
.column-scroll-content::-webkit-scrollbar-track { background: transparent !important; }
.column-scroll-content::-webkit-scrollbar-thumb { background: rgba(0, 168, 255, 0.25) !important; border-radius: 10px !important; }
.column-scroll-content { scrollbar-width: thin; scrollbar-color: rgba(0, 168, 255, 0.25) transparent; }

.description-melody {
    font-size: 0.94rem; 
    line-height: 1.55; 
    color: #ffffff; 
    white-space: pre-line;
    font-weight: 500; 
}

.highlight-text { color: #ffe066 !important; font-style: italic; font-weight: 600; }

/* ШКАЛА КОПИЛКИ НА ДОМЕН */
.progress-bar-container {
    width: 100%; height: 22px; background: rgba(0, 0, 0, 0.5);
    border-radius: 12px; border: 1px solid rgba(255, 204, 0, 0.2);
    position: relative; overflow: hidden; margin: 15px 0 12px 0;
}
.progress-bar-fill {
    height: 100%; background: linear-gradient(90deg, #ffcc00, #00a8ff) !important;
    box-shadow: 0 0 12px rgba(0, 168, 255, 0.5);
}
.progress-text {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 0.8rem; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
.fund-payment-hint { font-size: 0.85rem; color: #ffe066; font-weight: 600; text-align: center; line-height: 1.4; }

/* ПЛАШКА КОНТАКТОВ ВНИЗУ — ХРУСТАЛЬ 0.15 + ДВУХСТОРОННИЙ НЕОН (ЖЕЛТЫЙ И ГОЛУБОЙ) */
.contacts-wide-box {
    width: 100%; 
    max-width: 1200px; 
    background: rgba(6, 9, 14, 0.15) !important; /* Наш эталонный хрусталь 15/100 */
    backdrop-filter: blur(0.3px) !important; 
    -webkit-backdrop-filter: blur(0.3px) !important;
    border: 1px solid rgba(255, 204, 0, 0.2) !important;
    
    /* ДВУХСТОРОННЯЯ СВЯЩЕННАЯ РАМКА ПО 4 ПИКСЕЛЯ */
    border-left: 4px solid #ffcc00 !important;   /* Оставили нашу родную желтую полосу слева */
    border-right: 4px solid #00a8ff !important;  /* Добавили сочную неоново-голубую полосу справа */
    
    border-radius: 16px; 
    padding: 15px;
    margin: 20px auto 10px auto; 
    z-index: 2; 
/*    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important; */
}

.contacts-wide-box .description-melody {
    text-align: center; color: #ffe066 !important; font-weight: 600; font-size: 0.95rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
/* ==========================================================================
   ИНТЕРАКТИВНАЯ СИСТЕМА ПОДДЕРЖКИ И НАВИГАТОР ЭКОСИСТЕМЫ
   ========================================================================== */

/* 1. КНОПКА: ПОДДЕРЖАТЬ РАЗВИТИЕ ПРОЕКТА (ИЗНАЧАЛЬНО ЗОЛОТАЯ) */
.minimal-glass-donate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 9, 14, 0.15) !important; 
    border: 1px solid rgba(255, 204, 0, 0.45) !important; /* Сделали кантик чуть выразительнее */
    
    /* Изначально текст горит благородным золотом */
    color: #ffcc00 !important; 
    
    padding: 12px 36px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
/*    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); */
    backdrop-filter: blur(0.3px) !important; 
    -webkit-backdrop-filter: blur(0.3px) !important;
    cursor: pointer;
    transition: all 0.3s ease;
    
    /* Наша эталонная четкая тень для идеальной читаемости букв */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

/* ЭФФЕКТ ИНВЕРСИИ ПРИ НАВЕДЕНИИ И КОГДА ПЛАШКА ОТКРЫТА */
.minimal-glass-donate-btn:hover,
.minimal-glass-donate-btn.active-state {
    border-color: #ffcc00 !important;
    
    /* Текст переключается в чистый белоснежный глянец */
    color: #ffffff !important; 
    
/*    box-shadow: 0 0 25px rgba(255, 204, 0, 0.5) !important; */
    transform: translateY(-2px) !important;
}

/* ШИРОКАЯ ПЛАШКА ДОНАТОВ В СКРЫТОМ СОСТОЯНИИ */
.wide-donate-box.sbp-card {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 30px !important; 
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background: rgba(6, 9, 14, 0.15) !important; 
    backdrop-filter: blur(0.3px) !important; 
    -webkit-backdrop-filter: blur(0.3px) !important;
    border: 1px solid rgba(255, 204, 0, 0) !important;
    border-left: 4px solid rgba(255, 204, 0, 0) !important;
    box-shadow: none !important;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
    border-radius: 18px;
}

/* Контейнер кнопки триггера — выводим на самый передний план, чтобы плашка его не перекрывала */
.donate-trigger-container {
    position: relative;
    z-index: 2200 !important; /* Выше, чем z-index плашки */
}

/* СОСТОЯНИЕ ВЫЕЗДА ПЛАШКИ (Увеличили высоту, чтобы текст не обрывался!) */
.wide-donate-box.sbp-card.open {
    max-height: 700px; /* Увеличили лимит высоты с запасом */
    opacity: 1;
    padding: 30px !important; 
    margin-top: 10px !important; 
    margin-bottom: 25px !important;
    border: 1px solid rgba(255, 204, 0, 0.2) !important;
    border-left: 4px solid #ffcc00 !important;
    border-right: 4px solid #00a8ff !important;  /* Новая бирюзово-голубая полоса справа */	
/*    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65) !important; */
    position: relative;
    z-index: 2000 !important;
    overflow: visible !important; /* Разрешаем браузеру отображать весь внутренний текст полностью */
}

/* 1. ЗАГОЛОВОК ПЛАШКИ: ПОДДЕРЖКА И СОЗИДАНИЕ МАНИФЕСТА МИРА */
.donate-main-title {
    margin-top: 0 !important;
    font-size: 1.4rem !important;
    color: #ffcc00 !important;
    margin-bottom: 12px !important;
    text-align: center !important;
    font-weight: 700 !important;
    /* Установили точную тень, как у заголовка Манифеста в центре */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

.donate-subtitle-text {
    font-size: 0.98rem !important;
    color: #ffffff !important; 
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
    text-align: center !important;
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* ВНУТРЕННЯЯ ЦЕНТРАЛЬНАЯ КАРТОЧКА РЕКВИЗИТОВ — ХРУСТАЛЬ 0.15 */
.sbp-inner-card-box {
    max-width: 580px;
    width: 100%;
    margin: 0 auto;
    padding: 25px 20px;
    background: rgba(6, 9, 14, 0.05) !important; 
    backdrop-filter: blur(0.3px) !important; -webkit-backdrop-filter: blur(0.3px) !important;
    border: 1px solid rgba(255, 204, 0, 0.3) !important; 
    border-radius: 14px;
/*    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); */
}

.sbp-inner-space { padding-top: 5px; }

/* 2. ОТСТУП ДЛЯ КРИПТОСЕЙФА (Чтобы он не сливался со строкой ввода) */
.sbp-main-title {
    margin-top: 15px !important; /* Увеличили отступ сверху, добавив капельку воздуха */
    margin-bottom: 18px !important; /* Дали красивый зазор до строки с кодом */
    font-size: 1.3rem; 
    font-weight: 900;
    letter-spacing: 3px; 
    color: #ffcc00; 
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(255, 204, 0, 0.25);
}

.sbp-phone-badge {
    cursor: pointer; display: inline-block; padding: 5px 24px; border-radius: 20px;
    background: linear-gradient(135deg, #ffcc00 0%, #d4af37 100%);
/*    box-shadow: 0 4px 0.3px rgba(255, 204, 0, 0.15); transition: all 0.2s ease;*/
}
.sbp-phone-badge:hover { transform: scale(1.02); /* box-shadow: 0 6px 20px rgba(255, 204, 0, 0.3); */ }

.sbp-phone-text {
    font-size: 1.35rem; color: #06090e; font-weight: 500; margin: 0; letter-spacing: 0.8px;
}

/* ПОДСКАЗКИ ДЛЯ КОПИРОВАНИЯ ВНУТРИ СЕЙФА (СБП И КРИПТА) */
.sbp-toast { 
    display: block; 
    font-size: 0.88rem !important; /* Увеличили размер с мизерного 0.72rem до крупного 0.88rem */
    color: #ffffff !important; /* Сделали текст полностью белым */
    margin-top: 10px !important; /* Дали немного свободного воздуха сверху */
    font-weight: 600 !important; /* Сделали шрифт чуть плотнее */
    text-align: center !important;
    /* Мягкая тень под буквами, чтобы текст идеально читался на любом фоне */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important; 
}

/* Строка получателя: Александр Александрович К. */
.sbp-receiver {
    font-size: 0.85rem !important; 
    color: #ffffff !important; /* Изменено с #bdc3c7 на белый */
    margin: 12px 0 20px 0 !important; 
    text-transform: uppercase;
    letter-spacing: 1px !important; 
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important; /* Добавлена тень */
}

.sbp-divider { width: 50px; height: 1px; background: rgba(255, 204, 0, 0.15); margin: 0 auto 20px auto; }

/* Заголовок над банками: Перейти в мобильное приложение банка */
.sbp-bank-headline { 
    font-size: 0.8rem; 
    color: #ffffff; /* Изменено с #bdc3c7 на белый */
    text-transform: uppercase; 
    letter-spacing: 1px; 
    margin-bottom: 12px; 
    font-weight: bold; 
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important; /* Добавлена тень */
}

.sbp-banks-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 25px; }

/* Базовое состояние кнопок банков — зажигаем каёмочки золотым неоном */
.bank-link {
    text-decoration: none; 
    background: rgba(6, 9, 14, 0.25) !important; /* Чуть плотнее подложка */
    color: #ffffff !important; 
    padding: 6px 16px !important; 
    border-radius: 20px !important;
    font-size: 0.8rem !important; 
    border: 1px solid rgba(255, 204, 0, 0.45) !important; /* Каёмочка стала ярче и заметнее */
    font-weight: 600; 
    white-space: nowrap; 
    transition: all 0.25s ease !important;
/*    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 0 4px rgba(255, 204, 0, 0.1); */
}

/* Общий эффект при наведении — кнопки вспыхивают бирюзовым неоном в тон ткани */
.bank-link:hover {
    background: rgba(0, 168, 255, 0.12) !important; 
    border-color: #00a8ff !important; /* Бирюзовое неоновое свечение */
    color: #ffffff !important;
/*    box-shadow: 0 0 15px rgba(0, 168, 255, 0.45) !important; */
    transform: translateY(-1px);
}

/* Точечные благородные отблески для конкретных банков (опционально, гармонируют с бирюзой) */
.bank-link.sber:hover { background: rgba(34, 139, 34, 0.15) !important; border-color: #2ch82c !important; /* box-shadow: 0 0 15px rgba(34, 139, 34, 0.45) !important; */ }
.bank-link.tbank:hover { background: rgba(255, 215, 0, 0.15) !important; border-color: #ffcc00 !important; /* box-shadow: 0 0 15px rgba(255, 204, 0, 0.45) !important; */ }
.bank-link.alfa:hover { background: rgba(220, 20, 60, 0.15) !important; border-color: #ff3344 !important; /* box-shadow: 0 0 15px rgba(220, 20, 60, 0.45) !important; */ }

.bank-link.vtb:hover { background: rgba(30, 144, 255, 0.12); border-color: rgba(30, 144, 255, 0.25); }
.bank-link.yandex:hover { background: rgba(128, 128, 128, 0.15); border-color: rgba(128, 128, 128, 0.3); }
.bank-link.ozon:hover { background: rgba(0, 191, 255, 0.12); border-color: rgba(0, 191, 255, 0.25); }

/* Описание СБП в самом низу: Вы можете отправить любую добровольную сумму... */
.sbp-footer-info { 
    font-size: 0.8rem; 
    color: #ffffff; /* Изменено с #abaab5 на белый */
    line-height: 1.4; 
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important; /* Добавлена тень */
}

.currency-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 25px; }

.currency-tabs .tab-btn {
    background: rgba(6, 9, 14, 0.45) !important; border: 1px solid rgba(255, 204, 0, 0.25) !important; 
    color: #ffffff !important; padding: 10px 22px !important; border-radius: 6px !important;
    font-weight: 700 !important; font-size: 0.9rem !important; cursor: pointer !important;
    transition: all 0.3s ease !important; text-transform: uppercase !important;
    letter-spacing: 1px !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}
.currency-tabs .tab-btn:hover {
    border-color: #ffffff !important; color: #ffcc00 !important; 
    background: rgba(255, 204, 0, 0.1) !important; box-shadow: 0 0 15px rgba(255, 204, 0, 0.25) !important; 
}
.currency-tabs .tab-btn.active {
    background: #ffcc00 !important; border-color: #d4af37 !important; 
    color: #06090e !important; box-shadow: 0 0 20px rgba(255, 204, 0, 0.5) !important; 
}

.crypto-row-container {
    display: flex; align-items: center; background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 204, 0, 0.3); border-radius: 8px;
    padding: 4px 6px; margin-bottom: 12px; width: 100%; box-sizing: border-box;
}

.crypto-input-field {
    flex: 1; background: transparent; border: none; color: #ffffff;
    font-size: 0.9rem; padding: 8px; font-family: monospace; text-align: left; outline: none;
}

.crypto-copy-btn-inline {
    background: #ffcc00 !important; color: #06090e !important; border: none !important;
    padding: 8px 18px !important; font-size: 0.8rem !important; font-weight: 700 !important;
    border-radius: 6px !important; text-transform: uppercase !important; cursor: pointer; transition: all 0.2s ease;
}
.crypto-copy-btn-inline:hover { background: #ffffff !important; /* box-shadow: 0 0 12px rgba(255, 255, 255, 0.6); */ }

/* НАВИГАТОР ЭКОСИСТЕМЫ С ПОДДЕРЖКОЙ ОБОРВАННОГО КЛАССА */
.ecosystem-nav-panel {
    display: flex; flex-direction: row; justify-content: center; align-items: center;
    gap: 12px; width: 100%; max-width: 940px; margin: 10px auto 5px auto; z-index: 2; flex-wrap: wrap; 
}

/* ==========================================================================
   ОБНОВЛЕННАЯ СИНХРОННАЯ ИНВЕРСИЯ КНОПОК НАВИГАТОРА ЭКОСИСТЕМЫ
   ========================================================================== */

/* БАЗОВОЕ СОСТОЯНИЕ: Слышны только буквы, горящие чистым БИРЮЗОВЫМ НЕОНОМ */
.eco-nav-btn,
.eco-nav-panel-link {
    display: inline-flex; 
    align-items: center; 
    gap: 8px;
    background: rgba(6, 9, 14, 0.15) !important; /* Строго зафиксировано 3/10 прозрачности */
    border: 1px solid rgba(255, 204, 0, 0.45) !important; /* Аккуратный золотой контур */
    
    /* Истинный бирюзово-неоновый цвет букв без каких-либо размытий и теней сзади */
    color: #00f3ff !important; 
    text-shadow: none !important; /* Полностью убрали мутное свечение букв */
    
    text-decoration: none !important;
    padding: 10px 18px; 
    border-radius: 20px;
    font-size: 0.85rem; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 1px;
/*    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);  */
    backdrop-filter: blur(0.3px) !important; 
    -webkit-backdrop-filter: blur(0.3px) !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); 
}

/* СОСТОЯНИЕ ВСПЫШКИ: При наведении на Экосистему слова переключаются в БЕЛЫЙ ГЛЯНЕЦ */
.eco-nav-btn.glow-pulse-active,
.eco-nav-panel-link.glow-pulse-active {
    border-color: #ffcc00 !important; /* Края подсвечиваются более сочным золотом */
    color: #ffffff !important; /* Текст становится идеально БЕЛЫМ */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important; 
    box-shadow: 0 0 25px rgba(255, 204, 0, 0.55) !important; /* Золотой контур вспыхивает наружу */
    transform: translateY(-2px);
    text-decoration: none !important;
}

/* Прямое наведение на саму ссылку также переводит её в белый глянец */
.eco-nav-btn:hover,
.eco-nav-panel-link:hover {
    border-color: #ffcc00 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
    box-shadow: 0 0 25px rgba(255, 204, 0, 0.55) !important;
    transform: translateY(-2px);
    text-decoration: none !important;
}


/* 2. КНОПКА-БЕЙДЖ: ЭКОСИСТЕМА СВЕТЛОЗАР-ПОЛИС */
#global-ecosystem-badge {
    background: rgba(6, 10, 14, 0.15) !important; /* Установили строго 3/10 прозрачности */
    border: 1px solid #ffcc00 !important;
    color: #ffcc00 !important; 
    padding: 8px 22px !important; 
    border-radius: 20px !important;
    font-size: 11px !important; 
    font-weight: 700 !important; 
    text-transform: uppercase !important;
    letter-spacing: 2px !important; 
    display: inline-block !important; 
    cursor: pointer;
/*    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important; */
    transition: all 0.3s ease !important; 
    backdrop-filter: blur(0.3px) !important; 
    -webkit-backdrop-filter: blur(0.3px) !important;
    
    /* Установили точную тень, как у заголовка Манифеста */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}
#global-ecosystem-badge:hover {
    box-shadow: 0 0 25px rgba(255, 204, 0, 0.5) !important; 
    color: #ffffff !important;
    border-color: #ffffff !important; 
    transform: translateY(-2px) !important;
}

/* ИСПРАВЛЕНИЕ: Говорим браузеру сделать текст белым, когда JS запускает волну на этот ID */
#global-ecosystem-badge.glow-pulse-active {
    color: #ffffff !important;
    border-color: #ffcc00 !important;
    box-shadow: 0 0 25px rgba(255, 204, 0, 0.55) !important;
    transform: translateY(-2px) !important;
}

/* ТОЧЕЧНОЕ КОПИРОВАНИЕ И ПАРИЩИЙ TOAST */
.copy-target { 
    cursor: pointer !important; 
    display: inline-block; 
    transition: transform 0.2s ease; 
}
.copy-target:hover { 
    transform: scale(1.02); 
    color: #fff !important; 
}

.copy-notification-toast {
    position: fixed; bottom: -100px; left: 50%; transform: translateX(-50%);
    background: rgba(6, 9, 14, 0.15) !important; backdrop-filter: blur(0.3px) !important;
    border: 1px solid #ffcc00 !important; color: #ffe066 !important; padding: 12px 28px; border-radius: 25px;
    font-size: 0.95rem; font-weight: 600; z-index: 9999; box-shadow: 0 0 25px rgba(255, 204, 0, 0.3);
    transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease; white-space: nowrap !important; opacity: 0;
}
.copy-notification-toast.show { bottom: 40px; opacity: 1; }

.ip-footer-note { font-size: 0.8rem; color: rgba(255, 255, 255, 0.3); margin-top: 0.3px; letter-spacing: 1px; z-index: 2; }


/* ==========================================================================
   ОБЪЕДИНЕННАЯ АДАПТИВНОСТЬ ПОД МОБИЛЬНЫЕ УСТРОЙСТВА (БЕЗ ДУБЛИКАТОВ)
   ========================================================================== */

@media (max-width: 940px) {
    /* Геометрия главных блоков */
    .main-grid { grid-template-columns: 1fr !important; gap: 20px !important; width: 90% !important; }
    .glass-column { height: auto !important; max-height: 350px !important; }
    
    /* Священный солярный заголовок на смартфонах */
    .main-holy-title { font-size: 1.8rem !important; gap: 6px !important; }
    .title-line-gold { font-size: 1.6rem !important; }
    .title-line-white { font-size: 2rem !important; }
    .title-line-geo { font-size: 1rem !important; letter-spacing: 1.5px !important; }
    .site-header-block { margin-top: 30px !important; }
    
    /* ИСПРАВЛЕННЫЙ ХРУСТАЛЬНЫЙ СЕЙФ: Авто-растяжение под вертикальные QR-коды */
    .wide-donate-box.sbp-card.open { 
        max-height: none !important; 
        padding: 30px 15px 45px 15px !important; 
        overflow: visible !important;
    }
    
    /* Перестраиваем боковые QR-коды вертикально один под другой */
    .safe-triple-grid-container {
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
    }
    
    /* Изящный компактный размер QR на экранах смартфонов */
    .qr-side-holder {
        max-width: 140px !important; 
        margin: 10px auto !important; 
    }
    
    /* Порядочный и красивый ряд: банки сверху, QR СБП по центру, QR USDT в самом низу */
    .sbp-inner-card-box { order: 1; width: 100% !important; }
    .sbp-qr-left { order: 2; margin-top: 20px !important; }
    .usdt-qr-right { order: 3; margin-top: 10px !important; }
}

@media (max-width: 600px) {
    /* Навигационная панель сайтов в два ряда на самых узких телефонах */
    .ecosystem-nav-panel { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; width: 90% !important; }
    .eco-nav-btn, .eco-nav-panel-link { padding: 10px 8px !important; font-size: 0.75rem !important; justify-content: center !important; }
}

/* КРАСИВАЯ СТИЛЬНАЯ КНОПКА «НАВЕРХ» (ПРАВЫЙ НИЖНИЙ УГОЛ) */
.btn-up-style {
    position: fixed;
    /* Закрепляем строго в правом нижнем углу экрана с комфортным отступом от краев */
    bottom: 40px; 
    right: 30px;
    z-index: 2000;
    
    /* Геометрия идеального золотого круга */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    
    /* Дизайн воздушного светлого стекла с золотым кантом */
    background: rgba(6, 9, 14, 0.15) !important;
    border: 1px solid #ffcc00 !important;
/*    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important; */
    
    cursor: pointer;
    display: none; /* Включается автоматически скриптом при скролле вниз на 300px */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box;
}

/* Отрисовка изящной золотой стрелочки внутри кнопки */
.btn-up-style::before {
    content: "";
    position: absolute;
    top: 57%; /* Чуть сместили вниз для идеального оптического центра */
    left: 50%;
    width: 12px;
    height: 12px;
    border-left: 3px solid #ffcc00;
    border-top: 3px solid #ffcc00;
    transform: translate(-50%, -50%) rotate(45deg);
    transition: all 0.3s ease;
}

/* Интерактивный эффект при наведении мыши */
.btn-up-style:hover {
    background: #ffcc00 !important; /* Наливается благородным золотом */
    box-shadow: 0 0 20px rgba(255, 204, 0, 0.6) !important; /* Вспыхивает золотой неоновый ореол */
    transform: translateY(-4px); /* Кнопка мягко приподнимается вверх */
}
/* При наведении стрелочка внутри кнопки становится темной для идеального контраста */
.btn-up-style:hover::before {
    border-left-color: #06090e;
    border-top-color: #06090e;
}

/* ЖИВОЙ ХОВЕР ДЛЯ КОЛОНОК И ПЛАШКИ КОНТАКТОВ */

/* Левая колонка — солярное золото */
.glass-column.left-column { transition: all 0.5s ease !important; }
.glass-column.left-column:hover,
.glass-column.left-column.wave-active {
    box-shadow: 0 0 30px rgba(255, 204, 0, 0.4) !important;
    border-color: #ffcc00 !important;
    transform: translateY(-2px);
}

/* Центральная колонка — Божественный белый свет */
.glass-column.center-column { transition: all 0.5s ease !important; }
.glass-column.center-column:hover,
.glass-column.center-column.wave-active {
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.35) !important;
    border-color: #ffffff !important;
    transform: translateY(-2px);
}

/* Правая колонка — бирюзовый космос */
.glass-column.right-column { transition: all 0.5s ease !important; }
.glass-column.right-column:hover,
.glass-column.right-column.wave-active {
    box-shadow: 0 0 30px rgba(0, 168, 255, 0.4) !important;
    border-color: #00a8ff !important;
    transform: translateY(-2px);
}

/* Нижняя плашка контактов — двухстороннее сияние */
.contacts-wide-box { transition: all 0.6s ease !important; }
.contacts-wide-box:hover,
.contacts-wide-box.wave-active {
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.35) !important;
    border-color: #ffffff !important;
    transform: translateY(-2px);
}