/* ================================================================
   V3 — SEZIONI RIDISEGNATE
   Struttura: Problema · Approccio · Percorso · Perché · Risultati · FAQ · CTA
================================================================ */

/* ── Label condivisa ───────────────────────────────────────── */
.v3-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--red);
    display: block;
    margin-bottom: 20px;
}
.v3-label--light { color: rgba(255,255,255,0.45); }

/* ================================================================
   PROBLEMA — split: headline sx, lista sfide dx
================================================================ */
.v3-problema {
    padding: 96px 0;
    background-color: var(--white);
    position: relative;
}
.v3-pb-inner {
    display: grid;
    grid-template-columns: 38fr 62fr;
    gap: 80px;
    align-items: start;
}
.v3-pb-left {
    padding-top: 36px; /* allinea visivamente il testo con il primo item a destra */
}
.v3-pb-left h2 {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 3.8vw, 50px);
    line-height: 1.28;
    letter-spacing: -0.025em;
    color: var(--dark);
    margin: 0;
}
.v3-pb-left h2 em {
    font-style: normal;
    color: var(--red);
}
/* span interni — ogni riga anima separatamente con AOS */
.v3-pb-left h2 span {
    display: inline-block;
}
.v3-pb-left > p {
    font-family: 'Barlow', sans-serif;
    font-size: 16px;
    color: var(--mid);
    line-height: 1.6;
    margin: 0;
    max-width: 320px;
}

/* Sfide list */
.v3-pb-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
.v3-pb-item {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 36px 32px;
    /* Dot pattern direttamente sull'item — non coperto da nulla */
    background-color: #fff;
    background-image: radial-gradient(circle, rgba(190,24,24,0.10) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}
.v3-pb-item:hover {
    background-color: #fff;
    background-image: none;
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.09);
    position: relative;
    z-index: 1;
}
.v3-pb-item:hover strong { color: var(--red); }

/* Animazione custom via JS (.pb-animate) — indipendente da AOS */
.v3-pb-item {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
    transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1),
                transform 0.65s cubic-bezier(0.16,1,0.3,1),
                box-shadow 0.22s ease,
                background-color 0.22s ease;
}
.v3-pb-item.pb-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.v3-pb-item strong {
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    font-size: clamp(17px, 1.6vw, 21px);
    color: var(--dark);
    display: block;
    line-height: 1.3;
    margin-bottom: 10px;
    transition: color 0.2s ease;
}
.v3-pb-item p {
    font-family: 'Barlow', sans-serif;
    font-size: clamp(14px, 1.2vw, 16px);
    color: var(--mid);
    margin: 0;
    line-height: 1.65;
}

/* ================================================================
   APPROCCIO — parallax split: immagine sx | testo dx
================================================================ */
.v3-approccio {
    display: grid;
    grid-template-columns: 52fr 48fr;
    min-height: 100vh;
    background: #0c0d13;
    overflow: hidden;
    position: relative;
}
#neural-approccio {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}
.v3-app-image {
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.v3-app-image img {
    position: absolute;
    top: -25%;
    left: 0;
    width: 100%;
    height: 150%;
    object-fit: cover;
    object-position: center center;
    opacity: 0.82;
    will-change: transform;
    display: block;
}
.v3-app-image-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 50%, #0c0d13 100%);
    z-index: 1;
    pointer-events: none;
}
.v3-app-content {
    padding: 100px 72px 100px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 3;
}
.v3-app-content h2 {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: clamp(36px, 4.5vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0 0 28px;
}
.v3-app-content > p {
    font-family: 'Barlow', sans-serif;
    font-size: clamp(17px, 1.5vw, 20px);
    color: rgba(255,255,255,0.60);
    line-height: 1.65;
    max-width: 420px;
    margin: 0;
}

/* Layer stack */
.v3-layer-stack {
    display: flex;
    flex-direction: column;
    max-width: 360px;
}
.v3-ls-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border: 1px solid rgba(255,255,255,0.10);
    margin-bottom: -1px;
    background: rgba(255,255,255,0.04);
    transition: background 0.2s ease;
}
.v3-ls-center {
    background: var(--red);
    border-color: var(--red);
    padding: 20px 18px;
}
.v3-ls-row:not(.v3-ls-center):hover { background: rgba(255,255,255,0.08); }
.v3-ls-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
}
.v3-ls-sub {
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    color: rgba(255,255,255,0.48);
}
.v3-ls-center .v3-ls-sub { color: rgba(255,255,255,0.82); }

