:root {
    --primary-color: #673EDA;
    --secondary-color: #A585FF;
    --accent-color: #FFC478;
    --light-gray: #F1F1F1;
    --text-color: #000;
    --muted-color: #6b6b6b;
    --radius-lg: 24px;
}

html {
    height: 100%;
    direction: ltr;
    color: var(--text-color);
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
}

body {
    font-family: "Manrope", sans-serif;
    font-feature-settings: 'liga' off;
    font-size: 16px;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: none;
    touch-action: manipulation;
    font-feature-settings: "liga" 0;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
    color: var(--text-color);
    background: #fff;
}

body.nav-open {
    overflow: hidden;
}

@media print {
    body {
        background: 0 0
    }
}

body ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    -webkit-transition: .3s background;
    transition: .3s background
}

body ::-webkit-scrollbar-thumb {
    background: #b6c1d2
}

body :hover::-webkit-scrollbar-thumb {
    background: #9da9bb
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: var(--primary-color);
    text-decoration: none;
}

/* ===== Utilities ===== */

.drop-shadow {
    filter: drop-shadow(0px 2px 18px rgba(103, 62, 218, 0.75));
}

.background-gradient {
    background: linear-gradient(205.16deg, rgba(181, 127, 255, 0.13) -0.01%, rgba(255, 255, 255, 0) 45.19%), linear-gradient(201.59deg, rgba(255, 255, 255, 0) 51.49%, rgba(181, 127, 255, 0.42) 96.47%), #F5F5F5;
}

.background-gradient-dual {
    background: linear-gradient(150.88deg, rgba(103, 62, 218, 0.1675) -1.2%, rgba(103, 62, 218, 0) 25.55%), #F1F1F1;
}

.bg-light-gray {
    background-color: var(--light-gray);
}

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

/* ===== Shared components (BEM, namespaced) ===== */

.c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 500;
    line-height: 100%;
    border-radius: 15px;
    height: 50px;
    padding: 11px 18px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.c-btn--link {
    padding: 0;
    margin: 0;
    font-size: 22px;
    height: fit-content;
}

.c-btn:focus {
    outline: none;
}

.c-btn--ghost,
.site-header__btn {
    color: var(--primary-color);
    border: 2px solid transparent;
    background: transparent;
}

.site-header__btn:hover {
    border-color: var(--primary-color);
}

.c-btn--primary,
.c-btn--primary:hover {
    color: #fff;
    border: 1px solid var(--primary-color);
    background: var(--primary-color);
}

.c-btn__icon {
    display: inline-block;
    flex: 0 0 auto;
}

.c-btn__icon--arrow,
.site-header__btn--ghost-icon {
    width: 14px;
    height: 8px;
    background-image: url("data:image/svg+xml,%3Csvg width='35' height='15' viewBox='0 0 35 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M34.7071 8.07112C35.0976 7.6806 35.0976 7.04743 34.7071 6.65691L28.3431 0.292946C27.9526 -0.0975785 27.3195 -0.0975785 26.9289 0.292946C26.5384 0.68347 26.5384 1.31664 26.9289 1.70716L32.5858 7.36401L26.9289 13.0209C26.5384 13.4114 26.5384 14.0446 26.9289 14.4351C27.3195 14.8256 27.9526 14.8256 28.3431 14.4351L34.7071 8.07112ZM0 7.36401V8.36401H34V7.36401V6.36401H0V7.36401Z' fill='%237653D9'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.c-btn__icon--arrow-big {
    width: 34px;
    height: 16px;
}

.site-header {
    padding: 39px 0;
    background: rgb(242 240 245 / 1%);
    backdrop-filter: blur(60px);
}

.site-header .navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='15' viewBox='0 0 20 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5H19' stroke='%237653D9' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M1 7.5H19' stroke='%237653D9' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M1 13.5H19' stroke='%237653D9' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.site-header__link {
    display: inline-block;
    font-size: 18px;
    font-weight: 400;
    color: var(--text-color);
}

.site-header__link:hover {
    color: var(--primary-color);
}

.site-header .navbar-nav {
    display: flex;
    gap: 30px;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Legacy selectors kept via .c-btn aliases above */

.site-header__btn {
    font-size: 19px;
}

.section__title {
    margin: 0;
    font-feature-settings: 'liga' off;
}

.section__title--h1 {
    font-size: 70px;
    font-weight: 500;
    line-height: 1.0385;
    letter-spacing: -0.01em;
    margin-bottom: 0;
    font-feature-settings: 'liga' off;
}

.section__title--h2 {
    font-size: 60px;
    font-weight: 500;
    line-height: 1.2667;
    letter-spacing: -0.03em;
}

.hero-section {
    padding: 168px 0 86px;
}

.hero-section__title {
    margin-top: 39px;
    margin-bottom: 23px;
}

.hero-section__text {
    font-weight: 500;
    font-size: 40px;
    line-height: 73%;
    letter-spacing: -0.03em;
    color: var(--primary-color);
}

.hero-section__paragraph,
.hero-section__pargraph {
    font-size: 17px;
    line-height: 1.9;
    margin: 41px 0;
    letter-spacing: 0.01em;
}

.hero-section__btn {
    font-size: 23px;
    border: 2px solid var(--primary-color);
    background: transparent;
    filter: drop-shadow(0px 2px 18px rgba(103, 62, 218, 0.75));
    height: 70px;
    padding: 30px;
    letter-spacing: -0.01em;
}

.hero-section__btn:hover {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #fff;
    filter: drop-shadow(0px 2px 6px 4px rgba(73, 73, 73, 0.45));
}

.hero-section__btn:hover .c-btn__icon--arrow {
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='8' viewBox='0 0 15 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.3536 4.03544C14.5488 3.84018 14.5488 3.52359 14.3536 3.32833L11.1716 0.146351C10.9763 -0.0489113 10.6597 -0.0489113 10.4645 0.146351C10.2692 0.341613 10.2692 0.658195 10.4645 0.853458L13.2929 3.68188L10.4645 6.51031C10.2692 6.70557 10.2692 7.02216 10.4645 7.21742C10.6597 7.41268 10.9763 7.41268 11.1716 7.21742L14.3536 4.03544ZM0 3.68188L0 4.18188L14 4.18188V3.68188V3.18188L0 3.18188L0 3.68188Z' fill='white'/%3E%3C/svg%3E%0A");
}

.hero-media {
    position: relative;
    width: 460px;
    height: 600px;
    max-width: 100%;
}

.hero-media__card {
    position: absolute;
    border-radius: 50px;
    overflow: hidden;
    color: #fff;
    background: #ddd;
}

.hero-media__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 0;
}

.hero-media__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(201.59deg,
            rgba(0, 0, 0, 0) 28.11%,
            rgba(181, 127, 255, 0.87) 96.47%);
    z-index: 1;
}

.hero-media__label {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 31px;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    z-index: 2;
}

.hero-media__card--rel {
    left: 0;
    top: 0;
    width: 220px;
    height: 300px;
}

