/* =========================================
   PRICE COMPARISON SECTION
========================================= */

.comparison-section {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(19, 140, 255, 0.08),
      transparent 45%
    );
}


/* IMAGE CONTAINER */

.comparison-image-wrapper {
  max-width: 1150px;
  margin: 0 auto;

  position: relative;

  padding: 4px;

  border-radius: 26px;

  background:
    linear-gradient(
      135deg,
      rgba(19, 140, 255, 0.8),
      rgba(139, 92, 246, 0.5),
      rgba(255, 47, 146, 0.8)
    );

  box-shadow:
    0 20px 70px rgba(0, 0, 0, 0.45),
    0 0 60px rgba(19, 140, 255, 0.12);
}


/* NEON GLOW */

.comparison-glow {
  position: absolute;

  width: 70%;
  height: 70%;

  top: 15%;
  left: 15%;

  background:
    rgba(56, 100, 255, 0.18);

  filter: blur(100px);

  z-index: -1;
}


/* POSTER IMAGE */

.comparison-image {
  width: 100%;
  height: auto;

  display: block;

  border-radius: 23px;

  background: #050817;
}


/* PRICE SUMMARY */

.comparison-summary {
  max-width: 800px;

  margin: 35px auto 0;
  padding: 25px 30px;

  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items: center;

  gap: 25px;

  border:
    1px solid rgba(101, 199, 255, 0.2);

  border-radius: 20px;

  background:
    rgba(8, 12, 31, 0.8);

  backdrop-filter:
    blur(15px);
}


/* STAT BOX */

.comparison-stat {
  text-align: center;
}


.stat-label {
  display: block;

  margin-bottom: 5px;

  color: var(--muted);

  font-size: 0.8rem;
  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.08em;
}


.comparison-stat strong {
  color: #fff;

  font-size:
    clamp(1.8rem, 4vw, 2.8rem);

  line-height: 1;
}


.comparison-stat strong small {
  color: var(--muted);

  font-size: 0.85rem;
}


/* FEATURED PRICE */

.comparison-stat.featured strong {
  color: var(--yellow);

  text-shadow:
    0 0 25px
    rgba(255, 212, 0, 0.2);
}


/* VS */

.comparison-vs {
  width: 50px;
  height: 50px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: #fff;

  background:
    linear-gradient(
      135deg,
      var(--blue),
      var(--pink)
    );

  font-size: 0.9rem;
  font-weight: 900;

  box-shadow:
    0 0 25px
    rgba(139, 92, 246, 0.35);
}


/* CTA AREA */

.comparison-action {
  margin-top: 30px;

  text-align: center;
}


.comparison-disclaimer {
  max-width: 750px;

  margin:
    18px auto 0;

  color: #6f7692;

  font-size: 0.75rem;

  line-height: 1.6;
}


/* MOBILE */

@media (max-width: 700px) {

  .comparison-image-wrapper {
    border-radius: 17px;

    padding: 2px;
  }


  .comparison-image {
    border-radius: 15px;
  }


  .comparison-summary {
    grid-template-columns: 1fr;

    gap: 15px;

    padding: 22px;
  }


  .comparison-vs {
    margin: 0 auto;
  }


  .comparison-action .btn {
    width: 100%;
  }

}