/* ══════════════════════════════════════════════════════════════════════════
   Галузь — промислові об’єкти /galuzi/bim-dlya-promyslovyh-obyektiv/
   (templates/bim-dlya-promyslovyh-obyektiv.php)

   Портовано з `industrial-bim-page-template/industrial.css` замовника —
   ФІНАЛЬНИЙ стан каскаду: у файлі шаблону ті самі блоки перевизначені
   кілька разів (базові правила, «Industry story series», «FAQ synchronized
   with the residential page»), частина — з вищою специфічністю вище по
   файлу. Значення звірені вимірюванням у браузері.

   Блоки .ind-* замовник задумав як серію сторінок галузей. Поки сторінка
   одна — стилі тут; з появою другої галузі спільне варто винести.

   ЩО НЕ ПЕРЕНОСИЛОСЬ (уже є спільним):
     .ind-breadcrumbs          — global/breadcrumbs.
     .faq__list / .faq-item*   — спільний акордеон; тут лише хром і нумерація.
     .ind-section--cta         — класи .service-cta* (як /kontakty/, /pro-nas/).
     .ind-cards, .ind-warehouse, .ind-clearance, .ind-matrix__group,
     .ind-section--service, .ind-link — у розмітці шаблону не використані.

   РОЗМІТКА vs ШАБЛОН:
     .ind-accent                 → .is-accent (макрос {accent} у полях).
     картки utility              → <article> замість <details open> з
                                   прихованим «+» (згорнути їх не можна).
     текст зон і story-секцій    → WYSIWYG через Theme\rich_content()
                                   (.rich-text), списки стилізовані як .ind-list.

   01 · Оболонка, типографіка, кнопки     07 · Реконструкція
   02 · Хіро                              08 · Системи
   03 · Підхід                            09 · Практичний приклад
   04 · Критичні зони                     10 · Послуги
   05 · Story: заводи, логістика          11 · CTA
   06 · Інженерні зони                    12 · FAQ
   13 · Адаптив
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 01 · Оболонка ──────────────────────────────────────────────────────── */
.ind-page {
    overflow:    clip;
    background:  var(--color-bg);
    color:       var(--color-text-light);
    font-size:   16px;
    line-height: 1.7;
}

/* База — через :where(): на сторінці стоять спільні блоки (крихти, FAQ,
   CTA), і .ind-page h2 (0,1,1) перебивав би їхні однокласові правила. */
:where(.ind-page) h1,
:where(.ind-page) h2,
:where(.ind-page) h3 { margin: 0; }

:where(.ind-page) p { margin: 0; }

.ind-page .has-line-bottom::after { z-index: 3; }

.ind-section {
    position: relative;
    padding:  104px 0;
}

.ind-heading {
    max-width:     950px;
    margin-bottom: 54px;
}

.ind-title {
    margin:         12px 0 0;
    font-size:      clamp(28px, 4vw, 48px);
    font-weight:    300;
    line-height:    1.14;
    letter-spacing: -1.5px;
    color:          var(--color-text-light);
    overflow-wrap:  break-word;
}

.ind-page .is-accent {
    display:                 inline-block;
    padding-bottom:          6px;
    font-weight:             600;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                   transparent;
    -webkit-text-fill-color: transparent;
}

.ind-copy,
.ind-page .rich-text p {
    margin:      0 0 20px;
    line-height: 1.75;
    color:       var(--color-text-soft);
}

.ind-page .rich-text { display: block; }

/* Списки: reset.css робить li блоками — маркер повертаємо явно. */
.ind-list,
.ind-page .rich-text ul {
    margin:       12px 0 24px;
    padding-left: 20px;
    line-height:  1.7;
    list-style:   disc;
    color:        var(--color-text-light);
}

.ind-list li,
.ind-page .rich-text li {
    display: list-item;
    padding: 3px 0;
}

.ind-list li::marker,
.ind-page .rich-text li::marker { color: var(--color-secondary); }

.ind-number {
    display:        block;
    margin-bottom:  12px;
    font-size:      13px;
    letter-spacing: 2px;
    color:          var(--color-sky);
}

.ind-caption {
    margin:    12px 0;
    font-size: 12px;
    color:     var(--color-muted);
}

.ind-image {
    display:       block;
    width:         100%;
    height:        auto;
    border-radius: 8px;
}

.ind-split {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   54px;
    align-items:           center;
}

.ind-tags {
    display:    flex;
    flex-wrap:  wrap;
    gap:        8px;
    margin:     20px 0 0;
    padding:    0;
    list-style: none;
}

.ind-tags__item {
    padding:       7px 12px;
    border:        1px solid var(--color-border-blue);
    border-radius: 6px;
    background:    var(--surface-soft);
    font-size:     13px;
}

.ind-note {
    margin:      0;
    padding:     22px 0 0;
    font-size:   18px;
    font-weight: 600;
    line-height: 1.6;
    color:       var(--color-sky);
}

/* ── Кнопки (локально, як на решті сторінок) ────────────────────────────── */
.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 { min-height: 56px; }

.ind-page .btn {
    max-width:   100%;
    height:      auto;
    white-space: normal;
    text-align:  center;
}

.ind-page .btn__label { min-width: 0; }

.ind-page .btn .icon { flex-shrink: 0; }

/* ── 02 · Хіро ──────────────────────────────────────────────────────────── */
.ind-hero {
    position:   relative;
    isolation:  isolate;
    overflow:   clip;
    min-height: 760px;
    padding:    44px 0 70px;
    background: linear-gradient(135deg, var(--color-bg-alt), var(--color-bg));
}

.ind-hero .breadcrumbs { margin-bottom: 48px; }

.ind-hero__copy {
    position:  relative;
    z-index:   2;
    width:     65%;
    max-width: 760px;
    /* Відступ від крихт тримає смуга під них (css/main.css). */
    padding:   0 0 24px;
}

.ind-hero__title {
    margin:         16px 0 26px;
    font-size:      clamp(40px, 3vw, var(--fs-h1));
    font-weight:    300;
    line-height:    1.1;
    letter-spacing: -1.9px;
    color:          var(--color-text-light);
    overflow-wrap:  break-word;
}

.ind-hero__copy .ind-copy { max-width: 670px; }

.ind-cta {
    gap:        12px;
    min-width:  340px;
    min-height: 56px;
    margin:     10px 0 24px;
    padding:    16px 26px;
}

