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(--цвет-текст-мягкий); }
.блок{ 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; }
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{ color: var(--текст-ключа, var(--цвет-тёмный-текст)); }
.тёмный .лид,.тёмный .вопрос > p,.тёмный .фото figcaption{ color: color-mix(in srgb, var(--текст-ключа, var(--цвет-тёмный-текст)) var(--мягкость-текста, 72%), transparent); }
.тёмный a:not(.кнопка){ color: var(--цвет-тёмный-текст); text-decoration-color: 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: var(--цвет-кнопки, var(--цвет-акцент)); color: var(--цвет-на-кнопке, var(--цвет-на-акценте));
  border-color: color-mix(in srgb, var(--цвет-тёмный-текст) 30%, transparent); }
.тёмный .кнопка--главная:hover{ background: var(--цвет-кнопки-навёл, var(--цвет-акцент-тёмный)); }
.кнопка: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(--цвет-тёмный-текст); }
.кикер{ max-width: 100%; }
@media (max-width: 899px){.кикер{ white-space: normal; line-height: 1.25; }}
.кикер .иконка,.кикер 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(--цвет-акцент-тёмный)); }
.шапка{ 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; }
@media (max-width: 899px){.шапка:has(.шапка__меню) .шапка__лиц{ display: none !important; }}
.тёмный .шапка{ background: transparent; border-bottom-color: transparent; color: var(--цвет-тёмный-текст); }
.карточки{ display: grid; gap: var(--отступ-блока); }
.карточки{ margin-top: var(--отступ-блока); padding: 0; list-style: none; }
.фото{ margin: 0; border-radius: var(--радиус); overflow: hidden; box-shadow: var(--тень); }
.фото img{ display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.фото figcaption{ padding: .7em 1em; font-size: var(--кегль-мелкий); color: var(--цвет-текст-мягкий); }
.иконка{ width: 1.5em; height: 1.5em; flex: none; color: var(--цвет-акцент); vertical-align: middle; }
.иконка svg{ display: block; width: 100%; height: 100%; }
.цитата{ 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; }
.вопрос{ 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); }
.тёмный .вопрос,.тёмный .вопрос > summary::after{ border-color: color-mix(in srgb, var(--цвет-тёмный-текст) 14%, transparent); }
.фон--пятна::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%); }
.блок--подвал{ 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)); }
body.с-липкой-кнопкой:has(> section.блок:last-of-type.тёмный){ background: var(--цвет-тёмный-фон); }
body.с-липкой-кнопкой:has(> section.блок:last-of-type.тёмный.второй){ background: var(--цвет-тёмный-фон-2, var(--цвет-тёмный-фон)); }}
@media (min-width: 600px){.карточки{ grid-template-columns: repeat(2, minmax(0, 1fr)); }}
@media (min-width: 900px){.карточки{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.шапка{ padding: 0 3.5em; gap: .75em; }
.шапка__лого{ font-size: 1em; gap: .625em; }
.шапка__лого img{ width: 2em; height: 2em; }
.шапка__лиц{ max-width: none; }}


@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){.кнопка{ transition: none; }
.кнопка--главная:hover{ transform: none; }
.первый-экран__действие .кнопка--главная,.липкая-кнопка .кнопка--главная{ animation: none; }
.вопрос > summary::after{ transition: none; }
.фон--пятна::before,.фон--пятна::after{ animation: none; }}
.блок--тихо{ padding-block: var(--отступ-секции-тихо, calc(var(--отступ-секции) * .78)); }
.блок--громко{ padding-block: var(--отступ-секции-громко, calc(var(--отступ-секции) * 1.16)); }
.черта{ width: 2.75rem; height: 3px; border-radius: 3px; }
.светлый .черта{ background: var(--цвет-тёплый-тёмный, var(--цвет-акцент-тёмный)); }
.тёмный .черта{ background: var(--тёплый-ключа, var(--цвет-акцент-тёмный)); }
.тариф{ position: relative; display: grid; gap: 1rem; padding: 1.625rem 1.5rem;
  border-radius: var(--радиус-карточки, var(--радиус)); }
.тариф > *{ margin-bottom: 0; }
.тариф .кнопка{ margin-top: .25rem; }
.светлый .тариф{ 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); }
.тёмный .тариф{ 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(--тень-глубокая); }
.вопросы{ display: grid; gap: .75rem; }
.вопросы .вопрос{ padding: 0; border-radius: var(--радиус-модуля, var(--радиус)); overflow: hidden; }
.вопросы .вопрос > summary::after{ display: none; }
.светлый .вопросы .вопрос{ background: var(--цвет-фон-карточки); border: 1px solid var(--цвет-линия); }
.тёмный .вопросы .вопрос{ background: color-mix(in srgb, var(--цвет-тёмный-фон) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--цвет-тёплый, var(--цвет-акцент-тёмный)) 20%, 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(--цвет-акцент-тёмный)); }
.тариф{
  border-block-start: 1px solid var(--кромка-плиты, transparent); }
@media (min-width: 900px){.условия li{ font-size: calc(var(--кегль-мелкий) * 1.12); }}
.светлый.блок--прайс-лист{ background: linear-gradient(180deg, var(--фон-ключа, var(--цвет-фон)), var(--фон-2-ключа, var(--цвет-фон-2))); }
.блок--подвал{ 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: .5rem; }
.блок--подвал h4{ font-family: var(--шрифт-заголовков); font-weight: 600; letter-spacing: .03em;
  font-size: calc(var(--кегль-мелкий) * .93); margin-bottom: .625rem; }
.блок--подвал a{ color: inherit; text-decoration: none; }
.блок--подвал a:hover{ text-decoration: underline; }
.светлый.блок--подвал p,.светлый.блок--подвал a{ color: var(--цвет-текст-мягкий); }
.светлый.блок--подвал h4{ color: 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); }
.тёмный .подвал__ссылки a:hover{ color: var(--тёплый-ключа, var(--цвет-акцент-тёмный)); }
@media (min-width: 900px){.блок--подвал{ padding-block: 3.25rem 1.75rem; }}


