/* ===============================
   БАЗОВЫЕ СЕКЦИИ ДЛЯ 2 СТРАНИЦЫ
   =============================== */

.nb-section {
  position: relative;
  padding: 56px 0;
}

.nb-section__title {
  font-family: "NB-Display", system-ui, sans-serif;
  font-size: 24px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.nb-section__lead {
  margin: 0 0 18px;
  font-size: 14px;
  color: #c9d4e5;
}

/* ===============================
   СЕКЦИЯ 1 — HERO С НОЧНЫМИ СЦЕНАРИЯМИ
   =============================== */

.nb-night-hero {
  padding-top: 72px;
  padding-bottom: 72px;
  overflow: hidden;
}

.nb-night-hero__background {
  position: absolute;
  inset: -80px 0 -40px;
  background:
    radial-gradient(circle at 10% 20%, rgba(148, 236, 180, 0.18) 0, transparent 55%),
    radial-gradient(circle at 90% 50%, rgba(62, 231, 255, 0.2) 0, transparent 60%),
    radial-gradient(circle at 50% 110%, rgba(3, 10, 13, 0.9) 0, transparent 65%);
  opacity: 0.7;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: -1;
}

.nb-night-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: center;
}

/* Левая часть */

.nb-night-hero__content {
  position: relative;
}

.nb-night-hero__eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7ea1b6;
}

.nb-night-hero__title {
  font-family: "NB-Display", system-ui, sans-serif;
  font-size: 30px;
  line-height: 1.25;
  margin: 0 0 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nb-night-hero__lead {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.7;
  color: #ced5e6;
}

.nb-night-hero__chips {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.nb-night-hero__chip {
  border-radius: 16px;
  padding: 8px 10px;
  background: linear-gradient(135deg, rgba(6, 34, 38, 0.95), rgba(4, 21, 23, 0.98));
  border: 1px solid rgba(117, 187, 189, 0.9);
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  column-gap: 8px;
}

.nb-night-hero__chip-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #8aa3b7;
}

.nb-night-hero__chip-value {
  font-size: 13px;
  color: #e6f0ff;
}

/* Правая часть: визуал */

.nb-night-hero__visual {
  position: relative;
}

/* Орбита */

.nb-night-hero__orbit {
  position: absolute;
  inset: -40px -20px;
  pointer-events: none;
}

.nb-night-hero__orbit-ring {
  position: absolute;
  border-radius: 999px;
  border: 1px dashed rgba(112, 171, 176, 0.8);
  opacity: 0.55;
  animation: nb2-orbit-spin 26s linear infinite;
}

.nb-night-hero__orbit-ring--outer {
  inset: 8% 6%;
}

.nb-night-hero__orbit-ring--inner {
  inset: 24% 20%;
  animation-duration: 32s;
  animation-direction: reverse;
}

.nb-night-hero__orbit-glow {
  position: absolute;
  inset: 30% 28%;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 30%, rgba(62, 231, 255, 0.55), transparent 70%);
  filter: blur(8px);
  opacity: 0.7;
}

/* Стек фото */

.nb-night-hero__stack {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, rgba(255, 181, 71, 0.16), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(62, 231, 255, 0.18), transparent 60%),
    rgba(3, 18, 19, 0.96);
  border: 1px solid rgba(86, 144, 148, 0.9);
  box-shadow: 0 0 26px rgba(18, 78, 81, 0.9);
}

.nb-night-hero__photo {
  margin: 0;
  position: relative;
}

.nb-night-hero__photo--city {
  justify-self: flex-start;
}

.nb-night-hero__photo--bay {
  justify-self: center;
}

.nb-night-hero__photo--river {
  justify-self: flex-end;
}

.nb-night-hero__caption {
  margin-top: 6px;
  font-size: 11px;
  color: #b3c4d6;
  max-width: 260px;
}

/* ===============================
   СЕКЦИЯ 2 — ФОРМАТЫ НОЧНЫХ ВЫЕЗДОВ
   =============================== */

.nb-formats {
  padding-top: 8px;
  padding-bottom: 56px;
}

.nb-formats__shell {
  border-radius: 26px;
  padding: 20px 20px 22px;
  background: radial-gradient(circle at 70% 0, rgba(62, 231, 255, 0.22), transparent 60%),
              rgba(3, 21, 25, 0.98);
  border: 1px solid rgba(95, 164, 173, 0.95);
  box-shadow: 0 0 32px rgba(8, 60, 67, 0.9);
}

.nb-formats__header {
  max-width: 620px;
  margin-bottom: 16px;
}

