:root { 
    /* Colori Semantici di Sistema - LIGHT MODE */
    --bg-primary: #ffffff; 
    --bg-secondary: #f5f5f7; 
    
    --color-text: #1d1d1f; 
    --color-text-secondary: #6e6e73; /* A11Y FIX: Scurito per contrasto AA */
    --color-border: #d2d2d7; 
    --color-accent: #0071e3; 
    --focus-ring: rgba(0, 113, 227, 0.5);
    
    --nav-bg: rgba(255, 255, 255, 0.85); 
    --nav-hover: rgba(0, 0, 0, 0.05); 
    
    /* Colori Assoluti (Per le sezioni "Pro") */
    --always-dark-surface: #1c1c1e;
    --always-light-text: #ffffff;
    --always-light-text-sec: #a1a1a6;
    
    --sf-pro: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
} 

@media (prefers-color-scheme: dark) { 
    :root { 
        /* Colori Semantici di Sistema - DARK MODE */
        --bg-primary: #000000; 
        --bg-secondary: #1c1c1e; 
        
        --color-text: #f5f5f7; 
        --color-text-secondary: #a1a1a6; 
        --color-border: #38383a; 
        --color-accent: #2997ff; 
        --focus-ring: rgba(41, 151, 255, 0.5);
        
        --nav-bg: rgba(28, 28, 30, 0.85); 
        --nav-hover: rgba(255, 255, 255, 0.1); 
    } 
    /* Inversione Logo e Icona in Dark Mode */
    .brand img, .adaptive-icon { filter: invert(1) hue-rotate(180deg); }
    
    .os-card, .plan-card, .split-visual { box-shadow: none !important; }
    .faq-card { background: #2c2c2e !important; border-color: #38383a !important; }
    .plan-safeguard-icon { box-shadow: none !important; border-color: var(--color-border) !important; }
}

* { margin:0; padding:0; box-sizing:border-box; } 
body { font-family: var(--sf-pro); background: var(--bg-primary); color: var(--color-text); line-height: 1.47059; font-weight: 400; letter-spacing: -0.022em; -webkit-font-smoothing: antialiased; overflow-x: hidden; } 
html { scroll-behavior: smooth; }

/* ACCESSIBILITÀ - FOCUS RINGS */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; border-radius: 8px; box-shadow: 0 0 0 4px var(--focus-ring); }
nav a.nav-link:focus-visible, nav span.nav-link:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-nav-download:focus-visible { border-radius: 980px; }
.btn-close:focus-visible, .btn-reader:focus-visible { border-radius: 50%; }

/* ANIMAZIONI SCROLL */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; }
.reveal.active { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }

/* REGOLE DI SPACING GLOBALI */
.section-primary { background: var(--bg-primary); padding: 160px 0; }
.section-secondary { background: var(--bg-secondary); padding: 160px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }

/* TIPOGRAFIA E GERARCHIA */
h2 { font-size: 56px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; margin-bottom: 24px; color: var(--color-text); }
h3 { font-size: 32px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 16px; line-height: 1.15; color: var(--color-text); }
p { font-size: 21px; line-height: 1.5; color: var(--color-text-secondary); margin-bottom: 24px; }
.lead-text { font-size: 24px; max-width: 720px; margin: 0 auto 64px auto; color: var(--color-text-secondary); line-height: 1.4; font-weight: 500; text-align: center; letter-spacing: -0.015em; } 

.badge { display: inline-block; padding: 6px 14px; background: rgba(0,0,0,0.05); color: var(--color-text); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 980px; margin-bottom: 24px; }
@media (prefers-color-scheme: dark) { .badge { background: rgba(255,255,255,0.1); } }

/* NAVIGAZIONE */
nav { position: fixed; top: 0; width: 100%; background: var(--nav-bg); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--color-border); z-index: 100; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } 
nav .container { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } 
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--color-text); cursor: pointer; justify-self: start;} 
.brand h1 { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; margin: 0; } 
nav .links { display: flex; gap: 8px; justify-self: center; } 
nav a.nav-link, nav span.nav-link { color: var(--color-text); text-decoration: none; font-size: 15px; font-weight: 500; padding: 8px 18px; border-radius: 980px; transition: background 0.2s, color 0.2s; cursor: pointer; } 
nav a.nav-link:hover, nav span.nav-link:hover { background: var(--nav-hover); color: var(--color-text); } 
.nav-actions { justify-self: end; }

/* BOTTONI CON MICRO-INTERAZIONI */
.btn-nav-download { background: var(--color-text); color: var(--bg-primary); font-size: 14px; font-weight: 600; padding: 8px 18px; border-radius: 980px; text-decoration: none; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s; display: inline-block; }
.btn-nav-download:hover { transform: scale(1.03); opacity: 0.95; }
.btn-nav-download:active { transform: scale(0.97); }

.btn-primary { display: inline-flex; align-items: center; justify-content: center; background: var(--color-text); color: var(--bg-primary); font-size: 19px; font-weight: 600; padding: 20px 48px; border-radius: 980px; text-decoration: none; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s; cursor: pointer; border: none; text-align: center; } 
.btn-primary:hover { transform: scale(1.02); box-shadow: 0 10px 20px rgba(0,0,0,0.1); } 
.btn-primary:active { transform: scale(0.98); }

.btn-secondary { display: inline-block; background: transparent; color: var(--color-text); font-size: 17px; font-weight: 600; padding: 14px 32px; border-radius: 980px; text-decoration: none; border: 1px solid var(--color-border); cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.2s; text-align: center;}
.btn-secondary:hover { background: var(--nav-hover); border-color: var(--color-text-secondary); }
.btn-secondary:active { transform: scale(0.97); }

.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; } 
.text-center { text-align: center; }

/* HERO SECTION */ 
.hero { text-align: center; padding-top: 150px; padding-bottom: 80px; background: var(--bg-primary); display: flex; flex-direction: column; align-items: center; } 
.hero-content { max-width: 85%; padding: 0 20px; } 
.hero h2 { font-size: 80px; font-weight: 700; letter-spacing: -0.04em; margin-bottom: 24px; line-height: 1.05; } 
.hero p { font-size: 28px; font-weight: 500; margin-bottom: 48px; letter-spacing: -0.015em; max-width: 760px; margin-left: auto; margin-right: auto; } 
.price-badge { display: inline-block; background: var(--bg-secondary); color: var(--color-accent); padding: 8px 16px; border-radius: 12px; font-size: 14px; font-weight: 700; margin-bottom: 32px; text-transform: uppercase; letter-spacing: 0.03em; border: 1px solid var(--color-border); }

/* CAROSELLO */
.screenshots-scroller { display: flex; gap: 32px; overflow-x: auto; padding: 40px 5vw 100px; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.screenshots-scroller::-webkit-scrollbar { display: none; }
.screenshot-item { flex: 0 0 300px; border-radius: 44px; border: 10px solid var(--always-dark-surface); scroll-snap-align: center; box-shadow: 0 30px 60px rgba(0,0,0,0.15); background: #000; overflow: hidden; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.screenshot-item:hover { transform: translateY(-8px); }
.screenshot-item img { width: 100%; height: auto; display: block; }

/* OS GRID */
.os-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; max-width: 1200px; margin: 0 auto; padding: 0 24px; } 
.os-card { background: var(--bg-primary); border-radius: 40px; display: flex; flex-direction: column; overflow: hidden; position: relative; box-shadow: 0 20px 40px rgba(0,0,0,0.03); border: 1px solid var(--color-border); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s; } 
.os-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(0,0,0,0.08); }
.os-card.span-12 { grid-column: span 12; }
.os-card.span-7 { grid-column: span 7; }
.os-card.span-6 { grid-column: span 6; }
.os-card.span-5 { grid-column: span 5; }

.os-card.tall { min-height: 640px; padding-top: 64px; align-items: center; text-align: center; }
.os-card.short { min-height: 380px; padding: 48px; justify-content: center; text-align: left; }
.os-card.hero-card { min-height: 480px; padding: 80px 40px; justify-content: center; text-align: center; }

.os-card.dark { background: var(--always-dark-surface); border-color: transparent; }
.os-card.dark h3 { color: var(--always-light-text); }
.os-card.dark p { color: var(--always-light-text-sec); }
.os-card.dark .badge { background: rgba(255,255,255,0.15); color: var(--always-light-text); border: none; }
@media (prefers-color-scheme: dark) {
    .os-card.dark { border-color: var(--color-border); } 
}

