/* ========================================
   RESET
======================================== */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    font-family: var(--font-body);
    background: var(--bg-secondary);
    color: var(--text-main);
    line-height: 1.5;
    overflow-x: hidden;
}

a {
    color: inherit;
}

button,
input {
    font: inherit;
}

.container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* ========================================
   VARIABLES
======================================== */

/* Цвета и шрифты — в static/tokens.css, он подключается
   первым на каждой странице. Здесь их больше нет:
   раньше в каждом файле был свой набор, и палитры разошлись. */


/* ========================================
   GLOBAL TYPOGRAPHY
======================================== */

h1,
h2,
h3 {
    font-family: var(--font-header);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-main);
}


/* ========================================
   HEADER
======================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 250, 247, 0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.nav {
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    text-decoration: none;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.nav nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav nav a {
    text-decoration: none;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 500;
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

@media (hover: hover) {
    .nav nav a:hover {
        color: var(--text-main);
        transform: translateY(-1px);
    }
}

/* Появляется только у тех, кто завёл аккаунт */

.nav nav a.nav-account {
    padding: 9px 18px;

    background: var(--bg-primary);
    color: var(--white);

    border-radius: 999px;

    font-size: 13px;
    font-weight: 600;
}

@media (hover: hover) {
    .nav nav a.nav-account:hover {
        color: var(--white);
        background: var(--bg-primary);
    }
}


/* ========================================
   HERO
======================================== */

.hero {
    position: relative;
    min-height: 760px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-size: cover;
    background-position: 100% center !important;
    background-repeat: no-repeat;
}

.hero-flex {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 50px;
    min-height: 760px;
}

.hero-content {
    position: relative;
    z-index: 2;
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: 620px !important;
    padding: 80px 0 !important;
}

