/* ============================================================
   Auditorium — Components
   Кнопки, формы, header, footer, попапы, карточки
   ============================================================ */

/* ============================================================
   1. КНОПКИ
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 19px 25px;
    border-radius: var(--radius-round);
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: var(--fw-h1);
    line-height: normal;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
    border: none;
    white-space: nowrap;
}

/* Оранжевая кнопка (основное действие) */
.btn--accent {
    background: var(--color-accent);
    color: var(--color-white);
}
.btn--accent:hover {
    background: #e06638;
    color: var(--color-white);
}

/* Фиолетовая кнопка */
.btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
}
.btn--primary:hover {
    background: #7a64d9;
    color: var(--color-white);
}

/* Кнопка с обводкой */
.btn--outline {
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}
.btn--outline:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Большая кнопка */
.btn--lg {
    padding: 23px 63px;
    font-size: 23px;
}

/* Маленькая кнопка */
.btn--sm {
    padding: 11px 19px;
    font-size: 14px;
}

/* ============================================================
   2. ФОРМЫ
   ============================================================ */

.form-group {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
}

.form-group__label {
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: var(--fw-h1);
    line-height: 1.2;
    color: var(--color-text);
}

.form-group__input {
    width: 250px;
    border: none;
    border-bottom: 2px solid var(--color-text);
    border-radius: 0;
    padding: 8px 4px;
    font-family: var(--font-body);
    font-size: var(--fs-16-reg);
    color: var(--color-text);
    background: transparent;
    outline: none;
    transition: border-color var(--transition);
}

.form-group__input:focus {
    border-color: var(--color-primary);
}

.form-group__input::placeholder {
    color: var(--color-border);
}

/* Форма в подвале */
.footer-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

.footer-form__row {
    display: flex;
    gap: 74px;
}

/* Форма обратной связи (контакты) */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-form__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.contact-form__label {
    font-family: var(--font-heading);
    font-size: 18px;
    line-height: 1.2;
    color: var(--color-text);
    white-space: nowrap;
}

.contact-form__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.contact-form__divider {
    height: 1px;
    background: var(--color-border);
    border-radius: var(--radius);
}

/* ============================================================
   3. HEADER (верхняя панель)
   ============================================================ */

.site-header {
    position: relative;
    width: 100%;
    height: var(--header-height);
    background: var(--color-header-bg);
    z-index: 100;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 315px;
}

.site-header__left {
    display: flex;
    align-items: center;
    gap: 33px;
}

.site-header__right {
    display: flex;
    align-items: center;
    gap: 27px;
}

.site-header__item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.site-header__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.site-header__text {
    font-family: var(--font-heading);
    font-size: 18px;
    line-height: normal;
    color: var(--color-white);
}

.site-header__phone {
    font-family: var(--font-heading);
    font-size: 18px;
    line-height: normal;
    color: var(--color-white);
}

.site-header__socials {
    display: flex;
    align-items: center;
    gap: 21px;
}

.site-header__socials a {
    display: flex;
    width: 25px;
    height: 25px;
}

/* ============================================================
   4. FOOTER (подвал)
   ============================================================ */

.site-footer {
    width: 100%;
    background: var(--color-white);
}

/* Верхняя часть: форма + иллюстрация */
.site-footer__cta {
    background: var(--color-footer-light);
    padding: 42px 0;
    text-align: center;
}

.site-footer__cta-title {
    font-family: var(--font-heading);
    font-size: var(--fs-h1);
    line-height: normal;
    color: var(--color-text);
    margin-bottom: 12px;
}

.site-footer__cta-text {
    font-family: var(--font-body);
    font-size: var(--fs-14-reg);
    line-height: var(--lh-14-reg);
    color: var(--color-text);
    margin-bottom: 25px;
}

.site-footer__privacy {
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.6;
    color: var(--color-text);
    margin-top: 12px;
}

.site-footer__privacy a {
    font-weight: var(--fw-14-bold);
    text-decoration: underline;
}

/* Основная часть подвала */
.site-footer__main {
    padding: 44px 0 39px;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 300px 1fr 300px;
    gap: 76px;
}

