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

/* ---- Карточки возможностей (перенесено из Home/Index inline) ---- */
.feature-icon {
    display: inline-block;
}

/* ---- Hero-подложка лендингов ---- */
.seo-hero {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.06), rgba(32, 201, 151, 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);
}

.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;
}

/* ---- Таблицы-сравнения ---- */
.compare-table th,
.compare-table td {
    vertical-align: middle;
}

/* выделяем колонку «ПортфельПро» */
.compare-table .col-us {
    background: rgba(13, 110, 253, 0.06);
    font-weight: 500;
}

.compare-table thead .col-us {
    background: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
}

.compare-yes { color: #198754; font-weight: 600; }
.compare-no  { color: #adb5bd; }

/* ---- Тело статьи блога ---- */
.blog-body h2 {
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}

.blog-body p {
    margin-bottom: 1rem;
}