.hero-badge {
    display: inline-flex;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(0, 0, 0, 0.06);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 28px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.hero h1 {
    max-width: 620px !important;
    font-size: clamp(42px, 5vw, 72px);
    line-height: 0.98;
    letter-spacing: -3px;
}

.hero-line {
    display: block !important;
    white-space: nowrap !important;
}

.hero p {
    max-width: 720px;
    font-size: 19px;
    line-height: 1.75;
    color: var(--text-muted);
    margin-bottom: 40px;
}

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hero-image {
    flex: 0 0 40%;
    width: 40%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    margin-right: calc((1180px - 100vw) / 2);
}

.hero-image img {
    display: block;
    width: min(400px, 40vw);
    max-width: none;
    height: auto;
    object-fit: contain;
}


/* ========================================
   BUTTONS
======================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 25px;
    border-radius: 14px;
    border: 0;
    text-decoration: none;
    font-size: 15px;
    font-weight: 650;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

@media (hover: hover) {
    .btn:hover {
        transform: translateY(-2px);
    }
}

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

@media (hover: hover) {
    .btn-primary:hover {
        box-shadow:
            0 14px 32px rgba(0, 0, 0, 0.18);
    }
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.75);
    color: var(--text-main);
    border: 1px solid rgba(0, 0, 0, 0.08);
}


/* ========================================
   COURSES
======================================== */

.courses-section {
    padding: 110px 0;
    background: var(--white);
}

.section-heading {
    max-width: 700px;
    margin-bottom: 55px;
}

.eyebrow {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.section-heading h2,
.contact-card h2 {
    font-size: clamp(38px, 5vw, 60px);
    line-height: 1.05;
    letter-spacing: -2.5px;
    margin-bottom: 18px;
}

.section-heading p {
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1.7;
}


/* ========================================
   COURSE GRID
======================================== */

.courses-grid {
    display: grid;

    /* Четыре ступени: I, II, III Solo, III с Эстер
       (решение Эстер от 28.10.2026) */
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 18px;
    align-items: stretch;
}

/* На узком рабочем столе четыре колонки становятся слишком
   тонкими — ставим две по две (ниже 900px включается лента). */

@media (max-width: 1180px) and (min-width: 901px) {
    .courses-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.course-card {
    position: relative;
    min-height: 460px;
    display: flex;
    flex-direction: column;

    background: var(--bg-secondary);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 30px;

    padding: 32px;

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

@media (hover: hover) {
    .course-card:hover {
        transform: translateY(-8px);

        box-shadow:
            0 24px 60px rgba(0, 0, 0, 0.10);

        border-color: rgba(0, 0, 0, 0.10);
    }
}

/* POPULAR CARD */

.course-card.featured {
    background: var(--level-2-tint);
    border-color: rgba(150, 120, 200, 0.15);

    transform: translateY(-12px);

    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.10);

    z-index: 2;
}

@media (hover: hover) {
    .course-card.featured:hover {
        transform: translateY(-18px);
    }
}


/* BACKGROUNDS */

.courses-grid .course-card:nth-child(1) {
    background:
        var(--level-1-tint);
}

.courses-grid .course-card:nth-child(2) {
    background:
        var(--level-2-tint);
}

.courses-grid .course-card:nth-child(3) {
    background:
        var(--level-3-tint);
}

/* Четвёртая карточка — Level III с Эстер (VIP) */

.courses-grid .course-card:nth-child(4) {
    background:
        var(--level-3-tint);
}


/* ПЛАШКА НА КАРТОЧКЕ: «Основной путь» / «VIP» */

.course-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;

    padding: 5px 12px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    background: rgba(255, 255, 255, 0.9);
    color: var(--text-primary, #1a1a1a);

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.course-badge--vip {
    background: linear-gradient(135deg, #d9b45b, #f0dca4);
    color: #3a2c05;
}


/* TOP NUMBER */

.course-number {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 1px;
}


/* CONTENT */

.course-card-content {
    margin-top: 35px;

    display: flex;
    flex-direction: column;

    flex: 1;
}


/* LEVEL */

.course-label {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;

    margin-bottom: 12px;
}


/* TITLE */

.course-card h3 {
    margin: 0 0 18px;

    font-size: 34px;
    line-height: 1;
    letter-spacing: -1.8px;

    min-height: 0;

    display: block;

    white-space: nowrap;
}


/* DESCRIPTION */

.course-card p {
    margin: 0 0 22px;

    color: var(--text-main);
    line-height: 1.6;

    min-height: 0;
}


/* TAGS */

.course-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 24px;

    min-height: 0;
}

.course-tags span {
    display: inline-flex;
    align-items: center;

    padding: 7px 11px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.75);

    border: 1px solid rgba(0, 0, 0, 0.06);

    color: var(--text-muted);

    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}


/* PRICE */

.course-price {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -1px;

    margin-top: auto;
    margin-bottom: 25px;
}


/* BUTTON */

.course-card .btn {
    width: 100%;
}


/* POPULAR */

.popular-badge {
    position: absolute;

    top: 22px;
    right: 22px;

    padding: 7px 11px;

    border-radius: 999px;

    background: var(--bg-primary);
    color: white;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* ========================================
   TESTIMONIALS
======================================== */

.reviews-section {
    padding: 120px 0;
    background: var(--white);
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 22px;
}

.review-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 28px;
    padding: 34px 30px;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

@media (hover: hover) {
    .review-card:hover {
        transform: translateY(-6px);
        box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.08);
    }
}

.review-stars {
    color: var(--accent-gold);
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.review-text {
    flex: 1;
    color: var(--text-main);
    font-size: 15.5px;
    line-height: 1.75;
    margin-bottom: 26px;
}

.review-text.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.review-toggle {
    align-self: flex-start;
    margin: -14px 0 20px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

@media (hover: hover) {
    .review-toggle:hover {
        color: var(--text-main);
    }
}

.review-footer {
    display: flex;
    align-items: center;
    gap: 13px;
}

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

.review-meta {
    flex: 1;
    min-width: 0;
}

.review-meta strong {
    display: block;
    font-size: 14px;
    font-weight: 650;
}

.review-meta span {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.review-age {
    font-weight: 400;
    font-size: 13px;
    color: var(--text-muted);
}

.reviews-grid .review-card:nth-child(1) .review-avatar {
    background: var(--butterfly);
}

.reviews-grid .review-card:nth-child(2) .review-avatar {
    background: var(--butterfly-bright);
}

.reviews-grid .review-card:nth-child(3) .review-avatar {
    background: var(--butterfly-deep);
}


/* ========================================
   CONTACT
======================================== */

.contact-section {
    padding: 100px 0;
}

.contact-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    padding: 55px;
    border-radius: 30px;
    background: var(--bg-primary);
    color: white;
}

.contact-card h2 {
    color: white;
}

.contact-card p {
    max-width: 580px;
    color: var(--text-muted);
    font-size: 17px;
    line-height: 1.7;
}

.contact-card .eyebrow {
    color: var(--text-muted);
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: right;
    flex-shrink: 0;
}

.contact-info a {
    color: white;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
}

.contact-info span {
    color: var(--text-muted);
    font-size: 14px;
}


/* ========================================
   FOOTER
======================================== */

/* Тёмно-синий, как сцены страницы книг: золотая
   волосяная линия сверху, логотип серифом, пункты
   мелкими прописными, золото на наведении. */

.site-footer {
    position: relative;

    background:
        radial-gradient(60% 120% at 50% 0%, rgba(56, 183, 215, 0.10), transparent 70%),
        var(--ink);
    color: rgba(255, 255, 255, 0.82);

    padding: 56px 0 28px;
}

.site-footer::before {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    top: 0;

    height: 1px;

    background: linear-gradient(90deg, transparent, var(--gold-soft) 30%, var(--gold) 50%, var(--gold-soft) 70%, transparent);
}


/* ----------------------------------------
   MAIN
---------------------------------------- */

.footer-main {
    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    gap: 40px;

    padding-bottom: 36px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}


/* ----------------------------------------
   LOGO
---------------------------------------- */

.footer-logo {
    display: inline-flex;
    align-items: center;

    font-family: var(--font-header);
    font-size: 24px;
    font-weight: 600;
    line-height: 1;

    letter-spacing: 3px;
    text-transform: uppercase;

    color: var(--white);

    text-decoration: none;

    transition: color 0.2s ease;
}

@media (hover: hover) {
    .footer-logo:hover {
        color: var(--gold);
    }
}


/* ----------------------------------------
   NAVIGATION
---------------------------------------- */

.footer-nav {
    display: flex;

    align-items: center;

    gap: 30px;
}

.footer-nav a,
.footer-phone {
    position: relative;

    padding: 4px 0;

    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.66);

    text-decoration: none;

    transition: color 0.2s ease;
}

.footer-nav a::after,
.footer-phone::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background: var(--gold);

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.3s var(--ease-soft);
}

@media (hover: hover) {

    .footer-nav a:hover,
    .footer-phone:hover {
        color: var(--white);
    }

    .footer-nav a:hover::after,
    .footer-phone:hover::after {
        transform: scaleX(1);
    }
}


/* ----------------------------------------
   PHONE
---------------------------------------- */

.footer-phone {
    justify-self: end;

    color: var(--gold);
}


/* ----------------------------------------
   BOTTOM
---------------------------------------- */

.footer-bottom {
    display: flex;

    justify-content: space-between;
    align-items: center;

    padding-top: 22px;

    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.45);
}

.footer-bottom span:nth-child(2) {
    color: var(--gold);
}

.site-footer .legal-links {
    padding-top: 16px;
}

.site-footer .legal-links a,
.site-footer .legal-links button {
    color: rgba(255, 255, 255, 0.5);
}

.site-footer .legal-links a:hover,
.site-footer .legal-links button:hover {
    color: var(--gold);
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {

    .site-footer {
        padding: 44px 0 24px;
    }

    .footer-main {
        grid-template-columns: 1fr;

        gap: 24px;

        padding-bottom: 30px;

        text-align: center;
    }

    .footer-logo {
        justify-self: center;
        font-size: 22px;
    }

    .footer-nav {
        justify-content: center;

        flex-wrap: wrap;

        gap: 14px 24px;
    }

    .footer-phone {
        justify-self: center;
    }

    .footer-bottom {
        flex-wrap: wrap;
        justify-content: center;

        font-size: 9px;

        gap: 10px 18px;
    }

    .footer-bottom span:nth-child(2) {
        display: none;
    }

    .site-footer .legal-links {
        justify-content: center;
    }

}


/* ========================================
   AI CHAT BUTTON
======================================== */

.chat-button {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 1000;
    width: 62px;
    height: 62px;
    border: 0;
    border-radius: 50%;
    background: var(--bg-primary);
    color: white;
    font-size: 25px;
    cursor: pointer;
    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.2);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

@media (hover: hover) {
    .chat-button:hover {
        transform: translateY(-3px);
        box-shadow:
            0 16px 40px rgba(0, 0, 0, 0.25);
    }
}


/* ========================================
   CHAT WINDOW
======================================== */

.chat-window {
    position: fixed;
    right: 25px;
    bottom: 100px;
    z-index: 999;
    width: 370px;
    max-width: calc(100vw - 30px);
    height: 560px;
    max-height: calc(100vh - 130px);
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transform:
        translateY(20px)
        scale(0.96);
    pointer-events: none;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.chat-window.open {
    opacity: 1;
    transform:
        translateY(0)
        scale(1);
    pointer-events: auto;
}


/* ========================================
   CHAT HEADER
======================================== */

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    background: var(--bg-primary);
    color: white;
}

.chat-header-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.chat-header strong {
    font-size: 15px;
}

.chat-header span {
    color: var(--text-muted);
    font-size: 11px;
}

.chat-header #chat-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

@media (hover: hover) {
    .chat-header #chat-close:hover {
        background: rgba(255, 255, 255, 0.12);
        color: white;
        transform: rotate(90deg);
    }
}

.chat-header #chat-close:active {
    transform: rotate(90deg) scale(0.9);
}


/* ========================================
   CHAT MESSAGES
======================================== */

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg-secondary);
}

