/* ===================================
   INFOGRAPHIC-DECOR.CSS
   Новый декоративный язык по референсам:
   угловые скобы-арки, подвесные лампы, круглые
   плашки-иконки, капсулы-инфобоксы, пунктирные дуги.
   Подключать после article.css / home-decor-extra.css /
   services-decor-extra.css — переопределяет и дополняет.
   =================================== */

:root {
    /* Угловая арка-скоба (буква "P"/скоба) с точкой — левый верх */
    --ig-corner-arc-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cpath d='M4 50V22C4 11 12 4 22 4H40' fill='none' stroke='%2325A9B8' stroke-width='6' stroke-linecap='round'/%3E%3Ccircle cx='58' cy='10' r='9' fill='%23EE7A5D'/%3E%3C/svg%3E");

    /* Угловая арка-скоба зеркальная — правый верх */
    --ig-corner-arc-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cpath d='M86 50V22C86 11 78 4 68 4H50' fill='none' stroke='%2325A9B8' stroke-width='6' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='10' r='9' fill='%23EE7A5D'/%3E%3C/svg%3E");

    /* Простая дуга без точки — нижний угол (более скромный акцент) */
    --ig-corner-arc-sm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M4 40V18C4 10 10 4 18 4H40' fill='none' stroke='%2325A9B8' stroke-width='5' stroke-linecap='round' opacity='0.7'/%3E%3C/svg%3E");

    /* Подвесной светильник (лампа на шнуре) */
    --ig-hanging-lamp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='90' viewBox='0 0 60 90'%3E%3Cline x1='30' y1='0' x2='30' y2='38' stroke='%2325A9B8' stroke-width='2.5'/%3E%3Cpath d='M12 40H48C48 55 40 64 30 64C20 64 12 55 12 40Z' fill='%2325A9B8'/%3E%3Cpath d='M18 64C18 70 24 74 30 74C36 74 42 70 42 64' fill='none' stroke='%2325A9B8' stroke-width='2' opacity='0.5'/%3E%3C/svg%3E");

    /* Волнистые лучи (звук/вибрация) — маленький элемент рядом с иконками */
    --ig-waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 8Q6 4 9 8T15 8T21 8' stroke='%2325A9B8' stroke-width='2' fill='none' stroke-linecap='round' opacity='0.6'/%3E%3Cpath d='M3 16Q6 12 9 16T15 16T21 16' stroke='%2325A9B8' stroke-width='2' fill='none' stroke-linecap='round' opacity='0.4'/%3E%3C/svg%3E");

    /* Пунктирная дуга-соединитель (изогнутая, между иконкой и центром) */
    --ig-dash-curve: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40' viewBox='0 0 60 40'%3E%3Cpath d='M2 5Q35 5 58 35' fill='none' stroke='%2325A9B8' stroke-width='2' stroke-dasharray='4 4' stroke-linecap='round' opacity='0.55'/%3E%3C/svg%3E");

    /* Сердечко-контур терракотовое (маленький акцент у фото ребёнка) */
    --ig-heart-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='24' viewBox='0 0 28 24'%3E%3Cpath d='M14 21C14 21 2 13 2 6C2 2 6 0 9 3C11 5 14 8 14 8C14 8 17 5 19 3C22 0 26 2 26 6C26 13 14 21 14 21Z' fill='none' stroke='%23EE7A5D' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");

    /* Короткие диагональные штрихи (акцент "сияния" у фото) */
    --ig-sparkle-lines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cline x1='4' y1='26' x2='10' y2='20' stroke='%23EE7A5D' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='12' y1='28' x2='16' y2='20' stroke='%23EE7A5D' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='20' y1='26' x2='24' y2='18' stroke='%23EE7A5D' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");

    /* Лупа (поиск/анализ) — контур teal с терракотовой точкой-ручкой */
    --ig-magnifier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%2325A9B8' stroke-width='2.5'/%3E%3Cline x1='18.5' y1='18.5' x2='25' y2='25' stroke='%23EE7A5D' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");

    /* Глаз (наблюдение) */
    --ig-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='20' viewBox='0 0 28 20'%3E%3Cpath d='M1 10C5 3 23 3 27 10C23 17 5 17 1 10Z' fill='none' stroke='%2325A9B8' stroke-width='2'/%3E%3Ccircle cx='14' cy='10' r='3.5' fill='%23EE7A5D'/%3E%3C/svg%3E");

    /* Мозг (обработка) — teal контур с терракотовым сердцем внутри */
    --ig-brain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='34' viewBox='0 0 40 34'%3E%3Cpath d='M18 4C10 4 5 9 5 15C5 17 6 19 8 20C6 22 6 25 8 27C10 29 14 29 16 27M22 4C30 4 35 9 35 15C35 17 34 19 32 20C34 22 34 25 32 27C30 29 26 29 24 27' fill='none' stroke='%2325A9B8' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M20 4V27' stroke='%2325A9B8' stroke-width='1.5' opacity='0.4'/%3E%3Cpath d='M17 18C17 18 19 16 21 18C23 20 17 22 17 18Z' fill='%23EE7A5D'/%3E%3C/svg%3E");
}

@keyframes igLampSwing {
    0%, 100% { transform: rotate(-2deg); }
    50%      { transform: rotate(2deg); }
}

@keyframes igWaveOpacity {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 0.7; }
}

@keyframes igDotPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.25); }
}

@keyframes igFloatSlow {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* ===================================
   1. УГЛОВЫЕ АРКИ-СКОБЫ — универсальный класс
   Добавить в HTML: <span class="ig-corner ig-corner--tl"></span>
   =================================== */
.ig-corner {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    width: 90px;
    height: 90px;
}

.ig-corner--tl {
    top: 0;
    left: 0;
    background: var(--ig-corner-arc-tl) no-repeat top left / contain;
}

.ig-corner--tr {
    top: 0;
    right: 0;
    background: var(--ig-corner-arc-tr) no-repeat top right / contain;
}

.ig-corner--sm {
    width: 60px;
    height: 60px;
}

.ig-corner--bl {
    bottom: 0;
    left: 0;
    transform: rotate(180deg) scaleX(-1);
    background: var(--ig-corner-arc-sm) no-repeat top left / contain;
}

.ig-corner--br {
    bottom: 0;
    right: 0;
    transform: rotate(180deg);
    background: var(--ig-corner-arc-sm) no-repeat top left / contain;
}

@media (max-width: 640px) {
    .ig-corner { width: 60px; height: 60px; }
    .ig-corner--sm { width: 42px; height: 42px; }
}

/* ===================================
   2. ПОДВЕСНОЙ СВЕТИЛЬНИК
   Добавить в HTML: <span class="ig-lamp" aria-hidden="true"></span>
   Позиционируется относительно родителя с position:relative
   =================================== */
.ig-lamp {
    position: absolute;
    top: -6px;
    right: 8%;
    z-index: 0;
    pointer-events: none;
    width: 44px;
    height: 66px;
    background: var(--ig-hanging-lamp) no-repeat top center / contain;
    transform-origin: top center;
    animation: igLampSwing 5s ease-in-out infinite;
    opacity: 0.85;
}

@media (max-width: 768px) {
    .ig-lamp { display: none; }
}

/* ===================================
   3. КРУГЛЫЕ ПЛАШКИ-ИКОНКИ (список слева, как "звук/прикосновения/движение")
   Разметка:
   <div class="ig-sense-list">
     <div class="ig-sense-item">
       <span class="ig-sense-item__icon"><svg>...</svg></span>
       <span class="ig-sense-item__label">Звук</span>
     </div>
     ...
   </div>
   =================================== */
.ig-sense-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ig-sense-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    position: relative;
}

