/* ============================================================================
   SIGVIN — Block 1: Hero  (Figma node 443:857, 1440×848)
   ========================================================================== */

.hero {
  width: var(--frame-w);
  max-width: 100%;             /* не распирать вьюпорт на планшете (<1440) — как у остальных блоков */
  height: 100vh;               /* тянем на весь экран — без полоски след. блока */
  min-height: 848px;           /* но не меньше дизайн-высоты */
  margin: 0 auto;
  border-radius: 0;            /* блок 1 — без закруглений */
  overflow: hidden;
  isolation: isolate;
}

/* фон-видео (выше героя → лёгкий параллакс не открывает края) */
.hero__bg {
  position: absolute;
  top: -8%;
  left: 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  z-index: 0;
}

/* появление hero из-под прелоадера: фон проявляется и слегка отъезжает (zoom-out).
   используем индивидуальное свойство `scale` — не конфликтует с transform-параллаксом */
html.pl-playing .hero__bg { opacity: 0; scale: 1.06; }
html.is-revealed .hero__bg {
  opacity: 1;
  scale: 1;
  transition: opacity 1s ease, scale 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  html.pl-playing .hero__bg,
  html.is-revealed .hero__bg { opacity: 1; scale: 1; transition: none; }
}

/* затемняющий оверлей #111111 48% */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--dark-48);
  z-index: 1;
  pointer-events: none;
}

/* верхняя линейка-сепаратор (Figma SVG «Dash line.svg») */
.hero__sep {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 16px;
  z-index: 3;
  background-image: url('/assets/ui/dash-line.svg');
  background-size: 1440px 16px;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* ============================================================================
   ПЕРЕИСПОЛЬЗУЕМЫЕ КОМПОНЕНТЫ СТЕКЛА/КАРКАСА
   .gframe — каркасный элемент: градиентная обводка (white 8%→0%) +
             авто-уголки на острых (border-radius:0) углах (см. corners.js).
   .glass  — добавляет стеклянную заливку (sheen) поверх backdrop-blur.
   ========================================================================== */

/* каркас: обводка-кольцо рисуется ::before ВНУТРИ границ элемента (border Inside),
   не раздувая футпринт */
.gframe {
  position: relative;
}
.gframe::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;
  z-index: 1;
}

/* уголок 4×4 (Corener.svg = белый ┌); ставится JS на острые углы (внутри границ) */
.corner {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--corner-color, var(--light-white));   /* цвет уголка темизируется */
  -webkit-mask: url('/assets/ui/corner.svg') center / 4px 4px no-repeat;
          mask: url('/assets/ui/corner.svg') center / 4px 4px no-repeat;
  pointer-events: none;
  z-index: 2;
}
.corner--tl { top: 0;    left: 0;  transform: rotate(0deg); }
.corner--tr { top: 0;    right: 0; transform: rotate(90deg); }
.corner--br { bottom: 0; right: 0; transform: rotate(180deg); }
.corner--bl { bottom: 0; left: 0;  transform: rotate(270deg); }

/* стеклянная заливка (без своего бордюра — обводку даёт .gframe) */
.glass {
  background-image: var(--glass-sheen);
}

/* ---- переиспользуемый бадж/лейбл (Solid 12% white border + уголки) ---- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  color: var(--light-white);
  white-space: nowrap;
  --glass-border: var(--border-light);   /* СПЛОШНОЙ 12% белого вместо градиента */
}
/* тёмный вариант баджа для СВЕТЛЫХ блоков (border-dark 12% + тёмные уголки) */
.tag--dark {
  color: var(--dark-black);
  --glass-border: var(--border-dark);
  --corner-color: var(--dark-48);
}

/* CSS-baseline backdrop-filter (до инициализации liquid-glass.js / фолбэк) */
[data-liquid-glass] {
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

/* ---- main container ---------------------------------------------------- */
.hero__main {
  position: absolute;
  top: var(--margin);
  left: var(--margin);
  width: calc(var(--frame-w) - var(--margin) * 2); /* 1392 */
  display: flex;
  flex-direction: column;
  gap: 56px;
  align-items: center;
  z-index: 2;
}

/* ---- navbar (в потоке hero__main, не закреплён, без наложения) -------- */
.navbar {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 10px 24px;
  border-radius: 0 var(--r-nav) 0 var(--r-nav);
  /* обводка ярче (~2× дефолтных 8%) */
  --glass-border: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%);
}
.navbar__logo-link { display: flex; align-items: center; }
.navbar__logo { height: 36px; width: auto; }

