/* ==========================================================================
   Песновея — главная и «Примеры песен»: то, чего нет на других страницах
   Макет песни на первом экране, липкий макет мастера, бегущая строка,
   плитки «Что остаётся у вас», тарифы и список «Примеров».

   Общие блоки — заголовки разделов, форма идеи, полоса оплаты, карточки
   песен и поводов, вопросы, финальный призыв — в showcase.css: их делят
   главная, «Примеры» и страницы поводов. Этот файл подключается после
   него и опирается на его токены (--home-*).
   ========================================================================== */

/* --- Макет песни на первом экране ------------------------------------------ */

.home-hero__visual {
    display: grid;
    justify-items: center;
    gap: 1.5rem;
}

.home-hero__stage {
    position: relative;
    width: min(100%, 27rem);
    padding-block: 2rem 3rem;
}

.home-mock {
    position: relative;
    z-index: 1;
    padding: 1.125rem;
    border: 1px solid var(--home-line);
    border-radius: 24px;
    background: var(--home-surface);
    box-shadow: var(--home-shadow-lg);
}

.home-mock__top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--home-line);
}

.home-mock__dots {
    display: inline-flex;
    gap: 0.375rem;
}

.home-mock__dots i {
    width: 0.5625rem;
    height: 0.5625rem;
    border-radius: 50%;
    background: var(--home-line-strong);
}

.home-mock__dots i:first-child {
    background: var(--brand-coral);
}

.home-mock__app {
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--color-text-muted);
}

.home-mock__idea {
    margin-bottom: 1rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--home-line);
    border-radius: 14px;
    background: var(--home-paper);
}

.home-mock__label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Высота — ровно две строки: печатающийся текст не двигает макет. */
.home-mock__typed {
    height: 3em;
    margin: 0;
    overflow: hidden;
    font-size: clamp(0.875rem, 0.8rem + 0.4vw, 1rem);
    font-weight: 600;
    line-height: 1.5;
}

.home-mock__caret {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    margin-left: 2px;
    vertical-align: -0.15em;
    background: var(--home-accent);
    opacity: 0;
}

.home-mock__track {
    display: grid;
    grid-template-columns: 5.25rem minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

.home-mock__cover {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 16px;
    background: var(--brand-gradient);
    color: #ffffff;
    box-shadow: 0 12px 24px -12px rgba(91, 32, 214, 0.65);
}

.home-mock__cover svg {
    width: 90%;
    height: 90%;
}

.home-mock__meta {
    min-width: 0;
}

.home-mock__title {
    margin: 0;
    overflow: hidden;
    font-size: 1.0625rem;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: opacity 0.4s ease;
}

.home-mock__style {
    margin: 0 0 0.5rem;
    overflow: hidden;
    font-size: 0.8125rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--color-text-muted);
    transition: opacity 0.4s ease;
}

.home-mock__eq {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 2rem;
}

.home-mock__eq i {
    flex: 1 1 0;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--brand-coral-light), var(--brand-violet));
    transform-origin: bottom;
    transform: scaleY(var(--h, 0.5));
    transition: transform 0.5s var(--home-ease);
}

/* Высоты и сдвиги столбиков — из таблицы, без атрибутов style: их
   запрещает политика безопасности. Семь высот и пять задержек дают
   рисунок, который не повторяется на глаз. */
.home-mock__eq i:nth-child(7n + 1) { --h: 0.55; }
.home-mock__eq i:nth-child(7n + 2) { --h: 0.85; }
.home-mock__eq i:nth-child(7n + 3) { --h: 0.4; }
.home-mock__eq i:nth-child(7n + 4) { --h: 1; }
.home-mock__eq i:nth-child(7n + 5) { --h: 0.65; }
.home-mock__eq i:nth-child(7n + 6) { --h: 0.3; }
.home-mock__eq i:nth-child(7n + 7) { --h: 0.75; }
.home-mock__eq i:nth-child(5n + 1) { animation-delay: -0.2s; }
.home-mock__eq i:nth-child(5n + 2) { animation-delay: -0.9s; }
.home-mock__eq i:nth-child(5n + 3) { animation-delay: -0.5s; }
.home-mock__eq i:nth-child(5n + 4) { animation-delay: -1.3s; }
.home-mock__eq i:nth-child(5n + 5) { animation-delay: -0.7s; }
.home-mock__eq i:nth-child(3n + 1) { animation-duration: 0.9s; }
.home-mock__eq i:nth-child(3n + 2) { animation-duration: 1.15s; }
.home-mock__eq i:nth-child(3n + 3) { animation-duration: 0.75s; }

.home-mock__progress {
    height: 6px;
    margin: 1.125rem 0 0.5rem;
    overflow: hidden;
    border-radius: var(--radius-full);
    background: var(--home-line);
}

.home-mock__fill {
    display: block;
    height: 100%;
    background: var(--brand-gradient);
    transform-origin: left;
}

.home-mock__status {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.8125rem;
    font-weight: 550;
    color: var(--color-text-muted);
}

.home-mock__time {
    font-variant-numeric: tabular-nums;
}

/* Подпись состояния макета: без скрипта и на готовой сцене — «Готово». */
.home-mock__say > span {
    display: none;
}

