:root {
  --c-ink: #151523;
  --c-violet: #4e64df;
  --c-iris: #6c7ee4;
  --c-periwinkle: #99a7f5;
  --c-lavender: #d0d6fb;
  --c-graphite: #49495a;
  --c-paper: #ffffff;
  --c-fog: #e9e9ec;
  --c-ash: #d7d7db;
  --c-steel: #b9b9c1;
  --c-wash: #f1f3fe;

  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Avenir Next", "Segoe UI Variable Display", "Segoe UI", ui-sans-serif, system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-logo: Georgia, "Iowan Old Style", "Times New Roman", serif;

  --t-caption: 11px;
  --t-body: 14px;
  --t-body-lg: 16px;
  --t-sub: 18px;
  --t-h-sm: 20px;
  --t-h: 24px;
  --t-h-lg: 28px;
  --t-display: 32px;
  --t-display-lg: 40px;

  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;
  --s-28: 28px;
  --s-32: 32px;
  --s-40: 40px;
  --s-48: 48px;
  --s-80: 80px;

  --r-cards: 12px;
  --r-images: 20px;
  --r-inputs: 8px;
  --r-buttons: 12px;
  --r-full: 100px;

  --sh-raised: rgba(21, 21, 35, 0.2) 0 2px 4px 0;
  --sh-cta: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
  --sh-card: rgba(21, 21, 35, 0.2) 0 4px 8px 0;

  --page: 1200px;
  --header-h: 64px;
  --rainbow: linear-gradient(60deg, rgb(37, 212, 84), rgb(254, 211, 93), rgb(254, 178, 27), rgb(223, 42, 42), rgb(78, 100, 223), rgb(179, 234, 254), rgb(37, 212, 84));
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-size: var(--t-body-lg);
  line-height: 1.5;
  font-weight: 400;
}

img { max-width: 100%; display: block; }
a { color: var(--c-violet); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--c-violet);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--c-ink);
  color: var(--c-paper);
  padding: 10px 20px;
  border-radius: var(--r-buttons);
  font-size: var(--t-body);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { left: var(--s-16); top: var(--s-8); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.25;
  padding: 11px 20px;
  border-radius: var(--r-buttons);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn--primary { background: var(--c-violet); color: var(--c-paper); box-shadow: var(--sh-cta); }
.btn--primary:hover { background: #3f54cd; }
.btn--ghost { background: var(--c-paper); color: var(--c-ink); border-color: var(--c-ink); box-shadow: var(--sh-raised); }
.btn--ghost:hover { border-color: var(--c-violet); color: var(--c-violet); }
.btn--onviolet { background: var(--c-paper); color: var(--c-violet); }
.btn--onviolet:hover { background: var(--c-wash); }
.btn__icon { width: 16px; height: 16px; flex: none; }

/* ---------- promo strip ---------- */
.strip { background: var(--c-violet); color: var(--c-paper); }
.strip__inner { display: flex; align-items: center; gap: var(--s-12); padding-block: 10px; }
.strip__icon { width: 16px; height: 16px; flex: none; }
.strip__text { font-size: 13px; font-weight: 500; line-height: 1.33; }

/* ---------- header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-ash);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  min-height: var(--header-h);
}
.logo {
  font-family: var(--font-logo);
  font-size: var(--t-h-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-ink);
  white-space: nowrap;
}
.logo__accent { color: var(--c-violet); }

.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--c-ash);
  border-radius: var(--r-full);
  background: var(--c-paper);
  color: var(--c-ink);
  cursor: pointer;
}
.burger__icon { width: 20px; height: 20px; }
.burger__icon--close { display: none; }
.burger.is-open .burger__icon--open { display: none; }
.burger.is-open .burger__icon--close { display: block; }

.nav { display: none; }
.nav.is-open { display: block; }
.nav__list { list-style: none; display: flex; flex-direction: column; gap: var(--s-4); padding-block: var(--s-12); }
.nav__link {
  display: block;
  padding: 8px 16px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--c-ink);
  text-decoration: none;
}
.nav__link:hover { border-color: var(--c-periwinkle); color: var(--c-violet); }
.nav__link.is-current { border-color: var(--c-violet); color: var(--c-violet); }

/* ---------- generic section pieces ---------- */
.section__eyebrow {
  display: inline-block;
  font-size: var(--t-caption);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-violet);
  border: 1px solid var(--c-lavender);
  border-radius: var(--r-full);
  padding: 6px 12px;
  background: var(--c-paper);
}
.section__title { font-size: var(--t-h-lg); line-height: 1.14; margin-top: var(--s-16); }
.section__lead { color: var(--c-graphite); margin-top: var(--s-12); max-width: 62ch; }

/* ---------- hero ---------- */
.hero {
  background: url("assets/img/bg/hero-wall.webp") center / cover no-repeat, var(--c-paper);
  border-bottom: 1px solid var(--c-ash);
  padding-block: var(--s-40) var(--s-48);
}
.hero__grid { display: grid; gap: var(--s-32); }
.hero__title { font-size: clamp(28px, 7vw, var(--t-display-lg)); line-height: 1.15; margin-top: var(--s-16); }
.hero__title-accent { color: var(--c-violet); }
.hero__text { color: var(--c-graphite); margin-top: var(--s-16); max-width: 54ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-12); margin-top: var(--s-24); }
.hero__facts { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-top: var(--s-24); list-style: none; }
.hero__fact {
  font-size: 12px;
  font-weight: 500;
  color: var(--c-ink);
  background: var(--c-paper);
  border: 1px solid var(--c-ash);
  border-radius: var(--r-full);
  padding: 6px 12px;
}
.hero__stage { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: var(--s-16); align-items: start; }
.hero__frame {
  border: 1px solid var(--c-ash);
  border-radius: var(--r-images);
  overflow: hidden;
  background: var(--c-paper);
  box-shadow: var(--sh-card);
}
.hero__frame img { width: 100%; height: auto; }
.hero__side { display: grid; gap: var(--s-12); }
.hero__badge {
  border: 1px solid var(--c-lavender);
  background: var(--c-wash);
  border-radius: var(--r-cards);
  padding: var(--s-16);
}
.hero__badge-title { font-size: var(--t-body); font-weight: 700; }
.hero__badge-text { font-size: 13px; color: var(--c-graphite); margin-top: var(--s-4); }
.hero__icons { display: flex; gap: var(--s-8); list-style: none; }
.hero__icons img {
  width: 44px;
  height: 44px;
  border-radius: var(--r-inputs);
  border: 1px solid var(--c-ash);
}

