/* ==========================================================================
   БИЗНЕС РЕШЕНИЯ — стилове САМО за /business-solutions/
   Творческа посока: LIVING BUSINESS OS · Precision in Motion
   ==========================================================================

   ЗАЩО ОТДЕЛЕН ФАЙЛ
   `styles.css` е около 380 KB и се тегли от всяка страница на сайта.
   Оформлението на една-единствена страница вътре в него го оскъпява за
   всички останали. Тук се зарежда само там, където се ползва — през
   `{% block extra_css %}` в base.html.

   ЗАЩО ВСИЧКО Е ПОД `.page-business-solutions`
   Класът стои на `<body>` само на тази страница. Каквото и да се сгреши
   тук, то не може да достигне началната страница, каталога или портала.
   Затова файлът няма нито едно правило върху гол таг.

   ЦВЕТОВЕТЕ И ОТСТЪПИТЕ НЕ СА НОВИ. Всичко стъпва върху променливите в
   `:root` на styles.css (--color-navy, --color-primary, --color-accent,
   --space-*, --radius-*, --font-display …). Новите променливи по-долу са
   производни — за да остане страницата в семейството дори след смяна на
   гамата.

   ⚠️ ДВА СИЛНИ АКЦЕНТА, НЕ ПОВЕЧЕ, И НИКОГА ЕДНОВРЕМЕННО
   Индигово-виолетовото е основното семейство. Циан (`--bs-cy`) се ползва
   САМО там, където се говори за дигитални процеси и данни. Кехлибареното
   (`--bs-amb`) се ползва САМО в застраховането — за срок, който изисква
   внимание. Двете никога не стоят в една сцена.

   РЕДЪТ НА ФАЙЛА
     1. Променливи — цвят, движение, геометрия
     2. Примитиви — ленти, заглавия, бутони, разкриване при скрол
     3. Сцена 01 — hero: атмосфера, система, преход
     4. Индекс на сцените (широк екран)
     5. Сцена 02 — направления
     6. Сцена 03 — навигатор
     7. Сцена 04 — дигитални решения
     8. Сцена 05 — европейски проекти
     9. Сцена 06 — застраховане
    10. Сцена 07 — контакт
    11. Телефон — собствени решения, не свит десктоп
    12. Намалено движение

   ⚠️ БЕЗ ИНЛАЙН СТИЛОВЕ. Content Security Policy е `style-src: self`.
   Всички закъснения са тук, по клас — не в разметката.
   ========================================================================== */


/* ---------- 1. Променливи ------------------------------------------------ */

.page-business-solutions {
    /* --- Мастило и порцелан --- */
    --bs-ink: #0a0918;            /* почти черно синьо — най-тъмната лента */
    --bs-ink-2: #131028;
    --bs-porcelain: #f5f4fa;
    --bs-line-soft: #eceafb;

    /* --- Линии и панели на системите --- */
    --bs-wire: rgba(181, 158, 253, 0.58);
    --bs-wire-strong: rgba(214, 204, 255, 0.98);
    --bs-panel: rgba(255, 255, 255, 0.055);
    --bs-panel-strong: rgba(255, 255, 255, 0.1);
    --bs-edge: rgba(167, 139, 250, 0.26);
    --bs-edge-strong: rgba(196, 181, 253, 0.72);
    --bs-on-dark: rgba(255, 255, 255, 0.82);
    --bs-on-dark-quiet: rgba(255, 255, 255, 0.56);

    /* --- Двата акцента (виж предупреждението в началото) --- */
    --bs-cy: #5bd0f5;             /* дигитален сигнал — само сцена 04 */
    --bs-amb: #f0b354;            /* внимание към срок — само сцена 06 */

    /* --- Движение ---
       Едно място за всички времена. Дотук всяка анимация носеше свое
       число и системата се разпадаше при първата промяна. */
    --bs-fast: 220ms;
    --bs-medium: 600ms;
    --bs-slow: 800ms;
    --bs-system: 1000ms;
    --bs-stagger: 90ms;
    --bs-ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* --- Дълбочина (V3) ---
       ⚠️ ТРИ СТЪПКИ, НЕ ПЕТНАДЕСЕТ. В V2 всяка повърхност носеше своя сянка
       (0 26px 60px, 0 18px 46px, 0 16px 40px …) — широки размазани ореоли,
       които на светъл фон се четат като сиво петно около картата.
       Отрицателният `spread` държи сянката ПОД повърхността: тя дава
       дълбочина, без да излиза като правоъгълен ореол извън радиуса. */
    --bs-hairline: rgba(30, 27, 58, 0.09);
    --bs-hairline-strong: rgba(30, 27, 58, 0.16);
    --bs-depth-1: 0 1px 2px rgba(20, 18, 50, 0.04);
    --bs-depth-2: 0 1px 2px rgba(20, 18, 50, 0.05), 0 12px 28px -16px rgba(20, 18, 50, 0.18);
    --bs-depth-3: 0 1px 2px rgba(20, 18, 50, 0.06), 0 22px 44px -22px rgba(49, 40, 140, 0.28);
    --bs-r-sm: 12px;
    --bs-r: 18px;
    --bs-r-lg: 24px;
}


/* ---------- 2. Примитиви ------------------------------------------------- */

/* --- Ленти --- */
.page-business-solutions .bs-scene { position: relative; overflow: hidden; }
.page-business-solutions .bs-band-light { background: #fff; }
.page-business-solutions .bs-band-porcelain { background: var(--bs-porcelain); }
.page-business-solutions .bs-band-ink {
    background:
        radial-gradient(90% 70% at 82% 8%, rgba(124, 58, 237, 0.22) 0%, rgba(124, 58, 237, 0) 60%),
        radial-gradient(80% 60% at 8% 96%, rgba(79, 70, 229, 0.2) 0%, rgba(79, 70, 229, 0) 62%),
        linear-gradient(172deg, var(--bs-ink) 0%, var(--bs-ink-2) 55%, var(--bs-ink) 100%);
    color: #fff;
}
/* Едва доловима мрежа върху мастилените ленти — същият материал като в
   hero-то, за да се четат като части от една система. */
.page-business-solutions .bs-band-ink::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(82% 72% at 50% 30%, #000 0%, transparent 78%);
    mask-image: radial-gradient(82% 72% at 50% 30%, #000 0%, transparent 78%);
}
.page-business-solutions .bs-band-ink > .container { position: relative; }

/* --- Въведение на сцена: `.bs-intro` (V3) ---------------------------------
   ⚠️ ПРОИЗВОДНО НА `.band-split-head` ОТ styles.css, А НЕ НОВ ЕЗИК. Живият
   сайт обявява всеки раздел по един и същ начин: центрирано, до ~46rem,
   серифно заглавие с балансирано пренасяне, водещ абзац до 56ch и две къси
   черти — ГОРНАТА ВЛЯВО, ДОЛНАТА ВДЯСНО. V2 беше отделна система (едро
   число, ляво заглавие, празно поле вдясно) и страницата изглеждаше като
   чужд сайт вътре в сайта.

   Центрира се САМО въведението. Списъците, формите, диаграмите и дългите
   абзаци под него остават подравнени вляво.

   Номерът на сцената е тих технически етикет, не едра цифра: индексът
   вляво вече го показва, а трети път (V2 имаше и воден знак) е шум. */
.page-business-solutions .bs-intro {
    max-width: 46rem;
    margin: 0 auto var(--space-8);
    text-align: center;
}
.page-business-solutions .bs-intro::before,
.page-business-solutions .bs-intro::after {
    content: "";
    display: block;
    width: 5rem;
    height: 6px;
    border-radius: 999px;
    background-image: var(--gradient-accent);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(124, 58, 237, 0.24);
}
.page-business-solutions .bs-intro::before { margin: 0 auto var(--space-4) 0; }
.page-business-solutions .bs-intro::after { margin: var(--space-5) 0 0 auto; }
.page-business-solutions .bs-intro-label {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
    margin: 0 0 var(--space-3);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-muted);
}
.page-business-solutions .bs-intro-num {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-accent);
}
.page-business-solutions .bs-intro-num::after {
    content: "/";
    margin-left: 0.55rem;
    color: var(--bs-hairline-strong);
    font-family: var(--font-body);
    font-weight: 400;
}
.page-business-solutions .bs-intro-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: inherit;
    text-wrap: balance;
}
.page-business-solutions .bs-intro-lead {
    max-width: 56ch;
    margin: var(--space-4) auto 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--color-muted);
    text-wrap: pretty;
}
/* Тъмен вариант — като `.band-navy .band-split-head`: чертите стават
   светли, защото градиентът се губи върху мастилото. */
.page-business-solutions .bs-band-ink .bs-intro::before,
.page-business-solutions .bs-band-ink .bs-intro::after {
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.72), rgba(196, 181, 253, 0.72));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.page-business-solutions .bs-band-ink .bs-intro-label { color: var(--bs-on-dark-quiet); }
.page-business-solutions .bs-band-ink .bs-intro-num { color: var(--color-accent-soft); }
.page-business-solutions .bs-band-ink .bs-intro-num::after { color: rgba(255, 255, 255, 0.24); }
.page-business-solutions .bs-band-ink .bs-intro-lead { color: var(--bs-on-dark); }

/* Светещата дума. ⚠️ ЕДНА НА СЦЕНА, НЕ ПОВЕЧЕ — градиент върху всяко
   заглавие изглежда като тема, купена наготово. */
.page-business-solutions .bs-lume {
    font-style: normal;
    background: linear-gradient(96deg, #fff 0%, var(--color-accent-soft) 46%, #b7a6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.page-business-solutions .bs-lume-dark {
    font-style: normal;
    color: var(--color-accent-dark);
}

/* --- Бутони: една реакция за целия сайт на страницата --- */
.page-business-solutions .bs-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
/* Пълнежът минава ОТЛЯВО НАДЯСНО веднъж, вместо бутонът да пулсира.
   `transform` върху псевдоелемент — без промяна на ширина, тоест без
   преизчисляване на подредбата. */
.page-business-solutions .bs-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
    transform: translateX(-101%);
    transition: transform var(--bs-medium) var(--bs-ease);
}
.page-business-solutions .bs-btn:hover::before,
.page-business-solutions .bs-btn:focus-visible::before { transform: translateX(0); }
.page-business-solutions .bs-btn-arrow {
    display: inline-block;
    transition: transform var(--bs-fast) var(--bs-ease);
}
.page-business-solutions .bs-btn:hover .bs-btn-arrow,
.page-business-solutions .bs-btn:focus-visible .bs-btn-arrow { transform: translateX(4px); }

.page-business-solutions .bs-btn-ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.34);
    font-size: 1.05rem;
    padding: 0.8rem 1.7rem;
}
.page-business-solutions .bs-btn-ghost:hover { border-color: rgba(255, 255, 255, 0.66); }

.page-business-solutions .bs-scene-cta { margin: var(--space-8) 0 0; text-align: center; }
.page-business-solutions .bs-scene-cta-left { text-align: left; margin-top: var(--space-6); }

/* --- Разкриване при скрол: три семейства, не сто отделни правила ---------
   ⚠️ СКРИВА СЕ САМО КОГАТО JAVASCRIPT Е ТРЪГНАЛ. `html.bs-js` се слага от
   самия скрипт в първия му ред. Без него нищо не е скрито — страница без
   JavaScript (или със спрян скрипт) показва цялото съдържание веднага.
   Това е разликата между украса и капан.

   Разкриването е ЕДНОКРАТНО: класът `.bs-in` остава завинаги, връщането
   нагоре не скрива нищо. */
/* ⚠️ БЕЗ `clip-path` В КРАЙНОТО СЪСТОЯНИЕ (V3). V2 оставяше
   `clip-path: inset(0 0 0 0)` на всеки разкрит елемент — и то реже външната
   сянка по ПРАВОЪГЪЛНИКА на кутията. Около заоблените повърхности (таблото,
   застрахователните блокове) оставаха сиви квадратни ъгли извън радиуса.
   Сега разкриването е само прозрачност и отместване — нищо не се изрязва. */
