/* ===============================
   CHI SONO — π-factor
   =============================== */

.page-about {
  background: #fff;
}

#about-page {
  overflow: hidden;
}

#about-page .section {
  padding-top: 3.8rem;
  padding-bottom: 3.8rem;
}


/* =========================================================
   HERO — SOLO PERSONALIZZAZIONI
   La struttura generale è in 08-hero.css
   ========================================================= */

.page-about .about-hero-orange {
  color: var(--orange);
}


/* =========================================================
   INTRO
   ========================================================= */

.about-intro {
  background: #fff;
}

.about-intro-grid {
  display: grid;
  grid-template-columns:
    minmax(0, .9fr)
    minmax(0, 1.1fr);

  gap: clamp(3rem, 8vw, 7rem);

  align-items: start;
}

.about-intro h2 {
  margin: .8rem 0 0;

  color: #173044;

  font-size: clamp(2.8rem, 4.7vw, 4.7rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.about-intro-copy {
  max-width: 700px;
}

.about-intro-copy p {
  margin: 0 0 1.2rem;

  color: #526978;

  font-size: 1.05rem;
  line-height: 1.78;
}

.about-intro-copy .about-highlight {
  margin-top: 2rem;

  padding: 1.4rem 1.6rem;

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      rgba(255,160,58,.13),
      rgba(255,160,58,.045)
    );

  border-left: 5px solid var(--orange);

  color: #173044;

  font-weight: 750;
}


/* =========================================================
   PERCORSO
   ========================================================= */

.about-path {
  position: relative;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 95% 10%,
      rgba(62,223,218,.13),
      transparent 25%
    ),
    linear-gradient(
      180deg,
      rgba(245,250,252,.7),
      #fff
    );
}

.about-section-heading {
  max-width: 850px;
}

.about-section-heading h2 {
  margin: .8rem 0 0;

  color: #173044;

  font-size: clamp(2.8rem, 4.7vw, 4.7rem);
  line-height: .98;
  letter-spacing: -.05em;
}

.about-path-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 1.2rem;

  margin-top: 3rem;
}

.about-path-card {
  position: relative;

  overflow: hidden;

  min-height: 370px;

  display: flex;
  flex-direction: column;

  padding: 2rem;

  border-radius: 24px;

  border:
    1px solid rgba(16,162,247,.10);

  box-shadow:
    0 14px 34px rgba(23,48,68,.06);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.about-path-card:hover {
  transform: translateY(-8px);

  box-shadow:
    0 22px 46px rgba(23,48,68,.11);
}

.about-path-card::after {
  content: "";

  position: absolute;

  right: -65px;
  bottom: -65px;

  width: 170px;
  height: 170px;

  border-radius: 50%;

  opacity: .18;
}

.about-path-a {
  background:
    linear-gradient(
      145deg,
      rgba(62,223,218,.18),
      rgba(62,223,218,.055)
    );
}

.about-path-b {
  background:
    linear-gradient(
      145deg,
      rgba(16,162,247,.14),
      rgba(16,190,243,.05)
    );
}

.about-path-c {
  background:
    linear-gradient(
      145deg,
      rgba(255,160,58,.17),
      rgba(255,160,58,.05)
    );
}

.about-path-a::after {
  background: var(--aqua);
}

.about-path-b::after {
  background: var(--blue);
}

.about-path-c::after {
  background: var(--orange);
}

.about-path-card > * {
  position: relative;
  z-index: 1;
}

.about-path-number {
  color: #173044;

  font-size: .82rem;
  font-weight: 900;
}

.about-path-card h3 {
  margin: 2.2rem 0 .9rem;

  color: #173044;

  font-size: 1.65rem;
}

.about-path-card p {
  margin: 0;

  color: #526978;

  line-height: 1.7;
}

.about-path-card strong {
  margin-top: auto;

  padding-top: 2rem;

  color: #173044;

  font-size: .85rem;
  font-weight: 850;
}


/* =========================================================
   EXPERIENCE
   ========================================================= */

.about-experience {
  position: relative;

  overflow: hidden;

  padding: 4.5rem 0;

  background:
    radial-gradient(
      circle at 90% 15%,
      rgba(62,223,218,.25),
      transparent 27%
    ),
    radial-gradient(
      circle at 5% 90%,
      rgba(255,160,58,.18),
      transparent 23%
    ),
    linear-gradient(
      135deg,
      #0d84df,
      #10a2f7
    );

  color: #fff;
}

.about-experience::after {
  content: "";

  position: absolute;

  right: -130px;
  bottom: -180px;

  width: 350px;
  height: 350px;

  border-radius: 50%;

  border:
    60px solid rgba(255,255,255,.07);
}

.about-experience-grid {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: clamp(4rem, 8vw, 8rem);

  align-items: center;
}

.about-experience h2 {
  margin: .8rem 0 0;

  color: #fff;

  font-size: clamp(2.8rem, 4.8vw, 4.8rem);
  line-height: .98;
  letter-spacing: -.05em;
}

.about-experience-copy p {
  margin: 0 0 1.2rem;

  color: rgba(255,255,255,.95);

  font-size: 1.06rem;
  line-height: 1.8;
}


/* =========================================================
   PI-FACTOR
   ========================================================= */

.about-pifactor {
  background:
    radial-gradient(
      circle at 5% 90%,
      rgba(255,160,58,.10),
      transparent 23%
    ),
    #fff;
}

.about-pifactor-grid {
  display: grid;

  grid-template-columns:
    minmax(260px, .75fr)
    minmax(0, 1.25fr);

  gap: clamp(3rem, 8vw, 7rem);

  align-items: center;
}

.about-pifactor-mark {
  min-height: 390px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 32px;

  background:
    radial-gradient(
      circle at 25% 20%,
      rgba(62,223,218,.28),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(16,162,247,.11),
      rgba(255,255,255,.95)
    );

  border:
    1px solid rgba(16,162,247,.09);
}

.about-pifactor-mark span {
  color: var(--orange);

  font-size: clamp(12rem, 20vw, 19rem);
  line-height: .8;
  font-weight: 900;
}

.about-pifactor-copy {
  max-width: 720px;
}

.about-pifactor-copy h2 {
  margin: .8rem 0 1.3rem;

  color: #173044;

  font-size: clamp(2.8rem, 4.6vw, 4.5rem);
  line-height: .98;
  letter-spacing: -.05em;
}

.about-pifactor-copy > p:not(.home-kicker) {
  margin: 0 0 1.1rem;

  color: #526978;

  font-size: 1.05rem;
  line-height: 1.75;
}

.about-text-link {
  display: inline-block;

  margin-top: .8rem;

  padding-bottom: .2rem;

  color: #173044;

  font-weight: 850;

  border-bottom:
    2px solid var(--orange);
}


/* =========================================================
   PRINCIPI
   ========================================================= */

.about-principles {
  background:
    radial-gradient(
      circle at 94% 12%,
      rgba(255,160,58,.10),
      transparent 24%
    ),
    linear-gradient(
      180deg,
      rgba(62,223,218,.08),
      rgba(16,190,243,.035)
    );
}

.about-section-heading-center {
  margin-left: auto;
  margin-right: auto;

  text-align: center;
}

.about-principles-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 1rem;

  margin-top: 3rem;
}

