/* ===========================================================================
   Equism — главная страница
   ---------------------------------------------------------------------------
   Герой, полоса статистики, плитки категорий, шаги, преимущества, призыв.

   Страница построена как чередование залов: тёмный герой и статистика →
   светлый каталог (категории, лошади, амуниция) → тёмная полоса «как это
   работает» → светлые преимущества → тёмный призыв → тёмный подвал.

   Тёмные блоки помечены классом .hm-dark, поэтому вложенные компоненты
   (чипы, карточки, заголовки секций) перекрашиваются сами — см. блок
   «ТЁМНАЯ ЗОНА» в hm-base.css.
   =========================================================================== */

/* ===========================================================================
   ГЕРОЙ
   ---------------------------------------------------------------------------
   Четыре слоя, снизу вверх:
     1. диагональная штриховка — даёт фактуру, чтобы большой тёмный блок не
        читался как плоская заливка;
     2. тёплое бронзовое свечение справа, под силуэтом лошади;
     3. холодная подсветка слева — от неё зелёный не уходит в грязь;
     4. базовый градиент ночного тона.
   =========================================================================== */

.hm-hero {
    position: relative;
    overflow: hidden;
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(244, 241, 234, 0.016) 0 1px,
            transparent 1px 7px
        ),
        radial-gradient(ellipse 58% 72% at 76% 32%,
            rgba(217, 179, 137, 0.16) 0%, transparent 66%),
        radial-gradient(ellipse 70% 60% at 8% 8%,
            rgba(44, 79, 62, 0.55) 0%, transparent 70%),
        linear-gradient(168deg,
            var(--hm-night-2) 0%, var(--hm-night) 58%, #0B120F 100%);
}

/* Бронзовая нить по нижнему канту — стык с светлым каталогом */
.hm-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(
        90deg, transparent, var(--hm-bronze) 25%, var(--hm-bronze) 75%, transparent
    );
    opacity: 0.6;
    z-index: 3;
    pointer-events: none;
}

.hm-hero__inner {
    position: relative;
    z-index: 2;
    /* Сверху добавлено на высоту липкой шапки: она полупрозрачная и
       лежит поверх героя, иначе надзаголовок уезжает под неё. */
    padding: calc(var(--hm-sp-9) + var(--hm-header-h)) var(--hm-sp-4) var(--hm-sp-8);
    max-width: 880px;
    margin-inline: auto;
    text-align: center;
}

/* Линейный силуэт лошади: декор, слегка отзывается на курсор (hm-ui.js).
   SVG встроен в разметку, а не подключён через <img>: только так штрихи
   наследуют currentColor и работает прорисовка линии на загрузке. */
.hm-hero__art {
    position: absolute;
    top: 50%;
    right: 3%;
    translate: 0 -52%;
    width: 440px;
    max-width: 38vw;
    z-index: 1;
    color: var(--hm-bronze-light);
    /* Не opacity, а переменная: до неё доводит анимация проявления
       (hmArtIn в hm-animations.css). Прямой opacity анимация бы затёрла. */
    --hm-art-o: 0.42;
    pointer-events: none;
}

.hm-hero__art svg {
    display: block;
    width: 100%;
    height: auto;
    /* Мягкое свечение линий — силуэт выглядит подсвеченным, а не наклеенным */
    filter: drop-shadow(0 0 22px rgba(217, 179, 137, 0.22));
}

.hm-hero__title {
    font-family: var(--hm-display);
    font-size: var(--hm-fs-hero);
    /* 400, а не 700: в этом кегле светлый штрих Old Standard TT читается
       как книжный титульный лист, а 700 выглядит грубо. */
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: var(--hm-ls-display);
    color: var(--hm-on-dark);
    margin: var(--hm-sp-5) 0 0;
}

/* Строки заголовка — блоками, чтобы перелом был там, где задуман */
.hm-hero__line {
    display: block;
}

/* Курсив плюс бронза: главный винтажный акцент первого экрана */
.hm-hero__title em {
    font-style: italic;
    font-weight: 400;
    color: var(--hm-bronze-light);
}

.hm-hero .hm-eyebrow {
    color: var(--hm-bronze-light);
}