.bs-js .page-business-solutions [data-bs-reveal] {
    opacity: 0;
    transition:
        opacity var(--bs-slow) var(--bs-ease),
        transform var(--bs-slow) var(--bs-ease);
}
/* Тип A — редакционен текст: изплува отдолу. */
.bs-js .page-business-solutions [data-bs-reveal="text"] {
    transform: translateY(18px);
}
/* Тип B — сглобяване на система: по-дълго, по-спокойно. */
.bs-js .page-business-solutions [data-bs-reveal="system"] {
    transform: translateY(14px);
    transition-duration: var(--bs-system);
}
/* Тип C — карти и модули: късо, със стъпало между съседите. */
.bs-js .page-business-solutions [data-bs-reveal="cards"] > * {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity var(--bs-medium) var(--bs-ease),
        transform var(--bs-medium) var(--bs-ease);
}
.bs-js .page-business-solutions [data-bs-reveal="cards"].bs-in > * {
    opacity: 1;
    transform: none;
}
.bs-js .page-business-solutions [data-bs-reveal="cards"].bs-in > *:nth-child(2) { transition-delay: var(--bs-stagger); }
.bs-js .page-business-solutions [data-bs-reveal="cards"].bs-in > *:nth-child(3) { transition-delay: calc(var(--bs-stagger) * 2); }
.bs-js .page-business-solutions [data-bs-reveal="cards"].bs-in > *:nth-child(4) { transition-delay: calc(var(--bs-stagger) * 3); }
.bs-js .page-business-solutions [data-bs-reveal="cards"].bs-in > *:nth-child(5) { transition-delay: calc(var(--bs-stagger) * 4); }

.bs-js .page-business-solutions [data-bs-reveal].bs-in {
    opacity: 1;
    transform: none;
}


/* ---------- 3. Сцена 01 — hero ------------------------------------------- */

.page-business-solutions .bs-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(2rem, 1.1rem + 2.6vw, 3.25rem) 0 clamp(4rem, 2rem + 6vw, 7rem);
    background:
        radial-gradient(118% 92% at 80% 12%, rgba(124, 58, 237, 0.34) 0%, rgba(124, 58, 237, 0) 58%),
        radial-gradient(92% 74% at 4% 98%, rgba(79, 70, 229, 0.3) 0%, rgba(79, 70, 229, 0) 62%),
        linear-gradient(168deg, #0d0b1e 0%, #17142f 46%, #100e24 100%);
    color: #fff;
}

/* --- СЛОЙ 1: атмосфера --- */
.page-business-solutions .bs-atmos {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
/* ⚠️ ПЕРСПЕКТИВНА МРЕЖА, А НЕ ПЛОСКА. Плоската мрежа се чете като
   таблица; наклонената дава дълбочина — усещането, че системата
   продължава навътре, а не свършва на ръба на екрана. */
.page-business-solutions .bs-atmos-grid {
    position: absolute;
    left: -25%;
    right: -25%;
    bottom: -30%;
    height: 95%;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 74px 74px;
    transform: perspective(700px) rotateX(66deg);
    transform-origin: bottom center;
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 72%);
    mask-image: linear-gradient(to top, #000 0%, transparent 72%);
}
.page-business-solutions .bs-atmos-field {
    position: absolute;
    border-radius: 50%;
    filter: blur(0.5px);
}
.page-business-solutions .bs-atmos-field-a {
    top: -20%; right: -10%;
    width: min(44rem, 90%);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.28) 0%, rgba(139, 92, 246, 0) 68%);
}
.page-business-solutions .bs-atmos-field-b {
    bottom: -26%; left: -14%;
    width: min(34rem, 80%);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.24) 0%, rgba(79, 70, 229, 0) 70%);
}
/* Зърното е ЕДИН SVG шум като data-URI, не картинка: няма заявка, няма
   тежест и не се размива при увеличение. CSP допуска `data:` за img-src. */
.page-business-solutions .bs-atmos-grain {
    position: absolute;
    inset: 0;
    opacity: 0.4;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
/* Координатните маркери по горния ръб. */
.page-business-solutions .bs-coords {
    position: absolute;
    top: 1.1rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.28);
}

.page-business-solutions .bs-hero-grid {
    position: relative;
    display: grid;
    gap: clamp(2rem, 1rem + 4vw, 3.5rem);
    align-items: center;
}

.page-business-solutions .bs-eyebrow {
    margin: 0 0 var(--space-4);
    color: var(--color-accent-soft);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Редакционното заглавие: всеки ред е свой блок, за да е ръчно пренасянето. */
.page-business-solutions .bs-h1 {
    margin: 0 0 var(--space-5);
    font-family: var(--font-display);
    font-weight: 600;
    /* ⚠️ ТАВАНЪТ Е ИЗМЕРЕН СПРЯМО КОЛОНАТА, а не избран на око. Ръчното
       пренасяне в разметката държи само ако най-дългият ред („Една входна
       точка за“, 20 знака) се побира в лявата колона и при НАЙ-ТЯСНАТА
       ширина, на която тя изобщо е колона (1080px). При 3,25rem не се
       побираше и заглавието падаше на пет реда. */
    font-size: clamp(1.95rem, 1.1rem + 2.6vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.026em;
    color: #fff;
}
.page-business-solutions .bs-h1-line { display: block; }

.page-business-solutions .bs-hero-sub {
    margin: 0 0 var(--space-6);
    max-width: 46ch;
    color: var(--bs-on-dark);
    font-size: clamp(1rem, 0.95rem + 0.32vw, 1.1875rem);
    line-height: 1.58;
}
.page-business-solutions .bs-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    margin-bottom: var(--space-6);
}
/* ⚠️ `::after` НА ПРЕДИШНИЯ, а не `::before` на следващия. С `::before`
   пренесеният ред на телефон започваше с точка и трите обещания
   заприличваха на списък с водещи знаци. */
.page-business-solutions .bs-hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.55rem;
    margin: 0;
    color: var(--bs-on-dark-quiet);
    font-size: 0.875rem;
}
.page-business-solutions .bs-hero-trust span { white-space: nowrap; }
.page-business-solutions .bs-hero-trust span:not(:last-child)::after {
    content: " ·";
    color: var(--color-accent-soft);
}

/* --- Надпис над схемата --- */
.page-business-solutions .bs-map-caption {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 var(--space-3);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
}
.page-business-solutions .bs-map-caption-light { color: var(--color-muted); }
.page-business-solutions .bs-map-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.18);
}

/* --- СЛОЙ 2: системата --------------------------------------------------
   ⚠️ ПОДРЕДБАТА ТУК Е ЗА ТЕЛЕФОН (mobile-first): ядрото отгоре на цяла
   ширина, разклонение под него и мрежа 2×2. Лъчевата схема идва по-долу и
   важи от 860px нагоре. Телефонът НЕ е свит десктоп — той има своя схема. */
.page-business-solutions .bs-map {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    max-width: 34rem;
    margin: 0 auto;
}
.page-business-solutions .bs-field { display: none; }
.page-business-solutions .bs-wires { display: none; }

.page-business-solutions .bs-core {
    position: relative;
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: var(--space-4);
    border: 1.5px solid var(--bs-edge-strong);
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0.06) 100%);
    box-shadow: 0 18px 44px rgba(10, 8, 30, 0.45);
    text-align: center;
    transition: border-color var(--bs-fast) var(--bs-ease);
}
.page-business-solutions .bs-core-ring {
    position: absolute;
    inset: -14%;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(closest-side, rgba(139, 92, 246, 0.42) 0%, rgba(139, 92, 246, 0) 78%);
    pointer-events: none;
}
.page-business-solutions .bs-core-tag {
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.34);
}
.page-business-solutions .bs-core-name {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--color-accent-soft);
}
/* Думите се редуват на ЕДНО И СЪЩО място — наслагани в мрежа, за да не
   подскача редът при всяка смяна. */
.page-business-solutions .bs-core-state {
    display: grid;
    align-items: center;
    justify-items: center;
    min-height: 3.4em;
}
.page-business-solutions .bs-core-word {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    opacity: 0;
    transition: opacity var(--bs-fast) var(--bs-ease);
}
.page-business-solutions .bs-core-word b {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.55rem);
    font-weight: 600;
    line-height: 1.15;
    color: #fff;
}
.page-business-solutions .bs-core-word i {
    font-style: normal;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--bs-on-dark-quiet);
}
.page-business-solutions .bs-word-idle { opacity: 1; }

.page-business-solutions .bs-fan {
    grid-column: 1 / -1;
    width: 100%;
    height: 30px;
    margin-bottom: calc(-1 * var(--space-2));
    overflow: visible;
}
.page-business-solutions .bs-fan line {
    stroke: var(--bs-wire);
    stroke-width: 1.5;
    stroke-linecap: round;
    /* Кутията е силно неравномерна; без това хоризонталната черта излиза
       по-тънка от вертикалните. */
    vector-effect: non-scaling-stroke;
}

.page-business-solutions .bs-node {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.28rem;
    min-height: 5.5rem;
    padding: var(--space-4) var(--space-3);
    border: 1px solid var(--bs-edge);
    border-radius: var(--radius-md);
    background: var(--bs-panel);
    color: #fff;
    text-align: center;
    text-decoration: none;
    transition:
        opacity var(--bs-fast) var(--bs-ease),
        scale var(--bs-fast) var(--bs-ease),
        background var(--bs-fast) var(--bs-ease),
        border-color var(--bs-fast) var(--bs-ease),
        box-shadow var(--bs-fast) var(--bs-ease);
}
.page-business-solutions .bs-node:hover { text-decoration: none; }
.page-business-solutions .bs-node-key {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-accent-soft);
}
.page-business-solutions .bs-node-name {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.32;
    color: #fff;
    text-wrap: balance;
}
.page-business-solutions .bs-node-status {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
}
.page-business-solutions .bs-node-plug {
    position: absolute;
    top: -4px;
    left: 50%;
    translate: -50% 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
    transition: scale var(--bs-fast) var(--bs-ease),
                background var(--bs-fast) var(--bs-ease),
                box-shadow var(--bs-fast) var(--bs-ease);
}

.page-business-solutions .bs-motto {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.2rem 0.85rem;
    margin: var(--space-5) 0 0;
    font-family: var(--font-display);
    font-size: clamp(1rem, 0.9rem + 0.45vw, 1.3rem);
    font-weight: 600;
}
.page-business-solutions .bs-motto-w { color: rgba(255, 255, 255, 0.64); }

/* --- Въвеждаща анимация ---
   ⚠️ `animation-fill-mode: backwards`, НЕ `forwards`. При `forwards`
   анимацията задържа последната си стойност НАВИНАГИ и с по-висок
   приоритет от обикновените правила — тогава `:hover` не може да смени
   същото свойство и картата умира след 1,8 сек. При `backwards` елементът
   стои в НАЧАЛНОТО състояние докато тече закъснението, анимира се и след
   края се връща под нормалния каскаден ред.

   Второто следствие е за `prefers-reduced-motion`: нормалното състояние Е
   крайното, значи изключването на анимациите показва всичко наведнъж, без
   да се преписва нито една стойност. Виж раздел 12. */
