body { font: var(--кегль-текст)/1.6 var(--шрифт-текста); color: var(--цвет-текст);
       background: var(--цвет-фон); margin: 0; -webkit-font-smoothing: antialiased; }
h1 { font-size: var(--кегль-h1); font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; }
h2 { font-size: var(--кегль-h2); font-weight: 700; line-height: 1.12; letter-spacing: -0.015em; }
.лид { font-size: var(--кегль-лид, var(--кегль-текст)); line-height: 1.55; color: var(--цвет-текст-мягкий); }  .акцент { font-style: normal; color: var(--цвет-акцент); }
.блок { padding: var(--отступ-секции) 0; position: relative; overflow: hidden; }
.блок__внутри { width: min(100% - 2 * var(--отступ-блока), var(--ширина)); margin: 0 auto; position: relative; }

.тёмный { background: linear-gradient(160deg, var(--фон-ключа, var(--цвет-тёмный-фон)), var(--фон-2-ключа, var(--цвет-тёмный-фон)) 70%, var(--фон-ключа, var(--цвет-тёмный-фон)));
  background-color: var(--фон-ключа, var(--цвет-тёмный-фон)); color: var(--текст-ключа, var(--цвет-тёмный-текст)); }

*, *::before, *::after { box-sizing: border-box; }
img, video, iframe { max-width: 100%; height: auto; }
[hidden] { display: none !important; }

p, li, h1, h2, h3, dd, dt, summary, blockquote { overflow-wrap: break-word; }
h1, h2, h3 { font-family: var(--шрифт-заголовков); margin: 0 0 .5em; }
h3 { font-size: calc(var(--кегль-текст) * 1.25); font-weight: 700; line-height: 1.25; }
p, ul, ol { margin: 0 0 1em; }  ul, ol { padding-left: 1.25em; }
.лид { max-width: calc(var(--ширина-колонки) * .95); margin-bottom: 1.2em; }
.мелкий { font-size: var(--кегль-мелкий); color: var(--цвет-текст-мягкий); }
a { color: var(--цвет-акцент); text-underline-offset: .15em; }

.блок__внутри { z-index: 1; }  .блок__внутри > :last-child { margin-bottom: 0; }
.светлый { background: var(--цвет-фон); color: var(--цвет-текст); }  .светлый.второй { background: var(--цвет-фон-2); }

body, .светлый { --фон-ключа: var(--цвет-фон); --фон-2-ключа: var(--цвет-фон-2, var(--цвет-фон)); --текст-ключа: var(--цвет-текст); --подложка-ключа: transparent;
  --вуаль-ключа: var(--фон-ключа); --тёплый-ключа: var(--цвет-тёплый-тёмный, var(--цвет-акцент-тёмный));
  --глубина-ключа: var(--цвет-тёплый-мягкий, var(--цвет-тёплый, var(--цвет-линия))); --тепло-ключа: color-mix(in srgb, var(--цвет-тёплый-мягкий, var(--цвет-тёплый, var(--цвет-линия))) 40%, transparent); }
.светлый.второй { --фон-ключа: var(--цвет-фон-2); --фон-2-ключа: var(--цвет-фон); }  .тёмный.второй { --фон-ключа: var(--цвет-тёмный-фон-2, var(--цвет-тёмный-фон)); --фон-2-ключа: var(--цвет-тёмный-фон); }
.тёмный { --фон-ключа: var(--цвет-тёмный-фон); --фон-2-ключа: var(--цвет-тёмный-фон-2, var(--цвет-тёмный-фон)); --текст-ключа: var(--цвет-тёмный-текст);
  --вуаль-ключа: var(--фон-ключа); --тёплый-ключа: var(--цвет-тёплый, var(--цвет-акцент-тёмный)); --глубина-ключа: var(--цвет-акцент); --тепло-ключа: transparent;
  --подложка-ключа: color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 12%, transparent); }

.тёмный h1, .тёмный h2, .тёмный h3, .тёмный .цитата__кто b { color: var(--текст-ключа, var(--цвет-тёмный-текст)); }
.тёмный .лид, .тёмный .мелкий, .тёмный .цитата__кто, .тёмный .вопрос > p, .тёмный .контакт__что,
.тёмный .фото figcaption, .тёмный .мокап figcaption { color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) var(--мягкость-текста, 72%), transparent); }

.тёмный a:not(.кнопка) { color: var(--цвет-тёмный-текст); text-decoration-color: var(--цвет-акцент); }

.тёмный .акцент { color: var(--цвет-акцент-яркий, var(--цвет-акцент)); }
.тёмный .иконка, .тёмный .бейдж, .тёмный .цитата::before, .тёмный .вопрос > summary::after { color: var(--цвет-акцент); }
.тёмный :focus-visible, .тёмный .кнопка:focus-visible, .тёмный .вопрос > summary:focus-visible { outline-color: var(--цвет-тёмный-текст); }

.кнопка { background: var(--цвет-кнопки, var(--цвет-акцент)); color: var(--цвет-на-кнопке, var(--цвет-на-акценте)); }
.кнопка:hover { background: var(--цвет-кнопки-навёл, var(--цвет-акцент-тёмный)); }
.кнопка:focus-visible { outline: 2px solid var(--цвет-кнопки, var(--цвет-акцент)); outline-offset: 3px; }

.кнопка { display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 3em; padding: .8em 1.6em; border-radius: var(--кнопка-радиус);
  font: 600 var(--кегль-текст)/1.2 var(--шрифт-текста); text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: transform var(--длительность) var(--плавность),
  box-shadow var(--длительность) var(--плавность); }
.кнопка--главная { background: var(--цвет-кнопки, var(--цвет-акцент)); color: var(--цвет-на-кнопке, var(--цвет-на-акценте)); box-shadow: var(--тень-глубокая); }
.кнопка--главная:hover { transform: translateY(-2px); background: var(--цвет-кнопки-навёл, var(--цвет-акцент-тёмный)); }
.кнопка--контур { background: transparent; color: inherit; border-color: currentColor; }  .кнопка--пульс { animation: пульс-кнопки 2.4s ease-out infinite; }

.тёмный .кнопка--главная { background: var(--цвет-кнопки, var(--цвет-акцент)); color: var(--цвет-на-кнопке, var(--цвет-на-акценте));
  border-color: color-mix(in srgb, var(--цвет-тёмный-текст) 30%, transparent); }
.тёмный .кнопка--главная:hover { background: var(--цвет-кнопки-навёл, var(--цвет-акцент-тёмный)); }
.кнопка--контур:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.кнопка--пульс:hover { animation: none; }
.кнопка:active { transform: translateY(0); }

.первый-экран__действие .кнопка--главная, .липкая-кнопка .кнопка--главная { animation: пульс-кнопки 2.4s ease-out infinite; }
.первый-экран__действие .кнопка--главная:hover, .липкая-кнопка .кнопка--главная:hover { animation: none; }
.кнопка .иконка { color: inherit; width: 1.2em; height: 1.2em; }

.кикер { display: inline-flex; align-items: center; gap: .5em; margin-bottom: var(--отступ-блока);
  padding: .5625em .875em; border-radius: 9em; white-space: nowrap;
  font: 600 var(--кегль-кикер)/1 var(--шрифт-текста); letter-spacing: var(--разрядка-кикера);
  background: var(--цвет-тёмный-фон); color: var(--цвет-тёмный-текст); }
.кикер .иконка, .кикер svg { width: 1em; height: 1em; flex: none; color: var(--цвет-тёплый, currentColor); }
.тёмный .кикер { background: transparent; padding: 0; border: 0; letter-spacing: .06em;
  color: var(--тёплый-ключа, var(--цвет-акцент-тёмный)); }

.тёмный .кикер::before { content: ""; flex: none; width: 2em; height: 2px; border-radius: 2px;
  background: var(--тёплый-ключа, var(--цвет-акцент-тёмный)); }

.тёмный .кикер--пилюля { padding: .5625em .875em; letter-spacing: var(--разрядка-кикера);
  background: var(--подложка-ключа, transparent);
  border: 1px solid color-mix(in srgb, var(--тёплый-ключа, var(--цвет-акцент-тёмный)) 35%, transparent); }
.тёмный .кикер--пилюля::before { display: none; }

.бейдж { display: inline-flex; align-items: center; gap: .4em; padding: .35em .9em; border-radius: 9em;
  font: 700 var(--кегль-мелкий)/1.2 var(--шрифт-текста); letter-spacing: .06em;
  color: var(--цвет-акцент); background: color-mix(in srgb, var(--цвет-акцент) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--цвет-акцент) 25%, transparent); }
.карточка--главная > .бейдж { position: absolute; top: -.9em; left: 50%; transform: translateX(-50%); white-space: nowrap;
  color: var(--цвет-на-акценте); background: var(--цвет-акцент); border-color: transparent; box-shadow: var(--тень); }

.чип { display: inline-flex; align-items: center; gap: .5em; padding: .5625em .875em; border-radius: 9em;
  font-size: 1em; line-height: 1.25; color: var(--цвет-текст);
  background: color-mix(in srgb, var(--цвет-фон) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 55%, transparent);
  box-shadow: var(--тень-чип, var(--тень)); backdrop-filter: blur(.6em); -webkit-backdrop-filter: blur(.6em); }
.чип b { font-family: var(--шрифт-заголовков); font-weight: 600; }
.чип .иконка, .чип svg { width: 1.2em; height: 1.2em; flex: none; }

.тёмный .чип { color: var(--цвет-тёмный-текст); background: color-mix(in srgb, var(--цвет-тёмный-фон) 72%, transparent);
  border-color: color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 40%, transparent);
  box-shadow: 0 .625em 1.875em color-mix(in srgb, var(--цвет-тёмный-фон) 45%, transparent); }

@media (min-width: 900px) { .чип { font-size: var(--кегль-мелкий); } }

.шапка { height: 3.5rem; display: flex; align-items: center; justify-content: space-between; gap: .625em;
  padding: 0 1em; position: relative; z-index: 6; border-bottom: 1px solid var(--цвет-линия); background: transparent; }

.шапка__лого { display: flex; align-items: center; gap: .5em; font: 700 .9375em/1 var(--шрифт-заголовков); white-space: nowrap; color: inherit; text-decoration: none; }
.шапка__лого img { width: 1.875em; height: 1.875em; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 45%, transparent); }

.шапка__лиц { font-size: .8125em; line-height: 1.2; display: flex; align-items: center; justify-content: flex-end;
  gap: .3125rem; text-align: right; max-width: 9.375rem; opacity: .85; }
.шапка__лиц svg, .шапка__лиц .иконка { width: .875rem; height: .875rem; flex: none; }

.шапка__лиц .полн { display: inline; }
.шапка__лиц .кратко { display: none; }
@media (max-width: 899px) {
  .шапка__лиц:has(.кратко) .полн { display: none; }
  .шапка__лиц:has(.кратко) .кратко { display: block; }
}
.тёмный .шапка { background: transparent; border-bottom-color: transparent; color: var(--цвет-тёмный-текст); }

.карточки { display: grid; gap: var(--отступ-блока); }
.карточка { padding: calc(var(--отступ-блока) * 1.25); border-radius: var(--радиус-карточки, var(--радиус));
  background: var(--цвет-фон-карточки); border: 1px solid var(--цвет-линия); box-shadow: var(--тень);
  transition: transform var(--длительность) var(--плавность), box-shadow var(--длительность) var(--плавность); }
.карточка:hover { transform: translateY(-3px); box-shadow: var(--тень-чип, var(--тень)); }
.карточка--главная { border-top: 3px solid var(--цвет-акцент); }

.карточка--стекло { background: var(--цвет-стекло);
  border: 1px solid color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 28%, transparent);
  backdrop-filter: blur(.9em); -webkit-backdrop-filter: blur(.9em); box-shadow: var(--тень-глубокая); }
.карточки { margin-top: var(--отступ-блока); padding: 0; list-style: none; }
.карточка { position: relative; min-width: 0; }
.карточка > :last-child { margin-bottom: 0; }  .карточка h3 { margin-top: 0; }
.карточка > .иконка { width: 2em; height: 2em; margin-bottom: .8em; }

.тёмный .карточка:not(.карточка--стекло) { background: color-mix(in srgb, var(--цвет-тёмный-текст) 6%, transparent);
  border-color: color-mix(in srgb, var(--цвет-тёмный-текст) 14%, transparent); }

.цифры { display: grid; grid-template-columns: repeat(auto-fit, minmax(5em, 1fr)); gap: var(--отступ-блока); margin: var(--отступ-блока) 0 0; padding: 0; list-style: none; }
.цифра { padding-left: 1em; border-left: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.цифра__значение { display: block; font: 700 var(--кегль-цифра)/1 var(--шрифт-заголовков);
  letter-spacing: -0.02em; color: var(--цвет-текст); }
.тёмный .цифра__значение { color: var(--цвет-тёмный-текст); }  .цифра__подпись { display: block; margin-top: .35em; font-size: var(--кегль-мелкий); opacity: .8; }

.цифра--ключ .цифра__значение { color: var(--цвет-акцент); }

.цифра { flex: 1 1 5em; min-width: 0; padding-left: .7em; }

.цифра.карточка { padding: var(--отступ-блока) .75em; border-left: 1px solid var(--цвет-линия); text-align: center; }
.цифра.карточка--стекло { border-left-color: color-mix(in srgb, var(--цвет-тёмный-текст) 12%, transparent); }
.карточка .цифра__значение { font-size: calc(var(--кегль-цифра) * .78); }

.фото { margin: 0; border-radius: var(--радиус); overflow: hidden; box-shadow: var(--тень); }
.фото img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.фото--маска { border-radius: 0; box-shadow: none; }
.фото--маска img { mask-image: linear-gradient(to bottom, black 70%, transparent 99%); -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 99%); }
.фото figcaption, .мокап figcaption { padding: .7em 1em; font-size: var(--кегль-мелкий); color: var(--цвет-текст-мягкий); }
.мокап figcaption h3 { color: var(--цвет-текст); }
.тёмный .мокап figcaption h3 { color: var(--цвет-тёмный-текст); }

.мокап { margin: 0; position: relative; padding-top: 1.4em; border-radius: var(--радиус-малый); overflow: hidden;
  background: var(--цвет-фон-карточки); border: 1px solid var(--цвет-линия); box-shadow: var(--тень-плиты, var(--тень-глубокая)); }
.мокап::before { content: ""; position: absolute; inset: 0 0 auto; height: 1.4em;
  background: color-mix(in srgb, var(--цвет-текст) 7%, var(--цвет-фон-карточки)); border-bottom: 1px solid var(--цвет-линия); }
.мокап::after { content: ""; position: absolute; top: .45em; left: .6em; width: .5em; height: .5em; border-radius: 50%;
  background: var(--цвет-акцент); box-shadow: .85em 0 0 color-mix(in srgb, var(--цвет-акцент) 55%, transparent),
  1.7em 0 0 color-mix(in srgb, var(--цвет-акцент) 30%, transparent); }
.мокап img, .мокап iframe { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 0; }
.мокап iframe { aspect-ratio: 16 / 9; }
.аватар { width: 3.5em; height: 3.5em; border-radius: 50%; object-fit: cover; flex: none;
  border: 2px solid var(--цвет-фон-карточки); box-shadow: var(--тень); }
.пара__текст, .пара__фото { min-width: 0; }  .пара__фото img { display: block; width: 100%; border-radius: var(--радиус); }

.пара { display: grid; gap: var(--отступ-блока); }
.пара > :only-child { grid-column: 1 / -1; }

.иконка { width: 1.5em; height: 1.5em; flex: none; color: var(--цвет-акцент); vertical-align: middle; }
.иконка svg { display: block; width: 100%; height: 100%; }
.список-иконок { display: grid; gap: .65em; margin: 0 0 1.2em; padding: 0; list-style: none; }
.список-иконок li { display: flex; align-items: flex-start; gap: .65em; }
.список-иконок .иконка { margin-top: .15em; }

.список-иконок .иконка { color: var(--цвет-тёплый-тёмный, var(--цвет-акцент-тёмный)); }

.галка { position: relative; flex: none; width: 1.1875em; height: 1.1875em; border-radius: 50%; margin-top: .15em;
  background: var(--цвет-тёплый, var(--цвет-акцент-тёмный)); }
.галка::after { content: ""; position: absolute; left: .40625em; top: .21875em; width: .25em; height: .5em;
  border: solid var(--цвет-тёмный-фон); border-width: 0 .125em .125em 0; transform: rotate(45deg); }
.тёмный .список-иконок .иконка { color: var(--тёплый-ключа, var(--цвет-акцент-тёмный)); }

.разделитель { height: 1px; border: 0; margin: var(--отступ-блока) 0; opacity: .7;
  background: linear-gradient(90deg, var(--цвет-акцент), var(--цвет-линия) 45%, transparent); }
.тёмный .разделитель { background: linear-gradient(90deg, var(--цвет-акцент),
  color-mix(in srgb, var(--цвет-тёмный-текст) 25%, transparent) 45%, transparent); }
.цитата { margin: 0; padding: 0 0 0 1.2em; position: relative; font: italic 500 calc(var(--кегль-текст) * 1.3)/1.45 var(--шрифт-заголовков); }

.цитата::before { content: "“"; position: absolute; left: 0; top: -.12em; font-size: 2.4em; line-height: 1;
  color: var(--цвет-акцент); opacity: .45; }
.цитата p { margin: 0 0 .6em; }
.цитата__кто { display: flex; align-items: center; gap: .75em; margin-top: var(--отступ-блока);
  font: 400 var(--кегль-мелкий)/1.4 var(--шрифт-текста); color: var(--цвет-текст-мягкий); }
.цитата__кто b { display: block; color: var(--цвет-текст); font-weight: 700; }
.карточка .цитата { font-size: calc(var(--кегль-текст) * 1.05); }

.таймер { display: inline-flex; gap: .6em; margin: var(--отступ-блока) 0; padding: 0; list-style: none; }
.таймер__ячейка { min-width: 3.6em; padding: .6em .5em; text-align: center; border-radius: var(--радиус-малый);
  background: color-mix(in srgb, currentColor 8%, transparent); border: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
.таймер__ячейка b { display: block; font: 700 calc(var(--кегль-цифра) * .7)/1 var(--шрифт-заголовков);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.таймер__ячейка span { display: block; margin-top: .3em; font-size: var(--кегль-мелкий); text-transform: uppercase;
  letter-spacing: .08em; opacity: .7; }

.шаги { list-style: none; margin: var(--отступ-блока) 0 0; padding: 0; display: grid; gap: var(--отступ-блока); }
.шаг { position: relative; display: flex; gap: 1em; align-items: flex-start; }
.шаг__номер { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.4em; height: 2.4em;
  border-radius: 50%; background: var(--цвет-акцент); color: var(--цвет-на-акценте);
  font: 700 var(--кегль-текст)/1 var(--шрифт-заголовков); box-shadow: var(--тень); }

.шаг:not(:last-child)::before { content: ""; position: absolute; left: 1.2em; top: 2.4em; bottom: calc(-1 * var(--отступ-блока));
  width: 1px; background: color-mix(in srgb, currentColor 18%, transparent); }
.шаг h3 { margin: .35em 0 .3em; }  .шаг p:last-child { margin-bottom: 0; }  .шаг .бейдж { margin-left: .5em; vertical-align: middle; }
.вопрос { border-bottom: 1px solid var(--цвет-линия); padding: calc(var(--отступ-блока) * .6) 0; }
.вопрос:first-of-type { border-top: 1px solid var(--цвет-линия); }
.вопрос > summary { display: flex; align-items: center; justify-content: space-between; gap: 1em; cursor: pointer; list-style: none;
  font: 700 calc(var(--кегль-текст) * 1.05)/1.35 var(--шрифт-заголовков); }
.вопрос > summary::-webkit-details-marker { display: none; }
.вопрос > summary::after { content: "+"; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.8em; height: 1.8em; border-radius: 50%; border: 1px solid var(--цвет-линия); color: var(--цвет-акцент);
  font-weight: 400; transition: transform var(--длительность) var(--плавность); }
.вопрос[open] > summary::after { transform: rotate(45deg); }
.вопрос > summary:focus-visible { outline: 2px solid var(--цвет-акцент); outline-offset: 3px; border-radius: 3px; }
.вопрос > p { margin: .7em 0 0; color: var(--цвет-текст-мягкий); max-width: calc(var(--ширина-колонки) * 1.25); }
.контакт { display: flex; align-items: center; gap: .9em; padding: .9em 0; border-bottom: 1px solid var(--цвет-линия); }
.контакт .иконка { width: 2.4em; height: 2.4em; padding: .55em; border-radius: var(--радиус-малый);
  background: color-mix(in srgb, var(--цвет-акцент) 12%, transparent); }
.контакт a { font-weight: 600; text-decoration: none; }  .контакт a:hover { text-decoration: underline; }
.контакт__что { display: block; font-size: var(--кегль-мелкий); color: var(--цвет-текст-мягкий); }
.тёмный .вопрос, .тёмный .контакт, .тёмный .вопрос > summary::after { border-color: color-mix(in srgb, var(--цвет-тёмный-текст) 14%, transparent); }

.блок--первый-экран h1 .хвост { display: block; margin-top: .4em; font-size: .66em; font-weight: 600; line-height: 1.28; letter-spacing: 0; }

.парит { animation: парение 8s ease-in-out infinite; }
.парит--2 { animation-duration: 9s; animation-delay: -3s; }  .парит--3 { animation-duration: 7s; animation-delay: -5s; }
.парит--4 { animation-duration: 8.5s; animation-delay: -1.5s; }

.пятно { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2.5em);
  animation: дрейф 28s ease-in-out infinite alternate;
  background: color-mix(in srgb, var(--цвет-тёплый-мягкий, var(--цвет-линия)) 55%, transparent); }
.тёмный .пятно { background: color-mix(in srgb, var(--цвет-акцент) 70%, transparent); }

.рамка-телефона { position: relative; aspect-ratio: 9 / 16; padding: .55em; border-radius: var(--радиус-телефон, calc(var(--радиус) * 2));
  background: var(--цвет-тёмный-фон); box-shadow: var(--тень-плиты, var(--тень-глубокая)),
    inset 0 0 0 .09375em color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 32%, transparent); }