/* ---------- catalog: bento mosaic (used once on the site) ---------- */
.catalog { padding-block: var(--s-48); }
.catalog__head { display: grid; gap: var(--s-12); margin-bottom: var(--s-28); }
.catalog__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 168px;
  gap: var(--s-12);
}
.tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--c-paper);
  border: 1px solid var(--c-ash);
  border-radius: var(--r-cards);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.tile:hover { border-color: var(--c-violet); box-shadow: var(--sh-card); }
.tile__media { flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--c-fog); }
.tile__media img { width: 100%; height: 100%; object-fit: cover; }
.tile__body { padding: var(--s-8) var(--s-12) var(--s-12); }
.tile__name {
  font-family: var(--font-ui);
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}
.tile__link { color: var(--c-ink); text-decoration: none; }
.tile__link:hover { color: var(--c-violet); }
.tile__meta { display: flex; align-items: center; gap: var(--s-8); margin-top: var(--s-4); flex-wrap: wrap; }
.tile__dev { font-size: var(--t-caption); color: var(--c-graphite); }
.tile__note { font-size: 12px; color: var(--c-graphite); margin-top: var(--s-8); }
.tile--flagship { grid-column: span 2; grid-row: span 2; }
.tile--wide { grid-column: span 2; }
.tile--tall { grid-row: span 2; }
.tile__flag {
  display: inline-block;
  font-size: var(--t-caption);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-violet);
  margin-bottom: var(--s-4);
}
.catalog__foot { margin-top: var(--s-20); font-size: 13px; color: var(--c-graphite); }

