/* ═══════════════════════════════════════════════════════════════
   site.css — общий стиль внутренних страниц

   Собран из главной: внутренние страницы должны читаться её
   продолжением, а не отдельным сайтом. Взято только то, что нужно
   текстовой странице — без частиц, квиза, чата и калькуляторов.

   Отдельным файлом, а не блоком <style> на каждой странице: браузер
   скачивает его один раз и дальше берёт из кэша. На двенадцати
   страницах это разница между «грузится каждый раз» и «мгновенно».

   Правки, общие для всех страниц, — сюда. Правки под одну страницу —
   в её собственный <style> внизу файла страницы.
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Фон: глубокий тёмно-синий ── */
  --ink:       #020813;   /* основной фон страницы */
  --deep:      #050E1E;   /* фон карточек и панелей */

  /* ── Главный акцент: неоновый циан ── */
  --cyan:      #00F0FF;
  --cyan-deep: #0B7A8C;

  /* ── Второй акцент: глубокий синий ── */
  --blue:      #2D9CFF;
  --blue-deep: #0B3D75;

  --neon-glow: rgba(0, 240, 255, 0.4);
  --white:     #E8F0FF;
  --mist:      #6B7A9F;

  --f-display: 'Cinzel', 'Georgia', serif;
  --f-serif:   'Cormorant Garamond', 'Georgia', serif;
  --f-body:    'Manrope', 'Helvetica Neue', sans-serif;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--white);
  font-family: var(--f-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--cyan-deep); border-radius: 2px; }


/* ═══════════════════════════════════════════
   NAV
═══════════════════════════════════════════ */
nav {
  /* Прилипанием к верху теперь занимается #topbar, шапка внутри него —
     обычная строка. relative оставлено: относительно шапки может
     позиционироваться её содержимое. */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 3rem;
  background: linear-gradient(180deg, rgba(2,8,19,0.95) 0%, transparent 100%);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,240,255,0.08);
}
/* Знак слева от названия. Шапка — единственное место, где бренд виден
   на любом экране: в первом экране главной значок на телефоне скрыт. */
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--f-display);
  white-space: nowrap;
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  color: var(--cyan);
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.3s ease;
}
.nav-logo:hover {
  text-shadow: 0 0 12px rgba(0,240,255,0.6);
}
.nav-znak {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: block;
}
.nav-links {
  display: flex;
  gap: 2.4rem;
  list-style: none;
}
.nav-links a {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist);
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  padding-bottom: 0.3rem;
}
.nav-links a:hover {
  color: var(--white);
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--cyan);
  transition: width 0.3s ease;
}
.nav-links a:hover::after {
  width: 100%;
}
.nav-cta {
  font-size: 0.63rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.75rem 1.8rem;
  border: 2px solid rgba(45,156,255,0.5);
  color: var(--cyan);
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.nav-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  z-index: -1;
}
.nav-cta:hover {
  color: var(--ink);
  border-color: var(--cyan);
  box-shadow: 0 0 20px rgba(0,240,255,0.35);
}
.nav-cta:hover::before {
  transform: scaleX(1);
}
@media (max-width: 700px) {
  nav { padding: 1.1rem 1.4rem; }
  .nav-links { display: none; }
}

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.btn-action {
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 1rem 2.2rem;
  border: 2px solid rgba(45,156,255,0.5);
  color: var(--cyan);
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: transparent;
  font-family: var(--f-body);
  font-weight: 600;
}
.btn-action::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  z-index: -1;
}
.btn-action:hover {
  color: var(--ink);
  border-color: var(--cyan);
  box-shadow: 0 0 24px rgba(45,156,255,0.5);
  transform: translateY(-2px);
}
.btn-action:hover::before {
  transform: scaleX(1);
}
.btn-action-secondary {
  background: linear-gradient(135deg, rgba(45,156,255,0.1), rgba(0,150,255,0.05));
  border-color: rgba(0,150,255,0.4);
  color: var(--blue);
}
.btn-action-secondary::before {
  background: linear-gradient(135deg, var(--blue), rgba(0,150,255,0.8));
}
.btn-action-secondary:hover {
  color: var(--white);
  border-color: var(--blue);
  box-shadow: 0 0 24px rgba(0,150,255,0.5);
}

.section-title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  margin-bottom: 0.6rem;
  color: var(--white);
}
.section-eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--blue);
  text-align: center;
  margin-bottom: 1.2rem;
  font-weight: 600;
}
.section-desc {
  font-size: 0.9rem;
  color: var(--mist);
  text-align: center;
  max-width: 540px;
  margin: 0 auto 3.6rem;
  line-height: 1.7;
  letter-spacing: 0.03em;
}
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════
   HOLOGRAM FLOAT ANIMATIONS
═══════════════════════════════════════════ */
@keyframes holo-float-a {
  0%, 100% { transform: translateY(0px) rotate(0.3deg); }
  50%       { transform: translateY(-18px) rotate(-0.3deg); }
}
@keyframes holo-float-b {
  0%, 100% { transform: translateY(-8px) rotate(-0.2deg); }
  50%       { transform: translateY(12px) rotate(0.4deg); }
}
@keyframes holo-float-c {
  0%, 100% { transform: translateY(4px) rotate(0.1deg); }
  50%       { transform: translateY(-14px) rotate(-0.4deg); }
}
@keyframes holo-scanline {
  0%   { top: -20%; opacity: 0.6; }
  80%  { opacity: 0.3; }
  100% { top: 110%; opacity: 0; }
}
@keyframes holo-pulse-border {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}

.svc-card {
  background: rgba(5, 14, 30, 0.35);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 2px solid rgba(0, 240, 255, 0.5);
  border-radius: 16px;
  padding: 2.4rem;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow:
    0 0 22px rgba(0, 240, 255, 0.32),
    0 0 60px rgba(0, 180, 255, 0.1),
    inset 0 0 18px rgba(0, 240, 255, 0.08);
  transition: box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}

/* Разные скорости покачивания для каждой карточки.
   ЧЕТЫРЕ ПРОХОДА, А НЕ БЕСКОНЕЧНО. Раньше стояло infinite,
   и карточки качались всё время, пока страница открыта. Две беды
   сразу. Первая: движущаяся мишень — палец целится в метку,
   а она уезжает; на этом же спотыкалась и наша проверка кликами.
   Вторая: бесконечная анимация держит видеоядро включённым
   и ест батарею телефона всё время, пока человек читает.

   Четыре прохода — это около тридцати секунд: дольше на карточки
   никто не смотрит, а ощущение живой страницы остаётся. Кадры начинаются
   и кончаются одним и тем же положением, поэтому карточка
   замирает ровно там, где стояла, без рывка. */
.svc-card:nth-child(1) { animation: holo-float-a 6.5s ease-in-out 4; }
.svc-card:nth-child(2) { animation: holo-float-b 8.2s ease-in-out 4; }
.svc-card:nth-child(3) { animation: holo-float-c 7.1s ease-in-out 4; }
.svc-card:nth-child(4) { animation: holo-float-b 9.0s ease-in-out 4; }
.svc-card:nth-child(5) { animation: holo-float-c 6.8s ease-in-out 4; }
.svc-card:nth-child(6) { animation: holo-float-a 7.6s ease-in-out 4; }

/* Верхняя светящаяся линия */
.svc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(0,240,255,1), rgba(0,240,255,0.7), transparent);
  /* Четыре прохода, а не бесконечно: под линией стоит текст карточки,
     и мигание рядом со строкой мешает читать. Через двенадцать секунд
     линия замирает на своей спокойной яркости — forwards обязателен,
     иначе она вернётся к полной непрозрачности и станет ярче, чем была. */
  animation: holo-pulse-border 3s ease-in-out 4 forwards;
  z-index: 2;
}