.ig-sense-item__icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(37, 169, 184, .28);
    transition: transform var(--transition-base);
}

.ig-sense-item__icon svg {
    width: 22px;
    height: 22px;
}

.ig-sense-item:hover .ig-sense-item__icon {
    transform: scale(1.08) rotate(-4deg);
}

.ig-sense-item__label {
    font-size: var(--fz-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text-secondary);
}

/* Пунктирная дуга-соединитель от каждого элемента к центру */
.ig-sense-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    width: 60px;
    height: 40px;
    background: var(--ig-dash-curve) no-repeat center / contain;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.5;
}

.ig-sense-item:nth-child(even)::after {
    transform: translateY(-50%) scaleY(-1);
}

@media (max-width: 768px) {
    .ig-sense-item::after { display: none; }
}

/* ===================================
   4. ЦЕНТРАЛЬНАЯ ИКОНКА "МОЗГ" С ПОДПИСЬЮ
   Разметка:
   <div class="ig-brain-hub">
     <span class="ig-brain-hub__icon" aria-hidden="true"></span>
     <span class="ig-brain-hub__label">Мозг получает и обрабатывает сигналы</span>
   </div>
   =================================== */
.ig-brain-hub {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
}

.ig-brain-hub__icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-secondary-light, #E5F5F7);
    position: relative;
}

.ig-brain-hub__icon::before {
    content: '';
    width: 40px;
    height: 34px;
    background: var(--ig-brain) no-repeat center / contain;
}

.ig-brain-hub__icon::after {
    content: '';
    position: absolute;
    inset: -6px;
    border: 2px dashed rgba(37, 169, 184, .35);
    border-radius: 50%;
    animation: igLampSwing 6s ease-in-out infinite;
}

.ig-brain-hub__label {
    font-size: var(--fz-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text-secondary);
    max-width: 160px;
    line-height: 1.4;
}

/* ===================================
   5. ФОТО С ПОЛУКРУГЛОЙ РАМКОЙ + СЕРДЕЧКОМ + ШТРИХАМИ
   Разметка:
   <div class="ig-photo-frame">
     <img src="..." alt="...">
     <span class="ig-photo-frame__heart" aria-hidden="true"></span>
     <span class="ig-photo-frame__sparkle" aria-hidden="true"></span>
   </div>
   =================================== */
.ig-photo-frame {
    position: relative;
    border-radius: 40px;
    overflow: hidden;
    isolation: isolate;
}

.ig-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ig-photo-frame::before {
    content: '';
    position: absolute;
    inset: -8px;
    border: 2.5px solid var(--color-secondary);
    border-radius: 48px;
    opacity: 0.4;
    pointer-events: none;
    z-index: 2;
}

.ig-photo-frame__heart {
    position: absolute;
    top: -14px;
    right: 14%;
    width: 34px;
    height: 30px;
    background: var(--ig-heart-outline) no-repeat center / contain;
    z-index: 3;
    animation: igFloatSlow 3.5s ease-in-out infinite;
    pointer-events: none;
}

.ig-photo-frame__sparkle {
    position: absolute;
    top: 6%;
    left: -18px;
    width: 30px;
    height: 30px;
    background: var(--ig-sparkle-lines) no-repeat center / contain;
    z-index: 3;
    opacity: 0.8;
    pointer-events: none;
}

@media (max-width: 640px) {
    .ig-photo-frame__heart,
    .ig-photo-frame__sparkle { display: none; }
}

/* ===================================
   6. КАПСУЛА-ИНФОБОКС (нижняя плашка с иконкой слева)
   Разметка:
   <div class="ig-capsule">
     <span class="ig-capsule__icon"><svg>...</svg></span>
     <p class="ig-capsule__text">Текст пояснения...</p>
   </div>
   Модификаторы: --primary (терракот), --secondary (teal), --tertiary (mint)
   =================================== */
.ig-capsule {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    background: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-full);
    max-width: 640px;
}

.ig-capsule__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

.ig-capsule__icon svg {
    width: 18px;
    height: 18px;
}

.ig-capsule--secondary .ig-capsule__icon {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}

.ig-capsule--tertiary .ig-capsule__icon {
    border-color: var(--color-tertiary-dark);
    color: var(--color-tertiary-dark);
}

.ig-capsule__text {
    margin: 0;
    font-size: var(--fz-sm);
    color: var(--color-text);
    line-height: 1.5;
}

.ig-capsule__text strong {
    color: var(--color-secondary-dark);
    font-weight: var(--fw-bold);
}

@media (max-width: 640px) {
    .ig-capsule {
        padding: var(--space-3) var(--space-4);
        gap: var(--space-3);
    }
    .ig-capsule__icon { width: 34px; height: 34px; }
}

/* ===================================
   7. ЦЕПОЧКА "ВИДИМ → ПОНИМАЕМ" (два шага с пунктирной стрелкой)
   Разметка:
   <div class="ig-chain">
     <div class="ig-chain__step">
       <span class="ig-chain__icon"><svg>...</svg></span>
       <span>Видим реакцию</span>
     </div>
     <span class="ig-chain__arrow" aria-hidden="true"></span>
     <div class="ig-chain__step">
       <span class="ig-chain__icon"><svg>...</svg></span>
       <span>Понимаем причину</span>
     </div>
   </div>
   =================================== */
.ig-chain {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-4) var(--space-6);
    background: var(--color-secondary-light, #E5F5F7);
    border-radius: var(--radius-lg);
}

.ig-chain__step {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--fz-sm);
    font-weight: var(--fw-bold);
    color: var(--color-text);
}

.ig-chain__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-secondary-dark);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.ig-chain__icon svg { width: 18px; height: 18px; }

.ig-chain__arrow {
    width: 44px;
    height: 2px;
    background-image: repeating-linear-gradient(90deg, var(--color-secondary) 0 6px, transparent 6px 12px);
    position: relative;
    flex-shrink: 0;
}

.ig-chain__arrow::after {
    content: '';
    position: absolute;
    right: -2px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-secondary);
    border-bottom: 2px solid var(--color-secondary);
    transform: translateY(-50%) rotate(-45deg);
}

@media (max-width: 480px) {
    .ig-chain { flex-direction: column; align-items: flex-start; }
    .ig-chain__arrow { display: none; }
}

/* ===================================
   8. СЕТКА КАРТОЧЕК "ПРИЗНАКИ" С ВОСКЛИЦАТЕЛЬНЫМ ЗНАКОМ
   (аналог существующего .age-group, но с фото и !-иконкой сверху)
   Разметка:
   <div class="ig-symptom-grid">
     <div class="ig-symptom-card">
       <span class="ig-symptom-card__badge">!</span>
       <img src="..." alt="...">
       <p class="ig-symptom-card__text">Описание признака</p>
     </div>
     ...
   </div>
   =================================== */
