/* ============================================================
   Главная страница (лендинг) — Master Clients
   ============================================================ */

body.lp {
    --lp-ink: #1f1b2d;
    --lp-text: #4a4560;
    --lp-muted: #8a85a0;
    --lp-violet: #7c5cbf;
    --lp-violet-soft: #efe9fa;
    --lp-line: #ece8f4;
    font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Armenian", sans-serif;
    color: var(--lp-ink);
    background: #fff;
}

/* шапка и кнопки .lp-btn — общие для всех публичных страниц, в style.css */
html:has(body.lp) { scroll-padding-top: 84px; }

/* ----- Главный экран ----- */
.lp-hero {
    position: relative;
    overflow: hidden;
    padding: 96px 0 110px;
    background:
        radial-gradient(900px 520px at 78% 38%, rgba(124, 92, 191, .10), transparent 70%),
        linear-gradient(180deg, #f7f5fb 0%, #f4f1f9 100%);
}
.lp-eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 14px; font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #3a3550;
    margin-bottom: 26px;
}
.lp-eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: var(--lp-violet); }
.lp-title {
    font-size: clamp(46px, 6.3vw, 70px);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.045em;
    color: var(--lp-ink);
    margin-bottom: 30px;
}
.lp-title em { font-style: normal; color: var(--lp-violet); }
.lp-lead { font-size: clamp(18px, 1.6vw, 23px); line-height: 1.65; color: var(--lp-text); max-width: 620px; margin: 0; }

/* печатающаяся сфера: «Удобная основа для работы салона / студии / …» */
.lp-type {
    display: inline-block;
    color: var(--lp-violet);
    font-weight: 700;
    white-space: nowrap;
    background: linear-gradient(transparent 70%, rgba(124, 92, 191, .16) 70%);
    padding: 0 2px;
    border-radius: 4px;
}
.lp-caret {
    display: inline-block;
    width: 2.5px; height: 1.05em;
    margin-left: 3px;
    vertical-align: -.15em;
    background: var(--lp-violet);
    border-radius: 2px;
    animation: lpCaret 1s steps(1) infinite;
}
@keyframes lpCaret { 50% { opacity: 0; } }
.lp-note { margin-top: 30px; color: var(--lp-muted); font-size: 16px; font-weight: 500; }
.lp-note b { color: var(--lp-ink); font-weight: 700; }

