/*
 * Галузі (/galuzi/) — секції сторінки.
 *
 * Джерело: шаблон замовника `industries-page-template/`.
 *
 * Як зібрано:
 *   1. База `.service-page`, кнопки, `.service-cta` і FAQ — витягнуті з уже
 *      портованого `css/pages/poslugy.css`, а НЕ з клієнтського
 *      `shared-sections.css`. Причина: `shared-sections.css` побайтово
 *      дорівнює `service-page.css` зі шаблону «Послуг», який ми вже
 *      перенесли, вичистили від мертвих правил і звірили з макетом
 *      попіксельно. Брати вдруге сире джерело означало б повторити ту саму
 *      роботу і ризикнути розійтись між двома сторінками.
 *   2. Далі — `industries-page.css` шаблону, майже без змін.
 *
 * Що змінено при перенесенні:
 *   • шляхи до зображень переписані на ассети теми (PNG → WebP, 21 МБ → 1.25 МБ);
 *   • `img/faq-wireframe-grid.svg` не дублювався — файл побайтово збігся з
 *     наявним `img/poslugy-faq-grid.svg`, використовується він;
 *   • токени (:root) не переносились — сторінка тягне їх з css/main.css.
 *     Виняток — 4 токени `--glass-surface-*`, яких у базі теми немає: вони
 *     оголошені нижче на `.industries-page`, щоб не чіпати глобальний :root
 *     заради однієї сторінки.
 *
 * Дублі правил у порції з industries-page.css свідомо не чіпав — це
 * фактичний стан, з якого знімався погоджений вигляд.
 */

/* ── Токени, яких немає в базі теми ────────────────────────────────────── */
.industries-page {
    --glass-surface-border: rgba(184, 209, 255, .24);
    --glass-surface-background: linear-gradient(135deg, rgba(55, 104, 164, .25) 0%, rgba(12, 45, 87, .34) 46%, rgba(3, 20, 50, .24) 100%);
    --glass-surface-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 -1px 0 rgba(76, 141, 255, .08), 0 10px 32px rgba(0, 11, 35, .2);
    --glass-surface-filter: blur(14px) saturate(1.16);
}

/* ── Градієнти заголовків ──────────────────────────────────────────────────
   Тут був локальний набір токенів зі значенням шаблону
   (90deg, #0098f0 → #edf2ff 52% → #f2c893). Він давав синій, але ІНШИЙ
   синій, ніж решта сайту, і сторінка вибивалася з ряду — помітно, коли
   переходиш із «Галузей» у будь-яку галузь. Прибрано: заголовки беруть
   загальносайтовий --gradient-accent («Gradient-2» з макета). */

/* ── База сторінки, кнопки, CTA і FAQ (спільні з /poslugy/) ────────────── */
.service-page {
    background-color: var(--color-bg);
    color: var(--color-text-light);
}

.service-page > section {
    border-bottom: .5px solid transparent;
    border-image-source: var(--gradient-line);
    border-image-slice: 1;
}

.btn {
    position:        relative;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    box-sizing:      border-box;
    cursor:          pointer;
    text-decoration: none;
}

.btn--primary {
    font-size:      var(--fs-button);
    line-height:    var(--lh-button);
    letter-spacing: var(--ls-button);
}

.btn--lg {
    width:         270px;
    min-width:     270px;
    height:        56px;
    min-height:    56px;
    padding:       17px 28px;
    border-radius: 10px;
}

.btn--outline {
    min-width:     270px;
    height:        56px;
    min-height:    56px;
    padding:       14px 34px;
    border:        1px solid color-mix(in srgb, var(--color-sky) 50%, transparent);
    border-radius: 10px;
    background-color: color-mix(in srgb, var(--color-bg-alt) 55%, transparent);
    color:         var(--color-sky);
    font-size:     var(--fs-button);
    line-height:   var(--lh-button);
    transition:    border-color var(--transition),
                   background-color var(--transition),
                   color var(--transition);
}

.btn--outline:hover,
.btn--outline:focus-visible,
.btn--outline:active {
    border-color:     var(--color-sky);
    background-color: var(--surface-soft);
    color:            var(--color-text);
}

.btn--outline .icon { flex: none;
}

.service-cta,
.service-faq {
    position: relative;
    overflow: hidden;
    background-color: var(--color-bg);
}

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

.service-cta > .container,
.service-faq > .container {
    position: relative;
    z-index: 1;
}

.service-cta__heading .is-accent,
.service-faq__heading .is-accent {
    display: inline-block;
    font-weight: 600;
    letter-spacing: -1px;
    background-image: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}



.service-faq {
    padding: 120px 0;
}

.service-cta__glow {
    position: absolute;
    display: block;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background-image: radial-gradient(circle, var(--color-secondary) 0%, transparent 70%);
    opacity: .08;
}

.service-cta__glow {
    right: -280px;
    bottom: -320px;
}

.service-faq > .container {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

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

.service-faq__heading,
.service-cta__heading {
    margin: 0;
    max-width: 1100px;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: -1.5px;
    color: var(--color-text-light);
}

.service-cta {
    padding: 88px 0;
    background-color: #061a3a;
    background-image:
        radial-gradient(circle at 50% 28%, rgba(48, 116, 225, .06) 0%, transparent 42%),
        linear-gradient(180deg, rgba(8, 33, 72, .34) 0%, rgba(3, 18, 42, .2) 100%);
}

.service-cta__decor {
    display: none;
}

.service-cta__banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    max-width: 1100px;
    min-height: 430px;
    margin: 0 auto;
    padding: 64px clamp(32px, 6vw, 88px);
    border: 1px solid rgba(115, 173, 247, .24);
    border-radius: 24px;
    background:
        radial-gradient(circle at 16% 4%, rgba(67, 139, 244, .22) 0%, rgba(35, 93, 181, .09) 27%, transparent 51%),
        linear-gradient(155deg, rgba(15, 49, 101, .96) 0%, rgba(7, 30, 68, .98) 58%, rgba(3, 19, 47, .99) 100%);
    box-shadow:
        inset 0 1px 0 rgba(193, 221, 255, .08),
        0 28px 68px -56px rgba(0, 0, 0, .9);
    text-align: center;
}

.service-cta__banner::before,
.service-cta__banner::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.service-cta__banner::before {
    inset: 0;
    background-image:
        linear-gradient(rgba(100, 164, 246, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100, 164, 246, .045) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: .12;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 58%);
    mask-image: linear-gradient(90deg, #000 0%, transparent 58%);
}

.service-cta__banner::after {
    right: -120px;
    bottom: -180px;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(28, 102, 210, .09) 0%, transparent 70%);
}

.service-cta__content {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-width: 0;
}

.service-cta__eyebrow {
    margin: 0 0 2px;
}

.service-cta__heading {
    max-width: 880px;
    font-size: clamp(32px, 3.7vw, 50px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -1.35px;
}

.service-cta__text {
    margin: 0;
    max-width: 700px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--color-text-soft);
}