.ig-symptom-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    max-width: 960px;
    margin: 0 auto;
}

.ig-symptom-card {
    position: relative;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-white);
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.ig-symptom-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-secondary);
    box-shadow: var(--shadow-lg);
}

.ig-symptom-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.ig-symptom-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    font-weight: var(--fw-black);
    font-size: var(--fz-sm);
    box-shadow: var(--shadow-sm);
}

.ig-symptom-card__text {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    font-size: var(--fz-sm);
    color: var(--color-text);
    line-height: 1.4;
}

@media (max-width: 900px) {
    .ig-symptom-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .ig-symptom-grid { grid-template-columns: 1fr; max-width: 380px; }
}

/* ===================================
   9. МЕЛКИЕ УНИВЕРСАЛЬНЫЕ ЭЛЕМЕНТЫ
   =================================== */
.ig-dot-terracotta {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-primary);
    pointer-events: none;
    z-index: 2;
}

.ig-waves-icon {
    position: absolute;
    width: 22px;
    height: 22px;
    background: var(--ig-waves) no-repeat center / contain;
    animation: igWaveOpacity 2.4s ease-in-out infinite;
    pointer-events: none;
}

/* ===================================
   ACCESSIBILITY / PRINT
   =================================== */
@media (prefers-reduced-motion: reduce) {
    .ig-lamp,
    .ig-brain-hub__icon::after,
    .ig-photo-frame__heart,
    .ig-waves-icon {
        animation: none;
    }
}

@media print {
    .ig-corner,
    .ig-lamp,
    .ig-photo-frame__heart,
    .ig-photo-frame__sparkle,
    .ig-waves-icon {
        display: none !important;
    }
}

/* ===================================
   ДОПОЛНЕНИЕ INFOGRAPHIC-DECOR.CSS — v2
   Новые элементы взамен угловых арок:
   стикер-бейдж, прогресс-точки, тег-облако,
   волнистый разделитель, плавающий счётчик.
   =================================== */

:root {
    /* Зигзаг-подчёркивание короткое (акцент slova) */
    --ig-zigzag-underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='12' viewBox='0 0 70 12'%3E%3Cpath d='M2 9L12 3L22 9L32 3L42 9L52 3L62 9L68 5' fill='none' stroke='%23EE7A5D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    /* Волна-разделитель тонкая teal→mint */
    --ig-wave-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='20' viewBox='0 0 200 20'%3E%3Cpath d='M0 10Q25 0 50 10T100 10T150 10T200 10' fill='none' stroke='%2325A9B8' stroke-width='2' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E");

    /* Скрепка/канцелярская булавка (для стикер-бейджа) */
    --ig-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='4.5' fill='%23EE7A5D'/%3E%3Ccircle cx='9' cy='9' r='4.5' fill='none' stroke='white' stroke-width='1' opacity='0.5'/%3E%3C/svg%3E");

    /* Флажок-отметка мятный маленький */
    --ig-check-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%2352CC9A' fill-opacity='0.15'/%3E%3Cpath d='M6 10L9 13L14 7' fill='none' stroke='%2352CC9A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@keyframes igStickerWiggle {
    0%, 100% { transform: rotate(-3deg); }
    50%      { transform: rotate(3deg); }
}

@keyframes igCountBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

/* ===================================
   10. СТИКЕР-БЕЙДЖ (наклонная плашка с булавкой)
   Разметка:
   <span class="ig-sticker ig-sticker--teal">Новое</span>
   Модификаторы: --teal (по умолчанию), --terracotta, --mint
   =================================== */
.ig-sticker {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px 6px 22px;
    background: var(--color-secondary);
    color: #fff;
    font-family: var(--font-heading), sans-serif;
    font-size: var(--fz-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: var(--radius-sm);
    transform: rotate(-2deg);
    box-shadow: 0 4px 10px rgba(37, 169, 184, .3);
    transition: transform var(--transition-base);
}

.ig-sticker::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 8px;
    width: 14px;
    height: 14px;
    background: var(--ig-pin) no-repeat center / contain;
}

.ig-sticker:hover {
    transform: rotate(0deg) scale(1.05);
}

.ig-sticker--terracotta {
    background: var(--color-primary);
    box-shadow: 0 4px 10px rgba(238, 122, 93, .3);
}

.ig-sticker--mint {
    background: var(--color-tertiary-dark);
    box-shadow: 0 4px 10px rgba(82, 204, 154, .3);
}

/* ===================================
   11. ПРОГРЕСС-ТОЧКИ (шаги процесса, горизонтальные)
   Разметка:
   <div class="ig-progress">
     <div class="ig-progress__step ig-progress__step--done">
       <span class="ig-progress__dot"></span>
       <span class="ig-progress__label">Выбор даты</span>
     </div>
     <div class="ig-progress__step ig-progress__step--active">...</div>
     <div class="ig-progress__step">...</div>
   </div>
   =================================== */
.ig-progress {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 560px;
    margin: 0 auto;
    margin-top: var(--space-4);
}

.ig-progress__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    position: relative;
}

.ig-progress__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 9px;
    left: 60%;
    width: 100%;
    height: 2px;
    background: var(--color-border);
    z-index: 0;
}

.ig-progress__step--done:not(:last-child)::after,
.ig-progress__step--active:not(:last-child)::after {
    background: var(--color-secondary);
}

.ig-progress__dot {
    position: relative;
    z-index: 1;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-border);
    transition: all var(--transition-base);
}

.ig-progress__step--done .ig-progress__dot {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
}

.ig-progress__step--active .ig-progress__dot {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 4px rgba(37, 169, 184, .18);
    animation: igCountBounce 1.6s ease-in-out infinite;
}

.ig-progress__label {
    font-size: var(--fz-xs);
    font-weight: var(--fw-medium);
    color: var(--color-text-secondary);
    text-align: center;
}

.ig-progress__step--done .ig-progress__label,
.ig-progress__step--active .ig-progress__label {
    color: var(--color-secondary-dark);
    font-weight: var(--fw-bold);
}

@media (max-width: 480px) {
    .ig-progress__label { font-size: 10px; }
}

/* ===================================
   12. ТЕГ-ОБЛАКО (мелкие теги-хайлайты, разного размера/цвета)
   Разметка:
   <div class="ig-tag-cloud">
     <span class="ig-tag">ДЦП</span>
     <span class="ig-tag ig-tag--mint">РАС</span>
     <span class="ig-tag ig-tag--terracotta">ЗПРР</span>
     ...
   </div>
   =================================== */
.ig-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
}

.ig-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: var(--radius-full);
    background: var(--color-secondary-light, #E5F5F7);
    color: var(--color-secondary-dark);
    font-size: var(--fz-xs);
    font-weight: var(--fw-bold);
    transition: transform var(--transition-base);
}

.ig-tag:hover {
    transform: translateY(-2px) scale(1.05);
}

