

.bebas-neue-regular { /*GOOGLE FONTS  --  LOGO  */
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/*GOOGLE FONTS  --  LOGO  */
.wallpoet-regular {
  font-family: "Wallpoet", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.doto-<uniquifier> {
  font-family: "Doto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "ROND" 0;
}


.orbitron  {  /*GOOGLE FONTS  -  H1  H2  H3   */
  font-family: "Orbitron", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

:root {
  /* Градиент логотипа */
  --brand-gradient-from: #ff6b6b;
  --brand-gradient-mid:  #f8e71c;
  --brand-gradient-to:   #6be7ff;

  /* Фон навбара в начале (когда наверху) */
  --nav-solid-from: #18191E;
  --nav-solid-to:   #1C1A00;

  /* Цвет мутного стекла при скролле */
  --nav-glass-bg: rgba(4,15,22,0.74);
}

body {
  background: #0C0C0C;
  color: #e6eef6;
	
  data-bs-spy="scroll"
  data-bs-target="#mainNavbar"
  data-bs-offset="90"
  tabindex="0"	
}


hr {
  border: 0;
  height: 1px;
  margin: clamp(1.2rem, 3vw, 2.4rem) 0;
  background:
    radial-gradient(
      currentColor 1px,
      transparent 1px
    ) center / 8px 1px repeat-x;
  opacity: 0.45;
}


/*////   ЗВЁЗДЫ  ////*/
hr.hr-dots {
  background: none;
  height: auto;
  opacity: 1;

  border: 0;
  margin: 1rem 0;
  text-align: center;

  display: block;
  line-height: 1;

  /* РЕГУЛИРОВКА РАЗМЕРА (дефолт) */
  --hr-stars-size: 22px;     /* меняй как хочешь */
  --hr-stars-gap: 0.6em;     /* расстояние между звёздами */
}

hr.hr-dots::before {
  content: "★★★";
  display: inline-block;

  font-size: var(--hr-stars-size);
  letter-spacing: var(--hr-stars-gap);

  color: var(--brand-gradient-from);
  opacity: 1;
}




/* Навбар */
.navbar-pladesov {
  background: linear-gradient(135deg, var(--nav-solid-from), var(--nav-solid-to));
  padding: 0.65rem 0;
  transition:
    background 0.35s ease,
    background-color 0.35s ease,
    backdrop-filter 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Состояние "стекла" при скролле */
.navbar-pladesov.navbar-glass {
  background: var(--nav-glass-bg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}


/* Логотип с градиентным сиянием */
/* Контейнер бренда в navbar */
/* Контейнер бренда слева в navbar */
.navbar-pladesov .navbar-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 1.5rem;
  padding-top: 0;
  padding-bottom: 0;
}

/* Логотип PLADESOV — ОДНО место, где задаём размер */
.navbar-pladesov .navbar-logo {
  /* один адаптивный размер для всех устройств */
  font-size: clamp(1.4rem, 2.4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: 0em;
  text-transform: uppercase;
  line-height: 1.1;

  background: linear-gradient(
    120deg,
    var(--brand-gradient-from),
    var(--brand-gradient-mid),
    var(--brand-gradient-to),
    var(--brand-gradient-from)
  );
  background-size: 260% 260%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: brandGlow 7s ease-in-out infinite;
}

/* Подзаголовок под логотипом */
.navbar-pladesov .brand-sub {
  display: block;
  margin-top: 0.18rem;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(223,255,252,1.00);
}




/* Ссылки меню */
/* >>> ТЕЛЕФОН / малые экраны: размер ссылок меню здесь <<< */
.navbar-pladesov .nav-link {
  font-size: 1.4rem;       /* размер пунктов меню на телефоне/планшете */
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  padding-inline: 0.9rem;
  position: relative;
  transition: color 0.2s ease, transform 0.15s ease;
}

.navbar-pladesov .nav-link.active {
  color: #ffffff;
}

.navbar-pladesov .nav-link::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.25rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--brand-gradient-from),
    var(--brand-gradient-to)
  );
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
  opacity: 0.9;
}

.navbar-pladesov .nav-link:hover::after,
.navbar-pladesov .nav-link:focus::after,
.navbar-pladesov .nav-link.active::after {
  transform: scaleX(1);
}

.navbar-pladesov .nav-link:hover,
.navbar-pladesov .nav-link:focus {
  color: #ffffff;
  transform: translateY(-1px);
}

/* Кнопка справа */
/* >>> ТЕЛЕФОН / малые экраны: размер текста кнопки справа <<< */
.navbar-pladesov .btn-cta {
  font-size: 0.9rem;        /* размер шрифта кнопки на телефоне/планшете */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  border-radius: 999px;
  padding: 0.4rem 1.4rem;
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.7);
  background: transparent;
  color: #ffffff;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.navbar-pladesov .btn-cta:hover,
.navbar-pladesov .btn-cta:focus {
  background: linear-gradient(
    120deg,
    var(--brand-gradient-from),
    var(--brand-gradient-to)
  );
  color: #050816;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.8);
}

/* Бургер */
.navbar-pladesov .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.4);
  background-color: rgba(5, 8, 22, 0.85);
  border-radius: 10px;
}

