/* ============================================================
   ГЛАВНАЯ timesavervfx.com — витрина-указатель.
   Встраиваемый фрагмент. Токены наследуются из .tsv-root
   (design/tokens.css) — внутри ничего глобального не объявляем.
   Все селекторы заскоуплены под .tsv-home, включая ресет и медиа.
   Картинки — прямые ссылки на timesavervfx.com, ничего не перезаливаем.

   Структура: герой → развилка → курсы →
   паки + «как всё устроено» → что ещё есть → сообщество (полоса).

   Заголовок первого уровня стилизован ПО КЛАССУ .tsv-home-h1,
   а не по тегу h1: если тема хоста начнёт выводить свой <h1>,
   наш понижается до <h2> одной правкой разметки — стили не поедут.
   ============================================================ */

.tsv-home *, .tsv-home *::before, .tsv-home *::after { box-sizing: border-box; }

.tsv-home {
    position: relative;
    color: var(--tsv-fg);
    font-family: var(--tsv-sans);
    font-size: 16px;
    line-height: 1.6;
    background:
        radial-gradient(ellipse 70% 45% at 50% 0%, rgba(154, 122, 232, 0.13) 0%, transparent 62%),
        radial-gradient(ellipse 34% 18% at 4% 34%, color-mix(in srgb, var(--tsv-tone-teal) 9%, transparent) 0%, transparent 68%),
        radial-gradient(ellipse 30% 16% at 96% 70%, color-mix(in srgb, var(--tsv-tone-rose) 8%, transparent) 0%, transparent 68%),
        var(--tsv-bg);
    border: 1px solid var(--tsv-border-soft);
    border-radius: var(--tsv-radius-lg);
    /* overflow + radius: full-bleed полосы (автор, сообщество) сами доходят
       до краёв контейнера и аккуратно обрезаются по скруглению */
    overflow: hidden;
    box-shadow: 0 10px 32px -18px rgba(0, 0, 0, 0.5);
}

.tsv-home h1,
.tsv-home h2,
.tsv-home h3,
.tsv-home p { margin: 0; }
.tsv-home img { max-width: 100%; }
.tsv-home a { color: inherit; }

/* Фокус с клавиатуры — одинаковый на всех ссылках, без анимации */
.tsv-home a:focus-visible {
    outline: 2px solid var(--tsv-accent-bright);
    outline-offset: 3px;
}

/* ---------- Общая типографика ---------- */
.tsv-home .tsv-kicker {
    display: block;
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--tsv-accent-bright);
}
.tsv-home h2 {
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--tsv-fg);   /* градиента у h2 нет — он только в h1 */
}

/* ---------- Шапка секции: слева кикер и h2, справа моно-ссылка ---------- */
.tsv-home .tsv-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    max-width: 1040px;
    margin: 0 auto 24px;
}
.tsv-home .tsv-head-title { min-width: 0; }
.tsv-home .tsv-head-link {
    font-family: var(--tsv-mono);
    font-size: 12px;
    color: var(--tsv-fg-mute);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--dur-base) var(--ease-out);
}
.tsv-home .tsv-arr {
    display: inline-block;
    transition: transform 180ms var(--ease-out);
}

