/* Аудио Видео Сервис — визуальный прототип (Phase 3C). Mobile-first, без внешних
   шрифтов и тяжёлых зависимостей. Широкая светлая основа, крупный тёмный
   сине-графитовый hero, тёмное mega-menu и footer, синий акцент. SEO-структуру
   шаблонов CSS не меняет. */

:root {
  --container: 1200px;
  --gutter: 16px;
  --section-gap: 32px; /* unified vertical rhythm between city-home sections; → 48px on desktop */

  /* Surfaces */
  --bg: #ffffff;
  --bg-soft: #f3f6fc;
  --bg-muted: #e9eef7;
  --surface: #ffffff;

  /* Ink */
  --ink: #131826;
  --ink-soft: #475068;
  --ink-faint: #69748a;
  --line: #e3e8f1;
  --line-soft: #eef1f7;

  /* Brand / accent */
  --brand: #2563eb;
  --brand-strong: #1d4ed8;
  --brand-deep: #1740a6;
  --brand-tint: #eef4ff;
  --brand-tint-line: #cfe0ff;

  /* Dark blue-graphite (hero / mega-menu / footer / CTA) */
  --dark-1: #0f1626;
  --dark-2: #16223b;
  --dark-3: #21314f;
  --on-dark: #eef2fb;
  --on-dark-soft: #aab6cf;

  --radius: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .08);
  --shadow-md: 0 10px 28px -10px rgba(16, 24, 40, .20);
  --shadow-lg: 0 26px 60px -22px rgba(13, 22, 45, .45);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--bg);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--brand-strong); }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.icon { width: 24px; height: 24px; display: inline-block; vertical-align: middle; flex: none; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
}
.btn:active { transform: translateY(1px); }
.btn--lg { padding: 15px 30px; font-size: 1.06rem; }

.btn--primary { background: var(--brand); color: #fff; box-shadow: 0 10px 22px -10px rgba(37, 99, 235, .9); }
.btn--primary:hover { background: var(--brand-strong); }

.btn--ghost { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .38); }
.btn--ghost:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .65); }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header { position: relative; z-index: 50; background: var(--surface); }

.topbar { background: var(--dark-1); color: var(--on-dark-soft); font-size: .82rem; }
.topbar__inner {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  align-items: center; justify-content: space-between;
  padding: 8px 0;
}
.topbar__geo { color: var(--on-dark); font-weight: 600; }
.topbar__note { display: none; }
.topbar__links { display: none; }
.topbar__links a { color: var(--on-dark-soft); text-decoration: none; }
.topbar__links a:hover { color: var(--on-dark); }

