/* React Bits Dot Color Bends background — from landingnew/Hero/Hero.css */

.ln-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #120f17;
}

.ln-hero-band {
  position: absolute;
  mix-blend-mode: screen;
  bottom: 0;
  left: 0;
  right: 0;
  height: 150%;
  pointer-events: none;
  z-index: 1;
}

.ln-hero-bottom-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 2;
}

.ln-dot-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.ln-dot-field canvas,
.ln-dot-field svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ln-hero[data-theme="light"] {
  background: #fff;
}

.ln-hero[data-theme="light"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 38%;
  background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.28) 30%, #fff 100%);
  pointer-events: none;
}

.ln-hero[data-theme="light"] .ln-hero-band {
  mix-blend-mode: normal;
  opacity: 0.88;
}

.ln-hero[data-theme="light"] .ln-hero-bottom-fade {
  display: none;
}

.ln-hero[data-theme="light"] .ln-dot-field-glow {
  display: none;
}