/* Вариант C «Мессенджер и карточки» (V2, 05.11): семь блоков — компоненты пака «300 Awwwards Components».
   hero — Hero Animations / 23 · hub — Grid Animations / 4 · sit — Scroll Animation / 70 · path — Sliders / 3 ·
   price — Hover Effects / 19 · case — Grid Animations / 9 · fin — Mouse Effects / 20. Префикс vc-, палитра — токены «Шампань».
   Без sticky и pin. Состояния до запуска скрипта — обычная раскладка: всё содержимое видно. */

:root { --vc-ready: 1; }   /* метка для var-c.js: стили применены, можно мерить блоки */
.vc-hr, .vc-gp, .vc-ch, .vc-sk, .vc-mg, .vc-mw, .vc-ft { --vc-r: 16px; --vc-sh: 0 18px 40px rgba(43, 36, 29, .10); }
.vc-hr .law, .vc-gp .law, .vc-ch .law, .vc-sk .law, .vc-mg .law, .vc-mw .law { font-size: max(15px, .8125em); }
.vc-k { font: 600 .75rem/1.3 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-lo); }

/* ===================== 1. Первый экран — Hero Animations / 23 ===================== */
.vc-hr { position: relative; overflow: clip; background: var(--haze); color: var(--ink); padding: calc(var(--hdr) + var(--s4)) 0 var(--s5); }
.vc-hr .crumbs { margin-bottom: 0; }
.vc-hr__row { display: grid; gap: var(--s5); margin-top: var(--s3); }
.vc-hr__t { font: var(--w-h) calc(clamp(2.125rem, 1.4rem + 2.2vw, 3.125rem) * var(--k-h))/1.06 var(--f-serif); letter-spacing: var(--ls-h); text-wrap: balance; }
.vc-hr__t .hero__pre { display: inline; margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }
.vc-hr__lead { margin-top: var(--s4); max-width: 34em; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); }
.vc-hr__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.vc-hr__own { margin-top: var(--s5); }
.vc-hr__meta { margin-top: var(--s3); font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
.vc-hr__main { margin: 0; display: grid; grid-template-columns: 120px 1fr; gap: var(--s4); align-items: end; }
.vc-hr__cap { display: grid; gap: 2px; font: 500 .9375rem/1.3 var(--f-sans); color: var(--ink); }
.vc-hr__cap > span { display: block; }
.vc-hr__cap > span:last-child { color: var(--ink-2); font-weight: 400; }
.vc-hr__main .vc-hr__cap { order: 2; }
.vc-hr__ph { overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--vc-r); background: var(--g9); }
.vc-hr__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.vc-hr__sides { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.vc-hr__side { display: grid; gap: 6px; align-content: start; }
.vc-hr__img { display: flex; gap: 10px; align-items: flex-start; height: 100%; padding: 14px 16px; overflow: hidden;
  background: var(--white); border-radius: var(--vc-r); font-size: .9375rem; line-height: 1.4; color: var(--ink); }
.vc-hr__ic { width: 22px; height: 22px; flex: none; margin-top: 1px; color: var(--gold-lo); }
.vc-hr__img--num { flex-direction: column; gap: 2px; background: var(--ink); color: var(--haze); }
.vc-hr__img--num b { font: 500 2.75rem/1 var(--f-num); letter-spacing: -.01em; }
.vc-hr__side .vc-hr__cap { font: 600 .75rem/1.2 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-lo); }
.vc-hr__side:first-child { grid-row: span 1; }
/* имя: половины, буквы в масках (clip-path, как .letter в демо) */
.vc-hr__name { display: flex; margin-top: var(--s5); font: 400 10.4vw/.9 var(--f-serif); text-transform: uppercase; color: var(--ink); user-select: none; }
.vc-hr__half { display: flex; }
.vc-hr__half--1 { flex: 4; margin-right: .3em; }
.vc-hr__half--2 { flex: 7; }
.vc-hr__l { flex: 1; display: flex; justify-content: center; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.vc-hr__l > span { display: block; padding-bottom: .04em; }
.js-anim .vc-hr:not(.is-ready) .vc-hr__name, .js-anim .vc-hr:not(.is-ready) .vc-hr__ph img { opacity: 0; }
@media (max-width: 767px) { .vc-hr__cta { display: none; } }
@media (min-width: 600px) {
  .vc-hr__main { grid-template-columns: 160px 1fr; }
}
@media (min-width: 768px) and (max-width: 959px) {
  .vc-hr__row { grid-template-columns: 220px 1fr; }
  .vc-hr__copy { grid-column: 1 / -1; }
  .vc-hr__main { grid-template-columns: 1fr; align-items: start; }
  .vc-hr__main .vc-hr__cap { order: 0; }
  .vc-hr__name { font-size: 9.6vw; }
}
@media (min-width: 960px) {
  .vc-hr__row { grid-template-columns: minmax(0, 1.3fr) clamp(200px, 19vw, 250px) minmax(0, .95fr); gap: var(--s6); align-items: start; }
  .vc-hr__main { grid-template-columns: 1fr; gap: var(--s2); }
  .vc-hr__main .vc-hr__cap { order: 0; }
  .vc-hr__sides { grid-template-columns: 1fr; gap: 10px; }
  .vc-hr__sides .vc-hr__side:first-child { grid-template-columns: 1fr; }
  .vc-hr__name { margin-top: var(--s5); font-size: min(8.3vw, 8rem); }
}

/* ===================== 2. Выбор проблемы — Grid Animations / 4 ===================== */
.vc-gp { --gap: 12px; position: relative; margin-top: var(--s6); }
.vc-gp__g { position: relative; display: grid; gap: var(--gap); }
.vc-gp__t { position: relative; width: 100%; min-height: 64px; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  padding: 14px 16px; text-align: left; background: var(--white); color: var(--t-d); border-radius: var(--vc-r);
  transition: background-color .25s ease, color .25s ease; }
.vc-gp__ic { width: 26px; height: 26px; color: var(--gold-lo); }
.vc-gp__tt b { display: block; font: 500 1.0625rem/1.3 var(--f-sans); }
.vc-gp__tt small { display: block; margin-top: 3px; font-size: .9375rem; line-height: 1.35; color: var(--t-d2); }
.vc-gp__go { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--g8); }
.vc-gp__go .i { width: 18px; height: 18px; transition: transform .3s var(--ease-out); }
.vc-gp__t[aria-expanded="true"] { background: var(--ink); color: var(--haze); }
.vc-gp__t[aria-expanded="true"] small { color: color-mix(in srgb, var(--haze) 72%, transparent); }
.vc-gp__t[aria-expanded="true"] .vc-gp__ic { color: var(--gold); }
.vc-gp__t[aria-expanded="true"] .vc-gp__go { background: var(--gold); color: var(--ink); }
.vc-gp__t[aria-expanded="true"] .vc-gp__go .i { transform: rotate(45deg); }
.js .vc-gp__p { display: none; }
.js .vc-gp__p.is-open { display: block; }
.vc-gp__in { margin-top: 8px; padding: 20px; background: var(--white); border-radius: var(--vc-r); color: var(--t-d); }
.vc-gp__k { font: 600 .75rem/1.3 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-lo); }
.vc-gp__h { margin-top: 6px; outline: none; }
.vc-gp__s { margin-top: var(--s3); }
.vc-gp__s a { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s3); align-items: center; min-height: 44px; padding: 11px 0;
  border-top: 1px solid var(--line-l); color: inherit; text-decoration: none; }
