/* Approved hero rules copied from site/landing/styles.css. Keep values unchanged. */
.hero { min-height: max(760px, 100svh); background: #050607; }
.hero-art { inset: 0; }
.hero-art img { object-fit: contain; object-position: right bottom; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg,transparent 97%,#08090b 100%); }
.hero-content { padding-top: clamp(200px, 27svh, 320px); padding-bottom: 140px; position: relative; }
.hero-category { margin: 0 0 30px; font-size: clamp(13px, 1.2vw, 19px); font-weight: 400; line-height: 1.45; letter-spacing: -.015em; color: #b6b8bd; }
h1 { font-size: clamp(44px, 4.2vw, 66px); font-weight: 570; letter-spacing: -.052em; line-height: 1.08; margin-bottom: 37px; max-width: 900px; color: #f6f7fa; }
h1 span { display: block; white-space: nowrap; }
.hero-description { font-size: 18px; line-height: 1.5; letter-spacing: -.015em; color: #c0c4cd; margin-bottom: 39px; max-width: 490px; }
.hero-actions { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.hero-cta { min-height: 56px; padding: 0 13px 0 22px; border-radius: 7px; gap: 20px; background: linear-gradient(145deg,#0950ef,#0643d3); border-color: rgba(90,146,255,.38); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.hero-cta:hover { background: linear-gradient(145deg,#286fdd,#2064d0); }
.hero-cta .button-label { font-size: 16px; font-weight: 450; letter-spacing: -.016em; }
.hero-cta .button-arrow { width: 35px; height: 35px; border-left: 1px solid rgba(255,255,255,.24); display: grid; place-items: center; padding-left: 9px; font-size: 21px; font-weight: 400; }
.hero-secondary { display: inline-flex; align-items: center; min-height: 48px; gap: 12px; color: #d3d7df; font-size: 15px; font-weight: 510; transition: color .2s; }
.hero-secondary:hover { color: #fff; }
.hero-secondary > span { font-size: 18px; }

@media (max-width: 1100px) {
  h1 { font-size: 48px; }
  .hero-description { font-size: 17px; max-width: 425px; }
  .hero-actions { gap: 23px; }
}

@media (max-width: 1000px) {
  .hero { display: flex; flex-direction: column; min-height: 0; }
  .hero-content { order: 0; padding-top: 156px; padding-bottom: 0; }
  h1 { max-width: 100%; }
  .hero-category { font-size: 16px; }
  .hero-art { position: relative; inset: auto; order: 1; width: 100%; height: auto; aspect-ratio: 3 / 2; margin-top: 28px; }
  .hero-art img { object-position: center; }
}

@media (max-width: 700px) {
  .hero-content { padding-top: 132px; padding-bottom: 0; }
  .hero-category { font-size: 13px; margin-bottom: 22px; letter-spacing: -.015em; }
  h1 { font-size: clamp(36px,9.4vw,54px); line-height: 1.09; letter-spacing: -.052em; margin-bottom: 27px; }
  h1 span { white-space: normal; }
  .hero-description { font-size: 16px; line-height: 1.6; max-width: 450px; margin-bottom: 26px; }
  .desktop-break { display: none; }
  .hero-actions { gap: 15px; flex-wrap: wrap; }
  .hero-cta { min-height: 58px; padding: 0 10px 0 18px; gap: 16px; }
  .hero-cta .button-label { font-size: 15px; }
  .hero-cta .button-arrow { width: 29px; height: 31px; padding-left: 8px; }
  .hero-secondary { font-size: 14px; gap: 9px; }
}

/* Действие первого экрана — такая же текстовая ссылка со стрелкой, как
   «Посмотреть работу агента ↓» в секциях: владелец 7 сентября попросил
   привести их к одному виду и убрать вторую ссылку «Возможности». */
.hero-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 22px;
  color: #70AFFF;
  font-size: 16px;
  line-height: 1.5;
  transition: color .2s;
}
.hero-link:hover { color: #A1CAFF; }
.hero-link > span { flex: none; font-size: 18px; }

/* Значки систем под действием первого экрана. Серые и тихие: это подпись,
   а не второе действие. Windows приглушён и подписан «пока нет» — сборки
   под неё не существует, договор выпуска ставит её «позже отдельным этапом».
   Обещать её наравне с готовыми значило бы звать человека за пустотой. */
.hero-platforms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.hero-platform {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #969BA6;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: -.005em;
}
.hero-platform svg { flex: none; }
.hero-platform small { color: #6E727B; font-size: 12px; }
.hero-platform--soon { opacity: .55; }
@media (max-width: 700px) {
  .hero-platforms { gap: 18px; margin-top: 24px; }
  .hero-platform { font-size: 12px; gap: 7px; }
}

/* Номер и стадия рядом с категорией. Стоят тише самой категории: это
   пометка, а не заголовок. Номер берётся из данных сборки — 9 сентября
   сайт обещал 0.11.15 при розданной 0.11.17, ровно то расхождение, от
   которого предостерегает CLAUDE.md. */
.hero-version { margin-left: 14px; color: #7C808A; }
.hero-alpha {
  margin-left: 10px;
  padding: 3px 7px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 5px;
  color: #AAAEB7;
  font-size: 12px;
  letter-spacing: .015em;
  white-space: nowrap;
}

/* Номер и стадия стоят рядом с действием, а не у категории: владелец
   9 сентября решил, что там уместнее. Тише самого действия — это пометка. */
.hero-actions { align-items: center; }
.hero-release { display: inline-flex; align-items: center; gap: 10px; }
.hero-release .hero-version { margin-left: 0; }