.os-card-content { max-width: 540px; margin: 0 auto; z-index: 2; width: 100%; }
.os-card.tall .os-card-content { margin-bottom: 48px; display: flex; flex-direction: column; align-items: center; }
.os-card.span-12 h3 { font-size: 48px; }
.os-card p { font-size: 21px; margin: 0; line-height: 1.4; max-width: 480px; opacity: 0.9; }

.bento-visual { flex-grow: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; position: relative; margin-top: auto; }
.bento-visual img { width: 100%; height: 100%; border-radius: 20px 20px 0 0; object-fit: cover; object-position: top; display: block; }

/* MANIFESTO MIGLIORATO (Apple Cinematic Style) */
.section-dark { background: var(--always-dark-surface); padding: 180px 0; text-align: center; position: relative; overflow: hidden;}
.section-dark::before { content: ''; position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 800px; height: 600px; background: radial-gradient(ellipse at center, rgba(255,255,255,0.06) 0%, transparent 70%); pointer-events: none; }
.manifesto-content { max-width: 860px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2;}
.manifesto h2 { font-size: 72px; letter-spacing: -0.04em; margin-bottom: 40px; background: linear-gradient(180deg, #ffffff 0%, #a1a1a6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.manifesto p { font-size: 28px; line-height: 1.4; font-weight: 500; color: var(--always-light-text-sec); margin-bottom: 24px;}
.manifesto-quote { font-size: 36px; font-weight: 600; letter-spacing: -0.02em; color: var(--always-light-text); margin-top: 80px; }

/* SPLIT SECTIONS */
.split-section { display: flex; align-items: center; gap: 80px; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.split-section.reverse { flex-direction: row-reverse; }
.split-text { flex: 1; padding-right: 24px; }
.split-section.reverse .split-text { padding-right: 0; padding-left: 24px; }
.split-visual { flex: 1; height: 520px; border-radius: 40px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--bg-secondary); border: 1px solid var(--color-border); }
.split-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.split-visual:hover img { transform: scale(1.05); }

/* SEZIONE PIANI */
.plan-card { max-width: 980px; margin: 0 auto; background: var(--bg-primary); border-radius: 40px; padding: 80px 64px; text-align: left; position: relative; overflow: hidden; border: 1px solid var(--color-border); box-shadow: 0 30px 60px rgba(0,0,0,0.05); }
.plan-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px; margin-bottom: 56px; max-width: 780px; margin-left: auto; margin-right: auto; }
.plan-card ul { list-style: none; padding: 0; margin: 0; }
.plan-card li { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; font-size: 19px; line-height: 1.4; font-weight: 500; color: var(--color-text);}
.plan-card li span.check { color: var(--color-accent); font-weight: 700; font-size: 20px; }

.plan-safeguard { display: flex; align-items: flex-start; gap: 24px; background: var(--bg-secondary); padding: 40px; border-radius: 32px; text-align: left; border: 1px solid var(--color-border); }
.plan-safeguard-icon { width: 64px; height: 64px; background: var(--bg-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 10px 20px rgba(0,0,0,0.06); color: var(--color-text); border: 1px solid rgba(0,0,0,0.05); }
.plan-safeguard-text h3 { font-size: 21px; font-weight: 600; margin-bottom: 8px; color: var(--color-text); } /* A11Y FIX: h4 -> h3 */
.plan-safeguard-text p { font-size: 17px; margin: 0; color: var(--color-text-secondary); line-height: 1.5; }

/* SEZIONE DOWNLOAD */
#download { padding: 80px 24px; }
.download-wrapper { background: linear-gradient(145deg, var(--always-dark-surface) 0%, #000000 100%); border-radius: 48px; padding: 100px 40px; text-align: center; max-width: 1080px; margin: 0 auto; position: relative; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.1); }
.download-wrapper::before { content: ''; position: absolute; top: -50%; left: 50%; width: 800px; height: 800px; transform: translateX(-50%); background: radial-gradient(circle, rgba(0, 113, 227, 0.15) 0%, transparent 60%); pointer-events: none; }
.download-wrapper h2 { color: var(--always-light-text); font-size: 64px; margin-bottom: 20px; }
.download-wrapper p { color: var(--always-light-text-sec); font-size: 24px; margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; }

.app-icon-mockup { width: 100px; height: 100px; padding: 10px; border-radius: 24px; background: var(--bg-primary); margin: 0 auto 32px; display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 40px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.2); overflow: hidden; position: relative; z-index: 2;}
.app-icon-mockup img { width: 100%; height: 100%; object-fit: contain; transition: filter 0.3s ease; }

.download-action-station { display: inline-flex; align-items: center; gap: 32px; background: rgba(255,255,255,0.05); padding: 16px 24px 16px 16px; border-radius: 32px; border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); position: relative; z-index: 2;}
.qr-container { width: 100px; height: 100px; background: #ffffff !important; padding: 12px; border-radius: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.2); margin: 0; } 
.qr-container img { width: 100%; height: 100%; }
.download-action-text { text-align: left; display: flex; flex-direction: column; gap: 12px; }
.download-action-text span { font-size: 14px; font-weight: 600; color: var(--always-light-text-sec); text-transform: uppercase; letter-spacing: 0.05em; }

/* FAQ PREVIEW */
.faq-preview-section { max-width: 1080px; margin: 160px auto 0; padding: 0 24px; }
.faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-bottom: 56px; }
.faq-card { background: var(--bg-primary); padding: 40px; border-radius: 32px; text-align: left; border: 1px solid var(--color-border); box-shadow: 0 10px 30px rgba(0,0,0,0.02); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.faq-card:hover { transform: translateY(-4px); }
.faq-card h3 { font-size: 21px; font-weight: 600; margin-bottom: 16px; line-height: 1.3; color: var(--color-text); } /* A11Y FIX: h4 -> h3 */
.faq-card p { font-size: 17px; margin-bottom: 0; color: var(--color-text-secondary); line-height: 1.5; }

/* FOOTER */
footer { padding: 100px 24px 40px; background: var(--bg-secondary); border-top: 1px solid var(--color-border); }
.footer-container { max-width: 1080px; margin: 0 auto; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 64px; border-bottom: 1px solid var(--color-border); padding-bottom: 64px; margin-bottom: 32px; }
.footer-brand { flex: 1; min-width: 300px; }
.footer-brand h2 { font-size: 24px; margin-bottom: 16px; font-weight: 600; }
.footer-brand p { font-size: 15px; color: var(--color-text-secondary); max-width: 320px; line-height: 1.6;}
.footer-links-wrapper { display: flex; gap: 64px; flex-wrap: wrap; }
.footer-col h3 { font-size: 13px; font-weight: 600; color: var(--color-text); margin-bottom: 24px; text-transform: uppercase; letter-spacing: 0.05em; } /* A11Y FIX: h4 -> h3 */
.footer-col ul { list-style: none; padding: 0; }
.footer-col ul li { margin-bottom: 16px; }
.footer-col ul li span, .footer-col ul li a { font-size: 14px; color: var(--color-text-secondary); cursor: pointer; transition: color 0.2s; font-weight: 500; text-decoration: none; }
.footer-col ul li span:hover, .footer-col ul li a:hover { color: var(--color-text); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; }
.footer-bottom p { font-size: 13px; color: var(--color-text-secondary); margin: 0; }
.footer-legal-links { display: flex; gap: 24px; }
.footer-legal-links span { font-size: 13px; color: var(--color-text-secondary); cursor: pointer; text-decoration: none; transition: color 0.2s; }
.footer-legal-links span:hover { color: var(--color-text); }

/* MODALE DINAMICO A11Y */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--bg-primary); z-index: 1000; overflow-y: auto; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, background-color 0.4s ease, color 0.4s ease; }
.modal-overlay.active { opacity: 1; pointer-events: auto; }

/* MODAL HEADER DINAMICO */
.modal-header { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; background: var(--nav-bg); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); z-index: 10; border-bottom: 1px solid var(--color-border); transition: background-color 0.4s ease, border-color 0.4s ease;} 
.modal-compact-title { font-size: 17px; font-weight: 600; color: var(--color-text); opacity: 0; transform: translateY(8px); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease; flex: 1; text-align: center; pointer-events: none; }
.modal-compact-title.visible { opacity: 1; transform: translateY(0); }

