/* ============================================================================
   SIGVIN — Страница ПРОЕКТА (деталь, /projekty/<slug>). ШАБЛОН.
   Переиспользует navbar/gframe/tag/btn-split (hero.css), CTA (cta.css),
   Footer (footer.css). Тут: hero проекта + блоки 2–6 (характеристики/описание/
   галерея/процесс/похожие). Все значения — кастомные под каждый проект.
   ========================================================================== */

/* ===================== HERO проекта (Figma 328:2044, 1440×848) ============= */
.dhero {
  position: relative;
  width: var(--frame-w);
  max-width: 100%;
  min-height: 100vh;                        /* фото-hero на всю высоту экрана (было фикс 848) */
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  background: var(--dark-black);
}
.dhero__bg {
  position: absolute;
  top: -8%; left: 0;
  width: 100%; height: 116%;
  object-fit: cover;
  z-index: 0;
}
.dhero__overlay {
  position: absolute; inset: 0;
  background: rgba(17, 17, 17, 0.32);     /* dark/32% */
  z-index: 1;
  pointer-events: none;
}
.dhero__nav {                              /* navbar — тот же компонент, позиция как на главной */
  position: absolute;
  top: var(--margin); left: var(--margin);
  width: calc(var(--frame-w) - var(--margin) * 2);
  max-width: calc(100% - var(--margin) * 2);
  z-index: 3;
}

/* контент: хлебные крошки + заголовок проекта 100px + локация */
.dhero__content {
  position: absolute;
  left: 80px; bottom: 128px;                /* привязка к низу (в 848-фрейме = top:404; на высоком экране — держится внизу) */
  width: 916px;
  max-width: calc(100% - 160px);
  z-index: 2;
  display: flex; flex-direction: column; gap: 16px;
}
.dhero__crumbs { display: flex; align-items: center; gap: 12px; }
.dhero__crumbs .tag { --glass-border: var(--light-16); padding: 8px 12px; }   /* рамка 16% */
.dhero__crumb-parent { color: var(--light-32); transition: color .2s ease; }  /* родитель — тусклее */
a.dhero__crumb-parent:hover { color: var(--light-white); }
.dhero__crumb-cur { color: var(--light-white); }
.dhero__crumb-div { width: 2px; height: 2px; flex: none; border-radius: 0.643px; background: var(--light-32); }

.dhero__title {                            /* «Amazon» (thin) / «WRO1 / WRO2» (bold) — 100px */
  display: flex; flex-direction: column;
  color: var(--light-white);
}
.dhero__title-thin { font: 400 100px/108px "Geologica Cursive", sans-serif; letter-spacing: -0.08em; white-space: nowrap; }
.dhero__title-bold { font: 700 100px/108px "adineue PRO Cyr", sans-serif; letter-spacing: -0.03em; white-space: nowrap; }
.dhero__loc { color: var(--light-white); font: 700 24px/32px "adineue PRO Cyr", sans-serif; letter-spacing: 0.02em; }

/* ===================== BLOCK 2: характеристики проекта (Figma 520:7784) =====
   Таблица 3×2: ячейки с лейблом (20) + значением (32), общие 1px-границы #e2e2e2,
   уголки-скобки на пересечениях (gframe+corners.js), чередование bg, Klient = тёмная с лого. */
.pspecs {
  position: relative;
  z-index: 3;                              /* ВЫШЕ block3 → белым наезжает и на hero, и на block3 */
  width: var(--frame-w);
  max-width: 100%;
  margin: 0 auto;                          /* БЕЗ наезда на hero → фото-hero виден целиком на весь экран */
  padding: 80px 0;                         /* контент 80px от верхней и нижней грани фона */
  background: var(--light-white);
  border-radius: var(--r-card);
  display: flex; flex-direction: column;
}
/* грид адаптируется по числу ячеек (data-count): 6 → 3×2, 4 → 2×2, 2 → 2×1.
   Ячейки без клиента растягиваются на всю ширину (подтверждено с клиентом). */