.vc-gp__s b { font-weight: 500; }
.vc-gp__s span { grid-column: 1; font-size: .9375rem; line-height: 1.4; color: var(--t-d2); }
.vc-gp__s .i { grid-column: 2; grid-row: 1 / span 2; color: var(--gold-lo); transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .vc-gp__s a:hover .i { transform: translateX(4px); } .vc-gp__s a:hover b { color: var(--gold-hi); } }
.vc-gp__more { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; margin-top: var(--s3); font-weight: 600; color: var(--gold-hi); text-decoration: none; }
.vc-gp__intro { margin-top: var(--s3); line-height: 1.55; }
.vc-gp__steps { display: grid; gap: 6px; margin-top: var(--s3); }
.vc-gp__cta { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.vc-gp__bar { position: absolute; z-index: 2; pointer-events: none; }
.vc-gp .nf2 { margin-top: var(--s4); }
@media (min-width: 960px) {
  .vc-gp { --gap: 20px; }
  .vc-gp__g { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(158px, auto); }
  .vc-gp__t { height: 100%; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; align-items: start; padding: 18px 18px 20px; }
  .vc-gp__ic { width: 30px; height: 30px; }
  .vc-gp__tt { grid-column: 1 / -1; align-self: end; }
  .vc-gp__go { grid-column: 2; grid-row: 1; }
  .js .vc-gp.is-on .vc-gp__p { display: block; position: absolute; z-index: 3; top: 0; bottom: 0; width: calc(50% - var(--gap) / 2);
    visibility: hidden; opacity: 0; pointer-events: none; }
  .js .vc-gp.is-on .vc-gp__p.is-open { visibility: visible; pointer-events: auto; }
  .vc-gp.is-on .vc-gp__i:nth-child(4n+1) .vc-gp__p, .vc-gp.is-on .vc-gp__i:nth-child(4n+2) .vc-gp__p { left: calc(50% + var(--gap) / 2); }
  .vc-gp.is-on .vc-gp__i:nth-child(4n+3) .vc-gp__p, .vc-gp.is-on .vc-gp__i:nth-child(4n) .vc-gp__p { left: 0; }
  .vc-gp.is-on .vc-gp__in { height: 100%; margin: 0; padding: 26px 30px; box-shadow: var(--vc-sh); }
  .vc-gp.is-on .vc-gp__h { font-size: calc(1.5rem * var(--k-h)); }
}

/* ===================== 3. Ситуации — Scroll Animation / 70 ===================== */
.vc-ch { margin-top: var(--s6); }
.vc-ch__l { display: grid; gap: 10px; }
.vc-ch__row { display: flex; align-items: flex-start; }
.vc-ch__row--a, .vc-ch__row--r { justify-content: flex-end; }
.vc-msg { position: relative; overflow: hidden; border-radius: 2rem; }
.vc-msg__c { display: block; }
.vc-msg--q { display: inline-flex; max-width: 94%; min-height: 56px; padding: 12px 22px 12px 12px; text-align: left; background: var(--white); color: var(--t-d);
  transition: background-color .25s ease, color .25s ease; }
.vc-msg--q .vc-msg__c { display: flex; gap: 12px; align-items: center; }
.vc-msg__n { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--g8); font: 600 .8125rem/1 var(--f-num); color: var(--gold-lo); }
.vc-msg__t b { display: block; font-weight: 600; line-height: 1.3; }
.vc-msg__t small { display: block; margin-top: 2px; font-size: .9375rem; line-height: 1.35; color: var(--t-d2); }
.vc-msg--q[aria-expanded="true"] { background: var(--ink); color: var(--haze); }
.vc-msg--q[aria-expanded="true"] small { color: color-mix(in srgb, var(--haze) 72%, transparent); }
.vc-msg--q[aria-expanded="true"] .vc-msg__n { background: var(--gold); color: var(--ink); }
.vc-msg--a { width: 100%; max-width: 100%; padding: 1.5rem 2rem; background: color-mix(in srgb, var(--gold) 62%, var(--white)); color: var(--ink); }
.vc-msg--a .law { color: color-mix(in srgb, var(--ink) 78%, transparent); }
.vc-msg__quote { margin: 0 0 var(--s4); padding: 2px 0 2px 12px; border-left: 3px solid var(--ink); }
.vc-msg__quote h3 { font-size: calc(1.25rem * var(--k-h)); line-height: 1.2; }
.vc-msg__cols { display: grid; gap: var(--s4); }
.vc-msg__k { margin-bottom: 6px; font: 600 .75rem/1.3 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 80%, transparent); }
.vc-msg__k ~ .vc-msg__k { margin-top: var(--s4); }
.vc-msg__now, .vc-msg__dont, .vc-msg__do { display: grid; gap: 6px; line-height: 1.5; }
ol.vc-msg__now { counter-reset: n; }
ol.vc-msg__now li { position: relative; padding-left: 26px; counter-increment: n; }
ol.vc-msg__now li::before { content: counter(n); position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--ink); color: var(--haze); font: 600 .75rem/1 var(--f-num); }
.vc-msg__dont li, .vc-msg__do li { position: relative; padding-left: 18px; }
.vc-msg__dont li::before, .vc-msg__do li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.vc-msg__dont li::before { background: transparent; border: 1.5px solid var(--ink); }
.vc-msg__term { display: flex; gap: 10px; margin-top: var(--s3); padding: 10px 14px; border-radius: 14px; background: var(--ink); color: var(--haze); font-size: .9375rem; line-height: 1.45; }
.vc-msg__term .i { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--gold); }
.vc-msg__term .law { color: color-mix(in srgb, var(--haze) 75%, transparent); }
.vc-msg__say { display: flex; gap: 10px; margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); font-size: .9375rem; line-height: 1.45; }
.vc-msg__say .i { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.vc-ch__row--r { flex-wrap: wrap; gap: 8px var(--s3); align-items: center; margin-top: var(--s3); }
.vc-ch__rk { font: 600 .75rem/1.3 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--t-d2); }
.vc-ch__reply { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); }
.vc-ch__reply .btn--ghost-d { --fg: var(--t-d); --bd: color-mix(in srgb, var(--t-d) 40%, transparent); }
.vc-ch__nf a { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 20px; border-radius: 2rem; border: 1.5px dashed color-mix(in srgb, var(--t-d) 30%, transparent);
  color: var(--t-d); text-decoration: none; font-weight: 500; }
