/* ============================================================
   АНО ДПО «Целая Вселенная» — стили сайта
   Палитра: белый · голубой #0F75BC · тёмно-синий · тёмно-серый
   ============================================================ */

/* ------------------------------------------------------------
   Переменные
   ------------------------------------------------------------ */
:root {
    --blue:        #0F75BC;
    --blue-dark:   #0C5E97;
    --blue-deep:   #0B4F80;
    --blue-soft:   #EAF3FB;
    --blue-tint:   #F4F9FD;
    --navy:        #123A5E;
    --navy-deep:   #0E2F4D;
    --ink:         #39424B;
    --ink-soft:    #5E6A74;
    --white:       #FFFFFF;
    --line:        #E4EBF1;

    --radius:      18px;
    --radius-lg:   26px;

    --shadow-sm:    0 4px 16px rgba(18, 58, 94, 0.06);
    --shadow:       0 14px 38px rgba(15, 117, 188, 0.10);
    --shadow-hover: 0 20px 50px rgba(15, 117, 188, 0.16);

    --container: 1180px;

    --font-h: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
    --font-b: 'Roboto', -apple-system, 'Segoe UI', sans-serif;
}

/* ------------------------------------------------------------
   Базовые стили
   ------------------------------------------------------------ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 17px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    /* clip (а не hidden) обрезает выехавшее за правый край мобильное меню,
       не создавая scroll-контейнер — поэтому sticky-шапка продолжает работать. */
    overflow-x: clip;
}

body {
    font-family: var(--font-b);
    color: var(--ink);
    background: var(--white);
    line-height: 1.6;
    font-weight: 400;
    overflow-x: clip;
}

/* Блокировка прокрутки, пока открыта плашка cookie.
   position: fixed на body надёжно блокирует прокрутку на всех
   устройствах (в т. ч. iOS), позиция восстанавливается из JS. */
html.no-scroll {
    overflow: hidden;
}

body.no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
    left: 0;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--blue);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--blue-dark);
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-h);
    color: var(--navy);
    line-height: 1.18;
    font-weight: 700;
}

b {
    font-weight: 700;
}

/* ------------------------------------------------------------
   Контейнеры
   ------------------------------------------------------------ */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

.container--narrow {
    max-width: 820px;
}

/* ------------------------------------------------------------
   Иконки — Material Symbols (локальные SVG через CSS-маску).
   Цвет берётся из color родителя, размер задаётся в контексте.
   ------------------------------------------------------------ */
