/* ── FONTS (self-hosted, файлы см. в fonts/) ── */
@font-face {
    font-family: 'Alice';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/alice-regular-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Alice';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/alice-regular-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Alice';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/alice-regular-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Alice';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/alice-regular-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/open-sans-italic-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/open-sans-italic-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/open-sans-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/open-sans-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/open-sans-regular-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/open-sans-regular-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/open-sans-regular-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/open-sans-regular-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/open-sans-regular-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/open-sans-regular-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/open-sans-regular-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/open-sans-regular-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/open-sans-regular-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/open-sans-regular-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/open-sans-regular-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/open-sans-regular-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Language hiding utility */
body[data-active-lang="ru"] [data-lang="en"] { display: none !important; }
body[data-active-lang="en"] [data-lang="ru"] { display: none !important; }
body[data-active-lang="en"] .nav-book { display: none !important; }
body[data-active-lang="en"] .ru-only { display: none !important; }
body[data-active-lang="ru"] .en-only { display: none !important; }

/* Reset */
*, *::before, *::after { box-sizing: border-box; }

/* ── Modern design-system tokens ── */
:root {
    --bg:           #faf9f6;
    --surface:      #ffffff;
    --surface-warm: #eef1ff;
    --fg:           #111827;
    --fg-2:         #374151;
    --muted:        #6b7280;
    --meta:         #0F5FA1;
    --border:       #dfe3ed;
    --border-soft:  #eef1f7;
    --accent:       #0A4A80;
    --accent-on:    #ffffff;
    --accent-hover: color-mix(in oklab, #0A4A80, black 8%);
    --accent-active:color-mix(in oklab, #0A4A80, black 14%);
    --dark:         #111827;
    --text-inv:     #ffffff;

    /* Elevation */
    --elev-ring:   0 0 0 1px var(--border);
    --elev-raised: 14px 24px 40px rgba(17, 24, 39, 0.18);
    --elev-card:   0 4px 16px rgba(17, 24, 39, 0.07);
    --focus-ring:  0 0 0 4px color-mix(in oklab, var(--accent), transparent 76%);

    /* Radius */
    --radius-sm:   10px;
    --radius-md:   16px;
    --radius-lg:   24px;
    --radius-pill: 9999px;

    /* Typography */
    --h1-hero:     clamp(2.2rem, 4vw, 3.8rem);
    --h2:          clamp(1.5rem, 2.6vw, 2.2rem);
    --body:        1rem;
    --sm:          0.875rem;
    --lh-heading:  1.04;
    --lh-body:     1.6;

    /* Layout */
    --container:   1180px;
    --pad-x:       36px;
    --section-gap: 104px;

    /* Motion */
    --motion-fast: 150ms;
    --motion-base: 240ms;
    --ease:        cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Base ── */
body {
    font-family: 'Open Sans', sans-serif;
    margin: 0; padding: 0;
    background-color: var(--bg);
    color: var(--fg);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ── Scroll-reveal ── */
@keyframes reveal-fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
main,
body > section {
    animation: reveal-fade-up 640ms var(--ease) both;
}
body > section:nth-of-type(1) { animation-delay: 0ms; }
body > section:nth-of-type(2) { animation-delay: 110ms; }
body > section:nth-of-type(3) { animation-delay: 220ms; }
body > section:nth-of-type(4) { animation-delay: 330ms; }
body > section:nth-of-type(5) { animation-delay: 440ms; }
body > section:nth-of-type(n+6) { animation-delay: 520ms; }

@media (prefers-reduced-motion: reduce) {
    main,
    body > section {
        animation: none;
    }
}

h1, h2 { font-family: 'Alice', serif; font-weight: 400; color: var(--fg); }

h1 {
    font-size: var(--h1-hero);
    line-height: var(--lh-heading);
    letter-spacing: -0.025em;
    margin: 0 0 1.75rem 0;
    text-wrap: balance;
}
h2 {
    font-size: var(--h2);
    color: var(--accent);
    line-height: var(--lh-heading);
    letter-spacing: -0.01em;
    margin: 0 0 2.5rem 0;
    text-wrap: balance;
}
h3 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    /* Тот же акцентный цвет, но осветлённый: полужирный рубленый набор кладёт
       на ту же площадь заметно больше краски, чем тонкий серифный h2, и один
       и тот же цвет читается на нём как более тёмный. Подмес белого выравнивает
       плотность на глаз, не меняя тона. */
    color: color-mix(in oklab, var(--accent), white 12%);
    line-height: 1.25;
    letter-spacing: -0.005em;
    margin: 0 0 0.75rem 0;
    text-wrap: balance;
}
p { margin: 0 0 1rem 0; }
strong { color: var(--accent); }

a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in oklab, var(--accent), transparent 70%);
    transition: opacity var(--motion-fast) var(--ease);
}
a:hover { opacity: 0.72; text-decoration: none; }

/* ── Container ── */
.v2-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad-x);
}

/* ── HEADER ── */
.v2-header {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 16px 0;
    background: rgba(250, 249, 246, 0.85);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid var(--border-soft);
}
.v2-header-inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 40px;
}
.v2-logo {
    margin-right: auto;
}
.v2-logo a {
    font-family: 'Alice', serif;
    font-size: 1.5rem;
    text-decoration: none;
    color: var(--accent);
    white-space: nowrap;
}
.v2-nav ul {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    gap: 28px;
    align-items: center;
}
.v2-nav a {
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.02em;
    transition: color var(--motion-fast) var(--ease);
    position: relative;
}
.v2-nav a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0; right: 0;
    height: 1.5px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--motion-base) var(--ease);
}
.v2-nav a:hover { color: var(--accent); text-decoration: none; opacity: 1; }
.v2-nav a:hover::after { transform: scaleX(1); }

/* Кнопка меню. На широком экране её нет — меню и так помещается в строку.
   Появляется на телефонной точке перелома, см. блок @media в конце файла. */
.v2-nav-toggle {
    display: none;
    /* 44 пикселя — нижняя граница, при которой в кнопку уверенно попадают
       пальцем. Сам значок мельче, поле вокруг него добирает до этого размера. */
    width: 44px;
    height: 44px;
    padding: 0;
    margin-right: -10px;
    background: none;
    border: 0;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
/* Значок нарисован тремя полосками, а не взят символом из шрифта: «≡» в разных
   шрифтах выглядит по-разному, и толщину линий у него не настроить. */
.v2-nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
    transition: transform var(--motion-base) var(--ease),
                opacity var(--motion-fast) var(--ease);
}
/* Раскрытое состояние: средняя полоска гаснет, крайние сходятся в крестик.
   Сдвиг на 7px — это высота полоски плюс зазор, чтобы они встретились ровно
   по центру. */
.v2-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.v2-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.v2-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.v2-nav-toggle:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

