/* ============================================================
   LANDING.CSS - CSML Metodo Horeca
   Versione FINALE con tutte le correzioni
   ============================================================ */

/* ============================================================
   IMAGE PLACEHOLDER (per eventuali fallback)
============================================================ */

/* ============================================================
   WAVE WRAPPER (non usato ma mantenuto per compatibilità)
============================================================ */

/* ============================================================
   HEADER STICKY - CORREZIONE LOGO
============================================================ */
#site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: var(--white);
    z-index: 1000;
    display: flex;
    align-items: center;
    transition: box-shadow var(--transition), transform 0.35s ease;
}

#site-header.scrolled {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

#site-header.hidden {
    transform: translateY(-100%);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 40px;
}

.header-logo {
    height: 45px;
    width: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    background: transparent;
}

.header-logo img,
.header-logo-img {
    height: 45px;
    width: auto !important;
    max-width: none !important;
    object-fit: contain;
    border-radius: 0 !important;
    background: transparent;
}

.header-brand {
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: 0.3px;
}

@media (max-width: 768px) {
    .header-inner {
        padding: 0 20px;
    }

    .header-brand {
        font-size: 15px;
    }
}

/* ============================================================
   SECTION 1: HERO - CORREZIONE SPAZI E POSIZIONE
============================================================ */
#hero {
    padding: 0;  /* MODIFICATO: eliminato padding-top 70/100px */
    margin: 0;   /* AGGIUNTO: azzerato margine */
    background: var(--white);
    position: relative;
    overflow: visible;
}

.hero-inner {
    display: grid;
    grid-template-columns: 58% 42%;
    gap: 40px;
    align-items: center;
    margin-top: 0;
    padding-top: 40px; /* spazio per evitare taglio elementi grafici */
}

.hero-content {
    animation: heroContentIn 0.9s ease 0.1s both;
    padding-top: 0;
    margin-top: 0;
}

@keyframes heroContentIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-h1 {
    font-family: var(--font-head);
    font-size: 48px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.15;
    margin-bottom: 28px;
    margin-top: 0;
}

.hero-h1 .highlight-pct {
    color: var(--gold);
    font-size: 56px;
}

.hero-subhead {
    font-family: var(--font-body);
    font-size: 20px;
    color: var(--anthracite);
    line-height: 1.65;
    margin-bottom: 24px;
}

.hero-subhead strong {
    font-weight: 600;
    color: var(--navy);
}

.hero-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 600px;
    margin-top: 20px;
}

.photo-frame-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-frame-solid {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 85%;
    height: 85%;
    background: var(--gray-light);
    border-radius: 12px;
    z-index: 1;
    border: 1px solid rgba(44, 62, 80, 0.08);
}

.hero-frame-border {
    position: absolute;
    top: 20px;
    right: 0;
    width: 85%;
    height: 85%;
    border: 4px solid var(--blue);
    border-radius: 12px;
    z-index: 2;
}

.hero-frame-accent {
    position: absolute;
    top: -20px;
    right: 20px;
    width: 100px;
    height: 100px;
    background: var(--gold);
    border-radius: 12px;
    z-index: 3;
    box-shadow: 0 10px 20px rgba(255, 215, 0, 0.3);
}

.photo-out-of-bounds {
    display: block;
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: contain;
    object-position: center;
    position: relative;
    z-index: 4;
    filter: drop-shadow(0 15px 25px rgba(44, 62, 80, 0.15));
}

.hero-ctas {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.hero-ctas .btn-primary {
    font-size: 20px;
    padding: 22px 50px;
}

.hero-microcopy {
    font-size: 15px;
    color: rgba(44, 62, 80, 0.55);
    line-height: 1.55;
}

@media (max-width: 1024px) {
    .hero-inner {
        grid-template-columns: 55% 45%;
        gap: 30px;
    }

    .hero-h1 {
        font-size: 38px;
    }

    .hero-h1 .highlight-pct {
        font-size: 44px;
    }
    
    .hero-visual {
        min-height: 500px;
    }
}

@media (max-width: 768px) {
    #hero {
        padding: 0;  /* MODIFICATO: azzerato anche su mobile */
        margin: 0;
    }

    .hero-inner {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-top: 0;
        padding-top: 0;
    }

    .hero-content {
        order: 1;
        padding-bottom: 0;
    }

    .hero-visual {
        order: 2;
        margin: 10px auto 0;
        max-width: 100%;
        width: 100%;
        min-height: auto;
    }

    .hero-ctas {
        order: 3;
        align-items: center;
        width: 100%;
    }

    .hero-microcopy {
        text-align: center;
    }

    .photo-frame-wrapper {
        max-width: 100%;
        margin: 0 auto;
        padding: 20px 0;
    }

    .hero-frame-solid {
        bottom: 10px;
        left: 5%;
        width: 90%;
        height: 90%;
    }

    .hero-frame-border {
        top: 10px;
        right: 5%;
        width: 90%;
        height: 90%;
        border-width: 3px;
    }

    .hero-frame-accent {
        width: 60px;
        height: 60px;
        top: -10px;
        right: 10px;
    }

    .photo-out-of-bounds {
        max-height: 400px;
    }

    .hero-h1 {
        font-size: 30px;
        margin-bottom: 20px;
    }

    .hero-h1 .highlight-pct {
        font-size: 36px;
    }

    .hero-subhead {
        font-size: 17px;
        margin-bottom: 20px;
    }

    .hero-ctas .btn-primary {
        font-size: 17px;
        padding: 18px 28px;
        min-width: auto;
    }
}

/* ============================================================
   SECTION 2: SERVIZI
============================================================ */
.section-h2 {
    font-family: var(--font-head);
    font-size: 42px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.2;
}

.servizi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 64px;
}

.servizi-card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 45px 35px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.servizi-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.servizi-card--featured {
    border: 3px solid var(--gold);
}

.servizi-icon {
    flex-shrink: 0;
}

.servizi-card-title {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.3;
}

.servizi-card--featured .servizi-card-title {
    color: var(--navy);
}

.servizi-card-copy {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--ink-muted);
    line-height: 1.65;
    flex: 1;
}

.servizi-card-cta {
    display: inline-block;
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    color: var(--anthracite);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--blue);
    transition: color var(--transition), border-color var(--transition);
    align-self: flex-start;
}

.servizi-card-cta:hover {
    color: var(--gold);
    border-color: var(--gold);
}

/* ============================================================
   SECTION 5: PROBLEMA NASCOSTO / BOSTON (stili condivisi)
============================================================ */
.boston-inner {
    max-width: 860px;
    margin: 0 auto;
}

.boston-pct {
    font-family: var(--font-head);
    font-size: 42px;
    font-weight: 800;
    color: var(--gold);
    line-height: 1;
}

.boston-pct-inline {
    font-family: var(--font-head);
    font-size: 28px;
    font-weight: 800;
    color: var(--blue);
}

.boston-image-wrap {
    max-width: 70%;
    margin: 0 auto 20px;
}

.boston-image-wrap img {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    display: block;
}

.pain-subtitle {
    text-align: center;
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 500;
    color: var(--navy);
    line-height: 1.5;
    margin-bottom: 48px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.pain-list {
    list-style: none;
    max-width: 720px;
    margin: 0 auto 48px;
    display: flex;
    flex-direction: column;
}

.pain-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(44, 62, 80, 0.08);
    font-size: 18px;
    color: var(--navy);
    line-height: 1.65;
}

.pain-item:last-child {
    border-bottom: none;
}

.pain-check {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--blue);
    color: var(--white);
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

@media (max-width: 768px) {
    .pain-subtitle {
        font-size: 18px;
    }

    .pain-item {
        font-size: 16px;
        gap: 14px;
    }

    .boston-image-wrap {
        max-width: 100%;
    }

    .boston-pct {
        font-size: 32px;
    }
}

/* ============================================================
   SCROLL INVITE (gocce animate)
============================================================ */
.scroll-invite {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 18px;
    padding: 8px 0 20px;
    background: var(--white);
}

.scroll-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    height: 34px;
}

.scroll-dot {
    display: block;
    flex-shrink: 0;
    border-radius: 50%;
    opacity: 0;
}

.sd-1 {
    width: 8px;
    height: 8px;
}

.sd-2 {
    width: 6px;
    height: 6px;
}

.sd-3 {
    width: 4px;
    height: 4px;
}

.sd-gold {
    background: var(--gold);
}

.sd-blue {
    background: var(--blue);
}

.sd-navy {
    background: var(--navy);
}

