/* =================================== */
/* 0. SETUP & VARIABILI */
/* =================================== */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /* COLORI PRINCIPALI */
 
    --secondary-color: #000000; /* Testo Scuro */

    --section-bg: #D6D6D6; /* Grigio Sezioni */

    /* HIGHLIGHT VERDI */
    --highlight-green: #136d3c; /* Verde Smeraldo */
    --highlight-dark-green: #2A9F5E; /* Verde Hover */
    
    /* FONT */
    --font-family: 'Arial', sans-serif; 
}

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    background-color: var(--background-dark);
}

/* =================================== */
/* 1. HEADER BANNER (PREMIUM DESIGN) */
/* =================================== */
.header-banner {
    width: 100%;
    min-height: 750px;
    background: radial-gradient(circle at 0% 50%, #fdfbf9 0%, #e8e4dc 100%);
    color: var(--secondary-color);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Decorazioni Sfondo (Blobs) */
.bg-decoration {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 1;
    opacity: 0.6;
}

.blob-1 {
    width: 400px;
    height: 400px;
    background: rgba(19, 109, 60, 0.15);
    top: -100px;
    left: -100px;
}

.blob-2 {
    width: 500px;
    height: 500px;
    background: rgba(255, 255, 255, 0.8);
    bottom: -100px;
    right: -100px;
}

.content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1300px;
    padding: 0 30px;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
    height: 100%;
}

/* 1.1 Testo Header */
.text-content {
    max-width: 600px;
    padding: 40px 0;
    z-index: 12;
    text-align: left;
}

.badge-pill {
    display: inline-block;
    background: rgba(19, 109, 60, 0.1);
    color: var(--highlight-green);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    border: 1px solid rgba(19, 109, 60, 0.2);
}

.pre-title {
    font-family: 'Merriweather', serif;
    font-style: italic;
    font-size: 1.8em;
    font-weight: 400;
    margin: 0 0 10px 0;
    color: #555;
}

.main-title {
    font-family: "Inter", sans-serif;
    font-size: 5em;
    line-height: 0.95;
    margin: 0 0 30px 0;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: -2px;
    color: #1a1a1a;
}

.pro-buyer-text {
    background: linear-gradient(90deg, var(--highlight-green), #0b4625);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.description {
    font-family: 'Merriweather', serif;
    font-size: 1.25em;
    line-height: 1.6;
    color: #4a4a4a;
    margin-bottom: 40px;
    border-left: 3px solid var(--highlight-green);
    padding-left: 20px;
}

/* 1.2 Pulsanti CTA */
.cta-buttons {
    display: flex;
    align-items: center;
    gap: 20px;
}

.button.primary {
    background: red;
    color: white;
    padding: 18px 40px;
    border-radius: 50px;
    font-size: 1.2em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(173, 70, 22, 0.4);
    border: none;
    text-decoration: none;
    cursor: pointer;
}

.button.primary:hover {

    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(219, 92, 53, 0.6);
    padding-right: 50px;
}

.button.primary svg {
    transition: transform 0.3s ease;
}

.button.primary:hover svg {
    transform: translateX(5px);
}

.trust-badges {
    margin-top: 25px;
    display: flex;
    gap: 20px;
    font-size: 0.9em;
    color: #666;
    font-weight: 600;
    opacity: 0.8;
}

/* 1.3 Immagine Header */
.image-wrapper {
    position: relative;
    width: 45%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.image-backdrop {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #ffffff 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    z-index: 1;
}

.header-image {
    position: relative;
    z-index: 2;
    max-width: 100%;
    height: auto;
    max-height: 850px;
    object-fit: contain;
    filter: drop-shadow(10px 10px 20px rgba(0,0,0,0.15)); 
}

/* =================================== */
/* 2. SEZIONI GENERALI & TITOLI */
/* =================================== */
.who-it-suits-section {
    padding: 80px 0 100px 0;
    background-color: var(--section-bg); 
    color: var(--secondary-color); 
    font-family: var(--font-family);
    position: relative;
    overflow: hidden; 
}

.who-it-suits-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.section-title-gradient {
    font-size: 3.5em; 
    font-weight: 800;
    text-align: center;
    margin-bottom: 70px; 
    color: var(--secondary-color); 
    text-transform: uppercase;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.section-title-gradient .highlight {
    color: var(--highlight-green);
    -webkit-text-stroke: 1px var(--highlight-green);
    text-shadow: 0 0 5px rgba(19, 109, 60, 0.5);
}

.title-underline {
    position: absolute;
    bottom: -20px; 
    width: 100%; 
    max-width: 400px; 
}

.title-underline path, .title-underline circle {
    stroke: var(--highlight-green);
    fill: var(--highlight-green);
}

.section-title-sub {
    font-size: 3em; 
    font-weight: 900; 
    text-align: center;
    margin-top: 100px; 
    margin-bottom: 60px;
    color: var(--secondary-color); 
    display: block; 
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 5px;
    border-bottom: 4px solid var(--highlight-green);
}

/* Classe speciale per ridurre il margine se necessario */
.section-title-sub.no-margin-top {
    margin-top: 30px !important;
    margin-bottom: 40px;
}

/* =================================== */
/* 3. AUDIENCE TAGS (PREMIUM LIST) */
/* =================================== */
.audience-tags {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 20px;
    margin-top: 50px;
    padding: 0 10px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.tag {
    padding: 18px 40px 18px 60px; /* Spazio extra a sx per icona */
    border-radius: 50px;
    font-size: 1.1em; 
    font-weight: 600;
    font-family: "Inter", sans-serif;
    line-height: 1.4;
    position: relative; 
    cursor: default;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.25); 
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    text-align: left;
}

.tag::before {
    content: '✔';
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1em;
    background-color: rgba(255, 255, 255, 0.25);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}

/* Hover solo su desktop */
@media (hover: hover) {
    .tag:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        z-index: 2;
    }
}

/* Gradienti Tag */
.tag-accent {
    background: linear-gradient(135deg, var(--highlight-green) 0%, #0e522d 100%);
}
.tag-primary {
    background: linear-gradient(135deg, #000000 0%, #3a3052 100%);
}

/* =================================== */
/* 4. GRIGLIA BENEFICI */
/* =================================== */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 40px;
}

.benefit-item {
    display: flex;
    align-items: flex-start; 
    gap: 20px;
    background-color: rgba(255, 255, 255, 0.8); 
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
    border-left: 4px solid var(--highlight-green);
}

.benefit-item p {
    font-size: 1.05em;
    line-height: 1.5;
    color: var(--secondary-color); 
    opacity: 0.9;
}

.benefit-item strong {
    color: var(--highlight-green);
}

.benefit-icon {
    min-width: 40px; 
    height: 40px;
    background-color: var(--highlight-green);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: white; 
    font-weight: bold;
    flex-shrink: 0; 
}

/* Icone SVG Backgrounds */
.icon-star, .icon-platform, .icon-tech, .icon-trend, .icon-practice, .icon-support {
    background-size: 60%; 
    background-repeat: no-repeat; 
    background-position: center; 
}
.icon-star { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.887 1.48-8.279L.332 9.306l8.332-1.151z"/></svg>'); }
.icon-platform { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/></svg>'); }
.icon-tech { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M13 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V9l-7-7zM6 20V4h6v5h5v11H6z"/></svg>'); }
.icon-trend { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M16 6l-3 3v4l4 4 3-3V6zM8 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>'); }
.icon-practice { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V8h10v3zm-4 4H9v-3h6v3z"/></svg>'); }
.icon-support { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M21 15c0-4.62-3.87-8-8-8-4.62 0-8 3.87-8 8v7H1c-.55 0-1 .45-1 1s.45 1 1 1h22c.55 0 1-.45 1-1s-.45-1-1-1h-4v-7zm-4 0c0-2.76-2.24-5-5-5s-5 2.24-5 5v5h10v-5z"/></svg>'); }

/* =================================== */
/* 5. SLIDER LOGHI */
/* =================================== */
.slider-section {
background-color: #ffffff; /* Sfondo BIANCO */
    padding: 40px 20px; /* Spaziatura interna */
    max-width: 1200px; /* Larghezza massima */
    margin: 40px auto; /* Centrato orizzontalmente + spazio sopra/sotto */
    text-align: center;
    
    /* AGGIUNTE PREMIUM */
    border-radius: 20px; /* Angoli arrotondati */

}

/* Il resto rimane uguale per far scorrere i loghi */
.slider-viewport {
    width: 100%;
    overflow: hidden;
    background: transparent;
    position: relative;
    padding: 10px 0;
}

.slider-track {
    display: flex;
    transition: transform 0.6s ease-in-out;
    width: 100%;
}

.slide {
    min-width: 33.333%;
    box-sizing: border-box;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide img {
    width: 100%;
    height: 120px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.8;
    transition: all 0.3s ease;
}

.slide img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* =================================== */
/* 6. SEZIONE ROI (CUBETTI) */
/* =================================== */
.roi-section {
    padding: 60px 20px 100px 20px;
    background-color: #fff;
    text-align: center;
}

.roi-subtitle {
    font-size: 1.3em;
    color: var(--secondary-color);
    margin-bottom: 80px;
    opacity: 0.8;
    
    /* AGGIUNGI QUESTE 3 RIGHE PER CENTRARE */
    text-align: center;      /* Centra il testo */
    margin-left: auto;       /* Centra il blocco nella pagina */
    margin-right: auto;      /* Centra il blocco nella pagina */
    max-width: 800px;        /* Evita che il testo diventi troppo lungo su schermi grandi */
}

.roi-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.roi-card {
    background: #f9f9f9;
    border: 2px solid #eee;
    border-radius: 20px;
    padding: 40px 30px;
    width: 300px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.roi-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--highlight-green);
}

.roi-card.highlight-card {
    background: linear-gradient(145deg, #ffffff, #e8fff1);
    border: 2px solid var(--highlight-green);
}

.roi-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bag-icon { background-color: #e0f2f1; color: var(--primary-color); }
.cube-icon { background-color: var(--highlight-green); color: white; }
.roi-icon svg { width: 40px; height: 40px; }

.roi-card-title {
    font-size: 1.5em;
    font-weight: 800;
    margin: 0 0 15px 0;
    text-transform: uppercase;
    color: var(--secondary-color);
}

.roi-price {
    font-size: 1.8em;
    font-weight: 900;
    padding: 10px 20px;
    border-radius: 10px;
    margin-bottom: 15px;
    display: inline-block;
    background-color: var(--highlight-green);
    color: white;
    box-shadow: 0 5px 15px rgba(19, 109, 60, 0.3);
}

.roi-status {
    font-size: 1.4em;
    font-weight: 700;
    color: var(--highlight-green);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.roi-desc { font-size: 1em; line-height: 1.4; color: #666; margin: 0; }

.roi-arrow {
    color: var(--highlight-green);
    width: 50px;
    height: 50px;
    animation: pulseArrow 2s infinite;
}

@keyframes pulseArrow {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 0.8; }
}


.slide img[alt="Bottega Veneta"],
.slide img[alt="Dolce & Gabbana"] {
    /* Modifica il valore 1.3 per renderli più o meno grandi */
    transform: scale(2); 
}

/* Opzionale: Aggiusta l'effetto hover per questi loghi specifici 
   in modo che non diventino TROPPO grandi quando ci passi sopra col mouse */
.slide img[alt="Bottega Veneta"]:hover,
.slide img[alt="Dolce & Gabbana"]:hover {
    filter: grayscale(0%);
    opacity: 1;
    /* Un leggero aumento rispetto alla loro dimensione base ingrandita (1.3 -> 1.4) */
    transform: scale(2); 
}

/* =================================== */
/* 7. RESPONSIVE / MEDIA QUERIES */
/* =================================== */

/* 1024px (Tablet Landscape / Laptops) */
@media (max-width: 1024px) {
    .main-title { font-size: 3.5em; }
    .image-wrapper { width: 40%; }
}

/* 900px (Tablet Portrait) - Header Breakpoint */
@media (max-width: 900px) {
    .header-banner {
        align-items: flex-start;
        padding-top: 40px;
        min-height: auto;
        background: radial-gradient(circle at 50% 20%, #fdfbf9 0%, #e8e4dc 100%);
    }

    .content-wrapper { flex-direction: column; justify-content: flex-start; }
    .text-content { text-align: center; padding: 20px 0 0 0; max-width: 100%; }
    .badge-pill { margin: 0 auto 20px auto; }
    .main-title { font-size: 3.2em; margin-bottom: 20px; }
    
    .description { border-left: none; padding: 0; font-size: 1.1em; }
    .cta-buttons { justify-content: center; }
    .trust-badges { justify-content: center; }

    .image-wrapper { width: 100%; height: auto; margin-top: 40px; justify-content: center; }
    .image-backdrop { width: 300px; height: 300px; }
    .header-image { max-height: 500px; }
    
    .who-it-suits-section { padding: 50px 0; }
    .section-title-gradient { font-size: 2.2em; margin-bottom: 50px; }
    .title-underline { max-width: 250px; bottom: -15px; }
    .section-title-sub { font-size: 1.8em; margin-top: 60px; margin-bottom: 40px; }
    .benefits-grid { grid-template-columns: 1fr; gap: 25px; }
}

/* 768px (Mobile Large) */
@media (max-width: 768px) {
    /* Audience Tags a Lista */
    .audience-tags {
        flex-direction: column; 
        align-items: center;
        gap: 12px; 
        padding: 0 15px;
    }

    .tag {
        width: 100%; 
        max-width: 400px; 
        font-size: 0.95em; 
        padding: 15px 20px 15px 55px; 
        border-radius: 15px; /* Più squadrato su mobile */
        justify-content: flex-start; 
    }

    .tag::before { left: 15px; width: 24px; height: 24px; font-size: 1em; }

    /* Slider a 2 colonne */
    .slide { min-width: 50%; }
    .slide img { height: 90px; }

    /* ROI Section verticale */
    .roi-container { flex-direction: column; gap: 20px; }
    .roi-card { width: 100%; max-width: 350px; }
    
    .roi-arrow {
        transform: rotate(90deg);
        margin: 10px 0;
        animation: pulseArrowMobile 2s infinite;
    }
    
    @keyframes pulseArrowMobile {
        0% { transform: rotate(90deg) scale(1); }
        50% { transform: rotate(90deg) scale(1.2); }
        100% { transform: rotate(90deg) scale(1); }
    }
}

/* 480px (Mobile Small) */
@media (max-width: 480px) {
    .section-title-gradient { font-size: 1.8em; }
    .section-title-sub { font-size: 1.5em; }
    
    /* Reset margini titolo ridotto su mobile */
    .section-title-sub.no-margin-top {
        margin-top: 20px !important;
    }
}


/* =================================== */
/* 8. SEZIONE ABOUT ME (PREMIUM) */
/* =================================== */
.about-section {
    padding: 100px 20px;
    background-color: #ffffff; /* Sfondo pulito */
    position: relative;
    overflow: hidden;
}

.about-wrapper {
    display: flex;
    align-items: center;
    gap: 60px; /* Spazio tra foto e testo */
    justify-content: center;
}

/* --- COLONNA IMMAGINE --- */
.about-image-col {
    flex: 1;
    max-width: 500px;
    position: relative;
}

.image-frame {
    position: relative;
    border-radius: 30px;
    overflow: visible; /* Per far uscire il badge */
}

/* Decorazione bordo dietro la foto */
.image-frame::before {
    content: '';
    position: absolute;
    top: 20px;
    left: -20px;
    width: 100%;
    height: 100%;
    border: 2px solid var(--highlight-green);
    border-radius: 30px;
    z-index: 0;
}

.about-photo {
    width: 100%;
    height: auto;
    border-radius: 30px;
    position: relative;
    z-index: 1;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    object-fit: cover;
}

/* Badge Flottante (10+ Anni) */
.experience-badge {
    position: absolute;
    bottom: 40px;
    right: -30px; /* Esce un po' a destra */
    background: linear-gradient(135deg, var(--highlight-green), #0b4625);
    color: white;
    padding: 20px 30px;
    border-radius: 20px;
    text-align: center;
    z-index: 2;
    box-shadow: 0 10px 20px rgba(19, 109, 60, 0.4);
    border: 4px solid #ffffff; /* Bordo bianco per staccare */
}

.exp-number {
    display: block;
    font-size: 2.5em;
    font-weight: 800;
    line-height: 1;
    font-family: "Inter", sans-serif;
}

.exp-text {
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

/* --- COLONNA TESTO --- */
.about-text-col {
    flex: 1;
    max-width: 600px;
}

.about-title {
    font-size: 3em;
    font-weight: 900;
    line-height: 1.2;
    margin: 15px 0 30px 0;
    color: var(--secondary-color);
    font-family: 'Inter', sans-serif;
}

.highlight-text {
    color: var(--highlight-green);
    position: relative;
    display: inline-block;
}

/* Sottolineatura creativa sotto "Moda Italiana" */
.highlight-text::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 10px;
    background-color: rgba(19, 109, 60, 0.15);
    z-index: -1;
    transform: skewX(-15deg);
}

.about-bio {
    font-size: 1.15em;
    line-height: 1.6;
    color: #555;
    margin-bottom: 20px;
    font-family: 'Merriweather', serif;
}

/* LISTA PUNTI */
.about-list {
    list-style: none;
    padding: 0;
    margin: 30px 0;
}

.about-list li {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    align-items: flex-start;
}

.check-circle {
    background-color: rgba(19, 109, 60, 0.1);
    color: var(--highlight-green);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
    margin-top: 3px;
}

/* FIRMA */
.signature-block {
    margin-top: 40px;
}

.signature-block p {
    font-size: 1em;
    color: #888;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

.signature-font {
    font-family: 'Great Vibes', cursive; /* Font corsivo elegante */
    font-size: 3.5em;
    color: var(--highlight-green);
    line-height: 1;
    transform: rotate(-5deg); /* Leggera rotazione realistica */
    display: inline-block;
}


/* RESPONSIVE MOBILE */
@media (max-width: 900px) {
    .about-wrapper {
        flex-direction: column;
        gap: 60px;
        text-align: center; /* Centra testo su mobile */
    }

    .about-image-col {
        max-width: 100%;
        padding: 0 20px;
    }
    
    .image-frame::before {
        left: 10px; /* Aggiusta il bordo decorativo su mobile */
        top: 10px;
    }

    .experience-badge {
        right: 10px; /* Meno fuori su mobile */
        bottom: -20px;
        padding: 15px 20px;
    }
    
    .exp-number { font-size: 2em; }

    .about-title {
        font-size: 2.2em;
    }

    .about-list li {
        text-align: left; /* Mantiene la lista leggibile a sinistra */
    }

    .signature-block {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.profit-demonstration-section {
    padding: 80px 20px 100px 20px;
    background-color: #ffffff; /* Sfondo pulito */
}

.phases-container {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Altezza uguale per le card */
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto 60px auto;
}

/* --- STILE DELLE CARD DI FASE --- */
.phase-card {
    flex: 1;
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 25px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* La fase centrale (Buyer Price) è evidenziata */
.phase-card.highlight-phase {
    border: 2px solid var(--highlight-green);
    background: linear-gradient(to bottom, #ffffff, #f0fdf4);
    transform: scale(1.03); /* Leggermente più grande per enfasi */
    z-index: 2;
    box-shadow: 0 15px 30px rgba(19, 109, 60, 0.15);
}

.phase-card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* Badge "Этап 1, 2, 3" */
.phase-badge {
    background-color: #eee;
    color: #666;
    font-size: 0.9em;
    font-weight: 700;
    padding: 5px 15px;
    border-radius: 30px;
    align-self: flex-start;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.phase-badge.accent-badge {
    background-color: var(--highlight-green);
    color: white;
}

/* Wrapper Immagine e Prezzo */
.phase-image-wrapper {
    position: relative;
    margin-bottom: 20px;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #eee;
}

.phase-img {
    width: 100%;
    height: 77%; /* Altezza fissa per uniformità */
    object-fit: cover; /* Taglia l'immagine se necessario per riempire */
    display: block;
}

/* Sticker Sconto (-60%) */
.discount-sticker {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #d82b00; /* Rosso acceso per lo sconto */
    color: white;
    font-weight: 900;
    font-size: 1.1em;
    padding: 8px 12px;
    border-radius: 8px;
    transform: rotate(5deg);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

/* --- STILE DEI TAG PREZZO --- */
.price-tag {
    padding: 15px;
    text-align: center;
    background: #fff;
    border-top: 1px solid #eee;
}

.price-label {
    display: block;
    font-size: 0.9em;
    color: #777;
    margin-bottom: 5px;
    font-weight: 600;
    text-transform: uppercase;
}

.price-value {
    display: block;
    font-size: 1.8em;
    font-weight: 900;
    font-family: "Inter", sans-serif;
}

/* Stili specifici per i prezzi */
.retail-price .price-value { color: #333; text-decoration: line-through; opacity: 0.7; }
.buyer-price .price-value { color: var(--highlight-green); font-size: 2em; } /* Prezzo più grande e verde */
.resell-price .price-value { color: #333; }
.price-note { display: block; font-size: 0.85em; color: var(--highlight-green); margin-top: 5px; font-weight: 600;}

.phase-desc {
    font-size: 1em;
    color: #666;
    line-height: 1.5;
    text-align: center;

    flex-grow: 1; /* Spinge il contenuto in basso */
}

/* --- BOX PROFITTO FINALE --- */
.final-profit-box {
    margin-top: 20px;
    background: var(--highlight-green);
    color: white;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 20px rgba(19, 109, 60, 0.3);
    animation: pulseProfit 2s infinite;
}

@keyframes pulseProfit {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

.profit-label { display: block; font-size: 0.9em; font-weight: 700; opacity: 0.9; margin-bottom: 5px; letter-spacing: 1px; }
.profit-amount { display: block; font-size: 2.5em; font-weight: 900; line-height: 1; }
.profit-subtext { font-size: 0.85em; opacity: 0.8; }

/* --- FRECCE DI PROCESSO --- */
.process-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--highlight-green);
    opacity: 0.5;
    padding: 0 10px;
}

/* --- TESTO RIASSUNTIVO FINALE --- */
.profit-summary-text {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.25em;
    line-height: 1.6;
    background-color: #f4f9f6; /* Sfondo verdino chiaro */
    padding: 30px;
    border-radius: 20px;
    border: 2px solid var(--highlight-green);
}


/* =================================== */
/* RESPONSIVE MOBILE (Per la sezione Profitto) */
/* =================================== */
@media (max-width: 900px) {
    .phases-container {
        flex-direction: column; /* Incolonna le card */
        gap: 30px;
    }

    /* Ruota le frecce verso il basso su mobile */
    .process-arrow {
        transform: rotate(90deg);
        margin: -10px 0; /* Riduce lo spazio verticale */
    }

    /* Rimuove l'ingrandimento della card centrale su mobile per risparmiare spazio */
    .phase-card.highlight-phase {
        transform: scale(1);
    } 

    .phase-img {
        /* Lascia che l'altezza si adatti */
        max-height: 700px;
    }
    
    .profit-summary-text {
        font-size: 1.1em;
        padding: 20px;
    }
}

/* =================================== */
/* 10. SEZIONE RECENSIONI (CAROUSEL) */
/* =================================== */
.reviews-section {
    padding: 80px 0 100px 0;
    background-color: #f9f9f9; /* Grigio chiarissimo per stacco */
    overflow: hidden;
}

.container-fluid {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

.reviews-header {
    text-align: center;
    padding: 0 20px;
    margin-bottom: 40px;
}

/* Wrapper principale con posizionamento relativo */
.reviews-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

/* BINARIO DI SCORRIMENTO */
.reviews-track {
    display: flex;
    gap: 20px;
    overflow-x: auto; /* Permette lo scroll orizzontale */
    scroll-snap-type: x mandatory; /* Fa fermare le card al centro */
    scroll-behavior: smooth;
    padding: 20px 5%; /* Padding laterale per far vedere le card tagliate */
    -webkit-overflow-scrolling: touch; /* Scroll fluido su iOS */
    
    /* Nasconde la scrollbar standard */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
}

.reviews-track::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* CARD RECENSIONE */
.review-card {
    min-width: 300px; /* Larghezza fissa card */
    max-width: 300px;
    height: auto;
    flex-shrink: 0; /* Impedisce alla card di schiacciarsi */
    scroll-snap-align: center; /* La card si ferma al centro */
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
}

.review-card:hover {
    transform: translateY(-10px); /* Si alza leggermente all'hover */
    box-shadow: 0 15px 40px rgba(19, 109, 60, 0.15);
}

/* IMMAGINE RECENSIONE */
.review-img {
    width: 100%;
    height: auto;
    display: block;
    /* Opzionale: se vuoi tutte le card alte uguali, scommenta sotto */
    /* height: 500px; object-fit: cover; object-position: top; */
}

/* PULSANTI NAVIGAZIONE (Frecce) */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: white;
    border: 1px solid #eee;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--highlight-green);
    transition: all 0.3s ease;
}

.nav-btn:hover {
    background-color: var(--highlight-green);
    color: white;
    transform: translateY(-50%) scale(1.1);
}

.prev-btn { left: 20px; }
.next-btn { right: 20px; }

/* SFUMATURA LATERALE (Effetto Lusso) */
.fade-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 5;
    pointer-events: none; /* Permette di cliccare attraverso */
}

.fade-overlay.left {
    left: 0;
    background: linear-gradient(to right, #f9f9f9, transparent);
}

.fade-overlay.right {
    right: 0;
    background: linear-gradient(to left, #f9f9f9, transparent);
}

/* HINT ANIMATO PER MOBILE */
.mobile-swipe-hint {
    display: none; /* Nascosto su desktop */
    text-align: center;
    margin-top: 20px;
    color: #888;
    font-weight: 600;
    font-size: 0.9em;
    opacity: 0.8;
    animation: fadeInOut 3s infinite;
}

.hand-icon {
    font-size: 1.5em;
    display: inline-block;
    margin-right: 10px;
    animation: swipeHand 1.5s infinite;
}

@keyframes swipeHand {
    0% { transform: translateX(0); }
    50% { transform: translateX(20px); }
    100% { transform: translateX(0); }
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* MEDIA QUERIES */
@media (max-width: 768px) {
    .nav-btn { display: none; } /* Nascondi frecce su mobile */
    .fade-overlay { width: 30px; } /* Riduci sfumatura */
    
    .mobile-swipe-hint { display: block; } /* Mostra hint swipe */
    
    .review-card {
        min-width: 80vw; /* Card più larghe su mobile (80% dello schermo) */
        max-width: 80vw;
    }
    
    .reviews-track {
        padding: 20px 10%; /* Centra la prima card */
        gap: 15px;
    }
}


/* =================================== */
/* 11. SEZIONE OFFERTA (CTA FINALE) */
/* =================================== */
.offer-section {
    padding: 80px 20px 120px 20px;
    background: linear-gradient(to bottom, #f9f9f9, #ffffff);
}

.offer-card {
    max-width: 800px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 30px;
    padding: 50px 40px;
    text-align: center;
    position: relative;
    /* Ombra profonda per farla "galleggiare" */
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
    border: 2px solid rgba(19, 109, 60, 0.1); /* Bordo verde sottile */
    overflow: hidden;
}

/* Bordo superiore colorato */
.offer-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, #d82b00, #ff5722); /* Rosso urgenza */
}

/* Badge "Fuoco" */
.offer-badge {
    display: inline-block;
    background: #ffebe6;
    color: #d82b00;
    font-weight: 800;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.9em;
    margin-bottom: 25px;
    border: 1px solid #ffcdd2;
    animation: pulseBadge 2s infinite;
}

@keyframes pulseBadge {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(216, 43, 0, 0.2); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(216, 43, 0, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(216, 43, 0, 0); }
}

.offer-title {
    font-family: "Inter", sans-serif;
    font-size: 2.8em;
    font-weight: 900;
    margin: 0 0 15px 0;
    line-height: 1.1;
    color: var(--secondary-color);
}

.offer-subtitle {
    font-size: 1.2em;
    color: #666;
    margin-bottom: 40px;
}

/* BLOCCO PREZZO */
.price-block {
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.old-price {
    font-size: 1.8em;
    color: #999;
    text-decoration: line-through;
    font-weight: 600;
}

.new-price {
    font-size: 4.5em;
    font-weight: 900;
    color: var(--highlight-green);
    line-height: 1;
    font-family: "Inter", sans-serif;
    letter-spacing: -2px;
}

.save-label {
    background: var(--highlight-green);
    color: white;
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 0.9em;
    font-weight: 700;
    margin-top: 10px;
    transform: rotate(-2deg); /* Leggera inclinazione per dinamismo */
}

/* LISTA CARATTERISTICHE */
.offer-features {
    list-style: none;
    padding: 0;
    margin: 0 auto 40px auto;
    max-width: 500px;
    text-align: left;
}

.offer-features li {
    margin-bottom: 15px;
    font-size: 1.1em;
    color: #444;
    border-bottom: 1px dashed #eee;
    padding-bottom: 10px;
}

.offer-features li:last-child { border-bottom: none; }

/* URGENZA */
.urgency-timer p {
    color: #d82b00;
    font-weight: 700;
    font-size: 1.1em;
    margin-bottom: 30px;
}

/* PULSANTE GIGANTE */
.cta-button-big {
    background: linear-gradient(135deg, #d82b00 0%, #bf2600 100%); /* Rosso per la vendita */
    color: white;
    padding: 25px 50px;
    border-radius: 50px;
    font-size: 1.4em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 15px 40px rgba(216, 43, 0, 0.4);
    text-decoration: none;
}

.cta-button-big:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 50px rgba(216, 43, 0, 0.6);
    background: linear-gradient(135deg, #ff3d00 0%, #d82b00 100%);
}

.guarantee-text {
    margin-top: 20px;
    font-size: 0.85em;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .offer-card {
        padding: 40px 20px;
    }
    
    .offer-title { font-size: 2em; }
    .new-price { font-size: 3.5em; }
    
    .cta-button-big {
        width: 100%; /* Pulsante full width su mobile */
        justify-content: center;
        padding: 20px;
        font-size: 1.1em;
    }
    
    .offer-features {
        text-align: left; /* Mantiene leggibilità */
        font-size: 0.95em;
    }
}

/* =================================== */
/* 12. SEZIONE PROGRAMMA (ACCORDION) */
/* =================================== */
.curriculum-section {
    padding: 80px 20px 100px 20px;
    background-color: #f4f4f4;
}

.accordion-container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.accordion-item {
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

/* Stile del bottone (la riga che si clicca) */
.accordion-header {
    width: 100%;
    padding: 25px 30px;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.3s ease;
}

.accordion-header:hover {
    background-color: #fafafa;
}

/* Parte sinistra (Numero + Titolo) */
.header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.module-num {
    font-family: "Inter", sans-serif;
    font-size: 1.5em;
    font-weight: 900;
    color: var(--highlight-green);
    opacity: 0.8;
    min-width: 40px;
}

.module-title {
    font-family: "Inter", sans-serif;
    font-size: 1.2em;
    font-weight: 700;
    color: var(--secondary-color);
    margin: 0;
}

/* Icona (+ che diventa -) */
.accordion-icon {
    font-size: 2em;
    font-weight: 300;
    color: #ccc;
    transition: transform 0.3s ease, color 0.3s ease;
    line-height: 0.5;
}

/* Contenuto nascosto (Descrizione) */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out; /* Animazione apertura */
}

.content-inner {
    padding: 0 30px 30px 90px; /* Padding interno allineato col titolo */
    font-size: 1.05em;
    color: #555;
    line-height: 1.6;
}

/* --- STATO ATTIVO (Quando è aperto) --- */
.accordion-item.active {
    box-shadow: 0 10px 25px rgba(19, 109, 60, 0.1);
    border-color: var(--highlight-green);
}

.accordion-item.active .accordion-icon {
    transform: rotate(45deg); /* Il + ruota e diventa una X */
    color: var(--highlight-green);
}

.accordion-item.active .module-num {
    color: var(--highlight-dark-green);
    transform: scale(1.1);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .accordion-header {
        padding: 20px;
    }
    
    .header-left {
        gap: 15px;
    }
    
    .module-num {
        font-size: 1.2em;
        min-width: 30px;
    }
    
    .module-title {
        font-size: 1.1em;
    }
    
    .content-inner {
        padding: 0 20px 25px 20px; /* Meno padding su mobile */
    }
}


/* =================================== */
/* 13. FOOTER PREMIUM */
/* =================================== */
.site-footer {
    background-color: #0f1110; /* Nero "morbido" elegante */
    color: #ffffff;
    position: relative;
    margin-top: 80px; /* Spazio dalla sezione precedente */
}

/* --- 1. FINAL CALL TO ACTION --- */
.footer-cta-wrapper {
    position: absolute;
    top: -60px; /* Fa "scavalcare" il box sopra il footer */
    left: 0;
    width: 100%;
    padding: 0 20px;
    display: flex;
    justify-content: center;
}

.footer-cta-box {
    background: var(--highlight-green);
    width: 100%;
    max-width: 900px;
    padding: 40px 50px;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 20px 40px rgba(19, 109, 60, 0.3);
    /* Pattern sottile di sfondo opzionale */
    background-image: linear-gradient(45deg, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.05) 75%, transparent 75%, transparent);
    background-size: 20px 20px;
}

.footer-cta-box h3 {
    margin: 0;
    font-size: 1.8em;
    font-weight: 800;
    font-family: "Inter", sans-serif;
}

.footer-cta-box p {
    margin: 10px 0 0 0;
    font-size: 1.1em;
    opacity: 0.9;
}

/* Bottone nel footer (Bianco per contrasto sul verde) */
.footer-btn {
    background-color: white !important;
    color: var(--highlight-green) !important;
    border: none !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
    padding: 15px 30px;
    white-space: nowrap;
}

.footer-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
}

/* --- 2. CONTENUTO FOOTER --- */
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 120px 20px 40px 20px; /* Padding top alto per compensare il box CTA */
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; /* Colonna brand più larga */
    gap: 60px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 60px;
}

/* Brand Column */
.footer-logo {
    font-family: "Inter", sans-serif;
    font-size: 1.8em;
    font-weight: 800;
    margin-bottom: 20px;
    color: white;
}

.pro-text {
    color: var(--highlight-green);
}

.footer-desc {
    color: #aaa;
    line-height: 1.6;
    font-size: 0.95em;
    max-width: 350px;
}

/* Headers Colonne */
.footer-heading {
    font-size: 1.1em;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
    color: white;
    font-weight: 700;
}

/* Liste Contatti e Link */
.contact-list, .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-list li, .footer-links li {
    margin-bottom: 15px;
}

/* Link Contatti con Icone */
.contact-link {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.icon-box {
    width: 35px;
    height: 35px;
    background-color: rgba(255,255,255,0.05);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--highlight-green);
    transition: all 0.3s ease;
}

.icon-box svg {
    width: 18px;
    height: 18px;
}

.contact-link:hover { color: white; }
.contact-link:hover .icon-box { background-color: var(--highlight-green); color: white; }

/* Link Semplici */
.footer-links a {
    color: #aaa;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 0.95em;
}

.footer-links a:hover {
    color: var(--highlight-green);
    padding-left: 5px; /* Piccolo movimento a destra */
}

/* --- 3. COPYRIGHT BAR --- */
.footer-bottom {
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    color: #666;
    font-size: 0.85em;
}

.made-in {
    font-family: 'Merriweather', serif;
    font-style: italic;
}

/* --- RESPONSIVE FOOTER --- */
@media (max-width: 900px) {
    .footer-content {
        grid-template-columns: 1fr; /* Tutto su una colonna */
        gap: 40px;
        text-align: center;
    }

    .footer-desc { margin: 0 auto; }

    .contact-link {
        justify-content: center; /* Centra le icone */
    }

    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    /* CTA Box su Mobile */
    .footer-cta-wrapper {
        position: relative;
        top: 0;
        margin-bottom: -40px; /* Sovrapposizione parziale */
        padding: 0 15px;
    }

    .footer-cta-box {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        padding: 30px 20px;
    }
    
    .site-footer {
        padding-top: 40px; /* Aggiusta lo spazio */
    }
}


/* =========================================
   PREMIUM CURRICULUM SECTION (High Visibility)
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;600&display=swap');

:root {
    --p-green: #136d3c;       
    --p-dark: #1a1a1a;        
    /* Sfondo scuro per far risaltare le card bianche */
    --p-section-bg: #E0E0E0;  
    /* Colore card chiusa */
    --p-card-bg: #FFFFFF;     
}

.premium-curriculum {
    background-color: var(--p-section-bg); 
    padding: 100px 20px;
    font-family: 'Inter', sans-serif;
}

.container {
    max-width: 900px;
    margin: 0 auto;
}

/* --- HEADER --- */
.section-header {
    text-align: center;
    margin-bottom: 70px;
}

.pre-title {
    display: block;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--p-green);
    font-weight: 700;
    margin-bottom: 10px;
}

.title-luxury {
    font-family: 'Playfair Display', serif;
    font-size: 3.5em;
    color: var(--p-dark);
    margin: 0;
    line-height: 1.1;
}

.divider-line {
    width: 60px;
    height: 4px; /* Linea più spessa */
    background-color: var(--p-green);
    margin: 25px auto;
}

.subtitle-luxury {
    font-size: 1.2em;
    color: #444; /* Testo più scuro per leggibilità */
    line-height: 1.6;
    font-weight: 400;
}

/* --- ACCORDION CONTAINER --- */
.premium-accordion {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* --- ITEM / CARD (Il cuore del design) --- */
.p-accordion-item {
    background: var(--p-card-bg);
    border-radius: 12px;
    
    /* BORDO GRIGIO VISIBILE (Fondamentale) */
    border: 1px solid #BDBDBD; 
    
    /* OMBRA PER STACCARE */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}

/* Hover: Si alza e il bordo diventa verde chiaro */
.p-accordion-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
    border-color: var(--p-green);
}

/* ACTIVE: Bordo verde forte e ombra profonda */
.p-accordion-item.active {
    border: 2px solid var(--p-green); /* Bordo più spesso quando attivo */
    box-shadow: 0 15px 40px rgba(19, 109, 60, 0.15);
    background: #fff;
    z-index: 2; /* Porta la card sopra le altre */
}

/* --- HEADER CLICCABILE --- */
.p-accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 30px; /* Un po' più compatto */
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}

.p-header-left {
    display: flex;
    align-items: center;
    gap: 25px;
}

/* NUMERO */
.p-num {
    font-family: 'Playfair Display', serif;
    font-size: 2.2em;
    font-weight: 700; /* Numero più grassetto */
    color: #999; /* Grigio scuro visibile */
    line-height: 1;
    min-width: 40px;
}

.p-accordion-item.active .p-num {
    color: var(--p-green);
}

/* TITOLO */
.p-title {
    font-size: 1.25em;
    font-weight: 700; /* Titolo bello evidente */
    color: var(--p-dark);
    text-transform: uppercase; /* Più professionale */
    letter-spacing: 0.5px;
}

/* ICONA */
.p-icon-wrapper {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #F0F0F0; /* Sfondo grigino */
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--p-dark);
    transition: all 0.3s ease;
}

.p-accordion-item.active .p-icon-wrapper {
    background-color: var(--p-green);
    border-color: var(--p-green);
    color: white;
    transform: rotate(45deg);
}

/* --- CONTENUTO --- */
.p-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background-color: #FCFCFC; /* Sfondo leggermente diverso per il testo interno */
    border-top: 1px solid #eee; /* Linea separatrice interna */
}

.p-content-inner {
    padding: 30px 40px;
    padding-left: 95px; /* Allineato col testo */
}

.p-content-inner p {
    margin: 0;
    color: #333; /* Testo molto leggibile */
    line-height: 1.7;
    font-size: 1.05em;
}

/* --- MOBILE --- */
@media (max-width: 768px) {
    .title-luxury { font-size: 2.2em; }
    .p-accordion-header { padding: 20px; }
    .p-header-left { gap: 15px; }
    .p-num { font-size: 1.5em; min-width: 30px; }
    .p-title { font-size: 1em; }
    .p-content-inner { padding: 20px; padding-left: 20px; }
}