.hapo-seo-service-pricing {
  --hapo-pricing-green: #00c968;
  --hapo-pricing-ink: #09090b;
  --hapo-pricing-muted: #6f6f6f;
  width: 100%;
  padding: 128px 32px;
  background: radial-gradient(ellipse 34% 28% at 87% 7%, rgb(210 248 225 / 52%), transparent 100%), radial-gradient(ellipse 31% 24% at 5% 48%, rgb(230 249 237 / 64%), transparent 100%), radial-gradient(ellipse 35% 26% at 95% 88%, rgb(255 247 223 / 53%), transparent 100%), linear-gradient(150deg, #fafcfb, #f7f9f8 55%, #fbfcf9);
  color: var(--hapo-pricing-ink);
  font-family: "Manrope", sans-serif;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hapo-seo-service-pricing__background {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hapo-seo-service-pricing__shape {
  --hapo-shape-opacity: .38;
  fill: none;
  stroke: #70cf9c;
  stroke-width: 2.5;
  stroke-linejoin: round;
  opacity: var(--hapo-shape-opacity);
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  animation: hapo-pricing-shape-draw 18s ease-in-out infinite;
  animation-delay: calc(var(--hapo-shape-index) * -1.65s);
}

.hapo-seo-service-pricing__shape--warm { --hapo-shape-opacity: .28; stroke: #e4cf8d; }

@keyframes hapo-pricing-shape-draw {
  0%, 8% { stroke-dashoffset: 100; opacity: 0; }
  28%, 68% { stroke-dashoffset: 0; opacity: var(--hapo-shape-opacity); }
  82%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

.hapo-seo-service-pricing--width-full {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
}

.hapo-seo-service-pricing__header {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto 60px;
  text-align: center;
}

.hapo-seo-service-pricing__header h2,
.hapo-seo-service-pricing__header h3 {
  margin: 0;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1.2;
  text-transform: uppercase;
}

.hapo-seo-service-pricing__title-line {
  display: block;
  width: 150px;
  height: 4px;
  margin: 26px auto 28px;
  background: var(--hapo-pricing-green);
}

.hapo-seo-service-pricing__header p {
  margin: 0;
  color: #1d1d1d;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
}

.hapo-seo-service-pricing__grid {
  position: relative;
  z-index: 1;
  display: grid;
  max-width: 1450px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  margin: 0 auto;
}

.hapo-seo-service-pricing__card {
  display: flex;
  min-height: 750px;
  flex-direction: column;
  padding: 38px 30px 30px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 28px rgb(9 9 11 / 7%);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}

@media (hover: hover) and (pointer: fine) {
  .hapo-seo-service-pricing__card:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 42px rgb(9 9 11 / 13%);
  }
}

.hapo-seo-service-pricing__card:focus-within {
  box-shadow: 0 22px 42px rgb(9 9 11 / 13%);
}

.hapo-seo-service-pricing__card-header {
  min-height: 164px;
  text-align: center;
}

.hapo-seo-service-pricing__icon {
  display: block;
  width: 90px;
  height: 90px;
  margin: 0 auto 17px;
  object-fit: contain;
}

.hapo-seo-service-pricing__card h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.72px;
  line-height: 1.2;
}

.hapo-seo-service-pricing__summary {
  margin: 12px 0 0;
  color: var(--hapo-pricing-muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}

.hapo-seo-service-pricing__divider {
  height: 1px;
  margin: 23px 0;
  background: #e8e8e8;
}

.hapo-seo-service-pricing__content {
  flex: 1 1 auto;
}

.hapo-seo-service-pricing__description {
  margin: 0;
  color: #292929;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.42;
}

.hapo-seo-service-pricing__features {
  display: grid;
  gap: 12px;
  margin: 26px 0 24px;
  padding: 0;
  list-style: none;
}

.hapo-seo-service-pricing__feature {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: #252525;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.hapo-seo-service-pricing__check {
  display: grid;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  place-items: center;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--hapo-pricing-green);
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.hapo-seo-service-pricing__cta {
  width: 100%;
  min-height: 51px;
  margin-top: auto;
  border-radius: 999px;
  background: linear-gradient(90deg, #12d67a, #00ae5d);
  font-size: 15px;
  font-weight: 700;
}

.hapo-seo-service-pricing__cta--inactive {
  cursor: default;
  opacity: 1;
}

@media (max-width: 1100px) {
  .hapo-seo-service-pricing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .hapo-seo-service-pricing {
    padding: 70px 16px;
  }

  .hapo-seo-service-pricing__header {
    margin-bottom: 36px;
  }

  .hapo-seo-service-pricing__header h2,
  .hapo-seo-service-pricing__header h3 {
    font-size: 30px;
    letter-spacing: -.9px;
  }

  .hapo-seo-service-pricing__title-line {
    width: 110px;
    margin: 18px auto 20px;
  }

  .hapo-seo-service-pricing__header p {
    font-size: 15px;
  }

  .hapo-seo-service-pricing__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .hapo-seo-service-pricing__card {
    min-height: 0;
    padding: 30px 22px 22px;
  }

  .hapo-seo-service-pricing__card-header {
    min-height: 0;
  }

  .hapo-seo-service-pricing__description,
  .hapo-seo-service-pricing__feature {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hapo-seo-service-pricing__cta,
  .hapo-seo-service-pricing__card {
    transition: none;
  }

  .hapo-seo-service-pricing__card:hover {
    transform: none;
  }

  .hapo-seo-service-pricing__shape {
    animation: none;
    stroke-dashoffset: 0;
    opacity: .24;
  }
}