/*
 * Головна — секції.
 * Хіро: макет 295:1268 (полотно 1920, висота 832).
 */

/* ── Хіро ───────────────────────────────────────────────────────────────── */
/* Висота секції тягнеться за шириною екрана — так само, як ілюстрація.
   Фіксовані 832px з макета лишали порожнечу знизу праворуч на всіх
   ширинах, вужчих за 1920: картинка меншала, а секція — ні.
   46vw — пропорція макета (832/1920 з запасом під контент). */
.hero {
    position:   relative;
    overflow:   hidden;
    min-height: clamp(680px, 46vw, 860px);
    padding:    85px 0 35px;
    background: linear-gradient(180deg, #00000c 0%, #031d47 100%);
}

/* Декоративні шари. Розміри SVG уже містять область розмиття, і кожен
   файл відцентрований на своєму еліпсі — тому позиціонуємо від центру:
   left = центр у % мінус половина ширини файлу. */
.hero__decor {
    position:       absolute;
    inset:          0;
    pointer-events: none;
    overflow:       hidden;
}

.hero__decor--back  { z-index: 0; }
.hero__decor--front { z-index: 2; }

.hero__decor > span {
    position:            absolute;
    display:             block;
    background-repeat:   no-repeat;
    background-size:     100% 100%;
}

.hero__lines {
    top:              0;
    left:             5.3%;
    width:            94.7%;
    height:           832px;
    background-image: url('../../img/hero-lines.svg');
    opacity:          .9;
}

.hero__frame {
    top:              17px;
    left:             calc(78.15% - 908px);
    width:            1816px;
    height:           1565px;
    background-image: url('../../img/hero-frame.svg');
}

/* Світлові плями. Обертання лишається на transform, а анімація рухає
   окремі властивості translate/scale — вони не конфліктують. */
.hero__glow {
    animation-duration:        16s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.hero__glow--1 {
    top:              calc(38.5% - 661px);
    left:             calc(66.82% - 753px);
    width:            1505px;
    height:           1322px;
    background-image: url('../../img/hero-glow-1.svg');
    transform:        rotate(-22.65deg);
    animation-name:   glow-1-move, glow-1-scale, glow-1-fade;
}

.hero__glow--2 {
    top:              calc(109.1% - 661px);
    left:             calc(68.70% - 753px);
    width:            1505px;
    height:           1322px;
    background-image: url('../../img/hero-glow-2.svg');
    transform:        rotate(-5.7deg);
    animation-name:   glow-2-move, glow-2-scale, glow-2-fade;
}

.hero__glow--3 {
    top:              calc(97% - 685px);
    left:             calc(94.25% - 568px);
    width:            1137px;
    height:           1370px;
    background-image: url('../../img/hero-glow-3.svg');
    transform:        rotate(35.16deg);
    animation-name:   glow-3-move, glow-3-scale, glow-3-fade;
}

@keyframes glow-1-move {
    0%    { animation-timing-function: ease-in-out; translate:       0 -120px; }
    12.5% { animation-timing-function: ease-in-out; translate:  113.844px -84.853px; }
    25%   { animation-timing-function: ease-in-out; translate:     161px 0; }
    37.5% { animation-timing-function: ease-in-out; translate:  113.844px 84.853px; }
    50%   { animation-timing-function: ease-in-out; translate:       0 120px; }
    62.5% { animation-timing-function: ease-in-out; translate: -113.844px 84.853px; }
    75%   { animation-timing-function: ease-in-out; translate:    -161px 0; }
    87.5% { animation-timing-function: ease-in-out; translate: -113.844px -84.853px; }
    100%  { translate: 0 -120px; }
}

@keyframes glow-1-scale {
    0%    { animation-timing-function: ease-in-out; scale: 1.104; }
    12.5% { animation-timing-function: ease-in-out; scale: 1.116; }
    25%   { animation-timing-function: ease-in-out; scale: 1.06; }
    37.5% { animation-timing-function: ease-in-out; scale: 0.969; }
    50%   { animation-timing-function: ease-in-out; scale: 0.896; }
    62.5% { animation-timing-function: ease-in-out; scale: 0.884; }
    75%   { animation-timing-function: ease-in-out; scale: 0.94; }
    87.5% { animation-timing-function: ease-in-out; scale: 1.031; }
    100%  { scale: 1.104; }
}

@keyframes glow-1-fade {
    0%    { animation-timing-function: ease-in-out; opacity: 1; }
    12.5% { animation-timing-function: ease-in-out; opacity: .823; }
    25%   { animation-timing-function: ease-in-out; opacity: .75; }
    37.5% { animation-timing-function: ease-in-out; opacity: .823; }
    50%   { opacity: 1; }
    100%  { opacity: 1; }
}

@keyframes glow-2-move {
    0%    { animation-timing-function: ease-in-out; translate:   91.17px -69.326px; }
    12.5% { animation-timing-function: ease-in-out; translate: 134.869px  -4.133px; }
    25%   { animation-timing-function: ease-in-out; translate:  99.564px  63.481px; }
    37.5% { animation-timing-function: ease-in-out; translate:   5.936px  93.909px; }
    50%   { animation-timing-function: ease-in-out; translate:  -91.17px  69.326px; }
    62.5% { animation-timing-function: ease-in-out; translate: -134.869px  4.133px; }
    75%   { animation-timing-function: ease-in-out; translate: -99.564px -63.481px; }
    87.5% { animation-timing-function: ease-in-out; translate:  -5.936px -93.909px; }
    100%  { translate: 91.17px -69.326px; }
}

@keyframes glow-2-scale {
    0%    { animation-timing-function: ease-in-out; scale: 0.883; }
    12.5% { animation-timing-function: ease-in-out; scale: 0.935; }
    25%   { animation-timing-function: ease-in-out; scale: 1.026; }
    37.5% { animation-timing-function: ease-in-out; scale: 1.101; }
    50%   { animation-timing-function: ease-in-out; scale: 1.117; }
    62.5% { animation-timing-function: ease-in-out; scale: 1.065; }
    75%   { animation-timing-function: ease-in-out; scale: 0.974; }
    87.5% { animation-timing-function: ease-in-out; scale: 0.899; }
    100%  { scale: 0.883; }
}

@keyframes glow-2-fade {
    0%    { opacity: 1; }
    37.5% { animation-timing-function: ease-in-out; opacity: 1; }
    50%   { animation-timing-function: ease-in-out; opacity: .831; }
    62.5% { animation-timing-function: ease-in-out; opacity: .75; }
    75%   { animation-timing-function: ease-in-out; opacity: .816; }
    87.5% { animation-timing-function: ease-in-out; opacity: .989; }
    100%  { opacity: 1; }
}

@keyframes glow-3-move {
    0%    { animation-timing-function: ease-in-out; translate: 106.586px  12.826px; }
    12.5% { animation-timing-function: ease-in-out; translate:  82.015px -93.769px; }
    25%   { animation-timing-function: ease-in-out; translate:     9.4px -145.436px; }
    37.5% { animation-timing-function: ease-in-out; translate: -68.721px -111.908px; }
    50%   { animation-timing-function: ease-in-out; translate: -106.586px -12.826px; }
    62.5% { animation-timing-function: ease-in-out; translate: -82.015px  93.769px; }
    75%   { animation-timing-function: ease-in-out; translate:    -9.4px 145.436px; }
    87.5% { animation-timing-function: ease-in-out; translate:  68.721px 111.908px; }
    100%  { translate: 106.586px 12.826px; }
}

@keyframes glow-3-scale {
    0%    { animation-timing-function: ease-in-out; scale: 1.069; }
    12.5% { animation-timing-function: ease-in-out; scale: 0.979; }
    25%   { animation-timing-function: ease-in-out; scale: 0.902; }
    37.5% { animation-timing-function: ease-in-out; scale: 0.882; }
    50%   { animation-timing-function: ease-in-out; scale: 0.931; }
    62.5% { animation-timing-function: ease-in-out; scale: 1.021; }
    75%   { animation-timing-function: ease-in-out; scale: 1.098; }
    87.5% { animation-timing-function: ease-in-out; scale: 1.118; }
    100%  { scale: 1.069; }
}

@keyframes glow-3-fade {
    0%    { animation-timing-function: ease-in-out; opacity: .751; }
    12.5% { animation-timing-function: ease-in-out; opacity: .808; }
    25%   { animation-timing-function: ease-in-out; opacity: .978; }
    37.5% { opacity: 1; }
    75%   { animation-timing-function: ease-in-out; opacity: 1; }
    87.5% { animation-timing-function: ease-in-out; opacity: .839; }
    100%  { opacity: .751; }
}

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

/* Головна ілюстрація. Не lazy — це LCP-елемент.

   Геометрія знята з макета (вузол 295:1327 «home-img»): вікно кадру
   1050×790, а саме зображення в ньому — 112.89% × 124.69% зі зсувом
   left −4%, top −4.96%. Пропорція 1185/985 = 1.203 збігається з файлом
   (1215×1010), тобто масштаб рівномірний — обрізає саме вікно, а не
   спотворює кадр. У координатах героя (1440×821) це: 1185×985, лівий
   край на 348, 93px за правим краєм секції, верх ≈0, низ на 164px нижче
   секції. Це дає ширину 82.3% від секції — від неї й рахується поточне
   значення нижче. Обрізанням займається .hero { overflow: hidden }.

   ЧОМУ ВЖЕ НЕ object-fit: contain (як було раніше). Contain вписував увесь
   кадр у рамку цілком і лишав порожнє поле згори — ілюстрація виходила
   помітно меншою і піднятою. У макеті навпаки: кадр більший за секцію і
   свідомо зрізаний праворуч та знизу. Стара версія трималась contain саме
   щоб нічого не обрізати — тепер це обмеження знято свідомо.

   min-height: 100% — запобіжник від того, на чому ламались попередні
   спроби. Ширина задає висоту через пропорцію, тож на вузькому й високому
   екрані знизу лишалась би порожнеча. Коли так стається, min-height
   піднімає бокс до висоти секції, а object-fit: cover доріже боки;
   object-position 31% тримає той самий горизонтальний кадр, що в макеті
   (у ньому ліворуч зрізано 42 з 135px надлишку). */
.hero__visual {
    position:        absolute;
    right:           -6.5%;
    top:             0;
    /* 63.4% — це 82.3% з макета, зменшені на прохання замовника трьома
       кроками: −10%, −10%, −5% (82.3 → 74.1 → 66.7 → 63.4).
       Прив'язку правого краю (right) лишаємо як є, щоб виніс за край
       секції не з'їхав: зменшується сам кадр, а не композиція. */
    width:           63.4%;
    height:          auto;
    min-height:      100%;
    object-fit:      cover;
    object-position: 31% 20%;
    z-index:         1;
}

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

.hero__wrp {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            20px;
    max-width:      741px;
}

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

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

/* Заголовок */
/* Макет: 56/1.2, tracking -1.12. Світлі фрагменти — Onest Light 300 #b8d1ff,
   акцент і {strong} — Onest Bold 700. text-transform: capitalize з макета
   свідомо не переносимо: він коректний для англійського заголовка й
   ламає українську орфографію («Надійний Партнер Із Координації»). */
/* Розмір плаває від ширини екрана: 56px з макета на широкому ПК,
   далі плавно вниз до 28px. Це прибирає стрибки на брейкпоінтах і
   дозволяє тримати двоколонкову композицію аж до планшета.
   Міжлітерний теж плаваючий — на дрібному кеглі -1.12px забагато. */
/* Градієнт звірено з макетом (вузол 2066:2473, 2026-09-08) — збігається зі
   стилем «Gradient-2», тобто з токеном --gradient-accent.

   ЧОМУ ГРАДІЄНТ НА БЛОЦІ, А НЕ НА .is-accent.
   Акцент переноситься на два рядки. Для інлайнового елемента браузер
   малює фон по СУМАРНІЙ ширині фрагментів (тут 546+378=924px), тож
   другий рядок стартував уже з 59% градієнта — блідим. Figma рахує
   інакше: градієнт лежить на боксі текстового шару (741px), і кожен
   рядок бере свій відрізок від його лівого краю, тобто ПОЧИНАЄТЬСЯ
   з насиченого синього. Через це на сайті синій з'являвся один раз
   замість двох, і все читалось яскравішим і «не тим».

   Рішення: фон переїжджає на сам заголовок — його бокс і є той самий
   бокс, що в Figma. Звичайний текст лишається суцільним через
   -webkit-text-fill-color, а крізь прозорий акцент видно градієнт
   батька. Рядки лишаються ті самі (546/378), висота не змінюється.

   Наслідок такого підходу: -webkit-text-fill-color тепер керує кольором
   усіх частин заголовка, тому кожна нова частина має задати його явно. */
.hero__title {
    margin:                  0;
    font-size:               clamp(28px, 1rem + 2.5vw, 56px);
    font-weight:             300;
    line-height:             1.2;
    letter-spacing:          clamp(-1.12px, -0.02em, -0.4px);
    overflow-wrap:           break-word;

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

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

.hero__title strong {
    font-weight:             600;
    color:                   #fff;
    -webkit-text-fill-color: #fff;
}

.hero__text {
    font-size:   18px;
    line-height: 1.6;
    color:       var(--color-text-light);
}

/* Кнопка — більший розмір тієї ж кнопки, що в хедері. */
.btn--lg {
    height:    56px;
    padding:   14px 34px;
    min-width: 270px;
    justify-content: center;
    border-radius:   12px;
}

.hero__rule {
    width:      100%;
    height:     1px;
    margin:     16px 0;
    border:     0;
    background: rgba(175, 187, 215, .1);
}

/* Статистика */
.hero__stats {
    display:    flex;
    align-items: center;
    gap:        40px;
    list-style: none;
    flex-wrap:  wrap;
}

.stat {
    display:     flex;
    align-items: center;
    gap:         14px;
}

/* Вертикальна риска між показниками — з макета. */
.stat + .stat::before {
    content:     '';
    align-self:  stretch;
    width:       1px;
    margin-right: 26px;
    background:  rgba(175, 187, 215, .1);
}

.stat__value {
    font-size:               42px;
    font-weight:             600;
    line-height:             1.2;
    text-transform:          uppercase;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                   transparent;
    -webkit-text-fill-color: transparent;
    white-space:             nowrap;
}

.stat__label {
    font-size:   16px;
    line-height: 1.4;
    color:       var(--color-text-light);
    max-width:   120px;
}

/* Чипи */
.hero__chips {
    display:    flex;
    flex-wrap:  wrap;
    gap:        8px;
    list-style: none;
}

.hero__chip {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       10px 16px;
    background:    rgba(5, 8, 20, .3);
    border:        1px solid rgba(255, 255, 255, .2);
    border-radius: 50px;
    font-size:     16px;
    line-height:   1.4;
    color:         var(--color-text-light);
}

.hero__chip .icon {
    flex:  none;
    color: var(--color-yellow);
}

/* ── Адаптив ────────────────────────────────────────────────────────────── */
/* Планшет зберігає десктопну композицію: текст ліворуч, ілюстрація праворуч.
   Можливим це робить плаваючий розмір заголовка — колонка вужча, але текст
   меншає разом з нею. У стовпчик блоки шикуються лише на мобільному. */
@media (max-width: 1024px) {
    .hero { padding: 56px 0 64px; }

    .hero__wrp { max-width: 54%; }

    /* object-fit:contain (з базового правила) і далі гарантує відсутність
       обрізання — тут лише піднімаємо ширину рамки, щоб ілюстрація
       читалась більшою на вужчому екрані. */
    /* Ширину й виніс за правий край НЕ перевизначаємо — планшет тримає ту
       саму пропорцію, що й десктоп (63.4% + right -6.5% з базового
       правила). Раніше тут стояло width: 80%, і планшет випадав із
       композиції. Мобільний (≤768) лишається як був — там своя розкладка
       у стовпчик. */
    .hero__visual {
        /* Ліва кромка ілюстрації розчиняється — саме туди заходять підписи
           показників і чипи. Маска на самому зображенні, а не затемнення
           поверх нього: фон секції має вертикальний градієнт, і будь-яка
           накладка одноколірною плямою була б помітна вгорі. */
        -webkit-mask-image: linear-gradient(90deg,
                                transparent 0,
                                rgba(0, 0, 0, .2) 14%,
                                #000 34%);
        mask-image:         linear-gradient(90deg,
                                transparent 0,
                                rgba(0, 0, 0, .2) 14%,
                                #000 34%);
    }

    .hero__text { font-size: 16px; }

    /* У вужчій колонці показники не вміщались в один рядок. */
    .hero__stats           { gap: 16px; }
    .stat                  { gap: 12px; }
    .stat + .stat::before  { margin-right: 16px; }
    .stat__value           { font-size: 28px; }
    .stat__label           { font-size: 14px; max-width: 100px; }

    /* Секція нижча за десктопну, тож передні плями лягають просто на
       ілюстрацію — приглушуємо, щоб будівля лишалась читабельною. */
    .hero__decor--front { opacity: .45; }

    /* Дрібна рамка на планшеті читається як шум. */
    .hero__frame { display: none; }
}

@media (max-width: 768px) {
    .hero {
        min-height: 0;
        padding:    32px 0 40px;
    }

    .hero__wrp {
        max-width: none;
        gap:       20px;
    }

    /* Ілюстрація в потоці під текстом, підтягнута вгору. Верхня кромка
       розчиняється в тлі. */
    .hero__visual {
        position:   static;
        display:    block;
        width:      82%;
        max-width:  none;
        max-height: none;
        height:     auto;

        /* Скидаємо десктопні запобіжники: у стовпчику картинка стоїть
           у потоці, і min-height/cover тут лише зайво різали б кадр. */
        min-height:      0;
        object-fit:      contain;
        object-position: center;

        /* Притиснута до правого краю. Раніше правий відступ був від'ємним
           (виносив за .container) — на вузьких екранах це виштовхувало
           зображення за межі самої секції (.hero{overflow:hidden}) і
           обрізало правий край. 0 — впритул до краю, без обрізання. */
        margin:     -190px 0 -8px auto;

        /* Довша розтяжка маски: верхня частина будівлі йде вже під
           показниками й чипами, тому має бути ледь помітною. Текст лежить
           поверх (контейнер має власний контекст накладання). */
        -webkit-mask-image: linear-gradient(180deg,
                                transparent 0,
                                rgba(0, 0, 0, .45) 10%,
                                #000 24%);
        mask-image:         linear-gradient(180deg,
                                transparent 0,
                                rgba(0, 0, 0, .45) 10%,
                                #000 24%);
    }


    /* Кнопка на всю ширину, але не ширша за читабельну — розтягнута
       на 730px вона виглядає як банер, а не як кнопка. */
    .btn--lg {
        width:     100%;
        max-width: 340px;
        min-width: 0;
        height:    52px;
        padding:   14px 24px;
    }

    /* Передній шар світіння накриває фото, коли блоки в стовпчик. */
    .hero__decor--front { display: none; }

    .hero__lines { opacity: .2; }

    /* Пляма тримається за будівлею й не розливається — інакше під
       ілюстрацією утворюється світлий прямокутник і вона виглядає
       наклеєною. margin, а не translate — translate зайнятий анімацією. */
    .hero__glow--1 {
        top:         auto;
        bottom:      0;
        left:        auto;
        right:       -110px;
        width:       430px;
        height:      390px;
        margin-left: 0;
        opacity:     .3;
    }

    /* Показники та чипи — вертикальною колонкою. Підпис під числом, тож
       колонка лишається вузькою і не заходить на ілюстрацію праворуч. */
    .hero__stats {
        flex-direction: column;
        flex-wrap:      nowrap;
        align-items:    flex-start;
        gap:            18px;
    }

    .stat {
        flex-direction: column;
        align-items:    flex-start;
        gap:            2px;
    }

    .stat + .stat::before { display: none; }

    .stat__value { font-size: 30px; line-height: 1.1; }
    .stat__label { font-size: 14px; max-width: 180px; }

    .hero__chips {
        flex-direction: column;
        align-items:    flex-start;
        flex-wrap:      nowrap;
        gap:            8px;
    }

    .hero__chip { font-size: 14px; padding: 8px 13px; white-space: nowrap; }
}

/* Фону тут навмисно немає: у Figma в цієї секції немає власного
   bg-класу — вона прозора й показує базове полотно сторінки
   (--color-bg у main.css). Не плутати з .hero/.clients/.site-footer —
   ті в макеті МАЮТЬ власний fill, тому тримають його в собі. */
.seo {
    position: relative;
    overflow: hidden;
    padding:  120px 0;
}

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

.seo__glow,
.seo__network {
    position:          absolute;
    background-repeat: no-repeat;
    background-size:   100% 100%;
}

.seo__glow {
    top:              0;
    right:            0;
    width:            61.2%;
    max-width:        1175px;
    aspect-ratio:     1175 / 933;
    background-image: url('../../img/seo-glow.svg');
    animation:        seo-glow-fade 16s ease-in-out infinite,
                       seo-glow-move 16s ease-in-out infinite,
                       seo-glow-scale 16s ease-in-out infinite;
}

/* Той самий розмір елемента (1175×933), що й у services__glow — тому
   ті самі значення keyframes, підібрані під ту саму пляму. Секції не
   бачать одна одну на екрані одночасно, тож синхронний рух непомітний. */
@keyframes seo-glow-fade {
    0%    { opacity: 0.956; }
    12.5% { opacity: 1; }
    50%   { opacity: 1; }
    62.5% { opacity: 0.857; }
    75%   { opacity: 0.754; }
    87.5% { opacity: 0.795; }
    100%  { opacity: 0.956; }
}

@keyframes seo-glow-move {
    0%    { translate: -25.553px 148.669px; }
    12.5% { translate: 83.575px 123.813px; }
    25%   { translate: 143.746px 26.428px; }
    37.5% { translate: 119.713px -86.437px; }
    50%   { translate: 25.553px -148.669px; }
    62.5% { translate: -83.575px -123.813px; }
    75%   { translate: -143.746px -26.428px; }
    87.5% { translate: -119.713px 86.437px; }
    100%  { translate: -25.553px 148.669px; }
}

@keyframes seo-glow-scale {
    0%    { scale: 0.908 0.908; }
    12.5% { scale: 0.88 0.88; }
    25%   { scale: 0.923 0.923; }
    37.5% { scale: 1.01 1.01; }
    50%   { scale: 1.092 1.092; }
    62.5% { scale: 1.12 1.12; }
    75%   { scale: 1.077 1.077; }
    87.5% { scale: 0.99 0.99; }
    100%  { scale: 0.908 0.908; }
}

.seo__network {
    top:              -18%;
    left:             50%;
    width:            87.4%;
    max-width:        1679px;
    aspect-ratio:     1678.91 / 1235.08;
    transform:        translateX(-50%);
    background-image: url('../../img/seo-network.svg');
    animation:        seo-network-fade 16s ease-in-out infinite,
                       seo-network-move 16s ease-in-out infinite,
                       seo-network-scale 16s ease-in-out infinite;
}

/* Той самий 16s-цикл, що й у плями, але зі зсувом фази (мережа рухається
   в протифазі) і меншою амплітудою відносно свого більшого розміру —
   так фонова сітка не смикається синхронно з плямою поверх неї. */
@keyframes seo-network-fade {
    0%    { opacity: 0.85; }
    25%   { opacity: 1; }
    50%   { opacity: 0.9; }
    75%   { opacity: 0.78; }
    100%  { opacity: 0.85; }
}

@keyframes seo-network-move {
    0%    { translate: 18px -20px; }
    25%   { translate: -22px 16px; }
    50%   { translate: -14px 24px; }
    75%   { translate: 20px -12px; }
    100%  { translate: 18px -20px; }
}

@keyframes seo-network-scale {
    0%    { scale: 1.015 1.015; }
    25%   { scale: 0.985 0.985; }
    50%   { scale: 1.03 1.03; }
    75%   { scale: 0.99 0.99; }
    100%  { scale: 1.015 1.015; }
}

@media (prefers-reduced-motion: reduce) {
    .seo__glow,
    .seo__network { animation: none; }
}

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

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

.seo__title {
    margin:                  0;
    font-size:               48px;
    font-weight:             600;
    line-height:             52px;
    letter-spacing:          -1.5px;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                   transparent;
    -webkit-text-fill-color: transparent;
}

/* Grid, а не flex+width-у-відсотках: пропорція ряду (у Figma фото —
   633/648px при робочій ширині ряду 1160px = 54.6%/55.9%) належить
   КОЛОНЦІ, а не картинці. .seo__shot і .seo__text просто заповнюють
   свою колонку на 100% — жоден з них не тримає в собі знання про
   пропорцію сусіда, і немає потреби у flex-direction/order для
   перевертання: колонки самі розставлені в порядку макета, а DOM-порядок
   (визначає читання й таб-фокус) лишається як у PHP — текст-фото для
   ряду 1, фото-текст для ряду 2. */
.seo__row {
    display:               grid;
    /* 49.1% і 50.3% — макетні 54.6%/55.9% мінус 10% на прохання замовника.
       Зменшуємо колонку, а не .seo__shot: фігура заповнює свою колонку на
       100%, і саме колонка тримає пропорцію ряду (див. коментар вище).
       Звільнене місце забирає текст — 1fr. */
    grid-template-columns: 1fr 49.1%;
    align-items:           center;
    gap:                   80px;
    width:                 100%;
}

.seo__row--reverse { grid-template-columns: 50.3% 1fr; }

.seo__text {
    min-width:      0;
    font-size:      18px;
    line-height:    1.6;
    letter-spacing: -0.1px;
    color:          var(--color-text-soft);
}

.seo__text p { margin: 0 0 10px; }
.seo__text p:last-child { margin-bottom: 0; }
.seo__text strong { font-weight: 600; color: var(--color-text); }

.seo__shot {
    width:         100%;
    margin:        0;
    border:        1px solid var(--color-border-blue);
    border-radius: 24px;
    box-shadow:    0 0 44px #122a59;
    overflow:      hidden;
}

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

.seo__card {
    display:                 flex;
    align-items:             center;
    gap:                     30px;
    width:                   100%;
    padding:                 24px;
    border:                  1px solid var(--color-border-blue);
    border-radius:           24px;
    background-image:        linear-gradient(177.5deg, rgba(30, 50, 97, .8) 0%, rgba(20, 36, 73, .94) 78%);
    backdrop-filter:         blur(17px);
    -webkit-backdrop-filter: blur(17px);
}

.seo__card-icon {
    flex:          none;
    width:         90px;
    height:        90px;
    border-radius: 10px;
    object-fit:    cover;
}

.seo__card-text {
    flex:           1 1 0;
    min-width:      0;
    font-size:      18px;
    line-height:    1.6;
    letter-spacing: -0.1px;
    color:          var(--color-text-soft);
}

.seo__card-text p { margin: 0; }
.seo__card-text strong { font-weight: 600; color: var(--color-text); }

@media (max-width: 1024px) {
    .seo { padding: 90px 0; }

    .seo__title { font-size: 36px; line-height: 42px; letter-spacing: -1px; }

    .seo__row { gap: 40px; }

    .seo__network { top: -10%; width: 110%; }
}

@media (max-width: 768px) {
    .seo { padding: 56px 0; }

    .seo__wrp { gap: 32px; }
    .seo__head { gap: 16px; }

    .seo__title { font-size: 26px; line-height: 32px; letter-spacing: -0.6px; }

    .seo__text,
    .seo__card-text { font-size: 16px; }

    /* На мобільному повертаємось з grid на flex-колонку: grid-колонки
       мали б сенс лише у два стовпці, тут все в один. Фото завжди
       зверху, текст знизу — для обох рядів. DOM-порядок рядів різний
       (у другому фото йде першим ще на десктопі), тому щоб отримати
       однаковий візуальний результат, перший ряд доводиться розвертати.
       Це не ламає порядок читання: він і далі йде з DOM, міняється лише
       те, що намальовано зверху. */
    .seo__row {
        display:        flex;
        flex-direction: column-reverse;
        gap:            20px;
    }

    .seo__row--reverse {
        flex-direction: column;
        gap:            20px;
    }

    .seo__card {
        flex-direction: column;
        align-items:    flex-start;
        gap:            16px;
        padding:        20px;
    }

    .seo__glow    { opacity: .5; }
    .seo__network { display: none; }
}

/* ── Services ───────────────────────────────────────────────────────────── */
/* Макет 116:1257. Полотно 1920, робочий контент 1320 (дві картки 649px
   + gap 22px = 1320) — той самий принцип, що і в SEO: пропорція картки
   живе у грід-колонці (1fr 1fr), а не в px, тож масштабується з реальним
   --container-width сайту без втрати балансу фото/текст. */
.services {
    position: relative;
    overflow: hidden;
    padding:  120px 0 20px;
}

.services__decor {
    position:       absolute;
    inset:          0;
    pointer-events: none;
    z-index:        0;
}

.services__glow,
.services__bg {
    position:          absolute;
    background-repeat: no-repeat;
    background-size:   100% 100%;
}

.services__glow {
    top:              0;
    left:             0;
    width:            61.2%;
    max-width:        1175px;
    aspect-ratio:     1175 / 933;
    background-image: url('../../img/service-glow.svg');
    animation:        services-glow-fade 16s ease-in-out infinite,
                       services-glow-move 16s ease-in-out infinite,
                       services-glow-scale 16s ease-in-out infinite;
}

@keyframes services-glow-fade {
    0%    { opacity: 0.956; }
    12.5% { opacity: 1; }
    50%   { opacity: 1; }
    62.5% { opacity: 0.857; }
    75%   { opacity: 0.754; }
    87.5% { opacity: 0.795; }
    100%  { opacity: 0.956; }
}

@keyframes services-glow-move {
    0%    { translate: -25.553px 148.669px; }
    12.5% { translate: 83.575px 123.813px; }
    25%   { translate: 143.746px 26.428px; }
    37.5% { translate: 119.713px -86.437px; }
    50%   { translate: 25.553px -148.669px; }
    62.5% { translate: -83.575px -123.813px; }
    75%   { translate: -143.746px -26.428px; }
    87.5% { translate: -119.713px 86.437px; }
    100%  { translate: -25.553px 148.669px; }
}

@keyframes services-glow-scale {
    0%    { scale: 0.908 0.908; }
    12.5% { scale: 0.88 0.88; }
    25%   { scale: 0.923 0.923; }
    37.5% { scale: 1.01 1.01; }
    50%   { scale: 1.092 1.092; }
    62.5% { scale: 1.12 1.12; }
    75%   { scale: 1.077 1.077; }
    87.5% { scale: 0.99 0.99; }
    100%  { scale: 0.908 0.908; }
}

.services__bg--1 {
    top:              349px;
    left:             0;
    width:            30%;
    max-width:        576px;
    aspect-ratio:     576 / 531;
    background-image: url('../../img/service-bg-1-v2.svg');
}

.services__bg--2 {
    top:              0;
    right:            0;
    width:            31.7%;
    max-width:        608px;
    aspect-ratio:     608 / 569;
    background-image: url('../../img/service-bg-2-v3.svg');
}

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

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

.services__title {
    margin:      0;
    font-size:   48px;
    font-weight: 600;
    line-height: 52px;
}

.services__title-main {
    display:                  block;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                    transparent;
    -webkit-text-fill-color: transparent;
    letter-spacing:           -1.5px;
}

.services__title-sub {
    display:        block;
    font-weight:    300;
    letter-spacing: -1.5px;
    color:          var(--color-text-light);
}

.services__lead {
    font-size:      18px;
    font-weight:    300;
    line-height:    1.6;
    letter-spacing: -0.1px;
    color:          var(--color-text-soft);
}

.services__lead p { margin: 0; }
.services__lead strong { font-weight: 600; color: var(--color-text); }

.services__cards {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   22px;
    width:                 100%;
    align-items:           stretch;
}

/* ── Картка послуги ─────────────────────────────────────────────────────── */
.service-card {
    position:                relative;
    display:                 flex;
    flex-direction:          column;
    overflow:                hidden;
    padding:                 38px;
    border:                  1px solid var(--color-border-blue);
    border-radius:           24px;
    background-image:        linear-gradient(161.17deg, rgba(30, 50, 97, .8) 0%, rgba(20, 36, 73, .94) 78.125%);
    box-shadow:              0 20px 60px -20px rgba(6, 9, 26, .75);
    transition:              border-color var(--transition), box-shadow var(--transition);
}

.service-card:hover {
    border-color: #008eee;
    box-shadow:   0 22px 74px -26px rgba(45, 140, 255, .95);
}

/* Фото будівлі виходить за правий край картки й розчиняється радіальним
   градієнтом (service-mask.svg) — без різкого обрізу по рамці картки. */
.service-card__photo {
    position:            absolute;
    top:                 0;
    right:               -46px;
    width:               444px;
    height:              509px;
    max-width:           none;
    object-fit:          cover;
    -webkit-mask-image:  url('../../img/service-mask.svg');
    mask-image:          url('../../img/service-mask.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat:         no-repeat;
    -webkit-mask-size:   100% 100%;
    mask-size:           100% 100%;
    pointer-events:      none;
}

.service-card__body {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    gap:            20px;
    flex:           1 1 auto;
}

.service-card__top {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             12px;
}

.service-card__icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           49px;
    height:          49px;
    padding:         13px;
    border-radius:   15px;
    transition:      transform var(--transition), border-color var(--transition);
}

/* Легкий нахил іконки на hover — той самий трюк, що й у Figma
   (rotate(-3.35deg) лише на самій іконці, картка лишається рівною). */
.service-card:hover .service-card__icon { transform: rotate(-3.35deg); }

.service-card--1 .service-card__icon {
    border:            1px solid rgba(124, 168, 255, .24);
    background-image:  linear-gradient(150.11deg, rgba(76, 141, 255, .2) 0%, rgba(92, 125, 246, .12) 72.99%);
}

/* У макеті рамка іконки на hover стає помітнішою лише в картці 1
   (0.24 → 0.74) — у картці 2 вона не змінюється, лишаємо як є. */
.service-card--1:hover .service-card__icon { border-color: rgba(124, 168, 255, .74); }

.service-card--2 .service-card__icon {
    border:            1px solid rgba(245, 165, 36, .26);
    background-image:  linear-gradient(150.11deg, rgba(245, 165, 36, .2) 0%, rgba(255, 122, 52, .1) 72.99%);
}

.service-card__icon img { display: block; width: 23px; height: 23px; }

.service-card__label {
    flex:           none;
    font-size:      13px;
    font-weight:    600;
    line-height:    18px;
    letter-spacing: 1.3px;
    color:          rgba(175, 187, 215, .7);
    white-space:    nowrap;
    transition:      color var(--transition);
}

.service-card:hover .service-card__label { color: #ffc203; }

.service-card__title {
    margin:      0;
    font-size:   24px;
    font-weight: 600;
    line-height: 1.2;
    color:       var(--color-text);
}

.service-card__subtitle {
    margin:                   0;
    max-width:                434px;
    font-size:                16px;
    font-weight:              600;
    line-height:              22px;
    letter-spacing:           -0.07px;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                    transparent;
    -webkit-text-fill-color: transparent;
}

.service-card__text {
    max-width:      434px;
    font-size:      16px;
    line-height:    1.6;
    color:          var(--color-text-light);
}

.service-card__text p { margin: 0 0 10px; }
.service-card__text p:last-child { margin-bottom: 0; }
.service-card__text strong { font-weight: 600; }

.service-card__btn {
    margin-top: auto;
    align-self: flex-start;
    height:     48px;
    padding:    14px 22px;
}

@media (prefers-reduced-motion: reduce) {
    .service-card__btn .btn__shine { animation: none; }
    .services__glow { animation: none; }
}

@media (max-width: 1024px) {
    .services { padding: 90px 0 20px; }

    .services__title,
    .services__title-main,
    .services__title-sub { font-size: 36px; line-height: 42px; }

    /* Картка на планшеті стає майже вдвічі ширшою за десктопну колонку
       (тепер 1 в ряд замість 2). Як і на мобільному: текст на всю
       ширину без max-width, а фото — притлумлений фоновий акцент
       (менше й напівпрозоре), а не рівноправна колонка поруч з текстом. */
    .services__cards { grid-template-columns: 1fr; gap: 32px; }

    .service-card__subtitle,
    .service-card__text { max-width: none; }

    .service-card__photo {
        width:        340px;
        height:       auto;
        aspect-ratio: 444 / 509;
        right:        -40px;
        opacity:      .6;
    }

    .services__bg--2 { display: none; }
}

@media (max-width: 768px) {
    .services { padding: 56px 0 16px; }

    .services__wrp { gap: 32px; }
    .services__head { gap: 16px; }

    .services__title,
    .services__title-main,
    .services__title-sub { font-size: 26px; line-height: 32px; }

    .services__lead { font-size: 16px; }

    .service-card { padding: 24px; }

    .service-card__photo { width: 260px; height: 300px; right: -30px; opacity: .6; }

    .service-card__title { font-size: 20px; }

    /* На мобільному фото притлумлене й не звужує колонку — max-width
       434px/520px з десктопу й планшета тут лише даремно обрізає текст. */
    .service-card__subtitle,
    .service-card__text { max-width: none; }

    .services__glow { opacity: .5; }
    .services__bg--1 { display: none; }
}

/* ── Experience ─────────────────────────────────────────────────────────── */
/* Макет 133:1707. Полотно 1920, робочий контент 1320. Власного фону в
   Figma немає — так само, як у SEO, показує базове полотно сторінки. */
.experience {
    position: relative;
    overflow: hidden;
    padding:  180px 0 120px;
}

.experience__decor {
    position:       absolute;
    inset:          0;
    pointer-events: none;
    z-index:        0;
}

/* Силует міста вгорі секції — фото з розмитим вертикальним згасанням
   зверху й знизу (у Figma це окрема SVG-маска поверх фото; тут той самий
   ефект — через CSS mask-image, без зайвого файлу). */
.experience__city {
    /* Одне зображення без блендингу: пряме фото вгорі секції,
       відцентроване по горизонталі. Підняте трохи вище верхньої межі
       секції — translateY у відсотках рахується від власної висоти
       елемента (на відміну від top), тож підйом лишається
       пропорційним на будь-якій ширині, а не лише на десктопі. */
    position:          absolute;
    top:               0;
    left:              50%;
    width:             100%;
    transform:          translate(-50%, -10%);
    /* Точна пропорція вікна з макета (1920×475). Файл — готовий
       композит, експортований напряму з ноди 300:1644. */
    aspect-ratio:       1920 / 475;
    background-image:   url('../../img/experience-city-v3.webp');
    background-size:    cover;
    background-position: center;
    /* Плавне згасання лише знизу — без нього фото обривалось різкою
       горизонтальною межею над заголовком. Зверху фото лишається
       повністю видимим. */
    -webkit-mask-image: linear-gradient(180deg,
                            rgba(255, 255, 255, 1) 0%,
                            rgba(255, 255, 255, 1) 70%,
                            transparent 100%);
    mask-image:         linear-gradient(180deg,
                            rgba(255, 255, 255, 1) 0%,
                            rgba(255, 255, 255, 1) 70%,
                            transparent 100%);
}

/* Розмита пляма-градієнт унизу праворуч — той самий прийом, що й
   .services__bg: фото + маска однаковими SVG-градієнтами з макета. */
.experience__maskgroup {
    position:            absolute;
    right:               0;
    bottom:              0;
    width:               70.7%;
    max-width:           1358px;
    aspect-ratio:        1 / 1;
    opacity:             .4;
    background-image:    url('../../img/experience-maskgroup.webp');
    background-size:     cover;
    -webkit-mask-image:  url('../../img/experience-maskgroup-mask.svg');
    mask-image:          url('../../img/experience-maskgroup-mask.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat:         no-repeat;
    -webkit-mask-size:   100% 100%;
    mask-size:           100% 100%;
}

/* Той самий network-візерунок, що й .seo__network (141:1982 в макеті —
   той самий компонент, що й у SEO), лише інша позиція й фаза анімації. */
.experience__glow {
    position:          absolute;
    top:               14.5%;
    left:              -21.4%;
    width:             87.4%;
    max-width:         1679px;
    aspect-ratio:      1678.91 / 1235.08;
    background-repeat: no-repeat;
    background-size:   100% 100%;
    background-image:  url('../../img/seo-network.svg');
    animation:         experience-glow-fade 16s ease-in-out infinite,
                        experience-glow-move 16s ease-in-out infinite,
                        experience-glow-scale 16s ease-in-out infinite;
}

@keyframes experience-glow-fade {
    0%    { opacity: 0.778; }
    12.5% { opacity: 0.924; }
    25%   { opacity: 1; }
    62.5% { opacity: 1; }
    75%   { opacity: 0.885; }
    87.5% { opacity: 0.762; }
    100%  { opacity: 0.778; }
}

@keyframes experience-glow-move {
    0%    { translate: 129.668px 59.745px; }
    12.5% { translate: 44.243px 123.887px; }
    25%   { translate: -67.099px 115.458px; }
    37.5% { translate: -139.135px 39.395px; }
    50%   { translate: -129.668px -59.745px; }
    62.5% { translate: -44.243px -123.887px; }
    75%   { translate: 67.099px -115.458px; }
    87.5% { translate: 139.135px -39.395px; }
    100%  { translate: 129.668px 59.745px; }
}

@keyframes experience-glow-scale {
    0%    { scale: 1.006 1.006; }
    12.5% { scale: 0.919 0.919; }
    25%   { scale: 0.88 0.88; }
    37.5% { scale: 0.911 0.911; }
    50%   { scale: 0.994 0.994; }
    62.5% { scale: 1.081 1.081; }
    75%   { scale: 1.12 1.12; }
    87.5% { scale: 1.089 1.089; }
    100%  { scale: 1.006 1.006; }
}

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

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

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

/* Той самий розмір, що й .seo__title/.services__title (48/52/-1.5px),
   але базовий стиль — світлий текст вагою 300, як у .hero__title: тут
   акцентна фраза йде ВСЕРЕДИНІ речення, а не займає весь рядок. */
/* Акцент тут переноситься на два рядки, тому градієнт живе на БЛОЦІ
   заголовка, а не на .is-accent — так само, як у .hero__title.
   Для інлайнового елемента браузер малює фон по сумарній ширині всіх
   фрагментів, і другий рядок стартував би з середини градієнта (блідим).
   Figma кладе градієнт на бокс текстового шару, і кожен рядок бере свій
   відрізок за своїм x. Заголовок вирівняний по центру, тож короткий рядок
   бере середину градієнта — саме як у макеті.
   Наслідок: колір кожної частини задається через -webkit-text-fill-color. */
.experience__title {
    margin:         0;
    font-size:      48px;
    font-weight:    300;
    line-height:    52px;
    letter-spacing: -1.5px;
    color:          var(--color-text-light);
    -webkit-text-fill-color: var(--color-text-light);
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
}

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

.experience__lead {
    max-width:      860px;
    font-size:      18px;
    font-weight:    300;
    line-height:    1.6;
    letter-spacing: -0.1px;
    color:          var(--color-text-soft);
}

.experience__lead p { margin: 0 0 10px; }
.experience__lead p:last-child { margin-bottom: 0; }
.experience__lead strong { font-weight: 600; color: var(--color-text); }

.experience__why {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            40px;
    width:          100%;
}

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

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

.experience-card {
    display:           flex;
    flex-direction:    column;
    gap:                16px;
    padding:            30px;
    border:             1px solid var(--color-border-blue);
    border-radius:      24px;
    background-image:  linear-gradient(169deg, 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);
}

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

.experience-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.99%);
    transition:         transform var(--transition), border-color var(--transition), background-image var(--transition);
}

/* На hover контейнер іконки перефарбовується в жовтогарячий (той самий
   відтінок, що й у service-card--2) і трохи нахиляється. Саму іконку-
   зображення не перефарбовуємо — це довільна картинка з медіатеки
   (адмін підвантажує свою на кожну картку), а не керована темою SVG. */
.experience-card:hover .experience-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%);
}

.experience-card__icon img { display: block; width: 100%; height: 100%; object-fit: contain; }

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

.experience-card__text p { margin: 0 0 10px; }
.experience-card__text p:last-child { margin-bottom: 0; }
.experience-card__text strong { font-weight: 600; }

/* Перші три картки в макеті мають великий акцентний показник на початку
   («20+ years…», «1,000+…») — 20px замість 16px. Щоб не заводити окреме
   поле лише під це, досить виділити перше слово **жирним** на початку
   тексту в редакторі — воно автоматично отримає більший кегль. */
.experience-card__text p:first-of-type > strong:first-child {
    font-size:   20px;
    font-weight: 800;
}

.experience__btn { margin-top: 4px; }

@media (max-width: 1024px) {
    .experience { padding: 90px 0; }

    .experience__title { font-size: 36px; line-height: 42px; }

    .experience__subtitle { font-size: 28px; line-height: 36px; }

    .experience__grid { grid-template-columns: 1fr 1fr; }

    .experience__maskgroup { width: 90%; }
}

@media (max-width: 768px) {
    .experience { padding: 56px 0; }

    .experience__wrp { gap: 40px; }
    .experience__head { gap: 16px; }

    .experience__title { font-size: 26px; line-height: 32px; }

    .experience__lead { font-size: 16px; }

    .experience__why { gap: 24px; }

    .experience__subtitle { font-size: 22px; line-height: 28px; }

    .experience__grid { grid-template-columns: 1fr; gap: 16px; }

    .experience-card { padding: 22px; }

    .experience__btn { width: 100%; max-width: 340px; }

    .experience__glow { opacity: .5; }
}

/* ── Industries ─────────────────────────────────────────────────────────── */
/* Макет 152:8227. Полотно 1920, робочий контент 1320, картки — 1090
   (вужчі за контент і центровані), тіло картки 557 + gap 30 + фото 503
   = 1090 — та сама логіка колонок-у-відсотках, що й у Services/SEO. */
.industries {
    position: relative;
    overflow: hidden;
    padding:  120px 0;
}

.industries__decor {
    position:       absolute;
    inset:          0;
    pointer-events: none;
    z-index:        0;
}

/* Силует будівлі зліва (вузол 152:8227 → img-left 218:1893).
   У макеті це три вкладені шари, і кожен відповідає за своє:
     img-left      932×915, притиснуте до лівого верхнього кута секції —
                   вікно обрізки (цей елемент, overflow: hidden);
     Mask group    1358×1358 зі зсувом -242/-244 відносно вікна — система
                   координат маски;
     background-1 1  1358×1358, радіальний градієнт — сама маска;
     background-1 2  1118.67×1118.67 зі зсувом +239.33/+221 — фото.
   Раніше два останні шари були склеєні в один: фото розтягувалось на всю
   групу 1358², тобто виходило і більшим, і зсунутим вліво-вгору проти
   макета. Тепер маска лишається в координатах групи (на вікні), а фото
   отримує власну геометрію (::after). Розмітки в PHP це не додає. */
.industries__left-decor {
    position:  absolute;
    top:       0;
    left:      0;
    width:     48.5%;
    max-width: 932px;
    aspect-ratio: 932 / 915;
    overflow:  hidden;

    /* Маска — це вузол "background-1 1" (218:1891): прямокутник 1358×1358 з
       радіальним градієнтом, який лежить у Mask group поруч із фото, а не
       на самому фото. Тому вона живе тут, на вікні обрізки, а не на ::after:
       її система координат — Mask group (1358×1358 зі зсувом -242/-244
       відносно вікна), і до розміру фото вона стосунку не має.
       mask-size:  1358/932 = 145.71%, 1358/915 = 148.41%
       mask-position: offset = (вікно − маска) × pct, тобто
                   -242 / (932 − 1358) = 56.81%,  -244 / (915 − 1358) = 55.08% */
    -webkit-mask-image:    url('../../img/industry-left-decor-mask.svg');
    mask-image:            url('../../img/industry-left-decor-mask.svg');
    -webkit-mask-repeat:   no-repeat;
    mask-repeat:           no-repeat;
    -webkit-mask-size:     145.71% 148.41%;
    mask-size:             145.71% 148.41%;
    -webkit-mask-position: 56.81% 55.08%;
    mask-position:         56.81% 55.08%;
}

/* Фото — вузол "background-1 2" (218:1892): квадрат 1118.67×1118.67 зі
   зсувом +239.33/+221 усередині Mask group. Разом зі зсувом самої групи
   (-242/-244) це дає відносно вікна обрізки лівий край -2.67px і верхній
   -23px, тобто фото стоїть майже впритул до кута вікна, а не зсунуте на
   чверть ширини вліво-вгору, як було раніше.
     left:   -2.67 / 932 = -0.29%     width:  1118.67 / 932 = 120.03%
     top:      -23 / 915 = -2.51%     height: 1118.67 / 915 = 122.26% */
.industries__left-decor::after {
    content:          '';
    position:         absolute;
    top:              -2.51%;
    left:             -0.29%;
    width:            120.03%;
    height:           122.26%;
    opacity:          .4;
    background-image: url('../../img/industry-left-decor.webp');
    background-size:  cover;
    background-position: center;
}

/* Той самий network-візерунок, що й у SEO/Experience (152:8229 у макеті
   — той самий компонент), своя позиція й фаза анімації. */
.industries__glow {
    position:          absolute;
    top:               -10%;
    left:              19.1%;
    width:             63.4%;
    max-width:         1218px;
    aspect-ratio:      1678.91 / 1235.08;
    background-repeat: no-repeat;
    background-size:   100% 100%;
    background-image:  url('../../img/seo-network.svg');
    animation:         industries-glow-fade 16s ease-in-out infinite,
                        industries-glow-move 16s ease-in-out infinite,
                        industries-glow-scale 16s ease-in-out infinite;
}

@keyframes industries-glow-fade {
    0%    { opacity: 1; }
    37.5% { opacity: 1; }
    50%   { opacity: 0.905; }
    62.5% { opacity: 0.769; }
    75%   { opacity: 0.769; }
    87.5% { opacity: 0.904; }
    100%  { opacity: 1; }
}

@keyframes industries-glow-move {
    0%    { translate: -58.866px -143.387px; }
    12.5% { translate: -143.014px -59.766px; }
    25%   { translate: -143.387px 58.866px; }
    37.5% { translate: -59.766px 143.014px; }
    50%   { translate: 58.866px 143.387px; }
    62.5% { translate: 143.014px 59.766px; }
    75%   { translate: 143.387px -58.866px; }
    87.5% { translate: 59.766px -143.014px; }
    100%  { translate: -58.866px -143.387px; }
}

@keyframes industries-glow-scale {
    0%    { scale: 0.881 0.881; }
    12.5% { scale: 0.905 0.905; }
    25%   { scale: 0.984 0.984; }
    37.5% { scale: 1.073 1.073; }
    50%   { scale: 1.119 1.119; }
    62.5% { scale: 1.095 1.095; }
    75%   { scale: 1.016 1.016; }
    87.5% { scale: 0.927 0.927; }
    100%  { scale: 0.881 0.881; }
}

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

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

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

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

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

.industries__grid {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            20px;
    width:          100%;
}

/* Плавне розгортання прихованих карток. grid-template-rows 0fr→1fr (як у
   мобільному меню header'а) тут не підходить: картки всередині — flex з
   align-items:stretch, їхня висота залежить від висоти рядка, а висота
   рядка в 0fr/1fr рахується від висоти вмісту — циклічна залежність.
   max-height з transition — стандартний і надійний варіант; JS лише
   виміряє реальну висоту вмісту (scrollHeight), без вгадування
   довільних "запасних" чисел. */
.industries__grid-extra {
    width:      100%;
    max-height: 0;
    overflow:   hidden;
    transition: max-height .4s ease;
}

.industries__grid-extra-inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            20px;
}

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

/* ── Картка сектору ─────────────────────────────────────────────────────── */
.industry-card {
    display:           flex;
    align-items:       stretch;
    gap:               30px;
    width:             100%;
    max-width:         1090px;
    overflow:          hidden;
    border:            1px solid var(--color-border-blue);
    border-radius:     24px;
    background-image:  linear-gradient(174deg, 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);
}

.industry-card:hover {
    border-color: #008eee;
    box-shadow:   0 22px 74px -26px rgba(45, 140, 255, .95);
}

.industry-card__body {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    /* У макеті gap між icon-рядком/highlight/текстом — 16px, а перед
       кнопкою — 24px. Замість вкладеної обгортки простіше додати різницю
       (8px) кнопці через margin-top. */
    gap:            16px;
    width:          51.1%;
    max-width:      557px;
    padding:        40px;
}

.industry-card__top {
    display:      flex;
    align-items:  center;
    gap:          16px;
    width:        100%;
}

.industry-card__icon {
    display:           inline-flex;
    flex:              none;
    align-items:       center;
    justify-content:   center;
    width:             60px;
    height:            60px;
}

.industry-card__icon img { display: block; width: 100%; height: 100%; object-fit: contain; }

.industry-card__title {
    margin:      0;
    font-size:   24px;
    font-weight: 600;
    line-height: 1.2;
    color:       var(--color-text);
}

.industry-card__highlight {
    margin:                   0;
    width:                    100%;
    font-size:                16px;
    font-weight:              600;
    line-height:              22px;
    letter-spacing:           -0.07px;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                    transparent;
    -webkit-text-fill-color: transparent;
}

.industry-card__text {
    width:       100%;
    font-size:   16px;
    line-height: 1.6;
    color:       var(--color-text-light);
}

.industry-card__text p { margin: 0 0 10px; }
.industry-card__text p:last-child { margin-bottom: 0; }
.industry-card__text strong { font-weight: 600; }

.industry-card__btn { height: 48px; padding: 14px 32px; margin-top: 8px; border-radius: 12px; }

.industry-card__photo {
    position:       relative;
    flex:           1 1 0;
    min-width:      0;
    display:        block;
    overflow:       hidden;
    /* У макеті напрямок згасання протилежний тому, що був тут раніше:
       фото розчиняється БІЛЯ тексту (лівий край) і лишається повністю
       видимим ближче до зовнішнього краю картки (правий), а не навпаки. */
    -webkit-mask-image:  linear-gradient(90deg,
                            transparent 0%,
                            rgba(255, 255, 255, .35) 35.6%,
                            #fff 100%);
    mask-image:          linear-gradient(90deg,
                            transparent 0%,
                            rgba(255, 255, 255, .35) 35.6%,
                            #fff 100%);
}

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

/* ── Перемикач «Показати ще» ────────────────────────────────────────────── */
.industries__toggle {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            16px;
}

.btn--outline {
    display:                  inline-flex;
    align-items:              center;
    justify-content:          center;
    gap:                      10px;
    height:                   56px;
    padding:                  14px 26px;
    border:                   1px solid #008eee;
    border-radius:            12px;
    background:               rgba(5, 8, 20, .3);
    box-shadow:               0 7px 6.5px rgba(0, 0, 0, .1);
    cursor:                   pointer;
    font-family:              inherit;
    font-size:                14px;
    font-weight:              500;
    letter-spacing:           .28px;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                    transparent;
    -webkit-text-fill-color: transparent;
}

.btn--outline .icon {
    flex:       none;
    transform:  rotate(90deg);
    transition: transform var(--transition);
    /* Іконка успадковує градієнт через currentColor неможливо (це не
       текст), тому просто трохи світліша, ніж лінія рамки. */
    color:      #acd5ff;
}

.industries__grid.is-open ~ .industries__toggle .btn--outline .icon { transform: rotate(-90deg); }

.industries__toggle-label[hidden] { display: none; }

.industries__counter {
    margin:         0;
    font-size:      14px;
    font-weight:    600;
    letter-spacing: 4px;
    text-align:     center;
    /* Той самий випадок, що й .footer-label: #697591 на темному тлі дає
       3.63:1 замість потрібних 4.5:1. */
    color:          var(--color-muted);
}

.industries__counter span { color: #fff; }

@media (max-width: 1024px) {
    .industries { padding: 90px 0; }

    .industries__title { font-size: 36px; line-height: 42px; }

    .industry-card { flex-direction: column; }

    .industry-card__body { width: 100%; max-width: none; }

    /* Горизонтальна маска (зліва направо) розрахована на десктоп, де фото
       стоїть поруч із текстом і згасає праворуч. У колонковому layout'і
       фото на всю ширину — та сама маска обрізала б праву третину до
       прозорості, і воно виглядало б ніби зникає. На планшеті/мобільному
       фото просто лишається повноцінним, без згасання, і йде першим
       (над текстом) — order без зміни порядку в розмітці. */
    .industry-card__photo {
        /* flex:1 1 0 з базового правила в колонковому layout означає
           flex-basis:0 по головній осі (тобто по висоті) — це перебиває
           явний height нижче. flex:none повертає розмір під контроль
           звичайного height. */
        flex:                none;
        order:               -1;
        width:               100%;
        height:              260px;
        -webkit-mask-image:  none;
        mask-image:          none;
    }

    .industries__left-decor { width: 60%; }
}

@media (max-width: 768px) {
    .industries { padding: 56px 0; }

    .industries__wrp { gap: 40px; }
    .industries__head { gap: 16px; }

    .industries__title { font-size: 26px; line-height: 32px; }

    .industry-card__body { padding: 24px; gap: 16px; }

    .industry-card__photo { height: 200px; }

    .industries__glow { opacity: .5; }
    .industries__left-decor { opacity: .25; }
}

/* ── 08 · Our Team ──────────────────────────────────────────────────────── */
.team {
    position: relative;
    overflow: hidden;
    padding:  120px 0;
}

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

.team__light {
    position:          absolute;
    top:               40%;
    background-repeat: no-repeat;
    background-size:   100% 100%;
}

.team__light--left {
    left:         -18%;
    width:        79%;
    max-width:    1516px;
    aspect-ratio: 1516.239 / 1513.22;
    background-image: url('../../img/team-light-left.svg');
}

.team__light--right {
    left:         49%;
    width:        92%;
    max-width:    1764px;
    aspect-ratio: 1763.784 / 1443.4;
    background-image: url('../../img/team-light-right.svg');
}

.team__lines {
    position:         absolute;
    left:             0;
    right:            0;
    bottom:           0;
    width:            100%;
    aspect-ratio:     1920 / 376;
    background-image: url('../../img/team-lines-bg.svg');
    background-size:  100% 100%;
    background-position: center;
}

.team__head {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            22px;
    max-width:      960px;
    margin:         0 auto 60px;
    text-align:     center;
}

/* Акцент тут переноситься на два рядки, тому градієнт живе на БЛОЦІ
   заголовка, а не на .is-accent — так само, як у .hero__title.
   Для інлайнового елемента браузер малює фон по сумарній ширині всіх
   фрагментів, і другий рядок стартував би з середини градієнта (блідим).
   Figma кладе градієнт на бокс текстового шару, і кожен рядок бере свій
   відрізок за своїм x. Заголовок вирівняний по центру, тож короткий рядок
   бере середину градієнта — саме як у макеті.
   Наслідок: колір кожної частини задається через -webkit-text-fill-color. */
.team__title {
    margin:         0;
    font-size:      48px;
    font-weight:    300;
    line-height:    52px;
    letter-spacing: -1.5px;
    color:          var(--color-text-light);
    -webkit-text-fill-color: var(--color-text-light);
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
}

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

.team__track-wrap {
    position: relative;
    z-index:  1;
    overflow: hidden;
}

.team__track { list-style: none; }

.team-card {
    /* !important: Slick сам ставить .slick-initialized .slick-slide{display:block}
       — два класи проти нашого одного, тож без !important flex/gap мовчки
       не застосовується і картка просто "звалюється" в блочний потік. */
    display:           flex !important;
    flex-direction:    column;
    gap:               16px;
    width:             347px;
    margin-right:      30px;
    overflow:          hidden;
    border:            1px solid #018eee;
    border-radius:     var(--radius-card);
    background-image:  linear-gradient(150.31deg, rgba(30, 50, 97, .8) 0%, rgba(20, 36, 73, .94) 78.125%);
    box-shadow:        var(--shadow);
    transition:         border-color var(--transition), box-shadow var(--transition), background-image var(--transition);
}

/* На hover фон навпаки трохи темнішає (не світлішає) — так у макеті:
   рамка й синє світіння стають виразнішими, а тьмяніший фон додає
   контрасту фотографії й тексту на ній. */
.team-card:hover {
    border-color:      #0299ff;
    box-shadow:         0 22px 74px -26px rgba(45, 140, 255, .95);
    background-image:  linear-gradient(150.31deg, rgba(19, 29, 52, .72) 0%, rgba(10, 17, 33, .62) 78.125%);
}

.team-card__photo {
    position:       relative;
    flex:           none;
    height:         291px;
    border-radius:  var(--radius-card) var(--radius-card) 0 0;
    overflow:       hidden;
    background:     radial-gradient(ellipse at center, #001d3e 0%, #00132b 50%, #001017 100%);
}

.team-card__photo img {
    display:         block;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: top center;
}

.team-card__badge {
    position:       absolute;
    left:           16px;
    top:            16px;
    padding:        2px 10px;
    font-size:      14px;
    line-height:    1.6;
    color:          var(--color-sky);
    background:     rgba(119, 198, 255, .1);
    border-radius:  var(--radius-pill);
}

.team-card__body {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    padding:        16px 24px 30px;
}

.team-card__top {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
}

.team-card__name {
    margin:      0;
    font-size:   20px;
    font-weight: 800;
    line-height: 1.6;
    color:       #fff;
}

.team-card__linkedin {
    display:         flex;
    flex:            none;
    align-items:     center;
    justify-content: center;
    width:           48px;
    height:          42px;
    background:      #0e2652;
    border:          1px solid var(--color-border-blue);
    border-radius:   10px;
    color:           var(--color-text-light);
    transition:      border-color var(--transition), background var(--transition);
}

.team-card__linkedin:hover,
.team-card__linkedin:focus-visible {
    border-color: var(--color-border-hover);
    background:   #123064;
}

.team-card__bio {
    margin:      0;
    font-size:   14px;
    line-height: 1.4;
    color:       var(--color-text-light);
}

.team-card__divider {
    display:    block;
    width:      100%;
    height:     1px;
    background: var(--gradient-line);
    opacity:    .4;
}

.team-card__email {
    display:     flex;
    align-items: center;
    gap:         10px;
    font-size:   14px;
    line-height: 1.4;
    color:       var(--color-text-light);
    transition:  color var(--transition);
}

.team-card__email .icon { flex: none; color: var(--color-sky); }

.team-card__email:hover,
.team-card__email:focus-visible { color: var(--color-sky); }

.team__fade {
    position:       absolute;
    top:            0;
    bottom:         0;
    width:          160px;
    pointer-events: none;
    z-index:        2;
}

.team__fade--left {
    left:       0;
    background: linear-gradient(90deg, #031d47 0%, rgba(3, 29, 71, 0) 100%);
}

.team__fade--right {
    right:      0;
    background: linear-gradient(270deg, #031d47 0%, rgba(3, 29, 71, 0) 100%);
}

.team__arrows {
    position:        absolute;
    z-index:         3;
    left:            50%;
    top:             145.5px;
    width:           100%;
    max-width:       var(--container-width);
    padding:         0 var(--container-padding);
    display:         flex;
    justify-content: space-between;
    transform:       translate(-50%, -50%);
    pointer-events:  none;
}

.team__arrow {
    position:        relative;
    width:           44px;
    height:          44px;
    flex:            none;
    color:           #fff;
    background:      rgba(5, 8, 20, .3);
    border:          1px solid var(--color-primary);
    border-radius:   var(--radius-pill);
    cursor:          pointer;
    pointer-events:  auto;
    transition:       border-color var(--transition), background var(--transition);
}

.team__arrow:hover,
.team__arrow:focus-visible {
    border-color: var(--color-primary-light);
    background:   rgba(5, 8, 20, .6);
}

/* Точний inset зі "Slider-arrow" у Figma — іконка НЕ строго по центру
   кнопки, а трохи зсунута в бік вістря (45.84% зліва замість 50%). Для
   prev дзеркалимо і форму (scaleX), і саму позицію (right замість left) —
   інакше вістря лишається зсунутим у "неправильний" бік. */
.team__arrow-icon {
    position: absolute;
    left:     45.84%;
    top:      33.33%;
    width:    16.66%;
    height:   33.34%;
}

.team__arrow--prev .team__arrow-icon {
    left:      auto;
    right:     45.84%;
    transform: scaleX(-1);
}

.team .slick-track {
    display:     flex;
    align-items: stretch;
}

.team .slick-list { overflow: hidden; }

.team .slick-slide { height: auto; }

@media (max-width: 1024px) {
    .team { padding: 90px 0; }

    .team__title { font-size: 36px; line-height: 42px; }

    .team-card { width: 300px; }

    .team-card__photo { height: 260px; }

    .team__arrows { top: 130px; }

    .team__fade { width: 90px; }
}

@media (max-width: 768px) {
    .team { padding: 56px 0; }

    .team__head { gap: 16px; margin-bottom: 40px; }

    .team__title { font-size: 26px; line-height: 32px; }

    .team-card { width: 260px; }

    .team-card__photo { height: 220px; }

    .team-card__body { padding: 16px 20px 24px; }

    .team__arrows { top: 110px; padding: 0 var(--container-padding); }

    .team__fade { width: 40px; }

    .team__light { opacity: .6; }
}

/* ── 09 · Testimonials ──────────────────────────────────────────────────── */
.testimonials {
    position: relative;
    overflow: hidden;
    padding:  120px 0;
}

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

.testimonials__glow {
    position:          absolute;
    left:              -37.29%;
    top:               -9%;
    width:             100.6%;
    max-width:         1932px;
    aspect-ratio:      1 / 1;
    background-image:  url('../../img/testimonials-glow.svg');
    background-repeat: no-repeat;
    background-size:   100% 100%;
    animation:         testimonials-glow-fade 16s ease-in-out infinite,
                        testimonials-glow-move 16s ease-in-out infinite,
                        testimonials-glow-scale 16s ease-in-out infinite;
}

.testimonials__glow-2 {
    position:          absolute;
    left:              6.28%;
    top:               -35.3%;
    width:             87.44%;
    max-width:         1678.91px;
    aspect-ratio:      1678.91 / 1235.08;
    background-image:  url('../../img/testimonials-glow-2.svg');
    background-repeat: no-repeat;
    background-size:   100% 100%;
    animation:         testimonials-lines-fade 16s ease-in-out infinite,
                        testimonials-lines-move 16s ease-in-out infinite,
                        testimonials-lines-scale 16s ease-in-out infinite;
}

@keyframes testimonials-glow-fade {
    0%   { opacity: .947; }
    12.5%  { opacity: .79; }
    25%  { opacity: .756; }
    37.5%  { opacity: .865; }
    50%  { opacity: 1; }
    87.5%  { opacity: 1; }
    100% { opacity: .947; }
}

@keyframes testimonials-glow-move {
    0%   { translate: 29.681px 125.09px; }
    12.5%  { translate: 117.732px 69.264px; }
    25%  { translate: 136.818px -27.137px; }
    37.5%  { translate: 75.757px -107.641px; }
    50%  { translate: -29.681px -125.09px; }
    62.5%  { translate: -117.732px -69.264px; }
    75%  { translate: -136.818px 27.137px; }
    87.5%  { translate: -75.757px 107.641px; }
    100% { translate: 29.681px 125.09px; }
}

@keyframes testimonials-glow-scale {
    0%   { scale: 1.114; }
    12.5%  { scale: 1.107; }
    25%  { scale: 1.037; }
    37.5%  { scale: .945; }
    50%  { scale: .886; }
    62.5%  { scale: .893; }
    75%  { scale: .963; }
    87.5%  { scale: 1.055; }
    100% { scale: 1.114; }
}

@keyframes testimonials-lines-fade {
    0%   { opacity: .874; }
    12.5%  { opacity: 1; }
    50%  { opacity: 1; }
    62.5%  { opacity: .936; }
    75%  { opacity: .784; }
    87.5%  { opacity: .758; }
    100% { opacity: .874; }
}

@keyframes testimonials-lines-move {
    0%   { translate: -62.953px 129.589px; }
    12.5%  { translate: 31.846px 145.05px; }
    25%  { translate: 107.99px 75.543px; }
    37.5%  { translate: 120.875px -38.216px; }
    50%  { translate: 62.953px -129.589px; }
    62.5%  { translate: -31.846px -145.05px; }
    75%  { translate: -107.99px -75.543px; }
    87.5%  { translate: -120.875px 38.216px; }
    100% { translate: -62.953px 129.589px; }
}

@keyframes testimonials-lines-scale {
    0%   { scale: .94; }
    12.5%  { scale: .884; }
    25%  { scale: .896; }
    37.5%  { scale: .968; }
    50%  { scale: 1.06; }
    62.5%  { scale: 1.116; }
    75%  { scale: 1.104; }
    87.5%  { scale: 1.032; }
    100% { scale: .94; }
}

@media (prefers-reduced-motion: reduce) {
    .testimonials__glow,
    .testimonials__glow-2 { animation: none; }
}

.testimonials__head {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            22px;
    max-width:      960px;
    margin:         0 auto 40px;
    text-align:     center;
}

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

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

.testimonials__title .is-white { color: #fff; }

.testimonials__track-wrap {
    position: relative;
    z-index:  1;
    overflow: hidden;
    padding:  20px 0;
    margin:   -20px 0;
}

.testimonials__track { list-style: none; }

.testimonial-card {
    position:           relative;
    z-index:            1;
    /* !important: Slick сам ставить .slick-initialized .slick-slide{display:block}
       — два класи проти нашого одного, тож без !important flex/gap мовчки
       не застосовується і вміст картки "звалюється" в блочний потік. */
    display:            flex !important;
    flex-direction:     column;
    gap:                20px;
    width:              988px;
    max-width:          calc(100vw - 40px);
    margin:             0 -160px;
    padding:            38px;
    border:             1px solid #018eee;
    border-radius:      var(--radius-card);
    background-image:   linear-gradient(174.39deg, rgba(30, 50, 97, .8) 0%, rgba(20, 36, 73, .94) 78.125%);
    box-shadow:         var(--shadow);
    opacity:            .4;
    transform:          scale(.896);
    transition:         opacity .4s ease, transform .4s ease,
                        border-color var(--transition), box-shadow var(--transition), background-image var(--transition);
}

/* У макеті на hover зовнішня обгортка картки замінює градієнт на суцільний
   темний фон і отримує власну (трохи іншу) синю рамку та світіння —
   у нас картка одношарова, тож зводимо це до одного набору змін. */
.testimonial-card:hover {
    border-color: #008eee;
    box-shadow:   0 22px 74px -26px rgba(45, 140, 255, .95);
}

/* Активна (центральна) картка лишається на градієнті — суцільний темний
   фон вмикаємо лише для приглушених сусідніх карток при hover. */
.testimonial-card:hover:not(.slick-center) {
    background-image: none;
    background-color: #1b1e28;
}

.testimonial-card.slick-center {
    z-index:   2;
    opacity:   1;
    transform: scale(1);
    /* Бічні картки лежать буквально позаду активної (той самий стек через
       від'ємний margin) — напівпрозорий градієнт (rgba з альфою .8/.94)
       давав їм просвічувати крізь активну картку. Тут той самий градієнт,
       але повністю непрозорий. */
    background-image: linear-gradient(174.39deg, #1e3261 0%, #142449 78.125%);
}

.testimonial-card__quote { display: block; width: 44px; height: 41px; }
.testimonial-card__quote .icon { width: 100%; height: 100%; }

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

.testimonial-card__author {
    display:     flex;
    align-items: center;
    gap:         20px;
}

.testimonial-card__photo {
    position: relative;
    flex:     none;
    width:    52px;
    height:   52px;
}

.testimonial-card__ring {
    position: absolute;
    inset:    0;
}

.testimonial-card__ring .icon { width: 100%; height: 100%; }

.testimonial-card__photo img {
    position:      absolute;
    inset:         2px;
    width:         calc(100% - 4px);
    height:        calc(100% - 4px);
    border-radius: 50%;
    object-fit:    cover;
}

.testimonial-card__meta {
    display:        flex;
    flex-direction: column;
    gap:            5px;
}

.testimonial-card__name {
    font-size:   16px;
    font-weight: 600;
    line-height: 1.2;
    color:       var(--color-text);
}

.testimonial-card__role {
    font-size:      14px;
    line-height:    22px;
    letter-spacing: -.07px;
    color:          var(--color-sky);
}

.testimonials__arrows {
    position:        absolute;
    z-index:         3;
    left:            50%;
    top:             50%;
    width:           100%;
    max-width:       var(--container-width);
    padding:         0 var(--container-padding);
    display:         flex;
    justify-content: space-between;
    transform:       translate(-50%, -50%);
    pointer-events:  none;
}

.testimonials__arrow {
    position:        relative;
    display:         inline-flex;
    width:           44px;
    height:          44px;
    flex:            none;
    color:           #fff;
    background:      rgba(5, 8, 20, .3);
    border:          1px solid var(--color-primary);
    border-radius:   var(--radius-pill);
    cursor:          pointer;
    pointer-events:  auto;
    transition:       border-color var(--transition), background var(--transition);
}

.testimonials__arrow:hover,
.testimonials__arrow:focus-visible {
    border-color: var(--color-primary-light);
    background:   rgba(5, 8, 20, .6);
}

.testimonials__arrow-icon {
    position: absolute;
    left:     45.84%;
    top:      33.33%;
    width:    16.66%;
    height:   33.34%;
}

.testimonials__arrow--prev .testimonials__arrow-icon {
    left:      auto;
    right:     45.84%;
    transform: scaleX(-1);
}

.testimonials__dots {
    display:         flex;
    justify-content: center;
    gap:             8px;
    margin-top:      40px;
}

.testimonials__dots .slick-dots {
    display: flex;
    gap:     8px;
    padding: 0;
    margin:  0;
    list-style: none;
}

.testimonials__dots .slick-dots li { display: flex; }

.testimonials__dots .slick-dots button {
    width:          100px;
    height:         4px;
    padding:        0;
    border:         0;
    border-radius:  var(--radius-pill);
    background:     #0d244b;
    color:          transparent;
    font-size:      0;
    cursor:         pointer;
}

.testimonials__dots .slick-dots li.slick-active button { background: var(--color-primary); }

@media (max-width: 1024px) {
    .testimonials { padding: 90px 0; }

    .testimonials__title { font-size: 36px; line-height: 42px; }

    .testimonial-card { width: 700px; margin: 0 -110px; padding: 30px; }

    .testimonials__dots .slick-dots button { width: 60px; }
}

@media (max-width: 768px) {
    .testimonials { padding: 56px 0; }

    .testimonials__head { gap: 16px; margin-bottom: 32px; }

    .testimonials__title { font-size: 26px; line-height: 32px; }

    .testimonial-card { width: 100%; max-width: calc(100vw - 32px); margin: 0 -20px; padding: 24px; gap: 16px; }

    .testimonial-card__text { font-size: 16px; }

    .testimonials__arrows { padding: 0 var(--container-padding); }

    .testimonials__dots .slick-dots button { width: 40px; }
}

/* ── 04 · Proven Results ────────────────────────────────────────────────── */
.proven-results {
    position: relative;
    overflow: hidden;
    padding:  120px 0;
}

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

.proven-results__city {
    position:            absolute;
    left:                59.375%;
    top:                 0;
    width:               40.625%;
    aspect-ratio:        1 / 1;
    opacity:             .4;
    background-image:    url('../../img/proven-results-city.webp');
    background-size:     cover;
    background-position: center;
    -webkit-mask-image:  url('../../img/proven-results-mask.svg');
    mask-image:          url('../../img/proven-results-mask.svg');
    -webkit-mask-size:   100% 100%;
    mask-size:           100% 100%;
}

.proven-results__glow {
    position:          absolute;
    background-repeat: no-repeat;
    background-size:   100% 100%;
    animation-duration: 16s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.proven-results__glow--top {
    left:              -16.35%;
    top:               -40.19%;
    width:             80.16%;
    max-width:         1539px;
    aspect-ratio:      1 / 1;
    background-image:  url('../../img/proven-results-glow-top.svg');
    animation-name:    proven-results-glow-top-fade, proven-results-glow-top-move, proven-results-glow-top-scale;
}

.proven-results__glow--bottom {
    left:              8.54%;
    top:               66.4%;
    width:             82.9%;
    max-width:         1592px;
    aspect-ratio:      1592 / 960;
    background-image:  url('../../img/proven-results-glow-bottom.svg');
    animation-name:    proven-results-glow-bottom-fade, proven-results-glow-bottom-move, proven-results-glow-bottom-scale;
}

@keyframes proven-results-glow-top-fade {
    0%   { opacity: .752; }
    12.5%  { opacity: .847; }
    25%  { opacity: 1; }
    62.5%  { opacity: 1; }
    75%  { opacity: .969; }
    87.5%  { opacity: .802; }
    100% { opacity: .752; }
}

@keyframes proven-results-glow-top-move {
    0%   { translate: 128.975px 17.547px; }
    12.5%  { translate: 79.678px 110.622px; }
    25%  { translate: -16.293px 138.896px; }
    37.5%  { translate: -102.72px 85.807px; }
    50%  { translate: -128.975px -17.547px; }
    62.5%  { translate: -79.678px -110.622px; }
    75%  { translate: 16.293px -138.896px; }
    87.5%  { translate: 102.72px -85.807px; }
    100% { translate: 128.975px 17.547px; }
}

@keyframes proven-results-glow-top-scale {
    0%   { scale: 1.047; }
    12.5%  { scale: .955; }
    25%  { scale: .889; }
    37.5%  { scale: .889; }
    50%  { scale: .953; }
    62.5%  { scale: 1.045; }
    75%  { scale: 1.111; }
    87.5%  { scale: 1.111; }
    100% { scale: 1.047; }
}

@keyframes proven-results-glow-bottom-fade {
    0%   { opacity: 1; }
    12.5%  { opacity: .98; }
    25%  { opacity: .809; }
    37.5%  { opacity: .751; }
    50%  { opacity: .838; }
    62.5%  { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes proven-results-glow-bottom-move {
    0%   { translate: 97.058px 67.095px; }
    12.5%  { translate: -12.239px 87.707px; }
    25%  { translate: -114.366px 56.941px; }
    37.5%  { translate: -149.5px -7.18px; }
    50%  { translate: -97.058px -67.095px; }
    62.5%  { translate: 12.239px -87.707px; }
    75%  { translate: 114.366px -56.941px; }
    87.5%  { translate: 149.5px 7.18px; }
    100% { translate: 97.058px 67.095px; }
}

@keyframes proven-results-glow-bottom-scale {
    0%   { scale: 1.04; }
    12.5%  { scale: 1.108; }
    25%  { scale: 1.113; }
    37.5%  { scale: 1.051; }
    50%  { scale: .96; }
    62.5%  { scale: .892; }
    75%  { scale: .887; }
    87.5%  { scale: .949; }
    100% { scale: 1.04; }
}

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

.proven-results__wrp {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    gap:            40px;
}

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

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

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

.proven-results__grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows:    repeat(2, 1fr);
    grid-auto-flow:        column;
    gap:                   22px;
}

.proven-results__card {
    display:                  flex;
    flex-direction:           column;
    justify-content:          center;
    gap:                      16px;
    height:                   100%;
    padding:                  38px;
    border:                   1px solid rgba(5, 165, 255, .4);
    border-radius:            var(--radius-card);
    background-image:         linear-gradient(174.5deg, rgba(20, 51, 99, .8) 0%, rgba(13, 37, 78, .8) 78.125%);
    box-shadow:               0 20px 60px -20px #010e22;
    backdrop-filter:          blur(3.5px);
    -webkit-backdrop-filter:  blur(3.5px);
}

.proven-results__stat {
    margin:         0;
    font-size:      34px;
    font-weight:    600;
    line-height:    38px;
    letter-spacing: -1.2px;
    color:          var(--color-secondary);
}

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

@media (max-width: 1024px) {
    .proven-results { padding: 90px 0; }

    .proven-results__title { font-size: 36px; line-height: 42px; }

    .proven-results__card { padding: 30px; }
}

@media (max-width: 768px) {
    .proven-results { padding: 56px 0; }

    .proven-results__wrp { gap: 32px; }

    .proven-results__head { gap: 16px; }

    .proven-results__title { font-size: 26px; line-height: 32px; }

    .proven-results__grid {
        grid-template-columns: 1fr;
        grid-template-rows:    auto;
        grid-auto-flow:        row;
    }

    .proven-results__card { padding: 24px; }

    .proven-results__stat { font-size: 28px; line-height: 32px; }
}

/* ── 10 · Get Your Estimate ─────────────────────────────────────────────── */
.get-estimate { padding: 120px 0 10px; }

.get-estimate__card {
    position:          relative;
    z-index:            0;
    overflow:           hidden;
    display:            flex;
    flex-direction:     column;
    align-items:        center;
    gap:                32px;
    padding:            80px 140px;
    border:             1px solid #2d79e8;
    border-radius:      32px;
    background-image:   linear-gradient(180deg, #193669 0%, #05193d 100%);
    box-shadow:         0 34px 54px rgba(0, 0, 0, .25);
}

.get-estimate__glow {
    position:          absolute;
    z-index:            -1;
    left:              -30%;
    top:               -501px;
    width:             78.3%;
    max-width:         1034px;
    aspect-ratio:      1 / 1;
    background-image:  url('../../img/get-estimate-glow.svg');
    background-repeat: no-repeat;
    background-size:   100% 100%;
}

.get-estimate__head {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            22px;
    max-width:      1038px;
    text-align:     center;
}

.get-estimate__title {
    margin:         0;
    font-size:      48px;
    font-weight:    600;
    line-height:    52px;
    letter-spacing: -1.5px;
    color:          #fff;
}

.get-estimate__title .is-accent {
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                   transparent;
    -webkit-text-fill-color: transparent;
}

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

.get-estimate__btn {
    height:  54px;
    padding: 14px 22px;
    border-radius: 12px;
}

@media (max-width: 1024px) {
    .get-estimate { padding: 90px 0 10px; }

    .get-estimate__card { padding: 56px 40px; }

    .get-estimate__title { font-size: 36px; line-height: 42px; }

    .get-estimate__glow { top: -300px; }
}

@media (max-width: 768px) {
    .get-estimate { padding: 56px 0 10px; }

    .get-estimate__card { padding: 40px 24px; gap: 24px; border-radius: 24px; }

    .get-estimate__head { gap: 16px; }

    .get-estimate__title { font-size: 26px; line-height: 32px; }

    .get-estimate__text { font-size: 16px; }

    .get-estimate__glow { top: -200px; width: 120%; max-width: none; }
}

/* ── 11 · FAQ ───────────────────────────────────────────────────────────── */
.faq {
    position: relative;
    overflow: hidden;
    padding:  100px 0;
}

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

.faq__city {
    position:            absolute;
    left:                0;
    top:                 52.6%;
    width:               100%;
    height:              57.07%;
    opacity:             .5;
    background-image:    url('../../img/faq-city.webp');
    background-size:     cover;
    background-position: center top;
    -webkit-mask-image:  url('../../img/faq-mask.svg');
    mask-image:          url('../../img/faq-mask.svg');
    -webkit-mask-size:   100% 100%;
    mask-size:           100% 100%;
}

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

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

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

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

/* .faq__list і .faq-item* — спільний блок, css/main.css (той самий
   акордеон, що на koordynacziya-system). Тут лишається тільки те, що
   специфічне для Головної: відступи секції й фонове фото. */

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

    .faq__title { font-size: 36px; line-height: 42px; }
}

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

    .faq__wrp { gap: 32px; }

    .faq__head { gap: 16px; }

    .faq__title { font-size: 26px; line-height: 32px; }

    .faq-item__toggle { padding: 18px; }

    .faq-item__question { font-size: 16px; }

    .faq-item__answer { padding: 0 18px 18px; font-size: 15px; }
}

/* Home hero: approved individual proof cards and responsive artwork. */
body .site-main .hero .hero__proof {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    max-width: 1100px;
    margin-top: 40px;
}
body .site-main .hero .hero__proof :is(.hero__stats, .hero__chips) {
    display: contents !important;
    margin: 0 !important;
    padding: 0 !important;
}
body .site-main .hero .hero__proof :is(.stat, .hero__chip) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 112px !important;
    gap: 10px;
}
body .site-main .hero .stat__value {
    font-size: 25px;
    font-weight: 400;
    color: var(--color-text-light);
    -webkit-text-fill-color: var(--color-text-light);
    background: none;
}
body .site-main .hero .stat__label {
    max-width: none;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-soft);
}
body .site-main .hero .hero__chip { font-size: 20px; font-weight: 400; }
body .site-main .hero .hero__chip .icon { display: none; }
body .site-main .hero__visual {
    width: min(58%, 1100px);
    right: 0;
    min-height: 0;
    height: auto;
    object-fit: contain;
    object-position: right top;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%);
    mask-image: linear-gradient(90deg, transparent, #000 34%);
}
@media (max-width: 1024px) {
    body .site-main .hero .hero__proof { max-width: none; }
}
@media (max-width: 768px) {
    body .site-main .hero .hero__proof { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; }
    body .site-main .hero .hero__proof :is(.stat, .hero__chip) { min-height: 96px !important; }
    body .site-main .hero__visual {
        position: static;
        width: min(100%, 520px);
        max-width: 520px !important;
        height: auto !important;
        min-height: 0;
        margin: 20px 0 -8px auto;
        -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%);
        mask-image: linear-gradient(180deg, transparent, #000 18%);
    }
}

/* Home proof: keep the approved cards in a single swipeable row on phones. */
@media (max-width: 768px) {
    body .site-main .hero .hero__proof {
        grid-template-columns: repeat(4, minmax(168px, 1fr));
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity;
        padding-bottom: 10px;
        scrollbar-width: thin;
    }
    body .site-main .hero .hero__proof :is(.stat, .hero__chip) {
        scroll-snap-align: start;
    }
}