.hero {
  position: relative;
  overflow: hidden;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(10px);
  pointer-events: none;
}

.hero::before {
  width: 600px;
  height: 600px;
  left: -160px;
  top: -220px;
  background: radial-gradient(
    circle,
    rgba(208, 47, 103, 0.18) 0%,
    rgba(208, 47, 103, 0) 60%
  );
}

.hero::after {
  width: 540px;
  height: 540px;
  right: -140px;
  top: -160px;
  background: radial-gradient(
    circle,
    rgba(103, 130, 163, 0.16) 0%,
    rgba(103, 130, 163, 0) 62%
  );
}

.hero p.lead {
  max-width: 760px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.8;
}

.hero p.slogan {
  margin: 16px 0 0;
  font-size: 18px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.92);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.map-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  height: 150px;
  padding: 12px;
  border-radius: 18px;
  background: #07111b;
}

.cell {
  border-radius: 14px;
}

.c1 {
  background: #1a2a3c;
}

.c2 {
  background: #2f4866;
}

.c3 {
  background: rgba(208, 47, 103, 0.5);
}

.c4 {
  background: rgba(255, 255, 255, 0.1);
}

.c5 {
  grid-column: span 2;
  background: rgba(255, 255, 255, 0.1);
}

.c6 {
  background: rgba(208, 47, 103, 0.3);
}

.c7 {
  background: #2f4866;
}