/* ==========================================================================
   AX Theme — дизайн-система (перекрывающий слой)

   Палитра из css/style.css (:root): --bg-primary #191919, --bg-secondary
   #222222, --accent #baa98f, --text-primary/secondary, --white-10 и т.д.

   Hero (.layers) не трогаем — см. комментарий ниже.
   ========================================================================== */

:root {
    --ax-1: 4px;
    --ax-2: 8px;
    --ax-3: 12px;
    --ax-4: 16px;
    --ax-5: 24px;
    --ax-6: 32px;
    --ax-7: 48px;
    --ax-8: 64px;
    --ax-9: 96px;

    --ax-t-xs: 13px;
    --ax-t-sm: 15px;
    --ax-t-md: 17px;
    --ax-t-lg: 22px;
    --ax-t-xl: 32px;

    --ax-radius: 6px;
    --ax-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Кнопки ---------- */

.ax-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ax-2);
    min-height: 52px;
    padding: 0 var(--ax-6);
    border: 1px solid transparent;
    border-radius: var(--ax-radius);
    font-family: 'Libre Franklin', sans-serif;
    font-size: var(--ax-t-sm);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s var(--ax-ease),
                color .2s var(--ax-ease),
                border-color .2s var(--ax-ease);
}

.ax-btn:hover { text-decoration: none; }

.ax-btn--primary { background: var(--accent); color: #141414; }
.ax-btn--primary:hover,
.ax-btn--primary:focus { background: var(--accent-light); color: #141414; }

.ax-btn--ghost {
    background: transparent;
    border-color: var(--white-20);
    color: var(--text-primary);
}
.ax-btn--ghost:hover,
.ax-btn--ghost:focus { border-color: var(--accent); color: var(--accent); }

.ax-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Hero ----------
   Не трогаем: сцена .layers остаётся на родных правилах из mainpage.css.
   Любая правка inset/height у слоёв ломает перекрытие экрана. */

/* ---------- Блок «Нагрузка» ---------- */

/* Фон не задаём: секция живёт на фоне body, как соседние .why-section
   и .catalog-section, поэтому нет резкого перехода по цвету. */
.ax-money-section {
    padding: 140px 0;
    border-top: 1px solid rgba(255, 255, 255, .03);
}

/* Полосы сравнения: без экзоскелета / с ним.
   Ширина задаётся переменной --ax-bar, анимация — при попадании в экран. */
.ax-bars {
    max-width: 860px;
    margin: var(--ax-7) auto 0;
}

.ax-bar {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr) 64px;
    align-items: center;
    gap: var(--ax-4);
    margin-bottom: var(--ax-4);
}

.ax-bar__label {
    font-size: var(--ax-t-sm);
    color: var(--text-secondary);
}

.ax-bar__track {
    height: 26px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .05);
    overflow: hidden;
}

.ax-bar__fill {
    height: 100%;
    width: 0;
    border-radius: 3px;
    transition: width 1s var(--ax-ease);
}

.ax-bar__fill--base { background: #4a4a4a; }
.ax-bar__fill--accent { background: var(--accent); }

/* ширина полосы появляется, когда блок в кадре */
.ax-bars.is-inview .ax-bar__fill {
    width: calc(var(--ax-bar) * 1%);
}

.ax-bar__value {
    font-family: 'nasalization', sans-serif;
    font-size: var(--ax-t-md);
    line-height: 1;
    text-align: right;
    color: var(--text-primary);
}

.ax-bar__delta {
    margin-top: var(--ax-5);
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--ax-t-xs);
    letter-spacing: .02em;
    color: var(--accent);
}

/* цифры под полосами */
.ax-money-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ax-6);
    max-width: 860px;
    margin: var(--ax-7) auto 0;
    padding-top: var(--ax-5);
    border-top: 1px solid var(--white-10);
}

.ax-money-stat b {
    display: block;
    margin-bottom: var(--ax-2);
    font-family: 'nasalization', sans-serif;
    font-size: var(--ax-t-lg);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text-primary);
}

.ax-money-stat span {
    display: block;
    font-size: var(--ax-t-xs);
    line-height: 1.45;
    color: var(--text-secondary);
}

@media (max-width: 767.98px) {
    .ax-money-section { padding: 80px 0; }

    .ax-bars { margin-top: var(--ax-6); }

    .ax-bar {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "label value"
            "track track";
        row-gap: var(--ax-2);
        margin-bottom: var(--ax-5);
    }

    .ax-bar__label { grid-area: label; font-size: var(--ax-t-xs); }
    .ax-bar__value { grid-area: value; font-size: var(--ax-t-sm); }
    .ax-bar__track { grid-area: track; height: 22px; }

    .ax-money-stats {
        grid-template-columns: 1fr;
        gap: var(--ax-4);
        margin-top: var(--ax-6);
    }

    .ax-money-stat b { font-size: var(--ax-t-md); }
}

/* ---------- Доступность ---------- */

@media (prefers-reduced-motion: reduce) {
    .ax-btn { transition: none; }
    .ax-bar__fill { transition: none; }
}