/* Страницы услуг. Опираются на v2-base.css и компоненты v2-legal.css
   (.legal, .clause, .bullets, .pairs, .related) — отдельного визуального языка не заводим. */

.svc{max-width:860px;margin-inline:auto;padding:clamp(30px,5vw,64px) var(--pad) clamp(56px,7vw,88px)}

.svc__kicker{margin-top:clamp(22px,3vw,34px);font-size:11px;letter-spacing:.14em;
  color:var(--acc-2);text-transform:uppercase}
.svc__title{margin-top:12px;font-size:clamp(27px,4.4vw,46px);max-width:20ch}
.svc__lead{margin-top:clamp(20px,2.6vw,28px);font-size:clamp(15.5px,1.7vw,18px);color:var(--fg);
  line-height:1.62;max-width:64ch}

.svc__facts{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px}
.svc__fact{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:var(--bg-2);font-size:13px;color:var(--fg-2)}
.svc__fact b{color:var(--fg);font-weight:500}
.svc__fact .i{font-size:15px;color:var(--acc)}

.svc__go{margin-top:28px;display:flex;gap:11px;flex-wrap:wrap}

.steps{margin-top:20px;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;counter-reset:s}
.steps > div{background:var(--bg-2);padding:18px 20px;display:grid;gap:8px 18px;align-items:start}
@media(min-width:620px){.steps > div{grid-template-columns:auto 1fr}}
.steps > div::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:'Unbounded',sans-serif;font-weight:500;font-size:13px;color:var(--acc-2);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;padding-top:.2em}
.steps b{display:block;font-weight:500;color:var(--fg);font-size:15px}
.steps span{display:block;margin-top:6px;font-size:13.5px;color:var(--fg-2);line-height:1.6}
@media(min-width:620px){.steps b,.steps span{grid-column:2}.steps span{margin-top:0}}

.svc__cta{margin-top:clamp(38px,5vw,58px);padding:clamp(26px,4vw,44px) clamp(20px,3.4vw,38px);
  border:1px solid var(--line-2);border-radius:var(--r);
  background:linear-gradient(168deg,#181D28,#0F121A);text-align:center}
.svc__cta h2{font-size:clamp(22px,3.2vw,34px);max-width:20ch;margin-inline:auto}
.svc__cta p{margin-top:14px;font-size:14.5px;color:var(--fg-2);line-height:1.62;
  max-width:48ch;margin-inline:auto}
.svc__cta .row{margin-top:24px;display:flex;gap:11px;justify-content:center;flex-wrap:wrap}

.svc .faq{margin-top:20px}

/* ── Хаб направлений /uslugi ─────────────────────────────────────────────── */

.hub{max-width:1240px;margin-inline:auto;padding:clamp(24px,3.4vw,40px) var(--pad) clamp(56px,7vw,88px)}

.crumbs{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--fg-3);flex-wrap:wrap}
.crumbs a{transition:color .2s}
.crumbs a:hover{color:var(--acc-2)}
.crumbs .i{font-size:13px;opacity:.6;vertical-align:-.1em}
.crumbs [aria-current]{color:var(--fg-2)}

.hub-hero{padding:clamp(26px,4vw,44px) 0 clamp(28px,3.4vw,40px)}
.hub-hero h1{font-size:clamp(28px,4.6vw,52px);max-width:17ch}
.hub-hero p{margin-top:16px;max-width:52ch;font-size:clamp(15px,1.6vw,17px);color:var(--fg-2);line-height:1.6}
.hub-hero__go{margin-top:26px;display:flex;gap:11px;flex-wrap:wrap}
@media(max-width:479px){.hub-hero__go .b{width:100%}}

/* Бенто: две крупные ячейки со скриншотами сверху, три компактные снизу.
   Ровно пять ячеек под пять направлений — пустых клеток в сетке нет. */
.hub-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:620px){.hub-grid{grid-template-columns:repeat(3,1fr)}
  .hub-card--wide{grid-column:span 3}}
@media(min-width:960px){.hub-grid{grid-template-columns:repeat(6,1fr)}
  .hub-card{grid-column:span 2}
  .hub-card--wide{grid-column:span 3}}

.hub-card{position:relative;overflow:hidden;display:flex;flex-direction:column;
  min-height:196px;padding:20px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg-2);isolation:isolate;
  transition:border-color .28s,background .28s,transform .34s cubic-bezier(.16,1,.3,1)}
