/* ============================================================================
   Страница «Партнёры» — по «NewDisign/partners.psd» (редакция 2026-09-17).

   Макет @2x: холст 2560×4234 = 1280×2117 CSS, все размеры ниже поделены пополам.
   Шапка 0..80, подвал начинается с 2039,5. Координаты в комментариях — от верха
   страницы, в CSS-пикселях, по кадру 1280 (на компьютере страница зумом всегда
   шириной 1600, кадр 1280 стоит по центру).

   Что изменилось против прошлой редакции (партнерыфинал.psd):
   • эфиры и профили — карусели: видно две карточки, третья выглядывает справа
     затемнённой (в макете группа с непрозрачностью 153/255). Свайп или стрелка
     сдвигает ряд на карточку, ушедшая влево тоже затемняется. «Показать больше»
     раскрывает весь список;
   • карточки стеклянные: заливка на 50 %, кромка, внешнее свечение; у профиля
     фоном — шапка канала (загружает супер-админ, Twitch её по API не отдаёт);
   • внизу плашка-призыв, маскотов больше нет, на первом экране другой герой.

   Картинки вырезаны скриптами из PSD, сверка — со сведённой копией (17.png):
   • bg — градиент страницы (тот же, что у прошлой редакции, CSS ниже) и четыре
     слоя «осветление основы»: собор справа, цех слева, библиотека за первым
     экраном, герб Патрона за героем. У всех стоит Blend If. Рампа разделённого
     ползунка считается как (серый − начало + 1) / (конец − начало + 1): без этой
     единицы герб выходил темнее макета на 4–8. Клип-группа собора (Layer 27
     поверх фото) смешивается группой, Blend If — по уже сведённому цвету.
     Остаток по чистым местам 0,3 из 255, максимум 1,8. Градиент в файле посчитан
     под раскладку 1600, низ и края сведены в чистый градиент. Ластик дизайнера
     стирает фото только внутри холста — за его краем альфа продолжена крайним
     столбцом, иначе на раскладке 1600 по x 0 и 1280 кадра шёл резкий край;
   • art — герой (snapedit) с обтравленными затемнениями Layer 28/26. Исходник
     слоя 1701×1136 = @2x, крупнее нет. Ресайз с премножением на альфу;
   • card-live-mark — надписи «boostlock» с карточки эфира (4 слоя по 26/255).
   ========================================================================== */

/* <main> отступает под шапку на 96 (шапка + 16). Страница начинается ровно
   под полосой — как в макете, — поэтому лишние 16 снимаем. С полосой
   тех-работ не трогаем: там контент обязан опускаться. */
body:has(.bl-pt):not(.maint-on) .app-main {
    padding-top: var(--bl-header-h) !important;
}

/* Градиент страницы из макета — линейный, светлеет к правому нижнему углу.
   Стопы в пикселях, а не процентах: при 147° отсчёт идёт от левого верхнего
   угла, и цвет в точке не зависит от высоты страницы — с раскрытыми списками
   фон просто продолжается ниже картинки, без стыка.

   ⚠️ Ни у самой страницы, ни у секций, ни у карусели не должно быть своего
   контекста наложения (z-index у позиционированных, transform, filter, opacity,
   contain, isolation): кромки карточек смешиваются «осветлением основы» с тем,
   что под ними, — в макете это страница целиком. Замкнутая группа посчитала бы
   свет от одной полупрозрачной заливки. */
.bl-pt {
    position: relative;
    /* flow-root: overflow: clip не создаёт своего блока, и нижнее поле плашки
       проваливалось бы наружу — фон страницы обрывался бы на её нижнем крае. */
    display: flow-root;
    overflow: clip;
    background-color: #0E0A18;
    background-image: linear-gradient(147.29deg, rgb(13.6 9.4 23.5) 0px, rgb(45.3 29.8 81.2) 6000px);
}
@supports not (overflow: clip) {
    .bl-pt { overflow: hidden; }
}

