/* ─────────────────────────────────────────────────────────────
   Стили для лейаута pereezd_hub.php (страница /pereezdy)
   Соответствует Figma:
     Desktop: uV0saW11kW0zjra4j17n17 (1:76, ширина 1136)
     Mobile:  WNT33zXmfcGo0C8k8TmZ3q (1:78)
   Дизайн-токены из Figma:
     H2:  Montserrat 500/700 40px line-height 1.5
     H3:  Helvetica Regular 24px
     H4:  Helvetica Regular 18px
     Text 14px Helvetica Regular
     Yellow #FFCC00, Gray text #868692, Dark #333333
   ───────────────────────────────────────────────────────────── */

/* ── Базовые токены хаба ── */
.pereezd-hub-page {
    --hub-color-primary: #235C33;
    --hub-color-accent: #FFCC00;
    --hub-color-text: #333333;
    --hub-color-muted: #868692;
    --hub-color-bg-soft: #F5F7F8;
    --hub-color-border: #D0D5DD;
    --hub-radius-sm: 8px;
    --hub-radius-md: 16px;
    --hub-radius-lg: 24px;
    --hub-section-gap: 64px;
    --hub-section-gap-mobile: 40px;
    --hub-container-max: 1136px;
    color: var(--hub-color-text);
    font-family: Helvetica, Arial, sans-serif;
}

.pereezd-hub-page .hub {
    padding-bottom: var(--hub-section-gap);
    overflow: hidden;
}

.pereezd-hub-page .hub > section,
.pereezd-hub-page .hub > .hub-breadcrumbs {
    margin-top: var(--hub-section-gap);
}

.pereezd-hub-page .hub > .hub-hero {
    margin-top: 0;
}

/* ── Общие заголовки секций (H2) ──
   Figma 1:108/1:181/1:196/1:234: H2 Montserrat Medium 500 — не Bold. */
.hub-h2 {
    font-family: Montserrat, Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 1.5;
    color: var(--hub-color-text);
    margin: 0 0 24px;
    scroll-margin-top: 90px;
}

.hub-h2--calc {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.hub-h2__icon {
    width: 24px;
    height: 32px;
    background: var(--hub-color-primary);
    border-radius: 4px;
    display: inline-block;
}

/* ─────────────────────────────────────────────────────────────
   Секция 1: Hero (Figma 1:77)
   ───────────────────────────────────────────────────────────── */
.hub-hero {
    position: relative;
    width: 100%;
    min-height: 620px;
    overflow: hidden;
    color: #fff;
    isolation: isolate;
}

.hub-hero__bg {
    position: absolute;
    inset: 0;
    background-image: url('/image/hub/pereezd/hero-bg.png');
    background-size: cover;
    /* HP-2 (итер.4): на десктопе при расширении окна якорь картинки —
       правый НИЖНИЙ угол (раньше был right top → картинка уезжала вверх). */
    background-position: right bottom;
    background-repeat: no-repeat;
    z-index: -2;
}

.hub-hero__overlay {
    position: absolute;
    inset: 0;
    /* Лёгкий градиент только слева для читаемости текста — справа картинка
       не затемняется, как в Figma 1:77 (там оверлея вообще нет, тёмные зоны
       уже встроены в исходный PNG). */
    background: linear-gradient(90deg, rgba(8,28,32,0.45) 0%, rgba(8,28,32,0.22) 35%, rgba(8,28,32,0) 65%);
    z-index: -1;
}

/* Glow node Figma 1:79 — радужный пучок света.
   В Figma: круг 651×651 с conic-gradient, к которому применён
   matrix(-5.5222 19.81 -37.09 -2.1515 461.5 262.11). Матрица одновременно
   масштабирует (~21× по одной оси, ~37× по другой), вращает (~106°) и
   переносит в центр (461.5, 262.11) внутри hero-фрейма 1392×524.
   Реализуем 1:1 теми же средствами: внешний контейнер задаёт позицию
   центра (33.16% слева, 50% сверху), внутренний div получает
   conic-gradient + линейную часть матрицы (translate уже сделан позицией). */
.hub-hero__glow {
    position: absolute;
    pointer-events: none;
    /* z-index > 0 (но ниже .hub-hero__inner с z-index:1) — glow ДОЛЖЕН быть ПОВЕРХ
       загруженной фоновой картинки, иначе тёмный фон полностью съедает overlay-blend.
       Раньше был z:-1 и пучок был виден только до загрузки картинки. */
    z-index: 0;
    /* Координаты центра по Figma: 461.5/1392 ≈ 33.16%, 262.11/524 ≈ 50%. */
    left: 33.16%;
    top: 50%;
    width: 0;
    height: 0;
    /* screen-blend «осветляет» — цветной пучок остаётся видимым на любой картинке.
       opacity 0.55 даёт видимость, сопоставимую с макетом, без пересвета. */
    opacity: 0.55;
    mix-blend-mode: screen;
    filter: blur(16px);
    overflow: visible;
}
.hub-hero__glow-streak {
    position: absolute;
    /* foreignObject в Figma: x=-325.69 y=-325.69 w=h=651.37 — круг центрирован на родителе. */
    left: -325.69px;
    top: -325.69px;
    width: 651.37px;
    height: 651.37px;
    border-radius: 50%;
    /* Полный набор цвет-стопов из Figma node 1:79. */
    background: conic-gradient(from 90deg,
        rgba(159,115,241,0)     -13.589%,
        rgba(242,98,181,0)       34.772%,
        rgba(206,123,199,0.25)   39.510%,
        rgba(169,148,218,0.5)    44.249%,
        rgba(132,173,236,0.75)   48.987%,
        rgb(95,197,255)          53.726%,
        rgb(135,203,203)         55.296%,
        rgb(175,209,150)         56.866%,
        rgb(215,215,98)          58.436%,
        rgb(235,218,71)          59.221%,
        rgb(255,221,45)          60.006%,
        rgb(234,225,68)          60.702%,
        rgb(212,230,90)          61.398%,
        rgb(170,238,136)         62.790%,
        rgb(127,247,181)         64.183%,
        rgb(85,255,227)          65.575%,
        rgb(102,206,241)         68.892%,
        rgb(120,157,255)         72.209%,
        rgba(139,136,248,0.5)    79.310%,
        rgba(159,115,241,0)      86.411%,
        rgba(242,98,181,0)      134.770%);
    /* Линейная часть Figma-матрицы (a, b, c, d) — translate уже сделан через left/top родителя. */
    transform: matrix(-5.5222, 19.81, -37.09, -2.1515, 0, 0);
    transform-origin: center center;
    will-change: transform;
}
.hub-hero::after {
    content: none;
}

/* Убираем декоративную серую черту из site.css (.wrap h1::after) на хабе */
.pereezd-hub-page .wrap h1::after,
.pereezd-hub-page .hub-hero__title::after {
    content: none !important;
    background: none !important;
    height: 0 !important;
    display: none !important;
}

.hub-hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--hub-container-max);
    padding: 64px 48px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* На десктопе фиксированный .header сайта высотой ~204px перекрывает верх Hero —
   поэтому добавляем верхний паддинг, иначе плашки
   (рейтинг / переезды / гарантии) уезжают под шапку. */