/* Треки-сценарии */

.nb-formats__tracks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.nb-formats__track {
  border-radius: 18px;
  padding: 10px 10px 12px;
  background: linear-gradient(135deg, rgba(5, 30, 33, 0.98), rgba(3, 18, 20, 1));
  border: 1px solid rgba(117, 187, 189, 0.9);
}

.nb-formats__track-header {
  margin-bottom: 6px;
}

.nb-formats__track-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(3, 15, 16, 0.95);
  color: #e9f6ff;
}

.nb-formats__track-title {
  margin: 4px 0 0;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #f4f7fb;
}

.nb-formats__track-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nb-formats__track-item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  column-gap: 8px;
}

.nb-formats__time {
  font-size: 11px;
  color: #8aa3b7;
}

.nb-formats__text {
  font-size: 13px;
  color: #d3e1f0;
}

/* Фото под форматами */

.nb-formats__photos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.nb-formats__photo {
  margin: 0;
}

.nb-formats__caption {
  margin-top: 6px;
  font-size: 11px;
  color: #b3c4d6;
  max-width: 280px;
}

.nb-formats__photo .nb-img {
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.nb-formats__photo:hover .nb-img {
  transform: translateY(-4px);
  box-shadow: 0 0 22px rgba(255, 181, 71, 0.6);
  filter: brightness(1.06);
}

/* ===============================
   СЕКЦИЯ 3 — ВЫБОР СЦЕНАРИЯ
   =============================== */

.nb-selector {
  padding-top: 8px;
  padding-bottom: 60px;
}

.nb-selector__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
  gap: 34px;
  align-items: center;
}

.nb-selector__matrix {
  margin-top: 10px;
  border-radius: 22px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(6, 34, 38, 0.95), rgba(4, 21, 23, 0.98));
  border: 1px solid rgba(117, 187, 189, 0.9);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nb-selector__row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.5fr);
  column-gap: 10px;
  row-gap: 2px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(64, 109, 117, 0.7);
}

.nb-selector__row:last-child {
  border-bottom: none;
}

.nb-selector__label {
  font-size: 12px;
  color: #dbe6f7;
}

.nb-selector__value {
  font-size: 13px;
  color: #d3e1f0;
}

/* Фото выбора сценария */

.nb-selector__visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.nb-selector__photo {
  margin: 0;
}

.nb-selector__caption {
  margin-top: 6px;
  font-size: 11px;
  color: #b3c4d6;
  max-width: 280px;
}

.nb-selector__photo .nb-img {
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.nb-selector__photo:hover .nb-img {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(62, 231, 255, 0.6);
  filter: brightness(1.05);
}

/* ===============================
   АНИМАЦИИ 2 СТРАНИЦЫ
   =============================== */

@keyframes nb2-orbit-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ===============================
   АДАПТИВ
   =============================== */

@media (max-width: 1040px) {
  .nb-night-hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 30px;
  }

  .nb-night-hero__title {
    font-size: 26px;
  }
}

@media (max-width: 880px) {
  .nb-night-hero {
    padding-top: 52px;
    padding-bottom: 64px;
  }

  .nb-night-hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .nb-night-hero__visual {
    order: -1;
  }

  .nb-night-hero__stack {
    margin-bottom: 10px;
  }
}

@media (max-width: 960px) {
  .nb-formats__tracks {
    grid-template-columns: minmax(0, 1fr);
  }

  .nb-formats__photos {
    grid-template-columns: minmax(0, 1fr);
  }

  .nb-selector__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .nb-section {
    padding-inline: 0;
  }

  .nb-night-hero__chip {
    grid-template-columns: minmax(0, 1fr);
  }

  .nb-formats__shell,
  .nb-selector__matrix {
    padding-inline: 14px;
  }

  .nb-selector__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .nb-night-hero__title {
    font-size: 22px;
  }

  .nb-night-hero__lead {
    font-size: 14px;
  }

  .nb-night-hero__caption,
  .nb-formats__caption,
  .nb-selector__caption {
    max-width: 100%;
  }
}
/* ===============================
   СЕКЦИЯ 4 — КАРТА НОЧИ
   =============================== */

.nb-plan {
  padding-top: 8px;
  padding-bottom: 56px;
}

.nb-plan__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
  gap: 34px;
  align-items: center;
}

.nb-plan__content {
  padding: 18px 20px 20px;
  border-radius: 22px;
  background: radial-gradient(circle at 0 0, rgba(148, 236, 180, 0.18), transparent 55%),
              rgba(4, 24, 25, 0.98);
  border: 1px solid rgba(90, 160, 160, 0.95);
  box-shadow: 0 0 24px rgba(9, 63, 63, 0.9);
}