.рамка-телефона__экран { position: relative; height: 100%; border-radius: calc(var(--радиус-телефон, calc(var(--радиус) * 2)) * .8); overflow: hidden; background: var(--цвет-тёмный-фон); }

.рамка-телефона__экран::before, .остров { content: ""; position: absolute; z-index: 2; top: .5em; left: 50%;
  translate: -50% 0; width: 3.875em; height: 1.125em; border-radius: .625em; background: var(--цвет-тёмный-фон); }
.остров--крупный { width: 6em; height: 1.625em; border-radius: .875em; top: .625em; }
.рамка-телефона__экран::after { content: ""; position: absolute; inset: 60% 0 0; pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--цвет-тёмный-фон) 75%, transparent), transparent); }

.плей { position: absolute; z-index: 3; display: grid; place-items: center; width: 2.875em; height: 2.875em;
  border-radius: 50%; background: var(--цвет-акцент-тёмный); color: var(--цвет-тёмный-текст);
  box-shadow: 0 .875em 2.125em color-mix(in srgb, var(--цвет-тёмный-фон) 60%, transparent); }
.плей svg, .плей .иконка { width: 1.25em; height: 1.25em; margin-left: .125em; }

.плей--большой, .плей--средний { --тень-глубокая: 0 0 transparent; animation: пульс-кнопки 2.4s var(--плавность) infinite; }
.плей--большой { width: 4em; height: 4em; }  .плей--средний { width: 3.25em; height: 3.25em; }
.плей--большой svg, .плей--большой .иконка { width: 1.625em; height: 1.625em; margin-left: .1875em; }
.плей--средний svg, .плей--средний .иконка { width: 1.375em; height: 1.375em; margin-left: .1875em; }

.рамка-телефона__подпись { position: absolute; inset: auto .6em .6em; z-index: 2; margin: 0; text-align: left;
  font: 600 var(--кегль-текст)/1.25 var(--шрифт-заголовков); color: var(--цвет-тёмный-текст); }
.рамка-телефона__подпись small { display: block; margin-top: .2em;
  font: 400 var(--кегль-мелкий)/1.3 var(--шрифт-текста); color: color-mix(in srgb, var(--цвет-тёмный-текст) 72%, transparent); }
.рамка-телефона__прогресс { display: block; margin-top: .5em; height: .1875em; border-radius: .1875em; overflow: hidden; background: color-mix(in srgb, var(--цвет-тёмный-текст) 25%, transparent); }
.рамка-телефона__прогресс span { display: block; width: 55%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--цвет-акцент-яркий, var(--цвет-акцент)), var(--цвет-тёплый, var(--цвет-акцент-тёмный))); }

.нода { position: absolute; width: .375em; height: .375em; border-radius: 50%; pointer-events: none;
  background: var(--цвет-акцент-яркий, var(--цвет-акцент));
  box-shadow: 0 0 .75em color-mix(in srgb, var(--цвет-акцент-яркий, var(--цвет-акцент)) 80%, transparent);
  animation: мерцание 4s ease-in-out infinite; }
.нода--2 { animation-delay: -1.3s; background: var(--цвет-тёплый, var(--цвет-акцент-тёмный));
  box-shadow: 0 0 .75em color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 90%, transparent); }
.нода--3 { animation-delay: -2.6s; }

.спутник { position: relative; display: flex; align-items: flex-start; gap: .75rem; width: 100%; padding: .875rem 1rem; }
.спутник__икон { flex: none; width: 2.5rem; height: 2.5rem; border-radius: .75rem; display: grid; place-items: center; background: color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 16%, transparent); color: var(--цвет-тёплый, var(--цвет-акцент-тёмный)); }

.спутник__икон svg, .спутник__икон .иконка { width: 1.25rem; height: 1.25rem; color: var(--цвет-тёплый, var(--цвет-акцент-тёмный)); }

.спутник b { display: block; font-family: var(--шрифт-заголовков); font-weight: 700; line-height: 1.25; font-size: var(--кегль-текст); }
.спутник span { display: block; font-size: var(--кегль-текст); margin-top: .25em; line-height: 1.35; color: color-mix(in srgb, var(--цвет-тёмный-текст) 70%, transparent); }
@media (min-width: 900px) {
  .спутник b { font-size: calc(var(--кегль-мелкий) * 1.07); }
  .спутник span { font-size: calc(var(--кегль-мелкий) * .93); }
}
.спутник__шкала { position: absolute; left: 1rem; right: 1rem; bottom: -1px; height: 2px; border-radius: 2px; opacity: .8; background: linear-gradient(90deg, var(--цвет-акцент-яркий, var(--цвет-акцент)), var(--цвет-тёплый, var(--цвет-акцент-тёмный))); }

.бенто__ячейка { position: relative; padding: var(--отступ-блока); border-radius: var(--радиус-плитки, var(--радиус)); background: var(--цвет-фон-карточки); color: var(--цвет-текст);
  border: 1px solid var(--цвет-линия); box-shadow: var(--тень); overflow: hidden; transition: transform var(--длительность) var(--плавность), box-shadow var(--длительность) var(--плавность); }
.бенто__ячейка:hover { transform: translateY(-3px); box-shadow: var(--тень-чип, var(--тень)); }
.бенто__ячейка.тёмный { background: var(--цвет-тёмный-фон); color: var(--цвет-тёмный-текст); border-color: transparent; }

.бенто .цифра::before { content: ""; position: absolute; top: .6em; right: .6em; width: .5em; height: .5em; border-radius: 50%; background: var(--цвет-тёплый, var(--цвет-акцент-тёмный)); }

.фон--пятна::before, .фон--пятна::after { content: ""; position: absolute; width: 60%; aspect-ratio: 1;
  border-radius: 50%; pointer-events: none; filter: blur(2em); opacity: .55;
  background: radial-gradient(circle, color-mix(in srgb, var(--цвет-акцент) 45%, transparent), transparent 70%);
  animation: дрейф 28s ease-in-out infinite alternate; }
.фон--пятна::after { animation-delay: -9s; }
.фон--пятна::before { top: -20%; left: -15%; }  .фон--пятна::after { bottom: -25%; right: -10%; opacity: .35; }

.фон--пятна:not(.тёмный)::before, .фон--пятна:not(.тёмный)::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--цвет-тёплый-мягкий, var(--цвет-линия)) 55%, transparent), transparent 70%); }
.фон--сетка::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(color-mix(in srgb, currentColor 9%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, currentColor 9%, transparent) 1px, transparent 1px);
  background-size: 7.5em 7.5em;
  mask-image: radial-gradient(ellipse, black 40%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse, black 40%, transparent 80%); }
.фон--зерно::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.блок--подвал { padding: var(--отступ-блока) 0; font-size: var(--кегль-мелкий); }
.блок--подвал .блок__внутри { border-top: 1px solid var(--цвет-линия); padding-top: var(--отступ-блока); }
.блок--подвал p { margin-bottom: .4em; }

.липкая-кнопка { display: none; }
@media (max-width: 600px) {
  .липкая-кнопка { display: block; position: fixed; inset: auto 0 0; z-index: 90;
    padding: .6em 1em calc(.6em + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--цвет-фон) 88%, transparent);
    backdrop-filter: blur(.6em); -webkit-backdrop-filter: blur(.6em); border-top: 1px solid var(--цвет-линия); }

  .липкая-кнопка--тёмная { background: color-mix(in srgb, var(--цвет-тёмный-фон) 88%, transparent);
    border-top-color: color-mix(in srgb, var(--цвет-тёмный-текст) 12%, transparent); }
  .липкая-кнопка .кнопка { width: 100%; min-height: 3.375rem; font-size: 1rem; }

  body.с-липкой-кнопкой { padding-bottom: calc(5em + env(safe-area-inset-bottom)); }
}

@media (min-width: 600px) {
  .карточки { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .карточки { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .карточки--две { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .цифры { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .блок--первый-экран h1 .хвост { display: inline; margin-top: 0; font-size: 1em; line-height: inherit; }
  .шапка { padding: 0 3.5em; gap: .75em; }
  .шапка__лого { font-size: 1em; gap: .625em; }  .шапка__лого img { width: 2em; height: 2em; }
  .шапка__лиц { max-width: none; }
  .пара { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: calc(var(--отступ-блока) * 2.5); align-items: center; }
  .карточка--главная { top: -.75em; box-shadow: var(--тень-глубокая); }
  .таймер__ячейка { min-width: 4.4em; }

  .рамка-телефона__экран::before, .остров { width: 4.75em; height: 1.375em; }
}

@keyframes пульс-кнопки {
  0%   { box-shadow: var(--тень-глубокая), 0 0 0 0 color-mix(in srgb, var(--цвет-акцент) 45%, transparent); }
  70%  { box-shadow: var(--тень-глубокая), 0 0 0 .8em color-mix(in srgb, var(--цвет-акцент) 0%, transparent); }
  100% { box-shadow: var(--тень-глубокая), 0 0 0 0 color-mix(in srgb, var(--цвет-акцент) 0%, transparent); }
}
@keyframes вращение { to { rotate: 360deg; } }
@keyframes парение { 50% { transform: translateY(-.5em); } }
@keyframes дрейф { 0% { translate: 0 0; scale: 1; } 50% { translate: 4% -5%; scale: 1.08; } 100% { translate: -3% 4%; scale: .96; } }
@keyframes мерцание { 50% { opacity: .3; } }
@keyframes дыхание { 50% { transform: translateY(-.5em); } }
@keyframes бег { to { transform: translateX(-50%); } }
@keyframes зум { to { scale: 1.06; } }
@keyframes дрейф-ленты { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .кнопка--пульс { animation: none; }  .кнопка, .карточка { transition: none; }
  .кнопка--главная:hover, .карточка:hover { transform: none; }
  .первый-экран__действие .кнопка--главная, .липкая-кнопка .кнопка--главная { animation: none; }
  .вопрос > summary::after { transition: none; }
  .парит, .фон--пятна::before, .фон--пятна::after, .пятно, .нода, .плей { animation: none; }
  .бенто__ячейка { transition: none; }  .бенто__ячейка:hover { transform: none; }
}

.блок--тихо { padding-block: var(--отступ-секции-тихо, calc(var(--отступ-секции) * .78)); }
.блок--громко { padding-block: var(--отступ-секции-громко, calc(var(--отступ-секции) * 1.16)); }

.секция__шапка { position: relative; z-index: 2; display: grid; justify-items: start; gap: .875rem;
  max-width: 45rem; margin-bottom: 2rem; }
.секция__шапка--центр { max-width: 40rem; margin-inline: auto; text-align: center; justify-items: center; }
.секция__шапка > * { margin-bottom: 0; }
.секция__тело { position: relative; z-index: 2; }
.секция__лид { max-width: 37.5rem; margin-bottom: 0; }

.секция__шапка .цифры { justify-self: stretch; margin-top: 0; }
.секция__шапка .цифры .цифра:first-child { padding-left: 0; border-left: 0; }
.черта { width: 2.75rem; height: 3px; border-radius: 3px; }
.светлый .секция__лид { color: var(--цвет-текст-мягкий); }
.тёмный .секция__лид { color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 75%, transparent); }
.светлый .черта { background: var(--цвет-тёплый-тёмный, var(--цвет-акцент-тёмный)); }
.тёмный .черта { background: var(--тёплый-ключа, var(--цвет-акцент-тёмный)); }

h2 .хвост-акцент { display: block; font-weight: 600; font-size: .6em; line-height: 1.4;
  margin-top: .375rem; letter-spacing: 0; }
.светлый h2 .хвост-акцент { color: var(--цвет-тёплый-тёмный, var(--цвет-акцент-тёмный)); }
.тёмный h2 .хвост-акцент { color: var(--тёплый-ключа, var(--цвет-акцент-тёмный)); }

.светлый.блок--текстура { background: linear-gradient(170deg, var(--цвет-фон-2), var(--цвет-фон) 75%); }
.тёмный.блок--текстура { background: linear-gradient(170deg, var(--цвет-тёмный-фон-2, var(--цвет-тёмный-фон)), var(--цвет-тёмный-фон) 75%); }
.сетка-текстура { position: absolute; inset: 0; pointer-events: none; background-size: 3.5rem 3.5rem;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 20%, black 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 65% at 50% 20%, black 30%, transparent 100%); }
.светлый .сетка-текстура { background-image:
  linear-gradient(color-mix(in srgb, var(--цвет-акцент) 5%, transparent) 1px, transparent 1px),
  linear-gradient(90deg, color-mix(in srgb, var(--цвет-акцент) 5%, transparent) 1px, transparent 1px); }
.тёмный .сетка-текстура { background-image:
  linear-gradient(color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 6%, transparent) 1px, transparent 1px),
  linear-gradient(90deg, color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 6%, transparent) 1px, transparent 1px); }

.роль { border-radius: var(--радиус-карточки, var(--радиус)); padding: 1.25rem; }
.роль b { display: block; font-family: var(--шрифт-заголовков); font-weight: 700;
  font-size: var(--кегль-текст); margin-bottom: .5rem; }
.роль p { font-size: var(--кегль-текст); line-height: 1.6; margin-bottom: 0; }
.светлый .роль { background: var(--цвет-фон-карточки); border: 1px solid var(--цвет-линия); box-shadow: var(--тень); }
.светлый .роль b { color: var(--цвет-акцент); }
.светлый .роль p { color: var(--цвет-текст-мягкий); }
.тёмный .роль { background: color-mix(in srgb, var(--цвет-тёмный-фон) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 22%, transparent); }
.тёмный .роль b { color: var(--тёплый-ключа, var(--цвет-акцент-тёмный)); }
.тёмный .роль p { color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 82%, transparent); }

.врезка { display: grid; gap: .375rem; padding: 1.25rem 1.375rem;
  border-radius: var(--радиус-карточки, var(--радиус)); }
.врезка b { font-family: var(--шрифт-заголовков); font-weight: 700; font-size: var(--кегль-текст); }
.врезка p { font-size: var(--кегль-текст); line-height: 1.55; margin-bottom: 0; }
.светлый .врезка { background: color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 40%, transparent); }
.светлый .врезка b { color: var(--цвет-акцент); }
.светлый .врезка p { color: var(--цвет-текст-мягкий); }
.тёмный .врезка { background: color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 32%, transparent); }
.тёмный .врезка b { color: var(--тёплый-ключа, var(--цвет-акцент-тёмный)); }
.тёмный .врезка p { color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 78%, transparent); }

.плашка { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .875rem; border-radius: 9em;
  font-size: var(--кегль-мелкий); line-height: 1.3;
  backdrop-filter: blur(.625rem); -webkit-backdrop-filter: blur(.625rem); }
.плашка b { font-family: var(--шрифт-заголовков); font-weight: 600; }
.плашка .иконка, .плашка svg, .плашка .значок { width: 1rem; height: 1rem; flex: none; }
.светлый .плашка { color: var(--цвет-тёмный-текст);
  background: color-mix(in srgb, var(--цвет-тёмный-фон) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 40%, transparent); }
.тёмный .плашка { color: var(--цвет-тёмный-текст);
  background: color-mix(in srgb, var(--цвет-тёмный-фон) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 40%, transparent); }

.фото__подпись { position: absolute; left: .875rem; right: .875rem; bottom: .875rem; }

.заглушка-картинки { display: grid; place-items: center; margin: 0; min-height: 10rem; aspect-ratio: 3 / 4;
  background: color-mix(in srgb, var(--текст-ключа, var(--цвет-текст)) 18%, var(--фон-ключа, var(--цвет-фон)));
  color: color-mix(in srgb, var(--текст-ключа, var(--цвет-текст)) 82%, var(--фон-ключа, var(--цвет-фон)));
  font-size: var(--кегль-мелкий); letter-spacing: .08em; }

.лента { position: relative; z-index: 2; display: grid; gap: 1rem; }
.лента .шаг { position: relative; display: block; border-radius: var(--радиус-модуля, var(--радиус));
  padding: 1.125rem 1.125rem 1.25rem; }
.лента .шаг:not(:last-child)::before { content: none; }
.лента .шаг__номер { width: 1.875rem; height: 1.875rem; border-radius: 50%; display: grid; place-items: center;
  margin-bottom: .75rem; box-shadow: none; font: 700 var(--кегль-мелкий)/1 var(--шрифт-заголовков); }
.лента .шаг b { display: block; font-family: var(--шрифт-заголовков); font-weight: 700;
  font-size: var(--кегль-текст); margin-bottom: .375rem; }
.лента .шаг p { font-size: var(--кегль-текст); line-height: 1.55; margin-bottom: 0; }
.светлый .лента .шаг { background: var(--цвет-фон-карточки); border: 1px solid var(--цвет-линия); box-shadow: var(--тень); }
.светлый .лента .шаг p { color: var(--цвет-текст-мягкий); }
.светлый .лента .шаг__номер { background: var(--цвет-тёплый, var(--цвет-акцент-тёмный)); color: var(--цвет-тёмный-фон); }
.тёмный .лента .шаг { background: color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 28%, transparent); }
.тёмный .лента .шаг p { color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 75%, transparent); }
.тёмный .лента .шаг__номер { background: var(--тёплый-ключа, var(--цвет-акцент-тёмный)); color: var(--цвет-тёмный-фон); }

.лента + .врезка { margin-top: 1.5rem; }