/* ---------- genres ---------- */
.genres { background: var(--c-wash); border-block: 1px solid var(--c-lavender); padding-block: var(--s-40); }
.genres__head { max-width: 60ch; }
.genres__list { list-style: none; margin-top: var(--s-28); display: grid; gap: var(--s-12); }
.genre {
  display: grid;
  gap: var(--s-12);
  background: var(--c-paper);
  border: 1px solid var(--c-ash);
  border-radius: var(--r-cards);
  padding: var(--s-16);
}
.genre__chip {
  justify-self: start;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--c-ash);
  border-radius: var(--r-full);
  padding: 6px 12px;
}
.genre__text { font-size: var(--t-body); color: var(--c-graphite); }
.genre__apps { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-12); }
.genre__app { display: flex; align-items: center; gap: var(--s-8); }
.genre__app img { width: 32px; height: 32px; border-radius: var(--r-inputs); border: 1px solid var(--c-ash); }
.genre__app-name { font-size: 12px; font-weight: 500; }

/* ---------- showcase (flagship demo) ---------- */
.showcase {
  padding-block: var(--s-48) var(--s-40);
  background: url("assets/img/bg/paper-grid.webp") top center / 700px auto repeat, var(--c-paper);
}
.showcase__top { display: grid; gap: var(--s-24); }
.showcase__meta { display: flex; align-items: center; gap: var(--s-12); flex-wrap: wrap; margin-top: var(--s-16); }
.showcase__dev { font-size: 13px; color: var(--c-graphite); }
.showcase__hero {
  margin-top: var(--s-28);
  padding: 3px;
  border-radius: calc(var(--r-images) + 3px);
  background: var(--rainbow);
}
.showcase__hero-inner { border-radius: var(--r-images); overflow: hidden; background: var(--c-paper); }
.showcase__hero-inner img { width: 100%; height: auto; }
.showcase__strip {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 64%;
  gap: var(--s-12);
  margin-top: var(--s-16);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s-8);
}
.showcase__shot { scroll-snap-align: start; }
.showcase__shot { border: 1px solid var(--c-ash); border-radius: var(--r-images); overflow: hidden; background: var(--c-paper); }
.showcase__shot img { width: 100%; height: auto; }
.showcase__shot--lift { transform: translateY(-16px); }
.showcase__shot--drop { transform: translateY(16px); }
.showcase__notes { display: grid; gap: var(--s-16); margin-top: var(--s-32); }
.showcase__note-title { font-size: var(--t-body); font-weight: 700; display: flex; align-items: center; gap: var(--s-8); }
.showcase__note-title svg { width: 18px; height: 18px; color: var(--c-violet); flex: none; }
.showcase__note-text { font-size: var(--t-body); color: var(--c-graphite); margin-top: var(--s-4); }
.showcase__cta { margin-top: var(--s-24); }

/* ---------- reviews ---------- */
.reviews { padding-block: var(--s-40); border-top: 1px solid var(--c-ash); }
.reviews__list { list-style: none; display: grid; gap: var(--s-16); margin-top: var(--s-28); }
.review {
  border: 1px solid var(--c-ash);
  border-radius: var(--r-cards);
  padding: var(--s-20);
  background: var(--c-paper);
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}
.review--tinted { background: var(--c-wash); border-color: var(--c-lavender); }
.review__quote { font-size: var(--t-body-lg); line-height: 1.5; margin: 0; }
.review__author { display: flex; align-items: center; gap: var(--s-12); margin-top: auto; }
.review__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: var(--c-ink);
  color: var(--c-paper);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  flex: none;
}
.review__name { font-size: var(--t-body); font-weight: 600; }
.review__role { font-size: var(--t-caption); color: var(--c-graphite); }