.site-footer__logo {
    width: 223px;
    height: 74px;
    margin-bottom: 19px;
}

.site-footer__desc {
    font-family: var(--font-body);
    font-size: var(--fs-16-bold);
    line-height: var(--lh-16-bold);
    color: var(--color-text);
    margin-bottom: 19px;
    max-width: 300px;
}

.site-footer__columns {
    display: flex;
    gap: 93px;
}

.site-footer__col-title {
    font-family: var(--font-heading);
    font-size: 28px;
    line-height: normal;
    color: var(--color-text);
    margin-bottom: 20px;
}

.site-footer__links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.site-footer__links a {
    font-family: var(--font-body);
    font-size: var(--fs-16-reg);
    line-height: var(--lh-16-reg);
    color: var(--color-text);
    text-decoration: underline;
}

.site-footer__contacts {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.site-footer__contact-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.site-footer__contact-label {
    font-family: var(--font-body);
    font-size: var(--fs-16-reg);
    line-height: var(--lh-16-reg);
    color: var(--color-text);
}

.site-footer__contact-value {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: var(--fs-16-bold);
    line-height: var(--lh-16-bold);
    color: var(--color-text);
}

.site-footer__contact-value a {
    color: var(--color-accent);
    text-decoration: underline;
}

.site-footer__divider {
    height: 1px;
    background: var(--color-border);
    border-radius: var(--radius);
    margin: 0 0 16px;
}

/* Нижняя панель */
.site-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-14-reg);
    line-height: var(--lh-14-reg);
    color: var(--color-text);
}

.site-footer__bottom-links {
    display: flex;
    gap: 27px;
    font-weight: var(--fw-14-bold);
}

.site-footer__bottom-links a {
    text-decoration: underline;
    color: var(--color-text);
}

/* ============================================================
   5. ПОПАПЫ (модальные окна)
   ============================================================ */

.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition);
}

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

.popup {
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 40px;
    max-width: 500px;
    width: 90%;
    position: relative;
}

.popup__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--transition);
}

.popup__close:hover {
    opacity: 1;
}

.popup__title {
    font-family: var(--font-heading);
    font-size: 27px;
    line-height: normal;
    color: var(--color-text);
    margin-bottom: 20px;
}

/* ============================================================
   6. МОБИЛЬНОЕ МЕНЮ
   ============================================================ */

.mobile-menu {
    position: fixed;
    inset: 0;
    background: #F8F6FF;
    z-index: 999;
    padding: 31px 12px;
    transform: translateX(-100%);
    transition: transform var(--transition);
}

.mobile-menu.is-active {
    transform: translateX(0);
}

.mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.mobile-menu__logo {
    width: 146px;
    height: 49px;
}

.mobile-menu__close {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.mobile-menu__divider {
    height: 1px;
    background: var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 25px;
}

.mobile-menu__nav {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.mobile-menu__section {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mobile-menu__section-title {
    font-family: var(--font-heading);
    font-size: 21px;
    line-height: normal;
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.mobile-menu__section-title .arrow {
    width: 8px;
    height: 8px;
}

.mobile-menu__sublinks {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-left: 0;
}

.mobile-menu__sublinks a {
    font-family: var(--font-body);
    font-size: var(--fs-16-reg);
    line-height: var(--lh-16-reg);
    color: var(--color-text2);
}

.mobile-menu__link {
    font-family: var(--font-heading);
    font-size: 21px;
    line-height: normal;
    color: var(--color-text);
}

.mobile-menu__link--accent {
    color: var(--color-primary);
}

/* Бургер-кнопка */
.burger {
    display: none;
    width: 24px;
    height: 24px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.burger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-white);
    transition: all var(--transition);
}

@media (max-width: 768px) {
    .burger {
        display: flex;
    }

    /* Скрываем десктопное меню navbar на мобильных */
    .navbar__menu {
        display: none;
    }

    /* Хедер-бар: скрываем левую часть, оставляем телефон + бургер */
    .site-header__inner {
        padding: 0 16px;
    }
    .site-header__left {
        display: none;
    }
    .site-header__right {
        gap: 12px;
    }
    .site-header__socials {
        display: none;
    }
}

/* ============================================================
   7. РАЗДЕЛИТЕЛИ И ДЕКОР
   ============================================================ */

.divider {
    height: 1px;
    background: var(--color-border);
    border-radius: var(--radius);
}

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

/* Вертикальный разделитель */
.divider--vertical {
    width: 1px;
    height: 300px;
    background: var(--color-border);
}

/* ============================================================
   8. ТЕГИ И ЧИПСЫ
   ============================================================ */

.tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-round);
    font-family: var(--font-body);
    font-size: var(--fs-14-reg);
    line-height: 1;
}

.tag--primary {
    background: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary);
}