@media (min-width: 992px) {
    .hub-hero__inner {
        padding-top: 220px;
    }
}

.hub-hero__badges {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Плашки рейтинг/переезды/гарантии — ВСЕГДА видимы на всех разрешениях (Figma 1:77) */
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    z-index: 2;
}

.hub-hero__badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 14px;
    /* Полупрозрачное затемнение «как стекло», не сплошной чёрный — Figma 1:77 */
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.5;
    white-space: nowrap;
    box-shadow: none;
}

.hub-hero__badge-icon {
    display: block;
    height: 14px;
    width: auto;
    flex-shrink: 0;
}

.hub-hero__badge-icon--star   { width: 14px; }
.hub-hero__badge-icon--truck  { width: 20px; }
.hub-hero__badge-icon--shield { width: 13px; }

/* Перебиваем `.wrap h1` из site.css (uppercase / center / 2.8rem / тёмно-зелёный)
   повышенной специфичностью селектора. */
.pereezd-hub-page .hub-hero .hub-hero__title,
.hub-hero .hub-hero__title {
    font-family: Montserrat, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.5;
    color: #fff;
    text-align: left;
    text-transform: none;
    margin: 0;
    max-width: 888px;
    align-self: flex-start;
}

.hub-hero__features {
    list-style: disc;
    padding-left: 27px;
    margin: 0;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hub-hero__features li::marker {
    color: var(--hub-color-accent);
}

.hub-hero__messengers {
    display: flex;
    gap: 27px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.hub-hero__msg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 220px;
    height: 41px;
    border-radius: 60px;
    color: #fff;
    font-family: Inter, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 20px;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hub-hero__msg:hover {
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.18);
}

.hub-hero__msg--max {
    background: linear-gradient(90deg, #67E8F9 0%, #A78BFA 100%);
}

.hub-hero__msg--tg {
    background: linear-gradient(180deg, #00AFEA 0%, #00BFFF 100%);
}

.hub-hero__msg-icon {
    display: block;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
   Секция 2: Breadcrumbs (Figma 1:106)
   ───────────────────────────────────────────────────────────── */
.hub-breadcrumbs {
    margin-top: 18px !important;
    max-width: var(--hub-container-max);
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
    font-size: 14px;
    color: var(--hub-color-muted);
}

.hub-breadcrumbs .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.hub-breadcrumbs .breadcrumb > li + li::before {
    color: var(--hub-color-muted);
    padding: 0 8px;
}

.hub-breadcrumbs .breadcrumb a {
    /* «Главная» зелёного цвета по макету (Figma 1:106 — #00a800) */
    color: #00a800;
    text-decoration: none;
}

.hub-breadcrumbs .breadcrumb a:hover {
    color: #008500;
    text-decoration: underline;
}

.hub-breadcrumbs .breadcrumb > .active {
    color: #777;
}

.hub-breadcrumbs .breadcrumb > li + li::before {
    content: "/";
    color: #d9d9d9;
}

.hub-breadcrumbs .breadcrumb .active,
.hub-breadcrumbs .breadcrumb > .active {
    color: var(--hub-color-muted);
}

/* ─────────────────────────────────────────────────────────────
   Контейнер: общий max-width 1136 для секций с .container
   ───────────────────────────────────────────────────────────── */
.pereezd-hub-page .hub > section.container,
.pereezd-hub-page .hub > .hub-breadcrumbs.container,
.pereezd-hub-page .hub > .seo-text.container,
.pereezd-hub-page .hub > .seo-text--top,
.pereezd-hub-page .hub > .seo-text--bottom {
    max-width: var(--hub-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* SEO-блоки: общая типографика (--top перенесён в --bottom — теперь идут после CTA) */
.pereezd-hub-page .hub > .seo-text--top,
.pereezd-hub-page .hub > .seo-text--bottom {
    margin-top: 16px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--hub-color-text);
}

.pereezd-hub-page .hub > .seo-text--top + .seo-text--top,
.pereezd-hub-page .hub > .seo-text--bottom + .seo-text--bottom {
    margin-top: 12px;
}

/* ─────────────────────────────────────────────────────────────
   Секция 3: Benefits + What included (Figma 1:108)
   ───────────────────────────────────────────────────────────── */
.hub-benefits {
    padding-bottom: 0;
}

.hub-benefits .hub-h2 {
    font-weight: 500;
    color: #1d1d1d;
    margin-bottom: 24px;
}

.hub-benefits__row {
    display: grid;
    grid-template-columns: 1fr 361px;
    gap: 24px;
    align-items: stretch;
}

.hub-benefits__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-content: start;
}

.hub-benefit-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    padding: 24px 0;
    text-align: center;
}

.hub-benefit-card__icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.hub-benefit-card__title {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.5;
    color: #000;
    margin: 0;
    text-align: center;
}

.hub-benefit-card__body {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: #000;
    margin: 0;
    text-align: left;
}

.hub-benefit-card--contract {
    background: #94c121;
    border-radius: 8px;
    padding: 28px 16px;
    justify-content: center;
}

.hub-benefit-card--contract .hub-benefit-card__title,
.hub-benefit-card--contract .hub-benefit-card__body {
    color: #fff;
}

.hub-benefit-card--contract .hub-benefit-card__body {
    color: #1d1d1d;
}

.hub-benefit-card__icon--contract {
    width: 60px;
    height: 64px;
}

/* What included — yellow-green column */
.hub-included {
    background: #f6fce9;
    border-radius: 16px;
    padding: 16px 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hub-included__title {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.5;
    color: #1d1d1d;
    margin: 0;
}

.hub-included__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.hub-included__item {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.3;
    color: #1d1d1d;
}

.hub-included__icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
   Секция 4: Калькулятор (Figma 1:176)
   Заголовок «Калькулятор переезда» виджета — слева, со значком калькулятора.
   ───────────────────────────────────────────────────────────── */
/* iter7 V-1: уменьшить интервал между «Переезд под ключ это:» (.hub-benefits)
   и калькулятором. Раньше: 32px padding-bottom + 64px section-gap = 96px.
   Теперь: 0 + 32px = 32px. */
.pereezd-hub-page .hub > section.hub-calc {
    margin-top: 32px;
}

.hub-calc {
}

.hub-calc__widget {
    border-radius: var(--hub-radius-lg);
    overflow: hidden;
}

#calc-new.hub-calc__widget #gruz.pereezd > h3,
#calc-new.hub-calc__widget .calc #gruz > h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
    text-align: left;
    font-family: Montserrat, Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 1.5;
    color: #ffffff;
    margin: 0 0 24px;
    padding: 12px 32px;
}

#calc-new.hub-calc__widget #gruz.pereezd > h3::before,
#calc-new.hub-calc__widget .calc #gruz > h3::before {
    content: "";
    display: inline-block;
    flex: 0 0 24px;
    width: 24px;
    height: 32px;
    background: url("/image/hub/pereezd/calc-icon.svg") center / contain no-repeat;
}

@media (max-width: 767px) {
    #calc-new.hub-calc__widget #gruz.pereezd > h3,
    #calc-new.hub-calc__widget .calc #gruz > h3 {
        font-size: 28px;
        gap: 12px;
    }
    #calc-new.hub-calc__widget #gruz.pereezd > h3::before,
    #calc-new.hub-calc__widget .calc #gruz > h3::before {
        flex: 0 0 20px;
        width: 20px;
        height: 27px;
    }
}

