:root {
  --color-pure-canvas: #ffffff;
  --color-ink-black: #1c1c1c;
  --color-graphite: #232323;
  --color-slate-mute: #5f6368;
  --color-hairline-gray: #e5e7eb;
  --color-pure-black: #000000;
  --color-accent: #c9372c;

  --font-ui: "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-logo: "Avenir Next", "Futura", "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --text-caption: 12px;
  --text-body: 15px;
  --text-lead: 17px;
  --text-heading: 20px;
  --leading-caption: 1.4;
  --leading-body: 1.55;
  --leading-heading: 1.2;
  --tracking-tight: -0.025em;

  --font-weight-regular: 400;
  --font-weight-bold: 700;

  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-11: 11px;
  --spacing-15: 15px;
  --spacing-19: 19px;
  --spacing-23: 23px;
  --spacing-28: 28px;
  --spacing-48: 48px;

  --page-max-width: 1440px;
  --section-gap: 48px;
  --element-gap: 8px;

  --radius-cards: 0px;
  --radius-images: 0px;
  --radius-inputs: 15px;
  --radius-buttons: 9999px;

  --header-height: 56px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-pure-canvas);
  color: var(--color-ink-black);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-tight);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-images); }

a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--spacing-19);
}

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

.skip-link {
  position: absolute;
  left: var(--spacing-19);
  top: -80px;
  z-index: 60;
  padding: var(--spacing-8) var(--spacing-15);
  background: var(--color-pure-canvas);
  border: 1px solid var(--color-ink-black);
  border-radius: var(--radius-buttons);
  text-decoration: none;
  transition: top .15s linear;
}

.skip-link:focus { top: var(--spacing-8); }

.eyebrow {
  margin: 0 0 var(--spacing-15);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-slate-mute);
}

/* ---------- logo ---------- */

.logo {
  display: inline-block;
  font-family: var(--font-logo);
  font-size: 19px;
  font-weight: var(--font-weight-bold);
  letter-spacing: .045em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

.logo__part--accent { color: var(--color-accent); }

.logo--footer { font-size: 24px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-19);
  border: 1px solid var(--color-ink-black);
  border-radius: var(--radius-buttons);
  background: var(--color-pure-canvas);
  color: var(--color-ink-black);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  cursor: pointer;
}

.btn--solid {
  background: var(--color-ink-black);
  color: var(--color-pure-canvas);
}

.btn--block { width: 100%; justify-content: center; }

.btn__icon { width: 14px; height: 14px; flex: none; }

/* ---------- header ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-pure-canvas);
  border-bottom: 1px solid var(--color-hairline-gray);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-15);
  min-height: var(--header-height);
}

.header__burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  padding: 0 6px;
  border: 1px solid var(--color-ink-black);
  border-radius: var(--radius-buttons);
  background: var(--color-pure-canvas);
  cursor: pointer;
}

.burger__line {
  display: block;
  height: 1.5px;
  background: var(--color-ink-black);
}

.header__nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--color-pure-canvas);
  border-bottom: 1px solid var(--color-hairline-gray);
}

.header__nav.is-open { display: block; }

.nav__list {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-8) var(--spacing-19) var(--spacing-19);
}

.nav__item + .nav__item { border-top: 1px solid var(--color-hairline-gray); }

.nav__link {
  display: block;
  padding: var(--spacing-11) 0;
  font-size: var(--text-body);
  text-decoration: none;
}

/* ---------- section frame ---------- */

.section {
  padding-block: var(--section-gap);
  border-top: 1px solid var(--color-hairline-gray);
}

.section--flush { border-top: 0; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-15);
  margin-bottom: var(--spacing-28);
}

.section-head__title {
  font-size: var(--text-heading);
  max-width: 22ch;
}

.section-head__link { flex: none; }

.section__intro {
  max-width: 68ch;
  margin-bottom: var(--spacing-28);
  color: var(--color-graphite);
}

/* ---------- hero ---------- */

.hero { padding-block: var(--spacing-28) var(--section-gap); }

