/* ============================================================
   OUR PROCESS — CSS SOLO EXTRA (non API)
   ============================================================ */

/* line: estetica + “posizione visiva” (transform) */
.process__line{
  height:2px;
  background:rgba(59,130,246,.28);
  border-radius:9999px;
  opacity:.9;
  transform: translateY(54px);
}

/* card: SOLO glass/animazioni (bg/padding/radius/border sono inline API) */
.process__card{
  transform: translateY(42px);

  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);

  box-shadow:
    0 24px 70px rgba(15,23,42,.20),
    0 1px 0 rgba(255,255,255,.72) inset;

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* contenuto sempre sopra */
.process__card > *{
  position: relative;
  z-index: 2;
}

/* highlight + base scura (dietro al testo) */
.process__card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;

  background:
    radial-gradient(260px 90px at 20% 18%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%),
    radial-gradient(260px 90px at 80% 18%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0) 45%, rgba(15,23,42,.18) 100%);
  opacity:.40;
}

/* barra blu corta (pseudo) */
.process__card::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:14px;
  width:min(64%, 240px);
  height:3px;
  transform: translateX(-50%);
  background:rgba(59,130,246,.88);
  border-radius:9999px;
  box-shadow:0 14px 26px rgba(59,130,246,.16);
  pointer-events:none;
  z-index:1;
}

.process__card:hover{
  transform: translateY(40px);
  box-shadow:
    0 30px 85px rgba(15,23,42,.24),
    0 1px 0 rgba(255,255,255,.74) inset;
  border-color: rgba(59,130,246,.16);
}

/* Responsive (grid-template-columns non è in API, quindi resta qui o inline) */
@media (max-width: 980px){
  .process{ margin-bottom:0 !important; } /* qui serve perché su mobile togli overlap */
  .process__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
  .process__line{ display:none; }
  .process__card{ transform:none; }
  .process__card:hover{ transform:none; }
}

@media (max-width: 560px){
  .process__grid{ grid-template-columns:1fr !important; }
}