/* ============================================================
   HERO MODEL — три стадии чертежа: зарисовка → каркас → цвет.
   Один шаг на одно наведение мышкой, сам по себе не крутится.

   Блок не меняет размеров: всё внутри .hm__frames с overflow:hidden.

   Варианты перехода — класс на .hm:
     .hm--displace  — кадр разъезжается полосами, данные «плывут»
     .hm--shatter   — стадия осыпается прямоугольниками по сетке
     .hm--slice     — жёсткая нарезка ровными полосами

   Файл собран скриптом gen_css.py — правки удобнее вносить там.
   ============================================================ */

.hm {
  --hm-t: .9s;           /* длительность перехода */
  aspect-ratio: 16 / 10.6;
  --hm-grid: 52px;       /* шаг сетки для .hm--shatter */
  width: 100%;
  position: relative;
}

.hm__frames {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;   /* z-index кадров не спорит с рамкой */
}

.hm__f {
  position: absolute;
  inset: 0;
  background-image: var(--src-1x);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  will-change: mask-image, transform;
  /* зарисовка сама по себе бледная — поднимаем контур, не трогая исходник */
  filter: var(--boost, none);
}

@media (min-resolution: 1.5dppx) {
  .hm__f { background-image: var(--src-2x); }
}

.hm__f.is-on { opacity: 1; }

/* входящая стадия поверх уходящей */
.hm__f.is-out { z-index: 1; }
.hm__f.is-in  { z-index: 2; }

/* смещённый двойник — тот же кадр, сдвинутый в сторону.
   background:inherit копирует картинку родителя, второй раз URL не нужен. */
.hm__f::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   01 · DISPLACE — кадр разъезжается полосами, данные «плывут»
   ============================================================ */

.hm--displace .hm__f.is-in {
  animation: hm-dis-in var(--hm-t) steps(1, end) 1 both;
}