.hero__title {
  font-size: clamp(30px, 7.4vw, 58px);
  line-height: 1.03;
  letter-spacing: -0.035em;
  max-width: 17ch;
}

.hero__title-accent { color: var(--color-accent); }

.hero__lead {
  max-width: 60ch;
  margin-top: var(--spacing-23);
  font-size: var(--text-lead);
  color: var(--color-graphite);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin-top: var(--spacing-28);
}

.hero__facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-15);
  margin-top: var(--spacing-28);
  padding-top: var(--spacing-19);
  border-top: 1px solid var(--color-hairline-gray);
}

.hero__fact-term {
  display: block;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-slate-mute);
}

.hero__fact-desc { margin: var(--spacing-4) 0 0; }

.hero__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-19);
  margin-top: var(--spacing-28);
}

.hero__panel { margin: 0; }

.hero__panel img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.hero__caption {
  margin-top: var(--spacing-4);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-tight);
  color: var(--color-graphite);
}

/* ---------- spotlight ---------- */

.spotlight__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-23);
  padding-block: var(--spacing-28);
  border-top: 1px solid var(--color-hairline-gray);
}

.spotlight__row:first-of-type { border-top: 0; padding-top: 0; }

.spotlight__media { display: grid; gap: var(--spacing-8); }

.spotlight__shot { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.spotlight__thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-8);
}

.spotlight__thumbs img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.spotlight__index {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-slate-mute);
}

.spotlight__title {
  margin-top: var(--spacing-8);
  font-size: var(--text-heading);
}

.spotlight__dev {
  margin-top: var(--spacing-4);
  color: var(--color-slate-mute);
}

.spotlight__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-15);
  margin: var(--spacing-19) 0;
  padding-block: var(--spacing-15);
  border-top: 1px solid var(--color-hairline-gray);
  border-bottom: 1px solid var(--color-hairline-gray);
}

.spotlight__spec-term {
  display: block;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-slate-mute);
}

.spotlight__spec-desc { margin: var(--spacing-4) 0 0; }

.spotlight__text { color: var(--color-graphite); max-width: 62ch; }

.spotlight__text + .spotlight__text { margin-top: var(--spacing-11); }

.spotlight__actions { margin-top: var(--spacing-19); }

/* ---------- about ---------- */

.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-23);
}

.about__item { padding-top: var(--spacing-15); border-top: 1px solid var(--color-hairline-gray); }

.about__icon { width: 22px; height: 22px; color: var(--color-ink-black); }

.about__item-title { margin: var(--spacing-11) 0 var(--spacing-4); font-size: var(--text-body); }

.about__item-text { color: var(--color-graphite); }

.about__band { margin-top: var(--spacing-28); display: grid; grid-template-columns: 1fr; gap: var(--spacing-19); }

.about__band img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.about__band-text { color: var(--color-graphite); align-self: center; max-width: 62ch; }

.about__band-text p + p { margin-top: var(--spacing-11); }

/* ---------- catalog ---------- */

.catalog__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-28) var(--spacing-23);
}

.card { display: flex; flex-direction: column; }

.card__media {
  display: block;
  width: 96px;
  height: 96px;
}

.card__media img { width: 96px; height: 96px; object-fit: cover; }

.card__title { margin-top: var(--spacing-11); font-size: var(--text-body); }

.card__dev { color: var(--color-slate-mute); }

.card__genre {
  margin-top: var(--spacing-8);
  padding-top: var(--spacing-8);
  border-top: 1px solid var(--color-hairline-gray);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-slate-mute);
}

.card__text { margin-top: var(--spacing-8); color: var(--color-graphite); }

.card__actions { margin-top: var(--spacing-15); }

/* ---------- model ---------- */

.model__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-23);
}

.model__item { padding-top: var(--spacing-15); border-top: 1px solid var(--color-hairline-gray); }

.model__num {
  font-size: var(--text-caption);
  letter-spacing: .12em;
  color: var(--color-slate-mute);
}

.model__title { margin: var(--spacing-8) 0 var(--spacing-4); font-size: var(--text-body); }

