/* Страница «Программа лояльности» (ru/sistema-loyalnosti, kz/sistema-loyalnosti).
   Как Zero-блоки Tilda, макет масштабируется под ширину окна: размеры заданы в долях --u
   (десктоп — макет 1200 px, телефон и планшет — 320 px, масштаб не больше 1.6).
   Ширины текстов (--w / --wm) взяты из Tilda, чтобы строки переносились там же. */

.lo { --u: calc(var(--vw, 1vw) * 100 / 1200); overflow-x: clip; color: #fff; }
.lo [style*="--w:"] { max-width: calc((var(--w) + 3) * var(--u)); } /* +3: в Tilda текст чуть шире поля */
.lo-pos { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--pw) * var(--u)); height: auto; }

.lo-h2 { font-size: calc(50 * var(--u)); font-weight: 500; line-height: 1; letter-spacing: calc(-1.4 * var(--u)); white-space: nowrap; }

.lo-btn {
    display: inline-flex; align-items: center; justify-content: center; border-radius: calc(10 * var(--u));
    font-size: calc(12 * var(--u)); line-height: 1.55; text-align: center;
    transition: background-color .2s ease-in-out, color .2s ease-in-out;
}
.lo-btn--dark { width: calc(195 * var(--u)); height: calc(40 * var(--u)); background: var(--c-dark); color: #fff; }
.lo-btn--dark:hover { background: #fff; color: var(--c-dark); }
.lo-btn--teal { width: calc(165 * var(--u)); height: calc(38 * var(--u)); background: var(--c-teal); color: #fff; }
.lo-btn--indigo { width: calc(200 * var(--u)); height: calc(38 * var(--u)); background: #313f73; color: #fff; }
.lo-btn--teal:hover, .lo-btn--indigo:hover { background: #2a5958; }

/* ---------- первый экран: светлый лист, карточка с заголовком и фото ---------- */
.lo-hero {
    display: grid; grid-template-columns: 640fr 340fr; gap: calc(20 * var(--u));
    padding: calc(120 * var(--u)) calc(50% - 500 * var(--u)) calc(90 * var(--u));
    background: var(--c-bg); border-radius: 0 0 calc(40 * var(--u)) calc(40 * var(--u)); color: #000;
}
.lo-hero__card {
    display: flex; flex-direction: column; align-items: center; height: calc(510 * var(--u)); padding-top: calc(40 * var(--u));
    background: #fff url('../img/6131-343-photo.svg') center / cover no-repeat; border-radius: calc(20 * var(--u)); text-align: center;
}
.lo-hero h1 { font-size: calc(50 * var(--u)); font-weight: 500; line-height: 1; letter-spacing: calc(-1.4 * var(--u)); }
.lo-hero__text { margin-top: calc(20 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1.55; }
.lo-hero .lo-btn { margin-top: calc(20 * var(--u)); }
.lo-hero__photo { width: 100%; height: calc(510 * var(--u)); object-fit: cover; border-radius: calc(20 * var(--u)); }

/* ---------- почему это работает ---------- */
.lo-why { width: calc(1000 * var(--u)); margin: 0 auto; padding: calc(80 * var(--u)) 0; }
.lo-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, calc(235 * var(--u))); gap: calc(10 * var(--u)) calc(11 * var(--u)); margin-top: calc(90 * var(--u)); }
.lo-why__card { position: relative; overflow: hidden; padding: calc(24 * var(--u)); background: #1c4e4d center / cover no-repeat; border-radius: calc(20 * var(--u)); }
.lo-why__card--a, .lo-why__card--b { background-color: #fff; }
.lo-why__card--b { padding-left: calc(22 * var(--u)); }
.lo-why__card--c { grid-row: 1 / 3; grid-column: 3; display: flex; align-items: flex-end; background-image: url('../img/3032-623-2.svg'); }
.lo-why__card--d { grid-column: 1 / 3; background-image: url('../img/3365-343-5.svg'); }
.lo-why__card--d .lo-why__text { position: absolute; left: calc(385 * var(--u)); top: calc(139 * var(--u)); }
.lo-why__text { position: relative; z-index: 1; font-size: calc(24 * var(--u)); font-weight: 600; line-height: 1; }
.lo-why__text span { color: rgba(255, 255, 255, .7); }
.lo-why__text--purple { color: #821dff; }
.lo-why__text--orange { color: var(--c-orange); }
.lo-why__text--purple span, .lo-why__text--orange span { color: rgba(0, 0, 0, .7); }

/* ---------- кому подойдёт: вкладки и фото ---------- */
.lo-who { width: calc(1000 * var(--u)); margin: 0 auto; padding: calc(80 * var(--u)) 0; }
.lo-who__body { display: grid; grid-template-columns: calc(540 * var(--u)) calc(400 * var(--u)); gap: calc(40 * var(--u)); margin-top: calc(40 * var(--u)); }
.lo-who__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: calc(20 * var(--u)); }
.lo-tab {
    display: flex; flex-direction: column; align-items: flex-start; height: calc(260 * var(--u)); padding: calc(24 * var(--u)) 0 0 calc(24 * var(--u));
    border: 0; border-radius: calc(20 * var(--u)); background: center / cover no-repeat; color: #1c4e4d; text-align: left; cursor: pointer;
    transition: transform .2s ease-in-out;
}
.lo-tab:hover { transform: translateY(-2px); }
.lo-tab[aria-selected="true"] { background-color: #1c4e4d; color: #fafafa; cursor: default; transform: none; }
.lo-tab--retail { background-image: url('../img/6263-323-Frame_2087326043.svg'); }
.lo-tab--cafe { background-image: url('../img/3266-303-Frame_2087326044.svg'); }
.lo-tab--salon { background-image: url('../img/3433-633-Frame_2087326046.svg'); }
.lo-tab--auto { background-image: url('../img/6563-306-Frame_2087326047.svg'); }
.lo-tab--retail[aria-selected="true"] { background-image: url('../img/3562-343-photo.svg'); }
.lo-tab--cafe[aria-selected="true"] { background-image: url('../img/6237-653-photo.svg'); }
.lo-tab--salon[aria-selected="true"] { background-image: url('../img/3931-323-photo.svg'); }
.lo-tab--auto[aria-selected="true"] { background-image: url('../img/6564-336-photo.svg'); }
.lo-tab__icon { width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(8 * var(--u)); }
.lo-tab[aria-selected="true"] .lo-tab__icon--off, .lo-tab[aria-selected="false"] .lo-tab__icon--on { display: none; }
.lo-tab__title { margin-top: calc(15 * var(--u)); font-size: calc(24 * var(--u)); font-weight: 600; line-height: 1; }
.lo-tab__title:not([style*="--w:"]) { white-space: nowrap; }
.lo-tab__text { margin-top: calc(10 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.55; opacity: .7; }

.lo-panel { position: relative; overflow: hidden; height: calc(540 * var(--u)); padding: calc(24 * var(--u)); border-radius: calc(20 * var(--u)); }
.lo-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lo-panel p { position: relative; white-space: nowrap; }
.lo-panel__title { font-size: calc(24 * var(--u)); font-weight: 600; line-height: 1; }
.lo-panel__text { margin-top: calc(10 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.55; opacity: .7; }
.lo-panel--retail { display: flex; flex-direction: column; justify-content: flex-end; color: #003635; }

/* ---------- что вы получите ---------- */
.lo-get { width: calc(1000 * var(--u)); margin: 0 auto; padding: calc(80 * var(--u)) 0 calc(43 * var(--u)); text-align: center; }
.lo-get .lo-h2 { line-height: .9; }
.lo-get__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(10.33 * var(--u)); margin-top: calc(40 * var(--u)); }
.lo-get__list li {
    display: flex; align-items: center; justify-content: center; aspect-ratio: 1;
    background: #1c4e4d; border-radius: 50%; color: #fafafa; font-size: calc(24 * var(--u)); font-weight: 600; line-height: 1;
}

/* ---------- стоимость ---------- */
.lo-price { padding-bottom: calc(87 * var(--u)); }
.lo-price__card {
    display: grid; grid-template-columns: calc(422 * var(--u)) 1fr; column-gap: calc(38 * var(--u)); align-items: start; align-content: start;
    width: calc(1000 * var(--u)); height: calc(492 * var(--u)); margin: 0 auto; padding: calc(40 * var(--u)) 0 0 calc(60 * var(--u));
    background: #0f3f45 url('../img/3132-646-Frame_2087325611.webp') center / cover no-repeat; border-radius: calc(20 * var(--u));
    box-shadow: 0 9px 29px rgba(8, 43, 42, .3); color: #fafafa;
}
.lo-price__title { grid-column: 1 / -1; font-size: calc(36 * var(--u)); font-weight: 500; line-height: 1; }
.lo-price__plans { display: grid; gap: calc(10 * var(--u)); margin-top: calc(30 * var(--u)); }
.lo-plan { display: flex; flex-direction: column; height: calc(85 * var(--u)); padding: calc(21 * var(--u)); border-radius: calc(20 * var(--u)); box-shadow: 0 9px 29px rgba(8, 43, 42, .08); }
.lo-plan span { font-size: calc(12 * var(--u)); line-height: 1.55; opacity: .7; }
.lo-plan strong { font-size: calc(24 * var(--u)); font-weight: 600; line-height: 1; white-space: nowrap; }
.lo-plan--base { background: rgba(124, 160, 255, .05); }
.lo-plan--half { background: rgba(49, 63, 115, .25); }
.lo-plan--year { background: rgba(124, 160, 255, .25); }
.lo-price__start { margin-top: calc(30 * var(--u)); }
.lo-price__ready { font-size: calc(18 * var(--u)); line-height: 1.55; white-space: nowrap; }
.lo-price__ready span { opacity: .7; }
.lo-price__start > .lo-btn { margin-top: calc(7 * var(--u)); }
.lo-price__apps { display: flex; align-items: center; gap: calc(5 * var(--u)); margin-top: calc(10 * var(--u)); }
.lo-price__apps .lo-btn { margin-right: calc(10 * var(--u)); }
.lo-price__apps img { width: calc(45 * var(--u)); height: calc(45 * var(--u)); border-radius: 50%; box-shadow: 1px 3px 6px rgba(0, 0, 0, .3); }
.lo-price__help { display: inline-block; margin-top: calc(14 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.55; transition: opacity .3s; }
.lo-price__help:hover { opacity: .7; }

/* ---------- попап «Оставьте заявку!» (форма — как на странице «Учетная система») ---------- */
.lo-popup .popup__box { padding: 40px 45px; border-radius: 24px; }
.lo-popup .popup__title { font-size: 36px; font-weight: 500; line-height: 1.23; }
.lo-popup__descr { margin-top: 10px; font-size: 16px; line-height: 1.55; text-align: center; }
.lo-form { display: grid; gap: 25px; margin-top: 24px; }
.lo-form input {
    width: 100%; height: 60px; padding: 0 20px; border: 1px solid #fff; border-radius: 5px;
    background: transparent; color: #fff; font: inherit; font-size: 16px; outline: 0;
}
.lo-form input::placeholder { color: rgba(255, 255, 255, .5); }
.lo-form input:focus { border-width: 2px; padding: 0 19px; }
.lo-form .field--error input { border-color: #ff5a5a; }
.lo-form .btn { width: 100%; height: 60px; border-radius: 5px; background: var(--c-green); color: #fff; font-size: 16px; }
.lo-form .btn:hover { background: #00cf67; }
.lo-form .btn[disabled] { opacity: .6; cursor: default; }
.lo-form .form-msg--error { color: #ff7a7a; }


/* ---------- /kz: тексты длиннее — другие кегли и места (как в Tilda) ---------- */
.lo--kz .lo-hero h1 { font-size: calc(48 * var(--u)); }
.lo--kz .lo-why__card--d .lo-why__text { left: calc(423 * var(--u)); top: calc(115 * var(--u)); }
.lo--kz .lo-tab__title { white-space: normal; }
.lo--kz .lo-tab__title + .lo-tab__text { margin-top: calc(10 * var(--u)); }
.lo--kz .lo-plan span, .lo--kz .lo-price__ready, .lo--kz .lo-price__help { line-height: 1.25; }
.lo--kz .lo-price__apps .lo-btn { width: calc(216 * var(--u)); }

/* ---------- планшет и телефон: мобильный макет Tilda (320 px), масштаб не больше 1.6 ---------- */
@media (max-width: 959px) {
    .lo { --u: min(calc(var(--vw, 1vw) * 100 / 320), 1.6px); }
    .lo [style*="--wm:"] { max-width: calc((var(--wm) + 1) * var(--u)); }
    .lo-pos { left: calc(var(--xm) * var(--u)); top: calc(var(--ym) * var(--u)); width: calc(var(--pwm) * var(--u)); }
    .lo-h2 { font-size: calc(20 * var(--u)); text-align: center; }
    .lo-btn { border-radius: calc(5 * var(--u)); font-size: calc(9 * var(--u)); }

    .lo-hero { grid-template-columns: 1fr; gap: calc(5 * var(--u)); padding: calc(75 * var(--u)) calc(50% - 145 * var(--u)) calc(47 * var(--u)); border-radius: 0 0 calc(30 * var(--u)) calc(30 * var(--u)); }
    .lo-hero__photo { order: -1; height: calc(335 * var(--u)); border-radius: calc(16 * var(--u)); }
    .lo-hero__card { height: calc(248 * var(--u)); padding-top: calc(24 * var(--u)); background-size: 107.316%; border-radius: calc(16 * var(--u)); }
    .lo-hero h1 { font-size: calc(24 * var(--u)); }
    .lo-hero__text { margin-top: calc(10 * var(--u)); font-size: calc(10 * var(--u)); }
    .lo-hero .lo-btn { width: calc(170 * var(--u)); height: calc(27 * var(--u)); margin-top: calc(9 * var(--u)); border-radius: calc(7 * var(--u)); font-size: calc(10 * var(--u)); }

    .lo-why { width: calc(292 * var(--u)); padding: calc(30 * var(--u)) 0; }
    .lo-why__grid { grid-template-columns: 1fr 1fr; grid-template-rows: calc(130 * var(--u)) calc(135 * var(--u)) calc(100 * var(--u)); gap: calc(5 * var(--u)) calc(6 * var(--u)); margin-top: calc(20 * var(--u)); }
    .lo-why__card { padding: calc(12 * var(--u)); border-radius: calc(12 * var(--u)); }
    .lo-why__card--c { grid-row: 2; grid-column: 1 / 3; align-items: flex-start; background-size: 100%; }
    .lo-why__card--d { grid-row: 3; margin-top: calc(31 * var(--u)); padding: calc(16 * var(--u)); overflow: visible; }
    .lo-why__card--d .lo-why__text { position: relative; left: auto; top: auto; white-space: nowrap; }
    .lo-why__text { font-size: calc(12 * var(--u)); }

    .lo-who { width: calc(290 * var(--u)); padding: calc(30 * var(--u)) 0 calc(31 * var(--u)); }
    .lo-who__body { grid-template-columns: 1fr; gap: calc(10 * var(--u)); margin-top: calc(20 * var(--u)); }
    .lo-who__tabs { gap: calc(10 * var(--u)); }
    .lo-tab { align-items: center; justify-content: center; height: calc(52 * var(--u)); padding: 0 calc(8 * var(--u)); background-size: 128.4%; border-radius: calc(12 * var(--u)); text-align: center; }
    .lo-tab__icon, .lo-tab__text { display: none !important; }
    .lo-tab__title { margin-top: 0; font-size: calc(14 * var(--u)); }
    .lo-panel { height: calc(350 * var(--u)); padding: calc(20 * var(--u)); border-radius: calc(12 * var(--u)); }
    .lo-panel__title { font-size: calc(12 * var(--u)); }
    .lo-panel__text { margin-top: calc(4 * var(--u)); font-size: calc(8 * var(--u)); }

    .lo-get { width: calc(290 * var(--u)); padding: calc(30 * var(--u)) 0 calc(28 * var(--u)); }
    .lo-get__list { grid-template-columns: 1fr 1fr; gap: calc(5 * var(--u)) calc(6 * var(--u)); margin-top: calc(20 * var(--u)); }
    .lo-get__list li { font-size: calc(14 * var(--u)); }
    .lo-tab__title:not([style*="--w:"]) { white-space: normal; }

    .lo-price { padding-bottom: calc(40 * var(--u)); }
    .lo-price__card { display: block; width: calc(290 * var(--u)); height: auto; min-height: calc(414 * var(--u)); padding: calc(24 * var(--u)) calc(24 * var(--u)) calc(20 * var(--u)); border-radius: calc(10 * var(--u)); }
    .lo-price__title { margin: 0 auto; font-size: calc(14 * var(--u)); text-align: center; }
    .lo-price__plans { gap: calc(5 * var(--u)); margin-top: calc(15 * var(--u)); }
    .lo-plan { align-items: center; justify-content: center; height: calc(55 * var(--u)); padding: 0; border-radius: calc(10 * var(--u)); }
    .lo-plan span { font-size: calc(9 * var(--u)); }
    .lo-plan strong { margin-top: calc(2 * var(--u)); font-size: calc(12 * var(--u)); }
    .lo-price__start { margin-top: calc(20 * var(--u)); }
    .lo-price__ready { font-size: calc(10 * var(--u)); opacity: .7; }
    .lo-price__start > .lo-btn { width: calc(130 * var(--u)); height: calc(32 * var(--u)); margin-top: calc(8 * var(--u)); }
    .lo-price__apps { gap: calc(3 * var(--u)); margin-top: calc(5 * var(--u)); }
    .lo-price__apps .lo-btn { width: calc(155 * var(--u)); height: calc(32 * var(--u)); margin-right: calc(2 * var(--u)); }
    .lo-price__apps img { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
    .lo-price__help { margin-top: calc(10 * var(--u)); font-size: calc(8 * var(--u)); }
    .lo--kz .lo-hero h1 { font-size: calc(22 * var(--u)); }
    .lo--kz .lo-why__card--d .lo-why__text { left: auto; top: auto; white-space: normal; }
    .lo--kz .lo-why__card--d { padding-top: calc(12 * var(--u)); }
    .lo--kz .lo-price__apps .lo-btn { width: calc(155 * var(--u)); font-size: calc(8 * var(--u)); }
}

@media (max-width: 639px) {
    .lo-popup .popup__box { padding: 30px 20px; }
    .lo-popup .popup__title { font-size: 26px; }
}