.service-cta__actions {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.service-cta__btn {
    min-width: 176px;
    min-height: 48px;
    padding: 13px 22px;
    border-radius: 7px;
}

.service-cta__btn.btn--primary {
    border-color: rgba(185, 220, 255, .2);
    background-image: linear-gradient(90deg, #398be8 0%, #68b7ff 100%);
    box-shadow: 0 12px 30px -14px rgba(54, 145, 239, .62);
}

.service-cta__btn.btn--outline {
    border-color: rgba(134, 185, 244, .3);
    background: rgba(13, 46, 94, .4);
    color: var(--color-text-light);
}

.service-cta__btn.btn--outline:hover,
.service-cta__btn.btn--outline:focus-visible {
    border-color: rgba(134, 190, 255, .58);
    background: rgba(22, 68, 132, .52);
}

.service-faq__title {
    margin-bottom: 0;
}

.service-faq {
    isolation: isolate;
    padding: 92px 0 108px;
    background-color: #061a3a;
    background-image:
        radial-gradient(circle at 50% 16%, rgba(49, 119, 232, .07) 0%, transparent 38%),
        linear-gradient(180deg, rgba(8, 33, 72, .34) 0%, rgba(3, 18, 42, .22) 100%);
}

.service-faq::before {
    content: "";
    position: absolute;
    top: 47%;
    right: 209px;
    bottom: auto;
    z-index: 0;
    width: min(68vw, 900px);
    aspect-ratio: 1200 / 760;
    background:
        radial-gradient(ellipse 58% 54% at 61% 52%, rgba(39, 121, 232, .13) 0%, rgba(24, 86, 178, .055) 48%, transparent 78%),
        url("../../img/poslugy-faq-grid.svg") center / contain no-repeat;
    opacity: .25;
    filter: saturate(.76) brightness(.9);
    -webkit-mask-image: radial-gradient(ellipse 66% 68% at 63% 50%, #000 20%, rgba(0, 0, 0, .62) 48%, rgba(0, 0, 0, .16) 70%, transparent 94%);
    mask-image: radial-gradient(ellipse 66% 68% at 63% 50%, #000 20%, rgba(0, 0, 0, .62) 48%, rgba(0, 0, 0, .16) 70%, transparent 94%);
    transform: rotate(-2deg);
    pointer-events: none;
}

.service-faq::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(90deg, rgba(6, 26, 58, .18) 0%, rgba(6, 26, 58, .46) 50%, rgba(6, 26, 58, .14) 100%);
    pointer-events: none;
}

.service-faq > .container {
    position: relative;
    z-index: 1;
    gap: 40px;
}

.service-faq__title {
    gap: 14px;
}

.service-faq__heading {
    max-width: 820px;
    font-size: clamp(31px, 3.25vw, 46px);
}

/* Список вужчий за контейнер (912px проти 1300px), а заголовок секції
   центрований — без auto-полів список притискався вліво і композиція
   виглядала перекошеною. Ставимо тут, у базовому правилі: перекриття
   нижче (.industries-page …) полів не задають, тож автоцентр діє скрізь. */
/* Ширину (912) і крок (12) задає спільний блок у css/main.css — тут лише
   центрування, бо .service-faq > .container не має align-items: center.
   Так само зроблено на /poslugy/. */
.service-faq .faq__list {
    margin-inline: auto;
}

.service-faq .rich-bullets {
    display: grid;
    gap: 6px;
}



.faq-numbered-list {
    display: grid;
    gap: 7px;
    margin: 0;
    padding-left: 24px;
}

.faq-numbered-list li::marker {
    font-weight: 600;
    color: var(--color-primary-light);
}

/* Підзаголовок у відповіді FAQ — клас приходить із контенту мета-поля,
   а не з партіалу теми. */
.faq-item__answer-title {
    font-weight: 600;
    color: var(--color-text);
}

@media (max-width: 768px) {
    .service-faq {
        padding: 64px 0 72px;
    }

    .service-faq::before {
        top: 53%;
        right: -54%;
        bottom: auto;
        width: 126vw;
        opacity: .2;
        -webkit-mask-image: radial-gradient(ellipse 68% 70% at 62% 50%, #000 18%, rgba(0, 0, 0, .54) 48%, rgba(0, 0, 0, .12) 70%, transparent 94%);
        mask-image: radial-gradient(ellipse 68% 70% at 62% 50%, #000 18%, rgba(0, 0, 0, .54) 48%, rgba(0, 0, 0, .12) 70%, transparent 94%);
    }

    .service-faq > .container {
        gap: 34px;
    }
}

@media (max-width: 1024px) {
    .service-faq {
        padding: 80px 0 88px;
    }

    .service-faq > .container {
        gap: 42px;
    }

    .service-faq__heading,
    .service-cta__heading {
        font-size: clamp(26px, 4vw, 36px);
    }

    .service-cta__banner {
        align-items: center;
    }
}

@media (max-width: 768px) {
    .service-cta__banner {
        flex-direction: column;
    }

    .service-cta__content {
        flex: none;
        width: 100%;
        min-width: 0;
    }

    .service-cta__text {
        font-size: 16px;
    }

    .service-faq {
        padding: 64px 0 72px;
    }

    .service-faq > .container {
        gap: 34px;
    }

    .service-cta {
        padding: 48px 0;
    }

    .service-cta__banner {
        gap: 28px;
        min-height: 0;
        padding: 28px 24px;
        border-radius: 20px;
    }

    .service-cta__actions,
    .service-cta__btn {
        width: 100%;
    }

    .service-cta__glow {
        display: none;
    }
}

@media (max-width: 768px) {
    .btn--lg,
    .btn--outline {
        width:     100%;
        min-width: 0;
    }
}


/* ── Секції сторінки «Галузі» ──────────────────────────────────────────── */
/* Сторінка «Галузі»: доповнює спільні стилі без збірника та залежностей. */
.industries-page {
    --industries-card: rgba(5, 24, 58, .78);
    --industries-line: rgba(75, 144, 255, .3);
}

.industries-page > section {
    position: relative;
    overflow: hidden;
    background-color: var(--color-bg);
}

.industries-page .is-accent {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.industries-hero {
    min-height: min(620px, calc(100svh - 114px));
    padding: 34px 0 52px;
    isolation: isolate;
}

.industries-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 78% 46%, rgba(17, 105, 231, .19), transparent 32%),
        linear-gradient(100deg, rgba(3, 28, 69, .98) 0%, rgba(3, 28, 69, .92) 48%, rgba(3, 28, 69, .76) 100%);
}

.industries-hero::after {
    content: "";
    position: absolute;
    right: -8%;
    bottom: -44%;
    z-index: -1;
    width: 74%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: repeating-radial-gradient(circle, rgba(71, 142, 255, .08) 0 1px, transparent 1px 30px);
    transform: perspective(680px) rotateX(67deg);
    -webkit-mask-image: radial-gradient(circle, #000 15%, transparent 66%);
    mask-image: radial-gradient(circle, #000 15%, transparent 66%);
    pointer-events: none;
}



.industries-hero__layout {
    display: grid;
    grid-template-columns: minmax(0, .96fr) minmax(430px, 1.04fr);
    align-items: center;
    gap: clamp(28px, 4vw, 74px);
}

.industries-hero__content {
    position: relative;
    z-index: 2;
    max-width: 690px;
}

.industries-hero__experience {
    position: relative;
    z-index: 3;
    align-self: end;
    width: min(100%, 390px);
    margin: 0 0 0 auto;
    padding: 19px 21px;
    border: 1px solid var(--glass-surface-border);
    border-radius: 18px;
    background: var(--glass-surface-background);
    box-shadow: var(--glass-surface-shadow);
    backdrop-filter: var(--glass-surface-filter);
    -webkit-backdrop-filter: var(--glass-surface-filter);
}

.industries-hero__experience::before {
    content: "";
    position: absolute;
    top: 0;
    right: 20px;
    left: 20px;
    height: .5px;
    background: linear-gradient(90deg, transparent, rgba(83, 177, 255, .76), rgba(242, 200, 147, .4), transparent);
}

.industries-hero__experience-stat {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding-bottom: 13px;
    border-bottom: .5px solid transparent;
    border-image: linear-gradient(90deg, transparent, rgba(99, 164, 255, .38), transparent) 1;
}

.industries-hero__experience-stat strong {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-size: 36px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -1.2px;
}

.industries-hero__experience-stat span {
    max-width: 170px;
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.35;
}

.industries-hero__experience > p {
    margin-top: 13px;
    color: var(--color-text-soft);
    font-size: 13px;
    line-height: 1.55;
}

.industries-hero__heading {
    max-width: 680px;
    margin: 18px 0 24px;
    color: var(--color-text-light);
    font-size: clamp(40px, 3vw, var(--fs-h1));
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: var(--ls-h1);
}

.industries-hero__heading .is-accent {
    display: inline-block;
    font-weight: 600;
    letter-spacing: -1px;
}

.industries-hero__intro {
    max-width: 650px;
    margin-bottom: 34px;
    color: var(--color-text-soft);
    font-size: clamp(15px, 1vw, var(--fs-lead));
    line-height: 1.5;
    letter-spacing: var(--ls-lead);
}
























.industries-intro {
    padding: 28px 0;
}











.industries-intro__accent {
    background: linear-gradient(90deg, #0098f0 0%, #4c8dff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.industries-list {
    padding: clamp(74px, 8vw, 112px) 0;
}

.industries-list::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 8% 18%, rgba(37, 108, 225, .1), transparent 27%),
        radial-gradient(circle at 94% 74%, rgba(229, 156, 93, .055), transparent 25%);
    pointer-events: none;
}

.industries-list > .container,
.industries-context > .container {
    position: relative;
    z-index: 1;
}

.industries-list__title {
    max-width: 850px;
    margin-bottom: 46px;
}

.industries-list__title h2,
.industries-context h2 {
    margin-top: 15px;
    color: var(--color-text-light);
    font-size: clamp(31px, 3.25vw, 46px);
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: -1.5px;
}

.industries-list__title h2 .is-accent,
.industries-context h2 .is-accent {
    display: inline-block;
    font-weight: 600;
    letter-spacing: -1px;
}

.industries-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.industry-card {
    position: relative;
    display: flex;
    min-height: 410px;
    padding: 30px;
    overflow: hidden;
    flex-direction: column;
    border: .5px solid rgba(83, 153, 255, .24);
    border-radius: 22px;
    background:
        linear-gradient(148deg, rgba(20, 54, 104, .48) 0%, rgba(6, 27, 64, .88) 58%, rgba(3, 21, 52, .94) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 25px 60px -42px rgba(0, 119, 255, .65);
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.industry-card::after {
    content: "";
    position: absolute;
    top: -80px;
    right: -90px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(27, 126, 255, .09);
    filter: blur(34px);
    transition: background .25s ease;
}

.industry-card:hover {
    border-color: rgba(76, 157, 255, .46);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 30px 70px -42px rgba(0, 132, 255, .9);
    transform: translateY(-3px);
}

.industry-card:hover::after { background: rgba(34, 142, 255, .16); }

.industry-card__top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.industry-card__number {
    color: rgba(191, 215, 255, .62);
    font-size: 14px;
    letter-spacing: .16em;
}

.industry-card__icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: .5px solid rgba(97, 167, 255, .3);
    border-radius: 14px;
    background: rgba(8, 41, 91, .74);
    color: #75c5ff;
    box-shadow: inset 0 0 24px rgba(18, 121, 255, .1), 0 0 24px rgba(18, 121, 255, .08);
}

.industry-card__icon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.industry-card h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 13px;
    color: var(--color-text);
    font-size: clamp(19px, 1.35vw, 22px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.35px;
}

.industry-card p {
    position: relative;
    z-index: 1;
    color: var(--color-text-soft);
    font-size: 14.5px;
    line-height: 1.55;
}

.industry-card ul {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 7px;
    margin: 20px 0 24px;
    padding: 0;
    list-style: none;
}

.industry-card li {
    position: relative;
    padding-left: 17px;
    color: #c6d4ee;
    font-size: 13.5px;
    line-height: 1.5;
}

.industry-card li::before {
    content: "";
    position: absolute;
    top: .62em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #35bfff;
    box-shadow: 0 0 8px rgba(53, 191, 255, .75);
}

.industry-card__link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 9px;
    margin-top: auto;
    color: #73c5ff;
    font-size: 14px;
    text-decoration: none;
}

.industry-card__link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -7px;
    left: 0;
    height: .5px;
    background: linear-gradient(90deg, rgba(63, 183, 255, .12), rgba(63, 183, 255, .75), rgba(242, 200, 147, .18));
}

.industry-card__link svg { width: 17px; height: 17px; transition: transform .2s ease; }
.industry-card__link:hover svg { transform: translateX(4px); }

.industry-card--wide {
    grid-column: 1 / -1;
    min-height: 270px;
}

.industry-card__wide-content {
    display: grid;
    grid-template-columns: 1.15fr .9fr auto;
    align-items: end;
    gap: 36px;
}

.industry-card--wide ul { margin: 0; }
.industry-card--wide .industry-card__link { margin-top: 0; align-self: end; }

.industries-context {
    padding: clamp(78px, 8vw, 110px) 0;
}

.industries-context::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 14% 42%, rgba(42, 117, 228, .14), transparent 31%),
        radial-gradient(circle at 86% 58%, rgba(0, 201, 255, .08), transparent 32%),
        linear-gradient(110deg, rgba(5, 35, 80, .97), rgba(5, 25, 60, .82));
}

.industries-context::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: min(76vw, 1220px);
    background-image:
        linear-gradient(90deg, rgba(4, 27, 65, .08) 0%, rgba(4, 27, 65, .04) 52%, rgba(4, 27, 65, .56) 78%, #041b41 100%),
        linear-gradient(180deg, #041b41 0%, rgba(4, 27, 65, .08) 18%, rgba(4, 27, 65, .06) 78%, #041b41 100%),
        url("../../img/galuzi-context-bg.webp");
    background-repeat: no-repeat;
    background-position: center, center, left center;
    background-size: 100% 100%, 100% 100%, cover;
    opacity: .43;
    filter: saturate(.82) contrast(1.04);
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, #000 54%, rgba(0, 0, 0, .72) 74%, transparent 100%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, #000 54%, rgba(0, 0, 0, .72) 74%, transparent 100%);
    pointer-events: none;
}

.industries-context__header {
    max-width: 1000px;
    margin: 0 auto clamp(34px, 4vw, 52px);
    text-align: center;
}

.industries-context__header .section-eyebrow {
    justify-content: center;
}

.industries-context__header > p:last-child {
    max-width: 920px;
    margin: 22px auto 0;
    color: var(--color-text-soft);
    font-size: var(--fs-body);
    line-height: 1.7;
}

.industries-context__table-wrap {
    position: relative;
    overflow: hidden;
    border: .5px solid rgba(110, 170, 255, .25);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(17, 48, 97, .66), rgba(7, 29, 66, .84));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 24px 70px rgba(0, 9, 31, .2);
    backdrop-filter: blur(12px);
}

.industries-context__table-wrap::before {
    content: "";
    display: block;
    height: .5px;
    background: linear-gradient(90deg, transparent, rgba(91, 180, 255, .72) 22%, rgba(218, 238, 255, .85) 50%, rgba(91, 180, 255, .72) 78%, transparent);
}

.industries-context__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.industries-context__table th,
.industries-context__table td {
    padding: 20px clamp(20px, 3vw, 38px);
    text-align: left;
    vertical-align: top;
}

.industries-context__table thead th {
    color: #c8e5ff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: rgba(24, 66, 126, .34);
}

.industries-context__table thead th:first-child,
.industries-context__table tbody th {
    width: 35%;
}

.industries-context__table tbody tr {
    transition: background-color .25s ease, box-shadow .25s ease;
}

.industries-context__table tbody tr + tr {
    border-top: .5px solid rgba(104, 166, 255, .2);
}

.industries-context__table tbody tr:hover {
    background: linear-gradient(90deg, rgba(29, 103, 205, .18), rgba(19, 73, 151, .08));
    box-shadow: inset 3px 0 0 rgba(53, 157, 255, .72);
}

.industries-context__table tbody th {
    color: var(--color-text-light);
    font-size: 16px;
    font-weight: 550;
    line-height: 1.45;
}

.industries-context__table td {
    color: var(--color-text-soft);
    font-size: 15px;
    line-height: 1.65;
}

.industries-page .service-cta__heading .is-accent,
.industries-page .service-faq__heading .is-accent {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Industries FAQ: proportions and states from the Figma accordion. */
.industries-page .service-faq {
    padding: 104px 0 116px;
    background-color: #03183b;
    background-image:
        radial-gradient(circle at 50% 13%, rgba(42, 111, 213, .045) 0%, transparent 35%),
        linear-gradient(180deg, #03183b 0%, #03183b 100%);
}

.industries-page .service-faq::before {
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    width: 1920px;
    height: 654px;
    aspect-ratio: auto;
    background: url("../../img/galuzi-faq-bg.webp") center bottom / 100% auto no-repeat;
    opacity: .52;
    filter: saturate(.78) brightness(.68);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .72) 7%, #000 16%, #000 84%, rgba(0, 0, 0, .72) 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .72) 7%, #000 16%, #000 84%, rgba(0, 0, 0, .72) 93%, transparent 100%);
    transform: translateX(-50%);
}

.industries-page .service-faq::after {
    background: linear-gradient(90deg, rgba(6, 29, 69, .2), rgba(6, 29, 69, .04) 50%, rgba(6, 29, 69, .2));
}

.industries-page .service-faq > .container {
    gap: 48px;
}

.industries-page .service-faq__title {
    gap: 16px;
}

.industries-page .service-faq__heading {
    max-width: 912px;
    font-size: clamp(34px, 3.4vw, 48px);
    font-weight: 300;
    letter-spacing: -1.25px;
}

.industries-page .service-faq__heading .faq-heading__emphasis {
    color: var(--color-text-light);
    font-weight: 600;
}

.industries-page .service-faq .rich-bullets {
    grid-template-columns: 1fr;
    gap: 6px;
}

.industries-page .service-faq .rich-bullets li {
    padding-left: 2px;
}

@media (max-width: 1100px) {
    .industries-hero { min-height: min(600px, calc(100svh - 114px)); }
    .industries-hero__layout { grid-template-columns: minmax(0, 1fr) minmax(370px, .82fr); gap: 10px; }
    
    
    .industry-card__wide-content { grid-template-columns: 1fr 1fr; }
    .industry-card--wide .industry-card__link { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
    .industries-hero { min-height: 0; padding-bottom: 54px; }
    .industries-hero__layout { grid-template-columns: 1fr; }
    .industries-hero__content { max-width: 720px; }
    .industries-hero__experience { width: min(100%, 420px); margin: 30px 0 0; }
    
    
    
    
    
    
    .industries-grid { grid-template-columns: 1fr; }
    .industry-card--wide { grid-column: auto; min-height: 410px; }
    .industry-card__wide-content { display: contents; }
    .industry-card--wide ul { margin: 20px 0 24px; }
    .industry-card--wide .industry-card__link { grid-column: auto; margin-top: auto; }
}

@media (max-width: 640px) {
    .industries-hero { padding-top: 22px; }
    .industries-hero__heading { font-size: clamp(34px, 11vw, 46px); letter-spacing: -1.45px; }
    .industries-hero__intro { font-size: 16px; line-height: 1.5; }
    .industries-hero__experience { padding: 17px 18px; }
    .industries-hero__experience-stat strong { font-size: 32px; }
    
    
    
    
    
    
    
    
    
    .industries-list { padding: 68px 0; }
    .industries-list__title { margin-bottom: 32px; }
    .industry-card { min-height: 0; padding: 24px; }
    .industry-card ul { margin-bottom: 28px; }
    .industry-card__link { margin-top: 4px; }
    .industries-context__header > p:last-child { font-size: 15px; }
    .industries-context::after {
        width: 100%;
        background-position: center, center, 30% center;
        background-size: 100% 100%, 100% 100%, auto 100%;
        opacity: .25;
        -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .42) 38%, transparent 72%);
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .42) 38%, transparent 72%);
    }
    .industries-context__table-wrap {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }
    .industries-context__table-wrap::before { margin-bottom: 12px; }
    .industries-context__table,
    .industries-context__table tbody,
    .industries-context__table tr,
    .industries-context__table th,
    .industries-context__table td { display: block; width: 100%; }

    /* Скасування ширини колонки на мобільному.
       Правило вище має вагу (0,1,1) — один клас + один тег, — а базове
       `.industries-context__table tbody th { width: 35% }` аж (0,1,2):
       клас + tbody + th. Медіа-запит ваги не додає, тож 35% перемагали
       і заголовок рядка стискався до третини картки (100px із 288,
       праворуч 203px порожнечі), поки опис під ним ішов на всю ширину.
       Той самий дефект є і в оригінальному шаблоні замовника.
       Тому дублюємо селектор з тією ж вагою (0,1,2) — далі по файлу,
       отже виграє він. */
    .industries-context__table tbody th,
    .industries-context__table tbody td { width: 100%; }

    .industries-context__table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .industries-context__table tbody tr {
        overflow: hidden;
        margin-top: 12px;
        border: .5px solid rgba(110, 170, 255, .22);
        border-radius: 10px;
        background: linear-gradient(135deg, rgba(17, 48, 97, .66), rgba(7, 29, 66, .84));
    }
    .industries-context__table tbody tr + tr { border-image: none; }
    .industries-context__table th,
    .industries-context__table td { padding: 18px 20px; }
    .industries-context__table tbody th { padding-bottom: 10px; color: #d7edff; }
    .industries-context__table td { padding-top: 0; font-size: 14px; }
    .industries-page .service-faq { padding: 66px 0 74px; }
    .industries-page .service-faq::before {
        width: 1180px;
        height: 420px;
        opacity: .4;
        background-size: 100% auto;
    }
    .industries-page .service-faq > .container { gap: 34px; }
}

@media (prefers-reduced-motion: reduce) {
    .industry-card,
    .industry-card__link svg { transition: none; }
}

/* Hero background image. This replaces the previous CSS building/orbits. */
.industries-hero::before {
    content: none;
}

.industries-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    border-radius: 0;
    background:
        linear-gradient(
            90deg,
            rgba(3, 28, 69, .98) 0%,
            rgba(3, 28, 69, .92) 27%,
            rgba(3, 28, 69, .68) 44%,
            rgba(3, 28, 69, .22) 61%,
            rgba(3, 28, 69, 0) 76%
        ),
        linear-gradient(180deg, rgba(3, 28, 69, .08) 62%, rgba(3, 28, 69, .62) 100%);
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
    pointer-events: none;
}