.model__text { color: var(--color-graphite); }

.model__note { margin-top: var(--spacing-28); color: var(--color-graphite); max-width: 68ch; }

/* ---------- faq ---------- */

.faq__list { border-top: 1px solid var(--color-hairline-gray); }

.faq__item { border-bottom: 1px solid var(--color-hairline-gray); }

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-15);
  width: 100%;
  padding: var(--spacing-19) 0;
  background: none;
  border: 0;
  color: var(--color-ink-black);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  text-align: left;
  cursor: pointer;
}

.faq__sign { position: relative; width: 14px; height: 14px; flex: none; }

.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  background: var(--color-ink-black);
  transition: transform .18s ease;
}

.faq__sign::before { left: 0; top: 6.25px; width: 14px; height: 1.5px; }
.faq__sign::after { top: 0; left: 6.25px; width: 1.5px; height: 14px; }

.faq__item.is-open .faq__sign::after { transform: scaleY(0); }

.faq__answer { display: none; padding-bottom: var(--spacing-19); color: var(--color-graphite); max-width: 72ch; }

.faq__item.is-open .faq__answer { display: block; }

/* ---------- voices ---------- */

.voices__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-23);
}

.voices__item { padding-top: var(--spacing-15); border-top: 1px solid var(--color-hairline-gray); }

.voices__quote { margin: 0; color: var(--color-graphite); }

.voices__author {
  display: flex;
  align-items: center;
  gap: var(--spacing-11);
  margin-top: var(--spacing-15);
}

.voices__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--color-ink-black);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-bold);
  letter-spacing: .06em;
}

.voices__name { font-weight: var(--font-weight-bold); }

.voices__role { display: block; color: var(--color-slate-mute); font-size: var(--text-caption); line-height: var(--leading-caption); }

/* ---------- subscribe ---------- */

.subscribe__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-28);
}

.subscribe__form { display: grid; gap: var(--spacing-15); max-width: 520px; }

.field { display: grid; gap: var(--spacing-4); }

.field__label { font-size: var(--text-caption); letter-spacing: .1em; text-transform: uppercase; color: var(--color-slate-mute); }

.field__input {
  width: 100%;
  padding: var(--spacing-11) var(--spacing-15);
  border: 1px solid var(--color-hairline-gray);
  border-radius: var(--radius-inputs);
  background: var(--color-pure-canvas);
  color: var(--color-ink-black);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  letter-spacing: var(--tracking-tight);
}

.field__input:focus-visible { border-color: var(--color-ink-black); }

.checkbox { display: flex; align-items: flex-start; gap: var(--spacing-8); color: var(--color-graphite); }

.checkbox__input { margin: 3px 0 0; flex: none; width: 15px; height: 15px; accent-color: var(--color-ink-black); }

.subscribe__note { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-slate-mute); }

.subscribe__success {
  display: none;
  margin-top: var(--spacing-15);
  padding: var(--spacing-15);
  border: 1px solid var(--color-ink-black);
  max-width: 520px;
}

.subscribe__success.is-visible { display: block; }

.subscribe__aside { color: var(--color-graphite); }

.subscribe__aside-list { margin-top: var(--spacing-15); display: grid; gap: var(--spacing-11); }

.subscribe__aside-item { padding-top: var(--spacing-11); border-top: 1px solid var(--color-hairline-gray); }

/* ---------- footer ---------- */

.footer {
  padding-block: var(--section-gap);
  border-top: 1px solid var(--color-hairline-gray);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-28);
}

.footer__about { margin-top: var(--spacing-15); color: var(--color-graphite); max-width: 46ch; }

.footer__title {
  font-size: var(--text-caption);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-slate-mute);
  margin-bottom: var(--spacing-11);
}

.footer__list { display: grid; gap: var(--spacing-8); }

.footer__link { text-decoration: none; }

.footer__link:hover { text-decoration: underline; }

.footer__contact { color: var(--color-graphite); }

