/*
 * Управління BIM — секції.
 */

/* ── Хіро ───────────────────────────────────────────────────────────────── */
/* Макет 710:1820 (полотно 1922×864). Структура ідентична coord-hero
   (koordynacziya-system) — той самий шаблон секції «Сервіс» у Figma, звідси
   й повторювані значення (badge blur/radius, кнопка тощо). Відмінності
   позначені по місцю. */
.bim-hero {
    position:   relative;
    overflow:   hidden;
    min-height: clamp(560px, 45vw, 864px);
    padding:    40px 0 64px;
    background: linear-gradient(180deg, #02122e 0%, #031d47 100%);
}

.bim-hero__decor {
    position:       absolute;
    inset:          0;
    z-index:        0;
    overflow:       hidden;
    pointer-events: none;
}

.bim-hero__photo {
    position:                 absolute;
    inset:                    0;
    width:                    100%;
    height:                   100%;
    object-fit:                cover;
    /* Той самий прийом, що coord-hero__photo: object-fit:cover кадрує
       по-різному залежно від висоти секції. Раніше тут стояли "сирі"
       стопи з SVG-градієнта макета (0%/28.83% — 100%, 49.27% — 25%,
       61.3% — 1%), застосовані напряму до ширини ЦЬОГО елемента —
       і це було ще одним недокрученим кроком, тим самим, що вже
       виправляли для кропу фото: Figma-градієнт визначений відносно
       контейнера-маски, який bleed'ить на 162px ліворуч за межі
       полотна (ширина контейнера 2083.573px проти 1922px полотна),
       а не відносно простих 0–100% готового елемента. Через це
       "сирі" стопи в критичній зоні 30–65% (де саме стоїть друга
       людина) давали помітно занижену непрозорість. Стопи нижче —
       перераховані в Python: для кожної точки полотна знайдено
       справжню прозорість з оригінального 5-точкового градієнта
       (за офсетом відносно ширини контейнера-bleed), потім
       перевиражено в 0–100% цього елемента. Звірено попіксельно
       (профіль яскравості по стовпцях) з еталонним рендером вузла
       710:1822 (1922×864). */
    -webkit-mask-image:       linear-gradient(270deg,
                                 rgba(255, 255, 255, 1) 0%,
                                 rgba(255, 255, 255, 1) 30%,
                                 rgba(255, 255, 255, .9755) 32%,
                                 rgba(255, 255, 255, .9078) 34%,
                                 rgba(255, 255, 255, .8401) 36%,
                                 rgba(255, 255, 255, .7724) 38%,
                                 rgba(255, 255, 255, .7047) 40%,
                                 rgba(255, 255, 255, .6370) 42%,
                                 rgba(255, 255, 255, .5693) 44%,
                                 rgba(255, 255, 255, .5016) 46%,
                                 rgba(255, 255, 255, .4339) 48%,
                                 rgba(255, 255, 255, .3662) 50%,
                                 rgba(255, 255, 255, .2985) 52%,
                                 rgba(255, 255, 255, .2395) 54%,
                                 rgba(255, 255, 255, .2027) 56%,
                                 rgba(255, 255, 255, .1659) 58%,
                                 rgba(255, 255, 255, .1291) 60%,
                                 rgba(255, 255, 255, .0923) 62%,
                                 rgba(255, 255, 255, .0555) 64%,
                                 rgba(255, 255, 255, .0187) 66%,
                                 rgba(255, 255, 255, .01) 68%,
                                 rgba(255, 255, 255, 0) 100%);
    mask-image:                linear-gradient(270deg,
                                 rgba(255, 255, 255, 1) 0%,
                                 rgba(255, 255, 255, 1) 30%,
                                 rgba(255, 255, 255, .9755) 32%,
                                 rgba(255, 255, 255, .9078) 34%,
                                 rgba(255, 255, 255, .8401) 36%,
                                 rgba(255, 255, 255, .7724) 38%,
                                 rgba(255, 255, 255, .7047) 40%,
                                 rgba(255, 255, 255, .6370) 42%,
                                 rgba(255, 255, 255, .5693) 44%,
                                 rgba(255, 255, 255, .5016) 46%,
                                 rgba(255, 255, 255, .4339) 48%,
                                 rgba(255, 255, 255, .3662) 50%,
                                 rgba(255, 255, 255, .2985) 52%,
                                 rgba(255, 255, 255, .2395) 54%,
                                 rgba(255, 255, 255, .2027) 56%,
                                 rgba(255, 255, 255, .1659) 58%,
                                 rgba(255, 255, 255, .1291) 60%,
                                 rgba(255, 255, 255, .0923) 62%,
                                 rgba(255, 255, 255, .0555) 64%,
                                 rgba(255, 255, 255, .0187) 66%,
                                 rgba(255, 255, 255, .01) 68%,
                                 rgba(255, 255, 255, 0) 100%);
}

/* Статичні розмиті плями — на відміну від coord-hero__glow, тут Figma не
   містить анімаційних даних для цих вузлів (перевірено get_motion_context),
   тож без keyframes. */
.bim-hero__glow {
    position:          absolute;
    display:            block;
    background-repeat:  no-repeat;
    background-size:    100% 100%;
}

.bim-hero__glow--1 {
    top:              calc(51.79% - 710px);
    left:             calc(54.81% - 710px);
    width:            1420px;
    height:           1420px;
    background-image: url('../../img/bim-hero-glow-1.svg');
}

.bim-hero__glow--2 {
    top:              calc(101.34% - 634.335px);
    left:             calc(74.39% - 634.335px);
    width:            1268.67px;
    height:           1268.67px;
    background-image: url('../../img/bim-hero-glow-2.svg');
}

.bim-hero > .container {
    position: relative;
    z-index:  1;
}

.bim-hero__content {
    max-width:      691px;
    /* Відступ від крихт тепер тримає смуга під них (css/main.css). */
    margin-top:     0;
    display:        flex;
    flex-direction: column;
    gap:            40px;
}

.bim-hero__intro {
    display:        flex;
    flex-direction: column;
        /* Спільний ритм угорі сторінки: надзаголовок → 20 → H1 → 26 → лід. */
    gap:            20px;
    width:          100%;
}

/* Власний eyebrow (не спільний .section-eyebrow) — за макетом тут інший
   розмір/колір, точнісінько як .hero__eyebrow на Головній. */
/* Надзаголовок — спільний компонент теми (13px / 600 / 1.82px / 18px).
   Тут лишаємо тільки колір і розкладку, типографіку не чіпаємо: інакше
   на кожній сторінці він був би свого розміру. */
.bim-hero__eyebrow {
    display:        flex;
    align-items:    center;
    gap:            10px;
    padding:        10px 0;
    text-transform: uppercase;
}

.bim-hero__dot {
    flex:          none;
    width:         14px;
    height:        14px;
    border-radius: 4px;
    background:    var(--color-yellow);
}

.bim-hero__title {
    margin:         0;
    font-size:      clamp(28px, 1rem + 2.4vw, 56px);
    font-weight:    300;
    line-height:    1.2;
    letter-spacing: clamp(-1.12px, -0.02em, -0.4px);
    color:          #b8d1ff;
    overflow-wrap:  break-word;
    /* У Figma-макеті цей параграф має клас capitalize (codegen) — кожне
       слово з великої літери, навіть у кириличному тексті. */
    text-transform: capitalize;
}

/* Градієнт заголовків — загальносайтовий токен --gradient-accent.
   Раніше тут стояли ті самі стопи «сирими» хексами (38.46% замість
   38.462%): codegen не показував прив'язки до стилю, тож значення
   переносились як є. Візуально різниці не було, але на сторінці
   співіснували два написання одного градієнта.
   тобто #008eee/#acd5ff/#fcc891 — це і є справжні дані макета, не
   завищені числа з рендера. Раніше тут стояла попіксельно "виправлена"
   версія (#008eee/#8ec9fc/#e4cbb0) — хибна, бо семпл знімався з
   растрового PNG-експорту (втрати на стиску/композиції), а не зі
   значення заливки. */
.bim-hero__title .is-accent {
    /* display:inline-block, а не звичайний inline — з ним третій рядок
       ("проєктів") фарбувався жовтим/бежевим замість синього. Причина:
       для звичайного inline-елемента, що переноситься на кілька рядків,
       браузер рахує 0–100% градієнта по СУМАРНІЙ ширині всіх фрагментів
       (ніби рядки склеєні в один), тому останній рядок потрапляв у кінець
       градієнта. У Figma інша модель — 0–100% рахується по НАЙШИРШОМУ
       рядку (bounding box), тому "Projects"/"проєктів" лишається синім.
       inline-block перемикає brauzer саме на цю, другу модель — перевірено
       ізольовано (двома варіантами поруч) перед деплоєм. */
    display:                  inline-block;
    font-weight:              600;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                    transparent;
    -webkit-text-fill-color: transparent;
}

.bim-hero__text {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    font-size:      16px;
    line-height:    1.6;
    color:          #b8d1ff;
}

.bim-hero__text strong { font-weight: 600; }

.bim-hero__list-block {
    display:        flex;
    flex-direction: column;
    gap:            24px;
    width:          100%;
}

/* На відміну від coord-hero__list-title — тут звичайний колір, без
   градієнта (так у макеті: "Benefits" не акцентний). */
.bim-hero__list-title {
    margin:         0;
    font-size:      16px;
    font-weight:    600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color:          #b8d1ff;
}

.bim-hero__list {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    margin:         0;
    padding:        0;
    list-style:     none;
}

.bim-hero__list-item {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   16px;
    line-height: 1.6;
    color:       #b8d1ff;
}

.bim-hero__list-item .icon { flex: none; }
.bim-hero__list-item strong { font-weight: 600; }

.bim-hero__actions {
    display:   flex;
    flex-wrap: wrap;
    gap:       16px;
}

.bim-hero__btn {
    height:  56px;
    padding: 14px 34px;
}

.bim-hero__badges {
    position:       absolute;
    z-index:        1;
    right:           calc(max(20px, (100% - var(--container-width)) / 2 + 20px));
    bottom:         64px;
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    gap:            8px;
    margin:         0;
    padding:        0;
    list-style:     none;
}

.bim-hero__badge {
    display:                  flex;
    align-items:              center;
    gap:                      8px;
    padding:                  10px 16px;
    border:                   1px solid rgba(119, 198, 255, .3);
    border-radius:            50px;
    background:               rgba(5, 8, 20, .5);
    backdrop-filter:          blur(87px);
    -webkit-backdrop-filter:  blur(87px);
    font-size:                14px;
    line-height:              1.4;
    color:                    #b8d1ff;
    white-space:              nowrap;
}

.bim-hero__badge .icon { flex: none; color: #77c6ff; }
.bim-hero__badge strong { font-weight: 600; }

@media (max-width: 1024px) {
    .bim-hero              { padding: 32px 0 48px; }
    .bim-hero__content     { max-width: 100%; gap: 28px; }
    .bim-hero__title       { font-size: clamp(26px, 4vw, 40px); }
    .bim-hero__badges      { position: static; align-items: flex-start; margin-top: 32px; padding: 0 20px; }
    .bim-hero__badge       { white-space: normal; }
}

@media (max-width: 768px) {
    .bim-hero          { padding: 24px 0 40px; }
    /* margin-top прибрано: відступ від крихт тримає смуга під них. */
    .bim-hero__content { gap: 20px; }
    .bim-hero__actions { flex-direction: column; align-items: stretch; }
    .bim-hero__btn     { width: 100%; }
    .bim-hero__badges  { margin-top: 24px; padding: 0 16px; }
}

/* ── Навіщо потрібне управління BIM ────────────────────────────────────── */
/* Макет 710:1907 (полотно 1922×1310, одразу під хіро). Картки й іконки-
   бейджі — той самий стиль, що .coord-definition-card/.coord-definition__result
   на koordynacziya-system (звірено з Figma-дампом цього вузла один-в-один:
   border #20345e, radius 24px, той самий градієнт фону й box-shadow) — тут
   під власним неймингом секції, бо в проєкті картки з іконками не винесені
   у спільний клас (той самий підхід, що definition-card був скопійований
   з experience-card на Головній — кожна секція тримає свою копію). */
.bim-why {
    position:   relative;
    overflow:   hidden;
    padding:    120px 0;
    background: #031d47;
}

.bim-why__decor {
    position:       absolute;
    bottom:         0;
    left:           0;
    z-index:        0;
    width:          780px;
    height:         780px;
    opacity:        .4;
    pointer-events: none;
}

.bim-why__orb {
    /* Файл — уже готовий Figma-рендер вузла 727:2016 (включно з власним
       дзеркалюванням шару всередині макета), тож живе scaleX(-1) тут
       НЕ потрібне — воно розвернуло б контент вдруге, у протилежний
       від задуманого бік (геть від лівого краю секції, а не до нього). */
    display:   block;
    width:     100%;
    height:    100%;
    object-fit: cover;
}

.bim-why > .container {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    gap:            40px;
}

.bim-why__title {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            22px;
    width:          100%;
    max-width:      1322px;
    margin:         0 auto;
    text-align:     center;
}

.bim-why__heading {
    margin:         0;
    font-size:      clamp(28px, 1rem + 2.4vw, 48px);
    font-weight:    300;
    line-height:    1.2;
    letter-spacing: -.5px;
    color:          #b8d1ff;
}

/* Той самий "raw" градієнт (не токен --gradient-accent), що .bim-hero__title
   .is-accent — get_variable_defs на цьому вузлі теж не знайшов bound-стилю,
   лише пряму заливку з тими самими стопами. inline-block з тієї ж причини,
   що в хіро: захист від бага з градієнтом на багаторядковому inline. */
.bim-why__heading .is-accent {
    display:                  inline-block;
    font-weight:              600;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                    transparent;
    -webkit-text-fill-color: transparent;
}

.bim-why__intro {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    max-width:      956px;
    font-size:      18px;
    line-height:    1.6;
    letter-spacing: -.1px;
    color:          #b7c3de;
}

.bim-why__intro p { margin: 0; }

.bim-why__callout {
    display:                  flex;
    align-items:              center;
    gap:                      30px;
    width:                    100%;
    padding:                  24px;
    border:                   1px solid #20345e;
    border-radius:            24px;
    background-image:        linear-gradient(178deg, rgba(30, 50, 97, .8) 0%, rgba(20, 36, 73, .94) 78.125%);
    backdrop-filter:          blur(17px);
    -webkit-backdrop-filter:  blur(17px);
}

.bim-why__callout-img {
    display:       block;
    flex:          none;
    width:         90px;
    height:        90px;
    border-radius: 10px;
    object-fit:    cover;
}

.bim-why__callout-text {
    flex:           1 0 0;
    margin:         0;
    font-size:      18px;
    line-height:    1.6;
    letter-spacing: -.1px;
    color:          #b7c3de;
}

.bim-why__callout-text strong { font-weight: 600; }

.bim-why__cards-block {
    display:        flex;
    flex-direction: column;
    gap:            24px;
    width:          100%;
}

.bim-why__leadin {
    margin:                   0;
    font-size:                24px;
    font-weight:              600;
    line-height:              1.6;
    letter-spacing:           -.1px;
    text-align:               center;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                    transparent;
    -webkit-text-fill-color: transparent;
}

.bim-why__cards {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   24px;
    width:                 100%;
}

.bim-why-card {
    display:          flex;
    flex-direction:   column;
    align-items:      flex-start;
    gap:              16px;
    padding:          30px;
    border:           1px solid #20345e;
    border-radius:    24px;
    background-image: linear-gradient(171.3deg, rgba(30, 50, 97, .8) 0%, rgba(20, 36, 73, .94) 78.125%);
    box-shadow:       0 20px 60px -20px rgba(6, 9, 26, .75);
    transition:       border-color var(--transition), box-shadow var(--transition);
}

.bim-why-card:hover {
    border-color: #5c8cd0;
    box-shadow:   0 22px 74px -26px rgba(45, 140, 255, .95);
}

.bim-why-card__icon {
    display:                  inline-flex;
    flex:                     none;
    align-items:              center;
    justify-content:          center;
    width:                    45.5px;
    height:                   45.5px;
    padding:                  13px;
    border:                   1px solid rgba(124, 168, 255, .25);
    border-radius:            15px;
    background-image:        linear-gradient(150.11deg, rgba(76, 141, 255, .2) 0%, rgba(139, 92, 246, .12) 72.993%);
    transition:                transform var(--transition), border-color var(--transition), background-image var(--transition);
}

.bim-why-card__icon .icon {
    display: block;
    width:   100%;
    height:  100%;
}

.bim-why-card:hover .bim-why-card__icon {
    transform:         rotate(-4deg);
    border-color:      rgba(245, 165, 36, .26);
    background-image:  linear-gradient(150.11deg, rgba(245, 165, 36, .2) 0%, rgba(255, 122, 52, .1) 72.99%);
}

.bim-why-card__text {
    margin:      0;
    font-size:   18px;
    line-height: 1.6;
    color:       var(--color-text-light);
}

@media (max-width: 1024px) {
    .bim-why               { padding: 100px 0 80px; }
    .bim-why > .container  { gap: 32px; }
    .bim-why__heading      { font-size: clamp(26px, 4vw, 36px); }
    .bim-why__leadin       { font-size: 20px; }
    .bim-why__cards        { grid-template-columns: repeat(2, 1fr); }
    .bim-why__callout      { flex-direction: column; align-items: flex-start; text-align: left; }
    .bim-why__decor        { width: 560px; height: 560px; }
}

@media (max-width: 768px) {
    .bim-why             { padding: 64px 0 48px; }
    .bim-why__intro      { font-size: 16px; }
    .bim-why__leadin     { font-size: 18px; }
    .bim-why__cards      { grid-template-columns: 1fr; }
    .bim-why__callout     { padding: 20px; gap: 16px; }
    .bim-why__callout-img { width: 64px; height: 64px; }
    .bim-why__decor       { width: 420px; height: 420px; opacity: .3; }
}

/* ── Проблеми без BIM Management + CDE ─────────────────────────────────── */
/* Макет 710:2067 (полотно 1922×1181). Іконка списку — перевикористаний
   close-fill (той самий glyph, що coord-seo__block--clash), лише колір
   заново заданий тут через .rich-check .icon override — той самий
   патерн, що вже є в css/pages/koordynacziya-system.css. Ватермарк
   "Group 1" (ледь помітний blueprint-контур позаду діаграми) свідомо
   не переносив — на пласкому рендері вузла він практично не читається,
   а два кутові glow вже дають потрібну атмосферу. */
.bim-challenges {
    position:   relative;
    overflow:   hidden;
    padding:    120px 0;
    background: #031d47;
}

.bim-challenges__decor {
    position:       absolute;
    inset:          0;
    z-index:        0;
    overflow:       hidden;
    pointer-events: none;
}

.bim-challenges__glow {
    position:         absolute;
    display:          block;
    width:            1175px;
    height:           933px;
    background-repeat: no-repeat;
    background-size:  100% 100%;
}

.bim-challenges__glow--1 {
    top:              0;
    left:             0;
    background-image: url('../../img/bim-challenges-glow-1.svg');
}

.bim-challenges__glow--2 {
    top:              679px;
    left:             1016px;
    background-image: url('../../img/bim-challenges-glow-2.svg');
}

.bim-challenges > .container {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    gap:            60px;
}

/* Акцент переноситься на два рядки, тому градієнт живе на БЛОЦІ заголовка,
   а не на .is-accent — так само, як у .hero__title на Головній. Для
   інлайнового елемента браузер малює фон по СУМАРНІЙ ширині фрагментів, і
   другий рядок стартує з середини градієнта (блідим). Figma кладе градієнт
   на бокс текстового шару, і кожен рядок бере свій відрізок за своїм x.
   Заголовок центрований, тож короткий рядок бере середину — як у макеті. */
.bim-challenges__heading {
    margin:         0;
    font-size:      clamp(28px, 1rem + 2.4vw, 48px);
    font-weight:    300;
    line-height:    1.083;
    letter-spacing: -1.5px;
    color:          #b8d1ff;
    -webkit-text-fill-color: #b8d1ff;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    text-align:     center;
}

/* Прив'язано до стилю "Gradient-2" у Figma (get_variable_defs) — той
   самий токен, що .bim-why__leadin, не "сирі" стопи, як у заголовків
   хіро/«Навіщо». */
.bim-challenges__heading .is-accent {
    font-weight:              600;
    /* Прозорий фарб — крізь нього видно градієнт заголовка. */
    color:                    transparent;
    -webkit-text-fill-color: transparent;
}

.bim-challenges__row {
    display: flex;
    gap:     80px;
    width:   100%;
}

.bim-challenges__list {
    display:        flex;
    flex:           1 0 0;
    min-width:      0;
    flex-direction: column;
    justify-content: center;
    gap:            16px;
}

.bim-challenges__list .rich-text p {
    margin:         0;
    font-size:      16px;
    font-weight:    600;
    line-height:    1.6;
    letter-spacing: -.1px;
    color:          #b8d1ff;
}

.bim-challenges__list .rich-check { --rich-icon: 24px; }
.bim-challenges__list .rich-check .icon { color: #f0342c; }
.bim-challenges__list .rich-check span {
    font-size:      15.2px;
    line-height:    1.6;
    color:          #b8d1ff;
}

.bim-challenges__figure {
    flex:          1 0 0;
    min-width:     0;
    margin:        0;
    aspect-ratio:  621 / 292;
    overflow:      hidden;
    border:        1px solid #203458;
    border-radius: 24px;
    background:    rgba(11, 22, 43, .6);
}

.bim-challenges__diagram-img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.bim-challenges__cde {
    display:        flex;
    flex-direction: column;
    gap:            40px;
    width:          100%;
}

.bim-challenges__cde-title {
    margin:                   0;
    font-size:                24px;
    font-weight:              600;
    line-height:              1.6;
    letter-spacing:           -.1px;
    text-align:               center;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                    transparent;
    -webkit-text-fill-color: transparent;
}

.bim-challenges__cde-row {
    display:     flex;
    align-items: center;
    gap:         80px;
    width:       100%;
}

.bim-challenges__cde-figure {
    flex:          1 0 0;
    min-width:     0;
    margin:        0;
    aspect-ratio:  648 / 360;
    overflow:      hidden;
    border:        1px solid #203458;
    border-radius: 24px;
    background:    #000e2d;
    display:       flex;
    align-items:   center;
    justify-content: center;
}

.bim-challenges__cde-diagram-img {
    display:    block;
    width:      100%;
    height:     auto;
    object-fit: contain;
}

.bim-challenges__cde-col {
    display:        flex;
    flex:           1 0 0;
    min-width:      0;
    flex-direction: column;
    gap:            32px;
}

.bim-challenges__cde-text {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    font-size:      16px;
    line-height:    1.6;
    letter-spacing: -.1px;
    color:          #b8d1ff;
}

.bim-challenges__cde-text p { margin: 0; }
.bim-challenges__cde-text strong { font-weight: 600; }

.bim-challenges__cde-callout {
    margin:                   0;
    padding:                  24px;
    border:                   1px solid #20345e;
    border-radius:            24px;
    background-image:        linear-gradient(176.3deg, rgba(30, 50, 97, .8) 0%, rgba(20, 36, 73, .94) 78.125%);
    backdrop-filter:          blur(17px);
    -webkit-backdrop-filter:  blur(17px);
    font-size:                18px;
    font-weight:              600;
    line-height:              1.6;
    letter-spacing:           -.1px;
    color:                    #77c6ff;
}

@media (max-width: 1024px) {
    .bim-challenges              { padding: 100px 0 80px; }
    .bim-challenges > .container { gap: 48px; }
    .bim-challenges__heading     { font-size: clamp(26px, 4vw, 36px); }
    .bim-challenges__row,
    .bim-challenges__cde-row     { flex-direction: column; gap: 32px; }
    /* flex:none обов'язковий: у flex-direction:column базове flex:1 0 0
       рахує flex-basis:0 ПО ВЕРТИКАЛІ, а сам .bim-challenges__row не має
       власної висоти (задається вмістом) — без вільного місця для
       flex-grow фігура лишається на flex-basis, тобто ~0px, і
       aspect-ratio її вже не рятує. Той самий фікс, що вже стоїть в
       .coord-seo__figure--fill на тому самому переході в колонку. */
    .bim-challenges__figure,
    .bim-challenges__cde-figure  { flex: none; width: 100%; }
    .bim-challenges__cde-title   { font-size: 20px; }
    .bim-challenges__glow        { width: 820px; height: 652px; }
    .bim-challenges__glow--2     { top: 480px; left: auto; right: -200px; }
}

@media (max-width: 768px) {
    .bim-challenges            { padding: 64px 0 48px; }
    .bim-challenges > .container { gap: 40px; }
    .bim-challenges__list .rich-text p { font-size: 15px; }
    .bim-challenges__cde-callout { padding: 20px; font-size: 16px; }
}

/* ── Що входить у послугу управління BIM + CTA ─────────────────────────── */
/* Макет 710:2043 (полотно 1922×1494). Глоу — та сама пляма, що
   .bim-challenges__glow--1 (звірено попіксельно: однакові координати
   й path, різниться лише filter-id — косметика самого Figma-експорту),
   тому файл перевикористаний, не завантажений вдруге. CTA-блок —
   один-в-один .coord-process__cta (parity-check): той самий бордер,
   градієнт фону, пара кнопок. */
.bim-scope {
    position:   relative;
    overflow:   hidden;
    padding:    120px 0;
    background: #031d47;
}

.bim-scope__decor {
    position:       absolute;
    inset:          0;
    z-index:        0;
    overflow:       hidden;
    pointer-events: none;
}

.bim-scope__glow {
    position:          absolute;
    top:               0;
    left:              0;
    display:           block;
    width:             1175px;
    height:            933px;
    background-image:  url('../../img/bim-challenges-glow-1.svg');
    background-repeat: no-repeat;
    background-size:   100% 100%;
}

.bim-scope__bg {
    position:          absolute;
    display:           block;
    background-repeat: no-repeat;
    background-size:   contain;
    opacity:           .5;
}

.bim-scope__bg--1 {
    top:              349px;
    left:             0;
    width:            576px;
    height:           531px;
    background-image: url('../../img/bim-scope-bg-1.svg');
}

.bim-scope__bg--2 {
    top:              0;
    right:            0;
    width:            608px;
    height:           569px;
    background-image: url('../../img/bim-scope-bg-2.svg');
}

.bim-scope > .container {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            40px;
}

.bim-scope__title {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            22px;
    width:          100%;
    max-width:      1322px;
    text-align:     center;
}

.bim-scope__heading {
    margin:         0;
    font-size:      clamp(28px, 1rem + 2.4vw, 48px);
    font-weight:    300;
    line-height:    1.083;
    letter-spacing: -1.5px;
    color:          #b8d1ff;
}

/* "Сирий" градієнт (get_variable_defs без bound-стилю) — той самий
   патерн, що .bim-hero/.bim-why/.bim-challenges заголовки. */
.bim-scope__heading .is-accent {
    display:                  inline-block;
    font-weight:              600;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                    transparent;
    -webkit-text-fill-color: transparent;
}

.bim-scope__intro {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    max-width:      900px;
    font-size:      18px;
    line-height:    1.6;
    letter-spacing: -.1px;
    color:          #b8d1ff;
}

.bim-scope__intro p { margin: 0; }

.bim-scope__leadin {
    margin:                   0;
    max-width:                900px;
    font-size:                24px;
    font-weight:              600;
    line-height:              1.6;
    letter-spacing:           -.1px;
    text-align:               center;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                    transparent;
    -webkit-text-fill-color: transparent;
}

.bim-scope__cards {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   24px;
    width:                 100%;
}

.bim-scope-card {
    display:          flex;
    flex-direction:   column;
    align-items:      flex-start;
    gap:              16px;
    padding:          30px;
    border:           1px solid #20345e;
    border-radius:    24px;
    background-image: linear-gradient(166deg, rgba(30, 50, 97, .8) 0%, rgba(20, 36, 73, .94) 78.125%);
    box-shadow:       0 20px 60px -20px rgba(6, 9, 26, .75);
    transition:       border-color var(--transition), box-shadow var(--transition);
}

.bim-scope-card:hover {
    border-color: #5c8cd0;
    box-shadow:   0 22px 74px -26px rgba(45, 140, 255, .95);
}

.bim-scope-card__icon {
    display:                  inline-flex;
    flex:                     none;
    align-items:              center;
    justify-content:          center;
    width:                    45.5px;
    height:                   45.5px;
    padding:                  13px;
    border:                   1px solid rgba(124, 168, 255, .25);
    border-radius:            15px;
    background-image:        linear-gradient(150.11deg, rgba(76, 141, 255, .2) 0%, rgba(139, 92, 246, .12) 72.993%);
    transition:                transform var(--transition), border-color var(--transition), background-image var(--transition);
}

.bim-scope-card__icon .icon {
    display: block;
    width:   100%;
    height:  100%;
}

.bim-scope-card:hover .bim-scope-card__icon {
    transform:         rotate(-4deg);
    border-color:      rgba(245, 165, 36, .26);
    background-image:  linear-gradient(150.11deg, rgba(245, 165, 36, .2) 0%, rgba(255, 122, 52, .1) 72.99%);
}

.bim-scope-card__title {
    margin:         0;
    font-size:      18px;
    font-weight:    600;
    line-height:    1.6;
    color:          #fff;
}

.bim-scope-card__num { color: #76c6ff; }

.bim-scope-card__text {
    margin:      0;
    font-size:   16px;
    line-height: 1.6;
    color:       var(--color-text-light);
}

.bim-scope__cta {
    margin-top:       20px;
    width:            100%;
    padding:          40px;
    border:           1px solid #2d79e8;
    border-radius:    20px;
    background-image: linear-gradient(176.96deg,
                          rgba(30, 50, 97, .8) 0%, rgba(20, 36, 73, .94) 78.13%),
                      linear-gradient(90deg, #0c1c3e 0%, #0c1c3e 100%);
}

.bim-scope__cta-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             40px;
    padding:         0 40px;
}

.bim-scope__cta-text {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    max-width:      573px;
}

.bim-scope__cta-title {
    width:                   fit-content;
    max-width:               100%;
    margin:                  0;
    font-size:               32px;
    font-weight:             600;
    line-height:             52px;
    letter-spacing:          -1.5px;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                    transparent;
    -webkit-text-fill-color: transparent;
}

.bim-scope__cta-lead {
    margin:      0;
    font-size:   15.2px;
    line-height: 1.6;
    color:       var(--color-text-light);
}

.bim-scope__cta-actions {
    flex:        none;
    display:     flex;
    align-items: center;
    gap:         12px;
}

.bim-scope__cta-btn {
    justify-content: center;
    min-width:       261px;
    height:          56px;
    padding:         14px 32px;
    border-radius:   12px;
}

.bim-scope__cta-btn--outline {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    min-width:       241px;
    height:          56px;
    padding:         14px 26px;
    border:          1px solid rgba(119, 198, 255, .5);
    border-radius:   12px;
    background:      rgba(5, 8, 20, .3);
    box-shadow:      0 7px 6.5px rgba(0, 0, 0, .1);
    color:           #77c6ff;
    font-size:       16px;
    font-weight:     600;
    letter-spacing:  .32px;
    text-decoration: none;
    transition:      border-color var(--transition);
}

.bim-scope__cta-btn--outline:hover,
.bim-scope__cta-btn--outline:active,
.bim-scope__cta-btn--outline:focus-visible { border-color: #77c6ff; }

@media (max-width: 1200px) {
    .bim-scope__cta-inner { padding: 0; }
}

@media (max-width: 1024px) {
    .bim-scope                 { padding: 100px 0 80px; }
    .bim-scope > .container    { gap: 32px; }
    .bim-scope__heading        { font-size: clamp(26px, 4vw, 36px); }
    .bim-scope__leadin         { font-size: 20px; }
    .bim-scope__cards          { grid-template-columns: repeat(2, 1fr); }
    .bim-scope__cta            { margin-top: 8px; padding: 32px; }
    .bim-scope__cta-inner      { flex-direction: column; align-items: flex-start; gap: 24px; }
    .bim-scope__cta-text       { max-width: none; }
    .bim-scope__cta-title      { font-size: 28px; line-height: 1.25; letter-spacing: -.8px; }
    .bim-scope__cta-actions    { flex-wrap: wrap; }
    .bim-scope__bg--1          { width: 320px; height: 295px; }
    .bim-scope__bg--2          { width: 340px; height: 318px; }
}

@media (max-width: 768px) {
    .bim-scope              { padding: 64px 0 48px; }
    .bim-scope__cards       { grid-template-columns: 1fr; }
    .bim-scope__cta         { padding: 24px; }
    .bim-scope__cta-title   { font-size: 26px; }
    .bim-scope__cta-actions { flex-direction: column; align-items: stretch; width: 100%; }
    .bim-scope__cta-btn,
    .bim-scope__cta-btn--outline { width: 100%; min-width: 0; }
    .bim-scope__bg          { display: none; }
}

/* ── Управління проєктними даними в BIM ────────────────────────────────── */
/* Макет 710:2195 (полотно 1922×1634). Картки програм/платформ —
   parity-check з .coord-formats-card/.coord-formats-format
   (koordynacziya-system): та сама структура "картка → рядок плиток
   icon+label", другий рядок з платформами переноситься по 3. Плитки
   тут — не окремий icon+бокс, а вже готові композитні растри (Figma-
   рендер вузла цілком: бокс+бордер+лого), тому власного mask-fade під
   уніфікований фон картки не робив — кожна плитка самодостатня. Орб-
   декор — той самий прийом, що .bim-why__decor: готовий Figma-рендер
   вузла (bottom+right вже "запечені" в растр), без live scaleX/mirror. */
.bim-pdm {
    position:   relative;
    overflow:   hidden;
    padding:    40px 0 120px;
    background: #031d47;
}

.bim-pdm__decor {
    position:       absolute;
    inset:          0;
    z-index:        0;
    overflow:       hidden;
    pointer-events: none;
}

/* top, не bottom: bottom:1155px рахувався від фактичної (перекладом
   розтягнутої) висоти секції — тому орб з'їжджав нижче задуманого.
   top:-301px прив'язаний до ВЕРХА секції (де він і в макеті, біля
   заголовка) і не залежить від того, наскільки контент довший за
   Figma-макет. Без CSS opacity: сам растр — це вже Figma-рендер вузла
   710:2196 РАЗОМ із власним opacity-40 шару (перевірено попіксельно:
   середня яскравість мого експорту й ділянки того самого орба в
   контекстному рендері секції збігається, 22.7 проти 23.9) — зайвий
   opacity:.4 в CSS дублював затемнення вдвічі (~16% замість 40%). Той
   самий клас помилки, що подвійне дзеркалення .bim-why__orb раніше:
   властивість шару, вже "запечена" в растр, не повторюється в CSS.
   mask-image — ліва (порожня) половина растра трохи темніша/тепліша за
   фон секції (2,23,61 проти 3,29,71) і без маски це читалось як ледь
   помітний прямокутний край; тепер згасає в прозорість до того, як
   різниця стає видимою. */
.bim-pdm__orb {
    position:           absolute;
    right:              0;
    top:                -301px;
    width:              780px;
    height:             780px;
    display:            block;
    -webkit-mask-image: linear-gradient(90deg,
                            transparent 0%, transparent 35%, #000 60%, #000 100%);
    mask-image:         linear-gradient(90deg,
                            transparent 0%, transparent 35%, #000 60%, #000 100%);
}

/* Вузол "Group 1" (710:2199) — не blueprint-контур (як я спершу вирішив
   пропустити за аналогією з попередньою секцією), а дві м'які розмиті
   кольорові плями (стандартний SVG-glow, feGaussianBlur 167). Видиме
   вікно 1099×700 — це crop у більшу 1784.5×1339.34 SVG-картинку, з тим
   самим bleed-офсетом, що й у Figma (inset -46.55%/-31.18%/-44.69%/
   -31.18% відносно вікна). */
/* Маска — з тієї ж причини, що в .bim-types__watermark нижче: вікно ріже
   блюр, який на його межах ще не згас (альфа 14/255 по верху, 10 по низу,
   3-6 по боках — заміряно через canvas), і виходить рівний прямокутник із
   видимим краєм рівно на межі секцій. Дефект тут був від початку, знайшовся
   при розборі того самого краю в сусідній секції. */
.bim-pdm__watermark {
    position: absolute;
    left:     411px;
    top:      1px;
    width:    1099px;
    height:   700px;
    overflow: hidden;
    -webkit-mask-image: radial-gradient(ellipse closest-side,
                            #000 38%, rgba(0, 0, 0, .55) 70%, transparent 100%);
    mask-image:         radial-gradient(ellipse closest-side,
                            #000 38%, rgba(0, 0, 0, .55) 70%, transparent 100%);
}

.bim-pdm__watermark-img {
    position: absolute;
    left:     -343px;
    top:      -326px;
    width:    1784.5px;
    height:   1339.34px;
    max-width: none;
}

.bim-pdm > .container {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            60px;
}

.bim-pdm__title {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            22px;
    width:          100%;
    max-width:      1322px;
    text-align:     center;
}

.bim-pdm__heading {
    margin:         0;
    font-size:      clamp(28px, 1rem + 2.4vw, 48px);
    font-weight:    300;
    line-height:    1.208;
    letter-spacing: -1.5px;
    color:          #b8d1ff;
}

.bim-pdm__heading .is-accent {
    display:                  inline-block;
    font-weight:              600;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                    transparent;
    -webkit-text-fill-color: transparent;
}

.bim-pdm__subtitle {
    margin:         0;
    max-width:      1322px;
    font-size:      18px;
    font-weight:    600;
    line-height:    1.6;
    color:          #fff;
}

.bim-pdm__intro-row {
    display:     flex;
    align-items: center;
    gap:         80px;
    width:       100%;
}

.bim-pdm__figure {
    flex:          1 0 0;
    min-width:     0;
    margin:        0;
    aspect-ratio:  620 / 420;
    overflow:      hidden;
    border:        1px solid #20345e;
    border-radius: 24px;
}

.bim-pdm__diagram-img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.bim-pdm__text {
    display:        flex;
    flex:           1 0 0;
    min-width:      0;
    flex-direction: column;
    gap:            20px;
    font-size:      16px;
    line-height:    1.6;
    letter-spacing: -.1px;
    color:          #b8d1ff;
}

.bim-pdm__text p { margin: 0; }

.bim-pdm__text-highlight {
    font-size:   18px;
    font-weight: 600;
    color:       #77c6ff;
}

.bim-pdm__cards {
    display:     flex;
    align-items: stretch;
    gap:         24px;
    width:       100%;
}

.bim-pdm-card {
    display:                  flex;
    flex-direction:           column;
    align-items:              flex-start;
    gap:                      16px;
    padding:                  28px;
    border:                   1px solid #20345e;
    border-radius:            24px;
    background:               #011231;
    backdrop-filter:          blur(17px);
    -webkit-backdrop-filter:  blur(17px);
}

/* items-center у макеті: заголовок і обидва лого-блоки центровані по
   горизонталі, самі блоки йдуть один під одним (flex-col), а не в ряд —
   вузол 783:2509/783:2517 у Figma це окремі САМОСТІЙНІ діти картки, не
   пункти спільного рядка (виправлено після правки користувача — раніше
   тут помилково стояв .bim-pdm-card__row, що клав Revit і AutoCAD
   поряд, хоча в макеті вони стоять один під одним). */
.bim-pdm-card--narrow { flex: none; width: 386px; align-items: center; }
.bim-pdm-card--wide   { flex: 1 0 0; min-width: 0; }

.bim-pdm-card__title {
    margin:         0;
    font-size:      20px;
    font-weight:    600;
    line-height:    1.4;
    letter-spacing: -.4px;
    color:          #b8d1ff;
}

/* Grid, не flex+wrap: із flex:1 1 <%> сирітський елемент, що
   переноситься сам на новий рядок (напр. 3-й пункт при переносі по 2),
   лишається без сусідів по флекс-лінії й розтягується flex-grow-ом на
   всю ширину рядка (звідси й aspect-ratio роздувала його по висоті
   в кілька разів). Grid з фіксованою кількістю колонок (--cols, із
   PHP — реальна кількість пунктів у рядку) віддає кожній плитці рівно
   одну комірку незалежно від переносу. */
.bim-pdm-card__row {
    display:               grid;
    grid-template-columns: repeat(var(--cols, 3), 1fr);
    gap:                   16px;
    width:                 100%;
}

.bim-pdm-card__row + .bim-pdm-card__row { margin-top: 16px; }

.bim-pdm-format {
    min-width:      0;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            16px;
}

.bim-pdm-format--stacked { width: 272px; max-width: 100%; }

/* Бокс логотипа. У макеті (вузол 710:2210) його висота ЗАВЖДИ 200px —
   і в плитках 272px завширшки, і в широких 420px. Пропорція там не
   фіксована: 272/200 = 1.36, але 420/200 = 2.10.

   Раніше тут стояв aspect-ratio: 272/200 на всі плитки, і це давало два
   дефекти одразу:
     • широкі плитки другого ряду роздувались до 300px замість 200
       (звідси й картка на 725px замість макетних 611);
     • логотипи 420×200 у боксі з пропорцією 1.36 різались object-fit:
       cover приблизно на третину ширини.
   Файли логотипів авторовані рівно під макет (272×200 і 420×200), тому
   фіксована висота 200 повертає їм точні пропорції — обрізання зникає
   само собою.

   РАМКА. У макеті бокс має `border: 1px solid #203458` і фон `#010f32`
   (вузол 823:3179). Експорти логотипів несли цю рамку запеченою в самих
   пікселях — і саме тому її не було видно на широкій картці: плитки там
   вужчі за файл (267 проти 272, 408 проти 420), і `object-fit: cover`
   зрізав рівно бокові смужки. Верх і низ лишались, боки зникали.
   Тому рамку з файлів знято (обрізано по 1px з кожного боку), а тут вона
   малюється засобами CSS — так вона завжди рівно 1px і з усіх чотирьох
   боків, незалежно від ширини плитки.
   ЯКЩО КОЛИСЬ ПЕРЕЕКСПОРТУВАТИ ЛОГОТИПИ З FIGMA — рамка знову приїде
   запеченою, і її треба буде так само зрізати, інакше вийде подвійна. */
.bim-pdm-format__icon {
    display:       block;
    width:         100%;
    height:        200px;
    overflow:      hidden;
    border:        1px solid #203458;
    border-radius: 16px;
    background:    #010f32;
}

.bim-pdm-format__img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.bim-pdm-format__label {
    margin:      0;
    font-size:   15px;
    font-weight: 600;
    line-height: 1.4;
    text-align:  center;
    color:       #b8d1ff;
}

.bim-pdm__callout {
    width:                    100%;
    margin:                   0;
    padding:                  28px 32px;
    border:                   1px solid #20345e;
    border-radius:            24px;
    background-image:        linear-gradient(178.21deg, rgba(30, 50, 97, .8) 0%, rgba(20, 36, 73, .94) 78.125%);
    backdrop-filter:          blur(17px);
    -webkit-backdrop-filter:  blur(17px);
    font-size:                18px;
    font-weight:              600;
    line-height:              1.6;
    letter-spacing:           -.1px;
    text-align:               center;
    color:                    #77c6ff;
}

@media (max-width: 1024px) {
    .bim-pdm                    { padding: 32px 0 80px; }
    .bim-pdm > .container       { gap: 40px; }
    .bim-pdm__heading           { font-size: clamp(26px, 4vw, 36px); }
    .bim-pdm__intro-row         { flex-direction: column; gap: 32px; }
    .bim-pdm__figure            { flex: none; width: 100%; }
    .bim-pdm__text              { flex: none; width: 100%; }
    .bim-pdm__cards             { flex-direction: column; }
    .bim-pdm-card--narrow       { width: 100%; }
    .bim-pdm__orb               { width: 420px; height: 420px; top: -160px; }
    .bim-pdm__watermark         { display: none; }
}

@media (max-width: 768px) {
    .bim-pdm                { padding: 24px 0 48px; }
    .bim-pdm-card            { padding: 20px; }
    .bim-pdm-card__row       { gap: 12px; grid-template-columns: repeat(2, 1fr); }
    .bim-pdm__callout        { padding: 20px; font-size: 16px; }
}

/* Нижче ~640px плитки широкої картки стають вужчими за макетні 272px
   (виміряно: 600px → 257, 480px → 197), і фіксовані 200 зробили б бокс
   майже квадратним. Тут повертаємось до пропорції: на 640 обидва підходи
   дають однаковий результат, тож стик непомітний.
   object-fit: contain — щоб широкі логотипи (420×200) у вузькому боксі
   вписувались цілком, а не різались. Бренд-знак краще показати меншим,
   ніж обрізаним. */
@media (max-width: 640px) {
    .bim-pdm-format__icon {
        height:       auto;
        aspect-ratio: 272 / 200;
    }

    .bim-pdm-format__img { object-fit: contain; }
}

/* ── Переваги / Чому Ziggurat ──────────────────────────────────────────── */
/* Макет 710:1878 (полотно 1922×1285). Картка — копія .bim-why-card з цієї ж
   сторінки (parity-check: бордер #20345e, радіус 24, падінг 30, gap 16,
   бокс іконки 45.5px з тим самим градієнтом і бордером). Відмінності, які
   й зробили її окремим блоком, а не модифікатором: у картці є власний
   заголовок 18/600 білим, а текст 16px замість 18px, і падінг бокса іконки
   11px замість 13px (вузол I720:1954;137:1863).
   Сітку карток лишаю на всю ширину контейнера, як у .bim-why__cards і
   .bim-scope__cards вище: у макеті ряд 1210px при полотні 1922, у нас
   контейнер 1300 при 1440 — та сама частка, і секції на сторінці не
   розсинхронізовуються по ширині.
   Нижньої лінії немає навмисно: у макеті Line 5 (y=1285) вимкнена, а лінію
   між секціями дає has-line-bottom попередньої .bim-pdm. */
.bim-adv {
    position:   relative;
    overflow:   hidden;
    padding:    120px 0;
    background: #031d47;
}

.bim-adv__decor {
    position:       absolute;
    inset:          0;
    z-index:        0;
    overflow:       hidden;
    pointer-events: none;
}

/* Позиція від ЦЕНТРА, а не від лівого краю: у макеті полотно 1922, у нас
   вьюпорт зазвичай вужчий, і абсолютний left зсунув би праву пляму до
   середини екрана. Розмір спана — це розмір самої SVG (1806.85×1292.32)
   разом із bleed-полями Figma (inset -26.96%/-2.2%/-11.55%/-51.58% від
   вікна 1175×933), тому background-size: 100% 100% нічого не стискає. */
.bim-adv__glow {
    position:          absolute;
    display:           block;
    width:             1806.85px;
    height:            1292.32px;
    background-image:  url('../../img/bim-adv-glow.svg');
    background-repeat: no-repeat;
    background-size:   100% 100%;
}

.bim-adv__glow--1 {
    top:  -285.5px;
    left: calc(50% - 1628px);
}

.bim-adv__glow--2 {
    top:  -486.5px;
    left: calc(50% - 797px);
}

/* Растр — готовий Figma-рендер вузла bg-buildings-left (710:1885) РАЗОМ із
   власною прозорістю шару (перевірено: максимальна альфа у файлі 51/255,
   тобто ~20% уже "запечені"), тому CSS opacity тут не додаю — це той самий
   клас помилки, що подвійне затемнення .bim-pdm__orb.
   Права половина в макеті — окремий вузол (823:3231), але попіксельно це
   дзеркало лівого (різниця альфи ≤14/255, RGB розходиться лише там, де
   альфа 0), тож один файл + scaleX(-1) замість другого 147 КБ. */
.bim-adv__buildings {
    position: absolute;
    top:      0;
    display:  block;
    width:    929px;
    height:   990px;
    max-width: none;
}

.bim-adv__buildings--left  { left: 0; }
.bim-adv__buildings--right { right: 0; transform: scaleX(-1); }

.bim-adv > .container {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    gap:            60px;
}

.bim-adv__title {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            22px;
    width:          100%;
    max-width:      1322px;
    margin:         0 auto;
    text-align:     center;
}

/* Градієнт живе на БЛОЦІ, а не на .is-accent: акцент «управління BIM» стоїть
   у кінці й на вузькому екрані переїжджає на свій рядок, а для інлайнового
   елемента браузер малює фон по СУМАРНІЙ ширині фрагментів — другий рядок
   стартував би з середини градієнта. Той самий прийом, що .hero__title і
   .bim-challenges__heading. Стопи — токен: get_variable_defs на 710:1896
   віддає іменований стиль Gradient-2, а це і є --gradient-accent. */
.bim-adv__heading {
    margin:                   0;
    font-size:                clamp(28px, 1rem + 2.4vw, 48px);
    font-weight:              300;
    line-height:              1.084;
    letter-spacing:           -1.5px;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                    var(--color-text-light);
    -webkit-text-fill-color:  var(--color-text-light);
}

.bim-adv__heading .is-accent {
    font-weight:              600;
    color:                    transparent;
    -webkit-text-fill-color:  transparent;
}

/* gap: 0 — у макеті це один текстовий шар із двома абзацами без
   міжабзацного відступу (mb-0), відстань дає лише line-height 1.6. */
.bim-adv__intro {
    display:        flex;
    flex-direction: column;
    gap:            0;
    max-width:      820px;
    font-size:      18px;
    line-height:    1.6;
    letter-spacing: -.1px;
    color:          #b7c3de;
}

.bim-adv__intro p { margin: 0; }

.bim-adv__intro strong { font-weight: 600; }

.bim-adv__cards-block {
    display:        flex;
    flex-direction: column;
    gap:            40px;
    width:          100%;
}

/* h3, а не <p>: цей рядок називає групу карток під ним, тож у ієрархії
   h2 → h3 йому тут місце. Візуально — те саме, що .bim-why__leadin,
   лише 32px замість 24 (вузол 710:1899). Градієнт у макеті заданий сирою
   заливкою (#ffbf7a на 91.827% замість #fcc891 на 100%), але це та сама
   пляма з точністю до ~1% — беру токен, щоб не плодити четвертий варіант
   тих самих стопів на сторінці. */
.bim-adv__leadin {
    margin:                   0;
    font-size:                32px;
    font-weight:              600;
    line-height:              1.625;
    letter-spacing:           -1.5px;
    text-align:               center;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                    transparent;
    -webkit-text-fill-color:  transparent;
}

.bim-adv__cards {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   24px;
    width:                 100%;
}

.bim-adv-card {
    display:          flex;
    flex-direction:   column;
    align-items:      flex-start;
    gap:              16px;
    padding:          30px;
    border:           1px solid #20345e;
    border-radius:    24px;
    background-image: linear-gradient(165.17deg, rgba(30, 50, 97, .8) 0%, rgba(20, 36, 73, .94) 78.125%);
    box-shadow:       0 20px 60px -20px rgba(6, 9, 26, .75);
    transition:       border-color var(--transition), box-shadow var(--transition);
}

.bim-adv-card:hover {
    border-color: #5c8cd0;
    box-shadow:   0 22px 74px -26px rgba(45, 140, 255, .95);
}

.bim-adv-card__icon {
    display:                  inline-flex;
    flex:                     none;
    align-items:              center;
    justify-content:          center;
    width:                    45.5px;
    height:                   45.5px;
    padding:                  11px;
    border:                   1px solid rgba(124, 168, 255, .25);
    border-radius:            15px;
    background-image:        linear-gradient(150.11deg, rgba(76, 141, 255, .2) 0%, rgba(139, 92, 246, .12) 72.993%);
    transition:               transform var(--transition), border-color var(--transition), background-image var(--transition);
}

.bim-adv-card__icon .icon {
    display: block;
    width:   100%;
    height:  100%;
}

.bim-adv-card:hover .bim-adv-card__icon {
    transform:        rotate(-4deg);
    border-color:     rgba(245, 165, 36, .26);
    background-image: linear-gradient(150.11deg, rgba(245, 165, 36, .2) 0%, rgba(255, 122, 52, .1) 72.99%);
}

.bim-adv-card__title {
    margin:      0;
    font-size:   18px;
    font-weight: 600;
    line-height: 1.6;
    color:       #fff;
}

.bim-adv-card__text {
    font-size:   16px;
    line-height: 1.6;
    color:       var(--color-text-light);
}

/* Спільний .rich-text має gap 10px, а в макеті рядок «…зокрема:» і пункти
   списку йдуть суцільним потоком (це один текстовий шар) — обнуляю. */
.bim-adv-card__text .rich-text { gap: 0; }

.bim-adv-card__text .rich-bullets { padding-left: 18px; }

@media (max-width: 1024px) {
    .bim-adv                  { padding: 100px 0 80px; }
    .bim-adv > .container     { gap: 40px; }
    .bim-adv__heading         { font-size: clamp(26px, 4vw, 36px); line-height: 1.15; }
    .bim-adv__leadin          { font-size: 26px; line-height: 1.4; }
    .bim-adv__cards-block     { gap: 28px; }
    .bim-adv__cards           { grid-template-columns: repeat(2, 1fr); }
    /* 520×2 ≈ ширина вьюпорта: у макеті будівлі стоять по краях полотна
       1922 і в центр не заходять, тому масштабую їх так, щоб вони й тут
       не перекривали заголовок. */
    .bim-adv__buildings       { width: 520px; height: 554px; }
}

@media (max-width: 768px) {
    .bim-adv                  { padding: 64px 0 48px; }
    .bim-adv__title           { gap: 16px; }
    .bim-adv__heading         { letter-spacing: -.8px; line-height: 1.2; }
    .bim-adv__intro           { font-size: 16px; }
    .bim-adv__leadin          { font-size: 22px; letter-spacing: -.5px; }
    .bim-adv__cards           { grid-template-columns: 1fr; }
    .bim-adv-card             { padding: 24px; }
    /* На мобайлі два боки перекриваються за будь-якого масштабу, тож окрім
       зменшення прибираю ще частину щільності. Це свідоме адаптивне
       рішення, а не дублювання "запеченої" в растр прозорості: там 20%
       від макета, тут ще -40% зверху, щоб лінії не сперечалися з текстом. */
    .bim-adv__buildings       { width: 320px; height: 341px; opacity: .6; }
}

/* ── Типи проєктів ─────────────────────────────────────────────────────── */
/* Макет 710:1932 (полотно 1922×1051). Рядок-посилання — parity-check з
   .coord-process__tab (koordynacziya-system): та сама двошарова підкладка
   (діагональний градієнт поверх рівної синьої), той самий номер 19px
   #5aaeff, та сама рейка з крапками зліва. Там це кнопка акордеона зі
   станом is-active, тут — посилання зі стрілкою і станом :hover, тому
   блок власний.
   Рейку роблю не картинкою з макета (SVG 9×546 із сімома крапками), а
   лінією на списку + крапкою на кожному пункті: висота рейки тоді не
   прив'язана до кількості пунктів і до того, у скільки рядків ліг підпис.
   Ватермарк — той самий вузол і та сама SVG, що в .bim-pdm (1099×700 у
   більшій 1784.5×1339.34 картинці), тому файл перевикористаний. Але
   позиція тут від ЦЕНТРА: у макеті бокс стоїть на 411.43…1510.53, тобто
   рівно по центру полотна 1922 — а жорсткий left:411px (як у .bim-pdm)
   на вужчому вьюпорті з'їхав би праворуч.
   Ліній зверху/знизу немає навмисно: у макеті Line 5 вимкнена, а Line 6
   в цій секції відсутня взагалі. */
/* overflow-x: clip замість overflow: hidden — і саме clip, бо тільки він
   дозволяє лишити другу вісь visible (з hidden браузер примусово робить
   overflow-y: auto). Навіщо: скайлайн має виходити ВГОРУ за межу секції.
   У макеті його фрейм стоїть на y=-207, і фрейм секції його не ріже —
   перевірено попіксельно, розриву на верхній межі в рендері макета немає
   (2,21,57 з обох боків). А власне згасання "запечене" в маску растра:
   альфа йде 0 → пік 50/255 на y=245 → 0, тобто на лінії зрізу вона ще
   68% від піку. Клип по верху секції обривав цей градієнт посеред ходу —
   і замість силуету, що розчиняється, виходив прямокутний блок із рівним
   краєм упритул до попередньої секції.
   По горизонталі клип лишається: у скайлайна min-width: 1920px, без нього
   на вузькому вьюпорті з'явився б горизонтальний скрол. */
.bim-types {
    position:    relative;
    overflow-x:  clip;
    overflow-y:  visible;
    padding:     120px 0 100px;
    background:  #031d47;
}

.bim-types__decor {
    position:       absolute;
    inset:          0;
    z-index:        0;
    overflow-x:     clip;
    overflow-y:     visible;
    pointer-events: none;
}

/* Растр — Figma-рендер вузла bg-city-skyline (823:3235) разом із маскою і
   власною прозорістю шару (максимальна альфа у файлі 51/255), тому CSS
   opacity не додаю. min-width: не даю силуету стискатись разом із вузьким
   вьюпортом — інакше зникає весь сенс "лінії горизонту": на екранах
   вужчих за 1920 показуємо центральний кроп, ширших — розтягуємо. */
.bim-types__skyline {
    position:  absolute;
    top:       -207px;
    left:      50%;
    transform: translateX(-50%);
    width:     100%;
    min-width: 1920px;
    height:    auto;
    max-width: none;
    display:   block;
}

/* Вікно 1099×700 вирізає середину значно більшої розмитої картинки
   (1784.5×1339.34), і на його межах блюр ще НЕ згас: заміряно через canvas —
   альфа по верхньому рядку вікна max 14/255, по нижньому 10, по боках 3-6.
   Саме цей рівний прямокутник і читався як «перехід»: верхній край вікна
   лежить рівно на межі секцій, тобто найпомітнішому місці. М'яка радіальна
   маска розчиняє всі чотири краї — той самий прийом, що .faq__city
   (koordynacziya-system) і .bim-pdm__orb. */
.bim-types__watermark {
    position:  absolute;
    left:      50%;
    transform: translateX(-50%);
    top:       1px;
    width:     1099px;
    height:    700px;
    overflow:  hidden;
    -webkit-mask-image: radial-gradient(ellipse closest-side,
                            #000 38%, rgba(0, 0, 0, .55) 70%, transparent 100%);
    mask-image:         radial-gradient(ellipse closest-side,
                            #000 38%, rgba(0, 0, 0, .55) 70%, transparent 100%);
}

.bim-types__watermark-img {
    position:  absolute;
    left:      -343px;
    top:       -326px;
    width:     1784.5px;
    height:    1339.34px;
    max-width: none;
}

.bim-types > .container {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    gap:            60px;
}

.bim-types__columns {
    display:               grid;
    grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
    gap:                   40px;
    align-items:           start;
}

.bim-types__col-text {
    display:        flex;
    flex-direction: column;
    gap:            40px;
    min-width:      0;
}

.bim-types__title {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            22px;
}

/* Градієнт на БЛОЦІ, не на .is-accent: акцент починається посеред першого
   рядка й переходить на другий, а для інлайнового елемента браузер малює
   фон по сумарній ширині фрагментів. Той самий прийом, що .hero__title. */
.bim-types__heading {
    margin:                   0;
    font-size:                clamp(28px, 1rem + 2.4vw, 48px);
    font-weight:              300;
    line-height:              1.084;
    letter-spacing:           -1.5px;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                    var(--color-text-light);
    -webkit-text-fill-color:  var(--color-text-light);
}

.bim-types__heading .is-accent {
    color:                    transparent;
    -webkit-text-fill-color:  transparent;
}

.bim-types__heading strong { font-weight: 600; }

.bim-types__intro {
    font-size:      18px;
    line-height:    1.6;
    letter-spacing: -.1px;
    color:          #b7c3de;
}

/* Спільний .rich-text має gap 10px, у макеті між абзацами 16. */
.bim-types__intro .rich-text { gap: 16px; }

.bim-types__intro strong { font-weight: 600; }

/* ── Рейка з посиланнями ───────────────────────────────────────────────── */
.bim-types__links {
    position:       relative;
    display:        flex;
    flex-direction: column;
    gap:            14px;
    margin:         0;
    padding:        0 0 0 39px;
    list-style:     none;
}

/* Лінія тягнеться від центра першої крапки до центра останньої, а не на всю
   висоту списку — саме так у макеті (33px згори й знизу при висоті рядка 66). */
.bim-types__links::before {
    content:    '';
    position:   absolute;
    left:       4px;
    top:        33px;
    bottom:     33px;
    width:      1px;
    background: rgba(90, 160, 255, .28);
}

.bim-types__links-item {
    position: relative;
    display:  block;
}

.bim-types__links-item::before {
    content:       '';
    position:      absolute;
    left:          -39px;
    top:           50%;
    width:         9px;
    height:        9px;
    margin-top:    -4.5px;
    border-radius: 50%;
    background:    #2d8cff;
    box-shadow:    inset 0 0 0 1.5px #5aaeff,
                   0 0 12px rgba(45, 140, 255, .55);
}

.bim-types-link {
    display:          flex;
    align-items:      center;
    gap:              18px;
    min-height:       66px;
    padding:          14px 14px 14px 24px;
    border:           1px solid rgba(184, 209, 255, .2);
    border-radius:    18px;
    background-image: linear-gradient(177.85deg,
                          rgba(30, 50, 97, .48) 0%, rgba(20, 36, 73, .564) 78.125%),
                      linear-gradient(90deg,
                          rgba(45, 140, 255, .14) 0%, rgba(45, 140, 255, .14) 100%);
    box-shadow:               0 10px 20px rgba(6, 9, 26, .35);
    -webkit-backdrop-filter:  blur(22px);
    backdrop-filter:          blur(22px);
    color:                    inherit;
    text-decoration:          none;
    transition:               border-color var(--transition), background-image var(--transition), box-shadow var(--transition);
}

a.bim-types-link:hover,
a.bim-types-link:focus-visible {
    border-color:     #05a5ff;
    background-image: linear-gradient(177.85deg,
                          rgba(30, 50, 97, .48) 0%, rgba(20, 36, 73, .564) 78.125%),
                      linear-gradient(90deg,
                          rgba(45, 140, 255, .22) 0%, rgba(45, 140, 255, .22) 100%);
    box-shadow:       0 4px 15px rgba(45, 140, 255, .25);
}

.bim-types-link__num {
    flex:           none;
    font-size:      19px;
    font-weight:    400;
    letter-spacing: -.57px;
    color:          #5aaeff;
    transition:     color var(--transition);
}

a.bim-types-link:hover .bim-types-link__num,
a.bim-types-link:focus-visible .bim-types-link__num { color: #8cc6ff; }

.bim-types-link__label {
    flex:           1 1 0;
    min-width:      0;
    font-size:      16px;
    font-weight:    600;
    line-height:    1.3;
    letter-spacing: -.32px;
    color:          #fff;
}

/* Кружечок стрілки цілком на CSS, а не картинкою: у макеті hover міняє і
   заливку, і бордер, і колір гліфа — з растром довелось би тримати два
   файли (саме так вони й лежать у Figma: Arrow default / Arrow hover). */
.bim-types-link__arrow {
    flex:            none;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           38px;
    height:          38px;
    border:          1px solid rgba(90, 160, 255, .5);
    border-radius:   50%;
    background:      rgba(45, 140, 255, .12);
    color:           #7cc0ff;
    transition:      background var(--transition), border-color var(--transition), color var(--transition);
}

.bim-types-link__arrow .icon { display: block; }

a.bim-types-link:hover .bim-types-link__arrow,
a.bim-types-link:focus-visible .bim-types-link__arrow {
    border-color: #05a5ff;
    background:   #05a5ff;
    color:        #fff;
}

/* ── «Незалежно від типу проєкту» ──────────────────────────────────────── */
.bim-types__deliver {
    display:        flex;
    flex-direction: column;
    gap:            40px;
    width:          100%;
}

/* Стопи в макеті задані сирою заливкою (#ffbf7a на 91.827% замість #fcc891
   на 100%) — це та сама пляма з точністю до ~1%, беру токен, як і в
   .bim-adv__leadin. */
.bim-types__deliver-heading {
    margin:                   0;
    font-size:                32px;
    font-weight:              600;
    line-height:              1.625;
    letter-spacing:           -1.5px;
    text-align:               center;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                    transparent;
    -webkit-text-fill-color:  transparent;
}

.bim-types__deliver-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap:            41px;
    row-gap:               33px;
    margin:                0;
    padding:               0;
    list-style:            none;
}

.bim-types-deliver {
    position:    relative;
    display:     flex;
    align-items: center;
    gap:         16px;
    min-width:   0;
}

/* Роздільники — той самий градієнт-волосина, що глобальний --gradient-line
   (стопи звірені попіксельно з експортом Line 7 / Line 8-10). Вертикальний
   варіант — той самий градієнт під 180°; токен повернути не можна, тому
   стопи тут виписані вручну.
   Правила розкладки виходять з того, що пунктів рівно 6 (2 ряди по 3, як у
   макеті): ::before — лівий роздільник у всіх, крім першої колонки,
   ::after — нижній під першим рядом. */
.bim-types-deliver::before {
    content:          '';
    position:         absolute;
    left:             -21px;
    top:              0;
    bottom:           0;
    width:            1px;
    background-image: linear-gradient(180deg,
                          rgba(0, 142, 238, 0)    0%,
                          rgba(0, 142, 238, .6)   20.67%,
                          rgba(172, 213, 255, .8) 50%,
                          rgba(255, 159, 194, .6) 80.77%,
                          rgba(255, 159, 194, 0)  100%);
}

.bim-types-deliver:nth-child(3n+1)::before { content: none; }

.bim-types-deliver::after {
    content:    '';
    position:   absolute;
    left:       0;
    right:      0;
    bottom:     -16px;
    height:     1px;
    background: var(--gradient-line);
}

.bim-types-deliver:nth-child(n+4)::after { content: none; }

.bim-types-deliver__icon {
    flex:    none;
    display: block;
    width:   50px;
    height:  50px;
}

.bim-types-deliver__icon .icon {
    display: block;
    width:   100%;
    height:  100%;
}

.bim-types-deliver__label {
    flex:           1 1 0;
    min-width:      0;
    font-size:      16px;
    line-height:    1.6;
    letter-spacing: -.1px;
    color:          #b7c3de;
}

@media (max-width: 1024px) {
    .bim-types                     { padding: 100px 0 80px; }
    .bim-types > .container        { gap: 48px; }
    .bim-types__columns            { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .bim-types__col-text           { gap: 28px; }
    .bim-types__heading            { font-size: clamp(26px, 4vw, 36px); line-height: 1.15; }
    .bim-types__intro              { font-size: 16px; }
    .bim-types__deliver-heading    { font-size: 26px; line-height: 1.4; }

    /* 2 колонки: роздільники перерозкладаються — лівий у кожного парного,
       нижній під першими чотирьома. Правила скасування пишу тим самим
       селектором, що й на десктопі (:nth-child, вага 0-2-1), а не голим
       ::after: базове правило легше за десктопне :nth-child і його не
       перебило б — рядок 4 лишився б без лінії. */
    .bim-types__deliver-grid                        { grid-template-columns: repeat(2, 1fr); column-gap: 32px; }
    .bim-types-deliver::before                      { content: none; }
    .bim-types-deliver:nth-child(2n)::before        { content: ''; left: -16px; }
    .bim-types-deliver:nth-child(n+4)::after        { content: ''; }
    .bim-types-deliver:nth-child(n+5)::after        { content: none; }
}

@media (max-width: 768px) {
    .bim-types                  { padding: 64px 0 48px; }
    .bim-types > .container     { gap: 40px; }
    .bim-types__title           { gap: 16px; }
    .bim-types__heading         { letter-spacing: -.8px; line-height: 1.2; }

    .bim-types__links           { padding-left: 28px; gap: 12px; }
    .bim-types__links-item::before { left: -28px; }
    .bim-types-link             { gap: 12px; min-height: 60px; padding: 12px 12px 12px 16px; }
    .bim-types-link__num        { font-size: 17px; }
    .bim-types-link__label      { font-size: 15px; }
    .bim-types-link__arrow      { width: 32px; height: 32px; }

    .bim-types__deliver              { gap: 28px; }
    .bim-types__deliver-heading      { font-size: 22px; letter-spacing: -.5px; }
    .bim-types__deliver-grid         { grid-template-columns: 1fr; row-gap: 28px; }
    .bim-types-deliver:nth-child(2n)::before { content: none; }
    /* Одна колонка: лінія під кожним, крім останнього. Ті самі ваги
       селекторів, що вище, — інакше пункти 5-6 лишились би без лінії. */
    .bim-types-deliver::after            { bottom: -14px; }
    .bim-types-deliver:nth-child(n+4)::after { content: ''; }
    .bim-types-deliver:nth-child(n+5)::after { content: ''; }
    .bim-types-deliver:last-child::after     { content: none; }
    .bim-types-deliver__icon         { width: 42px; height: 42px; }

    .bim-types__skyline         { top: -240px; }
}

/* ── 20 років досвіду ──────────────────────────────────────────────────── */
/* Макет 710:2276 (полотно 1922×1438). Чотири блоки з однаковим кроком 60px.
   Виноска — parity-check з .bim-pdm__callout (той самий бордер, радіус,
   падінги, градієнт фону, blur і колір), різниця лише в накресленні: тут
   Regular, там SemiBold.
   Декор розкладений по двох шарах навмисно: карта має виходити ВГОРУ за
   межу секції (її фрейм у макеті стоїть на y=-177, і на лінії зрізу альфа
   ще ~55% від піку — клип дав би рівний край, той самий дефект, що вже
   ловили на .bim-types__skyline), а глоу з орбом навпаки мають клипатись,
   інакше вони поповзли б на футер. */
.bim-exp {
    position:   relative;
    overflow-x: clip;
    overflow-y: visible;
    padding:    100px 0 120px;
    background: #031d47;
}

.bim-exp__worldmap {
    position:  absolute;
    top:       -177px;
    left:      50%;
    transform: translateX(-50%);
    width:     100%;
    min-width: 1920px;
    height:    auto;
    max-width: none;
    display:   block;
    z-index:   0;
}

.bim-exp__decor {
    position:       absolute;
    inset:          0;
    z-index:        0;
    overflow:       hidden;
    pointer-events: none;
}

/* Розмір спана — розмір самої SVG разом із bleed-полями Figma
   (inset -26.96%/-2.2%/-11.55%/-51.58% від вікна 1175×933), позиція — від
   центра полотна, як в інших секціях.
   Маска: у макеті всередину секції потрапляє лише верхні 38.7% глоу, а
   далі він іде в наступну секцію (Figma не клипає). У нас наступної секції
   ще немає, тому клипаємо — але на лінії зрізу альфа 43/255, тобто 84% від
   піку (заміряно через canvas), і без маски там був би рівний край.
   КОЛИ З'ЯВИТЬСЯ НАСТУПНА СЕКЦІЯ — маску можна прибрати, а глоу пустити
   вниз так само, як карту вгору. */
.bim-exp__glow {
    position:          absolute;
    display:           block;
    left:              calc(50% - 1609px);
    bottom:            -792px;
    width:             1806.85px;
    height:            1292.32px;
    background-image:  url('../../img/bim-exp-glow.svg');
    background-repeat: no-repeat;
    background-size:   100% 100%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 28%, transparent 38.7%);
    mask-image:         linear-gradient(180deg, #000 0%, #000 28%, transparent 38.7%);
}

/* Прив'язка до низу, а не top: 658px з макета: секція з українським
   текстом вища за макетну, і жорсткий top відірвав би орб від нижнього
   краю, до якого він у макеті приклеєний (658+780 = 1438 = висота секції).
   Маска по лівому краю — з тієї ж причини, що в .bim-pdm__orb: ліва
   колонка растра має альфу 24/255, тобто обрив був би прямо посеред
   сторінки. Права колонка (альфа 101) обрізається краєм екрана, там шва
   не видно. */
.bim-exp__orb {
    position:           absolute;
    right:              0;
    bottom:             0;
    width:              780px;
    height:             780px;
    display:            block;
    max-width:          none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
    mask-image:         linear-gradient(90deg, transparent 0%, #000 22%);
}

.bim-exp > .container {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    gap:            60px;
}

.bim-exp__title {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            22px;
    width:          100%;
    text-align:     center;
}

.bim-exp__heading {
    margin:                   0;
    font-size:                clamp(28px, 1rem + 2.4vw, 48px);
    font-weight:              300;
    line-height:              1.084;
    letter-spacing:           -1.5px;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                    var(--color-text-light);
    -webkit-text-fill-color:  var(--color-text-light);
}

.bim-exp__heading .is-accent {
    font-weight:              600;
    color:                    transparent;
    -webkit-text-fill-color:  transparent;
}

/* У макеті вступ розбитий на дві колонки ВРУЧНУ — перша обривається на
   півслові ("...while establishing unified"), друга продовжує речення.
   Двома окремими полями це не робиться: при перекладі поділ поїде. Тому
   одне поле і column-count — браузер ділить сам за фактичною довжиною.
   .rich-text доводиться перевести з flex у block: flex-контейнер не
   фрагментується по колонках, і весь текст ліг би в першу. */
.bim-exp__intro {
    width:          100%;
    column-count:   2;
    column-gap:     40px;
    font-size:      18px;
    font-weight:    300;
    line-height:    1.6;
    letter-spacing: -.1px;
    text-align:     left;
    color:          #b7c3de;
}

.bim-exp__intro .rich-text { display: block; }

.bim-exp__intro p         { margin: 0 0 16px; }
.bim-exp__intro p:last-child { margin-bottom: 0; }
.bim-exp__intro strong    { font-weight: 600; }

/* ── Міжнародний досвід ────────────────────────────────────────────────── */
.bim-exp__intl {
    display:               grid;
    grid-template-columns: minmax(0, 620px) minmax(0, 1fr);
    gap:                   80px;
    align-items:           center;
    width:                 100%;
}

.bim-exp__intl-text {
    display:        flex;
    flex-direction: column;
    gap:            24px;
    min-width:      0;
}

.bim-exp__intl-heading {
    margin:                   0;
    font-size:                32px;
    font-weight:              600;
    line-height:              1.625;
    letter-spacing:           -1.5px;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                    transparent;
    -webkit-text-fill-color:  transparent;
}

.bim-exp__countries {
    display:        flex;
    flex-direction: column;
    gap:            14px;
}

.bim-exp__countries-lead {
    margin:      0;
    font-size:   16px;
    font-weight: 600;
    line-height: 1.6;
    color:       #76c6ff;
}

.bim-exp__countries-list {
    display:    flex;
    flex-wrap:  wrap;
    gap:        24px;
    margin:     0;
    padding:    0;
    list-style: none;
}

.bim-exp__country {
    display:     flex;
    align-items: center;
    gap:         10px;
}

.bim-exp__country-flag {
    flex:    none;
    display: block;
    width:   24px;
    height:  16px;
}

.bim-exp__country-flag .icon {
    display: block;
    width:   100%;
    height:  100%;
}

.bim-exp__country-label {
    font-size: 15.2px;
    color:     var(--color-text-light);
}

.bim-exp__intl-body {
    margin:      0;
    font-size:   16px;
    line-height: 1.6;
    color:       var(--color-text-light);
}

.bim-exp__figure {
    margin:        0;
    height:        376px;
    overflow:      hidden;
    border:        1px solid #20345e;
    border-radius: 24px;
}

.bim-exp__figure-img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

/* ── Перелік послуг ────────────────────────────────────────────────────── */
.bim-exp__services {
    display:        flex;
    flex-direction: column;
    gap:            24px;
    width:          100%;
}

.bim-exp__services-heading {
    margin:                   0;
    font-size:                32px;
    font-weight:              600;
    line-height:              1.625;
    letter-spacing:           -1.5px;
    text-align:               center;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                    transparent;
    -webkit-text-fill-color:  transparent;
}

/* column-count, а не дві розмітки: у макеті 4 пункти зліва і 3 справа, але
   це просто наслідок того, що їх сім. Браузер ділить сам, і при зміні
   кількості пунктів у репітері нічого правити не треба. */
.bim-exp__services-list {
    column-count: 2;
    column-gap:   40px;
    margin:       0;
    padding:      0;
    list-style:   none;
}

.bim-exp-service {
    display:      flex;
    align-items:  center;
    gap:          16px;
    margin:       0 0 24px;
    break-inside: avoid;
}

.bim-exp-service:last-child { margin-bottom: 0; }

.bim-exp-service__icon {
    flex:    none;
    display: block;
    width:   28px;
    height:  28px;
}

.bim-exp-service__icon .icon {
    display: block;
    width:   100%;
    height:  100%;
}

.bim-exp-service__label {
    font-size:   16px;
    line-height: 1.5;
    color:       #fff;
}

/* Копія .bim-pdm__callout (parity-check), різниця лише в накресленні:
   у макеті цієї секції текст Regular, а не SemiBold. */
.bim-exp__callout {
    width:                    100%;
    margin:                   0;
    padding:                  28px 32px;
    border:                   1px solid #20345e;
    border-radius:            24px;
    background-image:        linear-gradient(178.67deg, rgba(30, 50, 97, .8) 0%, rgba(20, 36, 73, .94) 78.125%);
    -webkit-backdrop-filter:  blur(17px);
    backdrop-filter:          blur(17px);
    font-size:                18px;
    line-height:              1.6;
    letter-spacing:           -.1px;
    text-align:               center;
    color:                    #77c6ff;
}

@media (max-width: 1024px) {
    .bim-exp                    { padding: 80px 0 100px; }
    .bim-exp > .container       { gap: 48px; }
    .bim-exp__heading           { font-size: clamp(26px, 4vw, 36px); line-height: 1.15; }
    .bim-exp__intro             { column-count: 1; font-size: 16px; }
    .bim-exp__intl              { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .bim-exp__intl-heading,
    .bim-exp__services-heading  { font-size: 26px; line-height: 1.4; }
    .bim-exp__figure            { height: 340px; }
    .bim-exp__orb               { width: 560px; height: 560px; }
}

@media (max-width: 768px) {
    .bim-exp                    { padding: 64px 0 48px; }
    .bim-exp > .container       { gap: 40px; }
    .bim-exp__title             { gap: 16px; }
    .bim-exp__heading           { letter-spacing: -.8px; line-height: 1.2; }
    .bim-exp__intl-heading,
    .bim-exp__services-heading  { font-size: 22px; letter-spacing: -.5px; }
    .bim-exp__countries-list    { gap: 16px; }
    .bim-exp__figure            { height: 220px; border-radius: 18px; }
    .bim-exp__services-list     { column-count: 1; }
    .bim-exp-service            { align-items: flex-start; gap: 12px; }
    .bim-exp__callout           { padding: 20px; font-size: 16px; }
    .bim-exp__orb               { width: 400px; height: 400px; }
    .bim-exp__worldmap          { top: -210px; }
}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
/* Макет 710:2333 (полотно 1922×1602). Секція навмисно НЕ має власних
   стилів картки: .faq__list і .faq-item* спільні для всієї теми (css/main.css),
   і в макеті вони збігаються один-в-один — фон #101f40, бордер #20345e,
   радіус 16, падінг 24, тінь 0 10px 5px rgba(0,0,0,.45), питання 18/600
   білим, ширина списку 912. Тут, як і на Головній, лишаються тільки
   відступи секції, власне фонове фото і градієнт заголовка.
   Фото те саме, що на Головній (faq-city.webp + faq-mask.svg): попіксельне
   порівняння показало, що це один і той самий кадр, у макеті просто інший
   кроп. Маска 1920×688 узагалі експортована з цього ж компонента — її
   розмір дорівнює висоті смуги в цьому макеті. */
.faq {
    position: relative;
    overflow: hidden;
    padding:  120px 0;
}

.faq__decor {
    position:       absolute;
    inset:          0;
    overflow:       hidden;
    pointer-events: none;
}

/* Прив'язка до низу з фіксованою висотою, а не відсотки, як на Головній:
   тут 13 питань, і висота секції залежить від того, скільки з них
   розгорнуто — при відсотковій висоті смуга «дихала» б разом з
   акордеоном. У макеті смуга закінчується рівно на нижньому краї секції
   (914 + 688 = 1602). Прозорість .5 поверх маски (максимум .4) дає ті самі
   20%, що «запечені» в растр макета — звірено. */
.faq__city {
    position:            absolute;
    left:                0;
    bottom:              0;
    width:               100%;
    height:              688px;
    opacity:             .5;
    background-image:    url('../../img/faq-city.webp');
    background-size:     cover;
    background-position: center top;
    -webkit-mask-image:  url('../../img/faq-mask.svg');
    mask-image:          url('../../img/faq-mask.svg');
    -webkit-mask-size:   100% 100%;
    mask-size:           100% 100%;
}

.faq__wrp {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            60px;
}

.faq__head {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            22px;
    text-align:     center;
}

.faq__title {
    margin:         0;
    font-size:      48px;
    font-weight:    300;
    line-height:    52px;
    letter-spacing: -1.5px;
    color:          var(--color-text-light);
}

.faq__title .is-accent {
    font-weight:             600;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                   transparent;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 1024px) {
    .faq        { padding: 90px 0; }
    .faq__wrp   { gap: 40px; }
    .faq__title { font-size: 36px; line-height: 42px; letter-spacing: -1px; }
    .faq__city  { height: 520px; }
}

@media (max-width: 768px) {
    .faq        { padding: 56px 0; }
    .faq__wrp   { gap: 32px; }
    .faq__head  { gap: 16px; }
    .faq__title { font-size: 26px; line-height: 32px; letter-spacing: -.5px; }
    .faq__city  { height: 360px; }
}