/* Hero — 655:19345. Высота 1080 при 1920 (56.25%), фон-картинка 1160 высотой. */
.hero {
  position: relative;
  height: min(56.25vw, 1080px);
  min-height: 620px;
  overflow: hidden;
  background: var(--ink-deep);
  color: var(--white);
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 103.07%;
  height: 107.4%;      /* 1160 / 1080 */
  left: -0.01%;
  top: 0;
  max-width: none;
  object-fit: fill;
}

/* Gradient 655:19347 — сверху вниз */
.hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(15, 18, 23, 0.92) 0%,
    rgba(15, 18, 23, 0.35) 45%,
    rgba(15, 18, 23, 0.05) 100%);
}
/* 655:19377 — затемнение левого края */
.hero__veil--side {
  top: 2px;
  background: linear-gradient(-90deg,
    rgba(15, 18, 23, 0) 25.286%,
    var(--ink-warm) 99.944%);
}

.hero__content {
  position: absolute;
  inset-inline-start: var(--gutter);
  top: calc(50% + 39.5px);
  transform: translateY(-50%);
  width: min(1120px, calc(100% - var(--gutter) * 2));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 1.4583vw, 28px);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  /* 655:19359 — 330×40: отступы 9/18 минус 1px обводки внутрь */
  padding: clamp(6px, 0.4167vw, 8px) clamp(13px, 0.8854vw, 17px);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-pill);
  background: var(--surface-tint);
  color: var(--gold);
  font-size: clamp(13px, 0.9375vw, 18px);
  font-weight: 600;
  line-height: normal;
  letter-spacing: 1.6px;
}

.hero__title {
  width: min(1080px, 100%);   /* 655:19361 — фиксированная ширина текстового узла */
  font-size: var(--t-h1);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -1.5px;
  color: var(--white);
}

.hero__lead {
  max-width: 861px;
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-on-dark);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(10px, 0.8333vw, 16px);
}

/* FloatingStats 655:19368 — левый край на 1517/1920, верх на 673/1080 */
.hero__stats {
  position: absolute;
  inset-inline-start: 78.9896%;
  top: 62.3148%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* в макете карточки обнимают текст, а не тянутся по самой широкой */
  gap: clamp(10px, 0.7292vw, 14px);
}

.hero__stat {
  display: flex;
  align-items: center;
  gap: clamp(10px, 0.8333vw, 16px);
  /* 655:19369 — 283×71: отступы 16/26/16/22 минус 1px обводки внутрь */
  padding: clamp(11px, 0.7813vw, 15px) clamp(17px, 1.3021vw, 25px) clamp(11px, 0.7813vw, 15px) clamp(15px, 1.0938vw, 21px);
  border: 1px solid var(--border-glass-strong);
  border-radius: var(--r-xl);
  background: var(--surface-glass-soft);
  backdrop-filter: blur(var(--blur-card));
  -webkit-backdrop-filter: blur(var(--blur-card));
  white-space: nowrap;
}

.hero__stat-num {
  font-size: var(--t-stat);
  font-weight: 900;
  line-height: normal;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__stat-label {
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-on-dark-muted);
}

/* ——— планшет ——— */
@media (max-width: 1023px) {
  .hero { height: auto; min-height: 0; padding: 150px 0 56px; }
  /* на узком экране картинку кадрируем, а не растягиваем */
  .hero__bg { height: 100%; width: 100%; left: 0; object-fit: cover; }
  .hero__content {
    position: relative;   /* остаётся над фоном и вуалью */
    z-index: 1;
    /* базовое inset-inline-start: var(--gutter) при relative не «ставит» блок,
       а СДВИГАЕТ его на гутер в сторону — левый отступ удваивался, правый
       становился нулевым, и текст упирался в край экрана (в RTL — зеркально).
       Гасим, как уже сделано у .hero__stats ниже. */
    inset-inline-start: auto;
    top: auto;
    transform: none;
    width: auto;
    margin-inline: var(--gutter);
  }
  .hero__stats {
    position: relative;
    z-index: 1;
    top: auto;
    inset-inline-start: auto;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 32px var(--gutter) 0;
  }
  .hero__title { letter-spacing: -0.5px; }
}

/* ——— телефон ——— */
@media (max-width: 599px) {
  .hero { padding-top: 122px; }
  .hero__stats { flex-direction: column; align-items: flex-start; }
  .hero__stat { white-space: normal; }
  .hero__actions .btn { flex: 1 1 auto; }
}

/* Переносы заголовка — как в макете (три строки). Ниже 1200px текст переносится сам. */
.br-wide { display: inline; }
@media (max-width: 1199px) { .br-wide { display: none; } }

/* ——— Hero внутренней страницы (670:24500) ——— */
/* здесь картинка вписана в секцию один в один, без запаса как на главной */
.hero--inner .hero__bg {
  inset: 0;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: cover;
}
.hero--inner .hero__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(28px, 3.125vw, 60px);
  padding: 0 var(--gutter);
}
.hero__h1 {
  /* в макете 770px, и заголовок там ровно в одну строку (766px чернил).
     В браузере глифы шире на ~2% и строка ломается — даём 800px, чтобы
     сохранить намерение макета: заголовок в одну строку. */
  width: min(800px, 100%);
  font-size: clamp(30px, 2.7083vw, 52px);
  font-weight: 900;
  line-height: 1;
  color: var(--paper);
}
.hero__cols { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; }
.hero__col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 48px);
  width: min(739px, 100%);
  min-height: 365px;
}
.hero__block { display: flex; flex-direction: column; gap: 20px; }
.hero__lead {
  font-size: clamp(17px, 1.25vw, 24px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--paper);
}
.hero__points { display: flex; flex-direction: column; gap: 20px; }
.hero__points li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(16px, 1.25vw, 24px);
  font-weight: 600;
  line-height: normal;
  color: var(--paper);
}
.hero__points img { flex: 0 0 6px; }

/* Хлебные крошки 670:24538 */
.crumbs {
  position: absolute;
  inset-inline-start: var(--gutter);
  top: clamp(120px, 8.5677vw, 164.5px);
  z-index: 5;
}
.crumbs ol { display: flex; gap: 6px; font-size: 13px; letter-spacing: 0.65px; }
.crumbs a { color: #8a8a8a; }
.crumbs a:hover { color: var(--paper); }
.crumbs li + li::before { content: "/ "; color: #8a8a8a; }
.crumbs li[aria-current] { color: #f0f0f0; }

@media (max-width: 1023px) {
  .hero--inner { padding-top: 150px; padding-bottom: 56px; }
  .hero--inner .hero__inner { position: static; padding-inline: var(--gutter); }
  .crumbs { position: static; margin: 0 var(--gutter) 20px; }
  .hero__col { min-height: 0; }
}

.hero__col--wide { width: min(817px, 100%); min-height: 0; gap: clamp(24px, 2.5vw, 40px); }

[dir="rtl"] .hero__veil--side {
  background: linear-gradient(90deg,
    rgba(15, 18, 23, 0) 25.286%,
    var(--ink-warm) 99.944%);
}