/* Бегущая сканлиния */
.svc-card::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 40px;
  background: linear-gradient(180deg, transparent, rgba(0,220,255,0.06), transparent);
  /* То же ограничение и по той же причине: полоса бежит ПО тексту.
     forwards здесь не украшение, а обязательное условие — последний кадр
     уводит её за нижний край и гасит; без него она вернулась бы
     к началу правила и осталась бы висеть поперёк карточки. */
  animation: holo-scanline 5s linear 4 forwards;
  pointer-events: none;
  z-index: 1;
}
.svc-card:nth-child(2)::after { animation-delay: -1.7s; }
.svc-card:nth-child(3)::after { animation-delay: -3.2s; }
.svc-card:nth-child(4)::after { animation-delay: -0.9s; }
.svc-card:nth-child(5)::after { animation-delay: -2.5s; }
.svc-card:nth-child(6)::after { animation-delay: -4.1s; }

/* Hover — tilt применяется через JS, здесь усиливаем свечение */
.svc-card:hover {
  animation-play-state: paused;
  border-color: rgba(0, 240, 255, 1);
  background: rgba(5, 14, 30, 0.55);
  box-shadow:
    0 0 40px rgba(0, 240, 255, 0.6),
    0 0 80px rgba(0, 160, 255, 0.25),
    0 30px 80px rgba(0,0,0,0.7),
    inset 0 0 30px rgba(0, 240, 255, 0.16);
}

/* Чётные карточки — синее свечение вместо цианового */
.svc-card:nth-child(even) {
  border-color: rgba(45,156,255,0.5);
  box-shadow:
    0 0 22px rgba(45,156,255,0.26),
    0 0 60px rgba(0,90,180,0.1),
    inset 0 0 18px rgba(45,156,255,0.07);
}
.svc-card:nth-child(even)::before {
  background: linear-gradient(90deg, transparent, rgba(45,156,255,1), rgba(0,240,255,0.55), transparent);
}
.svc-card:nth-child(even):hover {
  border-color: rgba(120,235,255,1);
  box-shadow:
    0 0 40px rgba(45,156,255,0.5),
    0 0 80px rgba(0,120,255,0.2),
    0 30px 80px rgba(0,0,0,0.7),
    inset 0 0 30px rgba(45,156,255,0.1);
}

/* ═══════════════════════════════════════════
   HOLD-TO-GLOW (стиль Obsidian)
   Класс .holding вешает JS, пока карточка зажата
═══════════════════════════════════════════ */
.svc-card {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.svc-card.holding {
  animation: gather-glow 0.55s forwards ease-in-out !important;
  border-color: #00F0FF;
}

@keyframes gather-glow {
  0% {
    box-shadow:
      0 0 15px rgba(0,240,255,0.25),
      inset 0 0 10px rgba(0,240,255,0.05);
  }
  100% {
    /* энергия «собирается» внутрь карточки */
    box-shadow:
      inset 0 0 28px rgba(0,240,255,0.55),
      0 0 38px rgba(0,240,255,0.75),
      0 0 90px rgba(45,156,255,0.3);
  }
}

/* Кольцо «заряда», которое затягивается к точке нажатия */
.svc-card .hold-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  background: radial-gradient(circle at var(--hx, 50%) var(--hy, 50%),
              rgba(0,240,255,0.22) 0%,
              rgba(0,240,255,0.06) 35%,
              transparent 70%);
  transition: opacity 0.25s ease;
}
.svc-card.holding .hold-ring { opacity: 1; }

/* Нажатие на кнопках — короткая вспышка циана */
.btn-action:active,
.btn-svc:active,
.nav-cta:active,
.svc-tab:active {
  box-shadow: inset 0 0 18px rgba(0,240,255,0.45), 0 0 26px rgba(0,240,255,0.6);
  transform: translateY(0) scale(0.985);
}
.btn-submit:active:not(:disabled) {
  transform: scale(0.97);
  box-shadow: 0 0 34px rgba(0,240,255,0.8);
}

@media (prefers-reduced-motion: reduce) {
  .svc-card.holding { animation: none !important; }
}

.svc-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0;
  background: transparent;
  margin-bottom: 1.4rem;
  transition: all 0.4s ease;
  position: relative;
  z-index: 1;
  color: rgba(0, 194, 255, 0.75);
  filter: drop-shadow(0 0 6px rgba(0,240,255,0.4));
}
.svc-card:nth-child(even) .svc-icon {
  color: rgba(45,156,255,0.8);
  filter: drop-shadow(0 0 6px rgba(45,156,255,0.4));
}
.svc-card:nth-child(3n) .svc-icon {
  color: rgba(45,156,255,0.8);
  filter: drop-shadow(0 0 6px rgba(45,156,255,0.35));
}
.svc-card:hover .svc-icon {
  color: rgba(0,220,255,1);
  filter: drop-shadow(0 0 14px rgba(0,220,255,0.8)) drop-shadow(0 0 28px rgba(0,160,255,0.4));
  transform: scale(1.12) translateZ(10px);
}
.svc-card:nth-child(even):hover .svc-icon {
  color: rgba(120,235,255,1);
  filter: drop-shadow(0 0 14px rgba(45,156,255,0.9)) drop-shadow(0 0 28px rgba(0,120,255,0.4));
}

.svc-name {
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cyan);
  margin-bottom: 0.8rem;
  position: relative;
  z-index: 1;
}
.svc-desc {
  font-size: 0.85rem;
  color: var(--mist);
  line-height: 1.8;
  letter-spacing: 0.02em;
  margin-bottom: 1.6rem;
  position: relative;
  z-index: 1;
}

.btn-svc {
  display: inline-block;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.8rem 1.8rem;
  border: 2px solid rgba(0,240,255,0.35);
  color: var(--cyan);
  text-decoration: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: transparent;
  font-family: var(--f-body);
  font-weight: 600;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.btn-svc::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  z-index: -1;
}
.btn-svc:hover {
  color: var(--ink);
  border-color: var(--cyan);
  box-shadow: 0 0 16px rgba(0,240,255,0.35);
  transform: translateY(-1px);
}
.btn-svc:hover::before {
  transform: scaleX(1);
}
.order-box {
  max-width: 600px;
  margin: 0 auto;
  background: rgba(5, 13, 30, 0.7);
  backdrop-filter: blur(24px);
  border: 1.5px solid rgba(45,156,255,0.22);
  border-radius: 20px;
  padding: 3rem;
  box-shadow: 0 0 60px rgba(0,240,255,0.12), 0 30px 100px rgba(0,0,0,0.7);
}

.order-eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 1rem;
  font-weight: 600;
}

.order-title {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 0.8rem;
  color: var(--white);
}

.order-sub {
  font-size: 0.9rem;
  color: var(--mist);
  letter-spacing: 0.03em;
  line-height: 1.7;
  margin-bottom: 2.4rem;
}

/* Service tabs */
.svc-tabs {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.svc-tab {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.7rem 1.4rem;
  border: 1.5px solid rgba(45,156,255,0.22);
  color: var(--mist);
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--f-body);
  font-weight: 500;
}
.svc-tab:hover {
  border-color: rgba(45,156,255,0.5);
  color: var(--cyan);
}
.svc-tab.active {
  background: var(--cyan);
  color: var(--ink);
  border-color: var(--cyan);
  box-shadow: 0 0 16px rgba(0,240,255,0.35);
}

