/* =========================================================================
   «Скрытые калории» — лендинг гайда Екатерины Пак.
   Дизайн-язык взят из самого PDF (тема seria), а не из других лендингов:
     • поверхности  — бумага #F4EFE6, песок #EAE2D3, ночь #191412;
     • акцент       — терракота #B0402F (текст/заливка), светлый #E8A79C на ночи;
     • шрифты       — Onest 700 в заголовках, Inter в тексте, Oswald в цифрах,
                      Marck Script в подписи автора;
     • приёмы       — тире-eyebrow, волосяные линии, крупный кегль, номера 01–06,
                      полноэкранные кадры с затемнением под текст.
   Правило: ни теней, ни цветных градиентов; градиент — только затемнение фото.
   ========================================================================= */

@font-face { font-family:"Onest"; src:url("шрифты/Onest-400.woff2") format("woff2"); font-weight:400; font-display:swap }
@font-face { font-family:"Onest"; src:url("шрифты/Onest-500.woff2") format("woff2"); font-weight:500; font-display:swap }
@font-face { font-family:"Onest"; src:url("шрифты/Onest-600.woff2") format("woff2"); font-weight:600; font-display:swap }
@font-face { font-family:"Onest"; src:url("шрифты/Onest-700.woff2") format("woff2"); font-weight:700; font-display:swap }
@font-face { font-family:"Onest"; src:url("шрифты/Onest-800.woff2") format("woff2"); font-weight:800; font-display:swap }
@font-face { font-family:"Inter"; src:url("шрифты/Inter-400.woff2") format("woff2"); font-weight:400; font-display:swap }
@font-face { font-family:"Inter"; src:url("шрифты/Inter-500.woff2") format("woff2"); font-weight:500; font-display:swap }
@font-face { font-family:"Inter"; src:url("шрифты/Inter-600.woff2") format("woff2"); font-weight:600; font-display:swap }
@font-face { font-family:"Oswald"; src:url("шрифты/Oswald-500.woff2") format("woff2"); font-weight:500; font-display:swap }
@font-face { font-family:"Marck"; src:url("шрифты/MarckScript-400.woff2") format("woff2"); font-weight:400; font-display:swap }

:root{
  /* поверхности и текст */
  --paper:#F4EFE6; --paper-2:#EAE2D3; --card:#FFFDF8;
  --ink:#241C17; --ink-2:#4C4038; --ink-3:#6E6053;
  --line:rgba(36,28,23,.13); --line-d:rgba(244,239,230,.18);
  /* ночь */
  --night:#191412; --night-2:#221B18;
  /* акцент */
  --accent-d:#B0402F; --accent:#C9564A; --accent-l:#E8A79C;
  /* второй акцент — «как надо» */
  --second-d:#2E7375; --second-l:#A9CFCE;

  --display:"Onest",system-ui,sans-serif;
  --text:"Inter",system-ui,sans-serif;
  --num:"Oswald",system-ui,sans-serif;
  --hand:"Marck",cursive;

  --pad:24px; --max:1360px;
  --sect-y:72px;
}
@media(min-width:900px){ :root{ --pad:56px; --sect-y:112px } }
@media(min-width:1200px){ :root{ --pad:72px } }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--text); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block }
a{ color:inherit }

h1,h2,h3{ font-family:var(--display); font-weight:700; margin:0;
          letter-spacing:-.022em; line-height:1.03; text-wrap:balance }
h1 em, h2 em{ font-style:normal; color:var(--accent-d) }

.lead{ font-size:clamp(17px,1.3vw,21px); line-height:1.5; color:var(--ink-2); margin:0 }
.lead--d{ color:rgba(244,239,230,.8) }

/* ---------- eyebrow: красное тире + капс, как на страницах гайда ---------- */
.eyebrow{
  display:flex; align-items:center; gap:14px; margin:0;
  font-family:var(--display); font-size:11.5px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--accent-d);
}
.eyebrow::before{ content:""; width:46px; height:2px; background:currentColor; flex:none }
.eyebrow--d{ color:var(--accent-l) }

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:18px 34px; border:1px solid transparent; border-radius:999px;
  font-family:var(--display); font-weight:600; font-size:15.5px; letter-spacing:.01em;
  text-decoration:none; transition:background .18s,border-color .18s,color .18s;
  white-space:nowrap;
}
.btn--clay{ background:var(--accent-d); color:#FFF8F4 }
.btn--clay:hover{ background:#8E3225 }
.btn--ghost-d{ border-color:rgba(244,239,230,.32); color:var(--paper) }
.btn--ghost-d:hover{ background:rgba(244,239,230,.09) }
.btn--ghost{ border-color:rgba(36,28,23,.24); color:var(--ink) }
.btn--ghost:hover{ background:rgba(36,28,23,.05) }
.btn__hint{ display:block; font-family:var(--text); font-size:12.5px; color:var(--ink-3); margin-top:10px }

/* ---------- общая сетка ---------- */
.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--pad) }
.sect{ border-top:1px solid var(--line) }

/* =========================================================================
   1. ОБЛОЖКА — как первая страница гайда: ночь, кадр, «гайд для подписчиков»
   ========================================================================= */
.hero{
  background:var(--night); color:var(--paper); position:relative;
  display:grid; grid-template-columns:1fr; min-height:100svh;
}
@media(min-width:1024px){ .hero{ grid-template-columns:1.06fr .94fr } }

.hero__in{
  display:flex; flex-direction:column; gap:30px;
  padding:32px var(--pad) 44px;
}
@media(min-width:1024px){ .hero__in{ padding:44px 0 0 var(--pad); justify-content:space-between; max-width:760px } }

/* строка автора сверху — цитата обложки: имя + красная черта + подпись */
.brand{
  display:flex; flex-direction:column; gap:12px; font-family:var(--display);
  font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
}
.brand__name{ color:var(--paper) }
.brand__rule{ width:52px; height:2px; background:var(--accent-d); display:block }
.brand__sub{ color:rgba(244,239,230,.62); letter-spacing:.18em }

.hero__main{ display:flex; flex-direction:column; gap:22px; margin:auto 0 }
.hero h1{ font-size:clamp(46px,6vw,92px); font-weight:800; letter-spacing:-.03em; line-height:.98 }
.hero__sub{
  margin:0; font-family:var(--display); font-weight:400;
  font-size:clamp(18px,1.7vw,24px); line-height:1.32; color:rgba(244,239,230,.82);
  max-width:30ch;
}
.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px; margin-top:8px }
@media(max-width:599px){ .hero__cta{ flex-direction:column; align-items:stretch } .hero__cta .btn{ width:100% } }

/* строка фактов внизу — Oswald-цифры, как в блоке stats */
.hero__facts{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid var(--line-d); padding-top:8px; margin-top:4px;
}
@media(max-width:599px){ .hero__facts{ grid-template-columns:1fr; gap:14px } }
.fact{ display:flex; flex-direction:column; gap:2px; padding:12px 16px 0 14px }
.fact + .fact{ padding-left:20px; border-left:1px solid var(--line-d) }
@media(max-width:599px){ .fact + .fact{ padding-left:0; border-left:0; border-top:1px solid var(--line-d); padding-top:12px } }
.fact b{ font-family:var(--num); font-weight:500; font-size:clamp(26px,2.4vw,34px);
         line-height:1; letter-spacing:.01em; color:var(--paper) }
.fact span{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,239,230,.55) }

.hero__photo{ position:relative; min-height:56svh; order:-1 }
@media(min-width:1024px){ .hero__photo{ order:0; min-height:auto } }
.hero__photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%;
                  filter:saturate(.92) contrast(1.02) brightness(.9) }
.hero__photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, var(--night) 0%, rgba(25,20,18,.55) 14%, rgba(25,20,18,0) 42%),
    linear-gradient(180deg, rgba(25,20,18,.35) 0%, rgba(25,20,18,0) 26%, rgba(25,20,18,.55) 100%);
}
@media(max-width:1023px){
  .hero__photo::after{ background:
    linear-gradient(180deg, var(--night) 0%, rgba(25,20,18,.1) 22%, rgba(25,20,18,0) 55%, var(--night) 100%) }
}

/* =========================================================================
   2. «Что такое приём пищи» — текст автора + широкий кадр
   ========================================================================= */