/* Pulsanti Modale (Chiudi & Modalità Lettura) */
.btn-close, .btn-reader { width: 44px; height: 44px; background: var(--bg-secondary); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 300; color: var(--color-text-secondary); cursor: pointer; transition: all 0.2s; flex-shrink: 0;} 
.btn-close { padding-bottom: 4px; }
.btn-close:hover, .btn-reader:hover { background: var(--color-border); color: var(--color-text); transform: scale(1.05); } 
.btn-reader.active { background: var(--color-text); color: var(--bg-primary); transform: scale(0.95); }

.modal-content { max-width: 800px; margin: 0 auto; padding: 48px 24px 120px; width: 100%; transition: max-width 0.4s ease; } 
.modal-content h2 { font-size: 48px; font-weight: 700; text-align: left; margin-bottom: 16px; color: var(--color-text); transition: opacity 0.2s, color 0.4s ease; } 
.modal-desc { font-size: 24px; color: var(--color-text-secondary); margin-bottom: 56px; line-height: 1.4; transition: color 0.4s ease; }

/* Stili Dinamici JSON nel Modale */
.dynamic-body { transition: color 0.4s ease; }
.dynamic-body h3 { font-size: 24px; margin: 48px 0 16px; color: var(--color-text); font-weight: 600; transition: color 0.4s ease; }
.dynamic-body p { font-size: 19px; line-height: 1.5; margin-bottom: 24px; color: var(--color-text-secondary); transition: font-size 0.4s ease, color 0.4s ease; }
.dynamic-quote { margin: 48px 0; padding: 32px 40px; border-left: 4px solid var(--color-accent); background: var(--bg-secondary); border-radius: 16px; transition: background-color 0.4s ease; }
.dynamic-quote p { font-size: 24px; font-style: italic; margin-bottom: 16px; color: var(--color-text); }
.dynamic-quote span { font-size: 17px; font-weight: 600; color: var(--color-text-secondary); }
.dynamic-list { list-style: none; margin: 32px 0 48px; padding: 0; }
.dynamic-list li { margin-bottom: 24px; font-size: 19px; line-height: 1.5; color: var(--color-text-secondary); transition: font-size 0.4s ease, color 0.4s ease; }
.dynamic-list strong { color: var(--color-text); display: block; margin-bottom: 4px; font-size: 21px; transition: font-size 0.4s ease, color 0.4s ease;}

/* Accordion Nativi FAQ */
details { margin-bottom: 16px; background: var(--bg-secondary); border-radius: 24px; overflow: hidden; transition: background-color 0.4s ease; }
summary { padding: 24px 32px; font-size: 21px; font-weight: 600; color: var(--color-text); cursor: pointer; list-style: none; outline: none; line-height: 1.3; display: flex; justify-content: space-between; align-items: center; transition: color 0.4s ease; }
summary:focus-visible { outline: 3px solid var(--color-accent); border-radius: 24px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; font-size: 28px; font-weight: 300; color: var(--color-text-secondary); transition: color 0.4s ease; }
details[open] summary { border-bottom: 1px solid var(--color-border); }
details[open] summary::after { content: '−'; }
details .details-content { padding: 32px; }
details .details-content p { font-size: 19px; margin: 0; color: var(--color-text-secondary); }

/* =========================================
   READER MODE (Modalità Lettura)
   ========================================= */
.modal-overlay.reader-mode-active {
    --bg-primary: #fbf8f1; /* Effetto Carta Sepia */
    --bg-secondary: #f0ebe1;
    --color-text: #332b27;
    --color-text-secondary: #5c534e;
    --color-border: #e6ded5;
    --nav-bg: rgba(251, 248, 241, 0.9); 
}
@media (prefers-color-scheme: dark) {
    .modal-overlay.reader-mode-active {
        --bg-primary: #121212; /* Deep true dark */
        --bg-secondary: #1e1e1e;
        --color-text: #e0e0e0;
        --color-text-secondary: #a0a0a0;
        --color-border: #2c2c2c;
        --nav-bg: rgba(18, 18, 18, 0.9);
    }
}
.modal-overlay.reader-mode-active .modal-content {
    max-width: 700px; /* Layout più stretto, perfetto per la lettura */
}
/* Applica il font Serif solo al corpo del testo per un look editoriale */
.modal-overlay.reader-mode-active .dynamic-body p,
.modal-overlay.reader-mode-active .dynamic-list li,
.modal-overlay.reader-mode-active details .details-content p {
    font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    font-size: 22px; /* Ingrandisce per comodità visiva */
    line-height: 1.65;
}
.modal-overlay.reader-mode-active .dynamic-quote p {
    font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    font-size: 26px;
}

.spinner-container { display: flex; justify-content: center; align-items: center; padding: 80px 0; }
.spinner { width: 32px; height: 32px; border: 3px solid var(--color-border); border-top-color: var(--color-accent); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }


/* =======================================
   FEATURES PAGE STYLES (Apple Style)
======================================= */