.v2-lang-toggle {
    position: relative;
    display: flex;
    align-items: center;
    width: 76px;
    height: 32px;
    padding: 3px;
    border-radius: var(--radius-pill);
    background: var(--border-soft);
}
.v2-lang-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    border-radius: var(--radius-pill);
    background: var(--accent);
    transition: transform var(--motion-base) var(--ease);
}
body[data-active-lang="en"] .v2-lang-toggle-thumb { transform: translateX(100%); }
.v2-lang-toggle-option {
    position: relative;
    z-index: 1;
    flex: 1;
    background: none;
    border: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    cursor: pointer;
    padding: 0;
    transition: color var(--motion-fast) var(--ease);
}
.v2-lang-toggle-option.active { color: var(--accent-on); }

/* Английская версия временно отключена — переключатель скрыт. Чтобы вернуть
   его, удалить правило ниже: разметка и остальные стили на месте. */
.v2-lang-toggle { display: none; }

/* ── КОНТАКТЫ В ШАПКЕ ──
   Два значка вместо кнопки с выпадающей плашкой: телеграм и почта открываются
   в один клик. Значки допущены потому, что каждый из них заменяет слово без
   потери смысла, — это не общий случай, а исключение. */
.hdr-contact { display: flex; align-items: center; gap: 2px; }
.hdr-contact-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    /* Полный акцент в покое, не приглушённый: связаться — единственное, что
       должно попадаться на глаза тому, кто не искал. Меню можно приглушить,
       его ищут сами. Под курсором значок темнеет; подложки за ним нет. */
    color: var(--accent);
    text-decoration: none;
    transition: color var(--motion-fast) var(--ease),
                transform var(--motion-base) var(--ease);
}
/* Под курсором значок светлеет и приподнимается. Именно светлеет: затемнять
   тёмно-синий почти нечем, разницы не видно. Подъём на два пикселя — тот же
   приём, что у кнопок сайта. */
.hdr-contact-link:hover,
.hdr-contact-link:focus-visible {
    color: var(--meta);
    transform: translateY(-2px);
    opacity: 1;
}
/* Значки взяты готовыми: самолётик — геометрия фирменного знака телеграма,
   конверт — из того же весового ряда. Рисовать их руками не надо, форму
   легко испортить. */
.hdr-contact-icon {
    width: 1.35rem;
    height: 1.35rem;
    fill: currentColor;
}
/* Подсказка не спрятана через display: none и не убрана из разметки — она же
   служит названием ссылки для программ чтения с экрана. Прозрачность её
   скрывает от глаз, но не от них. */
.hdr-contact-hint {
    position: absolute;
    top: calc(100% - 4px);
    right: 0;
    padding: 4px 8px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    box-shadow: var(--elev-card);
    font-size: 0.75rem;
    color: var(--muted);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-fast) var(--ease);
}
.hdr-contact-link:hover .hdr-contact-hint,
.hdr-contact-link:focus-visible .hdr-contact-hint { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .hdr-contact-link,
    .hdr-contact-hint { transition: none; }
}


/* ── HERO ── */
.v2-hero { padding: 104px 0 120px; }
.v2-hero-grid {
    display: grid;
    grid-template-columns: 63fr 37fr;
    gap: 80px;
    align-items: start;
}
/* Сдвиг ставит заголовок напротив лица, а не напротив пустого
   верха кадра. 15% ширины колонки — выбрано на глаз из вариантов
   7.5 / 13 / 15 / 18 / 23%; воздуха под текстом чуть больше, чем
   над ним, поэтому блок сидит выше геометрической середины. */
.v2-hero-text { position: relative; padding-top: 10%; }
.v2-hero-text h1 { font-size: clamp(2.2rem, 3.6vw, 3.4rem); line-height: 1.2; margin-bottom: 2.5rem; }
.v2-hero-lead {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 1.75rem;
    max-width: 44ch;
    color: var(--fg-2);
    text-wrap: pretty;
}
.v2-hero-body {
    font-size: var(--body);
    max-width: 44ch;
    color: var(--muted);
    line-height: var(--lh-body);
}
.v2-hero-lead a {
    font-weight: 700;
    text-decoration-color: color-mix(in oklab, var(--accent), transparent 15%);
}
.v2-hero-photo {
    position: sticky;
    top: 76px;
}
.v2-hero-photo img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-md);
    box-shadow: var(--elev-raised);
    border: 1px solid var(--border);
}

/* ── CLIENTS BLOCK ── */
.v2-twocol {
    padding: var(--section-gap) 0;
    border-top: 1px solid var(--border);
}
.v2-twocol-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 72px;
    align-items: start;
}
/* Дорожка сузиться готова (minmax(0, 1fr)), а сам элемент грида — нет: у него
   min-width: auto, то есть он не даёт себя сжать уже своего содержимого. Внутри
   лежит лента логотипов шириной max-content, и без этой строки она распирала
   страницу вбок на узком экране. */
.v2-twocol-grid > * { min-width: 0; }
.v2-twocol p { font-size: var(--body); line-height: var(--lh-body); color: var(--fg-2); }

/* ── CLIENTS MARQUEE ── */
.v2-marquee {
    width: 100%;
    padding-top: 2.5rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.v2-marquee-track {
    display: flex;
    width: max-content;
    gap: 64px;
    animation: v2-marquee-scroll 30s linear infinite;
}
.v2-marquee-item {
    flex: none;
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.v2-marquee-logo img {
    display: block;
    height: 32px;
    width: auto;
}
@keyframes v2-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── CASES BLOCK (full width) ── */
.v2-cases {
    padding: var(--section-gap) 0;
    border-top: 1px solid var(--border);
}
.v2-cases-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 140px 140px;
}
.v2-case-stat {
    font-family: 'Alice', serif;
    font-size: clamp(2.75rem, 4.5vw, 4rem);
    line-height: 1;
    letter-spacing: -0.03em;
    height: clamp(4rem, 7vw, 6.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    color: var(--accent);
}
.v2-case-desc { font-size: var(--body); line-height: var(--lh-body); color: var(--fg-2); max-width: 68ch; margin: 0 0 1rem 0; }
.v2-case-company { font-size: var(--sm); line-height: var(--lh-body); color: var(--fg-2); max-width: 68ch; margin: 0; }
.v2-case-link { font-size: var(--sm); line-height: var(--lh-body); margin: 1.25rem 0 0; }

/* ── CTA ── */
.v2-cta {
    padding: var(--section-gap) 0;
    border-top: 1px solid var(--border);
}
.v2-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.02em;
    color: var(--accent-on);
    background: var(--accent);
    border: 1px solid var(--accent);
    padding: 13px 24px;
    border-radius: var(--radius-md);
    transition: background var(--motion-fast) var(--ease),
                transform var(--motion-base) var(--ease),
                box-shadow var(--motion-base) var(--ease);
}
.v2-cta-link::after { content: '→'; }
.v2-cta-link:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: 0 12px 40px color-mix(in oklab, var(--accent), transparent 72%);
    transform: translateY(-1px);
    opacity: 1;
}
.v2-cta-link:active { transform: translateY(0); }
button.v2-cta-link { font-family: inherit; cursor: pointer; appearance: none; }
.v2-cta-link--back::after { content: none; }

/* ── 404 ── */
.notfound {
    padding: calc(var(--section-gap) * 1.5) 0;
    text-align: center;
}
.notfound-code {
    font-family: 'Alice', serif;
    font-size: clamp(5rem, 16vw, 11rem);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--accent);
    margin: 0 0 1.5rem;
}
.notfound-text {
    font-size: var(--body);
    line-height: var(--lh-body);
    color: var(--fg-2);
    margin: 0 0 2.5rem;
}