.industries-hero__background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 0;
    display: block;
    width: auto;
    height: 100%;
    aspect-ratio: 5 / 3;
    background-image: url("../../img/galuzi-hero.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0,
        rgba(0, 0, 0, .16) 38px,
        rgba(0, 0, 0, .52) 96px,
        #000 200px,
        #000 calc(100% - 200px),
        rgba(0, 0, 0, .52) calc(100% - 96px),
        rgba(0, 0, 0, .16) calc(100% - 38px),
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0,
        rgba(0, 0, 0, .16) 38px,
        rgba(0, 0, 0, .52) 96px,
        #000 200px,
        #000 calc(100% - 200px),
        rgba(0, 0, 0, .52) calc(100% - 96px),
        rgba(0, 0, 0, .16) calc(100% - 38px),
        transparent 100%
    );
    pointer-events: none;
}

.industries-hero__layout {
    position: relative;
    z-index: 2;
}

@media (min-width: 1800px) {
    .industries-hero__background {
        right: 0;
    }
}

@media (max-width: 1100px) {
    .industries-hero__background {
        right: 0;
    }

    .industries-hero::after {
        background:
            linear-gradient(90deg, rgba(3, 28, 69, .97) 0%, rgba(3, 28, 69, .88) 43%, rgba(3, 28, 69, .38) 72%, rgba(3, 28, 69, .12) 100%),
            linear-gradient(180deg, rgba(3, 28, 69, .06) 55%, rgba(3, 28, 69, .72) 100%);
    }
}

