/* ═══ Раздел «Маркетинговые услуги»: баннер и лента ═════════════════
   Один файл на главную и на коммерческие страницы ниш
   (/services/marketolog/{ниша}): раздел там тот же, с теми же шестью
   услугами, и раньше на нишевых страницах он лежал старой masonry-
   сеткой без баннера — человек, пришедший с главной, видел другой
   сайт. Теперь разметка и стили общие, а карточки по-прежнему красит
   css своей страницы: здесь только то, что нужно баннеру и ленте.

   Подключается из header.php после css страницы; селекторы держат
   префикс .marketing .service, как и в файлах страниц. */

/* Эти два правила есть только в css главной, а лента без них не
   собирается: бесплатная карточка телеграм-канала стоит на светлом
   градиенте с тёмной плашкой «бесплатно». */
.marketing .service  .badge-dark{
    font-family: Oswald, serif;
    background: var(--bg-color-dark);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 300;
    font-size: 21px;
    text-transform: uppercase;
    margin-right: 10px;
}

.marketing .service .service-card.telegram{
    background: linear-gradient(328deg, rgb(243 243 243), rgb(242 247 255))
}


/* ═══ Баннер «Маркетинговая стратегия» ══════════════════════════════
   Первый блок раздела и единственная тёмная плоскость во всю ширину:
   бесплатное предложение должно прочитаться раньше платных карточек.

   Справа врезано окно доски стратегии. Снимок снят в тёмной теме
   документа, и его бумага — ровно #1E1E1E, то есть --bg-color-dark:
   поэтому доска не лежит на плашке прямоугольной заплаткой, а
   продолжает её, и стыка не видно вовсе.

   Зелёного здесь два, и оба по делу: «прибыль» — это деньги,
   кнопка — целевое действие. Больше зелёного в баннере нет. */
.marketing .service .strategy-banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 420px;
    margin-bottom: 30px;
    padding: 55px 50px;
    border: none;
    border-radius: 24px;
    background-color: var(--bg-color-dark);
    overflow: hidden;
}
.marketing .service .strategy-banner__text {
    position: relative;
    z-index: 1;
    max-width: 47%;
}
.marketing .service .strategy-banner__eyebrow {
    display: block;
    margin-bottom: 24px;
    font-family: Oswald, sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}
.marketing .service .strategy-banner__title {
    margin-bottom: 20px;
    font-family: Oswald, sans-serif;
    font-size: 56px;
    font-weight: 400;
    line-height: 1.04;
    text-transform: none;
    color: var(--color-text-dark);
}
/* Деньги — зелёным. Отказ от слива бюджета — приглушённым: то, что
   делать не надо, написано тише, а не другим цветом. */
.marketing .service .strategy-banner__title .is-money { color: var(--color-main); }
.marketing .service .strategy-banner__title .is-off {
    font-weight: 200;
    color: rgba(255, 255, 255, 0.38);
}
.marketing .service .strategy-banner__lead {
    margin-bottom: 40px;
    font-family: Roboto, sans-serif;
    font-size: 26px;
    font-weight: 200;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.66);
}
.marketing .service .strategy-banner .btn_one {
    display: inline-block;
    width: auto;
    margin-top: 0;
    padding: 18px 48px;
    font-size: 22px !important;
    box-shadow: 0 16px 44px -14px rgba(48, 146, 111, 0.85);
}
.marketing .service .strategy-banner .btn_one:hover {
    box-shadow: 0 10px 26px -14px rgba(48, 146, 111, 0.85);
}
.marketing .service .strategy-banner .btn_one:focus-visible {
    outline: 3px solid var(--color-text-dark);
    outline-offset: 3px;
}

/* Окно доски. Слоя три и порядок важен: зелёное свечение поверх
   снимка, снимок, а под ним сетка точек — если файл потеряется, на
   месте окна останется миллиметровка, а не чёрная дыра.
   #000 в маске — не цвет, а плотность: маска решает, где окно есть. */
.marketing .service .strategy-banner__scheme {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 62%;
    background-color: var(--bg-color-dark);
    background-image:
        radial-gradient(85% 130% at 72% 8%, rgba(48, 146, 111, 0.30), transparent 62%),
        url(/files/assets/strategy-board.png),
        radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
    background-repeat: no-repeat, no-repeat, repeat;
    background-size: auto, auto 165%, 22px 22px;
    background-position: 0 0, 42% 24%, 0 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26%);
    mask-image: linear-gradient(to right, transparent 0, #000 26%);
    transition: background-position 0.6s ease;
}
/* Доска чуть уезжает под курсором — видно, что за краем окна она
   продолжается. */