/* Lead request CTA — embedded inline, not a modal */
.lead-cta { padding: var(--section-gap) 0; }
.lead-cta--tight-top { padding-top: 24px; }
.lead-cta--half-top { padding-top: calc(var(--section-gap) / 2); }
/* Кнопка не отбивается линиями: у следующей секции свою границу убираем */
.lead-cta + .tr-section,
.lead-cta + .v2-cases,
.lead-cta + .v2-cta { border-top: none; }
/* На странице выступлений кнопка идёт сразу за медиа-китом. Отступ в полтора
   раза больше, чем у самого кита от списка тем (2.9rem = 2rem + 0.9rem
   нижнего padding последнего пункта списка), — так кнопка не липнет к ссылке. */
.lead-details--tight { margin-top: 4.35rem; }

/* ── СПАРЕННАЯ КНОПКА «ОБСУДИТЬ ОБУЧЕНИЕ | ТЕЛЕГРАМ» ──
   Два сегмента в одной оболочке: общая рамка, одна черта посередине,
   внешние углы скруглены, внутренние прямые. */
.lead-cta-pair { display: flex; align-items: flex-start; }
/* Отбивку сверху несёт пара целиком: оставь её на первом сегменте — второй
   остался бы приклеен к верху и сегменты разъехались бы по вертикали. */
.lead-cta-pair:has(.lead-details--tight) { margin-top: 4.35rem; }
.lead-cta-pair .lead-details--tight { margin-top: 0; }
.lead-cta-pair .lead-details summary {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.lead-pair-alt {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: var(--accent);
    background: transparent;
    border: 1px solid var(--accent);
    /* Левой границы нет: её роль играет правый край первого сегмента,
       иначе между кнопками получилась бы двойная черта. */
    border-left: none;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 13px 20px;
    white-space: nowrap;
    transition: background var(--motion-fast) var(--ease);
}
/* Значок телеграма — единственный на сайте. Он здесь потому, что это узнаваемая
   марка, а не выдуманный символ: на телефоне подпись не влезает, и значок
   заменяет её без потери смысла. Цвет берётся из текста кнопки. */
.lead-pair-icon {
    display: none;
    flex: none;
    width: 1.65em;
    height: 1.65em;
    margin-left: 0.7em;
    fill: currentColor;
}
.lead-pair-alt:hover {
    background: color-mix(in oklab, var(--accent), transparent 92%);
    color: var(--accent);
    text-decoration: none;
    opacity: 1;
}
/* Форма лежит внутри <details>, поэтому в раскрытом виде растянула бы блок
   до своей ширины и оторвала бы второй сегмент от первого. Отрицательный
   отступ убирает форму из расчёта ширины: по высоте она считается как
   обычно и по-прежнему сдвигает страницу вниз. Не удалять. */
.lead-cta-pair {
    --panel-w: min(620px, calc(100vw - 2 * var(--pad-x)));
}
.lead-cta-pair .lead-panel {
    width: var(--panel-w);
    margin-right: calc(-1 * var(--panel-w));
}
@media (prefers-reduced-motion: reduce) {
    .lead-pair-alt { transition: none; }
}

@media (max-width: 600px) {
    /* На телефоне пара не разъезжается, а занимает всю ширину: первый сегмент
       тянется на свободное место, второй остаётся по содержимому. Кегль при
       этом не трогаем — вместо него ужимаем боковые поля и укорачиваем
       подпись второго сегмента до «телеграм». */
    .lead-cta-pair { width: 100%; }
    .lead-cta-pair .lead-details { flex: 1 1 auto; min-width: 0; }
    /* Высоту обоим сегментам задаёт min-height, а не вертикальные поля: значок
       телеграма ростом 1.65em выше строки текста, и на полях правый сегмент
       получался выше левого — его граница выступала снизу за общий контур.
       Заодно 46px — это палец, а не только внешний вид. */
    .lead-cta-pair .lead-details summary {
        width: 100%;
        justify-content: center;
        min-height: 46px;
        padding: 0 16px;
    }
    .lead-pair-alt { flex: none; min-height: 46px; padding: 0 14px; }
    /* 4.35rem считались под десктоп; на телефоне вместе с нижним полем абзаца
       перед кнопкой оставалось около сотни пикселей пустоты. */
    .lead-cta-pair:has(.lead-details--tight) { margin-top: 2rem; }
    /* Справа остаётся «или» и значок телеграма. Подпись прячем не через
       display: none, а уводим из виду: иначе она исчезла бы и из программ
       чтения с экрана, и ссылка озвучивалась бы как одно слово «или». */
    .lead-pair-long {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .lead-pair-icon { display: block; }
}

/* Отступ для прокрутки к раскрытой форме. Липкая шапка занимает 76px сверху
   (те же 76px, что у sticky-портрета в герое), остальное — воздух, чтобы
   кнопка не упиралась в её нижний край. Дальше этим числом пользуется
   scrollIntoView в script.js — считать высоту шапки в JS не нужно. */
.lead-details { display: block; scroll-margin-top: 100px; }
.lead-details summary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--accent-on);
    background: var(--accent);
    border: 1px solid var(--accent);
    padding: 13px 24px;
    border-radius: var(--radius-md);
    cursor: pointer;
    list-style: none;
    transition: background var(--motion-fast) var(--ease),
                color var(--motion-fast) var(--ease);
}
.lead-details summary::-webkit-details-marker { display: none; }
.lead-details summary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}
/* Раскрытая — контуром, чтобы залитой синим осталась только «Отправить» */
.lead-details[open] summary {
    color: var(--accent);
    background: transparent;
    border-color: var(--accent);
}
.lead-details[open] summary:hover {
    background: color-mix(in oklab, var(--accent), transparent 92%);
    border-color: var(--accent);
}
/* Шеврон нарисован линиями, как в .media-collapse, а не символом шрифта */
.lead-details summary::after {
    content: '';
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--motion-base) var(--ease);
}
.lead-details[open] summary::after { transform: rotate(-135deg); }

/* Раскрытая форма: без карточки и рамок — как остальные блоки сайта.
   Поля подчёркнуты линией, а не обведены в коробку. */
.lead-panel { max-width: 620px; margin-top: 3rem; }

.lead-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.25rem 3rem;
}
.lead-field { grid-column: 1 / -1; }
.lead-field--half { grid-column: span 1; }
.lead-field label {
    display: block;
    font-size: var(--sm);
    color: var(--muted);
    margin: 0 0 0.35rem 0;
}
.lead-field input,
.lead-field textarea {
    width: 100%;
    font: inherit;
    font-size: var(--body);
    color: var(--fg);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: 0.4rem 0;
    transition: border-color var(--motion-fast) var(--ease);
}
.lead-field input:focus,
.lead-field textarea:focus {
    outline: none;
    border-bottom-color: var(--accent);
}
.lead-field textarea { resize: vertical; min-height: 3rem; }
.lead-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lead-form-submit { grid-column: 1 / -1; justify-self: start; }

