/* Стили лендинга /psihologonline (вынесены из <style> в head 2026-07-10).
   При правке поднимать ?v=N в psihologonline.html. */

/* Add-only стили лендинга «первая сессия 200 ₽» (префикс lp200-, значения из токенов index.css) */

/* Мобильный CTA в шапке: на телефоне .nav-links скрыт — даём кнопку рядом с логотипом.
   «Войти» на этом лендинге — прозрачная, контур и текст в тёмном тоне сайта */
.lp200-mobile-cta {
    display: none;
    align-items: center;
    padding: 0.55rem 1.15rem;
    border-radius: 50px;
    background: transparent;
    border: 1.5px solid var(--deep-plum);
    color: var(--deep-plum) !important;
    font-weight: 600;
    text-decoration: none;
}
@media (max-width: 768px) {
    .lp200-mobile-cta { display: inline-flex; }
}
.nav-cta {
    background: transparent !important;
    border: 1.5px solid var(--deep-plum);
    color: var(--deep-plum) !important;
}
.nav-cta:hover { background: rgba(61, 46, 61, 0.08) !important; }

/* Отступ над бейджем hero на десктопе */
@media (min-width: 769px) {
    .hero-badge { margin-top: 20px; }
}

/* На мобиле отступ бейджа до заголовка — вдвое больше (1.5rem → 3rem)
   и больше воздуха сверху между шапкой и бейджем */
@media (max-width: 768px) {
    .hero-badge { margin-bottom: 3rem; }
    body.page-index .hero { padding-top: 8.5rem; }
}

/* Подпись под кнопкой в hero */
.lp200-hero-note {
    margin-top: 1rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
}
.lp200-hero-note strong { color: var(--deep-plum); }

/* Шапка не примагничена к верху (как на главной) */
nav { position: absolute; }

/* Ценовой итог под таблицей сравнения (без фона) */
.lp200-price-summary {
    max-width: 720px;
    margin: 2.5rem auto 0;
    text-align: center;
    padding: 1rem 1.5rem 0;
}
.lp200-price-summary p {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-bottom: 1.25rem;
}
.lp200-price-summary .btn-primary { display: inline-flex; }

/* Отзывы: слайдер — один отзыв на экран */
.lp200-slider { max-width: 720px; margin: 0 auto; padding: 0 1.5rem; }
.lp200-slider-viewport { overflow: hidden; border-radius: 24px; box-shadow: 0 12px 32px rgba(45, 31, 45, 0.25); }
.lp200-slider-track { display: flex; transition: transform 0.35s ease; }
@media (prefers-reduced-motion: reduce) { .lp200-slider-track { transition: none; } }
.lp200-slide {
    flex: 0 0 100%;
    box-sizing: border-box;
    padding: 2.25rem 1.75rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}
.lp200-slide-text { color: var(--text-primary); line-height: 1.65; font-size: 1.05rem; margin: 0; }
.lp200-slide-author { color: var(--text-secondary); font-size: 0.9rem; font-weight: 600; }
.lp200-slider-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.25rem; }
.lp200-slider-btn {
    width: 44px; height: 44px; border-radius: 50%;
    border: 1.5px solid var(--dusty-lavender); background: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center; padding: 0;
}
.lp200-slider-btn svg { width: 20px; height: 20px; stroke: var(--deep-plum); }
.lp200-slider-btn:hover { background: var(--light-lavender); }
.lp200-slider-count { color: var(--light-lavender); font-weight: 600; min-width: 64px; text-align: center; }