.marketing .service .strategy-banner:hover .strategy-banner__scheme {
    background-position: 0 0, 47% 21%, 0 0;
}

@media (max-width: 1399px) {
    .marketing .service .strategy-banner {
        min-height: 380px;
        padding: 45px 40px;
    }
    .marketing .service .strategy-banner__title { font-size: 46px; }
    .marketing .service .strategy-banner__lead { font-size: 24px; margin-bottom: 34px; }
}

/* С 1199px карточки раздела встают в одну колонку — баннер тоже
   раскладывается: текст сверху, окно доски полосой под ним. */
@media (max-width: 1199px) {
    .marketing .service .strategy-banner {
        display: block;
        min-height: 0;
        padding: 42px 35px 0;
    }
    .marketing .service .strategy-banner__text { max-width: 100%; }
    .marketing .service .strategy-banner__scheme {
        position: relative;
        width: auto;
        height: 280px;
        margin: 38px -35px 0;
        background-image:
            radial-gradient(80% 120% at 60% 0%, rgba(48, 146, 111, 0.30), transparent 62%),
            url(/files/assets/strategy-board.png),
            radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
        background-size: auto, auto 260%, 22px 22px;
        background-position: 0 0, 36% 26%, 0 0;
        -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
    }
    .marketing .service .strategy-banner:hover .strategy-banner__scheme {
        background-position: 0 0, 36% 26%, 0 0;
    }
}

@media (max-width: 767px) {
    .marketing .service .strategy-banner {
        padding: 34px 25px 0;
        border-radius: 20px;
    }
    .marketing .service .strategy-banner__eyebrow {
        margin-bottom: 16px;
        font-size: 14px;
    }
    .marketing .service .strategy-banner__title {
        margin-bottom: 14px;
        font-size: 35px;
    }
    .marketing .service .strategy-banner__lead {
        margin-bottom: 30px;
        font-size: 21px;
    }
    .marketing .service .strategy-banner .btn_one {
        display: block;
        width: 100%;
        padding: 16px 20px;
        font-size: 19px !important;
    }
    .marketing .service .strategy-banner__scheme {
        height: 210px;
        margin: 32px -25px 0;
        background-size: auto, auto 300%, 22px 22px;
        background-position: 0 0, 40% 24%, 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .marketing .service .strategy-banner__scheme,
    .marketing .service .strategy-banner:hover .strategy-banner__scheme {
        transition: none;
        background-position: 0 0, 42% 24%, 0 0;
    }
}


/* ═══ Появление раздела ═════════════════════════════════════════════
   Раздел лежит ниже первого экрана, и до него доезжают: заголовок,
   баннер и линейка цен не стоят готовыми, а собираются, когда
   попадают в кадр. Скрипт вешает на <html> класс svc-reveal — до него
   всё видно как есть, чтобы без js и в поиске страница не была
   пустой, — и класс is-in на каждый блок, когда тот доехал до экрана.

   Порядок сборки повторяет порядок чтения: заголовок раздела, потом
   в баннере строка за строкой сверху вниз, доска въезжает справа
   последней, а линейка цен прочерчивается слева направо и на ней
   одна за другой встают засечки. Всё один раз: класс is-in не
   снимается, второй прокруткой блоки не мигают. */
@keyframes svc-rise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
}
@keyframes svc-slide-in {
    from { opacity: 0; transform: translateX(60px) scale(1.04); }
    to   { opacity: 1; transform: none; }
}
@keyframes svc-draw {
    from { transform: scaleX(0); }
    to   { transform: none; }
}
@keyframes svc-drop {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: none; }
}

/* Пока блок не доехал — спрятан. Прячем только под svc-reveal, чтобы
   без скрипта ничего не пропало. */
