/* Translation and localisation: the shared VAK shell with a warm champagne
   accent (palette lives in service-page.css). Relay, groups and steps follow
   the annotated brief. */
.sp[data-service="localization"] .sp-section{padding-block:clamp(60px,6.5vw,100px)}

/* Hero: the offer as the title, a larger sphere, no decorative trace. */
.sp[data-service="localization"] .sp-title{max-width:12em}
.sp[data-service="localization"] .sp-lead{max-width:52ch}
.sp[data-service="localization"] .sp-hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px)}
.sp[data-service="localization"] .sp-hero__visual{min-height:clamp(420px,40vw,560px)}
.sp[data-service="localization"] .sp-hero__object{width:150%;right:-12%;opacity:.96;transform:translate3d(0,-50%,0);transform-origin:center;mask-image:linear-gradient(90deg,transparent,#000 28%,#000 86%,transparent),linear-gradient(0deg,transparent,#000 14%,#000 86%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent,#000 28%,#000 86%,transparent),linear-gradient(0deg,transparent,#000 14%,#000 86%,transparent);-webkit-mask-composite:source-in}
.sp[data-service="localization"] .sp-hero__visual:hover .sp-hero__object{transform:translate3d(0,-50%,0) scale(1.015);filter:brightness(1.05)}

/* 5.4: one line, five points; colour moves from champagne to lilac. */
.sp-loc-relay-section .sp-head{margin-bottom:clamp(40px,5vw,72px)}
.sp-loc-relay{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none;margin:0;padding:0}
/* Правки ч. 4: линия метрики идёт до конца блока. */
.sp-loc-relay::before{content:'';position:absolute;left:5px;right:0;top:5px;height:1px;background:linear-gradient(90deg,rgba(var(--sp-accent-rgb),.8),rgba(var(--sp-cy-rgb),.7) 50%,rgba(var(--sp-mag-rgb),.85));transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--e-out) .1s}
.sp-loc-relay.is-in::before{transform:scaleX(1)}
.sp-loc-relay li{position:relative;padding-right:clamp(16px,2vw,30px);opacity:0;transform:translateY(12px);transition:opacity .7s var(--e-out) calc(.12s + var(--sp-item-delay)),transform .8s var(--e-out) calc(.12s + var(--sp-item-delay))}
.sp-loc-relay.is-in li{opacity:1;transform:none}
.sp-loc-relay li>i{--dot:var(--sp-accent-rgb);display:block;width:11px;height:11px;margin-bottom:26px;border-radius:50%;background:rgb(var(--dot));box-shadow:0 0 0 4px var(--bg),0 0 16px rgba(var(--dot),.7)}
.sp-loc-relay li:nth-child(2)>i{--dot:238,189,162}
.sp-loc-relay li:nth-child(3)>i{--dot:var(--sp-cy-rgb)}
.sp-loc-relay li:nth-child(4)>i{--dot:222,172,205}
.sp-loc-relay li:nth-child(5)>i{--dot:var(--sp-mag-rgb)}
.sp-loc-relay h3{margin:0;font-size:clamp(19px,1.6vw,23px);font-weight:390;line-height:1.22;letter-spacing:-.028em}
.sp-loc-relay li:last-child h3{color:rgb(var(--sp-mag-rgb))}
.sp-loc-relay p{margin:10px 0 0;max-width:23ch;color:var(--ink-2);font-size:14.5px;line-height:1.55}

/* 5.3: four groups, lists as in the brief, points in a colour gradient. */
.sp-loc-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,64px)}
.sp-loc-group{--group-rgb:var(--sp-accent-rgb);position:relative;padding:24px 0 26px 26px;border-top:1px solid rgba(var(--group-rgb),.24);opacity:0;transform:translateY(12px);transition:opacity .7s var(--e-out) calc(.08s + var(--sp-item-delay)),transform .8s var(--e-out) calc(.08s + var(--sp-item-delay))}
.sp-loc-group:nth-child(2){--group-rgb:238,189,162}
.sp-loc-group:nth-child(3){--group-rgb:var(--sp-cy-rgb)}
.sp-loc-group:nth-child(4){--group-rgb:var(--sp-mag-rgb)}
.sp-loc-groups.is-in .sp-loc-group{opacity:1;transform:none}
.sp-loc-group::before{content:'';position:absolute;left:0;top:34px;width:8px;height:8px;border-radius:50%;background:rgb(var(--group-rgb));box-shadow:0 0 12px rgba(var(--group-rgb),.8)}
.sp-loc-group h3{margin:0;font-size:clamp(20px,1.7vw,25px);font-weight:390;line-height:1.22;letter-spacing:-.03em}
.sp-loc-group h3::after{content:'';display:block;width:36px;height:1px;margin-top:12px;background:rgba(var(--group-rgb),.8)}
.sp-loc-group ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 22px;margin:16px 0 0;padding:0;list-style:none}
.sp-loc-group li{position:relative;padding-left:14px;color:var(--ink-2);font-size:14.5px;line-height:1.45}
.sp-loc-group li::before{content:'';position:absolute;left:0;top:.62em;width:4px;height:4px;border-radius:50%;background:rgba(var(--group-rgb),.85)}

