/* ══════════════════════════════════════════════════════════════════════════
   Галузь — комерційна нерухомість /galuzi/komerczijna-neruhomist/
   (templates/komerczijna-neruhomist.php)

   Портовано з ТРЬОХ файлів шаблону замовника, злитих у фінальний каскад:
   commercial-page.css → real-estate.css → commercial-redesign.css (саме в
   такому порядку вони підключені в index.html, і останній перевизначає
   майже все). Тут — те, що реально діє в браузері.

   ЩО НЕ ПЕРЕНОСИЛОСЬ:
     .systems-*              — спільний блок css/blocks/industry-systems.css
                               (ідентичний зі сторінкою житлових будівель);
     .breadcrumbs*           — global/breadcrumbs (вигляд сайту);
     .faq__list / .faq-item* — спільний акордеон теми; тут лише хром секції;
     мертві правила шаблону (.com-hero__grid, .com-cards--zones, .estate-six,
     .estate-diagram, .com-card) — у розмітці їх немає.

   РОЗМІТКА vs ШАБЛОН:
     кнопка в хіро      — справжня кнопка з полем тексту (у шаблоні текст
                          лежав у CSS `content`, а посилання вело на проєкти);
     критичні зони      — data-faq-* + faqAccordion() замість <details>;
     лінія під секцією  — border-bottom + border-image (у шаблоні так само);
     номери й «01 / 04» — рахуються в PHP із порядку елементів.

   01 · Оболонка        05 · Типи об’єктів     09 · Системи
   02 · Хіро            06 · Послуги           10 · CTA
   03 · Що відрізняє    07 · Проєкти           11 · FAQ
   04 · Критичні зони   08 · Коли починати     12 · Адаптив
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 01 · Оболонка ──────────────────────────────────────────────────────── */
.com-page {
    overflow:   clip;
    background: radial-gradient(circle at 11% 8%, rgba(0, 152, 240, .09), transparent 25%),
                radial-gradient(circle at 92% 46%, rgba(76, 141, 255, .065), transparent 29%),
                var(--color-bg);
    color:      var(--color-text);
}

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

.com-page .com-section,
.com-page .com-hero {
    position:            relative;
    border-bottom:       .5px solid transparent;
    border-image-source: var(--gradient-line);
    border-image-slice:  1;
}

.com-page .com-section {
    padding:           104px 0;
    scroll-margin-top: 120px;
}

.com-page .com-section:nth-of-type(even) { background: linear-gradient(180deg, rgba(7, 35, 78, .23), rgba(3, 28, 69, .03)); }

.com-page .com-section:nth-of-type(3n) {
    background: radial-gradient(ellipse at 85% 12%, rgba(34, 114, 218, .1), transparent 42%),
                linear-gradient(180deg, rgba(2, 19, 50, .18), rgba(4, 30, 72, .2));
}

.com-section__header {
    max-width: 900px;
    margin:    0 0 54px;
}

.com-section__header--center {
    margin-right: auto;
    margin-left:  auto;
    max-width:    850px;
    text-align:   center;
}

.com-section__header--center .section-eyebrow { justify-content: center; }

.com-heading {
    max-width:      960px;
    margin:         12px 0 0;
    font-size:      clamp(30px, 4vw, 48px);
    font-weight:    300;
    line-height:    1.12;
    letter-spacing: -1.5px;
    color:          #eff5ff;
    text-wrap:      balance;
}

.com-title {
    max-width:      760px;
    margin:         16px 0 26px;
    font-size:      clamp(40px, 3vw, 58px);
    font-weight:    300;
    line-height:    1.08;
    letter-spacing: -1.9px;
    color:          var(--color-text);
    text-wrap:      balance;
}

.com-page .is-accent {
    display:                 inline-block;
    padding:                 0 0 6px;
    margin:                  0 0 -6px;
    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;
}

.com-copy {
    margin:      0 0 18px;
    font-size:   16px;
    line-height: 1.72;
    color:       #bdcae3;
}

.com-number {
    font-size:      13px;
    font-weight:    600;
    letter-spacing: 2px;
    color:          #74baff;
}

.com-card__title {
    margin:      0 0 16px;
    font-size:   23px;
    font-weight: 500;
    line-height: 1.3;
    color:       #edf4ff;
}

.com-cards {
    display:               grid;
    margin:                32px 0 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items:           stretch;
    gap:                   18px;
}

.com-visual__caption {
    padding-top: 16px;
    border-top:  1px solid var(--color-border-blue);
    font-size:   14px;
    line-height: 1.7;
    color:       var(--color-muted);
}

/* Списки в тексті: reset.css робить li блоками, маркер малюємо самі. */
.com-page .rich-text ul,
.com-list {
    display:    grid;
    gap:        9px;
    margin:     18px 0 24px;
    padding:    0;
    list-style: none;
}

.com-page .rich-text li,
.com-list li {
    position:     relative;
    padding-left: 20px;
    line-height:  1.55;
    color:        #bdcae3;
}

.com-page .rich-text li::before,
.com-list li::before {
    content:       "";
    position:      absolute;
    top:           .67em;
    left:          0;
    width:         6px;
    height:        6px;
    border:        1px solid #4bbaff;
    border-radius: 50%;
    box-shadow:    0 0 10px rgba(60, 180, 255, .4);
}

/* .rich-text із main.css — flex із gap 10px; у цьому шаблоні відступ між
   абзацами задають самі абзаци, тому gap прибираємо, щоб не додавався. */
.com-page .rich-text { gap: 0; }

/* .rich-text — flex, тож нижній відступ останнього блоку не «схлопується»
   назовні, як у шаблоні; прибираємо його вручну. */
.com-page .rich-text > :last-child { margin-bottom: 0; }

.com-page .rich-text p { margin: 0 0 16px; }

.com-link {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    font-weight:     500;
    line-height:     1.5;
    color:           #78c9ff;
    text-decoration: none;
    transition:      color var(--transition), transform var(--transition);
}

.com-link:hover,
.com-link:focus-visible {
    color:     #fff;
    transform: translateX(2px);
}

.com-link .icon { flex-shrink: 0; }

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

.com-page .btn {
    max-width:   100%;
    height:      auto;
    white-space: normal;
}

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

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