@keyframes зум-финала { from { scale: 1.04; } to { scale: 1; } }
.блок--первый-экран{ 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); }
.блок--первый-экран .кикер{ margin-bottom: calc(var(--отступ-блока) * .6); }
.блок--первый-экран h1{ margin-bottom: .35em; text-wrap: balance; overflow-wrap: normal; word-break: normal; }
.блок--первый-экран .лид{ line-height: 1.4; margin-bottom: .9em; }
.первый-экран__действие{ 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; }}
.первый-экран__картинка{ margin-top: var(--отступ-блока); }
@media (max-width: 600px){body.с-липкой-кнопкой .блок--первый-экран{ padding-bottom: calc(var(--отступ-секции) * .7 + 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){.первый-экран__действие .кнопка{ flex: 0 0 auto; }
.первый-экран__картинка{ margin-top: 0; }}
@media (prefers-reduced-motion: reduce){body.панель-с-переходом .липкая-кнопка{ transition: none; }}
#экран-01{ --ночь: var(--цвет-тёмный-фон); --ночь-2: var(--цвет-тёмный-фон-2); --ночь-карта: var(--цвет-тёмный-фон-4);
      --ночь-линия: color-mix(in srgb, var(--цвет-тёмный-текст) 14%, var(--цвет-тёмный-фон));
      --бордо: var(--цвет-акцент-яркий); --бордо-свет: color-mix(in oklch, var(--цвет-акцент-яркий) 72%, var(--цвет-тёмный-текст));
      --золото: var(--цвет-тёплый-мягкий); --белый: var(--цвет-тёмный-текст);
      --серый: color-mix(in srgb, var(--цвет-тёмный-текст) 76%, var(--цвет-тёмный-фон));
      --серый-тихий: color-mix(in srgb, var(--цвет-тёмный-текст) 56%, var(--цвет-тёмный-фон));
      background:
        radial-gradient(60% 70% at 85% 10%, color-mix(in srgb, var(--цвет-акцент) 38%, transparent), transparent 70%),
        radial-gradient(50% 60% at 0% 100%, color-mix(in srgb, var(--цвет-акцент) 22%, transparent), transparent 70%),
        linear-gradient(160deg, var(--ночь-2), var(--ночь) 60%);
      color: var(--белый); position: relative; overflow: hidden; padding: 0 0 clamp(48px, 6vw, 90px); }
#экран-01::before{ content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
      background-image: linear-gradient(color-mix(in srgb, var(--белый) 4%, transparent) 1px, transparent 1px),
                        linear-gradient(90deg, color-mix(in srgb, var(--белый) 4%, transparent) 1px, transparent 1px);
      background-size: 64px 64px; }
#экран-01 > *{ position: relative; }
#экран-01 .шапка{ display: flex; justify-content: space-between; align-items: center; gap: 16px;
      max-width: var(--ширина); margin: 0 auto; padding: 18px 20px; border-bottom: 1px solid var(--ночь-линия); }
#экран-01 .шапка__лого{ font: 800 17px/1.2 var(--шрифт-заголовков); color: var(--белый); text-decoration: none; }
#экран-01 .шапка__лого b{ color: var(--бордо-свет); font-weight: 800; }
#экран-01 .шапка__лиц{ display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--серый); }
#экран-01 .шапка__лиц .иконка{ width: 16px; height: 16px; color: var(--золото); }
#экран-01 .афиша{ display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px);
      align-items: center; max-width: var(--ширина); margin: 0 auto; padding: clamp(40px, 6vw, 88px) 20px 0; }
#экран-01 .афиша__текст > *{ margin: 0; }
#экран-01 .кикер-афиши{ display: flex; align-items: center; gap: 12px; font: 800 16px/1.3 var(--шрифт-заголовков);
      letter-spacing: .18em; text-transform: uppercase; color: var(--золото); margin-bottom: 18px; }
#экран-01 .кикер-афиши::before{ content: ""; width: 26px; height: 2px; background: var(--бордо-свет); flex: none; }
#экран-01 h1{ margin: 0; color: var(--белый); text-wrap: balance; }
#экран-01 .h1-верх{ display: block; font-size: clamp(20px, 2.1vw, 28px); font-weight: 700; line-height: 1.2; color: var(--серый); margin-bottom: 10px; }
#экран-01 .h1-крупно{ display: block; font-size: clamp(38px, 5.4vw, 74px); font-weight: 900; line-height: .98;
      text-transform: uppercase; letter-spacing: -.01em; }
#экран-01 .h1-крупно em{ font-style: normal; color: var(--бордо-свет); }
#экран-01 .черта{ width: 64px; height: 4px; border-radius: 2px; margin: 24px 0 22px;
      background: linear-gradient(90deg, var(--бордо-свет), var(--золото)); }
#экран-01 .лид-афиши{ font: 700 clamp(18px, 1.6vw, 22px)/1.4 var(--шрифт-заголовков); color: color-mix(in srgb, var(--цвет-тёмный-текст) 92%, var(--цвет-тёмный-фон)); max-width: 34rem; }
#экран-01 .лид-афиши em{ font-style: normal; color: var(--бордо-свет); }
#экран-01 .цифры-афиши{ display: flex; flex-wrap: wrap; gap: 0; margin: 30px 0 32px; padding: 0; list-style: none; }
#экран-01 .цифры-афиши li{ padding: 0 22px; border-left: 1px solid var(--ночь-линия); }
#экран-01 .цифры-афиши li:first-child{ padding-left: 0; border-left: 0; }
#экран-01 .цифры-афиши b{ display: block; font: 900 clamp(28px, 2.8vw, 38px)/1.05 var(--шрифт-заголовков); color: var(--белый); white-space: nowrap; }
#экран-01 .цифры-афиши li:last-child b{ color: var(--бордо-свет); }
#экран-01 .цифры-афиши span{ display: block; margin-top: 6px; font-size: 14px; line-height: 1.35; color: var(--серый); }
#экран-01 .кнопки-афиши{ display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
#экран-01 .кнопки-афиши .кнопка{ border-radius: 999px; padding: 18px 34px; font-weight: 800; }
#экран-01 .кнопки-афиши > :first-child .кнопка,#экран-01 .кнопки-афиши > .кнопка:first-child{
      background: color-mix(in srgb, var(--бордо) 84%, var(--белый)); color: var(--белый); border-color: color-mix(in srgb, var(--бордо) 84%, var(--белый));
      box-shadow: 0 14px 40px color-mix(in srgb, var(--бордо) 45%, transparent); }