/* ---------- subscribe ---------- */
.subscribe {
  padding-block: var(--s-48);
  background: url("assets/img/bg/subscribe-wash.webp") center / cover no-repeat, var(--c-wash);
  border-block: 1px solid var(--c-lavender);
}
.subscribe__card {
  background: var(--c-paper);
  border: 1px solid var(--c-ash);
  border-radius: var(--r-cards);
  padding: var(--s-24);
  display: grid;
  gap: var(--s-24);
  box-shadow: var(--sh-card);
}
.subscribe__text { font-size: var(--t-body); color: var(--c-graphite); margin-top: var(--s-12); }
.subscribe__points { list-style: none; margin-top: var(--s-16); display: grid; gap: var(--s-8); }
.subscribe__point { display: flex; gap: var(--s-8); font-size: var(--t-body); }
.subscribe__point svg { width: 16px; height: 16px; color: var(--c-violet); flex: none; margin-top: 3px; }
.form { display: grid; gap: var(--s-12); }
.field { display: grid; gap: var(--s-4); }
.field__label { font-size: 13px; font-weight: 600; }
.field__input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  font-family: var(--font-ui);
  font-size: var(--t-body);
  color: var(--c-ink);
  background: var(--c-paper);
  border: 1px solid var(--c-ash);
  border-radius: var(--r-inputs);
}
.field__input::placeholder { color: var(--c-steel); }
.field__input:focus { border-color: var(--c-violet); outline: none; }
.field__input:focus-visible { outline: 2px solid var(--c-violet); outline-offset: 2px; }
.consent { display: flex; gap: var(--s-8); align-items: flex-start; font-size: 13px; color: var(--c-graphite); }
.consent input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--c-violet); flex: none; }
.form__note { font-size: 12px; color: var(--c-graphite); }
.form__error { font-size: 13px; color: var(--c-ink); font-weight: 600; }
.form__success {
  border: 1px solid var(--c-violet);
  background: var(--c-wash);
  border-radius: var(--r-inputs);
  padding: var(--s-12) var(--s-16);
  font-size: var(--t-body);
}
[hidden] { display: none !important; }

/* ---------- editorial model ---------- */
.model {
  padding-block: var(--s-48);
  background: url("assets/img/bg/editorial-band.webp") center / cover no-repeat, var(--c-paper);
}
.model__steps { list-style: none; counter-reset: step; display: grid; gap: var(--s-16); margin-top: var(--s-28); }
.model__step {
  counter-increment: step;
  position: relative;
  background: var(--c-paper);
  border: 1px solid var(--c-ash);
  border-radius: var(--r-cards);
  padding: var(--s-20);
}
.model__step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--t-h);
  font-weight: 700;
  color: var(--c-lavender);
  display: block;
  line-height: 1;
  margin-bottom: var(--s-8);
}
.model__step-title { font-size: var(--t-sub); line-height: 1.3; }
.model__step-text { font-size: var(--t-body); color: var(--c-graphite); margin-top: var(--s-8); }
.model__foot { margin-top: var(--s-20); font-size: 13px; color: var(--c-graphite); }

/* ---------- figures band ---------- */
.figures { background: var(--c-violet); color: var(--c-paper); padding-block: var(--s-40); }
.figures__title { font-size: var(--t-h); color: var(--c-paper); }
.figures__lead { margin-top: var(--s-8); font-size: var(--t-body); color: rgba(255, 255, 255, 0.88); max-width: 60ch; }
.figures__list { list-style: none; display: grid; gap: var(--s-24); margin-top: var(--s-28); }
.figure__value { font-family: var(--font-display); font-size: var(--t-display); font-weight: 700; line-height: 1.13; }
.figure__label { font-size: 13px; color: rgba(255, 255, 255, 0.88); margin-top: var(--s-4); }

/* ---------- faq ---------- */
.faq { padding-block: var(--s-48); }
.faq__list { margin-top: var(--s-24); border-top: 1px solid var(--c-ash); }
.faq__item { border-bottom: 1px solid var(--c-ash); }
.faq__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  padding: var(--s-20) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--t-sub);
  font-weight: 700;
  color: var(--c-ink);
}
.faq__sign { width: 20px; height: 20px; flex: none; color: var(--c-violet); transition: transform .2s ease; }
.faq__item--open .faq__sign { transform: rotate(45deg); }
.faq__panel { padding-bottom: var(--s-20); font-size: var(--t-body); color: var(--c-graphite); max-width: 72ch; }

/* ---------- legal pages ---------- */
.legal { padding-block: var(--s-40) var(--s-48); }
.legal__title { font-size: var(--t-display); line-height: 1.13; }
.legal__updated { font-size: 13px; color: var(--c-graphite); margin-top: var(--s-8); }
.legal__back { margin-top: var(--s-20); }
.legal__body { margin-top: var(--s-32); max-width: 78ch; }
.legal__body h2 { font-size: var(--t-h-sm); margin-top: var(--s-32); }
.legal__body h3 { font-size: var(--t-body-lg); font-family: var(--font-ui); margin-top: var(--s-20); }
.legal__body p { font-size: var(--t-body); color: var(--c-graphite); margin-top: var(--s-12); }
.legal__body ul { margin-top: var(--s-12); padding-left: var(--s-20); }
.legal__body li { font-size: var(--t-body); color: var(--c-graphite); margin-top: var(--s-8); }
.legal__table { width: 100%; border-collapse: collapse; margin-top: var(--s-16); font-size: 13px; }
.legal__table th,
.legal__table td { border: 1px solid var(--c-ash); padding: 10px 12px; text-align: left; vertical-align: top; }
.legal__table th { background: var(--c-wash); font-weight: 600; }