.ic {
    display: inline-block;
    width: 1.4em;
    height: 1.4em;
    flex-shrink: 0;
    background-color: currentColor;
    vertical-align: middle;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.ic--call             { -webkit-mask-image: url(../images/icons/call.svg);              mask-image: url(../images/icons/call.svg); }
.ic--menu             { -webkit-mask-image: url(../images/icons/menu.svg);              mask-image: url(../images/icons/menu.svg); }
.ic--close            { -webkit-mask-image: url(../images/icons/close.svg);             mask-image: url(../images/icons/close.svg); }
.ic--location_on      { -webkit-mask-image: url(../images/icons/location_on.svg);       mask-image: url(../images/icons/location_on.svg); }
.ic--menu_book        { -webkit-mask-image: url(../images/icons/menu_book.svg);         mask-image: url(../images/icons/menu_book.svg); }
.ic--diversity_3      { -webkit-mask-image: url(../images/icons/diversity_3.svg);       mask-image: url(../images/icons/diversity_3.svg); }
.ic--spa              { -webkit-mask-image: url(../images/icons/spa.svg);               mask-image: url(../images/icons/spa.svg); }
.ic--schedule         { -webkit-mask-image: url(../images/icons/schedule.svg);          mask-image: url(../images/icons/schedule.svg); }
.ic--checklist        { -webkit-mask-image: url(../images/icons/checklist.svg);         mask-image: url(../images/icons/checklist.svg); }
.ic--self_improvement { -webkit-mask-image: url(../images/icons/self_improvement.svg);  mask-image: url(../images/icons/self_improvement.svg); }
.ic--psychology       { -webkit-mask-image: url(../images/icons/psychology.svg);        mask-image: url(../images/icons/psychology.svg); }
.ic--trending_up      { -webkit-mask-image: url(../images/icons/trending_up.svg);       mask-image: url(../images/icons/trending_up.svg); }
.ic--record_voice_over{ -webkit-mask-image: url(../images/icons/record_voice_over.svg); mask-image: url(../images/icons/record_voice_over.svg); }
.ic--cognition        { -webkit-mask-image: url(../images/icons/cognition.svg);         mask-image: url(../images/icons/cognition.svg); }
.ic--neurology        { -webkit-mask-image: url(../images/icons/neurology.svg);         mask-image: url(../images/icons/neurology.svg); }
.ic--mood             { -webkit-mask-image: url(../images/icons/mood.svg);              mask-image: url(../images/icons/mood.svg); }
.ic--back_hand        { -webkit-mask-image: url(../images/icons/back_hand.svg);         mask-image: url(../images/icons/back_hand.svg); }
.ic--palette          { -webkit-mask-image: url(../images/icons/palette.svg);           mask-image: url(../images/icons/palette.svg); }
.ic--backpack         { -webkit-mask-image: url(../images/icons/backpack.svg);          mask-image: url(../images/icons/backpack.svg); }
.ic--assignment       { -webkit-mask-image: url(../images/icons/assignment.svg);        mask-image: url(../images/icons/assignment.svg); }
.ic--verified_user    { -webkit-mask-image: url(../images/icons/verified_user.svg);     mask-image: url(../images/icons/verified_user.svg); }
.ic--groups           { -webkit-mask-image: url(../images/icons/groups.svg);            mask-image: url(../images/icons/groups.svg); }
.ic--school           { -webkit-mask-image: url(../images/icons/school.svg);            mask-image: url(../images/icons/school.svg); }
.ic--help             { -webkit-mask-image: url(../images/icons/help.svg);              mask-image: url(../images/icons/help.svg); }
.ic--picture_as_pdf   { -webkit-mask-image: url(../images/icons/picture_as_pdf.svg);    mask-image: url(../images/icons/picture_as_pdf.svg); }

/* ------------------------------------------------------------
   Кнопки
   ------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    font-family: var(--font-h);
    font-weight: 600;
    font-size: 1rem;
    padding: 0.85em 1.6em;
    border-radius: 999px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    text-align: center;
}

.btn--primary {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}

.btn--primary:hover {
    background: var(--blue-dark);
    border-color: var(--blue-dark);
    color: #fff;
    transform: translateY(-2px);
}

.btn--ghost {
    background: transparent;
    color: var(--blue);
    border-color: var(--blue);
}

.btn--ghost:hover {
    background: var(--blue);
    color: #fff;
    transform: translateY(-2px);
}

.btn--white {
    background: #fff;
    color: var(--blue);
    border-color: #fff;
}

.btn--white:hover {
    background: transparent;
    color: #fff;
    border-color: #fff;
    transform: translateY(-2px);
}

.btn--lg {
    font-size: 1.08rem;
    padding: 1em 1.9em;
}

.btn--sm {
    font-size: 0.9rem;
    padding: 0.6em 1.1em;
}

/* ------------------------------------------------------------
   Бейджи и надзаголовки
   ------------------------------------------------------------ */
.badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-family: var(--font-h);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    padding: 0.5em 1.1em;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue-dark);
}

.badge--accent {
    background: var(--blue);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

/* Иконка-вопрос с тултипом-пояснением в плашке набора:
   наведение/фокус на ПК, клик на смартфоне (aria-expanded через JS). */
.badge--info {
    cursor: pointer;
}

.badge__ic {
    width: 1.15em;
    height: 1.15em;
    margin-right: 0.45em;
    opacity: 0.85;
    transition: opacity 0.2s;
}

.badge--info:hover .badge__ic,
.badge--info:focus-visible .badge__ic {
    opacity: 1;
}

.badge__tip {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    width: max-content;
    max-width: min(320px, calc(100vw - 48px));
    padding: 11px 15px;
    background: var(--navy);
    color: #fff;
    font-family: var(--font-b);
    font-weight: 400;
    font-size: 0.8rem;
    line-height: 1.45;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    border-radius: 12px;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    z-index: 50;
}

/* Хвостик тултипа */
.badge__tip::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 16px;
    border: 7px solid transparent;
    border-bottom-color: var(--navy);
}

