/* LinkedIn: the shared VAK shell, with a restrained blue / cyan accent.
   The funnel and handover line follow the annotated client references. */
.sp[data-service="linkedin"] .sp-section{padding-block:clamp(64px,7vw,104px)}
.sp[data-service="linkedin"] .sp-caption,
.sp[data-service="linkedin"] .sp-linkedin-funnel__head>p{color:var(--sp-accent)}
.sp[data-service="linkedin"] .sp-hero{min-height:760px;min-height:min(900px,100svh);padding-bottom:72px}
.sp[data-service="linkedin"] .sp-hero__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,64px)}
.sp[data-service="linkedin"] .sp-title{font-size:clamp(36px,3.65vw,54px);max-width:22ch;line-height:1.1}
.sp[data-service="linkedin"] .sp-lead{max-width:49ch}
.sp[data-service="linkedin"] .sp-hero__visual{min-height:480px}
.sp[data-service="linkedin"] .sp-hero__object{width:150%;right:-4%;opacity:.96;transform:translate3d(0,-50%,0);transform-origin:center;mask-image:linear-gradient(90deg,transparent,#000 24%,#000 80%,transparent),linear-gradient(0deg,transparent,#000 18%,#000 82%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24%,#000 80%,transparent),linear-gradient(0deg,transparent,#000 18%,#000 82%,transparent);-webkit-mask-composite:source-in}
.sp[data-service="linkedin"] .sp-hero__visual:hover .sp-hero__object{transform:translate3d(0,-50%,0) scale(1.015);filter:brightness(1.05)}

/* A six-stage glass funnel: stacked tapering rings (SVG), copy in HTML.
   Rings touch, so the light on the axis runs from mouth to mouth. */
.sp-linkedin-funnel-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:center}
.sp-linkedin-funnel__head{display:block;margin:0}
.sp-linkedin-funnel__head>p{margin:0 0 16px}
.sp-linkedin-funnel__head h2{margin:0 0 24px;max-width:13ch}
.sp-linkedin-funnel__head>span{display:block;max-width:36ch;font-size:16px;line-height:1.6}
.sp-linkedin-funnel{position:relative;display:grid;grid-template-columns:1fr;border:0;gap:0}
.sp-linkedin-funnel::after{display:none}
/* A soft light volume behind the glass, so the rings read as lit objects. */
.sp-linkedin-funnel::before{content:'';position:absolute;z-index:-1;left:-6%;width:62%;top:-8%;bottom:-6%;background:radial-gradient(ellipse 50% 46% at 50% 38%,rgba(142,200,255,.16),rgba(177,186,255,.06) 55%,transparent 75%);filter:blur(8px);transform:none;pointer-events:none}
.sp[data-service="linkedin"] .sp-linkedin-funnel>li{padding:0;border:0}
.sp-linkedin-funnel li,.sp-linkedin-funnel li+li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);align-items:stretch;gap:22px;min-height:0;padding:0;border:0}
.sp-linkedin-funnel__shape{position:relative;isolation:isolate;container-type:inline-size;transition:transform .6s var(--e-out),filter .6s var(--e-out)}
.sp-linkedin-funnel__shape svg{display:block;width:100%;height:auto;overflow:visible}
.sp-lf__side{stroke-opacity:.5;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.sp-lf__lip{fill:none;stroke-opacity:.9;stroke-width:1.2;vector-effect:non-scaling-stroke}
.sp-lf__streak{fill:none;stroke:#fff;stroke-opacity:.16;stroke-width:5;filter:blur(1.5px);stroke-linecap:round;vector-effect:non-scaling-stroke}
.sp-lf__mouth{stroke-opacity:.95;stroke-width:1.3;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px currentColor)}
.sp-lf__rim{fill:none;stroke-opacity:.32;stroke-width:1;vector-effect:non-scaling-stroke}
.sp-lf__node{filter:drop-shadow(0 0 5px currentColor)}
/* The axis: a faint line from this ring's mouth to the next, with a soft
   pulse that travels down ring by ring. */
.sp-linkedin-funnel__stack{display:none}
.sp-linkedin-funnel li:not(:last-child) .sp-linkedin-funnel__shape::after,.sp-linkedin-funnel__stack .sp-linkedin-funnel__shape:not(:last-child)::after{content:'';position:absolute;z-index:-1;left:calc(50% - 1px);top:calc(100cqw * 24 / 420);height:100%;width:2px;border-radius:2px;background:linear-gradient(180deg,transparent 0 30%,currentColor 50%,transparent 70% 100%) 0 0/100% 300% no-repeat,linear-gradient(currentColor,currentColor) 50% 0/1px 100% no-repeat;opacity:.55;animation:sp-lf-flow 3.6s linear infinite;animation-delay:calc(var(--funnel-step) * .6s);pointer-events:none}
@keyframes sp-lf-flow{from{background-position:0 100%,50% 0}to{background-position:0 0,50% 0}}
.sp-linkedin-funnel li:hover .sp-linkedin-funnel__shape{transform:translateY(-2px);filter:brightness(1.18)}
.sp-linkedin-funnel__copy{position:relative;align-self:center;padding:6px 0 6px 2px}
.sp-linkedin-funnel__copy::before{content:'';position:absolute;right:calc(100% + 9px);top:18px;width:24px;height:1px;background:currentColor;opacity:.45}
.sp-linkedin-funnel h3{margin:0;font-size:20px;line-height:1.2;letter-spacing:-.025em;font-weight:420;color:var(--ink)}
.sp-linkedin-funnel p{margin:7px 0 0;font-size:14px;line-height:1.5;max-width:29ch}

/* All milestones share one physical baseline, including the sales outcome. */
.sp-linkedin-icp{grid-template-columns:repeat(5,minmax(0,1fr));gap:0;padding:0;border:0;align-items:stretch}
/* Правки ч. 4: линия метрики идёт до конца блока, а не обрывается на последней точке.
   Обратная связь по ч. 4: «цветная линейка пропала» — линия теперь самостоятельная
   (не зависит от общих правил и анимации появления), 2 px и ярче, точки — на ней. */
.sp-linkedin-icp{position:relative}
.sp-linkedin-icp::before{content:'';position:absolute;z-index:0;top:auto;bottom:0;left:0;right:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#9bbfff,#8edbea 40%,#b1baff 78%,rgba(177,186,255,.4));box-shadow:0 0 12px rgba(155,191,255,.35);
  opacity:1;transform:none!important;transition:none}
.sp-linkedin-icp li{padding:12px 24px 28px 0;display:flex;flex-direction:column;justify-content:flex-end}
.sp-linkedin-icp li::before{z-index:1;top:auto;bottom:-3px;left:0;width:8px;height:8px;border:0;background:var(--sp-accent);box-shadow:0 0 10px rgba(var(--sp-accent-rgb),.35)}
.sp-linkedin-icp h3{font-size:clamp(18px,1.6vw,23px);line-height:1.2}
.sp-linkedin-icp p{font-size:14px;line-height:1.5;min-height:3em;max-width:24ch}
.sp-linkedin-icp .sp-linkedin-icp__result{padding-right:0}
.sp-linkedin-icp__result h3{color:#b7c8ff}
.sp-linkedin-icp .sp-linkedin-icp__result::before{background:#b1baff;box-shadow:0 0 15px #9b84ff}

/* Three real columns, with every item in the approved scope retained. */
.sp-linkedin-process-section{border-top:1px solid var(--line)}
.sp-linkedin-process-section .sp-head{grid-template-columns:1fr}
.sp-linkedin-process-section .sp-head h2{max-width:25ch}
.sp-linkedin-phases{display:grid;grid-template-columns:1fr 1fr 1.15fr;list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.sp-linkedin-phase{padding:30px 30px 10px 0;--phase-color:#adb9ff}
.sp-linkedin-phase+.sp-linkedin-phase{padding-left:30px;border-left:1px solid var(--line)}
.sp-linkedin-phase:nth-child(2){--phase-color:#8edbea}
.sp-linkedin-phase:nth-child(3){--phase-color:#c1b6ed}
.sp-linkedin-phase__number{display:block;color:var(--phase-color);font-size:23px;font-weight:350;line-height:1;margin-bottom:18px}
.sp-linkedin-phase h3{font-size:clamp(22px,2vw,28px);line-height:1.25;font-weight:400;letter-spacing:-.035em;margin:0 0 26px;min-height:2.5em}
.sp-linkedin-phase ul{display:grid;gap:17px;list-style:none;margin:0;padding:0}
.sp-linkedin-phase ul li{position:relative;padding-left:16px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.sp-linkedin-phase ul li::before{content:'';position:absolute;left:0;top:.65em;width:4px;height:4px;border-radius:50%;background:var(--phase-color)}

@media(min-width:1400px){.sp-linkedin-phase h3{min-height:1.25em}}
@media(max-width:1200px){
  .sp-linkedin-funnel-layout{grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr);gap:40px}
  .sp-linkedin-funnel li,.sp-linkedin-funnel li+li{grid-template-columns:minmax(0,1.1fr) minmax(0,.95fr)}
}
/* Below 1000 px text rows outgrow the rings: one unbroken funnel beside
   (or, on phones, above) the list; list rows get a dot in the ring's tone. */
@media(max-width:1000px){
  .sp[data-service="linkedin"] .sp-hero__grid{grid-template-columns:1.1fr .9fr;gap:24px}
  .sp[data-service="linkedin"] .sp-title{font-size:clamp(32px,4.2vw,44px)}
  .sp[data-service="linkedin"] .sp-hero__visual{min-height:370px}
  .sp-linkedin-funnel-layout{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:30px 40px;align-items:center}
  .sp-linkedin-funnel__head{grid-column:1/-1}
  .sp-linkedin-funnel__stack{display:block;width:min(100%,320px);margin:0 auto}
  .sp-linkedin-funnel li,.sp-linkedin-funnel li+li{grid-template-columns:1fr;border:0;gap:0}
  .sp-linkedin-funnel li .sp-linkedin-funnel__shape{display:none}
  .sp[data-service="linkedin"] .sp-linkedin-funnel>li{padding:0 0 18px 22px}
  .sp-linkedin-funnel__copy{padding:0}
  .sp-linkedin-funnel__copy::before{right:auto;left:-22px;top:8px;width:8px;height:8px;border-radius:50%;opacity:1;box-shadow:0 0 10px currentColor}
  .sp-linkedin-icp{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.5fr)}
  .sp-linkedin-icp::before{right:0}
  .sp-linkedin-icp li{padding-right:16px}
  .sp-linkedin-icp p{font-size:13px;min-height:4.5em}
  .sp-linkedin-phase,.sp-linkedin-phase+.sp-linkedin-phase{padding-right:20px;padding-left:20px}
  .sp-linkedin-phase:first-child{padding-left:0}
}
/* Правки ч. 4: на телефоне и планшете воронка целиком стоит над списком
   этапов, а не узкой колонкой слева от него. На планшете этапы идут в две
   колонки под воронкой. */
@media(max-width:900px){
  .sp-linkedin-funnel-layout{grid-template-columns:1fr;gap:34px}
  .sp-linkedin-funnel__stack{width:min(78%,340px);margin:0 auto}
  .sp-linkedin-funnel{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
}
@media(max-width:600px){
  .sp-linkedin-funnel{grid-template-columns:1fr}
}
@media(max-width:700px){
  .sp[data-service="linkedin"] .sp-hero{min-height:auto;padding-top:calc(var(--nav-h) + 36px);padding-bottom:44px}
  .sp[data-service="linkedin"] .sp-hero__grid{grid-template-columns:1fr;gap:22px}
  .sp[data-service="linkedin"] .sp-title{font-size:clamp(32px,7.6vw,44px);max-width:20ch}
  .sp[data-service="linkedin"] .sp-hero__visual{min-height:62vw;max-height:none}
  .sp[data-service="linkedin"] .sp-hero__object{width:115%;right:0;max-width:none}
  .sp[data-service="linkedin"] .sp-section{padding-block:56px}
  .sp-linkedin-funnel-layout{grid-template-columns:1fr;gap:28px}
  .sp-linkedin-funnel__head h2{max-width:20ch;margin-bottom:16px}
  .sp-linkedin-funnel__head>span{max-width:44ch;font-size:15px}
  .sp-linkedin-funnel__stack{width:min(78%,300px);margin:0 auto}
  .sp-linkedin-funnel h3{margin:0;font-size:19px}
  .sp-linkedin-funnel p{font-size:13px}
  .sp-linkedin-icp{grid-template-columns:1fr;gap:0;border-left:1px solid rgba(var(--sp-accent-rgb),.5);border-top:0;padding:0}
  .sp-linkedin-icp::before{display:none}
  .sp-linkedin-icp li,.sp-linkedin-icp li:nth-child(n+3){display:block;border:0;padding:0 0 26px 22px}
  .sp-linkedin-icp li:last-child{padding-bottom:0}
  .sp-linkedin-icp li::before{top:8px;bottom:auto;left:-4.5px}
  .sp-linkedin-icp h3{font-size:21px}
  .sp-linkedin-icp p{font-size:14px;min-height:0;max-width:none;margin-top:5px}
  .sp-linkedin-icp__result h3 br{display:none}
  .sp-linkedin-phases{grid-template-columns:1fr}
  .sp-linkedin-phase,.sp-linkedin-phase+.sp-linkedin-phase{padding:26px 0 30px;border-left:0;border-bottom:1px solid var(--line)}
  .sp-linkedin-phase h3{min-height:0;margin-bottom:22px;font-size:25px}
  .sp-linkedin-phase ul{gap:13px}
  .sp-linkedin-phase__number{font-size:20px;margin-bottom:12px}
}
@media(prefers-reduced-motion:reduce){
  .sp[data-service="linkedin"] [data-sp-reveal],.sp-linkedin-funnel li,.sp-linkedin-icp li{opacity:1;transform:none;transition:none}
  .sp-linkedin-funnel__shape::after{animation:none}
  .sp-linkedin-icp::before{transform:none;transition:none}
  .sp[data-service="linkedin"] .sp-hero__object,.sp[data-service="linkedin"] .sp-hero__visual:hover .sp-hero__object{transition:none;transform:translate3d(0,-50%,0)}
}

/* Телефон и планшет: воронка над списком собирается прокруткой — кольца
   опускаются по очереди (положение и прозрачность ставит service-mobile.js),
   при посадке кольцо коротко вспыхивает своим цветом. */
.sp-linkedin-funnel__stack.m-build{perspective:700px}
.sp-linkedin-funnel__stack.m-build .sp-linkedin-funnel__shape{transition:none;transform-origin:50% 20%;will-change:transform,opacity}
.sp-linkedin-funnel__stack.m-build .sp-linkedin-funnel__shape::before{content:'';position:absolute;z-index:1;left:0;right:0;top:0;
  height:calc(100cqw * 52 / 420);border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,currentColor,transparent 70%)}
.sp-linkedin-funnel__stack.m-build .sp-linkedin-funnel__shape.is-landed::before{animation:m-funnel-land .9s var(--e-out)}
@keyframes m-funnel-land{0%{opacity:0;transform:scale(.8)}25%{opacity:.55}100%{opacity:0;transform:scale(1.15)}}
@media(prefers-reduced-motion:reduce){.sp-linkedin-funnel__stack.m-build .sp-linkedin-funnel__shape.is-landed::before{animation:none}}