.lead-confirm { margin: 3rem 0 0 0; font-size: var(--body); color: var(--fg-2); }
.lead-error { grid-column: 1 / -1; color: #b91c1c; font-size: var(--sm); margin: 0; }

@media (max-width: 600px) {
    .lead-form { grid-template-columns: 1fr; gap: 2rem; }
    .lead-field--half { grid-column: 1 / -1; }
}
.v2-contacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0;
}
.v2-contact { padding: 0.25rem 2.5rem; }
.v2-contact:first-child { padding-left: 0; }
.v2-contact:not(:first-child) { border-left: 1px solid var(--border-soft); }
.v2-contact-label {
    font-size: var(--sm);
    color: var(--muted);
    margin: 0 0 0.5rem 0;
}
.v2-contact-value {
    font-size: var(--body);
    line-height: 1.4;
    margin: 0;
}
.v2-contact-value a { color: var(--fg); font-weight: 600; }

/* ── FOOTER ── */
.v2-footer {
    /* тот же замес, что у баннера книги, затемнённый — подвал завершает
       страницу, а не спорит с баннером */
    background: color-mix(in oklab,
        color-mix(in oklab, var(--dark), var(--accent) 26%), black 30%);
    color: var(--text-inv);
    padding: 72px 0 40px;
}
.v2-footer a { color: rgba(255,255,255,0.55); text-decoration: none; }
.v2-footer a:hover { color: var(--accent-on); opacity: 1; }
.v2-footer-logo {
    font-family: 'Alice', serif;
    font-size: 1.75rem;
    line-height: 1.2;
    margin-bottom: 3rem;
    display: block;
    text-decoration: none;
    color: rgba(255,255,255,0.88);
    transition: color var(--motion-fast);
}
.v2-footer-logo:hover { color: #ffffff; opacity: 1; }
.v2-footer-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
    max-width: 640px;
    margin-bottom: 3.5rem;
}
.v2-footer-nav,
.v2-footer-contacts {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: var(--sm);
}
.v2-footer-contact { margin: 0; }
.v2-footer-tag {
    color: rgba(255,255,255,0.55);
    margin-right: 0.4rem;
}
.v2-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 1.75rem;
    font-size: 0.73rem;
    color: rgba(255,255,255,0.28);
}

/* ── INNER PAGES ── */
.v2-main { padding: 96px 0 120px; }

/* Comfortable reading measure + softer color for long-form body text */
.about-text p,
.v2-twocol p,
/* Только собственные абзацы блока тренингов: внутрь колонок форматов правило
   заходить не должно, там у подводки и числа участников свои цвет и ширина. */
.v2-programs [data-lang] > p {
    max-width: 68ch;
    color: var(--fg-2);
}
.about-text p:last-child { margin-top: 2rem; }
.about-text h2 { margin: 3rem 0 1.25rem 0; }

/* ── SPEAKING PAGE ── */

/* Верх: вступление в паре с фотографией со сцены */
.sp-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 96px;
    align-items: start;
    margin-bottom: 5.5rem;
}
/* Размер приходит из .lead, здесь только цвет. Абзацы шапки идут подряд,
   поэтому отступ между ними обычный, а не отбивка в 3rem. */
.sp-hero-text p { color: var(--fg-2); }
.sp-hero-text .lead { margin: 0 0 1rem 0; max-width: none; }
.sp-photo {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--elev-raised);
    border: 1px solid var(--border);
}

/* Темы выступлений: отдельный блок ниже вступления, друг под другом,
   на всю ширину контейнера — иначе длинные темы переносятся на несколько строк */
.sp-topic-group { margin-top: 2rem; }
.sp-topic-group:first-child { margin-top: 0; }
.sp-topic-group h2 { margin: 0 0 1rem 0; }
.sp-topic-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sp-topic-group li {
    position: relative;
    padding: 0 0 0.9rem 1.1rem;
    color: var(--fg-2);
    line-height: 1.5;
}
.sp-topic-group li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}
.sp-media-kit { margin-top: 2rem; }

/* Page title on inner pages — smaller than hero h1 */
.v2-main h1 {
    font-size: clamp(1.75rem, 3.2vw, 2.75rem);
    letter-spacing: -0.018em;
    margin-bottom: 2.5rem;
}

.about-grid {
    display: grid;
    grid-template-columns: 40fr 60fr;
    gap: 96px;
    align-items: start;
}
.profile-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-md);
    box-shadow: var(--elev-raised);
    border: 1px solid var(--border);
}

/* ── BOOK PAGE ── */
.book-layout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 96px;
    align-items: start;
}
.book-cover {
    position: sticky;
    top: 167px;          /* совпадает с положением покоя — без проезда при закреплении */
}
/* 600px — обложка целиком помещается в экран вместе с отступом
   под шапкой, поэтому в закреплённом состоянии видна полностью.
   Остаток формулы страхует низкие окна, где 600px не поместились бы. */
.book-cover img {
    display: block;
    height: min(600px, calc(100vh - 167px - 24px));
    width: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--elev-raised);
    border: 1px solid var(--border);
}
.book-text p { color: var(--fg-2); }
.book-text h2 {
    line-height: 1.3;
    margin: 3rem 0 0.75rem 0;
    padding-left: 1em;
    text-indent: -1em;
}
.book-buy { margin-top: 4rem; }

/* Trainings block on the home page */
.v2-programs {
    padding: var(--section-gap) 0;
    border-top: 1px solid var(--border);
}
/* Колонки идут сразу под заголовком блока, за ними — кнопка заявки.
   Верхнее поле 5rem, а не 2.5rem: поля соседей схлопываются в большее из двух,
   и заголовок со своими 2.5rem снизу задавал бы отбивку сам. */
.v2-programs .tr-formats { margin: 5rem 0 2.5rem 0; }

/* Book banner on the home page */
.v2-book {
    padding: 96px 0 120px;
    background: color-mix(in oklab, var(--dark), var(--accent) 26%);
}
.v2-book-banner {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 120px;
}
.v2-book-cover img {
    display: block;
    height: 380px;
    width: auto;
    border-radius: var(--radius-sm);
}
.v2-book-text h2 {
    margin: 0 0 1rem 0;
    max-width: 20ch;
    color: var(--text-inv);
    text-wrap: balance;
}
.v2-book-text p {
    max-width: 46ch;
    margin: 0;
    font-size: var(--body);
    line-height: var(--lh-body);
    color: rgba(255,255,255,0.72);
    text-wrap: pretty;
}
.v2-book-link {
    display: inline-block;
    margin-top: 3rem;
    white-space: nowrap;
    color: var(--text-inv);
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.45);
    text-underline-offset: 5px;
}
.v2-book-link:hover {
    opacity: 1;
    text-decoration: underline;
    text-decoration-color: var(--text-inv);
}

/* Media */
/* padding, а не margin: соседний margin заголовка страницы
   схлопнулся бы с ним, и расстояние осталось бы прежним. */
