/* ══════════════════════════════════════════════════════════════════════════
   Проєкти — архів CPT proiekti (archive-proiekti.php)

   01 · Оболонка сторінки й локальні кнопки
   02 · Хіро
   03 · Каталог: шапка і фон
   04 · Фільтри
   05 · Сітка й картка проєкту
   06 · Галерея картки
   07 · «Показати більше»
   08 · Плашка конфіденційності
   09 · FAQ (тільки хром секції — акордеон спільний, css/main.css)
   10 · Фінальний CTA
   11 · Адаптив 1100 / 1024 / 768 / 520
   12 · prefers-reduced-motion

   Секція «Клієнти» тут не стилізується: її блок .clients* живе в
   css/main.css, бо ділиться з Головною.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 01 · Оболонка сторінки ─────────────────────────────────────────────── */
.projects-page {
    /* Скляні поверхні (плашки статистики в хіро). Тримаємо як локальні
       токени, а не розсипом літералів: значення повторюються в кількох
       правилах, і в темі глобального «скла» поки немає. */
    --glass-border:     rgba(184, 209, 255, .24);
    --glass-background: linear-gradient(135deg, rgba(55, 104, 164, .25) 0%, rgba(12, 45, 87, .34) 46%, rgba(3, 20, 50, .24) 100%);
    --glass-shadow:     inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 -1px 0 rgba(76, 141, 255, .08), 0 10px 32px rgba(0, 11, 35, .2);
    --glass-filter:     blur(14px) saturate(1.16);

    overflow: hidden;
    background:
        radial-gradient(circle at 78% 8%, rgba(25, 102, 221, .1), transparent 28%),
        var(--color-bg);
}

/* ── Кнопки ────────────────────────────────────────────────────────────────
   Глобально в темі живе тільки .btn--primary (css/header.css); .btn,
   .btn--lg і .btn--outline лежать у css/pages/home.css, тобто на цій
   сторінці не підключені. Дублюємо їх локально — так само, як це вже
   зроблено для poslugy й galuzi. */
.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:     176px;
    min-height:    48px;
    padding:       13px 22px;
    border-radius: 7px;
}

.btn--outline {
    min-width:        176px;
    min-height:       48px;
    padding:          13px 22px;
    border:           1px solid rgba(134, 185, 244, .3);
    border-radius:    7px;
    background-color: rgba(13, 46, 94, .4);
    color:            var(--color-text-light);
    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,
.btn--outline:active {
    border-color:     var(--color-sky);
    background-color: var(--surface-soft);
    color:            var(--color-text);
}

.btn--outline .icon { flex: none; }

/* ── 02 · Хіро ──────────────────────────────────────────────────────────── */
.projects-hero {
    position:    relative;
    display:     flex;
    align-items: flex-start;
    min-height:  clamp(680px, 46vw, 860px);
    isolation:   isolate;
    background:  linear-gradient(180deg, #00000c 0%, #031d47 100%);
}

/* Затемнення поверх фото: текст ліворуч має лишатись читабельним, а фото —
   проявлятись праворуч. */
.projects-hero::before {
    content:  "";
    position: absolute;
    inset:    0;
    z-index:  -1;
    background:
        linear-gradient(90deg, rgba(0, 0, 12, .98) 0%, rgba(1, 13, 34, .94) 30%, rgba(3, 29, 71, .62) 56%, rgba(3, 29, 71, .12) 82%),
        linear-gradient(0deg, #031d47 0%, transparent 27%, transparent 76%, rgba(0, 0, 12, .54) 100%);
}

.projects-hero__image {
    position:            absolute;
    top:                 -2px;
    bottom:              -2px;
    left:                50%;
    z-index:             -2;
    width:               min(calc(100% + 4px), 1668px);
    background-image:    url('../../img/proiekti-hero.webp');
    background-position: 50% 50%;
    background-size:     100% auto;
    background-repeat:   no-repeat;
    opacity:             .82;
    filter:              saturate(.92) contrast(1.02) brightness(.82);
    -webkit-mask-image:  linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .08) 3%, rgba(0, 0, 0, .3) 7%, rgba(0, 0, 0, .68) 12%, #000 21%, #000 79%, rgba(0, 0, 0, .68) 88%, rgba(0, 0, 0, .3) 93%, rgba(0, 0, 0, .08) 97%, transparent 100%);
    mask-image:          linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .08) 3%, rgba(0, 0, 0, .3) 7%, rgba(0, 0, 0, .68) 12%, #000 21%, #000 79%, rgba(0, 0, 0, .68) 88%, rgba(0, 0, 0, .3) 93%, rgba(0, 0, 0, .08) 97%, transparent 100%);
    transform:           translateX(-50%);
}

.projects-hero__layout {
    position:              relative;
    z-index:               2;
    display:               grid;
    grid-template-columns: minmax(0, 720px) 364px;
    align-items:           end;
    justify-content:       space-between;
    gap:                   70px;
    /* Верхній відступ тримає смуга під крихти (css/main.css). */
    padding-top:           0;
    padding-bottom:        76px;
}

.projects-hero__content {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
        /* Спільний ритм угорі сторінки: надзаголовок → 20 → H1 → 26 → лід. */
    gap:            20px;
}

.projects-hero__title {
    max-width:      691px;
    margin:         0;
    color:          var(--color-text-light);
    font-size:      var(--fs-h1);
    font-weight:    300;
    line-height:    var(--lh-h1);
    letter-spacing: var(--ls-h1);
    overflow-wrap:  break-word;
}

.projects-hero__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;
}