@keyframes bs-seed-travel {
    0%   { stroke-dashoffset: 26; opacity: 0; }
    25%  { opacity: 0.95; }
    100% { stroke-dashoffset: -104; opacity: 0; }
}
@keyframes bs-draw { from { stroke-dashoffset: 100; } }
@keyframes bs-node-in { from { opacity: 0; translate: 0 7px; } }
@keyframes bs-ring-in { from { opacity: 0; scale: 0.82; } }
@keyframes bs-motto-hit { 40% { color: #fff; text-shadow: 0 0 16px rgba(167, 139, 250, 0.8); } }
@keyframes bs-flow-travel { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes bs-flow-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes bs-field-in { from { opacity: 0; } }
@keyframes bs-exit-draw { from { stroke-dashoffset: 100; } }
/* Атмосферата диша много бавно — един от най-много трите фонови процеса. */
@keyframes bs-drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(2%, -1.5%, 0) scale(1.06); }
}

/* `pathLength="100"` прави дължината на всяка линия условно 100 единици,
   независимо от геометрията ѝ — затова едно и също `stroke-dasharray`
   важи и за късата хоризонтална, и за дългата вертикална линия.

   ⚠️ БЕЗ `vector-effect: non-scaling-stroke` ТУК. С него (и с неравномерно
   мащабиран viewBox) браузърът спира да зачита `pathLength` при пунктира:
   вместо един пътуващ импулс се получаваха пет неподвижни точки и линиите
   изглеждаха прекъснати. Дебелината е в единици на viewBox — 0.3 при мащаб
   ≈5.9 дава ≈1.8px и схемата се смалява като едно цяло. */
.page-business-solutions .bs-line {
    stroke: var(--bs-wire);
    stroke-width: 0.3;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    animation: bs-draw 0.4s var(--bs-ease) backwards;
    transition: stroke var(--bs-fast) var(--bs-ease), stroke-width var(--bs-fast) var(--bs-ease);
}
.page-business-solutions .bs-line-left  { animation-delay: 0.50s; }
.page-business-solutions .bs-line-right { animation-delay: 0.70s; }
.page-business-solutions .bs-line-up    { animation-delay: 0.90s; }
.page-business-solutions .bs-line-down  { animation-delay: 1.10s; }

.page-business-solutions .bs-seed {
    stroke: var(--color-accent-soft);
    stroke-width: 0.3;
    stroke-linecap: round;
    stroke-dasharray: 16 100;
    opacity: 0;
    animation: bs-seed-travel 0.34s ease-in;
}
.page-business-solutions .bs-seed-1 { animation-delay: 0.15s; }
.page-business-solutions .bs-seed-2 { animation-delay: 0.24s; }
.page-business-solutions .bs-seed-3 { animation-delay: 0.30s; }
.page-business-solutions .bs-seed-4 { animation-delay: 0.36s; }

.page-business-solutions .bs-flow {
    stroke: var(--color-accent-soft);
    stroke-width: 0.36;
    stroke-linecap: round;
    stroke-dasharray: 7 93;
    opacity: 0;
    /* Различната продължителност на четирите е нарочна: с еднаква те
       пулсират в такт и картата започва да мига. */
    animation:
        bs-flow-appear 0.9s linear 2.5s forwards,
        bs-flow-travel 3.8s linear 2.5s infinite;
}
.page-business-solutions .bs-flow-left  { animation-duration: 0.9s, 3.4s; }
.page-business-solutions .bs-flow-right { animation-duration: 0.9s, 4.3s; }
.page-business-solutions .bs-flow-up    { animation-duration: 0.9s, 3.9s; }
.page-business-solutions .bs-flow-down  { animation-duration: 0.9s, 4.7s; }

.page-business-solutions .bs-node { animation: bs-node-in 0.36s var(--bs-ease) backwards; }
.page-business-solutions .bs-node-accounting { animation-delay: 0.80s; }
.page-business-solutions .bs-node-digital    { animation-delay: 1.02s; }
.page-business-solutions .bs-node-eu         { animation-delay: 1.24s; }
.page-business-solutions .bs-node-insurance  { animation-delay: 1.44s; }

.page-business-solutions .bs-core-ring { animation: bs-ring-in 0.9s var(--bs-ease) 0.1s backwards; }
.page-business-solutions .bs-motto-w { animation: bs-motto-hit 0.42s ease-in-out; }
.page-business-solutions .bs-motto-w:nth-child(1) { animation-delay: 1.70s; }
.page-business-solutions .bs-motto-w:nth-child(2) { animation-delay: 1.85s; }
.page-business-solutions .bs-motto-w:nth-child(3) { animation-delay: 2.00s; }
.page-business-solutions .bs-motto-w:nth-child(4) { animation-delay: 2.15s; }
.page-business-solutions .bs-field { animation: bs-field-in 0.8s ease-out 0.2s backwards; }

/* --- СЛОЙ 3: взаимодействие ---------------------------------------------
   Активното направление се разпознава по ЧЕТИРИ различни знака, само един
   от които е цвят:
     1. думата и обяснението в ядрото се сменят (текст);
     2. линията става по-плътна и по-дебела (дебелина);
     3. възелът се повдига и получава по-светъл ръб (дълбочина);
     4. останалите три се приглушават (контраст).
   Изискването „не разчитай единствено на цвят“ е изпълнено дори при пълна
   липса на цветоусещане.

   `:has()` върши всичко това без JavaScript. Браузър без поддръжка просто
   остава на състоянието по подразбиране — картата пак се чете. */
.page-business-solutions .bs-node:hover,
.page-business-solutions .bs-node:focus-visible {
    background: var(--bs-panel-strong);
    border-color: var(--bs-edge-strong);
    box-shadow: 0 14px 34px rgba(15, 12, 40, 0.45);
    scale: 1.025;
}
.page-business-solutions .bs-node:hover .bs-node-plug,
.page-business-solutions .bs-node:focus-visible .bs-node-plug {
    background: #fff;
    scale: 1.35;
    box-shadow: 0 0 0 5px rgba(139, 92, 246, 0.3);
}
.page-business-solutions .bs-node:hover .bs-node-status,
.page-business-solutions .bs-node:focus-visible .bs-node-status { color: var(--color-accent-soft); }

.page-business-solutions .bs-map:has(.bs-node:hover) .bs-node:not(:hover),
.page-business-solutions .bs-map:has(.bs-node:focus-visible) .bs-node:not(:focus-visible) {
    opacity: 0.46;
}
.page-business-solutions .bs-map:has(.bs-node:hover) .bs-word-idle,
.page-business-solutions .bs-map:has(.bs-node:focus-visible) .bs-word-idle { opacity: 0; }
.page-business-solutions .bs-map:has(.bs-node-accounting:hover) .bs-word-accounting,
.page-business-solutions .bs-map:has(.bs-node-accounting:focus-visible) .bs-word-accounting,
.page-business-solutions .bs-map:has(.bs-node-digital:hover) .bs-word-digital,
.page-business-solutions .bs-map:has(.bs-node-digital:focus-visible) .bs-word-digital,
.page-business-solutions .bs-map:has(.bs-node-eu:hover) .bs-word-eu,
.page-business-solutions .bs-map:has(.bs-node-eu:focus-visible) .bs-word-eu,
.page-business-solutions .bs-map:has(.bs-node-insurance:hover) .bs-word-insurance,
.page-business-solutions .bs-map:has(.bs-node-insurance:focus-visible) .bs-word-insurance {
    opacity: 1;
}
.page-business-solutions .bs-map:has(.bs-node:hover) .bs-core,
.page-business-solutions .bs-map:has(.bs-node:focus-visible) .bs-core {
    border-color: rgba(233, 226, 255, 0.9);
}

/* --- Системният мост: hero → направления (V3) ---------------------------
   Замества „шева“ от V2 (избледняващо бяло петно + воден знак „01“).

   ТРИ ЧАСТИ, ЕДИН МАРШРУТ:
     1. `.bs-exit`   — в hero-то: извива от оста на ядрото към центъра;
     2. `.bs-bridge-node` — възел ТОЧНО върху ръба, наполовина в тъмното;
     3. `.bs-bridge-stem` + `.bs-bridge-bus` — в светлото: стъбло и шина с
        четири разклонения, които водят към въведението на сцена 02.

   ⚠️ БЕЗ РЯЗЪК ХОРИЗОНТАЛЕН РЪБ. Долният край на hero-то е една полегата
   дъга (елиптичен радиус), а най-ниската ѝ точка е точно под възела.
   Светлият фон под дъгата е `--color-bg` — същият, с който започва сцена
   02, затова ъглите не се четат като отделна ивица. */
.page-business-solutions .bs-hero {
    border-radius: 0 0 50% 50% / 0 0 clamp(1.25rem, 0.6rem + 2.4vw, 3rem) clamp(1.25rem, 0.6rem + 2.4vw, 3rem);
}
.page-business-solutions .bs-exit {
    --bs-exit-x: 50%;
    position: absolute;
    bottom: 0;
    height: clamp(3.5rem, 2rem + 4vw, 6rem);
    /* Кутията е ОТ центъра ДО оста на ядрото; без скрипт е тясна вертикала. */
    left: min(50%, var(--bs-exit-x));
    width: max(2px, calc(var(--bs-exit-x) - 50%), calc(50% - var(--bs-exit-x)));
    pointer-events: none;
}
/* Ядро ВЛЯВО от центъра (не се случва при текущата подредба, но пътят
   трябва да е верен и тогава): кривата се огледално обръща. */
.page-business-solutions .bs-exit.bs-exit-left .bs-exit-svg { transform: scaleX(-1); }
.page-business-solutions .bs-exit-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
/* ⚠️ БЕЗ `stroke-dasharray` ТУК. Кутията е неравномерно мащабирана
   (`preserveAspectRatio="none"`), затова щрихът е `non-scaling-stroke` — а
   с него браузърът мери пунктира в ПИКСЕЛИ, не по `pathLength`. Изчертаване
   с `dasharray: 100` оставяше видимо само парче от кривата и маршрутът не
   стигаше до възела. Маршрутът се появява с прозрачност, веднъж. */
.page-business-solutions .bs-exit-path {
    fill: none;
    stroke: url(#bs-exit-grad);
    stroke-width: 1.5;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    animation: bs-flow-appear 0.9s var(--bs-ease) 1.8s backwards;
}

.page-business-solutions .bs-directions {
    /* Хоризонтално се изрязва (декорацията не бива да дава хоризонтален
       скрол), вертикално НЕ — възелът на моста се качва върху hero-то. */
    overflow: clip visible;
    padding-top: 0;
    background: linear-gradient(to bottom, var(--color-bg) 0, #fff 22rem);
}
.page-business-solutions .bs-bridge {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(34rem, 78%);
    margin: 0 auto var(--space-6);
    z-index: 2;
}
.page-business-solutions .bs-bridge-node {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    /* Половината от височината му стои над ръба, върху тъмното. */
    margin-top: -1.05rem;
    padding: 0.45rem 0.95rem 0.45rem 0.6rem;
    border: 1px solid rgba(196, 181, 253, 0.55);
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, #1b1740 0%, #221d52 100%);
    background-clip: padding-box;
    box-shadow: 0 8px 22px -10px rgba(30, 20, 90, 0.6);
    color: #fff;
}
.page-business-solutions .bs-bridge-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: #e9e4ff;
    box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.28);
}
.page-business-solutions .bs-bridge-label {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.86);
}
/* Стъблото: от възела надолу — вече на светлия език на страницата. */
.page-business-solutions .bs-bridge-stem {
    width: 1.5px;
    height: 1.6rem;
    background: linear-gradient(to bottom, rgba(124, 58, 237, 0.9), rgba(79, 70, 229, 0.55));
}
/* Шината: четири клетки; всяка пуска късо разклонение с крайна точка.
   Хоризонталата свързва центровете на първата и последната клетка. */
.page-business-solutions .bs-bridge-bus {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
}
.page-business-solutions .bs-bridge-bus::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12.5%;
    right: 12.5%;
    height: 1.5px;
    background: linear-gradient(90deg, rgba(79, 70, 229, 0.35), rgba(124, 58, 237, 0.75) 50%, rgba(168, 85, 247, 0.35));
}
.page-business-solutions .bs-bridge-bus i {
    position: relative;
    display: block;
    height: 1.35rem;
}
.page-business-solutions .bs-bridge-bus i::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1.5px;
    height: 100%;
    translate: -50% 0;
    background: linear-gradient(to bottom, rgba(124, 58, 237, 0.6), rgba(124, 58, 237, 0.15));
}
.page-business-solutions .bs-bridge-bus i::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 50%;
    width: 7px;
    height: 7px;
    translate: -50% 0;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14);
}
/* Разклоненията се разгръщат веднъж, отвътре навън, когато мостът влезе в
   изгледа. При намалено движение всичко просто стои (раздел 12). */
.bs-js .page-business-solutions .bs-bridge .bs-bridge-bus::before {
    transform: scaleX(0);
    transition: transform var(--bs-slow) var(--bs-ease) 0.15s;
}
.bs-js .page-business-solutions .bs-bridge.bs-in .bs-bridge-bus::before { transform: scaleX(1); }
.bs-js .page-business-solutions .bs-bridge[data-bs-reveal] { transform: none; }