.nb-plan__steps {
  margin: 10px 0 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nb-plan__step {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 8px;
  align-items: flex-start;
}

.nb-plan__step-num {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, #3ee7ff 0, transparent 60%);
  box-shadow: 0 0 14px rgba(62, 231, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #021213;
  margin-top: 3px;
}

.nb-plan__step-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #e7eefc;
  margin-bottom: 2px;
}

.nb-plan__step-text {
  display: block;
  font-size: 13px;
  color: #d3e1f0;
}

/* фото плана */

.nb-plan__visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.nb-plan__photo {
  margin: 0;
}

.nb-plan__caption {
  margin-top: 6px;
  font-size: 11px;
  color: #b3c4d6;
  max-width: 280px;
}

.nb-plan__photo .nb-img {
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.nb-plan__photo:hover .nb-img {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(62, 231, 255, 0.6);
  filter: brightness(1.06);
}

/* ===============================
   СЕКЦИЯ 5 — БАЛАНС БЕЗОПАСНОСТИ
   =============================== */

.nb-balance {
  padding-top: 8px;
  padding-bottom: 56px;
}

.nb-balance__shell {
  border-radius: 26px;
  padding: 20px 20px 22px;
  background: radial-gradient(circle at 65% 0, rgba(62, 231, 255, 0.22), transparent 60%),
              rgba(3, 21, 25, 0.98);
  border: 1px solid rgba(95, 164, 173, 0.95);
  box-shadow: 0 0 32px rgba(8, 60, 67, 0.9);
}

.nb-balance__header {
  max-width: 620px;
  margin-bottom: 16px;
}

.nb-balance__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: center;
}

/* шкалы */

.nb-balance__scales {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nb-balance__scale {
  border-radius: 18px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(5, 30, 33, 0.98), rgba(3, 18, 20, 1));
  border: 1px solid rgba(117, 187, 189, 0.9);
}

.nb-balance__scale-head {
  margin-bottom: 6px;
}

.nb-balance__label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e9f6ff;
}

.nb-balance__hint {
  display: block;
  font-size: 12px;
  color: #8aa3b7;
}

.nb-balance__bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nb-balance__bar {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  column-gap: 8px;
  align-items: center;
}

.nb-balance__bar-name {
  font-size: 12px;
  color: #dbe6f7;
}

.nb-balance__bar-track {
  position: relative;
  display: block;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(7, 34, 38, 0.95), rgba(5, 26, 30, 0.98));
  overflow: hidden;
}

.nb-balance__bar-fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffb547, #ff9147, #3ee7ff);
  transform-origin: left center;
}

.nb-balance__bar-fill--low {
  transform: scaleX(0.35);
}

.nb-balance__bar-fill--mid {
  transform: scaleX(0.6);
}

.nb-balance__bar-fill--high {
  transform: scaleX(0.85);
}

.nb-balance__bar-fill--pulse {
  animation: nb2-balance-pulse 1.8s ease-in-out infinite;
}

/* фото блока баланса */

.nb-balance__photos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.nb-balance__photo {
  margin: 0;
}

.nb-balance__caption {
  margin-top: 6px;
  font-size: 11px;
  color: #b3c4d6;
  max-width: 280px;
}