.hm-hero .hm-rule {
    margin: var(--hm-sp-5) auto var(--hm-sp-4);
    width: 56px;
    background: var(--hm-bronze-light);
}

.hm-hero__sub {
    font-size: var(--hm-fs-lead);
    line-height: 1.65;
    color: var(--hm-on-dark-muted);
    max-width: 46ch;
    margin: 0 auto var(--hm-sp-6);
}

/* --- Поиск --- */

/* Поле оставлено СВЕТЛЫМ на тёмном герое намеренно: это единственный
   элемент первого экрана, с которым нужно взаимодействовать, и светлое
   пятно на ночном фоне работает лучше любой подсветки. */
.hm-hero__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--hm-sp-2);
    background: #FFFFFF;
    border: 1px solid transparent;
    border-radius: var(--hm-r-lg);
    padding: 6px 6px 6px 46px;
    max-width: 640px;
    margin-inline: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
    transition: border-color var(--hm-t) var(--hm-ease),
        box-shadow var(--hm-t) var(--hm-ease);
}

.hm-hero__search:focus-within {
    border-color: var(--hm-bronze);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5),
        0 0 0 4px rgba(217, 179, 137, 0.22);
}

.hm-hero__search > i {
    position: absolute;
    left: 17px;
    color: #5C6360;
    font-size: 0.95rem;
    pointer-events: none;
}

.hm-hero__search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: none;
    font-family: var(--hm-sans);
    font-size: var(--hm-fs-body);
    /* Литералы, а не токены: поле светлое внутри тёмной зоны, где
       --hm-text уже означает светлую кость. */
    color: #1C2420;
    padding: 12px 4px;
}

.hm-hero__search input::placeholder {
    color: #6B7269;
}

/* Кнопка в поле — зелёная, как на светлых страницах: она лежит на светлом
   поле, а не на тёмном фоне, поэтому латунный вариант .hm-dark ей не нужен. */
.hm-dark .hm-hero__search .hm-btn--primary {
    background: var(--hm-green-deep);
    color: var(--hm-on-green);
    flex: 0 0 auto;
}

.hm-dark .hm-hero__search .hm-btn--primary:hover {
    background: #0F1F17;
    color: var(--hm-on-green);
}

.hm-hero__search .hm-btn {
    flex: 0 0 auto;
}

/* --- Чипы под поиском --- */

.hm-hero__inner .hm-chip-row {
    justify-content: center;
    margin-top: var(--hm-sp-5);
}

/* --- Полоса статистики --- */

/* Ещё на тон темнее героя: полоса работает как цокольный этаж и
   отделяет первый экран от светлого каталога. */
.hm-statbar {
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.26);
    border-top: 1px solid var(--hm-night-line);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.hm-statbar__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
}

.hm-stat {
    text-align: center;
    padding: var(--hm-sp-5) var(--hm-sp-2);
    border-left: 1px solid var(--hm-night-line);
}

.hm-stat:first-child {
    border-left: 0;
}

.hm-stat b {
    display: block;
    font-family: var(--hm-display);
    font-size: 2.3rem;
    font-weight: 400;
    line-height: 1.1;
    color: var(--hm-bronze-light);
    letter-spacing: -0.01em;
    font-variant-numeric: lining-nums tabular-nums;
    margin: 0;
}

.hm-stat span {
    display: block;
    font-family: var(--hm-sans);
    font-size: var(--hm-fs-label);
    font-weight: 500;
    letter-spacing: var(--hm-ls-caps);
    text-transform: uppercase;
    color: var(--hm-on-dark-muted);
    margin-top: 5px;
}

@media (max-width: 900px) {
    .hm-hero__inner {
        padding: var(--hm-sp-8) var(--hm-sp-4) var(--hm-sp-6);
    }

    /* Силуэт уходит за правый край и работает уже как фактура фона, а не
       как самостоятельная иллюстрация. */
    .hm-hero__art {
        --hm-art-o: 0.2;
        right: -12%;
        max-width: 68vw;
    }
}