.home-mock:not([data-state]) .home-mock__say--ready,
.home-mock[data-state="ready"] .home-mock__say--ready,
.home-mock[data-state="typing"] .home-mock__say--typing,
.home-mock[data-state="working"] .home-mock__say--working,
.home-mock[data-state="voice"] .home-mock__say--voice {
    display: inline;
}

.home-mock[data-state="typing"] .home-mock__time {
    visibility: hidden;
}

.home-mock__variants {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    transition: opacity 0.4s ease, transform 0.4s var(--home-ease);
}

.home-mock__variant {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem clamp(0.625rem, 0.3rem + 1.4vw, 0.875rem);
    white-space: nowrap;
    border: 1px solid var(--home-line-strong);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 650;
}

.home-mock__variant--on {
    border-color: var(--home-accent);
    background: var(--home-accent);
    color: var(--color-accent-text);
}

.home-mock__play {
    width: 0;
    height: 0;
    border-left: 0.5rem solid currentColor;
    border-block: 0.3125rem solid transparent;
}

/* Состояния, которые проигрывает home.js. Без скрипта атрибута нет —
   макет стоит на готовой песне. */
.home-mock[data-state="typing"] .home-mock__caret {
    opacity: 1;
}

.home-mock[data-state="typing"] .home-mock__fill {
    transform: scaleX(0);
    transition: none;
}

.home-mock:is([data-state="working"], [data-state="voice"]) .home-mock__fill {
    transform: scaleX(1);
    transition: transform 2.6s linear;
}

.home-mock[data-state="typing"] .home-mock__title,
.home-mock[data-state="typing"] .home-mock__style {
    opacity: 0.25;
}

.home-mock:is([data-state="typing"], [data-state="working"], [data-state="voice"]) .home-mock__eq i {
    transform: scaleY(0.12);
}

.home-mock:is([data-state="typing"], [data-state="working"], [data-state="voice"]) .home-mock__variants {
    opacity: 0.3;
    transform: translateY(4px);
}

/*
 * Плашки «Текст · Музыка · Вокал» вокруг макета. Внешний элемент двигает
 * курсор (home.js), внутренний — покачивание. Места выбраны там, где у
 * карточки пусто, с запасом на оба сдвига: правый конец строки
 * «Новая песня», справа от кнопок вариантов и под нижним краем.
 */
.home-float {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    will-change: transform;
}

.home-float--text {
    top: 0.625rem;
    right: -0.75rem;
}

.home-float--music {
    bottom: 4.125rem;
    right: -1.25rem;
}

.home-float--voice {
    bottom: 0.125rem;
    left: 10%;
}

.home-float__inner {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--home-line);
    border-radius: var(--radius-full);
    background: var(--home-surface);
    box-shadow: var(--home-shadow);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-text);
}

.home-float__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--brand-coral);
}

.home-float--music .home-float__dot {
    background: var(--brand-violet);
}

.home-float--voice .home-float__dot {
    background: var(--brand-gradient);
}

/* От 60rem макет стоит в правой колонке вплотную к полю контейнера
   (1,5rem), и плашка, вынесенная за карточку на 1,25rem, вместе со
   сдвигом за курсором (до ~11 px) заходила за край окна. Пока справа
   только поле, выносим её едва-едва; когда контейнер упирается в свою
   ширину и справа появляется запас — дальше. */
@media (min-width: 60rem) and (max-width: 69.99rem) {
    .home-float--text { right: 0; }
    .home-float--music { right: -0.25rem; }
}

@media (min-width: 75rem) {
    .home-float--music { right: -2rem; }
}

/* На телефоне вокруг карточки места нет: плашки встают строкой под ней
   и не заслоняют ни полосу готовности, ни длительность. */
@media (max-width: 47.99rem) {
    .home-hero__stage {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        padding-block: 0.5rem 0;
    }

    .home-mock {
        flex: 1 1 100%;
        margin-bottom: 0.5rem;
    }

    .home-float {
        position: static;
        transform: none !important;
    }

    .home-float__inner {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* --- Как это работает: шаги и липкий макет мастера ------------------------- */

/*
 * Телефон и планшет: шаги — короткий список карточек с картинкой у
 * каждой, а макет мастера — один, в итоговом состоянии, после списка.
 * Раньше макет прилипал к верху и занимал 40% экрана, а шаги стояли
 * через пустые пятые доли экрана.
 *
 * Широкий экран: шаги слева плотной колонкой, макет справа прилипает и
 * переключается, когда шаг пересекает середину окна (home.js).
 *
 * minmax(0, 1fr): иначе строка шагов мастера, которая не переносится,
 * растянула бы колонку шире экрана.
 */
.home-how__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

.home-how__stage {
    position: relative;
    z-index: 3;
    width: min(100%, 26rem);
    justify-self: center;
}

@media (min-width: 60rem) {
    .home-how__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 4rem;
        align-items: start;
    }

    .home-how__steps {
        grid-column: 1;
        grid-row: 1;
    }

    .home-how__stage {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
    }

    .hp-motion .home-how__stage {
        position: sticky;
        top: max(5.5rem, calc(50vh - 15rem));
    }
}

.home-wizard {
    overflow: hidden;
    border: 1px solid var(--home-line);
    border-radius: 24px;
    background: var(--home-surface);
    box-shadow: var(--home-shadow-lg);
}

.home-wizard__head {
    padding: 1rem 1.25rem 0.875rem;
    border-bottom: 1px solid var(--home-line);
    background: var(--home-paper);
}

/* До широкого экрана макет показывает только итог: шаги уже есть
   списком выше, а строка из четырёх номеров повторяла бы его. */
@media (max-width: 59.99rem) {
    .home-wizard__head {
        display: none;
    }

    .home-wizard .home-wizard__screens {
        height: auto;
    }

    .home-wizard .home-wizard__screen {
        display: none;
    }

    .home-wizard .home-wizard__screen[data-screen="5"] {
        position: static;
        display: block;
    }
}

.home-wizard__head {
    container-type: inline-size;
}

.home-wizard__steps {
    display: flex;
    justify-content: space-between;
    gap: 0.375rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--color-text-muted);
}

