/* Общие стили и сброс */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #4A4A4A;
    
    /* === ИЗМЕНЕНИЯ ЗДЕСЬ === */
    /* 1. Указываем путь к вашей сгенерированной картинке */
    background-image: url('https://25rom.github.io/texture-background.png'); 
    /* 2. Задаем базовый цвет фона, который будет виден, пока картинка грузится */
    background-color: #FFFBF5; 
    /* 3. Важное свойство, которое "прибивает" фон к окну браузера, чтобы он не прокручивался вместе с контентом */
    background-attachment: fixed;
    /* 4. Растягиваем картинку, чтобы она покрывала весь экран без искажений */
    background-size: cover;  /*cover
    
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

/* body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #4A4A4A; /* Основной цвет текста на странице */
   /* background: linear-gradient(135deg, #FFF0E0 0%, #FFFAF0 100%);
  /*  display: flex;
   /* flex-direction: column;
 /*   align-items: center;
  /*  min-height: 100vh;
  /*  padding: 20px; /* ЗАКОММЕНТИРОВАЛ ЧТОБЫ ИСПОЛЬЗОВАТЬ ТЕКСТУРУ
/* }

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Заголовок сайта и верхняя навигация */
.site-header {
    text-align: center;
    margin-bottom: 20px;
    width: 100%;
}

.top-nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.nav-group-left,
.nav-group-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-title { /* Родительский H1 */
    font-size: 2em;
    font-weight: 600;
    letter-spacing: 1px;
    font-family: 'Poppins', sans-serif;
    margin: 0 15px;
    flex-grow: 1;
    text-align: center;
    min-width: 200px;
}

.site-title-link {
    text-decoration: none;
    color: #A0522D;
    position: relative;
    display: inline-block;
    padding-bottom: 8px;
    transition: letter-spacing 0.3s ease-out, color 0.3s ease-out;
    cursor: pointer;
}

.site-title-link .title-separator {
    color: #BCAAA4;
    transition: color 0.3s ease-out;
}

.site-title-link::after {
    content: '';
    position: absolute;
    left: 10%;
    width: 80%;
    bottom: 0;
    height: 1.5px;
    background-color: #E67E22;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

.site-title-link:hover {
    letter-spacing: 1.8px;
    color: #E67E22;
}

.site-title-link:hover .title-separator {
    color: #FFB74D;
}

.site-title-link:hover::after {
    transform: scaleX(1);
}

.nav-button {
    background-color: #FFFFFF;
    color: #8D6E63;
    padding: 8px 18px;
    text-decoration: none;
    border-radius: 20px;
    font-weight: 500;
    font-size: 0.9em;
    transition: background-color 0.2s, transform 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    border: 1.5px solid #D7CCC8;
    white-space: nowrap;
}

.nav-button:hover {
    background-color: #F5F5F5;
    color: #795548;
    border-color: #BCAAA4;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.nav-button.active {
    background-color: #E0E0E0;
    color: #6D4C41;
    border: 1.5px solid #795548;
    box-shadow: 0 0 8px rgba(121, 85, 72, 0.2);
}

.tag-prompt {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 600;
    color: #E67E22;
    margin-bottom: 15px;
    text-align: left;
    padding-left: 10px;
    -webkit-text-stroke: 1px #8B4513;
    text-stroke: 1px #8B4513;
    paint-order: stroke fill;
    letter-spacing: 0.5px;
}

.tags-navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 15px;
    margin-bottom: 30px;
}