/* ----- Макет приложения ----- */
.lp-stage { position: relative; perspective: 1800px; padding: 40px 10px 50px; }
.lp-blob {
    position: absolute; left: 50%; top: 50%;
    width: 560px; height: 560px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 92, 191, .28) 0%, rgba(124, 92, 191, .10) 45%, transparent 70%);
    filter: blur(6px);
}
.lp-app {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(47, 34, 88, .18), 0 8px 20px rgba(47, 34, 88, .08);
    transform: rotateY(-13deg) rotateX(5deg) rotateZ(-1.5deg);
    transform-origin: 60% 50%;
    transition: transform .6s ease;
}
.lp-stage:hover .lp-app { transform: rotateY(-8deg) rotateX(3deg) rotateZ(-1deg); }
.lp-rail { background: #1f1b2d; display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 22px 0; }
.lp-rail-logo img { width: 36px; height: 36px; border-radius: 10px; display: block; }
.lp-rail i { color: rgba(255, 255, 255, .55); font-size: 18px; }
.lp-rail i.active { color: #fff; background: rgba(255, 255, 255, .12); border-radius: 10px; padding: 7px 9px; }
.lp-app-body { padding: 22px 22px 18px; background: linear-gradient(180deg, #fff, #fbfaff); }
.lp-app-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.lp-app-head small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lp-muted); }
.lp-app-head b { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.lp-chip { border: 1px solid var(--lp-line); border-radius: 10px; padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--lp-text); }
.lp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.lp-stats > div { border: 1px solid var(--lp-line); border-radius: 12px; padding: 10px 12px; background: #fff; }
.lp-stats small { display: block; font-size: 11px; color: var(--lp-muted); font-weight: 500; }
.lp-stats b { font-size: 22px; font-weight: 700; }
.lp-stats b i { font-size: 11px; color: var(--lp-muted); }
.lp-week-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.lp-week-head b { font-size: 14px; font-weight: 700; }
.lp-week-head small { font-size: 11px; color: var(--lp-muted); font-weight: 500; }
.lp-week { display: grid; grid-template-columns: 38px repeat(4, minmax(0, 1fr)); gap: 8px; }
.lp-times { display: flex; flex-direction: column; justify-content: space-between; padding-top: 30px; font-size: 10px; color: var(--lp-muted); height: 13.6rem; }
.lp-day { background: #f8f7fb; border-radius: 12px; padding: 6px; }
.lp-day-head { text-align: center; font-size: 13px; padding: 2px 0 6px; }
.lp-day-head small { color: var(--lp-muted); }
.lp-day-head b { font-weight: 700; }
.lp-day-body { position: relative; height: 11.2rem; }
.lp-slot {
    position: absolute; left: 0; right: 0;
    border-radius: 9px;
    padding: 6px 8px;
    display: flex; flex-direction: column;
    overflow: hidden;
    font-size: 10.5px; line-height: 1.3;
}
.lp-slot b { font-weight: 700; color: #2c2640; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-slot small { color: var(--lp-muted); font-size: 9.5px; }
.lp-slot.tone-a { background: #e6e3ee; }
.lp-slot.tone-b { background: #e5def8; }
.lp-slot.tone-c { background: #fcebd6; }
.lp-slot.tone-c b { color: #8a5a1c; }

.lp-float {
    position: absolute;
    display: flex; align-items: center; gap: 12px;
    background: #fff;
    border-radius: 16px;
    padding: 12px 16px;
    box-shadow: 0 18px 40px rgba(47, 34, 88, .16);
    animation: lpFloat 5s ease-in-out infinite;
    z-index: 2;
}
.lp-float > span { width: 38px; height: 38px; border-radius: 11px; background: var(--lp-violet-soft); color: var(--lp-ink); display: grid; place-items: center; font-size: 18px; }
.lp-float b { display: block; font-size: 14px; font-weight: 700; }
.lp-float small { display: block; font-size: 11.5px; color: var(--lp-muted); }
.lp-float-top { right: -6px; top: 6px; }
.lp-float-bottom { left: -14px; bottom: 16px; animation-delay: -2.5s; }
@keyframes lpFloat { 50% { transform: translateY(-8px); } }

/* ----- Полоса преимуществ ----- */
.lp-strip { border-top: 1px solid var(--lp-line); border-bottom: 1px solid var(--lp-line); background: #fff; padding: 26px 0; }
.lp-strip .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 30px; }
.lp-strip-title { color: var(--lp-muted); font-weight: 500; }
.lp-strip ul { display: flex; flex-wrap: wrap; gap: 12px 40px; list-style: none; margin: 0; padding: 0; }
.lp-strip li { display: flex; align-items: center; gap: 12px; font-weight: 500; color: #3a3550; }
.lp-strip li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lp-violet); }

/* ----- Онлайн-запись и «Для кого» ----- */
.lp-h2 { font-size: clamp(30px, 3.2vw, 44px); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; margin-bottom: 18px; }
.lp-text { font-size: 18px; color: var(--lp-text); line-height: 1.65; }
.lp-checks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.lp-checks li { display: flex; gap: 10px; font-weight: 500; }
.lp-checks li::before { content: "\F26E"; font-family: bootstrap-icons; color: var(--lp-violet); }
.lp-book-demo { max-width: 520px; margin: 0 auto; background: #fff; border: 1px solid var(--lp-line); border-radius: 22px; padding: 22px; box-shadow: 0 30px 60px rgba(47, 34, 88, .10); }
.lp-book-steps { display: flex; gap: 8px; margin-bottom: 16px; }
.lp-book-steps span { flex: 1; height: 5px; border-radius: 3px; background: var(--lp-line); font-size: 0; }
.lp-book-steps span.done { background: #b8a3e3; }
.lp-book-steps span.active { background: var(--lp-violet); }
.lp-book-days { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 14px; }
.lp-book-days span { border: 1.5px solid var(--lp-line); border-radius: 12px; text-align: center; padding: 6px 0; line-height: 1.2; }
.lp-book-days small { display: block; font-size: 11px; color: var(--lp-muted); }
.lp-book-days b { font-size: 18px; }
.lp-book-days span.active { background: var(--lp-violet); border-color: var(--lp-violet); color: #fff; }
.lp-book-days span.active small { color: rgba(255, 255, 255, .8); }
.lp-book-times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.lp-book-times span { border: 1.5px solid var(--lp-line); border-radius: 10px; text-align: center; padding: 8px 0; font-weight: 700; }
.lp-book-times span.active { border-color: var(--lp-violet); color: var(--lp-violet); background: var(--lp-violet-soft); }
.lp-for { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lp-for-item { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--lp-line); border-radius: 16px; padding: 18px 20px; font-weight: 600; }
.lp-for-item i { width: 44px; height: 44px; border-radius: 12px; background: var(--lp-violet-soft); color: var(--lp-violet); display: grid; place-items: center; font-size: 20px; flex: none; }

/* ----- Адаптив ----- */
@media (max-width: 991.98px) {
    .lp-hero { padding: 56px 0 64px; }
    .lp-hero .row { --bs-gutter-y: 2rem; }
    .lp-stage { max-width: 620px; margin: 0 auto; }
    .lp-app { transform: none; }
    .lp-stage:hover .lp-app { transform: none; }
    .lp-blob { width: 100%; height: 100%; }
    .lp-float-top { right: 4px; top: 0; }
    .lp-float-bottom { left: 4px; bottom: 6px; }
    .lp-for { grid-template-columns: 1fr 1fr; }
    .lp-strip .container { justify-content: center; text-align: center; }
    .lp-strip ul { justify-content: center; }
}
@media (max-width: 575.98px) {
    .lp-hero { padding: 36px 0 48px; }
    .lp-hero .row { --bs-gutter-x: 1.5rem; }
    .lp-eyebrow { font-size: 12px; letter-spacing: .1em; gap: 10px; margin-bottom: 18px; }
    .lp-title { font-size: clamp(34px, 10.5vw, 46px); margin-bottom: 20px; }
    .lp-lead { font-size: 17px; }
    .lp-note { margin-top: 20px; font-size: 15px; }
    .lp-h2 { font-size: clamp(26px, 7.4vw, 30px); }
    .lp-text { font-size: 16px; }
    .lp-btn-lg { width: 100%; padding: 13px 18px; font-size: 16px; }
    .lp-stage { padding: 28px 0 34px; }
    .lp-app { grid-template-columns: 44px minmax(0, 1fr); border-radius: 18px; }
    .lp-rail { gap: 18px; padding: 16px 0; }
    .lp-rail-logo img { width: 28px; height: 28px; border-radius: 8px; }
    .lp-rail i { font-size: 15px; }
    .lp-rail i.active { padding: 5px 7px; }
    .lp-app-body { padding: 14px 12px 12px; }
    .lp-app-head b { font-size: 18px; }
    .lp-stats { gap: 6px; }
    .lp-stats > div { padding: 8px; }
    .lp-stats small { font-size: 10px; line-height: 1.25; }
    .lp-stats b { font-size: 16px; }
    .lp-week { grid-template-columns: 30px repeat(3, minmax(0, 1fr)); gap: 6px; }
    .lp-week .lp-day:nth-child(5) { display: none; }
    .lp-float { padding: 8px 12px; border-radius: 14px; }
    .lp-float > span { width: 30px; height: 30px; font-size: 15px; }
    .lp-float b { font-size: 12.5px; }
    .lp-float small { display: none; }
    .lp-float-top { right: 0; }
    .lp-float-bottom { left: 0; bottom: 0; }
    .lp-for { grid-template-columns: 1fr; }
    .lp-strip { padding: 20px 0; }
    .lp-strip ul { gap: 10px 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-float, .lp-caret { animation: none; }
    .lp-app, .lp-stage:hover .lp-app { transition: none; }
}

/* «Удобная основа для работы …» — отдельной строкой фиксированной высоты, чтобы печать слова не двигала страницу */
.lp-lead-line { display: block; margin-top: 4px; min-height: 1.65em; white-space: nowrap; }
@media (max-width: 575.98px) {
    /* на телефоне длинная сфера может перенестись — сразу держим место под две строки */
    .lp-lead-line { white-space: normal; min-height: 3.3em; }
}

/* ===== География: карточки с иллюстрациями ===== */
.lp-geo {padding: 96px 0;background: linear-gradient(180deg, #fff 0%, #f7f5fb 100%);display: none;}
.lp-geo-head { text-align: center; max-width: 880px; margin: 0 auto 48px; }
.lp-geo-head .lp-text { max-width: 620px; }
.lp-geo-card {
    height: 100%; background: #fff; border: 1px solid var(--lp-line); border-radius: 24px; overflow: hidden;
    box-shadow: 0 18px 40px rgba(31, 27, 45, .06); transition: transform .25s ease, box-shadow .25s ease;
}
.lp-geo-card:hover { transform: translateY(-6px); box-shadow: 0 26px 56px rgba(124, 92, 191, .16); }
.lp-geo-pic { position: relative; aspect-ratio: 400 / 230; overflow: hidden; }
.lp-geo-pic svg { display: block; width: 100%; height: 100%; transition: transform .6s ease; }
.lp-geo-card:hover .lp-geo-pic svg { transform: scale(1.04); }
.lp-geo-badge {
    position: absolute; left: 16px; bottom: 16px; padding: 6px 12px; border-radius: 999px;
    background: rgba(255, 255, 255, .92); color: var(--lp-ink); font-weight: 700; font-size: 13px; letter-spacing: .02em;
    box-shadow: 0 6px 16px rgba(31, 27, 45, .15); backdrop-filter: blur(4px);
}
.lp-geo-body { padding: 24px 26px 28px; }
.lp-geo-body h3 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 14px; color: var(--lp-ink); }
.lp-geo-body ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lp-geo-body li { position: relative; padding-left: 28px; color: var(--lp-text); font-size: 15.5px; line-height: 1.5; }
.lp-geo-body li::before {
    content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: 1px;
    width: 20px; height: 20px; border-radius: 50%; background: var(--lp-violet-soft); color: var(--lp-violet);
    font-size: 13px; display: grid; place-items: center;
}
@media (max-width: 575.98px) { .lp-geo { padding: 64px 0; } .lp-geo-head { margin-bottom: 32px; } }

/* ===== Тарифы ===== */
.lp-price { padding: 96px 0 40px; background: #fff; }
.lp-price-head { text-align: center; max-width: 760px; margin: 0 auto 36px; }
.lp-price-head .lp-text { max-width: 620px; }
.lp-btn-violet { background: var(--lp-violet); color: #fff; box-shadow: 0 12px 26px rgba(124, 92, 191, .32); }
.lp-btn-violet:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 16px 32px rgba(124, 92, 191, .4); }

/* калькулятор: три ползунка в одну строку */
.lp-calc {
    max-width: 1040px; margin: 0 auto 34px; padding: 22px 26px 16px;
    background: linear-gradient(180deg, #f7f5fb, #fbfaff); border: 1px solid var(--lp-line); border-radius: 22px;
}
.lp-sliders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 34px; }
.lp-slider-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.lp-slider label { font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.lp-slider label i { color: var(--lp-violet); }
.lp-slider output {
    min-width: 44px; text-align: center; font-weight: 700; font-size: 16px; padding: 3px 10px;
    border-radius: 10px; background: #fff; border: 1px solid var(--lp-line); color: var(--lp-ink);
}
.lp-slider small { display: block; margin-top: 6px; color: var(--lp-muted); font-size: 12.5px; }
.lp-slider input[type=range] {
    --fill: 0%;
    -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; outline: none; cursor: pointer;
    background: linear-gradient(90deg, var(--lp-violet) var(--fill), #e3ddf1 var(--fill));
}
.lp-slider input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff;
    border: 3px solid var(--lp-violet); box-shadow: 0 4px 12px rgba(124, 92, 191, .35); transition: transform .12s;
}
.lp-slider input[type=range]::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%; background: #fff;
    border: 3px solid var(--lp-violet); box-shadow: 0 4px 12px rgba(124, 92, 191, .35);
}
.lp-slider input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }
.lp-slider input[type=range]:focus-visible { box-shadow: 0 0 0 4px rgba(124, 92, 191, .18); }
.lp-calc-line { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #ddd5ee; text-align: center; font-size: 14px; color: var(--lp-text); }
.lp-calc-line b { color: var(--lp-ink); }

/* два тарифа: «Старт» и основной — подсвечивается тот, что сейчас в калькуляторе */
.lp-plans { max-width: 1040px; margin: 0 auto 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.lp-plan {
    display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--lp-line); border-radius: 22px;
    padding: 20px 22px; transition: border-color .18s, box-shadow .18s;
}
.lp-plan.is-on { border: 2px solid var(--lp-violet); box-shadow: 0 16px 36px rgba(47, 34, 88, .10); }
.lp-plan-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lp-plan-head h3 { font-size: 20px; font-weight: 700; margin: 0; color: var(--lp-ink); }
.lp-plan-price b { font-size: 24px; color: var(--lp-ink); }
.lp-plan-price span, .lp-plan-price small { color: var(--lp-text); font-size: 14px; margin-left: 2px; }
.lp-plan-tag { color: var(--lp-text); font-size: 14px; margin: 6px 0 10px; }
.lp-plan-list { list-style: none; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; font-size: 14px; }
.lp-plan-list i { color: var(--lp-violet); margin-right: 6px; }
.lp-plan .lp-btn { margin-top: auto; }
@media (max-width: 767.98px) {
    .lp-plans { grid-template-columns: 1fr; gap: 14px; }
}

/* четыре карточки срока */
.lp-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.lp-tier {
    position: relative; display: flex; flex-direction: column;
    background: #fff; border: 1.5px solid var(--lp-line); border-radius: 24px; padding: 26px 22px 22px;
    box-shadow: 0 14px 34px rgba(31, 27, 45, .05); transition: transform .18s, box-shadow .18s, border-color .18s;
}
.lp-tier:hover { transform: translateY(-3px); box-shadow: 0 22px 44px rgba(47, 34, 88, .10); border-color: #d9d0ee; }
.lp-tier.is-rec {
    border: 2px solid var(--lp-violet);
    background: linear-gradient(180deg, #f6f1ff 0%, #fff 42%);
    box-shadow: 0 28px 60px rgba(124, 92, 191, .20);
}
.lp-tier-flag {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%); white-space: nowrap;
    background: var(--lp-violet); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em;
    padding: 5px 14px; border-radius: 99px; box-shadow: 0 8px 18px rgba(124, 92, 191, .35);
}
.lp-tier-flag.is-soft { background: #fff; color: var(--lp-violet); border: 1.5px solid #d9d0ee; box-shadow: none; }
.lp-tier-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lp-tier-head h3 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.lp-tier-off { background: #e7f7ee; color: #178a4c; font-weight: 700; font-size: 13px; padding: 3px 9px; border-radius: 8px; }
.lp-tier-tag { color: var(--lp-muted); font-size: 14px; line-height: 1.45; margin: 6px 0 18px; min-height: 40px; }
.lp-tier-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.lp-tier-price b { font-size: clamp(28px, 2.4vw, 36px); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.lp-tier-price span { color: var(--lp-muted); font-weight: 500; }
.lp-tier-old { color: var(--lp-muted); font-size: 14px; text-decoration: line-through; margin-top: 4px; min-height: 21px; }
.lp-tier-total { font-size: 14px; color: var(--lp-text); margin-top: 6px; }
.lp-tier-save { font-size: 13.5px; font-weight: 700; color: #178a4c; min-height: 20px; margin: 2px 0 16px; }
.lp-tier-inc { background: #f6f4ff; border-radius: 12px; padding: 10px 12px; margin: 0 0 16px; display: grid; gap: 5px; }
.lp-tier-inc-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--lp-muted, #6b7280); margin-bottom: 2px; }
.lp-tier-inc-row { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--lp-text); }
.lp-tier-inc-row i { color: var(--lp-violet); font-size: 15px; flex: none; }
.lp-tier-inc-row b { margin-left: auto; font-size: 15px; color: var(--lp-ink, #111827); font-variant-numeric: tabular-nums; }
.lp-tier-list { list-style: none; padding: 16px 0 0; margin: 18px 0 0; border-top: 1px solid var(--lp-line); display: grid; gap: 9px; }
.lp-tier-list li { display: flex; gap: 8px; font-size: 14px; color: var(--lp-text); line-height: 1.4; }
.lp-tier-list li i { color: var(--lp-violet); font-size: 16px; line-height: 1.2; flex: none; }

.lp-price-all {
    list-style: none; padding: 0; margin: 34px auto 0; max-width: 1040px;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
}
.lp-price-all li { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14.5px; color: var(--lp-text); }
.lp-price-all i { color: var(--lp-violet); font-size: 17px; }
.lp-link-more { font-weight: 700; color: var(--lp-violet); text-decoration: none; }
.lp-link-more:hover { color: var(--lp-ink); }
.lp-link-more i { transition: transform .15s; display: inline-block; }
.lp-link-more:hover i { transform: translateX(3px); }

/* ===== Преимущества ===== */
.lp-plus { padding: 56px 0 96px; background: linear-gradient(180deg, #fff 0%, #f7f5fb 100%); }
.lp-plus-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lp-plus-card {
    background: #fff; border: 1px solid var(--lp-line); border-radius: 22px; padding: 26px 24px 28px;
    box-shadow: 0 14px 32px rgba(31, 27, 45, .05); height: 100%;
}
.lp-plus-ico {
    width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
    background: var(--lp-violet-soft); color: var(--lp-violet); font-size: 20px; margin-bottom: 16px;
}
.lp-plus-card h3 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
.lp-plus-card p { margin: 0; color: var(--lp-text); font-size: 15px; line-height: 1.55; }

@media (max-width: 1199.98px) {
    .lp-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}
@media (max-width: 991.98px) {
    .lp-plus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-sliders { grid-template-columns: 1fr; gap: 16px; }
    .lp-price { padding: 72px 0 32px; }
}
@media (max-width: 575.98px) {
    .lp-price { padding: 56px 0 24px; }
    .lp-price-head { margin-bottom: 26px; }
    .lp-plus { padding: 32px 0 56px; }
    .lp-plus-grid { grid-template-columns: 1fr; gap: 14px; }
    .lp-plus-card { padding: 22px 20px; }
    .lp-calc { padding: 18px 16px 14px; border-radius: 18px; }
    .lp-calc-line { font-size: 13.5px; }
    .lp-tiers { grid-template-columns: 1fr; row-gap: 26px; }
    .lp-tier { padding: 24px 18px 20px; }
    .lp-tier-tag { min-height: 0; }
    .lp-price-all { justify-content: flex-start; gap: 10px 18px; }
}

/* ===== Страница тарифов (pages/tariffs.php) ===== */
.tf-hero {
    padding: 56px 0 8px; text-align: center;
    background: radial-gradient(800px 360px at 50% 0%, rgba(124, 92, 191, .10), transparent 70%);
}
.tf-hero .lp-h2 { font-size: clamp(34px, 4.4vw, 56px); max-width: 860px; margin: 0 auto 16px; }
.tf-hero .lp-text { max-width: 680px; margin: 0 auto; }
.tf-hero + .lp-price { padding-top: 40px; }
.tf-crumbs { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--lp-muted); margin-bottom: 18px; }
.tf-crumbs a { color: var(--lp-muted); text-decoration: none; }
.tf-crumbs a:hover { color: var(--lp-violet); }
.tf-crumbs i { font-size: 11px; }
.tf-pills { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tf-pills li {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px;
    background: #fff; border: 1px solid var(--lp-line); font-weight: 600; font-size: 14px; color: var(--lp-ink);
    box-shadow: 0 6px 16px rgba(31, 27, 45, .04);
}
.tf-pills i { color: var(--lp-violet); }

.tf-section { padding: 72px 0; }
.tf-alt { background: linear-gradient(180deg, #f7f5fb 0%, #fff 100%); }

.tf-explain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tf-explain article {
    position: relative; background: #fff; border: 1px solid var(--lp-line); border-radius: 22px; padding: 26px 24px;
    box-shadow: 0 14px 32px rgba(31, 27, 45, .05);
}
.tf-num {
    width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 14px;
    background: var(--lp-violet-soft); color: var(--lp-violet); font-weight: 700;
}
.tf-explain h3 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
.tf-explain p { color: var(--lp-text); font-size: 14.5px; margin-bottom: 14px; }
.tf-big { font-size: 30px; font-weight: 700; letter-spacing: -.03em; margin-bottom: 12px; }
.tf-big small { font-size: 15px; font-weight: 500; color: var(--lp-muted); letter-spacing: 0; }
.tf-explain ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.tf-explain ul li { color: var(--lp-text); font-size: 14.5px; padding-left: 18px; position: relative; }
.tf-explain ul li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--lp-violet); }
.tf-explain dl { margin: 0; display: grid; gap: 8px; }
.tf-explain dl div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 12px; background: #f8f6fc; }
.tf-explain dt { font-weight: 500; color: var(--lp-text); font-size: 14.5px; }
.tf-explain dd { margin: 0; font-weight: 700; }
.tf-explain dd.is-off { color: #178a4c; }
.tf-example {
    display: flex; gap: 14px; align-items: flex-start; margin: 22px auto 0; max-width: 900px;
    padding: 16px 20px; border-radius: 16px; background: #fff8e8; border: 1px solid #f6e3b4; color: #5c4a1a; font-size: 15px;
}
.tf-example i { font-size: 20px; color: #d19a13; }

.tf-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tf-feature {
    display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 18px;
    background: #fff; border: 1px solid var(--lp-line);
}
.tf-feature > span {
    flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
    background: var(--lp-violet-soft); color: var(--lp-violet); font-size: 19px;
}
.tf-feature b { display: block; font-size: 15.5px; font-weight: 700; margin-bottom: 3px; }
.tf-feature small { display: block; color: var(--lp-muted); font-size: 13.5px; line-height: 1.45; }

.tf-faq { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
.tf-faq details { background: #fff; border: 1px solid var(--lp-line); border-radius: 16px; padding: 0 20px; transition: box-shadow .15s, border-color .15s; }
.tf-faq details[open] { border-color: #d9d0ee; box-shadow: 0 12px 28px rgba(47, 34, 88, .07); }
.tf-faq summary {
    list-style: none; cursor: pointer; padding: 18px 0; font-weight: 700; font-size: 16.5px;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.tf-faq summary::-webkit-details-marker { display: none; }
.tf-faq summary i { color: var(--lp-violet); transition: transform .2s; flex: none; }
.tf-faq details[open] summary i { transform: rotate(45deg); }
.tf-faq details p { color: var(--lp-text); font-size: 15px; line-height: 1.65; margin: 0 0 18px; }

.tf-support {
    display: grid; grid-template-columns: auto 1fr auto; gap: 22px 28px; align-items: center;
    padding: 30px 32px; border-radius: 26px; color: #fff;
    background: radial-gradient(600px 240px at 90% 0%, rgba(157, 125, 240, .45), transparent 70%), var(--lp-ink);
    box-shadow: 0 28px 60px rgba(31, 27, 45, .22);
}
.tf-support-ico { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; font-size: 28px; background: rgba(255, 255, 255, .12); }
.tf-support h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px; }
.tf-support p { margin: 0; color: rgba(255, 255, 255, .78); font-size: 15px; line-height: 1.55; }
.tf-support-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.tf-btn-wa { background: #25d366; color: #fff; }
.tf-btn-wa:hover { color: #fff; background: #1ebe5b; }
.tf-btn-tg { background: #2aabee; color: #fff; }
.tf-btn-tg:hover { color: #fff; background: #1f98d9; }

@media (max-width: 991.98px) {
    .tf-explain, .tf-features { grid-template-columns: 1fr 1fr; }
    .tf-explain article:last-child { grid-column: 1 / -1; }
    .tf-support { grid-template-columns: auto 1fr; }
    .tf-support-btns { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 575.98px) {
    .tf-hero { padding: 32px 0 4px; }
    .tf-hero .lp-h2 { font-size: clamp(28px, 8.4vw, 34px); }
    .tf-crumbs { margin-bottom: 12px; }
    .tf-pills { gap: 8px; }
    .tf-pills li { padding: 7px 12px; font-size: 13px; }
    .tf-section { padding: 48px 0; }
    .tf-explain, .tf-features { grid-template-columns: 1fr; }
    .tf-explain article { padding: 22px 18px; }
    .tf-example { padding: 14px 16px; font-size: 14px; }
    .tf-faq details { padding: 0 16px; }
    .tf-faq summary { font-size: 15.5px; padding: 16px 0; }
    .tf-support { grid-template-columns: 1fr; padding: 24px 20px; }
    .tf-support-btns .lp-btn { flex: 1 1 auto; }
}


/* ----- Интеграции: Master Clients в центре, сервисы на орбитах (перед тарифами) ----- */
.lp-hub {
    position: relative; overflow: hidden; padding: 96px 0 72px; color: #fff;
    background:
        radial-gradient(900px 500px at 78% 40%, rgba(143, 98, 255, .35), transparent 60%),
        radial-gradient(700px 400px at 10% 100%, rgba(56, 189, 248, .14), transparent 60%),
        linear-gradient(160deg, #1b1533 0%, #241a47 55%, #1a1430 100%);
}
.lp-hub::before { /* тонкая сетка точек */
    content: ""; position: absolute; inset: 0; opacity: .35; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px); background-size: 26px 26px;
    mask-image: radial-gradient(ellipse at 70% 45%, #000 30%, transparent 75%);
}
.lp-hub .container { position: relative; }
.lp-hub-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.lp-hub-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: #c9b6ff; font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.lp-hub-eyebrow span { width: 26px; height: 2px; background: #a78bfa; border-radius: 2px; }
.lp-hub-title { font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; margin: 0 0 16px; color: #fff; }
.lp-hub-text { color: #c8c2dd; font-size: 17px; line-height: 1.6; margin: 0 0 20px; max-width: 520px; }
.lp-hub-free { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.lp-hub-free span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.lp-hub-free .bi { color: #86efac; }

.lp-hub-cats { display: grid; gap: 8px; }
.lp-hub-cat {
    display: flex; gap: 14px; align-items: flex-start; width: 100%; text-align: left; padding: 14px 16px; border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .04); color: #fff; transition: background .2s, border-color .2s, transform .2s;
}
.lp-hub-cat:hover, .lp-hub-cat.is-on { background: rgba(255, 255, 255, .1); border-color: rgba(167, 139, 250, .55); transform: translateX(4px); }
.lp-hub-cat:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
.lp-hub-cat-ico { width: 42px; height: 42px; flex: none; border-radius: 13px; display: grid; place-items: center; font-size: 19px; color: #fff; background: linear-gradient(135deg, #6d4fd1, #a26bff); box-shadow: 0 8px 20px rgba(109, 79, 209, .45); }
.lp-hub-cat b { display: block; font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.lp-hub-cat small { display: block; color: #b9b2d0; font-size: 14px; line-height: 1.5; }

/* орбиты */
.lp-hub-stage { display: flex; justify-content: center; }
.hub { position: relative; width: min(580px, 100%); aspect-ratio: 1; container-type: inline-size; } /* cqw — доля ширины круга: радиусы орбит */
.hub-glow { position: absolute; inset: 25%; border-radius: 50%; background: radial-gradient(circle, rgba(167, 139, 250, .45), transparent 70%); filter: blur(10px); }
.hub-ring { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; border-radius: 50%; animation: hub-spin 90s linear infinite; }
.hub-ring::before { content: ""; position: absolute; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .16); }
.hub-ring-outer { }
.hub-ring-outer::before { inset: 9%; }
.hub-ring-inner { animation-duration: 60s; animation-direction: reverse; }
.hub-ring-inner::before { inset: 25%; border-style: solid; border-color: rgba(255, 255, 255, .1); }
.hub-node { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.hub-ring-outer .hub-node { transform: rotate(var(--a)) translateY(-41cqw); }
.hub-ring-inner .hub-node { transform: rotate(var(--a)) translateY(-25cqw); }
.hub-node-in {
    position: absolute; left: 0; top: 0; translate: -50% -50%;
    display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; overflow: hidden;
    background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 0 0 4px rgba(255, 255, 255, .06);
    rotate: calc(-1 * var(--a)); /* логотип всегда ровно */
    animation: hub-spin-back 90s linear infinite; transition: opacity .25s, filter .25s, scale .25s;
}
.hub-ring-inner .hub-node-in { animation-duration: 60s; animation-direction: reverse; }
.hub-node-in img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hub-node.is-wide .hub-node-in { width: 128px; height: 50px; border-radius: 14px; padding: 8px 12px; }
.hub-node.is-wide .hub-node-in img { object-fit: contain; }
.hub-core {
    position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 30%; aspect-ratio: 1; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    background: radial-gradient(circle at 35% 30%, #ffffff, #efeaff); box-shadow: 0 0 0 10px rgba(255, 255, 255, .06), 0 0 0 22px rgba(255, 255, 255, .03), 0 24px 60px rgba(0, 0, 0, .45);
}
.hub-core img { width: 42%; height: auto; border-radius: 22%; }
.hub-core b { color: #241a47; font-size: clamp(11px, 1.1vw, 14px); font-weight: 800; letter-spacing: -.01em; }

/* подсветка категории */
.lp-hub[data-cat="pay"] .hub-node:not([data-cat="pay"]) .hub-node-in,
.lp-hub[data-cat="msg"] .hub-node:not([data-cat="msg"]) .hub-node-in,
.lp-hub[data-cat="tel"] .hub-node:not([data-cat="tel"]) .hub-node-in,
.lp-hub[data-cat="kassa"] .hub-node:not([data-cat="kassa"]) .hub-node-in,
.lp-hub[data-cat="ads"] .hub-node:not([data-cat="ads"]) .hub-node-in,
.lp-hub[data-cat="cal"] .hub-node:not([data-cat="cal"]) .hub-node-in { opacity: .18; filter: grayscale(1); }
.lp-hub[data-cat="pay"] .hub-node[data-cat="pay"] .hub-node-in,
.lp-hub[data-cat="msg"] .hub-node[data-cat="msg"] .hub-node-in,
.lp-hub[data-cat="tel"] .hub-node[data-cat="tel"] .hub-node-in,
.lp-hub[data-cat="kassa"] .hub-node[data-cat="kassa"] .hub-node-in,
.lp-hub[data-cat="ads"] .hub-node[data-cat="ads"] .hub-node-in,
.lp-hub[data-cat="cal"] .hub-node[data-cat="cal"] .hub-node-in { scale: 1.12; }
.lp-hub[data-cat] .hub-ring, .lp-hub[data-cat] .hub-node-in { animation-play-state: paused; }
.lp-hub[data-cat=""] .hub-ring, .lp-hub[data-cat=""] .hub-node-in { animation-play-state: running; }

@keyframes hub-spin { to { transform: rotate(360deg); } }
@keyframes hub-spin-back { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { .hub-ring, .hub-node-in { animation: none !important; } }

/* почему это удобно */
.lp-hub-perks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 56px; }
.lp-hub-perks article { position: relative; overflow: hidden; padding: 22px 20px; border-radius: 22px; background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .1); transition: transform .2s, border-color .2s, background .2s; }
.lp-hub-perks article::after { content: ""; position: absolute; width: 140px; height: 140px; right: -60px; top: -60px; border-radius: 50%; background: radial-gradient(circle, rgba(167, 139, 250, .35), transparent 70%); pointer-events: none; }
.lp-hub-perks article:hover { transform: translateY(-4px); border-color: rgba(167, 139, 250, .5); background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); }
.lp-hub-perk-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; color: #fff; background: linear-gradient(135deg, #6d4fd1, #a26bff); box-shadow: 0 8px 20px rgba(109, 79, 209, .45); margin-bottom: 14px; }
.lp-hub-perks h3 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 6px; color: #fff; }
.lp-hub-perks p { margin: 0; color: #b9b2d0; font-size: 14px; line-height: 1.5; }
.lp-hub-note { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; margin: 26px 0 0; color: #b9b2d0; font-size: 14px; text-align: center; }
.lp-hub-note .bi-info-circle { color: #a78bfa; }
.lp-hub-note a { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .3); }
.lp-hub-note a:hover { border-color: #fff; }

@media (max-width: 1199.98px) { .lp-hub-perks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 991.98px) {
    .lp-hub { padding: 72px 0 56px; }
    .lp-hub-grid { grid-template-columns: 1fr; gap: 36px; }
    .lp-hub-stage { order: -1; }
    .hub { width: min(440px, 92vw); }
    .hub-node.is-wide .hub-node-in { width: 112px; height: 46px; padding: 8px 10px; }
    .lp-hub-perks { margin-top: 44px; }
}
@media (max-width: 575.98px) {
    .lp-hub { padding: 56px 0 44px; }
    .lp-hub-cat:hover, .lp-hub-cat.is-on { transform: none; }
    .lp-hub-cat { padding: 12px 14px; gap: 12px; }
    .lp-hub-cat small { font-size: 13px; }
    .lp-hub-free span { font-size: 13px; padding: 8px 12px; }
    .hub-node-in { width: 46px; height: 46px; border-radius: 14px; }
    .hub { width: min(440px, 84vw); }
    .hub-node.is-wide .hub-node-in { width: 80px; height: 34px; padding: 6px 8px; border-radius: 11px; }
    .hub-core b { display: none; }
    .lp-hub-perks { grid-template-columns: 1fr; gap: 10px; margin-top: 36px; }
    .lp-hub-perks article { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 16px; border-radius: 18px; }
    .lp-hub-perk-ico { grid-row: span 2; margin-bottom: 0; }
    .lp-hub-perks h3 { font-size: 16px; margin-top: 2px; }
    .lp-hub-perks p { font-size: 13px; }
}
@media (max-width: 389.98px) {
    .hub-node-in { width: 40px; height: 40px; border-radius: 12px; }
    .hub-node.is-wide .hub-node-in { width: 70px; height: 30px; padding: 5px 7px; border-radius: 10px; }
}


/* ----- Страница компании + онлайн-запись и оплата: телефон со страницей компании и уведомления вокруг ----- */
.lp-bk { padding: 96px 0; overflow: hidden; }
.lp-bk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.lp-bk-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.lp-bk-feat { display: flex; gap: 12px; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid var(--lp-line); box-shadow: 0 10px 24px rgba(31, 27, 45, .04); }
.lp-bk-feat > span { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--lp-violet-soft); color: var(--lp-violet); font-size: 18px; }
.lp-bk-feat b { display: block; font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.lp-bk-feat small { display: block; color: var(--lp-text); font-size: 13.5px; line-height: 1.45; }
.lp-bk-stage { position: relative; display: flex; justify-content: center; padding: 30px 0; }
.lp-bk-blob { position: absolute; inset: 6% 10%; border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%; background: linear-gradient(135deg, #e9dfff, #ffe4f1 60%, #dff3ff); filter: blur(4px); }
.lp-phone { position: relative; width: 290px; border-radius: 42px; padding: 12px; background: #17142a; box-shadow: 0 40px 80px rgba(47, 34, 88, .28); }
.lp-phone-notch { position: absolute; top: 12px; left: 50%; translate: -50% 0; width: 96px; height: 22px; border-radius: 0 0 14px 14px; background: #17142a; z-index: 2; }
.lp-phone-screen { position: relative; border-radius: 32px; background: #f7f6fb; padding: 34px 16px 18px; overflow: hidden; }
.lp-ph-steps { display: flex; gap: 6px; margin-bottom: 12px; }
.lp-ph-steps span { flex: 1; height: 4px; border-radius: 4px; background: #e4def3; }
.lp-ph-steps .done { background: #a78bfa; }
.lp-ph-steps .on { background: var(--lp-violet); }
.lp-ph-btn { text-align: center; padding: 12px; border-radius: 14px; color: #fff; font-weight: 700; font-size: 13px; background: linear-gradient(135deg, #6d4fd1, #a26bff); box-shadow: 0 8px 18px rgba(109, 79, 209, .35); }
/* макет страницы компании в телефоне */
.lp-cp-screen { padding-bottom: 0; }
.lp-cp-cover { position: relative; height: 92px; margin: -34px -16px 0; background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .45) 0 18%, transparent 19%), linear-gradient(135deg, #f9a8d4, #a78bfa 55%, #7dd3fc); }
.lp-cp-url { position: absolute; left: 50%; bottom: 8px; translate: -50% 0; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .88); font-size: 10px; font-weight: 700; color: #3a3550; white-space: nowrap; }
.lp-cp-url .bi { font-size: 9px; color: #22c55e; }
.lp-cp-head { position: relative; padding-top: 30px; margin-bottom: 10px; }
.lp-cp-logo { position: absolute; top: -26px; left: 0; width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; color: #fff; font-size: 20px; font-weight: 800; background: linear-gradient(135deg, #f472b6, #8b5cf6); border: 3px solid #f7f6fb; box-shadow: 0 6px 14px rgba(31, 27, 45, .15); }
.lp-cp-head > b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.lp-cp-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; font-size: 10.5px; color: var(--lp-muted); }
.lp-cp-rate { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; color: #1f1b2d; }
.lp-cp-rate .bi { color: #f59e0b; }
.lp-cp-rate em { font-style: normal; font-weight: 500; color: var(--lp-muted); }
.lp-cp-open { display: inline-flex; align-items: center; gap: 4px; color: #16a34a; font-weight: 600; }
.lp-cp-open i { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
.lp-cp-tabs { display: flex; gap: 12px; margin-bottom: 8px; border-bottom: 1px solid #e9e5f2; font-size: 11px; font-weight: 700; color: var(--lp-muted); }
.lp-cp-tabs span { padding-bottom: 6px; }
.lp-cp-tabs .on { color: var(--lp-violet); box-shadow: inset 0 -2px 0 var(--lp-violet); }
.lp-cp-svc { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: #fff; margin-bottom: 6px; }
.lp-cp-svc.on { box-shadow: inset 0 0 0 1.5px var(--lp-violet); }
.lp-cp-svc div { flex: 1; min-width: 0; }
.lp-cp-svc b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-cp-svc small { display: block; font-size: 10px; color: var(--lp-muted); }
.lp-cp-svc em { font-style: normal; font-size: 12px; font-weight: 800; white-space: nowrap; }
.lp-cp-sheet { position: relative; margin: 10px -16px 0; padding: 12px 16px 16px; border-radius: 22px 22px 0 0; background: #fff; box-shadow: 0 -12px 28px rgba(31, 27, 45, .12); }
.lp-cp-sheet .lp-ph-steps { margin-bottom: 10px; }
.lp-cp-pick { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.lp-cp-pick > .bi { width: 30px; height: 30px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--lp-violet-soft); color: var(--lp-violet); font-size: 14px; }
.lp-cp-pick span { min-width: 0; }
.lp-cp-pick b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-cp-pick small { display: block; font-size: 10px; color: var(--lp-muted); }
.lp-cp-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 7px 10px; margin-bottom: 8px; border-radius: 10px; background: #f4f0ff; font-size: 11px; font-weight: 600; }
.lp-cp-sum b { font-size: 14px; color: var(--lp-violet); white-space: nowrap; }
.lp-cp-sheet .lp-ph-btn { padding: 11px 8px; font-size: 12px; }
.lp-cp-methods { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.lp-cp-methods span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 8px; border: 1px solid #ece8f4; font-size: 10px; font-weight: 700; color: #3a3550; }
.lp-cp-methods img { height: 12px; width: auto; }
.lp-bk-toast {
    position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 16px;
    background: rgba(255, 255, 255, .96); box-shadow: 0 18px 40px rgba(31, 27, 45, .14); backdrop-filter: blur(6px); animation: lp-float 6s ease-in-out infinite;
}
.lp-bk-toast .ico { width: 34px; height: 34px; flex: none; border-radius: 11px; display: grid; place-items: center; color: #fff; font-size: 16px; }
.lp-bk-toast .violet { background: linear-gradient(135deg, #6d4fd1, #a26bff); }
.lp-bk-toast .green { background: #22c55e; }
.lp-bk-toast .amber { background: #f59e0b; }
.lp-bk-toast b { display: block; font-size: 13px; }
.lp-bk-toast small { display: block; font-size: 11.5px; color: var(--lp-muted); }
.lp-bk-toast.t1 { top: 8%; left: 0; }
.lp-bk-toast.t2 { top: 46%; right: -2%; animation-delay: -2s; }
.lp-bk-toast.t3 { bottom: -1%; left: 2%; animation-delay: -4s; }
@keyframes lp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ----- Для кого ----- */
.lp-aud { padding: 90px 0; background: linear-gradient(180deg, #f7f5fb 0%, #fff 100%); }
.lp-aud-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lp-aud-card {
    position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 22px 20px 20px; border-radius: 22px;
    background: #fff; border: 1px solid var(--lp-line); transition: transform .2s, box-shadow .2s, border-color .2s;
}
.lp-aud-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c); opacity: .85; }
.lp-aud-card::after { content: ""; position: absolute; width: 160px; height: 160px; right: -60px; top: -60px; border-radius: 50%; background: var(--c); opacity: .07; transition: opacity .2s, transform .3s; }
.lp-aud-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(31, 27, 45, .09); border-color: transparent; }
.lp-aud-card:hover::after { opacity: .14; transform: scale(1.15); }
.lp-aud-ico { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; font-size: 22px; color: #fff; background: var(--c); box-shadow: 0 10px 22px color-mix(in srgb, var(--c) 35%, transparent); margin-bottom: 14px; }
.lp-aud-card h3 { position: relative; z-index: 1; font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 6px; }
.lp-aud-card p { position: relative; z-index: 1; color: var(--lp-text); font-size: 14px; line-height: 1.5; margin: 0 0 14px; }
.lp-aud-tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.lp-aud-tags span { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, #fff); color: color-mix(in srgb, var(--c) 75%, #1f1b2d); }

/* ----- Возможности: плитки разного размера ----- */
.lp-bento-sec { padding: 90px 0; }
.lp-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(190px, auto); gap: 16px; }
.lp-bento-card { position: relative; overflow: hidden; padding: 24px; border-radius: 24px; background: #fff; border: 1px solid var(--lp-line); box-shadow: 0 14px 32px rgba(31, 27, 45, .04); transition: transform .2s, box-shadow .2s; }
.lp-bento-card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px rgba(31, 27, 45, .08); }
.lp-bento-card.is-big { grid-column: span 2; grid-row: span 2; background: linear-gradient(160deg, #f4efff 0%, #fff 55%); display: flex; flex-direction: column; }
.lp-bento-card.is-wide { grid-column: span 2; background: linear-gradient(120deg, #1f1b2d, #3a2a6b); color: #fff; border: 0; }
.lp-bento-card.is-wide p { color: #cfc8e6; }
.lp-bento-card.is-wide .lp-bento-ico { background: rgba(255, 255, 255, .12); color: #fff; }
.lp-bento-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; color: var(--lp-violet); background: var(--lp-violet-soft); margin-bottom: 14px; }
.lp-bento-card h3 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 6px; }
.lp-bento-card.is-big h3 { font-size: 24px; }
.lp-bento-card p { color: var(--lp-text); font-size: 14.5px; line-height: 1.55; margin: 0; }
.lp-mini-cal { margin-top: 20px; flex: 1; min-height: 220px; display: flex; flex-direction: column; border-radius: 18px; background: #fff; border: 1px solid var(--lp-line); overflow: hidden; }
.lp-mc-head { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--lp-line); }
.lp-mc-head span { padding: 10px 12px; font-size: 12px; font-weight: 700; color: var(--lp-muted); }
.lp-mc-body { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); background: repeating-linear-gradient(180deg, #fff 0 31px, #f3f1f8 31px 32px); }
.lp-mc-col { position: relative; border-right: 1px solid var(--lp-line); }
.lp-mc-col:last-child { border-right: 0; }
.lp-mc-col i { position: absolute; left: 6px; right: 6px; top: var(--t); height: var(--h); border-radius: 10px; padding: 6px 8px; font-style: normal; font-size: 11.5px; font-weight: 700; color: color-mix(in srgb, var(--c) 70%, #1f1b2d); background: color-mix(in srgb, var(--c) 16%, #fff); border-left: 3px solid var(--c); overflow: hidden; }

/* ----- Старт: шаги ----- */
.lp-start { padding: 40px 0 96px; }
.lp-start-box { position: relative; overflow: hidden; padding: 48px; border-radius: 32px; background: linear-gradient(135deg, #6d4fd1 0%, #8f62ff 55%, #b07cff 100%); color: #fff; box-shadow: 0 30px 70px rgba(109, 79, 209, .35); }
.lp-start-box::after { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -160px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.lp-start-head { position: relative; max-width: 620px; }
.lp-start .lp-eyebrow { color: #e9dfff; }
.lp-start .lp-eyebrow span { background: #e9dfff; }
.lp-start .lp-h2 { color: #fff; }
.lp-start .lp-text { color: #ece5ff; }
.lp-start-steps { position: relative; list-style: none; margin: 34px 0 30px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lp-start-steps::before { content: ""; position: absolute; top: 22px; left: 22px; right: 22px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 8px, transparent 8px 16px); }
.lp-start-steps li { position: relative; }
.lp-start-steps span { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #6d4fd1; background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .18); margin-bottom: 14px; }
.lp-start-steps b { display: block; font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.lp-start-steps small { display: block; color: #ece5ff; font-size: 14px; line-height: 1.5; }
.lp-start-cta { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.lp-start-cta .lp-btn-dark { background: #fff; color: #1f1b2d; }
.lp-start-cta .lp-btn-dark:hover { background: #f4efff; color: #1f1b2d; }
.lp-start-cta span { display: inline-flex; align-items: center; gap: 8px; color: #ece5ff; font-size: 14px; font-weight: 600; }

@media (max-width: 1199.98px) {
    .lp-aud-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-bento-card.is-big { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 991.98px) {
    .lp-bk { padding: 72px 0; }
    .lp-bk-grid { grid-template-columns: 1fr; gap: 40px; }
    .lp-start-steps { grid-template-columns: 1fr 1fr; }
    .lp-start-steps::before { display: none; }
    .lp-start-box { padding: 36px 28px; }
}
@media (max-width: 575.98px) {
    .lp-bk { padding: 56px 0; }
    .lp-bk-grid { gap: 28px; }
    .lp-bk-feats { grid-template-columns: 1fr; gap: 10px; }
    .lp-bk-feat { padding: 14px; }
    .lp-bk-stage { padding: 44px 0 10px; }
    .lp-phone { width: min(280px, 100%); border-radius: 38px; padding: 10px; }
    .lp-phone-screen { border-radius: 30px; padding: 32px 12px 16px; }
    .lp-phone-screen.lp-cp-screen { padding-bottom: 0; }
    .lp-cp-cover { margin: -32px -12px 0; }
    .lp-cp-sheet { margin: 10px -12px 0; padding: 12px 12px 14px; }
    .lp-bk-toast { display: none; }
    .lp-bk-toast.t1 { display: flex; top: 0; left: 50%; translate: -50% 0; white-space: nowrap; }
    .lp-aud-grid { grid-template-columns: 1fr; gap: 12px; }
    .lp-bento { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 12px; }
    .lp-bento-card { padding: 20px; border-radius: 20px; }
    .lp-bento-card.is-big, .lp-bento-card.is-wide { grid-column: auto; }
    .lp-bento-card.is-big h3 { font-size: 21px; }
    .lp-mini-cal { min-height: 200px; }
    .lp-mc-head span { padding: 8px; font-size: 11px; }
    .lp-mc-col i { left: 3px; right: 3px; padding: 4px 5px; font-size: 10.5px; }
    .lp-start { padding: 24px 0 64px; }
    .lp-start-box { padding: 28px 20px; border-radius: 24px; }
    .lp-start-steps { grid-template-columns: 1fr; margin: 26px 0 24px; }
    .lp-start-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; }
    .lp-start-steps span { grid-row: span 2; margin-bottom: 0; }
    .lp-aud, .lp-bento-sec { padding: 56px 0; }
}
@media (prefers-reduced-motion: reduce) { .lp-bk-toast { animation: none; } }

/* ----- Мобильные приложения: два телефона — сотрудника и клиента; кнопки магазинов .app-badge — в style.css ----- */
.lp-mob { padding: 24px 0 96px; }
.lp-mob-box {
    position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 56px; border-radius: 32px;
    background: radial-gradient(520px 360px at 85% 20%, rgba(244, 114, 182, .18), transparent 70%), radial-gradient(620px 420px at 70% 100%, rgba(124, 92, 191, .22), transparent 70%), linear-gradient(160deg, #f8f5ff 0%, #f1ebff 100%);
    border: 1px solid #e6def7;
}
.lp-mob-copy { position: relative; z-index: 1; }
.lp-mob-aud { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 26px 0 28px; }
.lp-mob-aud article { padding: 18px; border-radius: 20px; background: rgba(255, 255, 255, .8); border: 1px solid #ebe5f7; box-shadow: 0 14px 30px rgba(47, 34, 88, .06); backdrop-filter: blur(6px); }
.lp-mob-aud h3 { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 12px; }
.lp-mob-aud h3 span { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; font-size: 17px; color: #fff; background: linear-gradient(135deg, #6d4fd1, #a26bff); }
.lp-mob-aud h3 span.is-pink { background: linear-gradient(135deg, #f472b6, #ec4899); }
.lp-mob-aud ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lp-mob-aud li { position: relative; padding-left: 24px; font-size: 14.5px; color: var(--lp-text); line-height: 1.4; }
.lp-mob-aud li::before { content: "\F26E"; font-family: bootstrap-icons; position: absolute; left: 0; top: 0; color: var(--lp-violet); font-size: 16px; line-height: 1.25; }
.lp-mob-more { margin: 18px 0 0; }
.lp-mob-more .lp-link { display: inline-flex; align-items: center; gap: 8px; }

.lp-mob-stage { position: relative; display: flex; justify-content: center; min-height: 600px; align-items: center; }
.lp-mob-stage::before { content: ""; position: absolute; width: 440px; height: 440px; left: 50%; top: 50%; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(167, 139, 250, .45), transparent 68%); }
.lp-mob .lp-phone { width: 270px; }
.lp-mob-front { z-index: 2; translate: 70px 0; }
.lp-mob .lp-phone.lp-mob-back { position: absolute; left: 50%; top: 46px; width: 240px; translate: -230px 0; rotate: -8deg; }
.lp-mob-back .lp-phone-screen { background: linear-gradient(180deg, #fbf3ff, #f4f0ff); }

/* экран сотрудника */
.lp-mob-push { display: flex; align-items: center; gap: 10px; padding: 10px; margin: 0 -4px 14px; border-radius: 16px; background: #fff; box-shadow: 0 12px 26px rgba(47, 34, 88, .14); animation: lp-float 6s ease-in-out infinite; }
.lp-mob-push > span { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: 14px; background: linear-gradient(135deg, #6d4fd1, #a26bff); }
.lp-mob-push b { display: block; font-size: 12.5px; }
.lp-mob-push small { display: block; font-size: 11px; color: var(--lp-muted); }
.lp-mob-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.lp-mob-top b { font-size: 18px; letter-spacing: -.02em; }
.lp-mob-top small { font-size: 11.5px; color: var(--lp-muted); font-weight: 600; }
.lp-mob-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.lp-mob-stats span { padding: 8px 10px; border-radius: 12px; background: #fff; }
.lp-mob-stats b { display: block; font-size: 17px; line-height: 1.1; color: var(--lp-violet); }
.lp-mob-stats small { display: block; font-size: 10.5px; color: var(--lp-muted); }
.lp-mob-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.lp-mob-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #fff; border-left: 3px solid var(--c); }
.lp-mob-list time { font-size: 11.5px; font-weight: 800; color: var(--lp-ink); min-width: 34px; }
.lp-mob-list b { display: block; font-size: 12px; }
.lp-mob-list small { display: block; font-size: 10.5px; color: var(--lp-muted); }
.lp-mob-tabs { display: flex; justify-content: space-around; padding: 10px 0 2px; border-top: 1px solid #ebe7f4; color: #b4aecb; font-size: 17px; }
.lp-mob-tabs .on { color: var(--lp-violet); }

/* экран клиента */
.lp-mob-hello { margin-bottom: 12px; }
.lp-mob-hello small { display: block; font-size: 11px; color: var(--lp-muted); }
.lp-mob-hello b { font-size: 18px; letter-spacing: -.02em; }
.lp-mob-next { padding: 14px; border-radius: 16px; margin-bottom: 10px; color: #fff; background: linear-gradient(135deg, #6d4fd1, #a26bff); box-shadow: 0 12px 24px rgba(109, 79, 209, .3); }
.lp-mob-next small { display: block; font-size: 10.5px; opacity: .8; }
.lp-mob-next b { display: block; font-size: 14px; margin: 2px 0 8px; }
.lp-mob-next span { display: flex; align-items: center; gap: 6px; font-size: 11px; opacity: .92; }
.lp-mob-bonus { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; margin-bottom: 12px; }
.lp-mob-bonus > .bi { font-size: 18px; color: #ec4899; }
.lp-mob-bonus div { flex: 1; }
.lp-mob-bonus small { display: block; font-size: 10.5px; color: var(--lp-muted); }
.lp-mob-bonus b { font-size: 15px; }
.lp-mob-bonus em { font-style: normal; font-size: 10.5px; font-weight: 800; color: #8a5a00; background: #fde9b0; border-radius: 999px; padding: 2px 8px; }

@media (max-width: 1199.98px) {
    .lp-mob-box { padding: 44px 36px; gap: 24px; }
    .lp-mob-front { translate: 50px 0; }
    .lp-mob .lp-phone.lp-mob-back { translate: -200px 0; }
}
@media (max-width: 991.98px) {
    .lp-mob { padding: 16px 0 72px; }
    .lp-mob-box { grid-template-columns: 1fr; gap: 12px; }
    .lp-mob-stage { min-height: 560px; }
}
@media (max-width: 575.98px) {
    .lp-mob { padding: 8px 0 56px; }
    .lp-mob-box { padding: 28px 18px 8px; border-radius: 24px; }
    .lp-mob-aud { grid-template-columns: 1fr; gap: 10px; margin: 20px 0 22px; }
    .lp-mob-aud article { padding: 16px; }
    .lp-mob-stage { min-height: 0; padding: 20px 0 24px; }
    .lp-mob-stage::before { width: 320px; height: 320px; }
    .lp-mob .lp-phone.lp-mob-front { width: min(270px, 100%); translate: 0 0; }
    .lp-mob .lp-phone.lp-mob-back { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lp-mob-push { animation: none; } }