.pspecs__grid {
  flex: 0 0 auto;
  width: var(--content-w);
  max-width: calc(100% - 160px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* дефолт (6 ячеек) */
  grid-auto-rows: minmax(145px, auto);     /* ряд ≥145, растёт под длинный текст */
  gap: 1px;
  background: #e2e2e2;                      /* цвет линий просвечивает в 1px-зазорах */
  border: 1px solid #e2e2e2;
}
.pspecs__grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.pspecs__grid[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
.pspecs__grid[data-count="6"] { grid-template-columns: repeat(3, 1fr); }
.pspec {
  position: relative;
  display: flex; flex-direction: column; gap: 16px; justify-content: center;
  min-height: 145px;
  padding: 32px;
  background: var(--light-white);
  --glass-border: transparent;             /* кольцо gframe прячем — границы даёт грид */
  --corner-color: var(--dark-black);       /* ЧЁРНЫЕ уголки на светлых ячейках (было серые) */
}
.pspec:nth-child(even) { background: var(--light-light); }   /* #f5f5f5 в шахмат */
.pspec--client {                           /* Klient — тёмная ячейка с лого (лого по левому краю) */
  background: var(--dark-black);
  --corner-color: var(--light-white);
  align-items: flex-start;
}
.pspec__label { color: var(--dark-64); }                     /* t-label-xl 20/28 */
.pspec--client .pspec__label { color: var(--light-white); }
.pspec__value { display: inline-block; color: var(--dark-black); font: 700 32px/40px "adineue PRO Cyr", sans-serif; }
.pspec__value sup { font-size: 0.645em; vertical-align: super; line-height: 0; }
.pspec__logo { height: 40px; width: auto; max-width: 100%; display: block; filter: brightness(0) invert(1); }   /* лого клиента ВСЕГДА белое (по просьбе) */
.pspec__logo-text { color: var(--light-white); font: 700 28px/34px "adineue PRO Cyr", sans-serif; letter-spacing: 0.4px; }   /* фолбэк когда нет webp-лого */
/* hover: значение «прокручивается» в блюре (как цифры статистики на главной) */
.pspec:hover .pspec__value { animation: stat-num-roll .62s cubic-bezier(0.5, 0, 0.2, 1); }
@media (prefers-reduced-motion: reduce) { .pspec:hover .pspec__value { animation: none; } }

/* ===================== BLOCK 3: Wyzwanie i Zakres Prac (Figma 520:7905/342:236)
   Таб-блок: 2 таба слева (Wyzwanie/Zakres Prac) → панель справа меняет контент. */
.ptask {
  position: relative;
  z-index: 1;                              /* RECESSED: block2 (сверху) и block4 (снизу) НАЕЗЖАЮТ на этот */
  width: var(--frame-w); max-width: 100%;
  height: 880px;                            /* 136 + 608 контент + 136 */
  margin: -40px auto 0;                     /* наезд на block2 (умеренный — блоки не «съедаются») */
  padding: 136px 0;                        /* 40 компенс. наезда + 96 → ВИДИМЫЕ 96px от соседних блоков до претайтла/низа */
  background: var(--dark-black);
  border-radius: var(--r-card);
  overflow: hidden;
  isolation: isolate;
}
.ptask__grid {
  position: absolute; inset: 0; z-index: 0;
  background: url('/assets/ui/grid-dark.svg') center top / 1440px auto no-repeat;
  opacity: .5; pointer-events: none;
}
.ptask > :not(.ptask__grid) { position: relative; z-index: 1; }

.ptask__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  width: var(--content-w); max-width: calc(100% - 160px); margin: 0 auto;
}
.ptask__head-left { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.ptask__heading { color: var(--light-white); white-space: nowrap; }   /* t-h2-thin + t-h2 (64) */
.ptask__sub { width: 552px; max-width: 45%; color: var(--light-64); font: 700 24px/32px "adineue PRO Cyr", sans-serif; letter-spacing: 0.02em; }
.ptask__sub b { color: var(--light-white); }

.ptask__body {
  display: flex; gap: 25px;
  width: var(--content-w); max-width: calc(100% - 160px); margin: 48px auto 0;
  height: 428px;
}

/* левая колонка — 2 таба */
.ptask__tabs { display: flex; flex-direction: column; gap: 12px; flex: 1 0 0; min-width: 0; }
.ptask__tab {
  flex: 1 0 0; min-height: 0;
  position: relative;
  padding: 8px;
  background: var(--dark-light);
  border-radius: 20px;
  --glass-border: var(--border-linear-soft);   /* Linear-обводка вдвое прозрачнее */
  cursor: pointer;
  text-align: left;
}
/* кольцо-обводка таба (собственное ::before — как у пилюли, чтобы уживалось с corners.js) */
.ptask__tab::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  border-radius: inherit; padding: 1px;
  background: var(--glass-border);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.ptask__tab-inner {
  display: block;
  position: relative; height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(17, 17, 17, 0.32);
  transition: background-color .4s ease;
}
.ptask__tab.is-active .ptask__tab-inner { background-color: var(--dark-black); }
.ptask__tab-inner::before {                /* фоновый паттерн кнопки (Figma 520:7928): неактив 48%, актив 100% */
  content: ""; position: absolute; inset: 0;
  background: url('/assets/projekt/tab-pattern.webp') center / cover no-repeat;
  opacity: .48; pointer-events: none;
  transition: opacity .4s ease;
}
.ptask__tab.is-active .ptask__tab-inner::before { opacity: 1; }
.ptask__tab-icon { position: absolute; left: 20px; top: 20px; width: 80px; height: 80px; opacity: .64; transition: opacity .4s ease; }
.ptask__tab.is-active .ptask__tab-icon { opacity: 1; }
.ptask__tab-icon img { width: 100%; height: 100%; display: block; }
.ptask__tab-label { position: absolute; left: 20px; bottom: 24px; font: 700 32px/40px "adineue PRO Cyr", sans-serif; color: var(--light-48); transition: color .4s ease; }
.ptask__tab.is-active .ptask__tab-label { color: var(--light-white); }

/* правая панель */
.ptask__panel {
  position: relative;
  flex: 0 0 930px; max-width: calc(100% - 334px);
  height: 100%;
  background: var(--dark-light);
  border-radius: 24px;
  overflow: hidden;
  --glass-border: var(--border-linear-soft);   /* Linear-обводка вдвое прозрачнее */
}
/* кольцо-обводка панели (::before остаётся на месте под overflow:hidden) */
.ptask__panel::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  border-radius: inherit; padding: 1px;
  background: var(--glass-border);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.ptask__list {
  position: absolute; left: 23px; top: 23px; right: 351px; bottom: 23px;
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px;
  background: var(--dark-black);
  border-radius: 20px;
  overflow: clip;                          /* clip content: пункты не вылазят за область */
}
.ptask__item {
  display: flex; align-items: center; gap: 24px;
  padding: 12px 20px;
  background: var(--light-4);
  border-radius: 12px;
}
.ptask__list--fill .ptask__item { flex: 1 0 0; min-height: 0; }   /* Wyzwanie: 3 карточки тянутся */
.ptask__item-pill {
  position: relative;
  flex: none;
  width: 60px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; -webkit-appearance: none; appearance: none;
  border-radius: var(--r-pill);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.12) 100%);
  --glass-border: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 100%);   /* вдвое прозрачнее (было .36/.12) */
  --corner-color: var(--light-white);      /* БЕЛЫЕ уголки (Figma 520:7990) */
  color: var(--light-white);
}
/* кольцо-обводка пилюли (собственное, НЕ gframe — иначе corners.js стирает ручные уголки) */
.ptask__item-pill::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: var(--glass-border);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
/* уголки-скобки на bounding-box пилюли (вручную через CORNERS в ptask.js) */
.ptask__item-pill .corner { z-index: 2; }
.ptask__item-pill.t-label-xxl { font: 700 24px/32px "adineue PRO Cyr", sans-serif; letter-spacing: 0.02em; }
.ptask__item-pill svg { width: 20px; height: 20px; }
.ptask__item-text { flex: 1 0 0; min-width: 0; color: var(--light-white); font: 700 18px/26px "adineue PRO Cyr", sans-serif; letter-spacing: 0.02em; }
/* Zakres Prac — аккордеон (FAQ-логика): head + раскрываемое описание.
   Компактные строки (pill 40, padding 8/16) — 5 пунктов + открытое описание влезают в 382px-бокс. */
