/* ========== ШРИФТЫ ========== */
@font-face {
    font-family: 'MTS Wide';
    src: url('../fonts/MTS-Wide-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MTS Wide';
    src: url('../fonts/MTS-Wide-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MTS Wide';
    src: url('../fonts/MTS-Wide-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MTS Compact';
    src: url('../fonts/MTS-Compact-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MTS Compact';
    src: url('../fonts/MTS-Compact-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rooftop';
    src: url('../fonts/Rooftop-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ========== ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ ========== */
:root {
    --color-purple: #6034D1;
    --color-pink: #F570A3;
    --color-dark: #1D2023;
    --color-light: #E6E8ED;
    --color-white: #FFFFFF;
    --color-gray: #9095A7;
    --color-light-gray: #F4F6FA;
}

/* ========== ГЛОБАЛЬНЫЕ СТИЛИ (для всех страниц) ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'MTS Compact', sans-serif;
    color: var(--color-dark);
    background: var(--color-white);
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'MTS Wide', sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: -0.02em;
}

p {
    font-family: 'MTS Compact', sans-serif;
    text-transform: none;
    font-weight: 400;
    letter-spacing: -0.02em;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease;
}

a:hover {
    opacity: 0.8;
}

/* Утилитарные классы */
.color-light {
    background: var(--color-light);
    padding-top: 10px;
}

.bg-white {
    background-color: var(--color-white) !important;
}

/* ========== БУТСТРАП ОВЕРРАЙДЫ ========== */
.container {
    max-width: 1280px;
    padding: 0 32px;
}

@media (max-width: 768px) {

    html,
    body {
        overflow-x: hidden;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }
}

.btn {
    font-family: 'MTS Wide', sans-serif;
    text-transform: none;
    border-radius: 30px;
    padding: 9px 22px 8px;
    font-size: 22px;
    line-height: 31px;
    border: none;
    transition: all 0.3s ease;
}

.btn-primary {
    background: linear-gradient(94.25deg, #745CF4 -0.47%, #5528C7 128.92%);
    color: var(--color-white);
}

.btn-primary:hover {
    background: linear-gradient(94.25deg, #5f4ad3 -0.47%, #3f1f9c 128.92%);
    color: var(--color-white);
}

.btn-dark {
    background: var(--color-dark);
    color: var(--color-white);
}

.btn-dark:hover {
    background: #2a2f33;
    color: var(--color-white);
}

.btn-outline-dark {
    background: var(--color-light);
    color: var(--color-dark);
    font-size: 18px;
}

.btn-outline-dark:hover {
    background: var(--color-dark);
    color: var(--color-white);
}

.btn-light {
    background: var(--color-white);
    color: var(--color-dark);
}

.btn-light:hover {
    background: #f0f0f0;
}

/* ========== ШАПКА И НАВИГАЦИЯ (все страницы) ========== */
.top-banner {
    background: var(--color-dark);
    color: var(--color-white);
    padding: 8px 0;
    font-family: 'Rooftop', sans-serif;
    font-size: 14px;
}

@media (max-width: 991px) {
    .top-banner {
        display: none;
    }
}

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

.top-banner-text {
    font-family: 'Rooftop', sans-serif;
    text-transform: uppercase;
}

.top-banner-action {
    background: linear-gradient(94.25deg, #745CF4 -0.47%, #5528C7 128.92%);
    border-radius: 30px;
    padding: 5px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.header {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(9px);
    padding: 17px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

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

.header-nav {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
}

@media (max-width: 992px) {
    .header-nav {
        display: none;
    }
}

.header-nav a {
    font-family: 'MTS Wide', sans-serif;
    font-size: 12px;
    line-height: 17px;
    text-transform: uppercase;
    color: var(--color-dark);
    padding: 8px 10px 7px;
    white-space: nowrap;
}

.header-right {
    flex-shrink: 0;
    margin-left: 10px;
}

.moon-widget {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.moon-image-wrapper {
    position: relative;
    display: inline-block;
}

.moon-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    transition: filter 0.3s ease;
}

.moon-image.blurred {
    filter: blur(2px) brightness(0.9);
}

.moon-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    background: #F570A3;
    border-radius: 50%;
    color: var(--color-white);
    font-family: 'MTS Wide', sans-serif;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    font-weight: 700;
    z-index: 10;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.moon-tooltip {
    position: absolute;
    top: 60px;
    left: 0;
    width: 270px;
    background: rgba(255, 188, 222, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(3.15px);
    border-radius: 12px;
    padding: 15px;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.moon-image-wrapper:hover .moon-tooltip,
.moon-tooltip.active {
    visibility: visible;
    opacity: 1;
}

.moon-tooltip.show {
    visibility: visible;
    opacity: 1;
}

.tooltip-content {
    color: var(--color-dark);
}

.tooltip-title {
    font-family: 'MTS Wide', sans-serif;
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: #F570A3;
}

.tooltip-text {
    font-family: 'MTS Compact', sans-serif;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 10px;
    color: #1D2023;
}

.tooltip-link {
    font-family: 'MTS Wide', sans-serif;
    font-size: 10px;
    line-height: 14px;
    text-transform: uppercase;
    color: #6034D1;
    text-decoration: none;
    display: inline-block;
}

.tooltip-link:hover {
    text-decoration: underline;
}

.moon-message {
    background: var(--color-dark);
    border-radius: 30px;
    padding: 9px 22px 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-white);
}

.moon-day {
    color: #FFE284;
    font-family: 'MTS Wide', sans-serif;
    font-size: 14px;
}

.moon-divider {
    width: 1px;
    height: 20px;
    background: #fff;
    display: inline-block;
    margin: 0 5px;
}

.moon-text {
    font-family: 'MTS Wide', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.menu-toggle {
    background: transparent;
    border: none;
    width: 30px;
    height: 30px;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.menu-toggle span {
    width: 20px;
    height: 2px;
    background: var(--color-dark);
    transition: all 0.3s ease;
}

.menu-toggle:hover {
    background: linear-gradient(94.25deg, #745CF4 -0.47%, #5528C7 128.92%);
}

.menu-toggle:hover span {
    background: white;
}

@media (max-width: 768px) {
    .header-right {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: 0;
    }

    .moon-widget {
        gap: 4px;
    }

    .moon-image {
        width: 40px;
        height: 40px;
    }

    .moon-badge {
        width: 16px;
        height: 16px;
        font-size: 9px;
        line-height: 16px;
        top: -2px;
        right: -2px;
    }

    .menu-toggle {
        width: 36px;
        height: 36px;
        margin-left: 4px;
    }

    .menu-toggle span {
        width: 18px;
        height: 2px;
    }
}

/* ========== МЕНЮ (десктопное и мобильное) ========== */
.desktop-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: auto;
    min-width: 900px;
    background: #F1F1F4;
    z-index: 2000;
    padding: 20px 20px 20px 80px;
    transition: right 0.3s ease;
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    height: 100vh;           /* ОДНО ОПРЕДЕЛЕНИЕ */
}

.desktop-menu-nav-wrapper {
    flex: 1 1 auto;          /* Занимает всё оставшееся пространство */
    overflow-y: auto;        /* Включаем вертикальный скролл */
    overflow-x: hidden;      /* Скрываем горизонтальный скролл */
    margin-right: -10px;     /* Компенсация для скроллбара (опционально) */
    padding-right: 10px;     /* Компенсация для скроллбара (опционально) */
}

/* Стилизация скроллбара (красиво) */
.desktop-menu-nav-wrapper::-webkit-scrollbar {
    width: 6px;
}

.desktop-menu-nav-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.desktop-menu-nav-wrapper::-webkit-scrollbar-thumb {
    background: #6034D1;
    border-radius: 10px;
}

.desktop-menu-nav-wrapper::-webkit-scrollbar-thumb:hover {
    background: #4a28a8;
}

.desktop-menu.active {
    right: 0;
}

.desktop-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    flex-shrink: 0;
}

.desktop-menu-close {
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2001;
    border: none;
    background: linear-gradient(90deg, #745CF4 0%, #5528C7 100%);
    opacity: 0.7;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.desktop-menu-close:hover {
    background: linear-gradient(90deg, #745CF4 0%, #5528C7 100%);
    opacity: 1;
}

.desktop-menu-close:hover::before,
.desktop-menu-close:hover::after {
    background: var(--color-white);
}

.desktop-menu-close::before,
.desktop-menu-close::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 2px;
    background: var(--color-white);
    transition: background 0.3s ease;
}

.desktop-menu-close::before {
    transform: rotate(45deg);
}

.desktop-menu-close::after {
    transform: rotate(-45deg);
}

.desktop-menu .calculate-btn {
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, #745CF4 0%, #5528C7 100%);
    border-radius: 60px;
    padding: 15px 25px;
    gap: 15px;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease;
    min-width: 280px;
}

.desktop-menu .calculate-btn:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

.desktop-menu .calculate-btn .btn-icon {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.desktop-menu .calculate-btn .btn-icon div {
    background: var(--color-white);
    border-radius: 2px;
    width: 6px;
    height: 6px;
}

.desktop-menu .calculate-btn .btn-text {
    line-height: 1.3;
    gap: 2px;
}

.desktop-menu .calculate-btn .btn-text span {
    font-family: 'MTS Wide', sans-serif;
    font-size: 18px;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--color-white);
    white-space: nowrap;
}

.desktop-menu nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
}

.desktop-menu .menu-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    position: relative;
    width: fit-content;
}

.desktop-menu .menu-number {
    font-family: 'MTS Compact', sans-serif;
    font-size: 13px;
    line-height: 18px;
    text-transform: uppercase;
    color: #6549F9;
    width: 30px;
    margin-right: 10px;
    transition: color 0.3s ease;
    font-weight: 400;
}

.desktop-menu a {
    font-family: 'MTS Wide', sans-serif;
    font-size: 25px;
    line-height: 35px;
    text-transform: uppercase;
    color: var(--color-dark);
    transition: all 0.3s ease;
    padding: 5px 20px;
    border-radius: 30px;
    margin-left: -15px;
    margin-right: -15px;
    font-weight: 500;
}

.desktop-menu a:hover {
    color: var(--color-purple);
    background: rgba(96, 52, 209, 0.05);
}

.desktop-menu a.active {
    background: var(--color-dark);
    color: var(--color-white);
}

.desktop-menu a.active+.menu-number {
    color: rgba(255, 255, 255, 0.7);
}

.desktop-menu-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0 20px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: auto;
    flex-shrink: 0;
    width: 100%;
    max-width: 550px;
}

.desktop-menu .shop-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.desktop-menu .shop-link {
    color: #6549F9;
    text-decoration: underline;
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase;
    font-family: 'Rooftop', sans-serif;
    width: fit-content;
    padding: 5px 0;
    font-weight: 500;
    transition: opacity 0.3s ease;
}

.desktop-menu .shop-link:hover {
    opacity: 0.8;
    color: #6549F9;
    background: transparent;
}

.desktop-menu .desktop-menu-social {
    display: flex;
    gap: 40px;
}

.desktop-menu .desktop-menu-social .social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid #1D2023;
    border-radius: 50%;
    transition: all 0.3s ease;
    background: transparent;
    position: relative;
}

/* Или просто звездочка */
.desktop-menu .desktop-menu-social .social-icon.restricted::after {
    content: '*';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 18px;
    font-weight: bold;
    color: #1D2023;
    z-index: 10;
}

.desktop-menu .desktop-menu-social .social-icon:hover {
    border-color: var(--color-purple);
    background: var(--color-purple);
    transform: scale(1.1);
}

.desktop-menu .desktop-menu-social .social-icon:hover img {
    filter: brightness(0) invert(1);
    opacity: 1;
}

.desktop-menu .desktop-menu-social .social-icon img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(0);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(3px);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 360px;
    height: 100vh;
    background: #F1F1F4;
    z-index: 2000;
    padding: 20px 20px 20px 30px;
    transition: right 0.3s ease;
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
    display: flex;           /* ← ДОБАВИТЬ! */
    flex-direction: column;  /* ← ДОБАВИТЬ! */
    overflow: hidden;        /* ← ДОБАВИТЬ! */
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-shrink: 0;          /* ← ДОБАВИТЬ! */
}

/* Обёртка для прокрутки */
.mobile-menu-nav-wrapper {
    flex: 1 1 auto;          /* ← ДОБАВИТЬ! */
    overflow-y: auto;        /* ← ДОБАВИТЬ! */
    overflow-x: hidden;      /* ← ДОБАВИТЬ! */
    margin-right: -10px;     /* ← ДОБАВИТЬ! */
    padding-right: 10px;     /* ← ДОБАВИТЬ! */
}

/* Стилизация скроллбара */
.mobile-menu-nav-wrapper::-webkit-scrollbar {
    width: 4px;
}

.mobile-menu-nav-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.mobile-menu-nav-wrapper::-webkit-scrollbar-thumb {
    background: #6034D1;
    border-radius: 10px;
}

/* Ссылки внизу - не скроллятся */
.mobile-menu .shop-links,
.mobile-menu .mobile-menu-social {
    flex-shrink: 0;
}

.mobile-menu-close {
    background: transparent;
    border: none;
    width: 30px;
    height: 30px;
    border: 1px solid #1D2023;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.mobile-menu-close::before,
.mobile-menu-close::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 2px;
    background: var(--color-dark);
}

.mobile-menu-close::before {
    transform: rotate(45deg);
}

.mobile-menu-close::after {
    transform: rotate(-45deg);
}

.mobile-menu .calculate-btn {
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, #745CF4 0%, #5528C7 100%);
    border-radius: 30px;
    padding: 8px 15px;
    gap: 8px;
    cursor: pointer;
    transition: opacity 0.3s ease;
    max-width: 140px;
}

.mobile-menu .calculate-btn:hover {
    opacity: 0.9;
}

.mobile-menu .calculate-btn .btn-icon {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.mobile-menu .calculate-btn .btn-icon div {
    background: var(--color-white);
    border-radius: 1px;
    width: 5px;
    height: 5px;
}

.mobile-menu .calculate-btn .btn-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    gap: 2px;
}

.mobile-menu .calculate-btn .btn-text span {
    font-family: 'MTS Wide', sans-serif;
    font-size: 8px;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--color-white);
    white-space: nowrap;
}

.mobile-menu nav {
    display: flex;
    flex-direction: column;
}

.mobile-menu .menu-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    position: relative;
    width: fit-content;
}

.mobile-menu .menu-number {
    font-family: 'MTS Compact', sans-serif;
    font-size: 9px;
    line-height: 13px;
    text-transform: uppercase;
    color: #4E3490;
    width: 25px;
    margin-right: 5px;
    transition: color 0.3s ease;
}

.mobile-menu a {
    font-family: 'MTS Wide', sans-serif;
    font-size: 16px;
    line-height: 22px;
    text-transform: uppercase;
    color: var(--color-dark);
    transition: all 0.3s ease;
    padding: 8px 15px;
    border-radius: 30px;
    margin-left: -15px;
    margin-right: -15px;
}

.mobile-menu a:hover {
    color: var(--color-purple);
    background: rgba(100, 100, 100, 0.05);
}

.mobile-menu a.active {
    background: var(--color-dark);
    color: var(--color-white);
}

.mobile-menu a.active+.menu-number {
    color: rgba(255, 255, 255, 0.7);
}

.mobile-menu .shop-links {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 20px;
}

.mobile-menu .shop-link {
    color: #6A4CE6;
    text-decoration: underline;
    font-size: 10px;
    line-height: 18px;
    text-transform: uppercase;
    font-family: 'MTS Wide', sans-serif;
    width: fit-content;
}

.mobile-menu .shop-link:hover {
    opacity: 0.8;
    color: #6A4CE6;
    background: transparent;
}

.mobile-menu .mobile-menu-social {
    display: flex;
    gap: 45px;
    margin-top: 30px;
    padding-left: 15px;
}

.mobile-menu .mobile-menu-social .social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #1D2023;
    border-radius: 50%;
    transition: all 0.3s ease;
    background: transparent;
    position: relative;
}

.mobile-menu .mobile-menu-social .social-icon.restricted::after {
    content: '*';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 18px;
    font-weight: bold;
    color: #1D2023;
    z-index: 10;
}

.mobile-menu .mobile-menu-social .social-icon:hover {
    border-color: var(--color-purple);
    transform: scale(1.05);
}

.mobile-menu .mobile-menu-social .social-icon img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(0);
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.mobile-menu .mobile-menu-social .social-icon:hover img {
    opacity: 1;
}

@media (max-width: 576px) {
    .mobile-menu .mobile-menu-social .social-icon {
        width: 36px;
        height: 36px;
    }

    .mobile-menu .mobile-menu-social .social-icon img {
        width: 16px;
        height: 16px;
    }
}

@media (min-width: 992px) {
    .mobile-menu {
        display: none;
    }

    .desktop-menu {
        display: flex;
    }
}

@media (max-width: 991px) {
    .desktop-menu {
        display: none;
    }

    .mobile-menu {
        display: flex;
    }
}

/* ========== СТРАНИЦА: Главная (index.html) ========== */

/* --- Секция hero --- */
.hero {
    padding: 80px 0;
    background: #DAE2E5;
    position: relative;
    overflow: hidden;
    min-height: 740px;
}

.hero-planet {
    position: absolute;
    width: 600px;
    height: 600px;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    background: url('../images/planet.png') no-repeat center;
    background-size: contain;
    z-index: 0;
    opacity: 0.8;
    pointer-events: none;
    border-radius: 50%;
}

/* ========== ТОЧКИ СТРАН И ДУГИ ПЕРЕЛЁТОВ ========== */

/* Контейнер для точек и SVG линий поверх планеты */
.planet-overlay {
    position: absolute;
    width: 600px;
    height: 600px;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    z-index: 5;
    pointer-events: none;
}

/* SVG контейнер для дуг */
.planet-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Стили для дуг (линий перелётов) */
.flight-arc {
    fill: none;
    stroke: rgba(255, 255, 255, 0.6);
    stroke-width: 1.5;
    stroke-dasharray: 4, 6;
    stroke-linecap: round;
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.3));
}

/* Анимированная линия (летящая точка) */
.flying-dot-arc {
    fill: none;
    stroke: #745CF4;
    stroke-width: 2.5;
    stroke-dasharray: 4, 96;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px #745CF4);
    animation: flyAlong 4s linear infinite;
}

@keyframes flyAlong {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -100;
    }
}

/* Разные скорости для разных маршрутов */
.flying-speed-1 { animation-duration: 3s; }
.flying-speed-2 { animation-duration: 3.8s; animation-delay: 0.5s; }
.flying-speed-3 { animation-duration: 4.5s; animation-delay: 1s; }
.flying-speed-4 { animation-duration: 5s; animation-delay: 1.5s; }
.flying-speed-5 { animation-duration: 3.5s; animation-delay: 2s; }
.flying-speed-6 { animation-duration: 4.2s; animation-delay: 0.8s; }

/* Точка страны */
.country-point {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #f570a3;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px white, 0 0 4px rgba(255,255,255,0.5);
    z-index: 3;
    pointer-events: auto;
    cursor: pointer;
    transition: all 0.3s ease;
}

.country-point::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    top: -1px;
    left: -1px;
    background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 30%);
    border-radius: 50%;
    box-shadow: 0 0 0 1px white;
}

.country-point:hover {
    transform: translate(-50%, -50%) scale(1.3);
    box-shadow: 0 0 15px white;
}

/* Название страны */
.country-name-label {
    position: absolute;
    color: black;
    font-family: 'MTS Compact', sans-serif;
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(2px);
    padding: 2px 6px;
    border-radius: 12px;
    border: 1px solid white;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
    letter-spacing: 0.3px;
    pointer-events: none;
    opacity: 0.85;
    z-index: 3;
    transition: opacity 0.3s ease;
}

.country-point:hover + .country-name-label,
.country-name-label:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.7);
}

/* Позиционирование меток в зависимости от стороны */
.name-label-right {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 10px;
}

.name-label-left {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 10px;
}

.name-label-top {
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    margin-bottom: 8px;
}

.name-label-bottom {
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    margin-top: 8px;
}

/* Адаптация для планшетов */
@media (max-width: 992px) {
    .planet-overlay {
        width: 600px;
        height: 600px;
    }
}

@media (max-width: 768px) {
    .planet-overlay {
        width: 600px;
        height: 600px;
    }
    
    .country-point {
        width: 6px;
        height: 6px;
    }
    
    .country-point::after {
        width: 14px;
        height: 14px;
        top: -4px;
        left: -4px;
    }
    
    .country-name-label {
        font-size: 7px;
        padding: 1px 4px;
    }
}

.hero .row {
    position: relative;
    z-index: 10;
}

.hero-title {
    font-size: 60px;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #1D2023;
    max-width: 400px;
}

.hero-description {
    font-family: 'MTS Compact', sans-serif;
    font-size: 22px;
    line-height: 26px;
    margin-bottom: 30px;
    color: #1D2023;
    max-width: 358px;
}

.hero-join-block {
    position: relative;
    width: 380px;
    height: 60px;
    margin-left: auto;
    margin-top: 30px;
    z-index: 15;
}

.join-button {
    position: relative;
    width: 380px;
    height: 60px;
    background: #1D2023;
    border-radius: 40px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
}

.join-button:hover {
    background: #2a2f33;
    transform: scale(1.02);
}

.join-text {
    font-family: 'MTS Wide', sans-serif;
    font-size: 20px;
    line-height: 28px;
    color: #FFFFFF;
    text-transform: uppercase;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
}

.join-icons {
    position: absolute;
    left: 10px;
    top: 5px;
    display: flex;
    align-items: center;
}

.join-icon-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    background: #F570A3;
    position: relative;
}

.join-icon-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.join-icon-image.first-icon {
    z-index: 2;
}

.join-icon-image.second-icon {
    margin-left: -15px;
    z-index: 3;
}

.join-icon-plus {
    width: 50px;
    height: 50px;
    background: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 4;
    position: relative;
}

.join-icon-plus span {
    font-family: 'MTS Wide', sans-serif;
    font-size: 28px;
    font-weight: 300;
    color: #1D2023;
    line-height: 1;
}

.join-circle-bg {
    position: absolute;
    width: 45px;
    height: 45px;
    left: 25px;
    top: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    z-index: 1;
    filter: blur(4px);
}

.hero-stats-wrapper {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1216px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid #FFFFFF;
    backdrop-filter: blur(2px);
    border-radius: 59px;
    padding: 20px 40px;
    z-index: 5;
}

.hero-stats-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.hero-stat-item {
    text-align: left;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-right: 20px;
}

.hero-stat-number {
    font-family: 'MTS Wide', sans-serif;
    font-size: 36px;
    line-height: 1.2;
    letter-spacing: -0.05em;
    color: #1D2023;
    display: block;
    margin-bottom: 15px;
    position: relative;
    white-space: nowrap;
}

.hero-stat-number::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #626C77;
    opacity: 0.3;
}

.hero-stat-label {
    font-family: 'MTS Wide', sans-serif;
    font-size: 11px;
    line-height: 15px;
    text-transform: uppercase;
    color: #1D2023;
    display: block;
    max-width: 120px;
    max-height: 15px;
}

/* --- Секция карточек (Индекс, Финансы, Исследование) --- */
.feature-cards {
    padding-top: 40px;
}

.feature-card {
    border-radius: 22px;
    padding: 22px;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.card-index {
background: url(../images/calculation-card1.png) no-repeat center center;
    background-size: cover;
    /* Растягивает изображение на весь блок, сохраняя пропорции */
    background-blend-mode: overlay, normal, normal, normal;
    color: var(--color-dark);
}

.card-finance {
    background: var(--color-dark);
    color: var(--color-white);
}

.card-research {
    background: var(--color-light-gray);
    color: var(--color-dark);
}

.card-content h3 {
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 80px;
}

.feature-cards .card-finance .card-content::before {
    content: '';
position: absolute;
right: 35px;
top: 30%;
transform: translateY(-50%);
width: 30px;
height: 30px;
background-color: #eb001b;
border-radius: 50%;
z-index: 1;
}

.feature-cards .card-finance .card-content::after {
    content: '';
position: absolute;
right: 15px;
top: 30%;
transform: translateY(-50%);
width: 30px;
height: 30px;
background-color: #f79e1b;
border-radius: 50%;
z-index: 2;
opacity: 0.85;
}

.card-content h3 .first-word {
    display: block;
}

@media (max-width: 768px) {
    .card-content h3 {
        font-size: 20px;
        line-height: 28px;
    }
}

.card-content p {
    font-family: 'MTS Compact', sans-serif;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 20px;
}

.progress-bar {
    background: var(--color-white);
    border-radius: 40px;
    height: 13px;
    margin: 15px 0;
}

.progress-fill {
    background: linear-gradient(90deg, #2E107B 0%, #6E30FF 100%);
    border-radius: 40px;
    height: 100%;
}

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

.progress-percent {
    font-family: 'MTS Wide', sans-serif;
    font-size: 25px;
    line-height: 23px;
}

.progress-label {
    font-family: 'MTS Wide', sans-serif;
    font-size: 12px;
    line-height: 14px;
    text-transform: uppercase;
}

.progress-label .first-word {
    display: block;
}

.card-arrow {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 32px;
    height: 32px;
    background: var(--color-white);
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.card-arrow svg {
    width: 18px;
    height: 18px;
}

/* --- Секция "О методе" --- */
.about-method {
    padding: 60px 0;
}

.method-photo {
    position: relative;
    width: 607px;
    height: 644px;
    background: #F6F7F9;
    border-radius: 32px;
    overflow: hidden;
    margin: 0 auto;
}

.method-photo img {
    position: absolute;
    width: 491px;
    height: 841px;
    left: 50%;
    transform: translateX(-50%);
    top: 22px;
    object-fit: cover;
    display: block;
}

.photo-overlay {
    position: absolute;
    width: 645px;
    height: 252px;
    left: 0;
    bottom: 0;
    background: linear-gradient(180.29deg, rgba(0, 0, 0, 0) 0.25%, rgba(0, 0, 0, 0.4) 99.75%);
    backdrop-filter: blur(1px);
    display: flex;
    align-items: flex-end;
    padding-bottom: 34.09px;
}

.photo-label {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 42px;
    line-height: 50px;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-left: 32px;
    width: 231px;
    word-break: break-word;
}

.method-text h2 {
    font-size: 32px;
    line-height: 38px;
    margin-bottom: 30px;
}

.method-text p {
    font-family: 'MTS Compact', sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 30px;
}

.method-text-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 644px;
}

.method-text {
    flex: 0 0 auto;
    margin-bottom: 20px;
}

.research-center-block {
    height: 175px;
    background: linear-gradient(0deg, #1D2023, #1D2023), linear-gradient(99.87deg, #615FEA -38.46%, #5522C4 97.52%), #1B0948;
    border-radius: 32px;
    position: relative;
    margin-top: auto;
    align-self: flex-start;
}

.research-center-content {
    padding: 22px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.research-center-text {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
    width: 544px;
    margin: 0 0 10px 0;
    text-transform: none;
}

.research-center-link {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    text-decoration-line: underline;
    text-transform: uppercase;
    color: #F570A3;
    position: absolute;
    left: 22px;
    bottom: 22px;
    transition: opacity 0.3s ease;
}

.research-center-link:hover {
    opacity: 0.8;
    color: #F570A3;
}

.research-center-arrow {
    position: absolute;
    right: 22px;
    bottom: 22px;
    width: 42px;
    height: 42px;
    background-color: #FFFFFF;
    background-image: url('../images/icons/arrow_right.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 18px 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

.research-center-arrow:hover {
    transform: scale(1.05);
    background-color: #f0f0f0;
    background-image: url('../images/icons/arrow_right.svg');
}

/* --- Секция "Матрица" --- */
.matrix-calculation {
    padding: 60px 0;
    background: var(--color-white);
    overflow: hidden;
}

.matrix-calculation-wrapper {
    max-width: 1216px;
    width: 100%;
    min-height: 728px;
    /* Минимальная высота */
    height: auto;
    /* Автоматическая высота */
    border: 1px solid #626C77;
    border-radius: 32px;
    background: #FFFFFF;
    position: relative;
    margin: 0 auto;
    padding-bottom: 30px;
    /* Добавляем отступ снизу для контента */
    overflow: visible;
    /* Разрешаем контенту выходить за пределы */
}

.matrix-title {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 38px;
    text-transform: uppercase;
    color: #1D2023;
    position: relative;
    /* Меняем с absolute на relative */
    width: 345px;
    left: 33px;
    top: 32px;
    z-index: 5;
    margin-bottom: 0;
    /* Убираем лишние отступы */
}

.matrix-content {
    display: flex;
    position: relative;
    width: 100%;
    min-height: 650px;
    /* Минимальная высота */
    height: auto;
    margin-top: 70px;
    /* Отступ для заголовка */
}

/* Левая часть с матрицей - теперь относительное позиционирование */
.matrix-left {
    position: relative;
    /* Меняем с absolute на relative */
    width: 485.5px;
    height: 597px;
    left: 33px;
    top: 0;
    flex-shrink: 0;
    /* Запрещаем сжиматься */
}

.matrix-diagram {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.matrix-table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.matrix-table tr {
    height: 20%;
}

.matrix-table td {
    border: 1px solid #626C77;
    padding: 8px;
    position: relative;
    text-align: center;
    vertical-align: middle;
}

.matrix-table td.__empty {
    background: transparent;
    border: none;
}

.td_title {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 10px;
    line-height: 14px;
    text-transform: uppercase;
    color: #1D2023;
    display: block;
    position: absolute;
    top: 4px;
    left: 4px;
    margin: 0;
    text-align: left;
    z-index: 2;
}

.td_number {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 700;
    font-size: 25px;
    line-height: 1.2;
    color: #1D2023;
    display: block;
    text-align: center;
    margin: 0 auto;
    z-index: 1;
}

.matrix-logo {
    position: absolute;
    width: 197px;
    height: 26px;
    right: 0px;
    bottom: 80px;
    z-index: 3;
}

.matrix-right {
    position: relative;
    /* Меняем с absolute на relative */
    left: 57px;
    /* Уменьшаем отступ */
    top: 0;
    width: 612px;
    min-height: 600px;
    height: auto;
    flex-shrink: 0;
}

.matrix-description {
    font-family: 'MTS Compact', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #1D2023;
    width: 575px;
    margin-top: 30px;
}

.matrix-form-wrapper {
    width: 100%;
    /* Меняем на 100% */
    max-width: 612px;
    /* Максимальная ширина */
    height: auto;
    min-height: 136px;
    background: #F6F7F9;
    border-radius: 22px;
    padding: 22px 16px;
    margin-bottom: 20px;
    box-sizing: border-box;
    /* Учитываем padding в ширине */
}

.form-header {
    margin-bottom: 15px;
}


.form-header .form-label {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase;
    color: #1D2023;
    display: block;
}

.form-content {
    width: 100%;
    margin-bottom: 20px;
}

.date-input-group {
    display: flex;
    gap: 16px;
    align-items: center;
    width: 100%;
}

.date-input-field {
    flex: 1;
    height: 52px;
    background: #FFFFFF;
    border: 1px solid #9095A7;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
}

.matrix-calculation-wrapper input {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 23px;
    text-transform: uppercase;
    color: #9095A7;
}

.matrix-calculation .calculate-btn {
    width: 188px;
    height: 52px;
    background: var(--color-dark);/*linear-gradient(94.25deg, #745CF4 -0.47%, #5528C7 128.92%);*/
    border-radius: 30px;
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 31px;
    color: #F1F1F4;
    padding: 9px 22px 8px;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========== РАСШИФРОВКА МАТРИЦЫ ========== */
.matrix-interpretation {
    position: relative;
    width: 100%;
    max-width: 612px;
    margin-top: 30px;
    padding: 20px 0 20px 0;
    background: transparent;
    color: #FFFFFF;
}

/* Заголовок число судьбы */
.interpretation-header {
    background: linear-gradient(117.6deg, #EA3C3A -36.29%, #FDA6C6 48.51%, #E86998 115.92%, #9A76D7 171.17%);
    position: relative;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 26px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.header-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.header-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.destiny-number-title {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 0;
}

.destiny-number {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 45px;
    line-height: 63px;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 0;
    white-space: nowrap;
}

.destiny-description {
    font-family: 'MTS Compact', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #FFFFFF;
    margin: 0;
}


/* Сетка чисел */
.numbers-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.number-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    border-radius: 40px;
    padding: 0 20px;
    min-height: 72px;
}

.number-value {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 45px;
    line-height: 63px;
    text-transform: uppercase;
    color: #FFFFFF;
    text-align: right;
    order: 2;
    /* Перемещаем значение справа */
}

.number-label {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    text-transform: uppercase;
    color: var(--color-white);
    order: 1;
    /* Перемещаем текст слева */
    margin-right: 20px;
}

/* Разные стили для бейджей */
.number-item:nth-child(1) {
    background: linear-gradient(90deg, #7259F2 0%, #42338C 133.13%);
}

.number-item:nth-child(2) {
    background: linear-gradient(90deg, #7259F2 0%, #42338C 122.52%);
}

.number-item:nth-child(3) {
    background: linear-gradient(90deg, #7259F2 0%, #42338C 124.52%);
}

.number-item:nth-child(n+4) {
    background: #FFFFFF;
    border: 1px solid #9095A7;
}

/* Стили для белых карточек */
.number-item:nth-child(n+4) .number-label {
    color: #1D2023;
}

.number-item:nth-child(n+4) .number-value {
    color: #1D2023;
}

/* Кнопка расшифровки */
.btn-decode {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    text-transform: uppercase;
    color: #FFFFFF;
    background: linear-gradient(90deg, #745CF4 0%, #5528C7 100%);
    border: none;
    border-radius: 40px;
    width: 100%;
    max-width: 575px;
    height: 72px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 60px;
    /* Увеличиваем отступ справа, чтобы текст не налезал на иконку */
}

.btn-decode::after {
    content: '';
    position: absolute;
    right: 20px;
    /* Прижимаем к правому краю с отступом 20px */
    top: 50%;
    transform: translateY(-50%);
    width: 70px;
    /* Задаем размер иконки */
    height: 70px;
    background-image: url("../images/key.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.btn-decode:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
    .matrix-interpretation {
        padding: 10px;
    }

    .interpretation-header {
        flex-direction: row !important;
        /* Возвращаем горизонтальное расположение */
        align-items: center !important;
        /* Выравниваем по центру вертикально */
        justify-content: space-between !important;
        /* Распределяем пространство */
        gap: 10px;
        /* Добавляем небольшой отступ между элементами */
    }

    .header-left {
        flex: 1;
        /* Заголовок занимает доступное пространство */
    }

    .header-right {
        align-self: flex-start;
    }

    .destiny-number {
        font-size: 36px;
        line-height: 50px;
    }

    .destiny-number-title {
        font-size: 18px;
    }

    .destiny-number {
        font-size: 36px;
        line-height: 50px;
    }

    .number-item {
        padding: 0 15px;
        min-height: 60px;
    }

    .number-value {
        font-size: 30px;
        line-height: 42px;
    }

    .number-label {
        font-size: 16px;
        line-height: 22px;
    }

    .btn-decode {
        width: 100%;
        font-size: 16px;
        /*height: 60px;*/
    }

    .destiny-description {
        max-width: 100%;
    }
}

/* ========== СТИЛИ ДЛЯ MATRIX-ROW ========== */
.matrix-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 20px;
}

/* Родительский контейнер matrix-badge - должен быть относительным */
.matrix-badge {
    flex: 1;
    height: 52px;
    background: #FFFFFF;
    border: 1px solid #9095A7;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 50px 0 20px;  /* Добавляем отступ справа для иконки */
    position: relative;       /* Важно! Для позиционирования иконки */
}

/* Иконка копирования - позиционируем абсолютно внутри matrix-badge */
.matrix-badge .gender-stack {
    position: absolute;
    right: 10px;              /* Отступ от правого края */
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background-image: url(../images/icons/copy_black.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 18px 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 50%;
}

/* Ховер эффект для иконки */
.matrix-badge .gender-stack:hover {
    transform: translateY(-50%) scale(1.1);
    background-color: rgba(96, 52, 209, 0.1);
}

/* Общие стили для gender-stack (для других мест, где нет matrix-badge) */
.gender-stack {
    width: 42px;
    height: 42px;
    background-image: url(../images/icons/copy_black.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 50%;
}


/* Основной контейнер */
/* ПК версия */
.archetype-card {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.archetype-block {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Мобильная версия */
@media (max-width: 768px) {
    .archetype-card {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }
    
    .archetype-block {
        width: 100%;
        justify-content: flex-start;
    }
    
    /* Опционально: скрыть стрелки на мобильных */
    .avatar-archetype-men::after,
    .avatar-archetype-women::after {
        display: none;
    }
}

/* Контейнер для аватарок с перекрытием */
.archetype-avatars {
    position: relative;
    display: flex;
    align-items: center;
}

/* Круг с гендером */
.gender-circle-men {
    background: #7245FF;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-image: url('../images/icons/gender_men.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    position: relative;
    z-index: 2;
}

.gender-circle-women {
    background: #F570A3;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-image: url('../images/icons/gender_women.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    position: relative;
    z-index: 2;
}

/* Аватар с обводкой и кнопкой play */
.avatar-archetype {
    position: relative;
    margin-left: -8px; /* Перекрытие - регулируйте значение */
    z-index: 1;
}

.avatar-img-men {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #7245FF; /* Обводка */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    background: #fff;
}

.avatar-img-women {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #F570A3; /* Обводка */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    background: #fff;
}

.avatar-archetype-men::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 6px;
    border-color: transparent transparent transparent #7245FF;
}

.avatar-archetype-women::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 6px;
    border-color: transparent transparent transparent #F570A3;
}

/* Текст справа */
.archetype-men {
    display: flex;
    color: #7245FF;
    flex-direction: column;
}

.archetype-women {
    display: flex;
    color: #F570A3;
    flex-direction: column;
}

.archetype-name {
    font-size: 14px;
    line-height: 1.3;
}

.archetype-role {
    font-size: 14px;
    line-height: 1.3;
}

.matrix-text {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 23px;
    text-transform: uppercase;
    color: #1D2023;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.matrix-calculation-wrapper .gender-stack {
    width: 52px;
    height: 52px;
    background: #E86998;
    background-image: url(../images/icons/copy.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 18px 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
    .matrix-row {
        gap: 6px;
        margin-bottom: 15px;
    }

    .matrix-badge {
        height: 42px;
        padding: 0 12px;
    }
    
    .matrix-calculation-wrapper .gender-stack {
        width: 42px;
        height: 42px;
    }

    .matrix-text {
        font-size: 11px;
        line-height: 16px;
        white-space: normal;
        word-break: break-word;
    }
}

@media (max-width: 576px) {
    .matrix-row {
        gap: 4px;
    }

    .matrix-badge {
        height: 38px;
    }
    
    .matrix-calculation-wrapper .gender-stack {
        width: 38px;
        height: 38px;
    }

    .matrix-text {
        font-size: 9px;
        line-height: 14px;
    }
}

/* --- Секция карточек расчета (Индекс, Финансы) --- */
.calculation-cards {
    padding: 60px 0;
    background: var(--color-white);
}

.calculation-cards-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    max-width: 1280px;
    height: 350px;
    margin: 0 auto;
}

.calculation-card {
    width: 602px;
    height: 350px;
    border-radius: 32px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.calculation-card.card-index {
    background: url(../images/calculation-card1.png) no-repeat center center;
    background-size: cover;
    /* Растягивает изображение на весь блок, сохраняя пропорции */
    background-blend-mode: overlay, normal, normal, normal;
}

.card-index .card-bg-decoration {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.card-index .decoration-line {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    transform-origin: center;
}

.calculation-card .card-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 22px;
}

.calculation-card .card-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 12px;
    width: 372px;
}

.card-index .card-title {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 38px;
    text-transform: uppercase;
    color: #1A0069;
    margin: 0;
    width: 351px;
}

.card-index .card-description {
    font-family: 'MTS Compact', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #1D2023;
    margin: 0;
}

.card-calculate-btn {
    position: absolute;
    left: 22px;
    bottom: 22px;
    width: 300px;/*200px;*/
    height: 52px;
    border-radius: 30px;
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 30px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-index .card-calculate-btn {
    background: #FFFFFF;
    border: 1px solid #FFFFFF;
    color: #1D2023;
}

.card-index .hearts-decoration {
    position: absolute;
    width: 322px;
    height: 312px;
    left: 291px;
    top: 110px;
    opacity: 0.6;
    pointer-events: none;
}

.card-index .hearts-decoration svg {
    width: 100%;
    height: 100%;
    fill: rgba(255, 255, 255, 0.6);
}

.calculation-card.card-finance {
    background: #BBEE9A;/*#F6F7F9;*/
}

.card-finance .card-text {
    width: 396px;
}

.card-finance .card-title {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 38px;
    text-transform: uppercase;
    color: #1D2023;
    margin: 0;
    width: 290px;
}

.card-finance .card-description {
    font-family: 'MTS Compact', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #1D2023;
    margin: 0;
    width: 396px;
}

.card-finance .card-calculate-btn {
    background: var(--color-dark);/*linear-gradient(94.25deg, #745CF4 -0.47%, #5528C7 128.92%);*/
    color: #FFFFFF;
    border: none;
}

.card-finance .card-calculate-btn::before {
    content: '';
position: absolute;
right: 35px;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
background-color: #eb001b;
border-radius: 50%;
z-index: 1;
}

.card-finance .card-calculate-btn::after {
    content: '';
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
background-color: #f79e1b;
border-radius: 50%;
z-index: 2;
opacity: 0.85;
}

.card-finance .finance-decoration {
    position: absolute;
    width: 353.73px;
    height: 282px;
    left: 281px;
    top: 135px;
    pointer-events: none;
    z-index: 1;
}

/* Исправление для блока calculation-cards на маленьких десктопах */
@media (min-width: 992px) and (max-width: 1199px) {
    .calculation-cards-wrapper {
        max-width: 100%;
        gap: 12px;
        justify-content: center;
    }

    .calculation-card {
        width: 500px;
        /* Немного уменьшаем фиксированную ширину */
        height: 320px;
    }

    .card-index .card-title,
    .card-finance .card-title {
        font-size: 28px;
        line-height: 34px;
    }
}

/* Исправление для блока calculation-cards на планшетах */
@media (min-width: 769px) and (max-width: 991px) {
    .calculation-cards-wrapper {
        max-width: 100%;
        width: 100%;
        height: auto;
        gap: 12px;
        justify-content: center;
    }

    .calculation-card {
        width: calc(50% - 6px);
        /* Каждая карточка занимает половину ширины минус половина gap */
        max-width: 450px;
        /* Ограничиваем максимальную ширину */
        height: 300px;
        /* Немного уменьшаем высоту для планшетов */
        flex-shrink: 1;
        /* Разрешаем сжиматься */
    }

    .calculation-card .card-text {
        width: 100%;
    }

    .card-index .card-title,
    .card-finance .card-title {
        font-size: 24px;
        line-height: 30px;
        width: 100%;
    }

    .card-index .card-description,
    .card-finance .card-description {
        font-size: 14px;
        line-height: 20px;
        width: 100%;
    }

    .card-calculate-btn {
        width: 180px;
        font-size: 18px;
        height: 46px;
    }

    /* Декоративные элементы */
    .card-index .hearts-decoration,
    .card-finance .finance-decoration {
        opacity: 0.3;
        width: 200px;
        right: 10px;
    }
}

@media (max-width: 768px) {
    .calculation-cards-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;
        gap: 20px;
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .calculation-card {
        width: 100%;
        max-width: 500px;
        height: 300px;
        flex-shrink: 1;
        margin: 0 auto;
    }

    .calculation-card .card-text {
        width: 100%;
        max-width: 100%;
    }

    .card-index .card-title,
    .card-finance .card-title {
        font-size: 20px;
        line-height: 26px;
        width: 100%;
    }

    .card-index .card-description,
    .card-finance .card-description {
        font-size: 16px;
        line-height: 22px;
        width: 100%;
    }

    .card-calculate-btn {
        width: 300px;
        font-size: 22px;
    }

    .card-index .hearts-decoration,
    .card-finance .finance-decoration {
        opacity: 0.3;
        width: 200px;
        right: 10px;
    }
}

/* --- Секция "Отзывы" с бесконечным скроллом --- */
.reviews {
    overflow: hidden;
    position: relative;
}

.reviews .container {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
}

.reviews-wrapper {
    position: relative;
    width: 100%;
    background: #E6E8ED;
    border-radius: 32px;
    padding: 40px 0 60px;
}

.reviews-title {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 38px;
    text-transform: uppercase;
    color: #1D2023;
    padding-left: 20px;
    margin-bottom: 40px;
}

/* Бесконечный скролл контейнер */
.reviews-infinite-scroll {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 20px 0 40px;
}

.reviews-scroll-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    cursor: grab;
    user-select: none;
    
    /* Скрываем скроллбар полностью */
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
}

.reviews-scroll-wrapper::-webkit-scrollbar {
    display: none;  /* Chrome/Safari/Opera */
}

.reviews-scroll-wrapper:active {
    cursor: grabbing;
}

.reviews-scroll-track {
    display: flex;
    gap: 30px;
    width: fit-content;
    padding: 20px 0;
}

/* Каждая копия отзывов */
.reviews-scroll-clone {
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    grid-auto-columns: minmax(80px, 100px);
    gap: 20px 30px;
    padding: 10px 0;
}

/* Элемент отзыва */
.review-infinite-item {
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.5;
    transform: scale(0.85);
    filter: blur(1px);
}

/* Активный элемент - увеличенный */
.review-infinite-item.active {
    opacity: 1;
    transform: scale(1.15);
    filter: blur(0);
    z-index: 10;
}

.review-infinite-item.active .avatar-image {
    border: 3px solid #6034D1;
    box-shadow: 0 0 0 4px rgba(96, 52, 209, 0.3), 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Ближайшие к активному элементы (немного увеличены) */
.review-infinite-item.near-active {
    opacity: 0.75;
    transform: scale(0.95);
    filter: blur(0.3px);
}

/* Аватарка */
.avatar-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0 auto;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.review-infinite-item.active .avatar-image {
    width: 92px;
    height: 92px;
    margin: -6px auto;
}

/* ========== БЛОК С ТЕКСТОМ АКТИВНОГО ОТЗЫВА ========== */
.reviews-active-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px 20px;
}

.active-review-text {
    background: linear-gradient(117.6deg, #EA3C3A -36.29%, #FDA6C6 48.51%, #E86998 115.92%, #9A76D7 171.17%);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    color: var(--color-white);
}

/* Верхняя строка: левая часть (имя + возраст) и правая часть (город + профессия) */
.active-review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 15px;
}

/* Левая часть (имя и возраст в одной строке) */
.active-review-left {
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex-wrap: wrap;
}

.active-review-name {
    font-family: 'MTS Wide', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    margin: 0;
}

.active-review-age {
    font-family: 'MTS Compact', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    margin: 0;
}

.active-review-name:after {
    content: "/";
    margin-left: 5px;
}

/* Правая часть (город и профессия) */
.active-review-meta {
    text-align: right;
}

.active-review-meta span {
    font-family: 'MTS Compact', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    display: inline-block;
}

.active-review-city:after {
    content: "/";
    margin: 0 4px;
}

/* Описание отзыва */
.active-review-description {
    font-family: 'MTS Compact', sans-serif;
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 25px;
}

/* Нижняя строка с ником */
.active-review-footer {
    padding-top: 20px;
}

.active-review-nickname {
    font-family: 'MTS Compact', sans-serif;
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
    text-transform: uppercase;
}

/* Навигация со счетчиком - СКРЫВАЕМ */
.reviews-navigation {
    display: none;
}

/* ========== АДАПТИВ ========== */
@media (max-width: 768px) {
    .reviews-wrapper {
        padding: 30px 0 40px;
    }
    
    .reviews-title {
        font-size: 24px;
        padding-left: 15px;
    }
    
    .reviews-scroll-clone {
        grid-auto-columns: minmax(60px, 70px);
        gap: 12px 15px;
    }
    
    .avatar-image {
        width: 60px;
        height: 60px;
    }
    
    .review-infinite-item.active .avatar-image {
        width: 70px;
        height: 70px;
        margin: -5px auto;
    }
    
    .active-review-text {
        padding: 25px;
    }
    
    .active-review-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .active-review-meta {
        text-align: left;
    }
    
    .active-review-name,
    .active-review-age,
    .active-review-meta span {
        font-size: 12px;
    }
    
    .active-review-description {
        font-size: 12px;
    }
}

@media (max-width: 576px) {
    .reviews-scroll-clone {
        grid-auto-columns: minmax(50px, 60px);
        gap: 10px 12px;
    }
    
    .avatar-image {
        width: 50px;
        height: 50px;
    }
    
    .review-infinite-item.active .avatar-image {
        width: 58px;
        height: 58px;
        margin: -4px auto;
    }
}

@media (max-width: 480px) {
    .active-review-text {
        padding: 20px;
    }
}

/* --- Секция "Компании" --- */
.companies-carousel {
    padding: 60px 0;
    background: var(--color-white);
    overflow: hidden;
    position: relative;
}

.companies-carousel .container {
    max-width: 1280px;
    padding: 0 32px;
}

.companies-header {
    margin-bottom: 40px;
    max-width: 854px;
}

.companies-header h2 {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 38px;
    text-transform: uppercase;
    color: #1D2023;
    margin-bottom: 12px;
}

.companies-header p {
    font-family: 'MTS Compact', sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 26px;
    color: #1D2023;
}

.companies-swiper {
    overflow: visible;
    margin: 0 -70px;
    padding: 0 70px;
}

.companies-swiper .swiper-wrapper {
    transition-timing-function: linear !important;
}

.companies-swiper .swiper-slide {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.company-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    min-width: 150px;
}

.company-logo svg {
    width: 100%;
    height: auto;
    max-width: 150px;
    max-height: 60px;
    transition: transform 0.3s ease;
}

@media (max-width: 768px) {
    .companies-header h2 {
        font-size: 20px;
        line-height: 100%;
    }

    .companies-header p {
        font-size: 16px;
        line-height: 26px;
    }

}

/* --- Секция "История и исследование" --- */
.history-research {
    padding: 60px 0;
    background: var(--color-white);
    overflow: hidden;
}

.history-research .container {
    max-width: 1280px;
    padding: 0 32px;
}

.history-research-wrapper {
    display: flex;
    gap: 12px;
    align-items: stretch;
    width: 100%;
}

.history-block {
    flex: 1;
    max-width: calc(50% - 6px);
    border-radius: 32px;
    overflow: hidden;
    background: #F6F7F9;
    position: relative;
}

.history-image {
    width: 100%;
    height: 600px;
    aspect-ratio: 602/374;
    overflow: hidden;
    position: relative;
}

.history-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.image-center-content {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 3;
    width: 100%;
    max-width: 500px;
    padding: 0 20px;
    pointer-events: none;
}

.image-center-content .center-title {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 38px;
    text-transform: uppercase;
    color: #FFFFFF;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.image-center-content span {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    text-transform: uppercase;
    color: #FFFC97;
    margin-bottom: 20px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.image-center-content .center-btn {
    pointer-events: auto;
    min-width: 200px;
    background: var(--color-dark);
    color: var(--color-white);
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
}

.image-overlay-block {
    position: absolute;
    bottom: 20px;
    left: 30px;
    width: 551px;
    max-width: calc(100% - 60px);
    background: #FFFFFF;
    border-radius: 20px;
    padding: 20px 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 2;
    backdrop-filter: blur(5px);
    transition: transform 0.3s ease;
}

.overlay-title {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 38px;
    text-transform: uppercase;
    color: #1D2023;
    margin-bottom: 5px;
}

.overlay-subtitle {
    font-family: 'MTS Compact', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #1D2023;
    opacity: 0.9;
}

.research-block {
    flex: 1;
    max-width: calc(50% - 6px);
    background: var(--color-light-gray);
    border-radius: 32px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    aspect-ratio: 602/374;
}

.research-block-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.research-header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
}

.research-text {
    max-width: 478px;
}

.research-text h3 {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 38px;
    text-transform: uppercase;
    color: #1D2023;
    margin-bottom: 12px;
    max-width: 478px;
}

.research-text p {
    font-family: 'MTS Compact', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #1D2023;
    max-width: 389px;
}

.research-arrow {
    width: 42px;
    height: 42px;
    background-color: #FFFFFF;
    background-image: url(../images/icons/arrow_right.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 18px 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.research-arrow:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.research-arrow svg {
    width: 18px;
    height: 18px;
}

.research-arrow svg path {
    stroke: #1D2023;
    stroke-width: 2;
}

.research-progress {
    margin-top: auto;
    position: relative;
    padding-top: 20px;
    flex-shrink: 0;
}

.progress-stats-wrapper {
    position: relative;
    width: 100%;
    height: 40px;
    margin-top: 15px;
}

.progress-label-static {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: #1D2023;
    opacity: 0.8;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.progress-value-tracker {
    position: absolute;
    top: 25px;
    left: 0;
    width: 100%;
    height: 20px;
    pointer-events: none;
    z-index: 2;
}

.progress-value {
    position: absolute;
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 32px;
    text-transform: uppercase;
    color: #1D2023;
    transition: left 0.3s ease;
    white-space: nowrap;
    transform: translateX(-50%);
    left: 87%;
}

.progress-track-container {
    position: relative;
    width: 100%;
    height: 43px;
    margin-bottom: 30px;
}

.progress-track-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #FF8F8F 0.19%, #FFD960 39.94%, #59BAFE 73.47%, #8DF07C 99.81%);
    border-radius: 30px;
    z-index: 1;
}

.progress-segments {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    gap: 4px;
    z-index: 2;
    pointer-events: none;
}

.progress-segment {
    flex: 1;
    height: 100%;
    background: transparent;
    position: relative;
    border-radius: 20%;
}

.progress-segments:not(.progress-segments-active) .progress-segment:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0;
    right: -4px;
    width: 4px;
    height: 100%;
    background: #FFFFFF;
    z-index: 3;
    pointer-events: none;
    border-radius: 0;
}

.progress-fill-custom {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 87%;
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
}

.progress-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
}

.decoration-dot {
    position: absolute;
    left: 87%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #1D2023;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    z-index: 5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: left 0.3s ease;
}

.decoration-line {
    position: absolute;
    left: 87%;
    top: 100%;
    transform: translateX(-50%);
    width: 2px;
    height: 25px;
    background: #1D2023;
    opacity: 0.3;
    z-index: 4;
    transition: left 0.3s ease;
}

/* --- Секция "Быстрые ответы" --- */
.quick-answers {
    padding: 60px 0;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

.quick-answers-title {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 45px;
    text-transform: uppercase;
    color: #1D2023;
    margin-bottom: 40px;
}

.quick-answers-swiper {
    padding: 20px 5px 60px;
    overflow: visible;
}

.quick-answers-swiper .swiper-wrapper {
    display: flex;
}

.quick-answers-swiper .swiper-slide {
    width: 323px;
    height: auto;
    transition: transform 0.3s ease;
}

.audio-card {
    width: 100%;
    height: 388px;
    border-radius: 32px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.card-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
    z-index: 1;
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.card-content-wrapper {
    position: relative;
    z-index: 3;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
}

.audio-card .card-title {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 28px;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-bottom: 15px;
    width: 162px;
    position: relative;
}

.audio-card .card-description {
    font-family: 'MTS Compact', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #FFFFFF;
    margin-bottom: 0;
    width: 100%;
}

.audio-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 20px;
}

.btn-audio {
    background: #FFFFFF;
    border: none;
    border-radius: 30px;
    padding: 10px 30px;
    font-family: 'MTS Wide', sans-serif;
    font-size: 22px;
    line-height: 31px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #1D2023;
    width: 100%;
    display: inline-flex;
    align-items: center;
    border: none;
    position: relative;
    z-index: 3;
}

.audio-play-icon {
    width: 50px;
    height: 50px;
    background: #FFFFFF url('../images/icons/play.svg') no-repeat center center;
    background-size: 18px 18px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    margin-left: auto;
}

.audio-play-icon:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background-color: #f0f0f0;
}

.audio-play-icon svg {
    width: 18px;
    height: 18px;
}

.audio-play-icon svg path {
    stroke: #1D2023;
    stroke-width: 2;
}

.share-icon {
    width: 50px;
    height: 50px;
    background: #FFFFFF url('../images/icons/share.svg') no-repeat center center;
    background-size: 28px 28px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    margin-left: auto;
}

.share-icon:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background-color: #f0f0f0;
}

.share-icon svg {
    width: 18px;
    height: 18px;
}

.share-icon svg path {
    stroke: #1D2023;
    stroke-width: 2;
}

/* --- Секция "Журнал" --- */
.magazine {
    padding: 60px 0;
    background: var(--color-white);
}

.magazine h2 {
    font-size: 32px;
    line-height: 38px;
    margin-bottom: 30px;
}

.magazine p {
    font-family: 'MTS Compact', sans-serif;
    font-size: 16px;
    line-height: 20px;
    position: relative;
    z-index: 1;
}

.magazine .gradient-text {
    background: linear-gradient(94.25deg, #745CF4 -0.47%, #5528C7 128.92%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    display: inline-block;
}

.magazine .paragraph-bg {
    position: relative;
    display: inline-block;
}

.magazine .bg-svg-decoration {
    position: absolute;
    right: 5px;
    top: 90%;
    transform: translateY(-50%);
    width: 185px;
    height: 87px;
    background-image: url('../images/icons/decoration-line.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
}


.magazine-form {
    background: var(--color-light-gray);
    border-radius: 32px;
    padding: 30px;
}

.magazine-form h3 {
    font-size: 18px;
    line-height: 25px;
    margin-bottom: 20px;
}

.magazine-form .form-control {
    border-radius: 30px;
    border: none;
    padding: 12px 16px;
    margin-bottom: 15px;
}

.magazine-form .form-control:not(.is-invalid) {
    border: 1px solid var(--color-gray);
}

.magazine-form .form-control.is-invalid {
    border: 1px solid #dc3545;
}

.magazine-form .form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 0 0 20px 0;
    position: relative;
    cursor: pointer;
}

.magazine-form .form-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.magazine-form .form-check label {
    font-family: 'MTS Compact', sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-gray);
    cursor: pointer;
    padding-left: 30px;
    position: relative;
    user-select: none;
}

.magazine-form .form-check label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: var(--color-white);
    border: 2px solid var(--color-gray);
    border-radius: 6px;
    transition: all 0.3s ease;
}

.magazine-form .form-check:hover label::before {
    border-color: var(--color-purple);
}

.magazine-form .form-check input[type="checkbox"]:checked+label::before {
    background: linear-gradient(94.25deg, #745CF4 -0.47%, #5528C7 128.92%);
    border-color: transparent;
}

.magazine-form .form-check input[type="checkbox"]:checked+label::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    animation: checkmark 0.2s ease-in-out;
}

.magazine-form .btn {
    width: 100%;
}

@keyframes checkmark {
    0% {
        opacity: 0;
        transform: translateY(-50%) rotate(45deg) scale(0.8);
    }

    100% {
        opacity: 1;
        transform: translateY(-50%) rotate(45deg) scale(1);
    }
}

.magazine-form .form-row {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
    width: 100%;
}

.magazine-form .form-row .form-control {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

/* ========== МОБИЛЬНАЯ СТАТИСТИКА (для index.html) ========== */
.mobile-stats {
    display: none;
}

@media (max-width: 992px) {
    .mobile-stats {
        display: block;
        position: relative;
        width: 100%;
        padding-top: 0;
        margin: 0;
        min-height: 600px;
    }

    .mobile-stats-container {
        position: relative;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        height: auto;
        min-height: 500px;
        padding: 0 16px;
    }

    .mobile-stat-card {
        position: absolute;
        background: rgba(144, 149, 167, 0.15);
        border-radius: 19.04px;
        padding: 16px 0 0 16px;
        backdrop-filter: blur(5px);
    }

    .mobile-stat-card.promo-card {
        display: block;
        position: relative;
        width: 100%;
        max-width: 100%;
        height: auto;
        left: 0;
        top: 0;
        transform: none;
        background: transparent;
        border-radius: 0;
        padding: 20px 0;
        margin-bottom: 30px;
        box-shadow: none;
        backdrop-filter: none;
        text-align: left;
    }

    .mobile-stat-card.promo-card .promo-title {
        display: block;
        font-family: 'MTS Wide', sans-serif;
        font-size: 42px;
        line-height: 1.1;
        font-weight: 500;
        color: #1D2023;
        margin-bottom: 20px;
        max-width: 100%;
        text-transform: uppercase;
    }

    .mobile-stat-card.promo-card .promo-subtitle {
        display: block;
        font-family: 'MTS Compact', sans-serif;
        font-size: 22px;
        line-height: 26px;
        color: #1D2023;
        margin-bottom: 0;
        max-width: 358px;
    }

    .mobile-stat-card.promo-card .promo-btn {
        display: none;
    }

    .mobile-stat-card:nth-of-type(2) {
        position: absolute;
        width: calc(50% - 8px);
        height: auto;
        min-height: 102px;
        left: 16px;
        background: rgba(144, 149, 167, 0.15);
        backdrop-filter: blur(5px);
        border: 1px solid var(--color-white);
        padding: 16px;
    }

    .mobile-stat-card:nth-of-type(3) {
        position: absolute;
        width: calc(50% - 8px);
        height: auto;
        min-height: 102px;
        right: 16px;
        background: rgba(144, 149, 167, 0.15);
        backdrop-filter: blur(5px);
        border: 1px solid var(--color-white);
        padding: 16px;
    }

    .mobile-stat-card:nth-of-type(4) {
        position: absolute;
        width: calc(50% - 8px);
        height: auto;
        min-height: 102px;
        left: 16px;
        top: 220px;
        background: rgba(144, 149, 167, 0.15);
        backdrop-filter: blur(5px);
        border: 1px solid var(--color-white);
        padding: 16px;
    }

    .mobile-stat-card:nth-of-type(5) {
        position: absolute;
        width: calc(50% - 8px);
        height: auto;
        min-height: 102px;
        right: 16px;
        top: 220px;
        background: rgba(144, 149, 167, 0.15);
        backdrop-filter: blur(5px);
        border: 1px solid var(--color-white);
        padding: 16px;
    }

    .mobile-stat-number {
        font-size: 25px;
        line-height: 1.2;
        margin-bottom: 8px;
    }

    .mobile-stat-number::after {
        content: '';
        position: absolute;
        bottom: 50px;
        left: 10px;
        width: 80%;
        height: 1px;
        background: #626C77;
        opacity: 0.3;
    }

    .mobile-stat-label {
        font-size: 10px;
        line-height: 1.3;
        margin-top: 10px;
    }
}

/* ========== СТРАНИЦА: О методе (about_method.html) ========== */

.method-hero {
    background: var(--color-white);
    padding: 60px 0;
}

.method-hero-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 607px;
    margin: 0 auto;
    border-radius: 32px;
    overflow: hidden;
}

.method-hero-image {
    position: relative;
    z-index: 2;
    border-radius: 32px;
    overflow: hidden;
    background: url('../images/bd-metod.png') no-repeat center center;
    background-size: cover;
}

.method-hero-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
    position: relative;
    z-index: 1;
    mix-blend-mode: multiply;
}

.method-audio-controls {
    position: absolute;
    bottom: 30px;
    left: 30px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: auto;
    min-width: 280px;
    background: transparent;
    gap: 0;
}

.method-btn-audio {
    background: #FFFFFF;
    border: none;
    border-radius: 30px;
    padding: 10px 20px 10px 30px;
    font-family: 'MTS Wide', sans-serif;
    font-size: 18px;
    line-height: 1.2;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #1D2023;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    border: none;
    position: relative;
    z-index: 3;
    height: 50px;
    flex: 1;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.method-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 644px;
}

.method-content-top {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.method-content-bottom {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 30px;
}

.method-content-bottom .btn {
    font-size: 15px;
    line-height: 17px;
    width: 100%;
}

.method-content h1 {
    font-size: 32px;
    line-height: 38px;
    margin-bottom: 20px;
    color: var(--color-dark);
}

.method-hero .method-tagline {
    font-family: 'MTS Wide', sans-serif;
    font-size: 14px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--color-purple);
    margin-bottom: 20px;
}

.method-content .method-description {
    font-size: 16px;
    line-height: 22px;
    color: var(--color-dark);
    margin-bottom: 0;
    text-transform: none;
    font-weight: 400;
}

.method-stats-banner {
    padding: 60px 0;
    color: var(--color-white);
    position: relative;
    overflow: hidden;
}

.stats-banner-content {
    background: linear-gradient(117.6deg, #EA3C3A -36.29%, #FDA6C6 48.51%, #E86998 115.92%, #9A76D7 171.17%);
    padding: 20px;
    border-radius: 50px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 30px 50px;
    align-items: start;
    position: relative;
    z-index: 2;
}

.stats-circle {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    align-self: center;
    z-index: 1;
}

.stats-circle-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(0deg);
    z-index: 1;
}

.stats-circle-svg circle:first-of-type {
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 4;
}

.stats-circle-fill {
    stroke-width: 4;
    stroke-linecap: butt;
    filter: drop-shadow(0 0 5px rgba(255, 77, 77, 0.5));
    transition: stroke-dashoffset 1.5s ease-in-out;
}

.stats-percent {
    font-family: 'MTS Wide', sans-serif;
    font-size: 64px;
    line-height: 1;
    font-weight: 500;
    position: relative;
    z-index: 2;
}

.stats-text {
    grid-column: 2;
    grid-row: 1;
}

.stats-text h3 {
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color-white);
}

.stats-text p {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 25px;
    opacity: 0.95;
}

.stats-banner-content .btn-light {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: end;
    margin-top: 0;
    background: var(--color-white);
    color: var(--color-dark);
    border: none;
    padding: 14px 40px;
    font-size: 20px;
    font-weight: 500;
    border-radius: 50px;
    text-transform: none;
}

.method-numbers {
    padding: 60px 0;
}

.method-numbers .number-item {
    /* Сбрасываем стили, которые могли прийти с главной страницы */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    background: #F0F2F5;
    border-radius: 32px;
    padding: 30px 25px;
    height: 100%;
    width: 100%;
}

.method-numbers .number-value {
    font-family: 'MTS Wide', sans-serif;
    font-size: 44px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--color-dark);
    margin-bottom: 25px;
    display: block;
    position: relative;
    order: 1;
    /* Явно задаем порядок */
}

.method-numbers .number-value::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 260px;
    height: 2px;
    background: var(--color-gray);
    opacity: 0.5;
}

.method-numbers .number-label {
    font-family: 'MTS Wide', sans-serif;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color-dark);
    margin: 25px 0 15px 0;
    display: block;
    min-height: 50px;
    order: 2;
    /* Явно задаем порядок */
}

.method-numbers .number-desc {
    font-family: 'MTS Compact', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-gray);
    margin: 0;
    display: block;
    flex: 1;
    order: 3;
    /* Явно задаем порядок */
}

.research-center {
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.research-center-wrapper {
    background: var(--color-dark);
    border-radius: 32px;
    position: relative;
    min-height: 306px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    color: var(--color-white);
}

.research-center-decor {
    flex: 1;
    /* займет все доступное пространство */
    height: 100%;
    min-height: 306px;
    /* как у родителя */
    background-image: url('../images/content/page/research.png');
    background-size: auto;
    background-position: right;
    background-repeat: no-repeat;
}

.pythagoras-image {
    background-image: url('../images/content/page/research.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 150px;
    /* как в медиа-запросе */
    height: auto;
    min-height: 100px;
    /* примерно как высота картинки */
}

.research-center-content {
    max-width: 626px;
    position: relative;
    z-index: 2;
}

.research-center-content h2 {
    font-family: 'MTS Wide', sans-serif;
    font-size: 32px;
    line-height: 40px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color-white);
    margin-bottom: 12px;
    width: 457px;
}

.research-center-description {
    font-family: 'MTS Compact', sans-serif;
    font-size: 16px;
    line-height: 20px;
    color: var(--color-white);
    margin-bottom: 30px;
    max-width: 626px;
    position: relative;
    z-index: 2;
}

.research-center-btn {
    position: absolute;
    left: 31px;
    bottom: 35px;
    background: var(--color-white);
    color: var(--color-dark);
    border: none;
    padding: 9px 22px 8px;
    font-family: 'MTS Wide', sans-serif;
    font-size: 22px;
    line-height: 30px;
    font-weight: 500;
    border-radius: 30px;
    width: auto;
    min-width: 375px;
    text-align: center;
    transition: all 0.3s ease;
    text-transform: none;
    z-index: 5;
}

.research-center-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2);
    background: #f0f0f0;
}


@media (max-width: 768px) {
    .method-hero {
        padding: 0;
    }

    /* Метод hero - аудио контролы */
    .method-hero-image-wrapper {
        position: relative;
        width: 100%;
        margin-bottom: 20px;
    }

    .method-audio-controls {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 40px);
        max-width: 320px;
        min-width: auto;
        z-index: 10;
    }

    .method-btn-audio {
        font-size: 14px;
        padding: 8px 15px 8px 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: auto;
        max-height: 42px;
    }

    /* Stats banner - реорганизация для мобильных */
    .method-stats-banner {
        padding: 30px 0;
    }

    .stats-banner-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
        padding: 30px 20px;
        background: linear-gradient(117.6deg, #EA3C3A -36.29%, #FDA6C6 48.51%, #E86998 115.92%, #9A76D7 171.17%);
        border-radius: 32px;
    }

    .stats-circle {
        width: 180px;
        height: 180px;
        margin: 0 auto;
        grid-column: auto;
        grid-row: auto;
    }

    .stats-percent {
        font-size: 48px;
    }

    .stats-text {
        grid-column: auto;
        grid-row: auto;
        max-width: 100%;
    }

    .stats-text h3 {
        font-size: 24px;
        line-height: 30px;
        margin-bottom: 15px;
        text-align: center;
    }

    .stats-text p {
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        max-width: 100%;
        word-wrap: break-word;
    }

    .stats-banner-content .btn-light {
        grid-column: auto;
        grid-row: auto;
        justify-self: center;
        align-self: center;
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
        padding: 12px 20px;
        font-size: 18px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Убираем грид на мобильных */
    .stats-banner-content {
        display: flex;
        flex-direction: column;
    }

    .research-center-wrapper {
        background: linear-gradient(109.08deg, rgba(109, 45, 224, 0.3) 25.47%, rgba(60, 25, 122, 0.3) 67.88%),
            linear-gradient(264.5deg, #615FEA 3.5%, #3D22B1 75.31%),
            rgba(0, 0, 0, 0.2);
        border-radius: 22px;
    }

    .signature {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        gap: 10px;
        z-index: 5;
    }

    .pythagoras-image {
        width: 150px;
        height: auto;
        object-fit: contain;
        order: 2;
    }

    .signature-text {
        order: 1;
        /* Текст справа */
        flex: 1;
        padding: 20px 20px 80px;
        text-align: end;
    }

    .signature-text p {
        font-family: 'MTS Compact', sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        color: #FFFFFF;
        margin: 0 0 5px 0;
    }

    .signature-text span {
        font-family: 'MTS Wide', sans-serif;
        font-weight: 500;
        font-size: 12px;
        line-height: 16px;
        text-transform: uppercase;
        color: #FFFFFF;
        display: block;
    }

    .research-center-btn {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 32px);
        max-width: 326px;
        background: #FFFFFF;
        color: var(--color-dark);
        border: none;
        border-radius: 30px;
        padding: 12px 20px;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        z-index: 10;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

}

/* ========== СТРАНИЦА: Блог (blog.html) ========== */

.blog-header {
    padding: 60px 0 30px;
}

.blog-header h1 {
    font-size: 32px;
    line-height: 38px;
}

.blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-btn {
    background: var(--color-white);
    border: none;
    border-radius: 25px;
    padding: 8px 16px;
    font-family: 'MTS Wide', sans-serif;
    font-size: 12px;
    line-height: 17px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease;
}

.filter-btn.active {
    background: #6549F9;
    color: var(--color-white);
}

.blog-card {
    background: var(--color-white);
    border-radius: 22px;
    overflow: hidden;
    height: 100%;
}

.blog-card .card-image {
    position: relative;
    height: 240px;
    overflow: hidden;
}

.blog-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-save {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--color-white);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.blog-card .card-body {
    padding: 16px;
}

.blog-card .card-meta {
    display: flex;
    gap: 6px;
    font-size: 14px;
    color: #626C77;
    margin-bottom: 10px;
}

.blog-card .date-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.blog-card .date-with-icon::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('../images/icons/shape.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 4px;
}

.card-body h2 {
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 10px;
}

.card-body h2 a {
    color: var(--color-dark);
    text-decoration: none;
    transition: color 0.3s ease;
}

.card-body p {
    font-size: 17px;
    line-height: 22px;
    color: #626C77;
}

/* Пагинация */
.pagination-section {
    padding: 40px 0;
}

.pagination {
    display: flex;
    gap: 8px;
    list-style: none;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.page-item .page-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--color-dark) !important;
    font-family: 'MTS Compact', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
    outline: none !important;
}

.page-item:first-child .page-link,
.page-item:last-child .page-link {
    border: 1px solid var(--color-dark) !important;
    background: transparent !important;
    color: var(--color-dark) !important;
    font-size: 20px !important;
    border-radius: 50% !important;
}

.page-item.active .page-link {
    background: #6549F9 !important;
    color: var(--color-white) !important;
    border: none !important;
    border-radius: 50% !important;
}

@media (max-width: 768px) {
    .blog-header {
        padding: 0;
    }

    /* Пагинация */
    .pagination-section {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 10px 0;
    }

    .pagination-section .container {
        padding: 0 16px;
        width: 100%;
    }

    .pagination-section .pagination {
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: max-content;
        min-width: 100%;
        gap: 4px;
        padding: 5px 0;
    }

    .pagination-section .page-item {
        flex: 0 0 auto;
    }

    .pagination-section .page-link {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        font-size: 14px !important;
    }

    .pagination-section .page-item:first-child .page-link,
    .pagination-section .page-item:last-child .page-link {
        font-size: 18px !important;
    }
}

/* ========== СТРАНИЦА: Статья (article.html) ========== */

.article-header {
    max-width: 998px;
    margin: 0 auto;
}

.article-meta {
    font-family: 'MTS Compact', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    color: #626C77;
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
}

.article-meta .date-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.article-meta .date-with-icon::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('../images/icons/shape.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 4px;
}

.article-image-full {
    width: 100%;
    max-width: 998px;
    margin: 0 auto 30px auto;
    border-radius: 32px;
    overflow: hidden;
    aspect-ratio: 998/500;
}

.article-image-full img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.article-header h1 {
    font-size: 32px;
    line-height: 38px;
    margin-bottom: 30px;
}

.article-lead {
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 30px;
}

.article-actions {
    display: flex;
    gap: 12px;
}

.article-actions button {
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 17px;
    color: #626C77;
    cursor: pointer;
}

.article-body {
    max-width: 998px;
    margin: 0 auto 60px;
}

.article-body h2 {
    font-size: 22px;
    margin-top: 50px;
}

.quality-block {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
    background: #F4F6FA;
    border-radius: 32px;
    padding: 30px;
    position: relative;
    overflow: hidden;
}

.quality-number {
    font-family: 'MTS Wide', sans-serif;
    font-size: 100px;
    line-height: 1;
    text-align: left;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    background: linear-gradient(65.7deg, #7E49F9 -48.75%, #CBC4FF 28.56%, #6549F9 84.15%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    flex-shrink: 0;
    min-width: 120px;
    margin: 0;
}

.quality-content {
    position: relative;
    z-index: 3;
    flex: 1;
}

.quality-content h3 {
    font-family: 'MTS Wide', sans-serif;
    font-size: 16px;
    line-height: 23px;
    text-transform: uppercase;
    margin-bottom: 15px;
    color: var(--color-dark);
    position: relative;
    display: inline-block;
}

.quality-content h3 span {
    display: none;
}

.quality-content p {
    font-family: 'MTS Compact', sans-serif;
    font-size: 16px;
    line-height: 22px;
    color: var(--color-dark);
    margin: 0;
    max-width: 800px;
}

@media (max-width: 768px) {
    .article-header h1 {
        font-size: 28px;
        line-height: 32px;
    }

    .quality-number {
        display: none;
    }

    .quality-content h3 {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .quality-content h3 span {
        display: inline-block;
        /* Добавьте стили для номера, если нужно */
        font-family: 'MTS Wide', sans-serif;
        font-size: 18px;
        color: var(--color-purple);
        /* или другой цвет */
        font-weight: 700;
    }
}

.article-image {
    margin: 40px 0;
}

.article-image img {
    width: 100%;
    height: auto;
    border-radius: 32px;
}

.article-image figcaption {
    font-size: 14px;
    color: #626C77;
    margin-top: 10px;
}

.faq-section {
    max-width: 998px;
    margin: 0 auto 60px;
}

.faq-section h2 {
    font-size: 22px;
    line-height: 31px;
    margin-bottom: 30px;
}

.accordion {
    border: none;
    background: transparent;
}

.accordion-item {
    border: none;
    border-bottom: 1px solid #262626;
    background: transparent;
    margin-bottom: 0;
    position: relative;
}

.accordion-header {
    margin: 0;
    position: relative;
}

.accordion-button {
    font-family: 'Rooftop', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    padding: 20px 50px 20px 0;
    background: transparent;
    box-shadow: none;
    border: none;
    color: #171717;
    position: relative;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: all 0.3s ease;
}

.accordion-button:not(.collapsed) {
    background: transparent;
    color: #171717;
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
    outline: none;
}

.accordion-button::after {
    display: none;
}

.accordion-button::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease;
}

.accordion-button.collapsed::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'%3E%3Cellipse cx='18' cy='18' rx='18' ry='18' fill='%23262626'/%3E%3Cpath d='M18.5 9V26' stroke='white'/%3E%3Cpath d='M27 17.5L10 17.5' stroke='white'/%3E%3C/svg%3E");
}

.accordion-button:not(.collapsed)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'%3E%3Cellipse cx='18' cy='18' rx='18' ry='18' fill='%236549F9'/%3E%3Cpath d='M27 17.5L10 17.5' stroke='white'/%3E%3C/svg%3E");
}

.accordion-body {
    padding: 0 0 20px 0;
    font-family: 'MTS Compact', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #626C77;
    max-width: 800px;
}

@media (max-width: 768px) {
    .faq-section h2 {
        font-size: 22px;
        line-height: 24px;
    }
}

/* Похожие статьи */
.related-articles {
    margin: 0 auto 60px;
    overflow: hidden;
    position: relative;
}

.related-articles h2 {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 38px;
    text-transform: uppercase;
    color: #171717;
    position: relative;
}

.related-swiper {
    overflow: visible !important;
    margin: 0 -10px;
    padding: 30px 0;
}

.related-swiper .swiper-wrapper {
    display: flex;
}

.related-swiper .swiper-slide {
    height: auto;
    transition: transform 0.3s ease;
    padding: 0 10px;
}

.related-card {
    position: relative;
    background: #F1F1F4;
    border-radius: 22px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.related-card img {
    width: 100%;
    height: 240px;
    border-radius: 22px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.related-card .card-meta {
    display: flex;
    gap: 6px;
    font-size: 14px;
    color: #626C77;
    margin-bottom: 10px;
    padding: 16px 16px 0;
}

.related-card .date-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.related-card .date-with-icon::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('../images/icons/shape.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 4px;
}

.related-card h3 {
    font-family: 'MTS Wide', sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 500;
    padding: 0 16px;
    margin: 10px 0;
    color: var(--color-dark);
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.related-card p {
    font-family: 'MTS Compact', sans-serif;
    font-size: 17px;
    line-height: 22px;
    color: #626C77;
    padding: 0 16px 16px;
    margin: 0;
    flex: 1;
}

.related-card .card-save {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--color-white);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .related-articles h2 {
        font-size: 22px;
        line-height: 24px;
    }

    .related-card .card-meta {
        gap: 3px;
    }

    .related-card h3 {
        font-size: 18px;
    }

    .related-card p {
        font-size: 16px;
    }
}

/* ========== СТРАНИЦА: Книги (books.html) ========== */

.books-hero {
    padding: 0;
    background: url(../images/book_hero.png)/*var(--color-dark)*/;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-white);
    border-radius: 32px;
    margin: 0 32px;
    overflow: hidden;
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: center;
}

.books-hero .container {
    max-width: 1280px;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.books-hero-content {
    text-align: left;
    max-width: 500px;
    align-self: flex-end;
    margin-bottom: 0;
    z-index: 10;
    position: relative;
}

.hero-badge {
    border: 1px solid var(--color-white);
    border-radius: 22px;
    padding: 10px 11px;
    font-size: 12px;
    display: inline-block;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-family: 'MTS Wide', sans-serif;
    letter-spacing: 0.02em;
}

.books-hero-content h1 {
    font-size: 32px;
    line-height: 45px;
    max-width: 800px;
    margin: 0 0 20px 0;
    color: var(--color-white);
    text-transform: uppercase;
}

.books-hero-images {
    position: relative;
    flex: 1;
    max-width: 60%;
    height: 300px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.books-hero-images img {
    position: absolute;
    max-width: 300px;
    width: auto;
    height: auto;
    max-height: 480px;
    transition: all 0.3s ease;
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.3));
    border-radius: 8px 16px 16px 8px;
    transform: rotate(0deg);
    object-fit: contain;
}

.books-hero-images img:nth-child(1) {
    right: 320px;
    z-index: 4;
    bottom: 0;
}

.books-hero-images img:nth-child(2) {
    right: 200px;
    z-index: 3;
    bottom: 0;
}

.books-hero-images img:nth-child(3) {
    right: 80px;
    z-index: 2;
    bottom: 0;
}

.books-hero-images img:nth-child(4) {
    right: 10px;
    z-index: 1;
    bottom: 0;
}

.books-hero-images img:hover {
    transform: scale(1.1) !important;
    z-index: 10;
    filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.5));
}

.books-list {
    padding: 60px 0;
}

.book-item {
    margin: 20px;
}

.book-item .book-cover {
    position: relative;
    padding: 20px;
    background: var(--color-white);
    border: 2px solid var(--color-gray);
    border-radius: 32px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.book-item .book-cover img {
    width: 100%;
    height: auto;
}

.book-item .book-info {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-white);
    border-radius: 32px;
    padding: 20px;
}

.book-item .book-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.book-header-text {
    flex: 1;
}

.book-header-text h2 {
    margin: 20px 0;
    font-size: 22px;
    line-height: 28px;
}

.book-header-btn {
    font-size: 22px;
    text-transform: none;
    flex-shrink: 0;
    margin-left: auto;
}

.book-description {
    font-size: 16px;
    line-height: 20px;
    opacity: 0.79;
    margin-bottom: 20px;
    flex: 1 0 auto;
}

.read-excerpt {
    display: inline-block;
    font-family: 'MTS Wide', sans-serif;
    font-size: 12px;
    line-height: 18px;
    text-decoration: underline;
    color: #7245FF;
    margin-right: 30px;
    text-transform: uppercase;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: auto;
}

.book-category {
    border-radius: 30px;
    padding: 6px 14px;
    font-family: 'MTS Wide', sans-serif;
    font-size: 12px;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--color-dark);
    border: 1px solid var(--color-dark);
    transition: all 0.3s ease;
    letter-spacing: 0.02em;
    font-weight: 500;
    display: inline-block;
}

@media (min-width: 769px) {
    .book-item .book-cover .book-category {
        display: none;
    }

    .book-item .book-cover .book-category {
        display: none;
    }

    .book-item .book-info .book-category {
        display: inline-block;
        position: relative;
        /* Меняем с absolute на relative */
        top: auto;
        /* Сбрасываем top */
        left: auto;
        /* Сбрасываем left */
        margin-bottom: 15px;
        /* Добавляем отступ снизу */
        background: var(--color-white);
        border: 1px solid var(--color-dark);
        border-radius: 30px;
        padding: 6px 14px;
        font-size: 12px;
        font-family: 'MTS Wide', sans-serif;
        text-transform: uppercase;
        color: var(--color-dark);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        width: fit-content;
        /* Чтобы ширина была по содержимому */
    }

    .book-item .book-header {
        margin-top: 0;
        /* Убираем лишний отступ */
    }

}

.book-header-btn.btn-mobile {
    display: none;
}

@media (max-width: 768px) {
    .books-list .book-item {
        margin-bottom: 30px;
        background: var(--color-white);
        border-radius: 32px;
        overflow: hidden;
        padding: 20px;
    }

    /* Картинка */
    .books-list .book-item .book-cover {
        width: 200px;
        height: auto;
        margin: 0 auto 20px;
        padding: 0;
        background: transparent;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .books-list .book-item .book-cover img {
        width: 100%;
        height: auto;
        max-width: 200px;
        display: block;
    }

    /* Категория на картинке */
    .books-list .book-item .book-cover .mobile-category {
        display: inline-block;
        position: absolute;
        top: 0;
        left: -50px;
        z-index: 5;
        background: var(--color-white);
        border: 1px solid var(--color-dark);
        border-radius: 30px;
        padding: 6px 14px;
        font-size: 12px;
        font-family: 'MTS Wide', sans-serif;
        text-transform: uppercase;
        color: var(--color-dark);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        margin: 0;
    }

    /* Скрываем десктопную категорию */
    .books-list .book-item .book-info .desktop-category {
        display: none;
    }

    /* Контент */
    .books-list .book-item .book-info {
        padding: 0;
        background: transparent;
    }

    .books-list .book-item .book-header {
        display: block;
        margin-bottom: 15px;
    }

    .books-list .book-item .book-header-text h2 {
        font-size: 20px;
        line-height: 26px;
        margin: 0 0 15px 0;
    }

    /* Скрываем десктопную кнопку в хедере */
    .books-list .book-item .book-header .book-header-btn:not(.btn-mobile) {
        display: none;
    }

    .books-list .book-item .book-description {
        font-size: 15px;
        line-height: 22px;
        margin-bottom: 15px;
    }

    .books-list .book-item .read-excerpt {
        display: inline-block;
        margin-bottom: 15px;
        font-size: 14px;
    }

    /* Мобильная кнопка */
    .books-list .book-item .btn-mobile {
        display: block;
        width: 100%;
        background: var(--color-dark);
        color: var(--color-white);
        border: none;
        border-radius: 30px;
        padding: 12px 20px;
        font-size: 18px;
        text-align: center;
        margin-top: 10px;
    }

    .books-list .book-item .btn-mobile:hover {
        background: #2a2f33;
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .books-list .book-item .book-cover .mobile-category {
        left: 10px;
        top: 10px;
    }
}

/* Для горизонтальной ориентации планшетов */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
    .books-list .book-item .book-cover .mobile-category {
        left: 10px;
        top: 10px;
    }
}

/* ========== СТРАНИЦА: Консультации (consultations.html) ========== */

.consultations-header {
    padding: 60px 0 30px;
}

.consultations-header h1 {
    font-size: 32px;
    line-height: 38px;
    margin-bottom: 15px;
}

.consultations-header p {
    font-size: 16px;
    line-height: 22px;
}

/* Стили для фильтров на странице консультаций */

.filters {
    display: flex;
    gap: 16px;
    align-items: center;
    position: relative;
}

.filter-select {
    width: 187px;
    height: 41px;
    background: #FFFFFF;
    border-radius: 22px;
    border: none;
    padding: 0 20px;
    font-family: 'MTS Compact', sans-serif;
    font-size: 14px;
    color: var(--color-dark);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23292A2B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
    transition: all 0.3s ease;
}

.filter-select:hover {
    background-color: #f5f5f5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.filter-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(96, 52, 209, 0.2);
}

.filter-select option {
    font-family: 'MTS Compact', sans-serif;
    font-size: 14px;
    color: var(--color-dark);
    background: #FFFFFF;
    padding: 10px;
}

/* Кнопка-иконка после фильтров */
.filters .clean {
    content: '';
    width: 41px;
    height: 41px;
    background: #FFFFFF;
    border-radius: 50%;
    display: inline-block;
    margin-left: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-image: url("data:image/svg+xml,%3Csvg width='27' height='27' viewBox='0 0 27 27' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.9036 21.965C10.8959 21.965 8.90527 21.965 6.89753 21.965C6.6916 21.965 6.57148 21.8792 6.52 21.6732C6.48568 21.4845 6.57148 21.33 6.79456 21.2271C6.91469 21.1756 7.03481 21.107 7.15493 21.0383C7.7727 20.6436 8.2017 20.043 8.51059 19.3566C8.95675 18.3956 9.17984 17.3832 9.33428 16.3192C9.52304 15.118 9.5402 13.8997 9.5402 12.6813C9.5402 11.8748 9.5402 11.0511 9.5402 10.2445C9.5402 9.84984 9.66032 9.71256 10.0035 9.71256C11.0331 9.71256 12.0628 9.71256 13.0924 9.71256C13.2983 9.71256 13.3498 9.64392 13.3498 9.42084C13.3498 7.51605 13.3498 5.61127 13.3498 3.70648C13.3498 3.226 13.4871 2.79699 13.8646 2.53959C14.2078 2.29934 14.551 2.28218 14.9114 2.50527C15.2374 2.71119 15.4605 3.02007 15.4605 3.46624C15.4605 5.42251 15.4605 7.37877 15.4605 9.3522C15.4605 9.40368 15.4605 9.45516 15.4605 9.48948C15.409 9.71256 15.5291 9.76404 15.6836 9.76404C16.696 9.76404 17.7256 9.74688 18.7381 9.72972C19.2014 9.72972 19.3044 9.83268 19.3044 10.3475C19.3044 13.1274 19.3044 15.8902 19.3044 18.6702C19.3044 19.5969 19.3044 20.5235 19.3044 21.433C19.3044 21.8792 19.2186 21.9821 18.8239 21.9821C16.8505 21.9821 14.877 21.9821 12.9208 21.9821L12.9036 21.965ZM17.0392 21.2271C17.5197 21.2271 18.0002 21.2271 18.4635 21.2271C18.4978 21.2271 18.5836 21.1584 18.5836 21.107C18.6008 20.9182 18.618 20.7123 18.618 20.5235C18.618 19.9572 18.5836 19.3909 18.5836 18.8246C18.5836 17.1429 18.5836 15.4612 18.5836 13.7795C18.5836 13.5393 18.515 13.4707 18.3091 13.4707C17.2451 13.4707 16.164 13.4707 15.1001 13.4707C13.5729 13.4707 12.0456 13.4707 10.5355 13.4707C10.3296 13.4707 10.2438 13.5393 10.2266 13.7795C10.2266 14.2429 10.2094 14.7062 10.158 15.1695C10.0722 16.1648 9.93489 17.1258 9.67748 18.0868C9.42008 19.0134 9.09403 19.9057 8.54491 20.6779C8.40763 20.8496 8.27034 21.0212 8.13306 21.2099C8.16738 21.2099 8.18454 21.2442 8.2017 21.2442C8.71651 21.2442 9.24848 21.2442 9.76328 21.2442C9.81476 21.2442 9.88341 21.2271 9.91773 21.1928C10.7929 20.4377 11.342 19.4596 11.5479 18.2412C11.5651 18.1039 11.6166 18.0524 11.7367 18.0868C11.7882 18.0868 11.8397 18.1211 11.9083 18.1211C12.2344 18.1554 12.2515 18.1897 12.1829 18.5329C12.0456 19.2193 11.8397 19.8543 11.4621 20.4377C11.2905 20.7123 11.1018 20.9697 10.913 21.2614C11.5823 21.2614 12.2344 21.2614 12.8864 21.2614C12.9379 21.2614 13.0066 21.2099 13.0409 21.1584C13.5042 20.4205 13.7959 19.614 13.8303 18.7045C13.8474 18.1897 13.8303 18.2069 14.2936 18.2069C14.4823 18.2069 14.5338 18.2927 14.5338 18.4814C14.5167 19.3223 14.3622 20.1288 14.019 20.8667C13.9504 20.9868 13.8989 21.1241 13.8474 21.2614H16.3528C16.3528 21.2614 16.37 21.1928 16.37 21.1756C16.4558 20.3691 16.5416 19.5454 16.6274 18.7388C16.6789 18.327 16.6789 18.327 17.0735 18.3442C17.2451 18.3442 17.3138 18.4128 17.2966 18.6187C17.228 19.2193 17.1937 19.8028 17.1422 20.4034C17.125 20.6779 17.0907 20.9697 17.0564 21.2786L17.0392 21.2271ZM15.1859 12.6984C16.2499 12.6984 17.3138 12.6984 18.3777 12.6984C18.5493 12.6984 18.6008 12.6298 18.6008 12.441C18.6008 11.8919 18.6008 11.3428 18.6008 10.8108C18.6008 10.4848 18.6008 10.4848 18.3091 10.4848C16.8676 10.4848 15.409 10.4848 13.9675 10.4848C12.8178 10.4848 11.6509 10.4848 10.5012 10.4848C10.2953 10.4848 10.2266 10.5534 10.2266 10.7765C10.2266 11.3256 10.2266 11.8748 10.2266 12.4067C10.2266 12.6126 10.2781 12.6984 10.4669 12.6984C10.9817 12.6984 11.4965 12.6984 12.0113 12.6984C13.0752 12.6984 14.122 12.6984 15.1859 12.6984ZM14.0705 6.48644C14.0705 7.39593 14.0705 8.28826 14.0705 9.19776C14.0705 9.81552 13.9847 9.6954 14.551 9.72972C14.7569 9.72972 14.8084 9.66108 14.8084 9.438C14.8084 7.91074 14.8084 6.36632 14.8084 4.83906C14.8084 4.42721 14.8084 3.99821 14.8084 3.58636C14.8084 3.38044 14.7397 3.226 14.5681 3.17452C14.3107 3.07155 14.0877 3.26032 14.0877 3.58636C14.0877 4.56449 14.0877 5.54263 14.0877 6.52076L14.0705 6.48644Z' fill='%23292A2B' stroke='%23292A2B' stroke-width='0.2'/%3E%3Cpath d='M4.47168 8.77075C5.19752 8.77075 5.78685 9.35942 5.78711 10.0852C5.78711 10.8112 5.19768 11.4006 4.47168 11.4006C3.7459 11.4004 3.15723 10.811 3.15723 10.0852C3.15749 9.35958 3.74606 8.77101 4.47168 8.77075Z' stroke='%23292A2B' stroke-width='0.7'/%3E%3Cpath d='M5.61328 14.385C6.19506 14.385 6.66688 14.857 6.66699 15.4387C6.66699 16.0206 6.19513 16.4924 5.61328 16.4924C5.03153 16.4923 4.55957 16.0205 4.55957 15.4387C4.55968 14.857 5.0316 14.3851 5.61328 14.385Z' stroke='%23292A2B' stroke-width='0.7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
    flex: none;
    order: 2;
    flex-grow: 0;
}

.filters .clean:hover {
    background-color: #f5f5f5;
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Мобильная версия */
@media (max-width: 768px) {
    .consultations-header {
        padding: 10px 0 30px;
    }

    .consultations-header h1 {
        font-size: 22px;
        line-height: 28px;
    }

    .filters {
        width: 100%;
        justify-content: space-between;
    }

    .filter-select {
        width: calc(50% - 25px);
        height: 38px;
        font-size: 12px;
        padding: 0 15px;
    }

    .filters .clean {
        width: 38px;
        height: 38px;
        margin-left: 0;
        background-size: 20px 20px;
    }
}

.consultant-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fff;
    border-radius: 22px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.consultant-card .card-image {
    position: relative;
    height: 370px;
    overflow: hidden;
    flex-shrink: 0;
}

.consultant-card .card-image img {
    width: 100%;
    /*height: 100%;*/
    object-fit: cover;
    transition: transform 0.5s ease;
}

.consultant-card .card-body {
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.consultant-card .card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    min-height: 32px;
}

.consultant-card .card-tags .tag {
    border-radius: 30px;
    padding: 6px 14px;
    font-family: 'MTS Wide', sans-serif;
    font-size: 12px;
    color: var(--color-dark);
    border: 1px solid var(--color-dark);
    transition: all 0.3s ease;
    letter-spacing: 0.02em;
    font-weight: 500;
    display: inline-block;
}

.consultant-card .card-body h3 {
    font-family: 'MTS Wide', sans-serif;
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 8px;
    color: var(--color-dark);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    font-weight: 500;
}

.consultant-card .card-body p {
    font-family: 'MTS Compact', sans-serif;
    font-size: 16px;
    line-height: 22px;
    color: #626C77;
    margin-bottom: 20px;
    flex: 1;
}

.consultant-card .card-body .btn {
    width: 100%;
    text-transform: none;
    font-size: 18px;
    padding: 10px 22px;
    background: var(--color-dark);
    color: var(--color-white);
    border-radius: 30px;
    transition: all 0.3s ease;
    margin-top: auto;
    align-self: flex-end;
}

.disclaimer {
    padding: 40px 0;
}

.disclaimer-content {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 22px;
    padding: 30px;
    display: flex;
    gap: 30px;
    align-items: center;
}

.disclaimer-content p {
    font-size: 14px;
    line-height: 20px;
    color: #262626;
    flex: 1;
}

/* ========== СТРАНИЦА: Консультация (consultation.html) ========== */

.consultation-hero {
    padding: 0;
    background: url('../images/olga-consultation-hero.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-white);
    border-radius: 32px;
    margin: 0 32px;
    overflow: hidden;
    position: relative;
    min-height: 450px;
    display: flex;
    align-items: center;
}

.consultation-hero .hero-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
}

.consultation-hero .hero-title-group {
    max-width:  400px;
}

.consultation-hero h1 {
    color: var(--color-dark);
    font-size: 55px;
    line-height: 55px;
    margin-bottom: 20px;
}

.consultation-hero .hero-subtitle {
    font-family: 'MTS Wide', sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-dark);
    margin-bottom: 30px;
    opacity: 0.9;
}

.hero-benefits {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 300px; /* Фиксированная ширина 300px */
    max-width: 100%; /* Чтобы не выходил за пределы на мобильных */
    text-align: right;
    font-family: 'MTS Wide', sans-serif;
    font-size: 18px;
    line-height: 23px;
    color: var(--color-dark);
    text-transform: uppercase;
    margin-left: auto; /* Прижимает блок к правому краю родителя */
    margin-bottom: 20px;
}

.consultation-hero .btn-open-consultation {
    background-color: var(--color-white);
}

.consultation-hero .btn-open-consultation:hover{
    background-color: #969FA8;
}

.consultation-audience {
    padding: 60px 0;
}

.consultation-audience h2 {
    font-size: 32px;
    line-height: 38px;
    margin-bottom: 40px;
}

.audience-cards {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.audience-card {
    background: var(--color-light-gray);
    border-radius: 32px;
    padding: 30px;
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: flex-start;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-number {
    font-family: 'MTS Wide', sans-serif;
    font-size: 100px;
    line-height: 1;
    text-align: left;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    background: linear-gradient(65.7deg, #7E49F9 -48.75%, #CBC4FF 28.56%, #6549F9 84.15%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    flex-shrink: 0;
    min-width: 120px;
    margin: 0;
}

.audience-card-content {
    flex: 1;
}

.audience-card h3 {
    font-size: 18px;
    line-height: 25px;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: var(--color-dark);
}

.audience-card p {
    font-family: 'MTS Compact', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-dark);
    margin: 0;
}

.consultation-includes {
    padding: 0;
}

.includes-consultation {
    display: flex;
    gap: 60px;
    margin-bottom: -160px;
    align-items: stretch;
}

.includes-consultation .include-left {
    flex: 0 0 50%;
    max-width: 50%;
    position: relative;
}

.includes-consultation .include-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 32px;
}

.includes-consultation .include-right {
    flex: 0 0 50%;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    transform: translateX(-120px);
    margin-top: 100px;
}

.includes-consultation .quote-wrapper {
    position: relative;
    margin-bottom: 30px;
    padding: 20px 0 20px 60px;
}

.includes-consultation .quote-wrapper::before {
    content: '«';
    position: absolute;
    left: 0;
    top: 0;
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 100px;
    line-height: 35px;
    color: #CEC4FF;
    opacity: 0.5;
}

.includes-consultation .quote-wrapper::after {
    content: '»';
    position: absolute;
    right: 0;
    bottom: -20px;
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 100px;
    line-height: 35px;
    color: #CEC4FF;
    opacity: 0.5;
}

.includes-consultation .include-right .quote-wrapper p {
    font-family: 'MTS Compact', sans-serif;
    font-size: 22px;
    line-height: 30px;
    text-transform: none;
    color: var(--color-dark);
    margin: 0;
    position: relative;
    z-index: 1;
}

.includes-consultation .include-right .advantages {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 540px;
    /* Ограничиваем ширину контейнера */
}

.includes-consultation .include-right .advantages span {
    display: inline-block;
    font-family: 'MTS Wide', sans-serif;
    font-size: 10px;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--color-dark);
    padding: 15px 20px;
    border: 2px solid var(--color-dark);
    border-radius: 32px;
    width: fit-content;
    /* Ширина по содержимому */
    max-width: 100%;
    min-height: 48px;
    background: var(--color-white);
    box-sizing: border-box;
}

.includes-consultation .include-right .advantages span:nth-child(1) {
    align-self: center;
}

.includes-consultation .include-right .advantages span:nth-child(2) {
    align-self: flex-end;
}

.includes-consultation .include-right .advantages span:nth-child(3) {
    align-self: flex-start;
}

.includes-content {
    background: linear-gradient(117.6deg, #EA3C3A -36.29%, #FDA6C6 48.51%, #E86998 115.92%, #9A76D7 171.17%);
    border-radius: 32px;
    padding: 40px;
    backdrop-filter: blur(10px);
}

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

.include-item {
    text-align: center;
    color: var(--color-white);
}

.include-item .item-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 20px;
}

.include-item .item-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.include-item p {
    font-family: 'MTS Wide', sans-serif;
    font-size: 14px;
    line-height: 22px;
    text-transform: uppercase;
    margin: 0;
}

.consultation-price {
    padding: 60px 0;
}

.price-card {
    background: var(--color-dark);
    border-radius: 32px;
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price-value {
    display: flex;
    flex-direction: column;
}

.price-amount {
    font-family: 'MTS Wide', sans-serif;
    font-size: 70px;
    line-height: 98px;
    text-transform: uppercase;
    background: linear-gradient(90deg, #9A86FA 0%, #CEC4FF 58.17%, #745CF4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.price-label {
    font-family: 'MTS Wide', sans-serif;
    font-size: 16px;
    line-height: 18px;
    text-transform: uppercase;
    color: var(--color-white);
}

.btn-book {
    background: var(--color-white);
    border: none;
    border-radius: 30px;
    padding: 9px 22px 8px;
    font-family: 'MTS Wide', sans-serif;
    font-size: 20px;
    line-height: 28px;
    color: var(--color-dark);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.consultation-terms {
    padding: 60px 0;
}

.consultation-terms .terms-wrapper {
    display: flex;
    flex-direction: row;
    gap: 60px;
    align-items: flex-start;
}

.consultation-terms h2 {
    font-size: 32px;
    line-height: 38px;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 30px;
}

.consultation-terms h2::after {
    content: '';
    position: absolute;
    bottom: -75px;
    left: 200px;
    width: 210px;
    height: 88px;
    background-image: url("data:image/svg+xml,%3Csvg width='210' height='88' viewBox='0 0 210 88' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.999341 1.00014C7.97623 40.7031 64.3049 81.9605 96.674 39.4375C115.955 14.1079 70.4854 -20.164 79.3432 26.245C91.7254 91.1187 148.295 99.7883 207.869 63.018M207.869 63.018C206.722 67.2916 201.597 77.8962 190.279 86.1257M207.869 63.018C201.086 63.9376 185.683 63.3958 178.334 53.8712' stroke='%23F05B5E' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M0.999341 1.00014C7.97623 40.7031 64.3049 81.9605 96.674 39.4375C115.955 14.1079 70.4854 -20.164 79.3432 26.245C91.7254 91.1187 148.295 99.7883 207.869 63.018M207.869 63.018C206.722 67.2916 201.597 77.8962 190.279 86.1257M207.869 63.018C201.086 63.9376 185.683 63.3958 178.334 53.8712' stroke='%236A4CE6' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left bottom;
    opacity: 0.8;
}

.consultation-terms .terms-right {
    flex: 1;
    max-width: 800px;
    background-color: var(--color-light-gray);
    padding: 20px;
    border-radius: 32px;
}

.consultation-terms .terms-content {
    margin-bottom: 40px;
}

.consultation-terms .terms-item {
    margin: 30px 0;
}

.consultation-terms .terms-item h3 {
    font-size: 18px;
    line-height: 20px;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: var(--color-dark);
}

.consultation-terms .terms-item p {
    font-family: 'MTS Compact', sans-serif;
    font-size: 16px;
    line-height: 22px;
    color: var(--color-dark);
    max-width: 600px;
    text-transform: none;
}

.consultation-terms .terms-divider {
    height: 1px;
    background: var(--color-dark);
    opacity: 0.2;
    margin: 20px 0;
}

.consultation-terms .btn-agree {
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .price-card {
        padding: 20px;
    }

    .price-amount {
        font-size: 50px;
    }

    .price-card .btn-book {
        font-size: 18px;
    }

    .consultation-terms {
        padding: 40px 0;
    }

    .consultation-terms .terms-wrapper {
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: stretch;
    }

    .consultation-terms h2 {
        font-size: 24px;
        line-height: 32px;
        margin-bottom: 0;
        padding-bottom: 0;
        width: 100%;
        text-align: left;
    }

    .consultation-terms h2::after {
        display: none;
        /* Скрываем декоративную линию на мобильных */
    }

    .consultation-terms .terms-right {
        max-width: 100%;
        width: 100%;
        padding: 20px;
        margin: 0;
    }

    .consultation-terms .terms-content {
        margin-bottom: 30px;
    }

    .consultation-terms .terms-item {
        margin: 25px 0;
    }

    .consultation-terms .terms-item h3 {
        font-size: 16px;
        line-height: 18px;
        margin-bottom: 8px;
    }

    .consultation-terms .terms-item p {
        font-size: 14px;
        line-height: 20px;
        max-width: 100%;
    }

    .consultation-terms .btn-agree {
        width: 100%;
        max-width: 100%;
        font-size: 16px;
        padding: 12px 20px;
        white-space: normal;
        word-wrap: break-word;
    }

    .includes-content {
        display: block;
        /* Показываем блок */
        margin-top: 30px;
        padding: 20px 20px 80px;
        border-radius: 22px;
    }

    .includes-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .include-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 15px;
    }

    .include-item .item-icon {
        width: 60px;
        height: 60px;
        flex-shrink: 0;
    }

    .include-item .item-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .include-item p {
        font-size: 13px;
        line-height: 18px;
        margin: 0;
        flex: 1;
    }

    .includes-consultation .quote-wrapper::before,
    .includes-consultation .quote-wrapper::after {
        display: none;
    }

}

/* ========== СТРАНИЦА: Совместимость (compatibility.html) ========== */

.compatibility-hero {
    padding: 0;
    background: url(../images/compatibility-hero.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-white);
    border-radius: 32px;
    margin: 0 32px;
    overflow: hidden;
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: center;
}

.compatibility-hero .hero-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
}

.compatibility-hero h1 {
    color: var(--color-white);
    font-size: 32px;
    line-height: 38px;
    margin-top: 20px;
}

.compatibility-hero .hero-subtitle {
    font-family: 'MTS Wide', sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-dark);
    margin-bottom: 30px;
    opacity: 0.9;
}

@media (max-width: 768px) {
    .compatibility-hero {
        position: relative;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        border-radius: 32px;
        background: url(../images/compatibility-hero.png) no-repeat center;
        background-size: cover;
        display: block;
    }

    .compatibility-hero .hero-content {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        display: block;
    }

    .compatibility-hero .hero-subtitle {
        display: none;
    }

    .compatibility-hero h1 {
        position: relative;
        font-size: 40px;
        line-height: 40px;
        color: #FFFFFF;
        margin: 40px auto; /* Автоматические отступы слева и справа */
        max-width: 261px;
        text-transform: uppercase;
        z-index: 2;
        text-align: center; /* Выравнивание текста по центру */
    }

    .compatibility-hero .hero-benefits {
        position: absolute;
        left: 16px;
        bottom: 70px;
        font-family: 'MTS Wide', sans-serif;
        font-size: 16px;
        line-height: 18px;
        text-transform: uppercase;
        color: #FFFFFF;
        margin: 0;
        max-width: 228px;
        z-index: 2;
    }

    .compatibility-hero .btn-large {
        position: absolute;
        left: 0;
        right: 16px;
        bottom: 20px;
        width: auto;
        height: 42px;
        background: linear-gradient(94.25deg, #745CF4 -0.47%, #5528C7 128.92%);
        border-radius: 30px;
        font-size: 18px;
        line-height: 25px;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        border: none;
        padding: 0 20px;
    }
}

.calculator-card {
    position: relative;
    border-radius: var(--radius-card);
    overflow: hidden;
    min-height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 32px;
}

.calculator-content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: var(--spacing-xl);
    max-width: 1200px;
    width: 100%;
}

.calculator-title {
    font-family: 'MTS Wide', sans-serif;
    font-size: 32px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color-white);
    line-height: 38px;
    margin-bottom: 40px;
    text-align: center;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

.calculator-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.date-inputs {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
}
/*
.date-inputs .matrix-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.date-inputs .matrix {
    font-family: 'MTS Wide', sans-serif;
    font-size: 14px;
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    padding: 12px 20px;
    text-align: center;
    letter-spacing: 2px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    flex: 1;
}

.date-inputs .gender {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
}
*/
.date-input-group {
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 19px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.date-inputs .date-input-group {
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 19px;
    padding: 20px 20px 15px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.date-label {
    font-family: 'MTS Compact', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-white);
    display: block;
    margin-bottom: 10px;
    text-align: left;
    width: 100%;
    padding: 0;
}

.date-field {
    position: relative;
    width: 100%;
}

.date-field .form-control {
    /*background: var(--color-white);*/
    border-radius: 60px;
    padding: 16px 50px 16px 20px;
    font-family: 'MTS Wide', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 23px;
    text-transform: uppercase;
    text-align: center;
    color: #9095A7;
    width: 100%;
    height: 60px;
}

.btn-calculate {
    background: var(--color-white);
    border: none;
    border-radius: 60px;
    padding: 16px 32px;
    text-transform: none;
    min-width: 200px;
    flex-shrink: 0;
    margin: 0 10px;
    height: 60px;
    align-self: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* ========== СЕКЦИЯ ЗНАМЕНИТОСТЕЙ ========== */

.celebrity-section {
    background: var(--color-white);
    border-radius: 32px;
    margin: 30px;
    overflow: hidden;
}

.section-title {
    font-family: 'MTS Wide', sans-serif;
    font-size: 32px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color-dark);
    margin: 20px;
}

.celebrity-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Стили для Swiper контейнера */
.celebrity-swiper {
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
    margin: 0;
}

.celebrity-swiper .swiper-wrapper {
    display: flex;
    align-items: center;
}

.celebrity-swiper .swiper-slide {
    width: 280px;
    /* Ширина обычной карточки */
    height: auto;
    transition: all 0.5s ease;
    opacity: 0.6;
    filter: blur(1px);
    transform: scale(0.85);
    cursor: pointer;
}

/* Активный слайд (центральный) - без размытия и с полной opacity */
.celebrity-swiper .swiper-slide-active {
    opacity: 1 !important;
    filter: blur(0) !important;
    transform: scale(1) !important;
    z-index: 10;
}

/* Ближайшие слайды */
.celebrity-swiper .swiper-slide-next,
.celebrity-swiper .swiper-slide-prev {
    opacity: 0.8;
    filter: blur(0.5px);
    transform: scale(0.92);
}

/* Дальние слайды */
.celebrity-swiper .swiper-slide-next+.swiper-slide,
.celebrity-swiper .swiper-slide-prev+.swiper-slide {
    opacity: 0.6;
    filter: blur(1px);
    transform: scale(0.85);
}

/* Стили для карточек */
.celebrity-card-item {
    width: 100%;
    height: 500px;
    border-radius: 23px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Стили для активной (центральной) карточки */
.celebrity-swiper .swiper-slide-active .celebrity-card-item {
    height: 600px;
    border: 3px solid #9A86FA;
    border-radius: 35px;
    box-shadow: 0 20px 40px rgba(154, 134, 250, 0.3);
}

.celebrity-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: flex-end;
}

.celebrity-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(180.29deg, rgba(0, 0, 0, 0) 0.25%, rgba(0, 0, 0, 0.8) 99.75%);
    backdrop-filter: blur(1px);
    border-radius: 0 0 23px 23px;
    z-index: 1;
}

.celebrity-swiper .swiper-slide-active .celebrity-overlay {
    border-radius: 0 0 35px 35px;
    height: 65%;
}

.celebrity-info {
    position: relative;
    z-index: 2;
    padding: 20px;
    width: 100%;
    color: #FFFFFF;
}

.celebrity-swiper .swiper-slide-active .celebrity-info {
    padding: 24px 22px;
}

.celebrity-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.celebrity-swiper .swiper-slide-active .celebrity-tags {
    margin-bottom: 16px;
}

.tag {
    font-family: 'MTS Wide', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-radius: 26px;
    padding: 6px 12px 7px;
    display: inline-block;
    /*background: rgba(56, 56, 56, 0.3);*/
    backdrop-filter: blur(4px);
}

.celebrity-swiper .swiper-slide-active .tag {
    font-size: 14px;
    padding: 7px 14px 8px;
}

.celebrity-name {
    font-family: 'MTS Wide', sans-serif;
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
    color: #FFFFFF;
    line-height: 1.2;
    margin-bottom: 5px;
}

.celebrity-swiper .swiper-slide-active .celebrity-name {
    font-size: 28px;
    line-height: 34px;
    margin-bottom: 8px;
}

.celebrity-desc {
    font-family: 'MTS Compact', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 1.4;
    opacity: 0.9;
}

.celebrity-swiper .swiper-slide-active .celebrity-desc {
    font-size: 15px;
    line-height: 20px;
}

/* Стрелки навигации */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4.55px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 45px;
    width: 53px;
    height: 53px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 30;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.carousel-arrow.arrow-left {
    left: 10px;
}

.carousel-arrow.arrow-right {
    right: 10px;
}

.carousel-arrow:hover {
    background: #FFFFFF;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.carousel-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

.carousel-arrow svg path {
    transition: stroke 0.3s ease;
}

.carousel-arrow:hover svg path {
    stroke: #6034D1;
}

/* Пагинация (точки) */
.celebrity-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.celebrity-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #D9D9D9;
    border-radius: 50%;
    opacity: 0.5;
    transition: all 0.3s ease;
    cursor: pointer;
}

.celebrity-pagination .swiper-pagination-bullet-active {
    background: #6034D1;
    opacity: 1;
    transform: scale(1.2);
}

/* Адаптация для мобильных */
@media (max-width: 1200px) {
    .celebrity-swiper .swiper-slide {
        width: 260px;
    }

    .celebrity-card-item {
        height: 480px;
    }

    .celebrity-swiper .swiper-slide-active .celebrity-card-item {
        height: 580px;
    }
}

@media (max-width: 992px) {
    .celebrity-swiper .swiper-slide {
        width: 240px;
    }

    .celebrity-card-item {
        height: 450px;
    }

    .celebrity-swiper .swiper-slide-active .celebrity-card-item {
        height: 550px;
    }

    .celebrity-swiper .swiper-slide-active .celebrity-name {
        font-size: 24px;
        line-height: 30px;
    }

    .carousel-arrow {
        width: 45px;
        height: 45px;
    }
}

@media (max-width: 768px) {
    .celebrity-section {
        margin: 15px;
        padding: 15px;
    }

    .section-title {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .carousel-arrow {
        width: 40px;
        height: 40px;
    }

    .carousel-arrow.arrow-left {
        left: 5px;
    }

    .carousel-arrow.arrow-right {
        right: 5px;
    }

    .celebrity-swiper .swiper-slide {
        width: 200px;
    }

    .celebrity-card-item {
        height: 400px;
    }

    .celebrity-swiper .swiper-slide-active .celebrity-card-item {
        height: 500px;
    }

    .celebrity-swiper .swiper-slide-active .celebrity-name {
        font-size: 22px;
        line-height: 28px;
    }

    .celebrity-swiper .swiper-slide-active .tag {
        font-size: 12px;
        padding: 5px 10px;
    }
}

@media (max-width: 576px) {
    .carousel-arrow {
        display: none;
    }

    .celebrity-swiper .swiper-slide {
        width: 180px;
    }

    .celebrity-card-item {
        height: 350px;
    }

    .celebrity-swiper .swiper-slide-active .celebrity-card-item {
        height: 450px;
    }
}

.user-date-section {
    text-align: center;
    padding: 20px 0 40px;
}

.user-date-section .input-title {
    font-size: 22px;
}

.user-date-section .input-subtitle {
    font-family: 'MTS Compact', sans-serif;
    font-size: 16px;
    text-transform: none;
}

.user-date-section .date-input-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.user-date-section .date-inputs-large {
    max-width: 450px;
    width: 100%;
}

.date-inputs-large .form-control {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 400;
    font-size: 22px;
    border: 1px solid var(--color-gray);
    border-radius: 60px;
    height: 52px;
    text-align: center;
}

.user-date-section .date-input-row .btn {
    background: linear-gradient(94.25deg, #745CF4 -0.47%, #5528C7 128.92%);
    color: var(--color-white);
    text-transform: none;
    height: 52px;
    padding: 0 32px;
}

/* Оффер */
.offer-banner {
    padding-bottom: 20px;
}

.offer-card {
    background: linear-gradient(117.6deg, #EA3C3A -36.29%, #FDA6C6 48.51%, #E86998 115.92%, #9A76D7 171.17%);
    padding: 30px;
    border-radius: 32px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    min-height: 200px;
    overflow: visible;
    margin-top: 50px;
}

.offer-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 150px;
    width: 359px;
    height: 229px;
    background-image: url('data:image/svg+xml,%3Csvg width="359" height="274" viewBox="0 0 359 274" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="179.246" cy="179.246" r="179.209" transform="rotate(-168.149 179.246 179.246)" fill="url(%23paint0_radial_2655_616)"/%3E%3Cdefs%3E%3CradialGradient id="paint0_radial_2655_616" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(199.554 400.759) rotate(-110.684) scale(399.113 430.831)"%3E%3Cstop offset="0.403846" stop-color="%23DC2A8F"/%3E%3Cstop offset="1" stop-color="%23E84048"/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
    pointer-events: none;
    /* Чтобы SVG не мешал кликам по кнопкам */
    z-index: 1;
    /* Чтобы был под контентом или над, по необходимости */
}

.offer-card .offer-decoration {
    position: absolute;
    right: 40px;
    bottom: -40px;
    width: 487px;
    height: 472px;
    background: url('../images/offer-banner.png') no-repeat right top;
    background-size: contain;
    z-index: 3;
    pointer-events: none;
}

.offer-card .offer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 2;
    padding-right: 80px;
    /* Добавляем отступ справа, чтобы текст не налезал на age-restriction */
}

.offer-card .age-restriction {
    font-family: 'MTS Wide', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--color-white);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 40px;
    right: -380px;
    z-index: 5;
    margin: 0;
}

.offer-card .offer-content .offer-title {
    color: var(--color-white);
    font-size: 32px;
    padding-top: 20px;
    margin-bottom: 10px;
    max-width: 700px;
}

.offer-card .offer-content .offer-price {
    color: var(--color-white);
    font-family: 'MTS Compact', sans-serif;
    font-size: 16px;
}

.offer-price .offer-badge {
    position: absolute;
    top: 10px;
    background: var(--color-dark);
    border-radius: 26px;
    color: var(--color-white);
    font-family: 'MTS Wide', sans-serif;
    font-size: 16px;
    width: 70px;
    text-align: center;
}

.price-new {
    margin-right: 10px;
}

.price-old {
    text-decoration: line-through;
    opacity: 0.7;
}

.offer-card .btn-calculate-white {
    background: var(--color-white);
    color: var(--color-dark);
    text-transform: none;
    border: none;
    border-radius: 30px;
    padding: 12px 32px;
    font-size: 22px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    width: auto;
    min-width: 200px;
    align-self: flex-start;
}

@media (max-width: 768px) {
    .offer-card {
        padding: 20px;
        gap: 20px;
        min-height: 380px;
        margin-top: 30px;
        overflow: hidden;
    }

    /* Переопределяем порядок элементов */
    .offer-card .offer-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        z-index: 4;
        position: relative;
    }

    .offer-card .offer-header {
        order: 1;
        padding-right: 0;
        margin-bottom: 5px;
    }

    .offer-card .offer-content .offer-title {
        font-size: 20px;
        padding-top: 0;
        max-width: 90%;
        margin-bottom: 15px;
    }

    .offer-card .offer-content .offer-price {
        order: 2;
        margin-bottom: 20px;
        font-size: 16px;
    }

    /* Декоративный элемент в правом нижнем углу */
    .offer-card .offer-decoration {
        position: absolute;
        right: -10px;
        bottom: 60px;
        width: 250px;
        height: 250px;
        background-size: contain;
        background-position: bottom right;
        z-index: 2;
        opacity: 0.9;
    }

    /* Псевдоэлемент за декорацией */
    .offer-card::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 100px;
        /* Увеличиваем ширину с 200px до 400px */
        width: 300px;
        /* Увеличиваем высоту с 128px до 256px */
        height: 229px;
        background-image: url('data:image/svg+xml,%3Csvg width="359" height="274" viewBox="0 0 359 274" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="179.246" cy="179.246" r="179.209" transform="rotate(-168.149 179.246 179.246)" fill="url(%23paint0_radial_2655_616)"/%3E%3Cdefs%3E%3CradialGradient id="paint0_radial_2655_616" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(199.554 400.759) rotate(-110.684) scale(399.113 430.831)"%3E%3Cstop offset="0.403846" stop-color="%23DC2A8F"/%3E%3Cstop offset="1" stop-color="%23E84048"/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: bottom right;
        pointer-events: none;
        z-index: 1;
        opacity: 0.8;
        display: none;
    }

    /* Кнопка после цены */
    .offer-card .btn-calculate-white {
        order: 3;
        /*width: 100%;
        min-width: 100%;*/
        /* Убираем margin-top, так как он мешает прижаться к низу */
        margin-top: 0;
        /* Добавляем отступ сверху, который будет работать только если есть место */
        margin-top: auto;
        /* Это прижмет кнопку к низу */
        font-size: 18px;
        padding: 10px 20px;
        z-index: 4;
    }

    /* Age restriction в правом верхнем углу */
    .offer-card .age-restriction {
        position: absolute;
        top: 50px;
        /* Прижимаем к правому краю */
        width: 50px;
        height: 50px;
        font-size: 24px;
        z-index: 5;
        /* Убираем отрицательное смещение */
        right: 20px !important;
        left: auto !important;
    }


    .offer-price .offer-badge {
        top: 160px;
        font-size: 16px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .offer-card .offer-decoration {
        right: -20px;
        /*80px*/
        bottom: -40px;
        width: 387px;
        height: 372px;
    }

    .offer-card::after {
        left: 420px;
        /*tut*/
    }

    /* Исправление для age-restriction без absolute */
    .offer-card .offer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding-right: 0;
        /* Убираем лишний отступ, если он был */
    }

    .offer-card .age-restriction {
        position: relative;
        /* Меняем с absolute на relative */
        top: auto;
        /* Сбрасываем top */
        right: auto;
        /* Сбрасываем right */
        width: 50px;
        height: 50px;
        font-size: 24px;
        margin: 0;
        /* Убираем отрицательное смещение */
        left: auto;
        flex-shrink: 0;
        /* Запрещаем сжиматься */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .offer-card .offer-content .offer-title {
        font-size: 26px;
        max-width: 70%;
        /* Ограничиваем ширину заголовка */
        margin-right: 15px;
        /* Отступ между заголовком и 18+ */
    }
}

/* Исправление для небольших десктопов и планшетов (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .offer-card .age-restriction {
        top: 60px;
        right: 300px;
        width: 55px;
        height: 55px;
        font-size: 28px;
        left: auto;
    }

    .offer-card .offer-decoration {
        width: 387px;
        height: 372px;
        right: 80px;
    }

    /* Также корректируем заголовок, чтобы текст не налезал */
    .offer-card .offer-header {
        padding-right: 70px;
        /* Увеличиваем отступ справа для age-restriction */
    }

    .offer-card .offer-content .offer-title {
        font-size: 26px;
    }
}

/* Оффер */
.offer-finance-banner {
    padding-bottom: 20px;
    max-width: 1400px;
    margin: 20px 32px;
}

.offer-finance-card {
    background: #BBEE9A;
    padding: 30px;
    border-radius: 32px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    min-height: 220px;
    overflow: visible; /* важно: сама карточка НЕ обрезает дочерние элементы */
    margin-top: 50px;
}

/* Внутренний контейнер — обрезает круги, но не декорацию */
.offer-finance-card .offer-card-clipped {
    position: absolute;
    inset: 0;
    border-radius: 32px;
    overflow: hidden;
    z-index: 1;
    pointer-events: none; /* клики проходят сквозь него к кнопке ниже */
    padding: 20px;
}

.offer-finance-card .offer-card-clipped > * {
    pointer-events: auto; /* возвращаем интерактивность контенту */
}

/* Круг 1 - большой светлый */
.offer-finance-card .offer-card-clipped::before {
    content: '';
    position: absolute;
    pointer-events: none;
    width: 404px;
    height: 404px;
    right: 180px;
    top: -191px;
    background: linear-gradient(119.54deg, rgba(72, 149, 63, 0.14) -8.19%, rgba(97, 188, 79, 0.14) 87.05%);
    border-radius: 50%;
}

/* Круг 2 */
.offer-finance-card .offer-card-clipped::after {
    content: '';
    position: absolute;
    pointer-events: none;
    width: 344px;
    height: 344px;
    right: -50px;
    top: 92px;
    background: linear-gradient(119.54deg, rgba(72, 149, 63, 0.14) -8.19%, rgba(97, 188, 79, 0.14) 87.05%);
    border-radius: 50%;
    transform: rotate(150deg);
    filter: blur(1px);
}

.offer-finance-card .offer-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 2;
}

.offer-finance-card .offer-title {
    color: var(--color-black);
    font-size: 32px;
    margin: 0;
    max-width: 700px;
}

.offer-finance-card .offer-price {
    color: var(--color-black);
    font-family: 'MTS Compact', sans-serif;
    font-size: 16px;
    max-width: 450px;
}

.offer-finance-card .offer-decoration {
    position: absolute;
    right: 40px;
    bottom: -55px;
    width: 487px;
    height: 472px;
    background: url('../images/offer-finance-banner.png') no-repeat right top;
    background-size: contain;
    z-index: 2;
    pointer-events: none;
}

.offer-finance-card .btn-calculate-white {
    background-color: #000000;
    color: var(--color-white);
    text-transform: none;
    border: none;
    border-radius: 30px;
    padding: 10px 70px 10px 20px;
    font-size: 22px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 3;
    width: auto;
    min-width: 200px;
    align-self: flex-start;
}

.offer-finance-card .btn-calculate-white::before {
    content: '';
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-color: #eb001b;
    border-radius: 50%;
    z-index: 1;
}

.offer-finance-card .btn-calculate-white::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-color: #f79e1b;
    border-radius: 50%;
    z-index: 2;
    opacity: 0.85;
}

/* Мобильная версия */
@media (max-width: 768px) {
    .offer-finance-card {
        padding: 20px;
        gap: 20px;
        min-height: 380px;
        margin-top: 30px;
    }

    .offer-finance-card .offer-content {
        gap: 15px;
        z-index: 3;
    }

    .offer-finance-card .offer-title {
        font-size: 20px;
        max-width: 90%;
    }

    .offer-finance-card .offer-price {
        font-size: 16px;
    }

    .offer-finance-card .offer-decoration {
        position: absolute;
        right: 20px;
        bottom: 0;
        width: 200px;
        height: 200px;
        background-size: contain;
        background-position: bottom right;
        z-index: 1;
        opacity: 0.9;
    }

    .offer-finance-card .btn-calculate-white {
        font-size: 18px;
        padding: 10px 20px;
        z-index: 3;
        width: 100%;
        min-width: 100%;
        margin-top: auto;
    }
}

/* Планшетная версия */
@media (min-width: 768px) and (max-width: 991px) {
    .offer-finance-card .offer-decoration {
        right: 25px;
        bottom: -40px;
        width: 280px;
        height: 280px;
    }

    .offer-finance-card .offer-title {
        font-size: 26px;
        max-width: 70%;
    }
}

/* Маленькие десктопы */
@media (min-width: 992px) and (max-width: 1199px) {
    .offer-finance-card .offer-decoration {
        width: 387px;
        height: 372px;
        right: 20px;
        bottom: -40px;
    }

    .offer-finance-card .offer-title {
        font-size: 26px;
    }
}

/* ========== СТРАНИЦА: Специалист (specialist.html) ========== */

.specialist-profile {
    padding: 60px 0;
}

.specialist-photo {
    border-radius: 32px;
    overflow: hidden;
    width: 550px;
    height: 555px;
    max-width: 100%;
}

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

.specialist-info h1 {
    font-size: 32px;
    line-height: 45px;
    margin-bottom: 10px;
}

.specialist-title {
    font-family: 'MTS Wide', sans-serif;
    font-size: 20px;
    line-height: 28px;
    color: var(--color-purple);
    margin-bottom: 20px;
}

.specialist-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.specialist-tags .tag {
    color: var(--color-dark);
    border: 1px solid var(--color-dark);
    border-radius: 22px;
    padding: 10px 16px;
    font-family: 'MTS Wide', sans-serif;
    font-size: 16px;
    line-height: 14px;
    backdrop-filter: blur(8.8px);
}

.specialist-description {
    margin-bottom: 20px;
}

.specialist-description p {
    font-size: 16px;
    line-height: 20px;
}

.specialist-price {
    font-family: 'MTS Compact', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 20px;
    margin-bottom: 20px;
}

.btn-large {
    min-width: 200px;
}

@media (max-width: 768px) {
    .specialist-profile {
        padding: 40px 0;
    }

    .specialist-photo {
        width: 100%;
        height: auto;
        aspect-ratio: 550/555;
        /* Сохраняем пропорции 550:555 */
        margin-bottom: 20px;
    }

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

    /* Скрываем specialist-title на мобильных */
    .specialist-title {
        display: none;
    }

    .specialist-info h1 {
        font-size: 24px;
        line-height: 32px;
        margin-bottom: 15px;
    }

    .specialist-tags {
        gap: 6px;
        margin-bottom: 15px;
    }

    .specialist-tags .tag {
        padding: 8px 12px;
        font-size: 14px;
        line-height: 12px;
    }

    .specialist-description p {
        font-size: 15px;
        line-height: 22px;
    }

    .specialist-price {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 15px;
    }

    .btn-large {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        padding: 12px 20px;
        font-size: 18px;
        text-align: center;
        display: block;
        box-sizing: border-box;
    }
}

/* ========== СТРАНИЦА: Исследования (research.html) ========== */

.research-hero {
    padding: 60px 0;
    background: var(--color-light);
}

.research-hero .row {
    display: flex;
    align-items: stretch;
    /* Растягиваем колонки по высоте */
}

.research-hero .col-lg-4,
.research-hero .col-lg-8 {
    display: flex;
}

.research-hero-content {
    background: var(--color-dark);
    /* Черный фон */
    color: var(--color-white);
    border-radius: 32px;
    padding: 40px;
    height: 100%;
    /* Растягиваем на всю высоту родителя */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Распределяем контент */
    min-height: 468px;
    /* Минимальная высота как у research-hero-stats */
}

.research-hero-content h1 {
    font-size: 32px;
    line-height: 38px;
    margin-bottom: 30px;
    color: var(--color-white);
}

.research-hero-content p {
    font-family: 'MTS Compact', sans-serif;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 30px;
    color: var(--color-white);
    opacity: 0.9;
    flex: 1;
    /* Занимает доступное пространство */
}

.research-hero-content .btn {
    align-self: flex-start;
    /* Выравниваем кнопку по левому краю */
    min-width: 200px;
}

.research-hero-stats {
    position: relative;
    width: 100%;
    min-height: 468px;
    background: linear-gradient(135deg, #6034D1 0%, #F570A3 50%, #FFE284 100%);
    background-size: cover;
    border-radius: 32px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--color-white);
    overflow: hidden;
}

.research-hero-stats .stats-number {
    font-family: 'MTS Wide', sans-serif;
    font-size: 90px;
    line-height: 1;
    font-weight: 500;
    color: var(--color-white);
    display: block;
    margin-bottom: 20px;
    position: relative;
}

.research-hero-stats .stats-number::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 260px;
    height: 2px;
    background: var(--color-white);
    opacity: 0.5;
}

.research-hero-stats .stats-label {
    font-family: 'MTS Compact', sans-serif;
    font-size: 22px;
    line-height: 1.3;
    color: var(--color-white);
    display: block;
    max-width: 500px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    padding-top: 20px;
}

.research-results {
    padding: 60px 0;
}

.research-results h2 {
    font-size: 32px;
    line-height: 38px;
    margin-bottom: 40px;
}

.research-results .btn {
    border: 1px solid var(--color-dark);
    border-radius: 30px;
}

.research-card {
    background: var(--color-white);
    border-radius: 23px;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.research-card .research-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Заголовок не растягивается */
.research-card .research-card-content h3 {
    flex-shrink: 0;
}

.research-card h3 {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 20px;
}

.research-card .card-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    margin-bottom: 15px;
}

.research-card .stat-label {
    font-family: 'MTS Wide', sans-serif;
    font-size: 16px;
    line-height: 22px;
    text-transform: uppercase;
}

.research-card .stat-value {
    font-family: 'MTS Wide', sans-serif;
    font-size: 25px;
    line-height: 23px;
    background: transparent;
    border: 1px solid var(--color-dark);
    border-radius: 30px;
    padding: 10px 15px;
}

.research-card .card-total {
    font-family: 'MTS Wide', sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-gray);
    margin-top: 5px;
    margin-bottom: 10px;
    text-transform: lowercase;
}

.research-card .card-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-top: 1px solid rgba(38, 38, 38, 0.3);
    margin-bottom: 15px;
}

.research-card .result-label {
    font-family: 'MTS Wide', sans-serif;
    font-size: 16px;
    line-height: 22px;
    text-transform: uppercase;
}

.research-card .result-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #90C448;
    position: relative;
}

.research-card .result-icon.positive::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 12px;
    background: var(--color-white);
    clip-path: polygon(14% 44%, 0% 60%, 40% 100%, 100% 20%, 84% 4%, 38% 60%);
}

.research-card .btn {
    background: var(--color-dark);
    color: #fff;
    width: 100%;
    text-transform: none;
    margin-top: auto;
}

/* Запись на исследование */
.research-enrollment {
    margin-bottom: 60px;
    width: 100%;
}

.enrollment-grid {
    display: flex;
    gap: 12px;
    width: 100%;
    max-width: 1216px;
    margin: 0 auto;
}

.enrollment-card {
    background: var(--color-dark);
    border-radius: 32px;
    padding: 32px;
    display: flex;
    flex-direction: column;
}

.enrollment-card-wrapper {
    position: relative;
    width: 395px;
    height: 511px;
}

.enrollment-card-left {
    position: absolute;
    width: 100%;
    height: 100%;
    perspective: 1500px;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    padding: 0;
}

.enrollment-card-left.flipped {
    transform: rotateY(180deg);
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 32px;
    padding: 32px;
    box-sizing: border-box;
    background: var(--color-dark);
    color: var(--color-white);
    display: flex;
    flex-direction: column;
}

.enrollment-card-wrapper .enrollment-btn {
    position: absolute;
    bottom: 32px;
    left: 32px;
    z-index: 20;
    background: #FFFFFF;
    color: #1D2023;
    border: none;
    transition: all 0.3s ease;
    pointer-events: auto;
    text-decoration: none;
}


/* Лицевая сторона */
.card-face-front {
    transform: rotateY(0deg);
    z-index: 2;
}


.enrollment-title {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 25px;
    line-height: 32px;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-bottom: 24px;
    max-width: 246px;
}

.enrollment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 22px 8px;
    background: #FFFFFF;
    border-radius: 30px;
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 25px;
    color: #1D2023;
    text-decoration: none;
    width: fit-content;
    transition: all 0.3s ease;
    position: absolute;
    bottom: 32px;
    left: 32px;
}

.enrollment-card-right {
    width: 821px;
    flex-shrink: 0;
    position: relative;
    padding-bottom: 32px;
    display: flex;
    flex-direction: column;
}

.enrollment-card-right .enrollment-title,
.enrollment-card-right .enrollment-action {
    display: none;
}

.enrollment-list {
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}

.enrollment-list-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    position: relative;
}

.item-number {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 17px;
    text-transform: uppercase;
    color: #FFFFFF;
    min-width: 25px;
}

.item-arrow-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8px;
    height: 20px;
    margin-right: 4px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.item-content p {
    font-family: 'MTS Compact', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #FFFFFF;
    margin: 0;
    max-width: 500px;
    text-transform: none;
}

.enrollment-progress-wrapper {
    margin-top: auto;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
    width: 100%;
}

.progress-bar-container {
    position: relative;
    width: 100%;
    height: 12px;
    margin-bottom: 8px;
}

.progress-bar-bg {
    position: absolute;
    width: 100%;
    height: 12px;
    background: #FFFFFF;
    border-radius: 40px;
}

.progress-bar-fill {
    position: absolute;
    height: 12px;
    background: linear-gradient(96.96deg, #CEC4FF 10.88%, #5522C4 99.97%), linear-gradient(90deg, #2E107B 0%, #6E30FF 100%);
    border-radius: 40px;
    top: 0;
    left: 0;
}

.progress-stats-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.progress-numbers {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    text-transform: uppercase;
    color: #FFFFFF;
    text-align: left;
}

.stats-percent-block {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 20px;
}

.stats-percent {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 55px;
    line-height: 23px;
    text-align: left;
    text-transform: uppercase;
    color: #FFFFFF;
}

.stats-label {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
    text-transform: uppercase;
    color: #FFFFFF;
    opacity: 0.9;
    max-width: 100px;
    display: block;
    word-break: break-word;
}

.enrollment-stats {
    display: flex;
    justify-content: flex-end;
    position: relative;
    z-index: 2;
    width: 100%;
}

.enrollment-participate-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 9px 22px 8px;
    background: #FFFFFF;
    border-radius: 30px;
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    color: #1D2023;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

/* ========== ПЕРЕВОРОТ КАРТОЧКИ ЗАПИСИ (МОБИЛЬНЫЕ) ========== */
@media (max-width: 991px) {
    .enrollment-card-wrapper {
        width: auto;
    }

    .enrollment-card-right .enrollment-title,
    .enrollment-card-right .enrollment-action {
        display: flex;
    }

    .enrollment-card-right {
        perspective: 1500px;
        transform-style: preserve-3d;
    }

    .enrollment-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        min-height: 511px;
        transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        transform-style: preserve-3d;
    }

    .enrollment-card-inner.flipped {
        transform: rotateY(180deg);
    }
    
    .card-face {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        border-radius: 32px;
        padding: 32px;
        box-sizing: border-box;
        background: var(--color-dark);
        color: var(--color-white);
        display: flex;
        flex-direction: column;
    }

    /* Лицевая сторона */
    .card-face-front {
        transform: rotateY(0deg);
        z-index: 2;
    }
}

@media (max-width: 768px) {
    .research-hero-content {
        width: 100%;
    }

    .research-hero .row {
        display: flex;
        flex-direction: column;
    }

    .research-hero .col-lg-4,
    .research-hero .col-lg-8 {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .research-hero .col-lg-8 {
        order: 1;
        /* Сначала stats */
        margin-bottom: 20px;
    }

    .research-hero .col-lg-4 {
        order: 2;
        /* Потом контент */
    }

    .research-hero-content {
        min-height: auto;
        padding: 30px 20px;
    }

    .research-hero-stats {
        min-height: 300px;
        padding: 30px 20px;
    }

    .research-hero-content h1 {
        font-size: 22px;
        line-height: 28px;
    }

    .research-hero-content .btn {
        width: 100%;
    }

    .research-results h2 {
        font-size: 22px;
        line-height: 28px;
    }
}

/* ========== СТРАНИЦА: Мероприятие (event.html) ========== */

.event-hero {
    padding: 0;
    color: var(--color-white);
    position: relative;
}

.event-hero .hero-grid {
    display: flex;
    gap: 0;
    min-height: 500px;
    border-radius: 32px;
    overflow: hidden;
}

.event-hero .hero-left {
    flex: 1;
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    background: #000000;
    border-radius: 32px;
}

.event-hero .hero-right {
    flex: 2;
    position: relative;
    min-height: 400px;
    background-image: url('../images/event-hero-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 32px;
}

.event-hero .hero-left-content,
.event-hero .hero-right-content {
    position: relative;
    z-index: 2;
    padding: 40px 30px;
    color: var(--color-white);
    height: 100%;
    width: 100%;
}

.event-hero .hero-left-content {
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.event-badge {
    border: 1px solid var(--color-white);
    border-radius: 22px;
    padding: 10px 11px;
    font-size: 12px;
    display: inline-block;
    width: fit-content;
    margin-bottom: 20px;
}

.event-hero h1 {
    font-size: 32px;
    line-height: 45px;
    margin-bottom: 20px;
}

.event-meta {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    font-size: 14px;
}

.countdown-timer {
    display: flex;
    gap: 5px;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
}

.timer-block {
    background: transparent;
    min-width: 70px;
    text-align: center;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.timer-separator {
    font-family: 'MTS Wide', sans-serif;
    font-size: 48px;
    line-height: 1;
    color: var(--color-white);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    margin: 0 2px;
    align-self: center;
    transform: translateY(-10px);
}

.timer-value {
    font-family: 'MTS Wide', sans-serif;
    font-size: 48px;
    line-height: 1;
    display: block;
    color: var(--color-white);
    margin-bottom: 5px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.timer-label {
    font-family: 'MTS Wide', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
    margin-top: 0;
}

.event-details {
    padding: 60px 0;
}

.event-details h2 {
    font-size: 32px;
    line-height: 38px;
    margin-bottom: 30px;
}

.event-details p {
    font-size: 16px;
    line-height: 26px;
    max-width: 876px;
}

.upcoming-events {
    padding: 60px 0;
}

.upcoming-events h2 {
    font-size: 32px;
    line-height: 38px;
    margin-bottom: 40px;
}

.event-card {
    background: var(--color-white);
    border-radius: 22px;
    overflow: hidden;
    height: 100%;
}

.event-card .date-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.event-card .date-with-icon::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('../images/icons/shape.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 4px;
}

.event-card .card-image {
    position: relative;
    height: 200px;
}

.event-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 0 20px 20px;
}

.card-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8.8px);
    border-radius: 22px;
    padding: 4px 11px;
    font-family: 'MTS Wide', sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 12px;
}

.event-card .card-body {
    padding: 16px;
}

.event-card .card-meta {
    display: flex;
    gap: 6px;
    font-size: 14px;
    color: #626C77;
    margin-bottom: 10px;
}

.event-card h3 {
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 10px;
}

.event-card p {
    font-size: 17px;
    line-height: 22px;
    color: #626C77;
    margin-bottom: 15px;
}

.event-card .btn {
    font-size: 18px;
    width: 100%;
    text-transform: none;
}

/* ========== СТРАНИЦА: Мероприятия (events.html) ========== */

.events-card {
    overflow: hidden;
    height: 260px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    position: relative;
    min-height: 200px;
    margin-bottom: 20px;
}

.events-card .card-image {
    position: relative;
    width: 33.333%;
    flex-shrink: 0;
    overflow: hidden;
    height: auto;
    border-radius: 32px;
}

.events-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.events-card .card-content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--color-white);
    border-radius: 32px;
}

.events-card .card-tag {
    border: 1px solid var(--color-dark);
    border-radius: 22px;
    padding: 8px 16px;
    margin-left: 10px;
    font-family: 'MTS Wide', sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 12px;
    z-index: 2;
    text-transform: none;
}

.events-card h3 {
    font-family: 'MTS Wide', sans-serif;
    font-size: 22px;
    line-height: 28px;
    margin: 60px 0 10px 0;
    text-transform: uppercase;
}

.events-card p {
    font-family: 'MTS Compact', sans-serif;
    font-size: 16px;
    line-height: 20px;
    color: #626C77;
    margin: 0 0 15px 0;
    flex: 1;
}

.events-card .card-meta {
    display: flex;
    gap: 6px;
    font-size: 16px;
    color: #626C77;
    margin: 0;
}

.events-card .date-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.events-card .date-with-icon::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('../images/icons/shape.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 4px;
}

.events-card .btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 16px;
    padding: 8px 20px;
    min-width: auto;
    width: auto;
    text-transform: none;
    background: var(--color-dark);
    color: var(--color-white);
    border-radius: 30px;
    z-index: 3;
}

.events-card .btn:hover {
    background: #2a2f33;
}

/* Медиа-запрос для мобильных устройств */
@media (max-width: 768px) {
    .events-card {
        flex-direction: column;
        height: auto;
        min-height: auto;
        border-radius: 22px;
        background: var(--color-white);
        padding: 0;
    }

    .events-card .card-image {
        width: 100%;
        height: 200px;
        border-radius: 22px 22px 0 0;
        position: relative;
    }

    .events-card .card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 22px 22px 0 0;
    }

    .events-card .card-tag {
        position: absolute;
        top: -180px;
        left: 10px;
        margin: 0;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(4px);
        border: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        z-index: 10;
        font-size: 12px;
        line-height: 14px;
        text-transform: none;
    }

    .events-card .card-content {
        padding: 16px;
        border-radius: 0 0 22px 22px;
        min-height: auto;
        position: relative;
    }

    .events-card h3 {
        font-size: 20px;
        line-height: 24px;
        margin: 0 0 8px 0;
        padding-top: 30px;
    }

    .events-card p {
        font-size: 17px;
        line-height: 22px;
        margin: 0 0 12px 0;
        color: #626C77;
    }

    .events-card .card-meta {
        position: absolute;
        display: flex;
        gap: 8px;
        font-size: 14px;
        color: #9095A7;
        flex-wrap: wrap;
    }

    .events-card .btn {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        margin: 0;
        font-size: 16px;
        padding: 10px 20px;
        text-align: center;
        background: var(--color-dark);
        color: var(--color-white);
        border-radius: 30px;
    }

    .events-card .btn:hover {
        background: #2a2f33;
    }

    .events-card .date-with-icon::before {
        width: 14px;
        height: 14px;
    }
}

/* ========== ФУТЕР (все страницы) ========== */

.footer {
    background: var(--color-dark);
    color: var(--color-white);
    padding-top: 40px;
}

.footer .container {
    max-width: 1280px;
    margin: 0 auto;
}

.footer-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}

.footer-logo {
    margin-bottom: 20px;
}

.footer-logo img {
    max-width: 200px;
    height: auto;
}

.footer-social {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transition: all 0.3s ease;
    background: transparent;
    position: relative;
}

.social-icon.restricted::after {
    content: '*';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    z-index: 10;
}

.social-icon:hover {
    border-color: var(--color-white);
    transform: scale(1.05);
}

.social-icon img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

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

.footer-left {
    flex: 1;
    text-align: left;
}

.footer-left p {
    font-family: 'MTS Wide', sans-serif;
    font-size: 9px;
    line-height: 16px;
    text-transform: uppercase;
    opacity: 0.47;
    margin: 0;
    max-width: 400px;
}

.footer-right {
    flex: 1;
    text-align: right;
}

.footer-copyright {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'MTS Wide', sans-serif;
    font-size: 9px;
    line-height: 16px;
    text-transform: uppercase;
    opacity: 0.47;
}

/* ========== АНИМАЦИИ ========== */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ========== МЕДИА-ЗАПРОСЫ (общие адаптации) ========== */

@media (max-width: 1400px) {
    .hero-stats-wrapper {
        width: calc(100% - 64px);
        left: 32px;
        transform: none;
    }
}

@media (max-width: 992px) {

    .hero-title,
    .hero-description,
    .hero-join-block {
        display: block !important;
    }

    .hero {
        background: #DAE2E5;
        min-height: auto;
        height: auto;
        position: relative;
        padding: 40px 0 20px;
        overflow: visible;
        /* Меняем с hidden на visible */
    }

    /* Планета как обычный блок, а не фон */
    .hero-planet {
        display: block !important;
        position: relative;
        width: 600px;
        /* На всю ширину экрана */
        height: 600px;
        /* Ограничиваем шириной экрана */
        margin: 380px 0 0 0;
        background: url(../images/planet.png) no-repeat center;
        background-size: cover;
        /* Теперь будет обрезаться по бокам */
        opacity: 0.8;
        z-index: 1;
        pointer-events: none;
    }

    .hero .container {
        position: relative;
        z-index: 2;
        background: transparent;
        padding-top: 0;
        margin-top: -350px;
        /* Убираем отступы */
    }

    .hero .row {
        display: flex;
        flex-direction: column;
    }

    /* Меняем порядок колонок */
    .hero .col-lg-6:first-child {
        order: 2;
    }

    .hero .col-lg-6:last-child {
        order: 1;
    }

    /* Блок присоединиться */
    .hero-join-block {
        position: relative;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 0 20px 0;
        z-index: 15;
    }

    .join-button {
        position: relative;
        width: 100%;
        max-width: 380px;
        height: 60px;
        background: #1D2023;
        border-radius: 40px;
        cursor: pointer;
        transition: all 0.3s ease;
        z-index: 2;
        margin: 0 auto;
    }

    .join-text {
        font-family: 'MTS Wide', sans-serif;
        font-size: 18px;
        line-height: 28px;
        color: #FFFFFF;
        text-transform: uppercase;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        white-space: nowrap;
    }

    .join-icons {
        position: absolute;
        left: 10px;
        top: 5px;
        display: flex;
        align-items: center;
    }

    .join-icon-image {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        background: #F570A3;
        position: relative;
    }

    .join-icon-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .join-icon-image.first-icon {
        z-index: 2;
    }

    .join-icon-image.second-icon {
        margin-left: -15px;
        z-index: 3;
    }

    .join-icon-plus {
        width: 50px;
        height: 50px;
        background: #FFFFFF;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: -25px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        z-index: 4;
        position: relative;
    }

    .join-icon-plus span {
        font-family: 'MTS Wide', sans-serif;
        font-size: 28px;
        font-weight: 300;
        color: #1D2023;
        line-height: 1;
    }

    .join-circle-bg {
        position: absolute;
        width: 45px;
        height: 45px;
        left: 25px;
        top: 8px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        z-index: 1;
        filter: blur(4px);
    }

    /* Заголовок и описание */
    .hero-title {
        font-size: 30px;
        line-height: 1.1;
        margin-bottom: 15px;
        color: #1D2023;
        max-width: 100%;
        text-align: center;
    }

    .hero-description {
        font-family: 'MTS Compact', sans-serif;
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 30px;
        color: #1D2023;
        max-width: 100%;
        text-align: center;
    }

    /* Убираем лишние элементы */
    .hero .hero-stats-wrapper {
        display: none;
    }

    .moon-divider {
        display: none;
    }
    
    .moon-text {
        display: none;
    }

    .moon-tooltip {
        position: absolute;
        /* меняем с fixed на absolute */
        top: 60px;
        /* позиция относительно иконки */
        bottom: auto;
        /* сбрасываем bottom */
        left: -200px;
        transform: none;
        /* убираем трансформацию */
        width: 270px;
        /* фиксированная ширина как на десктопе */
        max-width: 270px;
        z-index: 2100;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

    .method-hero .col-lg-6:last-child {
        padding-left: calc(var(--bs-gutter-x) * 0.5);
        margin-top: 30px;
    }

    .method-content {
        min-height: auto;
    }

    .audience-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .includes-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .price-card {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .calculator-card {
        min-height: 350px;
        width: 100%;
        max-width: 100%;
        background-position: center center;
        background-size: auto;
    }

    .calculator-content {
        min-height: 700px;
    }

    .calculator-title {
        font-size: 20px;
        line-height: 34px;
        margin-bottom: 30px;
    }

    .btn-calculate {
        font-size: 22px;
        min-width: 180px;
        height: 55px;
    }
}

/* Скрываем moon-message на планшетах с разрешением 1024x768 и подобных */
@media (min-width: 992px) and (max-width: 1200px) {
    .moon-message {
        display: none;
    }

    /* Дополнительно: можно уменьшить отступы в шапке */
    .header-nav a {
        padding: 8px 6px 7px;
        font-size: 11px;
    }

    .header-right {
        margin-left: 5px;
    }
}

/* Специально для разрешения 1024x768 (горизонтальная ориентация) */
@media (min-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
    .moon-message {
        display: none;
    }
}


/* Альтернативное решение: сетка 3x2 для ландшафтной ориентации */
@media (max-width: 992px) and (orientation: landscape) {
    .mobile-stats {
        min-height: auto;
        padding: 20px 0;
        background: #DAE2E5;
    }

    .mobile-stats-container {
        position: relative;
        min-height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding: 0 16px;
    }

    /* Сбрасываем абсолютное позиционирование */
    .mobile-stat-card {
        position: relative !important;
        width: calc(25% - 7.5px) !important;
        height: auto !important;
        min-height: 70px;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        margin: 0;
        padding: 10px;
    }

    /* Первая карточка на всю ширину (если нужно) */
    .mobile-stat-card:nth-of-type(1) {
        width: 100% !important;
        margin-bottom: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        background: rgba(144, 149, 167, 0.15);
        backdrop-filter: blur(5px);
        border: 1px solid var(--color-white);
    }

    .mobile-stat-card:nth-of-type(1) .mobile-stat-number {
        font-size: 24px;
        margin-bottom: 0;
        width: auto;
    }

    .mobile-stat-number {
        font-size: 18px;
        line-height: 1.2;
    }

    .mobile-stat-number::after {
        display: none;
        /* Убираем линию в ландшафтном режиме */
    }

    .mobile-stat-label {
        font-size: 8px;
        line-height: 1.2;
    }
}

/* Исправление для планшетов в вертикальной ориентации */
@media (min-width: 768px) and (max-width: 992px) and (orientation: portrait) {
    .mobile-stats {
        display: block;
        min-height: auto;
        padding: 20px 0;
        background: #DAE2E5;
    }

    .mobile-stats-container {
        position: relative;
        min-height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 15px;
        padding: 0 16px;
    }

    /* Сбрасываем абсолютное позиционирование для всех карточек */
    .mobile-stat-card {
        position: relative !important;
        width: calc(50% - 8px) !important;
        height: auto !important;
        min-height: 100px;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        margin: 0;
        padding: 15px;
        background: rgba(144, 149, 167, 0.15);
        backdrop-filter: blur(5px);
        border: 1px solid var(--color-white);
        border-radius: 19.04px;
    }

    /* Первая карточка на всю ширину */
    .mobile-stat-card:nth-of-type(1) {
        width: 100% !important;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 15px 20px;
        margin-bottom: 5px;
    }

    .mobile-stat-card:nth-of-type(1) .mobile-stat-number {
        font-size: 32px;
        margin-bottom: 0;
        width: auto;
    }

    .mobile-stat-card:nth-of-type(1) .mobile-stat-label {
        font-size: 14px;
        margin-top: 0;
        padding-left: 15px;
        max-width: 60%;
    }

    .mobile-stat-number {
        font-size: 24px;
        line-height: 1.2;
        margin-bottom: 8px;
    }

    .mobile-stat-number::after {
        display: none;
    }

    .mobile-stat-label {
        font-size: 11px;
        line-height: 1.3;
        margin-top: 8px;
    }

    /* Уменьшаем размер заголовков в карточках feature-cards */
    .feature-cards .card-content h3 {
        font-size: 18px;
        line-height: 24px;
    }

    /* Также можно уменьшить первую часть заголовка */
    .feature-cards .card-content h3 .first-word {
        font-size: 18px;
    }

    /* Для карточек расчета тоже можно добавить */
    .calculation-card .card-title {
        font-size: 22px !important;
        line-height: 28px !important;
    }

}

/* Для ландшафтной ориентации планшетов (1024x768) */
@media (min-width: 992px) and (max-width: 1200px) and (orientation: landscape) {
    .mobile-stats {
        display: none;
        /* Скрываем мобильную статистику на планшетах в ландшафте */
    }

    .moon-tooltip {
        left: auto !important;
        right: 0 !important;
        transform: none !important;
        width: 250px;
        max-width: 250px;
    }

}


/* ========== ПЛАНШЕТЫ (ДОБАВЛЕННЫЕ СТИЛИ) ========== */

/* Планшеты (вертикальная и горизонтальная ориентация) */
@media (min-width: 769px) and (max-width: 991px) {

    /* Общие корректировки */
    .container {
        padding: 0 24px;
    }

    h1 {
        font-size: 24px !important;
        line-height: 42px !important;
    }

    h2 {
        font-size: 26px !important;
        line-height: 34px !important;
    }

    /* Секция hero на планшетах */
    .hero {
        min-height: 600px;
        padding: 60px 0;
    }

    .hero-title {
        font-size: 48px;
        max-width: 350px;
    }

    .hero-description {
        font-size: 20px;
        max-width: 320px;
    }

    .hero-join-block {
        width: 340px;
    }

    .hero-stats-wrapper {
        padding: 15px 30px;
    }

    .hero-stat-number {
        font-size: 30px;
    }

    .hero-stat-label {
        font-size: 10px;
        max-width: 100px;
    }

    /* Секция "О методе" на планшетах */
    .method-photo {
        width: 100%;
        max-width: 500px;
        height: 550px;
    }

    .method-photo img {
        width: 100%;
        height: auto;
        max-width: 400px;
        top: 50px;
    }

    .method-text-wrapper {
        min-height: auto;
    }

    .method-text h2 {
        font-size: 28px;
        line-height: 34px;
    }

    .method-text p {
        font-size: 18px;
        line-height: 24px;
    }

    .research-center-block {
        height: auto;
        min-height: 160px;
    }

    .research-center-text {
        width: 100%;
        font-size: 14px;
        line-height: 20px;
    }

    /* Секция "Матрица" на планшетах */
    .matrix-calculation-wrapper {
        min-height: auto;
        padding-bottom: 40px;
    }

    .matrix-title {
        font-size: 28px;
        width: 300px;
        left: 24px;
    }

    .matrix-content {
        flex-direction: column;
        margin-top: 60px;
    }

    .matrix-left {
        position: relative;
        width: 100%;
        max-width: 485px;
        height: 550px;
        left: 24px;
        margin-bottom: 40px;
    }

    .matrix-right {
        position: relative;
        left: 24px;
        width: calc(100% - 48px);
        max-width: 612px;
        min-height: auto;
    }

    .matrix-description {
        width: 100%;
        max-width: 575px;
    }

    .matrix-form-wrapper {
        max-width: 100%;
    }

    /* Секция "Отзывы" на планшетах */
    .reviews-swiper-figma .swiper-slide {
        width: 280px;
    }

    .reviews-wrapper {
        padding: 30px 0;
    }

    .reviews-title {
        font-size: 28px;
        padding-left: 24px;
    }

    .reviews-navigation {
        bottom: 40px;
    }

    /* Секция "История и исследование" на планшетах */
    .history-research-wrapper {
        gap: 20px;
    }

    .history-image {
        height: 500px;
    }

    .image-overlay-block {
        width: 90%;
        left: 20px;
        bottom: 20px;
        padding: 15px 20px;
    }

    .overlay-title {
        font-size: 14px;
        line-height: 20px;
    }

    .overlay-subtitle {
        font-size: 13px;
        line-height: 18px;
    }

    .research-block {
        padding: 20px;
        min-height: 350px;
    }

    .research-text h3 {
        font-size: 26px;
        line-height: 32px;
    }

    .research-text p {
        font-size: 14px;
        line-height: 20px;
        max-width: 300px;
    }

    .progress-value {
        font-size: 28px;
    }

    .stats-percent-block {
        gap: 4px;
    }

    .stats-percent {
        font-size: 45px;
    }

    /* Секция "Быстрые ответы" на планшетах */
    .quick-answers-swiper .swiper-slide {
        width: 280px;
    }

    .audio-card {
        height: 350px;
    }

    .audio-card .card-title {
        font-size: 18px;
        line-height: 24px;
    }

    .btn-audio {
        font-size: 18px;
        padding: 8px 20px;
    }

    .audio-play-icon {
        width: 42px;
        height: 42px;
    }

    /* Секция "Журнал" на планшетах */
    .magazine h2 {
        font-size: 28px;
        line-height: 34px;
    }

    .magazine-form {
        padding: 25px;
    }

    .magazine-form h3 {
        font-size: 16px;
    }

    .magazine-form .form-row {
        flex-direction: column;
        gap: 15px;
    }

    /* Страница "О методе" на планшетах */
    .method-hero-image-wrapper {
        max-width: 500px;
    }

    .method-audio-controls {
        bottom: 20px;
        left: 20px;
        min-width: 240px;
    }

    .method-btn-audio {
        font-size: 16px;
        padding: 8px 15px 8px 20px;
    }

    .method-content {
        min-height: auto;
    }

    .method-content h1 {
        font-size: 28px;
        line-height: 34px;
    }

    .method-stats-banner {
        padding: 40px 0;
    }

    .stats-banner-content {
        padding: 25px;
        gap: 30px;
    }

    .stats-circle {
        width: 180px;
        height: 180px;
    }

    .stats-percent {
        font-size: 54px;
    }

    .stats-text h3 {
        font-size: 28px;
        line-height: 34px;
    }

    .method-numbers .number-value {
        font-size: 42px;
    }

    .method-numbers .number-value::after {
        width: 200px;
    }

    .research-center-content h2 {
        font-size: 26px;
        line-height: 32px;
        width: 100%;
    }

    .research-center-description {
        font-size: 14px;
        line-height: 18px;
        max-width: 500px;
    }

    .research-center-btn {
        min-width: 320px;
        font-size: 18px;
    }

    /* Страница "Книги" на планшетах */
    .books-hero {
        margin: 0 20px;
        min-height: 250px;
    }

    .books-hero-content h1 {
        font-size: 28px;
        line-height: 38px;
    }

    .books-hero-images {
        max-width: 50%;
        height: 250px;
    }

    .books-hero-images img {
        max-width: 200px;
        max-height: 300px;
    }

    .books-hero-images img:nth-child(1) {
        right: 200px;
    }

    .books-hero-images img:nth-child(2) {
        right: 120px;
    }

    .books-hero-images img:nth-child(3) {
        right: 40px;
    }
    
    .books-hero-images img:nth-child(4) {
        right: 10px;
    }

    .book-item .book-cover {
        padding: 15px;
    }

    .book-header-text h2 {
        font-size: 18px;
        line-height: 24px;
    }

    .book-header-btn {
        font-size: 18px;
        padding: 7px 18px;
    }

    .book-description {
        font-size: 14px;
        line-height: 18px;
    }

    .read-excerpt {
        font-size: 10px;
    }

    /* Страница "Консультации" на планшетах */
    .consultations-header h1 {
        font-size: 28px;
        line-height: 34px;
    }

    .filters {
        gap: 12px;
    }

    .filter-select {
        width: 160px;
        height: 38px;
        font-size: 13px;
        padding: 0 15px;
    }

    .consultant-card .card-image {
        height: 320px;
    }

    .consultant-card .card-body h3 {
        font-size: 18px;
        line-height: 22px;
    }

    .consultant-card .card-body p {
        font-size: 14px;
        line-height: 20px;
    }

    .disclaimer-content {
        padding: 25px;
        gap: 20px;
    }

    /* Страница "Консультация" на планшетах */
    .consultation-hero {
        margin: 0 20px;
    }

    .consultation-hero h1 {
        font-size: 45px;
        line-height: 45px;
    }

    .hero-benefits {
        font-size: 14px;
        line-height: 20px;
    }

    .includes-consultation {
        gap: 30px;
    }

    .includes-consultation .include-right {
        transform: translateX(-60px);
        margin-top: 50px;
    }

    .includes-consultation .include-right .quote-wrapper p {
        font-size: 18px;
        line-height: 26px;
    }

    .includes-consultation .include-right .advantages span {
        font-size: 9px;
        padding: 12px 16px;
    }

    .includes-grid {
        gap: 20px;
    }

    .include-item .item-icon {
        width: 70px;
        height: 70px;
    }

    .include-item p {
        font-size: 12px;
        line-height: 18px;
    }

    .price-card {
        padding: 30px;
    }

    .price-amount {
        font-size: 60px;
        line-height: 80px;
    }

    .consultation-terms h2 {
        font-size: 28px;
        line-height: 34px;
        padding-bottom: 20px;
    }

    .consultation-terms h2::after {
        left: 150px;
        width: 180px;
        height: 70px;
    }

    .consultation-terms .terms-item h3 {
        font-size: 16px;
    }

    .consultation-terms .terms-item p {
        font-size: 14px;
        line-height: 20px;
    }

    /* Страница "Совместимость" на планшетах */
    .compatibility-hero {
        margin: 0 20px;
        min-hight:600px;
    }

    .compatibility-hero h1 {
        font-size: 45px;
        line-height: 45px;
    }

    .calculator-content {
        padding: 60px 20px;
    }

    .calculator-title {
        font-size: 28px;
        line-height: 34px;
        max-width: 600px;
    }

    .calculator-row {
        gap: 20px;
    }

    .date-inputs {
        min-width: 260px;
    }

    .date-inputs .date-input-group {
        padding: 15px 15px 10px;
    }

    .date-field .form-control {
        height: 55px;
        font-size: 20px;
        padding: 14px 40px 14px 15px;
    }

    .btn-calculate {
        min-width: 180px;
        height: 55px;
        font-size: 20px;
        padding: 12px 24px;
    }

    /* Секция знаменитостей на планшетах */
    .celebrity-section {
        margin: 20px;
    }

    .section-title {
        font-size: 28px;
        margin: 15px;
    }

    .carousel-arrow {
        width: 45px;
        height: 45px;
    }

    .celebrity-swiper .swiper-slide {
        width: 240px;
    }

    .celebrity-card-item {
        height: 450px;
    }

    .celebrity-swiper .swiper-slide-active .celebrity-card-item {
        height: 550px;
    }

    .celebrity-swiper .swiper-slide-active .celebrity-name {
        font-size: 24px;
        line-height: 30px;
    }

    .offer-card {
        margin-top: 30px;
    }

    .offer-card .offer-content .offer-title {
        font-size: 28px;
        /*max-width: 400px;*/
    }

    .offer-card .btn-calculate-white {
        font-size: 18px;
        min-width: 180px;
    }

    /* Страница "Специалист" на планшетах */
    .specialist-photo {
        width: 450px;
        height: 455px;
    }

    .specialist-info h1 {
        font-size: 28px;
        line-height: 38px;
    }

    .specialist-title {
        font-size: 18px;
        line-height: 24px;
    }

    .specialist-tags .tag {
        font-size: 14px;
        padding: 8px 14px;
    }

    .specialist-description p {
        font-size: 14px;
        line-height: 18px;
    }

    .specialist-price {
        font-size: 18px;
    }

    /* Страница "Исследования" на планшетах */
    .research-hero-content {
        min-height: 400px;
        padding: 30px;
    }

    .research-hero-content h1 {
        font-size: 28px;
        line-height: 34px;
    }

    .research-hero-stats {
        min-height: 400px;
        padding: 30px;
    }

    .research-hero-stats .stats-number {
        font-size: 70px;
    }

    .research-hero-stats .stats-number::after {
        width: 200px;
    }

    .research-hero-stats .stats-label {
        font-size: 18px;
        max-width: 400px;
    }

    .enrollment-grid {
        gap: 20px;
    }

    .enrollment-card-left .enrollment-title {
        font-size: 22px;
        line-height: 28px;
        max-width: 200px;
    }

    .enrollment-list-item .item-content p {
        font-size: 12px;
        line-height: 16px;
        max-width: 400px;
    }

    .stats-percent-block {
        gap: 4px;
    }

    .stats-percent {
        font-size: 45px;
    }

    /* Страница "Мероприятие" на планшетах */
    .event-hero h1 {
        font-size: 28px;
        line-height: 38px;
    }

    .countdown-timer .timer-value {
        font-size: 40px;
    }

    .event-details h2 {
        font-size: 28px;
        line-height: 34px;
    }

    .upcoming-events h2 {
        font-size: 28px;
        line-height: 34px;
    }

    .event-card .card-image {
        height: 180px;
    }

    .event-card h3 {
        font-size: 18px;
        line-height: 22px;
    }

    .event-card p {
        font-size: 15px;
        line-height: 20px;
    }

    /* Страница "Мероприятия" на планшетах */
    .events-card {
        height: 240px;
    }

    .events-card h3 {
        font-size: 20px;
        line-height: 26px;
        margin-top: 40px;
    }

    .events-card p {
        font-size: 14px;
        line-height: 18px;
    }

    .events-card .btn {
        font-size: 14px;
        padding: 6px 16px;
    }

    /* Страница "Просмотр книги" на планшетах */
    .book-preview .preview-container {
        gap: 30px;
    }

    .book-preview .book-cover-section {
        flex: 0 0 250px;
    }

    .book-preview .book-cover-title {
        font-size: 18px;
        line-height: 24px;
    }

    .book-preview .book-cover-tag {
        font-size: 10px;
        padding: 6px 12px;
    }

    .book-preview .book-purchase-btn {
        font-size: 16px;
        padding: 10px 20px;
    }

    .book-preview .scrollable-text {
        max-height: 500px;
    }

    .book-preview .book-text-content {
        font-size: 13px;
    }

    /* Блок расчета совместимости на планшетах */
    .calculator-wrapper {
        padding: 30px 20px;
        min-height: auto;
    }

    .calculator-main-title {
        font-size: 28px;
        line-height: 34px;
    }

    .calculator-row {
        gap: 20px;
    }

    .participant-col {
        flex: 0 0 280px;
    }

    .date-display {
        font-size: 32px;
        line-height: 32px;
    }

    .matrix-codes {
        font-size: 12px;
        line-height: 18px;
    }

    .compatibility-calc-btn {
        max-width: 320px;
        font-size: 20px;
    }

    .result-item {
        padding: 20px 25px;
        gap: 20px;
    }

    .result-value {
        font-size: 36px;
        line-height: 50px;
    }

    .result-category {
        font-size: 18px;
        line-height: 24px;
    }

    .result-description {
        font-size: 13px;
        line-height: 18px;
    }

    /* Блок расчета финансов на планшетах */
    .finance-wrapper {
        padding: 30px 20px;
        min-height: auto;
    }

    .finance-title {
        font-size: 28px;
        line-height: 34px;
    }

    .finance-col {
        flex: 0 0 280px;
    }

    .finance-calc-btn {
        max-width: 340px;
        font-size: 20px;
    }

    .result-item {
        padding: 20px 25px;
        gap: 20px;
    }

    .result-value {
        font-size: 36px;
        line-height: 50px;
    }

    /* Модальное окно совместимости на планшетах */
    #compatibilityModal .modal-content {
        max-width: 700px;
    }

    #compatibilityModal .hero-container {
        padding: 15px;
        gap: 15px;
    }

    #compatibilityModal .main-score-card {
        flex: 0 0 300px;
    }

    #compatibilityModal .main-score-card .score-percentage {
        font-size: 50px;
        line-height: 60px;
    }

    #compatibilityModal .main-score-card .score-label {
        font-size: 14px;
        line-height: 18px;
        width: 150px;
    }

    #compatibilityModal .hearts-progress {
        width: 220px;
    }

    #compatibilityModal .matrix-badge {
        width: 160px;
    }

    #compatibilityModal .matrix-text-men,
    #compatibilityModal .matrix-text-women {
        font-size: 7px;
    }

    #compatibilityModal .description-title {
        font-size: 18px;
        line-height: 24px;
        max-width: 200px;
    }

    #compatibilityModal .description-text {
        font-size: 12px;
        line-height: 16px;
        max-width: 250px;
    }

    #compatibilityModal .metrics-row {
        gap: 12px;
    }

    #compatibilityModal .metric-value {
        font-size: 30px;
        line-height: 30px;
    }

    #compatibilityModal .metric-label {
        font-size: 10px;
        line-height: 14px;
    }

    #compatibilityModal .detailed-cards-wrapper {
        min-height: 550px;
    }

    #compatibilityModal .detailed-score {
        font-size: 70px;
        line-height: 70px;
    }

    #compatibilityModal .detailed-title {
        font-size: 24px;
        line-height: 30px;
        max-width: 400px;
    }

    #compatibilityModal .nav-arrow {
        width: 45px;
        height: 45px;
    }

    #compatibilityModal .nav-arrow-left {
        left: -15px;
    }

    #compatibilityModal .nav-arrow-right {
        right: -15px;
    }

    #compatibilityModal .modal-offer-card {
        padding: 20px 25px;
        min-height: 160px;
    }

    #compatibilityModal .modal-offer-card .offer-title {
        font-size: 18px;
        line-height: 24px;
    }

    #compatibilityModal .modal-offer-card .price-new {
        font-size: 24px;
    }

    #compatibilityModal .modal-offer-card .price-old {
        font-size: 18px;
    }

    #compatibilityModal .modal-offer-card .modal-offer-btn {
        font-size: 16px;
        min-width: 160px;
    }

    /* Модальное окно формы на планшетах */
    #consultationFormModal .modal-form-content {
        max-width: 600px;
    }

    #consultationFormModal .form-title {
        font-size: 18px;
        line-height: 24px;
        max-width: 500px;
    }

    #consultationFormModal .consultation-form {
        padding: 30px 30px 50px;
    }

    #consultationFormModal .form-field {
        max-width: 480px;
    }

    #consultationFormModal .radio-options {
        gap: 30px;
    }

    #consultationFormModal .form-submit-btn {
        width: 240px;
        font-size: 18px;
    }
}

/* Маленькие планшеты и большие телефоны (горизонтальная ориентация) */
@media (min-width: 992px) and (max-width: 1199px) {

    /* Общие корректировки */
    .container {
        padding: 0 28px;
    }

    /* Секция hero */
    .hero-title {
        font-size: 52px;
    }

    .hero-description {
        font-size: 20px;
    }

    .hero-join-block {
        width: 360px;
    }

    .hero-stats-wrapper {
        padding: 18px 35px;
    }

    .hero-stat-number {
        font-size: 32px;
    }

    /* Секция "О методе" */
    .method-photo {
        width: 550px;
        height: 600px;
    }

    .method-photo img {
        width: 450px;
        height: auto;
        top: 30px;
    }

    .method-text h2 {
        font-size: 30px;
        line-height: 36px;
    }

    .method-text p {
        font-size: 20px;
        line-height: 26px;
    }

    .research-center-text {
        width: 500px;
    }

    /* Секция "Матрица" */
    .matrix-title {
        font-size: 30px;
        width: 320px;
    }

    .matrix-left {
        width: 450px;
        height: 570px;
        left: 24px;
    }

    .matrix-right {
        left: 40px;
        width: 550px;
    }

    .matrix-description {
        width: 100%;
        max-width: 550px;
    }

    .matrix-form-wrapper {
        max-width: 550px;
    }

    /* Секция "История и исследование" */
    .history-image {
        height: 550px;
    }

    .image-overlay-block {
        width: 500px;
    }

    .research-text h3 {
        font-size: 30px;
        line-height: 36px;
    }

    .research-text p {
        max-width: 350px;
    }

    /* Страница "О методе" */
    .method-hero-image-wrapper {
        max-width: 550px;
    }

    .method-content h1 {
        font-size: 30px;
        line-height: 36px;
    }

    .stats-banner-content {
        gap: 40px;
    }

    .stats-circle {
        width: 200px;
        height: 200px;
    }

    .stats-percent {
        font-size: 58px;
    }

    .stats-text h3 {
        font-size: 30px;
        line-height: 36px;
    }

    .research-center-content h2 {
        font-size: 30px;
        line-height: 36px;
    }

    .research-center-btn {
        min-width: 350px;
    }

    /* Страница "Книги" */
    .books-hero-content h1 {
        font-size: 30px;
        line-height: 42px;
    }

    .books-hero-images img {
        max-width: 250px;
        max-height: 400px;
    }

    .books-hero-images img:nth-child(1) {
        right: 280px;
    }

    .books-hero-images img:nth-child(2) {
        right: 160px;
    }

    .books-hero-images img:nth-child(3) {
        right: 60px;
    }
    
    .books-hero-images img:nth-child(4) {
        right: 20px;
    }

    .book-header-text h2 {
        font-size: 20px;
        line-height: 26px;
    }

    /* Страница "Консультация" */
    .consultation-hero h1 {
        font-size: 50px;
        line-height: 50px;
    }

    .includes-consultation {
        gap: 40px;
    }

    .includes-consultation .include-right {
        transform: translateX(-80px);
        margin-top: 70px;
    }

    .includes-consultation .include-right .quote-wrapper p {
        font-size: 20px;
        line-height: 28px;
    }

    .includes-grid {
        gap: 25px;
    }

    .price-amount {
        font-size: 65px;
        line-height: 90px;
    }

    .consultation-terms h2 {
        font-size: 30px;
        line-height: 36px;
    }

    .consultation-terms h2::after {
        left: 180px;
        width: 200px;
        height: 80px;
    }

    /* Страница "Совместимость" */
    .compatibility-hero h1 {
        font-size: 50px;
        line-height: 50px;
    }

    .calculator-title {
        font-size: 30px;
        line-height: 36px;
        max-width: 650px;
    }

    .date-inputs {
        min-width: 300px;
    }

    /* Секция знаменитостей */
    .celebrity-swiper .swiper-slide {
        width: 260px;
    }

    .celebrity-card-item {
        height: 480px;
    }

    .celebrity-swiper .swiper-slide-active .celebrity-card-item {
        height: 580px;
    }

    .celebrity-swiper .swiper-slide-active .celebrity-name {
        font-size: 26px;
        line-height: 32px;
    }

    .offer-card .offer-title {
        font-size: 30px;
    }

    /* Страница "Специалист" */
    .specialist-photo {
        width: 500px;
        height: 505px;
    }

    .specialist-info h1 {
        font-size: 30px;
        line-height: 42px;
    }

    /* Страница "Исследования" */
    .research-hero-content h1 {
        font-size: 30px;
        line-height: 36px;
    }

    .research-hero-stats .stats-number {
        font-size: 80px;
    }

    .research-hero-stats .stats-number::after {
        width: 240px;
    }

    .enrollment-card-left .enrollment-title {
        font-size: 23px;
        line-height: 30px;
        max-width: 220px;
    }

    .enrollment-list-item .item-content p {
        max-width: 450px;
    }

    /* Страница "Мероприятие" */
    .event-hero h1 {
        font-size: 30px;
        line-height: 42px;
    }

    .event-details h2 {
        font-size: 30px;
        line-height: 36px;
    }

    .upcoming-events h2 {
        font-size: 30px;
        line-height: 36px;
    }

    /* Блок расчета совместимости */
    .calculator-wrapper {
        min-height: auto;
    }

    .calculator-main-title {
        font-size: 30px;
        line-height: 36px;
    }

    .participant-col {
        flex: 0 0 320px;
    }

    .compatibility-calc-btn {
        max-width: 340px;
    }

    .result-item {
        padding: 22px 28px;
    }

    .result-value {
        font-size: 40px;
        line-height: 56px;
    }

    .result-category {
        font-size: 19px;
        line-height: 26px;
    }

    .result-description {
        font-size: 14px;
        line-height: 19px;
    }

    /* Блок расчета финансов */
    .finance-wrapper {
        min-height: auto;
    }

    .finance-title {
        font-size: 30px;
        line-height: 36px;
    }

    .finance-col {
        flex: 0 0 320px;
    }

    .finance-calc-btn {
        max-width: 360px;
    }

    /* Модальное окно совместимости */
    #compatibilityModal .main-score-card {
        flex: 0 0 340px;
    }

    #compatibilityModal .main-score-card .score-percentage {
        font-size: 55px;
        line-height: 66px;
    }

    #compatibilityModal .hearts-progress {
        width: 240px;
    }

    #compatibilityModal .matrix-badge {
        width: 180px;
    }

    #compatibilityModal .matrix-text-men,
    #compatibilityModal .matrix-text-women {
        font-size: 7px;
    }

    #compatibilityModal .description-title {
        font-size: 20px;
        line-height: 28px;
        max-width: 220px;
    }

    #compatibilityModal .description-text {
        font-size: 13px;
        line-height: 17px;
        max-width: 280px;
    }

    #compatibilityModal .detailed-cards-wrapper {
        min-height: 600px;
    }

    #compatibilityModal .detailed-score {
        font-size: 75px;
        line-height: 75px;
    }

    #compatibilityModal .detailed-title {
        font-size: 26px;
        line-height: 34px;
        max-width: 450px;
    }

    #compatibilityModal .modal-offer-card .offer-title {
        font-size: 20px;
        line-height: 26px;
    }

    #compatibilityModal .modal-offer-card .price-new {
        font-size: 26px;
    }

    #compatibilityModal .modal-offer-card .price-old {
        font-size: 19px;
    }
}

/* Специально для планшетов 768x1024 (вертикальная ориентация) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .method-numbers .number-value {
        font-size: 32px;
    }

    .method-numbers .number-label {
        font-size: 12px;
    }

    .method-numbers .number-desc {
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .feature-cards .row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding: 0 16px;
        width: calc(100% + 32px);
        padding-bottom: 10px;
    }

    .feature-cards .row>div {
        flex: 0 0 280px;
        scroll-snap-align: start;
    }

    .about-method {
        padding: 0;
        width: 100%;
    }

    .about-method .container {
        padding: 0;
        max-width: 100%;
    }

    .about-method .row {
        margin: 0;
        --bs-gutter-x: 0;
    }

    .about-method .col-lg-6 {
        padding: 0;
        width: 100%;
    }

    .photo-label {
        display: none;
    }

    .method-photo {
        width: 100%;
        max-width: 100%;
        height: 700px;
        aspect-ratio: 607/644;
        margin: 0;
        position: relative;
        background: var(--color-light);
        border-radius: 32px;
    }

    .method-photo img {
        position: relative;
        width: 100%;
        height: 100%;
        left: 0;
        transform: none;
        top: 0;
        object-fit: cover;
    }

    .method-text-wrapper {
        position: relative;
        margin-top: -150px;
        min-height: auto;
        background: transparent;
        z-index: 5;
    }

    .method-text {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(5px);
        border-radius: 32px;
        padding: 24px 20px;
        margin-bottom: 30px;
    }

    .method-text h2 {
        font-size: 22px;
        line-height: 26px;
    }

    .method-text p {
        font-size: 16px;
        line-height: 24px;
    }

    .method-text .btn {
        width: 100%;
    }

    .method-numbers {
        padding: 40px 0;
    }

    .research-center-block {
        width: 100% !important;
        /* Принудительно на всю ширину */
        height: auto !important;
        /* Автоматическая высота */
        min-height: 175px;
        background: linear-gradient(0deg, #1D2023, #1D2023), linear-gradient(99.87deg, #615FEA -38.46%, #5522C4 97.52%), #1B0948;
        border-radius: 32px;
        position: relative;
        margin-top: 0 !important;
        /* Убираем margin-top auto */
        margin-bottom: 20px;
        align-self: flex-start;
        left: 0;
        /* Убеждаемся, что нет смещения */
        right: 0;
        padding-bottom: 20px;
    }

    .research-center-content {
        padding: 22px;
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
    }

    .research-center-text {
        font-family: 'MTS Wide', sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #FFFFFF;
        width: 100% !important;
        /* Переопределяем фиксированную ширину */
        margin: 0 0 15px 0;
        text-transform: none;
        padding-right: 40px;
    }

    .research-center-link {
        font-family: 'MTS Wide', sans-serif;
        font-weight: 500;
        font-size: 12px;
        line-height: 18px;
        text-decoration-line: underline;
        text-transform: uppercase;
        color: #F570A3;
        position: absolute;
        left: 22px;
        bottom: 0;
        transition: opacity 0.3s ease;
        z-index: 10;
    }

    .research-center-arrow {
        position: absolute;
        right: 22px;
        bottom: 22px;
        width: 36px;
        height: 36px;
        background: #FFFFFF;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
        z-index: 10;
    }

    .research-center-arrow svg {
        width: 16px;
        height: 16px;
    }

    .research-center-wrapper {
        flex-direction: column;
        padding: 0;
        min-height: auto;
    }

    .research-center-content {
        max-width: 100%;
    }

    .research-center-content h2 {
        width: 100%;
        font-size: 24px;
        line-height: 32px;
    }

    .research-center-btn {
        position: relative;
        margin-top: 20px;
        width: 100%;
        min-width: auto;
        font-size: 16px;
        padding: 8px 15px;
    }

    .reviews-wrapper {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        border-radius: 32px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .reviews-title {
        padding-left: 0;
    }

    .reviews-swiper-figma .swiper-slide {
        width: 260px;
    }

    .card-image {
        height: 320px;
    }

    .history-research-wrapper {
        display: block;
        width: 100%;
    }

    .history-block,
    .research-block {
        width: 100%;
        max-width: 100%;
        flex: none;
        margin-bottom: 20px;
    }

    .history-image {
        aspect-ratio: 16/12;
        min-height: 550px;
    }

    .image-center-content {
        top: 20px;
        padding: 0 15px;
    }

    .image-center-content .center-title {
        font-size: 24px;
        line-height: 30px;
        margin-bottom: 15px;
    }

    .image-overlay-block {
        left: 16px;
        right: 16px;
        bottom: 16px;
        width: auto;
        max-width: none;
        padding: 16px 20px;
        border-radius: 16px;
    }

    .research-block {
        aspect-ratio: auto;
        min-height: 300px;
        padding: 20px;
        border-radius: 24px;
    }

    .research-header {
        margin-bottom: 20px;
    }

    .research-text h3 {
        font-size: 24px;
        line-height: 30px;
    }

    .research-text p {
        font-size: 15px;
        line-height: 21px;
    }

    .progress-track-container {
        height: 40px;
    }

    .progress-value {
        font-size: 26px;
        line-height: 26px;
    }

    .quick-answers-title {
        font-size: 24px;
        line-height: 32px;
    }

    .quick-answers-swiper .swiper-slide {
        width: 240px;
    }

    .btn-audio {
        font-size: 16px;
        padding: 6px 20px;
    }

    .magazine h2 {
        font-size: 16px;
        margin-bottom: 20px;
        line-height: 28px;
    }

    .magazine p {
        font-size: 16px;
        line-height: 20px;
    }

    .magazine-form h3 {
        font-size: 16px;
        line-height: 24px;
    }

    .magazine-form .btn {
        font-size: 14px;
    }

    .consultation-hero {
        position: relative;
        width: auto;
        height: 540px;
        margin: 0;
        padding: 0;
        border-radius: 32px;
        background: url('../images/olga-consultation-hero-mobile.png') no-repeat center;
        background-size: cover;
        display: block;
    }

    .consultation-hero .hero-content {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        display: block;
    }

    .consultation-hero .hero-subtitle {
        display: none;
    }

    .consultation-hero h1 {
        position: absolute;
        left: 16px;
        bottom: 120px;
        font-size: 40px;
        line-height: 40px;
        color: #FFFFFF;
        margin: 0;
        max-width: 261px;
        text-transform: uppercase;
        z-index: 2;
    }

    .consultation-hero .hero-benefits {
        position: absolute;
        left: 16px;
        bottom: 70px;
        font-family: 'MTS Wide', sans-serif;
        font-size: 16px;
        line-height: 18px;
        text-transform: uppercase;
        color: #FFFFFF;
        margin: 0;
        max-width: 228px;
        z-index: 2;
        text-align: left;
    }

    .consultation-hero .btn-large {
        position: absolute;
        left: 0;
        right: 16px;
        bottom: 20px;
        width: auto;
        height: 42px;
        /*background: linear-gradient(94.25deg, #745CF4 -0.47%, #5528C7 128.92%);*/
        border-radius: 30px;
        font-size: 18px;
        line-height: 25px;
        /*color: #FFFFFF;*/
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
    }

    .includes-consultation {
        flex-direction: column;
        gap: 0;
        margin-bottom: 0;
        align-items: center;
        width: 100%;
    }

    .includes-consultation .include-left {
        width: 100%;
        max-width: 390px;
        margin: 0 auto;
    }

    .includes-consultation .include-left img {
        width: 100%;
        height: auto;
    }

    .includes-consultation .include-left .quote-wrapper {
        position: absolute;
        top: 10%;
        right: 0;
        transform: translateY(-50%);
        width: 200px;
        background: linear-gradient(114.36deg, rgba(245, 112, 163, 0.4) 6.73%, rgba(225, 115, 255, 0.4) 93.27%);
        border-radius: 13px;
        padding: 15px;
        z-index: 10;
        margin: 0;
        display: block;
    }

    .includes-consultation .include-left .quote-wrapper p {
        font-size: 10px;
        line-height: 12px;
        color: #000000;
        margin: 0;
        text-align: left;
        text-transform: none;
    }

    .includes-consultation .include-right {
        width: 100%;
        max-width: 390px;
        margin: 0 auto;
        transform: none;
        margin-top: 0;
    }

    .includes-consultation .include-right .quote-wrapper {
        display: none !important;
    }

    .includes-consultation .include-right .advantages {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        background: var(--color-light-gray);
        padding: 10px;
        border-radius: 32px;
    }

    .includes-consultation .include-right .advantages span {
        display: block;
        font-family: 'MTS Wide', sans-serif;
        font-size: 10px;
        line-height: 1.4;
        text-transform: uppercase;
        color: var(--color-dark);
        padding: 15px 20px;
        border: 2px solid var(--color-dark);
        border-radius: 32px;
        width: 100%;
        max-width: 100%;
        margin: 0;
        box-sizing: border-box;
        text-align: left;
        background: var(--color-white);
    }

    .includes-consultation .include-right .advantages span:nth-child(1) {
        align-self: center;
        width: 280px;
        margin-top: -30px;
    }

    .includes-consultation .include-right .advantages span:nth-child(2) {
        align-self: flex-end;
        width: 280px;
    }

    .includes-consultation .include-right .advantages span:nth-child(3) {
        align-self: flex-start;
        width: 280px;
    }

    .includes-consultation .include-right .advantages .btn {
        align-self: center;
        width: auto;
        min-width: 280px;
        margin: 10px auto 0;
        font-size: 16px;
        line-height: 1.4;
        padding: 12px 24px;
        background: linear-gradient(94.25deg, #745CF4 -0.47%, #5528C7 128.92%);
        color: #FFFFFF;
        border: none;
        border-radius: 30px;
        text-transform: uppercase;
        display: inline-block;
        text-align: center;
        text-transform: none;
    }

    .consultation-price {
        padding: 0 0 40px 0;
        position: relative;
        bottom: 50px;
    }

    .consultation-audience .audience-card {
        flex-direction: column !important;
        gap: 20px;
        padding: 25px;
    }

    .consultation-audience .card-number {
        font-size: 80px;
        line-height: 1;
        min-width: auto;
    }

    .consultation-audience .audience-card h3 {
        font-size: 18px;
        line-height: 25px;
    }

    .consultation-terms h2 {
        font-size: 22px;
    }

    .consultation-terms h2::after {
        display: none;
    }

    .consultation-terms .btn-agree {
        width: 100%;
        max-width: 100%;
        font-size: 16px;
        line-height: 16px;
    }

    .event-hero .hero-right {
        display: none;
    }

    .event-hero .event-meta {
        display: none;
    }

    .event-hero .hero-left {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        min-height: 450px;
        border-radius: 32px;
        position: relative;
        overflow: hidden;
        background-image: url('../images/event-hero-bg.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .event-hero .hero-left::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        z-index: 1;
    }

    .event-hero .hero-left-content {
        position: relative;
        z-index: 2;
        padding: 30px 20px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 100%;
        color: #FFFFFF;
    }

    .event-hero h1 {
        font-size: 22px;
        line-height: 34px;
        margin-bottom: 15px;
        color: #FFFFFF;
    }

    .event-hero .event-badge {
        border-color: #FFFFFF;
        color: #FFFFFF;
        margin-bottom: 15px;
    }

    .event-hero .btn-primary {
        width: 100%;
        margin-top: 10px;
        text-transform: none;
    }

    .upcoming-events h2 {
        font-size: 16px;
    }

    .calculator-row {
        gap: 20px;
        padding: 10px;
    }

    .date-inputs {
        min-width: 280px;
    }

    .btn-calculate {
        font-size: 20px;
        min-width: 160px;
        height: 50px;
        padding: 12px 24px;
        order: 3;
    }

    .calculator-row .date-inputs:first-child {
        order: 1;
    }

    .calculator-row .date-inputs:last-child {
        order: 2;
    }

    .btn-calculate {
        order: 3;
    }

    .books-hero {
        margin: 20px 12px;
        border-radius: 24px;
        padding: 20px 0;
        min-height: 400px;
        display: flex;
        align-items: flex-end;
    }

    .books-hero .container {
        flex-direction: column;
        padding: 0 20px;
        gap: 30px;
        width: 100%;
        height: 100%;
    }

    .books-hero-content {
        order: 2;
        width: 100%;
        margin-top: auto;
        padding-bottom: 20px;
    }

    .books-hero-images {
        order: 1;
        width: 100%;
        max-width: 100%;
        height: 400px;
        margin-top: 50px;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }

    .books-hero-images img {
        max-width: 180px;
        max-height: 280px;
        bottom: auto;
        transition: all 0.3s ease;
    }

    .books-hero-images img:hover {
        transform: scale(1.1) translateY(-15px) !important;
        z-index: 10 !important;
        filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.5));
        transition: all 0.3s ease;
    }

    .books-hero-images img:nth-child(1) {
        right: 180px;
        bottom: 0;
        z-index: 4;
    }

    .books-hero-images img:nth-child(2) {
        right: 100px;
        bottom: 0;
        z-index: 3;
    }

    .books-hero-images img:nth-child(3) {
        right: 50px;
        bottom: 0;
        z-index: 2;
    }
    
    .books-hero-images img:nth-child(4) {
        right: 10px;
        bottom: 0;
        z-index: 1;
    }

    .books-hero-content h1 {
        font-size: 24px;
        line-height: 30px;
        margin-bottom: 15px;
    }

    .hero-badge {
        margin-bottom: 10px;
    }

    .blog-header .d-flex {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .blog-header h1 {
        margin-bottom: 15px;
        font-size: 28px;
    }

    .blog-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        width: 100%;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .filter-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 14px;
        padding: 8px 16px;
    }

    .matrix-calculation {
        background-color: var(--color-light-gray);
        border-radius: 32px;
        padding: 0;
        margin-top: 40px;
    }

    .matrix-calculation-wrapper {
        background-color: var(--color-light-gray);
        border-color: transparent;
        display: flex;
        flex-direction: column;
        height: auto;
        width: 100%;
        padding-bottom: 20px;
        border-radius: 0;
    }

    .matrix-calculation .matrix-content {
        order: 2;
        display: flex;
        flex-direction: column;
        height: auto;
        position: relative;
    }

    .matrix-calculation .matrix-right {
        order: 1;
        margin-bottom: -150px;
        width: 100%;
        position: relative;
        left: auto;
        top: auto;
    }

    .matrix-calculation .matrix-form-wrapper {
        background-color: var(--color-white);
        width: 100%;
        height: 100%;
        border-radius: 22px;
        padding: 20px;
    }

    .matrix-form-wrapper .form-label {
        font-size: 12px;
    }

    .matrix-calculation .matrix-left {
        order: 2;
        margin-bottom: 0;
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: 490px;
        min-height: 350px;
        max-height: 500px;
    }

    .matrix-diagram {
        height: 75%;
        width: 100%;
    }

    .matrix-calculation .matrix-title {
        order: 1;
        margin-bottom: 30px;
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        font-size: 20px;
        padding-top: 20px;
    }

    .matrix-calculation .calculate-btn {
        width: 100%;
        font-size: 18px;
    }

    .date-input-group {
        flex-direction: column;
    }

    .date-label {
        order: 2;
        /* Меняем порядок: label после поля на мобильных */
        margin-top: 5px;
        font-size: 14px;
    }

    .date-field {
        order: 1;
        /* Поле перед label */
    }

    .date-inputs .matrix {
        font-size: 8px;
    }

    .date-input-field {
        width: 100%;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 15px;
        line-height: 1;
    }

    .matrix-description {
        display: none;
    }

    .matrix-calculation-wrapper input {
        font-size: 18px;
        line-height: 1;
        /* Добавьте это */
        display: flex;
        align-items: center;
        justify-content: center;
        height: 42px;
        width: 100%;
        text-align: center;
    }

    .matrix-left {
        height: auto;
        min-height: 350px;
        max-height: 450px;
        overflow-y: auto;
    }

    .matrix-table {
        width: 100%;
        height: 100%;
        min-height: 300px;
    }

    .matrix-table td {
        padding: 4px;
        /* Уменьшаем отступы в ячейках */
        font-size: 14px;
        /* Уменьшаем размер шрифта */
    }

    .matrix-table td.__empty {
        background: var(--color-light-gray);
    }

    .td_title {
        font-size: 7px;
        top: 2px;
        left: 2px;
    }

    .td_number {
        font-size: 16px;
        /* Уменьшаем числа */
    }

    .matrix-logo {
        width: 120px;
        bottom: 40px;
    }

    .matrix-logo img {
        width: 100%;
        height: auto;
    }

    .research-enrollment {
        position: relative;
        width: 100%;
        height: auto;
        margin-bottom: 0;
        display: flex;
        justify-content: center;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .enrollment-grid {
        position: relative;
        width: 100%;
        max-width: 358px;
        height: 511px;
        margin: 0 auto 40px;
        display: block;
        padding: 0;
    }

    .enrollment-card-left {
        position: absolute;
        width: 100%;
        height: 511px;
        left: 0;
        top: 0;
        background: #1D2023;
        border-radius: 32px;
        padding: 0;
        z-index: 1;
    }

    .enrollment-card-left .enrollment-title {
        position: absolute;
        width: 217px;
        height: 56px;
        left: 36px;
        top: 20px;
        font-family: 'MTS Wide', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 22px;
        line-height: 28px;
        text-transform: uppercase;
        color: #FFFFFF;
        margin: 0;
        max-width: none;
    }

    .enrollment-card-left .enrollment-btn {
        display: flex;
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 326px;
        height: 42px;
        background: #FFFFFF;
        border-radius: 30px;
        font-family: 'MTS Wide', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 18px;
        line-height: 25px;
        color: #1D2023;
        text-decoration: none;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        white-space: nowrap;
        z-index: 20;
    }

    .enrollment-card-right {
        position: absolute;
        width: 100%;
        height: 511px;
        left: 0;
        top: 0;
        padding: 0;
        background: transparent;
        z-index: 2;
    }

    .enrollment-list {
        position: absolute;
        width: 100%;
        left: 0;
        top: 20px;
        margin: 0;
        padding: 0;
    }

    .enrollment-list-item {
        position: absolute;
        width: 100%;
        left: 0;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 8px;
        margin: 0;
        padding: 0;
    }

    .enrollment-list-item:nth-child(1) {
        top: 114px;
    }

    .enrollment-list-item:nth-child(2) {
        top: 166px;
    }

    .enrollment-list-item:nth-child(3) {
        top: 236px;
    }

    .enrollment-list-item .item-number {
        position: relative;
        width: auto;
        min-width: 19px;
        left: 36px;
        font-family: 'MTS Wide', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        line-height: 17px;
        text-transform: uppercase;
        color: #FFFFFF;
        margin: 0;
    }

    .enrollment-list-item .item-arrow-svg {
        position: absolute;
        width: 7.47px;
        height: 19.5px;
        left: 71px;
        opacity: 1;
        transform: rotate(0deg);
    }

    .enrollment-list-item .item-content {
        position: absolute;
        left: 95px;
        width: 240px;
        padding: 0;
        flex: none;
    }

    .enrollment-list-item .item-content p {
        font-family: 'MTS Compact', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        color: #FFFFFF;
        margin: 0;
        max-width: none;
    }

    .enrollment-progress-wrapper {
        position: absolute;
        width: 318px;
        left: 36px;
        top: 331px;
        margin: 0;
    }

    .progress-bar-container {
        position: relative;
        width: 318px;
        height: 15px;
        margin-bottom: 10px;
    }

    .progress-bar-bg {
        width: 318px;
        height: 15px;
        background: #E7E7ED;
        border-radius: 40px;
    }

    .progress-bar-fill {
        width: 202px;
        height: 15px;
        background: linear-gradient(90deg, #CEC4FF 0%, #5522C4 100.26%);
        border-radius: 40px;
    }

    .progress-stats-row {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        margin-top: 5px;
        gap: 15px;
    }

    .progress-numbers {
        font-family: 'MTS Wide', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        line-height: 15px;
        text-transform: uppercase;
        color: #FFFFFF;
    }

    .stats-percent-block {
        display: none;
    }

    .enrollment-progress-wrapper .stats-label {
        display: none;
    }

    .enrollment-action {
        position: absolute;
        right: 0;
        bottom: 120px;
        max-width: 80px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 5px;
        z-index: 10;
    }

    .enrollment-circle {
        width: 68px;
        height: 67px;
        background: #6034D1;
        box-shadow: 0px 0px 10px #6549F9;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    .enrollment-circle .plus-icon {
        position: relative;
        width: 24px;
        height: 24px;
    }

    .enrollment-circle .plus-icon::before,
    .enrollment-circle .plus-icon::after {
        content: '';
        position: absolute;
        background: #FFFFFF;
    }

    .enrollment-circle .plus-icon::before {
        width: 2px;
        height: 24px;
        left: 11px;
        top: 0;
    }

    .enrollment-circle .plus-icon::after {
        width: 24px;
        height: 2px;
        left: 0;
        top: 11px;
    }

    .enrollment-action-text {
        font-family: 'MTS Wide', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 10px;
        line-height: 15px;
        text-decoration-line: underline;
        text-transform: uppercase;
        color: #FFFFFF;
        white-space: nowrap;
        padding-right: 10px;
    }

    .enrollment-card-right .enrollment-participate-btn,
    .enrollment-stats {
        display: none;
    }
}

@media (max-width: 576px) {
    .hero-stat-item {
        flex: 1 1 100%;
        text-align: center;
        align-items: center;
    }

    .hero-stat-label {
        max-width: 100%;
    }

    .mobile-stats {
        display: block;
        position: relative;
        width: 100%;
        padding: 20px 0 40px;
        margin: 0;
        min-height: auto;
        max-height: 380px;
        background: #DAE2E5;
        z-index: 10;
    }

    .mobile-stat-card:nth-of-type(1) {
        position: relative;
        width: 100%;
        left: 0;
        top: 0;
        margin-top: 0;
        margin-bottom: 20px;
        padding: 16px;
        display: flex;
        flex-direction: row;
        /* Меняем на row для горизонтального расположения */
        align-items: center;
        justify-content: space-between;
        /* Распределяем пространство между элементами */
        min-height: 80px;
        border: 1px solid var(--color-white);
        border-radius: 50px;
    }

    .mobile-stat-card:nth-of-type(1) .mobile-stat-number {
        font-size: 32px;
        line-height: 1.2;
        margin-bottom: 0;
        /* Убираем нижний отступ */
        position: relative;
        display: inline-block;
        flex-shrink: 0;
        width: calc(50% - 8px);
        /* Запрещаем сжиматься */
    }

    .mobile-stat-card:nth-of-type(1) .mobile-stat-number::after {
        display: none;
        /* Убираем линию под числом */
    }

    .mobile-stat-card:nth-of-type(1) .mobile-stat-label {
        font-family: 'MTS Wide', sans-serif;
        font-size: 14px;
        line-height: 1.3;
        margin-top: 0;
        /* Убираем верхний отступ */
        /* Выравниваем текст по правому краю */
        flex: 1;
        /* Занимаем оставшееся пространство */
        padding-left: 10px;
        /* Добавляем отступ слева для разделения */
        word-break: break-word;
        /* Разрешаем перенос слов */
        text-transform: uppercase;
    }

    .mobile-stat-card:nth-of-type(2),
    .mobile-stat-card:nth-of-type(3),
    .mobile-stat-card:nth-of-type(4),
    .mobile-stat-card:nth-of-type(5) {
        width: 165px;
        height: 95px;
    }

    .mobile-stat-number {
        font-family: 'MTS Wide', sans-serif;
        font-size: 22px;
        line-height: 36px;
    }

    .mobile-stat-label {
        font-family: 'MTS Wide', sans-serif;
        font-size: 10px;
        line-height: 12px;
    }

    .reviews-title {
        font-size: 24px;
        line-height: 30px;
        margin-bottom: 30px;
    }

    .reviews-swiper-figma .swiper-slide {
        width: 240px;
    }

    .card-image {
        height: 300px;
    }

    .image-center-content .center-title {
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 12px;
    }

    .image-center-content .center-btn {
        min-width: 140px;
        font-size: 14px;
        padding: 6px 15px;
    }

    .history-image {
        aspect-ratio: 16/14;
    }

    .image-overlay-block {
        padding: 14px 16px;
    }

    .overlay-title {
        font-size: 15px;
        line-height: 22px;
    }

    .overlay-subtitle {
        font-size: 13px;
        line-height: 18px;
    }

    .research-block {
        padding: 16px;
        min-height: 280px;
    }

    .research-text h3 {
        font-size: 22px;
        line-height: 28px;
    }

    .research-text p {
        font-size: 14px;
        line-height: 20px;
    }

    .progress-track-container {
        height: 36px;
    }

    .progress-value {
        font-size: 22px;
        line-height: 22px;
    }

    .progress-label-static {
        font-size: 12px;
        line-height: 16px;
    }

    .quick-answers-title {
        font-size: 20px;
        line-height: 28px;
    }

    .quick-answers-swiper .swiper-slide {
        width: 220px;
    }

    .magazine .paragraph-bg .bg-svg-decoration {
        display: none;
    }

    .magazine-form .form-row {
        flex-direction: column;
        gap: 15px;
    }

    .magazine-form .form-row .form-control {
        width: 100%;
    }

    .footer-top {
        margin-bottom: 30px;
    }

    .social-icon {
        width: 36px;
        height: 36px;
    }

    .footer-logo img {
        max-width: 150px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .footer-left,
    .footer-right {
        width: 100%;
        text-align: center;
    }

    .calculator-title {
        font-size: 20px;
        line-height: 30px;
        margin-top: 25px;
    }

    .date-inputs {
        min-width: 100%;
        max-width: 100%;
    }

    .date-field .form-control {
        height: 55px;
        font-size: 16px;
        padding: 14px 45px 14px 16px;
    }

    .btn-calculate {
        width: 100%;
        max-width: 300px;
        font-size: 18px;
        height: 48px;
        padding: 10px 20px;
    }

    .matrix {
        font-size: 12px;
        padding: 10px 15px;
    }
}

/* ========== МОДАЛЬНОЕ ОКНО ========== */
#compatibilityModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 20px;
    overflow-y: auto;
}

#compatibilityModal.active {
    opacity: 1;
    visibility: visible;
}

#compatibilityModal .modal-content {
    position: relative;
    max-width: 740px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    background: #E6E8ED;
    border-radius: 32px;
    padding: 0 0 30px 0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transform: translateY(20px);
    transition: transform 0.3s ease;
    scrollbar-width: thin;
    scrollbar-color: #6034D1 #E0E0E0;
}

#compatibilityModal .modal-content::-webkit-scrollbar {
    width: 6px;
}

#compatibilityModal .modal-content::-webkit-scrollbar-track {
    background: #E0E0E0;
    border-radius: 10px;
}

#compatibilityModal .modal-content::-webkit-scrollbar-thumb {
    background: #6034D1;
    border-radius: 10px;
}

#compatibilityModal.active .modal-content {
    transform: translateY(0);
}

#compatibilityModal .modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: #6034D1;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

#compatibilityModal .modal-close:hover {
    background: #4a28a8;
    transform: scale(1.1);
}

#compatibilityModal .modal-close svg {
    width: 20px;
    height: 20px;
}

#compatibilityModal .modal-close svg path {
    stroke: #FFFFFF;
}

/* Заголовок */
#compatibilityModal .modal-header {
    padding: 22px 0 0 22px;
    margin-bottom: 0;
    text-align: left;
}

#compatibilityModal .modal-title {
    font-family: 'MTS Wide', sans-serif;
    font-size: 22px;
    line-height: 31px;
    font-weight: 500;
    text-transform: uppercase;
    color: #171717;
    margin: 0;
}

/* Контейнер для верхнего блока с двумя колонками */
#compatibilityModal .hero-container {
    display: flex;
    background: #1D2023;
    border-radius: 22px;
    padding: 10px 20px 22px;
    margin: 20px;
    color: #FFFFFF;
    gap: 20px;
    align-items: stretch;
}

/* Левая колонка - main-score-card */
#compatibilityModal .main-score-card {
    flex: 0 0 364px;
    position: relative;
    min-height: 362px;
    display: flex;
    flex-direction: column;
}

#compatibilityModal .main-score-card .score-percentage {
    font-family: 'MTS Wide', sans-serif;
    font-size: 60px;
    line-height: 72px;
    font-weight: 500;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 0 0 8px 0;
}

#compatibilityModal .main-score-card .score-label {
    font-family: 'MTS Wide', sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 0 0 20px 0;
    width: 176px;
}

/* Прогресс с сердечками */
#compatibilityModal .hearts-progress {
    position: relative;
    width: 255px;
    height: 12px;
    background: var(--color-white);
    border-radius: 32px;
}

#compatibilityModal .heart-icon {
    flex: 1;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    clip-path: path("M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z");
    transform: scale(0.9);
}

#compatibilityModal .progress-fill-hearts {
    position: absolute;
    top: 0;
    left: 0;
    height: 12px;
    background: linear-gradient(94.25deg, #745CF4 -0.47%, #5528C7 128.92%);
    z-index: 2;
    display: flex;
    gap: 2px;
    overflow: hidden;
    border-radius: 32px;
}

#compatibilityModal .progress-fill-hearts::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    gap: 2px;
    background: inherit;
}

/* Матрицы */
#compatibilityModal .matrices-section {
    margin-top: 20px;
}

#compatibilityModal .matrix-row {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 0;
    position: relative;
}

#compatibilityModal .matrix-badge {
    width: 191.64px;
    height: 31.29px;
    background: #FFFFFF;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#compatibilityModal .matrix-text-men,
#compatibilityModal .matrix-text-women {
    font-family: 'MTS Wide', sans-serif;
    font-size: 9px;
    line-height: 23px;
    font-weight: 500;
    text-transform: uppercase;
    color: #1D2023;
}
/*
#compatibilityModal .gender-icons {
    display: flex;
    align-items: center;
    gap: 8px;
}

#compatibilityModal .gender-circle {
    background: #FFFFFF;
    width: 31.29px;
    height: 31.29px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}*/

#compatibilityModal .gender-stack {
    width: 31.29px;
    height: 31.29px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../images/icons/copy.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 18px 18px;
}

#compatibilityModal .avatar-archetype-men::after {
    display: none;
    /* или content: none; */
    content: none;
}

#compatibilityModal .avatar-archetype-women::after {
    display: none;
    /* или content: none; */
    content: none;
}

/* Первая строка (мужская) */
#compatibilityModal .matrix-row:nth-child(1) .matrix-badge {
    border: 3px solid #612AE8;
}

#compatibilityModal .matrix-row:nth-child(1) .gender-stack {
    background-color: #612AE8;
}

/* Вторая строка (женская) */
#compatibilityModal .matrix-row:nth-child(3) .matrix-badge {
    border: 3px solid #E86998;
}

#compatibilityModal .matrix-row:nth-child(3) .gender-stack {
    background-color: #E86998;
}

/* Правая колонка - description-card */
#compatibilityModal .description-card {
    flex: 1;
    background: transparent;
    padding: 19px 0 0 0;
}

#compatibilityModal .description-title {
    font-family: 'MTS Wide', sans-serif;
    font-size: 22px;
    line-height: 30px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color-white);
    margin: 0 0 8px 0;
    max-width: 229px;
}

#compatibilityModal .description-text {
    font-family: 'MTS Compact', sans-serif;
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    color: var(--color-white);
    ;
    margin: 0;
    max-width: 308px;
}

/* Сетка метрик */
#compatibilityModal .metrics-grid {
    padding: 0 22px;
    margin: 16px 0;
}

#compatibilityModal .metrics-row {
    display: flex;
    gap: 16px;
    width: 100%;
    margin-bottom: 12px;
}

#compatibilityModal .metrics-row:last-child {
    margin-bottom: 0;
}

#compatibilityModal .metric-card {
    flex: 1;
    background: #FFFFFF;
    border-radius: 16px;
    padding: 12px;
    position: relative;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.3s ease;
}

#compatibilityModal .metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

#compatibilityModal .metric-card.highlighted {
    /*background: linear-gradient(94.25deg, #745CF4 -0.47%, #5528C7 128.92%);*/
    background: linear-gradient(117.6deg, #EA3C3A -36.29%, #FDA6C6 48.51%, #E86998 115.92%, #9A76D7 171.17%);
    color: #FFFFFF;
}

#compatibilityModal .metric-value {
    font-family: 'MTS Wide', sans-serif;
    font-size: 35px;
    line-height: 35px;
    font-weight: 500;
    text-transform: uppercase;
    color: inherit;
    margin-bottom: auto;
}

#compatibilityModal .metric-label {
    font-family: 'MTS Wide', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    text-transform: uppercase;
    color: inherit;
    margin-top: auto;
    max-width: 80%;
}

#compatibilityModal .metric-expand {
    position: absolute;
    top: 12px;
    right: 9.33px;
    width: 22px;
    height: 22px;
    background: #000000;
    border: none;
    border-radius: 11.52px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 5;
}

#compatibilityModal .metric-expand:hover {
    transform: scale(1.1);
}

#compatibilityModal .metric-expand svg {
    width: 9px;
    height: 8px;
}

#compatibilityModal .metric-expand svg line {
    stroke: #FFFFFF;
}

#compatibilityModal .sexual-card .metric-expand .vertical-line {
    display: block;
}

/* Обертка для детальных карточек с навигацией */
#compatibilityModal .detailed-cards-wrapper {
    position: relative;
    margin: 0 22px 30px 22px;
    min-height: 650px;
    background: #1D2023;
    border-radius: 22px;
    padding: 0;
}

/* Контейнер для карточек */
#compatibilityModal .detailed-cards-container {
    position: relative;
    width: 100%;
    min-height: 600px;
}

#compatibilityModal .detailed-card {
    background: #1D2023;
    border-radius: 22px;
    padding: 32px 0;
    color: #FFFFFF;
    text-align: center;
    display: none;
    position: relative;
    width: 100%;
    height: 100%;
}

#compatibilityModal .detailed-card.active {
    display: block;
}

#compatibilityModal .detailed-score {
    font-family: 'MTS Wide', sans-serif;
    font-size: 80px;
    line-height: 80px;
    font-weight: 500;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-bottom: 8px;
}

/* Маленькие сердечки для прогресса */
#compatibilityModal .hearts-progress-small {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 24px;
    height: 20px;
}

#compatibilityModal .heart-small {
    width: 25px;
    height: 22px;
    background-color: var(--color-white);
    clip-path: path("M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z");
}

#compatibilityModal .heart-small.filled {
    /*background: linear-gradient(94.25deg, #745CF4 -0.47%, #5528C7 128.92%);*/
    background: linear-gradient(117.6deg, #EA3C3A -36.29%, #FDA6C6 48.51%, #E86998 115.92%, #9A76D7 171.17%);
}

#compatibilityModal .detailed-title {
    font-family: 'MTS Wide', sans-serif;
    font-size: 28px;
    line-height: 38px;
    font-weight: 500;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-bottom: 24px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 22px;
}

#compatibilityModal .detailed-description {
    max-width: 498px;
    margin: 0 auto;
    padding: 0 22px;
    text-align: left;
}

#compatibilityModal .detailed-description p {
    font-family: 'MTS Wide', sans-serif;
    font-size: 18px;
    line-height: 23px;
    font-weight: 500;
    color: #FFFFFF;
    margin-bottom: 22px;
}

#compatibilityModal .detailed-description p:last-child {
    font-family: 'MTS Compact', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    margin-bottom: 0;
}

#compatibilityModal .btn-full-version {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 24px;
    background: linear-gradient(94.25deg, #745CF4 -0.47%, #5528C7 128.92%);
    color: #FFFFFF;
    border-radius: 30px;
    font-family: 'MTS Wide', sans-serif;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
}

#compatibilityModal .btn-full-version:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(96, 52, 209, 0.3);
}

/* Навигационные стрелки - исправленное позиционирование */
#compatibilityModal .nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 53px;
    height: 53px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4.55px);
    border: none;
    border-radius: 45.45px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 30;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#compatibilityModal .nav-arrow:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.05);
}

#compatibilityModal .nav-arrow-left {
    left: -20px;
    /* Уменьшил с -26px до -20px */
}

#compatibilityModal .nav-arrow-right {
    right: -20px;
    /* Уменьшил с -26px до -20px */
}

#compatibilityModal .nav-arrow svg {
    width: 11px;
    height: 21px;
}

#compatibilityModal .nav-arrow svg path {
    stroke: #FFFFFF;
    stroke-width: 1.82px;
}

/* Пагинация - исправленное позиционирование */
#compatibilityModal .pagination-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding: 0;
    flex-wrap: wrap;
    position: relative;
    bottom: 0;
    width: 100%;
}

#compatibilityModal .pagination-dots .dot {
    width: 8px;
    height: 8px;
    background: #D9D9D9;
    border-radius: 50%;
    transition: all 0.3s ease;
    cursor: pointer;
    opacity: 0.5;
}

#compatibilityModal .pagination-dots .dot:hover {
    opacity: 1;
    transform: scale(1.2);
}

#compatibilityModal .pagination-dots .dot.active {
    background: #6849FF;
    opacity: 1;
    transform: scale(1.2);
}

/* По умолчанию на десктопе скрываем мобильное описание */
#compatibilityModal .metric-mobile-description {
    display: none;
}

#compatibilityModal .metric-mobile-hearts {
    display: none;
}

@media (max-width: 768px) {
    #compatibilityModal .detailed-cards-wrapper {
        display: none;
    }
    
    /* По умолчанию ВСЕ сердечки скрыты */
#compatibilityModal .heart-small {
    display: none;
}

/* Показываем только заполненные сердечки */
#compatibilityModal .heart-small.filled {
    display: block; /* или inline-block, или flex — зависит от вашей вёрстки */
    background: #EA3C3A;
}
    
    #compatibilityModal .metric-mobile-description {
        display: none;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        font-family: 'MTS Compact', sans-serif;
        font-size: 13px;
        line-height: 18px;
        color: #1D2023;
    }

    /* Показываем описание у развёрнутой карточки */
    #compatibilityModal .metric-card.highlighted .metric-mobile-description {
        display: block;
        animation: faqSlideDown 0.3s ease;
    }

    /* ✅ СЕРДЕЧКИ — показываем только у развёрнутой карточки */
    #compatibilityModal .metric-mobile-hearts {
        display: none;
        margin-top: 8px;
        margin-bottom: 8px;
    }

    /* БЫЛО: .metric-card.expanded — ИСПРАВЛЕНО на .highlighted */
    #compatibilityModal .metric-card.highlighted .metric-mobile-hearts {
        display: flex;
        animation: faqSlideDown 0.3s ease;
    }

    /* Иконка «плюс/минус» */
    #compatibilityModal .metric-card .metric-expand {
        transition: transform 0.3s ease;
    }

    /* БЫЛО: .metric-card.expanded — ИСПРАВЛЕНО на .highlighted */
    #compatibilityModal .metric-card.highlighted .metric-expand {
        transform: rotate(45deg);
    }

    @keyframes faqSlideDown {
        from {
            opacity: 0;
            max-height: 0;
            transform: translateY(-8px);
        }
        to {
            opacity: 1;
            max-height: 500px;
            transform: translateY(0);
        }
    }
}

/* Медиа-запросы */
@media (max-width: 768px) {
    #compatibilityModal .matrix-text-men,
    #compatibilityModal .matrix-text-women {
        font-size: 7px;
    }
    
    #compatibilityModal .modal-content {
        max-width: 100%;
        padding: 0 0 20px 0;
    }

    #compatibilityModal .modal-title {
        font-size: 18px;
        line-height: 25px;
        padding-left: 16px;
    }

    #compatibilityModal .hero-container {
        flex-direction: column;
        padding: 12px 16px;
    }

    #compatibilityModal .main-score-card {
        flex: auto;
        width: 100%;
        min-height: auto;
        /*padding: 16px;*/
    }

    #compatibilityModal .hearts-progress {
        width: 100%;
    }

    #compatibilityModal .main-score-card .score-label {
        width: 100%;
    }

    #compatibilityModal .description-card {
        width: 100%;
        padding: 0;
    }

    #compatibilityModal .description-title {
        font-size: 20px;
        line-height: 26px;
        max-width: 100%;
    }

    #compatibilityModal .description-text {
        max-width: 100%;
    }

    #compatibilityModal .metrics-row {
        flex-direction: column;
        gap: 12px;
    }

    #compatibilityModal .metric-card {
        width: 100%;
    }

    #compatibilityModal .detailed-title {
        font-size: 18px;
        line-height: 22px;
    }

    .#compatibilityModal .detailed-description p {
        font-size: 16px;
        line-height: 18px;
    }

    #compatibilityModal .nav-arrow {
        width: 40px;
        height: 40px;
    }

    #compatibilityModal .nav-arrow-left {
        left: 10px;
    }

    #compatibilityModal .nav-arrow-right {
        right: 10px;
    }
}

/* ========== БАННЕР В МОДАЛЬНОМ ОКНЕ ========== */
#compatibilityModal .modal-offer-banner {
    margin: 20px 22px 30px;
    padding: 0;
    width: auto;
}

#compatibilityModal .modal-offer-card {
    background: linear-gradient(117.6deg, #EA3C3A -36.29%, #FDA6C6 48.51%, #E86998 115.92%, #9A76D7 171.17%);
    border-radius: 32px;
    padding: 25px 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    min-height: 180px;
    overflow: hidden;
    margin: 0;
}

#compatibilityModal .modal-offer-card .offer-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    z-index: 4;
    position: relative;
}

#compatibilityModal .modal-offer-card .offer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 2;
    padding-right: 50px;
    margin-bottom: 10px;
}

#compatibilityModal .modal-offer-card .offer-title {
    color: var(--color-white);
    font-size: 22px;
    line-height: 28px;
    text-transform: uppercase;
    margin: 0;
    max-width: 70%;
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
}

#compatibilityModal .modal-offer-card .age-restriction {
    font-family: 'MTS Wide', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-white);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    margin: 0;
}

#compatibilityModal .modal-offer-card .offer-price {
    color: var(--color-white);
    font-family: 'MTS Compact', sans-serif;
    font-size: 16px;
    margin-bottom: 10px;
}

#compatibilityModal .modal-offer-card .price-new {
    font-family: 'MTS Wide', sans-serif;
    font-size: 28px;
    font-weight: 500;
    margin-right: 15px;
    color: var(--color-white);
}

#compatibilityModal .modal-offer-card .price-old {
    font-family: 'MTS Wide', sans-serif;
    font-size: 20px;
    text-decoration: line-through;
    opacity: 0.7;
    color: var(--color-white);
}

#compatibilityModal .modal-offer-card .offer-badge {
    position: absolute;
    top: 120px;
    left: 220px;
    background: var(--color-dark);
    border-radius: 26px;
    color: var(--color-white);
    font-family: 'MTS Wide', sans-serif;
    font-size: 14px;
    width: 60px;
    text-align: center;
    padding: 4px 0;
}

#compatibilityModal .modal-offer-card .offer-decoration {
    position: absolute;
    right: 30px;
    bottom: -10px;
    width: 300px;
    height: 250px;
    background: url('../images/offer-banner.png') no-repeat right bottom;
    background-size: contain;
    z-index: 3;
    pointer-events: none;
}

#compatibilityModal .modal-offer-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 50px;
    width: 250px;
    height: 200px;
    background-image: url('data:image/svg+xml,%3Csvg width="359" height="274" viewBox="0 0 359 274" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="179.246" cy="179.246" r="179.209" transform="rotate(-168.149 179.246 179.246)" fill="url(%23paint0_radial_2655_616)"/%3E%3Cdefs%3E%3CradialGradient id="paint0_radial_2655_616" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(199.554 400.759) rotate(-110.684) scale(399.113 430.831)"%3E%3Cstop offset="0.403846" stop-color="%23DC2A8F"/%3E%3Cstop offset="1" stop-color="%23E84048"/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
    pointer-events: none;
    z-index: 1;
}

#compatibilityModal .modal-offer-card .modal-offer-btn {
    background: var(--color-white);
    color: var(--color-dark);
    text-transform: none;
    border: none;
    border-radius: 30px;
    padding: 10px 30px;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 4;
    width: auto;
    min-width: 180px;
    align-self: flex-start;
    margin-top: 5px;
    font-family: 'MTS Wide', sans-serif;
}

#compatibilityModal .modal-offer-card .modal-offer-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Медиа-запросы для мобильных устройств */
@media (max-width: 768px) {
    #compatibilityModal .modal-offer-banner {
        margin: 15px 16px 20px;
    }

    #compatibilityModal .modal-offer-card {
        padding: 20px;
        min-height: 220px;
    }

    #compatibilityModal .modal-offer-card .offer-header {
        padding-right: 40px;
    }

    #compatibilityModal .modal-offer-card .offer-title {
        font-size: 18px;
        line-height: 24px;
        max-width: 65%;
    }

    #compatibilityModal .modal-offer-card .age-restriction {
        font-size: 20px;
        width: 40px;
        height: 40px;
    }

    #compatibilityModal .modal-offer-card .price-new {
        font-size: 24px;
    }

    #compatibilityModal .modal-offer-card .price-old {
        font-size: 18px;
    }

    #compatibilityModal .modal-offer-card .offer-badge {
        left: 200px;
        font-size: 12px;
        width: 50px;
    }

    #compatibilityModal .modal-offer-card .offer-decoration {
        width: 200px;
        height: 180px;
        right: 10px;
        bottom: 0;
    }

    #compatibilityModal .modal-offer-card::after {
        width: 180px;
        height: 150px;
        right: 20px;
    }

    #compatibilityModal .modal-offer-card .modal-offer-btn {
        width: 100%;
        max-width: 100%;
        font-size: 16px;
        padding: 10px 20px;
        text-align: center;
    }
}

@media (max-width: 576px) {
    #compatibilityModal .modal-offer-card .offer-title {
        font-size: 16px;
        line-height: 22px;
        max-width: 60%;
    }

    #compatibilityModal .modal-offer-card .offer-badge {
        left: 210px;
        top: 40px;
    }
}

/* ========== БЛОК MODAL-COMPATIBILITY-HERO ========== */
#compatibilityModal .modal-compatibility-hero {
    background: url(../images/compatibility-hero.png) no-repeat center center;
    background-size: cover;
    /* или contain, в зависимости от нужного эффекта */
    border-radius: 22px;
    padding: 100px 20px 20px;
    margin: 10px 20px 0;
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Верхние поля ввода */
#compatibilityModal .hero-input-fields {
    display: flex;
    justify-content: space-between;
    /* Это гарантирует, что элементы будут по краям */
    align-items: flex-start;
    position: relative;
    width: 100%;
}

/* Обертки для левой и правой колонок */
#compatibilityModal .hero-input-wrapper {
    flex: 1;
    /* Каждая обертка занимает равное пространство */
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: calc(50% - 30px);
    /* Ограничиваем ширину с учетом зазора для крестика */
}

/* Левая обертка прижата к левому краю */
#compatibilityModal .hero-input-wrapper.left-wrapper {
    margin-left: 0;
    margin-right: auto;
    /* Сдвигает блок влево */
}

/* Правая обертка прижата к правому краю */
#compatibilityModal .hero-input-wrapper.right-wrapper {
    margin-right: 0;
    margin-left: auto;
    /* Сдвигает блок вправо */
}

/* Круглый элемент с крестиком между полями - исправляем позиционирование */
#compatibilityModal .hero-input-fields::before {
    content: '';
    position: absolute;
    width: 38px;
    height: 38px;
    left: 50%;
    top: 30%;
    /* Поднял выше, чтобы не перекрывать контент */
    transform: translate(-50%, -50%);
    background: #FFFFFF;
    border-radius: 50%;
    z-index: 20;
    /* Увеличил z-index */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Вертикальная линия крестика */
#compatibilityModal .hero-input-fields::after {
    content: '';
    position: absolute;
    width: 12.67px;
    height: 0px;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%) rotate(90deg);
    border: 1px solid #1D2023;
    z-index: 21;
}

/* Горизонтальная линия крестика */
#compatibilityModal .hero-input-fields .cross-line {
    position: absolute;
    width: 12.67px;
    height: 0px;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%) rotate(0deg);
    border: 1px solid #1D2023;
    z-index: 21;
    pointer-events: none;
}

/* Блоки с данными */
#compatibilityModal .hero-input-left,
#compatibilityModal .hero-input-right {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 12px 16px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Аватар слева */
#compatibilityModal .avatar-circle.left-avatar {
    position: absolute;
    width: 70px;
    height: 70px;
    left: 50%;
    transform: translateX(-50%);
    top: -60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-white);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    z-index: 3;
}

/* Аватар справа */
#compatibilityModal .avatar-circle.right-avatar {
    position: absolute;
    width: 80px;
    height: 80px;
    left: 50%;
    transform: translateX(-50%);
    top: -60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-white);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    z-index: 3;
}

#compatibilityModal .avatar-image {
    width: 100%;  /* Изменить: 80px → 100% */
    height: 100%; /* Добавить: 100% от родителя */
    border-radius: 50%;
    object-fit: cover; /* Добавить: сохраняет пропорции, обрезает лишнее */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


/* Адаптация для мобильных */
@media (max-width: 992px) {
    #compatibilityModal .hero-input-wrapper {
        max-width: 100%;
        /* На мобильных убираем ограничение */
    }

    #compatibilityModal .hero-input-fields::before,
    #compatibilityModal .hero-input-fields::after,
    #compatibilityModal .hero-input-fields .cross-line {
        display: none;
    }
}

@media (max-width: 768px) {
    #compatibilityModal .modal-compatibility-hero {
        padding: 40px 15px 0;
        margin: 5px 15px 0;
        min-height: 380px;
    }

    #compatibilityModal .hero-input-fields {
        flex-direction: column;
        gap: 40px;
        /* Увеличил отступ между колонками на мобильных */
    }

    #compatibilityModal .hero-input-wrapper {
        width: 100%;
        max-width: 100%;
    }

    #compatibilityModal .hero-input-wrapper.left-wrapper,
    #compatibilityModal .hero-input-wrapper.right-wrapper {
        margin-left: 0;
        margin-right: 0;
    }

    #compatibilityModal .avatar-circle.left-avatar,
    #compatibilityModal .avatar-circle.right-avatar {
        width: 60px;
        height: 60px;
        top: -50px;
    }

    #compatibilityModal .hero-input-label {
        font-size: 16px;
    }

    #compatibilityModal .hero-input-date {
        font-size: 14px;
    }

    #compatibilityModal .hero-input-wrapper .matrix-text {
        font-size: 8px;
    }

    /* Крестик между колонками на мобильных */
    #compatibilityModal .hero-input-fields::before {
        top: 50%;
        transform: translate(-50%, -50%);
    }

    #compatibilityModal .hero-input-fields::after {
        top: 50%;
        transform: translate(-50%, -50%) rotate(90deg);
    }
}

/* ========== МОДАЛЬНОЕ ОКНО ФОРМЫ ========== */
#consultationFormModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 20px;
    overflow-y: hidden;
}

#consultationFormModal.active {
    opacity: 1;
    visibility: visible;
}

#consultationFormModal .modal-form-content {
    position: relative;
    width: 625px;
    max-width: 100%;
    background: #1D2023;
    border-radius: 15px;
    padding: 0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transform: translateY(20px);
    transition: transform 0.3s ease;
    overflow-y: auto;
    max-height: 90vh;

    /* Стилизация скролла */
    scrollbar-width: thin;
    scrollbar-color: #6034D1 #E0E0E0;
}

#consultationFormModal .modal-form-content::-webkit-scrollbar {
    width: 6px;
}

#consultationFormModal .modal-form-content::-webkit-scrollbar-track {
    background: #E0E0E0;
    border-radius: 10px;
}

#consultationFormModal .modal-form-content::-webkit-scrollbar-thumb {
    background: #6034D1;
    border-radius: 10px;
}

#consultationFormModal.active .modal-form-content {
    transform: translateY(0);
}

/* Кнопка закрытия */
#consultationFormModal .modal-form-close {
    position: sticky;
    top: 20px;
    left: calc(100% - 60px);
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    margin-bottom: -40px;
}

#consultationFormModal .modal-form-close svg {
    width: 24px;
    height: 24px;
}

#consultationFormModal .modal-form-close svg line {
    stroke: #FFFFFF;
    transition: stroke 0.3s ease;
}

#consultationFormModal .modal-form-close:hover svg line {
    stroke: #F570A3;
}

/* Заголовок формы */
#consultationFormModal .form-title {
    width: 542px;
    max-width: 90%;
    margin: 0 auto;
    padding-top: 60px;
    font-family: 'Rooftop', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
}

/* Форма */
#consultationFormModal .consultation-form {
    width: 100%;
    padding: 40px 40px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Поля формы */
#consultationFormModal .form-field {
    position: relative;
    width: 517px;
    max-width: 100%;
    margin-bottom: 30px;
}

#consultationFormModal .field-label {
    position: absolute;
    left: 0;
    top: -20px;
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 10px;
    line-height: 14px;
    text-transform: uppercase;
    color: #FFFFFF;
    opacity: 0.5;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Красная звездочка для обязательных полей */
#consultationFormModal .field-label.required::after {
    content: '*';
    color: #FF0000;
    font-size: 14px;
    font-weight: bold;
    margin-left: 2px;
    opacity: 1;
}

/* Альтернативный способ через data-атрибут */
#consultationFormModal .field-label[data-required="true"]::after {
    content: '*';
    color: #FF0000;
    font-size: 14px;
    font-weight: bold;
    margin-left: 2px;
    opacity: 1;
}

/* Стили для полей с ошибкой валидации */
#consultationFormModal .form-field.error .field-label {
    color: #FF0000;
    opacity: 1;
}

#consultationFormModal .form-field.error .field-input,
#consultationFormModal .form-field.error .field-textarea {
    border-color: #FF0000;
}

#consultationFormModal .form-field.error .field-input:focus,
#consultationFormModal .form-field.error .field-textarea:focus {
    border-color: #FF0000;
}

#consultationFormModal .field-input {
    width: 100%;
    height: 50px;
    background: transparent;
    border: none;
    border-bottom: 0.5px solid #FFFFFF;
    font-family: 'MTS Compact', sans-serif;
    font-size: 16px;
    color: #FFFFFF;
    padding: 0 0 10px 0;
    outline: none;
    transition: border-color 0.3s ease;
}

#consultationFormModal .field-input.is-invalid {
    border-color: red;
}

.field-input.is-invalid::placeholder {
    color: red !important;
}

#consultationFormModal .field-input:focus {
    border-bottom-color: #F570A3;
}

#consultationFormModal .field-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-size: 14px;
}

/* Поле textarea */
#consultationFormModal .textarea-field {
    margin-bottom: 40px;
}

#consultationFormModal .field-textarea {
    width: 100%;
    height: 104px;
    background: transparent;
    border: 1px solid #FFFFFF;
    border-radius: 11px;
    font-family: 'MTS Compact', sans-serif;
    font-size: 16px;
    color: #FFFFFF;
    padding: 15px;
    outline: none;
    resize: none;
    transition: border-color 0.3s ease;
}

#consultationFormModal .field-textarea:focus {
    border-color: #F570A3;
}

#consultationFormModal .field-textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Обязательное поле */
#consultationFormModal .required-field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 30px;
    width: 100%;
    max-width: 517px;
}

#consultationFormModal .required-decoration {
    display: flex;
    gap: 4px;
    width: 16px;
}

#consultationFormModal .required-text {
    font-family: 'MTS Compact', sans-serif;
    font-weight: 400;
    font-size: 10px;
    line-height: 14px;
    color: rgba(255, 255, 255, 0.5);
}

/* Группа radio кнопок */
#consultationFormModal .form-radio-group {
    width: 517px;
    max-width: 100%;
    margin-bottom: 30px;
}

#consultationFormModal .radio-group-label {
    display: block;
    font-family: 'MTS Wide', sans-serif;
    font-size: 11px;
    line-height: 15px;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-bottom: 15px;
}

#consultationFormModal .radio-group-label.required::after {
    content: '*';
    color: #FF0000;
    font-size: 14px;
    font-weight: bold;
    margin-left: 4px;
}

#consultationFormModal .radio-options {
    display: flex;
    gap: 40px;
    align-items: center;
}

#consultationFormModal .radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
}

#consultationFormModal .radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

#consultationFormModal .radio-custom {
    width: 11px;
    height: 11px;
    border: 0.5px solid #FFFFFF;
    border-radius: 50%;
    position: relative;
    transition: all 0.2s ease;
}

#consultationFormModal .radio-input:checked+.radio-custom::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 5px;
    height: 5px;
    background: #F570A3;
    border-radius: 50%;
}

#consultationFormModal .radio-input:checked+.radio-custom {
    border-color: #F570A3;
}

#consultationFormModal .radio-text {
    font-family: 'MTS Wide', sans-serif;
    font-size: 12px;
    line-height: 17px;
    text-transform: uppercase;
    color: #FFFFFF;
}

/* Информационное сообщение */
#consultationFormModal .form-info {
    width: 503px;
    max-width: 100%;
    font-family: 'MTS Wide', sans-serif;
    font-size: 11px;
    line-height: 15px;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 20px 0 30px;
    text-align: left;
}

/* Чекбокс согласия */
#consultationFormModal .form-checkbox-group {
    width: 517px;
    max-width: 100%;
    margin: 20px 0 30px;
}

#consultationFormModal .checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    position: relative;
}

#consultationFormModal .checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

#consultationFormModal .checkbox-custom {
    width: 11px;
    height: 11px;
    border: 0.5px solid #FFFFFF;
    border-radius: 2px;
    position: relative;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.2s ease;
}

#consultationFormModal .checkbox-input:checked+.checkbox-custom {
    background: #F570A3;
    border-color: #F570A3;
}

#consultationFormModal .checkbox-input:checked+.checkbox-custom::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 1px;
    width: 3px;
    height: 6px;
    border: solid white;
    border-width: 0 1px 1px 0;
    transform: rotate(45deg);
}

#consultationFormModal .checkbox-text {
    font-family: 'MTS Compact', sans-serif;
    font-size: 11px;
    line-height: 15px;
    color: #FFFFFF;
    flex: 1;
}

#consultationFormModal .checkbox-text a {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* Стили для поля с ошибкой */
#consultationFormModal .form-radio-group.error .radio-group-label {
    color: #FF0000;
    opacity: 1;
}

#consultationFormModal .form-radio-group.error .radio-custom {
    border-color: #FF0000;
}

#consultationFormModal .form-checkbox-group.error .checkbox-custom {
    border-color: #FF0000;
}

#consultationFormModal .form-checkbox-group.error .checkbox-text {
    color: #FF0000;
}

/* Кнопка отправки */
#consultationFormModal .form-submit-btn {
    width: 261px;
    height: 52px;
    background: linear-gradient(117.6deg, #EA3C3A -36.29%, #FDA6C6 48.51%, #E86998 115.92%, #9A76D7 171.17%);
    border-radius: 50px;
    border: none;
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    text-transform: uppercase;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
}

#consultationFormModal .form-submit-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(234, 60, 58, 0.3);
}

/* Медиа-запросы для мобильных устройств */
@media (max-width: 768px) {
    #consultationFormModal .modal-form-content {
        width: 100%;
        max-width: 400px;
    }

    #consultationFormModal .form-title {
        font-size: 16px;
        line-height: 22px;
        width: 100%;
        padding: 50px 20px 0;
    }

    #consultationFormModal .consultation-form {
        padding: 30px 20px 40px;
    }

    #consultationFormModal .form-radio-group,
    #consultationFormModal .form-checkbox-group,
    #consultationFormModal .form-info {
        width: 100%;
    }

    #consultationFormModal .radio-options {
        gap: 20px;
    }

    #consultationFormModal .checkbox-text {
        font-size: 10px;
        line-height: 14px;
    }

    #consultationFormModal .form-submit-btn {
        width: 100%;
        max-width: 261px;
    }
}





/* ========== МОДАЛЬНОЕ ОКНО матрицы ========== */
#matrixFormModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 20px;
    overflow-y: hidden;
}

#matrixFormModal.active {
    opacity: 1;
    visibility: visible;
}

#matrixFormModal .modal-form-content {
    position: relative;
    width: 625px;
    max-width: 100%;
    background: #1D2023;
    border-radius: 15px;
    padding: 0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transform: translateY(20px);
    transition: transform 0.3s ease;
    overflow-y: auto;
    max-height: 90vh;

    /* Стилизация скролла */
    scrollbar-width: thin;
    scrollbar-color: #6034D1 #E0E0E0;
}

#matrixFormModal .modal-form-content::-webkit-scrollbar {
    width: 6px;
}

#matrixFormModal .modal-form-content::-webkit-scrollbar-track {
    background: #E0E0E0;
    border-radius: 10px;
}

#matrixFormModal .modal-form-content::-webkit-scrollbar-thumb {
    background: #6034D1;
    border-radius: 10px;
}

#matrixFormModal.active .modal-form-content {
    transform: translateY(0);
}

/* Кнопка закрытия */
#matrixFormModal .modal-form-close {
    position: sticky;
    top: 20px;
    left: calc(100% - 60px);
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    margin-bottom: -40px;
}

#matrixFormModal .modal-form-close svg {
    width: 24px;
    height: 24px;
}

#matrixFormModal .modal-form-close svg line {
    stroke: #FFFFFF;
    transition: stroke 0.3s ease;
}

#matrixFormModal .modal-form-close:hover svg line {
    stroke: #F570A3;
}

/* Заголовок формы */
#matrixFormModal .form-title {
    width: 542px;
    max-width: 90%;
    margin: 0 auto;
    padding-top: 60px;
    font-family: 'Rooftop', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
}

/* Форма */
#matrixFormModal .consultation-form {
    width: 100%;
    padding: 40px 40px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Поля формы */
#matrixFormModal .form-field {
    position: relative;
    width: 517px;
    max-width: 100%;
    margin-bottom: 30px;
}

#matrixFormModal .field-label {
    position: absolute;
    left: 0;
    top: -20px;
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 10px;
    line-height: 14px;
    text-transform: uppercase;
    color: #FFFFFF;
    opacity: 0.5;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Красная звездочка для обязательных полей */
#matrixFormModal .field-label.required::after {
    content: '*';
    color: #FF0000;
    font-size: 14px;
    font-weight: bold;
    margin-left: 2px;
    opacity: 1;
}

/* Альтернативный способ через data-атрибут */
#matrixFormModal .field-label[data-required="true"]::after {
    content: '*';
    color: #FF0000;
    font-size: 14px;
    font-weight: bold;
    margin-left: 2px;
    opacity: 1;
}

/* Стили для полей с ошибкой валидации */
#matrixFormModal .form-field.error .field-label {
    color: #FF0000;
    opacity: 1;
}

#matrixFormModal .form-field.error .field-input,
#matrixFormModal .form-field.error .field-textarea {
    border-color: #FF0000;
}

#matrixFormModal .form-field.error .field-input:focus,
#matrixFormModal .form-field.error .field-textarea:focus {
    border-color: #FF0000;
}

#matrixFormModal .field-input {
    width: 100%;
    height: 50px;
    background: transparent;
    border: none;
    border-bottom: 0.5px solid #FFFFFF;
    font-family: 'MTS Compact', sans-serif;
    font-size: 16px;
    color: #FFFFFF;
    padding: 0 0 10px 0;
    outline: none;
    transition: border-color 0.3s ease;
}

#matrixFormModal .field-input:focus {
    border-bottom-color: #F570A3;
}

#matrixFormModal .field-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-size: 14px;
}

/* Поле textarea */
#matrixFormModal .textarea-field {
    margin-bottom: 40px;
}

#matrixFormModal .field-textarea {
    width: 100%;
    height: 104px;
    background: transparent;
    border: 1px solid #FFFFFF;
    border-radius: 11px;
    font-family: 'MTS Compact', sans-serif;
    font-size: 16px;
    color: #FFFFFF;
    padding: 15px;
    outline: none;
    resize: none;
    transition: border-color 0.3s ease;
}

#matrixFormModal .field-textarea:focus {
    border-color: #F570A3;
}

#matrixFormModal .field-textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Обязательное поле */
#matrixFormModal .required-field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 30px;
    width: 100%;
    max-width: 517px;
}

#matrixFormModal .required-decoration {
    display: flex;
    gap: 4px;
    width: 16px;
}

#matrixFormModal .required-text {
    font-family: 'MTS Compact', sans-serif;
    font-weight: 400;
    font-size: 10px;
    line-height: 14px;
    color: rgba(255, 255, 255, 0.5);
}

/* Группа radio кнопок */
#matrixFormModal .form-radio-group {
    width: 517px;
    max-width: 100%;
    margin-bottom: 30px;
}

#matrixFormModal .radio-group-label {
    display: block;
    font-family: 'MTS Wide', sans-serif;
    font-size: 11px;
    line-height: 15px;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-bottom: 15px;
}

#matrixFormModal .radio-group-label.required::after {
    content: '*';
    color: #FF0000;
    font-size: 14px;
    font-weight: bold;
    margin-left: 4px;
}

#matrixFormModal .radio-options {
    display: flex;
    gap: 40px;
    align-items: center;
}

#matrixFormModal .radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
}

#matrixFormModal .radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

#matrixFormModal .radio-custom {
    width: 11px;
    height: 11px;
    border: 0.5px solid #FFFFFF;
    border-radius: 50%;
    position: relative;
    transition: all 0.2s ease;
}

#matrixFormModal .radio-input:checked+.radio-custom::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 5px;
    height: 5px;
    background: #F570A3;
    border-radius: 50%;
}

#matrixFormModal .radio-input:checked+.radio-custom {
    border-color: #F570A3;
}

#matrixFormModal .radio-text {
    font-family: 'MTS Wide', sans-serif;
    font-size: 12px;
    line-height: 17px;
    text-transform: uppercase;
    color: #FFFFFF;
}

/* Информационное сообщение */
#matrixFormModal .form-info {
    width: 503px;
    max-width: 100%;
    font-family: 'MTS Wide', sans-serif;
    font-size: 11px;
    line-height: 15px;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 20px 0 30px;
    text-align: left;
}

/* Чекбокс согласия */
#matrixFormModal .form-checkbox-group {
    width: 517px;
    max-width: 100%;
    margin: 20px 0 30px;
}

#matrixFormModal .checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    position: relative;
}

#matrixFormModal .checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

#matrixFormModal .checkbox-custom {
    width: 11px;
    height: 11px;
    border: 0.5px solid #FFFFFF;
    border-radius: 2px;
    position: relative;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.2s ease;
}

#matrixFormModal .checkbox-input:checked+.checkbox-custom {
    background: #F570A3;
    border-color: #F570A3;
}

#matrixFormModal .checkbox-input:checked+.checkbox-custom::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 1px;
    width: 3px;
    height: 6px;
    border: solid white;
    border-width: 0 1px 1px 0;
    transform: rotate(45deg);
}

#matrixFormModal .checkbox-text {
    font-family: 'MTS Compact', sans-serif;
    font-size: 11px;
    line-height: 15px;
    color: #FFFFFF;
    flex: 1;
}

/* Стили для поля с ошибкой */
#matrixFormModal .form-radio-group.error .radio-group-label {
    color: #FF0000;
    opacity: 1;
}

#matrixFormModal .form-radio-group.error .radio-custom {
    border-color: #FF0000;
}

#matrixFormModal .form-checkbox-group.error .checkbox-custom {
    border-color: #FF0000;
}

#matrixFormModal .form-checkbox-group.error .checkbox-text {
    color: #FF0000;
}

/* Кнопка отправки */
#matrixFormModal .form-submit-btn {
    width: 261px;
    height: 52px;
    background: linear-gradient(117.6deg, #EA3C3A -36.29%, #FDA6C6 48.51%, #E86998 115.92%, #9A76D7 171.17%);
    border-radius: 50px;
    border: none;
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    text-transform: uppercase;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
}

#matrixFormModal .form-submit-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(234, 60, 58, 0.3);
}

/* Медиа-запросы для мобильных устройств */
@media (max-width: 768px) {
    #matrixFormModal .modal-form-content {
        width: 100%;
        max-width: 400px;
    }

    #matrixFormModal .form-title {
        font-size: 16px;
        line-height: 22px;
        width: 100%;
        padding: 50px 20px 0;
    }

    #matrixFormModal .consultation-form {
        padding: 30px 20px 40px;
    }

    #matrixFormModal .form-radio-group,
    #matrixFormModal .form-checkbox-group,
    #matrixFormModal .form-info {
        width: 100%;
    }

    #matrixFormModal .radio-options {
        gap: 20px;
    }

    #matrixFormModal .checkbox-text {
        font-size: 10px;
        line-height: 14px;
    }

    #matrixFormModal .form-submit-btn {
        width: 100%;
        max-width: 261px;
    }
}

/* ========== СТРАНИЦА: Просмотр книги (book.html) ========== */

.book-preview {
    position: relative;
    width: 100%;
    padding: 60px 32px;
}

/* Основной флекс-контейнер для расположения обложки и текста */
.book-preview .preview-container {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    position: relative;
}

/* ===== ЛЕВАЯ КОЛОНКА С ОБЛОЖКОЙ ===== */
.book-preview .book-cover-section {
    flex: 0 0 300px;
    /* Фиксированная ширина */
    position: sticky;
    top: 100px;
    /* Отступ от верхнего края при прокрутке */
    align-self: flex-start;
}

.book-preview .book-cover-image {
    width: 100%;
    border-radius: 25px 15px 25px 25px;
    border: 2px solid var(--color-gray);
    margin-bottom: 20px;
    display: block;
}

.book-preview .book-cover-title {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 28px;
    text-transform: uppercase;
    color: #1D2023;
    margin-bottom: 15px;
}

.book-preview .book-cover-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.book-preview .book-cover-tag {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #1D2023;
    border-radius: 22px;
    font-family: 'MTS Wide', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    color: #1D2023;
    background: transparent;
    transition: all 0.3s ease;
}

.book-preview .book-cover-tag:hover {
    background: #1D2023;
    color: #FFFFFF;
}

.book-preview .book-purchase-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 30px;
    background: var(--color-dark);
    border-radius: 30px;
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 25px;
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    text-align: center;
    text-decoration: none;
}

.book-preview .book-purchase-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(96, 52, 209, 0.3);
    opacity: 1;
}

/* ===== ПРАВАЯ КОЛОНКА С ТЕКСТОМ ===== */
.book-preview .book-text-section {
    flex: 1;
    min-width: 0;
    /* Для корректной работы с флексом */
    background: #FFFFFF;
    border-radius: 25px 15px 25px 25px;
    padding: 30px 30px 30px 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
}

/* Заголовок главы внутри текстового блока */
.book-preview .chapter-title {
    font-family: 'Rooftop', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    text-transform: uppercase;
    color: #7245FF;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    width: 300px;
}

/* Контейнер для текста с прокруткой */
.book-preview .scrollable-text {
    max-height: 600px;
    overflow-y: auto;
    padding-right: 15px;

    /* Стилизация скроллбара */
    scrollbar-width: thin;
    scrollbar-color: rgba(114, 69, 255, 0.5) #FAFAFA;
}

.book-preview .scrollable-text::-webkit-scrollbar {
    width: 8px;
}

.book-preview .scrollable-text::-webkit-scrollbar-track {
    background: #FAFAFA;
    border-radius: 10px;
}

.book-preview .scrollable-text::-webkit-scrollbar-thumb {
    background: rgba(114, 69, 255, 0.5);
    border-radius: 10px;
}

.book-preview .scrollable-text::-webkit-scrollbar-thumb:hover {
    background: rgba(114, 69, 255, 0.8);
}

/* Текст книги */
.book-preview .book-text-content {
    font-family: 'Cera Pro', 'MTS Compact', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: #000000;
}

.book-preview .book-text-content p {
    margin-bottom: 20px;
}

/* Декоративные элементы */
.book-preview .book-decor-dot {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: #7245FF;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 16px;
    border-radius: 50%; /* круг */
    z-index: 5;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.book-preview .book-decor-dot.left {
    right: 20px;
    top: 20px;
    background-image: url('../images/icons/book_arrow-left.svg');
}

.book-preview .book-decor-dot.right {
    right: 60px;
    top: 20px;
    margin-right: 20px;
    background-image: url('../images/icons/book_arrow-right.svg');
}

.book-preview .book-decor-dot:hover {
    transform: scale(1.1);
    background-color: #6034D1;
    box-shadow: 0 4px 12px rgba(96, 52, 209, 0.3);
}

/* ===== МОБИЛЬНАЯ АДАПТАЦИЯ ===== */
@media (max-width: 992px) {
    .book-preview .preview-container {
        flex-direction: column;
        gap: 30px;
    }

    .book-preview .book-cover-section {
        flex: none;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        position: relative;
        top: 0;
        sticky: none;
    }

    .book-preview .book-text-section {
        width: 100%;
    }

    .book-preview .scrollable-text {
        max-height: 500px;
    }
}

@media (max-width: 576px) {
    .book-preview {
        padding: 30px 0;
    }

    .book-preview .book-cover-title {
        font-size: 18px;
        line-height: 24px;
    }

    .book-preview .book-purchase-btn {
        font-size: 16px;
        padding: 10px 20px;
    }

    .book-preview .chapter-title {
        font-size: 14px;
    }

    .book-preview .book-text-content {
        font-size: 13px;
    }

    /* Декоративные элементы на мобильных - показываем, но уменьшаем */
    .book-preview .book-decor-dot {
        display: flex;
        width: 30px;
        height: 30px;
    }

    .book-preview .book-decor-dot.left {
        right: 10px;
        top: 10px;
    }

    .book-preview .book-decor-dot.right {
        right: 45px;
        top: 10px;
    }

    .book-preview .book-decor-dot svg {
        width: 14px;
        height: 12px;
    }
}

/* ========== БЛОК РАСЧЕТА СОВМЕСТИМОСТИ ========== */
.calculator-hero {
    padding: 0;
    background: url(../images/olga-consultation-hero.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-white);
    border-radius: 32px;
    margin: 0 32px;
    overflow: hidden;
    position: relative;
    min-height: 450px;
    display: flex;
    align-items: center;
}

.calculator-hero .btn-open-consultation{
    background-color: var(--color-white);
}

.calculator-hero .btn-open-consultation:hover {
    background-color: #969FA8;
}

.calculator-hero .hero-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
}

.calculator-hero .hero-title-group {
    max-width: 400px;
}

.calculator-hero h1 {
    color: var(--color-dark);
    font-size: 55px;
    line-height: 55px;
    margin-bottom: 20px;
}

.calculator-hero .hero-subtitle {
    font-family: 'MTS Wide', sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-dark);
    margin-bottom: 30px;
    opacity: 0.9;
}

@media (max-width: 768px) {
    .calculator-hero {
        position: relative;
        width: auto;
        height: 540px;
        margin: 0;
        padding: 0;
        border-radius: 32px;
        background: url('../images/olga-consultation-hero-mobile.png') no-repeat center;
        background-size: cover;
        display: block;
    }

    .calculator-hero .hero-content {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        display: block;
    }

    .calculator-hero .hero-subtitle {
        display: none;
    }

    .calculator-hero h1 {
        position: absolute;
        left: 16px;
        bottom: 120px;
        font-size: 40px;
        line-height: 40px;
        color: #FFFFFF;
        margin: 0;
        max-width: 261px;
        text-transform: uppercase;
        z-index: 2;
    }

    .calculator-hero .hero-benefits {
        position: absolute;
        left: 16px;
        bottom: 70px;
        font-family: 'MTS Wide', sans-serif;
        font-size: 16px;
        line-height: 18px;
        text-transform: uppercase;
        color: #FFFFFF;
        margin: 0;
        max-width: 228px;
        z-index: 2;
        text-align: left;
    }

    .calculator-hero .btn-large {
        position: absolute;
        left: 0;
        right: 16px;
        bottom: 20px;
        width: auto;
        height: 42px;
        /*background: linear-gradient(94.25deg, #745CF4 -0.47%, #5528C7 128.92%);*/
        border-radius: 30px;
        font-size: 18px;
        line-height: 25px;
        /*color: #FFFFFF;*/
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        border: none;
        padding: 0 20px;
    }
}

.calculator-calculator {
    padding: 60px 0;
    background: var(--color-white);
}

.compatibility-calculator {
    padding: 60px 0;
}

.calculator-wrapper {
    max-width: 1216px;
    margin: 0 auto;
    background: #FFFFFF;
    border: 1px solid #626C77;
    border-radius: 32px;
    padding: 40px 33px;
    position: relative;
    min-height: auto;
    /* Убираем фиксированную высоту */
    height: auto;
    /* Автоматическая высота */
}

.calculator-wrapper input {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 23px;
    text-transform: uppercase;
    color: #9095A7;
}

.calculator-main-title {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 20px;
    text-transform: uppercase;
    color: #1D2023;
    text-align: center;
    margin: 0 0 30px 0;
    letter-spacing: -0.02em;
}

.calculator-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 40px;
    position: relative;
}

.participant-col {
    flex: 0 0 365px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.date-input-field {
    width: 100%;
    height: 52px;
    background: #FFFFFF;
    border: 1px solid #9095A7;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}

.date-display {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 40px;
    text-transform: uppercase;
    color: #1D2023;
    margin-top: 10px;
}

.matrix-codes {
    width: 100%;
    min-height: 49px;
    display: flex;
    align-items: center;
}

/* Стили для SVG внутри matrix-codes */
.matrix-codes svg {
    position: absolute;
    right: 15px;
    /* Отступ от правого края */
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 23px;
    pointer-events: none;
    /* Чтобы SVG не мешал кликам */
}

/* Разделитель с иконкой */
.separator-icon {
    position: relative;
    width: 49px;
    height: 49px;
    margin-top: 0;
}

.separator-circle {
    position: absolute;
    width: 49px;
    height: 49px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #1D2023;
    border-radius: 50%;
    z-index: 1;
}

.separator-lines {
    position: absolute;
    width: 20px;
    height: 19px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.line-vertical {
    position: absolute;
    width: 1px;
    height: 19px;
    left: 9px;
    top: 0;
    background: #FFFFFF;
    transform: rotate(0deg);
}

.line-horizontal {
    position: absolute;
    width: 20px;
    height: 1px;
    left: 0;
    top: 9px;
    background: #FFFFFF;
    transform: rotate(0deg);
}

/* Кнопка расчета */
.compatibility-calc-btn {
    position: relative;
    /* Меняем с absolute на relative */
    left: auto;
    transform: none;
    margin: 0 auto 40px;
    /* Добавляем отступ снизу */
    width: 342px;
    height: 52px;
    background: linear-gradient(94.25deg, #745CF4 -0.47%, #5528C7 128.92%);
    border-radius: 30px;
    border: none;
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 31px;
    color: #F1F1F4;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.compatibility-calc-btn:hover {
    background: linear-gradient(94.25deg, #5f4ad3 -0.47%, #3f1f9c 128.92%);
}

/* Блок результатов */
.results-block {
    margin-top: 40px;
    /* Отступ от кнопки */
    /*background: rgba(96, 52, 209, 0.14);
    border-radius: 22px;
    padding: 40px 30px;8*/
    display: flex;
    flex-direction: column;
    gap: 30px;
    /* Промежутки между блоками */
    width: 100%;
}

/* Отдельный блок результата */
.result-block-item {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.result-title {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    text-transform: uppercase;
    color: #1D2023;
    margin: 0 0 15px 0;
}

.result-description {
    font-family: 'MTS Compact', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 25px;
    color: #1D2023;
    margin: 0 0 30px 0;
    max-width: 874px;
}

.result-subtitle {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    text-transform: uppercase;
    color: #1D2023;
    margin: 0 0 15px 0;
}

.result-note {
    font-family: 'MTS Compact', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 25px;
    color: #1D2023;
    margin: 0;
    max-width: 874px;
}

/* Разделитель между блоками (опционально) */
.result-block-divider {
    width: 100%;
    height: 1px;
    background: rgba(96, 52, 209, 0.3);
    margin: 5px 0;
}

/* Медиа-запросы для мобильных устройств */
@media (max-width: 1200px) {
    .calculator-wrapper {
        max-width: 100%;
        padding: 30px 20px;
        min-height: auto;
    }

    .calculator-main-title {
        font-size: 28px;
        line-height: 34px;
    }

    .participant-col {
        flex: 0 0 300px;
    }

    .date-display {
        font-size: 32px;
        line-height: 32px;
    }

    .matrix-codes {
        font-size: 12px;
        line-height: 18px;
    }
}

@media (max-width: 992px) {
    .calculator-row {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .participant-col {
        width: 100%;
        max-width: 365px;
        flex: none;
    }

    .separator-icon {
        margin: 10px 0;
        transform: rotate(90deg);
    }

    .compatibility-calc-btn {
        position: relative;
        top: 0;
        margin: 30px auto;
        width: 100%;
        max-width: 342px;
    }

    .results-block {
        position: relative;
        /* Меняем на relative на планшетах */
        left: auto;
        right: auto;
        bottom: auto;
        margin-top: 30px;
        padding: 30px 20px;
    }
}

@media (max-width: 768px) {
    .calculator-main-title {
        font-size: 24px;
        line-height: 30px;
    }

    .matrix-codes {
        font-size: 12px;
        line-height: 18px;
        padding: 0 35px 0 15px;
    }

    .matrix-codes svg {
        right: 12px;
        width: 18px;
        height: 21px;
    }

    .date-display {
        font-size: 28px;
        line-height: 28px;
    }

    .results-block {
        padding: 30px 20px;
        gap: 25px;
    }

    .result-title,
    .result-subtitle {
        font-size: 18px;
        line-height: 24px;
    }

    .result-description,
    .result-note {
        font-size: 15px;
        line-height: 22px;
    }
}

@media (max-width: 576px) {
    .calculator-wrapper {
        padding: 20px 15px;
    }

    .calculator-main-title {
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 20px;
    }

    .participant-col {
        max-width: 100%;
    }

    .date-input-field {
        height: 48px;
    }

    .date-display {
        font-size: 24px;
        line-height: 24px;
    }

    .matrix-codes {
        font-size: 11px;
        line-height: 16px;
        padding: 0 30px 0 12px;
    }

    .matrix-codes svg {
        right: 10px;
        width: 16px;
        height: 18px;
    }

    .compatibility-calc-btn {
        max-width: 280px;
        height: 48px;
        font-size: 20px;
        line-height: 28px;
    }

    .results-block {
        padding: 20px 15px;
    }

    .results-block {
        padding: 20px 15px;
        gap: 20px;
    }

    .result-title,
    .result-subtitle {
        font-size: 16px;
        line-height: 22px;
    }
}

/* ========== БЛОК РАСЧЕТА ФИНАНСОВ ========== */
.finance-calculator {
    padding: 60px 0;
    background: var(--color-white);
}

.finance-wrapper {
    max-width: 1216px;
    margin: 0 auto;
    background: #FFFFFF;
    border: 1px solid #626C77;
    border-radius: 32px;
    padding: 40px 33px 50px;
    position: relative;
   /*min-height: 817px;*/
}

.finance-title {
    text-align: center;
    margin: 0 0 30px 0;
    font-size: 32px;
    line-height: 20px;
}

.finance-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 40px;
}

.finance-col {
    flex: 0 0 365px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Кнопка расчета */
.finance-calc-btn {
    position: relative;
    margin: 0 auto 40px;
    width: 364px;
    height: 52px;
    background: linear-gradient(94.25deg, #745CF4 -0.47%, #5528C7 128.92%);
    border-radius: 30px;
    border: none;
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 31px;
    color: #F1F1F4;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.finance-calc-btn:hover {
    background: linear-gradient(94.25deg, #5f4ad3 -0.47%, #3f1f9c 128.92%);
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(96, 52, 209, 0.3);
}

/* Блоки результатов */
.finance-results {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.result-item {
    background: rgba(96, 52, 209, 0.14);
    border-radius: 22px;
    padding: 25px 30px;
    min-height: 142px;
    display: flex;
    gap: 30px;
    align-items: center;
    /* Выравнивание по вертикали по центру */
}

.result-left {
    flex-shrink: 0;
    min-width: 80px;
    display: flex;
    justify-content: center;
    /* Выравнивание по горизонтали по центру */
    align-items: center;
    /* Выравнивание по вертикали по центру (на случай если будет несколько элементов) */
    height: 100%;
    /* Занимает всю высоту родителя */
}

.result-value {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 45px;
    line-height: 63px;
    text-transform: uppercase;
    color: #1D2023;
    display: block;
}

.result-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.result-category {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    text-transform: uppercase;
    color: #1D2023;
}

.result-description {
    font-family: 'MTS Compact', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #1D2023;
    margin: 0;
    max-width: 794px;
    white-space: pre-wrap;  /* Сохраняет переносы строк */
    word-wrap: break-word;
}

/* Медиа-запросы */
@media (max-width: 1200px) {
    .finance-wrapper {
        max-width: 100%;
        padding: 30px 20px;
        min-height: auto;
    }

    .finance-title {
        font-size: 28px;
        line-height: 34px;
    }

    .finance-col {
        flex: 0 0 300px;
    }

    .date-display {
        font-size: 32px;
        line-height: 32px;
    }
}

@media (max-width: 992px) {
    .finance-row {
        flex-direction: column;
        align-items: center;
    }

    .finance-col {
        width: 100%;
        max-width: 365px;
        flex: none;
    }

    .finance-results {
        margin-top: 30px;
    }

    .result-item {
        padding: 20px 25px;
        gap: 20px;
    }

    .result-value {
        font-size: 36px;
        line-height: 50px;
    }
}

@media (max-width: 768px) {
    .finance-title {
        font-size: 24px;
        line-height: 30px;
    }

    .date-display {
        font-size: 28px;
        line-height: 28px;
    }

    .result-item {
        flex-direction: column;
        gap: 15px;
    }

    .result-left {
        min-width: auto;
    }

    .result-value {
        font-size: 30px;
        line-height: 42px;
    }

    .result-category {
        font-size: 18px;
        line-height: 24px;
    }

    .result-description {
        font-size: 13px;
        line-height: 18px;
    }
}

@media (max-width: 576px) {
    .finance-wrapper {
        padding: 20px 15px;
    }

    .finance-title {
        font-size: 20px;
        line-height: 26px;
    }

    .finance-col {
        max-width: 100%;
    }

    .date-input-field {
        height: 48px;
    }

    .date-display {
        font-size: 24px;
        line-height: 24px;
    }

    .matrix-codes {
        font-size: 11px;
        line-height: 16px;
        min-height: 45px;
    }

    .finance-calc-btn {
        width: 100%;
        max-width: 280px;
        height: 48px;
        font-size: 20px;
        line-height: 28px;
        margin-bottom: 30px;
    }

    .result-item {
        padding: 15px 20px;
    }

    .result-value {
        font-size: 24px;
        line-height: 34px;
    }

    .result-category {
        font-size: 16px;
        line-height: 22px;
    }

    .result-description {
        font-size: 12px;
        line-height: 16px;
    }
}

/* ========== МОДАЛЬНОЕ ОКНО УСПЕХА ========== */
#consultationSuccessModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 20px;
    overflow-y: hidden;
}

#consultationSuccessModal.active {
    opacity: 1;
    visibility: visible;
}

#consultationSuccessModal .modal-success-content {
    position: relative;
    width: 500px;
    max-width: 100%;
    background: var(--color-dark);
    border-radius: 32px;
    padding: 50px 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transform: translateY(20px);
    transition: transform 0.3s ease;
    text-align: center;
    overflow: hidden;
}

/* Круглый градиент сверху */
#consultationSuccessModal .modal-success-content::before {
    content: '';
    position: absolute;
    top: -170px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #9A86FA 0%, rgba(245, 112, 163, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Чтобы контент был поверх градиента */
#consultationSuccessModal .modal-success-content > * {
    position: relative;
    z-index: 1;
}

#consultationSuccessModal.active .modal-success-content {
    transform: translateY(0);
}

/* Кнопка закрытия в правом верхнем углу */
#consultationSuccessModal .modal-form-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: #FFFFFF;
    mask: url('../images/icons/close.svg') no-repeat center center;
    mask-size: 24px 24px;
    -webkit-mask: url('../images/icons/close.svg') no-repeat center center;
    -webkit-mask-size: 24px 24px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 100;
}

#consultationSuccessModal .modal-form-close:hover {
    transform: scale(1.1);
    background-color: #F570A3;
}

/* Заголовок */
#consultationSuccessModal .success-title {
    font-family: 'MTS Wide', sans-serif;
    font-size: 40px;
    line-height: 35px;
    font-weight: 500;
    text-transform: uppercase;
    color: #745CF4;
    margin-bottom: 15px;
    animation: fadeInUp 0.5s ease forwards 0.4s;
    opacity: 0;
    transform: translateY(20px);
}

/* Текст */
#consultationSuccessModal .success-text {
    font-family: 'MTS Compact', sans-serif;
    font-size: 20px;
    line-height: 30px;
    color: var(--color-white);
    margin-bottom: 0;
    animation: fadeInUp 0.5s ease forwards 0.5s;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
    #consultationSuccessModal .modal-success-content {
        padding: 40px 30px;
    }
    
    #consultationSuccessModal .success-title {
        font-size: 24px;
        line-height: 32px;
    }
    
    #consultationSuccessModal .success-text {
        font-size: 16px;
        line-height: 22px;
    }
    
    #consultationSuccessModal .modal-form-close {
        top: 15px;
        right: 15px;
        width: 32px;
        height: 32px;
        background-size: 20px 20px;
    }
}

@media (max-width: 576px) {
    #consultationSuccessModal .modal-success-content {
        padding: 30px 20px;
    }
    
    #consultationSuccessModal .success-title {
        font-size: 20px;
        line-height: 28px;
    }
    
    #consultationSuccessModal .success-text {
        font-size: 14px;
        line-height: 20px;
    }
    
    #consultationSuccessModal .modal-form-close {
        top: 12px;
        right: 12px;
        width: 28px;
        height: 28px;
        background-size: 18px 18px;
    }
}
/* Модальное окно для видео */
.video-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
    z-index: 5000;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-modal.active {
    display: flex;
    opacity: 1;
}

.video-modal-content {
    position: relative;
    width: 90%;
    max-width: 800px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.video-player {
    width: 100%;
    height: auto;
    display: block;
    background: #000;
}

.video-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-modal-close:hover {
    transform: scale(1.1);
    color: #F570A3;
}

@media (max-width: 768px) {
    .video-modal-content {
        width: 95%;
    }
    
    .video-modal-close {
        top: -35px;
        right: 0;
        width: 32px;
        height: 32px;
        font-size: 24px;
    }
}



/* Flip карточка - без фиксированных размеров */
.review-flip-card {
    cursor: pointer;
    perspective: 1000px;
    /* Размер определяется содержимым */
}

.review-flip-inner {
    position: relative;
    transition: transform 0.6s ease-in-out;
    transform-style: preserve-3d;
}

.review-flip-card.flipped .review-flip-inner {
    transform: rotateY(180deg);
}

/* Лицевая и обратная стороны */
.review-front,
.review-back {
    position: relative;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.review-back {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: rotateY(180deg);
    background: linear-gradient(117.6deg, #EA3C3A -36.29%, #FDA6C6 48.51%, #E86998 115.92%, #9A76D7 171.17%);
    border-radius: 18px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #FFFFFF;
}

.review-back-content {
    max-height: 100%;
    overflow-y: auto;
}

.review-description {
    font-family: 'MTS Compact', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

/* Анимация появления */
.review-flip-card {
    transition: transform 0.3s ease;
}

.review-flip-card:hover {
    transform: translateY(-5px);
}

/* Основной класс для центрирования матрицы */
.matrix-content-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.matrix-content-center .matrix-left {
    position: initial;
}

/* Адаптация для планшетов */
@media (max-width: 992px) {
    .matrix-content-center {
        min-height: auto;
        padding: 20px 0;
    }
    
    .matrix-content-center .matrix-left {
        max-width: 100%;
        padding: 0 20px;
    }
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
    .matrix-content-center .matrix-left {
        padding: 0 16px;
        min-height: 350px;
    }
    
    .matrix-content-center .matrix-table td.__empty {
        background: transparent;
    }
}

.filter-radio-group {
    display: flex;
    justify-content: center; /* Горизонтальное центрирование */
    align-items: center; /* Вертикальное центрирование */
    flex-wrap: wrap; /* Перенос на мобильных */
    gap: 10px; /* Расстояние между кнопками */

}

.filter-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

/* Или более простой вариант */
.filter-radio {
    display: none;
}

/* ========== МОДАЛЬНОЕ ОКНО ПОКУПКИ КНИГИ ========== */
.book-purchase-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 20px;
}

.book-purchase-modal.active {
    opacity: 1;
    visibility: visible;
}

.book-purchase-modal-content {
    position: relative;
    max-width: 560px;
    width: 100%;
    background: linear-gradient(135deg, #1D2023 0%, #2A2F33 100%);
    border-radius: 32px;
    padding: 0;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s ease;
    overflow: hidden;
}

.book-purchase-modal.active .book-purchase-modal-content {
    transform: translateY(0) scale(1);
}

/* Декоративный градиентный фон */
.book-purchase-modal-content::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 20%, rgba(96, 52, 209, 0.15), transparent 60%);
    pointer-events: none;
}

/* Кнопка закрытия */
.book-purchase-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
    color: #FFFFFF;
}

.book-purchase-modal-close:hover {
    background: rgba(245, 112, 163, 0.8);
    transform: scale(1.1);
}

.book-purchase-modal-close svg {
    width: 20px;
    height: 20px;
}

/* Заголовок */
.book-purchase-modal-header {
    text-align: center;
    padding: 40px 32px 24px;
    position: relative;
}

.book-purchase-modal-title {
    font-family: 'MTS Wide', sans-serif;
    font-size: 28px;
    line-height: 36px;
    font-weight: 500;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 0 0 12px 0;
}

.book-purchase-modal-subtitle {
    font-family: 'MTS Compact', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Тело модального окна */
.book-purchase-modal-body {
    padding: 8px 32px 32px;
}

/* Группа формата */
.purchase-format-group {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 20px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.purchase-format-group:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.format-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.format-icon {
    width: 44px;
    height: 44px;
    background: rgba(96, 52, 209, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9A86FA;
}

.format-title {
    font-family: 'MTS Wide', sans-serif;
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 0;
}

/* Магазины */
.format-stores {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.paper-stores {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.store-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 60px;
    padding: 12px 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.store-link:hover {
    background: rgba(96, 52, 209, 0.2);
    border-color: rgba(96, 52, 209, 0.5);
    transform: translateX(4px);
}

.store-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    margin-right: 12px;
}

.store-name {
    font-family: 'MTS Wide', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    color: #FFFFFF;
    flex: 1;
}

.store-arrow {
    font-family: 'MTS Wide', sans-serif;
    font-size: 18px;
    color: #9A86FA;
    transition: transform 0.3s ease;
}

.store-link:hover .store-arrow {
    transform: translateX(4px);
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
    .book-purchase-modal-content {
        max-width: 100%;
        margin: 0 16px;
    }
    
    .book-purchase-modal-header {
        padding: 32px 24px 20px;
    }
    
    .book-purchase-modal-title {
        font-size: 20px;
        line-height: 32px;
    }
    
    .book-purchase-modal-subtitle {
        font-size: 14px;
        line-height: 20px;
    }
    
    .book-purchase-modal-body {
        padding: 8px 24px 24px;
    }
    
    .paper-stores {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .format-stores {
        gap: 10px;
    }
    
    .store-link {
        padding: 10px 16px;
    }
    
    .store-name {
        font-size: 12px;
    }
}

@media (max-width: 576px) {
    .purchase-format-group {
        padding: 16px;
    }
    
    .format-group-header {
        margin-bottom: 16px;
        padding-bottom: 12px;
    }
    
    .format-icon {
        width: 36px;
        height: 36px;
    }
    
    .format-icon svg {
        width: 18px;
        height: 18px;
    }
    
    .format-title {
        font-size: 16px;
    }
}

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

/* Для страницы специалиста - блок с кнопкой и соцсетями */
.specialist-actions {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 25px;
}

.specialist-actions .btn-large {
    margin: 0;
}

.specialist-actions .specialist-social {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0;
}

.specialist-actions .specialist-social p {
    margin: 0;
    font-family: 'MTS Wide', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--color-gray);
}

.specialist-actions .social-icons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.specialist-actions .social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-dark);
    border-radius: 50%;
    transition: all 0.3s ease;
    position: relative;
}

.specialist-actions .social-icon.restricted::after {
    content: '*';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 18px;
    font-weight: bold;
    color: #1D2023;
    z-index: 10;
}

.specialist-actions .social-icon:hover {
    border-color: var(--color-purple);
    background: var(--color-purple);
    transform: scale(1.05);
}

.specialist-actions .social-icon:hover img {
    filter: brightness(0) invert(1);
}

.specialist-actions .social-icon img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(0);
    opacity: 0.7;
    transition: all 0.3s ease;
}

/* ПК версия (≥769px) */
@media (min-width: 769px) {
    .specialist-actions {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-top: 25px;
    }
    
    .specialist-actions .btn-large {
        flex-shrink: 0;
        margin: 0;
    }
    
    .specialist-actions .specialist-social {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 12px;
        margin: 0;
        text-align: -webkit-center;
    }
    
    .specialist-actions .specialist-social p {
        margin: 0;
        font-family: 'MTS Wide', sans-serif;
        font-size: 12px;
        text-transform: initial;
        color: var(--color-gray);
    }
    
    .specialist-actions .social-icons {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 15px;
    }
    
    .specialist-actions .social-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 1px solid var(--color-dark);
        border-radius: 50%;
        transition: all 0.3s ease;
        background: transparent;
    }
    
    .specialist-actions .social-icon:hover {
        border-color: var(--color-purple);
        background: var(--color-purple);
        transform: scale(1.05);
    }
    
    .specialist-actions .social-icon:hover img {
        filter: brightness(0) invert(1);
    }
    
    .specialist-actions .social-icon img {
        width: 18px;
        height: 18px;
        filter: brightness(0) invert(0);
        opacity: 0.7;
        transition: all 0.3s ease;
    }
}

/* Мобильная версия (≤768px) */
@media (max-width: 768px) {
    .specialist-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-top: 25px;
    }
    
    .specialist-actions .btn-large {
        width: 100%;
        max-width: 280px;
        margin: 0;
    }
    
    .specialist-actions .specialist-social {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        width: 100%;
    }
    
    .specialist-actions .specialist-social p {
        margin: 0;
        font-family: 'MTS Wide', sans-serif;
        font-size: 12px;
        text-transform: uppercase;
        color: var(--color-gray);
        text-align: center;
    }
    
    .specialist-actions .social-icons {
        display: flex;
        justify-content: center;
        gap: 20px;
    }
    
    .specialist-actions .social-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 1px solid var(--color-dark);
        border-radius: 50%;
        transition: all 0.3s ease;
        background: transparent;
    }
    
    .specialist-actions .social-icon:hover {
        border-color: var(--color-purple);
        background: var(--color-purple);
        transform: scale(1.05);
    }
    
    .specialist-actions .social-icon:hover img {
        filter: brightness(0) invert(1);
    }
    
    .specialist-actions .social-icon img {
        width: 18px;
        height: 18px;
        filter: brightness(0) invert(0);
        opacity: 0.7;
        transition: all 0.3s ease;
    }
}

/* ========== МОДАЛЬНОЕ ОКНО ИССЛЕДОВАНИЯ ========== */
/* ========== МОДАЛЬНОЕ ОКНО ИССЛЕДОВАНИЯ ========== */

.research-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 6000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 20px;
    overflow-y: auto;
}

.research-modal.active {
    opacity: 1;
    visibility: visible;
}

.research-modal-content {
    position: relative;
    width: 1028px;
    max-width: 100%;
    /* Убираем фиксированную высоту */
    height: auto;
    max-height: 90vh;
    background: #FFFFFF;
    border-radius: 32px;
    overflow: hidden;
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s ease;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
}

.research-modal.active .research-modal-content {
    transform: translateY(0) scale(1);
}

/* Кнопка закрытия */
.research-modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 10;
}

.research-modal-close:hover {
    background: rgba(0, 0, 0, 0.05);
    transform: scale(1.1);
}

.research-modal-close svg {
    width: 24px;
    height: 24px;
}

/* Основной контент */
.research-modal-body {
    padding: 40px 48px 40px;
    overflow-y: auto;
    flex: 1;
}

/* Стилизация скроллбара #6034D1 */
.research-modal-body::-webkit-scrollbar {
    width: 6px;
}

.research-modal-body::-webkit-scrollbar-track {
    background: #E6E8ED;
    border-radius: 10px;
}

.research-modal-body::-webkit-scrollbar-thumb {
    background: #6034D1;
    border-radius: 10px;
}

.research-modal-body::-webkit-scrollbar-thumb:hover {
    background: #4a28a8;
}

/* Контейнер для заголовка и картинки (ПК версия - в строку) */
.modal-header-with-image {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
    align-items: flex-start;
}

.modal-header-content {
    flex: 1;
}

.modal-image {
    width: 280px;
    height: auto;
    border-radius: 24px;
    object-fit: cover;
    flex-shrink: 0;
}

/* Заголовок */
.research-modal-title {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 1.3;
    text-transform: uppercase;
    color: #1D2023;
    margin: 0 0 16px 0;
}

/* Дата */
.research-date {
    font-family: 'MTS Compact', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #9095A7;
    margin-bottom: 40px;
}

.research-date::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('../images/icons/shape.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 8px;
    vertical-align: middle;
}

/* Гипотеза */
.research-hypothesis {
    margin-bottom: 48px;
}

.research-hypothesis h3 {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #1D2023;
    margin: 0 0 24px 0;
}

.hypothesis-group {
    background: #F6F7F9;
    border-radius: 32px;
    padding: 32px 40px;
    margin-bottom: 32px;
}

.hypothesis-group .hypothesis-label {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.hypothesis-group.negative .hypothesis-label {
    color: #EA3C3A;
}

.hypothesis-group.positive .hypothesis-label {
    color: #6034D1;
}

.hypothesis-group .hypothesis-desc {
    font-family: 'MTS Compact', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #1D2023;
}

/* Статистика */
.stats-title {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 18px;
    text-transform: initial;
    color: #1D2023;
    margin-bottom: 24px;
}

/* Контейнер для двух блоков (ПК - в строку) */
.stats-wrapper {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
    align-items: stretch;
}

/* Блок stat-item.total с чёрным фоном - на ПК занимает 1/3 */
.stat-item-total-wrapper {
    background: #1D2023;
    border-radius: 32px;
    padding: 32px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.stat-item-total-wrapper .stat-item {
    text-align: center;
}

.stat-item-total-wrapper .stat-value {
    color: #FFFFFF;
    font-size: 48px;
}

.stat-item-total-wrapper .stat-label {
    color: rgba(255, 255, 255, 0.7);
}

.stat-item-total-wrapper .total-icon {
    width: 64px;
    height: 64px;
    background: url('../images/icons/hypothesis_total.svg') no-repeat center center;
    background-size: 64px 64px;
}

.stat-item-total-wrapper .total-content {
    text-align: left;
}

/* Серый блок для positive и negative - на ПК занимает 2/3 */
.research-stats {
    background: #F6F7F9;
    border-radius: 32px;
    padding: 32px 40px;
}

.stats-numbers {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.stat-item {
    flex: 1;
    text-align: center;
}

.stat-value {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1.1;
    color: #1D2023;
    display: block;
    margin-bottom: 8px;
}

.stat-label {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    color: #9095A7;
}

.stat-item.positive .stat-value {
    color: #BBEE9A;
}

.stat-item.negative .stat-value {
    color: #EA3C3A;
}

/* Нижний баннер */
.research-modal-footer {
    padding: 0 48px 48px 48px;
    flex-shrink: 0;
}

.footer-banner {
    position: relative;
    width: 100%;
    background: #BBEE9A;
    border-radius: 32px;
    overflow: hidden;
}

.footer-banner::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -30%;
    width: 160%;
    height: 160%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 80%);
    pointer-events: none;
}

.banner-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 48px;
    flex-wrap: wrap;
    gap: 20px;
}

.banner-text {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 28px;
    text-transform: uppercase;
    color: #1D2023;
}

/* ПК версия (≥769px) */
@media (min-width: 769px) {
    .stats-wrapper {
        flex-direction: row;
    }
    
    .stat-item-total-wrapper {
        flex: 0 0 calc(33.333% - 16px);
        min-width: 180px;
    }
    
    .research-stats {
        flex: 1;
    }
    
    .footer-banner {
        height: 95px;
    }
}

/* Мобильная версия (≤768px) */
@media (max-width: 768px) {
    .research-modal-content {
        max-height: 95vh;
    }
    
    .modal-header-with-image {
        flex-direction: column;
        gap: 20px;
    }
    
    .modal-image {
        width: 100%;
        max-width: 100%;
        order: -1;
    }
    
    .research-modal-body {
        padding: 24px 20px 24px;
    }
    
    .research-modal-title {
        font-size: 24px;
    }
    
    .research-date {
        margin-bottom: 20px;
    }
    
    .research-hypothesis h3 {
        font-size: 20px;
    }
    
    .hypothesis-group {
        padding: 24px 20px;
    }
    
    .hypothesis-group .hypothesis-desc {
        font-size: 14px;
    }
    
    .stats-title {
        font-size: 16px;
        margin-bottom: 16px;
    }
    
    .stats-wrapper {
        flex-direction: column;
        gap: 20px;
    }
    
    .stat-item-total-wrapper {
        padding: 24px 20px;
        justify-content: center;
    }
    
    .stat-item-total-wrapper .total-icon {
        width: 48px;
        height: 48px;
        background-size: 48px 48px;
    }
    
    .stat-item-total-wrapper .stat-value {
        font-size: 36px;
    }
    
    .research-stats {
        padding: 24px 20px;
    }
    
    .stats-numbers {
        flex-direction: row;
        justify-content: center;
        gap: 30px;
    }
    
    .stat-value {
        font-size: 36px;
    }
    
    .research-modal-footer {
        padding: 0 20px 24px 20px;
    }
    
    .footer-banner {
        height: auto;
        min-height: 80px;
    }
    
    .banner-content {
        padding: 16px 20px;
    }
    
    .banner-text {
        font-size: 16px;
        text-align: center;
    }
}



/* ========== ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ДЛЯ МОДАЛЬНОГО ОКНА ДЕТАЛЕЙ ========== */

/* Блок с пунктами исследования */
.research-points {
    margin-bottom: 40px;
}

.research-points h3 {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    text-transform: uppercase;
    color: #1D2023;
    margin: 0 0 20px 0;
}

.points-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.point-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.point-number {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #6034D1;
    min-width: 32px;
}

.point-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9095A7;
    margin-top: 4px;
}

.point-content {
    flex: 1;
}

.point-content p {
    font-family: 'MTS Compact', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #1D2023;
    margin: 0;
}

/* Детальный прогресс-бар */
.research-progress-detail {
    margin-top: 24px;
    padding: 20px;
    background: #F6F7F9;
    border-radius: 24px;
}

.research-progress-detail .progress-bar-container {
    position: relative;
    width: 100%;
    height: 12px;
    margin-bottom: 12px;
}

.research-progress-detail .progress-bar-bg {
    position: absolute;
    width: 100%;
    height: 12px;
    background: #E6E8ED;
    border-radius: 40px;
}

.research-progress-detail .progress-bar-fill {
    position: absolute;
    height: 12px;
    background: linear-gradient(96.96deg, #CEC4FF 10.88%, #5522C4 99.97%);
    border-radius: 40px;
    top: 0;
    left: 0;
}

.research-progress-detail .progress-stats-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.research-progress-detail .progress-numbers {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #1D2023;
}

.research-progress-detail .stats-percent-block {
    display: flex;
    align-items: center;
    gap: 8px;
}

.research-progress-detail .stats-percent {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 32px;
    color: #1D2023;
}

.research-progress-detail .stats-label {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    color: #9095A7;
}

/* Мобильная адаптация */
@media (max-width: 768px) {
    .research-points h3 {
        font-size: 18px;
    }
    
    .point-number {
        font-size: 12px;
        min-width: 28px;
    }
    
    .point-content p {
        font-size: 13px;
    }
    
    .research-progress-detail {
        padding: 16px;
    }
    
    .research-progress-detail .progress-numbers {
        font-size: 12px;
    }
    
    .research-progress-detail .stats-percent {
        font-size: 22px;
        line-height: 26px;
    }
}

/* ========== МОДАЛЬНОЕ ОКНО УЧАСТИЯ В ИССЛЕДОВАНИИ ========== */
#researchParticipation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 20px;
    overflow-y: hidden;
}

#researchParticipation.active {
    opacity: 1;
    visibility: visible;
}

#researchParticipation .modal-form-content {
    position: relative;
    width: 625px;
    max-width: 100%;
    background: #1D2023;
    border-radius: 15px;
    padding: 0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transform: translateY(20px);
    transition: transform 0.3s ease;
    overflow-y: auto;
    max-height: 90vh;

    /* Стилизация скролла */
    scrollbar-width: thin;
    scrollbar-color: #6034D1 #E0E0E0;
}

#researchParticipation .modal-form-content::-webkit-scrollbar {
    width: 6px;
}

#researchParticipation .modal-form-content::-webkit-scrollbar-track {
    background: #E0E0E0;
    border-radius: 10px;
}

#researchParticipation .modal-form-content::-webkit-scrollbar-thumb {
    background: #6034D1;
    border-radius: 10px;
}

#researchParticipation.active .modal-form-content {
    transform: translateY(0);
}

/* Кнопка закрытия */
#researchParticipation .modal-form-close {
    position: sticky;
    top: 20px;
    left: calc(100% - 60px);
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    margin-bottom: -40px;
}

#researchParticipation .modal-form-close svg {
    width: 24px;
    height: 24px;
}

#researchParticipation .modal-form-close svg line {
    stroke: #FFFFFF;
    transition: stroke 0.3s ease;
}

#researchParticipation .modal-form-close:hover svg line {
    stroke: #F570A3;
}

/* Заголовок формы */
#researchParticipation .form-title {
    width: 542px;
    max-width: 90%;
    margin: 0 auto;
    padding-top: 60px;
    font-family: 'Rooftop', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
}

/* Форма */
#researchParticipation .consultation-form {
    width: 100%;
    padding: 40px 40px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Поля формы */
#researchParticipation .form-field {
    position: relative;
    width: 517px;
    max-width: 100%;
    margin-bottom: 30px;
}

#researchParticipation .field-label {
    position: absolute;
    left: 0;
    top: -20px;
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 10px;
    line-height: 14px;
    text-transform: uppercase;
    color: #FFFFFF;
    opacity: 0.5;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Красная звездочка для обязательных полей */
#researchParticipation .field-label.required::after {
    content: '*';
    color: #FF0000;
    font-size: 14px;
    font-weight: bold;
    margin-left: 2px;
    opacity: 1;
}

/* Стили для полей с ошибкой валидации */
#researchParticipation .form-field.error .field-label {
    color: #FF0000;
    opacity: 1;
}

#researchParticipation .form-field.error .field-input,
#researchParticipation .form-field.error .field-textarea {
    border-color: #FF0000;
}

#researchParticipation .form-field.error .field-input:focus,
#researchParticipation .form-field.error .field-textarea:focus {
    border-color: #FF0000;
}

#researchParticipation .field-input {
    width: 100%;
    height: 50px;
    background: transparent;
    border: none;
    border-bottom: 0.5px solid #FFFFFF;
    font-family: 'MTS Compact', sans-serif;
    font-size: 16px;
    color: #FFFFFF;
    padding: 0 0 10px 0;
    outline: none;
    transition: border-color 0.3s ease;
}

#researchParticipation .field-input:focus {
    border-bottom-color: #F570A3;
}

#researchParticipation .field-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-size: 14px;
}

/* Поле textarea */
#researchParticipation .textarea-field {
    margin-bottom: 40px;
}

#researchParticipation .field-textarea {
    width: 100%;
    height: 104px;
    background: transparent;
    border: 1px solid #FFFFFF;
    border-radius: 11px;
    font-family: 'MTS Compact', sans-serif;
    font-size: 16px;
    color: #FFFFFF;
    padding: 15px;
    outline: none;
    resize: none;
    transition: border-color 0.3s ease;
}

#researchParticipation .field-textarea:focus {
    border-color: #F570A3;
}

#researchParticipation .field-textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Группа radio кнопок */
#researchParticipation .form-radio-group {
    width: 517px;
    max-width: 100%;
    margin-bottom: 30px;
}

#researchParticipation .radio-group-label {
    display: block;
    font-family: 'MTS Wide', sans-serif;
    font-size: 11px;
    line-height: 15px;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-bottom: 15px;
}

#researchParticipation .radio-group-label.required::after {
    content: '*';
    color: #FF0000;
    font-size: 14px;
    font-weight: bold;
    margin-left: 4px;
}

#researchParticipation .radio-options {
    display: flex;
    gap: 40px;
    align-items: center;
}

#researchParticipation .radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
}

#researchParticipation .radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

#researchParticipation .radio-custom {
    width: 11px;
    height: 11px;
    border: 0.5px solid #FFFFFF;
    border-radius: 50%;
    position: relative;
    transition: all 0.2s ease;
}

#researchParticipation .radio-input:checked+.radio-custom::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 5px;
    height: 5px;
    background: #F570A3;
    border-radius: 50%;
}

#researchParticipation .radio-input:checked+.radio-custom {
    border-color: #F570A3;
}

#researchParticipation .radio-text {
    font-family: 'MTS Wide', sans-serif;
    font-size: 12px;
    line-height: 17px;
    text-transform: uppercase;
    color: #FFFFFF;
}

/* Информационное сообщение */
#researchParticipation .form-info {
    width: 503px;
    max-width: 100%;
    font-family: 'MTS Wide', sans-serif;
    font-size: 11px;
    line-height: 15px;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 20px 0 30px;
    text-align: left;
}

/* Чекбокс согласия */
#researchParticipation .form-checkbox-group {
    width: 517px;
    max-width: 100%;
    margin: 20px 0 30px;
}

#researchParticipation .checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    position: relative;
}

#researchParticipation .checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

#researchParticipation .checkbox-custom {
    width: 11px;
    height: 11px;
    border: 0.5px solid #FFFFFF;
    border-radius: 2px;
    position: relative;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.2s ease;
}

#researchParticipation .checkbox-input:checked+.checkbox-custom {
    background: #F570A3;
    border-color: #F570A3;
}

#researchParticipation .checkbox-input:checked+.checkbox-custom::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 1px;
    width: 3px;
    height: 6px;
    border: solid white;
    border-width: 0 1px 1px 0;
    transform: rotate(45deg);
}

#researchParticipation .checkbox-text {
    font-family: 'MTS Compact', sans-serif;
    font-size: 11px;
    line-height: 15px;
    color: #FFFFFF;
    flex: 1;
}

/* Стили для полей с ошибкой */
#researchParticipation .form-radio-group.error .radio-group-label {
    color: #FF0000;
    opacity: 1;
}

#researchParticipation .form-radio-group.error .radio-custom {
    border-color: #FF0000;
}

#researchParticipation .form-checkbox-group.error .checkbox-custom {
    border-color: #FF0000;
}

#researchParticipation .form-checkbox-group.error .checkbox-text {
    color: #FF0000;
}

/* Кнопка отправки */
#researchParticipation .form-submit-btn {
    width: 261px;
    height: 52px;
    background: linear-gradient(117.6deg, #EA3C3A -36.29%, #FDA6C6 48.51%, #E86998 115.92%, #9A76D7 171.17%);
    border-radius: 50px;
    border: none;
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    text-transform: uppercase;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
}

#researchParticipation .form-submit-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(234, 60, 58, 0.3);
}

/* Медиа-запросы для мобильных устройств */
@media (max-width: 768px) {
    #researchParticipation .modal-form-content {
        width: 100%;
        max-width: 400px;
    }

    #researchParticipation .form-title {
        font-size: 16px;
        line-height: 22px;
        width: 100%;
        padding: 50px 20px 0;
    }

    #researchParticipation .consultation-form {
        padding: 30px 20px 40px;
    }

    #researchParticipation .form-radio-group,
    #researchParticipation .form-checkbox-group,
    #researchParticipation .form-info {
        width: 100%;
    }

    #researchParticipation .radio-options {
        gap: 20px;
    }

    #researchParticipation .checkbox-text {
        font-size: 10px;
        line-height: 14px;
    }

    #researchParticipation .form-submit-btn {
        width: 100%;
        max-width: 261px;
    }
}

/* ========== ГЛОБАЛЬНЫЙ АУДИОПЛЕЕР ========== */
.global-audio-player {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    z-index: 10000;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: translateY(150%);
    opacity: 0;
    display: block !important;
}

.global-audio-player.active {
    transform: translateY(0);
    opacity: 1;
}

.audio-player-container {
    max-width: 500px;
    margin: 0 auto;
    background: linear-gradient(135deg, #1D2023 0%, #2A2F33 100%);
    border-radius: 60px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.audio-player-inner {
    padding: 12px 20px;
    position: relative;
}

.audio-player-info {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
    padding-left: 8px;
}

.audio-player-title {
    font-family: 'MTS Wide', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #FFFFFF;
    text-transform: uppercase;
}

.audio-player-artist {
    font-family: 'MTS Compact', sans-serif;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.audio-player-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.player-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #FFFFFF;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.player-btn:hover {
    color: #F570A3;
    transform: scale(1.05);
}

.play-pause-btn {
    background: rgba(255, 255, 255, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.play-pause-btn:hover {
    background: rgba(245, 112, 163, 0.2);
}

.player-progress-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.player-current-time,
.player-duration {
    font-family: 'MTS Compact', sans-serif;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    min-width: 40px;
}

.player-progress-bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}

.player-progress-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #745CF4, #F570A3);
    border-radius: 2px;
    position: relative;
    transition: width 0.1s linear;
}

.player-progress-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #FFFFFF;
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    right: -5px;
    opacity: 0;
    transition: opacity 0.2s ease;
    cursor: pointer;
}

.player-progress-bar:hover .player-progress-handle {
    opacity: 1;
}

.speed-btn,
.volume-btn {
    font-family: 'MTS Wide', sans-serif;
    font-size: 12px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    position: relative;
}

.speed-slider,
.volume-slider {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 8px;
    width: 100px;
    height: 4px;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    outline: none;
}

.speed-slider::-webkit-slider-thumb,
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: #F570A3;
    border-radius: 50%;
    cursor: pointer;
}

.close-player-btn {
    margin-left: 4px;
}

.close-player-btn:hover {
    color: #EA3C3A;
    transform: scale(1.05);
}

/* Мобильная адаптация */
@media (max-width: 768px) {
    .global-audio-player {
        left: 10px;
        right: 10px;
        bottom: 10px;
    }
    
    .audio-player-inner {
        padding: 10px 15px;
    }
    
    .audio-player-title {
        font-size: 12px;
    }
    
    .player-current-time,
    .player-duration {
        font-size: 10px;
        min-width: 35px;
    }
    
    .play-pause-btn,
    .speed-btn,
    .volume-btn {
        width: 32px;
        height: 32px;
    }
    
    .speed-slider,
    .volume-slider {
        width: 80px;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}


/* ========== СТРАНИЦА: финансовый потенциал (compatibility.html) ========== */

.finance-hero {
    padding: 0;
    background: url(../images/finance-hero.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-white);
    border-radius: 32px;
    margin: 0 32px;
    overflow: hidden;
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: center;
}

.finance-hero .hero-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
}

.finance-hero .calculator-content {
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 19px;
    padding: 20px 20px 15px;
    margin-bottom: 20px;
}

.finance-hero h1 {
    color: #1D2023;
    font-size: 32px;
    line-height: 38px;
    margin-top: 20px;
}

.finance-hero .hero-subtitle {
    font-family: 'MTS Wide', sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-dark);
    margin-bottom: 30px;
    opacity: 0.9;
}

.finance-hero .date-label {
    color: #1D2023;
}

.finance-hero .btn-calculate {
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: #000000;
    text-align: center;
    color: #ffffff;
    position: relative;
    padding: 10px 70px 10px 20px; /* Увеличил отступ справа, чтобы круги поместились */
    border: none;
    cursor: pointer;
}

.finance-hero .date-label {
    font-size: 16px;
    font-weight: 400;
}

/* Красный круг */
.finance-hero .btn-calculate::before {
    content: '';
    position: absolute;
    right: 35px; /* Сдвинул левее */
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-color: #eb001b;
    border-radius: 50%;
    z-index: 1;
}

/* Жёлтый круг */
.finance-hero .btn-calculate::after {
    content: '';
    position: absolute;
    right: 15px; /* Оставил ближе к краю */
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-color: #f79e1b;
    border-radius: 50%;
    z-index: 2;
    opacity: 0.85;
}

@media (max-width: 768px) {
    .finance-hero {
        position: relative;
        width: auto;
        min-height: auto; /* Убираем фиксированную высоту */
        height: auto; /* Автоматическая высота */
        margin: 0 10px;
        padding: 40px 0; /* Добавляем отступы сверху и снизу */
        border-radius: 32px;
        background: url(../images/finance-hero.png) no-repeat center;
        background-size: cover;
        display: block;
    }
    
    .finance-hero .calculator-content {
        min-height: auto;
    }

    .finance-hero .hero-content {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        display: block;
    }

    .finance-hero .hero-subtitle {
        display: none;
    }
    
    .finance-hero .date-label {
        order: 0;
        font-size: 14px;
    }

    .finance-hero h1 {
        position: relative;
        font-size: 20px;
        line-height: 22px;
        margin: 0 auto; /* Автоматические отступы слева и справа */
        max-width: 261px;
        text-transform: uppercase;
        z-index: 2;
        text-align: center; /* Выравнивание текста по центру */
    }

    .finance-hero .hero-benefits {
        position: absolute;
        left: 16px;
        bottom: 70px;
        font-family: 'MTS Wide', sans-serif;
        font-size: 16px;
        line-height: 18px;
        text-transform: uppercase;
        color: #FFFFFF;
        margin: 0;
        max-width: 228px;
        z-index: 2;
    }

    .finance-hero .btn-large {
        position: absolute;
        left: 0;
        right: 16px;
        bottom: 20px;
        width: auto;
        height: 42px;
        background: linear-gradient(94.25deg, #745CF4 -0.47%, #5528C7 128.92%);
        border-radius: 30px;
        font-size: 18px;
        line-height: 25px;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        border: none;
        padding: 0 20px;
    }
}



/* Убедитесь, что внутри #coin-canvas-wrapper канвас центрируется */
#coin-canvas-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

#coin-canvas-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Основной блок */
.finance-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 40px;
    gap: 60px;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 100%);
    border-radius: 30px;
}

/* Левая часть с текстом */
.finance-content {
    flex: 1;
    max-width: 550px;
}

.badge {
    display: inline-block;
    background: rgba(255, 215, 100, 0.15);
    border: 1px solid rgba(255, 215, 100, 0.3);
    border-radius: 30px;
    padding: 6px 18px;
    font-size: 12px;
    letter-spacing: 2px;
    color: #ffd764;
    margin-bottom: 24px;
    font-family: monospace;
}

.title {
    font-size: 52px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 16px 0;
    line-height: 1.2;
    text-transform: uppercase;
}

.subtitle {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 24px 0;
    letter-spacing: 1px;
}

.divider {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #ffd764, transparent);
    margin: 30px 0 25px 0;
}

.question {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px 0;
    line-height: 1.3;
}

.description {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 32px 0;
    line-height: 1.5;
}

.btn-primary2 {
    background: linear-gradient(135deg, #ffd764, #ffb347);*
    border: none;
    border-radius: 50px;
    padding: 14px 36px;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-primary2:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 215, 100, 0.3);
}

/* Правая часть с монеткой */
.coin-right {
    flex-shrink: 0;
}

#coin-canvas-wrapper {
    width: 400px;
    height: 400px;
    max-width: 90vw;
    max-height: 90vw;
}

/* Адаптация под планшеты */
@media (max-width: 900px) {
    .finance-block {
        flex-direction: column;
        text-align: center;
        padding: 40px 20px;
    }
    
    .finance-content {
        text-align: center;
    }
    
    .divider {
        margin-left: auto;
        margin-right: auto;
    }
    
    .title {
        font-size: 38px;
    }
    
    .question {
        font-size: 20px;
    }
}

/* Адаптация под мобильные */
@media (max-width: 550px) {
    .title {
        font-size: 28px;
    }
    
    .subtitle {
        font-size: 14px;
    }
    
    .question {
        font-size: 18px;
    }
    
    .description {
        font-size: 14px;
    }
}


/* ========================================
   ПОЛНЫЙ CSS ДЛЯ СЕКЦИИ С МОНЕТКОЙ
   (Левый диалог — изогнутый хвостик снизу, правый — сверху)
   ======================================== */

/* Контейнер всей секции */
.coin-section {
    background: white;
    border-radius: 32px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 1400px;
    margin: 20px 32px;
    padding: 40px 20px;
    overflow-x: visible;
}

/* Заголовок сверху по центру */
.coin-title {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 35px;
    text-align: center;
    margin-bottom: 40px;
    color: #1D2023;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Контейнер для блоков (десктопная сетка) */
.coin-blocks-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    flex-wrap: nowrap;
}

/* --- Левый блок - диалог с изогнутым хвостиком СНИЗУ --- */
.dialog-block {
    position: relative;
    margin-right: -60px;
    flex-shrink: 1;
    min-width: 0;
    z-index: 10;
}

/* Контейнер для картинки под диалогом */
.dialog-block-image {
    position: relative;
    margin-top: 20px;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.dialog-block-image img {
    width: 320px;
    height: auto;
    display: block;
    margin-bottom: 8px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}

.dialog-block-caption {
    font-family: 'MTS Wide', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    text-align: start;
    letter-spacing: 0.5px;
}

.dialog-svg-exact {
    position: relative;
    min-width: 0;
    width: 100%;
    max-width: 320px;
    background: linear-gradient(135deg, #EB001B, #FFD664);
    padding: 20px 25px;
    text-align: center;
    border-radius: 30px;
    opacity: 0.85;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

/* Контент поверх */
.dialog-svg-exact .dialog-content {
    position: relative;
    z-index: 2;
}

.dialog-text {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* Хвостик СНИЗУ для левого диалога (как комикс) */
.dialog-svg-exact::before {
    content: '';
    position: absolute;
    bottom: -20px;
    height: 28px;
    width: 80px;
    left: 200px;
    border-radius: 0 0 100%;
    transform: rotate(-45deg);
    box-shadow: 
        -40px 0 0 0 #fcba5a inset,
        -16px -2px 0 0 #fcba5a inset;
    z-index: 1;
}

/* --- Правый блок (текст + иконка + диалог) --- */
.right-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 1;
    min-width: 0;
    position: relative;
    z-index: 10;
    margin-left: -100px;
    transform: translateY(-140px);
}

/* Верхняя часть: иконка + текст в строку */
.right-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-top: 180px;
}

.right-icon {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #EB001B, #FFD664);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.right-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background-image: url('../images/icons/arrow_finance.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.right-text-block {
    text-align: left;
}

.right-title {
    font-family: 'MTS Wide', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #8B4513;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.right-text {
    font-family: 'MTS Wide', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #222;
    line-height: 1.2;
}

/* --- Правый диалог с хвостиком СВЕРХУ --- */
.right-dialog {
    position: relative;
    width: auto;
    margin-left: 70px;
}

.right-dialog-svg-exact {
    position: relative;
    display: inline-block;
    min-width: 200px;
    max-width: 320px;
    width: auto;
    background: #1D2023;
    padding: 20px 30px;
    text-align: center;
    border-radius: 30px;
}

/* Хвостик СВЕРХУ для правого диалога — теперь смотрит влево */
.right-dialog-svg-exact::before {
    content: '';
    position: absolute;
    top: -10px;
    height: 28px;
    width: 55px;
    right: 100px;
    border-radius: 0 100% 0 0;
    transform: rotate(55deg);
    box-shadow: 
        -14px 0 0 0 #1D2023 inset,
        -16px 2px 0 0 #1D2023 inset;
    background: transparent;
    z-index: 1;
}

/* Контент */
.right-dialog-svg-exact .right-dialog-content {
    position: relative;
    z-index: 2;
}

.right-dialog-text {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.4;
    color: #ffffff;
    margin-bottom: 0;
}

/* --- Блок с монеткой (центр) --- */
.coin-wrapper {
    flex-shrink: 0;
    position: relative;
    z-index: 5;
    transform: translateY(-40px);
}

#coin-canvas-wrapper {
    width: 450px !important;
    height: 450px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

canvas {
    max-width: 450px !important;
    max-height: 450px !important;
}

/* --- Адаптация для десктопа (1300px и меньше) --- */
@media (max-width: 1300px) {
    .coin-blocks-wrapper { gap: 10px; }
    #coin-canvas-wrapper { width: 380px !important; height: 380px !important; }
    canvas { max-width: 380px !important; max-height: 380px !important; }
    .right-header { margin-top: 160px; }
}

@media (max-width: 1100px) {
    #coin-canvas-wrapper { width: 320px !important; height: 320px !important; }
    canvas { max-width: 320px !important; max-height: 320px !important; }
    .right-header { margin-top: 140px; }
    .dialog-svg-exact { max-width: 280px; padding: 15px 20px; }
    .right-dialog-svg-exact { max-width: 220px; padding: 15px 20px; }
    .dialog-text { font-size: 16px; }
    .right-dialog-text { font-size: 11px; }
}

/* --- Мобильная версия (до 900px) --- */
@media (max-width: 900px) {
    .coin-section {
        margin: 10px 10px;
    }
    .coin-title {
        font-size: 20px;
        margin-bottom: 20px;
        order: 0;
    }
    
    .coin-blocks-wrapper {
        flex-direction: column;
        gap: 20px;
    }
    
    /* Порядок блоков на мобильных: */
    /* 1. Монетка */
    .coin-wrapper {
        order: 1;
        transform: translateY(0);
        margin-bottom: 20px;
    }
    
    /* 2. Левый блок (диалог + картинка) */
    .dialog-block {
        order: 2;
        margin-right: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    
    .dialog-svg-exact {
        max-width: 320px;
    }
    
    .dialog-block-image {
        display: flex;
        justify-content: center;
    }
    
    .dialog-block-image img {
        width: 200px;
    }
    
    /* 3. Правый блок */
    .right-container {
        order: 3;
        margin-left: 0;
        margin-top: 0;
        transform: translateY(0);
        align-items: center;
        width: 100%;
    }
    
    .right-header {
        margin-top: 0;
        justify-content: center;
        margin-left: 0;
        margin-bottom: 15px;
    }
    
    .right-icon {
        width: 60px;
        height: 60px;
    }
    
    .right-icon::before {
        width: 30px;
        height: 30px;
    }
    
    .right-title {
        font-size: 9px;
    }
    
    .right-text {
        font-size: 12px;
    }
    
    .right-dialog {
        margin-left: 0;
        display: flex;
        justify-content: center;
        width: 100%;
    }
    
    .right-dialog-svg-exact {
        max-width: 280px;
        padding: 15px 20px;
    }
    
    .right-dialog-text {
        font-size: 12px;
    }
    
    #coin-canvas-wrapper {
        width: 280px !important;
        height: 280px !important;
    }
    
    canvas {
        max-width: 280px !important;
        max-height: 280px !important;
    }
}

/* ========== МОДАЛЬНОЕ ОКНО ДЛЯ ФИНАНСОВОЙ ФОРМЫ ========== */
#financeModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 20px;
    overflow-y: auto;
}

#financeModal.active {
    opacity: 1;
    visibility: visible;
}

#financeModal .modal-content {
    position: relative;
    max-width: 740px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    background: #E6E8ED;
    border-radius: 32px;
    padding: 0 0 30px 0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transform: translateY(20px);
    transition: transform 0.3s ease;
    scrollbar-width: thin;
    scrollbar-color: #6034D1 #E0E0E0;
}

#financeModal .modal-content::-webkit-scrollbar {
    width: 6px;
}

#financeModal .modal-content::-webkit-scrollbar-track {
    background: #E0E0E0;
    border-radius: 10px;
}

#financeModal .modal-content::-webkit-scrollbar-thumb {
    background: #6034D1;
    border-radius: 10px;
}

#financeModal.active .modal-content {
    transform: translateY(0);
}

/* Кнопка закрытия */
#financeModal .modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: #6034D1;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

#financeModal .modal-close:hover {
    background: #4a28a8;
    transform: scale(1.1);
}

#financeModal .modal-close svg {
    width: 20px;
    height: 20px;
}

#financeModal .modal-close svg path {
    stroke: #FFFFFF;
}

/* Заголовок */
#financeModal .modal-header {
    padding: 30px 30px 0 30px;
    text-align: center;
}

#financeModal .modal-title {
    font-family: 'MTS Wide', sans-serif;
    font-size: 22px;
    line-height: 31px;
    font-weight: 500;
    text-transform: uppercase;
    color: #1D2023;
    margin: 0;
}

/* Дата рождения */
#financeModal .birthday {
    background: #1D2023;
    border-radius: 22px;
    padding: 15px 20px;
    margin: 20px 20px 0;
    color: #FFFFFF;
}

#financeModal .birthday-label {
    font-family: 'MTS Wide', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 5px;
}

#financeModal .birthday-value {
    font-family: 'MTS Wide', sans-serif;
    font-size: 24px;
    font-weight: 500;
}

/* Матрица */
#financeModal .matrices-section {
    margin: 20px;
}

#financeModal .matrix-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

#financeModal .matrix-badge {
    flex: 1;
    background: #FFFFFF;
    border: 1px solid #9095A7;
    border-radius: 30px;
    padding: 10px 15px;
    text-align: center;
}

#financeModal .matrix-text {
    font-family: 'MTS Wide', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #1D2023;
}

#financeModal .gender-stack {
    width: 40px;
    height: 40px;
    background: #6034D1;
    border-radius: 50%;
    background-image: url('../images/icons/copy.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    cursor: pointer;
}

/* Результаты характеристик */
#financeResult {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.finance-result-item {
    background: rgba(96, 52, 209, 0.08);
    border-radius: 16px;
    padding: 15px 20px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.finance-result-left {
    flex-shrink: 0;
    min-width: 60px;
}

.finance-result-value {
    font-family: 'MTS Wide', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #6034D1;
}

.finance-result-right {
    flex: 1;
}

.finance-result-category {
    font-family: 'MTS Wide', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    color: #1D2023;
    display: block;
    margin-bottom: 6px;
}

.finance-result-description {
    font-family: 'MTS Compact', sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: #666;
    margin: 0;
}

/* Оффер баннер */
#financeModal .modal-offer-banner {
    margin: 20px 20px 0;
}

#financeModal .modal-offer-card {
    background: #BBEE9A;
    border-radius: 32px;
    padding: 20px 25px;
    position: relative;
    overflow: hidden;
}

#financeModal .modal-offer-card .offer-content {
    position: relative;
    z-index: 4;
}

#financeModal .modal-offer-card .offer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

#financeModal .modal-offer-card .offer-title {
    font-family: 'MTS Wide', sans-serif;
    font-size: 18px;
    line-height: 24px;
    color: var(--color-black);
    margin: 0;
    max-width: 70%;
}

#financeModal .modal-offer-card .offer-price {
    margin-top: 15px;
}

#financeModal .modal-offer-card .price-new {
    font-family: 'MTS Wide', sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: var(--color-black);
    margin-right: 15px;
}

#financeModal .modal-offer-card .price-old {
    font-family: 'MTS Wide', sans-serif;
    font-size: 16px;
    text-decoration: line-through;
    opacity: 0.7;
    color: #FFFFFF;
}

#financeModal .modal-offer-card .offer-badge {
    display: inline-block;
    background: #1D2023;
    border-radius: 26px;
    padding: 4px 12px;
    font-family: 'MTS Wide', sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    margin-left: 10px;
}

#financeModal .modal-offer-card .offer-decoration {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 250px;
    height: 250px;
    background: url('../images/offer-finance-banner.png') no-repeat right bottom;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}

#financeModal .modal-offer-card .modal-offer-btn {
    background: #000;
    border: none;
    border-radius: 30px;
    padding: 10px 20px;
    font-family: 'MTS Wide', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 15px;
    width: 40%;
    transition: all 0.3s ease;
}

#financeModal .modal-offer-card .modal-offer-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Медиа-запросы для мобильных */
@media (max-width: 768px) {
    #financeModal .modal-title {
        font-size: 18px;
    }
    
    .finance-result-item {
        flex-direction: column;
        gap: 10px;
    }
    
    .finance-result-left {
        min-width: auto;
    }
    
    .finance-result-value {
        font-size: 24px;
    }
    
    .matrix-text {
        font-size: 9px;
    }
}

.finance-error-notification {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #EA3C3A;
    color: white;
    padding: 12px 24px;
    border-radius: 30px;
    font-family: 'MTS Compact', sans-serif;
    font-size: 14px;
    z-index: 10001;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    animation: slideUp 0.3s ease;
}

.finance-error-notification .notification-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ========== СТРЕЛКИ ДЛЯ ОТЗЫВОВ ========== */
.reviews-active-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 20px;
    position: relative;
}

.reviews-arrow {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(96, 52, 209, 0.3);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: #6034D1;
    z-index: 5;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.reviews-arrow:hover {
    background: #6034D1;
    color: #FFFFFF;
    border-color: #6034D1;
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(96, 52, 209, 0.3);
}

.reviews-arrow:hover svg path {
    stroke: #FFFFFF;
}

.reviews-arrow:active {
    transform: scale(0.95);
}

.reviews-arrow svg {
    width: 20px;
    height: 20px;
    display: block;
}

.reviews-arrow svg path {
    stroke: #6034D1;
    transition: stroke 0.3s ease;
}

.reviews-arrow-prev {
    margin-right: 4px;
}

.reviews-arrow-next {
    margin-left: 4px;
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
    .reviews-active-content {
        gap: 12px;
        padding: 20px 10px;
    }
    
    .reviews-arrow {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }
    
    .reviews-arrow svg {
        width: 16px;
        height: 16px;
    }
    
    .active-review-text {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 576px) {
    .reviews-active-content {
        gap: 8px;
        padding: 15px 5px;
    }
    
    .reviews-arrow {
        width: 34px;
        height: 34px;
    }
    
    .reviews-arrow svg {
        width: 14px;
        height: 14px;
    }
}

/* ========== БАННЕР ДЛЯ РАСШИФРОВКИ ========== */
.transcript-banner {
    padding: 20px 0;
}

.transcript-banner .transcript-offer-card {
    position: relative;
    width: 100%;
    max-width: 1142px;
    height: 257px;
    margin: 0 auto;
    background: linear-gradient(90deg, #745CF4 0%, #5528C7 100%);
    border-radius: 22px;
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрируем по горизонтали */
    justify-content: center; /* Центрируем по вертикали */
    overflow: hidden;
}

/* Контент - центрируем */
.transcript-banner .offer-content {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрируем текст */
    text-align: center; /* Текст по центру */
    gap: 8px;
    max-width: 80%;
}

/* Заголовок "+1 расшифровка в подарок" */
.transcript-banner .offer-title {
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 25px;
    line-height: 35px;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
}

/* Подзаголовок "Скачать и рассчитать еще одну матрицу бесплатно" */
.transcript-banner .offer-subtitle {
    font-family: 'MTS Compact', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
}

/* Кнопка - центрируем */
.transcript-banner .btn-calculate-white {
    position: relative; /* Меняем с absolute на relative */
    z-index: 4;
    background: #FFFFFF;
    color: #1D2023;
    border: none;
    border-radius: 30px;
    padding: 9px 22px 8px;
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 31px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 188px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px; /* Отступ от текста */
}

.transcript-banner .btn-calculate-white:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
    background: #f5f5f5;
}

.transcript-banner .btn-calculate-white:active {
    transform: scale(0.98);
}

/* Декоративные звезды */
.transcript-banner .offer-decoration {
    position: absolute;
    right: 40px;
    bottom: -20px;
    width: 187px;
    height: 216px;
    background: url('../images/star.png') no-repeat center;
    background-size: contain;
    transform: rotate(15.11deg);
    z-index: 2;
    pointer-events: none;
    opacity: 0.8;
}

/* Дополнительная звезда слева */
.transcript-banner .transcript-offer-card::before {
    content: '';
    position: absolute;
    left: 20px;
    bottom: 40px;
    width: 147px;
    height: 169px;
    background: url('../images/star.png') no-repeat center;
    background-size: contain;
    transform: rotate(-28.52deg);
    z-index: 1;
    pointer-events: none;
    opacity: 0.6;
}

/* Третья звезда справа сверху */
.transcript-banner .transcript-offer-card::after {
    content: '';
    position: absolute;
    right: 180px;
    top: 30px;
    width: 77px;
    height: 89px;
    background: url('../images/star.png') no-repeat center;
    background-size: contain;
    transform: rotate(-13.13deg);
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
}

/* ========== АДАПТАЦИЯ ========== */

/* Планшеты */
@media (max-width: 992px) {
    .transcript-banner .transcript-offer-card {
        height: auto;
        min-height: 257px;
        padding: 40px 30px;
    }
    
    .transcript-banner .offer-content {
        max-width: 90%;
    }
    
    .transcript-banner .offer-decoration {
        right: 20px;
        width: 140px;
        height: 162px;
    }
    
    .transcript-banner .transcript-offer-card::before {
        width: 110px;
        height: 127px;
        left: 10px;
        bottom: 20px;
    }
    
    .transcript-banner .transcript-offer-card::after {
        width: 60px;
        height: 69px;
        right: 130px;
        top: 20px;
    }
}

/* Мобильные */
@media (max-width: 768px) {
    .transcript-banner .transcript-offer-card {
        padding: 30px 20px;
        min-height: 220px;
        border-radius: 18px;
    }
    
    .transcript-banner .offer-content {
        max-width: 100%;
    }
    
    .transcript-banner .offer-title {
        font-size: 20px;
        line-height: 28px;
    }
    
    .transcript-banner .offer-subtitle {
        font-size: 15px;
        line-height: 20px;
    }
    
    .transcript-banner .btn-calculate-white {
        font-size: 18px;
        height: 46px;
        min-width: 160px;
        padding: 8px 18px;
        margin-top: 16px;
    }
    
    .transcript-banner .offer-decoration {
        right: 10px;
        bottom: -10px;
        width: 100px;
        height: 115px;
        opacity: 0.6;
    }
    
    .transcript-banner .transcript-offer-card::before {
        width: 80px;
        height: 92px;
        left: 5px;
        bottom: 10px;
        opacity: 0.4;
    }
    
    .transcript-banner .transcript-offer-card::after {
        display: none;
    }
}

/* Маленькие телефоны */
@media (max-width: 480px) {
    .transcript-banner .transcript-offer-card {
        padding: 25px 16px;
        min-height: 190px;
    }
    
    .transcript-banner .offer-title {
        font-size: 17px;
        line-height: 24px;
    }
    
    .transcript-banner .offer-subtitle {
        font-size: 13px;
        line-height: 18px;
    }
    
    .transcript-banner .btn-calculate-white {
        font-size: 16px;
        height: 42px;
        min-width: 140px;
        padding: 6px 16px;
        margin-top: 12px;
    }
    
    .transcript-banner .offer-decoration {
        width: 70px;
        height: 81px;
    }
    
    .transcript-banner .transcript-offer-card::before {
        width: 60px;
        height: 69px;
    }
}

/* ========== МОДАЛЬНОЕ ОКНО ФИНАНСОВОЙ РАСШИФРОВКИ ========== */
#matrixFinanceFormModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 20px;
    overflow-y: hidden;
}

#matrixFinanceFormModal.active {
    opacity: 1;
    visibility: visible;
}

#matrixFinanceFormModal .modal-form-content {
    position: relative;
    width: 625px;
    max-width: 100%;
    background: #1D2023;
    border-radius: 15px;
    padding: 0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transform: translateY(20px);
    transition: transform 0.3s ease;
    overflow-y: auto;
    max-height: 90vh;

    /* Стилизация скролла */
    scrollbar-width: thin;
    scrollbar-color: #6034D1 #E0E0E0;
}

#matrixFinanceFormModal .modal-form-content::-webkit-scrollbar {
    width: 6px;
}

#matrixFinanceFormModal .modal-form-content::-webkit-scrollbar-track {
    background: #E0E0E0;
    border-radius: 10px;
}

#matrixFinanceFormModal .modal-form-content::-webkit-scrollbar-thumb {
    background: #6034D1;
    border-radius: 10px;
}

#matrixFinanceFormModal.active .modal-form-content {
    transform: translateY(0);
}

/* Кнопка закрытия */
#matrixFinanceFormModal .modal-form-close {
    position: sticky;
    top: 20px;
    left: calc(100% - 60px);
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    margin-bottom: -40px;
}

#matrixFinanceFormModal .modal-form-close svg {
    width: 24px;
    height: 24px;
}

#matrixFinanceFormModal .modal-form-close svg line {
    stroke: #FFFFFF;
    transition: stroke 0.3s ease;
}

#matrixFinanceFormModal .modal-form-close:hover svg line {
    stroke: #F570A3;
}

/* Заголовок формы */
#matrixFinanceFormModal .form-title {
    width: 542px;
    max-width: 90%;
    margin: 0 auto;
    padding-top: 60px;
    font-family: 'Rooftop', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
}

/* Форма */
#matrixFinanceTranscriptForm {
    width: 100%;
    padding: 40px 40px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Поля формы */
#matrixFinanceTranscriptForm .form-field {
    position: relative;
    width: 517px;
    max-width: 100%;
    margin-bottom: 30px;
}

#matrixFinanceTranscriptForm .field-label {
    position: absolute;
    left: 0;
    top: -20px;
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 10px;
    line-height: 14px;
    text-transform: uppercase;
    color: #FFFFFF;
    opacity: 0.5;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Красная звездочка для обязательных полей */
#matrixFinanceTranscriptForm .field-label.required::after {
    content: '*';
    color: #FF0000;
    font-size: 14px;
    font-weight: bold;
    margin-left: 2px;
    opacity: 1;
}

/* Стили для полей с ошибкой валидации */
#matrixFinanceTranscriptForm .form-field.error .field-label {
    color: #FF0000;
    opacity: 1;
}

#matrixFinanceTranscriptForm .form-field.error .field-input,
#matrixFinanceTranscriptForm .form-field.error .field-textarea {
    border-color: #FF0000;
}

#matrixFinanceTranscriptForm .form-field.error .field-input:focus,
#matrixFinanceTranscriptForm .form-field.error .field-textarea:focus {
    border-color: #FF0000;
}

#matrixFinanceTranscriptForm .field-input {
    width: 100%;
    height: 50px;
    background: transparent;
    border: none;
    border-bottom: 0.5px solid #FFFFFF;
    font-family: 'MTS Compact', sans-serif;
    font-size: 16px;
    color: #FFFFFF;
    padding: 0 0 10px 0;
    outline: none;
    transition: border-color 0.3s ease;
}

#matrixFinanceTranscriptForm .field-input.is-invalid {
    border-color: #FF0000 !important;
    background-color: rgba(255, 0, 0, 0.05) !important;
}

#matrixFinanceTranscriptForm .field-input.is-invalid::placeholder {
    color: #FF0000 !important;
}

#matrixFinanceTranscriptForm .field-input:focus {
    border-bottom-color: #F570A3;
}

#matrixFinanceTranscriptForm .field-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-size: 14px;
}

/* Поле textarea */
#matrixFinanceTranscriptForm .textarea-field {
    margin-bottom: 40px;
}

#matrixFinanceTranscriptForm .field-textarea {
    width: 100%;
    height: 104px;
    background: transparent;
    border: 1px solid #FFFFFF;
    border-radius: 11px;
    font-family: 'MTS Compact', sans-serif;
    font-size: 16px;
    color: #FFFFFF;
    padding: 15px;
    outline: none;
    resize: none;
    transition: border-color 0.3s ease;
}

#matrixFinanceTranscriptForm .field-textarea:focus {
    border-color: #F570A3;
}

#matrixFinanceTranscriptForm .field-textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Группа radio кнопок */
#matrixFinanceTranscriptForm .form-radio-group {
    width: 517px;
    max-width: 100%;
    margin-bottom: 30px;
}

#matrixFinanceTranscriptForm .radio-group-label {
    display: block;
    font-family: 'MTS Wide', sans-serif;
    font-size: 11px;
    line-height: 15px;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-bottom: 15px;
}

#matrixFinanceTranscriptForm .radio-group-label.required::after {
    content: '*';
    color: #FF0000;
    font-size: 14px;
    font-weight: bold;
    margin-left: 4px;
}

#matrixFinanceTranscriptForm .radio-options {
    display: flex;
    gap: 40px;
    align-items: center;
}

#matrixFinanceTranscriptForm .radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
}

#matrixFinanceTranscriptForm .radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

#matrixFinanceTranscriptForm .radio-custom {
    width: 11px;
    height: 11px;
    border: 0.5px solid #FFFFFF;
    border-radius: 50%;
    position: relative;
    transition: all 0.2s ease;
}

#matrixFinanceTranscriptForm .radio-input:checked + .radio-custom::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 5px;
    height: 5px;
    background: #F570A3;
    border-radius: 50%;
}

#matrixFinanceTranscriptForm .radio-input:checked + .radio-custom {
    border-color: #F570A3;
}

#matrixFinanceTranscriptForm .radio-text {
    font-family: 'MTS Wide', sans-serif;
    font-size: 12px;
    line-height: 17px;
    text-transform: uppercase;
    color: #FFFFFF;
}

/* Информационное сообщение */
#matrixFinanceTranscriptForm .form-info {
    width: 503px;
    max-width: 100%;
    font-family: 'MTS Wide', sans-serif;
    font-size: 11px;
    line-height: 15px;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 20px 0 30px;
    text-align: left;
}

/* Чекбокс согласия */
#matrixFinanceTranscriptForm .form-checkbox-group {
    width: 517px;
    max-width: 100%;
    margin: 20px 0 30px;
}

#matrixFinanceTranscriptForm .checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    position: relative;
}

#matrixFinanceTranscriptForm .checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

#matrixFinanceTranscriptForm .checkbox-custom {
    width: 11px;
    height: 11px;
    border: 0.5px solid #FFFFFF;
    border-radius: 2px;
    position: relative;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.2s ease;
}

#matrixFinanceTranscriptForm .checkbox-input:checked + .checkbox-custom {
    background: #F570A3;
    border-color: #F570A3;
}

#matrixFinanceTranscriptForm .checkbox-input:checked + .checkbox-custom::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 1px;
    width: 3px;
    height: 6px;
    border: solid white;
    border-width: 0 1px 1px 0;
    transform: rotate(45deg);
}

#matrixFinanceTranscriptForm .checkbox-text {
    font-family: 'MTS Compact', sans-serif;
    font-size: 11px;
    line-height: 15px;
    color: #FFFFFF;
    flex: 1;
}

#matrixFinanceTranscriptForm .checkbox-text a {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.3s ease;
}

#matrixFinanceTranscriptForm .checkbox-text a:hover {
    color: #CEC4FF;
}

/* Стили для чекбокса с ошибкой */
#matrixFinanceTranscriptForm .checkbox-input.is-invalid + .checkbox-custom {
    border-color: #FF0000 !important;
    box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.25);
}

#matrixFinanceTranscriptForm .checkbox-input.is-invalid ~ .checkbox-text {
    color: #FF0000 !important;
}

#matrixFinanceTranscriptForm .checkbox-input.is-invalid ~ .checkbox-text a {
    color: #FF0000 !important;
}

/* Стили для поля с ошибкой */
#matrixFinanceTranscriptForm .form-radio-group.error .radio-group-label {
    color: #FF0000;
    opacity: 1;
}

#matrixFinanceTranscriptForm .form-radio-group.error .radio-custom {
    border-color: #FF0000;
}

#matrixFinanceTranscriptForm .form-checkbox-group.error .checkbox-custom {
    border-color: #FF0000;
}

#matrixFinanceTranscriptForm .form-checkbox-group.error .checkbox-text {
    color: #FF0000;
}

/* Сообщения об ошибках */
#matrixFinanceTranscriptForm .field-error {
    color: #FF0000;
    font-family: 'MTS Compact', sans-serif;
    font-size: 12px;
    line-height: 16px;
    margin-top: 5px;
    display: block;
}

#matrixFinanceTranscriptForm .form-error-messages {
    width: 100%;
    max-width: 517px;
    margin-bottom: 20px;
}

#matrixFinanceTranscriptForm .alert-danger {
    color: #FF0000;
    padding: 12px 16px;
    border: 1px solid #FF0000;
    border-radius: 8px;
    background: rgba(255, 0, 0, 0.08);
    font-size: 14px;
    font-family: 'MTS Compact', sans-serif;
}

/* Кнопка отправки */
#matrixFinanceTranscriptForm .form-submit-btn {
    width: 261px;
    height: 52px;
    background: linear-gradient(117.6deg, #EA3C3A -36.29%, #FDA6C6 48.51%, #E86998 115.92%, #9A76D7 171.17%);
    border-radius: 50px;
    border: none;
    font-family: 'MTS Wide', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    text-transform: uppercase;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
}

#matrixFinanceTranscriptForm .form-submit-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(234, 60, 58, 0.3);
}

#matrixFinanceTranscriptForm .form-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Медиа-запросы для мобильных устройств */
@media (max-width: 768px) {
    #matrixFinanceFormModal .modal-form-content {
        width: 100%;
        max-width: 400px;
    }

    #matrixFinanceFormModal .form-title {
        font-size: 16px;
        line-height: 22px;
        width: 100%;
        padding: 50px 20px 0;
    }

    #matrixFinanceTranscriptForm {
        padding: 30px 20px 40px;
    }

    #matrixFinanceTranscriptForm .form-field,
    #matrixFinanceTranscriptForm .form-radio-group,
    #matrixFinanceTranscriptForm .form-checkbox-group,
    #matrixFinanceTranscriptForm .form-info,
    #matrixFinanceTranscriptForm .form-error-messages {
        width: 100%;
    }

    #matrixFinanceTranscriptForm .radio-options {
        gap: 20px;
    }

    #matrixFinanceTranscriptForm .checkbox-text {
        font-size: 10px;
        line-height: 14px;
    }

    #matrixFinanceTranscriptForm .form-submit-btn {
        width: 100%;
        max-width: 261px;
    }
}

/* Новый стиль для блоков с одной колонкой */
.result-item-full {
    background: rgba(96, 52, 209, 0.08);
    border-radius: 22px;
    padding: 30px 35px;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}

.result-item-full .result-content {
    width: 100%;
    max-width: 100%; /* ← гарантируем, что не выходит за пределы */
    box-sizing: border-box;
}

.result-item-full .result-category {
    font-family: 'MTS Wide', 'Segoe UI', Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    color: #6034D1;
    display: block;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(96, 52, 209, 0.2);
    width: 100%;
}

.result-item-full .result-description {
    font-family: 'MTS Compact', 'Segoe UI', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: #1D2023;
    width: 100%;
    max-width: 100%;
    word-wrap: break-word; /* ← перенос длинных слов */
    overflow-wrap: break-word; /* ← современный аналог */
}

.result-item-full .result-description b,
.result-item-full .result-description strong {
    color: #6034D1;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .result-item-full {
        padding: 20px 18px;
        width: 100%;
    }
    
    .result-item-full .result-category {
        font-size: 15px;
    }
    
    .result-item-full .result-description {
        font-size: 14px;
        line-height: 1.6;
    }
}


/* ========== БАННЕР В МОДАЛЬНОМ ОКНЕ ФИНАНСОВ ========== */

/* Родительский контейнер (как у обычного баннера) */
.modal-offer-banner.finance-banner {
    margin: 20px 22px 30px;
    padding: 0;
    width: auto;
}

/* Карточка баннера */
.modal-offer-card.finance-offer-card {
    position: relative;
    background: #BBEE9A;
    border-radius: 32px;
    padding: 25px 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    min-height: 200px;
    overflow: hidden;
    margin: 0;
}

/* Клиппер для кругов */
.finance-offer-card .offer-card-clipped {
    position: absolute;
    inset: 0;
    border-radius: 32px;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

/* Круг 1 - большой светлый */
.finance-offer-card .offer-card-clipped::before {
    content: '';
    position: absolute;
    pointer-events: none;
    width: 404px;
    height: 404px;
    right: 180px;
    top: -191px;
    background: linear-gradient(119.54deg, rgba(72, 149, 63, 0.14) -8.19%, rgba(97, 188, 79, 0.14) 87.05%);
    border-radius: 50%;
}

/* Круг 2 */
.finance-offer-card .offer-card-clipped::after {
    content: '';
    position: absolute;
    pointer-events: none;
    width: 344px;
    height: 344px;
    right: -50px;
    top: 92px;
    background: linear-gradient(119.54deg, rgba(72, 149, 63, 0.14) -8.19%, rgba(97, 188, 79, 0.14) 87.05%);
    border-radius: 50%;
    transform: rotate(150deg);
    filter: blur(1px);
}

/* Контент поверх кругов */
.finance-offer-card .offer-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 6px;
}

/* Заголовок */
.finance-offer-card .offer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 2;
}

.finance-offer-card .offer-title {
    font-family: 'MTS Wide', sans-serif;
    font-size: 20px;
    line-height: 26px;
    font-weight: 500;
    text-transform: uppercase;
    color: #1D2023;
    margin: 0;
    max-width: 80%;
}

/* Цена */
.finance-offer-card .offer-price {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.finance-offer-card .price-new {
    font-family: 'MTS Wide', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #1D2023;
}

.finance-offer-card .price-old {
    font-family: 'MTS Wide', sans-serif;
    font-size: 18px;
    font-weight: 400;
    text-decoration: line-through;
    color: rgba(29, 32, 35, 0.5);
}

.finance-offer-card .offer-badge {
    display: inline-block;
    background: #1D2023;
    border-radius: 26px;
    padding: 4px 14px;
    font-family: 'MTS Wide', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
}

/* Подзаголовок */
.finance-offer-card .offer-subtitle {
    font-family: 'MTS Compact', sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #1D2023;
    margin: 2px 0 0 0;
    max-width: 70%;
}

/* Кнопка */
.finance-offer-card .finance-offer-btn {
    position: relative;
    z-index: 3;
    background: #1D2023;
    color: #FFFFFF;
    border: none;
    border-radius: 30px;
    padding: 10px 30px;
    font-family: 'MTS Wide', sans-serif;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    width: auto;
    min-width: 180px;
    align-self: flex-start;
    margin-top: 4px;
}

.finance-offer-card .finance-offer-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    background: #2a2f33;
}

/* Кнопка с кругами (как в оригинале) */
.finance-offer-card .finance-offer-btn::before {
    content: '';
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background-color: #eb001b;
    border-radius: 50%;
    z-index: 1;
}

.finance-offer-card .finance-offer-btn::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background-color: #f79e1b;
    border-radius: 50%;
    z-index: 2;
    opacity: 0.85;
}

/* Декоративная звезда */
.finance-offer-card .offer-decoration {
    position: absolute;
    right: 20px;
    bottom: -10px;
    width: 120px;
    height: 120px;
    background: url('../images/star.png') no-repeat center;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
    opacity: 0.6;
}

/* ========== АДАПТАЦИЯ ========== */

/* Планшеты */
@media (max-width: 992px) {
    .modal-offer-banner.finance-banner {
        margin: 15px 16px 20px;
    }

    .modal-offer-card.finance-offer-card {
        padding: 20px 24px;
        min-height: 180px;
    }

    .finance-offer-card .offer-title {
        font-size: 18px;
        line-height: 24px;
        max-width: 75%;
    }

    .finance-offer-card .price-new {
        font-size: 24px;
    }

    .finance-offer-card .offer-subtitle {
        font-size: 13px;
        max-width: 65%;
    }

    .finance-offer-card .offer-decoration {
        width: 100px;
        height: 100px;
        right: 10px;
    }

    .finance-offer-card .offer-card-clipped::before {
        width: 300px;
        height: 300px;
        right: 120px;
        top: -150px;
    }

    .finance-offer-card .offer-card-clipped::after {
        width: 250px;
        height: 250px;
        right: -30px;
        top: 70px;
    }
}

/* Мобильные */
@media (max-width: 768px) {
    .modal-offer-banner.finance-banner {
        margin: 12px 12px 16px;
    }

    .modal-offer-card.finance-offer-card {
        padding: 18px 18px 20px;
        min-height: 220px;
        border-radius: 24px;
    }

    .finance-offer-card .offer-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .finance-offer-card .offer-title {
        font-size: 16px;
        line-height: 22px;
        max-width: 100%;
        order: 1;
        width: 100%;
    }

    .finance-offer-card .offer-price {
        order: 3;
        width: 100%;
        gap: 8px;
    }

    .finance-offer-card .price-new {
        font-size: 22px;
    }

    .finance-offer-card .price-old {
        font-size: 16px;
    }

    .finance-offer-card .offer-badge {
        font-size: 12px;
        padding: 3px 10px;
    }

    .finance-offer-card .offer-subtitle {
        font-size: 12px;
        max-width: 100%;
        order: 4;
    }

    .finance-offer-card .finance-offer-btn {
        width: 100%;
        max-width: 100%;
        font-size: 16px;
        padding: 10px 20px;
        text-align: center;
        order: 5;
        margin-top: 6px;
    }

    .finance-offer-card .finance-offer-btn::before {
        right: 30px;
        width: 24px;
        height: 24px;
    }

    .finance-offer-card .finance-offer-btn::after {
        right: 12px;
        width: 24px;
        height: 24px;
    }

    .finance-offer-card .offer-decoration {
        width: 70px;
        height: 70px;
        right: 0;
        bottom: 40px;
        opacity: 0.4;
    }

    .finance-offer-card .offer-card-clipped::before {
        width: 220px;
        height: 220px;
        right: 80px;
        top: -120px;
    }

    .finance-offer-card .offer-card-clipped::after {
        width: 180px;
        height: 180px;
        right: -20px;
        top: 50px;
    }
}

/* Маленькие телефоны */
@media (max-width: 480px) {
    .modal-offer-card.finance-offer-card {
        padding: 14px 14px 18px;
        min-height: 200px;
    }

    .finance-offer-card .offer-title {
        font-size: 14px;
        line-height: 19px;
    }

    .finance-offer-card .price-new {
        font-size: 20px;
    }

    .finance-offer-card .price-old {
        font-size: 14px;
    }

    .finance-offer-card .offer-badge {
        font-size: 10px;
        padding: 2px 8px;
    }

    .finance-offer-card .offer-subtitle {
        font-size: 11px;
    }

    .finance-offer-card .finance-offer-btn {
        font-size: 14px;
        padding: 8px 16px;
    }

    .finance-offer-card .finance-offer-btn::before {
        right: 25px;
        width: 20px;
        height: 20px;
    }

    .finance-offer-card .finance-offer-btn::after {
        right: 10px;
        width: 20px;
        height: 20px;
    }
}




/* === Располагаем select и input в одну строку === */
.form-field:has(.country-select) {
    display: flex;
    align-items: flex-end;   /* выравниваем по нижней линии */
    gap: 10px;
}

/* Стили для селекта страны (под тёмную модалку) */
.form-field .country-select {
    width: auto;
    min-width: 90px;
    height: 50px;                 /* как у input */
    background: transparent;
    border: none;
    /*border-bottom: 0.5px solid #FFFFFF;*/
    color: #FFFFFF;
    font-family: 'MTS Compact', sans-serif;
    font-size: 16px;
    padding: 0 20px 10px 0;
    outline: none;
    cursor: pointer;
    flex-shrink: 0;               /* не сжимается */
    appearance: none;
    -webkit-appearance: none;
    /* своя стрелочка */
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
}

.form-field .country-select:focus {
    border-bottom-color: #F570A3;
}

/* Input телефона растягивается на всё оставшееся место */
.form-field:has(.country-select) .field-input {
    flex: 1;
    width: auto;
}


/* ========== СТРЕЛКИ И СЧЁТЧИК НАД БЛОКОМ ОТЗЫВА (МОБИЛЬНЫЕ) ========== */

/* Контейнер для мобильной навигации - по умолчанию скрыт */
.reviews-navigation-mobile {
    display: none;
}

/* Счётчик отзывов - по умолчанию скрыт */
.reviews-counter {
    display: none;
}

/* ===== ДЛЯ ПК (≥769px) ===== */
@media (min-width: 769px) {
    /* Показываем стрелки внутри блока с текстом */
    .reviews-active-content .reviews-arrow {
        display: flex !important;
    }
    
    /* Скрываем мобильную навигацию */
    .reviews-navigation-mobile {
        display: none !important;
    }
}

/* ===== ДЛЯ МОБИЛЬНЫХ (≤768px) ===== */
@media (max-width: 768px) {
    /* Показываем мобильную навигацию */
    .reviews-navigation-mobile {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-bottom: 16px;
        padding: 0 10px;
        width: 100%;
    }
    
    /* Показываем счётчик на мобильных */
    .reviews-counter {
        display: inline-block !important;
        font-family: 'MTS Compact', sans-serif;
        font-size: 14px;
        color: #1D2023;
        opacity: 0.7;
        font-weight: 400;
        min-width: 60px;
        text-align: center;
    }
    
    .reviews-counter .current {
        font-weight: 600;
        color: #6034D1;
    }
    
    .reviews-counter .total {
        opacity: 0.5;
    }
    
    /* Скрываем стрелки внутри блока с текстом на мобильных */
    .reviews-active-content .reviews-arrow {
        display: none !important;
    }
    
    /* Показываем стрелки в мобильной навигации */
    .reviews-navigation-mobile .reviews-arrow {
        display: flex !important;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }
}