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

.us { --u: calc(var(--vw, 1vw) * 100 / 1200); overflow-x: clip; }
.us-wrap { width: calc(1000 * var(--u)); margin: 0 auto; }
.us [style*="--w:"] { max-width: calc((var(--w) + 3) * var(--u)); } /* +3: в Tilda текст чуть шире поля */

.us-h2 { font-size: calc(50 * var(--u)); font-weight: 500; line-height: 1; letter-spacing: calc(-1.4 * var(--u)); color: #fff; }
.us-card__title { font-size: calc(24 * var(--u)); font-weight: 600; line-height: 1; }
.us-card__text { font-size: calc(12 * var(--u)); line-height: calc(13 * var(--u)); opacity: .7; }

.us-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.25;
    transition: background-color .2s ease-in-out, color .2s ease-in-out;
}

/* ---------- первый экран ---------- */
.us-hero {
    position: relative; overflow: hidden;
    padding: calc(142 * var(--u)) 0 calc(99 * var(--u));
    background: var(--c-bg); color: #000; text-align: center;
    border-radius: 0 0 calc(40 * var(--u)) calc(40 * var(--u));
}
.us-hero h1 { margin: 0 auto; font-size: calc(54 * var(--u)); font-weight: 500; line-height: 1; letter-spacing: calc(-1.4 * var(--u)); }
.us-hero__sub { margin: calc(21 * var(--u)) auto 0; font-size: calc(24 * var(--u)); font-weight: 500; line-height: 1; letter-spacing: calc(-.6 * var(--u)); }
.us-hero__btns { position: relative; z-index: 2; display: flex; justify-content: center; gap: calc(11 * var(--u)); margin-top: calc(40 * var(--u)); }
.us-hero__btns .us-btn { width: calc(195 * var(--u)); height: calc(34 * var(--u)); }
.us-btn--orange { background: var(--c-orange); color: #fff; }
.us-btn--orange:hover { background: var(--c-dark); }
.us-btn--outline { border: 1px solid var(--c-dark); color: var(--c-dark-2); }
.us-btn--outline:hover { background: var(--c-dark); color: #fff; }

/* ноутбук: мигающая подложка 2rr, полукруг 1rr и скриншот */
.us-hero__visual { position: relative; width: calc(695 * var(--u)); height: calc(367 * var(--u)); margin: calc(-39 * var(--u)) auto 0; }
.us-hero__visual img { position: absolute; display: block; height: auto; }
.us-hero__glow { left: 0; top: 0; width: 100%; animation: us-blink 5s linear infinite; }
.us-hero__arc { left: calc(75 * var(--u)); top: calc(74 * var(--u)); width: calc(545 * var(--u)); }
.us-hero__laptop { left: calc(92 * var(--u)); top: calc(73 * var(--u)); width: calc(510 * var(--u)); }
/* звёзды мерцают: появляются за 4 с и гаснут за 3 с, по кругу (как пошаговая анимация Tilda) */
.us-star { position: absolute; z-index: 1; height: auto; animation: us-twinkle 7s linear infinite; }
.us-star--1 { left: calc(50% + 280 * var(--u)); top: calc(231 * var(--u)); width: calc(142 * var(--u)); }
.us-star--2 { left: calc(50% - 343 * var(--u)); top: calc(231 * var(--u)); width: calc(54 * var(--u)); }
.us-star--3 { left: calc(50% - 480 * var(--u)); top: calc(433 * var(--u)); width: calc(54 * var(--u)); }
@keyframes us-twinkle { 0% { opacity: 0; } 57% { opacity: 1; } 100% { opacity: 0; } }
@keyframes us-blink { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .us-star, .us-hero__glow { animation: none; } }

/* ---------- что такое учетная система ---------- */
.us-what { position: relative; height: calc(657 * var(--u)); color: #fff; }
.us-what__bg {
    position: absolute; left: calc(50% - 831 * var(--u)); top: calc(22 * var(--u));
    width: calc(1662 * var(--u)); height: calc(615 * var(--u));
    background: url('../img/3732-386-Vector_Stroke.svg') center / contain no-repeat; opacity: .35; pointer-events: none;
}
.us-what .us-wrap { position: relative; height: 100%; }
.us-what__label { position: absolute; left: 0; top: calc(80 * var(--u)); font-size: calc(24 * var(--u)); font-weight: 600; line-height: 1; }
.us-what h2 { position: absolute; left: 0; top: calc(114 * var(--u)); width: calc(529 * var(--u)); line-height: calc(45 * var(--u)); }
.us-what--rev h2 { top: calc(80 * var(--u)); }
.us-what--rev .us-what__label { top: calc(130 * var(--u)); }
.us-what__photo { position: absolute; left: calc(301 * var(--u)); top: calc(172 * var(--u)); width: calc(270 * var(--u)); height: auto; border-radius: calc(20 * var(--u)); }
.us-what__text { position: absolute; left: calc(591 * var(--u)); top: calc(431 * var(--u)); width: calc(390 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); color: #fafafa; }

/* ---------- 6 преимуществ ---------- */
.us-adv { padding: calc(80 * var(--u)) 0; }
.us-adv__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(10 * var(--u)) calc(11 * var(--u)); margin-top: calc(40 * var(--u)); }
.us-adv__card { height: calc(220 * var(--u)); padding: calc(21 * var(--u)); background: #fff; border-radius: calc(20 * var(--u)); color: #000; }
.us-adv__card img { display: block; width: calc(50 * var(--u)); height: calc(50 * var(--u)); border-radius: calc(12 * var(--u)); box-shadow: 2px 2px 8px rgba(0, 0, 0, .1); }
.us-adv__card .us-card__title { margin: calc(10 * var(--u)) 0 0 1px; }
.us-adv__card .us-card__text { margin-top: calc(15 * var(--u)); }

/* ---------- выгоды: заголовок слева «прилипает» при прокрутке ---------- */
.us-ben { padding: calc(100 * var(--u)) 0 calc(80 * var(--u)); }
.us-ben .us-wrap { display: grid; grid-template-columns: 1fr calc(495 * var(--u)); align-items: start; }
.us-ben h2 { position: sticky; top: calc(var(--header-h) + 30px); }
.us-ben__list { display: grid; gap: calc(10 * var(--u)); }
.us-ben__card { min-height: calc(210 * var(--u)); padding: calc(32 * var(--u)); background: rgba(255, 255, 255, .11); border-radius: calc(20 * var(--u)); color: #fff; }
.us-ben__card:last-child { min-height: calc(180 * var(--u)); }
.us-ben__card img { display: block; width: calc(25 * var(--u)); height: calc(25 * var(--u)); border-radius: calc(6 * var(--u)); }
.us-ben__card .us-card__title { margin-top: calc(15 * var(--u)); }
.us-ben__card .us-card__text { margin-top: calc(20 * var(--u)); }

/* ---------- кому подходит ---------- */
.us-who { padding: calc(100 * var(--u)) 0; background: var(--c-bg); border-radius: calc(40 * var(--u)); color: #232323; }
.us-who .us-h2 { margin: 0 auto; color: #232323; text-align: center; line-height: calc(45 * var(--u)); }
.us-who__grid { display: grid; grid-template-columns: 411fr 74fr 495fr; gap: calc(10 * var(--u)); margin-top: calc(85 * var(--u)); }
.us-who__card { position: relative; overflow: hidden; height: calc(376 * var(--u)); background: #fff center / cover no-repeat; border-radius: calc(20 * var(--u)); }
.us-who__card--a { grid-column: 1 / 3; }
.us-who__card--b { grid-column: 3 / 4; }
.us-who__card--c { grid-column: 1 / 2; background-size: 113%; }
.us-who__card--d { grid-column: 2 / 4; }
.us-who__name { position: relative; margin: calc(24 * var(--u)) 0 0 calc(24 * var(--u)); font-size: calc(24 * var(--u)); font-weight: 600; line-height: calc(37 * var(--u)); letter-spacing: calc(-.6 * var(--u)); }
.us-who__sub { position: relative; margin: calc(10 * var(--u)) 0 0 calc(24 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(17 * var(--u)); letter-spacing: calc(.1 * var(--u)); opacity: .7; }
.us-who__card > img { position: absolute; display: block; height: auto; }
.us-who__card--a > img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.us-who__card--b .us-who__name { margin-top: calc(271 * var(--u)); }
.us-who__card--b > img { left: calc(38 * var(--u)); top: calc(14 * var(--u)); width: calc(420 * var(--u)); }
.us-who__card--d > img { left: calc(31 * var(--u)); bottom: 0; width: calc(510 * var(--u)); }

.us-banner {
    position: relative; overflow: hidden; height: calc(376 * var(--u)); margin-top: calc(10 * var(--u)); padding: calc(24 * var(--u));
    background: #15baaa url('../img/3564-643-Line.svg') center / cover no-repeat; border-radius: calc(20 * var(--u)); color: #fff;
}
.us-banner__logo { display: block; width: calc(85 * var(--u)); height: auto; }
.us-who .us-banner h2 { position: relative; z-index: 1; margin: calc(56 * var(--u)) 0 0; color: #fff; text-align: left; line-height: calc(45 * var(--u)); }
.us-banner mark { padding: 0 calc(5 * var(--u)); margin-left: calc(-4 * var(--u)); background: var(--c-green); color: #fff; border-radius: calc(10 * var(--u)); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.us-banner__sub { position: relative; margin-top: calc(29 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(17 * var(--u)); letter-spacing: calc(.1 * var(--u)); opacity: .7; }
.us-banner__phone { position: absolute; right: 0; top: 0; width: calc(442 * var(--u)); height: 100%; object-fit: cover; border-radius: calc(20 * var(--u)); }

/* ---------- как начать: лента карточек ---------- */
.us-start { padding-top: calc(80 * var(--u)); color: #fff; }
.us-start__head { display: flex; align-items: center; justify-content: space-between; }
.us-start__nav { display: flex; gap: calc(10 * var(--u)); }
.us-start__nav button {
    width: calc(50 * var(--u)); height: calc(50 * var(--u)); padding: 0; border: 0; border-radius: calc(10 * var(--u));
    background: var(--c-green); color: #fff; font-size: calc(40 * var(--u)); line-height: 1; cursor: pointer;
    transition: background-color .2s ease-in-out;
}
.us-start__nav button:hover { background: var(--c-orange); }
.us-start .carousel__track {
    display: flex; list-style: none; gap: calc(20 * var(--u)); overflow-x: auto; scrollbar-width: none;
    margin-top: calc(60 * var(--u)); padding: 0 calc(100 * var(--u)) calc(139 * var(--u));
    cursor: grab; user-select: none;
}
.us-start .carousel__track::-webkit-scrollbar { display: none; }
.us-start .carousel__track.is-dragging { cursor: grabbing; }
.us-step { flex: none; width: calc(320 * var(--u)); }
.us-step__img { display: block; width: 100%; height: calc(180 * var(--u)); border-radius: calc(6 * var(--u)); object-fit: cover; pointer-events: none; }
.us-step .us-card__title { margin-top: calc(15 * var(--u)); }
.us-step .us-card__text { margin-top: calc(20 * var(--u)); }
.us-step__btn { margin-top: calc(7 * var(--u)); width: calc(76 * var(--u)); height: calc(34 * var(--u)); background: #2a5958; color: #fff; line-height: 1.55; }
.us-step__btn:hover { background: #fff; color: #2a5958; }

/* ---------- частые вопросы (обычный блок Tilda — без масштабирования) ---------- */
.us-faq { padding: calc(100 * var(--u)) 0 90px; color: #fff; }
.us-faq .us-h2 { text-align: center; }
.us-faq__list { max-width: 1060px; margin: calc(41 * var(--u)) auto 0; padding: 0 20px; box-sizing: content-box; }
.us-faq .qa__a { margin-top: -5px; font-size: 16px; color: rgba(255, 255, 255, .5); }

/* ---------- попап «Оставьте заявку!» ---------- */
.us-popup .popup__box { padding: 40px 45px; border-radius: 24px; }
.us-popup .popup__title { font-size: 36px; font-weight: 500; line-height: 1.23; }
.us-popup__descr { margin-top: 10px; font-size: 16px; line-height: 1.55; text-align: center; }
.us-form { display: grid; gap: 25px; margin-top: 24px; }
.us-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;
}
.us-form input::placeholder { color: rgba(255, 255, 255, .5); }
.us-form input:focus { border-width: 2px; padding: 0 19px; }
.us-form .field--error input { border-color: #ff5a5a; }
.us-form .btn { width: 100%; height: 60px; border-radius: 5px; background: var(--c-green); color: #fff; font-size: 16px; }
.us-form .btn:hover { background: #00cf67; }
.us-form .btn[disabled] { opacity: .6; cursor: default; }
.us-form .form-msg--error { color: #ff7a7a; }

/* ---------- планшет и телефон: мобильный макет Tilda (320 px), масштаб не больше 1.6 ---------- */
@media (max-width: 959px) {
    .us { --u: min(calc(var(--vw, 1vw) * 100 / 320), 1.6px); }
    .us-wrap { width: calc(290 * var(--u)); }
    .us [style*="--wm:"] { max-width: calc((var(--wm) + 1) * var(--u)); }
    .us-h2 { font-size: calc(20 * var(--u)); line-height: 1; letter-spacing: calc(-.5 * var(--u)); text-align: center; }
    .us-adv .us-h2 { letter-spacing: calc(-1.4 * var(--u)); }
    .us-card__title { font-size: calc(12 * var(--u)); }
    .us-card__text { font-size: calc(10 * var(--u)); line-height: calc(12 * var(--u)); }
    .us-btn { border-radius: calc(7 * var(--u)); font-size: calc(10 * var(--u)); }

    .us-hero { padding: calc(106 * var(--u)) 0 calc(64 * var(--u)); border-radius: 0 0 calc(30 * var(--u)) calc(30 * var(--u)); }
    .us-hero h1 { min-height: calc(var(--hm) * var(--u)); font-size: calc(24 * var(--u)); }
    .us-hero__sub { margin-top: 0; min-height: calc(var(--hm) * var(--u)); font-size: calc(14 * var(--u)); }
    .us-hero__btns { flex-direction: column; align-items: center; gap: calc(5 * var(--u)); margin-top: calc(9 * var(--u)); }
    .us-hero__btns .us-btn { width: calc(170 * var(--u)); height: calc(27 * var(--u)); }
    .us-hero__visual { width: calc(300 * var(--u)); height: calc(169 * var(--u)); margin-top: calc(9 * var(--u)); }
    .us-hero__arc { left: calc(25 * var(--u)); top: calc(25 * var(--u)); width: calc(250 * var(--u)); }
    .us-hero__laptop { left: calc(20 * var(--u)); top: calc(19 * var(--u)); width: calc(260 * var(--u)); }
    .us-star--1 { display: none; }
    .us-star--2 { left: calc(50% - 70 * var(--u)); top: calc(62 * var(--u)); width: calc(26 * var(--u)); }
    .us-star--3 { left: calc(50% - 150 * var(--u)); top: calc(183 * var(--u)); width: calc(34 * var(--u)); }

    .us-what { height: auto; padding: calc(30 * var(--u)) 0 calc(29 * var(--u)); overflow: hidden; }
    .us-what__bg { left: calc(50% - 300 * var(--u)); top: calc(285 * var(--u)); width: calc(711 * var(--u)); height: calc(277 * var(--u)); }
    .us-what .us-wrap { height: auto; display: flex; flex-direction: column; align-items: center; }
    .us-what__label, .us-what h2, .us-what__text, .us-what__photo { position: relative; left: auto; top: auto; }
    .us-what__label { font-size: calc(12 * var(--u)); text-align: center; }
    .us-what h2 { width: auto; margin-top: calc(7 * var(--u)); line-height: calc(18 * var(--u)); }
    .us-what__text { width: 100%; margin-top: calc(10 * var(--u)); }
    .us-what--rev h2 { margin-top: 0; }
    .us-what--rev .us-what__label { margin-top: calc(5 * var(--u)); }
    .us-what--rev .us-what__text { margin-top: calc(8 * var(--u)); }
    .us-what__photo { order: 1; width: calc(200 * var(--u)); margin-top: calc(24 * var(--u)); }

    .us-adv { padding: calc(30 * var(--u)) 0; }
    .us-adv h2 { margin: 0 auto; }
    .us-adv__grid { grid-template-columns: 1fr; gap: calc(5 * var(--u)); margin-top: calc(20 * var(--u)); }
    .us-adv__card { height: calc(140 * var(--u)); padding: calc(16 * var(--u)); }
    .us-adv__card img { width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: calc(8 * var(--u)); }
    .us-adv__card .us-card__title { margin: calc(7 * var(--u)) 0 0; }
    .us-adv__card .us-card__text { margin-top: calc(10 * var(--u)); }

    .us-ben { padding: 0 0 calc(193 * var(--u)); }
    .us-ben .us-wrap { display: block; }
    .us .us-ben h2 {
        top: var(--header-h); z-index: 5; max-width: none; margin: 0 calc(-15 * var(--u));
        padding: calc(48 * var(--u)) calc((320 - var(--wm) - 2) / 2 * var(--u)) calc(10 * var(--u));
        background: var(--c-dark);
    }
    .us-ben__list { gap: calc(5 * var(--u)); }
    .us-ben__card, .us-ben__card:last-child { min-height: calc(137 * var(--u)); padding: calc(16 * var(--u)); border-radius: calc(10 * var(--u)); }
    .us-ben__card img { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
    .us-ben__card .us-card__title { margin-top: calc(10 * var(--u)); }
    .us-ben__card .us-card__text { margin-top: calc(15 * var(--u)); }

    .us-who { padding: calc(40 * var(--u)) 0 calc(59 * var(--u)); border-radius: calc(23 * var(--u)); }
    .us-who .us-h2 { line-height: calc(18 * var(--u)); }
    .us-who__grid { grid-template-columns: 1fr; margin-top: calc(39 * var(--u)); }
    .us-who__card { grid-column: auto !important; border-radius: calc(15 * var(--u)); }
    .us-who__card--a { height: calc(150 * var(--u)); }
    .us-who__card--b { height: calc(201 * var(--u)); border-radius: calc(20 * var(--u)); }
    .us-who__card--d { height: calc(150 * var(--u)); order: 1; border-radius: calc(20 * var(--u)); }
    .us-who__card--c { height: calc(170 * var(--u)); order: 2; border-radius: calc(20 * var(--u)); background-size: 126.1%; background-position: 48.177% 19.367%; }
    .us-who__name { margin: calc(13 * var(--u)) 0 0 calc(13 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1; }
    .us-who__sub { margin: calc(7 * var(--u)) 0 0 calc(13 * var(--u)); font-size: calc(9 * var(--u)); line-height: calc(13 * var(--u)); }
    .us-who__card--a > img { inset: auto; left: calc(48 * var(--u)); top: calc(2 * var(--u)); width: calc(195 * var(--u)); height: auto; }
    .us-who__card--a .us-who__name, .us-who__card--a .us-who__sub { z-index: 1; }
    .us-who__card--b .us-who__name { margin-top: calc(154 * var(--u)); }
    .us-who__card--b > img { left: calc(35 * var(--u)); top: calc(13 * var(--u)); width: calc(220 * var(--u)); }
    .us-who__card--d > img { left: calc(49 * var(--u)); width: calc(210 * var(--u)); }
    .us-banner { height: calc(333 * var(--u)); padding: calc(13 * var(--u)); }
    .us-banner__logo { width: calc(50 * var(--u)); }
    .us-who .us-banner h2 { margin-top: calc(24 * var(--u)); line-height: calc(18 * var(--u)); text-align: left; }
    .us-banner mark { padding: 0 calc(2 * var(--u)); margin-left: calc(-2 * var(--u)); border-radius: calc(6 * var(--u)); }
    .us-banner__sub { margin-top: calc(15 * var(--u)); font-size: calc(9 * var(--u)); line-height: calc(13 * var(--u)); }
    .us-banner__phone { left: calc(55 * var(--u)); right: auto; top: auto; bottom: 0; width: calc(236 * var(--u)); height: auto; }

    .us-start { padding-top: calc(30 * var(--u)); }
    .us-start__head { flex-direction: column; gap: calc(15 * var(--u)); }
    .us-start__nav { gap: calc(5 * var(--u)); }
    .us-start__nav button { width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: calc(6 * var(--u)); font-size: calc(10 * var(--u)); }
    .us-start .carousel__track { margin-top: calc(20 * var(--u)); padding: 0 calc(20 * var(--u)) calc(82 * var(--u)); scroll-snap-type: x mandatory; scroll-padding: 0 calc(20 * var(--u)); }
    .us-step { width: calc(280 * var(--u)); scroll-snap-align: start; }
    .us-step__img { height: calc(142 * var(--u)); }
    .us-step .us-card__title { margin-top: calc(10 * var(--u)); }
    .us-step .us-card__text { margin-top: calc(15 * var(--u)); }
    .us-step__btn { margin-top: calc(13 * var(--u)); width: calc(68 * var(--u)); height: calc(22 * var(--u)); border-radius: calc(5 * var(--u)); line-height: 1.55; }

    .us-faq { padding: calc(30 * var(--u)) 0 60px; }
    .us-faq__list { margin-top: 20px; }
    .us-faq .qa__a { font-size: 12px; }

    .us-popup .popup__box { padding: 40px 20px 30px; }
    .us-popup .popup__title { font-size: 26px; }
    .us-form { gap: 16px; }
    .us-form input, .us-form .btn { height: 50px; }
}