.ptask__item--plus {
  flex-direction: column; align-items: stretch; gap: 0; justify-content: flex-start;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color .35s ease;
}
.ptask__item--plus .ptask__item-pill { height: 40px; }
/* натуральная высота (закрытая ~56px, открытая = head + описание): плавная анимация max-height, без flex-снапа */
.ptask__list--acc .ptask__item--plus { flex: 0 0 auto; }
.ptask__item--plus.is-open { background: var(--light-8); }
.ptask__item-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ptask__item-a {
  max-height: 0; opacity: 0; margin-top: 0; overflow: hidden;
  color: var(--light-64);
  font: 300 16px/24px "Geologica Cursive", sans-serif; letter-spacing: -0.05em;
  transition: max-height .45s cubic-bezier(0.22, 1, 0.36, 1), opacity .3s ease, margin-top .45s ease;
}
.ptask__item--plus.is-open .ptask__item-a { max-height: 120px; opacity: 1; margin-top: 10px; }
/* «+» → «−» (горизонталь всегда, вертикаль скрывается на раскрытии) */
.ptask__plus-icon { position: relative; width: 20px; height: 20px; color: var(--light-white); }
.ptask__plus-icon::before,
.ptask__plus-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: currentColor; transition: opacity .3s ease, transform .35s ease;
}
.ptask__plus-icon::before { width: 13px; height: 1.6px; transform: translate(-50%, -50%); }   /* «+/−» чуть меньше (было 16) */
.ptask__plus-icon::after  { width: 1.6px; height: 13px; transform: translate(-50%, -50%); }
.ptask__item--plus.is-open .ptask__plus-icon::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .ptask__item-a, .ptask__item--plus, .ptask__plus-icon::after { transition: none; }
}