.header-main { border-bottom: 1px solid var(--line); background: var(--surface); }
.header-main__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px 22px; padding: 16px 0;
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__logo { width: 38px; height: 38px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-size: 1.32rem; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.brand__tagline { font-size: .76rem; color: var(--ink-faint); }

.header-contact { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; line-height: 1.25; }
.header-contact__phone { font-size: 1.14rem; font-weight: 800; color: var(--ink); text-decoration: none; letter-spacing: .01em; white-space: nowrap; }
.header-contact__phone:hover { color: var(--brand-strong); }
.header-contact__btn { padding: 10px 20px; font-size: .95rem; }

/* Main nav: full-width row on small screens; inline on desktop. */
.main-nav {
  order: 5; flex-basis: 100%;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
}

/* Services mega-menu (pure CSS disclosure) */
.services-menu { position: relative; width: 100%; }
.services-menu__toggle {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 13px 20px;
  font: inherit; font-weight: 700; color: #fff;
  background: var(--brand); border: 1px solid var(--brand);
  border-radius: var(--radius-sm); cursor: pointer;
  box-shadow: 0 8px 18px -10px rgba(37, 99, 235, .9);
}
.services-menu__toggle:hover { background: var(--brand-strong); }
.services-menu__caret {
  width: 9px; height: 9px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease;
}

.mega-menu {
  display: none;
  margin-top: 10px;
  padding: 18px;
  background: linear-gradient(160deg, var(--dark-2), var(--dark-1));
  color: var(--on-dark);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.services-menu:focus-within > .mega-menu { display: block; }
.mega-menu__cols { display: grid; gap: 12px 26px; }
.mega-menu__title {
  margin: 4px 0 8px; padding-bottom: 8px;
  font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: #8fb4ff; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.mega-menu__col ul { margin: 0; padding: 0; list-style: none; }
.mega-menu__col a {
  display: block; padding: 8px 10px; border-radius: 8px;
  font-size: .94rem; color: var(--on-dark-soft); text-decoration: none;
}
.mega-menu__col a:hover { background: rgba(37, 99, 235, .22); color: #fff; }
.mega-menu__all {
  display: inline-block; margin-top: 14px; padding: 11px 18px;
  font-weight: 700; color: #fff; text-decoration: none;
  background: var(--brand); border-radius: var(--radius-pill);
}
.mega-menu__all:hover { background: var(--brand-strong); }

.quick-nav { display: none; }

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */
nav.breadcrumbs { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 10px 0; font-size: .84rem; }
nav.breadcrumbs ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
nav.breadcrumbs li + li::before { content: '›'; margin-right: 4px; color: var(--ink-faint); }
nav.breadcrumbs a { color: var(--ink-soft); text-decoration: none; }
nav.breadcrumbs a:hover { text-decoration: underline; }
nav.breadcrumbs li:last-child { color: var(--ink); }

/* ── Main / typography ───────────────────────────────────────────────────── */
/* No bottom padding: the gap before the dark footer comes solely from the
   footer's own margin-top, so it is not doubled (was 64px padding + 72px
   margin = 136px of empty space). */
main { padding: 26px 0 0; }

h1 { font-size: clamp(1.75rem, 5vw, 2.7rem); line-height: 1.14; margin: 0 0 16px; letter-spacing: -.02em; }
h2 { font-size: clamp(1.3rem, 2.8vw, 1.7rem); line-height: 1.22; margin: 0 0 14px; letter-spacing: -.01em; }
h3 { font-size: 1.08rem; margin: 0 0 6px; }
p { margin: 0 0 16px; }

.lead { font-size: 1.12rem; color: var(--ink-soft); }

.section-eyebrow {
  margin: 0 0 6px; font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--brand);
}
.section-title { margin: 0 0 22px; }

/* ── Unified vertical rhythm ─────────────────────────────────────────────────
   One cadence for every page type (home, service, info). All page content is
   rendered inside `main > .container`, so we space its direct children — the
   real top-level blocks (hero, page-head, sections, info/price cards, result,
   CTA, FAQ, related, back-link …). The earlier `main > section …` rules never
   matched, because the blocks sit one level deeper inside .container; that left
   service and info pages with no spacing (CTA welded to FAQ, related welded to
   FAQ). This single rule gives them the same rhythm the city home already had.
   Gap = var(--section-gap): 32px mobile/tablet → 48px desktop. */
main > .container > * { margin-top: var(--section-gap); }
main > .container > :first-child { margin-top: 0; }
/* The feature strip hugs the hero (overlaps it on desktop, see the desktop
   block) rather than taking the full section gap. */
main > .container > .feature-strip { margin-top: 22px; }
/* A footnote attaches to the block it annotates (e.g. the /ceny price note)
   instead of floating as its own section. */
main > .container > .note { margin-top: 18px; }

/* ── Hero (city home) ────────────────────────────────────────────────────── */
.hero {
  position: relative;
  color: var(--on-dark);
  background: linear-gradient(152deg, var(--dark-2) 0%, var(--dark-1) 56%, #0a1020 100%);
  border-radius: var(--radius);
  padding: 34px 22px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hero__inner { position: relative; z-index: 2; }
.hero__content { max-width: 640px; }
.hero__eyebrow {
  margin: 0 0 12px; font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: #8fb4ff;
}
.hero h1 { color: #fff; margin: 0 0 16px; }
.hero__lead { color: var(--on-dark-soft); font-size: 1.16rem; max-width: 56ch; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 6px; }

.hero__points { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.hero__points li { display: flex; align-items: center; gap: 13px; color: var(--on-dark); }
.hero__point-ic {
  display: inline-grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 12px; color: #8fb4ff;
  background: rgba(37, 99, 235, .18); border: 1px solid rgba(143, 180, 255, .35);
}
.hero__point-ic .icon { width: 22px; height: 22px; }
.hero__point-tx { display: flex; flex-direction: column; line-height: 1.28; }
.hero__point-tx strong { font-weight: 700; font-size: 1rem; color: #fff; }
.hero__point-tx small { font-size: .82rem; color: var(--on-dark-soft); }

/* Hero — full-bleed photographic banner. The generated photo (a security camera
   over a city skyline) covers the whole hero (.hero__bg); a left→right dark
   scrim (.hero__scrim) keeps the copy on the left readable while the camera
   stays visible on the right. All text/buttons/badges are live HTML above it
   (.hero__inner, z-index 2). The root city-picker reuses the very same backdrop
   and scrim, so both heroes read at the same brightness. */
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 75% center;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 11, 22, .94) 0%, rgba(6, 11, 22, .82) 34%, rgba(6, 11, 22, .50) 56%, rgba(6, 11, 22, .14) 78%, rgba(6, 11, 22, 0) 92%),
    linear-gradient(0deg, rgba(6, 11, 22, .55) 0%, rgba(6, 11, 22, 0) 44%),
    radial-gradient(72% 84% at 16% 38%, rgba(37, 99, 235, .22), transparent 70%);
}

/* ── Feature strip (under hero) ──────────────────────────────────────────── */
.feature-strip {
  position: relative; z-index: 2;
  list-style: none; margin: 22px 0 0; padding: 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  display: grid; gap: 12px; grid-template-columns: 1fr;
}
.feature { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: .96rem; }
.feature__icon {
  display: inline-grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 12px;
  color: var(--brand); background: var(--brand-tint); border: 1px solid var(--brand-tint-line);
}

/* ── Services: large category cards (city home) ──────────────────────────── */
.cat-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
.cat-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.cat-card:hover { border-color: var(--brand-tint-line); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.cat-card__media {
  position: relative; height: 124px; display: grid; place-items: center;
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .10) 1px, transparent 0) 0 0 / 18px 18px,
    linear-gradient(140deg, var(--dark-3), var(--dark-1));
}
.cat-card__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(143,180,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143,180,255,.08) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 130% at 50% 0%, #000 28%, transparent 82%);
          mask-image: radial-gradient(120% 130% at 50% 0%, #000 28%, transparent 82%);
}
.cat-card__chip {
  position: relative; z-index: 1; display: inline-grid; place-items: center;
  width: 60px; height: 60px; border-radius: 16px; color: #d4e4ff;
  background: rgba(20, 33, 58, .6); border: 1px solid rgba(143, 180, 255, .30);
  box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.cat-card__chip .icon { width: 30px; height: 30px; }
.cat-card__media--camera  { background: radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1px, transparent 0) 0 0 / 18px 18px, linear-gradient(140deg, #27406e, #0f1626); }
.cat-card__media--domofon { background: radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1px, transparent 0) 0 0 / 18px 18px, linear-gradient(140deg, #1f3b5e, #0f1626); }
.cat-card__media--tv      { background: radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1px, transparent 0) 0 0 / 18px 18px, linear-gradient(140deg, #243f63, #0f1626); }
.cat-card__media--access  { background: radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1px, transparent 0) 0 0 / 18px 18px, linear-gradient(140deg, #2a3566, #0f1626); }
.cat-card__media { height: 150px; overflow: hidden; }

/* Photo media band (selected categories, e.g. Видеонаблюдение) — shared by the
   city-home category cards and the root direction cards. Keeps the same band
   height as the dark panel; the photo covers it (top corners clipped by the
   card radius via overflow:hidden) with a soft bottom scrim for depth. No icon
   chip here — the photo carries the category on its own. */
.cat-card__media--photo,
.dir-card__media--photo { background: var(--dark-1); }
.cat-card__photo,
.dir-card__photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.cat-card__photo-scrim,
.dir-card__photo-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(6, 11, 22, .50) 0%, rgba(6, 11, 22, .08) 46%, rgba(6, 11, 22, 0) 70%);
}

.cat-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.cat-card__title { font-size: 1.18rem; margin: 0 0 12px; }
.cat-card__links { list-style: none; margin: 0 0 14px; padding: 0; flex: 1; }
.cat-card__links li { margin-bottom: 8px; }
.cat-card__links a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-soft); text-decoration: none; font-size: .96rem;
}
.cat-card__links a::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex: none; }
.cat-card__links a:hover { color: var(--brand-strong); }
.cat-card__more {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--brand-strong); text-decoration: none;
}
.cat-card__more-arrow { width: 18px; height: 18px; }
.cat-card:hover .cat-card__more { color: var(--brand-deep); }

/* ── Advantages: text + 2×2 grid ─────────────────────────────────────────── */
/* margin-top comes from the unified section-rhythm rule (var(--section-gap)). */
.advantages { display: grid; gap: 26px; }
.advantages__text { color: var(--ink-soft); font-size: 1.04rem; max-width: 50ch; margin: 0; }
.advantages__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: 1fr; align-content: start; }
.advantage {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
}
.advantage__check {
  display: inline-grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 11px;
  color: var(--brand); background: var(--brand-tint); border: 1px solid var(--brand-tint-line);
}
.advantage__check .icon { width: 22px; height: 22px; }
.advantage__body { display: flex; flex-direction: column; gap: 3px; }
.advantage__title { font-weight: 700; color: var(--ink); font-size: 1.02rem; }
.advantage__text { color: var(--ink-soft); font-size: .94rem; }

/* ── Works (honest placeholders) ─────────────────────────────────────────── */
.works__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
.works__head .section-title { margin: 0; }
.works__all { font-weight: 700; color: var(--brand-strong); text-decoration: none; white-space: nowrap; }
.works__all:hover { color: var(--brand-deep); }
.works__intro { color: var(--ink-soft); max-width: 70ch; margin-top: 14px; }
.works__grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 10px; }
.work-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, transform .12s ease;
}
.work-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.work-card__media {
  position: relative; height: 132px; display: grid; place-items: center;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 16px),
    linear-gradient(140deg, var(--dark-3), var(--dark-1));
}
.work-card__media--camera  { background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 16px), linear-gradient(140deg, #27406e, #0f1626); }
.work-card__media--domofon { background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 16px), linear-gradient(140deg, #1f3b5e, #0f1626); }
.work-card__media--barrier { background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 16px), linear-gradient(140deg, #2a3566, #0f1626); }
.work-card__media--antenna { background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 16px), linear-gradient(140deg, #243f63, #0f1626); }
.work-card__media { height: 150px; overflow: hidden; }
.work-card__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(143,180,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143,180,255,.07) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 130% at 50% 0%, #000 28%, transparent 82%);
          mask-image: radial-gradient(120% 130% at 50% 0%, #000 28%, transparent 82%);
}
.work-card__chip {
  position: relative; z-index: 1; display: inline-grid; place-items: center;
  width: 58px; height: 58px; border-radius: 16px; color: #d4e4ff;
  background: rgba(20, 33, 58, .6); border: 1px solid rgba(143, 180, 255, .30);
  box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.work-card__chip .icon { width: 28px; height: 28px; }
.work-card__body { padding: 16px 18px 18px; }
.work-card__title { margin: 0 0 6px; font-size: 1.05rem; }
.work-card__text { margin: 0; font-size: .9rem; color: var(--ink-faint); }
.works__note {
  margin-top: 18px; font-size: .88rem; color: var(--ink-faint);
  border-left: 3px solid var(--brand-tint-line); padding-left: 14px;
}

/* ── Process ─────────────────────────────────────────────────────────────── */
.process__list { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
.process__step {
  counter-increment: step; position: relative; padding: 18px 18px 18px 64px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
}
.process__step::before {
  content: counter(step); position: absolute; left: 16px; top: 16px;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700;
}
.process__step-title { display: block; font-weight: 700; margin-bottom: 3px; }
.process__step-text { display: block; color: var(--ink-soft); font-size: .94rem; }

/* ── Page head (service / info pages) ────────────────────────────────────── */
.page-head {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  background:
    radial-gradient(680px 280px at 100% -40%, rgba(37, 99, 235, .14), transparent 60%),
    linear-gradient(150deg, var(--bg-soft), #ffffff 70%);
  border: 1px solid var(--line);
}
.page-head::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(var(--brand), var(--brand-deep)); }
.page-head__inner { padding: 26px 24px; }
.page-head h1 { margin-bottom: 12px; }
.page-head .lead { margin-bottom: 0; }
.page-head__local { margin: 14px 0 0; color: var(--ink-faint); font-size: .94rem; }

/* ── Info blocks (service detail cards) ──────────────────────────────────── */
.info-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.info-block {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 22px; box-shadow: var(--shadow-sm);
}
.info-block h2 { display: flex; align-items: center; gap: 12px; font-size: 1.16rem; margin-bottom: 14px; }
.info-block__icon {
  display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 11px;
  color: var(--brand); background: var(--brand-tint); border: 1px solid var(--brand-tint-line);
}
.info-block ul { margin: 0; padding-left: 22px; }
.info-block li { margin-bottom: 8px; color: var(--ink-soft); }

.result {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--brand-tint); border: 1px solid var(--brand-tint-line);
  border-radius: var(--radius); padding: 18px 20px; margin: 0;
}
.result__icon {
  display: inline-grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 10px; color: #fff; background: var(--brand);
}
.result__icon .icon { width: 22px; height: 22px; }

.warning { background: #fff8ec; border: 1px solid #f4dca6; border-radius: var(--radius); padding: 18px 20px; }
.warning h3 { margin-bottom: 6px; color: #8a5a00; }
.warning p { margin: 0; color: #6f5326; }

/* ── Prices ──────────────────────────────────────────────────────────────── */
.prices-preview {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm);
}
.prices-preview h2 { font-size: 1.16rem; }
.prices-preview__note { margin: 14px 0 0; font-size: .92rem; color: var(--ink-faint); }

.price-groups { display: grid; grid-template-columns: 1fr; gap: 18px; }
.price-group {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm);
}
.price-group h2 { font-size: 1.18rem; }
.price-list { list-style: none; margin: 0; padding: 0; }
.price-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 13px 0; border-bottom: 1px solid var(--line-soft);
}
.price-list li:last-child { border-bottom: 0; }
.price-row__title { font-weight: 600; flex: 1 1 58%; }
.price-row__unit { color: var(--ink-faint); font-size: .85rem; }
.price-list small { flex-basis: 100%; color: var(--ink-faint); font-size: .83rem; }
.price {
  font-weight: 800; color: var(--brand-strong); white-space: nowrap;
  background: var(--brand-tint); border: 1px solid var(--brand-tint-line);
  border-radius: var(--radius-pill); padding: 3px 12px; font-size: .95rem;
}
.note { font-size: .92rem; color: var(--ink-faint); }

/* ── Service SEO text block ──────────────────────────────────────────────────
   Optional long-form help/SEO section on selected service pages (content from
   data/seo-blocks.json). Deliberately light — no card chrome (no surface fill,
   border, radius, shadow or box padding): it reads as plain page content, a
   normal helpful text section before the CTA, instead of a big white card that
   competes with the price card above and the dark CTA below. Just a constrained
   text column; the leftover width reads as page margin, not empty card interior.
   Inter-block spacing comes from the unified rhythm (Phase 5Q), so it never
   welds to the price preview above or the CTA below. */
.service-seo { max-width: 940px; }
.service-seo h2 { font-size: 1.3rem; margin-bottom: 14px; }
.service-seo p { color: var(--ink-soft); }
.service-seo ul { margin: 2px 0 16px; padding-left: 22px; }
.service-seo li { margin-bottom: 8px; color: var(--ink-soft); }
.service-seo > :last-child { margin-bottom: 0; }

/* ── Contacts ────────────────────────────────────────────────────────────── */
.contacts { display: grid; grid-template-columns: 1fr; gap: 16px; }
.contacts__card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm);
}
.contacts__card--primary {
  color: var(--on-dark);
  background: linear-gradient(150deg, var(--dark-2), var(--dark-1));
  border-color: rgba(255, 255, 255, .08);
}
.contacts__card--primary h2 { color: #fff; }
.contacts__icon {
  display: inline-grid; place-items: center; width: 46px; height: 46px;
  border-radius: 12px; color: var(--brand); background: var(--brand-tint);
  border: 1px solid var(--brand-tint-line); margin-bottom: 12px;
}
.contacts__card--primary .contacts__icon { color: #cfe0ff; background: rgba(37, 99, 235, .25); border-color: rgba(143, 180, 255, .4); }
.contacts__card h2 { font-size: 1.18rem; }
.contacts__phone { display: inline-block; font-size: 1.6rem; font-weight: 800; color: #fff; text-decoration: none; margin: 4px 0 10px; }
.contacts__phone:hover { color: #cfe0ff; }
.contacts__hint { color: var(--on-dark-soft); font-size: .94rem; }
.contacts__card:not(.contacts__card--primary) .contacts__hint { color: var(--ink-faint); }
.contacts__channels { margin: 4px 0 0; padding-left: 20px; color: var(--on-dark-soft); }
.contacts__channels li { margin-bottom: 5px; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq dl { margin: 0; }
.faq-item { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item dt { font-weight: 700; margin-bottom: 6px; color: var(--ink); }
.faq-item dd { margin: 0; color: var(--ink-soft); }

/* ── Related (cards) ─────────────────────────────────────────────────────── */
.related__grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.related-card {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.related-card:hover { border-color: var(--brand-tint-line); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.related-card__label { font-weight: 600; }
.related-card__arrow { color: var(--brand); font-weight: 700; }

/* ── CTA block ───────────────────────────────────────────────────────────── */
.cta-block {
  display: grid; gap: 16px;
  background:
    radial-gradient(760px 300px at 92% -40%, rgba(37, 99, 235, .42), transparent 60%),
    linear-gradient(142deg, var(--dark-2), var(--dark-1));
  color: var(--on-dark); border-radius: var(--radius);
  padding: 30px 24px; box-shadow: var(--shadow-md); overflow: hidden;
}
.cta-block__body { display: flex; align-items: center; gap: 16px; }
.cta-block__icon {
  display: inline-grid; place-items: center; flex: none;
  width: 54px; height: 54px; border-radius: 14px; color: #cfe0ff;
  background: rgba(37, 99, 235, .25); border: 1px solid rgba(143, 180, 255, .4);
}
.cta-block__icon .icon { width: 28px; height: 28px; }
.cta-block__text { font-size: 1.32rem; font-weight: 800; color: #fff; margin: 0 0 4px; }
.cta-block__note { margin: 0; color: var(--on-dark-soft); font-size: .94rem; }
.cta-block__action { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }

/* Spacing above .back-link comes from the unified rhythm (var(--section-gap)). */
.back-link a { color: var(--ink-soft); text-decoration: none; font-weight: 600; }
.back-link a:hover { color: var(--brand-strong); }

/* ── Root index (city selector) ──────────────────────────────────────────── */
.root-hero {
  position: relative; overflow: hidden;
  color: var(--on-dark);
  background: linear-gradient(152deg, var(--dark-2), var(--dark-1));
  border-radius: var(--radius); padding: 36px 24px; box-shadow: var(--shadow-lg);
}
.root-hero h1 { color: #fff; }
.root-hero .lead { color: var(--on-dark-soft); }
.root-hero__inner { position: relative; z-index: 2; }
.root-hero__copy { max-width: 640px; }

/* Root "Что делаем" — overview tiles (non-link) */
.dir-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.dir-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.dir-card__media {
  position: relative; height: 150px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--dark-3), var(--dark-1));
}
.dir-card__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(143,180,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143,180,255,.08) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 130% at 50% 0%, #000 28%, transparent 82%);
          mask-image: radial-gradient(120% 130% at 50% 0%, #000 28%, transparent 82%);
}
.dir-card__chip {
  position: relative; z-index: 1; display: inline-grid; place-items: center;
  width: 58px; height: 58px; border-radius: 16px; color: #d4e4ff;
  background: rgba(20, 33, 58, .6); border: 1px solid rgba(143, 180, 255, .30);
  box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.dir-card__chip .icon { width: 28px; height: 28px; }
.dir-card__body { padding: 16px 18px 18px; }
.dir-card__title { font-size: 1.1rem; margin: 0 0 6px; }
.dir-card__text { margin: 0; font-size: .94rem; color: var(--ink-soft); }

.cities__hint { color: var(--ink-soft); margin: -10px 0 18px; max-width: 64ch; }
.cities-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.city-link {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--ink); font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.city-link:hover { border-color: var(--brand-tint-line); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.city-link__pin {
  display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px;
  border-radius: 9px; color: var(--brand); background: var(--brand-tint); border: 1px solid var(--brand-tint-line);
}
.city-link__pin .icon { width: 18px; height: 18px; }
.city-link__name { flex: 1; }
.city-link__arrow { color: var(--brand); font-weight: 700; opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .15s ease; }
.city-link:hover .city-link__arrow { opacity: 1; transform: translateX(0); }

/* ── Footer (dark) ───────────────────────────────────────────────────────── */
.site-footer { margin-top: 72px; background: var(--dark-1); color: var(--on-dark-soft); font-size: .92rem; }
.site-footer__top { display: grid; grid-template-columns: 1fr; gap: 28px; padding: 44px 0 34px; }
.site-footer__name { font-size: 1.2rem; font-weight: 800; color: #fff; display: block; margin-bottom: 10px; }
.site-footer__brand p { color: var(--on-dark-soft); max-width: 46ch; }
.site-footer__phone { display: inline-block; font-size: 1.02rem; font-weight: 700; color: var(--on-dark); text-decoration: none; margin: 6px 0 6px; }
.site-footer__phone:hover { color: #fff; }
.site-footer__hint { display: block; font-size: .82rem; color: var(--on-dark-soft); }
.site-footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.site-footer__col-title { margin: 0 0 12px; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col li { margin-bottom: 8px; }
.site-footer__col a { color: var(--on-dark-soft); text-decoration: none; }
.site-footer__col a:hover { color: #fff; text-decoration: underline; }
.site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); }
.site-footer__bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding: 18px 0 26px; font-size: .8rem; color: var(--on-dark-soft); }

/* ── Mobile polish (≤ 639px) ─────────────────────────────────────────────────
   Targeted refinements for narrow phones (360–430px). The ≥ 640px tablet/desktop
   layout from Phase 3C is intentionally left untouched: every rule here is scoped
   to ≤ 639px and never matches wider viewports. */
@media (max-width: 639px) {
  /* Safety net against any accidental horizontal overflow on narrow screens. */
  body { overflow-x: hidden; }

  /* Topbar: lighter; only the geo line shows here (note is hidden < 640px). */
  .topbar { font-size: .76rem; }
  .topbar__inner { padding: 6px 0; }

  /* Header: declutter. Brand keeps just logo + name; the phone moves to its own
     row with a hairline divider; the full-width "Услуги" button stays below. */
  .header-main__inner { gap: 10px; padding: 12px 0; }
  .brand { gap: 10px; }
  .brand__logo { width: 34px; height: 34px; }
  .brand__name { font-size: 1.16rem; }
  .brand__tagline { display: none; }

  .header-contact {
    order: 4; flex-basis: 100%; margin-left: 0;
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px;
    text-align: left; margin-top: 2px; padding-top: 12px;
    border-top: 1px solid var(--line-soft);
  }

  .main-nav { gap: 10px; }

  /* Mega-menu: a compact, self-contained dark panel — not a full-screen "page".
     Groups stay vertical and readable; the list scrolls inside the panel instead
     of stretching down the whole screen, and "Все услуги" stays pinned and
     visible at the bottom. Links stay in the HTML; the disclosure is still pure
     CSS; only vertical scroll inside the panel, never horizontal. */
  .services-menu:focus-within > .mega-menu { display: flex; }
  .mega-menu {
    flex-direction: column; max-height: 60vh;
    margin-top: 8px; padding: 8px; border-radius: 14px;
  }
  .mega-menu__cols {
    flex: 1 1 auto; min-height: 0; gap: 2px;
    overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 2px;
  }
  .mega-menu__title { margin: 8px 0 4px; padding: 0 4px 6px; }
  .mega-menu__col a { padding: 9px 10px; font-size: .95rem; }
  .mega-menu__all { flex: none; display: block; text-align: center; margin: 8px 0 0; padding: 11px 16px; }

  /* Hero: full-bleed photo behind; copy stays first and readable, CTAs full-width. */
  .hero { padding: 30px 20px; }
  .hero__lead { font-size: 1.08rem; }
  .hero__actions { gap: 10px; margin: 22px 0 4px; }
  .hero__actions .btn { width: 100%; }
  .hero__points { margin-top: 18px; }
  .hero__bg { object-position: 72% center; }
  /* Darken the whole photo on small screens so the stacked copy stays legible. */
  .hero__scrim {
    background:
      linear-gradient(0deg, rgba(6, 11, 22, .92) 6%, rgba(6, 11, 22, .60) 52%, rgba(6, 11, 22, .64) 100%),
      linear-gradient(90deg, rgba(6, 11, 22, .55), rgba(6, 11, 22, .30));
  }
  .root-hero { padding: 28px 20px; }

  /* Service category cards: even spacing, slimmer media band. */
  .cat-grid { gap: 14px; }
  .cat-card__media { height: 104px; }
  .cat-card__body { padding: 16px 18px 18px; }

  /* "Почему выбирают" / "Наши работы" / process / FAQ — more compact. */
  .advantages { gap: 18px; }
  .advantage { padding: 16px; }
  .works__grid { gap: 14px; }
  .work-card__media { height: 112px; }
  .process__list { gap: 12px; }
  .faq-item { padding: 14px 0; }

  /* Service / info page head. */
  .page-head__inner { padding: 22px 18px; }

  /* Pre-footer CTA: phone and button never break out of the card. */
  .cta-block { padding: 26px 20px; }
  .cta-block__text { font-size: 1.18rem; }
  .cta-block__action { gap: 12px; }
  .cta-block__action .btn { width: 100%; }

  /* Footer: cleaner and more readable — not a dense technical list. Brand +
     description on top, phone a touch larger, link groups in one column with more
     air between them, bolder group headings, roomier tappable links, tidy bottom
     line. Stays single-column so long labels never wrap into a cramped mess. */
  .site-footer { margin-top: 48px; font-size: .95rem; }
  .site-footer__top { gap: 24px; padding: 34px 0 26px; }
  .site-footer__brand p { font-size: .95rem; line-height: 1.6; }
  .site-footer__phone { font-size: 1.05rem; margin: 10px 0 8px; }
  .site-footer__hint { font-size: .84rem; }
  .site-footer__nav { grid-template-columns: 1fr; gap: 22px; }
  .site-footer__col-title { font-size: .82rem; letter-spacing: .06em; margin-bottom: 10px; }
  .site-footer__col li { margin-bottom: 9px; }
  .site-footer__col a { display: inline-block; padding: 2px 0; font-size: .96rem; }
  .site-footer__bottom-inner { gap: 6px 16px; padding: 18px 0 28px; font-size: .82rem; line-height: 1.5; }
}

/* ── Tablet ──────────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  :root { --gutter: 22px; }
  .feature-strip { grid-template-columns: 1fr 1fr; gap: 16px 22px; padding: 22px 24px; }
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .dir-grid { grid-template-columns: 1fr 1fr; }
  .advantages__grid { grid-template-columns: 1fr 1fr; }
  .works__grid { grid-template-columns: 1fr 1fr; }
  .process__list { grid-template-columns: 1fr 1fr; }
  .info-grid { grid-template-columns: 1fr 1fr; }
  .related__grid { grid-template-columns: 1fr 1fr; }
  .contacts { grid-template-columns: 1fr 1fr; }
  .cities-grid { grid-template-columns: repeat(3, 1fr); }
  .cta-block { grid-template-columns: 1fr auto; align-items: center; padding: 34px 36px; }
  .topbar__note { display: inline; }
  .topbar__links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
  .hero { padding: 52px 44px; min-height: 440px; display: flex; align-items: center; }
  .hero__inner { width: 100%; }
  .page-head__inner { padding: 34px 38px; }
  .root-hero { padding: 52px 44px; }
}

/* ── Desktop ─────────────────────────────────────────────────────────────── */
@media (min-width: 940px) {
  :root { --gutter: 28px; }
  .main-nav { order: 0; flex-basis: auto; margin-left: 6px; }
  .services-menu { width: auto; }
  .services-menu__toggle { width: auto; }

  .mega-menu {
    position: absolute; top: calc(100% + 14px); left: 0; z-index: 60;
    width: 720px; max-width: 80vw; margin-top: 0;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  }
  .services-menu:focus-within > .mega-menu { display: block; }
  .services-menu:hover > .mega-menu,
  .services-menu:focus-within > .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); }
  .mega-menu__cols { grid-template-columns: repeat(4, 1fr); }
  .services-menu:hover .services-menu__caret,
  .services-menu:focus-within .services-menu__caret { transform: rotate(225deg); margin-top: 2px; }

  /* Tall photographic banner; copy vertically centred over the left ~55%. */
  .hero { padding: 56px 56px; min-height: 564px; display: flex; align-items: center; }
  .hero__inner { width: 100%; }
  .hero__content { max-width: 660px; }

  /* Root: shorter banner, photo heavily dimmed; the city grid below leads. */
  .root-hero { min-height: 360px; display: flex; align-items: center; }
  .root-hero__inner { width: 100%; }
  .root-hero .lead { max-width: 60ch; }

  .feature-strip { grid-template-columns: repeat(4, 1fr); }
  /* Overlap the hero on desktop — matches the unified rule's specificity so it
     overrides the base 22px. */
  main > .container > .feature-strip { margin-top: -34px; }
  /* Desktop: widen the unified section rhythm (Услуги / Почему мы / Наши работы
     / процесс) from 32px to 48px. One token, so all four stay in sync. */
  :root { --section-gap: 48px; }
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
  .dir-grid { grid-template-columns: repeat(4, 1fr); }
  .advantages { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 48px; }
  .works__grid { grid-template-columns: repeat(4, 1fr); }
  .cities-grid { grid-template-columns: repeat(5, 1fr); }

  .site-footer__top { grid-template-columns: 1.4fr 2fr; gap: 44px; }
  .site-footer__nav { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1120px) {
  .quick-nav { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .quick-nav a { display: inline-block; padding: 9px 13px; border-radius: 9px; font-size: .94rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; }
  .quick-nav a:hover { background: var(--brand-tint); color: var(--brand-strong); }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}