/* ==========================================================================
   CHI SIAMO — Corporate Apple Style
   Scope: .bpc-about-wrapper  (evita collisioni con header/footer/plugin)
   Ruoli: UI/UX Designer · Performance Expert
   ========================================================================== */

.bpc-about-wrapper {
    --abt-bg:        #F5F5F7;
    --abt-text:      var(--bspc-text-primary, #1D1D1F);
    --abt-muted:     var(--bspc-text-light,   #86868B);
    --abt-accent:    var(--bspc-blue-primary,  #0071E3);
    --abt-radius:    var(--bspc-radius-large,  18px);
    --abt-shadow:    var(--bspc-shadow-light,  0 6px 16px rgba(0,0,0,.06));

    background-color: var(--abt-bg);
    font-family: var(--bspc-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    color: var(--abt-text);
    overflow-x: hidden;
    position: relative;
    padding-bottom: 80px;
}

/* ── Sfondo decorativo ── */
.bpc-about-wrapper .about-bg-mesh {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background:
        radial-gradient(circle at 80% 20%, rgba(0,113,227,.07), transparent 40%),
        radial-gradient(circle at 20% 80%, rgba(52,199,89,.07),  transparent 40%);
    z-index: 0; pointer-events: none;
}

/* ── Hero ── */
.bpc-about-wrapper .about-hero {
    padding: 100px 0 60px;
    text-align: center;
}
.bpc-about-wrapper .hero-eyebrow {
    display: block;
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.2px;
    color: var(--abt-accent);
    margin-bottom: 16px;
}
.bpc-about-wrapper .hero-title {
    font-size: clamp(38px, 5vw, 64px);
    font-weight: 800; line-height: 1.1;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #1d1d1f 0%, #434344 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.bpc-about-wrapper .hero-subtitle {
    font-size: clamp(17px, 2.2vw, 22px);
    color: var(--abt-muted);
    max-width: 660px; margin: 0 auto 36px;
    line-height: 1.55;
}
.bpc-about-wrapper .hero-actions {
    display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
}

/* ── Shared buttons ── */
.bpc-about-wrapper .btn-primary,
.bpc-about-wrapper .btn-secondary {
    padding: 13px 26px;
    border-radius: 99px;
    font-size: 15px; font-weight: 600;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
    display: inline-block;
}
.bpc-about-wrapper .btn-primary {
    background: var(--abt-accent); color: #fff;
    box-shadow: 0 8px 18px rgba(0,113,227,.28);
}
.bpc-about-wrapper .btn-primary:hover  { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,113,227,.36); }
.bpc-about-wrapper .btn-secondary      { background: rgba(0,0,0,.06); color: var(--abt-text); }
.bpc-about-wrapper .btn-secondary:hover{ transform: translateY(-2px); background: rgba(0,0,0,.09); }

/* ── Statistiche ── */
.bpc-about-wrapper .about-stats { padding: 40px 0; }
.bpc-about-wrapper .stats-grid {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 20px;
    background: #fff; border-radius: var(--abt-radius);
    padding: 40px; box-shadow: var(--abt-shadow);
    text-align: center;
}
.bpc-about-wrapper .stat-number {
    display: block;
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 800; color: var(--abt-accent);
    line-height: 1;
    margin-bottom: 6px;
}
.bpc-about-wrapper .stat-label {
    font-size: 13px; font-weight: 600;
    color: var(--abt-muted); text-transform: uppercase; letter-spacing: .8px;
}

/* ── Valori ── */
.bpc-about-wrapper .about-values { padding: 60px 0; }
.bpc-about-wrapper .section-eyebrow {
    text-align: center;
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.2px;
    color: var(--abt-accent);
    margin-bottom: 32px;
}
.bpc-about-wrapper .values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
    gap: 24px;
}
.bpc-about-wrapper .value-card {
    border-radius: var(--abt-radius);
    padding: 36px;
    box-shadow: var(--abt-shadow);
    transition: transform .3s ease;
}
.bpc-about-wrapper .value-card:hover { transform: translateY(-5px); }
.bpc-about-wrapper .value-icon { font-size: 38px; margin-bottom: 18px; }
.bpc-about-wrapper .value-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.bpc-about-wrapper .value-card p  { font-size: 15px; line-height: 1.6; color: var(--abt-muted); margin: 0; }

/* ── Laboratorio ── */
.bpc-about-wrapper .about-lab { padding: 40px 0; }
.bpc-about-wrapper .lab-card {
    background: #fff; border-radius: var(--abt-radius);
    overflow: hidden; box-shadow: var(--abt-shadow);
    display: grid; grid-template-columns: 1fr 1fr;
}
.bpc-about-wrapper .lab-content {
    padding: 56px 48px;
    display: flex; flex-direction: column; justify-content: center;
}
.bpc-about-wrapper .lab-content h2 {
    font-size: clamp(26px, 2.8vw, 34px);
    font-weight: 800; margin-bottom: 18px; line-height: 1.2;
}
.bpc-about-wrapper .lab-content p {
    font-size: 17px; line-height: 1.65;
    color: var(--abt-muted); margin-bottom: 28px;
}
.bpc-about-wrapper .lab-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.bpc-about-wrapper .lab-image img {
    width: 100%; height: 100%;
    object-fit: cover; min-height: 380px;
    display: block;
}

/* ── Trust strip ── */
.bpc-about-wrapper .about-trust { padding: 48px 0; }
.bpc-about-wrapper .trust-list {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 16px 36px; list-style: none; padding: 0; margin: 0;
}
.bpc-about-wrapper .trust-list li {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 600; color: var(--abt-text);
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .bpc-about-wrapper .lab-card { grid-template-columns: 1fr; }
    .bpc-about-wrapper .lab-content { padding: 36px 32px; }
    .bpc-about-wrapper .lab-image img { min-height: 280px; }
}
@media (max-width: 600px) {
    .bpc-about-wrapper .stats-grid { grid-template-columns: 1fr; gap: 28px; }
    .bpc-about-wrapper .hero-actions { flex-direction: column; }
    .bpc-about-wrapper .btn-primary,
    .bpc-about-wrapper .btn-secondary { width: 100%; text-align: center; box-sizing: border-box; }
    .bpc-about-wrapper .lab-actions { flex-direction: column; }
    .bpc-about-wrapper .trust-list { flex-direction: column; align-items: flex-start; gap: 12px; }
}