.vc-ch__nf .i { color: var(--gold-lo); }
/* «печатает…» — три точки, как .typing-indicator в демо */
.vc-dots { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .35rem; pointer-events: none; visibility: hidden; opacity: 0; }
.vc-dots span { width: .55rem; height: .55rem; border-radius: 50%; background: var(--ink); animation: vc-typing 1s infinite ease-in-out; }
.vc-msg--q .vc-dots span { background: var(--gold-lo); }
.vc-dots span:nth-child(2) { animation-delay: .2s; }
.vc-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes vc-typing { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.25rem); } }
.js .vc-ch__a:not(.is-open) { display: none; }
.vc-ch__a { margin: 6px 0 10px; }
@media (min-width: 700px) { .vc-msg__cols { grid-template-columns: 1fr 1fr; gap: var(--s5); } }
@media (max-width: 599px) { .vc-msg--a { padding: 1.25rem 1.25rem; border-radius: 1.5rem; } .vc-msg { border-radius: 1.5rem; } }
@media (min-width: 960px) {
  .js .vc-ch__l { grid-template-columns: minmax(0, 4.1fr) minmax(0, 7.9fr); grid-template-rows: repeat(var(--rows), auto) 1fr; column-gap: var(--s6); row-gap: 10px; align-items: start; }   /* 1fr: высокий ответ не раздвигает строки слева */
  .js .vc-ch__i { display: contents; }
  .js .vc-ch__row--q, .js .vc-ch__nf { grid-column: 1; }
  .js .vc-ch__a { grid-column: 2; grid-row: 1 / -1; margin: 0; }
  .js .vc-ch__a:not(.is-open) { display: block; visibility: hidden; pointer-events: none; }   /* 05.11: место — по самому длинному ответу, ничего не прыгает */
  .vc-msg--q { width: 100%; max-width: 100%; }
}