#экран-01 .кнопка-контур{ display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 16px 30px;
      border: 1px solid color-mix(in srgb, var(--белый) 28%, transparent); border-radius: 999px; color: var(--белый); text-decoration: none;
      font: 700 16px/1.2 var(--шрифт-заголовков); transition: border-color var(--длительность) var(--плавность); }
#экран-01 .кнопка-контур:hover{ border-color: var(--белый); }
#экран-01 .пилюля{ display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 12px 20px;
      border: 1px solid var(--ночь-линия); border-radius: 999px; background: color-mix(in srgb, var(--ночь-карта) 70%, transparent);
      font-size: 15px; color: var(--серый); }
#экран-01 .пилюля b{ color: var(--белый); }
#экран-01 .пилюля .иконка{ width: 18px; height: 18px; color: var(--золото); }
#экран-01 .сцена{ position: relative; padding: 36px 40px 40px; }
#экран-01 .сцена::before{ content: ""; position: absolute; inset: 8% 12%; border-radius: 50%;
      border: 1px dashed color-mix(in srgb, var(--белый) 12%, transparent); }
#экран-01 .первый-экран__картинка{ position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden;
      border: 1px solid var(--ночь-линия); box-shadow: var(--тень-плиты); }
#экран-01 .первый-экран__картинка img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
#экран-01 .первый-экран__картинка::after{ content: ""; position: absolute; inset: auto 0 0; height: 30%;
      background: linear-gradient(to top, color-mix(in srgb, var(--ночь) 70%, transparent), transparent); }
#экран-01 .услуга{ position: absolute; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center;
      width: 230px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--ночь-карта) 92%, transparent);
      border: 1px solid var(--ночь-линия); box-shadow: var(--тень-глубокая); backdrop-filter: blur(6px); }
#экран-01 .услуга__икон{ display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
      background: color-mix(in srgb, var(--бордо) 22%, transparent); border: 1px solid color-mix(in srgb, var(--бордо-свет) 40%, transparent); }
#экран-01 .услуга__икон .иконка{ width: 20px; height: 20px; color: var(--золото); }
#экран-01 .услуга b{ font: 800 15px/1.2 var(--шрифт-заголовков); color: var(--белый); }
#экран-01 .услуга span{ grid-column: 1 / -1; font-size: 13px; line-height: 1.35; color: var(--серый); }
#экран-01 .услуга--1{ top: 13%; left: -30px; }
#экран-01 .услуга--2{ top: 4%; right: -34px; }
#экран-01 .услуга--3{ bottom: 18%; left: -40px; }
#экран-01 .услуга--4{ bottom: 5%; right: -10px; }
#экран-01 .точка{ position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--бордо-свет);
      box-shadow: 0 0 14px var(--бордо-свет); }
#экран-01 ~ .липкая-кнопка{ background: color-mix(in srgb, var(--цвет-тёмный-фон) 90%, transparent); border-top-color: color-mix(in srgb, var(--цвет-тёмный-текст) 14%, var(--цвет-тёмный-фон)); }
#экран-01 ~ .липкая-кнопка .кнопка{ border-radius: 999px; background: var(--цвет-акцент-яркий); border-color: var(--цвет-акцент-яркий); color: var(--цвет-тёмный-текст); }
@supports (animation-timeline: scroll()){#экран-01 ~ .липкая-кнопка{ animation: экран-01-липкая linear both; animation-timeline: scroll(root); animation-range: 0 1200px; }}

  @keyframes экран-01-липкая { 0%, 80% { transform: translateY(110%); } 100% { transform: none; } }
@media (max-width: 899px){#экран-01 .шапка{ padding: 14px 16px; gap: 10px; }
#экран-01 .афиша{ grid-template-columns: minmax(0, 1fr); padding: 34px 16px 0; }
#экран-01 .кикер-афиши{ font-size: 16px; letter-spacing: .02em; }
#экран-01 .цифры-афиши{ margin: 24px 0 26px; }
#экран-01 .шапка{ flex-direction: row; align-items: center; }
#экран-01 .шапка__лого{ font-size: 15px; }
#экран-01 .полн-шапка{ display: none; }
#экран-01 .цифры-афиши{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
#экран-01 .цифры-афиши li{ padding: 0 10px; }
#экран-01 .цифры-афиши b{ font-size: 24px; }
#экран-01 .цифры-афиши span{ font-size: 13px; }
#экран-01 .кнопки-афиши{ flex-direction: column; align-items: stretch; }
#экран-01 .кнопки-афиши .кнопка,#экран-01 .кнопка-контур{ width: 100%; justify-content: center; }
#экран-01 .пилюля{ display: flex; justify-content: center; }
#экран-01 .афиша{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; padding-top: 12px; align-items: start; }
#экран-01 .афиша__текст,#экран-01 .сцена{ display: contents; }
#экран-01 .сцена::before,#экран-01 .точка{ display: none; }
#экран-01 .афиша__текст > *,#экран-01 .первый-экран__картинка{ grid-column: 1 / -1; }
#экран-01 .первый-экран__картинка{ order: -1; aspect-ratio: auto; height: clamp(220px, 32svh, 300px); margin-bottom: 18px; }
#экран-01 .первый-экран__картинка img{ object-position: 50% 22%; }
#экран-01 .кикер-афиши{ order: 1; margin-bottom: 10px; }
#экран-01 h1{ order: 2; }
#экран-01 .черта{ order: 3; margin: 16px 0 14px; }
#экран-01 .лид-афиши{ order: 4; }
#экран-01 .кнопки-афиши{ order: 5; margin-top: 18px; }
#экран-01 .цифры-афиши{ order: 6; }
#экран-01 .пилюля{ order: 7; margin: 0 0 22px; }
#экран-01 .услуга{ order: 8; margin-bottom: 10px; }
#экран-01 .услуга{ position: relative; inset: auto; width: auto; padding: 12px; grid-template-columns: 1fr; }
#экран-01 .услуга b{ font-size: 14px; }}
#экран-02 .внутри-сетка{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
#экран-02 .шапка-слева{ position: sticky; top: 32px; display: grid; gap: 14px; justify-items: start; }
#экран-02 .шапка-слева > *{ margin-bottom: 0; }
#экран-02 .карточки{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--отступ-блока); }
#экран-02 .карт{ display: grid; gap: 14px; align-content: start; padding: clamp(20px, 2.2vw, 28px);
      border-radius: calc(var(--радиус-плитки) * 2); border: var(--нить) solid; }
#экран-02 .карт > *{ margin: 0; }
#экран-02 .карт__верх{ display: flex; align-items: center; gap: 14px; }
#экран-02 .карт__икон{ display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; }
#экран-02 .карт__икон .иконка{ width: 24px; height: 24px; color: inherit; }
@media (min-width: 900px){#экран-02 .карт:not(.карт--север) .карт__верх{ flex-direction: column; align-items: flex-start; }}
#экран-02 .карт h3{ font-weight: 700; font-size: var(--кегль-лид); line-height: 1.2; margin: 0; }
#экран-02 .карт__вид{ font-size: var(--кегль-текст); }
#экран-02 .карт ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
#экран-02 .карт li{ position: relative; padding-left: 18px; font-size: var(--кегль-текст); line-height: 1.5; }
#экран-02 .карт li::before{ content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; }
#экран-02 .карт--север{ grid-column: 1 / -1; border-left-width: 4px; }
#экран-02 .карт--север p{ font-size: var(--кегль-текст); line-height: 1.55; }
#экран-02 .итог-строка{ margin: clamp(20px, 2.4vw, 32px) 0 0; font-size: var(--кегль-текст); line-height: 1.5; }
#экран-02.светлый .карт{ background: var(--цвет-фон-карточки); border-color: var(--цвет-линия); color: var(--цвет-текст); box-shadow: var(--тень); }
#экран-02.светлый .карт__икон{ background: var(--цвет-фон-2); color: var(--цвет-акцент); }
#экран-02.светлый .карт__вид,#экран-02.светлый .итог-строка{ color: var(--цвет-текст-мягкий); }
#экран-02.светлый .карт li::before{ background: var(--цвет-акцент-маркер); }
#экран-02.светлый .карт--север{ border-left-color: var(--цвет-акцент); }
#экран-02.тёмный .карт{ background: color-mix(in srgb, var(--цвет-тёмный-фон-4) 70%, transparent);
      border-color: color-mix(in srgb, var(--цвет-тёмный-текст) 12%, transparent); color: var(--цвет-тёмный-текст);
      border-top: 2px solid color-mix(in srgb, var(--цвет-акцент-яркий) 70%, transparent); }
#экран-02.тёмный .карт__икон{ background: color-mix(in srgb, var(--цвет-акцент-яркий) 22%, transparent);
      border: var(--нить) solid color-mix(in srgb, var(--цвет-акцент-яркий) 55%, transparent); color: var(--цвет-тёмный-текст); }