.chat-message {
    max-width: 82%;
    padding: 11px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.55;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.chat-message.bot {
    align-self: flex-start;
    background: white;
    color: var(--text-main);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom-left-radius: 5px;
    line-height: 1.6;
}

.chat-message.user {
    align-self: flex-end;
    background: var(--bg-primary);
    color: white;
    border-bottom-right-radius: 5px;
}

.chat-message.typing {
    color: var(--text-muted);
    font-style: italic;
}

/* Оформление ответа Mimi.

   Ответ приходит абзацами и списками, а не одной
   строкой. Здесь им задаются отступы, чтобы пузырь
   не выглядел сплошной стеной текста. */

.chat-message.bot p,
.chat-message.bot ul,
.chat-message.bot ol {
    margin: 0 0 10px;
}

.chat-message.bot > *:last-child {
    margin-bottom: 0;
}

.chat-message.bot br {
    line-height: 1.7;
}

.chat-message.bot strong,
.chat-message.bot .chat-heading {
    font-weight: 600;
    color: var(--text-main);
}

.chat-message.bot code {
    font-size: 13px;
    background: var(--surface-sunken);
    padding: 1px 5px;
    border-radius: 5px;
}

.chat-message.bot ol {
    padding-left: 20px;
}

.chat-message.bot li {
    margin-bottom: 5px;
}

.chat-message.bot li:last-child {
    margin-bottom: 0;
}

/* Маркер списка — тонкое тире в тёплом тоне сайта,
   вместо стандартной чёрной точки */

.chat-message.bot ul {
    list-style: none;
    padding-left: 0;
}

.chat-message.bot ul li {
    position: relative;
    padding-left: 16px;
}

.chat-message.bot ul li::before {
    content: "\2014";
    position: absolute;
    left: 0;
    color: var(--butterfly);
}


/* ========================================
   CHAT SUGGESTIONS
======================================== */

.chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
    background: white;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.chat-suggestions.hidden {
    display: none;
}

.chat-suggestions button {
    padding: 7px 12px;
    font-size: 12.5px;
    font-family: inherit;
    color: var(--text-main);
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    cursor: pointer;
    transition:
        background 0.2s,
        color 0.2s;
}

@media (hover: hover) {
    .chat-suggestions button:hover {
        background: var(--text-main);
        color: white;
    }
}


/* ========================================
   CHAT QUICK QUESTIONS
======================================== */

.chat-quick-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px 14px;
    background: var(--white);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.chat-quick-buttons .quick-question {
    width: 100%;
    min-height: 44px;
    padding: 9px 10px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 13px;
    background: var(--white);
    color: var(--text-main);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

@media (hover: hover) {
    .chat-quick-buttons .quick-question:hover {
        background: var(--white);
        border-color: var(--border-strong);
        transform: translateY(-1px);
        box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.06);
    }
}

.chat-quick-buttons .quick-question:active {
    transform: scale(0.97);
}


/* ========================================
   CHAT FORM
======================================== */

.chat-form {
    display: flex;
    gap: 8px;
    padding: 12px;
    background: white;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.chat-form input {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0 14px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 13px;
    outline: none;
    background: var(--white);
}

.chat-form input:focus {
    border-color: var(--text-muted);
    background: white;
}

.chat-form button {
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 13px;
    background: var(--bg-primary);
    color: white;
    font-size: 20px;
    cursor: pointer;
}


/* ========================================
   AI CHAT INPUT
======================================== */

.chat-input-area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--white);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.chat-input-area input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 15px;
    border: 1px solid var(--surface-sunken);
    border-radius: 14px;
    background: var(--white);
    color: var(--text-main);
    font-family: inherit;
    font-size: 13px;
    outline: none;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.chat-input-area input::placeholder {
    color: var(--text-muted);
}

.chat-input-area input:focus {
    background: var(--white);
    border-color: var(--border-strong);
    box-shadow:
        0 0 0 3px rgba(0, 0, 0, 0.04);
}

.chat-input-area button {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 14px;
    background: var(--bg-primary);
    color: white;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

@media (hover: hover) {
    .chat-input-area button:hover {
        background: var(--text-main);
        transform: translateY(-1px);
        box-shadow:
            0 5px 15px rgba(0, 0, 0, 0.15);
    }
}

.chat-input-area button:active {
    transform: scale(0.94);
}


/* ========================================
   COURSE DETAIL PAGE
======================================== */

.course-page {
    padding: 34px 0 110px;
}

.course-narrow {
    width: min(720px, calc(100% - 40px));
    text-align: center;
}

.course-back {
    display: inline-block;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

@media (hover: hover) {
    .course-back:hover {
        color: var(--text-main);
    }
}

.course-hero {
    padding: 34px 0 44px;
}

.course-hero .section-label {
    color: var(--text-muted);
}

.course-page h1 {
    font-size: clamp(44px, 7vw, 84px);
    line-height: 0.98;
    letter-spacing: -3px;
    margin-bottom: 20px;
}

.course-tagline {
    color: var(--text-main);
    font-size: clamp(19px, 2.4vw, 23px);
    line-height: 1.5;
}

.course-tagline em {
    font-style: normal;
    font-weight: 700;
    color: var(--text-main);
}

/* Факты уровня: одна строка без коробок. Подпись мелкими
   заглавными над значением, между пунктами — тонкие линии,
   сверху и снизу — линия во всю ширину. */

.course-facts {
    display: flex;
    justify-content: center;

    max-width: 860px;
    margin: 36px auto 0;
    padding: 22px 0;

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.course-fact {
    flex: 1 1 0;
    padding: 2px 22px;

    text-align: center;
}

.course-fact + .course-fact {
    border-left: 1px solid var(--border);
}

.course-fact dt {
    margin: 0 0 8px;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;

    color: var(--butterfly);
}

.course-fact dd {
    margin: 0;

    font-family: var(--font-header);
    font-size: 20px;
    line-height: 1.3;

    color: var(--butterfly-deep);
}

@media (max-width: 760px) {

    .course-facts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 0;
    }

    .course-fact {
        padding: 18px 12px;
    }

    .course-fact + .course-fact {
        border-left: 0;
    }

    .course-fact:nth-child(even) {
        border-left: 1px solid var(--border);
    }

    .course-fact:nth-child(n + 3) {
        border-top: 1px solid var(--border);
    }

    .course-fact dd {
        font-size: 18px;
    }
}

.course-video-section {
    padding: 8px 0 20px;
}

.course-video {
    width: min(900px, 100%);
    margin: 0 auto;
    border: 1px solid var(--border);
    border-radius: 0;
    overflow: hidden;
    background: var(--butterfly-soft);
}

.course-video video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--butterfly-soft);
}

.course-video-caption {
    margin-top: 16px;
    color: var(--text-muted);
    font-size: 14px;
    text-align: center;
}

.course-block {
    padding: 62px 0 0;
}

.course-page h2 {
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-bottom: 22px;
}

.course-lead {
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1.75;
}

.course-lead + .course-lead {
    margin-top: 16px;
}

.course-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 10px;
}

.course-step {
    padding: 34px 28px 30px;
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 26px;
    text-align: left;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

@media (hover: hover) {
    .course-step:hover {
        transform: translateY(-4px);
        box-shadow:
            0 20px 45px rgba(0, 0, 0, 0.07);
    }
}

.course-step-number {
    color: var(--butterfly);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 16px;
}

.course-step h3 {
    font-size: 20px;
    letter-spacing: -0.5px;
    margin-bottom: 10px;
}

.course-step p {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.65;
}

.course-results {
    list-style: none;
    text-align: left;
    margin: 4px auto 0;
    max-width: 560px;
}

.course-results li {
    position: relative;
    padding: 16px 0 16px 34px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    color: var(--text-main);
    font-size: 16px;
    line-height: 1.6;
}

.course-results li:last-child {
    border-bottom: 0;
}

.course-results li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 24px;
    width: 16px;
    height: 7px;
    border-left: 2px solid var(--bg-primary);
    border-bottom: 2px solid var(--bg-primary);
    border-radius: 1px;
    transform: rotate(-45deg);
}

.course-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
    padding: 34px 38px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 0;
}

.course-cta-price span {
    display: block;
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 4px;
}

.course-cta-price strong {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -1.5px;
}

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

.course-actions .btn {
    text-decoration: none;
}


/* ========================================
   AUTH MODAL
======================================== */

.auth-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.auth-modal.active {
    display: flex;
}

.auth-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
}

.auth-modal-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    background: var(--white);
    border-radius: 28px;
    padding: 42px;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.18);
    text-align: center;
}