/* ---------- Кнопки (их на странице ровно три) ---------- */
.tsv-home .tsv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 30px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                background-color var(--dur-base) var(--ease-out);
}
.tsv-home .tsv-btn--primary {
    background: linear-gradient(135deg, #a884ec 0%, #7a54cf 100%);
    color: #ffffff;
    box-shadow: 0 10px 26px -14px rgba(122, 84, 207, 0.85);
}
.tsv-home .tsv-btn--ghost {
    background: transparent;
    color: var(--tsv-fg);
    border: 1px solid var(--tsv-border-soft);
}

/* ============================================================
   1. ГЕРОЙ — content-visibility НЕ ставим, это первый экран
   ============================================================ */
.tsv-home .tsv-hero {
    /* Витрина обязана показать товар в первом экране: над фрагментом
       ещё стоит шапка WordPress и хром браузера, и каждые лишние 40px
       воздуха здесь отодвигают эффекты за сгиб. Герой — одна строка
       заголовка, ему столько места не нужно. */
    padding: 40px 48px 26px;
    text-align: center;
}
/* 720px были рассчитаны на прежний короткий заголовок; новый в них
   ломается на три строки и съедает полсотни пикселей первого экрана. */
.tsv-home .tsv-hero-inner { max-width: 900px; margin: 0 auto; }
.tsv-home .tsv-hero-logo {
    width: clamp(212px, 26vw, 300px);
    height: auto;
    display: block;
    margin: 0 auto 26px;
}
.tsv-home .tsv-home-h1 {
    /* Нижняя граница снижена с 30px: заголовок стал длиннее, и на телефоне
       30px раскладывали его в четыре строки, выталкивая паки за сгиб. */
    font-size: clamp(26px, 4.4vw, 46px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.12;
    color: var(--tsv-fg);
    /* Ровные строки вместо «длинная-длинная-обрубок».
       Не поддержавшие свойство браузеры просто переносят как обычно. */
    text-wrap: balance;
}
/* Градиентный <em> на всей странице используется ровно один раз — здесь */
.tsv-home .tsv-home-h1 em {
    font-style: normal;
    background: linear-gradient(135deg, var(--tsv-accent-bright), #e9d4ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.tsv-home .tsv-hero-lead {
    max-width: 560px;
    margin: 14px auto 0;
    font-size: 16.5px;
    color: var(--tsv-fg-dim);
}
/* Декоративная «линейка» таймлайна: 0 байт, только градиенты */
.tsv-home .tsv-ruler {
    height: 14px;
    max-width: 460px;
    margin: 30px auto 0;
    background:
        linear-gradient(var(--tsv-border-soft), var(--tsv-border-soft)) 0 100% / 100% 1px no-repeat,
        repeating-linear-gradient(90deg,
            var(--tsv-accent-dim) 0 1px, transparent 1px 24px) 0 100% / 100% 6px no-repeat,
        repeating-linear-gradient(90deg,
            var(--tsv-accent-soft) 0 1px, transparent 1px 8px) 0 100% / 100% 3px no-repeat;
    opacity: 0.85;
}

/* ============================================================
   Секции и full-bleed полосы
   ============================================================ */
.tsv-home .tsv-section { padding: 48px; }
/* Две товарные секции идут вплотную к герою и друг к другу: между
   курсами и эффектами не нужен полный воздух, там смена темы читается
   заголовком. Дальше по странице отступы остаются прежними. */
.tsv-home .tsv-s-courses { padding-top: 22px; padding-bottom: 30px; }
.tsv-home .tsv-s-packs   { padding-top: 30px; }
.tsv-home .tsv-band {
    padding: 40px 48px;
    background: linear-gradient(180deg, rgba(31, 24, 56, 0.55), rgba(21, 16, 42, 0.55));
    border-block: 1px solid var(--tsv-border-soft);
}

/* Ленивый рендер: браузер не считает то, что ниже экрана */
.tsv-home .tsv-section,
.tsv-home .tsv-band { content-visibility: auto; }
.tsv-home .tsv-s-paths     { contain-intrinsic-size: auto 260px; }
.tsv-home .tsv-s-courses   { contain-intrinsic-size: auto 430px; }
.tsv-home .tsv-s-packs     { contain-intrinsic-size: auto 400px; }
.tsv-home .tsv-s-more      { contain-intrinsic-size: auto 460px; }
.tsv-home .tsv-s-community { contain-intrinsic-size: auto 200px; }

/* ============================================================
   2. РАЗВИЛКА — тише витрин, товаром выглядеть не должна
   ============================================================ */
.tsv-home .tsv-paths {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    max-width: 1040px;
    margin: 0 auto;
}
.tsv-home .tsv-path {
    display: block;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    --card-accent: var(--tsv-accent);
    background: var(--tsv-bg-glass);
    background: color-mix(in srgb, var(--card-accent) 6%, var(--tsv-bg-glass));
    border: 1px solid var(--tsv-border-soft);
    border-color: color-mix(in srgb, var(--card-accent) 22%, transparent);
    border-radius: var(--tsv-radius-sm);
    transition: border-color var(--dur-base) var(--ease-out),
                background-color var(--dur-base) var(--ease-out);
}
.tsv-home .tsv-path:nth-child(2) { --card-accent: var(--tsv-tone-amber); }
.tsv-home .tsv-path:nth-child(3) { --card-accent: var(--tsv-tone-indigo); }
.tsv-home .tsv-path-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--tsv-fg);
    line-height: 1.3;
}
.tsv-home .tsv-path-note {
    margin-top: 6px;
    font-size: 13px;
    color: var(--tsv-fg-dim);
    line-height: 1.5;
}

/* ============================================================
   3. КУРСЫ — 4 крупные плитки
   ============================================================ */
.tsv-home .tsv-courses {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    max-width: 1040px;
    margin: 0 auto;
}

/* ---------- Карточка продукта (курсы и паки) ---------- */
.tsv-home .tsv-card {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 10px 10px 16px;
    border-radius: var(--tsv-radius);
    border: 1px solid var(--tsv-border);
    border-color: color-mix(in srgb, var(--card-accent, var(--tsv-accent)) 20%, var(--tsv-border));
    background: linear-gradient(180deg, rgba(31, 24, 56, 0.55) 0%, rgba(21, 16, 42, 0.55) 100%);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--card-accent, var(--tsv-accent)) 8%, rgba(31, 24, 56, 0.55)) 0%,
        color-mix(in srgb, var(--card-accent, var(--tsv-accent)) 5%, rgba(21, 16, 42, 0.55)) 100%);
    --cover-pos: 50% 50%;
    transition: transform var(--dur-slow) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-slow) var(--ease-out);
}
/* Единственный тихий сигнал «в покое» у бесплатного курса — цветная рамка */
.tsv-home .tsv-card--free { border-color: var(--tsv-accent-soft); }
.tsv-home .tsv-card:focus-visible {
    outline: 2px solid var(--tsv-accent-bright);
    outline-offset: 3px;
}

