/* Цвета бренда */
:root {
  --brand-blue: #243E7A;
  --brand-blue-hover: #2a4a92;
}

/* Верхняя синяя плашка */
.about-top {
  background: #1E3D73;
  color: #fff;
  padding: 28px 0;
}
.about-top__title {
  margin: 0 0 10px;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
}
.about-top__lead {
  margin: 0;
  opacity: 0.95;
  max-width: 980px;
  line-height: 1.6;
}

/* Hero блок */
.hero {
  position: relative;
  width: 100%;
  min-height: 70vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.hero--about {
  min-height: 72vh;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  transform: scale(1.02);
  will-change: transform;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 24, 48, 0.55) 0%,
    rgba(10, 24, 48, 0.55) 55%,
    rgba(10, 24, 48, 0.6) 100%
  );
}
.hero__container {
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero__content {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
}
.hero__title {
  margin: 0 0 16px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.2;
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.hero__text {
  margin: 0 auto 14px;
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.7;
  opacity: 0.95;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}

/* База кнопок: убраны анимации наведения */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  /* Убрали анимации трансформов/теней на ховере */
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover,
.btn:active {
  transform: none !important;
}

/* Обычная primary (для других кнопок, если есть) */
.btn-primary {
  background: var(--brand-blue);
  color: #fff;
  border: 2px solid var(--brand-blue);
}
.btn-primary:hover {
  background: var(--brand-blue-hover);
  border-color: var(--brand-blue-hover);
  transform: none;          /* без анимации */
  box-shadow: none;         /* без вспышек */
}

/* Большая круглая CTA по вашему дизайну */
#show-safety-form.btn,
#show-safety-form.btn:visited {
  background: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
  padding: 30px 50px;
  font-size: 23px;
  border-radius: 9999px;
  line-height: 1.1;
  background-image: none !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
  transition: background-color .2s ease, border-color .2s ease;
}
#show-safety-form.btn::before,
#show-safety-form.btn::after {
  content: none !important;
  display: none !important;
}
#show-safety-form.btn:hover {
  background: var(--brand-blue-hover) !important;
  border-color: var(--brand-blue-hover) !important;
}

/* Адаптив */
@media (max-width: 768px) {
  .about-top { padding: 22px 0; }
  .about-top__lead { max-width: 100%; }
  .hero--about { min-height: 70vh; }
  .hero__content { padding: 28px 16px; }
}
@media (max-width: 480px) {
  .hero__title { font-size: 26px; }
  #show-safety-form.btn { width: 100%; max-width: 320px; }
}

/* Предпочтения по анимациям */
@media (prefers-reduced-motion: reduce) {
  .hero__bg { transform: none; }
  .btn { transition: none; }
}

/* Высота фиксированного хедера, чтобы первый блок не прятался под ним */
:root {
  --header-offset: 270px;          /* подбери под фактическую высоту хедера на десктопе */
  --about-bg: #1f3c7a;             /* фон полосы ABOUT US */
  --about-text: #ffffff;
}

@media (max-width: 992px) {
  :root { --header-offset: 180px; } /* если хедер выше на мобилках */
}

/* Полоса ABOUT US сверху страницы */
.about-top {
  background: var(--about-bg);
  color: var(--about-text);
  padding-top: var(--header-offset);                          /* компенсация фиксированного хедера */
  padding-bottom: clamp(32px, 4vw + 16px, 72px);              /* сделать полосу визуально крупнее */
}

.about-top .container {
  max-width: 1600px;                                          /* читаемая ширина текста */
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;                                         /* выравнивание по центру */
}

/* Заголовок "ABOUT US" */
.about-top__title {
  margin: 0 0 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: clamp(20px, 1.2vw + 25px, 40px);                 /* крупнее */
}

/* Лид-абзац */
.about-top__lead {
  margin: 0 auto;
  font-size: clamp(18px, 0.9vw + 10px, 20px);                 /* заметно крупнее текста по умолчанию */
  line-height: 1.7;
  max-width: 1000px;                                          /* чтобы строки не растягивались слишком сильно */
  opacity: 0.95;
}