.svc-reveal .marketing .service .section_title h2,
.svc-reveal .marketing .service .strategy-banner__eyebrow,
.svc-reveal .marketing .service .strategy-banner__title,
.svc-reveal .marketing .service .strategy-banner__lead,
.svc-reveal .marketing .service .strategy-banner .btn_one,
.svc-reveal .marketing .service .strategy-banner__scheme,
.svc-reveal .marketing .service .svc-mark,
.svc-reveal .marketing .service .svc-scale__ends span,
.svc-reveal .marketing .service .svc-arrow {
    opacity: 0;
}
.svc-reveal .marketing .service .svc-scale__line {
    transform: scaleX(0);
    transform-origin: 0 50%;
}
.svc-reveal .marketing .service .strategy-banner {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Заголовок раздела. */
.svc-reveal .marketing .service .section_title.is-in h2 {
    animation: svc-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* Баннер: сначала сама плашка, затем текст строка за строкой. */
.svc-reveal .marketing .service .strategy-banner.is-in {
    opacity: 1;
    transform: none;
}
.svc-reveal .marketing .service .strategy-banner.is-in .strategy-banner__eyebrow,
.svc-reveal .marketing .service .strategy-banner.is-in .strategy-banner__title,
.svc-reveal .marketing .service .strategy-banner.is-in .strategy-banner__lead,
.svc-reveal .marketing .service .strategy-banner.is-in .btn_one {
    animation: svc-rise 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.svc-reveal .marketing .service .strategy-banner.is-in .strategy-banner__eyebrow { animation-delay: 0.15s; }
.svc-reveal .marketing .service .strategy-banner.is-in .strategy-banner__title   { animation-delay: 0.27s; }
.svc-reveal .marketing .service .strategy-banner.is-in .strategy-banner__lead    { animation-delay: 0.42s; }
.svc-reveal .marketing .service .strategy-banner.is-in .btn_one                  { animation-delay: 0.56s; }
/* Доска въезжает справа и чуть садится по масштабу — как окно,
   которое подвели к плашке. Fill-mode both: после анимации transform
   снова none, и сдвиг под курсором работает как раньше. */
.svc-reveal .marketing .service .strategy-banner.is-in .strategy-banner__scheme {
    animation: svc-slide-in 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
}

/* Линейка: линия прочерчивается, засечки падают на неё по очереди,
   стрелки появляются последними. */
.svc-reveal .marketing .service .svc-rail.is-in .svc-scale__line {
    animation: svc-draw 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.svc-reveal .marketing .service .svc-rail.is-in .svc-mark,
.svc-reveal .marketing .service .svc-rail.is-in .svc-scale__ends span {
    animation: svc-drop 0.5s ease-out both;
}
.svc-reveal .marketing .service .svc-rail.is-in .svc-mark:nth-child(1) { animation-delay: 0.25s; }
.svc-reveal .marketing .service .svc-rail.is-in .svc-mark:nth-child(2) { animation-delay: 0.35s; }
.svc-reveal .marketing .service .svc-rail.is-in .svc-mark:nth-child(3) { animation-delay: 0.45s; }
.svc-reveal .marketing .service .svc-rail.is-in .svc-mark:nth-child(4) { animation-delay: 0.55s; }
.svc-reveal .marketing .service .svc-rail.is-in .svc-mark:nth-child(5) { animation-delay: 0.65s; }
.svc-reveal .marketing .service .svc-rail.is-in .svc-mark:nth-child(6) { animation-delay: 0.75s; }
.svc-reveal .marketing .service .svc-rail.is-in .svc-scale__ends span:first-child { animation-delay: 0.25s; }
.svc-reveal .marketing .service .svc-rail.is-in .svc-scale__ends span:last-child  { animation-delay: 0.75s; }
.svc-reveal .marketing .service .svc-rail.is-in .svc-arrow {
    animation: svc-drop 0.5s ease-out 0.85s both;
}

/* Тем, кто просил меньше движения, — без движения: всё сразу на
   месте, как без скрипта. */
@media (prefers-reduced-motion: reduce) {
    .svc-reveal .marketing .service .section_title h2,
    .svc-reveal .marketing .service .strategy-banner,
    .svc-reveal .marketing .service .strategy-banner__eyebrow,
    .svc-reveal .marketing .service .strategy-banner__title,
    .svc-reveal .marketing .service .strategy-banner__lead,
    .svc-reveal .marketing .service .strategy-banner .btn_one,
    .svc-reveal .marketing .service .strategy-banner__scheme,
    .svc-reveal .marketing .service .svc-scale__line,
    .svc-reveal .marketing .service .svc-mark,
    .svc-reveal .marketing .service .svc-scale__ends span,
    .svc-reveal .marketing .service .svc-arrow {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
    }
}


/* ═══ Лента услуг ═══════════════════════════════════════════════════
   Шесть карточек стоят одной прокручиваемой полосой по возрастанию
   цены. Сами карточки не меняются: это те же .block .service-card,
   что раньше лежали в masonry, — меняется только то, как они стоят.

   Навигация — линейка цен над лентой. Точки под каруселью сообщают
   лишь «сколько всего слайдов»; линейка называет цену каждой услуги и
   показывает, какой участок ряда сейчас на экране: зелёный отрезок
   равен доле видимых карточек и едет вместе с прокруткой. Цена, до
   которой человек доехал, из серой становится чёрной.

   Прокрутка нативная, на scroll-snap: свайп, трекпад и клавиатура
   работают без библиотеки, скрипт добавляет только стрелки, отрезок
   и подсветку. */

.marketing .service .svc-carousel {
    --svc-gap: 30px;
    --svc-per: 3;          /* сколько карточек помещается целиком */
    --svc-peek: 74px;      /* сколько видно от следующей: «ряд не кончился» */
    position: relative;
    /* Линейка принадлежит карточкам, а не баннеру над ними: сверху
       воздуха больше, чем между линейкой и лентой. */
    margin-top: 20px;
}

/* ── Линейка цен ───────────────────────────────────────────────── */
.marketing .service .svc-rail {
    display: flex;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 38px;
}
.marketing .service .svc-scale {
    flex: 1 1 auto;
    min-width: 0;
}
.marketing .service .svc-scale__line {
    position: relative;
    height: 1px;
    background: var(--color-border-light);
}
.marketing .service .svc-scale__range {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-main);
    /* Ширину и сдвиг ставит скрипт: они равны доле видимых карточек.
       Переход не задаём — отрезок должен идти вместе с пальцем, а не
       догонять его. */
}
.marketing .service .svc-scale__marks {
    display: flex;
    margin-top: 0;
}
.marketing .service .svc-mark {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 0 4px 2px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: Oswald, sans-serif;
    font-size: 19px;
    font-weight: 300;
    line-height: 1;
    white-space: nowrap;
    color: #9a9a9a;
    transition: var(--transition-default);
}
.marketing .service .svc-scale__ends {
    display: none;
    justify-content: space-between;
    font-family: Oswald, sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: #9a9a9a;
}
.marketing .service .svc-mark i {
    width: 1px;
    height: 9px;
    background: var(--color-border-light);
    transition: var(--transition-default);
}
.marketing .service .svc-mark.is-on {
    color: var(--color-text-light);
}
.marketing .service .svc-mark.is-on i {
    height: 15px;
    background: var(--color-main);
}
.marketing .service .svc-mark:hover,
.marketing .service .svc-mark.is-hot {
    color: var(--color-main);
}
/* Карточка под курсором зажигает свою цену на линейке — иначе линейка
   и лента остаются двумя отдельными вещами на одном экране. */
.marketing .service .svc-mark.is-hot i {
    height: 15px;
    background: var(--color-main);
}
.marketing .service .svc-mark:focus-visible {
    outline: 2px solid var(--color-main);
    outline-offset: 4px;
    border-radius: 4px;
}

/* ── Стрелки ───────────────────────────────────────────────────── */
.marketing .service .svc-arrows {
    display: flex;
    gap: 12px;
    flex: 0 0 auto;
}
.marketing .service .svc-arrow {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-light);
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-light);
    cursor: pointer;
    transition: var(--transition-default);
}
.marketing .service .svc-arrow:hover {
    border-color: var(--color-main);
    color: var(--color-main);
}
.marketing .service .svc-arrow:focus-visible {
    outline: 2px solid var(--color-main);
    outline-offset: 3px;
}
.marketing .service .svc-arrow[disabled] {
    opacity: .3;
    cursor: default;
    border-color: var(--color-border-light);
    color: var(--color-text-light);
}

/* ── Полоса ────────────────────────────────────────────────────── */
.marketing .service .svc-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Запас по краям — чтобы приподнятая карточка и её тень не
       обрезались краем прокрутки. Отрицательные поля возвращают
       ленту на место. */
    margin: -14px -14px -34px;
    padding: 14px 14px 34px;
    /* Снап считает от края отступа, и без этой строки лента в покое
       стоит на 14px правее нуля: левый край выглядит прокрученным,
       хотя не тронут. */
    scroll-padding-left: 14px;
}
.marketing .service .svc-viewport::-webkit-scrollbar {
    display: none;
}
/* Инерция прокрутки пальцем в старых webkit — там, где она не по
   умолчанию. Свайп по ленте делает браузер, скрипт в тач не лезет. */
