.circular-hero-banner {
  background-image: url("https://storage.googleapis.com/content.ezadtv.com/2026/03/30/optimized_69caa406a15cb_art-banner.webp");
}
.business-value-banner {
  background-image: url("https://storage.googleapis.com/content.ezadtv.com/2026/03/30/optimized_69cae470b7d8f_frame.webp");
}
.bg-circuar-features {
  background-position: center;
  background-image: url("https://storage.googleapis.com/content.ezadtv.com/2026/03/31/optimized_69cbfebb6f757_curve.webp");
}
.use-cases-banner {
  background-image: url("https://storage.googleapis.com/content.ezadtv.com/2026/04/01/69cd457d5577f_UseCasesBanner.webp");
}
.key-features--card {
  background:
    linear-gradient(
      90deg,
      rgba(248, 248, 250, 0.7) 0%,
      rgba(237, 237, 237, 0.9) 100%
    ),
    #fff;
  box-shadow: 0 2px 40px 5px rgba(6, 14, 26, 0.05);
}

.key-features--card:hover .key-features--card-body {
  background: linear-gradient(90deg, #229bbb 0%, #0d475c 100%);
  color: var(--bs-white);
  clip-path: polygon(
    0% 12.5%,
    6% 10.2%,
    12% 8.4%,
    17.7% 7.1%,
    23.4% 6.2%,
    28.8% 5.8%,
    33.8% 5.8%,
    38.6% 6.3%,
    42.9% 7.1%,
    46.7% 8.4%,
    50% 10%,
    53.3% 12.4%,
    57.1% 14.3%,
    61.4% 15.7%,
    66.2% 16.5%,
    71.3% 16.8%,
    76.6% 16.5%,
    82.3% 15.7%,
    88.1% 14.3%,
    94% 12.4%,
    100% 10%,
    100% 100%,
    0% 100%
  );
}

/* Marker dots — positioned on the curve path */
.hiw-marker {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #c2cbd4;
  box-shadow: 0 0 0 4px white;
  position: absolute;
  z-index: 2;
}
.hiw-marker-1 {
  left: 5%;
  top: 76%;
}
.hiw-marker-2 {
  left: 46%;
  top: 40%;
}
.hiw-marker-3 {
  left: 70%;
  top: 12%;
}
/* Watermark step numbers */
.hiw-step-num {
  color: var(--bs-gray-900);
  font-size: 150px;
}
.card--use-cases {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.02) 6.17%,
    rgba(255, 255, 255, 0.01) 93.83%
  );
  box-shadow:
    3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.5) inset,
    2px 2px 1px -2px #666 inset,
    -2px -2px 1px -2px #666 inset,
    0 0 0 1px #a6a6a6 inset;
  backdrop-filter: blur(6px);
}

.card--use-cases {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.card--use-cases:hover {
  transform: translateY(-6px);
  box-shadow:
    3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.5) inset,
    2px 2px 1px -2px #666 inset,
    -2px -2px 1px -2px #666 inset,
    0 0 0 1px #548ec1 inset,
    0 12px 24px rgba(84, 142, 193, 0.2);
}
.card--use-cases .number {
  color: #548ec1;
}
.circular-pricing .pricing-wrapper {
  background-color: #eafcff;
}
.circular-pricing .pricing-card-header {
  transition: background 0.25s ease, padding-bottom 0.25s ease;
}
.circular-pricing .pricing-card-wave {
  bottom: -1px;
}
.circular-pricing .pricing-arrow-path {
  transition: fill 0.25s ease;
}
/* Pricing card hover */
.circular-pricing .pricing-card {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  transition: box-shadow 0.25s ease;
}
.circular-pricing .pricing-card:hover {
  box-shadow: 0 0 12px rgba(34, 155, 187, 0.3), 0 0 30px rgba(34, 155, 187, 0.15), 0 0 60px rgba(34, 155, 187, 0.08);
}
.circular-pricing .pricing-card:hover .pricing-card-header {
  background: linear-gradient(90deg, #229bbb 0%, #0d475c 100%);
  padding-bottom: 3rem;
}
.circular-pricing .pricing-card:hover .pricing-card-title {
  color: #fff;
}
.circular-pricing .pricing-card:hover .pricing-arrow-path {
  fill: #fff;
}
/* How It Works — SVG line draw animation */
.svg-line-art .hiw-line-path {
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  transition: stroke-dashoffset 2s ease-in-out;
}
.svg-line-art.animate .hiw-line-path {
  stroke-dashoffset: 0;
}
/* Pricing arrow animation */
.pricing-arrow-svg {
  transform: scaleX(0);
  transition: transform 0.8s ease-out;
}
.circular-pricing.animate .pricing-arrow-svg {
  transform: scaleX(1);
}
.mobile-circular-get-started-banner {
  background-image: url("https://storage.googleapis.com/content.ezadtv.com/2026/03/31/optimized_69cbf570555aa_mobile-circular-banner.webp");
}

@media (max-width: 1600px) {
  .bg-circuar-features {
    background-color: #eafcff;
  }
}

/* Step number flip animation — below xl only */
@media (max-width: 1199.98px) {
  .hiw-step-num {
    display: inline-block;
    perspective: 400px;
  }
  .how-it-works .hiw-step-num {
    opacity: 0;
    transform: rotateX(90deg);
    transform-origin: center bottom;
    transition:
      opacity 0.5s ease,
      transform 0.6s cubic-bezier(0.17, 0.67, 0.35, 1.35);
  }
  .how-it-works.animate .hiw-step-num {
    opacity: 1;
    transform: rotateX(0deg);
    color: var(--bs-primary);
  }
  .how-it-works.animate .col-xl-4:nth-child(2) .hiw-step-num {
    transition-delay: 0.3s;
  }
  .how-it-works.animate .col-xl-4:nth-child(3) .hiw-step-num {
    transition-delay: 0.6s;
  }
}

/* How It Works */
@media (min-width: 992px) {
  .hiw-steps {
    position: relative;
    z-index: 1;
    min-height: 750px;
  }
  .bg-circuar-features {
    clip-path: polygon(50% 5%, 100% 0, 100% 100%, 0 100%, 0 0);
  }
  .bg-circuar-features {
    background-position: unset;
  }
  .circular-pricing .pricing-wrapper {
    clip-path: polygon(0 0, 50% 11%, 100% 0, 100% 80%, 49% 100%, 0 80%);
  }
}

@media (min-width: 1199.98px) {
  .svg-line-art {
    width: 900px;
    top: 38px;
    left: -60px;
  }
  .hiw-circle::after {
    position: absolute;
    content: "";
    top: -30px;
    left: -82px;
    border-radius: 1rem;
    padding: 1.25rem;
    background: rgba(34, 211, 238, 0.1);
    border-radius: 50%;
    width: 460px;
    height: 460px;
    padding: 20px;
  }
}

@media (min-width: 1399.98px) {
  .svg-line-art {
    width: 1000px;
    top: 0;
    left: 49px;
  }
}

@media (min-width: 1600px) {
  .svg-line-art {
    width: 1100px;
    top: 0;
    left: 131px;
  }
}

@media (min-width: 1800px) {
  .svg-line-art {
    width: 1234px;
    left: 141px;
    top: -19px;
  }
}