.order-form {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* ── Свёрнутые необязательные поля заявки ────────────────
   Находка владелицы 14.09.2026: после длинной страницы финал должен
   быть мгновенным — один контакт и кнопка. Всё, без чего заявка
   существует, убрано под эту строку.

   Тап-зона не меньше 44 px: промах здесь означает, что человек
   не открыл поля, решив, что кнопка не работает. */
.form-dop { margin: 0 0 1.1rem; }

.form-dop > summary {
  display: block;
  padding: 0.7rem 0;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: 0.92rem;
  color: var(--blue);
  border-bottom: 1px dashed rgba(45, 156, 255, 0.35);
  transition: color 0.25s ease;
}
.form-dop > summary::-webkit-details-marker { display: none; }
.form-dop > summary::before { content: "+ "; }
.form-dop[open] > summary::before { content: "− "; }
.form-dop > summary:hover { color: var(--cyan); }
.form-dop > summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Первое поле не прижимается к строке-раскрывашке */
.form-dop[open] > summary { margin-bottom: 1rem; }

.form-group {
  position: relative;
}

.form-group input, .form-group textarea {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(0,240,255,0.2);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  font-family: var(--f-body);
  /* 16 px, а не 0.9rem (14,4). Ниже шестнадцати Safari на iPhone сам
     приближает страницу при касании поля: экран прыгает, человек
     теряет место, а масштаб обратно не возвращается. Поведение
     браузера, а не вкус. Найдено замером 03.09.2026. */
  font-size: 16px;
  color: var(--white);
  outline: none;
  transition: all 0.3s ease;
  letter-spacing: 0.02em;
}

.form-group input:focus, .form-group textarea:focus {
  border-color: rgba(0,240,255,0.6);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 3px rgba(0,240,255,0.08), 0 0 20px rgba(0,240,255,0.15);
}

.form-group label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.btn-submit {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 1.1rem 2.2rem;
  border: none;
  background: linear-gradient(135deg, #00F0FF, #1E7FE0);
  color: var(--ink);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--f-body);
  font-weight: 700;
  margin-top: 0.6rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 24px rgba(0,240,255,0.35);
}

.btn-submit:hover:not(:disabled) {
  box-shadow: 0 0 40px rgba(120,235,255,0.7), 0 0 80px rgba(0,240,255,0.2);
  transform: translateY(-2px);
}

.btn-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.btn-submit.loading {
  position: relative;
  color: transparent;
}

.btn-loader {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0,0,0,0.3);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.btn-submit.loading .btn-loader {
  display: block;
}

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.form-success {
  display: none;
  text-align: center;
  padding: 2rem 0;
}

.form-success.visible {
  display: block;
}

.success-icon {
  font-size: 2.2rem;
  color: var(--cyan);
  margin-bottom: 0.8rem;
  display: block;
}

.success-text {
  font-family: var(--f-display);
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  color: var(--white);
  margin-bottom: 0.4rem;
}

.success-sub {
  font-size: 0.8rem;
  color: var(--mist);
  letter-spacing: 0.06em;
}

.case-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.case-card { display: flex; flex-direction: column; }

/* ═══ Карточка портфолио нажимается целиком ═══════════════════════
   Замечание владелицы 25.08.2026: метки вроде «КЛИМАТ · ЛЕНДИНГ
   С ПОДБОРОМ» выглядят кнопками — рамка, скругление, — а нажать
   их нельзя. Человек тыкает, и ничего не происходит. Это хуже,
   чем если бы метка выглядела простой подписью.

   Чиним не метку, а всю карточку: она ведёт туда же, куда её
   главная ссылка. Нажимается заголовок, описание, метка, пустое
   место — что угодно.

   ПОЧЕМУ НЕ ЧЕРЕЗ CSS. Обычный приём — растянуть невидимую плёнку
   псевдоэлементом от самой ссылки (`.case-link::after`). Здесь он
   не работает: у карточек трёхмерное покачивание (preserve-3d
   и will-change: transform), и браузер отдаёт нажатие карточке,
   а не плёнке. Проверено кликами: нажатие приходило на article,
   ссылка не срабатывала. Поэтому переход вешает скрипт —
   он от способа отрисовки не зависит.

   Класс ставится скриптом: без скрипта карточка не притворяется
   нажимаемой, и палец не обманут. */
.case-card--nazhimaetsya { cursor: pointer; }

/* Метка подсвечивается вместе со всей карточкой, а не сама
   по себе: она часть карточки, а не отдельная кнопка. */
.case-card:hover .case-tag { border-color: rgba(45,156,255,0.8); }

.case-tag { border-color: rgba(45,156,255,0.8); }

.case-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  border: 1.5px solid rgba(45,156,255,0.35);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  margin-bottom: 1rem;
}

.case-facts {
  list-style: none;
  margin: 0.2rem 0 1.4rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.case-facts li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--mist);
}

.case-facts li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--cyan);
}

.case-card .btn-svc { margin-top: auto; }

/* ═══════════════════════════════════════════
   ПРАЙС
═══════════════════════════════════════════ */
.price-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.price-card { display: flex; flex-direction: column; }

.price-value {
  font-family: var(--f-display);
  font-size: 1.35rem;
  color: var(--cyan);
  letter-spacing: 0.04em;
  margin: 1rem 0 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(45,156,255,0.18);
}

/* Акционная цена: старая зачёркнута и приглушена, новая — обычным
   ярким шрифтом цены. Зачёркнутое число само по себе ничего не значит,
   поэтому рядом строка со сроком: скидка без срока не скидка. */
.price-was {
  font-size: 0.95rem;
  color: var(--mist);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  margin-right: 0.55rem;
  letter-spacing: 0.02em;
}

.price-note {
  font-size: 0.75rem;
  color: var(--mist);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: -1rem 0 1.4rem;
}

.price-card .btn-svc { margin-top: auto; }

/* ═══════════════════════════════════════════
   КАК МЫ РАБОТАЕМ
═══════════════════════════════════════════ */
.steps {
  max-width: 780px;
  margin: 0 auto;
  list-style: none;
  counter-reset: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.step {
  display: flex;
  gap: 1.6rem;
  padding-bottom: 2.6rem;
  position: relative;
}

/* Линия, соединяющая шаги — путь клиента виден одним взглядом */
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 52px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(45,156,255,0.4), rgba(45,156,255,0.06));
}

.step-num {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-size: 1.05rem;
  color: var(--cyan);
  border: 1.5px solid rgba(45,156,255,0.35);
  background: rgba(5,14,30,0.9);
  box-shadow: 0 0 20px rgba(45,156,255,0.15);
}

.step-name {
  font-family: var(--f-display);
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  color: var(--white);
}

.step-text {
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--mist);
}

/* ═══════════════════════════════════════════
   ВОПРОСЫ
═══════════════════════════════════════════ */
.faq-list {
  max-width: 780px;
  margin: 2.5rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.faq-item {
  border: 1.5px solid rgba(45,156,255,0.16);
  border-radius: 12px;
  background: rgba(5,14,30,0.5);
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.faq-item[open] { border-color: rgba(45,156,255,0.4); }

.faq-item summary {
  padding: 1.15rem 3rem 1.15rem 1.4rem;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--white);
  list-style: none;
  position: relative;
  transition: color 0.25s ease;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--cyan); }
.faq-item summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }

/* Плюс, который превращается в минус */
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 1.4rem;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background:
    linear-gradient(var(--cyan), var(--cyan)) center/12px 1px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) center/1px 12px no-repeat;
  transition: transform 0.3s var(--ease-out-expo);
}

.faq-item[open] summary::after {
  transform: rotate(135deg);
  background:
    linear-gradient(var(--cyan), var(--cyan)) center/12px 1px no-repeat;
}

.faq-item p {
  padding: 0 1.4rem 1.4rem;
  font-size: 0.87rem;
  line-height: 1.8;
  color: var(--mist);
}

@media (max-width: 600px) {
  #why, #process, #faq { padding: 4.5rem 1.2rem; }
  .step { gap: 1.1rem; }
  .step:not(:last-child)::before { left: 19px; }
  .step-num { width: 38px; height: 38px; font-size: 0.9rem; }
}
/* Согласие на обработку данных */
/* ЛОВУШКА ДЛЯ РОБОТОВ. Поле уезжает за край экрана, а НЕ прячется
   через display:none — такие поля роботы часто пропускают, а это
   поле как раз и надо, чтобы они заполнили. Человек его не видит
   и клавишей Tab не доберётся: tabindex="-1". */
.lovushka { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 1.4rem 0 1.6rem;
  cursor: pointer;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--mist);
}

.consent input {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 0.15rem;
  accent-color: var(--cyan);
  cursor: pointer;
}

.consent a { color: var(--cyan); text-decoration: underline; }
.consent a:hover { text-shadow: 0 0 12px rgba(45,156,255,0.5); }

.consent input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ═══════════════════════════════════════════
   ПОДВАЛ