/* Низ тёмной ленты (отзывы) скруглён, верх — у развязки */
.testimonials { border-radius: 0 0 96px 96px; overflow: hidden; position: relative; z-index: 1; }
/* Секция над лентой — крем вместо белого (в вырезах углов не должно быть белого) */
.how-it-works { background: var(--cream); }
.how-it-works .step { background: #fff; box-shadow: 0 10px 30px rgba(61, 46, 61, 0.07); }
/* FAQ подтянут под нижние углы ленты: в вырезах видна лаванда FAQ, а не подложка
   (специфичность body.page-index — иначе перебивает правило плотного ритма page-index > section) */
body.page-index .faq { margin-top: -96px; padding-top: calc(3.5rem + 96px); }

/* Фон секции отзывов — фото на всю ширину (только десктоп/планшет; на мобиле остаётся тёмная секция) */
@media (min-width: 769px) {
    .testimonials {
        /* фото засветлено белой вуалью 50% */
        background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../images/lp200/reviews-bg.jpg");
        background-size: cover;
        background-position: center;
    }
    .testimonials .section-header h2 { color: var(--deep-plum); }
    .testimonials .section-header p { color: var(--warm-gray); }
    .lp200-slider-count { color: var(--deep-plum); }
    .lp200-slider-viewport { box-shadow: 0 12px 32px rgba(61, 46, 61, 0.18); }
}

/* Иконки болей — как раньше: тёмная линия на чипе из index.css */
.pain-icon { display: flex; align-items: center; justify-content: center; }
.pain-icon svg { width: 30px; height: 30px; stroke: var(--deep-plum); }
/* Линейные иконки с градиентной обводкой — без подложек (референс пользователя) */
.help-icon {
    display: flex; align-items: center; justify-content: center;
    background: none; box-shadow: none;
}
.help-icon svg { width: 44px; height: 44px; }
.safety-icon svg { width: 32px; height: 32px; }

/* Шильдики методов — градиент как в референсе (сине-фиолетовый, белый текст) */
.method-card .method-tag {
    background: linear-gradient(135deg, #63B3ED, #9F7AEA, #805AD5);
    color: #fff;
    box-shadow: 0 6px 14px rgba(128, 90, 213, 0.3);
}

/* Подвал: 3 колонки вместо 5 с главной (иначе справа дыра) */
footer .footer-content { grid-template-columns: 1.8fr 1fr 1fr; }
@media (max-width: 1024px) { footer .footer-content { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { footer .footer-content { grid-template-columns: 1fr; text-align: center; } }

/* Мостик под карточками болей */
.lp200-pains-bridge {
    text-align: center;
    margin: 2.25rem auto 0;
    max-width: 640px;
    color: var(--text-secondary);
    font-size: 1.1rem;
    padding: 0 1.5rem;
}

/* РАЗВЯЗКА: тёмная эмоциональная секция раскрытия */
.lp200-reveal {
    background: linear-gradient(135deg, var(--deep-plum), #5d4a5d);
    padding: 5rem 1.5rem;
    color: #fff;
}
.lp200-reveal { overflow: hidden; border-radius: 96px 96px 0 0; }
.lp200-reveal-inner { max-width: 820px; margin: 0 auto; text-align: center; position: relative; }

/* Декор развязки: улыбающиеся кружки и искорки (референс пользователя) */
.lp200-decor { position: absolute; pointer-events: none; }
.lp200-decor--1 { top: -14px; left: -84px; width: 88px; }
.lp200-decor--2 { top: 40px; right: -96px; width: 96px; }
.lp200-decor--3 { top: 46%; left: -100px; width: 72px; }
.lp200-decor--4 { top: 54%; right: -72px; width: 64px; }
.lp200-decor--s1 { top: -30px; left: 28%; width: 26px; }
.lp200-decor--s2 { top: 7%; right: 22%; width: 18px; }
@media (max-width: 1023px) { .lp200-decor { display: none; } }
.lp200-reveal-kicker {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dusty-lavender);
    margin-bottom: 1.25rem;
}
.lp200-reveal h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.7rem, 4.5vw, 2.4rem);
    line-height: 1.25;
    margin-bottom: 1.5rem;
    color: #fff;
}
/* Мечта: сетка 2×2 компактных карточек (клиповое чтение) */
.lp200-dream-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
    max-width: 640px;
    margin: 0 auto 2.5rem;
}
@media (max-width: 600px) { .lp200-dream-grid { grid-template-columns: 1fr; } }
.lp200-dream-card {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    padding: 1.25rem 1rem;
    text-align: center;
}
.lp200-dream-card svg { width: 32px; height: 32px; margin-bottom: 0.5rem; }
.lp200-dream-card strong { display: block; color: #fff; font-size: 1.08rem; margin-bottom: 0.3rem; }
.lp200-dream-card span { color: var(--light-lavender); font-size: 0.92rem; line-height: 1.4; }
.lp200-reveal-answer {
    font-size: clamp(1.5rem, 4.2vw, 2.1rem);
    line-height: 1.3;
    font-family: var(--font-heading);
    margin-bottom: 1.5rem;
    color: #fff;
}
.lp200-reveal-answer .lp200-znak { font-size: 0.65em; }
.lp200-reveal-answer strong {
    display: inline-block;
    font-size: 1.25em;
    line-height: 1.25;
    margin-top: 0.35rem;
    background: linear-gradient(135deg, #D6BCFA, #9F7AEA);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.lp200-reveal .btn-primary {
    display: inline-flex;
    /* зелёная (тона --sage #7BA05B: светлее/базовый/темнее) + крупнее текст */
    background: linear-gradient(135deg, #8FB672, #7BA05B, #628148);
    font-size: 1.2rem;
    padding: 1.1rem 2.6rem;
}
/* Аватарка Vera внутри CTA «Познакомиться с Vera бесплатно» */
.lp200-cta-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.lp200-reveal-free {
    margin-top: 1rem;
    font-size: 0.95rem;
    color: var(--dusty-lavender);
}
.lp200-free-check { color: var(--sage); font-weight: 700; }
.lp200-cta-lead {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 1.25rem;
}

/* Фото над «Почему помощь Vera» */
.lp200-reveal-photo {
    display: block;
    width: 100%;
    max-width: 760px;
    height: auto;
    margin: 0 auto 2.25rem;
    border-radius: 24px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}

/* Блок «Почему помощь Vera точнее» внутри тёмной развязки */
.experts-flow .ef-icon svg { width: 34px; height: 34px; }
.experts-flow .ef-icon { background: transparent; }
.experts-flow .ef-icon--result { background: var(--sage); }
.experts-flow .ef-icon--result svg { width: 28px; height: 28px; stroke: #fff; }
.lp200-reveal .experts-flow {
    background: transparent;
    padding: 0.5rem 1.5rem 2.25rem;
    /* full-bleed: карточкам экспертов тесно в контейнере 820px — выпускаем на ширину экрана */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.lp200-reveal .experts-flow-grid { max-width: 1100px; }
.lp200-reveal .experts-flow-title { color: #fff; }
.lp200-reveal .experts-flow-accent {
    background: linear-gradient(135deg, var(--light-lavender), var(--dusty-lavender));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.lp200-reveal .experts-flow-subtitle { color: var(--light-lavender); }
.lp200-reveal .ef-card { text-align: left; }

/* МОСТ К ОТЗЫВАМ: «Это новый стандарт заботы о себе» (референс пользователя).
   body.page-index — иначе перебивает правило плотного ритма page-index > section */
body.page-index .lp200-standard {
    background: linear-gradient(135deg, #9F7AEA, #805AD5, #6B46C1);
    padding: 4.75rem 1.5rem;
    text-align: center;
}
.lp200-standard-title {
    font-family: var(--font-heading);
    color: #fff;
    font-size: clamp(1.6rem, 4.5vw, 2.3rem);
    line-height: 1.3;
    max-width: 820px;
    margin: 0 auto;
    display: grid;
    gap: 1.4rem;
}
.lp200-standard-l2 {
    position: relative;
    justify-self: center;
    /* место под рукописное подчёркивание */
    padding-bottom: 1.1rem;
}
.lp200-standard-stroke {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(100%, 340px);
    height: auto;
}