/* Показ тултипа: наведение/фокус на ВЕСЬ бейдж (ПК) или открыто кликом (смартфон). */
.badge--info:hover .badge__tip,
.badge--info:focus-visible .badge__tip,
.badge--info[aria-expanded="true"] .badge__tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Иконка-подсказка с тултипом (переиспользуемый компонент).
   Триггер — сам элемент .hint: наведение/фокус на ПК, клик на смартфоне. */
.hint {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: -0.15em;
    margin-right: 0.4em;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s;
}

.hint:hover,
.hint:focus-visible {
    opacity: 1;
}

.hint__ic {
    width: 1.15em;
    height: 1.15em;
}

.hint__tip {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    width: max-content;
    max-width: min(320px, calc(100vw - 48px));
    padding: 11px 15px;
    background: var(--navy);
    color: #fff;
    font-family: var(--font-b);
    font-weight: 400;
    font-size: 0.8rem;
    line-height: 1.45;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    border-radius: 12px;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    z-index: 50;
}

.hint__tip::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 6px;
    border: 7px solid transparent;
    border-bottom-color: var(--navy);
}

.hint:hover .hint__tip,
.hint:focus-visible .hint__tip,
.hint[aria-expanded="true"] .hint__tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* На смартфоне тултипы (хелпер и бейдж) показываем фиксированной плашкой
   внизу экрана — иначе у краёв они обрезаются вьюпортом / выходят за край. */
@media (max-width: 560px) {
    .hint__tip,
    .badge__tip {
        position: fixed;
        left: 14px;
        right: 14px;
        bottom: 14px;
        top: auto;
        width: auto;
        max-width: none;
        transform: translateY(12px);
        font-size: 0.86rem;
    }

    .hint__tip::before,
    .badge__tip::before {
        display: none;
    }

    .hint:hover .hint__tip,
    .hint:focus-visible .hint__tip,
    .hint[aria-expanded="true"] .hint__tip,
    .badge--info:hover .badge__tip,
    .badge--info:focus-visible .badge__tip,
    .badge--info[aria-expanded="true"] .badge__tip {
        transform: translateY(0);
    }
}

.eyebrow {
    display: inline-block;
    font-family: var(--font-h);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    color: var(--blue);
    margin-bottom: 0.7rem;
}

.eyebrow--light {
    color: #8FC4E8;
}

/* ------------------------------------------------------------
   Шапка
   ------------------------------------------------------------ */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--line);
}

/* Раскладка шапки: три flex-части — логотип, меню, кнопка — разнесены
   через justify-content: space-between. Логотип у левого края, кнопка
   у правого, меню между ними с одинаковыми отступами слева и справа. */
.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 74px;
}

.header__logo {
    flex-shrink: 0;
}

.header__logo img {
    height: 42px;
    width: auto;
}

.header__right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.nav {
    flex-shrink: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
    gap: clamp(0.5rem, 1.1vw, 1.45rem);
}

.nav__link {
    font-family: var(--font-h);
    font-weight: 600;
    /* На узких десктопах шрифт меню плавно уменьшается, чтобы меню
       помещалось в строку вплоть до перехода на бургер (< 980px). */
    font-size: clamp(0.72rem, 1.2vw, 0.96rem);
    color: var(--navy);
    position: relative;
    padding: 0.3em 0;
    white-space: nowrap;
}

.nav__link:hover {
    color: var(--blue);
}

.nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: var(--blue);
    transition: width 0.25s;
}

.nav__link:hover::after {
    width: 100%;
}

/* Кнопка-телефон в шапке (десктоп), прижата вправо. Маленькие
   вертикальные паддинги; внутри — иконка телефона перед номером. */
.header__cta {
    flex-shrink: 0;
    padding: 0.4em 1.25em;
}

.header__cta .ic {
    width: 1.1em;
    height: 1.1em;
}

/* Мобильный блок: иконка телефона + бургер (по умолчанию скрыт), справа */
.header__mob {
    display: none;
    flex-shrink: 0;
    align-items: center;
    gap: 0.25rem;
}

.header__icon-btn,
.burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--navy);
    border-radius: 10px;
    transition: background 0.2s, color 0.2s;
}

.header__icon-btn:hover,
.burger:hover {
    color: var(--blue);
    background: var(--blue-soft);
}

.header__icon-btn .ic {
    width: 26px;
    height: 26px;
}

.burger .ic {
    width: 28px;
    height: 28px;
}

.burger__close {
    display: none;
}

.burger[aria-expanded="true"] .burger__open {
    display: none;
}

