/* kit.css: общие стили блоков и эффектов движка SiteKit.
   Входит в ядро и обновляется вместе с ним: не правьте вручную, оформление клиента держите в site.css (и tokens.css).
   Опирается на переменные из tokens.css (--color-accent, --color-glow, --radius, --font-head и др.). */

/* карточки в сетке появляются по очереди, когда сетка дошла до экрана */
@keyframes card-in{from{opacity:0;transform:translateY(16px)}}
@media (prefers-reduced-motion:no-preference){
  .js .container>.is-in.grid>*,.js .container>.is-in.reviews>*,.js .container>.is-in.cases-list>*{animation:card-in .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 70ms)}
}
.stat__value,.card__stat{font-variant-numeric:tabular-nums}

/* ===== Увеличение сканов писем-отзывов ===== */
.review__scan,.card--scan{cursor:zoom-in}
.card--scan:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
.lightbox{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(10,6,24,.86);backdrop-filter:blur(6px);animation:modal-fade .2s ease both}
.lightbox__img{max-width:min(960px,92vw);max-height:90vh;width:auto;height:auto;object-fit:contain;border-radius:12px;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.5);animation:modal-pop .25s ease both}
.lightbox__close,.lightbox__nav{position:absolute;display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer;transition:background .15s}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(255,255,255,.28)}
.lightbox__close{top:18px;right:18px}
.lightbox__nav--prev{left:18px;top:50%;transform:translateY(-50%)}
.lightbox__nav--next{right:18px;top:50%;transform:translateY(-50%)}
.lightbox.is-single .lightbox__nav{display:none}
.lightbox__count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.8);font-size:14px}
body.lightbox-open{overflow:hidden}

/* ===== Подсказка у формы по часам работы ===== */
.form-promise{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:14px;color:var(--color-muted)}
.form-promise[hidden]{display:none}
.form-promise::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:#f0a030}
.form-promise.is-open::before{background:#25b36b;box-shadow:0 0 0 0 rgba(37,179,107,.5);animation:promise-pulse 2s ease-out infinite}
@keyframes promise-pulse{70%{box-shadow:0 0 0 8px rgba(37,179,107,0)}100%{box-shadow:0 0 0 0 rgba(37,179,107,0)}}
@media (prefers-reduced-motion:reduce){.form-promise.is-open::before{animation:none}}

/* ===== Статья: прогресс чтения и «поделиться» ===== */
.read-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:120;pointer-events:none;background:transparent}
.read-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--color-accent),var(--color-glow),#ff8ad8);box-shadow:0 0 10px var(--color-glow);transition:width .08s linear}
.share{padding:8px 0 28px}
.share .container{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.share__label{color:var(--color-muted);font-weight:700}
.share__link{display:inline-block;padding:9px 16px;border:1px solid #b9a6ff;border-radius:999px;background:#fff;color:var(--color-accent);font:700 13px var(--font-body);text-decoration:none;cursor:pointer;transition:background .2s,transform .2s}
.share__link:hover{background:var(--color-bg-soft);transform:translateY(-2px)}

/* ===== Плавные переходы между страницами и отклик на нажатие ===== */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vt-out .18s ease both}
  ::view-transition-new(root){animation:vt-in .3s ease both}
}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
.btn{transition:transform .18s ease,box-shadow .2s ease,filter .2s ease}
.btn:active{transform:translateY(1px) scale(.98)}
.card:has(>a){transition:transform .25s ease,box-shadow .25s ease}
.card:has(>a):hover{transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){.btn,.card:has(>a){transition:none}.btn:active,.card:has(>a):hover{transform:none}}