.hero-media__card--soul {
    left: 0;
    top: 320px;
    width: 220px;
    height: 220px;
}

.hero-media__card--self {
    left: 240px;
    top: 60px;
    width: 220px;
    height: 220px;
}

.hero-media__card--ex {
    left: 240px;
    top: 300px;
    width: 220px;
    height: 300px;
}

/* ===== Sections (minimal baseline styling) ===== */

.stats-section,
.experts-section,
.best-reading-section,
.topics-section,
.video-section,
.steps-section,
.situation-section,
.faq-section {
    padding: 80px 0;
}

.experts-section {
    padding: 96px 0 104px;
}

.experts-section__head {
    gap: 42px;
    margin-bottom: 68px;
}

.experts-section__text {
    font-size: 20px;
    line-height: 1.8;
    margin: 0;
}

.experts-section__more--link-wrapper {
    margin-top: 74px;
}

.experts-section__more {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 60px;
}

.experts-section__more-avatars {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
}

.experts-section__more-avatar {
    width: 120px;
    height: 120px;
    flex: none;
    margin: 0 -10px;
    border-radius: 50%;
    position: relative;
}

.experts-section__more-avatar-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #C096E6;
    border: 8px solid #FFFFFF;
    overflow: hidden;
}

.experts-section__more-avatar img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.experts-section__more-avatar--count .experts-section__more-avatar-inner {
    background: linear-gradient(146.38deg, #A88DF3 26.66%, #7653D9 93.86%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.experts-section__more-count {
    font-weight: 500;
    font-size: 24px;
    line-height: 1;
    color: #FFFFFF;
}

.experts-section__link {
    color: #7653D9;
    font-weight: 500;
    gap: 15px;
}

.experts-section__link:hover {
    color: #000;
}

.experts-section__link:hover .c-btn__icon--arrow-big {
    background-image: url("data:image/svg+xml,%3Csvg width='35' height='15' viewBox='0 0 35 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M34.7071 8.07112C35.0976 7.6806 35.0976 7.04743 34.7071 6.65691L28.3431 0.292946C27.9526 -0.0975785 27.3195 -0.0975785 26.9289 0.292946C26.5384 0.68347 26.5384 1.31664 26.9289 1.70716L32.5858 7.36401L26.9289 13.0209C26.5384 13.4114 26.5384 14.0446 26.9289 14.4351C27.3195 14.8256 27.9526 14.8256 28.3431 14.4351L34.7071 8.07112ZM0 7.36401V8.36401H34V7.36401V6.36401H0V7.36401Z' fill='black'/%3E%3C/svg%3E%0A");
}

.experts-section__cards {
    margin-bottom: -20px;
}

.experts-section__col {
    margin-bottom: 20px;
}

.experts-section__card {
    position: relative;
    height: 100%;
    background: #fff;
    border: 0;
    border-radius: 30px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
}

.experts-section__avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: #f1f1f1;
}

.experts-section__person {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.experts-section__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
}

.experts-section__name {
    font-family: "Manrope", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 22px;
    letter-spacing: -0.03em;
    color: #7653D9;
}

.experts-section__rating {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 9px;
}

.experts-section__rating-value {
    font-family: "Manrope", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 22px;
    letter-spacing: -0.03em;
    color: #000;
}

.experts-section__star {
    width: 20px;
    height: 19px;
    color: var(--accent-color);
    flex: 0 0 auto;
}

.experts-section__role {
    font-family: "Manrope", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 15px;
    letter-spacing: -0.03em;
    color: #919191;
}

.experts-section__online {
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 14px;
    gap: 5px;
    background: #F3F3F3;
    border-radius: 16px;
}

.experts-section__online-icon {
    width: 16px;
    height: 16px;
    position: relative;
    flex: 0 0 16px;
}

.experts-section__online-icon::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #AAF78A;
}

.experts-section__online-icon::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #AAF78A;
}

.experts-section__online-text {
    font-family: "Manrope", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 12px;
    display: flex;
    align-items: center;
    letter-spacing: -0.03em;
    color: #919191;
}

.experts-section__divider {
    width: 100%;
    height: 1px;
    background: #DEDEDE;
}

.experts-section__stats {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 10px;
    width: 100%;
}

.experts-section__stat {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 13px;
    width: 100%;
}

.experts-section__stat-icon {
    width: 18px;
    height: 18px;
    color: #000;
    flex: 0 0 auto;
}

.experts-section__stat-text {
    font-family: "Manrope", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.125;
    letter-spacing: -0.03em;
    color: #7653D9;
}

.experts-section__desc {
    width: 100%;
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 27px;
    color: #101010;
    flex: 1 1 auto;
    margin-top: -5px;
}

.experts-section__cta {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-top: auto;
}

.experts-section__chat-btn {
    width: 100%;
    height: 58px;
    padding: 20px 30px;
    border-radius: 13px;
    font-size: 20px;
    line-height: 18px;
    gap: 10px;
}

.experts-section__chat-btn:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--primary-color);
}

.experts-section__chat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.experts-section__chat-icon svg {
    display: block;
}

.experts-section__price {
    width: 100%;
    font-family: "Manrope", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    color: #898989;
}

@media (min-width: 992px) {
    .experts-section__card {
        min-height: 549px;
    }
}

.clients-section {
    padding: 88px 0 165px;
}

.clients-section__head {
    margin-bottom: 66px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.clients-section__grid {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 30px;
}

.clients-section__review {
    width: 350px;
}

.clients-section__rating-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

.clients-section__rating {
    font-size: 29px;
    font-weight: 500;
    line-height: 1;
    color: var(--primary-color);
}

.clients-section__review {
    background: #7653D9;
    border-radius: 25px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 17px;
    color: #FFFFFF;
}

.clients-section__review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.clients-section__review-user {
    display: flex;
    align-items: center;
    gap: 8px;
}

.clients-section__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #D9D9D9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clients-section__avatar-initial {
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    color: #7653D9;
}

.clients-section__name {
    font-weight: 600;
    font-size: 16px;
}

.clients-section__review-stars {
    display: flex;
    align-items: center;
    gap: 4px;
}

.clients-section__review-stars svg {
    width: 15px;
    height: 15px;
}

.clients-section__review-body {
    display: flex;
    gap: 8px;
}

.clients-section__quote-mark {
    font-size: 60px;
    line-height: 1;
    color: var(--secondary-color);
    font-weight: 700;
    margin-top: -4px;
}

.clients-section__review-text {
    font-size: 15px;
    line-height: 23px;
}

.best-reading-section {
    padding: 83px 0 0;
}

.best-reading-section__content-wrapper {
    padding-bottom: 140px;
}

.best-reading-section__title {
    margin-bottom: 32px;
}

.best-reading-section>.container {
    display: flex;
    flex-direction: column;
    min-height: 520px;
}

.best-reading-section>.container>.row {
    flex: 1 1 auto;
    align-items: stretch;
}

