/* Оформление лендинга /plus — «тёплый ламповый вечер, луч проектора».
   Отдельным файлом, а не в plus.css: тот общий для /plus_tariffs и
   редактора, и половина здешних правил (чередование тёмных полос,
   перфорация, свет проектора) там только мешала бы.

   Как устроено. Страница — лента ПОЛОС во всю ширину (.p-band), внутри
   каждой — колонка с содержимым (.p-inner). Цвет полосы задаёт не каждый
   компонент по отдельности, а сама полоса: она объявляет --card-*, --ink-*
   и прочие переменные, а карточки, списки и заголовки внутри просто ими
   пользуются. Поэтому один и тот же блок выглядит уместно и на светлой,
   и на тёмной полосе, и добавить новую полосу — это выбрать ей класс,
   а не переписывать вложенные стили. */

/* ---------- палитра полос ----------
   Тёмные тона НЕ зависят от темы сайта: тёмная полоса обязана оставаться
   тёмной и в светлой теме — на этом держится весь ритм страницы. Меняется
   только светлая полоса, чтобы в ночной теме страница не слепила. */
:root{
  --d-deep:#12100C;        /* первый экран — глубина тёмной комнаты */
  --d-room:#1C1712;        /* «проблема» и «о проекте» */
  --d-stage:#0B0907;       /* реставрация — почти чёрный, чтобы кадр светился */
  --d-ink:#F6EEDF;
  --d-muted:#CBBCA2;
  --d-line:rgba(232,184,75,.22);
  --d-card:rgba(255,255,255,.045);
  --gold:#E8B84B;
  --gold-soft:#FFD98A;
  --gold-deep:#C98A2B;
  --l-bg:#FAF5EA;
  --l-alt:#F3ECDC;
  --l-ink:#2A241C;
  --l-muted:#857A69;
  --l-line:#E6DCC9;
  --l-card:#FFFFFF;
}
/* В ночной теме «светлые» полосы остаются тёмными — но ощутимо светлее
   тёмных, иначе всё чередование схлопывается в одно полотно (первая
   версия давала 35,29,23 против 28,23,18 — глаз такой разницы не видит).
   Поэтому здесь не «чуть темнее светлого», а отдельная пара тонов,
   разведённая с --d-room намеренно широко. */
[data-theme=dark]{
  --l-bg:#332B22;
  --l-alt:#2B241C;
  --l-ink:#F2EADB;
  --l-muted:#B5A78F;
  --l-line:#4A4034;
  --l-card:#3D3429;
}

/* Зерно плёнки — один и тот же слой для всех тёмных полос. Инлайновый SVG,
   а не картинка: 300 байт против запроса к серверу, и масштабируется без
   мыла. Рисуется один раз, потом лежит в кэше растра браузера. */
:root{
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
}

body.plus-page{background:var(--l-bg);color:var(--l-ink);
  font-family:Manrope,system-ui,sans-serif;line-height:1.6;
  overflow-x:hidden}          /* страховка от горизонтальной прокрутки */

/* ---------- появление при прокрутке ----------
   Класс js-reveal ставит крошечный скрипт в <head> — и только если в
   браузере есть IntersectionObserver и человек не просил убрать анимации.
   Без него правила ниже не действуют вовсе, и страница видна полностью
   даже с выключенным JS (это же важно и поисковику). */
.js-reveal .p-reveal{opacity:0;transform:translateY(22px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),
             transform .55s cubic-bezier(.22,.61,.36,1)}
.js-reveal .p-reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js-reveal .p-reveal{opacity:1;transform:none;transition:none}
}

/* ---------- шапка поверх первого экрана ---------- */
.plus-page .p-top{position:absolute;top:0;left:0;right:0;z-index:5;
  max-width:1120px;padding:18px 24px}
.plus-page .p-top .p-brand{color:var(--d-ink)}
.plus-page .p-top .p-top-back{color:rgba(246,238,223,.72)}
.plus-page .p-top .p-top-back:hover{color:var(--gold-soft)}

/* ---------- ЭКРАН 1 — первый экран ----------
   min-height через svh, а не vh: на телефоне vh считается от экрана БЕЗ
   адресной строки, и кнопка уезжала бы под неё. svh — «маленькая» высота,
   та, что видна при развёрнутом интерфейсе браузера, то есть худший
   случай. Ровно его и надо уместить без прокрутки. */