/* --- Широк екран: схемата става лъчева -----------------------------------
   От 860px нагоре картата става това, което е замислена да бъде — ядро в
   центъра и четири направления около него.

   ⚠️ ПОДРЕДБАТА Е `grid`, А НЕ АБСОЛЮТНО ПОЗИЦИОНИРАНЕ. Причината не е
   вкус: центрирането с `transform: translate(-50%, -50%)` заема същото
   свойство, което после трябва на `:hover` за повдигането, и двете не могат
   да съществуват едновременно. Мрежата подрежда без нито един `transform`,
   а `scale`/`translate` остават свободни за движението.

   ⚠️ ПРОЦЕНТИТЕ НА КОЛОНИТЕ И РЕДОВЕТЕ СЪВПАДАТ С КООРДИНАТИТЕ НА SVG-то.
   Колони: 0–24 | 24–35 | 35–65 | 65–76 | 76–100
   Редове: 0–22 | 22–37 | 37–63 | 63–78 | 78–100
   Линиите тръгват от ръба на ядрото (35/65 и 37/63) и спират на ръба на
   възела (24/76 и 22/78). Смяна на едното иска смяна и на другото — иначе
   линиите увисват във въздуха. */
@media (min-width: 53.75rem) {
    .page-business-solutions .bs-map {
        display: grid;
        grid-template-columns: 24% 11% 30% 11% 24%;
        grid-template-rows: 22% 15% 26% 15% 22%;
        gap: 0;
        aspect-ratio: 1.08;
        width: 100%;
        max-width: 40rem;
    }

    .page-business-solutions .bs-field { display: block; }
    .page-business-solutions .bs-wires { display: block; }
    .page-business-solutions .bs-fan { display: none; }

    .page-business-solutions .bs-core { grid-area: 3 / 3; padding: var(--space-3); }

    .page-business-solutions .bs-node {
        min-height: 0;
        align-self: center;
        padding: var(--space-3);
    }
    .page-business-solutions .bs-node-accounting { grid-area: 3 / 1; }
    .page-business-solutions .bs-node-digital    { grid-area: 3 / 5; }
    .page-business-solutions .bs-node-eu         { grid-area: 1 / 2 / 2 / 5; }
    .page-business-solutions .bs-node-insurance  { grid-area: 5 / 2 / 6 / 5; }
    .page-business-solutions .bs-node-eu,
    .page-business-solutions .bs-node-insurance {
        justify-self: center;
        width: min(100%, 15rem);
    }

    /* Щифтът сочи към ядрото, затова стои на РАЗЛИЧЕН ръб според посоката.
       Долният възел ползва стойността по подразбиране (горен ръб). */
    .page-business-solutions .bs-node-accounting .bs-node-plug {
        top: 50%; left: auto; right: -4px; translate: 0 -50%;
    }
    .page-business-solutions .bs-node-digital .bs-node-plug {
        top: 50%; left: -4px; translate: 0 -50%;
    }
    .page-business-solutions .bs-node-eu .bs-node-plug {
        top: auto; bottom: -4px; left: 50%; translate: -50% 0;
    }

    /* Слоевете лежат един върху друг и не поемат кликове — възлите са
       отгоре и трябва да останат кликаеми. */
    .page-business-solutions .bs-field,
    .page-business-solutions .bs-wires {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }
    .page-business-solutions .bs-wires { overflow: visible; }

    /* Активната линия: по-светла И по-дебела. Дебелината е знакът за човек,
       който не различава двата виолетови тона. */
    .page-business-solutions .bs-map:has(.bs-node-accounting:hover) .bs-line-left,
    .page-business-solutions .bs-map:has(.bs-node-accounting:focus-visible) .bs-line-left,
    .page-business-solutions .bs-map:has(.bs-node-digital:hover) .bs-line-right,
    .page-business-solutions .bs-map:has(.bs-node-digital:focus-visible) .bs-line-right,
    .page-business-solutions .bs-map:has(.bs-node-eu:hover) .bs-line-up,
    .page-business-solutions .bs-map:has(.bs-node-eu:focus-visible) .bs-line-up,
    .page-business-solutions .bs-map:has(.bs-node-insurance:hover) .bs-line-down,
    .page-business-solutions .bs-map:has(.bs-node-insurance:focus-visible) .bs-line-down {
        stroke: var(--bs-wire-strong);
        stroke-width: 0.46;
    }

    /* --- Фонова текстура: очертания на документи, точки и цифри --- */
    .page-business-solutions .bs-doc,
    .page-business-solutions .bs-mark,
    .page-business-solutions .bs-dot { position: absolute; }

    /* Документът е ЧЕТИРИ реда от градиент, а не четири елемента: формата
       се чете от разстояние, а разметката остава чиста. */
    .page-business-solutions .bs-doc {
        width: 2.6rem;
        height: 3.3rem;
        padding: 6px 5px;
        border: 1px solid rgba(196, 181, 253, 0.24);
        border-radius: 4px;
        background:
            repeating-linear-gradient(to bottom, transparent 0 8px, rgba(196, 181, 253, 0.2) 8px 9px);
        background-clip: content-box;
    }
    .page-business-solutions .bs-doc-a { top: 8%;  left: 6%;  rotate: -8deg; }
    .page-business-solutions .bs-doc-b { top: 74%; left: 11%; rotate: 6deg; }
    .page-business-solutions .bs-doc-c { top: 15%; right: 7%; rotate: 9deg; }

    .page-business-solutions .bs-mark {
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        color: rgba(196, 181, 253, 0.34);
    }
    .page-business-solutions .bs-mark-a { top: 30%; left: 3%; }
    .page-business-solutions .bs-mark-b { top: 70%; right: 4%; }
    .page-business-solutions .bs-mark-c { bottom: 9%; right: 16%; }
    .page-business-solutions .bs-mark-d { top: 27%; right: 14%; }

    .page-business-solutions .bs-dot {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: rgba(196, 181, 253, 0.55);
    }
    .page-business-solutions .bs-dot-a { top: 20%; left: 26%; }
    .page-business-solutions .bs-dot-b { top: 44%; left: 8%; }
    .page-business-solutions .bs-dot-c { top: 68%; left: 30%; }
    .page-business-solutions .bs-dot-d { top: 26%; right: 27%; }
    .page-business-solutions .bs-dot-e { top: 56%; right: 10%; }
    .page-business-solutions .bs-dot-f { bottom: 18%; right: 30%; }

    /* Разместване след показалеца — само фоновите слоеве.
       ⚠️ 10px Е ТАВАНЪТ и той е на най-далечния слой. Възлите изобщо не се
       местят: те са връзки, а цел, която бяга изпод показалеца, се уцелва
       по-трудно. */
    .page-business-solutions .bs-map { --bs-px: 0; --bs-py: 0; }
    .page-business-solutions .bs-field {
        translate: calc(var(--bs-px) * 10px) calc(var(--bs-py) * 10px);
        transition: translate 0.12s ease-out;
    }
    .page-business-solutions .bs-wires {
        translate: calc(var(--bs-px) * 5px) calc(var(--bs-py) * 5px);
        transition: translate 0.12s ease-out;
    }
}

/* Двете колони на hero-то идват по-късно от лъчевата схема: между 860 и
   1080px картата стои под текста и има цялата ширина за себе си. */
@media (min-width: 67.5rem) {
    .page-business-solutions .bs-hero-grid {
        /* Текстът получава повече място от схемата: заглавието носи
           смисъла, схемата — настроението, и тя се смалява по-грациозно. */
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    }
}


/* ---------- 4. Индекс на сцените (широк екран) --------------------------- */

/* ⚠️ ИСТИНСКА НАВИГАЦИЯ (V3). В V2 това беше `aria-hidden` декорация без
   връзки и с `pointer-events: none` — изглеждаше кликаемо, а не беше.

   КОГА СЕ ВИЖДА. От 80rem (1280px): под тази ширина лентата застава върху
   текста. Етикетът на АКТИВНАТА сцена стои постоянно от 90rem (1440px),
   където има място до съдържанието; между 1280 и 1440 етикетът излиза при
   посочване и фокус като малък надпис с фон, за да не лежи трайно върху
   текста.

   ⚠️ `pointer-events` Е ИЗКЛЮЧЕН НА ЛЕНТАТА, НО ВКЛЮЧЕН НА ВРЪЗКИТЕ.
   Празното място между тях не бива да краде кликове от съдържанието. */
.page-business-solutions .bs-rail { display: none; }

@media (min-width: 80rem) {
    .page-business-solutions .bs-rail {
        display: block;
        position: fixed;
        left: max(0.75rem, calc((100vw - 1400px) / 2));
        top: 50%;
        translate: 0 -50%;
        z-index: 15;
        pointer-events: none;
    }
    .page-business-solutions .bs-rail-track {
        position: absolute;
        left: 0.82rem;
        top: 1.2rem;
        bottom: 1.2rem;
        width: 1px;
        background: rgba(30, 27, 58, 0.14);
    }
    /* ⚠️ `scaleY`, А НЕ `height`. Височината е свойство на подредбата и
       всяка нейна стъпка кара браузъра да преизчислява; `transform` се
       изпълнява от композитора и не докосва подредбата изобщо. Делът идва
       от JavaScript като число в променлива — виж `setupRail`. */
    .page-business-solutions .bs-rail-fill {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: var(--color-accent);
        transform: scaleY(var(--bs-rail-p, 0));
        transform-origin: top;
        transition: transform var(--bs-medium) var(--bs-ease);
    }
    .page-business-solutions .bs-rail-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        margin: 0;
        padding: 0;
    }
    /* Всяка връзка е поне 44px висока (`--tap-target`) — целта за клик и
       докосване е целият ред, не точката от 7px. */
    .page-business-solutions .bs-rail-link {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.55rem;
        min-height: var(--tap-target);
        padding: 0 0.6rem 0 1.6rem;
        border-radius: var(--radius-pill);
        font-size: 0.625rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        text-decoration: none;
        color: rgba(30, 27, 58, 0.42);
        pointer-events: auto;
        transition: color var(--bs-fast) var(--bs-ease), background var(--bs-fast) var(--bs-ease);
    }
    .page-business-solutions .bs-rail-link:hover { text-decoration: none; color: var(--color-primary-dark); }
    .page-business-solutions .bs-rail-link b { font-weight: 800; }
    .page-business-solutions .bs-rail-link::before {
        content: "";
        position: absolute;
        left: 0.6rem;
        top: 50%;
        width: 7px;
        height: 7px;
        translate: 0 -50%;
        border-radius: 50%;
        background: rgba(30, 27, 58, 0.24);
        transition: background var(--bs-fast) var(--bs-ease), scale var(--bs-fast) var(--bs-ease);
    }
    .page-business-solutions .bs-rail-link:focus-visible {
        outline: 3px solid var(--color-primary);
        outline-offset: 0;
    }
    /* Етикетът: скрит, докато сцената не е текуща, посочена или на фокус.
       `visibility` — за да не поема кликове и да не се чете два пъти от
       окото; достъпното име идва от текста и е налично винаги. */
    .page-business-solutions .bs-rail-link span {
        padding: 0.25rem 0.5rem;
        margin-left: -0.5rem;
        border-radius: var(--radius-pill);
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        translate: -4px 0;
        transition: opacity var(--bs-fast) var(--bs-ease), translate var(--bs-fast) var(--bs-ease), visibility var(--bs-fast);
    }
    .page-business-solutions .bs-rail-link:hover span,
    .page-business-solutions .bs-rail-link:focus-visible span {
        opacity: 1;
        visibility: visible;
        translate: 0 0;
        background: #fff;
        box-shadow: var(--bs-depth-2);
    }
    /* Текущата сцена. Три знака, не само цвят: по-голяма точка, по-плътен
       номер и (на 1440+) видим етикет. */
    .page-business-solutions .bs-rail-link[aria-current="location"] { color: var(--color-primary-dark); }
    .page-business-solutions .bs-rail-link[aria-current="location"]::before {
        background: var(--color-accent);
        scale: 1.45;
        box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.16);
    }

    /* Върху мастилените сцени индексът обръща контраста си. */
    .page-business-solutions .bs-rail.bs-rail-dark .bs-rail-track { background: rgba(255, 255, 255, 0.18); }
    .page-business-solutions .bs-rail.bs-rail-dark .bs-rail-link { color: rgba(255, 255, 255, 0.5); }
    .page-business-solutions .bs-rail.bs-rail-dark .bs-rail-link:hover { color: #fff; }
    .page-business-solutions .bs-rail.bs-rail-dark .bs-rail-link::before { background: rgba(255, 255, 255, 0.3); }
    .page-business-solutions .bs-rail.bs-rail-dark .bs-rail-link[aria-current="location"] { color: #fff; }
    .page-business-solutions .bs-rail.bs-rail-dark .bs-rail-link[aria-current="location"]::before {
        background: var(--color-accent-soft);
        box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.22);
    }
    .page-business-solutions .bs-rail.bs-rail-dark .bs-rail-link:focus-visible { outline-color: #fff; }
    .page-business-solutions .bs-rail.bs-rail-dark .bs-rail-link:hover span,
    .page-business-solutions .bs-rail.bs-rail-dark .bs-rail-link:focus-visible span {
        background: var(--bs-ink-2);
        box-shadow: 0 0 0 1px rgba(196, 181, 253, 0.3);
    }
}
/* Широк екран: има място до съдържанието — етикетът на текущата сцена стои
   видим постоянно, без фон. */
@media (min-width: 90rem) {
    .page-business-solutions .bs-rail-link[aria-current="location"] span {
        opacity: 1;
        visibility: visible;
        translate: 0 0;
    }
}


/* ---------- 5. Сцена 02 — направления ------------------------------------ */

.page-business-solutions .bs-dirgrid {
    display: grid;
    gap: var(--space-5);
}
@media (min-width: 47.5rem) {
    .page-business-solutions .bs-dirgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6);
    }
}
/* ⚠️ РАВНА ВИСОЧИНА ОТ РЕШЕТКАТА, НЕ ОТ ПИКСЕЛИ. Картите са елементи на
   `grid` (разтягат се до реда) и сами са `flex` колона: призивът стои долу
   с `margin-top: auto`, на една линия във всяка карта от реда.

   ⚠️ ДЪЛБОЧИНАТА Е ОТ РАМКА И ЕДВА ДОЛОВИМ ГРАДИЕНТ, НЕ ОТ ШИРОКА СЯНКА.
   Акцентната черта отляво вече е ВЪТРЕ в радиуса (`inset` на
   псевдоелемента с `border-radius: inherit` и маска) — в V2 стоеше като
   залепена лента, която прекъсваше рамката. */