.projects-hero__lead {
    max-width:   680px;
    color:       var(--color-text-light);
    font-size:   18px;
    line-height: 1.6;
}

.projects-hero__btn { margin-top: 4px; }

.projects-hero__stats {
    display:        flex;
    flex-direction: column;
    gap:            14px;
    width:          100%;
}

.projects-hero__stat {
    position:                relative;
    overflow:                hidden;
    padding:                 18px 22px 20px;
    border:                  .5px solid var(--glass-border);
    border-radius:           18px;
    background:              var(--glass-background);
    box-shadow:              var(--glass-shadow);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter:         var(--glass-filter);
}

.projects-hero__stat::before {
    content:    "";
    position:   absolute;
    top:        0;
    right:      20px;
    left:       20px;
    height:     .5px;
    background: var(--gradient-line);
    opacity:    .86;
}

.projects-hero__stat strong {
    display:                 block;
    font-size:               var(--fs-stat);
    font-weight:             600;
    line-height:             var(--lh-stat);
    letter-spacing:          var(--ls-stat);
    background-image:        var(--gradient-stat);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                   transparent;
    -webkit-text-fill-color: transparent;
}

.projects-hero__stat span {
    display:     block;
    margin-top:  12px;
    color:       rgba(225, 235, 255, .8);
    font-size:   14px;
    line-height: 1.55;
}

/* ── 03 · Каталог: шапка і фон ──────────────────────────────────────────── */
.projects-catalog {
    position:  relative;
    isolation: isolate;
    padding:   112px 0;
    background:
        radial-gradient(circle at 82% 19%, rgba(28, 102, 219, .1), transparent 30%),
        radial-gradient(circle at 8% 72%, rgba(36, 119, 224, .06), transparent 28%),
        var(--color-bg);
}

/* Панорама забудови під сіткою карток. */
/* Згасання країв роблять ДВА вкладені шари, а не одна маска: маска на
   елементі діє і на його нащадків, тому вертикальний градієнт живе тут, а
   горизонтальний — на ::before. Так обидві осі керуються незалежно без
   mask-composite (він працює не скрізь однаково, а при відсутності
   підтримки шари складаються об'єднанням — тобто згасання просто зникло б).
   Один лінійний градієнт гасить ОБИДВА краї своєї осі, тож двох шарів
   вистачає на всі чотири сторони. */
.projects-catalog__bg {
    position:           absolute;
    /* Притиснуто до правого верхнього кута секції. Раніше було
       left: 50% + translateX(-50%) — на екранах, вужчих за 1774px, це те
       саме (ширина там і так 100%), різниця видно на ширших. */
    top:                0;
    right:              0;
    z-index:            0;
    width:              min(100%, 1774px);
    height:             887px;
    opacity:            .38;
    pointer-events:     none;

    /* Вертикаль: верх щільний (там край секції), низ гасне довгим шлейфом. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, rgba(0, 0, 0, .75) 58%, rgba(0, 0, 0, .35) 78%, transparent 100%);
    mask-image:         linear-gradient(to bottom, #000 0%, #000 40%, rgba(0, 0, 0, .75) 58%, rgba(0, 0, 0, .35) 78%, transparent 100%);
}

.projects-catalog__bg::before {
    content:  '';
    position: absolute;
    inset:    0;

    background: url('../../img/proiekti-catalog-bg.webp') right top / 100% auto no-repeat;
    filter:     saturate(.84) brightness(.76);

    /* Горизонталь: праворуч довге згасання (там блок притиснутий до краю
       екрана), ліворуч коротке — щоб фото не обривалось прямою межею. */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .55) 8%, #000 26%, #000 56%, rgba(0, 0, 0, .72) 72%, rgba(0, 0, 0, .3) 88%, transparent 100%);
    mask-image:         linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .55) 8%, #000 26%, #000 56%, rgba(0, 0, 0, .72) 72%, rgba(0, 0, 0, .3) 88%, transparent 100%);
}