.best-reading-section__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.best-reading-section__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0;
}

.best-reading-section__icon svg {
    display: block;
}

.best-reading-section__content {
    color: var(--muted-color);
}

.best-reading-section__item-title {
    font-size: 19px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 4px;
}

.best-reading-section__item-text {
    margin: 0;
    font-size: 17px;
    color: #000;
}

.topics-section__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 30px;
}

.best-reading-section__media {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.best-reading-section__image {
    min-width: 100%;
    height: auto;
    display: block;
    position: absolute;
    bottom: 0;
    right: -140px;
}

.topics-section {
    padding: 106px 0 153px;
}

.topics-section__title {
    margin: 0 0 65px;
}

.topics-section__title.section__title--h2 {
    font-size: 60px;
    line-height: 75px;
    letter-spacing: -1.8px;
    color: #000;
}

.topics-section__promos {
    display: grid;
    grid-template-columns: 255px 350px minmax(445px, 1fr);
    gap: 30px;
    margin-bottom: 96px;
}

.topics-section__promo-card {
    position: relative;
    border-radius: 30px;
    color: #fff;
}

.topics-section__promo-card--narrow {
    background: linear-gradient(154.87deg, #8A68EA 2.66%, #7653D9 98.46%);
}

.topics-section__promo-card--wide {
    background: transparent;
    border: 2px solid var(--accent-color);
    padding: 7px;
}

.topics-section__promo-inner {
    padding: 30px 24px 30px;
    min-height: 430px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.topics-section__promo-inner--wide {
    border-radius: 30px;
    border: 0;
    padding: 24px;
    background: #7653D9;
    min-height: 430px;
}

.topics-section__promo-icon {
    height: 120px;
    margin-bottom: 24px;
    display: flex;
    align-items: flex-end;
}

.topics-section__promo-icon img {
    width: auto;
    height: 100%;
    display: block;
    float: left;
    object-fit: contain;
}

.topics-section__promo-icon--hand {
    width: 71px;
}

.topics-section__promo-icon--crystals {
    width: 136px;
    height: 120px;
}

.topics-section__promo-icon--rewards {
    width: 136px;
    height: 120px;
    margin: 0 auto 24px;
}

.topics-section__promo-title {
    font-weight: 600;
    font-size: 35px;
    line-height: 48px;
    letter-spacing: -0.35px;
    color: var(--accent-color);
}

.topics-section__promo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    padding: 5px 14px;
    border-radius: 15px;
    background: var(--accent-color);
    font-weight: 700;
    font-size: 25px;
    line-height: 34px;
    letter-spacing: -0.75px;
    color: #7653D9;
}

.topics-section__promo-text {
    margin-top: 16px;
    font-size: 19px;
    line-height: 27px;
    letter-spacing: -0.57px;
}

.topics-section__promo-kicker {
    font-weight: 600;
    font-size: 35px;
    line-height: 48px;
    letter-spacing: -0.35px;
    color: var(--accent-color);
    margin-bottom: 12px;
}

.topics-section__promo-list {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.topics-section__promo-list-item {
    position: relative;
    padding-left: 29px;
    font-weight: 500;
    font-size: 19px;
    line-height: 27px;
    letter-spacing: -0.57px;
    color: var(--accent-color);
}

.topics-section__promo-list-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='15' viewBox='0 0 16 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.93696 1.23437C6.61907 -0.41115 8.94996 -0.411147 9.63207 1.23437L10.3031 2.85317C10.5946 3.55636 11.26 4.03311 12.0196 4.083L13.6971 4.19319C15.5132 4.31249 16.239 6.59843 14.8243 7.74348L13.6312 8.70916C13.0214 9.2027 12.7565 10.0072 12.9537 10.7664L13.3504 12.2942C13.802 14.033 11.9102 15.4392 10.3754 14.5057L8.82378 13.562C8.18534 13.1738 7.38369 13.1738 6.74525 13.562L5.19365 14.5057C3.65882 15.4392 1.76707 14.033 2.2186 12.2942L2.61534 10.7664C2.81252 10.0072 2.5476 9.2027 1.93783 8.70916L0.744744 7.74348C-0.669942 6.59843 0.0558312 4.31249 1.87194 4.19319L3.54946 4.083C4.30904 4.03311 4.97444 3.55635 5.26593 2.85316L5.93696 1.23437Z' fill='%23FFC478'/%3E%3C/svg%3E%0A");
}

.topics-section__card {
    position: relative;
    display: block;
    min-height: 200px;
    border-radius: 25px;
    padding: 41px 26px;
    background: #EDE6FF;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.topics-section__card-icon {
    width: 120px;
    height: 117px;
    display: block;
    flex: 0 0 auto;
    pointer-events: none;
    user-select: none;
}

.topics-section__card-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.topics-section__name {
    font-weight: 600;
    font-size: 27px;
    line-height: 33px;
    color: #000;
}

.topics-section__card-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    font-size: 15px;
    line-height: 33px;
    color: #673EDA;
}

.topics-section__card-link::after {
    content: "";
    width: 14px;
    height: 8px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.3536 4.03544C13.5488 3.84018 13.5488 3.52359 13.3536 3.32833L10.1716 0.146351C9.97634 -0.0489113 9.65975 -0.0489113 9.46449 0.146351C9.26923 0.341613 9.26923 0.658195 9.46449 0.853458L12.2929 3.68188L9.46449 6.51031C9.26923 6.70557 9.26923 7.02216 9.46449 7.21742C9.65975 7.41268 9.97634 7.41268 10.1716 7.21742L13.3536 4.03544ZM0 3.68188L0 4.18188L13 4.18188V3.68188V3.18188L0 3.18188L0 3.68188Z' fill='%23673EDA'/%3E%3C/svg%3E");
}

.video-section {
    padding: 83px 0 118px;
    background-color: var(--light-gray);
    background-image: url("../banners/video-pattern.svg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 1920px 100%;
}

.video-section__inner {
    max-width: 930px;
    margin: 0 auto;
}

.video-section .section__title--h2 {
    font-size: 60px;
    line-height: 79px;
    letter-spacing: -1.8px;
}

.video-section__text {
    color: var(--muted-color);
    margin: 0;
}

.video-section__cover {
    display: block;
    width: 100%;
    margin: 64px auto 0;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
}

.video-section__cover-media {
    display: block;
    overflow: hidden;
    position: relative;
    border-radius: 40px;
    background: #D9D9D9;
    box-shadow: 0px 2px 90px 0 rgba(60, 26, 154, 0.34);
    aspect-ratio: 830 / 490;
}

.video-section__cover-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.video-section__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-section__cover.is-playing .video-section__overlay {
    opacity: 0;
    pointer-events: none;
}

.video-section__cover.is-playing .video-section__cover-media img {
    opacity: 0;
}

.video-section__play {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 30px;
    background: var(--primary-color);
    box-shadow: 0px 2px 43px 4px rgba(60, 26, 154, 0.46);
}

.video-section__cover {
    position: relative;
}

.video-section__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}

.video-section__play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-35%, -50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid #fff;
}