/* ---------- Клетка обложки и вуаль ---------- */
.tsv-home .tsv-thumb {
    position: relative;
    aspect-ratio: 1 / 1;        /* клетка не зависит от пропорций файла */
    overflow: hidden;
    border-radius: var(--tsv-radius-sm);
    background: #0e0b12;
}
.tsv-home .tsv-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--cover-pos, 50% 50%);
    /* Обложки яркие СРАЗУ, а не по наведению. Витрина должна продавать
       в состоянии покоя: подавляющее большинство смотрит её на телефоне,
       где наведения нет вовсе, и приглушённая картинка так и остаётся
       приглушённой. Лёгкий подъём насыщенности и контраста — обложки
       генерились с запасом как раз под него. */
    filter: saturate(1.08) contrast(1.04) brightness(1.02);
    transform: scale(1);
    transition: filter var(--dur-slow) var(--ease-out),
                transform 520ms var(--ease-out);
}
/* Вуаль — обычный градиентный слой: без размытия подложки и без mix-blend-mode
   (последний заставил бы браузер держать отдельный слой композитинга на каждой из десяти плиток) */
.tsv-home .tsv-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(10, 6, 18, 0) 58%, rgba(10, 6, 18, 0.40) 100%),
        linear-gradient(0deg, rgba(154, 122, 232, 0.05), rgba(154, 122, 232, 0.05));
    transition: opacity var(--dur-slow) var(--ease-out);
}
/* Свечение по краю обложки в цвет курса. В покое его нет — появляется
   под курсором и гаснет плавно. Внутренняя тень, а не box-shadow снаружи:
   так подсветка не выходит за скруглённый угол клетки. */
.tsv-home .tsv-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--card-accent, var(--tsv-accent)) 60%, transparent),
        inset 0 0 24px -4px color-mix(in srgb, var(--card-accent, var(--tsv-accent)) 45%, transparent);
    transition: opacity var(--dur-slow) var(--ease-out);
}
/* Флажок живёт на обложке, а не в моно-строке: на узком экране моно-строка прячется */
.tsv-home .tsv-flag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 4px 9px;
    border-radius: 999px;
    font-family: var(--tsv-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--tsv-accent-bright);
    background: rgba(10, 6, 18, 0.74);
    border: 1px solid var(--tsv-accent-soft);
}