/* ─────────────────────────────────────────────────────────────
   Секция 5: Направления переезда (Figma 1:181)
   Контент рендерится виджетом PereezdTypesWidget.
   Сетка 3 колонки на десктопе, карточки 346px × ~232px,
   фон #f6fce9, padding 20px, radius 16px.
   ───────────────────────────────────────────────────────────── */
.hub-types {
    margin-top: var(--hub-section-gap);
}

.hub-types__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 32px;
    background: #f6fce9;
    border-radius: 16px;
    padding: 24px;
}

.hub-type-card__more--disabled {
    opacity: 0.55;
    pointer-events: none;
    cursor: default;
}

.hub-type-card {
    position: relative;
    display: grid;
    grid-template-columns: 60px 1fr;
    column-gap: 16px;
    row-gap: 4px;
    background: transparent;
    border-radius: 16px;
    padding: 20px;
    min-height: 232px;
    max-width: 346px;
}

.hub-type-card__icon {
    grid-column: 1;
    grid-row: 1;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background: rgba(148, 193, 33, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}

.hub-type-card__icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.hub-type-card__title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    /* Figma 1:181 / 1554:1064: Helvetica Regular 24px line-height 1.5 #1d1d1d. */
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.5;
    color: #1d1d1d;
    margin: 0;
}

.hub-type-card__subtitle {
    grid-column: 1 / -1;
    grid-row: 2;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94c121;
    margin-top: 8px;
    margin-bottom: 4px;
}

.hub-type-card__desc {
    grid-column: 1 / -1;
    grid-row: 3;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: #1d1d1d;
    margin: 0 0 16px;
}

.hub-type-card__more {
    grid-column: 1 / -1;
    grid-row: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #1d1d1d;
    text-decoration: none;
    margin-top: auto;
    width: fit-content;
}

.hub-type-card__more:hover {
    color: #94c121;
}

.hub-type-card__arrow {
    /* Figma 1:181 / Vector 9 — круг ОБВОДКОЙ #D9D9D9, стрелка серая #868692,
       толщина обводки тонкая. Без заливки. */
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'><rect x='0.5' y='0.5' width='27' height='27' rx='13.5' stroke='%23D9D9D9'/><path d='M14.1053 20L20 14L14.1053 8M20 14H8' stroke='%23868692' stroke-width='0.75' fill='none'/></svg>") center / contain no-repeat;
    transition: transform 0.2s ease;
}

.hub-type-card__more:hover .hub-type-card__arrow {
    transform: translateX(3px);
}

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

@media (max-width: 599px) {
    .hub-types__grid {
        grid-template-columns: 1fr;
    }
}

/* ─────────────────────────────────────────────────────────────
   Декор Vector 20 — волнистая дуга со стрелкой, "переходит" с
   нижней части блока Types к верху блока Cases. По макету
   накладывается на оба блока — стартует слева-снизу под
   карточками Types и заканчивается сверху-справа над H2 Cases.
   ───────────────────────────────────────────────────────────── */
.hub-divider {
    display: block;
    max-width: var(--hub-container-max);
    padding: 0 15px;
    line-height: 0;
    pointer-events: none;
    position: relative;
    z-index: 2;
}

.hub-divider--vector20 {
    /* Отрицательные margins «врезают» SVG в соседние блоки —
       верхушка дуги уходит вверх в Types, основание заходит вниз
       к Cases, как в макете Figma 1:373. */
    margin: -180px auto -200px;
}

.hub-divider--vector20 svg {
    /* Figma 1:373: Vector 20 имеет ширину 832.5 в 1136-контейнере,
       то есть ~73.3%. Боковые отступы ~152px с каждой стороны. */
    display: block;
    width: 73.28%;
    max-width: 833px;
    height: auto;
    aspect-ratio: 833 / 320;
    margin: 0 auto;
}

@media (max-width: 767px) {
    /* HP-3 (итер.3): кривая стрелка Vector 20 — ТОЛЬКО на десктопе.
       На мобильной/планшетной версии (≤767px) она не нужна по требованию заказчика. */
    .hub-divider--vector20 { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   Секция 6: Кейсы фото/видео (Figma 1:196)
   ───────────────────────────────────────────────────────────── */
.hub-cases {
    text-align: center;
}

/* HP-2 D-CASES-1: больший вертикальный интервал перед Cases чем у других секций */
.pereezd-hub-page .hub > section.hub-cases {
    margin-top: 64px;
}

.hub-cases .hub-h2 {
    text-align: left;
}

.hub-cases__toggle {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    background: rgba(118, 118, 128, 0.24);
    border-radius: 8.91px;
    padding: 2px;
    margin: 0 0 24px;
    width: 343px;
    max-width: 100%;
}

.hub-cases__panel {
    text-align: left;
}

.hub-cases__tab {
    position: relative;
    z-index: 2;
    flex: 1 1 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    padding: 4px 12px;
    height: 28px;
    border-radius: 6.93px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    transition: color 0.25s ease, background 0.25s ease;
}

.hub-cases__tab + .hub-cases__tab::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: rgba(84, 84, 88, 0.65);
}

.hub-cases__tab.is-active {
    background: #636366;
    color: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
}

.hub-cases__tab.is-active + .hub-cases__tab::before,
.hub-cases__tab.is-active::before {
    display: none;
}

.hub-cases__pill {
    display: none;
}

.hub-cases__panel {
    display: none;
}

.hub-cases__panel.is-active {
    display: block;
}

/* Pagination indicators (slick-dots) внутри Cases/Reviews —
   Figma 1:196 / 1:234: круглые точки одинакового размера,
   активная — зелёная #2f9d36, неактивные — светло-серые #d9d9d9.
   HP-2 (итер.2): dots ВСЕГДА снизу карусели по центру, на любом разрешении. */
.pereezd-hub-page .hub-cases .slick-dots,
.pereezd-hub-page .hub-reviews .slick-dots,
.hub-cases .slick-dots,
.hub-reviews .slick-dots {
    position: static !important;
    bottom: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 24px auto 0 !important;
    padding: 0 !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    width: 100% !important;
    float: none !important;
    transform: none !important;
}

.hub-cases .slick-dots li,
.hub-reviews .slick-dots li {
    margin: 0 !important;
    padding: 0 !important;
    width: 12px !important;
    height: 12px !important;
    background: transparent;
    border: 1.5px solid #235C33;
    border-radius: 50%;
    box-sizing: border-box;
    overflow: hidden;
    transition: background 0.2s ease;
    display: inline-block;
}

.hub-cases .slick-dots li button,
.hub-reviews .slick-dots li button {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 0 !important;
    color: transparent !important;
    cursor: pointer;
    display: block;
}

.hub-cases .slick-dots li button::before,
.hub-reviews .slick-dots li button::before {
    content: '' !important;
    display: none !important;
    opacity: 0 !important;
}

.hub-cases .slick-dots li.slick-active,
.hub-reviews .slick-dots li.slick-active {
    background: #235C33;
    border-color: #235C33;
}

/* ─────────────────────────────────────────────────────────────
   Секция 7: Опыт в цифрах (Figma 1:213)
   Плоский макет — без карточек, без зелёного фона.
   • Серая карта России — фоном за всеми элементами секции
   • H2 "ОПЫТ В ЦИФРАХ" 40px Montserrat Medium
   • Лид 18px Helvetica
   • 4 колонки: каждая отделена тонкой зелёной чертой сверху (3px #2f9d36)
   • Значения 40px Montserrat Bold (чёрные, не зелёные)
   • Подписи 14px UPPERCASE Helvetica
   ───────────────────────────────────────────────────────────── */
.hub-stats {
    margin-top: var(--hub-section-gap);
    position: relative;
    padding: 40px 15px 64px;
    overflow: hidden;
}

.hub-stats__bg {
    position: absolute;
    inset: 0;
    background: url("/image/hub/pereezd/stats/russia-figma.svg") center / contain no-repeat;
    /* Figma 1:215 — фоновая карта почти прозрачная, ближе к светло-серому контуру */
    opacity: 0.12;
    filter: grayscale(1);
    pointer-events: none;
    z-index: 0;
}

.hub-stats__inner {
    position: relative;
    z-index: 1;
}

.hub-stats__head {
    text-align: left;
    margin-bottom: 0;
}

.hub-stats__h2 {
    font-family: Montserrat, Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 1.5;
    color: #1d1d1d;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.hub-stats__lead {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: #1d1d1d;
    margin: 0 0 40px;
    max-width: 100%;
}

.hub-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 0;
}