.video-section__play-label {
    font-weight: 500;
    font-size: 19px;
    line-height: 30px;
    letter-spacing: -0.03em;
    color: #fff;
}

.steps-section {
    padding: 90px 0 114px;
}

.steps-section .section__title--h2 {
    font-size: 60px;
    line-height: 79px;
    letter-spacing: -0.01em;
}

.steps-section__grid {
    margin-top: 82px;
}

.steps-section__card {
    position: relative;
    border-radius: 30px;
    padding: 35px 71px 35px var(--steps-body-left);
    overflow: hidden;
    height: 100%;
}

.steps-section__num {
    font-weight: 300;
    font-size: 82px;
    line-height: 79px;
    letter-spacing: -0.03em;
    color: var(--primary-color);
    width: 180px;
    height: 180px;
    margin: -15px 0 0 -31px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--primary-color);
    border-radius: 50%;
}

.steps-section__body {
    display: flex;
    flex-direction: column;
    gap: 19px;
    padding: 29px 27px 64px 28px;
}

.steps-section__card-title {
    font-weight: 500;
    font-size: 29px;
    line-height: 32px;
    color: #7653D9;
}

.steps-section__card-text {
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 27px;
    letter-spacing: -0.16px;
    color: #101010;
}

.steps-section__cta {
    height: 49px;
    border: 0;
    border-radius: 15px;
    background: var(--accent-color);
    box-shadow: 0px 4px 13px var(--primary-color);
    font-weight: 500;
    font-size: 19px;
    line-height: 26px;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0;
    padding: 0;
}

.steps-section__cta:hover {
    background: #fff;
    color: var(--primary-color);
}

.steps-section__card--step1 {
    background: #EDE6FF;
}

.steps-section__card--step2 {
    background: #DFD3FF;
}

.steps-section__card--step3 {
    background: #C8B4FF;
}

.steps-section__card--step4 {
    background: #7653D9;
}

.steps-section__card--step4 .steps-section__num {
    border-color: #fff;
}

.steps-section__card--step4 .steps-section__num {
    color: #fff;
}

.steps-section__card--step4 .steps-section__card-title {
    font-size: 38px;
    line-height: 40px;
    letter-spacing: -0.03em;
    color: var(--accent-color);
}

.steps-section__card--step4 .steps-section__card-text {
    color: #fff;
}

.situation-section {
    padding: 81px 0 0;
    background-color: var(--light-gray);
}

.situation-section__image {
    position: absolute;
    bottom: 0;
    left: -140px;
    min-width: 100%;
    height: auto;
}

.situation-section__text {
    margin-top: 62px;
    font-size: 19px;
    font-weight: 400;
}

.situation-section__list {
    list-style: none;
    padding: 65px;
    background-color: #fff;
    border-radius: 25px;
    margin-top: 59px;
    display: flex;
    flex-direction: column;
    gap: 45px;
    margin-bottom: 127px;
    box-shadow: 0px 2px 90px 0 rgba(60, 26, 154, 0.34);
}

.situation-section__item {
    margin: 0;
    font-size: 19px;
    font-weight: 400;
    display: flex;
    gap: 25px;
}

.situation-section__item-icon {
    width: 43px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    flex: 0 0 auto;
    background-image: url("data:image/svg+xml,%3Csvg width='46' height='43' viewBox='0 0 46 43' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.95161 37.9128H12.8104C14.9838 37.9128 17.1805 38.1213 19.2956 38.5227C23.0372 39.2326 26.9765 39.3185 30.7564 38.7552C32.6202 38.4771 34.4524 38.0524 36.1111 37.315C37.6084 36.6495 39.4423 35.7113 40.6743 34.6604C41.9045 33.6111 43.1857 31.8938 44.0949 30.5512C44.8747 29.4002 44.4976 27.9879 43.2642 27.1301C41.8942 26.1775 39.8612 26.1777 38.4914 27.1307L34.6059 29.8338C33.1001 30.8815 31.4553 31.8458 29.4958 32.1338C29.2602 32.1684 29.0134 32.1999 28.7558 32.2274M28.7558 32.2274C28.6782 32.2357 28.5997 32.2437 28.5202 32.2512M28.7558 32.2274C29.0693 32.1656 29.3804 31.9874 29.6726 31.7528C31.0554 30.6411 31.1427 28.7677 29.9428 27.5264C29.6646 27.2384 29.3387 26.9983 28.9766 26.7992C22.9622 23.4954 13.6048 26.0117 7.95161 29.7041M28.7558 32.2274C28.6773 32.2429 28.5986 32.2512 28.5202 32.2512M28.5202 32.2512C27.3949 32.3575 26.0786 32.385 24.6179 32.2579M20.5532 4.19963C21.6424 2.39988 22.1872 1.5 23.0014 1.5C23.8156 1.5 24.3604 2.39988 25.4496 4.19963L25.7315 4.66524C26.0411 5.17667 26.1959 5.43238 26.4371 5.60111C26.6786 5.76984 26.9791 5.83247 27.5801 5.95774L28.1274 6.07177C30.2428 6.51257 31.3004 6.73298 31.552 7.47823C31.8037 8.2235 31.0826 9.00005 29.6406 10.5532L29.2674 10.955C28.8576 11.3963 28.6527 11.617 28.5607 11.89C28.4684 12.163 28.4994 12.4574 28.5613 13.0463L28.6176 13.5824C28.8357 15.6545 28.9449 16.6906 28.2859 17.1512C27.6271 17.6118 26.6369 17.1919 24.6563 16.352L24.1439 16.1347C23.5811 15.896 23.2996 15.7767 23.0014 15.7767C22.7032 15.7767 22.4218 15.896 21.8589 16.1347L21.3466 16.352C19.366 17.1919 18.3757 17.6118 17.7169 17.1512C17.0581 16.6906 17.1671 15.6545 17.3851 13.5824L17.4415 13.0463C17.5035 12.4574 17.5345 12.163 17.4423 11.89C17.3501 11.617 17.1452 11.3963 16.7354 10.955L16.3623 10.5532C14.9203 9.00005 14.1992 8.2235 14.4509 7.47823C14.7025 6.73298 15.7601 6.51257 17.8754 6.07177L18.4227 5.95774C19.0237 5.83247 19.3243 5.76984 19.5658 5.60111C19.807 5.43238 19.9618 5.17667 20.2714 4.66524L20.5532 4.19963ZM38.9771 12.7506C39.5219 11.8507 39.7941 11.4008 40.2013 11.4008C40.6085 11.4008 40.8807 11.8507 41.4255 12.7506L41.5664 12.9834C41.7212 13.2391 41.7986 13.367 41.9192 13.4513C42.0398 13.5357 42.1901 13.567 42.4906 13.6297L42.7643 13.6867C43.8219 13.9071 44.3508 14.0173 44.4766 14.3899C44.6024 14.7625 44.242 15.1508 43.5209 15.9274L43.3343 16.1283C43.1294 16.3489 43.0271 16.4593 42.9808 16.5958C42.9348 16.7323 42.9503 16.8795 42.9813 17.1739L43.0094 17.442C43.1184 18.478 43.173 18.996 42.8437 19.2263C42.5143 19.4566 42.0191 19.2467 41.0289 18.8267L40.7726 18.7182C40.4911 18.5988 40.3505 18.5392 40.2013 18.5392C40.0521 18.5392 39.9115 18.5988 39.6301 18.7182L39.3738 18.8267C38.3835 19.2467 37.8884 19.4566 37.559 19.2263C37.2296 18.996 37.2842 18.478 37.3932 17.442L37.4214 17.1739C37.4524 16.8795 37.4678 16.7323 37.4218 16.5958C37.3756 16.4593 37.2733 16.3489 37.0684 16.1283L36.8817 15.9274C36.1606 15.1508 35.8003 14.7625 35.9261 14.3899C36.0518 14.0173 36.5807 13.9071 37.6383 13.6867L37.912 13.6297C38.2126 13.567 38.3629 13.5357 38.4835 13.4513C38.6041 13.367 38.6815 13.2391 38.8363 12.9834L38.9771 12.7506ZM4.57732 12.7506C5.12198 11.8507 5.39431 11.4008 5.80146 11.4008C6.2086 11.4008 6.48094 11.8507 7.0256 12.7506L7.16651 12.9834C7.32129 13.2391 7.39867 13.367 7.51932 13.4513C7.63998 13.5357 7.79027 13.567 8.09081 13.6297L8.36444 13.6867C9.42211 13.9071 9.95095 14.0173 10.0768 14.3899C10.2026 14.7625 9.84205 15.1508 9.12101 15.9274L8.93447 16.1283C8.72956 16.3489 8.62711 16.4593 8.58103 16.5958C8.53494 16.7323 8.55042 16.8795 8.5814 17.1739L8.60961 17.442C8.71861 18.478 8.77314 18.996 8.44374 19.2263C8.11434 19.4566 7.61921 19.2467 6.62893 18.8267L6.37271 18.7182C6.0913 18.5988 5.9506 18.5392 5.80146 18.5392C5.65231 18.5392 5.51162 18.5988 5.23021 18.7182L4.97399 18.8267C3.98373 19.2467 3.48858 19.4566 3.15918 19.2263C2.82978 18.996 2.88431 18.478 2.99331 17.442L3.02152 17.1739C3.0525 16.8795 3.06798 16.7323 3.02188 16.5958C2.97581 16.4593 2.87336 16.3489 2.66845 16.1283L2.48191 15.9274C1.76087 15.1508 1.40034 14.7625 1.52616 14.3899C1.65197 14.0173 2.18081 13.9071 3.23847 13.6867L3.5121 13.6297C3.81265 13.567 3.96294 13.5357 4.08359 13.4513C4.20425 13.367 4.28165 13.2391 4.43641 12.9834L4.57732 12.7506ZM4.72645 25.2628C6.50757 25.2628 7.95144 26.5926 7.95144 28.233V38.1337C7.95144 39.7741 6.50757 41.104 4.72645 41.104C2.94534 41.104 1.50146 39.7741 1.50146 38.1337V28.233C1.50146 26.5926 2.94534 25.2628 4.72645 25.2628Z' stroke='%23C9B5FF' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E%0A");
}