.ig-tag--mint {
    background: var(--color-tertiary-light, #E8F9F0);
    color: var(--color-tertiary-text);
}

.ig-tag--terracotta {
    background: var(--color-primary-light);
    color: var(--color-primary-darker);
}

/* ===================================
   13. ВОЛНИСТЫЙ РАЗДЕЛИТЕЛЬ С ИКОНКОЙ В ЦЕНТРЕ
   Разметка:
   <div class="ig-wave-split" aria-hidden="true">
     <span class="ig-wave-split__icon"><svg>...</svg></span>
   </div>
   =================================== */
.ig-wave-split {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    margin: var(--space-8) 0;
}

.ig-wave-split::before,
.ig-wave-split::after {
    content: '';
    flex: 1;
    height: 20px;
    background: var(--ig-wave-divider) repeat-x center / 100px 20px;
}

.ig-wave-split__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-secondary);
    color: var(--color-secondary);
    margin: 0 var(--space-4);
    box-shadow: var(--shadow-sm);
}

.ig-wave-split__icon svg {
    width: 18px;
    height: 18px;
}

/* ===================================
   14. ПЛАВАЮЩИЙ БЕЙДЖ-СЧЁТЧИК (число в кружке, "подпрыгивает")
   Разметка:
   <span class="ig-count-badge">12</span>
   =================================== */
.ig-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading), sans-serif;
    font-size: var(--fz-sm);
    font-weight: var(--fw-black);
    box-shadow: 0 3px 10px rgba(238, 122, 93, .3);
    animation: igCountBounce 2.4s ease-in-out infinite;
}

/* ===================================
   15. ОТМЕТКА-ФЛАЖОК (для списков "что входит")
   Разметка:
   <li class="ig-flag-item">
     <span class="ig-flag-item__icon" aria-hidden="true"></span>
     Текст пункта
   </li>
   =================================== */
.ig-flag-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--fz-sm);
    color: var(--color-text);
    padding: var(--space-2) 0;
}

.ig-flag-item__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: var(--ig-check-flag) no-repeat center / contain;
}

/* ===================================
   ACCESSIBILITY / PRINT — ДОПОЛНЕНИЯ v2
   =================================== */
@media (prefers-reduced-motion: reduce) {
    .ig-sticker,
    .ig-progress__step--active .ig-progress__dot,
    .ig-count-badge {
        animation: none;
        transform: none;
    }
}

@media print {
    .ig-sticker::before,
    .ig-wave-split::before,
    .ig-wave-split::after {
        display: none !important;
    }
}

/* ===================================
   ДОПОЛНЕНИЕ v3 — фикс стикера + крупный hero-декор
   для страницы статей + оформление карточек
   =================================== */

:root {
    /* Крупный дудл: блокнот с карандашом (для правой части hero) */
    --ig-notebook-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='30' y='24' width='120' height='150' rx='10' fill='white' stroke='%2325A9B8' stroke-width='3'/%3E%3Cline x1='30' y1='52' x2='150' y2='52' stroke='%2325A9B8' stroke-width='2' opacity='0.4'/%3E%3Cline x1='50' y1='78' x2='130' y2='78' stroke='%2325A9B8' stroke-width='3'/%3E%3Cline x1='50' y1='96' x2='130' y2='96' stroke='%2325A9B8' stroke-width='3' opacity='0.7'/%3E%3Cline x1='50' y1='114' x2='105' y2='114' stroke='%2325A9B8' stroke-width='3' opacity='0.5'/%3E%3Ccircle cx='50' cy='140' r='5' fill='%2352CC9A'/%3E%3Cline x1='63' y1='140' x2='120' y2='140' stroke='%2352CC9A' stroke-width='3'/%3E%3Cpath d='M120 150L175 95L192 112L137 167L118 172Z' fill='%23FDEDE7' stroke='%23EE7A5D' stroke-width='3'/%3E%3Cpath d='M175 95L192 112' stroke='%23EE7A5D' stroke-width='3'/%3E%3Cpath d='M118 172L120 150L128 158Z' fill='%23EE7A5D'/%3E%3Ccircle cx='170' cy='40' r='14' fill='none' stroke='%2352CC9A' stroke-width='2.5' opacity='0.5'/%3E%3Cpath d='M164 40L168 44L177 33' stroke='%2352CC9A' stroke-width='2.5' opacity='0.5'/%3E%3C/g%3E%3C/svg%3E");

    /* Закладка-ленточка (уголок карточки) */
    --ig-bookmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='48' viewBox='0 0 36 48'%3E%3Cpath d='M0 0H36V44L18 32L0 44Z' fill='%2325A9B8'/%3E%3C/svg%3E");
}

@keyframes igNotebookFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-10px) rotate(1deg); }
}

/* ===================================
   16. КОМПАКТНЫЙ СТИКЕР (фикс "растянутости")
   Добавить модификатор ig-sticker--compact к элементу
   =================================== */
.ig-sticker--compact {
    padding: 5px 12px 5px 18px;
    font-size: 10px;
    letter-spacing: 0.02em;
    max-width: max-content;
    white-space: nowrap;
}

.ig-sticker--compact::before {
    width: 11px;
    height: 11px;
    top: -5px;
    left: 6px;
}

/* ===================================
   17. КРУПНЫЙ ДЕКОР ДЛЯ HERO-СЕКЦИЙ (блокнот+карандаш)
   Разметка:
   <span class="ig-hero-notebook" aria-hidden="true"></span>
   Позиционируется абсолютно в правой части hero
   =================================== */
.ig-hero-notebook {
    position: absolute;
    top: 50%;
    right: 4%;
    transform: translateY(-50%);
    width: clamp(160px, 20vw, 220px);
    height: clamp(160px, 20vw, 220px);
    background: var(--ig-notebook-pencil) no-repeat center / contain;
    opacity: 0.9;
    z-index: 0;
    pointer-events: none;
    animation: igNotebookFloat 7s ease-in-out infinite;
}

@media (max-width: 1100px) {
    .ig-hero-notebook {
        width: clamp(130px, 18vw, 180px);
        opacity: 0.7;
    }
}

@media (max-width: 768px) {
    .ig-hero-notebook { display: none; }
}

/* ===================================
   18. ОФОРМЛЕНИЕ КАРТОЧЕК СТАТЕЙ (article-card)
   Работает автоматически на существующем классе .article-card
   без изменений в JS-рендере — добавляет закладку, hover-подъём,
   акцентную полосу и лёгкий поворот при наведении
   =================================== */
.article-card {
    position: relative;
    isolation: isolate;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.article-card:not(.article-card--skeleton):hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

/* Закладка-уголок в правом верхнем углу картинки */
.article-card:not(.article-card--skeleton)::before {
    content: '';
    position: absolute;
    top: 0;
    right: 14px;
    width: 22px;
    height: 30px;
    background: var(--ig-bookmark) no-repeat center / contain;
    z-index: 3;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity var(--transition-base), transform var(--transition-base);
    pointer-events: none;
}

.article-card:not(.article-card--skeleton):hover::before {
    opacity: 1;
    transform: translateY(0);
}

/* Акцентная верхняя полоса teal→mint при ховере (как у карточек услуг/специалистов) */
.article-card:not(.article-card--skeleton)::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-accent-line);
    z-index: 2;
    opacity: 0;
    transition: opacity var(--transition-base);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.article-card:not(.article-card--skeleton):hover::after {
    opacity: 1;
}