.p-hero{position:relative;isolation:isolate;overflow:hidden;
  background:var(--d-deep);color:var(--d-ink);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:96px 20px 64px;
  min-height:calc(100vh - 0px);
  min-height:min(820px, 100svh)}

/* Фотография первым слоем — если её не задали, остаётся только свет и
   зерно (см. ::before/::after), и экран всё равно выглядит законченным.

   Собственное затемнение у фотографии, а не общая виньетка сверху: любой
   кадр диафильма светлее текста поверх него, и без этого слоя заголовок
   тонул в картинке (проверено на первой же загруженной фотографии).
   Лёгкое размытие оставляет фон фоном — он должен создавать настроение,
   а не соревноваться с заголовком за внимание. */
.p-hero-bg{position:absolute;inset:0;z-index:-3;background-size:cover;
  background-position:center;opacity:.55;
  filter:saturate(.8) contrast(1.02) blur(1.5px)}
.p-hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(9,7,5,.74), rgba(9,7,5,.58) 42%,
             rgba(9,7,5,.88))}

/* Луч проектора: тёплое пятно сверху + конус света. blur сглаживает
   границы градиента, иначе конус выглядит вырезанным ножницами. */
.p-hero::before{content:"";position:absolute;inset:-25% -15% auto -15%;
  height:135%;z-index:-2;pointer-events:none;filter:blur(8px);
  background:
    radial-gradient(56% 40% at 50% 2%, rgba(255,205,120,.38), transparent 70%),
    conic-gradient(from 180deg at 50% -8%, transparent 41%,
                   rgba(255,210,135,.20) 50%, transparent 59%)}
/* Виньетка и зерно — поверх фотографии, но под текстом. */
.p-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  pointer-events:none;opacity:.55;
  background:
    radial-gradient(125% 85% at 50% 42%, transparent 40%, rgba(0,0,0,.72) 100%),
    var(--grain)}

.p-hero-inner{max-width:780px;position:relative;z-index:1}
.p-hero h1{font-family:Alice,serif;font-weight:400;letter-spacing:.2px;
  font-size:clamp(34px,7.4vw,68px);line-height:1.08;margin:0 0 18px;
  text-wrap:balance;
  text-shadow:0 2px 40px rgba(255,201,110,.28), 0 1px 2px rgba(0,0,0,.4)}
.p-hero .p-sub{color:rgba(246,238,223,.82);margin:0 auto 32px;
  font-size:clamp(16px,2.4vw,20px);line-height:1.55;max-width:620px}

.p-hero-actions{display:flex;flex-direction:column;gap:12px;align-items:stretch}
@media(min-width:520px){
  .p-hero-actions{flex-direction:row;justify-content:center;align-items:center}
}

/* Подсказка «листайте дальше» — мягкая, не мигает, уважает reduce-motion. */
.p-hero-scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  width:26px;height:42px;border:1.5px solid rgba(246,238,223,.28);
  border-radius:14px;z-index:1;pointer-events:none}
.p-hero-scroll::after{content:"";position:absolute;left:50%;top:9px;width:3px;
  height:7px;border-radius:2px;background:var(--gold-soft);
  transform:translateX(-50%);animation:p-scroll 2s ease-in-out infinite}
@keyframes p-scroll{0%,100%{opacity:0;transform:translate(-50%,0)}
  35%{opacity:1}70%{opacity:0;transform:translate(-50%,14px)}}
@media(prefers-reduced-motion:reduce){.p-hero-scroll::after{animation:none;opacity:.8}}
@media(max-height:680px){.p-hero-scroll{display:none}}

/* ---------- кнопки ---------- */
.plus-page .btn-main{background:linear-gradient(180deg,var(--gold-soft),var(--gold-deep));
  color:#241B0C;font-size:17px;font-weight:800;letter-spacing:.2px;
  padding:16px 30px;min-height:54px;border-radius:14px;
  box-shadow:0 10px 30px rgba(201,138,43,.32), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease}