.burger[aria-expanded="true"] .burger__close {
    display: inline-block;
}

/* ------------------------------------------------------------
   Секции — общее
   ------------------------------------------------------------ */
.section {
    padding: 84px 0;
}

/* Отступ для якорей под прилипающей шапкой */
section[id],
[id] {
    scroll-margin-top: 88px;
}

.section--soft {
    background: var(--blue-tint);
}

.section--navy {
    background: var(--navy);
    color: #dfeaf3;
}

.section__head {
    margin: 0 auto 48px;
    text-align: center;
}

.section__title {
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    margin-bottom: 0.5rem;
}

.section__title--light {
    color: #fff;
}

.section__sub {
    font-size: 1.1rem;
    color: var(--ink-soft);
}

.section--navy .section__sub {
    color: #a9c6dd;
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #fff 0%, var(--blue-soft) 100%);
}

.hero__decor {
    position: absolute;
    top: -30%;
    right: -12%;
    width: 780px;
    height: 780px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, rgba(15, 117, 188, 0.16), rgba(15, 117, 188, 0) 62%);
    pointer-events: none;
}

.hero__inner {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
    padding: 78px 24px 86px;
    position: relative;
}

.hero__title {
    font-size: clamp(2rem, 5.2vw, 3.4rem);
    margin: 1.1rem 0 1.2rem;
    letter-spacing: -0.01em;
}

.hero__lead {
    font-size: 1.2rem;
    color: var(--ink);
    max-width: 36em;
    margin-bottom: 1rem;
}

.hero__geo {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    color: var(--blue-dark);
    font-weight: 500;
    font-family: var(--font-h);
    margin-bottom: 1.8rem;
}

.hero__geo .ic {
    width: 1.3rem;
    height: 1.3rem;
    color: var(--blue);
}

.hero__geo a {
    color: inherit;
}

.hero__geo a:hover {
    text-decoration: underline;
}

.hero__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero__art {
    display: flex;
    justify-content: center;
}

.hero__art-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 42px 36px;
    text-align: center;
    max-width: 340px;
    width: 100%;
    border: 1px solid var(--line);
    position: relative;
}

.hero__mark {
    width: 130px;
    height: 130px;
    margin: 0 auto 18px;
}

.hero__art-quote {
    font-family: var(--font-h);
    font-size: 1.3rem;
    color: var(--navy);
    line-height: 1.4;
}

.hero__art-quote b {
    color: var(--blue);
}

/* ------------------------------------------------------------
   Эмпатия («Мы понимаем»)
   ------------------------------------------------------------ */
.empathy .section__title {
    text-align: center;
    margin-bottom: 44px;
}

.empathy__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    max-width: 880px;
    margin: 0 auto;
}

.empathy__item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px 26px 24px 30px;
    font-size: 1.08rem;
    color: var(--navy);
    font-style: italic;
    box-shadow: var(--shadow-sm);
    position: relative;
}

.empathy__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 4px;
    border-radius: 4px;
    background: var(--blue);
}

.empathy__bridge {
    text-align: center;
    font-size: 1.32rem;
    font-family: var(--font-h);
    color: var(--navy);
    margin-top: 38px;
}

.empathy__bridge b {
    color: var(--blue);
}

/* ------------------------------------------------------------
   Семейные классы (features)
   ------------------------------------------------------------ */
.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 48px;
}

.feature {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px 28px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s, box-shadow 0.25s;
}

.feature:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.feature__num {
    display: inline-block;
    font-family: var(--font-h);
    font-weight: 700;
    font-size: 2.1rem;
    color: var(--blue);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.feature__ico {
    display: inline-flex;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--blue-soft);
    color: var(--blue);
    margin-bottom: 1rem;
}

.feature__ico .ic {
    width: 30px;
    height: 30px;
}

.feature__title {
    font-size: 1.22rem;
    margin-bottom: 0.5rem;
}

.feature p {
    color: var(--ink-soft);
}

/* ------------------------------------------------------------
   CTA-полоса
   ------------------------------------------------------------ */
.cta-band {
    background: linear-gradient(120deg, var(--blue) 0%, var(--blue-deep) 100%);
    border-radius: var(--radius-lg);
    padding: 38px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    box-shadow: var(--shadow);
}

.cta-band__text {
    color: #fff;
    font-family: var(--font-h);
    font-size: 1.3rem;
    font-weight: 600;
    max-width: 34em;
}

