/* ============================================================================
   SIGVIN — Block 11 «Masz Projekt Inwestycyjny?» (Figma 458:8216, 1440×896)
   Полноэкранный CTA: фото (GRAFIT) + затемнение, тег, заголовок 108px, подзаголовок
   и две кнопки (белая + стеклянная). Как block 7, но с двумя CTA. Параллакс фона.
   Схема-чередование: блок RECESSED (z-index 1) — блок 10 наезжает сверху.
   ========================================================================== */

.cta {
  position: sticky;                   /* «прилипает» сверху, пока футер наезжает снизу (#3) */
  top: 0;
  z-index: 1;                         /* под блоком 10 (он выступает) и под футером (z2) */
  width: var(--frame-w);
  max-width: 100%;
  height: 896px;
  margin: -72px auto 0;               /* наезд предыдущего блока сверху */
  border-radius: 0;                   /* без скруглений у фоновой картинки */
  overflow: hidden;
  isolation: isolate;
  background: var(--dark-black);
}
.cta__bg {
  position: absolute;
  top: -8%; left: 0;
  width: 100%; height: 116%;
  object-fit: cover;
  z-index: 0;
}
.cta__overlay { position: absolute; inset: 0; background: var(--dark-48); z-index: 1; pointer-events: none; }

.cta__tag { position: absolute; left: 80px; top: 144px; z-index: 2; }

.cta__content {
  position: absolute;
  /* якорим контент к НИЗУ (не к top): когда заголовок переносится в 2 строки
     (длинный EN / RU / UA) блок растёт вверх, а кнопки остаются на месте и не
     уходят под наезжающий футер. Для 1 строки позиция идентична прежнему top:396px. */
  left: 80px; top: auto; bottom: 240px;
  z-index: 2;
  width: 1233px; max-width: calc(100% - 160px);
  display: flex; flex-direction: column; gap: 48px; align-items: flex-start;
}
.cta__top { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.cta__title {
  color: var(--light-white);
  font-size: 108px; line-height: 108px; letter-spacing: -0.03em;
  white-space: normal;   /* переносим в 2 строки, когда перевод длиннее контейнера (RU/UA); PL/EN влезают в 1 строку */
}
.cta__title .thin { font-family: "Geologica Cursive", sans-serif; font-weight: 400; letter-spacing: -0.08em; }
.cta__title .bold { font-family: "adineue PRO Cyr", sans-serif; font-weight: 700; }
.cta__desc { color: var(--light-white); max-width: 926px; }

.cta__buttons { display: flex; gap: 16px; align-items: center; }

/* ---- стеклянная split-кнопка «Zobacz realizacje» -----------------------
   Те же свойства размытия и liquid glass, что у hero-CTA: `.glass` (sheen) +
   `data-liquid-glass` со strength 80 / depth 10 / blur 3 (см. HTML). На hover:
   подложка СВЕТЛЕЕТ и «фишки» меняются местами (свап btn-split, translateX). */
.btn-split--glass .btn-split__text,
.btn-split--glass .btn-split__icon {
  background: var(--glass-sheen);                 /* sheen как у hero-CTA */
  color: var(--light-white);
  --glass-border: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 100%);
  transition: background .35s ease, transform .45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* hover: подложка ярче (свап-translateX наследуем от базового .btn-split:hover) */
.btn-split--glass:hover .btn-split__text,
.btn-split--glass:hover .btn-split__icon {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .cta__bg { top: 0; height: 100%; }
}

/* ---- мобайл (≤767, фрейм 375 — node 465:6352): заголовок 48px + 2 кнопки в колонку ---- */
@media (max-width: 1024px) {
  /* «наезд» под предыдущий блок (Figma: блок 11 утоплен под FAQ).
     section.cta — выше специфичность глобального `.cta{margin-top:0}` в responsive.css.
     FAQ имеет z-index 2 > CTA z-index 1 → бел. карточка FAQ перекрывает верх CTA.
     #6 sticky — как на десктопе: CTA пиннится, футер (z2) наезжает поверх него при скролле.
     Перебиваем `responsive.css .cta{position:relative;height:auto}` бОльшей специфичностью. */
  section.cta { margin-top: -40px; position: sticky; top: 0; height: 100svh; z-index: 1; }
  .cta { width: 100%; border-radius: 0; }
  .cta__tag { left: 16px; top: 72px; }   /* +40: компенсируем наезд, бейдж не под FAQ */
  .cta__content {
    left: 16px; right: 16px; top: auto; bottom: 96px;   /* #5 подняли на 48 — футер налазит снизу, не должен накрыть кнопки */
    width: auto; max-width: none; gap: 32px;
  }
  .cta__title { font-size: 48px; line-height: 56px; white-space: normal; }
  .cta__desc { max-width: none; font: 700 18px/26px "adineue PRO Cyr", sans-serif; letter-spacing: 0.02em; }
  .cta__buttons { flex-direction: column; gap: 12px; align-items: stretch; width: 100%; }
}