.scroll-col:nth-child(1) .sd-1 {
    animation: dotCascade 1.9s ease-in-out infinite 0.00s;
}
.scroll-col:nth-child(1) .sd-2 {
    animation: dotCascade 1.9s ease-in-out infinite 0.26s;
}
.scroll-col:nth-child(1) .sd-3 {
    animation: dotCascade 1.9s ease-in-out infinite 0.52s;
}
.scroll-col:nth-child(2) .sd-1 {
    animation: dotCascade 1.9s ease-in-out infinite 0.20s;
}
.scroll-col:nth-child(2) .sd-2 {
    animation: dotCascade 1.9s ease-in-out infinite 0.46s;
}
.scroll-col:nth-child(2) .sd-3 {
    animation: dotCascade 1.9s ease-in-out infinite 0.72s;
}
.scroll-col:nth-child(3) .sd-1 {
    animation: dotCascade 1.9s ease-in-out infinite 0.40s;
}
.scroll-col:nth-child(3) .sd-2 {
    animation: dotCascade 1.9s ease-in-out infinite 0.66s;
}
.scroll-col:nth-child(3) .sd-3 {
    animation: dotCascade 1.9s ease-in-out infinite 0.92s;
}

@keyframes dotCascade {
    0% {
        opacity: 0;
        transform: translateY(-5px);
    }
    25% {
        opacity: 0.85;
        transform: translateY(0px);
    }
    65% {
        opacity: 0.45;
        transform: translateY(4px);
    }
    100% {
        opacity: 0;
        transform: translateY(8px);
    }
}

/* ============================================================
   SECTION 3: VIDEO VSL
============================================================ */
.vsl-inner {
    max-width: 800px;
    margin: 0 auto;
}

.vsl-subtitle {
    text-align: center;
    font-size: 18px;
    color: var(--gray-text);
    margin-bottom: 36px;
    line-height: 1.6;
}

.vsl-bullets {
    list-style: none;
    margin-bottom: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.vsl-bullets li {
    font-size: 18px;
    color: var(--navy);
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
    max-width: 520px;
    width: 100%;
}

.vsl-num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 800;
    background: var(--blue);
    color: var(--white);
}

.vsl-video-wrap {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    aspect-ratio: 16 / 9;
    margin-bottom: 36px;
    position: relative;
}

.vsl-quote {
    font-size: 20px;
    color: var(--navy);
    text-align: center;
    font-weight: 500;
    line-height: 1.6;
    max-width: 680px;
    margin: 0 auto;
    padding: 0 20px;
}

.vsl-quote::before,
.vsl-quote::after {
    content: '"';
    font-family: var(--font-head);
    font-size: 48px;
    color: var(--gold);
    line-height: 0;
    vertical-align: -16px;
    font-weight: 800;
}

.vsl-quote::before {
    margin-right: 4px;
}

.vsl-quote::after {
    margin-left: 4px;
}

@media (max-width: 768px) {
    .vsl-subtitle {
        font-size: 16px;
    }

    .vsl-bullets li {
        font-size: 16px;
    }

    .vsl-quote {
        font-size: 17px;
    }
}

/* ============================================================
   SECTION 4 UPDATES: pain-outside, pain-climax, stats box
============================================================ */
.pain-stats-box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    max-width: 860px;
    margin: 48px auto 56px;
    background: var(--navy);
    border-radius: var(--radius);
    overflow: hidden;
}

.pain-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 24px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.pain-stat:last-child {
    border-right: none;
}

.pain-stat-number {
    font-family: var(--font-head);
    font-size: 48px;
    font-weight: 800;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 10px;
}

.pain-stat-label {
    font-family: var(--font-body);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pain-outside-text {
    max-width: 760px;
    margin: 0 auto 40px;
    text-align: center;
}

.pain-outside-lead {
    font-family: var(--font-head);
    font-size: 30px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 14px;
}

.pain-outside-body {
    font-size: 18px;
    color: var(--navy);
    line-height: 1.7;
}

@media (max-width: 768px) {
    .pain-stats-box {
        grid-template-columns: repeat(2, 1fr);
    }

    .pain-stat {
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        border-right: none;
    }

    .pain-stat:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, 0.12);
    }

    .pain-stat-number {
        font-size: 38px;
    }

    
}

/* ============================================================
   SECTION 5: IMPERATIVO CATEGORICO
============================================================ */
.boston-imperative {
    position: relative;
    max-width: 860px;
    margin: 0 auto 48px;
    text-align: center;
    padding: 52px 56px;
    background: var(--white);
    border: 8px solid var(--gold);
    border-radius: 4px;
    overflow: hidden;
}

.boston-imperative::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 3px solid var(--blue);
    border-radius: 2px;
    pointer-events: none;
}

.boston-imperative-text {
    position: relative;
    z-index: 1;
    font-family: var(--font-head);
    font-size: 36px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.25;
    letter-spacing: -0.5px;
}

.boston-imperative-sub {
    display: block;
    margin-top: 10px;
    font-size: 22px;
    font-weight: 600;
    color: #D32F2F;
}

.boston-sub {
    max-width: 760px;
    margin: 0 auto 40px;
    font-size: 20px;
    color: var(--navy);
    text-align: center;
    line-height: 1.65;
}

.boston-list {
    list-style: none;
    max-width: 640px;
    margin: 0 auto;
}

.boston-list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    font-size: 18px;
    color: var(--navy);
    line-height: 1.8;
    padding: 10px 0;
    border-bottom: 1px solid rgba(44, 62, 80, 0.07);
}

.boston-list li:last-child {
    border-bottom: none;
}

.boston-warn {
    flex-shrink: 0;
    font-size: 18px;
    margin-top: 3px;
    color: #D32F2F;
}

/* ============================================================
   SEZIONE CITAZIONI — bg antracite
============================================================ */
.cit-box {
    position: relative;
    padding: 40px;
    overflow: hidden;
    border-radius: 4px;
}

.cit-box--gold {
    border-left: 6px solid var(--gold);
}

.cit-box--blue {
    border-left: 6px solid var(--blue);
}

.cit-stats-row {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin-bottom: 16px;
    font-weight: 500;
}

.cit-body {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
    margin-bottom: 16px;
}

.cit-source {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

/* ============================================================
   SECTION 6: PRENDO IL CONTROLLO - CORREZIONE BOX
============================================================ */
.controllo-hero-h {
    font-family: var(--font-head);
    font-size: 38px;
    font-weight: 800;
    color: var(--navy);
    text-align: center;
    margin-bottom: 28px;
}

.controllo-split {
    display: flex;
    align-items: stretch;
    gap: 48px;
    max-width: 1000px;
    margin: 0 auto 64px;
}

.controllo-box {
    flex: 0 0 60%;
    border: 4px solid var(--blue);
    background: rgba(0, 180, 216, 0.03);
    border-radius: 8px;
    padding: 50px 44px;
    box-shadow: 0 8px 25px rgba(0, 180, 216, 0.1);
    transition: box-shadow 0.3s ease, border-width 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 420px;
}

.controllo-box:hover {
    box-shadow: 0 12px 36px rgba(0, 180, 216, 0.18);
    border-width: 5px;
}

.controllo-box-title {
    font-family: var(--font-head);
    font-size: 24px;
    font-weight: 700;
    color: var(--blue);
    margin-bottom: 24px;
    line-height: 1.3;
}

.controllo-list {
    list-style: none;
}

.controllo-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 20px;
    color: var(--navy);
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 180, 216, 0.12);
    line-height: 1.6;
}

.controllo-list li:last-child {
    border-bottom: none;
}

.controllo-bullet {
    color: var(--gold);
    font-weight: 900;
    font-size: 24px;
    flex-shrink: 0;
    line-height: 1;
}

.controllo-photo {
    flex: 0 0 calc(40% - 48px);
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    max-height: 500px;
}

.controllo-photo img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: top center;
    display: block;
}

.controllo-climax {
    font-family: var(--font-head);
    font-size: 48px;
    font-weight: 800;
    color: var(--navy);
    text-align: center;
    margin: 24px 0 0;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .boston-imperative-text {
        font-size: 26px;
    }

    .boston-imperative-sub {
        font-size: 18px;
    }

    .controllo-split {
        flex-direction: column;
    }

    .controllo-box {
        flex: 0 0 100%;
        padding: 40px 30px;
        min-height: auto;
    }

    .controllo-photo {
        flex: 0 0 100%;
        max-height: 400px;
        margin-top: 20px;
    }
    
    .controllo-photo img {
        object-fit: contain;
        max-height: 400px;
    }

    .controllo-hero-h {
        font-size: 30px;
    }

    .controllo-climax {
        font-size: 34px;
    }

    .cit-box {
        padding: 24px 20px;
    }
}

/* ============================================================
   CHEVRON DIVIDERS — transizioni tra sezioni con sfondi diversi
============================================================ */
.chevron-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 0;
    position: relative;
    overflow: hidden;
}

.chevron-divider::before,
.chevron-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    height: 1px;
    width: calc(50% - 48px);
    transform: translateY(-50%);
}

.chevron-divider::before {
    left: 0;
}

.chevron-divider::after {
    right: 0;
}

.chevron-divider--light::before,
.chevron-divider--light::after {
    background: rgba(44, 62, 80, 0.15);
}

.chevron-divider--dark::before,
.chevron-divider--dark::after {
    background: rgba(255, 255, 255, 0.2);
}