/* Лёгкое масштабирование картинки внутри карточки при ховере */
.article-card:not(.article-card--skeleton) img {
    transition: transform var(--transition-slow);
}

.article-card:not(.article-card--skeleton):hover img {
    transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
    .ig-hero-notebook { animation: none; }
    .article-card:hover { transform: none; }
    .article-card:hover img { transform: none; }
}

@media print {
    .ig-hero-notebook,
    .article-card::before,
    .article-card::after {
        display: none !important;
    }
}

/* ===================================
   ДОПОЛНЕНИЕ v4 — для reviews.html
   =================================== */

:root {
    /* Крупный дудл: пузырь диалога с сердечком (для правой части hero, если понадобится) */
    --ig-speech-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='170' viewBox='0 0 200 170'%3E%3Cpath d='M20 20H160C170 20 178 28 178 38V100C178 110 170 118 160 118H80L50 150V118H20C10 118 2 110 2 100V38C2 28 10 20 20 20Z' fill='white' stroke='%2325A9B8' stroke-width='3'/%3E%3Cpath d='M75 55C75 48 82 44 88 48C91 50 95 55 95 55C95 55 99 50 102 48C108 44 115 48 115 55C115 66 95 78 95 78C95 78 75 66 75 55Z' fill='%23EE7A5D' opacity='0.85'/%3E%3Ccircle cx='150' cy='40' r='10' fill='none' stroke='%2352CC9A' stroke-width='2.5' opacity='0.5'/%3E%3Cpath d='M145 40L149 44L156 34' stroke='%2352CC9A' stroke-width='2.5' opacity='0.5'/%3E%3C/svg%3E");
}

@keyframes igSpeechFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-8px) rotate(1deg); }
}

/* ===================================
   19. КРУПНЫЙ ДЕКОР "ПУЗЫРЬ ОТЗЫВА" (аналог ig-hero-notebook)
   =================================== */
.ig-hero-speech {
    position: absolute;
    top: 50%;
    right: 4%;
    transform: translateY(-50%);
    width: clamp(150px, 19vw, 200px);
    height: clamp(128px, 16vw, 170px);
    background: var(--ig-speech-heart) no-repeat center / contain;
    opacity: 0.85;
    z-index: 0;
    pointer-events: none;
    animation: igSpeechFloat 7s ease-in-out infinite;
}

@media (max-width: 1100px) {
    .ig-hero-speech {
        width: clamp(120px, 16vw, 160px);
        opacity: 0.65;
    }
}

@media (max-width: 900px) {
    .ig-hero-speech { display: none; }
}

/* ===================================
   ФИКС: крупные hero-дудлы теперь адаптивны,
   а не скрываются полностью на мобильных
   =================================== */

.ig-hero-notebook {
    position: absolute;
    top: 50%;
    right: 4%;
    transform: translateY(-50%);
    width: clamp(160px, 20vw, 220px);
    height: clamp(160px, 20vw, 220px);
    background: var(--ig-notebook-pencil) no-repeat center / contain;
    opacity: 0.9;
    z-index: 0;
    pointer-events: none;
    animation: igNotebookFloat 7s ease-in-out infinite;
}

@media (max-width: 1100px) {
    .ig-hero-notebook {
        width: clamp(130px, 18vw, 180px);
        opacity: 0.7;
    }
}

/* БЫЛО: display: none при max-width: 768px — убираем полное скрытие,
   вместо этого уменьшаем и переносим декор в верхний угол,
   чтобы не перекрывать текст на узких экранах */
@media (max-width: 768px) {
    .ig-hero-notebook {
        top: 8px;
        right: 4%;
        transform: none;
        width: 84px;
        height: 84px;
        opacity: 0.55;
        animation-duration: 9s;
    }
}

@media (max-width: 480px) {
    .ig-hero-notebook {
        width: 64px;
        height: 64px;
        top: 4px;
        right: 3%;
        opacity: 0.45;
    }
}

.ig-hero-speech {
    position: absolute;
    top: 50%;
    right: 4%;
    transform: translateY(-50%);
    width: clamp(150px, 19vw, 200px);
    height: clamp(128px, 16vw, 170px);
    background: var(--ig-speech-heart) no-repeat center / contain;
    opacity: 0.85;
    z-index: 0;
    pointer-events: none;
    animation: igSpeechFloat 7s ease-in-out infinite;
}

@media (max-width: 1100px) {
    .ig-hero-speech {
        width: clamp(120px, 16vw, 160px);
        opacity: 0.65;
    }
}

/* БЫЛО: display: none при max-width: 900px — теперь адаптивная миниатюра */
@media (max-width: 900px) {
    .ig-hero-speech {
        top: 6px;
        right: 4%;
        transform: none;
        width: 76px;
        height: 66px;
        opacity: 0.5;
    }
}

@media (max-width: 480px) {
    .ig-hero-speech {
        width: 58px;
        height: 50px;
        top: 2px;
        right: 3%;
        opacity: 0.4;
    }
}

/* ===================================
   ФИКС: убираем анимацию покачивания на мобильных —
   на маленьком декоре она визуально "дрожит" и мешает
   =================================== */
@media (max-width: 768px) {
    .ig-hero-notebook,
    .ig-hero-speech {
        animation: none;
    }
}

/* ===================================
   ДОПОЛНЕНИЕ v5 — для contacts.html
   =================================== */

:root {
    /* Крупный дудл: дом с сердцем и телефонной трубкой (для hero контактов) */
    --ig-home-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='190' viewBox='0 0 210 190'%3E%3Cpath d='M20 90L100 20L180 90' stroke='%2325A9B8' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M35 80V165H165V80' stroke='%2325A9B8' stroke-width='4' stroke-linejoin='round' fill='none'/%3E%3Crect x='80' y='120' width='40' height='45' fill='none' stroke='%2325A9B8' stroke-width='3'/%3E%3Cpath d='M100 95C100 95 85 82 85 72C85 65 91 61 97 65C99 66.5 100 70 100 70C100 70 101 66.5 103 65C109 61 115 65 115 72C115 82 100 95 100 95Z' fill='%23EE7A5D' opacity='0.85'/%3E%3Ccircle cx='168' cy='45' r='11' fill='none' stroke='%2352CC9A' stroke-width='2.5' opacity='0.55'/%3E%3Cpath d='M162 45L166 49L175 38' stroke='%2352CC9A' stroke-width='2.5' opacity='0.55'/%3E%3C/svg%3E");
}

@keyframes igHomeFloat {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50%      { transform: translateY(-8px) rotate(1deg); }
}

/* ===================================
   20. КРУПНЫЙ ДЕКОР ДЛЯ HERO КОНТАКТОВ
   =================================== */
.ig-hero-home {
    position: absolute;
    top: 50%;
    right: 4%;
    transform: translateY(-50%);
    width: clamp(150px, 18vw, 200px);
    height: clamp(136px, 16vw, 180px);
    background: var(--ig-home-heart) no-repeat center / contain;
    opacity: 0.85;
    z-index: 0;
    pointer-events: none;
    animation: igHomeFloat 7s ease-in-out infinite;
}