.tag {
    background-color: var(--tag-color, #E0E0E0);
    color: #fff;
    padding: 10px 20px;
    border: 3px solid transparent;
    border-radius: 25px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out, filter 0.2s ease-in-out, border-color 0.2s ease-in-out;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.tag:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.tag.active {
    border: 3px solid #FFFFFF;
    box-shadow: 0 0 10px var(--tag-color, #777), 0 0 5px rgba(0,0,0,0.3);
    filter: brightness(1.1);
    transform: scale(1.03);
}
.tag.reset-filter {
    background-color: #777;
    color: white;
    border-color: transparent;
}
.tag.reset-filter:hover {
     background-color: #555;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Контент с пранаямами (index.html) */
.pranayama-content h2 {
    text-align: center;
    font-size: 2em;
    color: #333;
    margin-bottom: 30px;
    font-weight: 400;
}

.pranayama-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Возвращаем auto-fill для правильной сетки */
    gap: 25px;
    justify-content: center; /* Центрируем группу карточек */
}

    /* =================================================================== */
/* === СТИЛИ ДЛЯ СЕКЦИИ "ТИПЫ ПРАКТИК" С ФОНОВЫМ ИЗОБРАЖЕНИЕМ === */
/* =================================================================== */

.pranayama-types-section {
    /* 1. Добавляем ваше фоновое изображение по прямой ссылке */
    background-image: url('https://25rom.github.io/texture-background01.jpeg');
    
    /* 2. Настраиваем его отображение */
    background-size: cover; /* Растягивает картинку, чтобы она полностью покрыла блок */
    background-position: center center; /* Центрирует картинку */
    
    /* 3. Добавляем отступы, скругление и тень для красоты */
    padding: 50px 20px; /* Вертикальные отступы 50px, горизонтальные 20px */
    border-radius: 15px; /* Скругляем углы всего блока */
    margin: 40px 0; /* Добавляем внешние отступы, чтобы отделить от других секций */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
}

/* --- Улучшаем читаемость заголовка на новом фоне --- */
.pranayama-types-section h2 {
    color: #333; /* Убеждаемся, что цвет контрастный */
    /* Добавляем легкую тень под текстом, чтобы он "отделился" от фона */
    text-shadow: 0px 1px 3px rgba(255, 255, 255, 0.6); 
    margin-bottom: 30px; /* Увеличиваем отступ до кнопок */
}

    
/* =================================================================== */
/* === ОБНОВЛЕННЫЕ СТИЛИ ДЛЯ КАРТОЧЕК ПРАНАЯМ С ФОНОВЫМ ИЗОБРАЖЕНИЕМ === */
/* =================================================================== */

.pranayama-block {
    /* --- ИЗМЕНЕНИЯ В ОСНОВНОМ БЛОКЕ --- */
    /* Убираем сплошной цвет фона */
    /* background-color: #ffffff; */ 

    /* 1. Добавляем ваше фоновое изображение по прямой ссылке */
    background-image: url('https://25rom.github.io/texture-background0.jpeg');
    
    /* 2. Настраиваем его отображение */
    background-size: cover; /* Растягивает картинку, чтобы она полностью покрыла блок */
    background-position: center center; /* Центрирует картинку */
    background-repeat: no-repeat; /* Запрещает повторение */
    
    /* 3. Остальные стили для позиционирования и анимации */
    border-radius: 12px;
    padding: 50px 20px 40px 20px;
    text-align: center;
    text-decoration: none;
    color: #333;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: top 0.3s ease-in-out, box-shadow 0.3s ease-in-out, opacity 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 170px;
    position: relative; /* Необходимо для работы псевдо-элемента и дочерних absolute-элементов */
    top: 0;
  /*  overflow: hidden; /* Скрывает все, что выходит за пределы скругленных углов (важно для ::before) */
    z-index: 1;
}

/* --- ДОБАВЛЕН ПСЕВДО-ЭЛЕМЕНТ ДЛЯ УЛУЧШЕНИЯ ЧИТАЕМОСТИ --- */
/* Этот слой находится между фоновой картинкой и текстом */
.pranayama-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Белый полупрозрачный слой. 0.7 - 70% непрозрачности. Можете поставить 0.8, если текст плохо видно. */
    background-color: rgba(255, 255, 255, 0.7); 
    z-index: -1; /* Помещаем этот слой ПОД текстом, но НАД фоновой картинкой */
    transition: background-color 0.3s ease; /* Плавный переход для hover-эффекта */
}

/* --- ЭФФЕКТ ПРИ НАВЕДЕНИИ --- */
.pranayama-block:hover {
    top: -5px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    z-index: 9999;
}

/* При наведении делаем белый слой чуть более прозрачным, чтобы картинка стала четче */
.pranayama-block:hover::before {
    background-color: rgba(255, 255, 255, 0.5);
}


/* --- ИСПРАВЛЕННЫЕ СТИЛИ ДЛЯ ВНУТРЕННЕГО КОНТЕНТА --- */
/* Убеждаемся, что весь текст и иконки находятся НАД фоном */

.pranayama-block h3 {
    font-size: 1.4em;
    font-weight: 500;
    margin: 0;
    position: relative; /* Добавляем, чтобы z-index сработал */
    z-index: 9999; /* Явно указываем, что заголовок находится выше фона */
}

.pranayama-top-info {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 9999; /* Этот z-index уже был, он достаточно высокий, все отлично */
}
.pranayama-class-label {
    padding: 4px 10px;
    font-size: 0.75em;
    font-weight: 600;
    color: white;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.label-basic { background-color: #808000; }
.label-balancing { background-color: #40E0D0; }
.label-activating { background-color: #FFA500; }
.label-calming { background-color: #B0C4DE; }

.level-indicator {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: default;
}
.level-icon { font-size: 1.2em; line-height: 1; }
.level-tooltip-text {
    visibility: hidden; opacity: 0; width: 260px; background-color: #444;
    color: #fff; text-align: left; border-radius: 6px; padding: 10px 15px;
    position: absolute; z-index: 9999;
    bottom: 140%; left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2); font-size: 0.8em; line-height: 1.5;
}
.level-tooltip-text strong { color: #FFD700; display: block; margin-bottom: 5px; }
.level-indicator:hover .level-tooltip-text { visibility: visible; opacity: 1; }

.tooltip-icon-container {
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
    z-index: 9999;
}
.tooltip-icon {
    display: inline-block; width: 22px; height: 22px; border-radius: 50%;
    background-color: #A0A0A0; color: white; text-align: center;
    line-height: 22px; font-size: 0.9em; font-weight: bold; transition: background-color 0.2s;
}
.tooltip-icon-container:hover .tooltip-icon { background-color: #777; }

.tooltip-text {
    visibility: hidden; opacity: 0;
    width: 280px; 
    background-color: #3f3f3f;
    color: #f0f0f0;
    text-align: left;
    border-radius: 8px;
    padding: 15px;
    position: absolute; z-index: 9999;
    bottom: 130%;
    right: 0;
    transition: opacity 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
                visibility 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
                transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    font-size: 0.7em; 
    line-height: 1.5; 
    transform: translateY(10px);
}

.tooltip-icon-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.tooltip-text strong {
    color: #FFC107;
    display: block;
    margin-bottom: 4px;
    font-size: 1.05em;
    border-bottom: 1px solid #555;
    padding-bottom: 6px;
}

.tooltip-text p {
    margin-bottom: 4px;
    /* white-space: nowrap;    // Убедись, что это закомментировано или удалено для переноса */
}
.tooltip-text p:last-child {
    margin-bottom: 0;
}

.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 15px;
    border-width: 7px;
    border-style: solid;
    border-color: #3f3f3f transparent transparent transparent;
}


.pranayama-block.filtered-out {
    opacity: 0.25;
    pointer-events: none;
    transform: scale(0.95) translateY(0);
}

.pranayama-duration {
    position: absolute;
    bottom: 15px;
    left: 15px;
    display: flex;
    align-items: center;
    font-size: 0.8em;
    color: #555;
    background-color: rgba(240, 240, 240, 0.9);
    padding: 5px 8px;
    border-radius: 6px;
    z-index: 5;
}

.duration-icon {
    margin-right: 6px;
    font-size: 1.1em;
    line-height: 1;
}
.duration-text {
    font-weight: 500;
}

/* Стили для контентных страниц (friends.html, projects.html, 101.html) */
.content-page {
    padding: 20px 0;
    flex-grow: 1;
}
.content-page h2 {
    text-align: center;
    font-size: 2.2em;
    color: #333;
    margin-bottom: 40px;
    font-weight: 500;
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.content-block {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 25px 20px;
    text-align: center;
    text-decoration: none;
    color: #333;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 120px;
}

.content-block:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.content-block h3 {
    font-size: 1.3em;
    font-weight: 500;
    margin: 0;
}

/* Кнопки контактов в футере */
.contact-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 15px;
}

.contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: white;
    text-decoration: none;
    transition: background-color 0.2s, transform 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.contact-button svg {
    width: 22px;
    height: 22px;
}

.contact-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.contact-telegram { background-color: #0088cc; }
.contact-telegram:hover { background-color: #0077b3; }
.contact-email { background-color: #c71610; }
.contact-email:hover { background-color: #b3120e; }

/* Подвал */
footer {
    text-align: center;
    margin-top: auto;
    padding: 30px 0 10px 0;
    color: #777;
    font-size: 0.9em;
    border-top: 1px solid #eee;
    width: 100%;
}

/* Адаптивность */
@media (max-width: 992px) {
    .site-title { font-size: 1.8em; }
    .nav-button { padding: 7px 15px; font-size: 0.85em; }
}

@media (max-width: 768px) {
    .top-nav-bar { flex-direction: column; gap: 15px; }
    .nav-group-left, .nav-group-right { width: 100%; justify-content: center; }
    .site-title { font-size: 1.9em; margin-bottom: 10px; order: -1; }
    .tag-prompt { text-align: center; margin-top: 10px; }
    .pranayama-content h2, .content-page h2 { font-size: 1.8em; }
    .pranayama-grid { /* На мобильных auto-fit может быть предпочтительнее, чтобы избежать пустого пространства справа, если последняя строка неполная */
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
        gap: 20px;
        /* justify-content: center; -- Для auto-fit обычно не так критично, как для auto-fill */
    }
    .content-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
    .tooltip-text { width: calc(100vw - 60px) !important; max-width: 300px !important; }
}
/* Стили для иконки чакры (глаз) и ее тултипа */
/* ================================================================ */
/* ИСПРАВЛЕННЫЕ И АДАПТИРОВАННЫЕ СТИЛИ ДЛЯ ТУЛТИПА ЧАКРЫ (👁)   */
/* ================================================================ */

.chakra-info-container {
    position: absolute;
    bottom: 15px;      
    right: 15px;       
    z-index: 9999; /* Чуть выше, чем другие элементы карточки, но ниже тултипа */
    cursor: default; 
}

.chakra-eye-icon {
    display: inline-block;
    font-size: 1.6em; /* Размер иконки "глаз", можно настроить */
    line-height: 1;
    color: #757575; /* Цвет иконки "глаз", можно настроить */
    transition: transform 0.2s ease-out, color 0.2s ease-out;
}

.chakra-info-container:hover .chakra-eye-icon {
    transform: scale(1.15);
    color: #333;
}

.chakra-tooltip-text {
    /* --- ИСХОДНОЕ СОСТОЯНИЕ: СКРЫТ --- */
    visibility: hidden; 
    opacity: 0;
    
    /* --- ВНЕШНИЙ ВИД (как у .tooltip-text) --- */
    width: auto; /* Автоматическая ширина по содержимому */
    min-width: 160px; /* Минимальная ширина для читаемости */
    max-width: 280px; /* Максимальная ширина, как у эталона */
    background-color: #3f3f3f;
    color: #f0f0f0;
    text-align: left;
    border-radius: 8px;
    padding: 10px 15px; /* Внутренние отступы, как у эталона (или чуть меньше, например 10px 12px) */
    box-shadow: 0 5px 15px rgba(0,0,0,0.25); /* Тень */
    font-size: 0.8em;  /* Размер шрифта, можно немного увеличить до 0.85em, если нужно */
    line-height: 1.5;  /* Межстрочный интервал */
    white-space: normal; /* Для переноса строк */

    /* --- ПОЗИЦИОНИРОВАНИЕ (ВАЖНО!) --- */
    position: absolute; 
    z-index: 9999;       /* Выше чем иконка и другие элементы */
    bottom: 115%;      /* Расположение НАД родительским .chakra-info-(т.е. над иконкой "👁") 
                           Подбирай значение (110%-130%), чтобы было комфортно и стрелочка смотрела куда надо */
    right: -5px;       /* Сдвигаем немного вправо относительно правого края иконки, чтобы выровнять по аналогии с .tooltip-text (который right:0 от своего контейнера)
                           Можешь экспериментировать с этим значением (0, -5px, 5px) */
    
    /* --- АНИМАЦИЯ (как у .tooltip-text) --- */
    transform: translateY(10px); /* Начальное смещение вниз для анимации "вылета" */
    transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                visibility 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), /* Немного короче, чтобы быстрее скрывался */
                transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none; /* Чтобы не мешал событиям мыши */
}

.chakra-info-container:hover .chakra-tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateY(0); /* Возвращаем на место при наведении */
}

.chakra-tooltip-text strong { /* Для заголовка "☸ ЧАКРА:" */
    color: #FFD700; /* Желтый цвет, как у эталона */
    display: block;
    font-size: 1.05em; /* Размер шрифта заголовка */
    
    /* --- ЛИНИЯ-РАЗДЕЛИТЕЛЬ И ОТСТУПЫ (как у .tooltip-text strong) --- */
    border-bottom: 1px solid #555; /* Линия-разделитель */
    margin-bottom: 4px;   /* Отступ ПОД текстом заголовка ДО линии */
    padding-bottom: 6px;  /* Отступ ПОД линией ДО первого названия чакры */
}
/* ЭТУ ШТУКУ ВСТАВИЛ
.tooltip-text p {
    margin-bottom: 4px;
    /* white-space: nowrap;    // Убедись, что это закомментировано или удалено для переноса */
}
.tooltip-text p:last-child {
    margin-bottom: 0;
}
/* ЭТУ ШТУКУ ВСТАВИЛ
/* --- СТРЕЛОЧКА (как у .tooltip-text::after, но центрируем) --- */
.chakra-tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%; /* Снизу тултипа */
    /* Центрируем стрелку относительно тултипа */
    left: 50%; 
    transform: translateX(-50%); 
    /* Если тултип выравнивается по правому краю иконки, 
       то стрелку можно привязать к правому краю, как у эталона:
       right: 15px; (убери left и transform) - НО ДЛЯ НАШЕГО СЛУЧАЯ ЦЕНТР ЛУЧШЕ */

    border-width: 7px;
    border-style: solid;
    border-color: #3f3f3f transparent transparent transparent; /* Треугольник, указывающий вниз (к иконке) */
}

/* Стиль для названий чакр - НЕБЕСНО-ГОЛУБОЙ ТЕПЛОГО ОТТЕНКА */
.chakra-tooltip-text span[style*="color"] { /* Применяем к спанам с инлайн-стилем цвета, если он там остался */
  /*  color: #87CEEB !important; /* Небесно-голубой. '!important' на всякий случай, если инлайн-стиль будет мешать */
}
/* Если инлайн-стилей цвета в HTML для чакр уже нет, а есть класс .chakra-name, то: */
/*
.chakra-tooltip-text .chakra-name {
    color: #87CEEB; // SkyBlue
    // Или более теплый оттенок:
    // color: #ADD8E6; // LightBlue
    // color: #B0E0E6; // PowderBlue
}
*/

@media (max-width: 480px) {
    body { padding: 10px; }
    .site-title { font-size: 1.5em; }
    .nav-button { padding: 6px 12px; font-size: 0.8em; }
    .nav-group-left, .nav-group-right { flex-wrap: wrap; gap: 8px; }
    .tag-prompt { font-size: 1em; }
    .tag { padding: 7px 12px; font-size: 0.8em; }
    .pranayama-block, .content-block { min-height: 100px; }
    .pranayama-block h3, .content-block h3 { font-size: 1.1em; }
    .pranayama-top-info { top: 10px; left: 10px; gap: 6px;}
    .tooltip-icon-{ top: 10px; right: 10px; }
    .tooltip-text, .level-tooltip-text { width: calc(100vw - 40px) !important; max-width: 250px !important; }
    .pranayama-duration { bottom: 10px; left: 10px; font-size: 0.75em; }
}

/* --- Базовый слой для ВСЕХ карточек --- */
.pranayama-block {
    position: relative; /* Обязательно, чтобы z-index сработал */
    z-index: 1;         /* Начальный слой для всех карточек */
}

/* =================================================================== */
/* ===       ИНФОГРАФИКА С СИЛУЭТОМ (ИСПРАВЛЕННЫЕ ТУЛТИПЫ)        === */
/* =================================================================== */

.silhouette-infographic-section {
    text-align: center;
    padding: 60px 20px;
    margin-top: 40px;
}

.infographic-container {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
    opacity: 0.85;
    background-image: url('pranayama-infographic.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    aspect-ratio: 1 / 1;
}

.interactive-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 20; /* Поднимаем маркеры выше */
}

.interactive-marker:hover {
    z-index: 20; /* При наведении маркер становится еще выше */
}

.marker-dot {
    width: 20px;
    height: 20px;
    background-color: rgba(255, 122, 89, 0.7);
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 0 5px rgba(255, 122, 89, 0.3);
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* ОБЩИЕ СТИЛИ ДЛЯ ТУЛТИПА */
.tooltip-content {
    position: absolute;
    width: 260px;
    padding: 18px;
    border-radius: 12px;
    text-align: left;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none; /* Важно, чтобы не мешать другим :hover */
}

/* СТРЕЛОЧКА */
.tooltip-content::after {
    content: '';
    position: absolute;
    border-width: 8px;
    border-style: solid;
}

/* Модификатор: открывается ВПРАВО */
.tooltip-opens-right .tooltip-content {
    top: 50%;
    left: 140%;
    transform: translate(10px, -50%);
}
.tooltip-opens-right .tooltip-content::after {
    top: 50%; right: 100%;
    transform: translateY(-50%);
    border-color: transparent rgba(255, 255, 255, 0.85) transparent transparent;
}

/* Модификатор: открывается ВЛЕВО */
.tooltip-opens-left .tooltip-content {
    top: 50%;
    right: 140%;
    transform: translate(-10px, -50%);
}
.tooltip-opens-left .tooltip-content::after {
    top: 50%; left: 100%;
    transform: translateY(-50%);
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.85);
}

/* Текст внутри тултипа */
.tooltip-content h4 {
    margin-top: 0; margin-bottom: 10px; padding-bottom: 8px;
    color: #2c2c2c;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.tooltip-content p {
    font-size: 0.95rem;
    color: #3f3f3f;
    line-height: 1.5;
    margin: 0;
    white-space: normal;
}

/* Показываем тултип при наведении на маркер */
.interactive-marker:hover .tooltip-content {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
    pointer-events: auto;
}

/* =================================================================== */
/* === ФИНАЛЬНЫЙ ИСПРАВЛЕННЫЙ CSS ДЛЯ ИНФОГРАФИКИ (v3) === */
/* =================================================================== */

/* --- Стили для секции с инфографикой --- */
.silhouette-infographic-section {
    text-align: center;
    padding: 0 20px 60px 20px; 
    margin-top: 20px; 
}

.infographic-{
    position: relative;
    max-width: 500px;
    margin: 0 auto;
    opacity: 0.85;
    background-image: url('pranayama-infographic.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    aspect-ratio: 1 / 1;
}

.interactive-marker {
    position: absolute;
    transform: translate(-50%, -50%);
}

.marker-dot {
    width: 20px;
    height: 20px;
    background-color: rgba(255, 122, 89, 0.7);
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 0 5px rgba(255, 122, 89, 0.3);
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* --- ОБЩИЕ стили для всех тултипов (ФИНАЛЬНЫЙ ДИЗАЙН) --- */
.tooltip-content {
    position: absolute;
    
    /* ФИКС ЧИТАЕМОСТИ И ДИЗАЙНА */
    background-color: rgba(255, 255, 255, 0.75); /* Полупрозрачный фон */
    backdrop-filter: blur(8px);                  /* Эффект "матового стекла" */
    -webkit-backdrop-filter: blur(8px);
    
    /* РАМКА И СВЕЧЕНИЕ (как у активного тега) */
    border: 2px solid #FFFFFF;                  
    box-shadow: 0 0 12px rgba(100, 150, 200, 0.3), 0 4px 10px rgba(0,0,0,0.1);
    
    /* ФИКС ШИРИНЫ */
    width: 260px; /* Задаем комфортную ширину по умолчанию */
    
    padding: 18px;
    border-radius: 12px;
    text-align: left;
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* --- СТРЕЛОЧКА-УКАЗАТЕЛЬ --- */
.tooltip-content::after {
    content: '';
    position: absolute;
    border-width: 8px;
    border-style: solid;
}

/* --- Модификатор: открывается ВПРАВО --- */
.tooltip-opens-right .tooltip-content {
    top: 50%;
    left: 140%;
    transform: translate(10px, -50%);
}
.tooltip-opens-right .tooltip-content::after {
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    border-color: transparent white transparent transparent; /* Сделали стрелку непрозрачной */
}

/* --- Модификатор: открывается ВЛЕВО --- */
.tooltip-opens-left .tooltip-content {
    top: 50%;
    right: 140%;
    left: auto;
    transform: translate(-10px, -50%);
}
.tooltip-opens-left .tooltip-content::after {
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border-color: transparent transparent transparent white; /* Сделали стрелку непрозрачной */
}

/* --- Стили для текста внутри тултипа --- */
.tooltip-content h4 {
    margin-top: 0;
    margin-bottom: 8px;
    color: #2c2c2c;
    font-weight: 600;
    text-align: center; /* <<< ВОТ ЭТО ИЗМЕНЕНИЕ */
    border-bottom: 1px solid rgba(0,0,0,0.08); /* Добавим легкий разделитель */
    padding-bottom: 8px;  /* <<< ВОТ ЭТО ИЗМЕНЕНИЕ */
}
.tooltip-content p {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.95rem; /* Немного увеличим текст для читаемости */
    color: #3f3f3f;
    line-height: 1.5;
    margin: 0;
    white-space: normal; /* Разрешаем перенос текста */
}

/* --- Эффект при наведении --- */
/* --- Эффект при наведении (для десктопа) --- */
.interactive-marker:hover .marker-dot {
    transform: scale(1.1);
}
.interactive-marker:hover .tooltip-content {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
}

/* !!! НОВОЕ ПРАВИЛО ДЛЯ КЛИКА (для мобильных) !!! */
.interactive-marker.is-active .tooltip-content {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
}

/* =================================================================== */
/* === СТИЛИ ДЛЯ ИНТЕРАКТИВНОГО ЗАГОЛОВКА (остаются без изменений) === */
/* =================================================================== */

.hero-text-{
    text-align: center;
    padding: 40px 20px 20px 20px;
}

.typing-headline-multiline {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    min-height: 120px; 
}

.headline-static-part {
    font-size: 1.8rem;
    font-weight: 300;
    color: #8D6E63;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 15px;
}

.typing-effect {
    font-size: 2.8rem;
    font-weight: 500;
    text-transform: uppercase;
    position: relative;
    color: #F2C94C;
}

.typing-effect::after {
    content: '|';
    position: absolute;
    right: -15px;
    top: -5px;
    font-weight: 300;
    font-size: 2.8rem;
    color: #888;
    animation: blink 0.7s infinite;
}

@keyframes blink {
    0% { opacity: 1; }
    49% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 0; }
}

/* ======================= КОНЕЦ БЛОКА СТИЛЕЙ ======================= */

/* =================================================================== */
/* === СТИЛИ ДЛЯ БЛОКА "ТИПЫ ПРАНАЯМ" === */
/* =================================================================== */

/* =================================================================== */
/* === СТИЛИ ДЛЯ БЛОКА "4 ТИПА ПРАКТИК" (ФИНАЛЬНАЯ ВЕРСИЯ) === */
/* =================================================================== */

.pranayama-types-section {
    padding: 20px 20px;
    text-align: center;
    background-color: #FFFBF5;
    border-radius: 20px;
    margin: 20px 0 0 0; /* Убираем нижний отступ, чтобы блок был ближе к тегам */
}

.pranayama-types-section h2 {
    font-size: 2.2rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 40px;
}

.types-grid-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* ИЗМЕНЕНИЕ: Уменьшаем высоту блоков, как вы и хотели */
    grid-template-rows: repeat(2, 112px); 
    gap: 22px;
    max-width: 900px;
    margin: 0 auto;
}

/* Стили для ссылок-карточек */
.type-card {
    text-decoration: none;
    color: white;
    position: relative;
    border-radius: 25px;
    overflow: hidden;
    padding: 20px;
    /* ИЗМЕНЕНИЕ: Заголовок теперь будет по центру карточки */
    display: flex;
    justify-content: center; 
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.type-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* === НОВЫЙ ЭФФЕКТ ПОЯВЛЕНИЯ ОПИСАНИЯ === */
/* Описание будет появляться поверх, а не сдвигать текст */
.type-card .type-description {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.55); /* Полупрозрачное затемнение */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    opacity: 0; /* Скрыто по умолчанию */
    transition: opacity 0.3s ease-in-out;
}

.type-card:hover .type-description {
    opacity: 1; /* Появляется при наведении */
}

.type-description p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
    color: white; /* Текст на затемненном фоне будет белым */
}

/* Задаем цвета для каждого типа */
.type-card.basic { background-color: #808000; }
.type-card.activating { background-color: #FFC107; }
.type-card.balancing { background-color: #40E0D0; }
.type-card.calming { background-color: #B0C4DE; }

.type-card h3 {
    /* ИЗМЕНЕНИЕ: Уменьшаем шрифт, чтобы он помещался в новый размер блока */
    font-size: 1.4rem; 
    font-weight: 600;
    margin: 0;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    /* Добавляем плавность для исчезновения заголовка */
    transition: opacity 0.3s ease-in-out;
}

/* ИЗМЕНЕНИЕ: При наведении заголовок будет исчезать, уступая место описанию */
.type-card:hover h3 {
    opacity: 0;
}


/* === НОВЫЙ БЛОК: СТИЛИ ДЛЯ ЗАГОЛОВКА ПЕРЕД ТЕГАМИ === */
/* Этот код нужно будет добавить, если его еще нет */
/* === НОВЫЙ ДИЗАЙН ДЛЯ ЗАГОЛОВКА ПЕРЕД ТЕГАМИ === */
.tags-prompt-headline {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 500; /* Сделаем чуть жирнее */
    color: #4A4A4A;
    margin: 60px auto 40px auto; /* Увеличим отступы */
    
    /* Превращаем в "карточку" */
    display: inline-block; /* Чтобы фон облегал текст */
    background-color: rgba(255, 255, 255, 0.7);
    padding: 15px 30px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Добавляем иконку перед текстом */
.tags-prompt-headline::before {
    content: '✨'; /* Можете выбрать любой другой смайлик */
    margin-right: 12px;
    font-size: 1.2em;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .types-grid-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 15px;
    }
    .type-card {
        /* Высота для мобильных, чтобы было удобно нажимать */
        min-height: 100px; 
    }
}
/* =================================================================== */
/* === СТИЛИ ДЛЯ БЛОКА 1: "БЫСТРЫЕ ВЫГОДЫ" === */
/* =================================================================== */

.quick-benefits-section {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 30px;
    padding: 40px 20px;
    max-width: 900px;
    margin: 0 auto; /* Центрируем весь блок */
    border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* Легкий разделитель снизу */
}

.benefit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 200px; /* Задаем ширину для каждого элемента */
}

.benefit-icon {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 15px;
    background-color: #fffaf0; /* Легкий фон, чтобы выделить */
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
}

.benefit-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: #4A4A4A;
}

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

.product-intro-section {
    max-width: 800px;
    margin: 0 auto 40px auto; /* Добавляем отступ снизу */
    padding: 40px; /* Увеличиваем внутренние отступы */
    text-align: center;

    /* === НОВЫЙ ДИЗАЙН "КАРТОЧКИ" === */
    background-color: rgba(255, 255, 255, 0.5); /* Полупрозрачный фон */
    border-radius: 20px; /* Скругляем углы */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1); /* Мягкая тень */
    backdrop-filter: blur(10px); /* Эффект "матового стекла" */
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18); /* Едва заметная рамка */
}

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

.product-intro-section {
    max-width: 800px;
    margin: 60px auto 40px auto;
    padding: 40px;
    text-align: center;
    position: relative; /* Необходимо для позиционирования псевдо-элементов, если понадобятся */
    overflow: hidden; /* Скрываем все, что выходит за рамки */

    /* === ДИЗАЙН "ПРОЗРАЧНОЙ КАРТОЧКИ" === */
    background-color: rgba(255, 255, 255, 0.7); /* Основной полупрозрачный фон */
    border-radius: 20px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.07); 
    border: 1px solid rgba(255, 255, 255, 0.18); 
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    
    /* === ДОБАВЛЕНИЕ ПАТТЕРНА === */
    /* 1. Встраиваем SVG с волной как фоновое изображение */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cpath d='M 0 20 Q 20 0, 40 20 T 80 20' stroke='%23000000' stroke-width='1' fill='none' stroke-opacity='0.1'/%3E%3C/svg%3E");
    
    /* 2. Смешиваем паттерн с фоном, чтобы он стал едва заметным */
    background-blend-mode: overlay;
}

/* Стили для заголовка, текста и фактов остаются без изменений */
.product-intro-section h2 {
    font-size: 2.4rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 25px;
    line-height: 1.3;
}
.intro-text {
    font-size: 1.1rem;
    color: #444;
    line-height: 1.7;
    margin-bottom: 40px;
}
.key-facts-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px 30px; 
}
.fact-item {
    font-size: 1rem;
    font-weight: 500;
    color: #3A3A3A;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 10px 20px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
}
/* =================================================================== */
/* === ФИНАЛЬНЫЕ ДИЗАЙНЕРСКИЕ УЛУЧШЕНИЯ === */
/* =================================================================== */

/* 1. Улучшенный дизайн для блока "4 Типа Практик" */
.pranayama-types-section {
    border-top: 1px solid rgba(0, 0, 0, 0.08); /* Добавляем разделитель сверху */
    padding-top: 60px;
}
.type-card:hover {
    transform: translateY(-8px) scale(1.03); /* Усиливаем анимацию */
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12); /* Делаем тень глубже */
}


/* 2. Стили для раскрывающегося блока "Что такое Пранаяма?" */
.pranayama-explainer-section {
    max-width: 800px;
    margin: 0 auto 40px auto;
    padding: 40px 20px;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.08); /* Разделитель сверху */
}

.explainer-toggle {
    font-size: 1.4rem;
    font-weight: 500;
    color: #4A4A4A;
    cursor: pointer;
    display: inline-block;
    padding: 15px 30px;
    border: 1.5px solid #D7CCC8;
    border-radius: 25px;
    transition: all 0.3s ease;
}

.explainer-toggle:hover {
    background-color: #fff;
    border-color: #8D6E63;
    color: #333;
}

.explainer-toggle .arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}

.explainer-toggle.active .arrow {
    transform: rotate(180deg);
}

.explainer-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, margin-top 0.5s ease-in-out;
    text-align: left;
    color: #555;
    line-height: 1.7;
    font-size: 1.05rem;
}

.explainer-content p {
    margin-bottom: 15px;
}
.explainer-content p:last-child {
    margin-bottom: 0;
}
/* =================================================================== */
/* === СТИЛИ ДЛЯ ВОЛНИСТОГО ПОДЧЕРКИВАНИЯ === */
/* =================================================================== */

/* --- Общий стиль для всех выделенных слов --- */
.highlight-wavy {
    position: relative; /* Необходимо для позиционирования, если понадобится */
    background-repeat: repeat-x; /* Повторяем волну по горизонтали */
    background-position: bottom; /* Располагаем линию внизу */
    background-size: 20px 8px; /* Размер одного "звена" волны: ширина 20px, высота 8px */
    padding-bottom: 5px; /* Добавляем отступ снизу, чтобы линия не прилипала к тексту */
    
    /* Маленький трюк, чтобы линия не проходила сквозь буквы, а была под ними.
       Цвет тени должен совпадать с цветом фона вашей карточки. */
    text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.5), 
                 -2px 2px 0px rgba(255, 255, 255, 0.5), 
                 2px -2px 0px rgba(255, 255, 255, 0.5), 
                 -2px -2px 0px rgba(255, 255, 255, 0.5);
}