.chevron-icon {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 28px;
    flex-shrink: 0;
}

/* ============================================================
   SECTION 7: 1-2-3 REGIA UNICA - CORREZIONE CARD
============================================================ */
.regia-supertitle {
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--blue);
    text-align: center;
    margin-bottom: 16px;
}

.regia-h2 {
    font-family: var(--font-head);
    font-size: 38px;
    font-weight: 800;
    color: var(--navy);
    text-align: center;
    line-height: 1.25;
    max-width: 720px;
    margin: 0 auto 72px;
}

.regia-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    align-items: stretch;
}

.regia-connector {
    position: absolute;
    top: 40px;
    left: calc(16.67% + 40px);
    right: calc(16.67% + 40px);
    height: 2px;
    background: repeating-linear-gradient(to right,
            var(--gold) 0px,
            var(--gold) 8px,
            transparent 8px,
            transparent 16px);
    opacity: 0.6;
    pointer-events: none;
}

.regia-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    height: 100%;
}

.regia-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.regia-card--2 {
    transition-delay: 0.25s;
}

.regia-card--3 {
    transition-delay: 0.5s;
}

.regia-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFD700 0%, #FFA500 100%);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.regia-num {
    font-family: var(--font-head);
    font-size: 36px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1;
}

.regia-box {
    background: var(--white);
    border-radius: 8px;
    border: 1px solid rgba(44, 62, 80, 0.1);
    box-shadow: 0 4px 20px rgba(44, 62, 80, 0.07);
    padding: 28px 28px 32px;
    width: 100%;
    height: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.regia-card-title {
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 700;
    color: var(--blue);
    margin-bottom: 18px;
    line-height: 1.3;
    text-align: center;
}

.regia-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.regia-bullets li {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--navy);
    line-height: 1.65;
    padding-left: 20px;
    position: relative;
}

.regia-bullets li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--gold);
    font-weight: 700;
    font-size: 13px;
    top: 2px;
}

@media (max-width: 768px) {
    .regia-h2 {
        font-size: 26px;
        margin-bottom: 48px;
    }

    .regia-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .regia-connector {
        display: none;
    }

    .regia-card--2,
    .regia-card--3 {
        transition-delay: 0s;
    }
}

/* ============================================================
   SECTION 8: METODO 3 PILASTRI - CORREZIONI
============================================================ */
.metodo-h2 {
    font-family: var(--font-head);
    font-size: 42px;
    font-weight: 800;
    color: var(--navy);
    text-align: center;
    line-height: 1.2;
    margin-bottom: 16px;
}

.metodo-tagline {
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 600;
    font-style: italic;
    color: var(--navy);
    text-align: center;
    margin-bottom: 20px;
}

.metodo-sub {
    font-size: 18px;
    color: var(--ink-muted);
    text-align: center;
    line-height: 1.7;
    max-width: 680px;
    margin: 0 auto 56px;
}

.metodo-layout {
    display: flex;
    align-items: stretch;
    max-width: 1080px;
    margin: 0 auto;
}

.metodo-logo-col {
    flex: 0 0 220px;
    padding-top: 40px;
}

.metodo-pillars-col {
    flex: 1;
    border-left: 2px solid var(--line);
}

.metodo-pillar {
    position: relative;
    padding: 48px 48px 48px 56px;
    border-bottom: 1px solid var(--line);
}

.metodo-pillar--white {
    background: var(--white);
}

.metodo-pillar--gray {
    background: var(--gray-light);
}

.metodo-pillar:last-child {
    border-bottom: none;
}

.metodo-pillar:hover {
    box-shadow: inset 0 0 0 1px rgba(0, 180, 216, 0.12);
}

.metodo-pillar-connector {
    position: absolute;
    bottom: 0;
    left: 56px;
    right: 48px;
    height: 1px;
    background: repeating-linear-gradient(to right,
            var(--navy) 0px,
            var(--navy) 6px,
            transparent 6px,
            transparent 14px);
    opacity: 0.15;
}

.metodo-pillar-inner {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.metodo-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    flex-shrink: 0;
    margin-top: 4px;
}

.metodo-icon:not([src]),
.metodo-icon[src=""] {
    background: #EEF0F2;
    border-radius: 8px;
}

.metodo-pillar-body {
    flex: 1;
}

.metodo-pillar-title {
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 12px;
    line-height: 1.3;
}

.metodo-pillar-num {
    color: var(--blue);
}

.metodo-pillar-lead {
    font-size: 16px;
    color: var(--ink-muted);
    margin-bottom: 16px;
    line-height: 1.6;
}

.metodo-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.metodo-bullets li {
    font-size: 16px;
    color: var(--navy);
    line-height: 1.6;
    padding-left: 20px;
    position: relative;
}

.metodo-bullets li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--gold);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.4;
}

.metodo-pillar-close {
    font-size: 15px;
    color: var(--ink-muted);
    line-height: 1.65;
    margin-top: 16px;
    font-style: italic;
}

.metodo-sintesi {
    text-align: center;
    padding: 72px 0 0;
    max-width: 800px;
    margin: 0 auto;
}

.metodo-sintesi-body {
    font-size: 26px;
    color: var(--navy);
    line-height: 1.75;
    margin-bottom: 48px;
}

.metodo-sintesi-body strong {
    color: var(--blue);
    font-weight: 700;
}

@media (max-width: 768px) {
    .metodo-h2 {
        font-size: 28px;
    }

    .metodo-tagline {
        font-size: 18px;
    }

    .metodo-layout {
        flex-direction: column;
    }

    .metodo-logo-col {
        display: none;
    }

    

    .metodo-pillars-col {
        border-left: none;
        width: 100%;
    }

    .metodo-pillar {
        padding: 36px 24px;
    }

    .metodo-pillar-inner {
        flex-direction: column;
        gap: 20px;
    }

    

    

    
}

/* ============================================================
   SECTION 9: CHI SONO - CORREZIONE FOTO
============================================================ */
.chisono-layout {
    display: grid;
    grid-template-columns: 40% 1fr;
    grid-template-areas:
        ".     header"
        "photo bio";
    column-gap: 56px;
    row-gap: 28px;
    max-width: 1040px;
    margin: 0 auto;
}

.chisono-header {
    grid-area: header;
    align-self: end;
}

.chisono-photo-col {
    grid-area: photo;
}

.chisono-text-col {
    grid-area: bio;
}

.chisono-photo-frame {
    border: 4px solid var(--gold);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    margin-top: 20px;
}

.chisono-photo {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center 20%;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: bicubic;
}

.chisono-photo-placeholder {
    background: rgba(255, 255, 255, 0.07);
    height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
}

.chisono-h2 {
    font-family: var(--font-head);
    font-size: 42px;
    font-weight: 800;
    color: var(--white);
    text-align: left;
    margin-bottom: 20px;
}

.chisono-gold-line {
    width: 80px;
    height: 4px;
    background: var(--gold);
    border-radius: 2px;
    margin-bottom: 16px;
}

.chisono-bio {
    font-family: var(--font-body);
    font-size: 17px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.8;
    margin-bottom: 32px;
    text-align: left;
}

.chisono-hl {
    color: var(--gold);
    font-weight: 700;
}

.chisono-diff {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chisono-diff li {
    font-family: var(--font-body);
    font-size: 16px;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.chisono-check {
    color: var(--gold);
    font-weight: 700;
    font-size: 17px;
    flex-shrink: 0;
    line-height: 1.45;
}

@media (max-width: 768px) {
    .chisono-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "photo"
            "bio";
        row-gap: 24px;
    }

    .chisono-h2 {
        font-size: 30px;
    }

    .chisono-bio {
        font-size: 16px;
    }
}

/* ============================================================
   SECTION 11: VERITÀ NEI NUMERI - CORREZIONI
============================================================ */
.numeri-h2 {
    font-family: var(--font-head);
    font-size: 40px;
    font-weight: 800;
    color: var(--navy);
    text-align: center;
    line-height: 1.25;
    margin-bottom: 20px;
}

.numeri-gold-line {
    width: 120px;
    height: 4px;
    background: var(--gold);
    border-radius: 2px;
    margin: 0 auto 48px;
}

.numeri-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1040px;
    margin: 0 auto 56px;
}

.numeri-box {
    flex: 0 0 calc(33.333% - 14px);
    background: rgba(0, 180, 216, 0.04);
    border: 2px solid rgba(0, 180, 216, 0.35);
    border-radius: 8px;
    padding: 28px 24px;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
}

.numeri-box:hover {
    border-color: var(--blue);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 180, 216, 0.15);
}

.numeri-number {
    font-family: var(--font-head);
    font-size: 56px;
    font-weight: 800;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 16px;
}

.numeri-text {
    font-size: 15px;
    color: var(--navy);
    line-height: 1.7;
    flex: 1;
    margin-bottom: 16px;
}