@media (max-width: 1100px) {
    .ig-hero-home {
        width: clamp(120px, 15vw, 160px);
        opacity: 0.65;
    }
}

/* Адаптивная миниатюра вместо полного скрытия (по установленному паттерну) */
@media (max-width: 900px) {
    .ig-hero-home {
        top: 6px;
        right: 4%;
        transform: none;
        width: 78px;
        height: 70px;
        opacity: 0.5;
        animation: none;
    }
}

@media (max-width: 480px) {
    .ig-hero-home {
        width: 58px;
        height: 52px;
        top: 2px;
        right: 3%;
        opacity: 0.4;
    }
}

/* ===================================
   ДОПОЛНЕНИЕ v6 — для главной страницы (index.html)
   =================================== */

:root {
    /* Иконка "рука + сердце" для цепочки первого визита */
    --ig-handshake: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M2 10l4-4 3 3 3-3 4 4M2 10l3 3M18 10l-3 3M6 16l4-3 4 3' fill='none' stroke='%2325A9B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ===================================
   21. HERO ГЛАВНОЙ — компактный стикер над заголовком
   =================================== */
.hero__text-box {
    position: relative;
}

/* ===================================
   22. ЦЕПОЧКА ЭТАПОВ ПЕРВОГО ВИЗИТА
   Разметка (3-4 шага, горизонтально на десктопе,
   вертикально (в виде timeline) на мобильных)
   =================================== */
.ig-visit-chain {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-2);
    max-width: 980px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.ig-visit-chain__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 160px;
    max-width: 220px;
    position: relative;
}

.ig-visit-chain__num {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-tertiary) 100%);
    color: #fff;
    font-family: var(--font-heading), sans-serif;
    font-weight: var(--fw-black);
    font-size: var(--fz-md);
    box-shadow: 0 4px 14px rgba(37, 169, 184, .3);
    flex-shrink: 0;
}

.ig-visit-chain__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.ig-visit-chain__title {
    font-family: var(--font-heading), sans-serif;
    font-size: var(--fz-sm);
    font-weight: var(--fw-bold);
    color: var(--color-text);
    margin: 0;
}

.ig-visit-chain__text {
    font-size: var(--fz-xs);
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0;
}

.ig-visit-chain__connector {
    flex-shrink: 0;
    width: 40px;
    height: 2px;
    background-image: repeating-linear-gradient(90deg, var(--color-secondary) 0 6px, transparent 6px 12px);
    margin-top: 22px;
    position: relative;
}

.ig-visit-chain__connector::after {
    content: '';
    position: absolute;
    right: -2px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-secondary);
    border-bottom: 2px solid var(--color-secondary);
    transform: translateY(-50%) rotate(-45deg);
}

/* ===== Мобильная версия: компактный timeline ===== */
@media (max-width: 900px) {
    .ig-visit-chain {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-width: 420px;
    }

    .ig-visit-chain__step {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        gap: var(--space-3);
        max-width: none;
        width: 100%;
        padding: var(--space-2) 0;
    }

    .ig-visit-chain__num {
        width: 36px;
        height: 36px;
        font-size: var(--fz-sm);
        box-shadow: 0 3px 10px rgba(37, 169, 184, .25);
        flex-shrink: 0;
    }

    .ig-visit-chain__body {
        gap: 2px;
        text-align: left;
    }

    .ig-visit-chain__title,
    .ig-visit-chain__text {
        text-align: left;
    }

    /* Короткий вертикальный соединитель, продолжающий линию кружка */
    .ig-visit-chain__connector {
        width: 2px;
        height: 16px;
        margin: 0 0 0 17px; /* половина ширины num (36/2 - 1) */
        background-image: repeating-linear-gradient(180deg, var(--color-secondary) 0 5px, transparent 5px 10px);
    }

    .ig-visit-chain__connector::after {
        right: auto;
        left: 50%;
        top: auto;
        bottom: -2px;
        transform: translateX(-50%) rotate(45deg);
    }
}

@media (max-width: 480px) {
    .ig-visit-chain {
        max-width: 100%;
    }
}

/* ===================================
   23. КАПСУЛЫ-ПРЕИМУЩЕСТВА (компактный вариант ig-capsule для сетки 2х2)
   =================================== */
.ig-capsule-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.ig-capsule-grid .ig-capsule {
    max-width: none;
}

@media (max-width: 640px) {
    .ig-capsule-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   ДОПОЛНЕНИЕ v7 — крупный декор для секции отзывов
   на главной странице (home-decor-extra.css уже
   добавляет arc/dots, здесь — недостающий крупный элемент)
   =================================== */

:root {
    /* Крупный дудл: сердце с звёздами вокруг (тема "отзывы/благодарность") */
    --ig-heart-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='170' viewBox='0 0 190 170'%3E%3Cpath d='M95 130C95 130 40 95 40 55C40 35 55 22 72 30C82 35 95 48 95 48C95 48 108 35 118 30C135 22 150 35 150 55C150 95 95 130 95 130Z' fill='none' stroke='%23EE7A5D' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M95 108C95 108 62 86 62 60' stroke='%23EE7A5D' stroke-width='2' stroke-linecap='round' fill='none' opacity='0.35'/%3E%3Cpath d='M30 20L34 30L44 32L34 34L30 44L26 34L16 32L26 30Z' fill='%2325A9B8' opacity='0.7'/%3E%3Cpath d='M160 100L163 108L171 110L163 112L160 120L157 112L149 110L157 108Z' fill='%2352CC9A' opacity='0.7'/%3E%3Cpath d='M155 25L157 31L163 33L157 35L155 41L153 35L147 33L153 31Z' fill='%2325A9B8' opacity='0.5'/%3E%3C/svg%3E");
}

@keyframes igHeartStarsFloat {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50%      { transform: translateY(-10px) rotate(1deg); }
}

/* ===================================
   24. КРУПНЫЙ ДЕКОР "СЕРДЦЕ СО ЗВЁЗДАМИ" ДЛЯ СЕКЦИИ ОТЗЫВОВ
   =================================== */
.ig-reviews-heart {
    position: absolute;
    top: 8%;
    right: 3%;
    width: clamp(140px, 16vw, 190px);
    height: clamp(126px, 14vw, 170px);
    background: var(--ig-heart-stars) no-repeat center / contain;
    opacity: 0.8;
    z-index: 0;
    pointer-events: none;
    animation: igHeartStarsFloat 8s ease-in-out infinite;
}

@media (max-width: 1100px) {
    .ig-reviews-heart {
        width: clamp(110px, 13vw, 150px);
        opacity: 0.6;
    }
}

@media (max-width: 900px) {
    .ig-reviews-heart {
        top: 4px;
        right: 3%;
        width: 72px;
        height: 64px;
        opacity: 0.45;
        animation: none;
    }
}

@media (max-width: 480px) {
    .ig-reviews-heart {
        width: 56px;
        height: 50px;
        opacity: 0.35;
    }
}

/* ===================================
   25. КАПСУЛА "СРЕДНЯЯ ОЦЕНКА" (описательная, без чисел)
   =================================== */
.ig-reviews-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-5) auto 0;
    padding: var(--space-3) var(--space-6);
    background: linear-gradient(135deg, #FFF7ED 0%, #FFEFD9 100%);
    border: 1.5px solid rgba(245, 158, 11, .3);
    border-radius: var(--radius-full);
    max-width: max-content;
}