/* --- Цвет и волна для СИНЕГО текста --- */
.highlight-wavy.color-blue {
    color: #5B86E5; /* Цвет текста */
    /* Встроенная SVG-картинка с волной синего цвета */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='8'%3E%3Cpath d='M 0 5 Q 5 0, 10 5 T 20 5' stroke='%235B86E5' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}

/* --- Цвет и волна для ОРАНЖЕВОГО текста --- */
.highlight-wavy.color-orange {
    color: #f7b733; /* Цвет текста */
    /* Встроенная SVG-картинка с волной оранжевого цвета */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='8'%3E%3Cpath d='M 0 5 Q 5 0, 10 5 T 20 5' stroke='%23f7b733' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}

/* =================================================================== */
/* ===         СТИЛИ ДЛЯ СТРАНИЦЫ ПАРТНЕРОВ (НОВЫЙ ДИЗАЙН)         === */
/* =================================================================== */

.partners-page-section {
    padding: 40px 0;
    max-width: 1100px; /* Ограничиваем ширину, чтобы не прилипало к краям */
    margin: 0 auto; /* Центрируем всю секцию */
}

.partners-page-section h1 {
    font-size: 2.8rem; /* Увеличим заголовок */
    text-align: center;
    margin-bottom: 10px;
    font-weight: 600;
}