.hub-stat-col {
    border-top: 3px solid #2f9d36;
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    min-height: 121px;
    background: transparent;
}

.hub-stat-col__value {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 90px;
    font-family: Montserrat, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.5;
    color: #1d1d1d;
}

.hub-stat-col__label {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: #1d1d1d;
    text-transform: uppercase;
    margin: 0;
}

.hub-stat-col__star {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.hub-stat-col--region .hub-stat-col__value {
    align-items: center;
}

.hub-stat-col__region-map {
    display: block;
    width: 147px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

@media (max-width: 1023px) {
    .hub-stats__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 32px;
    }
}

@media (max-width: 599px) {
    .hub-stats {
        padding: 24px 15px 32px;
    }
    .hub-stats__h2 { font-size: 28px; }
    .hub-stats__lead { font-size: 16px; margin-bottom: 24px; }
    /* HP-3 D-STATS-2: на мобиле 2×2 grid (Figma 1:222 — Frame 232/233/234/235 в строках по 2) */
    .hub-stats__grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px 16px;
    }
    /* HP-3 D-STATS-3: Figma node 1:225/1:228/1:234 — Montserrat Bold 40/1.5 */
    .hub-stat-col__value { font-size: 40px; font-weight: 700; min-height: 56px; color: #1d1d1d; line-height: 1.5; }
}

/* ─────────────────────────────────────────────────────────────
   Секция 8: Отзывы (Figma 1:234)
   ───────────────────────────────────────────────────────────── */
.hub-reviews__h2 {
    text-align: left;
}

.hub-reviews__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.hub-reviews__tabs {
    position: relative;
    display: flex;
    align-items: stretch;
    background: rgba(118, 118, 128, 0.24);
    border-radius: 8.91px;
    padding: 2px;
    gap: 0;
    flex-wrap: nowrap;
    margin: 0 auto 24px;
    width: fit-content;
    max-width: 100%;
}

.hub-reviews__tab-rating {
    font-weight: 700;
    color: inherit;
    margin-left: 4px;
}

.hub-reviews__pill {
    display: none;
}

.hub-reviews__leave-wrap {
    display: flex;
    justify-content: center;
    margin-top: 32px;
    position: relative;
}

.hub-reviews__leave {
    cursor: pointer;
}

.hub-reviews__leave-popup {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 8px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    min-width: 200px;
}

.hub-reviews__leave-popup[hidden] { display: none; }

.hub-reviews__leave-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #235C33;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease;
}

.hub-reviews__leave-link:hover {
    background: #f0f0f0;
    color: #235C33;
    text-decoration: none;
}

.hub-reviews__leave-link img {
    width: 28px;
    height: 28px;
    border-radius: 6px;
}

.hub-reviews__tab {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    background: transparent;
    border-radius: 6.93px;
    padding: 4px 12px;
    min-width: 120px;
    height: 28px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.hub-reviews__tab + .hub-reviews__tab::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: rgba(84, 84, 88, 0.65);
}

.hub-reviews__tab.is-active {
    background: #636366;
    color: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
}

.hub-reviews__tab.is-active + .hub-reviews__tab::before,
.hub-reviews__tab.is-active::before {
    display: none;
}

.hub-reviews__tab-icon {
    width: 16px;
    height: 16px;
}

