/* ==========================================================================
   ОСНОВНЫЕ СТИЛИ (style.css)
   Проект: Лесотерапия для каждого
   Цветовая палитра: Оранжево-белая премиальная (Orange & Soft White)
   ========================================================================== */

:root {
    --primary: #f4810d;       /* Насыщенный темно-оранжевый */
    --primary-light: #FFA500; /* Яркий янтарный */
    --primary-tint: #FFF4E6;  /* Нежный кремово-оранжевый оттенок */
    --white: #ffffff;
    --dark: #f4810d;          /* Глубокий кофейно-древесный тон текста */
    --gray: #6B6259;          /* Мягкий серый для описаний */
    --light-bg: #FAF6F0;      /* Экологичный светлый фон */
    /* #5D7625FF */


    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Nunito', sans-serif;

    --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --shadow: 0 20px 40px rgba(255, 140, 0, 0.06);
}

/* Сброс базовых стилей */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.7;
    color: var(--dark);
    background-color: var(--white);
    overflow-x: hidden;
}

.container {
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 30px;
}

.text-orange {
    color: var(--primary);
}

.text-center {
    text-align: center;
}

/* Кнопки */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    border-radius: 50px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--white);
    box-shadow: 0 10px 25px rgba(255, 140, 0, 0.25);
}

.btn-primary:hover {
    background-color: var(--primary-light);
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(255, 140, 0, 0.35);
}

.btn-secondary {
    background-color: var(--primary-tint);
    color: var(--primary);
    margin-left: 15px;
}

.btn-secondary:hover {
    background-color: var(--primary);
    color: var(--white);
    transform: translateY(-3px);
}

/* Шапка */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(93, 118, 37,0.95); /* Красивый глубокий темно-зеленый с легкой прозрачностью */
    backdrop-filter: blur(10px);
    z-index: 1000;
    box-shadow: 0 4px 30px rgb(255 255 255);
    padding: 20px 0;
}

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

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 22px;
    color: var(--dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.logo-wrapper {
    width: 120px;          /* Размер круга */
    height: 120px;
    border-radius: 50%;    /* Делаем идеальный круг */
    overflow: hidden;      /* Обрезаем все, что выходит за рамки */
    border: 3px solid var(--primary); /* Оранжевая рамка под стиль сайта */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Легкая тень для объема */
    transition: var(--transition);
}

.logo-wrapper:hover {
    transform: scale(1.05); /* Легкое увеличение при наведении */
}

.logo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;     /* Картинка заполнит весь круг, не искажаясь */
}

.nav-menu {
    display: flex; /* Активируем Flexbox */
    justify-content: space-between; /* Распределяет ссылки с равным пространством между ними */
    align-items: center; /* Выравнивает ссылки по вертикали */
    width: 100%; /* Занимает всю ширину контейнера */
    max-width: 800px; /* Ограничьте ширину, если меню слишком растянуто */
}



.nav-menu a {
    text-decoration: none;
    color: #fff5ed; /* Ваш текущий цвет */
    padding: 0 10px; /* Небольшой внутренний отступ для кликабельности */
    white-space: nowrap; /* Предотвращает перенос слов */
}

.nav-menu a:hover {
    color: #FF7A00; /* Более светлый хаки при наведении */
}


.btn-header {
    padding: 10px 24px;
    font-size: 14px;
    background-color: var(--dark);
    color: var(--white);
}

.btn-header:hover {
    background-color: var(--primary);
    transform: translateY(-2px);
}

/* Секции общие элементы */
.section-title-block {
    margin-bottom: 60px;
}

.sub-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary);
    display: block;
    margin-bottom: 12px;
}

h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 40px;
    line-height: 1.3;
    color: var(--dark);
}

/* Главный экран */
.hero-section {
    padding: 180px 0 120px;
    background: linear-gradient(135deg, #5d7625 0%, #5d7625 100%);
    position: relative;
    overflow: hidden;
}

.hero-bg-decor {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.floating-leaf {
    position: absolute;
    animation: floatingLeaf 6s ease-in-out infinite;
}

.leaf-1 { top: 20%; right: 10%; animation-delay: 0s; }
.leaf-2 { bottom: 15%; left: 5%; animation-delay: 2s; }

@keyframes floatingLeaf {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-25px) rotate(15deg); }
}

.hero-container {
    margin-left: 350px;
    display: flex;
    align-items: center;
    gap: 60px;
}

.hero-content {
    flex: 1;
}

.hero-badge {
    display: inline-block;
    padding: 6px 16px;
    background-color: var(--primary-tint);
    color: var(--primary);
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 25px;
}

.hero-content h1 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 58px;
    line-height: 1.15;
    color: var(--dark);
    margin-bottom: 25px;
}

.hero-description {
    font-size: 19px;
    color: var(--gray);
    margin-bottom: 40px;
    max-width: 580px;
}

.hero-actions {
    display: flex;
    align-items: center;
}

.hero-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
}

.main-circle-graphic {
    position: relative;
    width: 450px;
    height: 450px;
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 15px solid var(--white);
    outline: 15px solid var(--primary);
    outline-offset: -15px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.08);
    position: relative;
    z-index: 5;
}

/* Позиционирование оранжевого листа на главном кругу Hero */
/* Позиционирование оранжевого листа на главном кругу Hero */
.hero-circle-leaf {
    position: absolute;
    top: 15px;
    right: 2px; /* Было 15px, уменьшили на 13px для смещения вправо */
    z-index: 10; /* Выше, чем .hero-img (z-index: 5) */
    filter: drop-shadow(0 8px 16px rgba(255, 140, 0, 0.3));
    transform-origin: bottom left;
    animation: circleLeafSway 5s ease-in-out infinite alternate;
}

@keyframes circleLeafSway {
    0% {
        transform: rotate(0deg) scale(1);
    }
    100% {
        transform: rotate(12deg) scale(1.05);
    }
}

/* Премиальная типографика главного заголовка */
.hero-premium-title {
    font-family: var(--font-heading);
    font-size: 58px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em; /* Легкое сближение букв для журнального стиля */
    color: var(--dark);
    margin-bottom: 25px;
}