#экран-02.тёмный .карт__вид,#экран-02.тёмный .итог-строка{ color: var(--цвет-тёплый-мягкий); }
#экран-02.тёмный .карт li::before{ background: var(--цвет-акцент-яркий); }
#экран-02.тёмный .карт--север{ border-top-width: var(--нить); border-top-color: color-mix(in srgb, var(--цвет-тёмный-текст) 12%, transparent); border-left-color: var(--цвет-акцент-яркий); }
#экран-02 .карт{ transition: transform .3s ease, box-shadow .3s ease; }
#экран-02 .карт:hover{ transform: translateY(-8px); box-shadow: var(--тень-глубокая, var(--тень)); }
@media (prefers-reduced-motion: reduce){#экран-02 .карт{ transition: none; }
#экран-02 .карт:hover{ transform: none; }}
@media (min-width: 900px){#экран-02 .внутри-сетка{ grid-template-columns: minmax(0, 1fr); }
#экран-02 .шапка-слева{ position: static; max-width: 760px; }
#экран-02 .карточки{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
#экран-02 .карточки > .карт{ grid-column: span 2; }
#экран-02 .карточки > .карт:first-child{ grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(24px, 3vw, 48px); align-items: start; }
#экран-02 .карточки > .карт:first-child ul{ grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 36px); }
#экран-02 .карточки > .карт.карт--север{ grid-column: span 3; }}
@media (max-width: 899px){#экран-02 .внутри-сетка{ grid-template-columns: 1fr; }
#экран-02 .шапка-слева{ position: static; }}
@media (max-width: 599px){#экран-02 .карточки{ grid-template-columns: 1fr; }}
#экран-03 .разворот{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
#экран-03 .рассказ{ display: grid; gap: 18px; justify-items: start; }
#экран-03 .рассказ > *{ margin: 0; }
#экран-03 h2 em{ font-style: normal; color: var(--цвет-акцент); }
#экран-03 .кикер{ padding: 0; background: none; border-radius: 0; color: var(--цвет-акцент); text-transform: uppercase; font-weight: 700; }
#экран-03 .портрет{ position: relative; margin: 0; max-width: 340px; width: 100%; justify-self: center; border-radius: calc(var(--радиус-плитки) * 2); overflow: hidden; box-shadow: var(--тень); }
#экран-03 .портрет img{ display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
#экран-03 .портрет__имя{ position: absolute; inset: auto 0 0 0; display: grid; gap: 6px; padding: 72px 24px 22px;
      background: linear-gradient(to top, color-mix(in srgb, var(--цвет-тёмный-фон) 88%, transparent), transparent);
      color: var(--цвет-тёмный-текст); }
#экран-03 .портрет__кто{ font: 800 var(--кегль-лид)/1.15 var(--шрифт-заголовков); }
#экран-03 .портрет__роль{ font-size: var(--кегль-мелкий); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--цвет-тёплый-мягкий); }
#экран-03 .портрет__плашка{ position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 8px;
      padding: 8px 14px; border-radius: var(--кнопка-радиус); font-size: var(--кегль-мелкий); font-weight: 700;
      background: var(--цвет-акцент); color: var(--цвет-на-акценте); box-shadow: var(--тень); }
#экран-03 .портрет__плашка .иконка{ width: 16px; height: 16px; color: currentColor; }
#экран-03 .факты{ list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
#экран-03 .факт{ display: grid; gap: 8px; align-content: start; padding: 18px; border-radius: calc(var(--радиус-плитки) * 2);
      background: var(--цвет-фон-карточки); border: var(--нить) solid var(--цвет-линия); border-top: 2px solid var(--цвет-акцент); box-shadow: var(--тень); }
#экран-03 .факт .иконка{ width: 22px; height: 22px; color: var(--цвет-акцент); }
#экран-03 .факт__главное{ font: 800 var(--кегль-лид)/1.15 var(--шрифт-заголовков); color: var(--цвет-акцент); }
#экран-03 .факт__пояс{ font-size: var(--кегль-мелкий); line-height: 1.4; color: var(--цвет-текст-мягкий); }
#экран-03 .подход{ width: 100%; box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start;
      padding: 20px 22px; border-radius: calc(var(--радиус-плитки) * 2);
      background: color-mix(in srgb, var(--цвет-акцент) 5%, var(--цвет-фон-карточки));
      border: var(--нить) solid color-mix(in srgb, var(--цвет-акцент) 22%, transparent); }