.footer__contact a { color: var(--color-ink-black); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8) var(--spacing-19);
  justify-content: space-between;
  margin-top: var(--spacing-28);
  padding-top: var(--spacing-19);
  border-top: 1px solid var(--color-hairline-gray);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-slate-mute);
}

/* ---------- legal pages ---------- */

.legal { padding-block: var(--spacing-28) var(--section-gap); }

.legal__title { font-size: clamp(24px, 5vw, 38px); letter-spacing: -0.03em; max-width: 20ch; }

.legal__meta { margin-top: var(--spacing-11); color: var(--color-slate-mute); font-size: var(--text-caption); letter-spacing: .1em; text-transform: uppercase; }

.legal__back { margin-top: var(--spacing-19); }

.legal__body { max-width: 76ch; margin-top: var(--spacing-28); }

.legal__body h2 {
  margin-top: var(--spacing-28);
  padding-top: var(--spacing-15);
  border-top: 1px solid var(--color-hairline-gray);
  font-size: var(--text-heading);
}

.legal__body h3 { margin-top: var(--spacing-19); font-size: var(--text-body); }

.legal__body p { margin-top: var(--spacing-11); color: var(--color-graphite); }

.legal__body ul { margin-top: var(--spacing-11); display: grid; gap: var(--spacing-8); }

.legal__body li { position: relative; padding-left: var(--spacing-19); color: var(--color-graphite); }

.legal__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 1px;
  background: var(--color-ink-black);
}

/* ---------- cookie banner + to top ---------- */

.cookie {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  background: var(--color-pure-canvas);
  border-top: 1px solid var(--color-ink-black);
}

.cookie.is-visible { display: block; }

.cookie__inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-15);
  padding-block: var(--spacing-15);
}

.cookie__text { color: var(--color-graphite); font-size: var(--text-caption); line-height: var(--leading-caption); max-width: 76ch; }

.cookie__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-8); }

.to-top {
  display: none;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 45;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--color-ink-black);
  border-radius: var(--radius-buttons);
  background: var(--color-pure-canvas);
  color: var(--color-ink-black);
  cursor: pointer;
}

.to-top.is-visible { display: inline-flex; }

.to-top svg { width: 16px; height: 16px; }

/* ---------- breakpoints ---------- */

@media (min-width: 600px) {
  .hero__facts { grid-template-columns: repeat(3, 1fr); }
  .hero__split { grid-template-columns: 1fr 1fr; gap: var(--spacing-8); }
  .catalog__grid { grid-template-columns: 1fr 1fr; }
  .voices__grid { grid-template-columns: 1fr 1fr; }
  .cookie__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (min-width: 768px) {
  :root { --header-height: 64px; --section-gap: 72px; }
  .container { padding-inline: var(--spacing-28); }
  .logo { font-size: 21px; }
  .about__grid { grid-template-columns: 1fr 1fr; gap: var(--spacing-28); }
  .about__band { grid-template-columns: 1.15fr 1fr; gap: var(--spacing-28); }
  .model__grid { grid-template-columns: repeat(3, 1fr); }
  .subscribe__layout { grid-template-columns: 1.1fr 1fr; gap: var(--spacing-48); }
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
  .voices__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  :root { --section-gap: 88px; }
  .header__burger { display: none; }
  .header__nav {
    display: block;
    position: static;
    border-bottom: 0;
  }
  .nav__list { flex-direction: row; gap: var(--spacing-23); padding: 0; }
  .nav__item + .nav__item { border-top: 0; }
  .nav__link { padding: 0; }
  .catalog__grid { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-48) var(--spacing-28); }
  .spotlight__row { grid-template-columns: 1.25fr 1fr; gap: var(--spacing-48); align-items: start; }
  .spotlight__row--reverse .spotlight__media { order: 2; }
  .spotlight__row--reverse .spotlight__body { order: 1; }
  .about__grid { grid-template-columns: repeat(4, 1fr); }
  .hero__title { font-size: clamp(44px, 4.4vw, 62px); }
  .card__media, .card__media img { width: 128px; height: 128px; }
}

@media (min-width: 1280px) {
  .container { padding-inline: var(--spacing-48); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}