.auth-modal-close {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 36px;
    height: 36px;
    border: none;
    background: var(--white);
    border-radius: 50%;
    font-size: 24px;
    line-height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

@media (hover: hover) {
    .auth-modal-close:hover {
        background: var(--surface-sunken);
    }
}

.auth-modal-icon {
    font-size: 42px;
    margin-bottom: 14px;
}

.auth-modal-card h2 {
    margin: 10px 0 10px;
    font-size: 30px;
    line-height: 1.15;
}

.auth-modal-subtitle {
    margin: 0 0 26px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.5;
}

.auth-modal-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.auth-modal-form input {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: var(--white);
    font-family: inherit;
    font-size: 15px;
    outline: none;
}

.auth-modal-form input:focus {
    border-color: var(--text-main);
    box-shadow:
        0 0 0 3px rgba(0, 0, 0, 0.06);
}

.auth-modal-submit {
    width: 100%;
    margin-top: 6px;
    min-height: 52px;
}

.auth-modal-error {
    min-height: 20px;
    margin-top: 14px;
    color: var(--live);
    font-size: 14px;
    text-align: center;
}

.auth-modal-switch {
    margin-top: 20px;
    font-size: 14px;
    color: var(--text-muted);
}

.auth-modal-switch button {
    border: none;
    background: none;
    padding: 0;
    margin-left: 5px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    text-decoration: underline;
}

body.modal-open {
    overflow: hidden;
}


/* ========================================
   CHECKOUT
======================================== */

.auth-page {
    background:
        radial-gradient(
            circle at 12% 8%,
            rgba(255, 218, 233, 0.55),
            transparent 38%
        ),
        radial-gradient(
            circle at 88% 12%,
            rgba(220, 235, 255, 0.55),
            transparent 40%
        ),
        var(--bg-secondary);
}

.auth-page .site-header .header-inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.header-account-link {
    color: var(--text-main);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s ease;
}

@media (hover: hover) {
    .header-account-link:hover {
        color: var(--text-main);
    }
}

.auth-wrapper {
    min-height: calc(100vh - 76px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px 80px;
}

.checkout-card {
    width: 100%;
    max-width: 520px;
    padding: 44px;
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 32px;
    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.07);
}

.section-label {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 2px;
    margin-bottom: 14px;
}

.checkout-card h1 {
    font-size: clamp(30px, 5vw, 40px);
    line-height: 1.08;
    letter-spacing: -1.5px;
    margin-bottom: 14px;
}

.checkout-description {
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 30px;
}

.checkout-user,
.checkout-price {
    padding: 20px 22px;
    background: var(--bg-secondary);
    border-radius: 20px;
    margin-bottom: 12px;
}

.checkout-user span,
.checkout-price span {
    display: block;
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 6px;
}

.checkout-user strong {
    display: block;
    font-size: 17px;
}

.checkout-user small {
    display: block;
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 2px;
}

.checkout-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 22px;
}

.checkout-price span {
    margin-bottom: 0;
}

.checkout-price strong {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -1px;
}

.checkout-test-note {
    padding: 14px 16px;
    background: var(--butterfly-soft);
    border: 1px solid rgba(150, 120, 200, 0.15);
    border-radius: 16px;
    color: var(--accent-gold);
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 24px;
}

.checkout-button {
    width: 100%;
}

.auth-back {
    display: inline-block;
    margin-top: 22px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

@media (hover: hover) {
    .auth-back:hover {
        color: var(--text-main);
    }
}


/* ========================================
   ABOUT ESTHERWOW
======================================== */

.about-section {
    position: relative;
    padding: 130px 0 45px;
    background: var(--bg-secondary);
    overflow: hidden;
}


.about-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 35px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.about-line {
    width: 32px;
    height: 1px;
    background: var(--text-muted);
}

.about-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    font-size: 30px;
    transform: rotate(-8deg);
}


/* ========================================
   CARD LEVEL
======================================== */

.card-level {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(197, 160, 89, 0.3);
    border-radius: 4px;
    padding: 40px;
    backdrop-filter: blur(10px);
    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
}

@media (hover: hover) {
    .card-level:hover {
        border-color: var(--butterfly-deep);
        transform: translateY(-5px);
    }
}


/* ========================================
   MOBILE / TABLET
======================================== */

@media (max-width: 900px) {

    .reviews-grid {
        grid-template-columns: 1fr;
    }

    .courses-grid {
        grid-template-columns: 1fr;
    }

    .course-card {
        min-height: 400px;
    }

    .contact-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .contact-info {
        text-align: left;
    }

}


