.lahor-hero{
  position: relative;
  overflow: hidden;

  padding: clamp(120px, 12vw, 180px) 24px
           clamp(80px, 8vw, 120px);

  text-align: center;

  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(167,219,216,.45),
      transparent 40%
    ),
    radial-gradient(
      circle at 85% 75%,
      rgba(84,61,130,.08),
      transparent 35%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #faf8f4 100%
    );
}

/* Decorative orbs */
.lahor-hero::before,
.lahor-hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}

.lahor-hero::before{
  width:420px;
  height:420px;

  top:-120px;
  left:-120px;

  background: var(--teal);
  opacity:.18;

  filter: blur(120px);
}

.lahor-hero::after{
  width:520px;
  height:520px;

  right:-180px;
  bottom:-180px;

  background: rgba(84,61,130,.08);

  filter: blur(140px);
}

.lahor-hero__inner{
  position: relative;
  z-index: 2;

  max-width: 860px;
  margin: 0 auto;
}

/* Badge */
.lahor-hero__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:8px 14px;

  border-radius:999px;

  background: rgba(167,219,216,.18);
  border:1px solid rgba(84,61,130,.08);

  color: var(--purple);

  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;

  margin-bottom:24px;
}

/* Title */
.lahor-hero__title{
  font-family:"Literata", serif;

  font-size: clamp(42px, 6vw, 72px);
  font-weight:600;
  line-height:1.02;

  letter-spacing:-0.05em;

  color: var(--text-primary);

  margin-bottom:24px;
}

/* Subtitle */
.lahor-hero__subtitle{
  max-width:700px;

  margin:0 auto;

  font-size:18px;
  line-height:1.9;

  color: var(--text-muted);
}

/* Mobile */
@media (max-width: 768px){

  .lahor-hero{
    padding: 110px 20px 70px;
  }

  .lahor-hero__subtitle{
    font-size:16px;
    line-height:1.8;
  }

  .lahor-hero::before{
    width:280px;
    height:280px;
  }

  .lahor-hero::after{
    width:320px;
    height:320px;
  }
}