/* меню абсолютно центрировано по плажке навбара (не зависит от ширин лого/CTA) */
.navbar__nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 24px;
}
.navbar__nav a { color: var(--light-48); transition: color .2s ease; }
.navbar__nav a:hover { color: var(--light-white); }
.navbar__dot { width: 2px; height: 2px; border-radius: 0.643px; background: var(--light-32); }

/* активный пункт меню — белый + полоски-скобки (Group 15) у верхней и нижней
   кромок навбара. Скобки РАСТЯГИВАЮТСЯ по ширине текста пункта (left:0/right:0 →
   ширина = ширине ссылки = слова; SVG `preserveAspectRatio=none` тянется ровно). */
.navbar__nav a.is-active { color: var(--light-white); position: relative; }
.navbar__nav a.is-active::before,
.navbar__nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 4px;
  background: url('/assets/ui/nav-stripe.svg') center / 100% 4px no-repeat;
  pointer-events: none;
}
.navbar__nav a.is-active::before { top: -30px; }                       /* верхняя кромка */
.navbar__nav a.is-active::after  { bottom: -30px; transform: scaleY(-1); } /* нижняя — зеркально */

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

/* кнопки шапки: более чёткая градиентная обводка + hover (8%→16% + scale) */
.navbar__lang,
.navbar__quote {
  --glass-border: linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.12) 100%);
  transition: background-color .3s ease, transform .3s cubic-bezier(0.22, 1, 0.36, 1);
}
.navbar__lang:hover,
.navbar__quote:hover {
  background: var(--light-16);
  transform: scale(1.05);
}
.navbar__lang {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light-8);
  border-radius: 0 var(--r-btn) 0 var(--r-btn);
  color: var(--light-white);
}
.navbar__quote {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  background: var(--light-8);
  border-radius: 0 var(--r-btn) 0 var(--r-btn);
  color: var(--light-white);
  white-space: nowrap;
}

/* ---- переключатель языка: выпадашка PL/EN/UA/RU (Figma 573:7472) ---------- */
.navbar__lang-wrap { position: relative; }
.navbar__lang { cursor: pointer; }
/* стекло: backdrop-blur + liquid glass (data-liquid-glass) + light/8% фон + sheen (.glass) +
   белая градиент-обводка (gframe) + острые уголки-скобки сверху (corners.js). Figma 573:7472 */