.numeri-source {
    font-size: 12px;
    color: var(--ink-muted);
    line-height: 1.5;
    font-style: italic;
    margin-top: auto;
}

.numeri-closing {
    font-size: 24px;
    color: var(--navy);
    text-align: center;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .numeri-box {
        flex: 0 0 calc(50% - 10px);
    }
}

@media (max-width: 600px) {
    .numeri-h2 {
        font-size: 26px;
    }

    .numeri-box {
        flex: 0 0 100%;
    }

    .numeri-number {
        font-size: 42px;
    }

    

    .numeri-closing {
        font-size: 17px;
    }
    
    
    
    
}

/* ============================================================
   SECTION 12: QUALIFICAZIONE 9 SFIDE
============================================================ */
.qual-h1 {
    font-family: var(--font-head);
    font-size: 48px;
    font-weight: 700;
    color: var(--navy);
    text-align: center;
    line-height: 1.2;
    margin-bottom: 20px;
}

.qual-intro {
    font-size: 20px;
    color: var(--navy);
    text-align: center;
    line-height: 1.6;
    margin-bottom: 40px;
}

.qual-box {
    background: var(--white);
    border: 2px solid var(--anthracite);
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);
    margin-bottom: 32px;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.qual-macro-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
}

.qual-macro-label {
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 4px;
    letter-spacing: 0.5px;
    color: var(--anthracite);
}

.qual-macro-line {
    height: 3px;
    border-radius: 2px;
    width: 100%;
}

.qual-macro-line--tattico {
    background: var(--anthracite);
}

.qual-macro-line--sistemico {
    background: var(--blue);
}

.qual-macro-line--strategico {
    background: var(--gold);
}

.qual-accordion {
    border-top: 1px solid var(--line);
}

.qual-acc-header {
    width: 100%;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    cursor: pointer;
    text-align: left;
}

.qual-acc-header:hover .qual-acc-title {
    color: var(--blue);
}

.qual-acc-title {
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 600;
    color: var(--navy);
    flex: 1;
    transition: color 0.2s;
}

.qual-acc-chevron {
    font-size: 22px;
    color: var(--blue);
    transition: transform 0.3s ease;
    line-height: 1;
}

.qual-acc-header[aria-expanded="true"] .qual-acc-chevron {
    transform: rotate(90deg);
}

.qual-acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 0 0 56px;
}

.qual-acc-body.open {
    max-height: 400px;
    padding: 0 0 24px 56px;
}

.qual-acc-copy {
    font-size: 17px;
    color: var(--anthracite);
    line-height: 1.7;
    margin-bottom: 20px;
}

.qual-cta {
    display: block;
    width: 100%;
    max-width: 400px;
    padding: 16px 35px;
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 700;
    color: var(--navy);
    background: var(--gold);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: opacity 0.2s, transform 0.2s;
}

.qual-cta:hover {
    opacity: 0.88;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .qual-h1 {
        font-size: 30px;
    }

    .qual-macro-header {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .qual-acc-body.open {
        padding-left: 0;
    }

    
}

/* ============================================================
   MODAL - CORREZIONE TESTO RIMOSSO
============================================================ */
.qual-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

.qual-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(44, 62, 80, 0.95);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
}

.qual-modal-container {
    position: relative;
    z-index: 1;
    background: var(--white);
    border-radius: 16px;
    padding: 30px 40px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.qual-modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--ink-muted);
    transition: color 0.2s;
}

.qual-modal-close:hover {
    color: var(--gold);
}

.qual-modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.qual-modal-photo-wrap {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    overflow: hidden;
    flex-shrink: 0;
}

.qual-modal-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* RIMOSSI qual-modal-h3 e qual-modal-body */

.qual-hubspot-wrap {
    min-height: auto;
    width: 100%;
    margin-top: 5px;
}

.qual-hubspot-wrap .hs-form-frame,
.qual-hubspot-wrap iframe,
.qual-hubspot-wrap form {
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 768px) {
    .qual-modal-container {
        padding: 20px 20px;
    }
    
    .qual-modal-header {
        margin-bottom: 15px;
    }
}

/* ============================================================
   EXIT INTENT
============================================================ */

/* ============================================================
   SECTION 13: FAQ
============================================================ */
.faq-h2 {
    font-family: var(--font-head);
    font-size: 40px;
    font-weight: 600;
    color: var(--navy);
    text-align: center;
    margin-bottom: 12px;
}

.faq-sub {
    font-size: 18px;
    color: var(--ink-muted);
    text-align: center;
    margin-bottom: 40px;
}

.faq-tabs {
    display: flex;
    justify-content: center;
    border-bottom: 2px solid var(--line);
    margin-bottom: 36px;
    flex-wrap: wrap;
}

.faq-tab {
    padding: 14px 24px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s;
}

.faq-tab--active {
    color: var(--navy);
    border-bottom-color: var(--gold);
}

.faq-panel {
    display: none;
    max-width: 760px;
    margin: 0 auto;
}

.faq-panel--active {
    display: block;
}

.faq-item {
    border-bottom: 1px solid var(--line);
}

.faq-item--featured {
    background: var(--gray-light);
    border-radius: 6px;
    margin-bottom: 8px;
    padding: 0 16px;
    border-bottom: none;
}

.faq-q {
    width: 100%;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 600;
    color: var(--navy);
    gap: 16px;
}

.faq-item--featured .faq-q {
    font-weight: 700;
}

.faq-chevron {
    font-size: 20px;
    color: var(--blue);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-q[aria-expanded="true"] .faq-chevron {
    transform: rotate(90deg);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.faq-a--open {
    max-height: 800px;
}

.faq-a p {
    font-size: 17px;
    color: var(--ink-muted);
    line-height: 1.7;
    margin-bottom: 12px;
    padding-bottom: 4px;
}

.faq-bottom-cta {
    text-align: center;
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid var(--line);
}

.faq-bottom-cta-text {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 24px;
}

.faq-bottom-cta-btns {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================================
   FOOTER - CORREZIONI COMPLETE
============================================================ */
#footer {
    background: var(--anthracite);
    padding: 64px 0 0;
    margin: 0;
}

.footer-logo {
    text-align: left;
    margin-bottom: 48px;
    padding-left: 0;
}

.footer-logo-img {
    width: 100px;
    height: auto;
    filter: none;
    opacity: 1;
    display: inline-block;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    padding-bottom: 48px;
}

.footer-heading {
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.footer-body {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 2;
    margin-bottom: 12px;
}

.footer-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-link:hover {
    color: var(--gold);
}

.footer-luogo svg {
    vertical-align: -2px;
    margin-right: 6px;
}

.footer-social {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.footer-social-icon {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue) !important;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}

.footer-social-icon:hover {
    background: var(--blue);
    color: var(--white) !important;
    transform: scale(1.1);
}

.footer-social-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 28px 0;
    text-align: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
}

/* PREVENZIONE DOPPIO FOOTER */
footer:not(#footer) {
    display: none !important;
}

.csml-landing-template footer:not(#footer) {
    display: none !important;
}

#footer {
    margin-bottom: 0;
}

body.csml-landing-template {
    margin: 0;
    padding: 0;
}

/* Il marchio in testa alla prima colonna, come nel piede del sito, su computer e telefono: dal 13/10
   e' il file del kit (BRAND_VISUALE_OPERATIVO §1ter), negativo sull'antracite. Prima: logo grande sopra
   le colonne e nome in Montserrat oro; il 10/10 Cosimo aveva gia' tolto il logo grande dal telefono. */
.footer-marchio { margin: 18px 0 20px; padding: 0; line-height: 0; } /* centro sulle intestazioni delle altre colonne */
.footer-marchio-img { display: block; height: 30px; width: auto; max-width: 100%; }

/* La testata: il marchio orizzontale a colori sul bianco, la C alta 38px (28 sul telefono) */
.header-logo .header-marchio { display: block; height: 38px !important; width: auto !important; max-width: none !important; }
.header-logo .header-segno { display: none; height: 32px !important; width: auto !important; max-width: none !important; }
@media (max-width: 768px) {
    .header-logo .header-marchio { height: 28px !important; }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .footer-logo {
        display: none;
    }

    .footer-marchio {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 15px;
    }

    .footer-marchio-logo {
        display: block;
        height: 36px;
        width: auto;
        flex: none;
    }
}

/* ============================================================
   STICKY CTA MOBILE
============================================================ */
.cta-sticky-mobile {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--gold);
    padding: 16px 20px;
    text-align: center;
    z-index: 998;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.cta-sticky-mobile.visible {
    transform: translateY(0);
}

.btn-sticky {
    color: var(--navy);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    .cta-sticky-mobile {
        display: block;
    }
}

/* ============================================================
   BACK TO TOP
============================================================ */
#back-to-top {
    position: fixed;
    bottom: 32px;
    right: 24px;
    width: 46px;
    height: 46px;
    background: rgba(255, 215, 0, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 997;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, background 0.2s ease;
    font-size: 18px;
    color: var(--navy);
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

#back-to-top.visible {
    opacity: 1;
    pointer-events: all;
}

#back-to-top:hover {
    background: var(--gold);
}

