/* Дизайн-слой для публичных/SEO-страниц TrackMoney.
   Bootstrap 5 + инлайн-SVG-иконки. Подключается глобально из _Layout. */

/* ---- Hero-подложка лендингов ---- */
.seo-hero {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.06), rgba(25, 135, 84, 0.06));
    border: 1px solid rgba(13, 110, 253, 0.08);
    border-radius: 1.25rem;
    padding: 2.5rem;
}

@media (max-width: 575.98px) {
    .seo-hero {
        padding: 1.5rem;
    }
}

/* ---- Аптрейс-бейдж над заголовком ---- */
.seo-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0d6efd;
    background: rgba(13, 110, 253, 0.1);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    margin-bottom: 0.9rem;
}

/* ---- Кружок-подложка под иконку возможности ---- */
.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(13, 110, 253, 0.1);
    font-size: 1.4rem;
}

.icon-circle.icon-success { background: rgba(25, 135, 84, 0.1); }
.icon-circle.icon-info    { background: rgba(13, 202, 240, 0.12); }
.icon-circle.icon-warning { background: rgba(255, 193, 7, 0.15); }
.icon-circle.icon-danger  { background: rgba(220, 53, 69, 0.1); }

/* ---- Нумерованные шаги «как это работает» ---- */
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: #0d6efd;
    color: #fff;
    font-weight: 600;
}

/* ---- Логотип в hero главной ---- */
.brand-logo {
    width: 88px;
    height: 88px;
    border-radius: 22px;
    box-shadow: 0 6px 20px rgba(13, 110, 253, 0.25);
}