/* Первое слово — глубокий древесно-кофейный с легким объемом */
.hero-premium-title .title-main {
    display: inline-block;
    background: linear-gradient(135deg, #2B2621 0%, #4A3E3D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 10px rgba(43, 38, 33, 0.03);
}

/* Вторая строка — сочный оранжевый градиент */
.hero-premium-title .title-sub {
    position: relative;
    display: inline-block;
    font-weight: 800;
    background: linear-gradient(135deg, #FF8C00 0%, #FF5500 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Мягкое свечение под текстом для глубины */
    filter: drop-shadow(0 4px 12px rgba(255, 140, 0, 0.15));
}

/* Элегантный акцент — контрастная точка в конце, символизирующая завершенность и осознанность */
.hero-premium-title .title-dot {
    display: inline-block;
    -webkit-text-fill-color: #FF5500;
    margin-left: -2px;
    animation: pulseDot 4s ease-in-out infinite;
}

/* Анимация "дыхания" для точки */
@keyframes pulseDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}/* Премиальная типографика главного заголовка */
.hero-premium-title {
    font-family: var(--font-heading);
    font-size: 58px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em; /* Легкое сближение букв для журнального стиля */
    color: var(--dark);
    margin-bottom: 25px;
}

/* Первое слово — глубокий древесно-кофейный с легким объемом */
.hero-premium-title .title-main {
    display: inline-block;
    background: linear-gradient(135deg, #2B2621 0%, #4A3E3D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 10px rgba(43, 38, 33, 0.03);
}

/* Вторая строка — сочный оранжевый градиент */
.hero-premium-title .title-sub {
    position: relative;
    display: inline-block;
    font-weight: 800;
    background: linear-gradient(135deg, #FF8C00 0%, #FF5500 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Мягкое свечение под текстом для глубины */
    filter: drop-shadow(0 4px 12px rgba(255, 140, 0, 0.15));
}

/* Элегантный акцент — контрастная точка в конце, символизирующая завершенность и осознанность */
.hero-premium-title .title-dot {
    display: inline-block;
    -webkit-text-fill-color: #FF5500;
    margin-left: -2px;
    animation: pulseDot 4s ease-in-out infinite;
}

/* Анимация "дыхания" для точки */
@keyframes pulseDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

.pulse-ring {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    border: 2px dashed var(--primary);
    border-radius: 50%;
    opacity: 0.3;
    animation: rotateRing 25s linear infinite;
}

@keyframes rotateRing {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Раздел О практике */
.about-section {
    padding: 120px 0;
}

.about-grid {
    display: flex;
    align-items: center;
    gap: 70px;
}

.about-text {
    flex: 1.2;
}

.lead-text {
    font-size: 21px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 20px;
}

.about-text p {
    color: var(--gray);
    margin-bottom: 30px;
}

.features-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-top: 40px;
}

.feature-item {
    display: flex;
    gap: 20px;
}

.feature-icon {
    width: 50px;
    height: 50px;
    background-color: var(--primary-tint);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 20px;
    flex-shrink: 0;
}

.feature-body h3 {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--dark);
}

.feature-body p {
    font-size: 16px;
    margin-bottom: 0;
}

.about-media {
    flex: 0.8;
}

.image-stack {
    position: relative;
}

.stack-img {
    width: 100%;
    border-radius: 24px;
    box-shadow: var(--shadow);
}

.stack-card {
    position: absolute;
    bottom: -30px;
    left: -30px;
    background-color: var(--primary);
    color: var(--white);
    padding: 25px;
    border-radius: 20px;
    max-width: 220px;
    box-shadow: 0 15px 35px rgba(255, 140, 0, 0.3);
}

.card-num {
    display: block;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 36px;
    line-height: 1;
    margin-bottom: 5px;
}

.card-txt {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

/* Миссия */
.mission-section {
    padding: 100px 0;
    background-color: var(--primary);
    color: var(--white);
    position: relative;
}

.mission-section h2 {
    color: var(--white);
    margin-bottom: 25px;
}

.quote-icon {
    font-size: 50px;
    opacity: 0.2;
    margin-bottom: 15px;
}

.mission-text {
    font-size: 26px;
    font-weight: 300;
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Контейнер для выравнивания */
.mission-section .container {
    display: flex;
    align-items: center;
    gap: 30px;
}

/* Оформление круга SVG */
/* Обновленные стили для круга */
.mission-image-wrapper {
    flex-shrink: 0;
    width: 250px; /* Установите желаемый размер */
    height: 250px;
    border: 3px solid #ffffff; /* Белая рамка 3px */
    border-radius: 50%;      /* Делаем контейнер круглым */
    overflow: hidden;        /* Обрезаем содержимое по кругу */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

/* Эффект свечения при наведении */
.mission-image-wrapper:hover {
    transform: scale(1.05); /* Легкое увеличение */
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.6), 0 0 50px rgba(255, 255, 255, 0.3);
    border-color: #ffffff;
}

/* Корректировка изображения внутри */
.circle-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.mission-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Контейнер для трех кругов */
.mission-images-grid {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Расстояние между кругами */
    flex-shrink: 0;
}

/* 1. Увеличиваем размер самих кругов */
.mission-image-wrapper {
    width: 378px;
    height: 378px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    overflow: hidden;
    transition: all 0.4s ease;
    cursor: pointer;
    position: absolute;
}

/* 2. Увеличиваем контейнер, чтобы он вместил круги такого размера */
.mission-images-chaos {
    position: relative;
    width: 600px;  /* Увеличили область под большой размер */
    height: 600px;
    flex-shrink: 0;
}

/* 3. Корректируем координаты для треугольника при новом размере */
.circle-1 { top: 0; left: 110px; }      /* Верхняя точка */
.circle-2 { bottom: 50px; left: 0; }    /* Нижняя левая */
.circle-3 { bottom: 50px; right: 0; }   /* Нижняя правая */

.mission-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Эффект при наведении */
.mission-image-wrapper:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

/* Выравнивание основного блока */
.mission-section .container {
    display: flex;
    align-items: center;
    gap: 40px;
}

.content-wrapper {
    padding-right: 30px;
    text-align: left;
}

.mission-images-chaos {
    position: relative;
    width: 450px; /* Общая зона, где будут круги */
    height: 450px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    flex-shrink: 0;
}

.mission-image-wrapper {
    width: 150px;
    height: 150px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    overflow: hidden;
    transition: all 0.4s ease;
    cursor: pointer;
    position: absolute; /* Позволяет двигать их свободно */
}

.mission-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Эффект свечения */
.mission-image-wrapper:hover {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.7);
    z-index: 10; /* Чтобы при увеличении круг был поверх других */
}

/* Выравнивание текста */
.content-wrapper {
    padding-left: 32px;
    text-align: left;
}

/* Польза */
.benefits-section {
    padding: 120px 0;
    background-color: var(--light-bg);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.benefit-card {
    background-color: var(--white);
    padding: 40px;
    border-radius: 24px;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(255, 140, 0, 0.1);
}

.card-icon {
    font-size: 35px;
    color: var(--primary);
    margin-bottom: 20px;
}

.benefit-card h3 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
}

.benefit-card p {
    color: var(--gray);
    font-size: 17px;
}

.stats-wrapper {
    display: flex;
    justify-content: space-around;
    margin-top: 80px;
    background-color: var(--white);
    padding: 40px;
    border-radius: 24px;
    box-shadow: var(--shadow);
}

.stat-box {
    text-align: center;
}

.stat-val {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 54px;
    color: var(--primary);
    line-height: 1.1;
    margin-bottom: 8px;
}

.stat-lbl {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--dark);
    letter-spacing: 0.5px;
}

/* Проводник */
.guide-section {
    padding: 120px 0;
}

.guide-grid {
    display: flex;
    align-items: center;
    gap: 70px;
}

.guide-visual {
    flex: 0.9;
}

.guide-img-container {
    width: 100%;
    height: 500px;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.guide-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.guide-content {
    flex: 1.1;
}

.guide-lead {
    font-size: 22px;
    font-weight: 600;
    color: var(--primary);
    line-height: 1.5;
    margin-bottom: 25px;
}

.guide-content p {
    color: var(--gray);
    margin-bottom: 20px;
}

.guide-quote {
    margin-top: 35px;
    padding-left: 25px;
    border-left: 4px solid var(--primary);
    font-style: italic;
    font-size: 19px;
    color: var(--dark);
}

/* Процесс (Временная шкала) */
.process-section {
    padding: 120px 0;
    background-color: var(--light-bg);
}

.timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: 5px;
}

.timeline-item {
    background-color: var(--white);
    padding: 35px 30px;
    border-radius: 20px;
    position: relative;
    box-shadow: var(--shadow);
}

.timeline-num {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 46px;
    color: var(--primary-tint);
    line-height: 1;
    margin-bottom: 15px;
}

.timeline-body h3 {
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 12px;
}

.timeline-body p {
    color: var(--gray);
    font-size: 15px;
    line-height: 1.6;
}

/* Галерея */
.gallery-section {
    padding: 120px 0;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.gallery-item {
    height: 350px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.gallery-item:hover img {
    transform: scale(1.06);
}

/* Футер */
.main-footer {
    background-color: #5E7726FF !important;
    color: var(--white);
    padding: 80px 0 0;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 60px;
    border-bottom: 1px solid rgb(93 118 37);
}

.footer-info {
    flex: 1.2;
}

.footer-info h2 {
    color: var(--white);
    font-size: 36px;
    margin-bottom: 20px;
}

.footer-info p {
    color: #ffffff;
    max-width: 500px;
    margin-bottom: 30px;
}

.footer-contacts {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-link {
    color: var(--white);
    text-decoration: none;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: var(--transition);
}

a.contact-link:hover {
    color: var(--primary);
}

.footer-interactive {
    flex: 0.8;
    display: flex;
    justify-content: flex-end;
}

/* Тренажер дыхания */
.breathing-box {
    text-align: center;
}

.breathing-svg {
    margin-bottom: 15px;
}

.b-circle-core {
    fill: var(--primary);
}

.b-circle-pulse {
    fill: none;
    stroke: var(--primary);
    stroke-width: 2;
    transform-origin: center;
    animation: breathAnimation 4s ease-in-out infinite;
}

@keyframes breathAnimation {
    0% { transform: scale(0.6); opacity: 1; }
    40% { transform: scale(1.2); opacity: 0.4; }
    100% { transform: scale(0.6); opacity: 1; }
}

.breathing-hint {
    font-size: 14px;
    color: #A39A92;
    letter-spacing: 0.5px;
}

.footer-bottom {
    padding: 25px 0;
    background-color: #5E7726FF !important;
    font-size: 14px;
    color: #FFFFFF;
    text-align: center;
}

/* Дополнения для интеграции ссылки разработчика */
.footer-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.developer-credit {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.qx-link {
    color: #A39A92;
    text-decoration: none;
    font-weight: 700;
    transition: var(--transition);
    position: relative;
    padding-bottom: 2px;
}

.qx-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--primary);
    transition: var(--transition);
}

.qx-link:hover {
    color: var(--primary);
    text-shadow: 0 0 10px rgba(255, 140, 0, 0.3);
}

.qx-link:hover::after {
    width: 100%;
}

.pagination-container {
    display: flex;
    align-items: center;
    background: var(--light-bg);
    padding: 10px 14px;
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(43, 38, 33, 0.03);
    border: 1px solid rgba(255, 140, 0, 0.05);
}

.pagination-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--white);
    color: var(--dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.pagination-arrow:hover:not(.disabled) {
    background: var(--primary);
    color: var(--white);
    box-shadow: 0 8px 20px rgba(255, 140, 0, 0.25);
}

.pagination-arrow.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: transparent;
    box-shadow: none;
}

.pagination-pages {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 15px;
}

.page-num {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    color: var(--gray);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
}

.page-num:not(.active):hover {
    color: var(--primary);
    background: rgba(255, 140, 0, 0.05);
}

.page-num.active {
    background: var(--white);
    color: var(--primary);
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.12);
}

.page-num[title] {
    width: auto;
    padding: 0 14px;
    border-radius: 30px;
}

.page-divider {
    color: #C2B9B0;
    padding: 0 4px;
    font-weight: 600;
}

/* ==========================================================================
   БЛОК ДОСТУПНОЙ ЛЕСОТЕРАПИИ (Accessibility Section)
   Цветовая палитра: Экстра-оранжевый премиум бэкграунд с белыми акцентами
   ========================================================================== */
.accessibility-section {
    padding: 120px 0;
    background: linear-gradient(135deg, #000000 0%, #5d7625 50%, #000000 100%);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

/* Декорации SVG фона */
.access-bg-decor {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

.access-blob-top {
    position: absolute;
    left: -8%;
    top: -10%;
    width: 500px;
    height: 500px;
}

.access-svg-leaf {
    position: absolute;
    opacity: 0.15;
}

.access-svg-leaf.leaf-sway-1 {
    right: 5%;
    top: 12%;
    transform: rotate(45deg);
    animation: accessLeafSway1 8s ease-in-out infinite alternate;
}

.access-svg-leaf.leaf-sway-2 {
    left: 45%;
    bottom: 5%;
    transform: rotate(-30deg);
    animation: accessLeafSway2 6s ease-in-out infinite alternate;
}

@keyframes accessLeafSway1 {
    0% { transform: rotate(45deg) translateY(0) scale(1); }
    100% { transform: rotate(60deg) translateY(-15px) scale(1.05); }
}

@keyframes accessLeafSway2 {
    0% { transform: rotate(-30deg) translateX(0); }
    100% { transform: rotate(-15deg) translateX(10px); }
}

/* Заголовок блока */
.access-title-block {
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.access-title-block h2 {
    color: var(--dark);
    font-size: 46px;
    margin-bottom: 20px;
    font-weight: 800;
}

.access-title-block .text-white {
    color: var(--white);
    text-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.access-badge {
    display: inline-block;
    padding: 6px 18px;
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--white);
    border-radius: 30px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.25);
}

.access-subtitle {
    max-width: 750px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

/* Сетка карточек */
.access-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    position: relative;
    z-index: 2;
}

.access-card {
    background: var(--white);
    border-radius: 24px;
    padding: 35px;
    color: var(--dark);
    box-shadow: 0 15px 35px rgba(218, 73, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,0.5);
}

.access-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18);
}

.access-icon-wrapper {
    width: 60px;
    height: 60px;
    background-color: var(--primary-tint);
    color: var(--primary);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    transition: var(--transition);
}

.access-card:hover .access-icon-wrapper {
    background-color: var(--primary);
    color: var(--white);
    transform: scale(1.1) rotate(5deg);
}

/* Микро-анимация SVG иконок внутри карточек при ховере */
.svg-animated-icon {
    transition: transform 0.4s ease;
}
.access-card:hover .svg-animated-icon {
    animation: iconPop 0.5s ease forwards;
}

@keyframes iconPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.access-card h3 {
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--dark);
}

.access-card p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--gray);
    margin-bottom: 0;
}

