/* Баннеры главной (HTML). Общая геометрия + три стиля: A — фирменный, B — светлый, C — фото. */
.slider.has-bn { aspect-ratio: auto; height: 340px; }
.bn { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 0 64px; text-decoration: none; overflow: hidden; color: #fff; }
.bn:hover { color: #fff; }
.bn-body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; max-width: 600px; }
.bn-eyebrow { font-size: 14px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 12px; opacity: .85; }
.bn-title { font-size: 42px; line-height: 1.08; font-weight: 750; letter-spacing: -.025em; text-wrap: balance; }
.bn-text { font-size: 18px; line-height: 1.5; margin-top: 14px; max-width: 520px; opacity: .9; }
.bn-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; padding: 13px 20px; border-radius: 10px; font-weight: 650; font-size: 15px; transition: transform .15s, box-shadow .15s; }
.bn-cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.bn:hover .bn-cta svg { transform: translateX(3px); }
.bn-visual { position: relative; flex: none; width: 300px; height: 300px; display: grid; place-items: center; }
.bn-ring { position: absolute; border-radius: 50%; }
.bn-ring.r1 { top: 0; right: 0; bottom: 0; left: 0; inset: 0; }
.bn-ring.r2 { top: 46px; right: 46px; bottom: 46px; left: 46px; inset: 46px; }
.bn-art { position: relative; width: 132px; height: 132px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* A — фирменный градиент */
.bn--a { background: radial-gradient(120% 140% at 85% 50%, var(--c2) 0%, var(--c1) 62%); }
.bn--a .bn-cta { background: #fff; color: var(--c1); box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
.bn--a .bn-ring.r1 { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.bn--a .bn-ring.r2 { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.bn--a .bn-art { color: #fff; }

/* B — светлый */
.bn--b { background: linear-gradient(100deg, #f4f7fd 0%, #eaf0fb 100%); color: var(--ink, #172033); }
.bn--b:hover { color: var(--ink, #172033); }
.bn--b .bn-eyebrow { color: var(--c1); opacity: 1; }
.bn--b .bn-text { color: #4a5568; opacity: 1; }
.bn--b .bn-cta { background: var(--c1); color: #fff; }
.bn--b .bn-ring.r1 { background: color-mix(in srgb, var(--c2) 9%, transparent); }
.bn--b .bn-ring.r2 { background: color-mix(in srgb, var(--c2) 16%, #fff); box-shadow: 0 10px 30px color-mix(in srgb, var(--c1) 18%, transparent); }
.bn--b .bn-art { color: var(--c1); }

/* C — фото с затемнением */
.bn--c { background-color: var(--c1); background-position: center; background-size: cover; background-repeat: no-repeat; }
.bn--c::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--c1) 96%, #000) 0%, color-mix(in srgb, var(--c1) 85%, transparent) 45%, color-mix(in srgb, var(--c1) 10%, transparent) 100%); }
.bn--c .bn-visual { display: none; }
.bn--c .bn-cta { background: #fff; color: var(--c1); }

@media (max-width: 900px) {
  .slider.has-bn { height: 320px; }
  .bn { padding: 0 36px; }
  .bn-title { font-size: 34px; }
  .bn-visual { width: 220px; height: 220px; }
  .bn-ring.r2 { top: 34px; right: 34px; bottom: 34px; left: 34px; inset: 34px; }
  .bn-art { width: 96px; height: 96px; }
}
@media (max-width: 600px) {
  .slider.has-bn { height: 400px; }
  .bn { padding: 28px 20px 44px; align-items: flex-end; }
  .bn-title { font-size: 28px; }
  .bn-text { font-size: 16px; margin-top: 10px; }
  .bn-cta { margin-top: 18px; }
  .bn-eyebrow { font-size: 13px; margin-bottom: 8px; }
  .bn-visual { position: absolute; top: -40px; right: -50px; width: 220px; height: 220px; opacity: .55; }
  .bn--b .bn-visual { opacity: .8; }
  .bn-art { width: 84px; height: 84px; }
  .bn--c::before { background: linear-gradient(0deg, color-mix(in srgb, var(--c1) 96%, #000) 0%, color-mix(in srgb, var(--c1) 80%, transparent) 70%, color-mix(in srgb, var(--c1) 40%, transparent) 100%); }
}

/* одинаковое положение заголовка и кнопки на всех слайдах:
   текст начинается от верхнего края, кнопка закреплена на одной высоте снизу */
.slider.has-bn { height: 360px; }
.bn { align-items: stretch; }
.bn-body { justify-content: flex-start; padding: 40px 0 124px; }
.bn-title { font-size: 40px; }
.bn-text { max-width: 560px; }
.bn-cta { position: absolute; left: 0; bottom: 48px; margin: 0; }
@media (max-width: 900px) {
  .slider.has-bn { height: 340px; }
  .bn-body { padding: 32px 0 112px; }
  .bn-title { font-size: 32px; }
  .bn-cta { bottom: 44px; }
}
@media (max-width: 600px) {
  .slider.has-bn { height: 400px; }
  .bn { align-items: stretch; padding: 0 20px; }
  .bn-body { padding: 26px 0 112px; }
  .bn-title { font-size: 28px; }
  .bn-cta { bottom: 44px; }
}

/* компактный слайдер */
.slider.has-bn { height: 280px; }
.bn-body { padding: 30px 0 96px; max-width: 680px; }
.bn-eyebrow { margin-bottom: 0; }
.bn-title { font-size: 34px; line-height: 1.12; }
.bn-text { font-size: 17px; margin-top: 10px; max-width: 640px; }
.bn-cta { bottom: 34px; padding: 11px 18px; }
@media (max-width: 900px) {
  .slider.has-bn { height: 280px; }
  .bn-body { padding: 26px 0 92px; }
  .bn-title { font-size: 28px; }
  .bn-text { font-size: 16px; }
  .bn-cta { bottom: 32px; }
}
@media (max-width: 600px) {
  .slider.has-bn { height: 310px; }
  .bn-body { padding: 22px 0 96px; }
  .bn-title { font-size: 25px; }
  .bn-text { font-size: 15px; }
  .bn-cta { bottom: 38px; }
}

/* запасные цвета для браузеров без color-mix() — сгенерировано сборкой */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
.bn--b .bn-ring.r1 { background: rgba(37,82,176,0.09); }
.bn--b .bn-ring.r2 { background: #dce3f2; box-shadow: 0 10px 30px rgba(37,82,176,0.18); }
.bn--c::before { background: linear-gradient(90deg, #244fa9 0%, rgba(37,82,176,0.85) 45%, rgba(37,82,176,0.10) 100%); }
@media (max-width: 600px) { .bn--c::before { background: linear-gradient(0deg, #244fa9 0%, rgba(37,82,176,0.80) 70%, rgba(37,82,176,0.40) 100%); } }
.sb-ul { background: #edf7f6; } .sb-ul .sb-ico { background: rgba(13,148,136,0.15); }
@media (prefers-color-scheme: dark) { .st--b .sb-ul { background: #10302f; } }
}