@media (max-width: 860px) {
    .industries-hero__background {
        right: 0;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 120px, #000 calc(100% - 120px), transparent);
        mask-image: linear-gradient(90deg, transparent, #000 120px, #000 calc(100% - 120px), transparent);
    }

    .industries-hero::after {
        background:
            linear-gradient(90deg, rgba(3, 28, 69, .94), rgba(3, 28, 69, .7)),
            linear-gradient(180deg, rgba(3, 28, 69, .16) 42%, rgba(3, 28, 69, .88) 100%);
    }
}

@media (max-width: 640px) {
    .industries-hero__background {
        right: 0;
        background-position: center;
        background-size: 100% 100%;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent);
        mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent);
    }

    .industries-hero::after {
        background: linear-gradient(90deg, rgba(3, 28, 69, .94), rgba(3, 28, 69, .76));
    }
}

/* Industries list — horizontal panels based on the Figma section 152:8227. */
.industries-list {
    background:
        radial-gradient(circle at 7% 22%, rgba(28, 103, 204, .11), transparent 27%),
        var(--color-bg);
}

.industries-list__title {
    max-width: 820px;
    margin-right: auto;
    margin-bottom: 42px;
    margin-left: auto;
    text-align: center;
}

.industries-list__title .section-eyebrow {
    justify-content: center;
}

.industries-grid {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 1020px);
    margin: 0 auto;
    gap: 18px;
}

