/* ============================================================================
   SIGVIN — страница KARIERA (Figma 580:*). Блоки:
     1 khero    — Hero «Buduj Razem z Nami» (580:3054)
     2 kjobs    — «Otwarte Rekrutacje» (список вакансий, 580:3406)
     3 kproces  — «Jak wygląda Rekrutacja» (4 стеклянных шага, 580:4728)
     4 kopinie  — «Co mówią Nasi ludzie» (слайдер отзывов, 580:3792)
   CTA (580:3754) и Footer (580:3924) — переиспользуют .cta / .footer.
   ========================================================================== */

/* ===================== BLOCK 1: HERO ============================== */
.khero {
  position: relative; z-index: 1;
  width: var(--frame-w); max-width: 100%;
  height: 100vh; min-height: 848px; margin: 0 auto;   /* тянем на весь экран, как .hero — без полоски след. блока */
  overflow: hidden; isolation: isolate;
  border-radius: 0;                                 /* #1 фон hero без скруглений */
  background: var(--dark-black);
}
.khero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.khero__overlay { position: absolute; inset: 0; background: var(--dark-32); z-index: 1; pointer-events: none; }
.khero .hero__sep { z-index: 2; }

.khero__nav {
  position: absolute; top: var(--margin); left: 50%; transform: translateX(-50%);
  width: calc(var(--frame-w) - var(--margin) * 2); max-width: calc(100% - var(--margin) * 2);
  z-index: 5;
}

.khero__content { position: absolute; inset: auto 0 0 0; height: 848px; z-index: 2; }   /* контент прижат к низу — при росте hero остаётся на месте (без пустого фото под ним) */
.khero__title { position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: var(--light-white); }
.khero__title-thin { position: absolute; left: 80px; top: 291px; white-space: nowrap; }
.khero__title-bold { position: absolute; left: 319px; top: 405px; white-space: nowrap; }
.khero__sub { position: absolute; left: 80px; top: 609px; width: 588px; color: var(--light-white); }
.khero__btn { position: absolute; left: auto; right: 80px; top: 613px; }

/* ===================== BLOCK 2: OTWARTE REKRUTACJE =============== */
.kjobs {
  position: relative; z-index: 5;                 /* #4 kjobs наезжает поверх следующего блока (kproces) */
  width: var(--frame-w); max-width: 100%;
  margin: -40px auto 0; padding: 96px 0;
  background: var(--light-white); border-radius: var(--r-card);
  overflow: hidden; isolation: isolate;
}
.kjobs__inner { position: relative; z-index: 1; width: var(--content-w); max-width: calc(100% - 160px); margin: 0 auto; }
.kjobs__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.kjobs__head-left { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.kjobs__count { --glass-border: var(--border-dark); --corner-color: var(--dark-48); color: var(--dark-black); }
.kjobs__heading .t-h2-thin, .kjobs__heading .t-h2 { color: var(--dark-black); }
.kjobs__sub { align-self: center; color: var(--dark-black); font: 700 24px/32px "adineue PRO Cyr", sans-serif; letter-spacing: 0.02em; white-space: nowrap; }
.kjobs__sub .dim { color: var(--dark-64); }

.kjobs__list { margin-top: 44px; display: flex; flex-direction: column; gap: 12px; }

/* пусто — нет открытых рекрутаций (Figma 715:3059): пунктирная карточка с водяным
   знаком, по центру заголовок+описание+кнопка Aplikuj (.btn-split, как в hero) */
.kjobs__empty {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 436px; padding: 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px;
  background: var(--dark-2); border: 1px dashed var(--dark-16); border-radius: 32px;
}
.kjobs__empty::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("/assets/ui/kjobs-empty-watermark.svg") center / cover no-repeat;
}
.kjobs__empty-inner { display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 588px; text-align: center; }
.kjobs__empty-title { color: var(--dark-black); }
.kjobs__empty-desc { color: var(--dark-64); }
.kjobs__empty-btn { flex: none; }