.часть { display: grid; gap: 1rem; }
.часть__шапка { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.часть__имя { font-family: var(--шрифт-заголовков); font-weight: 700; font-size: calc(var(--кегль-текст) * 1.2); }
.часть__метка { font-size: calc(var(--кегль-мелкий) * .93); letter-spacing: .02em; }
.модуль { border-radius: var(--радиус-модуля, var(--радиус)); overflow: hidden;
  transition: border-color var(--длительность) var(--плавность), box-shadow var(--длительность) var(--плавность); }
.модуль__шапка { display: flex; align-items: center; gap: .875rem; padding: 1rem 1.125rem; cursor: pointer; list-style: none; }
.модуль__шапка::-webkit-details-marker { display: none; }
.модуль__номер { flex: none; width: 2.375rem; height: 2.375rem; border-radius: .75rem; display: grid; place-items: center;
  font: 700 calc(var(--кегль-мелкий) * .93)/1 var(--шрифт-заголовков); }
.модуль__заголовок { flex: 1; min-width: 0; }
.модуль__заголовок b { display: block; font-family: var(--шрифт-заголовков); font-weight: 700;
  font-size: var(--кегль-текст); line-height: 1.3; }
.модуль__мета { display: flex; flex-wrap: wrap; gap: .375rem .75rem; margin-top: .3125rem;
  font-size: calc(var(--кегль-мелкий) * .93); }
.модуль__шеврон { flex: none; width: 1.375rem; height: 1.375rem;
  transition: transform var(--длительность) var(--плавность); }
.модуль[open] .модуль__шеврон { transform: rotate(180deg); }
.модуль__тело { padding: 0 1.125rem 1.25rem 4.375rem; display: grid; gap: .75rem; }
.модуль__тело p { font-size: var(--кегль-текст); line-height: 1.6; margin-bottom: 0; }
.модуль__результат { font-size: var(--кегль-текст); margin-bottom: 0; }
.тег { display: inline-flex; align-items: center; gap: .375rem; width: fit-content; justify-self: start;
  padding: .3125rem .625rem; border-radius: 9em; font-size: calc(var(--кегль-мелкий) * .93); }
.светлый .модуль { background: var(--цвет-фон-карточки); border: 1px solid var(--цвет-линия);
  box-shadow: 0 .75rem 1.875rem color-mix(in srgb, var(--цвет-тёмный-фон) 6%, transparent); }
.светлый .модуль[open] { border-color: var(--цвет-тёплый, var(--цвет-акцент-тёмный));
  box-shadow: 0 1.25rem 2.75rem color-mix(in srgb, var(--цвет-тёмный-фон) 12%, transparent); }
.светлый .часть__имя { color: var(--цвет-текст); }
.светлый .часть__метка { color: var(--цвет-акцент); }
.светлый .модуль__номер { background: color-mix(in srgb, var(--цвет-акцент) 8%, transparent); color: var(--цвет-акцент); }
.светлый .модуль__заголовок b { color: var(--цвет-текст); }
.светлый .модуль__мета, .светлый .модуль__тело p { color: var(--цвет-текст-мягкий); }
.светлый .модуль__шеврон { color: var(--цвет-акцент); }
.светлый .модуль__результат { color: var(--цвет-текст); }
.светлый .модуль__результат b { color: var(--цвет-акцент); }
.светлый .тег { background: var(--цвет-фон-2); color: var(--цвет-текст-мягкий); border: 1px solid var(--цвет-линия); }
.тёмный .модуль { background: color-mix(in srgb, var(--цвет-тёмный-фон) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 22%, transparent); }
.тёмный .модуль[open] { border-color: color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 55%, transparent); }
.тёмный .часть__имя { color: var(--текст-ключа, var(--цвет-тёмный-текст)); }
.тёмный .часть__метка { color: var(--тёплый-ключа, var(--цвет-акцент-тёмный)); }
.тёмный .модуль__номер { background: color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 14%, transparent);
  color: var(--тёплый-ключа, var(--цвет-акцент-тёмный)); }
.тёмный .модуль__заголовок b { color: var(--текст-ключа, var(--цвет-тёмный-текст)); }
.тёмный .модуль__мета { color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 60%, transparent); }
.тёмный .модуль__тело p { color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 80%, transparent); }
.тёмный .модуль__шеврон { color: var(--тёплый-ключа, var(--цвет-акцент-тёмный)); }
.тёмный .модуль__результат { color: var(--текст-ключа, var(--цвет-тёмный-текст)); }
.тёмный .модуль__результат b { color: var(--тёплый-ключа, var(--цвет-акцент-тёмный)); }
.тёмный .тег { background: color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 12%, transparent);
  color: var(--цвет-тёплый-мягкий, var(--цвет-тёплый, var(--цвет-линия)));
  border: 1px solid color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 28%, transparent); }

.работа { position: relative; border-radius: var(--радиус-модуля, var(--радиус)); overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto; gap: .625rem; padding: .625rem .625rem 1.125rem;
  min-height: calc((100cqw - 1rem) / 2 * 1.4444); }
.работа::after { content: ""; position: absolute; inset: 0; background-size: 1.375rem 1.375rem;
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 40%, black 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 90% at 50% 40%, black 30%, transparent 100%); }
.работа__формат { position: relative; z-index: 2; grid-row: 1; justify-self: start;
  display: inline-flex; align-items: center; letter-spacing: .01em;
  font: 600 calc(var(--кегль-мелкий) * .93)/1.2 var(--шрифт-заголовков);
  padding: .375rem .6875rem; border-radius: 9em;
  backdrop-filter: blur(.5rem); -webkit-backdrop-filter: blur(.5rem); }
.работа .плей { position: relative; z-index: 2; grid-row: 2; place-self: center; width: 2.75rem; height: 2.75rem;
  transition: scale var(--длительность) var(--плавность); }
.работа:hover .плей { scale: 1.08; }
.работа__подпись { position: relative; z-index: 2; grid-row: 3; align-self: end;
  font-size: calc(var(--кегль-мелкий) * .93); line-height: 1.3; }
.работа__подпись b { display: block; font-family: var(--шрифт-заголовков); font-weight: 600;
  font-size: calc(var(--кегль-мелкий) * .96); }
.работа__шкала { position: absolute; z-index: 2; left: .625rem; right: .625rem; bottom: .5rem;
  height: 3px; border-radius: 3px; overflow: hidden; }
.работа__шкала i { display: block; width: 38%; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--цвет-акцент-яркий, var(--цвет-акцент)), var(--цвет-тёплый, var(--цвет-акцент-тёмный))); }
.светлый .работа, .тёмный .работа { border: 1px solid color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 22%, transparent);
  box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--цвет-тёмный-фон) 35%, transparent);
  background-image:
  radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 24%, transparent), transparent 60%),
  linear-gradient(155deg, var(--цвет-тёмный-фон-2, var(--цвет-тёмный-фон)), var(--цвет-тёмный-фон) 80%); }
.светлый .работа::after, .тёмный .работа::after { background-image:
  linear-gradient(color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 9%, transparent) 1px, transparent 1px),
  linear-gradient(90deg, color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 9%, transparent) 1px, transparent 1px); }
.светлый .работа__формат, .тёмный .работа__формат { color: var(--цвет-тёмный-текст);
  background: color-mix(in srgb, var(--цвет-тёмный-фон) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 40%, transparent); }
.светлый .работа__подпись, .тёмный .работа__подпись { color: color-mix(in srgb, var(--цвет-тёмный-текст) 80%, transparent); }
.светлый .работа__подпись b, .тёмный .работа__подпись b { color: var(--цвет-тёмный-текст); }
.светлый .работа__шкала, .тёмный .работа__шкала { background: color-mix(in srgb, var(--цвет-тёмный-текст) 16%, transparent); }

.работа__кадр { position: absolute; inset: 0; z-index: 1; padding-top: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; }
.работа__кадр::before, .работа__кадр::after { content: none; }
.работа__кадр ~ .работа__подпись::before { content: ""; position: absolute; z-index: -1;
  inset: -3rem -.625rem -1.125rem; background: linear-gradient(to top,
  color-mix(in srgb, var(--цвет-тёмный-фон) 95%, transparent) 0 calc(100% - 3rem), transparent); }
.работа__кадр img, .работа__кадр iframe { height: 100%; aspect-ratio: auto; }
.работа:has(> .работа__кадр)::after { content: none; }
.работа__кадр ~ .работа__формат, .работа__кадр ~ .работа__подпись { pointer-events: none; }

.работа__кадр ~ .работа__шкала { display: none; }

.работа__итог { display: block; margin-top: .25rem; letter-spacing: .01em;
  font: 600 calc(var(--кегль-мелкий) * .96)/1.25 var(--шрифт-заголовков); }
.светлый .работа__итог, .тёмный .работа__итог { color: var(--цвет-тёплый, var(--цвет-акцент-тёмный)); }
.работа .плей { background: var(--цвет-акцент-яркий, var(--цвет-акцент-тёмный)); }

@media (max-width: 639px) {
  .работа { grid-template-rows: calc((100cqw - 1rem) / 2 * 1.4444) auto; gap: .5rem; padding: 0;
    min-height: 0; overflow: visible; border-radius: 0; }
  .светлый .работа, .тёмный .работа { border: 0; box-shadow: none; background-image: none; }
  .работа::before { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 0;
    height: calc((100cqw - 1rem) / 2 * 1.4444); border-radius: var(--радиус-модуля, var(--радиус)); }
  .светлый .работа::before, .тёмный .работа::before {
    border: 1px solid color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 22%, transparent);
    box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--цвет-тёмный-фон) 35%, transparent);
    background-image:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 24%, transparent), transparent 60%),
    linear-gradient(155deg, var(--цвет-тёмный-фон-2, var(--цвет-тёмный-фон)), var(--цвет-тёмный-фон) 80%); }
  .работа::after { inset: 0 0 auto 0; height: calc((100cqw - 1rem) / 2 * 1.4444);
    border-radius: var(--радиус-модуля, var(--радиус)); }
  .работа__кадр { inset: 0 0 auto 0; height: calc((100cqw - 1rem) / 2 * 1.4444);
    border-radius: var(--радиус-модуля, var(--радиус)); overflow: hidden; }
  .работа__формат { grid-row: 1; align-self: start; margin: .625rem; }
  .работа .плей { grid-row: 1; place-self: center; }
  .работа__шкала { top: calc((100cqw - 1rem) / 2 * 1.4444 - .6875rem); bottom: auto; }
  .работа__подпись { grid-row: 2; align-self: start; }
  .работа__кадр ~ .работа__подпись::before { content: none; }
  .светлый .работа__подпись, .тёмный .работа__подпись {
    color: color-mix(in srgb, var(--текст-ключа, var(--цвет-текст)) 78%, transparent); }
  .светлый .работа__подпись b, .тёмный .работа__подпись b { color: var(--текст-ключа, var(--цвет-текст)); }

  .светлый .работа__итог { color: var(--цвет-акцент); }
  .тёмный .работа__итог { color: var(--тёплый-ключа, var(--цвет-акцент-тёмный)); }
}

.видео__плеер video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.видео__плеер .заглушка-картинки { min-height: 0; aspect-ratio: 16 / 9; }
.видео__текст { display: grid; justify-items: start; gap: 1.25rem; }
.видео__текст .секция__шапка { margin-bottom: 0; }
.видео__список { margin-bottom: 0; }

.видео__длительность { display: flex; align-items: center; gap: .5rem; margin-bottom: 0; }
.видео__длительность .иконка { width: 1.125rem; height: 1.125rem; }
.светлый .видео__плеер { background: var(--цвет-фон-карточки); border-color: var(--цвет-линия); }
.светлый .видео__плеер video { background: color-mix(in srgb, var(--цвет-текст) 8%, var(--цвет-фон-карточки)); }
.светлый .видео__длительность .иконка { color: var(--цвет-тёплый-тёмный, var(--цвет-акцент-тёмный)); }
.тёмный .видео__плеер { background: color-mix(in srgb, var(--цвет-тёмный-фон) 55%, transparent);
  border-color: color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 22%, transparent); }
.тёмный .видео__плеер::before { background: color-mix(in srgb, var(--цвет-тёмный-фон) 85%, transparent);
  border-bottom-color: color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 18%, transparent); }
.тёмный .видео__плеер video { background: var(--цвет-тёмный-фон); }
.тёмный .видео__длительность .иконка { color: var(--тёплый-ключа, var(--цвет-акцент-тёмный)); }

.тариф { position: relative; display: grid; gap: 1rem; padding: 1.625rem 1.5rem;
  border-radius: var(--радиус-карточки, var(--радиус)); }
.тариф > * { margin-bottom: 0; }
.тариф__метка { justify-self: start; display: inline-block; padding: .3125rem .75rem; border-radius: 9em;
  font: 600 calc(var(--кегль-мелкий) * .93)/1.2 var(--шрифт-заголовков);
  color: var(--цвет-тёмный-фон); background: var(--цвет-тёплый, var(--цвет-акцент-тёмный)); }
.тариф__имя { font-family: var(--шрифт-заголовков); font-weight: 700; font-size: calc(var(--кегль-текст) * 1.25); }
.тариф__цена { display: flex; align-items: baseline; gap: .625rem; flex-wrap: wrap; }
.тариф__цена b { font: 700 var(--кегль-цифра)/1 var(--шрифт-заголовков); letter-spacing: -0.01em; }
.тариф__цена s { font-size: calc(var(--кегль-мелкий) * 1.12); }
.тариф__состав { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.тариф__состав li { position: relative; padding-left: 1.375rem; font-size: var(--кегль-текст); line-height: 1.55; }
.тариф__состав li::before { content: ""; position: absolute; left: 0; top: .375rem; width: .75rem; height: .75rem;
  border-radius: 50%; background: var(--цвет-тёплый, var(--цвет-акцент-тёмный)); }
.тариф .кнопка { margin-top: .25rem; }
.тариф__фото { display: none; position: absolute; right: 1.375rem; top: -1.125rem; width: 4rem; height: 4rem;
  border-radius: 50%; overflow: hidden; border: 2px solid var(--цвет-тёплый, var(--цвет-акцент-тёмный)); }
.тариф__фото img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.светлый .тариф { background: var(--цвет-фон-карточки); --кромка-плиты: var(--цвет-линия);
  border-inline: 1px solid var(--цвет-линия); border-block-end: 1px solid var(--цвет-линия);
  box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--цвет-тёмный-фон) 8%, transparent); }
.светлый .тариф--акцент { border-color: var(--цвет-тёплый, var(--цвет-акцент-тёмный));
  box-shadow: 0 1.625rem 3.5rem color-mix(in srgb, var(--цвет-тёмный-фон) 16%, transparent); }
.светлый .тариф__имя, .светлый .тариф__цена b { color: var(--цвет-текст); }
.светлый .тариф__цена s, .светлый .тариф__состав li { color: var(--цвет-текст-мягкий); }
.светлый .тариф__фото { box-shadow: 0 .75rem 1.875rem color-mix(in srgb, var(--цвет-тёмный-фон) 25%, transparent); }
.тёмный .тариф { background: color-mix(in srgb, var(--цвет-тёмный-фон) 72%, transparent);
  --кромка-плиты: color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 26%, transparent);
  border-inline: 1px solid var(--кромка-плиты); border-block-end: 1px solid var(--кромка-плиты);
  box-shadow: var(--тень-глубокая); }
.тёмный .тариф--акцент { border-color: var(--тёплый-ключа, var(--цвет-акцент-тёмный));
  background: color-mix(in srgb, var(--цвет-тёмный-фон) 90%, transparent);
  box-shadow: var(--тень-плиты, var(--тень-глубокая)); }
.тёмный .тариф__имя, .тёмный .тариф__цена b { color: var(--текст-ключа, var(--цвет-тёмный-текст)); }
.тёмный .тариф__цена s { color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 50%, transparent); }
.тёмный .тариф__состав li { color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 82%, transparent); }
.тёмный .тариф__фото { box-shadow: 0 .75rem 1.875rem color-mix(in srgb, var(--цвет-тёмный-фон) 50%, transparent); }

.тариф__пояснение { font-size: var(--кегль-текст); line-height: 1.6; margin-bottom: 0; }
.светлый .тариф__пояснение { color: var(--цвет-текст-мягкий); }
.тёмный .тариф__пояснение { color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 78%, transparent); }

.отзыв-заглушка { display: grid; gap: .875rem; justify-items: start; padding: 1.5rem 1.375rem;
  border-radius: var(--радиус-карточки, var(--радиус)); }
.отзыв-заглушка__аватар { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; }
.отзыв-заглушка__аватар svg, .отзыв-заглушка__аватар .иконка { width: 1.375rem; height: 1.375rem; }
.отзыв-заглушка__метка, .цитата-карточка__метка { justify-self: start; padding: .3125rem .75rem; border-radius: 9em;
  font: 600 calc(var(--кегль-мелкий) * .93)/1.2 var(--шрифт-заголовков); }
.отзыв-заглушка__звёзды { display: flex; gap: 3px; }
.отзыв-заглушка__звёзды svg, .отзыв-заглушка__звёзды .иконка { width: .9375rem; height: .9375rem; }
.отзыв-заглушка__текст { font-size: var(--кегль-текст); line-height: 1.6; font-style: italic;
  padding-left: .75rem; margin-bottom: 0; }
.отзыв-заглушка__имя { font-size: calc(var(--кегль-мелкий) * .93); }
.светлый .отзыв-заглушка { background: var(--цвет-фон-карточки);
  border: 1px dashed color-mix(in srgb, var(--цвет-тёплый-тёмный, var(--цвет-акцент-тёмный)) 40%, transparent); }
.светлый .отзыв-заглушка__аватар { color: color-mix(in srgb, var(--цвет-тёплый-тёмный, var(--цвет-акцент-тёмный)) 60%, transparent);
  border: 1.5px dashed color-mix(in srgb, var(--цвет-тёплый-тёмный, var(--цвет-акцент-тёмный)) 50%, transparent); }
.светлый .отзыв-заглушка__метка, .светлый .цитата-карточка__метка { color: var(--цвет-акцент);
  background: color-mix(in srgb, var(--цвет-акцент) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--цвет-акцент) 25%, transparent); }
.светлый .отзыв-заглушка__звёзды svg { color: color-mix(in srgb, var(--цвет-тёплый-тёмный, var(--цвет-акцент-тёмный)) 35%, transparent); }
.светлый .отзыв-заглушка__текст { color: var(--цвет-текст-мягкий);
  border-left: 2px dashed color-mix(in srgb, var(--цвет-тёплый-тёмный, var(--цвет-акцент-тёмный)) 35%, transparent); }
.светлый .отзыв-заглушка__имя { color: var(--цвет-текст-мягкий); }
.тёмный .отзыв-заглушка { background: color-mix(in srgb, var(--цвет-тёмный-фон) 50%, transparent);
  border: 1px dashed color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 40%, transparent); }
.тёмный .отзыв-заглушка__аватар { color: color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 60%, transparent);
  border: 1.5px dashed color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 50%, transparent); }
.тёмный .отзыв-заглушка__метка, .тёмный .цитата-карточка__метка { color: var(--тёплый-ключа, var(--цвет-акцент-тёмный));
  background: color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 30%, transparent); }
.тёмный .отзыв-заглушка__звёзды svg { color: color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 35%, transparent); }
.тёмный .отзыв-заглушка__текст { color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 50%, transparent);
  border-left: 2px dashed color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 35%, transparent); }
.тёмный .отзыв-заглушка__имя { color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 45%, transparent); }

.светлый .роль--итог { background: color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 14%, transparent);
  border-color: color-mix(in srgb, var(--цвет-тёплый-тёмный, var(--цвет-акцент-тёмный)) 40%, transparent); }
.тёмный .роль--итог { background: color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 14%, transparent);
  border-color: color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 45%, transparent); }
.цитата-карточка { display: grid; gap: .875rem; margin: 0; padding: 1.5rem 1.375rem;
  border-radius: var(--радиус-карточки, var(--радиус)); }
.цитата-карточка__текст { margin-bottom: 0; padding-left: .75rem; font-style: italic;
  font-size: var(--кегль-текст); line-height: 1.6; }
.цитата-карточка .цитата__кто { margin-top: 0; }
.светлый .цитата-карточка { background: var(--цвет-фон-карточки);
  border: 1px solid color-mix(in srgb, var(--цвет-тёплый-тёмный, var(--цвет-акцент-тёмный)) 40%, transparent); }
.светлый .цитата-карточка__текст { color: var(--цвет-текст);
  border-left: 2px solid color-mix(in srgb, var(--цвет-тёплый-тёмный, var(--цвет-акцент-тёмный)) 55%, transparent); }
.тёмный .цитата-карточка { background: color-mix(in srgb, var(--цвет-тёмный-фон) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 40%, transparent); }
.тёмный .цитата-карточка__текст { color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 88%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 55%, transparent); }

.вопросы { display: grid; gap: .75rem; }
.вопросы .вопрос { padding: 0; border-radius: var(--радиус-модуля, var(--радиус)); overflow: hidden; }
.вопросы .вопрос > summary::after { display: none; }
.вопросы .вопрос__шапка { display: flex; align-items: center; gap: .875rem; padding: 1.125rem 1.25rem;
  cursor: pointer; list-style: none; font: 600 var(--кегль-текст)/1.35 var(--шрифт-заголовков); }
.вопросы .вопрос__шапка::-webkit-details-marker { display: none; }
.вопросы .вопрос__шеврон { flex: none; margin-left: auto; width: 1.25rem; height: 1.25rem;
  transition: transform var(--длительность) var(--плавность); }
.вопросы .вопрос[open] .вопрос__шеврон { transform: rotate(180deg); }
.вопросы .вопрос__тело { padding: 0 1.25rem 1.125rem; font-size: var(--кегль-текст); line-height: 1.6; }
.вопрос-карточка { display: grid; gap: .75rem; justify-items: start; padding: 1.625rem 1.5rem;
  border-radius: var(--радиус-карточки, var(--радиус)); }
