/*
 * Координація систем — секції.
 * Хіро: макет 532:6748 (полотно 1922×797).
 */

/* ── Хіро ───────────────────────────────────────────────────────────────── */
.coord-hero {
    position:   relative;
    overflow:   hidden;
    min-height: clamp(560px, 41.5vw, 797px);
    padding:    40px 0 64px;
    background: linear-gradient(180deg, #00000c 0%, #031d47 100%);
}

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

.coord-hero__photo {
    position:                 absolute;
    inset:                    0;
    width:                    100%;
    height:                   100%;
    object-fit:                cover;
    /* Фігма-градієнт рахувався під пласке полотно 1922×797 — на секції з
       довшим текстом (вища/вужча пропорція) object-fit:cover кадрує фото
       інакше, і будівля потрапляє в майже прозору зону. Пом'якшено, щоб
       будівля лишалась видимою за будь-якої висоти секції. */
    -webkit-mask-image:       linear-gradient(270deg,
                                 rgba(255, 255, 255, 1) 0%,
                                 rgba(255, 255, 255, .6) 30%,
                                 rgba(255, 255, 255, .12) 48%,
                                 rgba(255, 255, 255, 0) 65%);
    mask-image:                linear-gradient(270deg,
                                 rgba(255, 255, 255, 1) 0%,
                                 rgba(255, 255, 255, .6) 30%,
                                 rgba(255, 255, 255, .12) 48%,
                                 rgba(255, 255, 255, 0) 65%);
}

.coord-hero__glow {
    position:                  absolute;
    display:                   block;
    background-repeat:         no-repeat;
    background-size:           100% 100%;
    animation-duration:        16s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.coord-hero__glow--1 {
    top:              calc(73.3375% - 710px);
    left:             calc(54.1313% - 710px);
    width:            1420px;
    height:           1420px;
    background-image: url('../../img/coord-hero-glow-1.svg');
    transform:        rotate(-22.65deg);
    animation-name:   coord-glow-1-move, coord-glow-1-scale, coord-glow-1-fade;
}

.coord-hero__glow--2 {
    top:              calc(96.7853% - 605.53px);
    left:             calc(81.5170% - 605.53px);
    width:            1211.06px;
    height:           1211.06px;
    background-image: url('../../img/coord-hero-glow-2.svg');
    transform:        rotate(-22.65deg);
    animation-name:   coord-glow-2-move, coord-glow-2-scale, coord-glow-2-fade;
}

@keyframes coord-glow-1-move {
    0%    { animation-timing-function: ease-in-out; translate: -118.477px  45.092px; }
    12.5% { animation-timing-function: ease-in-out; translate: -129.832px -26.114px; }
    25%   { animation-timing-function: ease-in-out; translate:  -65.133px -82.022px; }
    37.5% { animation-timing-function: ease-in-out; translate:   37.72px  -89.883px; }
    50%   { animation-timing-function: ease-in-out; translate:  118.477px -45.092px; }
    62.5% { animation-timing-function: ease-in-out; translate:  129.832px  26.114px; }
    75%   { animation-timing-function: ease-in-out; translate:   65.133px  82.022px; }
    87.5% { animation-timing-function: ease-in-out; translate:  -37.72px   89.883px; }
    100%  { translate: -118.477px 45.092px; }
}

@keyframes coord-glow-1-scale {
    0%    { animation-timing-function: ease-in-out; scale: 1.103; }
    12.5% { animation-timing-function: ease-in-out; scale: 1.029; }
    25%   { animation-timing-function: ease-in-out; scale: 0.938; }
    37.5% { animation-timing-function: ease-in-out; scale: 0.883; }
    50%   { animation-timing-function: ease-in-out; scale: 0.897; }
    62.5% { animation-timing-function: ease-in-out; scale: 0.971; }
    75%   { animation-timing-function: ease-in-out; scale: 1.062; }
    87.5% { animation-timing-function: ease-in-out; scale: 1.117; }
    100%  { scale: 1.103; }
}

@keyframes coord-glow-1-fade {
    0%    { animation-timing-function: ease-in-out; opacity: .781; }
    12.5% { animation-timing-function: ease-in-out; opacity: .76; }
    25%   { animation-timing-function: ease-in-out; opacity: .88; }
    37.5% { opacity: 1; }
    75%   { animation-timing-function: ease-in-out; opacity: 1; }
    87.5% { animation-timing-function: ease-in-out; opacity: .93; }
    100%  { opacity: .781; }
}

@keyframes coord-glow-2-move {
    0%    { animation-timing-function: ease-in-out; translate:   92.201px -78.016px; }
    12.5% { animation-timing-function: ease-in-out; translate:   23.821px -142.093px; }
    25%   { animation-timing-function: ease-in-out; translate:  -58.512px -122.934px; }
    37.5% { animation-timing-function: ease-in-out; translate: -106.57px  -31.762px; }
    50%   { animation-timing-function: ease-in-out; translate:  -92.201px  78.016px; }
    62.5% { animation-timing-function: ease-in-out; translate:  -23.821px 142.093px; }
    75%   { animation-timing-function: ease-in-out; translate:   58.512px 122.934px; }
    87.5% { animation-timing-function: ease-in-out; translate:  106.57px   31.762px; }
    100%  { translate: 92.201px -78.016px; }
}

@keyframes coord-glow-2-scale {
    0%    { animation-timing-function: ease-in-out; scale: 0.995; }
    12.5% { animation-timing-function: ease-in-out; scale: 0.912; }
    25%   { animation-timing-function: ease-in-out; scale: 0.88; }
    37.5% { animation-timing-function: ease-in-out; scale: 0.919; }
    50%   { animation-timing-function: ease-in-out; scale: 1.005; }
    62.5% { animation-timing-function: ease-in-out; scale: 1.088; }
    75%   { animation-timing-function: ease-in-out; scale: 1.12; }
    87.5% { animation-timing-function: ease-in-out; scale: 1.081; }
    100%  { scale: 0.995; }
}

@keyframes coord-glow-2-fade {
    0%    { animation-timing-function: ease-in-out; opacity: .789; }
    12.5% { animation-timing-function: ease-in-out; opacity: .945; }
    25%   { opacity: 1; }
    62.5% { animation-timing-function: ease-in-out; opacity: 1; }
    75%   { animation-timing-function: ease-in-out; opacity: .866; }
    87.5% { animation-timing-function: ease-in-out; opacity: .756; }
    100%  { opacity: .789; }
}

@media (prefers-reduced-motion: reduce) {
    .coord-hero__glow { animation: none; }
}

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

.coord-hero__content {
    max-width:      691px;
    /* Відступ від крихт тепер тримає смуга під них (css/main.css). */
    margin-top:     0;
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
        /* Спільний ритм угорі сторінки: надзаголовок → 20 → H1 → 26 → лід. */
    gap:            20px;
}

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

.coord-hero__title .is-accent {
    font-weight:              600;
    /* Прозорий фарб — крізь нього видно градієнт заголовка. */
    color:                    transparent;
    -webkit-text-fill-color: transparent;
}

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

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

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

.coord-hero__list-title {
    margin:                   0;
    font-size:                16px;
    font-weight:              600;
    letter-spacing:           1.6px;
    text-transform:           uppercase;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                    transparent;
    -webkit-text-fill-color: transparent;
}

.coord-hero__list {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    list-style:     none;
}

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

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

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

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

/* Друга (контурна) кнопка. Той самий вигляд у Хіро та в CTA секції
   «Як працює координація систем» — макети 532:6748 і 586:9059. */
.coord-hero__btn--outline,
.coord-process__cta-btn--outline {
    display:                 inline-flex;
    align-items:             center;
    justify-content:         center;
    gap:                     10px;
    padding:                 14px 26px;
    border:                  1px solid rgba(119, 198, 255, .5);
    border-radius:           12px;
    background:              rgba(5, 8, 20, .3);
    box-shadow:               0 7px 6.5px rgba(0, 0, 0, .1);
    color:                    #77c6ff;
    font-size:                16px;
    font-weight:              600;
    letter-spacing:           .32px;
    text-decoration:          none;
    white-space:              nowrap;
}

.coord-hero__btn--outline:hover,
.coord-hero__btn--outline:active,
.coord-hero__btn--outline:focus-visible,
.coord-process__cta-btn--outline:hover,
.coord-process__cta-btn--outline:active,
.coord-process__cta-btn--outline:focus-visible { border-color: #77c6ff; }

.coord-hero__btn--outline .icon { flex: none; }

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

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

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

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

@media (max-width: 768px) {
    .coord-hero          { padding: 24px 0 40px; }
    .coord-hero__actions { flex-direction: column; align-items: stretch; }
    .coord-hero__btn,
    .coord-hero__btn--outline { width: 100%; }
    .coord-hero__badges  { margin-top: 24px; padding: 0 16px; }
}

/* ── Наш підхід ─────────────────────────────────────────────────────────── */
/* Макет 537:6871 (полотно 1922×990, іде одразу під Хіро). */
.coord-approach {
    position:   relative;
    overflow:   hidden;
    padding:    120px 0;
    background: #031d47;
}

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

.coord-approach__buildings {
    position:          absolute;
    top:               0;
    height:            100%;
    background-image:  url('../../img/coord-approach-buildings.webp');
    background-size:   cover;
    background-position: center;
}

.coord-approach__buildings--left {
    left:             0;
    width:            48.34%;
    /* Фігма: instance цього боку має transform scaleY(-100%) + rotate(180deg),
       що в сумі дає чисте горизонтальне дзеркало — не складніше. */
    transform:        scaleX(-1);
    -webkit-mask-image: linear-gradient(28deg, rgba(255, 255, 255, 0) 16.7%, rgba(255, 255, 255, .2) 100%);
    mask-image:          linear-gradient(28deg, rgba(255, 255, 255, 0) 16.7%, rgba(255, 255, 255, .2) 100%);
}

.coord-approach__buildings--right {
    right:            0;
    width:            51.51%;
    -webkit-mask-image: linear-gradient(28deg, rgba(255, 255, 255, 0) 18.3%, rgba(255, 255, 255, .2) 100%);
    mask-image:          linear-gradient(28deg, rgba(255, 255, 255, 0) 18.3%, rgba(255, 255, 255, .2) 100%);
}

.coord-approach__glow {
    position:                  absolute;
    display:                   block;
    width:                     1806.85px;
    height:                    1292.32px;
    background-image:         url('../../img/coord-approach-glow.svg');
    background-repeat:         no-repeat;
    background-size:           100% 100%;
    animation-duration:        16s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-name:            coord-approach-glow-move, coord-approach-glow-scale, coord-approach-glow-fade;
}

.coord-approach__glow--1 { left: -34.7%;  top: -28.85%; }
.coord-approach__glow--2 { left:  8.54%;  top: -49.15%; }

@keyframes coord-approach-glow-move {
    0%    { animation-timing-function: ease-in-out; translate:  130.414px  79.469px; }
    12.5% { animation-timing-function: ease-in-out; translate:   25.217px 133.535px; }
    25%   { animation-timing-function: ease-in-out; translate:  -94.751px 109.379px; }
    37.5% { animation-timing-function: ease-in-out; translate: -159.215px  21.15px; }
    50%   { animation-timing-function: ease-in-out; translate: -130.414px -79.469px; }
    62.5% { animation-timing-function: ease-in-out; translate:  -25.217px -133.535px; }
    75%   { animation-timing-function: ease-in-out; translate:   94.751px -109.379px; }
    87.5% { animation-timing-function: ease-in-out; translate:  159.215px -21.15px; }
    100%  { translate: 130.414px 79.469px; }
}

@keyframes coord-approach-glow-scale {
    0%    { animation-timing-function: ease-in-out; scale: 1.013; }
    12.5% { animation-timing-function: ease-in-out; scale: 1.093; }
    25%   { animation-timing-function: ease-in-out; scale: 1.119; }
    37.5% { animation-timing-function: ease-in-out; scale: 1.076; }
    50%   { animation-timing-function: ease-in-out; scale: 0.987; }
    62.5% { animation-timing-function: ease-in-out; scale: 0.907; }
    75%   { animation-timing-function: ease-in-out; scale: 0.881; }
    87.5% { animation-timing-function: ease-in-out; scale: 0.924; }
    100%  { scale: 1.013; }
}

@keyframes coord-approach-glow-fade {
    0%    { opacity: 1; }
    12.5% { animation-timing-function: ease-in-out; opacity: 1; }
    25%   { animation-timing-function: ease-in-out; opacity: .853; }
    37.5% { animation-timing-function: ease-in-out; opacity: .753; }
    50%   { animation-timing-function: ease-in-out; opacity: .798; }
    62.5% { animation-timing-function: ease-in-out; opacity: .961; }
    75%   { opacity: 1; }
    100%  { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .coord-approach__glow { animation: none; }
}

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

.coord-approach__title {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            22px;
    width:          100%;
    max-width:      820px;
    text-align:     center;
}

.coord-approach__title .section-eyebrow { justify-content: center; }

.coord-approach__heading {
    margin:         0;
    font-size:      clamp(28px, 1rem + 2vw, 48px);
    font-weight:    300;
    line-height:    1.2;
    letter-spacing: -1px;
    color:          var(--color-text-light);
}

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

.coord-approach__lead {
    margin:      0;
    font-size:   18px;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: -.1px;
    color:       #b7c3de;
}

.coord-approach__cards-block {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            40px;
    width:          100%;
    max-width:      1210px;
}

.coord-approach__cards-title {
    margin:                   0;
    width:                    100%;
    font-size:                32px;
    font-weight:              600;
    line-height:              1.2;
    letter-spacing:           -1px;
    text-align:               center;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                    transparent;
    -webkit-text-fill-color: transparent;
}

.coord-approach__cards {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   24px;
    width:                 100%;
}

.coord-approach-card {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            16px;
    padding:        30px;
    border:         1px solid rgba(5, 165, 255, .3);
    border-radius:  24px;
    background-image: linear-gradient(176.15deg, #0c1b56 2.48%, #031b45 97.22%);
    box-shadow:      0 20px 60px -20px rgba(6, 9, 26, .75);
    text-align:      center;
    transition:      border-color var(--transition), box-shadow var(--transition);
}

/* Той самий hover, що в .service-card на Головній: рамка й тінь стають
   виразнішими. */
.coord-approach-card:hover {
    border-color: #008eee;
    box-shadow:   0 22px 74px -26px rgba(45, 140, 255, .95);
}

.coord-approach-card__icon {
    display:            block;
    flex:               none;
    width:              225px;
    height:             225px;
    -webkit-mask-image: radial-gradient(circle closest-side, #fff 34.08%, transparent 100%);
    mask-image:          radial-gradient(circle closest-side, #fff 34.08%, transparent 100%);
}

.coord-approach-card__img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.coord-approach-card__text {
    margin:      0;
    font-size:   16px;
    font-weight: 600;
    line-height: 1.4;
    color:       var(--color-text-light);
}

@media (max-width: 1024px) {
    .coord-approach          { padding: 80px 0; }
    .coord-approach > .container { gap: 40px; }
    .coord-approach__heading { font-size: clamp(26px, 4vw, 36px); }
    .coord-approach__cards-title { font-size: 26px; }
    .coord-approach__cards   { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .coord-approach          { padding: 48px 0; }
    .coord-approach > .container { gap: 32px; }
    .coord-approach__lead    { font-size: 16px; }
    .coord-approach__cards   { grid-template-columns: 1fr; }
    .coord-approach-card__icon { width: 180px; height: 180px; }
}

/* ── Визначення ─────────────────────────────────────────────────────────── */
/* Макет 537:7001 (полотно 1922×1196, іде одразу під «Наш підхід»). */
.coord-definition {
    position:   relative;
    overflow:   hidden;
    padding:    160px 0 120px;
    background: #031d47;
}

.coord-definition__decor {
    position:       absolute;
    top:            0;
    left:           0;
    width:          100%;
    z-index:        0;
    overflow:       hidden;
    pointer-events: none;
}

.coord-definition__photo {
    display:            block;
    width:               100%;
    aspect-ratio:        1920 / 475;
    object-fit:          cover;
    -webkit-mask-image: radial-gradient(120% 130% at 50% 40%,
                           rgba(255, 255, 255, .2) 0%,
                           rgba(255, 255, 255, .11) 35%,
                           rgba(255, 255, 255, 0) 80%);
    mask-image:          radial-gradient(120% 130% at 50% 40%,
                           rgba(255, 255, 255, .2) 0%,
                           rgba(255, 255, 255, .11) 35%,
                           rgba(255, 255, 255, 0) 80%);
}

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

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

.coord-definition__heading {
    margin:         0;
    font-size:      clamp(28px, 1rem + 2vw, 48px);
    font-weight:    300;
    line-height:    1.2;
    letter-spacing: -1px;
    color:          var(--color-text-light);
}

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

.coord-definition__text {
    max-width:      820px;
    font-size:      18px;
    font-weight:    300;
    line-height:    1.6;
    letter-spacing: -.1px;
    color:          #b7c3de;
}

.coord-definition__text p:first-child { margin: 0 0 16px; }
.coord-definition__text p:last-child  { margin: 0; display: inline; }
.coord-definition__text strong        { font-weight: 500; }

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

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

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

/* Той самий hover, що в .experience-card на Головній: рамка й тінь картки
   стають виразнішими, контейнер іконки перефарбовується в жовтогарячий
   (той самий відтінок) і трохи нахиляється. */
.coord-definition-card:hover {
    border-color: #5c8cd0;
    box-shadow:   0 22px 74px -26px rgba(45, 140, 255, .95);
}

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

/* Theme\icon() віддає SVG з жорсткими атрибутами width/height, а контентна
   область бейджа — 17.5px (45.5 − padding 26 − border 2). Без цього правила
   SVG стискається флексом лише по ширині й лишається 26px заввишки: іконка
   виходить сплюснутою й вилазить за padding. Аналог на Головній
   (.experience-card__icon img, home.css) вписує вміст тим самим способом —
   там це <img> з object-fit, тут viewBox робить те саме сам. */
.coord-definition-card__icon .icon {
    display: block;
    width:   100%;
    height:  100%;
}

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

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

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

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

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

@media (max-width: 1024px) {
    .coord-definition            { padding: 100px 0 80px; }
    .coord-definition > .container { gap: 32px; }
    .coord-definition__heading   { font-size: clamp(26px, 4vw, 36px); }
    .coord-definition__lead      { font-size: 20px; }
    .coord-definition__cards     { grid-template-columns: repeat(2, 1fr); }
    .coord-definition__result    { flex-direction: column; align-items: flex-start; text-align: left; }
}

@media (max-width: 768px) {
    .coord-definition          { padding: 64px 0 48px; }
    .coord-definition__text    { font-size: 16px; }
    .coord-definition__lead    { font-size: 18px; }
    .coord-definition__cards   { grid-template-columns: 1fr; }
    .coord-definition__result  { padding: 20px; gap: 16px; }
    .coord-definition__result-img { width: 64px; height: 64px; }
}

/* ── Де це найважливіше ─────────────────────────────────────────────────── */
/* Макет 552:7240 (полотно 1922×1316, іде одразу під «Визначення»). */
.coord-matters {
    /* Вертикальний варіант --gradient-line: у токені кут 90deg зашитий,
       а роздільники між картками галузей і біля номерів — вертикальні. */
    --gradient-line-v: linear-gradient(180deg,
                           rgba(0, 142, 238, 0)    0%,
                           rgba(0, 142, 238, .6)   20.67%,
                           rgba(172, 213, 255, .8) 50%,
                           rgba(255, 159, 194, .6) 80.77%,
                           rgba(255, 159, 194, 0)  100%);

    position:   relative;
    overflow:   hidden;
    padding:    120px 0;
    background: #031d47;
}

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

/* Три статичні плями (motion-даних у макеті немає, на відміну від «Наш
   підхід»). Розмір фіксований у px, позиція у % — так пляма не
   деформується, коли секція росте від довшого українського тексту. */
.coord-matters__glow {
    position:          absolute;
    display:           block;
    background-repeat: no-repeat;
    background-size:   100% 100%;
}

.coord-matters__glow--1 {
    left:             -28.2%;
    top:              -6.2%;
    width:            1806.85px;
    height:           1292.32px;
    background-image: url('../../img/coord-matters-glow-1.svg');
}

.coord-matters__glow--2 {
    left:             2.94%;
    top:              -44.45%;
    width:            1831.84px;
    height:           1250.83px;
    background-image: url('../../img/coord-matters-glow-2.svg');
}

.coord-matters__glow--3 {
    left:             3.63%;
    top:              -24.69%;
    width:            1784.5px;
    height:           1339.34px;
    background-image: url('../../img/coord-matters-glow-3.svg');
}

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

/* ── Заголовок ──────────────────────────────────────────────────────────── */
.coord-matters__title {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            22px;
    width:          100%;
    text-align:     center;
}

.coord-matters__heading {
    margin:         0;
    font-size:      clamp(28px, 1rem + 2vw, 48px);
    font-weight:    300;
    line-height:    1.2;
    letter-spacing: -1px;
    color:          var(--color-text-light);
}

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

/* ── Дві колонки: список + фото ─────────────────────────────────────────── */
/* flex-basis 0 з grow-пропорціями 609:633 з макета — колонки тримають
   задане співвідношення на будь-якій ширині контейнера. */
.coord-matters__cols {
    display:     flex;
    align-items: stretch;
    gap:         80px;
    width:       100%;
}

.coord-matters__list-block {
    display:        flex;
    flex-direction: column;
    gap:            24px;
    flex:           609 1 0;
    min-width:      0;
}

.coord-matters__lead {
    margin:         0;
    font-size:      18px;
    font-weight:    600;
    line-height:    1.6;
    letter-spacing: -.1px;
    color:          #b7c3de;
}

.coord-matters__list {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    margin:         0;
    padding:        0;
    list-style:     none;
    counter-reset:  none;
}

.coord-matters-item {
    display:       flex;
    align-items:   center;
    gap:           12px;
    min-height:    70px;
    padding:       24px;
    border:        1px solid #20345e;
    border-radius: 16px;
    background:    #041a43;
    box-shadow:    0 6px 5px rgba(0, 0, 0, .35);
}

.coord-matters-item__num {
    flex:                     none;
    font-size:                16px;
    font-weight:              600;
    line-height:              1.6;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                    transparent;
    -webkit-text-fill-color: transparent;
}

/* align-self:stretch, а не фіксовані 20px з макета: український текст у
   кількох пунктах переноситься на два рядки, і коротка риска поруч з
   двома рядками виглядала б обрізаною. */
.coord-matters-item__sep {
    flex:       none;
    align-self: stretch;
    width:      1px;
    background: var(--gradient-line-v);
}

.coord-matters-item__text {
    font-size:   16px;
    line-height: 1.6;
    color:       var(--color-text-light);
}

.coord-matters__figure {
    flex:          633 1 0;
    min-width:     0;
    margin:        0;
    overflow:      hidden;
    border:        1px solid #20345e;
    border-radius: 24px;
    box-shadow:    0 0 44px 0 #122a59;
}

.coord-matters__photo {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

/* ── Галузі ─────────────────────────────────────────────────────────────── */
.coord-matters__industries-block {
    display:        flex;
    flex-direction: column;
    gap:            20px;
    width:          100%;
}

/* inline-block, а не блок на всю ширину: background-clip:text розтягує
   градієнт по БОКСУ елемента. Блоковий <p> займав усі 1300px контейнера,
   тож на текст (~370px) потрапляла лише перша чверть градієнта — підпис
   виходив майже суцільно синім, без теплого кінця. У макеті текстовий
   вузол має ширину саме тексту, тому градієнт видно цілком.
   Кінцевий колір — точний з макета (#fcc891 на 100%), а не токен
   --gradient-accent, який завершується #ffbf7a на 91.83%. */
.coord-matters__industries-title {
    display:                  inline-block;
    width:                    fit-content;
    max-width:                100%;
    margin:                   0;
    font-size:                16px;
    font-weight:              600;
    line-height:              22px;
    letter-spacing:           -.07px;
    background-image:        linear-gradient(90deg,
                                 #008eee 0%,
                                 #acd5ff 38.462%,
                                 #fcc891 100%);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                    transparent;
    -webkit-text-fill-color: transparent;
}

/* Колонковий геп 41px = 20 + 1px роздільник + 20 з макета: сам роздільник
   малюється псевдоелементом усередині гепу, тому в сітці його немає. */
/* minmax(0, 1fr), а не 1fr: у 1fr мінімум треку — min-content, і довге
   нерозривне слово «багатофункціональні» (162px) розпирало другу колонку
   на ~19px у смузі 1025–1084px, через що роздільники ставали нерівномірні. */
/* Рядковий геп 33px = 16 + 1px роздільник + 16 з макета (ряд 1 закінчується
   на y=60, риска на y=76, ряд 2 починається на y=93). Раніше стояло 16px —
   ряди стояли на 17px ближче, ніж у дизайні. */
.coord-matters__industries {
    display:               grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap:            41px;
    row-gap:               33px;
    margin:                0;
    padding:               0;
    list-style:            none;
}

.coord-matters-industry {
    position:    relative;
    display:     flex;
    align-items: center;
    gap:         8px;
    min-height:  60px;
}

/* Вертикальна риска в лівому жолобі — крім першої колонки.
   -20px: у макеті риска стоїть за 21px від правого краю попередньої
   картки, тобто за 20px до лівого краю своєї. */
.coord-matters-industry::before {
    content:    '';
    position:   absolute;
    left:       -20px;
    top:        0;
    bottom:     0;
    width:      1px;
    background: var(--gradient-line-v);
}

/* Горизонтальна риска під першим рядом, по одному відрізку на колонку —
   так само, як у макеті (там це чотири окремі лінії, а не суцільна).
   -17px при гепі 33px: 16px до риски, 1px риска, 16px після — рівно як
   у макеті. */
.coord-matters-industry::after {
    content:    '';
    position:   absolute;
    left:       0;
    right:      0;
    bottom:     -17px;
    height:     1px;
    background: var(--gradient-line);
}

.coord-matters__industries > :nth-child(4n + 1)::before { content: none; }
.coord-matters__industries > :nth-child(n + 5)::after   { content: none; }

.coord-matters-industry__icon {
    display: block;
    flex:    none;
    width:   60px;
    height:  60px;
}

.coord-matters-industry__img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: contain;
}

/* min-width:0 + break-word — запобіжник: колонки тепер фіксовано рівні
   (minmax(0,1fr)), тож найдовше слово має переноситись, а не вилазити
   за картку. Спрацьовує лише коли місця справді бракує. */
.coord-matters-industry__text {
    min-width:      0;
    font-size:      16px;
    font-weight:    600;
    line-height:    1.4;
    letter-spacing: -.1px;
    color:          #b7c3de;
    overflow-wrap:  break-word;
}

@media (max-width: 1024px) {
    .coord-matters                { padding: 80px 0; }
    .coord-matters > .container    { gap: 40px; }
    .coord-matters__heading        { font-size: clamp(26px, 4vw, 36px); letter-spacing: -1px; }
    .coord-matters__cols           { gap: 40px; }
    .coord-matters__lead           { font-size: 16px; }

    .coord-matters__industries     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Дві колонки: риска лише перед правою (парні), горизонтальна — під
       усіма, крім останнього ряду. */
    .coord-matters__industries > :nth-child(2n + 1)::before { content: none; }
    .coord-matters__industries > :nth-child(n + 5)::after   { content: ''; }
    .coord-matters__industries > :nth-child(n + 7)::after   { content: none; }
}

@media (max-width: 768px) {
    .coord-matters             { padding: 48px 0; }
    .coord-matters > .container { gap: 32px; }

    /* Порядок у DOM уже правильний (список → фото), тож на мобайлі просто
       розкладаємо в стовпчик — без order, як вимагає README. */
    .coord-matters__cols       { flex-direction: column; gap: 24px; }
    .coord-matters__figure     { flex: none; aspect-ratio: 633 / 669; }

    .coord-matters-item        { padding: 16px; gap: 10px; }

    /* Геп трохи менший за десктопні 33px — на вузькому екрані рядів вісім
       замість двох, і повний відступ роздував би блок. Риска лишається
       по центру гепу. */
    .coord-matters__industries { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }

    /* Одна колонка — вертикальних рисок немає взагалі. Селектор саме
       :nth-child(n), щоб зрівняти специфічність (0,2,1) з правилом
       :nth-child(2n+1) з планшетного блоку: простий
       .coord-matters-industry::before (0,1,1) програвав би йому. */
    .coord-matters__industries > :nth-child(n)::before { content: none; }

    .coord-matters__industries > :nth-child(n + 7)::after { content: ''; }
    .coord-matters-industry:last-child::after { content: none; }
    .coord-matters-industry::after { bottom: -12px; }
}

/* ── Як працює координація систем ───────────────────────────────────────── */
/* Макет 575:7531 (полотно 1922×1070). Етапи: на десктопі — таби (рейка
   360px ліворуч + панель праворуч), на планшеті й мобайлі та сама
   розмітка працює як акордеон. Тому таб і його панель лежать поруч у
   .coord-process__stage, а на десктопі обгортка «зникає» через
   display:contents і обидва елементи стають прямими дітьми грида. */
.coord-process {
    position:   relative;
    overflow:   hidden;
    padding:    120px 0;
    background: #031d47;
}

.coord-process > .container {
    position: relative;
    z-index:  1;
}

/* ── Декор ──────────────────────────────────────────────────────────────── */
.coord-process__decor {
    position:       absolute;
    inset:          0;
    z-index:        0;
    overflow:       hidden;
    pointer-events: none;
}

.coord-process__glow,
.coord-process__bg {
    position:          absolute;
    display:           block;
    background-repeat: no-repeat;
    background-size:   100% 100%;
}

/* У макеті svg лежить у фреймі 1175×933 з від'ємними інсетами — тут це
   вже перераховано у власний розмір плями та зміщення від лівого краю. */
.coord-process__glow {
    left:             -31.53%;
    top:              -252px;
    width:            1806.85px;
    height:           1292.32px;
    background-image: url('../../img/coord-process-glow.svg');
}

/* Каркасні куби по краях. Прив'язані до низу/верху, а не у відсотках:
   українська копія робить секцію вищою за макет, і відсоток розводив би
   малюнки від блоків, біля яких вони мають лежати. */
.coord-process__bg--1 {
    left:             0;
    bottom:           190px;
    width:            576px;
    height:           531px;
    background-image: url('../../img/coord-process-bg-1.svg');
}

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

/* ── Заголовок ──────────────────────────────────────────────────────────── */
.coord-process__title {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            22px;
    text-align:     center;
}

.coord-process__heading {
    margin:         0;
    font-size:      clamp(28px, 1rem + 2vw, 48px);
    font-weight:    300;
    line-height:    1.25;
    letter-spacing: -1px;
    color:          var(--color-text-light);
}

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

/* ── Етапи ──────────────────────────────────────────────────────────────── */
/* 60px = gap 20px секції + padding 40px внутрішнього фрейму «Tabs». */
.coord-process__stages {
    position:       relative;
    display:        flex;
    flex-direction: column;
    gap:            12px;
    margin-top:     60px;
    /* Місце під рейку з крапками ліворуч (pl-28 у макеті). */
    padding-left:   28px;
    /* На мобайлі (акордеон) відкриття/закриття панелі вище клікнутого
       табу різко змінює висоту контенту над viewport. Нативний scroll
       anchoring браузера намагається сам компенсувати зсув і при цьому
       забиває власну корекцію скролу з processStages() (JS підводить
       viewport до клікнутого табу) — вимикаємо anchoring тут, керуємо
       скролом самі. */
    overflow-anchor: none;
}

.coord-process__stage {
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

/* Вертикальна лінія-конектор: від центра першої крапки до центра
   останньої, тобто по півтаба (32px) згори й знизу. */
.coord-process__stages::before {
    content:    '';
    position:   absolute;
    left:       8px;
    top:        32px;
    bottom:     32px;
    width:      1px;
    background: rgba(90, 160, 255, .22);
}

.coord-process__tab {
    position:        relative;
    display:         flex;
    align-items:     center;
    gap:             14px;
    width:           100%;
    min-height:      64px;
    padding:         18px 20px;
    border:          1px solid var(--color-border-blue, #20345e);
    border-radius:   18px;
    /* Два шари, як у макеті: діагональний градієнт поверх рівної
       синьої підкладки. */
    background-image: linear-gradient(176.32deg,
                          rgba(30, 50, 97, .48) 0%, rgba(20, 36, 73, .564) 78.13%),
                      linear-gradient(90deg,
                          rgba(45, 140, 255, .14) 0%, rgba(45, 140, 255, .14) 100%);
    box-shadow:      0 20px 60px -20px rgba(6, 9, 26, .75);
    text-align:      left;
    cursor:          pointer;
    transition:      border-color var(--transition), box-shadow var(--transition);
}

.coord-process__tab.is-active {
    border-color: #05a5ff;
    box-shadow:   0 13px 44px -26px rgba(45, 140, 255, .95);
}

.coord-process__tab:hover:not(.is-active),
.coord-process__tab:active:not(.is-active),
.coord-process__tab:focus-visible:not(.is-active) { border-color: #2d5da8; }

/* Крапка на рейці. Живе на самому табі, тому позиція завжди збігається з
   його центром — незалежно від того, у скільки рядків ліг підпис. */
.coord-process__tab::before {
    content:       '';
    position:      absolute;
    left:          -24px;
    top:           50%;
    width:         9px;
    height:        9px;
    margin-top:    -4.5px;
    border-radius: 50%;
    background:    #0b1628;
    box-shadow:    inset 0 0 0 1.5px rgba(90, 160, 255, .5);
    transition:    background var(--transition), box-shadow var(--transition);
}

.coord-process__tab.is-active::before {
    background: #2d8cff;
    box-shadow: inset 0 0 0 1.5px #5aaeff,
                0 0 14px rgba(45, 140, 255, .9);
}

.coord-process__tab-num {
    flex:           none;
    font-size:      19px;
    font-weight:    400;
    letter-spacing: -.57px;
    color:          #5aaeff;
}

.coord-process__tab-label {
    flex:           1 1 0;
    min-width:      0;
    font-size:      15.4px;
    font-weight:    600;
    line-height:    1.3;
    letter-spacing: -.308px;
    color:          #fff;
}

.coord-process__tab-ind {
    flex:            none;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           28px;
    height:          28px;
    border:          1px solid rgba(90, 160, 255, .32);
    border-radius:   14px;
    color:           #4aa3ff;
    transition:      background var(--transition), border-color var(--transition), color var(--transition);
}

.coord-process__tab.is-active .coord-process__tab-ind {
    background:   rgba(45, 140, 255, .16);
    border-color: rgba(90, 160, 255, .6);
    color:        #5aaeff;
}

/* Обидві іконки в розмітці, видима — за станом. */
.coord-process__tab .icon-close        { display: none; }
.coord-process__tab.is-active .icon-plus  { display: none; }
.coord-process__tab.is-active .icon-close { display: block; }

/* ── Панель етапу ───────────────────────────────────────────────────────── */
.coord-process__panel {
    padding:          30px 32px;
    border:           1px solid rgba(90, 160, 255, .12);
    border-radius:    22px;
    background-image: linear-gradient(169.93deg,
                          rgba(30, 50, 97, .8) 0%, rgba(20, 36, 73, .94) 78.13%),
                      linear-gradient(90deg,
                          rgba(11, 22, 40, .62) 0%, rgba(11, 22, 40, .62) 100%);
    opacity:    1;
    transform:  translateY(0);
    /* Довше й з "рухом" за var(--transition) (0.2s) — та миттєва мітка
       годиться для рамки/тіні на hover, але для заміни цілого блоку тексту
       читається як різкий стрибок. Значення тут (.35s) продубльоване в
       safetyTimer у processStages() — синхронізувати за потреби. */
    transition: opacity .35s ease, transform .35s ease;
}

/* Перемикання етапів (processStages() у js/pages/koordynacziya-system.js):
   стара панель гасне до 0 й трохи «падає», тоді щойно показана нова
   проявляється з тим самим рухом — замість миттєвої заміни через [hidden]. */
.coord-process__panel.is-fading {
    opacity:   0;
    transform: translateY(10px);
}

@media (prefers-reduced-motion: reduce) {
    .coord-process__panel { transition: none; }
}

.coord-process__panel-title {
    margin:         0;
    font-size:      25px;
    font-weight:    600;
    line-height:    1.22;
    letter-spacing: -.65px;
    color:          #fff;
}

.coord-process__panel-num { color: #77c6ff; }

.coord-process__divider {
    display:    block;
    height:     1px;
    margin:     22px 0 26px;
    background: rgba(90, 160, 255, .14);
}

/* Три розкладки панелі з макета: дві рівні колонки (--cols), текст плюс
   ілюстрація фіксованої ширини збоку (--aside) і одна колонка (--single).
   Яку саме взяти — вирішує шаблон за наявністю другої колонки й фото. */
.coord-process__panel-body {
    display: flex;
    gap:     34px;
}

.coord-process__panel-body--cols   { align-items: stretch; }
.coord-process__panel-body--aside  { align-items: center; }

/* Без ілюстрації колонка займала б усю ширину панелі (~110 символів
   у рядку) — обмежуємо до комфортної довжини рядка. */
.coord-process__panel-body--single .coord-process__col { max-width: 680px; }

.coord-process__col {
    flex:           1 1 0;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    gap:            16px;
    font-size:      15.2px;
    line-height:    1.6;
    color:          var(--color-text-light);
}

/* У колонці з ілюстрацією відступи більші — так у макеті. */
.coord-process__panel-body--cols > .coord-process__col + .coord-process__col { gap: 24px; }

.coord-process__col strong { font-weight: 600; color: inherit; }

/* Абзаци, буліти й пункти з галочками віддає Theme\rich_content() —
   базова структура .rich-* лежить у main.css, тут лише gap колонки
   розводить блоки між собою. */
.coord-process__figure {
    flex:          none;
    overflow:      hidden;
    width:         360px;
    height:        280px;
    margin:        0;
    border-radius: 16px;
    background:    #0c1c3e;
}

/* Ілюстрація в кінці колонки забирає весь залишок висоти — саме через це
   обидві колонки закінчуються на одному рівні. */
.coord-process__figure--fill {
    flex:       1 1 auto;
    width:      100%;
    height:     auto;
    min-height: 180px;
    background: #030d25;
}

/* ── Цикл координації (етап 05) ─────────────────────────────────────────── */
.coord-process__cycle {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    margin-top:     30px;
}

/* Тут градієнт навмисно тягнеться на всю ширину блока, а не по літерах:
   у макеті текст відцентрований і бере середину градієнта. */
.coord-process__cycle-title {
    margin:                  0;
    font-size:               18px;
    font-weight:             600;
    line-height:             1.6;
    letter-spacing:          -.1px;
    text-align:              center;
    background-image:        linear-gradient(90deg,
                                 #008eee 0%, #acd5ff 38.46%, #fcc891 100%);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                   transparent;
    -webkit-text-fill-color: transparent;
}

.coord-process__cycle-list {
    display:     flex;
    align-items: flex-start;
    gap:         36px;
    margin:      0;
    padding:     0;
    list-style:  none;
}

.coord-process__cycle-card {
    position:       relative;
    flex:           1 1 0;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            8px;
    text-align:     center;
}

/* Стрілка лежить у гепі між картками окремим елементом розмітки не є —
   це декор послідовності, а не її пункт. */
.coord-process__cycle-card:not(:last-child)::after {
    content:    '';
    position:   absolute;
    top:        41px;
    right:      -30px;
    width:      24px;
    height:     24px;
    background: url('../../img/arrow-flow.svg') no-repeat center / contain;
    transform:  rotate(90deg);
}

.coord-process__cycle-img {
    display:       block;
    overflow:      hidden;
    width:         106px;
    max-width:     100%;
    aspect-ratio:  1;
    border-radius: 10px;
    background:    #010b28;
}

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

.coord-process__cycle-label {
    font-size:      16px;
    font-weight:    600;
    line-height:    1.4;
    letter-spacing: -.1px;
    color:          #b7c3de;
}

/* Радіальна маска з макета (ellipse closest-side, білий до 34%) — краї
   ілюстрації розчиняються у фоні картки, а не обрізаються рамкою. */
.coord-process__photo {
    display:            block;
    width:              100%;
    height:             100%;
    object-fit:         cover;
    -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 34.08%, transparent 100%);
    mask-image:         radial-gradient(ellipse closest-side at 50% 50%, #000 34.08%, transparent 100%);
}

/* ── Десктоп: рейка + одна панель праворуч ──────────────────────────────── */
/* display:contents прибирає обгортку .coord-process__stage з дерева
   боксів, і таб з панеллю стають прямими дітьми грида.
   .coord-process__panel навмисно НЕ грід-елемент (position:absolute) —
   якщо панель посадити в grid-row: 1/-1 поруч із рейкою, CSS Grid
   розтягує "auto"-рядки рейки під висоту найвищої панелі, і рейка з
   табами "дихає" залежно від того, який етап відкрито (row-gap стрибає
   з 12px до ~38px на панелях з довгим текстом/фото — рейка має бути
   непорушною). Винесена з грід-потоку панель не впливає на розмір рядків
   рейки. Натомість контейнер може стати нижчим за таку панель, тому
   processStages() у JS підтримує min-height рівним висоті активної
   панелі, щоб CTA-блок під секцією не наїжджав на неї. */
@media (min-width: 1025px) {
    .coord-process__stages {
        position:              relative;
        display:               grid;
        grid-template-columns: 360px;
        row-gap:                12px;
        /* Без цього grid розподіляє "зайвий" простір від min-height
           (його ставить JS під висоту активної панелі) назад у самі
           рядки рейки — таби тихо роздуваються по висоті, хоч row-gap
           лишається коректним. align-content:start тримає рядки
           впритул одне до одного, а решта висоти лишається знизу. */
        align-content:          start;
    }

    .coord-process__stage { display: contents; }

    .coord-process__tab { grid-column: 1; }

    .coord-process__panel {
        position: absolute;
        top:      0;
        /* left відраховується від padding-edge контейнера, а в нього
           самого є свій padding-left: 28px (місце під рейку з крапками,
           база .coord-process__stages) — тому це не просто 360+28,
           а padding-left контейнера (28) + ширина рейки (360) +
           бажаний проміжок (28) = 416px. */
        left:     416px;
        right:    0;
    }
}

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

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

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

/* background-clip:text фарбує бокс елемента, а не самі літери — без
   width:fit-content градієнт розтягнувся б на всю ширину колонки і в
   тексті лишився б тільки його початок. */
.coord-process__cta-title {
    width:                   fit-content;
    max-width:               100%;
    margin:                  0;
    font-size:               32px;
    font-weight:             600;
    line-height:             52px;
    letter-spacing:          -1.5px;
    background-image:        linear-gradient(90deg,
                                 #008eee 0%, #acd5ff 38.46%, #fcc891 100%);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                   transparent;
    -webkit-text-fill-color: transparent;
}

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

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

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

.coord-process__cta-btn--outline { min-width: 241px; padding: 14px 26px; }

/* ── Адаптив ────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .coord-process__cta-inner { padding: 0; }
}

@media (max-width: 1024px) {
    .coord-process             { padding: 80px 0; }
    .coord-process__stages     { margin-top: 40px; }
    .coord-process__cta        { margin-top: 40px; padding: 32px; }

    /* Каркасні куби масштабом з макета перекрили б половину екрана. */
    .coord-process__bg--1      { width: 380px; height: 350px; bottom: 120px; }
    .coord-process__bg--2      { width: 400px; height: 374px; }

    .coord-process__panel      { padding: 24px; }
    .coord-process__panel-body { flex-direction: column; align-items: stretch; gap: 24px; }

    /* Ілюстрація на всю ширину панелі виросла б до ~600px заввишки —
       обмежуємо й центруємо. */
    .coord-process__figure {
        width:         100%;
        max-width:     460px;
        height:        auto;
        aspect-ratio:  360 / 280;
        margin-inline: auto;
    }

    .coord-process__figure--fill { flex: none; min-height: 0; }

    /* Шість карток у рядок дали б по ~90px — переходимо на сітку, стрілки
       лишаються тільки всередині рядка. */
    .coord-process__cycle-list {
        display:               grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap:            36px;
        row-gap:               24px;
    }

    .coord-process__cycle-card:nth-child(3n)::after { content: none; }

    /* Заголовок + текст поруч із кнопками тут уже не вміщаються: колонка
       тексту стискалась до ~200px, а заголовок ламався на три рядки. */
    .coord-process__cta-inner   { flex-direction: column; align-items: flex-start; gap: 24px; }
    .coord-process__cta-text    { max-width: none; }
    .coord-process__cta-title   { font-size: 28px; line-height: 1.25; letter-spacing: -.8px; }
    .coord-process__cta-actions { flex-wrap: wrap; }
}

@media (max-width: 768px) {
    .coord-process              { padding: 48px 0; }
    .coord-process__heading     { font-size: clamp(26px, 4vw, 36px); letter-spacing: -1px; }
    .coord-process__stages      { margin-top: 32px; padding-left: 22px; }
    .coord-process__stages::before { left: 5px; }
    .coord-process__tab::before { left: -21px; }
    .coord-process__tab         { padding: 16px; gap: 12px; }
    .coord-process__panel       { padding: 20px; }
    .coord-process__panel-title { font-size: 20px; letter-spacing: -.5px; }
    .coord-process__divider     { margin: 16px 0 20px; }

    .coord-process__cta         { padding: 24px; }
    .coord-process__cta-title   { font-size: 26px; }
    .coord-process__cta-actions { flex-direction: column; align-items: stretch; width: 100%; }
    .coord-process__cta-btn     { width: 100%; min-width: 0; }

    .coord-process__bg--1,
    .coord-process__bg--2       { display: none; }

    .coord-process__cycle       { margin-top: 24px; }
    .coord-process__cycle-title { font-size: 16px; }
    .coord-process__cycle-label { font-size: 14px; }
}

@media (max-width: 560px) {
    .coord-process__cycle-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap:            32px;
    }

    /* Селектор із тією ж специфічністю (0,2,1), що й правило для трьох
       колонок вище — інакше воно б перемогло і в двоколонковій сітці
       стрілка зникала б не там, де треба. */
    .coord-process__cycle-card:nth-child(3n)::after  { content: ''; }
    .coord-process__cycle-card:nth-child(2n)::after  { content: none; }
    .coord-process__cycle-card:last-child::after     { content: none; }
    .coord-process__cycle-card:not(:last-child)::after { right: -28px; }
}

/* ── Більше, ніж пошук колізій + Розширені можливості ───────────────────── */
/* Макет 607:11438 (полотно 1922×1417). Два блоки однакової структури,
   дзеркальні один до одного: у першому текст ліворуч і медіа праворуч,
   у другому навпаки. */
.coord-seo {
    position:   relative;
    overflow:   hidden;
    padding:    120px 0;
    background: #031d47;
}

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

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

.coord-seo__glow {
    position:          absolute;
    display:           block;
    background-repeat: no-repeat;
    background-size:   100% 100%;
}

/* Ті самі плями, що в сусідніх секціях — окремих файлів не заводимо. */
.coord-seo__glow--1 {
    left:             -31.53%;
    top:              -252px;
    width:            1806.85px;
    height:           1292.32px;
    background-image: url('../../img/coord-process-glow.svg');
}

/* Друга пляма прив'язана до низу: український текст робить секцію вищою
   за макет, і від верху вона поїхала б угору від свого блока. */
.coord-seo__glow--2 {
    left:             11.76%;
    bottom:           -331px;
    width:            1806.85px;
    height:           1292.32px;
    background-image: url('../../img/coord-process-glow.svg');
}

.coord-seo__glow--3 {
    left:             45.06%;
    top:              -346px;
    width:            1784.5px;
    height:           1339.34px;
    background-image: url('../../img/coord-matters-glow-3.svg');
}

/* ── Блок ───────────────────────────────────────────────────────────────── */
.coord-seo__block {
    display:        flex;
    flex-direction: column;
    gap:            40px;
}

/* Градієнт навмисно тягнеться на всю ширину контейнера, а не по літерах:
   у макеті заголовок відцентрований і бере середину градієнта. */
.coord-seo__heading {
    margin:                  0;
    font-size:               clamp(28px, 1rem + 2vw, 48px);
    font-weight:             600;
    line-height:             1.12;
    letter-spacing:          -1.5px;
    text-align:              center;
    background-image:        linear-gradient(90deg,
                                 #008eee 0%, #acd5ff 38.46%, #fcc891 100%);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                   transparent;
    -webkit-text-fill-color: transparent;
}

.coord-seo__cols {
    display:     flex;
    align-items: flex-start;
    gap:         80px;
}

/* Другий блок: картинка ліворуч і по центру відносно тексту. */
.coord-seo__cols--reverse { align-items: center; }

.coord-seo__col {
    flex:           1 1 0;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    gap:            16px;
    font-size:      16px;
    line-height:    1.6;
    letter-spacing: -.1px;
    color:          var(--color-text-light);
}

.coord-seo__col strong { font-weight: 600; color: inherit; }

/* Колонка з медіа тягнеться на всю висоту сусідньої — саме тому картинка
   під нею забирає залишок і обидві колонки закінчуються рівно. */
.coord-seo__col--media {
    align-self: stretch;
    gap:        24px;
}

/* Пункти списків трохи менші за абзаци — так у макеті. */
.coord-seo .rich-checks {
    font-size:      15.2px;
    letter-spacing: 0;
}

.coord-seo__block--clash .rich-check       { --rich-icon: 24px; }
.coord-seo__block--clash .rich-check .icon { color: #f0342c; }
.coord-seo__block--capab .rich-check .icon { color: #34c759; }

/* ── Медіа ──────────────────────────────────────────────────────────────── */
.coord-seo__figure {
    position:      relative;
    overflow:      hidden;
    margin:        0;
    border:        1px solid var(--color-border-blue);
    border-radius: 24px;
    box-shadow:    0 0 44px 0 #122a59;
}

.coord-seo__figure--fill {
    flex:       1 1 auto;
    width:      100%;
    min-height: 200px;
}

.coord-seo__figure--wide {
    flex:   none;
    width:  648px;
    height: 479px;
}

.coord-seo__photo {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

/* Підпис поверх картинки. У макеті це растр з англійським текстом —
   тут зібраний розміткою, щоб перекладався разом з рештою секції. */
.coord-seo__note {
    position:        absolute;
    top:             19px;
    right:           22px;
    display:         flex;
    align-items:     center;
    gap:             8px;
    width:           234px;
    max-width:       calc(100% - 40px);
    padding:         10px 14px;
    border:          1px solid var(--color-border-blue);
    border-radius:   10px;
    background:      rgba(3, 10, 28, .82);
    backdrop-filter: blur(6px);
    color:           #fff;
    font-size:       11px;
    line-height:     1.45;
}

.coord-seo__note .icon { flex: none; width: 30px; height: 30px; }

/* ── Цитата-картка ──────────────────────────────────────────────────────── */
.coord-seo__card {
    margin:           0;
    padding:          24px;
    border:           1px solid var(--color-border-blue);
    border-radius:    24px;
    background-image: linear-gradient(175.5deg,
                          rgba(30, 50, 97, .8) 0%, rgba(20, 36, 73, .94) 78.13%);
    backdrop-filter:  blur(17px);
    font-size:        18px;
    font-weight:      600;
    line-height:      1.6;
    letter-spacing:   -.1px;
    color:            #77c6ff;
}

/* ── Адаптив ────────────────────────────────────────────────────────────── */
/* Фіксовані 648px картинки другого блока тримаються лише на десктопі —
   далі вона ділить рядок з текстом порівну. */
@media (max-width: 1200px) {
    .coord-seo__cols         { gap: 48px; }
    .coord-seo__figure--wide { width: 50%; height: auto; aspect-ratio: 648 / 479; }
}

@media (max-width: 1024px) {
    .coord-seo              { padding: 80px 0; }
    .coord-seo > .container  { gap: 48px; }
    .coord-seo__block        { gap: 32px; }
}

/* Нижче 860px дві колонки стають надто вузькими — складаємо в один
   стовпчик. Порядок у DOM уже правильний в обох блоках (у першому текст,
   у другому картинка), тож order не потрібен. */
@media (max-width: 860px) {
    .coord-seo__cols       { flex-direction: column; align-items: stretch; gap: 32px; }
    .coord-seo__col--media { align-self: auto; }

    /* На всю ширину рядок тексту виходив би за 100 символів, а картинка
       другого блока — під 700px заввишки. Тримаємо колонку однією
       комфортною шириною по центру. */
    .coord-seo__col,
    .coord-seo__figure {
        width:         100%;
        max-width:     760px;
        margin-inline: auto;
    }

    .coord-seo__figure--fill { flex: none; min-height: 0; aspect-ratio: 621 / 287; }
    .coord-seo__figure--wide { aspect-ratio: 648 / 479; }
}

@media (max-width: 768px) {
    .coord-seo              { padding: 48px 0; }
    .coord-seo > .container  { gap: 40px; }
    .coord-seo__heading      { letter-spacing: -1px; }
    .coord-seo__col          { font-size: 15px; }
    .coord-seo__card         { padding: 20px; font-size: 16px; }

    /* Кадр тут уже вузький — підпис перекрив би половину картинки. */
    .coord-seo__note         { display: none; }

    .coord-seo__figure--fill { aspect-ratio: 16 / 10; }
    .coord-seo__glow--3      { display: none; }
}

/* ── Успішна координація систем вимагає співпраці ───────────────────────── */
/* Макет 645:1443 (полотно 1922×926). Дві колонки: список пунктів
   ліворуч, ілюстрація праворуч; під ними — картка-виноска на всю
   ширину. */
.coord-collab {
    position:   relative;
    overflow:   hidden;
    padding:    120px 0;
    background: #031d47;
}

.coord-collab > .container {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
}

/* gap на контейнері був би однаковим для обох проміжків, а в макеті вони
   різні: 60px до блоку колонок, 40px від нього до картки-виноски (сам
   margin-top картки — у її основному правилі нижче, тут лише колонки). */
.coord-collab__cols { margin-top: 60px; }

/* ── Декор ──────────────────────────────────────────────────────────────── */
.coord-collab__decor {
    position:       absolute;
    inset:          0;
    z-index:        0;
    overflow:       hidden;
    pointer-events: none;
}

.coord-collab__bg {
    position:          absolute;
    display:           block;
    background-repeat: no-repeat;
    background-size:   100% 100%;
}

/* На вузлі «glow» (653:1815) у макеті цієї секції немає видимого
   світіння — на відміну від coord-process/coord-seo, де той самий
   компонент явно видно. Експорт вузла окремо з Figma підтверджує:
   майже суцільний темний фон без плями. Тому тут його немає зовсім —
   рендерити «на око» видиму пляму, якої в дизайні немає, було б
   вигадкою, не звіркою. */

.coord-collab__bg--1 {
    left:             0;
    bottom:           46px;
    width:            576px;
    height:           531px;
    background-image: url('../../img/coord-process-bg-1.svg');
}

.coord-collab__bg--2 {
    right:            -3.8%;
    top:              0;
    width:            681px;
    height:           603px;
    background-image: url('../../img/coord-collab-bg-2.svg');
}

/* ── Заголовок ──────────────────────────────────────────────────────────── */
.coord-collab__title {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            22px;
    text-align:     center;
}

/* line-height і letter-spacing — з макета (52px при 48px = 1.084, −1.5px),
   а не «як у сусідніх секціях»: у вузлі 645:1449 обидва задані явно. */
.coord-collab__heading {
    margin:                   0;
    font-size:                clamp(28px, 1rem + 2vw, 48px);
    font-weight:              300;
    line-height:              1.084;
    letter-spacing:           -1.5px;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                    var(--color-text-light);
    -webkit-text-fill-color:  var(--color-text-light);
}

/* Тут раніше стояла ручна суміш (#4eaef5/#b1d4f7/#e3ccb3), підібрана
   попіксельним семплом скріншота вузла — і це була помилка. Семпл дає
   темніші значення, бо міряє вже скомпоноване й згладжене зображення, а не
   саму заливку. Правило проєкту: спершу get_variable_defs — якщо фрагмент
   прив'язаний до іменованого стилю, істина в ньому. Тут get_variable_defs
   на 645:1443 повертає Gradient-2, а це і є --gradient-accent. */
.coord-collab__heading .is-accent {
    font-weight:              600;
    color:                    transparent;
    -webkit-text-fill-color:  transparent;
}

/* ── Дві колонки ────────────────────────────────────────────────────────── */
.coord-collab__cols {
    display:     flex;
    align-items: center;
    gap:         80px;
}

.coord-collab__col {
    flex:           1 1 0;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    gap:            24px;
}

.coord-collab__intro {
    margin:      0;
    font-size:   18px;
    font-weight: 600;
    line-height: 1.6;
    color:       var(--color-text-soft);
}

.coord-collab__list {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    margin:         0;
    padding:        0;
    list-style:     none;
}

.coord-collab-item {
    display:          flex;
    align-items:      center;
    gap:              12px;
    padding:          24px;
    border:           1px solid var(--color-border-blue);
    border-radius:    16px;
    background:       #041a43;
    box-shadow:       0 6px 10px -20px rgba(0, 0, 0, .35);
}

.coord-collab-item__num {
    flex:                     none;
    font-size:                16px;
    font-weight:              600;
    line-height:              1.6;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                    transparent;
    -webkit-text-fill-color: transparent;
}

.coord-collab-item__sep {
    flex:       none;
    display:    block;
    width:      1px;
    height:     20px;
    background: var(--gradient-line-v, linear-gradient(180deg,
                   rgba(0, 142, 238, 0)    0%,
                   rgba(0, 142, 238, .6)   20.67%,
                   rgba(172, 213, 255, .8) 50%,
                   rgba(255, 159, 194, .6) 80.77%,
                   rgba(255, 159, 194, 0)  100%));
}

.coord-collab-item__text {
    flex:        1 1 0;
    min-width:   0;
    font-size:   16px;
    line-height: 1.6;
    color:       var(--color-text-light);
}

/* ── Ілюстрація ─────────────────────────────────────────────────────────── */
.coord-collab__figure {
    flex:          1 1 0;
    min-width:     0;
    overflow:      hidden;
    aspect-ratio:  620 / 409;
    margin:        0;
    border-radius: 16px;
}

/* Радіальна маска з макета — м'яко розчиняє краї ілюстрації у фоні
   картки, замість різкої прямокутної рамки. */
/* Явний розмір/зсув еліпса («60% 75% at 43% 47%», і навіть просто
   closest-side з "at 43% 47%") у цьому Chromium на вузьких екранах
   рендериться як повністю прозора маска — картинка зникає цілком
   (перевірено: без "at" — стабільно, з ним — ламається саме на
   малих viewport, хоча сама маска валідна). Центр без зсуву —
   той самий безпечний патерн, що в сусідніх секціях. */
.coord-collab__photo {
    display:            block;
    width:              100%;
    height:             100%;
    object-fit:         cover;
    -webkit-mask-image: radial-gradient(ellipse closest-side, #000 0%, rgba(0, 0, 0, .65) 64%, transparent 100%);
    mask-image:         radial-gradient(ellipse closest-side, #000 0%, rgba(0, 0, 0, .65) 64%, transparent 100%);
}

/* ── Картка-виноска ─────────────────────────────────────────────────────── */
.coord-collab__callout {
    margin:           40px 0 0;
    padding:          28px 32px;
    border:           1px solid var(--color-border-blue);
    border-radius:    24px;
    background-image: linear-gradient(178.67deg,
                          rgba(30, 50, 97, .8) 0%, rgba(20, 36, 73, .94) 78.13%);
    backdrop-filter:  blur(17px);
    text-align:       center;
    font-size:        18px;
    line-height:      1.6;
    letter-spacing:   -.1px;
    color:            #77c6ff;
}

/* ── Адаптив ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .coord-collab               { padding: 80px 0; }
    .coord-collab > .container   { gap: 40px; }
    .coord-collab__bg--1         { width: 380px; height: 350px; bottom: 20px; }
    .coord-collab__bg--2         { width: 420px; height: 372px; }
}

/* Нижче 860px дві колонки стають надто вузькими — складаємо в один
   стовпчик. Порядок у DOM уже правильний (список → фото), order не
   потрібен. */
@media (max-width: 860px) {
    .coord-collab__cols   { flex-direction: column; align-items: stretch; gap: 32px; }
    .coord-collab__figure { flex: none; width: 100%; max-width: 560px; margin-inline: auto; }
}

@media (max-width: 768px) {
    .coord-collab             { padding: 48px 0; }
    /* На вузькому екрані заголовок переноситься на 2-3 рядки, і макетні
       1.084 там злипаються — послаблюємо, як в інших секціях сторінки. */
    .coord-collab__heading    { font-size: clamp(26px, 4vw, 36px); line-height: 1.2; letter-spacing: -1px; }
    .coord-collab-item        { padding: 16px; gap: 10px; }
    .coord-collab__callout    { padding: 20px; font-size: 16px; }
    .coord-collab__bg--1,
    .coord-collab__bg--2      { display: none; }
}

/* ── Софт і формати ─────────────────────────────────────────────────────── */
/* Макет 647:1443 (полотно 1922×2010). Три картки форматів, коротка
   виноска, блок «змішане середовище» (ілюстрація + текст), підсумкова
   виноска. */
.coord-formats {
    position:   relative;
    overflow:   hidden;
    padding:    120px 0;
    background: #031d47;
}

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

/* ── Декор ──────────────────────────────────────────────────────────────── */
.coord-formats__decor {
    position:       absolute;
    inset:          0;
    z-index:        0;
    overflow:       hidden;
    pointer-events: none;
}

/* Та сама пляма, що в «Де це найважливіше» (coord-matters-glow-3) — у
   макеті цієї секції її фрейм лежить в іншому місці, тож координати
   перераховано під видиму частину плями (getBBox по альфі), а не взято
   напряму з рамки фрейма в Figma. */
.coord-formats__glow {
    position:          absolute;
    display:           block;
    left:              1.92%;
    top:               -304.8px;
    width:             1784.5px;
    height:            1339.34px;
    background-repeat: no-repeat;
    background-size:   100% 100%;
    background-image:  url('../../img/coord-matters-glow-3.svg');
}

/* У макеті це не жорстко скруглений прямокутник, а м'яка еліптична пляма:
   SVG-маска з радіальним градієнтом, альфа 0 → 48% на ~29% радіуса →
   15% на ~54% → 0 на краю.
   Про opacity. Раніше тут стояло opacity:1 з поясненням, що маска вже дає
   ~15-19% і другий множник зайвий. Насправді ці 15-19% — і є макет:
   ізольований рендер вузла 653:2305 має пікову альфу рівно 49/255 = 19.2%,
   тобто 48% маски × 40% прозорості шару. Тож повертаємо .4 — інакше декор
   удвічі помітніший за задум і починає сперечатися з картками.
   filter лишається: наше вихідне фото темніше й синіше за макетне
   (найяскравіший піксель 158,191,235 проти 249,249,255), і без підйому
   яскравості той самий opacity дав би тьмянішу й синішу пляму. */
.coord-formats__photo {
    position:            absolute;
    display:             block;
    right:               0;
    top:                 0;
    width:               780px;
    height:              780px;
    opacity:             .4;
    filter:              brightness(2.2) contrast(1.15);
    background-repeat:   no-repeat;
    background-size:     cover;
    background-position: center;
    background-image:    url('../../img/coord-format-decor.webp');
    -webkit-mask-image:  url('../../img/coord-format-photo-mask.svg');
    mask-image:          url('../../img/coord-format-photo-mask.svg');
    -webkit-mask-size:   100% 100%;
    mask-size:           100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat:         no-repeat;
}

/* ── Заголовок ──────────────────────────────────────────────────────────── */
.coord-formats__title {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            22px;
    max-width:      1320px;
    text-align:     center;
}

/* Градієнт живе на БЛОЦІ, а не на .is-accent. Причина конкретна: Figma
   малює заливку по боксу текстового шару (1322px), а акцентний рядок
   вужчий і стоїть по центру — тобто на гліфи потрапляє лише СЕРЕДНІЙ
   піддіапазон градієнта. Inline-span натомість розтягує весь градієнт на
   ширину самого фрагмента, і краї виходять насиченішими за макет.
   letter-spacing -1.5px — з макета (вузол 647:1449). */
.coord-formats__heading {
    margin:                   0;
    font-size:                clamp(28px, 1rem + 2vw, 48px);
    font-weight:              300;
    line-height:              1.21;
    letter-spacing:           -1.5px;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                    var(--color-text-light);
    -webkit-text-fill-color:  var(--color-text-light);
}

/* Тут стояла ручна суміш #4eaef5/#b1d4f7/#e3ccb3 з поясненням, що семпл
   макета показує тьмяніші кольори. Семпл був знятий правильно — хибним був
   висновок: це не інший градієнт, а видимий піддіапазон правильного.
   Порахунок підтверджує: при гліфах на 22…78% боксу той самий
   #008eee/#acd5ff/#fcc891 дає на краях #62b7f8 і #dfcdb8 — тобто рівно ті
   значення, які й були «виміряні». Тож лікуємо причину (де малюється
   градієнт), а не симптом (підмінені стопи). */
.coord-formats__heading .is-accent {
    font-weight:              600;
    color:                    transparent;
    -webkit-text-fill-color:  transparent;
}

.coord-formats__intro {
    display:        flex;
    flex-direction: column;
    gap:            0;
    font-size:      18px;
    line-height:    1.6;
    color:          var(--color-text-soft);
}

.coord-formats__intro p        { margin: 0; }
.coord-formats__intro .is-strong { font-weight: 600; }

/* ── Картки форматів ────────────────────────────────────────────────────── */
.coord-formats__cards {
    display:   flex;
    align-items: stretch;
    gap:       24px;
    width:     100%;
}

.coord-formats__col {
    flex:           none;
    width:          339px;
    display:        flex;
    flex-direction: column;
    gap:            20px;
}

.coord-formats-card {
    flex:             1 1 0;
    display:          flex;
    flex-direction:   column;
    gap:              16px;
    padding:          28px;
    border:           1px solid var(--color-border-blue);
    border-radius:    24px;
    background:       #011231;
    backdrop-filter:  blur(17px);
}

.coord-formats-card--wide {
    flex:      1 1 0;
    min-width: 0;
}

.coord-formats-card__title {
    margin:         0;
    font-size:      20px;
    font-weight:    600;
    line-height:    1.4;
    letter-spacing: -.4px;
    color:          #fff;
}

.coord-formats-card__head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
}

.coord-formats-card__note {
    margin:      0;
    max-width:   none;
    font-size:   15.2px;
    line-height: 1.6;
    color:       var(--color-text-light);
    white-space: nowrap;
}

/* ── Формат-плитки ──────────────────────────────────────────────────────── */
.coord-formats-card__row {
    display:     flex;
    align-items: flex-start;
    gap:         32px;
}

/* Три колонки з роздільниками. Роздільник — псевдоелемент попереднього
   пункту, а не border, щоб лінія лишалась по центру гепу незалежно від
   його ширини на різних брейкпоінтах.
   БАГ, який тут був: justify-content:space-between з flex:1-пунктами не
   лишає жодного вільного місця для розподілу (усі три пункти й так
   займають 100% ширини) — реальний gap виходив 0px, іконки стикались
   впритул, і роздільник (right:-22px) ховався під сусідньою іконкою.
   Явний gap — 44px ≈ (903 − 3×272) / 2 з макета, div навпіл дає
   right:-22px, з яким роздільник уже написаний нижче. */
.coord-formats-card__row--platforms {
    gap: 44px;
}

/* У макеті 16px до роздільника + 16px після (не 24+24) — виміряно з
   позицій Line12 відносно обох рядків. Сам роздільник — не border (той не
   вміє градієнт), а ::before з власним асиметричним градієнтом Line12:
   прозорий → блідо-блакитний по центру → персиковий, що гасне ближче
   до кінця. */
.coord-formats-card__row--platforms + .coord-formats-card__row--platforms {
    position:    relative;
    margin-top:  16px;
    padding-top: 16px;
}

.coord-formats-card__row--platforms + .coord-formats-card__row--platforms::before {
    content:          '';
    position:         absolute;
    top:              -16px;
    left:             0;
    right:            0;
    height:           1px;
    background-image: linear-gradient(90deg,
                          rgba(0, 142, 238, 0)    0%,
                          rgba(172, 213, 255, .4) 38.46%,
                          rgba(255, 191, 122, 0)  91.83%);
}

.coord-formats-format {
    position:       relative;
    flex:           1 1 0;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            16px;
}

/* Line7/Line8 з макета — не суцільний колір, а градієнт, що гасне на
   обох кінцях (той самий профіль, що --gradient-line-v у coord-matters):
   прозорий → синій → блідо-блакитний по центру → рожевий → прозорий. */
.coord-formats-card__row--platforms .coord-formats-format:not(:last-child)::after {
    content:          '';
    position:         absolute;
    top:              0;
    right:            -22px;
    bottom:           37px;
    width:            1px;
    background-image: linear-gradient(180deg,
                          rgba(0, 142, 238, 0)    0%,
                          rgba(0, 142, 238, .6)   20.67%,
                          rgba(172, 213, 255, .8) 50%,
                          rgba(255, 159, 194, .6) 80.77%,
                          rgba(255, 159, 194, 0)  100%);
}

.coord-formats-card__row:not(.coord-formats-card__row--platforms) .coord-formats-format:not(:last-child)::after {
    content:          '';
    position:         absolute;
    top:              0;
    right:            -16px;
    bottom:           0;
    width:            1px;
    background-image: linear-gradient(180deg,
                          rgba(0, 142, 238, 0)    0%,
                          rgba(0, 142, 238, .6)   20.67%,
                          rgba(172, 213, 255, .8) 50%,
                          rgba(255, 159, 194, .6) 80.77%,
                          rgba(255, 159, 194, 0)  100%);
}

.coord-formats-format--wide { width: 100%; }

.coord-formats-format__icon {
    display:       block;
    overflow:      hidden;
    width:         109px;
    height:        109px;
    border-radius: 20px;
    background:    #001030;
}

.coord-formats-card__row--platforms .coord-formats-format__icon {
    width:  100%;
    height: auto;
    aspect-ratio: 272 / 200;
}

.coord-formats-format__icon--wide {
    width:        100%;
    height:       auto;
    aspect-ratio: 283 / 161;
}

/* Самі растри (Revit/IFC/AutoCAD, іконки платформ) мають трохи інший
   відтінок темно-синього фону, ніж контейнер (#001030) — на стику це
   читалось як прямокутна рамка з боків. Замість жорсткого краю — плавне
   згасання в контейнерний фон по горизонталі (вертикально різниця не
   помітна, тому там маску не чіпаємо). */
.coord-formats-format__img {
    display:             block;
    width:               100%;
    height:              100%;
    object-fit:          cover;
    -webkit-mask-image:  linear-gradient(90deg,
                             transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image:          linear-gradient(90deg,
                             transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.coord-formats-format__label {
    font-size:      15px;
    font-weight:    600;
    line-height:    1.4;
    text-align:     center;
    color:          var(--color-text-light);
}

/* ── Виноски ────────────────────────────────────────────────────────────── */
.coord-formats__callout {
    max-width:        1026px;
    margin:           0;
    padding:          28px 32px;
    border:           1px solid var(--color-border-blue);
    border-radius:    24px;
    background-image: linear-gradient(177.7deg,
                          rgba(30, 50, 97, .8) 0%, rgba(20, 36, 73, .94) 78.13%);
    backdrop-filter:  blur(17px);
    text-align:       center;
    font-size:        18px;
    font-weight:      600;
    line-height:      1.6;
    letter-spacing:   -.1px;
    color:            #77c6ff;
}

/* ── Ілюстрація + текст (змішане середовище) ───────────────────────────── */
.coord-formats__body {
    display:     flex;
    align-items: center;
    gap:         80px;
    width:       100%;
}

.coord-formats__figure {
    flex:          none;
    overflow:      hidden;
    width:         620px;
    aspect-ratio:  620 / 420;
    margin:        0;
    border:        1px solid var(--color-border-blue);
    border-radius: 24px;
}

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

.coord-formats__body-text {
    flex:           1 1 0;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    gap:            20px;
    font-size:      16px;
    line-height:    1.6;
    letter-spacing: -.1px;
    color:          var(--color-text-light);
}

.coord-formats__body-text p { margin: 0; }

/* У макеті перший абзац на 2px крупніший за решту (18px проти 16px),
   а не лише виділений кольором. */
.coord-formats__body-text .is-accent {
    font-size:   18px;
    font-weight: 600;
    color:       #77c6ff;
}

/* ── Підсумкова виноска ─────────────────────────────────────────────────── */
.coord-formats__callout2 {
    width:            100%;
    padding:          28px 32px;
    border:           1px solid var(--color-border-blue);
    border-radius:    24px;
    background-image: linear-gradient(177.3deg,
                          rgba(30, 50, 97, .8) 0%, rgba(20, 36, 73, .94) 78.13%);
    backdrop-filter:  blur(17px);
    text-align:       center;
}

.coord-formats__callout2-title {
    margin:      0 0 6px;
    font-size:   24px;
    font-weight: 600;
    line-height: 1.6;
    color:       #77c6ff;
}

.coord-formats__callout2-text {
    margin:      0;
    font-size:   24px;
    line-height: 1.6;
    color:       var(--color-text-light);
}

/* ── Адаптив ────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .coord-formats-card__row--platforms { flex-wrap: wrap; row-gap: 24px; }
}

@media (max-width: 1024px) {
    .coord-formats              { padding: 80px 0; }
    .coord-formats > .container  { gap: 40px; }

    .coord-formats__cards       { flex-direction: column; align-items: stretch; }
    .coord-formats__col         { width: 100%; flex-direction: row; }
    .coord-formats__col .coord-formats-card { flex: 1 1 0; }

    .coord-formats__body        { gap: 40px; }
    .coord-formats__figure      { width: 45%; }

    .coord-formats__photo       { width: 560px; height: 560px; }
}

/* Нижче 860px колонка з двома картками (BIM/CAD) стає надто вузькою —
   складаємо в стовпчик. Порядок у DOM уже правильний. */
@media (max-width: 860px) {
    .coord-formats__col { flex-direction: column; }
    .coord-formats__body { flex-direction: column; align-items: stretch; }
    .coord-formats__figure { width: 100%; }
}

@media (max-width: 768px) {
    .coord-formats                { padding: 48px 0; }
    .coord-formats__heading       { font-size: clamp(26px, 4vw, 36px); letter-spacing: -1px; }
    .coord-formats-card           { padding: 20px; }
    /* 3 колонки стають 2 — дефолтний селектор «роздільник після всіх,
       крім останнього» тут би розсипався (зайва лінія після 2-го пункту
       ряду, відсутня — після 1-го наступного). Явно лишаємо лінію лише
       після першого пункту кожної пари. */
    .coord-formats-card__row--platforms { justify-content: flex-start; column-gap: 24px; row-gap: 24px; }
    .coord-formats-card__row--platforms .coord-formats-format { flex: 1 1 calc(50% - 12px); }

    /* Специфічність повинна збігатися з базовим правилом (:not() важить
       як клас) — інакше "скасування" тут просто програє каскад і
       розділові лінії лишаються в неправильних місцях. */
    .coord-formats-card__row--platforms .coord-formats-format:not(:last-child)::after { content: none; }
    .coord-formats-card__row--platforms .coord-formats-format:nth-child(2n+1):not(:last-child)::after {
        content:    '';
        position:   absolute;
        top:        0;
        right:      -12px;
        bottom:     37px;
        width:      1px;
        background: rgba(90, 160, 255, .14);
    }
    .coord-formats-card__head     { flex-direction: column; align-items: flex-start; gap: 8px; }
    /* На мобайлі заголовок і підпис уже в стовпчик — тут nowrap із
       десктопу знову заважав би, рядок довший за екран. */
    .coord-formats-card__note     { white-space: normal; }

    .coord-formats__callout,
    .coord-formats__callout2      { padding: 20px; font-size: 16px; }
    .coord-formats__callout2-title,
    .coord-formats__callout2-text { font-size: 18px; }

    /* Лишаємо декор і на мобайлі. Яскраве «кільце» маски сидить у самого
       правого краю боксу (центр градієнта 732.5 із 780 = 94% ширини), тому
       при right:0 воно лишається на екрані за будь-якого розміру — міняється
       лише те, наскільки далеко вліво тягнеться серпанок. 420px ≈ ширина
       екрана: пляма читається в правому верхньому куті й не залазить під
       увесь текст, як залазили б успадковані з планшета 560px. */
    .coord-formats__photo         { width: 420px; height: 420px; }
}

/* ── Повна прозорість кожної проблеми координації ────────────────────────── */
/* Макет 650:1443 (полотно 1922×1203). Заголовок + лід, дві колонки
   (список пунктів + ілюстрація дашборду), картка-виноска знизу. */
.coord-visibility {
    position:   relative;
    overflow:   hidden;
    padding:    120px 0;
    background: #031d47;
}

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

/* ── Декор ──────────────────────────────────────────────────────────────── */
.coord-visibility__decor {
    position:       absolute;
    inset:          0;
    z-index:        0;
    overflow:       hidden;
    pointer-events: none;
}

/* Фонове фото інтер'єру зверху секції, замасковане тим самим радіальним
   градієнтом, що в макеті (пік альфи лише 20% — це навмисно ледь помітна
   текстура, не самостійне зображення). */
.coord-visibility__city {
    position:            absolute;
    left:                0;
    top:                 0;
    width:               100%;
    height:              475px;
    background-repeat:   no-repeat;
    background-size:     cover;
    background-position: center;
    background-image:    url('../../img/coord-visibility-city.webp');
    -webkit-mask-image:  url('../../img/coord-visibility-city-mask.svg');
    mask-image:          url('../../img/coord-visibility-city-mask.svg');
    -webkit-mask-size:   100% 100%;
    mask-size:           100% 100%;
}

/* ── Заголовок ──────────────────────────────────────────────────────────── */
.coord-visibility__title {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            22px;
    max-width:      1320px;
    text-align:     center;
}

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

/* Градієнт на БЛОЦІ, а не на .is-accent: Figma малює заливку по боксу
   текстового шару, а акцент вужчий — на гліфи потрапляє лише середній
   піддіапазон. Ручна суміш #4eaef5/#b1d4f7/#e3ccb3, що стояла тут раніше,
   і була цим піддіапазоном, знятим семплом зі скріншота. Детальніше — у
   коментарі до .coord-formats__heading. */
.coord-visibility__heading .is-accent {
    font-weight:              600;
    color:                    transparent;
    -webkit-text-fill-color:  transparent;
}

.coord-visibility__lead {
    margin:         0;
    max-width:      900px;
    font-size:      18px;
    font-weight:    600;
    line-height:    1.6;
    letter-spacing: -.1px;
    color:          var(--color-text-soft);
}

/* ── Дві колонки ────────────────────────────────────────────────────────── */
.coord-visibility__cols {
    display:     flex;
    align-items: center;
    gap:         80px;
    width:       100%;
}

.coord-visibility__col {
    flex:           none;
    width:          620px;
    max-width:      100%;
    display:        flex;
    flex-direction: column;
    gap:            24px;
}

.coord-visibility__intro {
    margin:         0;
    font-size:      18px;
    font-weight:    600;
    line-height:    1.6;
    letter-spacing: -.1px;
    color:          var(--color-text-soft);
}

.coord-visibility__list {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    margin:         0;
    padding:        0;
    list-style:     none;
}

.coord-visibility-item {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       24px;
    border:        1px solid var(--color-border-blue);
    border-radius: 16px;
    background:    #041a43;
    box-shadow:    0 6px 10px -20px rgba(0, 0, 0, .35);
}

.coord-visibility-item__num {
    flex:                     none;
    font-size:                16px;
    font-weight:              600;
    line-height:              1.6;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                    transparent;
    -webkit-text-fill-color: transparent;
}

.coord-visibility-item__sep {
    flex:       none;
    display:    block;
    width:      1px;
    height:     20px;
    background: linear-gradient(180deg,
                   rgba(0, 142, 238, 0)    0%,
                   rgba(0, 142, 238, .6)   20.67%,
                   rgba(172, 213, 255, .8) 50%,
                   rgba(255, 159, 194, .6) 80.77%,
                   rgba(255, 159, 194, 0)  100%);
}

.coord-visibility-item__text {
    flex:        1 1 0;
    min-width:   0;
    font-size:   16px;
    line-height: 1.6;
    color:       var(--color-text-light);
}

/* ── Ілюстрація ─────────────────────────────────────────────────────────── */
.coord-visibility__figure {
    flex:          1 1 0;
    min-width:     0;
    overflow:      hidden;
    margin:        0;
    aspect-ratio:  622 / 557;
}

/* Той самий патерн, що в coord-collab__photo: м'яка радіальна маска
   розчиняє краї ілюстрації у фоні секції замість різкої рамки. */
.coord-visibility__photo {
    display:            block;
    width:              100%;
    height:             100%;
    object-fit:         contain;
    -webkit-mask-image: radial-gradient(ellipse closest-side, #000 0%, rgba(0, 0, 0, .65) 64%, transparent 100%);
    mask-image:         radial-gradient(ellipse closest-side, #000 0%, rgba(0, 0, 0, .65) 64%, transparent 100%);
}

/* ── Виноска ────────────────────────────────────────────────────────────── */
.coord-visibility__callout {
    width:            100%;
    margin:           0;
    padding:          28px 32px;
    border:           1px solid var(--color-border-blue);
    border-radius:    24px;
    background-image: linear-gradient(178.2deg,
                          rgba(30, 50, 97, .8) 0%, rgba(20, 36, 73, .94) 78.13%);
    backdrop-filter:  blur(17px);
    text-align:       center;
    font-size:        18px;
    line-height:      1.6;
    letter-spacing:   -.1px;
    color:            #77c6ff;
}

/* ── Адаптив ────────────────────────────────────────────────────────────── */
/* Нижче 1024px список (фіксовані 620px) і ілюстрація вже не влазять поруч
   без стиснення — складаємо в стовпчик. Порядок у DOM уже правильний
   (список → ілюстрація), order не потрібен. */
@media (max-width: 1024px) {
    .coord-visibility              { padding: 80px 0; }
    .coord-visibility > .container  { gap: 40px; }
    .coord-visibility__city         { height: 360px; }
    .coord-visibility__cols         { flex-direction: column; align-items: stretch; gap: 32px; }
    .coord-visibility__col          { width: 100%; }
    .coord-visibility__figure {
        flex:          none;
        width:         100%;
        max-width:     480px;
        margin-inline: auto;
    }
}

@media (max-width: 768px) {
    .coord-visibility           { padding: 48px 0; }
    .coord-visibility__heading  { font-size: clamp(26px, 4vw, 36px); line-height: 1.2; letter-spacing: -1px; }
    .coord-visibility-item      { padding: 16px; gap: 10px; }
    .coord-visibility__callout  { padding: 20px; font-size: 16px; }
    .coord-visibility__city     { height: 260px; }
}

/* ══════════════════════════════════════════════════════════════════════
   11 · FAQ
   Акордеон (.faq__list/.faq-item*) — спільний блок, css/main.css і
   js/main.js (той самий, що на Головній). Тут — лише те, що специфічне
   для цієї сторінки: відступи секції, фонове фото, градієнт заголовка.
   ══════════════════════════════════════════════════════════════════════ */
.faq {
    position:   relative;
    overflow:   hidden;
    padding:    120px 0;
    background: #031d47;
}

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

/* Фонове фото мосту/скайлайну знизу секції — той самий підхід, що в
   coord-collab__photo: звичайне непрозоре фото + м'яка радіальна CSS-маска
   розчиняє краї у фоні, без жорсткої рамки. */
.faq__city {
    position:            absolute;
    left:                0;
    bottom:              0;
    width:               100%;
    height:              654px;
    background-repeat:   no-repeat;
    background-size:     cover;
    background-position: center;
    background-image:    url('../../img/coord-faq-city.webp');
    -webkit-mask-image:  radial-gradient(ellipse closest-side, #000 0%, rgba(0, 0, 0, .65) 64%, transparent 100%);
    mask-image:          radial-gradient(ellipse closest-side, #000 0%, rgba(0, 0, 0, .65) 64%, transparent 100%);
    opacity:             .5;
}

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

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

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

/* Тут стояв двостоповий #c1d2e3 → #cecfcf — майже сірий, без теплого
   кінця взагалі. У макеті це той самий тристоповий Gradient-2
   (#008eee / #acd5ff / #fcc891), просто видно лише його середину. */
.faq__title .is-accent {
    font-weight:              600;
    color:                    transparent;
    -webkit-text-fill-color:  transparent;
}

/* ── Адаптив ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .faq       { padding: 80px 0; }
    .faq__wrp  { gap: 40px; }
    .faq__city { height: 480px; }
}

@media (max-width: 768px) {
    .faq        { padding: 48px 0; }
    .faq__title { font-size: clamp(26px, 4vw, 36px); line-height: 1.2; letter-spacing: -1px; }
    .faq__city  { height: 340px; }
}