/* ══════════════════════════════════════════════════════════════════════════
   Партнери та клієнти — /partnery-ta-kliyenty/ (templates/partnery-ta-kliyenty.php)

   Портовано з `partners-clients-page-template/partners-clients-page.css`
   замовника. Той файл — шар на шарі override-ів (одні й ті самі блоки
   перевизначаються до чотирьох разів, частина через !important); сюди
   перенесено ФІНАЛЬНИЙ стан каскаду, звірений вимірюванням у браузері,
   а не кожне проміжне правило.

   ЩО НЕ ПЕРЕНОСИЛОСЬ (уже є спільним):
     .trust-strip / .logo-marquee — це секція global/clients (.clients* у
       css/main.css + js/clients.js): той самий заголовок, ті самі стрілки.
     .faq-list / .faq-item шаблону — спільний акордеон .faq__list / .faq-item*.
     .container, .section-eyebrow / .section-dot, .breadcrumbs*,
     .page-section → .has-line-bottom.

   ПЕРЕЙМЕНУВАННЯ під конвенцію теми (префікс partners-):
     collaboration*       → .partners-collab__*
     strategic / partner-brand → .partners-strategic__*
     clients / clients-grid    → .partners-clients__* (.clients зайнятий
                                  спільною стрічкою логотипів)
     why-us / why-grid / why-card-top / why-icon → .partners-why__*
     consultation__banner → .service-cta* (як на /pro-nas/)

   01 · Оболонка, типографіка, кнопки
   02 · Хіро
   03 · Наш підхід до співпраці
   04 · Ключові партнери
   05 · Сітка клієнтів
   06 · Чому Ziggurat
   07 · CTA
   08 · FAQ
   09 · Адаптив 1024 / 768 (+ проміжні там, де цього вимагає сітка)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 01 · Оболонка ──────────────────────────────────────────────────────── */
.partners-page {
    overflow: clip;
    background:
        radial-gradient(circle at 12% 9%, rgba(0, 152, 240, .1), transparent 26%),
        radial-gradient(circle at 92% 48%, rgba(76, 141, 255, .07), transparent 30%),
        var(--color-bg);
}

.partners-hero,
.partners-collab,
.partners-strategic,
.partners-clients,
.partners-why { position: relative; }

.partners-collab,
.partners-strategic,
.partners-clients,
.partners-why { padding: 104px 0; }

/* Базова типографіка — через :where(), тобто зі специфічністю голого тега.
   На сторінці стоять СПІЛЬНІ блоки (стрічка global/clients, FAQ-акордеон), і
   звичайний .partners-page h2 (0,1,1) перебивав їхні однокласові правила:
   заголовок стрічки .clients__title ставав 48px замість 14px. */
:where(.partners-page) h1,
:where(.partners-page) h2,
:where(.partners-page) h3 {
    margin: 0;
    color:  var(--color-text);
}

:where(.partners-page) h2 {
    max-width:      1050px;
    font-size:      clamp(28px, 4vw, 48px);
    font-weight:    300;
    line-height:    1.12;
    letter-spacing: -1.5px;
}

/* Акцент у h2 — легка база (300) + градієнтний фрагмент 600, як на решті
   сторінок. У шаблоні замовника градієнт тягнувся з --gradient-heading,
   але в темі цей токен інший (фіолетовий); збіг із рефом дає --gradient-accent. */
.partners-page h2 .is-accent {
    display:                 inline-block;
    font-weight:             600;
    letter-spacing:          -1px;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                   transparent;
    -webkit-text-fill-color: transparent;
}

:where(.partners-page) p {
    margin:      0;
    color:       var(--color-text-soft);
    font-size:   16px;
    line-height: 1.7;
}

/* ── Кнопки (локально, як на /poslugy/, /galuzi/, /pro-nas/, /blog/) ────── */
.btn {
    position:        relative;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    box-sizing:      border-box;
    cursor:          pointer;
    text-decoration: none;
}

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

.btn--lg {
    min-width:     0;
    min-height:    56px;
    padding:       16px 26px;
    border-radius: 10px;
}

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

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

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

.partners-page .btn__label {
    min-width:     0;
    line-height:   1.45;
    overflow-wrap: break-word;
}

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