.industry-card,
.industry-card--wide {
    display: flex;
    grid-column: auto;
    min-height: 276px;
    padding: 28px 50% 26px 30px;
    border: 1px solid rgba(94, 153, 229, .18);
    border-radius: 13px;
    background: linear-gradient(105deg, rgba(12, 43, 89, .92) 0%, rgba(5, 27, 65, .96) 48%, rgba(4, 22, 54, .9) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035),
        0 22px 48px -38px rgba(0, 0, 0, .92);
    transform: none;
}

.industry-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: 53%;
    background-image:
        linear-gradient(90deg, #061d46 0%, rgba(6, 29, 70, .74) 16%, rgba(6, 29, 70, .16) 47%, rgba(3, 18, 45, .12) 100%),
        linear-gradient(180deg, rgba(3, 28, 69, .12), rgba(3, 20, 50, .34)),
        url("../../img/galuzi-hero.webp");
    background-repeat: no-repeat;
    background-position: center, center, 72% center;
    background-size: 100% 100%, 100% 100%, auto 125%;
    opacity: .78;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 19%, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 19%, #000 88%, transparent 100%);
    pointer-events: none;
}

.industry-card::after {
    top: auto;
    right: 10%;
    bottom: -48%;
    z-index: 0;
    width: 48%;
    height: 80%;
    background: rgba(23, 117, 255, .11);
    filter: blur(42px);
}