.situation-section__item::marker {
    width: 43px;
    height: 40px;
}

.faq-section {
    padding: 80px 0;
    font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.faq-section__list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.site-footer {
    border-radius: 40px;
}

.site-footer__inner-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    padding: clamp(2.8125rem, 2.3363rem + 1.5873vw, 3.4375rem) 0 50px;
}

.site-footer__col-left {
    max-width: 142px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.site-footer__appstores-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.site-footer__col-right {
    max-width: 860px;
    display: flex;
    gap: 40px 20px;
}

.site-footer__col-menu {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: max-content;
}

.site-footer__title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.1765;
    letter-spacing: -0.01em;
    color: #000;
}

.site-footer__col-menu ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.site-footer__col-menu ul li a {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3333;
    letter-spacing: -0.01em;
    color: #000;
}

.site-footer__col-menu ul li a:hover {
    color: var(--primary-color);
}

.site-footer__inner-bottom {
    padding: 50px 0 16px;
    border-top: 1px solid #A7A7A7;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.pay-icon-wrapper {
    width: 100%;
    max-width: 270px;
}

.pay-icon-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.site-footer__copyright {
    font-size: 13px;
    line-height: 1.7695;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: #929292;
    text-align: center;
}

@media (min-width:768px) {

    .container,
    .container-md,
    .container-sm {
        max-width: 930px;
    }
}

@media (min-width: 1200px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1140px;
    }
}

@media (max-width: 1200px) {

    .hero-section {
        padding: 140px 0 72px;
    }

    .hero-section__text {
        font-size: 32px;
    }

    .hero-section__paragraph {
        font-size: 16px;
        margin: 30px 0;
    }

    .hero-media {
        width: 360px;
        height: 500px;
        margin: 32px 0 0;
    }

    .hero-media__card {
        width: 100%;
        max-width: 170px;

    }

    .hero-media__card--soul {
        top: 270px;
    }

    .hero-media__card--self {
        top: 52px;
    }

    .hero-media__card--ex {
        top: 242px;
    }

    .hero-media__card--rel,
    .hero-media__card {
        height: 250px;
    }

    .hero-media__card--soul,
    .hero-media__card--self {
        height: 170px;
    }

    .hero-media__card--self,
    .hero-media__card--ex {
        left: 190px;
    }

    .hero-media__label {
        left: 22px;
        right: 22px;
        font-size: 20px;
    }

    .best-reading-section__image {
        right: -260px;
    }

    .topics-section {
        padding: 90px 0 88px;
    }

    .topics-section__promos {
        margin-left: auto;
        margin-right: auto;
        grid-template-columns: 260px 288px minmax(314px, 1fr);
        gap: 30px;
        margin-bottom: 97px;
    }

    .topics-section__grid {
        max-width: 930px;
        margin-left: auto;
        margin-right: auto;
        gap: 10px 20px;
    }

    .topics-section__card {
        flex-direction: column;
    }
}

@media (min-width: 992px) {
    .site-header__offcanvas-top {
        display: none;
    }
}

