body {
    font-family: "Roboto", sans-serif;
    background: linear-gradient(135deg, rgb(147, 51, 234) 0%, rgb(79, 70, 229) 50%, rgb(34, 197, 238) 100%);
    color: #fff;
    margin: 0;
}

.section.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgb(147, 51, 234) 0%, rgb(79, 70, 229) 50%, rgb(34, 197, 238) 100%);
  padding: 16px;
}

.section.hero .blur-circle {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  filter: blur(3xl);
}

.section.left-column-text {
  grid-column: span 2 / span 2;
}

.inline-flex.items-center.gap-2.rounded-full.border.border-white\/30.bg-white\/10.px-4.py-2.text-xs.font-semibold.uppercase.text-white {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.1);
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #fff;
}

.section.right-column-modules {
  grid-column: span 3 / span 3;
}
.relative {
  position: relative; 
  overflow: hidden;
  background: linear-gradient(135deg, rgb(147, 51, 234) 0%, rgb(79, 70, 229) 50%, rgb(34, 197, 238) 100%);
  padding: 16px;
  z-index: 10;

}

.absolute {
  position: absolute;
  inset-block-start: -32px;  
  inset-inline-end: -32px;
  block-size: 96px;
  inline-size: 96px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  filter: blur(3xl);
}

.lg:col-span-2 {
  grid-column: span 2 / span 2;

}