.cta-band__text b {
    color: #fff;
}

/* ------------------------------------------------------------
   Как устроен день
   ------------------------------------------------------------ */
.day__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.day__item {
    text-align: center;
    padding: 14px;
}

.day__ico {
    display: inline-flex;
    width: 70px;
    height: 70px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--blue);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
}

.day__ico .ic {
    width: 34px;
    height: 34px;
}

.day__item h3 {
    font-size: 1.18rem;
    margin-bottom: 0.4rem;
}

.day__item p {
    color: var(--ink-soft);
}

/* ------------------------------------------------------------
   Направления (карточки)
   ------------------------------------------------------------ */
.cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 24px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s, box-shadow 0.25s;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.card__ico {
    display: inline-flex;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: var(--blue-soft);
    color: var(--blue);
    margin-bottom: 0.9rem;
}

.card__ico .ic {
    width: 28px;
    height: 28px;
}

.card__title {
    font-size: 1.14rem;
    margin-bottom: 0.4rem;
}

.card p {
    color: var(--ink-soft);
    font-size: 0.98rem;
}

/* ------------------------------------------------------------
   О центре (тёмно-синяя секция)
   ------------------------------------------------------------ */
.about__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}

.about__text p {
    margin-bottom: 1.1rem;
    color: #cfe0ee;
    font-size: 1.08rem;
}

.about__text b {
    color: #fff;
}

/* Плашка о статусе лицензирования (на тёмном фоне секции «О центре») */
.about__license {
    margin-top: 0.4rem;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.08);
    border-left: 3px solid rgba(255, 255, 255, 0.45);
    border-radius: 10px;
    font-size: 0.98rem !important;
    color: #dceaf6 !important;
}

.about__license a {
    color: #fff;
    text-decoration: underline;
}

.principles {
    list-style: none;
    display: grid;
    gap: 14px;
}

.principles li {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 16px 20px;
    color: #d3e3f0;
}

.principles b {
    color: #fff;
}

/* ------------------------------------------------------------
   Методики
   ------------------------------------------------------------ */
.methods__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.method {
    border: 1px solid var(--line);
    border-left: 4px solid var(--blue);
    border-radius: 14px;
    padding: 24px 26px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.method h3 {
    font-size: 1.16rem;
    margin-bottom: 0.45rem;
    color: var(--blue-dark);
}

.method p {
    color: var(--ink-soft);
    font-size: 0.99rem;
}

/* ------------------------------------------------------------
   Команда / Педагоги
   ------------------------------------------------------------ */
.team__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.team__card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px 28px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.team__ico {
    display: inline-flex;
    width: 64px;
    height: 64px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--blue-soft);
    color: var(--blue);
    margin-bottom: 1rem;
}

.team__ico .ic {
    width: 34px;
    height: 34px;
}

.team__card h3 {
    font-size: 1.18rem;
    margin-bottom: 0.5rem;
}

.team__card p {
    color: var(--ink-soft);
}

.team__note {
    text-align: center;
    max-width: 760px;
    margin: 34px auto 0;
    color: var(--ink-soft);
    font-size: 1.02rem;
}

/* ------------------------------------------------------------
   Как начать (шаги)
   ------------------------------------------------------------ */
.steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    counter-reset: s;
}

.step {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px 26px 26px;
    box-shadow: var(--shadow-sm);
}

.step__num {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-family: var(--font-h);
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.step h3 {
    font-size: 1.18rem;
    margin-bottom: 0.45rem;
}

.step p {
    color: var(--ink-soft);
    font-size: 0.99rem;
}

/* ------------------------------------------------------------
   Цены
   ------------------------------------------------------------ */
.prices__card {
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 46px 40px;
    text-align: center;
    box-shadow: var(--shadow);
}

.prices__lead {
    font-size: 1.2rem;
    color: var(--navy);
    margin-bottom: 1.6rem;
    font-family: var(--font-h);
    font-weight: 500;
}

.prices__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}

.prices__hint {
    color: var(--ink-soft);
}

/* ------------------------------------------------------------
   FAQ (аккордеон)
   ------------------------------------------------------------ */
.accordion {
    display: grid;
    gap: 12px;
}

.ac {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.ac summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 56px 20px 24px;
    position: relative;
    font-family: var(--font-h);
    font-weight: 600;
    color: var(--navy);
    font-size: 1.06rem;
}