.home-wizard__steps li {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    min-width: 0;
    transition: color 0.3s ease;
}

/* На узком макете подписаны не все шаги, а только текущий: четыре
   подписи в строку не помещаются. Узость — у самого макета, а не у окна:
   примерно до 68rem строка шагов в правой колонке уже 27,5rem, и в
   широком системном шрифте (DejaVu Sans) «Подтверждение» вылезало за
   край, а «История» упиралась в номер следующего шага. Без скрипта макет
   стоит на итоговом экране, и тогда подписей нет вовсе — хватает номеров. */
@container (max-width: 27.5rem) {
    .home-wizard__steps b {
        display: none;
    }

    .home-wizard[data-state="1"] .home-wizard__steps li:nth-child(1) b,
    .home-wizard[data-state="2"] .home-wizard__steps li:nth-child(2) b,
    .home-wizard[data-state="3"] .home-wizard__steps li:nth-child(3) b,
    .home-wizard[data-state="4"] .home-wizard__steps li:nth-child(4) b {
        display: inline;
    }
}

.home-wizard__steps b {
    font-weight: inherit;
}

.home-wizard__steps span {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.625rem;
    height: 1.625rem;
    border: 1px solid var(--home-line-strong);
    border-radius: 50%;
    font-size: 0.75rem;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Пройденные шаги: у состояния N подсвечены первые N пунктов. */
.home-wizard[data-state="1"] .home-wizard__steps li:nth-child(-n + 1),
.home-wizard[data-state="2"] .home-wizard__steps li:nth-child(-n + 2),
.home-wizard[data-state="3"] .home-wizard__steps li:nth-child(-n + 3),
.home-wizard[data-state="4"] .home-wizard__steps li,
.home-wizard[data-state="5"] .home-wizard__steps li {
    color: var(--color-text);
}

.home-wizard[data-state="1"] .home-wizard__steps li:nth-child(-n + 1) span,
.home-wizard[data-state="2"] .home-wizard__steps li:nth-child(-n + 2) span,
.home-wizard[data-state="3"] .home-wizard__steps li:nth-child(-n + 3) span,
.home-wizard[data-state="4"] .home-wizard__steps li span,
.home-wizard[data-state="5"] .home-wizard__steps li span {
    border-color: var(--home-accent);
    background: var(--home-accent);
    color: var(--color-accent-text);
}

.home-wizard__rail {
    display: block;
    height: 4px;
    overflow: hidden;
    border-radius: var(--radius-full);
    background: var(--home-line);
}

.home-wizard__fill {
    display: block;
    height: 100%;
    background: var(--brand-gradient);
    transform-origin: left;
    transition: transform 0.6s var(--home-ease);
}

.home-wizard[data-state="1"] .home-wizard__fill { transform: scaleX(0.25); }
.home-wizard[data-state="2"] .home-wizard__fill { transform: scaleX(0.5); }
.home-wizard[data-state="3"] .home-wizard__fill { transform: scaleX(0.75); }

/* Экраны лежат стопкой; виден один — тот, что в data-state. Высота
   фиксирована, чтобы смена экрана не двигала страницу. */
.home-wizard__screens {
    position: relative;
    height: 21rem;
}

.home-wizard__screen {
    position: absolute;
    inset: 0;
    padding: 1.25rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity 0.45s var(--home-ease), transform 0.45s var(--home-ease), visibility 0s linear 0.45s;
}

.home-wizard[data-state="1"] [data-screen="1"],
.home-wizard[data-state="2"] [data-screen="2"],
.home-wizard[data-state="3"] [data-screen="3"],
.home-wizard[data-state="4"] [data-screen="4"],
.home-wizard[data-state="5"] [data-screen="5"] {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.home-wizard__q {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    font-size: 1.125rem;
    font-weight: 750;
    letter-spacing: -0.01em;
}

.home-wizard__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.375rem 0 1rem;
}

.home-chip {
    display: inline-flex;
    align-items: center;
    min-height: 2.125rem;
    padding: 0 0.875rem;
    border: 1px solid var(--home-line-strong);
    border-radius: var(--radius-full);
    background: var(--home-surface);
    font-size: 0.875rem;
    color: var(--color-text);
}

.home-chip--on {
    border-color: var(--home-accent);
    background: var(--home-accent);
    color: var(--color-accent-text);
    font-weight: 650;
}

.home-field {
    display: block;
    margin-bottom: 0.625rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--home-line);
    border-radius: 12px;
    background: var(--home-paper);
}