.nb-balance__photo .nb-img {
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.nb-balance__photo:hover .nb-img {
  transform: translateY(-4px);
  box-shadow: 0 0 22px rgba(255, 181, 71, 0.6);
  filter: brightness(1.06);
}

/* ===============================
   СЕКЦИЯ 6 — СЕЗОННЫЕ СЦЕНАРИИ
   =============================== */

.nb-season {
  padding-top: 8px;
  padding-bottom: 60px;
}

.nb-season__shell {
  border-radius: 26px;
  padding: 20px 20px 22px;
  background: radial-gradient(circle at 30% 0, rgba(148, 236, 180, 0.22), transparent 60%),
              rgba(3, 21, 25, 0.98);
  border: 1px solid rgba(95, 164, 173, 0.95);
  box-shadow: 0 0 32px rgba(8, 60, 67, 0.9);
}

.nb-season__header {
  max-width: 620px;
  margin-bottom: 16px;
}

.nb-season__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.nb-season__card {
  border-radius: 20px;
  padding: 10px 10px 12px;
  background: linear-gradient(135deg, rgba(5, 30, 33, 0.98), rgba(3, 18, 20, 1));
  border: 1px solid rgba(117, 187, 189, 0.9);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: 6px;
}

.nb-season__photo {
  margin: 0;
}

.nb-season__caption {
  margin-top: 6px;
  font-size: 11px;
  color: #b3c4d6;
  max-width: 280px;
}

.nb-season__body {
  font-size: 13px;
  color: #d3e1f0;
}

.nb-season__title {
  margin: 0 0 4px;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #e9f6ff;
}

.nb-season__text {
  margin: 0;
  font-size: 13px;
}

.nb-season__photo .nb-img {
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.nb-season__card:hover .nb-img {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(62, 231, 255, 0.6);
  filter: brightness(1.06);
}

/* ===============================
   ДОП. АНИМАЦИИ
   =============================== */

@keyframes nb2-balance-pulse {
  0%,
  100% {
    transform: scaleX(0.8);
  }
  45% {
    transform: scaleX(0.95);
  }
  70% {
    transform: scaleX(0.7);
  }
}

/* ===============================
   АДАПТИВ ДЛЯ 4–6
   =============================== */

@media (max-width: 960px) {
  .nb-plan__grid,
  .nb-balance__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .nb-season__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .nb-plan__content,
  .nb-balance__shell,
  .nb-season__shell {
    padding-inline: 14px;
  }
}

@media (max-width: 420px) {
  .nb-plan__caption,
  .nb-balance__caption,
  .nb-season__caption {
    max-width: 100%;
  }
}
/* ===============================
   СЕКЦИЯ 7 — НОЧЬ ПО ЧАСАМ
   =============================== */

.nb-midnight {
  padding-top: 8px;
  padding-bottom: 56px;
}

.nb-midnight__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.05fr);
  gap: 34px;
  align-items: center;
}

.nb-midnight__content {
  padding: 18px 20px 20px;
  border-radius: 22px;
  background: radial-gradient(circle at 0 0, rgba(148, 236, 180, 0.18), transparent 55%),
              rgba(4, 24, 25, 0.98);
  border: 1px solid rgba(90, 160, 160, 0.95);
  box-shadow: 0 0 24px rgba(9, 63, 63, 0.9);
}

.nb-midnight__timeline {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.nb-midnight__slot {
  border-radius: 16px;
  padding: 8px 9px 10px;
  background: linear-gradient(135deg, rgba(5, 30, 33, 0.98), rgba(3, 18, 20, 1));
  border: 1px solid rgba(117, 187, 189, 0.9);
  position: relative;
  overflow: hidden;
}

.nb-midnight__slot::before {
  content: "";
  position: absolute;
  inset: auto 10px 5px 10px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffb547, #3ee7ff);
  opacity: 0.6;
}

.nb-midnight__time {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #e9f6ff;
  margin-bottom: 4px;
}

.nb-midnight__note {
  display: block;
  font-size: 12px;
  color: #d3e1f0;
}

/* фото 7 секции */

.nb-midnight__visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.nb-midnight__photo {
  margin: 0;
}

.nb-midnight__caption {
  margin-top: 6px;
  font-size: 11px;
  color: #b3c4d6;
  max-width: 280px;
}

.nb-midnight__photo .nb-img {
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.nb-midnight__photo:hover .nb-img {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(62, 231, 255, 0.6);
  filter: brightness(1.05);
}

/* ===============================
   СЕКЦИЯ 8 — ГОРОДСКОЙ СЦЕНАРИЙ
   =============================== */

.nb-city-run {
  padding-top: 8px;
  padding-bottom: 56px;
}

.nb-city-run__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr);
  gap: 34px;
  align-items: center;
}

.nb-city-run__visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.nb-city-run__photo {
  margin: 0;
}

.nb-city-run__caption {
  margin-top: 6px;
  font-size: 11px;
  color: #b3c4d6;
  max-width: 280px;
}