@keyframes hm-dis-in {
  0% {
    transform: translate3d(3.2%, 0, 0);
    -webkit-mask-image: linear-gradient(to bottom, #000 0% 13%, transparent 13% 100%);
            mask-image: linear-gradient(to bottom, #000 0% 13%, transparent 13% 100%);
  }
  12.5% {
    transform: translate3d(-2.4%, 0, 0);
    -webkit-mask-image: linear-gradient(to bottom, #000 0% 13%, transparent 13% 37%, #000 37% 52%, transparent 52% 100%);
            mask-image: linear-gradient(to bottom, #000 0% 13%, transparent 13% 37%, #000 37% 52%, transparent 52% 100%);
  }
  25% {
    transform: translate3d(2.6%, 0, 0);
    -webkit-mask-image: linear-gradient(to bottom, #000 0% 21%, transparent 21% 37%, #000 37% 52%, transparent 52% 73%, #000 73% 86%, transparent 86% 100%);
            mask-image: linear-gradient(to bottom, #000 0% 21%, transparent 21% 37%, #000 37% 52%, transparent 52% 73%, #000 73% 86%, transparent 86% 100%);
  }
  37.5% {
    transform: translate3d(-1.7%, 0, 0);
    -webkit-mask-image: linear-gradient(to bottom, #000 0% 21%, transparent 21% 29%, #000 29% 52%, transparent 52% 61%, #000 61% 86%, transparent 86% 100%);
            mask-image: linear-gradient(to bottom, #000 0% 21%, transparent 21% 29%, #000 29% 52%, transparent 52% 61%, #000 61% 86%, transparent 86% 100%);
  }
  50% {
    transform: translate3d(1.9%, 0, 0);
    -webkit-mask-image: linear-gradient(to bottom, #000 0% 30%, #000 29% 60%, transparent 60% 61%, #000 61% 93%, transparent 93% 100%);
            mask-image: linear-gradient(to bottom, #000 0% 30%, #000 29% 60%, transparent 60% 61%, #000 61% 93%, transparent 93% 100%);
  }
  62.5% {
    transform: translate3d(-1.1%, 0, 0);
    -webkit-mask-image: linear-gradient(to bottom, #000 0% 37%, #000 29% 68%, #000 61% 100%);
            mask-image: linear-gradient(to bottom, #000 0% 37%, #000 29% 68%, #000 61% 100%);
  }
  75% {
    transform: translate3d(0.8%, 0, 0);
    -webkit-mask-image: linear-gradient(to bottom, #000 0% 47%, #000 44% 80%, #000 61% 100%);
            mask-image: linear-gradient(to bottom, #000 0% 47%, #000 44% 80%, #000 61% 100%);
  }
  87.5% {
    transform: translate3d(-0.4%, 0, 0);
    -webkit-mask-image: linear-gradient(to bottom, #000 0% 100%);
            mask-image: linear-gradient(to bottom, #000 0% 100%);
  }
  100% {
    transform: translate3d(0, 0, 0);
    -webkit-mask-image: none;
            mask-image: none;
  }
}

.hm--displace .hm__f.is-out {
  animation: hm-dis-out var(--hm-t) steps(1, end) 1 both;
}

@keyframes hm-dis-out {
  0% {
    transform: translate3d(-2.6%, 0, 0);
    -webkit-mask-image: linear-gradient(to bottom, #000 0% 100%);
            mask-image: linear-gradient(to bottom, #000 0% 100%);
  }
  12.5% {
    transform: translate3d(2%, 0, 0);
    -webkit-mask-image: linear-gradient(to bottom, #000 0% 34%, transparent 34% 40%, #000 40% 100%);
            mask-image: linear-gradient(to bottom, #000 0% 34%, transparent 34% 40%, #000 40% 100%);
  }
  25% {
    transform: translate3d(-2.2%, 0, 0);
    -webkit-mask-image: linear-gradient(to bottom, #000 0% 26%, transparent 26% 33%, #000 33% 71%, transparent 71% 78%, #000 78% 100%);
            mask-image: linear-gradient(to bottom, #000 0% 26%, transparent 26% 33%, #000 33% 71%, transparent 71% 78%, #000 78% 100%);
  }
  37.5% {
    transform: translate3d(1.3%, 0, 0);
    -webkit-mask-image: linear-gradient(to bottom, #000 0% 26%, transparent 26% 33%, #000 33% 58%, transparent 58% 66%, #000 66% 100%);
            mask-image: linear-gradient(to bottom, #000 0% 26%, transparent 26% 33%, #000 33% 58%, transparent 58% 66%, #000 66% 100%);
  }
  50% {
    transform: translate3d(-1.5%, 0, 0);
    -webkit-mask-image: linear-gradient(to bottom, #000 0% 18%, transparent 18% 33%, #000 33% 58%, transparent 58% 66%, #000 66% 96%, transparent 96% 100%);
            mask-image: linear-gradient(to bottom, #000 0% 18%, transparent 18% 33%, #000 33% 58%, transparent 58% 66%, #000 66% 96%, transparent 96% 100%);
  }
  62.5% {
    transform: translate3d(0.9%, 0, 0);
    -webkit-mask-image: linear-gradient(to bottom, #000 0% 18%, transparent 18% 33%, #000 33% 46%, transparent 46% 70%, #000 70% 88%, transparent 88% 100%);
            mask-image: linear-gradient(to bottom, #000 0% 18%, transparent 18% 33%, #000 33% 46%, transparent 46% 70%, #000 70% 88%, transparent 88% 100%);
  }
  75% {
    transform: translate3d(-0.6%, 0, 0);
    -webkit-mask-image: linear-gradient(to bottom, #000 0% 12%, transparent 12% 52%, #000 52% 58%, transparent 58% 100%);
            mask-image: linear-gradient(to bottom, #000 0% 12%, transparent 12% 52%, #000 52% 58%, transparent 58% 100%);
  }
  87.5% {
    transform: translate3d(0%, 0, 0);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0 100%);
            mask-image: linear-gradient(to bottom, transparent 0 100%);
  }
}

.hm--displace .hm__f.is-in::before {
  animation: hm-dis-smear var(--hm-t) steps(1, end) 1 both;
}

@keyframes hm-dis-smear {
  0% {
    opacity: 0.95;
    transform: translate3d(-11%, 0, 0);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0% 6%, #000 6% 19%, transparent 19% 100%);
            mask-image: linear-gradient(to bottom, transparent 0% 6%, #000 6% 19%, transparent 19% 100%);
  }
  12.5% {
    opacity: 0.85;
    transform: translate3d(9%, 0, 0);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0% 30%, #000 30% 41%, transparent 41% 100%);
            mask-image: linear-gradient(to bottom, transparent 0% 30%, #000 30% 41%, transparent 41% 100%);
  }
  25% {
    opacity: 0.8;
    transform: translate3d(-13%, 0, 0);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0% 55%, #000 55% 64%, transparent 64% 100%);
            mask-image: linear-gradient(to bottom, transparent 0% 55%, #000 55% 64%, transparent 64% 100%);
  }
  37.5% {
    opacity: 0.7;
    transform: translate3d(7.5%, 0, 0);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0% 18%, #000 18% 27%, transparent 27% 100%);
            mask-image: linear-gradient(to bottom, transparent 0% 18%, #000 18% 27%, transparent 27% 100%);
  }
  50% {
    opacity: 0.55;
    transform: translate3d(-6%, 0, 0);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0% 66%, #000 66% 78%, transparent 78% 100%);
            mask-image: linear-gradient(to bottom, transparent 0% 66%, #000 66% 78%, transparent 78% 100%);
  }
  62.5% {
    opacity: 0.4;
    transform: translate3d(4.5%, 0, 0);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0% 40%, #000 40% 47%, transparent 47% 100%);
            mask-image: linear-gradient(to bottom, transparent 0% 40%, #000 40% 47%, transparent 47% 100%);
  }
  75% {
    opacity: 0.22;
    transform: translate3d(-3%, 0, 0);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0% 80%, #000 80% 88%, transparent 88% 100%);
            mask-image: linear-gradient(to bottom, transparent 0% 80%, #000 80% 88%, transparent 88% 100%);
  }
  87.5% {
    opacity: 0;
    transform: translate3d(0%, 0, 0);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0 100%);
            mask-image: linear-gradient(to bottom, transparent 0 100%);
  }
}

.hm--displace.is-glitching .hm__fx::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, var(--red, #e11019) 0 1px, transparent 1px 13%);
  animation: hm-dis-rules var(--hm-t) steps(1, end) 1 both;
}

@keyframes hm-dis-rules {
  0%   { opacity: .8;  transform: translate3d(0, 0, 0); }
  25%  { opacity: .55; transform: translate3d(0, 3%, 0); }
  50%  { opacity: .35; transform: translate3d(0, -2%, 0); }
  75%  { opacity: .18; transform: translate3d(0, 1%, 0); }
  100% { opacity: 0; }
}

/* ============================================================
   02 · SHATTER — стадия осыпается прямоугольниками по сетке
   ============================================================ */

.hm--shatter .hm__f.is-in {
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  animation: hm-sh-in var(--hm-t) steps(1, end) 1 both;
}

@keyframes hm-sh-in {
  0% {
    -webkit-mask-image: repeating-linear-gradient(to right,  transparent 0 0px, #000 0px 4px, transparent 4px var(--hm-grid)),
      repeating-linear-gradient(to bottom, transparent 0 0px, #000 0px 30px, transparent 30px var(--hm-grid));
            mask-image: repeating-linear-gradient(to right,  transparent 0 0px, #000 0px 4px, transparent 4px var(--hm-grid)),
      repeating-linear-gradient(to bottom, transparent 0 0px, #000 0px 30px, transparent 30px var(--hm-grid));
  }
  14.3% {
    -webkit-mask-image: repeating-linear-gradient(to right,  transparent 0 26px, #000 26px 40px, transparent 40px var(--hm-grid)),
      repeating-linear-gradient(to bottom, transparent 0 13px, #000 13px 21px, transparent 21px var(--hm-grid));
            mask-image: repeating-linear-gradient(to right,  transparent 0 26px, #000 26px 40px, transparent 40px var(--hm-grid)),
      repeating-linear-gradient(to bottom, transparent 0 13px, #000 13px 21px, transparent 21px var(--hm-grid));
  }
  28.6% {
    -webkit-mask-image: repeating-linear-gradient(to right,  transparent 0 13px, #000 13px 35px, transparent 35px var(--hm-grid)),
      repeating-linear-gradient(to bottom, transparent 0 0px, #000 0px 34px, transparent 34px var(--hm-grid));
            mask-image: repeating-linear-gradient(to right,  transparent 0 13px, #000 13px 35px, transparent 35px var(--hm-grid)),
      repeating-linear-gradient(to bottom, transparent 0 0px, #000 0px 34px, transparent 34px var(--hm-grid));
  }
  42.9% {
    -webkit-mask-image: repeating-linear-gradient(to right,  transparent 0 0px, #000 0px 30px, transparent 30px var(--hm-grid)),
      repeating-linear-gradient(to bottom, transparent 0 26px, #000 26px 42px, transparent 42px var(--hm-grid));
            mask-image: repeating-linear-gradient(to right,  transparent 0 0px, #000 0px 30px, transparent 30px var(--hm-grid)),
      repeating-linear-gradient(to bottom, transparent 0 26px, #000 26px 42px, transparent 42px var(--hm-grid));
  }
  57.1% {
    -webkit-mask-image: repeating-linear-gradient(to right,  transparent 0 26px, #000 26px 64px, transparent 64px var(--hm-grid)),
      repeating-linear-gradient(to bottom, transparent 0 13px, #000 13px 57px, transparent 57px var(--hm-grid));
            mask-image: repeating-linear-gradient(to right,  transparent 0 26px, #000 26px 64px, transparent 64px var(--hm-grid)),
      repeating-linear-gradient(to bottom, transparent 0 13px, #000 13px 57px, transparent 57px var(--hm-grid));
  }
  71.4% {
    -webkit-mask-image: repeating-linear-gradient(to right,  transparent 0 13px, #000 13px 58px, transparent 58px var(--hm-grid)),
      repeating-linear-gradient(to bottom, transparent 0 26px, #000 26px 60px, transparent 60px var(--hm-grid));
            mask-image: repeating-linear-gradient(to right,  transparent 0 13px, #000 13px 58px, transparent 58px var(--hm-grid)),
      repeating-linear-gradient(to bottom, transparent 0 26px, #000 26px 60px, transparent 60px var(--hm-grid));
  }
  85.7% {
    -webkit-mask-image: repeating-linear-gradient(to right,  transparent 0 0px, #000 0px 50px, transparent 50px var(--hm-grid)),
      repeating-linear-gradient(to bottom, transparent 0 0px, #000 0px 48px, transparent 48px var(--hm-grid));
            mask-image: repeating-linear-gradient(to right,  transparent 0 0px, #000 0px 50px, transparent 50px var(--hm-grid)),
      repeating-linear-gradient(to bottom, transparent 0 0px, #000 0px 48px, transparent 48px var(--hm-grid));
  }
  100% {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

.hm--shatter .hm__f.is-out {
  animation: hm-sh-out var(--hm-t) steps(1, end) 1 both;
}

@keyframes hm-sh-out {
  0%   { transform: translate3d(-.5%, 0, 0); }
  35%  { transform: translate3d(.4%, -.3%, 0); opacity: .9; }
  70%  { transform: translate3d(-.3%, 0, 0); opacity: .75; }
  100% { transform: translate3d(0, 0, 0); opacity: .6; }
}

.hm--shatter.is-glitching .hm__fx::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(225, 16, 25, .18) 1px, transparent 1px),
    linear-gradient(rgba(225, 16, 25, .18) 1px, transparent 1px);
  background-size: var(--hm-grid) var(--hm-grid);
  animation: hm-sh-lines var(--hm-t) linear 1 both;
}

@keyframes hm-sh-lines {
  0%   { opacity: 1; }
  65%  { opacity: .45; }
  100% { opacity: 0; }
}

/* ============================================================
   03 · SLICE — жёсткая нарезка ровными полосами
   ============================================================ */

.hm--slice .hm__f.is-in {
  animation: hm-sl-in var(--hm-t) steps(1, end) 1 both;
}

@keyframes hm-sl-in {
  0% {
    transform: translate3d(0.6%, 0, 0);
    -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 1.5%, transparent 1.5% 16.667%);
            mask-image: repeating-linear-gradient(to bottom, #000 0 1.5%, transparent 1.5% 16.667%);
  }
  16.7% {
    transform: translate3d(-0.45%, 0, 0);
    -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 4.5%, transparent 4.5% 16.667%);
            mask-image: repeating-linear-gradient(to bottom, #000 0 4.5%, transparent 4.5% 16.667%);
  }
  33.3% {
    transform: translate3d(0.35%, 0, 0);
    -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 7.5%, transparent 7.5% 16.667%);
            mask-image: repeating-linear-gradient(to bottom, #000 0 7.5%, transparent 7.5% 16.667%);
  }
  50% {
    transform: translate3d(-0.25%, 0, 0);
    -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 10.5%, transparent 10.5% 16.667%);
            mask-image: repeating-linear-gradient(to bottom, #000 0 10.5%, transparent 10.5% 16.667%);
  }
  66.7% {
    transform: translate3d(0.15%, 0, 0);
    -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 13%, transparent 13% 16.667%);
            mask-image: repeating-linear-gradient(to bottom, #000 0 13%, transparent 13% 16.667%);
  }
  83.3% {
    transform: translate3d(-0.08%, 0, 0);
    -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 15%, transparent 15% 16.667%);
            mask-image: repeating-linear-gradient(to bottom, #000 0 15%, transparent 15% 16.667%);
  }
  100% {
    transform: translate3d(0, 0, 0);
    -webkit-mask-image: none;
            mask-image: none;
  }
}

.hm--slice.is-glitching .hm__fx::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, var(--red, #e11019) 0 1px, transparent 1px 16.666%);
  animation: hm-sl-rules var(--hm-t) linear 1 both;
}

@keyframes hm-sl-rules {
  0%   { opacity: .85; }
  60%  { opacity: .3; }
  100% { opacity: 0; }
}

/* ============================================================
   ДОВОДКА ИНТЕРФЕЙСА
   Правки поверх собранного Astro-css. Селекторы с [class] —
   чтобы перебить scoped-стили, у которых специфичность выше на класс.
   ============================================================ */

/* — Шапка: номер телефона больше не кричит.
     Кнопка ведёт на контакт, номер стоит рядом спокойной строкой. */
.hdr__tel {
  display: none;
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--text-dim);
  white-space: nowrap;
  transition: color .25s var(--ease);
}

.hdr__tel:hover { color: var(--ink); }

/* На 1040px меню, языки, номер и кнопка уже не помещались в строку —
   номер показываем только начиная с 1240px. */
/* Номер — приятное дополнение, а не обязательный элемент: показываем его,
   только когда меню, языки и кнопка уже уместились с запасом. */
@media (width >= 1580px) { .hdr__tel { display: inline-block; } }

/* — Переключатель языков: попасть пальцем было нереально. */
.langs[class] { gap: .1rem; }

.langs__i[class] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.15rem;
  min-height: 2.4rem;
  padding: .2rem .3rem;
  font-size: .72rem;
}

.hdr__drawer-langs[class] a {
  min-width: 3.4rem;
  min-height: 2.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
}

/* — Три направления под героем: раньше не кликались и читались как подвал. */
a.hero__tick {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding-block: .35rem;
  transition: color .25s var(--ease);
}

a.hero__tick::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}

a.hero__tick:hover { color: var(--ink); }
a.hero__tick:hover::after { transform: scaleX(1); }

.hero__tick-go {
  color: var(--red);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}

a.hero__tick:hover .hero__tick-go { opacity: 1; transform: translateX(0); }

/* — Красная черта под заголовком стала индикатором стадии модели. */
.hero__rule[class] {
  display: flex;
  gap: 5px;
  width: 104px;
  height: 4px;
  margin: 1.6rem 0 1.4rem;
  background: none;
}

.hero__rule[class] > span {
  flex: 1;
  background: var(--line-2);
  transition: background .3s var(--ease);
}

.hero__rule[class] > span.is-on { background: var(--red); }

/* — Логотип не должен сжиматься флексом.
     Раньше при нехватке места в шапке картинку плющило по горизонтали:
     высота задана переменной, а ширину съедал max-width:100%. */
.logo[class] { flex: none; }
.logo[class] img { max-width: none; }

/* Русское и украинское меню длиннее польского, а языков стало шесть.
   Ниже 1180px раскрытое меню перестаёт помещаться — уходим в бургер. */
@media (width < 1220px) {
  .hdr__nav[class],
  .langs[class],
  .hdr__cta[class] { display: none; }
  .burger[class] { display: grid; }
  .hdr__drawer[class]:not([hidden]) { display: grid !important; }
}

/* Русское и украинское меню заметно длиннее — им нужен более широкий экран. */
@media (width < 1320px) {
  html[lang="ru"] .hdr__nav[class],
  html[lang="uk"] .hdr__nav[class],
  html[lang="ru"] .langs[class],
  html[lang="uk"] .langs[class],
  html[lang="ru"] .hdr__cta[class],
  html[lang="uk"] .hdr__cta[class] { display: none; }
  html[lang="ru"] .burger[class],
  html[lang="uk"] .burger[class] { display: grid; }
  html[lang="ru"] .hdr__drawer[class]:not([hidden]),
  html[lang="uk"] .hdr__drawer[class]:not([hidden]) { display: grid !important; }
}

/* — Мелко и бледно: меню, подписи аудитории и описания карточек.
     Кегль вверх, цвет темнее, разрядка меньше. */
.hdr__link[class] {
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #4a4f57;
}

.hdr__link[class]:hover,
.hdr__link[class].is-active { color: var(--ink); }

.langs__i[class] {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: #6b737e;
}

.langs__i[class]:hover { color: var(--ink); }
.langs__i[class].is-active { color: var(--red); font-weight: 700; }

/* строка «для кого» — была почти невидимой */
.dir__aud[class] {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .09em;
  line-height: 1.6;
  color: #68717d;
  margin-top: .7rem;
}

/* описание карточки */
.dir__s[class] { color: #545c68; }

/* «Więcej» — это следующее действие, оно не должно теряться */
.dir__go[class] { font-weight: 700; font-size: .95rem; }

/* тикер и служебные подписи чуть контрастнее */
.hero__tick[class] { font-size: .72rem; color: #626b77; }
.sec-head__n[class] { font-size: .75rem; }

/* Между первым экраном и разделом «Zakres» зияла дыра примерно в 220px.
   Снимаем около сотни: часть у нижнего отступа шапки раздела,
   часть у верхнего отступа следующей полосы.
   Специфичность повышена намеренно: scoped-стили Astro лежат в инлайновом
   <style> страницы, то есть уже после наших <link>, и при равном весе выигрывают. */
.top[class] .top__in[class] { padding-bottom: clamp(1.9rem, 4.4vw, 3.4rem); }
.top[class] + .band[class] { padding-block-start: clamp(2.6rem, 5.2vw, 4.6rem); }

/* ============================================================
   ФОН СТРАНИЦ НАПРАВЛЕНИЙ
   Сетка миллиметровки общая для всех трёх — это связующий элемент.
   Поверх неё подложка по теме, только в правой половине: у страниц
   был пустой правый край. Слева картинки сами уходят в прозрачность,
   маска — страховка, чтобы текст всегда лежал на чистом.

   Значения непрозрачности выше привычных 5–10 %, потому что линии
   на подложках светло-серые, а не чёрные. Узел и модель подняли,
   код наоборот приглушили — он перетягивал внимание с текста.
   ============================================================ */

.topbg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--bg-a);
  background-repeat: no-repeat;
  background-position: right -5% center;
  background-size: auto 122%;
  -webkit-mask-image: linear-gradient(to right, transparent 10%, #000 38%);
          mask-image: linear-gradient(to right, transparent 10%, #000 38%);
  will-change: transform;
}

/* 01 — узел примыкания панелей: замок, нащельник, крепёж */
.topbg--build { --bg-a: .30; background-image: url("/media/tlo-budownictwo.webp"); }

/* 02 — вид модели с выносками, лист продолжается за краем экрана */
.topbg--model { --bg-a: .34; background-image: url("/media/tlo-modelowanie.webp"); }

/* 03 — код, собирающий ведомость панелей */
.topbg--code {
  --bg-a: .21;   /* код спорил с текстом — единственный, который ослабили */
  background-image: url("/media/tlo-automatyzacja.webp");
  background-size: auto 152%;
  background-position: right -8% center;
}

/* на телефоне гасим, показываем только край и грузим лёгкий файл */
@media (width <= 900px) {
  .topbg { opacity: calc(var(--bg-a) * .5); background-position: right -34% center; }
  .topbg--build { background-image: url("/media/tlo-budownictwo@sm.webp"); }
  .topbg--model { background-image: url("/media/tlo-modelowanie@sm.webp"); }
  .topbg--code { background-image: url("/media/tlo-automatyzacja@sm.webp"); }
}

@media (prefers-reduced-motion: reduce) {
  .topbg { transform: none !important; }
}

/* ============================================================
   МИНИ-КЕЙС ПРО КОЛЛИЗИЮ (страница моделирования)
   Текст слева, два кадра справа, между ними цепочка шагов.
   ============================================================ */

.kz {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
}

@media (width >= 900px) {
  .kz { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: start; }
}

.kz__text { align-content: start; display: grid; gap: 1rem; max-width: 46ch; }

.kz__chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: #68717d;
}

.kz__chain li { display: inline-flex; align-items: center; gap: .55rem; }
.kz__chain li + li::before { content: "→"; color: var(--red); font-weight: 400; }

.kz__result {
  border-left: 3px solid var(--red);
  padding-left: .95rem;
  margin-top: .4rem;
  font-family: var(--f-head);
  text-transform: uppercase;
  font-size: clamp(.98rem, 1.3vw, 1.14rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.kz__frames { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }

@media (width >= 620px) {
  .kz__frames { grid-template-columns: 1fr 1fr; }
}

.kz__f { margin: 0; display: grid; gap: .7rem; align-content: start; }

.kz__media {
  aspect-ratio: 64 / 100;
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
}

.kz__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: clamp(.4rem, 1.2vw, 1rem);
}

.kz__cap { display: flex; align-items: baseline; gap: .6rem; }
.kz__n { color: var(--red); font-weight: 700; }

.kz__label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .09em;
  color: #4a4f57;
  line-height: 1.5;
}

.kz__todo {
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--red);
  line-height: 1.5;
}

/* — Подвал: логотип теперь инвертированный, белая подложка не нужна. */
.logo--dark[class] {
  background: none;
  padding: 0;
}

/* — Подвал стал компактнее. */
.ft[class] { padding-block: clamp(2.5rem, 4.5vw, 3.75rem) 1.5rem; }
.ft__top[class] { padding-bottom: 2.25rem; gap: 2rem; }
.ft__bot[class] { padding-top: 1.25rem; }
.ft__claim[class] { margin-top: 1.1rem; }

/* — Герой: снизу оставалось пусто, модель прибавила в размере. */
@media (width >= 1000px) {
  .hero__in[class] {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    padding-block: clamp(3rem, 7vw, 6.5rem);
  }
}

/* ============================================================
   Блок направлений: длинные немецкие и нидерландские заголовки
   не должны распирать сетку. `1fr` не даёт колонке сжаться ниже
   min-content, и третья карточка уезжала за край экрана.
   Селекторы с [class] — чтобы перебить scoped-стили Astro,
   у которых специфичность на один класс выше.
   ============================================================ */

@media (width >= 900px) {
  .dirs[class] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Ширина <select> считается по самому длинному <option>. Длинное немецкое
   название направления в форме контакта распирало страницу на телефоне. */
select,
.form__f[class],
.form__f[class] > * {
  min-width: 0;
  max-width: 100%;
}

/* Сама карточка тоже grid: её неявная колонка по умолчанию не уже min-content,
   то есть не уже самого длинного слова. Из-за этого текст вылезал за карточку. */
.dir[class],
.next__i[class] { grid-template-columns: minmax(0, 1fr); }

/* Немецкие и нидерландские составные слова длиннее колонки.
   Переносим по слогам (браузер берёт словарь по lang документа),
   а разрыв посреди слова оставляем крайней мерой. */
.dir__t[class],
.next__i[class] .t-h3,
.top__h[class] {
  -webkit-hyphens: auto;
          hyphens: auto;
  overflow-wrap: break-word;
}

/* ============================================================
   Общее
   ============================================================ */

.hm__fx {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

/* рамка-уголки — всё, что осталось от прежнего оверлея */
.hm__ov {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hm.is-glitching .hm__ov { animation: hm-jitter var(--hm-t) steps(1, end) 1 both; }

/* рендер заполняет кадр целиком — уголки перекрашиваем в белый */
.hm__ov g { transition: stroke .3s var(--ease); }
.hm.is-photo .hm__ov g { stroke: #fff; }

@keyframes hm-jitter {
  0%   { transform: translate3d(.45%, 0, 0); }
  30%  { transform: translate3d(-.3%, .2%, 0); }
  55%  { transform: translate3d(.2%, 0, 0); }
  80%  { transform: translate3d(-.1%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* индикатор стадии: три штриха, без текста */
.hm__steps {
  position: absolute;
  right: 0;
  bottom: -1.4rem;
  display: flex;
  gap: 6px;
}

.hm__step {
  width: 26px;
  height: 2px;
  background: var(--line-2, #c6ccd6);
  transition: background .25s var(--ease, ease);
}

.hm__step.is-on { background: var(--red, #e11019); }

@media (width <= 700px) { .hm__steps { display: none; } }

.hm__btn {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .hm__f,
  .hm__f::before,
  .hm__fx::before,
  .hm__ov {
    animation: none !important;
  }
  .hm__f.is-in {
    -webkit-mask-image: none !important;
            mask-image: none !important;
    transform: none !important;
  }
}