═══════════════════════════════════════════ */
footer {
  position: relative;
  z-index: 2;
  padding: 5rem 2rem 2rem;
  border-top: 1px solid rgba(45,156,255,0.14);
  background: linear-gradient(180deg, transparent, rgba(5,14,30,0.6));
}

.footer-grid {
  /* Колонок стало пять вместо трёх: к контактам и реквизитам добавились
     списки услуг и разделов. Жёсткие доли 1.4fr 1fr 1.2fr под пять колонок
     не подходят — четвёртая и пятая просто не помещались бы. auto-fit
     раскладывает столько колонок, сколько влезает, и сам переносит
     остальные на следующую строку. */
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2.4rem 2rem;
}

.footer-brand {
  font-family: var(--f-display);
  font-size: 1.1rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.9rem;
}

.footer-tagline {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--mist);
  max-width: 30ch;
}

.footer-head {
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.1rem;
  font-weight: 600;
}

.footer-col { display: flex; flex-direction: column; }

.footer-link {
  font-size: 0.85rem;
  line-height: 1.9;
  color: var(--mist);
  text-decoration: none;
  transition: color 0.25s ease;
  width: fit-content;
}

.footer-link:hover,
.footer-link:focus-visible { color: var(--cyan); }

.footer-req {
  font-size: 0.82rem;
  line-height: 1.8;
  color: var(--mist);
}

.footer-bottom {
  max-width: 1100px;
  margin: 3.5rem auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(45,156,255,0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--mist);
}

@media (max-width: 820px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  footer { padding: 3.5rem 1.4rem 2rem; }
}
/* Телефон в шапке */
.nav-actions {
  display: flex;
  align-items: center;
}

/* Номер в шапке. Раньше это была строчка текста цвета циан — ссылка
   работала, но выглядела как подпись, и по ней не нажимали. Теперь рамка,
   трубка и высота 44 пикселя: видно, что это кнопка, и в неё попадают
   пальцем. 44 — нижняя граница, при которой попадают с телефона. */
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  font-family: var(--f-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #00F0FF;
  text-decoration: none;
  white-space: nowrap;
  margin-right: 0.8rem;
  border: 1.5px solid rgba(0,240,255,0.35);
  border-radius: 999px;
  transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.nav-phone-ico { width: 17px; height: 17px; fill: currentColor; flex-shrink: 0; }
.nav-phone:active { transform: scale(0.97); }
.nav-phone:hover,
.nav-phone:focus-visible {
  color: #A8FBFF;
  border-color: #00F0FF;
  box-shadow: 0 0 18px rgba(0,240,255,0.35);
}
.nav-phone:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

@media (max-width: 860px) {
  /* Раньше здесь номер прятали совсем — «есть же плавающая кнопка звонка».
     Но плавающая кнопка живёт только на главной, а на страницах услуг
     её нет: человек дочитал про цену, захотел позвонить — и звонить неоткуда.
     Теперь номер остаётся, только сворачивается в круглую кнопку с трубкой:
     целиком он в узкую шапку не влезает, а звонок нужен именно с телефона. */
  .nav-phone {
    width: 44px;
    padding: 0;
    justify-content: center;
    margin-right: 0.5rem;
  }
  .nav-phone-num { display: none; }
  .nav-phone-ico { width: 19px; height: 19px; }
}
/* Ошибки форм. Красный только у пометки, не у всей формы:
   задача — показать, где споткнулись, а не напугать. */
.form-error{ margin:.4rem 0 0; padding:.7rem .9rem; border-radius:8px;
  font-size:.78rem; line-height:1.6; letter-spacing:.02em;
  color:#FFB4C8; background:rgba(255,60,110,.08);
  border:1px solid rgba(255,60,110,.28); }
.form-error[hidden]{ display:none; }

.invalid{ border-color:rgba(255,60,110,.55) !important; }
input[type="checkbox"].invalid{ outline:2px solid rgba(255,60,110,.55); outline-offset:2px; }

/* Две галочки подряд — между ними нужен воздух, иначе читаются
   как один абзац и вторую просто не замечают. */
.consent + .consent{ margin-top:.7rem; }

/* Расшифровка «вайбкодинга». Оформлена как врезка, а не как ещё
   одна карточка: это ответ на возражение, его нужно прочитать
   подряд, а не сравнить с соседями. */
.vibe-explain{ max-width:52rem; margin:0 auto 3.4rem; padding:1.8rem 1.6rem;
  border-radius:14px; border:1.5px solid rgba(45,156,255,.24);
  border-left:2px solid var(--blue);
  background:linear-gradient(180deg,rgba(5,14,30,.85),rgba(2,8,19,.85)); }
.vibe-explain-title{ font-family:var(--f-display); font-size:.95rem;
  font-weight:700; letter-spacing:.12em; color:var(--white); margin:0 0 1rem; }
.vibe-explain p{ margin:0 0 .9rem; font-size:.86rem; line-height:1.8;
  letter-spacing:.02em; color:var(--mist); }
.vibe-explain p:last-child{ margin-bottom:0; }
.vibe-explain strong{ color:var(--white); font-weight:600; }
@media (max-width:768px){ .vibe-explain{ padding:1.4rem 1.2rem; margin-bottom:2.6rem; } }
/* Стек в карточке кейса — техническая строка, поэтому моноширинным
   и приглушённо: кто её ищет, тот найдёт, остальным она не мешает. */
.case-stack{ margin:.2rem 0 .8rem; font-family:ui-monospace,'Cascadia Code',Consolas,monospace;
  font-size:.66rem; letter-spacing:.02em; line-height:1.6; color:var(--mist); opacity:.8; }

/* Плашка «в работе». Приглушённая намеренно — это честная пометка,
   а не награда, и спорить за внимание с живой ссылкой ей незачем. */
.case-status{ display:inline-block; margin:0 0 1rem; padding:.28rem .7rem;
  border-radius:999px; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mist); border:1.5px solid rgba(45,156,255,.28); }

/* ── экраны приложения в кейсе ────────────────────────────────────
   Три снимка телефона рядом. Рамка нарисована стилями, а не картинкой:
   так она весит ноль и не мылится на экране с двойной плотностью.
   Тёплые экраны кафе на холодном фоне студии — контраст намеренный,
   он и делает снимки заметными. */
.case-shots{ display:grid; gap:1.6rem; margin-top:1.6rem;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); }
.case-shot{ margin:0; display:flex; flex-direction:column; gap:.9rem; }
.case-shot img{ width:100%; height:auto; display:block; border-radius:22px;
  border:2px solid rgba(0,240,255,.22);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.9), 0 0 0 6px rgba(5,14,30,.9);
  background:var(--deep); }
/* Снимок — ссылка в живое приложение. Ссылка должна вести себя как
   ссылка: подниматься под курсором и показывать рамку при переходе
   с клавиатуры. Без этого человек не понимает, что по снимку можно
   нажать, — а именно на это и указала владелица 24.08.2026. */
.case-shot a{ display:block; border-radius:22px; text-decoration:none;
  transition:transform .18s ease-out; }
.case-shot a:hover{ transform:translateY(-3px); }
.case-shot a:focus-visible{ outline:3px solid var(--blue); outline-offset:4px; }
.case-shot figcaption{ font-size:.8rem; line-height:1.5; color:var(--mist); }
@media (max-width:600px){
  .case-shots{ grid-template-columns:1fr; max-width:320px; margin-inline:auto; }
}

/* Ссылка на живой сайт клиента в карточке портфолио. */
/* Ссылка на живой сайт — главное действие кейса, поэтому это кнопка,
   а не строчка текста. Раньше в неё было 17px высоты: пальцем не попасть,
   промах уводил в форму заявки. Теперь 44px — нижняя граница, при
   которой попадают с телефона. */
.case-link{ display:inline-flex; align-items:center; min-height:44px;
  margin:.2rem 0 1rem; padding:.55rem 1.1rem; font-size:.72rem;
  letter-spacing:.06em; color:var(--cyan); text-decoration:none;
  background:rgba(0,240,255,.07); border:2px solid rgba(0,240,255,.45);
  border-radius:8px; transition:background .25s ease, border-color .25s ease,
  box-shadow .25s ease; }