.nb-city-run__photo .nb-img {
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.nb-city-run__photo:hover .nb-img {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(255, 181, 71, 0.6);
  filter: brightness(1.06);
}

.nb-city-run__content {
  padding: 18px 20px 22px;
  border-radius: 22px;
  background: radial-gradient(circle at 0 0, rgba(148, 236, 180, 0.18), transparent 55%),
              rgba(4, 24, 25, 0.98);
  border: 1px solid rgba(90, 160, 160, 0.95);
  box-shadow: 0 0 24px rgba(9, 63, 63, 0.9);
}

.nb-city-run__list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nb-city-run__item {
  border-radius: 16px;
  padding: 8px 10px 10px;
  background: linear-gradient(135deg, rgba(5, 30, 33, 0.98), rgba(3, 18, 20, 1));
  border: 1px solid rgba(117, 187, 189, 0.9);
}

.nb-city-run__item-title {
  margin: 0 0 4px;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #e9f6ff;
}

.nb-city-run__item-text {
  margin: 0;
  font-size: 13px;
  color: #d3e1f0;
}

/* маленькая карта */

.nb-city-run__note {
  margin: 12px 0 0;
}

.nb-city-run__note-caption {
  margin-top: 6px;
  font-size: 11px;
  color: #b3c4d6;
  max-width: 260px;
}

.nb-city-run__note .nb-img {
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.nb-city-run__note:hover .nb-img {
  transform: translateY(-4px);
  box-shadow: 0 0 18px rgba(62, 231, 255, 0.6);
  filter: brightness(1.05);
}

/* ===============================
   СЕКЦИЯ 9 — ТИХАЯ РЕКА
   =============================== */

.nb-river-scout {
  padding-top: 8px;
  padding-bottom: 60px;
}

.nb-river-scout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
  gap: 34px;
  align-items: center;
}

.nb-river-scout__visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.nb-river-scout__photo {
  margin: 0;
}

.nb-river-scout__caption {
  margin-top: 6px;
  font-size: 11px;
  color: #b3c4d6;
  max-width: 280px;
}

.nb-river-scout__photo .nb-img {
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.nb-river-scout__photo:hover .nb-img {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(62, 231, 255, 0.6);
  filter: brightness(1.05);
}

/* текстовая часть */

.nb-river-scout__content {
  padding: 18px 20px 20px;
  border-radius: 22px;
  background: radial-gradient(circle at 0 0, rgba(148, 236, 180, 0.18), transparent 55%),
              rgba(4, 24, 25, 0.98);
  border: 1px solid rgba(90, 160, 160, 0.95);
  box-shadow: 0 0 24px rgba(9, 63, 63, 0.9);
}

.nb-river-scout__rows {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nb-river-scout__row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 2px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(64, 109, 117, 0.7);
}

.nb-river-scout__row:last-child {
  border-bottom: none;
}

.nb-river-scout__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8aa3b7;
}

.nb-river-scout__value {
  font-size: 13px;
  color: #d3e1f0;
}

/* ===============================
   АДАПТИВ 7–9
   =============================== */

@media (max-width: 960px) {
  .nb-midnight__grid,
  .nb-city-run__grid,
  .nb-river-scout__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .nb-midnight__timeline {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .nb-midnight__content,
  .nb-city-run__content,
  .nb-river-scout__content {
    padding-inline: 14px;
  }

  .nb-river-scout__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  .nb-midnight__caption,
  .nb-city-run__caption,
  .nb-city-run__note-caption,
  .nb-river-scout__caption {
    max-width: 100%;
  }

  .nb-midnight__timeline {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ===============================
   СЕКЦИЯ 10 — НОЧНОЙ ЧЕК-ЛИСТ
   =============================== */

.nb-check {
  padding-top: 8px;
  padding-bottom: 56px;
}

.nb-check__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.2fr);
  gap: 34px;
  align-items: center;
}

.nb-check__visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.nb-check__photo {
  margin: 0;
}

.nb-check__caption {
  margin-top: 6px;
  font-size: 11px;
  color: #b3c4d6;
  max-width: 280px;
}

.nb-check__photo .nb-img {
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.nb-check__photo:hover .nb-img {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(62, 231, 255, 0.6);
  filter: brightness(1.06);
}

.nb-check__content {
  padding: 18px 20px 20px;
  border-radius: 22px;
  background: radial-gradient(circle at 0 0, rgba(148, 236, 180, 0.18), transparent 55%),
              rgba(4, 24, 25, 0.98);
  border: 1px solid rgba(90, 160, 160, 0.95);
  box-shadow: 0 0 24px rgba(9, 63, 63, 0.9);
}

.nb-check__list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nb-check__item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 8px;
  align-items: flex-start;
}

.nb-check__bullet {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 6px;
  background: radial-gradient(circle at 50% 50%, #ffb547 0, transparent 60%);
  box-shadow: 0 0 12px rgba(255, 181, 71, 0.8);
}

.nb-check__item-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #e7eefc;
  margin-bottom: 2px;
}

.nb-check__item-text {
  display: block;
  font-size: 13px;
  color: #d3e1f0;
}

/* ===============================
   СЕКЦИЯ 11 — ЕДА И ТЕПЛО
   =============================== */

.nb-comfort {
  padding-top: 8px;
  padding-bottom: 56px;
}

.nb-comfort__shell {
  border-radius: 26px;
  padding: 20px 20px 22px;
  background: radial-gradient(circle at 30% 0, rgba(148, 236, 180, 0.22), transparent 60%),
              rgba(3, 21, 25, 0.98);
  border: 1px solid rgba(95, 164, 173, 0.95);
  box-shadow: 0 0 32px rgba(8, 60, 67, 0.9);
}

.nb-comfort__header {
  max-width: 620px;
  margin-bottom: 16px;
}

.nb-comfort__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.nb-comfort__card {
  border-radius: 20px;
  padding: 10px 10px 12px;
  background: linear-gradient(135deg, rgba(5, 30, 33, 0.98), rgba(3, 18, 20, 1));
  border: 1px solid rgba(117, 187, 189, 0.9);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: 6px;
}

.nb-comfort__photo {
  margin: 0;
}

.nb-comfort__caption {
  margin-top: 6px;
  font-size: 11px;
  color: #b3c4d6;
  max-width: 260px;
}

.nb-comfort__body {
  font-size: 13px;
  color: #d3e1f0;
}

.nb-comfort__title {
  margin: 0 0 4px;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #e9f6ff;
}

.nb-comfort__text {
  margin: 0;
  font-size: 13px;
}

.nb-comfort__card .nb-img {
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.nb-comfort__card:hover .nb-img {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(62, 231, 255, 0.6);
  filter: brightness(1.06);
}

/* ===============================
   СЕКЦИЯ 12 — СВЯЗЬ И СИГНАЛЫ
   =============================== */

.nb-signal {
  padding-top: 8px;
  padding-bottom: 60px;
}

.nb-signal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.05fr);
  gap: 34px;
  align-items: center;
}

.nb-signal__content {
  padding: 18px 20px 20px;
  border-radius: 22px;
  background: radial-gradient(circle at 0 0, rgba(148, 236, 180, 0.18), transparent 55%),
              rgba(4, 24, 25, 0.98);
  border: 1px solid rgba(90, 160, 160, 0.95);
  box-shadow: 0 0 24px rgba(9, 63, 63, 0.9);
}

.nb-signal__rows {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nb-signal__row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 2px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(64, 109, 117, 0.7);
}

.nb-signal__row:last-child {
  border-bottom: none;
}

.nb-signal__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8aa3b7;
}