.вопрос-карточка__икон { width: 2.75rem; height: 2.75rem; border-radius: .75rem; display: grid; place-items: center; }

.вопрос-карточка__икон svg, .вопрос-карточка__икон .иконка { width: 1.375rem; height: 1.375rem;
  color: inherit; }
.вопрос-карточка b { font-family: var(--шрифт-заголовков); font-weight: 700; font-size: var(--кегль-текст); }
.вопрос-карточка p { font-size: var(--кегль-текст); line-height: 1.6; margin-bottom: 0; }
.светлый .вопросы .вопрос { background: var(--цвет-фон-карточки); border: 1px solid var(--цвет-линия); }
.светлый .вопросы .вопрос__шеврон { color: var(--цвет-акцент); }
.светлый .вопросы .вопрос__тело { color: var(--цвет-текст-мягкий); }
.светлый .вопрос-карточка { background: color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 40%, transparent); }
.светлый .вопрос-карточка__икон { color: var(--цвет-акцент);
  background: color-mix(in srgb, var(--цвет-акцент) 10%, transparent); }
.светлый .вопрос-карточка b { color: var(--цвет-текст); }
.светлый .вопрос-карточка p { color: var(--цвет-текст-мягкий); }
.тёмный .вопросы .вопрос { background: color-mix(in srgb, var(--цвет-тёмный-фон) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 20%, transparent); }
.тёмный .вопросы .вопрос__шеврон { color: var(--тёплый-ключа, var(--цвет-акцент-тёмный)); }
.тёмный .вопросы .вопрос__тело { color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 80%, transparent); }
.тёмный .вопрос-карточка { background: color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 32%, transparent); }
.тёмный .вопрос-карточка__икон { color: var(--тёплый-ключа, var(--цвет-акцент-тёмный));
  background: color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 16%, transparent); }
.тёмный .вопрос-карточка b { color: var(--текст-ключа, var(--цвет-тёмный-текст)); }
.тёмный .вопрос-карточка p { color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 75%, transparent); }

.условия { position: relative; z-index: 2; display: grid; gap: .625rem; max-width: 47.5rem;
  margin: 0; padding: 0; list-style: none; }
.условия li { position: relative; list-style: none; padding: .875rem 1rem .875rem 2.75rem;
  border-radius: .875rem; font-size: var(--кегль-текст); line-height: 1.55; }
.условия li::before { content: "—"; position: absolute; left: 1rem; top: .875rem; font-weight: 700; }
.светлый .условия li { background: var(--цвет-фон-карточки); border: 1px solid var(--цвет-линия); color: var(--цвет-текст-мягкий); }
.светлый .условия li::before { color: var(--цвет-тёплый-тёмный, var(--цвет-акцент-тёмный)); }
.тёмный .условия li { background: color-mix(in srgb, var(--цвет-тёмный-фон) 40%, transparent);
  border: 1px solid color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 16%, transparent);
  color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 82%, transparent); }
.тёмный .условия li::before { color: var(--тёплый-ключа, var(--цвет-акцент-тёмный)); }

.карточка--светлая, .карточка--тёмная, .карточка--цвет, .карточка--золото {
  padding: calc(var(--отступ-блока) * 1.25); border-radius: var(--радиус-карточки, var(--радиус)); }

.карточка--светлая, .карточка--тёмная, .карточка--цвет, .карточка--золото, .тариф {
  border-block-start: 1px solid var(--кромка-плиты, transparent); }
.светлый .карточка--светлая.карточка--светлая, .тёмный .карточка--светлая.карточка--светлая {
  background: var(--цвет-фон-2); --кромка-плиты: var(--цвет-линия); color: var(--цвет-текст);
  border-inline: 1px solid var(--цвет-линия); border-block-end: 1px solid var(--цвет-линия); }
.карточка--светлая b, .карточка--светлая h3 { color: var(--цвет-текст); }
.карточка--светлая p { color: var(--цвет-текст-мягкий); }
.светлый .карточка--тёмная.карточка--тёмная, .тёмный .карточка--тёмная.карточка--тёмная {
  background: var(--цвет-тёмный-фон); color: var(--цвет-тёмный-текст);
  --кромка-плиты: var(--цвет-тёмный-фон-4, var(--цвет-тёмный-фон-2, var(--цвет-тёмный-фон)));
  border-inline: 1px solid var(--кромка-плиты); border-block-end: 1px solid var(--кромка-плиты); }
.карточка--тёмная b, .карточка--тёмная h3 { color: var(--цвет-тёмный-текст); }
.карточка--тёмная p { color: color-mix(in srgb, var(--цвет-тёмный-текст) 80%, transparent); }
.светлый .карточка--цвет.карточка--цвет, .тёмный .карточка--цвет.карточка--цвет {
  background: var(--цвет-акцент); color: var(--цвет-на-акценте);
  border-inline: 1px solid transparent; border-block-end: 1px solid transparent; }
.карточка--цвет b, .карточка--цвет h3 { color: var(--цвет-на-акценте); }
.карточка--цвет p { color: color-mix(in srgb, var(--цвет-на-акценте) 82%, transparent); }
.светлый .карточка--золото.карточка--золото, .тёмный .карточка--золото.карточка--золото {
  background: var(--цвет-тёплый, var(--цвет-акцент-тёмный)); color: var(--цвет-тёмный-фон);
  border-inline: 1px solid transparent; border-block-end: 1px solid transparent; }
.карточка--золото b, .карточка--золото h3 { color: var(--цвет-тёмный-фон); }
.карточка--золото p { color: color-mix(in srgb, var(--цвет-тёмный-фон) 82%, transparent); }

.кромка--акцент, .кромка--тёплый, .кромка--тёмный { border-top-style: solid; border-top-width: 4px; }

.светлый .кромка--акцент.кромка--акцент, .тёмный .кромка--акцент.кромка--акцент { border-top-color: var(--цвет-акцент-глубже, var(--цвет-акцент)); }
.светлый .кромка--тёплый.кромка--тёплый, .тёмный .кромка--тёплый.кромка--тёплый { border-top-color: var(--цвет-тёплый, var(--цвет-акцент-тёмный)); }
.светлый .кромка--тёмный.кромка--тёмный, .тёмный .кромка--тёмный.кромка--тёмный { border-top-color: var(--цвет-тёмный-фон-3, var(--цвет-тёмный-фон)); }

.светлый .кромка--акцент.кромка--акцент, .тёмный .кромка--акцент.кромка--акцент,
.светлый .кромка--тёплый.кромка--тёплый, .тёмный .кромка--тёплый.кромка--тёплый,
.светлый .кромка--тёмный.кромка--тёмный, .тёмный .кромка--тёмный.кромка--тёмный {
  border-top-style: solid; border-top-width: 4px; }

.светлый .кнопка--золото, .тёмный .кнопка--золото {
  background: var(--цвет-тёплый, var(--цвет-акцент-тёмный)); color: var(--цвет-тёмный-фон); }
.светлый .кнопка--золото:hover, .тёмный .кнопка--золото:hover {
  background: var(--цвет-тёплый-мягкий, var(--цвет-тёплый, var(--цвет-акцент-тёмный))); }
.светлый .кнопка--крем, .тёмный .кнопка--крем { background: var(--цвет-фон-2); color: var(--цвет-акцент); }
.светлый .кнопка--крем:hover, .тёмный .кнопка--крем:hover { background: var(--цвет-фон); }

.стикер { display: inline-block; width: fit-content; padding: .5625em .875em; margin-bottom: var(--отступ-блока);
  border-radius: var(--радиус-малый); font-weight: 700; font-size: var(--кегль-кикер, var(--кегль-мелкий));
  line-height: 1.2; letter-spacing: var(--разрядка-кикера); transform: rotate(-2deg);
  box-shadow: var(--тень-чип, var(--тень)); }
.светлый .стикер { background: var(--цвет-тёплый, var(--цвет-акцент-тёмный)); color: var(--цвет-тёмный-фон); }
.тёмный .стикер { background: var(--цвет-фон-2); color: var(--цвет-акцент); }

.плитка-цифры { display: grid; gap: .375rem; padding: 1.375rem 1.25rem 1.5rem;
  border-radius: var(--радиус-модуля, var(--радиус)); }
.плитка-цифры b { font: 700 var(--кегль-цифра)/1 var(--шрифт-заголовков); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; }
.плитка-цифры span { display: block; font-size: var(--кегль-мелкий); line-height: 1.35; }
.светлый .плитка-цифры { background: var(--цвет-тёмный-фон); }
.светлый .плитка-цифры b { color: var(--цвет-тёплый, var(--цвет-акцент-тёмный)); }
.светлый .плитка-цифры span { color: color-mix(in srgb, var(--цвет-тёмный-текст) 72%, transparent); }
.тёмный .плитка-цифры { background: var(--цвет-фон-2); }
.тёмный .плитка-цифры b { color: var(--цвет-акцент-тёмный); }

.тёмный .плитка-цифры span { color: var(--цвет-текст-мягкий); }

.кикер--плашка { padding: .5625em .875em; border-radius: var(--радиус-малый); border: 0; }
.светлый .кикер--плашка { color: var(--цвет-акцент-маркер, var(--цвет-акцент));
  background: color-mix(in srgb, var(--цвет-акцент-маркер, var(--цвет-акцент)) 12%, transparent); }
.тёмный .кикер--плашка { color: var(--тёплый-ключа, var(--цвет-акцент-тёмный));
  background: color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 16%, transparent); }
.тёмный .кикер--плашка::before { display: none; }

@media (min-width: 640px) {
  .работа { min-height: calc((100cqw - 2rem) / 3 * 1.4444); }
}

@media (min-width: 900px) {
  .секция__шапка { margin-bottom: 3rem; }
  .роль p { font-size: calc(var(--кегль-мелкий) * 1.12); }
  .врезка b, .врезка p { font-size: calc(var(--кегль-мелкий) * 1.12); }
  .рамка-телефона .остров { width: 4.75em; height: 1.375em; }
  .рамка-телефона .остров--крупный { width: 6em; height: 1.625em; }

  .лента { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .875rem; }
  .лента .шаг b { font-size: calc(var(--кегль-мелкий) * 1.12); }

  .лента .шаг p { font-size: calc(var(--кегль-мелкий) * 1.12); }
  .лента .шаг:not(:last-child)::after { content: ""; position: absolute; right: -.875rem; top: 1.8125rem;
    width: .875rem; height: var(--нить, 2px); }
  .светлый .лента .шаг:not(:last-child)::after { background: color-mix(in srgb, var(--цвет-тёплый-тёмный, var(--цвет-акцент-тёмный)) 40%, transparent); }
  .тёмный .лента .шаг:not(:last-child)::after { background: color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 40%, transparent); }
  .модуль__шапка { padding: 1.125rem 1.5rem; }
  .модуль__номер { width: 2.75rem; height: 2.75rem; font-size: var(--кегль-мелкий); }
  .модуль__тело { padding: 0 1.5rem 1.375rem 6rem; }

  .модуль__тело p, .модуль__результат { font-size: calc(var(--кегль-мелкий) * 1.12); }
  .работа { min-height: calc((100cqw - 2.5rem) / 3 * 1.4444); }
  .работа__подпись b { font-size: var(--кегль-мелкий); }

  .тариф__состав li, .тариф__пояснение { font-size: calc(var(--кегль-мелкий) * 1.12); }
  .тариф__фото { display: block; }

  .отзыв-заглушка__текст { font-size: calc(var(--кегль-мелкий) * 1.12); }
  .вопросы .вопрос__тело { font-size: calc(var(--кегль-мелкий) * 1.04); }

  .вопрос-карточка p { font-size: calc(var(--кегль-мелкий) * 1.12); }
  .условия li { font-size: calc(var(--кегль-мелкий) * 1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .модуль, .модуль__шеврон, .вопросы .вопрос__шеврон, .работа .плей { transition: none; }
  .работа:hover .плей { scale: 1; }
}

.текстура__список { position: relative; z-index: 2; display: grid; gap: .875rem; max-width: 51.25rem; }

.разворот__сетка { position: relative; z-index: 2; display: grid; gap: 1.625rem; }

.разворот__сетка .фото { position: relative; display: grid; min-height: 20rem;
  border-radius: var(--радиус-карточки, var(--радиус)); }
.разворот__сетка .фото img { grid-area: 1 / 1; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.разворот__сетка .фото .заглушка-картинки { grid-area: 1 / 1; height: 100%; aspect-ratio: auto; }
.светлый .разворот__сетка .фото { box-shadow: 0 1.5rem 3.75rem color-mix(in srgb, var(--цвет-тёмный-фон) 18%, transparent); }
.тёмный .разворот__сетка .фото { box-shadow: 0 1.5rem 3.75rem color-mix(in srgb, var(--цвет-тёмный-фон) 40%, transparent); }

.разворот__сетка .цифры .цифра:first-child { padding-left: 0; border-left: 0; }
.разворот__сетка .цифры:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.блок--о-себе .разворот__сетка p:not(.секция__лид):not(.кикер) { max-width: 35rem; line-height: 1.7; }
.светлый.блок--о-себе .разворот__сетка p:not(.секция__лид):not(.кикер) { color: var(--цвет-текст-мягкий); }
.тёмный.блок--о-себе .разворот__сетка p:not(.секция__лид):not(.кикер) { color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 82%, transparent); }

.блок--о-себе .пятно, .блок--кейс .пятно { width: 28.75rem; height: 28.75rem; right: -10rem; bottom: -10rem; }
.тёмный.блок--о-себе .пятно, .тёмный.блок--кейс .пятно { background: color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 18%, transparent); }
.светлый.блок--о-себе .пятно, .светлый.блок--кейс .пятно { background: color-mix(in srgb, var(--цвет-тёплый-мягкий, var(--цвет-линия)) 55%, transparent); }

.светлый.блок--что-получите { background: linear-gradient(165deg, var(--цвет-фон-2), var(--цвет-фон) 80%); }
.тёмный.блок--что-получите { background: linear-gradient(165deg, var(--цвет-тёмный-фон), var(--цвет-тёмный-фон-2, var(--цвет-тёмный-фон)) 80%); }
.блок--что-получите .пятно { width: 32.5rem; height: 32.5rem; left: -11.25rem; top: -8.75rem; }
.тёмный.блок--что-получите .пятно { background: color-mix(in srgb, var(--цвет-акцент) 55%, transparent); }
.светлый.блок--что-получите .пятно { background: color-mix(in srgb, var(--цвет-тёплый-мягкий, var(--цвет-линия)) 55%, transparent); }

.разворот__сетка:not(:has(> .фото)) > * { max-width: 45rem; }

.части-программы { position: relative; z-index: 2; display: grid; gap: 2.25rem; }
.модули { display: grid; gap: .625rem; }

.светлый.блок--программа { background: linear-gradient(175deg, var(--цвет-фон-2), var(--цвет-фон) 70%); }
.тёмный.блок--программа { background: linear-gradient(175deg, var(--цвет-тёмный-фон-2, var(--цвет-тёмный-фон)), var(--цвет-тёмный-фон) 70%); }
.блок--программа .нода { left: 8%; top: 16%; }
.блок--программа .нода--2 { left: 92%; top: 64%; }
.части-программы + .врезка { margin-top: 1.5rem; max-width: 45rem; }

.работы__сетка { position: relative; z-index: 2; display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr));
  container-type: inline-size; }

.светлый.блок--работы { background: linear-gradient(170deg, var(--фон-ключа, var(--цвет-фон)), var(--фон-2-ключа, var(--цвет-фон-2)) 85%); }
.работы__сетка + .мелкий, .отзывы-сетка + .мелкий { position: relative; z-index: 2; margin-top: 1rem; max-width: 45rem; }

.видео__сетка { position: relative; z-index: 2; display: grid; gap: 1.5rem; align-items: center; }

.тарифы { position: relative; z-index: 2; display: grid; gap: 1.25rem; }
.тарифы + .мелкий { position: relative; z-index: 2; margin-top: 1.5rem; max-width: 45rem; }

.действие-секции { position: relative; z-index: 2; display: grid; }
.светлый.блок--услуги-и-цены, .светлый.блок--прайс-лист { background: linear-gradient(180deg, var(--фон-ключа, var(--цвет-фон)), var(--фон-2-ключа, var(--цвет-фон-2))); }
.блок--услуги-и-цены .пятно, .блок--прайс-лист .пятно { width: 37.5rem; height: 37.5rem; left: calc(50% - 18.75rem); top: -16.25rem; }
.светлый.блок--услуги-и-цены .пятно, .светлый.блок--прайс-лист .пятно { background: color-mix(in srgb, var(--цвет-тёплый-мягкий, var(--цвет-линия)) 35%, transparent); }
.тёмный.блок--услуги-и-цены .пятно, .тёмный.блок--прайс-лист .пятно { background: color-mix(in srgb, var(--цвет-акцент) 28%, transparent); }

.отзывы-сетка { position: relative; z-index: 2; display: grid; gap: 1.125rem; }

.кейс__пара { display: grid; gap: .875rem; }
.светлый.блок--кейс { background: linear-gradient(165deg, var(--фон-2-ключа, var(--цвет-фон-2)), var(--фон-ключа, var(--цвет-фон)) 75%); }

.вопросы-сетка { position: relative; z-index: 2; display: grid; gap: 1.5rem; align-items: start; }

.блок--финал { position: relative; overflow: hidden; }

.финал__фото { position: absolute; inset: 0; margin: 0; overflow: hidden; border-radius: 0; box-shadow: none; }
.финал__фото img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto;
  object-fit: cover; object-position: 50% 12%; animation: зум-финала 34s ease-in-out infinite alternate; }
.финал__оверлей { position: absolute; inset: 0; }
.финал__текст { position: relative; z-index: 2; display: grid; gap: 1rem; max-width: 35rem; }
.финал__контакты { font-size: var(--кегль-текст); margin-bottom: 0; }

.финал__контакты a { color: inherit; }
.светлый .финал__оверлей { background: linear-gradient(0deg,
  color-mix(in srgb, var(--цвет-фон) 97%, transparent) 8%,
  color-mix(in srgb, var(--цвет-фон) 88%, transparent) 42%,
  color-mix(in srgb, var(--цвет-фон) 50%, transparent) 100%); }
.светлый .финал__контакты { color: var(--цвет-текст-мягкий); }
.тёмный .финал__оверлей { background: linear-gradient(0deg,
  color-mix(in srgb, var(--цвет-тёмный-фон) 95%, transparent) 10%,
  color-mix(in srgb, var(--цвет-тёмный-фон) 82%, transparent) 45%,
  color-mix(in srgb, var(--цвет-тёмный-фон) 50%, transparent) 100%); }
.тёмный .финал__контакты { color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 65%, transparent); }

.блок--подвал { padding-block: 2.5rem 1.5rem; }

.блок--подвал .блок__внутри { border-top: 0; padding-top: 0; }
.светлый.блок--подвал { border-top: 1px solid var(--цвет-линия); }
.тёмный.блок--подвал { border-top: 1px solid color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 14%, transparent); }
.подвал__сетка { display: grid; gap: 1.75rem; }
.подвал__лого { display: flex; align-items: center; gap: .5rem; margin-bottom: .625rem;
  font: 700 .9375rem/1 var(--шрифт-заголовков); text-decoration: none; }
.подвал__лого img { width: 1.75rem; height: 1.75rem; border-radius: 50%; flex: none; aspect-ratio: auto; }
.подвал__ссылки { display: grid; gap: .5rem; }
.блок--подвал h4 { font-family: var(--шрифт-заголовков); font-weight: 600; letter-spacing: .03em;
  font-size: calc(var(--кегль-мелкий) * .93); margin-bottom: .625rem; }
.подвал__низ { margin-top: 1.875rem; padding-top: 1.125rem; display: flex; flex-wrap: wrap;
  gap: .5rem 1rem; justify-content: space-between; font-size: calc(var(--кегль-мелкий) * .93); }

.блок--подвал a { color: inherit; text-decoration: none; }
.блок--подвал a:hover { text-decoration: underline; }

.светлый.блок--подвал p, .светлый.блок--подвал a { color: var(--цвет-текст-мягкий); }
.светлый.блок--подвал h4, .светлый.блок--подвал .подвал__лого { color: var(--цвет-текст); }
.светлый .подвал__низ { color: var(--цвет-текст-мягкий); border-top: 1px solid var(--цвет-линия); }
.светлый .подвал__ссылки a:hover { color: var(--цвет-тёплый-тёмный, var(--цвет-акцент-тёмный)); }
.тёмный.блок--подвал p, .тёмный.блок--подвал a { color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 62%, transparent); }
.тёмный.блок--подвал h4 { color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 85%, transparent); }
.тёмный .подвал__низ { color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 45%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 10%, transparent); }
.тёмный .подвал__ссылки a:hover { color: var(--тёплый-ключа, var(--цвет-акцент-тёмный)); }