.case-link:hover{ background:rgba(0,240,255,.14); border-color:var(--cyan);
  box-shadow:0 0 22px rgba(0,240,255,.45); }
.case-link:active{ transform:scale(.985);
  box-shadow:inset 0 0 16px rgba(0,240,255,.4), 0 0 24px rgba(0,240,255,.6); }
.case-link:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }


/* ═══════════════════════════════════════════
   ДАЛЬШЕ — ТОЛЬКО ВНУТРЕННИЕ СТРАНИЦЫ

   Всё выше скопировано с главной один в один, чтобы страницы
   не разъезжались по виду. Всё ниже написано под многостраничник:
   на одностраничнике этих блоков не было и быть не могло.
═══════════════════════════════════════════ */

/* Шапка прилипает к верху. На главной этим занимается #topbar,
   здесь полосы приглашения в чат нет — липнет сама шапка. */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
}

/* Отступ под фиксированную шапку. Без него первый заголовок
   страницы уезжает под неё и его не видно. */
.page-main {
  position: relative;
  z-index: 2;
  padding-top: 4.6rem;
}

/* ── Бургер ──────────────────────────────────────────────
   На главной меню на телефоне просто пряталось: разделов не было,
   прятать было нечего. В многостраничнике так нельзя — без меню
   с телефона не попасть ни в одну страницу, кроме главной.

   Кнопка — <button> с aria-expanded, а не картинка: скринридер
   должен сказать «свёрнуто/развёрнуто», а не «изображение». */
.nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-left: 0.8rem;
  background: transparent;
  border: 1.5px solid rgba(45,156,255,0.4);
  border-radius: 8px;
  cursor: pointer;
  position: relative;
}
.nav-burger:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.nav-burger span,
.nav-burger span::before,
.nav-burger span::after {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  background: var(--cyan);
  border-radius: 2px;
  transition: transform 0.3s var(--ease-out-expo), opacity 0.2s ease;
}
.nav-burger span { top: 50%; transform: translate(-50%, -50%); }
.nav-burger span::before,
.nav-burger span::after { content: ''; left: 0; }
.nav-burger span::before { transform: translateY(-6px); }
.nav-burger span::after  { transform: translateY(6px); }

.nav-burger[aria-expanded="true"] span { background: transparent; }
.nav-burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] span::after  { transform: rotate(-45deg); }

@media (max-width: 860px) {
  .nav-burger { display: block; }

  /* Название студии из трёх слов при большом межбуквенном расстоянии
     не влезало в строку и уезжало на вторую, распирая шапку по высоте. */
  .nav-logo { font-size: 0.62rem; letter-spacing: 0.26em; }
  .nav-znak { width: 26px; height: 26px; }
}

/* ── Шапка на узком телефоне ────────────────────────────────────
   Найдено замером 03.09.2026, и это была самая дорогая ошибка сайта.

   Шапке нужно 415 точек, а у iPhone SE и iPhone 8 их 375. Кнопка меню
   уезжала за правый край: из 44 точек оставалось видно 4. При этом
   `body { overflow-x: hidden }` прячет переполнение, поэтому сайт
   не «разъезжался» — он молча обрезал единственный вход в разделы.
   На всех 36 страницах, с самого перехода на многостраничник.

   Что убираем: НАЗВАНИЕ студии рядом со знаком, 160 точек из 415.
   Знак остаётся и по-прежнему ведёт на главную; название человек уже
   прочитал на первом экране. Кнопку «Заказать» и телефон не трогаем —
   это способы связаться, а меню без них было бы витриной без двери.

   Ссылке нужен aria-label: без видимого текста экранный диктор
   прочитал бы «ссылка» и ничего больше. Он проставлен в разметке —
   в src/partials/header.html и в public/index.html, в двух местах. */
@media (max-width: 480px) {
  .nav-logo-text { display: none; }
  .nav-phone { margin-right: 0.4rem; }
  .nav-burger { margin-left: 0.5rem; }
  nav { padding: 1rem 0.9rem; }
  nav { padding: 1rem 1.1rem; }

  /* Выпадает под шапку на всю ширину. Не боковая шторка: шторке нужен
     оверлей, блокировка прокрутки и ловушка фокуса — три места, где
     можно ошибиться, ради одного и того же списка ссылок. */
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0.6rem 1.4rem 1.2rem;
    /* Непрозрачный, без полутонов. Было rgba(...,0.98) — те самые два
       процента просвета, из-за которых заголовок страницы читался
       сквозь меню. На тёмном фоне это видно, на светлом бы не заметили. */
    background: var(--ink);
    border-bottom: 1px solid rgba(0,240,255,0.14);
    box-shadow: 0 14px 28px rgba(0,0,0,0.5);
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    padding: 0.9rem 0;
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(45,156,255,0.1);
  }
  /* Подчёркивание-подсветку из десктопного меню здесь убираем:
     оно рисуется под текстом и в столбик выглядит как ошибка. */
  .nav-links a::after { display: none; }
}

/* Текущая страница и текущий раздел в меню. У страницы есть ещё и
   aria-current — атрибут для скринридера, цвет для глаза. У раздела
   только цвет: «текущая страница» для скринридера должна быть одна. */
.nav-links a[aria-current="page"],
.nav-links a.is-section { color: var(--cyan); }

/* ── Хлебные крошки ──────────────────────────────────────
   Нужны в многостраничнике по двум причинам: человек видит, где он
   и куда вернуться, а Яндекс с Google рисуют путь в выдаче вместо
   голого адреса. Разметка BreadcrumbList лежит в <head> страницы. */
.crumbs {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.6rem 2rem 0;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--mist);
}
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; }
.crumbs li { display: flex; align-items: center; gap: 0.5rem; }
.crumbs li:not(:last-child)::after { content: '/'; opacity: 0.4; }
.crumbs a { color: var(--mist); text-decoration: none; transition: color 0.25s ease; }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--cyan); }
.crumbs [aria-current="page"] { color: var(--white); }

/* ── Первый экран внутренней страницы ────────────────────
   Не копия главной: без частиц, орбит и счётчиков. Человек пришёл
   из поиска за конкретным ответом — заголовок, суть в двух строках,
   цена и кнопка. Всё остальное отодвигает ответ вниз. */
.page-head {
  max-width: 860px;
  margin: 0 auto;
  padding: 3rem 2rem 1rem;
  text-align: center;
}
.page-title {
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 4.4vw, 2.9rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.06em;
  color: var(--white);
  margin-bottom: 1.2rem;
}
.page-lead {
  font-size: clamp(0.92rem, 2vw, 1.02rem);
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--mist);
  max-width: 46rem;
  margin: 0 auto;
}
.page-lead strong { color: var(--white); font-weight: 600; }

/* Цена и срок сразу под заголовком. Это два вопроса, ради которых
   человек и открыл страницу услуги; прятать их в конец — терять его
   на середине текста. */
.page-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}
.page-fact {
  padding: 0.8rem 1.4rem;
  border: 1.5px solid rgba(45,156,255,0.24);
  border-radius: 12px;
  background: rgba(5,14,30,0.7);
  text-align: left;
}
.page-fact-label {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.3rem;
  font-weight: 600;
}
.page-fact-value {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--white);
}
.page-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.2rem;
}

/* ── Секция внутренней страницы ──────────────────────────
   На главной у каждого блока свой id со своими отступами
   (#services, #portfolio, #pricing). Здесь блоки повторяются
   от страницы к странице, поэтому отступы задаёт класс. */
.page-section {
  position: relative;
  z-index: 2;
  padding: 5rem 2rem;
}
.page-section-narrow { max-width: 860px; margin: 0 auto; }

/* ── Сплошной текст ──────────────────────────────────────
   Ширина ограничена намеренно: строка длиннее ~75 символов
   читается тяжело, глаз теряет начало следующей. */