.tag--accent {
    background: rgba(var(--color-accent-rgb), 0.1);
    color: var(--color-accent);
}

/* ============================================================
   9. ПАГИНАЦИЯ
   ============================================================ */

.pagination {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 40px;
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-round);
    font-family: var(--font-body);
    font-size: var(--fs-16-reg);
    color: var(--color-text);
    transition: all var(--transition);
}

.pagination .page-numbers.current {
    background: var(--color-primary);
    color: var(--color-white);
}

.pagination .page-numbers:hover:not(.current) {
    background: rgba(var(--color-primary-rgb), 0.1);
}

/* ============================================================
   3a. НАВИГАЦИОННАЯ ПАНЕЛЬ (navbar — вариант Header)
   ============================================================ */

.navbar {
    background: var(--color-footer-light);
    width: 100%;
}

.navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
}

.navbar__logo {
    flex-shrink: 0;
}

.navbar__logo img {
    height: 73px;
    width: auto;
}

.navbar__brand {
    display: flex;
    align-items: center;
    gap: 30px;
    text-decoration: none;
}

.navbar__logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transform: rotate(-7.59deg);
}

.navbar__logo-icon img {
    height: 55px;
    width: auto;
}

.navbar__logo-text {
    flex-shrink: 0;
}

.navbar__logo-text img {
    height: 30px;
    width: auto;
}

.navbar__menu {
    display: flex;
    align-items: center;
}

.navbar__links {
    display: flex;
    align-items: center;
    gap: 37px;
    list-style: none;
}

.navbar__link a {
    font-family: var(--font-heading);
    font-size: 18px;
    line-height: normal;
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition);
}

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

.navbar__link.is-accent a {
    color: var(--color-primary);
}

.navbar__link.has-dropdown a {
    color: var(--color-accent);
    display: flex;
    align-items: center;
    gap: 4px;
}

.navbar__link.has-dropdown a::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -2px;
}

/* CTA-кнопка в навбаре (Figma 1:23712) */
.navbar__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 16px;
    line-height: normal;
    padding: 19px 25px;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity var(--transition);
}
.navbar__cta:hover { opacity: 0.9; color: var(--color-white); }

/* Компактный подвал (без CTA) */
.site-footer--compact {
    padding-top: 60px;
}

/* ============================================================
   4a. HERO-ИЛЛЮСТРАЦИЯ (главная страница)
   ============================================================ */

.hero-visual {
    position: relative;
    width: 100%;
    height: 845px;
    overflow: hidden;
}

.hero-visual__bg {
    position: absolute;
    top: 41px;
    left: 0;
    width: 100%;
    height: 711px;
    background: var(--color-footer-light); /* #F0ECFF — Figma 1:33 */
}

.hero-visual__inner {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding: 0 0 0 292px;
}

/* --- Левая колонка: текст --- */

.hero-visual__content {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    padding-top: 129px; /* 170 - 41 = 129 from bg top */
}

.hero-visual__heading {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 17px;
}

.hero-visual__title {
    font-family: var(--font-heading);
    font-size: 62px;
    font-weight: 400;
    line-height: 1.0;
    color: var(--color-text);
    max-width: 823px;
    margin: 0;
}