#экран-03 .подход__знак{ display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--радиус);
      background: var(--цвет-акцент); color: var(--цвет-на-акценте); box-shadow: var(--тень); }
#экран-03 .подход__знак .иконка{ width: 22px; height: 22px; color: currentColor; }
#экран-03 .подход p{ margin: 0; font-size: var(--кегль-лид); line-height: 1.45; font-weight: 600; color: var(--цвет-текст); }
#экран-03 .подход em{ font-style: normal; color: var(--цвет-акцент); }
#экран-03 .обучение{ margin-top: clamp(36px, 5vw, 64px); display: grid; gap: 18px; }
#экран-03 .обучение__метка{ margin: 0; font-size: var(--кегль-текст); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--цвет-текст-мягкий); }
#экран-03 .ленты{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
#экран-03 .серт{ display: grid; grid-template-rows: auto 1fr; height: 100%; border: var(--нить) solid var(--цвет-линия); border-radius: calc(var(--радиус-плитки) * 2); overflow: hidden; text-decoration: none;
      background: var(--цвет-фон-карточки); color: var(--цвет-текст); }
#экран-03 .серт:hover{ box-shadow: var(--тень); }
#экран-03 .серт__кадр{ display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 10px; margin: 0; border-radius: 0; box-shadow: none; background: var(--цвет-фон-2); }
#экран-03 .серт__кадр img{ display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
#экран-03 .серт__подпись{ display: grid; gap: 4px; align-content: start; padding: 12px 14px 14px; border-top: var(--нить) solid var(--цвет-линия); }
#экран-03 .серт__назв{ font-size: var(--кегль-мелкий); line-height: 1.35; font-weight: 700; }
#экран-03 .серт__где{ font-size: var(--кегль-мелкий); line-height: 1.35; color: var(--цвет-текст-мягкий); }
@media (max-width: 1099px){#экран-03 .ленты{ grid-template-columns: repeat(3, minmax(0, 1fr)); }}
@media (max-width: 899px){#экран-03 .разворот{ grid-template-columns: 1fr; }
#экран-03 .портрет{ max-width: 320px; width: 100%; }}
@media (max-width: 599px){#экран-03 .факты{ grid-template-columns: 1fr; gap: 10px; }
#экран-03 .факт{ grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; padding: 14px 16px; }
#экран-03 .факт .иконка{ grid-row: span 2; margin-top: 2px; }
#экран-03 .подход{ padding: 16px; gap: 12px; }
#экран-03 .ленты{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#экран-03 .серт__подпись{ padding: 10px 10px 12px; }}
#экран-03 .факт,#экран-03 .серт{ transition: transform .3s ease, box-shadow .3s ease; }
#экран-03 .факт:hover,#экран-03 .серт:hover{ transform: translateY(-8px); box-shadow: var(--тень-глубокая, var(--тень)); }
@media (prefers-reduced-motion: reduce){#экран-03 .факт,#экран-03 .серт{ transition: none; }
#экран-03 .факт:hover,#экран-03 .серт:hover{ transform: none; }}
#экран-04 .шапка-центр{ display: grid; gap: 14px; justify-items: center; text-align: center; max-width: 44rem; margin: 0 auto clamp(28px, 4vw, 52px); }
#экран-04 .шапка-центр > *{ margin-bottom: 0; }
#экран-04 .кикер{ padding: 0; background: none; border-radius: 0; color: color-mix(in srgb, var(--цвет-акцент-яркий) 60%, var(--цвет-тёмный-текст)); text-transform: uppercase; font-weight: 700; }
#экран-04 h2 em{ font-style: normal; color: color-mix(in srgb, var(--цвет-акцент-яркий) 60%, var(--цвет-тёмный-текст)); }
#экран-04 .цены{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--отступ-блока); align-items: stretch; }
#экран-04 .тариф{ display: grid; min-width: 0; align-content: start; gap: 12px; padding: clamp(24px, 2.4vw, 32px);
      border-radius: calc(var(--радиус-плитки) * 2); background: var(--цвет-фон-карточки); color: var(--цвет-текст); box-shadow: var(--тень); }
#экран-04 .тариф > *{ margin: 0; }
#экран-04 .тариф__плитка{ display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--радиус-плитки);
      background: var(--цвет-акцент); color: var(--цвет-на-акценте); }
#экран-04 .тариф__плитка .иконка{ width: 24px; height: 24px; color: currentColor; }
#экран-04 .тариф h3{ padding-top: 6px; font: 800 var(--кегль-лид)/1.2 var(--шрифт-заголовков); color: var(--цвет-текст); }
#экран-04 .тариф__что{ font-style: italic; font-weight: 600; color: var(--цвет-акцент); }
#экран-04 .тариф__сумма{ padding-top: 4px; font: 800 var(--кегль-цифра)/1.05 var(--шрифт-заголовков); letter-spacing: -0.01em; color: var(--цвет-текст); }
#экран-04 .тариф__за{ font-size: var(--кегль-текст); color: var(--цвет-текст-мягкий); padding-bottom: 14px; border-bottom: var(--нить) solid var(--цвет-линия); }
#экран-04 .тариф ul{ list-style: none; padding: 4px 0 8px; display: grid; gap: 10px; align-content: start; }
#экран-04 .тариф li{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; font-size: var(--кегль-текст); line-height: 1.45; }
#экран-04 .тариф li .иконка{ width: 18px; height: 18px; margin-top: 3px; color: var(--цвет-акцент); }
#экран-04 .бесплатно{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-top: var(--отступ-блока);
      padding: clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 32px); border-radius: calc(var(--радиус-плитки) * 2);
      background: color-mix(in srgb, var(--цвет-тёмный-фон-4) 70%, transparent);
      border: var(--нить) solid color-mix(in srgb, var(--цвет-акцент-яркий) 45%, transparent); color: var(--цвет-тёмный-текст); }