.media-section { padding-top: 3.5rem; }
.media-item { padding: 3rem 0; border-top: 1px solid var(--border); }
.media-item:first-child { border-top: none; padding-top: 0; }
.media-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 64px;
}
.media-section ul.media-list-single { columns: 1; }
.media-section li {
    padding: 0.875rem 0;
    color: var(--fg-2);
    break-inside: avoid;
}
/* Запись целиком является ссылкой — цвет по общему правилу
   для таких ссылок: тёмный, акцент появляется при наведении. */
.media-section li a {
    color: var(--fg);
    text-decoration-color: var(--border);
    text-underline-offset: 4px;
}
.media-section li a:hover {
    opacity: 1;
    color: var(--accent);
    text-decoration-color: var(--accent);
}

/* Сворачиваемые разделы */
.media-collapse summary {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
}
.media-collapse summary::-webkit-details-marker { display: none; }
/* Шеврон нарисован линиями, а не взят из шрифта: символы вроде «⌄»
   в разных шрифтах отрисованы по-разному, а кое-где отсутствуют. */
.media-collapse summary::before {
    content: '';
    flex: none;
    width: 0.55rem;
    height: 0.55rem;
    margin-top: 0.75em;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(45deg);
    transition: transform var(--motion-base) var(--ease);
}
.media-collapse[open] summary::before {
    margin-top: 0.95em;
    transform: rotate(-135deg);
}
.media-collapse summary h2 { margin: 0; }
.media-collapse-note {
    display: block;
    margin-top: 0.5rem;
    font-size: var(--body);
    font-style: italic;
    color: var(--fg-2);
}
.media-collapse[open] summary { margin-bottom: 2.5rem; }

/* ── TRAININGS PAGE ── */

/* Hero: heading and intro text beside a photo, top-aligned with h1 */
.tr-hero {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 96px;
    align-items: start;
}
.tr-hero-photo {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--elev-raised);
    border: 1px solid var(--border);
}
.tr-hero-text .lead { margin: 0 0 1rem 0; max-width: none; }

.tr-section {
    padding: var(--section-gap) 0;
    border-top: 1px solid var(--border);
}

/* Formats — divider layout */
/* Обёртка карусели живёт только на телефоне. На широком экране она объявлена
   display: contents — то есть исчезает как коробка, и .tr-formats остаётся в
   потоке ровно там же, где стояла до неё. */
.tr-carousel { display: contents; }
.tr-carousel-arrow { display: none; }
.tr-formats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
.tr-format-item {
    padding: 0.5rem 2.5rem;
}
.tr-format-item:first-child { padding-left: 0; }
.tr-format-item:not(:first-child) {
    border-left: 1px solid var(--border-soft);
}
/* Кегль меньше общего h3: название формата должно вставать в одну строку.
   Самое длинное — «Месяц — онлайн + очно» — при общих clamp(1.25rem, 2vw, 1.6rem)
   переносится на ширинах 920–1000px, а на широком экране влезает с запасом
   в 3px, то есть держится случайно. Здесь запас не меньше 6px на всём
   десктопном диапазоне; ниже 920px колонки складываются в одну, и ширина
   перестаёт быть узким местом. */
.tr-format-title {
    font-size: clamp(1.1rem, 1.55vw, 1.4rem);
    line-height: 1.25;
    margin: 0 0 1rem 0;
}

/* Вводный абзац: открывает страницу или раздел. Кеглем от основного текста
   не отличается — его выделяют положение, более узкая колонка и отбивка снизу.
   Крупный текст на сайте остаётся ровно в одном месте: лид на главной. */
h2:has(+ .lead) { margin-bottom: 1.25rem; }
.lead {
    line-height: var(--lh-body);
    color: var(--fg-2);
    max-width: 60ch;
    margin: 0 0 3rem 0;
}

/* Program (2×2) */
.tr-program { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.tr-program-item {
    padding: 2.5rem 0;
    border-top: 1px solid var(--border);
}
.tr-program-item:nth-child(odd) { padding-right: 4rem; }
.tr-program-item:nth-child(even) { padding-left: 4rem; border-left: 1px solid var(--border); }
.tr-program::after {
    content: "";
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
}
.tr-program-title { line-height: 1.25; margin: 0 0 0.6rem 0; }
.tr-program-desc { font-size: var(--sm); line-height: var(--lh-body); color: var(--fg-2); margin: 0; }

/* ── КОЛОНКИ ФОРМАТОВ (общий компонент) ──
   Используются на главной и на странице тренингов. Правила намеренно не
   привязаны к странице: обе показывают одни и те же колонки, только на главной
   колонка короче — обрывается на темах. Всё, что принадлежит одной странице
   (цена, разделитель, сноски, отбивки блока), вынесено ниже под .page-trainings. */
.tr-format-lines {
    margin: 0 0 1.5rem 0;
    padding: 0;
    list-style: none;
}
.tr-format-lines li {
    font-size: var(--sm);
    line-height: var(--lh-body);
    color: var(--fg-2);
    margin: 0 0 1.75rem 0;
}
.tr-format-lines li:last-child { margin-bottom: 0; }
/* Опорные строки колонки (.tr-format-key) — крупнее и плотнее остальных, с
   увеличенной отбивкой снизу. Класс ставится в разметке, поэтому новую такую
   строку достаточно пометить им, ничего не дописывая в стилях. */
.tr-format-lines > li.tr-format-key {
    font-size: var(--body);
    font-weight: 600;
    margin-bottom: 3rem;
}
/* Если опорная строка оказалась последней в колонке, обнуление срабатывает
   само — под ней не остаётся провала на месте отсутствующей цены. */
.tr-format-lines > li.tr-format-key:last-child { margin-bottom: 0; }
/* Тире и плюс у тем рисуются в ::before, чтобы не мешались при копировании
   текста и держали ровную левую ось у названий. */
.tr-format-topics {
    margin: 0.6rem 0 0 0;
    padding: 0;
    list-style: none;
}
.tr-format-lines .tr-format-topics li {
    margin: 0 0 0.35rem 0;
    padding-left: 1.1em;
    text-indent: -1.1em;
    font-style: italic;
    /* Вес 400, а не унаследованные 600: курсив уже выделяет названия, второй
       сигнал делает их крикливыми. К тому же настоящий курсив есть только
       обычного веса — полужирный браузер подделывает, и он выходит грязнее. */
    font-weight: 400;
}
.tr-format-topics li::before {
    content: '—';
    margin-right: 0.4em;
    color: var(--muted);
}
.tr-format-topics-extra::before { content: '+'; }

/* ── СТРАНИЦА ТРЕНИНГОВ (trainings.html) ──
   Ниже — только то, чего нет на главной. */
/* Тире отделяет цену от описания. Декорация, поэтому скрыто от читалок для
   незрячих — иначе они прочитают посреди колонки одинокое «тире». */
/* Черта над ценой. Не привязана к странице тренингов: тот же разделитель
   стоит в колонках на главной, и цена на двух страницах должна выглядеть
   одинаково. */
.tr-format-sep {
    margin: 0 0 3rem 0;
    color: var(--border);
}
/* Два вводных абзаца подряд: между собой — обычный интервал. Большой отступ
   у .lead рассчитан на отбивку от карточек, поэтому остаётся у последнего. */
.page-trainings .tr-section .lead:has(+ .lead) { margin-bottom: 1.6rem; }
/* Под заголовком раздела теперь не строка-подводка, а несколько абзацев:
   ширина как у описаний кейсов, чтобы текст не шёл узким столбиком. */
.page-trainings .tr-section .lead { max-width: 72ch; text-wrap: pretty; }
/* Раздел идёт тремя частями: форматы, темы, практика. Между ними отбивка
   больше, чем внутри каждой части. Задаётся она снизу предыдущему блоку, а не
   сверху следующему: поля соседей схлопываются в большее из двух, и margin-top
   утонул бы в 3rem, которые абзац несёт по умолчанию. */
.page-trainings .tr-section .lead:has(+ .tr-formats) { margin-bottom: clamp(4rem, 7vw, 6rem); }

/* Темы — таблицей: две колонки, три ряда. Каждая ячейка занимает две строки
   общей сетки (название и описание) и наследует её дорожки через subgrid,
   поэтому названия слева и справа стоят на одной высоте независимо от того,
   на сколько строк разошлось описание соседа. */
.page-trainings .tr-topic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(32px, 4vw, 72px);
    row-gap: 1.9rem;
    margin-bottom: clamp(5rem, 9vw, 8rem);
}
.page-trainings .tr-topic-colhead { margin: 0 0 0.25rem 0; }
.page-trainings .tr-topic-cell {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    row-gap: 0.55rem;
}
.page-trainings .tr-topic-cell h4 {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: var(--body);
    line-height: var(--lh-body);
    font-weight: 600;
    color: var(--fg);
}
.page-trainings .tr-topic-cell p {
    margin: 0;
    font-size: var(--body);
    line-height: var(--lh-body);
    font-style: italic;
    color: var(--fg-2);
}