/* ===================== 4. Как пойдёт работа — Sliders / 3 ===================== */
.vc-sk { margin-top: var(--s6); }
.vc-sk__l { display: grid; gap: var(--s3); }
.vc-sk__c { display: flex; flex-direction: column; padding: 22px 24px 20px; background: var(--white); border-radius: 18px; color: var(--t-d); box-shadow: 0 1px 0 var(--line-l); }
.vc-sk__top { display: flex; gap: var(--s3); font: 600 .75rem/1.3 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-lo); }
.vc-sk__top span + span { display: none; }
.vc-sk__t { margin-top: var(--s2); font-size: calc(clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem) * var(--k-h)); line-height: 1.12; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); padding-bottom: .08em; }
.vc-sk__b { margin-top: var(--s3); display: grid; gap: var(--s2); line-height: 1.55; }
.vc-sk__you { color: var(--t-d2); }
.vc-sk__you b { color: var(--t-d); font-weight: 600; }
.vc-sk__note { justify-self: start; padding: 4px 12px; border-radius: 999px; background: var(--g8); font-size: .9375rem; }
.vc-sk__nav { display: none; align-items: center; gap: var(--s3); margin-top: auto; padding-top: var(--s4); }
.vc-sk__btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--t-d) 30%, transparent); color: var(--t-d); transition: background-color .2s, color .2s; }
.vc-sk__btn[data-sk="next"] { background: var(--ink); border-color: var(--ink); color: var(--haze); }
.vc-sk__back { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .vc-sk__btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); } }
.vc-sk__cnt { font: 500 .9375rem/1 var(--f-num); color: var(--t-d2); }
.vc-sk.is-on .vc-sk__l { position: relative; display: block; overflow: hidden; perspective: 300px; perspective-origin: 50% 50%; height: var(--sk-h, 560px); }
.vc-sk.is-on .vc-sk__c { position: absolute; left: 50%; top: var(--sk-top, 50%); width: min(100%, 760px); height: var(--sk-ch, auto);
  box-shadow: 0 14px 34px rgba(43, 36, 29, .12); cursor: pointer; }