/* ================================================================
   PERCORSO — slideshow: frecce ai lati, dots sotto
================================================================ */
.v3-percorso {
    padding: 112px 0 96px;
    background: var(--white);
    background-image: radial-gradient(circle, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 32px 32px;
}

/* Header */
.v3-pt-header {
    margin-bottom: 64px;
}
.v3-pt-header h2 {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: clamp(32px, 4vw, 56px);
    line-height: 1.06;
    letter-spacing: -0.028em;
    color: var(--dark);
    margin: 0;
}

/* ── Griglia 2×2 ──────────────────────────── */
.v3-pt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

/* ── Cards — posizionamento nel grid ─────── */
/* Tutte: padding di base */
.v3-pt-card {
    display: flex;
    flex-direction: column;
    padding: 48px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.38s;
}
.v3-pt-card:nth-child(2) {       /* top-right */
    border-left: 1px solid var(--border);
}
.v3-pt-card:nth-child(3) {       /* bottom-left */
    border-top: 1px solid var(--border);
}
.v3-pt-card:nth-child(4) {       /* bottom-right */
    border-left: 1px solid var(--border);
    border-top: 1px solid var(--border);
}

/* ── Hover: red fill dal basso ───────────────── */
.v3-pt-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--red);
    transform: translateY(101%);
    transition: transform 0.44s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 0;
}

.v3-pt-card:hover::before {
    transform: translateY(0);
}

.v3-pt-card:hover {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Contenuto sopra il fill */
.v3-pt-card-head,
.v3-pt-card-body {
    position: relative;
    z-index: 1;
}

/* Card header: numero step + nome */
.v3-pt-card-head {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 22px;
    transition: border-color 0.3s;
}
.v3-pt-card:hover .v3-pt-card-head {
    border-color: rgba(255, 255, 255, 0.22);
}

.v3-pt-step-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.12em;
    color: var(--red);
    display: block;
    transition: color 0.25s;
}
.v3-pt-card:hover .v3-pt-step-num {
    color: rgba(255, 255, 255, 0.65);
}

.v3-pt-step-tag {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray);
    transition: color 0.25s;
}
.v3-pt-card:hover .v3-pt-step-tag {
    color: rgba(255, 255, 255, 0.5);
}

/* Card body */
.v3-pt-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.v3-pt-card-body h3 {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 3.4vw, 46px);
    line-height: 1.06;
    letter-spacing: -0.028em;
    color: var(--dark);
    margin: 0 0 16px;
    transition: color 0.25s;
}
.v3-pt-card:hover .v3-pt-card-body h3 {
    color: #ffffff;
}

.v3-pt-card-body > p {
    font-family: 'Barlow', sans-serif;
    font-size: clamp(14px, 1.25vw, 16px);
    line-height: 1.7;
    color: var(--mid);
    margin: 0 0 18px;
    transition: color 0.25s;
}
.v3-pt-card:hover .v3-pt-card-body > p {
    color: rgba(255, 255, 255, 0.8);
}

.v3-pt-card-body ul {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.v3-pt-card-body ul li {
    font-family: 'Barlow', sans-serif;
    font-size: clamp(13px, 1.15vw, 15px);
    color: var(--dark);
    padding-left: 20px;
    position: relative;
    line-height: 1.5;
    transition: color 0.25s;
}
.v3-pt-card:hover .v3-pt-card-body ul li {
    color: rgba(255, 255, 255, 0.9);
}

.v3-pt-card-body ul li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--red);
    font-size: 12px;
    line-height: 1.5;
    transition: color 0.25s;
}
.v3-pt-card:hover .v3-pt-card-body ul li::before {
    color: rgba(255, 255, 255, 0.6);
}

/* btn-primary nel card 00: inverti su rosso */
.v3-pt-card:hover .btn-primary {
    background: #ffffff;
    color: var(--red);
    border-color: #ffffff;
}

/* ── Responsive ───────────────────────────── */
@media (max-width: 720px) {
    .v3-pt-grid             { grid-template-columns: 1fr; }
    .v3-pt-card             { padding: 32px 0 !important; border-left: none !important; border-top: none !important; border-bottom: 1px solid var(--border); }
    .v3-pt-card:last-child  { border-bottom: none; padding-bottom: 0 !important; }

    /* Testi card percorso: clamp cade al minimo su mobile */
    .v3-pt-card-body > p    { font-size: 16px; }
    .v3-pt-card-body ul li  { font-size: 15px; line-height: 1.6; }
}

/* Trust note — fondo di ogni card percorso */