.nb-signal__value {
  font-size: 13px;
  color: #d3e1f0;
}

/* фото сигнала */

.nb-signal__visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.nb-signal__photo {
  margin: 0;
}

.nb-signal__caption {
  margin-top: 6px;
  font-size: 11px;
  color: #b3c4d6;
  max-width: 280px;
}

.nb-signal__photo .nb-img {
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.nb-signal__photo:hover .nb-img {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(62, 231, 255, 0.6);
  filter: brightness(1.05);
}

/* ===============================
   АДАПТИВ 10–12
   =============================== */

@media (max-width: 960px) {
  .nb-check__grid,
  .nb-signal__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .nb-comfort__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .nb-check__content,
  .nb-comfort__shell,
  .nb-signal__content {
    padding-inline: 14px;
  }

  .nb-signal__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  .nb-check__caption,
  .nb-comfort__caption,
  .nb-signal__caption {
    max-width: 100%;
  }
}
/* ===============================
   СЕКЦИЯ 13 — РАЗБОР НОЧИ
   =============================== */

.nb-review {
  padding-top: 8px;
  padding-bottom: 56px;
}

.nb-review__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
  gap: 34px;
  align-items: center;
}

.nb-review__content {
  padding: 18px 20px 20px;
  border-radius: 22px;
  background: radial-gradient(circle at 0 0, rgba(148, 236, 180, 0.18), transparent 55%),
              rgba(4, 24, 25, 0.98);
  border: 1px solid rgba(90, 160, 160, 0.95);
  box-shadow: 0 0 24px rgba(9, 63, 63, 0.9);
}

.nb-review__list {
  margin: 10px 0 0;
}

.nb-review__row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 2px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(64, 109, 117, 0.7);
}

.nb-review__row:last-child {
  border-bottom: none;
}

.nb-review__term {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8aa3b7;
}

.nb-review__def {
  margin: 0;
  font-size: 13px;
  color: #d3e1f0;
}

/* фото разбора */

.nb-review__visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.nb-review__photo {
  margin: 0;
}

.nb-review__caption {
  margin-top: 6px;
  font-size: 11px;
  color: #b3c4d6;
  max-width: 280px;
}