#экран-04 .бесплатно > *{ margin: 0; }
#экран-04 .бесплатно__плитка{ display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--радиус-плитки);
      background: var(--цвет-акцент); color: var(--цвет-на-акценте); }
#экран-04 .бесплатно__плитка .иконка{ width: 24px; height: 24px; color: currentColor; }
#экран-04 .бесплатно__текст{ display: grid; gap: 4px; }
#экран-04 .бесплатно__главное{ font: 800 var(--кегль-лид)/1.2 var(--шрифт-заголовков); }
#экран-04 .бесплатно__пояс{ font-size: var(--кегль-текст); color: var(--цвет-тёплый-мягкий); }
#экран-04 .бесплатно .кнопка{ background: color-mix(in srgb, var(--цвет-акцент-яркий) 84%, var(--цвет-тёмный-текст)); color: var(--цвет-тёмный-текст); border-color: color-mix(in srgb, var(--цвет-акцент-яркий) 84%, var(--цвет-тёмный-текст)); border-radius: 999px; font-weight: 800; box-shadow: 0 14px 40px color-mix(in srgb, var(--цвет-акцент-яркий) 45%, transparent); }
#экран-04 .бесплатно .кнопка:hover{ background: var(--цвет-акцент-яркий); border-color: var(--цвет-акцент-яркий); color: var(--цвет-тёмный-текст); }
@media (max-width: 999px){#экран-04 .цены{ grid-template-columns: 1fr; max-width: 30rem; margin: 0 auto; }
#экран-04 .бесплатно{ grid-template-columns: auto minmax(0, 1fr); }
#экран-04 .бесплатно .кнопка{ grid-column: 1 / -1; width: 100%; justify-content: center; }}
#экран-04 .тариф{ transition: transform .3s ease, box-shadow .3s ease; }
#экран-04 .тариф:hover{ transform: translateY(-8px); box-shadow: var(--тень-глубокая, var(--тень)); }
@media (prefers-reduced-motion: reduce){#экран-04 .тариф{ transition: none; }
#экран-04 .тариф:hover{ transform: none; }}
#экран-05 .шапка-центр{ display: grid; gap: 14px; justify-items: center; text-align: center; max-width: 44rem; margin: 0 auto clamp(28px, 4vw, 52px); }
#экран-05 .шапка-центр > *{ margin: 0; }
#экран-05 .кикер{ padding: 0; background: none; border-radius: 0; color: var(--цвет-акцент); text-transform: uppercase; font-weight: 700; }
#экран-05 h2 em{ font-style: normal; color: var(--цвет-акцент); }
#экран-05 .лид{ color: var(--цвет-текст-мягкий); }
#экран-05 .лид b{ color: var(--цвет-текст); }
#экран-05 .отзывы{ display: flex; flex-wrap: wrap; justify-content: center; gap: var(--отступ-блока); }
#экран-05 .отзыв{ flex: 0 1 calc((100% - 2 * var(--отступ-блока)) / 3); min-width: 0; box-sizing: border-box;
      display: grid; gap: 14px; align-content: start; margin: 0; padding: clamp(22px, 2.2vw, 30px);
      border-radius: calc(var(--радиус-плитки) * 2); background: var(--цвет-фон-карточки); color: var(--цвет-текст);
      border: var(--нить) solid var(--цвет-линия); box-shadow: var(--тень);
      transition: transform .3s ease, box-shadow .3s ease; }
#экран-05 .отзыв > *{ margin: 0; }
#экран-05 .отзыв:hover{ transform: translateY(-8px); box-shadow: var(--тень-глубокая, var(--тень)); }
#экран-05 .кто{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
#экран-05 .знак{ position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; }
#экран-05 .знак::before{ content: ""; position: absolute; inset: 0; border-radius: 50%;
      background: conic-gradient(var(--цвет-акцент), var(--цвет-тёплый-мягкий), var(--цвет-акцент-яркий), var(--цвет-акцент));
      animation: экран05-кольцо 6s linear infinite; }
#экран-05 .знак span{ position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
      border: 2px solid var(--цвет-фон-карточки); background: var(--цвет-акцент); color: var(--цвет-на-акценте);
      font: 800 var(--кегль-текст)/1 var(--шрифт-заголовков); letter-spacing: .02em; transition: transform .3s ease; }
#экран-05 .отзыв:hover .знак span{ transform: scale(1.08); }

  @keyframes экран05-кольцо { to { transform: rotate(360deg); } }
#экран-05 .кто__имя{ display: block; font: 800 var(--кегль-лид)/1.2 var(--шрифт-заголовков); }
#экран-05 .кто__где{ display: block; font-size: var(--кегль-мелкий); color: var(--цвет-текст-мягкий); }
#экран-05 .метка{ justify-self: start; padding: 5px 12px; border-radius: var(--кнопка-радиус);
      border: var(--нить) solid color-mix(in srgb, var(--цвет-акцент) 45%, transparent);
      background: color-mix(in srgb, var(--цвет-акцент) 8%, var(--цвет-фон-карточки));
      color: var(--цвет-акцент); font-size: var(--кегль-мелкий); font-weight: 700; line-height: 1.3; }