.ptask__img {
  position: absolute; right: 11px; top: 11px;
  width: 314px; height: 408px;
  background: var(--dark-black);
  border-radius: 12px;
  overflow: hidden;
}
.ptask__img img { width: 100%; height: 100%; object-fit: cover; display: block; }   /* PNG = вся панель (сетка+уголки+иконка) */

/* ===================== BLOCK 4: Галерея zdjęć (Figma 520:8065) =============
   Фуллбли активное фото + затемнение; тег, подпись+индекс снизу; колонка миниатюр
   + стрелки справа. Интерактивно (pgallery.js). */
.pgallery {
  position: relative;
  z-index: 2;
  width: var(--frame-w); max-width: 100%;
  height: 848px;
  margin: -40px auto 0;                     /* умеренный наезд на block3 */
  border-radius: var(--r-card);
  overflow: hidden;
  isolation: isolate;
  background: var(--dark-black);
}
.pgallery__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.pgallery__overlay { position: absolute; inset: 0; background: rgba(17, 17, 17, 0.32); z-index: 1; pointer-events: none; }
.pgallery .hero__sep { z-index: 3; }

.pgallery__tag { position: absolute; left: 80px; top: 96px; z-index: 2; }

.pgallery__caption { position: absolute; left: 80px; bottom: 96px; z-index: 2; display: flex; flex-direction: column; gap: 5px; }
.pgallery__cap-row { display: flex; align-items: center; gap: 16px; }
.pgallery__cap-dot { width: 4px; height: 4px; flex: none; border-radius: 1.285px; background: var(--light-white); }
.pgallery__cap-text { color: var(--light-white); }
.pgallery__index { color: var(--light-white); white-space: nowrap; display: flex; align-items: baseline; }
.pgallery__index-cur { font: 700 146px/156px "adineue PRO Cyr", sans-serif; letter-spacing: -0.03em; }
.pgallery__index-total { font: 400 64px/72px "Geologica Cursive", sans-serif; letter-spacing: -0.08em; }

