/* Astra Child – стили главной страницы (is_front_page)
   Hero, Features, Steps, Pricing, Proof, FAQ, Examples, Reviews,
   Steps Timeline, Security, SEO 3col, CTA, SEO Text, Services, Services V2,
   Калькулятор, Эксперты EEAT */

/* =============================================================================
   1. Hero Section V2 (контент + визуал + горизонтальная форма)
   Density: компактная левая колонка + картинка ~½ на desktop (см. COMPONENTS.md §3)
   ============================================================================= */
.hero-section {
    background: var(--gradient-hero);
    padding: var(--spacing-hero-top, 20px) 0 var(--spacing-hero-bottom, 48px);
    overflow: hidden;
    position: relative;
}

/*
 * Mobile-first stack: intro → visual → body (DOM order).
 * Desktop ≥922: CSS grid – text left (intro+body), photo right.
 */
.hero-flex {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 12px;
    margin-bottom: 16px;
}

.hero-content {
    min-width: 0;
    width: 100%;
}

.hero-content--intro .hero-tagline {
    margin-bottom: 0;
}

.hero-visual {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
}

/* Бейдж – компактный pill */
.hero-highlight {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0f8ff;
    color: var(--ast-global-color-2);
    padding: 5px 10px;
    border-radius: var(--radius-full);
    font-size: var(--fs-badge, 0.625rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 10px;
    border: 1px solid rgba(37, 99, 235, 0.15);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    max-width: 100%;
}

.hero-highlight-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
    flex-shrink: 0;
    animation: hero-dot-pulse 2s ease-in-out infinite;
}

@keyframes hero-dot-pulse {
    0%, 100% { opacity: 0.6; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1); }
}

.hero-title {
    font-size: var(--fs-h1);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: var(--ast-global-color-2);
    margin-bottom: 10px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    min-width: 0;
    max-width: 100%;
}
.hero-title__accent {
    color: var(--color-primary);
}

.hero-tagline {
    font-size: var(--fs-lead, 1.0625rem);
    font-weight: 600;
    color: var(--color-text-body);
    line-height: 1.35;
    margin-bottom: 8px;
}

.hero-tagline .text-highlight {
    color: var(--color-primary);
}

.hero-subtitle {
    font-size: var(--fs-body, 0.9375rem);
    color: var(--color-text-body);
    line-height: 1.5;
    margin-bottom: 0;
}

/* Чек-лист преимуществ в hero (главная) */
.hero-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 36em;
}

.hero-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.hero-checklist__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-checklist__icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.hero-checklist__text {
    font-size: var(--fs-body, 0.9375rem);
    line-height: 1.4;
    color: var(--color-text-body);
    font-weight: 500;
}

/* Описание hero + «Читать далее» */
.hero-desc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 16px;
    max-width: 40em;
}

.hero-desc .js-read-more__body {
    position: relative;
    min-height: 0;
}

.hero-desc.is-collapsed .js-read-more__body {
    overflow: hidden;
}

.hero-desc.is-collapsed .js-read-more__body::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 36px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(240, 247, 255, 0.95) 90%);
    pointer-events: none;
}

/* На градиентном hero – мягкий fade в цвет фона секции */
.hero-section .hero-desc.is-collapsed .js-read-more__body::after {
    background: linear-gradient(to bottom, rgba(248, 250, 255, 0), #f3f8ff 92%);
}

.hero-desc .ps-read-more,
.hero-desc .seo-intro-more {
    margin-top: 6px;
}

.hero-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* Первая строка: кнопка + trust */
.hero-actions__row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.hero-trust {
    font-size: var(--fs-sm, 0.8125rem);
    color: var(--color-text-muted);
    line-height: 1.35;
}

/* Промо-pill – компактнее */
.hero-promo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    background: var(--color-white);
    padding: 8px 12px;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.06);
    align-self: flex-start;
}

.hero-promo__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hero-promo__icon svg {
    width: 14px;
    height: 14px;
}

.hero-promo__text {
    font-size: var(--fs-sm, 0.8125rem);
    color: var(--color-text-body);
    line-height: 1.3;
}

.hero-promo__highlight {
    color: var(--color-primary);
    font-weight: 700;
}

/* Визуал и баджи (mobile: center; desktop: ~½ ширины) */
.hero-visual {
    display: flex;
    justify-content: center;
}

.hero-image-box {
    position: relative;
    width: 100%;
    max-width: 520px;
    overflow: visible;
    border-radius: var(--radius-xl);
}

.hero-main-img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    border-radius: var(--radius-xl);
    filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.1));
}

.floating-badge {
    position: absolute;
    background: var(--color-white);
    padding: 8px 12px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 5;
}

.floating-badge__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.floating-badge__icon svg {
    width: 16px;
    height: 16px;
}

.floating-badge__title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ast-global-color-2);
    line-height: 1.2;
    display: block;
}

.floating-badge__desc {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.2;
    display: block;
}

/* Бейджи внутри/на краю фото – не перекрывают текст слева */
.badge-top-left { top: 10%; left: 4%; }
.badge-mid-left { top: 48%; left: 4%; transform: none; }
.badge-bottom-right { top: auto; bottom: 10%; right: 4%; }

/* Список бейджей под картинкой – скрыт на десктопе, чипы на мобилке */
.hero-badges-list {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
 * ===== Hero MOBILE (≤921) =====
 * Цель: короткий above-the-fold, без «простыни» текста и квадрата 1:1.
 * Порядок DOM: H1 → badge → lead → body → CTA → фото → чипы → форма
 */
@media (max-width: 921px) {
    .hero-section {
        padding: 12px 0 28px;
    }

    .hero-flex {
        gap: 12px;
        margin-bottom: 12px;
        align-items: stretch;
        text-align: left;
    }

    .hero-content {
        width: 100%;
        text-align: left;
        /* Чуть уводим текст от float email/TG справа */
        padding-right: 4px;
        max-width: calc(100% - 4px);
    }

    /* Типографика: плотнее, длинные H1 услуг не раздувают экран */
    .hero-title {
        font-size: 1.375rem; /* ~22px */
        line-height: 1.2;
        letter-spacing: -0.025em;
        margin-bottom: 8px;
        text-align: left;
    }

    .hero-highlight {
        margin-bottom: 8px;
        padding: 4px 10px;
        font-size: 0.625rem;
        /* pill слева, не по центру */
        align-self: flex-start;
    }

    .hero-content--intro {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-tagline {
        font-size: 0.9375rem;
        line-height: 1.35;
        margin-bottom: 6px;
        font-weight: 600;
        text-align: left;
    }

    .hero-subtitle {
        font-size: 0.875rem;
        line-height: 1.45;
        color: var(--color-text-muted, #64748b);
        text-align: left;
    }

    .hero-content--body {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        /* Чек-лист и кнопки – не впритык */
        gap: 16px;
    }

    .hero-checklist {
        gap: 8px;
        max-width: none;
        margin: 0;
    }

    .hero-checklist__icon {
        width: 18px;
        height: 18px;
    }

    .hero-checklist__icon svg {
        width: 18px;
        height: 18px;
    }

    .hero-checklist__text {
        font-size: 0.8125rem;
        line-height: 1.35;
    }

    .hero-desc {
        width: 100%;
        max-width: none;
        align-items: flex-start;
        margin: 0 0 12px;
        text-align: left;
    }

    .hero-desc .ps-read-more {
        align-self: flex-start;
    }

    /* CTA: кнопка на всю ширину, trust под ней */
    .hero-actions {
        width: 100%;
        align-items: stretch;
        gap: 10px;
        margin-top: 0;
        padding-top: 4px;
    }

    .hero-actions__row {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 8px;
        width: 100%;
    }

    .hero-actions__row .ps-btn,
    .hero-actions__row .btn-primary-hero,
    .hero-actions .ps-btn,
    .hero-actions .btn-primary-hero {
        width: 100%;
        justify-content: center;
    }

    .hero-trust {
        font-size: 0.75rem;
        text-align: left;
        width: 100%;
    }

    .hero-promo {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        align-self: stretch;
        justify-content: flex-start;
        padding: 8px 12px;
        gap: 8px;
    }

    .hero-promo__text {
        font-size: 0.75rem;
        text-align: left;
    }

    /* Фото: не full-bleed square – компактный портрет по центру */
    .hero-visual {
        width: 100%;
        max-width: 100%;
        flex-direction: column;
        align-items: center;
        margin-top: 4px;
    }

    .hero-image-box {
        width: min(100%, 260px);
        max-width: 260px;
        aspect-ratio: 4 / 5;
        max-height: 240px;
        margin: 0 auto;
        overflow: hidden;
        border-radius: var(--radius-lg);
    }

    .hero-main-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }

    /* На мобилке floating badges скрыты – вместо них чипы */
    .hero-image-box .floating-badge {
        display: none;
    }

    /* 3 trust-чипа в ряд (или wrap) – не 3 высокие карточки */
    .hero-badges-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        margin-top: 10px;
        margin-bottom: 0;
        padding: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .hero-badges-list__item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: 1 1 auto;
        min-width: calc(50% - 6px);
        max-width: 100%;
        padding: 6px 8px;
        background: var(--color-white);
        border-radius: var(--radius-full);
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--color-border);
    }

    .hero-badges-list__icon {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-primary);
        background: var(--color-primary-bg);
        border-radius: 50%;
    }

    .hero-badges-list__icon svg {
        width: 12px;
        height: 12px;
    }

    .hero-badges-list__text {
        font-size: 0.6875rem;
        color: var(--color-text-body);
        line-height: 1.2;
        white-space: normal;
        text-align: left;
    }

    .hero-badges-list__text strong {
        color: var(--ast-global-color-2);
        font-weight: 700;
    }

    /* Форма под hero – плотнее */
    .hero-form-container {
        margin-top: 12px;
        padding: 14px 12px;
        border-radius: var(--radius-lg);
    }

    .hero-horizontal-form {
        gap: 10px;
    }

    .hero-form-container .form-group label {
        font-size: 0.6875rem;
        margin-bottom: 4px;
    }

    .hero-form-container .form-group input,
    .hero-form-container .form-group select,
    .hero-form-container .form-group .ps-select__trigger,
    .hero-form-container .form-group .ps-select__trigger:hover,
    .hero-form-container .form-group .ps-select__trigger:focus,
    .hero-form-container .form-group .ps-select__trigger:focus-visible,
    .hero-form-container .form-group .ps-select__trigger:active,
    .hero-form-container .form-group .ps-select.is-open .ps-select__trigger,
    .hero-form-container .btn-order.hero-form-submit {
        height: 46px;
        min-height: 46px;
        font-size: 0.875rem;
    }
}

