/* Дополнительные эффекты для hero: мягкий «свет», сетка точек и «лучики» */
.hero{
  position:relative; overflow:hidden;
}
.hero__glow{
  position:absolute; inset:-10% -10% auto -10%;
  height:60%; pointer-events:none; filter:blur(50px) saturate(120%);
  background:
    radial-gradient(500px 300px at 20% 0%, rgba(255,213,77,.20), transparent 60%),
    radial-gradient(600px 350px at 80% 10%, rgba(56,230,182,.16), transparent 60%);
  mix-blend-mode: screen; opacity:.7;
}
.hero__mesh{
  position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.7) 30%, transparent 31%),
    radial-gradient(1px 1px at 40% 10%, rgba(255,255,255,.7) 30%, transparent 31%),
    radial-gradient(1px 1px at 80% 30%, rgba(255,255,255,.7) 30%, transparent 31%),
    radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,.7) 30%, transparent 31%),
    radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,.7) 30%, transparent 31%);
  animation: cs-mesh-float 12s ease-in-out infinite alternate;
}
@keyframes cs-mesh-float{
  from{ transform: translateY(-6px) }
  to{   transform: translateY(6px)  }
}
/* Canvas для соединяющихся «лучиков» */
.hero__canvas{
  position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.32;
}
.hero .container{ position:relative; z-index:1 } /* контент поверх эффектов */

/* Предпочтение пользователем «меньше анимации» */
@media (prefers-reduced-motion: reduce){
  .hero__mesh{ animation: none }
}