.hero-visual__heading-icon {
    display: inline-block;
    width: 33px;
    height: 31px;
    margin-top: 6px;
    flex-shrink: 0;
    background: url('../img/hero-heading-icon.svg') no-repeat center / contain;
    transform: rotate(-11.64deg);
}

.hero-visual__services {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hero-visual__subtitle {
    font-family: var(--font-body);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--color-text);
    margin: 0;
}

.hero-visual__list {
    display: flex;
    gap: 50px;
}

.hero-visual__list-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hero-visual__list-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero-visual__check {
    display: inline-block;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: url('../img/check-circle.svg') no-repeat center / contain;
}

.hero-visual__list-text {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--color-text);
    text-transform: uppercase;
    white-space: nowrap;
}

/* --- CTA-кнопки (Figma 1:337) --- */

.hero-visual__buttons {
    display: flex;
    gap: 17px;
    margin-top: 20px;
}

.hero-visual__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 23px;
    line-height: normal;
    padding: 23px 28px;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity var(--transition);
}
.hero-visual__btn:hover { opacity: 0.9; }

.hero-visual__btn--purple {
    background: var(--color-primary);
    color: var(--color-white);
}

.hero-visual__btn--orange {
    background: var(--color-accent);
    color: var(--color-white);
}

.hero-visual__btn--outline {
    background: transparent;
    color: var(--color-accent);
    border: 3px solid var(--color-accent);
    padding: 20px 25px; /* 23px - 3px border */
}

/* --- Правая колонка: иллюстрация --- */

.hero-visual__illustration {
    position: relative;
    width: 574px;
    height: 525px;
    flex-shrink: 0;
    margin-right: 313px;
}

.hero-visual__books-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 538px;
    height: 409px;
}
.hero-visual__bg-img { width:100%; height:100%; }

.hero-visual__books {
    position: absolute;
    top: 19px;
    left: 33px;
    width: 477px;
    height: 333px;
}
.hero-visual__book {
    position: absolute;
}
.hero-visual__book img { width:100%; height:100%; display:block; }

.hero-visual__plants {
    position: absolute;
    top: 263px;
    left: 0;
    width: 574px;
    height: 262px;
    display: flex;
    justify-content: space-between;
}

.hero-visual__plant {
    width: 261px;
    height: 262px;
    position: relative;
}
.hero-visual__plant img {
    width: 100%;
    height: 100%;
    display: block;
}

.hero-visual__character {
    position: absolute;
    top: 94px;
    left: 170px;
    width: 218px;
    height: 432px;
}
.hero-visual__char-part img {
    width: 100%;
    height: 100%;
    display: block;
}

.hero-visual__ground {
    position: absolute;
    top: 525px;
    left: 0;
    width: 100%;
}
.hero-visual__ground img { width:100%; display:block; }

@media (max-width: 1024px) {
    .hero-visual {
        height: auto;
        min-height: 400px;
    }
    .hero-visual__inner {
        flex-direction: column;
        padding: 40px 20px;
    }
    .hero-visual__content {
        padding-top: 0;
        margin-bottom: 30px;
    }
    .hero-visual__title {
        font-size: 36px;
    }
    .hero-visual__subtitle {
        font-size: 18px;
    }
    .hero-visual__list {
        flex-direction: column;
        gap: 10px;
    }
    .hero-visual__illustration {
        margin-right: auto;
        transform: scale(0.7);
    }
}

@media (max-width: 768px) {
    .hero-visual {
        min-height: 300px;
    }
    .hero-visual__title {
        font-size: 28px;
    }
    .hero-visual__illustration {
        transform: scale(0.45);
        margin: 0 auto;
    }
}

/* ============================================================
   4b. HERO-TEXT (заголовок + список + кнопки)
   ============================================================ */

.hero-text {
    position: relative;
    padding: 0 292px;
}

.hero-text__heading {
    position: relative;
    margin-bottom: 20px;
}

.hero-text__title {
    font-family: var(--font-heading);
    font-size: 62px;
    font-weight: var(--fw-h1);
    line-height: normal;
    color: var(--color-text);
    max-width: 823px;
}