/* Горизонтальная форма: mobile stack, desktop row */
.hero-form-container {
    background: var(--color-white);
    padding: 16px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    margin-top: 16px;
    z-index: 10;
    position: relative;
    overflow: visible;
}

.hero-horizontal-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: flex-end;
}

.hero-form-container .form-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-body);
    margin-bottom: 8px;
}

.hero-form-container .form-group input,
.hero-form-container .form-group select {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-light);
    font-size: 0.9375rem;
}

/* Кастомный select (ps-select) в hero-форме – высота/стиль как у input */
.hero-form-container .form-group .ps-select {
    width: 100%;
}

.hero-form-container .form-group .ps-select__trigger,
.hero-form-container .form-group .ps-select__trigger:hover,
.hero-form-container .form-group .ps-select__trigger:focus,
.hero-form-container .form-group .ps-select__trigger:focus-visible,
.hero-form-container .form-group .ps-select__trigger:active,
.hero-form-container .form-group .ps-select.is-open .ps-select__trigger {
    height: 52px;
    min-height: 52px;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    color: var(--color-text-dark, #1e293b);
}

.hero-form-container .form-group .ps-select.is-open .ps-select__trigger,
.hero-form-container .form-group .ps-select__trigger:hover,
.hero-form-container .form-group .ps-select__trigger:focus-visible {
    background: var(--color-white);
    color: var(--color-text-dark, #1e293b);
}

.hero-form-container .form-group--task .js-task-expand-input {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    background: var(--color-bg-light);
}

.hero-form-container .form-group--task .js-task-expand-input:hover,
.hero-form-container .form-group--task .js-task-expand-input:focus {
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    outline: none;
}

/* Синяя кнопка в форме под hero (переиспользуем .btn-order) */
.hero-form-container .btn-order.hero-form-submit {
    height: 52px;
    padding: 0 32px;
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9375rem;
}

/* Base stack: left-aligned (mobile + desktop) */
.hero-actions {
    align-items: flex-start;
}
.hero-actions__row {
    justify-content: flex-start;
}
.hero-desc {
    width: 100%;
    max-width: none;
    align-items: flex-start;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 14px;
    text-align: left;
}
.hero-trust {
    font-size: var(--fs-xs, 0.75rem);
}

/*
 * Hero desktop ≥922:
 * grid: intro+body слева, visual справа (~40% / max 420px)
 * Всё по верху (не center) – главная и услуги выглядят одинаково.
 */
@media (min-width: 922px) {
    .hero-flex {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
        grid-template-areas:
            "intro visual"
            "body visual";
        column-gap: 32px;
        /* Малый gap между intro и body – тексты читаются как один блок */
        row-gap: 10px;
        align-items: start;
        text-align: left;
        margin-bottom: 28px;
    }

    /*
     * Текстовый блок (H1 → badge → tagline → body) – один «пакет» сверху.
     * CTA отделён: margin-top: auto + min-height body, чтобы не лип к тексту
     * и не «плавал» по центру картинки.
     */
    .hero-content--intro {
        grid-area: intro;
        align-self: start;
        width: auto;
        max-width: none;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .hero-content--body {
        grid-area: body;
        align-self: start;
        width: auto;
        max-width: none;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        /* Чек-лист заполняет место; CTA всё ещё внизу колонки при коротком контенте */
        min-height: 220px;
    }

    .hero-checklist {
        gap: 10px;
    }

    .hero-checklist__text {
        font-size: 0.9375rem;
    }

    .hero-visual {
        grid-area: visual;
        width: 100%;
        max-width: 420px;
        margin-top: 0;
        justify-self: end;
        justify-content: flex-end;
        align-self: start;
    }

    .hero-image-box {
        width: 100%;
        max-width: 420px;
    }

    .hero-highlight {
        gap: 8px;
        padding: 6px 12px;
        margin-bottom: 0;
        letter-spacing: 0.03em;
    }

    .hero-title {
        margin-bottom: 0;
    }

    .hero-tagline {
        margin-bottom: 0;
    }

    .hero-desc {
        margin-bottom: 0;
    }

    /* CTA внизу body-колонки; тексты выше – плотно друг к другу */
    .hero-actions {
        align-items: flex-start;
        margin-top: auto;
        padding-top: 16px;
    }

    .hero-actions__row {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: auto;
    }

    .hero-actions__row .ps-btn,
    .hero-actions__row .btn-primary-hero,
    .hero-actions .ps-btn,
    .hero-actions .btn-primary-hero {
        width: auto;
    }

    .hero-desc {
        max-width: none;
        align-items: flex-start;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 16px;
        text-align: left;
    }

    .hero-promo {
        align-self: flex-start;
        width: auto;
        max-width: 100%;
        padding: 8px 14px;
    }

    .hero-trust {
        font-size: var(--fs-sm, 0.875rem);
        width: auto;
        text-align: left;
    }

    /* Форма hero – в одну строку, плотнее к hero */
    .hero-form-container {
        padding: 18px 22px;
        margin-top: -20px;
    }

    .hero-horizontal-form {
        grid-template-columns: 1fr 1fr 1fr auto;
        gap: 16px;
    }

    .hero-form-container .form-group input,
    .hero-form-container .form-group select,
    .hero-form-container .form-group .ps-select__trigger,
    .hero-form-container .form-group .ps-select__trigger:hover,
    .hero-form-container .form-group .ps-select__trigger:focus,
    .hero-form-container .form-group .ps-select__trigger:focus-visible,
    .hero-form-container .form-group .ps-select__trigger:active,
    .hero-form-container .form-group .ps-select.is-open .ps-select__trigger,
    .hero-form-container .btn-order.hero-form-submit {
        height: 48px;
        min-height: 48px;
    }
}

/* =============================================================================
   2. Advantages & Services Hub (Premium Design)
   ============================================================================= */

/* Advantages Section: Separate standout area */
.advantages-section {
    background: #f8fafc;
    padding: var(--spacing-section) 0 12px;
    position: relative;
}

/* Trust Belt – mobile-first compact list; desktop cards ≥922 */
.hub-trust-belt {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 0;
    padding: 0;
}

.hub-trust-item {
    background: var(--color-white);
    padding: 8px 12px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-md);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hub-trust-item:hover {
    background: var(--color-white);
    border-color: var(--color-border);
    transform: none;
    box-shadow: var(--shadow-md);
}

.hub-trust-item__icon-box {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.hub-trust-item__icon-box svg {
    width: 16px;
    height: 16px;
}

/* Colorful Icon Variants */
.hub-trust-item:nth-child(1) .hub-trust-item__icon-box { background: #ecfdf5; color: #10b981; }
.hub-trust-item:nth-child(2) .hub-trust-item__icon-box { background: #eff6ff; color: #2563eb; }
.hub-trust-item:nth-child(3) .hub-trust-item__icon-box { background: #f5f3ff; color: #7c3aed; }

.hub-trust-item:hover .hub-trust-item__icon-box {
    transform: none;
}

.hub-trust-item__text {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
    line-height: 1.25;
}

.hub-trust-item__text h4,
.hub-trust-item__text .hub-trust-item__title {
    font-size: 0.8125rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.25;
    display: inline;
    color: var(--ast-global-color-2);
}

.hub-trust-item__text p {
    font-size: 0.8125rem;
    line-height: 1.25;
    margin: 0;
    display: inline;
    color: var(--color-text-body);
}

/* Секция «Наши преимущества» – ширина только через .ast-container (единая сетка) */
.advantages-section {
    padding: var(--spacing-section) 0;
    background: var(--color-white);
}
.advantages-section .section-title {
    margin-bottom: 10px;
    text-align: center;
}
.advantages-section .section-subtitle {
    max-width: 560px;
    margin: 0 auto 16px;
    text-align: center;
    font-size: var(--fs-body, 0.9375rem);
    color: var(--color-text-body);
    line-height: 1.45;
}
.advantages-section .hub-trust-belt {
    margin-bottom: 0;
}

/* Desktop: large advantage cards */
@media (min-width: 922px) {
    .advantages-section {
        padding: var(--spacing-section) 0;
    }

    .advantages-section .section-subtitle {
        margin-bottom: 32px;
        font-size: 1rem;
        line-height: 1.5;
    }

    .hub-trust-belt {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-bottom: 0;
        padding: 0; /* без доп. inset – gutter уже у .ast-container */
    }

    .hub-trust-item {
        padding: 28px 32px;
        border-radius: 24px;
        gap: 20px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    }

    .hub-trust-item:hover {
        background: var(--color-primary-bg);
        border-color: var(--color-primary);
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(37, 99, 235, 0.1);
    }

    .hub-trust-item:hover .hub-trust-item__icon-box {
        transform: scale(1.1);
    }

    .hub-trust-item__icon-box {
        width: 60px;
        height: 60px;
        border-radius: 16px;
    }

    .hub-trust-item__icon-box svg {
        width: 28px;
        height: 28px;
    }

    .hub-trust-item__text {
        display: block;
        line-height: 1.4;
    }

    .hub-trust-item__text h4,
    .hub-trust-item__text .hub-trust-item__title {
        font-size: 1.15rem;
        font-weight: 800;
        margin-bottom: 4px;
        display: block;
    }

    .hub-trust-item__text p {
        font-size: 0.9rem;
        color: var(--color-text-muted);
        display: block;
        line-height: 1.45;
    }
}

/* =============================================================================
   SaaS pricing – «Цены на наши услуги» (4 тарифа)
   Mobile-first: 1 col → 2 col → 4 col (≥922)
   ============================================================================= */
.ps-pricing-section .section-subtitle {
    max-width: 36em;
    margin-left: auto;
    margin-right: auto;
}

.ps-pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    width: 100%;
    margin: 0;
    /* место под «Популярно», наполовину вылезающий вверх */
    padding-top: 14px;
    align-items: stretch;
    overflow: visible;
}

.ps-pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    min-width: 0;
    padding: 20px 18px 18px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl, 16px);
    box-shadow: var(--shadow-sm);
    color: var(--ast-global-color-2);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    overflow: visible;
}

.ps-pricing-card:hover {
    border-color: var(--color-primary-light, #93c5fd);
    box-shadow: var(--shadow-lg);
}

.ps-pricing-card--featured {
    border-color: var(--color-primary);
    box-shadow: 0 8px 28px rgba(37, 99, 235, 0.12);
    background: linear-gradient(180deg, #f8fbff 0%, #fff 42%);
    /* чуть больше padding сверху: бейдж сидит на бордере */
    padding-top: 24px;
}

.ps-pricing-card--featured:hover {
    box-shadow: 0 12px 32px rgba(37, 99, 235, 0.16);
}

/* Бейдж «Популярно»: ½ внутри карточки, ½ снаружи (на верхнем бордере) */
.ps-pricing-card__badge {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    background: var(--gradient-primary, var(--color-primary));
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28);
    pointer-events: none;
}

.ps-pricing-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    min-height: 44px;
}

.ps-pricing-card__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md, 10px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ps-pricing-card__icon svg {
    width: 22px;
    height: 22px;
}

.ps-pricing-card__icon--blue {
    background: var(--color-primary-bg, #eff6ff);
    color: var(--color-primary);
}

.ps-pricing-card__icon--green {
    background: var(--color-success-bg, #ecfdf5);
    color: var(--color-success, #10b981);
}

.ps-pricing-card__icon--purple {
    background: #f5f3ff;
    color: #7c3aed;
}

.ps-pricing-card__name {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--ast-global-color-2);
}

.ps-pricing-card__price-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 6px;
    margin-bottom: 6px;
}

.ps-pricing-card__price-prefix {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.ps-pricing-card__price {
    font-size: 1.625rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--color-primary);
}

.ps-pricing-card__price-suffix {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.ps-pricing-card__term {
    margin: 0 0 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    line-height: 1.35;
}

.ps-pricing-card__features {
    list-style: none;
    margin: 0 0 18px;
    padding: 14px 0 0;
    border-top: 1px solid var(--color-border);
    flex: 1 1 auto;
}

.ps-pricing-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ast-global-color-2);
}

.ps-pricing-card__features li:last-child {
    margin-bottom: 0;
}

.ps-pricing-card__check {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: var(--color-success, #10b981);
}

.ps-pricing-card__check svg {
    width: 14px;
    height: 14px;
}

.ps-pricing-card__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}

.ps-pricing-card__btn {
    width: 100%;
    justify-content: center;
    font-weight: 700;
}

.ps-pricing-card__more {
    display: block;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.ps-pricing-card__more:hover {
    color: var(--color-primary);
}

/* Trust-полоса под тарифами */
.ps-pricing-trust {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    padding: 16px 18px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl, 16px);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.ps-pricing-trust__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.35;
}

.ps-pricing-trust__list li strong {
    color: var(--ast-global-color-2);
    font-weight: 700;
}

.ps-pricing-trust__btn {
    font-weight: 700;
    white-space: nowrap;
}

@media (min-width: 922px) {
    .ps-pricing-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
        align-items: stretch;
    }

    .ps-pricing-card {
        padding: 22px 16px 16px;
    }

    .ps-pricing-card--featured {
        /* чуть «выступает» как у SaaS */
        transform: translateY(-4px);
        padding-top: 28px;
        padding-bottom: 18px;
    }

    /* transform на карточке не ломает центрирование бейджа */
    .ps-pricing-card--featured .ps-pricing-card__badge {
        transform: translate(-50%, -50%);
    }

    .ps-pricing-card__name {
        font-size: 1rem;
    }

    .ps-pricing-card__price {
        font-size: 1.5rem;
    }

    /* длинная «по договорённости» – чуть меньше */
    .ps-pricing-card__price {
        overflow-wrap: anywhere;
    }

    .ps-pricing-trust {
        flex-direction: row;
        justify-content: space-between;
        gap: 20px;
        margin-top: 24px;
        padding: 16px 22px;
        text-align: left;
    }

    .ps-pricing-trust__list {
        justify-content: flex-start;
        gap: 8px 20px;
        flex: 1 1 auto;
    }

    .ps-pricing-trust__btn {
        flex-shrink: 0;
    }
}

/* 2 колонки на «среднем» mobile-landscape / small tablet до 922 – через 1 col base ok;
   при желании плотнее: 2×2 уже с 560, но breakpoints только 922 – оставляем 1→4 */


/* =============================================================================
   3. Features Section
   ============================================================================= */
.features-section {
    background: var(--color-white);
    padding: var(--spacing-section) 20px;
}

.features-grid {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.feature-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-primary-bg);
    transform: translateY(-6px);
}

.feature-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
}

.feature-icon svg {
    width: 100%;
    height: 100%;
}

.feature-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--color-text-dark);
}