@media (min-width: 640px) {
  .работы__сетка { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .кейс__пара { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .текстура__список { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.125rem; }

  .текстура__список .роль:first-child { grid-column: 1 / -1; }
  .разворот__сетка { grid-template-columns: 1.05fr .95fr; gap: 2.75rem; align-items: center; }
  .разворот__сетка--лево { grid-template-columns: .95fr 1.05fr; }
  .разворот__сетка--лево .фото { order: -1; }
  .разворот__сетка .фото { min-height: 27.5rem; }

  .разворот__сетка:not(:has(> .фото)) { grid-template-columns: minmax(0, 1fr); }

  .блок--что-получите .разворот__сетка .фото { align-self: stretch; }

  .блок--что-получите .разворот__сетка:not(:has(> .фото)) .секция__тело:has(> .врезка) {
    display: grid; grid-template-columns: 1.05fr .95fr; grid-template-rows: auto 1fr;
    column-gap: 2.75rem; row-gap: 0; max-width: none; }
  .блок--что-получите .разворот__сетка:not(:has(> .фото)) .секция__тело:has(> .врезка) > .врезка {
    grid-column: 2; grid-row: 1 / -1; align-content: center; gap: .625rem; padding: 2.25rem 2rem; }

  .блок--что-получите .разворот__сетка:not(:has(> .фото)) .секция__тело:has(> .врезка) > .врезка b,
  .блок--что-получите .разворот__сетка:not(:has(> .фото)) .секция__тело:has(> .врезка) > .врезка p {
    font-size: var(--кегль-лид, var(--кегль-текст)); line-height: 1.6; }

  .блок--что-получите .список-иконок li { font-size: calc(var(--кегль-мелкий) * 1.12); }

  .разворот__сетка .цифры { display: flex; flex-wrap: wrap; }
  .разворот__сетка .цифра { flex: 0 1 auto; }
  .работы__сетка { gap: 1.25rem; }

  .видео__сетка { grid-template-columns: 1.15fr 1fr; gap: 2.75rem; }

  .блок--видео .видео__список li { font-size: calc(var(--кегль-мелкий) * 1.12); }
  .тарифы { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.375rem; align-items: stretch; }
  .действие-секции { justify-items: center; }
  .отзывы-сетка { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .вопросы-сетка { grid-template-columns: 1.5fr 1fr; gap: 2rem; }

  .вопросы-сетка:not(:has(> .вопрос-карточка)) { grid-template-columns: minmax(0, 1fr); }
  .блок--финал { min-height: 70vh; display: flex; align-items: center; }
  .финал__фото img { object-position: 50% 4%; }
  .финал__контакты { font-size: var(--кегль-мелкий); }
  .светлый .финал__оверлей { background: linear-gradient(100deg,
    color-mix(in srgb, var(--цвет-фон) 97%, transparent) 0%,
    color-mix(in srgb, var(--цвет-фон) 90%, transparent) 40%,
    color-mix(in srgb, var(--цвет-фон) 50%, transparent) 68%); }
  .тёмный .финал__оверлей { background: linear-gradient(100deg,
    color-mix(in srgb, var(--цвет-тёмный-фон) 95%, transparent) 0%,
    color-mix(in srgb, var(--цвет-тёмный-фон) 85%, transparent) 38%,
    color-mix(in srgb, var(--цвет-тёмный-фон) 45%, transparent) 70%); }
  .блок--подвал { padding-block: 3.25rem 1.75rem; }
  .подвал__сетка { grid-template-columns: 1.2fr 1fr 1fr; gap: 2rem; }
}

@keyframes зум-финала { from { scale: 1.04; } to { scale: 1; } }

@media (prefers-reduced-motion: reduce) {
  .финал__фото img { animation: none; }
}

.блок--первый-экран { padding-top: 0; padding-bottom: calc(var(--отступ-секции) * .7); }

.блок--первый-экран.светлый[data-ключ-макета="тёмная"] {
  background-image: radial-gradient(115% 78% at 76% 28%, var(--тепло-ключа, transparent), transparent 68%),
    linear-gradient(160deg, var(--фон-ключа, var(--цвет-фон)), var(--фон-2-ключа, var(--цвет-фон)) 70%, var(--фон-ключа, var(--цвет-фон))); }
.блок--первый-экран .блок__внутри { padding-top: calc(var(--отступ-секции) * .6); }
.первый-экран--сцена .блок__внутри, .первый-экран--живая-сцена .блок__внутри,
.первый-экран--живая-обложка .блок__внутри { padding-top: 0; }

.блок--первый-экран .кикер { margin-bottom: calc(var(--отступ-блока) * .6); }  .блок--первый-экран h1 { margin-bottom: .35em; text-wrap: balance; overflow-wrap: normal; word-break: normal; }

@media (max-width: 899px) {
  .блок--первый-экран.тёмный h1 .хвост { font-size: max(.66em, 1.5rem); line-height: 1.16; margin-top: .36em; }
}
.блок--первый-экран .лид { line-height: 1.4; margin-bottom: .9em; }
.блок--первый-экран .список-иконок { gap: .45em; margin-bottom: .9em; }
.блок--первый-экран .первый-экран__доверие, .блок--первый-экран .первый-экран__когда { margin-bottom: .6em; }

.первый-экран__доверие, .первый-экран__когда { font-size: var(--кегль-текст); }
@media (min-width: 900px) {
  .первый-экран__доверие, .первый-экран__когда { font-size: var(--кегль-мелкий); }
}
.блок--первый-экран .цифры { margin-top: calc(var(--отступ-блока) * .75); }
.первый-экран__текст { position: relative; z-index: 1; }  .первый-экран__текст > :last-child { margin-bottom: 0; }
.первый-экран__действие { display: flex; flex-wrap: wrap; align-items: center; gap: .75em; margin: calc(var(--отступ-блока) * .8) 0 .75em; }
.первый-экран__действие .кнопка { flex: 1 1 auto; }

@media (max-width: 899px) {
  .первый-экран__действие { flex-direction: column; align-items: stretch; gap: .375em; }
  .первый-экран__действие .кнопка--контур { min-height: 0; padding: .5em 0 .125em; border: 0;
    background: transparent; font-size: var(--кегль-текст); opacity: .75; }
  .первый-экран__действие .кнопка--контур:hover { background: transparent; }
  .первый-экран__действие .кнопка--контур::after { content: "→"; margin-left: .375em; }
}

.первый-экран__доверие, .первый-экран__когда { display: flex; align-items: center; gap: .5em; }

.картинка { margin: 0; position: relative; }
.картинка img, .картинка video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.первый-экран__картинка { margin-top: var(--отступ-блока); }
.картинка--фото { aspect-ratio: 3 / 4; border-radius: var(--радиус); overflow: hidden; box-shadow: var(--тень); }
.картинка--край { border-radius: 0; box-shadow: none; overflow: visible; }
.картинка--край img { mask-image: linear-gradient(to bottom, black 68%, transparent 96%); -webkit-mask-image: linear-gradient(to bottom, black 68%, transparent 96%); }

.картинка--вырез, .картинка--живой-портрет { aspect-ratio: 3 / 4; }
.картинка--вырез img, .картинка--живой-портрет img, .картинка--живой-портрет video { object-position: 50% 0;
  position: relative; z-index: 1; mask-image: linear-gradient(to bottom, black 66%, transparent 96%); -webkit-mask-image: linear-gradient(to bottom, black 66%, transparent 96%);
  filter: drop-shadow(var(--тень-спутник, var(--тень-глубокая))); }
.опора { position: absolute; left: 15%; bottom: 8%; width: 70%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  filter: blur(2em); opacity: .6; animation: дрейф 30s ease-in-out infinite alternate;

  background: radial-gradient(circle, color-mix(in srgb, var(--глубина-ключа, var(--цвет-акцент)) 55%, transparent), transparent 70%); }

.кольцо { position: absolute; left: 6%; top: 50%; width: 88%; aspect-ratio: 1; translate: 0 -50%; border-radius: 50%; pointer-events: none;
  border: .175em dashed color-mix(in srgb, var(--тёплый-ключа, var(--цвет-акцент-тёмный)) 55%, transparent);
  opacity: .85; animation: вращение 60s linear infinite; }
.кольцо--2 { left: 18%; width: 64%; opacity: .28; animation-duration: 90s; animation-direction: reverse; }

.первый-экран--центр .кольцо { left: 50%; top: 64%; width: 35em; translate: -50% -50%; }
.первый-экран--центр .кольцо--2 { left: 50%; width: 48.75em; }

.карточка--стекло { color: var(--цвет-тёмный-текст); }
.карточка__имя { font-family: var(--шрифт-заголовков); font-weight: 700; font-size: 1.0625em; line-height: 1.2;
  color: var(--цвет-тёмный-текст); }
.карточка__роль { margin-top: .1875em; color: color-mix(in srgb, var(--цвет-тёмный-текст) 75%, transparent); }

@media (min-width: 900px) { .карточка__роль { font-size: var(--кегль-мелкий); } }
.карточка__опоры { display: flex; gap: 1.125em; margin: .75em 0 0; padding: 0; list-style: none; font-size: .8125em; line-height: 1.3; }
.карточка__опоры li { color: color-mix(in srgb, var(--цвет-тёмный-текст) 82%, transparent);

  max-width: 15em; }

.первый-экран--разворот .блок__внутри { display: grid; gap: 0; }
.первый-экран--разворот .первый-экран__картинка { order: -1; position: relative; aspect-ratio: 4 / 5;
  margin: calc(-.6 * var(--отступ-секции)) calc(-1 * var(--отступ-блока)) -3em; overflow: visible; }

.первый-экран--разворот .первый-экран__картинка.картинка--край { border-radius: 0; }
.первый-экран--разворот .первый-экран__картинка.картинка--край img { mask-image: linear-gradient(to bottom, black 52%, transparent); -webkit-mask-image: linear-gradient(to bottom, black 52%, transparent); object-position: 50% 0; }
.первый-экран--разворот .первый-экран__регалии, .первый-экран--разворот .чип--ролик { display: none; }

.первый-экран--разворот .чип--автор { position: absolute; left: 1em; right: auto; bottom: auto;
  top: calc(var(--лицо-в-кадре, .28) * 112% + 8em); font-size: 1em; }
@media (min-width: 900px) { .первый-экран--разворот .чип--автор { display: none; } }

.первый-экран--сцена, .первый-экран--живая-сцена, .первый-экран--живая-обложка { min-height: 100svh; display: flex; align-items: flex-end; padding-top: calc(var(--отступ-секции) * 2.2); }
.картинка--сцена, .картинка--видео, .картинка--видео-с-голосом { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.картинка--сцена img, .картинка--видео video, .картинка--видео img, .картинка--видео-с-голосом video, .картинка--видео-с-голосом img { object-position: 50% 15%; }

.картинка--видео-с-голосом::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top,
  color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 96%, transparent) 0%, color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 90%, transparent) 40%,
  color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 60%, transparent) 56%, color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 25%, transparent) 66%, transparent 74%); }
.картинка--видео::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top,
  color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 97%, transparent) 0%, color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 90%, transparent) 42%,
  color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 40%, transparent) 62%, color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 12%, transparent) 100%); }
.картинка--сцена::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top,
  color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 96%, transparent) 0%, color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 90%, transparent) 40%,
  color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 60%, transparent) 56%, color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 25%, transparent) 66%, transparent 74%); }

.картинка--сцена::before, .картинка--видео::before, .картинка--видео-с-голосом::before {
  content: ""; position: absolute; inset: 0; opacity: var(--добор-затемнения, 0);
  background: linear-gradient(to top, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 66%, transparent 84%); }

.светлый .картинка--сцена::before, .светлый .картинка--видео::before,
.светлый .картинка--видео-с-голосом::before { opacity: var(--добор-высветления, 0); }
.картинка--видео img, .картинка--видео-с-голосом img, .картинка--живой-портрет img { display: none; }
.картинка--постер video { display: none; }  .картинка--постер img { display: block; }
.картинка--мозаика.картинка--постер video { display: block; }

.первый-экран--сцена .первый-экран__регалии, .первый-экран--живая-сцена .первый-экран__регалии,
.первый-экран--живая-обложка .первый-экран__регалии { display: none; }
@media (min-width: 900px) {
  .первый-экран--сцена .первый-экран__регалии, .первый-экран--живая-сцена .первый-экран__регалии,
  .первый-экран--живая-обложка .первый-экран__регалии { display: block; position: absolute; z-index: 3; right: 3.5em; bottom: 3.5em;
    width: auto; max-width: min(30em, 41%); }
}

.первый-экран--сцена .первый-экран__текст, .первый-экран--живая-сцена .первый-экран__текст,
.первый-экран--живая-обложка .первый-экран__текст { --мягкость-текста: 80%; }

.первый-экран--сцена .шапка, .первый-экран--живая-сцена .шапка, .первый-экран--живая-обложка .шапка {
  position: absolute; inset: 0 0 auto; z-index: 6;
  background: linear-gradient(color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 55%, transparent), transparent); }

.первый-экран--сцена .цифра__значение, .первый-экран--живая-сцена .цифра__значение,
.первый-экран--живая-обложка .цифра__значение { color: var(--тёплый-ключа, var(--цвет-акцент-тёмный)); }

.первый-экран--сцена .акцент, .первый-экран--живая-сцена .акцент,
.первый-экран--бенто .акцент, .первый-экран--живая-обложка .акцент { color: var(--тёплый-ключа, var(--цвет-акцент-тёмный)); }

.первый-экран--разворот .цифра--ключ .цифра__значение { color: var(--цвет-акцент-тёмный); }

.тёмный .цифра--ключ .цифра__значение { color: var(--цвет-акцент-яркий, var(--цвет-акцент)); }

@media (max-width: 899px) {
  .первый-экран--сцена .первый-экран__текст, .первый-экран--живая-сцена .первый-экран__текст,
  .первый-экран--живая-обложка .первый-экран__текст { display: flex; flex-direction: column; }
  .первый-экран--сцена .первый-экран__текст .цифры, .первый-экран--живая-сцена .первый-экран__текст .цифры,
  .первый-экран--живая-обложка .первый-экран__текст .цифры { order: 10; margin-top: .4em; }

  .первый-экран--разворот .первый-экран__текст { display: flex; flex-direction: column; gap: calc(var(--отступ-блока) * .875); }
  .первый-экран--разворот .первый-экран__текст > * { margin-block: 0; }
  .первый-экран--разворот .первый-экран__текст .список-иконок { order: 10; margin-top: .625em; }  .первый-экран--разворот .первый-экран__текст .цифры { order: 11; }
  .первый-экран--разворот .первый-экран__картинка { margin-bottom: -5.25em; }
}

@media (max-width: 899px) {
  .первый-экран--сцена, .первый-экран--живая-сцена, .первый-экран--живая-обложка { align-items: flex-start; }
  .первый-экран--сцена .первый-экран__текст, .первый-экран--живая-сцена .первый-экран__текст {
    padding-top: min(35vh, calc(var(--отступ-секции) * 5.3));
  }
  .первый-экран--живая-обложка .первый-экран__текст { padding-top: min(40vh, calc(var(--отступ-секции) * 6.1)); }

  .первый-экран--сцена .картинка--сцена, .первый-экран--живая-сцена .картинка--видео-с-голосом {
    bottom: auto; height: 62%;
  }
}

.звук-блок { position: absolute; z-index: 4; right: 1em; top: calc(var(--лицо-в-кадре, .28) * 62% + 2.6em); display: grid; justify-items: end; gap: .5em; }
.звук { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em; height: 3.25rem; padding: 0 1.25em 0 1em;
  border-radius: var(--кнопка-радиус); border: 0; background: var(--цвет-акцент); color: var(--цвет-на-акценте); cursor: pointer;
  font: 600 var(--кегль-текст)/1 var(--шрифт-заголовков); box-shadow: var(--тень-глубокая);
  animation: пульс-кнопки 2.4s var(--плавность) -1.2s infinite; transition: background var(--длительность) var(--плавность), transform var(--длительность) var(--плавность); }
.звук:hover { background: var(--цвет-акцент-тёмный); transform: translateY(-2px); }
.звук svg { width: 1.4em; height: 1.4em; flex: none; }
.звук[aria-pressed="true"] { animation: none; background: color-mix(in srgb, var(--цвет-тёмный-фон) 82%, transparent); color: var(--цвет-тёмный-текст);
  border: 1px solid var(--цвет-акцент); backdrop-filter: blur(.6em); -webkit-backdrop-filter: blur(.6em); }
.звук__почему { display: inline-flex; align-items: center; gap: .5em; padding: .5em .9em; border-radius: 9em; white-space: nowrap; line-height: 1.25;
  font-size: var(--кегль-текст); color: var(--цвет-тёмный-текст); background: color-mix(in srgb, var(--цвет-тёмный-фон) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--цвет-акцент) 45%, transparent); backdrop-filter: blur(.6em); -webkit-backdrop-filter: blur(.6em); }
.звук__почему::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--цвет-акцент-яркий, var(--цвет-акцент)); animation: мерцание 1.6s ease-in-out infinite; }
.звук-блок[data-звук="вкл"] .звук__почему, .звук__почему-длинно { display: none; }
.звук__подпись { white-space: nowrap; }

.живое { position: absolute; top: 1em; left: 1em; z-index: 2; display: inline-flex; align-items: center; gap: .5em; padding: .45em .9em;
  border-radius: 9em; font: 600 var(--кегль-мелкий)/1.2 var(--шрифт-заголовков); letter-spacing: .04em; color: var(--цвет-тёмный-текст);
  border: 1px solid color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент)) 35%, transparent);
  background: color-mix(in srgb, var(--цвет-тёмный-фон) 55%, transparent); backdrop-filter: blur(.5em); -webkit-backdrop-filter: blur(.5em); }
.живое::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--цвет-акцент-яркий, var(--цвет-акцент)); animation: мерцание 2s ease-in-out infinite; }
.картинка--постер ~ .живое, .картинка--постер .живое { display: none; }

.первый-экран--живая-обложка .живое { top: 4.25em; left: auto; right: 1.25em; }
@media (min-width: 900px) {

  .первый-экран--живая-обложка .живое { top: 4.75rem; right: 3.5em; }
}

.окно { position: relative; border-radius: var(--радиус-малый); overflow: hidden; background: var(--цвет-фон-карточки); border: 1px solid var(--цвет-линия);
  box-shadow: var(--тень-плиты, var(--тень-глубокая)); animation: дыхание 8s ease-in-out infinite; }
.окно__бар { display: flex; align-items: center; gap: .4em; padding: .5em .8em; border-bottom: 1px solid var(--цвет-линия);
  background: color-mix(in srgb, var(--цвет-текст) 7%, var(--цвет-фон-карточки)); }
.окно__бар i { width: .55em; height: .55em; border-radius: 50%; background: var(--цвет-акцент); opacity: .8; }
.окно__бар i:nth-child(2) { opacity: .5; }  .окно__бар i:nth-child(3) { opacity: .3; }
.окно__адрес { flex: 1; margin-left: .6em; padding: .15em .7em; border-radius: 9em; font-size: var(--кегль-мелкий); color: var(--цвет-текст-мягкий); background: var(--цвет-фон); }
.картинка--мокап img { aspect-ratio: 16 / 10; object-position: 50% 0; }

.картинка--мокап .плей { left: 1.125rem; bottom: 1rem; top: auto; translate: none; }
.картинка--мокап .рамка-телефона__подпись { color: var(--цвет-тёмный-текст); left: 5.5rem; right: 1rem; bottom: 1.375rem;
  display: flex; align-items: center; justify-content: space-between; gap: .6em; font-size: var(--кегль-мелкий); }

.шкала { flex: 1; max-width: 16em; height: 3px; border-radius: 3px; overflow: hidden;
  background: color-mix(in srgb, var(--цвет-тёмный-текст) 20%, transparent); }
.шкала i { display: block; height: 100%; width: 38%;
  background: linear-gradient(90deg, var(--цвет-акцент-яркий, var(--цвет-акцент)), var(--цвет-тёплый, var(--цвет-акцент-тёмный))); }