.home-field__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--color-text-muted);
}

/* Значение «вписывается» в поле: шторка цвета поля съезжает вправо. */
.home-field__value {
    position: relative;
    display: block;
    overflow: hidden;
    font-size: 0.9375rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.home-field__value::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--home-paper);
    transform: scaleX(0);
    transform-origin: right;
}

.home-seg {
    display: inline-flex;
    max-width: 100%;
    gap: 0.25rem;
    margin-top: 0.375rem;
    padding: 0.25rem;
    border: 1px solid var(--home-line);
    border-radius: var(--radius-full);
    background: var(--home-paper);
}

.home-seg span {
    padding: 0.375rem clamp(0.5rem, 2.4vw, 0.875rem);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.home-seg .home-seg__on {
    background: var(--home-surface);
    box-shadow: var(--shadow-sm);
    color: var(--color-text);
    font-weight: 650;
}

.home-quote {
    display: block;
    margin-bottom: 1rem;
    overflow: hidden;
    border: 1px solid var(--home-line);
    border-radius: 14px;
}

.home-quote__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--home-line);
    font-size: 0.9375rem;
}

.home-quote__row span {
    color: var(--color-text-muted);
}

.home-quote__row--price {
    border-bottom: 0;
    background: var(--home-accent-soft);
}

.home-quote__row--price b {
    color: var(--home-accent);
}

.home-wizard__button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    border-radius: 14px;
    background: var(--home-accent);
    color: var(--color-accent-text);
    font-weight: 700;
}

.home-wizard__button::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--home-accent);
    border-radius: inherit;
    opacity: 0;
}

.home-wizard__check {
    position: relative;
    display: inline-block;
    flex: none;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    background: var(--color-success);
}

