/* Нижние экраны главной. Токены, кнопки, карточки и сетка — из style.css */

/* Экран на подложке: 80px от содержимого до края подложки и от края до содержимого — как от бегущей строки до «Быстрого старта» */
.band{margin-top:5rem;padding:5rem 0;background:#F1F1F1}
.band + .sec,.process + .sec{padding-top:5rem}
.eyebrow-ico{display:flex;align-items:center;gap:.375rem}
.eyebrow-ico svg{width:.75rem;height:.75rem;color:var(--red)}
.eyebrow-w{color:#fff;opacity:.5}
.ico-sq{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:var(--r);background:var(--ink);color:#fff}
.ico-sq svg{width:1.125rem;height:1.125rem}
.ico-red{width:2rem;height:2rem;background:var(--red)}
.link-u{text-decoration:underline;text-underline-offset:3px}
.link-arrow{display:inline-flex;align-items:center;min-height:2.5625rem;padding:0 .5rem;font:400 .75rem/1 var(--font-t)}
.link-arrow::after{content:'→';margin-left:.375rem;transition:transform .2s}
.link-arrow:hover::after{transform:translateX(3px)}

/* 05 · Слайдер спецпредложений */
.slider{overflow:hidden;margin-top:var(--head-gap)}
.slider-track{--per:3;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--per) - 1) * .75rem) / var(--per));column-gap:.75rem;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.slider-nav{display:flex;align-items:center;gap:.5rem;margin-top:1.5rem}
.nav-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.125rem;height:2.125rem;border:1px solid var(--ink);border-radius:var(--r);background:none;color:var(--ink);cursor:pointer;transition:background .2s,color .2s,opacity .2s}
.nav-btn svg{width:1rem;height:1rem}
.nav-btn:hover{background:var(--ink);color:#fff}
.nav-btn-red{border-color:var(--red);background:var(--red);color:#fff}
.nav-btn-red:hover{background:var(--red-h);border-color:var(--red-h)}
.nav-btn:disabled{opacity:.3;cursor:default;background:none;color:var(--ink);border-color:var(--ink)}
.slider-bars{flex:1;display:flex;gap:.75rem;margin-left:1.5rem}
.slider-bars button{flex:1;position:relative;height:2.5rem;border:0;padding:0;background:none;cursor:pointer}
.slider-bars button::before{content:'';position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:var(--muted);transition:background .3s}
.slider-bars button.on::before{background:var(--red)}
.ph-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;width:100%;height:100%;background:#E6E7E9}
.ph-logo img{height:1.25rem;width:auto;opacity:.32}
.ph-logo span{font:300 .625rem/1 var(--font-t);opacity:.5}

/* 06 · Подбор: квиз на стеклянной панели поверх видео */
.pick{position:relative;display:flex;min-height:28.75rem;padding:1.5rem;border-radius:8px;overflow:hidden;background:var(--ink)}
.pick-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pick-panel{position:relative;display:flex;flex-direction:column;width:29.7rem;max-width:100%;padding:1.5rem;border-radius:8px;color:#fff;
  background:rgba(44,47,54,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.pick-panel h2{color:#fff;margin-top:.75rem;font-size:1.75rem;line-height:2rem}
.pick-sub{margin-top:.5rem;font:300 .75rem/1rem var(--font-t);opacity:.85}
.pick-steps{display:flex;gap:.4rem;margin-top:1.5rem}
.pick-steps i{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.18);transition:background .3s}
.pick-steps i.on{background:var(--red)}
.pick-body{display:grid;margin-top:1.25rem}
.q-step{grid-area:1/1;visibility:hidden;opacity:0;transition:opacity .25s}
.q-step.on{visibility:visible;opacity:1}
.q-t{font:500 1rem/1.25rem var(--font-h);letter-spacing:-.02em}
.q-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:1rem}
.q-opt{display:flex;align-items:center;justify-content:space-between;gap:.5rem;height:2.5625rem;padding:0 .75rem 0 1rem;border:1px solid rgba(255,255,255,.08);border-radius:var(--r);
  background:rgba(255,255,255,.08);color:#fff;font:400 .75rem/1 var(--font-t);text-align:left;cursor:pointer;transition:background .2s,color .2s}
.q-opt svg{flex:none;width:1rem;height:1rem;opacity:.7}
.q-opt:hover,.q-opt:focus-visible{background:#fff;color:var(--ink);outline:none}
.q-back{display:inline-flex;align-items:center;gap:.25rem;min-height:2.5rem;margin-top:.5rem;padding:0;border:0;background:none;color:#fff;opacity:.6;font:400 .75rem/1 var(--font-t);cursor:pointer}
.q-back svg{width:1rem;height:1rem}
.q-back:hover{opacity:1}
.q-form{display:grid;grid-template-columns:1fr auto;gap:.5rem;margin-top:1rem}
.q-form input[type=tel]{height:2.5625rem;padding:0 1rem;border:1px solid rgba(255,255,255,.2);border-radius:var(--r);background:rgba(255,255,255,.06);color:#fff;font:400 .875rem/1 var(--font-t);outline:none}
.q-form input[type=tel]::placeholder{color:#fff;opacity:.5}
.q-form input[type=tel]:focus{border-color:#fff}
.q-form input.err{border-color:#FF6B6B}
.q-form .agree,.q-form .q-msg{grid-column:1/-1}
.q-msg{font:400 .75rem/1.1rem var(--font-t)}
.q-msg.bad{color:#FF8A8A}
.q-msg.ok{padding:.75rem 1rem;border-radius:var(--r);background:rgba(255,255,255,.1)}
.q-form.sent input,.q-form.sent .btn,.q-form.sent .agree{display:none}

/* Согласие: общий вид для форм */
.agree{display:flex;align-items:flex-start;gap:.625rem;font:300 .75rem/1rem var(--font-t);cursor:pointer}
.agree input{flex:none;width:1rem;height:1rem;margin:0;accent-color:var(--ink)}
.agree a{text-decoration:underline;text-underline-offset:2px}
.agree.err span{color:#E5484D}
.agree-w input{accent-color:var(--red)}
.agree-w.err span{color:#FF8A8A}

/* 07 · Способы оплаты: шахматка «карточка — фото» */
.pay{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-top:var(--head-gap)}
.pay-card{display:flex;flex-direction:column;align-items:flex-start;padding:1rem;border-radius:var(--r);background:var(--soft)}
/* в шахматке «Способы оплаты» карточка по высоте фото; в остальных местах — по содержимому, снизу отступ как по бокам */
#pay .pay-card{min-height:16rem}
.pay-card .steps{margin-top:1rem}
.pay-card h3{margin-top:1.25rem;font:500 1.25rem/1.5rem var(--font-h);letter-spacing:-.03em}
.pay-card p{margin-top:.5rem;margin-bottom:1.5rem;font:300 1rem/1.25rem var(--font-t)}
.pay-card .btn{margin-top:auto}
.pay-ph{position:relative;margin:0;border-radius:var(--r);overflow:hidden;min-height:16rem}
/* фото подстраивается под высоту ряда, а не растягивает его */
.pay-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.pay-ph:hover img{transform:scale(1.04)}

/* 08 · Прозрачный процесс: экран закрепляется, шаги проявляются по очереди */
.process{position:relative;margin-top:5rem;color:#fff}
.process-pin{position:relative;overflow:hidden;padding:3.5rem 0 18rem}
.process-bg{position:absolute;inset:0;background:var(--ink)}
.process-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;opacity:.5}
.process .wrap{position:relative}
.process h2{color:#fff}
.steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-top:var(--head-gap)}
.st4{--a:1;--l:1}
.st4-top{display:flex;align-items:center;gap:1rem;height:2rem}
.st4-ico{flex:none;width:2rem;height:2rem;color:#fff;opacity:calc(.3 + .7 * var(--a));transform:scale(calc(.9 + .1 * var(--a)))}
.st4-line{flex:1;position:relative;height:1px;margin-right:1rem;background:rgba(255,255,255,.2)}
.st4-line i{position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(var(--l))}
.st4 h3{margin-top:1.25rem;font:500 1.25rem/1.5rem var(--font-h);letter-spacing:-.03em;opacity:calc(.35 + .65 * var(--a))}
.st4 p{margin-top:.5rem;max-width:15rem;font:300 1rem/1.25rem var(--font-t);opacity:calc(.25 + .5 * var(--a))}
.process-btns{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.15)}
@media (min-width:1024px){
  .process{height:calc(100vh + 30rem)}
  .process-pin{position:sticky;top:0;height:100vh;min-height:40rem;padding:3.5rem 0 0}
}

/* 09 · Контакты */
.contacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.contacts-card{display:flex;flex-direction:column;align-items:flex-start;padding:1.875rem;border-radius:8px;background:#EFEFEF}
.contacts-card h2{max-width:22rem}
.contacts-sub{margin-top:.5rem;max-width:26rem;font:300 1rem/1.25rem var(--font-t)}
.contacts-list{list-style:none;margin:1.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:1rem}
.contacts-list li{display:flex;align-items:center;gap:.75rem}
.contacts-list b{display:block;font:500 1rem/1.25rem var(--font-t)}
.contacts-list b a{text-decoration:underline;text-decoration-color:rgba(44,47,54,.3);text-underline-offset:3px}
.contacts-list span:not(.ico-sq){display:block;margin-top:.125rem;font:300 .75rem/1rem var(--font-t);opacity:.65}
.contacts-btns{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:auto;padding-top:2rem}
.map{position:relative;min-height:29rem;border-radius:8px;overflow:hidden;background:#E6E7E9}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.5)}

/* 10 · FAQ и Instagram */
/* 8 вопросов: две колонки по 4, телефон — под вопросами */
.faq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;align-items:start;margin-top:var(--head-gap)}
.faq-col{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.faq-call{display:flex;flex-wrap:wrap;align-items:center;gap:0 .75rem;margin-top:1.5rem!important}
.faq-phone{display:inline-flex;align-items:center;min-height:2.5rem;font:500 1.25rem/1.5rem var(--font-h);letter-spacing:-.02em}
.faq-phone:hover{color:var(--red)}

/* 11 · Обратный звонок */
.h2-wide,.sec-sub-wide{max-width:none}
.cb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:var(--head-gap)}
.cb-ph{position:relative;margin:0;min-height:20.6rem;border-radius:8px;overflow:hidden}
.cb-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.cb-form{padding:0 0 0 1rem}
.cb-h{margin-top:.75rem;font:500 1.75rem/2rem var(--font-h);letter-spacing:-.04em}
.cb-sub{margin-top:.5rem;max-width:24rem;font:300 .75rem/1rem var(--font-t)}
.cb-fields{display:flex;flex-direction:column;gap:.5rem;margin-top:1.5rem}
.fld input{width:100%;height:2.75rem;padding:0 1rem;border:1px solid transparent;border-radius:var(--r);background:#EDEDED;color:var(--ink);font:400 .875rem/1 var(--font-t);outline:none;transition:border-color .2s,background .2s}
.fld input::placeholder{color:var(--ink);opacity:.55}
.fld input:focus{border-color:var(--ink);background:#fff}
.fld input.err{border-color:#E5484D}
.cb-fields .agree{margin-top:.5rem}
.cb-send{display:flex;align-items:center;gap:1rem;margin-top:1rem}
.cb-send p{max-width:23rem;font:300 .625rem/1rem var(--font-t);opacity:.65}
.cb-msg{font:400 .75rem/1.1rem var(--font-t)}
.cb-msg.bad{color:#E5484D}
.cb-msg.ok{padding:.75rem 1rem;border-radius:var(--r);background:var(--soft)}
.cb-fields.sent .fld,.cb-fields.sent .agree,.cb-fields.sent .cb-send{display:none}

/* Планшет */
@media (max-width:1023px){
  .slider-track{--per:2}
  .pay{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pay > :nth-child(4){order:5} .pay > :nth-child(5){order:4}
  .steps4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2rem}
  .st4:nth-child(2) .st4-line{display:none}
  .contacts,.cb{grid-template-columns:1fr}
  .faq-list{grid-template-columns:1fr;gap:.5rem}
  .map{min-height:22rem}
  .cb-form{padding:0}
}
/* Мобайл */
@media (max-width:640px){
  .band{margin-top:4rem;padding:4rem 0}
  .band + .sec,.process + .sec{padding-top:4rem}
  .process{margin-top:4rem}
  .slider-track{--per:1}
  .nav-btn{width:2.5rem;height:2.5rem}
  .slider-bars{margin-left:.75rem;gap:.5rem}
  .pick{flex-direction:column;padding:0;min-height:0}
  .pick-video{position:relative;height:13rem}
  .pick-panel{width:100%;border-radius:0;background:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
  .q-grid{grid-template-columns:1fr}
  .q-form{grid-template-columns:1fr}
  .pay{grid-template-columns:1fr}
  .pay > :nth-child(n){order:0}
  .pay-ph{min-height:0;aspect-ratio:4/3}
  .steps4{grid-template-columns:1fr;row-gap:2rem}
  .st4-line{display:none}
  .process-pin{padding:2.5rem 0 14rem}
  .contacts-card{padding:1.25rem}
  .contacts-btns .btn{flex:1}
  .fq-a{padding:0 1rem 1rem 2.6rem}
  .cb-ph{min-height:15rem}
  .cb-send{flex-direction:column;align-items:stretch}
  .agree{min-height:2.5rem;align-items:center}
}
@media (prefers-reduced-motion:reduce){
  .slider-track,.pay-ph img{transition:none}
}


/* Линии скорости за заголовком «Прозрачного процесса» */

/* FAQ на тёмной подложке — как карточки марок */
#faq.band{position:relative;overflow:hidden;color:#fff;background:var(--ink)}
#faq .wrap{position:relative}
#faq .eyebrow{color:#fff;opacity:.5}
#faq h2{color:#fff}
#faq .fq{background:rgba(255,255,255,.07);color:#fff;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
#faq .fq:hover{background:rgba(255,255,255,.1)}
#faq .fq-n{opacity:.45}
#faq .fq-t{background:rgba(255,255,255,.12)}
#faq .fq[open] .fq-t,#faq .fq summary:hover .fq-t{background:var(--red)}
#faq .fq-a p{opacity:.75}
#faq .faq-call{color:rgba(255,255,255,.75)}
#faq .faq-phone{color:#fff}
#faq .faq-phone:hover{color:#FF6B6B}

/* Вертикальные линии сетки, как на первом экране, — фирменная деталь тёмных блоков: подбор, этапы, FAQ */
.pick .grid-lines{padding:0;max-width:none}
.pick .grid-lines i:first-child,.pick .grid-lines i:last-child{opacity:0}
@media (max-width:640px){.pick .grid-lines{display:none}}

/* Тёмные блоки «Этапы» и FAQ — цветом футера; линии сетки на них бледнее, чем на первом экране */
.hero > .grid-lines i{background:rgba(255,255,255,.067)}
.process .grid-lines i{background:rgba(255,255,255,.05)}
/* вопросы: без центральной линии, остальные вдвое прозрачнее (было .04) */
#faq .grid-lines i{background:rgba(255,255,255,.02)}
#faq .grid-lines i:nth-child(3){visibility:hidden}

/* замена карты, когда встроенная карта недоступна */
.map-fb{position:absolute;inset:0;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:.375rem;padding:1.875rem;border-radius:8px;background:#EFEFEF}
.map-fb > :not(.rings){position:relative;z-index:1}
.map-fb b{margin-top:.75rem;font:500 1.25rem/1.5rem var(--font-h);letter-spacing:-.03em}
.map-fb > span:not(.ico-sq){font:300 .875rem/1.25rem var(--font-t);opacity:.7}
.map-fb .btn{margin-top:1rem}
.map-fb .rings{--rs:22rem;--rx:-5rem;--ry:auto;top:-6rem}