@media (max-width: 768px) {
    #back-to-top {
        bottom: 72px;
    }
}

/* ============================================================
   RESPONSIVE SERVIZI (aggiuntivo)
============================================================ */
@media (max-width: 1024px) {
    .servizi-grid {
        gap: 20px;
    }

    .servizi-card {
        padding: 36px 28px;
    }

    .section-h2 {
        font-size: 34px;
    }
}

@media (max-width: 768px) {
    .servizi-grid {
        grid-template-columns: 1fr;
    }

    .section-h2 {
        font-size: 28px;
    }
}

/* ============================================================
   PLACEHOLDER — SEZIONI FUTURE (non attive)
============================================================ */

/* ============================================================
   ANIMAZIONI ARCHI SVG (non usati ma mantenuti)
============================================================ */

/* ============================================================
   ACCESSIBILITÀ FOCUS STATES
============================================================ */
:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
}

/* ============================================================
   RIMOZIONE SPAZI RESIDUI DEL TEMA PARENT
============================================================ */
.csml-landing-template main,
.csml-landing-template #page {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ============================================================
   NASCONDI ELEMENTI RESIDUI DEL TITOLO DEL SITO (AGGIUNTO ORA)
============================================================ */

/* ============================================================
   FINE LANDING.CSS
============================================================ */

/* ============================================================
   REVISIONE 1.1 · TESTATA: «English» e il ritorno al sito (G-15, T-81)
============================================================ */
.header-azioni {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 24px;
}

.header-azioni [hidden] {
    display: none !important;
}

.header-torna,
.header-english {
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition);
}

.header-torna:hover,
.header-english:hover {
    color: var(--blue);
}

.torna-corto {
    display: none;
}

@media (max-width: 600px) {
    .torna-lungo { display: none; }
    .torna-corto { display: inline; }
    .header-azioni { gap: 16px; }
    .header-torna,
    .header-english { font-size: 13px; }
    /* sul telefono non c'è posto per tutto: col ritorno al sito il nome lascia spazio */
    .header-inner:has(.header-torna:not([hidden])) .header-marchio { display: none; }
    .header-inner:has(.header-torna:not([hidden])) .header-segno { display: block; }
}

/* ============================================================
   REVISIONE 1.1 · LE NOTE IN APICE (rimandano alla lista «Fonti»)
============================================================ */
sup.nota {
    font-size: 0.5em;
    line-height: 0;
    vertical-align: super;
    margin-left: 0.08em;
}

sup.nota a {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

sup.nota a:hover,
sup.nota a:focus-visible {
    color: var(--blue);
}

/* ============================================================
   REVISIONE 1.1 · PRIMO SCHERMO (G-01, G-02, G-04)
============================================================ */
/* G-01: il corpo lascia lo spazio della testata fissa, così il titolo non nasce coperto */
body.csml-landing-template {
    padding: 70px 0 0;
}

/* G-04: il numero del titolo in navy, col giallo come evidenziatore e alla misura del titolo */
.hero-h1 .highlight-pct {
    font-size: inherit;
    color: var(--navy);
    background: linear-gradient(transparent 58%, var(--gold) 58%, var(--gold) 90%, transparent 90%);
    padding: 0 0.06em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* G-02: su schermo largo la foto occupa due righe e il bottone sta subito sotto il testo */
@media (min-width: 769px) {
    .hero-inner {
        grid-template-columns: 58fr 42fr;
        padding-top: 24px;
    }
    .hero-visual {
        grid-column: 2;
        grid-row: 1 / span 2;
        min-height: 0;
        margin-top: 0;
    }
    .hero-content {
        align-self: end;
    }
    .hero-ctas {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
    }
    .photo-out-of-bounds {
        max-height: 520px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hero-inner {
        grid-template-columns: 55fr 45fr;
    }
}

/* sul telefono un respiro fra la testata e il titolo (32 dal giro del 06/10) */
@media (max-width: 768px) {
    .hero-inner {
        padding-top: 32px;
    }
}

/* ============================================================
   REVISIONE 1.1 · VIDEO: la riga sotto il video non è una citazione (T-25 B)
============================================================ */
.vsl-quote--riga::before,
.vsl-quote--riga::after {
    content: none;
}

/* ============================================================
   REVISIONE 1.1 · FASCIA DEI NUMERI: «dal» sopra il 2004, nello stile delle etichette
============================================================ */
.pain-stat-pre {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 4px;
}

/* ============================================================
   REVISIONE 1.1 · RIQUADRI DELLE FONTI: il 50% conta dentro la frase, alla misura del testo
============================================================ */
.cit-body .boston-pct-inline {
    font-size: inherit;
}

/* ============================================================
   REVISIONE 1.1 · METODO senza la colonna col logo (G-29)
============================================================ */
.metodo-layout {
    max-width: 860px;
}

.metodo-pillars-col {
    border-left: 0;
}

/* ============================================================
   REVISIONE 1.1 · LE SEI CASELLE DEI NUMERI: il dato, poi «La lettura» (T-46)
============================================================ */
/* il numero non eredita il margine del paragrafo (1em, cioè 56 px alla sua misura) */
.numeri-number {
    margin-top: 0;
}

.numeri-text {
    flex: 0 0 auto;
}

.numeri-lettura-label {
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--navy);
    margin: 0 0 6px;
}

.numeri-lettura {
    font-size: 15px;
    color: var(--anthracite);
    line-height: 1.7;
    flex: 1;
    margin-bottom: 16px;
}

/* ============================================================
   REVISIONE 1.1 · LE SFIDE: tre gruppi, la scheda in fondo, il bottone lungo e corto (T-49, T-51, T-52)
============================================================ */
#qualificazione,
.qual-box,
.qual-accordion {
    scroll-margin-top: 84px;
}

.qual-acc-quando {
    font-weight: 600;
    color: var(--navy);
}

.qual-fuori {
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    text-align: center;
    margin: 48px 0 16px;
}

/* il bottone lungo sta su una riga sul computer */
.qual-cta {
    width: auto;
    max-width: 100%;
}

.cta-corto {
    display: none;
}

@media (max-width: 768px) {
    .cta-lungo { display: none; }
    .cta-corto { display: inline; }
}

/* ============================================================
   REVISIONE 1.1 · LE PORTE DIRETTE (spente finché il centralino non è acceso)
============================================================ */
.porte-dirette[hidden],
.porte-dirette [hidden] {
    display: none !important;
}

.porte-dirette {
    max-width: 860px;
    margin: 56px auto 0;
    text-align: center;
}

.porte-en {
    font-size: 15px;
    color: var(--navy);
    margin: 0 0 20px;
}

.porte-en a {
    color: var(--navy);
    font-weight: 700;
}

.porte-riga {
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 20px;
}

.porte-bottoni {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.porta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    padding: 14px 24px;
    border: 2px solid var(--navy);
    border-radius: 4px;
    background: var(--white);
    color: var(--navy);
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}

.porta:hover,
.porta:focus-visible {
    background: var(--navy);
    color: var(--white);
}

/* ============================================================
   REVISIONE 1.1 · LA FINESTRA DEL MODULO dice la sfida (T-53 A)
============================================================ */
.qual-modal-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
}

.qual-modal-label {
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--navy);
    margin: 12px 0 4px;
    text-align: center;
}

.qual-modal-title {
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.3;
    margin: 0 0 8px;
    text-align: center;
}

.qual-modal-quando {
    font-size: 15px;
    color: var(--navy);
    line-height: 1.6;
    margin: 0 0 12px;
    text-align: center;
}

.qual-modal-promessa {
    font-size: 14px;
    color: var(--anthracite);
    line-height: 1.6;
    margin: 0 0 8px;
    text-align: center;
}

/* ============================================================
   REVISIONE 1.1 · FAQ: domande allineate a sinistra, freccia a destra (G-14);
   le parti del centralino restano spente finché c'è «hidden»
============================================================ */
[data-centralino][hidden] {
    display: none !important;
}

.faq-q {
    justify-content: flex-start;
}

.faq-chevron {
    margin-left: auto;
}

.faq-bottom-cta-text {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   REVISIONE 1.1 · FONTI (dubbio 10)
============================================================ */
.fonti {
    background: var(--white);
    padding: 24px 0 64px;
    border-top: 1px solid var(--line);
}

.fonti-h2 {
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    margin: 24px 0 16px;
}

.fonti-lista {
    margin: 0;
    padding-left: 28px;
    list-style: decimal outside;
    font-size: 13px;
    line-height: 1.6;
    color: #4A5560;
}

.fonti-lista li {
    display: list-item;
    margin-bottom: 8px;
    scroll-margin-top: 84px;
}

.fonti-lista a {
    color: var(--navy);
    word-break: break-word;
}

.fonti-torna {
    text-decoration: none;
    margin-left: 4px;
}

sup.nota a {
    scroll-margin-top: 84px;
}

/* ============================================================
   REVISIONE 1.1 · BARRA FISSA E «TORNA SU» (T-73, G-08)
============================================================ */
.cta-sticky-mobile.visible.nascosta {
    transform: translateY(100%);
}

#back-to-top {
    background: var(--navy);
    color: var(--white);
}