.tsv-home .tsv-card-name {
    color: var(--tsv-fg);
    font-weight: 600;
}
.tsv-home .tsv-card-desc {
    color: var(--tsv-fg-dim);
    line-height: 1.5;
}
.tsv-home .tsv-card-meta {
    display: block;
    font-family: var(--tsv-mono);
    text-transform: uppercase;
}
/* Тематический цвет виден в покое только в моно-строке курса */
.tsv-home .tsv-card--course .tsv-card-name { font-size: 16px; line-height: 1.25; margin: 14px 0 5px; }
.tsv-home .tsv-card--course .tsv-card-desc { font-size: 13.5px; }
.tsv-home .tsv-card--course .tsv-card-meta {
    margin-top: 8px;
    font-size: 10.5px;
    letter-spacing: 1.4px;
    color: var(--card-accent);
}
.tsv-home .tsv-card--pack .tsv-card-name { font-size: 14px; line-height: 1.3; margin: 10px 0 3px; }
.tsv-home .tsv-card--pack .tsv-card-meta {
    font-size: 10px;
    letter-spacing: 1.3px;
    color: var(--tsv-fg-mute);
    color: color-mix(in srgb, var(--card-accent, var(--tsv-accent)) 58%, var(--tsv-fg-dim));
}

/* ============================================================
   4. ПАКИ — 7 мелких плиток «полкой» + полоса «как всё устроено»
   ============================================================ */
/* Паков семь, а не шесть: «полка» из семи плиток в один ряд.
   Сетка шире остальных (1104 вместо 1040) — иначе плитка падает до 138px
   и вшитый в обложку заголовок перестаёт читаться даже как текстура. */
.tsv-home .tsv-packs {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
    max-width: 1104px;
    margin: 0 auto;
}
.tsv-home .tsv-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    max-width: 1040px;
    margin: 28px auto 0;
    border-top: 1px solid var(--tsv-border-soft);
}
.tsv-home .tsv-fact {
    padding: 14px 18px;
    font-size: 13px;
    color: var(--tsv-fg-dim);
}
.tsv-home .tsv-fact + .tsv-fact { border-left: 1px solid var(--tsv-border-soft); }

/* ============================================================
   5. ЧТО ЕЩЁ ЕСТЬ НА САЙТЕ — четыре плитки с кадрами-шапками
   ============================================================ */
.tsv-home .tsv-more {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    max-width: 1040px;
    margin: 0 auto;
}
.tsv-home .tsv-more-tile {
    overflow: hidden;
    --card-accent: var(--tsv-accent);
    background: var(--tsv-bg-glass);
    background: color-mix(in srgb, var(--card-accent) 6%, var(--tsv-bg-glass));
    border: 1px solid var(--tsv-border-soft);
    border-color: color-mix(in srgb, var(--card-accent) 20%, transparent);
    border-radius: var(--tsv-radius-sm);
    transition: border-color var(--dur-base) var(--ease-out),
                background-color var(--dur-base) var(--ease-out);
}
.tsv-home .tsv-more-tile:nth-child(1) { --card-accent: var(--tsv-tone-amber); }
.tsv-home .tsv-more-tile:nth-child(2) { --card-accent: var(--tsv-tone-indigo); }
.tsv-home .tsv-more-tile:nth-child(3) { --card-accent: var(--tsv-tone-teal); }
.tsv-home .tsv-more-tile:nth-child(4) { --card-accent: var(--tsv-tone-rose); }
/* Шапка-кадр плитки. Кадр притушен в покое и оживает при наведении —
   тот же приём, что у обложек продуктов, чтобы серия читалась вместе. */