.about-principles-grid article {
  position: relative;

  padding: 2rem;

  border-radius: 22px;

  background:
    rgba(255,255,255,.94);

  border:
    1px solid rgba(16,162,247,.09);

  box-shadow:
    0 12px 30px rgba(23,48,68,.06);
}

.about-principles-grid article:nth-child(1) {
  border-top:
    5px solid var(--aqua);
}

.about-principles-grid article:nth-child(2) {
  border-top:
    5px solid var(--blue);
}

.about-principles-grid article:nth-child(3) {
  border-top:
    5px solid var(--orange);
}

.about-principles-grid span {
  color: var(--orange);

  font-size: .78rem;
  font-weight: 900;
}

.about-principles-grid h3 {
  margin: 1.5rem 0 .7rem;

  color: #173044;

  font-size: 1.3rem;
}

.about-principles-grid p {
  margin: 0;

  color: #61717c;

  line-height: 1.7;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.about-final {
  position: relative;

  overflow: hidden;

  padding: 4.5rem 0;

  background:
    radial-gradient(
      circle at 93% 8%,
      rgba(62,223,218,.30),
      transparent 27%
    ),
    radial-gradient(
      circle at 3% 94%,
      rgba(255,160,58,.21),
      transparent 24%
    ),
    linear-gradient(
      135deg,
      #173044,
      #0d84df
    );

  color: #fff;
}

.about-final-grid {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, .9fr);

  gap: clamp(4rem, 8vw, 8rem);

  align-items: center;
}

.about-final h2 {
  margin: .8rem 0 0;

  color: #fff;

  font-size: clamp(2.8rem, 4.8vw, 4.8rem);
  line-height: .98;
  letter-spacing: -.05em;
}

.about-final-copy {
  max-width: 580px;
}

.about-final-copy p {
  margin: 0 0 1.5rem;

  color: rgba(255,255,255,.95);

  font-size: 1.06rem;
  line-height: 1.75;
}

.about-final .btn.primary {
  background: #fff;

  border-color: #fff;

  color: #173044;
}

.about-final small {
  display: block;

  margin-top: 1rem;

  color: rgba(255,255,255,.82);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 960px) {

  .about-intro-grid,
  .about-experience-grid,
  .about-pifactor-grid,
  .about-final-grid {
    grid-template-columns: 1fr;
  }

  .about-path-grid,
  .about-principles-grid {
    grid-template-columns: 1fr;
  }

  .about-path-card {
    min-height: 0;
  }

  .about-pifactor-mark {
    min-height: 300px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

  #about-page .section,
  .about-experience,
  .about-final {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .about-intro-grid,
  .about-experience-grid,
  .about-pifactor-grid,
  .about-final-grid {
    gap: 2.4rem;
  }

  .about-intro h2,
  .about-section-heading h2,
  .about-pifactor-copy h2 {
    font-size:
      clamp(2.5rem, 11vw, 3.7rem);
  }

  .about-experience h2,
  .about-final h2 {
    font-size:
      clamp(2.6rem, 11vw, 3.8rem);
  }

  .about-path-grid,
  .about-principles-grid {
    margin-top: 2rem;
  }

  .about-path-card,
  .about-principles-grid article {
    padding: 1.5rem;

    border-radius: 20px;
  }

  .about-pifactor-mark {
    min-height: 250px;
  }

  .about-pifactor-mark span {
    font-size: 11rem;
  }

  .about-section-heading-center {
    text-align: left;
  }

  .about-final .btn.primary {
    width: 100%;

    justify-content: center;
  }

}