/* СТРАНИЦА УРОВНЯ — оформление в стиле раздела «Книги»
 *
 * Подключается после style.css и ui-kit.css и только
 * переодевает блоки: порядок и тексты те же.
 * Первый экран — тёмно-синяя сцена с фото крыла и мягким
 * голубым светом, золото — второй акцент, крупный Cormorant,
 * плоские кнопки, тонкие линии. Появление при прокрутке
 * и счёт чисел — static/course-motion.js; при
 * prefers-reduced-motion всё стоит на месте.
 */

.crs {
    --crs-ink: #0b1d2b;
    --crs-ink-2: #10304a;
    --crs-gold: #d8b46a;
    --crs-gold-soft: rgba(216, 180, 106, 0.35);
    --crs-line: rgba(29, 79, 107, 0.12);
    --crs-ease: cubic-bezier(.2, .7, .2, 1);

    padding: 0;
    overflow-x: clip;
}


/* ---------- Кнопки (свои, плоские) ---------- */

.crs .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 50px;
    padding: 12px 30px;

    border-radius: 0;

    font: 600 12px/1.35 var(--font-body);
    text-align: center;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    text-decoration: none;

    transition:
        transform .25s var(--crs-ease),
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}

.crs .btn:focus-visible {
    outline: 2px solid var(--crs-gold);
    outline-offset: 3px;
}

/* Главная кнопка на тёмном — золотая, при наведении белая */
.crs .btn.course-buy-button,
.crs .course-page .btn.course-buy-button {
    background: var(--crs-gold);
    border: 1px solid var(--crs-gold);
    color: var(--crs-ink);
}

@media (hover: hover) {
    .crs .btn.course-buy-button:hover {
        transform: translateY(-2px);
        background: #fff;
        border-color: #fff;
        color: var(--crs-ink);
        box-shadow: 0 16px 30px -16px rgba(0, 0, 0, 0.6);
    }
}

.crs .btn.course-buy-button.course-purchased {
    opacity: 1;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
}

/* Вторая кнопка — подпись с золотой чертой */
.crs .btn.btn-secondary {
    min-height: 0;
    padding: 6px 2px;

    background: none;
    border: 0;
    border-bottom: 1px solid var(--crs-gold);

    color: #fff;
    font-size: 12px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

@media (hover: hover) {
    .crs .btn.btn-secondary:hover { color: var(--crs-gold); }
}


/* ---------- Первый экран: тёмная сцена ---------- */

.crs-stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 30px 0 96px;

    background: var(--crs-ink);
    color: #fff;
}

.crs-stage__bg {
    position: absolute;
    inset: -40px;
    z-index: -1;

    background:
        radial-gradient(55% 45% at 50% 30%, rgba(56, 183, 215, 0.22), transparent 70%),
        radial-gradient(40% 40% at 50% 82%, rgba(56, 183, 215, 0.12), transparent 70%),
        linear-gradient(180deg, rgba(8, 21, 32, 0.55), rgba(8, 21, 32, 0.94) 78%),
        url("/static/images/hero.jpg") center 30% / cover;

    transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(1.04);
    transition: transform .8s var(--crs-ease);
}

/* нижняя кромка сцены — тонкая золотая линия */
.crs-stage::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(420px, 60%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--crs-gold-soft), transparent);
}

.crs .course-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

@media (hover: hover) {
    .crs .course-back:hover { color: var(--crs-gold); }
}

.crs-stage .level-voice p,
.crs .course-tagline,
.crs .course-closing,
.crs .level-bridge-text,
.crs .course-en-lead {
    text-wrap: balance;
}

.crs-stage .level-voice p {
    margin-top: 40px;
    color: rgba(255, 255, 255, 0.82);
}

.crs .course-hero {
    padding: 56px 0 56px;
}

.crs .course-hero .section-label {
    margin-bottom: 22px;

    color: var(--crs-gold);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 4px;
}