.bl-pt__bg {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1708px;
    height: 1960px;
    margin-left: -854px;
    pointer-events: none;
}
.bl-pt__bg img,
.bl-pt-hero__art img {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── Первый экран ────────────────────────────────────────────────────────── */
/* 80..687: заголовок эфиров стоит на базовой линии 737,45. */
.bl-pt-hero {
    position: relative;
    height: 607px;
}

/* Герой: x 448..1298,5, y 78,5..646,5 — верх на 1,5 px под полосой шапки,
   правый край за холстом (в файле он сведён в прозрачность). */
.bl-pt-hero__art {
    position: absolute;
    top: -1.5px;
    left: calc(50% - 192px);
    width: 850.5px;
    height: 568px;
    pointer-events: none;
    user-select: none;
}

.bl-pt-hero__inner {
    position: relative;
}

/* Базовая линия первой строки — 225,9, шаг строк 67,36 (как в прошлой редакции,
   блок опустился на 16,3).

   letter-spacing здесь и ниже — не стилизация: тот же шрифт в браузере
   набирает строку на 1–3 % шире фотошопа (светлые начертания — сильнее). */
.bl-pt-hero__title {
    margin: 0 0 0 -3.8px;
    padding-top: 91.11px;
    font-size: 73px;
    font-weight: 600;
    line-height: 67.36px;
    letter-spacing: -.0078em;
    color: #fff;
}

/* Лид — один текстовый слой с непрозрачностью 204/255: Light 19, «Deadlock»
   сиреневым Medium, последняя строка — Medium. Шаг 22,8, первая базовая 362,4. */
.bl-pt-hero__lead {
    margin: 39.94px 0 0 -1.2px;
    font-size: 19px;
    font-weight: 300;
    line-height: 22.8px;
    letter-spacing: -.015em;
    color: rgba(255, 255, 255, .8);
    white-space: nowrap;
}
.bl-pt-hero__lead b { font-weight: 500; letter-spacing: -.007em; color: #A892DC; }
/* Между абзацами — одна пустая строка, как в макете. */
.bl-pt-hero__lead--accent {
    margin-top: 22.8px;
    font-weight: 500;
    letter-spacing: -.0069em;
}

/* ── Заголовки секций ────────────────────────────────────────────────────── */
.bl-pt-head {
    position: relative;
}
.bl-pt-title {
    margin: 0 0 0 -1.4px;
    font-size: 30px;
    font-weight: 900;
    line-height: 36px;
    letter-spacing: 0;
    color: #fff;
}
.bl-pt-title--live { margin-left: 1px; }
/* Красная точка «в эфире»: 13 px с x 56,5, низ на 2,5 px выше базовой линии.
   Строчный блок, а не flex: на телефоне заголовок переносится, и точка
   должна остаться у первой строки. */
.bl-pt-title__dot {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin: 0 16.1px 2.5px -.5px;
    border-radius: 50%;
    background: #FF0000;
    vertical-align: baseline;
}
.bl-pt-sub {
    margin: 7.65px 0 0 -1.2px;
    font-size: 20px;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: -.0142em;
    color: #fff;
}

/* «Показать больше» — на базовой линии подзаголовка, кончается на x 1178,5. */
.bl-pt-more {
    position: absolute;
    right: 61.5px;
    bottom: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 20px;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: -.0142em;
    color: #fff;
    cursor: pointer;
    transition: color .18s ease;
}
.bl-pt-more[hidden] { display: none; }
.bl-pt-more::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease;
}
.bl-pt-more:hover,
.bl-pt-more:focus-visible { color: #CDB6FF; }
.bl-pt-more:hover::after,
.bl-pt-more:focus-visible::after { transform: scaleX(1); }
.bl-pt-more:focus-visible { outline: none; }

/* Строка стоит в .bl-container — поля по бокам не трогаем, иначе она прилипнет к краю. */
.bl-pt-empty {
    margin-block: 0;
    font-size: 18px;
    font-weight: 300;
    line-height: 26px;
    color: rgba(255, 255, 255, .7);
}

/* ── Секции ──────────────────────────────────────────────────────────────── */
/* Заголовок эфиров — базовая линия 737,45, подзаголовок — 772,53, карточки
   с 845,5 до 1219,5. Заголовок партнёров — 1332,52, подзаголовок — 1367,7,
   карточки 1440..1716,5. */
.bl-pt-live { padding-top: 23.4px; }
.bl-pt-live .bl-pt-carousel { margin-top: 67.52px; }
.bl-pt-all { padding-top: 86.1px; }
.bl-pt-all .bl-pt-sub { margin-top: 7.95px; }
.bl-pt-all .bl-pt-carousel { margin-top: 66.51px; }
/* Эфиров нет — вместо ряда карточек одна строка, отступ как у текста. */
.bl-pt-live .bl-pt-carousel:has(.bl-pt-empty) { margin-top: 32px; }
.bl-pt-all > .bl-pt-empty { margin-top: 32px; }

/* ── Карусель ─────────────────────────────────────────────────────────────
   Лента — горизонтальная прокрутка на всю ширину страницы, а не transform:
   свайп и прокрутка тачпадом работают сами, с доводкой до карточки
   (scroll-snap), а transform замкнул бы кромки в своей группе (см. .bl-pt).

   Геометрия в переменных ленты:
   --stage-l  отступ первой карточки от края страницы (контейнер + 24,5 макета);
   --card-w   ширина карточки, --gap — зазор (в макете 29, владелец попросил
              развести карточки шире — 17.09.2026);
   --per-view сколько карточек видно целиком, --stage-w — их общая ширина.
   Правое поле ленты ровно такое, чтобы последние карточки вставали на место
   первых, а не прокручивались дальше. */
/* flow-root: отрицательные поля ленты не должны «проваливаться» наружу —
   иначе верх карусели уезжает на 44 px выше карточек, и стрелки вместе с ним. */
.bl-pt-carousel__box {
    display: flow-root;
}
.bl-pt-carousel {
    --per-view: 2;
    --card-w: 469.5px;
    --gap: 44px;
    --stage-l: calc((100% - min(1168px, 100% - 32px)) / 2 + 24.5px);
    --stage-w: calc(var(--per-view) * var(--card-w) + (var(--per-view) - 1) * var(--gap));
    --u: calc(var(--card-w) / 469.5);
    position: relative;
}
.bl-pt-rail {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--gap);
    /* поля сверху и снизу — место под свечение карточек, прокрутка его обрезала бы */
    margin: -44px 0;
    padding: 44px calc(100% - var(--stage-l) - var(--stage-w)) 44px var(--stage-l);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--stage-l);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.bl-pt-rail::-webkit-scrollbar { display: none; }
.bl-pt-rail > * {
    flex: 0 0 var(--card-w);
    scroll-snap-align: start;
    transition: opacity .4s ease;
}
/* Ушедшая за край карточка — затемнена, как в макете. Нажатие по ней
   доводит её до места (скрипт), плеер и ссылки под ней в это время не ловят клик. */
.bl-pt-rail > .is-away { opacity: .6; cursor: pointer; }
.bl-pt-rail > .is-away * { pointer-events: none; }
.bl-pt-rail.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.bl-pt-rail.is-dragging * { pointer-events: none; }

/* Раскрытый список: те же карточки рядами по --per-view, но по центру страницы.
   Лента сидит на сетке слева (--stage-l), а раскрытый список владелец попросил
   ставить посередине (17.09.2026) — поэтому поля симметричные, а ряды
   выравниваются по центру: последний ряд с одной карточкой тоже встаёт
   посередине, а не под первой колонкой. */
.bl-pt-carousel.is-expanded .bl-pt-rail {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 48px;
    padding-inline: 16px;
    overflow: visible;
    scroll-snap-type: none;
}
.bl-pt-carousel.is-expanded .bl-pt-rail > * {
    animation: bl-pt-rise .45s ease both;
}
@keyframes bl-pt-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

/* Стрелки — над выглядывающими карточками: в макете центр на 113 px правее
   края затемнённой карточки и на 164 (эфиры) / 141 (профили) ниже её верха.
   Проценты в left — от ширины карусели, как и у полей ленты. */
.bl-pt-arrow {
    position: absolute;
    top: calc(164 * var(--u));
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, rgb(116 82 206 / .92) 0%, rgb(86 57 151 / .92) 100%);
    box-shadow: 0 0 18px rgba(156, 91, 222, .34), 0 6px 18px rgba(12, 6, 30, .45), inset 0 1px 0 rgba(255, 255, 255, .22);
    color: #fff;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, opacity .25s ease;
}
.bl-pt-all .bl-pt-arrow { top: calc(141 * var(--u)); }
.bl-pt-arrow[hidden] { display: none; }
/* Где выглядывающей карточки почти не видно (планшет), стрелка встаёт у края. */
.bl-pt-arrow--next { left: min(calc(var(--stage-l) + var(--stage-w) + var(--gap) + 113px), calc(100% - 34px)); }
.bl-pt-arrow--prev { left: max(calc(var(--stage-l) - var(--gap) - 113px), 34px); }
.bl-pt-arrow svg {
    display: block;
    width: 24px;
    height: 24px;
    margin: auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* хвост гаснет к началу, как у стрелки в макете */
    -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 62%);
            mask-image: linear-gradient(90deg, transparent 4%, #000 62%);
    transition: transform .2s ease;
}
.bl-pt-arrow--prev svg { transform: scaleX(-1); }
.bl-pt-arrow::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 1.5px;
    background: conic-gradient(rgb(191 191 191/.55) 0deg, rgb(191 191 191/.1) 70deg, rgb(191 191 191/0) 140deg, rgb(191 191 191/0) 220deg, rgb(191 191 191/.35) 300deg, rgb(191 191 191/.55) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    mix-blend-mode: color-dodge;
    pointer-events: none;
}
.bl-pt-arrow:hover {
    background: linear-gradient(180deg, rgb(138 100 236 / .95) 0%, rgb(98 66 172 / .95) 100%);
    box-shadow: 0 0 24px rgba(156, 91, 222, .5), 0 8px 22px rgba(12, 6, 30, .5), inset 0 1px 0 rgba(255, 255, 255, .28);
    transform: scale(1.06);
}
.bl-pt-arrow--next:hover svg { transform: translateX(2px); }
.bl-pt-arrow--prev:hover svg { transform: scaleX(-1) translateX(2px); }
.bl-pt-arrow:active { transform: scale(.96); }
.bl-pt-arrow:focus-visible { outline: 2px solid var(--bl-violet); outline-offset: 3px; }