.hub-card:hover{border-color:var(--acc);background:#161B26;transform:translateY(-3px)}
.hub-card--wide{min-height:280px}
/* третья точка визуального разнообразия — акцентная заливка вместо скриншота */
.hub-card--tall{background:linear-gradient(158deg,rgba(47,143,239,.14),var(--bg-2) 62%)}
.hub-card--tall:hover{background:linear-gradient(158deg,rgba(47,143,239,.2),#161B26 62%)}

.hub-card__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hub-card__i{font-size:24px;color:var(--acc)}
.hub-card__price{font-size:13px;color:var(--acc-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.hub-card__body{margin-top:16px;flex:1 1 auto;display:block}
.hub-card__body b{display:block;font-family:'Unbounded','Onest',system-ui,sans-serif;font-weight:500;
  letter-spacing:-.04em;line-height:1.12;font-size:clamp(18px,2.1vw,23px);color:var(--fg)}
.hub-card__body em{display:block;margin-top:10px;font-style:normal;font-size:13.5px;
  color:var(--fg-2);line-height:1.6;max-width:40ch}
.hub-card__go{margin-top:18px;display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;color:var(--fg-2);transition:gap .22s,color .22s}
.hub-card__go .i{font-size:15px}
.hub-card:hover .hub-card__go{gap:13px;color:var(--acc-2)}

.hub-card__shot{display:block;position:absolute;right:0;bottom:0;width:58%;max-width:420px;
  z-index:-1;border-radius:var(--r) 0 0 0;overflow:hidden;opacity:.5;
  -webkit-mask-image:linear-gradient(285deg,#000 18%,transparent 82%);
  mask-image:linear-gradient(285deg,#000 18%,transparent 82%);
  transition:opacity .4s,transform .6s cubic-bezier(.16,1,.3,1)}
.hub-card__shot img{width:100%;height:auto;display:block}
.hub-card:hover .hub-card__shot{opacity:.72;transform:translateY(-4px)}
@media(max-width:619px){.hub-card__shot{width:74%;max-height:132px;opacity:.24}}
/* текст широкой карточки не должен наезжать на скриншот справа */
.hub-card--wide .hub-card__body em{max-width:32ch}

.hub-sec{margin-top:clamp(44px,5vw,68px)}
.hub-sec > h2{font-size:clamp(23px,3.2vw,36px);max-width:20ch}
.hub-sec .faq{margin-top:22px}

.hub-picks{margin-top:22px;display:grid;gap:10px}
@media(min-width:700px){.hub-picks{grid-template-columns:1fr 1fr}}
.hub-pick{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
  transition:border-color .22s,background .22s}
.hub-pick:hover{border-color:var(--acc);background:#161B26}
.hub-pick__q{font-size:14px;color:var(--fg-2);line-height:1.45}
.hub-pick__a{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:500;color:var(--fg);white-space:nowrap;transition:color .22s}
.hub-pick__a .i{font-size:15px;color:var(--acc-2)}
.hub-pick:hover .hub-pick__a{color:var(--acc-2)}

/* Появление карточек привязано к прокрутке средствами CSS: без JS и без
   слушателей scroll. Где animation-timeline не поддерживается, всё просто видно. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .hub-card,.hub-pick{animation:hub-in linear both;animation-timeline:view();
      animation-range:entry 4% entry 58%}
    @keyframes hub-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  }
}

/* Контакты: способ связи как крупная карточка, не строка списка */
.hub-picks--wide{margin-top:26px}
.hub-pick--lead{align-items:flex-start;padding:20px 22px}
.hub-pick--lead .hub-pick__q{display:block;font-size:14px}
.hub-pick--lead .hub-pick__q b{display:block;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-3);font-weight:500}
.hub-pick--lead .hub-pick__q i{display:block;margin-top:8px;font-style:normal;
  font-size:13px;color:var(--fg-2);line-height:1.55}
.hub-pick--lead .hub-pick__q{color:var(--fg)}
.hub-pick--lead .hub-pick__a .i{font-size:22px}

.hub-note{display:flex;gap:11px;align-items:flex-start;margin-top:18px;
  font-size:13px;color:var(--fg-2);line-height:1.6}
.hub-note .i{flex:0 0 auto;color:var(--acc);font-size:16px;margin-top:2px}
.hub-note a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line-2)}
.hub-note a:hover{color:var(--acc-2);text-decoration-color:var(--acc)}