.page-business-solutions .bs-dir {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-6) var(--space-6) var(--space-5);
    border: 1px solid var(--bs-hairline);
    border-radius: var(--bs-r-lg);
    background: linear-gradient(180deg, #fff 0%, #fdfcff 100%);
    background-clip: padding-box;
    box-shadow: var(--bs-depth-1);
    transition: box-shadow var(--bs-fast) var(--bs-ease),
                border-color var(--bs-fast) var(--bs-ease),
                translate var(--bs-fast) var(--bs-ease);
}
.page-business-solutions .bs-dir::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    /* Горната черта на картата — изходът от шината на моста. */
    background: linear-gradient(90deg, #4f46e5, #7c3aed 55%, #a855f7) top / 100% 3px no-repeat;
    opacity: 0.85;
    pointer-events: none;
}
.page-business-solutions .bs-dir:hover,
.page-business-solutions .bs-dir:focus-within {
    border-color: rgba(124, 58, 237, 0.3);
    box-shadow: var(--bs-depth-3);
    translate: 0 -2px;
}
.page-business-solutions .bs-dir-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}
.page-business-solutions .bs-dir-no {
    margin: 0;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    color: rgba(124, 58, 237, 0.3);
}
/* Мини диаграмата взима цвета на картата и реагира заедно с нея. */
.page-business-solutions .bs-mini {
    width: 5.5rem;
    height: auto;
    flex: none;
    color: var(--color-accent-soft);
    transition: color var(--bs-fast) var(--bs-ease);
}
.page-business-solutions .bs-dir:hover .bs-mini { color: var(--color-accent); }
.page-business-solutions .bs-mini-base,
.page-business-solutions .bs-mini-ticks { opacity: 0.4; }
.page-business-solutions .bs-mini-arrow { opacity: 0.75; }
.page-business-solutions .bs-mini-node { fill: currentColor; }
.page-business-solutions .bs-mini-core { fill: currentColor; opacity: 0.25; }

.page-business-solutions .bs-dir-key {
    margin: 0 0 var(--space-2);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
}
.page-business-solutions .bs-dir-title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    line-height: 1.2;
    color: var(--color-navy);
}
/* Думата-резултат е СЪЩАТА, която ядрото показва при посочване — така
   двете сцени се четат като едно нещо, а не като две. */
.page-business-solutions .bs-dir-result {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 var(--space-4);
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--color-accent-bg);
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-accent-dark);
    align-self: flex-start;
}
.page-business-solutions .bs-dir-result span {
    font-family: var(--font-body);
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-muted);
}
.page-business-solutions .bs-dir-body { margin: 0 0 var(--space-3); line-height: 1.6; }
.page-business-solutions .bs-dir-support {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-3);
    border-left: 2px solid var(--color-accent-bg);
    font-size: 0.9375rem;
    color: var(--color-muted);
}
/* Долният ред на картата: основният призив (към страницата на
   направлението) и тих втори ред (към прегледа тук). `margin-top: auto`
   ги бута до дъното — на една линия във всички карти от реда. */
.page-business-solutions .bs-dir-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--bs-hairline);
}
.page-business-solutions .bs-dir-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: var(--tap-target);
    font-weight: 700;
    color: var(--color-primary-dark);
}
.page-business-solutions .bs-dir-cta:hover { text-decoration: none; color: var(--color-accent-dark); }
.page-business-solutions .bs-dir-cta:hover .bs-btn-arrow { transform: translateX(4px); }
.page-business-solutions .bs-dir-sub {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    font-size: 0.875rem;
    color: var(--color-muted);
    text-decoration: underline;
    text-decoration-color: rgba(107, 107, 135, 0.35);
    text-underline-offset: 3px;
}
.page-business-solutions .bs-dir-sub:hover { color: var(--color-primary-dark); text-decoration-color: currentColor; }

/* ---------- 6. Сцена 03 — навигатор -------------------------------------- */

.page-business-solutions .bs-nav {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    border: 0;
}
/* Скритите радио бутони НЕ са `display: none` — иначе спират да се
   фокусират с клавиатура и изборът става недостъпен. */
.page-business-solutions .bs-nav-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.page-business-solutions .bs-nav-opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--tap-target);
    padding: var(--space-4);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.04);
    color: var(--bs-on-dark);
    cursor: pointer;
    transition: background var(--bs-fast) var(--bs-ease),
                border-color var(--bs-fast) var(--bs-ease),
                color var(--bs-fast) var(--bs-ease);
}
.page-business-solutions .bs-nav-opt:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
.page-business-solutions .bs-nav-num {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-size: 0.75rem;
    font-weight: 800;
}
.page-business-solutions .bs-nav-text { line-height: 1.35; }
/* Кабелът от избора към резултата — вижда се само на широк екран. */
.page-business-solutions .bs-nav-link { display: none; }

.page-business-solutions .bs-nav-input:nth-of-type(1):checked ~ .bs-nav-opt:nth-of-type(1),
.page-business-solutions .bs-nav-input:nth-of-type(2):checked ~ .bs-nav-opt:nth-of-type(2),
.page-business-solutions .bs-nav-input:nth-of-type(3):checked ~ .bs-nav-opt:nth-of-type(3),
.page-business-solutions .bs-nav-input:nth-of-type(4):checked ~ .bs-nav-opt:nth-of-type(4) {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--color-accent-soft);
    color: #fff;
    font-weight: 600;
}
.page-business-solutions .bs-nav-input:nth-of-type(1):checked ~ .bs-nav-opt:nth-of-type(1) .bs-nav-num,
.page-business-solutions .bs-nav-input:nth-of-type(2):checked ~ .bs-nav-opt:nth-of-type(2) .bs-nav-num,
.page-business-solutions .bs-nav-input:nth-of-type(3):checked ~ .bs-nav-opt:nth-of-type(3) .bs-nav-num,
.page-business-solutions .bs-nav-input:nth-of-type(4):checked ~ .bs-nav-opt:nth-of-type(4) .bs-nav-num {
    background: var(--color-accent-soft);
    border-color: var(--color-accent-soft);
    color: var(--color-navy);
}
.page-business-solutions .bs-nav-input:nth-of-type(1):focus-visible ~ .bs-nav-opt:nth-of-type(1),
.page-business-solutions .bs-nav-input:nth-of-type(2):focus-visible ~ .bs-nav-opt:nth-of-type(2),
.page-business-solutions .bs-nav-input:nth-of-type(3):focus-visible ~ .bs-nav-opt:nth-of-type(3),
.page-business-solutions .bs-nav-input:nth-of-type(4):focus-visible ~ .bs-nav-opt:nth-of-type(4) {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.page-business-solutions .bs-nav-panel { display: none; }
.page-business-solutions .bs-nav-input:nth-of-type(1):checked ~ .bs-nav-panel-1,
.page-business-solutions .bs-nav-input:nth-of-type(2):checked ~ .bs-nav-panel-2,
.page-business-solutions .bs-nav-input:nth-of-type(3):checked ~ .bs-nav-panel-3,
.page-business-solutions .bs-nav-input:nth-of-type(4):checked ~ .bs-nav-panel-4 {
    display: block;
    animation: bs-panel-in var(--bs-medium) var(--bs-ease);
}
/* Смяната на резултата: само прозрачност и отместване — без `clip-path`
   (той режеше рамката на панела по време на анимацията). */
@keyframes bs-panel-in {
    from { opacity: 0; translate: 0 8px; }
}
.page-business-solutions .bs-nav-panel {
    padding: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
    border: 1px solid rgba(196, 181, 253, 0.26);
    border-radius: var(--bs-r-lg);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0.035) 100%);
    background-clip: padding-box;
}
/* Двете действия на резултата — РАЗЛИЧНА тежест: основното е бутон към
   страницата на направлението, второто е тиха връзка към формата. */
.page-business-solutions .bs-nav-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    margin: 0;
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.page-business-solutions .bs-nav-secondary {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
    color: var(--bs-on-dark);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.3);
    text-underline-offset: 4px;
}
.page-business-solutions .bs-nav-secondary:hover { color: #fff; text-decoration-color: currentColor; }
.page-business-solutions .bs-nav-secondary:focus-visible { outline-color: #fff; }
.page-business-solutions .bs-band-ink :focus-visible { outline-color: #fff; }
.page-business-solutions .bs-nav-res {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
    font-weight: 600;
    line-height: 1.12;
    color: #fff;
}
.page-business-solutions .bs-nav-res-tag {
    font-family: var(--font-body);
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent-soft);
}
.page-business-solutions .bs-nav-lead {
    margin: 0 0 var(--space-5);
    color: var(--bs-on-dark);
    line-height: 1.6;
}
/* Пътят на решението: номерирани стъпки, свързани с линия. */
.page-business-solutions .bs-route {
    list-style: none;
    counter-reset: bs-route;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 0 var(--space-5);
    padding: 0;
}
.page-business-solutions .bs-route li {
    position: relative;
    counter-increment: bs-route;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.45rem 0 0.45rem 2.1rem;
    color: #fff;
    font-size: 0.9375rem;
}
.page-business-solutions .bs-route li::before {
    content: "";
    position: absolute;
    left: 0;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--color-accent-soft);
}
/* Свързващата линия минава ПОД номерата и спира на последния. */
.page-business-solutions .bs-route li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 0.42rem;
    top: 1.5rem;
    bottom: -0.35rem;
    width: 1px;
    background: rgba(196, 181, 253, 0.35);
}
.page-business-solutions .bs-nav-plus {
    margin: 0 0 var(--space-5);
    padding: var(--space-3) var(--space-4);
    border-left: 2px solid var(--color-accent-soft);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.875rem;
    color: var(--bs-on-dark);
}
.page-business-solutions .bs-nav-plus-tag {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent-soft);
}