@media (max-width: 992px) {
    .section__title--h1 {
        font-size: 55px;
    }

    .hero-section__paragraph {
        font-size: 18px;
    }

    .hero-media__label {
        font-size: 19px;
    }

    .hero-media__card {
        border-radius: 35px;
    }

    .experts-section__head {
        gap: 30px;
        margin-bottom: 69px;
    }

    .experts-section {
        padding: 72px 0 78px;
    }

    .experts-section__card {
        padding: 24px 28px 24px 30px;
        gap: 20px;
    }

    .experts-section__avatar {
        width: 80px;
        height: 80px;
    }

    .experts-section__meta {
        gap: 6px;
    }

    .experts-section__name {
        font-size: 18px;
    }

    .experts-section__rating {
        gap: 6px;
    }

    .experts-section__rating-value {
        font-size: 18px;
    }

    .experts-section__role {
        font-size: 14px;
    }

    .experts-section__online {
        gap: 3px;
        padding: 6px 14px;
    }

    .experts-section__online-text {
        font-size: 14px;
    }

    .experts-section__more {
        gap: 28px;
    }

    .experts-section__more-avatar {
        width: 100px;
        height: 100px;
    }

    .clients-section {
        padding: 58px 0 107px;
    }

    .clients-section__head {
        gap: 15px;
    }

    .best-reading-section {
        padding: 73px 0 0;
    }

    .best-reading-section__title {
        margin-bottom: 82px;
    }

    .best-reading-section__content-wrapper {
        padding-bottom: 123px;
    }

    .best-reading-section__item-title {
        margin-bottom: 1px;
    }

    .topics-section {
        padding: 87px 0 88px;
    }

    .topics-section__promos {
        margin-bottom: 97px;
        gap: 30px;
    }

    .topics-section__promo-inner {
        min-height: fit-content;
    }

    .topics-section__promo-title {
        font-size: 42px;
    }

    .topics-section__promo-text {
        font-size: 19px;
        margin-top: 8px;
    }

    .topics-section__promo-icon--crystals {
        margin-bottom: 21px;
    }

    .topics-section__promo-icon--rewards {
        margin: 0 auto 20px;
    }

    .topics-section__title {
        margin-bottom: 50px;
    }

    .topics-section__card-content {
        align-items: center;
    }

    .topics-section__name {
        font-size: 30px;
    }

    .topics-section__card {
        max-height: 260px;
        padding: 30px 18px;
    }

    .topics-section__card-icon {
        width: 116px;
        height: 114px;
    }

    .video-section {
        padding: 52px 0 95px;
    }

    .steps-section {
        padding: 47px 0 79px;
    }

    .steps-section__grid {
        margin-top: 62px;
        gap: 30px 0px;
    }

    .steps-section__card {
        display: flex;
        flex-direction: row;
    }

    .steps-section__num {
        width: 180px;
        height: 180px;
        flex-shrink: 0;
    }

    .steps-section__body {
        padding: 35px 71px 45px 25px;
    }

    .steps-section__cta {
        width: fit-content;
        padding: 12px 27px;
    }

    .situation-section {
        padding: 51px 0 0;
    }

    .situation-section__list {
        padding: 58px 96px 56px 51px;
        gap: 40px;
    }

    .faq-section {
        padding: 80px 0 41px;
    }

    .site-header .navbar {
        order: -1;
        padding: 0;
    }

    .site-header .navbar-collapse {
        position: fixed;
        left: 0;
        bottom: 0px;
        width: 100%;
        height: 100vh;
        min-height: 100vh;
        background: rgba(43, 36, 61, 0.8);
        z-index: 100;
        transition: 1ms linear;
        top: 0px;
    }

    .site-header .navbar-collapse:not(.show) .site-header__offcanvas {
        transform: translateX(-100%);
    }

    .site-header .navbar-collapse.show .site-header__offcanvas {
        transform: translateX(0);
    }

    .site-header__offcanvas {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 400px;
        background: #211838;
        padding: 30px 50px;
        transition: 300ms linear;
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .site-header__offcanvas-top {
        margin-bottom: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .site-header .navbar-nav {
        display: flex;
        gap: 40px;
    }

    .site-header .navbar-nav .nav-item a {
        color: #fff;
        font-size: 24px;
        position: relative;
    }

    .site-header .navbar-nav .nav-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }

    .site-header .navbar-nav .nav-item:after {
        content: '';
        position: absolute;
        right: 0;
        width: 11px;
        height: 20px;
        background-image: url("data:image/svg+xml,%3Csvg width='11' height='20' viewBox='0 0 11 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.322187 1.89663C-0.107396 1.46271 -0.107395 0.759361 0.322187 0.325439C0.751771 -0.10848 1.4481 -0.10848 1.87768 0.325439L10.6778 9.2144C11.1074 9.64832 11.1074 10.3517 10.6778 10.7856L1.87768 19.6746C1.4481 20.1085 0.751771 20.1085 0.322187 19.6746C-0.107396 19.2406 -0.107396 18.5373 0.322187 18.1034L8.34457 10L0.322187 1.89663Z' fill='white'/%3E%3C/svg%3E%0A");
    }

    .site-header__offcanvas-close {
        width: 22px;
        height: 22px;
        border: none;
        background: transparent url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.4065 28.9915L28.9923 30.4058L9.19327 10.6068L10.6075 9.19255L30.4065 28.9915Z' fill='white'/%3E%3Cpath d='M28.9921 9.19254L30.4063 10.6068L10.6073 30.4057L9.19312 28.9915L28.9921 9.19254Z' fill='white'/%3E%3C/svg%3E%0A");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        cursor: pointer;
        display: block;
    }

    .stats-section__grid,
    .clients-section__grid {
        gap: 10px;
    }

    .site-footer__logo {
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 768px) {

    .container,
    .container-sm {
        max-width: 690px;
    }

    .site-header {
        padding: 22px 0;
    }

    .section__title--h1 {
        font-size: 60px;
        line-height: 1.1;
    }

    .section__title--h2 {
        font-size: 50px;
        line-height: 1.25;
    }

    .hero-section {
        padding: 118px 0 60px;
    }

    .hero-section__title {
        margin-top: 24px;
        font-size: 40px;
    }

    .hero-section__text {
        font-size: 24px;
    }

    .hero-section__paragraph {
        font-size: 15px;
        margin: 22px 0;
    }

    .hero-section__btn {
        width: 100%;
        height: 58px;
        font-size: 18px;
    }

    .hero-media {
        max-width: 298px;
        height: 390px;
    }

    .hero-media__label {
        left: 16px;
        right: 16px;
        bottom: 22px;
        font-size: 18px;
    }

    .hero-media__card {
        width: 140px;
        height: 200px;
        border-radius: 32px;
    }

    .hero-media__card--rel {
        left: 0;
        top: 0;
    }

    .hero-media__card--soul {
        left: 0;
        top: 220px;
        height: 130px;
    }

    .hero-media__card--self {
        left: 150px;
        top: 30px;
        height: 130px;
    }

    .hero-media__card--ex {
        left: 150px;
        top: 170px;

    }

    .experts-section {
        padding: 42px 0;
    }

    .experts-section__head {
        margin-bottom: 42px;
        gap: 24px;
    }

    .experts-section__head .section__title--h2 br {
        display: none;
    }

    .experts-section__text {
        font-size: 17px;
        line-height: 1.6;
    }

    .experts-section__card {
        padding: 24px;
    }

    .experts-section__desc {
        font-size: 14px;
        line-height: 1.6;
    }

    .experts-section__more-avatar:nth-child(4),
    .experts-section__more-avatar:nth-child(5) {
        display: none;
    }

    .video-section {
        padding: 33px 0 66px;
        background-size: 1142px 476px;
    }


    .video-section .section__title--h2 {
        font-size: 30px;
        line-height: 42px;
        letter-spacing: -0.9px;
    }

    .video-section__cover {
        margin-top: 35px;
    }

    .video-section__cover-media {
        border-radius: 30px;
        box-shadow: 0px 2px 43px 4px rgba(60, 26, 154, 0.46);
        aspect-ratio: 510 / 301;
    }

    .video-section__play {
        width: 70px;
        height: 70px;
        border-radius: 30px;
    }

    .video-section__play::before {
        border-top-width: 7px;
        border-bottom-width: 7px;
        border-left-width: 12px;
    }

    .video-section__play-label {
        font-size: 14px;
        line-height: 30px;
        letter-spacing: -0.42px;
    }

    .steps-section {
        padding: 42px 0 79px;
    }

    .steps-section .section__title--h2 {
        font-size: 30px;
        line-height: 43px;
        letter-spacing: 0;
    }

    .steps-section__grid {
        margin-top: 33px;
    }

    .steps-section__card {
        padding: 0;
        flex-direction: column;
    }

    .steps-section__num {
        width: 120px;
        height: 120px;
        top: 5px;
        font-size: 60px;
    }

    .steps-section__body {
        gap: 18px;
        padding: 20px;
    }

    .steps-section__card-title {
        font-size: 24px;
        line-height: 29px;
    }

    .steps-section__card-text {
        font-size: 15px;
        letter-spacing: -0.15px;
    }

    .steps-section__card--step1 {
        min-height: 220px;
    }

    .steps-section__card--step2 {
        min-height: 240px;
    }

    .steps-section__card--step3 {
        min-height: 220px;
    }

    .steps-section__card--step4 {
        min-height: 220px;
        flex-direction: row;
    }

    .steps-section__card--step4 .steps-section__body {
        gap: 20px;
    }

    .steps-section__card--step4 .steps-section__body-content {
        display: flex;
        gap: 17px;
    }

    .steps-section__card--step4 .steps-section__card-title {
        font-size: 38px;
        line-height: 40px;
        letter-spacing: -0.03em;
    }

    .topics-section {
        padding: 40px 0 58px;
    }

    .topics-section__promos {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
    }

    .topics-section__promo-card--narrow {
        border-radius: 20px;
    }

    .topics-section__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .topics-section__promo-inner {
        padding: 30px 20px;
        gap: 12px;
        border-radius: 20px;
    }

    .topics-section__promo-icon {
        width: 100%;
        height: 100px;
        margin: 0;
        display: flex;
        justify-content: flex-start;
    }

    .topics-section__promo-body {
        margin-top: 2px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .topics-section__promo-title {
        font-size: 30px;
        line-height: 41px;
    }

    .topics-section__promo-text {
        margin-top: 0;
        font-size: 15px;
        line-height: 24px;
        letter-spacing: -0.45px;
    }

    .topics-section__promo-badge {
        margin-top: 0;
        padding: 3px 10px;
        border-radius: 10px;
        font-size: 23px;
        line-height: 31px;
        justify-self: end;
    }

    .topics-section__promo-title {
        grid-column: 1;
        grid-row: 1;
    }

    .topics-section__promo-text {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .topics-section__promo-card--wide {
        border-radius: 20px;
        padding: 7px;

    }

    .topics-section__promo-card--wide .topics-section__promo-inner {
        min-width: 200px;
    }

    .topics-section__promo-kicker {
        font-size: 30px;
        line-height: 31px;
        margin-bottom: 10px;
    }

    .topics-section__promo-list-item {
        font-size: 13px;
        line-height: 2.077;
        letter-spacing: -0.03em;
        padding-left: 28px;
    }

    .topics-section__promo-list-item::before {
        top: 6px;
        width: 15px;
        height: 15px;
    }

    .topics-section__title {
        margin: 0 0 45px;
    }

    .topics-section__title.section__title--h2 {
        font-size: 30px;
        line-height: 42px;
        letter-spacing: -0.03em;
    }

    .topics-section__promos {
        margin-bottom: 45px;
    }

    .topics-section__card {
        min-height: 230px;
        padding: 30px 21px;
        gap: 15px;
    }

    .topics-section__card-icon {
        width: 80px;
        height: 78px;
    }

    .topics-section__card-content {
        gap: 16px;
    }

    .topics-section__name {
        font-size: 20px;
        line-height: 23px;
    }

    .topics-section__card-link {
        font-size: 14px;
        line-height: 14px;
    }

    .best-reading-section__title {
        width: 80%;
        margin-bottom: 64px;
    }

    .best-reading-section__title br {
        display: none;
    }

    .best-reading-section__image {
        right: -360px;
    }

    .situation-section {
        padding: 41px 0;
    }

    .situation-section__text {
        margin-top: 26px;
    }

    .situation-section__image {
        position: relative;
        left: 0;
        width: 100%;
    }

    .situation-section__list {
        margin-top: 0;
        margin-bottom: 41px;
    }

    .faq-section {
        padding: 44px 0 66px;
    }

    .site-footer__inner-top {
        grid-template-columns: 1fr;
        padding-top: 45px;
    }

    .site-footer__col-left {
        max-width: 100%;
        align-items: center;
        gap: 20px;
    }

    .site-footer__appstores-links {
        flex-direction: row;
    }

    .site-footer__col-right {
        flex-wrap: wrap;
        max-width: 410px;
        margin: 0 auto;
        gap: 40px 10px;
    }

    .site-footer__col-menu {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
        max-width: calc(150px - 20px);
    }

    .site-footer__col-menu:last-child {
        max-width: 160px;
    }
}

@media (max-width: 578px) {

    .site-header__btn.c-btn--ghost,
    .site-header__btn--ghost {
        font-size: 0;
        gap: 0;
        width: 40px;
        height: 40px;
        padding: 0;
        border-color: var(--primary-color);
    }

    .hero-section {
        padding: 108px 0 50px;
    }

    .section__title--h1 {
        font-size: 32px;
    }

    .section__title--h2 {
        font-size: 30px;
    }

    .hero-section__text {
        font-size: 22px;
    }

    .hero-media {
        width: 190px;
        height: 258px;
    }

    .hero-media__card {
        width: 90px;
        height: 130px;
        border-radius: 15px;
    }

    .hero-media__card--rel {
        left: 0;
        top: 0;
    }

    .hero-media__card--soul {
        left: 0;
        top: 140px;
        height: 90px;
    }

    .hero-media__card--self {
        left: 100px;
        top: 20px;
    }

    .hero-media__card--ex {
        left: 100px;
        top: 164px;
        height: 130px;
    }

    .hero-media__label {
        left: 10px;
        right: 10px;
        bottom: 10px;
        font-size: 12px;
        max-width: 60%;
    }

    .experts-section .col-sm-6 {
        padding-right: 5px;
        padding-left: 5px;
    }

    .experts-section__col {
        margin-bottom: 10px;
    }

    .stats-section__grid,
    .clients-section__grid {
        grid-template-columns: 1fr;
    }

    .topics-section__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        max-width: 290px;
    }

    .topics-section__title.section__title--h2 {
        line-height: 38px;
    }

    .topics-section__card {
        padding-left: 10px;
        padding-right: 10px;
    }

    .video-section .section__title--h2 {
        line-height: 38px;
    }
}

@media (max-width: 480px) {
    .hero-media {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: flex;
        gap: 10px;
    }

    .hero-media__card {
        position: relative;
        left: 0;
        top: 0;
        width: calc(100% / 3);
        height: 90px;
        aspect-ratio: 1/1;
    }

    .hero-media__card--soul {
        top: 20px;
    }

    .hero-media__card--ex {
        display: none;
    }

    .hero-section__paragraph {
        margin: 53px 0 33px;
    }

    .experts-section__cards {
        padding: 0 10px;
    }

    .experts-section__col {
        margin-bottom: 10px;
        padding: 0 5px;
    }

    .experts-section__person {
        flex-direction: column;
    }

    .experts-section__card {
        padding: 16px 10px;
    }

    .experts-section__avatar {
        width: 100px;
        height: 100px;
    }

    .experts-section__meta {
        align-items: center;
    }

    .experts-section__role {
        font-size: 10px;
    }

    .experts-section__stat-text {
        font-size: 11px;
    }

    .experts-section__chat-btn {
        font-size: 14px;
        padding: 12px;
        gap: 6px;
        letter-spacing: -0.03em;
    }

    .experts-section__cta {
        gap: 10px
    }

    .experts-section__price {
        font-size: 9px;
    }

    .best-reading-section__image {
        position: relative;
        right: -20px;
        left: -20px;
        width: calc(100% + 40px);
    }

    .best-reading-section__content-wrapper {
        padding-bottom: 20px;
    }

    .topics-section__promos {
        margin-bottom: 45px;
        grid-template-columns: 1fr;
    }

    .topics-section__promo-card .topics-section__promo-inner {
        flex-direction: row;
    }

    .topics-section__promo-icon {
        max-width: 100px;
    }

    .topics-section__promo-icon img {
        width: 100%;
    }

    .topics-section__grid {
        max-width: 100%;
    }

    .steps-section__num {
        margin: 0;
        position: absolute;
        right: -10px;
        top: -10px;
        width: 100px;
        height: 100px;
    }

    .steps-section__card-title {
        width: 70%;
    }

    .steps-section__body {
        padding: 25px 30px;
    }

    .steps-section__card--step4 .steps-section__body {
        padding: 100px 20px 46px;
    }

    .steps-section__card--step4 .steps-section__num {
        left: 50%;
        transform: translateX(-50%);
        right: auto;
    }

    .steps-section__card--step4 .steps-section__body-content {
        flex-direction: column;
        align-items: center;
    }

    .steps-section__card--step4 .steps-section__card-title,
    .steps-section__card--step4 .steps-section__card-text,
    .steps-section__cta {
        width: 100%;
        text-align: center;
        width: fit-content;
        margin: 0 auto;
    }

    .situation-section__list {
        padding: 38px 30px;
        gap: 20px;
        margin-bottom: 0;
    }

    .situation-section__item {
        font-size: 14px;
    }

    .site-footer__col-right {}

    .site-footer__col-menu,
    .site-footer__col-menu:last-child {
        max-width: 100%;
        align-items: center;
        text-align: center;
        gap: 16px;
    }

    .site-footer__copyright {
        letter-spacing: -0.03em;
    }

    .clients-section__grid {
        flex-direction: column;
    }

    .clients-section__grid-swiper {
        width: calc(100% + 15px);
    }

    .clients-section__grid-swiper .clients-section__review.swiper-slide {
        width: 260px;
        min-height: 164px;
    }

    .clients-section__slider-controls {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 20px;
    }

    .clients-section__slider-btn {
        background-color: transparent;
        border: none;
        width: 30px;
        height: 15px;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        padding: 0;
    }

    .clients-section__slider-btn.swiper-button-disabled {
        color: #C9C9C9;
    }

    .clients-section__review-text {
        margin-bottom: 0;
        max-height: 70px;
        overflow: auto;
    }
}

@media (max-width: 1199.98px) {

    .site-header .navbar {
        order: -1;
        padding: 0;
    }

    .site-header .navbar-collapse {
        position: fixed;
        left: 0;
        bottom: 0px;
        width: 100%;
        height: 100vh;
        min-height: 100vh;
        background: rgba(43, 36, 61, 0.8);
        z-index: 100;
        transition: 1ms linear;
        top: 0px;
    }

    .site-header .navbar-collapse:not(.show) .site-header__offcanvas {
        transform: translateX(-100%);
    }

    .site-header .navbar-collapse.show .site-header__offcanvas {
        transform: translateX(0);
    }

    .site-header__offcanvas {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 400px;
        background: #211838;
        padding: 30px 50px;
        transition: 300ms linear;
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .site-header__offcanvas-top {
        margin-bottom: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .site-header .navbar-nav {
        display: flex;
        gap: 40px;
    }

    .site-header .navbar-nav .nav-item a {
        color: #fff;
        font-size: 24px;
        position: relative;
    }

    .site-header .navbar-nav .nav-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }

    .site-header .navbar-nav .nav-item:after {
        content: '';
        position: absolute;
        right: 0;
        width: 11px;
        height: 20px;
        background-image: url("data:image/svg+xml,%3Csvg width='11' height='20' viewBox='0 0 11 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.322187 1.89663C-0.107396 1.46271 -0.107395 0.759361 0.322187 0.325439C0.751771 -0.10848 1.4481 -0.10848 1.87768 0.325439L10.6778 9.2144C11.1074 9.64832 11.1074 10.3517 10.6778 10.7856L1.87768 19.6746C1.4481 20.1085 0.751771 20.1085 0.322187 19.6746C-0.107396 19.2406 -0.107396 18.5373 0.322187 18.1034L8.34457 10L0.322187 1.89663Z' fill='white'/%3E%3C/svg%3E%0A");
    }

    .site-header__offcanvas-close {
        width: 22px;
        height: 22px;
        border: none;
        background: transparent url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.4065 28.9915L28.9923 30.4058L9.19327 10.6068L10.6075 9.19255L30.4065 28.9915Z' fill='white'/%3E%3Cpath d='M28.9921 9.19254L30.4063 10.6068L10.6073 30.4057L9.19312 28.9915L28.9921 9.19254Z' fill='white'/%3E%3C/svg%3E%0A");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        cursor: pointer;
        display: block;
    }
}