.navbar-pladesov .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* >>> ПК / большие экраны: перезапись размеров для >= 992px <<< */
@media (min-width: 992px) {
  .navbar-pladesov .navbar-brand {
    font-size: 2rem;      /* размер логотипа на десктопе */
  }
  .navbar-pladesov .nav-link {
    font-size: 1.8rem;        /* размер пунктов меню на десктопе */
  }
  /* Если захочешь другой размер кнопки на ПК — можно добавить:
  .navbar-pladesov .btn-cta {
    font-size: 0.85rem;     // пример – шрифт кнопки на десктопе
  }
  */
}

/* Анимация градиентного свечения логотипа */
@keyframes brandGlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Просто отступ сверху, если nav fixed */
main {
  padding-top: 90px;
}




/*////////  РАБОТА С ТЕКСТОМ //////// */

/* Блок с заголовком (hero) */
.hero-section {
  text-align: center;          /* центрируем всё внутри секции */
  padding: 4rem 1rem 3rem;     /* отступы сверху/снизу */
}

/* БАЗОВЫЙ градиентный стиль для всех заголовков
   Работает и для .title-gradient, и для .title-h1/.title-h2/.title-h3,
   чтобы старый код с class="title-h1" не сломался */
.title-gradient,
.title-h1,
.title-h2,
.title-h3 {
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 1.5rem;
  text-transform: uppercase;
  letter-spacing: -2px;

  /* сам градиент перелива */
  background: linear-gradient(
    120deg,
    var(--brand-gradient-from),
    var(--brand-gradient-mid),
    var(--brand-gradient-to),
    var(--brand-gradient-from)
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  /* анимация перелива */
  animation: titleGradient 8s linear infinite;

  text-align: center; /* все такие заголовки по центру */
}

/* КОНКРЕТНЫЕ размеры по уровням */


/* ВНИМАНИЕ - браузер пытается использовать 4vw, но:
никогда не сделает меньше 2rem
и никогда не сделает больше 4.6rem*/
/* H1 — самый крупный */
/* Заголовок H1: размер шрифта адаптивный (responsive) */

.title-h1 {
  /*
    clamp(MIN, FLUID, MAX)

    MIN  = 2rem  → НИЖНЯЯ граница.
           На очень узких экранах (мобилки) шрифт НЕ станет меньше 2rem.

    FLUID = 4vw  → “плавающее” значение.
           vw = 1% ширины окна браузера.
           4vw = 4% от ширины окна.
           То есть при росте ширины экрана шрифт растёт.

    MAX  = 4.6rem → ВЕРХНЯЯ граница.
            На очень широких экранах (десктоп/широкие мониторы)
            шрифт НЕ станет больше 4.6rem. 2.5 - сейчас.
  */
  font-size: clamp(1.2rem, 4vw, 2.5rem);
  letter-spacing: 1px;
}

/*
  Как это будет по ширине экрана (примерно):

  Пока 4vw < 2rem  → срабатывает MIN (2rem).
  Когда 2rem ≤ 4vw ≤ 4.6rem → работает FLUID (4vw).
  Когда 4vw > 4.6rem → срабатывает MAX (4.6rem).

  Где “переключается”:

  1) Переход на FLUID:
     4vw = 2rem
     Ширина = (2rem / 4) * 100 = 50rem
     Если 1rem = 16px → 50rem = 800px
     То есть до ~800px (мобилки/часть планшетов) будет 2rem.

  2) Переход на MAX:
     4vw = 4.6rem
     Ширина = (4.6rem / 4) * 100 = 115rem
     Если 1rem = 16px → 115rem = 1840px
     То есть после ~1840px (широкие мониторы) будет 4.6rem.

  Примеры (если 1rem=16px):
    360px (телефон): 4vw=14.4px → меньше 2rem(32px) → итог 32px
    768px (планшет): 4vw=30.7px → всё ещё меньше 32px → итог 32px
    1024px (планшет/ноут): 4vw=41px → между 32px и 73.6px → итог ~41px
    1440px (ноут/десктоп): 4vw=57.6px → итог ~57.6px
    1920px (десктоп): 4vw=76.8px → больше 73.6px → итог 73.6px
*/


/* H2 — поменьше */
.title-h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: 0px;    /* можно ослабить сжатие текста */
}

