/* --- VARIABLES --- */
:root {
    --primary-color: #E87D4D; /* Arancione Soft Livia */
    --text-color: #2B1D16; 
    --text-light: #6A5B53;
    --bg-color: #FFE7C3; /* SFONDO CREMA/ARANCIO */
    --bg-light: #ffffff;
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;
    --transition: all 0.3s ease-out;
}

/* --- RESET & BASE --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-body); color: var(--text-color); background-color: var(--bg-color); overflow-x: hidden; line-height: 1.6; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; color: var(--text-color); line-height: 1.2; margin-bottom: 1rem; }
a { text-decoration: none; color: inherit; transition: var(--transition); }
ul { list-style: none; }
.container { width: 90%; max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.section-padding { padding: 6rem 0; position: relative; }
.lead-text { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; color: var(--primary-color); }
.max-w-800 { max-width: 800px; margin: 0 auto; }
.w-100 { width: 100%; }

/* --- BOTTONI --- */
.btn { display: inline-block; padding: 0.9rem 2rem; border-radius: 50px; font-weight: 700; font-family: var(--font-heading); transition: var(--transition); cursor: pointer; text-align: center; border: none; }
.btn-primary { background-color: var(--primary-color); color: #fff; box-shadow: 0 4px 15px rgba(232, 125, 77, 0.4); }
.btn-primary:hover { transform: translateY(-3px); color: #fff; box-shadow: 0 6px 20px rgba(232, 125, 77, 0.6); }
.btn-large { padding: 1.2rem 2.5rem; font-size: 1.15rem; }
.btn-outline { background-color: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); }
.btn-outline:hover { background-color: var(--primary-color); color: #fff; }

/* --- HERO & GRIDS --- */
.hero { padding-top: 150px; padding-bottom: 6rem; position: relative; }
.hero-content { display: flex; align-items: center; gap: 4rem; }
.hero-text { flex: 1.2; }
.hero-text h1 { font-size: 3.5rem; }
.hero-text h2 { font-size: 1.6rem; color: var(--primary-color); margin: 1rem 0 2rem; }
.hero-text p { margin-bottom: 2.5rem; font-size: 1.1rem; opacity: 0.9; } 

.hero-image { flex: 1; position: relative; z-index: 1; }
.hero-image::before {
    content: '';
    position: absolute;
    top: 20px;
    left: -20px;
    width: 100%;
    height: 100%;
    background-color: #F7B37E; 
    border-radius: 30px;
    z-index: -1; 
    transform: rotate(-3deg);
}
.hero-image img { width: 100%; border-radius: 30px; box-shadow: 0 15px 35px rgba(0,0,0,0.1); position: relative; z-index: 2; display: block; }

.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 3rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; margin-top: 3rem; }

/* --- CARDS CON CAROSELLO --- */
.card { background: #fff; border-radius: 24px; box-shadow: 0 10px 30px rgba(43, 29, 22, 0.05); border: 1px solid rgba(232, 125, 77, 0.1); transition: var(--transition); overflow: hidden; display: flex; flex-direction: column; }
.card:hover { transform: translateY(-8px); box-shadow: 0 15px 40px rgba(232, 125, 77, 0.15); }

.card-image-slider { position: relative; width: 100%; height: 260px; background: linear-gradient(135deg, #FFF5F0, #FFE7C3); padding: 1rem; } 
.slider-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; height: 100%; }
.slider-track::-webkit-scrollbar { display: none; }
.slider-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; scroll-snap-align: center; border-radius: 12px; }

.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.9); border: none; width: 35px; height: 35px; border-radius: 50%; cursor: pointer; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; color: var(--primary-color); box-shadow: 0 4px 10px rgba(0,0,0,0.15); transition: var(--transition); z-index: 10; }
.slider-btn:hover { background: var(--primary-color); color: #fff; }
.slider-btn.prev { left: 5px; }
.slider-btn.next { right: 5px; }

.card-body { padding: 2rem 1.5rem; text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.card-body h3 { color: var(--primary-color); font-size: 1.3rem; }
.card-body p { color: var(--text-color); opacity: 0.8; font-size: 1rem; margin-bottom: 1.5rem; flex: 1; }

/* --- PRICING GRID --- */
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3rem; }
.pricing-card { display: flex; flex-direction: column; justify-content: space-between; padding: 2.5rem 1.5rem; border-radius: 24px; text-align: center; background: #fff; box-shadow: 0 10px 30px rgba(43, 29, 22, 0.05); border: 1px solid rgba(232, 125, 77, 0.1); transition: var(--transition); }
.price-tag { font-size: 2.2rem; color: var(--primary-color); font-weight: 900; margin: 1.5rem 0; }
.discount-tag { display: inline-block; background: #FFE7C3; color: var(--primary-color); padding: 0.4rem 1rem; border-radius: 8px; font-size: 0.9rem; font-weight: 700; margin-bottom: 1rem; }

@keyframes pulse-border {
    0% { box-shadow: 0 0 0 0 rgba(232, 125, 77, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(232, 125, 77, 0); }
    100% { box-shadow: 0 0 0 0 rgba(232, 125, 77, 0); }
}
.highlight-card { border: 3px solid var(--primary-color); position: relative; transform: scale(1.05); background-color: #fff; animation: pulse-border 2s infinite; z-index: 3;}

/* --- LAYOUT TESTI LUNGHI (LESSONS PAGE) --- */
.lesson-detail-row { display: flex; align-items: center; gap: 4rem; margin-bottom: 6rem; scroll-margin-top: 120px; }
.lesson-detail-row:nth-child(even) { flex-direction: row-reverse; }
.lesson-text { flex: 1.2; font-size: 1.05rem; }
.lesson-image { flex: 1; position: relative; }
.lesson-image img { width: 100%; border-radius: 30px; box-shadow: 0 15px 30px rgba(0,0,0,0.1); object-fit: cover; display: block; }
.lesson-image::before { content: ''; position: absolute; bottom: -15px; left: -15px; width: 100%; height: 100%; background: #F7B37E; border-radius: 30px; z-index: -1; transform: rotate(-2deg); }
.lesson-detail-row:nth-child(even) .lesson-image::before { left: auto; right: -15px; transform: rotate(2deg); }

/* --- MARQUEE INFINITO: FIX ANTIZOOM --- */
.marquee-container { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; overflow: hidden; padding: 2rem 0; display: flex; }
.marquee-track { display: flex; align-items: center; gap: 2rem; padding-left: 2rem; width: max-content; }
.marquee-track:hover { animation-play-state: paused; }

/* Velocità adattate alla nuova mole immensa di foto */
.track-reviews { animation: scroll-marquee 120s linear infinite; } /* 19 foto */
.track-students { animation: scroll-marquee 180s linear infinite; } /* 26 foto */
.track-brands { animation: scroll-marquee 60s linear infinite; } /* 9 slide */

@keyframes scroll-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-50% - 1rem)); } }

/* flex: 0 0 auto; e display: block; impediscono al browser di fare stretch o tagli! */
.review-img { width: 280px; height: auto; border-radius: 15px; box-shadow: 0 8px 25px rgba(0,0,0,0.08); flex: 0 0 auto; object-fit: cover; display: block; }
.student-img { width: 350px; height: 350px; border-radius: 20px; box-shadow: 0 8px 25px rgba(0,0,0,0.08); flex: 0 0 auto; object-fit: cover; display: block; }
.brand-img { height: 450px; width: auto; max-width: 90vw; border-radius: 15px; box-shadow: 0 8px 25px rgba(0,0,0,0.08); flex: 0 0 auto; object-fit: contain; display: block; } 

/* --- FORM PREMIUM --- */
.contact-container { position: relative; overflow: hidden; }
.contact-container::before { content: ''; position: absolute; top: -50px; right: -50px; width: 150px; height: 150px; background: var(--primary-color); border-radius: 50%; opacity: 0.1; z-index: 0; }
.styled-form { position: relative; z-index: 1; }
.styled-form .form-row { display: flex; gap: 1.5rem; }
.styled-form .form-group { flex: 1; margin-bottom: 1.5rem; text-align: left; }
.styled-form label { display: block; font-weight: 700; margin-bottom: 0.8rem; color: var(--text-color); font-size: 1.05rem; letter-spacing: 0.5px; }
.styled-form input, .styled-form textarea { width: 100%; padding: 1.2rem 1.5rem; border-radius: 16px; border: 2px solid rgba(232, 125, 77, 0.2); background-color: #fff; transition: var(--transition); font-size: 1rem; color: var(--text-color); }
.styled-form input::placeholder, .styled-form textarea::placeholder { color: #aaa; }
.styled-form input:focus, .styled-form textarea:focus { outline: none; border-color: var(--primary-color); background-color: #fff; box-shadow: 0 10px 25px rgba(232, 125, 77, 0.15); transform: translateY(-2px); }
.styled-form textarea { min-height: 180px; resize: vertical; }

/* --- PARALLAX BLOBS --- */
.parallax-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; overflow: hidden; }
.blob { position: absolute; background-color: #F7B37E; border-radius: 50%; } 
.blob-1 { width: 350px; height: 350px; top: 10%; left: -50px; animation: float 8s ease-in-out infinite; opacity: 0.4; }
.blob-2 { width: 450px; height: 450px; bottom: -100px; right: -50px; animation: float 12s ease-in-out infinite reverse; opacity: 0.3; }
.blob-3 { width: 200px; height: 200px; top: 50%; left: 80%; animation: float 6s ease-in-out infinite 2s; opacity: 0.5; }
@keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-40px); } 100% { transform: translateY(0); } }

/* --- NAVBAR STAGGERED --- */
.staggered-menu-wrapper { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1000; pointer-events: none; }
.staggered-menu-header { position: fixed; top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1rem 5%; background-color: var(--primary-color); box-shadow: 0 4px 15px rgba(0,0,0,0.1); pointer-events: auto; z-index: 1010; }
.logo { font-family: var(--font-heading); font-size: clamp(1.1rem, 3vw, 1.5rem); font-weight: 700; color: #fff !important; display: flex; align-items: center; white-space: nowrap; }
.nav-logo-img { height: 40px; width: 40px; border-radius: 50%; object-fit: cover; margin-right: 12px; border: 2px solid #fff; }

/* --- BURGER MENU --- */
.sm-toggle { background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.sm-icon { position: relative; width: 30px; height: 20px; }
.sm-icon-line { position: absolute; left: 0; width: 100%; height: 3px; background: #fff; transition: all 0.3s ease; border-radius: 2px; }
.line-1 { top: 0; }
.line-2 { top: 50%; transform: translateY(-50%); }
.line-3 { bottom: 0; }
.sm-toggle.is-open .line-1 { top: 50%; transform: translateY(-50%) rotate(45deg); background: var(--text-color); }
.sm-toggle.is-open .line-2 { opacity: 0; transform: translateX(-15px); }
.sm-toggle.is-open .line-3 { bottom: 50%; transform: translateY(50%) rotate(-45deg); background: var(--text-color); }

.sm-prelayers { position: absolute; top: 0; right: 0; width: clamp(300px, 40vw, 500px); height: 100%; z-index: 1001; }
.sm-prelayer { position: absolute; top: 0; right: 0; width: 100%; height: 100%; transform: translateX(100%); }

/* --- SIDEBAR --- */
.staggered-menu-panel { 
    position: absolute; top: 0; right: 0; 
    width: clamp(300px, 40vw, 500px); height: 100%; 
    background: var(--bg-color);
    z-index: 1002; transform: translateX(100%); 
    display: flex; flex-direction: column; 
    padding: 8rem 4rem 3rem; pointer-events: auto; 
    box-shadow: -15px 0 40px rgba(0,0,0,0.08); 
    border-left: 5px solid var(--primary-color); 
}
.sm-panel-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.sm-panel-itemWrap { overflow: hidden; }
.sm-panel-item { font-family: var(--font-heading); font-size: 3rem; font-weight: 900; color: var(--text-color); text-transform: uppercase; display: inline-block; transform: translateY(100%); transition: color 0.3s; }
.sm-panel-item:hover, .sm-panel-item.active { color: var(--primary-color); }
.sm-socials { margin-top: auto; }
.sm-socials-title { font-size: 1rem; color: var(--primary-color); margin-bottom: 1rem; }
.sm-socials-list { list-style: none; display: flex; gap: 1.5rem; }
.sm-socials-link { font-weight: 600; opacity: 0; transform: translateY(20px); display: inline-block; }
.sm-socials-link:hover { color: var(--primary-color); }

/* --- FOOTER --- */
footer { padding: 3rem 0; background-color: var(--primary-color); color: #fff; margin-top: 4rem; box-shadow: 0 -4px 15px rgba(0,0,0,0.05); }
footer h3 { color: #fff !important; margin-bottom: 0.5rem; }
footer p a:hover { color: var(--text-color) !important; }

.footer-developer { margin-top: 2rem; font-size: clamp(0.7rem, 2.5vw, 0.95rem); color: #FAF5F0; opacity: 0.8; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.5rem; white-space: nowrap; }
.footer-developer strong { font-weight: 700; color: #fff; }
.footer-developer a { font-weight: 700; color: #fff; }
.footer-developer a:hover { color: var(--text-color); text-decoration: underline; }

/* --- PRIVACY BANNER --- */
.privacy-banner { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px); width: 90%; max-width: 650px; background: #fff; padding: 1.5rem; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); z-index: 2000; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; opacity: 0; transition: all 0.5s ease-out; pointer-events: auto; }
.privacy-banner.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.privacy-text { font-size: 0.95rem; color: var(--text-color); flex: 1; }
.privacy-text a { color: var(--primary-color); font-weight: 600; text-decoration: underline; }
.privacy-text a:hover { color: var(--text-color); }
.privacy-btn { padding: 0.7rem 1.5rem; font-size: 0.9rem; flex-shrink: 0; }

.back-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--primary-color); font-weight: 700; margin-bottom: 2rem; font-size: 1.1rem; transition: var(--transition); }
.back-link:hover { color: var(--text-color); transform: translateX(-5px); }

.img-circular { border-radius: 50%; width: 100%; max-width: 350px; display: block; margin: 0 auto; box-shadow: 0 15px 35px rgba(0,0,0,0.1); }
.badge { display: inline-block; padding: 0.5rem 1rem; border-radius: 50px; font-weight: 600; font-size: 0.9rem; margin-top: 1rem; }

/* --- ANIMATIONS --- */
.fade-in { animation: fadeIn 1s ease-out forwards; opacity: 0; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.scroll-anim { opacity: 0; transform: translateY(40px); transition: opacity 1s ease-out, transform 1s ease-out; }
.scroll-anim.active { opacity: 1; transform: translateY(0); }

/* --- RESPONSIVE / MOBILE --- */
@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .hero-content { flex-direction: column-reverse; text-align: center; }
    .hero-text h1 { font-size: 2.5rem; }
    .hero-image::before { top: 10px; left: -10px; }
    
    .grid-4 { grid-template-columns: 1fr; }
    .grid-2 { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: 1fr; }
    
    .sm-prelayers, .staggered-menu-panel { width: 100vw; }
    .staggered-menu-panel { padding: 6rem 2rem 2rem; border-left: none; border-top: 5px solid var(--primary-color); }
    .sm-panel-item { font-size: 2.5rem; }
    
    .highlight-card { transform: scale(1); margin: 1rem 0; z-index: 1;}
    .styled-form .form-row { flex-direction: column; gap: 0; }
    .privacy-banner { flex-direction: column; text-align: center; bottom: 0; width: 100%; border-radius: 20px 20px 0 0; transform: translateX(-50%) translateY(100%); }
    .privacy-btn { width: 100%; }
    .lesson-detail-row, .lesson-detail-row:nth-child(even) { flex-direction: column; gap: 2rem; margin-bottom: 4rem; text-align: left; }
    
    .review-img { width: 220px; }
    .brand-img { height: 350px; width: auto; max-width: 90vw; } 
    .student-img { width: 250px; height: 250px; }
}