.hero-text__icon {
    position: absolute;
    top: 6px;
    left: -23px;
    width: 33px;
    height: 31px;
    transform: rotate(-11.64deg);
}

.hero-text__content {
    max-width: 525px;
}

.hero-text__subtitle {
    font-family: var(--font-body);
    font-size: 21px;
    font-weight: var(--fw-16-bold);
    line-height: 1.6;
    color: var(--color-text);
    margin-bottom: 20px;
    text-transform: none;
}

.hero-text__list {
    display: flex;
    gap: 50px;
}

.hero-text__col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    list-style: none;
}

.hero-text__item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: var(--fs-16-bold);
    font-weight: var(--fw-16-bold);
    line-height: 1.6;
    color: var(--color-text);
    text-transform: uppercase;
}

.hero-text__check {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-text__check svg {
    width: 28px;
    height: 28px;
}

.hero-text__buttons {
    display: flex;
    gap: 17px;
    margin-top: 45px;
}

.hero-text__buttons .btn--lg {
    padding: 23px 28px;
    font-size: 23px;
}

@media (max-width: 1024px) {
    .hero-text {
        padding: 0 20px;
    }
    .hero-text__title {
        font-size: 42px;
    }
    .hero-text__list {
        flex-direction: column;
        gap: 12px;
    }
    .hero-text__buttons {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .hero-text__title {
        font-size: 32px;
    }
    .hero-text__subtitle {
        font-size: var(--fs-16-bold);
    }
    .hero-text__buttons {
        flex-direction: column;
    }
    .hero-text__buttons .btn {
        width: 100%;
    }
}

/* ============================================================
   5a. КАРТОЧКИ ПРЕИМУЩЕСТВ
   ============================================================ */

.advantages-grid {
    display: grid;
    grid-template-columns: repeat(4, 300px);
    gap: 30px;
    justify-content: center;
}

.advantage-card {
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card-purple);
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    text-align: center;
    min-height: 355px;
}

.advantage-card__icon {
    width: 78px;
    height: 78px;
    flex-shrink: 0;
}

.advantage-card__icon img {
    width: 100%;
    height: 100%;
}

.advantage-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.advantage-card__title {
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: var(--fw-h1);
    line-height: 1.2;
    color: var(--color-text);
}

.advantage-card__text {
    font-family: var(--font-body);
    font-size: var(--fs-16-reg);
    font-weight: var(--fw-16-reg);
    line-height: var(--lh-16-reg);
    color: var(--color-text);
}

@media (max-width: 1024px) {
    .advantages-grid {
        grid-template-columns: repeat(2, 300px);
    }
}

@media (max-width: 768px) {
    .advantages-grid {
        grid-template-columns: 1fr;
        max-width: 300px;
        margin: 0 auto;
    }
}

/* ============================================================
   5b. КАРТА (map section)
   ============================================================ */

.map-section__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.map-section__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h1);
    font-weight: var(--fw-h1);
    line-height: var(--lh-h1);
    color: var(--color-text);
    margin-bottom: 24px;
}

.map-section__map-img {
    width: 100%;
    max-width: 849px;
    height: auto;
}

@media (max-width: 1024px) {
    .map-section__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .map-section__map-img {
        max-width: 500px;
        margin: 0 auto;
    }
}

/* ============================================================
   5c. SECTION HEADER (заголовок секции)
   ============================================================ */

.section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    margin-bottom: 40px;
}

.section-header__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h1);
    font-weight: var(--fw-h1);
    line-height: var(--lh-h1);
    color: var(--color-text);
    max-width: 940px;
}

.section-header__desc {
    font-family: var(--font-body);
    font-size: var(--fs-16-reg);
    line-height: var(--lh-16-reg);
    color: var(--color-text);
    max-width: 940px;
}

/* ============================================================
   5d. ШАГИ ЗАКАЗА (order steps)
   ============================================================ */

.order-steps__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 40px;
    text-align: center;
}

.order-steps__guarantee {
    font-family: var(--font-body);
    font-size: var(--fs-16-reg);
    font-weight: var(--fw-16-reg);
    line-height: var(--lh-16-reg);
    color: var(--color-text);
    max-width: 582px;
}