.meal{ background:var(--paper); padding:var(--sect-y) 0 }
.meal__in{ display:grid; grid-template-columns:1fr; gap:40px; align-items:start }
@media(min-width:1024px){ .meal__in{ grid-template-columns:.86fr 1.14fr; gap:72px } }
.meal__txt{ display:flex; flex-direction:column; gap:20px }
@media(min-width:1024px){ .meal__txt{ position:sticky; top:80px } }
.meal h2{ font-size:clamp(32px,3.5vw,58px) }
.meal__lead{ font-size:clamp(17px,1.35vw,21px); line-height:1.5; color:var(--ink-2); margin:0 }
.meal__quote{
  margin:8px 0 0; padding:20px 0 0 22px; border-top:1px solid var(--line);
  border-left:2px solid var(--accent-d);
  font-family:var(--display); font-weight:500; font-size:clamp(17px,1.4vw,21px);
  line-height:1.42; color:var(--ink);
}
.meal__pic{ margin:0 }
.meal__pic img{ width:100%; height:auto; object-fit:cover }
.meal__pic figcaption{
  margin-top:14px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}

/* =========================================================================
   3. «Это не только завтрак, обед и ужин» — крупный список с номерами
   ========================================================================= */
.foodlist{ background:var(--paper-2); padding:var(--sect-y) 0 }
.foodlist__in{ display:flex; flex-direction:column; gap:44px }
.foodlist h2{ font-size:clamp(30px,3.4vw,56px); max-width:22ch; font-weight:700 }
.foodlist__rows{ display:flex; flex-direction:column }
.foodrow{
  display:grid; grid-template-columns:auto 1fr; gap:20px 32px; align-items:baseline;
  padding:26px 0; border-top:1px solid rgba(36,28,23,.18);
}
.foodrow:last-child{ border-bottom:1px solid rgba(36,28,23,.18) }
.foodrow__n{ font-family:var(--num); font-weight:500; font-size:clamp(18px,1.6vw,24px);
             color:var(--accent-d); letter-spacing:.06em; padding-top:4px }
.foodrow__t{ font-family:var(--display); font-weight:500;
             font-size:clamp(20px,2.2vw,31px); line-height:1.3; letter-spacing:-.01em; max-width:34ch }
.foodrow__t b{ font-weight:700; color:var(--accent-d) }

/* =========================================================================
   4. Терракотовая страница определения — прямой перенос accent-страницы гайда
   ========================================================================= */