.home-wizard__check::after {
    content: "";
    position: absolute;
    left: 0.5625rem;
    top: 0.3125rem;
    width: 0.4375rem;
    height: 0.75rem;
    border: solid var(--color-bg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.home-variant {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
    padding: 0.625rem;
    border: 1px solid var(--home-line);
    border-radius: 14px;
}

.home-variant--on {
    border-color: var(--home-accent);
    background: var(--home-accent-soft);
}

.home-variant__cover {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 10px;
    background: var(--brand-gradient);
}

.home-variant__cover--alt {
    background: linear-gradient(315deg, #ff7a62 0%, #ff5a4e 30%, #5b20d6 100%);
}

.home-variant__name {
    flex: 1;
    min-width: 0;
    font-size: 0.9375rem;
    font-weight: 650;
}

.home-variant__eq {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 1rem;
}

.home-variant__eq i {
    width: 3px;
    height: 100%;
    border-radius: 2px;
    background: var(--home-accent);
    transform-origin: bottom;
    transform: scaleY(0.6);
}

.home-variant__eq i:nth-child(2) { transform: scaleY(0.9); animation-delay: -0.4s; }
.home-variant__eq i:nth-child(3) { transform: scaleY(0.4); animation-delay: -0.8s; }
.home-variant__eq i:nth-child(4) { transform: scaleY(1); animation-delay: -0.2s; }
.home-variant__eq i:nth-child(5) { transform: scaleY(0.5); animation-delay: -0.6s; }

.home-variant__time {
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

.home-wizard__actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.home-wizard__actions span {
    display: grid;
    flex: 1;
    place-items: center;
    min-height: 2.5rem;
    border: 1px solid var(--home-line-strong);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 650;
}

/* Шаги: карточки с картинкой; на широком экране — колонка с рельсом,
   который заливается по мере прокрутки, и точкой у каждого шага. */
.home-how__steps {
    position: relative;
}

.home-how__rail {
    display: none;
}

.home-how__cta {
    margin: 2rem 0 0;
    text-align: center;
}

.home-how__button {
    border-radius: 14px;
    font-weight: 650;
}

.home-how__button svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s var(--home-ease);
}

.home-how__button:hover svg {
    transform: translateY(-3px);
}

@media (min-width: 60rem) {
    .home-how__steps {
        padding-left: 2.25rem;
    }

    .home-how__rail {
        position: absolute;
        top: 1.75rem;
        bottom: 1.75rem;
        left: 0.6875rem;
        display: block;
        width: 2px;
        overflow: hidden;
        border-radius: 2px;
        background: var(--home-line);
    }

    .home-how__rail-fill {
        display: block;
        height: 100%;
        background: linear-gradient(180deg, var(--brand-coral), var(--brand-violet));
        transform-origin: top;
    }

    .hp-motion .home-how__rail-fill {
        transform: scaleY(0);
    }

    .home-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }

    /* Картинки шагов — для узкого экрана: здесь их роль играет макет. */
    .home-step,
    .home-step--result {
        display: block;
        margin-top: 0;
        padding: 1.125rem 1.375rem;
        border-color: transparent;
        background: none;
    }

    .home-step--result {
        margin-top: 0.5rem;
    }

    .home-step__art {
        display: none;
    }

    .home-step__text {
        margin-top: 0;
    }

    .home-step::before {
        content: "";
        position: absolute;
        top: 1.5rem;
        left: -2.0625rem;
        width: 0.875rem;
        height: 0.875rem;
        border: 2px solid var(--home-line-strong);
        border-radius: 50%;
        background: var(--color-bg);
        transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--home-ease);
    }

    .home-step.is-active {
        border-color: var(--home-line);
        background: var(--home-surface);
        box-shadow: var(--home-shadow);
    }

    .home-step.is-active::before {
        border-color: var(--home-accent);
        background: var(--home-accent);
        transform: scale(1.2);
    }

    .home-how__cta {
        padding-left: 2.25rem;
        text-align: left;
    }
}

/* --- Бегущая строка -------------------------------------------------------- */

.home-ticker {
    padding-block: 1.25rem 1.5rem;
    overflow: hidden;
    border-block: 1px solid var(--home-line);
    background: var(--home-paper);
}

.home-ticker__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.home-ticker__label {
    margin: 0;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Края растворяются: строка не обрывается ножом у края экрана. Ширина
   ограничена 160rem: под неё посчитано число копий в разметке (home.php),
   и на мониторе шире лента стоит по центру, а не кончается на полпути. */
.home-ticker__row {
    max-width: 160rem;
    margin-inline: auto;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* Петля сдвигает дорожку на одну копию: на половину при двух копиях,
   на треть при трёх. */
.home-ticker__track {
    --copies: 2;
    display: flex;
    width: max-content;
}

.home-ticker__track--x3 {
    --copies: 3;
}

.home-ticker__list {
    display: flex;
    margin: 0;
    padding: 0.375rem 0;
    list-style: none;
}

.home-ticker__list li {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    padding-left: 1.5rem;
    white-space: nowrap;
    font-size: clamp(1.125rem, 1rem + 0.8vw, 1.625rem);
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.home-ticker__list li::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    background: var(--brand-coral);
    transform: rotate(45deg);
}

.home-ticker__row--reverse .home-ticker__list li {
    font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
    font-weight: 550;
    color: var(--color-text-muted);
}

.home-ticker__row--reverse .home-ticker__list li::after {
    border-radius: 50%;
    background: var(--home-accent);
    transform: none;
}

/* Без петли (нет скрипта, просьба о покое или кнопка «Остановить»)
   лента — обычный список строками в ширину контейнера, копии не нужны.
   Не прокручиваемая полоса: такую браузер делает остановкой клавиши Tab,
   а у неё нет ни имени, ни видимой рамки фокуса (её срезает маска). */
html:not(.hp-loop) .home-ticker__row {
    -webkit-mask-image: none;
    mask-image: none;
}

html:not(.hp-loop) .home-ticker__track {
    display: block;
    width: auto;
}

html:not(.hp-loop) .home-ticker__list {
    flex-wrap: wrap;
    justify-content: center;
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--space-5);
}

html:not(.hp-loop) .home-ticker__list + .home-ticker__list {
    display: none;
}

/* --- Что остаётся у вас: плитки ------------------------------------------ */

/*
 * Главное — два варианта за запуск — крупной тёмной плиткой с двумя
 * дорожками, остальное — короткими карточками со своим цветом. На
 * широком экране тёмная плитка занимает два столбца и две строки.
 */
.home-bento {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 40rem) {
    .home-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-bento__item--wide,
    .home-bento__item--mint {
        grid-column: span 2;
    }
}

@media (min-width: 60rem) {
    .home-bento {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .home-bento__item--wide {
        grid-row: span 2;
    }

    .home-bento__item--mint {
        grid-column: auto;
    }
}

.home-bento__item {
    --tile-tint: var(--home-tint-coral);
    --tile-ink: #c4302a;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    overflow: hidden;
    border: 1px solid var(--home-line);
    border-radius: var(--home-radius);
    background: var(--home-surface);
    transition: transform 0.4s var(--home-ease), box-shadow 0.4s var(--home-ease), border-color 0.3s ease;
}

.home-bento__item:hover {
    border-color: var(--home-line-strong);
    box-shadow: var(--home-shadow);
    transform: translateY(-4px);
}

.home-bento__item--violet { --tile-tint: var(--home-tint-violet); --tile-ink: var(--home-accent); }
.home-bento__item--sun { --tile-tint: var(--home-tint-sun); --tile-ink: #9a6400; }
.home-bento__item--pink { --tile-tint: var(--home-tint-pink); --tile-ink: #b8265c; }
.home-bento__item--mint { --tile-tint: var(--home-tint-mint); --tile-ink: var(--color-success); }

.home-bento__icon {
    flex: none;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    padding: 0.7rem;
    border-radius: 14px;
    background: var(--tile-tint);
    color: var(--tile-ink);
    transition: transform 0.4s var(--home-ease);
}

.home-bento__item:hover .home-bento__icon {
    transform: rotate(-8deg) scale(1.06);
}

.home-bento__title {
    margin: 0 0 0.375rem;
    font-size: 1.125rem;
    font-weight: 720;
    letter-spacing: -0.01em;
}

.home-bento__text {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}

/* На телефоне короткие плитки — строкой со значком слева. */
@media (max-width: 39.99rem) {
    .home-bento__item:not(.home-bento__item--wide) {
        display: grid;
        grid-template-columns: 3rem minmax(0, 1fr);
        column-gap: 1rem;
        padding: 1.125rem;
    }

    .home-bento__item:not(.home-bento__item--wide) .home-bento__icon {
        grid-row: 1 / span 2;
        margin: 0;
    }
}

/* Тёмная плитка — в обеих темах: это кусочек плеера, а не страница. */
.home-bento__item--wide {
    justify-content: flex-end;
    min-height: 16rem;
    border-color: rgba(255, 255, 255, 0.08);
    background-color: var(--brand-ink);
    background-image:
        radial-gradient(circle at 85% 10%, rgba(91, 32, 214, 0.55), rgba(91, 32, 214, 0) 55%),
        radial-gradient(circle at 10% 110%, rgba(255, 90, 78, 0.35), rgba(255, 90, 78, 0) 50%);
    color: var(--home-on-night);
}

.home-bento__item--wide > :not(.home-bento__disc) {
    position: relative;
}

.home-bento__item--wide .home-bento__title {
    font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
    color: var(--home-on-night);
}

.home-bento__item--wide .home-bento__text {
    max-width: 26rem;
    color: var(--home-on-night-muted);
}

.home-bento__art {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.625rem;
    max-width: 30rem;
    margin-bottom: auto;
    padding-bottom: 1.5rem;
}

.home-bento__caption {
    display: block;
    margin: 0 0 0.25rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--home-on-night-muted);
}

.home-bento__caption::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin: 0 0.625rem 0.1em 0.25rem;
    border-radius: 50%;
    background: var(--color-success);
    box-shadow: 0 0 0 4px rgba(74, 222, 159, 0.2);
}

.home-bento__track {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 0.875rem;
    border-radius: 14px;
    background-color: rgba(70, 38, 150, 0.6);
    box-shadow: inset 0 0 0 1px rgba(196, 168, 255, 0.3);
    color: #ff9a85;
}

.home-bento__track--alt {
    background-color: rgba(40, 37, 60, 0.8);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.4);
}

.home-bento__time {
    flex: none;
    font-size: 0.8125rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
}

.home-bento__track--alt .home-bento__time {
    color: #c9c4d8;
}

.home-bento__track b {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #ffffff;
    color: var(--brand-ink);
    font-size: 0.8125rem;
}

.home-bento__wave {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    min-width: 0;
    height: 1.75rem;
    overflow: hidden;
}

.home-bento__wave i {
    display: block;
    flex: none;
    width: 3px;
    height: 100%;
    border-radius: 2px;
    background-color: currentColor;
    transform-origin: 50% 50%;
}

.home-bento__wave i:nth-child(4n + 1) { transform: scaleY(0.35); animation-duration: 1.5s; animation-delay: -0.7s; }
.home-bento__wave i:nth-child(4n + 2) { transform: scaleY(0.8); }
.home-bento__wave i:nth-child(4n + 3) { transform: scaleY(0.55); animation-delay: -0.2s; }
.home-bento__wave i:nth-child(4n + 4) { transform: scaleY(1); animation-delay: -0.5s; }
.home-bento__wave i:nth-child(3n) { transform: scaleY(0.45); animation-duration: 0.9s; animation-delay: -0.4s; }

/* Пластинка, наполовину выглянувшая из-за края плитки. */
.home-bento__disc {
    position: absolute;
    right: -5rem;
    bottom: -6rem;
    display: none;
    width: 17rem;
    height: 17rem;
    border-radius: 50%;
    background: repeating-radial-gradient(circle at 50% 50%, #12131b 0 2px, #1e1f2b 2px 4px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 30px 60px -20px rgba(0, 0, 0, 0.9);
}

.home-bento__disc::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 20deg, transparent 0 12%, rgba(255, 255, 255, 0.1) 17%, transparent 24% 62%, rgba(255, 255, 255, 0.07) 68%, transparent 75%);
}

.home-bento__label {
    position: absolute;
    inset: 33%;
    border-radius: 50%;
    background: var(--brand-gradient);
}

.home-bento__label::after {
    content: "";
    position: absolute;
    inset: 44%;
    border-radius: 50%;
    background: var(--brand-ink);
}

/* Кнопки под дорожками — картинка, а не управление: только на месте,
   где плитка крупная. */
.home-bento__actions {
    display: none;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.home-bento__actions span {
    display: grid;
    flex: 1;
    place-items: center;
    min-height: 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--home-on-night);
}

@media (min-width: 40rem) {
    .home-bento__disc {
        display: block;
    }

    .home-bento__art {
        max-width: calc(100% - 9rem);
    }
}

@media (min-width: 60rem) {
    .home-bento__actions {
        display: flex;
    }

    .home-bento__track {
        padding: 0.875rem 1rem;
    }

    .home-bento__wave {
        height: 2.5rem;
    }

    .home-bento__wave i {
        width: 4px;
    }
}

/* --- Тарифы ---------------------------------------------------------------- */

.home-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.5rem;
    overflow: hidden;
    border: 1px solid var(--home-line);
    border-radius: var(--home-radius);
    background: var(--home-surface);
    transition: transform 0.4s var(--home-ease), box-shadow 0.4s var(--home-ease);
}