.category-description {
    font-size: 1.1rem;
    text-align: center;
    color: #777;
    margin-bottom: 60px; /* Увеличиваем отступ до карточек */
}

/* Сетка для карточек */
.partner-grid {
    display: grid;
    /* Адаптивная сетка: 5 колонок в зависимости от ширины экрана */

    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 35px; /* Увеличиваем расстояние между карточками */
    align-items: start; 
       /* grid-template-columns: repeat(5, 1fr);    gap: 20px;  
}

/* === СТИЛИ САМОЙ КАРТОЧКИ (ЭФФЕКТ "МАТОВОГО СТЕКЛА") === */
.partner-card {
    /* 1. Фон */
    background-color: rgba(255, 255, 255, 0.0); /* Полупрозрачный белый */
    backdrop-filter: blur(12px); /* Эффект размытия фона */
    -webkit-backdrop-filter: blur(12px);
    
    /* 2. Внешний вид */
    border-radius: 16px; /* Более плавное скругление */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Едва заметная рамка */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    
    /* 3. Прочее */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.partner-card:hover {
    transform: translateY(-10px); /* Приподнимаем карточку при наведении */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.partner-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.partner-info {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.partner-info h3 {
    font-size: 1.5rem; /* Увеличиваем имя для акцента */
    margin-bottom: 15px;
    font-weight: 600;
    color: #333;
}

/* Контейнер для описания - ключевой элемент для "разворачивания" */
.partner-description {
    max-height: 4.8em; /* Видимы примерно 3 строки текста */
    overflow: hidden;
    position: relative;
    transition: max-height 0.5s ease-in-out;
}
.partner-description p {
    margin: 0;
    color: #555;
    line-height: 1.7; /* Увеличиваем межстрочный интервал */
}

/* Когда у карточки появляется класс .is-expanded, описание "разворачивается" */
.partner-card.is-expanded .partner-description {
    max-height: 500px; /* Большая высота, чтобы влез любой текст */
}

}
    /* =================================================================== */
/* ===         СТИЛИ ДЛЯ КНОПОК В КАРТОЧКЕ (ИСПРАВЛЕННЫЕ)          === */
/* =================================================================== */
    
/* Блок с кнопками */
/* =================================================================== */
/* ===         СТИЛИ ДЛЯ КНОПОК В КАРТОЧКЕ (ФИНАЛЬНАЯ ВЕРСИЯ)       === */
/* =================================================================== */

/* Блок с кнопками */
.partner-actions {
    /* ИСПРАВЛЕНИЕ №1: Увеличиваем отступ, чтобы "отлепить" кнопки от текста */
    margin-top: auto;
    padding-top: 25px; 
    
    display: flex;
    justify-content: flex-end; /* Прижимаем кнопки к правому краю */
    align-items: center;
    gap: 10px;
}

/* Кнопка "Читать далее" (Второстепенная) */
.expand-btn {
    background-color: transparent;
    border: 1.5px solid #d1d1d1;
    color: #818181;
    border-radius: 20px;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    transition: all 0.2s;

    /* ИСПРАВЛЕНИЕ №2: Делаем кнопки меньше и аккуратнее */
    padding: 6px 16px;
    font-size: 0.9em;
    font-weight: 500;
}

.expand-btn:hover {
    background-color: #f5f5f5;
    border-color: #b9b9b9;
}

/* Кнопка "Перейти на сайт" (Основная) */
.partner-link {
    /* Цвета, как вы и хотели */
    background-color: #795548; /* Темнее по умолчанию */
    color: white;
    
    text-decoration: none;
    border-radius: 20px;
    text-align: center;
    transition: all 0.2s;
    border: 1.5px solid transparent;
    white-space: nowrap;

    /* ИСПРАВЛЕНИЕ №2: Делаем кнопки меньше и аккуратнее */
    padding: 6px 16px;
    font-size: 0.9em;
    font-weight: 500;
}

.partner-link:hover {
    background-color: #8D6E63; /* Светлее при наведении */
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* --- ОБЩИЕ СТИЛИ И ПЕРЕМЕННЫЕ --- */
:root {
    /* Цвета из ваших скриншотов */
    --color-base: #8E8A3D;
    --color-activating: #FFB74D;
    --color-balancing: #4DD0E1;
    --color-calming: #AAB7D1;
    
    --bg-page: #F8F5F2; /* Общий фон страниц, как в прошлых примерах */
    --bg-card: #FFFFFF;
    --text-primary: #3D352F;
    --text-secondary: #6e665f;
    --border-color: #EAE0D5;
}

body {
    background-color: var(--bg-page);
    color: var(--text-primary);
    font-family: 'Nunito', sans-serif;
    margin: 0;
    padding: 2rem 1.5rem;
    line-height: 1.6;
}

main {
    max-width: 1200px;
    margin: 2rem auto;
}

/* --- Стили для заголовка страницы --- */
.page-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem); /* Адаптивный размер шрифта */
    text-align: center;
    margin-bottom: 3rem;
    font-weight: 700;
}

/* --- Темизация заголовков в зависимости от класса на body --- */
.theme-base .page-title { color: var(--color-base); }
.theme-activating .page-title { color: var(--color-activating); }
.theme-balancing .page-title { color: var(--color-balancing); }
.theme-calming .page-title { color: var(--color-calming); }

/* --- Сетка для карточек --- */
.practice-grid {
    display: grid;
    /* Адаптивная сетка: от 1 до 3 колонок в зависимости от ширины экрана */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

/* --- Стиль карточки практики --- */
.practice-card {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-card);
    border-radius: 20px;
    padding: 2rem;
    text-decoration: none; /* Убираем подчеркивание у ссылки */
    color: inherit;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Эффект "приподнимания" при наведении */
.practice-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}

.practice-card h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
    line-height: 1.4;
}

.practice-card hr {
    width: 100%;
    border: 0;
    height: 2px;
    margin: 1.5rem 0;
}

/* Темизация разделителя */
.theme-base .practice-card hr { background-color: var(--color-base); }
.theme-activating .practice-card hr { background-color: var(--color-activating); }
.theme-balancing .practice-card hr { background-color: var(--color-balancing); }
.theme-calming .practice-card hr { background-color: var(--color-calming); }


.practice-card p {
    margin: 0;
    font-size: 1rem;
    color: var(--text-secondary);
    flex-grow: 1; /* Чтобы карточки одной высоты имели текст внизу */
}

/* ============================================= */
/* ==   Стили для двухстрочных заголовков     == */
/* ============================================= */

/* Убираем лишний отступ у h3, если он появится из-за <br> */
.practice-card h3 {
    line-height: 1.3;
}

/* Стиль для основного названия (первая строка) */
.practice-card .practice-name {
    /* Наследует основной размер и жирность от h3, можно ничего не менять */
}

/* Стиль для перевода (вторая, маленькая строка) */
.practice-card .practice-translation {
    display: inline-block; /* Чтобы сработал margin-top */
    font-size: 1.1rem; /* Делаем шрифт заметно меньше (основной 1.5rem) */
    font-weight: 400;  /* Делаем шрифт нежирным (обычным) */
    color: var(--text-secondary); /* Используем цвет второстепенного текста, как у описания */
    margin-top: 0.3rem; /* Небольшой отступ от верхней строки */
}

/*СТИЛИ ДЛЯ КАРТОЧЕК С ПОЛЬЗАМИ */
        /* --- Общие стили и переменные --- */
        :root {
            --bg-color: #F8F5F2; /* Более мягкий бежевый */
            --text-color: #3D352F;
            --card-bg: #FFFFFF;
            --accent-color: #6A994E; /* Спокойный зеленый, как на скетче */
            --secondary-text: #6e665f;
            --border-color: #EAE0D5;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: 'Nunito', sans-serif;
            margin: 0;
            padding: 2rem 1.5rem;
            line-height: 1.6;
        }

        main {
            max-width: 1200px; /* Увеличил ширину для сетки из 4 элементов */
            margin: 0 auto;
        }

        h1, h2, h3 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            text-align: center;
        }

        section {
            margin-bottom: 4rem;
        }

        /* --- БЛОК 1: "ЯКОРЬ" (Заголовок и видео) --- */
        .hero-section h1 {
            font-size: 3rem;
            margin-bottom: 0.5rem;
        }

        .hero-section .subtitle {
            font-size: 1.25rem;
            color: var(--secondary-text);
            text-align: center;
            margin-bottom: 2rem;
            font-family: 'Nunito', sans-serif;
            font-weight: 600;
        }

        .video-container {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%; /* Соотношение сторон 16:9 */
            height: 0;
            overflow: hidden;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        /* --- БЛОК 2: "ИЗМЕНЕНИЯ" (Статичные карточки) --- */
        .changes-section h2 {
            font-size: 2.25rem;
            margin-bottom: 2rem;
        }
        
        .changes-grid {
            display: grid;
            /* Ключевой стиль: 4 колонки с автоматической подстройкой ширины */
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
        }

        .change-card {
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 16px; /* Как на скетче  бля 1.5 рем */
            padding: 1.2rem;   
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .change-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
        }

        .change-card h3 {
            font-size: 1rem; /* был 1 Подобран размер для самого длинного заголовка */
            min-height: 3.3em; /* был 3.5 Резервируем место, чтобы карточки не "прыгали" по высоте */
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
        }

        .change-card hr {
            width: 80%;
            border: 0;
            border-top: 1px solid var(--border-color);
            margin: 1rem auto;
        }

        .change-card p {
            font-size: 0.9rem;
            color: var(--secondary-text);
            margin: 0;
            flex-grow: 1; /* Описание занимает оставшееся место */
        }

        /* --- БЛОК 3: "ПОЛЬЗА" (Аккордеоны в сетке) --- */
        .benefits-section h2 {
            font-size: 2.25rem;
            margin-bottom: 2rem;
        }

        .benefits-grid {
    display: grid;
    /* ЗАМЕНЯЕМ СЕТКУ НА ОДНУ КОЛОНКУ */
    grid-template-columns: 1fr;
    gap: 1rem;
}

        .accordion-item .accordion-toggle {
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 50px; /* Стиль плашки */
            padding: 1rem 1.5rem;
            font-weight: 600;
            font-family: 'Nunito', sans-serif;
            font-size: 1rem; /* Подобран размер для длинного заголовка */
            color: var(--text-color);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            cursor: pointer;
            width: 100%;
            text-align: center;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .accordion-item .icon {
            font-size: 1.5rem;
            color: var(--accent-color);
            transition: transform 0.3s ease;
            margin-left: 1rem;
        }

        .accordion-item.active .icon {
            transform: rotate(135deg); /* Превращаем точку в крестик для наглядности */
        }
        
        .accordion-item.active .accordion-toggle {
             border-bottom-left-radius: 16px; /* Спрямляем углы при раскрытии */
             border-bottom-right-radius: 16px;
             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
        }

        .accordion-content {
            max-height: 0; /* Контент скрыт по умолчанию */
            overflow: hidden;
            transition: max-height 0.4s ease-out;
            background: transparent; /* Контент будет внутри обертки */
        }
        
        .accordion-content .content-wrapper {
            background: var(--card-bg);
            padding: 1.5rem;
            line-height: 1.7;
            font-size: 0.95rem;
            color: var(--secondary-text);
            border: 1px solid var(--border-color);
            border-top: none;
            border-radius: 0 0 16px 16px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            margin-top: -15px; /* Небольшой нахлест для красивого соединения */
            padding-top: 2rem;
        }

        /* --- Адаптация для мобильных устройств --- */
        @media (max-width: 1024px) {
            .changes-grid, .benefits-grid {
                /* На планшетах делаем 2 колонки */
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            }
        }

        @media (max-width: 600px) {
            body {
                padding: 1.5rem 1rem;
            }
            .hero-section h1 {
                font-size: 2.2rem;
            }
            .hero-section .subtitle, .changes-section h2, .benefits-section h2 {
                font-size: 1.5rem;
            }
            .changes-grid, .benefits-grid {
                /* На телефонах все в одну колонку */
                grid-template-columns: 1fr;
            }
        }
/*  КОНЕЦ БЛОКА СТИЛЕЙ ДЛЯ КАРТОЧЕК С ПОЛЬЗАМИ*/
/* ============================================= */
/* == Стили для объединенного блока Инфо + Описание == */
/* ============================================= */

.info-wrapper {
  display: flex; /* Ключевое свойство: выстраивает дочерние элементы в ряд */
  align-items: center; /* Вертикально выравнивает блоки по центру, если у них разная высота */
  gap: 2rem; /* Создает красивое пространство между блоками (2rem = примерно 32px) */
  max-width: 1200px; /* Ограничивает максимальную ширину, чтобы блок не был слишком растянут */
  margin: 4rem auto; /* Центрирует блок и добавляет вертикальные отступы сверху и снизу */
}

/* --- Делаем дочерние блоки гибкими --- */
.info-wrapper .pranayama-explainer-section {
  flex: 1; /* Блок "Что это такое" будет занимать 1 часть доступного пространства */
}

.info-wrapper .silhouette-infographic-section {
  flex: 1; /* Блок с инфографикой будет занимать 1 часть доступного пространства */
}


/* --- Адаптация для мобильных устройств (ВАЖНО!) --- */
/* На экранах шириной 992px и меньше блоки снова будут идти друг под другом */
@media (max-width: 992px) {
  .info-wrapper {
    flex-direction: column; /* Меняем направление с горизонтального на вертикальное */
  }
}
/* ==КОНЕЦ БЛОКА  Стили для объединенного блока Инфо + Описание == */

/*СТИЛИ ДЛЯ ТЕХНИК */
        :root {
            --bg-color: #fdfaf5;
            --card-bg-color: #ffffff;
            --primary-text-color: #4f4a45;
            --secondary-text-color: #6c6660;
            --accent-color: #b99470;
            --border-color: #eaddcf;
            --shadow-color: rgba(112, 95, 76, 0.1);
            --font-primary: 'Poppins', sans-serif;
            --font-secondary: 'Montserrat', sans-serif;
        }

        body {
            background-color: var(--bg-color);
            color: var(--primary-text-color);
            font-family: var(--font-primary);
        }

        .page-container {
            max-width: 900px;
            margin: 40px auto;
            padding: 0 20px;
        }
        
        .tabs-nav {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 30px;
        }

        .tab-button {
            font-family: var(--font-secondary);
            font-size: 16px;
            font-weight: 500;
            padding: 10px 20px;
            cursor: pointer;
            background: #fff;
            border: 1px solid var(--border-color);
            color: var(--secondary-text-color);
            border-radius: 20px;
            transition: all 0.3s ease;
        }

        .tab-button.active {
            color: #fff;
            background-color: #8D7B68;
            border-color: #8D7B68;
        }

        .tab-content { display: none; animation: fadeIn 0.5s ease-in-out; }
        .tab-content.active { display: block; }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .info-card {
            background-color: var(--card-bg-color);
            border-radius: 12px;
            padding: 25px;
            margin-bottom: 25px;
            box-shadow: 0 4px 15px var(--shadow-color);
        }
        
        .card-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 10px;
        }
    
        .card-header h3 { margin: 0;; font-family: var(--font-secondary); font-size: 18px; font-weight: 600; }
        .card-icon { font-size: 24px; }
        .card-body p, .card-body li { font-size: 16px; line-height: 1.7; color: var(--secondary-text-color); text-align: left; }
        .card-body strong { color: var(--primary-text-color); font-weight: 500; }
        
        .term { color: var(--accent-color); font-weight: 500; }
        
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
        }
        .card-full-width { grid-column: 1 / -1; }
        #preparation .card-body p, #preparation .card-body li { font-size: 15px; line-height: 1.6; }

        .technique-intro { border-left: 4px solid var(--accent-color); }
        .steps-list { list-style: none; padding: 0; }
        .step-item {
            display: flex; align-items: flex-start; gap: 20px;
            padding: 20px; border-radius: 12px; margin-bottom: 15px;
            background-color: var(--card-bg-color); box-shadow: 0 4px 15px var(--shadow-color);
        }
        .step-number {
            flex-shrink: 0; width: 40px; height: 40px; display: flex;
            align-items: center; justify-content: center;
            background-color: #8D7B68; color: #fff; border-radius: 50%;
            font-family: var(--font-secondary); font-size: 20px; font-weight: 600;
        }

}   
        .step-content h4 { margin: 0 0 8px 0; font-family: var(--font-secondary); font-size: 17px; }
        .step-content p { margin: 0 0 4px 0; line-height: 1.6; }
        /* Отступ и разделитель МЕЖДУ блоками шагов */

