/* Блоки v2/v3 внутри бота. Сгенерировано из v2.css + v3.css, область .vk — чтобы не задевать остальные стили */
.vk .fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.vk .chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border-radius: 99px; font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em; }
.vk .chip svg { width: 15px; height: 15px; }
.vk .chip--glass { color: #fff; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.vk .chip--light { color: var(--ink); background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 6px 16px -10px rgba(0, 0, 0, 0.3); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.vk .btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border: 0; border-radius: 99px; font: 700 15px/1 var(--font); letter-spacing: -0.01em; cursor: pointer; white-space: nowrap; }
.vk .btn2--ink { color: #fff; background: #111113; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 6px 14px -8px rgba(0, 0, 0, 0.45); }
.vk .btn2--white { color: #111113; background: #fff; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.5); }
.vk .btn2--glass { color: #fff; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.vk .btn2--block { width: 100%; }
.vk .round { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 0; }
.vk .round svg { width: 18px; height: 18px; }
.vk .round--glass { color: #fff; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.vk .round--light { color: var(--ink); background: #fff; box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.25); }
.vk .round--ink { color: #fff; background: #111113; }
.vk .strike { text-decoration: line-through; text-decoration-thickness: 1.5px; opacity: 0.5; font-weight: 600; }
.vk .h-xl { font-family: var(--serif); font-weight: 700; letter-spacing: -0.045em; line-height: 1.02; }
.vk .offer { position: relative; isolation: isolate; overflow: hidden; border-radius: 30px; min-height: 440px; padding: 20px; display: flex; flex-direction: column; color: #fff; background: #050506; }
.vk .offer > *:not(.fx) { position: relative; z-index: 1; }
.vk .offer__title { margin: auto 0 10px; font-size: 40px; }
.vk .offer__text { margin: 0 0 20px; max-width: 290px; font-size: 15px; line-height: 1.45; opacity: 0.82; }
.vk .offer__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vk .offer__price { font-size: 28px; font-weight: 800; letter-spacing: -0.04em; }
.vk .offer__price small { margin-left: 6px; font-size: 15px; }
.vk .timer { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 99px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vk .timer i { width: 6px; height: 6px; border-radius: 50%; background: #34d27b; box-shadow: 0 0 0 4px rgba(52, 210, 123, 0.22); }
.vk .offer--light { color: var(--ink); background: #f6f1f5; min-height: 520px; }
.vk .offer--light .offer__title { margin: 14px 0 8px; font-size: 34px; }
.vk .offer--light .offer__text { opacity: 0.7; margin-bottom: 0; }
.vk .phone { position: relative; width: 250px; border-radius: 44px; padding: 9px; background: linear-gradient(145deg, #3a3a3e, #0d0d0f 40%, #1b1b1e); box-shadow: 0 40px 70px -30px rgba(10, 20, 60, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08) inset; }
.vk .phone__scr { position: relative; overflow: hidden; height: 100%; border-radius: 36px; background: #000; color: #f5f5f7; padding: 46px 14px 14px; font-size: 12.5px; }
.vk .phone__bar { position: absolute; left: 22px; right: 18px; top: 14px; display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; }
.vk .phone__island { position: absolute; left: 50%; top: 11px; width: 78px; height: 22px; margin-left: -39px; border-radius: 99px; background: #000; box-shadow: 0 0 0 1px #111; }
.vk .tgh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.vk .tgh__pill { display: grid; justify-items: center; padding: 6px 14px; border-radius: 99px; background: #1c1c1f; line-height: 1.2; }
.vk .tgh__pill b { font-size: 12.5px; }
.vk .tgh__pill span { font-size: 10px; color: #8e8e93; display: inline-flex; gap: 4px; align-items: center; }
.vk .tgh__pill span i { width: 7px; height: 7px; border-radius: 50%; background: #34d27b; }
.vk .tgh__btn { width: 30px; height: 30px; border-radius: 50%; background: #1c1c1f; display: grid; place-items: center; }
.vk .tgh__btn svg { width: 15px; height: 15px; }
.vk .okpill { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(52, 210, 123, 0.12); box-shadow: inset 0 0 0 1px rgba(52, 210, 123, 0.18); color: #d8f5e5; margin-bottom: 10px; line-height: 1.35; }
.vk .okpill b { color: #5be39a; }
.vk .okpill i { flex: none; width: 28px; height: 28px; border-radius: 8px; background: #fff; display: grid; place-items: center; }
.vk .okpill i svg { width: 16px; height: 16px; }
.vk .bub { max-width: 82%; padding: 9px 12px; border-radius: 16px; line-height: 1.38; margin-bottom: 8px; }
.vk .bub--me { margin-left: auto; background: #1c1c1f; border-bottom-right-radius: 6px; }
.vk .bub--bot { color: #e9e9ee; padding-left: 0; padding-right: 0; }
.vk .qcard { margin-top: 8px; padding: 10px 12px; border-radius: 16px; background: #1c1c1f; }
.vk .qcard__top { display: flex; align-items: center; justify-content: space-between; color: #8e8e93; font-size: 11px; margin-bottom: 6px; }
.vk .qcard b { display: block; font-size: 12.5px; margin-bottom: 8px; }
.vk .qcard__opts { display: flex; gap: 6px; flex-wrap: wrap; }
.vk .qcard__opts span { padding: 6px 10px; border-radius: 99px; background: #2a2a2e; font-size: 11px; }
.vk .offer--light .phone { position: absolute; right: -36px; bottom: -150px; height: 470px; transform: rotate(-8deg); }
.vk .svc2 { border-radius: 30px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -30px rgba(0, 0, 0, 0.35); }
.vk .svc2__stage { position: relative; isolation: isolate; overflow: hidden; height: 300px; display: flex; justify-content: center; }
.vk .svc2__stage .phone { margin-top: 34px; height: 420px; width: 236px; }
.vk .svc2__body { padding: 18px 20px 20px; }
.vk .svc2__body h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 24px; letter-spacing: -0.04em; }
.vk .svc2__body p { margin: 0 0 16px; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.vk .svc2__row { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--line); }
.vk .svc2__row small { display: block; color: var(--muted); font-size: 12px; }
.vk .svc2__row b { font-size: 20px; letter-spacing: -0.03em; }
.vk .tray { position: relative; isolation: isolate; overflow: hidden; border-radius: 30px; min-height: 470px; padding: 22px 20px 20px; color: #fff; background: #060607; display: flex; flex-direction: column; }
.vk .tray > *:not(.fx) { position: relative; z-index: 1; }
.vk .tray h3 { margin: 12px 0 6px; font-size: 30px; }
.vk .tray p { margin: 0; opacity: 0.72; font-size: 14.5px; line-height: 1.45; max-width: 280px; }
.vk .tray__fan { position: relative; height: 230px; margin: 22px -20px 0; }
.vk .tray__fan .mini { position: absolute; top: 0; width: 132px; height: 220px; border-radius: 22px; padding: 12px; background: linear-gradient(160deg, #1d1d21, #0b0b0d); box-shadow: 0 30px 50px -24px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.08); font-size: 11px; }
.vk .tray__fan .mini:nth-child(1) { left: 22px; transform: rotate(-10deg) translateY(18px); }
.vk .tray__fan .mini:nth-child(2) { left: 50%; margin-left: -66px; z-index: 2; }
.vk .tray__fan .mini:nth-child(3) { right: 22px; transform: rotate(10deg) translateY(18px); }
.vk .tray__fan .mini b { display: block; font-size: 12.5px; margin-bottom: 8px; }
.vk .mini__row { display: flex; justify-content: space-between; align-items: center; padding: 7px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); margin-bottom: 6px; }
.vk .mini__row em { font-style: normal; color: #5be39a; font-weight: 700; }
.vk .mini__big { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; margin: 4px 0 2px; }
.vk .seg { display: flex; gap: 8px; margin-top: auto; }
.vk .seg span { flex: 1; height: 44px; border-radius: 99px; display: grid; place-items: center; font-weight: 700; font-size: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.vk .seg span.on { background: #fff; color: #111113; box-shadow: none; }
.vk .rail { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
.vk .rail::-webkit-scrollbar { display: none; }
.vk .rail > * { scroll-snap-align: start; flex: none; }
.vk .rail-nav { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.vk .rail-nav .count { margin-right: auto; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vk .why { position: relative; isolation: isolate; overflow: hidden; width: 280px; height: 380px; border-radius: 28px; padding: 16px; color: #fff; display: flex; flex-direction: column; background: #111; }
.vk .why > *:not(.fx) { position: relative; z-index: 1; }
.vk .why__top { display: flex; justify-content: space-between; align-items: center; }
.vk .why__title { margin-top: auto; font-size: 30px; }
.vk .why__title small { display: block; margin-top: 6px; font-family: var(--font); font-size: 14px; font-weight: 500; letter-spacing: 0; opacity: 0.82; line-height: 1.4; }
.vk .why--light { color: var(--ink); }
.vk .why__widget { margin-top: 18px; }
.vk .scr { width: 290px; height: 400px; border-radius: 28px; padding: 18px; background: radial-gradient(120% 70% at 50% 0%, #1b1d22, #070708 70%); color: #f5f5f7; display: flex; flex-direction: column; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.vk .scr__head { margin-bottom: auto; }
.vk .scr__head b { display: block; font-family: var(--serif); font-size: 22px; letter-spacing: -0.035em; line-height: 1.1; }
.vk .scr__head span { display: block; margin-top: 6px; font-size: 13.5px; color: #8e8e93; line-height: 1.4; }
.vk .grid4 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 6px; }
.vk .tile { position: relative; overflow: hidden; border-radius: 14px; padding: 10px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); font-size: 11.5px; color: #a1a1a6; min-height: 50px; }
.vk .tile b { display: block; margin-top: 3px; color: #fff; font-size: 17px; letter-spacing: -0.02em; }
.vk .tile b small { font-size: 11px; font-weight: 700; }
.vk .tile--hero { grid-row: span 2; color: #fff; background: radial-gradient(120% 90% at 30% 0%, #5fa8ff, #1f6bff 55%, #0b46e0); box-shadow: 0 16px 30px -18px rgba(31, 107, 255, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.vk .tile--hero b { font-size: 28px; margin-top: auto; }
.vk .tile--hero { display: flex; flex-direction: column; justify-content: space-between; }
.vk .tile--hero .bar { height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.3); overflow: hidden; margin-top: 10px; }
.vk .tile--hero .bar i { display: block; height: 100%; width: 92%; background: #fff; border-radius: inherit; }
.vk .tile--hero::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); background-size: 140px; opacity: 0.25; mix-blend-mode: overlay; }
.vk .tile em { font-style: normal; color: #5be39a; font-size: 11px; font-weight: 700; margin-left: 4px; }
.vk .tile--ok { background: linear-gradient(90deg, rgba(52, 210, 123, 0.16), rgba(255, 255, 255, 0.05)); }
.vk .insight { display: flex; gap: 10px; margin-top: 8px; padding: 11px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); font-size: 12px; line-height: 1.4; color: #a1a1a6; }
.vk .insight svg { flex: none; width: 16px; height: 16px; color: #6aa8ff; margin-top: 1px; }
.vk .insight b { color: #fff; }
.vk .drow { display: grid; grid-template-columns: 24px 1fr 64px auto; gap: 8px; align-items: center; padding: 11px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); margin-top: 6px; font-size: 12.5px; }
.vk .drow svg.ic { width: 18px; height: 18px; color: #a1a1a6; }
.vk .drow b { font-size: 14px; font-variant-numeric: tabular-nums; }
.vk .drow b small { font-size: 10.5px; color: #8e8e93; font-weight: 600; }
.vk .spark { width: 64px; height: 20px; }
.vk .orb { position: relative; width: 170px; height: 170px; margin: 4px auto 0; border-radius: 50%; overflow: hidden; -webkit-mask: radial-gradient(circle, #000 62%, transparent 70%); mask: radial-gradient(circle, #000 62%, transparent 70%); }
.vk .orb i { position: absolute; bottom: 0; width: 6%; border-radius: 99px; background: linear-gradient(0deg, rgba(91, 227, 154, 0.2), #5be39a 40%, #9ee7ff 75%, rgba(158, 231, 255, 0.2)); animation: vk-wave 1.6s ease-in-out infinite; filter: blur(0.4px); }
@keyframes vk-wave { 0%, 100% { height: 30%; top: 35%; } 50% { height: 80%; top: 10%; } }
.vk .orb-pills { display: flex; justify-content: center; gap: 6px; margin-top: -18px; position: relative; }
.vk .orb-pills span { height: 34px; padding: 0 12px; border-radius: 99px; display: inline-flex; align-items: center; gap: 6px; background: rgba(30, 30, 34, 0.9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); font-size: 12px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.vk .orb-pills svg { width: 15px; height: 15px; }
.vk .plan { border-radius: 30px; overflow: hidden; background: #f5f5f7; }
.vk .plan__stage { position: relative; height: 260px; display: grid; place-items: center; perspective: 900px; }
.vk .site3d { width: 230px; height: 150px; border-radius: 16px; overflow: hidden; position: relative; isolation: isolate; transform: rotateX(18deg) rotateY(-22deg) rotateZ(6deg); box-shadow: -30px 40px 60px -30px rgba(10, 20, 60, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.vk .site3d__bar { position: relative; z-index: 1; display: flex; gap: 4px; padding: 9px 10px; background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.vk .site3d__bar i { width: 6px; height: 6px; border-radius: 50%; background: rgba(0, 0, 0, 0.25); }
.vk .site3d__body { position: relative; z-index: 1; padding: 14px; color: #fff; }
.vk .site3d__body b { display: block; font-family: var(--serif); font-size: 17px; letter-spacing: -0.03em; line-height: 1.05; }
.vk .site3d__body span { display: inline-block; margin-top: 10px; padding: 5px 10px; border-radius: 99px; background: #fff; color: #111; font-size: 9.5px; font-weight: 800; }
.vk .plan__body { padding: 0 20px 20px; }
.vk .plan__body h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 26px; letter-spacing: -0.04em; }
.vk .plan__body p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.vk .cmp { border-radius: 30px; background: #f5f5f7; padding: 8px; }
.vk .cmp__tabs { display: flex; gap: 4px; padding: 4px; border-radius: 99px; background: #e9e9ee; margin-bottom: 8px; }
.vk .cmp__tabs span { flex: 1; height: 38px; border-radius: 99px; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: var(--muted); }
.vk .cmp__tabs span.on { background: #fff; color: var(--ink); box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.3); }
.vk .cmp__tabs span em { font-style: normal; margin-left: 6px; font-size: 11px; color: var(--ok); }
.vk .cmp__head { padding: 16px 14px 14px; border-radius: 24px; background: #fff; }
.vk .cmp__head h3 { margin: 0; font-family: var(--serif); font-size: 22px; letter-spacing: -0.035em; }
.vk .cmp__price { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 14px; }
.vk .cmp__price b { font-size: 34px; letter-spacing: -0.045em; }
.vk .cmp__price span { color: var(--muted); font-size: 14px; }
.vk .cmp__list { margin-top: 8px; border-radius: 24px; background: #fff; padding: 6px 14px; }
.vk .cmp__list > div { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.vk .cmp__list > div:last-child { border-bottom: 0; }
.vk .cmp__list svg { width: 18px; height: 18px; color: var(--ink); }
.vk .cmp__list em { font-style: normal; font-weight: 700; color: var(--ink); text-align: right; font-size: 13.5px; }
.vk .cmp__list .t-small { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }
.vk .memb { position: relative; isolation: isolate; overflow: hidden; border-radius: 30px; min-height: 520px; padding: 22px 20px 20px; text-align: center; color: #fff; display: flex; flex-direction: column; align-items: center; background: #0a1030; }
.vk .memb > *:not(.fx) { position: relative; z-index: 1; }
.vk .memb__eyebrow { font-size: 13px; font-weight: 700; opacity: 0.8; }
.vk .memb h3 { margin: 10px 0 0; font-size: 34px; max-width: 300px; }
.vk .memb__mid { margin: auto 0 18px; }
.vk .memb__card { width: 100%; padding: 16px; border-radius: 22px; text-align: left; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.vk .memb__card .row { display: flex; justify-content: space-between; align-items: baseline; }
.vk .memb__card b { font-size: 26px; letter-spacing: -0.04em; }
.vk .memb__card p { margin: 6px 0 14px; font-size: 13.5px; opacity: 0.85; line-height: 1.4; }
.vk .mon { border-radius: 28px; padding: 16px; background: radial-gradient(120% 70% at 50% 0%, #1b1d22, #070708 70%); color: #f5f5f7; }
.vk .mon__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.vk .mon__top b { font-family: var(--serif); font-size: 18px; letter-spacing: -0.03em; }
.vk .mon__top span { font-size: 12px; color: #8e8e93; }
.vk .stack { position: relative; height: 210px; }
.vk .note { position: absolute; left: 0; right: 0; display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 20px; background: rgba(255, 255, 255, 0.78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 14px 30px -18px rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); font-size: 13px; line-height: 1.3; }
.vk .note b { display: block; font-size: 13.5px; }
.vk .note span { color: var(--muted); }
.vk .note time { margin-left: auto; align-self: flex-start; color: var(--muted); font-size: 11.5px; }
.vk .note i { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.vk .note i svg { width: 18px; height: 18px; }
.vk .note:nth-child(1) { top: 0; z-index: 3; }
.vk .note:nth-child(2) { top: 72px; z-index: 2; transform: scale(0.96); opacity: 0.92; }
.vk .note:nth-child(3) { top: 136px; z-index: 1; transform: scale(0.92); opacity: 0.8; }
.vk .stage-light { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; padding: 22px 16px; }
.vk .stage-light > *:not(.fx) { position: relative; z-index: 1; }
.vk .spills { display: flex; flex-wrap: wrap; gap: 8px; }
.vk .spill { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px 0 8px; border-radius: 99px; background: #111113; color: #fff; font-size: 13px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.vk .spill i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #26262a; }
.vk .spill i svg { width: 18px; height: 18px; }
.vk .spill b { display: block; font-size: 13.5px; }
.vk .spill span { display: block; font-size: 11px; color: #8e8e93; }
.vk .spill--on i { background: #1f6bff; box-shadow: 0 0 0 4px rgba(31, 107, 255, 0.22); }
.vk .spill--ok i { background: #1a9a52; }
.vk .ref { position: relative; isolation: isolate; overflow: hidden; border-radius: 30px; min-height: 430px; padding: 22px 20px; color: #fff; display: flex; flex-direction: column; background: #050506; }
.vk .ref > *:not(.fx) { position: relative; z-index: 1; }
.vk .ref__amount { margin-top: 14px; font-size: 76px; letter-spacing: -0.06em; line-height: 0.9; }
.vk .ref p { margin: 10px 0 0; opacity: 0.78; max-width: 260px; font-size: 15px; line-height: 1.45; }
.vk .ref__float { margin-top: auto; display: grid; gap: 8px; }
.vk .ref__float .glassnote { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: 13px; }
.vk .glassnote i { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #111; font-style: normal; font-weight: 800; font-size: 13px; }
.vk .glassnote b { display: block; }
.vk .glassnote span { opacity: 0.75; font-size: 12px; }
.vk .glassnote em { margin-left: auto; font-style: normal; font-weight: 800; color: #7dffb4; }
.vk .glassnote:nth-child(2) { margin-left: 26px; opacity: 0.85; }
.vk .offer > .chip, .vk .memb > .chip, .vk .why .chip { align-self: flex-start; }
.vk .offer--light { min-height: 560px; }
.vk .offer--light .phone { bottom: -235px; right: -40px; }
.vk .tgh__pill b { white-space: nowrap; }
.vk .tgh__pill { max-width: 150px; }
.vk .spill { flex-direction: row; white-space: nowrap; }
.vk .spill > span { display: block; }
.vk .svc3 { border-radius: 30px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -30px rgba(0, 0, 0, 0.35); }
.vk .svc3__stage { position: relative; isolation: isolate; overflow: hidden; height: 236px; padding: 16px; background: #050508; color: #fff; }
.vk .svc3__stage > *:not(.fx) { position: relative; z-index: 1; }
.vk .svc3__stage .tray__fan { position: absolute; left: 0; right: 0; top: 64px; height: 230px; margin: 0; }
.vk .svc3 .svc2__body { padding-top: 16px; }
.vk .scr2 { width: 290px; height: 400px; border-radius: 28px; padding: 16px; background: radial-gradient(120% 70% at 50% 0%, #1b1d22, #070708 70%); color: #f5f5f7; display: flex; flex-direction: column; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); overflow: hidden; }
.vk .scr2__ui { transform: scale(0.86); transform-origin: 50% 0; margin-bottom: -30px; }
.vk .scr2__title { margin-top: auto; }
.vk .scr2__title b { display: block; font-family: var(--serif); font-size: 32px; font-weight: 700; letter-spacing: -0.045em; line-height: 1.02; }
.vk .scr2__title span { display: block; margin-top: 8px; font-size: 14px; color: #a1a1a6; line-height: 1.4; }
.vk .wc { position: relative; overflow: hidden; width: 286px; height: 400px; border-radius: 28px; padding: 18px; display: flex; flex-direction: column; isolation: isolate; }
.vk .wc__h b { display: block; font-family: var(--serif); font-size: 30px; font-weight: 700; letter-spacing: -0.045em; line-height: 1.02; }
.vk .wc__h span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.4; opacity: 0.66; }
.vk .wc__art { position: relative; margin-top: auto; }
.vk .wc--blue { background: radial-gradient(90% 70% at 70% 100%, #cfe0ff, #eef3ff 55%, #f7f8fc); }
.vk .wc--night { background: #0a0b10; color: #fff; }
.vk .wc--pearl { background: linear-gradient(160deg, #f8f4ff, #eef6ff 50%, #fdf1f7); }
.vk .wc--mint { background: radial-gradient(90% 70% at 20% 100%, #d6f5e4, #f1faf5 60%, #f8faf9); }
.vk .w-site { position: relative; height: 170px; }
.vk .w-site__win { position: absolute; left: 0; right: 24px; bottom: 0; height: 150px; border-radius: 16px; background: #fff; box-shadow: 0 24px 40px -24px rgba(20, 50, 120, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.05); overflow: hidden; }
.vk .w-site__bar { display: flex; gap: 4px; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.vk .w-site__bar i { width: 6px; height: 6px; border-radius: 50%; background: #e2e2e8; }
.vk .w-site__body { padding: 12px; }
.vk .w-site__body s { display: block; height: 8px; width: 70%; border-radius: 4px; background: #111; text-decoration: none; }
.vk .w-site__body s + s { width: 46%; margin-top: 7px; background: #d9dbe3; }
.vk .w-site__body u { display: block; width: 74px; height: 22px; margin-top: 12px; border-radius: 99px; background: #1f6bff; }
.vk .w-site__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 12px; }
.vk .w-site__grid em { height: 30px; border-radius: 8px; background: #f1f2f6; }
.vk .tag { position: absolute; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 99px; font-size: 13px; font-weight: 800; letter-spacing: -0.02em; box-shadow: 0 12px 24px -14px rgba(0, 0, 0, 0.4); }
.vk .tag--old { right: 0; top: 0; background: #fff; color: var(--muted); }
.vk .tag--old span { text-decoration: line-through; }
.vk .tag--new { right: 8px; top: 44px; background: #111113; color: #fff; font-size: 16px; height: 40px; padding: 0 16px; }
.vk .w-radar { position: relative; height: 200px; display: grid; place-items: center; }
.vk .w-radar > i { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12); transform: translate(-50%, -50%); }
.vk .w-radar > i:nth-child(1) { width: 70px; height: 70px; background: radial-gradient(circle, rgba(91, 227, 154, 0.35), transparent 70%); border-color: rgba(91, 227, 154, 0.5); }
.vk .w-radar > i:nth-child(2) { width: 140px; height: 140px; }
.vk .w-radar > i:nth-child(3) { width: 210px; height: 210px; }
.vk .w-radar__sweep { position: absolute; left: 50%; top: 50%; width: 210px; height: 210px; margin: -105px 0 0 -105px; border-radius: 50%; background: conic-gradient(from 0deg, rgba(91, 227, 154, 0.28), transparent 25%); animation: vk-spin 5s linear infinite; }
.vk .w-radar__dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #5be39a; box-shadow: 0 0 0 4px rgba(91, 227, 154, 0.2); }
.vk .w-radar .spill { position: relative; z-index: 2; height: 44px; }
@keyframes vk-spin { to { transform: rotate(360deg); } }
.vk .w-list { display: grid; gap: 6px; }
.vk .w-list div { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 8px 20px -14px rgba(60, 40, 120, 0.4); font-size: 13.5px; font-weight: 600; }
.vk .w-list i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #111113; color: #fff; }
.vk .w-list i svg { width: 13px; height: 13px; }
.vk .w-list i.wait { background: #e8e8ef; color: var(--muted); }
.vk .w-list em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--muted); font-weight: 600; }
.vk .w-voice { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 6px; border-radius: 99px; background: #111113; color: #fff; font-size: 12.5px; font-weight: 700; margin-bottom: 8px; }
.vk .w-voice i { width: 28px; height: 28px; border-radius: 50%; background: #1f6bff; display: grid; place-items: center; }
.vk .w-voice i svg { width: 15px; height: 15px; }
.vk .w-voice b { display: inline-flex; gap: 2px; align-items: center; height: 16px; }
.vk .w-voice b u { width: 2px; border-radius: 2px; background: #fff; animation: vk-vb 1s ease-in-out infinite; }
@keyframes vk-vb { 0%, 100% { height: 5px; } 50% { height: 15px; } }
.vk .w-chat { display: grid; gap: 8px; }
.vk .w-chat__row { display: flex; gap: 8px; align-items: flex-end; }
.vk .w-chat__row.me { flex-direction: row-reverse; }
.vk .w-chat__ava { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(140deg, #1a9a52, #0f6b39); }
.vk .w-chat__row.me .w-chat__ava { background: #111113; }
.vk .w-chat__b { max-width: 190px; padding: 9px 12px; border-radius: 16px; background: #fff; font-size: 13px; line-height: 1.35; box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.3); }
.vk .w-chat__row.me .w-chat__b { background: #111113; color: #fff; }
.vk .w-chat__typing { display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.3); }
.vk .w-chat__typing i { width: 6px; height: 6px; border-radius: 50%; background: #a1a1a6; animation: vk-dots 1.2s infinite; }
.vk .w-chat__typing i:nth-child(2) { animation-delay: .2s; }
.vk .w-chat__typing i:nth-child(3) { animation-delay: .4s; }
@keyframes vk-dots { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.vk .pro3 { position: relative; border-radius: 30px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line); padding: 16px 16px 18px; text-align: center; }
.vk .pro3__bg { position: absolute; left: 0; right: 0; top: 0; height: 420px; z-index: 0; -webkit-mask: linear-gradient(#000 35%, transparent 100%); mask: linear-gradient(#000 35%, transparent 100%); }
.vk .pro3 > *:not(.pro3__bg) { position: relative; z-index: 1; }
.vk .pro3__bar { display: flex; justify-content: space-between; align-items: center; }
.vk .wreath { display: inline-flex; align-items: center; gap: 6px; margin-top: 26px; }
.vk .wreath svg { width: 34px; height: 70px; }
.vk .wreath svg.r { transform: scaleX(-1); }
.vk .wreath b { display: block; font-family: var(--serif); font-size: 40px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.vk .wreath span { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 600; line-height: 1.25; opacity: 0.7; }
.vk .pro3 h3 { margin: 14px 0 6px; font-family: var(--serif); font-size: 36px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.vk .pro3 h3 em { font-style: normal; display: inline-block; padding: 4px 10px 5px; margin-left: 6px; border-radius: 11px; background: #111113; color: #fff; font-size: 22px; letter-spacing: -0.01em; vertical-align: 6px; }
.vk .pro3__lead { margin: 0 auto; max-width: 280px; font-size: 14.5px; line-height: 1.45; opacity: 0.72; }
.vk .pro3 .cmp__list { margin-top: 22px; text-align: left; background: #f5f5f7; }
.vk .pro3--dark .pro3__top { color: #fff; }
.vk .pro3--dark .pro3__top .pro3__lead { opacity: 0.8; }
.vk .pro3--dark .pro3__top h3 em { background: #fff; color: #111; }
.vk .ref3 { position: relative; isolation: isolate; overflow: hidden; border-radius: 30px; padding: 18px 18px 16px; color: #fff; background: #04050d; }
.vk .ref3 > *:not(.fx):not(.ref3__net) { position: relative; z-index: 1; }
.vk .ref3__amount { margin-top: 16px; font-family: var(--serif); font-size: 64px; font-weight: 700; letter-spacing: -0.06em; line-height: 0.9; }
.vk .ref3 p { margin: 8px 0 16px; max-width: 230px; font-size: 14.5px; line-height: 1.4; opacity: 0.78; }
.vk .ref3__row { display: flex; gap: 8px; align-items: center; }
.vk .ref3__row .glassnote { flex: 1; display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: 12.5px; }
.vk .ref3__net { position: absolute; right: -70px; top: -40px; width: 300px; height: 300px; z-index: 0; }
.vk .ref3__net > i { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.1); transform: translate(-50%, -50%); }
.vk .ref3__net > i:nth-child(1) { width: 110px; height: 110px; background: radial-gradient(circle, rgba(120, 110, 255, 0.45), transparent 70%); }
.vk .ref3__net > i:nth-child(2) { width: 200px; height: 200px; }
.vk .ref3__net > i:nth-child(3) { width: 290px; height: 290px; }
.vk .ref3__net .av { position: absolute; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; color: #111; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12); }
.vk .ref3__net .av.on { background: #5be39a; }
.vk .ref3__net .av.dim { opacity: 0.5; }
.vk .scr2__ui { transform: scale(0.8); margin-bottom: -64px; }
.vk .scr2__title b { font-size: 29px; }
.vk .w-radar .spill { z-index: 3; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.vk .ref3__net > i { position: absolute; }
.vk .ref3__net { right: -110px; top: 0; }
.vk .ref3 p { max-width: 205px; }
.vk .timer i { opacity: 1; font-style: normal; }
.vk .timer { gap: 8px; }

/* ===== Встраивание в бота ===== */
.vk .chip svg { width: 15px; height: 15px; }
/* карусель сверху: оффер и партнёрка одной высоты */
.vk .hc { flex: none; width: 88%; height: 392px; min-height: 0; scroll-snap-align: start; border-radius: 30px; padding: 18px; text-align: left; display: flex; flex-direction: column; }
.vk .hc > .chip { align-self: flex-start; }
.vk .hc.offer .offer__title { font-size: 36px; }
.vk .offer__price--x { display: flex; align-items: baseline; gap: 8px; }
.vk .offer__price--x s { font-size: 34px; font-weight: 800; letter-spacing: -0.04em; opacity: 0.5; text-decoration-thickness: 2.5px; }
.vk .offer__price--x b { font-size: 26px; font-weight: 800; letter-spacing: -0.04em; }
.vk .offer__price--x small { font-size: 14px; font-weight: 600; margin-left: -4px; }
.vk .vtimer { align-self: flex-start; margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 99px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }
.vk .vtimer > i { width: 6px; height: 6px; border-radius: 50%; background: #34d27b; box-shadow: 0 0 0 4px rgba(52, 210, 123, 0.22); }
.vk .vtimer [data-timer] b { font-weight: 700; }
.vk .hc.ref3 { background: radial-gradient(90% 80% at 85% 10%, #1a1640, #04050d 70%); }
.vk .hc.ref3 .ref3__amount { font-size: 60px; margin-top: auto; }
.vk .hc.ref3 .ref3__row { margin-top: 4px; }
/* услуга */
.vk button.svc3 { display: block; width: 100%; text-align: left; padding: 0; }
.vk .mini__muted { color: #8e8e93; }
.vk .mini__row--me { background: #1f6bff; }
/* «Почему Фавикон»: ниже по высоте */
.vk .rail { margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; scroll-padding: 0 var(--gutter); }
.vk .scr2--sm { width: 78%; height: 290px; padding: 16px; }
.vk .scr2--sm .scr2__ui { transform: scale(0.76); transform-origin: 0 0; width: 131.6%; margin-bottom: 0; height: 120px; }
.vk .scr2--sm .scr2__title b { font-size: 26px; }
.vk .scr2--sm .scr2__title span { font-size: 13.5px; }
.vk .scr2--sm .orb { width: 130px; height: 130px; margin: 0; }
.vk .scr2--sm .bub { font-size: 13px; }
.vk .drow .ic { display: grid; place-items: center; width: 20px; height: 20px; color: #a1a1a6; }
.vk .drow .ic svg { width: 18px; height: 18px; }
.vk .offer__price--x { white-space: nowrap; gap: 6px; }
.vk .offer__price--x s { font-size: 30px; }
.vk .offer__price--x b { font-size: 24px; }
.vk .hc .offer__row { gap: 8px; }
.vk .hc .offer__row .btn2 { flex: none; height: 44px; padding: 0 16px; font-size: 14.5px; }
/* Pro в боте: темнее — переливы держатся дольше и уходят в белый ниже */
.vk .pro3--bot { margin-top: 4px; }
.vk .pro3--bot .pro3__bg { height: 470px; background: #04050d; -webkit-mask: linear-gradient(#000 64%, transparent 100%); mask: linear-gradient(#000 64%, transparent 100%); }
.vk .pro3--bot .pro3__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(3, 4, 10, 0.55), rgba(3, 4, 10, 0.3) 55%, transparent); }
.vk .pro3--bot .wreath { color: #fff; margin-top: 14px; }
.vk .pro3--bot .cmp__list svg { width: 18px; height: 18px; }
.vk .pro3--bot .cmp__list em svg { width: 18px; height: 18px; }
.vk .ref3--bot { background: radial-gradient(90% 80% at 85% 10%, #1a1640, #04050d 70%); }
.vk .ref3--bot > .chip { align-self: flex-start; display: inline-flex; }
.vk .ref3__net .av svg { width: 16px; height: 16px; }
.vk .ref3__net .av.dim { color: #111; }
/* Управление подпиской: живая карточка статуса */
.vk .subx { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; padding: 16px 18px 18px; color: #fff; background: #04050d; }
.vk .subx > *:not(.fx) { position: relative; z-index: 1; }
.vk .subx__top { display: flex; justify-content: space-between; align-items: center; }
.vk .subx__plan { font-size: 13px; font-weight: 700; opacity: 0.75; }
.vk .subx__dot { width: 7px; height: 7px; border-radius: 50%; background: #34d27b; box-shadow: 0 0 0 4px rgba(52, 210, 123, 0.22); }
.vk .subx__dot.is-warn { background: #ffb27a; box-shadow: 0 0 0 4px rgba(255, 178, 122, 0.22); }
.vk .subx__dot.is-frozen { background: #9fd7ff; box-shadow: 0 0 0 4px rgba(159, 215, 255, 0.25); }
.vk .subx__days { display: flex; align-items: flex-end; gap: 10px; margin-top: 34px; }
.vk .subx__days b { font-family: var(--serif); font-size: 72px; font-weight: 700; letter-spacing: -0.06em; line-height: 0.82; }
.vk .subx__days span { font-size: 14px; line-height: 1.3; opacity: 0.8; padding-bottom: 4px; }
.vk .subx__bar { height: 5px; margin-top: 18px; border-radius: 99px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.vk .subx__bar i { display: block; height: 100%; border-radius: inherit; background: #fff; }
.vk .subx__foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; font-size: 13.5px; }
.vk .subx__foot span { opacity: 0.72; }
.vk .subx__foot b { font-weight: 700; }
/* «Почему Фавикон» = 3D: ниже по высоте, заголовок чуть ниже верха */
.vk .wc--sm { width: 80%; height: 304px; padding: 16px; scroll-snap-align: start; flex: none; }
.vk .wc--sm .wc__h { margin-top: 28px; }
.vk .wc--sm .wc__h b { font-size: 28px; }
.vk .wc--sm .wc__h span { font-size: 13.5px; }
.vk .wc--sm .w-site { height: 136px; }
.vk .wc--sm .w-site__win { height: 120px; }
.vk .wc--sm .w-radar { height: 150px; }
.vk .wc--sm .w-radar > i:nth-child(3) { width: 170px; height: 170px; }
.vk .wc--sm .w-radar__sweep { width: 170px; height: 170px; margin: -85px 0 0 -85px; }
.vk .wc--sm .w-list div { padding: 9px 12px; }
.vk .w-radar__dot--blue { background: #6aa8ff; box-shadow: 0 0 0 4px rgba(106, 168, 255, 0.2); }
.vk .wc .spill i svg, .vk .wc .w-list i svg, .vk .wc .w-voice i svg { width: 14px; height: 14px; }
.vk .wc .spill i svg { width: 18px; height: 18px; }

/* ======================================================================
   Версии композиции: body[data-ver="2"] — всё на виду, body[data-ver="3"] — витрина с панелью
   ====================================================================== */

/* — общие мини-иллюстрации для «Почему Фавикон» — */
.vk .wa { position: relative; flex: none; display: grid; place-items: center; overflow: hidden; }
.vk .wa--price { align-content: center; justify-items: start; gap: 2px; place-items: unset; display: grid; }
.vk .wa--price s { font-size: 12.5px; font-weight: 700; color: var(--muted); text-decoration-thickness: 1.5px; }
.vk .wa--price b { font-family: var(--serif); font-size: 40px; font-weight: 700; letter-spacing: -0.06em; line-height: 0.9; color: #1f4dff; }
.vk .wa--radar > i { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.14); transform: translate(-50%, -50%); }
.vk .wa--radar > i:nth-child(1) { width: 26%; height: 26%; background: radial-gradient(circle, rgba(91, 227, 154, 0.55), transparent 70%); border-color: rgba(91, 227, 154, 0.6); }
.vk .wa--radar > i:nth-child(2) { width: 58%; height: 58%; }
.vk .wa--radar > i:nth-child(3) { width: 92%; height: 92%; }
.vk .wa--radar .w-radar__sweep { width: 92%; height: 92%; margin: 0; left: 4%; top: 4%; }
.vk .wa--radar em { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #5be39a; box-shadow: 0 0 0 3px rgba(91, 227, 154, 0.22); }
.vk .wa--voice .w-voice { margin: 0; height: 34px; padding: 0 12px 0 4px; }
.vk .wa--voice .w-voice i { width: 26px; height: 26px; }
.vk .wa--team { display: flex; align-items: center; }
.vk .wa--team span { width: 32px; height: 32px; margin-left: -9px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; color: #fff; box-shadow: 0 0 0 2.5px #fff; }
.vk .wa--team span:nth-child(1) { margin-left: 0; background: #1a9a52; }
.vk .wa--team span:nth-child(2) { background: #1f6bff; }
.vk .wa--team span:nth-child(3) { background: #111113; }
.vk .wa--team i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #34d27b; box-shadow: 0 0 0 2.5px #fff; }

/* ---------------- V2: всё на виду ---------------- */
.vk.top2 { display: flex; flex-direction: column; gap: 10px; }
.vk .offer--wide { width: 100%; height: auto; min-height: 0; padding: 18px 18px 16px; border-radius: 30px; }
.vk .offer--wide .offer__title { margin: 58px 0 8px; font-size: 34px; }
.vk .offer--wide .offer__text { margin-bottom: 18px; font-size: 14.5px; }
.vk .offer--wide .offer__row .btn2 { height: 46px; }
.vk .offer.offer--wide > .offer__note { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 12.5px; font-weight: 600; opacity: 0.85; }
.vk .offer__note i { width: 7px; height: 7px; border-radius: 50%; background: #34d27b; box-shadow: 0 0 0 4px rgba(52, 210, 123, 0.2); }
.vk .offer__note [data-timer] { font-variant-numeric: tabular-nums; }
.vk .refstrip { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 12px 12px 14px; border: 0; border-radius: 24px; text-align: left; color: #fff; background: radial-gradient(120% 160% at 100% 0%, #241c5c, #05060d 62%); box-shadow: 0 18px 34px -24px rgba(10, 10, 40, 0.8); cursor: pointer; }
.vk .refstrip__net { display: flex; flex: none; }
.vk .refstrip__net span { width: 32px; height: 32px; margin-left: -8px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #0b2a17; background: #8ef0b4; box-shadow: 0 0 0 2.5px #0a0b18; }
.vk .refstrip__net span:first-child { margin-left: 0; }
.vk .refstrip__net span.dim { color: #fff; background: rgba(255, 255, 255, 0.16); }
.vk .refstrip__t { flex: 1; min-width: 0; }
.vk .refstrip__t b { display: block; font-size: 16.5px; font-weight: 800; letter-spacing: -0.03em; }
.vk .refstrip__t small { display: block; margin-top: 2px; font-size: 12.5px; opacity: 0.66; }
.vk .refstrip__go { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #111113; }

.vk .wgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vk .wt { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 186px; padding: 14px; border-radius: 26px; overflow: hidden; }
.vk .wt .wa { height: 74px; }
.vk .wt .wa--radar { width: 96px; height: 96px; margin: -10px 0 -12px -8px; }
.vk .wt__t b { display: block; font-family: var(--serif); font-size: 18px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.08; }
.vk .wt__t > span { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.35; opacity: 0.66; }
.vk .wt--blue, .vk .wl--blue .wa { background: radial-gradient(90% 70% at 70% 100%, #cfe0ff, #eef3ff 55%, #f7f8fc); }
.vk .wt--night, .vk .wl--night .wa { background: #0a0b10; color: #fff; }
.vk .wt--pearl, .vk .wl--pearl .wa { background: linear-gradient(160deg, #f8f4ff, #eef6ff 50%, #fdf1f7); }
.vk .wt--mint, .vk .wl--mint .wa { background: radial-gradient(90% 70% at 20% 100%, #d6f5e4, #f1faf5 60%, #f8faf9); }
.vk .wt .wa { place-items: center start; justify-content: flex-start; }
.vk .wt .wa--team i { left: 68px; top: 47px; }
.vk .nw { white-space: nowrap; }

body[data-ver='2'] .vk .svc3__stage { height: 196px; }
body[data-ver='2'] .vk .svc3__stage .tray__fan { top: 50px; transform: scale(0.88); transform-origin: 50% 0; }
body[data-ver='2'] .vk .pro3--bot .cmp__list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0; background: none; }
body[data-ver='2'] .vk .pro3--bot .cmp__list > div { grid-template-columns: 1fr; gap: 8px; align-content: start; padding: 14px; border: 0; border-radius: 20px; background: #f5f5f7; font-size: 13.5px; font-weight: 600; }
body[data-ver='2'] .vk .pro3--bot .cmp__list > div:first-child { grid-column: 1 / -1; grid-template-columns: 22px 1fr auto; align-items: center; }
body[data-ver='2'] .vk .pro3--bot .cmp__list > div em { text-align: left; font-size: 17px; letter-spacing: -0.02em; }
body[data-ver='2'] .vk .pro3--bot .cmp__list > div:first-child em { text-align: right; font-size: 13.5px; }
body[data-ver='2'] .vk .ref3--bot { min-height: 0; height: 260px; }
body[data-ver='2'] .vk .ref3--bot .ref3__amount { font-size: 54px; }

/* ---------------- V3: витрина с панелью ---------------- */
.vk.top3 { display: flex; flex-direction: column; gap: 10px; }
.vk .hero3 { position: relative; isolation: isolate; overflow: hidden; border-radius: 32px; padding: 18px 10px 10px; color: #fff; background: #030407; }
.vk .hero3 > *:not(.fx) { position: relative; z-index: 1; }
.vk .hero3 > .chip { margin-left: 8px; }
.vk .hero3__title { margin: 64px 8px 8px; font-family: var(--serif); font-size: 40px; font-weight: 700; letter-spacing: -0.055em; line-height: 0.98; }
.vk .hero3__text { margin: 0 8px 18px; max-width: 290px; font-size: 14.5px; line-height: 1.45; opacity: 0.8; }
.vk .hero3__panel { padding: 14px; border-radius: 24px; color: var(--ink); background: rgba(255, 255, 255, 0.95); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.7); }
.vk .hero3__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 2px 12px; }
.vk .hero3__panel .offer__price--x s { opacity: 0.35; }
.vk .hero3__timer { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 99px; background: #f1f2f5; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vk .hero3__timer svg { width: 14px; height: 14px; }
.vk .hero3__panel .btn2 { height: 50px; }
.vk .qa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vk .qa__i { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; padding: 12px; border: 0; border-radius: 22px; text-align: left; color: var(--ink); background: #f3f4f7; cursor: pointer; }
.vk .qa__i i { width: 34px; height: 34px; margin-bottom: 14px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.3); }
.vk .qa__i i svg { width: 17px; height: 17px; }
.vk .qa__i b { font-size: 14.5px; font-weight: 800; letter-spacing: -0.03em; }
.vk .qa__i small { font-size: 11.5px; color: var(--muted); }
.vk .qa__i--dark { color: #fff; background: radial-gradient(120% 120% at 100% 0%, #241c5c, #05060d 70%); }
.vk .qa__i--dark i { background: rgba(255, 255, 255, 0.14); box-shadow: none; }
.vk .qa__i--dark small { color: rgba(255, 255, 255, 0.62); }

.vk .wlist { display: flex; flex-direction: column; gap: 8px; }
.vk .wl { display: flex; align-items: center; gap: 14px; padding: 8px 14px 8px 8px; border-radius: 26px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.vk .wl .wa { width: 82px; height: 82px; border-radius: 20px; }
.vk .wl .wa--price { justify-items: center; }
.vk .wl .wa--price b { font-size: 34px; }
.vk .wl .wa--price s { font-size: 10.5px; }
.vk .wl .wa--voice .w-voice { transform: scale(0.82); }
.vk .wl .wa--team { justify-content: center; }
.vk .wl .wa--team span { width: 26px; height: 26px; margin-left: -7px; font-size: 11px; }
.vk .wl .wa--team span:nth-child(1) { margin-left: 0; }
.vk .wl .wa--team i { right: 10px; top: 24px; }
.vk .wl__t b { display: block; font-family: var(--serif); font-size: 18.5px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; }
.vk .wl__t > span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--muted); }

body[data-ver='3'] .vk .svc3__stage { height: 210px; }
body[data-ver='3'] .vk .svc3__stage .tray__fan { top: 56px; transform: scale(0.92); transform-origin: 50% 0; }
body[data-ver='3'] .vk .svc3 .svc2__body p { margin-bottom: 12px; }
body[data-ver='3'] .vk .pro3--bot .pro3__bg { height: 100%; -webkit-mask: none; mask: none; }
body[data-ver='3'] .vk .pro3--bot .pro3__bg::after { background: linear-gradient(rgba(3, 4, 10, 0.5), rgba(3, 4, 10, 0.2)); }
body[data-ver='3'] .vk .pro3--bot { padding-bottom: 10px; }
body[data-ver='3'] .vk .pro3--bot .cmp__list { margin: 22px -6px 0; background: rgba(255, 255, 255, 0.95); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.7); }
body[data-ver='3'] .vk .ref3--bot { height: 300px; min-height: 0; }

/* кнопка «Пригласить друга» — чёрная, как остальные */
.invite .btn:not(.btn--soft) { background: #111113; color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 6px 14px -8px rgba(0, 0, 0, 0.45); }

/* v12: карусель магазина — приплюснутые горизонтальные карточки почти на всю ширину */
.vk .hc.hc--flat { width: 92%; height: 214px; padding: 16px 16px 16px 18px; border-radius: 28px; justify-content: space-between; }
.vk .hc--flat .hc__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vk .hc--flat .hc__timer { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 99px; color: #fff; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.vk .hc--flat .hc__timer svg { width: 14px; height: 14px; }
.vk .hc.hc--flat.offer .offer__title { margin: auto 0 12px; font-family: var(--serif); font-size: 30px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.vk .hc--flat .offer__row { gap: 10px; }
.vk .hc--flat .offer__row .btn2 { flex: none; height: 44px; padding: 0 18px; }
.vk .hc--flat .offer__price--x { align-items: baseline; }
.vk .hc--flat .offer__price--x s { font-size: 28px; }
.vk .hc--flat .offer__price--x b { font-size: 22px; }
.vk .hc.hc--flat.ref3 { background: #07060c; }
.vk .hc--flat .ref3__line { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: auto; }
.vk .hc--flat .ref3__amount { margin: 0; flex: none; font-size: 40px; }
.vk .hc--flat .ref3__line > span { font-size: 13px; line-height: 1.3; opacity: 0.78; }
.vk .hc--flat .glassnote { display: flex; gap: 10px; align-items: center; margin-top: 12px; padding: 8px 12px 8px 8px; border-radius: 18px; text-align: left; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: 12.5px; }
.vk .hc--flat .glassnote > span { opacity: 1; }
.vk .hc--flat .glassnote > span > span { display: block; opacity: 0.7; font-size: 11.5px; }
.vk .wc--sm > *:not(.fx) { position: relative; z-index: 1; }
.vk .wc--sm > .fx { z-index: 0; }

/* v12: оффер в аккаунте — компактная тёмная карточка с венком */
.vk.subo { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; width: 100%; margin-top: 14px; padding: 16px; border: 0; border-radius: 28px; text-align: left; color: #fff; background: #030407; box-shadow: 0 18px 36px -26px rgba(5, 10, 40, 0.8); cursor: pointer; }
.vk.subo > *:not(.fx) { position: relative; z-index: 1; }
.vk.subo::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(3, 4, 7, 0.45), rgba(3, 4, 7, 0) 70%); pointer-events: none; }
.vk .subo__main { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.vk .subo__title { font-family: var(--serif); font-size: 24px; font-weight: 700; letter-spacing: -0.045em; line-height: 1.02; }
.vk .subo .offer__price--x s { font-size: 24px; }
.vk .subo .offer__price--x b { font-size: 19px; }
.vk .subo__side { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 10px; }
.vk .wreath--sm { margin: 0; gap: 3px; color: #fff; }
.vk .wreath--sm svg { width: 20px; height: 42px; }
.vk .wreath--sm b { font-size: 26px; }
.vk .wreath--sm span { font-size: 10.5px; margin-top: 2px; }
.vk .subo__side .btn2 { height: 40px; padding: 0 16px; font-size: 14px; }
.vk .subo__timer { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 12.5px; font-weight: 600; opacity: 0.85; font-variant-numeric: tabular-nums; }
.vk .subo__timer svg { width: 14px; height: 14px; }

/* v12: шапка экрана сайта — глубже и с живым градиентом */
.site-top.site-top--fx { overflow: hidden; isolation: isolate; min-height: 320px; justify-content: center; padding-bottom: 30px; color: #fff; background: #030308; }
.site-top--fx > .fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -1; }
.site-top--fx::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(3, 3, 8, 0.1), rgba(3, 3, 8, 0.55)); pointer-events: none; }
.site-top--fx h2 { color: #fff; font-size: 34px; }
.site-top--fx .link { color: rgba(255, 255, 255, 0.82); }
.site-top--fx .cutout__back .icon-btn { color: #fff; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* v14: «Фавикон Pro» — Shader Lines расходятся от заголовка; само видео уходит в прозрачность к белому, без подложек */
.pro-bg { position: absolute; left: 0; right: 0; top: 0; height: 620px; z-index: 0; pointer-events: none; }
.pro-bg .fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-mask-image: linear-gradient(#000 0%, #000 34%, rgba(0, 0, 0, 0.55) 60%, transparent 92%); mask-image: linear-gradient(#000 0%, #000 34%, rgba(0, 0, 0, 0.55) 60%, transparent 92%); }
.push:has(.pro-bg) .push__bar, .push:has(.pro-bg) .segments { position: relative; z-index: 2; }
.push:has(.pro-bg) .push__bar h1 { color: #fff; }
.push:has(.pro-bg) .push__bar .icon-btn { color: #fff; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.vk.pro-hero { position: relative; z-index: 1; padding-top: 34px; text-align: center; color: #fff; }
.vk .pro-hero__title { margin: 0; font-family: var(--serif); font-size: 44px; font-weight: 700; letter-spacing: -0.055em; line-height: 1; }
.vk .pro-hero__title em { display: inline-block; margin-left: 6px; padding: 4px 11px 6px; border-radius: 12px; font-style: normal; font-size: 26px; letter-spacing: -0.01em; vertical-align: 7px; color: #111113; background: #fff; }
.vk .pro-hero__lead { max-width: 290px; margin: 12px auto 0; font-size: 15.5px; line-height: 1.45; opacity: 0.86; }
.vk.pro-hero .wreath { margin-top: 26px; }
.vk.pro-hero .cmp__list { margin: 34px 0 0; text-align: left; color: var(--ink); background: #fff; box-shadow: 0 24px 50px -34px rgba(0, 0, 0, 0.45), inset 0 0 0 1px var(--line); }

/* золотые металлические венки и «$0» */
.vk .wreath b { background: linear-gradient(180deg, #fff6d2 0%, #e8c46f 38%, #b98a30 62%, #f3d993 82%, #9a6d24 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vk .wreath span { color: #e9cf8a; opacity: 1; }
.vk.pro-hero .wreath span { color: #f1dca2; }

/* v12: «Полноценный сайт для вас» — 6A, большие карточки этапов */
.vk.st-stack { display: grid; gap: 12px; }
.vk .st-card { border-radius: 30px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.vk .st-card__art { position: relative; height: 200px; overflow: hidden; display: grid; place-items: center; }
.vk .st-card__art--1 { background: radial-gradient(90% 80% at 30% 100%, #dfe7ff, #f4f6fb 70%); }
.vk .st-card__art--2 { background: radial-gradient(90% 80% at 70% 0%, #efe6ff, #f6f5fb 70%); }
.vk .st-card__art--3 { background: radial-gradient(90% 80% at 80% 100%, #dff3ff, #f4f7fa 70%); }
.vk .st-card__art--4 { background: radial-gradient(90% 80% at 20% 0%, #dcf6e8, #f4f8f6 70%); }
.vk .st-card__body { padding: 16px 20px 20px; }
.vk .st-card__body em { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 99px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink); background: #f1f2f5; }
.vk .st-card__body b { display: block; margin-top: 10px; font-family: var(--serif); font-size: 21px; font-weight: 700; letter-spacing: -0.035em; }
.vk .st-card__body p { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.vk .st-mb { position: relative; width: 250px; height: 170px; }
.vk .st-mb span { position: absolute; border-radius: 12px; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.4); }
.vk .st-mb span:nth-child(1) { left: 0; top: 18px; width: 108px; height: 136px; background: linear-gradient(160deg, #2b2b31, #0c0c0e); transform: rotate(-6deg); }
.vk .st-mb span:nth-child(2) { left: 78px; top: 0; width: 100px; height: 80px; background: linear-gradient(135deg, #9fb7ff, #2f5bff); transform: rotate(4deg); }
.vk .st-mb span:nth-child(3) { left: 150px; top: 30px; width: 98px; height: 120px; background: linear-gradient(160deg, #e9edf5, #cfd6e4); transform: rotate(7deg); }
.vk .st-mb span:nth-child(4) { left: 92px; top: 92px; width: 92px; height: 70px; background: #fff; transform: rotate(-3deg); }
.vk .st-mb span:nth-child(4)::before { content: 'Aa'; position: absolute; left: 12px; top: 10px; font-family: var(--serif); font-weight: 700; font-size: 26px; letter-spacing: -0.05em; color: #111; }
.vk .st-ds { display: grid; grid-template-columns: auto auto; gap: 14px; align-items: center; }
.vk .st-ds__type { width: 120px; height: 140px; padding: 14px; border-radius: 18px; background: #fff; box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; justify-content: center; }
.vk .st-ds__type b { font-family: var(--serif); font-size: 52px; font-weight: 700; letter-spacing: -0.06em; line-height: 0.9; }
.vk .st-ds__type span { margin-top: 8px; font-size: 10px; color: var(--muted); font-weight: 600; }
.vk .st-ds__sw { display: grid; grid-template-columns: repeat(2, 44px); gap: 8px; }
.vk .st-ds__sw i { width: 44px; height: 44px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 8px 16px -10px rgba(0, 0, 0, 0.3); }
.vk .st-ds__btn { grid-column: span 2; display: flex; gap: 6px; justify-content: center; }
.vk .st-ds__btn span { height: 26px; padding: 0 12px; border-radius: 99px; display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; }
.vk .st-rs { position: relative; width: 270px; height: 170px; }
.vk .st-browser { position: absolute; left: 0; top: 0; width: 210px; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.35); }
.vk .st-browser__bar { display: flex; gap: 4px; align-items: center; height: 18px; padding: 0 8px; background: #efeff2; }
.vk .st-browser__bar i { width: 5px; height: 5px; border-radius: 50%; background: #cfcfd5; }
.vk .st-browser__hero { height: 66px; padding: 12px; background: linear-gradient(135deg, #f6f6f8, #ebebf0); }
.vk .st-browser__hero b { display: block; width: 72%; height: 8px; border-radius: 4px; background: #1d1d1f; }
.vk .st-browser__hero span { display: block; width: 48%; height: 5px; margin-top: 6px; border-radius: 3px; background: #b1b1b7; }
.vk .st-browser__hero em { display: block; width: 44px; height: 12px; margin-top: 8px; border-radius: 6px; background: #111113; }
.vk .st-browser__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; padding: 8px; }
.vk .st-browser__grid span { height: 26px; border-radius: 5px; background: #ececf0; }
.vk .st-phone { position: absolute; right: 0; bottom: -10px; width: 74px; height: 150px; border-radius: 20px; padding: 4px; background: #0c0c0e; box-shadow: 0 20px 34px -14px rgba(0, 0, 0, 0.45); }
.vk .st-phone__screen { height: 100%; border-radius: 16px; overflow: hidden; background: #fff; padding: 22px 6px 6px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.vk .st-phone__screen span { max-width: 82%; padding: 4px 6px; border-radius: 8px; font-size: 6.5px; font-weight: 600; line-height: 1.3; background: #f1f1f4; color: #111; align-self: flex-start; }
.vk .st-phone__screen span.o { align-self: flex-end; background: #1d1d1f; color: #fff; }
.vk .st-ln { position: relative; width: 250px; }
.vk .st-ln__url { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 99px; background: #fff; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.35); font-size: 13px; font-weight: 700; }
.vk .st-ln__url i { width: 8px; height: 8px; border-radius: 50%; background: #1fb672; box-shadow: 0 0 0 4px rgba(31, 182, 114, 0.18); }
.vk .st-ln__url span { margin-left: auto; font-size: 11px; color: #1fb672; font-weight: 800; }
.vk .st-pop { display: flex; align-items: center; gap: 10px; margin: 12px 0 0 34px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.35); }
.vk .st-pop i { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex: none; font-style: normal; font-weight: 800; color: #fff; background: #111113; }
.vk .st-pop b { display: block; font-size: 12.5px; }
.vk .st-pop span { display: block; color: var(--muted); font-size: 11px; }

/* v12: «Обслуживание» — 7A, живой монитор на тёмном */
.vk.mon7 { position: relative; isolation: isolate; overflow: hidden; border-radius: 30px; padding: 20px 16px 16px; color: #f5f5f7; background: #030407; }
.vk.mon7 > *:not(.fx) { position: relative; z-index: 1; }
.vk.mon7::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(rgba(3, 4, 7, 0.2), rgba(3, 4, 7, 0.65)); pointer-events: none; }
.vk .mon7__top { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.vk .mon7__top b { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.vk .mon7__top b i { width: 8px; height: 8px; border-radius: 50%; background: #34d27b; box-shadow: 0 0 0 4px rgba(52, 210, 123, 0.2); }
.vk .mon7__top span { font-size: 12px; opacity: 0.6; }
.vk .mon7__chart { height: 90px; margin: 14px -4px 6px; }
.vk .mon7__chart svg { width: 100%; height: 100%; overflow: visible; }
.vk .mon7__chart path.l { fill: none; stroke: #8fd8ff; stroke-width: 2.2; stroke-linecap: round; }
.vk .mon7__chart path.f { fill: url(#mon7fill); }
.vk .mon7__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.vk .mon7__grid > div { padding: 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.vk .mon7__ic { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.12); }
.vk .mon7__ic svg { width: 16px; height: 16px; }
.vk .mon7__grid b { display: block; font-size: 14px; letter-spacing: -0.02em; }
.vk .mon7__grid small { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.35; opacity: 0.62; }

/* v12: «Общие правила» — 8A, отдельные мягкие карточки с номерами */
.rl8 { display: grid; gap: 8px; }
.rl8 .acc { border: 0; border-radius: 20px; background: #f5f5f7; overflow: hidden; }
.rl8 .acc__q { justify-content: flex-start; padding: 15px 16px; text-align: left; font-size: 15px; }
.rl8 .acc__q em { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-style: normal; font-size: 12px; color: var(--muted); background: #fff; }
.rl8 .acc__q > span { flex: 1; }
.rl8 .acc__q svg { width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: #fff; }
.rl8 .acc.is-open .acc__q svg { color: #fff; background: var(--ink); }
.rl8 .acc__a p { padding: 0 16px 16px 56px; margin: 0; }

/* v12: шапка партнёрки — 6C, тёмные переливы, уведомление сразу под текстом */
.vk .ref3.ref3--6c { display: flex; flex-direction: column; align-items: flex-start; padding: 18px; background: #07060c; }
.vk .ref3--6c .ref3__amount { margin-top: 26px; font-size: 54px; }
.vk .ref3--6c p { margin-bottom: 14px; max-width: 270px; }
.vk .ref3--6c .ref3__row { align-self: stretch; }
.vk .ref3--6c .glassnote > span { opacity: 1; }
.vk .ref3--6c .glassnote > span > span { display: block; font-size: 11.5px; opacity: 0.7; }

/* v13: три низкие горизонтальные карточки сверху, бесконечная карусель */
.vk .hc.hc--flat { width: 94%; height: 184px; padding: 14px 14px 14px 16px; }
.vk .hc.hc--flat.offer .offer__title, .vk .hc--bot .offer__title { margin: auto 0 10px; font-size: 25px; }
.vk .hc--flat .offer__row .btn2 { height: 40px; padding: 0 16px; font-size: 14px; }
.vk .hc--flat .offer__price--x s { font-size: 24px; }
.vk .hc--flat .offer__price--x b { font-size: 19px; }
.vk .hc.hc--lines { background: #000; }
.vk .hc--lines > .hc__bg { position: absolute; inset: 0; z-index: 0; }
.vk .hc--lines > .hc__bg .fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vk .hc--lines > .hc__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.15) 72%); }
.vk .hc--flat .ref3__amount { font-size: 36px; }
.vk .hc--flat .glassnote { margin-top: 10px; padding: 6px 10px 6px 6px; }
.vk .hc--flat .glassnote i { width: 28px; height: 28px; }
.vk .hc.hc--bot { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: #0a0c1a; }
.vk .hc--bot > :where(:not(.fx)) { position: relative; z-index: 1; }
.vk .hc--bot > .offer__title { max-width: 62%; }
.vk .hc--bot > .hc__shot { position: absolute; right: 18px; top: 18px; width: 116px; padding: 10px; border-radius: 18px; color: #fff; font-size: 10.5px; transform: rotate(7deg); background: linear-gradient(160deg, #1d1d21, #0b0b0d); box-shadow: 0 24px 40px -18px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.vk .hc--bot .hc__shot b { display: block; margin-bottom: 4px; font-size: 11px; }
.vk .hc--bot .hc__shot .mini__big { font-size: 19px; font-weight: 800; letter-spacing: -0.04em; }
.vk .hc--bot .hc__shot .mini__muted { opacity: 0.55; }
.vk .hc--bot .hc__shot .mini__row { display: flex; justify-content: space-between; margin-top: 8px; padding: 6px 8px; border-radius: 9px; background: rgba(255, 255, 255, 0.08); }
.vk .hc--bot .hc__shot .mini__row em { font-style: normal; color: #6fe3a0; font-weight: 700; }
.vk .hc__price small { display: block; font-size: 11.5px; opacity: 0.7; }
.vk .hc__price b { font-size: 18px; font-weight: 800; letter-spacing: -0.03em; }
.vk .hc--bot .offer__title { font-family: var(--serif); font-weight: 700; letter-spacing: -0.05em; line-height: 1; }

/* v13: «Почему Фавикон» — живые тёмные фоны (G4, G3, G7) и чёрная карточка, больше воздуха между карточками */
.vk .rail--why { gap: 16px; }
.vk .wc--dk { color: #fff; background: #07070c; }
.vk .wc--dk .wc__h span { opacity: 0.74; }
.vk .wc--dk::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 5, 10, 0.35), rgba(5, 5, 10, 0) 45%); }
.vk .wc--dk .w-site__win { box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.7); }
.vk .wc--dk .w-chat__b { color: var(--ink); }
.vk .wc--dk .w-chat__row.me .w-chat__b { color: #fff; }
.vk .wc--dk .w-list div { color: var(--ink); background: rgba(255, 255, 255, 0.94); }
.vk .wc--dk .tag--old { color: var(--muted); }

/* v13: картинки этапов — спокойнее и воздушнее */
.vk .st-card__art { height: 196px; }
.vk .st-refs { position: relative; width: 230px; height: 150px; }
.vk .st-refs > span { position: absolute; top: 10px; width: 104px; height: 128px; border-radius: 18px; box-shadow: 0 22px 34px -22px rgba(30, 40, 90, 0.45); }
.vk .st-refs__a { left: 6px; transform: rotate(-9deg); background: linear-gradient(160deg, #c9d6ff, #8ea6ff); }
.vk .st-refs__b { right: 6px; transform: rotate(9deg); background: linear-gradient(160deg, #e7ddff, #b9a4ff); }
.vk .st-refs__c { left: 63px; top: 2px !important; z-index: 1; display: grid; place-items: center; background: #fff; }
.vk .st-refs__c b { font-family: var(--serif); font-size: 40px; font-weight: 700; letter-spacing: -0.06em; }
.vk .st-chip { position: absolute; left: 50%; bottom: -6px; z-index: 2; transform: translateX(-50%); height: 28px; padding: 0 12px; border-radius: 99px; display: inline-flex; align-items: center; white-space: nowrap; font-style: normal; font-size: 12px; font-weight: 700; background: #fff; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.35); }
.vk .st-ds2 { width: 210px; padding: 16px; border-radius: 22px; background: #fff; box-shadow: 0 22px 40px -26px rgba(40, 30, 90, 0.45); display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: center; }
.vk .st-ds2__aa { font-family: var(--serif); font-size: 50px; font-weight: 700; letter-spacing: -0.06em; line-height: 0.9; }
.vk .st-ds2__sw { display: grid; grid-template-columns: repeat(2, 30px); gap: 6px; justify-content: end; }
.vk .st-ds2__sw i { width: 30px; height: 30px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.vk .st-ds2__btns { grid-column: 1 / -1; display: flex; gap: 6px; }
.vk .st-ds2__btns span { flex: 1; height: 30px; border-radius: 99px; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; background: #f1f2f5; }
.vk .st-ds2__btns span:first-child { color: #fff; background: #111113; }
.vk .st-rs { transform: scale(0.88); }
.vk .st-browser { box-shadow: 0 22px 40px -26px rgba(20, 40, 90, 0.45); }
.vk .st-phone { box-shadow: 0 20px 30px -18px rgba(0, 0, 0, 0.4); }
.vk .st-ln { width: 236px; }
.vk .st-ln__url, .vk .st-pop { box-shadow: 0 16px 30px -20px rgba(0, 0, 0, 0.35); }

/* v13: экран сайта — больше воздуха между блоками */
.site-top--fx h2 { margin: 0 0 6px; }
.vk .hc--bot .hc__shot .mini__muted em { font-style: normal; color: #6fe3a0; font-weight: 700; }

/* v14: правило близости в карточках сверху — чип отдельно, заголовок с ценой одной группой */
.vk .hc--flat .hc__foot { margin-top: auto; }
.vk .hc--flat .hc__foot .offer__title { margin: 0 0 12px; }
.vk .hc.hc--flat.offer.hc--solo { width: 100%; }
.vk.acc-offer { margin-top: 16px; }
.vk .hc--flat .ref3__amount { font-size: 30px; }
.vk .hc--flat .ref3__line { gap: 2px; }
.vk .ref3--6c .ref3__amount { font-size: 44px; margin-top: 22px; }
.vk .ref3--6c p { margin: 6px 0 14px; }

/* раздел «Мои Telegram-боты» */
.row.row--empty { cursor: default; }
.row.row--empty .row__title { color: var(--muted); }
.add-bot { width: 100%; margin-top: 10px; gap: 8px; }
.add-bot svg { width: 14px; height: 14px; }

/* v14: больше воздуха в «Обслуживании», без линии над первым правилом */
.vk.mon7 { padding: 22px 18px 18px; }
.vk .mon7__chart { margin: 18px -4px 10px; }
.vk .mon7__grid { gap: 10px; margin-top: 14px; }
.vk .mon7__grid > div { padding: 14px; }
.accordion.rl8 { border-top: 0; gap: 10px; }

/* v14: этапы — настоящие кадры с favikon.store вместо нарисованных схем */
.vk .st-card__art--photo { height: 210px; display: block; background: #0b0b0e; }
.vk .st-card__art--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vk .st-card__body { padding: 18px 20px 22px; }

/* v18 — экран сайта: блок состояния без внешней рамки, только полоски-разделители; больше воздуха */
.push:has(.site-top--fx) .health { margin-top: 30px; padding: 0 2px; border-radius: 0; background: none; box-shadow: none; }
.push:has(.site-top--fx) .health__rows > div { padding: 14px 0; }
.push:has(.site-top--fx) .health__rows > div:last-child { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.push:has(.site-top--fx) .health + .stack { margin-top: 30px !important; }
.push:has(.site-top--fx) .stack + .section { margin-top: 40px; }
.vk .hc.hc--flat.ref3 .ref3__amount { margin: 0; font-size: 32px; }
/* у бота был свой старый .pro-hero (flex + поля) — сбрасываем, чтобы список был стандартной ширины */
.push .vk.pro-hero { display: block; min-height: 0; margin: 0; padding: 34px 0 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.push .vk.pro-hero .cmp__list { width: 100%; }
.vk .st-card__art--photo { height: auto; aspect-ratio: 1.42; }

/* ===== v22 · Чек «Фавикон Pro» (?receipt=1–5) ===== */
.push:has(.rc) .pro-bg { display: none; }
.vk.rc { position: relative; margin: 4px 0 8px; }
.vk .rc__title { margin: 0; color: #fff; font-family: var(--serif); font-size: 44px; font-weight: 700; letter-spacing: -0.055em; line-height: 1; }
.vk .rc__lead { margin: 10px 0 0; max-width: 270px; color: rgba(255, 255, 255, 0.74); font-size: 15px; line-height: 1.4; }
.vk .rc__card, .vk .rc__slab { position: relative; isolation: isolate; overflow: hidden; border-radius: 30px; background: #06070b; }
.vk .rc__card > canvas.fx, .vk .rc__slab > canvas.fx, .vk .rc__bleed > canvas.fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
.vk .rc__card::after, .vk .rc__slab::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0) 55%); pointer-events: none; }

/* бумага чека */
.vk .rc__paper { position: relative; z-index: 2; padding: 20px 20px 22px; color: var(--ink); background: #fff; border-radius: 22px 22px 6px 6px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03), 0 30px 60px -34px rgba(16, 20, 50, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.05); }
.vk .rc__paper::after { content: ''; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px; background: radial-gradient(circle at 7px -2px, transparent 7px, #fff 7.5px) 0 0 / 14px 10px repeat-x; }
.vk .rc__head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.vk .rc__head b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -0.02em; }
.vk .rc__head small { display: block; margin-top: 1px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.vk .rc__logo { width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--ink); -webkit-mask: url('assets/favicon-bird.webp') center / 70% no-repeat; mask: url('assets/favicon-bird.webp') center / 70% no-repeat; }
.vk .rc__rows { padding: 6px 0 4px; }
.vk .rc__row { display: flex; align-items: baseline; gap: 8px; padding: 9px 0; font-size: 14.5px; }
.vk .rc__row span { flex: 0 1 auto; }
.vk .rc__row i { flex: 1; min-width: 12px; border-bottom: 1.5px dotted rgba(0, 0, 0, 0.18); transform: translateY(-3px); }
.vk .rc__row em { flex: none; font-style: normal; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.vk .rc__total { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 14px; border-top: 1.5px dashed rgba(0, 0, 0, 0.16); }
.vk .rc__total small { display: block; color: var(--muted); font-size: 13px; font-weight: 600; }
.vk .rc__total s { display: block; margin-top: 2px; color: var(--faint); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; text-decoration-thickness: 2px; }
.vk .rc__total b { font-family: var(--serif); font-size: 58px; font-weight: 700; letter-spacing: -0.06em; line-height: 0.82; color: var(--ink); }
.vk .rc__note { display: flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.vk .rc__note svg { width: 15px; height: 15px; color: #1f9d55; }
.vk .rc__stamp { position: absolute; right: 14px; top: 10px; width: 78px; height: 78px; color: #2f5bff; opacity: 0.85; transform: rotate(-14deg); mix-blend-mode: multiply; pointer-events: none; }

/* 1 — градиентная карточка с заголовком, чек заходит на её низ */
.vk.rc--v1 .rc__card { height: 300px; padding: 28px 24px; }
.vk.rc--v1 .rc__paper { margin: -96px 10px 0; }

/* 2 — карта за чеком, как в кошельке */
.vk.rc--v2 { padding-top: 6px; }
.vk.rc--v2 .rc__card { height: 260px; padding: 26px 24px; margin: 0 14px; transform: rotate(-4deg); box-shadow: 0 30px 50px -30px rgba(40, 60, 200, 0.7); }
.vk.rc--v2 .rc__chip { position: absolute; right: 24px; top: 30px; width: 40px; height: 30px; border-radius: 7px; background: linear-gradient(135deg, #e9edf5, #9aa3b5 55%, #dfe3ea); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); }
.vk.rc--v2 .rc__mark { display: none; }
.vk.rc--v2 .rc__title { padding-right: 52px; }
.vk.rc--v2 .rc__paper { margin: -110px 4px 0; }

/* 3 — терминал: чек печатается из щели */
.vk.rc--v3 .rc__slab { padding: 28px 24px 70px; border-radius: 30px 30px 26px 26px; }
.vk.rc--v3 .rc__slot { position: absolute; left: 18px; right: 18px; bottom: 22px; height: 14px; border-radius: 99px; background: #050507; box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.18); }
.vk.rc--v3 .rc__print { position: relative; z-index: 1; margin: -36px 28px 0; overflow: hidden; padding-bottom: 12px; }
.vk.rc--v3 .rc__print .rc__paper { border-radius: 0 0 6px 6px; padding-top: 30px; animation: rc-print 1.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s both; box-shadow: 0 24px 40px -30px rgba(16, 20, 50, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.05); }
@keyframes rc-print { from { transform: translateY(-100%); } }

/* 4 — градиент на всю ширину, чек с зубцами сверху и снизу, итог чёрной полосой */
.vk.rc--v4 { padding-top: 18px; }
.vk.rc--v4 .rc__bleed { position: absolute; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: calc(-1 * (var(--top) + 140px)); height: 560px; z-index: 0; -webkit-mask-image: linear-gradient(#000 64%, transparent); mask-image: linear-gradient(#000 64%, transparent); }
.push:has(.rc--v4) .push__bar { position: relative; z-index: 3; }
.vk.rc--v4 .rc__title, .vk.rc--v4 .rc__lead { position: relative; z-index: 1; }
.vk.rc--v4 .rc__paper--band { margin-top: 26px; border-radius: 6px; }
.vk.rc--v4 .rc__paper--band::before { content: ''; position: absolute; left: 0; right: 0; top: -9px; height: 10px; background: radial-gradient(circle at 7px 12px, transparent 7px, #fff 7.5px) 0 0 / 14px 10px repeat-x; }
.vk.rc--v4 .rc__total { margin: 10px -20px 0; padding: 16px 20px; border: 0; color: #fff; background: #111113; }
.vk.rc--v4 .rc__total small { color: rgba(255, 255, 255, 0.6); }
.vk.rc--v4 .rc__total s { color: rgba(255, 255, 255, 0.45); }
.vk.rc--v4 .rc__total b { color: #fff; }
.push:has(.rc--v4) .push__bar h1 { color: #fff; }
.push:has(.rc--v4) .push__bar .icon-btn { color: #fff; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }

/* 5 — тёмная карточка и стопка чеков веером */
.vk.rc--v5 .rc__card { height: 280px; padding: 28px 24px; }
.vk.rc--v5 .rc__stack { position: relative; margin: -92px 14px 0; }
.vk.rc--v5 .rc__ghost { position: absolute; left: 6px; right: 6px; top: 10px; bottom: 30px; z-index: 1; border-radius: 22px; background: #f4f5f9; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 20px 40px -30px rgba(0, 0, 0, 0.4); }
.vk.rc--v5 .rc__ghost--l { transform: rotate(-7deg) translate(-12px, 10px); }
.vk.rc--v5 .rc__ghost--r { transform: rotate(6deg) translate(12px, 4px); background: #eceef4; }

/* ===== v23 · Этапы разработки (?track=1–5), здоровье, рост, праздник ===== */
.vk.trk { margin-top: 18px; }
.vk .trk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.vk .trk-head b { display: block; font-family: var(--serif); font-size: 21px; font-weight: 700; letter-spacing: -0.04em; }
.vk .trk-head span { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.vk .trk-head em { font-style: normal; padding: 6px 11px; border-radius: 99px; background: #f2f2f5; font-size: 13px; font-weight: 700; }
.vk .trk-need { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; margin-top: 14px; padding: 14px 16px; border-radius: 20px; background: #fff7e8; box-shadow: inset 0 0 0 1px #f3d9a4; }
.vk .trk-need b { font-size: 14px; }
.vk .trk-need span { grid-column: 1; color: #6b5323; font-size: 13px; line-height: 1.35; }
.vk .trk-need .btn { grid-row: 1 / 3; grid-column: 2; }
@keyframes trk-spin { to { transform: rotate(360deg); } }

/* 1 — вертикальная линия шагов; кольцо крутится, пока работаем */
.vk .trk1 { position: relative; padding: 4px 16px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.vk .trk1__step { position: relative; display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: start; padding: 13px 0; }
.vk .trk1__step:not(:last-child)::after { content: ''; position: absolute; left: 14px; top: 47px; bottom: -9px; width: 2px; border-radius: 2px; background: #e6e6ea; }
.vk .trk1__step.is-done:not(:last-child)::after { background: #111113; }
.vk .trk1__main, .vk .trk1__when { padding-top: 5px; }
.vk .trk1__dot { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #f0f0f3; color: var(--muted); font-size: 12px; font-weight: 800; }
.vk .trk1__dot svg { width: 15px; height: 15px; }
.vk .trk1__step.is-done .trk1__dot { background: #111113; color: #fff; }
.vk .trk1__step.is-now .trk1__dot, .vk .trk1__step.is-wait .trk1__dot { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px #111113; }
.vk .trk1__step.is-now .trk1__dot::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid transparent; border-top-color: #2f5bff; border-right-color: #2f5bff; animation: trk-spin 1.4s linear infinite; }
.vk .trk1__step.is-wait .trk1__dot { box-shadow: inset 0 0 0 2px #e0a42a; }
.vk .trk1__main b { display: block; font-size: 14.5px; }
.vk .trk1__main small { display: block; margin-top: 1px; color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.vk .trk1__step.is-next .trk1__main b { color: var(--muted); }
.vk .trk1__when { color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.vk .trk1__step.is-now .trk1__when { color: #2f5bff; }
.vk .trk1__step.is-wait .trk1__when { color: #b07a10; }

/* 2 — карточки этапов с фото, листаются */
.vk .trk2 { display: flex; gap: 10px; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.vk .trk2::-webkit-scrollbar { display: none; }
.vk .trk2__card { flex: none; width: 230px; scroll-snap-align: start; overflow: hidden; border-radius: 24px; text-align: left; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 20px 40px -32px rgba(20, 24, 60, 0.4); }
.vk .trk2__art { position: relative; display: grid; place-items: center; height: 150px; background: #f2f2f5; }
.vk .trk2__art img { width: 100%; height: 100%; object-fit: cover; }
.vk .trk2__art i svg { width: 34px; height: 34px; color: var(--muted); }
.vk .trk2__card.is-next .trk2__art img { filter: grayscale(1) blur(6px); opacity: 0.5; }
.vk .trk2__card.is-now .trk2__art::after { content: 'Делаем сейчас'; position: absolute; left: 10px; bottom: 10px; padding: 5px 10px; border-radius: 99px; color: #fff; font-size: 12px; font-weight: 700; background: rgba(17, 17, 19, 0.75); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.vk .trk2__body { display: block; padding: 12px 14px 14px; }
.vk .trk2__body em { display: block; font-style: normal; color: var(--muted); font-size: 12px; font-weight: 600; }
.vk .trk2__card.is-now .trk2__body em { color: #2f5bff; }
.vk .trk2__card.is-wait .trk2__body em { color: #b07a10; }
.vk .trk2__body b { display: block; margin-top: 4px; font-size: 15px; letter-spacing: -0.02em; }
.vk .trk2__body small { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; line-height: 1.35; }

/* 3 — кольцо прогресса и лента событий */
.vk .trk3 { position: relative; width: 180px; height: 180px; margin: 6px auto 0; }
.vk .trk3__ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.vk .trk3__ring circle { fill: none; stroke-width: 9; }
.vk .trk3__ring .bg { stroke: #ececf0; }
.vk .trk3__ring .fg { stroke: #111113; stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease); }
.vk .trk3__mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.vk .trk3__mid b { font-family: var(--serif); font-size: 44px; font-weight: 700; letter-spacing: -0.06em; line-height: 1; }
.vk .trk3__mid span { max-width: 120px; margin-top: 4px; color: var(--muted); font-size: 12.5px; line-height: 1.25; }
.vk .trk3__eta { margin: 10px 0 0; text-align: center; font-weight: 700; font-size: 14px; }
.vk .trk3__feed { margin-top: 18px; padding-left: 4px; }
.vk .trk3__ev { position: relative; display: grid; grid-template-columns: 14px 1fr; gap: 12px; padding-bottom: 16px; }
.vk .trk3__ev::before { content: ''; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: #ececf0; }
.vk .trk3__ev:last-child::before { display: none; }
.vk .trk3__ev > i { width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; background: #111113; box-shadow: 0 0 0 4px #fff; position: relative; z-index: 1; }
.vk .trk3__ev.is-need > i { background: #e0a42a; }
.vk .trk3__ev small { color: var(--muted); font-size: 12px; }
.vk .trk3__ev p { margin: 2px 0 0; font-size: 14px; line-height: 1.4; }
.vk .trk3__ev img { display: block; width: 100%; max-width: 260px; height: 130px; margin-top: 8px; border-radius: 16px; object-fit: cover; }

/* 4 — доска: нужны вы / делаем / дальше / готово */
.vk .trk4__col { margin-top: 12px; }
.vk .trk4__col h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.vk .trk4__col h4 span { padding: 1px 8px; border-radius: 99px; background: #f0f0f3; color: var(--ink); font-size: 12px; }
.vk .trk4__col--you h4 { color: #b07a10; }
.vk .trk4__task { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; margin-top: 6px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.vk .trk4__task.is-wait { background: #fff7e8; box-shadow: inset 0 0 0 1px #f3d9a4; }
.vk .trk4__task.is-done { opacity: 0.6; }
.vk .trk4__ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: #f2f2f5; }
.vk .trk4__ic svg { width: 18px; height: 18px; }
.vk .trk4__task b { display: block; font-size: 14px; }
.vk .trk4__task small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.vk .trk4__spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #e6e6ea; border-top-color: #2f5bff; animation: trk-spin 1s linear infinite; }
.vk .trk4__ok svg { width: 18px; height: 18px; color: #1f9d55; }

/* 5 — сайт собирается на глазах */
.vk .trk5__browser { overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 50px -34px rgba(20, 24, 60, 0.5); }
.vk .trk5__bar { display: flex; align-items: center; gap: 5px; padding: 10px 12px; background: #f4f4f6; }
.vk .trk5__bar i { width: 8px; height: 8px; border-radius: 50%; background: #d5d5da; }
.vk .trk5__bar span { margin-left: 8px; padding: 3px 10px; border-radius: 99px; background: #fff; color: var(--muted); font-size: 11.5px; }
.vk .trk5__view { position: relative; height: 220px; }
.vk .trk5__wire { position: absolute; inset: 0; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.vk .trk5__wire b { width: 60%; height: 16px; border-radius: 6px; background: #ececf0; }
.vk .trk5__wire span { width: 85%; height: 9px; border-radius: 5px; background: #f2f2f5; }
.vk .trk5__wire em { width: 90px; height: 28px; margin-top: 6px; border-radius: 99px; background: #e6e6ea; }
.vk .trk5__wire div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: auto; }
.vk .trk5__wire div i { height: 56px; border-radius: 10px; background: #f2f2f5; }
.vk .trk5__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.8s, filter 0.8s; }
.vk .trk5__browser.is-stage0 .trk5__shot, .vk .trk5__browser.is-stage1 .trk5__shot { opacity: 0; }
.vk .trk5__browser.is-stage2 .trk5__shot { opacity: 0.55; filter: grayscale(0.6) blur(2px); }
.vk .trk5__browser.is-stage3 .trk5__shot { opacity: 0.9; filter: blur(0.5px); }
.vk .trk5__scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 14px; }
.vk .trk5__scale button { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.vk .trk5__scale i { width: 100%; height: 5px; border-radius: 5px; background: #e6e6ea; }
.vk .trk5__scale .is-done i { background: #111113; }
.vk .trk5__scale .is-now i { background: linear-gradient(90deg, #111113 50%, #e6e6ea 50%); background-size: 200% 100%; animation: trk-fill 1.6s ease-in-out infinite alternate; }
.vk .trk5__scale .is-wait i { background: #e0a42a; }
.vk .trk5__scale .is-done span, .vk .trk5__scale .is-now span { color: var(--ink); font-weight: 700; }
@keyframes trk-fill { from { background-position: 100% 0; } to { background-position: 40% 0; } }
.vk .trk5__now { margin: 12px 0 0; text-align: center; font-size: 13.5px; color: var(--muted); }
.vk .trk5__now b { color: var(--ink); }

/* список «Мои сайты»: сайт в разработке */
.row--build .row__prog { display: block; height: 4px; margin-top: 8px; border-radius: 4px; background: #ececf0; overflow: hidden; }
.row--build .row__prog i { display: block; height: 100%; border-radius: 4px; background: #111113; }
.row--build .need-dot { color: #b07a10; font-weight: 700; }
.live--build i { background: #2f5bff !important; box-shadow: 0 0 0 4px rgba(47, 91, 255, 0.16) !important; }
.live--build { color: #2f5bff !important; }
.live--off i { background: #a1a1a6 !important; box-shadow: none !important; }
.live--off { color: var(--muted) !important; }

/* здоровье сайта — всегда зелёное */
.sitehp { margin-top: 18px; padding: 16px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.sitehp__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12.5px; }
.sitehp__bars { display: flex; gap: 3px; height: 34px; margin: 14px 0 6px; }
.sitehp__bars i { flex: 1; border-radius: 3px; background: #ececf0; }
.sitehp__bars i.on { background: #34c759; }
.sitehp__rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 14px; }
.sitehp__rows > div:first-child { border-top: 0; }
.sitehp__rows span { color: var(--muted); }
.site-off { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; padding: 18px; border-radius: 24px; background: #f5f5f7; }
.site-off b { font-size: 17px; }
.site-off span { color: var(--muted); font-size: 14px; line-height: 1.45; }
.site-off .btn { margin-top: 8px; }

/* рост сайта: SEO и таргет — неполная аналитика под замком */
.vk.grow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vk .grow__card { position: relative; display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 14px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.vk .grow__lock { position: absolute; right: 12px; top: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #f2f2f5; }
.vk .grow__lock svg { width: 13px; height: 13px; }
.vk .grow__chart { width: 100%; height: 64px; margin: 18px 0 12px; filter: blur(2.5px); opacity: 0.7; }
.vk .grow__chart--seo { display: flex; align-items: flex-end; gap: 5px; }
.vk .grow__chart--seo i { flex: 1; border-radius: 5px 5px 2px 2px; background: linear-gradient(#5b7cff, #1f3dff); }
.vk .grow__chart--ads svg { width: 100%; height: 100%; }
.vk .grow__chart--ads path { fill: none; stroke: #34c759; stroke-width: 3; }
.vk .grow__card b { font-size: 14.5px; letter-spacing: -0.02em; }
.vk .grow__card small { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.vk .grow__cta { margin-top: 12px; padding: 7px 12px; border-radius: 99px; color: #fff; background: #111113; font-size: 12.5px; font-weight: 700; }

/* подробности этапа */
.step-sheet__n { display: block; font-style: normal; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.step-sheet h3 { margin-top: 6px; }
.step-sheet__img { display: block; width: 100%; height: 190px; margin-top: 14px; border-radius: 20px; object-fit: cover; }

/* праздник после первой оплаты */
.party { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(10, 10, 14, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: party-in 0.35s ease both; }
.party.is-leaving { animation: party-out 0.3s ease forwards; }
@keyframes party-in { from { opacity: 0; } }
@keyframes party-out { to { opacity: 0; } }
.party__confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.party__confetti i { position: absolute; top: -20px; width: 8px; height: 14px; border-radius: 2px; animation: party-fall linear infinite; }
@keyframes party-fall { from { transform: translateY(-20px) rotate(0); } to { transform: translateY(110vh) rotate(620deg); } }
.party__card { position: relative; isolation: isolate; overflow: hidden; width: 100%; max-width: 360px; padding: 28px 22px 18px; border-radius: 32px; color: #fff; text-align: center; background: #06070b; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7); animation: party-pop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes party-pop { from { transform: scale(0.85) translateY(20px); opacity: 0; } }
.party__card > canvas.fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.party__badge { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #111113; box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.12); }
.party__badge svg { width: 30px; height: 30px; }
.party__card h2 { margin: 0; font-family: var(--serif); font-size: 30px; font-weight: 700; letter-spacing: -0.05em; line-height: 1.05; }
.party__card p { margin: 10px 0 0; color: rgba(255, 255, 255, 0.78); font-size: 14.5px; line-height: 1.45; }
.party__steps { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 18px 0; }
.party__steps span { padding: 6px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.7); }
.party__steps span.is-done { background: #fff; color: #111113; }
.party__steps span.is-now { box-shadow: inset 0 0 0 1.5px #fff; color: #fff; }
.party__card .btn { width: 100%; }
.party__later { margin-top: 10px; padding: 8px; color: rgba(255, 255, 255, 0.6); font-size: 14px; font-weight: 600; }
.comeback { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding: 18px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.comeback b { font-family: var(--serif); font-size: 21px; letter-spacing: -0.04em; }
.comeback span { color: var(--muted); font-size: 14px; line-height: 1.45; }
.comeback .btn { margin-top: 8px; }

/* ===== v24 · правки после проверки на телефоне ===== */
/* цены в рублях длиннее долларовых: строка оффера не должна выталкивать кнопку за край */
.vk .hc--flat .offer__row { min-width: 0; align-items: flex-end; }
.vk .hc--flat .offer__price--x { display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: start; column-gap: 0; row-gap: 2px; min-width: 0; }
.vk .hc--flat .offer__price--x s { grid-column: 1 / -1; font-size: 16px; line-height: 1; opacity: 0.55; text-decoration-thickness: 1.5px; }
.vk .hc--flat .offer__price--x b { font-size: 26px; line-height: 1; }
.vk .hc--flat .offer__price--x small { font-size: 13px; margin-left: 4px; }

/* «Мои Telegram-боты»: сразу строка с плюсом — открывает историю-карусель услуги */
.row--addbot { gap: 12px; }
.row--addbot .addbot__plus { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; color: #fff; background: #111113; }
.row--addbot .addbot__plus svg { width: 16px; height: 16px; }
.row--addbot .row__title { font-weight: 700; }
/* периоды: зачёркнутая цена отдельной строкой, ниже «в месяц» или цена за месяц — рублёвые суммы не ломаются */
.period__old s { display: block; margin: 0 0 2px; }

/* Оффер «Полноценный сайт за наш счёт»: старая цена крупно, новая — меньше */
.vk .hc--flat .offer__price--x s { font-size: 30px; line-height: 1; opacity: 0.55; text-decoration-thickness: 2.5px; }
.vk .hc--flat .offer__price--x b { font-size: 19px; line-height: 1.2; }
.vk .hc--flat .offer__price--x small { font-size: 13px; }