.crs .course-hero h1 {
    margin: 0 0 26px;

    color: #fff;
    font-family: var(--font-header);
    font-size: clamp(60px, 10vw, 128px);
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: 0.02em;

    text-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

.crs .course-tagline {
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(17px, 1.8vw, 20px);
    line-height: 1.6;
}

.crs .course-tagline em {
    font-family: var(--font-header);
    font-size: 1.45em;
    font-style: italic;
    font-weight: 500;
    color: var(--crs-gold);
}

/* Факты — как цифры в первом экране книг */
.crs .course-facts {
    max-width: 980px;
    margin-top: 44px;
    padding: 26px 0;
    border-color: rgba(255, 255, 255, 0.14);
}

.crs .course-fact {
    border-color: rgba(255, 255, 255, 0.14) !important;
}

.crs .course-fact dt {
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    letter-spacing: 2px;
}

.crs .course-fact dd {
    color: #fff;
    font-size: clamp(20px, 1.8vw, 24px);
    font-weight: 500;
    line-height: 1.2;
}

/* Видео — в золотой рамке, как обложка книги */
.crs .course-video-section {
    padding: 4px 0 0;
}

.crs .course-video {
    position: relative;

    border: 1px solid var(--crs-gold-soft);
    background: #071521;

    box-shadow:
        0 40px 80px -40px rgba(0, 0, 0, 0.8),
        0 0 0 8px rgba(255, 255, 255, 0.025);
}

.crs .course-video video {
    background: #071521;
}

.crs .course-video-caption {
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.6);
}

.crs-stage .subs-toggle {
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}


/* ---------- Описание уровня ---------- */