/* Фото — під текстом праворуч; маска розчиняє лівий край і верх/низ. */
.ind-hero__visual {
    position: absolute;
    z-index:  -1;
    inset:    0 0 0 38%;
    margin:   0;
}

.ind-hero__visual .ind-image {
    width:           100%;
    height:          100%;
    border-radius:   0;
    object-fit:      cover;
    object-position: right center;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 18%, #000 76%, transparent);
    mask-image:         linear-gradient(90deg, transparent, #000 55%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 18%, #000 76%, transparent);
    -webkit-mask-composite: source-in;
    mask-composite:         intersect;
}

.ind-proof {
    display:               grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    box-sizing:            border-box;
    width:                 920px;
    max-width:             calc(100vw - 64px);
    margin:                8px 0 0;
    padding:               16px 20px;
    list-style:            none;
    border:                1px solid rgba(140, 168, 220, .3);
    border-radius:         14px;
    background:            linear-gradient(110deg, rgba(27, 44, 84, .92), rgba(12, 25, 64, .94));
    box-shadow:            inset 0 1px 0 rgba(220, 233, 255, .07);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter:         blur(12px);
    color:                 #cdd8ef;
    font-size:             14px;
    font-weight:           500;
    line-height:           1.55;
}

.ind-proof__item {
    display:     flex;
    align-items: center;
    gap:         12px;
    min-width:   0;
    min-height:  52px;
    padding:     4px 16px;
}

.ind-proof__item + .ind-proof__item { border-left: 1px solid rgba(108, 148, 224, .2); }

.ind-proof__check {
    flex:  0 0 16px;
    color: #69b6ff;
}

/* ── 03 · Підхід ────────────────────────────────────────────────────────── */
.ind-approach__layout {
    display:               grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap:                   56px;
    align-items:           center;
}

.ind-approach__story {
    display: grid;
    gap:     32px;
}

.ind-approach__step {
    display:               grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap:                   20px;
}

.ind-approach__marker {
    padding-top:    8px;
    border-top:     1px solid var(--color-border-hover);
    color:          var(--color-sky);
    font-size:      12px;
    letter-spacing: 1px;
}

.ind-approach__title {
    margin:      0 0 16px;
    font-size:   24px;
    font-weight: 500;
    line-height: 1.35;
    color:       var(--color-text);
}

.ind-approach__step .ind-copy {
    margin:      0;
    line-height: 1.8;
}

.ind-approach__step strong {
    font-weight: 500;
    color:       var(--color-text-light);
}

.ind-approach__map {
    position:      relative;
    padding:       32px;
    border:        1px solid var(--color-border-blue);
    border-radius: 18px;
    background:    linear-gradient(135deg, rgba(45, 64, 110, .45), rgba(5, 22, 53, .72));
    box-shadow:    inset 0 1px 0 var(--surface-soft);
}

.ind-approach__map::before,
.ind-system-card::before,
.ind-service-card::before {
    content:    "";
    position:   absolute;
    top:        0;
    right:      18px;
    left:       18px;
    height:     1px;
    background: var(--gradient-line);
}

.ind-approach__map > .ind-number {
    margin-bottom: 24px;
    font-size:     11px;
    text-align:    center;
}

.ind-approach__core {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             18px;
    padding:         22px;
    border:          1px solid var(--color-border-hover);
    border-radius:   12px;
    background:      var(--surface-card);
    color:           var(--color-sky);
}

.ind-approach__core > span {
    font-size:   15px;
    line-height: 1.5;
    color:       var(--color-text-light);
}

.ind-approach__core strong {
    display:     block;
    font-size:   24px;
    font-weight: 500;
    color:       var(--color-text);
}

.ind-approach__changes {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             8px;
    margin:          16px 0 0;
}

.ind-approach__changes span {
    padding:       5px 10px;
    border:        1px solid var(--color-border-blue);
    border-radius: 30px;
    font-size:     12px;
    color:         var(--color-text-soft);
}

.ind-approach__map-label {
    position:   relative;
    padding:    40px 0 16px;
    color:      var(--color-muted);
    font-size:  13px;
    text-align: center;
}

.ind-approach__map-label::before {
    content:    "";
    position:   absolute;
    top:        10px;
    left:       50%;
    width:      1px;
    height:     20px;
    background: var(--color-secondary);
}

.ind-approach__systems {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   0 18px;
    margin:                0;
    padding:               0;
    list-style:            none;
}

.ind-approach__systems li {
    padding:    12px 0;
    border-top: 1px solid var(--color-border-blue);
    color:      var(--color-text-light);
    font-size:  14px;
}

.ind-approach__result,
.ind-case__insight,
.ind-renovation__tie,
.ind-systems .ind-note {
    border-left:   2px solid var(--color-secondary);
    border-radius: 0 12px 12px 0;
    background:    var(--surface-card);
}

.ind-approach__result {
    display:     flex;
    align-items: center;
    gap:         24px;
    margin-top:  36px;
    padding:     24px 28px;
}

.ind-approach__result p {
    color:       var(--color-text-light);
    font-size:   17px;
    line-height: 1.7;
}

.ind-approach__result strong {
    font-weight: 600;
    color:       var(--color-text);
}

.ind-approach__check {
    display:       grid;
    flex:          0 0 38px;
    place-items:   center;
    height:        38px;
    border:        1px solid var(--color-border-hover);
    border-radius: 50%;
    color:         var(--color-sky);
}

.ind-page .ind-approach__link {
    width:       fit-content;
    min-height:  46px;
    margin-top:  22px;
    padding:     12px 22px;
    font-weight: 600;
    line-height: 20px;
}

/* ── 04 · Критичні зони ─────────────────────────────────────────────────── */
.ind-section--center { background: linear-gradient(180deg, var(--surface-soft), transparent); }

.ind-section--center .ind-heading {
    margin-right: auto;
    margin-left:  auto;
    text-align:   center;
}

.ind-section--center .section-eyebrow { justify-content: center; }

.ind-nodes {
    display: grid;
    gap:     10px;
    width:   min(100%, 1120px);
    margin:  auto;
}

.ind-node {
    position:      relative;
    overflow:      hidden;
    border:        1px solid rgba(67, 137, 220, .18);
    border-radius: 11px;
    background:    rgba(8, 32, 72, .7);
    box-shadow:    0 12px 26px -20px rgba(0, 4, 19, .95);
    transition:    border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.ind-node:hover {
    border-color: rgba(89, 170, 244, .3);
    background:   rgba(10, 39, 84, .78);
}

/* Акордеони зон, систем і «Детальніше» в послугах — той самий механізм, що
   FAQ: data-faq-* + faqAccordion() з js/main.js. Стан — клас .is-open,
   плавність — max-height .4s ease на панелі, як у .faq-item__panel. */
.ind-node__panel,
.ind-system-card__panel,
.ind-service-card__panel {
    max-height: 0;
    overflow:   hidden;
    transition: max-height .4s ease;
}

.ind-node.is-open .ind-node__panel,
.ind-system-card.is-open .ind-system-card__panel,
.ind-service-card__details.is-open .ind-service-card__panel { max-height: none; }

/* Кнопки-перемикачі: скидаємо стилі <button>, геометрію задають правила нижче. */
.ind-node__toggle,
.ind-system-card__toggle,
.ind-service-card__toggle {
    width:       100%;
    margin:      0;
    border:      0;
    background:  transparent;
    font:        inherit;
    text-align:  left;
    cursor:      pointer;
}

.ind-node.is-open {
    border-color: rgba(74, 179, 255, .62);
    background:   linear-gradient(145deg, rgba(14, 54, 111, .9), rgba(7, 31, 72, .94));
    box-shadow:   inset 0 1px 0 rgba(203, 231, 255, .07), 0 20px 42px -31px rgba(62, 165, 255, .58);
}

.ind-node__toggle {
    display:               grid;
    grid-template-columns: 58px minmax(0, 1fr) 34px;
    gap:                   14px;
    align-items:           center;
    min-height:            66px;
    padding:               13px 17px 13px 21px;
    color:                 #e8f1ff;
}

.ind-node__toggle:focus-visible,
.ind-system-card__toggle:focus-visible,
.ind-service-card__toggle:focus-visible {
    outline:        2px solid var(--color-sky);
    outline-offset: -4px;
}

.ind-node__toggle .ind-number {
    margin:         0;
    color:          #65bdf7;
    font-size:      12px;
    line-height:    1;
    letter-spacing: .16em;
}

.ind-node__title {
    font-size:   16px;
    font-weight: 500;
    line-height: 1.35;
    color:       #e8f1ff;
}

.ind-node__arrow {
    display:       grid;
    place-items:   center;
    width:         29px;
    height:        29px;
    border:        1px solid rgba(72, 145, 224, .24);
    border-radius: 7px;
    background:    #102a51;
    box-shadow:    0 5px 11px rgba(0, 7, 22, .26);
    color:         #9fc5ef;
    transition:    color var(--transition), background var(--transition), box-shadow var(--transition);
}

/* Іконка теми — шеврон угору: згорнутий вузол показує «вниз». */
.ind-node__arrow .icon {
    transform:  rotate(180deg);
    transition: transform var(--transition);
}

.ind-node.is-open .ind-node__arrow {
    border-color: rgba(88, 180, 255, .42);
    background:   #123d75;
    box-shadow:   0 0 14px rgba(69, 171, 255, .16);
    color:        #d7edff;
}

.ind-node.is-open .ind-node__arrow .icon { transform: none; }

.ind-node__content {
    display:               grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(250px, .75fr);
    gap:                   clamp(28px, 5vw, 68px);
    align-items:           center;
    margin:                0 17px 17px;
    padding:               clamp(29px, 4vw, 48px);
    border-top:            1px solid rgba(104, 181, 249, .16);
    border-radius:         8px;
    background:            radial-gradient(circle at 90% 18%, rgba(49, 148, 244, .13), transparent 38%), rgba(5, 24, 58, .66);
}

.ind-node__heading {
    margin:         0 0 21px;
    font-size:      clamp(23px, 2.5vw, 34px);
    font-weight:    400;
    line-height:    1.2;
    letter-spacing: -.025em;
    color:          #f3f7ff;
}

.ind-node__heading-number {
    font-weight: 300;
    color:       #61bcf7;
}

.ind-node__lead {
    margin:      0 0 13px;
    font-weight: 600;
    line-height: 1.6;
    color:       #e2edff;
}

.ind-node__text .rich-text p,
.ind-node__text .rich-text ul {
    color:       #aebfda;
    font-size:   15.5px;
    line-height: 1.7;
}

.ind-node__figure {
    min-width:     0;
    margin:        0;
    align-self:    center;
    overflow:      hidden;
    border:        1px solid rgba(91, 170, 248, .16);
    border-radius: 12px;
    background:    #071d40;
    box-shadow:    0 18px 38px -28px rgba(0, 4, 19, .9);
}

.ind-node__figure .ind-image {
    aspect-ratio:    4 / 3;
    border-radius:   0;
    object-fit:      cover;
    object-position: center;
}

/* ── 05 · Story: заводи, логістика ──────────────────────────────────────── */
.ind-section--story,
.ind-utility,
.ind-renovation {
    isolation: isolate;
    overflow:  hidden;
}

.ind-section--story::before,
.ind-utility::before,
.ind-renovation::before {
    content:        "";
    position:       absolute;
    z-index:        -1;
    inset:          0;
    pointer-events: none;
    background:     radial-gradient(circle at 14% 30%, rgba(26, 111, 218, .11), transparent 34%),
                    linear-gradient(180deg, rgba(8, 39, 83, .12), transparent 42%);
}

/* Картка-обгортка секції: у шаблоні — сам .container з рамкою. */
.ind-section--story .container {
    position:      relative;
    overflow:      hidden;
    padding:       clamp(30px, 4vw, 48px);
    border:        .5px solid rgba(79, 185, 255, .38);
    border-radius: 11px;
    background:    radial-gradient(circle at 92% 12%, rgba(48, 132, 240, .12), transparent 34%),
                   linear-gradient(145deg, rgba(7, 31, 73, .94), rgba(4, 24, 58, .9));
    box-shadow:    inset 0 1px 0 rgba(208, 234, 255, .04), 0 26px 62px -48px rgba(0, 3, 17, .98);
}

.ind-section--story .container::before,
.ind-renovation__layout::before {
    content:    "";
    position:   absolute;
    top:        0;
    left:       clamp(30px, 4vw, 48px);
    width:      112px;
    height:     2px;
    background: linear-gradient(90deg, #3bb9ff, rgba(59, 185, 255, 0));
}

.ind-section--story .ind-heading {
    max-width:     980px;
    margin-bottom: clamp(28px, 4vw, 42px);
}

.ind-section--story .ind-split {
    gap:         clamp(30px, 5vw, 68px);
    align-items: center;
}

.ind-figure {
    position:  relative;
    min-width: 0;
    margin:    0;
}

.ind-section--story .ind-figure,
.ind-logistics-photo {
    margin:        0;
    overflow:      hidden;
    border:        .5px solid rgba(91, 170, 248, .22);
    border-radius: 12px;
    background:    #071a35;
    box-shadow:    0 18px 42px -30px rgba(0, 5, 24, .96);
}

.ind-section--story .ind-figure .ind-image,
.ind-logistics-photo img {
    display:       block;
    width:         100%;
    height:        auto;
    aspect-ratio:  4 / 3;
    border-radius: 0;
    object-fit:    cover;
}

.ind-section--story .ind-figure .ind-caption {
    margin:  0;
    padding: 0 18px 16px;
    color:   #9fb4d3;
}

/* Список у story — дві колонки рядків із «вогником» замість маркера. */
.ind-section--story .rich-text ul {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap:            24px;
    margin-top:            22px;
    padding:               0;
    list-style:            none;
    border-top:            1px solid rgba(84, 164, 238, .18);
}

.ind-section--story .rich-text li {
    position:      relative;
    display:       block;
    padding:       12px 12px 12px 27px;
    border-bottom: 1px solid rgba(84, 164, 238, .13);
    color:         #bdcae3;
}

.ind-section--story .rich-text li::before {
    content:       "";
    position:      absolute;
    top:           20px;
    left:          7px;
    width:         6px;
    height:        6px;
    border:        1px solid #4bbaff;
    border-radius: 50%;
    box-shadow:    0 0 12px rgba(60, 180, 255, .55);
}

.ind-section--story .ind-tags__item {
    border:        .5px solid rgba(76, 185, 255, .42);
    border-radius: 4px;
    background:    rgba(7, 31, 73, .72);
    color:         #cfe2ff;
}

.ind-logistics-photo figcaption {
    display:    grid;
    gap:        5px;
    padding:    18px 20px;
    border-top: .5px solid rgba(91, 170, 248, .22);
    background: #071a35;
}

.ind-logistics-photo figcaption strong {
    font-size:   21px;
    font-weight: 600;
    color:       var(--color-text);
}

.ind-logistics-photo figcaption span {
    font-size: 13px;
    color:     var(--color-text-soft);
}

/* ── 06 · Інженерні зони ────────────────────────────────────────────────── */
.ind-utility .ind-heading {
    max-width:     1100px;
    margin-bottom: 34px;
}

.ind-heading__lead {
    max-width:  720px;
    margin-top: 18px;
}

.ind-utility__layout {
    display:               grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
    gap:                   clamp(22px, 4vw, 44px);
    align-items:           stretch;
}

.ind-utility__photo {
    position:      relative;
    margin:        0;
    overflow:      hidden;
    border:        .5px solid rgba(79, 185, 255, .38);
    border-radius: 12px;
    background:    linear-gradient(145deg, rgba(7, 31, 73, .94), rgba(4, 24, 58, .92));
    box-shadow:    0 22px 52px -40px rgba(0, 4, 19, .98);
}

.ind-utility__photo::before {
    content:        "";
    position:       absolute;
    z-index:        1;
    inset:          0;
    pointer-events: none;
    background:     linear-gradient(180deg, var(--surface-card) 0%, transparent 12%, transparent 86%, var(--surface-card) 100%);
}

.ind-utility__photo img {
    display:    block;
    width:      90%;
    height:     90%;
    margin:     5% auto;
    object-fit: contain;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image:         linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite:         intersect;
}

.ind-utility__photo figcaption {
    display:    grid;
    gap:        5px;
    padding:    18px 22px;
    border-top: .5px solid rgba(79, 185, 255, .26);
    background: #071a35;
}

.ind-utility__photo figcaption strong {
    font-size:   18px;
    font-weight: 600;
    color:       var(--color-text);
}

.ind-utility__photo figcaption span {
    font-size: 13px;
    color:     var(--color-sky);
}

.ind-utility__cards {
    display:       grid;
    gap:           12px;
    align-content: stretch;
}

.ind-utility-card {
    overflow:      hidden;
    border:        .5px solid rgba(74, 179, 255, .55);
    border-radius: 11px;
    background:    linear-gradient(145deg, rgba(14, 54, 111, .78), rgba(7, 31, 72, .92));
    box-shadow:    var(--shadow-glow);
}

.ind-utility-card__head {
    display:               grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap:                   12px;
    align-items:           center;
    padding:               20px;
}

.ind-utility-card__head .ind-number {
    margin:    0;
    font-size: 12px;
}

.ind-utility-card__title {
    font-size:   19px;
    font-weight: 500;
    line-height: 1.35;
    color:       var(--color-text);
}

.ind-utility-card__body {
    padding:    0 20px 20px;
    border-top: 1px solid rgba(104, 181, 249, .14);
}

.ind-utility-card__body .ind-copy {
    margin:    16px 0;
    font-size: 14px;
}

.ind-utility-card .ind-tags { margin-top: 10px; }

.ind-utility-card .ind-tags__item {
    padding:   5px 8px;
    font-size: 11px;
}

.ind-utility__note {
    max-width:     100%;
    margin:        28px 0 0;
    padding:       20px 24px;
    border-left:   2px solid #74baff;
    border-radius: 0 10px 10px 0;
    background:    rgba(26, 93, 170, .12);
    color:         #e4efff;
    font-size:     18px;
    line-height:   1.6;
}

/* ── 07 · Реконструкція ─────────────────────────────────────────────────── */
.ind-renovation.ind-section { padding: 68px 0; }

.ind-renovation .ind-heading { margin-bottom: 18px; }

.ind-renovation__intro {
    max-width:     920px;
    margin-bottom: 24px;
}

.ind-renovation__layout {
    position:              relative;
    display:               grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap:                   clamp(28px, 5vw, 58px);
    align-items:           start;
    padding:               clamp(24px, 3.5vw, 42px);
    border:                .5px solid rgba(79, 185, 255, .38);
    border-radius:         11px;
    background:            radial-gradient(circle at 10% 12%, rgba(48, 132, 240, .12), transparent 34%),
                           linear-gradient(145deg, rgba(7, 31, 73, .94), rgba(4, 24, 58, .9));
    box-shadow:            inset 0 1px 0 rgba(208, 234, 255, .04), 0 26px 62px -48px rgba(0, 3, 17, .98);
}

.ind-renovation__layout::before { left: clamp(24px, 3.5vw, 42px); }

.ind-renovation__layout > *,
.ind-renovation__copy { min-width: 0; }

.ind-case__photo {
    margin:        0;
    overflow:      hidden;
    border:        1px solid var(--color-border-blue);
    border-radius: 16px;
    background:    var(--surface-card);
    box-shadow:    var(--shadow);
}

.ind-renovation .ind-case__photo {
    border:        .5px solid rgba(91, 170, 248, .24);
    border-radius: 12px;
    background:    #071a35;
    box-shadow:    0 18px 42px -30px rgba(0, 5, 24, .96);
}

.ind-case__image {
    display: block;
    width:   100%;
    height:  auto;
}

.ind-case__caption {
    position:        relative;
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             24px;
    padding:         26px;
}

.ind-case__caption::before {
    content:    "";
    position:   absolute;
    inset:      0 0 auto;
    height:     1px;
    background: var(--gradient-line);
}

.ind-renovation .ind-case__caption { padding: 20px; }

.ind-case__name {
    margin:      0 0 6px;
    font-size:   30px;
    font-weight: 600;
    line-height: 1.7;
    color:       var(--color-text);
}

.ind-case__location {
    font-size: 14px;
    color:     var(--color-text-soft);
}

.ind-case__area {
    display:      grid;
    gap:          6px;
    padding-left: 24px;
    border-left:  1px solid var(--color-border-blue);
    color:        var(--color-muted);
    font-size:    12px;
}

.ind-case__area strong {
    font-size:   30px;
    font-weight: 600;
    color:       var(--color-sky);
    white-space: nowrap;
}

.ind-case__area strong span { font-size: 18px; }

.ind-case__facts {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   20px;
    margin:                0;
    padding:               0 20px 20px;
}

.ind-case__facts dt {
    margin-bottom: 6px;
    font-size:     12px;
    color:         var(--color-muted);
}

.ind-case__facts dd {
    margin:      0;
    font-size:   14px;
    line-height: 1.5;
    color:       var(--color-text-light);
}

.ind-case__subtitle {
    margin:      0 0 14px;
    font-size:   clamp(24px, 2.2vw, 32px);
    font-weight: 400;
    line-height: 1.3;
    color:       var(--color-text);
}

.ind-case__context {
    margin:    0 0 22px;
    font-size: 13px;
    color:     var(--color-muted);
}

.ind-case__criteria {
    margin:        0;
    padding:       0;
    list-style:    none;
    counter-reset: impact;
}

.ind-case__criteria li {
    display:               grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap:                   16px;
    padding:               11px 0;
    border-bottom:         1px solid var(--color-border-blue);
    line-height:           1.6;
    counter-increment:     impact;
}

.ind-case__criteria li::before {
    content:     counter(impact, decimal-leading-zero);
    padding-top: 3px;
    color:       var(--color-sky);
    font-size:   12px;
}

.ind-renovation .ind-case__criteria { border-top: 1px solid rgba(84, 164, 238, .18); }

.ind-renovation .ind-case__criteria li {
    padding:       7px 0;
    border-bottom: 1px solid rgba(84, 164, 238, .13);
    color:         #bdcae3;
}

.ind-renovation__tie {
    margin-top: 18px;
    padding:    16px 20px;
}

.ind-renovation__tie .ind-copy { margin: 0; }

/* Маршрут «існуючі → точка підключення → нові»: три кола зі стрілками. */
.ind-renovation__route {
    display:         flex;
    justify-content: flex-start;
    gap:             36px;
    margin:          24px 0 0;
    padding:         0;
    list-style:      none;
}

.ind-renovation__route li {
    position:        relative;
    display:         flex;
    flex:            0 0 96px;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    width:           96px;
    height:          96px;
    padding:         10px;
    border:          .5px solid color-mix(in srgb, var(--color-sky) 28%, transparent);
    border-radius:   50%;
    background:      linear-gradient(145deg, var(--surface-soft), transparent);
    box-shadow:      inset 0 1px 0 var(--surface-soft);
    font-size:       12px;
    line-height:     1.4;
    text-align:      center;
}

.ind-renovation__route li:nth-child(2) {
    border-color: color-mix(in srgb, var(--color-sky) 55%, transparent);
    box-shadow:   0 0 18px color-mix(in srgb, var(--color-secondary) 9%, transparent);
}

.ind-renovation__route li:not(:last-child)::after {
    content:   "→";
    position:  absolute;
    top:       50%;
    right:     -29px;
    width:     22px;
    color:     var(--color-sky);
    font-size: 16px;
    opacity:   .6;
    transform: translateY(-50%);
}

.ind-renovation__route strong {
    font-weight: 300;
    line-height: 1.4;
    color:       var(--color-text-light);
}

.ind-renovation__route .ind-number {
    margin-bottom:  6px;
    font-size:      10px;
    font-weight:    300;
    letter-spacing: 1px;
    color:          var(--color-muted);
}

.ind-renovation__note {
    max-width:   1100px;
    padding-top: 24px;
    border-top:  1px solid rgba(84, 155, 255, .15);
}

/* ── 08 · Системи ───────────────────────────────────────────────────────── */
.ind-systems .ind-heading { margin-bottom: 26px; }

.ind-systems__lead { max-width: 1000px; }

.ind-matrix {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   14px;
    align-items:           start;
    margin-top:            36px;
}

.ind-system-card {
    position:      relative;
    min-width:     0;
    overflow:      clip;
    border:        1px solid var(--color-border-blue);
    border-radius: 18px;
    background:    linear-gradient(135deg, rgba(45, 64, 110, .45), rgba(5, 22, 53, .72));
    box-shadow:    inset 0 1px 0 var(--surface-soft);
    transition:    border-color var(--transition);
}

.ind-system-card:hover,
.ind-system-card:focus-within,
.ind-system-card.is-open { border-color: color-mix(in srgb, var(--color-sky) 55%, transparent); }

.ind-system-card__toggle {
    display:               grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap:                   16px;
    align-items:           center;
    padding:               20px 24px;
    color:                 var(--color-text);
}

.ind-system-card__title {
    font-size:   22px;
    font-weight: 500;
    line-height: 1.3;
    color:       var(--color-text);
}

.ind-system-card__plus,
.ind-service-card__plus {
    display:       grid;
    place-items:   center;
    width:         44px;
    height:        44px;
    border:        1px solid color-mix(in srgb, var(--color-sky) 40%, transparent);
    border-radius: 50%;
    background:    linear-gradient(145deg, var(--color-border-blue), var(--color-bg));
    color:         var(--color-sky);
    font-size:     26px;
    font-weight:   300;
    line-height:   1;
    transition:    transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.ind-system-card.is-open .ind-system-card__plus,
.ind-service-card__details.is-open .ind-service-card__plus { transform: rotate(45deg); }

.ind-system-card__toggle:hover .ind-system-card__plus,
.ind-service-card__toggle:hover .ind-service-card__plus {
    border-color: var(--color-sky);
    box-shadow:   0 0 20px color-mix(in srgb, var(--color-secondary) 25%, transparent);
}

.ind-system-card__body { padding: 0 24px 20px; }

.ind-system-card__body .ind-list {
    margin:      0;
    padding:     18px 0 0 20px;
    border-top:  1px solid var(--color-border-blue);
}

.ind-system-card__body .ind-list li { padding: 7px 0; }

.ind-systems .ind-note {
    margin-top:  32px;
    padding:     24px 28px;
    font-size:   17px;
    line-height: 1.7;
}

/* ── 09 · Практичний приклад ────────────────────────────────────────────── */
.ind-case__layout {
    display:               grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap:                   48px;
    align-items:           start;
}

.ind-case__insight {
    display:     flex;
    align-items: center;
    gap:         22px;
    margin:      36px 0;
    padding:     24px 28px;
}

.ind-case__insight .ind-copy {
    margin:    0;
    font-size: 20px;
    color:     var(--color-text);
}

.ind-case__symbol {
    color:     var(--color-sky);
    font-size: 32px;
}

.ind-case__explanation {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   40px;
}

/* ── 10 · Послуги ───────────────────────────────────────────────────────── */
.ind-services {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   24px;
    align-items:           start;
}

.ind-service-card {
    position:      relative;
    min-width:     0;
    padding:       36px;
    border:        1px solid var(--color-border-blue);
    border-radius: 18px;
    background:    linear-gradient(135deg, rgba(45, 64, 110, .45), rgba(5, 22, 53, .72));
    box-shadow:    inset 0 1px 0 rgba(255, 255, 255, .05);
    transition:    border-color var(--transition);
}

.ind-service-card:hover,
.ind-service-card:focus-within { border-color: color-mix(in srgb, var(--color-sky) 55%, transparent); }

.ind-service-card__title {
    margin:      16px 0 20px;
    font-size:   30px;
    font-weight: 500;
    line-height: 1.25;
    color:       var(--color-text);
}

.ind-service-card__toggle {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    min-height:      62px;
    padding:         0;
    border-top:      1px solid var(--color-border-blue);
    color:           var(--color-sky);
    font-size:       15px;
}

.ind-service-card__plus {
    flex:       0 0 44px;
    box-shadow: inset 0 1px 0 var(--surface-soft);
}

.ind-service-card__body {
    display: grid;
    gap:     24px;
    padding: 20px 0;
}

.ind-flow {
    display:    flex;
    flex-wrap:  wrap;
    gap:        8px;
    margin:     0;
    padding:    0;
    list-style: none;
}

.ind-flow__item {
    flex:          1 1 120px;
    min-width:     0;
    padding:       14px;
    border:        1px solid var(--color-border-blue);
    border-top:    2px solid var(--color-secondary);
    border-radius: 8px;
    background:    var(--surface-card);
    font-size:     14px;
    line-height:   1.5;
}

.ind-flow__item:nth-child(2) { border-color: var(--color-secondary); }

.ind-diagram {
    min-width:     0;
    padding:       36px;
    border:        1px solid var(--color-border-blue);
    border-radius: 12px;
    background:    radial-gradient(ellipse at center, var(--color-border-blue), transparent), var(--surface-card);
    text-align:    center;
}

.ind-diagram__core {
    display:       inline-block;
    padding:       24px 34px;
    border:        1px solid var(--color-secondary);
    border-radius: 8px;
    background:    var(--color-bg-alt);
    box-shadow:    var(--shadow-glow);
    color:         var(--color-sky);
    font-size:     22px;
    line-height:   1.4;
}

.ind-diagram__systems {
    position:              relative;
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   12px;
    margin:                0;
    padding:               40px 0 0;
    list-style:            none;
}

.ind-diagram__systems::before {
    content:    "";
    position:   absolute;
    top:        0;
    left:       50%;
    width:      1px;
    height:     40px;
    background: var(--color-secondary);
}

.ind-diagram__node {
    padding:       12px 6px;
    border:        1px solid var(--color-border-hover);
    border-radius: 6px;
    background:    var(--color-bg);
}

.ind-page .ind-service-card__button {
    display:         flex;
    justify-content: space-between;
    gap:             12px;
    width:           100%;
    min-height:      56px;
    margin-top:      18px;
    padding:         16px 20px;
    text-align:      left;
}

.ind-service-card__button .btn__label { line-height: 1.5; }

/* ── 11 · CTA ───────────────────────────────────────────────────────────── */
.ind-page .service-cta { padding: 104px 0; }

/* У шаблоні банер — сам .container (1340px), а не картка всередині нього. */
.ind-page .service-cta > .container { padding-inline: 0; }

.service-cta__banner {
    display:       grid;
    justify-items: center;
    padding:       64px;
    border:        1px solid var(--color-secondary);
    border-radius: 30px;
    background:    radial-gradient(ellipse at 0 0, var(--color-border-blue), transparent 65%), var(--surface-card);
    text-align:    center;
}

.service-cta__content {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    max-width:      1000px;
}

.service-cta__eyebrow { justify-content: center; }

.service-cta__heading {
    margin:         12px 0 26px;
    font-size:      clamp(28px, 4vw, 48px);
    font-weight:    600;
    line-height:    1.14;
    letter-spacing: -1.5px;
    color:          var(--color-text-light);
}

.service-cta__text {
    max-width:   960px;
    margin:      0 0 20px;
    line-height: 1.75;
    color:       var(--color-text-soft);
}

.ind-page .service-cta__btn {
    gap:        12px;
    min-width:  340px;
    min-height: 56px;
    margin-top: 22px;
    padding:    16px 26px;
}

/* ── 12 · FAQ ───────────────────────────────────────────────────────────── */
/* Акордеон — спільний блок main.css; хром секції — як на решті сторінок,
   нумерація «01.» — CSS-лічильником, як у шаблоні. */
.ind-faq {
    position:   relative;
    isolation:  isolate;
    overflow:   hidden;
    padding:    92px 0 clamp(190px, 23vw, 340px);
    background: radial-gradient(ellipse at 50% 100%, rgba(0, 118, 225, .19), transparent 46%),
                linear-gradient(180deg, rgba(0, 9, 29, .45), rgba(0, 13, 37, .76));
}

.ind-faq__art {
    position:           absolute;
    z-index:            -1;
    bottom:             0;
    left:               50%;
    width:              min(1450px, 100%);
    transform:          translateX(-50%);
    pointer-events:     none;
    opacity:            .32;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 78%, transparent);
    mask-image:         linear-gradient(to bottom, transparent, #000 28%, #000 78%, transparent);
}

.ind-faq__art img {
    display:            block;
    width:              100%;
    height:             auto;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image:         linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

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

.faq__head {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            14px;
    width:          100%;
    text-align:     center;
}

.faq__title {
    max-width:      820px;
    font-size:      clamp(31px, 3.25vw, 46px);
    font-weight:    300;
    line-height:    1.14;
    letter-spacing: -1.35px;
    color:          var(--color-text-light);
}

.ind-faq .faq__list { counter-reset: industrial-faq; }

.ind-faq .faq-item__question::before {
    content:           counter(industrial-faq, decimal-leading-zero) ".";
    margin-right:      13px;
    color:             #61bcf7;
    font-size:         12px;
    font-weight:       400;
    letter-spacing:    .12em;
    counter-increment: industrial-faq;
}

/* ── 13 · Адаптив ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .ind-section { padding: 80px 0; }

    .ind-hero__copy { width: 75%; }

    .ind-hero__title { font-size: 42px; }

    .ind-proof {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width:                 100%;
        max-width:             100%;
    }

    .ind-proof__item:nth-child(3) { border-left: 0; }

    .ind-proof__item:nth-child(n+3) { border-top: 1px solid rgba(108, 148, 224, .2); }

    .ind-split { gap: 28px; }

    .ind-approach__layout { gap: 28px; }

    .ind-approach__map { padding: 24px; }

    .ind-node__content {
        gap:     24px;
        padding: 28px;
    }

    .ind-section--story .container,
    .ind-page .service-cta .container { width: calc(100% - 40px); }

    .ind-page .service-cta { padding: 80px 0; }

    .ind-section--story .rich-text ul { grid-template-columns: 1fr; }

    .ind-renovation__route li { padding: 10px; }

    .ind-case__layout { gap: 28px; }

    .ind-case__caption {
        flex-wrap: wrap;
        padding:   20px;
    }

    .ind-case__area {
        padding-left: 0;
        border-left:  0;
    }
}

@media (max-width: 900px) {
    .ind-utility__layout { grid-template-columns: 1fr; }

    .ind-utility__photo img {
        width:        90%;
        height:       auto;
        aspect-ratio: 4 / 3;
    }

    .ind-utility__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .ind-utility-card__head {
        grid-template-columns: 30px minmax(0, 1fr);
        padding:               16px;
    }

    .ind-utility-card__title { font-size: 16px; }

    .ind-utility-card__body { padding: 0 16px 16px; }
}

@media (max-width: 768px) {
    .ind-section { padding: 60px 0; }

    .ind-heading { margin-bottom: 30px; }

    .ind-title {
        font-size:      30px;
        letter-spacing: -.7px;
    }

    .ind-hero {
        min-height: 0;
        padding:    28px 0 40px;
    }

    .ind-hero .breadcrumbs { margin-bottom: 30px; }

    .ind-hero__copy {
        width:     100%;
        max-width: none;
        padding:   0;
    }

    .ind-hero__title {
        font-size:      clamp(30px, 7vw, 40px);
        letter-spacing: -1px;
    }

    .ind-hero__visual {
        position:   relative;
        z-index:    0;
        inset:      auto;
        width:      100%;
        margin-top: 24px;
    }

    .ind-hero__visual .ind-image {
        height:       auto;
        aspect-ratio: 1672 / 941;
        object-fit:   contain;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 85%, transparent);
        mask-image:         linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 85%, transparent);
    }

    .ind-page .ind-cta {
        width:     100%;
        min-width: 0;
        padding:   16px;
        font-size: 14px;
    }

    .ind-proof {
        padding:   12px;
        font-size: 12px;
    }

    .ind-proof__item {
        gap:        8px;
        min-height: 56px;
        padding:    10px 8px;
    }

    .ind-split,
    .ind-approach__layout,
    .ind-case__layout,
    .ind-case__explanation,
    .ind-services,
    .ind-matrix,
    .ind-renovation__layout { grid-template-columns: 1fr; }

    .ind-approach__layout { gap: 30px; }

    .ind-approach__step {
        grid-template-columns: 28px minmax(0, 1fr);
        gap:                   14px;
    }

    .ind-approach__title { font-size: 21px; }

    .ind-approach__result {
        align-items: flex-start;
        gap:         14px;
        padding:     20px;
    }

    .ind-approach__result p { font-size: 16px; }

    .ind-approach__check {
        flex-basis: 28px;
        height:     28px;
    }

    .ind-approach__map { padding: 24px 20px; }

    .ind-node__toggle {
        grid-template-columns: 28px minmax(0, 1fr) 29px;
        gap:                   10px;
        padding:               16px;
    }

    .ind-node__content {
        grid-template-columns: 1fr;
        margin:                0 10px 10px;
        padding:               24px 16px;
    }

    .ind-node__figure { max-width: 500px; }

    .ind-section--story .container {
        width:   calc(100% - 32px);
        padding: 28px 22px;
    }

    .ind-section--story .ind-split { gap: 28px; }

    .ind-utility__layout { gap: 24px; }

    .ind-renovation__layout { padding: 24px 20px; }

    .ind-case__facts {
        grid-template-columns: 1fr;
        gap:                   16px;
        padding:               0 20px 22px;
    }

    .ind-renovation__tie { padding: 20px; }

    .ind-renovation__route {
        justify-content: center;
        gap:             20px;
    }

    .ind-renovation__route li {
        flex:         0 1 88px;
        width:        88px;
        height:       auto;
        aspect-ratio: 1;
        padding:      8px;
        font-size:    11px;
    }

    .ind-renovation__route li:not(:last-child)::after {
        right:     -19px;
        width:     18px;
        font-size: 14px;
    }

    .ind-systems .ind-note {
        padding:   20px;
        font-size: 16px;
    }

    .ind-system-card__toggle { padding: 16px 20px; }

    .ind-system-card__title { font-size: 20px; }

    .ind-system-card__body { padding: 0 20px 18px; }

    .ind-case__caption { gap: 18px; }

    .ind-case__name,
    .ind-case__area strong { font-size: 26px; }

    .ind-case__insight {
        gap:     14px;
        padding: 20px;
    }

    .ind-case__insight .ind-copy { font-size: 18px; }

    .ind-case__explanation { gap: 0; }

    .ind-services { gap: 18px; }

    .ind-service-card { padding: 26px 22px; }

    .ind-service-card__title { font-size: 27px; }

    .ind-page .ind-service-card__button { font-size: 14px; }

    .ind-flow { flex-direction: column; }

    .ind-diagram { padding: 24px 16px; }

    .ind-diagram__core {
        padding:   20px;
        font-size: 20px;
    }

    .ind-page .service-cta { padding: 60px 0; }

    .ind-page .service-cta .container { width: calc(100% - 32px); }

    .service-cta__banner {
        padding:       36px 22px;
        border-radius: 22px;
    }

    .service-cta__heading {
        font-size:      30px;
        letter-spacing: -.7px;
    }

    .ind-page .service-cta__btn {
        width:     100%;
        min-width: 0;
        padding:   16px;
        font-size: 14px;
    }

    .ind-faq { padding: 56px 0 165px; }

    .ind-faq__art { width: 135%; max-width: none; opacity: .25; }
}

@media (max-width: 600px) {
    .ind-page .ind-approach__link {
        width:   100%;
        padding: 14px 18px;
    }

    .ind-utility__cards { grid-template-columns: 1fr; }

    .ind-utility__note {
        padding:   18px 20px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    /* Лише реконструкція; у «Практичному прикладі» підпис лишається
       рядком із переносом (як у шаблоні). */
    .ind-renovation .ind-case__caption {
        display:               grid;
        grid-template-columns: 1fr;
        gap:                   16px;
    }

    /* Кола маршруту лишаються 88px із кроком 20 (у шаблоні правила для
       ≤480 перекриті специфічнішими — фактично діє лише перенос слів). */
    .ind-renovation__route li {
        min-width:     0;
        overflow-wrap: anywhere;
    }

    /* Іконка-стрілка теми (17px) ширша за символ «→» шаблону (14px):
       на 320 підпис переносився на другий рядок. */
    .ind-page .ind-service-card__button { gap: 8px; }

    .ind-renovation .ind-case__criteria li {
        grid-template-columns: 24px minmax(0, 1fr);
        gap:                   10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ind-node__panel,
    .ind-system-card__panel,
    .ind-service-card__panel,
    .ind-node,
    .ind-node__arrow,
    .ind-node__arrow .icon,
    .ind-system-card,
    .ind-system-card__plus,
    .ind-service-card,
    .ind-service-card__plus { transition: none; }
}

@media (max-width: 768px) {
}


/* Mobile hero: place the industrial image behind the whole first screen. */
@media (max-width: 768px) {
    .ind-page .ind-hero {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        min-height: 0;
        padding: 0 0 40px !important;
    }

    .ind-hero > .breadcrumbs {
        position: absolute;
        z-index: 3;
        top: 12px;
        left: 0;
        width: 100%;
        margin: 0;
    }

    .ind-hero > .breadcrumbs .breadcrumbs__list { gap: 3px; }

    .ind-hero > .breadcrumbs .breadcrumbs__link,
    .ind-hero > .breadcrumbs .breadcrumbs__current {
        font-size: 10px;
        line-height: 1.35;
        color: rgba(194, 213, 244, .66);
    }

    .ind-hero > .breadcrumbs .breadcrumbs__sep,
    .ind-hero > .breadcrumbs .icon { color: rgba(194, 213, 244, .5); }

    .ind-hero > .container {
        position: relative;
        z-index: 2;
        padding-top: 58px;
    }

    .ind-hero__copy {
        position: relative;
        z-index: 2;
    }

    .ind-hero__visual {
        position: absolute;
        z-index: 0;
        inset: 0;
        width: auto;
        height: auto;
        margin: 0;
        overflow: hidden;
        pointer-events: none;
    }

    .ind-hero__visual .ind-image {
        position: absolute;
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
        object-position: 67% center;
        opacity: .68;
        filter: saturate(.86) contrast(1.02);
        -webkit-mask-image: none;
        mask-image: none;
    }

    .ind-hero__visual::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(6, 9, 26, .88) 0%, rgba(6, 9, 26, .68) 54%, rgba(6, 9, 26, .36) 100%),
                    linear-gradient(180deg, rgba(6, 9, 26, .56) 0%, rgba(6, 9, 26, .2) 45%, rgba(6, 9, 26, .78) 100%);
        pointer-events: none;
    }
}


/* Mobile hero: match the compact eyebrow used on the commercial page. */
@media (max-width: 768px) {
    .ind-page .ind-hero .section-eyebrow {
        font-size: 6.5px;
        line-height: 9px;
        letter-spacing: .91px;
    }

    .ind-page .ind-hero .section-dot {
        width: 5px;
        height: 5px;
    }
}


/* Match section dividers and gradient outlines to the approved commercial page. */
.ind-page {
    --gradient-line: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 152, 240, .08) 8%,
        rgba(0, 152, 240, .48) 30%,
        rgba(237, 242, 255, .72) 52%,
        rgba(242, 200, 147, .46) 74%,
        rgba(242, 200, 147, .08) 92%,
        transparent 100%
    );
}