/**
 * Одностраничник о проекте.
 *
 * Строится на типографике и воздухе, а не на картинках: страницу читают
 * сверху вниз один раз, и держать внимание должен текст. Отсюда крупные
 * заглавные заголовки, узкая колонка текста и большие поля между разделами.
 *
 * Цвет — почти только чёрный по бумаге. Фирменный синий появляется на ссылках
 * и одной кнопке: если красить им всё, он перестаёт означать «сюда нажать».
 */

:root {
  --paper: #f7f7f5;
  --ink: #16181c;
  --ink-soft: #55585f;
  --ink-faint: #8b8f97;
  --line: rgba(22, 24, 28, 0.12);
  --accent: #3a5a82;

  --font: -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Поля страницы одной переменной: их правят чаще всего. */
  --pad: clamp(20px, 6vw, 96px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

/* ---------- Шапка ---------- */

.top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--pad);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}

/* Черта под шапкой появляется, только когда под ней что-то проехало. */
.top.stuck {
  border-bottom-color: var(--line);
}

.top-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.top-nav {
  display: flex;
  gap: clamp(14px, 3vw, 34px);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.top-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 160ms var(--ease);
}

.top-nav a:hover {
  color: var(--ink);
}

@media (max-width: 720px) {
  .top-nav {
    display: none;
  }
}

/* ---------- Первый экран ---------- */

.hero {
  padding: clamp(60px, 14vh, 150px) var(--pad) clamp(70px, 16vh, 170px);
}