.vc-sk.is-on .vc-sk__c::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); opacity: calc(var(--d, 0) * .05); pointer-events: none; transition: opacity .6s ease; }
.vc-sk.is-on .vc-sk__top span + span { display: inline; color: var(--t-d2); letter-spacing: .06em; }
.vc-sk.is-on .vc-sk__c[data-d="0"] .vc-sk__top span + span { visibility: hidden; }
.vc-sk.is-on .vc-sk__nav { display: flex; }
.vc-sk.is-on .vc-sk__b > * { position: relative; }
@media (max-width: 599px) { .vc-sk.is-on .vc-sk__c { padding: 18px 18px 16px; } }

/* ===================== 5. Цены — Hover Effects / 19 ===================== */
.vc-mg { margin-top: var(--s6); }
.vc-mg__h { font: 600 .75rem/1.3 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-lo); }
.vc-mg__cards { display: grid; gap: 14px; margin-top: var(--s3); }
.vc-mg__c { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 22px; background: var(--white); border-radius: 1rem; color: var(--t-d); box-shadow: var(--vc-sh); }
.vc-mg__c b { font: 600 1rem/1.3 var(--f-sans); }
.vc-mg__c i { font: 500 clamp(2rem, 1.7rem + 1vw, 2.5rem)/1.05 var(--f-num); font-style: normal; letter-spacing: -.01em; white-space: nowrap; }
.vc-mg__c small { font-size: .9375rem; line-height: 1.4; color: var(--t-d2); }
.vc-mg__c--free { background: var(--ink); color: var(--haze); }
.vc-mg__c--free i { color: var(--gold); }
.vc-mg__c--free small { color: color-mix(in srgb, var(--haze) 74%, transparent); }
.vc-mg__c--days { background: color-mix(in srgb, var(--gold) 55%, var(--white)); }
.vc-mg__c--days small { color: color-mix(in srgb, var(--ink) 80%, transparent); }
.vc-mg__cards > :nth-child(1) { rotate: 1.2deg; } .vc-mg__cards > :nth-child(2) { rotate: -1.2deg; }
.vc-mg__cards > :nth-child(3) { rotate: 1.6deg; } .vc-mg__cards > :nth-child(4) { rotate: -2deg; }
.vc-mg__gets { margin-top: var(--s5); max-width: 46em; line-height: 1.55; color: var(--t-d2); }
.vc-mg__gets b { color: var(--t-d); font-weight: 600; }
.vc-mg__work { margin-top: var(--s5); padding: 20px 22px; background: var(--white); border-radius: var(--vc-r); color: var(--t-d); }
.vc-mg__l { margin-top: var(--s2); }
.vc-mg__l li { display: flex; justify-content: space-between; gap: var(--s4); padding: 11px 0; border-top: 1px solid var(--line-l); line-height: 1.4; }
.vc-mg__l b { font-weight: 400; }
.vc-mg__l i { flex: none; font: 500 1rem/1.4 var(--f-num); font-style: normal; white-space: nowrap; }
.vc-mg__note { margin-top: var(--s3); font-size: .9375rem; line-height: 1.5; color: var(--t-d2); }
.vc-mg__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s5); }
.vc-mg__cta .btn--ghost-d { --fg: var(--t-d); --bd: color-mix(in srgb, var(--t-d) 40%, transparent); }
@media (min-width: 600px) { .vc-mg__cards { grid-template-columns: 1fr 1fr; gap: 18px; } }
@media (min-width: 960px) {
  .vc-mg__l { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s6); }
  .vc-mg.is-on .vc-mg__stage { position: relative; height: 400px; }
  .vc-mg.is-on .vc-mg__cards { position: absolute; top: 54%; left: 50%; margin: 0; display: block; }
  .vc-mg.is-on .vc-mg__c { position: absolute; top: 0; left: 0; width: 262px; height: 290px; rotate: none; }
  .vc-mg.is-on .vc-mg__c i { margin-top: auto; }
}

