.
        body { font-family: 'Manrope', sans-serif; background-color: #F6F8FA; color: #0F172A; overflow-x: hidden; }

        /* Белые чистые карточки в стиле кабинета */
        .white-panel {
            background: #FFFFFF;
            border-radius: 1.5rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
            border: 1px solid rgba(0, 0, 0, 0.02);
            transition: all 0.3s ease;
        }
        @media (hover: hover) {
            .white-panel:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); transform: translateY(-2px); }
        }

        /* Легкая сетка на фоне (как чертеж) */
        .bg-grid {
            background-size: 40px 40px;
            background-image: linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
            mask-image: linear-gradient(to bottom, transparent 0%, black 20%, transparent 100%);
            -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, transparent 100%);
        }

        /* Анимация левитации для UI элементов */
        @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }
        .floating-ui { animation: float 6s ease-in-out infinite; }
        .floating-ui-delayed { animation: float 6s ease-in-out 3s infinite; }
/* =========================================
   1. СТИЛИ САМОЙ КАРТЫ ЛОЯЛЬНОСТИ
   ========================================= */
.military-loyalty-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 400px;
    margin: 20px auto;
    aspect-ratio: 1.58; 
    border-radius: 16px;
    background: linear-gradient(135deg, #2b3026 0%, #171a15 100%); 
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(197, 160, 89, 0.2); 
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    font-family: 'Arial', sans-serif; 
    box-sizing: border-box; /* Важно чтобы padding не ломал размеры */
}

.card-bg-star {
    position: absolute;
    top: -20px;
    right: -30px;
    width: 250px;
    height: 250px;
    pointer-events: none;
    z-index: 0;
}

.card-bg-star svg {
    width: 100%;
    height: 100%;
    transform: rotate(15deg); 
}

.card-header-military, 
.card-body-military, 
.card-footer-military {
    position: relative;
    z-index: 1;
}