/* H3 — ещё меньше */
.title-h3 {
  font-size: clamp(1.4rem, 2.4vw, 2.4rem);
  letter-spacing: 0px;
}

/* Подзаголовок под любым градиентным заголовком */
.title-gradient .title-sub,
.title-h1 .title-sub,
.title-h2 .title-sub,
.title-h3 .title-sub {
  display: block;
  margin-top: 0.8rem;
  font-size: clamp(0.9rem, 1.1vw, 1.1rem);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(230, 238, 246, 0.85);
}

/* Анимация градиента для заголовков */
@keyframes titleGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}












/*////////    LIGHT BOX IMG  ///// */
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}
/*////   END  /////*/



/* LazyLoad  - Обёртка с прелоадером */
/* Обёртка с прелоадером */
.preloader {
  position: relative;
  display: block;
  width: 100%;
  max-width: 600px;              /* можешь убрать/поменять */
  margin: 0 auto;

  background-color: #111;
  background-image: url("loader.gif");  /* твой gif */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 64px 64px;

  overflow: hidden;
}

/* Картинка внутри прелоадера */
.preloader .lazy {
  display: block;
  width: 100%;
  height: auto;                  /* сохраняем пропорции файла */
  opacity: 0;                    /* изначально спрятана */
  transition: opacity 0.4s ease; /* плавное появление */
}

/* Опционально: защита от пустых src вообще по сайту */
img:not([src]) {
  visibility: hidden;
}







/* ---------- MAP SECTION ---------- */
.map-section {
  background: #1B1B1B;          /* чёрный фон секции */
  color: #e6e6e6;
}

/* Карточка с адресом + картой */
.map-card {
  background: #050505;
  border-radius: 18px;
  border: 1px solid #1b1b1b;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.85);
}

/* Левая часть – текст/адрес */
.map-info {
  max-width: 340px;
}

.map-title {
  font-size: 1.1rem;
  letter-spacing: 0.0em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
  color: #f5f5f5;
}

.map-address {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  color: #bbbbbb;
}

.map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  color: #e6e6e6;
  opacity: 0.85;
  border-bottom: 1px solid rgba(255,255,255,0.16);
  padding-bottom: 0.25rem;
  transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.map-link:hover,
.map-link:focus {
  opacity: 1;
  border-color: rgba(255,255,255,0.4);
  transform: translateY(-1px);
}

/* Правая часть – сама карта */
.map-embed {
  position: relative;
  min-height: 260px;          /* высота карты на телефоне */
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}

.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;

  /* делаем карту тёмной/нейтральной */
  filter: grayscale(1) contrast(1.15) brightness(0.85);
}

/* Десктоп: текст слева, карта справа */
@media (min-width: 992px) {
  .map-card {
    flex-direction: row;
    align-items: stretch;
  }

  .map-info {
    flex: 0 0 30%;
  }

  .map-embed {
    flex: 1;
    min-height: 320px;       /* высота карты на больших экранах */
  }
}






/* Сбрасываем стандартный margin body (чтобы не было лишних 8px снизу/сверху) */
/*body {
  margin: 0;
}
*/
/* ---------- FOOTER ---------- */

.footer {
  background: #020308;
  color: #e6eef6;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 2rem;     /* отступ сверху */
  padding-bottom: 0.5rem;/* ОЧЕНЬ маленький отступ снизу */
}

.footer-title {
  text-transform: uppercase;
  letter-spacing: 0.0em;
  font-size: 1.30rem;
  margin-bottom: 0.75rem;
  color: #d1d5db;
}