/* Стилизация специальной большой карточки с адресами */
.access-stations-card {
    grid-column: span 1;
    background: var(--dark);
    color: var(--white);
    border-color: rgba(255,255,255,0.05);
}

.access-stations-card h3 {
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 12px;
}

.stations-list {
    list-style: none;
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.stations-list li {
    font-size: 14px;
    line-height: 1.5;
    border-left: 3px solid var(--primary);
    padding-left: 12px;
}

.stations-list li strong {
    display: block;
    font-family: var(--font-heading);
    color: var(--primary-light);
    font-size: 15px;
    margin-bottom: 2px;
}

.stations-list li span {
    color: #C2B9B0;
}

.station-badge {
    margin-top: auto;
    padding-top: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-light);
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Интерактивное окно обратной связи */
.access-feedback-box {
    margin-top: 60px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 28px;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    z-index: 2;
}

.feedback-content {
    flex: 1.2;
}

.feedback-content h3 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 12px;
}

.feedback-content p {
    font-size: 16px;
    color: rgba(255,255,255,0.9);
    line-height: 1.6;
    margin-bottom: 0;
}

.feedback-interactive-actions {
    flex: 0.8;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.btn-feedback-yes {
    background: var(--white);
    color: var(--primary);
    border: none;
    font-weight: 700;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.btn-feedback-yes:hover {
    background: var(--dark);
    color: var(--white);
    transform: translateY(-2px);
}

.btn-feedback-suggest {
    background: rgba(0, 0, 0, 0.2);
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.2);
    margin-left: 0 !important;
}

.btn-feedback-suggest:hover {
    background: var(--white);
    color: var(--dark);
    transform: translateY(-2px);
}

/* Быстрая анимация покачивания иконки опроса */
.animate-bounce {
    animation: slowBounce 3s ease-in-out infinite;
}
@keyframes slowBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* ==========================================================================
   БЛОК ОТЗЫВЫ УЧАСТНИКОВ (Reviews Section Styles)
   Цветовая палитра: Оранжевый премиум с белыми карточками и SVG графикой
   ========================================================================== */
.reviews-section {
    padding: 120px 0;
    background: linear-gradient(135deg, #FF8C00 0%, #FF7300 50%, #E65C00 100%);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

/* Декоративный SVG фон */
.reviews-bg-decor {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

.reviews-blob-left {
    position: absolute;
    left: -10%;
    bottom: -15%;
    width: 550px;
    height: 550px;
    animation: reviewBlobMove 25s ease-in-out infinite alternate;
}

.reviews-svg-leaf {
    position: absolute;
    opacity: 0.16;
}

.reviews-svg-leaf.leaf-animation-1 {
    right: 6%;
    top: 10%;
    transform: rotate(30deg);
    animation: reviewLeafSway1 7s ease-in-out infinite alternate;
}

.reviews-svg-leaf.leaf-animation-2 {
    left: 35%;
    top: 45%;
    transform: rotate(-45deg);
    animation: reviewLeafSway2 5s ease-in-out infinite alternate;
}

@keyframes reviewBlobMove {
    0% { transform: scale(1) translate(0px, 0px) rotate(0deg); }
    50% { transform: scale(1.1) translate(40px, -30px) rotate(60deg); }
    100% { transform: scale(0.9) translate(-20px, 20px) rotate(120deg); }
}

@keyframes reviewLeafSway1 {
    0% { transform: rotate(30deg) translateY(0) scale(1); }
    100% { transform: rotate(50deg) translateY(-20px) scale(1.08); }
}

@keyframes reviewLeafSway2 {
    0% { transform: rotate(-45deg) translateX(0); }
    100% { transform: rotate(-25deg) translateX(15px); }
}

/* Заголовок секции */
.reviews-title-block {
    position: relative;
    z-index: 2;
    margin-bottom: 60px;
}

.reviews-badge {
    display: inline-block;
    padding: 6px 18px;
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--white);
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(5px);
}

.reviews-section h2 {
    color: var(--white);
    font-size: 44px;
    margin-bottom: 20px;
}

.reviews-subtitle {
    max-width: 650px;
    margin: 0 auto;
    font-size: 17px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
}

/* Сетка карточек */
.reviews-grid-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    position: relative;
    z-index: 2;
    margin-bottom: 60px;
}

.review-premium-card {
    background: var(--white);
    color: var(--dark);
    padding: 40px;
    border-radius: 28px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
    transition: var(--transition);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.review-premium-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
}

/* Декоративная иконка кавычки внутри карточки */
.review-quote-mark {
    color: rgba(255, 140, 0, 0.12);
    position: absolute;
    top: 30px;
    right: 35px;
    transition: var(--transition);
}

.review-premium-card:hover .review-quote-mark {
    color: rgba(255, 140, 0, 0.22);
    transform: scale(1.1) rotate(-10deg);
}

.review-main-text {
    font-size: 16px;
    line-height: 1.65;
    color: var(--gray);
    font-style: italic;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}

/* Сведения об авторе */
.review-author-info {
    display: flex;
    align-items: center;
    gap: 15px;
    border-top: 1px solid #F0EAE1;
    padding-top: 20px;
}

.review-avatar-placeholder {
    width: 48px;
    height: 48px;
    background: var(--primary-tint);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}

.review-meta-data h4 {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 2px;
}

.review-meta-data span {
    font-size: 13px;
    color: #9C9286;
    display: block;
}

/* Интерактивный CTA блок */
.reviews-cta-container {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 30px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.reviews-cta-content h3 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--white);
}

.reviews-cta-content p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
}