/* ================================================================
   RISULTATI — bg chiaro, card bianche con top accent
================================================================ */
.v3-risultati {
    padding: 96px 0;
    background: var(--light);
}
.v3-ri-header {
    margin-bottom: 52px;
}
.v3-ri-header h2 {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 3.8vw, 52px);
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--dark);
    margin: 0;
}
.v3-cases {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.v3-case {
    background: var(--white);
}
.v3-case-inner {
    padding: 44px 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-top: 3px solid transparent;
    transition: border-top-color 0.22s ease;
    box-sizing: border-box;
}
.v3-case:hover .v3-case-inner {
    border-top-color: var(--red);
}
.v3-case-tag {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red);
    display: block;
    margin-bottom: 12px;
}
.v3-case h3 {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 2vw, 26px);
    color: var(--dark);
    margin: 0 0 12px;
    line-height: 1.25;
}
.v3-case-top > p {
    font-family: 'Barlow', sans-serif;
    font-size: 14px;
    color: var(--mid);
    margin: 0;
    line-height: 1.55;
}
.v3-case-metrics {
    display: flex;
    gap: 28px;
    margin-top: auto;
    padding-top: 28px;
}
.v3-metric {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.v3-mn {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: clamp(26px, 2.8vw, 40px);
    color: var(--red);
    line-height: 1;
    letter-spacing: -0.03em;
}
.v3-ml {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray);
}

/* ================================================================
   FAQ — dark, accordion editoriale
================================================================ */
.v3-faq {
    padding: 96px 0;
    background: #0c0d13;
}
.v3-faq-header {
    margin-bottom: 60px;
}
.v3-faq-header h2 {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 3.8vw, 52px);
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: #fff;
    margin: 0;
}
.v3-accordion {
}
.v3-acc-item {
    margin-bottom: 4px;
}
.v3-acc-q {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 22px 0;
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: rgba(255,255,255,0.70);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    transition: color 0.2s;
}
.v3-acc-q:hover,
.v3-acc-q[aria-expanded="true"] {
    color: #fff;
}
.v3-acc-q::after {
    content: '+';
    font-family: 'Archivo', sans-serif;
    font-size: 22px;
    font-weight: 300;
    color: var(--red);
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    line-height: 1;
}
.v3-acc-q[aria-expanded="true"]::after {
    transform: rotate(45deg);
}
.v3-acc-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}
.v3-acc-item.open .v3-acc-a p {
    border-left: 3px solid var(--red);
    padding-left: 16px;
}
.v3-acc-a p {
    font-family: 'Barlow', sans-serif;
    font-size: 15px;
    color: rgba(255,255,255,0.52);
    line-height: 1.72;
    padding: 0 0 24px;
    margin: 0;
    transition: padding-left 0.2s ease;
}

/* ================================================================
   CTA — sfondo rosso pieno
================================================================ */
.v3-cta {
    padding: 120px 0;
    background: var(--red);
    text-align: center;
}
.v3-cta-body {
    max-width: 680px;
    margin: 0 auto;
}
.v3-cta-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    display: block;
    margin-bottom: 20px;
}
.v3-cta h2 {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: #fff;
    margin: 0 0 20px;
}
.v3-cta-sub {
    font-family: 'Barlow', sans-serif;
    font-size: 18px;
    color: rgba(255,255,255,0.72);
    line-height: 1.55;
    margin: 0 0 44px;
}
.v3-cta-btn {
    display: inline-block;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--red);
    background: #fff;
    padding: 18px 48px;
    transition: background 0.2s, color 0.2s;
}
.v3-cta-btn:hover {
    background: rgba(255,255,255,0.88);
}
.v3-cta-contacts {
    margin-top: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-family: 'Barlow', sans-serif;
    font-size: 15px;
}
.v3-cta-contacts a {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    transition: color 0.2s;
}
.v3-cta-contacts a:hover { color: #fff; }
.v3-cta-contacts span { color: rgba(255,255,255,0.30); }

/* ================================================================
   RESPONSIVE V3
================================================================ */
@media (max-width: 1100px) {
    .v3-pb-inner { grid-template-columns: 1fr; gap: 48px; }
    .v3-pb-left > p { max-width: 100%; }
    .v3-approccio { grid-template-columns: 1fr; }
    .v3-app-image { min-height: 340px; }
    .v3-app-content { padding: 64px 48px; }
}

@media (max-width: 640px) {
    .v3-pb-right { grid-template-columns: 1fr; }
    .v3-pb-item { border-right: none; padding: 24px 20px; }
    .v3-pb-item:nth-child(2n) { padding-left: 20px; }
    .v3-cases { grid-template-columns: 1fr; }
    .v3-app-content { padding: 48px 24px; }
    .v3-problema { padding-top: 40px; }

    /* Testi sezione problema: i clamp() cadono al minimo su mobile, li alziamo */
    .v3-pb-item strong { font-size: 19px; }
    .v3-pb-item p      { font-size: 16px; line-height: 1.7; }
    .v3-pb-left > p    { font-size: 17px; max-width: 100%; }

    /* CTA rossa: telefono/email più leggibili */
    .v3-cta-contacts   { font-size: 16px; }
    .v3-cta-sub        { font-size: 17px; }
}