.hub-reviews__leave {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    color: #1d1d1d;
    background: #ffdd2d;
    border: 0;
    border-radius: 42.5px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.hub-reviews__leave:hover {
    background: #ffd400;
    color: #1d1d1d;
    text-decoration: none;
    transform: translateY(-1px);
}

.hub-reviews__chevron {
    width: 10px;
    height: 6px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

.hub-reviews__panel {
    display: none;
}

.hub-reviews__panel.is-active {
    display: block;
}

/* ─────────────────────────────────────────────────────────────
   Секция 9: FAQ — новый стиль для хаба через wrapper .faq-hub-style
   Бутстраповский Collapse даёт .panel-group / .panel-default /
   .panel-heading / .panel-title / .panel-body — переопределяем
   их ТОЛЬКО внутри .faq-hub-style, чтобы не сломать другие страницы.
   Figma 1:270 — белые карточки 80px высотой, тонкая граница,
   плюсик/минус справа, открытая карточка с зелёной заливкой.
   ───────────────────────────────────────────────────────────── */
.hub-faq.faq-hub-style {
    margin-top: var(--hub-section-gap);
}

.hub-faq.faq-hub-style .panel-group {
    margin-top: 24px;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hub-faq.faq-hub-style .panel,
.hub-faq.faq-hub-style .panel-default,
.hub-faq.faq-hub-style .panel-group .panel {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #d7d7d7;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    overflow: hidden;
}

.hub-faq.faq-hub-style .panel + .panel { margin-top: 0; }

.hub-faq.faq-hub-style .panel-heading {
    background: transparent;
    border: 0;
    border-bottom: 0 !important;
    padding: 0;
}

.hub-faq.faq-hub-style .panel-heading + .panel-collapse > .panel-body {
    border-top: 0;
}
.hub-faq.faq-hub-style .panel-collapse {
    border: 0 !important;
}

.hub-faq.faq-hub-style .panel-title {
    margin: 0;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.4;
    color: #1d1d1d;
}

.hub-faq.faq-hub-style .panel-title > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    color: inherit;
    text-decoration: none;
    position: relative;
}

.hub-faq.faq-hub-style .panel-title > a,
.hub-faq.faq-hub-style .panel-title > a:hover,
.hub-faq.faq-hub-style .panel-title > a:focus,
.hub-faq.faq-hub-style .panel-title > a:active {
    color: inherit;
    text-decoration: none;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border: 0 !important;
}

.hub-faq.faq-hub-style .panel-title > a::before {
    content: '';
    display: inline-block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M4 6l4 4 4-4' stroke='%231d1d1d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    transition: transform 0.3s ease;
    border: 0;
    box-shadow: none;
}

.hub-faq.faq-hub-style .panel-title > a[aria-expanded="true"]::before,
.hub-faq.faq-hub-style .panel-title > a:not(.collapsed)::before {
    transform: rotate(180deg);
}

.hub-faq.faq-hub-style .panel-body {
    border-top: 0;
    padding: 0 0 16px 28px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.55;
    color: #545454;
}

.hub-faq.faq-hub-style .panel-collapse {
    transition: height 0.3s ease;
}

@media (max-width: 599px) {
    .hub-faq.faq-hub-style .panel-title { font-size: 18px; }
    .hub-faq.faq-hub-style .panel-title > a { padding: 14px 0; }
    .hub-faq.faq-hub-style .panel-body  { padding: 0 0 14px 28px; font-size: 13px; }

    /* Итер.5: разделители FAQ — на полную ширину экрана (как в Figma 1:270).
       .hub-faq.container даёт padding 0 15px, поэтому .panel border-bottom
       идёт по ширине вопроса. Вытягиваем .panel за пределы padding'ов
       контейнера отрицательными margin -15px и возвращаем 15px горизонтального
       padding'а внутрь .panel, чтобы текст вопроса/ответа не сместился.
       Дополнительно: .panel-group — display:flex column, поэтому панели по
       умолчанию подстраиваются под ширину контента (вопрос разной длины).
       Принудительно `align-self:stretch` + `width:auto`, чтобы border-bottom
       шёл от края до края, а не по ширине вопроса. */
    .pereezd-hub-page .hub-faq.faq-hub-style .panel,
    .pereezd-hub-page .hub-faq.faq-hub-style .panel-default,
    .pereezd-hub-page .hub-faq.faq-hub-style .panel-group .panel {
        margin-left: -15px !important;
        margin-right: -15px !important;
        padding-left: 15px;
        padding-right: 15px;
        align-self: stretch !important;
        width: auto !important;
        box-sizing: border-box;
    }
}

/* ─────────────────────────────────────────────────────────────
   Секция 10: Документы (Figma 1:294)
   Карточки документов: иконка PDF слева, текст в центре, кнопка скачивания справа.
   ───────────────────────────────────────────────────────────── */
.hub-docs {
    margin-top: var(--hub-section-gap);
    background: transparent;
    border-radius: 0;
    padding: 0;
}

.hub-docs__h2 {
    margin: 0 0 24px;
}

.hub-docs__box {
    background: #f6fce9;
    border-radius: 16px;
    padding: 32px;
}

.hub-docs__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 64px;
    margin-top: 0;
}

.hub-doc-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.hub-doc-card__icon {
    position: relative;
    flex: 0 0 40px;
    width: 40px;
    height: 48px;
    border-radius: 0;
    background: #fff;
    border: 1px solid #d7d7d7;
    border-top-right-radius: 8px;
    color: #fff;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    text-decoration: none;
}

.hub-doc-card__icon::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background: linear-gradient(225deg, #d7d7d7 50%, transparent 50%);
}

.hub-doc-card__icon-doc {
    display: none;
}

.hub-doc-card__icon-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #e74c3c;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 10px;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 2px;
}

/* HP-5 D-DOCS-1: Figma 1:303 — иконка PDF со стрелкой вниз */
.hub-doc-card__icon-label::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='white'><path d='M5 0v7M5 8L2 5M5 8l3-3' stroke='white' stroke-width='1.5' stroke-linecap='round' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.hub-doc-card__body {
    flex: 1 1 auto;
    min-width: 0;
}

