/* ==========================================================================
   HERO STATS — три отдельных блока вместо сетки .hero-facts
   --------------------------------------------------------------------------
   1) бренд (слева): без плашки — крупная белая типографика прямо на
      тёмном фоне, вертикальный слайдер листает строки надписи
      «3 brothers labs — работает с 2019»;
   2) опыт: тёмное стекло — 15+ на всю высоту и «лет опыта» крупными
      строками справа;
   3) проекты (справа): бумажная карточка — 250+ на всю высоту карточки и
      справа слово «проектов» во всю оставшуюся ширину. Типографика
      считается от ширины самой карточки.
   Высота карточек задаётся самой цифрой, поэтому она всегда во всю высоту.
   ========================================================================== */

.hero-stats{
  position:relative;z-index:2;
  /* колонки идут по порядку разметки: бренд — слева, проекты — справа;
     проектам достаётся самая широкая колонка */
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,.9fr) minmax(0,1.05fr);
  gap:10px;margin-top:26px;
}
.hs-card{
  position:relative;display:flex;flex-direction:column;gap:7px;
  min-width:0;padding:14px 16px;border-radius:16px;overflow:hidden;
}

/* 1 — проекты */
.hs-card--projects{
  background:var(--paper,#f2efe7);color:var(--ink,#141414);
  container-type:inline-size;
}

/* «проекты» и «опыт»: цифра слева во всю высоту, слово справа */
.hs-card--projects,
.hs-card--years{
  flex-direction:row;align-items:stretch;justify-content:space-between;gap:12px;
  padding:12px 14px;
}
.hs-hero{
  display:flex;align-items:center;min-width:0;margin:0;
  font-family:var(--display);font-weight:800;
  font-size:clamp(62px,7.4vw,116px);line-height:.78;letter-spacing:-.07em;
  font-variant-numeric:tabular-nums;
}
.hs-hero b{font-weight:800}
.hs-hero i{
  font-style:normal;font-size:.62em;line-height:.8;
  /* плюс стоит по центру высоты, а не сверху */
  align-self:center;margin-top:0;margin-left:4px;
}
.hs-card--projects .hs-hero i{color:#141414}
.hs-card--years .hs-hero i{color:var(--lime,#fff)}

/* слово справа: горизонтально, капсом, крупно и на всю высоту карточки */
.hs-word{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-end;
  gap:0;flex:none;margin:0;
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(24px,3vw,46px);line-height:.9;letter-spacing:-.005em;
  text-align:right;
}
.hs-word span{display:block;white-space:nowrap}
.hs-card--projects .hs-word{color:rgba(18,18,18,.42)}
.hs-card--years .hs-word{color:rgba(255,255,255,.5)}

/* карточка проектов: цифра почти во всю высоту, «проектов» — во всю
   оставшуюся ширину (одной строкой), размеры считаются от ширины карточки */
.hs-card--projects .hs-hero{font-size:clamp(66px,26cqw,128px)}
.hs-card--projects .hs-word{
  flex:1 1 auto;min-width:0;
  font-size:clamp(21px,7.4cqw,37px);
}

/* 2 — опыт */
.hs-card--years{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}

/* 3 — бренд: ни плашки, ни рамки — только крупная надпись на тёмном фоне
   Окно слайдера равно трём строкам, поэтому в покое видна вся надпись
   «3 brothers labs — работает с 2019», а трек листает по одной строке.
   Шесть строк = две одинаковые половины: сдвиг на три строки возвращает
   картинку в исходное положение без шва. */
.hs-card--brand{
  --hsb-l:clamp(29px,3.44vw,46px);  /* шаг строки; окно = 3 строки (высота ряда) */
  padding:0;gap:0;border-radius:0;background:none;color:#fff;
  justify-content:center;
}
.hs-brand-sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.hs-brand-slider{
  position:relative;flex:none;overflow:hidden;
  height:calc(var(--hsb-l) * 3);
}
.hs-brand-track{
  display:flex;flex-direction:column;
  will-change:transform;
  animation:hsBrandRoll 9s cubic-bezier(.65,0,.35,1) infinite;
}
.hs-card--brand:hover .hs-brand-track{animation-play-state:paused}
.hs-brand-line{
  display:flex;align-items:center;height:var(--hsb-l);
  white-space:nowrap;line-height:1;
  font-family:var(--display);font-weight:800;text-transform:uppercase;
}
.hs-brand-line--name{
  color:var(--lime,#fff);
  font-size:calc(var(--hsb-l) * .94);letter-spacing:-.045em;
}
.hs-brand-line--sub{
  color:rgba(255,255,255,.5);
  font-size:calc(var(--hsb-l) * .46);letter-spacing:.01em;font-weight:700;
}
@keyframes hsBrandRoll{
  0%,20%{transform:translateY(0)}
  26%,44%{transform:translateY(calc(var(--hsb-l) * -1))}
  50%,68%{transform:translateY(calc(var(--hsb-l) * -2))}
  74%,92%{transform:translateY(calc(var(--hsb-l) * -3))}
  100%{transform:translateY(calc(var(--hsb-l) * -3))}
}

/* ---------- адаптив ---------- */
@media (max-width:1180px){
  .hero-stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hs-card--brand{grid-column:1/-1}
  .hs-card--projects .hs-hero{font-size:clamp(70px,8vw,120px)}
  .hs-card--projects .hs-word{font-size:clamp(24px,3.4vw,48px)}
}
@media (max-width:767px){
  .hero-stats{grid-template-columns:1fr;margin-top:20px}
  .hs-card{padding:12px 14px}
  .hs-hero{font-size:70px}
  .hs-card--projects .hs-hero{font-size:72px}
  .hs-word{font-size:26px}
  .hs-card--projects .hs-word{font-size:30px}
}

@media (prefers-reduced-motion:reduce){
  .hs-brand-track{animation:none}
}