.btn-reviews-white {
    background: var(--white);
    color: var(--primary);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.btn-reviews-white:hover {
    background: var(--primary-tint);
    color: #E65C00;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   ОБНОВЛЕННЫЕ СТИЛИ ДЛЯ КРАСИВОГО ФУТЕРА С ГРАФИКОЙ И АНИМАЦИЕЙ
   ========================================================================== */
.main-footer {
    background-color: var(--dark);
    color: var(--white);
    padding: 0; /* Обнуляем верхний паддинг, так как его берет на себя декоративная волна */
    position: relative;
    z-index: 10;
}

/* Графическая волна вверху футера */
.footer-wave-decor {
    position: relative;
    width: 100%;
    height: 120px;
    margin-top: -115px; /* Мягкое наложение волны на предыдущую секцию */
    overflow: visible;
    pointer-events: none;
}

.wave-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Дополнительные анимированные листья над волной */
.footer-leaf-fly {
    position: absolute;
    z-index: 12;
}

.leaf-f1 {
    top: 20px;
    left: 15%;
    animation: leafFloatRotate 8s ease-in-out infinite alternate;
}

.leaf-f2 {
    top: -10px;
    right: 22%;
    animation: leafFloatRotate 6s ease-in-out infinite alternate-reverse;
}

@keyframes leafFloatRotate {
    0% { transform: translateY(0) rotate(0deg) scale(1); }
    100% { transform: translateY(-15px) rotate(25deg) scale(1.1); }
}

/* Контейнер сетки футера */
.footer-container {
    display: grid;
    grid-template-columns: 1.1fr 1.4fr 0.9fr;
    gap: 50px;
    padding-top: 40px;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    align-items: start;
}

.footer-column h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 19px;
    color: var(--white);
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

/* Красивое подчеркивание заголовков в футере */
.footer-column h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: var(--primary);
    border-radius: 2px;
}

/* Колонка 1: Описание бренда и Телефон */
.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 22px;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.footer-brand-desc {
    color: #A39A92;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.footer-phone-block {
    background: rgba(255, 255, 255, 0.03);
    padding: 15px 20px;
    border-radius: 14px;
    border-left: 3px solid var(--primary);
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
}

.footer-phone {
    color: var(--white);
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-phone i {
    color: var(--primary);
    font-size: 14px;
}

.footer-phone:hover {
    color: var(--primary);
}

.footer-phone-sub {
    font-size: 13px;
    color: #A39A92;
    padding-left: 24px;
}

/* Колонка 2: Социальные сети карточками */
.socials-intro {
    font-size: 15px;
    color: #A39A92;
    margin-bottom: 20px;
}

.social-links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.social-card-link {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.04);
    padding: 12px 16px;
    border-radius: 12px;
    text-decoration: none;
    transition: var(--transition);
    border: 1px solid rgba(255, 255, 255, 0.02);
}

.social-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--white);
    transition: var(--transition);
    flex-shrink: 0;
}

