/* static/assets/css/about.css */

/* HERO (coerente con homepage) */
.cf-about-hero{
  position:relative;
  overflow:hidden;
  background: #f7f2ea;
  border-bottom: 1px solid rgba(0,0,0,.06);

  margin-top: -110px;          /* valore base che funziona bene */
  padding-top: 100px;          /* spazio per non finire sotto navbar */
}
.cf-about-hero__bg{
  position:absolute; inset:0;
  filter: blur(10px);
  opacity:.9;
  pointer-events:none;
}
.cf-about-hero__bg .blob{
  position:absolute; width:520px; height:520px; border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(140, 20, 20, .28), rgba(255, 190, 140, .12) 55%, rgba(255,255,255,0) 70%);
  animation: cfAboutFloat 12s ease-in-out infinite;
}
.cf-about-hero__bg .b1{ left:-140px; top:-120px; animation-duration: 13s; }
.cf-about-hero__bg .b2{ right:-160px; top:-80px; animation-duration: 15s; }
.cf-about-hero__bg .b3{ left:30%; bottom:-260px; width:680px; height:680px; animation-duration: 18s; }

@keyframes cfAboutFloat{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(20px,-18px,0) scale(1.04); }
}

.cf-about-hero__kicker{
  display:flex; align-items:center; gap:.6rem;
  margin-bottom:.6rem;
}
.cf-about-hero__title{
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.05;
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: .75rem;
}
.cf-about-hero__title .accent{
  color: #7b1212;
}
.cf-about-hero__subtitle{
  color: rgba(0,0,0,.65);
  font-size: 1.05rem;
  max-width: 52ch;
}

.cf-about-hero__chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.cf-about-hero__chips .chip{
  display:inline-flex; align-items:center;
  padding:.45rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  font-size: .9rem;
  color: rgba(0,0,0,.75);
}

/* “card” a destra nel hero */
.cf-about-hero__card .mini{
  display:flex; gap:.7rem; align-items:flex-start;
  padding:.6rem .65rem;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.6);
}
.cf-about-hero__card .mini__icon{
  width:38px; height:38px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(123, 18, 18, .08);
  color:#7b1212;
}
.cf-about-hero__card .mini__title{ font-weight:800; line-height:1.1; }
.cf-about-hero__card .mini__sub{ font-size:.85rem; color: rgba(0,0,0,.6); }

/* Quote */
.cf-about-quote{
  border-radius: 18px;
  padding: 1.1rem 1.1rem;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.6);
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
}
.cf-about-quote__icon{
  color:#7b1212;
  width:42px; height:42px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(123, 18, 18, .08);
  margin-bottom: .65rem;
}
.cf-about-quote__text{
  font-size: 1.05rem;
  font-weight: 650;
  color: rgba(0,0,0,.78);
}
.cf-about-quote__sub{ margin-top:.5rem; }

/* Audience cards */
.cf-about-audience .aud__icon,
.cf-about-audience.alt .aud__icon{
  width:44px; height:44px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(123, 18, 18, .08);
  color:#7b1212;
  margin-bottom: .6rem;
  font-size: 1.05rem;
}
.cf-about-audience.alt{
  background: linear-gradient(135deg, rgba(123,18,18,.06), rgba(255,255,255,.6));
}

.cf-about-list{
  list-style:none; padding-left:0; margin:0;
  display:flex; flex-direction:column; gap:.55rem;
}
.cf-about-list li{
  display:flex; align-items:flex-start; gap:.55rem;
  color: rgba(0,0,0,.72);
}
.cf-about-list i{
  margin-top: .25rem;
  color:#7b1212;
}

/* Services */
.cf-about-svc{
  display:flex; gap:.7rem; align-items:flex-start;
  padding:.75rem .8rem;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.55);
}
.cf-about-svc i{
  width:40px; height:40px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(123,18,18,.08);
  color:#7b1212;
  flex: 0 0 auto;
}

/* Bottom CTA */
.cf-about-bottom-cta{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1rem;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.55);
}
@media (max-width: 576px){
  .cf-about-bottom-cta{ flex-direction: column; align-items: flex-start; }
}

/* Riduci “appiccicamento”: margini se la tua cf-section è stretta */
.cf-section{ padding-top: 1.25rem; padding-bottom: 1.25rem; }