.crs .course-en-section {
    padding-top: 40px;
    background: linear-gradient(180deg, var(--bg-secondary), #f4ece4);
    border-top: 0;
}

.crs .course-en-block {
    padding: 70px 0 74px;
    border-bottom: 1px solid rgba(216, 180, 106, 0.3);
}

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

.crs .course-en-title {
    margin: 0 0 22px;

    color: var(--crs-ink);
    font-size: clamp(32px, 4.2vw, 52px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: 1px;
}

/* короткая золотая черта над заголовком раздела */
.crs .course-en-title::before {
    content: "";
    display: block;
    width: 44px;
    height: 1px;
    margin-bottom: 22px;
    background: var(--crs-gold);
}

.crs .course-en-lead {
    margin-bottom: 30px;

    color: var(--crs-ink-2);
    font-size: clamp(22px, 2.4vw, 30px);
    font-style: italic;
    line-height: 1.35;
}

.crs .course-en-text {
    color: #4a4a4a;
    font-size: 16px;
    line-height: 1.8;
}

.crs .course-greeting {
    font-size: 24px;
}

.crs .course-greeting strong {
    font-weight: 500;
    font-style: italic;
    color: var(--butterfly-deep);
}

.crs .course-pull {
    margin: 34px 0;
    padding-left: 26px;

    border-left: 1px solid var(--crs-gold);

    color: var(--crs-ink);
    font-size: clamp(24px, 3vw, 34px);
    font-style: italic;
}

.crs .course-about-heading {
    margin: 52px 0 22px;

    color: var(--crs-ink);
    font-size: clamp(26px, 2.8vw, 34px);
    font-weight: 500;
    line-height: 1.15;
}

.crs .course-about-label {
    margin-bottom: 12px;

    color: var(--butterfly-strong);
    font-size: 11px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

/* Формула — ступени с золотой линией, как «Семь ступеней» */
.crs .course-formula-steps {
    position: relative;

    gap: 12px;
    margin: 18px 0 36px;

    background: none;
    border: 0;
}

.crs .course-formula-steps::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 28px;
    height: 1px;
    background: linear-gradient(90deg, var(--butterfly-border), var(--crs-gold), var(--butterfly-border));
    transform-origin: left;
    transition: transform 1.6s var(--crs-ease);
}

.crs-motion .course-formula-steps::before { transform: scaleX(0); }
.crs-motion .course-formula-steps.is-in::before { transform: scaleX(1); }

.crs .course-formula-steps li {
    position: relative;
    align-items: center;
    gap: 14px;

    padding: 0;
    background: none;

    color: var(--crs-ink);
    font-size: 19px;
    text-align: center;
}

.crs .course-formula-num {
    display: grid;
    place-items: center;

    width: 56px;
    height: 56px;

    border: 1px solid var(--butterfly-border);
    border-radius: 50%;
    background: #fff;

    color: var(--butterfly-deep);
    font-family: var(--font-header);
    font-size: 24px;
    letter-spacing: 0;

    box-shadow: 0 10px 30px -18px rgba(16, 48, 74, 0.5);
    transition: background .3s, color .3s, transform .3s var(--crs-ease);
}

@media (hover: hover) {
    .crs .course-formula-steps li:hover .course-formula-num {
        background: var(--butterfly-deep);
        color: #fff;
        transform: translateY(-4px);
    }
}

/* Карточки: белые, с тонкой линией и подъёмом при наведении */
.crs .course-path-cards,
.crs .course-for-you-cards,
.crs .course-journey {
    gap: 18px;
    background: none;
    border: 0;
}

.crs .course-path-cards li,
.crs .course-for-you-cards li,
.crs .course-journey li {
    position: relative;
    background: #fff;
    border: 1px solid var(--crs-line);
    transition: transform .3s var(--crs-ease), box-shadow .3s ease, border-color .3s ease;
}

@media (hover: hover) {
    .crs .course-path-cards li:hover,
    .crs .course-for-you-cards li:hover,
    .crs .course-journey li:hover {
        transform: translateY(-4px);
        border-color: var(--butterfly-border);
        box-shadow: 0 24px 40px -30px rgba(16, 48, 74, 0.5);
    }
}

.crs .course-path-cards li {
    padding: 30px 28px 32px;
}

.crs .course-card-num {
    margin-bottom: 18px;

    color: var(--crs-gold);
    font-family: var(--font-header);
    font-size: 40px;
    line-height: 1;
    letter-spacing: 0;
}

.crs .course-path-cards strong {
    color: var(--crs-ink);
    font-size: 24px;
}

.crs .course-path-cards p {
    color: #666;
    font-size: 14.5px;
    line-height: 1.7;
}

.crs .course-for-you-cards li {
    padding: 30px 26px 28px;
    color: var(--crs-ink);
    font-size: 20px;
}

.crs .course-for-you-cards li::before {
    content: "";
    position: absolute;
    left: 26px;
    top: 0;
    width: 34px;
    height: 2px;
    background: var(--crs-gold);
}

/* «Я лично рядом» — тёмная сцена с розовым светом, как бесплатная книга */
.crs .course-personal {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    margin: 56px 0 44px;
    padding: 52px 52px 34px;

    background: var(--crs-ink);
    border: 0;
    color: #fff;
}

.crs .course-personal::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(50% 70% at 12% 20%, rgba(240, 170, 200, 0.16), transparent 70%),
        radial-gradient(45% 60% at 92% 90%, rgba(56, 183, 215, 0.16), transparent 70%);
}

.crs .course-personal::after {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(216, 180, 106, 0.22);
    pointer-events: none;
}

.crs .course-personal .course-about-heading { color: var(--crs-gold); }

.crs .course-personal-lead {
    color: #fff;
    font-size: clamp(22px, 2.5vw, 30px);
    font-style: italic;
}

.crs .course-personal .course-en-text {
    color: rgba(255, 255, 255, 0.74);
    font-size: 15px;
}

/* Итог уровня — белая карточка с золотой чертой слева */
.crs .course-en-result {
    margin: 30px 0 18px;
    padding: 28px 30px;

    background: #fff;
    border: 1px solid var(--crs-line);
    border-left: 2px solid var(--crs-gold);

    color: var(--crs-ink);
    font-family: var(--font-header);
    font-size: clamp(19px, 1.9vw, 22px);
    line-height: 1.5;
}

.crs .course-en-result .course-about-label { font-family: var(--font-body); }

.crs .course-about-box { margin-bottom: 18px; }

.crs .course-about-experience {
    padding: 28px 30px;
    background: #fff;
    border: 1px solid var(--crs-line);
}

.crs .course-about-list:not(.course-about-list-2col) li::before {
    top: 17px;
    width: 10px;
    background: var(--crs-gold);
}

.crs .course-check-grid li::before,
.crs .course-about-list-2col li::before {
    border-color: var(--crs-gold);
}

.crs .course-check-grid li,
.crs .course-about-list-2col li {
    color: #3a3a3a;
}

/* Путь бабочки: текущий уровень — тёмная карточка */
.crs .course-journey a {
    padding: 28px 26px 30px;
}

.crs .course-journey-name {
    margin-bottom: 14px;
    color: var(--butterfly-strong);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.crs .course-journey em {
    color: var(--crs-ink);
    font-size: 21px;
}

.crs .course-journey .is-here {
    background: var(--crs-ink);
    border-color: var(--crs-ink);
    box-shadow: 0 24px 44px -28px rgba(11, 29, 43, 0.8);
}

.crs .course-journey .is-here::before {
    content: "";
    position: absolute;
    left: 26px;
    right: 26px;
    top: 0;
    height: 2px;
    background: var(--crs-gold);
}

.crs .course-journey .is-here .course-journey-name { color: var(--crs-gold); }
.crs .course-journey .is-here em { color: #fff; }


/* ---------- Покупка: тёмная полоса ---------- */

.crs .course-cta-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 110px 0;

    background: var(--crs-ink);
    color: #fff;
}

.crs .course-cta-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(45% 70% at 20% 50%, rgba(56, 183, 215, 0.16), transparent 70%),
        radial-gradient(40% 60% at 85% 40%, rgba(216, 180, 106, 0.10), transparent 70%);
}

.crs .course-cta {
    position: relative;
    max-width: 960px;
    padding: 48px 52px;

    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--crs-gold-soft);
}