#экран-05 .цитата{ position: relative; padding: 0 0 0 26px; font-size: var(--кегль-текст); line-height: 1.6; font-style: italic; }
#экран-05 .цитата::before{ content: "“"; position: absolute; left: 0; top: -4px; font: 800 var(--кегль-цифра)/1 var(--шрифт-заголовков); font-style: normal; color: var(--цвет-акцент); }
#экран-05 .цитата b{ font-weight: 700; color: var(--цвет-акцент); }
@media (max-width: 999px){#экран-05 .отзыв{ flex-basis: calc((100% - var(--отступ-блока)) / 2); }}
@media (max-width: 649px){#экран-05 .отзыв{ flex-basis: 100%; }}
@media (prefers-reduced-motion: reduce){#экран-05 .отзыв,#экран-05 .знак span{ transition: none; }
#экран-05 .отзыв:hover,#экран-05 .отзыв:hover .знак span{ transform: none; }
#экран-05 .знак::before{ animation: none; }}
#экран-06 .шапка-центр{ display: grid; gap: 14px; justify-items: center; text-align: center; max-width: 44rem; margin: 0 auto clamp(28px, 4vw, 52px); }
#экран-06 .шапка-центр > *{ margin: 0; }
#экран-06 .кикер{ padding: 0; background: none; border-radius: 0; color: color-mix(in srgb, var(--цвет-акцент-яркий) 60%, var(--цвет-тёмный-текст)); text-transform: uppercase; font-weight: 700; }
#экран-06 h2 em{ font-style: normal; color: color-mix(in srgb, var(--цвет-акцент-яркий) 60%, var(--цвет-тёмный-текст)); }
#экран-06 .лид{ color: var(--цвет-тёплый-мягкий); }
#экран-06 .вопросы{ position: relative; display: grid; gap: 16px; max-width: 64rem; margin: 0 auto; }
#экран-06 .вопросы::before{ content: ""; position: absolute; top: 28px; bottom: 28px; left: calc(clamp(18px, 2.2vw, 26px) + 27px); width: var(--нить);
      background: color-mix(in srgb, var(--цвет-тёплый-мягкий) 35%, transparent); }
#экран-06 .вопрос{ position: relative; border-radius: calc(var(--радиус-плитки) * 2); background: var(--цвет-фон-карточки); color: var(--цвет-текст); box-shadow: var(--тень);
      transition: transform .3s ease, box-shadow .3s ease; }
#экран-06 .вопрос:hover{ transform: translateY(-6px); box-shadow: var(--тень-глубокая, var(--тень)); }
#экран-06 .вопрос summary{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(14px, 2vw, 22px); align-items: center; cursor: pointer; list-style: none;
      padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2.2vw, 26px); }
#экран-06 .вопрос summary::-webkit-details-marker{ display: none; }
#экран-06 .вопрос__номер{ display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
      background: var(--цвет-тёмный-фон); color: var(--цвет-тёмный-текст); border: 3px solid var(--цвет-акцент); box-sizing: border-box; box-shadow: var(--тень);
      font: 800 var(--кегль-текст)/1 var(--шрифт-заголовков); }
#экран-06 .вопрос__текст{ font: 800 var(--кегль-лид)/1.3 var(--шрифт-заголовков); }
#экран-06 .вопрос summary::after{ content: ""; display: block; border: 0; border-radius: 0; width: 20px; height: 20px; justify-self: end; margin-right: 6px;
      background: linear-gradient(var(--цвет-акцент), var(--цвет-акцент)) center / 100% 3px no-repeat,
                  linear-gradient(var(--цвет-акцент), var(--цвет-акцент)) center / 3px 100% no-repeat;
      transition: transform .3s ease; }
#экран-06 .вопрос[open] summary::after{ transform: rotate(45deg); }
#экран-06 .вопрос p{ margin: 0; padding: 0 clamp(18px, 2.2vw, 26px) clamp(18px, 2vw, 24px) calc(clamp(18px, 2.2vw, 26px) + 54px + clamp(14px, 2vw, 22px));
      font-size: var(--кегль-текст); line-height: 1.6; color: var(--цвет-текст-мягкий); max-width: 46rem; }
#экран-06 .приглашение{ max-width: 58rem; margin: clamp(32px, 4vw, 52px) auto 0; padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 44px);
      border-radius: calc(var(--радиус-плитки) * 2); border: var(--нить) solid color-mix(in srgb, var(--цвет-тёплый-мягкий) 30%, transparent);
      background: color-mix(in srgb, var(--цвет-тёмный-фон-4) 55%, transparent); text-align: center;
      font: 700 var(--кегль-лид)/1.45 var(--шрифт-заголовков); color: var(--цвет-тёмный-текст); }
#экран-06 .приглашение{ position: relative; }
#экран-06 .приглашение::before{ content: ""; position: absolute; top: -2px; left: 50%; transform: translateX(-50%); width: 72px; height: 3px;
      border-radius: var(--кнопка-радиус); background: var(--цвет-акцент-яркий); }