.lang-menu {
  position: fixed;                               /* портал на body (lang.js) + top/right ставит JS — внутри .navbar (backdrop-filter) стекло НЕ берёт фон страницы */
  display: flex; flex-direction: column; gap: 4px; align-items: stretch;
  padding: 4px;                                  /* бокс = плашка 40 + 4px по бокам = 48px (Figma 573:7472) */
  background-color: var(--light-8);              /* НЕ shorthand — иначе собьётся sheen .glass */
  border-radius: 0 0 var(--r-btn) var(--r-btn);  /* нижние углы 12, верхние острые (уголки) */
  --glass-border: linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.12) 100%);
  --corner-color: var(--light-white);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98);
  transform-origin: top right;
  transition: opacity .25s ease, transform .25s cubic-bezier(0.22, 1, 0.36, 1), visibility .25s;
  z-index: 2000;
}
.lang-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.lang-menu__item {
  width: 100%; min-width: 40px; height: 40px; flex: none;   /* плашка на всю ширину бокса (40px), не квадрат по центру */
  display: flex; align-items: center; justify-content: center;
  font: 700 14px/20px "adineue PRO Cyr", sans-serif; letter-spacing: 0.02em;
  color: var(--light-48); background-color: transparent;
  border-radius: 8px; cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.lang-menu__item:hover { color: var(--light-white); background-color: var(--light-8); }
.lang-menu__item.is-active { color: var(--light-white); background-color: var(--light-8); }

/* ---- content ----------------------------------------------------------- */
.hero__content {
  width: var(--content-w);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* заголовочный блок (абсолютные позиции из макета) */
.hero__head {
  position: relative;
  width: var(--content-w);
  height: 270.19px;
}
.hero__head .hl-1 { position: absolute; left: 0; top: 0; color: var(--light-white); white-space: nowrap; }
.hero__head .hl-2 { position: absolute; left: 243px; top: 114.19px; color: var(--light-white); white-space: nowrap; }
.hero__badge {              /* визуал даёт .tag; здесь только позиция */
  position: absolute;
  left: 1091px;
  top: 56px;
}

/* нижний ряд: описание + кнопка / карточка */
.hero__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.hero__overview {
  display: flex;
  flex-direction: column;
  gap: 56px;
  align-items: flex-start;
  flex: 1 0 0;
  min-width: 0;
}
.hero__desc { width: 800px; color: var(--light-white); }   /* шире 610 — длинные переводы (EN/UA/RU) влезают в 2 строки, по одной на абзац */
.hero__desc p + p { margin-top: 0; }

/* кнопка "Umów projekt" — белая: текст-плажка + круглая иконка.
   На hover «фишки» меняются местами (translateX по измеренным ширинам, см. btn-split.js)
   + лёгкое увеличение. */
.btn-split {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-split__text,
.btn-split__icon {
  transition: transform .45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.btn-split__text {
  height: 56px;
  display: flex;
  align-items: center;
  padding: 10px 24px;
  background: var(--light-white);
  color: var(--dark-black);
  border-radius: 0 var(--r-btn) 0 var(--r-btn);
  white-space: nowrap;
}
.btn-split__icon {
  width: 72px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light-white);
  color: var(--dark-black);
  border-radius: var(--r-pill);
}
.btn-split__icon svg { width: 24px; height: 24px; }

/* тёмный вариант split-кнопки (тёмный фон, белый текст/иконка) */
.btn-split--dark .btn-split__text,
.btn-split--dark .btn-split__icon {
  background: var(--dark-black);
  color: var(--light-white);
}

.btn-split:hover { transform: scale(1.04); }
.btn-split:hover .btn-split__text { transform: translateX(var(--bs-iw, 72px)); }
.btn-split:hover .btn-split__icon { transform: translateX(calc(-1 * var(--bs-tw, 178px))); }

@media (prefers-reduced-motion: reduce) {
  .btn-split,
  .btn-split__text,
  .btn-split__icon { transition: none; }
  .btn-split:hover { transform: none; }
  .btn-split:hover .btn-split__text,
  .btn-split:hover .btn-split__icon { transform: none; }
}

/* ---- карточка "ZOBACZ REALIZACJE" -------------------------------------
   UI как раньше (иконка над текстом). На hover карточка чуть увеличивается
   и заполняется белым «разлитием краски» из точки; контент инвертируется в тёмный. */
.hero__cta-card {
  position: relative;
  width: 336px;
  height: 224px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  border-radius: 1000px;
  color: var(--light-white);
  overflow: hidden;
  /* Linear-обводка (inside) в 2× менее яркая, чем была */
  --glass-border: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 100%);
  transition: transform .45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero__cta-card svg {
  width: 32px;
  height: 32px;
  position: relative;
  z-index: 1;
  transition: color .45s ease;
}
.hero__cta-card .t-label-m {
  position: relative;
  z-index: 1;
  transition: color .45s ease;
}

/* «капля» белой краски, растекается из точки на hover */
.cta-fill {
  position: absolute;
  left: 50%;
  top: 78%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--light-white);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
  pointer-events: none;
}

.hero__cta-card:hover { transform: scale(1.05); }
.hero__cta-card:hover .cta-fill { transform: translate(-50%, -50%) scale(34); }
.hero__cta-card:hover svg,
.hero__cta-card:hover .t-label-m { color: var(--dark-black); }

@media (prefers-reduced-motion: reduce) {
  .hero__cta-card,
  .cta-fill,
  .hero__cta-card svg,
  .hero__cta-card .t-label-m { transition: none; }
  .hero__cta-card:hover { transform: none; }
  .hero__cta-card:hover .cta-fill { transform: translate(-50%, -50%) scale(34); }
}

/* кнопка телефона — фиксирована справа, всегда видна при скролле.
   Цвет #F5F5F5, чёрная иконка, БЕЗ mix-blend (Figma 211:2573). */
.hero__phone {
  position: fixed;
  right: 24px;
  bottom: 24px;
  left: auto;
  top: auto;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  color: var(--dark-black);          /* чёрная иконка */
  background: var(--light-light);    /* #F5F5F5 */
  z-index: 50;
  transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero__phone:hover {
  transform: scale(1.08);
}
.hero__phone svg { width: 24px; height: 24px; }