.feature-text {
    font-size: 0.9375rem;
    color: var(--color-text-body);
    margin: 0;
    line-height: 1.6;
}

/* Features: база = мобильные, 922px = десктоп */
.features-section {
    padding: 60px 16px;
}

.features-grid {
    grid-template-columns: 1fr;
    gap: 16px;
}

.feature-card {
    padding: 24px 20px;
}

@media (min-width: 922px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 922px) {
    .features-section {
        padding: var(--spacing-section) 20px;
    }
    .features-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
    .feature-card {
        padding: 32px 24px;
    }
}

/* =============================================================================
   4. Pricing Section – mobile-first
   ============================================================================= */
.pricing-section {
    background: var(--color-white);
    padding: var(--spacing-section) 16px;
}

.pricing-table-wrapper {
    max-width: 900px;
    margin: 0 -8px;
    padding: 0 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0;
}

.pricing-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    min-width: 520px;
}

.pricing-table thead {
    background: var(--gradient-primary);
    color: var(--color-white);
}

.pricing-table th {
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    font-size: var(--fs-sm, 0.8125rem);
}

.pricing-table tbody tr {
    border-bottom: 1px solid var(--color-border);
    transition: background 0.2s ease;
}

.pricing-table tbody tr:last-child {
    border-bottom: none;
}

.pricing-table tbody tr:hover {
    background: var(--color-primary-bg);
}

.pricing-table td {
    padding: 12px 14px;
    font-size: var(--fs-sm, 0.8125rem);
    color: var(--color-text-dark);
}

.pricing-table .price-cell {
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
}