#technique .step-content hr {
    margin-top: 15px;    /* Отступ СВЕРХУ от линии до текста выше */
    margin-bottom: 20px; /* Отступ СНИЗУ от линии до текста ниже */
    border: none;
    border-top: 1px solid #eaddcf; /* Делаем линию такой же, как другие бордеры */
}

    /*   .step-content h4, Выравнивание текста во вкладке "Техника" по левому краю */
  .step-content p {
      text-align: left;
  }   
/* Увеличиваем отступ после абзаца "Принцип" */
.step-content h4 + p {
    margin-bottom: 1em; /* Создает отступ, равный высоте одной строки текста */
}

        /* НОВЫЙ СТИЛЬ ДЛЯ ЗАГОЛОВКОВ В "ПРОДОЛЖИТЕЛЬНОСТИ" */
        .duration-heading {
            display: block;
            font-weight: 600;
            color: var(--primary-text-color);
            margin-bottom: 8px;
            text-decoration: underline;
            text-decoration-style: wavy;
            text-decoration-color: var(--accent-color);
            text-underline-offset: 4px;
        }
        
        .focus-list { list-style: none; padding: 0; }
        .focus-list li { padding-left: 28px; position: relative; margin-bottom: 12px; }
        .focus-list li:last-child { margin-bottom: 0; }
        .focus-list li::before {
            content: '✓'; position: absolute; left: 0; top: 4px;
            color: var(--accent-color); font-weight: bold; font-size: 18px;
        }