.prose {
  max-width: 46rem;
  margin: 0 auto;
  font-size: 0.92rem;
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: var(--mist);
}
.prose p { margin-bottom: 1.1rem; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--white); font-weight: 600; }
.prose h3 {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--white);
  margin: 2.2rem 0 0.9rem;
}
.prose a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { text-shadow: 0 0 12px rgba(0,240,255,0.4); }

/* ── Список «что входит» ─────────────────────────────────
   Галочки рисуем псевдоэлементом, а не символом в тексте: скопированный
   список остаётся списком, а не набором строк с «✓» в начале. */
.incl {
  max-width: 46rem;
  margin: 0 auto;
  list-style: none;
}
.incl li {
  position: relative;
  padding: 0.75rem 0 0.75rem 1.9rem;
  font-size: 0.9rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--mist);
  border-bottom: 1px solid rgba(45,156,255,0.1);
}
.incl li:last-child { border-bottom: 0; }
.incl li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.35rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(0,240,255,0.6);
}
.incl strong { color: var(--white); font-weight: 600; }

/* ── Ссылки на смежные страницы ──────────────────────────
   Главная польза многостраничника и одновременно его риск: страницы,
   на которые не ведёт ни одна ссылка, роботы обходят реже, а люди
   не находят вовсе. Поэтому внизу каждой страницы — соседние. */
.related {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.related-card {
  display: block;
  padding: 1.3rem 1.4rem;
  border: 1.5px solid rgba(45,156,255,0.2);
  border-radius: 12px;
  background: rgba(5,14,30,0.6);
  text-decoration: none;
  transition: border-color 0.3s ease, transform 0.3s var(--ease-out-expo);
}
.related-card:hover {
  border-color: rgba(0,240,255,0.5);
  transform: translateY(-3px);
}
.related-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.related-name {
  display: block;
  font-family: var(--f-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--white);
  margin-bottom: 0.4rem;
}
.related-desc {
  display: block;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--mist);
}

/* ── Контакты ────────────────────────────────────────────
   Каждый способ связи — отдельная крупная цель. С телефона по мелкой
   строке промахиваются, а промах на странице контактов — это потерянный
   человек, который уже решил написать. */
.contact-grid {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.contact-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 88px;
  justify-content: center;
  padding: 1.2rem 1.4rem;
  border: 1.5px solid rgba(45,156,255,0.22);
  border-radius: 12px;
  background: rgba(5,14,30,0.65);
  text-decoration: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.contact-card:hover { border-color: var(--cyan); box-shadow: 0 0 22px rgba(0,240,255,0.2); }
.contact-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.contact-kind {
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 600;
}
.contact-value {
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--white);
  word-break: break-word;
}
.contact-note { font-size: 0.74rem; color: var(--mist); }

/* ── Реквизиты ───────────────────────────────────────────
   Корпоративный клиент проверяет подрядчика до оплаты. Пусть
   проверяет по странице, а не письмом с вопросом. */