/* Working steps: one compact row instead of a tall list. */
.sp-loc-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(18px,2.4vw,34px);list-style:none;margin:0;padding:0}
.sp-loc-steps li{position:relative;padding-top:20px;opacity:0;transform:translateY(12px);transition:opacity .7s var(--e-out) calc(.08s + var(--sp-item-delay)),transform .8s var(--e-out) calc(.08s + var(--sp-item-delay))}
.sp-loc-steps li::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(var(--sp-accent-rgb),.75),rgba(var(--sp-accent-rgb),.1))}
.sp-loc-steps.is-in li{opacity:1;transform:none}
.sp-loc-steps span{display:block;margin-bottom:12px;color:var(--sp-accent);font-size:15px;font-weight:380;letter-spacing:.02em;line-height:1}
.sp-loc-steps h3{margin:0;font-size:clamp(19px,1.6vw,23px);font-weight:390;line-height:1.2;letter-spacing:-.03em}
.sp-loc-steps p{margin:10px 0 0;color:var(--ink-2);font-size:14px;line-height:1.55}

@media(max-width:1000px){
  .sp-loc-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:30px}
  .sp-loc-group ul{grid-template-columns:1fr}
}
@media(max-width:900px){
  .sp-loc-relay{grid-template-columns:1fr;gap:0;padding-left:26px}
  .sp-loc-relay::before{left:5px;right:auto;top:6px;bottom:30px;width:1px;height:auto;background:linear-gradient(rgba(var(--sp-accent-rgb),.8),rgba(var(--sp-mag-rgb),.85));transform:scaleY(0);transform-origin:top}
  .sp-loc-relay.is-in::before{transform:scaleY(1)}
  .sp-loc-relay li{padding:0 0 26px}
  .sp-loc-relay li>i{position:absolute;left:-26px;top:6px;margin:0}
  .sp-loc-relay p{max-width:44ch;margin-top:6px}
  .sp-loc-groups{grid-template-columns:1fr}
}
@media(max-width:700px){
  .sp[data-service="localization"] .sp-hero{min-height:auto;padding-top:calc(var(--nav-h) + 36px);padding-bottom:44px}
  .sp[data-service="localization"] .sp-hero__grid{grid-template-columns:1fr;gap:22px}
  .sp[data-service="localization"] .sp-hero__visual{min-height:60vw;max-height:none}
  .sp[data-service="localization"] .sp-hero__object{width:128%;right:-14%;max-width:none}
  .sp[data-service="localization"] .sp-section{padding-block:52px}
  .sp[data-service="localization"] .sp-proof{gap:10px}
  .sp[data-service="localization"] .sp-proof__item{padding:16px 0 14px}
  .sp-loc-steps{grid-template-columns:1fr;gap:24px}
  .sp-loc-group ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
  .sp-loc-relay::before,.sp-loc-relay li,.sp-loc-group,.sp-loc-steps li{opacity:1;transform:none;transition:none}
  .sp[data-service="localization"] .sp-hero__object,.sp[data-service="localization"] .sp-hero__visual:hover .sp-hero__object{transition:none;transform:translate3d(0,-50%,0)}
}