/* ===== Мобильная доработка: первый экран, зоны нажатия, меню с контактами, скорость, сворачиваемые секции ===== */
.nav__contacts{display:none}
@media (max-width:860px){
  /* меню-панель: крупные пункты и контакты внутри */
  .header__row>.nav a{padding:17px 4px;font-size:19px}
  .header__row>.nav .nav__contacts{display:grid;gap:10px;margin-top:14px}
  .nav__contacts a{display:flex;align-items:center;justify-content:center;border:0;border-radius:14px;padding:15px;font:700 16px var(--font-head);text-align:center}
  .header__row>.nav .nav__phone{background:var(--color-bg-soft);color:var(--color-accent)}
  .header__row>.nav .nav__write{background:#167aa8;color:#fff}
  /* нижняя панель из трёх действий */
  .mobile-bar--3{grid-template-columns:auto auto 1fr;gap:8px}
  .mobile-bar--3 a{padding-left:14px;padding-right:14px}
  .mobile-bar__write{background:#e6f4fb;color:#0c6290}
  /* слайдеры: виден край следующей карточки, точки нажимаются без промаха */
  [data-slider]>*{flex-basis:80%;max-width:80%}
  .slider-dots button{position:relative}
  .slider-dots button::before{content:"";position:absolute;inset:-18px -9px}
  /* зоны нажатия не меньше 44 пикселей */
  .lead-form .check{min-height:44px;align-items:center}
  .lead-form .check input{width:24px;height:24px;flex:none;margin:0}
  .footer__links a{display:inline-block;padding:11px 0}
  .footer__contacts a,.footer__links a{display:inline-flex;align-items:center;min-height:44px}
  .footer__contacts a{padding:0}
  .messengers .social{width:44px;height:44px}
  .breadcrumbs a{display:inline-block;padding:10px 2px}
  /* блоки ниже первого экрана рисуются, когда до них доходит прокрутка */
  main>section:not(:first-child){content-visibility:auto;contain-intrinsic-size:auto 640px}
  /* окно с формой: кнопка отправки всегда на виду */
  .modal__box{max-height:calc(100dvh - 24px);overflow-y:auto}
  .modal__box .lead-form button[type=submit]{position:sticky;bottom:0;box-shadow:0 -12px 14px #fff}
}
@media (max-width:640px){
  /* первый экран: заголовок поменьше, кнопка сразу под текстом, плашки компактной сеткой */
  .hero h1{font-size:clamp(24px,7vw,30px)}
  .hero__text{display:flex;flex-direction:column}
  .hero__text>.btn{order:2;align-self:stretch;text-align:center}
  .hero__items{order:3;margin:20px 0 4px}
  .hero__bullets{order:3}
}
/* длинный текст и длинные списки вопросов сворачиваются (скрипт включает это только на телефоне) */
.is-clamped{position:relative;max-height:340px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
.read-more,.faq__toggle{display:block;margin:14px auto 0;min-height:44px;padding:11px 24px;border:1px solid #b9a6ff;border-radius:999px;background:#fff;color:var(--color-accent);font:700 14px var(--font-body);cursor:pointer}
.faq__item--more{display:none}
.faq.is-open .faq__item--more{display:block}

/* ===== Бенто-мозаика ===== */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(190px,auto);grid-auto-flow:dense;gap:16px;margin-top:28px}
.bento__item{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;border-radius:var(--radius);padding:26px 28px;
  background:rgba(255,255,255,.72);border:1px solid rgba(134,102,255,.16);box-shadow:var(--glow);transition:transform .25s ease,box-shadow .25s ease}
.bento__item--wide{grid-column:span 2}
.bento__item--tall{grid-row:span 2}
.bento__item--big{grid-column:span 2;grid-row:span 2}
.bento__body{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px}
.bento__body h3{margin:0;font-size:clamp(17px,1.1vw + 7px,22px)}
.bento__body p{margin:0;color:var(--color-muted);font-size:15px;line-height:1.5}
.bento__item .icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--color-bg-soft);color:var(--color-accent)}
.bento__item .icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bento__value{font:700 clamp(30px,3vw,52px)/1 var(--font-head);font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,var(--color-accent),#ff6fd8);-webkit-background-clip:text;background-clip:text;color:transparent}
.bento__more{position:relative;z-index:1;align-self:flex-start;margin-top:6px;font-weight:700;font-size:14px;color:var(--color-accent);text-decoration:none}
.bento__more::after{content:"";position:absolute;z-index:2;inset:-1000px}
.bento__item--accent{background:linear-gradient(140deg,#7b4dff,#4a63ff 70%,#36c6ff);border-color:transparent;color:#fff}
.bento__item--accent .bento__body h3,.bento__item--accent .bento__body p,.bento__item--accent .bento__more{color:#fff}
.bento__item--accent .bento__value{background:none;color:#fff}
.bento__item--accent .icon{background:rgba(255,255,255,.2);color:#fff}
.bento__item--dark{background:#120a2b;border-color:rgba(134,102,255,.4);color:#fff;box-shadow:0 0 0 1px rgba(134,102,255,.25),0 22px 44px -20px rgba(108,76,241,.75)}
.bento__item--dark .bento__body h3{color:#fff}
.bento__item--dark .bento__body p{color:rgba(255,255,255,.75)}
.bento__item--dark .bento__value{background:linear-gradient(135deg,#b9a6ff,#6fe0ff);-webkit-background-clip:text;background-clip:text}
.bento__item--dark .bento__more{color:#b9a6ff}
.bento__item--dark .icon{background:rgba(134,102,255,.25);color:#d6caff}
.bento__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.bento__item--photo{color:#fff;border-color:transparent}
.bento__item--photo::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(14,8,34,.5),rgba(14,8,34,.9))}
.bento__item--photo .bento__body h3,.bento__item--photo .bento__body p,.bento__item--photo .bento__more{color:#fff}
.bento__item--photo .bento__value{background:none;color:#fff;-webkit-text-fill-color:#fff}
.bento__item--photo .icon{background:rgba(255,255,255,.2);color:#fff}
@media (hover:hover){
  .bento__item:hover{transform:translateY(-4px);box-shadow:0 22px 48px -16px rgba(92,84,255,.4)}
  .bento__item:hover .bento__img{transform:scale(1.05)}
}
@media (max-width:1000px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .bento{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:12px}
  .bento__item--wide,.bento__item--tall,.bento__item--big{grid-column:auto;grid-row:auto}
  .bento__item{min-height:150px;padding:22px}
  .bento__item--big,.bento__item--photo{min-height:240px}
}
@media (prefers-reduced-motion:no-preference){
  .js .container>.is-in.bento>*{animation:card-in .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 70ms)}
}
@media (prefers-reduced-motion:reduce){.bento__item,.bento__img{transition:none}.bento__item:hover,.bento__item:hover .bento__img{transform:none}}

/* ===== Этапы работы: линия прогресса и подсветка пройденных шагов по прокрутке ===== */
.steps--story{position:relative;isolation:isolate}
.steps--story::before{content:"";position:absolute;z-index:0;left:27px;top:28px;bottom:64px;width:2px;border-radius:2px;background:#d9d0ff}
.steps--story::after{content:"";position:absolute;z-index:0;left:27px;top:28px;width:2px;height:calc((100% - 92px) * var(--p,0));border-radius:2px;
  background:linear-gradient(180deg,var(--color-accent),var(--color-glow),#ff8ad8);box-shadow:0 0 12px var(--color-glow)}
.steps--story .steps__item:not(:last-child)::before{display:none}
.steps--story .steps__item{z-index:1}
.steps--story .steps__item:not(.is-lit) .steps__body{opacity:.45}
.steps--story .steps__body{transition:opacity .4s ease}
.steps--story .steps__item.is-lit .steps__num{background:var(--color-accent);color:#fff;box-shadow:0 0 0 6px rgba(108,76,241,.14),0 8px 22px -6px var(--color-glow)}
@media (max-width:640px){
  .steps--story::before,.steps--story::after{left:21px;top:22px}
  .steps--story::before{bottom:48px}
  .steps--story::after{height:calc((100% - 70px) * var(--p,0))}
}
@media (prefers-reduced-motion:reduce){.steps--story .steps__body{opacity:1;transition:none}}

/* бенто: размер числа и заголовка зависит от размера плитки, длинные слова не вылезают */
.bento__value{font-size:clamp(22px,1.8vw,30px);overflow-wrap:break-word}
.bento__item--big .bento__value,.bento__item--wide .bento__value{font-size:clamp(32px,3.2vw,54px)}
.bento__item:not(.bento__item--big):not(.bento__item--wide) .bento__body h3{font-size:clamp(14px,.5vw + 9px,17px);line-height:1.25}
.bento__item:not(.bento__item--big):not(.bento__item--wide) .bento__body p{font-size:13.5px;line-height:1.45}
@media (max-width:640px){
  .bento__value,.bento__item--big .bento__value,.bento__item--wide .bento__value{font-size:clamp(30px,9vw,40px)}
  .bento__item:not(.bento__item--big):not(.bento__item--wide) .bento__body h3{font-size:18px}
  .bento__item:not(.bento__item--big):not(.bento__item--wide) .bento__body p{font-size:14px}
}

/* бенто: подпись не длиннее трёх строк, метка категории ярлыком */
.bento__body p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.bento__chip{align-self:flex-start;padding:4px 11px;border-radius:999px;background:var(--color-bg-soft);color:var(--color-accent);font:700 12px/1.2 var(--font-body);letter-spacing:.02em}
.bento__item--accent .bento__chip,.bento__item--photo .bento__chip{background:rgba(255,255,255,.2);color:#fff}
.bento__item--dark .bento__chip{background:rgba(134,102,255,.25);color:#d6caff}