/* Широк екран: изборите отляво, резултатът отдясно и залепен.
   ⚠️ ПАНЕЛИТЕ СА В ЕДНА И СЪЩА КЛЕТКА (`grid-row: 1 / -1`). Показва се
   само избраният, затова наслагването им е безопасно и не иска нито едно
   правило за позиция на всеки поотделно. */
@media (min-width: 56.25rem) {
    .page-business-solutions .bs-nav {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
        grid-template-rows: repeat(4, auto);
        column-gap: var(--space-7);
        row-gap: var(--space-4);
        align-items: start;
    }
    .page-business-solutions .bs-nav-opt { grid-column: 1; }
    .page-business-solutions .bs-nav-panel {
        grid-column: 2;
        grid-row: 1 / -1;
        position: sticky;
        top: 7.5rem;
    }
    /* Кабелът: къса черта от избраната опция към дясната колона. */
    /* Същата причина като при индекса: кабелът израства със `scaleX`,
       а не с промяна на ширината. */
    .page-business-solutions .bs-nav-link {
        display: block;
        position: absolute;
        right: calc(-1 * var(--space-7));
        top: 50%;
        width: var(--space-7);
        height: 1px;
        background: var(--color-accent-soft);
        translate: 0 -50%;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--bs-medium) var(--bs-ease);
    }
    .page-business-solutions .bs-nav-input:nth-of-type(1):checked ~ .bs-nav-opt:nth-of-type(1) .bs-nav-link,
    .page-business-solutions .bs-nav-input:nth-of-type(2):checked ~ .bs-nav-opt:nth-of-type(2) .bs-nav-link,
    .page-business-solutions .bs-nav-input:nth-of-type(3):checked ~ .bs-nav-opt:nth-of-type(3) .bs-nav-link,
    .page-business-solutions .bs-nav-input:nth-of-type(4):checked ~ .bs-nav-opt:nth-of-type(4) .bs-nav-link {
        transform: scaleX(1);
    }
}


/* ---------- 7. Сцена 04 — дигитални решения ------------------------------ */

/* ⚠️ ЦИАНЪТ ЖИВЕЕ САМО ТУК. Това е сцената за процеси и данни; в
   останалите акцентът остава виолетов. */
/* ⚠️ ДЪЛБОЧИНА БЕЗ ОРЕОЛ. V2 носеше `0 26px 60px` — широка сива сянка, която
   след `clip-path` на разкриването оставяше квадратни ъгли около таблото.
   Сега: тънка рамка, `isolation` за вътрешните слоеве, `overflow: clip`
   (реже само съдържанието до радиуса, не фокуса на табовете, който е
   вътре) и сянка с отрицателен `spread`, прибрана под повърхността. */
.page-business-solutions .bs-canvas {
    --bs-sig: var(--bs-cy);
    isolation: isolate;
    margin-bottom: var(--space-7);
    border: 1px solid var(--bs-hairline);
    border-radius: var(--bs-r-lg);
    background: #fff;
    background-clip: padding-box;
    box-shadow: var(--bs-depth-2);
    overflow: clip;
}
.page-business-solutions .bs-canvas-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--bs-line-soft);
    background: linear-gradient(180deg, #fbfaff 0%, #f4f2fc 100%);
}
.page-business-solutions .bs-canvas-dots { display: flex; gap: 5px; }
.page-business-solutions .bs-canvas-dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(30, 27, 58, 0.16);
}
.page-business-solutions .bs-canvas-title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-navy);
}
/* ⚠️ НАДПИСЪТ „ИЛЮСТРАТИВНА СИСТЕМА“ НЕ СЕ МАХА. Това не е демо на реален
   продукт и посетителят трябва да го вижда, без да пита. */
.page-business-solutions .bs-canvas-tag {
    margin: 0 0 0 auto;
    padding: 0.2rem 0.6rem;
    border: 1px dashed rgba(30, 27, 58, 0.2);
    border-radius: var(--radius-pill);
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-muted);
}
.page-business-solutions .bs-canvas-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--bs-line-soft);
    background: #fff;
}
.page-business-solutions .bs-mode {
    position: relative;
    padding: var(--space-3) var(--space-4);
    min-height: var(--tap-target);
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-muted);
    cursor: pointer;
    transition: color var(--bs-fast) var(--bs-ease);
}
.page-business-solutions .bs-mode::after {
    content: "";
    position: absolute;
    left: var(--space-4);
    right: var(--space-4);
    bottom: -1px;
    height: 2px;
    background: var(--bs-sig);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--bs-fast) var(--bs-ease);
}
.page-business-solutions .bs-mode:hover { color: var(--color-navy); }
.page-business-solutions .bs-mode[aria-selected="true"] { color: var(--color-navy); }
.page-business-solutions .bs-mode[aria-selected="true"]::after { transform: scaleX(1); }

.page-business-solutions .bs-canvas-body {
    padding: var(--space-5) var(--space-4) var(--space-6);
    background:
        radial-gradient(60% 50% at 80% 0%, rgba(91, 208, 245, 0.08) 0%, rgba(91, 208, 245, 0) 70%),
        #fff;
}

/* --- Основният поток --- */
.page-business-solutions .bs-flowrail {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 var(--space-6);
    padding: 0;
    counter-reset: bs-flow;
}
.page-business-solutions .bs-flowrail li {
    position: relative;
    counter-increment: bs-flow;
    padding-top: 1.4rem;
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-muted);
    transition: color var(--bs-fast) var(--bs-ease);
}
/* Линията минава ПРЕЗ всички стъпки — един елемент, не пет чертички. */
.page-business-solutions .bs-flowrail li::before {
    content: "";
    position: absolute;
    top: 0.42rem;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(30, 27, 58, 0.12);
}
.page-business-solutions .bs-flowrail li:first-child::before { left: 50%; }
.page-business-solutions .bs-flowrail li:last-child::before { right: 50%; }
.page-business-solutions .bs-flowrail li::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid rgba(30, 27, 58, 0.2);
    background: #fff;
    transition: border-color var(--bs-fast) var(--bs-ease),
                background var(--bs-fast) var(--bs-ease),
                scale var(--bs-fast) var(--bs-ease);
}
.page-business-solutions .bs-flowrail li.bs-step-on { color: var(--color-navy); }
.page-business-solutions .bs-flowrail li.bs-step-on::after {
    border-color: var(--bs-sig);
    background: var(--bs-sig);
    scale: 1.25;
}

/* --- Модулите --- */
.page-business-solutions .bs-modules {
    display: grid;
    gap: var(--space-4);
}
@media (min-width: 47.5rem) {
    .page-business-solutions .bs-modules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Показва се модулът, чийто `data-bs-for` съдържа текущия режим.
   `~=` търси ЦЯЛА ДУМА в списък, разделен с интервали — затова
   `data-bs-for="sales ops"` съвпада и с двата, без излишни класове. */
.page-business-solutions .bs-canvas[data-bs-mode="sales"] .bs-mod:not([data-bs-for~="sales"]),
.page-business-solutions .bs-canvas[data-bs-mode="ops"] .bs-mod:not([data-bs-for~="ops"]),
.page-business-solutions .bs-canvas[data-bs-mode="bi"] .bs-mod:not([data-bs-for~="bi"]) {
    display: none;
}
.page-business-solutions .bs-mod {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--bs-line-soft);
    border-radius: var(--radius);
    background: #fff;
    animation: bs-mod-in var(--bs-medium) var(--bs-ease) backwards;
}
@keyframes bs-mod-in { from { opacity: 0; translate: 0 12px; } }
.page-business-solutions .bs-mod:nth-child(2) { animation-delay: var(--bs-stagger); }
.page-business-solutions .bs-mod:nth-child(3) { animation-delay: calc(var(--bs-stagger) * 2); }
/* Ролята („оператор“, „без ръчна намеса“) слиза под името, когато няма
   място — вместо да се пречупи на три реда до него (таблет, 768px). */
.page-business-solutions .bs-mod-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.15rem var(--space-3);
    margin: 0;
}
.page-business-solutions .bs-mod-role { white-space: nowrap; }
.page-business-solutions .bs-mod-name {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-navy);
}
.page-business-solutions .bs-mod-role,
.page-business-solutions .bs-mod-foot {
    font-size: 0.6875rem;
    color: var(--color-muted);
}
.page-business-solutions .bs-mod-foot { margin: auto 0 0; }

.page-business-solutions .bs-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.page-business-solutions .bs-rows li { display: flex; align-items: center; gap: 0.6rem; }
.page-business-solutions .bs-rowline {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(30, 27, 58, 0.1), rgba(30, 27, 58, 0.03));
}
.page-business-solutions .bs-chip {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-muted);
    white-space: nowrap;
}
.page-business-solutions .bs-chip-new { background: rgba(91, 208, 245, 0.16); color: #0d5f7a; }
.page-business-solutions .bs-chip-ok { background: var(--color-success-bg); color: var(--color-success); }
.page-business-solutions p.bs-chip { align-self: flex-start; margin: 0; }

.page-business-solutions .bs-autoroute {
    list-style: none;
    counter-reset: bs-auto;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.page-business-solutions .bs-autoroute li {
    position: relative;
    padding-left: 1.4rem;
    font-size: 0.8125rem;
    color: var(--color-text);
}
.page-business-solutions .bs-autoroute li::before {
    content: "";
    position: absolute;
    left: 0.28rem;
    top: 0.45em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bs-sig);
}
.page-business-solutions .bs-autoroute li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 0.53rem;
    top: 1.1em;
    height: 0.75rem;
    width: 1px;
    background: rgba(91, 208, 245, 0.5);
}
.page-business-solutions .bs-note {
    display: flex;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text);
}
.page-business-solutions .bs-note-dot {
    flex: none;
    width: 7px;
    height: 7px;
    margin-top: 0.4em;
    border-radius: 50%;
    background: var(--bs-sig);
    box-shadow: 0 0 0 4px rgba(91, 208, 245, 0.16);
}
.page-business-solutions .bs-roles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.page-business-solutions .bs-roles li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8125rem; }
.page-business-solutions .bs-role-mark {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--color-accent-bg);
    font-size: 0.6875rem;
    font-weight: 800;
    color: var(--color-accent-dark);
}
.page-business-solutions .bs-docs { display: flex; gap: 0.4rem; }
.page-business-solutions .bs-docs i {
    width: 1.5rem;
    height: 2rem;
    border: 1px solid rgba(30, 27, 58, 0.16);
    border-radius: 3px;
    background:
        repeating-linear-gradient(to bottom, transparent 0 5px, rgba(30, 27, 58, 0.12) 5px 6px)
        content-box;
    padding: 4px 3px;
}
.page-business-solutions .bs-chart { width: 100%; height: auto; }
.page-business-solutions .bs-chart-bars rect { fill: var(--bs-sig); opacity: 0.75; }
.page-business-solutions .bs-chart-bars rect:nth-child(even) { opacity: 0.45; }
.page-business-solutions .bs-chart-axis { stroke: rgba(30, 27, 58, 0.16); stroke-width: 1; }
.page-business-solutions .bs-sources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.page-business-solutions .bs-sources li {
    position: relative;
    padding-left: 1.1rem;
    font-size: 0.8125rem;
}
.page-business-solutions .bs-sources li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-accent-soft);
}