.tsv-home .tsv-more-shot {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0e0b12;
}
.tsv-home .tsv-more-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.78) brightness(0.88);
    transition: filter var(--dur-slow) var(--ease-out);
}
.tsv-home .tsv-more-shot::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(10, 6, 18, 0) 55%, rgba(10, 6, 18, 0.62) 100%),
                linear-gradient(0deg, rgba(154, 122, 232, 0.09), rgba(154, 122, 232, 0.09));
}
.tsv-home .tsv-more-body { padding: 18px 20px 20px; }
.tsv-home .tsv-more-name {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--tsv-fg);
}
.tsv-home .tsv-more-name a {
    text-decoration: none;
    color: inherit;
    transition: color var(--dur-base) var(--ease-out);
}
.tsv-home .tsv-more-note {
    margin: 6px 0 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--tsv-fg-dim);
}
.tsv-home .tsv-more-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tsv-home .tsv-more-links a {
    font-family: var(--tsv-mono);
    font-size: 12px;
    line-height: 1.4;
    color: var(--tsv-fg-mute);
    text-decoration: none;
    transition: color var(--dur-base) var(--ease-out);
}
.tsv-home .tsv-more-links a.tsv-more-out { margin-top: 4px; }

/* ============================================================
   6. СООБЩЕСТВО — единственное прерывание фона.
   Шесть площадок, где проект живёт открыто. Patreon и Boosty сюда
   не входят: они про поддержку, а не про открытые материалы, и живут
   на странице «Поддержать проект».
   Значки — простые векторные силуэты в общей сетке 22px, монохром
   от currentColor: подхватывают акцент при наведении, не мылят
   на ретине и не весят ни байта загрузки.
   ============================================================ */
.tsv-home .tsv-community {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    max-width: 1040px;
    margin: 0 auto;
}
.tsv-home .tsv-com-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 14px;
    text-decoration: none;
    color: inherit;
    transition: background var(--dur-base) var(--ease-out);
}
.tsv-home .tsv-com-ico {
    flex: 0 0 auto;
    display: inline-flex;
    margin-top: 1px;
    color: var(--tsv-fg-mute);
    transition: color var(--dur-base) var(--ease-out);
}
.tsv-home .tsv-com-ico svg { display: block; }
.tsv-home .tsv-com-text { min-width: 0; }
.tsv-home .tsv-com-item + .tsv-com-item { border-left: 1px solid var(--tsv-border-soft); }
.tsv-home .tsv-com-name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--tsv-fg);
    transition: color var(--dur-base) var(--ease-out);
}
.tsv-home .tsv-com-note {
    display: block;
    margin-top: 4px;
    font-family: var(--tsv-mono);
    font-size: 11px;
    color: var(--tsv-fg-mute);
}
/* подчёркивание, растущее слева */
.tsv-home .tsv-com-item::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 10px;
    height: 2px;
    background: var(--tsv-accent);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-slow) var(--ease-out);
}
/* Это не кнопка — кнопок на странице ровно три, и все три в других секциях */
.tsv-home .tsv-donate {
    display: block;
    margin-top: 22px;
    text-align: center;
    font-size: 13px;
    color: var(--tsv-fg-dim);
    text-decoration: none;
    transition: color var(--dur-base) var(--ease-out);
}

