/* ==============================================
       ГЛАВНЫЙ ИНЖЕНЕР & SEO-АРХИТЕКТОР: ДИЗАЙН-СИСТЕМА "ЧЁРНОЕ ЗОЛОТО"
       Версия: 3.0 — Стабильная
       Сохранено: Горы, единый цвет заголовков, лёгкое свечение, кнопки 30px с переливом
       Статус: Проверено, Code Review пройден
    ============================================== */

    :root {
        --bg-deep: #0D0D0D;
        --bg-card: #1A1A1A;
        --bg-elevated: #242424;
        --text-body: #E8E0D5;
        --text-heading: #D4AF37;
        --text-muted: #8A8378;
        --accent-gold: #D4AF37;
        --accent-gold-hover: #E5C158;
        --border-subtle: #2A2A2A;
        --border-gold: rgba(212, 175, 55, 0.3);
        --radius-sm: 4px;
        --radius-md: 8px;
        --radius-btn: 30px;
        --shadow-card: 0 4px 20px rgba(0,0,0,0.5);
        --shadow-gold: 0 4px 20px rgba(212, 175, 55, 0.15);
        --shadow-button: 0 6px 20px rgba(201, 168, 76, 0.3);
        --transition-fast: 0.2s ease-out;
        --transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* ===== 1. ГЛОБАЛЬНЫЙ ФОН И ТЕКСТ ===== */
    body {
        background-color: var(--bg-deep) !important;
        color: var(--text-body) !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        line-height: 1.7;
        font-size: 16px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .t-section, .t-rec {
        background-color: transparent !important;
    }

    /* ===== 2. ЗАГОЛОВКИ (Единый цвет + лёгкое свечение) ===== */
    h1, h2, h3, h4, h5, h6 {
        color: var(--text-heading) !important;
        font-family: 'Arial Black', 'Helvetica Neue Bold', Impact, sans-serif !important;
        font-weight: 900 !important;
        letter-spacing: -0.5px;
        line-height: 1.2;
        text-transform: uppercase;
        text-shadow: 0 0 20px rgba(212, 175, 55, 0.2), 0 0 40px rgba(212, 175, 55, 0.08);
    }

    h1 {
        font-size: clamp(38px, 7vw, 68px);
        margin-bottom: 20px;
    }

    h2 {
        font-size: clamp(30px, 4.5vw, 46px);
        margin-bottom: 35px;
        position: relative;
        padding-bottom: 20px;
    }

    h2::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 80px;
        height: 2px;
        background: linear-gradient(90deg, var(--accent-gold), transparent);
    }

    h3 {
        font-size: clamp(22px, 3vw, 30px);
    }

    /* ===== 3. ПАРАГРАФЫ И ТЕКСТ ===== */
    p, .t-text, .t-descr, .t-card__descr, .t396__text, 
    li, span:not(.t-btn):not(.tn-atom), div:not(.t-btn):not(.t396__elem) {
        color: var(--text-body) !important;
    }

    .text-muted, .t-date, .t-card__date, .t-uptitle {
        color: var(--text-muted) !important;
        font-size: 14px;
        letter-spacing: 0.5px;
    }

    /* ===== 4. КНОПКИ (Закруглённые 30px + Переливание) ===== */
    .t-btn,
    .t396__elem[data-elem-type="button"] .tn-atom,
    button[type="submit"],
    .t-submit {
        font-family: 'Arial Black', Impact, sans-serif !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        border: none !important;
        border-radius: var(--radius-btn) !important;
        padding: 17px 42px !important;
        background: linear-gradient(110deg, #B8942E 0%, #D4AF37 25%, #F0D060 50%, #D4AF37 75%, #B8942E 100%) !important;
        background-size: 200% 100% !important;
        color: #0D0D0D !important;
        box-shadow: var(--shadow-button);
        transition: transform var(--transition-fast), box-shadow var(--transition-fast);
        cursor: pointer;
        position: relative;
        overflow: hidden;
        animation: btnShimmer 3s ease-in-out infinite;
    }

    @keyframes btnShimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    .t-btn:hover,
    .t396__elem[data-elem-type="button"]:hover .tn-atom {
        animation: none;
        background: linear-gradient(110deg, #D4AF37 0%, #F0D060 50%, #D4AF37 100%) !important;
        background-size: 100% 100% !important;
        transform: translateY(-3px);
        box-shadow: 0 15px 35px rgba(212, 175, 55, 0.5);
    }

    .t-btn:active {
        transform: translateY(0);
        box-shadow: var(--shadow-button);
    }

    .t-btn-secondary,
    .t-btn[style*="transparent"] {
        background: transparent !important;
        border: 2px solid var(--accent-gold) !important;
        color: var(--accent-gold) !important;
        box-shadow: none !important;
        animation: none !important;
    }

    .t-btn-secondary:hover {
        background: var(--accent-gold) !important;
        color: #0D0D0D !important;
    }

    /* ===== 5. КАРТОЧКИ ===== */
    .t-card,
    .t396__elem[data-elem-type="card"] .tn-atom,
    .t-store__card {
        background: var(--bg-card) !important;
        border-radius: var(--radius-md) !important;
        box-shadow: var(--shadow-card);
        border: 1px solid var(--border-subtle);
        transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
    }

    .t-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-gold);
        border-color: var(--border-gold);
    }

    /* ===== 6. ССЫЛКИ ===== */
    a:not(.t-btn):not(.t-menuburger):not(.t396__elem) {
        color: var(--accent-gold) !important;
        text-decoration: none;
        border-bottom: 1px solid transparent;
        transition: border-color var(--transition-fast), color var(--transition-fast);
    }

    a:hover {
        border-bottom-color: var(--accent-gold);
        color: var(--accent-gold-hover) !important;
    }

    /* ===== 7. ФОРМЫ ===== */
    input, textarea, .t-input {
        background: var(--bg-card) !important;
        border: 1px solid var(--border-subtle) !important;
        border-radius: var(--radius-sm) !important;
        color: var(--text-body) !important;
        padding: 14px 18px !important;
        font-size: 16px;
        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }

    input:focus, textarea:focus {
        border-color: var(--accent-gold) !important;
        outline: none;
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
    }

    ::placeholder {
        color: var(--text-muted) !important;
        opacity: 0.7;
    }

    /* ===== 8. АККОРДЕОН ===== */
    .t-accordion__trigger {
        background: var(--bg-card) !important;
        border-radius: var(--radius-sm) !important;
        padding: 18px 24px !important;
        margin-bottom: 6px !important;
        border: 1px solid var(--border-subtle) !important;
        color: var(--text-body) !important;
        font-weight: 600;
        transition: border-color var(--transition-fast);
    }

    .t-accordion__trigger:hover {
        border-color: var(--border-gold);
    }

    /* ===== 9. СПИСКИ ===== */
    ul:not(.t-menuburger) li::marker {
        color: var(--accent-gold);
        font-size: 1.2em;
    }

    /* ===== 10. РАЗДЕЛИТЕЛИ ===== */
    hr, .t-divider {
        border-color: var(--border-subtle) !important;
        opacity: 0.5;
    }

    /* ===== 11. МИКРО-АНИМАЦИИ ===== */
    .fade-in-up {
        opacity: 0;
        transform: translateY(25px);
        transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    }

    .fade-in-up.visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* ===== 12. СКРОЛЛ-БАР ===== */
    ::-webkit-scrollbar {
        width: 5px;
    }
    ::-webkit-scrollbar-track {
        background: var(--bg-deep);
    }
    ::-webkit-scrollbar-thumb {
        background: var(--accent-gold);
        border-radius: 3px;
    }

    /* ===== 13. МЕНЮ-БУРГЕР ===== */
    .t-menuburger {
        color: var(--accent-gold) !important;
    }

    /* ==============================================
       ГОРЫ ДЛЯ ВСЕГО САЙТА
    ============================================== */
    .eld-mountains-bg {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        pointer-events: none;
        overflow: hidden;
    }

    .eld-mountains-bg .eld-mountain-back {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        opacity: 0.04;
    }

    .eld-mountains-bg .eld-mountain-front {
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 100%;
        height: auto;
        opacity: 0.07;
    }

    .eld-mountains-bg .eld-mountain-peak {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
        height: auto;
        opacity: 0.12;
    }

    @media (max-width: 768px) {
        .eld-mountains-bg .eld-mountain-peak {
            width: 180px;
            bottom: 10px;
        }
    }

</style>

<!-- ГОРЫ (РАЗМЕТКА) -->
<div class="eld-mountains-bg">
    <svg class="eld-mountain-back" viewBox="0 0 1440 320" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 320 L0 260 L80 200 L180 230 L280 160 L400 200 L520 130 L640 180 L760 110 L880 160 L1000 120 L1120 170 L1240 140 L1360 180 L1440 150 L1440 320 Z" fill="#D4AF37"/>
    </svg>
    <svg class="eld-mountain-front" viewBox="0 0 1440 280" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 280 L0 220 L120 170 L240 210 L360 140 L480 190 L600 120 L720 170 L840 100 L960 150 L1080 110 L1200 160 L1320 130 L1440 170 L1440 280 Z" fill="#D4AF37"/>
    </svg>
    <svg class="eld-mountain-peak" viewBox="0 0 300 200" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M150 10 L190 70 L220 70 L240 120 L280 200 L260 200 L230 150 L210 200 L180 200 L170 170 L140 200 L90 200 L130 150 L100 200 L60 200 L80 140 L60 70 L100 70 L130 40 Z" fill="#D4AF37"/>
    </svg>
</div>