/* --- Процесът --- */
.page-business-solutions .bs-process {
    list-style: none;
    display: grid;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
}
@media (min-width: 47.5rem) {
    .page-business-solutions .bs-process { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
}
.page-business-solutions .bs-step {
    position: relative;
    padding-top: var(--space-5);
    border-top: 2px solid var(--color-accent-bg);
}
/* Релсата се запълва при разкриване — стъпка по стъпка, веднъж. */
.page-business-solutions .bs-step::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--bs-slow) var(--bs-ease);
}
.bs-js .page-business-solutions .bs-process.bs-in .bs-step::before { transform: scaleX(1); }
.bs-js .page-business-solutions .bs-process.bs-in .bs-step:nth-child(2)::before { transition-delay: calc(var(--bs-stagger) * 2); }
.bs-js .page-business-solutions .bs-process.bs-in .bs-step:nth-child(3)::before { transition-delay: calc(var(--bs-stagger) * 4); }
.bs-js .page-business-solutions .bs-process.bs-in .bs-step:nth-child(4)::before { transition-delay: calc(var(--bs-stagger) * 6); }
.page-business-solutions .bs-step-num {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-accent-dark);
}
.page-business-solutions .bs-step h3 {
    margin: 0 0 var(--space-2);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--color-navy);
}
.page-business-solutions .bs-step p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--color-muted); }
.page-business-solutions .bs-process-note {
    max-width: 62ch;
    margin: var(--space-6) 0 0;
    padding-left: var(--space-4);
    border-left: 2px solid var(--bs-cy);
    color: var(--color-text);
    line-height: 1.6;
}
.page-business-solutions .bs-process-note-tag {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-muted);
}

/* --- Двата призива в края на сцена: бутон + тиха връзка --- */
.page-business-solutions .bs-scene-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-3) var(--space-6);
}
.page-business-solutions .bs-text-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
    font-weight: 600;
    color: var(--color-primary-dark);
    text-decoration: underline;
    text-decoration-color: rgba(67, 56, 202, 0.3);
    text-underline-offset: 4px;
}
.page-business-solutions .bs-text-link:hover { text-decoration-color: currentColor; }
.page-business-solutions .bs-text-link-light { color: var(--bs-on-dark); text-decoration-color: rgba(255, 255, 255, 0.3); }
.page-business-solutions .bs-text-link-light:hover { color: #fff; }


/* ---------- 8. Сцена 05 — европейски проекти ----------------------------- */

/* ⚠️ ОТСЕЧКА НА ВСЕКИ ЕТАП, НЕ ЕДНА ЛИНИЯ ПОД ВСИЧКИ (V3). Така пътят се
   пренася заедно с редицата: телефон — вертикален; таблет — две редици по
   четири (седем имена в една редица на 768–1024px се блъскаха); широк
   екран — една редица от седем. */
.page-business-solutions .bs-journey {
    list-style: none;
    display: grid;
    gap: var(--space-4);
    margin: 0 0 var(--space-7);
    padding: 0;
}
.page-business-solutions .bs-jstage { position: relative; min-width: 0; padding-left: 2rem; }
.page-business-solutions .bs-jstage:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 0.42rem;
    top: 1.2rem;
    bottom: calc(-1 * var(--space-4));
    width: 1px;
    background: rgba(196, 181, 253, 0.34);
}
.page-business-solutions .bs-jnode {
    position: absolute;
    left: 0;
    top: 0.3rem;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    border: 2px solid var(--color-accent-soft);
    background: var(--bs-ink);
    transition: background var(--bs-medium) var(--bs-ease), scale var(--bs-medium) var(--bs-ease);
}
.bs-js .page-business-solutions .bs-journey.bs-in .bs-jnode { background: var(--color-accent-soft); scale: 1.1; }
.bs-js .page-business-solutions .bs-journey.bs-in li:nth-child(2) .bs-jnode { transition-delay: calc(var(--bs-stagger) * 1); }
.bs-js .page-business-solutions .bs-journey.bs-in li:nth-child(3) .bs-jnode { transition-delay: calc(var(--bs-stagger) * 2); }
.bs-js .page-business-solutions .bs-journey.bs-in li:nth-child(4) .bs-jnode { transition-delay: calc(var(--bs-stagger) * 3); }
.bs-js .page-business-solutions .bs-journey.bs-in li:nth-child(5) .bs-jnode { transition-delay: calc(var(--bs-stagger) * 4); }
.bs-js .page-business-solutions .bs-journey.bs-in li:nth-child(6) .bs-jnode { transition-delay: calc(var(--bs-stagger) * 5); }
.bs-js .page-business-solutions .bs-journey.bs-in li:nth-child(7) .bs-jnode { transition-delay: calc(var(--bs-stagger) * 6); }

.page-business-solutions .bs-jno {
    margin: 0 0 0.15rem;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: var(--color-accent-soft);
}
.page-business-solutions .bs-jname {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
    hyphens: manual;
}
/* Смисълът на етапа в интегрирания жизнен цикъл (`/eu-projects/`, V4). */
.page-business-solutions .bs-jtext {
    margin: var(--space-2) 0 0;
    max-width: 34ch;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--bs-on-dark);
}
.page-business-solutions .bs-jlist { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.page-business-solutions .bs-jlist li {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--bs-on-dark-quiet);
}
.page-business-solutions .bs-jlist li + li { margin-top: 0.3rem; }

@media (min-width: 48rem) {
    .page-business-solutions .bs-journey {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        row-gap: var(--space-6);
        column-gap: var(--space-4);
    }
    .page-business-solutions .bs-jstage { padding-left: 0; padding-top: 1.9rem; }
    .page-business-solutions .bs-jnode { top: 0; left: 0; }
    .page-business-solutions .bs-jstage:not(:last-child)::before {
        left: 1.2rem;
        right: calc(-1 * var(--space-4));
        top: 0.42rem;
        bottom: auto;
        width: auto;
        height: 1px;
    }
    /* Краят на първата редица — линията не продължава в празното. */
    .page-business-solutions .bs-jstage:nth-child(4)::before { display: none; }
}
/* ---------- 9. Сцена 06 — застраховане ----------------------------------- */

/* ⚠️ КЕХЛИБАРЕНОТО ЖИВЕЕ САМО ТУК и само за срок, който иска внимание.
   В тази сцена циан няма. */
.page-business-solutions .bs-ins { --bs-sig: var(--color-accent); }

/* --- Преглед: карта + четирите групи като ЕДНА композиция --- */
.page-business-solutions .bs-ins-overview {
    display: grid;
    gap: var(--space-6);
    align-items: center;
    margin-bottom: var(--space-8);
}
@media (min-width: 62rem) {
    .page-business-solutions .bs-ins-overview {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        gap: var(--space-7);
    }
}

/* --- Карта на активите и рисковете --- */
.page-business-solutions .bs-riskmap {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    max-width: 34rem;
    margin: 0 auto;
}
.page-business-solutions .bs-riskwires { display: none; }
.page-business-solutions .bs-risk-core {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: var(--space-4);
    border: 1.5px solid var(--color-accent-soft);
    border-radius: var(--bs-r-lg);
    background: linear-gradient(160deg, #fff 0%, var(--color-accent-bg) 100%);
    background-clip: padding-box;
    box-shadow: var(--bs-depth-2);
    text-align: center;
}
.page-business-solutions .bs-risk-core .bs-core-tag { color: var(--color-muted); }
.page-business-solutions .bs-risk-core-name {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
    font-weight: 600;
    color: var(--color-navy);
}
.page-business-solutions .bs-risk-core-sub {
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    color: var(--color-muted);
}
.page-business-solutions .bs-risk-node {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.7rem var(--space-3);
    border: 1px solid var(--bs-hairline);
    border-radius: var(--bs-r-sm);
    background: #fff;
    background-clip: padding-box;
    box-shadow: var(--bs-depth-1);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-navy);
}
.page-business-solutions .bs-rn-mark {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--color-accent-soft);
}
.page-business-solutions .bs-risk-layers {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3) var(--space-5);
    margin: var(--space-5) 0 0;
    padding: 0;
    font-size: 0.75rem;
    color: var(--color-muted);
}
.page-business-solutions .bs-risk-layers li { display: flex; align-items: center; gap: 0.45rem; }
.page-business-solutions .bs-layer-ico {
    width: 12px;
    height: 14px;
    border: 1px solid var(--color-accent-soft);
    border-radius: 2px;
}
.page-business-solutions .bs-layer-time { border-radius: 50%; height: 12px; }
.page-business-solutions .bs-layer-bank { border-radius: 2px 2px 0 0; border-bottom-width: 3px; }

@media (min-width: 56.25rem) {
    /* Лъчева карта: три колони, шест възела около ядрото.
       ⚠️ viewBox 145×100 = `aspect-ratio` на кутията → равномерен мащаб. */
    .page-business-solutions .bs-riskmap {
        grid-template-columns: 24% 1fr 24%;
        grid-template-rows: repeat(3, 1fr);
        column-gap: 6%;
        row-gap: 4%;
        aspect-ratio: 1.45;
        max-width: 52rem;
    }
    .page-business-solutions .bs-riskwires {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }
    .page-business-solutions .bs-risk-lines line {
        stroke: rgba(167, 139, 250, 0.5);
        stroke-width: 0.28;
        stroke-linecap: round;
    }
    .page-business-solutions .bs-risk-ring {
        fill: none;
        stroke: rgba(167, 139, 250, 0.32);
        stroke-width: 0.24;
        stroke-dasharray: 2 3;
    }
    .page-business-solutions .bs-risk-core { grid-column: 2; grid-row: 1 / -1; align-self: center; }
    .page-business-solutions .bs-rn-1 { grid-column: 1; grid-row: 1; }
    .page-business-solutions .bs-rn-2 { grid-column: 1; grid-row: 2; }
    .page-business-solutions .bs-rn-3 { grid-column: 1; grid-row: 3; }
    .page-business-solutions .bs-rn-4 { grid-column: 3; grid-row: 1; }
    .page-business-solutions .bs-rn-5 { grid-column: 3; grid-row: 2; }
    .page-business-solutions .bs-rn-6 { grid-column: 3; grid-row: 3; }
    .page-business-solutions .bs-risk-node { align-self: center; }
}

/* --- Четирите групи: ТИПОГРАФСКИ СПИСЪК, НЕ ЧЕТИРИ КАРТИ ---
   ⚠️ Всеки абзац в своя заоблен правоъгълник превръща страницата в
   „карта-празно-карта-празно“. Тук разделът се държи от ритъма: номер,
   серифно заглавие, един ред, тънка черта. */
.page-business-solutions .bs-insgroups {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--bs-hairline-strong);
}
.page-business-solutions .bs-insgroup {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    column-gap: var(--space-3);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--bs-hairline);
}
.page-business-solutions .bs-insgroup-no {
    grid-row: span 2;
    margin: 0;
    padding-top: 0.15rem;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-accent);
}
.page-business-solutions .bs-insgroup h3 {
    margin: 0 0 0.2rem;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-navy);
}
.page-business-solutions .bs-insgroup p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--color-muted); }
/* Пълният вид (`/insurance/`): две колони на широк екран. */
@media (min-width: 48rem) {
    .page-business-solutions .bs-insgroups-full {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-7);
    }
}

/* --- Съдържание на застрахователните раздели (`/insurance/`) --- */
.page-business-solutions .bs-callout {
    display: flex;
    gap: 0.7rem;
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--bs-r-sm);
    background: var(--color-accent-bg);
    font-weight: 600;
    color: var(--color-accent-dark);
}
.page-business-solutions .bs-callout-mark {
    flex: none;
    width: 10px;
    height: 10px;
    margin-top: 0.42em;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 5px rgba(124, 58, 237, 0.14);
}
.page-business-solutions .bs-highlight {
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--bs-amb);
    border-radius: 0 var(--bs-r-sm) var(--bs-r-sm) 0;
    background: linear-gradient(90deg, rgba(240, 179, 84, 0.12), rgba(240, 179, 84, 0));
    font-family: var(--font-display);
    font-size: 1.0625rem;
    line-height: 1.4;
    color: var(--color-navy);
}
.page-business-solutions .bs-note-small {
    margin-top: var(--space-4);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-muted);
}