/* ============================================================
   Наведение — только там, где есть настоящий курсор
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
    .tsv-home .tsv-btn--primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 30px -14px rgba(122, 84, 207, 0.95);
    }
    .tsv-home .tsv-btn--primary:active { transform: translateY(0); }
    .tsv-home .tsv-btn--ghost:hover {
        border-color: var(--tsv-accent);
        background-color: rgba(154, 122, 232, 0.07);
    }
    .tsv-home .tsv-head-link:hover { color: var(--tsv-accent-bright); }
    .tsv-home .tsv-head-link:hover .tsv-arr { transform: translateX(3px); }

    /* Развилка: без подъёма и без тени — подъём принадлежит карточкам продуктов */
    .tsv-home .tsv-path:hover {
        border-color: color-mix(in srgb, var(--card-accent) 52%, transparent);
        background: color-mix(in srgb, var(--card-accent) 11%, rgba(31, 24, 56, 0.82));
    }

    .tsv-home .tsv-card:hover {
        transform: translateY(-4px);
        border-color: color-mix(in srgb, var(--card-accent) 45%, transparent);
        box-shadow:
            0 14px 28px -18px rgba(0, 0, 0, 0.66),
            0 6px 20px -12px color-mix(in srgb, var(--card-accent) 42%, transparent);
    }
    /* Наведение: кадр наезжает, вуаль почти уходит, по краю обложки
       загорается ободок в цвет курса. Насыщенность добавляем поверх
       базовой, а не «включаем» её — базовая и так яркая. */
    .tsv-home .tsv-card:hover .tsv-thumb img {
        filter: saturate(1.2) contrast(1.06) brightness(1.08);
        transform: scale(1.07);
    }
    .tsv-home .tsv-card:hover .tsv-thumb::after { opacity: 0.25; }
    .tsv-home .tsv-card:hover .tsv-thumb::before { opacity: 1; }

    /* Самый лёгкий блок страницы — без сдвига, он должен остаться спокойным */
    .tsv-home .tsv-more-tile:hover {
        border-color: color-mix(in srgb, var(--card-accent) 48%, transparent);
        background: color-mix(in srgb, var(--card-accent) 11%, rgba(31, 24, 56, 0.82));
    }
    .tsv-home .tsv-more-tile:hover .tsv-more-shot img { filter: none; }
    .tsv-home .tsv-more-name a:hover { color: var(--tsv-accent-bright); }
    .tsv-home .tsv-more-links a:hover { color: var(--tsv-accent-bright); }

    .tsv-home .tsv-com-item:hover { background: rgba(154, 122, 232, 0.07); }
    .tsv-home .tsv-com-item:hover .tsv-com-name { color: var(--tsv-accent-bright); }
    .tsv-home .tsv-com-item:hover .tsv-com-ico { color: var(--tsv-accent-bright); }
    .tsv-home .tsv-com-item:hover::after { transform: scaleX(1); }

    .tsv-home .tsv-donate:hover { color: var(--tsv-accent-bright); }
    .tsv-home .tsv-donate:hover .tsv-arr { transform: translateX(3px); }
}

/* ============================================================
   Движение. Бесконечных анимаций на странице нет вообще.
   ============================================================ */

/* Появление героя — единственная одноразовая анимация на загрузке.
   Стартовое состояние объявляется ТОЛЬКО здесь: при reduce его нет вовсе. */
@media (prefers-reduced-motion: no-preference) {
    .tsv-home .tsv-hero-logo,
    .tsv-home .tsv-home-h1,
    .tsv-home .tsv-hero-lead {
        opacity: 0;
        animation: tsv-home-rise 380ms var(--ease-out) forwards;
    }
    .tsv-home .tsv-hero-logo    { animation-delay: 0ms; }
    .tsv-home .tsv-home-h1      { animation-delay: 70ms; }
    .tsv-home .tsv-hero-lead    { animation-delay: 140ms; }
}
@keyframes tsv-home-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* Проявление сеток при скролле. Скрытое состояние живёт только под классом,
   который вешает JS — без JS и при reduce карточки видны сразу. */
.tsv-home.tsv-home--anim .tsv-card {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dur-slow) var(--ease-out) calc(var(--i, 0) * 45ms),
                transform var(--dur-slow) var(--ease-out) calc(var(--i, 0) * 45ms);
}
.tsv-home.tsv-home--anim .tsv-card.is-in {
    opacity: 1;
    transform: none;
    /* после проявления карточка возвращается к обычным переходам наведения */
    transition: transform var(--dur-slow) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-slow) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
    .tsv-home *, .tsv-home *::before, .tsv-home *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .tsv-home .tsv-card { opacity: 1 !important; transform: none !important; }
    .tsv-home .tsv-thumb img { transform: none !important; }
}

/* ============================================================
   Брейкпоинты
   ============================================================ */