.ig-reviews-badge__stars {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.ig-reviews-badge__stars svg {
    width: 16px;
    height: 16px;
    color: #F59E0B;
    fill: #F59E0B;
}

.ig-reviews-badge__text {
    font-size: var(--fz-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text);
}

.ig-reviews-badge__text strong {
    color: var(--color-primary-darker);
    font-weight: var(--fw-bold);
}

/* ===================================
   26. ЗВЁЗДНЫЙ РАЗДЕЛИТЕЛЬ (перенесён в общий файл,
   чтобы работал и на главной, и на странице отзывов)
   =================================== */
:root {
    --ig-star-split: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M11 1L13.5 8.5L21 11L13.5 13.5L11 21L8.5 13.5L1 11L8.5 8.5Z' fill='none' stroke='%2352CC9A' stroke-width='1.6' stroke-linejoin='round' opacity='0.7'/%3E%3C/svg%3E");
}

.reviews-star-split {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin: var(--space-8) 0 var(--space-2);
}

.reviews-star-split::before,
.reviews-star-split::after {
    content: '';
    flex: 1;
    max-width: 180px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-border));
}

.reviews-star-split::after {
    background: linear-gradient(to left, transparent, var(--color-border));
}

.reviews-star-split__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: var(--ig-star-split) no-repeat center / contain;
}

/* ===================================
   ДОПОЛНЕНИЕ v8 — для страниц докторов
   (список специалистов + профиль врача)
   =================================== */

:root {
    /* Крупный дудл: врач/стетоскоп с сердцем (для hero списка специалистов) */
    --ig-doctor-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='180' viewBox='0 0 190 180'%3E%3Cpath d='M55 20V70C55 95 73 112 95 112C117 112 135 95 135 70V20' stroke='%2325A9B8' stroke-width='4' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='55' cy='20' r='7' fill='none' stroke='%2325A9B8' stroke-width='3'/%3E%3Ccircle cx='135' cy='20' r='7' fill='none' stroke='%2325A9B8' stroke-width='3'/%3E%3Cpath d='M95 112V132' stroke='%2325A9B8' stroke-width='4' stroke-linecap='round'/%3E%3Ccircle cx='95' cy='145' r='13' fill='none' stroke='%2325A9B8' stroke-width='3'/%3E%3Cpath d='M95 140C95 140 88 135 88 130C88 127 91 125 94 127C95 128 95 130 95 130C95 130 95 128 96 127C99 125 102 127 102 130C102 135 95 140 95 140Z' fill='%23EE7A5D' opacity='0.85'/%3E%3Ccircle cx='160' cy='55' r='10' fill='none' stroke='%2352CC9A' stroke-width='2.5' opacity='0.55'/%3E%3Cpath d='M155 55L159 59L167 48' stroke='%2352CC9A' stroke-width='2.5' opacity='0.55'/%3E%3C/svg%3E");
}

@keyframes igDoctorFloat {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50%      { transform: translateY(-9px) rotate(1deg); }
}

/* ===================================
   27. КРУПНЫЙ ДЕКОР ДЛЯ HERO СПИСКА СПЕЦИАЛИСТОВ
   =================================== */
.ig-hero-doctor {
    position: absolute;
    top: 50%;
    right: 4%;
    transform: translateY(-50%);
    width: clamp(150px, 17vw, 190px);
    height: clamp(142px, 16vw, 180px);
    background: var(--ig-doctor-heart) no-repeat center / contain;
    opacity: 0.8;
    z-index: 0;
    pointer-events: none;
    animation: igDoctorFloat 8s ease-in-out infinite;
}

@media (max-width: 1100px) {
    .ig-hero-doctor {
        width: clamp(120px, 14vw, 150px);
        opacity: 0.6;
    }
}

@media (max-width: 900px) {
    .ig-hero-doctor {
        top: 6px;
        right: 4%;
        transform: none;
        width: 74px;
        height: 70px;
        opacity: 0.45;
        animation: none;
    }
}

@media (max-width: 480px) {
    .ig-hero-doctor {
        width: 56px;
        height: 54px;
        opacity: 0.35;
    }
}

/* ===================================
   28. МИНИ-КАПСУЛА ДЛЯ SIDEBAR ПРОФИЛЯ ВРАЧА
   (компактный вариант ig-capsule под узкую колонку sidebar)
   =================================== */
.ig-capsule--sidebar {
    max-width: none;
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
}

.ig-capsule--sidebar .ig-capsule__icon {
    width: 32px;
    height: 32px;
}

.ig-capsule--sidebar .ig-capsule__icon svg {
    width: 15px;
    height: 15px;
}

.ig-capsule--sidebar .ig-capsule__text {
    font-size: var(--fz-xs);
}

/* ===================================
   ДОПОЛНЕНИЕ v9 — для course-detail.html
   =================================== */

:root {
    /* Крупный дудл: свиток-программа с лентой-достижением */
    --ig-scroll-award: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='190' viewBox='0 0 180 190'%3E%3Cpath d='M40 20C34 20 30 26 30 34C30 42 34 48 40 48H140C146 48 150 42 150 34C150 26 146 20 140 20' fill='none' stroke='%2325A9B8' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M40 48V110C40 118 34 124 40 124H140C146 124 140 118 140 110V48' fill='none' stroke='%2325A9B8' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='56' y1='66' x2='124' y2='66' stroke='%2325A9B8' stroke-width='3' stroke-linecap='round' opacity='0.6'/%3E%3Cline x1='56' y1='80' x2='110' y2='80' stroke='%2325A9B8' stroke-width='3' stroke-linecap='round' opacity='0.6'/%3E%3Cline x1='56' y1='94' x2='118' y2='94' stroke='%2325A9B8' stroke-width='3' stroke-linecap='round' opacity='0.4'/%3E%3Ccircle cx='90' cy='150' r='22' fill='none' stroke='%23EE7A5D' stroke-width='4'/%3E%3Cpath d='M82 150L87 155L99 143' stroke='%23EE7A5D' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M74 168L68 186L90 176L112 186L106 168' fill='none' stroke='%23EE7A5D' stroke-width='3.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@keyframes igScrollFloat {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50%      { transform: translateY(-8px) rotate(1deg); }
}

/* ===================================
   29. КРУПНЫЙ ДЕКОР ДЛЯ HERO СТРАНИЦЫ КУРСА
   =================================== */
.ig-hero-scroll {
    position: absolute;
    top: 50%;
    right: 4%;
    transform: translateY(-50%);
    width: clamp(140px, 16vw, 180px);
    height: clamp(148px, 17vw, 190px);
    background: var(--ig-scroll-award) no-repeat center / contain;
    opacity: 0.75;
    z-index: 0;
    pointer-events: none;
    animation: igScrollFloat 7s ease-in-out infinite;
}

@media (max-width: 1100px) {
    .ig-hero-scroll {
        width: clamp(110px, 13vw, 140px);
        opacity: 0.55;
    }
}