.картинка--мокап .бейдж.картинка__бейдж { top: auto; }
.картинка--мокап .бейдж.картинка__бейдж:nth-of-type(1) { top: 13%; left: -1.4em; }
.картинка--мокап .бейдж.картинка__бейдж:nth-of-type(2) { top: 36%; right: -1.6em; bottom: auto; }
.бегущая-строка { overflow: hidden; margin-top: var(--отступ-блока); font-size: var(--кегль-мелкий); letter-spacing: var(--разрядка-кикера);
  mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); }
.бегущая-строка__лента { display: flex; width: max-content; animation: бег 26s linear infinite; }
.бегущая-строка__лента span { padding-right: 2.5em; white-space: nowrap; }
.бегущая-строка__лента span::after { content: "·"; margin-left: 2.5em; color: var(--цвет-акцент); }

.картинка--товар { width: min(60%, 16em); margin-inline: auto; text-align: center; }
.картинка__бейдж { margin: .6em .3em 0 0; background: var(--цвет-фон-карточки); box-shadow: var(--тень); }

.первый-экран--товар-крупно .рамка-телефона__экран::before { width: 6em; height: 1.625em; border-radius: .875em; top: .625em; }
.первый-экран--товар-крупно .плей { left: 50%; top: 60%; translate: -50% -50%; }

.первый-экран--товар-крупно .список-иконок { display: none; }

.картинка--мозаика, .ряд-роликов { overflow: hidden; }
.ряд-роликов__лента { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--отступ-блока); }
.ряд-роликов .рамка-телефона--дубль, .ряд-роликов .рамка-телефона:nth-child(n + 5) { display: none; }

.тёмный .бенто__ячейка:not(.светлый) { background: color-mix(in srgb, var(--цвет-тёмный-текст) 6%, transparent);
  border-color: color-mix(in srgb, var(--цвет-тёмный-текст) 14%, transparent);
  color: var(--текст-ключа, var(--цвет-тёмный-текст)); }
.бенто { display: grid; gap: var(--отступ-блока); }
.бенто__ячейка--главная { padding: var(--отступ-блока); }  .бенто__ячейка--главная h1 { font-size: calc(var(--кегль-h1) * .8); }

.бенто .первый-экран__картинка { padding: 0; overflow: hidden; aspect-ratio: 4 / 3; margin-top: 0; }
.бенто .цифры { display: contents; }  .бенто .цифра { position: relative; padding: var(--отступ-блока); border-left: 0; }

.бенто .цифра__значение { color: var(--цвет-акцент); font-size: calc(var(--кегль-цифра) * 1.47); }

.бенто__ячейка--кадр { padding: 0; overflow: hidden; min-height: 13.75rem; }
.бенто__ячейка--кадр img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.бенто__ячейка--кадр::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--цвет-тёмный-фон) 55%, transparent), transparent 45%); }

.бенто__ячейка--кадр .плей { right: .75em; bottom: .75em; }
.бенто__ячейка--кадр .чип--ролик { position: absolute; z-index: 2; left: .75em; bottom: .75em; max-width: calc(100% - 5.5em); }
.первый-экран--бенто .список-иконок { margin-bottom: 0; }

.первый-экран--бенто .первый-экран__регалии { display: none; }
@media (min-width: 900px) {
  .первый-экран--бенто .первый-экран__регалии { display: block; position: absolute; left: .75em; right: .75em; bottom: .75em; width: auto; padding: .75em .875em; }
}

@media (max-width: 899px) {

  .первый-экран--товар-крупно .блок__внутри, .первый-экран--афиша-с-экраном .блок__внутри {
    display: flex; flex-direction: column; }

  .первый-экран--товар-крупно .блок__внутри { gap: calc(var(--отступ-блока) * .875); }  .первый-экран--товар-крупно .блок__внутри > *, .первый-экран--товар-крупно .первый-экран__текст > * { margin-block: 0; }
  .первый-экран--товар-крупно .первый-экран__текст, .первый-экран--афиша-с-экраном .первый-экран__текст { display: contents; }
  .первый-экран--товар-крупно .блок__внутри > *, .первый-экран--афиша-с-экраном .блок__внутри > * { position: relative; z-index: 1; }
  .первый-экран--товар-крупно .кикер, .первый-экран--афиша-с-экраном .кикер { order: 1; }
  .первый-экран--товар-крупно h1, .первый-экран--афиша-с-экраном h1 { order: 2; }
  .первый-экран--товар-крупно .лид, .первый-экран--афиша-с-экраном .лид { order: 3; }
  .первый-экран--товар-крупно .первый-экран__действие, .первый-экран--афиша-с-экраном .первый-экран__действие { order: 4; }
  .первый-экран--товар-крупно .первый-экран__когда, .первый-экран--афиша-с-экраном .первый-экран__когда { order: 5; }
  .первый-экран--товар-крупно .первый-экран__доверие, .первый-экран--афиша-с-экраном .первый-экран__доверие { order: 6; }
  .первый-экран--товар-крупно .первый-экран__картинка, .первый-экран--афиша-с-экраном .первый-экран__картинка { order: 7; }
  .первый-экран--товар-крупно .цифры, .первый-экран--афиша-с-экраном .цифры { order: 8; }
}

.первый-экран--афиша-с-экраном .первый-экран__текст, .первый-экран--мозаика-роликов .первый-экран__текст { text-align: center; width: min(100%, calc(var(--ширина-колонки) * 1.96)); margin-inline: auto; }
.первый-экран--афиша-с-экраном .кикер, .первый-экран--мозаика-роликов .кикер, .первый-экран--афиша-с-экраном .первый-экран__действие,
.первый-экран--мозаика-роликов .первый-экран__действие { justify-content: center; }
.первый-экран--афиша-с-экраном .кикер::before, .первый-экран--мозаика-роликов .кикер::before { display: none; }
.первый-экран--афиша-с-экраном .первый-экран__доверие, .первый-экран--мозаика-роликов .первый-экран__доверие,
.первый-экран--афиша-с-экраном .первый-экран__когда, .первый-экран--мозаика-роликов .первый-экран__когда { justify-content: center; }
.первый-экран--афиша-с-экраном h1, .первый-экран--мозаика-роликов h1 { font-size: calc(var(--кегль-h1) * .9); line-height: 1; }
.первый-экран--афиша-с-экраном .лид, .первый-экран--мозаика-роликов .лид { margin-inline: auto; max-width: calc(var(--ширина-колонки) * 1.71); }

.картинка--мокап { width: min(100%, 46em); margin-inline: auto; }

.первый-экран--мозаика-роликов .цифры, .первый-экран--афиша-с-экраном .цифры { display: flex; flex-wrap: wrap; justify-content: center; gap: .3em .45em; margin-top: .6em; }
.первый-экран--мозаика-роликов .цифра, .первый-экран--афиша-с-экраном .цифра { display: inline-flex; align-items: baseline; gap: .35em; flex: none; padding-left: 0; border-left: 0; }
.первый-экран--мозаика-роликов .цифра:not(:first-child)::before, .первый-экран--афиша-с-экраном .цифра:not(:first-child)::before { content: "·"; margin-right: .35em; color: var(--тёплый-ключа, currentColor); }
.первый-экран--мозаика-роликов .цифра__значение, .первый-экран--афиша-с-экраном .цифра__значение { font: 700 1em/1 var(--шрифт-заголовков); color: var(--тёплый-ключа, currentColor); }
.первый-экран--мозаика-роликов .цифра__подпись, .первый-экран--афиша-с-экраном .цифра__подпись { display: inline; margin-top: 0; font-size: 1em; opacity: .85; }

.первый-экран--мозаика-роликов .бегущая-строка, .первый-экран--афиша-с-экраном .бегущая-строка { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; margin-top: 0;
  display: flex; align-items: center; min-height: 2.75rem;
  backdrop-filter: blur(.625rem); -webkit-backdrop-filter: blur(.625rem);
  padding: .5em 0; color: var(--текст-ключа, var(--цвет-тёмный-текст)); background: color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 82%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--тёплый-ключа, var(--цвет-акцент-тёмный)) 25%, transparent); }
.первый-экран--мозаика-роликов .плей { right: .75em; top: 40%; }

.рамка-телефона__подпись .живое { position: static; display: flex; width: fit-content; margin-bottom: .4em; }
.картинка--постер .рамка-телефона__подпись .живое { display: none; }

.первый-экран--мозаика-роликов .рамка-телефона__подпись { bottom: 2.9em; }

.первый-экран--орбита .черта, .первый-экран--живой-портрет .черта { display: block; width: 4em; height: .1875em; border-radius: .1875em;
  background: var(--тёплый-ключа, var(--цвет-акцент-тёмный)); margin: .35em 0 .9em; }

.первый-экран--орбита h1 .хвост, .первый-экран--живой-портрет h1 .хвост { font-size: .64em; margin-top: .57em; }
.первый-экран--орбита h1 .делитель, .первый-экран--живой-портрет h1 .делитель { display: none; }

.орбита__сцена { position: relative; min-height: 27.5em; overflow: hidden; margin: .25em calc(-1 * var(--отступ-блока)) 0;
  mask-image: linear-gradient(to bottom, black 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 78%, transparent 100%); }
.орбита__сцена .первый-экран__картинка { position: absolute; left: 50%; translate: -50% 0;
  --кадр-выреза: calc(24.32% / var(--голова-в-кадре, .152));
  height: var(--кадр-выреза); top: calc(11.34% - var(--макушка-в-кадре, .063) * var(--кадр-выреза) * 3 / 4 * 3 / 2);
  width: auto; aspect-ratio: 3 / 4; margin: 0; }
.орбита__сцена .спутник { position: absolute; width: 15rem; }
.орбита__сцена .с1 { left: 0; top: 50%; }  .орбита__сцена .с3 { right: 0; top: 72%; }
.орбита__сцена .с2, .орбита__сцена .с4 { display: none; }

.первый-экран--живой-портрет .орбита__сцена {
  mask-image: linear-gradient(to bottom, black 62%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 62%, transparent 100%); }

.первый-экран--живой-портрет .орбита__сцена .первый-экран__картинка {
  --кадр-выреза: calc(29.382% / var(--голова-в-кадре, .249));
  height: var(--кадр-выреза); top: calc(5.074% - var(--макушка-в-кадре, .043) * var(--кадр-выреза)); }
.первый-экран--живой-портрет .орбита__сцена .с1 { top: 63%; }  .первый-экран--живой-портрет .орбита__сцена .с3 { top: 80%; }
.первый-экран--живой-портрет .орбита__сцена .живое { position: absolute; z-index: 2; left: 1em; top: .875em; }
@media (max-width: 899px) {

  .первый-экран--орбита .блок__внутри { display: flex; flex-direction: column; gap: calc(var(--отступ-блока) * .875); }  .первый-экран--орбита .блок__внутри > *, .первый-экран--орбита .первый-экран__текст > * { margin-block: 0; }
  .первый-экран--орбита .первый-экран__текст { display: contents; }
  .первый-экран--орбита .кикер { order: 1; }  .первый-экран--орбита h1 { order: 2; }  .первый-экран--орбита .черта { order: 3; }
  .первый-экран--орбита .лид { order: 4; }  .первый-экран--орбита .первый-экран__действие { order: 5; }
  .первый-экран--орбита .первый-экран__доверие, .первый-экран--орбита .первый-экран__когда { order: 6; }
  .первый-экран--орбита .орбита__сцена { order: 7; }
  .первый-экран--орбита .цифры { order: 8; margin-top: .6em; }

  .первый-экран--живой-портрет .блок__внутри { display: flex; flex-direction: column; gap: calc(var(--отступ-блока) * .875); }  .первый-экран--живой-портрет .блок__внутри > *, .первый-экран--живой-портрет .первый-экран__текст > * { margin-block: 0; }
  .первый-экран--живой-портрет .первый-экран__текст { display: contents; }
  .первый-экран--живой-портрет .кикер { order: 1; }  .первый-экран--живой-портрет h1 { order: 2; }
  .первый-экран--живой-портрет .черта { order: 3; }  .первый-экран--живой-портрет .лид { order: 4; }
  .первый-экран--живой-портрет .первый-экран__действие { order: 5; }
  .первый-экран--живой-портрет .первый-экран__доверие, .первый-экран--живой-портрет .первый-экран__когда { order: 6; }
  .первый-экран--живой-портрет .орбита__сцена { order: 7; }
  .первый-экран--живой-портрет .цифры { order: 8; margin-top: .6em; }

  .орбита__сцена .первый-экран__картинка {
    --кадр-выреза: calc(36.328% / var(--голова-в-кадре, .152));
    height: var(--кадр-выреза); top: calc(5.539% - var(--макушка-в-кадре, .063) * var(--кадр-выреза) * 3 / 4 * 3 / 2); }

  .орбита__сцена .с1 { top: auto; bottom: 11.875rem; left: 0; right: 0; width: auto; }  .орбита__сцена .спутник span span { display: none; }
  .орбита__сцена .спутник b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }  .первый-экран--живой-портрет .орбита__сцена .с1 { bottom: 4.5rem; }

  .первый-экран--живой-портрет .орбита__сцена { min-height: 20.625em; }

  .первый-экран--живой-портрет .орбита__сцена .первый-экран__картинка {
    --кадр-выреза: calc(45% / var(--голова-в-кадре, .249));
    height: var(--кадр-выреза); top: calc(10.148% - var(--макушка-в-кадре, .043) * var(--кадр-выреза)); }
}

.центр__верх { text-align: center; }  .центр__верх .кикер { justify-content: center; }  .центр__верх .кикер::before { display: none; }
.первый-экран--центр .блок__внутри { display: grid; gap: var(--отступ-блока); }
.центр__бок { display: grid; gap: var(--отступ-блока); }

@media (max-width: 899px) {
  .центр__бок { display: contents; }

  .первый-экран--центр .блок__внутри { gap: calc(var(--отступ-блока) * .875); }  .первый-экран--центр .блок__внутри > *, .первый-экран--центр .центр__бок > * { margin-block: 0; }
  .первый-экран--центр .первый-экран__когда { order: 5; }
  .первый-экран--центр .первый-экран__доверие { order: 6; }

  .первый-экран--центр .первый-экран__картинка { order: 7; width: 100%; height: 20.625em; aspect-ratio: auto; overflow: hidden; margin-inline: auto; }
  .первый-экран--центр .первый-экран__картинка img { position: absolute; left: 50%; translate: -50% 0; width: auto; max-width: none;
    --кадр-выреза: calc(41.496% / var(--голова-в-кадре, .152));
    height: var(--кадр-выреза); top: calc(3.899% - var(--макушка-в-кадре, .063) * var(--кадр-выреза)); }
  .первый-экран--центр .с1 { order: 8; }  .первый-экран--центр .с2 { order: 9; }
  .первый-экран--центр .с3 { order: 10; }  .первый-экран--центр .с4 { order: 11; }
  .первый-экран--центр .цифры { order: 12; justify-content: center; margin-top: calc(var(--отступ-блока) * .5); }
}

@media (max-width: 600px) {
  body.с-липкой-кнопкой .блок--первый-экран { padding-bottom: calc(var(--отступ-секции) * .7 + 5em + env(safe-area-inset-bottom)); }

  body.с-липкой-кнопкой .первый-экран--мозаика-роликов .бегущая-строка,
  body.с-липкой-кнопкой .первый-экран--афиша-с-экраном .бегущая-строка { bottom: calc(5em + env(safe-area-inset-bottom)); }

  body.главная-на-виду .липкая-кнопка { transform: translateY(100%); opacity: 0; pointer-events: none; }
  body.панель-с-переходом .липкая-кнопка { transition: transform var(--длительность) var(--плавность), opacity var(--длительность) var(--плавность); }
}