@media (max-width: 768px) {
    #back-to-top {
        display: none !important;
    }

    #footer {
        padding-bottom: 80px;
    }
}

/* ============================================================
   REVISIONE 1.1 · GRAFICA, BLOCCO G1: contrasti, modale, movimento
============================================================ */
:root {
    --cyan-ink: #007696;   /* G-05: il ciano come testo su chiaro */
    --ink-muted: #5F6B77;  /* G-06: le righe piccole */
    --line: #DDE2E7;       /* G-46: linee e bordi */
}

/* G-04: l'oro scuro dei numeri tolto il 06/10, le sei caselle stanno nel blocco «il giro del 06/10» in fondo */

.servizi-card-cta:hover {
    color: var(--navy);
    border-color: var(--gold);
}

/* G-05 */
.metodo-sintesi-body strong,
.controllo-box-title,
.regia-card-title,
.metodo-pillar-num,
.regia-supertitle {
    color: var(--cyan-ink);
}

.vsl-num {
    background: var(--cyan-ink);
}

/* G-06 */
.hero-microcopy {
    color: rgba(44, 62, 80, 0.75);
}

.cit-source {
    color: rgba(255, 255, 255, 0.6);
}

.numeri-source {
    color: var(--ink-muted);
    font-style: normal;
}

.faq-tab:not(.faq-tab--active) {
    color: var(--ink-muted);
}

.footer-bottom {
    color: rgba(255, 255, 255, 0.7);
}

.footer-nota {
    font-size: 13px;
    opacity: 0.7;
    margin-top: 16px;
}

/* G-09: la ✕ grande e navy, la testata non ci corre sotto, niente sfocatura */
.qual-modal-header {
    padding: 0 44px;
}

.qual-modal-close {
    color: var(--navy);
    width: 44px;
    height: 44px;
    top: 8px;
    right: 8px;
}

.qual-modal-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* G-12: le schede della regia si vedono anche senza script */
.regia-card {
    opacity: 1;
    transform: none;
}

html.anima .regia-card:not(.is-visible) {
    opacity: 0;
    transform: translateY(24px);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .regia-card,
    html.anima .regia-card:not(.is-visible) {
        opacity: 1;
        transform: none;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ============================================================
   REVISIONE 1.1 · GRAFICA, BLOCCO G2: il giallo dove serve davvero
============================================================ */
/* G-16: le frecce fra le sezioni in ciano, con meno spazio; i puntini restano */
.chevron-icon polyline {
    stroke: var(--blue);
}

.chevron-divider {
    padding: 20px 0;
}

/* G-17: il quadrato della cornice più quieto, la foto senza ombra */
.hero-frame-accent {
    width: 76px;
    height: 76px;
    box-shadow: none;
}

.photo-out-of-bounds {
    filter: none;
}

@media (max-width: 768px) {
    .hero-frame-accent {
        width: 52px;
        height: 52px;
    }
}

/* G-18: i cerchi della regia gialli pieni senza alone, la linea più leggera */
.regia-circle {
    background: var(--gold);
    box-shadow: none;
}

.regia-connector {
    opacity: 0.35;
}

/* ============================================================
   REVISIONE 1.1 · GRAFICA, BLOCCO G3: una specifica sola per tutti
   i bottoni gialli (G-19). Le regole .qual-hubspot-wrap .hs-form*,
   che non arrivavano dentro l'iframe del modulo, sono tolte (G-20).
============================================================ */
.btn-primary,
.hero-ctas .btn-primary,
.qual-cta {
    background: var(--gold);
    color: var(--navy);
    border-radius: 4px;
    box-shadow: none;
    transform: none;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 1;
}

.btn-primary:hover,
.hero-ctas .btn-primary:hover,
.qual-cta:hover {
    background: #E6C200;
    color: var(--navy);
    box-shadow: none;
    transform: none;
    opacity: 1;
}

/* ============================================================
   REVISIONE 1.1 · GRAFICA, BLOCCO G4: togliere strati
============================================================ */
/* G-22: schede dei servizi senza ombra né salto, l'oro solo sulla centrale */
.servizi-card {
    box-shadow: none;
    border: 1px solid var(--line);
    transition: none;
}

.servizi-card:hover {
    transform: none;
    box-shadow: none;
}

.servizi-card--featured {
    border: 2px solid var(--gold);
}

/* G-23: il riquadro del controllo, un accento solo (il bordo), titolo navy */
.controllo-box {
    border: 2px solid var(--blue);
    box-shadow: none;
    min-height: 0;
    transition: none;
}

.controllo-box:hover {
    border-width: 2px;
    box-shadow: none;
}

.controllo-box-title {
    color: var(--navy);
}

/* G-24: una cornice sola, niente rosso */
.boston-imperative {
    border: 3px solid var(--gold);
    padding: 44px 48px;
}

.boston-imperative::before {
    display: none;
}

.boston-imperative-sub,
.boston-warn {
    color: var(--navy);
}

/* G-25: le citazioni senza barra laterale, il colore in una linea sopra */
.cit-box--gold,
.cit-box--blue {
    border-left: 0;
}

.cit-box {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
}

.cit-box--gold {
    border-top: 2px solid var(--gold);
}

.cit-box--blue {
    border-top: 2px solid var(--blue);
}

/* G-26: le caselle dei numeri tutte uguali, bianche, senza salto */
.numeri-box {
    background: #fff;
    border: 1px solid var(--line);
}

.numeri-box:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--line);
}

/* G-27: la foto di Chi sono senza ombra */
.chisono-photo-frame {
    box-shadow: none;
}

/* G-28: niente trama di rumore né filigrana */

/* ============================================================
   REVISIONE 1.1 · GRAFICA, BLOCCO G5: le tre icone dei pilastri sullo stesso
   fondo navy, e il triangolo della realtà coi suoi tre nomi (G-32)
============================================================ */
.metodo-triangolo-riga {
    display: flex;
    align-items: center;
    gap: 40px;
}

.metodo-triangolo {
    flex: 0 0 160px;
    width: 160px;
    height: auto;
    overflow: visible;
}

.tri-lato {
    fill: none;
    stroke: var(--navy);
    stroke-opacity: 0.45;
    stroke-width: 1.5;
}

.tri-vertice {
    fill: var(--gold);
    stroke: var(--navy);
    stroke-width: 1.5;
}

.metodo-triangolo text {
    font-family: var(--font-head);
    font-size: 19px;
    font-weight: 700;
    fill: var(--navy);
}