.text-center { text-align: center; }
.text-gradient {
    background: linear-gradient(90deg, #007AFF, #34C759);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Typography & Spacing */
.features-hero {
    padding: 160px 20px 80px;
    max-width: 800px;
    margin: 0 auto;
}

.hero-title {
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.04em;
    margin-bottom: 24px;
}

.hero-subtitle {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    color: var(--color-text-secondary); /* Aggiunta variabile */
    font-weight: 400;
}

.feature-section {
    padding: 100px 20px;
}

.section-title {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 60px;
}

/* Mockups placeholders - CORRETTO PER DARK MODE */
.mockup-placeholder {
    background: var(--bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    font-weight: 600;
    margin-top: 40px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}
.mockup-ipad { width: 100%; max-width: 900px; height: 500px; margin: 40px auto 0; }
.mockup-iphone { width: 100%; max-width: 350px; height: 700px; margin: 0 auto; }

/* Showcase Section */
.showcase-text {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}
.showcase-text h2 { font-size: 3rem; margin-bottom: 20px; }
.showcase-text p { font-size: 1.2rem; color: var(--color-text-secondary); line-height: 1.6; }

/* Bento Grid */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Bento Card - CORRETTO PER DARK MODE */
.bento-card {
    background-color: var(--bg-secondary);
    border-radius: 32px;
    padding: 40px;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    min-height: 350px;
    border: 1px solid var(--color-border); /* Extra contrasto per dark mode */
}

.bento-card:hover {
    transform: scale(1.02);
}

.bento-card h3 { 
    font-size: 1.8rem; 
    margin-bottom: 12px; 
    color: var(--color-text);
}
.bento-card p { 
    color: var(--color-text-secondary); 
    font-size: 1.1rem; 
    line-height: 1.5; 
}

/* Sezione scura (Carriera Tracker) - Sempre dark in stile "Pro" */
.dark-section {
    background-color: #000;
    color: #fff;
    border-radius: 40px;
    margin: 40px 20px;
    padding: 120px 20px;
}

.dark-section h2 { font-size: 3.5rem; letter-spacing: -0.03em; color: #fff;}
.dark-section .large-text { font-size: 1.5rem; color: #a1a1a6; margin-bottom: 60px; }

.career-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.stat-item {
    text-align: center;
}
.stat-icon { font-size: 3rem; display: block; margin-bottom: 20px; }
.stat-item h4 { font-size: 1.5rem; margin-bottom: 15px; color: #fff;}
.stat-item p { color: #a1a1a6; line-height: 1.5; }

/* Split Layout */
.split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.split-text h2 { font-size: 3rem; margin-bottom: 30px; }
.split-text ul { list-style: none; padding: 0; }
.split-text li { margin-bottom: 24px; font-size: 1.2rem; line-height: 1.6; color: var(--color-text-secondary);}
.split-text li strong { display: block; font-size: 1.3rem; margin-bottom: 4px; color: var(--color-text);}


/* =======================================
   LEGAL PAGES STYLES (Privacy & Terms)
======================================= */

.legal-page {
    padding: 140px 20px 80px;
    background-color: var(--bg-primary);
}

.legal-container {
    max-width: 720px; /* Larghezza ottimale per la lettura (circa 65-75 caratteri per riga) */
    margin: 0 auto;
}

.legal-header {
    margin-bottom: 60px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 30px;
}

.legal-header h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    letter-spacing: -0.04em;
    margin-bottom: 8px;
}

.last-updated {
    color: var(--color-text-secondary);
    font-size: 1rem;
}

.legal-content section {
    margin-bottom: 40px;
}

.legal-content h2 {
    font-size: 1.5rem;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.legal-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin-bottom: 16px;
}

.legal-content ul {
    margin-left: 20px;
    margin-bottom: 16px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.legal-content li {
    margin-bottom: 12px;
}

.legal-content a {
    color: var(--color-accent);
    text-decoration: none;
}

.legal-content a:hover {
    text-decoration: underline;
}

/* =========================================
   MEDIA QUERIES GLOBALI UNIFICATE - MOBILE
   ========================================= */
@media(max-width: 980px) {
    .os-card.span-12, .os-card.span-7, .os-card.span-6, .os-card.span-5 { grid-column: span 12; }
    .os-card.tall { min-height: 560px; padding-top: 56px; }
    .os-card.short, .os-card.hero-card { min-height: auto; padding: 56px 40px; }
    .split-section, .split-section.reverse { flex-direction: column; gap: 48px; text-align: center; }
    .split-text, .split-section.reverse .split-text { padding: 0; }
    .split-visual { width: 100%; height: 400px; }
    .plan-safeguard { flex-direction: column; gap: 20px; padding: 32px; text-align: center; align-items: center; }
    .footer-top { flex-direction: column; gap: 48px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media(max-width: 768px) { 
    nav .links { display: none; } 
    nav .container { grid-template-columns: 1fr auto; }
    .hero { padding-top: 140px; padding-bottom: 64px; } 
    .hero h2 { font-size: 56px; } 
    .hero p { font-size: 24px; } 
    h2 { font-size: 40px; } 
    h3 { font-size: 28px; }
    
    .section-primary, .section-secondary { padding: 80px 0; }
    .section-dark { padding: 120px 0; }
    .manifesto h2 { font-size: 48px; }
    .manifesto-quote { font-size: 28px; }
    
    .footer-links-wrapper { flex-direction: column; gap: 32px; }
    .modal-compact-title { display: none; }

    /* FIX SPAZIATURE GRIGIE TRA LE SEZIONI */
    #features { padding-bottom: 0; } 
    #piani { padding-bottom: 0; } 

    /* OS GRID EDGE-TO-EDGE */
    .os-grid { padding: 0; gap: 0; }
    
    .os-card {
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: 1px solid var(--color-border);
        margin-top: -1px;
    }
    .os-card.hero-card { border-top: none; }
    .os-card:hover { transform: none; box-shadow: none; } 
    .bento-visual img { border-radius: 0; }
    
    /* PIANI EDGE-TO-EDGE */
    .plan-card {
        border-radius: 0;
        border-left: none;
        border-right: none;
        padding: 56px 24px;
        margin: 0 -24px 0 -24px; 
        width: calc(100% + 48px);
    }
    .plan-safeguard { border-radius: 20px; }

    /* DOWNLOAD CARD OTTIMIZZATA PER MOBILE */
    #download { padding: 80px 0 0 0; } 
    
    .download-wrapper {
        border-radius: 0;
        border-left: none;
        border-right: none;
        padding: 80px 24px;
        margin: 0;
        width: 100%;
    }
    .download-wrapper h2 { font-size: 40px; }
    .download-wrapper p { font-size: 21px; margin-bottom: 32px; }
    
    .download-action-station {
        display: flex;
        flex-direction: column;
        background: transparent;
        border: none;
        padding: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    
    .qr-container { display: none; }
    .download-action-text span { display: none; } 
    
    .download-action-text { width: 100%; }
    .download-action-text .btn-primary { width: 100%; padding: 18px 24px; }
    
    .faq-preview-section { padding: 0 24px; margin-top: 120px;}

    /* REGOLE MOBILE PER LA PAGINA FEATURES */
    .split-layout { grid-template-columns: 1fr; }
    .dark-section { border-radius: 20px; margin: 20px 10px; padding: 80px 20px; }
    .hero-title { font-size: 2.5rem; }
    .bento-card { min-height: 250px; padding: 30px; }

    /* REGOLE MOBILE PER LE PAGINE LEGALI E SUPPORTO */
    .legal-page { padding: 100px 20px 40px; }
}

/* =======================================
   SUPPORT PAGE STYLES
======================================= */

.support-hero {
    padding: 140px 20px 60px;
}

/* Barra di ricerca */
.search-bar-wrapper {
    position: relative;
    max-width: 680px;
    margin: 40px auto 0;
}

.search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
}

.support-search {
    width: 100%;
    padding: 24px 24px 24px 56px;
    font-size: 1.2rem;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: var(--bg-secondary);
    color: var(--color-text);
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.support-search:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px var(--focus-ring);
    background: var(--bg-primary);
}

/* Griglia Categorie */
.support-categories {
    padding: 40px 20px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.category-card {
    background: var(--bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    padding: 32px 20px;
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.category-card .icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 16px;
}

.category-card h3 {
    font-size: 1.1rem;
    margin: 0;
}

/* Articoli / Lista Guide */
.support-articles {
    padding: 80px 20px;
    max-width: 800px;
    margin: 0 auto;
}

.article-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 40px;
}

.support-article-card {
    background: var(--bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    padding: 40px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.support-article-card:hover {
    transform: scale(1.01);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.support-article-card h3 {
    font-size: 1.5rem;
    margin: 16px 0 12px;
    color: var(--color-text);
}

.support-article-card p {
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
}

/* Contatti */
.support-contact {
    padding: 60px 20px 120px;
    border-top: 1px solid var(--color-border);
    max-width: 600px;
    margin: 0 auto;
}

/* Mobile Adjustments per il Supporto */
@media (max-width: 768px) {
    .support-hero { padding: 120px 20px 40px; }
    .support-hero .hero-title { font-size: 2.5rem !important; }
    .support-articles { padding: 40px 20px; }
    .support-article-card { padding: 30px; }
    .support-search { font-size: 1rem; padding: 20px 20px 20px 48px; }
}

/* =======================================
   SUPPORT PAGE UX TWEAKS
======================================= */

/* Evidenzia visivamente la categoria selezionata */
.category-card.active {
    border-color: var(--color-accent);
    background: var(--bg-primary);
    box-shadow: 0 0 0 2px var(--color-accent);
}

/* Stile per i gruppi di articoli (Home del supporto) */
.category-group {
    margin-bottom: 64px;
}

.group-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}

.support-sources a:hover {
    text-decoration: underline !important;
}

/* Tasto Indietro - Navigazione iOS Style */
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: var(--color-accent);
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 0;
    margin-bottom: 16px;
    transition: opacity 0.2s;
}

.btn-back:hover {
    opacity: 0.7;
}

.btn-back svg {
    margin-top: 1px;
}

/* =======================================
   UX REDESIGN: HOME PAGE
======================================= */

/* Hero Immersiva */
.hero-immersive {
    padding-top: 160px;
    background: var(--bg-primary);
    position: relative;
    overflow: hidden;
}

.hero-dashboard-wrapper {
    position: relative;
    max-width: 1100px;
    margin: 80px auto 0;
    transform: perspective(1000px) rotateX(4deg);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -20px 80px rgba(0,0,0,0.08);
}

.hero-dashboard-img {
    width: 100%;
    display: block;
    border-radius: 24px 24px 0 0;
    border: 1px solid var(--color-border);
    border-bottom: none;
}

/* Sfumatura in basso per fondere l'immagine con la sezione successiva */
.hero-fade-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to bottom, transparent, var(--bg-primary));
}

/* Product Tour - Sticky Scroll Layout */
.product-tour-section {
    padding: 120px 0;
    background: var(--bg-primary);
    position: relative;
}

.sticky-layout {
    display: flex;
    align-items: flex-start;
    gap: 80px;
    max-width: 1200px;
    margin: 0 auto;
}

.sticky-text-column {
    flex: 1;
    position: sticky;
    top: 140px; /* Distanza dal menu di navigazione */
    height: fit-content;
}

.scrolling-visuals-column {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    gap: 120px; /* Spazio tra le immagini mentre scorri */
    padding-bottom: 20vh;
}

.tour-step {
    margin-bottom: 64px;
    opacity: 0.4;
    transition: opacity 0.5s ease;
}

/* Un piccolo trucco JS/CSS: quando il passo entra nello schermo, diventa opaco */
.tour-step.active, .tour-step:hover {
    opacity: 1;
}

.step-number {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-accent);
    display: block;
    margin-bottom: 16px;
    font-family: monospace;
}

.tour-step h3 {
    font-size: 2.5rem;
    line-height: 1.1;
    margin-bottom: 16px;
}

.tour-step p {
    font-size: 1.2rem;
    line-height: 1.6;
}

.visual-card {
    background: var(--bg-secondary);
    border-radius: 32px;
    padding: 24px;
    border: 1px solid var(--color-border);
    box-shadow: 0 30px 60px rgba(0,0,0,0.05);
}

.visual-card img {
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* Pricing Card VIP */
.pricing-card-vip {
    background: var(--bg-secondary);
    border: 1px solid var(--color-accent);
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.1);
    border-radius: 40px;
    padding: 64px 40px;
    max-width: 600px;
    margin: 0 auto;
}

.vip-features {
    list-style: none;
    padding: 0;
    text-align: left;
    margin: 0 auto;
    display: inline-block;
}

.vip-features li {
    font-size: 1.2rem;
    color: var(--color-text);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.vip-features li::before {
    content: "✓";
    color: var(--color-accent);
    font-weight: bold;
    font-size: 1.5rem;
}

/* Mobile Adjustments per il nuovo layout */
@media (max-width: 980px) {
    .sticky-layout {
        flex-direction: column;
        gap: 60px;
    }
    
    .sticky-text-column {
        position: relative;
        top: 0;
    }
    
    .tour-step {
        opacity: 1; /* Su mobile sono sempre visibili */
        margin-bottom: 40px;
    }

    .scrolling-visuals-column {
        gap: 40px;
        padding-bottom: 0;
    }

    .hero-dashboard-wrapper {
        transform: none;
        margin: 40px -24px 0;
        border-radius: 24px 24px 0 0;
        width: calc(100% + 48px);
    }
}


/* =======================================
   PRODUCT TOUR (Premium Fade Scroll)
======================================= */
.product-tour-section {
    padding: 120px 0;
    background: var(--bg-primary);
    position: relative;
}

.premium-scroll-layout {
    display: flex;
    align-items: flex-start;
    gap: 80px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* Colonna Testo */
.scroll-text-column {
    flex: 1;
    padding-bottom: 30vh; /* Spazio extra per far scorrere comodamente l'ultimo elemento */
    padding-top: 10vh;
}

.tour-step {
    min-height: 60vh; /* Dà ampio respiro tra un concetto e l'altro */
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0.25; /* Oscurato di default */
    transform: translateX(-20px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.tour-step.is-active {
    opacity: 1; /* Si illumina quando lo scrolli */
    transform: translateX(0);
}

.step-number {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-accent);
    display: block;
    margin-bottom: 16px;
    font-family: monospace;
}

.tour-step h3 { font-size: 2.5rem; line-height: 1.1; margin-bottom: 16px; }
.tour-step p { font-size: 1.2rem; line-height: 1.6; color: var(--color-text-secondary); }

/* Colonna Immagini Fissa */
.sticky-visual-column {
    flex: 1.2;
    position: sticky;
    top: 20vh; /* Rimane bloccata a questa altezza */
    height: 60vh; /* Altezza fissa per il contenitore */
    display: flex;
    align-items: center;
}

.sticky-visual-container {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 32px;
    background: var(--bg-secondary);
    border: 1px solid var(--color-border);
    box-shadow: 0 40px 80px rgba(0,0,0,0.06);
    overflow: hidden;
}

.tour-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; /* Invisibili di default */
    transform: scale(1.08) translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.tour-img.active {
    opacity: 1; /* Appare morbida */
    transform: scale(1) translateY(0);
}

/* Mobile Adjustments per il Premium Scroll */
@media (max-width: 980px) {
    .premium-scroll-layout { flex-direction: column; gap: 40px; }
    
    .sticky-visual-column {
        position: relative;
        top: 0;
        height: 50vh;
        width: 100%;
        order: -1; /* Mette le immagini sopra il testo su mobile */
        position: sticky;
        top: 80px;
        z-index: 10;
    }

    .scroll-text-column { padding-bottom: 10vh; padding-top: 0; }
    
    .tour-step {
        min-height: auto;
        padding: 40px 0;
        opacity: 0.4;
    }
}
/* =======================================
   TEMA 2026: SPATIAL & STACKING UI (OPTIMIZED)
======================================= */

body.theme-2026 {
    --glass-bg: rgba(255, 255, 255, 0.02);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-glow: rgba(255, 255, 255, 0.1);
    background-color: #050505; 
    color: #F5F5F7; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Texture Noise globale, ottimizzata GPU */
body.theme-2026::after {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none; 
    z-index: 9999;
    transform: translateZ(0); /* Hardware Acceleration */
}

.relative { position: relative; }
.z-10 { z-index: 10; }

/* ORBS LUMINESCENTI (GPU Accelerated) */
.glow-orb {
    position: absolute;
    top: -15%;
    left: 50%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(0, 113, 227, 0.12) 0%, transparent 60%);
    filter: blur(60px); /* Ridotto da 80 per salvare GPU */
    z-index: 0;
    pointer-events: none;
    transform: translateX(-50%) translateZ(0);
    will-change: transform, opacity;
    animation: orb-drift 12s ease-in-out infinite alternate;
}
.orb-bottom { 
    top: 20%; 
    background: radial-gradient(circle, rgba(162, 59, 255, 0.12) 0%, transparent 60%); 
    animation-delay: -6s; 
}
@keyframes orb-drift {
    0% { transform: translateX(-50%) translateY(0) scale(1); opacity: 0.6; }
    100% { transform: translateX(-45%) translateY(5%) scale(1.05); opacity: 1; }
}

/* HERO */
.hero-spatial { padding-top: 180px; position: relative; overflow: hidden; padding-bottom: 80px; }

.badge-glass {
    display: inline-block;
    padding: 8px 24px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 980px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #a1a1a6;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 32px;
}

.hero-title-massive {
    font-size: clamp(3.5rem, 8vw, 6.5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin-bottom: 24px;
}

.text-gradient-mesh {
    background: linear-gradient(135deg, #ffffff 0%, #86868b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle-glass {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    color: #a1a1a6;
    max-width: 680px;
    margin: 0 auto 48px;
    line-height: 1.6;
}

/* BUTTONS */
.btn-glass-primary {
    display: inline-block;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    padding: 18px 48px;
    font-size: 1.15rem;
    font-weight: 600;
    border-radius: 980px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}

.btn-glass-primary:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 15px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
}

/* MOCKUP 3D MAC */
.hero-mockup-container {
    margin-top: 80px;
    perspective: 2000px;
    padding: 0 20px;
}

.mockup-glass-frame {
    max-width: 900px;
    margin: 0 auto;
    background: rgba(30, 30, 32, 0.6);
    padding: 12px;
    border-radius: 24px;
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    transform: rotateX(10deg) translateY(20px);
    box-shadow: 0 40px 100px rgba(0,0,0,0.7), 0 0 60px rgba(0, 113, 227, 0.15);
    will-change: transform; /* Ottimizza render 3D */
}

.mockup-mac-header {
    display: flex;
    gap: 8px;
    padding: 6px 12px 14px;
}
.mac-dot { width: 12px; height: 12px; border-radius: 50%; }
.mac-dot.red { background: #ff5f56; }
.mac-dot.yellow { background: #ffbd2e; }
.mac-dot.green { background: #27c93f; }

.mockup-img { width: 100%; border-radius: 12px; display: block; border: 1px solid rgba(255,255,255,0.05);}

/* =======================================
   CARD STACKING (Ottimizzato)
======================================= */
.stack-section {
    padding: 120px 0 240px; 
    position: relative;
}

.section-title-glow {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    letter-spacing: -0.04em;
    background: linear-gradient(180deg, #fff 0%, #86868b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cards-stack-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 40px; 
}

.stack-card {
    position: sticky;
    top: calc(100px + var(--stack-offset, 0px)); /* Uso Variabile per stacking perfetto */
    background: #121212; 
    border: 1px solid var(--glass-border);
    border-radius: 40px;
    padding: 56px;
    box-shadow: 0 -20px 50px rgba(0,0,0,0.6);
    transform-origin: top center;
    transition: filter 0.3s ease;
    will-change: transform, filter;
}

.card-1 { --stack-offset: 0px; z-index: 1; }
.card-2 { --stack-offset: 24px; z-index: 2; }
.card-3 { --stack-offset: 48px; z-index: 3; }
.card-4 { --stack-offset: 72px; z-index: 4; }

.stack-card-content {
    display: flex;
    align-items: center;
    gap: 64px;
}

.stack-text { flex: 1; }

.step-badge {
    color: var(--color-accent);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 1rem;
    font-weight: 600;
    display: block;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.stack-text h3 {
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    letter-spacing: -0.03em;
    margin-bottom: 20px;
    color: #fff;
    line-height: 1.1;
}

.stack-text p {
    font-size: 1.2rem;
    color: #a1a1a6;
    line-height: 1.6;
}

.stack-visual {
    flex: 1.2;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.stack-visual img { width: 100%; display: block; }

/* DISABLE STACKING SU MOBILE PER UX PERFETTA */
@media (max-width: 980px) {
    .stack-card { 
        position: relative; /* Niente sticky su schermi piccoli */
        top: 0 !important; 
        transform: none !important; 
        filter: none !important;
        padding: 40px 24px; 
        border-radius: 32px; 
    }
    .stack-card-content { flex-direction: column; text-align: center; gap: 32px; }
    .stack-section { padding-bottom: 80px; }
}

/* =======================================
   BENTO VISION & CTA
======================================= */
.bento-vision-section { padding: 80px 0 120px; }

.bento-vision-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

.bento-glass-card {
    position: relative;
    overflow: hidden; 
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 36px;
    padding: 40px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s;
}

/* Spotlight Fixato */
.bento-glass-card::before {
    content: '';
    position: absolute;
    top: var(--y, 0);
    left: var(--x, 0);
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.bento-glass-card:hover::before { opacity: 1; }
.bento-glass-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.bento-glass-content { position: relative; z-index: 2; }
.bento-icon { font-size: 2.5rem; margin-bottom: 20px; }
.bento-glass-content h3 { font-size: 1.6rem; margin-bottom: 12px; color: #fff; font-weight: 600; }
.bento-glass-content p { font-size: 1.15rem; color: #a1a1a6; line-height: 1.5; }

.bento-glass-card.span-full { grid-column: span 2; }
.bento-glass-content.horizontal { display: flex; align-items: center; gap: 32px; }

@media (max-width: 768px) {
    .bento-vision-grid { grid-template-columns: 1fr; }
    .bento-glass-card.span-full { grid-column: span 1; }
    .bento-glass-content.horizontal { flex-direction: column; text-align: center; gap: 16px; }
}

/* CTA */
.final-cta-elegant { padding: 120px 20px; position: relative; overflow: hidden; }

.cta-floating-card {
    max-width: 680px;
    margin: 0 auto;
    background: rgba(20, 20, 22, 0.5); 
    border: 1px solid var(--glass-border);
    border-radius: 48px;
    padding: 80px 40px;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    box-shadow: 0 40px 80px rgba(0,0,0,0.4);
}

.app-icon-glass { width: 96px; height: 96px; margin: 0 auto 32px; }
.cta-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-bottom: 16px; color: #fff; letter-spacing: -0.02em; }
.cta-subtitle { font-size: 1.2rem; color: #a1a1a6; margin-bottom: 40px; line-height: 1.5; }

/* RESPONSIVE 2026 */
@media (max-width: 980px) {
    .stack-card-content { flex-direction: column; text-align: center; }
    .stack-card { padding: 40px 20px; border-radius: 32px; }
    .bento-vision-grid { grid-template-columns: 1fr; }
    .bento-glass-card.span-2 { grid-column: span 1; }
    .hero-mockup-container { perspective: none; }
    .mockup-glass-frame { transform: none; border-radius: 20px; }
}
/* SPOTLIGHT EFFECT SULLE CARD BENTO */
.bento-glass-card {
    position: relative;
    overflow: hidden; /* Fondamentale per non far uscire la luce */
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: 36px;
    padding: 40px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s;
}

/* Il fascio di luce generato dal mouse */
.bento-glass-card::before {
    content: '';
    position: absolute;
    top: var(--y, 0);
    left: var(--x, 0);
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.bento-glass-card:hover::before {
    opacity: 1;
}

.bento-glass-card:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.bento-glass-content {
    position: relative;
    z-index: 2; /* Tiene il testo sopra la luce */
}

body.theme-2026 {
    /* Fornisce quel look ultra-nitido tipico di macOS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* =======================================
   MODALITÀ CINEMATOGRAFICA (MARKETING DRIVEN)
======================================= */

.cinematic-mode {
    background-color: #000000; /* Nero pece assoluto per contrasto cinema */
}

/* 1. Hero Cinematografica */
.hero-cinematic {
    padding-top: 18vh;
    position: relative;
    overflow: hidden;
    min-height: 100vh; /* Prende tutto lo schermo */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.sub-cta-text {
    margin-top: 16px;
    font-size: 0.9rem;
    color: #86868b;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Il mockup sprofonda nell'ombra per dare spazio alla sezione successiva */
.hero-mockup-cinematic {
    position: relative;
    margin-top: 6vh;
    flex-grow: 1;
    perspective: 2000px;
}

.cinematic-fade-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35vh;
    background: linear-gradient(to bottom, transparent, #000000 90%);
    pointer-events: none;
    z-index: 10;
}

/* 2. Il Manifesto (Typographic Pain Points) */
.manifesto-section {
    padding: 120px 20px 200px;
    background-color: #000000;
}

.manifesto-text {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    color: #333333; /* Grigio molto scuro, quasi invisibile */
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.2;
    margin-bottom: 16px;
    transition: color 0.8s ease;
}

/* Quando appare con il JS "reveal", si illumina */
.manifesto-text.active {
    color: #a1a1a6;
}

.manifesto-text.highlight.active {
    background: linear-gradient(135deg, #ffffff 0%, #86868b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.manifesto-divider {
    width: 2px;
    height: 80px;
    background: linear-gradient(to bottom, transparent, #a1a1a6, transparent);
    margin: 40px auto;
}

/* 3. Card Stacking Aggressivo */
.cinematic-h3 {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    letter-spacing: -0.03em;
    margin-bottom: 24px;
    color: #ffffff;
    line-height: 1.05;
}

/* 4. Le Metriche (Superpoteri logici) */
.metrics-showcase-section {
    padding: 160px 0;
    background: radial-gradient(ellipse at center, #111112 0%, #000000 70%);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.cinematic-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

.metric-item {
    padding: 40px 20px;
}

.metric-number {
    font-size: clamp(4rem, 8vw, 6rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    color: #ffffff;
    margin-bottom: 8px;
    line-height: 1;
}

.metric-label {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-accent);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.metric-item p {
    font-size: 1.1rem;
    color: #a1a1a6;
    line-height: 1.5;
}

/* 5. Chiusura VIP (Urgenza Scarcity) */
.final-cta-cinematic {
    padding: 160px 20px;
    position: relative;
    overflow: hidden;
}

.vip-ticket-card {
    max-width: 800px;
    margin: 0 auto;
    background: linear-gradient(145deg, rgba(30, 30, 32, 0.6) 0%, rgba(10, 10, 12, 0.8) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top-color: rgba(255, 255, 255, 0.2);
    border-radius: 40px;
    padding: 80px 40px;
    backdrop-filter: blur(40px);
    box-shadow: 0 40px 100px rgba(0,0,0,0.8), inset 0 2px 20px rgba(255,255,255,0.05);
}

/* Pulsazione del bottone per attirare il click (Micro-interazione marketing) */
.cta-pulse {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
    animation: pulse-ring 3s infinite;
}

@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2); }
    70% { box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

@media (max-width: 768px) {
    .manifesto-text { font-size: 2rem; }
    .vip-ticket-card { padding: 56px 24px; }
    .security-badges { flex-direction: column; gap: 12px; }
}

/* =======================================
   TEMA "APPLE EVENT" (Armonia e Precisione)
======================================= */

.theme-apple.cinematic-mode {
    background-color: #000000;
    color: #F5F5F7; /* Apple Off-White */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.relative { position: relative; }
.z-10 { z-index: 10; }

/* Luce ambiente (Sottile, non invadente) */
.ambient-glow {
    position: absolute;
    top: -20%;
    left: 50%;
    width: 70vw;
    height: 70vw;
    background: radial-gradient(circle, rgba(0, 113, 227, 0.08) 0%, transparent 50%);
    filter: blur(100px);
    z-index: 0;
    transform: translateX(-50%) translateZ(0);
    pointer-events: none;
}
.bottom-glow { top: 20%; background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 60%); }

/* HERO - Tipografia Chirurgica */
.hero-cinematic {
    padding-top: 160px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.hero-content-wrapper { margin-bottom: 80px; }

.badge-hardware {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 980px;
    color: #86868B;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.hero-title-massive {
    font-size: clamp(3.5rem, 8vw, 6.5rem);
    font-weight: 700; /* Leggermente alleggerito da 800 per eleganza */
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin-bottom: 24px;
}

.text-gradient-silver {
    background: linear-gradient(135deg, #ffffff 0%, #737373 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle-elegant {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    color: #86868B;
    max-width: 640px;
    margin: 0 auto 40px;
    line-height: 1.5;
    font-weight: 500;
}

/* Bottone Elegante (Zero tamarraggine) */
.btn-apple-primary {
    display: inline-block;
    background: #F5F5F7;
    color: #000000;
    padding: 16px 40px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 980px;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
}
.btn-apple-primary:hover { transform: scale(1.02); opacity: 0.9; }
.btn-apple-primary.large { padding: 20px 48px; font-size: 1.2rem; }

.sub-cta-text { margin-top: 16px; font-size: 0.9rem; color: #555557; }

/* HARDWARE MOCKUP (Il Vetro Perfetto) */
/* HARDWARE MOCKUP (Fisica e Scroll-Driven) */
.hero-mockup-cinematic {
    position: relative;
    perspective: 2500px;
    padding: 0 20px;
    margin-top: 40px;
    z-index: 5;
    /* Custom Animation per l'entrata in scena */
    animation: hardware-rise 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.5s;
    opacity: 0;
    transform: translateY(100px) scale(0.95);
}

@keyframes hardware-rise {
    0% { opacity: 0; transform: translateY(100px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.hardware-back-glow {
    position: absolute;
    top: 20%; left: 50%;
    transform: translate(-50%, 0);
    width: 70%; height: 50%;
    background: rgba(255, 255, 255, 0.05);
    filter: blur(60px);
    z-index: -1;
    pointer-events: none;
}

.hardware-glass-frame {
    max-width: 980px;
    margin: 0 auto;
    background: rgba(20, 20, 20, 0.6); 
    border-radius: 20px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 100px rgba(0,0,0,0.8);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    padding: 8px;
    
    /* Il punto d'appoggio della rotazione 3D ora è in basso (sembra appoggiato su un tavolo) */
    transform-origin: bottom center; 
    transform: rotateX(12deg) translateY(0);
    will-change: transform;
}

.mac-window-controls {
    display: flex; gap: 8px; padding: 8px 12px 12px;
}
.mac-window-controls span { width: 10px; height: 10px; border-radius: 50%; background: #333333; }

.hardware-img { width: 100%; border-radius: 12px; display: block; border: 1px solid rgba(255,255,255,0.05); }

.cinematic-fade-bottom {
    position: absolute; bottom: -5px; left: 0; width: 100%; height: 35vh;
    background: linear-gradient(to bottom, transparent, #000000 80%);
    pointer-events: none; z-index: 10;
}

/* MANIFESTO */
.manifesto-section { padding: 80px 20px 160px; }

.manifesto-text {
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: #222222; /* Appena leggibile */
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.2;
    margin-bottom: 12px;
    transition: color 1s ease;
}
.manifesto-text.active { color: #86868B; }
.manifesto-text.highlight.active { color: #F5F5F7; }

.manifesto-divider {
    width: 1px; height: 60px;
    background: linear-gradient(to bottom, transparent, #555557, transparent);
    margin: 40px auto;
}

/* STACKING CARDS (Armonia interna) */
.stack-section { padding: 40px 0 160px; position: relative; }

.cards-stack-container {
    max-width: 1000px; margin: 0 auto; padding: 0 20px;
    display: flex; flex-direction: column; gap: 40px;
}

.stack-card {
    position: sticky;
    top: calc(120px + var(--stack-offset, 0px));
    background: #0A0A0A; /* Leggermente staccato dal nero puro */
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 32px;
    padding: 48px;
    box-shadow: 0 -20px 40px rgba(0,0,0,0.8);
    transform-origin: top center;
    will-change: transform, filter;
}

.card-1 { --stack-offset: 0px; z-index: 1; }
.card-2 { --stack-offset: 24px; z-index: 2; }
.card-3 { --stack-offset: 48px; z-index: 3; }

.stack-card-inner {
    display: flex; align-items: center; gap: 64px;
}

.stack-text { flex: 1; }
.step-badge {
    color: #86868B;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.apple-h3 {
    font-size: clamp(2rem, 3.5vw, 2.5rem);
    letter-spacing: -0.03em;
    margin-bottom: 16px;
    color: #F5F5F7;
    line-height: 1.1;
}

.stack-text p { font-size: 1.15rem; color: #86868B; line-height: 1.5; }

.stack-visual {
    flex: 1.2;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.05);
}
.stack-visual img { width: 100%; display: block; }

@media (max-width: 980px) {
    .stack-card { position: relative; top: 0 !important; transform: none !important; filter: none !important; padding: 40px 24px; }
    .stack-card-inner { flex-direction: column; text-align: center; gap: 32px; }
}

/* METRICHE (I Numeri) */
.metrics-section {
    padding: 120px 0;
    background: #050505;
    border-top: 1px solid rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.metrics-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px; max-width: 1080px; margin: 0 auto; padding: 0 20px;
}

.metric-number {
    font-size: clamp(4rem, 8vw, 5.5rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    color: #F5F5F7;
    line-height: 1;
    margin-bottom: 12px;
    font-variant-numeric: tabular-nums; /* Allinea perfettamente i numeri */
}

.metric-label { font-size: 1.2rem; font-weight: 600; color: #86868B; margin-bottom: 12px; }
.metric-item p { font-size: 1rem; color: #555557; line-height: 1.4; max-width: 240px; margin: 0 auto;}

/* CTA FINALE (Eleganza Assoluta) */
.final-cta-apple { padding: 160px 20px; position: relative; overflow: hidden; }

.premium-ticket-card {
    max-width: 720px;
    margin: 0 auto;
    background: rgba(20, 20, 20, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 40px;
    padding: 80px 40px;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    box-shadow: 0 40px 100px rgba(0,0,0,0.5);
}

.hardware-icon-frame {
    width: 80px; height: 80px; margin: 0 auto 32px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px; padding: 12px;
}
.hardware-icon-frame img { width: 100%; height: 100%; object-fit: contain; }

.apple-cta-title { font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 700; margin-bottom: 16px; color: #F5F5F7; letter-spacing: -0.03em; }
.apple-cta-subtitle { font-size: 1.2rem; color: #86868B; margin-bottom: 40px; max-width: 500px; margin-left: auto; margin-right: auto; line-height: 1.5; }

.trust-badges { margin-top: 32px; color: #555557; font-size: 0.95rem; font-weight: 500; }

/* =======================================
   FIX CINEMATICO E DARK MODE FORZATA
======================================= */

/* 1. Forza i colori dark ignorando il tema del sistema per questa pagina */
body.force-dark {
    background-color: #000000 !important;
    color: #F5F5F7 !important;
}
body.force-dark h1, body.force-dark h2, body.force-dark h3, body.force-dark p {
    color: inherit; /* Evita che regole globali per il tema chiaro sovrascrivano */
}

/* 2. Ottimizzazione altezza Hero (Zero spazi vuoti) */
.hero-cinematic {
    padding-top: 140px;
    position: relative;
    /* Rimosso min-height: 100vh per far scivolare il contenuto in modo organico */
    display: flex;
    flex-direction: column;
}

.hero-content-wrapper { 
    margin-bottom: 24px; /* Ridotto per alzare il mockup */
}

.hero-mockup-cinematic {
    position: relative;
    margin-top: 0; /* Rialzato */
    perspective: 2500px;
    padding: 0 20px;
    z-index: 5;
    /* L'animazione di base ora parte più in alto */
    animation: hardware-rise 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: translateY(60px) scale(0.96);
}

@keyframes hardware-rise {
    0% { opacity: 0; transform: translateY(60px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 3. Il Ponte Narrativo (Nuova Sezione) */
.narrative-bridge {
    padding: 0 20px 120px;
    background-color: #000000;
}

.narrative-lead {
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    color: #a1a1a6;
    line-height: 1.5;
    max-width: 800px;
    margin: 0 auto;
    font-weight: 400;
}
.narrative-lead strong {
    color: #F5F5F7;
    font-weight: 600;
}

/* Riduciamo il padding superiore del manifesto per incastrarlo meglio sotto la sfumatura */
.manifesto-section { 
    padding: 40px 20px 100px; 
    background-color: #000000;
}

/* =======================================
   MICRO-ANIMAZIONI & STORYTELLING
======================================= */

/* Blur Reveal per il Manifesto (Effetto Nebbia) */
.blur-reveal {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(30px) scale(0.98);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), 
                filter 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    color: #222222; /* Colore di partenza scuro */
}

.blur-reveal.active {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
    color: #86868B;
}

.blur-reveal.highlight.active {
    color: #F5F5F7;
}

/* Gestione dei delay per le classi .delay-1, .delay-2 ecc con blur-reveal */
.blur-reveal.delay-1 { transition-delay: 0.2s; }
.blur-reveal.delay-2 { transition-delay: 0.4s; }
.blur-reveal.delay-3 { transition-delay: 0.6s; }


/* Shimmer Effect sul Bottone Finale */
.shimmer-btn {
    position: relative;
    overflow: hidden;
}

.shimmer-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    animation: shimmer-sweep 5s infinite;
    pointer-events: none;
}

@keyframes shimmer-sweep {
    0% { left: -150%; }
    20% { left: 200%; } /* Passa velocemente */
    100% { left: 200%; } /* Pausa lunga prima di ripartire */
}

/* Stile per la "L" della lode, per farla apparire in modo aggraziato */
.metric-number .lode {
    font-size: 0.7em;
    color: var(--color-accent);
    opacity: 0;
    transition: opacity 0.5s ease 0.5s; /* Appare dopo che il counter ha finito */
}
.metric-number.done .lode {
    opacity: 1;
}
/* =======================================
   IPHONE MOCKUP (Puro CSS) - Versione XL
======================================= */

.iphone-glass-frame {
    /* Aumentato da 340px a 420px per un impatto visivo massiccio */
    max-width: 420px; 
    width: 100%;
    margin: 0 auto;
    background: #000000; /* Cornice nera del display */
    
    /* Raggi e spessori ricalcolati per la nuova scala */
    border-radius: 64px; 
    padding: 18px; 
    
    /* Bordo Titanio/Alluminio */
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15), 
                0 40px 100px rgba(0,0,0,0.8), 
                inset 0 0 0 4px #222222;
                
    position: relative;
    transform-origin: bottom center;
    transform: rotateX(12deg) translateY(0);
    will-change: transform;
}

/* Dynamic Island proporzionata al nuovo schermo */
.dynamic-island {
    position: absolute;
    top: 30px; /* Riposizionata leggermente più in basso */
    left: 50%;
    transform: translateX(-50%);
    width: 110px; /* Isola ingrandita */
    height: 34px;
    background: #000000;
    border-radius: 20px;
    z-index: 10;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.05);
}

.iphone-glass-frame .hardware-img {
    width: 100%;
    height: auto;
    /* Raggio interno perfetto (Esterno 64px - Padding 18px = 46px) */
    border-radius: 46px; 
    display: block;
    border: 1px solid rgba(255,255,255,0.08);
}

/* Sfumatura inferiore regolata per coprire il device più grande */
.cinematic-fade-bottom {
    position: absolute; 
    bottom: -20px; 
    left: 0; 
    width: 100%; 
    height: 45vh; 
    background: linear-gradient(to bottom, transparent, #000000 80%);
    pointer-events: none; 
    z-index: 10;
}

/* =======================================
   PODIO SIMMETRICO (Tre iPhone)
======================================= */

.podium-container {
    display: flex;
    align-items: center; 
    justify-content: center;
    /* Un gap negativo per farli sovrapporre leggermente */
    gap: -40px; 
    max-width: 1000px;
    margin: 0 auto;
    perspective: 2500px; 
    
    transform-origin: bottom center;
    transform: rotateX(12deg) translateY(0);
    will-change: transform;
}

/* Base comune per tutti e tre i telefoni */
.device-frame {
    position: relative;
    width: 260px; /* Stessa identica grandezza per tutti */
    background: #000000;
    border-radius: 44px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 40px 80px rgba(0,0,0,0.8), inset 0 0 0 2px #222222;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.dynamic-island-small {
    position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
    width: 70px; height: 22px; background: #000000; border-radius: 12px; z-index: 10;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.05);
}

.device-frame .hardware-img {
    width: 100%; border-radius: 34px; display: block; 
    border: 1px solid rgba(255,255,255,0.08);
}

/* DEVICE CENTRALE (Spinto in alto) */
.iphone-center {
    z-index: 3; /* Sta davanti agli altri due */
    /* Lo spostiamo in alto di 30px e lo scaliamo impercettibilmente per dargli gerarchia */
    transform: translateY(-30px) scale(1.02); 
    box-shadow: 0 60px 100px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.2), inset 0 0 0 3px #2a2a2a;
}

/* DEVICE LATERALI (Più in basso e inclinati verso l'Eroe) */
.iphone-side {
    z-index: 1; /* Stanno dietro */
}

.iphone-left {
    /* Spinto in basso, spostato a destra sotto al centro, inclinato in 3D */
    transform: translateY(30px) translateX(20px) rotateY(15deg) scale(0.95);
    /* Oscuriamo leggermente i bordi per dare focus al centro */
    filter: brightness(0.85);
}

.iphone-right {
    /* Speculare al sinistro */
    transform: translateY(30px) translateX(-20px) rotateY(-15deg) scale(0.95);
    filter: brightness(0.85);
}

.cinematic-fade-bottom {
    position: absolute; bottom: -30px; left: 0; width: 100%; height: 50vh; 
    background: linear-gradient(to bottom, transparent, #000000 85%);
    pointer-events: none; z-index: 10;
}

/* GESTIONE MOBILE */
@media (max-width: 900px) {
    .podium-container { gap: -80px; } /* Li sovrapponiamo di più per farli entrare nello schermo */
    .device-frame { width: 220px; }
}

@media (max-width: 600px) {
    /* Su telefoni piccoli mostriamo solo il device centrale, maestoso, per evitare confusione */
    .iphone-side { display: none; }
    .iphone-center { transform: translateY(0) scale(1); width: 85%; max-width: 340px; }
}

/* =======================================
   TYPOGRAPHY & GLOBAL LINKS (Premium Reset)
======================================= */

/* 1. Reset base per tutti i link */
a {
    /* Rimuove il blu/viola forzato dal browser */
    color: inherit; 
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. Stile specifico per i link testuali (dentro paragrafi o liste, es. Supporto, FAQ, Footer) */
p a, li a {
    color: #F5F5F7; /* Bianco Apple morbido */
    text-decoration: underline;
    /* La linea è semi-trasparente, molto elegante */
    text-decoration-color: rgba(255, 255, 255, 0.25); 
    /* Spinge la sottolineatura un po' più in basso rispetto al testo */
    text-underline-offset: 4px; 
    text-decoration-thickness: 1px;
}

/* 3. L'effetto "Hover" (Quando passi il mouse) */
p a:hover, li a:hover {
    color: #ffffff;
    /* La sottolineatura si illumina in modo fluido */
    text-decoration-color: rgba(255, 255, 255, 0.9); 
}

/* 4. Protezione per i bottoni (Per evitare che si sottolineino) */
a[class*="btn-"], 
.nav-logo a, 
.footer-logo a {
    text-decoration: none !important;
}