.marketing .service .svc-viewport {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
/* Ленту можно тащить мышью — курсор об этом и говорит. Только там, где
   мышь есть: на телефоне «схватить» нечем. */
@media (hover: hover) and (pointer: fine) {
    .marketing .service .svc-viewport {
        cursor: grab;
    }
    .marketing .service .svc-carousel.is-grabbing .svc-viewport {
        cursor: grabbing;
    }
    /* Пока ленту тянут, текст в карточках не выделяется: жест не должен
       оставлять после себя подсвеченный абзац. */
    .marketing .service .svc-carousel.is-grabbing .svc-track {
        user-select: none;
        -webkit-user-select: none;
    }
}
.marketing .service .svc-viewport:focus-visible {
    outline: 2px solid var(--color-main);
    outline-offset: -2px;
}
.marketing .service .svc-track {
    display: flex;
    align-items: stretch;
    gap: var(--svc-gap);
}
.marketing .service .svc-track .block {
    flex: 0 0 calc(
        (100% - (var(--svc-per) - 1) * var(--svc-gap) - var(--svc-peek)) / var(--svc-per)
    );
    scroll-snap-align: start;
    scroll-margin-left: 0;
}
.marketing .service .svc-track .block:hover {
    border-color: var(--color-main);
    transform: translateY(-5px);
    box-shadow: 0 18px 38px rgba(48, 146, 111, .13);
}
.marketing .service .svc-track .service-card.card-dark {
    /* Ракета раньше вылетала за карточку на 120px. В прокручиваемой
       полосе такой вылет обрезается краем окна, поэтому она ушла
       внутрь и подрезается собственным углом карточки. */
    overflow: hidden;
}
.marketing .service .svc-track .service-card.card-dark:hover {
    border-color: transparent;
    box-shadow: 0 18px 38px rgba(30, 30, 30, .22);
}
.marketing .service .svc-track .rocket-img {
    right: -14px;
    top: -10px;
    bottom: auto;
    max-width: 150px;
    z-index: 1;
    transform: rotate(12deg);
}

/* Затухание у краёв: карточка не обрывается ножом, а уходит из кадра.
   Маска — не цвет интерфейса, это градиент прозрачности. */
.marketing .service .svc-viewport {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 56px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 56px), transparent 100%);
}
.marketing .service .svc-carousel.at-start .svc-viewport {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 56px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 56px), transparent 100%);
}
.marketing .service .svc-carousel.at-end .svc-viewport {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 100%);
}
.marketing .service .svc-carousel.at-start.at-end .svc-viewport {
    -webkit-mask-image: none;
    mask-image: none;
}