@media (max-width: 600px) {
    .metodo-triangolo-riga {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}

/* ============================================================
   REVISIONE 1.1 · GRAFICA, BLOCCO G6: tipografia
   G-34, i titoli di sezione. Cormorant Garamond provato e scartato da
   Cosimo il 05/10 («per me montserrat vince a mani bassi»), dopo il
   confronto affiancato e i pareri delle skill impeccable (Montserrat)
   e frontend-design (Cormorant). Tenuto Montserrat regolato come dice
   impeccable: peso 700 (l'800 resta al titolo principale), 36 px,
   26 px al telefono (scelta di Cosimo), interlinea 1,15, righe bilanciate.
   Il carattere sta tutto in queste variabili. Montserrat resta anche al
   titolo principale, alla domanda delle sfide e ai bottoni.
============================================================ */
:root {
    --font-section: 'Montserrat', sans-serif;
    --font-section-weight: 700;
    --font-section-size: 36px;
    --font-section-size-tel: 26px;
}

.section-h2,
.controllo-hero-h,
.regia-h2,
.metodo-h2,
.chisono-h2,
.numeri-h2,
.faq-h2 {
    font-family: var(--font-section);
    font-weight: var(--font-section-weight);
    font-size: var(--font-section-size);
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

@media (max-width: 768px) {
    .section-h2,
    .controllo-hero-h,
    .regia-h2,
    .metodo-h2,
    .chisono-h2,
    .numeri-h2,
    .faq-h2 {
        font-size: var(--font-section-size-tel);
    }

    /* il titoletto del riquadro della regia resta un gradino sotto il titolo (26) */
    .controllo-box-title {
        font-size: 22px;
    }
}

/* G-35: la chiusa del controllo più piccola del titolo, la frase su Cosimo a 24 px */
.controllo-climax {
    font-size: 34px;
}

.controllo-frase {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .controllo-climax {
        font-size: 26px;
    }

    .controllo-frase {
        font-size: 20px;
    }
}

/* G-37: la cifra e il suo «%» alla stessa misura */
.boston-pct {
    font-size: 1.5em;
}

/* G-38: l'etichetta sopra il titolo della regia, piccola e spaziata */
.regia-supertitle {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.12em;
    color: var(--cyan-ink);
}

/* G-39: virgolette basse dove resta una citazione */
.vsl-quote::before {
    content: '«';
    font-size: 36px;
}

.vsl-quote::after {
    content: '»';
    font-size: 36px;
}

/* le due righe che non sono citazioni restano senza virgolette (T-25 B, T-34) */
.vsl-quote.vsl-quote--riga::before,
.vsl-quote.vsl-quote--riga::after {
    content: none;
}

/* ============================================================
   REVISIONE 1.1 · GRAFICA, BLOCCO G7: il telefono, ritocchi di sola misura
============================================================ */
@media (max-width: 768px) {
    /* G-40: i paragrafi lunghi a sinistra, i titoli restano centrati */
    .pain-outside-body,
    .metodo-sub,
    .boston-sub,
    .numeri-closing,
    .metodo-sintesi-body,
    .vsl-subtitle {
        text-align: left;
    }

    /* G-41: le schede dei servizi più basse */
    .servizi-card {
        padding: 28px 22px;
        gap: 14px;
    }

    .servizi-icon img {
        width: 56px !important;
        height: auto !important;
    }

    /* G-42: la foto di Chi sono non occupa tutto lo schermo */
    .chisono-photo {
        aspect-ratio: 4 / 5;
        max-height: 380px;
        object-fit: cover;
        object-position: center 20%;
    }

    /* G-43: le quattro schede delle FAQ in una riga che scorre */
    .faq-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: none;
    }

    .faq-tabs::-webkit-scrollbar {
        display: none;
    }

    .faq-tab {
        padding: 12px 16px;
        white-space: nowrap;
    }

    /* G-44: nel primo schermo il bottone prima della foto */
    .hero-ctas {
        order: 2;
        margin: 8px 0 24px;
    }

    .hero-visual {
        order: 3;
    }
}


/* ============================================================
   REVISIONE 1.1 · G-47 (3): gli stili che stavano scritti nell'HTML
============================================================ */
#servizi {
    background:var(--white);
    padding: 100px 0 44px;
}

.st-1 {
    text-align:center;
    margin-bottom: 56px;
}

.servizi-icon-img {
    width:80px;
    height:80px;
    border-radius:12px;
    object-fit:contain;
}

.st-2 {
    padding-top:28px;
}

#video-vsl {
    background:var(--white);
    padding: 80px 0 60px;
}

.st-3 {
    text-align:center;
    margin-bottom:36px;
}

.vsl-video {
    width:100%;
    aspect-ratio:16/9;
    display:block;
}

.st-4 {
    text-align:center;
    margin-top: 40px;
}

.st-5 {
    text-align:center;
    margin-top:12px;
}

.fondo-bianco {
    background:#ffffff;
}

#pain-points {
    background:#EEF0F2;
    padding: 60px 0 70px;
    position:relative;
}

.sopra-trama {
    position:relative;
    z-index:1;
}

.st-6 {
    text-align:center;
    margin-bottom:16px;
}

.gocce-grigio {
    background:#EEF0F2;
    padding:48px 0;
}

.st-7 {
    text-align:center;
    margin-top:0;
}

.fondo-grigio {
    background:#EEF0F2;
}

#problema {
    background:var(--white);
    padding: 60px 0 60px;
}

#citazioni {
    background:var(--anthracite);
    padding: 60px 0 60px;
}

.gocce-antracite {
    background:var(--anthracite);
    padding:32px 0;
}

.fondo-antracite {
    background:var(--anthracite);
}

#controllo {
    background:var(--white);
    padding: 60px 0 80px;
}

.controllo-foto {
    width:100%;
    height:auto;
    border-radius:12px;
    object-fit:contain;
    object-position:top center;
}

.st-8 {
    max-width:860px;
    margin: 80px auto 0;
}

.st-9 {
    margin-top:64px;
}

.far-crescere-img {
    width:100%;
    border-radius:0;
    box-shadow:none;
    display:block;
}

.st-10 {
    margin-top:36px;
}

.st-11 {
    text-align:center;
    margin-top:48px;
}

#regia {
    background:#EEF0F2;
    padding:80px 0 32px;
    position:relative;
}

#metodo {
    background:var(--white);
    padding:80px 0 0;
}

.st-12 {
    text-align:center;
    margin-top:48px;
    padding-bottom:80px;
}

#chi-sono {
    background:var(--anthracite);
    padding:80px 0;
}

.st-13 {
    display:none;
}

#verita-numeri {
    background:var(--white);
    padding:80px 0;
}

#qualificazione {
    background:linear-gradient(180deg,#FFD700 0%,#FFC700 100%);
    padding:80px 0;
    min-height:100vh;
}

#qualModal {
    display:none;
}

.caricamento-modulo {
    text-align:center;
    color:var(--ink-muted);
    font-size:14px;
    padding:32px 0;
}

#faq {
    background:var(--white);
    padding:80px 0;
}



/* ============================================================
   REVISIONE 1.1 · T-74: la scheda scelta arrivando dal sito è evidenziata
============================================================ */
.qual-accordion.scelta {
    background: #FFF8D6;
    box-shadow: inset 4px 0 0 var(--gold);
    border-radius: 4px;
    /* il fondo esce di lato, il testo resta allineato alle altre schede */
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
}


/* ============================================================
   REVISIONE 1.1 · PA-B285: il banner dei cookie, vestito come sul sito
   (csml-site, public/csml.css). Iubenda scrive i colori in linea con !important:
   li toglie la richiamata onBannerShown in testa alla pagina, e qui i selettori
   battono le loro regole per specificità. Sono classi di terze parti: se cambiano,
   il banner torna il loro, il consenso funziona lo stesso.
============================================================ */
html #iubenda-cs-banner .iubenda-cs-container,
html #iubenda-cs-banner .iubenda-cs-container .iubenda-cs-content {
    font-family: 'Inter', system-ui, sans-serif !important;
}
html #iubenda-cs-banner .iubenda-cs-container .iubenda-cs-content {
    background-color: #2C3E50 !important;
    color: oklch(0.96 0.006 248) !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 24px oklch(0.15 0.02 249 / 0.45) !important;
}
html #iubenda-cs-banner .iubenda-cs-container .iubenda-cs-rationale,
html #iubenda-cs-banner .iubenda-cs-container .iubenda-banner-content,
html #iubenda-cs-banner .iubenda-cs-container #iubenda-cs-paragraph,
html #iubenda-cs-banner .iubenda-cs-container .iub-p {
    color: oklch(0.96 0.006 248) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}
html #iubenda-cs-banner .iubenda-cs-container a.iubenda-privacy-policy-link,
html #iubenda-cs-banner .iubenda-cs-container a.iubenda-cs-cookie-policy-lnk,
html #iubenda-cs-banner .iubenda-cs-container .iubenda-banner-content a {
    color: #1EC0E0 !important;
    text-decoration: underline !important;
    text-underline-offset: 0.18em !important;
}
/* i tre bottoni: stessa forma e stessa misura */
html #iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-accept-btn,
html #iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-reject-btn,
html #iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-customize-btn {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-radius: 4px !important;
    padding: 0.75em 1.5em !important;
    border: 1px solid transparent !important;
}
/* «Accetto» si distingue da «Non accetto» solo per il bordo ciano */
html #iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-accept-btn {
    background-color: transparent !important;
    color: oklch(0.96 0.006 248) !important;
    border-color: #1EC0E0 !important;
}
html #iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-accept-btn:hover {
    background-color: color-mix(in oklab, #1EC0E0 16%, transparent) !important;
}
html #iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-reject-btn {
    background-color: transparent !important;
    color: oklch(0.96 0.006 248) !important;
    border-color: oklch(0.80 0.02 240) !important;
}
html #iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-reject-btn:hover {
    border-color: oklch(0.96 0.006 248) !important;
}
html #iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-customize-btn {
    background-color: transparent !important;
    color: #1EC0E0 !important;
    text-decoration: underline !important;
    text-underline-offset: 0.18em !important;
}
html #iubenda-cs-banner .iubenda-cs-container button.iubenda-cs-close-btn {
    background-color: transparent !important;
    color: oklch(0.80 0.02 240) !important;
}
/* il bottoncino fisso lo impone il pannello anche con floatingPreferencesButtonDisplay:
   false; questa regola lo spegne, il link «Preferenze cookie» del piede resta */
html body button.iubenda-tp-btn.iubenda-cs-preferences-link[data-tp-float] {
    display: none !important;
}

/* ============================================================
   REVISIONE 1.1 · IL GIRO DEL 06/10 sull'anteprima
   Le osservazioni di Cosimo, risolte coi pareri delle skill
   impeccable e frontend-design; approvato il 06/10 («ok ciano,
   sì ai cerchi, aggiorna il copione e procedi»).
============================================================ */