.pgallery__thumbs { position: absolute; right: 80px; top: 96px; z-index: 2; width: 189px; display: flex; flex-direction: column; gap: 24px; align-items: center; }
.pgallery__thumbs-strip {
  position: relative;
  width: 100%; padding: 8px;
  background-color: var(--light-16); border-radius: 20px;   /* -color: чтобы .glass-sheen (background-image) не сбрасывался */
  overflow: hidden;                         /* обрезаем скролл-трек по скруглению; рамка ::before остаётся на месте */
}
.pgallery__thumbs-strip::before {           /* градиентная обводка как у кнопок хедера */
  content: ""; position: absolute; inset: 0; z-index: 1;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.12) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
/* внутренний скролл-трек: 9 миниатюр не влезают в блок → вертикальный скролл (скрытый скроллбар) */
.pgallery__thumbs-track {
  position: relative;                       /* offsetParent миниатюр = трек (для scrollTo активной) */
  max-height: 528px;                        /* ~5 миниатюр + пик 6-й (сигнал скролла) */
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.pgallery__thumbs-track::-webkit-scrollbar { display: none; }
.pgallery__thumb {
  position: relative; flex: none;           /* НЕ сжимать в скролл-треке — держать 96px, трек скроллит */
  width: 173px; height: 96px;
  border-radius: 12px; overflow: hidden;
  cursor: pointer;
}
.pgallery__thumb::after {                    /* градиентная обводка как у кнопок хедера */
  content: ""; position: absolute; inset: 0; z-index: 3;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.12) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.pgallery__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pgallery__thumb-ov { position: absolute; inset: 0; background: rgba(17, 17, 17, 0.64); transition: opacity .35s ease; }
.pgallery__thumb.is-active .pgallery__thumb-ov { opacity: 0; }
.pgallery__thumb-num { position: absolute; right: 12px; top: 11px; color: var(--light-48); font: 500 14px/20px "Geist Mono", monospace; transition: color .35s ease; }
.pgallery__thumb.is-active .pgallery__thumb-num { color: var(--light-white); }

.pgallery__nav { display: flex; gap: 12px; }
.pgallery__nav-btn {
  position: relative;
  width: 72px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background-color: var(--light-16);          /* тинт под frosted-glass (обводка+блюр = .glass .gframe + data-liquid-glass) */
  --glass-border: linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.12) 100%);
  color: var(--light-white); cursor: pointer;
  transition: background-color .3s ease, transform .3s cubic-bezier(0.22, 1, 0.36, 1);
}
.pgallery__nav-btn:hover { background-color: var(--light-32); transform: scale(1.05); }
.pgallery__nav-btn svg { position: relative; z-index: 2; width: 24px; height: 24px; }
.pgallery__nav-prev svg { transform: rotate(180deg); }

/* ===================== BLOCK 5: Opinia clienta (Figma 520:8384) ============
   Тёмный блок: слева тег+заголовок, справа карточка-отзыв (лого+период/стоимость+
   цитата+компания+кавычки). Статичный шаблон. */
