/* Лендинг «Брендирование и навигация» (/brendirovanie-i-navigaciya).
   Подключается поверх landing-outdoor.css — здесь только то, чего там нет: схема этажа с точками навигации
   (фирменный приём страницы) и отступ между двумя группами блока «Что делаем».
   Цвета — только переменные тёмно-синей темы (theme-navy.css). Своих цветов и градиентов нет. */

/* Второй заголовок внутри одной секции «Что делаем»: навигация → брендирование */
.lp-branding-head2 { margin-top: 64px; }

/* ---- Схема этажа: план слева, нумерованный список точек справа ---- */
.lp-branding-plan { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.lp-branding-plan__figure { margin: 0; padding: 24px 24px 18px; border-radius: var(--lp-radius); background: var(--t-surface); border: 1px solid var(--t-line); }
.lp-branding-plan__svg { display: block; width: 100%; height: auto; }
.lp-branding-plan__caption { margin-top: 14px; font-size: 12px; line-height: 1.5; letter-spacing: .04em; color: var(--t-text-3); }

/* Коридор — светлая заливка, чтобы читалась дорога посетителя */
.lp-branding-plan__corridor { fill: var(--t-surface-2); }
.lp-branding-plan__walls path { fill: none; stroke: var(--t-line-strong); stroke-width: 3; stroke-linecap: square; }
.lp-branding-plan__route { fill: none; stroke: var(--t-neon); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 9 9; opacity: .85; animation: lp-branding-walk 3s linear infinite; }
@keyframes lp-branding-walk { to { stroke-dashoffset: -36; } }

.lp-branding-plan__labels text { fill: var(--t-text-3); font: 600 13px/1 "Roboto", sans-serif; letter-spacing: .1em; text-anchor: middle; }

/* Точки навигации: круг с номером и мягкое кольцо-пульс фирменным синим */
.lp-branding-plan__dot { fill: var(--t-accent); }
.lp-branding-plan__pin text { fill: #fff; font: 600 15px/1 "Roboto", sans-serif; text-anchor: middle; }
.lp-branding-plan__ping { fill: none; stroke: var(--t-neon); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: lp-branding-ping 2.6s ease-out infinite; animation-delay: var(--pin-delay, 0s); }
@keyframes lp-branding-ping {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Список точек: номера теми же кружками, что и на схеме */
.lp-branding-legend { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.lp-branding-legend__item { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--t-line); }
.lp-branding-legend__item:first-child { padding-top: 0; }
.lp-branding-legend__item:last-child { border-bottom: 0; padding-bottom: 0; }
.lp-branding-legend__num { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--t-accent); color: #fff; font: 600 15px/32px "Roboto", sans-serif; text-align: center; }
.lp-branding-legend__title { font-family: "Gilroy", "Roboto", sans-serif; font-weight: 600; font-size: 17px; line-height: 1.3; margin: 4px 0 6px; color: #fff; }
.lp-branding-legend__text { font-size: 15px; line-height: 1.55; color: var(--t-text-2); margin: 0; }

@media (max-width: 1023px) {
  .lp-branding-plan { grid-template-columns: 1fr; gap: 28px; }
  .lp-branding-head2 { margin-top: 48px; }
}
@media (max-width: 767px) {
  .lp-branding-plan__figure { padding: 14px 14px 12px; }
  .lp-branding-plan__labels text { font-size: 16px; letter-spacing: .06em; }
  .lp-branding-plan__pin text { font-size: 17px; }
  .lp-branding-head2 { margin-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-branding-plan__route { animation: none; }
  .lp-branding-plan__ping { animation: none; opacity: .35; }
}