/* ==========================================================
   ДИЗАЙН-ТОКЕНЫ САЙТА (вариант D «Капсула», утверждён 18.09.2026).
   Один акцент (синий), холодные серые в тон ему, два фона секций,
   одна тень карточек, скругление 24px, кнопки-таблетки.
   Баннеры страниц светлые (--ui-panel-bg), тёмные блоки только акцентом: графит и оранжевый.
   Цвет, тень или скругление меняются здесь, а не по файлам.
   ========================================================== */
:root {
    --ui-ink: #0f172a;          /* заголовки и главный текст */
    --ui-text: #475569;         /* основной текст */
    --ui-muted: #64748b;        /* подписи, даты */
    --ui-line: #e3e8f0;         /* рамки и разделители */
    --ui-bg: #ffffff;           /* белые секции и карточки */
    --ui-soft: #f4f7fb;         /* мягкие секции, подложки */
    --ui-accent: #2563eb;       /* акцент: ссылки, выделения */
    --ui-accent-d: #1d4ed8;     /* акцент при наведении, текст на светлом акценте */
    --ui-accent-soft: #eef3ff;  /* светлая подложка акцента: плашки, значки */
    --ui-btn: linear-gradient(135deg, #3b7dff 0%, #2563eb 55%, #1d4ed8 100%); /* главная кнопка */
    --ui-btn-sh: 0 12px 26px -14px rgba(37, 99, 235, .65);
    --ui-h-font: 'Onest', 'Inter', system-ui, sans-serif; /* заголовки секций */
    --ui-card-sh: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 36px -30px rgba(15, 23, 42, .35);
    --ui-panel-bg: radial-gradient(700px 340px at 100% 0%, rgba(37, 99, 235, .10), transparent 70%), linear-gradient(160deg, #ffffff 0%, #f2f6ff 100%); /* баннеры магазина, поиска и блога */
    --ui-r: 24px;               /* скругление карточек */
    --ui-dark: #151619;         /* графит тёмных блоков */
    --ui-dark-accent: #ff7a1a;  /* акцент тёмных блоков */
}

/* --- 5. КНОПКИ --- */
.op-btn {
    display: block;
    width: 100%;
    padding: 14px 0;
    border-radius: 14px;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none !important;
    transition: 0.2s;
    margin-top: auto;
}

/* Hero витрины теперь рисует шорткод [oplatim_shop_hero] (inc/catalog-rows.php),
   стили — в assets/css/catalog.css (.op-hero). */
/* ==========================================================
   ОГЛАВЛЕНИЕ:
   1.  SETTINGS: Шрифты и Переменные
   2.  WOOCOMMERCE: Витрина, Категории, Товары
   3.  WOOCOMMERCE: Отзывы и Форма (Чат-пузыри)
   4.  STYLE A: OPLATIM PREMIUM UIX (.b26 - Лендинги/Статьи)
   5.  STYLE B: БЛОГ И СТАТЬИ (.opx - Основной блог)
   6.  BANNERS: Баннеры (Промо и Внутри статей)
   7.  FOOTER: Подвал сайта
   8.  MAIN PAGE: Главная (Hero, Benefits, Services)
   ========================================================== */

/* ==========================================================
   1. SETTINGS: ШРИФТЫ И ПЕРЕМЕННЫЕ
   ========================================================== */
/* Шрифт Inter теперь грузит Astra (настройки типографики). @import убран — он блокировал рендер. */

:root {
    /* Основные цвета */
    --b26-accent: #2563EB;
    --b26-accent-dark: #1d4ed8;
    --b26-text: #0f172a;
    --b26-text-muted: #64748b;
    --b26-bg-light: #f8fafc;
    --b26-border: #e2e8f0;
    --b26-radius: 16px;

    /* Цветовая схема */
    --primary: #2563EB;
    --primary-dark: #1E40AF;
    --text-main: #111827;
    --text-muted: #6B7280;
    --bg-surface: #F9FAFB;
    --white: #ffffff;
    --radius: 20px;
    --shadow-soft: 0 10px 40px -10px rgba(0,0,0,0.08);
}

/* Защита от горизонтального скролла */
body {
    overflow-x: hidden !important;
}

/* ==========================================================
   2. WOOCOMMERCE: ВИТРИНА, КАТЕГОРИИ, ТОВАРЫ
   ========================================================== */

/* ===================== ПРЕМИУМ-ШАПКА ТОВАРА ===================== */
/* Изображение товара в мягкой рамке — «дорогая» подача.
   От 1200 рамка тянется до низа блока покупки (см. .op-ptop в product.css),
   а баннер стоит в ней по центру: обе колонки заканчиваются на одной линии. */
.single-product .woocommerce-product-gallery{
    background: linear-gradient(165deg, #f7f9fd 0%, #eef2fb 60%, #f3effb 100%);
    border: 1px solid #e9edf8;
    border-radius: 22px;
    padding: 0;
    box-shadow: 0 26px 55px -28px rgba(37, 99, 235, .28);
}
@media (min-width: 1200px){
    .single-product.woocommerce div.product .op-ptop > .woocommerce-product-gallery{
        height: 100%; margin-bottom: 0;
        display: flex; align-items: center; justify-content: center;
    }
    .single-product.woocommerce .op-ptop .woocommerce-product-gallery__wrapper{ width: 100%; }
}
.single-product .woocommerce-product-gallery__wrapper{ margin: 0; }
.single-product .woocommerce-product-gallery__image img{ border-radius: 14px; display: block; }

/* Крошки — тонкие и опрятные */
.single-product .woocommerce-breadcrumb {
    font-size: 13px !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
    margin: 0 0 16px !important;
}
.single-product .woocommerce-breadcrumb a { color: #94a3b8 !important; text-decoration: none; transition: color .15s; }
.single-product .woocommerce-breadcrumb a:hover { color: #2563eb !important; }

/* Бейдж категории над заголовком */
.op-cat-badge{
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 700; color: #4f46e5;
    background: linear-gradient(135deg, #eef2ff, #e7ecff);
    border: 1px solid #dee4fb; border-radius: 999px;
    padding: 6px 13px; margin: 0 0 6px; line-height: 1;
    text-decoration: none !important; transition: border-color .15s, transform .15s;
}
.op-cat-badge:hover{ border-color: #c4cffa; transform: translateY(-1px); }
.op-cat-badge svg{ width: 15px; height: 15px; }

/* Заголовок */
.single-product .entry-title,
.single-product .product_title{
    font-size: 30px !important; line-height: 1.15 !important;
    font-weight: 800 !important; color: #0f172a !important;
    letter-spacing: -.6px; margin: 0 0 2px !important;
}

/* Цена: «от» и «/ мес» — тихие, число — крупное */
.single-product .summary .price{
    display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
    margin: 0 0 14px !important; color: #0f172a !important; font-weight: 800 !important;
}
.single-product .summary .price .op-price-before,
.single-product .summary .price .op-price-after{
    font-size: 15px !important; color: #94a3b8 !important; font-weight: 600 !important;
}
.single-product .summary .price .woocommerce-Price-amount,
.single-product .summary .price .amount,
.single-product .summary .price bdi{
    font-size: 40px !important; color: #0f172a !important; font-weight: 800 !important;
    letter-spacing: -1px; line-height: 1;
}

/* Секции под шапкой (вкладки/описание/похожие) — всегда во всю ширину, ПОД колонками.
   clear: both — на случай float-вёрстки Woo; grid-column/width — на случай grid/flex. */
.single-product div.product > .op-psections,
.single-product div.product > .op-related{ width: 100% !important; grid-column: 1 / -1; clear: both; }

@media (max-width: 768px){
    .single-product .woocommerce-product-gallery{ padding: 14px; border-radius: 18px; }
    .single-product .entry-title,
    .single-product .product_title{ font-size: 27px !important; }
    .single-product .summary .price .woocommerce-Price-amount,
    .single-product .summary .price .amount,
    .single-product .summary .price bdi{ font-size: 30px !important; letter-spacing: -.6px; }
    /* «от» и «за год» были светло-серыми и на телефоне терялись рядом с крупным числом */
    .single-product .summary .price .op-price-before,
    .single-product .summary .price .op-price-after{ font-size: 13.5px !important; color: #64748b !important; }
    .single-product .summary .price{ gap: 5px; }
}

/* SEO-текст категории (внизу): спокойный текстовый блок без «карточки» —
   заголовок по центру, абзацы читабельной колонкой. */
.term-description {
    max-width: 780px;
    margin: 46px auto 10px !important;
    padding: 0 20px;
}

.term-description h2 {
    font-size: 21px !important;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
    color: #0f172a;
    text-align: center;
    text-wrap: balance;
}

.term-description p {
    font-size: 15px;
    line-height: 1.7;
    color: #4b5563;
    margin: 0 0 12px;
}

.term-description p strong { color: #0f172a; }

.term-description h3 {
    font-size: 17px !important;
    font-weight: 700;
    color: #0f172a;
    margin: 22px 0 8px;
}

.term-description ul li {
    margin-bottom: 8px;
    padding-left: 0;
    list-style: none;
    font-size: 15px;
    color: #4b5563;
}

/* --- 4. FAQ главной: заголовок по центру, как у остальных секций, под ним вопросы одной карточкой
   шириной 860px, строки через тонкие линии. Раньше строки шли на всю ширину 1160px при вопросах
   в полстроки, и справа была пустота. Открыт только один вопрос (assets/js/app.js). Базовые стили
   секции лежат в Spectra-файле страницы (uag-css-5636), здесь перекрываем раскладку и вид строк. --- */
.uix-faq-breakout { interpolate-size: allow-keywords; background: var(--ui-soft); } /* даёт плавно раскрывать ответ до его высоты */
.uix-faq-breakout .uix-faq-container { max-width: 900px; }
.uix-faq-breakout .uix-faq-header { margin: 0 0 36px; text-align: center; }
.uix-faq-breakout .uix-faq-title { margin: 0 0 12px; }
.uix-faq-breakout .uix-faq-desc { font-size: 17px; line-height: 1.6; margin: 0; color: var(--ui-text); }
.uix-faq-breakout .uix-faq-desc strong { color: var(--ui-ink); }
.uix-faq-breakout .uix-faq-list {
    gap: 0;
    background: #fff;
    border: 1px solid var(--ui-line);
    border-radius: 24px;
    overflow: hidden;
}
.uix-faq-breakout .uix-faq-item,
.uix-faq-breakout .uix-faq-item[open] {
    border: 0;
    border-bottom: 1px solid #edf0f5;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
.uix-faq-breakout .uix-faq-item:last-child { border-bottom: 0; }
.uix-faq-breakout .uix-faq-item[open] { background: #fbfcfe; }
.uix-faq-breakout .uix-faq-summary {
    padding: 20px 24px;
    font-size: 16.5px;
    font-weight: 650;
    line-height: 1.4;
    gap: 16px;
    color: #0f172a;
    transition: background .15s ease;
}
.uix-faq-breakout .uix-faq-summary:hover { background: #f8fafc; }
.uix-faq-breakout .uix-faq-item[open] .uix-faq-summary { color: #0f172a; border-bottom: 0; }
/* Значок: плюс в круге. У открытого вопроса поворачивается в крестик и окрашивается акцентом. */
.uix-faq-breakout .faq-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #dfe4ec;
    transition: transform .25s ease, background .2s ease, border-color .2s ease;
}
.uix-faq-breakout .faq-icon::before { width: 12px; height: 1.8px; background: #0f172a; }
.uix-faq-breakout .faq-icon::after { width: 1.8px; height: 12px; background: #0f172a; }
.uix-faq-breakout .uix-faq-item[open] .faq-icon { transform: rotate(45deg); background: #eef3ff; border-color: #eef3ff; }
.uix-faq-breakout .uix-faq-item[open] .faq-icon::before,
.uix-faq-breakout .uix-faq-item[open] .faq-icon::after {
    transform: translate(-50%, -50%);
    opacity: 1;
    background: #2563eb;
}
.uix-faq-breakout .uix-faq-content {
    padding: 0 24px 22px;
    font-size: 15px;
    line-height: 1.7;
    color: #475569;
}
.uix-faq-breakout .uix-note-info { margin-top: 14px; padding: 14px 16px; border-left-width: 3px; font-size: 14.5px; background: var(--ui-accent-soft); color: var(--ui-accent-d); }
.uix-faq-breakout .uix-faq-content > :last-child { margin-bottom: 0; } /* без лишнего воздуха под ответом */
/* Плавное раскрытие там, где браузер умеет анимировать details (Chrome 131+); в остальных открывается сразу. */
@supports selector(::details-content) {
    .uix-faq-breakout .uix-faq-item::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size .28s ease, content-visibility .28s allow-discrete;
    }
    .uix-faq-breakout .uix-faq-item[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .uix-faq-breakout .uix-faq-item::details-content { transition: none; }
}
@media (max-width: 999px) {
    .uix-faq-breakout .uix-faq-header { margin-bottom: 26px; }
    .uix-faq-breakout .uix-faq-summary { padding: 17px 18px; font-size: 15.5px; }
    .uix-faq-breakout .uix-faq-content { padding: 0 18px 20px; }
    }

.uix-faq-breakout {
    padding-top: 60px !important;
    padding-bottom: 60px !important; 
}

/* ==========================================================
   3. WOOCOMMERCE: ОТЗЫВЫ И ФОРМА
   ========================================================== */

/* Дробные звёзды (агрегаты/карточки): серые + золотые поверх, ширина = --sp% (перенесено из инлайна). */
.op-starbar{position:relative;display:inline-block;white-space:nowrap;line-height:1}
.op-starbar__bg{color:#d7dde5}
.op-starbar__fg{position:absolute;left:0;top:0;color:#f59e0b;overflow:hidden;white-space:nowrap;width:var(--sp,0)}

/* --- ФОРМА ОТЗЫВОВ --- */

/* Главная карточка формы */

#respond {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

#cancel-comment-reply-link { display: none !important; }

/* Блок рейтинга */
.woocommerce .comment-form-rating {
    border: 2px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 10px 25px !important;
    margin-bottom: 20px !important;
    background: #F8FAFC !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    min-width: 0 !important;
    gap: 15px !important;
}

.woocommerce .comment-form-rating label {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    float: none !important;
    display: inline-block !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #475569 !important;
    font-size: 16px !important;
    white-space: nowrap !important;
}

/* Поле ввода */
#commentform textarea {
    background: #F8FAFC !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 15px 20px !important;
    font-size: 16px !important;
    color: #0f172a !important;
    box-shadow: none !important;
    min-height: 150px !important;
    width: 100% !important;
}

#commentform textarea:focus {
    background: #ffffff !important;
    border-color: #2563EB !important;
    outline: none !important;
}

.comment-form-comment label {
    font-weight: 700 !important;
    color: #475569 !important;
    margin-bottom: 10px !important;
    display: block !important;
}

/* Кнопка отправки */
input#submit.submit {
    background: linear-gradient(90deg, #2563EB 0%, #1D4ED8 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    padding: 16px 45px !important;
    border-radius: 12px !important;
    border: none !important;
    margin-top: 25px !important;
    cursor: pointer !important;
    box-shadow: 0 10px 20px -5px rgba(37, 99, 235, 0.4) !important;
}

input#submit.submit:hover {
    transform: translateY(-3px) !important;
}

/* Анимации и уведомления */
@keyframes shake-form {
    0% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    50% { transform: translateX(10px); }
    75% { transform: translateX(-10px); }
    100% { transform: translateX(0); }
}

/* Мобильная версия рейтинга */
@media (max-width: 768px) {
    .woocommerce .comment-form-rating {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .woocommerce .comment-form-rating label {
        font-size: 14px !important;
        width: 100% !important;
    }

    }

/* ==========================================================
   4. STYLE A: OPLATIM PREMIUM UIX (.b26 - Лендинги/Статьи)
   ========================================================== */

.b26-wrapper {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 20px 80px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--b26-text);
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: -0.01em;
}

/* Типографика .b26 */
.b26-h1 {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 20px;
    color: var(--b26-text);
    letter-spacing: -0.02em;
}

.b26-lead {
    font-size: 20px;
    line-height: 1.5;
    text-align: center;
    color: var(--b26-text-muted);
    margin-bottom: 40px;
    font-weight: 500;
}

.b26-h2 {
    font-size: 28px;
    font-weight: 800;
    margin-top: 60px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.3;
}

.b26-h2::before {
    content: '';
    display: block;
    width: 6px;
    height: 28px;
    background: linear-gradient(to bottom, #3b82f6, #1d4ed8);
    border-radius: 4px;
    flex-shrink: 0;
}

.b26-h3 {
    font-size: 22px;
    font-weight: 700;
    margin-top: 35px;
    margin-bottom: 15px;
    line-height: 1.3;
}

/* Meta теги .b26 */
.b26-meta-wrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--b26-border);
}

.b26-tag {
    background: #fff;
    color: var(--b26-text-muted);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--b26-border);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* Карточки .b26 */
.b26-card {
    background: #fff;
    border: 1px solid var(--b26-border);
    border-radius: var(--b26-radius);
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.03);
}

.b26-card-title {
    margin-top: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--b26-text);
}

.b26-risk-alert {
    margin-top: 28px;
    margin-bottom: 28px;
    background: #FEF2F2;
    border-left: 4px solid #EF4444;
    padding: 15px 20px;
    border-radius: 0 8px 8px 0;
    color: #991B1B;
    font-size: 16px;
    font-weight: 500;
}

/* Баннер OPLATIM .b26 */
.b26-cta-box {
    background: #0F172A;
    background-image: radial-gradient(circle at 100% 0%, #1e40af 0%, transparent 60%);
    border-radius: 24px;
    padding: 50px 40px;
    margin: 60px 0;
    text-align: center;
    color: #fff;
    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.4);
    position: relative;
    overflow: hidden;
}

.b26-cta-title {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 15px;
    color: #fff !important;
    line-height: 1.2;
}

.b26-cta-desc {
    font-size: 18px;
    color: #cbd5e1;
    margin-bottom: 35px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.b26-cta-grid {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* Кнопки .b26 */
.b26-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none !important;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.b26-btn-primary {
    background: linear-gradient(90deg, #2563EB 0%, #1D4ED8 100%);
    color: #ffffff !important;
    box-shadow: 0 8px 20px -5px rgba(37, 99, 235, 0.4);
}

.b26-btn-white {
    background: #ffffff;
    color: #0f172a !important;
    box-shadow: 0 8px 20px -5px rgba(255, 255, 255, 0.2);
}

.b26-btn:hover {
    transform: translateY(-2px);
    opacity: 0.95;
}

/* Таблица .b26 */
.b26-table-container {
    overflow-x: auto;
    margin: 40px 0;
    border-radius: 12px;
    border: 1px solid var(--b26-border);
    background: #fff;
    -webkit-overflow-scrolling: touch;
}

.b26-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.b26-table th {
    background: #F1F5F9;
    padding: 16px;
    text-align: left;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    color: #475569;
    white-space: nowrap;
}

.b26-table td {
    padding: 16px;
    border-top: 1px solid var(--b26-border);
    font-size: 15px;
}

/* Бейджи .b26 */
.b26-badge-green {
    background: #DCFCE7;
    color: #166534;
    padding: 5px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 12px;
    display: inline-block;
    white-space: nowrap;
}

.b26-badge-yellow {
    background: #FEF3C7;
    color: #92400E;
    padding: 5px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 12px;
    display: inline-block;
    white-space: nowrap;
}

.b26-badge-red {
    background: #FEE2E2;
    color: #991B1B;
    padding: 5px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 12px;
    display: inline-block;
    white-space: nowrap;
}

/* FAQ .b26 */
/* Размеры = эталон гифт-полок .agc-faq: 15px / 14×16 / радиус 12. */
.b26-faq details {
    background: #fff;
    border: 1px solid var(--b26-border);
    border-radius: 12px;
    margin-bottom: 8px;
    overflow: hidden;
}

.b26-faq summary {
    padding: 14px 44px 14px 16px;
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.45;
    list-style: none;
    position: relative;
}

.b26-faq summary::-webkit-details-marker {
    display: none;
}

.b26-faq summary::after {
    content: '+';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--b26-accent);
}

.b26-faq details[open] summary::after {
    content: '−';
}

.b26-faq-body {
    padding: 0 16px 15px;
    color: #4b5563;
    font-size: 14.5px;
    line-height: 1.6;
}

/* TOC .b26 */
.b26-toc {
    background: #fff;
    border: 1px solid var(--b26-border);
    border-radius: var(--b26-radius);
    padding: 25px;
    margin: 30px 0;
}

.b26-toc-title {
    font-weight: 800;
    font-size: 18px;
    margin-bottom: 15px;
}

.b26-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.b26-toc li {
    margin-bottom: 10px;
    padding-left: 15px;
    position: relative;
}

.b26-toc li::before {
    content: '•';
    color: var(--b26-accent);
    position: absolute;
    left: 0;
    top: 0px;
    font-size: 20px;
    line-height: 1;
}

.b26-toc a {
    text-decoration: none;
    color: #334155;
    font-weight: 500;
    font-size: 16px;
}

/* Картинки .b26 */
.b26-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    margin: 30px 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border: 1px solid var(--b26-border);
}

/* Адаптация .b26 под телефоны */
@media (max-width: 768px) {
    .b26-wrapper {
        padding: 0 16px 60px;
        font-size: 16px;
    }

    .b26-h1 {
        font-size: 26px;
        margin-bottom: 15px;
    }

    .b26-lead {
        font-size: 17px;
        margin-bottom: 30px;
    }

    .b26-h2 {
        font-size: 22px;
        margin-top: 40px;
    }

    .b26-h2::before {
        height: 22px;
        width: 4px;
    }

    .b26-h3 {
        font-size: 19px;
        margin-top: 30px;
    }

    .b26-cta-box {
        padding: 30px 20px;
        margin: 40px 0;
        border-radius: 16px;
    }

    .b26-cta-title {
        font-size: 24px;
    }

    .b26-cta-desc {
        font-size: 16px;
        margin-bottom: 25px;
    }

    .b26-cta-grid {
        flex-direction: column;
        gap: 12px;
    }

    .b26-btn {
        width: 100%;
        font-size: 15px;
        padding: 14px 20px;
    }

    .b26-card {
        padding: 20px;
        margin-bottom: 20px;
    }

    .b26-card-title {
        font-size: 18px;
    }

    .b26-risk-alert {
        font-size: 14px;
        padding: 12px;
    }

    .b26-table th,
    .b26-table td {
        padding: 12px;
        font-size: 13px;
    }

    .b26-faq summary {
        font-size: 15px;
        padding: 15px;
        padding-right: 40px;
    }

    .b26-faq summary::after {
        right: 15px;
        font-size: 20px;
    }

    .b26-faq-body {
        padding: 0 15px 15px;
        font-size: 15px;
    }

    .b26-meta-wrap {
        gap: 8px;
        margin-bottom: 30px;
    }

    .b26-tag {
        padding: 4px 10px;
        font-size: 12px;
    }
}

/* ==========================================================
   5. STYLE B: БЛОГ И СТАТЬИ (.opx - Основной блог)
   ========================================================== */

.opx-article {
    max-width: 980px;
    margin: 0 auto;
    padding: 4px 0 30px;
    font-family: 'Segoe UI', sans-serif;
    color: #202124;
    line-height: 1.75;
}

.opx-article h1 {
    font-size: clamp(26px, 4.5vw, 38px);
    font-weight: 900;
    margin: 20px 0 15px;
    color: #111;
}

.opx-article h2 {
    font-size: clamp(22px, 3.5vw, 28px);
    font-weight: 800;
    margin: 40px 0 16px;
    color: #202124;
}

.opx-article h3 {
    font-size: clamp(18px, 2.5vw, 22px);
    font-weight: 700;
    margin: 24px 0 12px;
    color: #202124;
}

.opx-article p {
    font-size: 17px;
    margin: 16px 0;
    color: #3c4043;
}

/* Карточки в статьях */
.opx-card {
    border: 1px solid #eaeaea;
    border-radius: 18px;
    padding: 24px;
    background: #fff;
    transition: transform 0.2s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
    margin-bottom: 24px;
}

.opx-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.06);
}

.opx-card h3 {
    margin-top: 0 !important;
    color: #1a73e8 !important;
}

/* Навигация в статье */
.opx-nav {
    margin: 24px 0;
    border: 1px solid #eaeaea;
    border-radius: 16px;
    padding: 20px 24px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
}

.opx-nav-title {
    font-weight: 800;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    color: #5f6368;
}

.opx-nav ul {
    margin: 0;
    padding-left: 20px;
}

.opx-nav li {
    margin: 8px 0;
    color: #202124;
}

.opx-nav a {
    font-weight: 600;
    text-decoration: none;
    border-bottom: none !important;
    color: #1a73e8;
}

/* Hero в статье */
.opx-hero {
    border: 1px solid #d2e3fc;
    border-radius: 20px;
    padding: 30px;
    background: linear-gradient(135deg, #e8f0fe 0%, #ffffff 80%);
    box-shadow: 0 12px 30px rgba(0,0,0,0.06);
    margin-bottom: 30px;
}

.opx-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    justify-content: center;
}

.opx-meta span {
    background: #fff;
    border: 1px solid #ccdcec;
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: #444;
}

/* Другое */
.opx-note {
    border: 1px solid #dbeafe;
    border-left: 5px solid #1a73e8;
    border-radius: 12px;
    padding: 20px;
    margin: 24px 0;
    background: #eff6ff;
    color: #1e3a8a;
}

.opx-faq {
    margin-top: 20px;
}

.faq-item {
    border: 1px solid #eaeaea;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.faq-q {
    font-weight: 700;
    color: #1a73e8;
    font-size: 17px;
    margin-bottom: 8px;
    cursor: pointer;
}

.faq-a {
    color: #4b5563;
    font-size: 16px;
    line-height: 1.6;
}

.opx-review-img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    margin: 25px 0;
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    display: block;
}

.article-end-section {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.author-credits {
    font-size: 15px;
    color: #5f6368;
}

.brand-link {
    color: #1a73e8 !important;
    font-weight: 700;
    text-decoration: none !important;
}

/* Таблицы статей (отдельные от .b26) */
.table-container {
    width: 100%;
    overflow-x: auto;
    margin: 20px 0 30px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
}

.responsive-payment-table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
    background-color: #ffffff;
    font-size: 15px;
}

.responsive-payment-table th {
    background-color: #f8fafc;
    color: #1e293b;
    font-weight: 700;
    text-align: left;
    padding: 16px;
    border-bottom: 2px solid #e2e8f0;
}

.responsive-payment-table td {
    padding: 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #475569;
    vertical-align: middle;
}

.status-easy {
    background: #dcfce7;
    color: #166534;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
}

.status-medium {
    background: #fef9c3;
    color: #854d0e;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
}

.status-hard {
    background: #fee2e2;
    color: #991b1b;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
}

/* ==========================================================
   6. BANNERS: БАННЕРЫ (ПРОМО И ВНУТРИ СТАТЕЙ)
   ========================================================== */

/* Баннер OPX (Внутри статей) */
.opx-premium-banner,
.opx-cta {
    background: radial-gradient(circle at top left, #2e1065, #0f172a) !important;
    border-radius: 24px !important;
    padding: 45px 30px !important;
    color: #ffffff !important;
    margin: 40px 0 !important;
    position: relative !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 25px !important;
    overflow: hidden;
}

.opx-banner-title,
.opx-premium-banner h3,
.opx-cta h3 {
    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    margin: 0 !important;
    text-align: center !important;
    width: 100% !important;
}

.opx-banner-text,
.opx-premium-banner p,
.opx-cta p {
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: #e0e7ff !important;
    margin: 0 !important;
    text-align: center !important;
}

.opx-premium-banner ul,
.opx-cta ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
    text-align: center !important;
}

.opx-premium-banner li,
.opx-cta ul li {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 12px !important;
}

.opx-cta-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px !important;
    width: 100% !important;
    margin-top: 10px !important;
}

@media (max-width: 700px) {
    .opx-premium-banner ul,
    .opx-cta ul {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================
   7. FOOTER: ПОДВАЛ САЙТА
   ========================================================== */

.oplatim-footer-wrapper {
    width: 100%;
    background: #ffffff;
    border-top: 1px solid var(--ui-line);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.site-footer .ast-builder-grid-row {
    padding: 0 !important;
    margin: 0 !important;
}

.footer-top-grid {
    width: 100%;
    max-width: 1200px;
    padding: 60px 20px 10px;
    display: grid;
    grid-template-columns: 1fr minmax(320px, 400px) 1fr; /* карточка помощи ровно по центру */
    gap: 48px;
    align-items: center;
}

.footer-col {
    display: flex;
    flex-direction: column;
}

/* КОЛОНКА 1: БРЕНД */
.brand-logo-row {
    margin-bottom: 14px;
    line-height: 1;
}
.brand-logo {
    font-size: 26px;
    font-weight: 900;
    color: #0f172a;
    text-decoration: none !important;
    letter-spacing: -0.5px;
    line-height: 1;
}

/* Логотип в подвале как в шапке: имя синее, домен тёмный */
.brand-logo__name { color: var(--b26-accent, #2563EB); }
.brand-logo__tld { color: #0f172a; }

.brand-desc-seo {
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 16px;
    max-width: 400px;
}

/* Время работы: аккуратная плашка с иконкой под текстом */
.footer-hours {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    align-self: flex-start;
    padding: 11px 16px;
    background: var(--ui-soft);
    border: 1px solid var(--ui-line);
    border-radius: 14px;
}

.footer-hours__ic {
    display: inline-flex;
    color: var(--b26-accent, #2563EB);
}

.footer-hours__ic .op-fic {
    width: 20px;
    height: 20px;
}

.footer-hours__tx {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    text-align: left;
}

.footer-hours__tx b {
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
}

.footer-hours__tx span {
    color: #64748b;
    font-size: 13px;
}

/* КОЛОНКА 2: КАРТОЧКА */
.action-col {
    align-items: center;
}

.action-card-filled {
    background: #ffffff;
    border: 1px solid var(--ui-line);
    border-radius: 24px;
    padding: 40px 30px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    box-shadow: var(--ui-card-sh);
}

.action-title {
    font-size: 16px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 20px;
}

/* ГРУППА КНОПОК (НОВОЕ) */
.footer-buttons-group {
    display: flex;
    gap: 12px;
    margin-bottom: 25px;
    width: 100%;
}

/* Кнопка Telegram в подвале того же вида, что в шапке */
.premium-btn {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: var(--ui-btn) !important;
    flex: 1; /* Кнопки делят место поровну */
    height: 52px;
    border-radius: 999px;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none !important;
    box-shadow: var(--ui-btn-sh);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    border: none;
    margin-bottom: 0 !important; /* Отступ через gap */
}

.premium-btn .op-fic {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* Стиль для второй кнопки (MAX) */
.btn-max-style {
    background: var(--ui-bg) !important;
    color: var(--ui-ink) !important;
    border: 1px solid var(--ui-line);
    box-shadow: none;
    border-radius: 999px;
}

.premium-btn:hover {
    background: var(--ui-accent-d) !important;
    transform: translateY(-1px);
}

.btn-max-style .op-fic {
    color: #4f46e5;
}

.btn-max-style:hover {
    background: #f8fafc !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
}

.payment-divider {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #64748b;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.payment-divider::before,
.payment-divider::after {
    content: '';
    height: 1px;
    width: 40px;
    background: #e2e8f0;
}

.payment-large-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.payment-large-icons svg.pay-ic {
    height: 34px;
    width: auto;
    display: block;
    transition: transform 0.2s ease;
    filter: drop-shadow(0 2px 6px rgba(15, 23, 42, .08));
}

.payment-large-icons svg.pay-ic:hover {
    transform: translateY(-2px);
}

/* КОЛОНКА 3: МЕНЮ */
.nav-col {
    align-items: flex-end;
}

.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 200px;
}

.nav-link {
    display: block;
    text-align: right;
    padding: 8px 15px;
    color: #475569;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none !important;
    border-radius: 10px;
    transition: all 0.2s ease;
    border-right: 3px solid transparent;
}

.nav-link:hover {
    color: #2563EB;
    background: #f8fafc;
    border-right-color: #2563EB;
    padding-right: 20px;
}

/* НИЖНИЙ БЛОК */
.footer-bottom-centered {
    width: 100%;
    max-width: 900px;
    padding: 30px 20px;
    border-top: 1px solid #f1f5f9;
    text-align: center;
    margin-top: 20px;
}

.legal-text-center {
    font-size: 12.5px;
    color: #64748b;
    margin-bottom: 15px;
    line-height: 1.5;
}

.legal-links-center {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 10px;
}

.legal-links-center a {
    font-size: 13px;
    color: #2563EB;
    font-weight: 600;
    text-decoration: none;
}

.copyright-center {
    font-size: 13px;
    color: #64748b;
}

@media screen and (max-width: 921px) {
    .footer-top-grid {
        display: flex;
        flex-direction: column;
        padding: 40px 20px 8px;
        gap: 30px;
    }

    .action-col {
        order: 1;
        width: 100%;
    }

    /* Кнопки на мобилках: строго одна под другой */
    .footer-buttons-group {
        flex-direction: column !important; 
        gap: 12px !important;
        width: 100%;
    }

    .footer-buttons-group .premium-btn {
        width: 100% !important;
        max-width: 100% !important;
        height: 56px !important;
        flex: none !important; /* Отключаем деление пополам */
        font-size: 15px !important; /* Увеличиваем шрифт для читаемости */
    }

    .nav-col {
        order: 2;
        width: 100%;
        align-items: center;
    }

    .brand-col {
        order: 3;
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .action-card-filled {
        max-width: 100%;
        padding: 30px 20px;
    }

    .footer-nav {
        max-width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .nav-link {
        text-align: center;
        background: #f8fafc;
        border: 1px solid #f1f5f9;
        border-radius: 50px;
        padding: 10px 20px;
        font-size: 14px;
        font-weight: 600;
        border-right: 1px solid #f1f5f9;
    }

    .footer-hours {
        align-self: center;
    }

    /* Мобилка: убрать огромный зазор перед нижним блоком */
    .footer-bottom-centered {
        margin-top: 8px;
        padding: 22px 20px 8px;
    }

    /* Мобилка: правовые ссылки в столбик по центру, плотно (в строку «Публичная оферта» обрезалась) */
    .legal-links-center {
        flex-direction: column;
        align-items: center;
        gap: 5px;
        margin-bottom: 6px;
    }
}

/* ==========================================================
   8. MAIN PAGE: ГЛАВНАЯ (HERO, BENEFITS, SERVICES)
   ========================================================== */

/* HERO SECTION */
.hero-section {
    width: 100%;
    position: relative;
    padding-top: 100px !important;
    padding-bottom: 80px !important;
    background: var(--ui-bg);
    z-index: 1;
}

/* Растяжка фона из стилей конструктора (Spectra) не нужна: секция и так во всю ширину. */
.hero-section::before { display: none; }

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    /* Доли, а не проценты: 55% + 45% + отступ 40px давали больше 100%, и на 1024 страница ехала вбок.
       58 на 42: колонке текста нужно не меньше 640px, иначе «из России в 2026 году» падает на 4-ю строку. */
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    gap: 40px;
    align-items: center;
}

.hero-content {
    text-align: left;
}

/* Плашка доверия над заголовком: строка с боевой главной в оформлении нового первого экрана. */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    padding: 5px 16px 5px 5px;
    border-radius: 999px;
    background: var(--ui-bg);
    border: 1px solid rgba(15, 23, 42, .08);
    color: var(--ui-ink);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 10px 24px -14px rgba(15, 23, 42, .3);
}

.hero-badge svg { width: 26px; height: 26px; flex: none; box-sizing: border-box; padding: 5.5px; border-radius: 50%; color: #ffffff; background: linear-gradient(135deg, #3b7dff, #1d4ed8); box-shadow: 0 4px 10px -4px rgba(37, 99, 235, .7); }

.hero-title {
    font-size: clamp(38px, 4.4vw, 58px);
    font-weight: 800;
    line-height: 1.08;
    color: var(--ui-ink) !important;
    margin: 0 0 22px 0;
    letter-spacing: -.03em;
    text-wrap: balance;
    font-family: var(--ui-h-font);
}

/* Акцент заголовка: чистый синий, без градиента по тексту. */
.color-accent {
    color: var(--ui-accent) !important;
}

.hero-desc {
    font-size: 17.5px;
    line-height: 1.7;
    color: var(--ui-text) !important;
    font-weight: 400;
    margin: 0 0 34px 0;
    max-width: 540px;
}

.hero-desc strong { color: var(--ui-ink); }

.hero-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-ui {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    height: 54px;
    padding: 0 30px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15.5px;
    line-height: 1;
    text-decoration: none !important;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease,
        transform 0.18s ease, box-shadow 0.18s ease;
    cursor: pointer;
}

.btn-ui svg { width: 19px; height: 19px; }

.btn-blue {
    background: var(--ui-btn);
    color: #ffffff !important;
    box-shadow: var(--ui-btn-sh);
}

.btn-blue:hover {
    background: var(--ui-accent-d);
    transform: translateY(-2px);
}

.btn-light {
    background: #ffffff;
    color: #0f172a !important;
    border: 1px solid var(--ui-line);
    box-shadow: none;
}

.btn-light:hover {
    border-color: #a9c0e8;
    color: #1d4ed8 !important;
    transform: translateY(-2px);
}

/* Визуал: мягкое свечение и тонкое пунктирное кольцо за картой. */
.hero-image-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
}

.hero-image-wrap::before {
    content: "";
    position: absolute;
    width: 78%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.16) 0%, rgba(99, 102, 241, 0.07) 45%, transparent 70%);
    pointer-events: none;
    opacity: .45;
}

.hero-image-wrap::after {
    content: "";
    position: absolute;
    width: 88%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1.5px dashed rgba(37, 99, 235, 0.16);
    pointer-events: none;
    opacity: .45;
}

.hero-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 40px 80px rgba(37, 99, 235, 0.22));
    animation: floating 8s ease-in-out infinite;
    max-width: 640px;
}

@keyframes floating {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}

/* BENEFITS SECTION */
.benefits-section {
    width: 100%;
    position: relative;
    background: var(--ui-soft);
    padding: 80px 0;
    margin-top: 0 !important;
    z-index: 2;
    box-shadow: none;
}

.benefits-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 50px auto;
}

.section-title {
    font-size: 38px;
    font-weight: 800;
    color: var(--ui-ink);
    margin-bottom: 15px;
    letter-spacing: -.03em;
    font-family: var(--ui-h-font);
}

.section-desc {
    font-size: 18px;
    color: var(--ui-text);
    line-height: 1.6;
}

/* ── Секция преимуществ «стекло на авроре»: полупрозрачные размытые
   карточки поверх градиентного фона. Внутри карточки — грид
   «иконка + заголовок» в строку, текст под ними. ── */
.bn-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.bn-card {
    position: relative;
    border-radius: var(--ui-r);
    padding: 24px 26px;
    background: var(--ui-bg);
    border: 1px solid var(--ui-line);
    box-shadow: var(--ui-card-sh);
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 15px;
    align-items: center;
    align-content: start;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.bn-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 44px -30px rgba(15, 23, 42, .45);
}

.bn-ic {
    grid-row: 1;
    width: 44px;
    height: 44px;
    background: var(--ui-accent-soft);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--ui-accent);
    box-shadow: none;
}

.bn-ic svg { width: 21px; height: 21px; }

.bn-title {
    grid-row: 1;
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #0f172a;
    margin: 0;
    line-height: 1.3;
}

.bn-text {
    grid-column: 1 / -1;
    font-size: 14.2px;
    color: var(--ui-text);
    line-height: 1.62;
    margin: 13px 0 0;
}

.bn-text strong { color: var(--ui-ink); }

/* CTA Block */
.benefits-cta-box {
    margin-top: 60px;
    background: linear-gradient(160deg, #1c1d21 0%, #121316 62%);
    border-radius: 28px;
    padding: 56px;
    text-align: left;
    position: relative;
    overflow: hidden;
    box-shadow: none;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 48px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .06);
    background-origin: border-box;
}

/* Графитовая карточка: слева текст и кнопки, справа панель гарантий. Оранжевый только точками:
   фраза в заголовке, контуры галочек и плашки, точка света у края. Остальное белое и серое. */
.benefits-cta-box::before {
    content: "";
    position: absolute;
    left: -48px;
    top: -44px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--ui-dark-accent) 0%, color-mix(in srgb, var(--ui-dark-accent) 55%, transparent) 7%, color-mix(in srgb, var(--ui-dark-accent) 16%, transparent) 26%, transparent 62%);
    opacity: .85;
    pointer-events: none;
}
.benefits-cta-box > * { position: relative; z-index: 1; min-width: 0; }

.cta-content {
    position: relative;
    z-index: 2;
    max-width: none;
    margin: 0;
}

.cta-title {
    font-size: clamp(30px, 3.2vw, 42px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    font-family: var(--ui-h-font);
    line-height: 1.08;
    letter-spacing: -.03em;
}

.cta-accent { color: var(--ui-dark-accent); }

.cta-desc {
    font-size: 18px;
    color: #a3a6ab;
    margin-bottom: 30px;
    line-height: 1.6;
}

.cta-desc strong { color: #ffffff; }

.cta-btns {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-white-glow {
    background: #ffffff;
    color: var(--ui-dark) !important;
    padding: 16px 32px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border: 2px solid #ffffff;
    box-shadow: none;
}

.btn-white-glow:hover {
    background: #eff6ff;
    transform: translateY(-3px);
}

.btn-outline-glow {
    background: transparent;
    color: #ffffff !important;
    padding: 16px 32px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none !important;
    border: 2px solid rgba(255, 255, 255, .22);
    transition: all 0.3s ease;
    /* как у белой кнопки: без этого на телефоне, где кнопка во всю ширину, надпись липла к левому краю */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-outline-glow:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}

/* Панель гарантий справа в тёмной карточке. */
.cta-panel {
    padding: 6px 22px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    background: rgba(255, 255, 255, .02);
}
.cta-panel__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.cta-panel__ic {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .16);
    color: #ffffff;
}
.cta-panel__ic svg { width: 20px; height: 20px; }
.cta-panel__name { color: #ffffff; font-size: 17px; font-weight: 700; }
.cta-panel__badge {
    margin-left: auto;
    padding: 6px 14px;
    border: 1px solid var(--ui-dark-accent);
    border-radius: 999px;
    color: var(--ui-dark-accent);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
}
.cta-panel__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    color: #c9cbd1;
    font-size: 15.5px;
}
.cta-panel__row:last-child { border-bottom: 0; }
.cta-panel__chk {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1.5px solid var(--ui-dark-accent);
    border-radius: 8px;
    color: var(--ui-dark-accent);
}
.cta-panel__chk svg { width: 16px; height: 16px; }

/* На телефонах круглый значок уступает место: «Ваш платёж» и плашка остаются в одну строку. */
@media (max-width: 440px) {
    .cta-panel { padding: 4px 14px; }
    .cta-panel__ic { display: none; }
    .cta-panel__head { gap: 8px; }
}

/* SERVICES GRID */
.services-breakout {
    width: 100%;
    position: relative;
    background: #ffffff;
    padding: 80px 0;
    z-index: 2;
}

.services-subtitle { color: var(--ui-text); }

.services-footer {
    text-align: center;
    margin-top: 36px;
}

/* Кнопка «Больше сервисов»: тёмная пилюля с чипом-счётчиком и стрелкой. */
.services-footer .op-allbtn {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 15px 26px;
    border-radius: 999px;
    background: var(--ui-bg);
    color: var(--ui-ink) !important;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    box-shadow: none;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    border: 1px solid #dbe2ec;
}
.services-footer .op-allbtn:hover {
    background: var(--ui-soft);
    transform: translateY(-2px);
}
.op-allbtn__chip {
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--ui-accent-soft);
    border: 1px solid transparent;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ui-accent-d);
}
.op-allbtn svg { width: 18px; height: 18px; }

/* МОБИЛЬНАЯ АДАПТАЦИЯ ГЛАВНОЙ */
@media (max-width: 1024px) {
    .bn-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 921px) {
    .hero-section {
        padding-top: 40px !important;
        padding-bottom: 60px !important;
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    .hero-content {
        margin-top: 30px;
    }
    .hero-badge {
        margin-bottom: 16px;
    }
    .hero-title {
        font-size: 34px !important;
        margin-bottom: 18px;
    }

    .hero-desc {
        font-size: 16.5px;
        margin: 0 auto 28px auto;
        max-width: 100%;
    }

    .hero-btns {
        flex-direction: column;
        width: 100%;
        gap: 15px;
        margin-bottom: 40px;
    }

    .btn-ui {
        width: 100%;
        height: 56px;
        font-size: 16px;
    }

    .hero-image-wrap {
        width: 100%;
        margin: 0;
        order: 2;
    }

    .benefits-section,
    .services-breakout {
        padding: 50px 0;
    }

    .section-title {
        font-size: 30px;
    }

    .bn-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 0 20px;
    }

    .bn-card {
        padding: 18px 18px 20px;
        column-gap: 14px;
    }

    .bn-ic {
        width: 42px;
        height: 42px;
    }

    .bn-title {
        font-size: 16px;
    }

    .bn-text {
        margin-top: 12px;
    }

    .benefits-cta-box {
        padding: 32px 20px;
        border-radius: 28px;
        margin: 0 20px;
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .cta-title {
        font-size: 28px;
    }

    .cta-btns {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .btn-white-glow,
    .btn-outline-glow {
        width: 100%;
        justify-content: center;
    }
    .cta-panel { padding: 4px 16px; }
    .cta-panel__row { font-size: 15px; padding: 13px 0; }
    .cta-panel__head { flex-wrap: wrap; gap: 10px; }
    .cta-panel__ic { width: 38px; height: 38px; }
    .cta-panel__name { font-size: 15.5px; white-space: nowrap; }
    .cta-panel__badge { padding: 5px 10px; font-size: 12.5px; }

    .wp-block-uagb-container.uagb-block-d0c435f8 {
        padding-left: 0px;
        padding-right: 0px;
    }
}

/* Телефон: карточка помощи была зажата полями (280 точек из 360), а заголовок и текст
   набраны по-планшетному крупно, поэтому блок растягивался почти на два экрана. */
@media (max-width: 600px) {
    .benefits-cta-box { margin-inline: 0; padding: 24px 18px; gap: 20px; border-radius: 22px; }
    .benefits-cta-box::before { left: -40px; top: -38px; width: 150px; height: 150px; }
    .cta-title { font-size: 23px; line-height: 1.16; letter-spacing: -.02em; margin-bottom: 10px; }
    .cta-desc { font-size: 15.5px; line-height: 1.55; margin-bottom: 20px; }
    .cta-btns { gap: 10px; }
    .btn-white-glow, .btn-outline-glow { padding: 14px 20px; font-size: 15px; }
    .cta-panel { padding: 2px 14px; }
    .cta-panel__row { font-size: 14.5px; padding: 11px 0; }
    .cta-panel__name { font-size: 15px; }
    .cta-panel__ic { width: 34px; height: 34px; }
}

/* ==========================================================
   КОНЕЦ СТРУКТУРИРОВАННОГО CSS
   ========================================================== */
/* =========================================================
   КАРТОЧКА ТОВАРА (фичи + кнопка связи) — перенесено из сниппета #12
   ========================================================= */
.oplatim-uix-card{background:#fff;border:1px solid #eef2f7;border-radius:18px;box-shadow:0 14px 34px -16px rgba(15,23,42,.18);padding:16px;margin:22px 0}
.uix-badge{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#eef5ff,#e6efff);border:1px solid #d6e4ff;color:#1d4ed8;font-weight:700;font-size:13px;line-height:1.3;padding:10px 13px;border-radius:11px;margin-bottom:12px}
.uix-badge svg{width:17px;height:17px;flex:0 0 auto;color:#16a34a}
.uix-features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.uix-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;padding:14px 6px;background:#fbfcfe;border:1px solid #eef2f7;border-radius:14px;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.uix-item:hover{border-color:#dbe6fb;box-shadow:0 10px 22px -14px rgba(37,99,235,.45);transform:translateY(-2px)}
.uix-icon-box{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:12px}
.uix-icon-box svg{width:21px;height:21px}
.icon-bg-blue{background:linear-gradient(135deg,#eaf2ff,#dbe8ff);color:#2563eb}
.icon-bg-green{background:linear-gradient(135deg,#e7f8ef,#d6f2e2);color:#16a34a}
.icon-bg-purple{background:linear-gradient(135deg,#f2ecff,#e6daff);color:#7c3aed}
.uix-value{font-size:13.5px;font-weight:700;color:#0f172a}
.op-cta{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.op-cta__btn{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;padding:15px 14px;border-radius:14px;font-weight:700;font-size:15px;line-height:1.1;text-decoration:none!important;border:1.5px solid transparent;transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease}
.op-cta__btn span{white-space:nowrap}
.op-cta__logo{width:22px;height:22px;flex:0 0 auto}
.op-cta__logo--tile{filter:drop-shadow(0 2px 4px rgba(37,99,235,.35))}
.op-cta__btn--max{background:#fff;color:#0f172a!important;border-color:#e7edf6}
.op-cta__btn--max:hover{border-color:#cdd9ee;transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(15,23,42,.3)}
.op-cta__more{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;font-size:13px;font-weight:600;color:#64748b!important;text-decoration:none!important;transition:color .15s ease}
.op-cta__more span{transition:transform .15s ease}
.op-cta__more:hover{color:#2563EB!important}
.op-cta__more:hover span{transform:translateX(3px)}
.op-cta__note{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px 0 2px;font-size:12.5px;font-weight:600;color:#16a34a}
.op-cta__note svg{width:15px;height:15px;flex:0 0 auto}
@media (max-width:480px){.op-cta{grid-template-columns:1fr}}
/* Телефон: «10-15 минут» не помещалось в плитку и ломалось на две строки,
   из-за чего весь ряд становился выше и рыхлее. Плитки плотнее, значение в одну строку. */
@media (max-width:480px){
  .oplatim-uix-card{padding:14px}
  .oplatim-uix-card .uix-features-grid{gap:6px}
  .oplatim-uix-card .uix-item{padding:13px 4px;gap:6px}
  .oplatim-uix-card .uix-icon-box{width:38px;height:38px;border-radius:11px}
  .oplatim-uix-card .uix-icon-box svg{width:19px;height:19px}
  .oplatim-uix-card .uix-item .uix-label{font-size:11.5px}
  .oplatim-uix-card .uix-item .uix-value{font-size:12.5px;white-space:nowrap}
}
/* Самые узкие телефоны: иначе плитка с длинным значением забирает ширину у соседних */
@media (max-width:350px){
  .oplatim-uix-card .uix-features-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .oplatim-uix-card .uix-item .uix-value{font-size:11px}
  .oplatim-uix-card .uix-item .uix-label{font-size:11px}
}
/* 922-1199: блок покупки в узкой колонке, две кнопки в ряд не помещаются и вылезают за край */
@media (min-width:922px) and (max-width:1199px){.op-cta{grid-template-columns:1fr}}

/* =========================================================================
   ПОИСК ПО СЕРВИСАМ (.op-search) — форма из inc/search.php.
   Живёт здесь, а не инлайном в PHP: main.css грузится на всех страницах, поэтому
   форма одинаково оформлена и на витрине, и в категориях, и в выдаче поиска.
   ========================================================================= */
.op-search{position:relative;display:flex;align-items:center;gap:10px;max-width:640px;margin:0 auto;background:#fff;border:1.5px solid #2563EB;border-radius:12px;padding:4px 4px 4px 14px;transition:box-shadow .16s ease}
.op-search:focus-within{box-shadow:0 0 0 4px rgba(37,99,235,.18)}
.op-search__ico{flex:0 0 auto;display:flex;color:#868D99}
.op-search__ico svg{width:19px;height:19px}
/* Двойной класс — не прихоть: Astra красит инпуты глобально селектором
   input[type="search"] (рамка + height:40px), и он специфичнее одиночного класса.
   Поэтому внутри поля рисовалась вторая рамка-«коробка». Перебиваем по правилам
   каскада, без !important. */
.op-search .op-search__input{flex:1;border:0;outline:0;height:auto;min-height:0;box-shadow:none;border-radius:0;padding:14px 2px;font-size:15.5px;font-weight:500;font-family:'Onest','Inter',system-ui,sans-serif;color:#0B0C0E;background:transparent;min-width:0}
.op-search .op-search__input:focus{border:0;box-shadow:none;outline:0}
.op-search__input::placeholder{color:#A4AAB5;font-weight:400}
.op-search__input::-webkit-search-cancel-button{-webkit-appearance:none}
/* Кнопка «Найти» — так поиск выглядит у всех больших маркетплейсов (Ozon, WB,
   Яндекс). Скромная подпись «Enter» читалась как «мы тут не уверены». */
.op-search__btn{flex:0 0 auto;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;background:linear-gradient(135deg,#2563EB,#1D4ED8);color:#fff;border-radius:9px;padding:0 24px;font:700 14px 'Onest','Inter',sans-serif;letter-spacing:.01em;transition:filter .15s ease}
.op-search .op-search__btn:hover{filter:brightness(1.08)}
.op-search__btn:focus-visible{outline:2px solid #0B0C0E;outline-offset:2px}
@media (max-width:520px){.op-search .op-search__input{padding:12px 2px;font-size:15px}.op-search__btn{padding:0 18px;font-size:13.5px}}

/* Выпадающие подсказки мгновенного поиска (логика в assets/js/app.js). */
.op-sg{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:120;background:#fff;border:1px solid #E6E8EC;border-radius:14px;box-shadow:0 20px 44px -18px rgba(11,12,14,.34),0 0 0 1px rgba(11,12,14,.03);padding:6px;max-height:min(60vh,420px);overflow-y:auto;font-family:'Onest','Inter',sans-serif}
.op-sg[hidden]{display:none}
.op-sg__i{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;text-decoration:none!important;color:#0B0C0E;transition:background .12s ease}
.op-sg__l{flex:0 0 auto;width:34px;height:34px;border-radius:9px;object-fit:cover;background:#F3F5F8;border:1px solid #EDF0F4}
.op-sg__l--ph{display:grid;place-items:center;font-weight:800;font-size:15px;color:#8A94A6}
.op-sg__n{flex:1}
.op-sg__p{margin-left:auto}
.op-sg__i:hover,.op-sg__i.is-on{background:#F3F5F8}
.op-sg__n{min-width:0;font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-sg__n b{color:#2563EB;font-weight:800}
.op-sg__n i{font-style:normal;display:block;font-size:11.5px;font-weight:500;color:#94A3B8;margin-top:1px}
.op-sg__p{flex:0 0 auto;font-size:14px;font-weight:800;color:#0B0C0E;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.op-sg__no{padding:16px 14px;font-size:13.5px;line-height:1.5;color:#64748B}
/* Подсказки в тёмной синей шапке: слегка приподнимаем контраст рамки. */
.op-hero__search .op-sg{border-color:rgba(11,12,14,.08)}

/* ==========================================================
   ЕДИНЫЙ ВЕРТИКАЛЬНЫЙ РИТМ И FULL-BLEED СЕКЦИЙ ГЛАВНОЙ
   Перебивает разнобой main.css ↔ UAGB: у всех секций одинаковые
   отступы сверху/снизу. Десктоп 80/80 (герой 100/80), мобилка 44/44.
   Full-bleed: секция физически растягивается на всю ширину окна
   (какой бы монитор ни был — фон и градиенты во весь экран),
   негативные маржины выводят её из центрированного контейнера.
   Горизонтальный скролл от 100vw глушит overflow-x: hidden у body.
   ========================================================== */
.hero-section,
.benefits-section,
.services-breakout,
.op-gift-breakout,
.op-guides-breakout,
.op-more-breakout,
.reviews-breakout,
.uix-faq-breakout {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

/* Контейнеры Spectra вокруг секций главной несут свой прозрачный отступ 10px сверху и снизу.
   Между двумя цветными секциями он просвечивал белой полосой (под подарочными картами перед
   переводами). Фон и воздух задают сами секции, контейнеру отступ не нужен. */
.home .entry-content > .wp-block-uagb-container.alignfull {
    padding-top: 0;
    padding-bottom: 0;
}
.hero-section {
    padding-top: 100px !important;
}

/* ПОЛЕЗНЫЕ ГАЙДЫ на главной: карточки статей (.opb-card из blog.css) в рамке 1200.
   Astra в шаблоне конструктора снимает max-width и ставит margin: auto, поэтому
   ширину и отступы фиксируем через !important, как у соседних секций. */
.op-guides-breakout {
    background: var(--ui-soft);
}

.op-guides {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px;
}

.op-guides__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 30px;
}

.op-guides__head > * { margin: 0 !important; }

.op-guides__t h2 {
    margin: 0 0 10px !important;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 800;
    letter-spacing: -.03em;
    color: #0f172a;
    font-family: var(--ui-h-font);
}

.op-guides__t p {
    margin: 0 !important;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--ui-text);
}

.op-guides__all {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 4px;
    font-weight: 700;
    font-size: 15.5px;
    color: #2563eb !important;
    text-decoration: none !important;
    transition: gap 0.18s ease;
}

.op-guides__all:hover { gap: 12px; }
.op-guides__all svg { width: 18px; height: 18px; }

/* Журнальная раскладка: слева главный гайд крупно, справа список из трёх со значком сервиса. */
.op-gd {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}
.op-gd__feat {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ui-line);
    border-radius: 24px;
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    box-shadow: var(--ui-card-sh);
}
.op-gd__feat:hover { transform: translateY(-3px); border-color: #d8e0ec; box-shadow: 0 24px 44px -30px rgba(15, 23, 42, .45); }
.op-gd__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #eef2f7; }
.op-gd__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.op-gd__feat:hover .op-gd__media img { transform: scale(1.03); }
.op-gd__body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 22px 24px 24px; }
.op-gd__tag {
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef3ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}
.op-gd__title { font-size: 22px; font-weight: 800; line-height: 1.25; letter-spacing: -.03em; color: #0f172a; font-family: var(--ui-h-font); }
.op-gd__desc { font-size: 15px; line-height: 1.6; color: #64748b; }
.op-gd__meta { font-size: 13px; color: #64748b; }
.op-gd__body .op-gd__meta { margin-top: auto; padding-top: 6px; }
.op-gd__list {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ui-line);
    border-radius: 24px;
    box-shadow: var(--ui-card-sh);
}
.op-gd__row {
    flex: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--ui-line);
    text-decoration: none !important;
    transition: background .15s ease;
}
.op-gd__row:last-child { border-bottom: 0; }
.op-gd__row:hover { background: #f8fafc; }
.op-gd__row .opb-logo { width: 48px; height: 48px; border-radius: 12px; }
.op-gd__rt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.op-gd__rtitle {
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.35;
    color: #0f172a;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.op-gd__go {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #dfe4ec;
    color: #0f172a;
    transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.op-gd__go svg { width: 16px; height: 16px; }
.op-gd__row:hover .op-gd__go { background: #2563eb; border-color: #2563eb; color: #fff; transform: translateX(2px); }

@media (max-width: 900px) {
    .op-gd { grid-template-columns: minmax(0, 1fr); }
    .op-gd__title { font-size: 19px; }
    .op-gd__body { padding: 18px 18px 20px; }
    .op-gd__row { gap: 12px; padding: 16px; }
    .op-gd__row .opb-logo { width: 44px; height: 44px; }
    .op-gd__rtitle { font-size: 15.5px; }
}

@media (max-width: 640px) {
    /* На телефоне стрелка уступает место тексту: вся строка и так ссылка. */
    .op-gd__go { display: none; }
    .op-gd__row { grid-template-columns: auto minmax(0, 1fr); }
    .op-gd__rtitle { -webkit-line-clamp: 4; }
    .op-guides__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 22px;
    }
}

/* Контейнеры-сироты: у этих секций не было своего max-width — раньше их
   сдерживала узкая секция, после full-bleed контент вернётся в рамку 1200,
   а фон секции остаётся во весь экран. */
.reviews-container,
.services-container,
.uix-faq-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}
@media screen and (max-width: 921px) {
    .hero-section,
    .benefits-section,
    .services-breakout,
    .op-gift-breakout,
    .op-more-breakout,
    .reviews-breakout,
    .uix-faq-breakout {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
    }
}
/* ==========================================================
   GIFT-СЕКЦИЯ ГЛАВНОЙ (вместо акций): тёмные брендовые карты.
   Нарочно контрастирует с белыми каталожными карточками.
   ========================================================== */
.op-gift-breakout { background: var(--ui-soft); }
.op-gift { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.op-gift__head { text-align: center; max-width: 780px; margin: 0 auto 36px; }
.op-gift__head h2 { font-size: 38px; font-weight: 800; margin: 0 0 12px; letter-spacing: -.03em; line-height: 1.2; text-wrap: balance; font-family: var(--ui-h-font); color: var(--ui-ink); }
/* Заголовки секций главной одного размера с «Надёжной оплатой» и «Оплатой подписок». У отзывов и FAQ
   размер задан в CSS страницы Spectra (у отзывов с !important), поэтому перекрываем с тем же весом. */
.home .reviews-title,
.home .uix-faq-title { font-size: 38px !important; font-weight: 800 !important; letter-spacing: -.03em; line-height: 1.2; text-wrap: balance; font-family: var(--ui-h-font); }
.home .uix-faq-title { text-transform: lowercase; } /* текст набран капсом, показываем обычным регистром */
.home .uix-faq-title::first-letter { text-transform: uppercase; }
@media (max-width: 921px) {
    .op-gift__head h2,
    .home .reviews-title,
    .home .uix-faq-title { font-size: 30px !important; }
}
.op-gift__head p { color: var(--ui-text); font-size: 16px; line-height: 1.6; margin: 0; }
.op-gift__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px; }
.opg { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; min-height: 188px; border-radius: 20px; padding: 22px; color: #fff !important; text-decoration: none !important; box-shadow: 0 14px 30px -22px rgba(15, 23, 42, .5); transition: transform .18s ease, box-shadow .18s ease; }
.opg:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -24px rgba(15, 23, 42, .55); }
.opg__ic { position: relative; z-index: 1; width: 46px; height: 46px; }
.opg__ic svg { width: 46px; height: 46px; color: #fff; display: block; }
.opg__body { position: relative; z-index: 1; margin-top: auto; }
.opg__body b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.opg__body span { display: block; font-size: 13px; opacity: .78; margin-top: 5px; line-height: 1.4; }
.opg__strip { position: absolute; right: 22px; top: 26px; font-size: 12px; letter-spacing: 3px; opacity: .38; font-weight: 800; }
.opg__wm { position: absolute; right: -26px; bottom: -30px; opacity: .10; pointer-events: none; }
.opg__wm svg { width: 160px; height: 160px; color: #fff; }
.opg--apple { background: linear-gradient(150deg, #17181d, #2e2f38); }
.opg--steam { background: linear-gradient(150deg, #16202d, #2a475e); }
.opg--playstation { background: linear-gradient(150deg, #003087, #0070d1); }
.opg--netflix { background: linear-gradient(150deg, #45080b, #b00710); }
.opg--roblox { background: linear-gradient(150deg, #101114, #34363d); }
.opg--googleplay { background: linear-gradient(150deg, #01614a, #02a26f); }
.opg-stars { display: flex; align-items: center; gap: 18px; border-radius: 20px; padding: 22px 26px; background: linear-gradient(120deg, #b45309, #f59e0b 55%, #fbbf24); color: #fff !important; text-decoration: none !important; box-shadow: 0 14px 30px -22px rgba(15, 23, 42, .5); transition: transform .18s ease, box-shadow .18s ease; }
.opg-stars:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -24px rgba(15, 23, 42, .55); }
.opg-stars__ic { flex: 0 0 auto; }
.opg-stars__ic svg { width: 44px; height: 44px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .25)); }
.opg-stars__t b { display: block; font-size: 19px; font-weight: 800; }
.opg-stars__t span { display: block; font-size: 13.5px; opacity: .9; margin-top: 4px; }
.opg-stars__btn { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #fff; color: #92400e; border-radius: 12px; padding: 12px 18px; font-weight: 700; font-size: 14.5px; white-space: nowrap; }
@media screen and (max-width: 980px) {
    .op-gift__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media screen and (max-width: 640px) {
    .op-gift__grid { grid-template-columns: 1fr; }
    .opg { min-height: 150px; }
    .opg-stars { flex-direction: column; text-align: center; gap: 12px; padding: 22px 18px; }
    .opg-stars__btn { margin-left: 0; }
}

/* ==========================================================
   ПЕРЕВОДЫ ЗА ГРАНИЦУ И ДРУГИЕ ПЛАТЕЖИ (главная, шорткод [home_more], inc/home-more.php):
   светлая секция, слева текст и кнопка, справа макет экрана перевода «на счёт IBAN или карту»,
   ниже две карточки и строка доверия. Вариант 2 из пяти, выбран владельцем 14.09.2026.
   ========================================================== */
.op-more-breakout { background: var(--ui-bg); }
/* Секция стоит прямо в тексте страницы, а Astra в шаблоне конструктора снимает max-width у блоков
   второго уровня внутри .entry-content, поэтому ширину колонки держим с !important. */
.op-more { max-width: 1200px !important; margin: 0 auto; padding: 0 20px; color: #0f172a; }

/* Текст, список и кнопка. */

/* Макет экрана перевода: переключатель «счёт IBAN или карта», поля «вы платите» и «получатель получит». */

/* Карточки «сервиса нет в каталоге» и «пополнение баланса», строка доверия. */
.op-more__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 56px; }
.op-more a.op-more__card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 6px 16px; padding: 24px; border: 1px solid var(--ui-line); border-radius: var(--ui-r); background: #fff; color: #0f172a; text-decoration: none; box-shadow: var(--ui-card-sh); transition: transform .18s ease, box-shadow .18s ease; }
.op-more a.op-more__card:hover { transform: translateY(-4px); color: #0f172a; box-shadow: 0 24px 44px -30px rgba(15, 23, 42, .45); }
.op-more__ic { grid-row: span 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--ui-accent-soft); color: #2563eb; }
.op-more__ic svg { width: 24px; height: 24px; }
.op-more__card b { font-size: 18px; font-weight: 800; line-height: 1.3; }
.op-more__card > span:not(.op-more__ic) { color: #5b6677; font-size: 14.5px; line-height: 1.55; }
.op-more__card em { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: #2563eb; font-size: 14.5px; font-style: normal; font-weight: 700; }
.op-more__card em svg { width: 16px; height: 16px; }
.op-more a:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .op-more a.op-more__card,
    .op-more a.op-more__btn { transition: none; }
}
@media screen and (max-width: 980px) {

    .op-more__cards { margin-top: 40px; }
}
@media screen and (max-width: 640px) {

    .op-more__cards { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
    .op-more a.op-more__card { padding: 20px; }
    }

/* ==========================================================
   ЛЕНТА СКРИНШОТОВ ОТЗЫВОВ (rv-marq): бесшовный медленный
   проезд, чистые края без затемнений, пауза при наведении.
   ========================================================== */
/* Секция отзывов: нежный тинт-фон, чтобы тени телефонов «сидели» на подложке. */
.reviews-breakout { background: var(--ui-bg); box-shadow: none; }
.reviews-subtitle { color: var(--ui-text); }

/* Слайдер пруфов (по образцу, который выбрал владелец): в кадре РОВНО
   4 крупных ЦЕЛЫХ скрина — полная высота, без какой-либо обрезки.
   Все исходники 518×1024, поэтому ряд идеально ровный. Листается
   страницами: плавный transform, стрелки по бокам, автосмена в JS. */
.rv-marq {
    position: relative;
    margin: 28px auto 0;
    overflow: hidden;
    container-type: inline-size;
}
.rv-track {
    display: flex;
    gap: 16px;
    width: max-content;
    padding: 8px 0 18px;
    transition: transform .6s cubic-bezier(.25, .8, .25, 1);
}
.rv-shot {
    flex: 0 0 auto;
    /* Слот — ровно четверть кадра при любой ширине контейнера:
       в кадре ВСЕГДА 4 целых скрина, огрызков по краям не бывает. */
    width: 271px;
    width: calc((100cqw - 48px) / 4);
    aspect-ratio: 518 / 1024;
    border-radius: 18px;
    border: 1px solid var(--ui-line);
    box-shadow: var(--ui-card-sh);
    overflow: hidden;
    background: var(--ui-soft); /* подложка, пока скрин догружается: пустая белая рамка выглядела как поломка */
}
.rv-shot img {
    width: 100%;
    height: auto;
    display: block;
}

/* Стрелки слайдера: круглые, по бокам кадра, всегда видимые. */
.rv-marq .rv-btn {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--ui-line);
    background: #fff;
    color: #334155;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.rv-marq .rv-btn:hover { background: #2563eb; border-color: #2563eb; color: #fff; }
.rv-marq .rv-btn svg { width: 19px; height: 19px; }
.rv-btn--prev { left: 10px; }
.rv-btn--next { right: 10px; }

/* Кнопка «Отзывы в Telegram»: тёмная пилюля с самолётиком и счётчиком. */
.reviews-footer { text-align: center; margin-top: 26px; }
.reviews-footer .btn-reviews-action {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 15px 26px;
    border-radius: 999px;
    background: var(--ui-bg);
    color: var(--ui-ink) !important;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none !important;
    box-shadow: none;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
    border: 1px solid #dbe2ec;
}
.reviews-footer .btn-reviews-action:hover {
    background: var(--ui-soft);
    transform: translateY(-2px);
}
.btn-reviews-action svg { width: 18px; height: 18px; color: var(--ui-ink); transition: color .15s ease; }
.btn-reviews-action:hover svg { color: var(--ui-accent); }
.btn-reviews-action .rv-count {
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--ui-accent-soft);
    border: 1px solid transparent;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ui-accent-d);
}
@media screen and (max-width: 768px) {
    /* Телефон: в кадре ровно 2 целых скрина полной высоты. */
    .rv-track { gap: 12px; padding-bottom: 14px; }
    .rv-shot { width: calc((100cqw - 12px) / 2); border-radius: 14px; }
    .rv-marq .rv-btn { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
    .rv-track { transition: none; }
}

/* Карта Telegram Premium в gift-секции главной (фирменный фиолетово-синий градиент). */
.opg--tgpremium { background: linear-gradient(150deg, #2b1f73 0%, #5b3fd6 52%, #2a9df0 100%); }

/* Рамка фокуса нужна тем, кто ходит по сайту с клавиатуры. После клика мышью она остаётся
   висеть на кнопке (особенно заметно, когда человек ушёл в Telegram и вернулся) и выглядит
   как дефект вёрстки, поэтому показываем её только при навигации с клавиатуры. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) { outline: none; }

/* Для клавиатуры рамка обязательна, но родительская тема рисует тонкий белый пунктир,
   который на синих кнопках выглядит как брак печати. Даём заметную сплошную рамку. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.btn-ui:focus-visible,
[role="button"]:focus-visible { outline: 2px solid var(--op-focus, #2563eb); outline-offset: 2px; }
.btn-ui.btn-blue:focus-visible,
.op-btn--tg:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* ==========================================================================
   Кнопка «наверх» с кольцом прогресса (inc/scroll-top.php)
   Кольцо заполняется по мере прокрутки: видно, сколько страницы осталось.
   ========================================================================== */
#ast-scroll-top { display: none !important; }

.op-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 99;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--b26-accent, #2563eb);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(37, 99, 235, .25), 0 18px 34px -20px rgba(37, 99, 235, .85);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(.92);
    transition: opacity .25s ease, transform .25s cubic-bezier(.2, .8, .3, 1), visibility .25s;
}
.op-top.is-on { opacity: 1; visibility: visible; transform: none; }
.op-top:focus-visible { outline: 2px solid var(--b26-accent, #2563eb); outline-offset: 3px; }

.op-top__ring { position: absolute; inset: 0; width: 56px; height: 56px; transform: rotate(-90deg); }
.op-top__track { stroke: rgba(255, 255, 255, .32); }
.op-top__bar { stroke: #ffffff; stroke-linecap: round; transition: stroke-dashoffset .1s linear; }

.op-top__arrow { position: relative; display: grid; place-items: center; color: #ffffff; }
.op-top__arrow svg { width: 20px; height: 20px; }
.op-top:hover .op-top__arrow { animation: op-top-nudge .5s ease; }

@keyframes op-top-nudge {
    0% { transform: translateY(0); }
    45% { transform: translateY(-4px); }
    100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .op-top, .op-top * { transition: none !important; animation: none !important; }
}
@media (max-width: 600px) {
    .op-top { right: 16px; bottom: 16px; width: 50px; height: 50px; }
    .op-top__ring { width: 50px; height: 50px; }
}

/* Кнопка всегда синяя, стрелка и кольцо всегда белые. При наведении и нажатии меняем только
   оттенок фона: раньше цвета висели на :hover, и на телефоне в момент тапа стрелка темнела. */
.op-top:hover,
.op-top:focus-visible {
    background: #1d4ed8;
    box-shadow: 0 2px 6px rgba(37, 99, 235, .3), 0 20px 36px -18px rgba(37, 99, 235, .9);
    transform: translateY(-2px);
}
.op-top:active { background: #1e40af; transform: translateY(0) scale(.96); }
.op-top .op-top__arrow,
.op-top:hover .op-top__arrow,
.op-top:active .op-top__arrow,
.op-top:focus .op-top__arrow,
.op-top:focus-visible .op-top__arrow { color: #ffffff; }
.op-top:hover .op-top__bar,
.op-top:active .op-top__bar,
.op-top:focus-visible .op-top__bar { stroke: #ffffff; }
.op-top:focus-visible { outline-color: #ffffff; }
.op-top { transition: opacity .25s ease, transform .25s cubic-bezier(.2, .8, .3, 1), visibility .25s, background .18s ease, box-shadow .18s ease; }

/* ==========================================================
   ТЕЛЕФОН: ЕДИНАЯ ШКАЛА ЗАГОЛОВКОВ И ПОДВОДОК НА ГЛАВНОЙ
   Заголовки секций шли кеглем 30 с разными межстрочными (39, 36, 33, 33.8),
   подводки под ними шестью размерами от 15 до 18, отчего каждый экран
   выглядел по-своему. Блок стоит последним и с теми же весами, что у
   правил выше, иначе они его перекрывают.
   ========================================================== */
@media (max-width: 600px) {
    .home .hero-title { font-size: 29px !important; line-height: 1.12; }
    .hero-desc { font-size: 16px; line-height: 1.55; }

    .section-title,
    .home .services-header .services-title,
    .home .reviews-title,
    .home .uix-faq-title,
    .op-more .op-more__copy h2,
    .op-guides .op-guides__t h2 { font-size: 25px !important; line-height: 1.18; letter-spacing: -.02em; }

    .section-desc,
    .services-subtitle,
    .uix-faq-breakout .uix-faq-desc,
    .op-more .op-more__copy > p,
    .op-guides .op-guides__head p { font-size: 16px; line-height: 1.5; }

    .reviews-subtitle { font-size: 16px; line-height: 1.5; }

    /* строка рейтинга набрана размерами прямо в разметке */
    .rating-proof { font-size: 15px !important; line-height: 1.5; }
    .rating-proof span { font-size: 17px !important; }
    /* ссылка рвалась посередине, подчёркивание уходило на две строки: переносим её целиком */
    .rating-proof a { display: inline-block; }

    /* кнопка отзывов: надпись не помещалась в строку и «Telegram» уезжало вниз */
    .reviews-footer .btn-reviews-action { padding: 14px 16px; gap: 8px; font-size: 15px; }
    .btn-reviews-action svg { width: 16px; height: 16px; }
    .btn-reviews-action .rv-count { padding: 4px 8px; font-size: 12px; }
}
/* Самые узкие телефоны: иначе «Telegram» всё равно уходит на вторую строку */
@media (max-width: 350px) {
    .reviews-footer .btn-reviews-action { padding: 13px 12px; gap: 6px; font-size: 14px; }
    .btn-reviews-action .rv-count { padding: 3px 7px; font-size: 11.5px; }
}