.home-plan::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--brand-gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--home-ease);
}

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

.home-plan:hover::before {
    transform: none;
}

.home-plan__title {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 650;
    color: var(--color-text-muted);
}

.home-plan__price {
    margin: 0;
    font-size: clamp(2.25rem, 1.8rem + 1.2vw, 2.75rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.home-plan__credits {
    margin: 0.875rem 0 0;
    font-weight: 650;
}

.home-plan__unit {
    margin: 0.125rem 0 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--home-accent);
}

.home-more__button {
    border-radius: 14px;
}

/* --- «Примеры песен» ------------------------------------------------------- */

.examples__hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(2rem, 1rem + 3vw, 3rem);
    background: linear-gradient(180deg, var(--home-paper) 0%, var(--color-bg) 100%);
}

.examples__hero .home-orb--coral {
    top: -16rem;
    right: -10rem;
    z-index: -1;
    width: 32rem;
    height: 32rem;
}

.examples__hero .home-orb--coral::before {
    background: radial-gradient(closest-side, rgba(255, 122, 98, 0.3), rgba(255, 90, 78, 0));
}

.examples__title {
    margin: 0 0 1rem;
    font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.035em;
}

.examples__intro {
    max-width: 38rem;
    margin: 0;
    font-size: 1.125rem;
    color: var(--color-text-muted);
}