/* ===================== 6. Пример — Grid Animations / 9 ===================== */
.vc-mw { position: relative; margin-top: var(--s6); }
.vc-mw__g { position: relative; display: grid; gap: 14px; }
.vc-mw__i { position: relative; }
.vc-mw__card { height: 100%; padding: 20px 22px; background: var(--white); border-radius: var(--vc-r); color: var(--t-d); box-shadow: var(--vc-sh); line-height: 1.5; }
.vc-mw__k { font: 600 .75rem/1.3 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-lo); }
.vc-mw__t { margin: 8px 0 var(--s2); }
.vc-mw__i--sit .vc-mw__card { background: var(--ink); color: var(--haze); }
.vc-mw__i--sit .vc-mw__k { color: var(--gold); }
.vc-mw__i--res .vc-mw__card { background: color-mix(in srgb, var(--gold) 45%, var(--white)); }
.vc-mw__i--res .vc-mw__k { color: color-mix(in srgb, var(--ink) 78%, transparent); }
.vc-mw__i--res p:last-child { margin-top: 6px; }
.vc-mw__n { display: block; margin: 6px 0 4px; font: 500 2.25rem/1 var(--f-num); color: var(--gold); }
.vc-mw__s { font-weight: 500; }
.vc-mw__hit { display: none; }
.vc-mw__note { margin-top: var(--s4); max-width: 52em; font-size: .9375rem; line-height: 1.5; color: var(--t-d2); }
.vc-mw__more { margin-top: var(--s2); }
@media (min-width: 768px) {
  .vc-mw__g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vc-mw__i--sit, .vc-mw__i--res { grid-column: 1 / -1; }
  .vc-mw.is-on .vc-mw__hit { display: block; position: absolute; inset: 0; z-index: 2; border-radius: var(--vc-r); cursor: zoom-in; }
  .vc-mw.is-on .vc-mw__hit[aria-pressed="true"] { cursor: zoom-out; }
  .vc-mw.is-on .vc-mw__i { will-change: auto; }
}
@media (min-width: 960px) {
  .vc-mw__g { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .vc-mw__i, .vc-mw__i--sit, .vc-mw__i--res { grid-column: span var(--span, 1); }
  .vc-mw__i { min-height: 178px; }
}

/* ===================== 7. Финал — Mouse Effects / 20 ===================== */
.vc-ft { position: relative; overflow: hidden; background: var(--ink); color: var(--haze); padding: var(--s8) 0 var(--s6); }
.vc-ft__in { position: relative; display: grid; gap: var(--s6); }
.vc-ft__top { position: relative; z-index: 2; display: grid; gap: var(--s5); }
.vc-ft .kick { color: var(--gold); }
.vc-ft__tel { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: var(--s4); font: 500 clamp(1.875rem, 1.3rem + 2vw, 2.75rem)/1 var(--f-num); color: var(--haze); text-decoration: none; letter-spacing: .01em; }
.vc-ft__tel .i { width: .8em; height: .8em; color: var(--gold); }
.vc-ft__b { margin-top: var(--s4); }
.vc-ft .btn--ghost-l { --bg: transparent; --fg: var(--haze); --bd: color-mix(in srgb, var(--haze) 45%, transparent); }
@media (hover: hover) and (pointer: fine) { .vc-ft .btn--ghost-l:hover { --bg: var(--haze); --fg: var(--ink); --bd: var(--haze); } }
.vc-ft__p { max-width: 30rem; font-size: var(--fs-lead); line-height: 1.55; color: color-mix(in srgb, var(--haze) 84%, transparent); }
.vc-ft__hours { margin-top: var(--s4); max-width: 30rem; font-size: .9375rem; line-height: 1.5; color: color-mix(in srgb, var(--haze) 66%, transparent); }
.vc-ft__imgs { position: relative; display: flex; justify-content: space-between; align-items: center; gap: var(--s4); }
.vc-ft__img { position: relative; }
.vc-ft__img--l { width: 46%; }
.vc-ft__img--r { width: 42%; }
.vc-ft__ascii { display: block; width: 100%; height: auto; opacity: .22; }
.vc-ft__img--l.is-ascii .vc-ft__ascii { opacity: 0; }
.vc-ft__img canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.vc-ft__fr { overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--r-card); }
.vc-ft__ph { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.vc-ft__mask { overflow: hidden; }
.vc-ft__h { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: .3em;
  font: 500 clamp(2.5rem, .9rem + 5.4vw, 6.25rem)/1.02 var(--f-serif); letter-spacing: -.01em; color: var(--haze); }
.vc-ft__w { display: block; }
.vc-ft__w--2 { margin-left: auto; text-align: right; }
.vc-ft__h .gw { color: var(--gold); }
@media (min-width: 960px) {
  .vc-ft__in { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); grid-template-areas: "lnk txt" "gap ph" "h h"; column-gap: var(--s7); row-gap: var(--s5); }
  .vc-ft__top { display: contents; }
  .vc-ft__lnk { grid-area: lnk; position: relative; z-index: 2; }
  .vc-ft__txt { grid-area: txt; position: relative; z-index: 2; }
  .vc-ft__imgs { display: contents; }
  .vc-ft__img--l { position: absolute; z-index: 1; left: -2%; top: 150px; width: min(44%, 500px); pointer-events: none; }
  .vc-ft__img--r { grid-area: ph; justify-self: end; width: min(100%, 230px); }
  .vc-ft__h { grid-area: h; margin-top: calc(var(--s4) * -1); }
}

/* телефон: факты первого экрана в две колонки — без иконок, с переносами */
@media (max-width: 599px) {
  .vc-hr__img { padding: 12px 12px; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
  .vc-hr__img > .vc-hr__ic { display: none; }
}