:root {

  --color-green: #2d8e34;

  --dark-black: #111111;
  --dark-light: #1b1b1b;
  --dark-64: #111111a3;
  --dark-48: #1111117a;
  --dark-32: #11111152;
  --dark-24: #1111113d;
  --dark-16: #11111129;
  --dark-8: #11111114;
  --dark-4: #1111110a;
  --dark-2: #11111105;

  --light-white: #ffffff;
  --light-light: #f5f5f5;
  --light-64: #ffffffa3;
  --light-48: #ffffff7a;
  --light-32: #ffffff52;
  --light-16: #ffffff29;
  --light-8: #ffffff14;
  --light-4: #ffffff0a;
  --light-2: #ffffff05;

  --border-dark: #1111111f;
  --border-light: #ffffff1f;

  --frame-w: 1440px;
  --margin: 24px;
  --content-w: 1280px;
  --gutter: 24px;

  --r-card: 40px;
  --r-btn: 12px;
  --r-nav: 20px;
  --r-pill: 100px;

  --glass-sheen:
    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.08) 0%, rgba(255, 255, 255, 0) 100%);

  --border-linear:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%);

  --border-linear-soft:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
}

.t-h1-thin { font: 400 146px/156px "Geologica Cursive", sans-serif; letter-spacing: -0.08em; margin-right: 0.2em; }
.t-h2-thin { font: 400 64px/72px "Geologica Cursive", sans-serif; letter-spacing: -0.08em; margin-right: 0.2em; }
.t-h3-thin { font: 400 48px/56px "Geologica Cursive", sans-serif; letter-spacing: -0.08em; margin-right: 0.2em; }
.t-h4-thin { font: 400 40px/48px "Geologica Cursive", sans-serif; letter-spacing: -0.08em; margin-right: 0.2em; }
.t-h5-thin { font: 400 32px/40px "Geologica Cursive", sans-serif; letter-spacing: -0.08em; margin-right: 0.2em; }

.t-h1 { font: 700 146px/156px "adineue PRO Cyr", sans-serif; letter-spacing: -0.03em; }
.t-h2 { font: 700 64px/72px "adineue PRO Cyr", sans-serif; }
.t-h3 { font: 700 48px/56px "adineue PRO Cyr", sans-serif; }
.t-h4 { font: 700 40px/48px "adineue PRO Cyr", sans-serif; }
.t-h5 { font: 700 32px/40px "adineue PRO Cyr", sans-serif; }

.t-label-xxl { font: 700 24px/32px "adineue PRO Cyr", sans-serif; letter-spacing: 0.02em; }
.t-label-xl  { font: 700 20px/28px "adineue PRO Cyr", sans-serif; letter-spacing: 0.02em; }
.t-label-l   { font: 700 18px/26px "adineue PRO Cyr", sans-serif; letter-spacing: 0.02em; }
.t-label-m   { font: 700 16px/24px "adineue PRO Cyr", sans-serif; letter-spacing: 0.02em; text-transform: uppercase; }
.t-label-s   { font: 700 14px/20px "adineue PRO Cyr", sans-serif; letter-spacing: 0.02em; text-transform: uppercase; }

.t-mono-bold-m { font: 500 14px/20px "Geist Mono", monospace; letter-spacing: -0.01em; text-transform: uppercase; }
.t-mono-bold-s { font: 500 13px/18px "Geist Mono", monospace; letter-spacing: -0.01em; text-transform: uppercase; }
.t-mono-m      { font: 400 14px/20px "Geist Mono", monospace; letter-spacing: -0.01em; text-transform: uppercase; }
.t-mono-s      { font: 400 13px/18px "Geist Mono", monospace; }

.t-body-m { font: 300 16px/24px "Geologica Cursive", sans-serif; letter-spacing: -0.05em; }

.pl-skip .preloader { display: none !important; }

.preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
  opacity: 1;
  transition: opacity .7s ease;
}
.preloader.is-hiding {
  opacity: 0;
  pointer-events: none;
}

html:not(.has-js) .preloader { display: none; }

.preloader__logo {
  width: 140px;
  height: auto;
  transform: scale(6.5);
  opacity: 1;
  transform-origin: center center;
  animation: pl-logo 2.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity;
}

@keyframes pl-logo {
  0%   { transform: scale(6.5); opacity: 1; filter: blur(0); }
  64%  { transform: scale(1);   opacity: 1; filter: blur(0); animation-timing-function: linear; }
  76%  { transform: scale(1);   opacity: 1; filter: blur(0); animation-timing-function: cubic-bezier(0.5, 0, 0.85, 1); }
  100% { transform: scale(0.3); opacity: 0; filter: blur(16px); }
}

html.pl-playing { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .preloader__logo { animation: none; transform: none; opacity: 1; }
  .preloader { transition: opacity .3s ease; }
}

@font-face {
  font-family: "adineue PRO";
  src: url("/fonts/adineue-pro.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "adineue PRO Cyr";
  src: url("/fonts/adineue-pro-cyr-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "adineue PRO Cyr";
  src: url("/fonts/adineue-pro-cyr-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geologica Cursive";
  src: url("/fonts/geologica-cursive-light.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geologica Cursive SemiBold";
  src: url("/fonts/geologica-cursive-semibold.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--dark-black);
  color: var(--light-white);
  font-family: "adineue PRO Cyr", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

.page {
  width: var(--frame-w);
  max-width: 100%;
  margin: 0 auto;
}

.frame {
  position: relative;
  width: 100%;
}

.has-js [data-fx="reveal"] {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(28px);
  transition:
    opacity .8s ease,
    filter .8s ease,
    transform .9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, filter, transform;
}
[data-fx="reveal"].fx-in {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

[data-parallax] {
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  [data-fx="reveal"] { opacity: 1; filter: none; transform: none; transition: none; }
  [data-parallax] { transform: none; }
}

.stats__cell:hover .stats__num,
.phero__stat:hover .phero__stat-num {
  animation: stat-num-roll .62s cubic-bezier(0.5, 0, 0.2, 1);
}
@keyframes stat-num-roll {
  0%   { transform: translateY(0);    filter: blur(0);    opacity: 1; }
  45%  { transform: translateY(-70%); filter: blur(10px); opacity: 0; }
  55%  { transform: translateY(70%);  filter: blur(10px); opacity: 0; }
  100% { transform: translateY(0);    filter: blur(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .stats__cell:hover .stats__num,
  .phero__stat:hover .phero__stat-num { animation: none; }
}
/* ============================================================================
   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__trust {               /* доверительный бадж — только UA/RU (см. responsive/lang-scope) */
  display: none;
  position: absolute;
  left: 1091px;
  top: 104px;
}
html[lang="uk"] .hero__trust,
html[lang="ru"] .hero__trust {
  display: inline-flex;
}

/* нижний ряд: описание + кнопка / карточка */
.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; }