.partners-page a:focus-visible {
    outline:        2px solid #b9e6ff;
    outline-offset: 4px;
}

/* ── 02 · Хіро ──────────────────────────────────────────────────────────── */
.partners-hero {
    display:     flex;
    /* По верху, а не по центру: інакше відстань від крихт до надзаголовка
       залежала б від кількості тексту нижче й стрибала між сторінками. */
    align-items: flex-start;
    min-height:  760px;
    padding:     72px 0 104px;
    background:  linear-gradient(120deg, #031c45 10%, #041a3e 55%, #020e25 100%);
}

/* Фото глобуса — фоном 1217px, зсунуте праворуч від центру. Маска гасить
   краї кадру (горизонталь × вертикаль), а два backdrop-шари нижче
   розмивають ліву частину під текстом і самі краї фото. Розмір маски
   рівно дорівнює кадру (1217 × 1217·927/1697), тому всі три шари
   прив'язані до однієї геометрії. */
.partners-hero__image {
    position:   absolute;
    inset:      0;
    background: calc(50% + 200px) calc(50% - 40px) / 1217px auto no-repeat;
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .1) 24px, rgba(0, 0, 0, .5) 60px, rgba(0, 0, 0, .9) 96px, #000 120px, #000 calc(100% - 120px), rgba(0, 0, 0, .9) calc(100% - 96px), rgba(0, 0, 0, .5) calc(100% - 60px), rgba(0, 0, 0, .1) calc(100% - 24px), transparent 100%),
        linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .1) 18px, rgba(0, 0, 0, .5) 45px, rgba(0, 0, 0, .9) 72px, #000 90px, #000 calc(100% - 90px), rgba(0, 0, 0, .9) calc(100% - 72px), rgba(0, 0, 0, .5) calc(100% - 45px), rgba(0, 0, 0, .1) calc(100% - 18px), transparent 100%);
    mask-image:
        linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .1) 24px, rgba(0, 0, 0, .5) 60px, rgba(0, 0, 0, .9) 96px, #000 120px, #000 calc(100% - 120px), rgba(0, 0, 0, .9) calc(100% - 96px), rgba(0, 0, 0, .5) calc(100% - 60px), rgba(0, 0, 0, .1) calc(100% - 24px), transparent 100%),
        linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .1) 18px, rgba(0, 0, 0, .5) 45px, rgba(0, 0, 0, .9) 72px, #000 90px, #000 calc(100% - 90px), rgba(0, 0, 0, .9) calc(100% - 72px), rgba(0, 0, 0, .5) calc(100% - 45px), rgba(0, 0, 0, .1) calc(100% - 18px), transparent 100%);
    -webkit-mask-size:      1217px 664.796px;
    mask-size:              1217px 664.796px;
    -webkit-mask-position:  calc(50% + 200px) calc(50% - 40px);
    mask-position:          calc(50% + 200px) calc(50% - 40px);
    -webkit-mask-repeat:    no-repeat;
    mask-repeat:            no-repeat;
    -webkit-mask-composite: source-in;
    mask-composite:         intersect;
}