/* --- Стили для блока безопасности --- */
.safety-block {
    border: 2px solid #e74c3c; /* Красная обводка */
    border-radius: 12px; /* Скругление углов, как у других элементов */
    margin: 20px 0; /* Внешние отступы сверху и снизу */
    padding: 5px 20px; /* Внутренние отступы */
    background-color: #fbeeeC; /* Очень светлый, приятный фон */
    transition: all 0.3s ease;
}

.safety-block[open] {
    padding-bottom: 20px; /* Увеличиваем нижний отступ в раскрытом состоянии */
}

.safety-header {
    padding: 10px 0;
    font-weight: 600;
    font-size: 1.1em;
    color: #c0392b; /* Приятный красный цвет для текста, сочетается с обводкой */
    text-align: center;
    cursor: pointer; /* Показывает, что элемент кликабельный */
    list-style: none; /* Убирает стандартный маркер-треугольник */
    outline: none; /* Убирает синюю обводку при фокусе */
}

/* Убираем маркер для разных браузеров */
.safety-header::-webkit-details-marker {
    display: none;
}

.safety-content {
    margin-top: 15px; /* Отступ между заголовком и содержанием */
    text-align: left;
}

.safety-content h4 {
    margin-top: 10px;
    margin-bottom: 8px;
    color: #333;
    font-weight: 600;
}