/* Практика выступлений: превью отчёта слева, заголовок и текст справа.
   Миниатюра отчёта — страница А4, она втрое выше абзаца, поэтому колонку
   текста держим узкой (48%): текст идёт вниз, высоты сближаются. Заголовок
   убран внутрь правой колонки — тогда верх миниатюры встаёт вровень с ним,
   а текст начинается ниже, и миниатюра заходит за заголовок по высоте.
   Порядок в разметке остаётся «текст, потом картинка», местами колонки
   меняются grid-column — иначе на узком экране, где блок схлопывается в одну
   колонку, картинка оказалась бы выше заголовка. */
.page-trainings .tr-lede {
    display: grid;
    grid-template-columns: 240px 48%;
    gap: clamp(48px, 6vw, 108px);
    align-items: start;
    margin-bottom: clamp(2.25rem, 3.5vw, 3rem);
}
.page-trainings .tr-lede-col { grid-column: 2; }
.page-trainings .tr-lede .lead { max-width: 72ch; }
.page-trainings .tr-lede-col { max-width: 72ch; }
.page-trainings .tr-lede-col > .lead:last-child { margin-bottom: 0; }
/* Кнопка стоит под текстом внутри левой колонки — она и уравнивает её по высоте
   с миниатюрой отчёта. Отбивку перед ней держит нижнее поле последнего абзаца:
   свой margin-top у кнопки схлопнулся бы с ним и ничего не добавил. */
.page-trainings .tr-lede-col > .lead:last-of-type { margin-bottom: 4rem; }
/* Блок практики теперь закрывает раздел — своя отбивка ему больше не нужна,
   низ раздела держит его собственный padding. */
.page-trainings .tr-lede:last-child { margin-bottom: 0; }
/* Миниатюра прижата к левому краю страницы — по той же оси, что заголовки
   и абзацы выше и ниже. */
.page-trainings .tr-report {
    margin: 0;
    width: 240px;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
}
.page-trainings .tr-report a {
    display: block;
    border-radius: var(--radius-md);
    text-decoration: none;
}
.page-trainings .tr-report a:hover { opacity: 1; }
.page-trainings .tr-report a:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.page-trainings .tr-report img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--elev-card);
    transition: transform var(--motion-base) var(--ease),
                box-shadow var(--motion-base) var(--ease);
}
.page-trainings .tr-report a:hover img,
.page-trainings .tr-report a:focus-visible img {
    transform: translateY(-3px);
    box-shadow: var(--elev-raised);
}
.page-trainings .tr-report figcaption {
    margin-top: 0.85rem;
    font-size: var(--sm);
    line-height: 1.45;
    color: var(--fg-2);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .v2-nav-toggle span { transition: none; }
    .page-trainings .tr-report img { transition: none; }
    .page-trainings .tr-report a:hover img,
    .page-trainings .tr-report a:focus-visible img { transform: none; }
}

/* Форматы — три колонки на общем фоне, разделённые вертикальными линиями:
   ни подложек, ни рамок, ни скруглений. Раскладка колонок и сами линии
   приходят из общего правила .tr-format-item выше, здесь остаётся только
   шапка колонки — название, подзаголовок и число участников. */
/* Колонки делят четыре общие строки: название, подводка, число участников,
   список. Каждая колонка наследует их через subgrid, поэтому строки стоят на
   одной высоте, даже когда подводки разной длины. Высота строки задаётся самой
   длинной подводкой из трёх. */
.tr-formats { grid-template-rows: auto auto auto auto; }
.tr-format-item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
}
.tr-format-head {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
}
/* Разделители заметнее самых светлых: тот же тон, что у линий между блоками
   «Другие тренинги и форматы». border-color, а не border-left-color, — чтобы
   на узком экране, где линия становится горизонтальной, тон не потерялся. */
.tr-format-item:not(:first-child) { border-color: var(--border); }
/* Первая колонка получает такое же левое поле, как остальные. Общее правило
   выше обнуляет его, чтобы колонка села на левую ось страницы, — но тогда её
   текст шире соседних на ширину поля, и колонки перестают выглядеть равными. */
.tr-format-item:first-child { padding-left: 2.5rem; }
/* Внутри колонки два интервала: 1.75rem между строками списка и 3rem вокруг
   опорных строк — перед числом участников и вокруг блока тем. Отбивку над
   темами держит нижнее поле шапки: блок тем всегда идёт первым в списке. */
.tr-format-head { margin-bottom: 3rem; }
.tr-format-head .tr-format-title { margin: 0 0 0.85rem 0; }
.tr-format-tagline {
    font-size: var(--sm);
    font-style: italic;
    line-height: var(--lh-body);
    color: var(--muted);
    margin: 0 0 3rem 0;
}
/* Число участников и цена — одна пара: тот же шрифт, кегль и тон. Обе стоят по
   левому краю колонки, как остальные строки. */
.tr-format-count,
.tr-format-lines > li.tr-format-price {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
    color: var(--fg-2);
    margin: 0;
}
/* Шрифт, кегль и цвет наследуются от числа — задан только пробел перед
   словом. Пробел в em, а не в rem, чтобы держаться кегля числа. */
.tr-format-count span { margin-left: 0.25em; }

/* Отбивка блока форматов снизу — своя у каждой страницы: на «Тренингах» под
   ним идут сноски, на главной — ссылка и кнопка. */
