/* Сброс и типографика. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
  /* Полоса прокрутки и системные элементы форм рисуются браузером — без этого
     они остаются светлыми на тёмной странице. Мета-тег покрывает не всё. */
  color-scheme: dark;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  /* Без этого атрибут height в разметке остаётся в силе, когда ширину задаёт
     CSS: картинка вписывается в коробку исходной высоты и вокруг неё
     появляются пустые поля. */
  height: auto;
  display: block;
}

a {
  color: var(--ink-strong);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3 {
  margin: 0 0 16px;
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--ink-strong);
}

/* Оба образца строят первый экран на очень крупном заголовке: у Naex 102px,
   у MAX 72px. Но там заголовки в три-четыре слова, а у нас фраза длинная —
   на 84px она разваливалась на пять строк и съедала весь экран. 60px держит
   тот же характер и укладывается в три строки. */
h1 {
  font-size: clamp(34px, 4.8vw, 60px);
}

h2 {
  font-size: clamp(28px, 4.4vw, 54px);
  line-height: 1.08;
}

h3 {
  font-size: 21px;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

p {
  margin: 0 0 16px;
}

::selection {
  background: var(--brand);
  color: #fff;
}

.wrap {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: 112px 0;
  position: relative;
}

.section--soft {
  background: var(--bg-soft);
}

.section__head {
  max-width: 720px;
  margin-bottom: 56px;
}

.section__head p {
  color: var(--ink-soft);
  font-size: 19px;
  margin: 0;
}

/* Надзаголовок-пилюля — общий приём обоих образцов. */
.eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  background: var(--glass);
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Выделение части заголовка градиентом. */
.grad {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 720px) {
  body {
    font-size: 16px;
  }

  .section {
    padding: 68px 0;
  }

  .section__head {
    margin-bottom: 34px;
  }

  .section__head p {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}