@media (max-width: 700px) {

    .container {
        width: min(100% - 28px, 1180px);
    }

    .nav {
        height: 70px;
    }

    .nav nav {
        gap: 12px;
    }

    .nav nav a {
        font-size: 12px;
    }

    .hero {
        min-height: 620px;
    }

    .hero-flex {
        width: min(100% - 28px, 1180px);
        min-height: 620px;
        gap: 20px;
    }

    .hero-content {
        padding: 80px 0 !important;
    }

    .hero h1 {
        font-size: clamp(48px, 14vw, 72px);
        letter-spacing: -3px;
    }

    .hero p {
        font-size: 17px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .courses-section {
        padding: 80px 0;
    }

    .section-heading h2,
    .contact-card h2 {
        font-size: 42px;
        letter-spacing: -2px;
    }

    .course-card {
        min-height: 390px;
        padding: 24px;
    }

    .reviews-section {
        padding: 80px 0;
    }

    .review-card {
        padding: 26px 22px;
    }

    .contact-section {
        padding: 70px 0;
    }

    .contact-card {
        padding: 35px 25px;
        border-radius: 24px;
    }

    .footer-content {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .chat-button {
        right: 18px;
        bottom: 18px;
        width: 58px;
        height: 58px;
    }

    .chat-window {
        right: 14px;
        bottom: 88px;
        width: calc(100vw - 28px);
        height: min(560px, calc(100vh - 110px));
        border-radius: 20px;
    }

    .chat-quick-buttons {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
        padding: 10px 12px;
    }

    .chat-quick-buttons .quick-question {
        padding: 8px 11px;
        font-size: 12px;
    }

    .course-page {
        padding: 24px 0 80px;
    }

    .course-hero {
        padding: 26px 0 34px;
    }

    .course-page h1 {
        letter-spacing: -2px;
    }

    .course-block {
        padding: 46px 0 0;
    }

    .course-video {
        border-radius: 0;
    }

    .course-steps {
        grid-template-columns: 1fr;
    }

    .course-step {
        padding: 26px 22px;
    }

    .course-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 28px 22px;
        border-radius: 24px;
    }

    .course-actions {
        flex-direction: column;
    }

    .course-actions .btn {
        width: 100%;
    }

    .about-section {
        padding: 90px 0 35px;
    }

    .about-eyebrow {
        margin-bottom: 25px;
    }

    .about-symbol {
        width: 55px;
        height: 55px;
        flex-shrink: 0;
        font-size: 21px;
    }

}


@media (max-width: 600px) {

    .auth-modal {
        padding: 15px;
    }

    .auth-modal-card {
        padding: 34px 22px;
        border-radius: 22px;
    }

    .auth-modal-card h2 {
        font-size: 26px;
    }

    .auth-wrapper {
        padding: 35px 16px 60px;
    }

    .checkout-card {
        padding: 30px 22px;
        border-radius: 24px;
    }

    .checkout-price {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}


/* ========================================
   ABOUT — EXTRA SMALL DEVICES
======================================== */

@media (max-width: 420px) {

}
/* ========================================
   CONTACT
======================================== */

.contact-section {
    background: var(--bg-secondary);
    padding: 90px 0 0;

    border-top: 1px solid rgba(0, 0, 0, 0.08);
}


/* ----------------------------------------
   HEADER
---------------------------------------- */

.contact-header {
    max-width: 720px;

    padding-bottom: 55px;

    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.contact-header .eyebrow {
    margin-bottom: 22px;
}

.contact-header h2 {
    margin: 0;

    font-family: var(--font-header);

    font-size: clamp(48px, 6vw, 76px);
    line-height: 0.95;
    font-weight: 500;

    letter-spacing: -0.03em;

    color: var(--text-main);
}

.contact-header p {
    max-width: 540px;

    margin: 28px 0 0;

    font-size: 15px;
    line-height: 1.75;

    color: var(--text-muted);
}


/* ----------------------------------------
   CONTACT GRID
---------------------------------------- */

.contact-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}


/* ----------------------------------------
   CONTACT ITEM
---------------------------------------- */

.contact-item {
    min-height: 260px;

    padding: 42px 45px 42px 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.contact-item + .contact-item {
    padding-left: 45px;
    padding-right: 0;

    border-right: none;
}

.contact-label {
    margin-bottom: 25px;

    font-size: 10px;
    line-height: 1;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: var(--butterfly-deep);
}


/* ----------------------------------------
   PHONE
---------------------------------------- */

.contact-value {
    font-family: var(--font-header);

    font-size: clamp(30px, 3vw, 43px);
    line-height: 1.1;

    letter-spacing: -0.02em;

    color: var(--text-main);

    text-decoration: none;
}

a.contact-value {
    transition: color 0.2s ease;
}

@media (hover: hover) {
    a.contact-value:hover {
        color: var(--butterfly-deep);
    }
}

.contact-note {
    margin-top: 14px;

    font-size: 12px;
    letter-spacing: 0.04em;

    color: var(--text-muted);
}


/* ----------------------------------------
   AI
---------------------------------------- */

.contact-ai-text {
    margin: 0;

    color: var(--text-main);
}

.contact-button {
    display: inline-flex;
    align-items: center;

    gap: 18px;

    margin-top: 22px;
    padding: 0 0 8px;

    background: none;
    border: none;
    border-bottom: 1px solid rgba(36, 32, 30, 0.45);

    font-family: inherit;

    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: var(--text-main);

    cursor: pointer;

    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}

.contact-button span {
    font-size: 17px;

    transition: transform 0.2s ease;
}

@media (hover: hover) {
    .contact-button:hover {
        color: var(--butterfly-deep);

        border-color: var(--butterfly-deep);
    }
}

@media (hover: hover) {
    .contact-button:hover span {
        transform: translateX(4px);
    }
}


/* ----------------------------------------
   FOOTER LINE
---------------------------------------- */

/* ========================================
   CONTACT — MOBILE
======================================== */

@media (max-width: 768px) {

    .contact-section {
        padding-top: 70px;
    }

    .contact-header {
        padding-bottom: 45px;
    }

    .contact-header h2 {
        font-size: 54px;
    }

    .contact-header p {
        font-size: 14px;
        line-height: 1.7;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-item {
        min-height: auto;

        padding: 35px 0;

        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .contact-item + .contact-item {
        padding: 35px 0;

        border-bottom: none;
    }

    .contact-value {
        font-size: 34px;
    }

}

/* ========================================
   ПЛАШКА ПРЯМОГО ЭФИРА

   Висит над шапкой, пока Эстер в эфире.
   В остальное время её в разметке нет.
======================================== */

.live-banner {
    position: relative;
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;

    padding: 13px 20px;

    background: var(--bg-primary);
    color: var(--white);

    text-decoration: none;

    transition: background 0.2s ease;
}

@media (hover: hover) {
    .live-banner:hover {
        background: var(--text-main);
    }
}

.live-banner-dot {
    width: 8px;
    height: 8px;

    background: var(--live);

    border-radius: 50%;

    animation: live-banner-pulse 1.8s ease-in-out infinite;
}

@keyframes live-banner-pulse {

    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.35;
        transform: scale(0.8);
    }
}

.live-banner-text {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;

    text-align: center;
}

.live-banner-action {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;

    color: var(--accent-gold);
}


@media (max-width: 680px) {

    .live-banner {
        gap: 10px;

        padding: 11px 16px;
    }

    .live-banner-text {
        font-size: 13px;
    }
}


/* ========================================
   ТЕЛЕФОН: ПОЛЯ ВВОДА

   Safari на iOS приближает страницу, когда
   фокусируется поле с кеглем меньше 16px.
   Ставим 16px — зум перестаёт срабатывать.
======================================== */

@media (max-width: 760px) {

    input,
    textarea,
    select,
    .chat-input-area input {
        font-size: 16px;
    }

    .chat-input-area button {
        min-width: 44px;
        min-height: 44px;
    }

}





/* ========================================
   ТЕЛЕФОН: ШАПКА И ПЕРВЫЙ ЭКРАН

   Здесь собрано то, из-за чего страница
   не помещалась в экран телефона.
======================================== */

@media (max-width: 700px) {

    /* ШАПКА

       Логотип и пять пунктов меню в одну строку
       не влезают: логотип сжимался в две строки,
       а «Контакты» уезжали за край. Ставим
       логотип сверху, меню — строкой под ним. */

    .nav {
        height: auto;

        flex-direction: column;
        align-items: flex-start;
        gap: 8px;

        padding: 12px 0;
    }

    .logo {
        white-space: nowrap;
    }

    .nav nav {
        flex-wrap: wrap;
        gap: 16px;

        width: 100%;
    }

    .nav nav a {
        font-size: 13px;
    }


    /* ЗАГОЛОВОК

       У строк заголовка стоял запрет переноса,
       поэтому они не могли поместиться в экран
       ни при каком размере шрифта. На телефоне
       перенос разрешаем. */

    .hero-line {
        white-space: normal !important;
    }

    .hero h1 {
        max-width: 100% !important;

        font-size: clamp(30px, 8.5vw, 46px);
        letter-spacing: -1px;
    }

    .hero p {
        max-width: 100%;
    }


    /* Первый экран во весь рост телефона —
       это слишком: под текстом оставалась
       огромная пустота. */

    .hero,
    .hero-flex {
        min-height: 0;
    }

    .hero {
        padding: 40px 0 50px;
    }

    /* ПЕРВЫЙ ЭКРАН В КОЛОНКУ

       Текст и бабочка стояли рядом, и на телефоне
       тексту доставалась половина ширины: заголовок
       ломался на шесть строк. Ставим друг под друга.

       Отдельная беда — отступ у картинки, считавшийся
       как (1180px - 100vw) / 2. На широком экране он
       отрицательный и уводит бабочку за край, а на
       телефоне превращался в +395px и распирал блок. */

    .hero-flex {
        flex-direction: column !important;
        align-items: stretch !important;

        gap: 24px;
    }

    .hero-content {
        max-width: 100% !important;

        padding: 10px 0 0 !important;
    }

    /* Бабочка целиком, прижата вправо — так же,
       как в версии для компьютера. */

    .hero-image {
        flex: none !important;
        width: 100% !important;

        justify-content: flex-end;

        margin-right: 0;
    }

    .hero-image img {
        width: min(320px, 78vw);

        /* У контейнера по 14px полей — этим отступом
           бабочка встаёт вплотную к краю экрана. */

        margin-right: -14px;
    }

    .hero-buttons {
        flex-wrap: wrap;
    }

}


/* ========================================
   МЕНЮ-БУРГЕР

   Кнопку добавляет ui.js. На широком экране
   её нет — меню и так помещается в строку.
======================================== */

.nav-burger {
    display: none;
}

.nav {
    position: relative;
}


/* ========================================
   КАРУСЕЛЬ КУРСОВ: ТОЧКИ
======================================== */

.courses-dots {
    display: none;

    justify-content: center;
    gap: 8px;

    margin-top: 20px;
}

.courses-dot {
    width: 8px;
    height: 8px;

    padding: 0;

    background: rgba(0, 0, 0, 0.18);

    border: 0;
    border-radius: 50%;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.courses-dot.active {
    background: var(--text-main);

    transform: scale(1.3);
}


@media (max-width: 700px) {

    /* ШАПКА С БУРГЕРОМ

       Отменяем раскладку в две строки: логотип
       слева, кнопка справа, меню выпадает вниз. */

    .nav {
        height: 70px;

        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        gap: 0;
        padding: 0;
    }

    .nav-burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;

        width: 44px;
        height: 44px;

        margin-right: -10px;
        padding: 0 10px;

        background: none;
        border: 0;

        cursor: pointer;
    }

    .nav-burger span {
        display: block;

        height: 2px;

        background: var(--text-main);

        border-radius: 2px;

        transition:
            transform 0.25s ease,
            opacity 0.2s ease;
    }

    /* Открытое меню — крестик */

    .nav.nav-open .nav-burger span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .nav.nav-open .nav-burger span:nth-child(2) {
        opacity: 0;
    }

    .nav.nav-open .nav-burger span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }


    /* Размытие фона в шапке создаёт систему координат
       для position: fixed внутри неё — панель считала бы
       края от шапки, а не от экрана. Здесь его убираем. */

    .site-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;

        background: rgba(255, 250, 247, 0.97);
    }


    /* ПАНЕЛЬ МЕНЮ

       Выезжает справа. Прячем сдвигом, а не display:
       иначе не будет плавного движения. */

    .nav nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 200;

        width: min(290px, 80vw);

        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;

        padding: 86px 24px 28px;

        background: var(--bg-secondary);

        box-shadow: -24px 0 60px rgba(0, 0, 0, 0.18);

        overflow-y: auto;
        overscroll-behavior: contain;

        transform: translateX(100%);

        /* Пока панель убрана, по ней нельзя попасть
           пальцем и нельзя перейти табом */

        visibility: hidden;
        pointer-events: none;

        transition:
            transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
            visibility 0s linear 0.32s;
    }

    .nav.nav-open nav {
        transform: translateX(0);

        visibility: visible;
        pointer-events: auto;

        transition:
            transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
            visibility 0s;
    }

    .nav nav a {
        padding: 16px 0;

        font-size: 16px;

        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .nav nav a:last-child {
        border-bottom: 0;
    }


    /* Кнопка поверх панели — ею же меню и закрывается */

    .nav-burger {
        position: relative;
        z-index: 300;
    }


    /* ЗАТЕМНЕНИЕ ПОД ПАНЕЛЬЮ */

    .nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 150;

        background: rgba(0, 0, 0, 0.35);

        opacity: 0;
        pointer-events: none;

        transition: opacity 0.32s ease;
    }

    .nav-backdrop.visible {
        opacity: 1;
        pointer-events: auto;
    }


    /* КАРТОЧКИ КУРСОВ ЛИСТАЮТСЯ

       Вместо колонки из трёх карточек — полоса,
       которая листается пальцем. Прилипание
       (scroll-snap) делает браузер сам. */

    /* ЛЕНТА КАРТОЧЕК

       Одна карточка в центре внимания, соседние
       выглядывают краями — видно, что есть куда
       листать. */

    .courses-grid {
        display: flex;

        grid-template-columns: none;

        gap: 14px;

        /* Боковые поля дают первой и последней
           карточке встать ровно по центру */

        padding: 0 8% 4px;

        overflow-x: auto;

        scroll-snap-type: x mandatory;

        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;

        /* Своя полоса прокрутки тут только мешает */

        scrollbar-width: none;
    }

    .courses-grid::-webkit-scrollbar {
        display: none;
    }

    .courses-grid .course-card {
        flex: 0 0 84%;

        scroll-snap-align: center;

        /* Один смах — одна карточка: без этого
           резкое движение пролистывает через две. */

        scroll-snap-stop: always;
    }

    .courses-dots {
        display: flex;
    }

}


/* ========================================
   ПЕРЕЛИСТЫВАТЕЛЬ КУРСОВ

   Окно и ленту создаёт ui.js. На компьютере
   карточки остаются сеткой — слайдер выключен.
======================================== */

.courses-viewport {
    /* На компьютере обёртка ничего не делает: карточки
       остаются сеткой, и обрезать их нельзя — срежутся
       тени и скруглённые края. Обрезка включается
       вместе со слайдером, ниже по файлу. */

    overflow: visible;
}

.courses-controls {
    display: none;
}

.courses-controls[hidden] {
    display: none;
}

.courses-arrow {
    width: 40px;
    height: 40px;

    padding: 0;

    background: var(--white);
    color: var(--text-main);

    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;

    font-size: 22px;
    line-height: 1;

    cursor: pointer;

    transition: opacity 0.2s ease;
}

.courses-arrow:disabled {
    opacity: 0.3;
    cursor: default;
}


@media (max-width: 700px) {

    /* Лента: одна карточка во всю ширину окна */

    .courses-grid.is-slider {
        display: flex;

        grid-template-columns: none;

        gap: 16px;

        padding: 0;
        overflow: visible;

        /* Вертикальную прокрутку оставляем странице,
           горизонтальный жест забираем себе — без этого
           браузер перехватывает смахивание пальцем. */

        touch-action: pan-y;

        transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);

        will-change: transform;
    }

    .courses-viewport {
        /* Видно ровно одну карточку, соседние скрыты */

        overflow: hidden;

        touch-action: pan-y;

        /* Тянуть мышью по ленте — не выделять текст */

        user-select: none;
        -webkit-user-select: none;
    }

    .courses-grid.is-slider .course-card {
        flex: 0 0 100%;
    }

    .courses-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;

        margin-top: 20px;
    }

    .courses-dots {
        display: flex;
    }


    /* Подъём и тень — это про наведение мышью.
       На телефоне их быть не должно: браузеры
       иногда применяют :hover после касания. */

    .course-card,
    .course-card.featured {
        transform: none !important;

        box-shadow: none !important;
    }

}