/* ── 02 · Хіро ──────────────────────────────────────────────────────────── */
.com-page .com-hero {
    display:     flex;
    /* По верху, а не по центру: інакше відстань від крихт до надзаголовка
       залежала б від кількості тексту нижче й стрибала між сторінками. */
    align-items: flex-start;
    min-height:  760px;
    padding:     54px 0 70px;
    isolation:   isolate;
    overflow:    clip;
    background:  radial-gradient(ellipse at 78% 46%, rgba(28, 106, 216, .22), transparent 38%),
                 linear-gradient(120deg, #031c45 7%, #041a3e 55%, #020e25 100%);
}

.com-hero > .container {
    position: relative;
    width:    100%;
}

.estate-hero { display: block; }

.estate-hero__copy {
    position:    relative;
    z-index:     3;
    width:       58%;
    max-width:   760px;
    /* Відступ від крихт тримає смуга під них (css/main.css). */
    padding:     0 0 24px;
    text-shadow: 0 4px 28px rgba(0, 4, 15, .72);
}



.estate-lead {
    max-width:     690px;
    margin-bottom: 18px;
    font-size:     18px;
    font-weight:   400;
    line-height:   1.7;
    color:         var(--color-text-soft);
}

.com-hero .com-copy {
    max-width:     660px;
    margin-bottom: 0;
    color:         var(--color-text-soft);
}

.estate-actions {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         20px;
    margin-top:  22px;
}

.com-page .estate-actions__btn {
    width:           auto;
    min-width:       270px;
    min-height:      56px;
    justify-content: space-between;
    gap:             14px;
    padding:         17px 28px;
}

/* Фото займає праву половину хіро й розтягується до країв екрана. */
.com-hero .estate-hero__visual {
    position:       absolute;
    z-index:        0;
    inset:          -54px calc((100vw - 100%) / -2) -70px 16%;
    width:          auto;
    height:         auto;
    margin:         0;
    overflow:       visible;
    pointer-events: none;
}

.com-hero .estate-photo {
    position:               absolute;
    inset:                  0;
    width:                  100%;
    height:                 100%;
    max-width:              none;
    object-fit:             cover;
    object-position:        center center;
    -webkit-mask-image:     linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .08) 10%, rgba(0, 0, 0, .4) 22%, #000 40%, #000 94%, transparent 100%),
                            linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .64) 5%, #000 12%, #000 86%, rgba(0, 0, 0, .58) 94%, transparent 100%);
    mask-image:             linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .08) 10%, rgba(0, 0, 0, .4) 22%, #000 40%, #000 94%, transparent 100%),
                            linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .64) 5%, #000 12%, #000 86%, rgba(0, 0, 0, .58) 94%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite:         intersect;
}

.estate-hero__caption {
    position:                absolute;
    z-index:                 2;
    right:                   2%;
    bottom:                  10%;
    left:                    auto;
    display:                 flex;
    flex-direction:          column;
    gap:                     7px;
    max-width:               min(260px, 26vw);
    padding:                 16px 19px;
    border:                  1px solid rgba(105, 177, 255, .26);
    border-radius:           8px;
    background:              rgba(3, 20, 51, .72);
    box-shadow:              0 18px 46px rgba(0, 8, 28, .3);
    font-size:               12px;
    color:                   #dce9ff;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter:         blur(14px);
}

.estate-hero__caption-area {
    font-size:   25px;
    font-weight: 500;
    color:       var(--color-text);
}

.com-proof {
    position:                relative;
    z-index:                 2;
    display:                 grid;
    grid-template-columns:   repeat(4, minmax(0, 1fr));
    gap:                     0;
    width:                   min(920px, 78%);
    max-width:               860px;
    margin:                  30px 0 0;
    padding:                 16px 20px;
    border:                  1px solid rgba(190, 218, 255, .2);
    border-radius:           14px;
    background:              linear-gradient(135deg, rgba(35, 57, 101, .88), rgba(10, 25, 56, .82));
    box-shadow:              inset 0 1px rgba(255, 255, 255, .09), 0 10px 32px rgba(0, 11, 35, .2);
    list-style:              none;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter:         blur(14px);
}

.com-proof__item {
    display:      flex;
    align-items:  center;
    gap:          12px;
    min-width:    0;
    padding:      6px 16px;
    border-right: 1px solid rgba(120, 181, 255, .15);
    font-size:    14px;
    line-height:  1.5;
    color:        #dbe8ff;
}

.com-proof__item:last-child { border-right: 0; }

.com-proof__check {
    flex:  0 0 auto;
    color: var(--color-sky);
}

/* ── 03 · Що відрізняє комерційні об’єкти ───────────────────────────────── */
.estate-change {
    isolation:  isolate;
    overflow:   hidden;
    background: radial-gradient(ellipse at 83% 37%, rgba(30, 118, 225, .13), transparent 38%),
                linear-gradient(180deg, rgba(3, 27, 66, .24), rgba(5, 34, 78, .2));
}

