/* Сервисы компании на главной: стоит после Job Tracker, перед отзывами.

   Пять карточек с маленькими живыми сценами — проверка документа, проверка
   сотрудника, подписание, Job Tracker и антискам-бот. Всё нарисовано кодом,
   картинок нет; при системной настройке «меньше движения» сцены замирают. */

.wid-services{
  max-width:1240px;
  margin:0 auto;
  padding:clamp(56px,8vw,96px) 20px clamp(40px,6vw,72px);
  font-family:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:#1D1D1F;
  --ease:cubic-bezier(.16,1,.3,1);
}
.wid-services__intro{max-width:38ch;margin:0 auto;text-align:center}
.wid-services__intro h2{margin:0;font-size:clamp(30px,5vw,46px);font-weight:750;letter-spacing:-.04em;line-height:1.05;text-wrap:balance}
.wid-services__intro h2 em{font-style:normal;color:#a0a4ab}
.wid-services__intro p{margin:12px 0 0;color:#70757d;font-size:clamp(15px,2vw,18px);line-height:1.5}

.wid-services__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(26px,4vw,40px)}
.wid-service{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  padding:clamp(20px,2.4vw,26px);border-radius:30px;background:#f5f5f7;
  color:inherit;text-decoration:none;
  transition:transform .35s var(--ease),box-shadow .35s ease;
}
.wid-service:hover{transform:translateY(-3px);box-shadow:0 24px 50px rgba(33,44,62,.1)}
.wid-service small{display:block;color:#70757d;font-size:13px;font-weight:700;letter-spacing:.02em}
.wid-service strong{margin-top:6px;font-size:clamp(19px,2.2vw,22px);font-weight:750;letter-spacing:-.02em;line-height:1.2}
.wid-service p{margin:10px 0 0;color:#70757d;font-size:15px;line-height:1.5}
.wid-service__go{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:#1D1D1F;font-size:15px;font-weight:700}
.wid-service__go i{font-size:16px;transition:transform .3s var(--ease)}
.wid-service:hover .wid-service__go i{transform:translateX(3px)}

/* цвета блоков — те же, что на странице сервисов */
.wid-service.is-green{background:linear-gradient(150deg,#e6f6ee,#f7fbf8 58%,#f5f5f7)}
.wid-service.is-violet{background:linear-gradient(150deg,#f2e9ff,#faf7ff 58%,#f5f5f7)}
.wid-service.is-gold{background:linear-gradient(150deg,#fff4d6,#fffaef 58%,#f5f5f7)}
.wid-service.is-blue{background:linear-gradient(150deg,#e8f2ff,#f7faff 58%,#f5f5f7)}
.wid-service.is-red{background:linear-gradient(150deg,#ffe9e9,#fff6f6 58%,#f5f5f7)}
.wid-service.is-wide{grid-column:span 2}

/* общая площадка для сцены */
.sv-scene{position:relative;display:block;height:124px;margin-bottom:16px}
.wid-service.is-wide .sv-scene{height:132px}

/* 1. Job Tracker: этапы загораются по очереди, бегунок едет вперёд */
.sv-track{position:absolute;left:0;right:0;top:34px;display:grid;gap:12px}
.sv-track__line{position:relative;height:8px;border-radius:999px;background:#e3e9f2;overflow:hidden}
.sv-track__line b{position:absolute;inset:0;width:100%;border-radius:999px;background:linear-gradient(90deg,#1f7ff2,#4ea1ff);transform-origin:left;animation:sv-fill 6s var(--ease) infinite}
@keyframes sv-fill{0%,6%{transform:scaleX(.1)}25%{transform:scaleX(.34)}50%{transform:scaleX(.58)}75%{transform:scaleX(.82)}94%,100%{transform:scaleX(1)}}
.sv-track__steps{display:flex;justify-content:space-between}
.sv-track__steps span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff;color:#a0a4ab;font-size:12px;font-weight:800;box-shadow:0 6px 14px rgba(33,44,62,.1);animation:sv-step 6s steps(1,end) infinite}
.sv-track__steps span:nth-child(1){animation-delay:0s}
.sv-track__steps span:nth-child(2){animation-delay:-4.5s}
.sv-track__steps span:nth-child(3){animation-delay:-3s}
.sv-track__steps span:nth-child(4){animation-delay:-1.5s}
@keyframes sv-step{0%,4%{background:#fff;color:#a0a4ab}5%,100%{background:#1f7ff2;color:#fff}}
.sv-track__badge{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:#fff;font-size:12.5px;font-weight:700;box-shadow:0 10px 22px rgba(33,44,62,.12)}
.sv-track__badge i{color:#1f7ff2;font-size:15px}

/* 2. Документ: лист сканируется и получает печать */
.sv-doc{position:absolute;left:50%;top:4px;translate:-50% 0;width:106px;padding:12px 12px 14px;border-radius:14px;background:#fff;box-shadow:0 14px 30px rgba(33,44,62,.14)}
.sv-doc .sv-line{display:block;height:6px;margin-bottom:6px;border-radius:6px;background:#eef1f5}
.sv-doc .sv-line:nth-child(2){width:76%}
.sv-doc .sv-line:nth-child(3){width:90%}
.sv-doc__qr{display:grid;grid-template-columns:repeat(3,9px);grid-auto-rows:9px;gap:3px;margin-top:10px}
.sv-doc__qr i{border-radius:2px;background:#1D1D1F}
.sv-doc__qr i:nth-child(2),.sv-doc__qr i:nth-child(6){background:#cfd8e3}
.sv-doc__scan{position:absolute;left:6px;right:6px;top:8px;height:26px;border-radius:8px;background:linear-gradient(180deg,rgba(31,155,100,0),rgba(31,155,100,.25),rgba(31,155,100,0));animation:sv-scan 4.4s ease-in-out infinite}
@keyframes sv-scan{0%,100%{transform:translateY(0);opacity:0}12%{opacity:1}55%{transform:translateY(74px);opacity:1}70%{opacity:0;transform:translateY(74px)}}
.sv-doc__seal{position:absolute;right:-12px;bottom:-10px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#1f9b64;color:#fff;font-size:21px;box-shadow:0 0 0 6px #eef7f2,0 12px 22px rgba(31,155,100,.32);animation:sv-seal 4.4s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes sv-seal{0%,52%{transform:scale(1) rotate(-8deg)}60%{transform:scale(1.34) rotate(-16deg)}72%,100%{transform:scale(1) rotate(-8deg)}}

/* 3. Сотрудник: удостоверение со сканом и галочкой */
.sv-id{position:absolute;left:50%;top:14px;translate:-50% 0;width:150px;padding:12px;border-radius:14px;background:#fff;box-shadow:0 14px 30px rgba(33,44,62,.14)}
.sv-id__row{display:flex;align-items:center;gap:10px}
.sv-id__photo{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#f2e9ff;color:#8a3fd4;font-size:18px}
.sv-id__lines{flex:1;display:grid;gap:6px}
.sv-id__lines span{display:block;height:6px;border-radius:6px;background:#eef1f5}
.sv-id__lines span:nth-child(2){width:62%}
.sv-id__num{margin-top:10px;padding:6px 0;border-radius:8px;background:#f5f5f7;font-size:12px;font-weight:800;letter-spacing:.06em;text-align:center}
/* луч сканера не должен уезжать за карточку и замазывать номер */
.sv-id__scan{position:absolute;left:6px;right:6px;top:6px;height:18px;border-radius:8px;background:linear-gradient(180deg,rgba(138,63,212,0),rgba(138,63,212,.16),rgba(138,63,212,0));animation:sv-scan-id 4.4s ease-in-out infinite}
@keyframes sv-scan-id{0%,100%{transform:translateY(0);opacity:0}12%{opacity:1}55%{transform:translateY(56px);opacity:1}70%{opacity:0;transform:translateY(56px)}}
.sv-id__check{position:absolute;right:-10px;top:-10px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#1f9b64;color:#fff;font-size:17px;box-shadow:0 0 0 5px #f6f2fc,0 10px 20px rgba(31,155,100,.3);animation:sv-seal 4.4s cubic-bezier(.34,1.56,.64,1) infinite}

/* 4. Подпись: росчерк рисуется сам, перо ведёт */
.sv-sign{position:absolute;left:50%;top:18px;translate:-50% 0;width:170px;padding:14px 14px 10px;border-radius:14px;background:#fff;box-shadow:0 14px 30px rgba(33,44,62,.14)}
.sv-sign svg{display:block;width:100%;height:46px;color:#1f3a8f;stroke-dasharray:320;stroke-dashoffset:320;animation:sv-draw 5s ease-in-out infinite}
@keyframes sv-draw{0%,8%{stroke-dashoffset:320}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:320}}
.sv-sign__rule{display:block;height:2px;margin-top:6px;border-radius:2px;background:#eef1f5}
.sv-sign__pen{position:absolute;right:-8px;bottom:8px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:#c78912;font-size:17px;box-shadow:0 10px 20px rgba(33,44,62,.18);animation:sv-pen 5s ease-in-out infinite}
@keyframes sv-pen{0%,8%{transform:translate(-120px,4px);opacity:0}14%{opacity:1}55%{transform:translate(0,0);opacity:1}70%,100%{opacity:0}}

/* 5. Бот: щит с расходящимся сигналом */
.sv-shield{position:absolute;left:50%;top:16px;translate:-50% 0;display:grid;place-items:center;width:76px;height:76px;border-radius:26px;background:#fff;color:#e5484d;font-size:36px;box-shadow:0 14px 30px rgba(33,44,62,.14)}
.sv-shield:before,.sv-shield:after{content:"";position:absolute;inset:-10px;border-radius:32px;border:2px solid rgba(229,72,77,.35);animation:sv-ping 3.2s ease-out infinite}
.sv-shield:after{animation-delay:1.6s}
@keyframes sv-ping{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.sv-shield__tag{position:absolute;left:50%;bottom:-2px;translate:-50% 0;padding:6px 12px;border-radius:999px;background:#1D1D1F;color:#fff;font-size:11.5px;font-weight:700;white-space:nowrap}

.wid-services__all{display:inline-flex;align-items:center;gap:9px;margin-top:22px;padding:14px 24px;border-radius:999px;background:#1D1D1F;color:#fff;font-size:16px;font-weight:700;text-decoration:none;transition:transform .35s var(--ease)}
.wid-services__all:hover{transform:translateY(-2px)}
.wid-services{display:flex;flex-direction:column;align-items:center}
.wid-services__grid{width:100%}

@media (max-width:900px){
  .wid-services__grid{grid-template-columns:1fr}
  .wid-service{padding:20px}
  .wid-service.is-wide{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
  .sv-track__line b,.sv-track__steps span,.sv-doc__scan,.sv-doc__seal,.sv-id__scan,.sv-id__check,
  .sv-sign svg,.sv-sign__pen,.sv-shield:before,.sv-shield:after{animation:none}
  .sv-doc__seal,.sv-id__check,.sv-sign__pen{opacity:1;transform:none}
  .sv-doc__scan,.sv-id__scan{opacity:0}
  .sv-sign svg{stroke-dashoffset:0}
  .wid-service{transition:none}
}