/* ==========================================================================
   IS Coach — перенос дизайна Chatium (14.10.2026).
   Значения взяты из выгрузки Chatium: pages/HomePage.vue, components/CourseCard.vue,
   components/Footer.vue. Подключается ПОСЛЕ styles.css и перекрывает прежние
   стили этапа 1 (свой дизайн).
   Палитра: заголовки #1B3A6B (тёмно-синий), акцент #5BA4A4 (бирюза), золото #D4AF6A.
   ========================================================================== */

.section { max-width: 1240px; margin: 0 auto; padding: 72px 24px; }

/* подписи над заголовками — капсула с боковыми линиями (как на Chatium) */
.head-deco { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; }
.head-deco::before, .head-deco::after { content: ''; flex: 0 1 clamp(30px, 7vw, 80px); height: 1px; }
.head-deco::before { background: linear-gradient(90deg, transparent, rgba(91,164,164,.65)); }
.head-deco::after  { background: linear-gradient(90deg, rgba(91,164,164,.65), transparent); }
.caps-sub {
    display: inline-flex; align-items: center;
    font-family: "Inter", sans-serif; font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 2.5px; color: #3E8E8E;
    border-radius: 999px; padding: 9px 22px;
    box-shadow: 0 8px 20px rgba(27,58,107,.07);
    /* переливающаяся плашка (как на Chatium) */
    background: linear-gradient(120deg, #FFFFFF 0%, #E7F5EF 25%, #DEF1F7 50%, #E9EFFA 75%, #FFFFFF 100%);
    background-size: 300% 100%;
    animation: capShimmer 6s ease-in-out infinite;
}
@keyframes capShimmer { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.section-heading {
    font-family: "Playfair Display", serif; font-size: clamp(32px, 5vw, 54px);
    font-weight: 500; color: #25423C; margin: 0 0 16px; line-height: 1.15;
    letter-spacing: -.5px;
}
.accent-green {
    font-weight: 800; position: relative;
    display: inline-block; padding: 0 0 12px;
    /* переливающееся слово (как на Chatium) */
    background: linear-gradient(100deg, #1E6B5C 0%, #2FA184 28%, #E9C46A 52%, #9B72CF 78%, #1E6B5C 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    animation: accentShimmer 5s ease-in-out infinite;
}
@keyframes accentShimmer { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
/* волнистая линия-подчёрк под акцентом */
.accent-green::before {
    content: ''; position: absolute; left: 2px; right: -4px; bottom: 0; height: 9px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 10' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%235BA4A4'/%3E%3Cstop offset='.5' stop-color='%23D4AF6A'/%3E%3Cstop offset='1' stop-color='%239B72CF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 6C60 1 150 10 278 4' fill='none' stroke='url(%23g)' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
/* золотая точка после акцента */
.caps-sub { white-space: nowrap; }          /* подпись в одну строку */

.accent-green::after {
    content: ''; position: absolute; right: -18px; top: 42%; width: 9px; height: 9px;
    border-radius: 50%; background: #E9A94B; box-shadow: 0 0 8px rgba(233,169,75,.8);
}
.underline-wave { text-decoration: none; }

/* ---------------- «Обо мне» ---------------- */
.about-grid { display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: flex-start; }
.about-subtitle { color: #5BA4A4; font-size: 15px; font-weight: 500; }

/* ==== 16.10 (5): подзаголовок «Коучинговая поддержка…» — на светлой переливающейся плашке, как «Двигайтесь вперёд» ==== */
.section.about .about-subtitle {
    display: inline-block; font-family: "Cormorant Garamond", serif; font-style: italic;
    font-weight: 600; font-size: 21px; line-height: 1.45; color: #17615A; text-align: left;
    border-radius: 999px; padding: 12px 30px; margin: 0 0 26px;
    white-space: nowrap;   /* в одну строку (на мобиле ниже — обычный перенос) */
    background: linear-gradient(120deg, #FFFFFF 0%, #E7F5EF 25%, #DEF1F7 50%, #E9EFFA 75%, #FFFFFF 100%);
    background-size: 300% 100%; animation: capShimmer 6s ease-in-out infinite;
    box-shadow: 0 8px 22px rgba(27,58,107,.08);
}
.about-text { font-size: 16px; line-height: 1.8; color: #636E72; }
.about-photo {
    position: relative; width: 220px; margin: 130px 0 0; padding: 0; border-radius: 20px; overflow: hidden;   /* 15.10: 168→130 — Ирина: перескочило ~1 см */
    box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(91,164,164,.55), 0 0 0 9px rgba(212,175,106,.3),
                0 24px 56px rgba(27,58,107,.18);
}
.about-photo img { width: 220px; height: 320px; object-fit: cover; object-position: top center; display: block; border-radius: 0; }
/* 15.10: фото опущено до уровня первой строки абзаца (Ирина); на мобиле — отступ обычный */
.about-photo figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; border-radius: 0;
    background: rgba(27,58,107,.88); backdrop-filter: blur(8px); color: #fff;
    padding: 16px 24px; font-size: 15px; font-weight: 600;
}

/* ---------------- «Наши тренинги» — светлый градиент как у Chatium ---------------- */
.section.trainings {
    max-width: none; position: relative;
    background: linear-gradient(135deg, #D6EEFA 0%, #C8E8F4 18%, #D4F0EC 38%, #E2E8F8 60%, #EDE8F8 80%, #FAF0E8 100%);
}
.section.trainings::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        radial-gradient(ellipse 800px 500px at 10% 20%, rgba(91,164,164,.12) 0%, transparent 60%),
        radial-gradient(ellipse 600px 400px at 90% 80%, rgba(180,160,220,.10) 0%, transparent 60%);
}
.trainings > * { position: relative; max-width: 1192px; margin-left: auto; margin-right: auto; }
.trainings-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 32px; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }

/* карточка курса — как CourseCard.vue */
.course-card {
    background: #fff; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column;
    border: 1px solid rgba(91,164,164,.08); box-shadow: 0 4px 20px rgba(45,52,54,.08);
    transition: all .4s cubic-bezier(.4,0,.2,1);
}
.course-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(45,52,54,.15); }
.course-cover { position: relative; aspect-ratio: 5 / 2; height: auto; overflow: hidden; background: linear-gradient(135deg, #5BA4A4 0%, #7ECDC0 100%); }
.course-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.course-card:hover .course-cover img { transform: scale(1.05); }
.course-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.course-title { font-family: "Playfair Display", serif; font-size: 20px; font-weight: 600; color: #2D3436; margin: 0; line-height: 1.4; }
.course-desc { font-size: 16px; color: #636E72; line-height: 1.7; margin: 0; flex: 1; }
.course-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: #636E72; padding-bottom: 20px; border-bottom: 1px solid #F0F0F0; }
.course-buy { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.price { font-family: "Playfair Display", serif; font-size: 24px; font-weight: 600; color: #2D3436; }
.old-price { font-size: 14px; color: #B2BEC3; }
.cover-badge { position: absolute; top: 16px; left: 16px; }

/* ---------------- преимущества — объёмные иконки Chatium ---------------- */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.why-card {
    position: relative; background: #fff; border: 1px solid #E0F0EC; border-radius: 22px;
    padding: 38px 24px 28px; text-align: center; transition: all .35s cubic-bezier(.2,.8,.2,1);
}
.why-card:hover { transform: translateY(-10px); box-shadow: 0 22px 50px rgba(27,58,107,.14); border-color: #A8D8C8; }
.why-card b { display: block; font-size: 17px; font-weight: 700; color: #1B3A6B; margin: 0 0 8px; }
.why-card p { font-size: 14px; color: #636E72; line-height: 1.65; margin: 0; }
.why-ico {
    position: relative; width: 78px; height: 78px; border-radius: 24px; margin: 0 auto 22px;
    display: flex; align-items: center; justify-content: center; font-size: 30px; color: #fff;
    /* 15.10: глянец как в Chatium — светлый «стеклянный» верх, тёмный низ */
    background: linear-gradient(180deg, #7FCFCF 0%, #5BA4A4 55%, #1F5252 100%);
    box-shadow: inset 0 2px 4px rgba(255,255,255,.65), inset 0 -7px 12px rgba(0,0,0,.30),
                0 14px 26px rgba(91,164,164,.50), 0 6px 10px rgba(27,58,107,.22);
    animation: iconFloat 4s ease-in-out infinite;
}
/* жидкий блик поверх значка — как на Chatium (символ остаётся читаемым) */
.why-ico::after {
    content: ''; position: absolute; left: 4px; right: 4px; top: 4px; height: 44%;
    border-radius: 20px 20px 46% 46% / 20px 20px 62% 62%;
    background: linear-gradient(180deg, rgba(255,255,255,.80) 0%,
                rgba(255,255,255,.38) 55%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}
.why-ico.i-blue   { background: linear-gradient(180deg, #A9CFE2 0%, #7BA7BC 55%, #2C5570 100%); animation-delay: -.5s; }
.why-ico.i-green  { background: linear-gradient(180deg, #98DABE 0%, #6DB89A 55%, #25634A 100%); animation-delay: -1s; }
.why-ico.i-gold   { background: linear-gradient(180deg, #F5D98E 0%, #D4AF6A 55%, #6E5418 100%); animation-delay: -1.5s; }
.why-ico.i-orange { background: linear-gradient(180deg, #F5B37E 0%, #E8833A 55%, #8A4207 100%); animation-delay: -2s; }
.why-ico.i-violet { background: linear-gradient(180deg, #C6A5E8 0%, #9B72CF 55%, #472778 100%); animation-delay: -2.5s; }
.why-ico.i-pink   { background: linear-gradient(180deg, #F49BB0 0%, #E85A7A 55%, #7E1C39 100%); animation-delay: -3s; }
.why-ico.i-teal   { animation-delay: -3.5s; }
@keyframes iconFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-5px) rotate(-2deg); }
}

/* ---------------- отзывы ---------------- */
.reviews-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.rating-card { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 16px; }
.review-card { padding: 22px; border-radius: 20px; }
.review-form { padding: 28px; border-radius: 20px; max-width: 560px; }
.review-form input[type="text"], .review-form textarea {
    width: 100%; border: 1px solid #E0F0EC; border-radius: 12px; padding: 12px 14px;
    font: inherit; color: #2D3436; background: #fff;
}
.review-form .btn { border-radius: 50px; padding: 12px 28px; }

/* ---------------- CTA — светлая мята (как на живом сайте) ---------------- */
.cta-strip { background: linear-gradient(135deg, #E8F5F0 0%, #D6EEFA 100%); padding: 80px 24px; text-align: center; }
.cta-strip h2 { font-family: "Playfair Display", serif; font-size: clamp(26px, 4vw, 38px); font-weight: 600; color: #1B3A6B; margin: 0 0 16px; line-height: 1.3; }
.cta-strip p { color: #636E72; font-size: 16px; margin: 0 0 36px; }
.cta-strip .btn { background: #5BA4A4; color: #fff; border: none; border-radius: 50px; padding: 14px 34px; font-weight: 600; }

/* ---------------- подвал — тёмно-синий, как в Chatium (.footer { background: #1B3A6B }) ---------------- */
.site-footer { background: #0B3D33; color: rgba(255,255,255,.88); }   /* 15.10: цвет банера (тёмный изумруд) */
.footer-inner { max-width: 1280px; margin: 0 auto; padding: 72px 24px 56px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 56px; }
.footer-col h4 { font-family: "Inter", sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: #A8D8C8; margin: 0 0 14px; }
.footer-col a, .footer-col p { display: block; color: rgba(255,255,255,.88); text-decoration: none; font-size: 15px; margin: 0 0 8px; }
.footer-col a:hover { color: #fff; }
.footer-brand-name { color: #fff; font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
/* 15.10: логотип и название — как в шапке */
.footer-brand-name img { height: 42px; width: auto; display: inline-flex; }
.footer-brand-name .brand-name {
    font-family: "Playfair Display", serif; font-weight: 700; font-size: 20px; letter-spacing: .5px;
    background: linear-gradient(92deg, #C9974B 0%, #E9C46A 35%, #F0D080 55%, #C9974B 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
}
.footer-requisites { color: rgba(255,255,255,.6); font-size: 14px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); max-width: 1280px; margin: 0 auto; padding: 20px 24px 40px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; color: rgba(255,255,255,.6); font-size: 14px; }
.footer-bottom a { color: #A8D8C8; text-decoration: none; }

/* ---------------- страница каталога: шапка и сетка (pages/CoursesListPage.vue) ---------------- */
/* 15.10: фоны заголовков страниц — рисунок Ирины «курсы 2» (шевроны справа), как на банере */
.page-header {
    background: url("/img/bg_headings.jpg") center right / cover no-repeat;
    color: #fff; padding: 64px 24px 72px; text-align: left;
}
.page-header-container { max-width: 1280px; margin: 0 auto; }
.page-description { font-size: 18px; opacity: .9; margin: 0 0 32px; }
.search-box { position: relative; max-width: 500px; margin: 0; }
.search-box input {
    width: 100%; padding: 16px 20px 16px 52px; border: none; border-radius: 12px;
    font: inherit; font-size: 16px; background: #fff; color: #2D3436;
    box-shadow: 0 4px 20px rgba(0,0,0,.1);
}
.search-box input:focus { outline: none; box-shadow: 0 4px 20px rgba(0,0,0,.2); }
.search-ico { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-size: 17px; color: #6b7280; }
.courses-section { padding: 60px 24px 80px; }
.section-container { max-width: 1280px; margin: 0 auto; }
.courses-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 24px; }
/* 21.10: зверёк висит над кромкой карточки — добавляем зазор, чтобы он не
   наезжал на плашку над секцией (и в каталоге, и на главной) */
.courses-grid { margin-top: 64px; }
.trainings .cards-grid { margin-top: 64px; }

/* элементы карточки — как в components/CourseCard.vue */
.course-badge {
    position: absolute; top: 16px; left: 16px; padding: 8px 16px; border-radius: 50px;
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
}
.course-badge.featured { background: linear-gradient(135deg, #D67B7B 0%, #F5C6C6 100%); color: #fff; }
.course-category {
    font-size: 12px; color: #5BA4A4; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px; margin: 0 0 10px;
}
.course-meta .meta-item { font-size: 13px; color: #636E72; }
.current-price { font-family: "Playfair Display", serif; font-size: 24px; font-weight: 600; color: #2D3436; }
.btn-details {
    display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #5BA4A4;
    padding: 10px 20px; border-radius: 10px; font-weight: 600; font-size: 14px;
    text-decoration: none; border: 2px solid #5BA4A4; transition: all .3s ease;
}
.btn-details:hover { background: #5BA4A4; color: #fff; }
.empty-state { text-align: center; padding: 80px 24px; color: #6b7280; }

/* ---------------- страница курса (pages/CoursePage.vue) ---------------- */
/* 21.10: хлебные крошки — отступ и от шапки, и от основного (тёмного) поля */
.crumbs { max-width: 1280px; margin: 0 auto; padding: 20px 24px 16px; font-size: 14px; color: #636E72; }
.crumbs a { color: #5BA4A4; text-decoration: none; }
.crumbs span { color: #636E72; }

/* 21.10: фон героя курса — тёмный изумруд с золотыми дугами (fon_kursy5.jpg); заголовок выше (padding-top 40→22) */
.course-page-hero { background: url("/img/fon_kursy5.jpg") center / cover no-repeat; color: #fff; padding: 22px 24px 64px; }
.course-hero-container { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start; }
/* 21.10: заголовок курса — менее крупный и радужный (как названия карточек) */
.course-page-title {
    font-family: "Inter", system-ui, sans-serif;
    font-size: clamp(22px, 3vw, 32px); font-weight: 700;
    margin: 0 0 18px; line-height: 1.25; letter-spacing: -0.3px;
    background: linear-gradient(90deg, #7FE8C8 0%, #F5D77C 30%, #C9A0E8 55%, #F5D77C 78%, #7FE8C8 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    animation: pname-rainbow 5s linear infinite;
}
/* 21.10: «Количество модулей» — в одну строку под заголовком */
.course-mod-line { margin: 14px 0 0; font-size: 15px; color: #F2FBF8; }
.course-mod-line b { font-weight: 700; }
/* 21.10: описание — ниже, правее и по ширине; абзацы через nl2br (переносы строк из БД) */
.course-page-desc { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.92); margin: 16px 0 0; padding-left: 24px; text-align: justify; }
.course-meta-row { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 26px; color: rgba(255,255,255,.9); font-size: 14px; }

.buy-card { background: #fff; border-radius: 20px; overflow: hidden; color: #2D3436; box-shadow: 0 18px 44px rgba(27,58,107,.24); }
/* 21.10: обложка-иконка в карточке покупки — ниже на ~3 см (4/3) и без обрезки картинки */
.buy-card .course-cover { aspect-ratio: 4 / 3; background: linear-gradient(135deg, #DDF1EC 0%, #BFE3DC 100%); }
.buy-card .course-cover img { object-fit: contain; }
.buy-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; }
.buy-card-body .old-price { font-size: 14px; color: #B2BEC3; }
.current-price-big { font-family: "Playfair Display", serif; font-size: 28px; font-weight: 600; color: #2D3436; margin: 2px 0 16px; }
.btn-buy-course {
    display: block; text-align: center;
    padding: 14px 20px; border-radius: 10px; font-weight: 700; font-size: 17px;
    text-decoration: none; transition: box-shadow .25s, filter .25s;
}
.buy-list { list-style: none; margin: 18px 0 0; padding: 0; }
.buy-list li { position: relative; padding-left: 22px; font-size: 14px; color: #636E72; margin: 0 0 10px; }
.buy-list li::before { content: '✓'; position: absolute; left: 0; color: #5BA4A4; font-weight: 700; }

/* программа тренинга — белая карточка с номерными плашками */
.program-section { background: #E8F5F0; padding: 44px 24px 72px; }
.program-card { max-width: 900px; margin: 0 auto; background: #fff; border-radius: 20px; padding: 28px 32px 34px; box-shadow: 0 6px 24px rgba(27,58,107,.08); }
.program-title { font-family: "Playfair Display", serif; font-size: clamp(22px, 3vw, 30px); font-weight: 600; color: #1B3A6B; margin: 0 0 22px; }
.program-module { border: 1px solid #E0F0EC; border-radius: 14px; margin-bottom: 14px; overflow: hidden; }
.module-head { display: flex; align-items: center; gap: 12px; background: #F7FCFB; padding: 14px 16px; }
.module-num { width: 28px; height: 28px; border-radius: 50%; background: #5BA4A4; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.module-head b { font-size: 16px; color: #1B3A6B; }
.module-count { margin-left: auto; font-size: 12px; color: #636E72; background: #EEF8F5; padding: 4px 10px; border-radius: 50px; white-space: nowrap; }
.lesson-list { list-style: none; margin: 0; padding: 6px 10px 12px; }
.lesson-row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid #F2F7F6; font-size: 15px; }
.lesson-row:last-child { border-bottom: none; }
.lesson-num { min-width: 34px; height: 26px; border-radius: 8px; background: #1B3A6B; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.lesson-name { flex: 1; color: #2D3436; text-decoration: none; }
.lesson-name:hover { color: #5BA4A4; }
.lesson-meta { color: #636E72; font-size: 13px; white-space: nowrap; }
.lesson-chip { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #5BA4A4; background: #EEF8F5; padding: 4px 10px; border-radius: 50px; white-space: nowrap; }
.lesson-chip.draft { color: #8a93a3; background: #F0F2F5; }

@media (max-width: 900px) {
    .about-grid { grid-template-columns: 1fr; gap: 40px; }
    .about-photo { margin: 0 auto; }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .trainings-head { flex-direction: column; align-items: flex-start; }
    .footer-inner { grid-template-columns: 1fr; gap: 28px; }
    .courses-grid { grid-template-columns: 1fr; }
    .course-hero-container { grid-template-columns: 1fr; gap: 28px; }
    .program-card { padding: 20px 16px 24px; }
}

/* ==== 15.10 вечер: шапка — логотип IS картинкой, «IS Coach» золотом (банер-шрифт) ==== */
.brand-mark-img { height: 42px; width: auto; display: inline-flex; }
.brand-name {
    font-family: "Playfair Display", serif; font-weight: 700; font-size: 20px;
    letter-spacing: .5px;
    background: linear-gradient(92deg, #C9974B 0%, #E9C46A 35%, #F0D080 55%, #C9974B 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
}
/* текст блока «Обо мне» — по ширине */
.about-text { text-align: justify; }

/* ==== 15.10: векторные иконки в мета-строках (по смыслу: часы/книга/уровень/папка/лупа/щит/круг-чек) ==== */
.gi { vertical-align: -2.5px; margin-right: 4px; }
.stars svg { margin: 0 1px; vertical-align: -1px; }
.star svg { vertical-align: -2px; }
@media (max-width: 900px) { .about .about-photo { margin: 0 auto; } }

/* ==== 15.10 (22): все заголовки страниц — фон Ирины «курсы 2» (шевроны, тёмный изумруд) ==== */
/* подпись внутри тёмных зон — линии светлые (плашка — в правилах тёмных лент ниже) */
.page-band .head-deco::before, .page-band .head-deco::after { opacity: .8; }
.page-band .head-deco::before { background: linear-gradient(90deg, transparent, rgba(190,232,220,.75)); }
.page-band .head-deco::after { background: linear-gradient(90deg, rgba(190,232,220,.75), transparent); }

/* компактный тёмный бэнд заголовка (вебинары, заявка) */
.page-band {
    background: url("/img/bg_headings.jpg") center right / cover no-repeat;
    color: #fff; padding: 40px 24px 44px; margin-bottom: 34px;
}
.page-band .page-title { color: #fff; margin: 0; text-shadow: 0 2px 14px rgba(0,0,0,.35); }

/* 16.10 (3): «Обо мне» — фон только у ленты заголовка, текст и фото на светлом */
.section.about .about-photo { margin-top: 82px; }   /* 16.10 (5): верх фото — у первой строки абзаца (под плашкой-подзаголовком) */

/* переливающаяся линия — изгиб «змейкой» (просьба Ирины) */
.accent-green::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 14' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%235BA4A4'/%3E%3Cstop offset='.5' stop-color='%23D4AF6A'/%3E%3Cstop offset='1' stop-color='%239B72CF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 8C40 1 80 13 140 7S230 12 278 5' fill='none' stroke='url(%23g)' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    height: 13px;
}

/* ==== 21.10 (вечер-7): «Купить тренинг» — мягкий перелив-блик (Ирина: бегущую волну убрать) ====
   Итог: фон стоит на месте (насыщенный градиент), поверх раз в 4.5 c проходит
   световой блик с плавным затуханием; свечение кнопки «дышит» в его такт. */
.btn-buy-course {
    position: relative; overflow: hidden;
    /* 21.10: переходы цветов максимально плавные — 9 промежуточных тонов между зелёным, золотом и сиренью */
    background: linear-gradient(120deg, #2FA184 0%, #4FB495 14%, #84C498 28%, #B5CD90 40%, #E9C46A 52%, #E5B275 64%, #DCA788 77%, #C599C9 89%, #B79CD8 100%);
    color: #fff;
    border: none;
    text-shadow: 0 1px 4px rgba(0,0,0,.25);
    animation: btn-glow 4.5s ease-in-out infinite;
    box-shadow: 0 10px 24px rgba(11,61,51,.28), 0 0 14px rgba(233,196,106,.3);
}
.btn-buy-course::before {
    content: ''; position: absolute; top: -20%; bottom: -20%; left: -50%; width: 38%;
    background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 100%);
    filter: blur(7px);
    transform: skewX(-18deg);
    animation: btn-sheen 4.5s ease-in-out infinite;
}
@keyframes btn-sheen {
    0%   { left: -50%; opacity: 0; }
    12%  { opacity: .85; }
    42%  { left: 122%; opacity: .85; }
    56%  { left: 130%; opacity: 0; }
    100% { left: 130%; opacity: 0; }
}
@keyframes btn-glow {
    0%, 100% { box-shadow: 0 10px 24px rgba(11,61,51,.28), 0 0 10px rgba(233,196,106,.25); }
    30%      { box-shadow: 0 10px 24px rgba(11,61,51,.30), 0 0 24px rgba(233,196,106,.55); }
}
.btn-buy-course:hover {
    filter: brightness(1.07);
    box-shadow: 0 12px 28px rgba(11,61,51,.36), 0 0 28px rgba(233,196,106,.6);
}

/* ==== 15.10 (24): кнопки — матовое стекло с золотой окантовкой (решение Ирины) ==== */
.btn, .btn-details {
    background: linear-gradient(120deg, rgba(91,164,164,.16), rgba(91,164,164,.32));
    color: #14615A !important;
    border: 1px solid rgba(212,175,106,.75) !important;
    box-shadow: 0 6px 18px rgba(27,58,107,.10), inset 0 1px 0 rgba(255,255,255,.55);
    backdrop-filter: blur(6px) saturate(1.15);
    -webkit-backdrop-filter: blur(6px) saturate(1.15);
    transition: border-color .25s, box-shadow .25s, background .25s;
}
.btn:hover, .btn-details:hover {
    border-color: #E9C46A !important;
    box-shadow: 0 8px 22px rgba(27,58,107,.16), inset 0 1px 0 rgba(255,255,255,.7);
    background: linear-gradient(120deg, rgba(91,164,164,.22), rgba(91,164,164,.4));
}
/* ==== 16.10: единые шапки каталогов (тренинги и вебинары) ==== */
/* плашка «Каталог» поверх тёмного фона — в стиле «Расписание»: капсула + боковые линии */
.page-header .head-deco.header-pill { margin: 0 0 14px; }
.page-header .head-deco.header-pill::before,
.page-header .head-deco.header-pill::after { opacity: .8; flex: 0 0 clamp(30px, 7vw, 80px); }
.page-header .head-deco.header-pill::before { background: linear-gradient(90deg, transparent, rgba(190,232,220,.75)); }
.page-header .head-deco.header-pill::after  { background: linear-gradient(90deg, rgba(190,232,220,.75), transparent); }
/* заголовок шапки — секционный стиль (антиква с переливом и волной) на тёмном фоне */
.page-header .section-heading { color: #fff; margin: 0 0 16px; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
/* на тёмных фонах акцент — поярче, чтобы перелив читался */
.page-header .accent-green, .band-head .accent-green {
    background-image: linear-gradient(100deg, #5BC9AC 0%, #2FA184 28%, #E9C46A 52%, #A97FE8 78%, #5BC9AC 100%);
    background-size: 300% 100%;
}

/* ==== 16.10: ленты заголовков главной — узкий бэнд с фоном Ирины ==== */
.band-head {
    background: url("/img/bg_headings.jpg") center right / cover no-repeat;
    color: #fff;
}
.band-head-in {
    max-width: 1280px; margin: 0 auto; padding: 34px 24px 38px;
    display: flex; align-items: center; justify-content: space-between; gap: 28px;
}
.band-head .section-heading { color: #fff; margin: 0; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.band-head .caps-sub { background: none; box-shadow: none; animation: none; }
.band-head .head-deco::before, .band-head .head-deco::after { opacity: .8; flex: 0 0 clamp(30px, 7vw, 80px); }
.band-head .head-deco::before { background: linear-gradient(90deg, transparent, rgba(190,232,220,.75)); }
.band-head .head-deco::after  { background: linear-gradient(90deg, rgba(190,232,220,.75), transparent); }
.band-head .rating-card { flex-shrink: 0; color: #1F2F55; }
.band-head .rating-card .stars { color: #C9974B; }
@media (max-width: 900px) {
    .band-head-in { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* стекло на тёмных фонах — текст светлый, золото ярче */
.page-header .btn, .page-band .btn, .band-head .btn, .section.about .btn,
.course-page-hero .btn,
.poster .btn, .poster .btn-details,
.hero .btn, .hero .ghost-on-dark, .cta-strip .btn {
    color: #F2FBF8 !important;
    background: linear-gradient(120deg, rgba(91,164,164,.24), rgba(11,61,51,.38));
    border-color: rgba(240,208,128,.85) !important;
    text-shadow: 0 1px 6px rgba(0,0,0,.35);
    backdrop-filter: blur(10px) saturate(1.25);
    -webkit-backdrop-filter: blur(10px) saturate(1.25);
}
@media (prefers-reduced-motion: reduce) { .btn, .btn-details { transition: none; } }

/* ==== 16.10 (3): подписи-плашки на тёмных лентах — светлее, с переливом (как «Отзывы слушателей») ==== */
.page-header .caps-sub, .band-head .caps-sub, .page-band .caps-sub {
    background-image: linear-gradient(120deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.16) 26%, rgba(255,255,255,.44) 50%, rgba(255,255,255,.17) 76%, rgba(255,255,255,.38) 100%);
    background-size: 300% 100%;
    color: #F0FBF7;
    box-shadow: 0 0 24px rgba(190,232,220,.28), inset 0 0 0 1px rgba(255,255,255,.22);
    animation: capShimmerDark 6s ease-in-out infinite;
}
@keyframes capShimmerDark { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

/* ==== 16.10 (4): первая (курсивная) часть заголовков — другой шрифт, меньший размер ==== */
.section-heading em {
    font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600;
    font-size: .68em; letter-spacing: .3px; text-transform: none;
}

/* ==== 16.10 (4): длинные слоганы-подписи — крупнее, курсив, на плашке ==== */
.caps-sub.slogan-caps {
    font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600;
    font-size: 19px; letter-spacing: 1.2px; text-transform: none; padding: 10px 26px;
}
/* финальная строка «Обо мне» — тот же выделенный слоган (светлая плашка) */
.about-text p:last-of-type {
    display: inline-block; font-family: "Cormorant Garamond", serif; font-style: italic;
    font-weight: 600; font-size: 20px; line-height: 1.45; color: #17615A; text-align: left;
    border-radius: 999px; padding: 12px 30px; margin: 8px 0 0;
    background: linear-gradient(120deg, #FFFFFF 0%, #E7F5EF 25%, #DEF1F7 50%, #E9EFFA 75%, #FFFFFF 100%);
    background-size: 300% 100%; animation: capShimmer 6s ease-in-out infinite;
    box-shadow: 0 8px 22px rgba(27,58,107,.08);
}
@media (prefers-reduced-motion: reduce) { .caps-sub, .accent-green, .about-text p:last-of-type { animation: none; } }

/* ==== 16.10 (5): слоган под бэндом каталогов — на светлом фоне, перед карточками ==== */
.sub-slogan { margin: 0 0 26px; }

/* ==== 16.10 (12): карточка-плакат (по макету Ирины, 3 слоя) ====
   1 — плита описания (узор «курсы 6»), 2 — доска с названием (заходит на плиту),
   3 — 3D-иконка (выступает за верх и правый край). Иконки WebP из базы (icon_path). */
.course-card.poster {
    position: relative; overflow: visible; background: #EDE3D3; border-radius: 14px; border: none;
    /* 21.10: яркая золотая подсветка по референсу Ирины (неоновая кайма) */
    box-shadow: 0 4px 14px rgba(11,61,51,.14), 0 26px 48px rgba(11,61,51,.24), 0 54px 100px rgba(11,61,51,.16),
                0 0 0 2px rgba(233,196,106,.85),
                0 0 34px rgba(233,196,106,.70), 0 0 70px rgba(233,196,106,.45);
}
.course-card.poster:hover {
    transform: translateY(-12px);
    box-shadow: 0 6px 16px rgba(11,61,51,.14), 0 34px 58px rgba(11,61,51,.28), 0 66px 120px rgba(11,61,51,.20),
                0 0 0 2px #F5D77C,
                0 0 46px rgba(233,196,106,.95), 0 0 96px rgba(233,196,106,.70);
}
/* 21.10: подсветка рамки по уровню — золото (Начальный, выше), изумруд (Средний), сирень (Продвинутый) */
.course-card.poster[data-level="Средний"] {
    box-shadow: 0 4px 14px rgba(11,61,51,.14), 0 26px 48px rgba(11,61,51,.24), 0 54px 100px rgba(11,61,51,.16),
                0 0 0 2px rgba(63,208,143,.85),
                0 0 34px rgba(63,208,143,.70), 0 0 70px rgba(63,208,143,.45);
}
.course-card.poster[data-level="Средний"]:hover {
    box-shadow: 0 6px 16px rgba(11,61,51,.14), 0 34px 58px rgba(11,61,51,.28), 0 66px 120px rgba(11,61,51,.20),
                0 0 0 2px #7FE8B8,
                0 0 46px rgba(63,208,143,.95), 0 0 96px rgba(63,208,143,.70);
}
.course-card.poster[data-level="Продвинутый"] {
    box-shadow: 0 4px 14px rgba(11,61,51,.14), 0 26px 48px rgba(11,61,51,.24), 0 54px 100px rgba(11,61,51,.16),
                0 0 0 2px rgba(186,140,224,.85),
                0 0 34px rgba(186,140,224,.70), 0 0 70px rgba(186,140,224,.45);
}
.course-card.poster[data-level="Продвинутый"]:hover {
    box-shadow: 0 6px 16px rgba(11,61,51,.14), 0 34px 58px rgba(11,61,51,.28), 0 66px 120px rgba(11,61,51,.20),
                0 0 0 2px #D0A6EC,
                0 0 46px rgba(186,140,224,.95), 0 0 96px rgba(186,140,224,.70);
}
.poster .ptop {
    position: relative; z-index: 2; margin: 14px 14px -14px; height: 235px;
    border-radius: 8px; border: 7px solid #D9B58A;
    /* 21.10: картинка наверх (фон Ирины) + затемнение для читаемости текста */
    background-image: linear-gradient(180deg, rgba(9,54,44,.42) 0%, rgba(8,48,39,.62) 100%), url("/img/fon_verh.jpg");
    background-size: cover; background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 34px rgba(233,196,106,.55), 0 16px 26px rgba(0,0,0,.5), inset 0 0 0 1px rgba(240,208,128,.4);
}
.poster .plevel {
    position: absolute; left: 50%; top: 68%; transform: translateX(-50%); margin: 0; white-space: nowrap;
    /* 21.10: «Начинающий» — белым, в стеклянной пилюле как на референсе Ирины */
    color: #F2FBF8; font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; font-size: 17px;
    letter-spacing: .2px;
    padding: 7px 18px; border-radius: 50px;
    background: linear-gradient(120deg, rgba(238,249,245,.22) 0%, rgba(238,249,245,.10) 100%);
    border: 1px solid rgba(242,251,248,.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-shadow: 0 1px 6px rgba(0,0,0,.25);
}
.poster .pname {
    position: absolute; left: 24px; right: 24px; top: 46%; transform: translateY(-50%);
    margin: 0; text-align: center;
    font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600;
    font-size: 38px; line-height: 1.18;
    /* 21.10: название — переливающимся радужным (как акцент «тренинги») */
    background: linear-gradient(90deg, #2FA184 0%, #E9C46A 30%, #B79CD8 55%, #E9C46A 78%, #2FA184 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    animation: pname-rainbow 5s linear infinite;
}
@keyframes pname-rainbow {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}
.poster .pname.small { font-size: 31px; }
.poster .pdesc-wrap {
    position: relative; z-index: 1; margin: 0 20px 20px; height: 292px; border-radius: 8px; overflow: hidden;
    /* 21.10: низ — матовое стекло; светлый оттенок снят с основного изображения (#214F47 → светлее) */
    background: linear-gradient(160deg, rgba(203,214,209,.52) 0%, rgba(192,205,200,.36) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.poster .pdesc-wrap .fon { display: none; }
/* плашка «Рекомендуем/Популярный» — ниже кромки доски, не выглядывает */
.poster .featured-chip { display: inline-block; position: relative; z-index: 2; margin: 30px 0 0 18px; }
.poster .pdesc {
    position: relative; z-index: 1; margin: 18px 26px 62px; text-align: center;
    color: #0F3E33; font-size: 14.5px; line-height: 1.55; font-weight: 500;
}
.poster .pbuy {
    position: absolute; left: 0; right: 0; bottom: 10px; z-index: 1;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 24px;
}
.poster .pprice { font-family: "Playfair Display", serif; font-weight: 600; font-size: 21px; color: #8A6A18; }
.poster .old-price { color: rgba(15,62,51,.55); font-size: 13px; }
.poster .featured-chip {
    padding: 6px 13px; border-radius: 50px; background: linear-gradient(135deg,#D67B7B 0%, #F5C6C6 100%);
    color: #fff; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap;
}
/* 21.10: миниатюра отодвинута от названия — больше заезд за кромку, чуть меньше */
.poster .pico {
    position: absolute; top: -30px; right: -14px; z-index: 3; height: 142px; max-width: 50%; width: auto;
    filter: drop-shadow(0 16px 22px rgba(0,0,0,.45));
    transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .45s;
}
.poster .pico.big { height: 164px; top: -84px; }
.featured-chip.chip-gold { background: linear-gradient(135deg,#C9974B 0%, #E9C46A 100%); }
.course-card.poster:hover .pico {
    transform: translateY(-10px);
    filter: drop-shadow(0 22px 26px rgba(0,0,0,.5)) drop-shadow(0 0 20px rgba(233,196,106,.6));
}
/* крупные иконки: «Учёт на максимум» и другие по базе (c.icon_class) */
@media (max-width: 720px) {
    .poster .ptop { height: 200px; margin: 10px 10px -12px; border-width: 5px; }
    .poster .pname { font-size: 29px; }
    .poster .pname.small { font-size: 24px; }
    .poster .pdesc-wrap { margin: 0 14px 14px; height: 270px; }
    .poster .pdesc { padding: 18px 20px 0; font-size: 13.5px; }
    .poster .pico { height: 116px; top: -24px; }
    .poster .pico.big { height: 132px; top: -58px; }
}

/* ==== 16.10 (5): «Двигайтесь вперёд…» — крупнее ==== */
.about-text p:last-of-type { font-size: 22px; }

/* ==== 16.10 (5): в ленте «Обо мне» акцент чуть мельче — не налезает на золотую линию ==== */
.about-band .accent-green { font-size: .88em; }
@media (max-width: 900px) {
    .section.about .about-subtitle { white-space: normal; font-size: 18px; }
    .section.about .about-photo { margin-top: 0; }
}

/* 21.10: лозунг-призыв над карточками на главной */
.trainings-lead {
    text-align: center; margin: 4px auto 6px;
    font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600;
    font-size: 21px; color: #16544A; letter-spacing: .2px;
}

/* 21.10: строка цены и кнопки — без переносов, умещается в стекле */
.poster .pbuy { padding: 0 16px; gap: 8px; }
.poster .pprice, .poster .old-price, .poster .pbuy .btn-details { white-space: nowrap; flex-shrink: 0; }
.poster .pbuy .btn-details { padding: 8px 14px; font-size: 13px; }

/* 21.10: лозунг-призыв — стеклянная пилюля (референс Ирины) на главной и в каталоге.
   Правка 21.10 (вечер): выше к плашке «Наши тренинги», шрифт крупнее, чёрточки-дэши по краям.
   Правка 21.10: ещё выше примерно на 1 см (margin-top 10 → -26px). */
.trainings-lead {
    position: relative;
    display: table; margin: -26px auto 22px; padding: 14px 40px;
    border-radius: 50px;
    background: linear-gradient(120deg, rgba(11,61,51,.48) 0%, rgba(14,74,61,.30) 100%);
    border: 1px solid rgba(242,251,248,.38);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    color: #F2FBF8 !important; text-align: center;
    font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600;
    font-size: 25px; letter-spacing: .3px;
    text-shadow: 0 1px 8px rgba(0,0,0,.30);
    box-shadow: 0 10px 26px rgba(11,61,51,.22);
}
/* чёрточки по краям пилюли — изумруд→золото, как акцент «тренинги» */
.trainings-lead::before, .trainings-lead::after {
    content: ''; position: absolute; top: 50%; margin-top: -1px;
    width: 46px; height: 2px; border-radius: 2px;
}
.trainings-lead::before { left: -66px; background: linear-gradient(90deg, rgba(233,196,106,0), #C9A24B); }
.trainings-lead::after  { right: -66px; background: linear-gradient(90deg, #C9A24B, rgba(233,196,106,0)); }
@media (max-width: 720px) {
    .trainings-lead { font-size: 20px; padding: 11px 22px; margin-top: -6px; }
    /* на узких экранах чёрточки спрятаны — иначе вылезают за пилюлю и дают горизонтальный скролл */
    .trainings-lead::before, .trainings-lead::after { display: none; }
}

/* ---------- 31.10.2026 (Ирина): «Войти» с выбором кабинета ---------- */
.cab-drop { position: relative; display: inline-block; }
.cab-drop-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  background: #fff; border-radius: 12px; box-shadow: 0 10px 28px rgba(27, 58, 107, .18);
  padding: 6px; min-width: 210px;
}
.cab-drop:hover .cab-drop-menu,
.cab-drop:focus-within .cab-drop-menu,
.cab-drop.open .cab-drop-menu { display: block; }
.cab-drop > button.btn { cursor: pointer; }
.cab-drop-menu a {
  display: block; padding: 10px 14px; border-radius: 8px;
  color: #25423C; text-decoration: none; font-size: 14px; white-space: nowrap;
}
.cab-drop-menu a:hover { background: #F0F6F3; color: #1E6B5C; }