/* ========================================
   MIMI AI — ОФОРМЛЕНИЕ ВИДЖЕТА

   Правила идут после исходных, поэтому
   переопределяют их без !important.
======================================== */

/* КНОПКА ВЫЗОВА */

.chat-button {
    width: 64px;
    height: 64px;

    /* Тёплый градиент вместо плоского чёрного —
       в палитре сайта, а не «как у всех». */

    background:
        radial-gradient(
            circle at 30% 25%,
            var(--text-main) 0%,
            var(--bg-primary) 60%
        );

    font-size: 26px;

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.22),
        0 0 0 6px rgba(197, 160, 89, 0.12);
}

@media (hover: hover) {
    .chat-button:hover {
        box-shadow:
            0 18px 44px rgba(0, 0, 0, 0.28),
            0 0 0 9px rgba(197, 160, 89, 0.18);
    }
}


/* ОКНО */

.chat-window {
    border-radius: 28px;

    border-color: rgba(0, 0, 0, 0.05);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.2);
}


/* ШАПКА */

.chat-header {
    gap: 12px;

    padding: 16px 18px;

    background:
        linear-gradient(
            135deg,
            var(--text-main) 0%,
            var(--bg-primary) 55%,
            var(--text-main) 100%
        );
}

.chat-avatar {
    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;

    font-size: 20px;
}