.pricing-table-wrapper::after {
    content: '← Прокрутите для просмотра →';
    display: block;
    text-align: center;
    font-size: var(--fs-xs, 0.75rem);
    color: var(--color-text-muted);
    padding-top: 10px;
}

@media (min-width: 922px) {
    .pricing-section {
        padding: var(--spacing-section) 20px;
    }

    .pricing-table-wrapper {
        margin: 0 auto;
        padding: 0;
        border-radius: var(--radius-lg);
    }

    .pricing-table {
        min-width: 600px;
        box-shadow: var(--shadow-lg);
    }

    .pricing-table th {
        padding: 18px 24px;
        font-size: 0.9375rem;
    }

    .pricing-table td {
        padding: 20px 24px;
        font-size: 0.9375rem;
    }

    .pricing-table-wrapper::after {
        display: none;
    }
}

/* =============================================================================
   5. Proof Section (Screenshots/Reviews)
   ============================================================================= */
.proof-section {
    background: var(--color-bg-light);
    padding: var(--spacing-section) 20px;
}

.proof-grid {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.proof-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.proof-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

.proof-image-placeholder {
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, var(--color-bg-light) 0%, var(--color-primary-bg) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.proof-image-placeholder svg {
    width: 100%;
    height: 100%;
}

.proof-image {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--color-bg-light);
}

.proof-image img,
.proof-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.proof-card:hover img {
    transform: scale(1.05);
}

.proof-caption {
    padding: 16px;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-dark);
    text-align: center;
}

.proof-note {
    text-align: center;
    margin-top: 24px;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* Proof: база = мобильные, 545px = планшет, 922px = десктоп */
.proof-section {
    padding: 60px 16px;
}

.proof-grid {
    grid-template-columns: 1fr;
    max-width: 320px;
}

@media (min-width: 922px) {
    .proof-section {
        padding: var(--spacing-section) 20px;
    }
    .proof-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: var(--ast-normal-container-width);
    }
}

@media (min-width: 922px) {
    .proof-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* =============================================================================
   7.1 Examples Section (Screenshots)
   ============================================================================= */
.examples-section {
    background: var(--color-white);
    padding: var(--spacing-section) 20px;
}

.examples-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: var(--container-max);
    margin: 0 auto;
}

.example-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.example-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.example-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-card-hover);
}

.example-card__image {
    position: relative;
    aspect-ratio: 5/3;
    background: #f8fafc;
    overflow: hidden;
}

.example-card__image-link {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.example-card__image-link:hover {
    opacity: 0.9;
}

.example-card__screenshot {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 1px solid #e2e8f0;
    display: block;
}

.example-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.example-card__placeholder svg {
    width: 100%;
    height: 100%;
}

.example-card__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--gradient-success);
    color: var(--color-white);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

.example-card__content {
    padding: 20px;
}

.example-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: 8px;
}

.example-card__desc {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

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

@media (max-width: 921px) {
    .examples-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   7.5 SEO Section (3 Columns)
   ============================================================================= */
.seo-section {
    background: var(--color-white);
    padding: 60px 20px;
    border-top: 1px solid var(--color-border);
}

.seo-section__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-dark);
    text-align: center;
    margin-bottom: 32px;
    letter-spacing: -0.02em;
}

.seo-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: var(--ast-normal-container-width);
    margin: 0 auto;
}

.seo-column {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
}

.seo-column:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-primary-bg);
    transform: translateY(-4px);
}

.seo-column:nth-child(1) {
    transition-delay: 0.1s;
}

.seo-column:nth-child(2) {
    transition-delay: 0.2s;
}

.seo-column:nth-child(3) {
    transition-delay: 0.3s;
}

.seo-column p {
    font-size: 0.9375rem;
    color: var(--color-text-body);
    line-height: 1.7;
    margin: 0;
}

/* SEO один блок (block-seo с seo_text / ACF single) */
.seo-section--single .seo-content {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-body);
    max-width: var(--ast-normal-container-width);
    margin: 0 auto;
}
.seo-section--single .seo-content h2,
.seo-section--single .seo-content h3 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}
.seo-section--single .seo-content p {
    margin-bottom: 1em;
}

/* SEO 3col: база = 1 колонка (мобильные), 545px = 2 колонки, 922px = 3 колонки */
@media (min-width: 922px) {
    .seo-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    .seo-column {
        padding: 24px 20px;
    }
    
    .seo-column p {
        font-size: 1rem;
        line-height: 1.75;
    }
}

@media (min-width: 922px) {
    .seo-section {
        padding: var(--spacing-section) 20px;
    }
    
    .seo-section__title {
        font-size: 2rem;
        margin-bottom: 48px;
    }
    
    .seo-columns {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
    
    .seo-column {
        padding: 32px 28px;
    }
}

/* =============================================================================
   7.6 Scroll Animations
   ============================================================================= */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger for live grids */
.examples-grid .animate-on-scroll:nth-child(1) { transition-delay: 0.05s; }
.examples-grid .animate-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.examples-grid .animate-on-scroll:nth-child(3) { transition-delay: 0.15s; }
.examples-grid .animate-on-scroll:nth-child(4) { transition-delay: 0.2s; }

.reviews-grid .animate-on-scroll:nth-child(1) { transition-delay: 0.05s; }
.reviews-grid .animate-on-scroll:nth-child(2) { transition-delay: 0.15s; }
.reviews-grid .animate-on-scroll:nth-child(3) { transition-delay: 0.25s; }

.security-grid .animate-on-scroll:nth-child(1) { transition-delay: 0.05s; }
.security-grid .animate-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.security-grid .animate-on-scroll:nth-child(3) { transition-delay: 0.15s; }
.security-grid .animate-on-scroll:nth-child(4) { transition-delay: 0.2s; }

.trust-grid .animate-on-scroll:nth-child(1) { transition-delay: 0.05s; }
.trust-grid .animate-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.trust-grid .animate-on-scroll:nth-child(3) { transition-delay: 0.15s; }
.trust-grid .animate-on-scroll:nth-child(4) { transition-delay: 0.2s; }

/* =============================================================================
   9. SEO Text Block
   ============================================================================= */
.seo-text {
    background: #f9f9f9;
    padding: 32px 16px;
}

.seo-text > * {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.seo-text-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-body);
    margin-bottom: 16px;
}

.seo-text-content {
    font-size: 0.8125rem;
    line-height: 1.7;
    color: #64748b;
}

.seo-text-content p {
    margin-bottom: 12px;
}

.seo-text-content p:last-child {
    margin-bottom: 0;
}

.seo-text-content a {
    color: var(--color-primary);
    text-decoration: underline !important;
    text-decoration-color: rgba(37, 99, 235, 0.3);
    text-underline-offset: 2px;
}

.seo-text-content a:hover {
    text-decoration: underline !important;
    text-decoration-color: var(--color-primary);
}

/* SEO Text: база = мобильные, 545px = планшет/десктоп */
@media (min-width: 922px) {
    .seo-text {
        padding: 40px 20px;
    }
    
    .seo-text-content {
        font-size: 0.875rem;
    }
}


/* Общий подзаголовок секций (блоки преимуществ, услуги, отзывы и т.д.) */
.section-subtitle {
    text-align: center;
    font-size: 1rem;
    color: var(--color-text-body);
    margin-top: -12px;
    margin-bottom: 28px;
}
@media (min-width: 922px) {
    .section-subtitle {
        font-size: 1.125rem;
        margin-top: -16px;
        margin-bottom: 36px;
    }
}

/* =============================================================================
   SECTION: КАЛЬКУЛЯТОР
   ============================================================================= */
.calculator-section {
    padding: var(--spacing-section) 0;
    background: var(--color-bg-light);
    position: relative;
}

.home .calculator-section.front-section--white {
    background: var(--color-white);
}

/* =============================================================================
   LIVE-КАЛЬКУЛЯТОР СТОИМОСТИ (НА ОДНОМ ЭКРАНЕ)
   ============================================================================= */
.calc-live {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.calc-live__grid {
    display: grid;
    grid-template-columns: 1fr 390px;
    gap: 32px;
    align-items: start;
}

/* Левая часть: блоки параметров */
.calc-live__section {
    background: #ffffff;
    border-radius: 18px;
    padding: 24px 28px;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(226, 232, 240, 0.9);
    margin-bottom: 20px;
    box-sizing: border-box;
}

.calc-live__section-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 18px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.3;
}

.calc-live__step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #2563eb;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.calc-live__no-markup-badge {
    font-size: 12px;
    font-weight: 600;
    color: #059669;
    background: rgba(16, 185, 129, 0.12);
    padding: 3px 10px;
    border-radius: 9999px;
    margin-left: auto;
}

/* Сетка карточек услуг (2x2 на десктопе) */
.calc-live__services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.calc-live-card {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 126px;
    box-sizing: border-box;
    position: relative;
}

.calc-live-card:hover {
    border-color: #93c5fd;
    background: #ffffff;
    box-shadow: 0 8px 24px -4px rgba(37, 99, 235, 0.1);
}

