/* Sincera Longevity — посадочная. Белое и золото: молочная основа, изумрудные видеобаннеры, золото только тонкой линией и точкой.
   Цвета только из утверждённых токенов. Анимируются transform, opacity, clip-path и штрихи кольца. */
:root {
  --milk: #F4EEE4; --glow: #FCF9F3; --ink: #14302A; --mu: #5B6A61; --gold: #C9A15E; --acc: #7D5E27;
  --deep: #0A2523; --deep2: #14302A; --on-deep: #F3EEE3; --mu-deep: #A9B3A6;
  --gap: 20px;
  --fh: 220px;   /* высота перехода между молочным и изумрудным: 220 px на телефоне, 320 px от 700 px шириной */
  /* Переход: 13 стопов по easeInOutSine; середина идёт через зелёные оттенки #7FA08F и #3C6B5E, а не через серый.
     На стыках цвет совпадает с соседним блоком, линии нет. --fade (фон изумрудного блока, задан у .band) и --vmask (маска видео) имеют одинаковые положения стопов. */
  --vmask: linear-gradient(180deg, rgba(10, 37, 35, 0) calc(var(--fh) * 0), rgba(10, 37, 35, 0.017) calc(var(--fh) * 0.0833), rgba(10, 37, 35, 0.067) calc(var(--fh) * 0.1667), rgba(10, 37, 35, 0.1464) calc(var(--fh) * 0.25), rgba(10, 37, 35, 0.25) calc(var(--fh) * 0.3333), rgba(10, 37, 35, 0.3706) calc(var(--fh) * 0.4167), rgba(10, 37, 35, 0.5) calc(var(--fh) * 0.5), rgba(10, 37, 35, 0.6294) calc(var(--fh) * 0.5833), rgba(10, 37, 35, 0.75) calc(var(--fh) * 0.6667), rgba(10, 37, 35, 0.8536) calc(var(--fh) * 0.75), rgba(10, 37, 35, 0.933) calc(var(--fh) * 0.8333), rgba(10, 37, 35, 0.983) calc(var(--fh) * 0.9167), rgba(10, 37, 35, 1) calc(var(--fh) * 1), rgba(10, 37, 35, 1) calc(100% - var(--fh)), rgba(10, 37, 35, 1) calc(100% - var(--fh) * 1), rgba(10, 37, 35, 0.983) calc(100% - var(--fh) * 0.9167), rgba(10, 37, 35, 0.933) calc(100% - var(--fh) * 0.8333), rgba(10, 37, 35, 0.8536) calc(100% - var(--fh) * 0.75), rgba(10, 37, 35, 0.75) calc(100% - var(--fh) * 0.6667), rgba(10, 37, 35, 0.6294) calc(100% - var(--fh) * 0.5833), rgba(10, 37, 35, 0.5) calc(100% - var(--fh) * 0.5), rgba(10, 37, 35, 0.3706) calc(100% - var(--fh) * 0.4167), rgba(10, 37, 35, 0.25) calc(100% - var(--fh) * 0.3333), rgba(10, 37, 35, 0.1464) calc(100% - var(--fh) * 0.25), rgba(10, 37, 35, 0.067) calc(100% - var(--fh) * 0.1667), rgba(10, 37, 35, 0.017) calc(100% - var(--fh) * 0.0833), rgba(10, 37, 35, 0) calc(100% - var(--fh) * 0));
}
@media (min-width: 700px) { :root { --fh: 320px; } }
:root { --ease: cubic-bezier(.16, 1, .3, 1); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: #F4EEE4; }
body {
  margin: 0; background: #F4EEE4; color: #14302A;
  font: 300 17px/1.65 Montserrat, system-ui, sans-serif;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, figure { margin: 0; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }

/* ---------- общие блоки (молочные) ---------- */
.block { background: #F4EEE4; color: #14302A; }
/* Молочные блоки на 1 px заходят на соседний изумрудный: на дробных масштабах край не даёт тёмной волосной линии. */
.block, .foot { position: relative; z-index: 1; box-shadow: 0 1px 0 #F4EEE4, 0 -1px 0 #F4EEE4; }
.wrap { max-width: 760px; margin: 0 auto; padding: 56px var(--gap); }
.wrap p + p { margin-top: 20px; }
.wrap p, .ans { max-width: 38em; }   /* длина строки 60–65 знаков */
@media (max-width: 699px) { body { font-weight: 400; } }   /* на телефоне Montserrat Regular: Light здесь читается тонко */
/* акцентный абзац: те же слова, набор Oranienbaum по правилу айдентики о вводных абзацах и акцентах */
.lead { font: 400 clamp(22px, 2.4vw, 27px)/1.34 Oranienbaum, serif; }
.wrap .lead, .final .lead { max-width: 646px; }
.wrap p + .lead, .wrap .lead + p, .final .band__in p + .lead { margin-top: 28px; }
h2 { font: 400 clamp(30px, 4vw, 48px)/1.14 Oranienbaum, serif; text-wrap: balance; }
h3 { font: 400 clamp(22px, 2.4vw, 26px)/1.25 Oranienbaum, serif; }
.wrap > h2 + p, .wrap > h2 + div { margin-top: 24px; }
.price { font: 400 clamp(38px, 5vw, 56px)/1 Oranienbaum, serif; color: #7D5E27; margin: 40px 0 28px; }
:focus-visible { outline: 2px solid #7D5E27; outline-offset: 3px; }

/* ---------- кнопка: сплошная, радиус 14, золотая точка; на компьютере точка раскрывается в круг со стрелкой ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 58px; padding: 10px 10px 10px 26px; border-radius: 14px;
  background: #14302A; color: #F4EEE4; text-decoration: none;
  font: 500 16px/1.3 Montserrat, system-ui, sans-serif; letter-spacing: .02em; text-wrap: balance;
  box-shadow: 0 16px 32px -18px rgba(20, 48, 42, .7);
  transition: transform .26s cubic-bezier(.16, 1, .3, 1), translate .26s cubic-bezier(.16, 1, .3, 1), box-shadow .26s cubic-bezier(.16, 1, .3, 1);
  -webkit-tap-highlight-color: transparent;
}
.btn-label { flex: 1 1 auto; text-align: left; }
.btn-dot { flex: none; position: relative; display: grid; place-items: center; width: 38px; height: 38px; color: #14302A; }
.btn-dot::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: #C9A15E; transition: transform .32s cubic-bezier(.16, 1, .3, 1);
}
.btn-dot svg { position: relative; width: 20px; height: 20px; opacity: 0; transform: translateX(-6px) scale(.6);
  transition: opacity .26s cubic-bezier(.16, 1, .3, 1), transform .32s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { box-shadow: 0 20px 38px -18px rgba(20, 48, 42, .8); }
  .btn:hover .btn-dot::before { transform: scale(4.75); }
  .btn:hover .btn-dot svg { opacity: 1; transform: none; }
}
.btn:active { transform: scale(.97); }
@media (max-width: 560px) { .btn:not(.sticky) { display: flex; width: 100%; } }
/* на изумрудном фоне кнопка светлая */
.band .btn { background: #F4EEE4; color: #14302A; box-shadow: 0 16px 32px -18px rgba(10, 37, 35, .9); }
.band :focus-visible { outline-color: #C9A15E; }

/* второстепенная кнопка: контур без заливки */
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 6px 8px 6px 22px;
  border: 1px solid #14302A; border-radius: 14px; background: transparent; color: #14302A; text-decoration: none;
  font: 500 16px/1.3 Montserrat, system-ui, sans-serif; letter-spacing: .02em; text-wrap: balance;
  transition: transform .26s cubic-bezier(.16, 1, .3, 1), translate .26s cubic-bezier(.16, 1, .3, 1), background-color .26s ease;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover { background-color: rgba(20, 48, 42, .06); }
  .btn-ghost:hover .btn-dot::before { transform: scale(4.75); }
  .btn-ghost:hover .btn-dot svg { opacity: 1; transform: none; }
}
.btn-ghost:active { transform: scale(.97); }

/* ---------- первый экран: логотип, круглое окно с видео, кольцо логотипа, заголовок, капсула ---------- */
.hero {
  position: relative; container-type: inline-size; min-height: 100svh; overflow: hidden; overflow: clip;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 22px 0 28px;
  background: radial-gradient(80% 55% at 50% 28%, rgba(252, 249, 243, .95) 0, rgba(252, 249, 243, 0) 70%), #F4EEE4;
  color: #14302A;
  --arc-out: calc(min(74cqw, 46svh) * .076);   /* на сколько золотая дуга выходит за окно при вращении */
}
.hero__logo { position: relative; z-index: 2; width: 68px; height: auto; margin-bottom: calc(var(--arc-out) + 10px); }
.hero__window-wrap { position: relative; flex: none; width: min(74cqw, 46svh); aspect-ratio: 1; will-change: transform; }
.hero__window-wrap::before {   /* тень и тонкая линия окна */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(201, 161, 94, .4), 0 50px 90px -46px rgba(20, 48, 42, .55);
}
.hero__window { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; background: #14302A;
  clip-path: circle(50% at 50% 50%); transition: clip-path 1400ms cubic-bezier(.16, 1, .3, 1) 120ms; }
.hero__window img, .hero__window video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 50%; }
.hero__orbit { position: absolute; left: -9.146%; top: -9.146%; width: 118.29%; height: 118.29%; max-width: none; overflow: visible;
  pointer-events: none; animation: orbit 60s linear infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }
.hero__orbit path { fill: none; stroke: #C9A15E; stroke-linecap: butt; }
.hero__orbit-ring path { stroke-width: .55; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1600ms cubic-bezier(.16, 1, .3, 1) 1000ms; }
.hero__orbit-arc { stroke-width: 6; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1000ms cubic-bezier(.16, 1, .3, 1) 2100ms, opacity 600ms ease 2100ms; }
.hero__copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; max-width: 520px; margin: calc(var(--arc-out) + 16px) var(--gap) 0; }
.hero__title { font: 400 clamp(46px, 13cqw, 56px)/.98 Oranienbaum, serif; color: #14302A; }
.hero__title span { display: block; }
.hero__subtitle {   /* капсула: контур золотом 1 px; длинная фраза — скругление 28 px */
  margin-top: 20px; padding: 12px 24px 13px; border: 1px solid #C9A15E; border-radius: 28px; background: #F4EEE4;
  font: 400 clamp(19px, 5.4cqw, 22px)/1.3 Oranienbaum, serif; color: #14302A; text-wrap: balance;
}
/* появление: окно раскрывается кругом, затем дорисовывается кольцо */
.js .hero:not(.is-in) .hero__window { clip-path: circle(0% at 50% 50%); }
.js .hero:not(.is-in) .hero__orbit-ring path { stroke-dashoffset: 1; }
.js .hero:not(.is-in) .hero__orbit-arc { stroke-dashoffset: 1; opacity: 0; }
.js .hero:not(.is-in) .hero__logo, .js .hero:not(.is-in) .hero__copy > * { opacity: 0; }
.hero.is-in .hero__logo { animation: v-fade 900ms ease 300ms backwards; }
.hero.is-in .hero__copy > * { animation: v-rise 1200ms cubic-bezier(.16, 1, .3, 1) backwards; }
.hero.is-in .hero__copy > :nth-child(1) { animation-delay: 520ms; }
.hero.is-in .hero__copy > :nth-child(2) { animation-delay: 650ms; }
@keyframes v-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes v-fade { from { opacity: 0; } }
.hero.is-off .hero__orbit { animation-play-state: paused; }
/* подсказка «дальше есть продолжение»: тонкая золотая линия внизу первого экрана */
.hero__cue { position: absolute; z-index: 2; left: 50%; bottom: 12px; width: 1px; height: 32px; margin-left: -.5px; overflow: hidden; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.hero__cue::after { content: ""; position: absolute; inset: 0; background: #C9A15E; transform: scaleY(0); transform-origin: 50% 0; animation: cue 2.8s var(--ease) infinite; }
.hero.is-in .hero__cue { opacity: 1; transition-delay: 2.4s; }
.hero.is-scrolled .hero__cue { opacity: 0; transition-delay: 0s; }
.hero.is-off .hero__cue::after { animation-play-state: paused; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: 50% 0; } 50% { transform: scaleY(1); transform-origin: 50% 0; } 50.01% { transform-origin: 50% 100%; } 100% { transform: scaleY(0); transform-origin: 50% 100%; } }
/* невысокий телефон в браузере: окно немного меньше, содержимое чуть выше, снизу остаётся место для линии */
@media (max-height: 780px) and (max-width: 699px) {
  .hero { padding-top: 12px; padding-bottom: 56px; --arc-out: calc(min(74cqw, 38svh) * .076); }
  .hero__window-wrap { width: min(74cqw, 38svh); }
  .hero__logo { width: 56px; }
}
@media (max-height: 600px) { .hero__cue { display: none; } }

/* широкий экран: окно справа, текст слева на молочном */
@media (min-width: 1280px) and (min-aspect-ratio: 29/20) {
  .hero { container-type: size; height: max(100svh, 640px); min-height: 640px; display: block; padding: 0; text-align: left;
    background: radial-gradient(60% 75% at 70% 50%, rgba(252, 249, 243, .95) 0, rgba(252, 249, 243, 0) 70%), #F4EEE4;
    --win: min(78cqh, 48cqw); }
  .hero__logo { position: absolute; left: 7cqw; top: 32px; width: clamp(72px, 6cqw, 96px); margin: 0; }
  .hero__window-wrap { position: absolute; width: var(--win); height: var(--win); right: calc(4cqw + var(--win) * .0915); top: 0; bottom: 0; margin: auto 0; }
  .hero__orbit-ring path { stroke-width: .3; }
  .hero__copy { position: absolute; left: 7cqw; top: 0; bottom: 0; height: fit-content; margin: auto 0; align-items: flex-start;
    width: min(500px, calc(100cqw - var(--win) * 1.183 - 11cqw - 56px)); }
  .hero__title { font-size: clamp(56px, 5.2cqw, 80px); }
  .hero__subtitle { font-size: 22px; padding: 14px 26px 15px; }
}

/* ---------- изумрудные видеобаннеры и заключительный блок ---------- */
.band { --bandc: #0A2523;
  --fade: linear-gradient(180deg, #F4EEE4 calc(var(--fh) * 0), color-mix(in srgb, #F4EEE4 95.5%, #7FA08F) calc(var(--fh) * 0.0833), color-mix(in srgb, #F4EEE4 82.4%, #7FA08F) calc(var(--fh) * 0.1667), color-mix(in srgb, #F4EEE4 61.5%, #7FA08F) calc(var(--fh) * 0.25), color-mix(in srgb, #F4EEE4 34.2%, #7FA08F) calc(var(--fh) * 0.3333), color-mix(in srgb, #F4EEE4 2.5%, #7FA08F) calc(var(--fh) * 0.4167), color-mix(in srgb, #7FA08F 62.5%, #3C6B5E) calc(var(--fh) * 0.5), color-mix(in srgb, #7FA08F 22.1%, #3C6B5E) calc(var(--fh) * 0.5833), color-mix(in srgb, #3C6B5E 83.3%, var(--bandc)) calc(var(--fh) * 0.6667), color-mix(in srgb, #3C6B5E 48.8%, var(--bandc)) calc(var(--fh) * 0.75), color-mix(in srgb, #3C6B5E 22.3%, var(--bandc)) calc(var(--fh) * 0.8333), color-mix(in srgb, #3C6B5E 5.7%, var(--bandc)) calc(var(--fh) * 0.9167), var(--bandc) calc(var(--fh) * 1), var(--bandc) calc(100% - var(--fh)), var(--bandc) calc(100% - var(--fh) * 1), color-mix(in srgb, #3C6B5E 5.7%, var(--bandc)) calc(100% - var(--fh) * 0.9167), color-mix(in srgb, #3C6B5E 22.3%, var(--bandc)) calc(100% - var(--fh) * 0.8333), color-mix(in srgb, #3C6B5E 48.8%, var(--bandc)) calc(100% - var(--fh) * 0.75), color-mix(in srgb, #3C6B5E 83.3%, var(--bandc)) calc(100% - var(--fh) * 0.6667), color-mix(in srgb, #7FA08F 22.1%, #3C6B5E) calc(100% - var(--fh) * 0.5833), color-mix(in srgb, #7FA08F 62.5%, #3C6B5E) calc(100% - var(--fh) * 0.5), color-mix(in srgb, #F4EEE4 2.5%, #7FA08F) calc(100% - var(--fh) * 0.4167), color-mix(in srgb, #F4EEE4 34.2%, #7FA08F) calc(100% - var(--fh) * 0.3333), color-mix(in srgb, #F4EEE4 61.5%, #7FA08F) calc(100% - var(--fh) * 0.25), color-mix(in srgb, #F4EEE4 82.4%, #7FA08F) calc(100% - var(--fh) * 0.1667), color-mix(in srgb, #F4EEE4 95.5%, #7FA08F) calc(100% - var(--fh) * 0.0833), #F4EEE4 calc(100% - var(--fh) * 0)); }
.band--b { --bandc: #14302A; }
.band { position: relative; isolation: isolate; overflow: hidden; background-color: var(--bandc); color: #F3EEE3;
  background-image: var(--fade); background-repeat: no-repeat; }
.band--b { background-color: #14302A; }
.band__media { position: absolute; inset: 0; z-index: -1; -webkit-mask-image: var(--vmask); mask-image: var(--vmask); }
.band__media picture, .band__media img, .band__media video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.band__media::after { content: ""; position: absolute; inset: 0; background: rgba(10, 37, 35, .66); }
.band--b .band__media::after { background: rgba(20, 48, 42, .76); }
.band__in { max-width: 760px; margin: 0 auto; padding: var(--fh) var(--gap); }
.banner-title { font: 400 clamp(30px, 4vw, 48px)/1.14 Oranienbaum, serif; color: #F3EEE3; }
/* баннер — пауза между блоками: видео открыто на полосе в 55 % экрана (на широком 45 %), переходы прежние */
.banner { display: flex; align-items: center; min-height: calc(var(--fh) * 2 + 55vh); min-height: calc(var(--fh) * 2 + 55svh); }
.banner .band__in { width: 100%; }
/* финал: перед заголовком видео открыто полосой; на переходе и под текстом затемнение прежнее, поэтому шва нет и контраст тот же */
.final { --open: 30vh; --open: 30svh; }
.final .band__in { padding-top: calc(var(--fh) + var(--open)); }
.final .band__media::after { background: linear-gradient(180deg, rgba(10, 37, 35, .9) 0, rgba(10, 37, 35, .9) calc(var(--fh) * .7), rgba(10, 37, 35, .6) calc(var(--fh) + var(--open) * .2), rgba(10, 37, 35, .6) calc(var(--fh) + var(--open) * .5), rgba(10, 37, 35, .9) calc(var(--fh) + var(--open))); }
video { opacity: 0; transition: opacity .6s ease; }
.is-playing video { opacity: 1; }

/* ---------- пункты-цитаты ---------- */
#poluchaete .wrap > h2 { margin-bottom: 32px; }
#poluchaete h3 { margin-bottom: 16px; }
.items { margin-top: 36px; border-bottom: 1px solid rgba(201, 161, 94, .7); }
.item { border-top: 1px solid rgba(201, 161, 94, .7); }
.item summary {
  position: relative; display: flex; align-items: center; min-height: 64px; padding: 18px 48px 18px 0; cursor: pointer;
  list-style: none; font: 400 20px/1.3 Oranienbaum, serif; transition: color .2s ease, opacity .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.item summary::-webkit-details-marker { display: none; }
.item summary::before, .item summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 1px; background: #C9A15E; margin-top: -.5px;
  transition: transform .25s ease;
}
.item summary::before { transform: rotate(90deg); }
.item[open]:not(.is-closing) summary::before { transform: rotate(0deg); }
@media (hover: hover) and (pointer: fine) { .item summary:hover { color: #7D5E27; } }
.item summary:active { opacity: .65; }
.item summary:focus-visible { outline-offset: -2px; }
.ans { padding: 0 0 24px; font-size: 17px; }
.item.is-moving .ans { overflow: hidden; }

/* ---------- финал: кнопка и QR ---------- */
.final .band__in > div + .cta-row, .final .cta-row { margin-top: 40px; }
.final .band__in > h2 + div { margin-top: 24px; }
.final .band__in p + p { margin-top: 20px; }
.cta-row { display: flex; flex-direction: column; gap: 28px; }
.qr { display: none; }
.note { margin-top: 36px; font-size: 16px; font-weight: 400; color: #A9B3A6; }
.note em { font-style: italic; }
@media (min-width: 900px) {
  .wrap { padding-top: 80px; padding-bottom: 80px; }
  .cta-row { flex-direction: row; align-items: center; gap: 28px; }
  .cta-row { gap: 24px; }
  .cta-row .btn { flex: none; }
  .qr { display: flex; align-items: center; gap: 14px; flex: none; text-decoration: none; color: #A9B3A6; font-size: 16px; line-height: 1.4;
        transition: transform .2s ease, color .2s ease; }
  .qr img { width: 112px; height: 112px; border-radius: 2px; }
  .qr span { width: 150px; text-wrap: balance; }
  .qr:hover { transform: translateY(-2px); color: #F3EEE3; }
  .qr:active { transform: none; }
}

/* ---------- широкий экран: заголовок слева, текст справа; левый край совпадает с текстом первого экрана ---------- */
@media (min-width: 1280px) {
  main .wrap, .final .band__in { display: grid; grid-template-columns: minmax(0, 1fr) 720px; column-gap: 56px; align-items: start; max-width: 1500px; padding-left: 7vw; padding-right: 7vw; }
  main .wrap > *, .final .band__in > * { grid-column: 2; }
  main .wrap > h2, .final .band__in > h2 { grid-column: 1; grid-row: 1 / span 12; font-size: clamp(38px, 3.2vw, 48px); }
  main .wrap > h2 { position: sticky; top: 48px; }
  .wrap > h2 + p, .wrap > h2 + div, .final .band__in > h2 + div { margin-top: 0; }
  #poluchaete .wrap > h2 { margin-bottom: 0; }
  .band__in { max-width: 1500px; padding-left: 7vw; padding-right: 7vw; }
  .banner { min-height: calc(var(--fh) * 2 + 45vh); min-height: calc(var(--fh) * 2 + 45svh); }
  .banner-title { max-width: 16em; }
}

/* ---------- подвал (светлый, после плавного перехода из изумрудного) ---------- */
.foot { background: #F4EEE4; color: #5B6A61; }
.foot .wrap { padding-top: 40px; padding-bottom: calc(56px + env(safe-area-inset-bottom)); font-size: 16px; font-weight: 400; }
.foot-logo { width: 140px; height: auto; margin-bottom: 28px; }
.foot p + p { margin-top: 12px; }
.docs { list-style: none; padding: 0; margin-top: 28px; }
.foot a { color: #14302A; text-decoration-color: rgba(201, 161, 94, .9); text-underline-offset: 4px; transition: color .2s ease; }
.foot p a, .foot .docs a { display: inline-block; padding: 8px 0; min-height: 44px; }
@media (hover: hover) and (pointer: fine) {
  .foot a:hover { color: #7D5E27; }
  .foot .btn-ghost:hover { color: #14302A; }
}
.foot a:active { opacity: .65; }
.foot .btn-ghost { display: inline-flex; margin-top: 16px; padding: 6px 8px 6px 22px; text-decoration: none; }

/* ---------- закреплённая кнопка: та же кнопка, 14 px в одну строку; на телефоне во всю ширину, на компьютере компактная ---------- */
.sticky {
  position: fixed; z-index: 10; display: flex;
  left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom));
  visibility: hidden; opacity: 0; transform: translateY(24px);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.sticky.on { visibility: visible; opacity: 1; transform: none; transition: opacity .3s ease, transform .3s ease; }
.sticky.on:active { transform: scale(.98); }
.btn.sticky { min-height: 48px; padding: 5px 6px 5px 16px; gap: 8px; font-size: 14px; line-height: 1.2; letter-spacing: 0; justify-content: space-between;
  box-shadow: 0 0 0 1px rgba(201, 161, 94, .55), 0 12px 28px -14px rgba(20, 48, 42, .8); }
.btn.sticky .btn-dot { width: 34px; height: 34px; }
@media (min-width: 900px) { .sticky { right: auto; bottom: 28px; } }
@media (min-width: 1280px) { .sticky { left: 7vw; } }   /* в левой колонке: основного текста под ней нет, заголовку она уступает (main.js) */
/* мягкое затухание под кнопкой на молочном: текст уходит под неё, а не обрывается; подставляет main.js */
.sticky-veil { position: fixed; z-index: 9; left: 0; right: 0; bottom: 0; height: calc(104px + env(safe-area-inset-bottom)); pointer-events: none; opacity: 0;
  background: linear-gradient(0deg, #F4EEE4 58%, rgba(244, 238, 228, 0)); transition: opacity .3s ease; }
.sticky-veil.on { opacity: 1; }
@media (min-width: 1280px) { .sticky-veil { display: none; } }

/* ---------- линия хода чтения ---------- */
.progress { position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: 2px; background: #C9A15E; transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* ---------- появление блоков (только при включённом JS; только transform и opacity) ---------- */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
/* блок из нескольких абзацев: каждый появляется сам, когда до него дошло чтение (классы ставит main.js) */
.js .rv.rv--split { opacity: 1; transform: none; }
.js .rv-c { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .rv-c.in { opacity: 1; transform: none; }
/* заголовок баннера выходит из-под маски */
.js .banner-title.rv { clip-path: inset(-10% -5% 100% -5%); transition: opacity .5s ease, transform 1.1s var(--ease), clip-path 1.1s var(--ease); }
.js .banner-title.rv.in { clip-path: inset(-10% -5% -10% -5%); }

/* ---------- кнопка на касании: у телефона нет наведения, поэтому точка раскрывается в круг со стрелкой, когда кнопка показалась; класс ставит main.js ---------- */
@media (hover: none) {
  .btn.is-ready .btn-dot::before { transform: scale(4.75); }
  .btn.sticky.is-ready .btn-dot::before { transform: scale(4.25); }
  .btn.is-ready .btn-dot svg { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .rv-c { opacity: 1; transform: none; }
  .js .banner-title.rv { clip-path: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
  .shift { transform: none !important; }
  .progress { display: none; }
  video { display: none; }
}