.crs .course-cta::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(216, 180, 106, 0.14);
    pointer-events: none;
}

.crs .course-cta > * { position: relative; z-index: 1; }

.crs .course-cta-price span {
    margin-bottom: 10px;
    color: var(--crs-gold);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

.crs .course-cta-price strong {
    display: block;
    color: #fff;
    /* Inter, а не Cormorant: у Cormorant единица похожа на «I»,
       и «1111$» читалась как «IIII$» */
    font-family: var(--font-body);
    font-size: clamp(44px, 5.4vw, 64px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: lining-nums tabular-nums;
}

.crs .course-waitlist .course-cta-price strong {
    font-family: var(--font-header);
    font-weight: 500;
    letter-spacing: 0.01em;
    font-size: clamp(34px, 4vw, 46px);
}

.crs .course-cta-price p,
.crs .course-cta-open .course-cta-price p,
.crs .course-waitlist .course-cta-price p {
    color: rgba(255, 255, 255, 0.68);
}

.crs .course-cta-open .course-cta-price b { color: #fff; }

.crs .course-actions {
    align-items: center;
    gap: 22px;
}

.crs .course-cta-note {
    color: rgba(255, 255, 255, 0.6);
}

.crs .course-cta-links {
    color: rgba(255, 255, 255, 0.45);
}

.crs .course-cta-links a {
    color: var(--crs-gold);
    text-decoration-color: rgba(216, 180, 106, 0.5);
    text-underline-offset: 3px;
}

.crs .course-closing {
    margin-top: 48px;
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(20px, 2.2vw, 26px);
}

/* Лист ожидания — поля как у формы бесплатной книги */
.crs .course-waitlist-form input {
    height: 52px;
    padding: 0 18px;

    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;

    transition: border-color .2s, background .2s;
}

.crs .course-waitlist-form input::placeholder { color: rgba(255, 255, 255, 0.5); }

.crs .course-waitlist-form input:focus {
    border-color: var(--crs-gold);
    background: rgba(255, 255, 255, 0.1);
}

.crs .course-waitlist-form input:disabled { opacity: 0.6; }

.crs .course-waitlist-note { color: #8ee0b5; }
.crs .course-waitlist-note.is-error { color: #ffb4a8; }


/* ---------- Мостик к Level III ---------- */

.crs .level-bridge-section {
    padding: 80px 0 90px;
}

.crs .level-bridge {
    position: relative;
    max-width: 960px;
    padding: 40px 48px;

    background: #fff;
    border: 1px solid var(--crs-line);
    border-radius: 0;
}

.crs .level-bridge::before {
    content: "";
    position: absolute;
    left: 48px;
    top: 0;
    width: 44px;
    height: 2px;
    background: var(--crs-gold);
}

.crs .level-bridge-text {
    color: var(--crs-ink);
    font-style: italic;
}

.crs .btn.level-bridge-button {
    background: transparent;
    border: 1px solid var(--crs-ink);
    color: var(--crs-ink);
}

@media (hover: hover) {
    .crs .btn.level-bridge-button:hover {
        transform: translateY(-2px);
        background: var(--crs-ink);
        border-color: var(--crs-ink);
        color: #fff;
        box-shadow: 0 14px 28px -16px rgba(16, 48, 74, 0.55);
    }
}

.course-legal { padding-top: 28px; }


/* ---------- Летающие бабочки в первом экране ---------- */

.crs-flock {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.crs-bfly {
    position: absolute;
    left: 0;
    top: 0;
    width: 34px;
    height: 31px;
    opacity: 0;
    will-change: transform, opacity;
    filter: drop-shadow(0 0 6px rgba(126, 200, 222, 0.55));
}

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

.crs-stage > .container,
.crs-stage > section { position: relative; z-index: 1; }


/* ---------- Появление при прокрутке ---------- */
/* Прячем только когда скрипт включил движение: без JS всё видно */

.crs-motion .crs-rv {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .9s var(--crs-ease), transform .9s var(--crs-ease);
    transition-delay: calc(var(--i, 0) * 110ms);
}

.crs-motion .crs-rv.is-in {
    opacity: 1;
    transform: none;
}


/* ---------- Адаптив ---------- */

@media (max-width: 760px) {

    .crs-stage { padding: 22px 0 64px; }

    .crs .course-hero { padding: 40px 0 40px; }

    .crs .course-hero h1 { font-size: clamp(54px, 16vw, 76px); }

    .crs .course-facts { margin-top: 32px; padding: 0; }

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

    .crs .course-en-block { padding: 48px 0 52px; }

    .crs .course-formula-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 28px;
    }

    .crs .course-formula-steps::before { display: none; }

    .crs .course-personal { padding: 36px 24px 22px; margin-left: -4px; margin-right: -4px; }

    .crs .course-en-result,
    .crs .course-about-experience { padding: 22px 20px; }

    .crs .course-cta-section { padding: 70px 0; }

    .crs .course-cta {
        padding: 36px 24px;
        border-radius: 0;
    }

    .crs .course-actions { align-items: stretch; }

    /* в колонку flex-basis 280px превращался в высоту — пустое поле под кнопкой */
    .crs .course-cta > .course-cta-price,
    .crs .course-cta > .course-actions,
    .crs .course-cta > .course-waitlist-form { flex: none; }

    /* нечётный последний факт — на всю ширину, без пустой клетки */
    .crs .course-fact:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        border-left: 0;
    }

    .crs .course-actions .btn.btn-secondary { align-self: center; width: auto; }

    .crs .btn { padding-left: 20px; padding-right: 20px; letter-spacing: 2px; }

    .crs .level-bridge-section { padding: 56px 0 64px; }

    .crs .level-bridge { padding: 32px 24px; }

    .crs .level-bridge::before { left: 24px; }
}


@media (prefers-reduced-motion: reduce) {

    .crs .btn,
    .crs .course-path-cards li,
    .crs .course-for-you-cards li,
    .crs .course-journey li,
    .crs .course-formula-num,
    .crs-stage__bg { transition: none !important; }

    .crs .btn:hover,
    .crs .course-path-cards li:hover,
    .crs .course-for-you-cards li:hover,
    .crs .course-journey li:hover { transform: none !important; }

    .crs-motion .crs-rv { opacity: 1; transform: none; transition: none; }
}

/* ========================================
   КАК ЭТО УСТРОЕНО: Мими и твои работы
   Блок выше «кому подходит», одинаковый
   на всех ступенях (решение 29.10.2026).
======================================== */

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

    margin: 32px 0 8px;
}

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

.course-hiw-item {
    padding: 20px 22px;

    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 18px;

    background: rgba(255, 255, 255, 0.5);
}

.course-hiw-item h4 {
    margin: 0 0 8px;

    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.course-hiw-item p {
    margin: 0;

    font-size: 15px;
    line-height: 1.55;
    opacity: 0.85;
}