.calc-live-card.is-active {
    border-color: #2563eb;
    background: #ffffff;
    box-shadow: 0 8px 24px -4px rgba(37, 99, 235, 0.15);
}

.calc-live-card__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.calc-live-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.calc-live-card__icon--green {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.calc-live-card__icon--purple {
    background: rgba(139, 92, 246, 0.12);
    color: #7c3aed;
}

.calc-live-card__icon--blue {
    background: rgba(14, 165, 233, 0.12);
    color: #0284c7;
}

.calc-live-card__info {
    flex: 1;
    min-width: 0;
}

.calc-live-card__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    margin-bottom: 4px;
}

.calc-live-card__rate {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #2563eb;
}

.calc-live-card__unit {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
}

.calc-live-card__rate--agreement {
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
}

/* Степпер количества */
.calc-live-card__stepper {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    padding: 2px;
    width: 100%;
    justify-content: space-between;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.calc-live-card.is-active .calc-live-card__stepper {
    border-color: #93c5fd;
    background: rgba(37, 99, 235, 0.04);
}

.calc-live-stepper__btn {
    width: 36px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    padding: 0;
    user-select: none;
}

.calc-live-stepper__btn:hover:not(:disabled) {
    background: #2563eb;
    color: #ffffff;
}

.calc-live-stepper__btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.calc-live-stepper__input {
    width: 48px;
    text-align: center;
    border: none !important;
    background: transparent !important;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    padding: 0;
    pointer-events: none;
    box-shadow: none !important;
}

/* Кнопка диплома */
.calc-live-card__toggle-box {
    width: 100%;
}

.calc-live-card__toggle-btn {
    width: 100%;
    height: 36px;
    border-radius: 10px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
}

.calc-live-card__toggle-btn:hover {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

.calc-live-card__toggle-btn:hover .calc-live-card__toggle-text {
    color: #ffffff !important;
}

.calc-live-card.is-active .calc-live-card__toggle-btn {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.calc-live-card.is-active .calc-live-card__toggle-btn:hover {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}

.calc-live-card.is-active .calc-live-card__toggle-btn .calc-live-card__toggle-text,
.calc-live-card.is-active .calc-live-card__toggle-btn:hover .calc-live-card__toggle-text {
    color: #ffffff !important;
}

/* Чипсы предметов */
.calc-live__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.calc-live-chip {
    padding: 8px 16px;
    border-radius: 9999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    line-height: 1.3;
}

.calc-live-chip:hover {
    border-color: #93c5fd;
    color: #2563eb;
    background: #ffffff;
}

.calc-live-chip.is-active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
}

/* Сроки */
.calc-live__deadlines {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.calc-live-deadline {
    padding: 12px 14px;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    background: #f8fafc;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    box-sizing: border-box;
}

.calc-live-deadline:hover {
    border-color: #93c5fd;
    background: #ffffff;
}

.calc-live-deadline.is-active {
    border-color: #2563eb;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.12);
}

.calc-live-deadline__title {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.calc-live-deadline.is-active .calc-live-deadline__title {
    color: #2563eb;
}

.calc-live-deadline__tag {
    font-size: 11px;
    font-weight: 600;
    color: #059669;
    background: rgba(16, 185, 129, 0.1);
    padding: 2px 8px;
    border-radius: 9999px;
    line-height: 1.2;
}

/* Правая колонка: Виджет сметы */
.calc-live__sidebar {
    position: relative;
}

.calc-live-summary {
    position: sticky;
    top: 90px;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 16px 40px -6px rgba(15, 23, 42, 0.1), 0 4px 12px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    box-sizing: border-box;
}

.calc-live-summary__header {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #ffffff;
    padding: 24px 24px 22px;
    text-align: center;
}

.calc-live-summary__caption {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    font-weight: 700;
    margin-bottom: 6px;
}

.calc-live-summary__price-box {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
}

.calc-live-summary__amount {
    font-size: 2.5rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -0.02em;
}

.calc-live-summary__currency {
    font-size: 1.75rem;
    font-weight: 700;
    color: #38bdf8;
    line-height: 1;
}

.calc-live-summary__diplom-note {
    margin-top: 8px;
    font-size: 13px;
    color: #38bdf8;
    font-weight: 600;
}

.calc-live-summary__empty-note {
    margin-top: 8px;
    font-size: 13px;
    color: #fb7185;
    font-weight: 600;
}

.calc-live-summary__body {
    padding: 22px 24px 24px;
}

.calc-live-summary__subtitle {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}

.calc-live-summary__items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed #e2e8f0;
}

.calc-live-summary__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.calc-live-summary__item-name {
    color: #334155;
    font-weight: 600;
}

.calc-live-summary__item-price {
    color: #0f172a;
    font-weight: 700;
}

.calc-live-summary__item-empty {
    font-size: 13px;
    color: #94a3b8;
    font-style: italic;
}

.calc-live-summary__meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
    font-size: 13px;
    background: #f8fafc;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #f1f5f9;
}

.calc-live-summary__meta-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.calc-live-summary__meta-label {
    color: #64748b;
}

.calc-live-summary__meta-val {
    color: #0f172a;
    font-weight: 600;
    text-align: right;
}

.calc-live-summary__trust-list {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
    color: #475569;
}

.calc-live-summary__trust-list li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.calc-live-summary__trust-list svg {
    color: #10b981;
    flex-shrink: 0;
}

.calc-live-summary__action-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.calc-live-summary__input {
    width: 100%;
    height: 46px;
    border-radius: 12px;
    border: 1.5px solid #cbd5e1;
    padding: 0 14px;
    font-size: 14px;
    color: #0f172a;
    box-sizing: border-box;
    background: #ffffff;
    transition: all 0.2s ease;
}

.calc-live-summary__input:focus {
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.calc-live-summary__btn-submit {
    width: 100%;
    height: 48px;
    border-radius: 12px;
    background: #2563eb;
    color: #ffffff;
    border: none;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.calc-live-summary__btn-submit:hover:not(:disabled) {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.45);
}

.calc-live-summary__btn-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.calc-live-summary__btn-tg {
    width: 100%;
    height: 42px;
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.calc-live-summary__btn-tg:hover {
    background: rgba(37, 99, 235, 0.15);
    color: #1d4ed8;
}

/* Адаптивность калькулятора */
@media (max-width: 991px) {
    .calc-live__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .calc-live-summary {
        position: static;
        max-width: 540px;
        margin: 0 auto;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .calc-live__section {
        padding: 18px 16px;
        border-radius: 14px;
    }

    .calc-live__section-title {
        font-size: 1rem;
        flex-wrap: wrap;
    }

    .calc-live__services-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .calc-live__deadlines {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .calc-live-summary {
        border-radius: 16px;
    }

    .calc-live-summary__header {
        padding: 20px 16px;
    }

    .calc-live-summary__body {
        padding: 18px 16px;
    }

    .calc-live-summary__amount {
        font-size: 2.125rem;
    }
}

.calculator-wrapper {
    max-width: var(--container-max);
    width: 100%;
    margin: 0 auto;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--spacing-card, 16px);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

/* Desktop: компактный квиз (без «гигантизма») */
@media (min-width: 922px) {
    .calculator-section {
        padding: var(--spacing-section) 0;
    }

    .calculator-section .section-title {
        margin-bottom: 8px;
    }

    .calculator-section .section-subtitle {
        margin-top: 0;
        margin-bottom: 20px;
        font-size: 1rem;
    }

    .calculator-wrapper {
        padding: 24px 28px;
        max-height: none;
        min-height: 0;
        overflow: visible;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        max-width: 920px; /* уже карточки – квиз не на всю 1200 */
    }
    
    .calculator-steps {
        min-height: 0;
        flex: 0 1 auto;
        overflow-y: visible;
        overflow-x: hidden;
        padding-bottom: 4px;
        max-height: none;
    }
    
    .calc-progress {
        flex-shrink: 0;
        height: 3px;
        margin-top: 16px;
        margin-bottom: 14px;
    }
    
    .calc-nav-container {
        flex-shrink: 0;
        margin-top: 0;
        height: auto;
        min-height: 0;
        padding-bottom: 0;
        margin-bottom: 0;
        gap: 10px;
    }

    .calc-nav {
        padding: 10px 18px;
        font-size: 0.875rem;
    }
    
    .calculator-steps::-webkit-scrollbar {
        width: 6px;
    }
    
    .calculator-steps::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .calculator-steps::-webkit-scrollbar-thumb {
        background: var(--color-border);
        border-radius: 3px;
    }
}

.calculator-steps {
    position: relative;
    min-height: 200px;
    flex: 1;
}

@media (min-width: 922px) {
    .calculator-steps {
        min-height: 240px;
    }
}

.calc-progress {
    flex-shrink: 0;
}

.calc-nav {
    flex-shrink: 0;
}

.calc-step {
    display: none;
    animation: fadeIn 0.3s ease;
}

.calc-step--active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.calc-step__title {
    font-size: 1.0625rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 14px;
    color: var(--color-text-dark);
}

@media (min-width: 922px) {
    .calc-step__title {
        font-size: 1.125rem;
        margin-bottom: 16px;
    }
}

.calc-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.calc-options .calc-option {
    flex: 0 1 calc(20% - 13px);
    min-width: 140px;
    max-width: 180px;
}

/* Шаг 4 (сроки) – 1 столбец, аккуратный список */
.calc-step[data-step="4"] .calc-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 440px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.calc-step[data-step="4"] .calc-options .calc-option,
.calc-step[data-step="4"] .calc-option {
    flex: none;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    min-height: 52px;
    height: auto;
    padding: 14px 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-radius: var(--radius-lg, 12px);
    gap: 12px;
    text-align: center;
}

.calc-step[data-step="4"] .calc-option__title {
    font-size: 0.9375rem;
    margin: 0;
    font-weight: 600;
    color: var(--color-text-dark);
    line-height: 1.3;
    text-align: center;
}

.calc-step[data-step="4"] .calc-option__desc {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    margin: 0;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.05);
    color: var(--color-text-muted);
    transition: background 0.2s ease, color 0.2s ease;
}

.calc-step[data-step="4"] .calc-option:hover .calc-option__desc {
    background: rgba(37, 99, 235, 0.1);
    color: var(--color-primary);
}

.calc-step[data-step="4"] .calc-option.is-selected .calc-option__title {
    color: var(--color-primary);
}

.calc-step[data-step="4"] .calc-option.is-selected .calc-option__desc {
    background: rgba(37, 99, 235, 0.15);
    color: var(--color-primary);
}

/* Сетка для шага 1 (выбор типа работы) – 2×2 */
.calc-step[data-step="1"] .calc-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: 10px;
    align-content: start;
    justify-items: stretch;
    max-width: 520px;
    margin: 0 auto;
}

.calc-step[data-step="1"] .calc-options .calc-option {
    flex: none;
    min-width: 0;
    max-width: none;
    width: 100%;
    min-height: 64px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 12px 10px;
}

@media (min-width: 922px) {
    .calc-step[data-step="1"] .calc-options .calc-option {
        min-height: 72px;
        padding: 12px 14px;
    }

    .calc-step[data-step="1"] .calc-option__icon svg {
        width: 22px;
        height: 22px;
    }

    .calc-step[data-step="3"] .calc-options {
        gap: 8px;
        max-width: 640px;
        margin: 0 auto;
    }

    .calc-step[data-step="3"] .calc-options .calc-option {
        min-height: 44px;
        padding: 10px 14px;
    }

    .calc-step[data-step="4"] .calc-options .calc-option {
        padding: 12px 14px;
    }

    .calc-result__amount {
        font-size: 2.125rem;
    }

    .btn-calc-order {
        padding: 12px 22px;
        font-size: 0.9375rem;
    }
}

/* Двухколоночная сетка для шага 3 (выбор предмета) */
.calc-step[data-step="3"] .calc-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 16px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 8px;
    align-content: start;
}

.calc-step[data-step="3"] .calc-options .calc-option {
    flex: none;
    min-width: 0;
    max-width: none;
    width: 100%;
    min-height: 80px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

/* Стилизация скроллбара для шага 3 */
.calc-step[data-step="3"] .calc-options::-webkit-scrollbar {
    width: 6px;
}

.calc-step[data-step="3"] .calc-options::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

.calc-step[data-step="3"] .calc-options::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

.calc-step[data-step="3"] .calc-options::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

.calc-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 14px;
    background: var(--color-bg-light);
    border: 1.5px solid var(--color-border);
    /* Как у кнопок квиза (.calc-nav / .btn-calc-order) – pill */
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    gap: 4px;
    transform: none;
}

.calc-option:hover,
.calc-option:active,
.calc-option:focus {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
    transform: none !important;
}

.calc-option.is-selected {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}

.calc-option.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.calc-option__icon {
    font-size: 1.25rem;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

.calc-option__icon svg {
    width: 22px;
    height: 22px;
}

.calc-option__title {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-text-dark);
    word-break: break-word;
    hyphens: auto;
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
}

.calc-option__price,
.calc-option__desc {
    font-size: 0.75rem;
    color: var(--color-text-body);
    flex-shrink: 0;
    margin: 0;
    line-height: 1.3;
}

/* Для шага 3, где нет иконок, заголовок центрируется */
.calc-step[data-step="3"] .calc-option {
    justify-content: center;
}

.calc-step[data-step="3"] .calc-option__title {
    flex: 0 0 auto;
}

/* Блоки количества */
.calc-quantities {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
}

.calc-quantity-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--color-white);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.calc-quantity-item:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.calc-quantity-item__name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-dark);
}