.industry-card:nth-child(1)::before {
    background-image:
        linear-gradient(90deg, #061d46 0%, rgba(6, 29, 70, .94) 14%, rgba(6, 29, 70, .48) 27%, rgba(6, 29, 70, .08) 46%, rgba(3, 20, 50, .12) 72%, rgba(3, 20, 50, .7) 91%, #061d46 100%),
        linear-gradient(180deg, #061d46 0%, rgba(6, 29, 70, .82) 15%, rgba(6, 29, 70, .18) 31%, transparent 47%, rgba(3, 20, 50, .2) 69%, rgba(3, 20, 50, .84) 88%, #061d46 100%),
        url("../../img/galuzi-card-residential.webp");
    background-position: center, center, 66% center;
    background-size: 100% 100%, 100% 100%, auto 85%;
    opacity: .88;
    -webkit-mask-image: radial-gradient(
        ellipse 82% 86% at 54% 50%,
        #000 26%,
        rgba(0, 0, 0, .9) 40%,
        rgba(0, 0, 0, .48) 61%,
        rgba(0, 0, 0, .12) 80%,
        transparent 100%
    );
    mask-image: radial-gradient(
        ellipse 82% 86% at 54% 50%,
        #000 26%,
        rgba(0, 0, 0, .9) 40%,
        rgba(0, 0, 0, .48) 61%,
        rgba(0, 0, 0, .12) 80%,
        transparent 100%
    );
}
.industry-card:nth-child(2)::before {
    background-image:
        linear-gradient(90deg, #061d46 0%, rgba(6, 29, 70, .94) 14%, rgba(6, 29, 70, .46) 28%, rgba(6, 29, 70, .06) 48%, rgba(3, 20, 50, .1) 74%, rgba(3, 20, 50, .68) 92%, #061d46 100%),
        linear-gradient(180deg, #061d46 0%, rgba(6, 29, 70, .76) 13%, rgba(6, 29, 70, .12) 30%, transparent 49%, rgba(3, 20, 50, .17) 70%, rgba(3, 20, 50, .82) 89%, #061d46 100%),
        url("../../img/galuzi-card-industrial.webp");
    background-position: center, center, 72% center;
    background-size: 100% 100%, 100% 100%, auto 73%;
    opacity: .9;
    -webkit-mask-image: radial-gradient(
        ellipse 84% 88% at 55% 50%,
        #000 27%,
        rgba(0, 0, 0, .92) 42%,
        rgba(0, 0, 0, .5) 63%,
        rgba(0, 0, 0, .13) 82%,
        transparent 100%
    );
    mask-image: radial-gradient(
        ellipse 84% 88% at 55% 50%,
        #000 27%,
        rgba(0, 0, 0, .92) 42%,
        rgba(0, 0, 0, .5) 63%,
        rgba(0, 0, 0, .13) 82%,
        transparent 100%
    );
}
.industry-card:nth-child(3)::before {
    background-image:
        linear-gradient(90deg, #061d46 0%, rgba(6, 29, 70, .94) 14%, rgba(6, 29, 70, .46) 28%, rgba(6, 29, 70, .06) 48%, rgba(3, 20, 50, .1) 74%, rgba(3, 20, 50, .68) 92%, #061d46 100%),
        linear-gradient(180deg, #061d46 0%, rgba(6, 29, 70, .76) 13%, rgba(6, 29, 70, .12) 30%, transparent 49%, rgba(3, 20, 50, .17) 70%, rgba(3, 20, 50, .82) 89%, #061d46 100%),
        url("../../img/galuzi-card-public.webp");
    background-position: center, center, 74% center;
    background-size: 100% 100%, 100% 100%, auto 96%;
    opacity: .9;
    -webkit-mask-image: radial-gradient(
        ellipse 84% 88% at 55% 50%,
        #000 27%,
        rgba(0, 0, 0, .92) 42%,
        rgba(0, 0, 0, .5) 63%,
        rgba(0, 0, 0, .13) 82%,
        transparent 100%
    );
    mask-image: radial-gradient(
        ellipse 84% 88% at 55% 50%,
        #000 27%,
        rgba(0, 0, 0, .92) 42%,
        rgba(0, 0, 0, .5) 63%,
        rgba(0, 0, 0, .13) 82%,
        transparent 100%
    );
}
.industry-card:nth-child(4)::before { background-position: center, center, 61% 48%; }
.industry-card:nth-child(5)::before { background-position: center, center, 58% 46%; }
.industry-card:nth-child(6)::before { background-position: center, center, 58% 46%; }
.industry-card:nth-child(7)::before { background-position: center, center, 8% 58%; }

.industry-card:hover {
    border-color: rgba(91, 165, 255, .38);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 25px 54px -38px rgba(21, 112, 239, .48);
    transform: translateY(-2px);
}

.industry-card__top {
    justify-content: flex-start;
    width: 100%;
    max-width: 440px;
    margin-bottom: 12px;
    gap: 11px;
}

.industry-card__icon {
    order: -1;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #7ac9ff;
    box-shadow: none;
}

.industry-card__icon svg {
    width: 42px;
    height: 42px;
    overflow: visible;
    stroke-width: 1.15;
    filter: drop-shadow(0 0 5px rgba(78, 177, 255, .2));
}

.industry-card__number {
    color: rgba(150, 190, 244, .48);
    font-size: 11px;
    letter-spacing: .13em;
}

.industry-card h3,
.industry-card p,
.industry-card ul,
.industry-card__link {
    max-width: 440px;
}

.industry-card h3 {
    margin-bottom: 9px;
    font-size: clamp(20px, 1.7vw, 24px);
}

.industry-card p {
    font-size: 13px;
    line-height: 1.52;
}

.industry-card ul,
.industry-card--wide ul {
    gap: 4px;
    margin: 12px 0 17px;
}

.industry-card li {
    font-size: 12px;
    line-height: 1.42;
}

.industry-card__link,
.industry-card--wide .industry-card__link {
    min-height: 34px;
    margin-top: auto;
    padding: 7px 15px;
    border: 1px solid rgba(184, 209, 255, .18);
    border-radius: 8px;
    background: linear-gradient(90deg, #3971eb 0%, #4c8dff 100%);
    color: #f2f6ff;
    font-size: 12px;
    line-height: 18px;
    box-shadow: 0 12px 28px -16px rgba(76, 141, 255, .72);
}

.industry-card__link::after {
    content: none;
}

.industry-card__wide-content {
    display: contents;
}

@media (max-width: 760px) {
    .industry-card,
    .industry-card--wide {
        min-height: 410px;
        padding: 205px 22px 23px;
    }

    .industry-card::before {
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        width: 100%;
        height: 205px;
        background-image:
            linear-gradient(180deg, rgba(3, 22, 54, .08) 0%, rgba(5, 27, 65, .24) 55%, #061d46 100%),
            url("../../img/galuzi-hero.webp");
        background-position: center, 72% center;
        background-size: 100% 100%, auto 145%;
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 76%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 0%, #000 76%, transparent 100%);
    }

    .industry-card h3,
    .industry-card p,
    .industry-card ul,
    .industry-card__link,
    .industry-card__top {
        max-width: none;
    }

    .industry-card:nth-child(1)::before {
        background-image:
            linear-gradient(180deg, #061d46 0%, rgba(6, 29, 70, .6) 18%, rgba(5, 27, 65, .06) 43%, rgba(5, 27, 65, .2) 66%, #061d46 100%),
            linear-gradient(90deg, #061d46 0%, rgba(6, 29, 70, .16) 24%, rgba(6, 29, 70, .08) 72%, #061d46 100%),
            url("../../img/galuzi-card-residential.webp");
        background-position: center, center, 66% center;
        background-size: 100% 100%, 100% 100%, auto 81%;
        opacity: .86;
        -webkit-mask-image: radial-gradient(ellipse 92% 92% at 50% 43%, #000 34%, rgba(0, 0, 0, .82) 57%, rgba(0, 0, 0, .2) 82%, transparent 100%);
        mask-image: radial-gradient(ellipse 92% 92% at 50% 43%, #000 34%, rgba(0, 0, 0, .82) 57%, rgba(0, 0, 0, .2) 82%, transparent 100%);
    }

    .industry-card:nth-child(2)::before {
        background-image:
            linear-gradient(180deg, #061d46 0%, rgba(6, 29, 70, .58) 17%, rgba(5, 27, 65, .05) 42%, rgba(5, 27, 65, .18) 67%, #061d46 100%),
            linear-gradient(90deg, #061d46 0%, rgba(6, 29, 70, .14) 23%, rgba(6, 29, 70, .07) 73%, #061d46 100%),
            url("../../img/galuzi-card-industrial.webp");
        background-position: center, center, 72% center;
        background-size: 100% 100%, 100% 100%, auto 67%;
        opacity: .88;
        -webkit-mask-image: radial-gradient(ellipse 92% 92% at 52% 44%, #000 33%, rgba(0, 0, 0, .84) 56%, rgba(0, 0, 0, .2) 82%, transparent 100%);
        mask-image: radial-gradient(ellipse 92% 92% at 52% 44%, #000 33%, rgba(0, 0, 0, .84) 56%, rgba(0, 0, 0, .2) 82%, transparent 100%);
    }

    .industry-card:nth-child(3)::before {
        background-image:
            linear-gradient(180deg, #061d46 0%, rgba(6, 29, 70, .58) 17%, rgba(5, 27, 65, .05) 42%, rgba(5, 27, 65, .18) 67%, #061d46 100%),
            linear-gradient(90deg, #061d46 0%, rgba(6, 29, 70, .14) 23%, rgba(6, 29, 70, .07) 73%, #061d46 100%),
            url("../../img/galuzi-card-public.webp");
        background-position: center, center, 74% center;
        background-size: 100% 100%, 100% 100%, auto 88%;
        opacity: .88;
        -webkit-mask-image: radial-gradient(ellipse 92% 92% at 52% 44%, #000 33%, rgba(0, 0, 0, .84) 56%, rgba(0, 0, 0, .2) 82%, transparent 100%);
        mask-image: radial-gradient(ellipse 92% 92% at 52% 44%, #000 33%, rgba(0, 0, 0, .84) 56%, rgba(0, 0, 0, .2) 82%, transparent 100%);
    }
}


/* Clearer visuals for the first three industry cards: fade only at the edges. */
.industry-card:nth-child(1) {
    --industry-visual: url("../../img/galuzi-card-residential.webp");
    --industry-visual-size: 77%;
    --industry-visual-mobile-size: 73%;
    --industry-visual-position: 66% center;
}

.industry-card:nth-child(4) {
    --industry-visual: url("../../img/galuzi-card-industrial.webp");
    --industry-visual-size: 90%;
    --industry-visual-mobile-size: 84%;
    --industry-visual-position: 72% center;
}

.industry-card:nth-child(3) {
    --industry-visual: url("../../img/galuzi-card-public.webp");
    --industry-visual-size: 86%;
    --industry-visual-mobile-size: 79%;
    --industry-visual-position: 74% center;
}

.industry-card:nth-child(-n + 3)::before {
    width: 60%;
    background-image:
        linear-gradient(90deg, #061d46 0%, rgba(6, 29, 70, .92) 9%, rgba(6, 29, 70, .56) 18%, rgba(6, 29, 70, .18) 30%, transparent 42%, transparent 72%, rgba(3, 20, 50, .2) 82%, rgba(3, 20, 50, .64) 92%, #061d46 100%),
        linear-gradient(180deg, #061d46 0%, rgba(6, 29, 70, .84) 9%, rgba(6, 29, 70, .34) 20%, transparent 34%, transparent 68%, rgba(3, 20, 50, .36) 84%, rgba(3, 20, 50, .82) 94%, #061d46 100%),
        var(--industry-visual);
    background-position: center, center, var(--industry-visual-position);
    background-size: 100% 100%, 100% 100%, auto var(--industry-visual-size);
    opacity: .96;
    -webkit-mask-image: radial-gradient(ellipse 98% 98% at 53% 50%, #000 62%, rgba(0, 0, 0, .86) 75%, rgba(0, 0, 0, .28) 90%, transparent 100%);
    mask-image: radial-gradient(ellipse 98% 98% at 53% 50%, #000 62%, rgba(0, 0, 0, .86) 75%, rgba(0, 0, 0, .28) 90%, transparent 100%);
}

@media (min-width: 761px) {
    .industry-card:nth-child(-n + 3)::after {
        top: 0;
        right: auto;
        bottom: 0;
        left: 34%;
        z-index: 0;
        width: 30%;
        height: auto;
        border-radius: 0;
        background: linear-gradient(
            90deg,
            rgba(6, 29, 70, .96) 0%,
            rgba(6, 29, 70, .72) 30%,
            rgba(6, 29, 70, .3) 62%,
            transparent 100%
        );
        filter: blur(18px);
        opacity: 1;
        pointer-events: none;
    }
}

@media (max-width: 760px) {
    .industry-card:nth-child(-n + 3)::before {
        background-image:
            linear-gradient(180deg, #061d46 0%, rgba(6, 29, 70, .8) 10%, rgba(6, 29, 70, .34) 22%, transparent 36%, transparent 68%, rgba(3, 20, 50, .38) 84%, rgba(3, 20, 50, .86) 94%, #061d46 100%),
            linear-gradient(90deg, #061d46 0%, rgba(6, 29, 70, .72) 10%, rgba(6, 29, 70, .24) 22%, transparent 36%, transparent 74%, rgba(3, 20, 50, .28) 88%, rgba(3, 20, 50, .78) 96%, #061d46 100%),
            var(--industry-visual);
        background-position: center, center, var(--industry-visual-position);
        background-size: 100% 100%, 100% 100%, auto var(--industry-visual-mobile-size);
        opacity: .95;
        -webkit-mask-image: radial-gradient(ellipse 98% 98% at 52% 46%, #000 62%, rgba(0, 0, 0, .84) 76%, rgba(0, 0, 0, .24) 91%, transparent 100%);
        mask-image: radial-gradient(ellipse 98% 98% at 52% 46%, #000 62%, rgba(0, 0, 0, .84) 76%, rgba(0, 0, 0, .24) 91%, transparent 100%);
    }
}

/* Seamless dark-background blend for the Residential BIM artwork. */
.industry-card:nth-child(1)::before {
    top: 50%;
    right: 0;
    bottom: auto;
    width: auto;
    height: var(--industry-visual-size);
    aspect-ratio: 1672 / 941;
    transform: translateY(-50%);
    background-image:
        linear-gradient(180deg, #061d46 0%, rgba(6, 29, 70, .64) 8%, rgba(6, 29, 70, .12) 20%, transparent 31%, transparent 70%, rgba(3, 20, 50, .14) 82%, rgba(3, 20, 50, .68) 93%, #061d46 100%),
        var(--industry-visual);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%, 100% 100%;
    opacity: .96;
    mix-blend-mode: normal;
    filter: none;
    -webkit-mask-image: radial-gradient(
        ellipse 81% 65% at 68% 50%,
        #000 36%,
        rgba(0, 0, 0, .9) 50%,
        rgba(0, 0, 0, .52) 66%,
        rgba(0, 0, 0, .14) 83%,
        transparent 100%
    ), radial-gradient(circle at 0 0, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .06) 19%, transparent 38%);
    mask-image: radial-gradient(
        ellipse 81% 65% at 68% 50%,
        #000 36%,
        rgba(0, 0, 0, .9) 50%,
        rgba(0, 0, 0, .52) 66%,
        rgba(0, 0, 0, .14) 83%,
        transparent 100%
    ), radial-gradient(circle at 0 0, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .06) 19%, transparent 38%);
}

@media (max-width: 760px) {
    .industry-card:nth-child(1)::before {
        top: 0;
        right: 50%;
        bottom: auto;
        width: auto;
        height: var(--industry-visual-mobile-size);
        aspect-ratio: 1672 / 941;
        transform: translateX(50%);
        opacity: .94;
        -webkit-mask-image: radial-gradient(ellipse 81% 64% at 66% 48%, #000 35%, rgba(0, 0, 0, .88) 49%, rgba(0, 0, 0, .48) 65%, rgba(0, 0, 0, .12) 82%, transparent 100%), radial-gradient(circle at 0 0, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .06) 19%, transparent 38%);
        mask-image: radial-gradient(ellipse 81% 64% at 66% 48%, #000 35%, rgba(0, 0, 0, .88) 49%, rgba(0, 0, 0, .48) 65%, rgba(0, 0, 0, .12) 82%, transparent 100%), radial-gradient(circle at 0 0, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .06) 19%, transparent 38%);
    }
}

/* Commercial BIM artwork: clear centre with a seamless four-side fade. */
.industry-card:nth-child(2) {
    --industry-commercial-visual: url("../../img/galuzi-card-commercial.webp");
    --industry-commercial-size: 90%;
    --industry-commercial-mobile-size: 84%;
}

.industry-card:nth-child(2)::before {
    top: 50%;
    right: 0;
    bottom: auto;
    width: auto;
    height: var(--industry-commercial-size);
    aspect-ratio: 1672 / 941;
    transform: translateY(-50%);
    background-image: var(--industry-commercial-visual);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    opacity: .96;
    filter: none;
    -webkit-mask-image: radial-gradient(
        ellipse 78% 58% at 58% 50%,
        #000 43%,
        rgba(0, 0, 0, .92) 56%,
        rgba(0, 0, 0, .56) 71%,
        rgba(0, 0, 0, .16) 87%,
        transparent 100%
    );
    mask-image: radial-gradient(
        ellipse 78% 58% at 58% 50%,
        #000 43%,
        rgba(0, 0, 0, .92) 56%,
        rgba(0, 0, 0, .56) 71%,
        rgba(0, 0, 0, .16) 87%,
        transparent 100%
    );
}

@media (max-width: 760px) {
    .industry-card:nth-child(2)::before {
        top: 0;
        right: 50%;
        bottom: auto;
        width: auto;
        height: var(--industry-commercial-mobile-size);
        aspect-ratio: 1672 / 941;
        transform: translateX(50%);
        opacity: .94;
        -webkit-mask-image: radial-gradient(ellipse 77% 56% at 55% 47%, #000 40%, rgba(0, 0, 0, .9) 54%, rgba(0, 0, 0, .52) 69%, rgba(0, 0, 0, .14) 85%, transparent 100%);
        mask-image: radial-gradient(ellipse 77% 56% at 55% 47%, #000 40%, rgba(0, 0, 0, .9) 54%, rgba(0, 0, 0, .52) 69%, rgba(0, 0, 0, .14) 85%, transparent 100%);
    }
}

/* Preserve the Industrial BIM artwork after moving its card to position 04. */
.industry-card:nth-child(4)::before {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 60%;
    height: auto;
    aspect-ratio: auto;
    transform: none;
    background-image:
        linear-gradient(90deg, #061d46 0%, rgba(6, 29, 70, .92) 9%, rgba(6, 29, 70, .56) 18%, rgba(6, 29, 70, .18) 30%, transparent 42%, transparent 72%, rgba(3, 20, 50, .2) 82%, rgba(3, 20, 50, .64) 92%, #061d46 100%),
        linear-gradient(180deg, #061d46 0%, rgba(6, 29, 70, .84) 9%, rgba(6, 29, 70, .34) 20%, transparent 34%, transparent 68%, rgba(3, 20, 50, .36) 84%, rgba(3, 20, 50, .82) 94%, #061d46 100%),
        var(--industry-visual);
    background-repeat: no-repeat;
    background-position: center, center, var(--industry-visual-position);
    background-size: 100% 100%, 100% 100%, auto var(--industry-visual-size);
    opacity: .96;
    filter: none;
    -webkit-mask-image: radial-gradient(ellipse 98% 98% at 53% 50%, #000 62%, rgba(0, 0, 0, .86) 75%, rgba(0, 0, 0, .28) 90%, transparent 100%);
    mask-image: radial-gradient(ellipse 98% 98% at 53% 50%, #000 62%, rgba(0, 0, 0, .86) 75%, rgba(0, 0, 0, .28) 90%, transparent 100%);
}

@media (min-width: 761px) {
    .industry-card:nth-child(2)::after {
        top: auto;
        right: 10%;
        bottom: -48%;
        left: auto;
        width: 48%;
        height: 80%;
        border-radius: 50%;
        background: rgba(23, 117, 255, .11);
        filter: blur(42px);
    }

    .industry-card:nth-child(4)::after {
        top: 0;
        right: auto;
        bottom: 0;
        left: 34%;
        width: 30%;
        height: auto;
        border-radius: 0;
        background: linear-gradient(90deg, rgba(6, 29, 70, .96) 0%, rgba(6, 29, 70, .72) 30%, rgba(6, 29, 70, .3) 62%, transparent 100%);
        filter: blur(18px);
        opacity: 1;
    }
}

@media (max-width: 760px) {
    .industry-card:nth-child(4)::before {
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        width: 100%;
        height: 205px;
        background-image:
            linear-gradient(180deg, #061d46 0%, rgba(6, 29, 70, .8) 10%, rgba(6, 29, 70, .34) 22%, transparent 36%, transparent 68%, rgba(3, 20, 50, .38) 84%, rgba(3, 20, 50, .86) 94%, #061d46 100%),
            linear-gradient(90deg, #061d46 0%, rgba(6, 29, 70, .72) 10%, rgba(6, 29, 70, .24) 22%, transparent 36%, transparent 74%, rgba(3, 20, 50, .28) 88%, rgba(3, 20, 50, .78) 96%, #061d46 100%),
            var(--industry-visual);
        background-position: center, center, var(--industry-visual-position);
        background-size: 100% 100%, 100% 100%, auto var(--industry-visual-mobile-size);
        opacity: .95;
        -webkit-mask-image: radial-gradient(ellipse 98% 98% at 52% 46%, #000 62%, rgba(0, 0, 0, .84) 76%, rgba(0, 0, 0, .24) 91%, transparent 100%);
        mask-image: radial-gradient(ellipse 98% 98% at 52% 46%, #000 62%, rgba(0, 0, 0, .84) 76%, rgba(0, 0, 0, .24) 91%, transparent 100%);
    }
}

/* Defence BIM artwork: clear protected facility with a seamless perimeter fade. */
.industry-card:nth-child(5) {
    --industry-defence-visual: url("../../img/galuzi-card-defence.webp");
    --industry-defence-size: 87%;
    --industry-defence-mobile-size: 81%;
}

.industry-card:nth-child(5)::before {
    top: 50%;
    right: 0;
    bottom: auto;
    left: auto;
    width: auto;
    height: var(--industry-defence-size);
    aspect-ratio: 1671 / 941;
    transform: translateY(-50%);
    background-image:
        linear-gradient(180deg, #061d46 0%, rgba(6, 29, 70, .64) 8%, rgba(6, 29, 70, .12) 20%, transparent 31%, transparent 70%, rgba(3, 20, 50, .14) 82%, rgba(3, 20, 50, .68) 93%, #061d46 100%),
        var(--industry-defence-visual);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%, 100% 100%;
    opacity: .96;
    filter: none;
    -webkit-mask-image: radial-gradient(
        ellipse 75% 63% at 58% 50%,
        #000 38%,
        rgba(0, 0, 0, .88) 51%,
        rgba(0, 0, 0, .48) 67%,
        rgba(0, 0, 0, .12) 83%,
        transparent 100%
    );
    mask-image: radial-gradient(
        ellipse 75% 63% at 58% 50%,
        #000 38%,
        rgba(0, 0, 0, .88) 51%,
        rgba(0, 0, 0, .48) 67%,
        rgba(0, 0, 0, .12) 83%,
        transparent 100%
    );
}

@media (max-width: 760px) {
    .industry-card:nth-child(5)::before {
        top: 0;
        right: 50%;
        bottom: auto;
        left: auto;
        width: auto;
        height: var(--industry-defence-mobile-size);
        aspect-ratio: 1671 / 941;
        transform: translateX(50%);
        opacity: .94;
        -webkit-mask-image: radial-gradient(ellipse 74% 62% at 55% 47%, #000 36%, rgba(0, 0, 0, .86) 50%, rgba(0, 0, 0, .46) 66%, rgba(0, 0, 0, .1) 82%, transparent 100%);
        mask-image: radial-gradient(ellipse 74% 62% at 55% 47%, #000 36%, rgba(0, 0, 0, .86) 50%, rgba(0, 0, 0, .46) 66%, rgba(0, 0, 0, .1) 82%, transparent 100%);
    }
}

/* Medical BIM artwork: preserve detail and dissolve the image perimeter. */
.industry-card:nth-child(6) {
    --industry-medical-visual: url("../../img/galuzi-card-medical.webp");
    --industry-medical-size: 90%;
    --industry-medical-mobile-size: 84%;
}

.industry-card:nth-child(6)::before {
    top: 50%;
    right: 0;
    bottom: auto;
    width: auto;
    height: var(--industry-medical-size);
    aspect-ratio: 1672 / 941;
    transform: translateY(-50%);
    background-image:
        linear-gradient(180deg, #061d46 0%, rgba(6, 29, 70, .64) 8%, rgba(6, 29, 70, .12) 20%, transparent 31%, transparent 70%, rgba(3, 20, 50, .14) 82%, rgba(3, 20, 50, .68) 93%, #061d46 100%),
        var(--industry-medical-visual);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%, 100% 100%;
    opacity: .96;
    filter: none;
    -webkit-mask-image: radial-gradient(
        ellipse 78% 68% at 58% 50%,
        #000 43%,
        rgba(0, 0, 0, .92) 56%,
        rgba(0, 0, 0, .56) 71%,
        rgba(0, 0, 0, .16) 87%,
        transparent 100%
    );
    mask-image: radial-gradient(
        ellipse 78% 68% at 58% 50%,
        #000 43%,
        rgba(0, 0, 0, .92) 56%,
        rgba(0, 0, 0, .56) 71%,
        rgba(0, 0, 0, .16) 87%,
        transparent 100%
    );
}

@media (max-width: 760px) {
    .industry-card:nth-child(6)::before {
        top: 0;
        right: 50%;
        bottom: auto;
        width: auto;
        height: var(--industry-medical-mobile-size);
        aspect-ratio: 1672 / 941;
        transform: translateX(50%);
        opacity: .94;
        -webkit-mask-image: radial-gradient(ellipse 77% 66% at 55% 47%, #000 40%, rgba(0, 0, 0, .9) 54%, rgba(0, 0, 0, .52) 69%, rgba(0, 0, 0, .14) 85%, transparent 100%);
        mask-image: radial-gradient(ellipse 77% 66% at 55% 47%, #000 40%, rgba(0, 0, 0, .9) 54%, rgba(0, 0, 0, .52) 69%, rgba(0, 0, 0, .14) 85%, transparent 100%);
    }
}

/* Infrastructure BIM artwork: retain detail and blend all four image edges. */
.industry-card:nth-child(7) {
    --industry-infrastructure-visual: url("../../img/galuzi-card-infrastructure.webp");
    --industry-infrastructure-size: 90%;
    --industry-infrastructure-mobile-size: 84%;
}

.industry-card:nth-child(7)::before {
    top: 50%;
    right: 0;
    bottom: auto;
    left: auto;
    width: auto;
    height: var(--industry-infrastructure-size);
    aspect-ratio: 1672 / 941;
    transform: translateY(-50%);
    background-image: var(--industry-infrastructure-visual);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    opacity: .96;
    filter: none;
    -webkit-mask-image: radial-gradient(
        ellipse 75% 55% at 58% 50%,
        #000 38%,
        rgba(0, 0, 0, .88) 51%,
        rgba(0, 0, 0, .48) 67%,
        rgba(0, 0, 0, .12) 83%,
        transparent 100%
    );
    mask-image: radial-gradient(
        ellipse 75% 55% at 58% 50%,
        #000 38%,
        rgba(0, 0, 0, .88) 51%,
        rgba(0, 0, 0, .48) 67%,
        rgba(0, 0, 0, .12) 83%,
        transparent 100%
    );
}

@media (max-width: 760px) {
    .industry-card:nth-child(7)::before {
        top: 0;
        right: 50%;
        bottom: auto;
        left: auto;
        width: auto;
        height: var(--industry-infrastructure-mobile-size);
        aspect-ratio: 1672 / 941;
        transform: translateX(50%);
        opacity: .94;
        -webkit-mask-image: radial-gradient(ellipse 74% 54% at 55% 47%, #000 36%, rgba(0, 0, 0, .86) 50%, rgba(0, 0, 0, .46) 66%, rgba(0, 0, 0, .1) 82%, transparent 100%);
        mask-image: radial-gradient(ellipse 74% 54% at 55% 47%, #000 36%, rgba(0, 0, 0, .86) 50%, rgba(0, 0, 0, .46) 66%, rgba(0, 0, 0, .1) 82%, transparent 100%);
    }
}

/* Match the infrastructure card CTA placement to the other industry cards. */
.industry-card--wide .industry-card__link {
    align-self: flex-start;
}

@media (max-width: 640px) {
    .industry-card--wide .industry-card__link {
        margin-top: 4px;
    }
}




/* ── Фікс: фото карток на мобільному ───────────────────────────────────────
   Баг шаблону замовника (є і в оригіналі, перевірено на 425px).
   Змінна `--industry-*-mobile-size` на десктопі означає background-size —
   відсоток ВІД ФОТО-БЛОКУ. А в мобільних правилах карток 1, 2, 5, 6, 7 її
   підставили в `height` псевдоелемента, тобто у відсоток ВІД КАРТКИ. Картка
   на мобільному висока (508px+, бо містить увесь текст), тож 73% від неї
   плюс `aspect-ratio: 1672/941` дають блок 657–819px завширшки в картці
   на 393px: 40–52% кадру обрізано, а фокус маски (66%) взагалі падає за
   правий край. Звідси й порожня смуга зверху з уламком фото збоку.

   Картки 3 і 4 у шаблоні зроблені правильно — смугою 100% × 205px зі
   `background-size: auto <відсоток>`. Приводимо решту до тієї ж форми.

   `background-size: cover` замість перелічування шарів: у цих карток різна
   кількість фонових шарів (1–2), і задати `100% 100%, auto 84%` наосліп
   означало б розсинхронити список. `cover` коректний для всіх шарів одразу —
   градієнти й так заливають бокс, а фото кадрується без спотворення. */
@media (max-width: 760px) {
    .industry-card:nth-child(1)::before,
    .industry-card:nth-child(2)::before,
    .industry-card:nth-child(5)::before,
    .industry-card:nth-child(6)::before,
    .industry-card:nth-child(7)::before {
        right:            0;
        left:             0;
        width:            100%;
        height:           205px;
        aspect-ratio:     auto;
        transform:        none;
        background-size:  cover;
    }

    /* Картка 3 — той самий клас помилки, тільки джерело інше: її стискає
       десктопне `.industry-card:nth-child(-n + 3)::before { width: 60% }`.
       Мобільний скид `.industry-card::before { width: 100% }` важить (0,1,1)
       і програє йому (0,2,1), тож смуга виходила 235px замість 391.
       Картка 4 не постраждала лише тому, що має власне мобільне правило з
       такою ж вагою. Тут background-size не чіпаємо: у неї коректні три шари
       з `auto 88%`, зайве втручання тільки зіпсувало б кадрування. */
    .industry-card:nth-child(3)::before {
        right: 0;
        left:  0;
        width: 100%;
    }
}