.social-text-box {
    display: flex;
    flex-direction: column;
}

.social-name {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    color: var(--white);
}

.social-user {
    font-size: 12px;
    color: #A39A92;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

/* Эффекты интерактивности при наведении на социальные карты */
.social-card-link:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.tg-link:hover .social-icon-box { background: #0088cc; color: #fff; }
.insta-link:hover .social-icon-box { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); color: #fff; }
.vk-link:hover .social-icon-box { background: #4c75a3; color: #fff; }
.web-link:hover .social-icon-box { background: var(--primary); color: #fff; }

/* Колонка 3: Тренажер дыхания */
.footer-interactive-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer-interactive-col h3::after {
    left: 50%;
    transform: translateX(-50%);
}

.breathing-box {
    margin-top: 10px;
}

.breathing-svg {
    display: block;
    margin: 0 auto 15px;
}

.b-circle-core {
    fill: var(--primary);
    opacity: 0.8;
}

.b-circle-pulse {
    fill: var(--primary);
    opacity: 0.15;
    transform-origin: center;
    animation: breathePulse 5s ease-in-out infinite;
}

@keyframes breathePulse {
    0%, 100% { transform: scale(0.6); opacity: 0.1; }
    50% { transform: scale(1.1); opacity: 0.35; }
}

.breathing-hint {
    font-size: 14px;
    color: #A39A92;
    font-style: italic;
}

/* Нижняя панель */
.footer-bottom {
    background-color: #5E7726FF !important;
    padding: 25px 0;
    font-size: 14px;
    color: #FFFFFF;
}

.footer-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.qx-link {
    color: #A39A92;
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.qx-link:hover {
    color: var(--primary);
}

/* ==========================================================================
   ИНДИКАТОР ПРОКРУТКИ И КНОПКИ СКРОЛЛА (Scroll Navigation Styles)
   ========================================================================== */

/* 1. Горизонтальная оранжевая полоса в самом верху страницы */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-light), var(--primary));
    z-index: 9999;
    transition: width 0.1s ease-out;
    box-shadow: 0 1px 10px rgba(255, 140, 0, 0.4);
}

/* 2. Контейнер для кнопок управления скроллом */
.scroll-navigation-wrapper {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 2000;
}

/* Общие стили для кнопок навигации */
.scroll-nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 140, 0, 0.25);
    color: var(--dark);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(43, 38, 33, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: var(--transition);
    position: relative;
    outline: none;
}

/* Эффект ховера */
.scroll-nav-btn:hover {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(255, 140, 0, 0.25);
}

/* Эффект нажатия */
.scroll-nav-btn:active {
    transform: translateY(-1px);
}

/* Специфика кнопки "Вверх" (Скрыта на самом верху, появляется при скролле) */
.scroll-up-btn {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8) translateY(10px);
}