.def{ background:var(--accent-d); color:#FFF8F4; padding:var(--sect-y) 0 }
.def .eyebrow{ color:#FFE6DF }
.def__in{ display:grid; grid-template-columns:1fr; gap:40px }
@media(min-width:1024px){ .def__in{ grid-template-columns:1.06fr .94fr; gap:64px; align-items:end } }
.def h2{ font-size:clamp(32px,3.8vw,64px); max-width:20ch }
.def__card{
  border:1px solid rgba(255,248,244,.34); border-radius:28px;
  padding:30px 32px 34px; display:flex; flex-direction:column; gap:16px;
  background:rgba(255,255,255,.06);
}
.def__k{ font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.2em;
         text-transform:uppercase; color:#FFF8F4; margin:0 }
.def__q{ margin:0; font-family:var(--display); font-weight:500;
         font-size:clamp(20px,2vw,28px); line-height:1.3 }
.def__p{ margin:0; font-size:15.5px; line-height:1.55; color:#FFF8F4 }

/* =========================================================================
   5. «Где и как они образуются» — шесть причин сеткой
   ========================================================================= */
.causes{ background:var(--paper); padding:var(--sect-y) 0 }
.causes__head{ display:flex; flex-direction:column; gap:22px; max-width:760px; margin-bottom:56px }
@media(min-width:900px){ .causes__head{ flex-direction:row; align-items:flex-end; justify-content:space-between; max-width:none } }
.causes h2{ font-size:clamp(32px,3.6vw,62px) }
.causes__note{ margin:0; font-size:14px; color:var(--ink-3); max-width:26ch }

.causes__grid{ display:grid; grid-template-columns:1fr; gap:0 48px }
@media(min-width:760px){ .causes__grid{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:1200px){ .causes__grid{ grid-template-columns:repeat(3,1fr) } }

.cause{ padding:28px 0 32px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:12px }
.cause__n{ font-family:var(--num); font-weight:500; font-size:clamp(22px,2vw,30px);
           color:var(--accent-d); letter-spacing:.06em; line-height:1 }
.cause__t{ margin:0; font-family:var(--display); font-weight:600;
           font-size:clamp(18px,1.5vw,21px); line-height:1.24; letter-spacing:-.01em }
.cause__d{ margin:0; font-size:15px; line-height:1.52; color:var(--ink-2) }
.cause__d b{ font-weight:600; color:var(--ink) }

/* =========================================================================
   6. Совет — кадр слева, крупная цитата справа
   ========================================================================= */
.tip{ background:var(--paper-2); padding:var(--sect-y) 0 }
.tip__in{ display:grid; grid-template-columns:1fr; gap:36px; align-items:center }
@media(min-width:900px){ .tip__in{ grid-template-columns:.72fr 1.28fr; gap:64px } }
.tip__pic{ margin:0 }
.tip__pic img{ width:100%; height:clamp(320px,46vw,600px); object-fit:cover; object-position:50% 30% }
.tip__txt{ display:flex; flex-direction:column; gap:22px }
.tip h2{ font-size:clamp(30px,3.4vw,56px) }
.tip__p{ margin:0; font-size:clamp(16.5px,1.3vw,19px); line-height:1.55; color:var(--ink-2); max-width:42ch }
.tip__q{
  margin:6px 0 0; padding-top:22px; border-top:1px solid rgba(36,28,23,.2);
  font-family:var(--display); font-weight:500; font-size:clamp(19px,1.9vw,26px);
  line-height:1.3; color:var(--ink); max-width:34ch;
}
.tip__sig{ margin:6px 0 0; font-family:var(--hand); font-size:26px; color:var(--accent-d) }

/* =========================================================================
   7. ИТОГ — ночь и огромная цифра Oswald (перенос stats-страницы)
   ========================================================================= */
.total{ background:var(--night); color:var(--paper); padding:var(--sect-y) 0 }
.total__in{ display:grid; grid-template-columns:1fr; gap:40px }
@media(min-width:1024px){ .total__in{ grid-template-columns:.92fr 1.08fr; gap:72px; align-items:center } }
.total h2{ font-size:clamp(34px,3.8vw,64px) }
.total__lead{ margin:0; font-size:clamp(16.5px,1.3vw,19.5px); line-height:1.55;
              color:rgba(244,239,230,.78); max-width:38ch }
.total__big{
  font-family:var(--num); font-weight:500; color:var(--accent-l);
  font-size:clamp(88px,11vw,180px); line-height:.86; letter-spacing:-.01em;
  margin:0; display:block;
}
.total__cap{ margin:18px 0 0; font-size:clamp(16px,1.3vw,19px);
             line-height:1.5; color:rgba(244,239,230,.82); max-width:30ch }
.total__note{
  margin:26px 0 0; padding:18px 0 0 20px; border-top:1px solid var(--line-d);
  border-left:2px solid var(--accent-l);
  font-family:var(--display); font-weight:500; font-size:clamp(16.5px,1.35vw,20px);
  line-height:1.4; color:rgba(244,239,230,.9); max-width:36ch;
}

/* =========================================================================
   8. «Что внутри» — превью настоящих страниц гайда
   ========================================================================= */
.inside{ background:var(--paper); padding:var(--sect-y) 0 }
.inside__head{ display:flex; flex-direction:column; gap:20px; margin-bottom:48px; max-width:720px }
.inside h2{ font-size:clamp(30px,3.3vw,54px) }
.inside__lead{ margin:0; font-size:16.5px; line-height:1.55; color:var(--ink-2); max-width:52ch }

.inside__strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
@media(max-width:899px){
  .inside__strip{
    grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:minmax(190px,64%);
    overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px;
    -webkit-overflow-scrolling:touch;
  }
  .inside__strip > *{ scroll-snap-align:start }
}
.shot{ margin:0; display:flex; flex-direction:column; gap:12px }
.shot img{ width:100%; height:auto; border:1px solid rgba(36,28,23,.16); background:var(--card) }
.shot figcaption{ display:flex; gap:10px; align-items:baseline; font-size:12px; color:var(--ink-3) }
.shot b{ font-family:var(--num); font-weight:500; font-size:12.5px; letter-spacing:.08em; color:var(--accent-d) }

/* =========================================================================
   9. ФИНАЛ — кадр на всю ширину, CTA-карточка, подпись автора
   ========================================================================= */
.final{ position:relative; color:var(--paper); background:var(--night); overflow:hidden }
.final__bg{ position:absolute; inset:0; }
.final__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 26%;
                filter:grayscale(.35) contrast(1.02) brightness(.62) }
.final__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(25,20,18,.55) 0%, rgba(25,20,18,.35) 34%, rgba(25,20,18,.92) 100%);
}
.final__in{
  position:relative; display:flex; flex-direction:column; gap:26px;
  padding:clamp(120px,16vw,200px) var(--pad) 64px;
}
.final h2{ font-size:clamp(32px,3.7vw,62px); max-width:24ch }
.final__lead{ margin:0; font-family:var(--display); font-weight:400;
              font-size:clamp(18px,1.6vw,23px); line-height:1.4; color:rgba(244,239,230,.9); max-width:40ch }
.final__cta{
  display:flex; flex-wrap:wrap; align-items:center; gap:20px 28px;
  margin-top:8px; padding:26px 30px; border-radius:26px;
  border:1px solid rgba(244,239,230,.28); background:rgba(25,20,18,.42);
  max-width:760px;
}
.final__cta-t{ margin:0; flex:1 1 320px; font-family:var(--display); font-weight:600;
               font-size:clamp(18px,1.6vw,23px); line-height:1.3 }
.final__cta-p{ margin:6px 0 0; font-size:13.5px; line-height:1.5; color:rgba(244,239,230,.66) }
@media(max-width:699px){ .final__cta .btn{ width:100% } }

.final__sign{ display:flex; flex-direction:column; gap:10px; margin-top:14px }
.final__sig{ font-family:var(--hand); font-size:clamp(28px,2.6vw,38px); line-height:1; color:var(--accent-l) }
.final__meta{ font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:.2em;
              text-transform:uppercase; color:rgba(244,239,230,.55) }
.final__disc{ margin:0; font-size:12.5px; line-height:1.5; color:rgba(244,239,230,.46); max-width:56ch }

/* ---------- служебное ---------- */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
          clip:rect(0,0,0,0); white-space:nowrap; border:0 }
:focus-visible{ outline:2px solid var(--accent-d); outline-offset:3px }
.final :focus-visible, .hero :focus-visible, .total :focus-visible, .def :focus-visible{
  outline-color:var(--accent-l);
}
@media(prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

/* заголовок после eyebrow держит собственный воздух */
.eyebrow + h2{ margin-top:20px }

/* ---------- уточнения после первого рендера ---------- */
.meal__in{ gap:48px }
@media(min-width:1024px){ .meal__in{ grid-template-columns:.94fr 1.06fr; gap:64px } }
.meal__pic{ display:flex; flex-direction:column; height:100% }
.meal__pic img{ width:100%; height:clamp(380px,44vw,600px); object-fit:cover; object-position:50% 18% }

.cause{ padding:30px 0 34px; gap:10px }
.cause__t{ font-size:clamp(19px,1.6vw,23px); line-height:1.3 }
.cause__d{ font-size:15.5px; line-height:1.55 }

@media(min-width:1200px){
  .causes__grid{ gap:0 56px }
}

/* =========================================================================
   Страница оффера «Личное сопровождение».
   Тот же набор токенов и шрифтов, что у PDF (тема seria): бумага, ночь,
   терракота, Onest / Inter / Oswald, подпись Marck. Логика — продажник:
   узнавание → объяснение → «хуже» → «не всё потеряно» → оффер → кейсы → метод.
   ========================================================================= */

.eyebrow--light{ color:#FFE6DF }
h3{ font-family:var(--display); font-weight:600; letter-spacing:-.012em; line-height:1.3; margin:0 }
h4{ font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--accent-d); margin:0 0 12px }

/* ---------- списки: один вид на всю страницу ---------- */
.dots, .dash{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column }
.dots li, .dash li{ position:relative; padding:14px 0 14px 30px; border-top:1px solid var(--line);
                    font-size:clamp(16px,1.35vw,19px); line-height:1.45; color:var(--ink-2) }
.dots li:last-child, .dash li:last-child{ border-bottom:1px solid var(--line) }
.dots li::before{ content:""; position:absolute; left:4px; top:24px; width:7px; height:7px;
                  border-radius:50%; background:var(--accent-d) }
.dash li::before{ content:"—"; position:absolute; left:0; top:14px; color:var(--accent-d) }
.scene--dark .dots li, .worse .dots li{ border-color:rgba(244,239,230,.16); color:rgba(244,239,230,.82) }
.scene--dark .dots li::before{ background:var(--accent-l) }

/* ---------- что это ---------- */
.about{ background:var(--paper); padding:var(--sect-y) 0 }
.about__in{ display:grid; grid-template-columns:1fr; gap:40px; align-items:end }
@media(min-width:1000px){ .about__in{ grid-template-columns:1.15fr .85fr; gap:72px } }
.about h2{ font-size:clamp(30px,3.4vw,56px); max-width:22ch; margin:20px 0 22px }
.about__lead{ margin:0 0 16px; font-size:clamp(17px,1.35vw,21px); line-height:1.5; color:var(--ink-2) }
.about__p{ margin:0; font-size:16px; line-height:1.6; color:var(--ink-3); max-width:52ch }
.about__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
@media(max-width:599px){ .about__list{ grid-template-columns:1fr } }
.about__list li{ display:flex; flex-direction:column; gap:4px; padding-top:16px; border-top:2px solid var(--accent-d) }
.about__list b{ font-family:var(--num); font-weight:500; font-size:clamp(28px,2.6vw,40px); line-height:1 }
.about__list span{ font-size:13px; line-height:1.4; color:var(--ink-3) }

/* ---------- сцены: типографическая сетка, без иллюстраций ---------- */
.scenes{ background:var(--paper); padding:var(--sect-y) 0 }
.scenes__head{ max-width:780px; margin-bottom:44px }
.scenes__head h2{ font-size:clamp(34px,3.9vw,66px); margin-top:18px }

.scenes__grid{ display:grid; grid-template-columns:1fr; border-top:1px solid var(--line) }
@media(min-width:900px){ .scenes__grid{ grid-template-columns:1fr 1fr } }

.scene{ display:flex; flex-direction:column; gap:16px;
        padding:38px 0 42px; border-bottom:1px solid var(--line) }
@media(min-width:900px){
  .scene{ padding:52px 56px 56px 0 }
  .scene:nth-child(odd){ border-right:1px solid var(--line) }
  .scene:nth-child(even){ padding-left:56px; padding-right:0 }
}
.scene__n{ font-family:var(--num); font-weight:500; font-size:clamp(30px,3vw,44px);
           line-height:1; color:var(--accent-d); letter-spacing:.04em }
.scene h3{ font-size:clamp(21px,2vw,29px); line-height:1.3; letter-spacing:-.014em; max-width:24ch }
.scene .dots li{ font-size:clamp(15px,1.15vw,17px); padding-top:11px; padding-bottom:11px }
.scene .dots li::before{ top:20px; width:6px; height:6px }

/* ---------- не виновата ---------- */
.accuse{ background:var(--accent-d); color:#FFF8F4; padding:var(--sect-y) 0 }
.accuse__in{ display:grid; grid-template-columns:1fr; gap:34px }
@media(min-width:1000px){ .accuse__in{ grid-template-columns:1.1fr .9fr; gap:64px; align-items:start } }
.accuse h2{ font-size:clamp(32px,3.8vw,64px); color:#fff; margin:18px 0 18px }
.accuse__lead{ margin:0 0 22px; font-size:clamp(16px,1.3vw,19px); line-height:1.5; color:rgba(255,248,244,.9); max-width:38ch }
.accuse__big{ margin:0; font-family:var(--display); font-weight:600; font-size:clamp(22px,2.4vw,34px);
              line-height:1.3; color:#fff; max-width:22ch }
.accuse__list{ list-style:none; margin:0; padding:0 }
.accuse__list li{ padding:14px 0; border-top:1px solid rgba(255,248,244,.26);
                  font-size:clamp(16px,1.4vw,19px); line-height:1.4; color:rgba(255,248,244,.94) }
.accuse__list li:last-child{ border-bottom:1px solid rgba(255,248,244,.26) }
.accuse__note{ margin:38px auto 0; max-width:var(--max); font-family:var(--display); font-weight:600;
               font-size:clamp(20px,2vw,28px); line-height:1.3; color:#fff }

/* ---------- почему не работает ---------- */
.why{ background:var(--paper); padding:var(--sect-y) 0 }
.why__head{ max-width:820px; margin-bottom:48px }
.why__head h2{ font-size:clamp(30px,3.4vw,56px); margin-top:18px }
.why__grid{ display:grid; grid-template-columns:1fr; gap:0 56px }
@media(min-width:1000px){ .why__grid{ grid-template-columns:1fr 1fr } }
.why__item{ padding:30px 0 34px; border-top:2px solid var(--ink); display:flex; flex-direction:column; gap:14px }
.why__num{ font-family:var(--num); font-weight:500; font-size:clamp(46px,5vw,84px); line-height:.9;
           color:var(--accent-d); letter-spacing:-.01em }
.why__item h3{ font-size:clamp(20px,1.9vw,27px); line-height:1.3; max-width:26ch }
.why__item p{ margin:0; font-size:15.5px; line-height:1.58; color:var(--ink-2) }

/* ---------- дальше хуже ---------- */
.worse{ background:var(--night); color:var(--paper); padding:var(--sect-y) 0 }
.worse h2{ font-size:clamp(32px,3.7vw,62px); margin:18px 0 20px; color:var(--paper) }
.worse__lead{ margin:0 0 34px; font-size:clamp(16px,1.3vw,19px); color:rgba(244,239,230,.78); max-width:44ch }
.worse__rows{ display:grid; grid-template-columns:1fr; gap:0 48px }
@media(min-width:900px){ .worse__rows{ grid-template-columns:1fr 1fr } }
.worse__rows p{ margin:0; padding:22px 0 22px 24px; border-top:1px solid rgba(244,239,230,.16);
                border-left:2px solid var(--accent-l); font-size:15.5px; line-height:1.55;
                color:rgba(244,239,230,.84) }
.worse__note{ margin:36px 0 0; max-width:46ch; font-family:var(--display); font-weight:500;
              font-size:clamp(18px,1.8vw,25px); line-height:1.34; color:var(--paper) }

/* ---------- не всё потеряно ---------- */
.hope{ background:var(--paper-2); padding:var(--sect-y) 0 }
.hope__in{ display:grid; grid-template-columns:1fr; gap:36px; align-items:center }
@media(min-width:1000px){ .hope__in{ grid-template-columns:1.1fr .9fr; gap:64px } }
.hope h2{ font-size:clamp(30px,3.4vw,54px); margin:18px 0 14px; max-width:20ch }
.hope__lead{ margin:0 0 18px; font-size:clamp(16px,1.3vw,19px); color:var(--ink-2) }
.hope__list{ list-style:none; margin:0; padding:0 }
.hope__list li{ position:relative; padding:15px 0 15px 30px; border-top:1px solid rgba(36,28,23,.16);
                font-size:16px; line-height:1.5; color:var(--ink-2) }
.hope__list li:last-child{ border-bottom:1px solid rgba(36,28,23,.16) }
.hope__list li::before{ content:""; position:absolute; left:4px; top:23px; width:8px; height:8px;
                        border-radius:50%; border:2px solid var(--accent-d) }
.hope__pic{ margin:0 }
.hope__pic img{ width:100%; height:clamp(340px,44vw,600px); object-fit:cover; object-position:50% 24% }
.hope__pic figcaption{ margin-top:12px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3) }

/* ---------- оффер ---------- */
.offer{ background:var(--accent-d); color:#FFF8F4; padding:var(--sect-y) 0 }
.offer h2{ font-size:clamp(30px,3.6vw,58px); color:#fff; margin:18px 0 20px; max-width:24ch }
.offer__lead{ margin:0 0 14px; font-size:clamp(17px,1.4vw,21px); line-height:1.5;
              color:rgba(255,248,244,.94); max-width:46ch }
.offer__note{ margin:0 0 30px; font-size:15.5px; line-height:1.5; color:rgba(255,248,244,.94); max-width:44ch }
.offer__row{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px }
.offer__hint{ font-size:13.5px; color:rgba(255,248,244,.95) }

/* ---------- кейсы ---------- */
.cases{ background:var(--paper); padding:var(--sect-y) 0 }
.cases__head{ max-width:780px; margin-bottom:20px }
.cases__head h2{ font-size:clamp(30px,3.4vw,56px); margin:18px 0 16px }
.cases__lead{ margin:0; font-size:15.5px; line-height:1.6; color:var(--ink-3); max-width:62ch }
.case{ display:grid; grid-template-columns:1fr; gap:28px; padding:40px 0;
       border-top:1px solid var(--line); margin-top:36px }
@media(min-width:1000px){ .case{ grid-template-columns:.42fr 1.58fr; gap:56px; padding:48px 0 } }
.case__shots{ display:grid; grid-template-columns:1fr 1fr; gap:12px; align-self:start }
.case__shot{ margin:0 }
.case__shot img{ width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border:1px solid rgba(36,28,23,.14); background:var(--paper-2) }
.case__shot figcaption{ margin-top:8px; font-family:var(--num); font-size:12px; letter-spacing:.14em;
                        text-transform:uppercase; color:var(--ink-3) }
.case__body h3{ font-size:clamp(24px,2.3vw,34px); margin-bottom:22px }
.case__cols{ display:grid; grid-template-columns:1fr; gap:24px }
@media(min-width:760px){ .case__cols{ grid-template-columns:1fr 1fr; gap:40px } }
.case__cols .dash li{ font-size:15px; padding-top:11px; padding-bottom:11px }
.case__cols .dash li::before{ top:11px }
.cases__note{ margin:34px 0 0; font-size:13.5px; color:var(--ink-3); max-width:62ch }

/* ---------- механизм ---------- */
.steps{ background:var(--paper-2); padding:var(--sect-y) 0 }
.steps__head{ max-width:820px; margin-bottom:44px }
.steps__head h2{ font-size:clamp(30px,3.4vw,56px); margin:18px 0 16px }
.steps__lead{ margin:0; font-size:16px; line-height:1.6; color:var(--ink-2) }
.steps__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column }
.steps__list > li{ display:grid; grid-template-columns:auto 1fr; gap:20px 32px;
                   padding:30px 0 34px; border-top:1px solid rgba(36,28,23,.2) }
.steps__list > li:last-child{ border-bottom:1px solid rgba(36,28,23,.2) }
@media(min-width:760px){ .steps__list > li{ gap:20px 48px; grid-template-columns:96px 1fr } }
.steps__n{ font-family:var(--num); font-weight:500; font-size:clamp(30px,3vw,46px); line-height:.95;
           color:var(--accent-d); letter-spacing:.02em }
.steps__list h3{ font-size:clamp(19px,1.8vw,25px); margin-bottom:12px; max-width:30ch }
.steps__list p{ margin:0 0 10px; font-size:15.5px; line-height:1.56; color:var(--ink-2); max-width:62ch }
.steps__list p:last-child{ margin-bottom:0 }
.steps__list b{ font-weight:600; color:var(--ink) }

/* ---------- было → стало ---------- */
.cmp{ background:var(--paper); padding:var(--sect-y) 0 }
.cmp h2{ font-size:clamp(30px,3.4vw,54px); margin:18px 0 34px }
.cmp__grid{ display:grid; grid-template-columns:1fr; gap:26px }
@media(min-width:900px){ .cmp__grid{ grid-template-columns:1fr 1fr; gap:40px } }
.cmp__col{ padding:26px 26px 30px; border-radius:24px }
.cmp__col h3{ font-size:15px; letter-spacing:.04em; margin-bottom:16px }
.cmp__col ul{ list-style:none; margin:0; padding:0 }
.cmp__col li{ position:relative; padding:11px 0 11px 24px; font-size:15.5px; line-height:1.5 }
.cmp__col--no{ background:rgba(36,28,23,.05); color:var(--ink-2) }
.cmp__col--no h3{ color:var(--ink-3) }
.cmp__col--no li{ border-top:1px solid rgba(36,28,23,.1) }
.cmp__col--no li::before{ content:"—"; position:absolute; left:0; color:var(--ink-3) }
.cmp__col--yes{ background:var(--card); border:1px solid rgba(36,28,23,.12); color:var(--ink) }
.cmp__col--yes h3{ color:var(--accent-d) }
.cmp__col--yes li{ border-top:1px solid rgba(36,28,23,.1) }
.cmp__col--yes li::before{ content:"—"; position:absolute; left:0; color:var(--accent-d) }

/* ---------- бонусы ---------- */
.bonus{ background:var(--paper-2); padding:var(--sect-y) 0 }
.bonus h2{ font-size:clamp(30px,3.2vw,52px); margin:18px 0 34px }
.bonus__grid{ display:grid; grid-template-columns:1fr; gap:28px }
@media(min-width:760px){ .bonus__grid{ grid-template-columns:repeat(3,1fr); gap:32px } }
.bonus__card{ margin:0; display:flex; flex-direction:column; gap:14px }
.bonus__card img{ width:100%; height:auto; border:1px solid rgba(36,28,23,.14) }
.bonus__card figcaption{ font-size:14px; line-height:1.5; color:var(--ink-2) }
.bonus__card b{ display:block; color:var(--ink); margin-bottom:4px }

/* кнопка на терракотовой заливке (в базовом наборе её не было) */
.btn--cream{ background:var(--paper); color:var(--night); border-color:transparent }
.btn--cream:hover{ background:#fff }

/* дробление плотного текста: лейбл отдельной строкой */
.lbl{ display:block; font-family:var(--display); font-size:10.5px; font-weight:600;
      letter-spacing:.2em; text-transform:uppercase; color:var(--accent-d); margin-bottom:7px; font-size:11px }
.steps__list p{ margin-bottom:16px }

/* кейсы: больше воздуха, крупные подписи точек */
.case{ padding:56px 0; margin-top:8px }
.case__body h3{ font-size:clamp(26px,2.5vw,38px); margin-bottom:26px }
.case__cols h4{ font-size:12px; letter-spacing:.2em; margin-bottom:14px }
.case__cols > div + div{ padding-left:0 }
@media(min-width:760px){ .case__cols > div + div{ border-left:1px solid var(--line); padding-left:40px } }
.case__cols .dash li{ font-size:15px; line-height:1.5; padding-top:13px; padding-bottom:13px }

/* «А как итог»: заголовок колонок крупнее, списки компактнее */
.cmp__col h3{ font-size:17px; letter-spacing:-.01em; margin-bottom:18px }
.cmp__col li{ padding-top:13px; padding-bottom:13px; font-size:15px }

/* числовые диапазоны не рвутся переносом: «3–6», «40–60», «1–2 %» */
.nb{ white-space:nowrap }

/* плотные абзацы держат меру строки */
.why__item p{ max-width:46ch }
.worse__rows p{ max-width:44ch }

/* =========================================================================
   Блоки доделанного оффера (29.10.2026): формат, доверие, бонусы, цена,
   тарифы, FAQ, три пути, плашка набора.
   ========================================================================= */

/* регалия и подпись под оффером */
.hero__under{ margin:0; max-width:46ch; font-size:clamp(15px,1.15vw,17px); line-height:1.6; color:rgba(244,239,230,.74) }
.hero__regalia{
  margin:0; padding-top:18px; border-top:1px solid var(--line-d);
  font-size:13.5px; line-height:1.5; color:rgba(244,239,230,.6); max-width:52ch;
}

/* заглушка-слот под материал заказчика */
.slot{ margin:0; display:flex; flex-direction:column; gap:10px }
.slot img{ width:100%; height:auto; border:1px solid rgba(36,28,23,.14); background:var(--paper-2) }
.slot figcaption{ font-size:12.5px; line-height:1.45; color:var(--ink-3) }
.slot--wide img{ border-radius:var(--radius-s, 18px) }

/* формат: как устроено сопровождение */
.how{ background:var(--paper-2); padding:var(--sect-y) 0 }
.how__head{ max-width:760px; margin-bottom:42px }
.how__head h2{ font-size:clamp(30px,3.4vw,56px); margin:18px 0 16px }
.how__lead{ margin:0; font-size:16.5px; line-height:1.6; color:var(--ink-2) }
.how__grid{ display:grid; grid-template-columns:1fr; gap:0 48px }
@media(min-width:760px){ .how__grid{ grid-template-columns:1fr 1fr } }
@media(min-width:1200px){ .how__grid{ grid-template-columns:repeat(3,1fr) } }
.how__item{ padding:26px 0 30px; border-top:1px solid rgba(36,28,23,.18); display:flex; flex-direction:column; gap:10px }
.how__n{ font-family:var(--num); font-weight:500; font-size:22px; color:var(--accent-d); letter-spacing:.06em }
.how__item h3{ font-size:clamp(17px,1.45vw,20px); line-height:1.3 }
.how__item p{ margin:0; font-size:15px; line-height:1.55; color:var(--ink-2) }

/* доверие */
.trust{ background:var(--paper); padding:var(--sect-y) 0 }
.trust__in{ display:grid; grid-template-columns:1fr; gap:36px; align-items:start }
@media(min-width:1000px){ .trust__in{ grid-template-columns:1.15fr .85fr; gap:64px } }
.trust h2{ font-size:clamp(30px,3.4vw,56px); margin:18px 0 14px }
.trust__lead{ margin:0 0 22px; font-size:16.5px; color:var(--ink-2) }
.trust__list{ list-style:none; margin:0; padding:0 }
.trust__list li{ padding:13px 0; border-top:1px solid var(--line); font-size:16px; line-height:1.5; color:var(--ink-2) }
.trust__list li:last-child{ border-bottom:1px solid var(--line) }
.trust__list b{ color:var(--ink); font-weight:600 }
.trust__pic{ margin:0 }
.trust__pic img{ width:100%; height:clamp(320px,40vw,520px); object-fit:cover; object-position:50% 22% }
.trust__pic figcaption{ margin-top:10px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3) }
.trust__sub{ margin:44px 0 16px; font-family:var(--display); font-weight:600; font-size:clamp(18px,1.6vw,22px) }

/* бонусы */
.bonuses{ background:var(--paper-2); padding:var(--sect-y) 0 }
.bonuses__head{ max-width:720px; margin-bottom:34px }
.bonuses__head h2{ font-size:clamp(30px,3.4vw,54px); margin:18px 0 12px }
.bonuses__lead{ margin:0; font-size:16.5px; color:var(--ink-2) }
.bonus-item{ display:grid; grid-template-columns:1fr; gap:24px; padding:34px 0 38px;
             border-top:1px solid rgba(36,28,23,.18) }
@media(min-width:1000px){ .bonus-item{ grid-template-columns:.46fr 1.54fr; gap:48px; align-items:start } }
.bonus-item__cover{ position:sticky; top:24px }
.bonus-item h3{ font-size:clamp(19px,1.8vw,25px); line-height:1.3; margin-bottom:16px }
.bonus-item h4{ font-family:var(--display); font-size:11.5px; font-weight:600; letter-spacing:.18em;
                text-transform:uppercase; color:var(--accent-d); margin:18px 0 10px }
.bonus-item p{ margin:0 0 10px; font-size:15.5px; line-height:1.56; color:var(--ink-2) }
.num, .bonuses .num{ margin:0; padding-left:0; list-style:none; counter-reset:n }
.num li{ position:relative; padding:9px 0 9px 34px; font-size:15.5px; line-height:1.55; color:var(--ink-2);
         counter-increment:n }
.num li::before{ content:counter(n) "."; position:absolute; left:0; top:9px; font-family:var(--num);
                 font-weight:500; color:var(--accent-d); font-size:15px }
.bonus-item__price{ margin-top:16px !important; padding-top:14px; border-top:1px solid rgba(36,28,23,.18);
                    font-size:14.5px !important; color:var(--ink-3) !important }
.bonus-item__price b{ color:var(--ink) }
.bonuses__total{ margin:34px 0 0; padding-top:22px; border-top:2px solid var(--ink);
                 font-family:var(--display); font-weight:600; font-size:clamp(18px,1.7vw,23px) }

/* цена */
.price{ background:var(--paper); padding:var(--sect-y) 0 }
.price__head{ max-width:800px; margin-bottom:40px }
.price__head h2{ font-size:clamp(30px,3.4vw,56px); margin:18px 0 16px }
.price__lead{ margin:0; font-size:16.5px; line-height:1.6; color:var(--ink-2) }
.price__grid{ display:grid; grid-template-columns:1fr; gap:0 56px }
@media(min-width:900px){ .price__grid{ grid-template-columns:1fr 1fr } }
.price__col{ padding:26px 0 30px; border-top:2px solid var(--ink); display:flex; flex-direction:column; gap:12px }
.price__col h3{ font-size:clamp(19px,1.7vw,23px) }
.price__col p{ margin:0; font-size:15.5px; line-height:1.56; color:var(--ink-2) }
.price__calc{ font-family:var(--display); font-size:clamp(18px,1.6vw,22px) !important; color:var(--ink) !important;
              line-height:1.3 !important }
.price__calc b{ font-family:var(--num); font-weight:500; color:var(--accent-d) }
.price__result{ margin-top:40px; padding:28px 30px; border:1px solid rgba(36,28,23,.18);
                border-radius:24px; display:flex; flex-direction:column; gap:14px; background:var(--card) }
.price__market{ margin:0; font-size:15.5px; line-height:1.5; color:var(--ink-3) }
.price__market b{ color:var(--ink-2) }
.price__mine{ margin:0; font-family:var(--display); font-weight:600; font-size:clamp(19px,1.8vw,25px); line-height:1.3 }
.price__mine b{ font-family:var(--num); font-weight:500; color:var(--accent-d) }
.price__note{ margin:0; font-size:15px; line-height:1.5; color:var(--ink-2) }

/* три вопроса */
.questions{ background:var(--night); color:var(--paper); padding:var(--sect-y) 0 }
.questions h2{ font-size:clamp(30px,3.6vw,58px); margin:18px 0 34px; color:var(--paper) }
.questions__list{ display:flex; flex-direction:column }
.question{ padding:26px 0 28px; border-top:1px solid rgba(244,239,230,.18) }
.question:last-child{ border-bottom:1px solid rgba(244,239,230,.18) }
.question p{ margin:0; font-family:var(--display); font-weight:500; font-size:clamp(17px,1.7vw,23px);
             line-height:1.38; color:rgba(244,239,230,.9); max-width:60ch }
.question b{ display:block; margin-top:12px; font-family:var(--display); font-weight:700;
             font-size:clamp(19px,1.9vw,26px); color:var(--accent-l) }
.questions__slot{ margin:26px 0 0; font-size:13px; color:rgba(244,239,230,.5) }

/* скидка */
.deal{ background:var(--accent-d); color:#FFF8F4; padding:var(--sect-y) 0 }
.deal h2{ font-size:clamp(28px,3.2vw,50px); margin:18px 0 18px; color:#fff; max-width:26ch }
.deal__lead{ margin:0 0 8px; font-size:clamp(17px,1.5vw,21px); color:rgba(255,248,244,.9) }
.deal__big{ margin:6px 0 18px; font-family:var(--num); font-weight:500;
            font-size:clamp(64px,9vw,132px); line-height:.9; color:#fff; letter-spacing:-.01em }
.deal__note{ margin:0 0 14px; font-size:15.5px; line-height:1.55; color:rgba(255,248,244,.9); max-width:58ch }
.deal__sum{ margin:0 0 14px; font-family:var(--display); font-weight:600;
            font-size:clamp(18px,1.8vw,25px); line-height:1.3; color:#fff; max-width:40ch }

/* тарифы */
.tariffs{ background:var(--paper); padding:var(--sect-y) 0 }
.tariffs__head{ max-width:720px; margin-bottom:34px }
.tariffs__head h2{ font-size:clamp(30px,3.4vw,56px); margin:18px 0 12px }
.tariffs__note{ margin:0; font-size:14.5px; color:var(--ink-3) }
.tariffs__grid{ display:grid; grid-template-columns:1fr; gap:24px }
@media(min-width:1000px){ .tariffs__grid{ grid-template-columns:repeat(3,1fr); gap:26px; align-items:start } }
.tariff{ position:relative; display:flex; flex-direction:column; gap:12px; padding:22px 24px 26px;
         border:1px solid rgba(36,28,23,.16); border-radius:26px; background:var(--card) }
.tariff--hero{ background:var(--night); color:var(--paper); border-color:transparent }
.tariff__cover{ margin:0 0 6px }
.tariff__cover img{ border-radius:14px }
.tariff__badge{ position:absolute; top:-12px; left:24px; padding:6px 12px; border-radius:999px;
                background:var(--accent-d); color:#FFF8F4; font-size:11px; font-weight:600;
                letter-spacing:.14em; text-transform:uppercase }
.tariff h3{ font-size:clamp(19px,1.7vw,23px); line-height:1.3 }
.tariff__dur{ margin:0; font-family:var(--num); font-weight:500; font-size:15px; letter-spacing:.08em;
              text-transform:uppercase; color:var(--accent-d) }
.tariff--hero .tariff__dur{ color:var(--accent-l) }
.tariff__for{ margin:0; font-size:14.5px; line-height:1.5; color:var(--ink-3) }
.tariff--hero .tariff__for{ color:rgba(244,239,230,.7) }
.tariff h4{ font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.18em;
            text-transform:uppercase; color:var(--accent-d); margin:8px 0 2px }
.tariff--hero h4{ color:var(--accent-l) }
.tariff .dash li{ font-size:14.5px; padding-top:9px; padding-bottom:9px; border-color:rgba(36,28,23,.12) }
.tariff--hero .dash li{ border-color:rgba(244,239,230,.16); color:rgba(244,239,230,.82) }
.tariff--hero .dash li::before{ color:var(--accent-l) }
.tariff__price{ margin:10px 0 0; display:flex; align-items:baseline; gap:12px }
.tariff__price s{ font-size:16px; color:var(--ink-3) }
.tariff--hero .tariff__price s{ color:rgba(244,239,230,.55) }
.tariff__price b{ font-family:var(--num); font-weight:500; font-size:clamp(28px,2.6vw,36px); line-height:1; color:var(--ink) }
.tariff--hero .tariff__price b{ color:var(--paper) }
.tariff__save{ margin:0; font-size:14px; color:var(--accent-d); font-weight:600 }
.tariff--hero .tariff__save{ color:var(--accent-l) }
.tariff__btn{ margin-top:8px; width:100% }
.tariff--hero .btn--ghost{ border-color:rgba(244,239,230,.35); color:var(--paper) }
.tariffs__foot{ margin:28px 0 0; font-size:14.5px; color:var(--ink-3) }
.timer{ font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600 }

/* подвох */
.catch{ background:var(--paper-2); padding:var(--sect-y) 0 }
.catch__in{ max-width:820px; display:flex; flex-direction:column; gap:14px }
.catch h2{ font-size:clamp(30px,3.4vw,54px); margin:18px 0 4px }
.catch__lead{ margin:0 0 8px; font-family:var(--display); font-weight:600; font-size:clamp(18px,1.6vw,22px) }
.catch p{ margin:0; font-size:16px; line-height:1.6; color:var(--ink-2) }
.catch__strong{ font-family:var(--display); font-weight:600; color:var(--ink) !important; font-size:clamp(17px,1.5vw,20px) !important }
.catch .btn{ margin-top:8px; align-self:flex-start }

/* отзывы */
.reviews{ background:var(--paper); padding:var(--sect-y) 0 }
.reviews h2{ font-size:clamp(28px,3.2vw,52px); margin:18px 0 10px; max-width:26ch }
.reviews__lead{ margin:0 0 28px; font-size:16px; color:var(--ink-2) }
.reviews__grid{ display:grid; grid-template-columns:1fr; gap:20px; margin-bottom:26px }
@media(min-width:900px){ .reviews__grid{ grid-template-columns:repeat(3,1fr) } }

/* что получаешь */
.recap{ background:var(--paper-2); padding:var(--sect-y) 0 }
.recap h2{ font-size:clamp(28px,3.2vw,52px); margin:18px 0 26px }
.recap__rows{ display:flex; flex-direction:column }
.recap__row{ display:grid; grid-template-columns:auto 1fr; gap:18px 28px; padding:22px 0;
             border-top:1px solid rgba(36,28,23,.18) }
.recap__row:last-child{ border-bottom:1px solid rgba(36,28,23,.18) }
@media(min-width:760px){ .recap__row{ grid-template-columns:84px 1fr; gap:20px 40px } }
.recap__n{ font-family:var(--num); font-weight:500; font-size:clamp(24px,2.2vw,32px); line-height:1; color:var(--accent-d) }
.recap__row h3{ font-size:clamp(18px,1.6vw,22px); margin-bottom:8px }
.recap__row p{ margin:0; font-size:15.5px; line-height:1.55; color:var(--ink-2) }
.recap .btn{ margin-top:26px }

/* FAQ */
.faq{ background:var(--paper); padding:var(--sect-y) 0 }
.faq__in{ display:grid; grid-template-columns:1fr; gap:34px }
@media(min-width:1000px){ .faq__in{ grid-template-columns:.62fr 1.38fr; gap:64px; align-items:start } }
.faq__head h2{ font-size:clamp(28px,3.1vw,48px); margin:18px 0 10px }
.faq__lead{ margin:0; font-size:16px; color:var(--ink-2) }
@media(min-width:1000px){ .faq__head{ position:sticky; top:32px } }
.faq__item{ border-top:1px solid var(--line) }
.faq__item:last-child{ border-bottom:1px solid var(--line) }
.faq__item summary{ cursor:pointer; list-style:none; padding:18px 40px 18px 0; position:relative;
                    font-family:var(--display); font-weight:600; font-size:clamp(16px,1.45vw,19px);
                    line-height:1.35; color:var(--ink) }
.faq__item summary::-webkit-details-marker{ display:none }
.faq__item summary::after{ content:"+"; position:absolute; right:4px; top:14px; font-family:var(--num);
                           font-size:26px; font-weight:400; color:var(--accent-d); line-height:1 }
.faq__item[open] summary::after{ content:"–" }
.faq__item p{ margin:0 0 12px; font-size:15.5px; line-height:1.6; color:var(--ink-2); max-width:64ch }

/* старт */
.start{ background:var(--paper-2); padding:var(--sect-y) 0 }
.start h2{ font-size:clamp(30px,3.4vw,56px); margin:18px 0 10px }
.start__lead{ margin:0 0 28px; font-size:16.5px; color:var(--ink-2) }
.start__list{ list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; counter-reset:s }
.start__list li{ display:grid; grid-template-columns:auto 1fr; gap:18px; padding:18px 0;
                 border-top:1px solid rgba(36,28,23,.18); align-items:baseline }
.start__list li:last-child{ border-bottom:1px solid rgba(36,28,23,.18) }
.start__n{ display:flex; align-items:center; justify-content:center; width:34px; height:34px;
           border-radius:50%; border:1px solid var(--accent-d); color:var(--accent-d);
           font-family:var(--num); font-size:15px }
.start__list p{ margin:0; font-size:16px; line-height:1.55; color:var(--ink-2); max-width:64ch }

/* три пути */
.paths{ background:var(--night); color:var(--paper); padding:var(--sect-y) 0 }
.paths h2{ font-size:clamp(30px,3.6vw,58px); margin:18px 0 30px; color:var(--paper) }
.paths__grid{ display:grid; grid-template-columns:1fr; gap:26px }
@media(min-width:1000px){ .paths__grid{ grid-template-columns:repeat(3,1fr); gap:28px; align-items:start } }
.path{ display:flex; flex-direction:column; gap:12px; padding:24px 24px 28px;
       border:1px solid rgba(244,239,230,.2); border-radius:24px }
.path--good{ border-color:transparent; background:var(--paper); color:var(--ink) }
.path__n{ font-family:var(--num); font-weight:500; font-size:14px; letter-spacing:.12em;
          text-transform:uppercase; color:var(--accent-l) }
.path--good .path__n{ color:var(--accent-d) }
.path h3{ font-size:clamp(19px,1.7vw,23px); line-height:1.3; color:var(--paper) }
.path--good h3{ color:var(--ink) }
.path p{ margin:0; font-size:15px; line-height:1.55; color:rgba(244,239,230,.8) }
.path--good p{ color:var(--ink-2) }
.path .dash li{ font-size:14.5px; padding-top:10px; padding-bottom:10px; border-color:rgba(244,239,230,.16);
                color:rgba(244,239,230,.78) }
.path--good .dash li{ border-color:rgba(36,28,23,.13); color:var(--ink-2) }
.path .dash li::before{ color:var(--accent-l) }
.path--good .dash li::before{ color:var(--accent-d) }
.path__then{ font-family:var(--display); font-weight:600; color:rgba(244,239,230,.92) !important }
.path--good .path__then{ color:var(--ink) !important }
.path__end{ color:rgba(244,239,230,.72) !important }
.path--good .path__end{ color:var(--ink-2) !important }
.path__quote{ margin:4px 0 !important; padding:14px 0 14px 18px; border-left:2px solid var(--accent-d);
              font-family:var(--display); font-weight:600; font-size:16px; line-height:1.4; color:var(--ink) }

/* плашка набора внизу */
.bar{ position:fixed; left:0; right:0; bottom:0; z-index:20;
      background:rgba(25,20,18,.96); color:var(--paper); border-top:1px solid rgba(244,239,230,.16);
      backdrop-filter:saturate(1.1) blur(6px) }
.bar__in{ max-width:var(--max); margin:0 auto; padding:10px var(--pad);
          display:flex; align-items:center; gap:12px 22px; flex-wrap:wrap }
.bar__item{ font-size:12.5px; color:rgba(244,239,230,.78) }
.bar__item b{ color:var(--paper); font-weight:600 }
.bar .timer{ color:var(--paper) }
.bar__btn{ margin-left:auto; padding:11px 20px; font-size:13.5px }
@media(max-width:760px){
  .bar__in{ gap:6px 14px; padding:8px 16px }
  .bar__item:nth-child(1){ display:none }
  .bar__btn{ margin-left:auto; padding:9px 14px; font-size:12.5px }
}
body{ padding-bottom:64px }

/* герой стал плотнее после добавления регалии и фактов */
.hero h1{ font-size:clamp(38px,4.9vw,74px) }
.hero__in{ gap:24px }
.hero__main{ gap:18px }
.hero__cta{ margin-top:4px }

/* плашка набора не должна закрывать контент */
@media(max-width:760px){
  body{ padding-bottom:104px }
  .bar__item{ font-size:11.5px }
  .bar__item:nth-child(2){ flex:1 1 100% }
  .bar__btn{ padding:10px 16px; font-size:12.5px }
}

/* сетка дипломов и лента отзывов: заглушки под реальные материалы */
.trust__diplomas{ display:grid; grid-template-columns:1fr; gap:18px }
@media(min-width:600px){ .trust__diplomas{ grid-template-columns:1fr 1fr } }
@media(min-width:1100px){ .trust__diplomas{ grid-template-columns:repeat(4,1fr) } }
.trust__diplomas .slot img{ aspect-ratio:62/46; object-fit:cover }

.reviews__grid{ grid-template-columns:1fr }
@media(min-width:600px){ .reviews__grid{ grid-template-columns:1fr 1fr } }
@media(min-width:1000px){ .reviews__grid{ grid-template-columns:repeat(3,1fr) } }
.reviews__grid .slot img{ aspect-ratio:4/5; object-fit:cover }

.case__shot img{ aspect-ratio:3/4 }

/* кнопка «смотреть больше» с местом под ссылку */
.cases__more{ margin-top:30px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px }
.cases__hint{ font-size:13px; color:var(--ink-3); max-width:52ch }

/* слот отзыва внутри кейса держим полосой 16:9, а не 4:5 */
.case .slot--wide img{ aspect-ratio:16/9; object-fit:cover }

/* ---------------------------------------------------------------------------
   Визуальные слоты из черновика: по одному на каждый пункт.
   Компоновка: текст слева, слот справа, выровнен по верху.
   --------------------------------------------------------------------------- */
.row-slot{ margin:0; width:210px; flex:none }
.row-slot img{ width:100%; aspect-ratio:4/5; object-fit:cover;
               border:1px solid rgba(36,28,23,.14); background:var(--paper-2) }
.row-slot--step{ width:170px }
.row-slot--get{ width:120px }
.row-slot--get img{ aspect-ratio:1 }

.hope__list li{ display:grid; grid-template-columns:1fr auto; gap:22px; align-items:start }
@media(max-width:599px){ .hope__list li{ grid-template-columns:1fr } .row-slot{ width:100% } .row-slot img{ aspect-ratio:16/10 } }

.steps__list > li{ grid-template-columns:auto 1fr auto }
@media(max-width:899px){ .steps__list > li{ grid-template-columns:auto 1fr } .row-slot--step{ grid-column:2; width:100%; margin-top:4px } .row-slot--step img{ aspect-ratio:16/10 } }

.how__icon{ margin:0 0 2px; width:96px }
.how__icon img{ width:96px; aspect-ratio:1; object-fit:cover; border:1px solid rgba(36,28,23,.12); background:var(--paper) }

.bonus-item__review{ margin-top:18px; max-width:520px }
.bonus-item__review img{ aspect-ratio:16/9; object-fit:cover }

.question__pic{ margin:18px 0 0; max-width:460px }
.question__pic img{ width:100%; aspect-ratio:16/10; object-fit:cover;
                    border:1px solid rgba(244,239,230,.28); background:rgba(25,20,18,.35) }

.recap__row{ grid-template-columns:auto 1fr auto; align-items:start }
@media(max-width:599px){ .recap__row{ grid-template-columns:auto 1fr } .row-slot--get{ grid-column:2; width:96px } }

/* миниатюры не должны доминировать над текстом */
.row-slot{ width:132px }
.row-slot--step{ width:112px }
.row-slot--get{ width:92px }
.how__icon, .how__icon img{ width:56px }
.question__pic{ max-width:360px }
@media(max-width:599px){ .row-slot{ width:100% } }

/* picture — inline-элемент: без block он не даёт img сжаться до слота */
.row-slot picture, .how__icon picture, .question__pic picture,
.bonus-item__review picture, .tariff__cover picture, .case__shot picture,
.slot picture, .trust__diplomas picture{ display:block; width:100% }

/* атрибуты width/height в HTML дают жёсткую высоту — возвращаем auto,
   иначе aspect-ratio не работает и слот вытягивается в натуральную высоту */
.row-slot img, .how__icon img, .question__pic img, .bonus-item__review img,
.slot img, .case__shot img, .tariff__cover img, .trust__diplomas img, .reviews__grid img{
  height:auto
}
.row-slot{ align-self:start }

/* =========================================================================
   Движение. Всё движение живёт только при .js-motion и без reduced-motion,
   поэтому при отключённом JS страница выглядит как обычная статичная.
   ========================================================================= */
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(14px) }
  to  { opacity:1; transform:none }
}

/* полоса прочтения сверху */
.readbar{ position:fixed; top:0; left:0; right:0; height:2px; z-index:60;
          pointer-events:none; background:transparent }
.readbar i{ display:block; height:100%; background:var(--accent-d);
            transform:scaleX(0); transform-origin:0 50%; transition:transform .12s linear }

/* появление блоков */
.js-motion .anim{
  opacity:0; transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0ms); will-change:opacity, transform;
}
.js-motion .anim.is-in{ opacity:1; transform:none }

/* кадры и слоты проявляются с лёгким приближением */
.js-motion .slot.anim,
.js-motion .row-slot.anim,
.js-motion .case__shot.anim{ transform:translateY(18px) scale(1.025) }
.js-motion .slot.anim.is-in,
.js-motion .row-slot.anim.is-in,
.js-motion .case__shot.anim.is-in{ transform:none }

/* плашка набора выезжает после героя */
.js-motion .bar{ transform:translateY(110%); transition:transform .5s cubic-bezier(.2,.7,.2,1) }
.js-motion .bar.is-on{ transform:none }

/* параллакс двух больших кадров */
img[data-parallax]{
  transform:translate3d(0, var(--py, 0), 0) scale(1.07);
  will-change:transform;
}

/* живые ховеры */
.tariff{ transition:transform .28s cubic-bezier(.2,.7,.2,1), border-color .28s, background-color .28s }
.tariff:hover{ transform:translateY(-5px); border-color:rgba(176,64,47,.42) }
.tariff--hero:hover{ border-color:transparent }
.how__item{ transition:border-color .28s }
.how__item:hover{ border-color:var(--accent-d) }
.slot img, .case__shot img, .row-slot img, .trust__diplomas img{
  transition:transform .5s cubic-bezier(.2,.7,.2,1), filter .5s }
.slot:hover img, .case__shot:hover img, .row-slot:hover img{ transform:scale(1.03) }
.btn{ transition:background .18s, border-color .18s, color .18s, transform .18s }
.btn:hover{ transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }
.faq__item summary::after{ transition:transform .25s, color .25s }
.faq__item[open] summary::after{ transform:rotate(180deg) }
.bar__btn{ transition:background .18s, transform .18s }
.bar__btn:hover{ transform:translateY(-1px) }

/* движение отключено пользователем — ничего не прячем */
@media (prefers-reduced-motion: reduce){
  .js-motion .anim{ opacity:1 !important; transform:none !important; transition:none !important }
  .js-motion .bar{ transform:none !important }
  .readbar{ display:none }
  img[data-parallax]{ transform:none }
  *{ transition-duration:.001ms !important; animation-duration:.001ms !important }
}

/* плашка набора не должна наезжать на строку фактов в первом экране */
@media(min-width:1024px){ .hero__in{ padding-bottom:84px } }

/* кадр героя: закрываем контейнер, чтобы любое движение не открывало край */
.hero__photo{ overflow:hidden; position:relative }
.hero__photo img{ transform:none !important }

/* =========================================================================
   Движение, редакция 2 (30.10.2026): заметнее и разнообразнее.
   Старт анимации — до входа в кадр (в JS rootMargin +18%), поэтому движение
   видно, а не заканчивается «где-то снизу». Четыре типа появления.
   ========================================================================= */
.js-motion .anim{
  opacity:0;
  transition:opacity .72s cubic-bezier(.16,.84,.3,1),
             transform .72s cubic-bezier(.16,.84,.3,1),
             transform .72s cubic-bezier(.16,.84,.3,1);
  transition-delay:var(--d,0ms);
  will-change:opacity, transform, clip-path;
}
.js-motion .anim--up{ transform:translateY(40px) }
.js-motion .anim--left{ transform:translateX(-36px) }
.js-motion .anim--scale{ transform:translateY(26px) scale(1.07) }
.js-motion .anim--big{ transform:translateY(54px) }

.js-motion .anim.is-in{ opacity:1; transform:none }

/* курсор: подъём и наклон */
@media (hover:hover) and (pointer:fine){
  .tariff{
    transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(0);
    transition:transform .28s cubic-bezier(.16,.84,.3,1), border-color .28s;
  }
  .tariff:hover{
    transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-7px);
  }
  .how__item{ transition:transform .25s, border-color .25s }
  .how__item:hover{ transform:translateX(6px) }
  .path{ transition:transform .28s, border-color .28s }
  .path:hover{ transform:translateY(-5px) }
  .recap__row{ transition:background-color .25s }
  .recap__row:hover{ background:rgba(36,28,23,.035) }
  .recap__row:hover .recap__n{ transform:translateX(4px); color:var(--ink) }
  .recap__n{ transition:transform .25s, color .25s }
  .slot:hover img, .case__shot:hover img, .row-slot:hover img{ transform:scale(1.05) }
  .btn:hover{ transform:translateY(-2px) }
  .btn:active{ transform:translateY(0) scale(.99) }
  .faq__item summary:hover{ color:var(--accent-d) }
  .questions .question:hover{ border-color:rgba(244,239,230,.36) }
  .question{ transition:border-color .25s }
  .trust__list li:hover{ color:var(--ink) }
  .trust__list li{ transition:color .2s }
}

@media (prefers-reduced-motion: reduce){
  .js-motion .anim{ opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important }
  .tariff, .tariff:hover{ transform:none !important }
}