/* Аватар в футере — круглый */
.avatar-footer {
  width: 196px;
  height: 196px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.avatar-float {
  float: left;
  margin: 0 1rem 0.75rem 0;
  shape-outside: circle(50%);
  -webkit-shape-outside: circle(50%);
}

.about-footer::after {
  content: "";
  display: block;
  clear: both;
}

/* Контактный блок */
.contact-email {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 1rem;
  color: #9aa4b5;
}

.contact-email span {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
}

.contact-email a {
  color: #6DB6FE;
  text-decoration: none;
  border-bottom: 1px solid rgba(230, 238, 246, 0.35);
  padding-bottom: 2px;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.contact-email a:hover,
.contact-email a:focus {
  color: #ffffff;
  border-color: rgba(230, 238, 246, 0.7);
  transform: translateY(-1px);
}


/* Ссылки в футере  */
/* Колонка со ссылками — чуть отодвинута вправо на десктопе */
@media (min-width: 768px) {
  .footer-links-col {
    padding-left: 3rem; /* крути под глаз: 2rem, 3rem, 4rem */
  }
}

/* Список ссылок */
.footer-links {
  margin: 0;
  padding: 0;
}

.footer-link-item {
  margin-bottom: 0.6rem;
}

/* Верхняя строка: иконка + ссылка */
.footer-link-main {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #e5e7eb;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease, transform 0.15s ease;
}

.footer-link-main:hover,
.footer-link-main:focus {
  color: #ffffff;
  transform: translateY(-1px);
}

/* Иконка слева */
.footer-link-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: 0.9;
}

/* Вторая строка — описание под ссылкой */
.footer-link-desc {
  font-size: 0.8rem;
  color: #9ca3af;
  margin-left: 1.8rem; /* визуально под текстом, а не под иконкой */
}



/* Линия и копирайт */
.footer-divider {
  border-color: rgba(148,163,184,1.00);
  margin: 1rem 0 0.25rem;  /* снизу минимум */
}

.footer-copy {
  font-size: 0.85rem;
  color: #9ca3af;
  margin: 0;     /* НИКАКИХ отступов снизу/сверху */
}






/*////   GRADIENT ANIM   /////  */
/*.bg-price {
	background: linear-gradient(-45deg, rgba(1, 16, 23, 1) 0%, rgba(31, 22, 7, 1) 50%, rgba(0, 0, 0, 1) 100%);	
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}*/






/*////   АНИМАЦИЯ  ФОНА /////// */
.bg-anim {background: radial-gradient(100% 100% at var(--5-x-position) var(--5-y-position), #0f1415 0%, transparent),radial-gradient(100% 100% at var(--6-x-position) var(--6-y-position), #401d17 0%, transparent),radial-gradient(100% 100% at var(--7-x-position) var(--7-y-position), #042b34 0%, transparent),#1b253b;animation-name: main; animation-iteration-count: infinite; animation-duration: 8s; transition-timing-function: ease-out;}@property --5-x-position {
      syntax: '<percentage>';
        inherits: false;
        initial-value: 20%;
      }@property --5-y-position {
        syntax: '<percentage>';
          inherits: false;
          initial-value: 80%;
        }@property --6-x-position {
      syntax: '<percentage>';
        inherits: false;
        initial-value: 80%;
      }@property --6-y-position {
        syntax: '<percentage>';
          inherits: false;
          initial-value: 20%;
        }@property --7-x-position {
      syntax: '<percentage>';
        inherits: false;
        initial-value: 80%;
      }@property --7-y-position {
        syntax: '<percentage>';
          inherits: false;
          initial-value: 80%;
        }:root {--5-x-position: 20%;--5-y-position: 80%;--6-x-position: 80%;--6-y-position: 20%;--7-x-position: 80%;--7-y-position: 80%;}
    @keyframes main {
      25% {--5-x-position: 15%;--5-y-position: 15%;--6-x-position: 85%;--6-y-position: 80%;}50% {--5-x-position: 80%;--5-y-position: 15%;--6-x-position: 15%;--6-y-position: 85%;--7-x-position: 20%;--7-y-position: 20%;}
    }
    
   


/*////  ICON //////*/
.list-icon{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .55rem;
}

.list-icon li{
  position: relative;
  padding-left: 1.9rem; /* место под иконку */
  line-height: 1.35;
}

.list-icon li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .15em;
  width: 1.2rem;
  height: 1.2rem;

  /* сюда ты вставишь свою картинку */
  background-image: url("Images/Social-Logo/ico.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/*///  end //// */




/*///  ЛИНИЯ ПОЛОСА ВВЕРХУ DIV ОТДЕЛЕНИЕ   /////*/
/* <!-- НЕ сработает без  связки .container.sep-tech -->*/
.sep-tech{
  --sep-h: 1px;
  position: relative;
  overflow-x: clip;
  padding-top: calc(3rem + var(--sep-h));
}

.sep-tech::before{
  content:"";
  position:absolute;
  top: 0;
  left:  calc(50% - 50vw);
  right: calc(50% - 50vw);
  height: var(--sep-h);
  pointer-events:none;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(107,231,255,.70) 0 10px,
      rgba(107,231,255,0) 10px 18px
    ),
    linear-gradient(90deg,
      rgba(107,231,255,0),
      rgba(255,107,107,.75),
      rgba(180,107,255,0)
    );

  filter: drop-shadow(0 0 10px rgba(107,231,255,.25));
  opacity: .1;

  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 50%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 50%, transparent 100%);
}

.sep-tech::after{
  content:"";
  position:absolute;
  top: var(--sep-h);
  left:  calc(50% - 50vw);
  right: calc(50% - 50vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  pointer-events:none;

  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 50%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 50%, transparent 100%);
}

/*///   END ///  */




/*  MY  PULSE-DOT   */
.footer-title .live-247{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.footer-title .pulse-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #307000;            /* цвет точки */
  box-shadow: 0 0 10px rgba(122,255,0,0.73);
  position: relative;
  flex: 0 0 auto;
}

.footer-title .pulse-dot::after{
  content: "";
  position: absolute;
  inset: -16px;                    /* размер “кольца” */
  border-radius: 50%;
  background: rgba(36,255,114,.35);
  transform: scale(.2);
  opacity: .9;
  animation: pulse-ring 1.35s ease-out infinite;
}

@keyframes pulse-ring{
  0%   { transform: scale(.2); opacity: .85; }
  70%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* уважение к людям, которым вредна анимация */
@media (prefers-reduced-motion: reduce){
  .footer-title .pulse-dot::after{ animation: none; opacity: 0; }
}
/*///  END  //// */


/*////  ПОДПИСЬ ////// */
.book-signature{
  margin: 12px 0 0;
  text-align: right;
  font-style: italic;
  padding-right: .25rem;    /* лёгкий “книжный” отступ от края */
}

/*КЛАСС <U> ЛИНИЯ   */
.u-red{
  display: inline-block;
  border-bottom: 1px solid #BC1D1D;
  padding-bottom: 0px; /* чтобы линия не прилипала к буквам */
}







/*/////  VALERA Image Carusel (исходный)  /////*/
@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(calc(-250px * 14), 0, 0);
            transform: translate3d(calc(-250px * 14), 0, 0);  /** Число фотографий **/
  }
}

@keyframes scroll {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(calc(-250px * 14), 0, 0);
            transform: translate3d(calc(-250px * 14), 0, 0);  /** Число фотографий **/
  }
}

.slider {
  background: #161616;
  height: 100%;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 1.5rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.slider::before, .slider::after {
  content: "";
  height: 100%;
  position: absolute;
  width: 200px;
  z-index: 2;
}
.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.slider::before {
  left: 0;
  top: 0;
}

.slider .slide-track {
  -webkit-animation: scroll 40s linear infinite;
          animation: scroll 40s linear infinite;
  display: flex;
  width: calc(250px * 14);
  will-change: transform;
  -webkit-transform: translate3d(0,0,0);
          transform: translate3d(0,0,0);
}

/* пауза (JS будет добавлять/удалять этот класс) */
.slider .slide-track.vg-carousel-paused {
  -webkit-animation-play-state: paused !important;
          animation-play-state: paused !important;
}

.slider .slide {
  height: 100%;
  width: 250px;
}

.slider img /*/// Добавил Расстояние /// */
{
  min-width: 250px;
  padding: 0 20px;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-drag: none;
}

/* уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .slider .slide-track {
    -webkit-animation: none !important;
            animation: none !important;
  }
}

/*/////  END  Carusel  /////*/