@media (min-width: 900px) {
  .блок--первый-экран .список-иконок { gap: .65em; }
  .первый-экран__действие .кнопка { flex: 0 0 auto; }
  .первый-экран__картинка { margin-top: 0; }
  .сторона--слева .первый-экран__текст { order: 2; }

  .картинка--мокап .плей { top: 46%; bottom: auto; translate: 0 -50%; }
  .картинка--мокап .рамка-телефона__подпись { top: calc(46% + 1rem); bottom: auto; }

  .первый-экран--живая-обложка h1 { font-size: calc(var(--кегль-h1) * .87); }
  .первый-экран--разворот .блок__внутри, .первый-экран--живой-портрет .блок__внутри,
  .первый-экран--товар-крупно .блок__внутри { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: calc(var(--отступ-блока) * 2.5); align-items: center; }
  .первый-экран--живой-портрет .первый-экран__текст { display: block; }
  .первый-экран--товар-крупно .список-иконок { display: grid; }

  .первый-экран--товар-крупно h1 { font-size: calc(var(--кегль-h1) * .9); }
  .первый-экран--товар-крупно .список-иконок { font-size: calc(var(--кегль-текст) * .8); }

  .первый-экран--разворот .список-иконок { font-size: calc(var(--кегль-текст) * .8); }
  .первый-экран--орбита .блок__внутри { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: calc(var(--отступ-блока) * 2.5); align-items: center; }
  .первый-экран--орбита .первый-экран__текст { display: block; }

  .первый-экран--орбита .блок__внутри, .первый-экран--живой-портрет .блок__внутри {
    width: 100%; padding-inline: var(--отступ-секции); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--отступ-блока); align-items: stretch; }
  .первый-экран--орбита .первый-экран__текст, .первый-экран--живой-портрет .первый-экран__текст { align-self: center; }

  .первый-экран--орбита h1 .хвост, .первый-экран--живой-портрет h1 .хвост { display: block; font-size: .52em; margin-top: .4em; line-height: 1.25; }
  .первый-экран--разворот .блок__внутри { align-items: stretch; }

  .первый-экран--разворот .первый-экран__текст { display: grid; align-content: center;
    gap: calc(var(--отступ-блока) * .5625); }
  .первый-экран--разворот .первый-экран__текст > * { margin-block: 0; }
  .первый-экран--разворот .кикер { justify-self: start; }

  .первый-экран--разворот .блок__внутри { width: calc(100% - 2 * var(--отступ-блока));
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }

  .первый-экран--разворот .первый-экран__картинка { order: 0; aspect-ratio: auto; min-height: 100%;
    margin: calc(-.6 * var(--отступ-секции)) calc(-1 * var(--отступ-блока)) calc(-.7 * var(--отступ-секции)) 0; }

  .первый-экран--разворот .первый-экран__картинка.картинка--край img { position: absolute; inset: 0; object-position: 50% 12%;
    mask-image: linear-gradient(to bottom, transparent 0, black 9%, black 82%, transparent 100%),
                linear-gradient(to right, transparent 0, black 16%, black 86%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 9%, black 82%, transparent 100%),
                linear-gradient(to right, transparent 0, black 16%, black 86%, transparent 100%);
    mask-composite: intersect; -webkit-mask-composite: source-in; }

  .первый-экран--разворот .первый-экран__регалии { display: block; position: absolute; z-index: 2; left: -.5em; bottom: 5.5em; width: min(20.625em, 86%); }

  .первый-экран--разворот .чип--ролик { display: inline-flex; position: absolute; z-index: 2; right: 1em; top: 1em;
    width: max-content; max-width: min(24em, calc(100% - 2em)); }

  .сторона--слева.первый-экран--разворот .блок__внутри { grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr); }
  .сторона--слева.первый-экран--разворот .первый-экран__картинка { order: -1; margin: calc(-.6 * var(--отступ-секции)) 0 calc(-.7 * var(--отступ-секции)) calc(-1 * var(--отступ-блока)); }
  .сторона--слева.первый-экран--разворот .первый-экран__регалии { left: auto; right: -.5em; }
  .сторона--слева.первый-экран--разворот .чип--ролик { right: auto; left: 1em; }

  .первый-экран--сцена .блок__внутри, .первый-экран--живая-сцена .блок__внутри, .первый-экран--живая-обложка .блок__внутри { display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, .45fr); }

  .картинка--сцена img, .картинка--видео video, .картинка--видео img, .картинка--видео-с-голосом video, .картинка--видео-с-голосом img { width: 128%; max-width: none; margin-left: 0; }
  .картинка--сцена img { animation: зум 30s ease-in-out infinite alternate; }

  .первый-экран--живая-сцена .картинка--видео-с-голосом video, .первый-экран--живая-сцена .картинка--видео-с-голосом img,
  .первый-экран--живая-обложка .картинка--видео video, .первый-экран--живая-обложка .картинка--видео img { margin-left: 1%; }

  .картинка--сцена::after, .картинка--видео-с-голосом::after { background: linear-gradient(to right, color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 96%, transparent) 0%,
    color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 90%, transparent) 30%, color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 55%, transparent) 43%, transparent 52%); }
  .картинка--видео::after { background: linear-gradient(to right, color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 97%, transparent) 0%,
      color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 90%, transparent) 26%, color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 50%, transparent) 48%,
      color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 8%, transparent) 70%, color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 28%, transparent) 100%),
    linear-gradient(to top, color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 75%, transparent), transparent 40%); }
  .картинка--сцена::before, .картинка--видео::before, .картинка--видео-с-голосом::before {
    background: linear-gradient(to right, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 52%, transparent 66%); }
  .первый-экран--сцена h1 { font-size: clamp(2.75rem, 4vw, 3.625rem); }

  .первый-экран--сцена, .первый-экран--живая-сцена, .первый-экран--живая-обложка { padding-top: calc(var(--отступ-секции) * 1.35); align-items: center; }

  .первый-экран--сцена .первый-экран__доверие, .первый-экран--сцена .первый-экран__когда { margin-top: 1em; }
  .сторона--слева .картинка--сцена img, .сторона--слева .картинка--видео video, .сторона--слева .картинка--видео img,
  .сторона--слева .картинка--видео-с-голосом video, .сторона--слева .картинка--видео-с-голосом img { margin-left: -28%; }

  .сторона--слева.первый-экран--живая-сцена .картинка--видео-с-голосом video, .сторона--слева.первый-экран--живая-сцена .картинка--видео-с-голосом img,
  .сторона--слева.первый-экран--живая-обложка .картинка--видео video, .сторона--слева.первый-экран--живая-обложка .картинка--видео img { margin-left: -29%; }
  .сторона--слева .картинка--сцена::after, .сторона--слева .картинка--видео-с-голосом::after { background: linear-gradient(to left, color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 96%, transparent) 0%,
    color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 90%, transparent) 30%, color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 55%, transparent) 43%, transparent 52%); }
  .сторона--слева .картинка--видео::after { background: linear-gradient(to left, color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 97%, transparent) 0%,
      color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 90%, transparent) 26%, color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 50%, transparent) 48%,
      color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 8%, transparent) 70%, color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 28%, transparent) 100%),
    linear-gradient(to top, color-mix(in srgb, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 75%, transparent), transparent 40%); }
  .сторона--слева .картинка--сцена::before, .сторона--слева .картинка--видео::before, .сторона--слева .картинка--видео-с-голосом::before {
    background: linear-gradient(to left, var(--вуаль-ключа, var(--цвет-тёмный-фон)) 52%, transparent 66%); }
  .сторона--слева.первый-экран--сцена .первый-экран__текст, .сторона--слева.первый-экран--живая-сцена .первый-экран__текст,
  .сторона--слева.первый-экран--живая-обложка .первый-экран__текст { grid-column: 2; }
  .сторона--слева.первый-экран--сцена .первый-экран__регалии, .сторона--слева.первый-экран--живая-сцена .первый-экран__регалии,
  .сторона--слева.первый-экран--живая-обложка .первый-экран__регалии { right: auto; left: 3.5em; }

  .звук-блок { right: 3.5em; top: 5.25rem; bottom: auto; gap: .625em; }
  .звук { height: 3.5rem; padding: 0 1.6em 0 1.25em; letter-spacing: .01em; }
  .звук__почему { font-size: calc(var(--кегль-текст) * .875); white-space: normal; max-width: 17em; text-align: right; border-radius: var(--радиус); align-items: flex-start; }
  .звук__почему::before { margin-top: .35em; flex: none; }
  .звук__почему-длинно { display: inline; }  .звук__почему-коротко { display: none; }
  .сторона--слева .звук-блок { right: auto; left: 3.5em; justify-items: start; }  .сторона--слева .звук__почему { text-align: left; }

  .орбита__сцена { min-height: 0; overflow: visible; mask-image: none; -webkit-mask-image: none; margin: 1.25em 0 0; }

  .орбита__сцена .первый-экран__картинка { left: 54%; bottom: auto;
    --кадр-выреза: calc(45.148% / var(--голова-в-кадре, .152));
    height: var(--кадр-выреза); top: calc(12.4% - var(--макушка-в-кадре, .063) * var(--кадр-выреза) * 3 / 4 * 3 / 2); }
  .орбита__сцена .картинка--вырез img { mask-image: linear-gradient(to bottom, black 48%, transparent 63%);
    -webkit-mask-image: linear-gradient(to bottom, black 48%, transparent 63%); }
  .орбита__сцена .с2, .орбита__сцена .с4 { display: flex; }

  .орбита__сцена .спутник { width: 13.75rem; }
  .орбита__сцена .с1 { left: -2%; top: 12%; }  .орбита__сцена .с2 { right: -2%; top: 6%; }
  .орбита__сцена .с3 { left: -6%; right: auto; top: 58%; }  .орбита__сцена .с4 { right: -4%; top: 64%; }

  .первый-экран--живой-портрет .орбита__сцена { min-height: 0; overflow: visible; mask-image: none; -webkit-mask-image: none; }

  .первый-экран--живой-портрет .орбита__сцена .первый-экран__картинка { left: 54%; bottom: auto;
    --кадр-выреза: calc(35.35% / var(--голова-в-кадре, .249));
    height: var(--кадр-выреза); top: calc(5.375% - var(--макушка-в-кадре, .043) * var(--кадр-выреза)); }
  .первый-экран--живой-портрет .орбита__сцена .картинка--живой-портрет img,
  .первый-экран--живой-портрет .орбита__сцена .картинка--живой-портрет video {
    mask-image: linear-gradient(to bottom, black 56%, transparent 74%);
    -webkit-mask-image: linear-gradient(to bottom, black 56%, transparent 74%); }
  .первый-экран--живой-портрет .орбита__сцена .с1 { left: -4%; top: 10%; }  .первый-экран--живой-портрет .орбита__сцена .с2 { right: -2%; top: 6%; }
  .первый-экран--живой-портрет .орбита__сцена .с3 { left: -6%; top: 58%; }  .первый-экран--живой-портрет .орбита__сцена .с4 { right: -4%; top: 64%; }
  .первый-экран--живой-портрет .орбита__сцена .живое { left: auto; top: -.375em; right: 0; }

  .первый-экран--товар-крупно .блок__внутри { width: 100%; padding-inline: var(--отступ-секции); }
  .первый-экран--товар-крупно .первый-экран__текст { max-width: 32em; }
  .картинка--товар { width: min(100%, 16.5em); }
  .картинка__бейдж { position: absolute; z-index: 2; margin: 0; }

  .картинка__бейдж:nth-of-type(1) { top: 11%; left: -35%; }  .картинка__бейдж:nth-of-type(2) { top: 29%; right: -35%; }
  .картинка__бейдж:nth-of-type(3) { bottom: 32%; left: -26%; }  .картинка__бейдж:nth-of-type(4) { bottom: 14%; right: -35%; }

  .первый-экран--товар-крупно .рамка-телефона__подпись { font-size: calc(var(--кегль-текст) * .75); }

  .бенто { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 14.375rem);
    gap: calc(var(--отступ-блока) * .67); height: calc(100vh - 3.5rem - var(--отступ-секции) * .68); }

  .первый-экран--бенто { padding-bottom: calc(var(--отступ-секции) * .4); }
  .первый-экран--бенто .блок__внутри { width: 100%; padding-top: calc(var(--отступ-секции) * .28); padding-inline: var(--отступ-секции); }
  .бенто__ячейка--главная { grid-column: 1 / 8; grid-row: 1 / 3; padding: calc(var(--отступ-блока) * 1.5); }

  .бенто .первый-экран__картинка { grid-column: 8 / 11; grid-row: 1 / 3; aspect-ratio: auto; }
  .бенто .цифра { grid-column: 11 / 13; }
  .бенто .цифра:nth-child(1) { grid-row: 1; }  .бенто .цифра:nth-child(2) { grid-row: 2; }  .бенто .цифра:nth-child(3) { grid-row: 3; }
  .бенто .цифра__значение { font-size: calc(var(--кегль-цифра) * 1.87); }
  .бенто__ячейка--пункты { grid-column: 1 / 6; grid-row: 3; display: grid; align-content: center; }

  .бенто__ячейка--пункты .список-иконок { grid-template-columns: minmax(0, 1fr); margin: 0; font-size: calc(var(--кегль-текст) * .7); }
  .бенто__ячейка--кадр { grid-column: 6 / 11; grid-row: 3; min-height: 0; }

  .первый-экран--центр { display: grid; min-height: 100svh; max-height: 100svh; }
  .первый-экран--центр .блок__внутри { min-height: 40em; }
  .центр__верх { width: min(100%, calc(var(--ширина-колонки) * 2)); margin-inline: auto; position: relative; z-index: 1; }

  .первый-экран--центр .первый-экран__картинка { position: absolute; z-index: 2; left: 50%; top: 16%; bottom: 0;
    width: auto; height: auto; aspect-ratio: 1.1; translate: -50% 0; margin: 0; overflow: hidden;
    mask-image: linear-gradient(to bottom, black 58%, transparent 96%); -webkit-mask-image: linear-gradient(to bottom, black 58%, transparent 96%); }
  .первый-экран--центр .первый-экран__картинка img { position: absolute; left: 50%; translate: -50% 0; width: auto; max-width: none;
    --кадр-выреза: calc(28.247% / var(--голова-в-кадре, .152));
    height: var(--кадр-выреза); top: calc(9.286% - var(--макушка-в-кадре, .063) * var(--кадр-выреза)); }
  .центр__бок { display: grid; gap: .5em; position: absolute; top: 29%; width: min(29%, 25em); z-index: 3; text-align: left; align-content: start; }
  .центр__бок--лево { left: 0; }

  .центр__бок--право { right: 0; text-align: right; justify-items: end; }
  .центр__бок--право .спутник { text-align: left; }
  .центр__бок--право .цифры, .центр__бок--право .первый-экран__доверие, .центр__бок--право .первый-экран__когда { justify-content: flex-end; }
  .центр__бок .лид { margin: 0; max-width: 22.5em; }
  .центр__бок .первый-экран__действие { margin-top: 0; }

  .ряд-роликов { mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
  .ряд-роликов__лента { display: flex; width: max-content; gap: 0; animation: дрейф-ленты 30s linear infinite; }
  .ряд-роликов:hover .ряд-роликов__лента { animation-play-state: paused; }
  .ряд-роликов .рамка-телефона, .ряд-роликов .рамка-телефона--дубль, .ряд-роликов .рамка-телефона:nth-child(n + 5) { display: block; width: 13em; margin-right: var(--отступ-блока); }
  .ряд-роликов .рамка-телефона:nth-child(even) { transform: translateY(1.2em); }

  .первый-экран--мозаика-роликов, .первый-экран--афиша-с-экраном { height: 100vh; }

  .первый-экран--живой-портрет, .первый-экран--товар-крупно, .первый-экран--бенто,
  .первый-экран--орбита { min-height: 100vh; }

  .первый-экран--живой-портрет .блок__внутри, .первый-экран--товар-крупно .блок__внутри,
  .первый-экран--орбита .блок__внутри { min-height: calc(100vh - 3.5rem - var(--отступ-секции) * .7); }

}

.первый-экран--разворот .пятно--1 { width: 32.5em; height: 32.5em; left: -10em; top: -7.5em; }
.первый-экран--разворот .пятно--2 { width: 40em; height: 40em; right: -7.5em; bottom: -12.5em;
  background: var(--цвет-фон-2); animation-duration: 34s; animation-delay: -12s; }
.сторона--слева.первый-экран--разворот .пятно--1 { left: auto; right: -10em; }
.сторона--слева.первый-экран--разворот .пятно--2 { right: auto; left: -7.5em; }

.первый-экран--разворот .чип--ролик b { font-family: var(--шрифт-заголовков); }

@media (prefers-reduced-motion: reduce) {
  .опора, .кольцо, .окно, .бегущая-строка__лента, .ряд-роликов__лента, .картинка--сцена img,
  .живое::before, .звук, .звук__почему::before { animation: none; }
  .звук { transition: none; }  .звук:hover { transform: none; }

  .картинка--видео-с-голосом video, .звук-блок { display: none; }  .картинка--видео-с-голосом img { display: block; }

  body.панель-с-переходом .липкая-кнопка { transition: none; }
}

/* экран 02 */
#экран-02.светлый .кикер { width: fit-content; align-self: flex-start; justify-self: start; }
#экран-02.тёмный .кикер { color: color-mix(in srgb, var(--цвет-тёплый) 78%, var(--цвет-тёмный-текст)); }
#экран-02 .письмо { max-width: 52rem; margin-inline: auto; }
#экран-02 .письмо__шапка { display: grid; gap: .875rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
#экран-02 .письмо__шапка > * { margin: 0; }
#экран-02 .письмо__список { list-style: none; margin: 0; padding: 0; }
#экран-02 .письмо__строка { display: grid; gap: .5rem; padding-block: clamp(1.25rem, 2.6vw, 1.875rem); border-top: 1px solid var(--цвет-линия); }
#экран-02 .письмо__строка:last-child { border-bottom: 1px solid var(--цвет-линия); }
#экран-02 .письмо__имя { margin: 0; font-weight: 600;
  font-size: var(--кегль-лид); line-height: 1.3; letter-spacing: -0.01em; }
#экран-02 .письмо__пояснение { margin: 0; font-size: var(--кегль-текст); line-height: 1.6; }
@media (min-width: 900px) {
  #экран-02 .письмо__строка { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 3rem; align-items: baseline; }
  #экран-02 .письмо__строка--одна { grid-template-columns: minmax(0, 1fr); }
}
#экран-02.светлый .письмо__имя { color: var(--цвет-текст); }
#экран-02.тёмный .письмо__имя { color: var(--текст-ключа, var(--цвет-тёмный-текст)); }
#экран-02.светлый .письмо__пояснение { color: var(--цвет-текст-мягкий); }
#экран-02.тёмный .письмо__пояснение { color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 75%, transparent); }
#экран-02.светлый .письмо__строка { border-color: var(--цвет-линия); }
#экран-02.тёмный .письмо__строка { border-color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 22%, transparent); }

/* экран 04 */
#экран-04 { background: radial-gradient(60% 50% at 82% 12%, color-mix(in srgb, var(--цвет-акцент) 22%, transparent), transparent 70%), linear-gradient(160deg, var(--цвет-тёмный-фон) 0%, var(--цвет-тёмный-фон-3) 38%, var(--цвет-тёмный-фон-2) 72%, color-mix(in srgb, var(--цвет-тёмный-фон-2) 80%, var(--цвет-акцент-тёмный)) 100%) !important; }
@supports not (color: color-mix(in srgb, red, blue)) { #экран-04 { background: linear-gradient(160deg, var(--цвет-тёмный-фон) 0%, var(--цвет-тёмный-фон-3) 38%, var(--цвет-тёмный-фон-2) 100%) !important; } }
#экран-04 .кикер { width: fit-content; align-self: flex-start; justify-self: start; }
#экран-04.тёмный .кикер { color: color-mix(in srgb, var(--цвет-тёплый) 78%, var(--цвет-тёмный-текст)); }
#экран-04 .дорога { max-width: 56rem; margin-inline: auto; }
#экран-04 .дорога__шапка { display: grid; gap: .875rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
#экран-04 .дорога__шапка > * { margin: 0; }
#экран-04 .дорога__шаги { list-style: none; margin: 0; padding: 0; counter-reset: шаг; display: grid; gap: 1.25rem; position: relative; }
#экран-04 .шаг { counter-increment: шаг; position: relative; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 1rem; min-width: 0; }
#экран-04 .шаг::before { content: ""; position: absolute; left: 1.375rem; top: 2.75rem; bottom: -1.25rem; width: 1px; }
#экран-04 .шаг:last-child::before { display: none; }
#экран-04 .шаг__номер { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: var(--кегль-текст); border: 1px solid transparent; }
#экран-04 .шаг__номер::before { content: counter(шаг); }
#экран-04 .шаг__карточка { min-width: 0; display: grid; gap: .75rem; padding: 1.25rem 1.25rem 1.5rem; border: 1px solid transparent; border-radius: var(--радиус-карточки, var(--радиус)); box-shadow: var(--тень); }
#экран-04 .шаг__имя { margin: 0; font-weight: 600; font-size: var(--кегль-лид); line-height: 1.3; letter-spacing: -0.01em; }
#экран-04 .шаг__текст { margin: 0; font-size: var(--кегль-текст); line-height: 1.6; }
#экран-04 .шаг__картинка { width: 4.5rem; height: 4.5rem; max-width: 100%; overflow: hidden; border-radius: var(--радиус-малый); }
#экран-04 .шаг__картинка .заглушка-картинки { width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; }
#экран-04 .врезка { margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 1.25rem 1.25rem 1.25rem 1.5rem; border: 1px solid transparent; border-left-width: 3px; border-radius: var(--радиус-карточки, var(--радиус)); font-size: var(--кегль-лид); line-height: 1.5; font-weight: 600; }
@media (min-width: 900px) {
  #экран-04 .шаг { grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 1.75rem; }
  #экран-04 .шаг::before { left: 1.75rem; top: 3.5rem; }
  #экран-04 .шаг__номер { width: 3.5rem; height: 3.5rem; }
  #экран-04 .шаг__карточка { grid-template-columns: minmax(0, 1fr) 9rem; column-gap: 2rem; align-items: start; padding: 1.75rem 2rem; }
  #экран-04 .шаг__картинка { grid-column: 2; grid-row: 1 / span 2; width: 5.5rem; height: 5.5rem; }
  #экран-04 .шаг__имя, #экран-04 .шаг__текст { grid-column: 1; }
  #экран-04 .врезка { margin-left: 5.25rem; padding: 1.5rem 2rem; }
}
#экран-04.светлый .шаг::before { background: var(--цвет-линия); }
#экран-04.тёмный .шаг::before { background: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 22%, transparent); }
#экран-04.светлый .шаг__номер { background: var(--цвет-акцент); color: var(--цвет-фон); }
#экран-04.тёмный .шаг__номер { background: var(--цвет-акцент); color: var(--цвет-тёмный-фон); }
#экран-04.светлый .шаг__карточка { background: var(--цвет-фон-карточки); border-color: var(--цвет-линия); }
#экран-04.тёмный .шаг__карточка { background: var(--цвет-тёмный-фон-2, var(--цвет-тёмный-фон)); border-color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 22%, transparent); }
#экран-04.светлый .шаг__имя { color: var(--цвет-текст); }
#экран-04.тёмный .шаг__имя { color: var(--текст-ключа, var(--цвет-тёмный-текст)); }
#экран-04.светлый .шаг__текст { color: var(--цвет-текст-мягкий); }
#экран-04.тёмный .шаг__текст { color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 75%, transparent); }
#экран-04.светлый .врезка { background: var(--цвет-фон-карточки); border-color: var(--цвет-линия); border-left-color: var(--цвет-акцент); color: var(--цвет-текст); }
#экран-04.тёмный .врезка { background: var(--цвет-тёмный-фон-2, var(--цвет-тёмный-фон)); border-color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 22%, transparent); border-left-color: var(--цвет-акцент); color: var(--текст-ключа, var(--цвет-тёмный-текст)); }
#экран-04 .шаг__карточка { position: relative; }
#экран-04 .шаг__картинка { position: static; width: 12rem; max-width: 100%; height: 9rem; overflow: visible; border-radius: 0; margin: -.25rem 0 .25rem -.5rem; }
#экран-04 .шаг__картинка img { object-fit: contain; object-position: left center; }
@media (min-width: 900px) {
  #экран-04 .шаг__картинка { position: static; grid-column: 2; grid-row: 1 / span 2; width: 13rem; height: 9.75rem; align-self: center; justify-self: end; margin: 0 -.5rem 0 0; }
  #экран-04 .шаг__картинка img { object-position: right center; }
  #экран-04 .шаг__карточка { grid-template-columns: minmax(0, 1fr) 13rem; }
}

#экран-04 details.шаг__карточка { display: block; padding: 0; }
#экран-04 .шаг__шапка { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; min-height: 2.75rem; padding: .875rem 1.25rem; }
#экран-04 .шаг__шапка::-webkit-details-marker { display: none; }
#экран-04 .шаг__шапка::after { content: "+"; font-size: var(--кегль-лид); line-height: 1; font-weight: 400; color: var(--цвет-акцент-тёмный, var(--цвет-акцент)); transition: transform .2s ease; }
#экран-04 details[open] > .шаг__шапка::after { transform: rotate(45deg); }
#экран-04 .шаг__шапка:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: var(--радиус-малый, var(--радиус)); }
#экран-04 .шаг__тело { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; padding: 0 1.25rem 1.25rem; }
#экран-04 .шаг__тело .шаг__текст { grid-column: 1; grid-row: auto; }
#экран-04 .шаг__тело .шаг__картинка { position: static; grid-column: 1; grid-row: auto; width: 7.5rem; height: 5.5rem; margin: 0; overflow: hidden; justify-self: start; align-self: start; }
@media (min-width: 900px) {
  #экран-04 details.шаг__карточка { padding: 0; grid-template-columns: none; }
  #экран-04 .шаг__шапка { min-height: 3.5rem; padding: .875rem 2rem; }
  #экран-04 .шаг__тело { grid-template-columns: minmax(0, 1fr) 9rem; column-gap: 2rem; align-items: center; padding: 0 2rem 1.5rem; }
  #экран-04 .шаг__тело .шаг__текст { grid-column: 1; grid-row: 1; }
  #экран-04 .шаг__тело .шаг__картинка { grid-column: 2; grid-row: 1; width: 9rem; height: 6.5rem; margin: 0; justify-self: end; }
}

/* экран 05 */
#экран-05.тёмный .кикер { color: color-mix(in srgb, var(--цвет-тёплый) 78%, var(--цвет-тёмный-текст)); }
#экран-05 .кикер { width: fit-content; align-self: flex-start; justify-self: start; }
#экран-05 .обо-мне { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 3.5rem); max-width: 62rem; margin-inline: auto; }
#экран-05 .обо-мне__шапка { display: grid; gap: .875rem; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
#экран-05 .обо-мне__шапка > * { margin: 0; }
#экран-05 .обо-мне__рассказ { min-width: 0; }
#экран-05 .обо-мне__группа + .обо-мне__группа { margin-top: clamp(1.25rem, 2.6vw, 1.75rem); padding-top: clamp(1.25rem, 2.6vw, 1.75rem); border-top: 1px solid var(--цвет-линия); }
#экран-05 .обо-мне__абзац { margin: 0 0 1.125rem; font-size: var(--кегль-текст); line-height: 1.65; }
#экран-05 .обо-мне__группа > .обо-мне__абзац:last-child { margin-bottom: 0; }
#экран-05 .обо-мне__группа:first-child > .обо-мне__абзац:first-child { font-size: var(--кегль-лид); line-height: 1.55; }
#экран-05 .обо-мне__бок { display: grid; gap: 1.25rem; min-width: 0; align-content: start; }
#экран-05 .обо-мне__цифры { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
#экран-05 .обо-мне__цифра { min-width: 0; display: grid; gap: .375rem; padding: 1.125rem 1.125rem 1.25rem; border: 1px solid var(--цвет-линия);
  border-radius: var(--радиус-карточки); }