.eyebrow {
  margin: 0 0 clamp(24px, 5vh, 48px);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

h1 {
  margin: 0;
  /* Имя продукта — основной визуальный объект страницы, поэтому оно набрано
     во всю ширину поля и плотно: разреженный крупный текст рассыпается. */
  font-size: clamp(56px, 15vw, 190px);
  line-height: 0.88;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Подпись под именем: кто это. Само имя ничего не объясняет, и без строки
   «адъютант руководителя» человек не поймёт, что ему показывают. Набрана
   вразрядку и строчными — чтобы не спорить с именем, а служить ему. */
.hero-role {
  margin: clamp(10px, 1.6vh, 18px) 0 0;
  font-size: clamp(15px, 1.8vw, 22px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft, var(--ink-faint));
}

.manifesto {
  max-width: 34ch;
  margin: clamp(30px, 6vh, 56px) 0 0 auto;
  font-size: clamp(19px, 2.2vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: clamp(30px, 5vh, 52px);
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .manifesto,
  .hero-actions {
    margin-left: 0;
    justify-content: flex-start;
  }
}

.button {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 200ms var(--ease), transform 200ms var(--ease);
}

.button:hover {
  background: var(--accent);
  transform: translateY(-1px);
}

.link {
  color: var(--accent);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* ---------- Разделы ---------- */

.band {
  padding: clamp(56px, 11vh, 120px) var(--pad);
  border-top: 1px solid var(--line);
}

.section-num {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.section-title {
  margin: 0 0 clamp(30px, 6vh, 64px);
  font-size: clamp(28px, 5vw, 54px);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Две колонки разной ширины: крупная мысль слева, пояснение справа. Ровные
   половины читаются как таблица, а разница ширин задаёт порядок чтения. */
.columns {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: start;
}

.lead {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.32;
  letter-spacing: -0.02em;
}

.prose p {
  margin: 0 0 16px;
  max-width: 54ch;
  color: var(--ink-soft);
}

.prose p:last-child {
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .columns {
    grid-template-columns: 1fr;
  }
}

/* ---------- Сетка возможностей ---------- */

.grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 64px);
  margin: 0;
  padding: 0;
}

.grid h3 {
  margin: 0 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--ink);
  font-size: 18px;
  letter-spacing: -0.01em;
}

.grid p {
  margin: 0;
  max-width: 40ch;
  color: var(--ink-soft);
  font-size: 15.5px;
}

/* ---------- Снимки экрана ---------- */

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 3vw, 40px);
  padding: 0 var(--pad) clamp(56px, 11vh, 120px);
}

.shots figure {
  margin: 0;
}

.shots img {
  border: 1px solid var(--line);
  border-radius: 10px;
  /* Скриншот — иллюстрация, а не окно: тень делает из него предмет на столе. */
  box-shadow: 0 1px 2px rgba(12, 20, 35, 0.06), 0 22px 44px -22px rgba(12, 20, 35, 0.35);
}

.shots figcaption {
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

/* ---------- Железо ---------- */

.hardware {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin: clamp(36px, 7vh, 72px) 0 0;
  padding: 0;
}

.hardware li {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* Домашняя станция — рекомендация, поэтому её столбец подчёркнут линией
   потемнее. Заливкой выделять не стали: три карточки и одна цветная выглядят
   как реклама, а это выбор, а не продажа. */
.hardware .hw-main {
  border-top-color: var(--ink);
}

.hw-kind {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.hardware h3 {
  margin: 0 0 12px;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.02em;
}

.hw-note {
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: 15.5px;
}

.hw-spec {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
}

.fineprint {
  max-width: 62ch;
  margin: clamp(30px, 6vh, 56px) 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-faint);
}

/* ---------- Разворот про приватность ---------- */

.quote {
  padding: clamp(70px, 16vh, 170px) var(--pad);
  background: var(--ink);
  color: var(--paper);
}

.quote > p:first-child {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(34px, 7vw, 86px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

.quote-note {
  max-width: 46ch;
  margin: clamp(24px, 5vh, 44px) 0 0 auto;
  color: rgba(247, 247, 245, 0.7);
  font-size: 16px;
}

/* ---------- Релизы ---------- */

.releases {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.release {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 7fr);
  gap: clamp(12px, 3vw, 40px);
  padding: 26px 0;
  border-top: 1px solid var(--line);
}

.release:first-child {
  border-top-color: var(--ink);
}

.rel-version {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.rel-date {
  margin: 0;
  font-size: 14px;
  color: var(--ink-faint);
}

.rel-body ul {
  margin: 0 0 16px;
  padding-left: 18px;
  color: var(--ink-soft);
  font-size: 15.5px;
}

.rel-body li + li {
  margin-top: 6px;
}

@media (max-width: 860px) {
  .release {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ---------- Подвал ---------- */

.foot {
  display: grid;
  /* Имя и подпись занимают по своей ширине, пояснение растягивается между
     ними. Раньше все три колонки были равными, и правая подпись висела не у
     края, а где придётся. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(20px, 4vw, 56px);
  /* По верху: теперь по краям стоят не одиночные строки, а пары — имя с годом
     и язык с подписью. Выравнивание по базовой линии роняло бы вторые строки
     куда попало, потому что высота строк у них разная. */
  align-items: start;
  padding: clamp(50px, 10vh, 100px) var(--pad) clamp(40px, 8vh, 80px);
  border-top: 1px solid var(--line);
}

.foot-mark {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.foot-note {
  margin: 0;
  max-width: 46ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.foot-tag {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  justify-self: end;
}

@media (max-width: 860px) {
  /* В столбик: три надписи в ряд на узком экране сжимаются до нечитаемого. */
  .foot {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .foot-tag {
    justify-self: start;
  }
}

/* ---------- Появление при прокрутке ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  }

  .reveal.shown {
    opacity: 1;
    transform: none;
  }
}

/* Контакты в разделе об авторе: две ссылки в строку, с воздухом между ними. */
.contacts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 44px);
  margin-top: clamp(28px, 5vh, 52px);
}

/* Сетка сразу после двух колонок: без отступа верхние черты карточек режут
   текст правой колонки — он длиннее левой и доходит до них вплотную. */
.columns + .grid,
.columns + .hardware {
  margin-top: clamp(40px, 8vh, 84px);
}

/* Схема размещения в карточке железа.
   Светлее текста: это пояснение к словам, а не самостоятельная картинка. */
.hw-scheme {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

/* У рекомендованного варианта схема чуть контрастнее — вместе с чертой сверху
   это единственное, чем он выделен. */
.hardware .hw-main .hw-scheme {
  filter: contrast(1.35);
}

/* Строка «ссылка появится позже» на месте кнопки скачивания. Приглушена: это
   не действие, а обещание, и выглядеть кнопкой она не должна. */
.rel-soon {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--text-subtle);
  max-width: 46ch;
}

/* Края футера — столбиками по две строки. */
.foot-side {
  display: grid;
  gap: 6px;
}

.foot-side-end {
  justify-items: end;
  text-align: right;
}

.foot-year {
  margin: 0;
  font-size: 13px;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}

/* Переключатель языка. Текущий язык не ссылка — нажимать на него некуда, и
   выглядеть нажимаемым он не должен. */
.foot-lang {
  margin: 0;
  display: flex;
  gap: 10px;
  font-size: 13px;
}

/* Текущий язык — тёмный, ссылка на другой — приглушённая. Было наоборот, и
   глаз цеплялся за «English» на русской странице, будто она и есть текущая. */
.foot-lang span {
  color: var(--ink);
  font-weight: 500;
}

.foot-lang a {
  color: var(--text-subtle);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.foot-lang a:hover {
  color: var(--ink);
  border-bottom-color: var(--line-strong);
}

/* Переключатель языка в шапке. Маленький и приглушённый: это служебная
   кнопка, а не раздел — спорить за внимание с навигацией она не должна. */
.top-lang {
  margin: 0;
  display: flex;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.top-lang span {
  color: var(--ink);
  font-weight: 600;
}

.top-lang a {
  color: var(--text-subtle);
  text-decoration: none;
  transition: color 0.2s;
}

.top-lang a:hover {
  color: var(--ink);
}

/* На узком экране навигация прячется, а язык остаётся: он нужен как раз тем,
   кто пришёл с телефона и не понимает, что написано. */
@media (max-width: 760px) {
  .top-lang {
    font-size: 13px;
  }
}