.scroll-up-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
}

/* Ховер для кнопки вверх (если она видна) */
.scroll-up-btn.visible:hover {
    transform: translateY(-3px);
}

/* Специфика кнопки "Вниз" (Плавно скрывается, когда доходим до футера) */
.scroll-down-btn {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.scroll-down-btn.hidden {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8) translateY(10px);
}

/* Улучшение визуального контейнера логотипа */
.main-circle-graphic {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 8px solid rgba(255, 140, 0, 0.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    margin: 0 auto;
}

/* Красивое оформление самого логотипа */
.logo-wrapper {
    width: 100%; /* Логотип занимает 80% от круга */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
}

.logo-image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Чтобы логотип не обрезался, а был виден целиком */
}

/* Улучшение заголовков для красоты */
.hero-content h1 {
    font-family: var(--font-heading);
    font-size: 52px;
    line-height: 1.1;
    color: var(--dark);
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.text-orange {
    color: var(--primary);
    font-weight: 800;
}

.hero-badge {
    background: var(--primary-tint);
    color: var(--primary);
    padding: 8px 16px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    display: inline-block;
    margin-bottom: 20px;
}

/* коллаж */

.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-fullscreen-collage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-fullscreen-collage .collage-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: 100%;
    height: 100%;
}

.hero-fullscreen-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6) grayscale(20%);
}

.collage-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(43, 38, 33, 0.1); /* Настройте прозрачность фона под текст */
}

/* Убедимся, что контент поверх фона */
.hero-container {
    position: relative;
    z-index: 1;
}
.rounded-image {
    border-radius: 20px;
    display: block; /* Убирает возможные отступы под изображением */
}

/* 1. Увеличиваем область под круги и задаем им отступ слева 11px */
/* Контейнер-сетка для кругов */
.mission-images-triangle {
    position: relative;
    width: 600px; /* Достаточно места для размещения */
    height: 600px;
    margin-left: -150px !important;
    flex-shrink: 0;
}

/* Общие стили для кругов (размер 378px) */
.mission-image-wrapper {
    width: 300px !important;
    height: 300px !important;
    border: 3px solid #ffffff !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    position: absolute !important;
    transition: all 0.4s ease !important;
    cursor: pointer;
}

/* ПОЗИЦИОНИРОВАНИЕ:
   l02 и l03 остаются по краям снизу.
   l01 ставится строго по центру между ними по горизонтали.
*/
.circle-l01 { top: 40px; left: 150px; }     /* Центр (между 0 и 522) */
.circle-l02 { bottom: 0px; left: 0px; }    /* Нижний левый */
.circle-l03 { bottom: 0px; right: 0px; }   /* Нижний правый */

/* Стили картинок */
.mission-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Эффект свечения */
.mission-image-wrapper:hover {
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.7);
    z-index: 10;
}

/* Styling for the section to contain the absolute image */
.mission-section {
    position: relative; /* Essential for containing the absolutely positioned image */
    overflow: hidden; /* Recommended to prevent image overflow if it's large */
}

/* Specific styling for the forest background image */
.mission-bg-forest {
    position: absolute; /* Positions image relative to .mission-section */
    top: 50%; /* Vertical centering start */
    right: 12px; /* Set 12px margin from the right edge */
    transform: translateY(-50%); /* Precisely center horizontally */
    max-height: 90%; /* Scale image height to fit within the section */
    width: auto; /* Maintain aspect ratio */
    opacity: 0.7; /* Adjust opacity for subtle blending */
    z-index: 1; /* Place image behind content (assuming content is z-index 2) */
    pointer-events: none; /* Prevents the image from interfering with clicks on content */
}

#accessibility {
    background-color: #5D7625 !important; /* Цвет #5D7625F2 без прозрачности или с ней */
    padding: 60px 0; /* Добавьте отступы, чтобы контент не прилипал к краям */
}

/* Если вам нужно сохранить прозрачность, используйте RGBA */
/* #5D7625F2 (F2 в конце — это 95% непрозрачности) */
#accessibility {
    background-color: rgba(93, 118, 37, 0.95) !important;
}
/* Контейнер для визуальной части */
/* Контейнер для визуальной части */
.guide-visual {
    flex: 0.9;
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-top: -30px;  Добавлено смещение вниз */
}

/* Настройки SVG круга */
.guide-circle-svg {
    width: 100%;
    max-width: 450px;
    height: auto;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
    transition: transform 0.4s ease;
}

/* Эффект при наведении */
.guide-circle-svg:hover {
    transform: scale(1.02);
}

/* Эффект при наведении на логотип в футере */
.footer-interactive-col svg {
    transition: transform 0.4s ease;
}

.footer-interactive-col svg:hover {
    transform: scale(1.05);
}

/*!* ===== КНОПКА ПОДРОБНЕЕ В НОВОСТЯХ ===== *!*/
/*.news-detail-btn {*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*    gap: 8px;*/
/*    padding: 10px 24px;*/
/*    background: linear-gradient(135deg, #f4810d 0%, #e07400 100%);*/
/*    color: #ffffff;*/
/*    border: none;*/
/*    border-radius: 50px;*/
/*    font-family: 'Nunito', sans-serif;*/
/*    font-weight: 700;*/
/*    font-size: 14px;*/
/*    text-decoration: none;*/
/*    cursor: pointer;*/
/*    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);*/
/*    box-shadow: 0 4px 15px rgba(244, 129, 13, 0.25);*/
/*    letter-spacing: 0.3px;*/
/*}*/

/*.news-detail-btn:hover {*/
/*    background: linear-gradient(135deg, #ff9a2e 0%, #f4810d 100%);*/
/*    transform: translateY(-2px);*/
/*    box-shadow: 0 8px 25px rgba(244, 129, 13, 0.4);*/
/*    color: #ffffff;*/
/*}*/

/*.news-detail-btn i {*/
/*    font-size: 12px;*/
/*    transition: transform 0.3s ease;*/
/*}*/

/*.news-detail-btn:hover i {*/
/*    transform: translateX(4px);*/
/*}*/

/*!* ===== БЛОК ДЕЙСТВИЙ В КАРТОЧКЕ НОВОСТИ ===== *!*/
/*.news-actions {*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*    margin-top: auto;*/
/*    padding-top: 15px;*/
/*    border-top: 1px solid rgba(244, 129, 13, 0.1);*/
/*    flex-wrap: wrap;*/
/*    gap: 10px;*/
/*}*/