.calc-quantity-item__controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Степпер: общий компонент .ps-stepper (см. _components.css) */

.calc-progress {
    height: 4px;
    background: var(--color-border);
    border-radius: var(--radius-full);
    margin: 32px 0;
    overflow: hidden;
}

.calc-progress__bar {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
    width: 0%;
}

.calc-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-full);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    transform: none;
}

.calc-nav:hover,
.calc-nav:active {
    background: var(--color-primary-dark);
    transform: none !important;
    box-shadow: var(--shadow-md);
}

/* Центрируем кнопки навигации на десктопе */
.calc-nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

@media (min-width: 922px) {
    .calc-progress {
        margin-bottom: 24px;
    }
    
    .calc-nav-container {
        gap: 16px;
        margin-top: 24px;
        margin-bottom: 0;
        flex-shrink: 0;
    }
    
    .calc-nav--prev,
    .calc-nav--next {
        float: none;
        display: inline-flex;
        margin: 0;
        flex: 0 0 auto;
    }
    
    .calc-nav--prev {
        margin-right: auto;
    }
    
    .calc-nav--next {
        margin-left: auto;
    }
}

.calc-result {
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.calc-result__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin-bottom: 10px;
}

.calc-result__amount {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
}

.calc-result__currency {
    font-size: 1.125rem;
    color: var(--color-text-body);
}

.calc-result__note {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-bottom: 14px;
}

/* Блок с информацией о скидке для первого заказа */
.calc-result__first-order {
    padding: 12px 16px;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1.5px solid #10b981;
    border-radius: var(--radius-full);
    margin-bottom: 14px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.calc-result__first-order-text {
    font-size: 0.8125rem;
    color: var(--color-text-body);
    margin: 0;
    line-height: 1.4;
}

.calc-result__first-order-text strong {
    color: #10b981;
    font-weight: 700;
}

/* Блок «Оплата после оценки» в калькуляторе */
.calc-result__payment-note {
    padding: 12px 16px;
    background: var(--color-primary-bg);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: var(--radius-full);
    margin-bottom: 14px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.calc-result__payment-note-text {
    font-size: 0.8125rem;
    color: var(--color-text-body);
    margin: 0;
    line-height: 1.4;
}

/* Разбивка заказа (компактно, как остальной квиз) */
.calc-result__breakdown {
    margin: 12px auto;
    padding: 12px 14px;
    background: var(--color-bg-light);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    max-width: 420px;
    box-sizing: border-box;
}

.calc-breakdown__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-dark);
    margin: 0 0 10px;
}

.calc-breakdown__items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.calc-breakdown__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--color-white);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    font-size: 0.8125rem;
}

.calc-breakdown__name {
    font-size: 0.8125rem;
    color: var(--color-text-body);
    text-align: left;
    min-width: 0;
}

