/* Страница «Все услуги» (/uslugi/, EN /services/). Читаемый исходник, без сборки.
   Шапка, меню, подвал, кнопки и окно формы общие (css/site-*.css, слой site); здесь тема страницы (sv-*), всё в слое page.
   Нейтральная тёмная тема сайта и мягкий лавандовый акцент и персиковый для срочной плашки. Логические свойства (inline, block): готово к RTL. */
@layer page {

body.sv {
  --site-bg: #07080a;
  --site-dim: rgba(242, 244, 245, 0.68);
  --site-wrap: 76rem;
  --violet: #a99bd6;
  --site-signal: var(--violet);   /* сигнальный цвет каркаса (главная кнопка, «Мы Online», «Наверх») */
  --peach: #e9b38b;
}
html { scroll-behavior: smooth; }
.sv-wrap { width: 100%; max-width: calc(var(--site-wrap) + 2 * var(--site-gutter)); margin-inline: auto; padding-inline: var(--site-gutter); }
.site-head::before { background: linear-gradient(to bottom, rgba(7, 8, 10, 0.94) 55%, rgba(7, 8, 10, 0)); }
.site-head.is-scrolled::before { background: rgba(7, 8, 10, 0.92); }
.site-head__tag { position: relative; z-index: 2; }
.site-menu { background: rgba(7, 8, 10, 0.985); }
.site-menu__n { color: var(--violet); }
.site-menu__list a[aria-current="page"] { color: var(--violet); }

.crumbs { margin: 0 0 0.6rem; font-size: 0.85rem; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin: 0; padding: 0; list-style: none; color: var(--site-dim); }
.crumbs li + li::before { content: "/"; margin-inline-end: 0.5rem; color: rgba(242, 244, 245, 0.35); }
.crumbs a { display: inline-block; padding-block: 0.5rem; text-decoration: none; color: var(--site-dim); }
.crumbs a:hover { color: var(--site-fg); text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- первый экран ---------- */
.sv-hero { padding-block: calc(var(--site-head-h) + 2rem) 2rem; }
.sv-eyebrow { margin: 0 0 0.8rem; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet); }
.sv-h1 { margin: 0 0 1rem; font-family: var(--site-font-head); font-weight: 400; font-size: clamp(2.2rem, 5.4vw, 4rem); line-height: 1.05; text-wrap: balance; }
.sv-lead { margin: 0; max-width: 40rem; font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--site-dim); }
.sv-nav ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.sv-nav a { display: inline-flex; align-items: center; min-block-size: 2.75rem; padding-inline: 1.1rem; border: 1px solid var(--site-line); border-radius: 2rem; text-decoration: none; font-size: 0.95rem; color: var(--site-fg); transition: border-color 0.2s, background-color 0.2s; }
.sv-nav a:hover { border-color: var(--violet); background: rgba(169, 155, 214, 0.08); }
.sv-nav a:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

/* срочная плашка про взлом */
.sv-hot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-block-start: 1.8rem; padding: 1.1rem 1.3rem; border: 1px solid rgba(233, 179, 139, 0.45); border-radius: 0.9rem; background: rgba(233, 179, 139, 0.07); }
.sv-hot__t { margin: 0 0 0.2rem; font-family: var(--site-font-head); font-weight: 400; font-size: 1.25rem; color: var(--peach); }
.sv-hot__d { margin: 0; max-width: 34rem; font-size: 0.95rem; color: var(--site-dim); }

/* ---------- группы услуг ---------- */
.sv-group { padding-block: 2.4rem; border-block-start: 1px solid var(--site-line); scroll-margin-block-start: calc(var(--site-head-h) + 0.5rem); }
.sv-group__in { display: grid; gap: 1.3rem; }
@media (min-width: 62em) {
  .sv-group__in { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 3.5rem; }
  .sv-group__head { position: sticky; inset-block-start: calc(var(--site-head-h) + 1.5rem); align-self: start; }
}
.sv-num { margin: 0 0 0.5rem; font-size: 0.8rem; letter-spacing: 0.14em; color: var(--violet); }
.sv-h2 { margin: 0 0 0.6rem; font-family: var(--site-font-head); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.1; text-wrap: balance; }
.sv-group__d { margin: 0; max-width: 30rem; color: var(--site-dim); }

.sv-rows { display: grid; margin: 0; padding: 0; list-style: none; }
.sv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.6rem 1.2rem; padding-block: 1.1rem; border-block-end: 1px solid var(--site-line); }
.sv-row:first-child { padding-block-start: 0; }
.sv-row--sub { margin-inline-start: 1.1rem; padding-inline-start: 1.1rem; border-inline-start: 2px solid rgba(169, 155, 214, 0.3); }
.sv-row__t { margin: 0; font-size: 1.08rem; font-weight: 500; line-height: 1.3; }
.sv-row__t a { display: inline-block; padding-block: 0.6rem; margin-block: -0.6rem; color: inherit; text-decoration: none; }   /* область нажатия не меньше 44 px по высоте, вид строки прежний */
.sv-row__t a:hover { color: var(--violet); }
.sv-row--sub .sv-row__t { font-size: 1rem; }
.sv-row__d { margin: 0.25rem 0 0; font-size: 0.92rem; color: var(--site-dim); }
.sv-act { min-block-size: 2.75rem; white-space: nowrap; }
@media (max-width: 40em) {
  .sv-row { grid-template-columns: minmax(0, 1fr); }
  .sv-act { justify-self: start; }
  .sv-row--sub { margin-inline-start: 0.4rem; padding-inline-start: 0.9rem; }
}

/* ---------- финал ---------- */
.sv-end { padding-block: 2.4rem 4rem; border-block-start: 1px solid var(--site-line); }
.sv-end__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

}