/* Віньєтка: гасить фон по краях, щоб картки не тонули у фото.
   ::before, а не ::after — ::after у цієї секції зайнятий спільним
   .has-line-bottom (нижня градієнтна лінія). */
.projects-catalog::before {
    content:  "";
    position: absolute;
    top:      0;
    right:    0;
    left:     0;
    z-index:  0;
    height:   1060px;
    background:
        linear-gradient(90deg, #031c45 0%, rgba(3, 28, 69, .94) 5%, rgba(3, 28, 69, .64) 13%, rgba(3, 28, 69, .2) 22%, transparent 31%, transparent 69%, rgba(3, 28, 69, .2) 78%, rgba(3, 28, 69, .64) 87%, rgba(3, 28, 69, .94) 95%, #031c45 100%),
        linear-gradient(180deg, rgba(3, 28, 69, .72) 0%, rgba(3, 28, 69, .28) 8%, transparent 18%, transparent 56%, rgba(3, 28, 69, .22) 66%, rgba(3, 28, 69, .88) 78%, #031c45 84%, #031c45 91%, rgba(3, 28, 69, .56) 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 91%, rgba(0, 0, 0, .7) 95%, transparent 100%);
    mask-image:         linear-gradient(180deg, #000 0%, #000 91%, rgba(0, 0, 0, .7) 95%, transparent 100%);
    pointer-events:     none;
}

.projects-catalog > .container {
    position: relative;
    z-index:  1;
}

.projects-catalog__header { max-width: 930px; }

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

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

.projects-catalog__lead {
    max-width:   850px;
    margin-top:  24px;
    color:       var(--color-text-soft);
    font-size:   17px;
    line-height: 1.75;
}

/* ── 04 · Фільтри ───────────────────────────────────────────────────────── */
.project-filters {
    display:               grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap:                   24px;
    margin-top:            50px;
    padding:               24px;
    border:                .5px solid rgba(83, 153, 255, .24);
    border-radius:         20px;
    background:            linear-gradient(145deg, rgba(14, 47, 94, .72), rgba(5, 26, 62, .76));
    box-shadow:            inset 0 1px rgba(255, 255, 255, .04), 0 25px 60px -48px rgba(0, 119, 255, .58);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter:       blur(16px);
}

.project-filters__group,
.project-filters__select {
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

.project-filters__label {
    color:          #a9bad9;
    font-size:      12px;
    font-weight:    600;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.project-filters__buttons {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
}

.filter-chip,
.project-filters select {
    min-height:    40px;
    border:        .5px solid rgba(94, 151, 232, .26);
    border-radius: 10px;
    background:    rgba(7, 32, 71, .76);
    color:         #c6d6ef;
    font-family:   inherit;
    font-size:     13px;
}

.filter-chip {
    padding: 9px 14px;
    cursor:  pointer;
}

.filter-chip:hover,
.filter-chip:focus-visible,
.filter-chip.is-active {
    border-color: rgba(84, 169, 255, .62);
    background:   linear-gradient(100deg, rgba(48, 111, 205, .7), rgba(35, 137, 221, .46));
    color:        #fff;
    box-shadow:   0 10px 28px -16px rgba(38, 143, 255, .82), inset 0 1px rgba(255, 255, 255, .06);
}

/* Власна стрілка списку: нативна на темному тлі майже не читається і
   виглядає по-різному в кожному браузері. appearance:none прибирає
   системну, шеврон — inline-SVG у data-URI (той самий контур і колір, що
   в img/chevron-up.svg; окремий файл заради 200 байт не заводимо).
   Місце під неї в padding-right уже було. */
.project-filters select {
    width:        100%;
    padding:      0 38px 0 13px;
    color-scheme: dark;
    cursor:       pointer;

    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;

    background-image:    url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="12" height="7" viewBox="0 0 11.5 6.5" fill="none"%3E%3Cpath d="M0.75 0.75L5.75 5.75L10.75 0.75" stroke="%2392c1ff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
    background-repeat:   no-repeat;
    background-position: right 14px center;
    background-size:     12px 7px;

    transition: border-color var(--transition), background-color var(--transition);
}

.project-filters select:hover,
.project-filters select:focus-visible {
    border-color: rgba(84, 169, 255, .62);
}

/* Стрілка «дивиться» вниз, тому в списку, розгорнутому вгору, її не
   перевертаємо — нативний select не дає стану «відкрито». */
.project-filters select::-ms-expand { display: none; }

/* ── 05 · Сітка й картка ────────────────────────────────────────────────── */
.projects-grid {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   22px;
    margin-top:            34px;
}

/* Одиноку картку в останньому ряду ставимо в центр, щоб ряд не «завалювався»
   вліво. */
@media (min-width: 1101px) {
    .project-card:last-child:nth-child(3n + 1) { grid-column: 2; }
}

.projects-grid__empty {
    margin-top: 34px;
    color:      var(--color-text-soft);
}

.project-card {
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    min-height:     492px;
    border:         .5px solid rgba(83, 153, 255, .24);
    border-radius:  22px;
    background:     linear-gradient(148deg, rgba(20, 54, 104, .54) 0%, rgba(6, 27, 64, .9) 58%, rgba(3, 21, 52, .96) 100%);
    box-shadow:     inset 0 1px rgba(255, 255, 255, .04), 0 25px 60px -42px rgba(0, 119, 255, .65);
    transition:     transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.project-card:hover {
    transform:    translateY(-3px);
    border-color: rgba(76, 157, 255, .46);
    box-shadow:   inset 0 1px rgba(255, 255, 255, .055), 0 30px 70px -42px rgba(0, 132, 255, .82);
}

/* JS ховає відфільтровані картки через hidden; display:flex вище його б
   переміг, тому гасимо явно. */
.project-card[hidden] { display: none; }

.project-card__media {
    position:     relative;
    aspect-ratio: 16 / 10;
    overflow:     hidden;
    background:   #04132d;
}

.project-card__media::after {
    content:        "";
    position:       absolute;
    inset:          0;
    background:     linear-gradient(180deg, transparent 58%, rgba(8, 20, 42, .85) 100%);
    pointer-events: none;
}

.project-card__media img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    filter:     saturate(.88) contrast(1.03);
    transition: transform .55s ease, filter .55s ease, opacity .18s ease;
}

.project-card:hover .project-card__media img {
    transform: scale(1.035);
    filter:    saturate(1) contrast(1.05);
}

.project-card__body {
    flex:           1;
    display:        flex;
    flex-direction: column;
    padding:        22px 23px 24px;
}

.project-card__meta {
    display:       flex;
    flex-wrap:     wrap;
    gap:           7px;
    margin-bottom: 17px;
}

.project-card__meta span {
    padding:       5px 9px;
    border:        1px solid rgba(93, 167, 255, .2);
    border-radius: 999px;
    background:    rgba(32, 90, 164, .15);
    color:         #91c8ff;
    font-size:     11px;
    line-height:   1.3;
}

.project-card__title {
    margin:         0;
    color:          var(--color-text-light);
    font-size:      21px;
    font-weight:    500;
    line-height:    1.36;
    letter-spacing: -.35px;
}

.project-card__facts {
    display:    grid;
    margin:     18px 0 0;
    padding:    12px 0 0;
    border-top: .5px solid rgba(107, 167, 238, .18);
}

.project-card__facts > div {
    display:               grid;
    grid-template-columns: minmax(92px, .72fr) minmax(0, 1.28fr);
    gap:                   12px;
    padding:               7px 0;
}

.project-card__facts dt,
.project-card__facts dd { margin: 0; }

.project-card__facts dt {
    color:          rgba(151, 184, 224, .72);
    font-size:      10px;
    font-weight:    500;
    line-height:    1.45;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.project-card__facts dd {
    color:       #c4d3e9;
    font-size:   12px;
    line-height: 1.45;
}

.project-card__link {
    position:         relative;
    overflow:         hidden;
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    gap:              9px;
    align-self:       flex-start;
    margin-top:       auto;
    min-width:        176px;
    height:           38px;
    padding:          10px 18px;
    border:           1px solid rgba(190, 222, 255, .2);
    border-radius:    6px;
    background-color: var(--color-primary);
    background-image: linear-gradient(90deg, #398be8 0%, #68b7ff 100%);
    color:            var(--color-text);
    font-size:        13px;
    line-height:      18px;
    letter-spacing:   -.15px;
    white-space:      nowrap;
    text-decoration:  none;
    box-shadow:       0 9px 22px -12px rgba(76, 154, 245, .62);
    transition:       border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

/* Той самий «блиск», що на .btn--primary (анімація btn-shine з header.css). */
.project-card__link::after {
    content:           "";
    position:          absolute;
    inset:             0;
    background:        linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .26) 50%, transparent 100%);
    background-repeat: no-repeat;
    background-size:   45% 100%;
    animation:         btn-shine 3.5s linear infinite;
    pointer-events:    none;
}

.project-card__link .icon {
    position: relative;
    z-index:  1;
    flex:     none;
}

.project-card__link:hover,
.project-card__link:focus-visible,
.project-card__link:active {
    border-color: rgba(255, 255, 255, .35);
    color:        #fff;
    box-shadow:   0 12px 30px rgba(28, 92, 219, .34);
    transform:    translateY(-1px);
}

.project-card__link:focus-visible {
    outline:        2px solid var(--color-text);
    outline-offset: 3px;
}

/* ── 06 · Галерея картки ────────────────────────────────────────────────── */
.project-card__media.has-gallery:focus-visible {
    outline:        2px solid rgba(113, 194, 255, .9);
    outline-offset: -3px;
}

.project-card__media.is-loading img { opacity: .5; }

.project-gallery__button {
    position:      absolute;
    top:           50%;
    right:         12px;
    z-index:       3;
    display:       grid;
    place-items:   center;
    width:         32px;
    height:        32px;
    padding:       0;
    border:        .5px solid rgba(54, 119, 190, .5);
    border-radius: 7px;
    background:    rgba(13, 39, 78, .78);
    color:         #8ebde9;
    box-shadow:
        inset 0 1px 0 rgba(173, 214, 255, .06),
        0 8px 18px -10px rgba(0, 5, 21, .9),
        0 0 9px rgba(31, 113, 207, .08);
    cursor:                  pointer;
    transform:               translateY(-50%);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter:         blur(12px);
    transition:              border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.project-gallery__button:hover,
.project-gallery__button:focus-visible {
    border-color: rgba(81, 158, 235, .72);
    background:   rgba(17, 57, 108, .92);
    color:        #c5e4ff;
    box-shadow:
        inset 0 1px 0 rgba(206, 231, 255, .1),
        0 8px 18px -10px rgba(0, 5, 21, .9),
        0 0 14px rgba(52, 139, 230, .2);
    transform:    translateY(-50%) scale(1.04);
}

.project-gallery__button:focus-visible {
    outline:        2px solid #fff;
    outline-offset: 2px;
}

.project-gallery__button:disabled {
    cursor:  wait;
    opacity: .56;
}

.project-gallery__counter {
    position:      absolute;
    right:         12px;
    bottom:        11px;
    z-index:       3;
    min-width:     48px;
    padding:       5px 9px;
    border:        .5px solid rgba(151, 202, 255, .26);
    border-radius: 999px;
    background:    rgba(2, 17, 42, .68);
    color:         rgba(232, 245, 255, .9);
    font-size:     11px;
    font-weight:   500;
    line-height:   1;
    text-align:    center;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter:         blur(10px);
}

/* ── 07 · «Показати більше» ─────────────────────────────────────────────── */
.projects-pagination {
    display:        flex;
    align-items:    center;
    flex-direction: column;
    gap:            13px;
    margin-top:     46px;
    text-align:     center;
}

.projects-pagination.is-complete { gap: 10px; }

.projects-pagination__count {
    margin:      0;
    color:       rgba(171, 193, 225, .78);
    font-size:   13px;
    line-height: 1.4;
}

.projects-pagination__count strong {
    color:       #d9e8fb;
    font-weight: 500;
}

.projects-pagination__progress {
    position:   relative;
    overflow:   hidden;
    display:    block;
    width:      min(238px, 68vw);
    height:     .5px;
    background: transparent;
}

.projects-pagination__progress::before {
    content:    "";
    position:   absolute;
    inset:      0;
    background: var(--gradient-line);
    opacity:    .42;
}

.projects-pagination__progress > span {
    position:   absolute;
    top:        0;
    bottom:     0;
    left:       0;
    width:      0;
    background: var(--gradient-line);
    box-shadow: 0 0 8px rgba(81, 174, 255, .58);
    transition: width .35s ease;
}

.projects-pagination__button {
    position:        relative;
    overflow:        hidden;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    min-width:       206px;
    min-height:      48px;
    margin-top:      3px;
    padding:         12px 21px;
    border:          .5px solid transparent;
    border-radius:   8px;
    background:
        linear-gradient(105deg, rgba(28, 77, 143, .58), rgba(9, 40, 83, .72)) padding-box,
        var(--gradient-line) border-box;
    box-shadow:
        inset 0 1px rgba(255, 255, 255, .04),
        0 18px 38px -18px rgba(0, 4, 16, .92),
        0 0 18px -14px rgba(34, 119, 219, .28);
    color:                   #e4f2ff;
    font:                    inherit;
    font-size:               14px;
    font-weight:             500;
    cursor:                  pointer;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter:         blur(12px);
    transition:              background .25s ease, box-shadow .25s ease, color .25s ease, transform .25s ease;
}

.projects-pagination__button:hover,
.projects-pagination__button:focus-visible {
    transform: translateY(-2px);
    background:
        linear-gradient(105deg, rgba(39, 99, 181, .74), rgba(12, 53, 106, .86)) padding-box,
        var(--gradient-line) border-box;
    box-shadow:
        inset 0 1px rgba(255, 255, 255, .08),
        0 0 25px rgba(59, 159, 255, .22),
        0 18px 42px -22px rgba(77, 167, 255, .78);
    color: #fff;
}

.projects-pagination__button:active {
    transform: translateY(0);
    box-shadow:
        inset 0 1px rgba(255, 255, 255, .1),
        0 0 30px rgba(76, 177, 255, .32),
        0 14px 34px -18px rgba(86, 180, 255, .92);
}

/* Шеврон дивиться вниз («ще нижче»), а в розгорнутому стані — вгору. */
.projects-pagination__button .icon {
    flex:       0 0 auto;
    transform:  rotate(180deg);
    transition: transform .25s ease;
}

.projects-pagination__button[aria-expanded="true"] .icon { transform: rotate(0deg); }

.projects-pagination__button:hover .icon,
.projects-pagination__button:focus-visible .icon { transform: rotate(180deg) translateY(-2px); }

.projects-pagination__button[aria-expanded="true"]:hover .icon,
.projects-pagination__button[aria-expanded="true"]:focus-visible .icon { transform: translateY(2px); }

.projects-pagination__button[hidden] { display: none; }

/* ── 08 · Плашка конфіденційності ───────────────────────────────────────── */
.projects-confidentiality {
    display:       flex;
    align-items:   flex-start;
    gap:           16px;
    max-width:     980px;
    margin:        44px auto 0;
    padding:       20px 22px;
    border:        .5px solid rgba(83, 153, 255, .22);
    border-radius: 18px;
    background:    linear-gradient(115deg, rgba(11, 43, 91, .72), rgba(5, 24, 58, .5));
    box-shadow:    inset 0 1px rgba(255, 255, 255, .035);
    color:         #9fb2d0;
    font-size:     14px;
    line-height:   1.65;
}

.projects-confidentiality p { margin: 0; }

.projects-confidentiality__icon {
    flex:          0 0 25px;
    display:       grid;
    place-items:   center;
    width:         25px;
    height:        25px;
    border:        1px solid rgba(79, 173, 255, .55);
    border-radius: 50%;
    color:         #65c7ff;
    font-size:     13px;
}

/* ── 09 · FAQ ───────────────────────────────────────────────────────────────
   Акордеон (.faq__list, .faq-item*) — спільний блок із css/main.css, той
   самий, що на Головній. Тут лишається тільки хром секції: відступи,
   фонове фото і градієнт заголовка. */
.faq {
    position: relative;
    overflow: hidden;
    padding:  104px 0 116px;
    isolation: isolate;
    background:
        radial-gradient(circle at 50% 12%, rgba(47, 121, 229, .065) 0%, transparent 37%),
        linear-gradient(180deg, #03183b 0%, #031a40 100%);
}

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

.faq__city {
    position:            absolute;
    bottom:              0;
    left:                50%;
    width:               1920px;
    height:              654px;
    background:          url('../../img/proiekti-faq-bg.webp') center bottom / 100% auto no-repeat;
    opacity:             .52;
    filter:              saturate(.78) brightness(.68);
    -webkit-mask-image:  linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .72) 7%, #000 16%, #000 84%, rgba(0, 0, 0, .72) 93%, transparent 100%);
    mask-image:          linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .72) 7%, #000 16%, #000 84%, rgba(0, 0, 0, .72) 93%, transparent 100%);
    transform:           translateX(-50%);
}

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

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

/* Градієнт малюємо на рівні блоку, а не на вкладеному span: інакше
   background-clip: text рахує градієнт від ширини самого фрагмента і
   акцент виходить іншого відтінку, ніж у макеті. */
.faq__title {
    max-width:               912px;
    margin:                  0;
    font-size:               48px;
    font-weight:             300;
    line-height:             60px;
    letter-spacing:          -1px;
    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);
}

.faq__title .is-accent {
    font-weight:             600;
    color:                   transparent;
    -webkit-text-fill-color: transparent;
}

/* ── 10 · Фінальний CTA ─────────────────────────────────────────────────── */
.projects-cta {
    padding:          88px 0;
    background-color: #061a3a;
    background-image:
        radial-gradient(circle at 50% 28%, rgba(48, 116, 225, .06) 0%, transparent 42%),
        linear-gradient(180deg, rgba(8, 33, 72, .34) 0%, rgba(3, 18, 42, .2) 100%);
}

.projects-cta__banner {
    position:        relative;
    isolation:       isolate;
    overflow:        hidden;
    display:         flex;
    align-items:     center;
    flex-direction:  column;
    justify-content: center;
    gap:             30px;
    max-width:       1100px;
    min-height:      430px;
    margin:          0 auto;
    padding:         64px clamp(32px, 6vw, 88px);
    border:          1px solid rgba(115, 173, 247, .24);
    border-radius:   24px;
    background:
        radial-gradient(circle at 16% 4%, rgba(67, 139, 244, .22) 0%, rgba(35, 93, 181, .09) 27%, transparent 51%),
        linear-gradient(155deg, rgba(15, 49, 101, .96) 0%, rgba(7, 30, 68, .98) 58%, rgba(3, 19, 47, .99) 100%);
    box-shadow: inset 0 1px rgba(193, 221, 255, .08), 0 28px 68px -56px rgba(0, 0, 0, .9);
    text-align: center;
}

.projects-cta__banner::before,
.projects-cta__banner::after {
    content:        "";
    position:       absolute;
    z-index:        -1;
    pointer-events: none;
}

.projects-cta__banner::before {
    inset: 0;
    background-image:
        linear-gradient(rgba(100, 164, 246, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100, 164, 246, .045) 1px, transparent 1px);
    background-size:    40px 40px;
    opacity:            .12;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 58%);
    mask-image:         linear-gradient(90deg, #000 0%, transparent 58%);
}

.projects-cta__banner::after {
    right:         -100px;
    bottom:        -180px;
    width:         430px;
    height:        430px;
    border-radius: 50%;
    background:    radial-gradient(circle, rgba(28, 102, 210, .09) 0%, transparent 70%);
}

.projects-cta__content {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            14px;
    width:          100%;
    max-width:      880px;
}

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

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

.projects-cta__text {
    max-width:   700px;
    margin:      0;
    color:       var(--color-text-soft);
    font-size:   16px;
    line-height: 1.55;
}

.projects-cta__actions {
    position:        relative;
    z-index:         1;
    display:         flex;
    justify-content: center;
    flex-wrap:       wrap;
    gap:             12px;
}

.projects-cta__actions .btn--primary {
    border-color:     rgba(185, 220, 255, .2);
    background-image: linear-gradient(90deg, #398be8 0%, #68b7ff 100%);
    box-shadow:       0 12px 30px -14px rgba(54, 145, 239, .62);
}

/* ── 11 · Адаптив ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .projects-hero__layout {
        grid-template-columns: minmax(0, 1fr) 306px;
        gap:                   38px;
    }

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

    .project-filters { grid-template-columns: 1fr; }

    .project-filters__select { max-width: 300px; }

    .projects-cta__banner { padding: 46px 42px; }
}

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

    .faq { padding: 90px 0; }

    .projects-cta { padding: 76px 0; }

    .faq__title,
    .projects-catalog__heading,
    .projects-cta__heading { font-size: 40px; line-height: 50px; }
}

@media (max-width: 768px) {
    .projects-hero { min-height: auto; }

    /* Фото тепер і за текстом, тому глушимо його по всій висоті, а не лише
       знизу. Силу підбирав розрахунком, а не на око: сам кадр темний
       (середня яскравість .17), тож затемнення .78 давало контраст тексту
       8.6:1 і лишало фото видимим на 2.6% яскравості — тобто чорний
       прямокутник. При .50 контраст 6.6:1 (норма AA — 4.5:1), а фото
       прозирає втричі помітніше. */
    .projects-hero::before {
        background: linear-gradient(180deg, rgba(0, 0, 12, .5) 0%, rgba(3, 29, 71, .55) 46%, rgba(3, 29, 71, .85) 80%, #031d47 100%);
    }

    /* Фото на мобайлі — фон на всю висоту хіро, як .coord-hero__photo, а не
       смуга зверху. У шаблоні воно займало верхні дві третини, і текст
       доводилось відсувати вниз на 130px — через це відступ над хлібними
       крихтами був удвічі більший, ніж на решті сторінок. */
    .projects-hero__image {
        top:                 -2px;
        bottom:              -2px;
        left:                50%;
        width:               calc(100% + 4px);
        background-position: 62% 50%;
        background-size:     cover;
        opacity:             .42;
        -webkit-mask-image:  linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .24) 8%, #000 23%, #000 77%, rgba(0, 0, 0, .24) 92%, transparent 100%);
        mask-image:          linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .24) 8%, #000 23%, #000 77%, rgba(0, 0, 0, .24) 92%, transparent 100%);
    }

    /* Той самий ритм, що в coord-hero і bim-hero: 24px зверху, 40px знизу. */
    .projects-hero__layout {
        grid-template-columns: 1fr;
        gap:                   28px;
        padding-top:           0;
        padding-bottom:        40px;
    }

    .projects-hero__lead { font-size: 16px; }

    .projects-hero__stats { max-width: min(100%, 468px); }

    .projects-catalog,
    .faq,
    .projects-cta { padding: 68px 0; }

    /* left тут більше не задаємо: базове правило кріпить блок за right, а
       left разом із width перебив би це кріплення. Прозорість знижена в тій
       самій пропорції, що й на десктопі (.4 → .26). */
    .projects-catalog__bg {
        width:   1180px;
        height:  590px;
        opacity: .26;
    }

    .projects-catalog::before { height: 720px; }

    .projects-catalog__lead { font-size: 16px; }

    .faq__wrp { gap: 34px; }

    .faq__title,
    .projects-catalog__heading,
    .projects-cta__heading { font-size: 30px; line-height: 38px; }

    .faq__city {
        width:           1180px;
        height:          420px;
        opacity:         .4;
        background-size: 100% auto;
    }

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

    .project-card { min-height: 0; }

    .project-filters {
        margin-top: 34px;
        padding:    17px;
    }

    /* Обмеження 300px має сенс лише поки селект стоїть окремою колонкою
       поруч із чипами (≥1101px). Коли фільтри складаються в один стовпчик,
       воно лишає селект вужчим за ряд чипів над ним — на 600px це 300 проти
       533. Знімаємо, щоб обидва фільтри були однакової ширини. */
    .project-filters__select { max-width: none; }

    .projects-cta__banner {
        gap:        30px;
        min-height: 0;
        padding:    36px 24px;
    }

    .projects-cta__actions { width: 100%; }
}

@media (max-width: 520px) {
    .project-card__body { padding: 19px; }

    .project-card__facts > div {
        grid-template-columns: 90px minmax(0, 1fr);
        gap:                   10px;
    }

    .projects-pagination { margin-top: 36px; }

    .projects-pagination__button { width: min(100%, 280px); }
}

/* ── 12 · prefers-reduced-motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .project-card,
    .project-card__media img,
    .project-card__link,
    .project-gallery__button,
    .projects-pagination__button,
    .projects-pagination__progress > span { transition: none; }

    .project-card__link::after { animation: none; }
}