/* ============================================================
   ОБЛАКА — V2: светлая панель (слева) + вертикальный слайдер фото (справа)
   Подключается ПОСЛЕ ../assets/css/main.css.
   ============================================================ */
html,body{height:100%}
body{overflow:hidden;background:var(--cream)}
.v2{display:flex;height:100svh;overflow:hidden}

/* ───────── ЛЕВО: светлая панель ───────── */
.v2-left{
  flex:0 0 44%;max-width:740px;min-width:0;
  background:radial-gradient(130% 90% at 0% 0%,#f7f2ea 0%,var(--cream) 55%);
  color:var(--ink-on-cream);
  display:flex;flex-direction:column;
  padding:clamp(22px,2.6vw,40px) clamp(26px,3.4vw,64px);
  position:relative;z-index:2;
  box-shadow:30px 0 70px -40px rgba(0,0,0,.5);
}
.v2-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.v2-left .logo{display:flex;align-items:baseline;gap:.55em;font-family:var(--font-display);font-size:1.6rem;letter-spacing:.16em;font-weight:500;color:var(--ink-on-cream)}
.v2-left .logo small{font-family:var(--font-body);font-size:.54rem;letter-spacing:.32em;text-transform:uppercase;color:#9a7b4f;font-weight:600}
.v2-left .phone{font-size:.9rem;font-weight:600;letter-spacing:.04em;color:var(--ink-on-cream);transition:color .3s}
.v2-left .phone:hover{color:#9a7b4f}

.v2-content{flex:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(18px,4vh,46px) 0}
.v2-left .eyebrow{color:#9a7b4f;margin-bottom:clamp(16px,2.4vh,24px)}
.v2-left .eyebrow::before{background:#9a7b4f}
.v2-title{font-family:var(--font-display);font-weight:400;line-height:.88;
  font-size:clamp(3rem,7vw,6.6rem);margin:0 0 .22em;color:var(--ink-on-cream)}
.v2-sub{font-size:clamp(1.02rem,1.4vw,1.25rem);max-width:33ch;color:var(--muted-on-cream);font-weight:400;line-height:1.5;margin-bottom:clamp(24px,3.4vh,34px)}
.v2-sub b{color:var(--ink-on-cream);font-weight:600}
.v2-cta{display:flex;flex-wrap:wrap;gap:12px}
.v2-cta .btn-primary{box-shadow:0 16px 40px -18px rgba(196,168,132,.8)}
.v2-left .btn-ghost{border:1px solid rgba(26,24,20,.22);color:var(--ink-on-cream);background:transparent}
.v2-left .btn-ghost:hover{border-color:#9a7b4f;color:#9a7b4f;background:rgba(154,123,79,.06);transform:translateY(-2px)}
.v2-price{margin-top:clamp(20px,3vh,30px);display:flex;align-items:baseline;gap:.6em}
.v2-price .lbl{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-on-cream)}
.v2-price .val{font-family:var(--font-display);font-size:clamp(1.6rem,2.6vw,2.2rem);color:#9a7b4f}

.v2-facts{display:flex;flex-wrap:wrap;gap:clamp(18px,2.2vw,44px);border-top:1px solid var(--line-cream);padding-top:22px}
.v2-facts .f b{display:block;font-family:var(--font-display);font-size:clamp(1.5rem,2.4vw,2.1rem);color:var(--ink-on-cream);font-weight:500;line-height:1}
.v2-facts .f span{font-size:.78rem;color:var(--muted-on-cream);letter-spacing:.02em}

/* ───────── ПРАВО: вертикальный слайдер ───────── */
.v2-right{flex:1;position:relative;overflow:hidden;background:#0a0b0c;min-width:0}
.vviewport{position:absolute;inset:0;overflow:hidden}
.vtrack{position:absolute;inset:0;display:flex;flex-direction:column;height:100%;transition:transform 1s var(--ease);will-change:transform}
.vslide{position:relative;flex:0 0 100%;height:100%;overflow:hidden}
.vslide img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 6.5s ease-out}
.vslide.is-active img{transform:scale(1)}
.vcap{position:absolute;left:clamp(16px,1.8vw,26px);bottom:clamp(16px,2.2vw,26px);
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone);
  background:rgba(10,11,12,.5);backdrop-filter:blur(8px);border:1px solid rgba(244,240,234,.16);
  padding:.6em 1.05em;border-radius:40px;opacity:0;transform:translateY(8px);transition:.6s var(--ease) .25s}
.vslide.is-active .vcap{opacity:1;transform:none}

/* точки (вертикально) */
.vdots{position:absolute;right:clamp(14px,1.4vw,22px);top:50%;transform:translateY(-50%);z-index:4;display:flex;flex-direction:column;gap:10px}
.vdot{width:3px;height:28px;border-radius:3px;background:rgba(244,240,234,.32);cursor:pointer;position:relative;overflow:hidden;transition:.3s;padding:0;border:none}
.vdot:hover{background:rgba(244,240,234,.55)}
.vdot.active{background:rgba(244,240,234,.28)}
.vdot.active::after{content:"";position:absolute;inset:0;background:var(--sand);transform-origin:top;animation:vfillY 5s linear forwards}
@keyframes vfillY{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* навигация (стрелки + счётчик) */
.vnav{position:absolute;right:clamp(14px,1.4vw,22px);bottom:clamp(18px,3vh,30px);z-index:4;display:flex;flex-direction:column;align-items:center;gap:12px}
.varrow{width:46px;height:46px;border-radius:50%;border:1px solid rgba(244,240,234,.3);background:rgba(10,11,12,.32);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:var(--bone);transition:.35s var(--ease)}
.varrow:hover{background:var(--sand);color:var(--ink);border-color:var(--sand)}
.vcount{font-family:var(--font-display);color:var(--bone);font-size:1rem;display:flex;flex-direction:column;align-items:center;line-height:1.15}
.vcount i{font-style:normal;opacity:.4;margin:1px 0}
.vcount span{opacity:.55}

/* ───────── МОДАЛКА КВИЗА ───────── */
.qmodal{position:fixed;inset:0;z-index:5000;display:none;align-items:center;justify-content:center;padding:18px}
.qmodal.open{display:flex}
.qmodal-overlay{position:absolute;inset:0;background:rgba(6,7,8,.82);backdrop-filter:blur(10px);animation:qfade .4s}
@keyframes qfade{from{opacity:0}to{opacity:1}}
.qmodal .card{position:relative;z-index:2;width:100%;max-width:560px;max-height:92svh;overflow:auto;
  background:var(--panel);border:1px solid var(--line-strong);border-radius:8px;
  padding:clamp(24px,3vw,40px);box-shadow:var(--shadow);animation:qpop .5s var(--ease)}
@keyframes qpop{from{opacity:0;transform:translateY(28px) scale(.98)}to{opacity:1;transform:none}}
.qmodal-close{position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;transition:.3s;background:rgba(12,13,14,.5);color:var(--bone)}
.qmodal-close:hover{background:var(--sand);color:var(--ink);border-color:var(--sand);transform:rotate(90deg)}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-right:34px}
.card-head .chip-time{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sand)}
.card-head .step-x{font-size:.78rem;color:var(--bone-faint);font-weight:500}
.progress{height:3px;background:var(--line);border-radius:3px;overflow:hidden;margin-bottom:clamp(20px,3vh,28px)}
.progress span{display:block;height:100%;width:20%;background:linear-gradient(90deg,var(--sand),var(--sand-bright));border-radius:3px;transition:width .5s var(--ease)}
.step{display:none;animation:qslide .5s var(--ease)}
.step.active{display:block}
@keyframes qslide{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
.q{font-family:var(--font-display);font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:500;line-height:1.12;margin-bottom:.12em;color:var(--bone)}
.q-sub{color:var(--bone-dim);font-size:.92rem;font-weight:300;margin-bottom:1.4em}
.opts{display:grid;gap:10px}
.opt{display:flex;align-items:center;gap:1em;text-align:left;width:100%;padding:1.02em 1.25em;
  background:rgba(12,13,14,.4);border:1px solid var(--line-strong);border-radius:5px;transition:.3s var(--ease);font-size:1rem;font-weight:500;color:var(--bone)}
.opt:hover{border-color:var(--sand);background:rgba(196,168,132,.08);transform:translateX(4px)}
.opt .mk{width:26px;height:26px;border-radius:50%;border:1px solid var(--line-strong);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:.78rem;color:var(--bone-faint);transition:.3s}
.opt:hover .mk{border-color:var(--sand);color:var(--sand)}
.opt.sel{border-color:var(--sand);background:rgba(196,168,132,.14)}
.opt.sel .mk{background:var(--sand);color:var(--ink);border-color:var(--sand)}
.bonus{display:flex;align-items:center;gap:.9em;background:rgba(196,168,132,.12);border:1px solid rgba(196,168,132,.32);border-radius:6px;padding:.95em 1.1em;margin-bottom:1.3em}
.bonus svg{color:var(--sand);flex:0 0 auto}
.bonus p{font-size:.9rem;line-height:1.4;color:var(--bone)}
.bonus b{color:var(--sand-bright)}
.qmodal .field{margin-bottom:11px}
.qmodal .field input{width:100%;padding:1.05em 1.2em;background:rgba(12,13,14,.5);border:1px solid var(--line-strong);border-radius:5px;color:var(--bone);font-size:1rem;font-family:inherit;transition:.3s}
.qmodal .field input::placeholder{color:var(--bone-faint)}
.qmodal .field input:focus{outline:none;border-color:var(--sand);background:rgba(12,13,14,.85)}
#quiz .btn{width:100%;padding:1.15em 1.6em;font-size:.84rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--sand);color:var(--ink);border-radius:4px;margin-top:6px}
#quiz .btn:hover{background:var(--sand-bright);transform:translateY(-2px)}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px;gap:14px;flex-wrap:wrap}
.back-btn{font-size:.8rem;color:var(--bone-faint);display:inline-flex;align-items:center;gap:.5em;transition:.3s}
.back-btn:hover{color:var(--sand)}
.back-btn[hidden]{visibility:hidden}
.price-tag{font-size:.78rem;color:var(--bone-faint)}
.price-tag b{font-family:var(--font-display);font-size:1.15rem;color:var(--sand);font-weight:500}
.policy{font-size:.72rem;color:var(--bone-faint);text-align:center;margin-top:1em;font-weight:300}
.policy a{text-decoration:underline;text-underline-offset:2px}
.done{display:none;text-align:center;padding:1.4em 0;animation:qslide .5s var(--ease)}
.done.active{display:block}
.done .check{width:72px;height:72px;border-radius:50%;border:1.5px solid var(--sand);color:var(--sand);display:flex;align-items:center;justify-content:center;margin:0 auto 1.1em}
.done h2{font-family:var(--font-display);font-size:2rem;font-weight:500;margin-bottom:.3em;color:var(--bone)}
.done p{color:var(--bone-dim);font-weight:300;max-width:34ch;margin:0 auto}
.done .summary{margin-top:1.5em;text-align:left;border-top:1px solid var(--line);padding-top:1.1em;display:grid;gap:.5em}
.done .summary .row{display:flex;justify-content:space-between;gap:1em;font-size:.88rem}
.done .summary .row span{color:var(--bone-faint)}
.done .summary .row b{color:var(--bone);font-weight:500;text-align:right}
.phone-hint{color:var(--bone-faint)}

/* ───────── АДАПТИВ ───────── */
@media(max-width:920px){
  html,body{height:auto}
  body{overflow-x:hidden;overflow-y:auto}
  .v2{flex-direction:column;height:auto;min-height:100svh}
  .v2-right{flex:none;order:1;height:46svh;min-height:300px;box-shadow:none}
  .v2-left{flex:none;order:2;max-width:none;box-shadow:none;padding-top:clamp(26px,5vw,40px);padding-bottom:clamp(30px,6vw,44px)}
  .v2-content{justify-content:flex-start;padding-top:clamp(16px,4vw,28px)}
  /* точки горизонтально снизу */
  .vdots{top:auto;bottom:14px;left:50%;right:auto;transform:translateX(-50%);flex-direction:row}
  .vdot{width:28px;height:3px}
  .vdot.active::after{transform-origin:left;animation:vfillX 5s linear forwards}
  @keyframes vfillX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .vnav{flex-direction:row;right:14px;bottom:14px}
  .vcount{flex-direction:row;gap:.3em}
  .vcount i{margin:0}
}
@media(max-width:560px){
  .v2-left .phone{display:none}
  .v2-cta .btn{width:100%}
  .v2-right{height:42svh;min-height:260px}
  .vcap{font-size:.66rem}
}