.ac summary::-webkit-details-marker {
    display: none;
}

.ac summary::after {
    content: "+";
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.6rem;
    color: var(--blue);
    font-weight: 300;
    transition: transform 0.25s;
}

.ac[open] summary::after {
    content: "−";
}

.ac__body {
    padding: 0 24px 22px;
}

.ac__body p {
    color: var(--ink-soft);
}

/* ------------------------------------------------------------
   Контакты
   ------------------------------------------------------------ */
/* Верхняя граница отделяет секцию от предыдущей (обе на белом фоне). */
.contacts {
    border-top: 1px solid var(--line);
}

.contacts__inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 40px;
    align-items: stretch;
}

.contacts__info {
    display: grid;
    gap: 22px;
    align-content: start;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 32px 34px;
}

.contacts__row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contacts__label {
    font-family: var(--font-h);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.74rem;
    color: var(--blue);
}

.contacts__value {
    font-size: 1.08rem;
    color: var(--navy);
}

.contacts__value--big {
    font-family: var(--font-h);
    font-weight: 700;
    font-size: 1.4rem;
}

.contacts__map {
    min-height: 360px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
}

.contacts__map iframe {
    width: 100%;
    height: 100%;
    min-height: 360px;
    display: block;
}

/* ------------------------------------------------------------
   Футер
   ------------------------------------------------------------ */
.footer {
    background: var(--navy-deep);
    color: #b6cadb;
    padding: 56px 0 0;
}

.footer__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.4fr 1.2fr;
    gap: 36px;
}

.footer__h {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.footer__col a {
    display: block;
    color: #b6cadb;
    margin-bottom: 0.6rem;
    font-size: 0.98rem;
}

.footer__col a:hover {
    color: #fff;
}

.footer__col--req p {
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
}

.footer__logo {
    height: 72px;
    width: auto;
    background: #fff;
    padding: 12px 16px;
    border-radius: 14px;
    margin-bottom: 1.1rem;
}

.footer__slogan {
    font-family: var(--font-h);
    color: #dceaf6;
    font-size: 1.02rem;
    line-height: 1.5;
}

.footer__informer {
    display: inline-block;
    margin-top: 1.6rem;
    opacity: 0.85;
}

.footer__informer img {
    border-radius: 6px;
}

.footer__bottom {
    margin-top: 46px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 22px 0;
}

.footer__bottom-inner {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 0.88rem;
    color: #8ba6bd;
}

/* ------------------------------------------------------------
   Cookie: затемняющий оверлей + плашка
   ------------------------------------------------------------ */

/* Атрибут hidden должен скрывать плашку и оверлей. Без этого правила
   display:flex у .uv-sheet перебивает [hidden]{display:none} (класс
   приоритетнее атрибута), и плашка не прячется при «Принять». */
.uv-sheet[hidden],
.uv-veil[hidden] {
    display: none;
}

.uv-veil {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(14, 47, 77, 0.55);
    backdrop-filter: blur(2px);
}

.uv-sheet {
    position: fixed;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 9999;
    max-width: 1180px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 18px 50px rgba(18, 58, 94, 0.30);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.uv-sheet__text {
    font-size: 0.96rem;
    color: var(--ink);
    max-width: 62ch;
}

.uv-sheet__actions {
    display: flex;
    gap: 0.7rem;
    flex-shrink: 0;
}

/* ============================================================
   Внутренние страницы (Сведения, Политика)
   ============================================================ */
.page-hero {
    background: linear-gradient(160deg, #fff, var(--blue-soft));
    padding: 54px 0 46px;
    border-bottom: 1px solid var(--line);
}

.page-hero__crumbs {
    font-size: 0.92rem;
    color: var(--ink-soft);
    margin-bottom: 0.8rem;
}

.page-hero__crumbs a {
    color: var(--blue);
}

.page-hero h1 {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
}

.page-hero p {
    color: var(--ink-soft);
    margin-top: 0.6rem;
}

.doc {
    padding: 52px 0 70px;
}

.doc__layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 44px;
    align-items: start;
}

.toc {
    position: sticky;
    top: 92px;
    background: var(--blue-tint);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
    font-size: 0.92rem;
}

.toc h4 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--blue);
    margin-bottom: 0.7rem;
}