@media (max-width: 900px) {
    .ig-hero-scroll {
        top: 6px;
        right: 4%;
        transform: none;
        width: 68px;
        height: 72px;
        opacity: 0.4;
        animation: none;
    }
}

@media (max-width: 480px) {
    .ig-hero-scroll {
        width: 52px;
        height: 56px;
        opacity: 0.3;
    }
}

/* ===================================
   ДОПОЛНЕНИЕ v10 — крупные hero-дудлы
   для courses.html и services.html
   =================================== */

:root {
    /* Крупный дудл: календарь с закладкой и звёздочкой (тема курсов/расписания) */
    --ig-calendar-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'%3E%3Crect x='20' y='30' width='130' height='120' rx='12' fill='white' stroke='%2325A9B8' stroke-width='4'/%3E%3Cline x1='20' y1='58' x2='150' y2='58' stroke='%2325A9B8' stroke-width='4'/%3E%3Cline x1='50' y1='16' x2='50' y2='42' stroke='%2325A9B8' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='120' y1='16' x2='120' y2='42' stroke='%2325A9B8' stroke-width='4' stroke-linecap='round'/%3E%3Ccircle cx='50' cy='78' r='6' fill='%2352CC9A'/%3E%3Ccircle cx='72' cy='78' r='6' fill='none' stroke='%2325A9B8' stroke-width='2.5' opacity='0.4'/%3E%3Ccircle cx='94' cy='78' r='6' fill='%23EE7A5D'/%3E%3Ccircle cx='116' cy='78' r='6' fill='none' stroke='%2325A9B8' stroke-width='2.5' opacity='0.4'/%3E%3Ccircle cx='50' cy='100' r='6' fill='none' stroke='%2325A9B8' stroke-width='2.5' opacity='0.4'/%3E%3Ccircle cx='72' cy='100' r='6' fill='%2352CC9A'/%3E%3Ccircle cx='94' cy='100' r='6' fill='none' stroke='%2325A9B8' stroke-width='2.5' opacity='0.4'/%3E%3Ccircle cx='116' cy='100' r='6' fill='none' stroke='%2325A9B8' stroke-width='2.5' opacity='0.4'/%3E%3Ccircle cx='50' cy='122' r='6' fill='none' stroke='%2325A9B8' stroke-width='2.5' opacity='0.4'/%3E%3Ccircle cx='72' cy='122' r='6' fill='none' stroke='%2325A9B8' stroke-width='2.5' opacity='0.4'/%3E%3Ccircle cx='94' cy='122' r='6' fill='none' stroke='%2325A9B8' stroke-width='2.5' opacity='0.4'/%3E%3Ccircle cx='116' cy='122' r='6' fill='%23EE7A5D'/%3E%3Cpath d='M150 60L172 60L172 92L160 84L150 92Z' fill='%23EE7A5D' opacity='0.9'/%3E%3Cpath d='M165 150L167.5 155.5L173.5 156.5L169 160.5L170 166.5L165 163.5L160 166.5L161 160.5L156.5 156.5L162.5 155.5Z' fill='%2352CC9A'/%3E%3C/svg%3E");

    /* Крупный дудл: набор инструментов реабилитации (пазл + сердце + звезда, тема услуг) */
    --ig-toolkit-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='195' height='185' viewBox='0 0 195 185'%3E%3Cpath d='M20 20H82C82 12 96 12 96 20H158V82C166 82 166 96 158 96V158H96C96 166 82 166 82 158H20V96C12 96 12 82 20 82Z' fill='none' stroke='%2325A9B8' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M89 60C89 60 79 52 79 44C79 39 84 36 88 40C90 42 91 45 91 45C91 45 92 42 94 40C98 36 103 39 103 44C103 52 89 60 89 60Z' fill='%23EE7A5D' opacity='0.85'/%3E%3Cpath d='M130 130L134 140L145 141L136 148L139 159L130 152L121 159L124 148L115 141L126 140Z' fill='%2352CC9A'/%3E%3Ccircle cx='45' cy='125' r='11' fill='none' stroke='%2352CC9A' stroke-width='3' opacity='0.6'/%3E%3Cpath d='M39 125L43 129L52 118' stroke='%2352CC9A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.6'/%3E%3C/svg%3E");
}

@keyframes igCalendarFloat {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50%      { transform: translateY(-9px) rotate(1deg); }
}

@keyframes igToolkitFloat {
    0%, 100% { transform: translateY(0) rotate(1deg); }
    50%      { transform: translateY(-8px) rotate(-1deg); }
}

/* ===================================
   30. КРУПНЫЙ ДЕКОР ДЛЯ HERO СТРАНИЦЫ КУРСОВ (courses.html)
   =================================== */
.ig-hero-calendar {
    position: absolute;
    top: 50%;
    right: 4%;
    transform: translateY(-50%);
    width: clamp(150px, 17vw, 190px);
    height: clamp(150px, 17vw, 190px);
    background: var(--ig-calendar-flag) no-repeat center / contain;
    opacity: 0.85;
    z-index: 0;
    pointer-events: none;
    animation: igCalendarFloat 7s ease-in-out infinite;
}

@media (max-width: 1100px) {
    .ig-hero-calendar {
        width: clamp(120px, 14vw, 150px);
        opacity: 0.65;
    }
}

@media (max-width: 900px) {
    .ig-hero-calendar {
        top: 6px;
        right: 4%;
        transform: none;
        width: 74px;
        height: 74px;
        opacity: 0.5;
        animation: none;
    }
}

@media (max-width: 480px) {
    .ig-hero-calendar {
        width: 56px;
        height: 56px;
        opacity: 0.4;
    }
}

/* ===================================
   31. КРУПНЫЙ ДЕКОР ДЛЯ HERO СТРАНИЦЫ УСЛУГ (services.html)
   =================================== */
.ig-hero-toolkit {
    position: absolute;
    top: 50%;
    right: 4%;
    transform: translateY(-50%);
    width: clamp(155px, 18vw, 195px);
    height: clamp(147px, 17vw, 185px);
    background: var(--ig-toolkit-heart) no-repeat center / contain;
    opacity: 0.8;
    z-index: 0;
    pointer-events: none;
    animation: igToolkitFloat 8s ease-in-out infinite;
}

@media (max-width: 1100px) {
    .ig-hero-toolkit {
        width: clamp(125px, 15vw, 155px);
        opacity: 0.6;
    }
}

@media (max-width: 900px) {
    .ig-hero-toolkit {
        top: 6px;
        right: 4%;
        transform: none;
        width: 76px;
        height: 72px;
        opacity: 0.45;
        animation: none;
    }
}

@media (max-width: 480px) {
    .ig-hero-toolkit {
        width: 58px;
        height: 55px;
        opacity: 0.35;
    }
}

/* ===================================
   ACCESSIBILITY / PRINT — доп. правила для новых дудлов
   =================================== */
@media (prefers-reduced-motion: reduce) {
    .ig-hero-calendar,
    .ig-hero-toolkit {
        animation: none;
    }
}

@media print {
    .ig-hero-calendar,
    .ig-hero-toolkit {
        display: none !important;
    }
}