.popinion {
  position: relative; z-index: 1;          /* RECESSED: block4 (сверху) наезжает на этот */
  width: var(--frame-w); max-width: 100%;
  height: 800px;
  margin: -40px auto 0;                     /* умеренный наезд на block4 */
  background: var(--dark-black);
  border-radius: var(--r-card);
  overflow: hidden;
  isolation: isolate;
  display: flex; align-items: center;      /* контент по центру фикс-высоты 800 */
}
.popinion__grid {
  position: absolute; inset: 0; z-index: 0;
  background: url('/assets/ui/grid-dark.svg') center / 1440px auto no-repeat;
  opacity: .5; pointer-events: none;
}
.popinion__inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 24px;
  width: var(--content-w); max-width: calc(100% - 160px); margin: 0 auto;
  padding: 120px 0;
}
.popinion__left { width: 411px; flex: none; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.popinion__heading { width: 367px; max-width: 100%; color: var(--light-white); }

.popinion__card {
  position: relative;
  flex: 1 0 0; min-width: 0;
  display: flex; flex-direction: column; gap: 32px; align-items: flex-start;
  padding: 40px 48px;
  background: var(--dark-light);
  border-radius: 24px;
  --glass-border: var(--border-linear-soft);   /* вдвое прозрачнее */
  overflow: hidden;
}
/* Linear-обводка плажки отзыва (::before-кольцо под overflow:hidden) */
.popinion__card::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  border-radius: inherit; padding: 1px;
  background: var(--glass-border);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.popinion__top { display: flex; flex-direction: column; gap: 40px; align-items: flex-start; width: 100%; position: relative; z-index: 1; }
.popinion__logo { height: 28px; width: auto; display: block; filter: brightness(0) invert(1); }   /* лого клиента ВСЕГДА белое */
.popinion__logo-text { color: var(--light-white); font: 700 22px/28px "adineue PRO Cyr", sans-serif; letter-spacing: 0.4px; }   /* фолбэк без webp-лого */
.popinion__meta { display: flex; flex-direction: column; gap: 8px; }
.popinion__meta-row, .popinion__company { display: flex; align-items: center; gap: 16px; color: var(--light-48); }
.popinion__meta-row b, .popinion__meta-row span:not(.popinion__dot) { font-weight: 500; }
.popinion__meta-row b { color: var(--light-white); }
.popinion__dot { width: 4px; height: 4px; flex: none; border-radius: 1.285px; background: var(--light-white); }
.popinion__quote { position: relative; z-index: 1; color: var(--light-white); font: 700 32px/40px "adineue PRO Cyr", sans-serif; }
.popinion__company { position: relative; z-index: 1; }

.popinion__qmark {
  position: absolute; z-index: 0;
  width: 77px; height: 65px;
  background: var(--light-8);                /* вдвое прозрачнее (было --light-16) */
  -webkit-mask: url('/assets/reviews/quote-mark.svg') center / contain no-repeat;
          mask: url('/assets/reviews/quote-mark.svg') center / contain no-repeat;
  pointer-events: none;
}
.popinion__qmark--open  { left: 24px;  top: 172px; }
.popinion__qmark--close { right: 48px; bottom: 86px; transform: rotate(180deg); }

/* ===================== BLOCK 6: Więcej Realizacji (Figma 520:8478) =========
   Переиспользуем .projects (карусель + .proj-card + projects.js), без табов.
   projekt.css грузится ТОЛЬКО на этой странице → оверрайды наезда безопасны. */
.projects {
  z-index: 2;                  /* белым наезжает на тёмный block5 (на главной было z1) */
  height: 800px;               /* фикс-высота блока (как FAQ) */
  margin-top: -40px;           /* умеренный наезд на block5 */
  padding: 96px 0 0;           /* block6 ВЫСТУПАЕТ (z2, верх не перекрыт) → 96 = видимый отступ от верхней грани до претайтла (БЕЗ компенсации наезда) */
  border-radius: var(--r-card);  /* скругление блока 40px */
  overflow: hidden;
  isolation: isolate;
}
.projects__head { gap: 0; }    /* нет табов — лишний gap не нужен */
/* карточки вписаны в контентную ширину (выровнены с шапкой, без вылета вправо) — ограничиваем РЯД,
   а не карусель: карусель остаётся на всю ширину блока → стрелки скролла точно как на главной
   (position/size/24px-от-граней наследуются из базового .projects__arrow, без оверрайдов). */
.projects .projects__row {
  width: var(--content-w); max-width: calc(100% - 160px);
  margin: 0 auto; padding: 0;
}

/* ============================================================================
   МОБАЙЛ (≤767, фрейм 375) — рефлоу блоков страницы проекта.
   Переиспользуем существующие компоненты: гасим фикс-высоты/десктоп-наезды,
   складываем в колонку (тёмный body-bg → тёмные блоки бесшовно, белые = карточки).
   Figma: Hero 520:5617 · specs 520:5965 · task 520:5566 · gallery 534:636 ·
          opinion 534:1068 · projects 535:1291 · CTA 520:5528 · footer 520:6587.
   ========================================================================== */
@media (max-width: 1024px) {

  /* ---------- BLOCK 1: Hero (dhero) — как index-hero: лого+бургер, контент внизу ---------- */
  /* образец O nas: hero растёт под контент, контент в ПОТОКЕ (не absolute) → ничего не режется/не наезжает */
  .dhero { width: 100%; height: auto; min-height: 100svh; display: flex; flex-direction: column; }
  .dhero__overlay { background: var(--dark-48); }                 /* мобайл темнее для читаемости */
  .dhero__nav { position: relative; z-index: 3; flex: none; top: 0; left: 0; right: auto; width: 100%; max-width: none; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 0; }
  .dhero__content { position: relative; z-index: 2; flex: 1 1 auto; inset: auto; left: auto; right: auto; top: auto; bottom: auto; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px 16px calc(40px + env(safe-area-inset-bottom, 0px)); width: auto; max-width: none; }
  .dhero__title-thin { font: 400 64px/72px "Geologica Cursive", sans-serif; letter-spacing: -0.08em; white-space: normal; margin-bottom: -13px; }
  .dhero__title-bold { font: 700 64px/51px "adineue PRO Cyr", sans-serif; letter-spacing: 0; white-space: normal; }
  .dhero__loc { font: 700 18px/26px "adineue PRO Cyr", sans-serif; letter-spacing: 0.02em; }

  /* ---------- BLOCK 2: specs — грид 3×2 → одна колонка из 6 строк ---------- */
  .pspecs { height: auto; margin-top: 0; padding: 16px; border-radius: 32px; }  /* margin-top:0 — НЕ наезжаем на hero, чтобы фото было на весь экран (нижний блок под фолдом) */
  /* [data-count] — чтобы перебить десктопные .pspecs__grid[data-count="N"] (равная специфичность, но mobile ниже по файлу) */
  .pspecs__grid,
  .pspecs__grid[data-count] { flex: 0 0 auto; grid-template-columns: 1fr; grid-auto-rows: auto; grid-template-rows: none; width: 100%; max-width: 100%; }
  .pspec { min-height: 0; padding: 16px 20px; gap: 8px; }
  .pspec--client { min-height: 92px; }
  .pspec--client .pspec__logo { height: 32px; }
  .pspec__logo-text { font-size: 22px; line-height: 28px; }
  .pspec__label { font-size: 14px; line-height: 20px; letter-spacing: 0.28px; }
  .pspec__value { font-size: 24px; line-height: 32px; letter-spacing: 0.48px; white-space: nowrap; }

  /* ---------- BLOCK 3: task — 2 колонки → колонка: табы стопкой, панель под ними, фото скрыто ---------- */
  .ptask { height: auto; margin-top: 0; padding: 48px 16px; border-radius: 0; }
  .ptask__head { flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; max-width: 100%; }
  .ptask__heading { white-space: normal; }
  .ptask__heading .t-h2-thin { display: block; }                 /* тонкая часть на строке 1, болд с новой строки (Figma) */
  .ptask__sub { display: none; }                                 /* сабтайтл на мобайле не показывается (Figma) */
  .ptask__body { flex-direction: column; gap: 16px; width: 100%; max-width: 100%; height: auto; margin-top: 32px; }
  .ptask__tabs { flex: none; gap: 8px; width: 100%; }
  .ptask__tab { flex: none; height: 80px; }
  /* таб-контент → ряд: иконка 52 слева, лейбл справа (десктоп: иконка сверху / лейбл снизу) */
  .ptask__tab-inner { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 0 20px; }
  .ptask__tab-inner::before { background-image: url('/assets/projekt/tab-pattern-mobile.webp'); }   /* мобильный фон переключалок (широкий, под ряд) */
  .ptask__tab-icon { position: static; left: auto; top: auto; width: 52px; height: 52px; flex: none; margin-left: -16px; }   /* иконка на 16px левее (в уголок-рамку фона) */
  .ptask__tab-label { position: static; left: auto; bottom: auto; font-size: 24px; line-height: 32px; }
  .ptask__panel { flex: none; width: 100%; max-width: 100%; height: auto; padding: 12px; border-radius: 28px; }
  .ptask__list { position: static; inset: auto; width: 100%; height: auto; }
  .ptask__img { display: none; }
  .ptask__list--fill .ptask__item { flex: none; }               /* нумерованные — натуральная высота */
  .ptask__item { flex-direction: column; align-items: flex-start; gap: 12px; }   /* пилюля сверху, текст снизу */
  .ptask__item--plus { gap: 0; align-items: stretch; }           /* head на всю ширину → текст fill, кнопка +/− по правому краю */
  .ptask__item-head { width: 100%; }
  .ptask__item--plus .ptask__item-pill { margin-left: auto; }    /* auto-отступ: кнопка прижата вправо */

  /* ---------- BLOCK 4: gallery — фуллбли фото, тумбы скрыты, подпись+индекс+стрелки внизу ---------- */
  .pgallery { height: 640px; margin-top: 0; border-radius: 32px; }
  .pgallery__tag { left: 16px; top: 48px; }   /* претайтл «Galeria zdjęć» — сверху слева (был скрыт) */
  .pgallery__thumbs-strip { display: none; }
  .pgallery__thumbs { left: auto; right: 16px; top: auto; bottom: 40px; width: auto; align-items: flex-end; gap: 0; }   /* стрелки по правому краю (16px) */
  .pgallery__caption { left: 16px; right: 16px; bottom: 112px; }
  .pgallery__index-cur   { font-size: 120px; line-height: 128px; }   /* чуть меньше (было 146) — меньше перекрывает фото */
  .pgallery__index-total { font-size: 52px; line-height: 60px; }

  /* ---------- BLOCK 5: opinion — 2 колонки → колонка: заголовок сверху, карточка снизу ---------- */
  .popinion { height: auto; margin-top: 0; border-radius: 0; align-items: stretch; }
  .popinion__inner { flex-direction: column; align-items: stretch; gap: 0; width: 100%; max-width: 100%; padding: 48px 16px 88px; }   /* низ 88 = 48 видимый отступ карточки до след. блока + 40 компенс. наезда projects */
  .popinion__left { width: 100%; margin-bottom: 36px; }
  .popinion__heading { width: 100%; }
  .popinion__heading .t-h2-thin { display: block; }             /* тонкая часть строкой выше болда */
  .popinion__card { flex: none; width: 100%; padding: 48px 24px; gap: 24px; border: none; }
  /* обводка карточки — градиент 4% (вместо сплошной белой) */
  .popinion__card::before {
    content: ""; position: absolute; inset: 0; z-index: 2;
    border-radius: inherit; padding: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
  }
  .popinion__top { gap: 16px; }
  .popinion__quote { font: 700 20px/28px "adineue PRO Cyr", sans-serif; letter-spacing: 0.4px; }
  .popinion__qmark--open { left: 16px; top: 132px; }
  .popinion__qmark--close { right: 16px; bottom: 48px; }

  /* ---------- BLOCK 6: projects — гасим ДЕСКТОП-оверрайды (mobile из projects.css берёт верх) ---------- */
  .projects { height: auto; overflow: visible; padding: 48px 0 48px; border-radius: 32px; }   /* верх=низ=48 → контент по центру по вертикали (было 88 верх → сверху лишний воздух) */
  .projects .projects__row { width: auto; max-width: none; margin: 0; padding: 0 16px; }
}