.card-header-military {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-rank {
    font-size: 14px;
    font-weight: 600;
    color: #EBEBEB;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.card-rank i {
    color: #C5A059; 
    margin-right: 5px;
}

.card-discount {
    font-size: 11px;
    background: rgba(197, 160, 89, 0.15);
    color: #C5A059;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    border: 1px solid rgba(197, 160, 89, 0.3);
}

.card-body-military {
    text-align: left;
    margin-top: 15px;
}

.card-label {
    font-size: 10px;
    color: #9aa095; 
    letter-spacing: 1.5px;
    margin-bottom: 5px;
}

.card-balance {
    font-size: 32px;
    font-weight: 800;
    color: #C5A059; 
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1;
}

.card-balance span {
    font-size: 20px;
    color: #EBEBEB;
    font-weight: normal;
}

.card-footer-military {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.card-holder-name {
    font-family: 'Courier New', Courier, monospace; 
    font-size: 16px;
    color: #EBEBEB;
    letter-spacing: 2px;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8), -1px -1px 0px rgba(255, 255, 255, 0.1); 
}

.card-type {
    font-size: 9px;
    color: #7a8075;
    text-align: right;
    letter-spacing: 1px;
    max-width: 100px;
    line-height: 1.2;
}

/* =========================================
   2. ЛЕЙАУТ НА ГЛАВНОЙ И АНИМАЦИИ
   ========================================= */
.loyalty-promo-section {
    padding: 60px 20px;
    background-color: transparent; /* Можно задать нужный фон сайта */
    font-family: 'Arial', sans-serif;
}

.loyalty-promo-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.loyalty-promo-info {
    flex: 1;
    max-width: 550px;
}

.loyalty-title {
    font-size: 36px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.loyalty-desc {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 35px;
}

/* Лестница званий */
.ranks-progression {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.rank-step {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 15px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border: 1px solid #eee;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.rank-step:hover {
    transform: translateX(5px);
    border-color: #C5A059;
}

.rank-step.top-rank {
    background: linear-gradient(135deg, #fdfbf7 0%, #fff 100%);
    border: 1px solid rgba(197, 160, 89, 0.4);
    box-shadow: 0 4px 20px rgba(197, 160, 89, 0.15);
}

.rank-icon-box {
    width: 45px;
    height: 45px;
    background: #333; 
    color: #C5A059;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 15px;
}

.rank-details { flex: 1; }
.rank-name { font-weight: bold; font-size: 18px; color: #333; }
.rank-condition { font-size: 13px; color: #888; margin-top: 4px; }
.rank-discount { font-size: 22px; font-weight: 900; color: #C5A059; }

/* Блок с картой справа */
.loyalty-promo-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-showcase-wrapper {
    position: relative;
    width: 100%;
    max-width: 420px;
}

/* Анимация парения для карты (добавляется доп. классом showcase-card) */
.showcase-card {
    animation: floatCard 6s ease-in-out infinite;
    z-index: 2;
    position: relative;
    margin: 0 !important; /* Убираем margin из общих стилей карты для блока */
}

/* Золотое свечение под картой */
.card-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 20px;
    background: rgba(197, 160, 89, 0.5);
    filter: blur(40px);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    animation: pulseGlow 6s ease-in-out infinite;
}

@keyframes floatCard {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(1deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes pulseGlow {
    0% { opacity: 0.5; transform: translate(-50%, 40px) scale(1); }
    50% { opacity: 0.8; transform: translate(-50%, 55px) scale(1.1); }
    100% { opacity: 0.5; transform: translate(-50%, 40px) scale(1); }
}

/* Мобильная версия */
@media (max-width: 900px) {
    .loyalty-promo-container { flex-direction: column; }
    .loyalty-promo-info { max-width: 100%; }
    .loyalty-title, .loyalty-desc { text-align: center; }
}
@media (max-width: 400px) {
    .military-loyalty-card { aspect-ratio: auto; min-height: 180px; }
    .card-balance { font-size: 28px; }
    .card-holder-name { font-size: 14px; }
}
/* =========================================
   3. АДАПТИВНОСТЬ (МОБИЛЬНЫЕ УСТРОЙСТВА)
   ========================================= */

/* Планшеты и небольшие экраны (до 992px) */
@media (max-width: 992px) {
    .loyalty-promo-container {
        flex-direction: column; /* Ставим блоки друг под друга */
        gap: 40px;
    }
    .loyalty-promo-info {
        max-width: 100%;
    }
    .loyalty-title {
        text-align: center;
    }
    .loyalty-desc {
        text-align: center;
        margin-bottom: 25px;
    }
    .card-showcase-wrapper {
        margin-top: 20px;
    }
}

/* Стандартные смартфоны (до 768px) */
@media (max-width: 768px) {
    .loyalty-promo-section {
        padding: 40px 15px; /* Уменьшаем боковые отступы секции */
    }
    .loyalty-title {
        font-size: 26px; /* Уменьшаем заголовок */
    }
    .loyalty-desc {
        font-size: 14px;
    }
    
    /* Компактный вид списка званий */
    .rank-step {
        padding: 12px 15px;
    }
    .rank-icon-box {
        width: 38px;
        height: 38px;
        font-size: 16px;
        margin-right: 12px;
    }
    .rank-name {
        font-size: 16px;
    }
    .rank-condition {
        font-size: 12px;
    }
    .rank-discount {
        font-size: 18px;
    }
}

/* Небольшие смартфоны (до 480px) — адаптация самой КАРТЫ */
@media (max-width: 480px) {
    /* Обертка теперь занимает 100% контейнера (почти весь экран) */
    .card-showcase-wrapper {
        width: 100%;
        max-width: 380px; /* Ограничитель, чтобы на альбомной ориентации не растянуло в сосиску */
        margin: 0 auto;
    }

    .military-loyalty-card {
        width: 100%; 
        max-width: 100%;
        aspect-ratio: 1.58; /* Держим пропорции реальной карты */
        height: auto;
        min-height: auto;
        padding: 20px 15px; /* Увеличили внутренние отступы для солидности */
    }
    
    /* Фоновую звезду делаем чуть больше под новый размер */
    .card-bg-star {
        width: 200px;
        height: 200px;
        top: -15px;
        right: -25px;
    }
    
    /* Возвращаем читаемые, крупные шрифты */
    .card-rank { font-size: 13px; }
    .card-rank i { font-size: 12px; }
    .card-discount { font-size: 11px; padding: 4px 8px; }
    
    .card-label { font-size: 10px; margin-bottom: 5px; }
    .card-balance { font-size: 28px; } /* Делаем баланс крупнее */
    .card-balance span { font-size: 18px; }
    
    .card-holder-name { font-size: 15px; }
    .card-type { font-size: 8px; max-width: 90px; }

    /* Мягкая левитация */
    @keyframes floatCard {
        0% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-10px) rotate(1deg); }
        100% { transform: translateY(0px) rotate(0deg); }
    }
    
    /* Широкое свечение под большой картой */
    @keyframes pulseGlow {
        0% { opacity: 0.5; transform: translate(-50%, 25px) scale(1); }
        50% { opacity: 0.8; transform: translate(-50%, 35px) scale(1.1); }
        100% { opacity: 0.5; transform: translate(-50%, 25px) scale(1); }
    }
}
 
        /* Подключаем похожие шрифты */
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Playfair+Display:wght@400;600&display=swap');

        :root {
            --kmd-gold: #c2a165; /* Фирменный золотой из скрина */
            --kmd-dark: #1e1e1c; /* Цвет темной карты */
            --kmd-text: #333333;
            --kmd-muted: #888888;
            --kmd-border: #eaeaea;
        }

        .kmd-calc-wrapper {
            max-width: 1050px;
            margin: 40px auto;
            font-family: 'Montserrat', sans-serif;
            display: flex;
            gap: 40px;
            color: var(--kmd-text);
        }

        /* --- ЛЕВАЯ ЧАСТЬ (ВЫБОР ПАРАМЕТРОВ) --- */
        .kmd-calc-left {
            flex: 1.2;
        }

        .kmd-main-title {
            font-family: 'Playfair Display', serif;
            font-size: 28px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
            color: var(--kmd-text);
            font-weight: 400;
        }

        .kmd-main-desc {
            font-size: 14px;
            color: var(--kmd-muted);
            margin-bottom: 30px;
            line-height: 1.5;
        }

        .kmd-param-group {
            margin-bottom: 30px;
        }

        .kmd-param-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 15px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* Стилизация плашек (как ранги в лояльности) */
        .kmd-option-label {
            display: flex;
            align-items: center;
            padding: 16px 20px;
            border: 1px solid var(--kmd-border);
            border-radius: 8px; /* Скругление как на скрине */
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            background: #fff;
        }

        .kmd-option-input {
            display: none;
        }

        /* Состояние ВЫБРАНО (Золотая рамка) */
        .kmd-option-input:checked + .kmd-option-label {
            border-color: var(--kmd-gold);
            box-shadow: 0 4px 15px rgba(194, 161, 101, 0.1);
        }

        /* Иконка-квадратик слева */
        .kmd-icon-box {
            width: 40px;
            height: 40px;
            background-color: #2b2b2b;
            border-radius: 6px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 15px;
            color: var(--kmd-gold);
            transition: all 0.3s ease;
        }

        /* При выборе иконка становится золотой с черным содержимым */
        .kmd-option-input:checked + .kmd-option-label .kmd-icon-box {
            background-color: var(--kmd-gold);
            color: #111;
        }

        .kmd-option-text {
            flex-grow: 1;
        }

        .kmd-option-title {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .kmd-option-desc {
            font-size: 12px;
            color: var(--kmd-muted);
        }

        .kmd-option-price {
            font-size: 16px;
            font-weight: 700;
            color: var(--kmd-gold); /* Золотая цена справа, как проценты на скрине */
        }

        /* --- ПРАВАЯ ЧАСТЬ (КАРТА-ИТОГ) --- */
        .kmd-calc-right {
            flex: 0.8;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        /* Стилизация под карту генерала */
        .kmd-summary-card {
            background-color: var(--kmd-dark);
            border-radius: 14px;
            padding: 35px 30px;
            color: #fff;
            position: relative;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0,0,0,0.2);
        }

        /* Звезда на фоне карты (векторная имитация) */
        .kmd-summary-card::after {
            content: '';
            position: absolute;
            right: -20px;
            top: 20px;
            width: 200px;
            height: 200px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23383835' stroke-width='0.5' stroke-linecap='round' stroke-linejoin='round'%3e%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: contain;
            opacity: 0.5;
            pointer-events: none;
        }

        .kmd-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;
            position: relative;
            z-index: 2;
        }

        .kmd-card-title {
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .kmd-card-badge {
            border: 1px solid var(--kmd-gold);
            color: var(--kmd-gold);
            padding: 4px 8px;
            font-size: 10px;
            border-radius: 4px;
            letter-spacing: 1px;
        }

        .kmd-card-label {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #8a8a86;
            margin-bottom: 8px;
            position: relative;
            z-index: 2;
        }

        .kmd-card-total {
            font-family: 'Playfair Display', serif;
            font-size: 42px;
            color: var(--kmd-gold);
            margin-bottom: 40px;
            position: relative;
            z-index: 2;
        }

        /* Список выбранного */
        .kmd-card-details {
            border-top: 1px solid rgba(255,255,255,0.1);
            padding-top: 20px;
            margin-bottom: 30px;
            position: relative;
            z-index: 2;
        }

        .kmd-detail-row {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            margin-bottom: 12px;
            color: #b5b5b5;
        }

        .kmd-detail-row span:last-child {
            color: #fff;
        }

        .kmd-btn {
            width: 100%;
            padding: 16px;
            background-color: transparent;
            border: 1px solid var(--kmd-gold);
            color: var(--kmd-gold);
            text-transform: uppercase;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 2px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
            z-index: 2;
        }

        .kmd-btn:hover {
            background-color: var(--kmd-gold);
            color: var(--kmd-dark);
        }

        @media (max-width: 900px) {
            .kmd-calc-wrapper {
                flex-direction: column;
            }
        }
        /* Анимация бегущей строки */
@keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); } /* -50% потому что мы дублируем контент для бесконечности */
}
.animate-marquee {
    animation: marquee 20s linear infinite;
    min-width: 200%;
}
/* Пауза при наведении */
.animate-marquee:hover {
    animation-play-state: paused;
}