.Hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at top, #1a1a1a, #000);
}

#CodeBackground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.HeroContent {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 4rem;
}

.HeroContent h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.HeroContent h1 span {
  background: var(--accent-gradient);
  font-weight: 700;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 1px rgba(56, 154, 163, 0.3);
}

.HeroContent p {
  opacity: 0.8;
  margin-bottom: 2rem;
}

.HeroContent p span {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.Buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

button {
  border: none;
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 50px;
  cursor: pointer;
  transition: 0.3s;
}

.Primary {
  background: var(--primary);
  color: #000;
}
.Primary:hover { filter: brightness(1.2); }

.Secondary {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
}
.Secondary:hover { background: var(--accent); color: #000; }

.BackgroundLayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.Symbol {
  position: absolute;
  font-family: "Fira Code", monospace;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.28);
  user-select: none;
  font-size: 2rem;
  animation-timing-function: linear;

  filter: blur(1px);
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.06),
    0 0 12px rgba(255, 255, 255, 0.04);
}


.Symbol:nth-child(1) { left: 10%; top: 60%; }
.Symbol:nth-child(2) { left: 3%; top: 40%; }
.Symbol:nth-child(3) { left: 70%; top: 30%; }
.Symbol:nth-child(4) { left: 80%; top: 70%; }
.Symbol:nth-child(5) { left: 50%; top: 10%; }