.chat-header-info {
    flex: 1;
    min-width: 0;
}

.chat-header strong {
    font-family: var(--font-header);

    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* «на связи» с живой точкой */

.chat-status {
    display: flex;
    align-items: center;
    gap: 6px;

    color: rgba(255, 255, 255, 0.5);

    font-size: 11px;
}

.chat-status i {
    width: 6px;
    height: 6px;

    background: var(--green);

    border-radius: 50%;

    animation: mimi-pulse 2s ease-in-out infinite;
}

@keyframes mimi-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}


/* СООБЩЕНИЯ */

.chat-messages {
    background: var(--bg-secondary);
}

.chat-message {
    max-width: 85%;

    padding: 12px 15px;

    font-size: 14px;
    line-height: 1.55;
}

.chat-message.bot {
    background: var(--white);
    color: var(--text-main);

    border: 1px solid rgba(0, 0, 0, 0.05);

    /* Скруглены три угла из четырёх: нижний левый
       острее — сообщение «растёт» из аватара. */

    border-radius: 18px 18px 18px 5px;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.chat-message.user {
    background: var(--bg-primary);
    color: var(--white);

    border-radius: 18px 18px 5px 18px;
}


/* ПОЛЕ ВВОДА */

.chat-input-area input,
.chat-form input {
    border-radius: 999px;
}

.chat-input-area button,
.chat-form button {
    border-radius: 50%;
}


/* ========================================
   ФОН ЗА КРАЯМИ СТРАНИЦЫ

   Когда страницу «оттягивают» за нижний край,
   из-под неё проступал фон body — светлый,
   хотя подвал тёмный. Отсюда белая полоска.

   У html фона не было вовсе, поэтому задаём
   ему две половины: сверху цвет первого экрана,
   снизу цвет подвала. Закреплённый фон не едет
   при прокрутке, так что видно всегда нужную.
======================================== */

html {
    background:
        linear-gradient(
            to bottom,
            var(--bg-secondary) 0%,
            var(--bg-secondary) 50%,
            var(--bg-primary) 50%,
            var(--bg-primary) 100%
        );

    background-attachment: fixed;
}


/* ========================================
   ТЕКСТ УРОВНЯ ИЗ ПРЕЗЕНТАЦИИ
======================================== */

/* Дословный текст автора. Сплошные одинаковые абзацы
   читались как статья, поэтому смысловые части оформлены
   по-разному: вступление крупно, перечисление карточками,
   итог выделен подложкой. Слова при этом не менялись. */

.course-en-section {
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.course-en-block {
    padding: 40px 0 44px;
    border-bottom: 1px solid var(--border);

    text-align: left;
}

.course-en-block:last-child {
    border-bottom: 0;
}

.course-en-title {
    margin: 0 0 26px;

    font-family: var(--font-header);
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1px;

    color: var(--butterfly-deep);
    text-align: left;
}

/* Вступление — то, ради чего человек читает дальше */

.course-en-lead {
    margin: 0 0 24px;

    font-family: var(--font-header);
    font-size: clamp(21px, 2.1vw, 27px);
    line-height: 1.35;

    white-space: pre-line;
    color: var(--butterfly-deep);
}

.course-en-text {
    margin: 0 0 18px;

    white-space: pre-line;

    font-size: 16px;
    line-height: 1.7;
    color: var(--text-main);
}

/* Перечисление — карточками в ряд, а не строчками */

.course-en-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;

    margin: 0 0 24px;
    padding: 0;

    list-style: none;

    background: var(--border);
    border: 1px solid var(--border);
}

.course-en-list li {
    padding: 22px 20px;
    background: var(--surface);

    font-family: var(--font-header);
    font-size: 19px;
    line-height: 1.3;

    color: var(--text-main);
}

/* Итог уровня — на подложке цвета марки */

.course-en-result {
    margin: 0;
    padding: 20px 22px;

    background: var(--butterfly-soft);
    border-left: 2px solid var(--butterfly);

    font-size: 16px;
    line-height: 1.7;
    color: var(--butterfly-deep);
}

/* Итог и состав уровня: подпись сверху, текст под ней */

.course-about-box {
    margin: 0 0 14px;
}

.course-about-label {
    display: block;
    margin-bottom: 6px;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.2px;
}

.course-about-experience {
    padding: 20px 22px;

    border: 1px solid var(--border);

    font-size: 16px;
    line-height: 1.7;
    color: var(--text-main);
}

.course-about-after {
    margin-top: 22px;
}

/* Путь по уровням: текущий выделен */

.course-journey {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;

    margin: 0;
    padding: 0;

    list-style: none;

    background: var(--border);
    border: 1px solid var(--border);
}

.course-journey li {
    background: var(--surface);
}

.course-journey a {
    display: block;
    height: 100%;
    padding: 22px 20px;

    color: var(--text-main);
    text-decoration: none;
}

.course-journey-name {
    display: block;
    margin-bottom: 10px;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.2px;

    color: var(--butterfly-deep);
}

.course-journey em {
    font-family: var(--font-header);
    font-size: 18px;
    line-height: 1.35;
}

.course-journey .is-here {
    background: var(--butterfly-soft);
    box-shadow: inset 0 2px 0 var(--butterfly);
}

@media (max-width: 700px) {

    .course-journey {
        grid-template-columns: minmax(0, 1fr);
    }
}

.course-en-block > *:last-child {
    margin-bottom: 0;
}

@media (max-width: 700px) {

    .course-en-block {
        padding: 30px 0 32px;
    }

    .course-en-list li {
        font-size: 17px;
        padding: 18px 16px;
    }
}

/* Шапка липкая: без этого отступа блок, к которому ведёт
   ссылка с меткой, оказывается наполовину под ней */

section[id] {
    scroll-margin-top: 90px;
}


/* =========================================
   СТРАНИЦА УРОВНЯ: БЕЗ ЧЁРНЫХ ПЯТЕН
   Подвала у неё нет, и внизу просвечивал тёмный
   фон, приготовленный для подвала. Кнопка покупки —
   в цвете марки, как остальные акценты страницы.
========================================= */

body[data-course-slug] {
    min-height: 100vh;
    background: var(--bg-secondary);
}

.course-page .btn.course-buy-button {
    background: var(--butterfly-deep);
    border-color: var(--butterfly-deep);
    color: #fff;
}

.course-page .btn.course-buy-button:hover {
    background: var(--butterfly);
    border-color: var(--butterfly);
}


.course-legal {
    padding: 0 0 32px;
}


/* Интро о курсе на главной */

.home-intro-section {
    padding: 72px 0 24px;
}

.home-intro-label {
    margin-bottom: 20px;
    text-align: center;
}


/* Состав уровня — столбиком, с тонкой меткой у каждого пункта */

.course-about-list {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.course-about-list li {
    position: relative;
    padding: 6px 0 6px 20px;
    line-height: 1.55;
}

.course-about-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 16px;
    width: 8px;
    height: 1px;
    background: var(--butterfly);
}

/* Лист ожидания Level III */

.course-waitlist {
    align-items: flex-start;
}

.course-waitlist .course-cta-price {
    flex: 1 1 280px;
}

.course-waitlist .course-cta-price strong {
    display: block;
    font-family: var(--font-header);
    font-size: 30px;
    font-weight: 500;
    letter-spacing: 0;
}

.course-waitlist .course-cta-price p {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.course-waitlist-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 280px;
}

.course-waitlist-form input {
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--border);
    background: var(--white);
    font: inherit;
    font-size: 15px;
}