#экран-06 .приглашение em{ font-style: normal; color: var(--цвет-тёплый-мягкий); }
#экран-06 .кнопка-под{ display: flex; justify-content: center; margin-top: clamp(24px, 3vw, 36px); }
#экран-06 .кнопка-под .кнопка{ background: color-mix(in srgb, var(--цвет-акцент-яркий) 84%, var(--цвет-тёмный-текст)); color: var(--цвет-тёмный-текст); border-color: color-mix(in srgb, var(--цвет-акцент-яркий) 84%, var(--цвет-тёмный-текст)); border-radius: 999px; font-weight: 800; box-shadow: 0 14px 40px color-mix(in srgb, var(--цвет-акцент-яркий) 45%, transparent); }
#экран-06 .кнопка-под .кнопка:hover{ background: var(--цвет-акцент-яркий); border-color: var(--цвет-акцент-яркий); color: var(--цвет-тёмный-текст); }
@media (max-width: 599px){#экран-06 .вопрос__номер{ width: 44px; height: 44px; }
#экран-06 .вопросы::before{ left: calc(clamp(18px, 2.2vw, 26px) + 22px); }
#экран-06 .вопрос p{ padding-left: clamp(18px, 2.2vw, 26px); }
#экран-06 .кнопка-под .кнопка{ width: 100%; justify-content: center; }}
@media (prefers-reduced-motion: reduce){#экран-06 .вопрос,#экран-06 .вопрос summary::after{ transition: none; }
#экран-06 .вопрос:hover{ transform: none; }}
#экран-07 .шапка-лево{ display: grid; gap: 14px; margin: 0 0 clamp(28px, 4vw, 52px); }
#экран-07 .шапка-лево > *{ margin-bottom: 0; max-width: 42rem; }
#экран-07 .шапка-лево,#экран-07 .вид-города,#экран-07 .тело{ max-width: 66rem; margin-inline: auto; }
#экран-07 .приглашение .кнопка{ background: color-mix(in srgb, var(--цвет-акцент-яркий) 84%, var(--цвет-тёмный-текст)); color: var(--цвет-тёмный-текст); border-color: color-mix(in srgb, var(--цвет-акцент-яркий) 84%, var(--цвет-тёмный-текст)); border-radius: 999px; font-weight: 800; box-shadow: 0 14px 40px color-mix(in srgb, var(--цвет-акцент-яркий) 45%, transparent); }
#экран-07 .приглашение .кнопка:hover{ background: var(--цвет-акцент-яркий); border-color: var(--цвет-акцент-яркий); color: var(--цвет-тёмный-текст); }
#экран-07 .шапка-лево .лид{ max-width: none; color: var(--цвет-текст-мягкий); }
#экран-07 .кикер{ padding: 0; background: none; border-radius: 0; color: var(--цвет-акцент); text-transform: uppercase; font-weight: 700; }
#экран-07 h2 em{ font-style: normal; color: var(--цвет-акцент); }
#экран-07 .вид-города{ margin: 0 auto clamp(24px, 3.4vw, 44px); max-width: 66rem; border-radius: calc(var(--радиус-плитки) * 2); box-shadow: var(--тень); }
#экран-07 .вид-города img{ display: block; width: 100%; height: auto; aspect-ratio: 21 / 8; object-fit: cover; object-position: 50% 62%; border-radius: calc(var(--радиус-плитки) * 2); }
#экран-07 .тело{ display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 48px); align-items: stretch; max-width: 66rem; }
#экран-07 .способы{ display: grid; gap: 14px; align-content: start; }
#экран-07 .способ{ display: flex; align-items: center; gap: 18px; padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 26px);
      border-radius: calc(var(--радиус-плитки) * 2); border: var(--нить) solid; text-decoration: none; min-width: 0; }
#экран-07 .способ--главный{ padding: clamp(24px, 3vw, 36px) clamp(20px, 2.6vw, 30px); }
#экран-07 .способ__икон{ flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; }
#экран-07 .способ--главный .способ__икон{ width: 64px; height: 64px; }
#экран-07 .способ__икон .иконка{ width: 24px; height: 24px; color: inherit; }
#экран-07 .способ--главный .способ__икон .иконка{ width: 30px; height: 30px; }
#экран-07 .способ__текст{ display: grid; gap: 4px; min-width: 0; }
#экран-07 .способ__имя{ font-weight: 700; font-size: var(--кегль-лид); line-height: 1.25; }
#экран-07 .способ--главный .способ__имя{ font-size: var(--кегль-лид); }
#экран-07 .способ__адрес{ font-size: var(--кегль-текст); line-height: 1.4; overflow-wrap: anywhere; }
#экран-07 .приглашение{ display: grid; gap: 16px; align-content: center; padding: clamp(26px, 3.2vw, 44px); border-radius: calc(var(--радиус-плитки) * 2); border: var(--нить) solid; }
#экран-07 .приглашение > *{ margin: 0; }
#экран-07 .приглашение h3{ font-weight: 700; font-size: var(--кегль-лид); line-height: 1.2; }
#экран-07 .приглашение p{ font-size: var(--кегль-текст); line-height: 1.6; }
#экран-07 .приглашение .кнопка-под{ display: flex; margin-top: 6px; }
#экран-07 .способ{ background: var(--цвет-фон-карточки); border-color: var(--цвет-линия); color: var(--цвет-текст); box-shadow: var(--тень); }
#экран-07 .способ__икон{ background: var(--цвет-фон-2); color: var(--цвет-акцент); }
#экран-07 .способ__адрес{ color: var(--цвет-текст-мягкий); }
#экран-07 .способ--главный{ border-color: var(--цвет-акцент); }
#экран-07 .приглашение{ background: var(--цвет-тёмный-фон); border-color: var(--цвет-тёмный-фон); color: var(--цвет-тёмный-текст); border-top: 3px solid var(--цвет-акцент-яркий); }
#экран-07 .способ,#экран-07 .приглашение{ transition: transform .3s ease, box-shadow .3s ease; }
#экран-07 .способ:hover,#экран-07 .приглашение:hover{ transform: translateY(-8px); box-shadow: var(--тень-глубокая, var(--тень)); }
@media (prefers-reduced-motion: reduce){#экран-07 .способ,#экран-07 .приглашение{ transition: none; }
#экран-07 .способ:hover,#экран-07 .приглашение:hover{ transform: none; }}
@media (max-width: 899px){#экран-07 .тело{ grid-template-columns: 1fr; }
#экран-07 .вид-города img{ aspect-ratio: 3 / 2; object-position: 40% 60%; }}
@media (max-width: 599px){#экран-07 .приглашение .кнопка{ width: 100%; justify-content: center; }}
#экран-08 .сетка{ display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
#экран-08 .знак{ display: block; font-weight: 700; font-size: var(--кегль-лид); line-height: 1.25; margin: 0 0 10px; }
#экран-08 .подпись{ margin: 0; font-size: var(--кегль-текст); line-height: 1.5; max-width: 26rem; }
#экран-08 h4{ margin: 0 0 14px; font-size: var(--кегль-кикер); letter-spacing: var(--разрядка-кикера); text-transform: uppercase; font-weight: 700; }
#экран-08 .ссылки{ display: grid; gap: 10px; justify-items: start; }
#экран-08 .ссылки a{ font-size: var(--кегль-текст); line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; border-bottom: var(--нить) solid transparent; }
#экран-08 .ссылки a:hover{ border-bottom-color: currentColor; }
#экран-08 .низ{ display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; margin-top: clamp(32px, 4vw, 56px);
      padding-top: clamp(18px, 2vw, 26px); border-top: 2px solid; font-size: var(--кегль-мелкий); line-height: 1.5; }
#экран-08 .низ span{ margin: 0; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
#экран-08 .знак{ color: var(--цвет-тёмный-текст); }
#экран-08 .подпись,#экран-08 .ссылки a{ color: var(--цвет-тёплый-мягкий); }
#экран-08 h4{ color: color-mix(in srgb, var(--цвет-акцент-яркий) 60%, var(--цвет-тёмный-текст)); }
#экран-08 .ссылки a:hover{ color: var(--цвет-тёмный-текст); border-bottom-color: var(--цвет-акцент-яркий); }
#экран-08 .низ{ border-top-color: var(--цвет-тёмный-фон-4); color: var(--цвет-тёплый-мягкий); }
@media (max-width: 899px){#экран-08 .сетка{ grid-template-columns: 1fr 1fr; }
#экран-08 .сетка > :first-child{ grid-column: 1 / -1; }}
@media (max-width: 599px){#экран-08 .сетка{ grid-template-columns: 1fr; }
#экран-08 .низ{ flex-direction: column; flex-wrap: nowrap; align-items: stretch; }}