/* ============================================================
   ПЕРВЫЙ ЭКРАН
   Слева текст, справа 3D-рендер (assets/3d/hero.webp). Заглушка из
   тёмной версии — тёмный снимок hero-bg.png — снята 30.08.2026.

   Рендер лежит на странице свободно, без карточки. Предмет в рамке —
   первый признак нейродизайна, в проекте этот приём не используется
   нигде. Работает это за счёт того, что фон страницы и подложка
   рендера сведены в одно значение (254), см. --bg.
   ============================================================ */
/* overflow:clip держал прежнее свечение в кромках блока. Свечения
   больше нет, и обрезка снята намеренно: предмету может понадобиться
   выйти за колонку, и упираться в невидимую стенку он не должен. */
.hero{
  position:relative;
  padding-top:calc(var(--header-h) + clamp(20px, 3vw, 56px));
  padding-bottom:clamp(48px, 5.4vw, 92px);
}

/* Здесь стояло слабое фиолетовое свечение у правого верхнего угла.
   Снято 30.08.2026 по двум причинам.

   Первая: оно нашей выдумкой и было. Замер референса «О нас» по
   четырём углам и середине верхней кромки даёт ровно нейтральные
   250..251, разница синего и зелёного строго 0.00 — фон в макете
   плоский, никакого свечения там нет.

   Вторая: свечение лежало ровно там, куда встаёт рендер. Подложка у
   рендера непрозрачная, и он вырезал бы из свечения белый
   прямоугольник — то есть вернул бы рамку вокруг предмета с другой
   стороны. Фиолетовый свет в первый экран теперь приносит сам
   предмет: волна на экране и отсвет на камне. */

/* Отношение колонок вернулось к исходному: текст не ужимается, на 1920
   ему по-прежнему 892px. Предмет добирает размер не за счёт текста,
   а за счёт поля страницы — см. вынос у .hero__media. */
.hero__inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, .92fr);
  align-items:center;
  gap:clamp(28px, 3.6vw, 68px);
}

/* Кегль совпал с референсом (замер: cap 36px → 50px), а интерлиньяж
   был 1.41 из тёмной версии: там заголовок в две строки и воздух между
   ними работал на «раскодирование». В референсе шаг строк 51.5px при
   cap 36 — 1.03. Три строки заголовка на белом иначе рассыпаются. */
.hero__title{
  margin:0 0 clamp(16px, 1.6vw, 28px);
  font-family:var(--font-display);
  font-weight:620;
  font-stretch:100%;
  font-size:clamp(28px, 2.93vw, 50px);
  line-height:1.06;
  text-transform:uppercase;
}
.hero__title em{
  font-style:normal;
  color:var(--accent-1);
}

.hero__lead{
  margin:0 0 clamp(26px, 2.8vw, 46px);
  max-width:54ch;
  font-size:clamp(14px, 1.06vw, 18px);
  line-height:1.68;
  color:var(--fg-lead);
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(10px, 1vw, 18px);
}

/* Предмет лежит прямо на странице: ни подложки, ни рамки, ни тени.
   Обойма нужна только чтобы держать место до загрузки картинки.
   Фон страницы приведён к подложке рендера (оба 254), поэтому границы
   кадра не видно и без карточки. */
/* Отношение сторон — ровно у файла после обрезки. Держать его здесь
   обязательно: обойма резервирует место до загрузки картинки, и при
   расхождении первый экран дёрнется, когда картинка приедет.

   Вынос вправо на всё поле страницы: обойма выходит за .shell и
   доходит ровно до кромки окна. Так предмет остаётся крупным, а
   текстовой колонке возвращается прежняя ширина — размер берётся
   у пустого поля, а не у текста. Ровно до кромки, не дальше:
   отрицательное поле равно --gutter, поэтому горизонтальной
   прокрутки не появляется ни на одной ширине.

   Работает это только потому, что подложка рендера и фон страницы
   одного цвета: будь у обоймы своя заливка, у окна возникла бы
   вертикальная кромка. */
.hero__media{
  position:relative;
  aspect-ratio:1508 / 847;
  margin-right:calc(var(--gutter) * -1);
}
/* contain, а не cover: кадр рендера и обойма одного отношения сторон,
   так что резать нечего, а на промежуточных ширинах contain гарантирует,
   что предмету не срежет камень или верхние осколки. */
.hero__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}