.page-trainings .tr-formats { margin-bottom: 2rem; }
/* Сноски под таблицей форматов. Держатся близко к ней — это её продолжение,
   а не отдельный блок. Снизу отбивки нет: её даёт padding кнопки следом. */
.page-trainings .tr-formats-note {
    max-width: 72ch;
    font-size: var(--sm);
    line-height: var(--lh-body);
    color: var(--muted);
    margin: 0 0 0.5rem 0;
}
.page-trainings .tr-formats-note:last-child { margin-bottom: 0; }
/* Строка «Подробнее» — не сноска: это переход на страницу тренингов, поэтому
   набрана основным кеглем. Стоит сразу под заголовком блока и жмётся к нему:
   поля соседей схлопываются в большее из двух, поэтому отбивку задаёт не она,
   а укороченное нижнее поле заголовка — 1.25rem вместо обычных 2.5rem. */
.tr-formats-more {
    font-size: var(--body);
    line-height: var(--lh-body);
    margin: 0;
}
h2:has(+ .tr-formats-more) { margin-bottom: 1.25rem; }
.page-trainings .tr-subhead { margin-bottom: 1.25rem; }

/* ── RESPONSIVE ──
   Три ширины и больше никаких: 920 — планшет, здесь многоколоночные сетки
   складываются в одну колонку; 768 — крупный телефон, уменьшаются отступы и
   кегли; 600 — телефон, меню уходит за кнопку. Запросы prefers-reduced-motion
   к ширине отношения не имеют и точками перелома не считаются. */