#экран-05 .обо-мне__цифра b { font: 700 var(--кегль-цифра)/1.05 var(--шрифт-заголовков); letter-spacing: -0.02em; overflow-wrap: normal; }
#экран-05 .обо-мне__цифра span { font-size: var(--кегль-мелкий); line-height: 1.35; }
#экран-05 .обо-мне__портрет { margin: 0; min-width: 0; width: 100%; max-width: 27.25rem; aspect-ratio: 4 / 5; background: var(--цвет-фон-2); border-radius: var(--радиус); overflow: hidden; box-shadow: none; border: 0; }
#экран-05 .обо-мне__портрет img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 38% 0; mix-blend-mode: multiply; border-radius: 0; box-shadow: none; border: 0; }
@media (max-width: 899px) {
  #экран-05 .обо-мне__бок { display: contents; }
  #экран-05 .обо-мне__шапка { order: 0; margin-bottom: 0; }
  #экран-05 .обо-мне__портрет { order: 1; justify-self: center; max-width: 22.375rem; aspect-ratio: 358 / 400; }
  #экран-05 .обо-мне__рассказ { order: 2; }
  #экран-05 .обо-мне__цифры { order: 3; }
}
@media (min-width: 900px) {
  #экран-05 .обо-мне { grid-template-columns: minmax(0, 31.25rem) minmax(0, 27.25rem); align-items: start; column-gap: 3.5rem; }
  #экран-05 .обо-мне__шапка { grid-column: 1 / -1; margin-bottom: 0; }
  #экран-05 .обо-мне__бок { position: sticky; top: 2rem; }
}
#экран-05.светлый .обо-мне__абзац { color: var(--цвет-текст); }
#экран-05.тёмный .обо-мне__абзац { color: var(--текст-ключа, var(--цвет-тёмный-текст)); }
#экран-05.тёмный .обо-мне__группа + .обо-мне__группа { border-color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 22%, transparent); }
#экран-05.светлый .обо-мне__цифра { background: var(--цвет-фон-карточки); border-color: var(--цвет-линия); }
#экран-05.тёмный .обо-мне__цифра { background: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 6%, transparent);
  border-color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 22%, transparent); }
#экран-05.светлый .обо-мне__цифра b { color: var(--цвет-акцент); }
#экран-05.тёмный .обо-мне__цифра b { color: var(--цвет-акцент-тёмный); }
#экран-05.светлый .обо-мне__цифра span { color: var(--цвет-текст-мягкий); }
#экран-05.тёмный .обо-мне__цифра span { color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 75%, transparent); }

/* экран 06 */
#экран-06 { background: radial-gradient(60% 50% at 82% 12%, color-mix(in srgb, var(--цвет-акцент) 22%, transparent), transparent 70%), linear-gradient(200deg, var(--цвет-тёмный-фон) 0%, var(--цвет-тёмный-фон-3) 38%, var(--цвет-тёмный-фон-2) 72%, color-mix(in srgb, var(--цвет-тёмный-фон-2) 80%, var(--цвет-акцент-тёмный)) 100%) !important; }
@supports not (color: color-mix(in srgb, red, blue)) { #экран-06 { background: linear-gradient(200deg, var(--цвет-тёмный-фон) 0%, var(--цвет-тёмный-фон-3) 38%, var(--цвет-тёмный-фон-2) 100%) !important; } }
#экран-06.тёмный .кикер { color: color-mix(in srgb, var(--цвет-тёплый) 78%, var(--цвет-тёмный-текст)); }
#экран-06.тёмный .кнопка--главная { outline: 2px solid color-mix(in srgb, var(--цвет-акцент-яркий) 70%, transparent); }
#экран-06 .тарифы { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 2.5rem; align-items: stretch; }
#экран-06 .тариф { min-width: 0; align-content: start; box-shadow: var(--тень); }
#экран-06 .тариф .кнопка { align-self: end; justify-self: stretch; }
#экран-06 .тариф__цена s { display: none; }
#экран-06 .тариф__фото { overflow: hidden; width: 5.5rem; height: 5.5rem; }
#экран-06 .тариф__фото .заглушка-картинки { width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; border-radius: 50%; }
#экран-06 .тариф__состав li:last-child { font-weight: 600; }
#экран-06 .пояснение-цен { margin: 2rem auto 0; max-width: 46rem; text-align: center; }
#экран-06.светлый .тариф--акцент { background: var(--цвет-фон-2); border-width: 2px; }
#экран-06.тёмный .тариф--акцент { background: var(--цвет-тёмный-фон-2); border-width: 2px; }
#экран-06.светлый .пояснение-цен { color: var(--цвет-текст-мягкий); }
#экран-06.тёмный .пояснение-цен { color: var(--цвет-тёмный-текст); opacity: .8; }
@media (min-width: 900px) {
  #экран-06 .тарифы { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; padding-top: 1.5rem; }
  #экран-06 .тариф { padding: 1.875rem 1.625rem; }
  #экран-06 .тариф--акцент { transform: translateY(-1.5rem); padding-top: 2.5rem; padding-bottom: 2.25rem; }
}

/* экран 07 */
#экран-07 .кикер { width: fit-content; align-self: flex-start; justify-self: start; }
#экран-07 .слова { max-width: 62rem; margin-inline: auto; }
#экран-07 .слова__шапка { display: grid; gap: .875rem; max-width: 46rem; margin-bottom: clamp(2rem, 4.5vw, 3.25rem); }
#экран-07 .слова__шапка > * { margin: 0; }
#экран-07 .слова__список { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
#экран-07 .слово { min-width: 0; display: grid; gap: 1.25rem; align-content: start; margin: 0;
  padding: 1.75rem 1.5rem; border: 1px solid transparent; border-radius: var(--радиус); box-shadow: var(--тень); }
#экран-07 .слово__знак { display: block; width: 2.5rem; height: 2px; }
#экран-07 .слово__текст { margin: 0; font-size: var(--кегль-текст); line-height: 1.65; }
#экран-07 .слово__подпись { display: grid; gap: .25rem; margin: 0; padding-top: 1.125rem; border-top: 1px solid transparent; }
#экран-07 .слово__имя { font-weight: 600; font-size: var(--кегль-лид); line-height: 1.3; font-style: normal; }
#экран-07 .слово__источник { font-size: var(--кегль-мелкий); line-height: 1.4; }
@media (max-width: 899px) {
  #экран-07 .слова__список { display: flex; gap: 1rem; align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: .5rem; }
  #экран-07 .слова__список::-webkit-scrollbar { display: none; }
  #экран-07 .слова__список > li { flex: 0 0 85%; min-width: 0; scroll-snap-align: start; display: flex; }
  #экран-07 .слово { width: 100%; }
}
@media (min-width: 900px) {
  #экран-07 .слова__список { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  #экран-07 .слово { padding: 2rem 1.75rem; }
  #экран-07 .слово:nth-child(2) { margin-top: 2.5rem; }
}
#экран-07.светлый .слово { background: var(--цвет-фон-2); border-color: var(--цвет-линия); }
#экран-07.тёмный .слово { background: var(--цвет-тёмный-фон-2); border-color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 22%, transparent); }
#экран-07.светлый .слово__знак { background: var(--цвет-акцент); }
#экран-07.тёмный .слово__знак { background: var(--цвет-акцент-тёмный); }
#экран-07.светлый .слово__текст { color: var(--цвет-текст); }
#экран-07.тёмный .слово__текст { color: var(--текст-ключа, var(--цвет-тёмный-текст)); }
#экран-07.светлый .слово__подпись { border-top-color: var(--цвет-линия); }
#экран-07.тёмный .слово__подпись { border-top-color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 22%, transparent); }
#экран-07.светлый .слово__имя { color: var(--цвет-текст); }
#экран-07.тёмный .слово__имя { color: var(--текст-ключа, var(--цвет-тёмный-текст)); }
#экран-07.светлый .слово__источник { color: var(--цвет-текст-мягкий); }
#экран-07.тёмный .слово__источник { color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 70%, transparent); }

/* экран 08 */
#экран-08 { background: radial-gradient(60% 50% at 82% 12%, color-mix(in srgb, var(--цвет-акцент) 22%, transparent), transparent 70%), linear-gradient(135deg, var(--цвет-тёмный-фон) 0%, var(--цвет-тёмный-фон-3) 38%, var(--цвет-тёмный-фон-2) 72%, color-mix(in srgb, var(--цвет-тёмный-фон-2) 80%, var(--цвет-акцент-тёмный)) 100%) !important; }
@supports not (color: color-mix(in srgb, red, blue)) { #экран-08 { background: linear-gradient(135deg, var(--цвет-тёмный-фон) 0%, var(--цвет-тёмный-фон-3) 38%, var(--цвет-тёмный-фон-2) 100%) !important; } }
#экран-08.тёмный .кикер { color: color-mix(in srgb, var(--цвет-тёплый) 78%, var(--цвет-тёмный-текст)); }
#экран-08.тёмный .кнопка--главная { outline: 2px solid color-mix(in srgb, var(--цвет-акцент-яркий) 70%, transparent); }
#экран-08 .вопросник { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 3.5rem); max-width: 64rem; margin-inline: auto; }
#экран-08 .вопросник__шапка { display: grid; gap: .875rem; margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem); }
#экран-08 .вопросник__шапка > * { margin: 0; }
#экран-08 .вопросник__список { min-width: 0; }
#экран-08 .вопрос { border-top: 1px solid var(--цвет-линия); }
#экран-08 .вопрос:last-child { border-bottom: 1px solid var(--цвет-линия); }
#экран-08 .вопрос summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: baseline;
  padding-block: 1.25rem; font-weight: 600; font-size: var(--кегль-лид); line-height: 1.3; letter-spacing: -0.01em; }
#экран-08 .вопрос summary::-webkit-details-marker { display: none; }
#экран-08 .вопрос summary::after { content: "+"; font-weight: 400; line-height: 1; transition: transform .2s ease; }
#экран-08 .вопрос[open] summary::after { transform: rotate(45deg); }
#экран-08 .вопрос__ответ { margin: 0; padding: 0 2.5rem 1.5rem 0; font-size: var(--кегль-текст); line-height: 1.65; }
#экран-08 .вопрос summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: var(--радиус-малый, var(--радиус)); }
#экран-08 .приглашение { min-width: 0; display: grid; gap: 1rem; align-content: start; padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--цвет-линия); border-radius: var(--радиус); box-shadow: var(--тень); }
#экран-08 .приглашение > * { margin: 0; min-width: 0; }
#экран-08 .приглашение__фото { max-width: 100%; overflow: hidden; border-radius: var(--радиус); }
#экран-08 .приглашение__фото .заглушка-картинки { width: 100%; max-width: 100%; aspect-ratio: 4 / 3; min-height: 0; }
#экран-08 .приглашение__заголовок { font-weight: 600; font-size: var(--кегль-лид); line-height: 1.25; }
#экран-08 .приглашение .кнопка { justify-self: stretch; }
@media (min-width: 900px) {
  #экран-08 .вопросник { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
  #экран-08 .вопросник__шапка { grid-column: 1 / -1; margin-bottom: 0; }
  #экран-08 .приглашение { position: sticky; top: 2rem; }
}
#экран-08.светлый .вопрос { border-color: var(--цвет-линия); }
#экран-08.тёмный .вопрос { border-color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 22%, transparent); }
#экран-08.светлый .вопрос summary { color: var(--цвет-текст); }
#экран-08.тёмный .вопрос summary { color: var(--текст-ключа, var(--цвет-тёмный-текст)); }
#экран-08.светлый .вопрос summary::after { color: var(--цвет-акцент); }
#экран-08.тёмный .вопрос summary::after { color: var(--цвет-тёмный-акцент, var(--цвет-акцент)); }
#экран-08.светлый .вопрос__ответ { color: var(--цвет-текст-мягкий); }
#экран-08.тёмный .вопрос__ответ { color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 78%, transparent); }
#экран-08.светлый .приглашение { background: var(--цвет-фон-2); border-color: var(--цвет-линия); }
#экран-08.тёмный .приглашение { background: var(--цвет-тёмный-фон-2); border-color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 22%, transparent); }
#экран-08.светлый .приглашение__заголовок { color: var(--цвет-текст); }
#экран-08.тёмный .приглашение__заголовок { color: var(--текст-ключа, var(--цвет-тёмный-текст)); }
#экран-08.светлый .приглашение__текст { color: var(--цвет-текст-мягкий); }
#экран-08.тёмный .приглашение__текст { color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 78%, transparent); }

/* экран 09 */
#экран-09 .конверт { max-width: 62rem; margin-inline: auto; display: grid; gap: 1.25rem; justify-items: start; }
#экран-09 .конверт > * { max-width: 44rem; }
#экран-09 .конверт > * { margin: 0; }
#экран-09 .конверт__линия { width: 100%; height: var(--нить); border: 0; margin: 0 0 .5rem; }
#экран-09 .конверт__лид { font-size: var(--кегль-лид); line-height: 1.6; max-width: 34rem; }
#экран-09 .конверт__действие { display: grid; gap: .875rem; justify-items: start; margin-top: .75rem; padding-top: 1.75rem; width: 100%; border-top: 1px solid var(--цвет-линия); }
#экран-09 .конверт__подпись { font-size: var(--кегль-мелкий); line-height: 1.6; max-width: 34rem; }
@media (min-width: 900px) {
  #экран-09 .конверт { margin-inline: auto; max-width: 62rem; }
  #экран-09 .конверт__действие { grid-template-columns: auto minmax(0, 1fr); column-gap: 2rem; align-items: center; }
}
#экран-09.светлый .конверт__линия { background: var(--цвет-акцент); }
#экран-09.тёмный .конверт__линия { background: var(--цвет-акцент-яркий); }
#экран-09.светлый .конверт__лид { color: var(--цвет-текст); }
#экран-09.тёмный .конверт__лид { color: var(--текст-ключа, var(--цвет-тёмный-текст)); }
#экран-09.светлый .конверт__подпись { color: var(--цвет-текст-мягкий); }
#экран-09.тёмный .конверт__подпись { color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 75%, transparent); }
#экран-09.светлый .конверт__действие { border-color: var(--цвет-линия); }
#экран-09.тёмный .конверт__действие { border-color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) 22%, transparent); }

/* экран 10 */
#экран-10 { background: radial-gradient(60% 50% at 82% 12%, color-mix(in srgb, var(--цвет-акцент) 22%, transparent), transparent 70%), linear-gradient(170deg, var(--цвет-тёмный-фон) 0%, var(--цвет-тёмный-фон-3) 38%, var(--цвет-тёмный-фон-2) 72%, color-mix(in srgb, var(--цвет-тёмный-фон-2) 80%, var(--цвет-акцент-тёмный)) 100%) !important; }

@supports not (color: color-mix(in srgb, red, blue)) {
  #экран-10 { background: linear-gradient(170deg, var(--цвет-тёмный-фон) 0%, var(--цвет-тёмный-фон-3) 38%, var(--цвет-тёмный-фон-2) 100%) !important; }
  #экран-10 #выбор-связи::backdrop { background: var(--цвет-тёмный-фон); opacity: .72; }
}
#экран-10 { padding-block: clamp(1.75rem, 4vw, 2.5rem); }
#экран-10.светлый { background: var(--цвет-фон); color: var(--цвет-текст); }
#экран-10.тёмный { background: var(--цвет-тёмный-фон); color: var(--цвет-тёмный-текст); }
#экран-10 .блок__внутри { border-top: 0; padding-top: 0; }
#экран-10 .подвал { display: grid; gap: .5rem; max-width: 62rem; margin-inline: auto; padding-top: clamp(1.25rem, 3vw, 1.75rem); border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); font-size: var(--кегль-мелкий); line-height: 1.6; }
#экран-10 .подвал > * { margin: 0; }
#экран-10 .подвал__имя { font-weight: 600; font-size: var(--кегль-текст); }
#экран-10 .подвал__имя { color: inherit; }
#экран-10 .подвал__строка { color: inherit; opacity: .72; }
#экран-10 .подвал a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
@media (min-width: 900px) {
  #экран-10 .подвал { grid-template-columns: 1fr auto; align-items: end; column-gap: 2rem; }
  #экран-10 .подвал__право { text-align: right; }
}

#экран-10 #выбор-связи { border: 0; padding: 0; background: transparent; max-width: min(24rem, calc(100vw - 2rem)); width: 100%; color: var(--цвет-текст); }
#экран-10 #выбор-связи::backdrop { background: color-mix(in srgb, var(--цвет-тёмный-фон) 72%, transparent); }
#экран-10 #выбор-связи .выбор__карточка { display: grid; gap: .875rem; padding: 1.5rem; background: var(--цвет-фон); border-radius: var(--радиус-карточки); text-align: center; }
#экран-10 #выбор-связи .выбор__заголовок { margin: 0; color: var(--цвет-текст); font: 700 1.25rem/1.25 var(--шрифт-заголовков); }
#экран-10 #выбор-связи .выбор__пояснение { margin: 0; font-size: var(--кегль-мелкий); color: var(--цвет-текст-мягкий); }
#экран-10 #выбор-связи .кнопка { box-shadow: none; animation: none; opacity: 1; color: var(--цвет-на-акценте); width: 100%; justify-content: center; text-align: center; }
#экран-10 #выбор-связи .кнопка.выбор__вторая { background: transparent; color: var(--цвет-текст); border: 2px solid var(--цвет-акцент); box-shadow: none; animation: none; }
#экран-10 #выбор-связи .выбор__закрыть { background: none; border: 0; font: inherit; font-size: var(--кегль-мелкий); color: var(--цвет-текст-мягкий); cursor: pointer; text-decoration: underline; padding: .25rem; }