/* Схемата на прегледа — вътре в тоналния панел, затова без собствен фон. */
.page-business-solutions .bs-compare { display: grid; gap: var(--space-2); align-content: start; }
.page-business-solutions .bs-cmp-step {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--bs-hairline);
    border-radius: var(--bs-r-sm);
    background: #fff;
}
.page-business-solutions .bs-cmp-tag {
    margin: 0 0 var(--space-2);
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-muted);
}
.page-business-solutions .bs-cmp-doc { display: flex; flex-direction: column; gap: 4px; }
.page-business-solutions .bs-cmp-doc i { height: 4px; border-radius: 2px; background: rgba(30, 27, 58, 0.13); }
.page-business-solutions .bs-cmp-doc i:nth-child(2) { width: 78%; }
.page-business-solutions .bs-cmp-doc i:nth-child(4) { width: 60%; }
.page-business-solutions .bs-cmp-doc-new i { background: var(--color-accent-soft); }
.page-business-solutions .bs-cmp-params ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.page-business-solutions .bs-cmp-params li {
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-accent-bg);
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--color-accent-dark);
}
/* Стрелката е нарисувана с рамка — без текстов знак, зависим от шрифта. */
.page-business-solutions .bs-cmp-arrow {
    position: relative;
    justify-self: center;
    width: 1px;
    height: 1.1rem;
    background: rgba(30, 27, 58, 0.2);
}
.page-business-solutions .bs-cmp-arrow::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    translate: -50% 0;
    width: 6px;
    height: 6px;
    border-right: 1px solid rgba(30, 27, 58, 0.3);
    border-bottom: 1px solid rgba(30, 27, 58, 0.3);
    rotate: 45deg;
}
.page-business-solutions .bs-cmp-result { border-color: var(--color-accent-soft); background: var(--color-accent-bg); }
.page-business-solutions .bs-cmp-out {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-accent-dark);
}
/* --- Веригата при кредит --- */
.page-business-solutions .bs-bankchain {
    list-style: none;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}
.page-business-solutions .bs-bankchain li {
    position: relative;
    padding: 0.5rem 0 0.5rem 1.9rem;
    font-size: 0.875rem;
    color: var(--color-text);
}
.page-business-solutions .bs-bc-node {
    position: absolute;
    left: 0.25rem;
    top: 0.95rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid var(--color-accent-soft);
    background: #fff;
}
.page-business-solutions .bs-bankchain li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 0.53rem;
    top: 1.6rem;
    bottom: -0.35rem;
    width: 1px;
    background: rgba(167, 139, 250, 0.35);
}
.page-business-solutions .bs-bc-alt { font-weight: 700; color: var(--color-navy); }
.page-business-solutions .bs-bc-alt .bs-bc-node { border-color: var(--bs-amb); background: var(--bs-amb); }
.page-business-solutions .bs-bank-result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: var(--space-4) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--bs-hairline);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-navy);
}
.page-business-solutions .bs-bank-result b { color: var(--bs-amb); font-size: 1.1rem; }

/* --- Графика на обслужването --- */
.page-business-solutions .bs-timeline {
    list-style: none;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}
.page-business-solutions .bs-timeline li {
    position: relative;
    padding: 0.55rem 0 0.55rem 1.9rem;
    font-size: 0.875rem;
    color: var(--color-text);
}
.page-business-solutions .bs-tl-node {
    position: absolute;
    left: 0.25rem;
    top: 1rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid var(--color-accent-soft);
    background: #fff;
}
.page-business-solutions .bs-timeline li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 0.53rem;
    top: 1.65rem;
    bottom: -0.3rem;
    width: 1px;
    background: rgba(167, 139, 250, 0.35);
}
/* Кехлибареното е САМО на критичния срок — там, където е и смисълът му.
   Освен цвета: удебелен текст (не само цвят за състоянието). */
.page-business-solutions .bs-tl-crit { font-weight: 700; color: var(--color-navy); }
.page-business-solutions .bs-tl-crit .bs-tl-node { border-color: var(--bs-amb); background: var(--bs-amb); }
.page-business-solutions .bs-tl-human { font-weight: 600; }
.page-business-solutions .bs-tl-human .bs-tl-node { border-color: var(--color-accent); background: var(--color-accent); }
.page-business-solutions .bs-tl-done .bs-tl-node { border-color: var(--color-success); background: var(--color-success); }
.page-business-solutions .bs-care-short {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-navy);
}


/* ---------- 10. Сцена 07 — контакт --------------------------------------- */

.page-business-solutions .bs-contact-grid { display: grid; gap: var(--space-6); }
@media (min-width: 56.25rem) {
    .page-business-solutions .bs-contact-grid {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
        gap: var(--space-8);
        align-items: start;
    }
}
.page-business-solutions .bs-ctx-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 var(--space-4);
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--color-accent-soft);
    border-radius: var(--radius-pill);
    background: var(--color-accent-bg);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-accent-dark);
}
.page-business-solutions .bs-ctx-chip[hidden] { display: none; }
.page-business-solutions .bs-ctx-tag {
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-muted);
}
/* Резюметата са наслагани в една клетка и се сменят без подскок на реда. */
.page-business-solutions .bs-sums { display: grid; margin-bottom: var(--space-5); }
.page-business-solutions .bs-sum {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--bs-fast) var(--bs-ease);
}
.page-business-solutions .bs-sum-unsure { opacity: 1; visibility: visible; }
/* ⚠️ `:has()` ЧЕТЕ ИЗБРАНАТА ОПЦИЯ НА `<select>`-а. Затова резюмето се
   сменя и когато посетителят пипне падащото меню сам, не само когато е
   дошъл по връзка — и всичко това без нито ред JavaScript. */
.page-business-solutions .bs-contact-grid:has(#id_service_area option[value="accounting"]:checked) .bs-sum-unsure,
.page-business-solutions .bs-contact-grid:has(#id_service_area option[value="digital"]:checked) .bs-sum-unsure,
.page-business-solutions .bs-contact-grid:has(#id_service_area option[value="bi"]:checked) .bs-sum-unsure,
.page-business-solutions .bs-contact-grid:has(#id_service_area option[value="eu"]:checked) .bs-sum-unsure,
.page-business-solutions .bs-contact-grid:has(#id_service_area option[value="insurance"]:checked) .bs-sum-unsure {
    opacity: 0;
    visibility: hidden;
}
.page-business-solutions .bs-contact-grid:has(#id_service_area option[value="accounting"]:checked) .bs-sum-accounting,
.page-business-solutions .bs-contact-grid:has(#id_service_area option[value="digital"]:checked) .bs-sum-digital,
.page-business-solutions .bs-contact-grid:has(#id_service_area option[value="bi"]:checked) .bs-sum-bi,
.page-business-solutions .bs-contact-grid:has(#id_service_area option[value="eu"]:checked) .bs-sum-eu,
.page-business-solutions .bs-contact-grid:has(#id_service_area option[value="insurance"]:checked) .bs-sum-insurance {
    opacity: 1;
    visibility: visible;
}
.page-business-solutions .bs-sum-word {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-accent-dark);
}
.page-business-solutions .bs-sum-text { margin: 0; max-width: 44ch; line-height: 1.6; color: var(--color-muted); }

.page-business-solutions .bs-contact-facts {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}
@media (min-width: 34rem) { .page-business-solutions .bs-contact-facts { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); } }
.page-business-solutions .bs-contact-facts dt {
    margin-bottom: 0.2rem;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--color-muted);
}
.page-business-solutions .bs-contact-facts dd { margin: 0; font-weight: 600; color: var(--color-navy); }
.page-business-solutions .bs-contact-facts dd a { white-space: nowrap; }

/* Формата не „потъва“ в голям сенчест панел (V3): тънка рамка, акцентна
   горна черта и почти никаква сянка — фокусът е върху полетата. */
.page-business-solutions .bs-formpanel {
    border: 1px solid var(--bs-hairline);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--bs-r);
    background-clip: padding-box;
    box-shadow: var(--bs-depth-1);
}
/* Фокусът в полето: по-плътна рамка и тънка светлина отвън.
   ⚠️ `box-shadow`, НЕ по-дебела рамка — рамката би преместила
   съдържанието с един пиксел при всяко влизане в поле. */
/* ⚠️ КЛАСЪТ Е `bs-formfield`, А НЕ `bs-field`. `bs-field` е ЗАЕТО от
   декоративния слой на схемата в hero-то, а правилото за широк екран го
   прави `position: absolute; inset: 0; pointer-events: none`. Със същото
   име полетата на формата се наслагваха едно върху друго на цялата ширина
   и не приемаха нито клик, нито въвеждане. */
.page-business-solutions .bs-formfield input:focus,
.page-business-solutions .bs-formfield select:focus,
.page-business-solutions .bs-formfield textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.16);
    outline: none;
}
.page-business-solutions .bs-formfield:focus-within label { color: var(--color-primary-dark); }


/* ---------- 11. Телефон — собствени решения ------------------------------ */

/* Много тесен екран: една колона; разклонението няма къде да се раздели. */
@media (max-width: 23.75rem) {
    .page-business-solutions .bs-map,
    .page-business-solutions .bs-riskmap { grid-template-columns: 1fr; }
    .page-business-solutions .bs-fan-branch { display: none; }
    .page-business-solutions .bs-fan { height: 22px; }
    .page-business-solutions .bs-node { min-height: 0; }
    .page-business-solutions .bs-bridge { width: 88%; }
    .page-business-solutions .bs-bridge-label { letter-spacing: 0.12em; }
}

@media (max-width: 47.5rem) {
    /* Потокът в таблото се пренася на два реда вместо да се смачка. */
    .page-business-solutions .bs-flowrail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-2); }
    .page-business-solutions .bs-flowrail li::before { display: none; }
    .page-business-solutions .bs-flowrail li { padding-top: 0; padding-left: 1.2rem; text-align: left; }
    .page-business-solutions .bs-flowrail li::after { top: 0.15rem; left: 0; translate: 0 0; }

    .page-business-solutions .bs-canvas-modes { padding: 0 var(--space-2); }
    .page-business-solutions .bs-mode { padding: var(--space-3) var(--space-3); font-size: 0.6875rem; }
    .page-business-solutions .bs-mode::after { left: var(--space-3); right: var(--space-3); }

    .page-business-solutions .bs-coords { display: none; }
    .page-business-solutions .bs-intro { margin-bottom: var(--space-6); }
    .page-business-solutions .bs-intro-lead { font-size: 1rem; }
    .page-business-solutions .bs-dir { padding: var(--space-5) var(--space-5) var(--space-4); }
    .page-business-solutions .bs-nav-actions .btn { width: 100%; }
    .page-business-solutions .bs-scene-actions { flex-direction: column; }
    .page-business-solutions .bs-scene-actions .btn { width: 100%; }

    /* ⚠️ ДОПЪЛНИТЕЛНО МЯСТО ОТДОЛУ. Плаващият асистент седи долу вдясно;
       без този отстъп бутонът „Изпратете запитване“ застава под него. */
    .page-business-solutions #bs-contact { padding-bottom: calc(var(--space-8) + 3.5rem); }
}

/* Скрита страница (друг таб, заключен екран) — фоновите системи спират.
   ⚠️ САМО БЕЗКРАЙНИТЕ. Въвеждащите анимации свършват сами. */
.bs-hidden .page-business-solutions .bs-flow,
.bs-hidden .page-business-solutions .bs-atmos-field {
    animation-play-state: paused;
}


/* ---------- 12. Намалено движение ---------------------------------------
   ⚠️ ТУК НЕ СЕ ПРЕПИСВА НИТО ЕДНА КРАЙНА СТОЙНОСТ. Всички въвеждащи
   анимации ползват `backwards`, значи нормалното състояние на всеки
   елемент Е крайното: изключването показва системата наведнъж, изчертана.

   Изчезват: течащите импулси, следите към ядрото, светлинното петно,
   разкриването при скрол, изчертаването на моста, анимираната смяна на
   табовете и отместването на схемата в застрахователния модул.
   Плавното превъртане се изключва от общото правило в styles.css. */
@media (prefers-reduced-motion: reduce) {
    .page-business-solutions *,
    .page-business-solutions *::before,
    .page-business-solutions *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
    .page-business-solutions .bs-flows,
    .page-business-solutions .bs-seeds { display: none; }
    .bs-js .page-business-solutions [data-bs-reveal],
    .bs-js .page-business-solutions [data-bs-reveal] > * {
        opacity: 1;
        transform: none;
    }
    .bs-js .page-business-solutions .bs-process .bs-step::before,
    .bs-js .page-business-solutions .bs-bridge .bs-bridge-bus::before { transform: none; }
}