.examples__list {
    padding-block: 1rem clamp(3rem, 2rem + 4vw, 5rem);
}

/*
 * На телефоне «Примеры» — список, а не галерея: квадратная обложка во
 * всю ширину превращала бы два десятка песен в два десятка экранов.
 * Обложка уходит влево миниатюрой, название и плеер — справа от неё.
 */
@media (max-width: 34rem) {
    .examples .song-tiles {
        gap: 0.75rem;
    }

    .examples .song-tile {
        display: grid;
        grid-template-columns: 5.5rem minmax(0, 1fr);
        align-items: start;
    }

    .examples .song-tile__cover {
        margin: 0.75rem 0 0.75rem 0.75rem;
        border-radius: 12px;
    }

    .examples .song-tile__body {
        padding: 0.625rem 0.875rem 0.75rem;
    }

    .examples .song-tile__play {
        left: 50%;
        top: 50%;
        bottom: auto;
        width: 2.75rem;
        height: 2.75rem;
        margin: -1.375rem 0 0 -1.375rem;
    }

    .examples .song-tile__time,
    .examples .song-tile__eq {
        display: none;
    }

    /* В строке списка стиль — одной строкой. */
    .examples .song-tile__style {
        -webkit-line-clamp: 1;
    }

}

.examples__empty {
    display: grid;
    justify-items: start;
    gap: 1rem;
    max-width: 36rem;
    padding: 2rem;
    border: 1px dashed var(--home-line-strong);
    border-radius: var(--home-radius);
    background: var(--home-paper);
}

.examples__empty p {
    margin: 0;
}

.examples__cta {
    display: grid;
    gap: 1.25rem 2rem;
    align-items: center;
    margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    border-radius: 24px;
    background-color: var(--brand-ink);
    background-image: var(--home-night);
    color: var(--home-on-night);
}