/* ── Кнопки карточек ──────────────────────────────────────────────────────
   Заливка 50 % (градиент 113° PS = 337° CSS, #8A5CF5 → #452E7A), кромка,
   свечение «экран» #9C5BDE 15 % на 17,5. Градиент в макете растянут на 341 %,
   но меряется у Фотошопа от высоты пилюли — поэтому цвета у торцов сняты
   по пикселям, а у длинной кнопки градиент упирается в крайние цвета. */
.bl-pt-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(40 * var(--u));
    padding: 0 calc(8 * var(--u)) calc(1 * var(--u));
    border-radius: 999px;
    background: linear-gradient(337deg, rgb(138 92 245 / .5) 5.8%, rgb(69 46 122 / .5) 94.2%);
    box-shadow: 0 0 calc(17.5 * var(--u)) rgba(156, 91, 222, .15);
    font-size: max(12px, calc(17.24 * var(--u)));
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.012em;
    white-space: nowrap;
    color: #fff;
    text-decoration: none;
    transition: background .18s ease, box-shadow .18s ease;
}
.bl-pt-btn:hover {
    color: #fff;
    background: linear-gradient(337deg, rgb(150 106 255 / .68) 5.8%, rgb(82 56 146 / .68) 94.2%);
    box-shadow: 0 0 calc(22 * var(--u)) rgba(156, 91, 222, .34);
}
.bl-pt-btn:focus-visible { outline: 2px solid var(--bl-violet); outline-offset: 3px; }

