/* ============================================================
   ALTYN Ломбард — главная страница (v3)
   Дизайн-система снята с goroda.pro по computed styles:
   шрифт Onest, fluid-rem, палитра base/accent, радиусы 1 / 1.6 / 2.4 / 4rem,
   контент ограничен шириной 140rem (как у референса: 1400px на 1440, 1587px на 1920).
   Отличие по rules.txt: минимальный размер текста — 1.6rem (>=16px на любой ширине).
   Новые блоки (этапы, статья, команда, FAQ) — в sections-v3.css.
   ============================================================ */

/* ---------- 1. Корневой масштаб (как у референса) ---------- */
html{font-size:12px;height:100%;-webkit-text-size-adjust:100%;scroll-padding-top:11rem}
@media (max-width:1920.98px){ html{ font-size:max(10px, calc(6px + 0.27778vw)); } }
@media (max-width:1439.98px){ html{ font-size:10px; } }
@media (max-width:1279.98px){ html{ font-size:clamp(10px, 1.30444vw, 12px); } }
@media (max-width:767.98px){  html{ font-size:10px; } }

:root{
  --base-font:"Onest","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --base-0:#fff; --base-50:#f1f1f1; --base-100:#e2e2e3; --base-300:#a7a7ac;
  --base-400:#697180; --base-500:#6d6d75; --base-700:#4c4d52; --base-900:#272a2f;
  --accent-100:#fbd2d3; --accent-200:#f8a4a7; --accent-300:#f4777b;
  --accent-500:#ed1c23; --accent-600:#be161c; --accent-700:#8e1115;
  --ok-50:#e9f6ef; --ok-700:#0f7a4b;   /* цена выкупа: красный читался как ошибка */
  --wa:#25d366; --wa-dark:#1da851; --gold:#f5b400;
  --opacity-white-10:#ffffff1a; --opacity-white-20:#ffffff33; --opacity-white-30:#ffffff4d;
  --opacity-white-60:#ffffff99; --opacity-white-80:#ffffffcc;
  /* единая шкала скруглений (22.09): кнопки, поля, вкладки, теги — --r-md; вложенные поверхности — --r-lg;
     все карточки и панели — --r-xl; --r-sm — элемент внутри контрола, --r-xs — чекбокс и знак логотипа */
  --r-xs:.6rem; --r-sm:1rem; --r-md:1.2rem; --r-lg:1.6rem; --r-xl:2.4rem;
  --pad-x:2rem;
  --content:140rem;
  --header-h:9.4rem;
  --section-gap:10rem;
  --shadow-row:.2rem .5rem .8rem rgba(0,0,0,.06);
  --ease:.3s cubic-bezier(.22,.61,.36,1);
  --ease-slow:.6s cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Сброс ---------- */
*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote,table{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}

body{
  font-family:var(--base-font);font-size:1.6rem;line-height:1.15;font-weight:400;
  color:var(--base-900);background:var(--base-0);-webkit-font-smoothing:antialiased;
  padding-top:var(--header-h);overflow-x:hidden;
}
body.is-locked{overflow:hidden}
/* горизонтальная прокрутка на мобилке: обрезаем по ширине и html, и body; clip (в отличие от hidden)
   не делает body контейнером прокрутки — липкие боковые карточки продолжают работать */
@supports (overflow:clip){ html,body{overflow-x:clip} }
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:5000;background:var(--base-900);color:#fff;padding:1.2rem 2rem;border-radius:0 0 var(--r-md) 0}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--accent-500);outline-offset:2px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:2rem;height:2rem;flex:none}
.icon--sm{width:1.8rem;height:1.8rem}
.icon--xs{width:1.4rem;height:1.4rem}
.icon--lg{width:2.4rem;height:2.4rem}
.num{font-variant-numeric:tabular-nums}

/* ---------- 3. Контейнеры ---------- */
.container{width:100%;max-width:calc(var(--content) + var(--pad-x) * 2);margin-inline:auto;padding-inline:var(--pad-x)}
.container--wide{max-width:192rem;padding-inline:4rem}
.section{margin-bottom:var(--section-gap)}
.page__container{padding-top:6.4rem}
@media (max-width:1279.98px){ .container--wide{padding-inline:2rem} }
@media (max-width:767.98px){
  :root{--section-gap:5.6rem}
  /* 28.09: от шапки до H1 было ~28px плюс воздух самой шапки — первый экран начинался с пустоты; теперь 12px */
  .page__container{padding-top:1.2rem}
}

/* ---------- 4. Заголовки блоков ---------- */
.block-heading{display:flex;justify-content:center;margin-bottom:4rem}
.block-heading__title{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.9rem;text-align:center;
  font-size:4rem;line-height:1;letter-spacing:-.0225em;font-weight:600;
}
.h-accent{color:var(--accent-500);border-bottom:.2rem solid var(--accent-500);line-height:1.05}
.h-drop{display:inline-flex;align-items:center;gap:.8rem;color:var(--accent-500)}
.h-drop__caret{transition:transform var(--ease)}
.h-drop[aria-expanded="true"] .h-drop__caret{transform:rotate(180deg)}
.h-drop__label{border-bottom:.2rem solid var(--accent-500);line-height:1.05}
@media (max-width:1279.98px){ .block-heading__title{font-size:2.8rem} }
@media (max-width:767.98px){
  .block-heading{margin-bottom:2.4rem}
  .block-heading__title{font-size:2.4rem}
}

/* ---------- 5. Кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.8rem;
  height:4.4rem;padding-inline:2rem;border-radius:var(--r-md);
  font-size:1.6rem;font-weight:500;letter-spacing:-.01em;white-space:nowrap;cursor:pointer;
  transition:background var(--ease),color var(--ease),border-color var(--ease),transform .15s ease;
}
.btn:active{transform:scale(.985)}
.btn--lg{height:5.2rem;padding-inline:2.8rem}
.btn--sm{height:3.8rem;padding-inline:1.6rem}
.btn--block{width:100%}
.btn--primary{background:var(--accent-500);color:#fff}
.btn--primary:hover{background:var(--accent-600)}
.btn--dark{background:var(--base-700);color:#fff}
.btn--dark:hover{background:var(--base-900)}
.btn--outline{background:#fff;color:var(--base-900);border:.1rem solid var(--base-100)}
.btn--outline:hover{background:var(--base-50)}
.btn--white{background:#fff;color:var(--base-900)}
.btn--white:hover{background:var(--base-50)}
.btn--ghost{background:var(--opacity-white-20);color:#fff}
.btn--ghost:hover{background:var(--opacity-white-30)}
.btn--wa{background:var(--wa);color:#fff}
.btn--wa:hover{background:var(--wa-dark)}
.btn--icon{width:4.4rem;padding:0}
.btn--square{width:4.4rem;height:4.4rem;padding:0;border-radius:var(--r-md);border:.1rem solid var(--base-100);background:#fff;color:var(--base-900)}
.btn--square:hover{background:var(--base-50)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:3.2rem;height:3.2rem;border-radius:var(--r-sm);color:inherit;transition:background var(--ease)}
.icon-btn:hover{background:var(--opacity-white-20)}

/* ---------- 6. Хедер ---------- */
.header{position:fixed;inset:0 0 auto;z-index:100;background:#fff;transition:transform var(--ease)}
.header.is-hidden{transform:translateY(-100%)}
.header.is-scrolled{box-shadow:0 .1rem 0 var(--base-100)}
.header__top{background:var(--accent-500);color:#fff;height:3rem}
.header__top-in{display:flex;align-items:center;justify-content:space-between;height:3rem}
.htop__right{display:flex;align-items:center;gap:1.6rem}
.htop__icons{display:flex;align-items:center;gap:.4rem}
.htop__phone{font-size:1.6rem;font-weight:500;letter-spacing:-.01em}
.header__nav{height:6.4rem}
.hnav__in{display:flex;align-items:center;gap:3.2rem;height:6.4rem}
.logo{display:inline-flex;align-items:center;gap:1rem;flex:none}
/* 02.10: логотип Topcash (assets/img/logo-topcash.svg, 6,2:1) вместо заглушки «квадрат + ALTYN»;
   .logo__sign — знак «O» для самых узких телефонов, где вордмарк не помещается рядом с номером */
.logo__img{display:block;height:2.8rem;width:auto;flex:none}
.logo__sign{display:none;width:3.2rem;height:3.2rem;flex:none}
.menu{flex:1;min-width:0}
.menu__list{display:flex;align-items:center;gap:2.4rem}
.menu__link{display:inline-flex;align-items:center;gap:.6rem;font-size:1.6rem;font-weight:500;letter-spacing:-.01em;padding-block:.8rem;transition:color var(--ease)}
.menu__link:hover,.menu__link[aria-expanded="true"]{color:var(--accent-500)}
.hnav__tools{display:flex;align-items:center;gap:.8rem;margin-left:auto;flex:none}

.picker{position:relative}
.picker__btn{display:inline-flex;align-items:center;gap:.6rem;font-size:1.6rem;font-weight:500;letter-spacing:-.01em;color:inherit;padding:.4rem .2rem}
.picker__btn .icon--xs{transition:transform var(--ease)}
.picker__btn[aria-expanded="true"] .icon--xs{transform:rotate(180deg)}
.picker__menu{
  position:absolute;top:calc(100% + .8rem);left:0;z-index:60;min-width:18rem;max-height:32rem;overflow-y:auto;
  background:#fff;color:var(--base-900);border:.1rem solid var(--base-100);
  border-radius:var(--r-lg);padding:.8rem;box-shadow:0 1.2rem 3.2rem #272a2f1f;
}
.picker--right .picker__menu{left:auto;right:0}
.picker__menu button,.picker__menu a[role="option"]{display:block;width:100%;text-align:left;padding:1rem 1.2rem;border-radius:var(--r-sm);font-size:1.6rem;font-weight:500;white-space:nowrap;transition:background var(--ease)}
.picker__menu button:hover,.picker__menu a[role="option"]:hover{background:var(--base-50)}
.picker__menu button[aria-selected="true"],.picker__menu a[aria-selected="true"]{color:var(--accent-500)}

.mega{position:fixed;top:var(--header-h);left:0;right:0;z-index:99;background:#fff;border-top:.1rem solid var(--base-100);box-shadow:0 2.4rem 4.8rem #272a2f1f;padding-block:3.2rem 4rem}
.mega[hidden]{display:none}
.mega__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3.2rem}
.mega__title{font-size:1.6rem;font-weight:600;color:var(--accent-500);margin-bottom:1.2rem}
.mega__col a{display:block;padding:.6rem 0;font-size:1.6rem;color:var(--base-700);transition:color var(--ease)}
.mega__col a:hover{color:var(--accent-500)}

@media (max-width:1279.98px){
  :root{--header-h:8.2rem}
  .header__top{border-radius:0 0 var(--r-md) var(--r-md)}
  .header__nav,.hnav__in{height:5.2rem}
  .menu,.mega{display:none!important}
}
.hnav__city{display:none}
.hnav__phone{display:none}
/* телефон: одна полоса — лого (уменьшено), номер целиком, город (только гео-метка), бургер. Язык, поиск и WhatsApp — в бургере */
@media (max-width:767.98px){
  :root{--header-h:5.6rem}
  .header__top{display:none}
  .header__nav,.hnav__in{height:5.6rem}
  .hnav__in{gap:.8rem}
  .logo__img{height:2.2rem}
  .hnav__wa{display:none}
  .hnav__phone{display:inline-flex;align-items:center;font-size:1.6rem;font-weight:600;letter-spacing:-.01em;color:var(--base-900);white-space:nowrap}
  .hnav__city{display:block}
  .hnav__city .picker__btn{width:4rem;height:4rem;padding:0;justify-content:center;border-radius:var(--r-md);background:var(--base-50)}
  .hnav__city .picker__btn>.icon--xs:first-child{color:var(--accent-500)}
  .hnav__city [data-picker-value],.hnav__city .picker__btn>.icon--xs:last-child{display:none}
  .hnav__tools{gap:.4rem}
}
/* узкие телефоны (<=400): держим одну строку шапки без переполнения — поля и зазоры уже, шрифты не меньше 16px */
@media (max-width:400px){
  .container--wide{padding-inline:1.2rem}
  .hnav__in{gap:.6rem}
  .hnav__phone{letter-spacing:-.02em}
  .logo__img{height:2rem}
  .mobilebar__item{white-space:nowrap}
}
/* на самых узких телефонах (<360) номер оставляем целиком и 16px (rules.txt), место освобождаем логотипом и кнопками */
@media (max-width:359.98px){
  /* только в шапке: в меню и подвале вордмарк остаётся */
  .header .logo__img{display:none}
  .header .logo__sign{display:block;width:3rem;height:3rem}
  .hnav__city .picker__btn,.hnav__tools .icon-btn{width:3.6rem;height:3.6rem}
  .hnav__in{gap:.4rem}
}

/* ---------- 7. Hero ---------- */
.hero{padding-inline:11.7rem;margin-bottom:var(--section-gap)}
.hero__title{font-size:5.2rem;line-height:1;letter-spacing:-.0225em;font-weight:600;text-align:center;margin-bottom:4rem}
.hero__row{display:block}
.hero__drop{position:relative;display:inline-flex}
.hero__menu{
  position:absolute;top:calc(100% + 1.2rem);left:50%;transform:translateX(-50%);z-index:70;min-width:22rem;
  background:#fff;border:.1rem solid var(--base-100);border-radius:var(--r-lg);padding:.8rem;box-shadow:0 1.6rem 4rem #272a2f24;
  font-size:1.6rem;letter-spacing:normal;
}
.hero__menu button{display:block;width:100%;text-align:left;padding:1rem 1.2rem;border-radius:var(--r-sm);font-size:1.6rem;font-weight:500;color:var(--base-900)}
.hero__menu button:hover{background:var(--base-50)}
.hero__menu button[aria-selected="true"]{color:var(--accent-500)}

/* Одна CTA вместо строки фильтров (правка лида, как у lombard-b.kz): расчёт — в калькуляторе.
   Кнопка чуть «дышит» (масштаб 2,5% + мягкое свечение) и раз в ~4 секунды по ней пробегает блик. */
.hero__cta{display:flex;flex-direction:column;align-items:center;gap:1.6rem;margin-bottom:5.6rem}
.hero__note{font-size:1.6rem;line-height:1.35;color:var(--base-500);text-align:center}
.btn--xl{height:6.4rem;padding-inline:4rem;border-radius:var(--r-md);font-size:1.8rem;font-weight:600;gap:1.2rem}
.btn--xl .icon{width:2.2rem;height:2.2rem}
.btn--shine{position:relative;isolation:isolate;overflow:hidden;animation:breathe 3.6s ease-in-out infinite}
.btn--shine::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:40%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,#fff0 0%,#ffffff4d 50%,#fff0 100%);
  transform:translateX(-160%) skewX(-20deg);animation:shine 4.2s cubic-bezier(.45,0,.25,1) infinite;
}
.btn--shine:hover{animation-play-state:paused}
@keyframes breathe{
  0%,100%{transform:scale(1);box-shadow:0 .8rem 2rem #ed1c2326}
  50%{transform:scale(1.025);box-shadow:0 1.2rem 3.6rem #ed1c2352}
}
@keyframes shine{0%,50%{transform:translateX(-160%) skewX(-20deg)}80%,100%{transform:translateX(360%) skewX(-20deg)}}
@media (prefers-reduced-motion:reduce){ .btn--shine,.btn--shine::after{animation:none} }

/* Панель вкладок с «ездящей» белой плашкой — как у референса (калькулятор, отзывы) */
.tabbar{position:relative;display:inline-flex;background:var(--base-50);border-radius:var(--r-md);padding:.2rem}
.tabbar__pill{
  position:absolute;top:.2rem;bottom:.2rem;left:0;width:0;border-radius:var(--r-sm);background:#fff;
  box-shadow:0 .2rem .8rem #272a2f14;transition:transform var(--ease),width var(--ease);pointer-events:none;
}
.tabbar__list{position:relative;display:flex;align-items:center}
.tab{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:.6rem;height:4rem;padding-inline:2rem;
  border-radius:var(--r-sm);font-size:1.6rem;font-weight:500;letter-spacing:-.01em;white-space:nowrap;transition:color var(--ease);
}
.tab:hover{color:var(--accent-500)}
.tab[aria-selected="true"]:hover{color:var(--base-900)}

/* Карточки-ярлыки: картинка = фон на всю карточку (как у goroda.pro) */
.maincards{display:grid;grid-template-columns:repeat(var(--n,7),1fr);gap:.8rem}
.maincards__item{min-width:0}
.maincard{
  position:relative;display:block;height:14rem;border-radius:var(--r-xl);overflow:hidden;padding:1.4rem;
  background:#fff;border:.1rem solid var(--base-100);transition:transform var(--ease),box-shadow var(--ease);
}
.maincard:hover{transform:translateY(-.4rem);box-shadow:0 1.6rem 3.2rem #272a2f14}
.maincard--dark{background:var(--base-700);border-color:var(--base-700);color:#fff}
/* 22.09 р.3: красная карточка «Скупка техники» — сразу после «Отделения на карте» */
.maincard--red{background:var(--accent-500);border-color:var(--accent-500);color:#fff}
.maincard--red:hover{box-shadow:0 1.6rem 3.2rem #ed1c2333}
.maincard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom}
.maincard__label{position:relative;z-index:1;display:block;text-align:center;font-size:1.6rem;font-weight:500;line-height:1.2;letter-spacing:-.02em}

/* планшет и телефон: CTA под карточками + WhatsApp-иконка рядом (без переполнения по ширине) */
.hero__buttons{display:none;gap:.8rem;margin-top:2.4rem}

.maincard__sub{display:none}            /* подпись красной плашки — только на планшете и телефоне */

@media (max-width:1279.98px){
  .hero{padding-inline:0}
  .hero__cta{display:none}
  /* 28.09: сетка на 6 колонок, карточка занимает 2 — так неполный последний ряд (1 или 2 карточки) встаёт по центру
     (maincards--tail1/2 ставит site_kit.maincards), а не прижимается влево с пустой дырой справа */
  .maincards{grid-template-columns:repeat(6,minmax(0,1fr))}
  .maincards__item{grid-column:span 2}
  .maincards--tail2 .maincards__item:nth-last-child(2){grid-column:2/span 2}
  .maincards--tail1 .maincards__item:last-child{grid-column:3/span 2}
  .maincards__item--map{display:none}
  .maincard{height:auto;aspect-ratio:106/102}
  /* красная карточка — широкая плашка над остальными (28.09, редизайн): подпись с нормальным отступом слева
     и строкой-пояснением, объект справа целиком — прозрачная вырезка с тенью (<img>-m.webp), без обреза краем */
  .maincards__item--buy{grid-column:1/-1;order:-1}
  .maincards__item--buy .maincard{aspect-ratio:auto;height:auto;min-height:11.2rem;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:1.6rem 2rem}
  .maincards__item--buy picture{display:contents}
  .maincards__item--buy .maincard__img{inset:auto 1.4rem 1rem auto;width:auto;height:calc(100% - 2rem);max-width:38%;object-fit:contain;object-position:right bottom}
  .maincards__item--buy .maincard__label{max-width:60%;text-align:left;font-size:2rem;font-weight:600;line-height:1.1;letter-spacing:-.02em;hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal}
  .maincards__item--buy .maincard__label br{display:none}
  .maincard__sub{display:block;margin-top:.6rem;font-size:1.6rem;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:#ffffffe0}
  /* CTA под карточками: 48px (стандарт крупной кнопки на телефоне), без «вдоха» масштабом — он выталкивал кнопку
     за края сетки на 4px с каждой стороны; «живой» остаётся мягкая пульсация свечения и блик */
  .hero__buttons{display:grid;grid-template-columns:minmax(0,1fr) auto;margin-top:1.6rem}
  .hero__buttons .btn{height:4.8rem}
  .hero__buttons .btn--primary{font-size:1.6rem;font-weight:600;animation-name:glow}
  .hero__buttons .btn--icon{width:4.8rem}
}
@keyframes glow{0%,100%{box-shadow:0 .4rem 1.2rem #ed1c231f}50%{box-shadow:0 .6rem 2rem #ed1c2347}}
@media (max-width:767.98px){
  .hero__title{font-size:2.8rem;line-height:1.05;margin-bottom:2rem}
  .maincard{padding:1rem;border-radius:var(--r-lg)}
}

/* ---------- 8. Слайдер «о компании» ---------- */
.aboutslider{position:relative;margin-bottom:var(--section-gap);padding-bottom:12.5rem}
.aboutslider__viewport{overflow:hidden;border-radius:var(--r-xl)}
.aboutslider__track{display:flex;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.aboutslider__slide{flex:0 0 100%}
.aboutslider__slide img{width:100%;height:57.5rem;object-fit:cover}
.aboutslider__panel{
  position:absolute;left:0;right:0;bottom:0;min-height:22rem;background:#fff;
  border:.1rem solid var(--base-100);border-radius:var(--r-xl);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.8rem;padding:3.2rem 4rem;text-align:center;
}
.aboutslider__lead{font-size:3.6rem;line-height:1.05;letter-spacing:-.02em;font-weight:600;max-width:96rem;transition:opacity .25s ease}
.aboutslider__lead.is-fading{opacity:0}
.navset{display:flex;justify-content:center;align-items:center;gap:.8rem}
.navbtn{width:4.4rem;height:4.4rem;border-radius:var(--r-md);border:.1rem solid var(--base-100);background:#fff;display:inline-grid;place-items:center;color:var(--base-900);transition:background var(--ease),opacity var(--ease)}
.navbtn:hover{background:var(--base-50)}
.navbtn[disabled]{opacity:.4;cursor:default}
.navprogress{position:relative;width:4.4rem;height:4.4rem;border-radius:var(--r-md);border:.1rem solid var(--base-100);background:#fff;display:inline-grid;place-items:center}
.navprogress__ring{position:absolute;inset:-.1rem;width:calc(100% + .2rem);height:calc(100% + .2rem);pointer-events:none}
.navprogress__ring rect{fill:none;stroke:var(--accent-500);stroke-width:2;stroke-dasharray:176;stroke-dashoffset:176}
.navprogress.is-playing .navprogress__ring rect{animation:ring var(--ring-dur,6s) linear infinite}
@keyframes ring{from{stroke-dashoffset:176}to{stroke-dashoffset:0}}
.navcounter{display:none;min-width:4.4rem;height:4.4rem;border-radius:var(--r-md);border:.1rem solid var(--base-100);place-items:center;font-size:1.6rem;font-weight:500;padding-inline:1.2rem}
@media (max-width:1279.98px){
  .aboutslider__slide img{height:44rem}
  .aboutslider__lead{font-size:2.8rem}
}
@media (max-width:767.98px){
  .aboutslider{padding-bottom:0}
  .aboutslider__viewport{border-radius:var(--r-xl)}
  .aboutslider__slide img{height:26rem}
  .aboutslider__panel{position:relative;margin-top:-3.2rem;min-height:0;padding:2.4rem 2rem;gap:2rem;border-radius:var(--r-xl)}
  .aboutslider__lead{font-size:2rem}
  .navcounter{display:grid}
}

/* ---------- 9. Услуги (бенто) ---------- */
.services{margin-bottom:var(--section-gap)}
.services__heading{display:flex;justify-content:center;margin-bottom:4rem}
/* 28.09: выравнивание по базовой линии, а не по центру: у «Услуги» есть красное подчёркивание (рамка 2px + line-height 1.05),
   из-за него блок выше соседнего текста, и при центровке слово «Услуги» стояло выше, чем «для вас» */
.services__link{display:inline-flex;align-items:baseline;gap:.8rem;font-size:4rem;line-height:1;letter-spacing:-.0225em;font-weight:600}
.services__link .icon{align-self:center;color:var(--accent-500);transition:transform var(--ease)}
.services__link:hover .icon{transform:translate(.3rem,-.3rem)}
.services__grid{display:grid;gap:.8rem;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,2fr);grid-template-rows:22.8rem 12.8rem 22.8rem}
.svc{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:2rem;display:flex;flex-direction:column;transition:transform var(--ease),box-shadow var(--ease)}
a.svc:hover{transform:translateY(-.4rem);box-shadow:0 1.6rem 3.2rem #272a2f14}
.svc--accent{background:var(--accent-500);color:#fff;grid-column:1/2;grid-row:1/3;padding:0}
.svc--buyout{grid-column:2/3;grid-row:1/2;background:var(--accent-500);color:#fff;justify-content:center;align-items:center;text-align:center}
.svc--value{grid-column:3/4;grid-row:1/2;background:#fff;border:.1rem solid var(--base-100);justify-content:center;align-items:center;text-align:center}
.svc--auto{grid-column:1/2;grid-row:3/4;background:var(--base-50);padding:.8rem}
.svc--gold{grid-column:2/4;grid-row:2/4;background:var(--base-700);color:#fff;flex-direction:row;gap:2rem;padding:0 0 0 2.8rem}
.svc--sell{grid-column:4/5;grid-row:1/4;background:var(--base-50);padding:2.8rem}
.svc__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.svc__title{position:relative;z-index:1;font-size:2.8rem;line-height:1;letter-spacing:-.02em;font-weight:600}
.svc__title--sm{font-size:2rem;line-height:1.1}
.svc__sub{position:relative;z-index:1;font-size:1.6rem;line-height:1.3;color:var(--base-500);margin-top:1.2rem;font-weight:500}
.svc__go{
  position:absolute;right:2rem;bottom:2rem;z-index:2;width:4.4rem;height:4.4rem;border-radius:var(--r-md);
  background:var(--accent-500);color:#fff;display:grid;place-items:center;transition:background var(--ease);
}
.svc:hover .svc__go{background:var(--accent-600)}

/* Красная карточка: вертикальный «барабан» из 3 видимых позиций (как у референса) */
.drum{position:relative;overflow:hidden;height:32.4rem;max-height:100%}
.drum__track{display:flex;flex-direction:column;will-change:transform}
/* Смена пункта — только opacity и transform: у каждого пункта два слоя (мелкий с галочкой и крупный),
   они плавно сменяют друг друга. Раньше анимировался font-size, а вес, межстрочный интервал,
   выравнивание и ширина иконки менялись скачком — текст на миг «перепрыгивал» строку и дёргался. */
.drum__item{position:relative;flex:0 0 10.8rem;height:10.8rem}
.drum__small,.drum__big{
  position:absolute;left:2rem;right:2rem;top:50%;display:flex;align-items:center;justify-content:center;text-align:center;
  transition:opacity var(--ease-slow),transform var(--ease-slow);will-change:transform,opacity;
}
.drum__small{gap:.6rem;transform:translateY(-50%);color:var(--accent-100);font-size:1.6rem;font-weight:500;line-height:1.2;letter-spacing:-.015em}
.drum__small .icon{width:1.4rem;height:1.4rem}
.drum__big{opacity:0;transform:translateY(-50%) scale(.72);color:#fff;font-size:3.6rem;font-weight:600;line-height:1;letter-spacing:-.02em}
.drum__item.is-prev .drum__small{transform:translateY(calc(-50% - 2.4rem))}
.drum__item.is-next .drum__small{transform:translateY(calc(-50% + 2.4rem))}
.drum__item.is-active .drum__small{opacity:0;transform:translateY(-50%) scale(1.3)}
.drum__item.is-active .drum__big{opacity:1;transform:translateY(-50%) scale(1)}
.svc--accent .drum{height:100%}

/* Тёмная карточка: колонка чипсов, прокрутка по одному */
.svc__goldmain{display:flex;flex-direction:column;justify-content:flex-end;gap:2.4rem;flex:none;width:36%;padding:2.8rem 0}
.svc__goldmain .svc__title{font-size:4rem;line-height:1}
.svc__goldmain .btn{align-self:flex-start}
.tags{position:relative;flex:1;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.tags__track{display:flex;flex-direction:column;align-items:flex-end;gap:.8rem;padding-right:2.8rem;will-change:transform}
.tag{
  display:inline-flex;align-items:center;gap:.6rem;height:4.4rem;padding-inline:1.8rem;border-radius:var(--r-md);flex:none;
  background:var(--opacity-white-10);color:#fff;font-size:1.6rem;font-weight:500;white-space:nowrap;
  transition:background var(--ease-slow),transform var(--ease-slow);
}
.tag .icon{width:1.6rem;height:1.6rem}
.tag.is-active{background:var(--opacity-white-20);transform:scale(1.06);transform-origin:right center}

.svc--buyout .svc__title{font-size:2.4rem;text-shadow:0 .2rem 1.6rem #8e111566}
.svc--value .svc__title{font-size:2.4rem}

/* «Авто»: фон на всю карточку + белая плашка снизу (как «Подбор и покупка» у референса) */
.svc--auto .svc__title{padding:2rem 2rem 0}
.svc__bar{
  position:relative;z-index:1;margin-top:auto;align-self:flex-start;width:50%;min-width:22rem;background:#fff;border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:space-between;gap:1.6rem;padding:.8rem .8rem .8rem 2rem;
}
.svc__bartext{font-size:1.6rem;font-weight:500;line-height:1.2;color:var(--base-700)}
.svc__bar .svc__go{position:static}

/* Коллаж: фон на всю карточку + HTML-бейджи поверх */
.svc--sell .svc__sub{max-width:28rem}
.badge{
  position:absolute;z-index:2;background:#fff;border-radius:var(--r-md);padding:.8rem 1.4rem;
  font-size:1.6rem;font-weight:500;white-space:nowrap;box-shadow:0 .6rem 1.6rem #272a2f1a;
}

/* Мобильная версия «Принимаем…» (правка лида): без коллажа и бейджей — один акцент, цифра */
.svc--sell-m{justify-content:flex-start}
.svc__big{position:relative;z-index:1;margin-top:auto;font-size:8.8rem;line-height:.9;font-weight:600;letter-spacing:-.045em;color:var(--accent-500)}
.svc--sell-m .svc__sub{max-width:22rem;margin-top:1.2rem}

.services__slider{display:none}
@media (max-width:1279.98px){
  .services__grid{display:none}
  .services__slider{display:block}
  .services__link{font-size:2.8rem}
}
@media (max-width:767.98px){ .services__link{font-size:2.4rem} .services__heading{margin-bottom:2.4rem} }

/* Горизонтальный слайдер (мобильные версии блоков с карточками) */
.hslider{position:relative}
.hslider__viewport{overflow:hidden}
.hslider__track{display:flex;gap:.8rem;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.hslider__slide{flex:0 0 100%;min-width:0}
.hslider__nav{margin-top:2rem}
.hslider .svc{height:36rem}
.hslider .svc--accent{padding:0}
.hslider .svc--gold{flex-direction:column;padding:2.4rem}
.hslider .svc--gold .svc__goldmain{width:100%;padding:0;justify-content:flex-start}
.hslider .svc--gold .svc__goldmain .svc__title{font-size:2.8rem}
.hslider .tags{height:100%}
.hslider .tags__track{align-items:flex-start;padding-right:0}
.hslider .tag.is-active{transform-origin:left center}
.hslider .svc--sell{padding:2.4rem}
.hslider .svc__bg--sell{object-position:center 80%}

/* ---------- 10. Калькулятор оценки: квиз по шагам + тёмная карточка результата ----------
   Правка лида: «слишком много действий». Вместо 4 полей с ползунками и сроком —
   вкладки категорий -> 2–4 шага только кнопками и ползунками -> «до X ₸».
   Раскладка — шаблон goroda.pro «колонка 2/3 + боковая карточка» (как у статьи и FAQ). */
.calc{margin-bottom:var(--section-gap)}
.calc .block-heading{margin-bottom:2.4rem}
.calc__tabs{display:flex;justify-content:center;margin-bottom:3.2rem}
.calc__tabbar{max-width:100%;overflow-x:auto;scrollbar-width:none}
.calc__tabbar::-webkit-scrollbar{display:none}
.calc__layout{display:grid;grid-template-columns:minmax(0,93.2fr) minmax(0,46fr);gap:.8rem;align-items:stretch}

.quiz{
  display:flex;flex-direction:column;gap:2.8rem;min-height:60rem;padding:2.8rem 3.2rem 3.2rem;min-width:0;
  background:#fff;border:.1rem solid var(--base-100);border-radius:var(--r-xl);box-shadow:var(--shadow-row);
}
/* полоса шагов: пройденные и текущий — красные; к любому шагу можно вернуться */
.qsteps{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:.8rem}
.qsteps__btn{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;width:100%;min-width:0;text-align:left}
.qsteps__bar{display:block;width:100%;height:.4rem;border-radius:1rem;background:var(--base-100);transition:background var(--ease)}
.qsteps__btn.is-done .qsteps__bar,.qsteps__btn.is-current .qsteps__bar{background:var(--accent-500)}
.qsteps__label{max-width:100%;font-size:1.6rem;font-weight:500;color:var(--base-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--ease)}
.qsteps__btn.is-current .qsteps__label{color:var(--base-900)}
.qsteps__btn:hover .qsteps__label{color:var(--accent-500)}
.qsteps__val{max-width:100%;margin-top:-.4rem;font-size:1.6rem;color:var(--base-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qsteps__btn:not(.is-done):not(.is-current) .qsteps__val{visibility:hidden}

.quiz__stage{display:flex;flex-direction:column;gap:2rem;animation:qin .35s ease}
@keyframes qin{from{opacity:0;transform:translateY(.8rem)}to{opacity:1;transform:none}}
.quiz__q{font-size:2.8rem;line-height:1.05;letter-spacing:-.02em;font-weight:600}
.quiz__q:focus{outline:none}
.quiz__hint{font-size:1.6rem;line-height:1.35;color:var(--base-500)}

/* бренд -> модели плитками (без ввода текста) */
.qbrands{display:flex;flex-wrap:wrap;gap:.6rem}
.qbrand{height:4rem;padding-inline:1.6rem;border-radius:var(--r-md);background:var(--base-50);font-size:1.6rem;font-weight:500;transition:background var(--ease),color var(--ease)}
.qbrand:hover{background:var(--base-100)}
.qbrand[aria-pressed="true"]{background:var(--base-700);color:#fff}
.qlist{max-height:46rem;overflow-y:auto;padding-right:.8rem;margin-right:-.8rem;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--base-100) transparent}
.qlist__group{margin:2rem 0 .8rem;font-size:1.6rem;color:var(--base-500)}
.qlist__group:first-child{margin-top:0}

.qgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.qgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.qgrid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.qopt{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.4rem;min-width:0;min-height:6.8rem;
  padding:1.2rem 1.6rem;border-radius:var(--r-md);background:var(--base-50);text-align:left;
  transition:background var(--ease),box-shadow var(--ease);
}
.qopt:hover{background:var(--base-100)}
.qopt[aria-pressed="true"]{background:#fff;box-shadow:inset 0 0 0 .2rem var(--accent-500)}
.qopt__t{font-size:1.6rem;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.qopt__s{font-size:1.6rem;line-height:1.25;color:var(--base-500)}
.qopt[aria-pressed="true"] .qopt__s{color:var(--accent-500)}
.qopt--big{justify-content:flex-start;min-height:10.4rem;padding:1.6rem 1.8rem;gap:.6rem}
.qopt--big .qopt__t{font-size:1.8rem}
.qopt--big[aria-pressed="true"] .qopt__s{color:var(--base-500)}
.qopt--unknown{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:flex-start;gap:1.6rem;padding:1.6rem 1.8rem;background:#fff;box-shadow:inset 0 0 0 .2rem var(--accent-500)}
.qopt--unknown:hover{background:var(--accent-100)}
.qopt--unknown[aria-pressed="true"]{background:var(--accent-500);color:#fff}
.qopt--unknown[aria-pressed="true"] .qopt__s{color:#fff}
.qopt__q{flex:none;display:grid;place-items:center;width:4.4rem;height:4.4rem;border-radius:var(--r-md);background:var(--accent-500);color:#fff;font-size:2.4rem;font-weight:600}
.qopt--unknown[aria-pressed="true"] .qopt__q{background:#fff;color:var(--accent-500)}
.qopt__col{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.qopt--unknown .qopt__t{font-size:1.8rem}

/* комплект и типичный вес — чипсы-переключатели */
.qsub{margin-bottom:1rem;font-size:1.6rem;font-weight:600}
.qchips{display:flex;flex-wrap:wrap;gap:.8rem}
.qchip{
  display:inline-flex;align-items:center;gap:.8rem;height:4.4rem;padding-inline:1.2rem 1.8rem;border-radius:var(--r-md);
  background:#fff;border:.1rem solid var(--base-100);font-size:1.6rem;font-weight:500;white-space:nowrap;
  transition:border-color var(--ease),background var(--ease);
}
.qchip:hover{background:var(--base-50)}
.qchip__box{display:grid;place-items:center;width:2rem;height:2rem;border-radius:var(--r-xs);border:.15rem solid var(--base-300);color:#fff;transition:background var(--ease),border-color var(--ease)}
.qchip__box .icon{width:1.4rem;height:1.4rem;opacity:0;transition:opacity var(--ease)}
.qchip__sub{color:var(--base-500);font-weight:400}
.qchip[aria-pressed="true"]{border-color:var(--accent-500);background:#fff6f6}
.qchip[aria-pressed="true"] .qchip__box{background:var(--accent-500);border-color:var(--accent-500)}
.qchip[aria-pressed="true"] .qchip__box .icon{opacity:1}

/* ползунок: крупное значение, кнопки −/+ и подписи шкалы */
.qrange{display:flex;flex-direction:column;gap:1.4rem;padding:2.4rem 2.4rem 2rem;border-radius:var(--r-lg);background:var(--base-50)}
.qrange.is-muted .qrange__val{color:var(--base-300)}
.qrange__top{display:flex;align-items:center;justify-content:space-between;gap:1.6rem}
.qrange__val{min-width:0;font-size:4rem;line-height:1;font-weight:600;letter-spacing:-.03em;text-align:center;white-space:nowrap}
.qrange__btn{flex:none;display:grid;place-items:center;width:4.8rem;height:4.8rem;border-radius:var(--r-md);background:#fff;border:.1rem solid var(--base-100);font-size:2.4rem;line-height:1;transition:background var(--ease)}
.qrange__btn:hover{background:var(--base-100)}
.qrange__input{-webkit-appearance:none;appearance:none;width:100%;height:2.8rem;margin:0;background:none;cursor:pointer;--p:50%}
.qrange__input::-webkit-slider-runnable-track{height:.4rem;border-radius:1rem;background:linear-gradient(to right,var(--accent-500) var(--p),var(--base-100) var(--p))}
.qrange__input::-moz-range-track{height:.4rem;border-radius:1rem;background:var(--base-100)}
.qrange__input::-moz-range-progress{height:.4rem;border-radius:1rem;background:var(--accent-500)}
.qrange__input::-webkit-slider-thumb{-webkit-appearance:none;width:2.6rem;height:2.6rem;margin-top:-1.1rem;border-radius:50%;background:#fff;border:.3rem solid var(--accent-500);box-shadow:0 .2rem .8rem #272a2f29;transition:transform .15s ease}
.qrange__input::-moz-range-thumb{width:2rem;height:2rem;border-radius:50%;background:#fff;border:.3rem solid var(--accent-500);box-shadow:0 .2rem .8rem #272a2f29}
.qrange__input:active::-webkit-slider-thumb{transform:scale(1.12)}
.qrange__ticks{display:flex;justify-content:space-between;gap:.8rem;font-size:1.6rem;color:var(--base-500)}

.quiz__foot{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;margin-top:auto;padding-top:2.4rem;border-top:.1rem solid var(--base-100)}
.quiz__back:disabled{visibility:hidden}
.quiz__next .icon{width:1.8rem;height:1.8rem}
.quiz__live{display:none;font-size:1.8rem;font-weight:600;white-space:nowrap}
.quiz__live span{color:var(--base-500);font-weight:400}
@media (max-width:359.98px){   /* 320px: сумма, «Назад» и «Далее» в один ряд не помещаются — сумма уходит в свою строку */
  .quiz__foot{flex-wrap:wrap}
  .quiz__live{order:-1;flex:1 0 100%;text-align:center}
}

/* результат: сумма «до X ₸» и переключатель «Займ под залог / Продать сразу» */
.ccard{position:relative;overflow:hidden;border-radius:var(--r-xl)}
.ccard--result{display:flex;flex-direction:column;min-width:0;padding:.8rem;background:var(--base-700);color:#fff}
.rmode{position:relative;display:grid;grid-template-columns:1fr 1fr;margin:1.2rem 1.2rem 0;padding:.3rem;border-radius:var(--r-md);background:var(--opacity-white-10)}
.rmode__pill{position:absolute;top:.3rem;bottom:.3rem;left:.3rem;width:calc(50% - .3rem);border-radius:var(--r-sm);background:#fff;transition:transform var(--ease)}
.rmode[data-mode="sell"] .rmode__pill{transform:translateX(100%)}
.rmode__btn{position:relative;z-index:1;height:4rem;padding-inline:.8rem;border-radius:var(--r-sm);font-size:1.6rem;font-weight:500;color:var(--base-100);white-space:nowrap;transition:color var(--ease)}
.rmode__btn[aria-pressed="true"]{color:var(--base-900)}
.ccard__label{margin:3.2rem 2rem 0;font-size:1.6rem;color:var(--base-300)}
.ccard__big{margin:.8rem 2rem 0;font-size:4.8rem;line-height:1;font-weight:600;letter-spacing:-.03em;white-space:nowrap}
.ccard__big.is-long{font-size:3.8rem}
/* «Другое»: диапазон — «от X ₸» строкой выше, мельче; средняя сумма — светлая плашка под суммой */
.ccard__from{display:block;margin-bottom:.4rem;font-size:2.4rem;font-weight:500;letter-spacing:-.02em;color:var(--base-300)}
.ccard__avg{align-self:flex-start;margin:1.2rem 2rem 0;padding:.8rem 1.2rem;border-radius:var(--r-md);background:var(--opacity-white-10);font-size:1.6rem;line-height:1.3;color:var(--base-100)}
.ccard__avg b{color:#fff;font-weight:600;white-space:nowrap}
.ccard__avg[hidden]{display:none}
.qbrand--other{background:var(--base-50);box-shadow:inset 0 0 0 .1rem var(--base-200)}
.ccard__what{margin:1.6rem 2rem 0;font-size:1.6rem;line-height:1.4;color:#fff}
.ccard__mode{margin:.6rem 2rem 0;font-size:1.6rem;line-height:1.4;color:var(--base-300)}
.ccard__pays{display:flex;align-items:center;gap:1.2rem;margin:2.8rem 2rem}
.ccard__icons{display:flex;flex:none}
.ccard__pay{width:4.4rem;height:4.4rem;border-radius:50%;background:#fff;display:grid;place-items:center;border:.2rem solid var(--base-700);margin-left:-1rem;color:var(--base-900)}
.ccard__pay:first-child{margin-left:0}
.ccard__pay .icon{width:2rem;height:2rem}
.ccard__pay b{font-size:1.8rem;font-weight:700;line-height:1}
.ccard__paytext{font-size:1.6rem;line-height:1.3;color:var(--base-300)}
.ccard__cta{margin-top:auto;display:flex;flex-direction:column;gap:1.2rem;padding:2rem;border-radius:var(--r-lg);background:#fff;color:var(--base-900)}
.ccard__ctatitle{font-size:1.8rem;font-weight:600;letter-spacing:-.015em}
.ccard__note{display:flex;align-items:center;gap:.8rem;font-size:1.6rem;color:var(--base-500)}
.ccard__note .icon{color:var(--wa)}
.calc__disclaimer{margin-top:1.6rem;font-size:1.6rem;line-height:1.35;color:var(--base-300);text-align:center}

@media (max-width:1279.98px){
  .calc__layout{grid-template-columns:minmax(0,1fr)}
  .quiz{min-height:0}
  .quiz__live{display:block}
  .qgrid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767.98px){
  .calc__tabs{margin-bottom:2rem}
  .quiz{padding:2rem 1.6rem;gap:2rem}
  .quiz__q{font-size:2.2rem}
  .qsteps{display:flex;gap:.6rem}
  .qsteps>li{flex:1 1 0;min-width:0}
  .qsteps>li.is-now{flex:3 1 0}                       /* текущему шагу — место под подпись целиком */
  .qsteps__val{display:none}
  .qsteps__btn:not(.is-current) .qsteps__name{display:none}   /* на узком экране у остальных шагов — только номер */
  .qgrid,.qgrid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qlist{max-height:38rem}
  .qopt{padding:1.2rem}
  .qopt--big{min-height:0}
  .qlist{max-height:36rem}
  .qrange{padding:1.6rem}
  .qrange__val{font-size:3.2rem}
  .quiz__foot{padding-top:1.6rem;flex-wrap:wrap}
  .quiz__back{width:4.4rem;padding:0;flex:none}
  .quiz__backtxt{display:none}
  /* длинные подписи (казахская и английская версии) переносятся, кнопка не выталкивает строку за экран */
  .quiz__next{padding-inline:1.6rem;min-width:0;max-width:100%}
  .quiz__next span{overflow:hidden;text-overflow:ellipsis}
  .ccard__label{margin-top:2.4rem}
  .ccard__big{font-size:3.6rem}
  .ccard__big.is-long{font-size:3rem}
  .ccard__pays{margin:2.4rem 2rem}
}

/* ---------- 11. Красный промо-блок с «перепиской» ---------- */
.promo{
  position:relative;overflow:hidden;background:var(--accent-500);color:#fff;border-radius:var(--r-xl);
  height:42rem;padding:4rem;margin:var(--section-gap) 11.7rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4rem;text-align:center;
}
.chat{
  position:absolute;top:0;left:50%;transform:translateX(-50%);width:53rem;height:16rem;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 60%);mask-image:linear-gradient(transparent,#000 60%);
}
.chat__list{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:2rem;padding:.8rem;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.msg{
  position:relative;align-self:flex-start;display:flex;align-items:center;min-height:3.2rem;padding:.6rem 1.6rem;
  border-radius:var(--r-sm);background:var(--opacity-white-30);color:#fff;font-size:1.6rem;font-weight:500;line-height:1.25;
  white-space:nowrap;overflow:visible;transform:rotate(-3deg);transform-origin:left bottom;
  transition:width .4s cubic-bezier(.22,.61,.36,1),opacity .4s ease;
}
.msg--right{align-self:flex-end;transform:rotate(3deg);transform-origin:right bottom}
.msg::after{
  content:"";position:absolute;bottom:-.9rem;left:1.6rem;width:1.4rem;height:1.2rem;background:inherit;
  clip-path:path("M0 0 H14 C10 1 7 6 5 12 C4 7 2 2 0 0 Z");
}
.msg--right::after{left:auto;right:1.6rem;transform:scaleX(-1)}
.msg__text{display:block;overflow:hidden}
.msg__dots{display:inline-flex;gap:.4rem;padding-inline:.2rem}
.msg__dots i{width:.6rem;height:.6rem;border-radius:50%;background:#fff;opacity:.5;animation:dot 1s infinite ease-in-out}
.msg__dots i:nth-child(2){animation-delay:.15s}
.msg__dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-.3rem)}}
.promo__text{display:flex;flex-direction:column;align-items:center;gap:1.2rem;margin-top:auto}
.promo__title{font-size:4rem;line-height:1;letter-spacing:-.02em;font-weight:600}
.promo__desc{font-size:1.6rem;line-height:1.4;color:var(--accent-200);max-width:48rem}
@media (max-width:1279.98px){
  .promo{margin-inline:0;padding:2.8rem}
  .chat{width:40rem;max-width:100%;height:10.8rem}
  .promo__title{font-size:2.8rem}
}
@media (max-width:767.98px){
  .promo{height:auto;min-height:42rem;border-radius:var(--r-xl);padding:2rem;gap:2.4rem}
  .chat{width:30rem;height:18rem}
  .msg{white-space:normal;max-width:26rem}
  .promo__title{font-size:2.4rem}
  .promo__desc{max-width:28rem}
}
@media (prefers-reduced-motion:reduce){ .msg__dots i,.navprogress.is-playing .navprogress__ring rect{animation:none} }

/* ---------- 12. Отзывы: стена карточек (кладка), уходит в затухание -> линия с кнопкой на страницу отзывов ----------
   Как было в index-v2: 3–4 карточки в ряд, 2–3 ряда видно, дальше отзывы продолжаются под градиентом.
   Кладка на CSS columns — карточки разной высоты без пустот между ними. */
.reviews{margin-bottom:var(--section-gap)}
.reviews__head{display:flex;flex-direction:column;align-items:center;gap:2.4rem;margin-bottom:3.2rem;text-align:center}
.reviews__title{font-size:4rem;line-height:1;letter-spacing:-.0225em;font-weight:600}
.reviews__buttons{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}
.rtabs{max-width:100%;overflow-x:auto;scrollbar-width:none}
.rtabs::-webkit-scrollbar{display:none}
.rtab{gap:.8rem}
.rtab img{width:2rem;height:2rem;object-fit:contain}
.rtab__val{color:var(--accent-500);font-weight:600}
.rtab__cnt{color:var(--base-500);font-weight:400}

.reviews__wall{position:relative;max-height:80rem;overflow:hidden}
.reviews__wall::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34rem;pointer-events:none;
  background:linear-gradient(180deg,#fff0 0%,#ffffffa6 40%,#fffffff2 72%,#fff 86%);
}
.reviews__grid{columns:4 32rem;column-gap:.8rem}
.review{
  display:flex;flex-direction:column;gap:1.2rem;margin-bottom:.8rem;break-inside:avoid;
  background:#fff;border:.1rem solid var(--base-50);border-radius:var(--r-xl);padding:2rem;box-shadow:var(--shadow-row);
}
.review[hidden]{display:none}
.review__head{display:flex;align-items:center;justify-content:space-between;gap:1.2rem}
.stars{display:inline-flex;gap:.3rem;flex:none;color:var(--gold)}
.stars .icon{width:2rem;height:2rem}
.stars .is-off{color:var(--base-100)}
.review__name{display:inline-block;min-width:0;height:3.2rem;line-height:3.2rem;padding-inline:1.2rem;background:var(--base-50);border-radius:var(--r-md);font-size:1.6rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.review__text{font-size:1.6rem;line-height:1.55}
.review__reply{font-size:1.6rem;line-height:1.4;color:var(--base-500);border-left:.2rem solid var(--accent-500);padding-left:1.2rem}
.review__foot{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;font-size:1.6rem;color:var(--base-300)}
.like{display:inline-flex;align-items:center;gap:.6rem;color:var(--base-300);font-size:1.6rem;transition:color var(--ease)}
.like:hover,.like.is-on{color:var(--accent-500)}
/* линия-перекрытие с кнопкой поверх затухания */
.reviews__more{position:absolute;left:0;right:0;bottom:2.4rem;z-index:2;display:flex;justify-content:center}
.reviews__more::before{content:"";position:absolute;left:0;right:0;top:50%;height:.1rem;background:var(--base-100)}
.reviews__more .btn{position:relative;box-shadow:0 0 0 1.6rem #fff}
.reviews__more .btn .icon{transition:transform var(--ease)}
.reviews__more .btn:hover .icon{transform:translateX(.3rem)}
@media (max-width:1279.98px){ .reviews__title{font-size:2.8rem} }
@media (max-width:767.98px){
  .reviews__title{font-size:2.4rem}
  .reviews__buttons{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
  .reviews__wall{max-height:100rem}
  .reviews__wall::after{height:30rem}
  .reviews__more .btn{box-shadow:0 0 0 1.2rem #fff}
}

/* ---------- 13. Подвал ---------- */
.footer{background:var(--base-50);padding-top:.1rem}
.footer__card{background:#fff;border-radius:var(--r-xl);padding:.8rem;margin-top:0}
.fcta{
  position:relative;overflow:hidden;border-radius:var(--r-lg);min-height:25rem;padding:4.4rem 2rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;
}
.fcta__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fcta::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#1a0b0b40,#2a0a0a66)}
.fcta>*:not(.fcta__bg){position:relative;z-index:2}
.fcta__title{font-size:4rem;line-height:1;letter-spacing:-.0225em;font-weight:600;text-shadow:0 .2rem 2rem #0003}
.fcta__actions{display:flex;justify-content:center;gap:.8rem;margin-top:2.8rem;flex-wrap:wrap}
.fcta__note{display:flex;align-items:center;gap:.8rem;font-size:1.6rem;color:var(--opacity-white-80);margin-top:1.6rem}

.footer__body{display:grid;grid-template-columns:1.45fr 1fr 1fr 1fr;gap:2rem;padding:4rem 2.8rem 7.2rem}
.footer__aside{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.footer__phone,.footer__mail{font-size:2.4rem;line-height:1.15;font-weight:600;letter-spacing:-.02em}
.footer__phone:hover,.footer__mail:hover{color:var(--accent-500)}
.footer__actions{display:flex;align-items:center;gap:.8rem;margin-top:3.2rem}
.footer__addr{font-size:1.6rem;font-weight:500;line-height:1.3;color:var(--base-500);margin-top:2.4rem;max-width:26rem}
.footer__title{font-size:1.8rem;font-weight:600;letter-spacing:-.015em;margin-bottom:1.8rem}
.footer__col li+li{margin-top:1.4rem}
.footer__col a{font-size:1.6rem;font-weight:500;color:var(--base-900);transition:color var(--ease)}
.footer__col a:hover{color:var(--accent-500)}

.footer__bottom{display:grid;grid-template-columns:1.45fr 2fr 1fr auto;gap:2rem;align-items:center;padding:2.4rem 2.8rem 1.2rem}
.footer__partner{display:flex;align-items:center;gap:1.6rem;font-size:1.6rem;line-height:1.2;color:var(--base-500)}
.footer__partner .logo__img{height:2.4rem}
.footer__bottom a.footer__policy{font-size:1.6rem;color:var(--base-300);transition:color var(--ease)}
.footer__bottom a.footer__policy:hover{color:var(--base-700)}
.footer__copy{font-size:1.6rem;line-height:1.25;color:var(--base-300)}
.footer__socials{display:flex;gap:.8rem;justify-self:end}
.social{width:4.4rem;height:4.4rem;border-radius:var(--r-md);background:#fff;display:grid;place-items:center;color:var(--base-700);transition:color var(--ease),background var(--ease)}
.social:hover{color:#fff;background:var(--accent-500)}
.footer__disclaimer{padding:0 2.8rem 3.2rem;font-size:1.6rem;line-height:1.4;color:var(--base-300)}
@media (max-width:1279.98px){
  .footer__body{grid-template-columns:repeat(3,minmax(0,1fr));padding:3.2rem 2rem 4rem}
  .footer__aside{grid-column:1/-1}
  .footer__bottom{grid-template-columns:repeat(2,minmax(0,1fr));padding-inline:2rem}
  .footer__disclaimer{padding-inline:2rem}
}
@media (max-width:767.98px){
  .footer{padding-bottom:9.4rem}
  .footer__card{border-radius:var(--r-xl)}
  .fcta{padding:3.2rem 1.6rem;border-radius:var(--r-lg)}
  .fcta__title{font-size:2.4rem}
  .fcta__actions{flex-wrap:nowrap}
  .fcta__btn{width:8.8rem;height:5.6rem;padding:0;border-radius:var(--r-md)}
  .fcta__btn .icon{width:2.8rem;height:2.8rem}
  .fcta__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* minmax(0,1fr), не 1fr: иначе колонка растягивалась по кнопке WhatsApp и на экране 320px подвал вылезал на 22px вправо */
  .footer__body{grid-template-columns:minmax(0,1fr);gap:3.2rem}
  .footer__bottom{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .footer__actions{flex-wrap:wrap}
  .footer__phone,.footer__mail{overflow-wrap:anywhere}
  .footer__socials{justify-self:start}
}

/* ---------- 14. Мобильная нижняя панель, шторка, поиск, cookie ---------- */
.mobilebar{position:fixed;left:0;right:0;bottom:0;z-index:2000;padding:0 .8rem .8rem;display:none}
.mobilebar__in{background:#fff;border:.1rem solid var(--base-100);border-radius:var(--r-xl);padding:1.4rem .8rem;display:flex;gap:.8rem;box-shadow:0 -.4rem 2.4rem #272a2f14}
.mobilebar__item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.6rem;font-size:1.6rem;font-weight:500;color:var(--base-500);line-height:1;white-space:nowrap}
@media (max-width:359.98px){ .mobilebar__in{gap:.2rem;padding-inline:.4rem} }   /* 320px: пять подписей по 16px иначе не помещаются */
.mobilebar__item.is-active{color:var(--accent-500)}
@media (max-width:767.98px){ .mobilebar{display:block} }

.drawer{position:fixed;inset:0;z-index:3000}
.drawer[hidden]{display:none}
.drawer__overlay{position:absolute;inset:0;background:#272a2f80}
.drawer__panel{position:absolute;inset:0 0 0 auto;width:min(42rem,100%);background:#fff;display:flex;flex-direction:column;overflow-y:auto;padding:2rem;gap:2rem;animation:slidein .3s cubic-bezier(.22,.61,.36,1)}
/* меню длиннее экрана: без этого flex сжимал пункты по высоте — поиск превращался в полоску 16px */
.drawer__panel>*{flex-shrink:0}
@keyframes slidein{from{transform:translateX(100%)}to{transform:none}}
.drawer__head{display:flex;align-items:center;justify-content:space-between}
.drawer__row{display:flex;gap:.8rem}
.drawer__row .picker{flex:1}
.drawer__row .picker__btn{width:100%;justify-content:space-between;height:4.4rem;background:var(--base-50);border-radius:var(--r-md);padding-inline:1.6rem}
.drawer__search{display:flex;align-items:center;gap:1rem;height:5.2rem;background:#fff;border:.1rem solid var(--base-100);border-radius:var(--r-md);padding-inline:1.6rem;font-size:1.6rem;color:var(--base-500);width:100%;transition:border-color var(--ease)}
.drawer__search:hover{border-color:var(--base-300)}
.drawer__search .icon{color:var(--accent-500)}
.drawer__actions{display:grid;gap:.8rem}
.drawer__title{font-size:1.6rem;font-weight:600;color:var(--accent-500);margin:1.6rem 0 .8rem}
.drawer__nav a{display:block;padding:1rem 0;font-size:1.8rem;font-weight:500}
/* бургер: раскрывающиеся группы со всеми страницами — на телефоне иначе до половины сайта не добраться */
.dnav{border-bottom:.1rem solid var(--base-100)}
.dnav__head{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding:1.6rem 0;font-size:1.8rem;font-weight:600;cursor:pointer;list-style:none}
.dnav__head::-webkit-details-marker{display:none}
.dnav__head .icon{flex:none;color:var(--base-500);transition:transform var(--ease)}
.dnav[open]>.dnav__head{color:var(--accent-500)}
.dnav[open]>.dnav__head .icon{transform:rotate(180deg);color:var(--accent-500)}
.dnav__body{padding-bottom:1.2rem}
.dnav__sub{margin:1.2rem 0 .2rem;font-size:1.3rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--base-300)}
.drawer__nav .dnav__body a{padding:.8rem 0;font-size:1.7rem;font-weight:500;color:var(--base-700)}
.drawer__nav .dnav__body a[aria-current="page"]{color:var(--accent-500)}
.drawer__foot{margin-top:auto;display:flex;flex-direction:column;gap:1.2rem;padding-top:2rem}
.drawer__phone{font-size:2rem;font-weight:600;white-space:nowrap}
.drawer__addr{font-size:1.6rem;color:var(--base-500)}

.search{position:fixed;inset:0;z-index:3100;background:#272a2f80;padding-top:12vh}
.search[hidden]{display:none}
.search__panel{max-width:72rem;margin:0 auto;background:#fff;border-radius:var(--r-xl);padding:2rem}
.search__field{display:flex;align-items:center;gap:1.2rem;border-bottom:.1rem solid var(--base-100);padding-bottom:1.6rem}
.search__field input{flex:1;border:0;outline:none;font-size:1.8rem;font-weight:500;background:none}
.search__label{font-size:1.6rem;color:var(--base-300);margin:1.6rem 0 .8rem}
.search__list a{display:block;padding:1rem 0;font-size:1.6rem;font-weight:500}
.search__list a:hover{color:var(--accent-500)}

.floatwa{position:fixed;right:2rem;bottom:2rem;z-index:1500;width:5.6rem;height:5.6rem;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 .8rem 2.4rem #25d36659;transition:transform var(--ease)}
.floatwa:hover{transform:scale(1.06)}
@media (max-width:767.98px){ .floatwa{bottom:10.4rem;right:1.6rem} }

.cookie{position:fixed;left:2rem;right:2rem;bottom:2rem;z-index:2500;background:#fff;border:.1rem solid var(--base-100);border-radius:var(--r-xl);padding:2rem;display:flex;gap:2rem;align-items:center;flex-wrap:wrap;box-shadow:0 1.6rem 4rem #272a2f24;max-width:92rem;margin-inline:auto}
.cookie[hidden]{display:none}
.cookie p{flex:1;min-width:24rem;font-size:1.6rem;line-height:1.35;color:var(--base-500)}
.cookie a{color:var(--accent-500)}
@media (max-width:767.98px){ .cookie{bottom:10.4rem;left:1.6rem;right:1.6rem;padding:1.6rem} }

/* ---------- 15. Мелкие мобильные правки ---------- */
@media (max-width:767.98px){ .svc__bar{width:auto;min-width:0} }

/* ---------- 16. Мобильный аудит (27.09): зоны нажатия, безопасные зоны iPhone, калькулятор, контраст ----------
   Проверено скриптом .cache/pptr/mobile-audit.mjs на всех 225 страницах при 320/360/375/414px и в открытых состояниях. */

/* iPhone: с viewport-fit=cover страница идёт под «чёлку» и полоску «домой» — отступаем на безопасные зоны */
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.header{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.mobilebar{padding-bottom:max(.8rem,env(safe-area-inset-bottom))}
.drawer__panel{padding-bottom:max(2rem,env(safe-area-inset-bottom));overscroll-behavior:contain}

/* зона нажатия 44px без изменения раскладки шапки: невидимое расширение вокруг маленьких кнопок */
.hnav__tools .icon-btn,.hnav__city .picker__btn,.hnav__phone,.header .logo{position:relative}
.hnav__tools .icon-btn::after,.hnav__city .picker__btn::after{content:"";position:absolute;inset:-.4rem}
.hnav__phone::after,.header .logo::after{content:"";position:absolute;left:0;right:0;top:50%;height:4.4rem;transform:translateY(-50%)}

@media (max-width:767.98px){
  /* якоря: шапка на телефоне 56px, а не 94 — иначе раздел открывается с лишним провалом сверху */
  html{scroll-padding-top:calc(var(--header-h) + 1.6rem)}
  .hnav__tools .icon-btn{width:4rem;height:4rem}
  .floatwa{bottom:calc(10.4rem + env(safe-area-inset-bottom))}
  .cookie{bottom:calc(10.4rem + env(safe-area-inset-bottom))}
  /* круглая кнопка WhatsApp пропадает, пока в кадре своя кнопка WhatsApp первого экрана (иначе две кнопки друг на друге) */
  .floatwa{transition:transform var(--ease),opacity var(--ease)}
  .has-hero-wa .floatwa{opacity:0;transform:scale(.6);pointer-events:none}

  /* 28.09: вкладки (калькулятор, площадки отзывов, районы отделений) — одна строка, листается пальцем.
     Раньше они переносились в 2–5 рядов разной длины и «висели криво». Белая плашка снова ездит за выбранной вкладкой,
     выбранная прокручивается к центру (widgets-v3.js), а затухание у края (data-overflow) показывает, что дальше есть ещё */
  .tabbar{display:flex;width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    scroll-snap-type:x proximity;scroll-padding-inline:.2rem}
  .tabbar::-webkit-scrollbar{display:none}
  .tabbar .tabbar__list{flex-wrap:nowrap}
  .tabbar .tab{flex:none;height:4.4rem;padding-inline:1.6rem;scroll-snap-align:start}
  .tabbar[data-overflow="start"]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 5.6rem),#0000);mask-image:linear-gradient(90deg,#000 calc(100% - 5.6rem),#0000)}
  .tabbar[data-overflow="middle"]{-webkit-mask-image:linear-gradient(90deg,#0000,#000 4rem,#000 calc(100% - 5.6rem),#0000);mask-image:linear-gradient(90deg,#0000,#000 4rem,#000 calc(100% - 5.6rem),#0000)}
  .tabbar[data-overflow="end"]{-webkit-mask-image:linear-gradient(90deg,#0000,#000 4rem);mask-image:linear-gradient(90deg,#0000,#000 4rem)}
  /* всё помещается (2–3 вкладки) — делят строку поровну, без пустого хвоста справа */
  .tabbar[data-overflow="none"] .tabbar__list{width:100%}
  .tabbar[data-overflow="none"] .tabbar__list>li{flex:1 1 auto;display:flex}
  .tabbar[data-overflow="none"] .tab{flex:1 1 auto;justify-content:center}

  /* калькулятор: кнопки бренда, шагов и режима — не меньше 44px по высоте */
  .qbrand,.rmode__btn{height:4.4rem}
  .qsteps__btn{min-height:4.4rem;justify-content:center}
  /* список моделей прокручивается внутри, но в конце списка страница должна листаться дальше, а не «застревать» */
  .qlist{overscroll-behavior:auto}
  /* сумма результата подгоняется по ширине в calc-v3.js (казахское «ең көбі 193 000 ₸» не влезало даже на 360px) */
  .ccard__big{font-size:min(3.6rem,9vw)}
  .ccard__big.is-long{font-size:min(3rem,7.6vw)}

  /* отзывы: «нравится» — полноценная кнопка, а не цифра высотой 18px */
  .like{min-height:4.4rem;padding-inline:1rem;margin:-1.2rem -1rem -1.2rem 0}

  /* подвал: ссылки в столбик на расстоянии пальца; последняя строка не прячется под круглой кнопкой WhatsApp */
  .footer{padding-bottom:calc(18rem + env(safe-area-inset-bottom))}
  .footer__col li+li{margin-top:0}
  .footer__col a{display:block;padding-block:1.2rem}
  .footer__phone,.footer__mail{display:inline-block;padding-block:.9rem}
  .footer__bottom a.footer__policy{display:inline-block;padding-block:1rem}

  /* мелкий серый текст #a7a7ac на белом — 2,1–2,4:1, на улице не читается. Темнее, но та же иерархия */
  .footer__bottom a.footer__policy,.footer__copy,.footer__disclaimer,.review__foot,.like,.calc__disclaimer,.search__label{color:var(--base-500)}
  .ccard__label,.ccard__mode,.ccard__paytext{color:#c9c9ce}
  .promo__desc{color:#fff}

  /* шторка: подзаголовки групп были 13px (правило — не мельче 16px) */
  .dnav__sub{font-size:1.6rem;letter-spacing:.02em;color:var(--base-500)}
  .drawer__nav .dnav__body a{padding-block:1rem}

  /* поиск: окно с полями по бокам; подсказка в поле целиком («…или оцени» обрезалось) */
  .search{padding:8vh 1.2rem 0}
  .search__field input{font-size:1.6rem}
  .search__list a{padding-block:1.2rem}
}
/* 320px: «Займ под залог / Продать сразу» не помещались в переключатель */
@media (max-width:359.98px){
  .rmode{margin-inline:.4rem}
  .rmode__btn{padding-inline:.2rem;letter-spacing:-.02em}
  .hnav__tools .icon-btn{width:3.6rem;height:3.6rem}
}
/* планшеты и телефоны без мыши: подъём карточки по :hover «залипал» после касания */
@media (hover:none){
  .maincard:hover,a.svc:hover{transform:none;box-shadow:none}
  .maincard:active,a.svc:active{transform:scale(.985)}
  .btn--shine:hover{animation-play-state:running}
}
/* подписи карточек-ярлыков: длинное слово переносится, а не обрезается краем карточки */
.maincard__label{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
@media (max-width:399.98px){
  .maincard{padding:.8rem .3rem}
  .maincard__label{letter-spacing:-.03em}
  /* способы выплаты: подпись под иконками, а не узким столбиком в 5 строк рядом с ними */
  .ccard__pays{flex-wrap:wrap;gap:1.2rem}
}

/* ---------- 17. Мобильный редизайн (28.09) ---------- */

/* Серый квадрат при нажатии (FAQ, карточки, кнопки): это не наш стиль, а подсветка касания браузера — Safari на iPhone
   по умолчанию заливает всю область нажатой ссылки/кнопки полупрозрачным тёмно-серым прямоугольником и держит его,
   пока палец на экране. У вопроса FAQ эта область — вся строка шириной в экран, поэтому «квадрат» так заметен.
   Убираем системную подсветку и даём свою обратную связь через :active (у кнопок и карточек она уже есть) */
html{-webkit-tap-highlight-color:transparent}
.tab:active,.navbtn:active,.mobilebar__item:active,.dnav__head:active{opacity:.72}

/* верхняя красная полоса (десктоп): вместо выпадающего списка городов — метка «Алматы · 14 отделений» (города скрыты) */
.htop__city{display:inline-flex;align-items:center;gap:.6rem;font-size:1.6rem;font-weight:500;letter-spacing:-.01em;color:#fff}
.htop__city:hover span{text-decoration:underline;text-underline-offset:.3rem}

/* крупные суммы — одной строкой, шрифт подгоняет main-v3.js (fitNumbers) */
[data-fit]{display:block;max-width:100%;white-space:nowrap}


/* ---------- 18. Композиция (29.09, /impeccable layout): ритм глав, группировка, адаптация ----------
   Замеры до правки: все зазоры между секциями одинаковые — 100 / 107 / 56px (десктоп / планшет / телефон), главы не читались.
   Итог калькулятора и его кнопка на десктопе стояли в 730px друг от друга; главная кнопка на планшете уходила за первый экран. */

/* Ритм главной: два уровня. Внутри главы — тесно, между главами — просторно.
   Главы: [первый экран + слайдер] | [услуги + 4 шага] | [калькулятор + «Оценим бесплатно»] | [команда + статья] | [отзывы + вопросы] */
.home{--gap-inner:6.4rem;--gap-chapter:12.8rem}
@media (max-width:1279.98px){ .home{--gap-inner:5.6rem;--gap-chapter:11.2rem} }
@media (max-width:767.98px){ .home{--gap-inner:4rem;--gap-chapter:7.2rem} }
.home .hero,.home .services,.home .calc,.home .team,.home .reviews{margin-bottom:var(--gap-inner)}
.home .aboutslider,.home .steps,.home .article-block,.home .faq{margin-bottom:var(--gap-chapter)}
.home .promo{margin-top:var(--gap-inner);margin-bottom:var(--gap-chapter)}

/* Первый экран главной, десктоп: служебные плитки («Отделения», «Скупка») отделены от шести категорий «Сдать …» —
   это разные группы, раньше их склеивал одинаковый зазор 8px */
@media (min-width:1280px){
  .home .maincards{grid-template-columns:repeat(2,minmax(0,1fr)) .8rem repeat(6,minmax(0,1fr))}
  .home .maincards__item:nth-child(3){grid-column-start:4}
}
/* подпись под главной кнопкой — и на планшете с телефоном (на десктопе она уже есть) */
.hero__note--m{display:none}
@media (max-width:1279.98px){ .hero__note--m{display:block;margin-top:1.2rem} }

/* Слайдер «о компании» на десктопе занимал 700px — второй экран целиком. Фото и подпись компактнее (~600px) */
@media (min-width:1280px){
  .aboutslider{padding-bottom:10rem}
  .aboutslider__slide img{height:50rem}
  .aboutslider__panel{min-height:18rem;padding:2.4rem 4rem;gap:2rem}
}

/* «4 шага» на планшете — сеткой 2×2: карточки помещаются, слайдер прятал половину */
@media (min-width:768px) and (max-width:1279.98px){
  .steps__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));transform:none!important}
  .steps .hslider__nav{display:none}
}

/* Калькулятор: вкладки ближе к тому, чем управляют; на десктопе тёмная панель — по контенту и «липнет» при прокрутке,
   кнопка «Отправить оценщику» сразу под суммой, а не прибита к низу пустой панели */
.calc__tabs{margin-bottom:1.6rem}
@media (min-width:1280px){
  .calc__layout{align-items:start}
  .ccard--result{position:sticky;top:calc(var(--header-h) + 2rem)}
  .ccard__cta{margin-top:0}
}

/* Отзывы (все ширины): заголовок → площадки → сами отзывы → кнопки «Консультация» и «Оставить отзыв».
   Раньше кнопки стояли между заголовком и отзывами, красная «Оставить свой отзыв» была сильнее самого контента */
.reviews__head{margin-bottom:1.6rem}
.reviews__buttons{margin-top:2.4rem}

/* Частые вопросы: закрытый вопрос в одну строку занимал ~100px — компактнее, список короче на ~220px */
@media (min-width:768px){ .qa__btn{padding-block:2.2rem} }

/* Статья на десктопе: строка ~115 знаков → до 76, читать легче; таблицы остаются на всю ширину колонки */
@media (min-width:1280px){
  .article__lead,.article__body > p,.article__body > ul,.article__body > ol{max-width:76ch}
}

/* --- перенесено из pages-v3.css: общее для главной и внутренних страниц --- */
/* Таблицы статей в 3+ колонки на телефоне — карточками: «название → подпись: значение» (tools/site_editor.py ставит data-label).
   Раньше таблица листалась вбок, и колонки «Продажа сразу», «Документы» прятались за краем экрана */
@media (max-width:767.98px){
  .article__table.is-stack{overflow:visible;border:0;border-radius:0;background:none;margin-top:1.6rem}
  .is-stack table,.is-stack tbody,.is-stack tr,.is-stack th,.is-stack td{display:block;width:auto}
  .is-stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .is-stack caption{display:block;padding:0 0 .4rem;background:none;text-align:left}
  .is-stack tr{margin-top:.8rem;padding:1.2rem 1.6rem 1.4rem;border:.1rem solid var(--base-100);border-radius:var(--r-lg);background:#fff}
  .is-stack tbody th,.is-stack td:first-child{padding:0;border:0;text-align:left;white-space:normal;font-size:1.6rem;font-weight:600;color:var(--base-900)}
  .is-stack td[data-label]{display:flex;justify-content:space-between;align-items:baseline;gap:1.6rem;min-width:0;
    margin-top:.8rem;padding:.8rem 0 0;border:0;border-top:.1rem solid var(--base-50);text-align:right;white-space:normal}
  .is-stack td[data-label]::before{content:attr(data-label);flex:0 1 50%;text-align:left;font-weight:400;color:var(--base-500)}
}


/* Планшет: карточки первого экрана одним рядом (--m — число карточек), а не сеткой 3×2 из огромных квадратов 250px */
@media (min-width:768px) and (max-width:1279.98px){
  .maincards{grid-template-columns:repeat(var(--m,6),minmax(0,1fr))}
  .maincards .maincards__item,
  .maincards--tail2 .maincards__item:nth-last-child(2),
  .maincards--tail1 .maincards__item:last-child{grid-column:auto}
  .maincards .maincards__item--buy{grid-column:1/-1}
}


/* Подвал на телефоне: колонки ссылок — гармошкой (pages-v3.js ставит .is-acc), открыта та, где текущая страница */
@media (max-width:767.98px){
  .footer.is-acc .footer__body{gap:0}
  .footer.is-acc .footer__aside{margin-bottom:2.4rem}
  .footer.is-acc .footer__col{border-top:.1rem solid var(--base-100)}
  .footer.is-acc .footer__title{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;margin:0;min-height:5.6rem;cursor:pointer}
  .footer.is-acc .footer__title::after{content:"";flex:none;width:.9rem;height:.9rem;margin-right:.4rem;
    border-right:.2rem solid var(--base-500);border-bottom:.2rem solid var(--base-500);transform:translateY(-.2rem) rotate(45deg);transition:transform var(--ease)}
  .footer.is-acc .footer__col.is-open .footer__title::after{transform:translateY(.2rem) rotate(-135deg)}
  .footer.is-acc .footer__col ul{display:none;padding-bottom:1.2rem}
  .footer.is-acc .footer__col.is-open ul{display:block}
}
.legal .article__body a{color:var(--accent-500);text-decoration:underline;text-underline-offset:.3rem}

/* зоны нажатия в подвале — не меньше 44px (ссылки гармошки и политика данных) */
@media (max-width:767.98px){
  .footer.is-acc .footer__col a{padding-block:1.3rem}
  .footer__bottom a.footer__policy{padding-block:1.2rem}
}

/* Таблицы статей: ячейки со значениями переносятся (числа склеены неразрывными пробелами в site_editor.typograph),
   иначе таблица в 4 колонки вылезала из колонки статьи и на десктопе (973px в 832), и на телефоне */
.article__body .article__table th,.article__body .article__table td{white-space:normal}
/* ^ специфичность выше, чем у «.article__table th,td{nowrap}» в sections-v3.css: там перенос для таблиц --flow
   объявлен раньше nowrap с той же специфичностью и никогда не срабатывал (давний баг каскада) */


/* ---------- 19. Полировка (29.09, /impeccable polish) ---------- */

/* Контраст на всех ширинах (27.09 правили только телефон). Серый #a7a7ac на белом давал 2,1–2,4:1 — берём #6d6d75 (5:1),
   на тёмной карточке калькулятора — #c9c9ce вместо 3,5:1. Фирменный белый на красном (4,38:1) и зелёный WhatsApp — решение бренда */
.qsteps__val,.calc__disclaimer,.byline__dates,.review__foot,.like,.footer__copy,.footer__disclaimer,.search__label,
.footer__bottom a.footer__policy,.doc__meta{color:var(--base-500)}
.ccard__label,.ccard__mode,.ccard__paytext{color:#c9c9ce}
.promo__desc,.maincard__sub{color:#fff}
/* мелкий красный текст на светлом фоне (3,9–4,4:1) — тёмно-красный из той же палитры */
.rtab__val,.qopt[aria-pressed="true"] .qopt__s,.mobilebar__item.is-active{color:var(--accent-600)}

/* Поверхности браузера — в палитре сайта, а не системные: выделение, каретка, полосы прокрутки, подчёркивания */
::selection{background:var(--accent-100);color:var(--base-900)}
input,textarea{caret-color:var(--accent-500)}
html{scrollbar-color:#c4c4c9 var(--base-50)}
.article__body a,.faq-card__text a{text-underline-offset:.3rem;text-decoration-thickness:.1rem}
/* дата статьи: .byline__dates в sections-v3.css подключается позже — повышенная специфичность */
.byline .byline__dates{color:var(--base-500)}

/* ============================================================
   20. Правки лида 29.09
   ============================================================ */
/* подвал: WhatsApp убран (рядом CTA-карточка и плавающая кнопка) — кнопка «Отделения на карте» фирменная красная */
.footer__actions .footer__map{background:var(--accent-500);border-color:var(--accent-500);color:#fff}
.footer__actions .footer__map:hover{background:var(--accent-600);border-color:var(--accent-600)}
.footer__actions .footer__map:focus-visible{outline:.2rem solid var(--accent-600);outline-offset:.2rem}
/* слайдер команды: под курсором кант замирает и продолжает с того же места — слайд переключается по концу круга.
   Селектор специфичнее правила анимации (.navprogress.is-playing …): его сокращение animation сбрасывает play-state в running */
.is-hover-paused .navprogress.is-playing .navprogress__ring rect{animation-play-state:paused}

/* ============================================================
   21. Выкладка на домен (02.10)
   ============================================================ */
/* пометка «демо-версия» под юридическим текстом подвала: тот же шрифт, но заметнее — данные на сайте вымышленные */
.footer__demo{margin-top:-1.6rem;padding:0 2.8rem 3.2rem;font-size:1.6rem;line-height:1.4;font-weight:500;color:var(--base-700)}
@media (max-width:767.98px){ .footer__demo{padding-inline:2rem} }
/* страница 404 */
.notfound__links{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:var(--section-gap)}
.notfound__links a{display:inline-flex;align-items:center;min-height:4.4rem;padding-inline:1.6rem;border-radius:var(--r-md);background:var(--base-50);font-size:1.6rem;font-weight:500;color:var(--base-700)}
.notfound__links a:hover{color:var(--accent-600)}

/* второй номер (скупка / ломбард) под основным телефоном в подвале и на «Контактах» */
.footer__alt{margin-top:.8rem;font-size:1.6rem;color:var(--base-500)}
.footer__alt a{font-weight:600;color:var(--base-900);white-space:nowrap}
.footer__alt a:hover{color:var(--accent-500)}
.footer__partner span{min-width:0}
.footer__alt{margin-bottom:.8rem}
@media (max-width:767.98px){ .footer__partner .logo__img{height:2rem} }