/* ---------- footer ---------- */
.footer { background: var(--c-ink); color: var(--c-paper); padding-block: var(--s-40) var(--s-24); }
.footer__grid { display: grid; gap: var(--s-28); }
.footer .logo { color: var(--c-paper); }
.footer__about { font-size: 13px; color: rgba(255, 255, 255, 0.76); margin-top: var(--s-12); max-width: 42ch; }
.footer__title { font-size: var(--t-caption); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-periwinkle); }
.footer__list { list-style: none; margin-top: var(--s-12); display: grid; gap: var(--s-8); }
.footer__link { font-size: var(--t-body); color: rgba(255, 255, 255, 0.86); text-decoration: none; }
.footer__link:hover { color: var(--c-paper); text-decoration: underline; }
.footer__mail { font-size: var(--t-body); color: var(--c-periwinkle); }
.footer__bottom {
  margin-top: var(--s-32);
  padding-top: var(--s-16);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.66);
}

/* ---------- to top + cookie ---------- */
.totop {
  position: fixed;
  right: var(--s-16);
  bottom: var(--s-16);
  z-index: 30;
  width: 44px;
  height: 44px;
  display: none;
  place-items: center;
  border-radius: var(--r-full);
  border: 1px solid var(--c-ash);
  background: var(--c-paper);
  color: var(--c-ink);
  box-shadow: var(--sh-card);
  cursor: pointer;
}
.totop.is-visible { display: grid; }
.totop svg { width: 20px; height: 20px; }

.cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--c-paper);
  border-top: 1px solid var(--c-ash);
  box-shadow: rgba(21, 21, 35, 0.2) 0 -4px 8px 0;
  padding: var(--s-16) 0;
}
.cookie[hidden] { display: none; }
.cookie__inner { display: grid; gap: var(--s-12); }
.cookie__text { font-size: 13px; color: var(--c-graphite); }
.cookie__actions { display: flex; flex-wrap: wrap; gap: var(--s-8); }

/* ---------- breakpoints ---------- */
@media (min-width: 600px) {
  .catalog__grid { grid-auto-rows: 196px; }
  .cookie__inner { grid-template-columns: 1fr auto; align-items: center; }
  .subscribe__card { padding: var(--s-32); }
}

@media (min-width: 768px) {
  .catalog__grid { grid-auto-rows: 240px; }
  .showcase__strip { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow-x: visible; }
  .hero { padding-block: var(--s-48) var(--s-80); }
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: var(--s-40); }
  .hero__stage { grid-template-columns: minmax(0, 230px) minmax(0, 1fr); }
  .genres__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-16); }
  .genre { align-content: start; }
  .reviews__list { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .review--tall { padding-block: var(--s-28); }
  .subscribe__card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s-40); }
  .model__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .model__step:nth-child(2) { transform: translateY(20px); }
  .figures__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; }
  .showcase__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--s-40); }
  .showcase__notes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .catalog__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 206px; gap: var(--s-16); }
  .burger { display: none; }
  .nav { display: block; }
  .nav__list { flex-direction: row; align-items: center; gap: var(--s-4); padding-block: 0; }
  .header__inner { min-height: 68px; }
  :root { --header-h: 68px; }
}

@media (min-width: 1024px) {
  .catalog__grid { grid-auto-rows: 232px; }
  .catalog__head { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: end; }
  .section__title { font-size: var(--t-display); line-height: 1.13; }
  .legal__title { font-size: var(--t-display-lg); line-height: 1.15; }
}

@media (min-width: 1280px) {
  .catalog__grid { grid-auto-rows: 258px; }
  .catalog { padding-block: var(--s-80) var(--s-48); }
  .showcase { padding-block: var(--s-80) var(--s-48); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .showcase__shot--lift, .showcase__shot--drop, .model__step:nth-child(2) { transform: none; }
}