/* ADS.CSS - OVERRIDES PAGINA ADS / PROMO */

/* Background più “performance” */
.service-detail{
  padding-top: 120px;
  padding-bottom: 70px;

  background:
    radial-gradient(circle at 15% 10%, rgba(0,156,222,0.22), transparent 55%),
    radial-gradient(circle at 80% 25%, rgba(0,48,135,0.28), transparent 60%),
    linear-gradient(180deg, rgba(1,33,105,0.18), rgba(0,0,0,0));
}

.service-detail .container{
  max-width: 980px;
}

/* Tutto bianco, leggibile */
.service-detail,
.service-detail *{
  color: #ffffff;
}

.service-detail h2{
  text-align: center;
  margin-bottom: 1.2rem;
  text-shadow: 0 12px 45px rgba(0,0,0,0.55);
}

/* Paragrafo “centrato” e più bello */
.service-detail p{
  opacity: 0.92;
  font-size: 1.05rem;
  line-height: 1.9;
  max-width: 860px;
  margin: 0 auto 1.8rem auto;
  text-align: center;
}

/* Box KPI (senza cambiare HTML: li crei come <div class="kpi-row">... ) */
.kpi-row{
  max-width: 860px;
  margin: 1.6rem auto 2.2rem auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.kpi{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(0,156,222,0.35);
  border-radius: 16px;
  padding: 14px 14px;
  text-align: center;
  box-shadow: 0 14px 35px rgba(0,0,0,0.40);
}

.kpi .num{
  display:block;
  font-size: 1.15rem;
  color: #009CDE; /* PayPal cerulean */
  margin-bottom: 6px;
}

.kpi .lbl{
  display:block;
  font-size: 0.85rem;
  opacity: 0.9;
}

/* Lista: trasformiamola in “feature cards” */
.service-detail ul{
  max-width: 860px;
  margin: 2rem auto;
  padding: 0;
}

.service-detail li{
  list-style: none;
  position: relative;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(0,156,222,0.35);
  border-radius: 18px;

  padding: 1rem 1rem 1rem 3rem;
  margin-bottom: 0.9rem;

  box-shadow: 0 16px 40px rgba(0,0,0,0.40);
}

.service-detail li::before{
  content: "✦";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #009CDE;
  font-size: 1.25rem;
}

/* CTA più “aggressiva” */
.service-detail .cta-btn{
  display: inline-block;
  padding: 1.1rem 2.6rem;
  border-radius: 999px;
  background: linear-gradient(45deg, #003087, #009CDE);
  color: #fff;
  box-shadow: 0 18px 45px rgba(0,0,0,0.45);
}

.service-detail .cta-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 55px rgba(0,0,0,0.55), 0 0 55px rgba(0,156,222,0.18);
}

/* Mobile */
@media (max-width: 768px){
  .service-detail{ padding-top: 110px; }
  .service-detail p{ text-align: left; }
  .kpi-row{ grid-template-columns: 1fr; }
}