/* ============================================================
   COMPANY DUO — EXTRA ONLY (non API)
   ============================================================ */

/* stripe dietro */
.company-duo__stripe{
  background: var(--dark-blue);
}

/* card: pulita, no glass */
.company-duo__card{
  box-shadow: 0 30px 85px rgba(59,130,246,.25);
  transition: transform .18s ease, box-shadow .18s ease;
}
.company-duo__card:hover{
  transform: translateY(-2px);
  box-shadow: 0 34px 95px rgba(15,23,42,.18);
}

/* ============================================================
   CERCHI centrali — 5 layer (a,b,c,d,e) + più visibili
   ============================================================ */

.company-duo__venn{
  position: relative;
  width: 380px;
  height: 220px;
  margin: -120px auto 0 auto;
  pointer-events: none;
  z-index: 6;
}

.company-duo__circle{
  position:absolute;
  width: 160px;
  height: 160px;
  border-radius: 9999px;

  /* più leggibili (stacco su bianco + stripe) */
  background:
    radial-gradient(60% 60% at 35% 30%, rgba(255,255,255,.70), rgba(255,255,255,0) 62%),
    radial-gradient(95% 95% at 50% 75%, rgba(13, 52, 116, 0.32), rgba(13, 52, 116,.20) 55%, rgba(13, 52, 116,.10) 100%);

  opacity: .9;
  box-shadow: 0 22px 65px rgba(59,130,246,.22);
  filter: blur(.25px);
  mix-blend-mode: multiply; /* se ti altera troppo: rimuovi */
}


.company-duo__circle--c {
  background:
    radial-gradient(60% 60% at 35% 30%, rgba(255,255,255,.70), rgba(255,255,255,0) 62%),
    radial-gradient(95% 95% at 50% 75%, rgba(59,130,246,.62), rgba(59,130,246,.60) 55%, rgba(59,130,246,.40) 100%);
}

/* 2 sopra */
.company-duo__circle--a{ left: 64px;  top: 6px;  opacity:.78; }
.company-duo__circle--b{ left: 156px; top: 6px;  opacity:.72; }

/* 1 centro */
.company-duo__circle--c{ left: 110px; top: 40px; opacity:.88; transform: scale(1.02); }

/* 2 sotto */
.company-duo__circle--d{ left: 64px;  top: 82px; opacity:.68; }
.company-duo__circle--e{ left: 156px; top: 82px; opacity:.64; }

/* responsive */
@media (max-width: 980px){
  .company-duo__grid{ grid-template-columns: 1fr !important; }
  .company-duo__stripe{ top: 200px !important; height: 300px !important; }
  .company-duo__venn{ margin-top: -70px; }
}

@media (max-width: 720px){

  /* griglia -> 1 colonna */
  .company-duo__grid{
    grid-template-columns: 1fr !important;
  }

  /* card un po’ più alta “respirata” */
  .company-duo__card{
    min-height: 0 !important;
  }

  /* layout interno: NO wrap strano */
  .company-duo__card-inner{
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
  }

  /* immagine: non deve “dominare” e non deve uscire */
  .company-duo__img{
    width: 160px !important;
    height: 160px !important;
    flex: 0 0 160px !important;
    margin: 0 !important;
  }

  /* testo: prende lo spazio rimanente e non si schiaccia */
  .company-duo__card-inner > div:not(.company-duo__img){
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* in caso il tuo testo abbia max-width inline (tipo 380px) */
  .company-duo__card p{
    max-width: none !important;
  }
  .company-duo__stripe{ top: 100px !important; }
}

@media (max-width: 560px){
   .company-duo__card-inner{
    flex-direction: column !important;
    row-gap: 14px !important;
  }

  .company-duo__img{ display:none; }

  .company-duo__stripe {
    height: 170px !important;
    top: 75px !important;
  }

  .company-duo__venn{ display:none; }
}