@media (max-width: 1099px) {
    .tsv-home .tsv-packs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    .tsv-home .tsv-s-packs { contain-intrinsic-size: auto 680px; }
    .tsv-home .tsv-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* шесть площадок в один ряд перестают помещаться раньше мобильного */
    .tsv-home .tsv-community { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tsv-home .tsv-com-item:nth-child(3n + 1) { border-left: 0; }
    .tsv-home .tsv-com-item:nth-child(n + 4) { border-top: 1px solid var(--tsv-border-soft); }
    /* четыре факта в строку на узком экране режут фразы пополам */
    .tsv-home .tsv-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tsv-home .tsv-fact:nth-child(odd) { border-left: 0; }
    .tsv-home .tsv-fact:nth-child(n + 3) { border-top: 1px solid var(--tsv-border-soft); }
}
@media (max-width: 899px) {
    .tsv-home .tsv-courses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 699px) {
    .tsv-home .tsv-section { padding: 36px 20px; }
    .tsv-home .tsv-band { padding: 36px 20px; }
    .tsv-home .tsv-hero { padding: 28px 20px 18px; }

    /* На телефоне товар отодвигать некуда: четыре карточки курсов и так
       занимают экран целиком. Сокращённый padding выше сбрасывает
       вертикальные отступы, поэтому повторяем их здесь. */
    .tsv-home .tsv-s-courses { padding-top: 18px; padding-bottom: 22px; }
    .tsv-home .tsv-s-packs   { padding-top: 22px; }

    /* Мобильные интринсики держим в медиа-выборке, иначе прыгает скроллбар */
    .tsv-home .tsv-s-paths     { contain-intrinsic-size: auto 520px; }
    .tsv-home .tsv-s-courses   { contain-intrinsic-size: auto 620px; }
    .tsv-home .tsv-s-packs     { contain-intrinsic-size: auto 1120px; }
    .tsv-home .tsv-s-more      { contain-intrinsic-size: auto 1240px; }
    .tsv-home .tsv-s-community { contain-intrinsic-size: auto 440px; }

    .tsv-home .tsv-hero-logo { width: 212px; }
    .tsv-home .tsv-home-h1 { line-height: 1.15; }
    .tsv-home .tsv-ruler { max-width: 240px; }

    .tsv-home .tsv-head { flex-direction: column; align-items: flex-start; gap: 10px; }

    .tsv-home .tsv-paths { grid-template-columns: minmax(0, 1fr); gap: 10px; }

    .tsv-home .tsv-courses { gap: 12px; }
    .tsv-home .tsv-card--course .tsv-card-name { font-size: 14px; }
    .tsv-home .tsv-card--course .tsv-card-desc {
        font-size: 12.5px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* третья строка ломает ритм на узкой карточке; флажок «бесплатно» не страдает — он на обложке */
    .tsv-home .tsv-card--course .tsv-card-meta { display: none; }

    .tsv-home .tsv-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .tsv-home .tsv-packs .tsv-card--pack:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        width: calc((100% - 10px) / 2);
        justify-self: center;
    }
    .tsv-home .tsv-card--pack .tsv-card-name { font-size: 13px; }

    .tsv-home .tsv-facts { grid-template-columns: minmax(0, 1fr); }
    .tsv-home .tsv-fact + .tsv-fact {
        border-left: 0;
        border-top: 1px solid var(--tsv-border-soft);
    }
    .tsv-home .tsv-fact:nth-child(n + 3) { border-top: 1px solid var(--tsv-border-soft); }

    /* плитки теперь с кадрами: в две колонки кадр становится маркой, а не картинкой */
    .tsv-home .tsv-more { grid-template-columns: minmax(0, 1fr); gap: 12px; }

    .tsv-home .tsv-community { grid-template-columns: minmax(0, 1fr); }
    .tsv-home .tsv-com-item { padding: 13px 4px; }
    .tsv-home .tsv-com-item + .tsv-com-item {
        border-left: 0;
        border-top: 1px solid var(--tsv-border-soft);
    }
    .tsv-home .tsv-com-item::after { left: 4px; right: 4px; bottom: 6px; }
    /* Шесть площадок в один ряд не помещаются задолго до мобильного:
       на планшете идут в две колонки, ниже — в одну. */
}