/*.share-buttons {*/
/*    display: flex;*/
/*    gap: 6px;*/
/*}*/

/*.share-buttons button {*/
/*    width: 36px;*/
/*    height: 36px;*/
/*    border-radius: 50%;*/
/*    border: 1px solid #FFF4E6;*/
/*    background: transparent;*/
/*    color: #a89f97;*/
/*    cursor: pointer;*/
/*    transition: all 0.3s ease;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    font-size: 15px;*/
/*}*/

/*.share-buttons button:hover {*/
/*    background: #f4810d;*/
/*    color: #ffffff;*/
/*    border-color: #f4810d;*/
/*    transform: translateY(-2px);*/
/*    box-shadow: 0 4px 12px rgba(244, 129, 13, 0.2);*/
/*}*/

/*!* Для карточки новости: чтобы кнопка была внизу *!*/
/*.news-card {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    height: 100%;*/
/*}*/

/*.news-excerpt {*/
/*    flex-grow: 0;*/
/*    margin-bottom: 0;*/
/*}*/
/*!* ===== ДОПОЛНИТЕЛЬНЫЕ АДАПТИВНЫЕ УЛУЧШЕНИЯ ===== *!*/

/*!* Для очень маленьких экранов *!*/
/*@media (max-width: 360px) {*/
/*    .container {*/
/*        padding: 0 8px;*/
/*    }*/

/*    h2 {*/
/*        font-size: 18px !important;*/
/*    }*/

/*    .sub-title {*/
/*        font-size: 10px !important;*/
/*    }*/

/*    .btn {*/
/*        padding: 10px 18px !important;*/
/*        font-size: 12px !important;*/
/*    }*/

/*    .hero-content h1 {*/
/*        font-size: 20px !important;*/
/*    }*/

/*    .main-circle-graphic {*/
/*        width: 130px !important;*/
/*        height: 130px !important;*/
/*    }*/

/*    .logo span {*/
/*        font-size: 13px !important;*/
/*    }*/

/*    .logo svg {*/
/*        width: 24px !important;*/
/*        height: 24px !important;*/
/*    }*/
/*}*/

/*!* Для планшетов в портретной ориентации *!*/
/*@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {*/
/*    .news-grid {*/
/*        grid-template-columns: repeat(2, 1fr) !important;*/
/*    }*/

/*    .access-grid {*/
/*        grid-template-columns: 1fr 1fr !important;*/
/*    }*/

/*    .benefits-grid {*/
/*        grid-template-columns: 1fr 1fr !important;*/
/*    }*/
/*}*/

/*!* Для устройств с высоким DPI *!*/
/*@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {*/
/*    .logo-image {*/
/*        image-rendering: auto;*/
/*    }*/
/*}*/

/*!* Скрытие элементов на мобильных *!*/
/*@media (max-width: 768px) {*/
/*    .desktop-only {*/
/*        display: none !important;*/
/*    }*/
/*}*/

/*@media (min-width: 769px) {*/
/*    .mobile-only {*/
/*        display: none !important;*/
/*    }*/
/*}*/

/*!* Улучшенная читаемость на мобильных *!*/
/*@media (max-width: 768px) {*/
/*    body {*/
/*        font-size: 16px;*/
/*        line-height: 1.6;*/
/*    }*/

/*    p {*/
/*        font-size: 15px;*/
/*        line-height: 1.6;*/
/*    }*/
/*}*/

/*!* Анимации для мобильных (отключаем тяжелые анимации) *!*/
/*@media (max-width: 768px) {*/
/*    .floating-leaf,*/
/*    .reviews-svg-leaf,*/
/*    .access-svg-leaf,*/
/*    .news-blob-1,*/
/*    .reviews-blob-left {*/
/*        display: none !important;*/
/*    }*/

/*    .news-card:hover {*/
/*        transform: translateY(-5px) !important;*/
/*    }*/

/*    .scroll-nav-btn:hover {*/
/*        transform: none !important;*/
/*    }*/
/*}*/

/* ===== ВИДЕО В КАРТОЧКАХ НОВОСТЕЙ ===== */

/* Видео в карточке новости — такой же размер как у изображения */
/* ===== ВИДЕО В КАРТОЧКАХ НОВОСТЕЙ ===== */

/* ===== ВИДЕО В КАРТОЧКАХ НОВОСТЕЙ ===== */

/* Видео в карточке новости — такой же размер как у изображения (300px) */
.news-card video {
    width: 100% !important;
    height: 300px !important;
    object-fit: cover !important;
    display: block !important;
    background: #000000 !important;
    border-radius: 28px 28px 28px 28px !important; /* скругление со всех сторон */
    flex-shrink: 0 !important;
}

/* ===== АДАПТИВ ДЛЯ ВИДЕО ===== */

@media (max-width: 1024px) {
    .news-card video {
        height: 320px !important;
        border-radius: 24px 24px 24px 24px !important;
    }
}

@media (max-width: 768px) {
    .news-card video {
        height: 280px !important;
        border-radius: 20px 20px 20px 20px !important;
    }
}

@media (max-width: 480px) {
    .news-card video {
        height: 220px !important;
        border-radius: 16px 16px 16px 16px !important;
    }
}

@media (max-width: 360px) {
    .news-card video {
        height: 180px !important;
        border-radius: 12px 12px 12px 12px !important;
    }
}

/* ===== АДАПТИВ ДЛЯ ВИДЕО ===== */

@media (max-width: 1024px) {
    .news-card video {
        height: 320px !important;
    }
}

@media (max-width: 768px) {
    .news-card video {
        height: 280px !important;
    }
}

@media (max-width: 480px) {
    .news-card video {
        height: 220px !important;
    }
}

@media (max-width: 360px) {
    .news-card video {
        height: 180px !important;
    }
}

/* ===== ЗАГОЛОВКИ И ТЕКСТ В БЛОКЕ "НАШИ ЦЕЛИ И ЗАДАЧИ" ===== */

/* Заголовок по центру */
.mission-title {
    text-align: center !important;
    color: #ffffff !important;
    font-size: 40px !important;
    margin-bottom: 25px !important;
}

/* Текст по левому краю */
.mission-text {
    text-align: left !important;
    max-width: 100% !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 26px !important;
    font-weight: 300 !important;
    line-height: 1.6 !important;
}

/* ===== АДАПТИВ ДЛЯ ВИДЕО ===== */

@media (max-width: 1024px) {
    .news-card video {
        height: 320px !important;
    }
}

