/* Основная секция первого экрана */
.hero-section {
  min-height: 100vh;
  width: 100vw;
  background: radial-gradient(circle at 50% 50%,
      rgba(4, 4, 18, 0.95) 0%,
      rgba(2, 2, 8, 0.98) 100%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Стили для canvas частиц */
.canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

/* Сетка заднего фона (первый слой) */
.hero-section::before {
  content: '';
  position: fixed;
  inset: 0;
  background: 
      linear-gradient(to right, transparent 49.5%, var(--primary-blue) 49.5%, var(--primary-blue) 50.5%, transparent 50.5%),
      linear-gradient(to bottom, transparent 49.5%, var(--primary-blue) 49.5%, var(--primary-blue) 50.5%, transparent 50.5%);
  background-size: 40px 40px;
  opacity: 0.07;
  z-index: -1;
  animation: gridMove 20s linear infinite;
}

/* Точки заднего фона (второй слой) */
.hero-section::after {
  content: '';
  position: fixed;
  inset: 0;
  background: 
      radial-gradient(circle at 50% 50%, var(--primary-blue) 2%, transparent 6%);
  background-size: 60px 60px;
  opacity: 0.05;
  z-index: -1;
  animation: nodesPulse 4s ease-in-out infinite;
}

/* Анимация движения сетки */
@keyframes gridMove {
  0% {
      transform: perspective(500px) rotateX(45deg) translateY(-50%);
  }
  100% {
      transform: perspective(500px) rotateX(45deg) translateY(0%);
  }
}

/* Анимация пульсации точек */
@keyframes nodesPulse {
  0%, 100% {
      opacity: 0.05;
      transform: scale(1);
  }
  50% {
      opacity: 0.08;
      transform: scale(1.1);
  }
}

/* Контейнер для анимированных линий */
.network-lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.1;
  filter: blur(1px);
  overflow: hidden;
}

/* Отдельная анимированная линия */
.network-line {
  position: absolute;
  background: linear-gradient(90deg, transparent, var(--secondary-blue), transparent);
  height: 1px;
  width: 100px;
  opacity: 0;
  animation: networkFlow 3s linear infinite;
}

/* Анимация движения линий */
@keyframes networkFlow {
  0% {
      transform: translateX(-100%) translateY(-100%);
      opacity: 0;
  }
  50% {
      opacity: 1;
  }
  100% {
      transform: translateX(100%) translateY(100%);
      opacity: 0;
  }
}

/* Главный заголовок "GENERO" */
.hero-title {
  font-size: clamp(3rem, 11vw, 8rem);
  font-weight: 800;
  background: linear-gradient(90deg, #ffffff, var(--secondary-blue));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s infinite linear;
  will-change: background-position;
}

.hero-content .hero-title {
  margin-top: -1rem !important;
  margin-bottom: -1rem !important;
}

/* Для подстраховки можно чуть уменьшить отступы у p и кнопки */
.hero-content .fs-2 {
  margin-bottom: 2rem !important; /* вместо mb-4 */
}
.hero-content .hero-btn {
  margin-top: -1rem !important;   /* если надо ещё ближе к заголовку */
}

/* Анимация мягкого свечения */
@keyframes softPulse {
  0% {
      box-shadow: 0 0 10px rgba(0, 183, 255, 0.2);
  }
  50% {
      box-shadow: 0 0 20px rgba(0, 183, 255, 0.4);
  }
  100% {
      box-shadow: 0 0 10px rgba(0, 183, 255, 0.2);
  }
}

/* Кнопка "Что такое GENERO" */
.hero-btn {
  background: transparent;
  border: 2px solid var(--primary-blue);
  color: var(--primary-blue);
  padding: 1rem 3rem;
  font-size: 1.2rem;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  animation: softPulse 2s infinite ease-in-out;
  transition: all 0.4s ease;
  will-change: transform, box-shadow;
}

/* Эффект при наведении на кнопку */
.hero-btn:hover {
  animation: none;
  background: rgba(0, 183, 255, 0.1);
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(0, 183, 255, 0.3);
}

/* Эффект свечения для кнопки */
.hero-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(0, 183, 255, 0.2), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
  will-change: transform;
}

/* Анимация свечения при наведении */
.hero-btn:hover::before {
  transform: translateX(100%);
}

/* Контейнер для плавного скролла */
#scroll-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

/* Контент для плавного скролла */
.scroll-content {
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* Контейнер для particles.js */
#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* -------- Мобильная версия (до 768px) -------- */
@media (max-width: 768px) {
  .hero-content .hero-title {
    margin-top: -1rem !important;
    margin-bottom: 0rem !important;
  }
}

#main {
  position: relative;
  z-index: 5;
  background: radial-gradient(circle at 50% 50%,
      rgba(4, 4, 18, 0.95) 0%,
      rgba(2, 2, 8, 0.98) 100%);
  padding-top: 5rem; /* Увеличиваем отступ сверху */
}