@media (max-width: 576px) {
    .hm-hero__search {
        flex-wrap: wrap;
        padding: 6px;
    }

    .hm-hero__search > i {
        display: none;
    }

    .hm-hero__search input {
        flex: 1 0 100%;
        padding: 10px 12px;
    }

    .hm-hero__search .hm-btn {
        width: 100%;
    }

    .hm-statbar__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hm-stat:nth-child(3) {
        border-left: 0;
    }

    .hm-stat:nth-child(n + 3) {
        border-top: 1px solid var(--hm-night-line);
    }

    .hm-stat b {
        font-size: 1.85rem;
    }
}

/* ===========================================================================
   ПЛИТКИ КАТЕГОРИЙ
   =========================================================================== */

.hm-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--hm-sp-3);
}

.hm-cat {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--hm-sp-4);
    background: var(--hm-surface);
    border: 1px solid var(--hm-border);
    border-radius: var(--hm-r-lg);
    padding: var(--hm-sp-5);
    text-decoration: none;
    overflow: hidden;
    transition: transform var(--hm-t-slow) var(--hm-ease),
        box-shadow var(--hm-t-slow) var(--hm-ease),
        border-color var(--hm-t-slow) var(--hm-ease);
}

/* Бронзовая линия, прочерчивающаяся по левому краю */
.hm-cat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--hm-bronze);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--hm-t-slow) var(--hm-ease);
}

.hm-cat:hover {
    transform: translateY(-2px);
    box-shadow: var(--hm-sh-lg);
    border-color: var(--hm-bronze-line);
}

.hm-cat:hover::before {
    transform: scaleY(1);
}

.hm-cat__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--hm-r);
    background: var(--hm-green-soft);
    color: var(--hm-green);
    font-size: 1.12rem;
    transition: background var(--hm-t-slow) var(--hm-ease),
        color var(--hm-t-slow) var(--hm-ease);
}

.hm-cat:hover .hm-cat__icon {
    background: var(--hm-green);
    color: var(--hm-bronze-light);
}

.hm-cat__body {
    flex: 1;
    min-width: 0;
}

.hm-cat__body strong {
    display: block;
    font-family: var(--hm-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--hm-text-strong);
    line-height: 1.25;
    margin-bottom: 3px;
}

.hm-cat__body span {
    display: block;
    font-family: var(--hm-sans);
    font-size: var(--hm-fs-xs);
    line-height: 1.5;
    color: var(--hm-muted);
}

.hm-cat__count {
    flex: 0 0 auto;
    align-self: center;
    font-family: var(--hm-sans);
    font-size: var(--hm-fs-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--hm-muted);
    background: var(--hm-ivory-2);
    border: 1px solid var(--hm-border);
    border-radius: var(--hm-r-pill);
    padding: 3px 11px;
}

/* Ведущая плитка — тёмно-зелёная, на всю ширину */
.hm-cat--lead {
    grid-column: span 3;
    align-items: center;
    background: linear-gradient(104deg, var(--hm-green-deep) 0%, var(--hm-green) 68%, var(--hm-green-mid) 100%);
    border-color: transparent;
    padding: var(--hm-sp-5) var(--hm-sp-5);
}

.hm-cat--lead .hm-cat__icon {
    width: 58px;
    height: 58px;
    font-size: 1.5rem;
    background: rgba(217, 179, 137, 0.16);
    color: var(--hm-bronze-light);
}

.hm-cat--lead:hover .hm-cat__icon {
    background: var(--hm-bronze-light);
    color: var(--hm-green-deep);
}

.hm-cat--lead .hm-cat__body strong {
    color: #fff;
    font-size: 1.5rem;
}

.hm-cat--lead .hm-cat__body span {
    color: var(--hm-on-green-muted);
    font-size: var(--hm-fs-sm);
}

.hm-cat--lead .hm-cat__count {
    background: var(--hm-bronze-light);
    border-color: transparent;
    color: var(--hm-green-deep);
}

.hm-cat--lead::before {
    background: var(--hm-bronze-light);
}

@media (max-width: 900px) {
    .hm-cat-grid { grid-template-columns: repeat(2, 1fr); }
    .hm-cat--lead { grid-column: span 2; }
}

