/* Главная: кино-обложка с дедом, демо-плеер с главами, карточки сцен с живыми фрагментами. */
.hero{position:relative;min-height:min(88vh,820px);display:flex;align-items:flex-end;overflow:hidden;margin-top:-64px;padding-top:64px;background:#060B16}
/* кадр шире экрана и прижат влево: дед уходит в правую часть, слева остаётся место под заголовок */
.hero-bg{position:absolute;left:0;top:0;width:142%;max-width:none;height:100%;object-fit:cover;object-position:50% 0%}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(6,11,22,.88) 0%,rgba(6,11,22,.55) 38%,rgba(6,11,22,0) 70%),
  linear-gradient(180deg,rgba(6,11,22,.55) 0%,rgba(6,11,22,0) 22%,rgba(6,11,22,0) 55%,var(--night) 100%)}
.snow{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero-in{position:relative;z-index:2;width:100%;padding-top:48px;padding-bottom:clamp(36px,7vw,84px);display:flex;flex-direction:column;gap:18px}
.hero h1{font-size:clamp(34px,5.6vw,64px);line-height:1.06;max-width:15ch;text-shadow:0 2px 24px rgba(0,0,0,.5)}
.hero h1 .gold{display:block}
.hero-lead{font-size:clamp(16px,1.6vw,19px);max-width:50ch;color:#DCE4F2;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.hero-facts{list-style:none;display:flex;gap:10px 28px;flex-wrap:wrap;margin:14px 0 0;padding:0}
.hero-facts li{display:flex;flex-direction:column;line-height:1.3;padding-left:14px;border-left:2px solid var(--line-gold)}
.hero-facts b{font:400 19px var(--f-display);color:var(--gold-hi)}
.hero-facts span{font-size:13.5px;color:var(--muted)}
@media (max-width:700px){
  /* на телефоне текст начинается ниже лица деда: сначала кадр, потом заголовок */
  .hero{min-height:0}
  .hero-bg{width:100%;height:78vh;object-position:46% 0}
  .hero-in{padding-top:40vh}
  .hero h1{font-size:31px}
  .hero-facts{gap:10px 20px}
  .hero::after{background:linear-gradient(180deg,rgba(6,11,22,.45) 0%,rgba(6,11,22,0) 14%,rgba(6,11,22,0) 32%,rgba(6,11,22,.9) 52%,var(--night) 66%)}
  .hero-cta .btn{flex:1 1 100%}
}

.sec{padding:clamp(56px,8vw,104px) 0 0}
.sec h2{font-size:clamp(28px,3.8vw,44px);line-height:1.12;margin:10px 0 14px}
.sec .lead{margin-bottom:28px}
.narrow{max-width:820px}

/* демо */
.demo-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.demo-tabs button{font:600 15px var(--f-body);padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--muted);cursor:pointer}
.demo-tabs button[aria-selected="true"]{border-color:var(--gold);color:var(--gold-hi);background:rgba(233,196,106,.12)}
.demo{display:grid;grid-template-columns:270px minmax(0,1fr);gap:16px;align-items:start}
.demo-sent{padding:20px}
.demo-sent h3{font-size:19px;margin-bottom:10px}
.demo-sent ul{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.demo-sent li{position:relative;padding-left:22px;font-size:15px}
.demo-sent li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--gold-hi),var(--gold-lo))}
.demo-main{min-width:0}
.player{overflow:hidden;padding:0;border-color:var(--line-gold)}
.player video{width:100%;aspect-ratio:16/9;background:#000}
.chapters{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chapters button{font:500 13.5px var(--f-body);padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;display:flex;gap:8px;align-items:baseline}
.chapters button:hover{background:rgba(255,255,255,.1)}
.chapters button.on{border-color:var(--gold);background:rgba(233,196,106,.14);color:var(--gold-hi)}
.chapters button small{font-variant-numeric:tabular-nums;color:var(--dim);font-size:12px}
.demo+.ai-note{margin-top:16px}
@media (max-width:860px){
  .demo{grid-template-columns:minmax(0,1fr)}
  .demo-main{order:-1}
  .demo-sent ul{flex-direction:row;flex-wrap:wrap;gap:6px 18px}
  .chapters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
  .chapters button{flex:0 0 auto}
}

/* сцены */
.moments{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1040px){.moments{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.moments{grid-template-columns:1fr}}
.moment{overflow:hidden;display:flex;flex-direction:column}
.moment .clip{aspect-ratio:16/9;background:#05080F;overflow:hidden}
.moment video{width:100%;height:100%;object-fit:cover}
.moment .mt{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px}
.moment .k{font:600 11px var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.moment h3{font-size:19px;line-height:1.25}
.moment p{font-size:14.5px;color:var(--muted)}
.also{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:14px}
.also-card{padding:20px}
.also-card h3{font-size:19px;margin-bottom:6px}
.also-card p{font-size:14.5px;color:var(--muted)}

/* шаги */
.how{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.how li{padding:22px 22px 24px;position:relative}
.how .n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;margin-bottom:14px;font:400 22px var(--f-display);color:#231503;
  background:radial-gradient(circle at 35% 30%,var(--gold-hi),var(--gold) 55%,var(--gold-lo))}
.how h3{font-size:21px;margin-bottom:6px}
.how p{color:var(--muted);font-size:15px}
.cta-row{display:flex;gap:14px 20px;align-items:center;flex-wrap:wrap;margin-top:24px}

.two{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:860px){.two{grid-template-columns:1fr}}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ticks li{position:relative;padding-left:28px;color:var(--text)}
.ticks li::before{content:"";position:absolute;left:2px;top:.45em;width:14px;height:8px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.honest{padding:24px;display:flex;flex-direction:column;gap:12px;border-color:var(--line-gold)}
.honest h3{font-size:21px}
.honest p{color:var(--muted);font-size:15px}
.safe{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.safe .panel{padding:22px}
.safe h3{font-size:20px;margin-bottom:6px}
.safe p{color:var(--muted);font-size:15px}

.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font:500 17px var(--f-body);list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 24px/1 var(--f-display);color:var(--gold);flex:0 0 auto;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--muted);margin-top:10px;max-width:68ch}
.seo-text h2{font-size:clamp(22px,2.6vw,28px)}
.seo-text p{color:var(--muted);margin-top:12px;font-size:15px}

.final{margin-top:clamp(56px,8vw,104px);padding:clamp(48px,7vw,84px) 0;text-align:center;background:linear-gradient(180deg,rgba(6,11,22,.55),rgba(6,11,22,.86)),url(/img/pv-final.jpg) center/cover}
.final .wrap{display:flex;flex-direction:column;align-items:center;gap:20px}
.final .hand{font:400 clamp(30px,4.6vw,48px)/1.15 var(--f-word);color:var(--gold-hi);text-shadow:0 2px 20px rgba(0,0,0,.6)}
main+footer.bottom{margin-top:0}