/* строка вакансии: внешняя обёртка = тёмный «reveal»-полоска справа со стрелкой */
.kjob {
  display: flex; align-items: center; gap: 10px; padding-right: 12px;
  background: var(--dark-black); border-radius: 24px; overflow: hidden;
  transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .35s ease;
}
/* #5 ховер как в Certyfikaty: подъём карточки вакансии, без тени */
.kjob:hover { transform: translateY(-4px); z-index: 2; }
.kjob__inner {
  flex: 1 1 auto; min-width: 0; box-sizing: border-box; min-height: 128px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px; background: var(--light-light); border-radius: 24px;
}
.kjob__info { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.kjob__title { color: var(--dark-black); }
.kjob__meta {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 0;
  --glass-border: var(--border-dark); --corner-color: var(--dark-48); color: var(--dark-64);
}
.kjob__status {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 0; flex: none;
  background: rgba(45, 142, 52, 0.12);
  --glass-border: var(--border-dark); --corner-color: var(--dark-48); color: var(--color-green);
}
.kjob__status-dot { width: 6px; height: 6px; flex: none; background: var(--color-green); border-radius: 0 1.3px; }
.kjob__cta { display: flex; align-items: center; }        /* обёртка стрелки; текст «Zobacz» только на мобиле */
.kjob__cta-text { display: none; }
.kjob__arrow {
  flex: none; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  color: var(--light-white);
}
.kjob__arrow svg { width: 20px; height: 20px; }
/* ховер: карточка чуть серее + стрелка подёргивается (по диагонали, как сама стрелка) */
.kjob__inner { transition: background-color .3s ease; }
.kjob:hover .kjob__inner { background: #ececec; }
.kjob__arrow svg { transition: transform .3s ease; }
.kjob:hover .kjob__arrow svg { animation: kjob-arrow-nudge .55s ease; }
@keyframes kjob-arrow-nudge { 0%, 100% { transform: translate(0, 0); } 45% { transform: translate(3px, -3px); } }

/* ===================== BLOCK 3: JAK WYGLĄDA REKRUTACJA ========== */
.kproces {
  position: relative; z-index: 3;
  width: var(--frame-w); max-width: 100%;
  margin: -40px auto 0; padding: 136px 0 96px;
  overflow: hidden; isolation: isolate;
  border-radius: 0; background: var(--dark-black);   /* #4 без скруглений — kjobs наезжает сверху, без просветов */
}
.kproces__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.kproces__overlay { position: absolute; inset: 0; background: var(--dark-32); z-index: 1; pointer-events: none; }
.kproces__inner { position: relative; z-index: 2; width: var(--content-w); max-width: calc(100% - 160px); margin: 0 auto; }
.kproces__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.kproces__heading .t-h2-thin, .kproces__heading .t-h2 { color: var(--light-white); }

.kproces__cards { margin-top: 56px; display: flex; gap: 12px; align-items: stretch; }
.kpcard {
  flex: 1 1 0; min-width: 0; box-sizing: border-box; height: 428px; padding: 8px;
  display: flex; flex-direction: column; gap: 0;
  border-radius: 20px; background-color: var(--light-16);   /* НЕ shorthand — иначе .glass sheen собьётся */
  --glass-border: var(--border-linear);   /* Linear-обводка как в хедере */
  transition: transform .45s cubic-bezier(0.22, 1, 0.36, 1), background-color .3s ease, box-shadow .35s ease;
}
/* #3 ховер как в Certyfikaty: подъём + подсветка фона, без тени */
.kpcard:hover {
  transform: translateY(-4px); z-index: 2;
  background-color: rgba(255, 255, 255, 0.22);
}
.kpcard__icon {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--dark-64); overflow: hidden;
  --glass-border: var(--border-linear);
}
.kpcard__num { position: absolute; top: 12px; right: 16px; z-index: 3; color: var(--light-white); }
.kpcard__cell {                               /* квадрат-подложка под иконкой + уголки-скобки */
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 147px; height: 147px; z-index: 1;
  background: var(--light-8); border-radius: 0;
  --glass-border: transparent; --corner-color: var(--light-white);
}
.kpcard__glyph { position: relative; z-index: 2; width: 96px; height: 96px; object-fit: contain; }
/* #C панель-иконка целиком из PNG (фон + сетка + уголки + номер уже внутри картинки) */
.kpcard__panel { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
/* #1 фикс: панель = свой аспект 590:456 → все картинки одного размера, не зависят от длины текста */
.kpcard__icon--panel { flex: none; aspect-ratio: 590 / 456; }
.kpcard__icon--panel::before, .kpcard__icon--panel::after { display: none; }
/* тонкая сетка-крест вокруг иконки */
.kpcard__icon::before, .kpcard__icon::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(var(--dir, 0deg), var(--light-16) 0 4px, transparent 4px 8px);
}
.kpcard__icon::before { left: 0; right: 0; top: 40px; height: 1px; box-shadow: 0 106px var(--light-16); background: var(--light-16); }
.kpcard__icon::after  { top: 0; bottom: 0; left: 73px; width: 1px; box-shadow: 147px 0 var(--light-16); background: var(--light-16); }

.kpcard__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.kpcard__title { color: var(--light-white); }
.kpcard__desc { color: var(--light-64); }

/* ===================== BLOCK 4: CO MÓWIĄ NASI LUDZIE ============ */
.kopinie {
  position: relative; z-index: 4;
  width: var(--frame-w); max-width: 100%;
  margin: -40px auto 0; padding: 96px 0;
  overflow: hidden; isolation: isolate;
  border-radius: var(--r-card); background: var(--dark-black);
}
.kopinie__grid {   /* фон-клеточка как в блоке Projekt · Wyzwanie i Zakres Prac (grid-dark.svg) */
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('/assets/ui/grid-dark.svg') center top / 1440px auto no-repeat;
  opacity: .5;
}
.kopinie__inner { position: relative; z-index: 1; width: var(--content-w); max-width: calc(100% - 160px); margin: 0 auto; }
.kopinie__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.kopinie__heading .t-h2-thin, .kopinie__heading .t-h2 { color: var(--light-white); }

/* #4 нативный горизонтальный скролл (драг мышью + колесо + свайп); вылет до краёв блока, вертикальный воздух под ховер */
.kopinie__viewport {
  margin: 16px -80px 0; padding: 24px 80px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; scroll-padding: 0 80px;
  scrollbar-width: none; cursor: grab;
}
.kopinie__viewport::-webkit-scrollbar { display: none; }
.kopinie__viewport.is-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.kopinie__track { display: flex; gap: 12px; }
.kop-card {
  flex: 0 0 418.67px; max-width: 418.67px; box-sizing: border-box;
  position: relative; scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  min-height: 352px; padding: 40px; border-radius: 24px;
  background-color: var(--dark-light); --glass-border: var(--border-linear-soft);   /* вдвое прозрачнее */
  transition: transform .45s cubic-bezier(0.22, 1, 0.36, 1), background-color .3s ease, box-shadow .35s ease;
}
/* ховер как в Certyfikaty: подъём + подсветка плажки/обводки, без тени */
.kop-card:hover {
  transform: translateY(-4px); z-index: 2;
  background-color: #242424;
  --glass-border: var(--border-linear);
}
.kop-card:hover .kop-card__qmark { opacity: 0.08; }
.kop-card__quote { position: relative; z-index: 1; color: var(--light-white); font: 700 28px/32px "adineue PRO Cyr", sans-serif; letter-spacing: 0.02em; }
.kop-card__author { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; }
.kop-card__avatar {
  flex: none; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  background: var(--dark-black); border-radius: 0; color: var(--light-white);
  --glass-border: var(--border-linear); --corner-color: var(--light-white);
}
.kop-card__who { display: flex; flex-direction: column; gap: 2px; }
.kop-card__name { color: var(--light-white); }
.kop-card__role { color: var(--light-48); text-transform: none; }
.kop-card__qmark {
  position: absolute; z-index: 0; width: 77px; height: 65px; color: var(--light-white); opacity: .04;
  font: 700 160px/1 "adineue PRO Cyr", sans-serif;
}
.kop-card__qmark--open { top: 12px; left: 24px; }
.kop-card__qmark--close { right: 24px; bottom: 12px; transform: rotate(180deg); }

.kopinie__nav { margin-top: 40px; display: flex; align-items: center; justify-content: space-between; }
.kopinie__arrow {
  flex: none; width: 72px; height: 56px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill); cursor: pointer;
  background: var(--light-8); color: var(--light-48);        /* НЕактивная кнопка (нельзя листать в эту сторону) */
  --glass-border: var(--border-linear-soft);
  transition: background-color .25s ease, color .25s ease, transform .2s ease;
}
.kopinie__arrow svg { width: 24px; height: 24px; }
.kopinie__arrow--prev svg { transform: rotate(180deg); }
.kopinie__arrow:not(:disabled) { background: var(--light-white); color: var(--dark-black); }   /* активная — белая */
.kopinie__arrow:not(:disabled):hover { transform: scale(1.08); }   /* #2 чуть увеличивается по наведению */
.kopinie__arrow:disabled { cursor: default; }
.kopinie__counter {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 16px; border-radius: 0;
  color: var(--light-white); --glass-border: var(--border-linear); --corner-color: var(--light-white);
}
.kopinie__counter-total { color: var(--light-32); }

