/* БАНКА — продающий раздел АКБ. Всё под .bnk, чтобы не задеть стили портала.
   Светлая редакционная основа, тёмные блоки в цвет этикетки, фирменный синий — для выделения. */

/* Шрифты — свои (CSP портала пускает шрифты только с сайта; Google Fonts на портале не грузятся). */
@font-face { font-family: 'Geologica'; font-style: normal; font-weight: 400; font-display: swap; src: url('vendor/fonts/geologica-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Geologica'; font-style: normal; font-weight: 400; font-display: swap; src: url('vendor/fonts/geologica-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Geologica'; font-style: normal; font-weight: 500; font-display: swap; src: url('vendor/fonts/geologica-cyrillic-500-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Geologica'; font-style: normal; font-weight: 500; font-display: swap; src: url('vendor/fonts/geologica-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Geologica'; font-style: normal; font-weight: 600; font-display: swap; src: url('vendor/fonts/geologica-cyrillic-600-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Geologica'; font-style: normal; font-weight: 600; font-display: swap; src: url('vendor/fonts/geologica-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Geologica'; font-style: normal; font-weight: 700; font-display: swap; src: url('vendor/fonts/geologica-cyrillic-700-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Geologica'; font-style: normal; font-weight: 700; font-display: swap; src: url('vendor/fonts/geologica-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Geologica'; font-style: normal; font-weight: 800; font-display: swap; src: url('vendor/fonts/geologica-cyrillic-800-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Geologica'; font-style: normal; font-weight: 800; font-display: swap; src: url('vendor/fonts/geologica-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('vendor/fonts/jetbrains-mono-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('vendor/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('vendor/fonts/jetbrains-mono-cyrillic-500-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('vendor/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }


.bnk {
  /* Токены портала uadditive.ru (index.html :root) */
  --bg: #0a0e0c;
  --surface: #1a2320;
  --ink: #ECE8E0;
  --ink-2: #B9C0BC;
  --mute: #8A9591;
  --line: #2A342F;
  --line-2: #36433D;
  --brand: #E85D2A;
  --brand-2: #B94418;
  --brand-soft: #3A1A0F;
  --ok: #2A8A5F;
  --warn: #E8A63D;
  --shadow: 0 18px 40px -22px rgba(0,0,0,.7);
  --stage: radial-gradient(80% 80% at 50% 32%, #25302C 0%, #141B19 70%);
  --r: 14px;
  --wrap: 1240px;
  --top: 0px;          /* на портале: высота его шапки (78px) — липкие блоки встают под неё */
  --deep: #0d1210;     /* фон превью и полей в тёмных блоках */
  --display: 'Geologica', 'Segoe UI', Roboto, Arial, sans-serif;
  --body: 'Geologica', 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;

  color-scheme: dark;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.bnk-dark { --bg: #0a0e0c; }
.bnk *, .bnk *::before, .bnk *::after { box-sizing: border-box; }
:where(.bnk) :where(h1, h2, h3, h4, p, dl, dd, ul, ol, figure) { margin: 0; padding: 0; }
:where(.bnk) :where(ul, ol) { list-style: none; }
:where(.bnk) :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:where(.bnk) :where(a) { color: inherit; }
:where(.bnk) :where(svg) { display: block; }
.bnk :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
.bnk .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.bnk-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 32px; }
@media (max-width: 640px) { .bnk-wrap { padding-inline: 16px; } }

/* ─── Типографика: крупный гротеск капсом, выделение синей плашкой ─── */
:where(.bnk) :where(h1, h2, h3) { font-family: var(--display); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; text-wrap: balance; }
:where(.bnk) :where(h2) { font-size: clamp(32px, 4.2vw, 52px); }
:where(.bnk) :where(h3) { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.bnk mark { background: none; color: inherit; box-shadow: inset 0 -0.11em 0 rgba(232,93,42,.7); }
.bnk-kicker { justify-self: start; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.bnk-kicker::before { content: ''; width: 18px; height: 1px; background: var(--line-2); }
.bnk-sub { color: var(--ink-2); max-width: 60ch; font-size: 18px; }
.bnk-section { padding-block: clamp(80px, 10vw, 136px); padding-inline: 0; position: relative; background: var(--bg); }   /* padding-inline: на портале section { padding: 80px 24px } */
.bnk-tint { --bg: #111816; }
.bnk-head { display: grid; gap: 18px; margin-bottom: clamp(40px, 5vw, 60px); }
.bnk-head h2::after { content: ''; display: block; width: 56px; height: 2px; border-radius: 2px; background: var(--line-2); margin-top: 18px; }
.bnk-head--row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; gap: 24px 56px; }
.bnk-head--row > div { display: grid; gap: 20px; }
@media (max-width: 900px) { .bnk-head--row { grid-template-columns: 1fr; } }

/* ─── Кнопки ─── */
.bnk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px;
  border-radius: 8px; border: 1px solid var(--line-2); background: #0e1311; color: var(--ink);
  font-family: var(--display); font-weight: 600; font-size: 16px;
  text-decoration: none; transition: background .2s, border-color .2s, transform .2s, box-shadow .2s; white-space: nowrap;
}
.bnk-btn:hover { transform: translateY(-1px); border-color: var(--ink); }
.bnk-btn--brand, .bnk-btn--blue { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }
.bnk-btn--brand:hover, .bnk-btn--blue:hover { background: var(--brand); border-color: var(--brand); box-shadow: 0 12px 30px -12px rgba(232,93,42,.6); }
.bnk-btn--dark, .bnk-btn--primary { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }
.bnk-btn--dark:hover, .bnk-btn--primary:hover { box-shadow: var(--shadow); }
.bnk-btn--ghost { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
.bnk-btn--ghost:hover { border-color: #fff; }
.bnk-btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; border-radius: 8px; }
.bnk-btn[disabled] { opacity: .45; pointer-events: none; }

/* ─── Шапка ─── */
.bnk-nav { position: sticky; top: var(--top); z-index: 30; background: rgba(10,14,12,.97); border-bottom: 1px solid var(--line); }
.bnk-nav .bnk-wrap { display: flex; align-items: center; gap: 32px; min-height: 72px; }
.bnk-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.bnk-logo b { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: .03em; }
.bnk-logo #bnk-logo-can { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: #0A0C0F; overflow: hidden; }
.bnk-logo #bnk-logo-can svg { width: 28px; height: 46px; margin-top: 4px; }
.bnk-nav nav { display: flex; gap: 28px; margin-left: auto; }
.bnk-nav nav button { font-weight: 500; font-size: 14px; color: var(--ink-2); padding: 8px 0; white-space: nowrap; }
.bnk-nav nav button:hover { color: var(--ink); }
.bnk-nav-toggle, .bnk-nav-scrim { display: none; }
.bnk-phone { font-family: var(--display); font-weight: 600; font-size: 14px; text-decoration: none; background: var(--brand-2); color: #fff; border-radius: 999px; padding: 11px 20px; white-space: nowrap; }
@media (max-width: 1200px) {
  .bnk-nav .bnk-wrap { flex-wrap: wrap; gap: 10px 16px; min-height: 0; padding-block: 10px; }
  .bnk-phone { margin-left: auto; }
  .bnk-nav nav { order: 3; width: 100%; margin: 0; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .bnk-nav nav::-webkit-scrollbar { display: none; }
  .bnk-nav nav button { flex: none; border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 14px; font-size: 14px; }
}
@media (max-width: 420px) { .bnk-phone { padding: 9px 14px; font-size: 12px; } .bnk-logo b { font-size: 24px; } }

/* ─── Первый экран ─── */
.bnk-hero { position: relative; overflow: hidden; background: radial-gradient(60% 80% at 15% 20%, rgba(185,68,24,.22), transparent 70%), radial-gradient(60% 80% at 75% 45%, #1e2824 0%, transparent 70%), var(--bg); padding-bottom: 48px; }
.bnk-hex { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .15; }
.bnk-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: center; padding-block: 64px 24px; }
.bnk-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--brand); background: var(--brand-soft); border: 1px solid rgba(232,93,42,.35); border-radius: 999px; padding: 6px 14px; }
.bnk-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
/* H1 — строка над слоганом (под поисковый запрос), слоган — крупный текст, как был заголовок */
.bnk .bnk-hero h1.bnk-eyebrow { margin: 0; font-family: var(--body); font-weight: 600; font-size: 14px; letter-spacing: 0; line-height: 1.3; text-wrap: wrap; }
.bnk .bnk-hero .bnk-hero-title { font-family: var(--display); font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; color: var(--ink);
  font-size: clamp(44px, 5.8vw, 80px); margin-top: 22px; line-height: 1.02; }
.bnk-lead { margin-top: 28px; font-size: 18px; color: var(--ink-2); max-width: 52ch; }
.bnk-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.bnk-hero-stage { position: relative; aspect-ratio: 1.12 / 1; width: 100%; }
.bnk-hero-stage::before { content: ''; position: absolute; inset: 8% 4% 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(232,93,42,.18), rgba(30,40,36,.5) 55%, transparent); pointer-events: none; }
.bnk-hero-stage::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 10%; height: 26%; border-radius: 50%; background: radial-gradient(closest-side, rgba(170,190,180,.16), transparent); pointer-events: none; }
.bnk-3d { position: absolute; inset: 0; cursor: grab; z-index: 1; }
.bnk-3d:active { cursor: grabbing; }
.bnk-3d canvas { width: 100% !important; height: 100% !important; display: block; }
.bnk-hero-tag { position: absolute; left: 6%; bottom: 7%; display: grid; gap: 2px; pointer-events: none; z-index: 2; }
.bnk-hero-tag b { font-family: var(--display); font-weight: 700; font-size: 16px; }
.bnk-hero-tag span { font-size: 14px; color: var(--mute); }
.bnk-hint { position: absolute; right: 6%; bottom: 7%; font-size: 12px; color: var(--mute); pointer-events: none; z-index: 2; }
.bnk-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bnk-stats div { background: transparent; border: 0; border-left: 2px solid var(--line-2); border-radius: 0; padding: 4px 0 4px 18px; }
.bnk-stats div:first-child { border-left-color: var(--brand-2); }
.bnk-stats--tech { margin-bottom: clamp(32px, 4vw, 48px); }
.bnk-stats dt { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 3vw, 38px); line-height: 1; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.bnk-stats dt small { font-size: 14px; font-weight: 700; color: var(--mute); margin-left: 6px; letter-spacing: 0; }
.bnk-stats dd { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
@media (max-width: 980px) {
  .bnk-hero-grid { grid-template-columns: 1fr; padding-block: 24px 8px; }
  .bnk-hero-stage { order: -1; aspect-ratio: 1.35 / 1; }
  .bnk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bnk-hint { display: none; }
}

.bnk-brands { background: #0a0e0c; border-block: 1px solid var(--line); }
.bnk-brands .bnk-wrap { display: flex; align-items: center; gap: clamp(20px, 4vw, 56px); padding-block: 26px; overflow-x: auto; scrollbar-width: none; }
.bnk-brands span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #5F6B66; white-space: nowrap; }
.bnk-brands b { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: .06em; color: #6F7B76; white-space: nowrap; }

/* ─── Анатомия ─── */
.bnk-anat { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.bnk-anat-stage { position: sticky; top: calc(var(--top) + 96px); height: min(76vh, 720px); border-radius: 24px; background: var(--stage); border: 1px solid var(--line); overflow: hidden; }
.bnk-callout { position: absolute; left: var(--x); top: var(--y); pointer-events: none; z-index: 3; }
.bnk-callout[hidden] { display: none; }
.bnk-callout i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 6px rgba(232,93,42,.25); }
.bnk-callout i::after { content: ''; position: absolute; left: 7px; top: 7px; width: 56px; height: 1.5px; background: var(--brand); transform-origin: left; transform: rotate(-38deg); }
.bnk-callout.is-left i::after { transform: rotate(-142deg); }
.bnk-callout.is-left span { left: auto; right: 50px; }
.bnk-callout span { position: absolute; left: 50px; top: -58px; white-space: nowrap; background: var(--brand-2); color: #fff; font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 8px 12px; border-radius: 8px; }
.bnk-anat-steps { display: grid; }
.bnk-anat-steps li { min-height: 62vh; padding: 28px 0 28px 58px; border-top: 1px solid var(--line); position: relative; opacity: .35; transition: opacity .3s; }
.bnk-anat-steps li:last-child { min-height: 42vh; }
.bnk-anat-steps li.is-active { opacity: 1; }
.bnk-anat-steps b { position: absolute; left: 0; top: 30px; font-family: var(--display); font-weight: 800; font-size: 14px; color: #fff; background: var(--line-2); border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; }
.bnk-anat-steps li.is-active b { background: var(--brand-2); }
.bnk-anat-steps h3 { font-size: 24px; margin-bottom: 12px; }
.bnk-anat-steps p { color: var(--ink-2); }
@media (max-width: 900px) {
  .bnk-anat { grid-template-columns: 1fr; }
  .bnk-anat-stage { top: calc(var(--top) + 10px); height: 40vh; z-index: 2; box-shadow: 0 18px 40px rgba(0,0,0,.6); }
  .bnk-anat-steps li { min-height: 62vh; padding-left: 0; padding-top: 56px; }
}

/* ─── Каталог ─── */
.bnk-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.bnk-filters button { font-weight: 600; font-size: 14px; border: 1px solid var(--line-2); border-radius: 999px; padding: 9px 16px; color: var(--ink-2); background: var(--surface); transition: all .2s; }
.bnk-filters button small { font-family: var(--body); font-weight: 500; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--mute); margin-left: 6px; }
.bnk-filters button[aria-pressed="true"] { background: var(--brand-2); color: #fff; border-color: var(--brand-2); }
.bnk-filters button[aria-pressed="true"] small { color: #FFD6C4; }
.bnk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 370px), 1fr)); gap: 20px; }
.bnk-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: grid; grid-template-rows: auto 1fr; transition: transform .25s, border-color .25s, box-shadow .25s; }
.bnk-card:hover { transform: translateY(-4px); border-color: rgba(232,93,42,.55); box-shadow: 0 24px 50px -24px rgba(0,0,0,.8); }
.bnk-card[hidden] { display: none; }
.bnk-card-img { aspect-ratio: 3 / 2; background: var(--stage); position: relative; border-bottom: 1px solid var(--line); }
.bnk-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bnk-card-img .bnk-skel { position: absolute; inset: 18% 14%; border-radius: 12px; }
.bnk-card-body { padding: 22px 24px 24px; display: grid; gap: 14px; align-content: start; }
.bnk-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bnk-line { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); background: var(--bg); border-radius: 999px; padding: 3px 10px; }
.bnk-badge { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--bg); color: var(--ink-2); }
.bnk-badge--hit { background: rgba(232,166,61,.14); color: #E8A63D; }
.bnk-badge--stock { background: rgba(42,138,95,.18); color: #4FC08D; }
.bnk-badge--order { background: var(--bg); color: var(--mute); }
.bnk-badge--tabless { background: #0F2C50; color: #9FCBFF; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.bnk-card h3 { font-size: 24px; font-weight: 800; }
.bnk .bnk-card-link { color: inherit; text-decoration: none; transition: color .2s; }
.bnk .bnk-card-link:hover { color: var(--brand); }
.bnk-grid-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.bnk-grid-links a { color: var(--ink-2); }
.bnk-card h3 small { display: block; margin-top: 6px; font-family: var(--body); font-weight: 500; font-size: 14px; color: var(--mute); text-transform: none; letter-spacing: 0; }
.bnk-use-line { color: var(--ink-2); font-size: 14px; }
.bnk-spec { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.bnk-spec div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.bnk-spec dt { font-size: 14px; color: var(--mute); }
.bnk-spec dd { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.bnk-card-note { font-size: 12px; color: var(--mute); line-height: 1.5; border-left: 2px solid var(--line-2); padding-left: 10px; }
.bnk-card-foot { display: flex; align-items: end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.bnk-price small { display: block; font-size: 12px; color: var(--mute); }
.bnk-price, .bnk-deal-price { display: grid; gap: 2px; justify-items: start; }
.bnk-vat { font-size: 12px; color: var(--mute); }
.bnk-vat--alt { font-size: 14px; color: var(--ink-2); margin-top: 4px; }
.bnk-vat--alt b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.bnk-price strong { font-family: var(--display); font-weight: 800; font-size: 24px; color: var(--brand); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.bnk-note { font-size: 14px; color: var(--mute); margin-top: 26px; max-width: 90ch; }
.bnk-skel { background: linear-gradient(100deg, rgba(255,255,255,.03) 30%, rgba(255,255,255,.07) 50%, rgba(255,255,255,.03) 70%); background-size: 300% 100%; animation: bnk-skel 1.4s linear infinite; border-radius: 6px; }
@keyframes bnk-skel { to { background-position: -100% 0; } }

/* ─── Подбор ─── */
.bnk-cfg { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 20px; align-items: start; }
.bnk-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; }
#bnk-cfg-form { position: sticky; top: calc(var(--top) + 92px); }
.bnk-field { display: grid; gap: 10px; }
.bnk-field + .bnk-field { margin-top: 22px; }
.bnk-field > label, .bnk-field > span { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); display: flex; justify-content: space-between; gap: 8px; }
.bnk-field > label b, .bnk-field > span b { color: var(--ink); font-family: var(--body); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 14px; }
.bnk-field > .bnk-toggle { font-family: var(--body); font-weight: 500; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink); justify-content: flex-start; }
.bnk-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.bnk-seg button { min-width: 46px; height: 40px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-2); font-weight: 500; font-size: 14px; color: var(--ink-2); background: #111816; transition: all .15s; }
.bnk-seg button:hover { border-color: var(--ink-2); color: var(--ink); }
.bnk-seg button[aria-pressed="true"] { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }
.bnk-tasks button { height: auto; min-height: 40px; font-size: 14px; padding: 6px 12px; }
.bnk-select, .bnk-input { width: 100%; height: 46px; border-radius: 8px; border: 1px solid var(--line-2); background: #111816; color: var(--ink); font: 500 14px var(--body); padding: 0 14px; }
.bnk-dark .bnk-select, .bnk-dark .bnk-input { background: var(--deep); }
.bnk-select:focus, .bnk-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(232,93,42,.2); }
.bnk-qty { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 6px; }
.bnk-qty button { border: 1px solid var(--line-2); border-radius: 8px; font-size: 24px; background: #111816; }
.bnk-qty input { text-align: center; font-variant-numeric: tabular-nums; }
.bnk-toggle { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 14px; color: var(--ink); font-weight: 500; }
.bnk-toggle input { appearance: none; -webkit-appearance: none; flex: none; width: 42px; height: 24px; border-radius: 999px; background: var(--line-2); position: relative; cursor: pointer; transition: background .2s; margin-top: 1px; }
.bnk-toggle input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: all .2s; }
.bnk-toggle input:checked { background: var(--brand); }
.bnk-toggle input:checked::after { left: 21px; }
.bnk-toggle small { display: block; color: var(--mute); font-size: 12px; font-weight: 400; }
.bnk-toggle--sm { margin-left: auto; align-items: center; font-size: 14px; }

.bnk-out { display: grid; gap: 20px; }
.bnk-view { padding: 0; overflow: hidden; }
.bnk-tabs { display: flex; align-items: center; gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.bnk-tabs [role="tab"] { font-family: var(--display); font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 8px; color: var(--ink-2); }
.bnk-tabs [aria-selected="true"] { background: var(--brand-2); color: #fff; }
.bnk-view-3d { position: relative; height: clamp(320px, 42vw, 520px); background: var(--stage); }
.bnk-view-3d canvas { width: 100% !important; height: 100% !important; display: block; cursor: grab; }
.bnk-view-3d[hidden] { display: none; }
.bnk-view-3d .bnk-hint { display: block; }
.bnk-view-3d.is-empty .bnk-hint { display: none; }
.bnk-preview { position: relative; padding: 46px 28px 50px 56px; background: var(--deep); }
.bnk-preview[hidden] { display: none; }
.bnk-preview-box { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; min-height: 240px; }
.bnk-preview-art { position: relative; width: 100%; }
.bnk-preview-art svg { width: 100%; height: auto; border-radius: 3px; box-shadow: 0 22px 60px rgba(0,0,0,.6); }
.bnk-dim { position: absolute; font-size: 12px; color: var(--ink-2); display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.bnk-dim--w { left: 0; right: 0; bottom: -28px; height: 14px; border-inline: 1px solid var(--ink-2); }
.bnk-dim--w::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--ink-2); opacity: .6; }
.bnk-dim--w span { position: relative; background: var(--deep); padding: 0 8px; }
.bnk-dim--h { top: 0; bottom: 0; left: -34px; width: 14px; border-block: 1px solid var(--ink-2); }
.bnk-dim--h::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid var(--ink-2); opacity: .6; }
.bnk-dim--h span { position: relative; background: var(--deep); padding: 6px 0; writing-mode: vertical-rl; transform: rotate(180deg); }
.bnk-preview-cap { position: absolute; left: 18px; top: 14px; font-size: 12px; color: var(--mute); }

.bnk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bnk-kpis div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.bnk-kpis dt { font-size: 12px; color: var(--mute); }
.bnk-kpis dd { font-family: var(--display); font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; margin-top: 4px; }
.bnk-kpis dd small { font-family: var(--body); font-weight: 500; font-size: 12px; color: var(--mute); margin-left: 3px; }
@media (max-width: 760px) { .bnk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bnk-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1100px) { .bnk-cfg { grid-template-columns: 1fr; } #bnk-cfg-form { position: static; } }
@media (max-width: 760px) { .bnk-row2 { grid-template-columns: 1fr; } .bnk-preview { padding: 40px 14px 46px 44px; } }

.bnk-flight, .bnk-deal, .bnk-print { display: grid; gap: 14px; align-content: start; }
.bnk-flight h4, .bnk-deal h4, .bnk-print h4 { font-family: var(--display); font-weight: 700; font-size: 18px; }
.bnk-flight-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.bnk-meter { display: grid; gap: 8px; }
.bnk-meter div { display: grid; grid-template-columns: 76px minmax(0, 1fr) 72px; gap: 10px; align-items: center; font-size: 14px; }
.bnk-meter i { height: 10px; border-radius: 99px; background: var(--bg); overflow: hidden; display: block; }
.bnk-meter i b { display: block; height: 100%; border-radius: 99px; background: var(--brand); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.bnk-meter .is-lipo i b { background: #55615C; }
.bnk-meter span:last-child { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.bnk-small { font-size: 12px; color: var(--mute); line-height: 1.5; }
.bnk-deal-price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bnk-deal-price strong { font-family: var(--display); font-weight: 800; color: var(--brand); font-size: clamp(34px, 4vw, 46px); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bnk-deal-lines { display: grid; gap: 6px; font-size: 14px; }
.bnk-deal-lines div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.bnk-deal-lines span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.bnk-deal-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bnk-ladder { display: grid; gap: 8px; }
.bnk-ladder ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-width: 280px; }
.bnk-ladder button { width: 100%; display: grid; gap: 1px; padding: 8px 4px; border-radius: 8px; border: 1px solid var(--line-2); background: #111816; text-align: center; transition: all .15s; }
.bnk-ladder button:hover { border-color: var(--brand); }
.bnk-ladder b { font-size: 16px; font-weight: 800; color: var(--ink); }
.bnk-ladder small { font-size: 12px; color: var(--mute); }
.bnk-ladder .is-on button { background: var(--brand-2); border-color: var(--brand-2); }
.bnk-ladder .is-on b, .bnk-ladder .is-on small { color: #fff; }
.bnk-consult { display: grid; gap: 12px; padding: 18px; border: 1.5px dashed var(--line-2); border-radius: 14px; color: var(--ink-2); font-size: 14px; }
.bnk-print-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.bnk-print-grid label { display: grid; gap: 6px; font-size: 12px; color: var(--mute); }
.bnk-print-grid .bnk-input, .bnk-print-grid .bnk-select { height: 40px; font-size: 14px; padding: 0 10px; }
@media (max-width: 760px) { .bnk-print-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bnk-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px); opacity: 0; background: #16201C; border: 1px solid var(--line-2); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; z-index: 100; transition: all .25s; pointer-events: none; max-width: calc(100vw - 32px); }
.bnk-toast.is-on { transform: translate(-50%, 0); opacity: 1; }

/* ─── Контроль качества (тёмный блок) ─── */
.bnk-path { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.bnk-path-stage { position: sticky; top: calc(var(--top) + 96px); aspect-ratio: 4 / 3; width: 100%; border: 1px solid var(--line); border-radius: var(--r); background: radial-gradient(120% 90% at 70% 10%, rgba(232,93,42,.12), transparent 60%), var(--surface); overflow: hidden; }
.bnk-viz { position: absolute; inset: 0; opacity: 0; transition: opacity .45s; }
.bnk-viz.is-active { opacity: 1; }
.bnk-viz svg { width: 100%; height: 100%; }
.bnk-viz * { animation-play-state: paused; }
.bnk-viz.is-active * { animation-play-state: running; }
.bnk-path-tag { position: absolute; left: 18px; top: 16px; font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); z-index: 1; }
.bnk-steps { display: grid; }
.bnk-step { padding: 32px 0 32px 60px; border-top: 1px solid var(--line); position: relative; min-height: clamp(200px, 30vh, 320px); transition: opacity .3s; opacity: .4; }
.bnk-step:last-child { border-bottom: 1px solid var(--line); }
.bnk-step.is-active { opacity: 1; }
.bnk-step b { position: absolute; left: 0; top: 30px; font-family: var(--display); font-weight: 800; font-size: 14px; color: #fff; background: var(--line-2); border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; }
.bnk-step.is-active b { background: var(--brand-2); }
.bnk-step h3 { margin-bottom: 10px; font-size: 24px; }
.bnk-step p { color: var(--ink-2); max-width: 52ch; }
.bnk-step .bnk-num { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
@media (max-width: 900px) {
  .bnk-path { grid-template-columns: 1fr; }
  .bnk-path-stage { top: calc(var(--top) + 10px); z-index: 2; aspect-ratio: auto; height: 34vh; min-height: 220px; box-shadow: 0 18px 40px rgba(0,0,0,.6); }
  .bnk-step { min-height: 0; padding-left: 0; padding-top: 70px; }
}
.bnk-viz text { font-family: var(--body); fill: var(--ink-2); font-size: 12px; }
.bnk-viz .t-big { font-family: var(--display); font-weight: 800; fill: var(--ink); font-size: 24px; }
.bnk-viz .t-blue { fill: #F08A5D; }
.bnk-viz .t-ok { fill: #3DDC97; }
@keyframes bnk-slide { from { transform: translateX(0); } to { transform: translateX(-90px); } }
@keyframes bnk-blink { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes bnk-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes bnk-pop { 0%, 8% { opacity: 0; transform: scale(0); } 12% { opacity: 1; transform: scale(1.8); } 20%, 100% { opacity: 1; transform: scale(1); } }
@keyframes bnk-flash { 0%, 8% { opacity: 0; } 11% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes bnk-draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@keyframes bnk-level { 0%, 15% { transform: scaleY(var(--from)); } 70%, 100% { transform: scaleY(1); } }
@keyframes bnk-wrap { 0%, 10% { transform: scaleX(0); } 45%, 100% { transform: scaleX(1); } }
@keyframes bnk-fade { 0%, 45% { opacity: 0; } 60%, 100% { opacity: 1; } }
@keyframes bnk-led { 0%, 100% { fill: #123a2a; } 50% { fill: #3DDC97; } }
.bnk-conv { animation: bnk-slide 1.8s linear infinite; }
.bnk-blink { animation: bnk-blink 1.8s ease-in-out infinite; }
.bnk-bar { transform-box: fill-box; transform-origin: bottom; animation: bnk-grow 1s cubic-bezier(.2,.8,.2,1) both; }
.bnk-weld { transform-box: fill-box; transform-origin: center; animation: bnk-pop 4.8s infinite both; }
.bnk-spark { transform-box: fill-box; transform-origin: center; animation: bnk-flash 4.8s infinite both; }
.bnk-curve { stroke-dasharray: var(--len); animation: bnk-draw 5s linear infinite; }
.bnk-lvl { transform-box: fill-box; transform-origin: bottom; animation: bnk-level 4s ease-in-out infinite alternate both; }
.bnk-shrink { transform-box: fill-box; transform-origin: left; animation: bnk-wrap 5s ease-out infinite both; }
.bnk-late { animation: bnk-fade 5s ease-out infinite both; }
.bnk-led { animation: bnk-led 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .bnk *, .bnk *::before, .bnk *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .bnk-conv { animation: none !important; }
}

/* ─── Применение ─── */
.bnk-use { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bnk-use article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; display: grid; gap: 10px; align-content: start; }
.bnk-use span { justify-self: start; font-weight: 700; font-size: 12px; letter-spacing: .08em; color: var(--brand); background: var(--brand-soft); border-radius: 999px; padding: 3px 10px; }
.bnk-use h3 { font-size: 24px; }
.bnk-use p { color: var(--ink-2); font-size: 14px; }
@media (max-width: 900px) { .bnk-use { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bnk-use { grid-template-columns: 1fr; } }

/* ─── Химия ─── */
.bnk-chem { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.bnk-chem article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; display: grid; gap: 16px; align-content: start; }
.bnk-chem article.is-ours { background: linear-gradient(180deg, rgba(185,68,24,.18), transparent 60%), var(--surface); border-color: rgba(232,93,42,.55); }
.bnk-chem header { display: grid; gap: 8px; }
.bnk-chem header span { font-family: var(--display); font-weight: 800; font-size: 12px; color: var(--mute); text-transform: uppercase; letter-spacing: .16em; }
.bnk-chem .is-ours header span { color: var(--brand); }
.bnk-chem h3 { font-size: 24px; }
.bnk-chem p { color: var(--ink-2); font-size: 14px; }
.bnk-range { display: grid; gap: 6px; }
.bnk-range > div:first-child { display: flex; justify-content: space-between; font-size: 12px; color: var(--mute); }
.bnk-range > div:first-child b { color: var(--ink-2); font-weight: 600; }
.bnk-range i { position: relative; display: block; height: 8px; border-radius: 99px; background: var(--bg); }
.bnk-range i b { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: #55615C; transition: left .8s, width .8s cubic-bezier(.2,.8,.2,1); }
.bnk-chem .is-ours .bnk-range i b { background: var(--brand); }
.bnk-chem ul { display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.bnk-chem li { padding-left: 18px; position: relative; }
.bnk-chem li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--line-2); }
.bnk-chem li.plus::before { background: #1FA971; }
.bnk-chem li.minus::before { background: #D9534A; }
@media (max-width: 980px) { .bnk-chem { grid-template-columns: 1fr; } }
.bnk-chem-foot { margin-top: 24px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; justify-content: space-between; padding: 24px 28px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand); }
.bnk-chem-foot p { max-width: 72ch; color: var(--ink-2); }

/* ─── Производство ─── */
.bnk-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bnk-trust > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; display: grid; gap: 16px; align-content: start; }
.bnk-trust h3 { font-size: 18px; }
.bnk-trust ul { display: grid; gap: 10px; color: var(--ink-2); font-size: 14px; }
.bnk-trust li { padding-left: 22px; position: relative; }
.bnk-trust li::before { content: ''; position: absolute; left: 0; top: .5em; width: 10px; height: 6px; border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(-45deg); }
.bnk-trust b { color: var(--ink); font-weight: 600; }
@media (max-width: 980px) { .bnk-trust { grid-template-columns: 1fr; } }

/* ─── Вопросы ─── */
.bnk-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); }
.bnk-faq > .bnk-head { align-self: start; }
.bnk-faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 10px; }
.bnk-faq summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 24px; position: relative; font-family: var(--display); font-weight: 600; font-size: 16px; }
.bnk-faq summary::-webkit-details-marker { display: none; }
.bnk-faq summary::after { content: '+'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 500; color: var(--brand); transition: transform .25s; }
.bnk-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.bnk-faq details p { padding: 0 24px 22px; color: var(--ink-2); max-width: 68ch; }
@media (max-width: 900px) { .bnk-faq { grid-template-columns: 1fr; } }

/* ─── Заявка ─── */
.bnk-final-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.bnk-final-grid > div:last-child { display: grid; gap: 18px; }
.bnk-final-emb { width: min(100%, 380px); aspect-ratio: 1; justify-self: center; }
.bnk-final-emb svg { width: 100%; height: 100%; filter: drop-shadow(0 0 60px rgba(232,93,42,.25)); }
.bnk-form { display: grid; gap: 12px; margin-top: 10px; }
.bnk-form textarea.bnk-input { height: 120px; padding: 12px 14px; resize: vertical; }
.bnk-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bnk-form-field { display: grid; gap: 6px; min-width: 0; }
.bnk-form-field > label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.bnk-form-foot { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.bnk-form-msg { font-size: 14px; color: var(--ok); min-height: 1.4em; }
.bnk-contacts { display: flex; flex-wrap: wrap; gap: 8px 28px; font-weight: 600; }
.bnk-contacts a { text-decoration: none; border-bottom: 1.5px solid var(--line-2); }
.bnk-contacts a:hover { border-color: var(--brand); }
@media (max-width: 900px) { .bnk-final-grid { grid-template-columns: 1fr; } .bnk-final-emb { width: min(70%, 280px); } .bnk-form-row { grid-template-columns: 1fr; } }

.bnk-foot { background: #0a0e0c; border-top: 1px solid var(--line); color: var(--mute); padding-block: 26px; font-size: 14px; }
.bnk-foot .bnk-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.bnk-foot .bnk-foot-legal { margin-top: 12px; font-size: 13px; }
.bnk .bnk-foot a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
/* плашка cookie — только на отдельной странице /battery (на портале своя) */
.bnk-cookie { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; max-width: 760px; margin: 0 auto; display: flex; flex-wrap: wrap;
  align-items: center; gap: 12px 16px; padding: 14px 16px; border-radius: 14px; background: rgb(22,32,28); border: 1px solid var(--line-2);
  box-shadow: 0 12px 30px rgba(0,0,0,.5); color: var(--ink-2); font: 400 13px/1.5 var(--body); }
.bnk-cookie[hidden] { display: none; }
.bnk-cookie p { flex: 1 1 260px; margin: 0; }
.bnk-cookie a { color: var(--ink); }
.bnk-cookie div { display: flex; gap: 8px; }
.bnk-cookie button { font: 600 13px/1 var(--display); padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); cursor: pointer; }
.bnk-cookie button[data-cookie="all"] { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }

/* ─── Правки после инспекции 23.09.2026 ─── */
.bnk-toggle[hidden], .bnk-field[hidden] { display: none; }
.bnk-brands-note { font-size: 12px; color: #4F5A55; padding-bottom: 14px; margin-top: -14px; }

/* Задачи — карточки-кнопки, ведут в каталог */
.bnk-use button { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; display: grid; gap: 10px; align-content: start; transition: border-color .2s, transform .2s; }
.bnk-use button:hover { border-color: rgba(232,93,42,.55); transform: translateY(-2px); }
.bnk-use button i { font-style: normal; font-weight: 600; font-size: 14px; color: var(--brand); margin-top: 4px; }
.bnk-use button i::after { content: ' →'; }
.bnk-use span { justify-self: start; font-weight: 700; font-size: 12px; letter-spacing: .08em; color: var(--ink-2); background: var(--bg); border-radius: 999px; padding: 3px 10px; }

/* Каталог: на телефоне сначала хиты, числа карточки — сеткой 2×2 */
.bnk-grid.is-collapsed .bnk-card:not(.is-hit) { display: none; }
.bnk-more { display: flex; justify-content: center; margin-top: 20px; }
.bnk-more [hidden] { display: none; }
.bnk-btn--line { background: transparent; }
.bnk-old { display: block; font-size: 14px; color: var(--mute); text-decoration-thickness: 1px; }
@media (max-width: 640px) {
  .bnk-spec { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bnk-spec div { display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
  .bnk-spec div:nth-child(n+5) { display: none; }
  .bnk-spec dd { text-align: left; font-family: var(--display); font-weight: 800; font-size: 18px; }
  .bnk-card-body { padding: 18px; }
}

/* Подбор */
.bnk-cfgnote { margin: -20px 0 24px; padding: 14px 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand); color: var(--ink-2); font-size: 14px; }
.bnk-cfgnote[hidden] { display: none; }
.bnk-cfgnote b { color: var(--ink); }
.bnk-view-3d.is-empty canvas { display: none; }
.bnk-view-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--mute); font-size: 14px; }
.bnk-view-empty[hidden] { display: none; }
.bnk-btn--wide { width: 100%; }
.bnk-linkbtn { font-size: 14px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; }
.bnk-linkbtn:hover { color: var(--ink); }
.bnk-quick { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg); }
.bnk-quick[hidden] { display: none; }
.bnk-quick .bnk-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 1280px) { .bnk-quick .bnk-form-row { grid-template-columns: 1fr; } }
.bnk-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; color: var(--ink-2); line-height: 1.5; cursor: pointer; }
.bnk-consent input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--brand); }
.bnk-consent a { color: var(--ink); }
.bnk-form-msg.is-ok { color: #4FC08D; }
.bnk-form-msg.is-warn { color: var(--warn); }
.bnk-nudge { font-size: 14px; color: var(--ink-2); background: var(--bg); border-radius: 10px; padding: 10px 12px; }
.bnk-nudge button { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bnk-warn { color: var(--warn); font-weight: 600; }
.bnk-cost b { color: var(--ink); }
.bnk-deal .bnk-price strong { font-size: clamp(32px, 4vw, 44px); }
.bnk-deal-price { align-items: end; }

/* Липкая панель цены на телефоне */
.bnk-stickybar { position: fixed; left: 12px; right: var(--sb-right, 12px); bottom: 12px; z-index: 40; display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 16px; border-radius: 14px; background: rgb(22,32,28); border: 1px solid var(--line-2); box-shadow: 0 12px 30px rgba(0,0,0,.5);
  transform: translateY(140%); transition: transform .25s; }
.bnk-stickybar span { display: grid; line-height: 1.25; }
.bnk-stickybar b { font-family: var(--display); font-size: 16px; }
.bnk-stickybar small { font-size: 12px; color: var(--ink-2); }
@media (max-width: 900px) { .bnk-stickybar { display: flex; } .bnk-stickybar.is-on { transform: none; } }

/* Служебный раздел менеджера */
.bnk-mgr { display: grid; gap: 20px; }
.bnk-mgr .bnk-panel { border-color: rgba(232,166,61,.35); }
.bnk-mgr-tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--warn); }
.bnk-mgr-list { display: grid; gap: 6px; font-size: 14px; }
.bnk-mgr-list li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.bnk-mgr-list button { color: var(--mute); }
.bnk-mgr textarea.bnk-input { height: 200px; padding: 12px 14px; font: 400 12px/1.5 var(--mono); resize: vertical; }

/* ─── Внутри портала ───
   Портал задаёт всем section отступы через !important и рисует над каждой оранжевую черту, а ссылкам
   снимает подчёркивание. У раздела свои отступы и оформление; специфичность выше портальной. */
.bnk .bnk-section { padding-block: clamp(80px, 10vw, 136px) !important; padding-inline: 0 !important; }
.bnk .bnk-hero { padding: 0 0 48px !important; }
.bnk .bnk-section::before, .bnk .bnk-hero::before { content: none !important; }
.bnk .bnk-consent a, .bnk .bnk-small a, .bnk .bnk-cfgnote a { text-decoration: underline; text-underline-offset: 2px; }
/* На телефоне меню раздела не липнет: экран маленький, а «Сделать заказ» и так всегда внизу, в полосе с ценой */
@media (max-width: 900px) { .bnk .bnk-nav { position: relative; top: auto; } }
@media (max-width: 640px) { .bnk .bnk-callout span { white-space: normal; width: max-content; max-width: 48vw; } }

/* ─── Кнопка «Сделать заказ»: из шапки сразу к форме, без прокрутки всего раздела ─── */
.bnk .bnk-phone { background: transparent; border: 1.5px solid var(--brand-2); color: var(--ink); }
.bnk .bnk-phone:hover { border-color: var(--brand); }
.bnk-order { font-family: var(--display); font-weight: 700; font-size: 14px; background: var(--brand-2); color: #fff; border-radius: 999px; padding: 12px 22px; white-space: nowrap; transition: background .2s, box-shadow .2s; }
.bnk-order:hover { background: var(--brand); box-shadow: 0 10px 26px -10px rgba(232,93,42,.7); }
.bnk-nav .bnk-wrap { gap: 16px 28px; }
.bnk-nav .bnk-phone { margin-left: 0; }
.bnk-nav nav { margin-right: 4px; }
.bnk .bnk-nav nav .bnk-nav-order { display: none; }
@media (max-width: 1200px) { .bnk .bnk-nav .bnk-phone { margin-left: auto; } }
@media (max-width: 560px) {
  .bnk .bnk-nav .bnk-order { display: none; }
  .bnk .bnk-nav nav .bnk-nav-order { display: inline-flex; background: var(--brand-2); border-color: var(--brand-2); color: #fff; font-weight: 700; }
}
/* переходы из шапки не прячут заголовок раздела под липкими шапками */
.bnk .bnk-section { scroll-margin-top: calc(var(--top) + 64px); }
@media (max-width: 900px) { .bnk .bnk-section { scroll-margin-top: var(--top); } }
.bnk-stickybar [hidden] { display: none; }

/* Навигация БАНКИ на телефоне: компактная кнопка и доступная выезжающая панель. */
@media (max-width: 720px) {
  .bnk .bnk-nav .bnk-wrap { flex-wrap: nowrap; min-height: 64px; padding-block: 8px; }
  .bnk .bnk-nav .bnk-nav-toggle { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; color: var(--ink); font: 600 13px/1 var(--body); }
  .bnk .bnk-nav .bnk-nav-toggle:hover, .bnk .bnk-nav .bnk-nav-toggle[aria-expanded="true"] { border-color: var(--brand); background: rgba(232,93,42,.12); }
  .bnk-nav-toggle-icon, .bnk-nav-toggle-icon::before, .bnk-nav-toggle-icon::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
  .bnk-nav-toggle-icon { position: relative; }
  .bnk-nav-toggle-icon::before, .bnk-nav-toggle-icon::after { content: ''; position: absolute; left: 0; }
  .bnk-nav-toggle-icon::before { top: -6px; }
  .bnk-nav-toggle-icon::after { top: 6px; }
  .bnk-nav-toggle[aria-expanded="true"] .bnk-nav-toggle-icon { background: transparent; }
  .bnk-nav-toggle[aria-expanded="true"] .bnk-nav-toggle-icon::before { transform: translateY(6px) rotate(45deg); }
  .bnk-nav-toggle[aria-expanded="true"] .bnk-nav-toggle-icon::after { transform: translateY(-6px) rotate(-45deg); }
  .bnk .bnk-nav nav#bnk-section-nav { display: none; position: fixed; z-index: 52; top: calc(env(safe-area-inset-top) + 72px); left: 12px; right: 12px; width: auto; order: initial; max-height: calc(100dvh - 92px); overflow-y: auto; margin: 0; padding: 10px; gap: 5px; flex-direction: column; align-items: stretch; background: var(--deep); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
  .bnk .bnk-nav.is-menu-open nav#bnk-section-nav { display: flex; }
  .bnk .bnk-nav nav#bnk-section-nav button { width: 100%; min-height: 44px; display: flex; align-items: center; padding: 10px 14px; border: 1px solid transparent; border-radius: 10px; font-size: 15px; text-align: left; color: var(--ink); }
  .bnk .bnk-nav nav#bnk-section-nav button:hover, .bnk .bnk-nav nav#bnk-section-nav button:focus-visible { border-color: var(--brand); background: rgba(232,93,42,.12); }
  .bnk .bnk-nav .bnk-nav-scrim { display: none; position: fixed; z-index: 51; inset: 0; width: 100%; height: 100%; background: rgba(0,0,0,.62); border: 0; }
  .bnk .bnk-nav.is-menu-open .bnk-nav-scrim { display: block; }
  .bnk .bnk-nav .bnk-order { display: none; }
  .bnk .bnk-nav nav .bnk-nav-order { display: flex; background: var(--brand-2); border-color: var(--brand-2); color: #fff; font-weight: 700; }
  body.bnk-nav-open { overflow: hidden !important; }
}

/* Strong, consistent keyboard indication across the section. */
.bnk :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid #ff9a70; outline-offset: 3px; }
.bnk :where(input, select, textarea):focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(232,93,42,.28); }

/* На странице АКБ общий чат портала не нужен: заказ и вопросы — через «Сделать заказ» и форму менеджеру.
   Чат портала к тому же про Gerber/BOM/STL. На остальных страницах портала он остаётся. */
body:has(#page-battery.active) #chat-launcher, body:has(#page-battery.active) #chat-widget { display: none !important; }
body:has(#page-battery.active) .bnk { --sb-right: 12px; }

/* ─── Одна панель вместо трёх ───
   На странице АКБ полоса контактов портала, его шапка, быстрые ссылки (телефон), корзина и второй
   значок чата прячутся: остаётся панель БАНКИ. Путь на портал — логотип портала «Ю» слева в ней
   (без подписи: с ней пункты меню в строку не помещаются). */
body:has(#page-battery.active) > .topbar,
body:has(#page-battery.active) > header,
body:has(#page-battery.active) .mobile-quicknav-row,
body:has(#page-battery.active) .floating-cart,
body:has(#page-battery.active) .floating-chat { display: none !important; }
.bnk .bnk-home { display: flex; align-items: center; margin-right: -12px; padding-right: 16px; border-right: 1px solid var(--line-2); text-decoration: none; opacity: .8; transition: opacity .2s; }
.bnk .bnk-home:hover { opacity: 1; }
.bnk-home-ic { display: grid; place-items: center; width: 30px; height: 30px; flex: none; }
.bnk-home-ic svg { display: block; width: 30px; height: 30px; }
.bnk-home-ic.is-text { border-radius: 8px; background: var(--brand-2); color: #fff; font-family: var(--display); font-weight: 800; font-size: 15px; }
@media (max-width: 1300px) { .bnk-nav nav { gap: 22px; } }
@media (max-width: 1200px) { .bnk-nav nav { gap: 8px; } }
@media (max-width: 560px) { .bnk-nav .bnk-wrap { column-gap: 12px; } .bnk .bnk-home { padding-right: 10px; margin-right: 0; } }
@media (max-width: 380px) { .bnk-logo { gap: 8px; } .bnk-logo b { font-size: 20px; } .bnk-logo #bnk-logo-can { width: 36px; height: 36px; } }