.estate-change::before {
    content:            "";
    position:           absolute;
    z-index:            -1;
    inset:              0;
    opacity:            .13;
    pointer-events:     none;
    background-image:   linear-gradient(rgba(93, 180, 255, .18) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(93, 180, 255, .18) 1px, transparent 1px);
    background-size:    54px 54px;
    -webkit-mask-image: linear-gradient(90deg, transparent 6%, #000 70%, transparent);
    mask-image:         linear-gradient(90deg, transparent 6%, #000 70%, transparent);
}

.estate-change > .container {
    position: relative;
    z-index:  1;
}

.estate-change .com-section__header {
    max-width:     980px;
    margin-bottom: 48px;
}

.estate-change__layout {
    display:               grid;
    grid-template-columns: minmax(0, .88fr) minmax(520px, 1.12fr);
    align-items:           start;
    gap:                   clamp(34px, 5vw, 76px);
}

.estate-change__copy {
    position:      relative;
    overflow:      hidden;
    padding:       34px 36px;
    border:        1px solid rgba(104, 169, 255, .22);
    border-radius: 18px;
    background:    linear-gradient(145deg, rgba(14, 51, 105, .58), rgba(5, 26, 63, .76));
    box-shadow:    inset 0 1px rgba(255, 255, 255, .045), 0 24px 60px rgba(0, 10, 34, .2);
}

.estate-change__copy::before {
    content:    "";
    position:   absolute;
    inset:      0 auto 0 0;
    width:      2px;
    background: linear-gradient(180deg, transparent, #55bdff 28%, #447de8 72%, transparent);
}

.estate-change__copy > .com-copy:first-child {
    margin:      0;
    font-size:   16.5px;
    line-height: 1.82;
    color:       #c8d6ed;
}

.estate-change__copy > .com-copy:last-child {
    margin:      0;
    padding-top: 23px;
    border-top:  1px solid rgba(125, 184, 255, .15);
    font-size:   15.5px;
    line-height: 1.75;
    color:       #d8e5f8;
}

.estate-change__emphasis {
    display:       block;
    margin-top:    18px;
    padding:       17px 19px;
    border-left:   2px solid #55bdff;
    border-radius: 0 10px 10px 0;
    background:    rgba(25, 79, 149, .2);
    font-weight:   500;
    line-height:   1.7;
    color:         #edf4ff;
}

.estate-change__tags {
    position:              relative;
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   9px;
    margin:                34px 0 28px;
    padding:               29px 0 0;
    list-style:            none;
    counter-reset:         change-variable;
}

.estate-change__tags::before {
    content:        "Змінні проєкту";
    position:       absolute;
    inset:          0 auto auto 0;
    font-size:      10px;
    font-weight:    600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color:          #78c9ff;
}

.estate-change__tags li {
    display:               grid;
    grid-template-columns: 31px minmax(0, 1fr);
    align-items:           center;
    gap:                   10px;
    min-height:            56px;
    padding:               10px 13px;
    border:                1px solid rgba(104, 169, 255, .2);
    border-radius:         10px;
    background:            rgba(8, 36, 81, .7);
    font-size:             13px;
    line-height:           1.35;
    color:                 #d9e6fa;
    counter-increment:     change-variable;
}

.estate-change__tags li::before {
    content:           "0" counter(change-variable);
    display:           grid;
    place-items:       center;
    width:             29px;
    height:            29px;
    border:            1px solid rgba(85, 189, 255, .36);
    border-radius:     50%;
    background:        rgba(20, 83, 157, .18);
    font-size:         9px;
    letter-spacing:    .04em;
    color:             #70c7ff;
}

.estate-change__tags li:last-child { grid-column: 1 / -1; }

.estate-change__diagram {
    position:      relative;
    align-self:    center;
    overflow:      hidden;
    margin:        0;
    padding:       34px;
    border:        1px solid rgba(102, 171, 255, .32);
    border-radius: 18px;
    background:    radial-gradient(circle at 50% 25%, rgba(37, 128, 240, .19), transparent 38%),
                   linear-gradient(145deg, rgba(7, 35, 84, .98), rgba(4, 23, 57, .95));
    box-shadow:    inset 0 1px rgba(255, 255, 255, .055), 0 26px 70px rgba(0, 9, 32, .27);
}

.estate-change__diagram::before {
    content:            "";
    position:           absolute;
    inset:              0;
    opacity:            .2;
    pointer-events:     none;
    background-image:   linear-gradient(rgba(86, 170, 255, .12) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(86, 170, 255, .12) 1px, transparent 1px);
    background-size:    32px 32px;
    -webkit-mask-image: radial-gradient(circle at 50% 42%, #000, transparent 72%);
    mask-image:         radial-gradient(circle at 50% 42%, #000, transparent 72%);
}

.estate-change__caption {
    position:       relative;
    z-index:        1;
    display:        flex;
    align-items:    center;
    gap:            10px;
    margin:         0 0 26px;
    font-size:      10px;
    font-weight:    600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color:          #82cbff;
}

.estate-change__caption::before {
    content:       "";
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    #55bdff;
    box-shadow:    0 0 14px rgba(85, 189, 255, .8);
}

.estate-change__source {
    position:      relative;
    z-index:       1;
    padding:       22px;
    border:        1px solid rgba(103, 187, 255, .5);
    border-radius: 12px;
    background:    linear-gradient(120deg, rgba(20, 79, 157, .78), rgba(9, 41, 93, .92));
    box-shadow:    inset 0 1px rgba(255, 255, 255, .07), 0 14px 34px rgba(0, 11, 38, .24);
    font-size:     17px;
    font-weight:   500;
    color:         #edf5ff;
    text-align:    center;
}

.estate-change__source::before {
    content:        "Керуючий вузол";
    display:        block;
    margin-bottom:  7px;
    font-size:      9px;
    font-weight:    600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color:          #70c7ff;
}

.estate-change__connector {
    position: relative;
    z-index:  1;
    height:   54px;
}

.estate-change__connector::before {
    content:    "";
    position:   absolute;
    top:        9px;
    bottom:     13px;
    left:       50%;
    width:      1px;
    background: linear-gradient(#70c7ff, rgba(112, 199, 255, .26));
}

.estate-change__connector::after {
    content:       "";
    position:      absolute;
    bottom:        10px;
    left:          calc(50% - 4px);
    width:         7px;
    height:        7px;
    border-right:  1px solid #70c7ff;
    border-bottom: 1px solid #70c7ff;
    transform:     rotate(45deg);
}

.estate-change__systems {
    position:              relative;
    z-index:               1;
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   10px;
    margin:                0;
    padding:               0;
    list-style:            none;
}

.estate-change__systems li {
    position:              relative;
    display:               grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items:           center;
    gap:                   11px;
    min-height:            62px;
    padding:               12px 14px;
    border:                1px solid rgba(92, 155, 237, .2);
    border-radius:         11px;
    background:            linear-gradient(135deg, rgba(11, 45, 97, .9), rgba(6, 29, 68, .84));
    font-size:             13.5px;
    line-height:           1.4;
    color:                 #dce9fb;
    transition:            border-color var(--transition), background var(--transition), transform var(--transition);
}

.estate-change__systems li::after {
    content:       "";
    position:      absolute;
    top:           50%;
    right:         13px;
    width:         4px;
    height:        4px;
    border-radius: 50%;
    background:    rgba(112, 199, 255, .62);
    box-shadow:    0 0 10px rgba(85, 189, 255, .54);
    transform:     translateY(-50%);
}

.estate-change__systems li:hover {
    border-color: rgba(112, 199, 255, .45);
    background:   linear-gradient(135deg, rgba(15, 59, 124, .94), rgba(7, 34, 78, .9));
    transform:    translateY(-1px);
}

.estate-change__systems .com-number {
    display:        grid;
    place-items:    center;
    width:          32px;
    height:         32px;
    margin:         0;
    border:         1px solid rgba(85, 189, 255, .32);
    border-radius:  50%;
    font-size:      9px;
    letter-spacing: .04em;
    color:          #62c1ff;
}

.estate-change__conclusion {
    position:              relative;
    display:               grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items:           center;
    gap:                   20px;
    margin:                34px 0 24px;
    padding:               26px 30px;
    border:                1px solid rgba(105, 174, 255, .24);
    border-radius:         16px;
    background:            linear-gradient(110deg, rgba(20, 76, 148, .34), rgba(7, 31, 73, .64));
    box-shadow:            inset 0 1px rgba(255, 255, 255, .045);
}

.estate-change__conclusion::before {
    content:       "";
    position:      absolute;
    inset:         0 auto 0 0;
    width:         2px;
    border-radius: 16px 0 0 16px;
    background:    linear-gradient(180deg, #55bdff, #5577ef);
}

.estate-change__check {
    display:       grid;
    place-items:   center;
    width:         48px;
    height:        48px;
    border:        1px solid rgba(85, 189, 255, .46);
    border-radius: 50%;
    background:    rgba(26, 87, 161, .22);
    box-shadow:    0 0 30px rgba(32, 127, 226, .14);
    color:         #82d1ff;
}

.estate-change__conclusion-text {
    margin:      0;
    font-size:   17px;
    font-weight: 400;
    line-height: 1.7;
    color:       #e7f1ff;
}

.estate-change__conclusion-text::before {
    content:        "Єдиний координаційний результат";
    display:        block;
    margin-bottom:  7px;
    font-size:      9px;
    font-weight:    600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:          #70c7ff;
}

.estate-change__conclusion-text strong { font-weight: 500; }

.com-page .estate-change__link {
    min-height:      54px;
    justify-content: center;
    padding:         15px 25px;
    border:          1px solid rgba(237, 242, 255, .18);
    border-radius:   10px;
    background:      linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    box-shadow:      var(--shadow-btn);
    font-size:       14px;
    font-weight:     500;
    letter-spacing:  -.1px;
    color:           var(--color-text);
    transition:      border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.com-page .estate-change__link:hover,
.com-page .estate-change__link:focus-visible {
    border-color: rgba(237, 242, 255, .34);
    box-shadow:   0 12px 30px rgba(28, 92, 219, .34);
    color:        #fff;
    transform:    none;
}

/* ── 04 · Критичні зони ─────────────────────────────────────────────────── */
.commercial-critical {
    isolation:  isolate;
    background: linear-gradient(180deg, rgba(3, 24, 59, .15), rgba(2, 17, 44, .5)),
                radial-gradient(ellipse at 80% 8%, rgba(27, 100, 178, .12), transparent 55%);
}

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

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

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

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

.critical-node__toggle {
    display:               grid;
    grid-template-columns: 58px minmax(0, 1fr) 34px;
    align-items:           center;
    gap:                   14px;
    width:                 100%;
    min-height:            66px;
    margin:                0;
    padding:               13px 17px 13px 21px;
    border:                0;
    background:            transparent;
    font:                  inherit;
    color:                 #e8f1ff;
    text-align:            left;
    cursor:                pointer;
}

.critical-node__number {
    font-size:      12px;
    line-height:    1;
    letter-spacing: .16em;
    color:          #65bdf7;
}

.critical-node__title {
    font-size:   16px;
    font-weight: 500;
    line-height: 1.35;
}

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

/* Іконка теми дивиться вгору: закритий стан — перевернута, як у шаблоні. */
.critical-node__arrow-svg {
    width:      15px;
    height:     15px;
    transform:  rotate(180deg);
    transition: transform .22s ease;
}

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

.critical-node.is-open .critical-node__arrow-svg { transform: rotate(0deg); }

/* Розкриття — механізм FAQ (js/main.js → faqAccordion()). */
.critical-node__panel {
    max-height: 0;
    overflow:   hidden;
    transition: max-height .4s ease;
}

.critical-node.is-open .critical-node__panel { max-height: none; }

.critical-node__content {
    display:               grid;
    grid-template-columns: minmax(0, .82fr) minmax(400px, 1.18fr);
    align-items:           center;
    gap:                   clamp(24px, 3vw, 42px);
    margin:                0 17px 17px;
    padding:               clamp(24px, 3vw, 38px);
    border-top:            1px solid rgba(104, 181, 249, .16);
    border-radius:         8px;
    background:            radial-gradient(circle at 90% 18%, rgba(49, 148, 244, .12), transparent 38%), rgba(5, 24, 58, .68);
}

.critical-node__copy {
    min-width: 0;
    max-width: 620px;
}

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

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

.critical-node__copy .rich-text p {
    margin:      0 0 16px;
    font-size:   15.5px;
    line-height: 1.7;
    color:       #aebfda;
}

.critical-node__copy .rich-text ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   8px 26px;
    margin:                18px 0 22px;
}

.critical-node__copy .rich-text li { font-size: 15px; }

.critical-node__visual {
    position:      relative;
    min-width:     0;
    margin:        0;
    overflow:      hidden;
    border:        1px solid rgba(91, 170, 238, .28);
    border-radius: 11px;
    background:    #041b3d;
    box-shadow:    0 18px 38px -24px rgba(0, 4, 18, .95), inset 0 1px rgba(211, 237, 255, .06);
}

.critical-node__image {
    display:    block;
    width:      100%;
    height:     auto;
    background: #041b3d;
}

.critical-node__caption {
    padding:        12px 15px;
    border-top:     1px solid rgba(86, 166, 236, .18);
    background:     linear-gradient(90deg, rgba(8, 38, 80, .96), rgba(6, 27, 61, .96));
    font-size:      11px;
    font-weight:    600;
    line-height:    1.4;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          #8fc9f5;
}

/* ── 05 · Типи об’єктів ─────────────────────────────────────────────────── */
.commercial-feature {
    isolation:  isolate;
    overflow:   hidden;
    background: linear-gradient(180deg, rgba(3, 24, 59, .18), rgba(2, 17, 44, .52)),
                radial-gradient(ellipse at 72% 14%, rgba(27, 100, 178, .13), transparent 58%);
}

.commercial-feature::after {
    content:            "";
    position:           absolute;
    z-index:            -1;
    inset:              0 0 auto 42%;
    height:             58%;
    opacity:            .38;
    pointer-events:     none;
    background:         linear-gradient(90deg, transparent 0 49.8%, rgba(75, 186, 255, .09) 50%, transparent 50.2%) 0 0 / 48px 48px,
                        linear-gradient(transparent 0 49.8%, rgba(75, 186, 255, .09) 50%, transparent 50.2%) 0 0 / 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 20%, #000, transparent 72%);
    mask-image:         radial-gradient(ellipse at 50% 20%, #000, transparent 72%);
}

.commercial-feature-layout {
    position:              relative;
    z-index:               1;
    display:               grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    align-items:           start;
    gap:                   clamp(42px, 5.4vw, 82px);
}

/* Офіси й готелі: шапка тримається при скролі, колонки трохи ширші. */
.commercial-feature--sticky .commercial-feature-layout {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    gap:                   clamp(52px, 8vw, 120px);
}

.commercial-feature--sticky .commercial-feature-heading {
    position: sticky;
    top:      120px;
    margin:   0;
}

.commercial-feature-heading { max-width: 590px; }

.commercial-feature-heading .com-heading {
    max-width:     570px;
    margin-bottom: 24px;
    font-size:     clamp(34px, 3.65vw, 50px);
}

.commercial-feature-heading__lead {
    max-width:   550px;
    margin:      0;
    font-size:   17px;
    line-height: 1.68;
    color:       #dce9fb;
}

.commercial-feature-heading__support {
    max-width:   550px;
    margin:      18px 0 0;
    font-size:   15px;
    line-height: 1.7;
    color:       rgba(200, 218, 242, .74);
}

.commercial-feature-content { min-width: 0; }

.commercial-feature-list {
    position:   relative;
    display:    grid;
    gap:        12px;
    margin:     2px 0 0;
    padding:    0 0 0 26px;
    list-style: none;
}

.commercial-feature-list::before {
    content:    "";
    position:   absolute;
    top:        28px;
    bottom:     28px;
    left:       8px;
    width:      .5px;
    background: linear-gradient(180deg, transparent, rgba(44, 168, 255, .6) 10%, rgba(44, 168, 255, .6) 90%, transparent);
}

.commercial-feature-item {
    position:              relative;
    display:               grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items:           start;
    gap:                   15px;
    min-width:             0;
    min-height:            134px;
    padding:               22px 34px 22px 22px;
    border:                1px solid rgba(86, 157, 236, .2);
    border-radius:         11px;
    background:            linear-gradient(104deg, rgba(21, 67, 125, .58), rgba(13, 49, 101, .64));
    box-shadow:            inset 0 1px rgba(218, 237, 255, .045), 0 8px 24px rgba(0, 7, 27, .16);
}

.commercial-feature-item::before {
    content:       "";
    position:      absolute;
    top:           50%;
    left:          -22px;
    width:         7px;
    height:        7px;
    border:        1px solid rgba(91, 196, 255, .74);
    border-radius: 50%;
    background:    #0b4d93;
    box-shadow:    0 0 9px rgba(38, 167, 255, .36);
    transform:     translate(-50%, -50%);
}

.commercial-feature-item__number {
    padding-top:    2px;
    font-size:      13px;
    line-height:    1.4;
    letter-spacing: .05em;
    color:          #60b8f3;
}

.commercial-feature-item__title {
    margin:      0;
    font-size:   clamp(17px, 1.4vw, 21px);
    font-weight: 500;
    line-height: 1.35;
    color:       #f1f6ff;
}

.commercial-feature-item__text {
    margin:      8px 0 0;
    font-size:   13px;
    line-height: 1.62;
    color:       rgba(200, 218, 242, .78);
}

.commercial-feature-tags {
    display:    flex;
    flex-wrap:  wrap;
    gap:        7px;
    margin:     14px 0 0;
    padding:    0;
    list-style: none;
}

.commercial-feature-tags li {
    padding:       6px 9px;
    border:        1px solid rgba(87, 173, 246, .2);
    border-radius: 4px;
    background:    rgba(5, 31, 70, .38);
    font-size:     11px;
    line-height:   1.3;
    color:         #bcd6f4;
}

.com-page .commercial-feature-cta {
    width:           max-content;
    min-width:       230px;
    min-height:      56px;
    justify-content: space-between;
    margin:          28px 0 0;
    padding:         16px 20px;
    text-align:      left;
}

/* ── 06 · Послуги ───────────────────────────────────────────────────────── */
.commercial-services {
    background: radial-gradient(ellipse at 10% 20%, rgba(33, 111, 204, .1), transparent 44%),
                linear-gradient(180deg, rgba(4, 27, 65, .2), rgba(2, 18, 47, .28));
}

.commercial-services__grid {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items:           stretch;
    gap:                   24px;
}

.commercial-service-card {
    position:       relative;
    display:        flex;
    flex-direction: column;
    gap:            22px;
    min-width:      0;
    overflow:       hidden;
    padding:        36px;
    border:         1px solid rgba(160, 193, 244, .18);
    border-radius:  18px;
    background:     linear-gradient(135deg, rgba(45, 64, 110, .45), rgba(5, 22, 53, .72));
    box-shadow:     inset 0 1px rgba(255, 255, 255, .05);
    transition:     border-color var(--transition);
}

.commercial-service-card::before {
    content:    "";
    position:   absolute;
    inset:      0 16px auto;
    height:     1px;
    background: var(--gradient-line);
}

.commercial-service-card:hover,
.commercial-service-card:focus-within { border-color: rgba(119, 198, 255, .55); }

.commercial-service-card__meta {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    color:           #77c6ff;
}

.commercial-service-card__number {
    font-size:      13px;
    letter-spacing: .15em;
    color:          #a3b5d4;
}

.commercial-service-card__title {
    margin:      0;
    font-size:   clamp(23px, 2.3vw, 30px);
    font-weight: 500;
    line-height: 1.25;
    color:       #f0f6ff;
}

.commercial-service-card__text {
    max-width:   520px;
    margin:      0 0 12px;
    font-size:   16px;
    line-height: 1.7;
    color:       #bdcae3;
}

.com-page .commercial-service-card__button {
    display:         flex;
    width:           100%;
    min-width:       0;
    min-height:      56px;
    justify-content: space-between;
    gap:             14px;
    margin-top:      auto;
    padding:         16px 20px;
    color:           var(--color-text);
    text-align:      left;
}

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

/* ── 07 · Проєкти ───────────────────────────────────────────────────────── */
.commercial-projects .com-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   24px;
    margin-bottom:         0;
}

.estate-project {
    position:              relative;
    display:               grid;
    grid-template-rows:    auto 1fr;
    min-width:             0;
    overflow:              hidden;
    border:                1px solid rgba(102, 165, 235, .27);
    border-radius:         16px;
    background:            #061735;
    box-shadow:            inset 0 1px rgba(255, 255, 255, .04), 0 24px 58px -34px rgba(0, 7, 27, .96);
    transition:            border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.estate-project::before {
    content:    "";
    position:   absolute;
    top:        0;
    right:      0;
    left:       0;
    z-index:    2;
    height:     1px;
    opacity:    .62;
    background: linear-gradient(90deg, transparent, rgba(111, 201, 255, .85), transparent);
}

.estate-project:hover {
    border-color: rgba(104, 190, 255, .48);
    transform:    translateY(-4px);
    box-shadow:   inset 0 1px rgba(255, 255, 255, .055), 0 28px 62px -30px rgba(0, 7, 27, .98);
}

.estate-project .estate-photo {
    display:      block;
    width:        100%;
    aspect-ratio: 16 / 9;
    object-fit:   cover;
    filter:       saturate(.88) contrast(1.035);
    transition:   filter .35s ease, transform .45s ease;
}

.estate-project:hover .estate-photo {
    filter:    saturate(.98) contrast(1.045);
    transform: scale(1.012);
}

.estate-project__body {
    display:        flex;
    flex-direction: column;
    min-height:     0;
    padding:        27px 29px 29px;
    background:     linear-gradient(145deg, rgba(8, 30, 68, .97), rgba(4, 20, 48, .99));
}

.estate-project__body .com-number {
    display:        block;
    margin:         0 0 10px;
    font-size:      11px;
    font-weight:    600;
    line-height:    1.4;
    letter-spacing: .145em;
    color:          #6bc5ff;
}

.estate-project__body .com-card__title {
    margin-bottom:  15px;
    font-size:      24px;
    letter-spacing: -.025em;
}

.estate-project__body > .com-copy {
    margin:      0;
    font-size:   14px;
    line-height: 1.55;
    color:       #b8c9e2;
}

.estate-project__body > .com-copy + .com-copy { margin-top: 7px; }

.estate-project__body > .com-copy:last-of-type { margin-bottom: 26px; }

.com-page .project-card__button {
    width:           max-content;
    min-width:       196px;
    min-height:      46px;
    justify-content: space-between;
    gap:             16px;
    margin-top:      auto;
    padding:         5px 6px 5px 18px;
    border:          1px solid rgba(105, 184, 255, .33);
    border-radius:   999px;
    background:      linear-gradient(115deg, rgba(15, 55, 111, .82), rgba(8, 36, 82, .72));
    box-shadow:      inset 0 1px rgba(255, 255, 255, .055), 0 12px 26px -18px rgba(54, 153, 255, .72);
    font-size:       13px;
    font-weight:     500;
    line-height:     1.2;
    color:           #dcebff;
    transition:      border-color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
}

.project-card__button-icon {
    display:       grid;
    place-items:   center;
    flex:          0 0 34px;
    width:         34px;
    height:        34px;
    border:        1px solid rgba(166, 218, 255, .3);
    border-radius: 50%;
    background:    linear-gradient(135deg, #2878d4, #54b5ff);
    box-shadow:    0 7px 18px -8px rgba(69, 169, 255, .9);
    color:         #fff;
}

.project-card__button .icon { transition: transform var(--transition); }

.project-card__button:hover,
.project-card__button:focus-visible {
    border-color: rgba(118, 201, 255, .7);
    background:   linear-gradient(115deg, rgba(20, 71, 139, .92), rgba(9, 43, 94, .85));
    box-shadow:   inset 0 1px rgba(255, 255, 255, .08), 0 14px 28px -16px rgba(54, 153, 255, .9);
    color:        #fff;
    transform:    translateY(-1px);
}

.project-card__button:hover .icon,
.project-card__button:focus-visible .icon { transform: translateX(2px); }

.project-card__button:focus-visible {
    outline:        2px solid rgba(219, 239, 255, .9);
    outline-offset: 3px;
}

/* ── 08 · Коли починати ─────────────────────────────────────────────────── */
.estate-split {
    display:               grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items:           center;
    gap:                   clamp(48px, 8vw, 110px);
}

.estate-split__copy { min-width: 0; }

.estate-plan {
    position:      relative;
    margin:        0;
    min-width:     0;
    overflow:      hidden;
    border:        1px solid rgba(79, 185, 255, .36);
    border-radius: 9px;
    background:    #061d48;
    box-shadow:    0 22px 54px rgba(0, 10, 32, .22);
}

.estate-plan .estate-photo {
    display:      block;
    width:        100%;
    aspect-ratio: 16 / 10;
    object-fit:   cover;
}

.estate-plan .com-visual__caption {
    padding:    16px 20px;
    border-top: 0;
    font-size:  12px;
    color:      #aac4e8;
}

/* ── 09 · Системи (хром секції) ─────────────────────────────────────────── */
/* Сам блок — css/blocks/industry-systems.css (спільний із житловими
   будівлями). Тут лише фон секції й відступ шапки, які в шаблоні свої. */
.commercial-systems {
    position:   relative;
    isolation:  isolate;
    overflow:   hidden;
    background: radial-gradient(circle at 16% 48%, rgba(36, 129, 232, .12), transparent 30%),
                linear-gradient(180deg, #031d47 0%, #041a3e 55%, #03182f 100%);
}

.commercial-systems::before {
    content:            "";
    position:           absolute;
    z-index:            -1;
    inset:              0;
    pointer-events:     none;
    background-image:   linear-gradient(rgba(95, 171, 241, .035) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(95, 171, 241, .035) 1px, transparent 1px);
    background-size:    64px 64px;
    -webkit-mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, .5) 55%, transparent 92%);
    mask-image:         linear-gradient(90deg, #000, rgba(0, 0, 0, .5) 55%, transparent 92%);
}

.commercial-systems__heading {
    max-width:     900px;
    margin-bottom: clamp(48px, 6vw, 76px);
}

/* ── 10 · CTA ───────────────────────────────────────────────────────────── */
.com-page .commercial-final-cta { padding: 88px 0; }

.commercial-final-cta__banner {
    display:               grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items:         center;
    gap:                   34px;
    padding:               clamp(40px, 6vw, 80px) clamp(24px, 6vw, 80px);
    border:                1px solid rgba(125, 164, 255, .8);
    border-radius:         30px;
    background:            radial-gradient(ellipse at 0 0, rgba(113, 147, 234, .32), transparent 58%),
                           linear-gradient(165deg, #253464 0%, #18244d 58%, #0e1938 100%);
    box-shadow:            0 24px 64px rgba(0, 6, 24, .2);
    text-align:            center;
}

.commercial-final-cta__content {
    width:     100%;
    min-width: 0;
}

.commercial-final-cta__banner .section-eyebrow {
    justify-content: center;
    max-width:       none;
    margin:          0 auto 24px;
    color:           var(--color-yellow);
}

.commercial-final-cta__banner .section-dot {
    background: var(--color-yellow);
    box-shadow: none;
}

.commercial-final-cta__banner .com-heading {
    max-width:   1000px;
    margin:      0 auto 26px;
    font-size:   clamp(30px, 3.5vw, 48px);
    font-weight: 600;
    line-height: 1.13;
    text-wrap:   balance;
}

.commercial-final-cta__copy {
    display:     grid;
    gap:         7px;
    max-width:   960px;
    margin:      0 auto;
    font-size:   18px;
    line-height: 1.65;
    color:       #bfcced;
    text-align:  center;
}

.com-page .commercial-final-cta__button {
    width:        auto;
    min-width:    256px;
    max-width:    100%;
    min-height:   56px;
    justify-self: center;
    padding:      16px 28px;
}

/* ── 11 · FAQ ───────────────────────────────────────────────────────────── */
/* Акордеон спільний (main.css + faqAccordion()); тут — хром секції та ті
   значення, якими шаблон перевизначає загальний вигляд акордеона.
   Секція селектором .com-section.commercial-faq, бо фон і падінг мусять
   перебити .com-page .com-section:nth-of-type() вище. Нумерація «01.» —
   CSS-лічильником: у тексті питання й у JSON-LD номера немає. */
.com-page .com-section.commercial-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));
}

.commercial-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);
}

.commercial-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);
}

.commercial-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.12;
    letter-spacing: -1.5px;
    color:          #eff5ff;
}

.commercial-faq .faq__list {
    display:       grid;
    max-width:     1060px;
    gap:           12px;
    margin-inline: auto;
    counter-reset: commercial-faq;
}

/* Відступ між пунктами дає лише gap списку (12px, як у FAQ решти сторінок):
   у шаблоні замовника поруч із gap стоїть ще margin-bottom, і разом виходить
   24px — це єдине місце, де ми свідомо не повторюємо його каскад. */
.commercial-faq .faq-item {
    position:      relative;
    overflow:      hidden;
    border:        1px solid rgba(105, 158, 230, .13);
    border-radius: 9px;
    background:    linear-gradient(145deg, rgba(13, 42, 86, .94), rgba(8, 29, 64, .97));
    box-shadow:    0 10px 26px -24px rgba(0, 0, 0, .78);
}

.commercial-faq .faq-item.is-open {
    border-color: rgba(91, 163, 249, .34);
    background:   linear-gradient(145deg, rgba(15, 48, 97, .98), rgba(8, 31, 68, .98));
    box-shadow:   inset 0 1px rgba(174, 211, 255, .06), 0 14px 34px -28px rgba(25, 103, 211, .52);
}

.commercial-faq .faq-item__toggle {
    min-height: 64px;
    gap:        30px;
    padding:    20px;
    color:      #dce8fc;
}

.commercial-faq .faq-item__question {
    font-size:      16px;
    font-weight:    500;
    line-height:    1.5;
    letter-spacing: -.15px;
    color:          inherit;
}

.commercial-faq .faq-item__question::before {
    content:           counter(commercial-faq, decimal-leading-zero) ".";
    margin-right:      .3em;
    counter-increment: commercial-faq;
}

.commercial-faq .faq-item__icon {
    width:         28px;
    height:        28px;
    flex:          0 0 28px;
    border-color:  rgba(109, 148, 202, .28);
    border-radius: 6px;
    background:    rgba(2, 15, 39, .7);
    box-shadow:    0 12px 24px rgba(0, 5, 20, .38);
    color:         #8eafd8;
}

.commercial-faq .faq-item.is-open .faq-item__icon {
    border-color: rgba(75, 168, 255, .7);
    background:   rgba(18, 99, 175, .36);
    box-shadow:   0 0 24px rgba(20, 158, 255, .28);
    color:        #d9f0ff;
}

.commercial-faq .faq-item__icon-svg {
    width:  18px;
    height: 18px;
}

.commercial-faq .faq-item__answer {
    max-width: 740px;
    padding:   0 20px 16px;
}

.commercial-faq .faq-item__answer p {
    margin:      0;
    font-size:   14.5px;
    line-height: 1.65;
    color:       #bdcae3;
}

.commercial-faq .faq-item__answer p + p { margin-top: 10px; }

/* ── 12 · Адаптив ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .com-page .com-hero { min-height: 700px; }

    .estate-hero__copy { width: 65%; }

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

    .com-proof__item:nth-child(2) { border-right: 0; }

    .estate-change__layout {
        grid-template-columns: minmax(0, 1fr);
        gap:                   26px;
    }

    .estate-change__copy { padding: 30px; }

    .estate-hero__caption { display: none; }
}

@media (max-width: 900px) {
    .commercial-feature-layout {
        grid-template-columns: minmax(0, 1fr);
        gap:                   36px;
    }

    .commercial-feature-heading { max-width: 760px; }

    .commercial-feature-heading .com-heading { max-width: 720px; }
}

@media (max-width: 768px) {
    .com-page .com-section {
        padding:           74px 0;
        scroll-margin-top: 76px;
    }

    .com-page .com-hero {
        display:    block;
        min-height: auto;
        padding:    34px 0 48px;
    }


    .estate-hero__copy {
        width:       100%;
        max-width:   none;
        padding:     0;
        text-shadow: none;
    }

    .com-title {
        font-size:      clamp(36px, 10.5vw, 48px);
        line-height:    1.08;
        letter-spacing: -1.2px;
        text-wrap:      wrap;
    }

    .estate-lead { font-size: 17px; }

    .estate-actions {
        display:               grid;
        grid-template-columns: minmax(0, 1fr);
        gap:                   8px;
    }

    .com-page .estate-actions__btn {
        width:     100%;
        min-width: 0;
    }

    .com-hero .estate-hero__visual {
        position:      relative;
        inset:         auto;
        width:         100%;
        height:        auto;
        aspect-ratio:  16 / 10;
        margin:        24px 0 0;
        border-radius: 8px;
        overflow:      hidden;
    }

    .com-hero .estate-photo {
        object-position:    center center;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%),
                            linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
        mask-image:         linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%),
                            linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    }

    .com-proof {
        width:                 100%;
        max-width:             none;
        grid-template-columns: minmax(0, 1fr);
        margin-top:            18px;
    }

    .com-proof__item {
        min-height:    43px;
        border-right:  0;
        border-bottom: 1px solid rgba(120, 181, 255, .14);
    }

    .com-proof__item:last-child { border-bottom: 0; }

    .com-section__header { margin-bottom: 36px; }

    .com-heading { font-size: clamp(31px, 8.4vw, 42px); }

    .estate-change .com-section__header { margin-bottom: 34px; }

    .estate-change__copy { padding: 25px 22px; }

    .estate-change__tags { margin-top: 30px; }

    .estate-change__diagram { padding: 22px; }

    .estate-change__conclusion {
        grid-template-columns: 48px minmax(0, 1fr);
        gap:                   16px;
        padding:               23px 22px;
    }

    .estate-change__check {
        width:  44px;
        height: 44px;
    }

    .estate-change__conclusion-text { font-size: 16px; }

    .com-page .estate-change__link {
        min-height:  54px;
        padding:     15px 22px;
        white-space: normal;
        text-align:  center;
    }

    .com-cards,
    .commercial-projects .com-cards { grid-template-columns: minmax(0, 1fr); }

    .estate-project__body { padding: 24px 22px 25px; }

    .estate-project__body > .com-copy:last-of-type { margin-bottom: 22px; }

    .com-page .project-card__button {
        width:     100%;
        min-width: 0;
    }

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

    .critical-node__content {
        grid-template-columns: minmax(0, 1fr);
        gap:                   24px;
        margin:                0 10px 10px;
        padding:               24px 16px;
    }

    .critical-node__copy { max-width: none; }

    .critical-node__copy .rich-text ul { grid-template-columns: minmax(0, 1fr); }

    .critical-node__visual { width: 100%; }

    .commercial-feature--sticky .commercial-feature-layout {
        grid-template-columns: minmax(0, 1fr);
        gap:                   34px;
    }

    .commercial-feature--sticky .commercial-feature-heading { position: static; }

    .commercial-services__grid {
        grid-template-columns: minmax(0, 1fr);
        gap:                   16px;
    }

    .commercial-service-card {
        gap:     18px;
        padding: 26px;
    }

    .estate-split { grid-template-columns: minmax(0, 1fr); }

    .com-page .commercial-final-cta { padding: 74px 0; }

    .commercial-final-cta__banner {
        gap:           28px;
        border-radius: 22px;
    }

    .commercial-final-cta__copy { font-size: 16px; }

    .com-page .commercial-final-cta__button {
        width:     100%;
        min-width: 0;
    }

    .com-page .com-section.commercial-faq { padding-bottom: 165px; }

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

    .commercial-faq .faq-item__toggle {
        gap:     12px;
        padding: 16px;
    }

    .commercial-faq .faq-item__answer { padding: 0 16px 20px; }

    .commercial-faq .faq-item__answer p { font-size: 15px; }
}

@media (max-width: 760px) {
    .commercial-systems__heading { margin-bottom: 38px; }

    /* Спільний блок «Системи» взято зі сторінки житлових будівель, де
       шаблон занижує сходинку до 43px; у комерційному вона лишається 48px. */
    .commercial-systems .systems-levels__step { min-height: 48px; }
}

@media (max-width: 600px) {
    .commercial-feature-list { padding-left: 20px; }

    .commercial-feature-list::before { left: 5px; }

    .commercial-feature-item {
        grid-template-columns: 28px minmax(0, 1fr);
        min-height:            0;
        padding:               19px 16px;
    }

    .commercial-feature-item::before { left: -15px; }

    .commercial-feature-item__text { font-size: 15px; }

    .commercial-feature-tags {
        display:               grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .commercial-feature-tags li {
        display:     flex;
        align-items: center;
        min-height:  40px;
        padding:     7px 9px;
        font-size:   12px;
    }

    .com-page .commercial-feature-cta {
        width:      100%;
        margin-top: 24px;
        text-align: center;
    }
}

/* Проміжний розмір H1 — у шаблоні окремим діапазоном. */
/* Ще одна розбіжність двох шаблонів: у комерційному на вузьких екранах
   шапка групи систем стає колонкою. */
@media (max-width: 430px) {
    .commercial-systems .systems-group__head {
        flex-direction: column;
        align-items:    flex-start;
        gap:            12px;
    }

    .commercial-systems .systems-group__title { font-size: 19px; }
}

@media (min-width: 431px) and (max-width: 600px) {
    .com-title { font-size: clamp(32px, 9.5vw, 40px); }
}

@media (max-width: 430px) {
    .com-page .com-section { padding: 62px 0; }

    .com-title { font-size: clamp(32px, 9.6vw, 40px); }

    .com-heading { font-size: clamp(29px, 8vw, 35px); }

    .estate-change__systems,
    .estate-change__tags { grid-template-columns: minmax(0, 1fr); }

    .estate-change__tags li:last-child { grid-column: auto; }

    .estate-change__conclusion {
        display: block;
        padding: 22px;
    }

    .estate-change__check { margin-bottom: 14px; }

    .com-page .estate-change__link { width: 100%; }

    .com-card__title { font-size: 21px; }

    .commercial-faq .faq-item__toggle {
        gap:     12px;
        padding: 16px;
    }

    .commercial-faq .faq-item__answer { padding: 0 16px 20px; }
}

@media (max-width: 390px) {
    .commercial-feature-tags { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .com-link,
    .estate-project,
    .estate-project .estate-photo,
    .project-card__button,
    .project-card__button .icon,
    .commercial-service-card,
    .critical-node,
    .critical-node__panel,
    .critical-node__arrow,
    .critical-node__arrow-svg,
    .estate-change__systems li { transition: none; }
}

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

/* Keep the complete hero image visible at every viewport width. */
.com-hero .estate-hero__visual .estate-photo {
    object-fit: contain;
    object-position: right center;
}
@media (max-width: 768px) {
    .com-hero .estate-hero__visual .estate-photo {
        object-position: center center;
    }
}


/* Blend the hero image into the section background without a hard seam. */
.com-hero .estate-hero__visual {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 10%, rgba(0,0,0,.7) 24%, #000 38%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.9) 4%, #000 9%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 10%, rgba(0,0,0,.7) 24%, #000 38%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.9) 4%, #000 9%, #000 94%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}
.com-hero .estate-hero__visual .estate-photo {
    -webkit-mask-image: none;
    mask-image: none;
}
@media (max-width: 768px) {
    .com-hero .estate-hero__visual {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* Align the hero image with the top edge of the section. */
.com-hero .estate-hero__visual {
    top: -110px;
}

/* Start the desktop fade at the actual image edge created by object-fit: contain. */
.com-hero .estate-hero__visual {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 23%, rgba(0,0,0,.1) 28%, rgba(0,0,0,.55) 38%, #000 50%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.9) 4%, #000 9%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, transparent 23%, rgba(0,0,0,.1) 28%, rgba(0,0,0,.55) 38%, #000 50%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.9) 4%, #000 9%, #000 94%, transparent 100%);
}
@media (max-width: 768px) {
    .com-hero .estate-hero__visual {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* Match the commercial hero title gradient to the approved local reference. */
.com-hero .com-title .is-accent {
    display: inline-block;
    padding: 0 0 6px;
    margin: 0 0 -6px;
    background: linear-gradient(90deg, #0098f0 0%, #edf2ff 52%, #f2c893 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: #edf2ff;
    font-weight: 600;
    letter-spacing: -1px;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

/* Match every section divider to the approved commercial-page reference. */
.com-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%
    );
}
.com-page > .com-hero,
.com-page > .com-section {
    border-bottom: .5px solid transparent;
    border-image-source: var(--gradient-line);
    border-image-slice: 1;
}

/* Match the FAQ heading accent to the commercial-page reference. */
.commercial-faq .faq__title .is-accent {
    display: inline-block;
    padding: 0 0 6px;
    margin: 0 0 -6px;
    background: linear-gradient(90deg, #0098f0 0%, #edf2ff 52%, #f2c893 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: #edf2ff;
    font-weight: 600;
    letter-spacing: -1px;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}


/* Remove the hard edge created by object-fit: contain: size the image box to the bitmap and fade the bitmap itself. */
@media (min-width: 769px) {
    .com-hero .estate-hero__visual {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .com-hero .estate-hero__visual .estate-photo {
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: auto;
        max-width: none;
        height: 100%;
        object-fit: contain;
        object-position: right center;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.04) 8%, rgba(0,0,0,.18) 18%, rgba(0,0,0,.55) 30%, #000 44%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.9) 4%, #000 9%, #000 94%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.04) 8%, rgba(0,0,0,.18) 18%, rgba(0,0,0,.55) 30%, #000 44%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.9) 4%, #000 9%, #000 94%, transparent 100%);
        -webkit-mask-composite: source-in;
        mask-composite: intersect;
    }
}


/* Keep the mobile hero photo below the CTA instead of overlapping it. */
@media (max-width: 768px) {
    .com-hero .estate-hero__visual {
        inset: auto;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        margin-top: 24px;
    }
}


/* Mobile hero: use the project image as a background behind the copy. */
@media (max-width: 768px) {
    .com-hero .estate-hero {
        position: relative;
        isolation: isolate;
    }

    .com-hero .estate-hero__copy {
        position: relative;
        z-index: 2;
    }

    .com-hero .estate-hero__visual {
        position: absolute;
        inset: 0 -16px;
        width: auto;
        height: 100%;
        aspect-ratio: auto;
        margin: 0;
        border-radius: 0;
        z-index: 0;
        overflow: hidden;
        pointer-events: none;
    }

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

    .com-hero .estate-hero__visual::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(8,17,39,.82) 0%, rgba(8,17,39,.62) 52%, rgba(8,17,39,.28) 100%),
                    linear-gradient(180deg, rgba(8,17,39,.52) 0%, rgba(8,17,39,.18) 46%, rgba(8,17,39,.72) 100%);
        pointer-events: none;
    }
}


/* Mobile hero: extend the photo beneath breadcrumbs and the complete first screen. */
@media (max-width: 768px) {
    .com-hero .estate-hero {
        position: static;
        isolation: auto;
    }

    .com-hero .estate-hero__visual {
        inset: -110px -16px -70px;
        width: auto;
        height: auto;
    }

    .com-hero > .breadcrumbs {
        position: relative;
        z-index: 3;
    }

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

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

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


/* Mobile hero: keep breadcrumbs on their own quiet row below the header. */
@media (max-width: 768px) {
    .com-hero > .container {
        padding-top: 38px;
    }

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


/* Mobile hero: remove excess space below the header. */
@media (max-width: 768px) {
    .com-page .com-hero {
        padding-top: 18px;
    }
}


/* Mobile hero: compact spacing directly below the header. */
@media (max-width: 768px) {
    .com-page .com-hero {
        padding-top: 0 !important;
    }

    .com-page .com-hero > .breadcrumbs {
        top: 12px;
    }

    .com-page .com-hero > .container {
        padding-top: 28px;
    }
}


/* Mobile hero: reduce the commercial eyebrow to half size. */
@media (max-width: 768px) {
    .com-page .com-hero .section-eyebrow {
        font-size: 6.5px;
        line-height: 9px;
        letter-spacing: .91px;
    }

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