/* ===================== KARIERA-специфичный CTA-фон =============== */
.cta--kariera .cta__bg { object-position: center; }

/* ===================== МОДАЛКА ДЕТАЛЕЙ ВАКАНСИИ (Figma 593:10943) ===================== */
.vacm {
  position: fixed; inset: 0; z-index: 200;
  display: flex; justify-content: flex-end; align-items: stretch;
  padding: 48px 24px 24px;
  background: var(--dark-64);                       /* rgba(17,17,17,0.64) */
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.vacm.is-open { opacity: 1; visibility: visible; }
body.vacm-lock { overflow: hidden; }

.vacm__panel {
  position: relative; width: 550px; max-width: 100%;
  display: flex; flex-direction: column;
  background: var(--light-white); border-radius: 32px;
  transform: translateX(32px); opacity: 0;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .4s ease;
}
.vacm.is-open .vacm__panel { transform: none; opacity: 1; }

/* кнопка закрытия — тёмное стекло с ✕, торчит над правым-верхним углом */
.vacm__close {
  position: absolute; top: -20px; right: 30px; z-index: 3;
  width: 56px; height: 40px; flex: none; padding: 0; border: 0; cursor: pointer;   /* размер как в дизайне (56×40) */
  display: flex; align-items: center; justify-content: center; border-radius: var(--r-pill);
  color: var(--light-white);
  background-color: var(--dark-64);
  background-image: var(--glass-sheen);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px var(--light-16);
  transition: transform .2s ease;
}
.vacm__close:hover { transform: scale(1.08); }
.vacm__close svg { width: 20px; height: 20px; }

/* верх — белый: заголовок + статус + мета */
.vacm__info { display: flex; flex-direction: column; gap: 16px; padding: 32px; }
.vacm__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.vacm__title { color: var(--dark-black); font: 700 32px/40px "adineue PRO Cyr", sans-serif; }
.vacm__status {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 0; flex: none;
  background: rgba(45, 142, 52, 0.12);
  --glass-border: var(--border-dark); --corner-color: var(--dark-48); color: var(--color-green);
}
.vacm__status-dot { width: 4px; height: 4px; flex: none; background: var(--color-green); border-radius: 0 1.285px; }
.vacm__meta {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 8px 12px; border-radius: 0;
  --glass-border: var(--border-dark); --corner-color: var(--dark-48); color: var(--dark-64);
}

/* середина — серая, прокручиваемая */
.vacm__scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 12px; padding: 16px;
  background: var(--light-light); border-radius: 24px;
  scrollbar-width: thin;
}
.vacm__stats { display: flex; gap: 12px; width: 100%; }
.vacm__stat {
  flex: 1 1 0; min-width: 0; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 8px; padding: 16px;
  background: var(--light-white); border: 1px dashed var(--dark-16); border-radius: 16px;
}
.vacm__stat-label { color: var(--dark-64); }
.vacm__stat-val { color: var(--dark-black); font: 700 18px/26px "adineue PRO Cyr", sans-serif; letter-spacing: 0.02em; white-space: nowrap; }
.vacm__stat-note { color: var(--dark-48); font: 300 14px/20px "Geologica Cursive", sans-serif; letter-spacing: -0.05em; }
.vacm__sec {
  display: flex; flex-direction: column; gap: 8px; padding: 16px;
  border: 1px dashed var(--dark-16); border-radius: 16px;   /* прозрачный фон → просвечивает серый */
}
.vacm__sec-head { display: inline-flex; align-items: center; gap: 16px; }
.vacm__sec-dot { width: 4px; height: 4px; flex: none; background: var(--dark-black); border-radius: 0 1.285px; }
.vacm__sec-title { color: var(--dark-black); font: 700 18px/26px "adineue PRO Cyr", sans-serif; letter-spacing: 0.02em; }
.vacm__sec-text { color: var(--dark-64); font: 500 14px/20px "Geist Mono", monospace; letter-spacing: -0.01em; }