/* il titolo: «In silenzio.» è la coda, su una riga sua e più leggera.
   La frase che dice silenzio abbassa la voce: il salto di peso è la caduta */
.hero-h1 .h1-coda {
    display: block;
    margin-top: 0.3em;
    font-weight: 500;
}

/* computer: la cima del titolo alla linea del riquadro ciano, la foto ferma dov'era;
   lo spazio si riprende stringendo i paragrafi e il bottone */
@media (min-width: 1025px) {
    .hero-inner {
        align-items: start;
        row-gap: 24px;
    }
    .hero-visual {
        margin-top: 50px;
    }
    .hero-content {
        align-self: start;
        padding-top: 60px;
    }
    .hero-h1 {
        font-size: 44px;
        margin-bottom: 24px;
    }
    .hero-subhead {
        margin-bottom: 20px;
    }
    .hero-content .hero-subhead:last-child {
        margin-bottom: 0;
    }
    .hero-ctas .btn-primary {
        padding-top: 18px;
        padding-bottom: 18px;
    }
}

/* dove lo schermo è alto il bottone scende sotto la foto; sui portatili bassi resta accanto */
@media (min-width: 1025px) and (min-height: 760px) {
    .hero-inner {
        row-gap: 100px;
    }
}

/* le quattro aree: una riga sul computer, una sotto l'altra sul telefono,
   così nessuna sembra aggiunta dopo */
.metodo-sintesi-body .aree {
    display: block;
    white-space: nowrap;
    font-size: 23px;
}

@media (max-width: 1024px) {
    .metodo-sintesi-body .aree {
        white-space: normal;
    }
    .metodo-sintesi-body .area {
        display: block;
    }
    .metodo-sintesi-body .aree-sep {
        display: none;
    }
}

/* Fermati: il dato è testo, non un titolo; la riga ponte resta a sé */
.pain-subtitle {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--anthracite);
    max-width: 60ch;
    margin-bottom: 16px;
}

.pain-ponte {
    text-align: center;
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 600;
    color: var(--navy);
    margin: 0 auto 48px;
    text-wrap: balance;   /* al telefono «comincia.» non resta da sola */
}

@media (max-width: 768px) {
    .pain-subtitle {
        font-size: 16px;
    }
    .pain-ponte {
        font-size: 18px;
    }
}

/* la chiusa a capo dopo la virgola: si nega leggero, si afferma pieno */
.pain-outside-lead {
    line-height: 1.2;
}

.pain-outside-lead .lead-nega,
.pain-outside-lead .lead-afferma {
    display: block;
}

.pain-outside-lead .lead-nega {
    font-weight: 500;
}

.pain-outside-lead .lead-afferma {
    font-weight: 800;
}

/* un pallino ciano al posto dei trattini (Hai già perso) e dei cerchi col meno (Fermati),
   un colore solo: tre a giro farebbero pensare a categorie che non ci sono */
.boston-warn,
.pain-check {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue);
    font-size: inherit;
}

.boston-warn {
    margin-top: calc(0.9em - 4px);   /* a metà della prima riga, interlinea 1,8 */
}

.pain-check {
    margin-top: calc(0.825em - 4px); /* a metà della prima riga, interlinea 1,65 */
}

/* le sei caselle a scacchiera: l'oro vero sul navy, sul grigio il numero navy
   con l'evidenziatore giallo del primo titolo; «La lettura» in ciano */
.numeri-box:nth-child(odd) {
    background: var(--navy);
    border-color: var(--navy);
}

.numeri-box:nth-child(odd) .numeri-number {
    color: var(--gold);
}

.numeri-box:nth-child(odd) .numeri-text,
.numeri-box:nth-child(odd) .numeri-lettura {
    color: var(--gray-light);
}

.numeri-box:nth-child(odd) .numeri-lettura-label {
    color: #33C3E0;   /* il ciano appena più chiaro: sul navy il #00B4D8 non basta a una scritta piccola */
}

.numeri-box:nth-child(odd) .numeri-source {
    color: rgba(255, 255, 255, 0.65);
}

.numeri-box:nth-child(odd) .nota a {
    color: var(--gold);
}

.numeri-box:nth-child(even) {
    background: var(--gray-light);
    border-color: var(--gray-light);
}

.numeri-box:nth-child(even) .numeri-number {
    color: var(--navy);
    width: fit-content;
    padding: 0 0.06em;
    background: linear-gradient(transparent 60%, var(--gold) 60%, var(--gold) 90%, transparent 90%);
}

.numeri-box:nth-child(even) .numeri-lettura-label {
    color: var(--cyan-ink);
}

/* ============================================================
   VERSIONE 1.0 · TELEGRAM COI SUOI COLORI (Cosimo, 06/10)
   Bottone pieno nel blu di Telegram (#229ED9, dal suo logo), testo e
   logo bianchi (disegno di Simple Icons, CC0). In fondo alle domande
   sta sotto il bottone del modulo, grande uguale (altezza, carattere,
   maiuscolo spaziato: 18 + 2 di bordo = i 20 del bottone giallo).
============================================================ */
.porta--tg {
    gap: 12px;
    padding: 18px 46px;
    border-color: #229ED9;
    background: #229ED9;
    color: #fff;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.porta--tg:hover,
.porta--tg:focus-visible {
    border-color: #1B86BA;
    background: #1B86BA;
    color: #fff;
}
.porta-icona {
    flex: none;
    width: 22px;
    height: 22px;
    fill: currentColor;
}
.faq-bottom-cta-btns {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

/* ============================================================
   VERSIONE 1.0 · LA RILETTURA DI COSIMO (06/10 sera)
   R-04 Fermati: sotto il titolo lo stesso spazio che c'è fra «Se ne
   riconosci una» e il primo punto. R-05 i quattro riquadri: contenuto
   dall'alto, e dove manca «dal» il suo spazio resta, così i numeri in
   oro e la prima riga sotto stanno sulla stessa linea. R-08 la bio:
   il ruolo sotto il nome, più piccolo e in corsivo.
============================================================ */
.pain-subtitle {
    margin-top: 48px;
}
.pain-stat {
    justify-content: flex-start;
}
.pain-stat-pre {
    line-height: 19px;
}
.pain-stat > .pain-stat-number:first-child {
    margin-top: 23px;
}
.chisono-ruolo {
    display: block;
    margin-top: 10px;
    font-size: 0.5em;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.82);
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   VERSIONE 1.0 · LA CHIAMATA FINALE (R-11)
   ============================================================ */
/* la freccia segue il testo quando va a capo; sul telefono i due bottoni come quello del primo schermo */
.faq-bottom-cta-btns .btn-primary {
    display: block;
    text-wrap: balance;
}
@media (max-width: 600px) {
    .faq-bottom-cta-btns .btn-primary,
    .faq-bottom-cta-btns .porta--tg {
        font-size: 17px;
        padding-left: 20px;
        padding-right: 20px;
    }
}
/* la microcopia sotto i bottoni gialli sta su due righe anche sul telefono, e non supera il bottone */
@media (max-width: 420px) {
    .hero-microcopy {
        font-size: 14px;
    }
}
@media (max-width: 374px) {
    .hero-microcopy {
        font-size: 13px;
        letter-spacing: -0.2px;
    }
}

/* ============================================================
   VERSIONE 1.0 · I RIQUADRI DELLE FONTI COME LINEA DEL TEMPO (07/10)
   ============================================================ */
/* l'anno in alto, nel colore del riquadro; a 20px in grassetto il ciano regge il contrasto sull'antracite */
.cit-anno {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1;
    margin-bottom: 14px;
}
.cit-box--gold .cit-anno {
    color: var(--gold);
}
.cit-box--blue .cit-anno {
    color: var(--blue);
}

/* ============================================================
   VERSIONE 1.0 · IL GIRO SUL TELEFONO (07/10)
   ============================================================ */
/* la stellina sulla domanda più importante, sul computer e sul telefono */
.faq-q-testo {
    flex: 1;
}
.faq-stella {
    color: var(--gold);
    margin-right: 8px;
}
/* la didascalia della foto del primo schermo esiste solo sul telefono */
.hero-didascalia {
    display: none;
}
@media (max-width: 768px) {
    .hero-didascalia {
        display: block;
        margin-top: 14px;
        font-size: 13px;
        line-height: 1.5;
        color: var(--ink-muted);
        text-align: center;
        text-wrap: balance;
    }
    /* le tre sintesi (aree, tre fronti, pilastri) tornano al centro: qui G-40 non vale più */
    .metodo-sintesi-body {
        text-align: center;
    }
    /* le icone dei pilastri al centro */
    .metodo-icon {
        display: block;
        align-self: center;
        margin-left: auto;
        margin-right: auto;
    }
    /* la foto della regia indicava il riquadro accanto: sul telefono, sotto, non indica niente */
    .controllo-photo {
        display: none;
    }
}
@media (max-width: 600px) {
    .metodo-triangolo {
        align-self: center;
    }
}