/* ── Светлая кромка ───────────────────────────────────────────────────────
   Как на главной (bl-landing.css, «Светлая кромка карточек»): два слоя белого
   «перекрытием» = одно «осветление основы» серым 191 с альфой (2a + a²) / 3.
   Профили сняты с альфы слоёв макета по лучам от центра (Layer 16, 17, 20, 21,
   22, 23, 24). Толщина 1 px: у этих слоёв свет лежит в двух крайних точках @2x,
   а не в трёх, как у карточек главной. Смешивается со страницей — см.
   предупреждение у .bl-pt. */
.bl-pt-live-card::after,
.bl-pt-card::after,
.bl-pt-btn::after,
.bl-pt-tag::after,
.bl-pt-card__avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--bl-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    mix-blend-mode: color-dodge;
    pointer-events: none;
}
.bl-pt-live-card { --bl-rim: conic-gradient(rgb(191 191 191/.95) 0deg, rgb(191 191 191/.91) 27deg, rgb(191 191 191/.77) 49deg, rgb(191 191 191/.5) 60.5deg, rgb(191 191 191/.37) 69deg, rgb(191 191 191/.24) 87deg, rgb(191 191 191/.35) 104.5deg, rgb(191 191 191/.56) 119deg, rgb(191 191 191/.83) 130deg, rgb(191 191 191/.87) 143deg, rgb(191 191 191/.56) 168.5deg, rgb(191 191 191/.1) 196.5deg, rgb(191 191 191/0) 208.5deg, rgb(191 191 191/0) 214deg, rgb(191 191 191/.06) 220deg, rgb(191 191 191/.39) 234deg, rgb(191 191 191/.88) 271.5deg, rgb(191 191 191/.93) 282.5deg, rgb(191 191 191/.9) 298.5deg, rgb(191 191 191/.97) 307deg, rgb(191 191 191/.91) 316.5deg, rgb(191 191 191/.95) 360deg); }
.bl-pt-card { --bl-rim: conic-gradient(rgb(191 191 191/.06) 0deg, rgb(191 191 191/0) 10.5deg, rgb(191 191 191/0) 38deg, rgb(191 191 191/.17) 54deg, rgb(191 191 191/.06) 62.5deg, rgb(191 191 191/.03) 69deg, rgb(191 191 191/.06) 99.5deg, rgb(191 191 191/.2) 116.5deg, rgb(191 191 191/.3) 120deg, rgb(191 191 191/.72) 128.5deg, rgb(191 191 191/.8) 132.5deg, rgb(191 191 191/.82) 138deg, rgb(191 191 191/.8) 165.5deg, rgb(191 191 191/.66) 184.5deg, rgb(191 191 191/.47) 199deg, rgb(191 191 191/.07) 222deg, rgb(191 191 191/.03) 228.5deg, rgb(191 191 191/.07) 232.5deg, rgb(191 191 191/.27) 241deg, rgb(191 191 191/.38) 253deg, rgb(191 191 191/.8) 275.5deg, rgb(191 191 191/.93) 287.5deg, rgb(191 191 191/.99) 300.5deg, rgb(191 191 191/.95) 309deg, rgb(191 191 191/.82) 317deg, rgb(191 191 191/.21) 345.5deg, rgb(191 191 191/.06) 360deg); }
.bl-pt-live-card__btn { --bl-rim: conic-gradient(rgb(191 191 191/0) 78deg, rgb(191 191 191/.06) 84deg, rgb(191 191 191/.19) 91deg, rgb(191 191 191/.27) 99deg, rgb(191 191 191/.12) 111.5deg, rgb(191 191 191/.07) 139.5deg, rgb(191 191 191/0) 260deg, rgb(191 191 191/.22) 278.5deg, rgb(191 191 191/.08) 294.5deg, rgb(191 191 191/.03) 305deg, rgb(191 191 191/0) 360deg); }
.bl-pt-card__btn { --bl-rim: conic-gradient(rgb(191 191 191/0) 81.5deg, rgb(191 191 191/.07) 84.5deg, rgb(191 191 191/.4) 90deg, rgb(191 191 191/.46) 92deg, rgb(191 191 191/.4) 93.5deg, rgb(191 191 191/.08) 97deg, rgb(191 191 191/.04) 98.5deg, rgb(191 191 191/.07) 100deg, rgb(191 191 191/.31) 103.5deg, rgb(191 191 191/.36) 105.5deg, rgb(191 191 191/.27) 114deg, rgb(191 191 191/.16) 138.5deg, rgb(191 191 191/.18) 146deg, rgb(191 191 191/.08) 174deg, rgb(191 191 191/.12) 214deg, rgb(191 191 191/.08) 241deg, rgb(191 191 191/0) 259.5deg, rgb(191 191 191/0) 360deg); }
.bl-pt-tag { --bl-rim: conic-gradient(rgb(191 191 191/.23) 0deg, rgb(191 191 191/.21) 11deg, rgb(191 191 191/.32) 34deg, rgb(191 191 191/.25) 39.5deg, rgb(191 191 191/.27) 46.5deg, rgb(191 191 191/.19) 60deg, rgb(191 191 191/0) 77.5deg, rgb(191 191 191/0) 245.5deg, rgb(191 191 191/.1) 256.5deg, rgb(191 191 191/.52) 269deg, rgb(191 191 191/.57) 274.5deg, rgb(191 191 191/.56) 282.5deg, rgb(191 191 191/.75) 292deg, rgb(191 191 191/.54) 313deg, rgb(191 191 191/.42) 319.5deg, rgb(191 191 191/.49) 326deg, rgb(191 191 191/.27) 343.5deg, rgb(191 191 191/.22) 353.5deg, rgb(191 191 191/.23) 360deg); }
.bl-pt-tag--coach { --bl-rim: conic-gradient(rgb(191 191 191/.03) 0deg, rgb(191 191 191/.08) 60.5deg, rgb(191 191 191/.02) 74deg, rgb(191 191 191/0) 87.5deg, rgb(191 191 191/.03) 102.5deg, rgb(191 191 191/.13) 119.5deg, rgb(191 191 191/.14) 146.5deg, rgb(191 191 191/.08) 173deg, rgb(191 191 191/.1) 193.5deg, rgb(191 191 191/.19) 213.5deg, rgb(191 191 191/.17) 221.5deg, rgb(191 191 191/.31) 238.5deg, rgb(191 191 191/.47) 250.5deg, rgb(191 191 191/.46) 258.5deg, rgb(191 191 191/.62) 268.5deg, rgb(191 191 191/.57) 271deg, rgb(191 191 191/.22) 281.5deg, rgb(191 191 191/.12) 293deg, rgb(191 191 191/.06) 319deg, rgb(191 191 191/.03) 360deg); }
.bl-pt-card__avatar { --bl-rim: conic-gradient(rgb(191 191 191/.47) 0deg, rgb(191 191 191/.52) 2deg, rgb(191 191 191/.77) 6deg, rgb(191 191 191/.81) 7.5deg, rgb(191 191 191/.63) 18deg, rgb(191 191 191/.72) 31.5deg, rgb(191 191 191/.53) 42deg, rgb(191 191 191/.63) 50.5deg, rgb(191 191 191/.62) 58.5deg, rgb(191 191 191/.49) 66deg, rgb(191 191 191/.08) 85deg, rgb(191 191 191/0) 95.5deg, rgb(191 191 191/0) 239deg, rgb(191 191 191/.08) 249.5deg, rgb(191 191 191/.21) 256.5deg, rgb(191 191 191/.61) 270deg, rgb(191 191 191/.61) 274.5deg, rgb(191 191 191/.75) 280deg, rgb(191 191 191/.72) 301deg, rgb(191 191 191/.5) 314.5deg, rgb(191 191 191/.69) 327.5deg, rgb(191 191 191/.72) 352deg, rgb(191 191 191/.69) 354deg, rgb(191 191 191/.49) 358deg, rgb(191 191 191/.47) 360deg); }