@media (max-width: 768px) {
    .order-steps__footer {
        padding: 0 20px;
    }
}

/* ============================================================
   5e. КАРТОЧКИ РАБОТ (works section)
   ============================================================ */

.works-grid {
    display: grid;
    grid-template-columns: repeat(4, 300px);
    gap: 30px;
    justify-content: center;
}

.work-card {
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card-purple);
    padding: 28px 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-height: 366px;
    position: relative;
}

.work-card__icon {
    width: 55px;
    height: 55px;
    flex-shrink: 0;
}

.work-card__icon img {
    width: 100%;
    height: 100%;
}

.work-card__header {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.work-card__title {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: var(--fw-h1);
    line-height: 1.2;
    color: var(--color-text);
}

.work-card__topic {
    font-family: var(--font-body);
    font-size: var(--fs-14-bold);
    font-weight: var(--fw-14-bold);
    line-height: var(--lh-14-bold);
    color: var(--color-text);
}

.work-card__details {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.work-card__detail {
    display: flex;
    flex-direction: column;
}

.work-card__label {
    font-family: var(--font-body);
    font-size: var(--fs-16-reg);
    font-weight: var(--fw-16-reg);
    line-height: var(--lh-16-bold);
    color: #000;
}

.work-card__value {
    font-family: var(--font-body);
    font-size: var(--fs-16-bold);
    font-weight: var(--fw-16-bold);
    line-height: var(--lh-16-bold);
    color: var(--color-text);
}

.work-card__price {
    margin-top: auto;
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: var(--fw-h1);
    line-height: normal;
    color: var(--color-primary);
}

@media (max-width: 1024px) {
    .works-grid { grid-template-columns: repeat(2, 300px); }
}

@media (max-width: 768px) {
    .works-grid { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto; }
}

/* ============================================================
   5f. ПРЕВЬЮ ОТЗЫВОВ
   ============================================================ */
.reviews-preview__grid {
    display: flex;
    gap: 30px;
    justify-content: center;
    margin-top: 40px;
}
.review-card {
    background: var(--color-white);
    border-radius: 13px;
    box-shadow: 0px 8px 20.9px rgba(0,12,78,0.15);
    padding: 18px 23px;
    width: 259px;
    min-height: 315px;
}
.review-card__avatar { width:59px; height:59px; margin-bottom:12px; }
.review-card__rating { color: var(--color-accent); font-size:18px; margin-bottom:8px; }
.review-card__text { font-size: var(--fs-14-reg); line-height: var(--lh-14-reg); margin-bottom:10px; }
.review-card__name { font-weight: var(--fw-14-bold); font-size: var(--fs-14-bold); }

/* ============================================================
   5g. ФОРМА ОБРАТНОЙ СВЯЗИ (callback section)
   ============================================================ */
.callback-section__grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.callback-section__image img { width:100%; max-width:550px; }
.callback-section__title { font-family:var(--font-heading); font-size:var(--fs-h1); margin-bottom:12px; }
.callback-section__subtitle { font-size:var(--fs-16-reg); color:var(--color-text2); margin-bottom:30px; }
.callback-form { display:flex; flex-direction:column; gap:16px; }
.callback-form__row { display:flex; align-items:center; gap:12px; background:var(--color-white); border-radius:var(--radius); padding:8px 16px; box-shadow:var(--shadow-card); }
.callback-form__icon { width:24px; height:24px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.callback-form__input { border:none; outline:none; background:transparent; font-size:var(--fs-16-reg); width:100%; }
.callback-form__textarea { resize:vertical; min-height:60px; }
@media (max-width:768px) {
    .callback-section__grid { grid-template-columns:1fr; }
    .reviews-preview__grid { flex-wrap:wrap; justify-content:center; }
}

/* ============================================================
   5h. BENEFITS EXTRA / FAQ / DISCOUNTS
   ============================================================ */
.benefit-card { background:var(--color-white); border-radius:var(--radius); box-shadow:var(--shadow-card); padding:30px; text-align:center; }
.benefit-card__check { color:var(--color-primary); font-size:24px; margin-bottom:16px; display:block; }
.benefit-card__title { font-size:21px; margin-bottom:10px; }

.faq-list { display:flex; flex-direction:column; gap:35px; margin-top:40px; }
.faq-item__divider { height:2px; background:var(--color-primary); border-radius:22px; margin-bottom:12px; }
.faq-item__question { display:flex; justify-content:space-between; align-items:center; width:100%; font-family:var(--font-heading); font-size:32px; line-height:1.12; text-align:left; cursor:pointer; gap:12px; }
.faq-item__arrow { font-size:20px; transition:transform var(--transition); }
.faq-item.is-open .faq-item__arrow { transform:rotate(180deg); }
.faq-item__answer { font-size:var(--fs-16-reg); line-height:var(--lh-16-reg); color:var(--color-text2); padding-top:12px; }

.discounts-grid { display:flex; gap:30px; justify-content:center; }
.discount-card { background:var(--color-white); border-radius:var(--radius); box-shadow:var(--shadow-card-purple); width:190px; padding:20px 8px; text-align:center; }
.discount-card__badge { width:66px; height:66px; background:#6A6A6A; border-radius:2px; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-family:var(--font-heading); font-size:32px; color:var(--color-white); }
.discount-card__desc { font-size:var(--fs-14-reg); }
@media (max-width:768px) { .discounts-grid { flex-wrap:wrap; } }

/* ============================================================
   6a. SERVICES HERO
   ============================================================ */
.page-hero--services .page-hero__content { position:relative; }
.services-hero__illustration { position:absolute; right:0; top:-30px; width:642px; }
.services-hero__illustration img { width:100%; height:auto; }
@media (max-width:1024px) { .services-hero__illustration { position:relative; right:auto; top:auto; width:100%; max-width:400px; margin:20px auto 0; } }

/* ============================================================
   6b. SERVICES INTRO + CATALOG
   ============================================================ */
.services-intro__grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.services-catalog__grid { display:grid; grid-template-columns:repeat(4, 245px); gap:16px; justify-content:center; }
.service-card {
    background:var(--color-white); border-radius:var(--radius); box-shadow:var(--shadow-card-purple); padding:29px 30px 25px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:20px;
    text-decoration: none; color: inherit; min-height:364px;
    transition: transform var(--transition), box-shadow var(--transition);
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(125,102,211,0.2); }
.service-card__icon { width:55px; height:55px; }
.service-card__title { font-family:var(--font-body); font-size:var(--fs-18-bold); font-weight:var(--fw-18-bold); }
.service-card__desc { font-size:var(--fs-14-reg); color:var(--color-text2); line-height:var(--lh-16-reg); }
.service-card__price { font-family:var(--font-heading); font-size:24px; color:var(--color-primary); margin-top:auto; }
@media (max-width:1024px) { .services-catalog__grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:768px) { .services-intro__grid,.services-catalog__grid { grid-template-columns:1fr; } }

/* ============================================================
   6c. PROCESS + INCLUDES
   ============================================================ */
.process-grid { display:flex; gap:0; justify-content:center; }
.process-step { text-align:center; padding:20px; position:relative; flex:1; max-width:250px; }
.process-step__num { font-family:var(--font-heading); font-size:57px; color:var(--color-primary); display:block; margin-bottom:8px; }
.process-step__arrow { position:absolute; right:-15px; top:50%; font-size:24px; color:var(--color-primary); }
.services-includes__grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.services-includes__list { display:flex; flex-direction:column; gap:16px; margin-top:20px; }
.services-includes__item { display:flex; align-items:center; gap:12px; font-size:var(--fs-16-reg); }
.services-includes__check { color:var(--color-primary); font-size:18px; }
@media (max-width:768px) { .process-grid { flex-direction:column; align-items:center; } .process-step__arrow { display:none; } .services-includes__grid { grid-template-columns:1fr; } }

/* ============================================================
   6d. HOWTO DIPLOMA
   ============================================================ */
.howto-diploma { max-width:660px; }
.howto-diploma__title { font-family:var(--font-heading); font-size:43px; line-height:1.2; margin-bottom:12px; }
.howto-diploma__text { display:flex; flex-direction:column; gap:16px; font-size:var(--fs-16-reg); line-height:var(--lh-16-reg); }
.howto-diploma__highlight { font-weight:var(--fw-16-bold); }

/* ============================================================
   6e. SERVICES EXTRA
   ============================================================ */
.services-extra__grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.services-extra__list { display:flex; flex-direction:column; gap:14px; margin-top:20px; }
.services-extra__list li { display:flex; align-items:center; gap:12px; font-size:var(--fs-16-reg); }
@media (max-width:768px) { .services-extra__grid { grid-template-columns:1fr; } }

/* ============================================================
   6f. DISCIPLINES
   ============================================================ */
.disciplines-grid { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.discipline-tag { display:inline-flex; padding:12px 24px; background:var(--color-white); border-radius:var(--radius-round); font-size:var(--fs-16-reg); color:var(--color-text); box-shadow:var(--shadow-card); transition:all var(--transition); }
.discipline-tag:hover { background:var(--color-primary); color:var(--color-white); }

/* ============================================================
   7a. LIBRARY
   ============================================================ */
.library-search__title { font-family:var(--font-heading); font-size:41px; line-height:normal; margin-bottom:12px; }
.library-search__subtitle { font-size:var(--fs-16-reg); color:#000; }
.library-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:30px; }
.library-card { background:var(--color-white); border-radius:var(--radius); box-shadow:var(--shadow-card); padding:24px; display:flex; flex-direction:column; gap:12px; min-height:220px; }
.library-card__link {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    text-decoration: none;
    color: inherit;
}
.library-card__title { font-size:21px; }
.library-card__meta { display:flex; gap:12px; font-size:var(--fs-14-reg); color:var(--color-text2); flex-wrap:wrap; align-items:center; }
@media (max-width:1024px) { .library-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:768px) { .library-grid { grid-template-columns:1fr; } }

/* ============================================================
   8. CONTACTS, REVIEWS, PAYMENT
   ============================================================ */
.contact-detail { display:flex; gap:12px; align-items:flex-start; margin-bottom:20px; }
.contact-detail__icon { width:18px; height:18px; margin-top:2px; flex-shrink:0; }
.reviews-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:30px; }
.payment-intro { display:grid; grid-template-columns:2fr 1fr; gap:40px; align-items:start; }
.payment-methods { display:flex; gap:20px; flex-wrap:wrap; }
.payment-method { background:var(--color-white); border-radius:var(--radius); box-shadow:var(--shadow-card); padding:24px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; width:151px; }
@media (max-width:1024px) { .reviews-grid { grid-template-columns:repeat(2, 1fr); } .payment-intro { grid-template-columns:1fr; } }
@media (max-width:768px) { .reviews-grid { grid-template-columns:1fr; } }

/* ============================================================
   9a. GUARANTEES
   ============================================================ */
.guarantees-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
@media (max-width:768px) { .guarantees-grid { grid-template-columns:1fr; } }

/* ============================================================
   9b. MOBILE CALLBACK
   ============================================================ */
.mobile-callback { position:fixed; bottom:20px; right:20px; z-index:99; display:none; }
.mobile-callback__btn { display:flex; align-items:center; gap:8px; background:var(--color-accent); color:var(--color-white); padding:12px 20px; border-radius:var(--radius-round); font-family:var(--font-heading); font-size:16px; box-shadow:0 4px 12px rgba(0,0,0,0.2); }
.mobile-callback__icon { font-size:20px; }
@media (max-width:768px) { .mobile-callback { display:block; } }

/* ============================================================
   10. УТИЛИТЫ
   ============================================================ */

.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.text-accent  { color: var(--color-accent); }
.text-primary { color: var(--color-primary); }
.text-white   { color: var(--color-white); }
.text-gray    { color: var(--color-text2); }
.underline    { text-decoration: underline; }
.hidden       { display: none; }
.relative     { position: relative; }
.overflow-hidden { overflow: hidden; }