.safety-content ul {
    list-style: none; /* Убираем стандартные маркеры */
    padding-left: 0;  /* Убираем отступ слева у всего списка */
    margin-bottom: 15px;
}

.safety-content li {
    position: relative;   /* Необходимо для позиционирования псевдо-элемента */
    padding-left: 25px;   /* Создаем место слева для нашей иконки-галочки */
    margin-bottom: 10px;  /* Увеличим отступ для лучшей читаемости */
    line-height: 1.5;
}

.safety-content li::before {
    content: '✓';           /* Наш новый маркер-галочка */
    position: absolute;     /* Абсолютное позиционирование относительно li */
    left: 0;                /* Прижимаем маркер к левому краю (внутри padding) */
    top: 2px;               /* Небольшая коррекция положения по вертикали */
    color: #c08e44;         /* Теплый, коричневато-золотой цвет, как на скриншоте */
    font-weight: bold;      /* Делаем галочку более заметной */
    font-size: 1.1em;
}

.safety-content hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 15px 0;
}

.safety-content h4 {
    text-align: center;
}

 /*КОНГЕЦ СТИЛИ ДЛЯ ТЕХНИК */

/* Центрирование заголовков в информационных блоках */
.card-header {
    display: flex;
    align-items: center; /* Это выравнивает по вертикали, скорее всего уже есть */
    justify-content: center; /* <<-- ВОТ КЛЮЧЕВАЯ СТРОКА */
}

/* --- Стили для перемещенного блока "ЧТО ЭТО ТАКОЕ" --- */
.pranayama-explainer-section.standalone {
    margin: 40px auto; /* Добавляем отступы сверху и снизу */
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 12px;
    background-color: #f9f9f9;
    max-width: 800px; /* Ограничиваем ширину, чтобы он не растягивался на весь экран */
}


/* --- Стили для нового блока "ПОЧЕМУ ЭТО РАБОТАЕТ" --- */
.why-it-works-section {
    flex-basis: 50%; /* Занимает половину контейнера info-wrapper */
    padding-right: 40px; /* Отступ от инфографики */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.why-it-works-section h2 {
    font-size: 2em;
    font-weight: 600;
    margin-bottom: 20px;
    color: #333;
}

.why-it-works-section p {
    font-size: 1.1em;
    line-height: 1.7;
    color: #555;
}

/* --- Стили для Аккордеона "КАК ЭТО РАБОТАЕТ" --- */
.how-it-works-accordion-section {
    padding: 60px 20px;
    text-align: center;
}

.how-it-works-accordion-section h2 {
    font-size: 2.2em;
    font-weight: 600;
    margin-bottom: 40px;
    color: #333;
}

.accordion-container {
    max-width: 800px;
    margin: 0 auto;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden; /* Важно для скругления углов */
}

.accordion-item:not(:last-child) {
    border-bottom: 1px solid #e0e0e0;
}

.accordion-header {
    width: 100%;
    background-color: #fff;
    border: none;
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: 500;
    text-align: left;
    color: #444;
    transition: background-color 0.3s ease;
}

.accordion-header:hover {
    background-color: #f9f9f9;
}

.accordion-icon {
    font-size: 1.5em;
    font-weight: 300;
    color: #E57373; /* Наш терракотовый цвет для иконки */
    transition: transform 0.4s ease;
}

/* Стили для активного состояния */
.accordion-item.active .accordion-header {
    background-color: #f5f5f5;
}

.accordion-item.active .accordion-icon {
    transform: rotate(45deg); /* Превращает + в × */
}

/* Контейнер для контента (изначально скрыт) */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, padding 0.5s ease-out;
    background-color: #fafafa;
}