/* ── Карточка эфира ──────────────────────────────────────────────────────
   469,5 × 374, скругление 25. Всё внутри — в долях ширины (--u = 1 px макета),
   на планшете и телефоне карточка уменьшается целиком. */
.bl-pt-live-card,
.bl-pt-card {
    position: relative;
    width: var(--card-w);
    border-radius: calc(25 * var(--u));
}
.bl-pt-live-card {
    height: calc(374 * var(--u));
    /* внешнее свечение «экран» #9C5BDE 21 % на 23 */
    box-shadow: 0 0 calc(23 * var(--u)) rgba(156, 91, 222, .21);
}
.bl-pt-live-card > *,
.bl-pt-card > * {
    position: absolute;
}

/* Фон: группа с непрозрачностью 50 % — заливка 164° (PS −74°), надписи
   «boostlock» и тень снизу. Цвета заливки сняты по пикселям макета: длину
   градиента Фотошоп считает не от размера фигуры (у двух карточек разный). */
.bl-pt-live-card__bg {
    inset: 0;
    border-radius: inherit;
    opacity: .5;
    background:
        radial-gradient(61.8% 129.1% at 2.6% 132.6%, rgb(26 17 46 / 1) 0%, rgb(26 17 46 / .512) 20%, rgb(26 17 46 / .216) 40%, rgb(26 17 46 / .064) 60%, rgb(26 17 46 / .008) 80%, rgb(26 17 46 / 0) 100%),
        linear-gradient(0deg, rgb(26 17 46 / .288) 0%, rgb(26 17 46 / 0) 34.2%),
        image-set(url("/img/design/partners/card-live-mark.webp?v=2") 1x, url("/img/design/partners/card-live-mark@2x.webp?v=2") 2x) 0 0 / 100% 100% no-repeat,
        linear-gradient(164deg, rgb(126.2 83.3 220) 0%, rgb(88.5 56.6 150.8) 100%);
}

/* Плеер: 438 × 247,5 на (16; 15), скругление 15. Белое окно макета — место
   под плеер; с плеером подложка тёмная, иначе, пока Twitch грузится, белый
   прямоугольник вспыхивал бы на тёмной странице. */
.bl-pt-live-card__player {
    left: calc(16 * var(--u));
    top: calc(15 * var(--u));
    width: calc(438 * var(--u));
    height: calc(247.5 * var(--u));
    border-radius: calc(15 * var(--u));
    background: #0D0F16;
    overflow: hidden;
}
.bl-pt-live-card__player iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Нижний ряд: аватар 49,5 на (16; 292,5), кнопка 267,5 × 40 на (186,5; 297,5).
   Ряд гибкий: длинному нику уступает место кнопка (до 190), а не наоборот. */