.toc a {
    display: block;
    color: var(--ink);
    padding: 0.32em 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

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

.toc a:hover {
    color: var(--blue);
}

.doc__body {
    min-width: 0;
}

.doc__body h2 {
    font-size: 1.5rem;
    margin: 34px 0 14px;
    padding-top: 6px;
}

.doc__body h2:first-child {
    margin-top: 0;
}

.doc__body h3 {
    font-size: 1.15rem;
    margin: 22px 0 8px;
    color: var(--blue-dark);
}

.doc__body p {
    margin-bottom: 1rem;
    color: var(--ink);
}

.doc__body ul,
.doc__body ol {
    margin: 0 0 1rem 1.3rem;
}

.doc__body li {
    margin-bottom: 0.5rem;
}

/* Список документов (.doc-files) — не обычный маркированный список:
   снимаем левый отступ и межстрочные зазоры, навязанные .doc__body ul/li. */
.doc__body ul.doc-files {
    margin-left: 0;
    padding-left: 0;
}

.doc__body .doc-files li {
    margin-bottom: 0;
}

.doc__body a {
    word-break: break-word;
}

/* Аккордеон подразделов «Сведения» */
.sv {
    margin-bottom: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}

.sv summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 52px 18px 22px;
    position: relative;
    font-family: var(--font-h);
    font-weight: 600;
    color: var(--navy);
    background: #fff;
}

.sv summary::-webkit-details-marker {
    display: none;
}

.sv summary::after {
    content: "+";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--blue);
    font-size: 1.5rem;
    font-weight: 300;
}

.sv[open] summary::after {
    content: "−";
}

.sv[open] summary {
    border-bottom: 1px solid var(--line);
}

.sv__in {
    padding: 18px 22px;
}

/* Таблица со скруглёнными углами: border-collapse: separate позволяет
   задать радиус угловым ячейкам; границы рисуем только снизу/справа,
   чтобы они не двоились. */
.sv-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.97rem;
}

.sv-table th,
.sv-table td {
    text-align: left;
    vertical-align: top;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-left-width: 0;
    border-top-width: 0;
}

.sv-table th:first-child,
.sv-table td:first-child {
    border-left-width: 1px;
}

.sv-table tr:first-child th,
.sv-table tr:first-child td {
    border-top-width: 1px;
}

/* Радиус угловым ячейкам */
.sv-table tr:first-child th:first-child {
    border-top-left-radius: 12px;
}

.sv-table tr:first-child td:last-child {
    border-top-right-radius: 12px;
}

.sv-table tr:last-child th:first-child {
    border-bottom-left-radius: 12px;
}

.sv-table tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

.sv-table th {
    width: 38%;
    background: var(--blue-tint);
    font-family: var(--font-h);
    font-weight: 600;
    color: var(--navy);
}

.sv-note {
    font-size: 0.92rem;
    color: var(--ink-soft);
    font-style: italic;
    margin-top: 10px;
}

/* Список документов для скачивания */
.docs-list {
    display: grid;
    gap: 10px;
    margin: 6px 0 1rem;
}

.doc-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
    transition: 0.2s;
    color: var(--navy);
}

.doc-link:hover {
    border-color: var(--blue);
    box-shadow: var(--shadow-sm);
    color: var(--navy);
    transform: translateY(-1px);
}

.doc-link .ic {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    color: var(--blue);
}

.doc-link b {
    font-family: var(--font-h);
    font-weight: 600;
    display: block;
}

.doc-link span {
    font-size: 0.84rem;
    color: var(--ink-soft);
}

/* Список ЛНА: название документа + кнопки PDF и ЭП (электронная подпись .sig) */
.doc-files {
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 13px;
    overflow: hidden;
}

.doc-files li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}

.doc-files li:last-child {
    border-bottom: 0;
}

.doc-files__name {
    flex: 1 1 58%;
    min-width: 0;
    font-size: 0.94rem;
}

.doc-files__links {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
}

.doc-files__links a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-h);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 8px;
    background: var(--blue-soft);
    color: var(--blue-dark);
    white-space: nowrap;
    transition: 0.2s;
}

.doc-files__links a:hover {
    background: var(--blue);
    color: #fff;
}

.doc-files__links .is-sig {
    background: var(--blue-tint);
    color: var(--ink-soft);
}

.doc-files__links .is-sig:hover {
    background: var(--navy);
    color: #fff;
}