/* низ — белый: кнопка APLIKUJ (btn-split) */
.vacm__apply { padding: 24px; }
.vacm__apply .btn-split { width: 100%; }
.vacm__apply .btn-split__text { flex: 1 1 auto; justify-content: center; }

/* пейджер каруселей (kproces/kopinie) — только на мобиле */
.kproces__pager { display: none; align-items: center; justify-content: center; gap: 10px; padding: 8px 16px; border-radius: 0; color: var(--light-white); --glass-border: var(--border-light); --corner-color: var(--light-white); }
.kproces__pager-total { color: var(--light-32); }

/* ============================ MOBILE (≤1024) ==================== */
@media (max-width: 1024px) {
  /* образец O nas: hero растёт под контент, контент в ПОТОКЕ (не absolute) → ничего не режется/не наезжает */
  .khero { width: 100%; height: auto; min-height: 100svh; border-radius: 0; display: flex; flex-direction: column; }
  .khero__bg { object-position: 28% center; }   /* #4 кадрирование как на скрине — мужчина слева + женщина */
  .khero__nav { position: relative; z-index: 3; flex: none; top: 0; left: 0; transform: none; width: 100%; max-width: none; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 0; }
  /* контент в потоке, занимает остаток высоты, заголовок прижат к низу через flex-end (а не absolute) */
  .khero__content { position: relative; z-index: 2; flex: 1 1 auto; inset: auto; height: auto; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px 16px calc(40px + env(safe-area-inset-bottom, 0px)); }
  .khero__title { position: static; display: block; width: auto; height: auto; }
  .khero__title-thin, .khero__title-bold { position: static; left: auto; top: auto; bottom: auto; display: block; }
  .khero__title-thin { font: 400 60px/64px "Geologica Cursive", sans-serif; letter-spacing: -0.08em; }
  .khero__title-bold { font: 700 56px/56px "adineue PRO Cyr", sans-serif; letter-spacing: -0.03em; }
  .khero__sub { position: static; left: auto; right: auto; top: auto; bottom: auto; width: auto; margin-top: 16px; font: 700 18px/26px "adineue PRO Cyr", sans-serif; letter-spacing: 0.02em; }
  .khero__btn { position: static; left: auto; right: auto; top: auto; bottom: auto; margin-top: 24px; align-self: flex-start; }

  /* #1 kjobs: не наезжает на хиро (margin 0), скругление 32 */
  .kjobs { width: 100%; margin-top: 0; border-radius: 32px; padding: 48px 15px; }
  .kjobs__inner { width: 100%; max-width: 100%; }
  .kjobs__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .kjobs__heading .t-h2-thin, .kjobs__heading .t-h2 { font-size: 40px; line-height: 48px; }
  .kjobs__sub { align-self: flex-start; white-space: normal; font: 700 18px/26px "adineue PRO Cyr", sans-serif; letter-spacing: 0.02em; }
  .kjobs__list { margin-top: 24px; }
  .kjobs__empty { min-height: 0; padding: 32px 20px; border-radius: 24px; gap: 24px; }
  .kjobs__empty-inner { gap: 16px; }
  .kjobs__empty-title { font-size: 28px; line-height: 34px; }
  .kjobs__empty-btn { width: 100%; }
  .kjobs__empty-btn .btn-split__text { flex: 1 1 auto; justify-content: center; }
  /* #моб карточка вакансии: тёмная обёртка, светлый верх (title+meta), «Zobacz rekrutację» снизу (580:2802) */
  .kjob { flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 12px; }
  .kjob__inner { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px; padding: 24px; min-height: 0; }
  .kjob__title { font-size: 24px; line-height: 32px; }
  .kjob__meta { white-space: nowrap; }
  .kjob__status { display: none; }
  .kjob__cta { justify-content: center; gap: 10px; padding-top: 10px; }
  .kjob__cta-text { display: inline; color: var(--light-white); }

  /* #3 kproces: рецесс ПОД kjobs (сверху) и kopinie (снизу); по 88px = 48 видимых + 40 скрытых; карусель + пейджер (580:2039) */
  .kproces { width: 100%; margin-top: -40px; border-radius: 0; padding: 88px 0; }
  .kproces__inner { width: 100%; max-width: 100%; }
  .kproces__head { padding: 0 16px; }
  .kproces__heading .t-h2-thin, .kproces__heading .t-h2 { font-size: 40px; line-height: 48px; }
  .kproces__cards {
    flex-direction: row; gap: 12px; margin-top: 32px; padding: 0 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .kproces__cards::-webkit-scrollbar { display: none; }
  .kpcard { flex: 0 0 88%; max-width: 88%; height: 428px; scroll-snap-align: center; }
  .kproces__pager { display: flex; width: 343px; max-width: calc(100% - 64px); margin: 24px auto 0; }   /* #1 на всю ширину как в блоке kopinie (311px @375) */

  /* #2 kopinie: скругление 32, наезжает сверху на kproces; свайп-карусель + пейджер (597:11234) */
  .kopinie { width: 100%; margin-top: -40px; border-radius: 32px; padding: 48px 0; }
  .kopinie__inner { width: 100%; max-width: 100%; }
  .kopinie__head { padding: 0 16px; }
  .kopinie__heading .t-h2-thin, .kopinie__heading .t-h2 { font-size: 40px; line-height: 48px; }
  .kopinie__viewport {
    margin: 40px 0 0; padding: 0 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .kopinie__viewport::-webkit-scrollbar { display: none; }
  .kopinie__track { transform: none !important; transition: none; }
  .kop-card { flex-basis: 88%; max-width: 88%; padding: 24px; scroll-snap-align: center; }
  .kop-card__quote { font-size: 22px; line-height: 28px; }
  .kopinie__nav { margin: 24px 16px 0; justify-content: center; }
  .kopinie__arrow { display: none; }
  .kopinie__counter { width: 343px; max-width: calc(100% - 32px); justify-content: center; }

  /* модалка деталей — bottom-sheet на всю ширину, скруглён только верх, 3 плитки в столбик (597:13130) */
  .vacm { padding: 72px 0 0; }
  .vacm__panel { width: 100%; border-radius: 32px 32px 0 0; transform: translateY(40px); }
  .vacm__stats { flex-direction: column; gap: 8px; }
  .vacm__stat { flex: none; width: 100%; }
}