.partners-hero__image::before {
    content:        "";
    position:       absolute;
    inset:          0;
    pointer-events: none;
    background: linear-gradient(90deg, #031c45 0%, rgba(3, 28, 69, .96) 38%, rgba(3, 28, 69, .75) 50%, transparent 68%);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter:         blur(24px);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 68%);
    mask-image:         linear-gradient(90deg, #000 0%, #000 42%, transparent 68%);
}

.partners-hero__image::after {
    content:        "";
    position:       absolute;
    top:            calc(50% - 40px - 332.398px);
    left:           calc(50% + 200px - 608.5px);
    width:          1217px;
    height:         664.796px;
    pointer-events: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter:         blur(8px);
    -webkit-mask-image:
        linear-gradient(90deg, #000, transparent 110px, transparent calc(100% - 110px), #000),
        linear-gradient(180deg, #000, transparent 80px, transparent calc(100% - 80px), #000);
    mask-image:
        linear-gradient(90deg, #000, transparent 110px, transparent calc(100% - 110px), #000),
        linear-gradient(180deg, #000, transparent 80px, transparent calc(100% - 80px), #000);
    -webkit-mask-composite: source-over;
    mask-composite:         add;
}

.partners-hero__layout {
    position: relative;
    z-index:  1;
    width:    100%;
}

.partners-hero__content {
    max-width:   900px;
    /* Верхній відступ тепер тримає смуга під крихти (css/main.css). */
    padding:     0 0 45px;
    text-shadow: 0 4px 28px rgba(0, 4, 15, .86);
}


/* Градієнт на БЛОЦІ, а не на .is-accent — прийом .coord-hero__title і
   .about-hero__title: акцент тут переноситься на власний рядок, і
   інлайновий градієнт розбився б по фрагментах. База — через
   -webkit-text-fill-color (фікс кириличних ї/й при background-clip:text). */
.partners-hero__title {
    max-width:               850px;
    margin-bottom:           26px;
    font-size:               clamp(40px, 3vw, var(--fs-h1));
    font-weight:             300;
    line-height:             1.12;
    letter-spacing:          var(--ls-h1);
    text-wrap:               balance;
    text-shadow:             none;
    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;
}

/* inline-block — як у рефі: акцент не рветься посередині («у сфері BIM-» /
   «координації…»), а переходить на новий рядок цілим фрагментом. */
.partners-hero__title .is-accent {
    display:                 inline-block;
    font-weight:             600;
    letter-spacing:          -1px;
    color:                   transparent;
    -webkit-text-fill-color: transparent;
}

.partners-hero__lead {
    max-width:   720px;
    margin:      0 0 13px;
    font-size:   18.5px;
    line-height: 31px;
}

.partners-hero__support {
    max-width:     700px;
    margin-bottom: 30px;
    color:         #dce8ff;
    font-weight:   600;
}

.partners-hero__proof {
    position:        relative;
    top:             30px;
    display:         grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:             10px;
    box-sizing:      border-box;
    width:           calc(100% - 30px);
    max-width:       870px;
    margin:          58px 0 0;
    padding:         7.5px 16px;
    list-style:      none;
    border:          .5px solid rgba(190, 218, 255, .2);
    border-radius:   14px;
    background:      linear-gradient(135deg, rgba(55, 104, 164, .25), rgba(12, 45, 87, .34) 46%, rgba(3, 20, 50, .24));
    box-shadow:      inset 0 1px rgba(255, 255, 255, .1), 0 10px 32px rgba(0, 11, 35, .2);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter:         blur(14px);
}

.partners-hero__proof-item {
    display:      flex;
    align-items:  center;
    gap:          9px;
    min-width:    0;
    padding:      4px 15px;
    border-right: .5px solid rgba(120, 181, 255, .18);
    color:        #dbe8ff;
    font-size:    14px;
    line-height:  1.5;
}

.partners-hero__proof-item:last-child { border-right: 0; }

.partners-hero__proof-icon {
    flex:  0 0 auto;
    color: #74baff;
}

/* ── 03 · Наш підхід до співпраці ───────────────────────────────────────── */
.partners-collab {
    background: radial-gradient(ellipse at 50% 65%, rgba(0, 133, 245, .1), transparent 65%), var(--color-bg);
}

.partners-collab__head { max-width: 980px; }

.partners-collab__title { text-wrap: balance; }

.partners-collab__intro {
    display:               grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap:                   clamp(28px, 5vw, 70px);
    margin:                32px 0;
}

.partners-collab__principle {
    align-self:  center;
    padding:     8px 0 8px 24px;
    border-left: 2px solid var(--color-sky);
    color:       #d3e4ff;
}

.partners-collab__model {
    max-width: 1200px;
    margin:    0 auto;
}

.partners-collab__img {
    display:            block;
    width:              100%;
    height:             auto;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 48%, rgba(0, 0, 0, .85) 62%, transparent 76%);
    mask-image:         radial-gradient(ellipse at center, #000 48%, rgba(0, 0, 0, .85) 62%, transparent 76%);
}

.partners-collab__disciplines {
    position:              relative;
    display:               grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin:                12px 0 0;
    padding:               24px 0;
    list-style:            none;
}

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

.partners-collab__discipline {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             14px;
    padding:         12px;
    border-right:    1px solid rgba(119, 198, 255, .18);
    color:           #d6e5ff;
    font-size:       15px;
}

.partners-collab__discipline:last-child { border-right: 0; }

.partners-collab__discipline-num {
    font-size:      11px;
    letter-spacing: .12em;
    color:          var(--color-sky);
}

/* ── 04 · Ключові партнери ──────────────────────────────────────────────── */
/* Креслення свідомо виходить за межі секції на 160px угору й униз (height
   = 100% + 320px): так у рефі воно підкладається під сусідні секції, а
   маска розчиняє краї. Горизонтальний виліт гасить overflow: clip сторінки. */
.partners-strategic__bg {
    position:       absolute;
    z-index:        0;
    top:            50%;
    right:          0;
    left:           0;
    height:         max(971px, calc(100% + 320px));
    transform:      translateY(-50%);
    pointer-events: none;
    background:     url('../../img/partners-strategic-bg.webp') calc(50% + 420px) center / auto auto no-repeat;
    -webkit-mask-image:
        linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent),
        linear-gradient(180deg, transparent, #000 180px, #000 calc(100% - 180px), transparent);
    mask-image:
        linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent),
        linear-gradient(180deg, transparent, #000 180px, #000 calc(100% - 180px), transparent);
    -webkit-mask-size:      1619px 971px;
    mask-size:              1619px 971px;
    -webkit-mask-position:  calc(50% + 420px) center;
    mask-position:          calc(50% + 420px) center;
    -webkit-mask-repeat:    no-repeat;
    mask-repeat:            no-repeat;
    -webkit-mask-composite: source-in;
    mask-composite:         intersect;
}

.partners-strategic > .container,
.partners-clients > .container,
.partners-collab > .container {
    position: relative;
    z-index:  1;
}

.partners-strategic__head,
.partners-clients__head {
    max-width:     900px;
    margin-bottom: 50px;
}

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

.partners-strategic__card {
    position:      relative;
    min-width:     0;
    padding:       36px;
    border:        .5px solid rgba(131, 175, 234, .35);
    border-radius: 18px;
    background:    linear-gradient(90deg, #284172 0%, #192c58 50%, rgba(13, 30, 64, .7) 100%);
    box-shadow:    inset 0 1px 0 rgba(198, 219, 255, .12), 0 16px 42px rgba(0, 12, 35, .16);
}

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

.partners-strategic__name:not(.screen-reader-text) { margin-bottom: 26px; }

.partners-strategic__brand {
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-sizing:      border-box;
    width:           300px;
    max-width:       100%;
    height:          108px;
    margin-bottom:   26px;
    padding:         12px 16px;
    overflow:        hidden;
    border:          1px solid rgba(75, 163, 255, .65);
    border-radius:   10px;
    background:      var(--brand-bg, #101a43);
    box-shadow:      0 0 18px rgba(28, 130, 255, .24), 0 8px 24px rgba(0, 10, 35, .35), inset 0 1px 0 rgba(155, 204, 255, .15);
    transition:      box-shadow var(--transition), border-color var(--transition);
}

.partners-strategic__brand:hover {
    border-color: var(--color-sky);
    box-shadow:   0 0 28px rgba(28, 130, 255, .6), 0 8px 36px rgba(15, 100, 255, .35), inset 0 0 14px rgba(75, 163, 255, .12);
}

.partners-strategic__logo {
    display:    block;
    width:      auto;
    max-width:  100%;
    height:     auto;
    max-height: 80px;
    object-fit: contain;
}

.partners-strategic__link {
    margin-top:  24px;
    min-height:  48px;
    padding:     13px 24px;
}

/* ── 05 · Сітка клієнтів ────────────────────────────────────────────────── */
.partners-clients__head {
    display:        flex;
    flex-direction: column;
}

.partners-clients__text { max-width: 700px; }

.partners-clients__grid {
    display:               grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap:                   12px;
    list-style:            none;
}

.partners-clients__item {
    position:      relative;
    display:       grid;
    place-items:   center;
    min-width:     0;
    min-height:    140px;
    padding:       24px 16px 16px;
    overflow:      hidden;
    border:        .5px solid rgba(79, 185, 255, .32);
    border-radius: 12px;
    background:    var(--surface-card);
}

.partners-clients__logo {
    display:       block;
    box-sizing:    border-box;
    width:         100%;
    max-width:     100%;
    height:        92px;
    padding:       8px;
    border-radius: 5px;
    background:    #fff;
    object-fit:    contain;
}

.partners-clients__num {
    position:       absolute;
    top:            10px;
    left:           12px;
    color:          #74baff;
    font-size:      10px;
    letter-spacing: .15em;
}

.partners-clients__btn {
    display: flex;
    width:   max-content;
    margin:  42px auto 0;
}

/* ── 06 · Чому Ziggurat ─────────────────────────────────────────────────── */
.partners-why {
    isolation: isolate;
    overflow:  hidden;
    background:
        radial-gradient(ellipse at 80% 20%, rgba(11, 91, 174, .18), transparent 58%),
        linear-gradient(140deg, #021a3b, #031b40 55%, #02142f);
}

.partners-why__grid-bg,
.partners-why__floor {
    position:       absolute;
    z-index:        -1;
    pointer-events: none;
}

.partners-why__grid-bg {
    inset:            0;
    background-image: linear-gradient(rgba(35, 139, 221, .1) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(35, 139, 221, .1) 1px, transparent 1px);
    background-size:  90px 90px;
    transform:        skewY(-12deg) scale(1.2);
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 35%, transparent 65%, #000);
    mask-image:         linear-gradient(90deg, #000, transparent 35%, transparent 65%, #000);
}

.partners-why__floor {
    bottom:           -95px;
    left:             -10%;
    width:            120%;
    height:           220px;
    background-image: linear-gradient(rgba(30, 153, 240, .22) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(30, 153, 240, .22) 1px, transparent 1px);
    background-size:  55px 35px;
    transform:        perspective(250px) rotateX(50deg);
    -webkit-mask-image: radial-gradient(ellipse, #000, transparent 70%);
    mask-image:         radial-gradient(ellipse, #000, transparent 70%);
}

.partners-why__head {
    max-width:  1100px;
    margin:     0 auto 42px;
    text-align: center;
}

.partners-why .section-eyebrow {
    justify-content: center;
    color:           var(--color-yellow);
}

.partners-why .section-dot { background: var(--color-yellow); }

.partners-why__title {
    max-width:      none;
    font-size:      clamp(32px, 3.5vw, 50px);
    font-weight:    400;
    line-height:    1.18;
    letter-spacing: -.035em;
}

.partners-why__text {
    max-width:   780px;
    margin:      18px auto 0;
    font-size:   18px;
    line-height: 1.6;
    color:       #c3d8f9;
}

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

.partners-why__card {
    min-width:     0;
    padding:       26px 30px 30px;
    border:        1px solid rgba(47, 164, 244, .65);
    border-radius: 18px;
    background:    linear-gradient(145deg, rgba(8, 38, 78, .94), rgba(1, 24, 56, .95));
    box-shadow:    inset 0 1px 0 rgba(166, 218, 255, .06), inset 0 -12px 26px rgba(0, 117, 223, .045);
    transition:    border-color var(--transition), box-shadow var(--transition);
}

@media (hover: hover) {
    .partners-why__card:hover {
        border-color: #64caff;
        box-shadow:   0 0 24px rgba(11, 125, 218, .15), inset 0 0 24px rgba(11, 125, 218, .06);
    }
}

.partners-why__card-top {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    margin-bottom:   22px;
}

.partners-why__num {
    display:              flex;
    align-items:          center;
    gap:                  22px;
    font-size:            30px;
    font-weight:          600;
    font-variant-numeric: tabular-nums;
    color:                #36a4f5;
}

.partners-why__num::after {
    content:    "";
    width:      36px;
    height:     1px;
    background: #268bd0;
}

.partners-why__icon {
    display:       grid;
    flex:          none;
    place-items:   center;
    width:         62px;
    height:        62px;
    border:        1px solid rgba(52, 163, 246, .7);
    border-radius: 15px;
    background:    linear-gradient(145deg, #042851, #031b3e);
    box-shadow:    inset 0 0 16px rgba(31, 141, 230, .08);
    color:         #aedaff;
}

.partners-why__card-title {
    margin-bottom:  14px;
    font-size:      clamp(20px, 1.65vw, 26px);
    font-weight:    600;
    line-height:    1.22;
    letter-spacing: -.02em;
    color:          #60d4ff;
}

.partners-why__card-text {
    font-size:   16px;
    line-height: 1.65;
    color:       #c3d6f1;
}

/* ── 07 · CTA ───────────────────────────────────────────────────────────── */
/* Класи .service-cta* — ті самі, що на інших сторінках; вигляд — банер із
   шаблону замовника: одна колонка, усе по центру, радіус 26. */
/* 84px на всіх ширинах — у рефі цей банер не скидається до мобільних 72. */
.service-cta {
    position: relative;
    padding:  84px 0;
}

.service-cta__banner {
    display:        grid;
    justify-items:  center;
    gap:            32px;
    padding:        clamp(38px, 6vw, 68px);
    border:         .5px solid rgba(79, 185, 255, .56);
    border-radius:  26px;
    background:
        radial-gradient(ellipse at 0 0, rgba(111, 145, 232, .25), transparent 65%),
        linear-gradient(150deg, #243560, #101d40);
    box-shadow:     0 24px 64px rgba(0, 10, 32, .25);
    text-align:     center;
}

.service-cta__content {
    display:        flex;
    flex-direction: column;
    align-items:    center;
}

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

.service-cta__text {
    max-width:  720px;
    margin-top: 16px;
}

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

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

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

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

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

.faq__title {
    max-width:      820px;
    font-size:      clamp(31px, 3.25vw, 46px);
    letter-spacing: -1.35px;
}

/* ── 09 · Адаптив ───────────────────────────────────────────────────────── */
/* Проміжний крок 1100 — з рефу, для сіток із 4–5 колонками: на 1024 п'ять
   логотипів у ряд уже дрібнішають до нечитабельного, а три картки «Чому
   Ziggurat» дають заголовки в три рядки. Той самий прийом, що в galuzi.css. */
@media (max-width: 1100px) {
    .partners-hero__proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .partners-hero__proof-item:nth-child(2) { border-right: 0; }

    .partners-clients__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .partners-why__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Глобус — на всю ширину по центру секції; фіксовані 1217px тут уже
       вилазили б за праву межу, а текст ліг би поверх самого глобуса. */
    .partners-hero__image {
        inset:        auto 0;
        top:          50%;
        width:        100%;
        height:       auto;
        aspect-ratio: 1697 / 927;
        transform:    translateY(-50%);
        background-size:     100% auto;
        background-position: center;
        -webkit-mask-size:     100% 100%;
        mask-size:             100% 100%;
        -webkit-mask-position: center;
        mask-position:         center;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
        mask-image:         linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
    }

    .partners-hero__image::after {
        inset:  0;
        width:  100%;
        height: 100%;
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter:         blur(5px);
        -webkit-mask-image: linear-gradient(90deg, #000, transparent 9%, transparent 91%, #000), linear-gradient(180deg, #000, transparent 12%, transparent 88%, #000);
        mask-image:         linear-gradient(90deg, #000, transparent 9%, transparent 91%, #000), linear-gradient(180deg, #000, transparent 12%, transparent 88%, #000);
    }

    .partners-strategic__bg {
        height:              calc(100% + 120px);
        background-size:     100% auto;
        background-position: center;
        -webkit-mask-size:     100% auto;
        mask-size:             100% auto;
        -webkit-mask-position: center;
        mask-position:         center;
        -webkit-mask-image: radial-gradient(ellipse closest-side, #000 40%, transparent 100%);
        mask-image:         radial-gradient(ellipse closest-side, #000 40%, transparent 100%);
    }
}

@media (max-width: 768px) {
    .partners-collab,
    .partners-strategic,
    .partners-clients,
    .partners-why { padding: 72px 0; }

    :where(.partners-page) h2 { font-size: clamp(30px, 8vw, 42px); }

    /* Хіро: фото — приглушеним фоном на всю секцію, текст по центру
       колонки 560px. Верхній відступ 32px — як на решті сторінок. */
    .partners-hero {
        min-height: 0;
        padding:    32px 0 40px;
        background: var(--color-bg);
    }

    .partners-hero > .container { padding: 0 24px; }

    .partners-hero__image {
        inset:        0;
        width:        100%;
        height:       100%;
        aspect-ratio: auto;
        transform:    none;
        opacity:      .2;
        background-size:     cover;
        background-position: 65% center;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 100%), linear-gradient(180deg, transparent, #000 20%, #000 75%, transparent);
        mask-image:         linear-gradient(90deg, transparent, #000 100%), linear-gradient(180deg, transparent, #000 20%, #000 75%, transparent);
    }

    .partners-hero__image::before,
    .partners-hero__image::after { display: none; }

    .partners-hero__content {
        max-width:   560px;
        margin:      0 auto;
        padding:     0;
        text-shadow: none;
    }


    .partners-hero .section-eyebrow {
        gap:            8px;
        margin-bottom:  14px;
        font-size:      10px;
        line-height:    1.5;
        letter-spacing: .13em;
    }

    .partners-hero__title {
        margin-bottom:  24px;
        font-size:      clamp(28px, 7.2vw, 40px);
        line-height:    1.16;
        letter-spacing: -.035em;
    }

    .partners-hero__title .is-accent { letter-spacing: inherit; }

    .partners-hero__lead {
        max-width:     100%;
        margin-bottom: 18px;
        font-size:     15px;
        line-height:   1.7;
    }

    .partners-hero__support {
        margin-bottom: 26px;
        font-size:     13px;
        line-height:   1.65;
    }

    .partners-hero__btn {
        width:      100%;
        min-height: 50px;
        padding:    13px 18px;
        gap:        12px;
    }

    .partners-hero__proof {
        top:           0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap:           14px 12px;
        width:         100%;
        margin-top:    24px;
        padding:       14px;
        border-radius: 12px;
        background:    rgba(15, 39, 77, .94);
        box-shadow:    none;
        -webkit-backdrop-filter: none;
        backdrop-filter:         none;
    }

    .partners-hero__proof-item {
        align-items:  flex-start;
        gap:          7px;
        min-height:   32px;
        padding:      0;
        border-right: 0;
        font-size:    11px;
    }

    .partners-hero__proof-icon {
        width:  15px;
        height: 15px;
    }

    .partners-collab__intro {
        grid-template-columns: 1fr;
        gap:                   22px;
    }

    .partners-collab__disciplines {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap:               12px;
    }

    .partners-collab__discipline:nth-child(2) { border-right: 0; }

    .partners-collab__discipline {
        gap:       8px;
        font-size: 13px;
    }

    .partners-strategic__bg {
        height:              calc(100% + 80px);
        background-position: center 65%;
    }

    .partners-strategic__grid { grid-template-columns: 1fr; }

    .partners-strategic__card { padding: 26px; }

    .service-cta__banner { padding: 38px 24px; }

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

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

/* Сітка логотипів 4 → 2 — рівно на брейкпоінті рефу (760), а не на 768:
   інакше на планшеті 768 секція розтягувалась у 2 колонки × 11 рядів
   (2100px висоти), тоді як 4 колонки по 175px там ще добре читаються. */
@media (max-width: 760px) {
    .partners-clients__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Картки «Чому Ziggurat» 2 → 1 — нижче 768: на 600–768 дві колонки ще
   тримають заголовок у два рядки (так і в рефі). */
@media (max-width: 600px) {
    .partners-why__cards {
        grid-template-columns: minmax(0, 1fr);
        gap:                   14px;
    }

    .partners-why__card { padding: 24px; }

    .partners-why__text { font-size: 16px; }

    .partners-why__text br { display: none; }

    .partners-why__icon {
        width:  52px;
        height: 52px;
    }

    .partners-why__icon .icon {
        width:  30px;
        height: 30px;
    }
}

@media (max-width: 430px) {
    .partners-clients__item {
        min-height: 112px;
        padding:    20px 10px 10px;
    }

    .partners-clients__logo { height: 72px; }

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

@media (max-width: 360px) {
    .partners-hero > .container { padding: 0 18px; }

    .partners-hero__proof {
        grid-template-columns: 1fr;
        gap:                   10px;
    }

    .partners-hero__proof-item {
        min-height: 0;
        font-size:  12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .partners-strategic__brand,
    .partners-why__card,
    .btn--outline { transition: none; }
}

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