@media (max-width: 768px) {
    .news-card video {
        height: 280px !important;
    }
}

@media (max-width: 480px) {
    .news-card video {
        height: 220px !important;
    }

    .mission-title {
        font-size: 28px !important;
    }

    .mission-text {
        font-size: 18px !important;
    }
}

@media (max-width: 360px) {
    .news-card video {
        height: 180px !important;
    }

    .mission-title {
        font-size: 24px !important;
    }

    .mission-text {
        font-size: 16px !important;
    }
}

/* ===== БЕЙДЖ "САМАЯ СВЕЖАЯ" НА ДЕСКТОПЕ ===== */
/*.news-card:first-child {*/
/*    position: relative;*/
/*}*/

/*.news-card:first-child::before {*/
/*    content: '⭐ САМАЯ СВЕЖАЯ';*/
/*    position: absolute;*/
/*    top: 12px;*/
/*    right: 12px;*/
/*    background: #d96d00;*/
/*    color: #ffffff;*/
/*    padding: 6px 18px;*/
/*    border-radius: 50px;*/
/*    font-size: 12px;*/
/*    font-weight: 700;*/
/*    letter-spacing: 0.5px;*/
/*    z-index: 5;*/
/*    box-shadow: 0 2px 15px rgba(217, 109, 0, 0.4);*/
/*    animation: pulseBadge 2s ease-in-out infinite;*/
/*    font-family: 'Montserrat', sans-serif;*/
/*}*/

/*@keyframes pulseBadge {*/
/*    0%, 100% {*/
/*        opacity: 1;*/
/*        transform: scale(1);*/
/*        box-shadow: 0 2px 15px rgba(217, 109, 0, 0.3);*/
/*    }*/
/*    50% {*/
/*        opacity: 0.9;*/
/*        transform: scale(1.03);*/
/*        box-shadow: 0 4px 25px rgba(217, 109, 0, 0.5);*/
/*    }*/
/*}*/
/* ==========================================================================
   БЛОК НАШИ НОВОСТИ (News Section Styles)
   ========================================================================== */
/* ==========================================================================
   БЛОК НАШИ НОВОСТИ (News Section Styles)
   ========================================================================== */
.news-section {
    padding: 80px 0;
    background-color: var(--light-bg);
}

.news-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

.news-card {
    background: #ffffff !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    border: 2px solid #ff7f00 !important;
    transition: all 0.4s ease !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 5px !important;
}

.news-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 0 30px rgba(255, 127, 0, 0.6), 0 0 60px rgba(255, 127, 0, 0.3) !important;
    border-color: #ff9d33 !important;
}

.news-thumb {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 20px 20px 0 0 !important;
}

/* ===== ДАТА - ЗЕЛЕНЫЙ ===== */
.news-date {
    font-size: 13px !important;
    color: #5D7625 !important;
    font-weight: 700 !important;
    margin: 10px 0 8px 0 !important;
    display: block !important;
    font-family: 'Nunito', sans-serif !important;
    padding: 0 5px !important;
}

.news-date i {
    color: #5D7625 !important;
    margin-right: 6px !important;
}

/* ===== ЗАГОЛОВОК - ЧЕРНЫЙ ===== */
.news-title {
    font-size: 18px !important;
    margin-bottom: 10px !important;
    color: #000000 !important;  /* ← ЧЕРНЫЙ */
    font-weight: 700 !important;
    font-family: 'Montserrat', sans-serif !important;
    line-height: 1.3 !important;
    padding: 0 5px !important;
}

/* ===== ТЕКСТ - ЧЕРНЫЙ ===== */
.news-excerpt {
    font-size: 14px !important;
    color: #000000 !important;  /* ← ЧЕРНЫЙ */
    margin-bottom: 15px !important;
    flex-grow: 1 !important;
    line-height: 1.6 !important;
    font-family: 'Nunito', sans-serif !important;
    padding: 0 5px !important;
}

/* ===== КНОПКА "ЧИТАТЬ ДАЛЕЕ" - ЗЕЛЕНАЯ, ПРИ НАВЕДЕНИИ ОРАНЖЕВАЯ ===== */
.news-detail-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 24px !important;
    background: linear-gradient(135deg, #5D7625 0%, #4a6b1a 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    font-family: 'Nunito', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 15px rgba(93, 118, 37, 0.25) !important;
    letter-spacing: 0.3px !important;
}

.news-detail-btn:hover {
    background: linear-gradient(135deg, #f4810d 0%, #d96d00 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(244, 129, 13, 0.4) !important;
    color: #ffffff !important;
}

.news-detail-btn i {
    font-size: 12px !important;
    transition: transform 0.3s ease !important;
    color: #a8d15a !important;
}

.news-detail-btn:hover i {
    color: #ffcc80 !important;
    transform: translateX(4px) !important;
}

/* ===== ДЕЙСТВИЯ В КАРТОЧКЕ ===== */
.news-actions {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: auto !important;
    padding: 5px !important;
    border-top: 1px solid rgba(244, 129, 13, 0.1) !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.share-buttons {
    display: flex !important;
    gap: 6px !important;
}

.share-buttons button {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1px solid #FFF4E6 !important;
    background: transparent !important;
    color: #a89f97 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
}

.share-buttons button:hover {
    background: #f4810d !important;
    color: #ffffff !important;
    border-color: #f4810d !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(244, 129, 13, 0.2) !important;
}

/* ===== АДАПТИВ ===== */
@media (max-width: 1024px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 25px !important;
    }
}

@media (max-width: 768px) {
    .news-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 15px !important;
    }

    .news-card {
        max-width: 100% !important;
        padding: 5px !important;
    }

    .news-thumb {
        height: 180px !important;
    }

    .news-title {
        font-size: 16px !important;
    }
}

@media (max-width: 480px) {
    .news-grid {
        padding: 0 10px !important;
        gap: 15px !important;
    }

    .news-card {
        padding: 5px !important;
    }

    .news-thumb {
        height: 160px !important;
    }

    .news-title {
        font-size: 15px !important;
    }

    .news-excerpt {
        font-size: 13px !important;
    }

    .news-detail-btn {
        padding: 8px 16px !important;
        font-size: 12px !important;
    }

    .share-buttons button {
        width: 30px !important;
        height: 30px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 360px) {
    .news-card {
        padding: 4px !important;
    }

    .news-thumb {
        height: 140px !important;
    }

    .news-title {
        font-size: 14px !important;
    }

    .news-excerpt {
        font-size: 12px !important;
    }
}