:root{
  --brand-green:#008F4A;
  --brand-green-hover:#006b37;
  --dark-bg:#1f1f1f;
  --header-offset:80px;      /* fallback se JS disattivato */
}

/* ---------- HERO ---------- */
.about-hero{
  background:linear-gradient(180deg,#f5f5f5 0%,#ffffff 60%);
  padding-top:calc(var(--header-offset) + 2rem);
  padding-bottom:4rem;
}
.about-hero h1{ color:#1c1c1c; }
.about-hero p{ color:#4a4a4a; }

/* ---------- VALUES ---------- */
.value-icon{ width:48px; height:48px; }
.value-card h6{ margin-bottom:0; }

/* ---------- TIMELINE ---------- */
.timeline{
  list-style:none;
  margin:0;
  padding:0 0 0 2.5rem;               /* ← spazio per i badge */
  position:relative;
}
.timeline::before{
  content:"";
  position:absolute;
  left:1rem; top:0; height:100%; width:2px;
  background:var(--brand-green);
}
.timeline li{
  position:relative;
  margin-bottom:2rem;
}
.timeline-date{
  position:absolute;
  left:-0.3rem; top:0;
  background:var(--brand-green); color:#fff;
  font-size:0.75rem; font-weight:600;
  padding:2px 6px; border-radius:4px;
}

/* ---------- FOUNDER ---------- */
.founder-card{ max-width:500px; }
.founder-avatar{ width:110px; height:110px; border-radius:50%; object-fit:cover; }

/* ---------- STACK ---------- */
.stack-icon{ width:64px; height:64px; opacity:.9; transition:opacity .2s; }
.stack-icon:hover{ opacity:1; }

/* ---------- CTA ---------- */
.btn-brand{
  background:var(--brand-green);
  color:#fff; padding:0.7rem 1.5rem; border:none;
}
.btn-brand:hover{ background:var(--brand-green-hover); }

/* ---------- ANIMATION (se serve in futuro) ---------- */
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

.timeline-text{
  margin-left:2.5rem;
  animation:fadeIn .3s ease;
}