.calc-breakdown__price {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

.calc-breakdown__name {
    font-size: 0.9375rem;
    color: var(--color-text-body);
}

.calc-breakdown__price {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
}

/* Адаптивность для количества */
@media (max-width: 921px) {
    .calc-quantity-item {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 16px;
    }
    
    .calc-quantity-item__name {
        text-align: center;
    }
    
    .calc-quantity-item__controls {
        justify-content: center;
    }
    
    .calc-breakdown__item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* Калькулятор: компактные опции до desktop layout */
@media (max-width: 921px) {
    .calc-options .calc-option {
        flex: 0 1 calc(33.333% - 11px);
        min-width: 140px;
    }
    
    /* Шаг 1: сетка 2×2 */
    .calc-step[data-step="1"] .calc-options {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 1fr;
        gap: 12px;
    }
    
    .calc-step[data-step="1"] .calc-options .calc-option {
        min-height: 100px;
    }
    
    /* Шаг 3: 2 колонки */
    .calc-step[data-step="3"] .calc-options {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 1fr;
        gap: 12px;
    }
    
    .calc-step[data-step="3"] .calc-options .calc-option {
        min-height: 70px;
    }
    
    /* Шаг 4 */
    .calc-step[data-step="4"] .calc-options {
        max-width: 440px;
        gap: 12px;
        flex-direction: column;
    }
    
    .calc-step[data-step="4"] .calc-options .calc-option {
        min-height: 52px;
        height: auto;
        padding: 12px 18px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
    }
    
    .calc-step[data-step="4"] .calc-option {
        gap: 12px;
    }
    
    .calc-step[data-step="4"] .calc-option__title {
        font-size: 0.9375rem;
        margin: 0;
        text-align: center;
    }
    
    .calc-step[data-step="4"] .calc-option__desc {
        font-size: 0.8125rem;
        margin: 0;
    }
}

@media (max-width: 921px) {
    .calculator-section {
        padding: 20px 0;
        scroll-margin-top: 0;
        scroll-padding-top: 0;
    }
    
    .calc-options {
        gap: 12px;
    }
    
    .calc-options .calc-option {
        flex: 0 1 calc(50% - 6px);
        min-width: 120px;
        padding: 20px 16px;
    }
    
    /* Шаг 1: на мобильных делаем 2 колонки */
    .calc-step[data-step="1"] .calc-options {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 1fr;
        gap: 12px;
        width: 100%;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
    
    .calc-step[data-step="1"] .calc-options .calc-option {
        padding: 16px 12px;
        min-height: 90px;
        width: 100%;
        box-sizing: border-box;
        max-width: 100%;
        gap: 6px;
        justify-content: center;
    }
    
    
    /* Шаг 3: сохраняем 2 колонки на планшетах */
    .calc-step[data-step="3"] .calc-options {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 1fr;
        gap: 12px;
        max-height: calc(100vh - 280px);
        width: 100%;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
    
    .calc-step[data-step="3"] .calc-options .calc-option {
        padding: 16px 12px;
        min-height: 65px;
        width: 100%;
        box-sizing: border-box;
        max-width: 100%;
        gap: 0;
        justify-content: center;
    }
    
    /* Шаг 4: на мобильных 1 столбец */
    .calc-step[data-step="4"] .calc-options {
        max-width: 440px;
        gap: 10px;
        width: 100%;
        box-sizing: border-box;
        padding: 0;
        margin: 0 auto;
        flex-direction: column;
    }
    
    .calc-step[data-step="4"] .calc-options .calc-option {
        min-height: 48px;
        height: auto;
        padding: 10px 14px;
        width: 100%;
        box-sizing: border-box;
        max-width: 100%;
        gap: 10px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    
    .calc-step[data-step="4"] .calc-option {
        gap: 10px;
    }
    
    .calc-step[data-step="4"] .calc-option__title {
        font-size: 0.875rem;
        margin: 0;
        text-align: center;
    }
    
    .calc-step[data-step="4"] .calc-option__desc {
        font-size: 0.75rem;
        margin: 0;
        padding: 3px 8px;
    }
    
    .calc-option__icon svg {
        width: 28px;
        height: 28px;
    }
    
    .calc-option {
        gap: 6px;
    }
    
    .calc-option__icon {
        margin-bottom: 0;
    }
    
    .calc-option__title {
        margin: 0;
    }
    
    .calc-option__price {
        margin: 0;
    }
    
    .calculator-section .container {
        padding: 0 16px;
    }
    
    .calculator-wrapper {
        padding: 16px 12px 12px;
        margin: 0 auto;
        width: 100%;
        height: calc(100vh - 40px);
        min-height: 500px;
        max-height: calc(100vh - 40px);
        display: flex;
        flex-direction: column;
        position: relative;
        box-sizing: border-box;
    }
    
    .calculator-steps {
        min-height: 0;
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        display: flex;
        flex-direction: column;
    }
    
    .calc-step {
        display: none;
        padding: 0;
        width: 100%;
        box-sizing: border-box;
    }
    
    .calc-step--active {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }
    
    .calc-step .calc-options,
    .calc-step #calcQuantities {
        flex: 1;
        min-height: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
    
    .calc-step .calc-options {
        overflow-y: visible;
        overflow-x: hidden;
    }
    
    .calc-progress {
        flex-shrink: 0;
        margin: 12px 0;
        order: 2;
    }
    
    .calc-nav-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
        flex-shrink: 0;
        order: 3;
        width: 100%;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
    
    .calc-nav {
        width: 100%;
        justify-content: center;
        margin: 0;
        box-sizing: border-box;
        max-width: 100%;
    }
    
    .calc-nav--prev {
        margin-bottom: 0;
    }
    
    .calc-nav--next {
        margin-bottom: 0;
    }
    
    .calc-step__title {
        font-size: 1.25rem;
        margin-bottom: 20px;
        padding: 0;
        width: 100%;
        box-sizing: border-box;
        word-wrap: break-word;
    }
    
    /* Оптимизация результата для планшетов */
    .calc-result__price {
        margin-bottom: 14px;
    }
    
    .calc-result__amount {
        font-size: 2rem;
    }
    
    .calc-result__currency {
        font-size: 1.125rem;
    }
    
    .calc-result__note {
        font-size: 0.8125rem;
        margin-bottom: 14px;
    }
    
    .calc-result__first-order,
    .calc-result__payment-note {
        padding: 16px;
        margin-bottom: 20px;
    }
    
    .calc-result__first-order {
        padding: 14px 16px;
    }
    
    .calc-result__payment-note {
        padding: 14px 16px;
    }
    
    .calc-result__first-order-text,
    .calc-result__payment-note-text {
        font-size: 0.875rem;
    }
    
    .btn-calc-order {
        padding: 14px 28px;
    }
    
}

/* Мобильный калькулятор: естественная высота (не 100vh – ломал шаг 2) */
@media (max-width: 921px) {
    .calculator-section {
        padding: 12px 0;
        scroll-margin-top: 0;
        scroll-padding-top: 0;
    }
    
    /* Не ломаем единый gutter --container-pad-x; wrapper сам даёт плотность */
    
    .calculator-wrapper {
        padding: 16px 14px 14px;
        margin: 0 auto;
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;
        border-radius: var(--radius-lg);
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }
    
    .calculator-steps {
        min-height: 0;
        flex: 0 1 auto;
        overflow: visible;
        padding-bottom: 8px;
        display: block;
    }
    
    .calc-step {
        display: none;
        scroll-margin-top: 0;
    }
    
    .calc-step--active {
        display: block;
        flex: none;
        min-height: 0;
    }
    
    .calc-step .calc-options,
    .calc-step #calcQuantities,
    .calc-quantities {
        flex: none;
        min-height: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
    
    .calc-step .calc-options {
        overflow: visible;
    }
    
    .calc-step__title {
        font-size: 1rem;
        margin-bottom: 12px;
        line-height: 1.3;
        padding: 0;
        width: 100%;
        box-sizing: border-box;
        word-wrap: break-word;
    }

    /* Шаг 2: количество – колонка на узком экране */
    .calc-quantity-item {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 12px;
        padding: 14px;
    }

    .calc-quantity-item__name {
        width: 100%;
        flex: none;
        font-size: 0.9375rem;
    }

    .calc-quantity-item__controls {
        width: 100%;
        justify-content: flex-end;
        gap: 0;
    }

    .calc-quantity-stepper,
    .ps-stepper {
        margin: 0;
        max-width: 100%;
    }

    .calc-nav-container {
        margin-top: 12px;
        gap: 8px;
    }

    .calc-nav {
        flex: 1 1 auto;
        justify-content: center;
        min-width: 0;
        padding: 12px 16px;
        font-size: 0.875rem;
    }
    
    .calc-options {
        gap: 6px;
    }
    
    .calc-options .calc-option {
        flex: 0 1 calc(50% - 3px);
        min-width: 0;
        padding: 12px 8px;
        width: 100%;
        box-sizing: border-box;
        max-width: 100%;
        overflow: hidden;
    }
    
    /* Шаг 1: на маленьких экранах сохраняем 2 колонки */
    .calc-step[data-step="1"] .calc-options {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 1fr;
        gap: 6px;
        width: 100%;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
    
    .calc-step[data-step="1"] .calc-options .calc-option {
        padding: 12px 8px;
        min-height: 80px;
        width: 100%;
        box-sizing: border-box;
        max-width: 100%;
        overflow: hidden;
        gap: 4px;
        justify-content: center;
    }
    
    
    /* Шаг 3: сохраняем 2 колонки на мобильных */
    .calc-step[data-step="3"] .calc-options {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 1fr;
        gap: 6px;
        max-height: calc(100vh - 250px);
        width: 100%;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
    
    .calc-step[data-step="3"] .calc-options .calc-option {
        padding: 12px 8px;
        min-height: 60px;
        width: 100%;
        box-sizing: border-box;
        max-width: 100%;
        overflow: hidden;
        gap: 0;
        justify-content: center;
    }
    
    /* Шаг 4: на маленьких экранах 1 столбец */
    .calc-step[data-step="4"] .calc-options {
        gap: 8px;
        width: 100%;
        box-sizing: border-box;
        padding: 0;
        margin: 0 auto;
        flex-direction: column;
    }
    
    .calc-step[data-step="4"] .calc-options .calc-option {
        min-height: 46px;
        height: auto;
        padding: 10px 12px;
        width: 100%;
        box-sizing: border-box;
        max-width: 100%;
        overflow: hidden;
        gap: 8px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    
    .calc-step[data-step="4"] .calc-option__title {
        font-size: 0.8125rem;
        margin: 0;
        text-align: center;
    }
    
    .calc-step[data-step="4"] .calc-option__desc {
        font-size: 0.6875rem;
        padding: 3px 6px;
        margin: 0;
    }
    
    
    .calc-option {
        gap: 4px;
        padding: 12px 8px;
        justify-content: center;
    }
    
    .calc-option__icon {
        font-size: 1.25rem;
        margin-bottom: 0;
        flex-shrink: 0;
    }
    
    .calc-option__icon svg {
        width: 20px;
        height: 20px;
    }
    
    .calc-option__title {
        font-size: 0.8125rem;
        margin: 0;
        line-height: 1.3;
        flex-shrink: 0;
    }
    
    .calc-option__price,
    .calc-option__desc {
        font-size: 0.6875rem;
        line-height: 1.3;
        margin: 0;
    }
    
    .calc-step[data-step="4"] .calc-option {
        gap: 6px;
    }
    
    .calc-step[data-step="4"] .calc-option__title {
        font-size: 0.75rem;
        line-height: 1.25;
        margin: 0;
        text-align: center;
        word-break: normal;
        hyphens: none;
    }
    
    .calc-step[data-step="4"] .calc-option__desc {
        font-size: 0.6875rem;
        margin: 0;
    }

    .calc-step[data-step="4"] .calc-step__title {
        font-size: 0.875rem;
        line-height: 1.25;
    }
    
    .calc-quantities {
        gap: 10px;
        width: 100%;
    }
    
    .calc-progress {
        margin: 10px 0;
        flex-shrink: 0;
        order: 2;
    }
    
    .calc-nav {
        padding: 10px 20px;
        font-size: 0.9375rem;
        margin-top: 0;
        flex-shrink: 0;
        order: 3;
        width: 100%;
        box-sizing: border-box;
        max-width: 100%;
    }
    
    .calc-nav--prev {
        margin-bottom: 8px;
    }
    
    .calc-nav--next {
        margin-bottom: 0;
    }
    
    .calc-result__amount {
        font-size: 2rem;
    }
    
    .calc-result__currency {
        font-size: 1rem;
    }
    
    .calc-result__note {
        font-size: 0.8125rem;
        margin-bottom: 16px;
    }
    
    .calc-promo {
        flex-direction: column;
        gap: 8px;
    }
    
    .calc-promo__input,
    .calc-promo__btn {
        width: 100%;
        padding: 10px 16px;
        font-size: 0.875rem;
    }
    
    .btn-calc-order {
        padding: 12px 24px;
        font-size: 0.9375rem;
        width: 100%;
        justify-content: center;
    }
    
    .calc-breakdown__item {
        padding: 10px 12px;
    }
    
    .calc-breakdown__name,
    .calc-breakdown__price {
        font-size: 0.875rem;
    }
    
    /* Оптимизация страницы результата для мобильных - всё должно поместиться */
    .calc-step--result {
        padding-bottom: 0;
    }
    
    .calc-result {
        padding: 0;
    }
    
    .calc-result__price {
        margin-bottom: 12px;
        gap: 6px;
    }
    
    .calc-result__amount {
        font-size: 1.75rem;
        line-height: 1.2;
    }
    
    .calc-result__currency {
        font-size: 0.9375rem;
    }
    
    .calc-result__note {
        font-size: 0.75rem;
        margin-bottom: 12px;
        line-height: 1.4;
        padding: 0 8px;
    }
    
    .calc-result__first-order,
    .calc-result__payment-note {
        padding: 12px 14px;
        margin-bottom: 16px;
    }
    
    .calc-result__first-order-text,
    .calc-result__payment-note-text {
        font-size: 0.8125rem;
    }
    
    .btn-calc-order {
        padding: 12px 20px;
        font-size: 0.9375rem;
        width: 100%;
        justify-content: center;
        margin-bottom: 0;
    }
    
    .calc-result__breakdown {
        margin: 12px 0;
        padding: 12px;
    }
    
    .calc-breakdown__title {
        font-size: 0.875rem;
        margin-bottom: 10px;
    }
    
    .calc-breakdown__items {
        gap: 8px;
    }
    
    .calc-breakdown__item {
        padding: 8px 10px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }
    
    .calc-breakdown__name,
    .calc-breakdown__price {
        font-size: 0.8125rem;
    }
}

/* =============================================================================
   SECTION: НАШИ АВТОРЫ (единый блок, переиспользуется на главной и странице услуги)
   Фон всегда белый – один источник стилей.
   ============================================================================= */
.experts-section {
    padding: var(--spacing-section) 0;
    background-color: #fff !important;
    background-image: none !important;
    position: relative;
}

.experts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 64px;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
}

.expert-card {
    position: relative;
    background: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 32px;
    text-align: center;
    transition: all 0.3s ease;
}

.expert-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.expert-card__avatar-wrapper {
    position: relative;
    display: inline-block;
    margin: 0 auto 16px;
}

.expert-card__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 15%;
    display: block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--color-border);
}

.experts-grid .expert-card:nth-child(2) .expert-card__avatar,
.experts-grid .expert-card:nth-child(3) .expert-card__avatar {
    object-position: center 22%;
}

/* Плашка «В сети» сразу под аватаром (единый вариант для главной и страницы услуги) */
.expert-status-badge {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #fff;
    color: #10b981;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    border: 1px solid #e5e7eb;
}

.expert-status-badge .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    border: 1px solid #d1fae5;
    animation: pulse-online 2s ease-in-out infinite;
}

@keyframes pulse-online {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(0.9);
    }
}

.expert-card__name {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--color-text-dark);
}

.expert-card__specialty {
    font-size: 0.9375rem;
    color: var(--color-text-body);
    margin-bottom: 16px;
}

.expert-card__stats {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.expert-card__stat {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    padding: 4px 12px;
    background: var(--color-bg-light);
    border-radius: var(--radius-full);
}

.experts-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: var(--container-max);
    margin: 0 auto;
}

.experts-stat-item {
    text-align: center;
}

.experts-stat-item__number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.experts-stat-item__text {
    font-size: 1rem;
    color: var(--color-text-body);
}

@media (max-width: 921px) {
    .experts-grid {
        grid-template-columns: 1fr;
    }
    
    .experts-stats {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}


/* =============================================================================
   SECTION: SEO TEXT (Structured Layout)
   ============================================================================= */
.seo-section {
    padding: var(--spacing-section) 0;
    background: var(--color-bg-light);
    border-top: 1px solid var(--color-border);
}

.seo-section .section-title {
    margin-bottom: 50px;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

.seo-section .section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--color-primary);
    border-radius: 2px;
}

/* Smart Grid Layout */
.seo-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
}

@media (min-width: 922px) {
    .seo-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.seo-card {
    background: var(--color-white);
    padding: 32px 28px 24px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.seo-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(37,99,235,0.03) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.seo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(37,99,235,0.10);
    border-left-color: var(--color-primary);
    border-color: rgba(37,99,235,0.18);
}

.seo-card:hover::before {
    opacity: 1;
}

/* Порядковый номер */
.seo-card__num {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    color: rgba(37,99,235,0.08);
    margin-bottom: 12px;
    letter-spacing: -0.02em;
    transition: color 0.3s ease;
    user-select: none;
}

.seo-card:hover .seo-card__num {
    color: rgba(37,99,235,0.15);
}

.seo-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border);
    position: relative;
    line-height: 1.35;
}

.seo-card__title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 32px;
    height: 2px;
    background: var(--color-primary);
    transition: width 0.3s ease;
}