.bl-pt-live-card__row {
    left: calc(16 * var(--u));
    right: calc(16 * var(--u));
    top: calc(292.5 * var(--u));
    height: calc(49.5 * var(--u));
    display: flex;
    align-items: center;
}
/* Длинному нику уступает кнопка — до 190; ник длиннее остатка уходит в многоточие
   (его предел — ширина ряда за вычетом аватара, зазора и этих 190). */
.bl-pt-live-card__row > .bl-pt-btn {
    position: relative;
    flex: 0 1 calc(267.5 * var(--u));
    min-width: calc(190 * var(--u));
    margin: calc(.5 * var(--u)) 0 0 auto;
}
/* Аватар с вырезом под зелёную точку «в сети» (точка 10,5 на (53; 331,5),
   вырез 17 — в макете им прорезан круг аватара). */
.bl-pt-live-card__avatar {
    position: relative;
    flex: 0 0 calc(49.5 * var(--u));
    height: calc(49.5 * var(--u));
    border-radius: 50%;
    box-shadow: 0 0 calc(23 * var(--u)) rgba(156, 91, 222, .21);
}
.bl-pt-live-card__avatar::before,
.bl-pt-live-card__avatar img {
    content: '';
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    -webkit-mask: radial-gradient(circle calc(8.5 * var(--u)) at calc(42.25 * var(--u)) calc(44.25 * var(--u)), transparent 98%, #000 100%);
            mask: radial-gradient(circle calc(8.5 * var(--u)) at calc(42.25 * var(--u)) calc(44.25 * var(--u)), transparent 98%, #000 100%);
}
.bl-pt-live-card__avatar::before { background: #fff; }
.bl-pt-live-card__avatar::after {
    content: '';
    position: absolute;
    left: calc(37 * var(--u));
    top: calc(39 * var(--u));
    width: calc(10.5 * var(--u));
    height: calc(10.5 * var(--u));
    border-radius: 50%;
    background: #12DE0C;
}
/* Ник — DemiBold 24, базовая линия 318; категория — Regular 12, 333,5. */
.bl-pt-live-card__who {
    flex: 0 0 auto;
    align-self: flex-start;
    min-width: 0;
    max-width: calc(178.5 * var(--u));
    margin: calc(5.85 * var(--u)) 0 0 calc(19.5 * var(--u));
    padding-right: calc(10 * var(--u));
}
.bl-pt-live-card__name {
    font-size: max(15px, calc(24 * var(--u)));
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.012em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}
.bl-pt-live-card__game {
    margin-top: calc(-1 * var(--u));
    font-size: max(11px, calc(12 * var(--u)));
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}

/* ── Карточка партнёра ───────────────────────────────────────────────────
   469,5 × 276,5, скругление 25, свечение то же, что у эфира (сверено по
   пикселям между карточками). */
.bl-pt-card {
    height: calc(276.5 * var(--u));
    box-shadow: 0 0 calc(23 * var(--u)) rgba(156, 91, 222, .21);
}
.bl-pt-card__bg {
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    opacity: .5;
    background: linear-gradient(164deg, rgb(117.8 77.7 209.1) 0%, rgb(66.7 43.9 121.5) 100%);
}
/* Шапка канала: в макете слой 510,5 × 204,5 на (−22; −40) с непрозрачностью
   50 % внутри той же группы, края стёрты мягкой кистью — маска повторяет
   профиль её альфы (по вертикали пик 0,87 на 30–40 px, ноль к 160). */
.bl-pt-card__banner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(165 * var(--u));
    opacity: .5;
    -webkit-mask-image:
        linear-gradient(180deg, rgb(0 0 0/.68) 0%, rgb(0 0 0/.77) 6.06%, rgb(0 0 0/.83) 12.1%, rgb(0 0 0/.865) 18.2%, rgb(0 0 0/.867) 24.2%, rgb(0 0 0/.83) 30.3%, rgb(0 0 0/.765) 36.4%, rgb(0 0 0/.67) 42.4%, rgb(0 0 0/.55) 48.5%, rgb(0 0 0/.42) 54.5%, rgb(0 0 0/.29) 60.6%, rgb(0 0 0/.18) 66.7%, rgb(0 0 0/.1) 72.7%, rgb(0 0 0/.05) 78.8%, rgb(0 0 0/.02) 84.8%, rgb(0 0 0/0) 100%),
        linear-gradient(90deg, #000 85%, rgb(0 0 0/.76) 100%);
    -webkit-mask-composite: source-in;
            mask-image:
        linear-gradient(180deg, rgb(0 0 0/.68) 0%, rgb(0 0 0/.77) 6.06%, rgb(0 0 0/.83) 12.1%, rgb(0 0 0/.865) 18.2%, rgb(0 0 0/.867) 24.2%, rgb(0 0 0/.83) 30.3%, rgb(0 0 0/.765) 36.4%, rgb(0 0 0/.67) 42.4%, rgb(0 0 0/.55) 48.5%, rgb(0 0 0/.42) 54.5%, rgb(0 0 0/.29) 60.6%, rgb(0 0 0/.18) 66.7%, rgb(0 0 0/.1) 72.7%, rgb(0 0 0/.05) 78.8%, rgb(0 0 0/.02) 84.8%, rgb(0 0 0/0) 100%),
        linear-gradient(90deg, #000 85%, rgb(0 0 0/.76) 100%);
            mask-composite: intersect;
}
.bl-pt-card__banner img {
    position: absolute;
    left: calc(-22 * var(--u));
    top: calc(-40 * var(--u));
    width: calc(510.5 * var(--u));
    height: calc(204.5 * var(--u));
    max-width: none;
    object-fit: cover;
}

/* Аватар 121,5 на (16,5; 16,5): тёмный круг #15101B, свечение 21 % на 23,
   кромка по верхней половине. */
.bl-pt-card__avatar {
    left: calc(16.5 * var(--u));
    top: calc(16.5 * var(--u));
    width: calc(121.5 * var(--u));
    height: calc(121.5 * var(--u));
    border-radius: 50%;
    background: #15101B;
    box-shadow: 0 0 calc(23 * var(--u)) rgba(156, 91, 222, .21);
}
.bl-pt-card__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Ник — DemiBold 30 с базовой линией 62,26 и белым свечением 8 % на 12,
   галочка 17 через 14; статус — Regular 12, базовая 82,5;
   плашки 92 × 25,5 с 94, зазор 13,5. */
.bl-pt-card__head {
    left: calc(154.5 * var(--u));
    top: calc(35.5 * var(--u));
    right: calc(66 * var(--u));
}
.bl-pt-card__name-row {
    display: flex;
    align-items: center;
    min-width: 0;
    height: calc(36 * var(--u));
}
.bl-pt-card__name {
    min-width: 0;
    font-size: max(18px, calc(30 * var(--u)));
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    text-shadow: 0 0 calc(12 * var(--u)) rgba(255, 255, 255, .08);
}
.bl-pt-card__verified {
    flex: 0 0 calc(17 * var(--u));
    height: calc(17 * var(--u));
    margin-left: calc(14 * var(--u));
    border-radius: 50%;
    background: linear-gradient(108deg, rgb(130.9 88.7 227.7), rgb(121.3 83.9 210.5));
}
.bl-pt-card__verified svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #fff;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.bl-pt-card__status {
    margin-top: 0;
    font-size: max(11px, calc(12 * var(--u)));
    font-weight: 400;
    line-height: calc(16 * var(--u));
    letter-spacing: -.005em;
    color: #fff;
}
.bl-pt-card__status.is-live::before {
    content: '';
    display: inline-block;
    width: calc(7 * var(--u));
    height: calc(7 * var(--u));
    margin: 0 calc(5 * var(--u)) calc(1 * var(--u)) 0;
    border-radius: 50%;
    background: #12DE0C;
    vertical-align: middle;
}
.bl-pt-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: calc(8 * var(--u)) calc(13.5 * var(--u));
    margin-top: calc(6.5 * var(--u));
}
.bl-pt-tag {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(92 * var(--u));
    height: calc(25.5 * var(--u));
    padding-bottom: calc(.5 * var(--u));
    border-radius: 999px;
    background: linear-gradient(151deg, rgb(138 92 245 / .5) 30%, rgb(100 67 177 / .5) 70%);
    box-shadow: 0 0 calc(17.5 * var(--u)) rgba(156, 91, 222, .15);
    font-size: max(11px, calc(15 * var(--u)));
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.01em;
    white-space: nowrap;
    color: #fff;
}

/* Значки каналов: Twitch 15 × 15,5 на (406; 47), YouTube 22 × 15,5 через 10.
   Твич в макете контурный — «глитч» с вырезанной серединой (см. path во вьюхе),
   и чуть шире родных пропорций знака (15 против 13,3): так нарисовал дизайнер. */
.bl-pt-card__socials {
    top: calc(47 * var(--u));
    right: calc(16.5 * var(--u));
    display: flex;
    align-items: center;
    gap: calc(10 * var(--u));
    filter: drop-shadow(0 0 calc(8 * var(--u)) rgba(156, 91, 222, .3));
}
.bl-pt-card__social {
    position: relative;
    display: block;
    transition: transform .18s ease, opacity .18s ease;
}
.bl-pt-card__social svg { display: block; height: calc(15.5 * var(--u)); }
.bl-pt-card__social--twitch svg { width: calc(15 * var(--u)); fill: #8061C9; }
.bl-pt-card__social--youtube svg { width: calc(22 * var(--u)); }
.bl-pt-card__social .yt-bg { fill: #FF0000; }
.bl-pt-card__social .yt-play { fill: #fff; }
.bl-pt-card__social:hover { transform: translateY(-1px); opacity: .85; }
.bl-pt-card__social:focus-visible { outline: 2px solid var(--bl-violet); outline-offset: 3px; }

/* Кнопка 437 × 40 на (16,5; 192,5). У неё градиент длиннее пилюли: у торцов
   он упирается в крайние цвета макета. */
.bl-pt-card__btn {
    left: calc(16.5 * var(--u));
    top: calc(192.5 * var(--u));
    width: calc(437 * var(--u));
    padding-top: calc(1 * var(--u));
    padding-bottom: 0;
    background: linear-gradient(337deg, rgb(138 92 245 / .5) 20%, rgb(69 46 122 / .5) 80%);
}
.bl-pt-card__btn:hover {
    background: linear-gradient(337deg, rgb(150 106 255 / .68) 20%, rgb(82 56 146 / .68) 80%);
}

/* ── Нижняя плашка ───────────────────────────────────────────────────────
   1118,5 × 60,5 с x 80,5 и y 1865,5 (от карточек партнёров 149, до подвала
   113,5). Заливка 50 % снизу #8A5CF5 вверх #452E7A, свечение 15 % на 17,5.
   Текст Light 20 с Medium-концовкой, по центру, базовая линия 1902,57. */
.bl-pt-note {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: .28em;
    min-height: 60.5px;
    margin: 149px 24.5px 113.5px 24.5px;
    padding: 11px 32px 8px;
    border-radius: 999px;
    background: linear-gradient(0deg, rgb(142.6 95.3 252.7 / .5) 0%, rgb(63.8 43.1 112 / .5) 100%);
    box-shadow: 0 0 17.5px rgba(156, 91, 222, .15);
    font-size: 20px;
    font-weight: 300;
    line-height: 26px;
    letter-spacing: -.0077em;
    text-align: center;
    color: #fff;
}
.bl-pt-note b { font-weight: 500; letter-spacing: -.009em; }

/* ── Планшет ─────────────────────────────────────────────────────────────
   Ниже 1200 зума нет и раскладка резиновая: карточки по две с выглядывающей
   третьей, уменьшаются целиком (--u). */
@media (max-width: 1199.98px) {
    .bl-pt-hero { height: auto; min-height: 520px; padding-bottom: 72px; }
    .bl-pt-hero__art {
        left: auto;
        right: calc(50% - 600px);
        width: 720px;
        height: auto;
        aspect-ratio: 850.5 / 568;
    }
    .bl-pt-hero__title { padding-top: 64px; font-size: 64px; line-height: 60px; }
    .bl-pt-hero__lead { max-width: 470px; white-space: normal; }

    .bl-pt-carousel {
        --gap: 32px;
        --stage-l: 16px;
        --card-w: min(469.5px, calc((100vw - 16px - 32px - 64px) / 2));
    }
    .bl-pt-more { right: 16px; }
    .bl-pt-live .bl-pt-carousel { margin-top: 48px; }
    .bl-pt-all { padding-top: 72px; }
    .bl-pt-all .bl-pt-carousel { margin-top: 48px; }
    .bl-pt-note { margin: 96px 0 72px; }
}

@media (max-width: 991.98px) {
    .bl-pt-hero { min-height: 440px; }
    .bl-pt-hero__art { right: calc(50% - 470px); width: 600px; }
    .bl-pt-hero__title { font-size: 56px; line-height: 54px; }
    .bl-pt-hero__lead { max-width: 380px; font-size: 17px; line-height: 21px; }
    .bl-pt-hero__lead--accent { margin-top: 21px; }
    .bl-pt-hero__br { display: none; }
    .bl-pt-note { font-size: 18px; line-height: 24px; border-radius: 30px; }
}

/* ── Телефон ─────────────────────────────────────────────────────────────
   Одна карточка и край следующей, листается свайпом. Арта с героем и
   подложки-картинки нет — остаётся градиент страницы. */
@media (max-width: 767.98px) {
    .bl-pt__bg,
    .bl-pt-hero__art { display: none; }

    .bl-pt-hero { min-height: 0; padding-bottom: 48px; }
    .bl-pt-hero__title { margin-left: -2px; padding-top: 34px; font-size: 44px; line-height: 44px; }
    .bl-pt-hero__lead { max-width: none; margin-top: 18px; font-size: 16px; line-height: 22px; }
    .bl-pt-hero__lead--accent { margin-top: 12px; }

    .bl-pt-title { font-size: 24px; line-height: 30px; }
    .bl-pt-title__dot { width: 10px; height: 10px; margin: 0 10px 2px 0; }
    .bl-pt-sub { margin-top: 6px; font-size: 16px; line-height: 21px; letter-spacing: 0; }
    .bl-pt-head { padding-bottom: 30px; }
    .bl-pt-more { left: 16px; right: auto; bottom: 0; font-size: 15px; line-height: 20px; color: #CDB6FF; }
    .bl-pt-head:has(.bl-pt-more[hidden]) { padding-bottom: 0; }

    .bl-pt-carousel {
        --per-view: 1;
        --gap: 20px;
        --stage-l: 16px;
        --card-w: min(469.5px, calc(100vw - 16px - 20px - 36px));
    }
    .bl-pt-carousel.is-expanded .bl-pt-rail { row-gap: 20px; }
    .bl-pt-arrow { display: none; }
    .bl-pt-live .bl-pt-carousel,
    .bl-pt-all .bl-pt-carousel { margin-top: 24px; }
    .bl-pt-all { padding-top: 56px; }
    .bl-pt-all .bl-pt-sub { margin-top: 6px; }
    .bl-pt-empty { font-size: 16px; line-height: 22px; }
    .bl-pt-live .bl-pt-carousel:has(.bl-pt-empty),
    .bl-pt-all > .bl-pt-empty { margin-top: 20px; }
    .bl-pt-note { margin: 56px 0 48px; padding: 14px 20px; font-size: 16px; line-height: 22px; border-radius: 24px; }

    /* Кнопки в уменьшенной карточке ниже пальца — область нажатия больше
       самой кнопки, вид не меняется. */
    .bl-pt-btn::before,
    .bl-pt-card__social::before {
        content: '';
        position: absolute;
        inset: -8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bl-pt-rail > *,
    .bl-pt-arrow,
    .bl-pt-arrow svg { transition: none; }
    .bl-pt-carousel.is-expanded .bl-pt-rail > * { animation: none; }
}