.plus-page .btn-main:hover{transform:translateY(-2px);filter:brightness(1.05);
  box-shadow:0 16px 40px rgba(201,138,43,.45), inset 0 1px 0 rgba(255,255,255,.5)}
.plus-page .btn-main:active{transform:translateY(0)}
.p-hero .btn-ghost{background:rgba(246,238,223,.06);color:var(--d-ink);
  border:1.5px solid rgba(246,238,223,.28);min-height:54px;padding:15px 24px;
  border-radius:14px;font-size:16px;backdrop-filter:blur(4px);
  transition:background .25s ease, border-color .25s ease}
.p-hero .btn-ghost:hover{background:rgba(246,238,223,.12);
  border-color:rgba(255,217,138,.55)}
@media(prefers-reduced-motion:reduce){
  .plus-page .btn-main,.p-hero .btn-ghost{transition:none}
  .plus-page .btn-main:hover{transform:none}
}

/* ---------- полосы ----------
   Щедрые отступы МЕЖДУ полосами (здесь) и компактные внутри блоков
   (ниже, у карточек) — как и просили: воздух снаружи, плотность внутри. */
.p-band{position:relative;overflow:hidden;
  padding:clamp(56px,8vw,112px) 20px}
.p-inner{max-width:760px;margin:0 auto;position:relative;z-index:1}
.p-inner--wide{max-width:1000px}

.p-band--light{background:var(--l-bg);color:var(--l-ink);
  --card-bg:var(--l-card);--card-line:var(--l-line);--txt-muted:var(--l-muted);
  --ico-bg:linear-gradient(180deg,#FCEFD4,#F3DDAE);--ico-ink:#7A5514;
  --card-shadow:0 10px 30px rgba(42,36,28,.07)}
.p-band--alt{background:var(--l-alt);color:var(--l-ink);
  --card-bg:var(--l-card);--card-line:var(--l-line);--txt-muted:var(--l-muted);
  --ico-bg:linear-gradient(180deg,#FCEFD4,#F3DDAE);--ico-ink:#7A5514;
  --card-shadow:0 10px 30px rgba(42,36,28,.07)}
.p-band--dark{background:var(--d-room);color:var(--d-ink);
  --card-bg:var(--d-card);--card-line:var(--d-line);--txt-muted:var(--d-muted);
  --ico-bg:linear-gradient(180deg,rgba(255,217,138,.22),rgba(201,138,43,.16));
  --ico-ink:var(--gold-soft);
  --card-shadow:0 14px 40px rgba(0,0,0,.35)}
.p-band--stage{background:var(--d-stage)}

/* Перфорация киноплёнки по краям тёмных полос — тонкий разделитель,
   который читается как край кадра, а не как линейка. Один
   псевдоэлемент на оба края: две копии фона с разной привязкой. */
.p-band--dark::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;
  pointer-events:none;z-index:0;
  background-image:
    radial-gradient(closest-side, rgba(246,238,223,.13) 86%, transparent 90%),
    radial-gradient(closest-side, rgba(246,238,223,.13) 86%, transparent 90%),
    var(--grain);
  background-size:28px 10px, 28px 10px, 140px 140px;
  background-position:center top 10px, center bottom 10px, 0 0;
  background-repeat:repeat-x, repeat-x, repeat;
  opacity:.9}
/* Мягкий свет сверху на тёмных полосах — продолжение луча с первого экрана. */
.p-band--dark::before{content:"";position:absolute;inset:-40% -20% auto -20%;
  height:80%;z-index:0;pointer-events:none;filter:blur(10px);
  background:radial-gradient(50% 60% at 50% 0%, rgba(255,205,120,.13), transparent 70%)}

.p-inner h2{font-family:Alice,serif;font-weight:400;letter-spacing:.2px;
  font-size:clamp(26px,4.4vw,42px);line-height:1.15;text-align:center;
  margin:0 0 clamp(22px,3.2vw,36px);text-wrap:balance}

/* ---------- ЭКРАН 2 — «Знакомо?» ---------- */
.p-points{list-style:none;margin:0 0 clamp(26px,3.4vw,38px);padding:0;
  display:grid;gap:16px}
@media(min-width:840px){.p-points{grid-template-columns:repeat(3,1fr)}}
.p-points li{display:flex;gap:15px;align-items:flex-start;
  background:var(--card-bg);border:1px solid var(--card-line);
  border-radius:20px;padding:20px 20px 22px;box-shadow:var(--card-shadow)}
@media(min-width:840px){.p-points li{flex-direction:column;gap:12px}}
.p-points .ico{width:50px;height:50px;border-radius:50%;flex:none;
  display:grid;place-items:center;font-size:24px;line-height:1;
  background:var(--ico-bg);box-shadow:0 4px 14px rgba(0,0,0,.14)}
.p-points b{display:block;font-size:16.5px;line-height:1.35;margin:0 0 6px;
  font-weight:800}
.p-points p{margin:0;color:var(--txt-muted);font-size:15px;line-height:1.6}

.p-callout{position:relative;margin:0;padding:24px 24px 24px 28px;
  border-radius:20px;font-size:clamp(15.5px,1.9vw,17.5px);line-height:1.65;
  background:linear-gradient(180deg, rgba(232,184,75,.10), rgba(232,184,75,.04));
  border:1px solid var(--card-line);white-space:pre-line}
.p-callout::before{content:"";position:absolute;left:0;top:14px;bottom:14px;
  width:4px;border-radius:4px;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold-deep))}