.course-waitlist-form input:focus {
    outline: none;
    border-color: var(--butterfly);
}

.course-waitlist-note {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--butterfly-deep);
}

.course-waitlist-note.is-error {
    color: #b8342c;
}


/* ========================================
   LEVEL III — открытая продажа
======================================== */

.course-greeting {
    font-family: var(--font-header);
    font-size: 21px;
    color: var(--butterfly-deep);
}

/* Формула уровня — отдельной крупной строкой */
.course-formula {
    margin: 4px 0 22px;
    padding: 16px 20px;

    background: var(--butterfly-soft);
    border-left: 2px solid var(--butterfly);

    font-family: var(--font-header);
    font-size: 20px;
    line-height: 1.5;
    color: var(--butterfly-deep);
}

.course-about-heading {
    margin: 34px 0 14px;

    font-family: var(--font-header);
    font-size: 24px;
    font-weight: 500;
    color: var(--text-main);
}

.course-about-box .course-about-list,
.course-for-you {
    margin: 0 0 14px;
    padding-left: 20px;
    line-height: 1.7;
}

.course-cta-open {
    align-items: flex-start;
}

.course-cta-open .course-cta-price {
    flex: 1 1 280px;
}

.course-cta-open .course-cta-price p {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.course-cta-open .course-cta-price b {
    color: var(--text-main);
}

.course-cta-open .course-actions {
    flex: 1 1 280px;
    flex-direction: column;
    align-items: stretch;
}

.course-cta-note {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.course-cta-links {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
}

.course-cta-links a {
    color: var(--butterfly-deep);
}

.course-closing {
    max-width: 720px;
    margin: 34px auto 0;
    padding: 0 16px;

    text-align: center;
    font-family: var(--font-header);
    font-size: 20px;
    line-height: 1.6;
    font-style: italic;
    color: var(--butterfly-deep);
}


/* ========================================
   LEVEL III — блоки описания (столбцы, карточки, списки)
======================================== */

.course-narrow.course-wide {
    width: min(980px, calc(100% - 40px));
}

.course-wide .course-en-text,
.course-wide .course-greeting {
    max-width: 760px;
}

/* Короткая фраза послания — крупной цитатой */
.course-pull {
    margin: 26px 0;
    padding-left: 22px;
    border-left: 2px solid var(--butterfly);

    font-family: var(--font-header);
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.3;
    color: var(--butterfly-deep);
    text-align: left;
}

/* Формула: шесть шагов в ряд */
.course-formula-steps {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1px;

    margin: 6px 0 26px;
    padding: 0;
    list-style: none;

    background: var(--border);
    border: 1px solid var(--border);
}

.course-formula-steps li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;

    padding: 16px 14px;
    background: var(--butterfly-soft);

    font-family: var(--font-header);
    font-size: 17px;
    line-height: 1.25;
    color: var(--butterfly-deep);
    text-align: left;
}

.course-formula-num {
    font-family: inherit;
    font-size: 12px;
    letter-spacing: 1.2px;
    color: var(--butterfly);
}

/* Как устроен путь — карточки */
.course-path-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1px;

    margin: 0 0 30px;
    padding: 0;
    list-style: none;

    background: var(--border);
    border: 1px solid var(--border);
}

.course-path-cards li {
    padding: 24px 22px;
    background: var(--white, #fff);
    text-align: left;
}

.course-card-num {
    display: block;
    margin-bottom: 10px;

    font-size: 12px;
    letter-spacing: 1.4px;
    color: var(--butterfly);
}

.course-path-cards strong {
    display: block;
    margin-bottom: 8px;

    font-family: var(--font-header);
    font-size: 21px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--text-main);
}

.course-path-cards p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-muted);
}

/* Я лично рядом — выделенный блок */
.course-personal {
    margin: 34px 0 30px;
    padding: 30px 30px 14px;

    background: var(--butterfly-soft);
    border-left: 2px solid var(--butterfly);
    text-align: left;
}

.course-personal .course-about-heading {
    margin-top: 0;
}

.course-personal-lead {
    margin: 0 0 22px;

    font-family: var(--font-header);
    font-size: clamp(20px, 2.3vw, 26px);
    line-height: 1.35;
    color: var(--butterfly-deep);
}

.course-personal-cols {
    columns: 2 300px;
    column-gap: 36px;
}

.course-personal-cols .course-en-text {
    break-inside: avoid;
    max-width: none;
}

/* Что изменится — плитки с галочками */
.course-check-grid,
.course-about-list-2col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px 26px;

    margin: 8px 0 14px;
    padding: 0;
    list-style: none;
    text-align: left;
}

.course-check-grid li,
.course-about-list-2col li {
    position: relative;
    padding-left: 28px;

    font-size: 15.5px;
    line-height: 1.6;
}

.course-check-grid li::before,
.course-about-list-2col li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.45em;

    width: 14px;
    height: 8px;
    border-left: 2px solid var(--butterfly);
    border-bottom: 2px solid var(--butterfly);
    transform: rotate(-45deg);
}

/* Тебе сюда, если — три карточки */
.course-for-you-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1px;

    margin: 0 0 18px;
    padding: 0;
    list-style: none;

    background: var(--border);
    border: 1px solid var(--border);
}

.course-for-you-cards li {
    padding: 22px 20px;
    background: var(--white, #fff);

    font-family: var(--font-header);
    font-size: 18px;
    line-height: 1.4;
    color: var(--text-main);
    text-align: left;
}

@media (max-width: 760px) {
    .course-formula-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .course-personal {
        padding: 22px 18px 8px;
    }
}

/* Галочка вместо ромбика старого списка */
.course-about-list-2col li::before {
    background: none;
    border-top: 0;
    border-right: 0;
    border-radius: 0;
}

/* Пять карточек пути: три сверху, две снизу — без пустой клетки */
@media (min-width: 761px) {
    .course-path-cards {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .course-path-cards li:nth-child(-n+3) {
        grid-column: span 2;
    }

    .course-path-cards li:nth-child(n+4) {
        grid-column: span 3;
    }
}

@media (max-width: 760px) {
    .course-path-cards {
        grid-template-columns: 1fr;
    }
}

/* Отзыв: главная фраза крупно, полный текст — под «Читать полностью» */
.review-lead {
    margin: 0 0 12px;

    font-family: var(--font-header);
    font-size: 21px;
    line-height: 1.35;
    color: var(--butterfly-deep);
}

.review-lead::before {
    content: "«";
}

.review-lead::after {
    content: "»";
}

html:not([lang="ru"]) .review-lead::before {
    content: "“";
}

html:not([lang="ru"]) .review-lead::after {
    content: "”";
}

/* Кнопки соцсетей в подвале (список — data/socials.json) */
.footer-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    padding: 28px 0 4px;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 22px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--white);
    transition: border-color .25s, background .25s, color .25s, transform .25s var(--ease-soft);
}

@media (hover: hover) {
    .footer-social a:hover {
        border-color: var(--gold);
        background: var(--gold);
        color: var(--ink);
        transform: translateY(-2px);
    }
}

/* Подпись на первом экране: «Эстер Wow — Identity Muse».
   Имя, а не категория — поэтому тише заголовка и крупнее мелкого
   текста. Позиционирование от 29.10.2026. */

.hero-signature {
    margin: 18px 0 28px;

    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;

    opacity: 0.8;
}

@media (max-width: 760px) {
    .hero-signature {
        font-size: 14px;
        margin: 14px 0 22px;
    }
}