.content-inner {
    display: flex;
    align-items: center;
    padding: 30px;
}

.accordion-image {
    /* ИЗМЕНЕНО: Жестко задаем ширину и автоматическую высоту для сохранения пропорций */
    width: 150px;
    height: auto;
    /* Убираем flex-свойство, которое применялось неверно */
    /* flex: 0 0 150px; */
    
    margin-right: 30px;
    border-radius: 8px;
    
    /* ДОБАВЛЕНО: Гарантирует, что изображение сожмется, если оно больше, не теряя пропорций */
    object-fit: contain;
}

.accordion-content p {
    margin: 0;
    font-size: 1.1em;
    line-height: 1.6;
    color: #555;
    text-align: left;
}

/* Адаптивность для мобильных */
@media(max-width: 600px) {
    .content-inner {
        flex-direction: column;
        text-align: center;
    }
    .accordion-image {
        margin-right: 0;
        margin-bottom: 20px;
        width: 120px;
    }
    .accordion-content p {
        text-align: center;
    }
}
/* --- Стили для ЗИГЗАГА внутри Аккордеона --- */

/* КЛЮЧЕВОЕ ПРАВИЛО ДЛЯ ЗИГЗАГА */
/* Выбираем каждый второй (четный) элемент аккордеона */
.accordion-item:nth-child(even) .content-inner {
    /* Меняем направление flex-контейнера на обратное */
    flex-direction: row-reverse;
}

/* И для его картинки меняем отступ на противоположный */
.accordion-item:nth-child(even) .accordion-image {
    margin-right: 0;
    margin-left: 30px;
}

/* И для его текста меняем выравнивание */
.accordion-item:nth-child(even) .accordion-content p {
    text-align: right;
}

/* На мобильных устройствах отключаем зигзаг для удобства */
@media(max-width: 600px) {
    .accordion-item:nth-child(even) .content-inner {
        flex-direction: column; /* Возвращаем все в колонку */
    }
    .accordion-item:nth-child(even) .accordion-image {
        margin-left: 0; /* Сбрасываем отступы */
    }
    .accordion-item:nth-child(even) .accordion-content p {
        text-align: center; /* Возвращаем центрирование */
    }
}

/* --- Стили для секции "ДЛЯ КОГО ЭТО" (Версия с правками) --- */
.for-whom-section {
    padding: 60px 40px; /* Немного увеличим отступы по бокам */
    text-align: center;
    
    /* ИЗМЕНЕНО: Заменяем цвет на полупрозрачный белый */
    background-color: rgba(255, 255, 255, 0.7); 
    
    /* ДОБАВЛЕНО: Скругляем углы всего блока */
    border-radius: 25px; 

    /* ДОБАВЛЕНО (Опционально, но очень красиво): Эффект "матового стекла" */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Для поддержки Safari */

    /* ДОБАВЛЕНО: Тонкая светлая рамка для завершения эффекта стекла */
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.for-whom-section h2 {
    font-size: 2.2em;
    font-weight: 600;
    margin-bottom: 50px;
    color: #333;
}

.audience-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Адаптивные колонки */
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.audience-card {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.audience-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.audience-icon {
    font-size: 3em; /* Крупная иконка */
    margin-bottom: 15px;
    line-height: 1;
}

.audience-card h3 {
    font-size: 1.3em;
    font-weight: 600;
    margin-bottom: 10px;
}

.audience-card p {
    font-size: 1em;
    line-height: 1.6;
    color: #666;
}

/* --- СТИЛИ ДЛЯ СИСТЕМЫ ВКЛАДОК 101 --- */
/* Базовые стили для кнопок и их контейнера оставлены как были */
.tabs-nav {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    flex-wrap: wrap; 
}

.tab-button {
    padding: 12px 25px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    background-color: #fff;
    color: #555;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.tab-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Цвета для активных вкладок (ОСТАВЛЕНЫ КАК ТЫ ХОТЕЛ) */
.tab-button.active.tab-breath { background-color: #a7d8de; color: #2c5a62; } /* Бирюзовый */
.tab-button.active.tab-pose { background-color: #f8c08b; color: #7d4d13; } /* Морковный */
.tab-button.active.tab-mudra { background-color: #f5e6d3; color: #7b6651; } /* Лен */
.tab-button.active.tab-bandhi { background-color: #b7e4c7; color: #336140; } /* Зеленый */
.tab-button.active.tab-recs { background-color: #e3e1d9; color: #5c5a52; } /* Кремовый серый */


/* --- СТИЛИ ДЛЯ КОНТЕНТА ВНУТРИ ВКЛАДОК --- */

.tab-content {
    display: none;
    animation: fadeIn 0.5s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px; 
    align-items: start; /* ВОТ РЕШЕНИЕ: Запрещает карточкам растягиваться по высоте */
}

/* Карточка */
.info-card {
    background-color: #fff;
    border-radius: 15px; 
    padding: 25px;       
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* Заголовок карточки с разделителем */
.card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px; 
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0; 
}

.card-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.card-icon {
    font-size: 24px;
    opacity: 0.8;
}

/* Основной текст в карточке */
.card-body p {
    margin: 0; 
    line-height: 1.7; 
    margin-bottom: 1em; 
    text-align: left;
}

.card-body p:last-child {
    margin-bottom: 0; 
}

/* Выделение подзаголовков */
.card-body strong {
     color: #4a5c54; 
     font-weight: 600; 
}


/* --- СТИЛИ ДЛЯ СПИСКОВ (ДОБАВЛЕНО) --- */

/* Стили для основного списка */
.card-body ul {
    list-style: none; /* Убираем стандартные точки */
    padding-left: 0;  /* Убираем стандартный отступ */
    margin-top: 1em;  /* Отступ сверху от параграфа "Суть:" */
}

/* Стили для каждого пункта списка */
.card-body li {
    padding-left: 1.4em; /* Создаем место для кастомной точки */
    margin-bottom: 1em;  /* Расстояние между пунктами */
    position: relative;  /* Необходимо для позиционирования точки */
}

/* Создаем кастомную точку-маркер для основного списка */
.card-body > ul > li::before {
    content: '•';
    position: absolute;
    left: 0;
    top: -2px;
    color: #8da399; /* Мягкий цвет, как у сепараторов в шапке */
    font-size: 1.2em;
    font-weight: bold;
}

/* Стили для вложенных списков (например, в "Энергетике") */
.card-body ul ul {
    margin-top: 0.7em;  /* Отступ сверху */
    margin-left: 0.5em; /* Дополнительный отступ слева для иерархии */
}

/* Маркер-тире для вложенных списков */
.card-body ul ul li::before {
    content: '–'; /* Используем тире вместо точки */
    color: #b0c4b1; /* Еще более светлый оттенок */
    top: -3px;
}

/*
 * --- ЦВЕТА ДЛЯ АКТИВНЫХ ВКЛАДОК СТРАНИЦЫ "ТЕХНИКА" (CSS-only решение) ---
 * Используем атрибут data-tab-target для уникальности без изменения HTML.
*/

/* Польза -> Бирюзовый */
.tab-button.active[data-tab-target="#benefits"] {
    background-color: #a7d8de;
    color: #2c5a62;
}

/* Подготовка -> Морковный */
.tab-button.active[data-tab-target="#preparation"] {
    background-color: #f8c08b;
    color: #7d4d13;
}

/* Техника -> Зеленый */
.tab-button.active[data-tab-target="#technique"] {
    background-color: #b7e4c7;
    color: #336140;
}

/* Советы -> Кремовый серый */
.tab-button.active[data-tab-target="#details"] {
    background-color: #e3e1d9;
    color: #5c5a52;
}

/*
 * --- СТИЛИ ДЛЯ РАСКРЫВАЮЩИХСЯ КАРТОЧЕК ---
*/

/* Делаем заголовок карточки кликабельным на вид */
.card-header {
    cursor: pointer;
}

/* Убираем стандартный маркер-треугольник */
.card-header::-webkit-details-marker {
  display: none;
}

.card-header::marker {
  display: none;
}

/* Убираем стандартную синюю рамку при фокусе */
.card-header:focus {
    outline: none;
}