.req-table {
  max-width: 46rem;
  margin: 0 auto;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.req-table th,
.req-table td {
  padding: 0.85rem 0.6rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(45,156,255,0.12);
  line-height: 1.6;
}
.req-table th { width: 38%; font-weight: 600; color: var(--mist); letter-spacing: 0.02em; }
.req-table td { color: var(--white); }

@media (max-width: 600px) {
  .page-head { padding: 2.2rem 1.2rem 0.6rem; }
  .page-section { padding: 3.5rem 1.2rem; }
  .crumbs { padding: 1.2rem 1.2rem 0; font-size: 0.68rem; }
  .page-fact { flex: 1 1 100%; }
  .req-table { font-size: 0.8rem; }
  .req-table th { width: 42%; }
}

/* ═══════════════════════════════════════════
   ДОСТУПНОСТЬ: выключаем движение по просьбе системы

   Правило скопировано с главной. Стоит последним намеренно: оно должно
   перебивать всё, что объявлено выше, включая правила внутренних страниц.
═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Плашка о куках ──────────────────────────────────────
   Скопирована с главной вместе с решением о размещении: сверху, а не снизу.
   Внизу она спорит за клик с плавающими кнопками связи, и спор со слоями
   рано или поздно проигрывается — кнопки перестают нажиматься.

   Отступ сверху 6rem — чтобы плашка стояла ПОД шапкой, а не поверх неё.
   Поверх нельзя: на телефоне в шапке лежит кнопка меню, и плашка
   перехватывала бы нажатия по единственному входу в разделы сайта. */
.cookie-bar {
  position: fixed;
  left: 1rem;
  right: 1rem;
  top: 6rem;
  z-index: 2147483000;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 820px;
  padding: 0.9rem 1.2rem;
  border-radius: 12px;
  border: 1.5px solid rgba(45,156,255,0.3);
  background: rgba(2,8,19,0.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 0 40px rgba(0,0,0,0.6);
  /* Видимость НЕ зависит от анимации: базовое состояние — уже показано.
     Иначе браузер, который анимацию не проигрывает, оставил бы плашку
     прозрачной, но кликабельной — невидимой преградой посреди экрана. */
  opacity: 1;
  transform: none;
  animation: cookieIn 0.45s var(--ease-out-expo);
}
@keyframes cookieIn { from { opacity: 0; transform: translateY(-16px); } }

/* display в правиле для hidden пишем явно: иначе display:flex выше
   перебивает встроенное правило браузера, и спрятанная плашка видна. */
.cookie-bar[hidden] { display: none !important; }

.cookie-text {
  margin: 0;
  flex: 1 1 320px;
  font-size: 0.74rem;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: var(--mist);
}
.cookie-text a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(45,156,255,0.35);
}

.cookie-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.cookie-btn {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  font-family: var(--f-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.75rem 1.4rem;
  border-radius: 8px;
  white-space: nowrap;
  transition: all 0.3s ease;
}
.cookie-btn:active { transform: scale(0.96); }
.cookie-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.cookie-yes { border: 2px solid rgba(45,156,255,0.5); background: transparent; color: var(--cyan); }
.cookie-yes:hover { border-color: rgba(45,156,255,0.7); box-shadow: 0 0 20px rgba(45,156,255,0.25); }
.cookie-no { border: 1.5px solid rgba(45,156,255,0.2); background: transparent; color: var(--mist); }
.cookie-no:hover { color: var(--white); border-color: rgba(45,156,255,0.4); }

/* Короткий вариант текста показывается только на телефоне.
   Стоит ДО медиазапроса намеренно: после — перебил бы его по порядку
   в каскаде, и на телефоне не показался бы ни один вариант. */
.cookie-short { display: none; }

@media (max-width: 600px) {
  /* Плашка уезжает ВНИЗ экрана. Наверху она стояла из-за того, что
     когда-то перехватывала нажатие по кнопке меню, — но замер 03.09.2026
     показал цену этого решения: 220 точек из 667, треть экрана, прямо
     под шапкой. Человек с телефона открывал страницу услуги и первым
     делом читал текст про cookie вместо заголовка.

     Внизу она до кнопки меню не достаёт, а короткий текст делает её
     вдвое ниже. Ровно так это сделано на главной с августа — сюда
     правка не доехала, потому что главная собрана вручную. */
  .cookie-bar { gap: 0.7rem; padding: 0.85rem 1rem; top: auto; bottom: 0.8rem;
                animation-name: cookieInUp; }
  .cookie-text { font-size: 0.7rem; line-height: 1.55; }
  .cookie-actions { width: 100%; }
  /* Кнопки в строку, а не столбиком: столбиком плашка вырастает ещё
     на 50 точек и снова начинает закрывать содержимое. */
  .cookie-btn { flex: 1; padding: 0.65rem 0.5rem; font-size: 0.56rem; letter-spacing: 0.08em; }
  .cookie-full { display: none; }
  .cookie-short { display: inline; }
}
@keyframes cookieInUp { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .cookie-bar { animation: none; } }

/* Пометка «необязательно» у поля города. Мелкая и приглушённая:
   она уточняет, а не спорит с названием поля за внимание. */
.form-opt { font-weight: 400; opacity: 0.6; font-size: 0.9em; }

/* Подпись под полем: зачем его заполнять. Отвечает на немой вопрос
   «а вам-то зачем мой город» — без этого необязательное поле пропускают. */
.form-hint { margin: 0.45rem 0 0; font-size: 0.78rem; line-height: 1.55; color: var(--mist); }

/* ── Полоска «похоже, вы из…» ──────────────────────────────────────
   Внизу экрана: сверху уже стоят шапка и уведомление о куках, третья
   плашка там перекрыла бы кнопку меню. Появляется только на главной и
   только один раз за сессию. Кнопка «Показать» — обычная ссылка на
   страницу региона: работает средним кликом, копируется, открывается
   в новой вкладке. */
.geo-bar {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 90;
  max-width: 640px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.9rem 1.2rem; padding: 1rem 1.2rem;
  border-radius: 14px; border: 1px solid rgba(0, 240, 255, 0.28);
  background: rgba(5, 14, 30, 0.96);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
}
.geo-bar-text { flex: 1 1 16rem; margin: 0; font-size: 0.85rem; line-height: 1.55; color: var(--mist); }
.geo-bar-actions { display: flex; gap: 0.6rem; flex-shrink: 0; }
.geo-bar-btn {
  font-family: inherit; font-size: 0.8rem; white-space: nowrap;
  padding: 0.55rem 1.1rem; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
}
.geo-bar-yes { background: var(--cyan); color: #04121f; font-weight: 600; }
.geo-bar-no { background: transparent; color: var(--mist); border-color: rgba(255, 255, 255, 0.22); }
.geo-bar-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

@media (max-width: 600px) {
  .geo-bar { bottom: 0.8rem; padding: 0.9rem 1rem; }
  .geo-bar-actions { width: 100%; }
  .geo-bar-btn { flex: 1; text-align: center; }
}


/* ── Карта ────────────────────────────────────────────────────────
   Три состояния в одном блоке, и переключаются они классами:

     без классов   — ключей нет: виден только адрес и ссылка на Карты;
     .has-static   — есть картинка-подложка от Static API;
     .is-live      — поверх подложки встала настоящая карта.

   Рамка, скругление и тень — те же, что у карточек услуг. Это и есть
   разница между «встроенной картой» и «вставленным виджетом»: карта
   должна выглядеть как остальные блоки страницы, а не как окно
   в чужой сайт. */
.ymap {
  position: relative;
  overflow: hidden;
  margin-top: 2rem;
  aspect-ratio: 16 / 9;
  max-height: 460px;
  border-radius: 16px;
  border: 1px solid rgba(0, 240, 255, 0.18);
  background: linear-gradient(160deg, rgba(8, 20, 38, 0.9), rgba(4, 10, 22, 0.95));
}
@media (max-width: 600px) { .ymap { aspect-ratio: 4 / 3; } }

/* Подложка и холст лежат друг на друге: подмена идёт прозрачностью,
   без скачка вёрстки. Если менять display, блок дёргается по высоте. */
.ymap-static,
.ymap-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* contain, а не cover. cover обрезает картинку по краям, а в углу
   статичной карты Яндекс рисует свой логотип и копирайт — по условиям
   бесплатного использования их нельзя ни скрывать, ни перекрывать.
   Обрезка углов формально и есть скрытие. Картинку заказываем той же
   пропорции, что и блок (см. ymap.js), поэтому полей от contain
   не появляется. */
.ymap-static { object-fit: contain; }

/* Виджет карточки Яндекс Карт. Вставляется скриптом, когда до блока
   долистали, поэтому в разметке страницы его нет. Занимает блок целиком
   и наследует его скруглённые углы. */
.ymap-widget {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
}
.ymap-canvas { opacity: 0; transition: opacity 0.4s ease; }
.ymap.is-live .ymap-canvas { opacity: 1; }

/* Пока карта не подключена, блок остаётся полезным: адрес и ссылка.
   Пустой прямоугольник вместо карты хуже, чем честный адрес текстом. */
.ymap-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 1.5rem;
  text-align: center;
}
.ymap.has-static .ymap-fallback,
.ymap.is-live .ymap-fallback { display: none; }
.ymap-fallback-addr { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--white); }

/* Ссылка в Карты — под блоком, видна всегда, ничем не перекрывается. */
.ymap-note { margin: 0.9rem 0 0; font-size: 0.85rem; }
.ymap-note a { color: var(--cyan); text-decoration: none; }
.ymap-note a:hover { text-decoration: underline; }

/* Подсказка «нажмите, чтобы открыть» на подложке: без неё человек
   не догадается, что картинка станет картой. */
/* Подсказка СВЕРХУ, а не снизу. Внизу карты Яндекс печатает копирайт
   и кнопку «Открыть в Картах», перекрывать их запрещено условиями
   бесплатного использования — вплоть до отключения ключа. */
.ymap.is-ready.has-static::after {
  content: 'Нажмите, чтобы открыть карту';
  position: absolute;
  left: 50%;
  top: 1rem;
  transform: translateX(-50%);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--white);
  background: rgba(5, 14, 30, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.3);
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.ymap.is-live::after { opacity: 0; }
.ymap.is-ready { cursor: pointer; }

/* Метка — свой элемент, а не синяя капля Яндекса. Именно это и отличает
   «встроенную карту» от чужого виджета: цвет метки берётся из палитры
   сайта, и при работе на клиента здесь будут его цвета. */
.ymap-pin {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.ymap-pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(0, 240, 255, 0.25), 0 0 16px rgba(0, 240, 255, 0.7);
}
.ymap-pin-label {
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  font-family: var(--f-display, inherit);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--white);
  background: rgba(5, 14, 30, 0.92);
  border: 1px solid rgba(0, 240, 255, 0.35);
}

/* Метка пульсирует, но не у тех, кто просил анимацию выключить. */
@media (prefers-reduced-motion: no-preference) {
  .ymap-pin-dot { animation: ymap-pulse 2.4s ease-in-out infinite; }
  @keyframes ymap-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(0, 240, 255, 0.25), 0 0 16px rgba(0, 240, 255, 0.7); }
    50%      { box-shadow: 0 0 0 9px rgba(0, 240, 255, 0.08), 0 0 22px rgba(0, 240, 255, 0.5); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .ymap-canvas { transition: none; }
}


/* ═══════════════════════════════════════════
   ОТЗЫВЫ С ЯНДЕКС КАРТ

   Своего списка отзывов на сайте нет (почему — в src/otzyvy.js),
   поэтому стилей здесь ровно два: коробка под официальный бейдж
   рейтинга и коробка под рамку отзывов, когда Яндекс начнёт её
   отдавать. Ни бейдж, ни рамку не перекрашиваем и ничем не
   перекрываем: это чужой знак, его вид менять нельзя.
═══════════════════════════════════════════ */

/* Размер бейджа задан жёстко, 150×50, и коробка держит это место
   всегда. Если бейдж не загрузится — нет сети, вырезал блокировщик —
   страница не дёрнется и кнопки под ним не подпрыгнут. */
.otzyvy-bejdzh {
  width: 150px;
  height: 50px;
  margin: 2.4rem auto 0;
}
.otzyvy-bejdzh iframe {
  display: block;
  width: 150px;
  height: 50px;
  border: 0;
  /* Только скругление, без рамки и свечения. Рамку рисовал бы сам
     элемент, а не бейдж, — и когда бейдж не загрузится (нет сети,
     вырезал блокировщик), на странице остался бы пустой светящийся
     прямоугольник, похожий на поломку. Без рамки на его месте просто
     пусто, а место при этом сохраняется. */
  border-radius: 6px;
}

/* Рамка с отзывами. Сейчас не показывается, разметка ждёт своего часа:
   RAMKA в src/otzyvy.js. Рамка чужая и своей высоты не сообщает,
   поэтому высоту задаём мы — иначе браузер поставит 150 пикселей
   по умолчанию и обрежет отзывы на середине. */