.nb-review__photo .nb-img {
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.nb-review__photo:hover .nb-img {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(62, 231, 255, 0.6);
  filter: brightness(1.06);
}

/* ===============================
   СЕКЦИЯ 14 — ВОПРОСЫ
   =============================== */

.nb-faq {
  padding-top: 8px;
  padding-bottom: 56px;
}

.nb-faq__shell {
  border-radius: 26px;
  padding: 20px 20px 22px;
  background: radial-gradient(circle at 70% 0, rgba(62, 231, 255, 0.22), transparent 60%),
              rgba(3, 21, 25, 0.98);
  border: 1px solid rgba(95, 164, 173, 0.95);
  box-shadow: 0 0 32px rgba(8, 60, 67, 0.9);
}

.nb-faq__header {
  max-width: 620px;
  margin-bottom: 16px;
}

.nb-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: flex-start;
}

/* Q&A */

.nb-faq__qa {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nb-faq__item {
  border-radius: 18px;
  padding: 8px 10px 10px;
  background: linear-gradient(135deg, rgba(5, 30, 33, 0.98), rgba(3, 18, 20, 1));
  border: 1px solid rgba(117, 187, 189, 0.9);
}

.nb-faq__question {
  margin: 0 0 4px;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #e9f6ff;
}

.nb-faq__answer {
  margin: 0;
  font-size: 13px;
  color: #d3e1f0;
}

/* фото FAQ */

.nb-faq__visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.nb-faq__photo {
  margin: 0;
}

.nb-faq__caption {
  margin-top: 6px;
  font-size: 11px;
  color: #b3c4d6;
  max-width: 280px;
}

.nb-faq__photo .nb-img {
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.nb-faq__photo:hover .nb-img {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(255, 181, 71, 0.6);
  filter: brightness(1.06);
}

/* ===============================
   СЕКЦИЯ 15 — ЛИЧНЫЕ СЦЕНАРИИ
   =============================== */

.nb-custom {
  padding-top: 8px;
  padding-bottom: 60px;
}

.nb-custom__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
  gap: 34px;
  align-items: center;
}

/* галерея своих точек */

.nb-custom__visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.nb-custom__spot {
  margin: 0;
}

.nb-custom__caption {
  margin-top: 6px;
  font-size: 11px;
  color: #b3c4d6;
  max-width: 280px;
}

.nb-custom__spot .nb-img {
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.nb-custom__spot:hover .nb-img {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(62, 231, 255, 0.6);
  filter: brightness(1.05);
}

/* текстовая часть */

.nb-custom__content {
  padding: 18px 20px 22px;
  border-radius: 22px;
  background: radial-gradient(circle at 0 0, rgba(148, 236, 180, 0.18), transparent 55%),
              rgba(4, 24, 25, 0.98);
  border: 1px solid rgba(90, 160, 160, 0.95);
  box-shadow: 0 0 24px rgba(9, 63, 63, 0.9);
}

.nb-custom__columns {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.nb-custom__subtitle {
  margin: 0 0 4px;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #e9f6ff;
}

.nb-custom__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nb-custom__item {
  font-size: 13px;
  color: #d3e1f0;
}

/* ===============================
   АДАПТИВ 13–15
   =============================== */

@media (max-width: 960px) {
  .nb-review__grid,
  .nb-faq__grid,
  .nb-custom__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .nb-review__content,
  .nb-faq__shell,
  .nb-custom__content {
    padding-inline: 14px;
  }

  .nb-review__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .nb-custom__columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  .nb-review__caption,
  .nb-faq__caption,
  .nb-custom__caption {
    max-width: 100%;
  }
}
/* ===============================
   СЕКЦИЯ 16 — ГОТОВЫЕ СЦЕНАРИИ
   =============================== */

.nb-cases {
  padding-top: 8px;
  padding-bottom: 56px;
}

.nb-cases__shell {
  border-radius: 26px;
  padding: 20px 20px 22px;
  background: radial-gradient(circle at 35% 0, rgba(148, 236, 180, 0.22), transparent 60%),
              rgba(3, 21, 25, 0.98);
  border: 1px solid rgba(95, 164, 173, 0.95);
  box-shadow: 0 0 32px rgba(8, 60, 67, 0.9);
}

.nb-cases__header {
  max-width: 620px;
  margin-bottom: 16px;
}

.nb-cases__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: flex-start;
}

.nb-cases__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nb-cases__item {
  border-radius: 18px;
  padding: 8px 10px 10px;
  background: linear-gradient(135deg, rgba(5, 30, 33, 0.98), rgba(3, 18, 20, 1));
  border: 1px solid rgba(117, 187, 189, 0.9);
}

.nb-cases__item-title {
  margin: 0 0 4px;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #e9f6ff;
}

.nb-cases__item-text {
  margin: 0;
  font-size: 13px;
  color: #d3e1f0;
}

/* фото сценариев */

.nb-cases__visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.nb-cases__photo {
  margin: 0;
}

.nb-cases__caption {
  margin-top: 6px;
  font-size: 11px;
  color: #b3c4d6;
  max-width: 280px;
}

.nb-cases__photo .nb-img {
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.nb-cases__photo:hover .nb-img {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(62, 231, 255, 0.6);
  filter: brightness(1.06);
}

/* ===============================
   СЕКЦИЯ 17 — КОГДА ПЕРЕНЕСТИ НОЧЬ
   =============================== */

.nb-limits {
  padding-top: 8px;
  padding-bottom: 56px;
}

.nb-limits__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.05fr);
  gap: 34px;
  align-items: center;
}

.nb-limits__content {
  padding: 18px 20px 20px;
  border-radius: 22px;
  background: radial-gradient(circle at 0 0, rgba(148, 236, 180, 0.18), transparent 55%),
              rgba(4, 24, 25, 0.98);
  border: 1px solid rgba(90, 160, 160, 0.95);
  box-shadow: 0 0 24px rgba(9, 63, 63, 0.9);
}

.nb-limits__rows {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nb-limits__row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 2px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(64, 109, 117, 0.7);
}

.nb-limits__row:last-child {
  border-bottom: none;
}

.nb-limits__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8aa3b7;
}