@media (min-width: 48rem) {
    .examples__cta {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

.examples__cta-title {
    margin: 0 0 0.375rem;
    font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--home-on-night);
}

.examples__cta-text {
    margin: 0;
    color: var(--home-on-night-muted);
}

.examples__cta :focus-visible {
    outline-color: #ffffff;
}

/* ==========================================================================
   Движение того, что есть только здесь. Классы ставит home.js.
   ========================================================================== */

/* Экраны мастера: элементы появляются по очереди, как при заполнении. */
.hp-motion .home-wizard[data-state="1"] [data-screen="1"] .home-chip,
.hp-motion .home-wizard[data-state="3"] [data-screen="3"] .home-chip {
    animation: home-pop 0.45s var(--home-ease) backwards;
}

.hp-motion .home-wizard [data-screen] .home-chip:nth-child(2) { animation-delay: 0.05s; }
.hp-motion .home-wizard [data-screen] .home-chip:nth-child(3) { animation-delay: 0.1s; }
.hp-motion .home-wizard [data-screen] .home-chip:nth-child(4) { animation-delay: 0.15s; }
.hp-motion .home-wizard [data-screen] .home-chip:nth-child(5) { animation-delay: 0.2s; }
.hp-motion .home-wizard [data-screen] .home-chip:nth-child(6) { animation-delay: 0.25s; }
.hp-motion .home-wizard [data-screen] .home-chip:nth-child(7) { animation-delay: 0.3s; }

.hp-motion .home-wizard[data-state="1"] .home-chip--on,
.hp-motion .home-wizard[data-state="3"] .home-chip--on {
    animation: home-pop 0.45s var(--home-ease) backwards, home-press 0.5s ease 0.7s;
}

.hp-motion .home-wizard[data-state="2"] .home-field__value::after {
    animation: home-uncover 0.9s var(--home-ease) backwards;
}

.hp-motion .home-wizard[data-state="2"] .home-field:nth-of-type(2) .home-field__value::after { animation-delay: 0.35s; }
.hp-motion .home-wizard[data-state="2"] .home-field:nth-of-type(3) .home-field__value::after { animation-delay: 0.7s; }

.hp-motion .home-wizard[data-state="4"] .home-quote__row,
.hp-motion .home-wizard[data-state="5"] .home-variant,
.hp-motion .home-wizard[data-state="5"] .home-wizard__actions {
    animation: home-rise 0.5s var(--home-ease) backwards;
}

.hp-motion .home-wizard[data-state="4"] .home-quote__row:nth-child(2),
.hp-motion .home-wizard[data-state="5"] .home-variant:nth-of-type(2) { animation-delay: 0.1s; }
.hp-motion .home-wizard[data-state="4"] .home-quote__row:nth-child(3),
.hp-motion .home-wizard[data-state="5"] .home-wizard__actions { animation-delay: 0.2s; }

.hp-motion .home-wizard[data-state="5"] .home-wizard__check {
    animation: home-pop 0.5s var(--home-ease) backwards;
}

.hp-loop .home-hero.is-live .home-float__inner {
    animation: home-bob 5s ease-in-out infinite;
}

.hp-loop .home-hero.is-live .home-float--music .home-float__inner { animation-delay: -1.7s; }
.hp-loop .home-hero.is-live .home-float--voice .home-float__inner { animation-delay: -3.1s; }

.hp-loop .home-hero.is-live .home-mock[data-state="typing"] .home-mock__caret {
    animation: home-blink 1s steps(2, start) infinite;
}

.hp-loop .home-hero.is-live .home-mock:not([data-state]) .home-mock__eq i,
.hp-loop .home-hero.is-live .home-mock[data-state="ready"] .home-mock__eq i {
    animation-name: home-eq;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.hp-loop .home-hero.is-live .home-mock:not([data-state]) .home-mock__cover svg,
.hp-loop .home-hero.is-live .home-mock[data-state="ready"] .home-mock__cover svg {
    animation: home-spin 14s linear infinite;
}

.hp-loop .home-how.is-live .home-variant__eq i {
    animation: home-eq 0.8s ease-in-out infinite alternate;
}

.hp-loop .home-how.is-live .home-wizard[data-state="4"] .home-wizard__button::after {
    animation: home-ping-soft 1.8s ease-out 0.6s infinite;
}

.hp-loop .home-ticker.is-live .home-ticker__track {
    animation: home-marquee 52s linear infinite;
}

.hp-loop .home-ticker.is-live .home-ticker__row--reverse .home-ticker__track {
    animation-duration: 64s;
    animation-direction: reverse;
}

/* Навели мышь — строка замирает, её можно дочитать. */
.home-ticker:hover .home-ticker__track {
    animation-play-state: paused;
}

/* Плитка «Два варианта»: первая дорожка играет, пластинка крутится. */
.hp-loop .home-bento.is-live .home-bento__track:first-child .home-bento__wave i {
    animation-name: home-wave;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.home-bento__wave i {
    animation-duration: 1.2s;
}

.hp-loop .home-bento.is-live .home-bento__label {
    animation: home-spin 6s linear infinite;
}

@keyframes home-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.94); }
    to { opacity: 1; transform: none; }
}

@keyframes home-press {
    50% { transform: scale(0.94); }
}

@keyframes home-uncover {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@keyframes home-ping-soft {
    0% { opacity: 0.7; transform: scale(1); }
    70%, 100% { opacity: 0; transform: scale(1.08, 1.35); }
}

@keyframes home-bob {
    0%, 100% { transform: translateY(-5px); }
    50% { transform: translateY(5px); }
}

@keyframes home-blink {
    to { opacity: 0; }
}

@keyframes home-spin {
    to { transform: rotate(360deg); }
}

@keyframes home-marquee {
    to { transform: translateX(calc(-100% / var(--copies))); }
}

/* --- Тёмная тема: то, что не решают токены --------------------------------- */

@media (prefers-color-scheme: dark) {
    :where(:root:not([data-theme="light"])) .home-bento__item { --tile-ink: #ff8a7a; }
    :where(:root:not([data-theme="light"])) .home-bento__item--violet { --tile-ink: var(--home-accent); }
    :where(:root:not([data-theme="light"])) .home-bento__item--sun { --tile-ink: #f2c14e; }
    :where(:root:not([data-theme="light"])) .home-bento__item--pink { --tile-ink: #ff8fb1; }
    :where(:root:not([data-theme="light"])) .home-bento__item--mint { --tile-ink: var(--color-success); }
}

/* То же для тёмной темы, выбранной переключателем в шапке. */
:where(:root[data-theme="dark"]) .home-bento__item { --tile-ink: #ff8a7a; }
:where(:root[data-theme="dark"]) .home-bento__item--violet { --tile-ink: var(--home-accent); }
:where(:root[data-theme="dark"]) .home-bento__item--sun { --tile-ink: #f2c14e; }
:where(:root[data-theme="dark"]) .home-bento__item--pink { --tile-ink: #ff8fb1; }
:where(:root[data-theme="dark"]) .home-bento__item--mint { --tile-ink: var(--color-success); }

/* --- Просьба не двигать интерфейс (§18) ------------------------------------ */

/* Общая страховка — в showcase.css; здесь подъём и повороты того, что
   есть только на главной. */
@media (prefers-reduced-motion: reduce) {
    .home-plan:hover,
    .home-bento__item:hover,
    .home-bento__item:hover .home-bento__icon,
    .home-how__button:hover svg {
        transform: none;
    }
}