/* Задача 14 (переработано 03.10.2026): «О нас» должно быть видно сразу, без прокрутки.
   Дизайн НЕ меняется — уменьшены только расстояния между блоком с большим логотипом/кнопками
   (hero) и строкой «О нас». Вчерашние растяжка hero на весь экран и градиент убраны.
   На узком экране, если «О нас» всё же не помещается, показывается маленькая стрелка «листайте вниз»
   (её включает скрипт рядом с разметкой — .hero-scroll-hint.visible). */
/* 03.10 (вечер): вчерашних уменьшений не хватило — верхний отступ hero был 100px, между элементами по 20–30px,
   а заголовок «О нас» имел высокую строку. Сжимаем только расстояния, шрифты и дизайн не трогаем. */
.hero { padding: 28px 0 14px !important; }
.hero .online-counter-row { margin: 0 0 10px; }
.hero h1 { margin-bottom: 8px !important; }
.hero .container > p:not(.hero-tagline) { margin-bottom: 14px !important; }
.hero .hero-cta-row { margin-top: 8px; }
p.hero-tagline { margin-top: 6px !important; }
#about.about-section { padding-top: 0; padding-bottom: 20px; }
#about.about-section .section-title:after { margin: 6px auto 4px; }
#about.about-section .section-title { margin-top: 8px; margin-bottom: 12px; line-height: 1.2; }

@media (max-width: 640px) {
  .hero { padding: 14px 0 10px !important; }
  .hero .online-counter-row { margin: 0 0 6px; }
  .hero h1 { margin-bottom: 6px !important; }
  .hero .container > p:not(.hero-tagline) { margin-bottom: 10px !important; }
  p.hero-tagline { margin-top: 4px !important; }
}

/* Стрелка-подсказка (по умолчанию скрыта; видна, только если «О нас» ниже границы экрана). */
.hero-scroll-hint {
  display: none;
  position: absolute; left: 50%; bottom: 2px; z-index: 2;
  width: 40px; height: 28px; margin-left: -20px;
  align-items: center; justify-content: center;
  color: #ffffff; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hero-scroll-hint.visible { display: flex; }
.hero-scroll-hint span {
  display: block; width: 12px; height: 12px;
  border-right: 3px solid currentColor; border-bottom: 3px solid currentColor;
  transform: rotate(45deg); animation: heroHintBob 1.8s ease-in-out infinite;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.7));
}
@keyframes heroHintBob {
  0%, 100% { transform: translateY(0) rotate(45deg); opacity: .9; }
  50%      { transform: translateY(5px) rotate(45deg); opacity: .4; }
}
@media (prefers-reduced-motion: reduce) { .hero-scroll-hint span { animation: none; } }