/* Simple Hero Block */

.simple-hero {
  position: relative;
  padding: 100px 0 56px;
  background: #faf4e7;
  overflow: hidden;
}

/* Decorative blur ellipse — Figma: left 611px at 1440px frame = calc(50% - 109px) */
.simple-hero__blur {
  position: absolute;
  top: 57px;
  left: calc(50% - 109px);
  width: 233px;
  height: 233px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 230, 100, 0.55) 0%, rgba(255, 230, 80, 0.25) 55%, transparent 100%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.simple-hero .container {
  position: relative;
  z-index: 1;
}

.simple-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

/* Title */
.simple-hero__title,
.simple-hero__title * {
  color: var(--dark-main, #2D4059);
  font-family: "GT Flexa", sans-serif;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: 53px;
  letter-spacing: 0;
  text-transform: capitalize;
  text-align: center;
  margin: 0;
}

.simple-hero__title {
  max-width: 1062px;
  text-wrap: balance;
}

.simple-hero__title strong,
.simple-hero__title b {
  color: #F7761F;
}

/* Description */
.simple-hero__desc {
  color: #505869;
  font-family: "Figtree", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
  text-align: center;
  max-width: 626px;
  margin: 0;
}

/* Buttons */
.simple-hero__btns {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* ── Top graphic variant ────────────────────────────────────────────── */
.simple-hero--graphic {
  padding: 100px 140px;
  background: linear-gradient(187.084deg, rgba(245, 56, 56, 0.1) 4.8371%, rgba(253, 183, 89, 0.1) 28.164%, rgba(255, 212, 96, 0.1) 35.605%, rgba(250, 244, 231, 0.1) 92.225%);
}

.simple-hero--graphic .simple-hero__blur {
  display: none;
}

.simple-hero--graphic .simple-hero__content {
  gap: 0;
}

.simple-hero--graphic .simple-hero__title {
  margin-top: 48px;
}

.simple-hero--graphic .simple-hero__desc {
  margin-top: 24px;
}

.simple-hero--graphic .simple-hero__btns-wrap {
  margin-top: 48px;
}

.simple-hero__btns-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.simple-hero__caption {
  margin: 0;
  color: #2D4059;
  font-family: "Figtree", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: lining-nums tabular-nums;
}

/* Graphic row */
.simple-hero__graphic {
  position: relative;
  width: 487px;
  height: 136px;
}

.simple-hero__badge {
  position: absolute;
  top: 0;
  width: 136px;
  height: 136px;
  border-radius: 100px;
  background: linear-gradient(211.305deg, rgba(245, 56, 56, 0.1) 0%, rgba(255, 212, 96, 0.1) 41.667%, rgba(253, 176, 87, 0.1) 100%);
}

.simple-hero__badge--icon {
  left: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.simple-hero__badge--icon img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  display: block;
}

.simple-hero__badge--mark {
  right: 0;
}

.simple-hero__mark-bar {
  position: absolute;
  width: 24px;
  border-radius: 49px;
}

.simple-hero__mark-bar--1 {
  left: 80px;
  top: 32px;
  height: 72px;
  background: #F53838;
}

.simple-hero__mark-bar--2 {
  left: 56px;
  top: 38.86px;
  height: 65.143px;
  background: #FDA22F;
}

.simple-hero__mark-bar--3 {
  left: 32px;
  top: 49.14px;
  height: 54.858px;
  background: #FFD460;
}

.simple-hero__dashes {
  position: absolute;
  left: calc(50% + 0.5px);
  top: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 48px;
  overflow: hidden;
}

.simple-hero__dash {
  position: absolute;
  border-radius: 1px;
  animation: simple-hero-dash-flow 1.8s ease-in-out infinite;
}

.simple-hero__dash--1 {
  inset: 0% 26.79% 94.74% 1.79%;
  background: #F7761F;
  animation-delay: 0s;
}

.simple-hero__dash--2 {
  inset: 47.37% -12.5% 47.37% 41.07%;
  background: #FDA22F;
  animation-delay: 0.3s;
}

.simple-hero__dash--3 {
  inset: 94.74% 35.71% 0% -7.14%;
  background: #FFD460;
  animation-delay: 0.6s;
}

@keyframes simple-hero-dash-flow {
  0% { opacity: 0; transform: translateX(-12px); }
  15% { opacity: 1; transform: translateX(0); }
  85% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(12px); }
}

@media (prefers-reduced-motion: reduce) {
  .simple-hero__dash {
    animation: none;
    opacity: 1;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .simple-hero {
    padding: 80px 24px 48px;
  }

  .simple-hero__content {
    gap: 12px;
  }

  .simple-hero__title,
  .simple-hero__title * {
    font-size: 32px;
    line-height: 36px;
  }

  .simple-hero__desc {
    font-family: "Figtree", sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 25px;
    max-width: 100%;
  }

  .simple-hero__blur {
    top: -35px;
    right: auto;
    left: 102px;
    width: 157px;
    height: 157px;
  }

  .simple-hero__btns {
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 20px;
  }

  .simple-hero__btns .btn-main {
    width: 100%;
  }

  /* Top graphic variant — mobile */
  .simple-hero--graphic {
    padding: 48px 24px;
    background: linear-gradient(219.728deg, rgba(245, 56, 56, 0.1) 0%, rgba(255, 212, 96, 0.1) 35.315%, rgba(250, 244, 231, 0.1) 84.757%);
  }

  .simple-hero--graphic .simple-hero__title {
    margin-top: 24px;
  }

  .simple-hero--graphic .simple-hero__desc {
    margin-top: 24px;
  }

  .simple-hero--graphic .simple-hero__btns-wrap {
    margin-top: 32px;
    gap: 16px;
  }

  .simple-hero__graphic {
    width: 263px;
    height: 72px;
  }

  .simple-hero__badge--icon,
  .simple-hero__badge--mark {
    width: 72px;
    height: 72px;
  }

  .simple-hero__badge--mark {
    width: 75px;
  }

  .simple-hero__badge--icon img {
    width: 40px;
    height: 40px;
  }

  .simple-hero__mark-bar {
    width: 13.333px;
  }

  .simple-hero__mark-bar--1 {
    left: 42.67px;
    top: 16px;
    height: 40px;
  }

  .simple-hero__mark-bar--2 {
    left: 29.33px;
    top: 19.81px;
    height: 36.191px;
  }

  .simple-hero__mark-bar--3 {
    left: 16px;
    top: 25.52px;
    height: 30.476px;
  }

  .simple-hero__dashes {
    left: calc(50% - 1.5px);
    top: calc(50% - 0.33px);
    width: 110px;
    height: 29.333px;
  }
}