/* Подзаголовки и абзацы внутри раздела «Сведения» */
.sv__in h3 {
    font-size: 1.05rem;
    color: var(--navy);
    margin: 30px 0 14px;
}

.sv__in h3:first-child {
    margin-top: 0;
}

/* Таблица/список сразу после подзаголовка — без слипания */
.sv__in h3 + .sv-table,
.sv__in h3 + .doc-files,
.sv__in h3 + .docs-list {
    margin-top: 0;
}

.sv__in > p {
    margin: 8px 0;
}

.sv__in > p:first-child {
    margin-top: 0;
}

.callout {
    background: var(--blue-soft);
    border-left: 4px solid var(--blue);
    border-radius: 10px;
    padding: 16px 20px;
    margin: 0 0 1.2rem;
    color: var(--navy);
}

/* ============================================================
   Адаптив
   ============================================================ */
/* Шапка: на десктопе меню остаётся в строку (шрифт ужимается через
   clamp в .nav__link). Только на < 980px (планшеты/телефоны) переходим
   на бургер. */
@media (max-width: 979px) {
    .nav {
        position: fixed;
        top: 74px;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        margin: 0;
        background: #fff;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow);
        padding: 8px 0;
        transform: translateX(100%);
        transition: transform 0.3s;
        max-height: calc(100vh - 74px);
        overflow: auto;
        z-index: 99;
    }
    .nav.open {
        transform: translateX(0);
    }
    .nav__link {
        padding: 14px 24px;
        font-size: 1.05rem;
        border-bottom: 1px solid var(--line);
    }
    .nav__link:last-child {
        border-bottom: 0;
    }
    .nav__link::after {
        display: none;
    }
    .header__cta {
        display: none;
    }
    .header__mob {
        display: flex;
    }
}

@media (max-width: 1100px) {
    .features,
    .methods__list,
    .team__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .day__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 960px) {
    .hero__inner {
        grid-template-columns: 1fr;
        gap: 64px;
    }
    .hero__art {
        justify-content: center;
    }
    .hero__art-card {
        max-width: 300px;
        padding: 32px 28px;
    }
    .about__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .contacts__inner {
        grid-template-columns: 1fr;
    }
    .footer__inner {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 860px) {
    .doc__layout {
        grid-template-columns: 1fr;
    }
    .toc {
        position: static;
        margin-bottom: 8px;
    }
    .sv-table th {
        width: 42%;
    }
}

@media (max-width: 760px) {
    html {
        font-size: 16px;
    }
    .section {
        padding: 60px 0;
    }
    .empathy__grid {
        grid-template-columns: 1fr;
    }
    .cta-band {
        padding: 30px 28px;
        text-align: center;
        justify-content: center;
    }
    .cta-band__text {
        font-size: 1.15rem;
    }
    .hero__inner {
        padding: 54px 24px 64px;
    }
    .footer__bottom-inner {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 560px) {
    .features,
    .methods__list,
    .team__grid,
    .cards,
    .day__grid,
    .steps {
        grid-template-columns: 1fr;
    }
    .footer__inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .hero__actions .btn,
    .prices__actions .btn {
        width: 100%;
    }
    .uv-sheet {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .uv-sheet__actions {
        justify-content: center;
    }
}

@media (max-width: 520px) {
    .sv-table,
    .sv-table tbody,
    .sv-table tr,
    .sv-table th,
    .sv-table td {
        display: block;
        width: 100%;
    }

    /* На узком экране таблица превращается в список карточек «заголовок + значение».
       Каждая пара th→td — отдельная карточка: th сверху (скруглён вверху),
       td снизу (скруглён внизу), между парами — вертикальный отступ.
       Селекторы угловых ячеек дублируем, чтобы перебить десктопные радиусы. */
    .sv-table tr {
        margin-bottom: 10px;
    }

    .sv-table th,
    .sv-table tr:first-child th:first-child,
    .sv-table tr:last-child th:first-child {
        border: 1px solid var(--line);
        border-bottom: 0;
        border-radius: 12px 12px 0 0;
    }

    .sv-table td,
    .sv-table tr:first-child td:last-child,
    .sv-table tr:last-child td:last-child {
        border: 1px solid var(--line);
        border-radius: 0 0 12px 12px;
    }
}

/* ------------------------------------------------------------
   Доступность
   ------------------------------------------------------------ */
:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}