.hub-doc-card__title {
    display: inline-block;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.3;
    color: #1d1d1d;
    margin: 0 0 4px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hub-doc-card__title:hover,
.hub-doc-card__title:focus {
    color: #1d1d1d;
    text-decoration: underline;
}

.hub-doc-card__meta {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #545454;
}

@media (max-width: 599px) {
    .hub-docs { padding: 20px 16px; }
    .hub-docs__grid { grid-template-columns: 1fr; gap: 20px; }
    .hub-doc-card { gap: 16px; }
    .hub-doc-card__title { font-size: 20px; line-height: 1.5; font-weight: 700; }
}

/* ─────────────────────────────────────────────────────────────
   Секция 11: Финальный CTA (Figma 1:333)
   Зелёный блок: слева — заголовок, подзаголовок, 3 преимущества.
   Справа — «при обращении через мессенджер», крупные 5%, «скидка на
   переезд», кнопки MAX и Telegram.
   ───────────────────────────────────────────────────────────── */
/* ─── CTA Final (Figma 1:333) — точное соответствие макету ─── */
.hub-cta-final {
    margin-top: var(--hub-section-gap);
}

.hub-cta-final__inner {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    background: linear-gradient(104.604deg, #2e5b35 0%, #10502c 100%);
    border-radius: 4px;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    min-height: 280px;
}

.hub-cta-final__aurora {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.hub-cta-final__aurora::before,
.hub-cta-final__aurora::after {
    content: "";
    position: absolute;
    filter: blur(100px);
    mix-blend-mode: screen;
}

.hub-cta-final__aurora::before {
    top: -40%;
    left: -15%;
    width: 55%;
    height: 180%;
    opacity: 0.35;
    mix-blend-mode: multiply;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 70%);
}

.hub-cta-final__aurora::after {
    top: -20%;
    right: 5%;
    left: auto;
    width: 45%;
    height: 140%;
    opacity: 0.25;
    mix-blend-mode: multiply;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 70%);
}

.hub-cta-final__left {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    padding: 25.6px 24px;
}

/* Figma 1:352: декоративная органическая фигура в правом-верхнем углу зелёной
   части. В Figma — кадр 376.09×308.6 в позиции (419.95, 31.51) внутри
   родительского 1136×296 (frame 1:333). opacity:0.1, mix-blend: color-dodge. */
.hub-cta-final__decor {
    position: absolute;
    top: 10.65%;          /* 31.51/296 */
    left: 36.97%;         /* 419.95/1136 — позиция внутри inner */
    width: 33.1%;         /* 376.09/1136 */
    aspect-ratio: 376 / 309;
    pointer-events: none;
    opacity: 0.1;
    z-index: 0;
}
.hub-cta-final__decor img {
    display: block;
    width: 100%;
    height: 100%;
    mix-blend-mode: color-dodge;
}

.hub-cta-final__title {
    font-family: Inter, Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-size: 41.6px;
    line-height: 1.2;
    margin: 0;
    color: #fff;
    letter-spacing: 0.03em;
}

.hub-cta-final__sub {
    font-family: Inter, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.2;
    margin: 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Преимущества: один контейнер с прозрачной обводкой, внутри — иконка+текст
   с буллитом • между группами */
.hub-cta-final__features {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 19.2px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 0.8px solid #fff;
    border-radius: 3.2px;
}

.hub-cta-final__feature {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 12.8px;
    line-height: 1.2;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.hub-cta-final__feature-icon {
    width: auto;
    height: 18px;
    flex-shrink: 0;
    display: block;
}

.hub-cta-final__dot {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 12.8px;
    line-height: 1.2;
    color: #fff;
    user-select: none;
}

.hub-cta-final__feature-dot { display: none; }

/* Правая жёлтая карточка — w=432.8px, padding 38.4px / 25.6px, space-between */
.hub-cta-final__right {
    position: relative;
    z-index: 1;
    flex: 0 0 432.8px;
    width: 432.8px;
    max-width: 100%;
    background: #ffdd2d;
    padding: 25.6px 38.4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #1d1d1d;
    text-align: center;
}

.hub-cta-final__note,
.hub-cta-final__discount-label {
    font-family: Inter, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    color: rgba(0, 0, 0, 0.6);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.hub-cta-final__discount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fd1d1d;
    border-radius: 8px;
    padding: 10px;
    margin: 0;
}

.hub-cta-final__percent {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-size: 50px;
    line-height: 1.2;
    color: #fff;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.hub-cta-final__buttons {
    display: flex;
    flex-direction: column;
    gap: 21.6px;
    width: 100%;
    margin-top: 4px;
}

.hub-cta-final__msg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6.4px;
    height: 32.8px;
    width: 100%;
    border-radius: 17px;
    font-family: Inter, Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-size: 16px;
    text-decoration: none;
    transition: filter 0.2s ease, transform 0.15s ease;
    color: #fff;
    overflow: hidden;
}

.hub-cta-final__msg--max {
    background: linear-gradient(to right, #67e8f9 0%, #a78bfa 100%);
    color: #fff;
}

.hub-cta-final__msg--tg {
    background: linear-gradient(to bottom, #00afea 0%, #00bfff 100%);
    color: #fff;
}

.hub-cta-final__msg:hover,
.hub-cta-final__msg:focus {
    filter: brightness(1.07);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.hub-cta-final__msg-icon {
    width: 20.8px;
    height: 20.8px;
    flex-shrink: 0;
    display: block;
}

@media (max-width: 900px) {
    .hub-cta-final__inner {
        flex-direction: column;
        min-height: auto;
    }
    .hub-cta-final__left { padding: 32px 24px; }
    .hub-cta-final__right { flex: 0 0 auto; width: 100%; padding: 32px 24px; }
    .hub-cta-final__title { font-size: 30px; }
    .hub-cta-final__sub { font-size: 18px; }
    .hub-cta-final__features { gap: 12px; }
    .hub-cta-final__percent { font-size: 42px; }
}

@media (max-width: 599px) {
    .hub-cta-final__title { font-size: 24px; }
    .hub-cta-final__sub { font-size: 15px; }
    .hub-cta-final__features {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .hub-cta-final__dot { display: none; }
    .hub-cta-final__percent { font-size: 38px; }
}

/* ─────────────────────────────────────────────────────────────
   Mobile (Figma WNT33zXmfcGo0C8k8TmZ3q)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .pereezd-hub-page .hub > section,
    .pereezd-hub-page .hub > .hub-breadcrumbs {
        margin-top: var(--hub-section-gap-mobile);
    }

    .hub-h2 {
        font-size: 24px;
        line-height: 1.3;
    }

    .hub-hero {
        min-height: auto;
    }

    /* HP-1b (итер.2): Figma 1:83 "Header container" — padding L/R 48px */
    .hub-hero__inner {
        padding: 64px 48px;
        gap: 24px;
    }

    .hub-hero__title {
        font-size: 28px;
        line-height: 1.5;
    }

    .hub-hero__features {
        font-size: 18px;
        line-height: 1.3;
    }

    .hub-hero__messengers {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .hub-hero__msg {
        width: 100%;
    }

    .hub-reviews__toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .hub-reviews__tabs {
        overflow-x: auto;
        max-width: 100%;
        scrollbar-width: none;
    }

    .hub-reviews__tabs::-webkit-scrollbar { display: none; }

    .hub-reviews__tab {
        flex-shrink: 0;
        min-width: 96px;
        font-size: 13px;
        padding: 6px 12px;
    }

    /* HP-4 D-REVIEWS-2: Figma 1:272 — кнопка 180×53, центрированно (не full-width) */
    .hub-reviews__leave {
        width: 180px;
        height: 53px;
        justify-content: center;
        padding: 0 20px;
        font-size: 14px;
        margin: 0 auto;
    }

    .hub-cases__toggle {
        width: 100%;
        display: flex;
    }

    .hub-cases__tab {
        flex: 1 1 50%;
        min-width: 0;
        font-size: 14px;
    }

    .hub-h2--calc { font-size: 22px; }

    .hub-included {
        width: 100%;
        max-width: none;
    }
}

/* Адаптив ≤900px: Benefits в одну колонку, чтобы плашки не ломались */
@media (max-width: 900px) {
    .hub-benefits__row { grid-template-columns: 1fr; gap: 20px; }
    .hub-benefits__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 599px) {
    .hub-benefits__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* Узкие телефоны (≤480) — Figma mobile 430px (WNT33zXmfcGo0C8k8TmZ3q) */
@media (max-width: 480px) {
    /* M-01: H2_mob = Montserrat 28/1.5/400 (Figma var H2_mob) */
    .pereezd-hub-page .hub-h2 {
        font-size: 28px;
        line-height: 1.5;
        font-weight: 400;
    }
    /* C-01: H1 mobile = 28/400/1.5, box 334px (Figma 1:95) */
    /* HP-1c (итер.2): Figma node 1:95 — Montserrat Bold 700 */
    .pereezd-hub-page .hub-hero .hub-hero__title {
        font-size: 28px;
        line-height: 1.5;
        font-weight: 700;
        max-width: 334px;
    }
    /* C-02: hero badges вертикальный стек, 16px gap, ВСЕ одной ширины (Figma 1:84) */
    .pereezd-hub-page .hub-hero__badges {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 16px;
    }
    .pereezd-hub-page .hub-hero__badge {
        width: 100%;
        align-self: stretch;
        font-size: 14px;
        padding: 8px 12px;
        min-height: 37px;
        box-sizing: border-box;
    }
    /* HP-1a (итер.2): фон HERO центрирован — без сдвига */
    .pereezd-hub-page .hub-hero__bg {
        background-position: center center;
    }
    /* HP-3 итер.2: Figma node 1:225/1:228/1:234 — Montserrat Bold 40/1.5 */
    .hub-stat-col__value { font-size: 40px; font-weight: 700; color: #1d1d1d; line-height: 1.5; }
    /* HP-3c итер.2: Figma node 1:220 — H2_mob Montserrat Regular 28/1.5/400 */
    .hub-stats__h2 { font-size: 28px; font-weight: 400; color: #1d1d1d; }
    /* Wave 5: CTA title (Figma 1:341 — Montserrat Regular 28px line-height 1.5) */
    .pereezd-hub-page .hub-cta-final__title {
        font-family: Montserrat, Helvetica, Arial, sans-serif;
        font-weight: 400;
        font-size: 28px;
        line-height: 1.5;
        letter-spacing: 0;
    }
    /* Wave 5: CTA sub (Figma 1:342 — Helvetica 20px line-height 1.5) */
    .pereezd-hub-page .hub-cta-final__sub {
        font-family: Helvetica, Arial, sans-serif;
        font-weight: 400;
        font-size: 20px;
        line-height: 1.5;
        letter-spacing: 0;
    }
    /* HP-6 D-CTA-1/2: на мобиле два отдельных блока — зелёный (вверху) и жёлтый (внизу),
       inner-обёртка без своего фона/паддинга (Figma 1:338 разделение Frame 130 / Frame 131). */
    .pereezd-hub-page .hub-cta-final__inner {
        padding: 0;
        border-radius: 16px;
        overflow: hidden;
        background: transparent;
        flex-direction: column;
    }
    .pereezd-hub-page .hub-cta-final__left {
        background: #1f5f3a;
        padding: 32px 24px;
        border-radius: 0;
        flex: 0 0 auto;
        width: 100%;
    }
    .pereezd-hub-page .hub-cta-final__right {
        background: #FFCC00;
        padding: 32px 24px;
        border-radius: 0;
        flex: 0 0 auto;
        width: 100%;
        color: #1d1d1d;
    }
    /* HP-6 D-CTA-1: features → 3 широкие плашки full-width одна под другой с рамкой */
    .pereezd-hub-page .hub-cta-final__features {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 12px;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        width: 100%;
    }
    .pereezd-hub-page .hub-cta-final__features .hub-cta-final__feature {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 8px 16px;
        min-height: 36px;
        /* HP-6a (итер.2): еле видный белый фон (Figma 1:343/1:347/1:351) */
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 8px;
        white-space: normal;
    }
    .pereezd-hub-page .hub-cta-final__dot { display: none; }

    /* ── C-04: Stats — светлый фон #f5f7f8 + зелёная карта-водяной знак (HP-3a):
            в Figma node 1:218 Union vector смещён на x=-168 от Frame 231 (418×525),
            размер 753×392, видна только правая часть карты, очень низкая прозрачность.
            Линия сверху — #2f9d36 (HP-3b). H2 — Montserrat Regular 400 28px (HP-3c). ── */
    .pereezd-hub-page .hub-stats {
        background: #f5f7f8;
        border-radius: 0;
        margin-left: 0;
        margin-right: 0;
        padding: 32px 16px 40px;
    }
    .pereezd-hub-page .hub-stats__bg {
        background-image: url("/image/hub/pereezd/stats/russia-figma.svg");
        background-repeat: no-repeat;
        background-position: -168px 25px;
        background-size: 753px 392px;
        opacity: 0.08;
        filter: none;
    }
    .pereezd-hub-page .hub-stats__lead,
    .pereezd-hub-page .hub-stat-col__value,
    .pereezd-hub-page .hub-stat-col__label,
    .pereezd-hub-page .hub-stats__h2 {
        color: #1d1d1d;
    }
    .pereezd-hub-page .hub-stats__h2 {
        font-family: Montserrat, Helvetica, Arial, sans-serif;
        font-weight: 400;
        font-size: 28px;
        line-height: 1.5;
    }
    .pereezd-hub-page .hub-stat-col {
        border-top: 3px solid #2f9d36;
    }
    .pereezd-hub-page .hub-stat-col__value {
        font-family: Montserrat, Helvetica, Arial, sans-serif;
        font-weight: 700;
        font-size: 40px;
        line-height: 1.5;
        color: #1d1d1d;
    }
    .pereezd-hub-page .hub-stats__grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px 16px;
    }

    /* ── C-06: lowercase для sub/note/discount-label (Figma 1:339/1:361) ── */
    .pereezd-hub-page .hub-cta-final__sub,
    .pereezd-hub-page .hub-cta-final__note,
    .pereezd-hub-page .hub-cta-final__discount-label {
        text-transform: none;
    }
    /* ── C-06b: feature-pills в макете UPPERCASE Roboto Medium 12.8px (Figma node 1:346/1:350/1:356) ── */
    .pereezd-hub-page .hub-cta-final__feature {
        text-transform: uppercase;
        font-family: Roboto, Helvetica, Arial, sans-serif;
        font-weight: 500;
        font-size: 12.8px;
        letter-spacing: 0.384px;
    }

    /* HP-6 D-CTA-2 + HP-6b (итер.2): discount-badge — Figma Frame 137 (88×80,
       text 68×60, padding 10 со всех сторон). В шаблоне «5%» в Roboto 900
       50px шире 68px и пробивает padding — поэтому делаем width:auto с
       min-width:88px и padding 10px 16px, чтобы был визуально равномерный
       красный фон вокруг «5». */
    .pereezd-hub-page .hub-cta-final__discount {
        background: #FF2D2D;
        width: auto;
        min-width: 88px;
        min-height: 80px;
        padding: 10px 16px;
        border-radius: 8px;
        box-sizing: border-box;
    }
    .pereezd-hub-page .hub-cta-final__percent {
        color: #fff;
        font-size: 50px;
        font-weight: 900;
        line-height: 60px;
        padding: 0;
    }
    /* HP-6 D-CTA-2: note/discount-label тёмные на жёлтом */
    .pereezd-hub-page .hub-cta-final__note,
    .pereezd-hub-page .hub-cta-final__discount-label {
        color: #1d1d1d;
    }

    /* ── M-04: Reviews tabs — 4 равных сегмента 106.5px, без рейтингов (Figma 1:259) ── */
    .pereezd-hub-page .hub-reviews__tabs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        overflow-x: visible;
        max-width: 430px;
        gap: 0;
        padding: 2px;
    }
    .pereezd-hub-page .hub-reviews__tab {
        min-width: 0;
        width: auto;
        flex: none;
        padding: 6px 8px;
        font-size: 13px;
        justify-content: center;
    }
    /* HP-4 D-REVIEWS-1: на мобиле рейтинг в табах ВИДИМ (Figma 1:243 / 1:259) */
    .pereezd-hub-page .hub-reviews__tab-rating {
        display: inline-block;
        font-weight: 700;
        margin-left: 4px;
        font-size: 12px;
    }
    /* HP-5a (итер.2): на узких экранах боковой отступ для табов = 2px от
       краёв экрана (а не 15px от .container). Табы — прямой потомок
       .hub-reviews.container с padding:0 15px, поэтому компенсируем
       отрицательным margin -13px. */
    .pereezd-hub-page .hub-reviews__tabs {
        margin-left: -13px;
        margin-right: -13px;
        max-width: none;
        width: auto;
    }
    /* HP-5b (итер.2) + HP-1 (итер.3): карточки до клика «Подробнее» одной высоты
       за счёт min-height на .user-card. line-clamp НЕ применяем — PHP уже
       обрезает текст до 130 символов и добавляет ссылку «Подробнее», а CSS-кламп
       прятал эту ссылку и ломал разворачивание. .content без overflow:hidden,
       чтобы slideDown(.content-full) корректно показывал полный текст. */
    .pereezd-hub-page .hub-reviews .item-wrap .user-card {
        min-height: 260px;
        box-sizing: border-box;
    }
    .pereezd-hub-page .hub-reviews .item-wrap .content {
        overflow: visible;
    }
    /* HP-2 D-CASES-2: на мобиле Videomag/Slidercases — slick-карусель с dots,
       а не горизонтальный скролл. Нейтрализуем агрессивные правила из
       modules/video/widgets/views/videomag.php и modules/cases/widgets/views/slidercases.php.
       ВАЖНО: не трогать .custom-modal — это модалка видео, должна оставаться display:none. */
    .pereezd-hub-page .hub-cases__panel > .slick-slider,
    .pereezd-hub-page #cases-slider {
        display: block !important;
        overflow: visible !important;
        flex-wrap: initial !important;
        gap: 0 !important;
        scrollbar-width: auto !important;
    }
    .pereezd-hub-page .hub-cases__panel .slick-arrow {
        display: none !important;
    }
    .pereezd-hub-page .hub-cases__panel .slick-slide .videocaptionz,
    .pereezd-hub-page .hub-cases__panel .slick-slide .videocaptionzz {
        width: 100%;
        max-width: 100%;
    }
    .pereezd-hub-page .hub-cases__panel .slick-slide .video-thumbnail {
        width: 100%;
        max-width: 100%;
    }
}

/* HP-2 (итер.3): на всех мобильных/планшетных шириных (≤767px) карусели
   Cases (Videomag/Slidercases) и Reviews не должны «сплющиваться» друг на друга.
   Корень проблемы: модули video/cases добавляют `#w2,#w9,#w10,#w11,#cases-slider
   { display:flex; overflow-x:scroll; gap:20px }` через inline-CSS под @media (max-width:600px).
   Это превращает .slick-slider во flex-контейнер → slick-list и slick-dots
   ложатся в одну строку, слайды накладываются друг на друга, появляется
   горизонтальный скролл, точки сдвигаются вправо. Нейтрализуем эти правила,
   чтобы slick-carousel работал штатно: один блок слайдов в строке, dots — снизу. */
@media (max-width: 767px) {
    .pereezd-hub-page .hub-cases__panel > .slick-slider,
    .pereezd-hub-page .hub-reviews .slick-slider,
    .pereezd-hub-page #cases-slider {
        display: block !important;
        overflow: visible !important;
        flex-wrap: initial !important;
        gap: 0 !important;
        scrollbar-width: auto !important;
    }
    .pereezd-hub-page .hub-cases__panel .slick-list,
    .pereezd-hub-page .hub-reviews .slick-list {
        overflow: hidden !important;
    }
    .pereezd-hub-page .hub-cases__panel .slick-arrow {
        display: none !important;
    }
    /* Карусели на мобильном/планшетном — 1 слайд за раз с фиксированным
       gap между слайдами (16px). Slick управляет шириной .slick-slide
       инлайн-стилем, но мы дополнительно проставляем горизонтальный padding,
       который реализует визуальный интервал. */
    .pereezd-hub-page .hub-cases__panel .slick-slide,
    .pereezd-hub-page .hub-reviews .slick-slide {
        padding-left: 8px !important;
        padding-right: 8px !important;
        box-sizing: border-box !important;
    }
    .pereezd-hub-page .hub-cases__panel .slick-track,
    .pereezd-hub-page .hub-reviews .slick-track {
        display: flex !important;
        align-items: stretch !important;
    }

    /* iter7 V-4: убрать зелёную горизонтальную линию (на самом деле — горизонтальный
       зелёный скроллбар) под последним вопросом FAQ.
       Источник: modules/cases/widgets/views/slidercases.php линия 66 — инлайн-стиль
       `@media (max-width:600px) { #w10, #w11, #w2, #w4 { display:flex; overflow-x:scroll;
       scrollbar-color:#235C33 #e6e6e6 } }`. Yii авто-назначает id `#w11` блоку
       `.panel-group.collapse.in` FAQ-виджета (yii\bootstrap\Collapse), и правило
       срабатывает на него, рисуя зелёный scrollbar (235C33 = primary). Нейтрализуем
       overflow-x и flex-поведение конкретно на FAQ panel-group. */
    .pereezd-hub-page .hub-faq .panel-group,
    .pereezd-hub-page .hub-faq.faq-hub-style .panel-group {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        overflow-x: visible !important;
        scrollbar-width: auto !important;
        scrollbar-color: auto !important;
        gap: 8px !important;
    }
}

/* iter7 V-2: на очень узких экранах (≤390px — iPhone SE/12 mini и меньше) 4 кнопки
   фильтра отзывов «Все/Яндекс/Google/2ГИС» не помещаются в один ряд (текст с
   рейтингом «Яндекс 4.9» = 83px > 74px ширины слота при viewport 320). Переносим
   их в две строки 2×2: ряд 1 = Все + Яндекс, ряд 2 = Google + 2ГИС. */
@media (max-width: 390px) {
    .pereezd-hub-page .hub-reviews__tabs {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px !important;
        max-width: 100% !important;
        margin-left: -13px;
        margin-right: -13px;
    }
    .pereezd-hub-page .hub-reviews__tab {
        height: auto;
        min-height: 32px;
        padding: 6px 6px;
        font-size: 12px;
    }
    /* Убираем вертикальную разделительную полоску между табами — она была
       рассчитана на 1-рядный layout и не нужна для 2×2. */
    .pereezd-hub-page .hub-reviews__tab + .hub-reviews__tab::before {
        display: none;
    }
}

/* iter7 V-5: уменьшаем нижний интервал между финальным CTA («Не уверены, с чего
   начать?») и подвалом на мобильной. Источник: .hub { padding-bottom: 64px }
   из var --hub-section-gap. Делаем 24px — визуально аккуратнее. */
@media (max-width: 767px) {
    .pereezd-hub-page .hub {
        padding-bottom: 24px;
    }
}