/* ============================================================
   Лендинг /kniga — лид-магнит под холодный трафик из Яндекс Директа.
   Автономные стили (без style.css основного сайта), фирменные цвета
   и типографика. Мобильный-first.
   ============================================================ */

@font-face{font-family:'Montserrat';font-weight:400;font-display:swap;src:url('../fonts/Montserrat-Regular.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-weight:600;font-display:swap;src:url('../fonts/Montserrat-SemiBold.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-weight:700;font-display:swap;src:url('../fonts/Montserrat-Bold.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-weight:800;font-display:swap;src:url('../fonts/Montserrat-ExtraBold.woff2') format('woff2');}

:root{
  --red:#E93223; --ink:#16181d; --soft:#5b6068; --line:#e6e8eb;
  --wash:#f6f7f8; --white:#fff;
  --maxw:1120px; --ease:cubic-bezier(.22,.61,.36,1);
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }   /* иначе display:flex/grid перебивают атрибут hidden */
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:'Montserrat',sans-serif; color:var(--ink);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  background:var(--white);
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,p{ margin:0; }

.lp-container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px; }

/* ---------- Кнопки ---------- */
.btn{
  display:inline-block; border:0; cursor:pointer; font-family:inherit;
  font-weight:700; font-size:16px; padding:16px 30px; border-radius:12px;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  text-decoration:none; text-align:center;
}
.btn--red{ background:var(--red); color:#fff; box-shadow:0 8px 22px rgba(233,50,35,.25); }
.btn--red:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(233,50,35,.32); }
.btn--light{ background:#fff; color:var(--ink); box-shadow:0 8px 22px rgba(0,0,0,.12); }
.btn--light:hover{ transform:translateY(-2px); }

/* ---------- Заголовки секций ---------- */
.sec-title{
  font-weight:800; font-size:clamp(26px,4vw,38px); line-height:1.1;
  letter-spacing:-.02em; text-align:center; margin-bottom:32px;
}
.sec-title--left{ text-align:left; margin-bottom:18px; }

/* ---------- Хедер ---------- */
.lp-header{ border-bottom:1px solid var(--line); }
.lp-header__row{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.lp-logo{ font-weight:800; font-size:22px; letter-spacing:-.02em; text-decoration:none; color:var(--ink); }
.lp-logo span{ color:var(--red); }
.lp-theme{
  -webkit-appearance:none; appearance:none; background:transparent; border:0; padding:6px;
  margin:0; line-height:0; cursor:pointer; border-radius:10px; opacity:.82;
  transition:opacity .2s var(--ease), transform .3s var(--ease);
}
.lp-theme:hover{ opacity:1; transform:rotate(-14deg); }
.lp-theme img{ width:26px; height:26px; display:block; }

/* ---------- HERO ---------- */
.hero{ padding:48px 0 56px; overflow:hidden; }
.hero__grid{ display:grid; grid-template-columns:1fr; gap:36px; align-items:center; }
.hero__label{
  display:inline-block; font-weight:700; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--red); margin-bottom:16px;
}
.hero__title{
  font-weight:800; font-size:clamp(30px,6vw,50px); line-height:1.03;
  letter-spacing:-.02em; margin-bottom:20px;
}
.hero__title .accent{ color:var(--red); }
.hero__sub{ font-size:clamp(16px,2.2vw,19px); color:#2b2f36; font-weight:400; max-width:560px; margin-bottom:28px; }

/* Форма */
.lead-form__row{ display:flex; gap:10px; flex-wrap:wrap; }
.lead-form__input{
  -webkit-appearance:none; appearance:none;   /* iOS Safari: убрать внутреннюю тень */
  flex:1 1 240px; min-width:0; height:56px; padding:0 18px; font-family:inherit;
  font-size:16px; color:var(--ink); background:#fff; border:1.5px solid var(--line);
  border-radius:12px; outline:none; transition:border-color .2s var(--ease);
}
.lead-form__input:focus{ border-color:var(--red); }
.lead-form__input::placeholder{ color:#9aa0a6; }
.lead-form__btn{
  flex:0 0 auto; height:56px; padding:0 30px; border:0; cursor:pointer; font-family:inherit;
  font-weight:700; font-size:16px; color:#fff; background:var(--red); border-radius:12px;
  box-shadow:0 8px 22px rgba(233,50,35,.25); transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.lead-form__btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(233,50,35,.32); }
.lead-form__btn:disabled{ opacity:.6; cursor:default; transform:none; box-shadow:none; }
.lead-form__hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.lead-form__consent{ display:flex; gap:9px; align-items:flex-start; margin-top:14px; font-size:12.5px; color:var(--soft); line-height:1.4; cursor:pointer; }
.lead-form__consent input{ margin-top:2px; width:15px; height:15px; accent-color:var(--red); flex:0 0 auto; }
.lead-form__consent a{ color:var(--red); }
.lead-form__note{ margin-top:12px; font-size:13px; color:var(--soft); }
.lead-form__error{ margin-top:12px; font-size:13.5px; color:var(--red); font-weight:600; }

/* Экран «Готово» */
.lead-done{ display:flex; gap:16px; align-items:flex-start; background:var(--wash); border:1px solid var(--line); border-radius:16px; padding:22px 24px; }
.lead-done__ico{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; background:var(--red); color:#fff; font-weight:800; font-size:20px; display:flex; align-items:center; justify-content:center; }
.lead-done__h{ font-weight:800; font-size:19px; margin-bottom:4px; }
.lead-done__s{ font-size:14.5px; color:var(--soft); }

/* Обложка-мокап */
.hero__visual{ display:flex; justify-content:center; }
.hero__art{ width:100%; max-width:480px; height:auto; }

/* ---------- БОЛИ ---------- */
.pain{ background:var(--wash); padding:64px 0; }
.pain__grid{ display:grid; grid-template-columns:1fr; gap:16px; }
.pain__card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 24px;
  font-weight:600; font-size:17px; line-height:1.4;
}
.pain__note{ text-align:center; margin-top:28px; font-size:17px; color:#2b2f36; }
.pain__note b{ color:var(--ink); }

/* ---------- ЧТО В ГАЙДЕ ---------- */
.inside{ padding:64px 0; }
.inside__list{ list-style:none; margin:0 auto; padding:0; max-width:720px; display:grid; grid-template-columns:1fr; gap:12px; }
.inside__list li{ display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 20px; font-weight:600; font-size:17px; }
.inside__n{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--red); color:#fff; font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; }
.inside__bonus{ max-width:720px; margin:20px auto 0; background:var(--ink); color:#fff; border-radius:14px; padding:22px 24px; font-weight:600; font-size:16px; line-height:1.45; }
.inside__cta{ text-align:center; margin-top:34px; }

/* ---------- АВТОР ---------- */
.author{ background:var(--wash); padding:64px 0; }
.author__grid{ display:grid; grid-template-columns:1fr; gap:28px; align-items:center; }
.author__photo{ display:flex; justify-content:center; }
.author__photo img{ width:150px; height:150px; border-radius:50%; object-fit:cover; border:4px solid #fff; box-shadow:0 10px 30px rgba(20,23,28,.15); }
.author__body p{ font-size:17px; color:#2b2f36; }
.author__metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:24px 0; }
.metric{ display:flex; flex-direction:column; }
.metric__v{ font-weight:800; font-size:26px; color:var(--red); line-height:1; }
.metric__l{ font-size:12.5px; color:var(--soft); margin-top:6px; line-height:1.3; }
.author__book{ display:inline-block; font-weight:700; font-size:16px; color:var(--red); text-decoration:none; border-bottom:2px solid transparent; transition:border-color .2s var(--ease); }
.author__book:hover{ border-color:var(--red); }

/* ---------- ДИАГНОСТИКА ---------- */
.diag{ padding:64px 0 72px; }
.diag__box{ background:var(--ink); border-radius:24px; padding:48px 32px; text-align:center; }
.diag__title{ color:#fff; font-weight:800; font-size:clamp(24px,3.5vw,34px); letter-spacing:-.02em; margin-bottom:16px; }
.diag__text{ color:#c9cdd3; font-size:17px; max-width:620px; margin:0 auto 28px; }

/* Форма диагностики (внутри тёмного блока) */
.diag-form{ max-width:640px; margin:0 auto; text-align:left; }
.diag-form__row{ display:flex; flex-direction:column; gap:10px; }
.diag-form__input{
  -webkit-appearance:none; appearance:none;   /* iOS Safari: убрать внутреннюю тень */
  width:100%; height:54px; padding:0 18px; font-family:inherit; font-size:16px;
  color:var(--ink); background:#fff; border:1.5px solid transparent; border-radius:12px; outline:none;
  transition:border-color .2s var(--ease);
}
.diag-form__input:focus{ border-color:var(--red); }
.diag-form__input::placeholder{ color:#9aa0a6; }
.diag-form__btn{ width:100%; height:54px; }
.diag-form__btn:disabled{ opacity:.6; cursor:default; }
.diag-form__consent{ display:flex; gap:9px; align-items:flex-start; margin-top:14px; font-size:12.5px; color:#c9cdd3; line-height:1.4; cursor:pointer; }
.diag-form__consent input{ margin-top:2px; width:15px; height:15px; accent-color:var(--red); flex:0 0 auto; }
.diag-form__consent a{ color:#fff; text-decoration:underline; }
.diag-form__note{ margin-top:12px; font-size:13px; color:#aeb3ba; }
.diag-form__alt{ margin-top:10px; font-size:14px; color:#c9cdd3; }
.diag-form__alt a{ color:#fff; font-weight:700; text-decoration:none; border-bottom:2px solid rgba(255,255,255,.35); }
.diag-form__alt a:hover{ border-color:#fff; }
.diag-form__error{ margin-top:12px; font-size:13.5px; color:#ff9b91; font-weight:600; }
.diag-done{ text-align:left; margin-top:8px; }

/* ---------- ФУТЕР ---------- */
.lp-footer{ border-top:1px solid var(--line); padding:26px 0; }
.lp-footer__grid{ display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; justify-content:space-between; }
.lp-footer__co{ font-size:13px; color:var(--soft); font-weight:400; }
.lp-footer__links{ display:flex; flex-wrap:wrap; gap:20px; }
.lp-footer__links a{ font-size:13px; color:var(--ink); font-weight:600; text-decoration:none; }
.lp-footer__links a:hover{ color:var(--red); }

/* ---------- Плашка кук ---------- */
.cookie{
  position:fixed; left:20px; bottom:20px; z-index:60;
  max-width:320px; background:#fff; color:var(--ink);
  border:1px solid var(--line); border-radius:16px; padding:16px 18px;
  font-size:13.5px; line-height:1.5;
  box-shadow:0 14px 40px rgba(20,23,28,.16);
  animation:cookie-in .45s cubic-bezier(.22,.61,.36,1) both;
}
.cookie span{ display:block; margin-bottom:12px; color:var(--soft); font-weight:500; }
.cookie a{ color:var(--red); font-weight:600; }
.cookie button{ border:0; cursor:pointer; font-family:inherit; font-weight:700; font-size:13.5px; color:#fff; background:var(--red); border-radius:10px; padding:9px 22px; }
@keyframes cookie-in{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (max-width:575px){ .cookie{ left:12px; right:12px; bottom:12px; max-width:none; } }

/* ============================================================
   ПЛАНШЕТ / ДЕСКТОП
   ============================================================ */
@media (min-width:768px){
  .pain__grid{ grid-template-columns:repeat(3,1fr); }
  .diag__box{ padding:56px 40px; }
  .diag-form__row{ flex-direction:row; }
  .diag-form__input{ flex:1 1 0; min-width:0; }
  .diag-form__btn{ width:auto; flex:0 0 auto; padding:0 26px; white-space:nowrap; }
}
@media (min-width:900px){
  .hero{ padding:64px 0 72px; }
  .hero__grid{ grid-template-columns:1.15fr .85fr; gap:48px; }
  .author__grid{ grid-template-columns:200px 1fr; gap:40px; }
  .author__photo img{ width:180px; height:180px; }
}

/* ============================================================
   ТЁМНАЯ ТЕМА (.dark на <html>) — по образцу основного сайта.
   Включается автоматически по системной настройке и вручную тумблером.
   ============================================================ */
.dark body{ background:#15171c; color:#e7e9ec; }

.dark .lp-header{ border-color:#2a2f37; }
.dark .lp-logo{ color:#e7e9ec; }

.dark .hero__sub{ color:#b9bec6; }

/* Формы */
.dark .lead-form__input{ background:#1e222a; border-color:#333a44; color:#e7e9ec; }
.dark .lead-form__input::placeholder{ color:#7d838c; }
.dark .lead-form__note,
.dark .lead-form__consent{ color:#9aa0a9; }
.dark .lead-done{ background:#1e222a; border-color:#2f3540; }
.dark .lead-done__s{ color:#9aa0a9; }
.dark .pain__note b,
.dark .lead-form__consent a{ color:#fff; }

/* Секции и карточки */
.dark .pain{ background:#1a1d23; }
.dark .pain__card{ background:#22262e; border-color:#2f3540; }
.dark .pain__note{ color:#b9bec6; }
.dark .inside__list li{ background:#22262e; border-color:#2f3540; }
.dark .inside__bonus{ background:#0f1116; border:1px solid #2f3540; }
.dark .author{ background:#1a1d23; }
.dark .author__body p{ color:#c3c8cf; }
.dark .author__photo img{ border-color:#22262e; }
.dark .metric__l{ color:#9aa0a9; }

/* Блок диагностики и футер */
.dark .diag__box{ background:#1e222a; border:1px solid #2f3540; }
.dark .lp-footer{ border-color:#2a2f37; }
.dark .lp-footer__links a{ color:#c3c8cf; }
.dark .lp-footer__co{ color:#8a9099; }

/* Иллюстрация: перекрашиваем «чернильные»/белые/серые элементы под тёмный фон */
.dark .hero__art [stroke="#16181d"]{ stroke:#e7e9ec; }
.dark .hero__art [fill="#16181d"]{ fill:#e7e9ec; }
.dark .hero__art [fill="#fff"],
.dark .hero__art [fill="#ffffff"]{ fill:#262b33; }
.dark .hero__art [fill="#d3d7dc"]{ fill:#3d434c; }

/* K1: мостик из успеха гайда к диагностике */
.lead-done__next{
  display:inline-block; margin-top:10px; font-weight:700; font-size:14px;
  color:var(--red); text-decoration:none;
  border-bottom:1px dashed rgba(233,50,35,.45);
  transition:border-color .2s var(--ease);
}
.lead-done__next:hover{ border-color:var(--red); }

/* K3: мобильная кнопка «Получить гайд» — во всю ширину */
@media (max-width:575px){
  .lead-form__row{ flex-direction:column; }
  .lead-form__btn{ width:100%; }
}

/* Инлайн-мини-форма гайда: раскрывается слайдом на месте клика,
   вместо прыжка к форме в начале страницы */
.mini-guide{
  overflow:hidden; max-height:0; opacity:0; margin:0 auto; max-width:560px;
  transition:max-height .38s var(--ease), opacity .3s var(--ease), margin .3s var(--ease);
}
.mini-guide.is-open{ max-height:300px; opacity:1; margin-top:20px; }
.mini-guide__row{ display:flex; gap:10px; }
.mini-guide__input{
  -webkit-appearance:none; appearance:none;
  flex:1 1 auto; min-width:0; height:52px; padding:0 16px; font-family:inherit;
  font-size:16px; color:var(--ink); background:#fff; border:1.5px solid var(--line);
  border-radius:12px; outline:none; transition:border-color .2s var(--ease);
}
.mini-guide__input:focus{ border-color:var(--red); }
.mini-guide__btn{
  flex:0 0 auto; height:52px; padding:0 22px; border:0; cursor:pointer; font-family:inherit;
  font-weight:700; font-size:15px; color:#fff; background:var(--red); border-radius:12px;
  box-shadow:0 8px 22px rgba(233,50,35,.25); transition:transform .2s var(--ease);
}
.mini-guide__btn:hover{ transform:translateY(-2px); }
.mini-guide__btn:disabled{ opacity:.6; cursor:default; transform:none; }
.mini-guide__consent{ display:flex; gap:8px; align-items:flex-start; margin-top:10px; font-size:12px; color:var(--soft); line-height:1.4; cursor:pointer; text-align:left; }
.mini-guide__consent input{ margin-top:2px; width:14px; height:14px; accent-color:var(--red); flex:0 0 auto; }
.mini-guide__consent a{ color:var(--red); }
.mini-guide__error{ margin-top:8px; font-size:13px; color:var(--red); font-weight:600; }
.mini-guide__done{ font-weight:700; font-size:15px; color:var(--ink); padding:14px 0 4px; }
@media (max-width:575px){
  .mini-guide__row{ flex-direction:column; }
  .mini-guide__btn{ width:100%; }
}
/* тёмный вариант — внутри чёрного блока диагностики */
.mini-guide--dark .mini-guide__input{ border-color:transparent; }
.mini-guide--dark .mini-guide__consent{ color:#c9cdd3; }
.mini-guide--dark .mini-guide__consent a{ color:#fff; }
.mini-guide--dark .mini-guide__error{ color:#ff9b91; }
.mini-guide--dark .mini-guide__done{ color:#fff; }

/* ===== Полоса прогресса чтения =====
   Привязана к прокрутке документа через scroll(root).
   Без поддержки scroll-driven animations остаётся в scaleX(0) — невидима. */
.read-progress{
  position:fixed; top:0; left:0; width:100%; height:3px;
  background:var(--red); transform-origin:0 50%; transform:scaleX(0);
  z-index:200; pointer-events:none;
}
@keyframes read-progress-grow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@supports (animation-timeline: scroll()) {
  .read-progress{ animation: read-progress-grow linear both; animation-timeline: scroll(root); }
}

/* ===== Появление блоков при скролле =====
   Нативные CSS scroll-driven animations: без JS, прогрессивное улучшение.
   Где не поддерживается (@supports) или включён prefers-reduced-motion —
   блоки просто видимы сразу. */
@keyframes sd-reveal-in {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .sd-reveal {
            animation: sd-reveal-in linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }
    }
}
.dark .cookie{ background:#22262e; border-color:#2f3540; }
.dark .cookie span{ color:#c8ccd2; }