.seo-card:hover .seo-card__title::after {
    width: 64px;
}

.seo-card__content {
    flex: 1;
}

.seo-card__content p {
    font-size: 0.9rem;
    color: var(--color-text-body);
    line-height: 1.75;
    margin-bottom: 12px;
}

.seo-card__content p:last-child {
    margin-bottom: 0;
}

/* Нижняя стрелка */
.seo-card__footer {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.seo-card__arrow {
    color: var(--color-border);
    transition: color 0.3s ease, transform 0.3s ease;
}

.seo-card:hover .seo-card__arrow {
    color: var(--color-primary);
    transform: translateX(4px);
}

/* Fallback / WYSIWYG Styling */
.wysiwyg-content {
    max-width: 900px;
    margin: 0 auto;
    background: var(--color-white);
    padding: 40px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
}

.wysiwyg-content h3 {
    font-size: 1.5rem;
    margin: 30px 0 20px;
    color: var(--color-primary);
}

.wysiwyg-content p {
    margin-bottom: 20px;
    font-size: 1rem;
    color: var(--color-text-body);
}

/* Columns Layout (Old style fallback) */
.seo-columns {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
}

@media (min-width: 922px) {
    .seo-columns {
        grid-template-columns: repeat(3, 1fr);
    }
}

.seo-column {
    background: rgba(255,255,255,0.5);
    padding: 25px;
    border-radius: var(--radius-lg);
    border: 1px dashed var(--color-border);
}