@media (max-width: 576px) {
    .hm-cat-grid { grid-template-columns: 1fr; }
    .hm-cat--lead { grid-column: span 1; }
    .hm-cat--lead .hm-cat__body strong { font-size: 1.25rem; }
    .hm-cat { padding: var(--hm-sp-4); gap: var(--hm-sp-3); }
    .hm-cat__icon { width: 40px; height: 40px; font-size: 1rem; }
    .hm-cat--lead .hm-cat__icon { width: 46px; height: 46px; font-size: 1.2rem; }
}

/* ===========================================================================
   ШАГИ «КАК ЭТО РАБОТАЕТ»
   =========================================================================== */

.hm-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--hm-sp-6);
}

.hm-step {
    position: relative;
    padding-top: var(--hm-sp-5);
    border-top: 1px solid var(--hm-bronze-line);
}

/* Латунный медальон с номером — набор цифры книжной гарнитурой */
.hm-step__num {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--hm-bronze-soft);
    border: 1px solid var(--hm-bronze-line);
    color: var(--hm-bronze-light);
    font-family: var(--hm-display);
    font-size: 1.15rem;
    font-weight: 400;
    font-variant-numeric: lining-nums;
    margin-bottom: var(--hm-sp-4);
}

.hm-step h3 {
    font-size: 1.22rem;
    margin-bottom: var(--hm-sp-2);
}

.hm-step p {
    font-size: var(--hm-fs-sm);
    line-height: 1.65;
    color: var(--hm-muted);
    margin: 0;
}

@media (max-width: 768px) {
    .hm-steps {
        grid-template-columns: 1fr;
        gap: var(--hm-sp-5);
    }
}

/* ===========================================================================
   ПРЕИМУЩЕСТВА
   =========================================================================== */

.hm-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--hm-sp-4);
}

.hm-why {
    background: var(--hm-surface);
    border: 1px solid var(--hm-border);
    border-radius: var(--hm-r-lg);
    padding: var(--hm-sp-5);
    transition: transform var(--hm-t-slow) var(--hm-ease),
        box-shadow var(--hm-t-slow) var(--hm-ease),
        border-color var(--hm-t-slow) var(--hm-ease);
}

.hm-why:hover {
    transform: translateY(-2px);
    box-shadow: var(--hm-sh);
    border-color: var(--hm-bronze-line);
}

.hm-why > i {
    display: block;
    font-size: 1.3rem;
    color: var(--hm-bronze);
    margin-bottom: var(--hm-sp-3);
}

.hm-why h3 {
    font-size: 1.05rem;
    margin-bottom: var(--hm-sp-2);
}

.hm-why p {
    font-size: var(--hm-fs-xs);
    line-height: 1.55;
    color: var(--hm-muted);
    margin: 0;
}

@media (max-width: 992px) {
    .hm-why-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .hm-why-grid { grid-template-columns: 1fr; }
}

/* ===========================================================================
   ПРИЗЫВ
   =========================================================================== */

.hm-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hm-sp-6);
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(244, 241, 234, 0.02) 0 1px,
            transparent 1px 8px
        ),
        radial-gradient(ellipse 60% 100% at 88% 50%,
            rgba(217, 179, 137, 0.18) 0%, transparent 68%),
        linear-gradient(104deg,
            var(--hm-night) 0%, var(--hm-night-2) 60%, var(--hm-green) 100%);
    border: 1px solid var(--hm-night-line-bronze);
    border-radius: var(--hm-r-xl);
    padding: var(--hm-sp-7) var(--hm-sp-6);
    overflow: hidden;
    position: relative;
}

/* Бронзовая нить по верхнему краю */
.hm-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--hm-bronze-light), transparent);
}

.hm-cta__text {
    min-width: 0;
}

.hm-cta .hm-eyebrow {
    color: var(--hm-bronze-light);
    margin-bottom: var(--hm-sp-3);
}

.hm-cta h2 {
    color: #fff;
    font-size: var(--hm-fs-h2);
    line-height: 1.15;
    margin-bottom: var(--hm-sp-3);
}

.hm-cta p {
    font-size: var(--hm-fs-sm);
    line-height: 1.65;
    color: var(--hm-on-dark-muted);
    max-width: 52ch;
    margin: 0;
}

.hm-cta .hm-btn {
    flex: 0 0 auto;
}

@media (max-width: 768px) {
    .hm-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--hm-sp-5);
    }

    .hm-cta .hm-btn {
        width: 100%;
    }
}