@media (max-width: 920px) {
    :root { --pad-x: 24px; --section-gap: 80px; }
    .v2-hero-grid { grid-template-columns: 1fr; gap: 48px; }
    .v2-hero-text { padding-top: 0; }
    .v2-hero-photo { position: static; max-width: 420px; }
    .v2-twocol-grid { grid-template-columns: 1fr; gap: 48px; }
    .v2-cases-grid { grid-template-columns: 1fr; gap: 32px; }
    .about-grid { grid-template-columns: 1fr; gap: 48px; }
    .sp-hero { grid-template-columns: 1fr; gap: 36px; margin-bottom: 3.5rem; }
    .tr-hero { grid-template-columns: 1fr; gap: 36px; }
    .book-layout { grid-template-columns: 1fr; gap: 48px; }
    .book-cover { position: static; }
    .book-cover img { height: auto; width: 100%; max-width: 320px; }
    .v2-book-banner {
        grid-template-columns: 1fr;
        justify-items: start;
        gap: 28px;
    }
    .v2-book-cover img { height: 260px; }
    .v2-footer-cols { grid-template-columns: 1fr; gap: 32px; }
    .v2-contacts { grid-template-columns: 1fr; }
    .v2-contact { padding: 1.25rem 0; }
    .v2-contact:first-child { padding-top: 0; }
    .v2-contact:not(:first-child) {
        border-left: none;
        border-top: 1px solid var(--border-soft);
    }
    /* Колонки форматов складываются в столбец здесь же, вместе с остальными
       сетками: раньше это стояло на 900 и страница между 900 и 920 оказывалась
       перестроенной наполовину. */
    .tr-formats {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .tr-format-item {
        padding: 2rem 0;
    }
    /* Верхнего поля у первой колонки нет — она открывает столбец; боковое
       тоже не нужно, колонки больше не стоят рядом. */
    .tr-format-item:first-child { padding-top: 0; padding-left: 0; }
    .tr-format-item:not(:first-child) {
        border-left: none;
        border-top: 1px solid var(--border-soft);
    }
    .page-trainings .tr-lede { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .page-trainings .tr-lede-col { grid-column: auto; }
    .page-trainings .tr-report { width: 200px; grid-column: auto; grid-row: auto; }
    .tr-program { grid-template-columns: 1fr; }
    .tr-program-item:nth-child(odd) { padding-right: 0; }
    .tr-program-item:nth-child(even) { padding-left: 0; border-left: none; }
    .tr-program::after { display: none; }
    .tr-program-item:last-child { padding-left: 1rem; border-left: 1px solid var(--border); }
}

@media (max-width: 768px) {
    :root { --pad-x: 16px; --section-gap: 64px; --h1-hero: clamp(1.6rem, 6.5vw, 2.2rem); }
    .media-section ul { columns: 1; }
    .v2-nav ul { gap: 16px; }
    .v2-logo a { font-size: 1.2rem; }
}

@media (max-width: 600px) {
    /* Меню уходит за кнопку: в строку оно перестаёт помещаться примерно на
       500 пикселях, порог берём с запасом. */
    .v2-nav-toggle { display: flex; }
    /* order выше нуля: при переносе строки панель меню уходит вниз последней,
       а значки телеграма и почты остаются в первой строке рядом с логотипом.
       Разметку не переставляем — меню должно идти до контактов при обходе Tab. */
    .v2-nav { display: none; order: 1; }
    /* Зазор в 40px рассчитан на широкий экран. С кнопкой «Написать» логотип,
       бургер и кнопка перестают помещаться в 375 пикселей — режем зазор. */
    .v2-header-inner { gap: 16px; }
    /* Раскрытая панель — во всю ширину под шапкой. Отсчёт ширины идёт от края
       окна, а не от контейнера, поэтому поля возвращаем сами. */
    /* row-gap обнуляем: общий зазор шапки в 40px задуман для расстояния между
       логотипом и меню по горизонтали, а при переносе сработал бы и по
       вертикали, оторвав панель от шапки. */
    .v2-header-inner:has(.v2-nav-toggle[aria-expanded="true"]) {
        flex-wrap: wrap;
        row-gap: 0;
    }
    .v2-nav-toggle[aria-expanded="true"] + .v2-nav {
        display: block;
        flex-basis: 100%;
        margin-top: 12px;
        border-top: 1px solid var(--border-soft);
    }
    /* Панель складывает в столбец всё, что в неё попадёт. Когда вернут
       английскую версию, переключатель языков встанет сюда же и не будет
       распирать шапку. */
    .v2-nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    /* 44 пикселя высоты — чтобы в пункт попадали пальцем. Подчёркивание при
       наведении в столбце не нужно: оно рисовалось во всю ширину строки. */
    .v2-nav a {
        display: flex;
        align-items: center;
        min-height: 44px;
        font-size: 1rem;
    }
    .v2-nav a::after { content: none; }

    /* Таблица тем в столбец. Переупорядочение обязательно: в разметке ячейки
       идут по строкам таблицы — обязательная, дополнительная, обязательная, —
       и без order получились бы два заголовка подряд и перемешанные темы. */
    .page-trainings .tr-topic-grid { grid-template-columns: 1fr; row-gap: 1.5rem; }
    .page-trainings .tr-topic-cell { display: block; grid-row: auto; }
    .page-trainings .tr-topic-colhead:first-of-type { order: 1; }
    .page-trainings .tr-topic-cell:nth-of-type(odd) { order: 2; }
    .page-trainings .tr-topic-colhead:last-of-type { order: 3; margin-top: 1.5rem; }
    .page-trainings .tr-topic-cell:nth-of-type(even) { order: 4; }

    /* ── Отступы и кегли под телефон ── */
    /* Воздух над первым экраном и над внутренними страницами вдвое меньше:
       на 375px прежние 104 и 96 пикселей съедали пол-экрана до заголовка. */
    .v2-hero { padding-top: 52px; }
    .v2-main { padding-top: 48px; }
    .v2-hero-lead { font-size: 1.2rem; }
    /* Кейсы идут в столбец, и 32px между ними читались как один сплошной
       текст: соседний кейс начинался раньше, чем взгляд понимал, что прежний
       закончился. */
    .v2-cases-grid { gap: 80px; }

    /* ── Лента логотипов ── */
    /* Затухание убрано: на узком экране градиент съедал по 12% с каждой
       стороны, и в кадре оставалось меньше двух логотипов. */
    .v2-marquee {
        -webkit-mask-image: none;
        mask-image: none;
    }
    /* Зазор уменьшен вместе с логотипами: при высоте 16px логотип шириной
       около 60px, и прежние 64px между ними разносили ленту так, что она
       переставала читаться как ряд. */
    .v2-marquee-track { gap: 28px; }
    .v2-marquee-logo img { height: 16px; }

    /* ── Перестановка блоков на телефоне ──
       Контейнер с текстом объявлен display: contents: его дети становятся
       элементами родительского грида, и им можно раздать order. Иначе фото
       не вклинить в середину текста, не переставляя разметку — а её трогать
       нельзя, иначе поедет широкий экран и порядок чтения в коде.
       Расстояния держат собственные поля абзацев, поэтому gap обнуляем. */
    .tr-hero { gap: 0; }
    .tr-hero-text { display: contents; }
    .tr-hero-text h1 { order: 1; }
    .tr-hero-text .lead:nth-of-type(1) { order: 2; }
    .tr-hero-photo { order: 3; margin-bottom: 1.5rem; }
    .tr-hero-text .lead:nth-of-type(2) { order: 4; }
    .tr-hero-text .lead:nth-of-type(3) { order: 5; }
    .tr-hero-text .lead-cta-pair { order: 6; }

    .sp-hero { gap: 0; }
    .sp-hero-text { display: contents; }
    .sp-hero-text h1 { order: 1; }
    .sp-hero-text .lead:nth-of-type(1) { order: 2; }
    .sp-photo { order: 3; margin-bottom: 1.5rem; }
    .sp-hero-text .lead:nth-of-type(2) { order: 4; }
    .sp-hero-text .lead:nth-of-type(3) { order: 5; }
    .sp-hero-text .lead:nth-of-type(4) { order: 6; }

    /* «Биография»: фото стояло перед заголовком и отодвигало текст на экран
       вниз. Уровней вложенности здесь два — .about-text и обёртка языка, —
       поэтому display: contents нужен обоим. Языковую обёртку это не сломает:
       у скрытого языка display: none помечен !important и перебивает contents. */
    .about-grid { gap: 0; }
    .about-text,
    .about-text > [data-lang] { display: contents; }
    /* Порядок по умолчанию для всего текста, чтобы он не всплыл выше фото.
       Селекторы ниже специфичнее — заголовок и первый абзац идут до фото. */
    .about-text > [data-lang] > * { order: 4; }
    .about-text > [data-lang] > h1 { order: 1; }
    .about-text > [data-lang] > .lead { order: 2; }
    .about-photo { order: 3; margin-bottom: 1.5rem; }

    /* Пример отчёта поднимается над кнопкой: на телефоне он доказательство,
       которое должно попасться на глаза до призыва, а не после него. */
    .page-trainings .tr-lede { gap: 0; }
    .page-trainings .tr-lede-col { display: contents; }
    .page-trainings .tr-lede-col > .tr-subhead { order: 1; }
    .page-trainings .tr-lede-col > .lead { order: 2; }
    .page-trainings .tr-lede-col > .lead:last-of-type { margin-bottom: 2rem; }
    /* Ширину в 200px отчёт получил от планшетной раскладки, где он стоял
       миниатюрой сбоку. На телефоне он поднялся над кнопкой и работает как
       доказательство — значит, должен читаться. */
    .page-trainings .tr-report { order: 3; margin-bottom: 4rem; width: 100%; max-width: 260px; }
    .page-trainings .tr-lede-col > .lead-cta-pair { order: 4; }

    /* ── Карусель форматов ──
       Тремя колонками в столбец три формата занимали три экрана прокрутки, и
       сравнить их — ради чего блок и существует — было нельзя. Прокрутку и
       смахивание даёт сам браузер: scroll-snap останавливает дорожку ровно на
       слайде. Стрелки стоят по бокам ОТ дорожки, а не поверх неё, поэтому
       ничего не перекрывают. */
    .tr-carousel {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .tr-carousel-arrow {
        display: block;
        flex: none;
        width: 28px;
        height: 44px;
        padding: 0;
        border: none;
        background: none;
        color: var(--accent);
        cursor: pointer;
        position: relative;
        transition: opacity var(--motion-fast) var(--ease);
    }
    /* Стрелка нарисована двумя линиями, как шеврон у кнопки заявки и в «Медиа»,
       а не символом шрифта: символы стрелок в разных шрифтах разного веса. */
    .tr-carousel-arrow::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0.6rem;
        height: 0.6rem;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
    }
    .tr-carousel-arrow--prev::before { transform: translate(-30%, -50%) rotate(135deg); }
    .tr-carousel-arrow--next::before { transform: translate(-70%, -50%) rotate(-45deg); }
    /* На краю стрелка гаснет и перестаёт ловить нажатия: обещать несуществующий
       слайд хуже, чем не показать стрелку вовсе. */
    .tr-carousel-arrow[disabled] { opacity: 0.25; cursor: default; }

    .tr-carousel .tr-formats {
        display: flex;
        min-width: 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        gap: 0;
    }
    .tr-carousel .tr-formats::-webkit-scrollbar { display: none; }
    /* Селектор с обёрткой не для красоты: правила для столбца заданы через
       :first-child и :not(:first-child), они специфичнее одиночного класса и
       иначе вернули бы слайдам поля и разделительные линии.
       Подсетка здесь тоже не нужна: слайды стоят не друг под другом, и
       выравнивать их строки между собой больше не по чему. */
    .tr-carousel .tr-format-item {
        display: block;
        grid-row: auto;
        flex: 0 0 100%;
        scroll-snap-align: center;
        padding: 0;
        border: none;
    }
    /* Отступы внутри слайда — вдвое меньше десктопных. Там они разводили
       колонки, стоящие рядом; здесь слайд один на экран, и с прежним ритмом
       цена — то, ради сравнения чего карусель и сделана — уезжала за нижний
       край экрана. */
    .tr-carousel .tr-format-head { display: block; grid-row: auto; margin-bottom: 1.5rem; }
    .tr-carousel .tr-format-tagline { margin-bottom: 1.5rem; }
    .tr-carousel .tr-format-lines li { margin-bottom: 0.875rem; }
    .tr-carousel .tr-format-lines > li.tr-format-key { margin-bottom: 1.5rem; }

    @media (prefers-reduced-motion: reduce) {
        .tr-formats { scroll-behavior: auto; }
        .tr-carousel-arrow { transition: none; }
    }
}