@media (prefers-reduced-motion: reduce) {
    .marketing .service .svc-viewport {
        scroll-behavior: auto;
    }
    .marketing .service .svc-track .block:hover {
        transform: none;
    }
}

/* ── Экраны поменьше ───────────────────────────────────────────────
   Ниже 1200px типографика карточек на сайте разгоняется до 48px, и
   две карточки в кадре читаются уже плохо: остаётся одна с заглядом
   на следующую. Ниже 768px линейка теряет подписи — шесть цен в ряд
   на телефоне не помещаются, — но остаётся линейкой: засечки видно,
   отрезок едет, по засечке можно попасть пальцем. */
@media (max-width: 1199px) {
    .marketing .service .svc-carousel {
        --svc-per: 1;
        --svc-peek: 90px;
    }
    .marketing .service .svc-rail {
        gap: 26px;
        margin-bottom: 30px;
    }
    .marketing .service .svc-mark {
        font-size: 15px;
        gap: 8px;
        padding: 0 2px 2px;
    }
}
@media (max-width: 767px) {
    .marketing .service .svc-carousel {
        --svc-gap: 18px;
        --svc-peek: 42px;
    }
    .marketing .service .svc-arrows {
        display: none;
    }
    .marketing .service .svc-mark {
        /* Засечка остаётся кнопкой, и по ней должны попадать пальцем. */
        padding: 0 2px 16px;
    }
    .marketing .service .svc-mark span {
        display: none;
    }
    .marketing .service .svc-mark i {
        height: 14px;
    }
    .marketing .service .svc-mark.is-on i {
        height: 20px;
    }
    .marketing .service .svc-scale__ends {
        display: flex;
        margin-top: -8px;
    }
    .marketing .service .svc-rail {
        margin-bottom: 24px;
    }
    .marketing .service .svc-viewport {
        margin: -10px -10px -24px;
        padding: 10px 10px 24px;
        scroll-padding-left: 10px;
    }
}