.nb-limits__value {
  font-size: 13px;
  color: #d3e1f0;
}

/* фото секции 17 */

.nb-limits__visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.nb-limits__photo {
  margin: 0;
}

.nb-limits__caption {
  margin-top: 6px;
  font-size: 11px;
  color: #b3c4d6;
  max-width: 280px;
}

.nb-limits__photo .nb-img {
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.nb-limits__photo:hover .nb-img {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(62, 231, 255, 0.6);
  filter: brightness(1.05);
}

/* ===============================
   СЕКЦИЯ 18 — CTA ПОСЛЕ СЦЕНАРИЕВ
   =============================== */

.nb-cta-scenarios {
  padding-top: 8px;
  padding-bottom: 60px;
}

.nb-cta-scenarios__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr);
  gap: 34px;
  align-items: center;
}

/* визуал */

.nb-cta-scenarios__visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.nb-cta-scenarios__photo {
  margin: 0;
}

.nb-cta-scenarios__caption {
  margin-top: 6px;
  font-size: 11px;
  color: #b3c4d6;
  max-width: 280px;
}

.nb-cta-scenarios__photo .nb-img {
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.nb-cta-scenarios__photo:hover .nb-img {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(255, 181, 71, 0.6);
  filter: brightness(1.06);
}

/* текст */

.nb-cta-scenarios__content {
  padding: 18px 20px 22px;
  border-radius: 22px;
  background: radial-gradient(circle at 0 0, rgba(148, 236, 180, 0.18), transparent 55%),
              rgba(4, 24, 25, 0.98);
  border: 1px solid rgba(90, 160, 160, 0.95);
  box-shadow: 0 0 24px rgba(9, 63, 63, 0.9);
}

.nb-cta-scenarios__columns {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.nb-cta-scenarios__subtitle {
  margin: 0 0 4px;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #e9f6ff;
}

.nb-cta-scenarios__text {
  margin: 0;
  font-size: 13px;
  color: #d3e1f0;
}

.nb-cta-scenarios__actions {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ===============================
   АДАПТИВ 16–18
   =============================== */

@media (max-width: 960px) {
  .nb-cases__grid,
  .nb-limits__grid,
  .nb-cta-scenarios__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .nb-cases__shell,
  .nb-limits__content,
  .nb-cta-scenarios__content {
    padding-inline: 14px;
  }

  .nb-limits__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .nb-cta-scenarios__columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  .nb-cases__caption,
  .nb-limits__caption,
  .nb-cta-scenarios__caption {
    max-width: 100%;
  }
}
.nb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.2s ease,
    border-color 0.2s ease, color 0.2s ease;
  max-width: 100%;      /* <— не вылезаем за блок */
  text-align: center;   /* <— выравнивание по центру */
  white-space: normal;  /* <— разрешаем перенос строк */
}