.otzyvy-ramka {
  max-width: 46rem;
  margin: 2.4rem auto 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0, 240, 255, 0.18);
  background: var(--deep);
}
.otzyvy-ramka iframe {
  display: block;
  width: 100%;
  height: 560px;
  border: 0;
}
@media (max-width: 600px) {
  .otzyvy-ramka iframe { height: 460px; }
}

.otzyvy-note {
  max-width: 46rem;
  margin: 1.6rem auto 0;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--mist);
}

/* Ссылки «прочитать» внутри приписки. Общего правила для ссылок в CSS
   нет, а сама приписка приглушённого цвета — без этого блока ссылка
   слилась бы с текстом и перестала быть ссылкой. */
.otzyvy-note a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.otzyvy-note a:hover { text-shadow: 0 0 12px var(--neon-glow); }
.otzyvy-note a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }


/* ═══════════════════════════════════════════
   СТАТЬЯ: картинка, «Кратко», оглавление, автор
   Заведено 28.08.2026 по разбору Константина Васина: в статьях
   не было ни картинок, ни навигации, ни блока для нейроответов,
   ни видимой подписи автора.
═══════════════════════════════════════════ */
.stat-foto {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 2rem auto 0;
  border-radius: 16px;
  border: 1px solid rgba(0, 240, 255, 0.18);
}

/* «Кратко» — ответ на вопрос статьи в три-четыре строки. Его читают
   те, кто не будет читать всё, и его же берут нейроответы поисковиков
   и чат-ботов, когда отвечают на вопрос человека нашими словами. */
.kratko {
  text-align: left;
  max-width: 780px;
  margin: 2.4rem auto 0;
  padding: 1.4rem 1.6rem;
  border-radius: 16px;
  border: 1px solid rgba(0, 240, 255, 0.22);
  background: linear-gradient(160deg, rgba(8, 20, 38, 0.9), rgba(4, 10, 22, 0.95));
}
.kratko-zag {
  margin: 0 0 0.7rem;
  font-family: var(--f-display);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
}
.kratko p { margin: 0 0 0.7rem; font-size: 0.95rem; line-height: 1.7; color: var(--white); }
.kratko p:last-child { margin-bottom: 0; }
.kratko strong { color: var(--cyan); font-weight: 600; }

/* display: block обязателен. В начале файла стоит общее правило
   `nav { display: flex; justify-content: space-between }` — оно писалось
   под шапку сайта, но достаёт до любого <nav> на странице. Без этой
   строки заголовок «В статье» уезжает влево, а список прижимается
   вправо. Поймано 28.08.2026 на снимке собранной страницы: в коде
   всё выглядело правильно. */
.toc {
  display: block;
  text-align: left;
  max-width: 780px;
  margin: 2rem auto 0;
  padding: 1.2rem 1.6rem;
  border-radius: 14px;
  border: 1px solid rgba(45, 156, 255, 0.18);
  background: rgba(5, 14, 30, 0.6);
}
.toc-zag {
  margin: 0 0 0.6rem;
  font-family: var(--f-display);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
}
.toc-spisok { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.15rem; }
.toc-spisok li { color: var(--mist); }
.toc-spisok a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  font-size: 0.92rem;
}
.toc-spisok a:hover { color: var(--cyan); border-bottom-color: var(--cyan); }
.toc-spisok a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.avtor {
  text-align: left;
  max-width: 780px;
  margin: 3rem auto 0;
  padding: 1.2rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: 14px;
  border: 1px solid rgba(45, 156, 255, 0.16);
  background: rgba(5, 14, 30, 0.55);
}
.avtor-foto { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avtor-tekst p { margin: 0; }
.avtor-imya { font-family: var(--f-display); font-size: 0.98rem; color: var(--white); }
.avtor-rol { font-size: 0.84rem; color: var(--mist); margin-top: 0.2rem !important; }
.avtor-rol a { color: var(--cyan); text-decoration: none; }
.avtor-rol a:hover { text-decoration: underline; }
.avtor-data { font-size: 0.8rem; color: var(--mist); opacity: 0.8; margin-top: 0.25rem !important; }

@media (max-width: 600px) {
  .kratko, .toc, .avtor { padding-left: 1.1rem; padding-right: 1.1rem; }
  .avtor { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* «6 минут чтения» — снимает вопрос «это надолго?» до того, как человек
   начал листать. Считается сборкой по числу слов. */
.stat-meta {
  margin: 1rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
}
.case-card .stat-meta { margin: 0 0 0.6rem; }

/* ── Оплата картой ───────────────────────────────────────────────
   Две плашки на страницах /oplata/ и /oplata/gotovo/. Именование
   с приставкой oplata- намеренно: на главной уже живёт блок .pay-*
   со своими стилями прямо в разметке, и одинаковые имена столкнулись
   бы там, где их никто не ждёт.

   Цвета — токенами из :root, как и везде: своих чисел в этом блоке
   нет ни одного. */
.oplata-note {
  margin: 0 0 1.2rem;
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--white);
  background: rgba(45, 156, 255, 0.07);
  border: 1px solid rgba(45, 156, 255, 0.26);
}

.oplata-note a { color: var(--cyan); }

.oplata-status {
  margin: 0 0 1.2rem;
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--white);
  background: rgba(0, 240, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.24);
}

.oplata-status[hidden] { display: none; }

/* Что будет после отправки. Стоит между подзаголовком формы и первым
   полем — там, где человек решает, оставлять ли контакт. Спокойный
   цвет и рамка слева, а не яркая плашка: это не акция и не срочность,
   а ответ на вопрос «что мне за это будет». */
.order-chto-dalshe {
  margin: 0 0 1.4rem;
  padding: 0.75rem 0 0.75rem 1rem;
  border-left: 2px solid rgba(45,156,255,.35);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--mist);
}

/* Подтверждение, что метка «своя проверка» встала. Заведено 05.09.2026:
   адрес ?svoi=1 работал МОЛЧА, и узнать, сработал он или нет, было нельзя
   ни владелице, ни нам. Переключатель без ответа — это не переключатель.
   Выше плашки cookie нарочно: иначе на телефоне ляжет под неё. */
.svoi-metka{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:2147483001;
  background:var(--deep);color:var(--white);border:1px solid var(--cyan);
  border-radius:12px;padding:.9rem 1rem;max-width:34rem;margin:0 auto;
  font:500 15px/1.45 var(--f-body),system-ui,sans-serif}
.svoi-metka b{color:var(--cyan)}


/* ТЕСНЫЙ ЭКРАН: ЧЕЛОВЕК ДОЛЖЕН ВИДЕТЬ КНОПКУ, А НЕ ТОЛЬКО ПОЛЯ.
   Замер живого сайта 09.09.2026: форма заявки высотой 1072 px при
   экране 640 — то есть в 1,7 экрана. Кнопка «Получить расчёт и срок»
   оказывалась ниже экрана на 366 px, галочка согласия на 217.
   На ноутбуке 1366×768 кнопка стояла на самом краю — запас 8 px.

   В тот же день сводка показала, чем это кончается: человек в 01:18
   заполнил контакт, написал задачу — и не отправил. Заявки нет,
   а работа человека сделана.

   Ужимаем отступы и подсказки, НЕ ТРОГАЯ кегль полей ввода: 16 px
   там стоят нарочно, ниже шестнадцати Safari на iPhone приближает
   страницу при касании поля. Это поведение браузера, а не вкус. */
@media (max-width: 480px), (max-height: 820px) {
  .order-form { gap: 0.9rem; }
  .order-form .svc-tabs { gap: 0.4rem; margin-bottom: 0.2rem; }
  .order-form .svc-tab { padding: 0.5rem 0.7rem; font-size: 0.72rem; }
  .order-form .form-group input,
  .order-form .form-group textarea { padding: 0.7rem 0.9rem; }
  .order-form .form-group textarea { min-height: 68px; }
  .order-form .form-hint { font-size: 0.72rem; line-height: 1.35; margin-top: 0.3rem; }
  .order-form label { margin-bottom: 0.2rem; }
  .order-form .consent { font-size: 0.75rem; line-height: 1.35; }
  .order-form .btn-submit { padding: 0.9rem 1rem; }
}