/* Лендинг «Драконы» — mobile-first, системные шрифты, без внешних зависимостей */
:root{
  --bg:#0B1838; --panel:#0F1F45; --ink:#F4EBD8; --muted:rgba(244,235,216,.72);
  --fire:#E8B547; --sky:#7fb2d9; --line:rgba(232,181,71,.3);
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font:17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1,h2,h3{font-family:Georgia, "Times New Roman", serif; line-height:1.2}
h1{font-size:clamp(28px,7vw,44px)}
h2{font-size:clamp(22px,5.5vw,32px); margin-bottom:.6em}
section>h2{text-align:center}
.author-portrait{display:block; width:150px; height:150px; margin:0 auto 18px;
  border-radius:50%; object-fit:cover}
section{padding:48px 18px; max-width:860px; margin:0 auto}
a{color:var(--sky)}

/* Хиро */
.hero{position:relative; max-width:none; padding:0; overflow:hidden}
.hero-art{position:absolute; inset:0}
.hero-art img{width:100%; height:100%; object-fit:cover; object-position:center 35%}
.hero-inner{position:relative; padding:64px 20px 40px; max-width:860px; margin:0 auto;
  background:linear-gradient(180deg, rgba(10,13,19,.5) 0%, rgba(10,13,19,.86) 78%)}
.hero-kicker{color:var(--fire); letter-spacing:.12em; text-transform:uppercase; font-size:13px; margin-bottom:10px}
.hero-sub{font-family:Georgia,serif; font-size:clamp(18px,4.5vw,24px); color:var(--sky); margin:4px 0 14px}
.hero-hook{max-width:560px; margin:0 0 22px; font-size:clamp(16px,4.2vw,19px)}
.hero-note{color:var(--muted); font-size:14px; margin-top:12px}

/* CTA */
.cta{
  display:inline-block; padding:14px 26px; border-radius:10px;
  background:var(--fire); color:#14100a; font-weight:700; font-size:17px;
  text-decoration:none; border:none; cursor:pointer;
  box-shadow:0 4px 18px rgba(224,139,60,.35);
}
.cta:active{transform:translateY(1px)}
.cta.ghost{background:transparent; color:var(--fire); border:2px solid var(--fire); box-shadow:none}

/* Крючки */
.hook-grid{display:grid; gap:14px}
.hook{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px}
.hook h3{color:var(--fire); margin-bottom:8px; font-size:19px}
@media(min-width:720px){.hook-grid{grid-template-columns:1fr 1fr 1fr}}

/* Книга 1 */
.book1-inner{display:flex; flex-direction:column; gap:22px}
.cover{max-width:240px; margin:0 auto}
.cover img{width:100%; max-width:210px; height:auto; display:block; margin:0 auto;
  box-shadow:0 10px 30px rgba(0,0,0,.5); border-radius:10px}
.start-here{color:var(--sky); font-weight:600; margin:10px 0 16px}
@media(min-width:720px){.book1-inner{flex-direction:row; align-items:flex-start}
  .cover{flex:0 0 240px}}

/* Цикл */
.cycle{background:var(--panel); border-radius:14px; border:1px solid var(--line); max-width:820px}
.cycle-lead{color:var(--muted); margin-bottom:14px}
.shelf{margin:18px 0 10px}
.shelf-ph{min-height:200px; border:1px dashed var(--line); border-radius:12px;
  display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:14px}
.shelf img{width:100%; max-width:720px; height:auto; display:block; margin:0 auto;
  border-radius:12px; border:1px solid var(--line)}
.shelf figcaption{font-size:13px; color:var(--muted); margin-top:6px; text-align:center}
.cycle-line{font-size:14px; color:var(--muted); text-align:center; line-height:1.7}
.cycle-line strong{color:var(--ink)}
.mini-cover{width:110px; margin:0}
.mini-cover img{width:100%; display:block; border-radius:6px; border:1px solid var(--line)}
.mini-cover .shadow-art{aspect-ratio:2/3; border-radius:6px; border:1px dashed var(--line);
  background:linear-gradient(160deg,#10161f,#1a2432); display:flex; align-items:center;
  justify-content:center; font:700 34px Georgia,serif; color:#3d4b5e}
.mini-cover.veiled img{opacity:.38; filter:saturate(.45) brightness(.95)}
.mini-cover figcaption{font-size:12px; color:var(--muted); margin-top:6px; text-align:center}
.mini-cover.real figcaption{color:var(--fire)}
.cycle-note{font-size:14px; color:var(--muted); margin-top:10px}

/* Мир */
.map img{width:100%; max-width:560px; height:auto; display:block; margin:0 auto;
  border-radius:12px; border:1px solid var(--line); cursor:zoom-in}
.map figcaption{font-size:13px; color:var(--muted); margin-top:6px; text-align:center}
.lightbox{position:fixed; inset:0; background:rgba(5,7,10,.94); z-index:50;
  overflow:auto; padding:16px; cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox img{display:block; width:100%; max-width:900px; height:auto;
  margin:0 auto; border-radius:8px}
.lightbox-hint{color:var(--muted); font-size:13px; margin:10px auto 24px; text-align:center}
.art-row{display:grid; gap:12px; margin-top:16px}
.art{border-radius:10px}
.art img{width:100%; height:auto; display:block; border-radius:10px; border:1px solid var(--line)}
.art figcaption{font-size:13px; color:var(--muted); margin-top:6px}
.art.ph{border:1px dashed var(--line); min-height:140px;
  display:flex; align-items:center; justify-content:center; color:var(--muted)}
@media(min-width:720px){.art-row{grid-template-columns:1fr 1fr 1fr}}

/* Читалка фрагмента */
.cta-sub{color:var(--muted); font-size:14px; margin-top:10px}
.cta-sub a{color:inherit; text-decoration:underline}
.after-video{text-align:center; margin-top:18px}
.reader-teaser{text-align:center}
.reader-teaser p{color:var(--muted); margin-bottom:16px}
.reader{position:fixed; inset:0; z-index:60; display:flex; flex-direction:column}
.reader[hidden]{display:none}
.reader-bar{display:flex; gap:8px; justify-content:center; align-items:center;
  padding:10px; background:#0a0d13; flex-wrap:wrap}
.reader-bar button{border:1px solid var(--line); background:var(--panel); color:var(--ink);
  border-radius:8px; padding:8px 12px; cursor:pointer; font-size:15px}
.reader-body{flex:1; overflow:auto; padding:28px 16px 60px;
  font-size:var(--rfs,18px); line-height:1.75}
.reader-body h3{max-width:680px; margin:0 auto 1em; text-align:center}
.reader-body p{max-width:680px; margin:0 auto 1em}
.reader[data-theme="sepia"] .reader-body{background:#f3e9d2; color:#241d12}
.reader[data-theme="white"] .reader-body{background:#ffffff; color:#141414}
.reader[data-theme="dark"] .reader-body{background:#0f1216; color:#e8e8e8}
.cliff{max-width:680px; margin:2em auto 0; text-align:center;
  border-top:1px dashed currentColor; padding-top:1.4em}
.cliff-note{opacity:.7; font-size:.85em; margin-top:10px}

/* Видео припева */
.video-box{position:relative; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); background:#000; aspect-ratio:16/9; margin-top:10px}
.video-box video{width:100%; height:100%; object-fit:cover; display:block}
.video-overlay{position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; background:rgba(10,13,19,.55)}
.video-ph{color:var(--muted); font-size:14px; padding:0 16px; text-align:center}
.video-controls{position:absolute; right:10px; bottom:10px; display:flex; gap:8px}
.video-controls button{border:none; border-radius:8px; padding:8px 12px; font-size:14px;
  background:rgba(20,16,10,.75); color:var(--ink); cursor:pointer}
.video-controls button:disabled{opacity:.4; cursor:not-allowed}
.video-note{font-size:13px; color:var(--muted); margin-top:8px}

/* Цитаты */
blockquote{border-left:3px solid var(--fire); padding:6px 0 6px 16px; margin:0 0 18px;
  font-family:Georgia,serif; font-style:italic; font-size:18px; color:var(--ink)}

/* Автор */
.author{background:var(--panel); border:1px solid var(--line); border-radius:14px; max-width:820px; text-align:center}
.author p{max-width:620px; margin-left:auto; margin-right:auto}
.sign{font-family:Georgia,serif; font-style:italic; color:var(--fire); margin:10px 0 18px}

/* Финал */
.final{text-align:center}
.final p{color:var(--muted); margin-bottom:18px}

footer{padding:28px 18px 40px; text-align:center; color:var(--muted); font-size:13px;
  border-top:1px solid var(--line); margin-top:20px}

/* Отзывы и строка библиотек (Вальсы) */
.reviews{text-align:center}
.reviews blockquote{background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:16px 18px; margin:0 auto 14px; max-width:640px;
  font-style:italic; color:var(--ink)}
.lib-line{margin-top:18px; color:var(--muted)}
.lib-line strong{color:var(--fire)}

/* Финал на фоне зимнего города */
.final{background:linear-gradient(rgba(11,24,56,.88),rgba(11,24,56,.88)),
  url(../assets/city-bg.jpg) center/cover no-repeat}

/* Мок-книга во всю ширь блока */
.book1-inner{flex-direction:column}
.book1 .cover{max-width:760px; width:100%}
.book1 .cover img{max-width:760px; width:100%; border-radius:10px}

/* === Вальсы: боевые стили текущего лендинга === */
.badge-complete{display:inline-block; background:rgba(224,139,60,.14);
  color:var(--fire); border:1px solid var(--fire); border-radius:999px;
  padding:6px 14px; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:14px}
.section-subtitle{text-align:center; color:var(--muted); margin:-6px 0 22px}
.tropes{grid-template-columns:1fr 1fr}
@media(min-width:720px){.tropes{grid-template-columns:1fr 1fr 1fr 1fr}}
.tropes .hook-card h3{font-size:16px}
.quote-block{border-left:3px solid var(--fire); padding:6px 0 6px 18px;
  margin:18px 0; font-family:Georgia,serif; font-size:1.06em; color:var(--ink)}
.quote-block .emphasis{color:var(--fire); font-weight:700}
.video-facade{position:relative; aspect-ratio:16/9; border-radius:12px;
  overflow:hidden; cursor:pointer; border:1px solid var(--line);
  background:url(../assets/video-preview.jpg) center/cover no-repeat}
.video-facade iframe{width:100%; height:100%; border:0; display:block}
.play-button{position:absolute; left:50%; top:50%; width:74px; height:74px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:rgba(14,17,22,.72); border:2px solid var(--fire)}
.play-button::after{content:""; position:absolute; left:50%; top:50%;
  transform:translate(-40%,-50%); border-left:24px solid var(--fire);
  border-top:14px solid transparent; border-bottom:14px solid transparent}
.final-inner{display:flex; flex-direction:column; gap:22px; align-items:center}
@media(min-width:760px){.final-inner{flex-direction:row; align-items:center}}
.final-cover{flex:0 0 240px}
.final-cover img{width:100%; max-width:260px; border-radius:8px; display:block;
  margin:0 auto; box-shadow:0 10px 40px rgba(0,0,0,.5)}
.final-text{text-align:center}
@media(min-width:760px){.final-text{text-align:left}}
.pay-line{color:var(--muted); font-size:14px; margin:10px 0 18px}
.footer{padding:26px 18px 40px; text-align:center; color:var(--muted); font-size:14px}
.footer a{color:var(--fire)}

/* Центрированная шапка */
.hero-inner{text-align:center}
.hero-inner .hero-sub{margin-left:auto; margin-right:auto}

/* Тизер читалки: воздух и акцент */
.reader-teaser{background:var(--panel); border:1px solid var(--line);
  border-radius:16px; padding:42px 22px; text-align:center;
  max-width:720px; margin:36px auto}
.reader-teaser h2{margin-bottom:.3em}
.reader-teaser em{color:var(--muted)}
.reader-teaser .cta{margin-top:18px}
.reader-teaser .cta-sub{margin-top:14px}
.cta.big{font-size:19px; padding:16px 34px}

/* Шрифты текущего лендинга (загрузка из Google Fonts, фолбэк системный) */
body{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
h1,.badge-complete{font-family:'Cinzel',Georgia,serif}
h2,h3{font-family:'Cormorant Garamond',Georgia,serif; font-weight:600}

/* Ховер-анимации: «дорого, но не безвкусно» */
.hook-card{transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease}
.hook-card:hover{transform:translateY(-4px); border-color:var(--fire);
  box-shadow:0 8px 24px rgba(232,181,71,.15)}
.cta{transition:transform .25s ease, box-shadow .25s ease}
.cta:hover{transform:translateY(-2px); box-shadow:0 6px 24px rgba(232,181,71,.35)}
.reviews blockquote{transition:transform .3s ease, border-color .3s ease}
.reviews blockquote:hover{transform:translateY(-3px); border-color:var(--fire)}
.video-facade .play-button{transition:transform .3s ease}
.video-facade:hover .play-button{transform:translate(-50%,-50%) scale(1.1)}

/* Плавный синий градиент первого экрана, верх ослаблен */
.hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,24,56,.15) 0%,
    rgba(11,24,56,.5) 55%, var(--bg) 100%)}
.hero-inner{background:none; z-index:1}

/* Подзолоченные заголовки */
h1{color:#F5D98A}
h2,h3{color:#E8B547}

/* Правки 12.09 после живого просмотра: крупнее для 55+, шире на ПК */
body{font-size:19px; line-height:1.7}
section{max-width:1020px}
.cta{font-size:18px}
.cta.big{font-size:20px}
.cta-sub{font-size:15px}
.hero-note{font-size:15px}
.pay-line{font-size:15px}
.book1-text p{max-width:760px}
.reader-body{font-size:var(--rfs,20px)}
.footer{font-size:15px}

/* Мокап во всю ширину экрана на ПК (правка 12.09) */
@media(min-width:820px){
  .book1 .cover{max-width:none; width:100vw; margin-left:calc(50% - 50vw);
    padding:0 20px; box-sizing:border-box}
  .book1 .cover img{max-width:1400px}
}

/* Финал: во всю ширину, градиент сверху, отлеплен от блока автора (12.09) */
.final{max-width:none; margin-top:56px; padding:56px 18px 60px;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(11,24,56,.62) 30%,
      rgba(11,24,56,.48) 55%, rgba(11,24,56,.72) 82%, var(--bg) 100%),
    url(../assets/city-bg.jpg) center/cover no-repeat}
@media(min-width:820px){.final{padding:84px 24px 88px}}
.final-inner{max-width:1020px; margin:0 auto}