/* ---------- ЭКРАН 3 — реставрация, главный аттракцион ---------- */
.p-restore p{color:var(--txt-muted);text-align:center;
  font-size:clamp(15px,1.9vw,17px);line-height:1.6;margin:0 auto 30px;
  max-width:660px}
.p-compare{position:relative;width:100%;aspect-ratio:1152/896;
  border-radius:clamp(14px,2vw,22px);overflow:hidden;touch-action:none;
  cursor:ew-resize;user-select:none;
  box-shadow:0 30px 90px rgba(0,0,0,.6),
             0 0 0 1px rgba(232,184,75,.28),
             0 0 70px rgba(232,184,75,.14)}
.p-compare img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;pointer-events:none;user-select:none}
.p-compare-before{clip-path:inset(0 50% 0 0)}
/* Виньетка на самом кадре — он должен выглядеть как проекция на экране,
   а не как вклеенная картинка. */
.p-compare::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(115% 85% at 50% 45%, transparent 55%, rgba(0,0,0,.42) 100%)}
.p-compare-tag{position:absolute;bottom:14px;z-index:2;
  font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(14,11,8,.62);color:#F6EEDF;padding:7px 13px;border-radius:30px;
  border:1px solid rgba(246,238,223,.18);pointer-events:none;
  backdrop-filter:blur(6px);white-space:nowrap}
.p-compare-tag.before{left:14px}
.p-compare-tag.after{right:14px}
@media(max-width:400px){.p-compare-tag{font-size:10px;padding:5px 9px;
  bottom:10px;letter-spacing:.03em}
  .p-compare-tag.before{left:10px}.p-compare-tag.after{right:10px}}

.p-compare-handle{position:absolute;top:0;bottom:0;left:50%;width:0;z-index:3;
  transform:translateX(-50%);pointer-events:none}
.p-compare-handle::before{content:"";position:absolute;top:0;bottom:0;left:50%;
  width:2px;transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,var(--gold) 10%,
             var(--gold-soft) 50%,var(--gold) 90%,transparent);
  box-shadow:0 0 16px rgba(232,184,75,.85)}
.p-compare-handle::after{content:"↔";position:absolute;top:50%;left:50%;
  width:46px;height:46px;transform:translate(-50%,-50%);border-radius:50%;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold-deep));
  color:#241B0C;display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:700;
  box-shadow:0 8px 24px rgba(0,0,0,.55), 0 0 0 5px rgba(232,184,75,.16)}
.p-compare-caption{text-align:center;color:var(--txt-muted);font-size:14.5px;
  margin:18px 0 0}
/* Кнопка подписки сразу под ползунком — последнее, что видит человек
   перед тарифами, поэтому крупная и по центру, как в первом экране. */
.p-restore{text-align:center}
.p-final-cta{margin:34px 0 0}

/* ---------- ЭКРАН 4 — что входит ---------- */
.p-feat-groups{display:grid;gap:18px}
@media(min-width:860px){.p-feat-groups{grid-template-columns:repeat(3,1fr)}}
.p-feat-group{background:var(--card-bg);border:1px solid var(--card-line);
  border-radius:22px;padding:26px 22px;box-shadow:var(--card-shadow);
  transition:transform .3s ease, box-shadow .3s ease}
.p-feat-group:hover{transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(42,36,28,.12)}
@media(prefers-reduced-motion:reduce){
  .p-feat-group{transition:none}.p-feat-group:hover{transform:none}
}
.p-feat-group h3{font-family:Alice,serif;font-weight:400;font-size:20px;
  line-height:1.25;margin:0 0 16px;text-wrap:balance}
.p-feat-group ul{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:14px}
.p-feat-group li{display:flex;gap:12px;align-items:flex-start;
  font-size:15px;line-height:1.5;background:none;border:none;padding:0}
.p-feat-ico{width:36px;height:36px;border-radius:50%;flex:none;display:grid;
  place-items:center;font-size:17px;line-height:1;background:var(--ico-bg);
  color:var(--ico-ink)}

/* ---------- вопросы и ответы ---------- */
.p-accordion{display:flex;flex-direction:column;gap:12px}
.p-accordion details{background:var(--card-bg);border:1px solid var(--card-line);
  border-radius:16px;padding:2px 20px;box-shadow:var(--card-shadow);
  transition:border-color .25s ease}
.p-accordion details[open]{border-color:rgba(201,138,43,.45)}
.p-accordion summary{cursor:pointer;font-weight:700;font-size:15.5px;
  line-height:1.45;padding:18px 32px 18px 0;list-style:none;position:relative}
.p-accordion summary::-webkit-details-marker{display:none}
.p-accordion summary::after{content:"+";position:absolute;right:0;top:50%;
  transform:translateY(-50%);width:26px;height:26px;border-radius:50%;
  background:var(--ico-bg);color:var(--ico-ink);display:grid;place-items:center;
  font-size:17px;line-height:1;font-weight:700}
.p-accordion details[open] summary::after{content:"−"}
.p-accordion p{margin:0 0 18px;color:var(--txt-muted);font-size:15px;
  line-height:1.6}

/* ---------- о проекте ---------- */
.p-about{text-align:center}
.p-about-photo{width:clamp(120px,22vw,168px);height:clamp(120px,22vw,168px);
  border-radius:50%;object-fit:cover;margin:0 auto 22px;
  border:3px solid rgba(232,184,75,.35);
  box-shadow:0 14px 40px rgba(0,0,0,.4), 0 0 50px rgba(232,184,75,.12)}
.p-about-photo--empty{display:grid;place-items:center;font-size:40px;
  background:var(--card-bg);color:var(--txt-muted)}
.p-about p{color:var(--txt-muted);font-size:clamp(15px,1.9vw,17px);
  line-height:1.7;max-width:640px;margin:0 auto 16px}
.p-about .btn-main{margin-top:14px}

/* ---------- фотографии между экранами ----------
   Полоса-вставка: фото во всю колонку, мягкая виньетка, подпись под ним.
   Если фото несколько — на десктопе встают сеткой. */
.p-shots{display:grid;gap:clamp(18px,2.4vw,28px)}
@media(min-width:820px){.p-shots.p-shots--multi{grid-template-columns:repeat(2,1fr)}}
.p-shots figure{margin:0;position:relative}
.p-shots img{width:100%;border-radius:18px;
  box-shadow:0 18px 50px rgba(42,36,28,.16), 0 0 0 1px var(--card-line)}
.p-band--dark .p-shots img{box-shadow:0 22px 60px rgba(0,0,0,.5),
  0 0 0 1px rgba(232,184,75,.2)}
.p-shots figcaption{text-align:center;color:var(--txt-muted);font-size:14px;
  line-height:1.5;margin-top:12px}

/* ---------- подвал ---------- */
.plus-page .p-footer{background:var(--d-room);color:rgba(246,238,223,.6);
  border-top:none;padding:26px 20px 34px}
.plus-page .p-footer a{color:rgba(246,238,223,.6)}
.plus-page .p-footer a:hover{color:var(--gold-soft)}